Merge branch 'master' into renovate/react-transition-group-4.x

mui · Dec 16, 2024 · ed75f8d · ed75f8d
2 parents 7a5c265 + 2dd8661
commit ed75f8d
Show file tree

Hide file tree

Showing 63 changed files with 701 additions and 756 deletions.
diff --git a/.circleci/config.yml b/.circleci/config.yml
@@ -232,7 +232,7 @@ jobs:
   test_browser:
     <<: *default-job
     docker:
-      - image: mcr.microsoft.com/playwright:v1.49.0-noble
+      - image: mcr.microsoft.com/playwright:v1.49.1-noble
     steps:
       - checkout
       - install_js:
@@ -263,7 +263,7 @@ jobs:
   test_e2e:
     <<: *default-job
     docker:
-      - image: mcr.microsoft.com/playwright:v1.49.0-noble
+      - image: mcr.microsoft.com/playwright:v1.49.1-noble
     steps:
       - checkout
       - install_js:
@@ -274,7 +274,7 @@ jobs:
   test_e2e_website:
     <<: *default-job
     docker:
-      - image: mcr.microsoft.com/playwright:v1.49.0-noble
+      - image: mcr.microsoft.com/playwright:v1.49.1-noble
     steps:
       - checkout
       - install_js:
@@ -287,7 +287,7 @@ jobs:
   test_regressions:
     <<: *default-job
     docker:
-      - image: mcr.microsoft.com/playwright:v1.49.0-noble
+      - image: mcr.microsoft.com/playwright:v1.49.1-noble
     steps:
       - checkout
       - install_js:

diff --git a/.github/workflows/codeql.yml b/.github/workflows/codeql.yml
@@ -19,7 +19,7 @@ jobs:
         uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4.2.2
       # Initializes the CodeQL tools for scanning.
       - name: Initialize CodeQL
-        uses: github/codeql-action/init@aa578102511db1f4524ed59b8cc2bae4f6e88195 # v3.27.6
+        uses: github/codeql-action/init@df409f7d9260372bd5f19e5b04e83cb3c43714ae # v3.27.9
         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@aa578102511db1f4524ed59b8cc2bae4f6e88195 # v3.27.6
+        uses: github/codeql-action/analyze@df409f7d9260372bd5f19e5b04e83cb3c43714ae # v3.27.9
diff --git a/.github/workflows/scorecards.yml b/.github/workflows/scorecards.yml
@@ -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@aa578102511db1f4524ed59b8cc2bae4f6e88195 # v3.27.6
+        uses: github/codeql-action/upload-sarif@df409f7d9260372bd5f19e5b04e83cb3c43714ae # v3.27.9
         with:
           sarif_file: results.sarif
diff --git a/docs/data/data-grid/localization/data.json b/docs/data/data-grid/localization/data.json
@@ -155,7 +155,7 @@
     "languageTag": "ko-KR",
     "importName": "koKR",
     "localeName": "Korean",
-    "missingKeysCount": 45,
+    "missingKeysCount": 0,
     "totalKeysCount": 132,
     "githubLink": "https://github.com/mui/mui-x/blob/master/packages/x-data-grid/src/locales/koKR.ts"
   },

