@mui/system 5.10.16 → 5.11.0

package/styleFunctionSx/defaultSxConfig.js

@@ -0,0 +1,291 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _spacing = require("../spacing");
+var _borders = require("../borders");
+var _cssGrid = require("../cssGrid");
+var _palette = require("../palette");
+var _sizing = require("../sizing");
+const defaultSxConfig = {
+  // borders
+  border: {
+    themeKey: 'borders',
+    transform: _borders.borderTransform
+  },
+  borderTop: {
+    themeKey: 'borders',
+    transform: _borders.borderTransform
+  },
+  borderRight: {
+    themeKey: 'borders',
+    transform: _borders.borderTransform
+  },
+  borderBottom: {
+    themeKey: 'borders',
+    transform: _borders.borderTransform
+  },
+  borderLeft: {
+    themeKey: 'borders',
+    transform: _borders.borderTransform
+  },
+  borderColor: {
+    themeKey: 'palette'
+  },
+  borderTopColor: {
+    themeKey: 'palette'
+  },
+  borderRightColor: {
+    themeKey: 'palette'
+  },
+  borderBottomColor: {
+    themeKey: 'palette'
+  },
+  borderLeftColor: {
+    themeKey: 'palette'
+  },
+  borderRadius: {
+    themeKey: 'shape.borderRadius',
+    style: _borders.borderRadius
+  },
+  // palette
+  color: {
+    themeKey: 'palette',
+    transform: _palette.paletteTransform
+  },
+  bgcolor: {
+    themeKey: 'palette',
+    cssProperty: 'backgroundColor',
+    transform: _palette.paletteTransform
+  },
+  backgroundColor: {
+    themeKey: 'palette',
+    transform: _palette.paletteTransform
+  },
+  // spacing
+  p: {
+    style: _spacing.padding
+  },
+  pt: {
+    style: _spacing.padding
+  },
+  pr: {
+    style: _spacing.padding
+  },
+  pb: {
+    style: _spacing.padding
+  },
+  pl: {
+    style: _spacing.padding
+  },
+  px: {
+    style: _spacing.padding
+  },
+  py: {
+    style: _spacing.padding
+  },
+  padding: {
+    style: _spacing.padding
+  },
+  paddingTop: {
+    style: _spacing.padding
+  },
+  paddingRight: {
+    style: _spacing.padding
+  },
+  paddingBottom: {
+    style: _spacing.padding
+  },
+  paddingLeft: {
+    style: _spacing.padding
+  },
+  paddingX: {
+    style: _spacing.padding
+  },
+  paddingY: {
+    style: _spacing.padding
+  },
+  paddingInline: {
+    style: _spacing.padding
+  },
+  paddingInlineStart: {
+    style: _spacing.padding
+  },
+  paddingInlineEnd: {
+    style: _spacing.padding
+  },
+  paddingBlock: {
+    style: _spacing.padding
+  },
+  paddingBlockStart: {
+    style: _spacing.padding
+  },
+  paddingBlockEnd: {
+    style: _spacing.padding
+  },
+  m: {
+    style: _spacing.margin
+  },
+  mt: {
+    style: _spacing.margin
+  },
+  mr: {
+    style: _spacing.margin
+  },
+  mb: {
+    style: _spacing.margin
+  },
+  ml: {
+    style: _spacing.margin
+  },
+  mx: {
+    style: _spacing.margin
+  },
+  my: {
+    style: _spacing.margin
+  },
+  margin: {
+    style: _spacing.margin
+  },
+  marginTop: {
+    style: _spacing.margin
+  },
+  marginRight: {
+    style: _spacing.margin
+  },
+  marginBottom: {
+    style: _spacing.margin
+  },
+  marginLeft: {
+    style: _spacing.margin
+  },
+  marginX: {
+    style: _spacing.margin
+  },
+  marginY: {
+    style: _spacing.margin
+  },
+  marginInline: {
+    style: _spacing.margin
+  },
+  marginInlineStart: {
+    style: _spacing.margin
+  },
+  marginInlineEnd: {
+    style: _spacing.margin
+  },
+  marginBlock: {
+    style: _spacing.margin
+  },
+  marginBlockStart: {
+    style: _spacing.margin
+  },
+  marginBlockEnd: {
+    style: _spacing.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: _cssGrid.gap
+  },
+  rowGap: {
+    style: _cssGrid.rowGap
+  },
+  columnGap: {
+    style: _cssGrid.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: _sizing.sizingTransform
+  },
+  maxWidth: {
+    style: _sizing.maxWidth
+  },
+  minWidth: {
+    transform: _sizing.sizingTransform
+  },
+  height: {
+    transform: _sizing.sizingTransform
+  },
+  maxHeight: {
+    transform: _sizing.sizingTransform
+  },
+  minHeight: {
+    transform: _sizing.sizingTransform
+  },
+  boxSizing: {},
+  // typography
+  fontFamily: {
+    themeKey: 'typography'
+  },
+  fontSize: {
+    themeKey: 'typography'
+  },
+  fontStyle: {
+    themeKey: 'typography'
+  },
+  fontWeight: {
+    themeKey: 'typography'
+  },
+  letterSpacing: {},
+  textTransform: {},
+  lineHeight: {},
+  textAlign: {},
+  typography: {
+    cssProperty: false,
+    themeKey: 'typography'
+  }
+};
+var _default = defaultSxConfig;
+exports.default = _default;

package/styleFunctionSx/extendSxProp.js

