@mui/system - npm Package Compare versions

Comparing version 5.6.3 to 5.6.4

Box/Box.spec.d.ts

 export {};

createBox.spec.d.ts

 export {};

createStyled.js

@@ -163,3 +163,5 @@ "use strict";
             Object.entries(styleOverrides).forEach(([slotKey, slotStyle]) => {
-              resolvedStyleOverrides[slotKey] = typeof slotStyle === 'function' ? slotStyle(props) : slotStyle;
+              resolvedStyleOverrides[slotKey] = typeof slotStyle === 'function' ? slotStyle((0, _extends2.default)({}, props, {
+                theme
+              })) : slotStyle;
             });
@@ -166,0 +168,0 @@ return overridesResolver(props, resolvedStyleOverrides);

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.js

@@ -23,6 +23,2 @@ "use strict";
 
-var _createSpacing = _interopRequireDefault(require("../createTheme/createSpacing"));
-
-var _createBreakpoints = _interopRequireDefault(require("../createTheme/createBreakpoints"));
-
 var _cssVarsParser = _interopRequireDefault(require("./cssVarsParser"));
@@ -40,5 +36,3 @@
 
-const _excluded = ["colorSchemes"],
-      _excluded2 = ["colorSchemes"],
-      _excluded3 = ["components"];
+const _excluded = ["colorSchemes", "components"];
 
@@ -53,6 +47,4 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function createCssVarsProvider(options) {
-  var _baseTheme$breakpoint;
-
   const {
-    theme: baseTheme = {},
+    theme: defaultTheme = {},
     defaultMode: desisgnSystemMode = 'light',
@@ -66,6 +58,4 @@ defaultColorScheme: designSystemColorScheme,
   } = options;
-  const systemSpacing = (0, _createSpacing.default)(baseTheme.spacing);
-  const systemBreakpoints = (0, _createBreakpoints.default)((_baseTheme$breakpoint = baseTheme.breakpoints) != null ? _baseTheme$breakpoint : {});
 
-  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]) {
+  if (!defaultTheme.colorSchemes || typeof designSystemColorScheme === 'string' && !defaultTheme.colorSchemes[designSystemColorScheme] || typeof designSystemColorScheme === 'object' && !defaultTheme.colorSchemes[designSystemColorScheme == null ? void 0 : designSystemColorScheme.light] || typeof designSystemColorScheme === 'object' && !defaultTheme.colorSchemes[designSystemColorScheme == null ? void 0 : designSystemColorScheme.dark]) {
     console.error(`MUI: \`${designSystemColorScheme}\` does not exist in \`theme.colorSchemes\`.`);
@@ -88,3 +78,3 @@ }
     children,
-    theme: themeProp = {},
+    theme: themeProp = defaultTheme,
     prefix = designSystemPrefix,
@@ -98,19 +88,8 @@ modeStorageKey = _getInitColorSchemeScript.DEFAULT_MODE_STORAGE_KEY,
   }) {
+    const hasMounted = React.useRef(false);
     const {
-      colorSchemes: baseColorSchemes = {}
-    } = baseTheme,
-          restBaseTheme = (0, _objectWithoutPropertiesLoose2.default)(baseTheme, _excluded);
-    const {
-      colorSchemes: colorSchemesProp = {}
+      colorSchemes = {},
+      components = {}
     } = themeProp,
-          restThemeProp = (0, _objectWithoutPropertiesLoose2.default)(themeProp, _excluded2);
-    const hasMounted = React.useRef(false); // eslint-disable-next-line prefer-const
-
-    let _deepmerge = (0, _utils.deepmerge)(restBaseTheme, restThemeProp),
-        {
-      components = {}
-    } = _deepmerge,
-        mergedTheme = (0, _objectWithoutPropertiesLoose2.default)(_deepmerge, _excluded3);
-
-    const colorSchemes = (0, _utils.deepmerge)(baseColorSchemes, colorSchemesProp);
+          restThemeProp = (0, _objectWithoutPropertiesLoose2.default)(themeProp, _excluded);
     const allColorSchemes = Object.keys(colorSchemes);
@@ -149,2 +128,3 @@ const defaultLightColorScheme = typeof defaultColorScheme === 'string' ? defaultColorScheme : defaultColorScheme.light;
 
+    let theme = restThemeProp;
     const {
@@ -154,3 +134,3 @@ css: rootCss,
       parsedTheme
-    } = (0, _cssVarsParser.default)(mergedTheme, {
+    } = (0, _cssVarsParser.default)(theme, {
       prefix,
@@ -160,3 +140,3 @@ basePrefix: designSystemPrefix,
     });
-    mergedTheme = (0, _extends2.default)({}, parsedTheme, {
+    theme = (0, _extends2.default)({}, parsedTheme, {
       components,
@@ -166,4 +146,2 @@ colorSchemes,
       vars: rootVars,
-      spacing: themeProp.spacing ? (0, _createSpacing.default)(themeProp.spacing) : systemSpacing,
-      breakpoints: themeProp.breakpoints ? (0, _createBreakpoints.default)(themeProp.breakpoints) : systemBreakpoints,
       getCssVar: (0, _createGetCssVar.default)(prefix)
@@ -182,6 +160,12 @@ });
       });
-      mergedTheme.vars = (0, _utils.deepmerge)(mergedTheme.vars, vars);
+      theme.vars = (0, _utils.deepmerge)(theme.vars, vars);
 
       if (key === resolvedColorScheme) {
-        mergedTheme = (0, _extends2.default)({}, mergedTheme, parsedScheme);
+        theme = (0, _extends2.default)({}, theme, parsedScheme);
+
+        if (theme.palette) {
+          // assign runtime mode & colorScheme
+          theme.palette.mode = mode;
+          theme.palette.colorScheme = resolvedColorScheme;
+        }
       }
@@ -273,3 +257,3 @@
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ThemeProvider.default, {
-        theme: resolveTheme ? resolveTheme(mergedTheme) : mergedTheme,
+        theme: resolveTheme ? resolveTheme(theme) : theme,
         children: children
@@ -276,0 +260,0 @@ })]

