Merge remote-tracking branch 'upstream/master' into renovate/react

.codesandbox/ci.json

@@ -11,7 +11,6 @@
     "packages/x-date-pickers",
     "packages/x-date-pickers-pro",
     "packages/x-charts",
-    "packages/x-charts-pro",
     "packages/x-tree-view"
   ],
   "publishDirectory": {

.github/workflows/cherry-pick-master-to-v6.yml

@@ -18,7 +18,7 @@ jobs:
     if: ${{ contains(github.event.pull_request.labels.*.name, 'needs cherry-pick') && github.event.pull_request.merged == true }}
     steps:
       - name: Checkout
-        uses: actions/checkout@a5ac7e51b41094c92402da3b24376905380afc29 # v4.1.6
+        uses: actions/checkout@692973e3d937129bcbf40652eb9f2f61becf3332 # v4.1.7
         with:
           fetch-depth: 0
       - name: Cherry pick and create the new PR

.github/workflows/cherry-pick-next-to-master.yml

@@ -18,7 +18,7 @@ jobs:
     if: ${{ contains(github.event.pull_request.labels.*.name, 'needs cherry-pick') && github.event.pull_request.merged == true }}
     steps:
       - name: Checkout
-        uses: actions/checkout@a5ac7e51b41094c92402da3b24376905380afc29 # v4.1.6
+        uses: actions/checkout@692973e3d937129bcbf40652eb9f2f61becf3332 # v4.1.7
         with:
           fetch-depth: 0
       - name: Cherry pick and create the new PR

.github/workflows/codeql.yml

@@ -16,10 +16,10 @@ jobs:
       security-events: write
     steps:
       - name: Checkout repository
-        uses: actions/checkout@a5ac7e51b41094c92402da3b24376905380afc29 # v4.1.6
+        uses: actions/checkout@692973e3d937129bcbf40652eb9f2f61becf3332 # v4.1.7
       # Initializes the CodeQL tools for scanning.
       - name: Initialize CodeQL
-        uses: github/codeql-action/init@2e230e8fe0ad3a14a340ad0815ddb96d599d2aff # v3.25.8
+        uses: github/codeql-action/init@23acc5c183826b7a8a97bce3cecc52db901f8251 # v3.25.10
         with:
           languages: typescript
           # If you wish to specify custom queries, you can do so here or in a config file.
@@ -29,4 +29,4 @@ jobs:
           # Details on CodeQL's query packs refer to : https://docs.github.com/en/code-security/code-scanning/automatically-scanning-your-code-for-vulnerabilities-and-errors/configuring-code-scanning#using-queries-in-ql-packs
           # queries: security-extended,security-and-quality
       - name: Perform CodeQL Analysis
-        uses: github/codeql-action/analyze@2e230e8fe0ad3a14a340ad0815ddb96d599d2aff # v3.25.8
+        uses: github/codeql-action/analyze@23acc5c183826b7a8a97bce3cecc52db901f8251 # v3.25.10

.github/workflows/l10n.yml

@@ -17,7 +17,7 @@ jobs:
       issues: write
     steps:
       - run: echo "${{ github.actor }}"
-      - uses: actions/checkout@a5ac7e51b41094c92402da3b24376905380afc29 # v4.1.6
+      - uses: actions/checkout@692973e3d937129bcbf40652eb9f2f61becf3332 # v4.1.7
       - uses: pnpm/action-setup@fe02b34f77f8bc703788d5817da081398fad5dd2 # v4.0.0
         with:
           run_install: false

.github/workflows/scorecards.yml

@@ -23,7 +23,7 @@ jobs:
 
     steps:
       - name: Checkout code
-        uses: actions/checkout@a5ac7e51b41094c92402da3b24376905380afc29 # v4.1.6
+        uses: actions/checkout@692973e3d937129bcbf40652eb9f2f61becf3332 # v4.1.7
         with:
           persist-credentials: false
 
@@ -44,6 +44,6 @@ jobs:
 
       # Upload the results to GitHub's code scanning dashboard.
       - name: Upload to code-scanning
-        uses: github/codeql-action/upload-sarif@2e230e8fe0ad3a14a340ad0815ddb96d599d2aff # v3.25.8
+        uses: github/codeql-action/upload-sarif@23acc5c183826b7a8a97bce3cecc52db901f8251 # v3.25.10
         with:
           sarif_file: results.sarif

.github/workflows/vale-action.yml

@@ -12,7 +12,7 @@ jobs:
       contents: read
       pull-requests: write
     steps:
-      - uses: actions/checkout@a5ac7e51b41094c92402da3b24376905380afc29 # v4.1.6
+      - uses: actions/checkout@692973e3d937129bcbf40652eb9f2f61becf3332 # v4.1.7
       - uses: errata-ai/vale-action@38bf078c328061f59879b347ca344a718a736018 # v2.1.0
         with:
           reporter: github-pr-review

CHANGELOG.md

@@ -3,6 +3,88 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 7.7.1
+
+_Jun 21, 2024_
+
+We'd like to offer a big thanks to the 14 contributors who made this release possible. Here are some highlights ✨:
+
+- 🌍 Improve Portuguese (pt-PT) locale on the Data Grid
+- 🌍 Improve Danish (da-DK) locale on the Date and Time Pickers
+- 🐞 Bugfixes
+- 📚 Documentation improvements
+
+<!--/ HIGHLIGHT_ABOVE_SEPARATOR /-->
+
+### Data Grid
+
+#### `@mui/x-data-grid@7.7.1`
+
+- [DataGrid][docs] Clarify enabling pagination (#13350) @oliviertassinari
+- [DataGrid] Fix CSV export escaping for non-string values (#13560) @joeycumines-scw
+- [l10n] Improve Portuguese (pt-PT) locale (#13348) @joaosreis
+
+#### `@mui/x-data-grid-pro@7.7.1` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-data-grid@7.7.1`, plus:
+
+- [DataGrid] Warn about `getTreeDataPath` reference (#13519) @cherniavskii
+
+#### `@mui/x-data-grid-premium@7.7.1` [![premium](https://mui.com/r/x-premium-svg)](https://mui.com/r/x-premium-svg-link 'Premium plan')
+
+Same changes as in `@mui/x-data-grid-pro@7.7.1`.
+
+### Date and Time Pickers
+
+#### `@mui/x-date-pickers@7.7.1`
+
+- [fields] Prevent digit editing on the `Space` key down (#13510) @flaviendelangle
+- [l10n] Improve Danish (da-DK) locale (#13375) @jacrowland1
+- [pickers] Add context to `onAccept` callback (#13511) @flaviendelangle
+- [pickers] Always use the same timezone in the field, the view and the layout components (#13481) @flaviendelangle
+- [pickers] Fix `AdapterDateFnsV3` generated method types (#13464) @alexey-kozlenkov
+- [pickers] Fix controlled `view` behavior (#13552) @LukasTy
+- [TimePicker] Improves RTL verification for the time pickers default views  (#13447) @arthurbalduini
+
+#### `@mui/x-date-pickers-pro@7.7.1` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-date-pickers@7.7.1`, plus:
+
+- [DateRangePicker] Add accessible name to calendar grid (#13538) @LukasTy
+
+### Charts
+
+#### `@mui/x-charts@7.7.1`
+
+- [charts] Divide `CartesianProvider` to use logic in Pro package (#13531) @JCQuintas
+- [charts] Do not publish the pro package (#13539) @alexfauquette
+- [charts] Export `Pro` versions of regular charts (#13547) @JCQuintas
+- [charts] Prepare `ChartContainerPro` for future Zoom changes (#13532) @JCQuintas
+- [charts] Remove unnecessary proptypes from internal component (#13518) @JCQuintas
+
+### Tree View
+
+#### `@mui/x-tree-view@7.7.1`
+
+- [TreeView] Improve typing to support optional dependencies in plugins and in the item (#13523) @flaviendelangle
+- [TreeView] Move `useTreeViewId` to the core plugins (#13566) @flaviendelangle
+- [TreeView] Remove unused state from `useTreeViewId` (#13579) @flaviendelangle
+- [TreeView] Support `itemId` with escaping characters when using `SimpleTreeView` (#13487) @oukunan
+
+### Docs
+
+- [docs] Add section about the new uncovered product watermark (#13568) @michelengelen
+- [docs] Document the `PickerValidDate` type override (#13476) @flaviendelangle
+- [docs] Fix typo (#13507) @anshtiwatne
+- [docs] Remove "-" in heat-map and tree-map urls (#13569) @alexfauquette
+- [docs] Use dedicated tab for weather dataset (#13513) @alexfauquette
+- [x-license] license update proposal (#13459) @michelengelen
+
+### Core
+
+- [core] Fix failing CI test (#13574) @alexfauquette
+- [infra] Remove explicit `@testing-library/react` dependency (#13478) @LukasTy
+
 ## 7.7.0
 
 _Jun 13, 2024_

docs/.link-check-errors.txt

@@ -1,2 +1,3 @@
 Broken links found by `docs:link-check` that exist:
 
+- https://mui.com/x/react-charts/heat-map/

docs/data/data-grid/pagination/PageSizeAutoPremium.js

@@ -127,12 +127,10 @@ export default function PageSizeAutoPremium() {
   return (
     <div style={{ height: 320, width: '100%' }}>
       <DataGridPremium
+        pagination
         rows={rows}
         columns={columns}
-        slots={{
-          toolbar: CustomToolbar,
-        }}
-        pagination
+        slots={{ toolbar: CustomToolbar }}
         autoPageSize
       />
     </div>

docs/data/data-grid/pagination/PageSizeAutoPremium.tsx

@@ -129,12 +129,10 @@ export default function PageSizeAutoPremium() {
   return (
     <div style={{ height: 320, width: '100%' }}>
       <DataGridPremium
+        pagination
         rows={rows}
         columns={columns}
-        slots={{
-          toolbar: CustomToolbar,
-        }}
-        pagination
+        slots={{ toolbar: CustomToolbar }}
         autoPageSize
       />
     </div>

docs/data/data-grid/pagination/PageSizeAutoPremium.tsx.preview

@@ -1,9 +1,7 @@
 <DataGridPremium
+  pagination
   rows={rows}
   columns={columns}
-  slots={{
-    toolbar: CustomToolbar,
-  }}
-  pagination
+  slots={{ toolbar: CustomToolbar }}
   autoPageSize
 />

docs/data/data-grid/pagination/PaginationCommunityNoSnap.js

@@ -0,0 +1,17 @@
+import * as React from 'react';
+import { DataGrid } from '@mui/x-data-grid';
+import { useDemoData } from '@mui/x-data-grid-generator';
+
+export default function PaginationCommunityNoSnap() {
+  const { data } = useDemoData({
+    dataSet: 'Commodity',
+    rowLength: 500,
+    maxColumns: 6,
+  });
+
+  return (
+    <div style={{ height: 300, width: '100%' }}>
+      <DataGrid {...data} />
+    </div>
+  );
+}

docs/data/data-grid/pagination/PaginationCommunityNoSnap.tsx

@@ -0,0 +1,17 @@
+import * as React from 'react';
+import { DataGrid } from '@mui/x-data-grid';
+import { useDemoData } from '@mui/x-data-grid-generator';
+
+export default function PaginationCommunityNoSnap() {
+  const { data } = useDemoData({
+    dataSet: 'Commodity',
+    rowLength: 500,
+    maxColumns: 6,
+  });
+
+  return (
+    <div style={{ height: 300, width: '100%' }}>
+      <DataGrid {...data} />
+    </div>
+  );
+}

docs/data/data-grid/pagination/PaginationCommunityNoSnap.tsx.preview

@@ -0,0 +1 @@
+<DataGrid {...data} />

docs/data/data-grid/pagination/pagination.md

@@ -2,6 +2,27 @@
 
 <p class="description">Easily paginate your rows and only fetch what you need.</p>
 
+## Enabling pagination
+
+The default pagination behavior depends on your plan:
+
+:::info
+Exported CSV and Excel files include all data and disregard pagination by default.
+To apply pagination to exported files, review the available [row selectors](/x/react-data-grid/export/#exported-rows).
+:::
+
+### Community plan
+
+For the Community Data Grid, pagination is enabled by default and cannot be disabled.
+
+{{"demo": "PaginationCommunityNoSnap.js", "bg": "inline"}}
+
+### Pro [<span class="plan-pro"></span>](/x/introduction/licensing/#pro-plan 'Pro plan') and Premium [<span class="plan-premium"></span>](/x/introduction/licensing/#premium-plan 'Premium plan')
+
+For the Pro and Premium Data Grid, pagination is disabled by default; use the `pagination` prop to enable it.
+
+{{"demo": "PageSizeAutoPremium.js", "bg": "inline"}}
+
 ## Size of the page
 
 The `DataGrid` (MIT license) is limited to pages of up to 100 rows.
@@ -38,20 +59,6 @@ You cannot use both the `autoPageSize` and `autoHeight` props at the same time b
 
 {{"demo": "PageSizeAuto.js", "bg": "inline"}}
 
-## Pagination on Pro and Premium [<span class="plan-pro"></span>](/x/introduction/licensing/#pro-plan 'Pro plan')[<span class="plan-premium"></span>](/x/introduction/licensing/#premium-plan 'Premium plan')
-
-The default pagination behavior depends on your plan.
-
-- On the `DataGrid`, pagination is enabled by default and cannot be disabled.
-- On the `DataGridPro` and `DataGridPremium`, pagination is disabled by default; use the `pagination` prop to enable it.
-
-The following example activates pagination on a `DataGridPremium` component.
-
-:::info
-On a side note, exported CSV and Excel files will contain the full data and disregard the pagination by default. To apply pagination on exported files, please check the available [row selectors](/x/react-data-grid/export/#exported-rows).
-:::
-{{"demo": "PageSizeAutoPremium.js", "bg": "inline"}}
-
 ## Pagination model
 
 The pagination model is an object containing the current page and the size of the page. The default value is `{ page: 0, pageSize: 100 }`. To change the default value, make it controlled by `paginationModel` prop or initialize a custom value using `initialState.pagination.paginationModel`.
@@ -222,7 +229,7 @@ If an external data fetching library sets the values to undefined during loading
 
 The Data Grid uses the [Table Pagination](/material-ui/api/table-pagination/) component from the Material UI library which doesn't support `estimated` row count. Until this is supported natively by the Table Pagination component, a workaround to make the localization work is to provide the `labelDisplayedRows` function to the `localeText.MuiTablePagination` property as per the locale you are interested in.
 
-The Grid injects an additional variable `estimated` to the `labelDisplayedRows` function which you can use to accomodate the estimated row count.
+The Grid injects an additional variable `estimated` to the `labelDisplayedRows` function which you can use to accommodate the estimated row count.
 The following example demonstrates how to show the estimated row count in the pagination footer in the Croatian (hr-HR) language.
 
 ```jsx
@@ -243,7 +250,7 @@ const labelDisplayedRows = ({ from, to, count, estimated }) => {
 />
 ```
 
-For more information, see [Translation keys](/x/react-data-grid/localization/#translation-keys) section of the localization documentation.
+For more information, see the [Translation keys](/x/react-data-grid/localization/#translation-keys) section of the localization documentation.
 
 :::
 

docs/data/introduction/licensing/licensing.md

@@ -290,15 +290,27 @@ This happens if you try to use `DataGridPremium` with a license key for the Pro
 To solve the issue, you can [upgrade your plan](https://mui.com/r/x-get-license/?scope=premium) from Pro to Premium.
 Or if you didn\'t intend to use Premium features, you can replace the import of `@mui/x-data-grid-premium` with `@mui/x-data-grid-pro`.
 
-### 5. Invalid license key
+### 5. Component not included in your license
+
+This error indicates that the component you are trying to use is not covered by your current license.
+This happens if you try to use `ChartsPro` or `TreeViewPro` with a license that does not cover these products.
+
+To solve the issue, please consider an earlier [renewal](https://mui.com/r/x-get-license/).
+
+You might be eligible for a discount if you have an active Pro license.
+Contact [sales@mui.com](mailto:sales@mui.com?subject=My%20upgrade%20discount) for additional information.
+
+Or if you didn't intend to use the Pro features, you can replace the import of `@mui/x-charts-pro` or `@mui/x-tree-view-pro` with `@mui/x-charts` or `@mui/x-tree-view` respectively.
+
+### 6. Invalid license key
 
 This error indicates that your MUI X license key format isn't valid.
 It could be because the license key is missing a character or has a typo.
 
 To solve the issue, you need to double-check that `setLicenseKey()` is called with the right argument.
 Please check the [license key installation](/x/introduction/licensing/#license-key).
 
-### 6. Invalid license key (TypeError: extracting license expiry timestamp)
+### 7. Invalid license key (TypeError: extracting license expiry timestamp)
 
 The following JavaScript exception indicates that you may be trying to validate the new license's key format on an older version of the npm package.
 

docs/data/pages.ts

@@ -460,9 +460,9 @@ const pages: MuiPage[] = [
             subheader: 'Future components',
             children: [
               { pathname: '/x/react-charts/radar', planned: true },
-              { pathname: '/x/react-charts/tree-map', title: 'Treemap', planned: true },
+              { pathname: '/x/react-charts/treemap', title: 'Treemap', planned: true },
               {
-                pathname: '/x/react-charts/heat-map',
+                pathname: '/x/react-charts/heatmap',
                 title: 'Heatmap',
                 plan: 'pro',
                 planned: true,

docs/data/tree-view/rich-tree-view/headless/LogExpandedItems.tsx

@@ -37,7 +37,7 @@ type TreeViewLogExpandedSignature = TreeViewPluginSignature<{
   // The parameters of this plugin as they are passed to the plugin after calling `plugin.getDefaultizedParams`
   defaultizedParams: TreeViewLogExpandedDefaultizedParameters;
   // Dependencies of this plugin (we need the expansion plugin to access its model)
-  dependantPlugins: [UseTreeViewExpansionSignature];
+  dependencies: [UseTreeViewExpansionSignature];
 }>;
 
 const useTreeViewLogExpanded: TreeViewPlugin<TreeViewLogExpandedSignature> = ({

docs/data/tree-view/rich-tree-view/headless/headless.md

@@ -283,7 +283,7 @@ type UseCustomPluginSignature = TreeViewPluginSignature<{
   // The name of the models defined by your plugin
   modelNames: UseCustomPluginModelNames;
   // The plugins this plugin needs to work correctly
-  dependantPlugins: UseCustomPluginDependantPlugins;
+  dependencies: UseCustomPluginDependantPlugins;
 }>;
 ```
 
@@ -317,7 +317,7 @@ type UseCustomPluginSignature = TreeViewPluginSignature<{
   contextValue: { customPlugin: { enabled: boolean } };
   modelNames: 'customModel';
   // We want to have access to the expansion models and methods of the expansion plugin.
-  dependantPlugins: [UseTreeViewExpansionSignature];
+  dependencies: [UseTreeViewExpansionSignature];
 }>;
 ```
 

docs/package.json

@@ -81,7 +81,7 @@
     "react": "^18.3.1",
     "react-docgen": "^5.4.3",
     "react-dom": "^18.3.1",
-    "react-hook-form": "^7.51.5",
+    "react-hook-form": "^7.52.0",
     "react-is": "^18.3.1",
     "react-router": "^6.23.1",
     "react-router-dom": "^6.23.1",