@mui/system 5.15.7 → 5.15.9

package/modern/createStyled.js

@@ -1,11 +1,12 @@
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["name", "slot", "skipVariantsResolver", "skipSx", "overridesResolver"];
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+const _excluded = ["ownerState"],
+  _excluded2 = ["variants"],
+  _excluded3 = ["name", "slot", "skipVariantsResolver", "skipSx", "overridesResolver"];
 /* eslint-disable no-underscore-dangle */
 import styledEngineStyled, { internal_processStyles as processStyles } from '@mui/styled-engine';
-import { getDisplayName, unstable_capitalize as capitalize, isPlainObject, deepmerge } from '@mui/utils';
+import { getDisplayName, unstable_capitalize as capitalize, isPlainObject } from '@mui/utils';
 import createTheme from './createTheme';
-import propsToClassKey from './propsToClassKey';
 import styleFunctionSx from './styleFunctionSx';
 function isEmpty(obj) {
   return Object.keys(obj).length === 0;
@@ -19,73 +20,6 @@ function isStringTag(tag) {
   // it's a lowercase character
   tag.charCodeAt(0) > 96;
 }
-const getStyleOverrides = (name, theme) => {
-  if (theme.components && theme.components[name] && theme.components[name].styleOverrides) {
-    return theme.components[name].styleOverrides;
-  }
-  return null;
-};
-const transformVariants = variants => {
-  let numOfCallbacks = 0;
-  const variantsStyles = {};
-  if (variants) {
-    variants.forEach(definition => {
-      let key = '';
-      if (typeof definition.props === 'function') {
-        key = `callback${numOfCallbacks}`;
-        numOfCallbacks += 1;
-      } else {
-        key = propsToClassKey(definition.props);
-      }
-      variantsStyles[key] = definition.style;
-    });
-  }
-  return variantsStyles;
-};
-const getVariantStyles = (name, theme) => {
-  let variants = [];
-  if (theme && theme.components && theme.components[name] && theme.components[name].variants) {
-    variants = theme.components[name].variants;
-  }
-  return transformVariants(variants);
-};
-const variantsResolver = (props, styles, variants) => {
-  const {
-    ownerState = {}
-  } = props;
-  const variantsStyles = [];
-  let numOfCallbacks = 0;
-  if (variants) {
-    variants.forEach(variant => {
-      let isMatch = true;
-      if (typeof variant.props === 'function') {
-        const propsToCheck = _extends({}, props, ownerState);
-        isMatch = variant.props(propsToCheck);
-      } else {
-        Object.keys(variant.props).forEach(key => {
-          if (ownerState[key] !== variant.props[key] && props[key] !== variant.props[key]) {
-            isMatch = false;
-          }
-        });
-      }
-      if (isMatch) {
-        if (typeof variant.props === 'function') {
-          variantsStyles.push(styles[`callback${numOfCallbacks}`]);
-        } else {
-          variantsStyles.push(styles[propsToClassKey(variant.props)]);
-        }
-      }
-      if (typeof variant.props === 'function') {
-        numOfCallbacks += 1;
-      }
-    });
-  }
-  return variantsStyles;
-};
-const themeVariantsResolver = (props, styles, theme, name) => {
-  const themeVariants = theme?.components?.[name]?.variants;
-  return variantsResolver(props, styles, themeVariants);
-};
 
 // Update /system/styled/#api in case if this changes
 export function shouldForwardProp(prop) {
@@ -111,29 +45,51 @@ function defaultOverridesResolver(slot) {
   }
   return (props, styles) => styles[slot];
 }
-const muiStyledFunctionResolver = ({
-  styledArg,
-  props,
-  defaultTheme,
-  themeId
-}) => {
-  const resolvedStyles = styledArg(_extends({}, props, {
-    theme: resolveTheme(_extends({}, props, {
-      defaultTheme,
-      themeId
-    }))
-  }));
-  let optionalVariants;
-  if (resolvedStyles && resolvedStyles.variants) {
-    optionalVariants = resolvedStyles.variants;
-    delete resolvedStyles.variants;
+function processStyleArg(callableStyle, _ref) {
+  let {
+      ownerState
+    } = _ref,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded);
+  const resolvedStylesArg = typeof callableStyle === 'function' ? callableStyle(_extends({
+    ownerState
+  }, props)) : callableStyle;
+  if (Array.isArray(resolvedStylesArg)) {
+    return resolvedStylesArg.flatMap(resolvedStyle => processStyleArg(resolvedStyle, _extends({
+      ownerState
+    }, props)));
   }
-  if (optionalVariants) {
-    const variantsStyles = variantsResolver(props, transformVariants(optionalVariants), optionalVariants);
-    return [resolvedStyles, ...variantsStyles];
+  if (!!resolvedStylesArg && typeof resolvedStylesArg === 'object' && Array.isArray(resolvedStylesArg.variants)) {
+    const {
+        variants = []
+      } = resolvedStylesArg,
+      otherStyles = _objectWithoutPropertiesLoose(resolvedStylesArg, _excluded2);
+    let result = otherStyles;
+    variants.forEach(variant => {
+      let isMatch = true;
+      if (typeof variant.props === 'function') {
+        isMatch = variant.props(_extends({
+          ownerState
+        }, props));
+      } else {
+        Object.keys(variant.props).forEach(key => {
+          if (ownerState?.[key] !== variant.props[key] && props[key] !== variant.props[key]) {
+            isMatch = false;
+          }
+        });
+      }
+      if (isMatch) {
+        if (!Array.isArray(result)) {
+          result = [result];
+        }
+        result.push(typeof variant.style === 'function' ? variant.style(_extends({
+          ownerState
+        }, props)) : variant.style);
+      }
+    });
+    return result;
   }
-  return resolvedStyles;
-};
+  return resolvedStylesArg;
+}
 export default function createStyled(input = {}) {
   const {
     themeId,
@@ -162,7 +118,7 @@ export default function createStyled(input = {}) {
         // For more details: https://github.com/mui/material-ui/pull/37908
         overridesResolver = defaultOverridesResolver(lowercaseFirstLetter(componentSlot))
       } = inputOptions,
-      options = _objectWithoutPropertiesLoose(inputOptions, _excluded);
+      options = _objectWithoutPropertiesLoose(inputOptions, _excluded3);
 
     // if skipVariantsResolver option is defined, take the value, otherwise, true for root and false for other slots.
     const skipVariantsResolver = inputSkipVariantsResolver !== undefined ? inputSkipVariantsResolver :
@@ -195,83 +151,42 @@ export default function createStyled(input = {}) {
       shouldForwardProp: shouldForwardPropOption,
       label
     }, options));
-    const muiStyledResolver = (styleArg, ...expressions) => {
-      const expressionsWithDefaultTheme = expressions ? expressions.map(stylesArg => {
-        // On the server Emotion doesn't use React.forwardRef for creating components, so the created
-        // component stays as a function. This condition makes sure that we do not interpolate functions
-        // which are basically components used as a selectors.
-        if (typeof stylesArg === 'function' && stylesArg.__emotion_real !== stylesArg) {
-          return props => muiStyledFunctionResolver({
-            styledArg: stylesArg,
-            props,
-            defaultTheme,
-            themeId
-          });
-        }
-        if (isPlainObject(stylesArg)) {
-          let transformedStylesArg = stylesArg;
-          let styledArgVariants;
-          if (stylesArg && stylesArg.variants) {
-            styledArgVariants = stylesArg.variants;
-            delete transformedStylesArg.variants;
-            transformedStylesArg = props => {
-              let result = stylesArg;
-              const variantStyles = variantsResolver(props, transformVariants(styledArgVariants), styledArgVariants);
-              variantStyles.forEach(variantStyle => {
-                result = deepmerge(result, variantStyle);
-              });
-              return result;
-            };
-          }
-          return transformedStylesArg;
-        }
-        return stylesArg;
-      }) : [];
-      let transformedStyleArg = styleArg;
-      if (isPlainObject(styleArg)) {
-        let styledArgVariants;
-        if (styleArg && styleArg.variants) {
-          styledArgVariants = styleArg.variants;
-          delete transformedStyleArg.variants;
-          transformedStyleArg = props => {
-            let result = styleArg;
-            const variantStyles = variantsResolver(props, transformVariants(styledArgVariants), styledArgVariants);
-            variantStyles.forEach(variantStyle => {
-              result = deepmerge(result, variantStyle);
-            });
-            return result;
-          };
-        }
-      } else if (typeof styleArg === 'function' &&
+    const transformStyleArg = stylesArg => {
       // On the server Emotion doesn't use React.forwardRef for creating components, so the created
       // component stays as a function. This condition makes sure that we do not interpolate functions
       // which are basically components used as a selectors.
-      styleArg.__emotion_real !== styleArg) {
-        // If the type is function, we need to define the default theme.
-        transformedStyleArg = props => muiStyledFunctionResolver({
-          styledArg: styleArg,
-          props,
-          defaultTheme,
-          themeId
-        });
+      if (typeof stylesArg === 'function' && stylesArg.__emotion_real !== stylesArg || isPlainObject(stylesArg)) {
+        return props => processStyleArg(stylesArg, _extends({}, props, {
+          theme: resolveTheme({
+            theme: props.theme,
+            defaultTheme,
+            themeId
+          })
+        }));
       }
+      return stylesArg;
+    };
+    const muiStyledResolver = (styleArg, ...expressions) => {
+      let transformedStyleArg = transformStyleArg(styleArg);
+      const expressionsWithDefaultTheme = expressions ? expressions.map(transformStyleArg) : [];
       if (componentName && overridesResolver) {
         expressionsWithDefaultTheme.push(props => {
           const theme = resolveTheme(_extends({}, props, {
             defaultTheme,
             themeId
           }));
-          const styleOverrides = getStyleOverrides(componentName, theme);
-          if (styleOverrides) {
-            const resolvedStyleOverrides = {};
-            Object.entries(styleOverrides).forEach(([slotKey, slotStyle]) => {
-              resolvedStyleOverrides[slotKey] = typeof slotStyle === 'function' ? slotStyle(_extends({}, props, {
-                theme
-              })) : slotStyle;
-            });
-            return overridesResolver(props, resolvedStyleOverrides);
+          if (!theme.components || !theme.components[componentName] || !theme.components[componentName].styleOverrides) {
+            return null;
           }
-          return null;
+          const styleOverrides = theme.components[componentName].styleOverrides;
+          const resolvedStyleOverrides = {};
+          // TODO: v7 remove iteration and use `resolveStyleArg(styleOverrides[slot])` directly
+          Object.entries(styleOverrides).forEach(([slotKey, slotStyle]) => {
+            resolvedStyleOverrides[slotKey] = processStyleArg(slotStyle, _extends({}, props, {
+              theme
+            }));
+          });
+          return overridesResolver(props, resolvedStyleOverrides);
         });
       }
       if (componentName && !skipVariantsResolver) {
@@ -280,7 +195,12 @@ export default function createStyled(input = {}) {
             defaultTheme,
             themeId
           }));
-          return themeVariantsResolver(props, getVariantStyles(componentName, theme), theme, componentName);
+          const themeVariants = theme?.components?.[componentName]?.variants;
+          return processStyleArg({
+            variants: themeVariants
+          }, _extends({}, props, {
+            theme
+          }));
         });
       }
       if (!skipSx) {

package/modern/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/system v5.15.7
+ * @mui/system v5.15.9
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/system",
-  "version": "5.15.7",
+  "version": "5.15.9",
   "private": false,
   "author": "MUI Team",
   "description": "MUI System is a set of CSS utilities to help you build custom designs more efficiently. It makes it possible to rapidly lay out custom designs.",
@@ -28,12 +28,12 @@
   "dependencies": {
     "@babel/runtime": "^7.23.9",
     "clsx": "^2.1.0",
-    "csstype": "^3.1.2",
+    "csstype": "^3.1.3",
     "prop-types": "^15.8.1",
+    "@mui/private-theming": "^5.15.9",
     "@mui/types": "^7.2.13",
-    "@mui/styled-engine": "^5.15.7",
-    "@mui/utils": "^5.15.7",
-    "@mui/private-theming": "^5.15.7"
+    "@mui/styled-engine": "^5.15.9",
+    "@mui/utils": "^5.15.9"
   },
   "peerDependencies": {
     "@emotion/react": "^11.5.0",

package/spacing.d.ts

@@ -5,11 +5,11 @@ export type SpacingProps = PropsFor<typeof spacing>;
 export function createUnarySpacing<Spacing>(theme: { spacing: Spacing }): Spacing extends number
   ? (abs: number | string) => number | number
   : Spacing extends any[]
-  ? <Index extends number>(abs: Index | string) => Spacing[Index] | string
-  : Spacing extends (...args: unknown[]) => unknown
-  ? Spacing
-  : // warns in Dev
-    () => undefined;
+    ? <Index extends number>(abs: Index | string) => Spacing[Index] | string
+    : Spacing extends (...args: unknown[]) => unknown
+      ? Spacing
+      : // warns in Dev
+        () => undefined;
 
 export function createUnaryUnit<Spacing>(
   theme: { spacing: Spacing },
@@ -19,11 +19,11 @@ export function createUnaryUnit<Spacing>(
 ): Spacing extends number
   ? (abs: SpacingValueType) => number | number
   : Spacing extends any[]
-  ? <Index extends number>(abs: Index | string) => Spacing[Index] | string
-  : Spacing extends (...args: unknown[]) => unknown
-  ? Spacing
-  : // warns in Dev
-    () => undefined;
+    ? <Index extends number>(abs: Index | string) => Spacing[Index] | string
+    : Spacing extends (...args: unknown[]) => unknown
+      ? Spacing
+      : // warns in Dev
+        () => undefined;
 
 export const margin: SimpleStyleFunction<
   | 'm'

package/styleFunctionSx/styleFunctionSx.d.ts

@@ -9,7 +9,7 @@ import { OverwriteCSSProperties } from './OverwriteCSSProperties';
  * Note that this extends to non-theme values also. For example `display=['none', 'block']`
  * will also works.
  */
-export type ResponsiveStyleValue<T> = T | Array<T | null> | { [key: string]: T | null };
+export type ResponsiveStyleValue<T> = T | ReadonlyArray<T | null> | { [key: string]: T | null };
 
 /**
  * Map of all CSS pseudo selectors (`:hover`, `:focus`, ...).