@mui/system 5.0.3 → 5.1.0

package/modern/createTheme/createBreakpoints.js

@@ -13,12 +13,12 @@ export default function createBreakpoints(breakpoints) {
       xs: 0,
       // phone
       sm: 600,
-      // tablets
+      // tablet
       md: 900,
       // small laptop
       lg: 1200,
       // desktop
-      xl: 1536 // large screens
+      xl: 1536 // large screen
 
     },
     unit = 'px',

package/modern/cssVars/createCssVarsProvider.js

@@ -0,0 +1,207 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+import { formatMuiErrorMessage as _formatMuiErrorMessage } from "@mui/utils";
+const _excluded = ["colorSchemes"],
+      _excluded2 = ["colorSchemes"];
+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 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";
+export default function createCssVarsProvider(options) {
+  const {
+    theme: baseTheme = {},
+    defaultMode: desisgnSystemMode = 'light',
+    defaultColorScheme: designSystemColorScheme,
+    prefix: designSystemPrefix = '',
+    shouldSkipGeneratingVar
+  } = options;
+
+  if (!baseTheme.colorSchemes || typeof designSystemColorScheme === 'string' && !baseTheme.colorSchemes[designSystemColorScheme] || typeof designSystemColorScheme === 'object' && !baseTheme.colorSchemes[designSystemColorScheme?.light] || typeof designSystemColorScheme === 'object' && !baseTheme.colorSchemes[designSystemColorScheme?.dark]) {
+    console.error(`MUI: \`${designSystemColorScheme}\` does not exist in \`theme.colorSchemes\`.`);
+  }
+
+  const ColorSchemeContext = /*#__PURE__*/React.createContext(undefined);
+
+  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;
+  };
+
+  function CssVarsProvider({
+    children,
+    theme: themeProp = {},
+    prefix = designSystemPrefix,
+    modeStorageKey = DEFAULT_MODE_STORAGE_KEY,
+    attribute = DEFAULT_ATTRIBUTE,
+    defaultMode = desisgnSystemMode,
+    defaultColorScheme = designSystemColorScheme
+  }) {
+    const {
+      colorSchemes: baseColorSchemes = {}
+    } = baseTheme,
+          restBaseTheme = _objectWithoutPropertiesLoose(baseTheme, _excluded);
+
+    const {
+      colorSchemes: colorSchemesProp = {}
+    } = themeProp,
+          restThemeProp = _objectWithoutPropertiesLoose(themeProp, _excluded2);
+
+    let mergedTheme = deepmerge(restBaseTheme, restThemeProp);
+    const colorSchemes = deepmerge(baseColorSchemes, colorSchemesProp);
+    const allColorSchemes = Object.keys(colorSchemes);
+    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,
+      basePrefix: designSystemPrefix,
+      shouldSkipGeneratingVar
+    });
+    mergedTheme = _extends({}, mergedTheme, colorSchemes[resolvedColorScheme], {
+      vars: rootVars
+    });
+    const styleSheet = {};
+    Object.entries(colorSchemes).forEach(([key, scheme]) => {
+      const {
+        css,
+        vars
+      } = cssVarsParser(scheme, {
+        prefix,
+        basePrefix: designSystemPrefix,
+        shouldSkipGeneratingVar
+      });
+
+      if (key === resolvedColorScheme) {
+        mergedTheme.vars = _extends({}, mergedTheme.vars, vars);
+      }
+
+      const resolvedDefaultColorScheme = (() => {
+        if (typeof defaultColorScheme === 'string') {
+          return defaultColorScheme;
+        }
+
+        if (defaultMode === 'dark') {
+          return defaultColorScheme.dark;
+        }
+
+        return defaultColorScheme.light;
+      })();
+
+      if (key === resolvedDefaultColorScheme) {
+        styleSheet[':root'] = css;
+      } else {
+        styleSheet[`[${attribute}="${key}"]`] = css;
+      }
+    });
+    React.useEffect(() => {
+      if (colorScheme) {
+        document.body.setAttribute(attribute, colorScheme);
+      }
+    }, [colorScheme, attribute]);
+    return /*#__PURE__*/_jsxs(ColorSchemeContext.Provider, {
+      value: {
+        mode,
+        setMode,
+        lightColorScheme,
+        darkColorScheme,
+        colorScheme,
+        setColorScheme,
+        allColorSchemes
+      },
+      children: [/*#__PURE__*/_jsx(GlobalStyles, {
+        styles: {
+          ':root': rootCss
+        }
+      }), /*#__PURE__*/_jsx(GlobalStyles, {
+        styles: styleSheet
+      }), /*#__PURE__*/_jsx(ThemeProvider, {
+        theme: mergedTheme,
+        children: children
+      })]
+    });
+  }
+
+  process.env.NODE_ENV !== "production" ? CssVarsProvider.propTypes = {
+    /**
+     * The body attribute name to attach colorScheme.
+     */
+    attribute: PropTypes.string,
+
+    /**
+     * Your component tree.
+     */
+    children: PropTypes.node,
+
+    /**
+     * The initial color scheme used.
+     */
+    defaultColorScheme: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
+
+    /**
+     * The initial mode used.
+     */
+    defaultMode: PropTypes.string,
+
+    /**
+     * The key in the local storage used to store current color scheme.
+     */
+    modeStorageKey: PropTypes.string,
+
+    /**
+     * css variable prefix
+     */
+    prefix: PropTypes.string,
+
+    /**
+     * The calculated theme object that will be passed through context.
+     */
+    theme: PropTypes.object
+  } : void 0;
+  return {
+    CssVarsProvider,
+    useColorScheme,
+    getInitColorSchemeScript
+  };
+}

