@mui/system - npm Package Compare versions

Comparing version 5.2.2 to 5.2.3

Box/Box.spec.d.ts

 export {};

createBox.d.ts

@@ -1,2 +0,2 @@
-import * as React from 'react';
+import Box from './Box';
 
@@ -6,3 +6,3 @@ export default function createBox(options?: {
   defaultClassName?: string;
-  generateClassName?: () => string;
-}): React.ElementType;
+  generateClassName?: (componentName: string) => string;
+}): typeof Box;

createTheme/createSpacing.d.ts

@@ -0,0 +0,0 @@ export declare type SpacingOptions = number | Spacing | ((abs: number) => number | string) | ((abs: number | string) => number | string) | ReadonlyArray<string | number>;

cssVars/createCssVarsProvider.d.ts

 import * as React from 'react';
+import getInitColorSchemeScript from './getInitColorSchemeScript';
 import { Mode, Result } from './useCurrentColorScheme';
 
-type RequiredDeep<T> = {
-  [K in keyof T]-?: RequiredDeep<T[K]>;
-};
-
 export type BuildCssVarsTheme<ThemeInput> = ThemeInput extends {
@@ -28,3 +25,12 @@ colorSchemes: Record<string, infer ColorSystems>;
 > = [ApplicationColorScheme] extends [never]
-  ? { theme?: DesignSystemTheme }
+  ? {
+      theme?: Omit<DesignSystemTheme, 'colorSchemes'> & {
+        colorSchemes?: Partial<
+          Record<
+            DesignSystemColorScheme,
+            DesignSystemTheme['colorSchemes'][DesignSystemColorScheme]
+          >
+        >;
+      };
+    }
   : {
@@ -38,5 +44,3 @@ theme: Omit<ApplicationTheme, 'colorSchemes'> & {
         > &
-          RequiredDeep<
-            Record<ApplicationColorScheme, ApplicationTheme['colorSchemes'][ApplicationColorScheme]>
-          >;
+          Record<ApplicationColorScheme, ApplicationTheme['colorSchemes'][ApplicationColorScheme]>;
       };
@@ -139,3 +143,3 @@ };
   useColorScheme: () => ColorSchemeContextValue<DesignSystemColorScheme | ApplicationColorScheme>;
-  getInitColorSchemeScript: () => React.ReactElement;
+  getInitColorSchemeScript: typeof getInitColorSchemeScript;
 };
@@ -142,0 +146,0 @@

cssVars/createCssVarsProvider.js

@@ -23,2 +23,6 @@ "use strict";
 
+var _createSpacing = _interopRequireDefault(require("../createTheme/createSpacing"));
+
+var _createBreakpoints = _interopRequireDefault(require("../createTheme/createBreakpoints"));
+
 var _cssVarsParser = _interopRequireDefault(require("./cssVarsParser"));
@@ -46,2 +50,4 @@
 function createCssVarsProvider(options) {
+  var _baseTheme$breakpoint;
+
   const {
@@ -56,2 +62,4 @@ theme: baseTheme = {},
   } = options;
+  const systemSpacing = (0, _createSpacing.default)(baseTheme.spacing);
+  const systemBreakpoints = (0, _createBreakpoints.default)((_baseTheme$breakpoint = baseTheme.breakpoints) != null ? _baseTheme$breakpoint : {});
 
@@ -83,6 +91,9 @@ 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]) {
   }) {
+    // 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 = {}
-    } = baseTheme,
-          restBaseTheme = (0, _objectWithoutPropertiesLoose2.default)(baseTheme, _excluded);
+    } = clonedBaseTheme,
+          restBaseTheme = (0, _objectWithoutPropertiesLoose2.default)(clonedBaseTheme, _excluded);
     const {
@@ -145,3 +156,5 @@ colorSchemes: colorSchemesProp = {}
       colorSchemes,
-      vars: rootVars
+      vars: rootVars,
+      spacing: themeProp.spacing ? (0, _createSpacing.default)(themeProp.spacing) : systemSpacing,
+      breakpoints: themeProp.breakpoints ? (0, _createBreakpoints.default)(themeProp.breakpoints) : systemBreakpoints
     });
