@mui/system - npm Package Compare versions

Comparing version 6.0.0-beta.4-dev.20240805-092432-9f940a61d6 to 6.0.0-beta.5-dev.20240809-114550-93cb3d65e7

cssContainerQueries/cssContainerQueries.js

@@ -36,3 +36,3 @@ import _formatMuiErrorMessage from "@mui/utils/formatMuiErrorMessage";
       throw new Error(process.env.NODE_ENV !== "production" ? `MUI: The provided shorthand ${`(${shorthand})`} is invalid. The format should be \`@<breakpoint | number>\` or \`@<breakpoint | number>/<container>\`.
-For example, \`@sm\` or \`@600\` or \`@40rem/sidebar\`.` : _formatMuiErrorMessage(21, `(${shorthand})`));
+For example, \`@sm\` or \`@600\` or \`@40rem/sidebar\`.` : _formatMuiErrorMessage(18, `(${shorthand})`));
     }
@@ -39,0 +39,0 @@ return null;

cssVars/createCssVarsProvider.d.ts

@@ -51,4 +51,5 @@ import * as React from 'react';
           {
+            cssVariables?: false;
             cssVarPrefix?: string;
-            colorSchemes: Record<ColorScheme, Record<string, any>>;
+            colorSchemes: Partial<Record<ColorScheme, any>>;
             colorSchemeSelector?: 'media' | 'class' | 'data' | string;
@@ -55,0 +56,0 @@ }

cssVars/createCssVarsProvider.js

@@ -1,2 +0,1 @@
-import _formatMuiErrorMessage from "@mui/utils/formatMuiErrorMessage";
 import * as React from 'react';
@@ -27,2 +26,12 @@ import PropTypes from 'prop-types';
   } = options;
+  const defaultContext = {
+    allColorSchemes: [],
+    colorScheme: undefined,
+    darkColorScheme: undefined,
+    lightColorScheme: undefined,
+    mode: undefined,
+    setColorScheme: () => {},
+    setMode: () => {},
+    systemMode: undefined
+  };
   const ColorSchemeContext = /*#__PURE__*/React.createContext(undefined);
@@ -32,13 +41,7 @@ if (process.env.NODE_ENV !== 'production') {
   }
