@mui/system 5.6.4 → 5.7.0

package/legacy/cssVars/useCurrentColorScheme.js

@@ -66,7 +66,9 @@ export default function useCurrentColorScheme(options) {
       _options$modeStorageK = options.modeStorageKey,
       modeStorageKey = _options$modeStorageK === void 0 ? DEFAULT_MODE_STORAGE_KEY : _options$modeStorageK,
       _options$colorSchemeS = options.colorSchemeStorageKey,
-      colorSchemeStorageKey = _options$colorSchemeS === void 0 ? DEFAULT_COLOR_SCHEME_STORAGE_KEY : _options$colorSchemeS;
+      colorSchemeStorageKey = _options$colorSchemeS === void 0 ? DEFAULT_COLOR_SCHEME_STORAGE_KEY : _options$colorSchemeS,
+      _options$storageWindo = options.storageWindow,
+      storageWindow = _options$storageWindo === void 0 ? typeof window === 'undefined' ? undefined : window : _options$storageWindo;
   var joinedColorSchemes = supportedColorSchemes.join(',');
 
   var _React$useState = React.useState(function () {
@@ -86,6 +88,10 @@ export default function useCurrentColorScheme(options) {
     setState(function (currentState) {
       var newMode = !mode ? defaultMode : mode;
 
+      if (mode === currentState.mode) {
+        return currentState;
+      }
+
       if (typeof localStorage !== 'undefined') {
         localStorage.setItem(modeStorageKey, newMode);
       }
@@ -98,7 +104,7 @@ export default function useCurrentColorScheme(options) {
   }, [modeStorageKey, defaultMode]);
   var setColorScheme = React.useCallback(function (value) {
     if (!value || typeof value === 'string') {
-      if (value && !supportedColorSchemes.includes(value)) {
+      if (value && !joinedColorSchemes.includes(value)) {
         console.error("`".concat(value, "` does not exist in `theme.colorSchemes`."));
       } else {
         setState(function (currentState) {
@@ -125,7 +131,7 @@ export default function useCurrentColorScheme(options) {
           return newState;
         });
       }
-    } else if (value.light && !supportedColorSchemes.includes(value.light) || value.dark && !supportedColorSchemes.includes(value.dark)) {
+    } else if (value.light && !joinedColorSchemes.includes(value.light) || value.dark && !joinedColorSchemes.includes(value.dark)) {
       console.error("`".concat(value, "` does not exist in `theme.colorSchemes`."));
     } else {
       setState(function (currentState) {
@@ -150,7 +156,7 @@ export default function useCurrentColorScheme(options) {
         localStorage.setItem("".concat(colorSchemeStorageKey, "-dark"), value.dark);
       }
     }
-  }, [colorSchemeStorageKey, supportedColorSchemes, defaultLightColorScheme, defaultDarkColorScheme]);
+  }, [joinedColorSchemes, colorSchemeStorageKey, defaultLightColorScheme, defaultDarkColorScheme]);
   var handleMediaQuery = React.useCallback(function (e) {
     if (state.mode === 'system') {
       setState(function (currentState) {
@@ -218,11 +224,16 @@ export default function useCurrentColorScheme(options) {
       }
     };
 
-    window.addEventListener('storage', handleStorage);
-    return function () {
-      return window.removeEventListener('storage', handleStorage);
-    };
-  }, [setColorScheme, setMode, modeStorageKey, colorSchemeStorageKey, joinedColorSchemes, defaultMode]);
+    if (storageWindow) {
+      // For syncing color-scheme changes between iframes
+      storageWindow.addEventListener('storage', handleStorage);
+      return function () {
+        return storageWindow.removeEventListener('storage', handleStorage);
+      };
+    }
+
+    return undefined;
+  }, [setColorScheme, setMode, modeStorageKey, colorSchemeStorageKey, joinedColorSchemes, defaultMode, storageWindow]);
   return _extends({}, state, {
     colorScheme: colorScheme,
     setMode: setMode,

package/legacy/index.js

@@ -1,4 +1,4 @@
-/** @license MUI v5.6.4
+/** @license MUI v5.7.0
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.

package/modern/cssVars/createCssVarsProvider.js

@@ -8,7 +8,7 @@ import { deepmerge, unstable_useEnhancedEffect as useEnhancedEffect } from '@mui
 import { GlobalStyles } from '@mui/styled-engine';
 import cssVarsParser from './cssVarsParser';
 import ThemeProvider from '../ThemeProvider';
-import getInitColorSchemeScript, { DEFAULT_ATTRIBUTE, DEFAULT_MODE_STORAGE_KEY } from './getInitColorSchemeScript';
+import getInitColorSchemeScript, { DEFAULT_ATTRIBUTE, DEFAULT_COLOR_SCHEME_STORAGE_KEY, DEFAULT_MODE_STORAGE_KEY } from './getInitColorSchemeScript';
 import useCurrentColorScheme from './useCurrentColorScheme';
 import createGetCssVar from './createGetCssVar';
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -47,11 +47,16 @@ export default function createCssVarsProvider(options) {
     theme: themeProp = defaultTheme,
     prefix = designSystemPrefix,
     modeStorageKey = DEFAULT_MODE_STORAGE_KEY,
+    colorSchemeStorageKey = DEFAULT_COLOR_SCHEME_STORAGE_KEY,
     attribute = DEFAULT_ATTRIBUTE,
     defaultMode = desisgnSystemMode,
     defaultColorScheme = designSystemColorScheme,
     disableTransitionOnChange = designSystemTransitionOnChange,
-    enableColorScheme = designSystemEnableColorScheme
+    enableColorScheme = designSystemEnableColorScheme,
+    storageWindow = typeof window === 'undefined' ? undefined : window,
+    documentNode = typeof document === 'undefined' ? undefined : document,
+    colorSchemeNode = typeof document === 'undefined' ? undefined : document.documentElement,
+    colorSchemeSelector = ':root'
   }) {
     const hasMounted = React.useRef(false);
 
@@ -77,7 +82,9 @@ export default function createCssVarsProvider(options) {
       defaultLightColorScheme,
       defaultDarkColorScheme,
       modeStorageKey,
-      defaultMode
+      colorSchemeStorageKey,
+      defaultMode,
+      storageWindow
     });
 
     const resolvedColorScheme = (() => {
@@ -147,54 +154,54 @@ export default function createCssVarsProvider(options) {
       })();
 
       if (key === resolvedDefaultColorScheme) {
-        styleSheet[':root'] = css;
+        styleSheet[colorSchemeSelector] = css;
       } else {
-        styleSheet[`[${attribute}="${key}"]`] = css;
+        styleSheet[`${colorSchemeSelector === ':root' ? '' : colorSchemeSelector}[${attribute}="${key}"]`] = css;
       }
     });
     React.useEffect(() => {
-      if (colorScheme) {
+      if (colorScheme && colorSchemeNode) {
         // attaches attribute to <html> because the css variables are attached to :root (html)
-        document.documentElement.setAttribute(attribute, colorScheme);
+        colorSchemeNode.setAttribute(attribute, colorScheme);
       }
-    }, [colorScheme, attribute]);
+    }, [colorScheme, attribute, colorSchemeNode]);
     useEnhancedEffect(() => {
-      if (!mode || !enableColorScheme) {
+      if (!mode || !enableColorScheme || !colorSchemeNode) {
         return undefined;
       }
 
-      const priorColorScheme = document.documentElement.style.getPropertyValue('color-scheme'); // `color-scheme` tells browser to render built-in elements according to its value: `light` or `dark`
+      const priorColorScheme = colorSchemeNode.style.getPropertyValue('color-scheme'); // `color-scheme` tells browser to render built-in elements according to its value: `light` or `dark`
 
       if (mode === 'system') {
-        document.documentElement.style.setProperty('color-scheme', systemMode);
+        colorSchemeNode.style.setProperty('color-scheme', systemMode);
       } else {
-        document.documentElement.style.setProperty('color-scheme', mode);
+        colorSchemeNode.style.setProperty('color-scheme', mode);
       }
 
       return () => {
-        document.documentElement.style.setProperty('color-scheme', priorColorScheme);
+        colorSchemeNode.style.setProperty('color-scheme', priorColorScheme);
       };
-    }, [mode, systemMode, enableColorScheme]);
+    }, [mode, systemMode, enableColorScheme, colorSchemeNode]);
     React.useEffect(() => {
       let timer;
 
-      if (disableTransitionOnChange && hasMounted.current) {
+      if (disableTransitionOnChange && hasMounted.current && documentNode) {
         // credit: https://github.com/pacocoursey/next-themes/blob/b5c2bad50de2d61ad7b52a9c5cdc801a78507d7a/index.tsx#L313
-        const css = document.createElement('style');
-        css.appendChild(document.createTextNode(DISABLE_CSS_TRANSITION));
-        document.head.appendChild(css); // Force browser repaint
+        const css = documentNode.createElement('style');
+        css.appendChild(documentNode.createTextNode(DISABLE_CSS_TRANSITION));
+        documentNode.head.appendChild(css); // Force browser repaint
 
-        (() => window.getComputedStyle(document.body))();
+        (() => window.getComputedStyle(documentNode.body))();
 
         timer = setTimeout(() => {
-          document.head.removeChild(css);
+          documentNode.head.removeChild(css);
         }, 1);
       }
 
       return () => {
         clearTimeout(timer);
       };
-    }, [colorScheme, disableTransitionOnChange]);
+    }, [colorScheme, disableTransitionOnChange, documentNode]);
     React.useEffect(() => {
       hasMounted.current = true;
       return () => {
@@ -213,7 +220,7 @@ export default function createCssVarsProvider(options) {
       },
       children: [/*#__PURE__*/_jsx(GlobalStyles, {
         styles: {
-          ':root': rootCss
+          [colorSchemeSelector]: rootCss
         }
       }), /*#__PURE__*/_jsx(GlobalStyles, {
         styles: styleSheet
@@ -235,6 +242,21 @@ export default function createCssVarsProvider(options) {
      */
     children: PropTypes.node,
 
+    /**
+     * The node used to attach the color-scheme attribute
+     */
+    colorSchemeNode: PropTypes.any,
+
+    /**
+     * The CSS selector for attaching the generated custom properties
+     */
+    colorSchemeSelector: PropTypes.string,
+
+    /**
+     * localStorage key used to store `colorScheme`
+     */
+    colorSchemeStorageKey: PropTypes.string,
+
     /**
      * The initial color scheme used.
      */
@@ -250,6 +272,11 @@ export default function createCssVarsProvider(options) {
      */
     disableTransitionOnChange: PropTypes.bool,
 
+    /**
+     * The document to attach the attribute to
+     */
+    documentNode: PropTypes.any,
+
     /**
      * Indicate to the browser which color scheme is used (light or dark) for rendering built-in UI
      */
@@ -265,6 +292,12 @@ export default function createCssVarsProvider(options) {
      */
     prefix: PropTypes.string,
 
+    /**
+     * The window that attaches the 'storage' event listener
+     * @default window
+     */
+    storageWindow: PropTypes.any,
+
     /**
      * The calculated theme object that will be passed through context.
      */

package/modern/cssVars/getInitColorSchemeScript.js

@@ -5,12 +5,13 @@ export const DEFAULT_COLOR_SCHEME_STORAGE_KEY = 'mui-color-scheme';
 export const DEFAULT_ATTRIBUTE = 'data-mui-color-scheme';
 export default function getInitColorSchemeScript(options) {
   const {
-    enableSystem,
+    enableSystem = false,
     defaultLightColorScheme = 'light',
     defaultDarkColorScheme = 'dark',
     modeStorageKey = DEFAULT_MODE_STORAGE_KEY,
     colorSchemeStorageKey = DEFAULT_COLOR_SCHEME_STORAGE_KEY,
-    attribute = DEFAULT_ATTRIBUTE
+    attribute = DEFAULT_ATTRIBUTE,
+    colorSchemeNode = 'document.documentElement'
   } = options || {};
   return /*#__PURE__*/_jsx("script", {
     // eslint-disable-next-line react/no-danger
@@ -34,7 +35,7 @@ export default function getInitColorSchemeScript(options) {
           colorScheme = localStorage.getItem('${colorSchemeStorageKey}-dark') || '${defaultDarkColorScheme}';
         }
         if (colorScheme) {
-          document.documentElement.setAttribute('${attribute}', colorScheme);
+          ${colorSchemeNode}.setAttribute('${attribute}', colorScheme);
         }
       } catch (e) {} })();`
     }

package/modern/cssVars/useCurrentColorScheme.js

@@ -63,7 +63,8 @@ export default function useCurrentColorScheme(options) {
     defaultDarkColorScheme,
     supportedColorSchemes = [],
     modeStorageKey = DEFAULT_MODE_STORAGE_KEY,
-    colorSchemeStorageKey = DEFAULT_COLOR_SCHEME_STORAGE_KEY
+    colorSchemeStorageKey = DEFAULT_COLOR_SCHEME_STORAGE_KEY,
+    storageWindow = typeof window === 'undefined' ? undefined : window
   } = options;
   const joinedColorSchemes = supportedColorSchemes.join(',');
   const [state, setState] = React.useState(() => {
@@ -80,6 +81,10 @@ export default function useCurrentColorScheme(options) {
     setState(currentState => {
       const newMode = !mode ? defaultMode : mode;
 
+      if (mode === currentState.mode) {
+        return currentState;
+      }
+
       if (typeof localStorage !== 'undefined') {
         localStorage.setItem(modeStorageKey, newMode);
       }
@@ -92,7 +97,7 @@ export default function useCurrentColorScheme(options) {
   }, [modeStorageKey, defaultMode]);
   const setColorScheme = React.useCallback(value => {
     if (!value || typeof value === 'string') {
-      if (value && !supportedColorSchemes.includes(value)) {
+      if (value && !joinedColorSchemes.includes(value)) {
         console.error(`\`${value}\` does not exist in \`theme.colorSchemes\`.`);
       } else {
         setState(currentState => {
@@ -119,7 +124,7 @@ export default function useCurrentColorScheme(options) {
           return newState;
         });
       }
-    } else if (value.light && !supportedColorSchemes.includes(value.light) || value.dark && !supportedColorSchemes.includes(value.dark)) {
+    } else if (value.light && !joinedColorSchemes.includes(value.light) || value.dark && !joinedColorSchemes.includes(value.dark)) {
       console.error(`\`${value}\` does not exist in \`theme.colorSchemes\`.`);
     } else {
       setState(currentState => {
@@ -144,7 +149,7 @@ export default function useCurrentColorScheme(options) {
         localStorage.setItem(`${colorSchemeStorageKey}-dark`, value.dark);
       }
     }
-  }, [colorSchemeStorageKey, supportedColorSchemes, defaultLightColorScheme, defaultDarkColorScheme]);
+  }, [joinedColorSchemes, colorSchemeStorageKey, defaultLightColorScheme, defaultDarkColorScheme]);
   const handleMediaQuery = React.useCallback(e => {
     if (state.mode === 'system') {
       setState(currentState => _extends({}, currentState, {
@@ -206,9 +211,14 @@ export default function useCurrentColorScheme(options) {
       }
     };
 
-    window.addEventListener('storage', handleStorage);
-    return () => window.removeEventListener('storage', handleStorage);
-  }, [setColorScheme, setMode, modeStorageKey, colorSchemeStorageKey, joinedColorSchemes, defaultMode]);
+    if (storageWindow) {
+      // For syncing color-scheme changes between iframes
+      storageWindow.addEventListener('storage', handleStorage);
+      return () => storageWindow.removeEventListener('storage', handleStorage);
+    }
+
+    return undefined;
+  }, [setColorScheme, setMode, modeStorageKey, colorSchemeStorageKey, joinedColorSchemes, defaultMode, storageWindow]);
   return _extends({}, state, {
     colorScheme,
     setMode,

package/modern/index.js

@@ -1,4 +1,4 @@
-/** @license MUI v5.6.4
+/** @license MUI v5.7.0
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/system",
-  "version": "5.6.4",
+  "version": "5.7.0",
   "private": false,
   "author": "MUI Team",
   "description": "CSS utilities for rapidly laying out custom designs.",
@@ -44,13 +44,13 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.17.2",
-    "@mui/private-theming": "^5.6.2",
-    "@mui/styled-engine": "^5.6.1",
+    "@mui/private-theming": "^5.7.0",
+    "@mui/styled-engine": "^5.7.0",
     "@mui/types": "^7.1.3",
-    "@mui/utils": "^5.6.1",
+    "@mui/utils": "^5.7.0",
     "clsx": "^1.1.1",
     "csstype": "^3.0.11",
-    "prop-types": "^15.7.2"
+    "prop-types": "^15.8.1"
   },
   "sideEffects": false,
   "publishConfig": {

package/styleFunctionSx/styleFunctionSx.spec.d.ts

@@ -1 +1 @@
-export {};
+export {};