@mui/system 6.1.7 → 6.1.9

package/CHANGELOG.md

@@ -1,5 +1,104 @@
 # [Versions](https://mui.com/versions/)
 
+## 6.1.9
+
+<!-- generated comparing v6.1.8..master -->
+
+_Nov 27, 2024_
+
+A big thanks to the 8 contributors who made this release possible.
+
+### `@mui/material@6.1.9`
+
+- [Select] Omit `placeholder` from props (#44502) @Juneezee
+- [Grid2] Add container class to `Grid2Classes` (#44562) @sai6855
+
+### `@mui/system@6.1.9`
+
+- Add ThemeProvider `noSsr` to prevent double rendering (#44451) @siriwatknp
+
+### `@mui/codemod@6.1.9`
+
+- [codemod] Fix handling of computed `paragraph` props (#44195) @joshkel
+
+### `@mui/material-pigment-css@6.1.9`
+
+- Make @pigment-css/react as peer dependency (#44498) @brijeshb42
+
+### Docs
+
+- [material-ui] Add missing required dependencies in dashboard template README (#44476) @mesqueeb
+- [material-ui] Add missing Roboto import to Next.js integration docs (#44462) @StaceyD22
+- [material-ui][Dialog] Fix padding in SimpleDialog demo (#44467) @oliviertassinari
+- Fix template page issues (#44466) @oliviertassinari
+- [examples] Add dark mode example for Material UI + Pigment CSS (#44480) @mnajdova
+
+### Core
+
+- Remove TODO line in the changelog (#44484) @mnajdova
+- Polish image display (418e888) @oliviertassinari
+- [core-infra] Add no-relative-packages (#44489) @oliviertassinari
+- [docs-infra] Support CSS variables API info (#44559) @mnajdova
+- [docs-infra] Fix display when ad-block triggers (#44567) @oliviertassinari
+- [docs-infra] Improve locator finding using visible option (#44541) @siriwatknp
+- [docs-infra] Correctly flatten the pages tree (#44514) @oliviertassinari
+- [docs-infra] Fix Sponsor design regression (#44515) @oliviertassinari
+- [test] Remove React.ReactElement<any> from describeConformance.tsx (#44318) @sai6855
+- [test] Do not enforce the presence of `ownerState.className` in `describeConformance` (#44479) @flaviendelangle
+
+All contributors of this release in alphabetical order: @brijeshb42, @flaviendelangle, @joshkel, @Juneezee, @mesqueeb, @mnajdova, @oliviertassinari, @sai6855, @siriwatknp, @StaceyD22
+
+## v6.1.8
+
+<!-- generated comparing v6.1.7..master -->
+
+_Nov 20, 2024_
+
+A big thanks to the 10 contributors who made this release possible.
+
+### `@mui/material@6.1.8`
+
+- [Autocomplete] Use `ul` element for the listbox (#44422) @DiegoAndai
+- [Grid2] Remove item and zeroMinWidth classes from grid2Classes (#44419) @sai6855
+- [StepIcon] Add SvgIconOwnProps type to StepIcon props (#44337) @sai6855
+- Add generic back to `useMediaQuery` to prevent a breaking change (#44455) @siriwatknp
+- [Tooltip] Deprecate `*Component` and `*Props` for v6 (#44350) @siriwatknp
+
+### `@mui/system@6.1.8`
+
+- Warn when calling `setMode` without configuring `colorSchemeSelector` (#43783) @siriwatknp
+
+### `@mui/styled-engine@6.1.8`
+
+- Add back removed internal function (#44421) @mnajdova
+
+### `@mui/utils@6.1.8`
+
+- Skip deep clone React element (#44400) @siriwatknp
+- Add documentation to `useForkRef` (#44410) @JCQuintas
+
+### Docs
+
+- [Accordion] Replace hardcoded classes with constants in demos (#44453) @ZeeshanTamboli
+- [material-ui][Autocomplete] Fix virtualization demo (#44382) @DiegoAndai
+- Revert #44388 (#44454) @prakhargupta1
+- Add App starters in related-projects.md (#44315) @oliviertassinari
+- Bring back `*Component` and `*Props` codemods and deprecation messages (#44383) @DiegoAndai
+- [docs] Copyedit Templates page (#44461) @samuelsycamore
+
+### Core
+
+- Remove `stylis-plugin-rtl-sc` (#44447) @renovate[bot]
+- [test][Autocomplete] Make virtualize regression screenshots deterministic (#44425) @DiegoAndai
+- [blog] Fix reference to subdomain on MUI X v8 alpha zero post (#44416) @joserodolfofreitas
+- [blog] MUI X v8 alpha zero blog post (#44377) @joserodolfofreitas
+- [code-infra] Use vitest-compatible skip in `describeConformance` (#44412) @JCQuintas
+- Keep OpenSSF badge up-to-date (aef2bf2) @oliviertassinari
+- Polish useForkRef docs (#44424) @oliviertassinari
+- [infra] Upgrade Cherry-pick workflow to latest (#44448) @oliviertassinari
+
+All contributors of this release in alphabetical order: @DiegoAndai, @JCQuintas, @joserodolfofreitas, @mnajdova, @oliviertassinari, @prakhargupta1, @sai6855, samuelsycamore, @siriwatknp, @ZeeshanTamboli
+
 ## v6.1.7
 
 <!-- generated comparing v6.1.6..master -->

package/cssVars/createCssVarsProvider.js

@@ -59,7 +59,8 @@ function createCssVarsProvider(options) {
       colorSchemeNode = typeof document === 'undefined' ? undefined : document.documentElement,
       disableNestedContext = false,
       disableStyleSheetGeneration = false,
-      defaultMode: initialMode = 'system'
+      defaultMode: initialMode = 'system',
+      noSsr
     } = props;
     const hasMounted = React.useRef(false);
     const upperTheme = (0, _privateTheming.useTheme)();
@@ -100,7 +101,8 @@ function createCssVarsProvider(options) {
       modeStorageKey,
       colorSchemeStorageKey,
       defaultMode,
-      storageWindow
+      storageWindow,
+      noSsr
     });
     let mode = stateMode;
     let colorScheme = stateColorScheme;
@@ -217,9 +219,14 @@ function createCssVarsProvider(options) {
       lightColorScheme,
       mode,
       setColorScheme,
-      setMode,
+      setMode: process.env.NODE_ENV === 'production' ? setMode : newMode => {
+        if (theme.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]);
+    }), [allColorSchemes, colorScheme, darkColorScheme, lightColorScheme, mode, setColorScheme, setMode, systemMode, theme.colorSchemeSelector]);
     let shouldGenerateStyleSheet = true;
     if (disableStyleSheetGeneration || restThemeProp.cssVariables === false || nested && upperTheme?.cssVarPrefix === cssVarPrefix) {
       shouldGenerateStyleSheet = false;
@@ -281,6 +288,11 @@ function createCssVarsProvider(options) {
      * The key in the local storage used to store current color scheme.
      */
     modeStorageKey: _propTypes.default.string,
+    /**
+     * If `true`, the mode will be the same value as the storage without an extra rerendering after the hydration.
+     * You should use this option in conjuction with `InitColorSchemeScript` component.
+     */
+    noSsr: _propTypes.default.bool,
     /**
      * The window that attaches the 'storage' event listener.
      * @default window

package/cssVars/useCurrentColorScheme.d.ts

@@ -48,6 +48,7 @@ interface UseCurrentColoSchemeOptions<SupportedColorScheme extends string> {
     modeStorageKey?: string;
     colorSchemeStorageKey?: string;
     storageWindow?: Window | null;
+    noSsr?: boolean;
 }
 export default function useCurrentColorScheme<SupportedColorScheme extends string>(options: UseCurrentColoSchemeOptions<SupportedColorScheme>): Result<SupportedColorScheme>;
 export {};

package/cssVars/useCurrentColorScheme.js

@@ -64,7 +64,8 @@ function useCurrentColorScheme(options) {
     supportedColorSchemes = [],
     modeStorageKey = _InitColorSchemeScript.DEFAULT_MODE_STORAGE_KEY,
     colorSchemeStorageKey = _InitColorSchemeScript.DEFAULT_COLOR_SCHEME_STORAGE_KEY,
-    storageWindow = typeof window === 'undefined' ? undefined : window
+    storageWindow = typeof window === 'undefined' ? undefined : window,
+    noSsr = false
   } = options;
   const joinedColorSchemes = supportedColorSchemes.join(',');
   const isMultiSchemes = supportedColorSchemes.length > 1;
@@ -79,15 +80,10 @@ function useCurrentColorScheme(options) {
       darkColorScheme
     };
   });
-  // This could be improved with `React.useSyncExternalStore` in the future.
-  const [, setHasMounted] = React.useState(false);
-  const hasMounted = React.useRef(false);
+  const [isClient, setIsClient] = React.useState(noSsr || !isMultiSchemes);
   React.useEffect(() => {
-    if (isMultiSchemes) {
-      setHasMounted(true); // to rerender the component after hydration
-    }
-    hasMounted.current = true;
-  }, [isMultiSchemes]);
+    setIsClient(true); // to rerender the component after hydration
+  }, []);
   const colorScheme = getColorScheme(state);
   const setMode = React.useCallback(mode => {
     setState(currentState => {
@@ -251,9 +247,9 @@ function useCurrentColorScheme(options) {
   }, [setColorScheme, setMode, modeStorageKey, colorSchemeStorageKey, joinedColorSchemes, defaultMode, storageWindow, isMultiSchemes]);
   return {
     ...state,
-    mode: hasMounted.current || !isMultiSchemes ? state.mode : undefined,
-    systemMode: hasMounted.current || !isMultiSchemes ? state.systemMode : undefined,
-    colorScheme: hasMounted.current || !isMultiSchemes ? colorScheme : undefined,
+    mode: isClient ? state.mode : undefined,
+    systemMode: isClient ? state.systemMode : undefined,
+    colorScheme: isClient ? colorScheme : undefined,
     setMode,
     setColorScheme
   };

package/esm/cssVars/createCssVarsProvider.js

@@ -50,7 +50,8 @@ export default function createCssVarsProvider(options) {
       colorSchemeNode = typeof document === 'undefined' ? undefined : document.documentElement,
       disableNestedContext = false,
       disableStyleSheetGeneration = false,
-      defaultMode: initialMode = 'system'
+      defaultMode: initialMode = 'system',
+      noSsr
     } = props;
     const hasMounted = React.useRef(false);
     const upperTheme = muiUseTheme();
@@ -91,7 +92,8 @@ export default function createCssVarsProvider(options) {
       modeStorageKey,
       colorSchemeStorageKey,
       defaultMode,
-      storageWindow
+      storageWindow,
+      noSsr
     });
     let mode = stateMode;
     let colorScheme = stateColorScheme;
@@ -208,9 +210,14 @@ export default function createCssVarsProvider(options) {
       lightColorScheme,
       mode,
       setColorScheme,
-      setMode,
+      setMode: process.env.NODE_ENV === 'production' ? setMode : newMode => {
+        if (theme.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]);
+    }), [allColorSchemes, colorScheme, darkColorScheme, lightColorScheme, mode, setColorScheme, setMode, systemMode, theme.colorSchemeSelector]);
     let shouldGenerateStyleSheet = true;
     if (disableStyleSheetGeneration || restThemeProp.cssVariables === false || nested && upperTheme?.cssVarPrefix === cssVarPrefix) {
       shouldGenerateStyleSheet = false;
@@ -272,6 +279,11 @@ export default function createCssVarsProvider(options) {
      * The key in the local storage used to store current color scheme.
      */
     modeStorageKey: PropTypes.string,
+    /**
+     * If `true`, the mode will be the same value as the storage without an extra rerendering after the hydration.
+     * You should use this option in conjuction with `InitColorSchemeScript` component.
+     */
+    noSsr: PropTypes.bool,
     /**
      * The window that attaches the 'storage' event listener.
      * @default window

package/esm/cssVars/useCurrentColorScheme.js

@@ -56,7 +56,8 @@ export default function useCurrentColorScheme(options) {
     supportedColorSchemes = [],
     modeStorageKey = DEFAULT_MODE_STORAGE_KEY,
     colorSchemeStorageKey = DEFAULT_COLOR_SCHEME_STORAGE_KEY,
-    storageWindow = typeof window === 'undefined' ? undefined : window
+    storageWindow = typeof window === 'undefined' ? undefined : window,
+    noSsr = false
   } = options;
   const joinedColorSchemes = supportedColorSchemes.join(',');
   const isMultiSchemes = supportedColorSchemes.length > 1;
@@ -71,15 +72,10 @@ export default function useCurrentColorScheme(options) {
       darkColorScheme
     };
   });
-  // This could be improved with `React.useSyncExternalStore` in the future.
-  const [, setHasMounted] = React.useState(false);
-  const hasMounted = React.useRef(false);
+  const [isClient, setIsClient] = React.useState(noSsr || !isMultiSchemes);
   React.useEffect(() => {
-    if (isMultiSchemes) {
-      setHasMounted(true); // to rerender the component after hydration
-    }
-    hasMounted.current = true;
-  }, [isMultiSchemes]);
+    setIsClient(true); // to rerender the component after hydration
+  }, []);
   const colorScheme = getColorScheme(state);
   const setMode = React.useCallback(mode => {
     setState(currentState => {
@@ -243,9 +239,9 @@ export default function useCurrentColorScheme(options) {
   }, [setColorScheme, setMode, modeStorageKey, colorSchemeStorageKey, joinedColorSchemes, defaultMode, storageWindow, isMultiSchemes]);
   return {
     ...state,
-    mode: hasMounted.current || !isMultiSchemes ? state.mode : undefined,
-    systemMode: hasMounted.current || !isMultiSchemes ? state.systemMode : undefined,
-    colorScheme: hasMounted.current || !isMultiSchemes ? colorScheme : undefined,
+    mode: isClient ? state.mode : undefined,
+    systemMode: isClient ? state.systemMode : undefined,
+    colorScheme: isClient ? colorScheme : undefined,
     setMode,
     setColorScheme
   };

package/esm/version/index.js

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

package/index.js

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

package/modern/cssVars/createCssVarsProvider.js

@@ -50,7 +50,8 @@ export default function createCssVarsProvider(options) {
       colorSchemeNode = typeof document === 'undefined' ? undefined : document.documentElement,
       disableNestedContext = false,
       disableStyleSheetGeneration = false,
-      defaultMode: initialMode = 'system'
+      defaultMode: initialMode = 'system',
+      noSsr
     } = props;
     const hasMounted = React.useRef(false);
     const upperTheme = muiUseTheme();
@@ -91,7 +92,8 @@ export default function createCssVarsProvider(options) {
       modeStorageKey,
       colorSchemeStorageKey,
       defaultMode,
-      storageWindow
+      storageWindow,
+      noSsr
     });
     let mode = stateMode;
     let colorScheme = stateColorScheme;
@@ -208,9 +210,14 @@ export default function createCssVarsProvider(options) {
       lightColorScheme,
       mode,
       setColorScheme,
-      setMode,
+      setMode: process.env.NODE_ENV === 'production' ? setMode : newMode => {
+        if (theme.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]);
+    }), [allColorSchemes, colorScheme, darkColorScheme, lightColorScheme, mode, setColorScheme, setMode, systemMode, theme.colorSchemeSelector]);
     let shouldGenerateStyleSheet = true;
     if (disableStyleSheetGeneration || restThemeProp.cssVariables === false || nested && upperTheme?.cssVarPrefix === cssVarPrefix) {
       shouldGenerateStyleSheet = false;
@@ -272,6 +279,11 @@ export default function createCssVarsProvider(options) {
      * The key in the local storage used to store current color scheme.
      */
     modeStorageKey: PropTypes.string,
+    /**
+     * If `true`, the mode will be the same value as the storage without an extra rerendering after the hydration.
+     * You should use this option in conjuction with `InitColorSchemeScript` component.
+     */
+    noSsr: PropTypes.bool,
     /**
      * The window that attaches the 'storage' event listener.
      * @default window

package/modern/cssVars/useCurrentColorScheme.js

@@ -56,7 +56,8 @@ export default function useCurrentColorScheme(options) {
     supportedColorSchemes = [],
     modeStorageKey = DEFAULT_MODE_STORAGE_KEY,
     colorSchemeStorageKey = DEFAULT_COLOR_SCHEME_STORAGE_KEY,
-    storageWindow = typeof window === 'undefined' ? undefined : window
+    storageWindow = typeof window === 'undefined' ? undefined : window,
+    noSsr = false
   } = options;
   const joinedColorSchemes = supportedColorSchemes.join(',');
   const isMultiSchemes = supportedColorSchemes.length > 1;
@@ -71,15 +72,10 @@ export default function useCurrentColorScheme(options) {
       darkColorScheme
     };
   });
-  // This could be improved with `React.useSyncExternalStore` in the future.
-  const [, setHasMounted] = React.useState(false);
-  const hasMounted = React.useRef(false);
+  const [isClient, setIsClient] = React.useState(noSsr || !isMultiSchemes);
   React.useEffect(() => {
-    if (isMultiSchemes) {
-      setHasMounted(true); // to rerender the component after hydration
-    }
-    hasMounted.current = true;
-  }, [isMultiSchemes]);
+    setIsClient(true); // to rerender the component after hydration
+  }, []);
   const colorScheme = getColorScheme(state);
   const setMode = React.useCallback(mode => {
     setState(currentState => {
@@ -243,9 +239,9 @@ export default function useCurrentColorScheme(options) {
   }, [setColorScheme, setMode, modeStorageKey, colorSchemeStorageKey, joinedColorSchemes, defaultMode, storageWindow, isMultiSchemes]);
   return {
     ...state,
-    mode: hasMounted.current || !isMultiSchemes ? state.mode : undefined,
-    systemMode: hasMounted.current || !isMultiSchemes ? state.systemMode : undefined,
-    colorScheme: hasMounted.current || !isMultiSchemes ? colorScheme : undefined,
+    mode: isClient ? state.mode : undefined,
+    systemMode: isClient ? state.systemMode : undefined,
+    colorScheme: isClient ? colorScheme : undefined,
     setMode,
     setColorScheme
   };

package/modern/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/system v6.1.7
+ * @mui/system v6.1.9
  *
  * @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.7";
+export const version = "6.1.9";
 export const major = Number("6");
 export const minor = Number("1");
-export const patch = Number("7");
+export const patch = Number("9");
 export const prerelease = undefined;
 export default version;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/system",
-  "version": "6.1.7",
+  "version": "6.1.9",
   "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.7",
+    "@mui/private-theming": "^6.1.9",
     "@mui/types": "^7.2.19",
-    "@mui/styled-engine": "^6.1.7",
-    "@mui/utils": "^6.1.7"
+    "@mui/styled-engine": "^6.1.9",
+    "@mui/utils": "^6.1.9"
   },
   "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.7";
+const version = exports.version = "6.1.9";
 const major = exports.major = Number("6");
 const minor = exports.minor = Number("1");
-const patch = exports.patch = Number("7");
+const patch = exports.patch = Number("9");
 const prerelease = exports.prerelease = undefined;
 var _default = exports.default = version;