Merge branch 'master' into continue-yhemeOverride

Signed-off-by: Jose C Quintas Jr <[email protected]>
mui · Aug 29, 2024 · 690f1be · 690f1be
2 parents 4b6e8eb + 1be2f4c
commit 690f1be
Show file tree

Hide file tree

Showing 99 changed files with 982 additions and 730 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/.link-check-errors.txt b/docs/.link-check-errors.txt
@@ -1,5 +1,2 @@
 Broken links found by `docs:link-check` that exist:
 
-- https://mui.com/material-ui/customization/theme-components/#creating-new-component-variants
-- https://mui.com/material-ui/customization/theme-components/#overrides-based-on-props
-- https://mui.com/material-ui/react-grid2/#whats-changed
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",
@@ -92,7 +93,7 @@
     "@mui/internal-markdown": "^1.0.11",
     "@mui/internal-test-utils": "^1.0.10",
     "@mui/material": "^5.16.7",
-    "@mui/monorepo": "github:mui/material-ui#55bea65c83c1beac77382fe961f8aa72eec21daa",
+    "@mui/monorepo": "github:mui/material-ui#029eb3b1f4837591e729779da9a82f0a66187770",
     "@mui/utils": "^5.16.6",
     "@next/eslint-plugin-next": "14.2.6",
     "@octokit/plugin-retry": "^7.1.1",

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/ChartsLegend/ContinuousColorLegend.tsx b/packages/x-charts/src/ChartsLegend/ContinuousColorLegend.tsx
@@ -2,6 +2,7 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import { ScaleSequential } from '@mui/x-charts-vendor/d3-scale';
 import { useTheme } from '@mui/material/styles';
+import { useRtl } from '@mui/system/RtlProvider';
 import ChartsContinuousGradient from '../internals/components/ChartsAxesGradients/ChartsContinuousGradient';
 import { AxisDefaultized, ContinuousScaleName } from '../models/axis';
 import { useChartId, useDrawingArea } from '../hooks';
