@mui/system 5.10.17 → 5.11.1

package/esm/styleFunctionSx/defaultSxConfig.js

@@ -0,0 +1,284 @@
+import { padding, margin } from '../spacing';
+import { borderRadius, borderTransform } from '../borders';
+import { gap, rowGap, columnGap } from '../cssGrid';
+import { paletteTransform } from '../palette';
+import { maxWidth, sizingTransform } from '../sizing';
+const defaultSxConfig = {
+  // borders
+  border: {
+    themeKey: 'borders',
+    transform: borderTransform
+  },
+  borderTop: {
+    themeKey: 'borders',
+    transform: borderTransform
+  },
+  borderRight: {
+    themeKey: 'borders',
+    transform: borderTransform
+  },
+  borderBottom: {
+    themeKey: 'borders',
+    transform: borderTransform
+  },
+  borderLeft: {
+    themeKey: 'borders',
+    transform: borderTransform
+  },
+  borderColor: {
+    themeKey: 'palette'
+  },
+  borderTopColor: {
+    themeKey: 'palette'
+  },
+  borderRightColor: {
+    themeKey: 'palette'
+  },
+  borderBottomColor: {
+    themeKey: 'palette'
+  },
+  borderLeftColor: {
+    themeKey: 'palette'
+  },
+  borderRadius: {
+    themeKey: 'shape.borderRadius',
+    style: borderRadius
+  },
+  // palette
+  color: {
+    themeKey: 'palette',
+    transform: paletteTransform
+  },
+  bgcolor: {
+    themeKey: 'palette',
+    cssProperty: 'backgroundColor',
+    transform: paletteTransform
+  },
+  backgroundColor: {
+    themeKey: 'palette',
+    transform: paletteTransform
+  },
+  // spacing
+  p: {
+    style: padding
+  },
+  pt: {
+    style: padding
+  },
+  pr: {
+    style: padding
+  },
+  pb: {
+    style: padding
+  },
+  pl: {
+    style: padding
+  },
+  px: {
+    style: padding
+  },
+  py: {
+    style: padding
+  },
+  padding: {
+    style: padding
+  },
+  paddingTop: {
+    style: padding
+  },
+  paddingRight: {
+    style: padding
+  },
+  paddingBottom: {
+    style: padding
+  },
+  paddingLeft: {
+    style: padding
+  },
+  paddingX: {
+    style: padding
+  },
+  paddingY: {
+    style: padding
+  },
+  paddingInline: {
+    style: padding
+  },
+  paddingInlineStart: {
+    style: padding
+  },
+  paddingInlineEnd: {
+    style: padding
+  },
+  paddingBlock: {
+    style: padding
+  },
+  paddingBlockStart: {
+    style: padding
+  },
+  paddingBlockEnd: {
+    style: padding
+  },
+  m: {
+    style: margin
+  },
+  mt: {
+    style: margin
+  },
+  mr: {
+    style: margin
+  },
+  mb: {
+    style: margin
+  },
+  ml: {
+    style: margin
+  },
+  mx: {
+    style: margin
+  },
+  my: {
+    style: margin
+  },
+  margin: {
+    style: margin
+  },
+  marginTop: {
+    style: margin
+  },
+  marginRight: {
+    style: margin
+  },
+  marginBottom: {
+    style: margin
+  },
+  marginLeft: {
+    style: margin
+  },
+  marginX: {
+    style: margin
+  },
+  marginY: {
+    style: margin
+  },
+  marginInline: {
+    style: margin
+  },
+  marginInlineStart: {
+    style: margin
+  },
+  marginInlineEnd: {
+    style: margin
+  },
+  marginBlock: {
+    style: margin
+  },
+  marginBlockStart: {
+    style: margin
+  },
+  marginBlockEnd: {
+    style: margin
+  },
+  // display
+  displayPrint: {
+    cssProperty: false,
+    transform: value => ({
+      '@media print': {
+        display: value
+      }
+    })
+  },
+  display: {},
+  overflow: {},
+  textOverflow: {},
+  visibility: {},
+  whiteSpace: {},
+  // flexbox
+  flexBasis: {},
+  flexDirection: {},
+  flexWrap: {},
+  justifyContent: {},
+  alignItems: {},
+  alignContent: {},
+  order: {},
+  flex: {},
+  flexGrow: {},
+  flexShrink: {},
+  alignSelf: {},
+  justifyItems: {},
+  justifySelf: {},
+  // grid
+  gap: {
+    style: gap
+  },
+  rowGap: {
+    style: rowGap
+  },
+  columnGap: {
+    style: columnGap
+  },
+  gridColumn: {},
+  gridRow: {},
+  gridAutoFlow: {},
+  gridAutoColumns: {},
+  gridAutoRows: {},
+  gridTemplateColumns: {},
+  gridTemplateRows: {},
+  gridTemplateAreas: {},
+  gridArea: {},
+  // positions
+  position: {},
+  zIndex: {
+    themeKey: 'zIndex'
+  },
+  top: {},
+  right: {},
+  bottom: {},
+  left: {},
+  // shadows
+  boxShadow: {
+    themeKey: 'shadows'
+  },
+  // sizing
+  width: {
+    transform: sizingTransform
+  },
+  maxWidth: {
+    style: maxWidth
+  },
+  minWidth: {
+    transform: sizingTransform
+  },
+  height: {
+    transform: sizingTransform
+  },
+  maxHeight: {
+    transform: sizingTransform
+  },
+  minHeight: {
+    transform: sizingTransform
+  },
+  boxSizing: {},
+  // typography
+  fontFamily: {
+    themeKey: 'typography'
+  },
+  fontSize: {
+    themeKey: 'typography'
+  },
+  fontStyle: {
+    themeKey: 'typography'
+  },
+  fontWeight: {
+    themeKey: 'typography'
+  },
+  letterSpacing: {},
+  textTransform: {},
+  lineHeight: {},
+  textAlign: {},
+  typography: {
+    cssProperty: false,
+    themeKey: 'typography'
+  }
+};
+export default defaultSxConfig;

