@mui/system 5.10.16 → 5.11.0

package/modern/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/modern/styleFunctionSx/extendSxProp.js

@@ -2,14 +2,15 @@ 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 => {
   const result = {
     systemProps: {},
     otherProps: {}
   };
+  const config = props?.theme?.unstable_sxConfig ?? defaultSxConfig;
   Object.keys(props).forEach(prop => {
-    if (propToStyleFunction[prop]) {
+    if (config[prop]) {
       result.systemProps[prop] = props[prop];
     } else {
       result.otherProps[prop] = props[prop];

package/modern/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/modern/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,22 +13,45 @@ 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) {
     const {
@@ -37,6 +62,8 @@ export function unstable_createStyleFunctionSx(styleFunctionMapping = defaultSty
       return null; // Emotion & styled-components will neglect null
     }
 
+    const config = theme.unstable_sxConfig ?? defaultSxConfig;
+
     /*
      * Receive `sxInput` as object or callback
      * and then recursively check keys & values to create media query object styles.
@@ -60,8 +87,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 +105,7 @@ export function unstable_createStyleFunctionSx(styleFunctionMapping = defaultSty
               }
             }
           } else {
-            css = merge(css, getThemeValue(styleKey, value, theme));
+            css = merge(css, getThemeValue(styleKey, value, theme, config));
           }
         }
       });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/system",
-  "version": "5.10.16",
+  "version": "5.11.0",
   "private": false,
   "author": "MUI Team",
   "description": "CSS utilities for rapidly laying out custom designs.",
@@ -43,11 +43,11 @@
     }
   },
   "dependencies": {
-    "@babel/runtime": "^7.20.1",
-    "@mui/private-theming": "^5.10.16",
-    "@mui/styled-engine": "^5.10.16",
-    "@mui/types": "^7.2.2",
-    "@mui/utils": "^5.10.16",
+    "@babel/runtime": "^7.20.6",
+    "@mui/private-theming": "^5.11.0",
+    "@mui/styled-engine": "^5.11.0",
+    "@mui/types": "^7.2.3",
+    "@mui/utils": "^5.11.0",
     "clsx": "^1.2.1",
     "csstype": "^3.1.1",
     "prop-types": "^15.8.1"

package/palette.js

@@ -5,9 +5,10 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.color = exports.bgcolor = exports.backgroundColor = void 0;
+exports.paletteTransform = paletteTransform;
 var _style = _interopRequireDefault(require("./style"));
 var _compose = _interopRequireDefault(require("./compose"));
-function transform(value, userValue) {
+function paletteTransform(value, userValue) {
   if (userValue === 'grey') {
     return userValue;
   }
@@ -16,20 +17,20 @@ function transform(value, userValue) {
 const color = (0, _style.default)({
   prop: 'color',
   themeKey: 'palette',
-  transform
+  transform: paletteTransform
 });
 exports.color = color;
 const bgcolor = (0, _style.default)({
   prop: 'bgcolor',
   cssProperty: 'backgroundColor',
   themeKey: 'palette',
-  transform
+  transform: paletteTransform
 });
 exports.bgcolor = bgcolor;
 const backgroundColor = (0, _style.default)({
   prop: 'backgroundColor',
   themeKey: 'palette',
-  transform
+  transform: paletteTransform
 });
 exports.backgroundColor = backgroundColor;
 const palette = (0, _compose.default)(color, bgcolor, backgroundColor);

package/sizing.js

@@ -4,16 +4,18 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.width = exports.sizeWidth = exports.sizeHeight = exports.minWidth = exports.minHeight = exports.maxWidth = exports.maxHeight = exports.height = exports.default = exports.boxSizing = void 0;
+exports.sizeWidth = exports.sizeHeight = exports.minWidth = exports.minHeight = exports.maxWidth = exports.maxHeight = exports.height = exports.default = exports.boxSizing = void 0;
+exports.sizingTransform = sizingTransform;
+exports.width = void 0;
 var _style = _interopRequireDefault(require("./style"));
 var _compose = _interopRequireDefault(require("./compose"));
 var _breakpoints = require("./breakpoints");
-function transform(value) {
+function sizingTransform(value) {
   return value <= 1 && value !== 0 ? `${value * 100}%` : value;
 }
 const width = (0, _style.default)({
   prop: 'width',
-  transform
+  transform: sizingTransform
 });
 exports.width = width;
 const maxWidth = props => {
@@ -22,7 +24,7 @@ const maxWidth = props => {
       var _props$theme, _props$theme$breakpoi, _props$theme$breakpoi2;
       const breakpoint = ((_props$theme = props.theme) == null ? void 0 : (_props$theme$breakpoi = _props$theme.breakpoints) == null ? void 0 : (_props$theme$breakpoi2 = _props$theme$breakpoi.values) == null ? void 0 : _props$theme$breakpoi2[propValue]) || _breakpoints.values[propValue];
       return {
-        maxWidth: breakpoint || transform(propValue)
+        maxWidth: breakpoint || sizingTransform(propValue)
       };
     };
     return (0, _breakpoints.handleBreakpoints)(props, props.maxWidth, styleFromPropValue);
@@ -33,34 +35,34 @@ exports.maxWidth = maxWidth;
 maxWidth.filterProps = ['maxWidth'];
 const minWidth = (0, _style.default)({
   prop: 'minWidth',
-  transform
+  transform: sizingTransform
 });
 exports.minWidth = minWidth;
 const height = (0, _style.default)({
   prop: 'height',
-  transform
+  transform: sizingTransform
 });
 exports.height = height;
 const maxHeight = (0, _style.default)({
   prop: 'maxHeight',
-  transform
+  transform: sizingTransform
 });
 exports.maxHeight = maxHeight;
 const minHeight = (0, _style.default)({
   prop: 'minHeight',
-  transform
+  transform: sizingTransform
 });
 exports.minHeight = minHeight;
 const sizeWidth = (0, _style.default)({
   prop: 'size',
   cssProperty: 'width',
-  transform
+  transform: sizingTransform
 });
 exports.sizeWidth = sizeWidth;
 const sizeHeight = (0, _style.default)({
   prop: 'size',
   cssProperty: 'height',
-  transform
+  transform: sizingTransform
 });
 exports.sizeHeight = sizeHeight;
 const boxSizing = (0, _style.default)({

package/spacing.js

@@ -10,7 +10,9 @@ exports.default = void 0;
 exports.getStyleFromPropValue = getStyleFromPropValue;
 exports.getValue = getValue;
 exports.margin = margin;
+exports.marginKeys = void 0;
 exports.padding = padding;
+exports.paddingKeys = void 0;
 var _responsivePropType = _interopRequireDefault(require("./responsivePropType"));
 var _breakpoints = require("./breakpoints");
 var _style = require("./style");
@@ -53,7 +55,9 @@ const getCssProperties = (0, _memoize.default)(prop => {
   return Array.isArray(direction) ? direction.map(dir => property + dir) : [property + direction];
 });
 const marginKeys = ['m', 'mt', 'mr', 'mb', 'ml', 'mx', 'my', 'margin', 'marginTop', 'marginRight', 'marginBottom', 'marginLeft', 'marginX', 'marginY', 'marginInline', 'marginInlineStart', 'marginInlineEnd', 'marginBlock', 'marginBlockStart', 'marginBlockEnd'];
+exports.marginKeys = marginKeys;
 const paddingKeys = ['p', 'pt', 'pr', 'pb', 'pl', 'px', 'py', 'padding', 'paddingTop', 'paddingRight', 'paddingBottom', 'paddingLeft', 'paddingX', 'paddingY', 'paddingInline', 'paddingInlineStart', 'paddingInlineEnd', 'paddingBlock', 'paddingBlockStart', 'paddingBlockEnd'];
+exports.paddingKeys = paddingKeys;
 const spacingKeys = [...marginKeys, ...paddingKeys];
 function createUnaryUnit(theme, themeKey, defaultValue, propName) {
   var _getPath;

package/style.d.ts

@@ -1,6 +1,11 @@
 import { CSSObject } from '@mui/styled-engine';
 import { StyleFunction } from './Box';
 
+export type TransformFunction = (
+  cssValue: unknown,
+  userValue: unknown,
+) => number | string | React.CSSProperties | CSSObject;
+
 export interface StyleOptions<PropKey> {
   cssProperty?: PropKey | keyof React.CSSProperties | false;
   prop: PropKey;
@@ -8,18 +13,15 @@ export interface StyleOptions<PropKey> {
    * dot access in `Theme`
    */
   themeKey?: string;
-  transform?: (
-    cssValue: unknown,
-    userValue: unknown,
-  ) => number | string | React.CSSProperties | CSSObject;
+  transform?: TransformFunction;
 }
 export function style<PropKey extends string, Theme extends object>(
   options: StyleOptions<PropKey>,
 ): StyleFunction<{ [K in PropKey]?: unknown } & { theme?: Theme }> & { filterProps: string[] };
 export function getPath<T>(obj: T, path: string | undefined, checkVars?: boolean): null | unknown;
 export function getStyleValue(
-  themeMapping: object | ((val: any) => any),
-  transform?: (val: any, userVal: any) => any,
-  propValueFinal?: any,
-  userValue?: any,
+  themeMapping: object | ((arg: any) => any),
+  transform: TransformFunction | null,
+  propValueFinal: unknown,
+  userValue?: unknown,
 ): any;

package/style.js

@@ -39,7 +39,7 @@ function getStyleValue(themeMapping, transform, propValueFinal, userValue = prop
     value = getPath(themeMapping, propValueFinal) || userValue;
   }
   if (transform) {
-    value = transform(value, userValue);
+    value = transform(value, userValue, themeMapping);
   }
   return value;
 }
@@ -50,6 +50,9 @@ function style(options) {
     themeKey,
     transform
   } = options;
+
+  // false positive
+  // eslint-disable-next-line react/function-component-definition
   const fn = props => {
     if (props[prop] == null) {
       return null;

package/styleFunctionSx/defaultSxConfig.d.ts

@@ -0,0 +1,20 @@
+import { StyleFunction } from '../Box';
+import { TransformFunction } from '../style';
+
+type SimpleStyleFunction<PropKey extends keyof any> = StyleFunction<Partial<Record<PropKey, any>>>;
+
+export interface SxConfigRecord {
+  cssProperty?: keyof React.CSSProperties | false;
+  /**
+   * dot access in `Theme`
+   */
+  themeKey?: string;
+  transform?: TransformFunction;
+  style?: SimpleStyleFunction<any>;
+}
+
+export type SxConfig = Record<string, SxConfigRecord>;
+
+declare const defaultSxConfig: SxConfig;
+
+export default defaultSxConfig;