@mui/system 5.0.3 → 5.1.0

package/modern/styleFunctionSx/styleFunctionSx.js

@@ -14,53 +14,63 @@ function callIfFn(maybeFn, arg) {
 
 function styleFunctionSx(props) {
   const {
-    sx: styles,
+    sx,
     theme = {}
   } = props || {};
 
-  if (!styles) {
-    return null;
+  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`)
+   */
 
-  if (typeof styles === 'function') {
-    return styles(theme);
-  }
 
-  if (typeof styles !== 'object') {
-    // value
-    return styles;
-  }
+  function traverse(sxInput) {
+    let sxObject = sxInput;
 
-  const emptyBreakpoints = createEmptyBreakpointObject(theme.breakpoints);
-  const breakpointsKeys = Object.keys(emptyBreakpoints);
-  let css = emptyBreakpoints;
-  Object.keys(styles).forEach(styleKey => {
-    const value = callIfFn(styles[styleKey], theme);
+    if (typeof sxInput === 'function') {
+      sxObject = sxInput(theme);
+    } else if (typeof sxInput !== 'object') {
+      // value
+      return sxInput;
+    }
 
-    if (typeof value === 'object') {
-      if (propToStyleFunction[styleKey]) {
-        css = merge(css, getThemeValue(styleKey, value, theme));
-      } else {
-        const breakpointsValues = handleBreakpoints({
-          theme
-        }, value, x => ({
-          [styleKey]: x
-        }));
+    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 (objectsHaveSameKeys(breakpointsValues, value)) {
-          css[styleKey] = styleFunctionSx({
-            sx: value,
-            theme
-          });
+      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);
 }
 
 styleFunctionSx.filterProps = ['sx'];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/system",
-  "version": "5.0.3",
+  "version": "5.1.0",
   "private": false,
   "author": "MUI Team",
   "description": "CSS utilities for rapidly laying out custom designs.",
@@ -8,7 +8,7 @@
   "keywords": [
     "react",
     "react-component",
-    "material-ui",
+    "mui",
     "system"
   ],
   "repository": {
@@ -26,7 +26,7 @@
     "url": "https://opencollective.com/material-ui"
   },
   "peerDependencies": {
-    "@emotion/react": "^11.4.1",
+    "@emotion/react": "^11.5.0",
     "@emotion/styled": "^11.3.0",
     "@types/react": "^16.8.6 || ^17.0.0",
     "react": "^17.0.2"
@@ -43,11 +43,11 @@
     }
   },
   "dependencies": {
-    "@babel/runtime": "^7.15.4",
-    "@mui/private-theming": "^5.0.1",
-    "@mui/styled-engine": "^5.0.1",
-    "@mui/types": "^7.0.0",
-    "@mui/utils": "^5.0.1",
+    "@babel/runtime": "^7.16.0",
+    "@mui/private-theming": "^5.1.0",
+    "@mui/styled-engine": "^5.1.0",
+    "@mui/types": "^7.1.0",
+    "@mui/utils": "^5.1.0",
     "clsx": "^1.1.1",
     "csstype": "^3.0.9",
     "prop-types": "^15.7.2"

package/palette.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.backgroundColor = exports.bgcolor = exports.color = void 0;
+exports.default = exports.color = exports.bgcolor = exports.backgroundColor = void 0;
 
 var _style = _interopRequireDefault(require("./style"));
 

package/positions.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.left = exports.bottom = exports.right = exports.top = exports.zIndex = exports.position = void 0;
+exports.zIndex = exports.top = exports.right = exports.position = exports.left = exports.default = exports.bottom = void 0;
 
 var _style = _interopRequireDefault(require("./style"));
 

package/sizing.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.boxSizing = exports.sizeHeight = exports.sizeWidth = exports.minHeight = exports.maxHeight = exports.height = exports.minWidth = exports.maxWidth = exports.width = void 0;
+exports.width = exports.sizeWidth = exports.sizeHeight = exports.minWidth = exports.minHeight = exports.maxWidth = exports.maxHeight = exports.height = exports.default = exports.boxSizing = void 0;
 
 var _style = _interopRequireDefault(require("./style"));
 

package/spacing.js

@@ -5,13 +5,13 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.createUnaryUnit = createUnaryUnit;
 exports.createUnarySpacing = createUnarySpacing;
-exports.getValue = getValue;
+exports.createUnaryUnit = createUnaryUnit;
+exports.default = void 0;
 exports.getStyleFromPropValue = getStyleFromPropValue;
+exports.getValue = getValue;
 exports.margin = margin;
 exports.padding = padding;
-exports.default = void 0;
 
 var _responsivePropType = _interopRequireDefault(require("./responsivePropType"));
 

package/style.d.ts

@@ -1,5 +1,5 @@
+import { CSSObject } from '@mui/styled-engine';
 import { StyleFunction } from './Box';
-import { CSSObject } from './createStyled';
 
 export interface StyleOptions<PropKey> {
   cssProperty?: PropKey | keyof React.CSSProperties | false;
@@ -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 }>;

package/style.js

@@ -5,8 +5,8 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.getPath = getPath;
 exports.default = void 0;
+exports.getPath = getPath;
 
 var _utils = require("@mui/utils");
 

package/styleFunctionSx/extendSxProp.js

@@ -11,6 +11,8 @@ 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");
 
 const _excluded = ["sx"];
@@ -39,7 +41,25 @@ function extendSxProp(props) {
     systemProps,
     otherProps
   } = splitProps(other);
+  let finalSx;
+
+  if (Array.isArray(inSx)) {
+    finalSx = [systemProps, ...inSx];
+  } else if (typeof inSx === 'function') {
+    finalSx = (...args) => {
+      const result = inSx(...args);
+
+      if (!(0, _utils.isPlainObject)(result)) {
+        return systemProps;
+      }
+
+      return (0, _extends2.default)({}, systemProps, result);
+    };
+  } else {
+    finalSx = (0, _extends2.default)({}, systemProps, inSx);
+  }
+
   return (0, _extends2.default)({}, otherProps, {
-    sx: (0, _extends2.default)({}, systemProps, inSx)
+    sx: finalSx
   });
 }

package/styleFunctionSx/styleFunctionSx.d.ts

@@ -51,7 +51,13 @@ export type SystemStyleObject<Theme extends object = {}> =
   | CSSSelectorObject<Theme>
   | null;
 
-export type SxProps<Theme extends object = {}> = SystemStyleObject<Theme>;
+/**
+ * The `SxProps` can be either object or function
+ */
+export type SxProps<Theme extends object = {}> =
+  | SystemStyleObject<Theme>
+  | ((theme: Theme) => SystemStyleObject<Theme>)
+  | Array<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.js

@@ -29,53 +29,63 @@ function callIfFn(maybeFn, arg) {
 
 function styleFunctionSx(props) {
   const {
-    sx: styles,
+    sx,
     theme = {}
   } = props || {};
 
-  if (!styles) {
-    return null;
+  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`)
+   */
 
-  if (typeof styles === 'function') {
-    return styles(theme);
-  }
 
-  if (typeof styles !== 'object') {
-    // value
-    return styles;
-  }
+  function traverse(sxInput) {
+    let sxObject = sxInput;
 
-  const emptyBreakpoints = (0, _breakpoints.createEmptyBreakpointObject)(theme.breakpoints);
-  const breakpointsKeys = Object.keys(emptyBreakpoints);
-  let css = emptyBreakpoints;
-  Object.keys(styles).forEach(styleKey => {
-    const value = callIfFn(styles[styleKey], theme);
+    if (typeof sxInput === 'function') {
+      sxObject = sxInput(theme);
+    } else if (typeof sxInput !== 'object') {
+      // value
+      return sxInput;
+    }
 
-    if (typeof value === 'object') {
-      if (_getThemeValue.propToStyleFunction[styleKey]) {
-        css = (0, _merge.default)(css, (0, _getThemeValue.default)(styleKey, value, theme));
-      } else {
-        const breakpointsValues = (0, _breakpoints.handleBreakpoints)({
-          theme
-        }, value, x => ({
-          [styleKey]: x
-        }));
-
-        if (objectsHaveSameKeys(breakpointsValues, value)) {
-          css[styleKey] = styleFunctionSx({
-            sx: value,
-            theme
-          });
+    const emptyBreakpoints = (0, _breakpoints.createEmptyBreakpointObject)(theme.breakpoints);
+    const breakpointsKeys = Object.keys(emptyBreakpoints);
+    let css = emptyBreakpoints;
+    Object.keys(sxObject).forEach(styleKey => {
+      const value = callIfFn(sxObject[styleKey], theme);
+
+      if (typeof value === 'object') {
+        if (_getThemeValue.propToStyleFunction[styleKey]) {
+          css = (0, _merge.default)(css, (0, _getThemeValue.default)(styleKey, value, theme));
         } else {
-          css = (0, _merge.default)(css, breakpointsValues);
+          const breakpointsValues = (0, _breakpoints.handleBreakpoints)({
+            theme
+          }, value, x => ({
+            [styleKey]: x
+          }));
+
+          if (objectsHaveSameKeys(breakpointsValues, value)) {
+            css[styleKey] = styleFunctionSx({
+              sx: value,
+              theme
+            });
+          } else {
+            css = (0, _merge.default)(css, breakpointsValues);
+          }
         }
+      } else {
+        css = (0, _merge.default)(css, (0, _getThemeValue.default)(styleKey, value, theme));
       }
-    } else {
-      css = (0, _merge.default)(css, (0, _getThemeValue.default)(styleKey, value, theme));
-    }
-  });
-  return (0, _breakpoints.removeUnusedBreakpoints)(breakpointsKeys, css);
+    });
+    return (0, _breakpoints.removeUnusedBreakpoints)(breakpointsKeys, css);
+  }
+
+  return Array.isArray(sx) ? sx.map(traverse) : traverse(sx);
 }
 
 styleFunctionSx.filterProps = ['sx'];

package/styleFunctionSx/styleFunctionSx.spec.d.ts

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

package/typography.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.typographyVariant = exports.textAlign = exports.lineHeight = exports.letterSpacing = exports.fontWeight = exports.fontStyle = exports.fontSize = exports.fontFamily = void 0;
+exports.typographyVariant = exports.textAlign = exports.lineHeight = exports.letterSpacing = exports.fontWeight = exports.fontStyle = exports.fontSize = exports.fontFamily = exports.default = void 0;
 
 var _style = _interopRequireDefault(require("./style"));
 

package/useTheme.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.systemDefaultTheme = void 0;
+exports.systemDefaultTheme = exports.default = void 0;
 
 var _createTheme = _interopRequireDefault(require("./createTheme"));