Merge branch 'v7.x' into cherry-pick-15368

mui · Nov 25, 2024 · f4e4926 · f4e4926
2 parents fdee8b2 + 28cb5de
commit f4e4926
Show file tree

Hide file tree

Showing 95 changed files with 1,207 additions and 639 deletions.
diff --git a/.circleci/config.yml b/.circleci/config.yml
@@ -13,6 +13,14 @@ parameters:
     description: The name of the workflow to run
     type: string
     default: pipeline
+  with-material-ui-6:
+    description: Use material-ui v6 for additional checks and tests
+    type: boolean
+    default: false
+  with-react-version:
+    description: The version of react to be used for the additional tests
+    type: string
+    default: stable
   e2e-base-url:
     description: The base url for running end-to-end test
     type: string
@@ -90,11 +98,10 @@ commands:
             git --no-pager diff HEAD
 
       - when:
-          condition:
-            equal: [material-ui-v6, << pipeline.parameters.workflow >>]
+          condition: << pipeline.parameters.with-material-ui-6 >>
           steps:
             - run:
-                name: Install @mui/material@next
+                name: Install @mui/material v6
                 command: pnpm use-material-ui-v6
 
 jobs:
@@ -338,50 +345,38 @@ workflows:
           requires:
             - checkout
 
-  react-next:
+  additional-tests:
     when:
-      equal: [react-next, << pipeline.parameters.workflow >>]
-    # triggers:
-    #   - schedule:
-    #       cron: '0 0 * * *'
-    #       filters:
-    #         branches:
-    #           only:
-    #             - master
+      and:
+        - equal: [additional, << pipeline.parameters.workflow >>]
+        - or:
+            - equal: [true, << pipeline.parameters.with-material-ui-6 >>]
+            - not:
+                equal: ['stable', << pipeline.parameters.with-react-version >>]
     jobs:
       - test_unit:
           <<: *default-context
-          react-version: next
-          name: test_unit-react@next
+          name: test_unit_additional
+          react-version: << pipeline.parameters.with-react-version >>
       - test_browser:
           <<: *default-context
-          react-version: next
-          name: test_browser-react@next
+          name: test_browser_additional
+          react-version: << pipeline.parameters.with-react-version >>
       - test_regressions:
           <<: *default-context
-          react-version: next
-          name: test_regressions-react@next
+          name: test_regressions_additional
+          react-version: << pipeline.parameters.with-react-version >>
       - test_e2e:
           <<: *default-context
-          react-version: next
-          name: test_e2e-react@next
+          name: test_e2e_additional
+          react-version: << pipeline.parameters.with-react-version >>
 
-  material-ui-v6:
+  additional-checks:
     when:
-      equal: [material-ui-v6, << pipeline.parameters.workflow >>]
+      and:
+        - equal: [additional, << pipeline.parameters.workflow >>]
+        - equal: [true, << pipeline.parameters.with-material-ui-6 >>]
     jobs:
-      - test_unit:
-          <<: *default-context
-          name: test_unit-material@next
-      - test_browser:
-          <<: *default-context
-          name: test_browser-material@next
-      - test_regressions:
-          <<: *default-context
-          name: test_regressions-material@next
-      - test_e2e:
-          <<: *default-context
-          name: test_e2e-material@next
       - test_types:
           <<: *default-context
