@mui/system 5.4.1 → 5.4.4

package/esm/cssVars/createCssVarsProvider.js

@@ -25,10 +25,11 @@ export default function createCssVarsProvider(options) {
     theme: baseTheme = {},
     defaultMode: desisgnSystemMode = 'light',
     defaultColorScheme: designSystemColorScheme,
-    disableTransitionOnChange = false,
-    enableColorScheme = true,
+    disableTransitionOnChange: designSystemTransitionOnChange = false,
+    enableColorScheme: designSystemEnableColorScheme = true,
     prefix: designSystemPrefix = '',
-    shouldSkipGeneratingVar
+    shouldSkipGeneratingVar,
+    resolveTheme
   } = options;
   const systemSpacing = createSpacing(baseTheme.spacing);
   const systemBreakpoints = createBreakpoints((_baseTheme$breakpoint = baseTheme.breakpoints) != null ? _baseTheme$breakpoint : {});
@@ -56,16 +57,14 @@ export default function createCssVarsProvider(options) {
     modeStorageKey = DEFAULT_MODE_STORAGE_KEY,
     attribute = DEFAULT_ATTRIBUTE,
     defaultMode = desisgnSystemMode,
-    defaultColorScheme = designSystemColorScheme
+    defaultColorScheme = designSystemColorScheme,
+    disableTransitionOnChange = designSystemTransitionOnChange,
+    enableColorScheme = designSystemEnableColorScheme
   }) {
-    // make sure that baseTheme is always independent of each <CssVarsProvider /> call.
-    // JSON.parse(JSON.stringify(...)) is okay to be used as long as the baseTheme is a plain object.
-    const clonedBaseTheme = React.useMemo(() => JSON.parse(JSON.stringify(baseTheme)), []);
-
     const {
       colorSchemes: baseColorSchemes = {}
-    } = clonedBaseTheme,
-          restBaseTheme = _objectWithoutPropertiesLoose(clonedBaseTheme, _excluded);
+    } = baseTheme,
+          restBaseTheme = _objectWithoutPropertiesLoose(baseTheme, _excluded);
 
     const {
       colorSchemes: colorSchemesProp = {}
@@ -116,15 +115,17 @@ export default function createCssVarsProvider(options) {
 
     const {
       css: rootCss,
-      vars: rootVars
+      vars: rootVars,
+      parsedTheme
     } = cssVarsParser(mergedTheme, {
       prefix,
       basePrefix: designSystemPrefix,
       shouldSkipGeneratingVar
     });
-    mergedTheme = _extends({}, mergedTheme, colorSchemes[resolvedColorScheme], {
+    mergedTheme = _extends({}, parsedTheme, {
       components,
       colorSchemes,
+      prefix,
       vars: rootVars,
       spacing: themeProp.spacing ? createSpacing(themeProp.spacing) : systemSpacing,
       breakpoints: themeProp.breakpoints ? createBreakpoints(themeProp.breakpoints) : systemBreakpoints,
@@ -134,7 +135,8 @@ export default function createCssVarsProvider(options) {
     Object.entries(colorSchemes).forEach(([key, scheme]) => {
       const {
         css,
-        vars
+        vars,
+        parsedTheme: parsedScheme
       } = cssVarsParser(scheme, {
         prefix,
         basePrefix: designSystemPrefix,
@@ -142,6 +144,10 @@ export default function createCssVarsProvider(options) {
       });
       mergedTheme.vars = deepmerge(mergedTheme.vars, vars);
 
+      if (key === resolvedColorScheme) {
+        mergedTheme = _extends({}, mergedTheme, parsedScheme);
+      }
+
       const resolvedDefaultColorScheme = (() => {
         if (typeof defaultColorScheme === 'string') {
           return defaultColorScheme;
@@ -182,7 +188,7 @@ export default function createCssVarsProvider(options) {
       return () => {
         document.documentElement.style.setProperty('color-scheme', priorColorScheme);
       };
-    }, [mode, systemMode]);
+    }, [mode, systemMode, enableColorScheme]);
     React.useEffect(() => {
       let timer;
 
@@ -202,7 +208,7 @@ export default function createCssVarsProvider(options) {
       return () => {
         clearTimeout(timer);
       };
-    }, [colorScheme]);
+    }, [colorScheme, disableTransitionOnChange]);
     React.useEffect(() => {
       hasMounted.current = true;
       return () => {
@@ -226,7 +232,7 @@ export default function createCssVarsProvider(options) {
       }), /*#__PURE__*/_jsx(GlobalStyles, {
         styles: styleSheet
       }), /*#__PURE__*/_jsx(ThemeProvider, {
-        theme: mergedTheme,
+        theme: resolveTheme ? resolveTheme(mergedTheme) : mergedTheme,
         children: children
       })]
     });
@@ -253,6 +259,16 @@ export default function createCssVarsProvider(options) {
      */
     defaultMode: PropTypes.string,
 
+    /**
+     * Disable CSS transitions when switching between modes or color schemes
+     */
+    disableTransitionOnChange: PropTypes.bool,
+
+    /**
+     * Indicate to the browser which color scheme is used (light or dark) for rendering built-in UI
+     */
+    enableColorScheme: PropTypes.bool,
+
     /**
      * The key in the local storage used to store current color scheme.
      */

package/esm/cssVars/createGetCssVar.js

@@ -8,7 +8,13 @@ export default function createGetCssVar(prefix = '') {
       return '';
     }
 
-    return `, var(--${prefix ? `${prefix}-` : ''}${vars[0]}${appendVar(...vars.slice(1))})`;
+    const value = vars[0];
+
+    if (typeof value === 'string' && !value.match(/(#|\(|\)|(-?(\d*\.)?\d+)(px|em|%|ex|ch|rem|vw|vh|vmin|vmax|cm|mm|in|pt|pc))/)) {
+      return `, var(--${prefix ? `${prefix}-` : ''}${value}${appendVar(...vars.slice(1))})`;
+    }
+
+    return `, ${value}`;
   } // AdditionalVars makes `getCssVar` less strict, so it can be use like this `getCssVar('non-mui-variable')` without type error.
 
 

package/esm/cssVars/cssVarsParser.js

@@ -85,19 +85,20 @@ const getCssValue = (keys, value) => {
  *  `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`
+ *   the CSS variable value will be adjusted based on the provided `basePrefix` & `prefix` which can be found in `parsedTheme`.
  *
- * @returns {{ css: Object, vars: Object }} `css` is the stylesheet, `vars` is an object to get css variable (same structure as theme)
+ * @returns {{ css: Object, vars: Object, parsedTheme: typeof theme }} `css` is the stylesheet, `vars` is an object to get css variable (same structure as theme), and `parsedTheme` is the cloned version of theme.
  *
  * @example
- * const { css, vars } = parser({
+ * const { css, vars, parsedTheme } = parser({
  *   fontSize: 12,
  *   lineHeight: 1.2,
- *   palette: { primary: { 500: '#000000' } }
- * })
+ *   palette: { primary: { 500: 'var(--color)' } }
+ * }, { prefix: 'foo' })
  *
- * 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)' } } }
+ * console.log(css) // { '--foo-fontSize': '12px', '--foo-lineHeight': 1.2, '--foo-palette-primary-500': 'var(--foo-color)' }
+ * console.log(vars) // { fontSize: '--foo-fontSize', lineHeight: '--foo-lineHeight', palette: { primary: { 500: 'var(--foo-palette-primary-500)' } } }
+ * console.log(parsedTheme) // { fontSize: 12, lineHeight: 1.2, palette: { primary: { 500: 'var(--foo-color)' } } }
  */
 
 
@@ -109,20 +110,17 @@ export default function cssVarsParser(theme, options) {
   } = options || {};
   const css = {};
   const vars = {};
-  walkObjectDeep(theme, (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
+  const parsedTheme = {};
+  walkObjectDeep(theme, (keys, value) => {
+    if (typeof value === 'string' || typeof value === 'number') {
+      if (typeof value === 'string' && value.match(/var\(\s*--/)) {
+        // for CSS variable, apply prefix or remove basePrefix from the variable
         if (!basePrefix && prefix) {
-          value = value.replace(/var\(--/g, `var(--${prefix}-`);
+          value = value.replace(/var\(\s*--/g, `var(--${prefix}-`);
         } else {
-          value = prefix ? value.replace(new RegExp(basePrefix, 'g'), prefix) : value.replace(new RegExp(`${basePrefix}-`, 'g'), '');
-        } // scope is the deepest object in the tree, keys is the theme path keys
-
-
-        scope[keys.slice(-1)[0]] = value;
+          value = prefix ? value.replace(new RegExp(`var\\(\\s*--${basePrefix}`, 'g'), `var(--${prefix}`) // removing spaces
+          : value.replace(new RegExp(`var\\(\\s*--${basePrefix}-`, 'g'), 'var(--');
+        }
       }
 
       if (!shouldSkipGeneratingVar || shouldSkipGeneratingVar && !shouldSkipGeneratingVar(keys, value)) {
@@ -134,10 +132,13 @@ export default function cssVarsParser(theme, options) {
         assignNestedKeys(vars, keys, `var(${cssVar})`);
       }
     }
+
+    assignNestedKeys(parsedTheme, keys, value);
   }, keys => keys[0] === 'vars' // skip 'vars/*' paths
   );
   return {
     css,
-    vars
+    vars,
+    parsedTheme
   };
 }

package/esm/getThemeValue.js

@@ -20,7 +20,7 @@ const filterPropsMapping = {
   spacing: spacing.filterProps,
   typography: typography.filterProps
 };
-const styleFunctionMapping = {
+export const styleFunctionMapping = {
   borders,
   display,
   flexbox,

package/esm/index.js

@@ -21,7 +21,7 @@ export * from './spacing';
 export { default as style, getPath } from './style';
 export { default as typography } from './typography';
 export * from './typography';
-export { default as unstable_styleFunctionSx, extendSxProp as unstable_extendSxProp } from './styleFunctionSx';
+export { default as unstable_styleFunctionSx, unstable_createStyleFunctionSx, extendSxProp as unstable_extendSxProp } from './styleFunctionSx';
 export { default as experimental_sx } from './sx';
 export { default as unstable_getThemeValue } from './getThemeValue';
 export { default as Box } from './Box';

package/esm/styleFunctionSx/index.js

@@ -1,2 +1,3 @@
 export { default } from './styleFunctionSx';
+export { unstable_createStyleFunctionSx } from './styleFunctionSx';
 export { default as extendSxProp } from './extendSxProp';

package/esm/styleFunctionSx/styleFunctionSx.js

@@ -1,5 +1,5 @@
 import merge from '../merge';
-import getThemeValue, { propToStyleFunction } from '../getThemeValue';
+import { styleFunctionMapping as defaultStyleFunctionMapping } from '../getThemeValue';
 import { handleBreakpoints, createEmptyBreakpointObject, removeUnusedBreakpoints } from '../breakpoints';
 
 function objectsHaveSameKeys(...objects) {
@@ -10,70 +10,97 @@ function objectsHaveSameKeys(...objects) {
 
 function callIfFn(maybeFn, arg) {
   return typeof maybeFn === 'function' ? maybeFn(arg) : maybeFn;
-}
+} // eslint-disable-next-line @typescript-eslint/naming-convention
 
-function styleFunctionSx(props) {
-  const {
-    sx,
-    theme = {}
-  } = props || {};
 
-  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`)
-   */
+export function unstable_createStyleFunctionSx(styleFunctionMapping = defaultStyleFunctionMapping) {
+  const propToStyleFunction = Object.keys(styleFunctionMapping).reduce((acc, styleFnName) => {
+    styleFunctionMapping[styleFnName].filterProps.forEach(propName => {
+      acc[propName] = styleFunctionMapping[styleFnName];
+    });
+    return acc;
+  }, {});
 
+  function getThemeValue(prop, value, theme) {
+    const inputProps = {
+      [prop]: value,
+      theme
+    };
+    const styleFunction = propToStyleFunction[prop];
+    return styleFunction ? styleFunction(inputProps) : {
+      [prop]: value
+    };
+  }
 
-  function traverse(sxInput) {
-    let sxObject = sxInput;
+  function styleFunctionSx(props) {
+    const {
+      sx,
+      theme = {}
+    } = props || {};
 
-    if (typeof sxInput === 'function') {
-      sxObject = sxInput(theme);
-    } else if (typeof sxInput !== 'object') {
-      // value
-      return sxInput;
+    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`)
+     */
 
-    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 (value !== null && value !== undefined) {
-        if (typeof value === 'object') {
-          if (propToStyleFunction[styleKey]) {
-            css = merge(css, getThemeValue(styleKey, value, theme));
-          } else {
-            const breakpointsValues = handleBreakpoints({
-              theme
-            }, value, x => ({
-              [styleKey]: x
-            }));
-
-            if (objectsHaveSameKeys(breakpointsValues, value)) {
-              css[styleKey] = styleFunctionSx({
-                sx: value,
-                theme
-              });
+    function traverse(sxInput) {
+      let sxObject = sxInput;
+
+      if (typeof sxInput === 'function') {
+        sxObject = sxInput(theme);
+      } else if (typeof sxInput !== 'object') {
+        // value
+        return sxInput;
+      }
+
+      if (!sxObject) {
+        return null;
+      }
+
+      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 (value !== null && value !== undefined) {
+          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);
   }
 
-  return Array.isArray(sx) ? sx.map(traverse) : traverse(sx);
+  return styleFunctionSx;
 }
-
+const styleFunctionSx = unstable_createStyleFunctionSx();
 styleFunctionSx.filterProps = ['sx'];
 export default styleFunctionSx;

package/getThemeValue.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.propToStyleFunction = exports.default = void 0;
+exports.styleFunctionMapping = exports.propToStyleFunction = exports.default = void 0;
 
 var _borders = _interopRequireDefault(require("./borders"));
 
@@ -51,6 +51,7 @@ const styleFunctionMapping = {
   spacing: _spacing.default,
   typography: _typography.default
 };
+exports.styleFunctionMapping = styleFunctionMapping;
 const propToStyleFunction = Object.keys(filterPropsMapping).reduce((acc, styleFnName) => {
   filterPropsMapping[styleFnName].forEach(propName => {
     acc[propName] = styleFunctionMapping[styleFnName];

package/index.d.ts

@@ -118,6 +118,7 @@ export * from './spacing';
 
 export {
   default as unstable_styleFunctionSx,
+  unstable_createStyleFunctionSx,
   extendSxProp as unstable_extendSxProp,
 } from './styleFunctionSx';
 export * from './styleFunctionSx';

package/index.js

@@ -1,4 +1,4 @@
-/** @license MUI v5.4.1
+/** @license MUI v5.4.4
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
@@ -33,6 +33,7 @@ var _exportNames = {
   getPath: true,
   typography: true,
   unstable_styleFunctionSx: true,
+  unstable_createStyleFunctionSx: true,
   unstable_extendSxProp: true,
   experimental_sx: true,
   unstable_getThemeValue: true,
@@ -250,6 +251,12 @@ Object.defineProperty(exports, "unstable_createGetCssVar", {
     return _createGetCssVar.default;
   }
 });
+Object.defineProperty(exports, "unstable_createStyleFunctionSx", {
+  enumerable: true,
+  get: function () {
+    return _styleFunctionSx.unstable_createStyleFunctionSx;
+  }
+});
 Object.defineProperty(exports, "unstable_extendSxProp", {
   enumerable: true,
   get: function () {

package/index.spec.d.ts

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

package/legacy/createBox.js

@@ -4,7 +4,7 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import styled from '@mui/styled-engine';
-import styleFunctionSx, { extendSxProp } from './styleFunctionSx';
+import defaultStyleFunctionSx, { extendSxProp } from './styleFunctionSx';
 import useTheme from './useTheme';
 import { jsx as _jsx } from "react/jsx-runtime";
 export default function createBox() {
@@ -12,7 +12,9 @@ export default function createBox() {
   var defaultTheme = options.defaultTheme,
       _options$defaultClass = options.defaultClassName,
       defaultClassName = _options$defaultClass === void 0 ? 'MuiBox-root' : _options$defaultClass,
-      generateClassName = options.generateClassName;
+      generateClassName = options.generateClassName,
+      _options$styleFunctio = options.styleFunctionSx,
+      styleFunctionSx = _options$styleFunctio === void 0 ? defaultStyleFunctionSx : _options$styleFunctio;
   var BoxRoot = styled('div')(styleFunctionSx);
   var Box = /*#__PURE__*/React.forwardRef(function Box(inProps, ref) {
     var theme = useTheme(defaultTheme);

package/legacy/createStyled.js

@@ -5,8 +5,8 @@ import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutPr
 import styledEngineStyled from '@mui/styled-engine';
 import { getDisplayName } from '@mui/utils';
 import createTheme from './createTheme';
-import styleFunctionSx from './styleFunctionSx';
 import propsToClassKey from './propsToClassKey';
+import defaultStyleFunctionSx from './styleFunctionSx';
 
 function isEmpty(obj) {
   return Object.keys(obj).length === 0;
@@ -59,7 +59,8 @@ var variantsResolver = function variantsResolver(props, styles, theme, name) {
   }
 
   return variantsStyles;
-};
+}; // Update /system/styled/#api in case if this changes
+
 
 export function shouldForwardProp(prop) {
   return prop !== 'ownerState' && prop !== 'theme' && prop !== 'sx' && prop !== 'as';
@@ -77,7 +78,9 @@ export default function createStyled() {
       _input$rootShouldForw = input.rootShouldForwardProp,
       rootShouldForwardProp = _input$rootShouldForw === void 0 ? shouldForwardProp : _input$rootShouldForw,
       _input$slotShouldForw = input.slotShouldForwardProp,
-      slotShouldForwardProp = _input$slotShouldForw === void 0 ? shouldForwardProp : _input$slotShouldForw;
+      slotShouldForwardProp = _input$slotShouldForw === void 0 ? shouldForwardProp : _input$slotShouldForw,
+      _input$styleFunctionS = input.styleFunctionSx,
+      styleFunctionSx = _input$styleFunctionS === void 0 ? defaultStyleFunctionSx : _input$styleFunctionS;
   return function (tag) {
     var inputOptions = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
 
@@ -178,7 +181,11 @@ export default function createStyled() {
 
         transformedStyleArg = [].concat(_toConsumableArray(styleArg), _toConsumableArray(placeholders));
         transformedStyleArg.raw = [].concat(_toConsumableArray(styleArg.raw), _toConsumableArray(placeholders));
-      } else if (typeof styleArg === 'function') {
+      } else if (typeof styleArg === 'function' && // On the server emotion doesn't use React.forwardRef for creating components, so the created
+      // component stays as a function. This condition makes sure that we do not interpolate functions
+      // which are basically components used as a selectors.
+      // eslint-disable-next-line no-underscore-dangle
+      styleArg.__emotion_real !== styleArg) {
         // If the type is function, we need to define the default theme.
         transformedStyleArg = function transformedStyleArg(_ref4) {
           var themeInput = _ref4.theme,

package/legacy/createTheme/createBreakpoints.js

@@ -1,8 +1,26 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _extends from "@babel/runtime/helpers/esm/extends";
 // Sorted ASC by size. That's important.
 // It can't be configured as it's used statically for propTypes.
-export var breakpointKeys = ['xs', 'sm', 'md', 'lg', 'xl']; // Keep in mind that @media is inclusive by the CSS specification.
+export var breakpointKeys = ['xs', 'sm', 'md', 'lg', 'xl'];
+
+var sortBreakpointsValues = function sortBreakpointsValues(values) {
+  var breakpointsAsArray = Object.keys(values).map(function (key) {
+    return {
+      key: key,
+      val: values[key]
+    };
+  }) || []; // Sort in ascending order
+
+  breakpointsAsArray.sort(function (breakpoint1, breakpoint2) {
+    return breakpoint1.val - breakpoint2.val;
+  });
+  return breakpointsAsArray.reduce(function (acc, obj) {
+    return _extends({}, acc, _defineProperty({}, obj.key, obj.val));
+  }, {});
+}; // Keep in mind that @media is inclusive by the CSS specification.
+
 
 export default function createBreakpoints(breakpoints) {
   var _breakpoints$values = breakpoints.values,
@@ -24,7 +42,8 @@ export default function createBreakpoints(breakpoints) {
       step = _breakpoints$step === void 0 ? 5 : _breakpoints$step,
       other = _objectWithoutProperties(breakpoints, ["values", "unit", "step"]);
 
-  var keys = Object.keys(values);
+  var sortedValues = sortBreakpointsValues(values);
+  var keys = Object.keys(sortedValues);
 
   function up(key) {
     var value = typeof values[key] === 'number' ? values[key] : key;
@@ -66,7 +85,7 @@ export default function createBreakpoints(breakpoints) {
 
   return _extends({
     keys: keys,
-    values: values,
+    values: sortedValues,
     up: up,
     down: down,
     between: between,