@mui/system 5.4.2 → 5.5.0

package/legacy/cssVars/createCssVarsProvider.js

@@ -26,9 +26,9 @@ export default function createCssVarsProvider(options) {
       desisgnSystemMode = _options$defaultMode === void 0 ? 'light' : _options$defaultMode,
       designSystemColorScheme = options.defaultColorScheme,
       _options$disableTrans = options.disableTransitionOnChange,
-      disableTransitionOnChange = _options$disableTrans === void 0 ? false : _options$disableTrans,
+      designSystemTransitionOnChange = _options$disableTrans === void 0 ? false : _options$disableTrans,
       _options$enableColorS = options.enableColorScheme,
-      enableColorScheme = _options$enableColorS === void 0 ? true : _options$enableColorS,
+      designSystemEnableColorScheme = _options$enableColorS === void 0 ? true : _options$enableColorS,
       _options$prefix = options.prefix,
       designSystemPrefix = _options$prefix === void 0 ? '' : _options$prefix,
       shouldSkipGeneratingVar = options.shouldSkipGeneratingVar,
@@ -65,16 +65,15 @@ export default function createCssVarsProvider(options) {
         _ref$defaultMode = _ref.defaultMode,
         defaultMode = _ref$defaultMode === void 0 ? desisgnSystemMode : _ref$defaultMode,
         _ref$defaultColorSche = _ref.defaultColorScheme,
-        defaultColorScheme = _ref$defaultColorSche === void 0 ? designSystemColorScheme : _ref$defaultColorSche;
-    // 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.
-    var clonedBaseTheme = React.useMemo(function () {
-      return JSON.parse(JSON.stringify(baseTheme));
-    }, []);
+        defaultColorScheme = _ref$defaultColorSche === void 0 ? designSystemColorScheme : _ref$defaultColorSche,
+        _ref$disableTransitio = _ref.disableTransitionOnChange,
+        disableTransitionOnChange = _ref$disableTransitio === void 0 ? designSystemTransitionOnChange : _ref$disableTransitio,
+        _ref$enableColorSchem = _ref.enableColorScheme,
+        enableColorScheme = _ref$enableColorSchem === void 0 ? designSystemEnableColorScheme : _ref$enableColorSchem;
 
-    var _clonedBaseTheme$colo = clonedBaseTheme.colorSchemes,
-        baseColorSchemes = _clonedBaseTheme$colo === void 0 ? {} : _clonedBaseTheme$colo,
-        restBaseTheme = _objectWithoutProperties(clonedBaseTheme, ["colorSchemes"]);
+    var _baseTheme$colorSchem = baseTheme.colorSchemes,
+        baseColorSchemes = _baseTheme$colorSchem === void 0 ? {} : _baseTheme$colorSchem,
+        restBaseTheme = _objectWithoutProperties(baseTheme, ["colorSchemes"]);
 
     var _themeProp$colorSchem = themeProp.colorSchemes,
         colorSchemesProp = _themeProp$colorSchem === void 0 ? {} : _themeProp$colorSchem,
@@ -127,9 +126,10 @@ export default function createCssVarsProvider(options) {
       shouldSkipGeneratingVar: shouldSkipGeneratingVar
     }),
         rootCss = _cssVarsParser.css,
-        rootVars = _cssVarsParser.vars;
+        rootVars = _cssVarsParser.vars,
+        parsedTheme = _cssVarsParser.parsedTheme;
 
-    mergedTheme = _extends({}, mergedTheme, colorSchemes[resolvedColorScheme], {
+    mergedTheme = _extends({}, parsedTheme, {
       components: components,
       colorSchemes: colorSchemes,
       prefix: prefix,
@@ -150,10 +150,15 @@ export default function createCssVarsProvider(options) {
         shouldSkipGeneratingVar: shouldSkipGeneratingVar
       }),
           css = _cssVarsParser2.css,
-          vars = _cssVarsParser2.vars;
+          vars = _cssVarsParser2.vars,
+          parsedScheme = _cssVarsParser2.parsedTheme;
 
       mergedTheme.vars = deepmerge(mergedTheme.vars, vars);
 
+      if (key === resolvedColorScheme) {
+        mergedTheme = _extends({}, mergedTheme, parsedScheme);
+      }
+
       var resolvedDefaultColorScheme = function () {
         if (typeof defaultColorScheme === 'string') {
           return defaultColorScheme;
@@ -194,7 +199,7 @@ export default function createCssVarsProvider(options) {
       return function () {
         document.documentElement.style.setProperty('color-scheme', priorColorScheme);
       };
-    }, [mode, systemMode]);
+    }, [mode, systemMode, enableColorScheme]);
     React.useEffect(function () {
       var timer;
 
@@ -216,7 +221,7 @@ export default function createCssVarsProvider(options) {
       return function () {
         clearTimeout(timer);
       };
-    }, [colorScheme]);
+    }, [colorScheme, disableTransitionOnChange]);
     React.useEffect(function () {
       hasMounted.current = true;
       return function () {
@@ -267,6 +272,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/legacy/cssVars/cssVarsParser.js

@@ -98,19 +98,20 @@ var getCssValue = function 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)' } } }
  */
 
 
@@ -123,38 +124,37 @@ export default function cssVarsParser(theme, options) {
 
   var css = {};
   var vars = {};
-  walkObjectDeep(theme, function (keys, val, scope) {
-    if (typeof val === 'string' || typeof val === 'number') {
-      var _value = val;
-
-      if (typeof _value === 'string' && _value.match(/var\(\s*--/)) {
-        // replace the value of the `scope` object with the prefix or remove basePrefix from the value
+  var parsedTheme = {};
+  walkObjectDeep(theme, function (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\(\s*--/g, "var(--".concat(prefix, "-"));
+          value = value.replace(/var\(\s*--/g, "var(--".concat(prefix, "-"));
         } else {
-          _value = prefix ? _value.replace(new RegExp("var\\(\\s*--".concat(basePrefix), 'g'), "var(--".concat(prefix)) // removing spaces
-          : _value.replace(new RegExp("var\\(\\s*--".concat(basePrefix, "-"), 'g'), 'var(--');
-        } // 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*--".concat(basePrefix), 'g'), "var(--".concat(prefix)) // removing spaces
+          : value.replace(new RegExp("var\\(\\s*--".concat(basePrefix, "-"), 'g'), 'var(--');
+        }
       }
 
-      if (!shouldSkipGeneratingVar || shouldSkipGeneratingVar && !shouldSkipGeneratingVar(keys, _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)));
+        _extends(css, _defineProperty({}, cssVar, getCssValue(keys, value)));
 
         assignNestedKeys(vars, keys, "var(".concat(cssVar, ")"));
       }
     }
+
+    assignNestedKeys(parsedTheme, keys, value);
   }, function (keys) {
     return keys[0] === 'vars';
   } // skip 'vars/*' paths
   );
   return {
     css: css,
-    vars: vars
+    vars: vars,
+    parsedTheme: parsedTheme
   };
 }

package/legacy/index.js

@@ -1,4 +1,4 @@
-/** @license MUI v5.4.2
+/** @license MUI v5.5.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/createStyled.js

@@ -172,7 +172,11 @@ export default function createStyled(input = {}) {
 
         transformedStyleArg = [...styleArg, ...placeholders];
         transformedStyleArg.raw = [...styleArg.raw, ...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 = _ref2 => {
           let {

package/modern/cssVars/createCssVarsProvider.js

@@ -23,8 +23,8 @@ 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,
     resolveTheme
@@ -55,16 +55,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 = {}
@@ -115,13 +113,14 @@ 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,
@@ -134,7 +133,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 +142,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 +186,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 +206,7 @@ export default function createCssVarsProvider(options) {
       return () => {
         clearTimeout(timer);
       };
-    }, [colorScheme]);
+    }, [colorScheme, disableTransitionOnChange]);
     React.useEffect(() => {
       hasMounted.current = true;
       return () => {
@@ -253,6 +257,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/modern/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,21 +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;
-
+  const parsedTheme = {};
+  walkObjectDeep(theme, (keys, value) => {
+    if (typeof value === 'string' || typeof value === 'number') {
       if (typeof value === 'string' && value.match(/var\(\s*--/)) {
-        // replace the value of the `scope` object with the prefix or remove basePrefix from the value
+        // for CSS variable, apply prefix or remove basePrefix from the variable
         if (!basePrefix && prefix) {
           value = value.replace(/var\(\s*--/g, `var(--${prefix}-`);
         } else {
           value = prefix ? value.replace(new RegExp(`var\\(\\s*--${basePrefix}`, 'g'), `var(--${prefix}`) // removing spaces
           : value.replace(new RegExp(`var\\(\\s*--${basePrefix}-`, 'g'), 'var(--');
-        } // 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)) {
@@ -135,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/modern/index.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/system",
-  "version": "5.4.2",
+  "version": "5.5.0",
   "private": false,
   "author": "MUI Team",
   "description": "CSS utilities for rapidly laying out custom designs.",
@@ -43,13 +43,13 @@
     }
   },
   "dependencies": {
-    "@babel/runtime": "^7.17.0",
-    "@mui/private-theming": "^5.4.2",
-    "@mui/styled-engine": "^5.4.2",
+    "@babel/runtime": "^7.17.2",
+    "@mui/private-theming": "^5.4.4",
+    "@mui/styled-engine": "^5.4.4",
     "@mui/types": "^7.1.2",
-    "@mui/utils": "^5.4.2",
+    "@mui/utils": "^5.4.4",
     "clsx": "^1.1.1",
-    "csstype": "^3.0.10",
+    "csstype": "^3.0.11",
     "prop-types": "^15.7.2"
   },
   "sideEffects": false,

package/styleFunctionSx/styleFunctionSx.d.ts

@@ -24,6 +24,18 @@ export interface CSSSelectorObject<Theme extends object = {}> {
   [cssSelector: string]: ((theme: Theme) => SystemStyleObject<Theme>) | SystemStyleObject<Theme>;
 }
 
+type CssVariableType = string | number;
+
+/**
+ * Map all nested selectors and CSS variables.
+ */
+export interface CSSSelectorObjectOrCssVariables<Theme extends object = {}> {
+  [cssSelectorOrVariable: string]:
+    | ((theme: Theme) => SystemStyleObject<Theme> | string | number)
+    | SystemStyleObject<Theme>
+    | CssVariableType;
+}
+
 /**
  * Map of all available CSS properties (including aliases) and their raw value.
  * Only used internally to map CSS properties to input types (responsive value,
@@ -48,8 +60,7 @@ export type SystemCssProperties<Theme extends object = {}> = {
 export type SystemStyleObject<Theme extends object = {}> =
   | SystemCssProperties<Theme>
   | CSSPseudoSelectorProps<Theme>
-  | CSSSelectorObject<Theme>
-  | { [cssVariable: string]: string | number }
+  | CSSSelectorObjectOrCssVariables<Theme>
   | null;
 
 /**

package/styleFunctionSx/styleFunctionSx.spec.d.ts

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