@mui/system 5.0.6 → 5.1.0

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

package/modern/styleFunctionSx/styleFunctionSx.js

@@ -14,53 +14,63 @@ function callIfFn(maybeFn, arg) {
 
 function styleFunctionSx(props) {
   const {
-    sx: styles,
+    sx,
     theme = {}
   } = props || {};
 
-  if (!styles) {
-    return null;
+  if (!sx) {
+    return null; // emotion & styled-components will neglect null
   }
+  /*
+   * Receive `sxInput` as object or callback
+   * and then recursively check keys & values to create media query object styles.
+   * (the result will be used in `styled`)
+   */
 
-  let stylesObject = styles;
 
-  if (typeof styles === 'function') {
-    stylesObject = styles(theme);
-  } else if (typeof styles !== 'object') {
-    // value
-    return styles;
-  }
+  function traverse(sxInput) {
+    let sxObject = sxInput;
 
-  const emptyBreakpoints = createEmptyBreakpointObject(theme.breakpoints);
-  const breakpointsKeys = Object.keys(emptyBreakpoints);
-  let css = emptyBreakpoints;
-  Object.keys(stylesObject).forEach(styleKey => {
-    const value = callIfFn(stylesObject[styleKey], theme);
+    if (typeof sxInput === 'function') {
+      sxObject = sxInput(theme);
+    } else if (typeof sxInput !== 'object') {
+      // value
+      return sxInput;
+    }
 
-    if (typeof value === 'object') {
-      if (propToStyleFunction[styleKey]) {
-        css = merge(css, getThemeValue(styleKey, value, theme));
-      } else {
-        const breakpointsValues = handleBreakpoints({
-          theme
-        }, value, x => ({
-          [styleKey]: x
-        }));
+    const emptyBreakpoints = createEmptyBreakpointObject(theme.breakpoints);
+    const breakpointsKeys = Object.keys(emptyBreakpoints);
+    let css = emptyBreakpoints;
+    Object.keys(sxObject).forEach(styleKey => {
+      const value = callIfFn(sxObject[styleKey], theme);
 
-        if (objectsHaveSameKeys(breakpointsValues, value)) {
-          css[styleKey] = styleFunctionSx({
-            sx: value,
-            theme
-          });
+      if (typeof value === 'object') {
+        if (propToStyleFunction[styleKey]) {
+          css = merge(css, getThemeValue(styleKey, value, theme));
         } else {
-          css = merge(css, breakpointsValues);
+          const breakpointsValues = handleBreakpoints({
+            theme
+          }, value, x => ({
+            [styleKey]: x
+          }));
+
+          if (objectsHaveSameKeys(breakpointsValues, value)) {
+            css[styleKey] = styleFunctionSx({
+              sx: value,
+              theme
+            });
+          } else {
+            css = merge(css, breakpointsValues);
+          }
         }
+      } else {
+        css = merge(css, getThemeValue(styleKey, value, theme));
       }
-    } else {
-      css = merge(css, getThemeValue(styleKey, value, theme));
-    }
-  });
-  return removeUnusedBreakpoints(breakpointsKeys, css);
+    });
+    return removeUnusedBreakpoints(breakpointsKeys, css);
+  }
+
+  return Array.isArray(sx) ? sx.map(traverse) : traverse(sx);
 }
 
 styleFunctionSx.filterProps = ['sx'];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/system",
-  "version": "5.0.6",
+  "version": "5.1.0",
   "private": false,
   "author": "MUI Team",
   "description": "CSS utilities for rapidly laying out custom designs.",
@@ -8,7 +8,7 @@
   "keywords": [
     "react",
     "react-component",
-    "material-ui",
+    "mui",
     "system"
   ],
   "repository": {
@@ -43,11 +43,11 @@
     }
   },
   "dependencies": {
-    "@babel/runtime": "^7.15.4",
-    "@mui/private-theming": "^5.0.1",
-    "@mui/styled-engine": "^5.0.2",
-    "@mui/types": "^7.0.0",
-    "@mui/utils": "^5.0.1",
+    "@babel/runtime": "^7.16.0",
+    "@mui/private-theming": "^5.1.0",
+    "@mui/styled-engine": "^5.1.0",
+    "@mui/types": "^7.1.0",
+    "@mui/utils": "^5.1.0",
     "clsx": "^1.1.1",
     "csstype": "^3.0.9",
     "prop-types": "^15.7.2"

package/styleFunctionSx/extendSxProp.js

@@ -11,6 +11,8 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 
+var _utils = require("@mui/utils");
+
 var _getThemeValue = require("../getThemeValue");
 
 const _excluded = ["sx"];
@@ -39,7 +41,25 @@ 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 (!(0, _utils.isPlainObject)(result)) {
+        return systemProps;
+      }
+
+      return (0, _extends2.default)({}, systemProps, result);
+    };
+  } else {
+    finalSx = (0, _extends2.default)({}, systemProps, inSx);
+  }
+
   return (0, _extends2.default)({}, otherProps, {
-    sx: (0, _extends2.default)({}, systemProps, inSx)
+    sx: finalSx
   });
 }

package/styleFunctionSx/styleFunctionSx.d.ts

@@ -56,7 +56,8 @@ export type SystemStyleObject<Theme extends object = {}> =
  */
 export type SxProps<Theme extends object = {}> =
   | SystemStyleObject<Theme>
-  | ((theme: Theme) => SystemStyleObject<Theme>);
+  | ((theme: Theme) => SystemStyleObject<Theme>)
+  | Array<SystemStyleObject<Theme> | ((theme: Theme) => SystemStyleObject<Theme>)>;
 
 // eslint-disable-next-line @typescript-eslint/naming-convention
 export default function unstable_styleFunctionSx(props: object): object;

package/styleFunctionSx/styleFunctionSx.js

@@ -29,53 +29,63 @@ function callIfFn(maybeFn, arg) {
 
 function styleFunctionSx(props) {
   const {
-    sx: styles,
+    sx,
     theme = {}
   } = props || {};
 
-  if (!styles) {
-    return null;
+  if (!sx) {
+    return null; // emotion & styled-components will neglect null
   }
+  /*
+   * Receive `sxInput` as object or callback
+   * and then recursively check keys & values to create media query object styles.
+   * (the result will be used in `styled`)
+   */
 
-  let stylesObject = styles;
 
-  if (typeof styles === 'function') {
-    stylesObject = styles(theme);
-  } else if (typeof styles !== 'object') {
-    // value
-    return styles;
-  }
+  function traverse(sxInput) {
+    let sxObject = sxInput;
 
-  const emptyBreakpoints = (0, _breakpoints.createEmptyBreakpointObject)(theme.breakpoints);
-  const breakpointsKeys = Object.keys(emptyBreakpoints);
-  let css = emptyBreakpoints;
-  Object.keys(stylesObject).forEach(styleKey => {
-    const value = callIfFn(stylesObject[styleKey], theme);
+    if (typeof sxInput === 'function') {
+      sxObject = sxInput(theme);
+    } else if (typeof sxInput !== 'object') {
+      // value
+      return sxInput;
+    }
 
-    if (typeof value === 'object') {
-      if (_getThemeValue.propToStyleFunction[styleKey]) {
-        css = (0, _merge.default)(css, (0, _getThemeValue.default)(styleKey, value, theme));
-      } else {
-        const breakpointsValues = (0, _breakpoints.handleBreakpoints)({
-          theme
-        }, value, x => ({
-          [styleKey]: x
-        }));
-
-        if (objectsHaveSameKeys(breakpointsValues, value)) {
-          css[styleKey] = styleFunctionSx({
-            sx: value,
-            theme
-          });
+    const emptyBreakpoints = (0, _breakpoints.createEmptyBreakpointObject)(theme.breakpoints);
+    const breakpointsKeys = Object.keys(emptyBreakpoints);
+    let css = emptyBreakpoints;
+    Object.keys(sxObject).forEach(styleKey => {
+      const value = callIfFn(sxObject[styleKey], theme);
+
+      if (typeof value === 'object') {
+        if (_getThemeValue.propToStyleFunction[styleKey]) {
+          css = (0, _merge.default)(css, (0, _getThemeValue.default)(styleKey, value, theme));
         } else {
-          css = (0, _merge.default)(css, breakpointsValues);
+          const breakpointsValues = (0, _breakpoints.handleBreakpoints)({
+            theme
+          }, value, x => ({
+            [styleKey]: x
+          }));
+
+          if (objectsHaveSameKeys(breakpointsValues, value)) {
+            css[styleKey] = styleFunctionSx({
+              sx: value,
+              theme
+            });
+          } else {
+            css = (0, _merge.default)(css, breakpointsValues);
+          }
         }
+      } else {
+        css = (0, _merge.default)(css, (0, _getThemeValue.default)(styleKey, value, theme));
       }
-    } else {
-      css = (0, _merge.default)(css, (0, _getThemeValue.default)(styleKey, value, theme));
-    }
-  });
-  return (0, _breakpoints.removeUnusedBreakpoints)(breakpointsKeys, css);
+    });
+    return (0, _breakpoints.removeUnusedBreakpoints)(breakpointsKeys, css);
+  }
+
+  return Array.isArray(sx) ? sx.map(traverse) : traverse(sx);
 }
 
 styleFunctionSx.filterProps = ['sx'];

package/styleFunctionSx/styleFunctionSx.spec.d.ts

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