@mui/system 6.1.1 → 6.1.3

package/memoTheme.js

@@ -0,0 +1,34 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = unstable_memoTheme;
+var _preprocessStyles = _interopRequireDefault(require("./preprocessStyles"));
+/* eslint-disable @typescript-eslint/naming-convention */
+
+// We need to pass an argument as `{ theme }` for PigmentCSS, but we don't want to
+// allocate more objects.
+const arg = {
+  theme: undefined
+};
+
+/**
+ * Memoize style function on theme.
+ * Intended to be used in styled() calls that only need access to the theme.
+ */
+function unstable_memoTheme(styleFn) {
+  let lastValue;
+  let lastTheme;
+  return function styleMemoized(props) {
+    let value = lastValue;
+    if (value === undefined || props.theme !== lastTheme) {
+      arg.theme = props.theme;
+      value = (0, _preprocessStyles.default)(styleFn(arg));
+      lastValue = value;
+      lastTheme = props.theme;
+    }
+    return value;
+  };
+}

package/memoize/index.js

@@ -1 +1,13 @@
-export { default } from "./memoize.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 _memoize.default;
+  }
+});
+var _memoize = _interopRequireDefault(require("./memoize"));

package/memoize/memoize.js

@@ -1,4 +1,10 @@
-export default function memoize(fn) {
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = memoize;
+function memoize(fn) {
   const cache = {};
   return arg => {
     if (cache[arg] === undefined) {

package/memoize/package.json

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

package/merge/index.js

@@ -1 +1,13 @@
-export { default } from "./merge.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 _merge.default;
+  }
+});
+var _merge = _interopRequireDefault(require("./merge"));

package/merge/merge.js

@@ -1,10 +1,17 @@
-import deepmerge from '@mui/utils/deepmerge';
+"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"));
 function merge(acc, item) {
   if (!item) {
     return acc;
   }
-  return deepmerge(acc, item, {
+  return (0, _deepmerge.default)(acc, item, {
     clone: false // No need to clone deep, it's way faster.
   });
 }
-export default merge;
+var _default = exports.default = merge;

package/merge/package.json

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

package/modern/Grid/Grid.js

@@ -70,24 +70,29 @@ process.env.NODE_ENV !== "production" ? Grid.propTypes /* remove-proptypes */ =
   sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
   /**
    * @internal
-   * The level of the grid starts from `0`
-   * and increases when the grid nests inside another grid regardless of container or item.
+   * The level of the grid starts from `0` and increases when the grid nests
+   * inside another grid. Nesting is defined as a container Grid being a direct
+   * child of a container Grid.
    *
    * ```js
-   * <Grid> // level 0
-   *   <Grid> // level 1
-   *     <Grid> // level 2
-   *   <Grid> // level 1
+   * <Grid container> // level 0
+   *   <Grid container> // level 1
+   *     <Grid container> // level 2
    * ```
    *
-   * Only consecutive grid is considered nesting.
-   * A grid container will start at `0` if there are non-Grid element above it.
+   * Only consecutive grid is considered nesting. A grid container will start at
+   * `0` if there are non-Grid container element above it.
    *
    * ```js
-   * <Grid> // level 0
+   * <Grid container> // level 0
    *   <div>
-   *     <Grid> // level 0
-   *       <Grid> // level 1
+   *     <Grid container> // level 0
+   * ```
+   *
+   * ```js
+   * <Grid container> // level 0
+   *   <Grid>
+   *     <Grid container> // level 0
    * ```
    */
   unstable_level: PropTypes.number,

package/modern/Grid/createGrid.js

@@ -117,7 +117,7 @@ export default function createGrid(options = {}) {
       className: clsx(classes.root, className),
       ...other,
       children: React.Children.map(children, child => {
-        if (/*#__PURE__*/React.isValidElement(child) && isMuiElement(child, ['Grid'])) {
+        if (/*#__PURE__*/React.isValidElement(child) && isMuiElement(child, ['Grid']) && container && child.props.container) {
           return /*#__PURE__*/React.cloneElement(child, {
             unstable_level: child.props?.unstable_level ?? level + 1
           });

package/modern/Grid/gridGenerator.js

@@ -1,37 +1,16 @@
 import { traverseBreakpoints } from "./traverseBreakpoints.js";
-function appendLevel(level) {
-  if (!level) {
-    return '';
-  }
-  return `Level${level}`;
-}
-function isNestedContainer(ownerState) {
-  return ownerState.unstable_level > 0 && ownerState.container;
+function getSelfSpacingVar(axis) {
+  return `--Grid-${axis}Spacing`;
 }
-function createGetSelfSpacing(ownerState) {
-  return function getSelfSpacing(axis) {
-    return `var(--Grid-${axis}Spacing${appendLevel(ownerState.unstable_level)})`;
-  };
-}
-function createGetParentSpacing(ownerState) {
-  return function getParentSpacing(axis) {
-    if (ownerState.unstable_level === 0) {
-      return `var(--Grid-${axis}Spacing)`;
-    }
-    return `var(--Grid-${axis}Spacing${appendLevel(ownerState.unstable_level - 1)})`;
-  };
-}
-function getParentColumns(ownerState) {
-  if (ownerState.unstable_level === 0) {
-    return `var(--Grid-columns)`;
-  }
-  return `var(--Grid-columns${appendLevel(ownerState.unstable_level - 1)})`;
+function getParentSpacingVar(axis) {
+  return `--Grid-parent-${axis}Spacing`;
 }
+const selfColumnsVar = '--Grid-columns';
+const parentColumnsVar = '--Grid-parent-columns';
 export const generateGridSizeStyles = ({
   theme,
   ownerState
 }) => {
-  const getParentSpacing = createGetParentSpacing(ownerState);
   const styles = {};
   traverseBreakpoints(theme.breakpoints, ownerState.size, (appendStyle, value) => {
     let style = {};
@@ -55,7 +34,7 @@ export const generateGridSizeStyles = ({
       style = {
         flexGrow: 0,
         flexBasis: 'auto',
-        width: `calc(100% * ${value} / ${getParentColumns(ownerState)} - (${getParentColumns(ownerState)} - ${value}) * (${getParentSpacing('column')} / ${getParentColumns(ownerState)}))`
+        width: `calc(100% * ${value} / var(${parentColumnsVar}) - (var(${parentColumnsVar}) - ${value}) * (var(${getParentSpacingVar('column')}) / var(${parentColumnsVar})))`
       };
     }
     appendStyle(styles, style);
@@ -66,7 +45,6 @@ export const generateGridOffsetStyles = ({
   theme,
   ownerState
 }) => {
-  const getParentSpacing = createGetParentSpacing(ownerState);
   const styles = {};
   traverseBreakpoints(theme.breakpoints, ownerState.offset, (appendStyle, value) => {
     let style = {};
@@ -77,7 +55,7 @@ export const generateGridOffsetStyles = ({
     }
     if (typeof value === 'number') {
       style = {
-        marginLeft: value === 0 ? '0px' : `calc(100% * ${value} / ${getParentColumns(ownerState)} + ${getParentSpacing('column')} * ${value} / ${getParentColumns(ownerState)})`
+        marginLeft: value === 0 ? '0px' : `calc(100% * ${value} / var(${parentColumnsVar}) + var(${getParentSpacingVar('column')}) * ${value} / var(${parentColumnsVar}))`
       };
     }
     appendStyle(styles, style);
@@ -91,14 +69,16 @@ export const generateGridColumnsStyles = ({
   if (!ownerState.container) {
     return {};
   }
-  const styles = isNestedContainer(ownerState) ? {
-    [`--Grid-columns${appendLevel(ownerState.unstable_level)}`]: getParentColumns(ownerState)
-  } : {
-    '--Grid-columns': 12
+  const styles = {
+    [selfColumnsVar]: 12
   };
   traverseBreakpoints(theme.breakpoints, ownerState.columns, (appendStyle, value) => {
+    const columns = value ?? 12;
     appendStyle(styles, {
-      [`--Grid-columns${appendLevel(ownerState.unstable_level)}`]: value
+      [selfColumnsVar]: columns,
+      '> *': {
+        [parentColumnsVar]: columns
+      }
     });
   });
   return styles;
@@ -110,15 +90,14 @@ export const generateGridRowSpacingStyles = ({
   if (!ownerState.container) {
     return {};
   }
-  const getParentSpacing = createGetParentSpacing(ownerState);
-  const styles = isNestedContainer(ownerState) ? {
-    // Set the default spacing as its parent spacing.
-    // It will be overridden if spacing props are provided
-    [`--Grid-rowSpacing${appendLevel(ownerState.unstable_level)}`]: getParentSpacing('row')
-  } : {};
+  const styles = {};
   traverseBreakpoints(theme.breakpoints, ownerState.rowSpacing, (appendStyle, value) => {
+    const spacing = typeof value === 'string' ? value : theme.spacing?.(value);
     appendStyle(styles, {
-      [`--Grid-rowSpacing${appendLevel(ownerState.unstable_level)}`]: typeof value === 'string' ? value : theme.spacing?.(value)
+      [getSelfSpacingVar('row')]: spacing,
+      '> *': {
+        [getParentSpacingVar('row')]: spacing
+      }
     });
   });
   return styles;
@@ -130,15 +109,14 @@ export const generateGridColumnSpacingStyles = ({
   if (!ownerState.container) {
     return {};
   }
-  const getParentSpacing = createGetParentSpacing(ownerState);
-  const styles = isNestedContainer(ownerState) ? {
-    // Set the default spacing as its parent spacing.
-    // It will be overridden if spacing props are provided
-    [`--Grid-columnSpacing${appendLevel(ownerState.unstable_level)}`]: getParentSpacing('column')
-  } : {};
+  const styles = {};
   traverseBreakpoints(theme.breakpoints, ownerState.columnSpacing, (appendStyle, value) => {
+    const spacing = typeof value === 'string' ? value : theme.spacing?.(value);
     appendStyle(styles, {
-      [`--Grid-columnSpacing${appendLevel(ownerState.unstable_level)}`]: typeof value === 'string' ? value : theme.spacing?.(value)
+      [getSelfSpacingVar('column')]: spacing,
+      '> *': {
+        [getParentSpacingVar('column')]: spacing
+      }
     });
   });
   return styles;
@@ -161,7 +139,6 @@ export const generateGridDirectionStyles = ({
 export const generateGridStyles = ({
   ownerState
 }) => {
-  const getSelfSpacing = createGetSelfSpacing(ownerState);
   return {
     minWidth: 0,
     boxSizing: 'border-box',
@@ -171,7 +148,7 @@ export const generateGridStyles = ({
       ...(ownerState.wrap && ownerState.wrap !== 'wrap' && {
         flexWrap: ownerState.wrap
       }),
-      gap: `${getSelfSpacing('row')} ${getSelfSpacing('column')}`
+      gap: `var(${getSelfSpacingVar('row')}) var(${getSelfSpacingVar('column')})`
     })
   };
 };

package/modern/colorManipulator/colorManipulator.js

@@ -1,6 +1,7 @@
 import _formatMuiErrorMessage from "@mui/utils/formatMuiErrorMessage";
 /* eslint-disable @typescript-eslint/naming-convention */
 import clamp from '@mui/utils/clamp';
+
 /**
  * Returns a number whose value is limited to the given range.
  * @param {number} value The value to be clamped
@@ -56,8 +57,7 @@ export function decomposeColor(color) {
   const marker = color.indexOf('(');
   const type = color.substring(0, marker);
   if (!['rgb', 'rgba', 'hsl', 'hsla', 'color'].includes(type)) {
-    throw new Error(process.env.NODE_ENV !== "production" ? `MUI: Unsupported \`${color}\` color.
-The following formats are supported: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla(), color().` : _formatMuiErrorMessage(9, color));
+    throw new Error(process.env.NODE_ENV !== "production" ? `MUI: Unsupported \`${color}\` color.\n` + 'The following formats are supported: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla(), color().' : _formatMuiErrorMessage(9, color));
   }
   let values = color.substring(marker + 1, color.length - 1);
   let colorSpace;
@@ -68,8 +68,7 @@ The following formats are supported: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla()
       values[3] = values[3].slice(1);
     }
     if (!['srgb', 'display-p3', 'a98-rgb', 'prophoto-rgb', 'rec-2020'].includes(colorSpace)) {
-      throw new Error(process.env.NODE_ENV !== "production" ? `MUI: unsupported \`${colorSpace}\` color space.
-The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rgb, rec-2020.` : _formatMuiErrorMessage(10, colorSpace));
+      throw new Error(process.env.NODE_ENV !== "production" ? `MUI: unsupported \`${colorSpace}\` color space.\n` + 'The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rgb, rec-2020.' : _formatMuiErrorMessage(10, colorSpace));
     }
   } else {
     values = values.split(',');