[core] Support @mui/material@6 peer dependency (#14142)

Co-authored-by: Lukas <[email protected]>
mui · Aug 29, 2024 · 70b6cb7 · 70b6cb7
1 parent d9416d7
commit 70b6cb7
Show file tree

Hide file tree

Showing 69 changed files with 761 additions and 555 deletions.
diff --git a/.circleci/config.yml b/.circleci/config.yml
@@ -99,6 +99,14 @@ commands:
             # log a patch for maintainers who want to check out this change
             git --no-pager diff HEAD
 
+      - when:
+          condition:
+            equal: [material-ui-v6, << pipeline.parameters.workflow >>]
+          steps:
+            - run:
+                name: Install @mui/material@next
+                command: pnpm use-material-ui-v6
+
       - when:
           condition: << parameters.browsers >>
           steps:
@@ -248,7 +256,7 @@ jobs:
           command: pnpm docs:typescript:formatted --disable-cache
       - run:
           name: '`pnpm docs:typescript:formatted` changes committed?'
-          command: git add -A && git diff --exit-code --staged
+          command: git add -A && git diff --exit-code --staged docs/src docs/data
       - run:
           name: Tests TypeScript definitions
           command: pnpm typescript:ci
@@ -383,3 +391,23 @@ workflows:
           <<: *default-context
           react-version: next
           name: test_e2e-react@next
+
+  material-ui-v6:
+    when:
+      equal: [material-ui-v6, << pipeline.parameters.workflow >>]
+    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
diff --git a/docs/data/data-grid/joy-ui/GridJoyUISlots.js b/docs/data/data-grid/joy-ui/GridJoyUISlots.js
@@ -3,8 +3,8 @@ import Box from '@mui/material/Box';
 import { DataGrid, GridToolbar, GridActionsCellItem } from '@mui/x-data-grid';
 import { unstable_joySlots } from '@mui/x-data-grid/joy';
 import {
-  experimental_extendTheme as materialExtendTheme,
-  Experimental_CssVarsProvider as MaterialCssVarsProvider,
+  createTheme,
+  ThemeProvider as MaterialThemeProvider,
   THEME_ID as MATERIAL_THEME_ID,
 } from '@mui/material/styles';
 import { CssVarsProvider as JoyCssVarsProvider } from '@mui/joy/styles';
@@ -18,7 +18,7 @@ import {
   randomArrayItem,
 } from '@mui/x-data-grid-generator';
 
-const materialTheme = materialExtendTheme({
+const materialTheme = createTheme({
   components: {
     MuiSvgIcon: {
       styleOverrides: {
@@ -97,7 +97,7 @@ export default function GridJoyUISlots() {
   }, []);
 
   return (
-    <MaterialCssVarsProvider theme={{ [MATERIAL_THEME_ID]: materialTheme }}>
+    <MaterialThemeProvider theme={{ [MATERIAL_THEME_ID]: materialTheme }}>
       <JoyCssVarsProvider>
         <Box sx={{ height: 400, width: '100%' }}>
           <DataGrid
@@ -133,6 +133,6 @@ export default function GridJoyUISlots() {
           />
         </Box>
       </JoyCssVarsProvider>
-    </MaterialCssVarsProvider>
+    </MaterialThemeProvider>
   );
 }
diff --git a/docs/data/data-grid/joy-ui/GridJoyUISlots.tsx b/docs/data/data-grid/joy-ui/GridJoyUISlots.tsx
@@ -3,8 +3,8 @@ import Box from '@mui/material/Box';
 import { DataGrid, GridToolbar, GridActionsCellItem } from '@mui/x-data-grid';
 import { unstable_joySlots } from '@mui/x-data-grid/joy';
 import {
-  experimental_extendTheme as materialExtendTheme,
-  Experimental_CssVarsProvider as MaterialCssVarsProvider,
+  createTheme,
+  ThemeProvider as MaterialThemeProvider,
   THEME_ID as MATERIAL_THEME_ID,
 } from '@mui/material/styles';
 import { CssVarsProvider as JoyCssVarsProvider } from '@mui/joy/styles';
@@ -19,7 +19,7 @@ import {
 } from '@mui/x-data-grid-generator';
 import type {} from '@mui/material/themeCssVarsAugmentation';
 
-const materialTheme = materialExtendTheme({
+const materialTheme = createTheme({
   components: {
     MuiSvgIcon: {
       styleOverrides: {
@@ -106,7 +106,7 @@ export default function GridJoyUISlots() {
   }, []);
 
   return (
-    <MaterialCssVarsProvider theme={{ [MATERIAL_THEME_ID]: materialTheme }}>
+    <MaterialThemeProvider theme={{ [MATERIAL_THEME_ID]: materialTheme }}>
       <JoyCssVarsProvider>
         <Box sx={{ height: 400, width: '100%' }}>
           <DataGrid
@@ -142,6 +142,6 @@ export default function GridJoyUISlots() {
           />
         </Box>
       </JoyCssVarsProvider>
-    </MaterialCssVarsProvider>
+    </MaterialThemeProvider>
   );
 }
diff --git a/docs/src/modules/components/ChartFeaturesGrid.js b/docs/src/modules/components/ChartFeaturesGrid.js
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import Grid from '@mui/material/Unstable_Grid2';
+import Grid from '@mui/material/Grid';
 import { InfoCard } from '@mui/docs/InfoCard';
 import LineAxisRoundedIcon from '@mui/icons-material/LineAxisRounded';
 import DashboardCustomizeRoundedIcon from '@mui/icons-material/DashboardCustomizeRounded';
@@ -45,7 +45,7 @@ export default function ChartFeaturesGrid() {
   return (
     <Grid container spacing={2}>
       {content.map(({ icon, title, link }) => (
-        <Grid key={title} xs={12} sm={4}>
+        <Grid item key={title} xs={12} sm={4}>
           <InfoCard dense classNameTitle="algolia-lvl3" link={link} title={title} icon={icon} />
         </Grid>
       ))}

diff --git a/docs/src/modules/components/InstallationGrid.js b/docs/src/modules/components/InstallationGrid.js
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import Grid from '@mui/material/Unstable_Grid2';
+import Grid from '@mui/material/Grid';
 import { InfoCard } from '@mui/docs/InfoCard';
 import AccountTreeRounded from '@mui/icons-material/AccountTreeRounded';
 import PivotTableChartRoundedIcon from '@mui/icons-material/PivotTableChartRounded';
@@ -38,7 +38,7 @@ export default function InstallationGrid() {
   return (
     <Grid container spacing={2}>
       {content.map(({ icon, title, description, link }) => (
-        <Grid key={title} xs={12} sm={6}>
+        <Grid item key={title} xs={12} sm={6}>
           <InfoCard
             classNameTitle="algolia-lvl3"
             link={link}

diff --git a/package.json b/package.json
@@ -55,6 +55,7 @@
     "typescript": "lerna run --no-bail --parallel typescript",
     "typescript:ci": "lerna run --concurrency 1 --no-bail --no-sort typescript",
     "use-react-version": "node scripts/useReactVersion.mjs",
+    "use-material-ui-v6": "node scripts/useMaterialUIv6.mjs",
     "build:codesandbox": "lerna run --concurrency 3 --no-private --scope \"@mui/*\" build",
     "install:codesandbox": "pnpm install --no-frozen-lockfile",
     "release:changelog": "node scripts/releaseChangelog.mjs",

diff --git a/packages/x-charts-pro/package.json b/packages/x-charts-pro/package.json
@@ -40,7 +40,6 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.25.4",
-    "@mui/system": "^5.16.7",
     "@mui/utils": "^5.16.6",
     "@mui/x-charts": "workspace:*",
     "@mui/x-charts-vendor": "workspace:*",
@@ -53,7 +52,8 @@
   "peerDependencies": {
     "@emotion/react": "^11.9.0",
     "@emotion/styled": "^11.8.1",
-    "@mui/material": "^5.15.14",
+    "@mui/material": "^5.15.14 || ^6.0.0",
+    "@mui/system": "^5.15.14 || ^6.0.0",
     "react": "^17.0.0 || ^18.0.0",
     "react-dom": "^17.0.0 || ^18.0.0"
   },
@@ -66,6 +66,8 @@
     }
   },
   "devDependencies": {
+    "@mui/material": "^5.16.5",
+    "@mui/system": "^5.16.7",
     "@react-spring/core": "^9.7.4",
     "@react-spring/shared": "^9.7.4",
     "@types/prop-types": "^15.7.12",

diff --git a/packages/x-charts-pro/src/tests/materialVersion.test.tsx b/packages/x-charts-pro/src/tests/materialVersion.test.tsx
@@ -0,0 +1,5 @@
+import materialPackageJson from '@mui/material/package.json';
+import { checkMaterialVersion } from 'test/utils/checkMaterialVersion';
+import packageJson from '../../package.json';
+
+checkMaterialVersion({ packageJson, materialPackageJson });
diff --git a/packages/x-charts/package.json b/packages/x-charts/package.json
@@ -40,7 +40,6 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.25.4",
-    "@mui/system": "^5.16.7",
     "@mui/utils": "^5.16.6",
     "@mui/x-charts-vendor": "workspace:*",
     "@react-spring/rafz": "^9.7.4",
@@ -51,7 +50,8 @@
   "peerDependencies": {
     "@emotion/react": "^11.9.0",
     "@emotion/styled": "^11.8.1",
-    "@mui/material": "^5.15.14",
+    "@mui/material": "^5.15.14 || ^6.0.0",
+    "@mui/system": "^5.15.14 || ^6.0.0",
     "react": "^17.0.0 || ^18.0.0",
     "react-dom": "^17.0.0 || ^18.0.0"
   },
@@ -65,6 +65,8 @@
   },
   "devDependencies": {
     "@mui/internal-test-utils": "^1.0.10",
+    "@mui/material": "^5.16.5",
+    "@mui/system": "^5.16.7",
     "@react-spring/core": "^9.7.4",
     "@react-spring/shared": "^9.7.4",
     "@types/prop-types": "^15.7.12",

diff --git a/packages/x-charts/src/tests/materialVersion.test.tsx b/packages/x-charts/src/tests/materialVersion.test.tsx
@@ -0,0 +1,5 @@
+import materialPackageJson from '@mui/material/package.json';
+import { checkMaterialVersion } from 'test/utils/checkMaterialVersion';
+import packageJson from '../../package.json';
+
+checkMaterialVersion({ packageJson, materialPackageJson });
diff --git a/packages/x-data-grid-generator/package.json b/packages/x-data-grid-generator/package.json
@@ -40,14 +40,16 @@
     "lru-cache": "^10.4.3"
   },
   "devDependencies": {
+    "@mui/icons-material": "^5.16.5",
+    "@mui/material": "^5.16.5",
     "@types/chance": "^1.1.6",
     "rimraf": "^5.0.10"
   },
   "peerDependencies": {
     "@emotion/react": "^11.9.0",
     "@emotion/styled": "^11.8.1",
-    "@mui/icons-material": "^5.4.1",
-    "@mui/material": "^5.15.14",
+    "@mui/icons-material": "^5.4.1 || ^6.0.0",
+    "@mui/material": "^5.15.14 || ^6.0.0",
     "react": "^17.0.0 || ^18.0.0"
   },
   "peerDependenciesMeta": {

diff --git a/packages/x-data-grid-premium/package.json b/packages/x-data-grid-premium/package.json
@@ -44,7 +44,6 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.25.4",
-    "@mui/system": "^5.16.7",
     "@mui/utils": "^5.16.6",
     "@mui/x-data-grid": "workspace:*",
     "@mui/x-data-grid-pro": "workspace:*",
@@ -59,7 +58,8 @@
   "peerDependencies": {
     "@emotion/react": "^11.9.0",
     "@emotion/styled": "^11.8.1",
-    "@mui/material": "^5.15.14",
+    "@mui/material": "^5.15.14 || ^6.0.0",
+    "@mui/system": "^5.15.14 || ^6.0.0",
     "react": "^17.0.0 || ^18.0.0",
     "react-dom": "^17.0.0 || ^18.0.0"
   },
@@ -73,6 +73,8 @@
   },
   "devDependencies": {
     "@mui/internal-test-utils": "^1.0.10",
+    "@mui/material": "^5.16.5",
+    "@mui/system": "^5.16.7",
     "@types/prop-types": "^15.7.12",
     "date-fns": "^2.30.0",
     "rimraf": "^5.0.10"

diff --git a/packages/x-data-grid-premium/src/tests/aggregation.DataGridPremium.test.tsx b/packages/x-data-grid-premium/src/tests/aggregation.DataGridPremium.test.tsx
@@ -411,6 +411,7 @@ describe('<DataGridPremium /> - Aggregation', () => {
           }),
         ).getByText('max'),
       );
+      clock.runToLast();
 
       expect(getColumnValues(0)).to.deep.equal(['0', '1', '2', '3', '4', '5', '5' /* Agg */]);
     });

diff --git a/packages/x-data-grid-premium/src/tests/materialVersion.test.tsx b/packages/x-data-grid-premium/src/tests/materialVersion.test.tsx
@@ -0,0 +1,5 @@
+import materialPackageJson from '@mui/material/package.json';
+import { checkMaterialVersion } from 'test/utils/checkMaterialVersion';
+import packageJson from '../../package.json';
+
+checkMaterialVersion({ packageJson, materialPackageJson });
diff --git a/packages/x-data-grid-pro/package.json b/packages/x-data-grid-pro/package.json
@@ -44,7 +44,6 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.25.4",
-    "@mui/system": "^5.16.7",
     "@mui/utils": "^5.16.6",
     "@mui/x-data-grid": "workspace:*",
     "@mui/x-internals": "workspace:*",
@@ -57,7 +56,8 @@
   "peerDependencies": {
     "@emotion/react": "^11.9.0",
     "@emotion/styled": "^11.8.1",
-    "@mui/material": "^5.15.14",
+    "@mui/material": "^5.15.14 || ^6.0.0",
+    "@mui/system": "^5.15.14 || ^6.0.0",
     "react": "^17.0.0 || ^18.0.0",
     "react-dom": "^17.0.0 || ^18.0.0"
   },
@@ -71,6 +71,8 @@
   },
   "devDependencies": {
     "@mui/internal-test-utils": "^1.0.10",
+    "@mui/material": "^5.16.5",
+    "@mui/system": "^5.16.7",
     "@types/prop-types": "^15.7.12",
     "rimraf": "^5.0.10"
   },

diff --git a/packages/x-data-grid-pro/src/tests/materialVersion.test.tsx b/packages/x-data-grid-pro/src/tests/materialVersion.test.tsx
@@ -0,0 +1,5 @@
+import materialPackageJson from '@mui/material/package.json';
+import { checkMaterialVersion } from 'test/utils/checkMaterialVersion';
+import packageJson from '../../package.json';
+
+checkMaterialVersion({ packageJson, materialPackageJson });
diff --git a/packages/x-data-grid/package.json b/packages/x-data-grid/package.json
@@ -48,7 +48,6 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.25.4",
-    "@mui/system": "^5.16.7",
     "@mui/utils": "^5.16.6",
     "@mui/x-internals": "workspace:*",
     "clsx": "^2.1.1",
@@ -58,7 +57,8 @@
   "peerDependencies": {
     "@emotion/react": "^11.9.0",
     "@emotion/styled": "^11.8.1",
-    "@mui/material": "^5.15.14",
+    "@mui/material": "^5.15.14 || ^6.0.0",
+    "@mui/system": "^5.15.14 || ^6.0.0",
     "react": "^17.0.0 || ^18.0.0",
     "react-dom": "^17.0.0 || ^18.0.0"
   },
@@ -73,6 +73,8 @@
   "devDependencies": {
     "@mui/internal-test-utils": "^1.0.10",
     "@mui/joy": "^5.0.0-beta.48",
+    "@mui/material": "^5.16.5",
+    "@mui/system": "^5.16.7",
     "@mui/types": "^7.2.15",
     "@types/prop-types": "^15.7.12",
     "rimraf": "^5.0.10"