package/modern/cssVars/cssVarsParser.js

@@ -0,0 +1,141 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+
+/**
+ * This function create an object from keys, value and then assign to target
+ *
+ * @param {Object} obj : the target object to be assigned
+ * @param {string[]} keys
+ * @param {string | number} value
+ *
+ * @example
+ * const source = {}
+ * assignNestedKeys(source, ['palette', 'primary'], 'var(--palette-primary)')
+ * console.log(source) // { palette: { primary: 'var(--palette-primary)' } }
+ *
+ * @example
+ * const source = { palette: { primary: 'var(--palette-primary)' } }
+ * assignNestedKeys(source, ['palette', 'secondary'], 'var(--palette-secondary)')
+ * console.log(source) // { palette: { primary: 'var(--palette-primary)', secondary: 'var(--palette-secondary)' } }
+ */
+export const assignNestedKeys = (obj, keys, value) => {
+  let temp = obj;
+  keys.forEach((k, index) => {
+    if (index === keys.length - 1) {
+      if (temp && typeof temp === 'object') {
+        temp[k] = value;
+      }
+    } else if (temp && typeof temp === 'object') {
+      if (!temp[k]) {
+        temp[k] = {};
+      }
+
+      temp = temp[k];
+    }
+  });
+};
+/**
+ *
+ * @param {Object} obj : source object
+ * @param {Function} callback : a function that will be called when
+ *                   - the deepest key in source object is reached
+ *                   - the value of the deepest key is NOT `undefined` | `null`
+ *
+ * @example
+ * walkObjectDeep({ palette: { primary: { main: '#000000' } } }, console.log)
+ * // ['palette', 'primary', 'main'] '#000000'
+ */
+
+export const walkObjectDeep = (obj, callback) => {
+  function recurse(object, parentKeys = []) {
+    Object.entries(object).forEach(([key, value]) => {
+      if (value !== undefined && value !== null) {
+        if (typeof value === 'object' && Object.keys(value).length > 0) {
+          recurse(value, [...parentKeys, key]);
+        } else {
+          callback([...parentKeys, key], value, object);
+        }
+      }
+    });
+  }
+
+  recurse(obj);
+};
+
+const getCssValue = (keys, value) => {
+  if (typeof value === 'number') {
+    if (['lineHeight', 'fontWeight', 'opacity', 'zIndex'].some(prop => keys.includes(prop))) {
+      // css property that are unitless
+      return value;
+    }
+
+    return `${value}px`;
+  }
+
+  return value;
+};
+/**
+ * a function that parse theme and return { css, vars }
+ *
+ * @param {Object} theme
+ * @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
+ * const { css, vars } = parser({
+ *   fontSize: 12,
+ *   lineHeight: 1.2,
+ *   palette: { primary: { 500: '#000000' } }
+ * })
+ *
+ * console.log(css) // { '--fontSize': '12px', '--lineHeight': 1.2, '--palette-primary-500': '#000000' }
+ * console.log(vars) // { fontSize: '--fontSize', lineHeight: '--lineHeight', palette: { primary: { 500: 'var(--palette-primary-500)' } } }
+ */
+
+
+export default function cssVarsParser(theme, options) {
+  const clonedTheme = _extends({}, theme);
+
+  delete clonedTheme.vars; // remove 'vars' from the structure
+
+  const {
+    prefix,
+    basePrefix = '',
+    shouldSkipGeneratingVar
+  } = options || {};
+  const css = {};
+  const vars = {};
+  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 {
+    css,
+    vars
+  };
+}

package/modern/cssVars/getInitColorSchemeScript.js

@@ -0,0 +1,42 @@
+import * as React from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
+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 {
+    defaultMode = 'light',
+    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 mode = localStorage.getItem('${modeStorageKey}');
+        var colorScheme = '';
+        if (mode === 'system' || (!mode && ${defaultMode} === 'system')) {
+          // handle system mode
+          var mql = window.matchMedia('(prefers-color-scheme: dark)');
+          if (mql.matches) {
+            colorScheme = localStorage.getItem('${colorSchemeStorageKey}-dark') || ${defaultLightColorScheme};
+          } else {
+            colorScheme = localStorage.getItem('${colorSchemeStorageKey}-light') || ${defaultDarkColorScheme};
+          }
+        }
+        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);
+        }
+      } catch (e) {} })();`
+    }
+  });
+}

package/modern/cssVars/index.js

@@ -0,0 +1 @@
+export { default } from './createCssVarsProvider';

package/modern/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/modern/index.js

@@ -1,4 +1,4 @@
-/** @license MUI v5.0.3
+/** @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.
@@ -41,4 +41,5 @@ export { default as useThemeProps, getThemeProps } from './useThemeProps';
 export { default as useTheme } from './useTheme';
 export { default as useThemeWithoutDefault } from './useThemeWithoutDefault';
 export * from './colorManipulator';
-export { default as ThemeProvider } from './ThemeProvider';
+export { default as ThemeProvider } from './ThemeProvider';
+export { default as unstable_createCssVarsProvider } from './cssVars/createCssVarsProvider';

package/modern/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
   });
 }