@@ -8,15 +8,17 @@ exports.default = extendSxProp;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var _utils = require("@mui/utils");
-var _getThemeValue = require("../getThemeValue");
+var _defaultSxConfig = _interopRequireDefault(require("./defaultSxConfig"));
 const _excluded = ["sx"];
 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.default;
   Object.keys(props).forEach(prop => {
-    if (_getThemeValue.propToStyleFunction[prop]) {
+    if (config[prop]) {
       result.systemProps[prop] = props[prop];
     } else {
       result.otherProps[prop] = props[prop];

package/styleFunctionSx/index.d.ts

@@ -6,4 +6,8 @@ export * from './OverwriteCSSProperties';
 export * from './StandardCssProperties';
 
 export { default as extendSxProp } from './extendSxProp';
+
+export { default as unstable_defaultSxConfig } from './defaultSxConfig';
+export * from './defaultSxConfig';
+
 export * from './extendSxProp';

package/styleFunctionSx/index.js

@@ -22,7 +22,14 @@ Object.defineProperty(exports, "unstable_createStyleFunctionSx", {
     return _styleFunctionSx.unstable_createStyleFunctionSx;
   }
 });
+Object.defineProperty(exports, "unstable_defaultSxConfig", {
+  enumerable: true,
+  get: function () {
+    return _defaultSxConfig.default;
+  }
+});
 var _styleFunctionSx = _interopRequireWildcard(require("./styleFunctionSx"));
 var _extendSxProp = _interopRequireDefault(require("./extendSxProp"));
+var _defaultSxConfig = _interopRequireDefault(require("./defaultSxConfig"));
 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; }

package/styleFunctionSx/styleFunctionSx.d.ts

@@ -1,4 +1,5 @@
 import * as CSS from 'csstype';
+import { CSSObject } from '@mui/styled-engine';
 import { StandardCSSProperties } from './StandardCssProperties';
 import { AliasesCSSProperties } from './AliasesCSSProperties';
 import { OverwriteCSSProperties } from './OverwriteCSSProperties';
@@ -74,7 +75,7 @@ export type SxProps<Theme extends object = {}> =
     >;
 
 export interface StyleFunctionSx {
-  (props: object): object;
+  (props: object): CSSObject;
   filterProps?: string[];
 }
 

package/styleFunctionSx/styleFunctionSx.js

@@ -6,9 +6,11 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 exports.unstable_createStyleFunctionSx = unstable_createStyleFunctionSx;
+var _utils = require("@mui/utils");
 var _merge = _interopRequireDefault(require("../merge"));
-var _getThemeValue = require("../getThemeValue");
+var _style = require("../style");
 var _breakpoints = require("../breakpoints");
+var _defaultSxConfig = _interopRequireDefault(require("./defaultSxConfig"));
 function objectsHaveSameKeys(...objects) {
   const allKeys = objects.reduce((keys, object) => keys.concat(Object.keys(object)), []);
   const union = new Set(allKeys);
@@ -19,24 +21,48 @@ function callIfFn(maybeFn, arg) {
 }
 
 // eslint-disable-next-line @typescript-eslint/naming-convention
-function unstable_createStyleFunctionSx(styleFunctionMapping = _getThemeValue.styleFunctionMapping) {
-  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,
+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 = (0, _style.getPath)(theme, themeKey) || {};
+    if (style) {
+      return style(props);
+    }
+    const styleFromPropValue = propValueFinal => {
+      let value = (0, _style.getStyleValue)(themeMapping, transform, propValueFinal);
+      if (propValueFinal === value && typeof propValueFinal === 'string') {
+        // Haven't found value
+        value = (0, _style.getStyleValue)(themeMapping, transform, `${prop}${propValueFinal === 'default' ? '' : (0, _utils.unstable_capitalize)(propValueFinal)}`, propValueFinal);
+      }
+      if (cssProperty === false) {
+        return value;
+      }
+      return {
+        [cssProperty]: value
+      };
     };
+    return (0, _breakpoints.handleBreakpoints)(props, val, styleFromPropValue);
   }
   function styleFunctionSx(props) {
+    var _theme$unstable_sxCon;
     const {
       sx,
       theme = {}
@@ -45,6 +71,8 @@ function unstable_createStyleFunctionSx(styleFunctionMapping = _getThemeValue.st
       return null; // Emotion & styled-components will neglect null
     }
 
+    const config = (_theme$unstable_sxCon = theme.unstable_sxConfig) != null ? _theme$unstable_sxCon : _defaultSxConfig.default;
+
     /*
      * Receive `sxInput` as object or callback
      * and then recursively check keys & values to create media query object styles.
@@ -68,8 +96,8 @@ function unstable_createStyleFunctionSx(styleFunctionMapping = _getThemeValue.st
         const value = callIfFn(sxObject[styleKey], theme);
         if (value !== null && value !== undefined) {
           if (typeof value === 'object') {
-            if (propToStyleFunction[styleKey]) {
-              css = (0, _merge.default)(css, getThemeValue(styleKey, value, theme));
+            if (config[styleKey]) {
+              css = (0, _merge.default)(css, getThemeValue(styleKey, value, theme, config));
             } else {
               const breakpointsValues = (0, _breakpoints.handleBreakpoints)({
                 theme
@@ -86,7 +114,7 @@ function unstable_createStyleFunctionSx(styleFunctionMapping = _getThemeValue.st
               }
             }
           } else {
-            css = (0, _merge.default)(css, getThemeValue(styleKey, value, theme));
+            css = (0, _merge.default)(css, getThemeValue(styleKey, value, theme, config));
           }
         }
       });

package/esm/sx/index.js

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

package/esm/sx/sx.js

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

package/legacy/sx/index.js

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

package/legacy/sx/sx.js

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

package/modern/sx/index.js

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

package/modern/sx/sx.js

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

package/sx/index.d.ts

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

package/sx/index.js

@@ -1,13 +0,0 @@
-"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

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

package/sx/sx.d.ts

@@ -1,4 +0,0 @@
-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

@@ -1,18 +0,0 @@
-"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;