@mui/system 6.1.1 → 6.1.3

package/createStyled/createStyled.js

@@ -1,104 +1,119 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = createStyled;
+exports.shouldForwardProp = shouldForwardProp;
+exports.systemDefaultTheme = void 0;
+var _styledEngine = _interopRequireWildcard(require("@mui/styled-engine"));
+var _deepmerge = require("@mui/utils/deepmerge");
+var _capitalize = _interopRequireDefault(require("@mui/utils/capitalize"));
+var _getDisplayName = _interopRequireDefault(require("@mui/utils/getDisplayName"));
+var _createTheme = _interopRequireDefault(require("../createTheme"));
+var _styleFunctionSx = _interopRequireDefault(require("../styleFunctionSx"));
+var _preprocessStyles = _interopRequireDefault(require("../preprocessStyles"));
 /* eslint-disable no-underscore-dangle */
-import styledEngineStyled, { internal_processStyles as processStyles } from '@mui/styled-engine';
-import { isPlainObject } from '@mui/utils/deepmerge';
-import capitalize from '@mui/utils/capitalize';
-import getDisplayName from '@mui/utils/getDisplayName';
-import createTheme from "../createTheme/index.js";
-import styleFunctionSx from "../styleFunctionSx/index.js";
-export const systemDefaultTheme = createTheme();
+/* eslint-disable no-labels */
+/* eslint-disable no-lone-blocks */
+
+const systemDefaultTheme = exports.systemDefaultTheme = (0, _createTheme.default)();
 
 // Update /system/styled/#api in case if this changes
