@mui/system 5.2.0 → 5.2.4

package/modern/cssVars/cssVarsParser.js

@@ -1,5 +1,3 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
-
 /**
  * This function create an object from keys, value and then assign to target
  *
@@ -45,14 +43,16 @@ export const assignNestedKeys = (obj, keys, value) => {
  * // ['palette', 'primary', 'main'] '#000000'
  */
 
-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);
+          }
         }
       }
     });
@@ -64,7 +64,7 @@ export const walkObjectDeep = (obj, callback) => {
 const getCssValue = (keys, value) => {
   if (typeof value === 'number') {
     if (['lineHeight', 'fontWeight', 'opacity', 'zIndex'].some(prop => keys.includes(prop))) {
-      // css property that are unitless
+      // CSS property that are unitless
       return value;
     }
 
@@ -102,10 +102,6 @@ const getCssValue = (keys, value) => {
 
 
 export default function cssVarsParser(theme, options) {
-  const clonedTheme = _extends({}, theme);
-
-  delete clonedTheme.vars; // remove 'vars' from the structure
-
   const {
     prefix,
     basePrefix = '',
@@ -113,13 +109,18 @@ export default function cssVarsParser(theme, options) {
   } = options || {};
   const css = {};
   const vars = {};
-  walkObjectDeep(clonedTheme, (keys, val, scope) => {
+  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
-        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;
       }
@@ -133,7 +134,8 @@ export default function cssVarsParser(theme, options) {
         assignNestedKeys(vars, keys, `var(${cssVar})`);
       }
     }
-  });
+  }, keys => keys[0] === 'vars' // skip 'vars/*' paths
+  );
   return {
     css,
     vars

package/modern/cssVars/getInitColorSchemeScript.js

@@ -34,7 +34,7 @@ export default function getInitColorSchemeScript(options) {
           colorScheme = localStorage.getItem('${colorSchemeStorageKey}-dark') || '${defaultDarkColorScheme}';
         }
         if (colorScheme) {
-          document.body.setAttribute('${attribute}', colorScheme);
+          document.documentElement.setAttribute('${attribute}', colorScheme);
         }
       } catch (e) {} })();`
     }

package/modern/index.js

@@ -1,4 +1,4 @@
-/** @license MUI v5.2.0
+/** @license MUI v5.2.4
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
@@ -27,6 +27,7 @@ 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 experimental_sx } from './sx';
 export { default as unstable_getThemeValue } from './getThemeValue';
 export { default as Box } from './Box';
 export { default as createBox } from './createBox';

package/modern/sx/index.js

@@ -0,0 +1 @@
+export { default } from './sx';

package/modern/sx/sx.js

@@ -0,0 +1,12 @@
+import styleFunctionSx from '../styleFunctionSx';
+
+function sx(styles) {
+  return ({
+    theme
+  }) => styleFunctionSx({
+    sx: styles,
+    theme
+  });
+}
+
+export default sx;

package/modern/useThemeProps/getThemeProps.js

@@ -1,6 +1,4 @@
-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) {
   const {
     theme,
@@ -12,18 +10,5 @@ export default function getThemeProps(params) {
     return props;
   }
 
-  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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/system",
-  "version": "5.2.0",
+  "version": "5.2.4",
   "private": false,
   "author": "MUI Team",
   "description": "CSS utilities for rapidly laying out custom designs.",
@@ -23,7 +23,7 @@
   "homepage": "https://mui.com/system/basics/",
   "funding": {
     "type": "opencollective",
-    "url": "https://opencollective.com/material-ui"
+    "url": "https://opencollective.com/mui"
   },
   "peerDependencies": {
     "@emotion/react": "^11.5.0",
@@ -44,10 +44,10 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.16.3",
-    "@mui/private-theming": "^5.2.0",
-    "@mui/styled-engine": "^5.2.0",
+    "@mui/private-theming": "^5.2.3",
+    "@mui/styled-engine": "^5.2.4",
     "@mui/types": "^7.1.0",
-    "@mui/utils": "^5.2.0",
+    "@mui/utils": "^5.2.3",
     "clsx": "^1.1.1",
     "csstype": "^3.0.10",
     "prop-types": "^15.7.2"

package/styleFunctionSx/styleFunctionSx.d.ts

@@ -57,7 +57,7 @@ export type SystemStyleObject<Theme extends object = {}> =
 export type SxProps<Theme extends object = {}> =
   | SystemStyleObject<Theme>
   | ((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;

package/styleFunctionSx/styleFunctionSx.spec.d.ts

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

package/sx/index.d.ts

@@ -0,0 +1 @@
+export { default } from './sx';

package/sx/index.js

@@ -0,0 +1,15 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function () {
+    return _sx.default;
+  }
+});
+
+var _sx = _interopRequireDefault(require("./sx"));

package/sx/package.json

@@ -0,0 +1,6 @@
+{
+  "sideEffects": false,
+  "module": "../esm/sx/index.js",
+  "main": "./index.js",
+  "types": "./index.d.ts"
+}

package/sx/sx.d.ts

@@ -0,0 +1,4 @@
+import { CSSObject } from '@mui/styled-engine';
+import { SxProps } from '../styleFunctionSx';
+
+export default function sx<T extends object = {}>(styles: SxProps<T>): CSSObject;

package/sx/sx.js

@@ -0,0 +1,22 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _styleFunctionSx = _interopRequireDefault(require("../styleFunctionSx"));
+
+function sx(styles) {
+  return ({
+    theme
+  }) => (0, _styleFunctionSx.default)({
+    sx: styles,
+    theme
+  });
+}
+
+var _default = sx;
+exports.default = _default;

package/useThemeProps/getThemeProps.js

@@ -1,15 +1,12 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = getThemeProps;
 
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _utils = require("@mui/utils");
 
-/* eslint-disable no-restricted-syntax */
 function getThemeProps(params) {
   const {
     theme,
@@ -21,17 +18,5 @@ function getThemeProps(params) {
     return props;
   }
 
-  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);
 }