@@ -180,3 +193,4 @@ const styleSheet = {};
       if (colorScheme) {
-        document.body.setAttribute(attribute, colorScheme);
+        // attaches attribute to <html> because the css variables are attached to :root (html)
+        document.documentElement.setAttribute(attribute, colorScheme);
       }
@@ -183,0 +197,0 @@ }, [colorScheme, attribute]);

cssVars/createCssVarsProvider.spec.d.ts

 export {};

cssVars/cssVarsParser.d.ts

@@ -33,3 +33,3 @@ declare type NestedRecord<V = any> = {
  */
-export declare const walkObjectDeep: <Value, T = Record<string, any>>(obj: T, callback: (keys: Array<string>, value: Value, scope: Record<string, string | number>) => void) => void;
+export declare const walkObjectDeep: <Value, T = Record<string, any>>(obj: T, callback: (keys: Array<string>, value: Value, scope: Record<string, string | number>) => void, shouldSkipPaths?: ((keys: Array<string>) => boolean) | undefined) => void;
 /**
@@ -36,0 +36,0 @@ * a function that parse theme and return { css, vars }

cssVars/cssVarsParser.js

 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
@@ -12,4 +10,2 @@ value: true
 
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
 /**
@@ -63,10 +59,12 @@ * This function create an object from keys, value and then assign to target
 
-const walkObjectDeep = (obj, callback) => {
+const walkObjectDeep = (obj, callback, shouldSkipPaths) => {
   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);
+      if (!shouldSkipPaths || shouldSkipPaths && !shouldSkipPaths([...parentKeys, key])) {
+        if (value !== undefined && value !== null) {
+          if (typeof value === 'object' && Object.keys(value).length > 0) {
+            recurse(value, [...parentKeys, key]);
+          } else {
+            callback([...parentKeys, key], value, object);
+          }
         }
@@ -123,5 +121,2 @@ }
 function cssVarsParser(theme, options) {
-  const clonedTheme = (0, _extends2.default)({}, theme);
-  delete clonedTheme.vars; // remove 'vars' from the structure
-
   const {
@@ -134,3 +129,3 @@ prefix,
   const vars = {};
-  walkObjectDeep(clonedTheme, (keys, val, scope) => {
+  walkObjectDeep(theme, (keys, val, scope) => {
     if (typeof val === 'string' || typeof val === 'number') {
@@ -141,4 +136,9 @@ let value = val;
         // 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
+        if (!basePrefix && prefix) {
+          value = value.replace(/var\(--/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;
@@ -156,3 +156,4 @@ }
     }
-  });
+  }, keys => keys[0] === 'vars' // skip 'vars/*' paths
+  );
   return {
@@ -159,0 +160,0 @@ css,

cssVars/getInitColorSchemeScript.d.ts

@@ -0,0 +0,0 @@ /// <reference types="react" />

cssVars/getInitColorSchemeScript.js

@@ -55,3 +55,3 @@ "use strict";
         if (colorScheme) {
-          document.body.setAttribute('${attribute}', colorScheme);
+          document.documentElement.setAttribute('${attribute}', colorScheme);
         }
@@ -58,0 +58,0 @@ } catch (e) {} })();`

cssVars/index.d.ts

 export { default } from './createCssVarsProvider';
 export type { BuildCssVarsTheme } from './createCssVarsProvider';

cssVars/useCurrentColorScheme.d.ts

@@ -0,0 +0,0 @@ export declare type Mode = 'light' | 'dark' | 'system';

esm/cssVars/createCssVarsProvider.js

@@ -11,2 +11,4 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import { deepmerge } from '@mui/utils';
+import createSpacing from '../createTheme/createSpacing';
+import createBreakpoints from '../createTheme/createBreakpoints';
 import cssVarsParser from './cssVarsParser';
@@ -20,2 +22,4 @@ import ThemeProvider from '../ThemeProvider';
 export default function createCssVarsProvider(options) {
+  var _baseTheme$breakpoint;
+
   const {
@@ -30,2 +34,4 @@ theme: baseTheme = {},
   } = options;
+  const systemSpacing = createSpacing(baseTheme.spacing);
+  const systemBreakpoints = createBreakpoints((_baseTheme$breakpoint = baseTheme.breakpoints) != null ? _baseTheme$breakpoint : {});
 
@@ -57,6 +63,10 @@ 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]) {
   }) {
+    // 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 = {}
-    } = baseTheme,
-          restBaseTheme = _objectWithoutPropertiesLoose(baseTheme, _excluded);
+    } = clonedBaseTheme,
+          restBaseTheme = _objectWithoutPropertiesLoose(clonedBaseTheme, _excluded);
 
@@ -121,3 +131,5 @@ const {
       colorSchemes,
-      vars: rootVars
+      vars: rootVars,
+      spacing: themeProp.spacing ? createSpacing(themeProp.spacing) : systemSpacing,
+      breakpoints: themeProp.breakpoints ? createBreakpoints(themeProp.breakpoints) : systemBreakpoints
     });
@@ -156,3 +168,4 @@ const styleSheet = {};
       if (colorScheme) {
-        document.body.setAttribute(attribute, colorScheme);
+        // attaches attribute to <html> because the css variables are attached to :root (html)
+        document.documentElement.setAttribute(attribute, colorScheme);
       }
@@ -159,0 +172,0 @@ }, [colorScheme, attribute]);

esm/cssVars/cssVarsParser.js

@@ -1,3 +0,1 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
-
 /**
@@ -48,10 +46,12 @@ * This function create an object from keys, value and then assign to target
 
-export const walkObjectDeep = (obj, callback) => {
+export const walkObjectDeep = (obj, callback, shouldSkipPaths) => {
   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);
+      if (!shouldSkipPaths || shouldSkipPaths && !shouldSkipPaths([...parentKeys, key])) {
+        if (value !== undefined && value !== null) {
+          if (typeof value === 'object' && Object.keys(value).length > 0) {
+            recurse(value, [...parentKeys, key]);
+          } else {
+            callback([...parentKeys, key], value, object);
+          }
         }
@@ -106,6 +106,2 @@ }
 export default function cssVarsParser(theme, options) {
-  const clonedTheme = _extends({}, theme);
-
-  delete clonedTheme.vars; // remove 'vars' from the structure
-
   const {
@@ -118,3 +114,3 @@ prefix,
   const vars = {};
-  walkObjectDeep(clonedTheme, (keys, val, scope) => {
+  walkObjectDeep(theme, (keys, val, scope) => {
     if (typeof val === 'string' || typeof val === 'number') {
@@ -125,4 +121,9 @@ let value = val;
         // 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
+        if (!basePrefix && prefix) {
+          value = value.replace(/var\(--/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;
@@ -140,3 +141,4 @@ }
     }
-  });
+  }, keys => keys[0] === 'vars' // skip 'vars/*' paths
+  );
   return {
@@ -143,0 +145,0 @@ css,

esm/cssVars/getInitColorSchemeScript.js

@@ -37,3 +37,3 @@ import * as React from 'react';
         if (colorScheme) {
-          document.body.setAttribute('${attribute}', colorScheme);
+          document.documentElement.setAttribute('${attribute}', colorScheme);
         }
@@ -40,0 +40,0 @@ } catch (e) {} })();`

esm/useThemeProps/getThemeProps.js

@@ -1,4 +0,2 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
-
-/* eslint-disable no-restricted-syntax */
+import { internal_resolveProps as resolveProps } from '@mui/utils';
 export default function getThemeProps(params) {
@@ -15,16 +13,3 @@ const {
 
-  const output = _extends({}, props); // Resolve default props, code borrow from React source.
-  // https://github.com/facebook/react/blob/15a8f031838a553e41c0b66eb1bcf1da8448104d/packages/react/src/ReactElement.js#L221
-
-
-  const defaultProps = theme.components[name].defaultProps;
-  let propName;
-
-  for (propName in defaultProps) {
-    if (output[propName] === undefined) {
-      output[propName] = defaultProps[propName];
-    }
-  }
-
-  return output;
+  return resolveProps(theme.components[name].defaultProps, props);
 }

index.js

@@ -1,2 +0,2 @@
-/** @license MUI v5.2.2
+/** @license MUI v5.2.3
  *
@@ -3,0 +3,0 @@ * This source code is licensed under the MIT license found in the

index.spec.d.ts

 export {};

legacy/cssVars/createCssVarsProvider.js

@@ -10,2 +10,4 @@ import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import { deepmerge } from '@mui/utils';
+import createSpacing from '../createTheme/createSpacing';
+import createBreakpoints from '../createTheme/createBreakpoints';
 import cssVarsParser from './cssVarsParser';
@@ -19,2 +21,4 @@ import ThemeProvider from '../ThemeProvider';
 export default function createCssVarsProvider(options) {
+  var _baseTheme$breakpoint;
+
   var _options$theme = options.theme,
@@ -32,2 +36,4 @@ baseTheme = _options$theme === void 0 ? {} : _options$theme,
       shouldSkipGeneratingVar = options.shouldSkipGeneratingVar;
+  var systemSpacing = createSpacing(baseTheme.spacing);
+  var systemBreakpoints = createBreakpoints((_baseTheme$breakpoint = baseTheme.breakpoints) != null ? _baseTheme$breakpoint : {});
 
@@ -64,6 +70,11 @@ 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]) {
         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));
+    }, []);
 
-    var _baseTheme$colorSchem = baseTheme.colorSchemes,
-        baseColorSchemes = _baseTheme$colorSchem === void 0 ? {} : _baseTheme$colorSchem,
-        restBaseTheme = _objectWithoutProperties(baseTheme, ["colorSchemes"]);
+    var _clonedBaseTheme$colo = clonedBaseTheme.colorSchemes,
+        baseColorSchemes = _clonedBaseTheme$colo === void 0 ? {} : _clonedBaseTheme$colo,
+        restBaseTheme = _objectWithoutProperties(clonedBaseTheme, ["colorSchemes"]);
 
@@ -126,3 +137,5 @@ var _themeProp$colorSchem = themeProp.colorSchemes,
       colorSchemes: colorSchemes,
-      vars: rootVars
+      vars: rootVars,
+      spacing: themeProp.spacing ? createSpacing(themeProp.spacing) : systemSpacing,
+      breakpoints: themeProp.breakpoints ? createBreakpoints(themeProp.breakpoints) : systemBreakpoints
     });
@@ -165,3 +178,4 @@ var styleSheet = {};
       if (colorScheme) {
-        document.body.setAttribute(attribute, colorScheme);
+        // attaches attribute to <html> because the css variables are attached to :root (html)
+        document.documentElement.setAttribute(attribute, colorScheme);
       }
@@ -168,0 +182,0 @@ }, [colorScheme, attribute]);

legacy/cssVars/cssVarsParser.js

@@ -52,3 +52,3 @@ import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 
-export var walkObjectDeep = function walkObjectDeep(obj, callback) {
+export var walkObjectDeep = function walkObjectDeep(obj, callback, shouldSkipPaths) {
   function recurse(object) {
@@ -61,7 +61,9 @@ var parentKeys = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
 
-      if (value !== undefined && value !== null) {
-        if (_typeof(value) === 'object' && Object.keys(value).length > 0) {
-          recurse(value, [].concat(_toConsumableArray(parentKeys), [key]));
-        } else {
-          callback([].concat(_toConsumableArray(parentKeys), [key]), value, object);
+      if (!shouldSkipPaths || shouldSkipPaths && !shouldSkipPaths([].concat(_toConsumableArray(parentKeys), [key]))) {
+        if (value !== undefined && value !== null) {
+          if (_typeof(value) === 'object' && Object.keys(value).length > 0) {
+            recurse(value, [].concat(_toConsumableArray(parentKeys), [key]));
+          } else {
+            callback([].concat(_toConsumableArray(parentKeys), [key]), value, object);
+          }
         }
@@ -118,6 +120,2 @@ }
 export default function cssVarsParser(theme, options) {
-  var clonedTheme = _extends({}, theme);
-
-  delete clonedTheme.vars; // remove 'vars' from the structure
-
   var _ref3 = options || {},
@@ -131,3 +129,3 @@ prefix = _ref3.prefix,
   var vars = {};
-  walkObjectDeep(clonedTheme, function (keys, val, scope) {
+  walkObjectDeep(theme, function (keys, val, scope) {
     if (typeof val === 'string' || typeof val === 'number') {
@@ -138,4 +136,9 @@ var _value = val;
         // replace the value of the `scope` object with the prefix or remove basePrefix from the value
-        _value = prefix ? _value.replace(basePrefix, prefix) : _value.replace("".concat(basePrefix, "-"), ''); // scope is the deepest object in the tree, keys is the theme path keys
+        if (!basePrefix && prefix) {
+          _value = _value.replace(/var\(--/g, "var(--".concat(prefix, "-"));
+        } else {
+          _value = prefix ? _value.replace(new RegExp(basePrefix, 'g'), prefix) : _value.replace(new RegExp("".concat(basePrefix, "-"), 'g'), '');
+        } // scope is the deepest object in the tree, keys is the theme path keys
 
+
         scope[keys.slice(-1)[0]] = _value;
@@ -153,3 +156,6 @@ }
     }
-  });
+  }, function (keys) {
+    return keys[0] === 'vars';
+  } // skip 'vars/*' paths
+  );
   return {
@@ -156,0 +162,0 @@ css: css,

legacy/cssVars/getInitColorSchemeScript.js

@@ -23,5 +23,5 @@ import * as React from 'react';
     dangerouslySetInnerHTML: {
-      __html: "(function() { try {\n        var mode = localStorage.getItem('".concat(modeStorageKey, "');\n        var colorScheme = '';\n        if (mode === 'system' || (!mode && !!").concat(enableSystem, ")) {\n          // handle system mode\n          var mql = window.matchMedia('(prefers-color-scheme: dark)');\n          if (mql.matches) {\n            colorScheme = localStorage.getItem('").concat(colorSchemeStorageKey, "-dark') || '").concat(defaultDarkColorScheme, "';\n          } else {\n            colorScheme = localStorage.getItem('").concat(colorSchemeStorageKey, "-light') || '").concat(defaultLightColorScheme, "';\n          }\n        }\n        if (mode === 'light') {\n          colorScheme = localStorage.getItem('").concat(colorSchemeStorageKey, "-light') || '").concat(defaultLightColorScheme, "';\n        }\n        if (mode === 'dark') {\n          colorScheme = localStorage.getItem('").concat(colorSchemeStorageKey, "-dark') || '").concat(defaultDarkColorScheme, "';\n        }\n        if (colorScheme) {\n          document.body.setAttribute('").concat(attribute, "', colorScheme);\n        }\n      } catch (e) {} })();")
+      __html: "(function() { try {\n        var mode = localStorage.getItem('".concat(modeStorageKey, "');\n        var colorScheme = '';\n        if (mode === 'system' || (!mode && !!").concat(enableSystem, ")) {\n          // handle system mode\n          var mql = window.matchMedia('(prefers-color-scheme: dark)');\n          if (mql.matches) {\n            colorScheme = localStorage.getItem('").concat(colorSchemeStorageKey, "-dark') || '").concat(defaultDarkColorScheme, "';\n          } else {\n            colorScheme = localStorage.getItem('").concat(colorSchemeStorageKey, "-light') || '").concat(defaultLightColorScheme, "';\n          }\n        }\n        if (mode === 'light') {\n          colorScheme = localStorage.getItem('").concat(colorSchemeStorageKey, "-light') || '").concat(defaultLightColorScheme, "';\n        }\n        if (mode === 'dark') {\n          colorScheme = localStorage.getItem('").concat(colorSchemeStorageKey, "-dark') || '").concat(defaultDarkColorScheme, "';\n        }\n        if (colorScheme) {\n          document.documentElement.setAttribute('").concat(attribute, "', colorScheme);\n        }\n      } catch (e) {} })();")
     }
   });
 }

legacy/index.js

@@ -1,2 +0,2 @@
-/** @license MUI v5.2.2
+/** @license MUI v5.2.3
  *
@@ -3,0 +3,0 @@ * This source code is licensed under the MIT license found in the

legacy/useThemeProps/getThemeProps.js

@@ -1,4 +0,2 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
-
-/* eslint-disable no-restricted-syntax */
+import { internal_resolveProps as resolveProps } from '@mui/utils';
 export default function getThemeProps(params) {
@@ -13,16 +11,3 @@ var theme = params.theme,
 
-  var output = _extends({}, props); // Resolve default props, code borrow from React source.
-  // https://github.com/facebook/react/blob/15a8f031838a553e41c0b66eb1bcf1da8448104d/packages/react/src/ReactElement.js#L221
-
-
-  var defaultProps = theme.components[name].defaultProps;
-  var propName;
-
-  for (propName in defaultProps) {
-    if (output[propName] === undefined) {
-      output[propName] = defaultProps[propName];
-    }
-  }
-
-  return output;
+  return resolveProps(theme.components[name].defaultProps, props);
 }

modern/cssVars/createCssVarsProvider.js

@@ -11,2 +11,4 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import { deepmerge } from '@mui/utils';
+import createSpacing from '../createTheme/createSpacing';
+import createBreakpoints from '../createTheme/createBreakpoints';
 import cssVarsParser from './cssVarsParser';
@@ -29,2 +31,4 @@ import ThemeProvider from '../ThemeProvider';
   } = options;
+  const systemSpacing = createSpacing(baseTheme.spacing);
+  const systemBreakpoints = createBreakpoints(baseTheme.breakpoints ?? {});
 
@@ -56,6 +60,10 @@ if (!baseTheme.colorSchemes || typeof designSystemColorScheme === 'string' && !baseTheme.colorSchemes[designSystemColorScheme] || typeof designSystemColorScheme === 'object' && !baseTheme.colorSchemes[designSystemColorScheme?.light] || typeof designSystemColorScheme === 'object' && !baseTheme.colorSchemes[designSystemColorScheme?.dark]) {
   }) {
+    // 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 = {}
-    } = baseTheme,
-          restBaseTheme = _objectWithoutPropertiesLoose(baseTheme, _excluded);
+    } = clonedBaseTheme,
+          restBaseTheme = _objectWithoutPropertiesLoose(clonedBaseTheme, _excluded);
 