@@ -205,6 +206,7 @@ const defaultLabelFormatter: LabelFormatter = ({ formattedValue }) => formattedV
 
 function ContinuousColorLegend(props: ContinuousColorLegendProps) {
   const theme = useTheme();
+  const isRtl = useRtl();
   const {
     id: idProp,
     minLabel = defaultLabelFormatter,
@@ -224,8 +226,6 @@ function ContinuousColorLegend(props: ContinuousColorLegendProps) {
   const chartId = useChartId();
   const id = idProp ?? `gradient-legend-${chartId}`;
 
-  const isRTL = theme.direction === 'rtl';
-
   const axisItem = useAxis({ axisDirection, axisId });
   const { width, height, left, right, top, bottom } = useDrawingArea();
 
@@ -277,7 +277,7 @@ function ContinuousColorLegend(props: ContinuousColorLegendProps) {
   // Place bar and texts
 
   const barBox =
-    direction === 'column' || (isRTL && direction === 'row')
+    direction === 'column' || (isRtl && direction === 'row')
       ? { width: thickness, height: size }
       : { width: size, height: thickness };
 

diff --git a/packages/x-charts/src/ChartsLegend/LegendPerItem.tsx b/packages/x-charts/src/ChartsLegend/LegendPerItem.tsx
@@ -1,6 +1,7 @@
 import * as React from 'react';
 import NoSsr from '@mui/material/NoSsr';
 import { useTheme, styled } from '@mui/material/styles';
+import { useRtl } from '@mui/system/RtlProvider';
 import { DrawingArea } from '../context/DrawingProvider';
 import { DefaultizedProps } from '../models/helpers';
 import { ChartsText, ChartsTextStyle } from '../ChartsText';
@@ -111,7 +112,7 @@ export function LegendPerItem(props: LegendPerItemProps) {
     labelStyle: inLabelStyle,
   } = props;
   const theme = useTheme();
-  const isRTL = theme.direction === 'rtl';
+  const isRtl = useRtl();
   const drawingArea = useDrawingArea();
 
   const labelStyle = React.useMemo(
@@ -200,11 +201,11 @@ export function LegendPerItem(props: LegendPerItemProps) {
           <g
             key={id}
             className={classes?.series}
-            transform={`translate(${gapX + (isRTL ? legendWidth - positionX : positionX)} ${gapY + positionY})`}
+            transform={`translate(${gapX + (isRtl ? legendWidth - positionX : positionX)} ${gapY + positionY})`}
           >
             <rect
               className={classes?.mark}
-              x={isRTL ? -itemMarkWidth : 0}
+              x={isRtl ? -itemMarkWidth : 0}
               y={-itemMarkHeight / 2}
               width={itemMarkWidth}
               height={itemMarkHeight}
@@ -213,7 +214,7 @@ export function LegendPerItem(props: LegendPerItemProps) {
             <ChartsText
               style={labelStyle}
               text={label}
-              x={(isRTL ? -1 : 1) * (itemMarkWidth + markGap)}
+              x={(isRtl ? -1 : 1) * (itemMarkWidth + markGap)}
               y={0}
             />
           </g>

diff --git a/packages/x-charts/src/ChartsYAxis/ChartsYAxis.tsx b/packages/x-charts/src/ChartsYAxis/ChartsYAxis.tsx
@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import useSlotProps from '@mui/utils/useSlotProps';
 import composeClasses from '@mui/utils/composeClasses';
 import { useThemeProps, useTheme, Theme, styled } from '@mui/material/styles';
+import { useRtl } from '@mui/system/RtlProvider';
 import { useCartesianContext } from '../context/CartesianProvider';
 import { useTicks } from '../hooks/useTicks';
 import { useDrawingArea } from '../hooks/useDrawingArea';
@@ -83,7 +84,7 @@ function ChartsYAxis(inProps: ChartsYAxisProps) {
   } = defaultizedProps;
 
   const theme = useTheme();
-  const isRTL = theme.direction === 'rtl';
+  const isRtl = useRtl();
 
   const classes = useUtilityClasses({ ...defaultizedProps, theme });
 
@@ -112,7 +113,7 @@ function ChartsYAxis(inProps: ChartsYAxisProps) {
   const TickLabel = slots?.axisTickLabel ?? ChartsText;
   const Label = slots?.axisLabel ?? ChartsText;
 
-  const revertAnchor = (!isRTL && position === 'right') || (isRTL && position !== 'right');
+  const revertAnchor = (!isRtl && position === 'right') || (isRtl && position !== 'right');
   const axisTickLabelProps = useSlotProps({
     elementType: TickLabel,
     externalSlotProps: slotProps?.axisTickLabel,

diff --git a/packages/x-charts/src/LineChart/MarkElement.tsx b/packages/x-charts/src/LineChart/MarkElement.tsx
@@ -107,7 +107,7 @@ function MarkElement(props: MarkElementProps) {
   });
   const { axis } = React.useContext(InteractionContext);
 
-  const position = useSpring({ x, y, immediate: skipAnimation });
+  const position = useSpring({ to: { x, y }, immediate: skipAnimation });
   const ownerState = {
     id,
     classes: innerClasses,

diff --git a/packages/x-charts/src/PieChart/PieChart.tsx b/packages/x-charts/src/PieChart/PieChart.tsx
@@ -1,5 +1,6 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
+import { useRtl } from '@mui/system/RtlProvider';
 import { useThemeProps } from '@mui/material/styles';
 import {
   ResponsiveChartContainer,
@@ -30,7 +31,6 @@ import {
   ChartsXAxisProps,
   ChartsYAxisProps,
 } from '../models/axis';
-import { useIsRTL } from '../internals/useIsRTL';
 import {
   ChartsOverlay,
   ChartsOverlayProps,
@@ -153,12 +153,12 @@ const PieChart = React.forwardRef(function PieChart(inProps: PieChartProps, ref)
     className,
     ...other
   } = props;
-  const isRTL = useIsRTL();
+  const isRtl = useRtl();
 
-  const margin = { ...(isRTL ? defaultRTLMargin : defaultMargin), ...marginProps };
+  const margin = { ...(isRtl ? defaultRTLMargin : defaultMargin), ...marginProps };
   const legend: ChartsLegendProps = {
     direction: 'column',
-    position: { vertical: 'middle', horizontal: isRTL ? 'left' : 'right' },
+    position: { vertical: 'middle', horizontal: isRtl ? 'left' : 'right' },
     ...legendProps,
   };