-export function shouldForwardProp(prop) {
+function shouldForwardProp(prop) {
   return prop !== 'ownerState' && prop !== 'theme' && prop !== 'sx' && prop !== 'as';
 }
-function resolveTheme(themeId, theme, defaultTheme) {
-  return isObjectEmpty(theme) ? defaultTheme : theme[themeId] || theme;
-}
-const PROCESSED_PROPS = Symbol('mui.processed_props');
-function attachTheme(props, themeId, defaultTheme) {
-  if (PROCESSED_PROPS in props) {
-    return props[PROCESSED_PROPS];
-  }
-  const processedProps = {
-    ...props,
-    theme: resolveTheme(themeId, props.theme, defaultTheme)
-  };
-  props[PROCESSED_PROPS] = processedProps;
-  processedProps[PROCESSED_PROPS] = processedProps;
-  return processedProps;
-}
 function defaultOverridesResolver(slot) {
   if (!slot) {
     return null;
   }
   return (_props, styles) => styles[slot];
 }
-function processStyle(style, props) {
+function attachTheme(props, themeId, defaultTheme) {
+  props.theme = isObjectEmpty(props.theme) ? defaultTheme : props.theme[themeId] || props.theme;
+}
+function processStyle(props, style) {
+  /*
+   * Style types:
+   *  - null/undefined
+   *  - string
+   *  - CSS style object: { [cssKey]: [cssValue], variants }
+   *  - Processed style object: { style, variants, isProcessed: true }
+   *  - Array of any of the above
+   */
+
   const resolvedStyle = typeof style === 'function' ? style(props) : style;
   if (Array.isArray(resolvedStyle)) {
-    return resolvedStyle.flatMap(subStyle => processStyle(subStyle, props));
+    return resolvedStyle.flatMap(subStyle => processStyle(props, subStyle));
   }
   if (Array.isArray(resolvedStyle?.variants)) {
-    const {
-      variants,
-      ...otherStyles
-    } = resolvedStyle;
-    let result = otherStyles;
-    let mergedState; // We might not need it, initalized lazily
+    let rootStyle;
+    if (resolvedStyle.isProcessed) {
+      rootStyle = resolvedStyle.style;
+    } else {
+      const {
+        variants,
+        ...otherStyles
+      } = resolvedStyle;
+      rootStyle = otherStyles;
+    }
+    return processStyleVariants(props, resolvedStyle.variants, [rootStyle]);
+  }
+  if (resolvedStyle?.isProcessed) {
+    return resolvedStyle.style;
+  }
+  return resolvedStyle;
+}
+function processStyleVariants(props, variants, results = []) {
+  let mergedState; // We might not need it, initialized lazily
 
-    /* eslint-disable no-labels */
-    variantLoop: for (let i = 0; i < variants.length; i += 1) {
-      const variant = variants[i];
-      if (typeof variant.props === 'function') {
-        mergedState ??= {
-          ...props,
-          ...props.ownerState,
-          ownerState: props.ownerState
-        };
-        if (!variant.props(mergedState)) {
-          continue;
-        }
-      } else {
-        for (const key in variant.props) {
-          if (props[key] !== variant.props[key] && props.ownerState?.[key] !== variant.props[key]) {
-            continue variantLoop;
-          }
-        }
-      }
-      if (!Array.isArray(result)) {
-        result = [result];
+  variantLoop: for (let i = 0; i < variants.length; i += 1) {
+    const variant = variants[i];
+    if (typeof variant.props === 'function') {
+      mergedState ?? (mergedState = {
+        ...props,
+        ...props.ownerState,
+        ownerState: props.ownerState
+      });
+      if (!variant.props(mergedState)) {
+        continue;
       }
-      if (typeof variant.style === 'function') {
-        mergedState ??= {
-          ...props,
-          ...props.ownerState,
-          ownerState: props.ownerState
-        };
-        result.push(variant.style(mergedState));
-      } else {
-        result.push(variant.style);
+    } else {
+      for (const key in variant.props) {
+        if (props[key] !== variant.props[key] && props.ownerState?.[key] !== variant.props[key]) {
+          continue variantLoop;
+        }
       }
     }
-    /* eslint-enable no-labels */
-
-    return result;
+    if (typeof variant.style === 'function') {
+      mergedState ?? (mergedState = {
+        ...props,
+        ...props.ownerState,
+        ownerState: props.ownerState
+      });
+      results.push(variant.style(mergedState));
+    } else {
+      results.push(variant.style);
+    }
   }
-  return resolvedStyle;
+  return results;
 }
-export default function createStyled(input = {}) {
+function createStyled(input = {}) {
   const {
     themeId,
     defaultTheme = systemDefaultTheme,
     rootShouldForwardProp = shouldForwardProp,
     slotShouldForwardProp = shouldForwardProp
   } = input;
-  const systemSx = props => {
-    return styleFunctionSx(attachTheme(props, themeId, defaultTheme));
-  };
-  systemSx.__mui_systemSx = true;
+  function styleAttachTheme(props) {
+    attachTheme(props, themeId, defaultTheme);
+  }
   const styled = (tag, inputOptions = {}) => {
-    // Filter out the `sx` style function from the previous styled component to prevent unnecessary styles generated by the composite components.
-    processStyles(tag, styles => styles.filter(style => !style?.__mui_systemSx));
+    // If `tag` is already a styled component, filter out the `sx` style function
+    // to prevent unnecessary styles generated by the composite components.
+    (0, _styledEngine.internal_mutateStyles)(tag, styles => styles.filter(style => style !== _styleFunctionSx.default));
     const {
       name: componentName,
       slot: componentSlot,
@@ -116,14 +131,6 @@ export default function createStyled(input = {}) {
     // For more details: https://github.com/mui/material-ui/pull/37908
     componentSlot && componentSlot !== 'Root' && componentSlot !== 'root' || false;
     const skipSx = inputSkipSx || false;
-    let label;
-    if (process.env.NODE_ENV !== 'production') {
-      if (componentName) {
-        // TODO v6: remove `lowercaseFirstLetter()` in the next major release
-        // For more details: https://github.com/mui/material-ui/pull/37908
-        label = `${componentName}-${lowercaseFirstLetter(componentSlot || 'Root')}`;
-      }
-    }
     let shouldForwardPropOption = shouldForwardProp;
 
     // TODO v6: remove `Root` in the next major release
@@ -137,77 +144,97 @@ export default function createStyled(input = {}) {
       // for string (html) tag, preserve the behavior in emotion & styled-components.
       shouldForwardPropOption = undefined;
     }
-    const defaultStyledResolver = styledEngineStyled(tag, {
+    const defaultStyledResolver = (0, _styledEngine.default)(tag, {
       shouldForwardProp: shouldForwardPropOption,
-      label,
+      label: generateStyledLabel(componentName, componentSlot),
       ...options
     });
-    const transformStyleArg = style => {
+    const transformStyle = style => {
       // 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 style === 'function' && style.__emotion_real !== style || isPlainObject(style)) {
-        return props => processStyle(style, attachTheme(props, themeId, defaultTheme));
+      if (typeof style === 'function' && style.__emotion_real !== style) {
+        return function styleFunctionProcessor(props) {
+          return processStyle(props, style);
+        };
+      }
+      if ((0, _deepmerge.isPlainObject)(style)) {
+        const serialized = (0, _preprocessStyles.default)(style);
+        if (!serialized.variants) {
+          return serialized.style;
+        }
+        return function styleObjectProcessor(props) {
+          return processStyle(props, serialized);
+        };
       }
       return style;
     };
-    const muiStyledResolver = (style, ...expressions) => {
-      let transformedStyle = transformStyleArg(style);
-      const expressionsWithDefaultTheme = expressions ? expressions.map(transformStyleArg) : [];
+    const muiStyledResolver = (...expressionsInput) => {
+      const expressionsHead = [];
+      const expressionsBody = expressionsInput.map(transformStyle);
+      const expressionsTail = [];
+
+      // Preprocess `props` to set the scoped theme value.
+      // This must run before any other expression.
+      expressionsHead.push(styleAttachTheme);
       if (componentName && overridesResolver) {
-        expressionsWithDefaultTheme.push(props => {
-          const theme = resolveTheme(themeId, props.theme, defaultTheme);
-          if (!theme.components || !theme.components[componentName] || !theme.components[componentName].styleOverrides) {
+        expressionsTail.push(function styleThemeOverrides(props) {
+          const theme = props.theme;
+          const styleOverrides = theme.components?.[componentName]?.styleOverrides;
+          if (!styleOverrides) {
             return null;
           }
-          const styleOverrides = theme.components[componentName].styleOverrides;
           const resolvedStyleOverrides = {};
-          const propsWithTheme = attachTheme(props, themeId, defaultTheme);
 
           // TODO: v7 remove iteration and use `resolveStyleArg(styleOverrides[slot])` directly
           // eslint-disable-next-line guard-for-in
           for (const slotKey in styleOverrides) {
-            resolvedStyleOverrides[slotKey] = processStyle(styleOverrides[slotKey], propsWithTheme);
+            resolvedStyleOverrides[slotKey] = processStyle(props, styleOverrides[slotKey]);
           }
           return overridesResolver(props, resolvedStyleOverrides);
         });
       }
       if (componentName && !skipVariantsResolver) {
-        expressionsWithDefaultTheme.push(props => {
-          const theme = resolveTheme(themeId, props.theme, defaultTheme);
+        expressionsTail.push(function styleThemeVariants(props) {
+          const theme = props.theme;
           const themeVariants = theme?.components?.[componentName]?.variants;
           if (!themeVariants) {
             return null;
           }
-          return processStyle({
-            variants: themeVariants
-          }, attachTheme(props, themeId, defaultTheme));
+          return processStyleVariants(props, themeVariants);
         });
       }
       if (!skipSx) {
-        expressionsWithDefaultTheme.push(systemSx);
+        expressionsTail.push(_styleFunctionSx.default);
       }
-      const numOfCustomFnsApplied = expressionsWithDefaultTheme.length - expressions.length;
-      if (Array.isArray(style) && numOfCustomFnsApplied > 0) {
-        const placeholders = new Array(numOfCustomFnsApplied).fill('');
-        // If the type is array, than we need to add placeholders in the template for the overrides, variants and the sx styles.
-        transformedStyle = [...style, ...placeholders];
-        transformedStyle.raw = [...style.raw, ...placeholders];
-      }
-      const Component = defaultStyledResolver(transformedStyle, ...expressionsWithDefaultTheme);
-      if (process.env.NODE_ENV !== 'production') {
-        let displayName;
-        if (componentName) {
-          displayName = `${componentName}${capitalize(componentSlot || '')}`;
-        }
-        if (displayName === undefined) {
-          displayName = `Styled(${getDisplayName(tag)})`;
+
+      // This function can be called as a tagged template, so the first argument would contain
+      // CSS `string[]` values.
+      if (Array.isArray(expressionsBody[0])) {
+        const inputStrings = expressionsBody.shift();
+
+        // We need to add placeholders in the tagged template for the custom functions we have
+        // possibly added (attachTheme, overrides, variants, and sx).
+        const placeholdersHead = new Array(expressionsHead.length).fill('');
+        const placeholdersTail = new Array(expressionsTail.length).fill('');
+        let outputStrings;
+        // prettier-ignore
+        {
+          outputStrings = [...placeholdersHead, ...inputStrings, ...placeholdersTail];
+          outputStrings.raw = [...placeholdersHead, ...inputStrings.raw, ...placeholdersTail];
         }
-        Component.displayName = displayName;
+
+        // The only case where we put something before `attachTheme`
+        expressionsHead.unshift(outputStrings);
       }
+      const expressions = [...expressionsHead, ...expressionsBody, ...expressionsTail];
+      const Component = defaultStyledResolver(...expressions);
       if (tag.muiName) {
         Component.muiName = tag.muiName;
       }
+      if (process.env.NODE_ENV !== 'production') {
+        Component.displayName = generateDisplayName(componentName, componentSlot, tag);
+      }
       return Component;
     };
     if (defaultStyledResolver.withConfig) {
@@ -217,6 +244,23 @@ export default function createStyled(input = {}) {
   };
   return styled;
 }
+function generateDisplayName(componentName, componentSlot, tag) {
+  if (componentName) {
+    return `${componentName}${(0, _capitalize.default)(componentSlot || '')}`;
+  }
+  return `Styled(${(0, _getDisplayName.default)(tag)})`;
+}
+function generateStyledLabel(componentName, componentSlot) {
+  let label;
+  if (process.env.NODE_ENV !== 'production') {
+    if (componentName) {
+      // TODO v6: remove `lowercaseFirstLetter()` in the next major release
+      // For more details: https://github.com/mui/material-ui/pull/37908
+      label = `${componentName}-${lowercaseFirstLetter(componentSlot || 'Root')}`;
+    }
+  }
+  return label;
+}
 function isObjectEmpty(object) {
   // eslint-disable-next-line
   for (const _ in object) {

package/createStyled/index.js

@@ -1,2 +1,25 @@
-export { default } from "./createStyled.js";
-export * from "./createStyled.js";
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _exportNames = {};
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function () {
+    return _createStyled.default;
+  }
+});
+var _createStyled = _interopRequireWildcard(require("./createStyled"));
+Object.keys(_createStyled).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _createStyled[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _createStyled[key];
+    }
+  });
+});

package/createStyled/package.json

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

package/createTheme/applyStyles.js

@@ -1,3 +1,9 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = applyStyles;
 /**
  * A universal utility to style components with multiple color modes. Always use it from the theme object.
  * It works with:
@@ -56,7 +62,7 @@
  *   })
  *```
  */
-export default function applyStyles(key, styles) {
+function applyStyles(key, styles) {
   // @ts-expect-error this is 'any' type
   const theme = this;
   if (theme.vars) {

package/createTheme/createSpacing.js

@@ -1,13 +1,18 @@
-import { createUnarySpacing } from "../spacing/index.js";
+"use strict";
 
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = createSpacing;
+var _spacing = require("../spacing");
 // The different signatures imply different meaning for their arguments that can't be expressed structurally.
 // We express the difference with variable names.
 
-export default function createSpacing(spacingInput = 8,
+function createSpacing(spacingInput = 8,
 // Material Design layouts are visually balanced. Most measurements align to an 8dp grid, which aligns both spacing and the overall layout.
 // Smaller components, such as icons, can align to a 4dp grid.
 // https://m2.material.io/design/layout/understanding-layout.html
-transform = createUnarySpacing({
+transform = (0, _spacing.createUnarySpacing)({
   spacing: spacingInput
 })) {
   // Already transformed.

package/createTheme/createTheme.d.ts

@@ -14,18 +14,24 @@ export {
 
 export type Direction = 'ltr' | 'rtl';
 
+export interface Typography {}
+export interface Mixins {}
+export interface Shadows {}
+export interface Transitions {}
+export interface ZIndex {}
+
 export interface ThemeOptions {
   shape?: ShapeOptions;
   breakpoints?: BreakpointsOptions;
   direction?: Direction;
-  mixins?: unknown;
+  mixins?: Mixins;
   palette?: Record<string, any>;
-  shadows?: unknown;
+  shadows?: Shadows;
   spacing?: SpacingOptions;
-  transitions?: unknown;
+  transitions?: Transitions;
   components?: Record<string, any>;
-  typography?: unknown;
-  zIndex?: Record<string, number>;
+  typography?: Typography;
+  zIndex?: ZIndex;
   unstable_sxConfig?: SxConfig;
 }
 
@@ -34,13 +40,13 @@ export interface Theme extends CssContainerQueries {
   breakpoints: Breakpoints;
   direction: Direction;
   palette: Record<string, any> & { mode: 'light' | 'dark' };
-  shadows?: unknown;
+  shadows?: Shadows;
   spacing: Spacing;
-  transitions?: unknown;
+  transitions?: Transitions;
   components?: Record<string, any>;
-  mixins?: unknown;
-  typography?: unknown;
-  zIndex?: unknown;
+  mixins?: Mixins;
+  typography?: Typography;
+  zIndex?: ZIndex;
   applyStyles: ApplyStyles<'light' | 'dark'>;
   unstable_sxConfig: SxConfig;
   unstable_sx: (props: SxProps<Theme>) => CSSObject;

package/createTheme/createTheme.js

@@ -1,11 +1,18 @@
-import deepmerge from '@mui/utils/deepmerge';
-import createBreakpoints from "../createBreakpoints/createBreakpoints.js";
-import cssContainerQueries from "../cssContainerQueries/index.js";
-import shape from "./shape.js";
-import createSpacing from "./createSpacing.js";
-import styleFunctionSx from "../styleFunctionSx/styleFunctionSx.js";
-import defaultSxConfig from "../styleFunctionSx/defaultSxConfig.js";
-import applyStyles from "./applyStyles.js";
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _deepmerge = _interopRequireDefault(require("@mui/utils/deepmerge"));
+var _createBreakpoints = _interopRequireDefault(require("../createBreakpoints/createBreakpoints"));
+var _cssContainerQueries = _interopRequireDefault(require("../cssContainerQueries"));
+var _shape = _interopRequireDefault(require("./shape"));
+var _createSpacing = _interopRequireDefault(require("./createSpacing"));
+var _styleFunctionSx = _interopRequireDefault(require("../styleFunctionSx/styleFunctionSx"));
+var _defaultSxConfig = _interopRequireDefault(require("../styleFunctionSx/defaultSxConfig"));
+var _applyStyles = _interopRequireDefault(require("./applyStyles"));
 function createTheme(options = {}, ...args) {
   const {
     breakpoints: breakpointsInput = {},
@@ -14,9 +21,9 @@ function createTheme(options = {}, ...args) {
     shape: shapeInput = {},
     ...other
   } = options;
-  const breakpoints = createBreakpoints(breakpointsInput);
-  const spacing = createSpacing(spacingInput);
-  let muiTheme = deepmerge({
+  const breakpoints = (0, _createBreakpoints.default)(breakpointsInput);
+  const spacing = (0, _createSpacing.default)(spacingInput);
+  let muiTheme = (0, _deepmerge.default)({
     breakpoints,
     direction: 'ltr',
     components: {},
@@ -27,23 +34,23 @@ function createTheme(options = {}, ...args) {
     },
     spacing,
     shape: {
-      ...shape,
+      ..._shape.default,
       ...shapeInput
     }
   }, other);
-  muiTheme = cssContainerQueries(muiTheme);
-  muiTheme.applyStyles = applyStyles;
-  muiTheme = args.reduce((acc, argument) => deepmerge(acc, argument), muiTheme);
+  muiTheme = (0, _cssContainerQueries.default)(muiTheme);
+  muiTheme.applyStyles = _applyStyles.default;
+  muiTheme = args.reduce((acc, argument) => (0, _deepmerge.default)(acc, argument), muiTheme);
   muiTheme.unstable_sxConfig = {
-    ...defaultSxConfig,
+    ..._defaultSxConfig.default,
     ...other?.unstable_sxConfig
   };
   muiTheme.unstable_sx = function sx(props) {
-    return styleFunctionSx({
+    return (0, _styleFunctionSx.default)({
       sx: props,
       theme: this
     });
   };
   return muiTheme;
 }
-export default createTheme;
+var _default = exports.default = createTheme;

package/createTheme/index.js

@@ -1,3 +1,27 @@
-export { default } from "./createTheme.js";
-export { default as private_createBreakpoints } from "../createBreakpoints/createBreakpoints.js";
-export { default as unstable_applyStyles } from "./applyStyles.js";
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function () {
+    return _createTheme.default;
+  }
+});
+Object.defineProperty(exports, "private_createBreakpoints", {
+  enumerable: true,
+  get: function () {
+    return _createBreakpoints.default;
+  }
+});
+Object.defineProperty(exports, "unstable_applyStyles", {
+  enumerable: true,
+  get: function () {
+    return _applyStyles.default;
+  }
+});
+var _createTheme = _interopRequireDefault(require("./createTheme"));
+var _createBreakpoints = _interopRequireDefault(require("../createBreakpoints/createBreakpoints"));
+var _applyStyles = _interopRequireDefault(require("./applyStyles"));

package/createTheme/package.json

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

package/createTheme/shape.js

@@ -1,4 +1,10 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
 const shape = {
   borderRadius: 4
 };
-export default shape;
+var _default = exports.default = shape;