@mui/system 5.3.0 → 5.4.3

package/legacy/styleFunctionSx/styleFunctionSx.js

@@ -1,7 +1,7 @@
-import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _typeof from "@babel/runtime/helpers/esm/typeof";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import merge from '../merge';
-import getThemeValue, { propToStyleFunction } from '../getThemeValue';
+import { styleFunctionMapping as defaultStyleFunctionMapping } from '../getThemeValue';
 import { handleBreakpoints, createEmptyBreakpointObject, removeUnusedBreakpoints } from '../breakpoints';
 
 function objectsHaveSameKeys() {
@@ -20,70 +20,95 @@ function objectsHaveSameKeys() {
 
 function callIfFn(maybeFn, arg) {
   return typeof maybeFn === 'function' ? maybeFn(arg) : maybeFn;
-}
+} // eslint-disable-next-line @typescript-eslint/naming-convention
 
-function styleFunctionSx(props) {
-  var _ref = props || {},
-      sx = _ref.sx,
-      _ref$theme = _ref.theme,
-      theme = _ref$theme === void 0 ? {} : _ref$theme;
 
-  if (!sx) {
-    return null; // emotion & styled-components will neglect null
-  }
-  /*
-   * Receive `sxInput` as object or callback
-   * and then recursively check keys & values to create media query object styles.
-   * (the result will be used in `styled`)
-   */
+export function unstable_createStyleFunctionSx() {
+  var styleFunctionMapping = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : defaultStyleFunctionMapping;
+  var propToStyleFunction = Object.keys(styleFunctionMapping).reduce(function (acc, styleFnName) {
+    styleFunctionMapping[styleFnName].filterProps.forEach(function (propName) {
+      acc[propName] = styleFunctionMapping[styleFnName];
+    });
+    return acc;
+  }, {});
+
+  function getThemeValue(prop, value, theme) {
+    var _inputProps;
 
+    var inputProps = (_inputProps = {}, _defineProperty(_inputProps, prop, value), _defineProperty(_inputProps, "theme", theme), _inputProps);
+    var styleFunction = propToStyleFunction[prop];
+    return styleFunction ? styleFunction(inputProps) : _defineProperty({}, prop, value);
+  }
 
-  function traverse(sxInput) {
-    var sxObject = sxInput;
+  function styleFunctionSx(props) {
+    var _ref2 = props || {},
+        sx = _ref2.sx,
+        _ref2$theme = _ref2.theme,
+        theme = _ref2$theme === void 0 ? {} : _ref2$theme;
 
-    if (typeof sxInput === 'function') {
-      sxObject = sxInput(theme);
-    } else if (_typeof(sxInput) !== 'object') {
-      // value
-      return sxInput;
+    if (!sx) {
+      return null; // emotion & styled-components will neglect null
     }
+    /*
+     * Receive `sxInput` as object or callback
+     * and then recursively check keys & values to create media query object styles.
+     * (the result will be used in `styled`)
+     */
 
-    var emptyBreakpoints = createEmptyBreakpointObject(theme.breakpoints);
-    var breakpointsKeys = Object.keys(emptyBreakpoints);
-    var css = emptyBreakpoints;
-    Object.keys(sxObject).forEach(function (styleKey) {
-      var value = callIfFn(sxObject[styleKey], theme);
 
-      if (value !== null && value !== undefined) {
-        if (_typeof(value) === 'object') {
-          if (propToStyleFunction[styleKey]) {
-            css = merge(css, getThemeValue(styleKey, value, theme));
-          } else {
-            var breakpointsValues = handleBreakpoints({
-              theme: theme
-            }, value, function (x) {
-              return _defineProperty({}, styleKey, x);
-            });
-
-            if (objectsHaveSameKeys(breakpointsValues, value)) {
-              css[styleKey] = styleFunctionSx({
-                sx: value,
+    function traverse(sxInput) {
+      var sxObject = sxInput;
+
+      if (typeof sxInput === 'function') {
+        sxObject = sxInput(theme);
+      } else if (_typeof(sxInput) !== 'object') {
+        // value
+        return sxInput;
+      }
+
+      if (!sxObject) {
+        return null;
+      }
+
+      var emptyBreakpoints = createEmptyBreakpointObject(theme.breakpoints);
+      var breakpointsKeys = Object.keys(emptyBreakpoints);
+      var css = emptyBreakpoints;
+      Object.keys(sxObject).forEach(function (styleKey) {
+        var value = callIfFn(sxObject[styleKey], theme);
+
+        if (value !== null && value !== undefined) {
+          if (_typeof(value) === 'object') {
+            if (propToStyleFunction[styleKey]) {
+              css = merge(css, getThemeValue(styleKey, value, theme));
+            } else {
+              var breakpointsValues = handleBreakpoints({
                 theme: theme
+              }, value, function (x) {
+                return _defineProperty({}, styleKey, x);
               });
-            } else {
-              css = merge(css, breakpointsValues);
+
+              if (objectsHaveSameKeys(breakpointsValues, value)) {
+                css[styleKey] = styleFunctionSx({
+                  sx: value,
+                  theme: theme
+                });
+              } else {
+                css = merge(css, breakpointsValues);
+              }
             }
+          } else {
+            css = merge(css, getThemeValue(styleKey, value, theme));
           }
-        } else {
-          css = merge(css, getThemeValue(styleKey, value, theme));
         }
-      }
-    });
-    return removeUnusedBreakpoints(breakpointsKeys, css);
+      });
+      return removeUnusedBreakpoints(breakpointsKeys, css);
+    }
+
+    return Array.isArray(sx) ? sx.map(traverse) : traverse(sx);
   }
 
-  return Array.isArray(sx) ? sx.map(traverse) : traverse(sx);
+  return styleFunctionSx;
 }
-
+var styleFunctionSx = unstable_createStyleFunctionSx();
 styleFunctionSx.filterProps = ['sx'];
 export default styleFunctionSx;

package/modern/createBox.js

@@ -5,14 +5,15 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import styled from '@mui/styled-engine';
-import styleFunctionSx, { extendSxProp } from './styleFunctionSx';
+import defaultStyleFunctionSx, { extendSxProp } from './styleFunctionSx';
 import useTheme from './useTheme';
 import { jsx as _jsx } from "react/jsx-runtime";
 export default function createBox(options = {}) {
   const {
     defaultTheme,
     defaultClassName = 'MuiBox-root',
-    generateClassName
+    generateClassName,
+    styleFunctionSx = defaultStyleFunctionSx
   } = options;
   const BoxRoot = styled('div')(styleFunctionSx);
   const Box = /*#__PURE__*/React.forwardRef(function Box(inProps, ref) {

package/modern/createStyled.js

@@ -6,8 +6,8 @@ const _excluded = ["name", "slot", "skipVariantsResolver", "skipSx", "overridesR
 import styledEngineStyled from '@mui/styled-engine';
 import { getDisplayName } from '@mui/utils';
 import createTheme from './createTheme';
-import styleFunctionSx from './styleFunctionSx';
 import propsToClassKey from './propsToClassKey';
+import defaultStyleFunctionSx from './styleFunctionSx';
 
 function isEmpty(obj) {
   return Object.keys(obj).length === 0;
@@ -59,7 +59,8 @@ const variantsResolver = (props, styles, theme, name) => {
   }
 
   return variantsStyles;
-};
+}; // Update /system/styled/#api in case if this changes
+
 
 export function shouldForwardProp(prop) {
   return prop !== 'ownerState' && prop !== 'theme' && prop !== 'sx' && prop !== 'as';
@@ -74,7 +75,8 @@ export default function createStyled(input = {}) {
   const {
     defaultTheme = systemDefaultTheme,
     rootShouldForwardProp = shouldForwardProp,
-    slotShouldForwardProp = shouldForwardProp
+    slotShouldForwardProp = shouldForwardProp,
+    styleFunctionSx = defaultStyleFunctionSx
   } = input;
   return (tag, inputOptions = {}) => {
     const {

package/modern/createTheme/createBreakpoints.js

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

package/modern/cssVars/createCssVarsProvider.js

@@ -26,7 +26,8 @@ export default function createCssVarsProvider(options) {
     disableTransitionOnChange = false,
     enableColorScheme = true,
     prefix: designSystemPrefix = '',
-    shouldSkipGeneratingVar
+    shouldSkipGeneratingVar,
+    resolveTheme
   } = options;
   const systemSpacing = createSpacing(baseTheme.spacing);
   const systemBreakpoints = createBreakpoints(baseTheme.breakpoints ?? {});
@@ -123,6 +124,7 @@ export default function createCssVarsProvider(options) {
     mergedTheme = _extends({}, mergedTheme, colorSchemes[resolvedColorScheme], {
       components,
       colorSchemes,
+      prefix,
       vars: rootVars,
       spacing: themeProp.spacing ? createSpacing(themeProp.spacing) : systemSpacing,
       breakpoints: themeProp.breakpoints ? createBreakpoints(themeProp.breakpoints) : systemBreakpoints,
@@ -224,7 +226,7 @@ export default function createCssVarsProvider(options) {
       }), /*#__PURE__*/_jsx(GlobalStyles, {
         styles: styleSheet
       }), /*#__PURE__*/_jsx(ThemeProvider, {
-        theme: mergedTheme,
+        theme: resolveTheme ? resolveTheme(mergedTheme) : mergedTheme,
         children: children
       })]
     });

package/modern/cssVars/createGetCssVar.js

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

package/modern/cssVars/cssVarsParser.js

@@ -113,12 +113,13 @@ export default function cssVarsParser(theme, options) {
     if (typeof val === 'string' || typeof val === 'number') {
       let value = val;
 
-      if (typeof value === 'string' && value.startsWith('var')) {
+      if (typeof value === 'string' && value.match(/var\(\s*--/)) {
         // replace the value of the `scope` object with the prefix or remove basePrefix from the value
         if (!basePrefix && prefix) {
-          value = value.replace(/var\(--/g, `var(--${prefix}-`);
+          value = value.replace(/var\(\s*--/g, `var(--${prefix}-`);
         } else {
-          value = prefix ? value.replace(new RegExp(basePrefix, 'g'), prefix) : value.replace(new RegExp(`${basePrefix}-`, 'g'), '');
+          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
 
 

package/modern/getThemeValue.js

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

package/modern/index.js

@@ -1,4 +1,4 @@
-/** @license MUI v5.3.0
+/** @license MUI v5.4.3
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
@@ -26,7 +26,7 @@ export * from './spacing';
 export { default as style, getPath } from './style';
 export { default as typography } from './typography';
 export * from './typography';
-export { default as unstable_styleFunctionSx, extendSxProp as unstable_extendSxProp } from './styleFunctionSx';
+export { default as unstable_styleFunctionSx, unstable_createStyleFunctionSx, extendSxProp as unstable_extendSxProp } from './styleFunctionSx';
 export { default as experimental_sx } from './sx';
 export { default as unstable_getThemeValue } from './getThemeValue';
 export { default as Box } from './Box';

package/modern/styleFunctionSx/index.js

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

package/modern/styleFunctionSx/styleFunctionSx.js

@@ -1,5 +1,5 @@
 import merge from '../merge';
-import getThemeValue, { propToStyleFunction } from '../getThemeValue';
+import { styleFunctionMapping as defaultStyleFunctionMapping } from '../getThemeValue';
 import { handleBreakpoints, createEmptyBreakpointObject, removeUnusedBreakpoints } from '../breakpoints';
 
 function objectsHaveSameKeys(...objects) {
@@ -10,70 +10,97 @@ function objectsHaveSameKeys(...objects) {
 
 function callIfFn(maybeFn, arg) {
   return typeof maybeFn === 'function' ? maybeFn(arg) : maybeFn;
-}
+} // eslint-disable-next-line @typescript-eslint/naming-convention
 
-function styleFunctionSx(props) {
-  const {
-    sx,
-    theme = {}
-  } = props || {};
 
-  if (!sx) {
-    return null; // emotion & styled-components will neglect null
-  }
-  /*
-   * Receive `sxInput` as object or callback
-   * and then recursively check keys & values to create media query object styles.
-   * (the result will be used in `styled`)
-   */
+export function unstable_createStyleFunctionSx(styleFunctionMapping = defaultStyleFunctionMapping) {
+  const propToStyleFunction = Object.keys(styleFunctionMapping).reduce((acc, styleFnName) => {
+    styleFunctionMapping[styleFnName].filterProps.forEach(propName => {
+      acc[propName] = styleFunctionMapping[styleFnName];
+    });
+    return acc;
+  }, {});
 
+  function getThemeValue(prop, value, theme) {
+    const inputProps = {
+      [prop]: value,
+      theme
+    };
+    const styleFunction = propToStyleFunction[prop];
+    return styleFunction ? styleFunction(inputProps) : {
+      [prop]: value
+    };
+  }
 
-  function traverse(sxInput) {
-    let sxObject = sxInput;
+  function styleFunctionSx(props) {
+    const {
+      sx,
+      theme = {}
+    } = props || {};
 
-    if (typeof sxInput === 'function') {
-      sxObject = sxInput(theme);
-    } else if (typeof sxInput !== 'object') {
-      // value
-      return sxInput;
+    if (!sx) {
+      return null; // emotion & styled-components will neglect null
     }
+    /*
+     * Receive `sxInput` as object or callback
+     * and then recursively check keys & values to create media query object styles.
+     * (the result will be used in `styled`)
+     */
 
-    const emptyBreakpoints = createEmptyBreakpointObject(theme.breakpoints);
-    const breakpointsKeys = Object.keys(emptyBreakpoints);
-    let css = emptyBreakpoints;
-    Object.keys(sxObject).forEach(styleKey => {
-      const value = callIfFn(sxObject[styleKey], theme);
 
-      if (value !== null && value !== undefined) {
-        if (typeof value === 'object') {
-          if (propToStyleFunction[styleKey]) {
-            css = merge(css, getThemeValue(styleKey, value, theme));
-          } else {
-            const breakpointsValues = handleBreakpoints({
-              theme
-            }, value, x => ({
-              [styleKey]: x
-            }));
-
-            if (objectsHaveSameKeys(breakpointsValues, value)) {
-              css[styleKey] = styleFunctionSx({
-                sx: value,
-                theme
-              });
+    function traverse(sxInput) {
+      let sxObject = sxInput;
+
+      if (typeof sxInput === 'function') {
+        sxObject = sxInput(theme);
+      } else if (typeof sxInput !== 'object') {
+        // value
+        return sxInput;
+      }
+
+      if (!sxObject) {
+        return null;
+      }
+
+      const emptyBreakpoints = createEmptyBreakpointObject(theme.breakpoints);
+      const breakpointsKeys = Object.keys(emptyBreakpoints);
+      let css = emptyBreakpoints;
+      Object.keys(sxObject).forEach(styleKey => {
+        const value = callIfFn(sxObject[styleKey], theme);
+
+        if (value !== null && value !== undefined) {
+          if (typeof value === 'object') {
+            if (propToStyleFunction[styleKey]) {
+              css = merge(css, getThemeValue(styleKey, value, theme));
             } else {
-              css = merge(css, breakpointsValues);
+              const breakpointsValues = handleBreakpoints({
+                theme
+              }, value, x => ({
+                [styleKey]: x
+              }));
+
+              if (objectsHaveSameKeys(breakpointsValues, value)) {
+                css[styleKey] = styleFunctionSx({
+                  sx: value,
+                  theme
+                });
+              } else {
+                css = merge(css, breakpointsValues);
+              }
             }
+          } else {
+            css = merge(css, getThemeValue(styleKey, value, theme));
           }
-        } else {
-          css = merge(css, getThemeValue(styleKey, value, theme));
         }
-      }
-    });
-    return removeUnusedBreakpoints(breakpointsKeys, css);
+      });
+      return removeUnusedBreakpoints(breakpointsKeys, css);
+    }
+
+    return Array.isArray(sx) ? sx.map(traverse) : traverse(sx);
   }
 
-  return Array.isArray(sx) ? sx.map(traverse) : traverse(sx);
+  return styleFunctionSx;
 }
-
+const styleFunctionSx = unstable_createStyleFunctionSx();
 styleFunctionSx.filterProps = ['sx'];
 export default styleFunctionSx;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/system",
-  "version": "5.3.0",
+  "version": "5.4.3",
   "private": false,
   "author": "MUI Team",
   "description": "CSS utilities for rapidly laying out custom designs.",
@@ -13,12 +13,12 @@
   ],
   "repository": {
     "type": "git",
-    "url": "https://github.com/mui-org/material-ui.git",
+    "url": "https://github.com/mui/material-ui.git",
     "directory": "packages/mui-system"
   },
   "license": "MIT",
   "bugs": {
-    "url": "https://github.com/mui-org/material-ui/issues"
+    "url": "https://github.com/mui/material-ui/issues"
   },
   "homepage": "https://mui.com/system/basics/",
   "funding": {
@@ -43,11 +43,11 @@
     }
   },
   "dependencies": {
-    "@babel/runtime": "^7.16.7",
-    "@mui/private-theming": "^5.3.0",
-    "@mui/styled-engine": "^5.3.0",
-    "@mui/types": "^7.1.0",
-    "@mui/utils": "^5.3.0",
+    "@babel/runtime": "^7.17.0",
+    "@mui/private-theming": "^5.4.2",
+    "@mui/styled-engine": "^5.4.2",
+    "@mui/types": "^7.1.2",
+    "@mui/utils": "^5.4.2",
     "clsx": "^1.1.1",
     "csstype": "^3.0.10",
     "prop-types": "^15.7.2"

package/style.d.ts

@@ -12,4 +12,4 @@ export interface StyleOptions<PropKey> {
 }
 export function style<PropKey extends string, Theme extends object>(
   options: StyleOptions<PropKey>,
-): StyleFunction<{ [K in PropKey]?: unknown } & { theme?: Theme }>;
+): StyleFunction<{ [K in PropKey]?: unknown } & { theme?: Theme }> & { filterProps: string[] };

package/styleFunctionSx/index.js

@@ -17,7 +17,17 @@ Object.defineProperty(exports, "extendSxProp", {
     return _extendSxProp.default;
   }
 });
+Object.defineProperty(exports, "unstable_createStyleFunctionSx", {
+  enumerable: true,
+  get: function () {
+    return _styleFunctionSx.unstable_createStyleFunctionSx;
+  }
+});
+
+var _styleFunctionSx = _interopRequireWildcard(require("./styleFunctionSx"));
+
+var _extendSxProp = _interopRequireDefault(require("./extendSxProp"));
 
-var _styleFunctionSx = _interopRequireDefault(require("./styleFunctionSx"));
+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); }
 
-var _extendSxProp = _interopRequireDefault(require("./extendSxProp"));
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }

package/styleFunctionSx/styleFunctionSx.d.ts

@@ -60,5 +60,16 @@ export type SxProps<Theme extends object = {}> =
   | ((theme: Theme) => SystemStyleObject<Theme>)
   | Array<boolean | SystemStyleObject<Theme> | ((theme: Theme) => SystemStyleObject<Theme>)>;
 
+export interface StyleFunctionSx {
+  (props: object): object;
+  filterProps?: string[];
+}
+
 // eslint-disable-next-line @typescript-eslint/naming-convention
-export default function unstable_styleFunctionSx(props: object): object;
+export function unstable_createStyleFunctionSx(
+  styleFunctionMapping: Record<string, StyleFunctionSx>,
+): StyleFunctionSx;
+
+declare const styleFunctionSx: StyleFunctionSx;
+
+export default styleFunctionSx;