diff --git a/docs/data/data-grid/master-detail/ControlMasterDetail.js b/docs/data/data-grid/master-detail/ControlMasterDetail.js
@@ -11,7 +11,7 @@ import Alert from '@mui/material/Alert';
 
 export default function ControlMasterDetail() {
   const [detailPanelExpandedRowIds, setDetailPanelExpandedRowIds] = React.useState(
-    [],
+    () => new Set(),
   );
 
   const handleDetailPanelExpandedRowIdsChange = React.useCallback((newIds) => {

diff --git a/docs/data/data-grid/master-detail/ControlMasterDetail.tsx b/docs/data/data-grid/master-detail/ControlMasterDetail.tsx
@@ -5,6 +5,7 @@ import {
   GridColDef,
   GridRowsProp,
   GridRowId,
+  DataGridProProps,
 } from '@mui/x-data-grid-pro';
 import {
   randomCreatedDate,
@@ -15,17 +16,16 @@ import {
 import Alert from '@mui/material/Alert';
 
 export default function ControlMasterDetail() {
-  const [detailPanelExpandedRowIds, setDetailPanelExpandedRowIds] = React.useState<
-    GridRowId[]
-  >([]);
-
-  const handleDetailPanelExpandedRowIdsChange = React.useCallback(
-    (newIds: GridRowId[]) => {
-      setDetailPanelExpandedRowIds(newIds);
-    },
-    [],
+  const [detailPanelExpandedRowIds, setDetailPanelExpandedRowIds] = React.useState(
+    () => new Set<GridRowId>(),
   );
 
+  const handleDetailPanelExpandedRowIdsChange = React.useCallback<
+    NonNullable<DataGridProProps['onDetailPanelExpandedRowIdsChange']>
+  >((newIds) => {
+    setDetailPanelExpandedRowIds(newIds);
+  }, []);
+
   return (
     <Box sx={{ width: '100%' }}>
       <Alert severity="info">

diff --git a/docs/data/data-grid/master-detail/LazyLoadingDetailPanel.js b/docs/data/data-grid/master-detail/LazyLoadingDetailPanel.js
@@ -45,6 +45,7 @@ function DetailPanelContent({ row: rowProp }) {
         // 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) {
@@ -125,14 +126,11 @@ export default function LazyLoadingDetailPanel() {
   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),
-      );
+      for (const [id] of detailPanelDataCache) {
+        if (!newExpandedRowIds.has(id)) {
+          detailPanelDataCache.delete(id);
+        }
+      }
     },
     [detailPanelDataCache],
   );

diff --git a/docs/data/data-grid/master-detail/LazyLoadingDetailPanel.tsx b/docs/data/data-grid/master-detail/LazyLoadingDetailPanel.tsx
@@ -12,9 +12,11 @@ import {
   randomTraderName,
   randomId,
 } from '@mui/x-data-grid-generator';
-import { DataGridProps } from '@mui/x-data-grid';
+import { DataGridProps, GridRowId } from '@mui/x-data-grid';
 
-const DetailPanelDataCache = React.createContext<Map<string, any>>(new Map());
+type Products = Awaited<ReturnType<typeof getProducts>>;
+
+const DetailPanelDataCache = React.createContext(new Map<GridRowId, Products>());
 
 async function getProducts(orderId: Customer['id']) {
   await new Promise((resolve) => {
@@ -48,7 +50,8 @@ function DetailPanelContent({ row: rowProp }: { row: Customer }) {
         // 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);
+
+      const result = detailPanelDataCache.get(rowProp.id)!;
 
       if (!isMounted) {
         return;
@@ -127,21 +130,18 @@ const getDetailPanelContent: DataGridProps['getDetailPanelContent'] = (params) =
 const getDetailPanelHeight = () => 240;
 
 export default function LazyLoadingDetailPanel() {
-  const detailPanelDataCache = React.useRef(new Map()).current;
+  const detailPanelDataCache = React.useRef(new Map<GridRowId, Products>()).current;
 
   const handleDetailPanelExpansionChange = React.useCallback<
     NonNullable<DataGridProProps['onDetailPanelExpandedRowIdsChange']>
   >(
     (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),
-      );
+      for (const [id] of detailPanelDataCache) {
+        if (!newExpandedRowIds.has(id)) {
+          detailPanelDataCache.delete(id);
+        }
+      }
     },
     [detailPanelDataCache],
   );

diff --git a/docs/data/data-grid/master-detail/master-detail.md b/docs/data/data-grid/master-detail/master-detail.md
@@ -66,13 +66,13 @@ The following example demonstrates this option in action:
 
 ## Controlling expanded detail panels
 
-To control which rows are expanded, pass a list of row IDs to the `detailPanelExpandedRowIds` prop.
+To control which rows are expanded, pass a set of row IDs to the `detailPanelExpandedRowIds` prop.
 Passing a callback to the `onDetailPanelExpandedRowIds` prop can be used to detect when a row gets expanded or collapsed.
 
 On the other hand, if you only want to initialize the Data Grid with some rows already expanded, use the `initialState` prop as follows:
 
 ```tsx
-<DataGridPro initialState={{ detailPanel: { expandedRowIds: [1, 2, 3] } }}>
+<DataGridPro initialState={{ detailPanel: { expandedRowIds: new Set([1, 2, 3]) } }}>
 ```
 
 {{"demo": "ControlMasterDetail.js", "bg": "inline", "defaultCodeOpen": false}}

diff --git a/docs/data/data-grid/row-recipes/DetailPanelExpandCollapseAll.js b/docs/data/data-grid/row-recipes/DetailPanelExpandCollapseAll.js
@@ -51,17 +51,23 @@ function CustomDetailPanelHeader() {
     gridDetailPanelExpandedRowsContentCacheSelector,
   );
 
-  const noDetailPanelsOpen = expandedRowIds.length === 0;
+  const noDetailPanelsOpen = expandedRowIds.size === 0;
 
   const expandOrCollapseAll = () => {
-    const dataRowIdToModelLookup = gridRowsLookupSelector(apiRef);
-    const allRowIdsWithDetailPanels = Object.keys(rowsWithDetailPanels).map((key) =>
-      apiRef.current.getRowId(dataRowIdToModelLookup[key]),
-    );
-
-    apiRef.current.setExpandedDetailPanels(
-      noDetailPanelsOpen ? allRowIdsWithDetailPanels : [],
-    );
+    if (noDetailPanelsOpen) {
+      const dataRowIdToModelLookup = gridRowsLookupSelector(apiRef);
+      const allRowIdsWithDetailPanels = new Set();
+      for (const key in rowsWithDetailPanels) {
+        if (rowsWithDetailPanels.hasOwnProperty(key)) {
+          allRowIdsWithDetailPanels.add(
+            apiRef.current.getRowId(dataRowIdToModelLookup[key]),
+          );
+        }
+      }
+      apiRef.current.setExpandedDetailPanels(allRowIdsWithDetailPanels);
+    } else {
+      apiRef.current.setExpandedDetailPanels(new Set());
+    }
   };
 
   const Icon = noDetailPanelsOpen ? UnfoldMoreIcon : UnfoldLessIcon;

diff --git a/docs/data/data-grid/row-recipes/DetailPanelExpandCollapseAll.tsx b/docs/data/data-grid/row-recipes/DetailPanelExpandCollapseAll.tsx
@@ -55,17 +55,23 @@ function CustomDetailPanelHeader() {
     gridDetailPanelExpandedRowsContentCacheSelector,
   );
 
-  const noDetailPanelsOpen = expandedRowIds.length === 0;
+  const noDetailPanelsOpen = expandedRowIds.size === 0;
 
   const expandOrCollapseAll = () => {
-    const dataRowIdToModelLookup = gridRowsLookupSelector(apiRef);
-    const allRowIdsWithDetailPanels: GridRowId[] = Object.keys(
-      rowsWithDetailPanels,
-    ).map((key) => apiRef.current.getRowId(dataRowIdToModelLookup[key]));
-
-    apiRef.current.setExpandedDetailPanels(
-      noDetailPanelsOpen ? allRowIdsWithDetailPanels : [],
-    );
+    if (noDetailPanelsOpen) {
+      const dataRowIdToModelLookup = gridRowsLookupSelector(apiRef);
+      const allRowIdsWithDetailPanels = new Set<GridRowId>();
+      for (const key in rowsWithDetailPanels) {
+        if (rowsWithDetailPanels.hasOwnProperty(key)) {
+          allRowIdsWithDetailPanels.add(
+            apiRef.current.getRowId(dataRowIdToModelLookup[key]),
+          );
+        }
+      }
+      apiRef.current.setExpandedDetailPanels(allRowIdsWithDetailPanels);
+    } else {
+      apiRef.current.setExpandedDetailPanels(new Set());
+    }
   };
 
   const Icon = noDetailPanelsOpen ? UnfoldMoreIcon : UnfoldLessIcon;

diff --git a/docs/data/data-grid/row-recipes/DetailPanelOneExpandedRow.js b/docs/data/data-grid/row-recipes/DetailPanelOneExpandedRow.js
@@ -15,13 +15,17 @@ const getDetailPanelHeight = () => 50;
 
 export default function DetailPanelOneExpandedRow() {
   const [detailPanelExpandedRowIds, setDetailPanelExpandedRowIds] = React.useState(
-    [],
+    () => new Set(),
   );
 
   const handleDetailPanelExpandedRowIdsChange = React.useCallback((newIds) => {
-    setDetailPanelExpandedRowIds(
-      newIds.length > 1 ? [newIds[newIds.length - 1]] : newIds,
-    );
+    if (newIds.size > 1) {
+      const newSet = new Set();
+      const newIdsArray = Array.from(newIds);
+      newSet.add(newIdsArray[newIdsArray.length - 1]);
+    } else {
+      setDetailPanelExpandedRowIds(newIds);
+    }
   }, []);
 
   return (

diff --git a/docs/data/data-grid/row-recipes/DetailPanelOneExpandedRow.tsx b/docs/data/data-grid/row-recipes/DetailPanelOneExpandedRow.tsx
@@ -20,19 +20,22 @@ const getDetailPanelContent: DataGridProProps['getDetailPanelContent'] = ({
 const getDetailPanelHeight: DataGridProProps['getDetailPanelHeight'] = () => 50;
 
 export default function DetailPanelOneExpandedRow() {
-  const [detailPanelExpandedRowIds, setDetailPanelExpandedRowIds] = React.useState<
-    GridRowId[]
-  >([]);
-
-  const handleDetailPanelExpandedRowIdsChange = React.useCallback(
-    (newIds: GridRowId[]) => {
-      setDetailPanelExpandedRowIds(
-        newIds.length > 1 ? [newIds[newIds.length - 1]] : newIds,
-      );
-    },
-    [],
+  const [detailPanelExpandedRowIds, setDetailPanelExpandedRowIds] = React.useState(
+    () => new Set<GridRowId>(),
   );
 
+  const handleDetailPanelExpandedRowIdsChange = React.useCallback<
+    NonNullable<DataGridProProps['onDetailPanelExpandedRowIdsChange']>
+  >((newIds) => {
+    if (newIds.size > 1) {
+      const newSet = new Set();
+      const newIdsArray = Array.from(newIds);
+      newSet.add(newIdsArray[newIdsArray.length - 1]);
+    } else {
+      setDetailPanelExpandedRowIds(newIds);
+    }
+  }, []);
+
   return (
     <Box sx={{ height: 400, width: '100%' }}>
       <DataGridPro

diff --git a/docs/data/migration/migration-data-grid-v7/migration-data-grid-v7.md b/docs/data/migration/migration-data-grid-v7/migration-data-grid-v7.md
@@ -34,6 +34,12 @@ Since v8 is a major release, it contains some changes that affect the public API
 These changes were done for consistency, improve stability and make room for new features.
 Below are described the steps you need to make to migrate from v7 to v8.
 
+### Props
+
+- Passing additional props (like `data-*`, `aria-*`) directly on the Data Grid component is no longer supported. To pass the props, use `slotProps`.
+  - For the `.root` element, use `slotProps.root`
+  - For the `.main` element (the one with `role="grid"`), use `slotProps.main`
+
 ### Selection
 
 - The default value of the `rowSelectionPropagation` prop has been changed to `{ parents: true, descendants: true }` which means that the selection will be propagated to the parents and descendants by default.

diff --git a/docs/package.json b/docs/package.json
@@ -23,17 +23,17 @@
     "@babel/runtime": "^7.26.0",
     "@babel/runtime-corejs2": "^7.26.0",
     "@docsearch/react": "^3.8.0",
-    "@emotion/cache": "^11.13.5",
-    "@emotion/react": "^11.13.5",
+    "@emotion/cache": "^11.14.0",
+    "@emotion/react": "^11.14.0",
     "@emotion/server": "^11.11.0",
-    "@emotion/styled": "^11.13.5",
-    "@mui/docs": "6.1.10",
-    "@mui/icons-material": "^5.16.9",
+    "@emotion/styled": "^11.14.0",
+    "@mui/docs": "6.2.0",
+    "@mui/icons-material": "^5.16.11",
     "@mui/joy": "^5.0.0-beta.48",
     "@mui/lab": "^5.0.0-alpha.173",
-    "@mui/material": "^5.16.9",
+    "@mui/material": "^5.16.11",
     "@mui/material-nextjs": "^5.16.8",
-    "@mui/styles": "^5.16.9",
+    "@mui/styles": "^5.16.11",
     "@mui/system": "^5.16.8",
     "@mui/utils": "^5.16.8",
     "@mui/x-charts": "workspace:*",
@@ -46,7 +46,7 @@
     "@mui/x-date-pickers-pro": "workspace:*",
     "@mui/x-tree-view": "workspace:*",
     "@react-spring/web": "^9.7.5",
-    "@tanstack/query-core": "^5.62.3",
+    "@tanstack/query-core": "^5.62.7",
     "ast-types": "^0.14.2",
     "autoprefixer": "^10.4.20",
     "babel-plugin-module-resolver": "^5.0.2",
@@ -84,7 +84,7 @@
     "react": "^18.3.1",
     "react-docgen": "^5.4.3",
     "react-dom": "^18.3.1",
-    "react-hook-form": "^7.54.0",
+    "react-hook-form": "^7.54.1",
     "react-is": "^18.3.1",
     "react-router": "^6.28.0",
     "react-router-dom": "^6.28.0",
@@ -114,7 +114,7 @@
     "@types/moment-hijri": "^2.1.4",
     "@types/moment-jalaali": "^0.7.9",
     "@types/prop-types": "^15.7.14",
-    "@types/react-dom": "^18.3.2",
+    "@types/react-dom": "^18.3.5",
     "@types/react-router-dom": "^5.3.3",
     "@types/stylis": "^4.2.7",
     "@types/webpack-bundle-analyzer": "^4.7.0",