cssVars/createCssVarsProvider.spec.d.ts

 export {};

cssVars/createGetCssVar.d.ts

@@ -0,0 +0,0 @@ /**

cssVars/cssVarsParser.d.ts

@@ -21,3 +21,3 @@ declare type NestedRecord<V = any> = {
  */
-export declare const assignNestedKeys: <Object_1 = NestedRecord<any>, Value = any>(obj: Object_1, keys: Array<string>, value: Value) => void;
+export declare const assignNestedKeys: <Object_1 = NestedRecord<any>, Value = any>(obj: Object_1, keys: Array<string>, value: Value, arrayKeys?: Array<string>) => void;
 /**
@@ -34,3 +34,3 @@ *
  */
-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;
+export declare const walkObjectDeep: <Value, T = Record<string, any>>(obj: T, callback: (keys: Array<string>, value: Value, arrayKeys: Array<string>) => void, shouldSkipPaths?: ((keys: Array<string>) => boolean) | undefined) => void;
 /**
@@ -37,0 +37,0 @@ * a function that parse theme and return { css, vars }

cssVars/cssVarsParser.js

@@ -27,7 +27,9 @@ "use strict";
  */
-const assignNestedKeys = (obj, keys, value) => {
+const assignNestedKeys = (obj, keys, value, arrayKeys = []) => {
   let temp = obj;
   keys.forEach((k, index) => {
     if (index === keys.length - 1) {
-      if (temp && typeof temp === 'object') {
+      if (Array.isArray(temp)) {
+        temp[Number(k)] = value;
+      } else if (temp && typeof temp === 'object') {
         temp[k] = value;
@@ -37,3 +39,3 @@ }
       if (!temp[k]) {
-        temp[k] = {};
+        temp[k] = arrayKeys.includes(k) ? [] : {};
       }
@@ -61,3 +63,3 @@
 const walkObjectDeep = (obj, callback, shouldSkipPaths) => {
-  function recurse(object, parentKeys = []) {
+  function recurse(object, parentKeys = [], arrayKeys = []) {
     Object.entries(object).forEach(([key, value]) => {
@@ -67,5 +69,5 @@ if (!shouldSkipPaths || shouldSkipPaths && !shouldSkipPaths([...parentKeys, key])) {
           if (typeof value === 'object' && Object.keys(value).length > 0) {
-            recurse(value, [...parentKeys, key]);
+            recurse(value, [...parentKeys, key], Array.isArray(value) ? [...arrayKeys, key] : arrayKeys);
           } else {
-            callback([...parentKeys, key], value, object);
+            callback([...parentKeys, key], value, arrayKeys);
           }
@@ -139,3 +141,3 @@ }
   const parsedTheme = {};
-  walkObjectDeep(theme, (keys, value) => {
+  walkObjectDeep(theme, (keys, value, arrayKeys) => {
     if (typeof value === 'string' || typeof value === 'number') {
@@ -158,7 +160,7 @@ if (typeof value === 'string' && value.match(/var\(\s*--/)) {
         });
-        assignNestedKeys(vars, keys, `var(${cssVar})`);
+        assignNestedKeys(vars, keys, `var(${cssVar})`, arrayKeys);
       }
     }
 
-    assignNestedKeys(parsedTheme, keys, value);
+    assignNestedKeys(parsedTheme, keys, value, arrayKeys);
   }, keys => keys[0] === 'vars' // skip 'vars/*' paths
@@ -165,0 +167,0 @@ );

cssVars/getInitColorSchemeScript.d.ts

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

cssVars/index.d.ts

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

cssVars/useCurrentColorScheme.d.ts

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

esm/createStyled.js

@@ -145,3 +145,5 @@ import _extends from "@babel/runtime/helpers/esm/extends";
             Object.entries(styleOverrides).forEach(([slotKey, slotStyle]) => {
-              resolvedStyleOverrides[slotKey] = typeof slotStyle === 'function' ? slotStyle(props) : slotStyle;
+              resolvedStyleOverrides[slotKey] = typeof slotStyle === 'function' ? slotStyle(_extends({}, props, {
+                theme
+              })) : slotStyle;
             });
@@ -148,0 +150,0 @@ return overridesResolver(props, resolvedStyleOverrides);

esm/cssVars/createCssVarsProvider.js

 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"],
-      _excluded3 = ["components"];
+const _excluded = ["colorSchemes", "components"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
+import { deepmerge, unstable_useEnhancedEffect as useEnhancedEffect } from '@mui/utils';
 import { GlobalStyles } from '@mui/styled-engine';
-import { deepmerge, unstable_useEnhancedEffect as useEnhancedEffect } from '@mui/utils';
-import createSpacing from '../createTheme/createSpacing';
-import createBreakpoints from '../createTheme/createBreakpoints';
 import cssVarsParser from './cssVarsParser';
@@ -22,6 +18,4 @@ import ThemeProvider from '../ThemeProvider';
 export default function createCssVarsProvider(options) {
-  var _baseTheme$breakpoint;
-
   const {
-    theme: baseTheme = {},
+    theme: defaultTheme = {},
     defaultMode: desisgnSystemMode = 'light',
@@ -35,6 +29,4 @@ defaultColorScheme: designSystemColorScheme,
   } = options;
-  const systemSpacing = createSpacing(baseTheme.spacing);
-  const systemBreakpoints = createBreakpoints((_baseTheme$breakpoint = baseTheme.breakpoints) != null ? _baseTheme$breakpoint : {});
 
-  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]) {
+  if (!defaultTheme.colorSchemes || typeof designSystemColorScheme === 'string' && !defaultTheme.colorSchemes[designSystemColorScheme] || typeof designSystemColorScheme === 'object' && !defaultTheme.colorSchemes[designSystemColorScheme == null ? void 0 : designSystemColorScheme.light] || typeof designSystemColorScheme === 'object' && !defaultTheme.colorSchemes[designSystemColorScheme == null ? void 0 : designSystemColorScheme.dark]) {
     console.error(`MUI: \`${designSystemColorScheme}\` does not exist in \`theme.colorSchemes\`.`);
@@ -57,3 +49,3 @@ }
     children,
-    theme: themeProp = {},
+    theme: themeProp = defaultTheme,
     prefix = designSystemPrefix,
@@ -67,21 +59,10 @@ modeStorageKey = DEFAULT_MODE_STORAGE_KEY,
   }) {
-    const {
-      colorSchemes: baseColorSchemes = {}
-    } = baseTheme,
-          restBaseTheme = _objectWithoutPropertiesLoose(baseTheme, _excluded);
+    const hasMounted = React.useRef(false);
 
     const {
-      colorSchemes: colorSchemesProp = {}
+      colorSchemes = {},
+      components = {}
     } = themeProp,
-          restThemeProp = _objectWithoutPropertiesLoose(themeProp, _excluded2);
+          restThemeProp = _objectWithoutPropertiesLoose(themeProp, _excluded);
 
-    const hasMounted = React.useRef(false); // eslint-disable-next-line prefer-const
-
-    let _deepmerge = deepmerge(restBaseTheme, restThemeProp),
-        {
-      components = {}
-    } = _deepmerge,
-        mergedTheme = _objectWithoutPropertiesLoose(_deepmerge, _excluded3);
-
-    const colorSchemes = deepmerge(baseColorSchemes, colorSchemesProp);
     const allColorSchemes = Object.keys(colorSchemes);
@@ -120,2 +101,3 @@ const defaultLightColorScheme = typeof defaultColorScheme === 'string' ? defaultColorScheme : defaultColorScheme.light;
 
+    let theme = restThemeProp;
     const {
@@ -125,3 +107,3 @@ css: rootCss,
       parsedTheme
-    } = cssVarsParser(mergedTheme, {
+    } = cssVarsParser(theme, {
       prefix,
@@ -131,3 +113,3 @@ basePrefix: designSystemPrefix,
     });
-    mergedTheme = _extends({}, parsedTheme, {
+    theme = _extends({}, parsedTheme, {
       components,
@@ -137,4 +119,2 @@ colorSchemes,
       vars: rootVars,
-      spacing: themeProp.spacing ? createSpacing(themeProp.spacing) : systemSpacing,
-      breakpoints: themeProp.breakpoints ? createBreakpoints(themeProp.breakpoints) : systemBreakpoints,
       getCssVar: createGetCssVar(prefix)
@@ -153,6 +133,12 @@ });
       });
-      mergedTheme.vars = deepmerge(mergedTheme.vars, vars);
+      theme.vars = deepmerge(theme.vars, vars);
 
       if (key === resolvedColorScheme) {
-        mergedTheme = _extends({}, mergedTheme, parsedScheme);
+        theme = _extends({}, theme, parsedScheme);
+
+        if (theme.palette) {
+          // assign runtime mode & colorScheme
+          theme.palette.mode = mode;
+          theme.palette.colorScheme = resolvedColorScheme;
+        }
       }
@@ -244,3 +230,3 @@
       }), /*#__PURE__*/_jsx(ThemeProvider, {
-        theme: resolveTheme ? resolveTheme(mergedTheme) : mergedTheme,
+        theme: resolveTheme ? resolveTheme(theme) : theme,
         children: children
@@ -247,0 +233,0 @@ })]

esm/cssVars/cssVarsParser.js

@@ -18,7 +18,9 @@ /**
  */
-export const assignNestedKeys = (obj, keys, value) => {
+export const assignNestedKeys = (obj, keys, value, arrayKeys = []) => {
   let temp = obj;
   keys.forEach((k, index) => {
     if (index === keys.length - 1) {
-      if (temp && typeof temp === 'object') {
+      if (Array.isArray(temp)) {
+        temp[Number(k)] = value;
+      } else if (temp && typeof temp === 'object') {
         temp[k] = value;
@@ -28,3 +30,3 @@ }
       if (!temp[k]) {
-        temp[k] = {};
+        temp[k] = arrayKeys.includes(k) ? [] : {};
       }
@@ -49,3 +51,3 @@
 export const walkObjectDeep = (obj, callback, shouldSkipPaths) => {
-  function recurse(object, parentKeys = []) {
+  function recurse(object, parentKeys = [], arrayKeys = []) {
     Object.entries(object).forEach(([key, value]) => {
@@ -55,5 +57,5 @@ if (!shouldSkipPaths || shouldSkipPaths && !shouldSkipPaths([...parentKeys, key])) {
           if (typeof value === 'object' && Object.keys(value).length > 0) {
-            recurse(value, [...parentKeys, key]);
+            recurse(value, [...parentKeys, key], Array.isArray(value) ? [...arrayKeys, key] : arrayKeys);
           } else {
-            callback([...parentKeys, key], value, object);
+            callback([...parentKeys, key], value, arrayKeys);
           }
@@ -125,3 +127,3 @@ }
   const parsedTheme = {};
-  walkObjectDeep(theme, (keys, value) => {
+  walkObjectDeep(theme, (keys, value, arrayKeys) => {
     if (typeof value === 'string' || typeof value === 'number') {
@@ -144,7 +146,7 @@ if (typeof value === 'string' && value.match(/var\(\s*--/)) {
         });
-        assignNestedKeys(vars, keys, `var(${cssVar})`);
+        assignNestedKeys(vars, keys, `var(${cssVar})`, arrayKeys);
       }
     }
 
-    assignNestedKeys(parsedTheme, keys, value);
+    assignNestedKeys(parsedTheme, keys, value, arrayKeys);
   }, keys => keys[0] === 'vars' // skip 'vars/*' paths
@@ -151,0 +153,0 @@ );

index.js

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

index.spec.d.ts

 export {};

legacy/createStyled.js

@@ -152,3 +152,5 @@ import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
 
-              resolvedStyleOverrides[slotKey] = typeof slotStyle === 'function' ? slotStyle(props) : slotStyle;
+              resolvedStyleOverrides[slotKey] = typeof slotStyle === 'function' ? slotStyle(_extends({}, props, {
+                theme: theme
+              })) : slotStyle;
             });
@@ -155,0 +157,0 @@ return overridesResolver(props, resolvedStyleOverrides);

legacy/cssVars/createCssVarsProvider.js

@@ -8,6 +8,4 @@ import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import PropTypes from 'prop-types';
+import { deepmerge, unstable_useEnhancedEffect as useEnhancedEffect } from '@mui/utils';
 import { GlobalStyles } from '@mui/styled-engine';
-import { deepmerge, unstable_useEnhancedEffect as useEnhancedEffect } from '@mui/utils';
-import createSpacing from '../createTheme/createSpacing';
-import createBreakpoints from '../createTheme/createBreakpoints';
 import cssVarsParser from './cssVarsParser';
@@ -22,6 +20,4 @@ import ThemeProvider from '../ThemeProvider';
 export default function createCssVarsProvider(options) {
-  var _baseTheme$breakpoint;
-
   var _options$theme = options.theme,
-      baseTheme = _options$theme === void 0 ? {} : _options$theme,
+      defaultTheme = _options$theme === void 0 ? {} : _options$theme,
       _options$defaultMode = options.defaultMode,
@@ -38,6 +34,4 @@ desisgnSystemMode = _options$defaultMode === void 0 ? 'light' : _options$defaultMode,
       resolveTheme = options.resolveTheme;
-  var systemSpacing = createSpacing(baseTheme.spacing);
-  var systemBreakpoints = createBreakpoints((_baseTheme$breakpoint = baseTheme.breakpoints) != null ? _baseTheme$breakpoint : {});
 
-  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]) {
+  if (!defaultTheme.colorSchemes || typeof designSystemColorScheme === 'string' && !defaultTheme.colorSchemes[designSystemColorScheme] || _typeof(designSystemColorScheme) === 'object' && !defaultTheme.colorSchemes[designSystemColorScheme == null ? void 0 : designSystemColorScheme.light] || _typeof(designSystemColorScheme) === 'object' && !defaultTheme.colorSchemes[designSystemColorScheme == null ? void 0 : designSystemColorScheme.dark]) {
     console.error("MUI: `".concat(designSystemColorScheme, "` does not exist in `theme.colorSchemes`."));
@@ -61,3 +55,3 @@ }
         _ref$theme = _ref.theme,
-        themeProp = _ref$theme === void 0 ? {} : _ref$theme,
+        themeProp = _ref$theme === void 0 ? defaultTheme : _ref$theme,
         _ref$prefix = _ref.prefix,
@@ -77,19 +71,10 @@ prefix = _ref$prefix === void 0 ? designSystemPrefix : _ref$prefix,
         enableColorScheme = _ref$enableColorSchem === void 0 ? designSystemEnableColorScheme : _ref$enableColorSchem;
+    var hasMounted = React.useRef(false);
 
-    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,
-        restThemeProp = _objectWithoutProperties(themeProp, ["colorSchemes"]);
+        colorSchemes = _themeProp$colorSchem === void 0 ? {} : _themeProp$colorSchem,
+        _themeProp$components = themeProp.components,
+        components = _themeProp$components === void 0 ? {} : _themeProp$components,
+        restThemeProp = _objectWithoutProperties(themeProp, ["colorSchemes", "components"]);
 
-    var hasMounted = React.useRef(false); // eslint-disable-next-line prefer-const
-
-    var _deepmerge = deepmerge(restBaseTheme, restThemeProp),
-        _deepmerge$components = _deepmerge.components,
-        components = _deepmerge$components === void 0 ? {} : _deepmerge$components,
-        mergedTheme = _objectWithoutProperties(_deepmerge, ["components"]);
-
-    var colorSchemes = deepmerge(baseColorSchemes, colorSchemesProp);
     var allColorSchemes = Object.keys(colorSchemes);
@@ -128,3 +113,5 @@ var defaultLightColorScheme = typeof defaultColorScheme === 'string' ? defaultColorScheme : defaultColorScheme.light;
 
-    var _cssVarsParser = cssVarsParser(mergedTheme, {
+    var theme = restThemeProp;
+
+    var _cssVarsParser = cssVarsParser(theme, {
       prefix: prefix,
@@ -138,3 +125,3 @@ basePrefix: designSystemPrefix,
 
-    mergedTheme = _extends({}, parsedTheme, {
+    theme = _extends({}, parsedTheme, {
       components: components,
@@ -144,4 +131,2 @@ colorSchemes: colorSchemes,
       vars: rootVars,
-      spacing: themeProp.spacing ? createSpacing(themeProp.spacing) : systemSpacing,
-      breakpoints: themeProp.breakpoints ? createBreakpoints(themeProp.breakpoints) : systemBreakpoints,
       getCssVar: createGetCssVar(prefix)
@@ -164,6 +149,12 @@ });
 
-      mergedTheme.vars = deepmerge(mergedTheme.vars, vars);
+      theme.vars = deepmerge(theme.vars, vars);
 
       if (key === resolvedColorScheme) {
-        mergedTheme = _extends({}, mergedTheme, parsedScheme);
+        theme = _extends({}, theme, parsedScheme);
+
+        if (theme.palette) {
+          // assign runtime mode & colorScheme
+          theme.palette.mode = mode;
+          theme.palette.colorScheme = resolvedColorScheme;
+        }
       }
@@ -257,3 +248,3 @@
       }), /*#__PURE__*/_jsx(ThemeProvider, {
-        theme: resolveTheme ? resolveTheme(mergedTheme) : mergedTheme,
+        theme: resolveTheme ? resolveTheme(theme) : theme,
         children: children
@@ -260,0 +251,0 @@ })]

legacy/cssVars/cssVarsParser.js

@@ -25,6 +25,9 @@ import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 export var assignNestedKeys = function assignNestedKeys(obj, keys, value) {
+  var arrayKeys = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : [];
   var temp = obj;
   keys.forEach(function (k, index) {
     if (index === keys.length - 1) {
-      if (temp && _typeof(temp) === 'object') {
+      if (Array.isArray(temp)) {
+        temp[Number(k)] = value;
+      } else if (temp && _typeof(temp) === 'object') {
         temp[k] = value;
@@ -34,3 +37,3 @@ }
       if (!temp[k]) {
-        temp[k] = {};
+        temp[k] = arrayKeys.includes(k) ? [] : {};
       }
@@ -57,2 +60,3 @@
     var parentKeys = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
+    var arrayKeys = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : [];
     Object.entries(object).forEach(function (_ref) {
@@ -66,5 +70,5 @@ var _ref2 = _slicedToArray(_ref, 2),
           if (_typeof(value) === 'object' && Object.keys(value).length > 0) {
-            recurse(value, [].concat(_toConsumableArray(parentKeys), [key]));
+            recurse(value, [].concat(_toConsumableArray(parentKeys), [key]), Array.isArray(value) ? [].concat(_toConsumableArray(arrayKeys), [key]) : arrayKeys);
           } else {
-            callback([].concat(_toConsumableArray(parentKeys), [key]), value, object);
+            callback([].concat(_toConsumableArray(parentKeys), [key]), value, arrayKeys);
           }
@@ -139,3 +143,3 @@ }
   var parsedTheme = {};
-  walkObjectDeep(theme, function (keys, value) {
+  walkObjectDeep(theme, function (keys, value, arrayKeys) {
     if (typeof value === 'string' || typeof value === 'number') {
@@ -158,7 +162,7 @@ if (typeof value === 'string' && value.match(/var\(\s*--/)) {
 
-        assignNestedKeys(vars, keys, "var(".concat(cssVar, ")"));
+        assignNestedKeys(vars, keys, "var(".concat(cssVar, ")"), arrayKeys);
       }
     }
 
-    assignNestedKeys(parsedTheme, keys, value);
+    assignNestedKeys(parsedTheme, keys, value, arrayKeys);
   }, function (keys) {
@@ -165,0 +169,0 @@ return keys[0] === 'vars';

legacy/index.js

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

modern/createStyled.js

@@ -143,3 +143,5 @@ import _extends from "@babel/runtime/helpers/esm/extends";
             Object.entries(styleOverrides).forEach(([slotKey, slotStyle]) => {
-              resolvedStyleOverrides[slotKey] = typeof slotStyle === 'function' ? slotStyle(props) : slotStyle;
+              resolvedStyleOverrides[slotKey] = typeof slotStyle === 'function' ? slotStyle(_extends({}, props, {
+                theme
+              })) : slotStyle;
             });
@@ -146,0 +148,0 @@ return overridesResolver(props, resolvedStyleOverrides);

modern/cssVars/createCssVarsProvider.js

 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"],
-      _excluded3 = ["components"];
+const _excluded = ["colorSchemes", "components"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
+import { deepmerge, unstable_useEnhancedEffect as useEnhancedEffect } from '@mui/utils';
 import { GlobalStyles } from '@mui/styled-engine';
-import { deepmerge, unstable_useEnhancedEffect as useEnhancedEffect } from '@mui/utils';
-import createSpacing from '../createTheme/createSpacing';
-import createBreakpoints from '../createTheme/createBreakpoints';
 import cssVarsParser from './cssVarsParser';
@@ -23,3 +19,3 @@ import ThemeProvider from '../ThemeProvider';
   const {
-    theme: baseTheme = {},
+    theme: defaultTheme = {},
     defaultMode: desisgnSystemMode = 'light',
@@ -33,6 +29,4 @@ defaultColorScheme: designSystemColorScheme,
   } = options;
-  const systemSpacing = createSpacing(baseTheme.spacing);
-  const systemBreakpoints = createBreakpoints(baseTheme.breakpoints ?? {});
 
-  if (!baseTheme.colorSchemes || typeof designSystemColorScheme === 'string' && !baseTheme.colorSchemes[designSystemColorScheme] || typeof designSystemColorScheme === 'object' && !baseTheme.colorSchemes[designSystemColorScheme?.light] || typeof designSystemColorScheme === 'object' && !baseTheme.colorSchemes[designSystemColorScheme?.dark]) {
+  if (!defaultTheme.colorSchemes || typeof designSystemColorScheme === 'string' && !defaultTheme.colorSchemes[designSystemColorScheme] || typeof designSystemColorScheme === 'object' && !defaultTheme.colorSchemes[designSystemColorScheme?.light] || typeof designSystemColorScheme === 'object' && !defaultTheme.colorSchemes[designSystemColorScheme?.dark]) {
     console.error(`MUI: \`${designSystemColorScheme}\` does not exist in \`theme.colorSchemes\`.`);
@@ -55,3 +49,3 @@ }
     children,
-    theme: themeProp = {},
+    theme: themeProp = defaultTheme,
     prefix = designSystemPrefix,
@@ -65,21 +59,10 @@ modeStorageKey = DEFAULT_MODE_STORAGE_KEY,
   }) {
-    const {
-      colorSchemes: baseColorSchemes = {}
-    } = baseTheme,
-          restBaseTheme = _objectWithoutPropertiesLoose(baseTheme, _excluded);
+    const hasMounted = React.useRef(false);
 
     const {
-      colorSchemes: colorSchemesProp = {}
+      colorSchemes = {},
+      components = {}
     } = themeProp,
-          restThemeProp = _objectWithoutPropertiesLoose(themeProp, _excluded2);
+          restThemeProp = _objectWithoutPropertiesLoose(themeProp, _excluded);
 
-    const hasMounted = React.useRef(false); // eslint-disable-next-line prefer-const
-
-    let _deepmerge = deepmerge(restBaseTheme, restThemeProp),
-        {
-      components = {}
-    } = _deepmerge,
-        mergedTheme = _objectWithoutPropertiesLoose(_deepmerge, _excluded3);
-
-    const colorSchemes = deepmerge(baseColorSchemes, colorSchemesProp);
     const allColorSchemes = Object.keys(colorSchemes);
@@ -118,2 +101,3 @@ const defaultLightColorScheme = typeof defaultColorScheme === 'string' ? defaultColorScheme : defaultColorScheme.light;
 
+    let theme = restThemeProp;
     const {
@@ -123,3 +107,3 @@ css: rootCss,
       parsedTheme
-    } = cssVarsParser(mergedTheme, {
+    } = cssVarsParser(theme, {
       prefix,
@@ -129,3 +113,3 @@ basePrefix: designSystemPrefix,
     });
-    mergedTheme = _extends({}, parsedTheme, {
+    theme = _extends({}, parsedTheme, {
       components,
@@ -135,4 +119,2 @@ colorSchemes,
       vars: rootVars,
-      spacing: themeProp.spacing ? createSpacing(themeProp.spacing) : systemSpacing,
-      breakpoints: themeProp.breakpoints ? createBreakpoints(themeProp.breakpoints) : systemBreakpoints,
       getCssVar: createGetCssVar(prefix)
@@ -151,6 +133,12 @@ });
       });
-      mergedTheme.vars = deepmerge(mergedTheme.vars, vars);
+      theme.vars = deepmerge(theme.vars, vars);
 
       if (key === resolvedColorScheme) {
-        mergedTheme = _extends({}, mergedTheme, parsedScheme);
+        theme = _extends({}, theme, parsedScheme);
+
+        if (theme.palette) {
+          // assign runtime mode & colorScheme
+          theme.palette.mode = mode;
+          theme.palette.colorScheme = resolvedColorScheme;
+        }
       }
@@ -242,3 +230,3 @@
       }), /*#__PURE__*/_jsx(ThemeProvider, {
-        theme: resolveTheme ? resolveTheme(mergedTheme) : mergedTheme,
+        theme: resolveTheme ? resolveTheme(theme) : theme,
         children: children
@@ -245,0 +233,0 @@ })]

modern/cssVars/cssVarsParser.js

@@ -18,7 +18,9 @@ /**
  */
-export const assignNestedKeys = (obj, keys, value) => {
+export const assignNestedKeys = (obj, keys, value, arrayKeys = []) => {
   let temp = obj;
   keys.forEach((k, index) => {
     if (index === keys.length - 1) {
-      if (temp && typeof temp === 'object') {
+      if (Array.isArray(temp)) {
+        temp[Number(k)] = value;
+      } else if (temp && typeof temp === 'object') {
         temp[k] = value;
@@ -28,3 +30,3 @@ }
       if (!temp[k]) {
-        temp[k] = {};
+        temp[k] = arrayKeys.includes(k) ? [] : {};
       }
@@ -49,3 +51,3 @@
 export const walkObjectDeep = (obj, callback, shouldSkipPaths) => {
-  function recurse(object, parentKeys = []) {
+  function recurse(object, parentKeys = [], arrayKeys = []) {
     Object.entries(object).forEach(([key, value]) => {
@@ -55,5 +57,5 @@ if (!shouldSkipPaths || shouldSkipPaths && !shouldSkipPaths([...parentKeys, key])) {
           if (typeof value === 'object' && Object.keys(value).length > 0) {
-            recurse(value, [...parentKeys, key]);
+            recurse(value, [...parentKeys, key], Array.isArray(value) ? [...arrayKeys, key] : arrayKeys);
           } else {
-            callback([...parentKeys, key], value, object);
+            callback([...parentKeys, key], value, arrayKeys);
           }
@@ -125,3 +127,3 @@ }
   const parsedTheme = {};
-  walkObjectDeep(theme, (keys, value) => {
+  walkObjectDeep(theme, (keys, value, arrayKeys) => {
     if (typeof value === 'string' || typeof value === 'number') {
@@ -144,7 +146,7 @@ if (typeof value === 'string' && value.match(/var\(\s*--/)) {
         });
-        assignNestedKeys(vars, keys, `var(${cssVar})`);
+        assignNestedKeys(vars, keys, `var(${cssVar})`, arrayKeys);
       }
     }
 
-    assignNestedKeys(parsedTheme, keys, value);
+    assignNestedKeys(parsedTheme, keys, value, arrayKeys);
   }, keys => keys[0] === 'vars' // skip 'vars/*' paths
@@ -151,0 +153,0 @@ );

modern/index.js

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

package.json

 {
   "name": "@mui/system",
-  "version": "5.6.3",
+  "version": "5.6.4",
   "private": false,
@@ -5,0 +5,0 @@ "author": "MUI Team",

styleFunctionSx/styleFunctionSx.spec.d.ts

 export {};

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

863156

increased by0.2%

Worsened metrics

Lines of code

11736

decreased by-0.2%

No dependency changes