-  const useColorScheme = () => {
-    const value = React.useContext(ColorSchemeContext);
-    if (!value) {
-      throw new Error(process.env.NODE_ENV !== "production" ? `MUI: \`useColorScheme\` must be called under <CssVarsProvider />` : _formatMuiErrorMessage(19));
-    }
-    return value;
-  };
+  const useColorScheme = () => React.useContext(ColorSchemeContext) || defaultContext;
   function CssVarsProvider(props) {
     const {
       children,
-      theme: themeProp = defaultTheme,
+      theme: themeProp,
       modeStorageKey = defaultModeStorageKey,
@@ -57,3 +60,9 @@ colorSchemeStorageKey = defaultColorSchemeStorageKey,
     const nested = !!ctx && !disableNestedContext;
-    const scopedTheme = themeProp[themeId];
+    const initialTheme = React.useMemo(() => {
+      if (themeProp) {
+        return themeProp;
+      }
+      return typeof defaultTheme === 'function' ? defaultTheme() : defaultTheme;
+    }, [themeProp]);
+    const scopedTheme = initialTheme[themeId];
     const {
@@ -64,3 +73,3 @@ colorSchemes = {},
       ...restThemeProp
-    } = scopedTheme || themeProp;
+    } = scopedTheme || initialTheme;
     const joinedColorSchemes = Object.keys(colorSchemes).filter(k => !!colorSchemes[k]).join(',');
@@ -70,3 +79,3 @@ const allColorSchemes = React.useMemo(() => joinedColorSchemes.split(','), [joinedColorSchemes]);
     const defaultDarkColorScheme = typeof defaultColorScheme === 'string' ? defaultColorScheme : defaultColorScheme.dark;
-    const defaultMode = colorSchemes[defaultLightColorScheme] && colorSchemes[defaultDarkColorScheme] ? 'system' : colorSchemes[restThemeProp.defaultColorScheme]?.palette?.mode;
+    const defaultMode = colorSchemes[defaultLightColorScheme] && colorSchemes[defaultDarkColorScheme] ? 'system' : colorSchemes[restThemeProp.defaultColorScheme]?.palette?.mode || restThemeProp.palette?.mode;
 
@@ -98,3 +107,3 @@ // 1. Get the data about the `mode`, `colorScheme`, and setter functions.
 
-    // `colorScheme` is undefined on the server
+    // `colorScheme` is undefined on the server and hydration phase
     const calculatedColorScheme = colorScheme || restThemeProp.defaultColorScheme;
@@ -118,4 +127,5 @@
     // 4. Resolve the color scheme and merge it to the theme
-    Object.entries(colorSchemes).forEach(([key, scheme]) => {
-      if (key === calculatedColorScheme) {
+    if (calculatedColorScheme) {
+      const scheme = colorSchemes[calculatedColorScheme];
+      if (scheme && typeof scheme === 'object') {
         // 4.1 Merge the selected color scheme to the theme
@@ -133,7 +143,4 @@ Object.keys(scheme).forEach(schemeKey => {
         });
-        if (theme.palette) {
-          theme.palette.colorScheme = key;
-        }
       }
-    });
+    }
 
@@ -215,3 +222,3 @@ // 5. Declaring effects
     let shouldGenerateStyleSheet = true;
-    if (disableStyleSheetGeneration || nested && upperTheme?.cssVarPrefix === cssVarPrefix) {
+    if (disableStyleSheetGeneration || restThemeProp.cssVariables === false || nested && upperTheme?.cssVarPrefix === cssVarPrefix) {
       shouldGenerateStyleSheet = false;
@@ -218,0 +225,0 @@ }

cssVars/useCurrentColorScheme.js

@@ -6,3 +6,3 @@ 'use client';
 export function getSystemMode(mode) {
-  if (typeof window !== 'undefined' && mode === 'system') {
+  if (typeof window !== 'undefined' && typeof window.matchMedia === 'function' && mode === 'system') {
     const mql = window.matchMedia('(prefers-color-scheme: dark)');
@@ -63,2 +63,3 @@ if (mql.matches) {
   const joinedColorSchemes = supportedColorSchemes.join(',');
+  const isMultiSchemes = supportedColorSchemes.length > 1;
   const [state, setState] = React.useState(() => {
@@ -75,2 +76,11 @@ const initialMode = initializeValue(modeStorageKey, defaultMode);
   });
+  // This could be improved with `React.useSyncExternalStore` in the future.
+  const [, setHasMounted] = React.useState(false);
+  const hasMounted = React.useRef(false);
+  React.useEffect(() => {
+    if (isMultiSchemes) {
+      setHasMounted(true); // to rerender the component after hydration
+    }
+    hasMounted.current = true;
+  }, [isMultiSchemes]);
   const colorScheme = getColorScheme(state);
@@ -191,2 +201,5 @@ const setMode = React.useCallback(mode => {
   React.useEffect(() => {
+    if (typeof window.matchMedia !== 'function' || !isMultiSchemes) {
+      return undefined;
+    }
     const handler = (...args) => mediaListener.current(...args);
@@ -203,7 +216,7 @@
     };
-  }, []);
+  }, [isMultiSchemes]);
 
   // Handle when localStorage has changed
   React.useEffect(() => {
-    if (storageWindow) {
+    if (storageWindow && isMultiSchemes) {
       const handleStorage = event => {
@@ -235,6 +248,8 @@ const value = event.newValue;
     return undefined;
-  }, [setColorScheme, setMode, modeStorageKey, colorSchemeStorageKey, joinedColorSchemes, defaultMode, storageWindow]);
+  }, [setColorScheme, setMode, modeStorageKey, colorSchemeStorageKey, joinedColorSchemes, defaultMode, storageWindow, isMultiSchemes]);
   return {
     ...state,
-    colorScheme,
+    mode: hasMounted.current || !isMultiSchemes ? state.mode : undefined,
+    systemMode: hasMounted.current || !isMultiSchemes ? state.systemMode : undefined,
+    colorScheme: hasMounted.current || !isMultiSchemes ? colorScheme : undefined,
     setMode,
@@ -241,0 +256,0 @@ setColorScheme

index.d.ts

@@ -125,1 +125,3 @@ // disable automatic export
 export * from './Stack';
+
+export * from './version';

index.js

 /**
- * @mui/system v6.0.0-beta.4-dev.20240805-092432-9f940a61d6
+ * @mui/system v6.0.0-beta.5-dev.20240809-114550-93cb3d65e7
  *
@@ -38,3 +38,3 @@ * @license MIT
 export function experimental_sx() {
-  throw new Error(process.env.NODE_ENV !== "production" ? `MUI: The \`experimental_sx\` has been moved to \`theme.unstable_sx\`.For more details, see https://github.com/mui/material-ui/pull/35150.` : _formatMuiErrorMessage(20));
+  throw new Error(process.env.NODE_ENV !== "production" ? `MUI: The \`experimental_sx\` has been moved to \`theme.unstable_sx\`.For more details, see https://github.com/mui/material-ui/pull/35150.` : _formatMuiErrorMessage(19));
 }
@@ -65,2 +65,3 @@ export { default as unstable_getThemeValue } from './getThemeValue';
 export * from './RtlProvider';
+export * from './version';
 
@@ -67,0 +68,0 @@ /** ----------------- */

InitColorSchemeScript/InitColorSchemeScript.d.ts

@@ -41,3 +41,3 @@ /**
      */
-    attribute?: string;
+    attribute?: 'class' | 'data' | string;
     /**
@@ -44,0 +44,0 @@ * Nonce string to pass to the inline script for CSP headers

InitColorSchemeScript/InitColorSchemeScript.js

@@ -15,3 +15,3 @@ /**
     colorSchemeStorageKey = DEFAULT_COLOR_SCHEME_STORAGE_KEY,
-    attribute = DEFAULT_ATTRIBUTE,
+    attribute: initialAttribute = DEFAULT_ATTRIBUTE,
     colorSchemeNode = 'document.documentElement',
@@ -21,2 +21,9 @@ nonce
   let setter = '';
+  let attribute = initialAttribute;
+  if (initialAttribute === 'class') {
+    attribute = '.%s';
+  }
+  if (initialAttribute === 'data') {
+    attribute = '[data-%s]';
+  }
   if (attribute.startsWith('.')) {
@@ -23,0 +30,0 @@ const selector = attribute.substring(1);

modern/cssContainerQueries/cssContainerQueries.js

@@ -36,3 +36,3 @@ import _formatMuiErrorMessage from "@mui/utils/formatMuiErrorMessage";
       throw new Error(process.env.NODE_ENV !== "production" ? `MUI: The provided shorthand ${`(${shorthand})`} is invalid. The format should be \`@<breakpoint | number>\` or \`@<breakpoint | number>/<container>\`.
-For example, \`@sm\` or \`@600\` or \`@40rem/sidebar\`.` : _formatMuiErrorMessage(21, `(${shorthand})`));
+For example, \`@sm\` or \`@600\` or \`@40rem/sidebar\`.` : _formatMuiErrorMessage(18, `(${shorthand})`));
     }
@@ -39,0 +39,0 @@ return null;

modern/cssVars/createCssVarsProvider.js

@@ -1,2 +0,1 @@
-import _formatMuiErrorMessage from "@mui/utils/formatMuiErrorMessage";
 import * as React from 'react';
@@ -27,2 +26,12 @@ import PropTypes from 'prop-types';
   } = options;
+  const defaultContext = {
+    allColorSchemes: [],
+    colorScheme: undefined,
+    darkColorScheme: undefined,
+    lightColorScheme: undefined,
+    mode: undefined,
+    setColorScheme: () => {},
+    setMode: () => {},
+    systemMode: undefined
+  };
   const ColorSchemeContext = /*#__PURE__*/React.createContext(undefined);
@@ -32,13 +41,7 @@ if (process.env.NODE_ENV !== 'production') {
   }
-  const useColorScheme = () => {
-    const value = React.useContext(ColorSchemeContext);
-    if (!value) {
-      throw new Error(process.env.NODE_ENV !== "production" ? `MUI: \`useColorScheme\` must be called under <CssVarsProvider />` : _formatMuiErrorMessage(19));
-    }
-    return value;
-  };
+  const useColorScheme = () => React.useContext(ColorSchemeContext) || defaultContext;
   function CssVarsProvider(props) {
     const {
       children,
-      theme: themeProp = defaultTheme,
+      theme: themeProp,
       modeStorageKey = defaultModeStorageKey,
@@ -57,3 +60,9 @@ colorSchemeStorageKey = defaultColorSchemeStorageKey,
     const nested = !!ctx && !disableNestedContext;
-    const scopedTheme = themeProp[themeId];
+    const initialTheme = React.useMemo(() => {
+      if (themeProp) {
+        return themeProp;
+      }
+      return typeof defaultTheme === 'function' ? defaultTheme() : defaultTheme;
+    }, [themeProp]);
+    const scopedTheme = initialTheme[themeId];
     const {
@@ -64,3 +73,3 @@ colorSchemes = {},
       ...restThemeProp
-    } = scopedTheme || themeProp;
+    } = scopedTheme || initialTheme;
     const joinedColorSchemes = Object.keys(colorSchemes).filter(k => !!colorSchemes[k]).join(',');
@@ -70,3 +79,3 @@ const allColorSchemes = React.useMemo(() => joinedColorSchemes.split(','), [joinedColorSchemes]);
     const defaultDarkColorScheme = typeof defaultColorScheme === 'string' ? defaultColorScheme : defaultColorScheme.dark;
-    const defaultMode = colorSchemes[defaultLightColorScheme] && colorSchemes[defaultDarkColorScheme] ? 'system' : colorSchemes[restThemeProp.defaultColorScheme]?.palette?.mode;
+    const defaultMode = colorSchemes[defaultLightColorScheme] && colorSchemes[defaultDarkColorScheme] ? 'system' : colorSchemes[restThemeProp.defaultColorScheme]?.palette?.mode || restThemeProp.palette?.mode;
 
@@ -98,3 +107,3 @@ // 1. Get the data about the `mode`, `colorScheme`, and setter functions.
 
-    // `colorScheme` is undefined on the server
+    // `colorScheme` is undefined on the server and hydration phase
     const calculatedColorScheme = colorScheme || restThemeProp.defaultColorScheme;
@@ -118,4 +127,5 @@
     // 4. Resolve the color scheme and merge it to the theme
-    Object.entries(colorSchemes).forEach(([key, scheme]) => {
-      if (key === calculatedColorScheme) {
+    if (calculatedColorScheme) {
+      const scheme = colorSchemes[calculatedColorScheme];
+      if (scheme && typeof scheme === 'object') {
         // 4.1 Merge the selected color scheme to the theme
@@ -133,7 +143,4 @@ Object.keys(scheme).forEach(schemeKey => {
         });
-        if (theme.palette) {
-          theme.palette.colorScheme = key;
-        }
       }
-    });
+    }
 
@@ -215,3 +222,3 @@ // 5. Declaring effects
     let shouldGenerateStyleSheet = true;
-    if (disableStyleSheetGeneration || nested && upperTheme?.cssVarPrefix === cssVarPrefix) {
+    if (disableStyleSheetGeneration || restThemeProp.cssVariables === false || nested && upperTheme?.cssVarPrefix === cssVarPrefix) {
       shouldGenerateStyleSheet = false;
@@ -218,0 +225,0 @@ }

modern/cssVars/useCurrentColorScheme.js

@@ -6,3 +6,3 @@ 'use client';
 export function getSystemMode(mode) {
-  if (typeof window !== 'undefined' && mode === 'system') {
+  if (typeof window !== 'undefined' && typeof window.matchMedia === 'function' && mode === 'system') {
     const mql = window.matchMedia('(prefers-color-scheme: dark)');
@@ -63,2 +63,3 @@ if (mql.matches) {
   const joinedColorSchemes = supportedColorSchemes.join(',');
+  const isMultiSchemes = supportedColorSchemes.length > 1;
   const [state, setState] = React.useState(() => {
@@ -75,2 +76,11 @@ const initialMode = initializeValue(modeStorageKey, defaultMode);
   });
+  // This could be improved with `React.useSyncExternalStore` in the future.
+  const [, setHasMounted] = React.useState(false);
+  const hasMounted = React.useRef(false);
+  React.useEffect(() => {
+    if (isMultiSchemes) {
+      setHasMounted(true); // to rerender the component after hydration
+    }
+    hasMounted.current = true;
+  }, [isMultiSchemes]);
   const colorScheme = getColorScheme(state);
@@ -191,2 +201,5 @@ const setMode = React.useCallback(mode => {
   React.useEffect(() => {
+    if (typeof window.matchMedia !== 'function' || !isMultiSchemes) {
+      return undefined;
+    }
     const handler = (...args) => mediaListener.current(...args);
@@ -203,7 +216,7 @@
     };
-  }, []);
+  }, [isMultiSchemes]);
 
   // Handle when localStorage has changed
   React.useEffect(() => {
-    if (storageWindow) {
+    if (storageWindow && isMultiSchemes) {
       const handleStorage = event => {
@@ -235,6 +248,8 @@ const value = event.newValue;
     return undefined;
-  }, [setColorScheme, setMode, modeStorageKey, colorSchemeStorageKey, joinedColorSchemes, defaultMode, storageWindow]);
+  }, [setColorScheme, setMode, modeStorageKey, colorSchemeStorageKey, joinedColorSchemes, defaultMode, storageWindow, isMultiSchemes]);
   return {
     ...state,
-    colorScheme,
+    mode: hasMounted.current || !isMultiSchemes ? state.mode : undefined,
+    systemMode: hasMounted.current || !isMultiSchemes ? state.systemMode : undefined,
+    colorScheme: hasMounted.current || !isMultiSchemes ? colorScheme : undefined,
     setMode,
@@ -241,0 +256,0 @@ setColorScheme

modern/index.js

 /**
- * @mui/system v6.0.0-beta.4-dev.20240805-092432-9f940a61d6
+ * @mui/system v6.0.0-beta.5-dev.20240809-114550-93cb3d65e7
  *
@@ -38,3 +38,3 @@ * @license MIT
 export function experimental_sx() {
-  throw new Error(process.env.NODE_ENV !== "production" ? `MUI: The \`experimental_sx\` has been moved to \`theme.unstable_sx\`.For more details, see https://github.com/mui/material-ui/pull/35150.` : _formatMuiErrorMessage(20));
+  throw new Error(process.env.NODE_ENV !== "production" ? `MUI: The \`experimental_sx\` has been moved to \`theme.unstable_sx\`.For more details, see https://github.com/mui/material-ui/pull/35150.` : _formatMuiErrorMessage(19));
 }
@@ -65,2 +65,3 @@ export { default as unstable_getThemeValue } from './getThemeValue';
 export * from './RtlProvider';
+export * from './version';
 
@@ -67,0 +68,0 @@ /** ----------------- */

modern/InitColorSchemeScript/InitColorSchemeScript.js

@@ -15,3 +15,3 @@ /**
     colorSchemeStorageKey = DEFAULT_COLOR_SCHEME_STORAGE_KEY,
-    attribute = DEFAULT_ATTRIBUTE,
+    attribute: initialAttribute = DEFAULT_ATTRIBUTE,
     colorSchemeNode = 'document.documentElement',
@@ -21,2 +21,9 @@ nonce
   let setter = '';
+  let attribute = initialAttribute;
+  if (initialAttribute === 'class') {
+    attribute = '.%s';
+  }
+  if (initialAttribute === 'data') {
+    attribute = '[data-%s]';
+  }
   if (attribute.startsWith('.')) {
@@ -23,0 +30,0 @@ const selector = attribute.substring(1);

modern/useThemeProps/useThemeProps.js

@@ -15,3 +15,3 @@ 'use client';
   }
-  const mergedProps = getThemeProps({
+  return getThemeProps({
     theme,
@@ -21,3 +21,2 @@ name,
   });
-  return mergedProps;
 }

node/cssContainerQueries/cssContainerQueries.js

@@ -47,3 +47,3 @@ "use strict";
       throw new Error(process.env.NODE_ENV !== "production" ? `MUI: The provided shorthand ${`(${shorthand})`} is invalid. The format should be \`@<breakpoint | number>\` or \`@<breakpoint | number>/<container>\`.
-For example, \`@sm\` or \`@600\` or \`@40rem/sidebar\`.` : (0, _formatMuiErrorMessage2.default)(21, `(${shorthand})`));
+For example, \`@sm\` or \`@600\` or \`@40rem/sidebar\`.` : (0, _formatMuiErrorMessage2.default)(18, `(${shorthand})`));
     }
@@ -50,0 +50,0 @@ return null;

node/cssVars/createCssVarsProvider.js

@@ -9,3 +9,2 @@ "use strict";
 exports.default = createCssVarsProvider;
-var _formatMuiErrorMessage2 = _interopRequireDefault(require("@mui/utils/formatMuiErrorMessage"));
 var React = _interopRequireWildcard(require("react"));
@@ -38,2 +37,12 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
   } = options;
+  const defaultContext = {
+    allColorSchemes: [],
+    colorScheme: undefined,
+    darkColorScheme: undefined,
+    lightColorScheme: undefined,
+    mode: undefined,
+    setColorScheme: () => {},
+    setMode: () => {},
+    systemMode: undefined
+  };
   const ColorSchemeContext = /*#__PURE__*/React.createContext(undefined);
@@ -43,14 +52,8 @@ if (process.env.NODE_ENV !== 'production') {
   }
-  const useColorScheme = () => {
-    const value = React.useContext(ColorSchemeContext);
-    if (!value) {
-      throw new Error(process.env.NODE_ENV !== "production" ? `MUI: \`useColorScheme\` must be called under <CssVarsProvider />` : (0, _formatMuiErrorMessage2.default)(19));
-    }
-    return value;
-  };
+  const useColorScheme = () => React.useContext(ColorSchemeContext) || defaultContext;
   function CssVarsProvider(props) {
-    var _colorSchemes$restThe, _restThemeProp$genera, _theme$generateStyleS;
+    var _colorSchemes$restThe, _restThemeProp$palett, _restThemeProp$genera, _theme$generateStyleS;
     const {
       children,
-      theme: themeProp = defaultTheme,
+      theme: themeProp,
       modeStorageKey = defaultModeStorageKey,
@@ -69,3 +72,9 @@ colorSchemeStorageKey = defaultColorSchemeStorageKey,
     const nested = !!ctx && !disableNestedContext;
-    const scopedTheme = themeProp[themeId];
+    const initialTheme = React.useMemo(() => {
+      if (themeProp) {
+        return themeProp;
+      }
+      return typeof defaultTheme === 'function' ? defaultTheme() : defaultTheme;
+    }, [themeProp]);
+    const scopedTheme = initialTheme[themeId];
     const {
@@ -76,3 +85,3 @@ colorSchemes = {},
       ...restThemeProp
-    } = scopedTheme || themeProp;
+    } = scopedTheme || initialTheme;
     const joinedColorSchemes = Object.keys(colorSchemes).filter(k => !!colorSchemes[k]).join(',');
@@ -82,3 +91,3 @@ const allColorSchemes = React.useMemo(() => joinedColorSchemes.split(','), [joinedColorSchemes]);
     const defaultDarkColorScheme = typeof defaultColorScheme === 'string' ? defaultColorScheme : defaultColorScheme.dark;
-    const defaultMode = colorSchemes[defaultLightColorScheme] && colorSchemes[defaultDarkColorScheme] ? 'system' : (_colorSchemes$restThe = colorSchemes[restThemeProp.defaultColorScheme]) == null || (_colorSchemes$restThe = _colorSchemes$restThe.palette) == null ? void 0 : _colorSchemes$restThe.mode;
+    const defaultMode = colorSchemes[defaultLightColorScheme] && colorSchemes[defaultDarkColorScheme] ? 'system' : ((_colorSchemes$restThe = colorSchemes[restThemeProp.defaultColorScheme]) == null || (_colorSchemes$restThe = _colorSchemes$restThe.palette) == null ? void 0 : _colorSchemes$restThe.mode) || ((_restThemeProp$palett = restThemeProp.palette) == null ? void 0 : _restThemeProp$palett.mode);
 
@@ -110,3 +119,3 @@ // 1. Get the data about the `mode`, `colorScheme`, and setter functions.
 
-    // `colorScheme` is undefined on the server
+    // `colorScheme` is undefined on the server and hydration phase
     const calculatedColorScheme = colorScheme || restThemeProp.defaultColorScheme;
@@ -130,4 +139,5 @@
     // 4. Resolve the color scheme and merge it to the theme
-    Object.entries(colorSchemes).forEach(([key, scheme]) => {
-      if (key === calculatedColorScheme) {
+    if (calculatedColorScheme) {
+      const scheme = colorSchemes[calculatedColorScheme];
+      if (scheme && typeof scheme === 'object') {
         // 4.1 Merge the selected color scheme to the theme
@@ -145,7 +155,4 @@ Object.keys(scheme).forEach(schemeKey => {
         });
-        if (theme.palette) {
-          theme.palette.colorScheme = key;
-        }
       }
-    });
+    }
 
@@ -227,3 +234,3 @@ // 5. Declaring effects
     let shouldGenerateStyleSheet = true;
-    if (disableStyleSheetGeneration || nested && (upperTheme == null ? void 0 : upperTheme.cssVarPrefix) === cssVarPrefix) {
+    if (disableStyleSheetGeneration || restThemeProp.cssVariables === false || nested && (upperTheme == null ? void 0 : upperTheme.cssVarPrefix) === cssVarPrefix) {
       shouldGenerateStyleSheet = false;
@@ -230,0 +237,0 @@ }

node/cssVars/useCurrentColorScheme.js

@@ -15,3 +15,3 @@ "use strict";
 function getSystemMode(mode) {
-  if (typeof window !== 'undefined' && mode === 'system') {
+  if (typeof window !== 'undefined' && typeof window.matchMedia === 'function' && mode === 'system') {
     const mql = window.matchMedia('(prefers-color-scheme: dark)');
@@ -72,2 +72,3 @@ if (mql.matches) {
   const joinedColorSchemes = supportedColorSchemes.join(',');
+  const isMultiSchemes = supportedColorSchemes.length > 1;
   const [state, setState] = React.useState(() => {
@@ -84,2 +85,11 @@ const initialMode = initializeValue(modeStorageKey, defaultMode);
   });
+  // This could be improved with `React.useSyncExternalStore` in the future.
+  const [, setHasMounted] = React.useState(false);
+  const hasMounted = React.useRef(false);
+  React.useEffect(() => {
+    if (isMultiSchemes) {
+      setHasMounted(true); // to rerender the component after hydration
+    }
+    hasMounted.current = true;
+  }, [isMultiSchemes]);
   const colorScheme = getColorScheme(state);
@@ -200,2 +210,5 @@ const setMode = React.useCallback(mode => {
   React.useEffect(() => {
+    if (typeof window.matchMedia !== 'function' || !isMultiSchemes) {
+      return undefined;
+    }
     const handler = (...args) => mediaListener.current(...args);
@@ -212,7 +225,7 @@
     };
-  }, []);
+  }, [isMultiSchemes]);
 
   // Handle when localStorage has changed
   React.useEffect(() => {
-    if (storageWindow) {
+    if (storageWindow && isMultiSchemes) {
       const handleStorage = event => {
@@ -244,6 +257,8 @@ const value = event.newValue;
     return undefined;
-  }, [setColorScheme, setMode, modeStorageKey, colorSchemeStorageKey, joinedColorSchemes, defaultMode, storageWindow]);
+  }, [setColorScheme, setMode, modeStorageKey, colorSchemeStorageKey, joinedColorSchemes, defaultMode, storageWindow, isMultiSchemes]);
   return {
     ...state,
-    colorScheme,
+    mode: hasMounted.current || !isMultiSchemes ? state.mode : undefined,
+    systemMode: hasMounted.current || !isMultiSchemes ? state.systemMode : undefined,
+    colorScheme: hasMounted.current || !isMultiSchemes ? colorScheme : undefined,
     setMode,
@@ -250,0 +265,0 @@ setColorScheme

node/index.js

 /**
- * @mui/system v6.0.0-beta.4-dev.20240805-092432-9f940a61d6
+ * @mui/system v6.0.0-beta.5-dev.20240809-114550-93cb3d65e7
  *
@@ -550,2 +550,14 @@ * @license MIT
 });
+var _version = require("./version");
+Object.keys(_version).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _version[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _version[key];
+    }
+  });
+});
 var _createContainer = _interopRequireDefault(require("./Container/createContainer"));
@@ -595,3 +607,3 @@ var _Container = _interopRequireWildcard(require("./Container"));
 function experimental_sx() {
-  throw new Error(process.env.NODE_ENV !== "production" ? `MUI: The \`experimental_sx\` has been moved to \`theme.unstable_sx\`.For more details, see https://github.com/mui/material-ui/pull/35150.` : (0, _formatMuiErrorMessage2.default)(20));
+  throw new Error(process.env.NODE_ENV !== "production" ? `MUI: The \`experimental_sx\` has been moved to \`theme.unstable_sx\`.For more details, see https://github.com/mui/material-ui/pull/35150.` : (0, _formatMuiErrorMessage2.default)(19));
 }
@@ -598,0 +610,0 @@

node/InitColorSchemeScript/InitColorSchemeScript.js

@@ -25,3 +25,3 @@ "use strict";
     colorSchemeStorageKey = DEFAULT_COLOR_SCHEME_STORAGE_KEY,
-    attribute = DEFAULT_ATTRIBUTE,
+    attribute: initialAttribute = DEFAULT_ATTRIBUTE,
     colorSchemeNode = 'document.documentElement',
@@ -31,2 +31,9 @@ nonce
   let setter = '';
+  let attribute = initialAttribute;
+  if (initialAttribute === 'class') {
+    attribute = '.%s';
+  }
+  if (initialAttribute === 'data') {
+    attribute = '[data-%s]';
+  }
   if (attribute.startsWith('.')) {
@@ -33,0 +40,0 @@ const selector = attribute.substring(1);

node/useThemeProps/useThemeProps.js

@@ -21,3 +21,3 @@ "use strict";
   }
-  const mergedProps = (0, _getThemeProps.default)({
+  return (0, _getThemeProps.default)({
     theme,
@@ -27,3 +27,2 @@ name,
   });
-  return mergedProps;
 }

package.json

 {
   "name": "@mui/system",
-  "version": "6.0.0-beta.4-dev.20240805-092432-9f940a61d6",
+  "version": "6.0.0-beta.5-dev.20240809-114550-93cb3d65e7",
   "private": false,
@@ -33,6 +33,6 @@ "author": "MUI Team",
     "prop-types": "^15.8.1",
-    "@mui/private-theming": "6.0.0-beta.4-dev.20240805-092432-9f940a61d6",
-    "@mui/styled-engine": "6.0.0-beta.4-dev.20240805-092432-9f940a61d6",
+    "@mui/private-theming": "6.0.0-beta.5-dev.20240809-114550-93cb3d65e7",
+    "@mui/styled-engine": "6.0.0-beta.5",
     "@mui/types": "^7.2.14",
-    "@mui/utils": "6.0.0-beta.4-dev.20240805-092432-9f940a61d6"
+    "@mui/utils": "6.0.0-beta.5-dev.20240809-114550-93cb3d65e7"
   },
@@ -39,0 +39,0 @@ "peerDependencies": {

useThemeProps/useThemeProps.js

@@ -15,3 +15,3 @@ 'use client';
   }
-  const mergedProps = getThemeProps({
+  return getThemeProps({
     theme,
@@ -21,3 +21,2 @@ name,
   });
-  return mergedProps;
 }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

1535540

increased by0.72%

Number of package files

473

increased by1.07%

Lines of code

18093

increased by0.72%

Number of low supply chain risk alerts

138

decreased by-2.13%

Dependency changes

• + Added@mui/private-theming@6.0.0-beta.5-dev.20240809-114550-93cb3d65e7(transitive)

• + Added@mui/styled-engine@6.0.0-beta.5(transitive)

• + Added@mui/utils@6.0.0-beta.5-dev.20240809-114550-93cb3d65e7(transitive)

• - Removed@mui/private-theming@6.0.0-beta.4-dev.20240805-092432-9f940a61d6(transitive)

• - Removed@mui/styled-engine@6.0.0-beta.4-dev.20240805-092432-9f940a61d6(transitive)

• - Removed@mui/utils@6.0.0-beta.4-dev.20240805-092432-9f940a61d6(transitive)

• Updated@mui/private-theming@6.0.0-beta.5-dev.20240809-114550-93cb3d65e7

• Updated@mui/styled-engine@6.0.0-beta.5

• Updated@mui/utils@6.0.0-beta.5-dev.20240809-114550-93cb3d65e7