@mui/system 5.0.6 → 5.1.0

package/legacy/cssVars/createCssVarsProvider.js

@@ -1,43 +1,29 @@
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+import _typeof from "@babel/runtime/helpers/esm/typeof";
 import { formatMuiErrorMessage as _formatMuiErrorMessage } from "@mui/utils";
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { GlobalStyles } from '@mui/styled-engine';
 import { deepmerge } from '@mui/utils';
 import cssVarsParser from './cssVarsParser';
-import getInitColorSchemeScript, { DEFAULT_ATTRIBUTE, DEFAULT_STORAGE_KEY } from './getInitColorSchemeScript';
+import ThemeProvider from '../ThemeProvider';
+import getInitColorSchemeScript, { DEFAULT_ATTRIBUTE, DEFAULT_MODE_STORAGE_KEY } from './getInitColorSchemeScript';
+import useCurrentColorScheme from './useCurrentColorScheme';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-
-var resolveMode = function resolveMode(key, fallback, supportedColorSchemes) {
-  if (typeof window === 'undefined') {
-    return undefined;
-  }
-
-  var value;
-
-  try {
-    value = localStorage.getItem(key) || undefined;
-
-    if (!supportedColorSchemes.includes(value)) {
-      value = undefined;
-    }
-  } catch (e) {// Unsupported
-  }
-
-  return value || fallback;
-};
-
-export default function createCssVarsProvider(ThemeContext, options) {
+export default function createCssVarsProvider(options) {
   var _options$theme = options.theme,
       baseTheme = _options$theme === void 0 ? {} : _options$theme,
+      _options$defaultMode = options.defaultMode,
+      desisgnSystemMode = _options$defaultMode === void 0 ? 'light' : _options$defaultMode,
       designSystemColorScheme = options.defaultColorScheme,
       _options$prefix = options.prefix,
-      designSystemPrefix = _options$prefix === void 0 ? '' : _options$prefix;
+      designSystemPrefix = _options$prefix === void 0 ? '' : _options$prefix,
+      shouldSkipGeneratingVar = options.shouldSkipGeneratingVar;
 
-  if (!baseTheme.colorSchemes || !baseTheme.colorSchemes[designSystemColorScheme]) {
+  if (!baseTheme.colorSchemes || typeof designSystemColorScheme === 'string' && !baseTheme.colorSchemes[designSystemColorScheme] || _typeof(designSystemColorScheme) === 'object' && !baseTheme.colorSchemes[designSystemColorScheme == null ? void 0 : designSystemColorScheme.light] || _typeof(designSystemColorScheme) === 'object' && !baseTheme.colorSchemes[designSystemColorScheme == null ? void 0 : designSystemColorScheme.dark]) {
     console.error("MUI: `".concat(designSystemColorScheme, "` does not exist in `theme.colorSchemes`."));
   }
 
@@ -59,10 +45,12 @@ export default function createCssVarsProvider(ThemeContext, options) {
         themeProp = _ref$theme === void 0 ? {} : _ref$theme,
         _ref$prefix = _ref.prefix,
         prefix = _ref$prefix === void 0 ? designSystemPrefix : _ref$prefix,
-        _ref$storageKey = _ref.storageKey,
-        storageKey = _ref$storageKey === void 0 ? DEFAULT_STORAGE_KEY : _ref$storageKey,
+        _ref$modeStorageKey = _ref.modeStorageKey,
+        modeStorageKey = _ref$modeStorageKey === void 0 ? DEFAULT_MODE_STORAGE_KEY : _ref$modeStorageKey,
         _ref$attribute = _ref.attribute,
         attribute = _ref$attribute === void 0 ? DEFAULT_ATTRIBUTE : _ref$attribute,
+        _ref$defaultMode = _ref.defaultMode,
+        defaultMode = _ref$defaultMode === void 0 ? desisgnSystemMode : _ref$defaultMode,
         _ref$defaultColorSche = _ref.defaultColorScheme,
         defaultColorScheme = _ref$defaultColorSche === void 0 ? designSystemColorScheme : _ref$defaultColorSche;
 
@@ -77,18 +65,41 @@ export default function createCssVarsProvider(ThemeContext, options) {
     var mergedTheme = deepmerge(restBaseTheme, restThemeProp);
     var colorSchemes = deepmerge(baseColorSchemes, colorSchemesProp);
     var allColorSchemes = Object.keys(colorSchemes);
-    var joinedColorSchemes = allColorSchemes.join(',');
-
-    var _React$useState = React.useState(function () {
-      return resolveMode(storageKey, defaultColorScheme, allColorSchemes);
+    var defaultLightColorScheme = typeof defaultColorScheme === 'string' ? defaultColorScheme : defaultColorScheme.light;
+    var defaultDarkColorScheme = typeof defaultColorScheme === 'string' ? defaultColorScheme : defaultColorScheme.dark;
+
+    var _useCurrentColorSchem = useCurrentColorScheme({
+      supportedColorSchemes: allColorSchemes,
+      defaultLightColorScheme: defaultLightColorScheme,
+      defaultDarkColorScheme: defaultDarkColorScheme,
+      modeStorageKey: modeStorageKey,
+      defaultMode: defaultMode
     }),
-        colorScheme = _React$useState[0],
-        setColorScheme = _React$useState[1];
+        mode = _useCurrentColorSchem.mode,
+        setMode = _useCurrentColorSchem.setMode,
+        lightColorScheme = _useCurrentColorSchem.lightColorScheme,
+        darkColorScheme = _useCurrentColorSchem.darkColorScheme,
+        colorScheme = _useCurrentColorSchem.colorScheme,
+        setColorScheme = _useCurrentColorSchem.setColorScheme;
+
+    var resolvedColorScheme = function () {
+      if (!colorScheme) {
+        // This scope occurs on the server
+        if (defaultMode === 'dark') {
+          return defaultDarkColorScheme;
+        } // use light color scheme, if default mode is 'light' | 'auto'
+
+
+        return defaultLightColorScheme;
+      }
 
-    var resolvedColorScheme = colorScheme || defaultColorScheme;
+      return colorScheme;
+    }();
 
     var _cssVarsParser = cssVarsParser(mergedTheme, {
-      prefix: prefix
+      prefix: prefix,
+      basePrefix: designSystemPrefix,
+      shouldSkipGeneratingVar: shouldSkipGeneratingVar
     }),
         rootCss = _cssVarsParser.css,
         rootVars = _cssVarsParser.vars;
@@ -103,7 +114,9 @@ export default function createCssVarsProvider(ThemeContext, options) {
           scheme = _ref3[1];
 
       var _cssVarsParser2 = cssVarsParser(scheme, {
-        prefix: prefix
+        prefix: prefix,
+        basePrefix: designSystemPrefix,
+        shouldSkipGeneratingVar: shouldSkipGeneratingVar
       }),
           css = _cssVarsParser2.css,
           vars = _cssVarsParser2.vars;
@@ -112,8 +125,20 @@ export default function createCssVarsProvider(ThemeContext, options) {
         mergedTheme.vars = _extends({}, mergedTheme.vars, vars);
       }
 
-      if (key === defaultColorScheme) {
-        styleSheet[':root'] = deepmerge(rootCss, css);
+      var resolvedDefaultColorScheme = function () {
+        if (typeof defaultColorScheme === 'string') {
+          return defaultColorScheme;
+        }
+
+        if (defaultMode === 'dark') {
+          return defaultColorScheme.dark;
+        }
+
+        return defaultColorScheme.light;
+      }();
+
+      if (key === resolvedDefaultColorScheme) {
+        styleSheet[':root'] = css;
       } else {
         styleSheet["[".concat(attribute, "=\"").concat(key, "\"]")] = css;
       }
@@ -121,43 +146,26 @@ export default function createCssVarsProvider(ThemeContext, options) {
     React.useEffect(function () {
       if (colorScheme) {
         document.body.setAttribute(attribute, colorScheme);
-        localStorage.setItem(storageKey, colorScheme);
-      }
-    }, [colorScheme, attribute, storageKey]); // local storage modified in the context of another document
-
-    React.useEffect(function () {
-      var handleStorage = function handleStorage(event) {
-        var storageColorScheme = event.newValue;
-
-        if (event.key === storageKey && joinedColorSchemes.match(storageColorScheme)) {
-          if (storageColorScheme) {
-            setColorScheme(storageColorScheme);
-          }
-        }
-      };
-
-      window.addEventListener('storage', handleStorage);
-      return function () {
-        return window.removeEventListener('storage', handleStorage);
-      };
-    }, [setColorScheme, storageKey, joinedColorSchemes]);
-    var wrappedSetColorScheme = React.useCallback(function (val) {
-      if (typeof val === 'string' && !allColorSchemes.includes(val)) {
-        console.error("`".concat(val, "` does not exist in `theme.colorSchemes`."));
-      } else {
-        setColorScheme(val);
       }
-    }, [setColorScheme, allColorSchemes]);
+    }, [colorScheme, attribute]);
     return /*#__PURE__*/_jsxs(ColorSchemeContext.Provider, {
       value: {
+        mode: mode,
+        setMode: setMode,
+        lightColorScheme: lightColorScheme,
+        darkColorScheme: darkColorScheme,
         colorScheme: colorScheme,
-        setColorScheme: wrappedSetColorScheme,
+        setColorScheme: setColorScheme,
         allColorSchemes: allColorSchemes
       },
       children: [/*#__PURE__*/_jsx(GlobalStyles, {
+        styles: {
+          ':root': rootCss
+        }
+      }), /*#__PURE__*/_jsx(GlobalStyles, {
         styles: styleSheet
-      }), /*#__PURE__*/_jsx(ThemeContext.Provider, {
-        value: mergedTheme,
+      }), /*#__PURE__*/_jsx(ThemeProvider, {
+        theme: mergedTheme,
         children: children
       })]
     });
@@ -177,17 +185,22 @@ export default function createCssVarsProvider(ThemeContext, options) {
     /**
      * The initial color scheme used.
      */
-    defaultColorScheme: PropTypes.string,
+    defaultColorScheme: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
 
     /**
-     * css variable prefix
+     * The initial mode used.
      */
-    prefix: PropTypes.string,
+    defaultMode: PropTypes.string,
 
     /**
      * The key in the local storage used to store current color scheme.
      */
-    storageKey: PropTypes.string,
+    modeStorageKey: PropTypes.string,
+
+    /**
+     * css variable prefix
+     */
+    prefix: PropTypes.string,
 
     /**
      * The calculated theme object that will be passed through context.

package/legacy/cssVars/cssVarsParser.js

@@ -61,7 +61,7 @@ export var walkObjectDeep = function walkObjectDeep(obj, callback) {
         if (_typeof(value) === 'object' && Object.keys(value).length > 0) {
           recurse(value, [].concat(_toConsumableArray(parentKeys), [key]));
         } else {
-          callback([].concat(_toConsumableArray(parentKeys), [key]), value);
+          callback([].concat(_toConsumableArray(parentKeys), [key]), value, object);
         }
       }
     });
@@ -88,7 +88,16 @@ var getCssValue = function getCssValue(keys, value) {
  * a function that parse theme and return { css, vars }
  *
  * @param {Object} theme
- * @param {{ prefix?: string }} options
+ * @param {{
+ *  prefix?: string,
+ *  basePrefix?: string,
+ *  shouldSkipGeneratingVar?: (objectPathKeys: Array<string>, value: string | number) => boolean
+ * }} options.
+ *  `basePrefix`: defined by design system.
+ *  `prefix`: defined by application
+ *
+ *   This function also mutate the string value of theme input by replacing `basePrefix` (if existed) with `prefix`
+ *
  * @returns {{ css: Object, vars: Object }} `css` is the stylesheet, `vars` is an object to get css variable (same structure as theme)
  *
  * @example
@@ -103,19 +112,38 @@ var getCssValue = function getCssValue(keys, value) {
  */
 
 
-export default function cssVarsParser(obj, options) {
+export default function cssVarsParser(theme, options) {
+  var clonedTheme = _extends({}, theme);
+
+  delete clonedTheme.vars; // remove 'vars' from the structure
+
   var _ref3 = options || {},
-      prefix = _ref3.prefix;
+      prefix = _ref3.prefix,
+      _ref3$basePrefix = _ref3.basePrefix,
+      basePrefix = _ref3$basePrefix === void 0 ? '' : _ref3$basePrefix,
+      shouldSkipGeneratingVar = _ref3.shouldSkipGeneratingVar;
 
   var css = {};
   var vars = {};
-  walkObjectDeep(obj, function (keys, value) {
-    if (typeof value === 'string' || typeof value === 'number') {
-      var cssVar = "--".concat(prefix ? "".concat(prefix, "-") : '').concat(keys.join('-'));
+  walkObjectDeep(clonedTheme, function (keys, val, scope) {
+    if (typeof val === 'string' || typeof val === 'number') {
+      var _value = val;
 
-      _extends(css, _defineProperty({}, cssVar, getCssValue(keys, value)));
+      if (typeof _value === 'string' && _value.startsWith('var')) {
+        // replace the value of the `scope` object with the prefix or remove basePrefix from the value
+        _value = prefix ? _value.replace(basePrefix, prefix) : _value.replace("".concat(basePrefix, "-"), ''); // scope is the deepest object in the tree, keys is the theme path keys
 
-      assignNestedKeys(vars, keys, "var(".concat(cssVar, ")"));
+        scope[keys.slice(-1)[0]] = _value;
+      }
+
+      if (!shouldSkipGeneratingVar || shouldSkipGeneratingVar && !shouldSkipGeneratingVar(keys, _value)) {
+        // only create css & var if `shouldSkipGeneratingVar` return false
+        var cssVar = "--".concat(prefix ? "".concat(prefix, "-") : '').concat(keys.join('-'));
+
+        _extends(css, _defineProperty({}, cssVar, getCssValue(keys, _value)));
+
+        assignNestedKeys(vars, keys, "var(".concat(cssVar, ")"));
+      }
     }
   });
   return {

package/legacy/cssVars/getInitColorSchemeScript.js

@@ -1,18 +1,27 @@
 import * as React from 'react';
 import { jsx as _jsx } from "react/jsx-runtime";
-export var DEFAULT_STORAGE_KEY = 'mui-color-scheme';
+export var DEFAULT_MODE_STORAGE_KEY = 'mui-mode';
+export var DEFAULT_COLOR_SCHEME_STORAGE_KEY = 'mui-color-scheme';
 export var DEFAULT_ATTRIBUTE = 'data-mui-color-scheme';
 export default function getInitColorSchemeScript(options) {
   var _ref = options || {},
-      _ref$storageKey = _ref.storageKey,
-      storageKey = _ref$storageKey === void 0 ? DEFAULT_STORAGE_KEY : _ref$storageKey,
+      _ref$defaultMode = _ref.defaultMode,
+      defaultMode = _ref$defaultMode === void 0 ? 'light' : _ref$defaultMode,
+      _ref$defaultLightColo = _ref.defaultLightColorScheme,
+      defaultLightColorScheme = _ref$defaultLightColo === void 0 ? 'light' : _ref$defaultLightColo,
+      _ref$defaultDarkColor = _ref.defaultDarkColorScheme,
+      defaultDarkColorScheme = _ref$defaultDarkColor === void 0 ? 'dark' : _ref$defaultDarkColor,
+      _ref$modeStorageKey = _ref.modeStorageKey,
+      modeStorageKey = _ref$modeStorageKey === void 0 ? DEFAULT_MODE_STORAGE_KEY : _ref$modeStorageKey,
+      _ref$colorSchemeStora = _ref.colorSchemeStorageKey,
+      colorSchemeStorageKey = _ref$colorSchemeStora === void 0 ? DEFAULT_COLOR_SCHEME_STORAGE_KEY : _ref$colorSchemeStora,
       _ref$attribute = _ref.attribute,
       attribute = _ref$attribute === void 0 ? DEFAULT_ATTRIBUTE : _ref$attribute;
 
   return /*#__PURE__*/_jsx("script", {
     // eslint-disable-next-line react/no-danger
     dangerouslySetInnerHTML: {
-      __html: "(function() { try {\n        var colorScheme = localStorage.getItem('".concat(storageKey, "');\n        if (colorScheme) {\n          document.body.setAttribute('").concat(attribute, "', colorScheme);\n        }\n      } catch (e) {} })();")
+      __html: "(function() { try {\n        var mode = localStorage.getItem('".concat(modeStorageKey, "');\n        var colorScheme = '';\n        if (mode === 'system' || (!mode && ").concat(defaultMode, " === 'system')) {\n          // handle system mode\n          var mql = window.matchMedia('(prefers-color-scheme: dark)');\n          if (mql.matches) {\n            colorScheme = localStorage.getItem('").concat(colorSchemeStorageKey, "-dark') || ").concat(defaultLightColorScheme, ";\n          } else {\n            colorScheme = localStorage.getItem('").concat(colorSchemeStorageKey, "-light') || ").concat(defaultDarkColorScheme, ";\n          }\n        }\n        if (mode === 'light') {\n          colorScheme = localStorage.getItem('").concat(colorSchemeStorageKey, "-light') || ").concat(defaultLightColorScheme, ";\n        }\n        if (mode === 'dark') {\n          colorScheme = localStorage.getItem('").concat(colorSchemeStorageKey, "-dark') || ").concat(defaultDarkColorScheme, ";\n        }\n        if (colorScheme) {\n          document.body.setAttribute('").concat(attribute, "', colorScheme);\n        }\n      } catch (e) {} })();")
     }
   });
 }

package/legacy/cssVars/useCurrentColorScheme.js

@@ -0,0 +1,231 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import { DEFAULT_MODE_STORAGE_KEY, DEFAULT_COLOR_SCHEME_STORAGE_KEY } from './getInitColorSchemeScript';
+export function getSystemMode(mode) {
+  if (typeof window !== 'undefined' && mode === 'system') {
+    var mql = window.matchMedia('(prefers-color-scheme: dark)');
+
+    if (mql.matches) {
+      return 'dark';
+    }
+
+    return 'light';
+  }
+
+  return undefined;
+}
+
+function processState(state, callback) {
+  if (state.mode === 'light' || state.mode === 'system' && state.systemMode === 'light') {
+    return callback('light');
+  }
+
+  if (state.mode === 'dark' || state.mode === 'system' && state.systemMode === 'dark') {
+    return callback('dark');
+  }
+
+  return undefined;
+}
+
+export function getColorScheme(state) {
+  return processState(state, function (mode) {
+    if (mode === 'light') {
+      return state.lightColorScheme;
+    }
+
+    if (mode === 'dark') {
+      return state.darkColorScheme;
+    }
+
+    return undefined;
+  });
+}
+
+function resolveValue(key, defaultValue) {
+  if (typeof window === 'undefined') {
+    return undefined;
+  }
+
+  var value;
+
+  try {
+    value = localStorage.getItem(key) || undefined;
+  } catch (e) {// Unsupported
+  }
+
+  return value || defaultValue;
+}
+
+export default function useCurrentColorScheme(options) {
+  var _options$defaultMode = options.defaultMode,
+      defaultMode = _options$defaultMode === void 0 ? 'light' : _options$defaultMode,
+      defaultLightColorScheme = options.defaultLightColorScheme,
+      defaultDarkColorScheme = options.defaultDarkColorScheme,
+      _options$supportedCol = options.supportedColorSchemes,
+      supportedColorSchemes = _options$supportedCol === void 0 ? [] : _options$supportedCol,
+      _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;
+  var joinedColorSchemes = supportedColorSchemes.join(',');
+
+  var _React$useState = React.useState(function () {
+    var initialMode = resolveValue(modeStorageKey, defaultMode);
+    return {
+      mode: initialMode,
+      systemMode: getSystemMode(initialMode),
+      lightColorScheme: resolveValue("".concat(colorSchemeStorageKey, "-light")) || defaultLightColorScheme,
+      darkColorScheme: resolveValue("".concat(colorSchemeStorageKey, "-dark")) || defaultDarkColorScheme
+    };
+  }),
+      state = _React$useState[0],
+      setState = _React$useState[1];
+
+  var colorScheme = getColorScheme(state);
+  var setMode = React.useCallback(function (mode) {
+    setState(function (currentState) {
+      var newMode = !mode ? defaultMode : mode;
+
+      if (typeof localStorage !== 'undefined') {
+        localStorage.setItem(modeStorageKey, newMode);
+      }
+
+      return _extends({}, currentState, {
+        mode: newMode,
+        systemMode: getSystemMode(newMode)
+      });
+    });
+  }, [modeStorageKey, defaultMode]);
+  var setColorScheme = React.useCallback(function (value) {
+    if (!value || typeof value === 'string') {
+      if (value && !supportedColorSchemes.includes(value)) {
+        console.error("`".concat(value, "` does not exist in `theme.colorSchemes`."));
+      } else {
+        setState(function (currentState) {
+          var newState = _extends({}, currentState);
+
+          if (!value) {
+            // reset to default color scheme
+            newState.lightColorScheme = defaultLightColorScheme;
+            newState.darkColorScheme = defaultDarkColorScheme;
+            return newState;
+          }
+
+          processState(currentState, function (mode) {
+            localStorage.setItem("".concat(colorSchemeStorageKey, "-").concat(mode), value);
+
+            if (mode === 'light') {
+              newState.lightColorScheme = value;
+            }
+
+            if (mode === 'dark') {
+              newState.darkColorScheme = value;
+            }
+          });
+          return newState;
+        });
+      }
+    } else if (value.light && !supportedColorSchemes.includes(value.light) || value.dark && !supportedColorSchemes.includes(value.dark)) {
+      console.error("`".concat(value, "` does not exist in `theme.colorSchemes`."));
+    } else {
+      setState(function (currentState) {
+        var newState = _extends({}, currentState);
+
+        if (value.light || value.light === null) {
+          newState.lightColorScheme = value.light === null ? defaultLightColorScheme : value.light;
+        }
+
+        if (value.dark || value.dark === null) {
+          newState.darkColorScheme = value.dark === null ? defaultDarkColorScheme : value.dark;
+        }
+
+        return newState;
+      });
+
+      if (value.light) {
+        localStorage.setItem("".concat(colorSchemeStorageKey, "-light"), value.light);
+      }
+
+      if (value.dark) {
+        localStorage.setItem("".concat(colorSchemeStorageKey, "-dark"), value.dark);
+      }
+    }
+  }, [colorSchemeStorageKey, supportedColorSchemes, defaultLightColorScheme, defaultDarkColorScheme]);
+  var handleMediaQuery = React.useCallback(function (e) {
+    if (state.mode === 'system') {
+      setState(function (currentState) {
+        return _extends({}, currentState, {
+          systemMode: e.matches ? 'dark' : 'light'
+        });
+      });
+    }
+  }, [state.mode]); // Ref hack to avoid adding handleMediaQuery as a dep
+
+  var mediaListener = React.useRef(handleMediaQuery);
+  mediaListener.current = handleMediaQuery;
+  React.useEffect(function () {
+    var handler = function handler() {
+      return mediaListener.current.apply(mediaListener, arguments);
+    }; // Always listen to System preference
+
+
+    var media = window.matchMedia('(prefers-color-scheme: dark)'); // Intentionally use deprecated listener methods to support iOS & old browsers
+
+    media.addListener(handler);
+    handler(media);
+    return function () {
+      return media.removeListener(handler);
+    };
+  }, []); // Save mode, lightColorScheme & darkColorScheme to localStorage
+
+  React.useEffect(function () {
+    if (state.mode) {
+      localStorage.setItem(modeStorageKey, state.mode);
+    }
+
+    processState(state, function (mode) {
+      if (mode === 'light') {
+        localStorage.setItem("".concat(colorSchemeStorageKey, "-light"), state.lightColorScheme);
+      }
+
+      if (mode === 'dark') {
+        localStorage.setItem("".concat(colorSchemeStorageKey, "-dark"), state.darkColorScheme);
+      }
+    });
+  }, [state, colorSchemeStorageKey, modeStorageKey]); // Handle when localStorage has changed
+
+  React.useEffect(function () {
+    var handleStorage = function handleStorage(event) {
+      var value = event.newValue;
+
+      if (typeof event.key === 'string' && event.key.startsWith(colorSchemeStorageKey) && (!value || joinedColorSchemes.match(value))) {
+        // If the key is deleted, value will be null then reset color scheme to the default one.
+        if (event.key.endsWith('light')) {
+          setColorScheme({
+            light: value
+          });
+        }
+
+        if (event.key.endsWith('dark')) {
+          setColorScheme({
+            dark: value
+          });
+        }
+      }
+
+      if (event.key === modeStorageKey && (!value || ['light', 'dark', 'system'].includes(value))) {
+        setMode(value || defaultMode);
+      }
+    };
+
+    window.addEventListener('storage', handleStorage);
+    return function () {
+      return window.removeEventListener('storage', handleStorage);
+    };
+  }, [setColorScheme, setMode, modeStorageKey, colorSchemeStorageKey, joinedColorSchemes, defaultMode]);
+  return _extends({}, state, {
+    colorScheme: colorScheme,
+    setMode: setMode,
+    setColorScheme: setColorScheme
+  });
+}

package/legacy/index.js

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

package/legacy/styleFunctionSx/extendSxProp.js

@@ -1,5 +1,7 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
+import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+import { isPlainObject } from '@mui/utils';
 import { propToStyleFunction } from '../getThemeValue';
 
 var splitProps = function splitProps(props) {
@@ -25,7 +27,25 @@ export default function extendSxProp(props) {
       systemProps = _splitProps.systemProps,
       otherProps = _splitProps.otherProps;
 
+  var finalSx;
+
+  if (Array.isArray(inSx)) {
+    finalSx = [systemProps].concat(_toConsumableArray(inSx));
+  } else if (typeof inSx === 'function') {
+    finalSx = function finalSx() {
+      var result = inSx.apply(void 0, arguments);
+
+      if (!isPlainObject(result)) {
+        return systemProps;
+      }
+
+      return _extends({}, systemProps, result);
+    };
+  } else {
+    finalSx = _extends({}, systemProps, inSx);
+  }
+
   return _extends({}, otherProps, {
-    sx: _extends({}, systemProps, inSx)
+    sx: finalSx
   });
 }