@mui/system 6.1.9 → 6.2.0

package/CHANGELOG.md

@@ -1,5 +1,87 @@
 # [Versions](https://mui.com/versions/)
 
+## 6.2.0
+
+<!-- generated comparing v6.1.10..master -->
+
+_Dec 10, 2024_
+
+A big thanks to the 9 contributors who made this release possible. Here are some highlights ✨:
+
+- Material UI is now compatible with React 19 (#44672) @DiegoAndai
+- Fixed incorrect `aria-orientation` for vertical sliders. <kbd>ArrowRight</kbd> now increases the value and <kbd>ArrowLeft</kbd> decreases the value in vertical sliders; they were reversed in prior versions. (#44537) @mj12albert
+
+### `@mui/material@6.2.0`
+
+- [Box] Add missing `component` to `BoxProps` type (#44643) @DiegoAndai
+- [Grid] Fix spacing when using css variables (#44663) @DiegoAndai
+- [ListItemText] Add `slots` and `slotProps` (#44571) @sai6855
+
+### Docs
+
+- Add Toolpad Core template link (#44415) @bharatkashyap
+
+### Core
+
+- [docs-infra] Allow custom annotations (#44707) @vladmoroz
+- [Box] Fix `component` prop test (#44651) @DiegoAndai
+- React 19 useRef cleanup (#44704) @DiegoAndai
+- Remove obselete lerna options (#44676) @ZeeshanTamboli
+- Fix Regular Expression Denial of Service (ReDoS) vulnerabilities (#44627) @SuperMaxine
+- Fix number of contributors (#44650) @aarongarciah
+- [docs-infra] Add support for data attributes in the API generation (#44709) @mnajdova
+- [docs-infra] Fix RTL dark mode (#41803) @alexfauquette
+- [Grid] Remove deeply nested imports (#43605) @Janpot
+
+All contributors of this release in alphabetical order: @aarongarciah, @alexfauquette, @bharatkashyap, @DiegoAndai, @Janpot, @mj12albert, @mnajdova, @sai6855, @SuperMaxine, @vladmoroz, @ZeeshanTamboli
+
+## 6.1.10
+
+<!-- generated comparing v6.1.9..master -->
+
+_Dec 3, 2024_
+
+A big thanks to the 11 contributors who made this release possible.
+
+### `@mui/material@6.1.10`
+
+- [Avatar] Fix `slotProps.img` not spread to hook (#44536) @siriwatknp
+- [FilledInput] Use `slotProps` instead of `componentsProps` (#44552) @siriwatknp
+- [Grid2] Fix theme scoping error (#44599) @siriwatknp
+- [Grid2] Add container styles from styleOverrides (#44598) @sai6855
+- Skip `tonalOffset` from setting color channel (#44585) @siriwatknp
+- Remove few more React.ReactElement<any> types (#44290) @sai6855
+- [Tabs] Fix `ScrollbarSize` ref being overriden (#44593) @DiegoAndai
+- [Select][TextField] Fix screen reader from saying `&ZeroWidthSpace` (#44631) @arishoham
+
+### `@mui/system@6.1.10`
+
+- [ThemeProvider] Optimize `theme` changes when enabling CSS theme variables (#44588) @siriwatknp
+
+### Docs
+
+- Notification for the MUI X v8 alpha zero announcement blog post (#44629) @joserodolfofreitas
+- Bump React Router to ^7.0.1 (#44531) @oliviertassinari
+- [material-ui] Replace testid with id in migration guide (#44636) @sai6855
+- [material-ui][TextField] Update usage of `InputLabelProps` in docs (#44634) @sai6855
+- [material-ui][ListItem] Add missing diffs in migration guide (#44638) @sai6855
+- [examples] Use Next.js 14 on examples (#44486) @DiegoAndai
+- Update links and sidebar nav for Base UI components in Material UI (#44581) @samuelsycamore
+
+### Core
+
+- Remove `getSlotOwnerState` from `useSlot` util (#44403) @ZeeshanTamboli
+- Extract useRippleHandler outside of ButtonBase (#44591) @albarv340
+- Update eslint config (#44586) @MBilalShafi
+- [core-infra] Remove useless fragments (#44516) @oliviertassinari
+- [docs-infra] Fix Banner CLS (#44632) @oliviertassinari
+- [docs-infra] Change CSS vars generation to be extracted from Enum (#44587) @mnajdova
+- [docs-infra] Automatically hide Black Friday banner (#44630) @oliviertassinari
+- [docs-infra] Fix TOC RTL padding regression (#44535) @oliviertassinari
+- [test-utils] Remove leftover React.ReactElement<any> from describeConformance.tsx (#44639) @sai6855
+
+All contributors of this release in alphabetical order: @albarv340, @arishoham, @DiegoAndai, @joserodolfofreitas, @MBilalShafi, @mnajdova, @oliviertassinari, @sai6855, @samuelsycamore, @siriwatknp, @ZeeshanTamboli
+
 ## 6.1.9
 
 <!-- generated comparing v6.1.8..master -->

package/Grid/createGrid.d.ts

@@ -1,11 +1,13 @@
 import * as React from 'react';
 import { OverridableComponent } from '@mui/types';
+import useThemeSystem from '../useTheme';
 import { GridTypeMap } from './GridProps';
 declare const defaultCreateStyledComponent: import("@mui/styled-engine").CreateStyledComponent<import("../createStyled").MUIStyledCommonProps<any>, Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof React.ClassAttributes<HTMLDivElement> | keyof React.HTMLAttributes<HTMLDivElement>>, {}, any>;
 declare function useThemePropsDefault<T extends {}>(props: T): T;
 export default function createGrid(options?: {
     createStyledComponent?: typeof defaultCreateStyledComponent;
     useThemeProps?: typeof useThemePropsDefault;
+    useTheme?: typeof useThemeSystem;
     componentName?: string;
 }): OverridableComponent<GridTypeMap<{}, "div">>;
 export {};

package/Grid/createGrid.js

@@ -39,6 +39,7 @@ function createGrid(options = {}) {
     // This will allow adding custom styled fn (for example for custom sx style function)
     createStyledComponent = defaultCreateStyledComponent,
     useThemeProps = useThemePropsDefault,
+    useTheme = _useTheme.default,
     componentName = 'MuiGrid'
   } = options;
   const useUtilityClasses = (ownerState, theme) => {
@@ -79,7 +80,7 @@ function createGrid(options = {}) {
   }
   const GridRoot = createStyledComponent(_gridGenerator.generateGridColumnsStyles, _gridGenerator.generateGridColumnSpacingStyles, _gridGenerator.generateGridRowSpacingStyles, _gridGenerator.generateGridSizeStyles, _gridGenerator.generateGridDirectionStyles, _gridGenerator.generateGridStyles, _gridGenerator.generateGridOffsetStyles);
   const Grid = /*#__PURE__*/React.forwardRef(function Grid(inProps, ref) {
-    const theme = (0, _useTheme.default)();
+    const theme = useTheme();
     const themeProps = useThemeProps(inProps);
     const props = (0, _styleFunctionSx.extendSxProp)(themeProps); // `color` type conflicts with html color attribute.
     const {

package/Grid/index.d.ts

@@ -4,3 +4,4 @@ export * from './GridProps';
 export { default as gridClasses } from './gridClasses';
 export * from './gridClasses';
 export { traverseBreakpoints as unstable_traverseBreakpoints } from './traverseBreakpoints';
+export { generateDirectionClasses as unstable_generateDirectionClasses, generateSizeClassNames as unstable_generateSizeClassNames, generateSpacingClassNames as unstable_generateSpacingClassNames, } from './gridGenerator';

package/Grid/index.js

@@ -8,7 +8,10 @@ Object.defineProperty(exports, "__esModule", {
 var _exportNames = {
   createGrid: true,
   gridClasses: true,
-  unstable_traverseBreakpoints: true
+  unstable_traverseBreakpoints: true,
+  unstable_generateDirectionClasses: true,
+  unstable_generateSizeClassNames: true,
+  unstable_generateSpacingClassNames: true
 };
 Object.defineProperty(exports, "createGrid", {
   enumerable: true,
@@ -28,6 +31,24 @@ Object.defineProperty(exports, "gridClasses", {
     return _gridClasses.default;
   }
 });
+Object.defineProperty(exports, "unstable_generateDirectionClasses", {
+  enumerable: true,
+  get: function () {
+    return _gridGenerator.generateDirectionClasses;
+  }
+});
+Object.defineProperty(exports, "unstable_generateSizeClassNames", {
+  enumerable: true,
+  get: function () {
+    return _gridGenerator.generateSizeClassNames;
+  }
+});
+Object.defineProperty(exports, "unstable_generateSpacingClassNames", {
+  enumerable: true,
+  get: function () {
+    return _gridGenerator.generateSpacingClassNames;
+  }
+});
 Object.defineProperty(exports, "unstable_traverseBreakpoints", {
   enumerable: true,
   get: function () {
@@ -60,4 +81,5 @@ Object.keys(_gridClasses).forEach(function (key) {
     }
   });
 });
-var _traverseBreakpoints = require("./traverseBreakpoints");
+var _traverseBreakpoints = require("./traverseBreakpoints");
+var _gridGenerator = require("./gridGenerator");

package/cssVars/createCssVarsProvider.js

@@ -47,6 +47,8 @@ function createCssVarsProvider(options) {
     ColorSchemeContext.displayName = 'ColorSchemeContext';
   }
   const useColorScheme = () => React.useContext(ColorSchemeContext) || defaultContext;
+  const defaultColorSchemes = {};
+  const defaultComponents = {};
   function CssVarsProvider(props) {
     const {
       children,
@@ -73,12 +75,12 @@ function createCssVarsProvider(options) {
       return typeof defaultTheme === 'function' ? defaultTheme() : defaultTheme;
     }, [themeProp]);
     const scopedTheme = initialTheme[themeId];
+    const restThemeProp = scopedTheme || initialTheme;
     const {
-      colorSchemes = {},
-      components = {},
-      cssVarPrefix,
-      ...restThemeProp
-    } = scopedTheme || initialTheme;
+      colorSchemes = defaultColorSchemes,
+      components = defaultComponents,
+      cssVarPrefix
+    } = restThemeProp;
     const joinedColorSchemes = Object.keys(colorSchemes).filter(k => !!colorSchemes[k]).join(',');
     const allColorSchemes = React.useMemo(() => joinedColorSchemes.split(','), [joinedColorSchemes]);
     const defaultLightColorScheme = typeof defaultColorScheme === 'string' ? defaultColorScheme : defaultColorScheme.light;
@@ -110,43 +112,45 @@ function createCssVarsProvider(options) {
       mode = ctx.mode;
       colorScheme = ctx.colorScheme;
     }
+    const memoTheme = React.useMemo(() => {
+      // `colorScheme` is undefined on the server and hydration phase
+      const calculatedColorScheme = colorScheme || restThemeProp.defaultColorScheme;
 
-    // `colorScheme` is undefined on the server and hydration phase
-    const calculatedColorScheme = colorScheme || restThemeProp.defaultColorScheme;
+      // 2. get the `vars` object that refers to the CSS custom properties
+      const themeVars = restThemeProp.generateThemeVars?.() || restThemeProp.vars;
 
-    // 2. get the `vars` object that refers to the CSS custom properties
-    const themeVars = restThemeProp.generateThemeVars?.() || restThemeProp.vars;
-
-    // 3. Start composing the theme object
-    const theme = {
-      ...restThemeProp,
-      components,
-      colorSchemes,
-      cssVarPrefix,
-      vars: themeVars
-    };
-    if (typeof theme.generateSpacing === 'function') {
-      theme.spacing = theme.generateSpacing();
-    }
+      // 3. Start composing the theme object
+      const theme = {
+        ...restThemeProp,
+        components,
+        colorSchemes,
+        cssVarPrefix,
+        vars: themeVars
+      };
+      if (typeof theme.generateSpacing === 'function') {
+        theme.spacing = theme.generateSpacing();
+      }
 
-    // 4. Resolve the color scheme and merge it to the theme
-    if (calculatedColorScheme) {
-      const scheme = colorSchemes[calculatedColorScheme];
-      if (scheme && typeof scheme === 'object') {
-        // 4.1 Merge the selected color scheme to the theme
-        Object.keys(scheme).forEach(schemeKey => {
-          if (scheme[schemeKey] && typeof scheme[schemeKey] === 'object') {
-            // shallow merge the 1st level structure of the theme.
-            theme[schemeKey] = {
-              ...theme[schemeKey],
-              ...scheme[schemeKey]
-            };
-          } else {
-            theme[schemeKey] = scheme[schemeKey];
-          }
-        });
+      // 4. Resolve the color scheme and merge it to the theme
+      if (calculatedColorScheme) {
+        const scheme = colorSchemes[calculatedColorScheme];
+        if (scheme && typeof scheme === 'object') {
+          // 4.1 Merge the selected color scheme to the theme
+          Object.keys(scheme).forEach(schemeKey => {
+            if (scheme[schemeKey] && typeof scheme[schemeKey] === 'object') {
+              // shallow merge the 1st level structure of the theme.
+              theme[schemeKey] = {
+                ...theme[schemeKey],
+                ...scheme[schemeKey]
+              };
+            } else {
+              theme[schemeKey] = scheme[schemeKey];
+            }
+          });
+        }
       }
-    }
+      return resolveTheme ? resolveTheme(theme) : theme;
+    }, [restThemeProp, colorScheme, components, colorSchemes, cssVarPrefix]);
 
     // 5. Declaring effects
     // 5.1 Updates the selector value to use the current color scheme which tells CSS to use the proper stylesheet.
@@ -220,13 +224,13 @@ function createCssVarsProvider(options) {
       mode,
       setColorScheme,
       setMode: process.env.NODE_ENV === 'production' ? setMode : newMode => {
-        if (theme.colorSchemeSelector === 'media') {
+        if (memoTheme.colorSchemeSelector === 'media') {
           console.error(['MUI: The `setMode` function has no effect if `colorSchemeSelector` is `media` (`media` is the default value).', 'To toggle the mode manually, please configure `colorSchemeSelector` to use a class or data attribute.', 'To learn more, visit https://mui.com/material-ui/customization/css-theme-variables/configuration/#toggling-dark-mode-manually'].join('\n'));
         }
         setMode(newMode);
       },
       systemMode
-    }), [allColorSchemes, colorScheme, darkColorScheme, lightColorScheme, mode, setColorScheme, setMode, systemMode, theme.colorSchemeSelector]);
+    }), [allColorSchemes, colorScheme, darkColorScheme, lightColorScheme, mode, setColorScheme, setMode, systemMode, memoTheme.colorSchemeSelector]);
     let shouldGenerateStyleSheet = true;
     if (disableStyleSheetGeneration || restThemeProp.cssVariables === false || nested && upperTheme?.cssVarPrefix === cssVarPrefix) {
       shouldGenerateStyleSheet = false;
@@ -234,10 +238,10 @@ function createCssVarsProvider(options) {
     const element = /*#__PURE__*/(0, _jsxRuntime.jsxs)(React.Fragment, {
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ThemeProvider.default, {
         themeId: scopedTheme ? themeId : undefined,
-        theme: resolveTheme ? resolveTheme(theme) : theme,
+        theme: memoTheme,
         children: children
       }), shouldGenerateStyleSheet && /*#__PURE__*/(0, _jsxRuntime.jsx)(_styledEngine.GlobalStyles, {
-        styles: theme.generateStyleSheets?.() || []
+        styles: memoTheme.generateStyleSheets?.() || []
       })]
     });
     if (nested) {

package/esm/Grid/createGrid.js

@@ -6,7 +6,7 @@ import generateUtilityClass from '@mui/utils/generateUtilityClass';
 import composeClasses from '@mui/utils/composeClasses';
 import systemStyled from "../styled/index.js";
 import useThemePropsSystem from "../useThemeProps/index.js";
-import useTheme from "../useTheme/index.js";
+import useThemeSystem from "../useTheme/index.js";
 import { extendSxProp } from "../styleFunctionSx/index.js";
 import createTheme from "../createTheme/index.js";
 import { generateGridStyles, generateGridSizeStyles, generateGridColumnsStyles, generateGridColumnSpacingStyles, generateGridRowSpacingStyles, generateGridDirectionStyles, generateGridOffsetStyles, generateSizeClassNames, generateSpacingClassNames, generateDirectionClasses } from "./gridGenerator.js";
@@ -31,6 +31,7 @@ export default function createGrid(options = {}) {
     // This will allow adding custom styled fn (for example for custom sx style function)
     createStyledComponent = defaultCreateStyledComponent,
     useThemeProps = useThemePropsDefault,
+    useTheme = useThemeSystem,
     componentName = 'MuiGrid'
   } = options;
   const useUtilityClasses = (ownerState, theme) => {

package/esm/Grid/index.js

@@ -3,4 +3,5 @@ export { default as createGrid } from "./createGrid.js";
 export * from "./GridProps.js";
 export { default as gridClasses } from "./gridClasses.js";
 export * from "./gridClasses.js";
-export { traverseBreakpoints as unstable_traverseBreakpoints } from "./traverseBreakpoints.js";
+export { traverseBreakpoints as unstable_traverseBreakpoints } from "./traverseBreakpoints.js";
+export { generateDirectionClasses as unstable_generateDirectionClasses, generateSizeClassNames as unstable_generateSizeClassNames, generateSpacingClassNames as unstable_generateSpacingClassNames } from "./gridGenerator.js";

package/esm/cssVars/createCssVarsProvider.js

@@ -38,6 +38,8 @@ export default function createCssVarsProvider(options) {
     ColorSchemeContext.displayName = 'ColorSchemeContext';
   }
   const useColorScheme = () => React.useContext(ColorSchemeContext) || defaultContext;
+  const defaultColorSchemes = {};
+  const defaultComponents = {};
   function CssVarsProvider(props) {
     const {
       children,
@@ -64,12 +66,12 @@ export default function createCssVarsProvider(options) {
       return typeof defaultTheme === 'function' ? defaultTheme() : defaultTheme;
     }, [themeProp]);
     const scopedTheme = initialTheme[themeId];
+    const restThemeProp = scopedTheme || initialTheme;
     const {
-      colorSchemes = {},
-      components = {},
-      cssVarPrefix,
-      ...restThemeProp
-    } = scopedTheme || initialTheme;
+      colorSchemes = defaultColorSchemes,
+      components = defaultComponents,
+      cssVarPrefix
+    } = restThemeProp;
     const joinedColorSchemes = Object.keys(colorSchemes).filter(k => !!colorSchemes[k]).join(',');
     const allColorSchemes = React.useMemo(() => joinedColorSchemes.split(','), [joinedColorSchemes]);
     const defaultLightColorScheme = typeof defaultColorScheme === 'string' ? defaultColorScheme : defaultColorScheme.light;
@@ -101,43 +103,45 @@ export default function createCssVarsProvider(options) {
       mode = ctx.mode;
       colorScheme = ctx.colorScheme;
     }
+    const memoTheme = React.useMemo(() => {
+      // `colorScheme` is undefined on the server and hydration phase
+      const calculatedColorScheme = colorScheme || restThemeProp.defaultColorScheme;
 
-    // `colorScheme` is undefined on the server and hydration phase
-    const calculatedColorScheme = colorScheme || restThemeProp.defaultColorScheme;
+      // 2. get the `vars` object that refers to the CSS custom properties
+      const themeVars = restThemeProp.generateThemeVars?.() || restThemeProp.vars;
 
-    // 2. get the `vars` object that refers to the CSS custom properties
-    const themeVars = restThemeProp.generateThemeVars?.() || restThemeProp.vars;
-
-    // 3. Start composing the theme object
-    const theme = {
-      ...restThemeProp,
-      components,
-      colorSchemes,
-      cssVarPrefix,
-      vars: themeVars
-    };
-    if (typeof theme.generateSpacing === 'function') {
-      theme.spacing = theme.generateSpacing();
-    }
+      // 3. Start composing the theme object
+      const theme = {
+        ...restThemeProp,
+        components,
+        colorSchemes,
+        cssVarPrefix,
+        vars: themeVars
+      };
+      if (typeof theme.generateSpacing === 'function') {
+        theme.spacing = theme.generateSpacing();
+      }
 
-    // 4. Resolve the color scheme and merge it to the theme
-    if (calculatedColorScheme) {
-      const scheme = colorSchemes[calculatedColorScheme];
-      if (scheme && typeof scheme === 'object') {
-        // 4.1 Merge the selected color scheme to the theme
-        Object.keys(scheme).forEach(schemeKey => {
-          if (scheme[schemeKey] && typeof scheme[schemeKey] === 'object') {
-            // shallow merge the 1st level structure of the theme.
-            theme[schemeKey] = {
-              ...theme[schemeKey],
-              ...scheme[schemeKey]
-            };
-          } else {
-            theme[schemeKey] = scheme[schemeKey];
-          }
-        });
+      // 4. Resolve the color scheme and merge it to the theme
+      if (calculatedColorScheme) {
+        const scheme = colorSchemes[calculatedColorScheme];
+        if (scheme && typeof scheme === 'object') {
+          // 4.1 Merge the selected color scheme to the theme
+          Object.keys(scheme).forEach(schemeKey => {
+            if (scheme[schemeKey] && typeof scheme[schemeKey] === 'object') {
+              // shallow merge the 1st level structure of the theme.
+              theme[schemeKey] = {
+                ...theme[schemeKey],
+                ...scheme[schemeKey]
+              };
+            } else {
+              theme[schemeKey] = scheme[schemeKey];
+            }
+          });
+        }
       }
-    }
+      return resolveTheme ? resolveTheme(theme) : theme;
+    }, [restThemeProp, colorScheme, components, colorSchemes, cssVarPrefix]);
 
     // 5. Declaring effects
     // 5.1 Updates the selector value to use the current color scheme which tells CSS to use the proper stylesheet.
@@ -211,13 +215,13 @@ export default function createCssVarsProvider(options) {
       mode,
       setColorScheme,
       setMode: process.env.NODE_ENV === 'production' ? setMode : newMode => {
-        if (theme.colorSchemeSelector === 'media') {
+        if (memoTheme.colorSchemeSelector === 'media') {
           console.error(['MUI: The `setMode` function has no effect if `colorSchemeSelector` is `media` (`media` is the default value).', 'To toggle the mode manually, please configure `colorSchemeSelector` to use a class or data attribute.', 'To learn more, visit https://mui.com/material-ui/customization/css-theme-variables/configuration/#toggling-dark-mode-manually'].join('\n'));
         }
         setMode(newMode);
       },
       systemMode
-    }), [allColorSchemes, colorScheme, darkColorScheme, lightColorScheme, mode, setColorScheme, setMode, systemMode, theme.colorSchemeSelector]);
+    }), [allColorSchemes, colorScheme, darkColorScheme, lightColorScheme, mode, setColorScheme, setMode, systemMode, memoTheme.colorSchemeSelector]);
     let shouldGenerateStyleSheet = true;
     if (disableStyleSheetGeneration || restThemeProp.cssVariables === false || nested && upperTheme?.cssVarPrefix === cssVarPrefix) {
       shouldGenerateStyleSheet = false;
@@ -225,10 +229,10 @@ export default function createCssVarsProvider(options) {
     const element = /*#__PURE__*/_jsxs(React.Fragment, {
       children: [/*#__PURE__*/_jsx(ThemeProvider, {
         themeId: scopedTheme ? themeId : undefined,
-        theme: resolveTheme ? resolveTheme(theme) : theme,
+        theme: memoTheme,
         children: children
       }), shouldGenerateStyleSheet && /*#__PURE__*/_jsx(GlobalStyles, {
-        styles: theme.generateStyleSheets?.() || []
+        styles: memoTheme.generateStyleSheets?.() || []
       })]
     });
     if (nested) {

package/esm/version/index.js

@@ -1,6 +1,6 @@
-export const version = "6.1.9";
+export const version = "6.2.0";
 export const major = Number("6");
-export const minor = Number("1");
-export const patch = Number("9");
+export const minor = Number("2");
+export const patch = Number("0");
 export const prerelease = undefined;
 export default version;

package/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/system v6.1.9
+ * @mui/system v6.2.0
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/memoTheme.d.ts

@@ -8,5 +8,5 @@ type ThemeStyleFunction<T> = (props: {
  */
 export default function unstable_memoTheme<T>(styleFn: ThemeStyleFunction<T>): (props: {
     theme: T;
-}) => string | number | boolean | import("@mui/styled-engine").ComponentSelector | import("@mui/styled-engine").Keyframes | import("@mui/styled-engine").SerializedStyles | import("@mui/styled-engine").CSSObject | import("@mui/styled-engine").ArrayCSSInterpolation | null;
+}) => string | number | boolean | import("@mui/styled-engine").CSSObject | import("@mui/styled-engine").ComponentSelector | import("@mui/styled-engine").Keyframes | import("@mui/styled-engine").SerializedStyles | import("@mui/styled-engine").ArrayCSSInterpolation | null;
 export {};

package/modern/Grid/createGrid.js

@@ -6,7 +6,7 @@ import generateUtilityClass from '@mui/utils/generateUtilityClass';
 import composeClasses from '@mui/utils/composeClasses';
 import systemStyled from "../styled/index.js";
 import useThemePropsSystem from "../useThemeProps/index.js";
-import useTheme from "../useTheme/index.js";
+import useThemeSystem from "../useTheme/index.js";
 import { extendSxProp } from "../styleFunctionSx/index.js";
 import createTheme from "../createTheme/index.js";
 import { generateGridStyles, generateGridSizeStyles, generateGridColumnsStyles, generateGridColumnSpacingStyles, generateGridRowSpacingStyles, generateGridDirectionStyles, generateGridOffsetStyles, generateSizeClassNames, generateSpacingClassNames, generateDirectionClasses } from "./gridGenerator.js";
@@ -31,6 +31,7 @@ export default function createGrid(options = {}) {
     // This will allow adding custom styled fn (for example for custom sx style function)
     createStyledComponent = defaultCreateStyledComponent,
     useThemeProps = useThemePropsDefault,
+    useTheme = useThemeSystem,
     componentName = 'MuiGrid'
   } = options;
   const useUtilityClasses = (ownerState, theme) => {

package/modern/Grid/index.js

@@ -3,4 +3,5 @@ export { default as createGrid } from "./createGrid.js";
 export * from "./GridProps.js";
 export { default as gridClasses } from "./gridClasses.js";
 export * from "./gridClasses.js";
-export { traverseBreakpoints as unstable_traverseBreakpoints } from "./traverseBreakpoints.js";
+export { traverseBreakpoints as unstable_traverseBreakpoints } from "./traverseBreakpoints.js";
+export { generateDirectionClasses as unstable_generateDirectionClasses, generateSizeClassNames as unstable_generateSizeClassNames, generateSpacingClassNames as unstable_generateSpacingClassNames } from "./gridGenerator.js";

package/modern/cssVars/createCssVarsProvider.js

@@ -38,6 +38,8 @@ export default function createCssVarsProvider(options) {
     ColorSchemeContext.displayName = 'ColorSchemeContext';
   }
   const useColorScheme = () => React.useContext(ColorSchemeContext) || defaultContext;
+  const defaultColorSchemes = {};
+  const defaultComponents = {};
   function CssVarsProvider(props) {
     const {
       children,
@@ -64,12 +66,12 @@ export default function createCssVarsProvider(options) {
       return typeof defaultTheme === 'function' ? defaultTheme() : defaultTheme;
     }, [themeProp]);
     const scopedTheme = initialTheme[themeId];
+    const restThemeProp = scopedTheme || initialTheme;
     const {
-      colorSchemes = {},
-      components = {},
-      cssVarPrefix,
-      ...restThemeProp
-    } = scopedTheme || initialTheme;
+      colorSchemes = defaultColorSchemes,
+      components = defaultComponents,
+      cssVarPrefix
+    } = restThemeProp;
     const joinedColorSchemes = Object.keys(colorSchemes).filter(k => !!colorSchemes[k]).join(',');
     const allColorSchemes = React.useMemo(() => joinedColorSchemes.split(','), [joinedColorSchemes]);
     const defaultLightColorScheme = typeof defaultColorScheme === 'string' ? defaultColorScheme : defaultColorScheme.light;
@@ -101,43 +103,45 @@ export default function createCssVarsProvider(options) {
       mode = ctx.mode;
       colorScheme = ctx.colorScheme;
     }
+    const memoTheme = React.useMemo(() => {
+      // `colorScheme` is undefined on the server and hydration phase
+      const calculatedColorScheme = colorScheme || restThemeProp.defaultColorScheme;
 
-    // `colorScheme` is undefined on the server and hydration phase
-    const calculatedColorScheme = colorScheme || restThemeProp.defaultColorScheme;
+      // 2. get the `vars` object that refers to the CSS custom properties
+      const themeVars = restThemeProp.generateThemeVars?.() || restThemeProp.vars;
 
-    // 2. get the `vars` object that refers to the CSS custom properties
-    const themeVars = restThemeProp.generateThemeVars?.() || restThemeProp.vars;
-
-    // 3. Start composing the theme object
-    const theme = {
-      ...restThemeProp,
-      components,
-      colorSchemes,
-      cssVarPrefix,
-      vars: themeVars
-    };
-    if (typeof theme.generateSpacing === 'function') {
-      theme.spacing = theme.generateSpacing();
-    }
+      // 3. Start composing the theme object
+      const theme = {
+        ...restThemeProp,
+        components,
+        colorSchemes,
+        cssVarPrefix,
+        vars: themeVars
+      };
+      if (typeof theme.generateSpacing === 'function') {
+        theme.spacing = theme.generateSpacing();
+      }
 
-    // 4. Resolve the color scheme and merge it to the theme
-    if (calculatedColorScheme) {
-      const scheme = colorSchemes[calculatedColorScheme];
-      if (scheme && typeof scheme === 'object') {
-        // 4.1 Merge the selected color scheme to the theme
-        Object.keys(scheme).forEach(schemeKey => {
-          if (scheme[schemeKey] && typeof scheme[schemeKey] === 'object') {
-            // shallow merge the 1st level structure of the theme.
-            theme[schemeKey] = {
-              ...theme[schemeKey],
-              ...scheme[schemeKey]
-            };
-          } else {
-            theme[schemeKey] = scheme[schemeKey];
-          }
-        });
+      // 4. Resolve the color scheme and merge it to the theme
+      if (calculatedColorScheme) {
+        const scheme = colorSchemes[calculatedColorScheme];
+        if (scheme && typeof scheme === 'object') {
+          // 4.1 Merge the selected color scheme to the theme
+          Object.keys(scheme).forEach(schemeKey => {
+            if (scheme[schemeKey] && typeof scheme[schemeKey] === 'object') {
+              // shallow merge the 1st level structure of the theme.
+              theme[schemeKey] = {
+                ...theme[schemeKey],
+                ...scheme[schemeKey]
+              };
+            } else {
+              theme[schemeKey] = scheme[schemeKey];
+            }
+          });
+        }
       }
-    }
+      return resolveTheme ? resolveTheme(theme) : theme;
+    }, [restThemeProp, colorScheme, components, colorSchemes, cssVarPrefix]);
 
     // 5. Declaring effects
     // 5.1 Updates the selector value to use the current color scheme which tells CSS to use the proper stylesheet.
@@ -211,13 +215,13 @@ export default function createCssVarsProvider(options) {
       mode,
       setColorScheme,
       setMode: process.env.NODE_ENV === 'production' ? setMode : newMode => {
-        if (theme.colorSchemeSelector === 'media') {
+        if (memoTheme.colorSchemeSelector === 'media') {
           console.error(['MUI: The `setMode` function has no effect if `colorSchemeSelector` is `media` (`media` is the default value).', 'To toggle the mode manually, please configure `colorSchemeSelector` to use a class or data attribute.', 'To learn more, visit https://mui.com/material-ui/customization/css-theme-variables/configuration/#toggling-dark-mode-manually'].join('\n'));
         }
         setMode(newMode);
       },
       systemMode
-    }), [allColorSchemes, colorScheme, darkColorScheme, lightColorScheme, mode, setColorScheme, setMode, systemMode, theme.colorSchemeSelector]);
+    }), [allColorSchemes, colorScheme, darkColorScheme, lightColorScheme, mode, setColorScheme, setMode, systemMode, memoTheme.colorSchemeSelector]);
     let shouldGenerateStyleSheet = true;
     if (disableStyleSheetGeneration || restThemeProp.cssVariables === false || nested && upperTheme?.cssVarPrefix === cssVarPrefix) {
       shouldGenerateStyleSheet = false;
@@ -225,10 +229,10 @@ export default function createCssVarsProvider(options) {
     const element = /*#__PURE__*/_jsxs(React.Fragment, {
       children: [/*#__PURE__*/_jsx(ThemeProvider, {
         themeId: scopedTheme ? themeId : undefined,
-        theme: resolveTheme ? resolveTheme(theme) : theme,
+        theme: memoTheme,
         children: children
       }), shouldGenerateStyleSheet && /*#__PURE__*/_jsx(GlobalStyles, {
-        styles: theme.generateStyleSheets?.() || []
+        styles: memoTheme.generateStyleSheets?.() || []
       })]
     });
     if (nested) {

package/modern/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/system v6.1.9
+ * @mui/system v6.2.0
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/modern/version/index.js

@@ -1,6 +1,6 @@
-export const version = "6.1.9";
+export const version = "6.2.0";
 export const major = Number("6");
-export const minor = Number("1");
-export const patch = Number("9");
+export const minor = Number("2");
+export const patch = Number("0");
 export const prerelease = undefined;
 export default version;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/system",
-  "version": "6.1.9",
+  "version": "6.2.0",
   "private": false,
   "author": "MUI Team",
   "description": "MUI System is a set of CSS utilities to help you build custom designs more efficiently. It makes it possible to rapidly lay out custom designs.",
@@ -30,10 +30,10 @@
     "clsx": "^2.1.1",
     "csstype": "^3.1.3",
     "prop-types": "^15.8.1",
-    "@mui/private-theming": "^6.1.9",
+    "@mui/private-theming": "^6.2.0",
     "@mui/types": "^7.2.19",
-    "@mui/styled-engine": "^6.1.9",
-    "@mui/utils": "^6.1.9"
+    "@mui/utils": "^6.2.0",
+    "@mui/styled-engine": "^6.2.0"
   },
   "peerDependencies": {
     "@emotion/react": "^11.5.0",

package/version/index.js

@@ -4,9 +4,9 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.version = exports.prerelease = exports.patch = exports.minor = exports.major = exports.default = void 0;
-const version = exports.version = "6.1.9";
+const version = exports.version = "6.2.0";
 const major = exports.major = Number("6");
-const minor = exports.minor = Number("1");
-const patch = exports.patch = Number("9");
+const minor = exports.minor = Number("2");
+const patch = exports.patch = Number("0");
 const prerelease = exports.prerelease = undefined;
 var _default = exports.default = version;