package/esm/styleFunctionSx/extendSxProp.js

@@ -2,14 +2,16 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 const _excluded = ["sx"];
 import { isPlainObject } from '@mui/utils';
-import { propToStyleFunction } from '../getThemeValue';
+import defaultSxConfig from './defaultSxConfig';
 const splitProps = props => {
+  var _props$theme$unstable, _props$theme;
   const result = {
     systemProps: {},
     otherProps: {}
   };
+  const config = (_props$theme$unstable = props == null ? void 0 : (_props$theme = props.theme) == null ? void 0 : _props$theme.unstable_sxConfig) != null ? _props$theme$unstable : defaultSxConfig;
   Object.keys(props).forEach(prop => {
-    if (propToStyleFunction[prop]) {
+    if (config[prop]) {
       result.systemProps[prop] = props[prop];
     } else {
       result.otherProps[prop] = props[prop];

package/esm/styleFunctionSx/index.js

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

package/esm/styleFunctionSx/styleFunctionSx.js

@@ -1,6 +1,8 @@
+import { unstable_capitalize as capitalize } from '@mui/utils';
 import merge from '../merge';
-import { styleFunctionMapping as defaultStyleFunctionMapping } from '../getThemeValue';
+import { getPath, getStyleValue as getValue } from '../style';
 import { handleBreakpoints, createEmptyBreakpointObject, removeUnusedBreakpoints } from '../breakpoints';
+import defaultSxConfig from './defaultSxConfig';
 function objectsHaveSameKeys(...objects) {
   const allKeys = objects.reduce((keys, object) => keys.concat(Object.keys(object)), []);
   const union = new Set(allKeys);
@@ -11,24 +13,48 @@ function callIfFn(maybeFn, arg) {
 }
 
 // eslint-disable-next-line @typescript-eslint/naming-convention
-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,
+export function unstable_createStyleFunctionSx() {
+  function getThemeValue(prop, val, theme, config) {
+    const props = {
+      [prop]: val,
       theme
     };
-    const styleFunction = propToStyleFunction[prop];
-    return styleFunction ? styleFunction(inputProps) : {
-      [prop]: value
+    const options = config[prop];
+    if (!options) {
+      return {
+        [prop]: val
+      };
+    }
+    const {
+      cssProperty = prop,
+      themeKey,
+      transform,
+      style
+    } = options;
+    if (val == null) {
+      return null;
+    }
+    const themeMapping = getPath(theme, themeKey) || {};
+    if (style) {
+      return style(props);
+    }
+    const styleFromPropValue = propValueFinal => {
+      let value = getValue(themeMapping, transform, propValueFinal);
+      if (propValueFinal === value && typeof propValueFinal === 'string') {
+        // Haven't found value
+        value = getValue(themeMapping, transform, `${prop}${propValueFinal === 'default' ? '' : capitalize(propValueFinal)}`, propValueFinal);
+      }
+      if (cssProperty === false) {
+        return value;
+      }
+      return {
+        [cssProperty]: value
+      };
     };
+    return handleBreakpoints(props, val, styleFromPropValue);
   }
   function styleFunctionSx(props) {
+    var _theme$unstable_sxCon;
     const {
       sx,
       theme = {}
@@ -37,6 +63,8 @@ export function unstable_createStyleFunctionSx(styleFunctionMapping = defaultSty
       return null; // Emotion & styled-components will neglect null
     }
 
+    const config = (_theme$unstable_sxCon = theme.unstable_sxConfig) != null ? _theme$unstable_sxCon : defaultSxConfig;
+
     /*
      * Receive `sxInput` as object or callback
      * and then recursively check keys & values to create media query object styles.
@@ -60,8 +88,8 @@ export function unstable_createStyleFunctionSx(styleFunctionMapping = defaultSty
         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));
+            if (config[styleKey]) {
+              css = merge(css, getThemeValue(styleKey, value, theme, config));
             } else {
               const breakpointsValues = handleBreakpoints({
                 theme
@@ -78,7 +106,7 @@ export function unstable_createStyleFunctionSx(styleFunctionMapping = defaultSty
               }
             }
           } else {
-            css = merge(css, getThemeValue(styleKey, value, theme));
+            css = merge(css, getThemeValue(styleKey, value, theme, config));
           }
         }
       });

package/index.d.ts

@@ -119,10 +119,13 @@ export {
   default as unstable_styleFunctionSx,
   unstable_createStyleFunctionSx,
   extendSxProp as unstable_extendSxProp,
+  unstable_defaultSxConfig,
 } from './styleFunctionSx';
 export * from './styleFunctionSx';
 
-export { default as experimental_sx } from './sx';
+// TODO: Remove this function in v6.
+// eslint-disable-next-line @typescript-eslint/naming-convention
+export function experimental_sx(): any;
 
 export { default as Box } from './Box';
 export * from './Box';

package/index.js

@@ -1,4 +1,4 @@
-/** @license MUI v5.10.17
+/** @license MUI v5.11.1
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
@@ -10,6 +10,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 var _exportNames = {
+  experimental_sx: true,
   css: true,
   keyframes: true,
   GlobalStyles: true,
@@ -35,7 +36,7 @@ var _exportNames = {
   unstable_styleFunctionSx: true,
   unstable_createStyleFunctionSx: true,
   unstable_extendSxProp: true,
-  experimental_sx: true,
+  unstable_defaultSxConfig: true,
   unstable_getThemeValue: true,
   Box: true,
   createBox: true,
@@ -166,12 +167,7 @@ Object.defineProperty(exports, "display", {
     return _display.default;
   }
 });
-Object.defineProperty(exports, "experimental_sx", {
-  enumerable: true,
-  get: function () {
-    return _sx.default;
-  }
-});
+exports.experimental_sx = experimental_sx;
 Object.defineProperty(exports, "flexbox", {
   enumerable: true,
   get: function () {
@@ -298,6 +294,12 @@ Object.defineProperty(exports, "unstable_createStyleFunctionSx", {
     return _styleFunctionSx.unstable_createStyleFunctionSx;
   }
 });
+Object.defineProperty(exports, "unstable_defaultSxConfig", {
+  enumerable: true,
+  get: function () {
+    return _styleFunctionSx.unstable_defaultSxConfig;
+  }
+});
 Object.defineProperty(exports, "unstable_extendSxProp", {
   enumerable: true,
   get: function () {
@@ -340,6 +342,7 @@ Object.defineProperty(exports, "useThemeWithoutDefault", {
     return _useThemeWithoutDefault.default;
   }
 });
+var _utils = require("@mui/utils");
 var _styledEngine = require("@mui/styled-engine");
 var _borders = _interopRequireWildcard(require("./borders"));
 Object.keys(_borders).forEach(function (key) {
@@ -443,7 +446,6 @@ Object.keys(_typography).forEach(function (key) {
   });
 });
 var _styleFunctionSx = _interopRequireWildcard(require("./styleFunctionSx"));
-var _sx = _interopRequireDefault(require("./sx"));
 var _getThemeValue = _interopRequireDefault(require("./getThemeValue"));
 var _Box = _interopRequireDefault(require("./Box"));
 var _createBox = _interopRequireDefault(require("./createBox"));
@@ -523,4 +525,9 @@ Object.keys(_Stack2).forEach(function (key) {
   });
 });
 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 _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; }
+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; }
+// TODO: Remove this function in v6
+// eslint-disable-next-line @typescript-eslint/naming-convention
+function experimental_sx() {
+  throw new Error(process.env.NODE_ENV !== "production" ? `MUI: The \`experimental_sx\` has been moved to \`theme.unstable_sx\`.For more details, see https://github.com/mui/material-ui/pull/35150.` : (0, _utils.formatMuiErrorMessage)(20));
+}

package/legacy/borders.js

@@ -3,7 +3,7 @@ import style from './style';
 import compose from './compose';
 import { createUnaryUnit, getValue } from './spacing';
 import { handleBreakpoints } from './breakpoints';
-function getBorder(value) {
+export function borderTransform(value) {
   if (typeof value !== 'number') {
     return value;
   }
@@ -12,27 +12,27 @@ function getBorder(value) {
 export var border = style({
   prop: 'border',
   themeKey: 'borders',
-  transform: getBorder
+  transform: borderTransform
 });
 export var borderTop = style({
   prop: 'borderTop',
   themeKey: 'borders',
-  transform: getBorder
+  transform: borderTransform
 });
 export var borderRight = style({
   prop: 'borderRight',
   themeKey: 'borders',
-  transform: getBorder
+  transform: borderTransform
 });
 export var borderBottom = style({
   prop: 'borderBottom',
   themeKey: 'borders',
-  transform: getBorder
+  transform: borderTransform
 });
 export var borderLeft = style({
   prop: 'borderLeft',
   themeKey: 'borders',
-  transform: getBorder
+  transform: borderTransform
 });
 export var borderColor = style({
   prop: 'borderColor',
@@ -54,6 +54,9 @@ export var borderLeftColor = style({
   prop: 'borderLeftColor',
   themeKey: 'palette'
 });
+
+// false positive
+// eslint-disable-next-line react/function-component-definition
 export var borderRadius = function borderRadius(props) {
   if (props.borderRadius !== undefined && props.borderRadius !== null) {
     var transformer = createUnaryUnit(props.theme, 'shape.borderRadius', 4, 'borderRadius');

package/legacy/breakpoints.js

@@ -54,6 +54,8 @@ export function handleBreakpoints(props, propValue, styleFromPropValue) {
   return output;
 }
 function breakpoints(styleFunction) {
+  // false positive
+  // eslint-disable-next-line react/function-component-definition
   var newStyleFunction = function newStyleFunction(props) {
     var theme = props.theme || {};
     var base = styleFunction(props);

package/legacy/compose.js

@@ -10,6 +10,9 @@ function compose() {
     });
     return acc;
   }, {});
+
+  // false positive
+  // eslint-disable-next-line react/function-component-definition
   var fn = function fn(props) {
     return Object.keys(props).reduce(function (acc, prop) {
       if (handlers[prop]) {

package/legacy/createBox.js

@@ -3,7 +3,7 @@ import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutPr
 import * as React from 'react';
 import clsx from 'clsx';
 import styled from '@mui/styled-engine';
-import defaultStyleFunctionSx, { extendSxProp } from './styleFunctionSx';
+import styleFunctionSx, { extendSxProp } from './styleFunctionSx';
 import useTheme from './useTheme';
 import { jsx as _jsx } from "react/jsx-runtime";
 export default function createBox() {
@@ -11,9 +11,7 @@ export default function createBox() {
   var defaultTheme = options.defaultTheme,
     _options$defaultClass = options.defaultClassName,
     defaultClassName = _options$defaultClass === void 0 ? 'MuiBox-root' : _options$defaultClass,
-    generateClassName = options.generateClassName,
-    _options$styleFunctio = options.styleFunctionSx,
-    styleFunctionSx = _options$styleFunctio === void 0 ? defaultStyleFunctionSx : _options$styleFunctio;
+    generateClassName = options.generateClassName;
   var BoxRoot = styled('div', {
     shouldForwardProp: function shouldForwardProp(prop) {
       return prop !== 'theme' && prop !== 'sx' && prop !== 'as';

package/legacy/createStyled.js

@@ -7,7 +7,7 @@ import styledEngineStyled, { internal_processStyles as processStyles } from '@mu
 import { getDisplayName } from '@mui/utils';
 import createTheme from './createTheme';
 import propsToClassKey from './propsToClassKey';
-import defaultStyleFunctionSx from './styleFunctionSx';
+import styleFunctionSx from './styleFunctionSx';
 function isEmpty(obj) {
   return Object.keys(obj).length === 0;
 }
@@ -75,9 +75,7 @@ export default function createStyled() {
     _input$rootShouldForw = input.rootShouldForwardProp,
     rootShouldForwardProp = _input$rootShouldForw === void 0 ? shouldForwardProp : _input$rootShouldForw,
     _input$slotShouldForw = input.slotShouldForwardProp,
-    slotShouldForwardProp = _input$slotShouldForw === void 0 ? shouldForwardProp : _input$slotShouldForw,
-    _input$styleFunctionS = input.styleFunctionSx,
-    styleFunctionSx = _input$styleFunctionS === void 0 ? defaultStyleFunctionSx : _input$styleFunctionS;
+    slotShouldForwardProp = _input$slotShouldForw === void 0 ? shouldForwardProp : _input$slotShouldForw;
   var systemSx = function systemSx(props) {
     var theme = isEmpty(props.theme) ? defaultTheme : props.theme;
     return styleFunctionSx(_extends({}, props, {

package/legacy/createTheme/createTheme.js

@@ -4,6 +4,8 @@ import { deepmerge } from '@mui/utils';
 import createBreakpoints from './createBreakpoints';
 import shape from './shape';
 import createSpacing from './createSpacing';
+import styleFunctionSx from '../styleFunctionSx/styleFunctionSx';
+import defaultSxConfig from '../styleFunctionSx/defaultSxConfig';
 function createTheme() {
   var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   var _options$breakpoints = options.breakpoints,
@@ -33,6 +35,13 @@ function createTheme() {
   muiTheme = args.reduce(function (acc, argument) {
     return deepmerge(acc, argument);
   }, muiTheme);
+  muiTheme.unstable_sxConfig = _extends({}, defaultSxConfig, other == null ? void 0 : other.unstable_sxConfig);
+  muiTheme.unstable_sx = function sx(props) {
+    return styleFunctionSx({
+      sx: props,
+      theme: this
+    });
+  };
   return muiTheme;
 }
 export default createTheme;

package/legacy/cssGrid.js

@@ -3,6 +3,9 @@ import compose from './compose';
 import { createUnaryUnit, getValue } from './spacing';
 import { handleBreakpoints } from './breakpoints';
 import responsivePropType from './responsivePropType';
+
+// false positive
+// eslint-disable-next-line react/function-component-definition
 export var gap = function gap(props) {
   if (props.gap !== undefined && props.gap !== null) {
     var transformer = createUnaryUnit(props.theme, 'spacing', 8, 'gap');
@@ -19,6 +22,9 @@ gap.propTypes = process.env.NODE_ENV !== 'production' ? {
   gap: responsivePropType
 } : {};
 gap.filterProps = ['gap'];
+
+// false positive
+// eslint-disable-next-line react/function-component-definition
 export var columnGap = function columnGap(props) {
   if (props.columnGap !== undefined && props.columnGap !== null) {
     var transformer = createUnaryUnit(props.theme, 'spacing', 8, 'columnGap');
@@ -35,6 +41,9 @@ columnGap.propTypes = process.env.NODE_ENV !== 'production' ? {
   columnGap: responsivePropType
 } : {};
 columnGap.filterProps = ['columnGap'];
+
+// false positive
+// eslint-disable-next-line react/function-component-definition
 export var rowGap = function rowGap(props) {
   if (props.rowGap !== undefined && props.rowGap !== null) {
     var transformer = createUnaryUnit(props.theme, 'spacing', 8, 'rowGap');