-          name: test_types-material@next
+          name: test_types_additional
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -3,6 +3,81 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 7.22.3
+
+_Nov 21, 2024_
+
+We'd like to offer a big thanks to the 10 contributors who made this release possible. Here are some highlights ✨:
+
+- 📊 Charts Pro get stable. The [zoom](https://mui.com/x/react-charts/zoom-and-pan/) and [Heatmap](https://mui.com/x/react-charts/heatmap/) are now stable.
+- 🌍 Improve Chinese, Spanish, Swedish, and Turkish locales on the Data Grid
+- 🐞 Bugfixes
+
+Special thanks go out to the community contributors who have helped make this release possible:
+@CarlosLopezLg, @headironc, @viktormelin, @qerkules, @DungTiger, @hendrikpeilke, @k-rajat19.
+Following are all team members who have contributed to this release:
+@alexfauquette, @LukasTy, @MBilalShafi, @flaviendelangle.
+
+<!--/ HIGHLIGHT_ABOVE_SEPARATOR /-->
+
+### Data Grid
+
+#### `@mui/[email protected]`
+
+- [DataGrid] Add prop to override search input props in `GridColumnsManagement` (#15476) @k-rajat19
+- [DataGrid] Add test coverage for issues fixed in #15184 @MBilalShafi
+- [DataGrid] Fix memoized selectors with arguments (#15336) @MBilalShafi
+- [DataGrid] Fix right column group header border with virtualization (#15503) @hendrikpeilke
+- [DataGrid] Pass reason to `onPaginationModelChange` (#15402) @DungTiger
+- [DataGrid] Set default overlay height in flex parent layout (#15535) @cherniavskii
+- [l10n] Improve Chinese (zh-CN) locale (#15365) @headironc
+- [l10n] Improve Spanish (es-ES) locale (#15369) @CarlosLopezLg
+- [l10n] Improve Swedish (sv-SE) locale (#15371) @viktormelin
+- [l10n] Improve Turkish (tr-TR) locale (#15414) @qerkules
+
+#### `@mui/[email protected]` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/[email protected]`.
+
+#### `@mui/[email protected]` [![premium](https://mui.com/r/x-premium-svg)](https://mui.com/r/x-premium-svg-link 'Premium plan')
+
+Same changes as in `@mui/[email protected]`.
+
+### Date and Time Pickers
+
+#### `@mui/[email protected]`
+
+- [pickers] Always use `props.value` when it changes (#15500) @flaviendelangle
+- [pickers] Ensure internal value timezone is updated (#15491) @LukasTy
+- [pickers] Fix `DateTimeRangePicker` error when using format without time (#15341) @fxnoob
+- [pickers] Fix unused code in `PickersToolbar` component (#15525) @LukasTy
+
+#### `@mui/[email protected]` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/[email protected]`, plus:
+
+- [DateTimeRangePicker] Use time in `referenceDate` when selecting date (#15431) @LukasTy
+
+### Charts
+
+#### `@mui/[email protected]`
+
+No changes since `@mui/[email protected]`.
+
+#### `@mui/[email protected]` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+- [charts-pro] Fix missing typeOverload (#15400) @alexfauquette
+
+### Docs
+
+- [docs] Add `PickersPopper` component to customization playground (#15397) @LukasTy
+- [docs] Add `next` version links (#15423) @LukasTy
+- [docs] Use the `loading` state in the demos (#15538) @cherniavskii
+
+- [code-infra] Tentative fix for Argos flaky screenshot tests (#15399) @JCQuintas
+- [docs-infra] Transpile `.ts` demo files (#15421) @KenanYusuf
+- [core] Clarify release version bump strategy (#15536) @cherniavskii
+
 ## 7.22.2
 
 _Nov 8, 2024_

diff --git a/docs/data/charts/getting-started/getting-started.md b/docs/data/charts/getting-started/getting-started.md
@@ -41,8 +41,8 @@ Please note that [react](https://www.npmjs.com/package/react) and [react-dom](ht
 
 ```json
 "peerDependencies": {
-  "react": "^17.0.0 || ^18.0.0",
-  "react-dom": "^17.0.0 || ^18.0.0"
+  "react": "^17.0.0 || ^18.0.0 || ^19.0.0",
+  "react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0"
 },
 ```
 

diff --git a/docs/data/charts-component-api-pages.ts → docs/data/chartsApiPages.ts b/docs/data/charts-component-api-pages.ts → docs/data/chartsApiPages.ts
@@ -1,6 +1,6 @@
 import type { MuiPage } from 'docs/src/MuiPage';
 
-const apiPages: MuiPage[] = [
+const chartsApiPages: MuiPage[] = [
   {
     pathname: '/x/api/charts/animated-area',
     title: 'AnimatedArea',
@@ -230,4 +230,4 @@ const apiPages: MuiPage[] = [
     title: 'SparkLineChart',
   },
 ];
-export default apiPages;
+export default chartsApiPages;
diff --git a/docs/data/data-grid/custom-columns/cell-renderers/rating.tsx b/docs/data/data-grid/custom-columns/cell-renderers/rating.tsx
@@ -46,7 +46,7 @@ function EditRating(props: GridRenderEditCellParams<any, number>) {
     changedThroughKeyboard.current = false;
   };
 
-  const handleRef = (element: HTMLElement | undefined) => {
+  const handleRef = (element: HTMLElement | null) => {
     if (element) {
       if (value !== 0) {
         element.querySelector<HTMLElement>(`input[value="${value}"]`)!.focus();

diff --git a/docs/data/data-grid/getting-started/getting-started.md b/docs/data/data-grid/getting-started/getting-started.md
@@ -35,8 +35,8 @@ Please note that [react](https://www.npmjs.com/package/react) and [react-dom](ht
 
 ```json
 "peerDependencies": {
-  "react": "^17.0.0 || ^18.0.0",
-  "react-dom": "^17.0.0 || ^18.0.0"
+  "react": "^17.0.0 || ^18.0.0 || ^19.0.0",
+  "react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0"
 },
 ```
 

diff --git a/...ata/data-grid/layout/AutoHeightOverlay.js → ...ata/data-grid/layout/GridOverlayHeight.js b/...ata/data-grid/layout/AutoHeightOverlay.js → ...ata/data-grid/layout/GridOverlayHeight.js
@@ -56,11 +56,10 @@ function CustomNoRowsOverlay() {
   );
 }
 
-export default function AutoHeightOverlay() {
+export default function GridOverlayHeight() {
   return (
-    <Box sx={{ width: '100%' }}>
+    <Box sx={{ width: '100%', display: 'flex', flexDirection: 'column' }}>
       <DataGrid
-        autoHeight
         columns={[{ field: 'ID' }, { field: 'First name' }, { field: 'Last name' }]}
         rows={[]}
         slots={{ noRowsOverlay: CustomNoRowsOverlay }}

diff --git a/...ta/data-grid/layout/AutoHeightOverlay.tsx → ...ta/data-grid/layout/GridOverlayHeight.tsx b/...ta/data-grid/layout/AutoHeightOverlay.tsx → ...ta/data-grid/layout/GridOverlayHeight.tsx
@@ -56,11 +56,10 @@ function CustomNoRowsOverlay() {
   );
 }
 
-export default function AutoHeightOverlay() {
+export default function GridOverlayHeight() {
   return (
-    <Box sx={{ width: '100%' }}>
+    <Box sx={{ width: '100%', display: 'flex', flexDirection: 'column' }}>
       <DataGrid
-        autoHeight
         columns={[{ field: 'ID' }, { field: 'First name' }, { field: 'Last name' }]}
         rows={[]}
         slots={{ noRowsOverlay: CustomNoRowsOverlay }}

diff --git a/...grid/layout/AutoHeightOverlay.tsx.preview → ...grid/layout/GridOverlayHeight.tsx.preview b/...grid/layout/AutoHeightOverlay.tsx.preview → ...grid/layout/GridOverlayHeight.tsx.preview
@@ -1,5 +1,4 @@
 <DataGrid
-  autoHeight
   columns={[{ field: 'ID' }, { field: 'First name' }, { field: 'Last name' }]}
   rows={[]}
   slots={{ noRowsOverlay: CustomNoRowsOverlay }}

diff --git a/docs/data/data-grid/layout/layout.md b/docs/data/data-grid/layout/layout.md
@@ -41,6 +41,17 @@ You can predefine dimensions for the parent of the Data Grid.
 
 {{"demo": "FixedSizeGrid.js", "bg": "inline"}}
 
+## Overlay height
+
+When data grid has no content, overlays (such as
+["Loading"](/x/react-data-grid/overlays/#loading-overlay) or
+["No rows"](/x/react-data-grid/overlays/#no-rows-overlay))
+take the height of two rows by default.
+
+To customize the overlay height, use the `--DataGrid-overlayHeight` CSS variable.
+
+{{"demo": "GridOverlayHeight.js", "bg": "inline"}}
+
 ## Auto height
 
 :::error
@@ -52,17 +63,6 @@ This means that the Data Grid's height will be determined by the number of rows,
 
 {{"demo": "AutoHeightGrid.js", "bg": "inline"}}
 
-### Overlay height
-
-When `autoHeight` is enabled, grid overlays (such as
-["Loading"](/x/react-data-grid/overlays/#loading-overlay) or
-["No rows"](/x/react-data-grid/overlays/#no-rows-overlay))
-take the height of two rows by default.
-
-To customize the overlay height, use the `--DataGrid-overlayHeight` CSS variable.
-
-{{"demo": "AutoHeightOverlay.js", "bg": "inline"}}
-
 ## API
 
 - [DataGrid](/x/api/data-grid/data-grid/)

diff --git a/docs/data/data-grid/master-detail/LazyLoadingDetailPanel.js b/docs/data/data-grid/master-detail/LazyLoadingDetailPanel.js
@@ -13,6 +13,8 @@ import {
   randomId,
 } from '@mui/x-data-grid-generator';
 
+const DetailPanelDataCache = React.createContext(new Map());
+
 async function getProducts(orderId) {
   await new Promise((resolve) => {
     setTimeout(resolve, 1000);
@@ -32,11 +34,18 @@ function DetailPanelContent({ row: rowProp }) {
   const [isLoading, setLoading] = React.useState(true);
   const [products, setProducts] = React.useState([]);
 
+  const detailPanelDataCache = React.useContext(DetailPanelDataCache);
+
   React.useEffect(() => {
     let isMounted = true;
     (async () => {
-      console.log('fetching detail panel content for row', rowProp.id);
-      const result = await getProducts(rowProp.id);
+      if (!detailPanelDataCache.has(rowProp.id)) {
+        console.log('fetching detail panel content for row', rowProp.id);
+        const response = await getProducts(rowProp.id);
+        // Store the data in cache so that when detail panel unmounts due to virtualization, the data is not lost
+        detailPanelDataCache.set(rowProp.id, response);
+      }
+      const result = detailPanelDataCache.get(rowProp.id);
 
       if (!isMounted) {
         return;
@@ -49,7 +58,7 @@ function DetailPanelContent({ row: rowProp }) {
     return () => {
       isMounted = false;
     };
-  }, [rowProp.id]);
+  }, [rowProp.id, detailPanelDataCache]);
 
   return (
     <Stack
@@ -111,14 +120,34 @@ const getDetailPanelContent = (params) => <DetailPanelContent row={params.row} /
 const getDetailPanelHeight = () => 240;
 
 export default function LazyLoadingDetailPanel() {
+  const detailPanelDataCache = React.useRef(new Map()).current;
+
+  const handleDetailPanelExpansionChange = React.useCallback(
+    (newExpandedRowIds) => {
+      // Only keep cached data for detail panels that are still expanded
+      const preservedEntries = newExpandedRowIds.map((id) => [
+        id,
+        detailPanelDataCache.get(id),
+      ]);
+      detailPanelDataCache.clear();
+      preservedEntries.forEach(
+        ([id, value]) => value && detailPanelDataCache.set(id, value),
+      );
+    },
+    [detailPanelDataCache],
+  );
+
   return (
     <Box sx={{ width: '100%', height: 400 }}>
-      <DataGridPro
-        columns={columns}
-        rows={rows}
-        getDetailPanelHeight={getDetailPanelHeight}
-        getDetailPanelContent={getDetailPanelContent}
-      />
+      <DetailPanelDataCache.Provider value={detailPanelDataCache}>
+        <DataGridPro
+          columns={columns}
+          rows={rows}
+          getDetailPanelHeight={getDetailPanelHeight}
+          getDetailPanelContent={getDetailPanelContent}
+          onDetailPanelExpandedRowIdsChange={handleDetailPanelExpansionChange}
+        />
+      </DetailPanelDataCache.Provider>
     </Box>
   );
 }