@@ -120,3 +128,5 @@ const {
       colorSchemes,
-      vars: rootVars
+      vars: rootVars,
+      spacing: themeProp.spacing ? createSpacing(themeProp.spacing) : systemSpacing,
+      breakpoints: themeProp.breakpoints ? createBreakpoints(themeProp.breakpoints) : systemBreakpoints
     });
@@ -155,3 +165,4 @@ const styleSheet = {};
       if (colorScheme) {
-        document.body.setAttribute(attribute, colorScheme);
+        // attaches attribute to <html> because the css variables are attached to :root (html)
+        document.documentElement.setAttribute(attribute, colorScheme);
       }
@@ -158,0 +169,0 @@ }, [colorScheme, attribute]);

modern/cssVars/cssVarsParser.js

@@ -1,3 +0,1 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
-
 /**
@@ -48,10 +46,12 @@ * This function create an object from keys, value and then assign to target
 
-export const walkObjectDeep = (obj, callback) => {
+export const walkObjectDeep = (obj, callback, shouldSkipPaths) => {
   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);
+      if (!shouldSkipPaths || shouldSkipPaths && !shouldSkipPaths([...parentKeys, key])) {
+        if (value !== undefined && value !== null) {
+          if (typeof value === 'object' && Object.keys(value).length > 0) {
+            recurse(value, [...parentKeys, key]);
+          } else {
+            callback([...parentKeys, key], value, object);
+          }
         }
@@ -106,6 +106,2 @@ }
 export default function cssVarsParser(theme, options) {
-  const clonedTheme = _extends({}, theme);
-
-  delete clonedTheme.vars; // remove 'vars' from the structure
-
   const {
@@ -118,3 +114,3 @@ prefix,
   const vars = {};
-  walkObjectDeep(clonedTheme, (keys, val, scope) => {
+  walkObjectDeep(theme, (keys, val, scope) => {
     if (typeof val === 'string' || typeof val === 'number') {
@@ -125,4 +121,9 @@ let value = val;
         // 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
+        if (!basePrefix && prefix) {
+          value = value.replace(/var\(--/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;
@@ -140,3 +141,4 @@ }
     }
-  });
+  }, keys => keys[0] === 'vars' // skip 'vars/*' paths
+  );
   return {
@@ -143,0 +145,0 @@ css,

modern/cssVars/getInitColorSchemeScript.js

@@ -37,3 +37,3 @@ import * as React from 'react';
         if (colorScheme) {
-          document.body.setAttribute('${attribute}', colorScheme);
+          document.documentElement.setAttribute('${attribute}', colorScheme);
         }
@@ -40,0 +40,0 @@ } catch (e) {} })();`

modern/index.js

@@ -1,2 +0,2 @@
-/** @license MUI v5.2.2
+/** @license MUI v5.2.3
  *
@@ -3,0 +3,0 @@ * This source code is licensed under the MIT license found in the

modern/useThemeProps/getThemeProps.js

@@ -1,4 +0,2 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
-
-/* eslint-disable no-restricted-syntax */
+import { internal_resolveProps as resolveProps } from '@mui/utils';
 export default function getThemeProps(params) {
@@ -15,16 +13,3 @@ const {
 
-  const output = _extends({}, props); // Resolve default props, code borrow from React source.
-  // https://github.com/facebook/react/blob/15a8f031838a553e41c0b66eb1bcf1da8448104d/packages/react/src/ReactElement.js#L221
-
-
-  const defaultProps = theme.components[name].defaultProps;
-  let propName;
-
-  for (propName in defaultProps) {
-    if (output[propName] === undefined) {
-      output[propName] = defaultProps[propName];
-    }
-  }
-
-  return output;
+  return resolveProps(theme.components[name].defaultProps, props);
 }

package.json

 {
   "name": "@mui/system",
-  "version": "5.2.2",
+  "version": "5.2.3",
   "private": false,
@@ -26,3 +26,3 @@ "author": "MUI Team",
     "type": "opencollective",
-    "url": "https://opencollective.com/material-ui"
+    "url": "https://opencollective.com/mui"
   },
@@ -48,6 +48,6 @@ "peerDependencies": {
     "@babel/runtime": "^7.16.3",
-    "@mui/private-theming": "^5.2.2",
+    "@mui/private-theming": "^5.2.3",
     "@mui/styled-engine": "^5.2.0",
     "@mui/types": "^7.1.0",
-    "@mui/utils": "^5.2.2",
+    "@mui/utils": "^5.2.3",
     "clsx": "^1.1.1",
@@ -54,0 +54,0 @@ "csstype": "^3.0.10",

styleFunctionSx/styleFunctionSx.d.ts

@@ -60,5 +60,5 @@ import * as CSS from 'csstype';
   | ((theme: Theme) => SystemStyleObject<Theme>)
-  | Array<SystemStyleObject<Theme> | ((theme: Theme) => SystemStyleObject<Theme>)>;
+  | Array<boolean | SystemStyleObject<Theme> | ((theme: Theme) => SystemStyleObject<Theme>)>;
 
 // eslint-disable-next-line @typescript-eslint/naming-convention
 export default function unstable_styleFunctionSx(props: object): object;

styleFunctionSx/styleFunctionSx.spec.d.ts

 export {};

useThemeProps/getThemeProps.js

 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
@@ -10,5 +8,4 @@ value: true
 
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _utils = require("@mui/utils");
 
-/* eslint-disable no-restricted-syntax */
 function getThemeProps(params) {
@@ -25,15 +22,3 @@ const {
 
-  const output = (0, _extends2.default)({}, props); // Resolve default props, code borrow from React source.
-  // https://github.com/facebook/react/blob/15a8f031838a553e41c0b66eb1bcf1da8448104d/packages/react/src/ReactElement.js#L221
-
-  const defaultProps = theme.components[name].defaultProps;
-  let propName;
-
-  for (propName in defaultProps) {
-    if (output[propName] === undefined) {
-      output[propName] = defaultProps[propName];
-    }
-  }
-
-  return output;
+  return (0, _utils.internal_resolveProps)(theme.components[name].defaultProps, props);
 }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

767552

increased by1.05%

Number of package files

241

increased by0.42%

Lines of code

11123

increased by0.25%

Dependency changes

• Updated@mui/private-theming@^5.2.3

• Updated@mui/utils@^5.2.3