@mui/system 5.0.5 → 5.2.0

package/esm/cssVars/createCssVarsProvider.js

@@ -8,37 +8,21 @@ 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";
-
-const resolveMode = (key, fallback, supportedColorSchemes) => {
-  if (typeof window === 'undefined') {
-    return undefined;
-  }
-
-  let 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) {
   const {
     theme: baseTheme = {},
+    defaultMode: desisgnSystemMode = 'light',
     defaultColorScheme: designSystemColorScheme,
-    prefix: designSystemPrefix = ''
+    prefix: designSystemPrefix = '',
+    shouldSkipGeneratingVar
   } = options;
 
-  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: \`${designSystemColorScheme}\` does not exist in \`theme.colorSchemes\`.`);
   }
 
@@ -58,8 +42,9 @@ export default function createCssVarsProvider(ThemeContext, options) {
     children,
     theme: themeProp = {},
     prefix = designSystemPrefix,
-    storageKey = DEFAULT_STORAGE_KEY,
+    modeStorageKey = DEFAULT_MODE_STORAGE_KEY,
     attribute = DEFAULT_ATTRIBUTE,
+    defaultMode = desisgnSystemMode,
     defaultColorScheme = designSystemColorScheme
   }) {
     const {
@@ -75,16 +60,47 @@ export default function createCssVarsProvider(ThemeContext, options) {
     let mergedTheme = deepmerge(restBaseTheme, restThemeProp);
     const colorSchemes = deepmerge(baseColorSchemes, colorSchemesProp);
     const allColorSchemes = Object.keys(colorSchemes);
-    const joinedColorSchemes = allColorSchemes.join(',');
-    const [colorScheme, setColorScheme] = React.useState(() => resolveMode(storageKey, defaultColorScheme, allColorSchemes));
-    const resolvedColorScheme = colorScheme || defaultColorScheme;
+    const defaultLightColorScheme = typeof defaultColorScheme === 'string' ? defaultColorScheme : defaultColorScheme.light;
+    const defaultDarkColorScheme = typeof defaultColorScheme === 'string' ? defaultColorScheme : defaultColorScheme.dark;
+    const {
+      mode,
+      setMode,
+      lightColorScheme,
+      darkColorScheme,
+      colorScheme,
+      setColorScheme
+    } = useCurrentColorScheme({
+      supportedColorSchemes: allColorSchemes,
+      defaultLightColorScheme,
+      defaultDarkColorScheme,
+      modeStorageKey,
+      defaultMode
+    });
+
+    const resolvedColorScheme = (() => {
+      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;
+      }
+
+      return colorScheme;
+    })();
+
     const {
       css: rootCss,
       vars: rootVars
     } = cssVarsParser(mergedTheme, {
-      prefix
+      prefix,
+      basePrefix: designSystemPrefix,
+      shouldSkipGeneratingVar
     });
     mergedTheme = _extends({}, mergedTheme, colorSchemes[resolvedColorScheme], {
+      colorSchemes,
       vars: rootVars
     });
     const styleSheet = {};
@@ -93,15 +109,26 @@ export default function createCssVarsProvider(ThemeContext, options) {
         css,
         vars
       } = cssVarsParser(scheme, {
-        prefix
+        prefix,
+        basePrefix: designSystemPrefix,
+        shouldSkipGeneratingVar
       });
+      mergedTheme.vars = deepmerge(mergedTheme.vars, vars);
 
-      if (key === resolvedColorScheme) {
-        mergedTheme.vars = _extends({}, mergedTheme.vars, vars);
-      }
+      const resolvedDefaultColorScheme = (() => {
+        if (typeof defaultColorScheme === 'string') {
+          return defaultColorScheme;
+        }
+
+        if (defaultMode === 'dark') {
+          return defaultColorScheme.dark;
+        }
 
-      if (key === defaultColorScheme) {
-        styleSheet[':root'] = deepmerge(rootCss, css);
+        return defaultColorScheme.light;
+      })();
+
+      if (key === resolvedDefaultColorScheme) {
+        styleSheet[':root'] = css;
       } else {
         styleSheet[`[${attribute}="${key}"]`] = css;
       }
@@ -109,41 +136,26 @@ export default function createCssVarsProvider(ThemeContext, options) {
     React.useEffect(() => {
       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(() => {
-      const handleStorage = event => {
-        const storageColorScheme = event.newValue;
-
-        if (event.key === storageKey && joinedColorSchemes.match(storageColorScheme)) {
-          if (storageColorScheme) {
-            setColorScheme(storageColorScheme);
-          }
-        }
-      };
-
-      window.addEventListener('storage', handleStorage);
-      return () => window.removeEventListener('storage', handleStorage);
-    }, [setColorScheme, storageKey, joinedColorSchemes]);
-    const wrappedSetColorScheme = React.useCallback(val => {
-      if (typeof val === 'string' && !allColorSchemes.includes(val)) {
-        console.error(`\`${val}\` does not exist in \`theme.colorSchemes\`.`);
-      } else {
-        setColorScheme(val);
       }
-    }, [setColorScheme, allColorSchemes]);
+    }, [colorScheme, attribute]);
     return /*#__PURE__*/_jsxs(ColorSchemeContext.Provider, {
       value: {
+        mode,
+        setMode,
+        lightColorScheme,
+        darkColorScheme,
         colorScheme,
-        setColorScheme: wrappedSetColorScheme,
+        setColorScheme,
         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
       })]
     });
@@ -163,17 +175,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/esm/cssVars/cssVarsParser.js

@@ -1,3 +1,5 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+
 /**
  * This function create an object from keys, value and then assign to target
  *
@@ -50,7 +52,7 @@ export const walkObjectDeep = (obj, callback) => {
         if (typeof value === 'object' && Object.keys(value).length > 0) {
           recurse(value, [...parentKeys, key]);
         } else {
-          callback([...parentKeys, key], value);
+          callback([...parentKeys, key], value, object);
         }
       }
     });
@@ -75,7 +77,16 @@ const 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
@@ -90,19 +101,37 @@ const getCssValue = (keys, value) => {
  */
 
 
-export default function cssVarsParser(obj, options) {
+export default function cssVarsParser(theme, options) {
+  const clonedTheme = _extends({}, theme);
+
+  delete clonedTheme.vars; // remove 'vars' from the structure
+
   const {
-    prefix
+    prefix,
+    basePrefix = '',
+    shouldSkipGeneratingVar
   } = options || {};
   const css = {};
   const vars = {};
-  walkObjectDeep(obj, (keys, value) => {
-    if (typeof value === 'string' || typeof value === 'number') {
-      const cssVar = `--${prefix ? `${prefix}-` : ''}${keys.join('-')}`;
-      Object.assign(css, {
-        [cssVar]: getCssValue(keys, value)
-      });
-      assignNestedKeys(vars, keys, `var(${cssVar})`);
+  walkObjectDeep(clonedTheme, (keys, val, scope) => {
+    if (typeof val === 'string' || typeof val === 'number') {
+      let value = val;
+
+      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(`${basePrefix}-`, ''); // scope is the deepest object in the tree, keys is the theme path keys
+
+        scope[keys.slice(-1)[0]] = value;
+      }
+
+      if (!shouldSkipGeneratingVar || shouldSkipGeneratingVar && !shouldSkipGeneratingVar(keys, value)) {
+        // only create css & var if `shouldSkipGeneratingVar` return false
+        const cssVar = `--${prefix ? `${prefix}-` : ''}${keys.join('-')}`;
+        Object.assign(css, {
+          [cssVar]: getCssValue(keys, value)
+        });
+        assignNestedKeys(vars, keys, `var(${cssVar})`);
+      }
     }
   });
   return {

package/esm/cssVars/getInitColorSchemeScript.js

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

package/esm/cssVars/useCurrentColorScheme.js

@@ -0,0 +1,217 @@
+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') {
+    const 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, 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;
+  }
+
+  let value;
+
+  try {
+    value = localStorage.getItem(key) || undefined;
+  } catch (e) {// Unsupported
+  }
+
+  return value || defaultValue;
+}
+
+export default function useCurrentColorScheme(options) {
+  const {
+    defaultMode = 'light',
+    defaultLightColorScheme,
+    defaultDarkColorScheme,
+    supportedColorSchemes = [],
+    modeStorageKey = DEFAULT_MODE_STORAGE_KEY,
+    colorSchemeStorageKey = DEFAULT_COLOR_SCHEME_STORAGE_KEY
+  } = options;
+  const joinedColorSchemes = supportedColorSchemes.join(',');
+  const [state, setState] = React.useState(() => {
+    const initialMode = resolveValue(modeStorageKey, defaultMode);
+    return {
+      mode: initialMode,
+      systemMode: getSystemMode(initialMode),
+      lightColorScheme: resolveValue(`${colorSchemeStorageKey}-light`) || defaultLightColorScheme,
+      darkColorScheme: resolveValue(`${colorSchemeStorageKey}-dark`) || defaultDarkColorScheme
+    };
+  });
+  const colorScheme = getColorScheme(state);
+  const setMode = React.useCallback(mode => {
+    setState(currentState => {
+      const newMode = !mode ? defaultMode : mode;
+
+      if (typeof localStorage !== 'undefined') {
+        localStorage.setItem(modeStorageKey, newMode);
+      }
+
+      return _extends({}, currentState, {
+        mode: newMode,
+        systemMode: getSystemMode(newMode)
+      });
+    });
+  }, [modeStorageKey, defaultMode]);
+  const setColorScheme = React.useCallback(value => {
+    if (!value || typeof value === 'string') {
+      if (value && !supportedColorSchemes.includes(value)) {
+        console.error(`\`${value}\` does not exist in \`theme.colorSchemes\`.`);
+      } else {
+        setState(currentState => {
+          const newState = _extends({}, currentState);
+
+          if (!value) {
+            // reset to default color scheme
+            newState.lightColorScheme = defaultLightColorScheme;
+            newState.darkColorScheme = defaultDarkColorScheme;
+            return newState;
+          }
+
+          processState(currentState, mode => {
+            localStorage.setItem(`${colorSchemeStorageKey}-${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(`\`${value}\` does not exist in \`theme.colorSchemes\`.`);
+    } else {
+      setState(currentState => {
+        const 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(`${colorSchemeStorageKey}-light`, value.light);
+      }
+
+      if (value.dark) {
+        localStorage.setItem(`${colorSchemeStorageKey}-dark`, value.dark);
+      }
+    }
+  }, [colorSchemeStorageKey, supportedColorSchemes, defaultLightColorScheme, defaultDarkColorScheme]);
+  const handleMediaQuery = React.useCallback(e => {
+    if (state.mode === 'system') {
+      setState(currentState => _extends({}, currentState, {
+        systemMode: e.matches ? 'dark' : 'light'
+      }));
+    }
+  }, [state.mode]); // Ref hack to avoid adding handleMediaQuery as a dep
+
+  const mediaListener = React.useRef(handleMediaQuery);
+  mediaListener.current = handleMediaQuery;
+  React.useEffect(() => {
+    const handler = (...args) => mediaListener.current(...args); // Always listen to System preference
+
+
+    const media = window.matchMedia('(prefers-color-scheme: dark)'); // Intentionally use deprecated listener methods to support iOS & old browsers
+
+    media.addListener(handler);
+    handler(media);
+    return () => media.removeListener(handler);
+  }, []); // Save mode, lightColorScheme & darkColorScheme to localStorage
+
+  React.useEffect(() => {
+    if (state.mode) {
+      localStorage.setItem(modeStorageKey, state.mode);
+    }
+
+    processState(state, mode => {
+      if (mode === 'light') {
+        localStorage.setItem(`${colorSchemeStorageKey}-light`, state.lightColorScheme);
+      }
+
+      if (mode === 'dark') {
+        localStorage.setItem(`${colorSchemeStorageKey}-dark`, state.darkColorScheme);
+      }
+    });
+  }, [state, colorSchemeStorageKey, modeStorageKey]); // Handle when localStorage has changed
+
+  React.useEffect(() => {
+    const handleStorage = event => {
+      const 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 () => window.removeEventListener('storage', handleStorage);
+  }, [setColorScheme, setMode, modeStorageKey, colorSchemeStorageKey, joinedColorSchemes, defaultMode]);
+  return _extends({}, state, {
+    colorScheme,
+    setMode,
+    setColorScheme
+  });
+}

package/esm/styleFunctionSx/extendSxProp.js

@@ -1,6 +1,7 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 const _excluded = ["sx"];
+import { isPlainObject } from '@mui/utils';
 import { propToStyleFunction } from '../getThemeValue';
 
 const splitProps = props => {
@@ -28,7 +29,25 @@ export default function extendSxProp(props) {
     systemProps,
     otherProps
   } = splitProps(other);
+  let finalSx;
+
+  if (Array.isArray(inSx)) {
+    finalSx = [systemProps, ...inSx];
+  } else if (typeof inSx === 'function') {
+    finalSx = (...args) => {
+      const result = inSx(...args);
+
+      if (!isPlainObject(result)) {
+        return systemProps;
+      }
+
+      return _extends({}, systemProps, result);
+    };
+  } else {
+    finalSx = _extends({}, systemProps, inSx);
+  }
+
   return _extends({}, otherProps, {
-    sx: _extends({}, systemProps, inSx)
+    sx: finalSx
   });
 }