@mui/system 5.11.7 → 5.11.8

package/legacy/Unstable_Grid/createGrid.js

@@ -38,7 +38,7 @@ export default function createGrid() {
     useThemeProps = _options$useThemeProp === void 0 ? useThemePropsDefault : _options$useThemeProp,
     _options$componentNam = options.componentName,
     componentName = _options$componentNam === void 0 ? 'MuiGrid' : _options$componentNam;
-  var NestedContext = /*#__PURE__*/React.createContext(false);
+  var NestedContext = /*#__PURE__*/React.createContext(0);
   var OverflowContext = /*#__PURE__*/React.createContext(undefined);
   var useUtilityClasses = function useUtilityClasses(ownerState, theme) {
     var container = ownerState.container,
@@ -59,7 +59,7 @@ export default function createGrid() {
     var theme = useTheme();
     var themeProps = useThemeProps(inProps);
     var props = extendSxProp(themeProps); // `color` type conflicts with html color attribute.
-    var nested = React.useContext(NestedContext);
+    var level = React.useContext(NestedContext);
     var overflow = React.useContext(OverflowContext);
     var className = props.className,
       _props$columns = props.columns,
@@ -81,7 +81,7 @@ export default function createGrid() {
       themeDisableEqualOverflow = props.disableEqualOverflow,
       rest = _objectWithoutProperties(props, ["className", "columns", "container", "component", "direction", "wrap", "spacing", "rowSpacing", "columnSpacing", "disableEqualOverflow"]); // Because `disableEqualOverflow` can be set from the theme's defaultProps, the **nested** grid should look at the instance props instead.
     var disableEqualOverflow = themeDisableEqualOverflow;
-    if (nested && themeDisableEqualOverflow !== undefined) {
+    if (level && themeDisableEqualOverflow !== undefined) {
       disableEqualOverflow = inProps.disableEqualOverflow;
     }
     // collect breakpoints related props because they can be customized from the theme.
@@ -100,12 +100,12 @@ export default function createGrid() {
         other[key] = val;
       }
     });
-    var columns = (_inProps$columns = inProps.columns) != null ? _inProps$columns : nested ? undefined : columnsProp;
-    var spacing = (_inProps$spacing = inProps.spacing) != null ? _inProps$spacing : nested ? undefined : spacingProp;
-    var rowSpacing = (_ref3 = (_inProps$rowSpacing = inProps.rowSpacing) != null ? _inProps$rowSpacing : inProps.spacing) != null ? _ref3 : nested ? undefined : rowSpacingProp;
-    var columnSpacing = (_ref4 = (_inProps$columnSpacin = inProps.columnSpacing) != null ? _inProps$columnSpacin : inProps.spacing) != null ? _ref4 : nested ? undefined : columnSpacingProp;
+    var columns = (_inProps$columns = inProps.columns) != null ? _inProps$columns : level ? undefined : columnsProp;
+    var spacing = (_inProps$spacing = inProps.spacing) != null ? _inProps$spacing : level ? undefined : spacingProp;
+    var rowSpacing = (_ref3 = (_inProps$rowSpacing = inProps.rowSpacing) != null ? _inProps$rowSpacing : inProps.spacing) != null ? _ref3 : level ? undefined : rowSpacingProp;
+    var columnSpacing = (_ref4 = (_inProps$columnSpacin = inProps.columnSpacing) != null ? _inProps$columnSpacin : inProps.spacing) != null ? _ref4 : level ? undefined : columnSpacingProp;
     var ownerState = _extends({}, props, {
-      nested: nested,
+      level: level,
       columns: columns,
       container: container,
       direction: direction,
@@ -127,9 +127,9 @@ export default function createGrid() {
       ownerState: ownerState,
       className: clsx(classes.root, className)
     }, other));
-    if (!nested) {
+    if (container) {
       result = /*#__PURE__*/_jsx(NestedContext.Provider, {
-        value: true,
+        value: level + 1,
         children: result
       });
     }

package/legacy/Unstable_Grid/gridGenerator.js

@@ -1,6 +1,23 @@
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _typeof from "@babel/runtime/helpers/esm/typeof";
 import _extends from "@babel/runtime/helpers/esm/extends";
+function isNestedContainer(ownerState) {
+  return ownerState.level > 0 && ownerState.container;
+}
+function createGetSelfSpacing(ownerState) {
+  return function getSelfSpacing(axis) {
+    return "var(--Grid-".concat(axis, "Spacing").concat(ownerState.level || '', ")");
+  };
+}
+function createGetParentSpacing(ownerState) {
+  return function getParentSpacing(axis) {
+    if (ownerState.level === 0) {
+      return "var(--Grid-".concat(axis, "Spacing)");
+    }
+    return "var(--Grid-".concat(axis, "Spacing").concat(ownerState.level - 1 || '', ")");
+  };
+}
 export var filterBreakpointKeys = function filterBreakpointKeys(breakpointsKeys, responsiveKeys) {
   return breakpointsKeys.filter(function (key) {
     return responsiveKeys.includes(key);
@@ -50,6 +67,7 @@ export var traverseBreakpoints = function traverseBreakpoints(breakpoints, respo
 export var generateGridSizeStyles = function generateGridSizeStyles(_ref) {
   var theme = _ref.theme,
     ownerState = _ref.ownerState;
+  var getSelfSpacing = createGetSelfSpacing(ownerState);
   var styles = {};
   traverseBreakpoints(theme.breakpoints, ownerState.gridSize, function (appendStyle, value) {
     var style = {};
@@ -73,7 +91,7 @@ export var generateGridSizeStyles = function generateGridSizeStyles(_ref) {
       style = {
         flexGrow: 0,
         flexBasis: 'auto',
-        width: "calc(100% * ".concat(value, " / var(--Grid-columns)").concat(ownerState.nested && ownerState.container ? " + var(--Grid-columnSpacing)" : '', ")")
+        width: "calc(100% * ".concat(value, " / var(--Grid-columns)").concat(isNestedContainer(ownerState) ? " + ".concat(getSelfSpacing('column')) : '', ")")
       };
     }
     appendStyle(styles, style);
@@ -122,33 +140,31 @@ export var generateGridRowSpacingStyles = function generateGridRowSpacingStyles(
   if (!ownerState.container) {
     return {};
   }
-  var styles = {};
+  var getParentSpacing = createGetParentSpacing(ownerState);
+  var styles = isNestedContainer(ownerState) ? _defineProperty({}, "--Grid-rowSpacing".concat(ownerState.level || ''), getParentSpacing('row')) : {};
   traverseBreakpoints(theme.breakpoints, ownerState.rowSpacing, function (appendStyle, value) {
     var _theme$spacing;
-    appendStyle(styles, {
-      '--Grid-rowSpacing': typeof value === 'string' ? value : (_theme$spacing = theme.spacing) == null ? void 0 : _theme$spacing.call(theme, value)
-    });
+    appendStyle(styles, _defineProperty({}, "--Grid-rowSpacing".concat(ownerState.level || ''), typeof value === 'string' ? value : (_theme$spacing = theme.spacing) == null ? void 0 : _theme$spacing.call(theme, value)));
   });
   return styles;
 };
-export var generateGridColumnSpacingStyles = function generateGridColumnSpacingStyles(_ref5) {
-  var theme = _ref5.theme,
-    ownerState = _ref5.ownerState;
+export var generateGridColumnSpacingStyles = function generateGridColumnSpacingStyles(_ref6) {
+  var theme = _ref6.theme,
+    ownerState = _ref6.ownerState;
   if (!ownerState.container) {
     return {};
   }
-  var styles = {};
+  var getParentSpacing = createGetParentSpacing(ownerState);
+  var styles = isNestedContainer(ownerState) ? _defineProperty({}, "--Grid-columnSpacing".concat(ownerState.level || ''), getParentSpacing('column')) : {};
   traverseBreakpoints(theme.breakpoints, ownerState.columnSpacing, function (appendStyle, value) {
     var _theme$spacing2;
-    appendStyle(styles, {
-      '--Grid-columnSpacing': typeof value === 'string' ? value : (_theme$spacing2 = theme.spacing) == null ? void 0 : _theme$spacing2.call(theme, value)
-    });
+    appendStyle(styles, _defineProperty({}, "--Grid-columnSpacing".concat(ownerState.level || ''), typeof value === 'string' ? value : (_theme$spacing2 = theme.spacing) == null ? void 0 : _theme$spacing2.call(theme, value)));
   });
   return styles;
 };
-export var generateGridDirectionStyles = function generateGridDirectionStyles(_ref6) {
-  var theme = _ref6.theme,
-    ownerState = _ref6.ownerState;
+export var generateGridDirectionStyles = function generateGridDirectionStyles(_ref8) {
+  var theme = _ref8.theme,
+    ownerState = _ref8.ownerState;
   if (!ownerState.container) {
     return {};
   }
@@ -160,39 +176,34 @@ export var generateGridDirectionStyles = function generateGridDirectionStyles(_r
   });
   return styles;
 };
-export var generateGridStyles = function generateGridStyles(_ref7) {
-  var ownerState = _ref7.ownerState;
+export var generateGridStyles = function generateGridStyles(_ref9) {
+  var ownerState = _ref9.ownerState;
+  var getSelfSpacing = createGetSelfSpacing(ownerState);
+  var getParentSpacing = createGetParentSpacing(ownerState);
   return _extends({
     minWidth: 0,
     boxSizing: 'border-box'
-  }, ownerState.container ? _extends({
+  }, ownerState.container && _extends({
     display: 'flex',
     flexWrap: 'wrap'
   }, ownerState.wrap && ownerState.wrap !== 'wrap' && {
     flexWrap: ownerState.wrap
   }, {
-    margin: "calc(var(--Grid-rowSpacing) / -2) calc(var(--Grid-columnSpacing) / -2)"
+    margin: "calc(".concat(getSelfSpacing('row'), " / -2) calc(").concat(getSelfSpacing('column'), " / -2)")
   }, ownerState.disableEqualOverflow && {
-    margin: "calc(var(--Grid-rowSpacing) * -1) 0px 0px calc(var(--Grid-columnSpacing) * -1)"
-  }, ownerState.nested ? _extends({
-    padding: "calc(var(--Grid-nested-rowSpacing) / 2) calc(var(--Grid-nested-columnSpacing) / 2)"
+    margin: "calc(".concat(getSelfSpacing('row'), " * -1) 0px 0px calc(").concat(getSelfSpacing('column'), " * -1)")
+  }), (!ownerState.container || isNestedContainer(ownerState)) && _extends({
+    padding: "calc(".concat(getParentSpacing('row'), " / 2) calc(").concat(getParentSpacing('column'), " / 2)")
   }, (ownerState.disableEqualOverflow || ownerState.parentDisableEqualOverflow) && {
-    padding: "calc(var(--Grid-nested-rowSpacing)) 0px 0px calc(var(--Grid-nested-columnSpacing))"
-  }) : {
-    '--Grid-nested-rowSpacing': 'var(--Grid-rowSpacing)',
-    '--Grid-nested-columnSpacing': 'var(--Grid-columnSpacing)'
-  }) : _extends({
-    padding: "calc(var(--Grid-rowSpacing) / 2) calc(var(--Grid-columnSpacing) / 2)"
-  }, ownerState.disableEqualOverflow && {
-    padding: "calc(var(--Grid-rowSpacing)) 0px 0px calc(var(--Grid-columnSpacing))"
+    padding: "".concat(getParentSpacing('row'), " 0px 0px ").concat(getParentSpacing('column'))
   }));
 };
 export var generateSizeClassNames = function generateSizeClassNames(gridSize) {
   var classNames = [];
-  Object.entries(gridSize).forEach(function (_ref8) {
-    var _ref9 = _slicedToArray(_ref8, 2),
-      key = _ref9[0],
-      value = _ref9[1];
+  Object.entries(gridSize).forEach(function (_ref10) {
+    var _ref11 = _slicedToArray(_ref10, 2),
+      key = _ref11[0],
+      value = _ref11[1];
     if (value !== false && value !== undefined) {
       classNames.push("grid-".concat(key, "-").concat(String(value)));
     }
@@ -212,10 +223,10 @@ export var generateSpacingClassNames = function generateSpacingClassNames(spacin
   }
   if (_typeof(spacing) === 'object' && !Array.isArray(spacing)) {
     var classNames = [];
-    Object.entries(spacing).forEach(function (_ref10) {
-      var _ref11 = _slicedToArray(_ref10, 2),
-        key = _ref11[0],
-        value = _ref11[1];
+    Object.entries(spacing).forEach(function (_ref12) {
+      var _ref13 = _slicedToArray(_ref12, 2),
+        key = _ref13[0],
+        value = _ref13[1];
       if (isValidSpacing(value)) {
         classNames.push("spacing-".concat(key, "-").concat(String(value)));
       }
@@ -229,10 +240,10 @@ export var generateDirectionClasses = function generateDirectionClasses(directio
     return [];
   }
   if (_typeof(direction) === 'object') {
-    return Object.entries(direction).map(function (_ref12) {
-      var _ref13 = _slicedToArray(_ref12, 2),
-        key = _ref13[0],
-        value = _ref13[1];
+    return Object.entries(direction).map(function (_ref14) {
+      var _ref15 = _slicedToArray(_ref14, 2),
+        key = _ref15[0],
+        value = _ref15[1];
       return "direction-".concat(key, "-").concat(value);
     });
   }

package/legacy/cssVars/createCssVarsProvider.js

@@ -112,14 +112,14 @@ export default function createCssVarsProvider(options) {
       colorScheme = ctx.colorScheme;
     }
     var calculatedMode = function () {
-      if (!mode) {
-        // This scope occurs on the server
-        if (defaultMode === 'system') {
-          return designSystemMode;
-        }
-        return defaultMode;
+      if (mode) {
+        return mode;
+      }
+      // This scope occurs on the server
+      if (defaultMode === 'system') {
+        return designSystemMode;
       }
-      return mode;
+      return defaultMode;
     }();
     var calculatedColorScheme = function () {
       if (!colorScheme) {

package/legacy/index.js

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

package/modern/Unstable_Grid/createGrid.js

@@ -34,7 +34,7 @@ export default function createGrid(options = {}) {
     useThemeProps = useThemePropsDefault,
     componentName = 'MuiGrid'
   } = options;
-  const NestedContext = /*#__PURE__*/React.createContext(false);
+  const NestedContext = /*#__PURE__*/React.createContext(0);
   const OverflowContext = /*#__PURE__*/React.createContext(undefined);
   const useUtilityClasses = (ownerState, theme) => {
     const {
@@ -54,7 +54,7 @@ export default function createGrid(options = {}) {
     const theme = useTheme();
     const themeProps = useThemeProps(inProps);
     const props = extendSxProp(themeProps); // `color` type conflicts with html color attribute.
-    const nested = React.useContext(NestedContext);
+    const level = React.useContext(NestedContext);
     const overflow = React.useContext(OverflowContext);
     const {
         className,
@@ -71,7 +71,7 @@ export default function createGrid(options = {}) {
       rest = _objectWithoutPropertiesLoose(props, _excluded);
     // Because `disableEqualOverflow` can be set from the theme's defaultProps, the **nested** grid should look at the instance props instead.
     let disableEqualOverflow = themeDisableEqualOverflow;
-    if (nested && themeDisableEqualOverflow !== undefined) {
+    if (level && themeDisableEqualOverflow !== undefined) {
       disableEqualOverflow = inProps.disableEqualOverflow;
     }
     // collect breakpoints related props because they can be customized from the theme.
@@ -87,12 +87,12 @@ export default function createGrid(options = {}) {
         other[key] = val;
       }
     });
-    const columns = inProps.columns ?? (nested ? undefined : columnsProp);
-    const spacing = inProps.spacing ?? (nested ? undefined : spacingProp);
-    const rowSpacing = inProps.rowSpacing ?? inProps.spacing ?? (nested ? undefined : rowSpacingProp);
-    const columnSpacing = inProps.columnSpacing ?? inProps.spacing ?? (nested ? undefined : columnSpacingProp);
+    const columns = inProps.columns ?? (level ? undefined : columnsProp);
+    const spacing = inProps.spacing ?? (level ? undefined : spacingProp);
+    const rowSpacing = inProps.rowSpacing ?? inProps.spacing ?? (level ? undefined : rowSpacingProp);
+    const columnSpacing = inProps.columnSpacing ?? inProps.spacing ?? (level ? undefined : columnSpacingProp);
     const ownerState = _extends({}, props, {
-      nested,
+      level,
       columns,
       container,
       direction,
@@ -114,9 +114,9 @@ export default function createGrid(options = {}) {
       ownerState: ownerState,
       className: clsx(classes.root, className)
     }, other));
-    if (!nested) {
+    if (container) {
       result = /*#__PURE__*/_jsx(NestedContext.Provider, {
-        value: true,
+        value: level + 1,
         children: result
       });
     }

package/modern/Unstable_Grid/gridGenerator.js

@@ -1,4 +1,20 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
+function isNestedContainer(ownerState) {
+  return ownerState.level > 0 && ownerState.container;
+}
+function createGetSelfSpacing(ownerState) {
+  return function getSelfSpacing(axis) {
+    return `var(--Grid-${axis}Spacing${ownerState.level || ''})`;
+  };
+}
+function createGetParentSpacing(ownerState) {
+  return function getParentSpacing(axis) {
+    if (ownerState.level === 0) {
+      return `var(--Grid-${axis}Spacing)`;
+    }
+    return `var(--Grid-${axis}Spacing${ownerState.level - 1 || ''})`;
+  };
+}
 export const filterBreakpointKeys = (breakpointsKeys, responsiveKeys) => breakpointsKeys.filter(key => responsiveKeys.includes(key));
 export const traverseBreakpoints = (breakpoints, responsive, iterator) => {
   const smallestBreakpoint = breakpoints.keys[0]; // the keys is sorted from smallest to largest by `createBreakpoints`.
@@ -45,6 +61,7 @@ export const generateGridSizeStyles = ({
   theme,
   ownerState
 }) => {
+  const getSelfSpacing = createGetSelfSpacing(ownerState);
   const styles = {};
   traverseBreakpoints(theme.breakpoints, ownerState.gridSize, (appendStyle, value) => {
     let style = {};
@@ -68,7 +85,7 @@ export const generateGridSizeStyles = ({
       style = {
         flexGrow: 0,
         flexBasis: 'auto',
-        width: `calc(100% * ${value} / var(--Grid-columns)${ownerState.nested && ownerState.container ? ` + var(--Grid-columnSpacing)` : ''})`
+        width: `calc(100% * ${value} / var(--Grid-columns)${isNestedContainer(ownerState) ? ` + ${getSelfSpacing('column')}` : ''})`
       };
     }
     appendStyle(styles, style);
@@ -120,10 +137,15 @@ export const generateGridRowSpacingStyles = ({
   if (!ownerState.container) {
     return {};
   }
-  const styles = {};
+  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${ownerState.level || ''}`]: getParentSpacing('row')
+  } : {};
   traverseBreakpoints(theme.breakpoints, ownerState.rowSpacing, (appendStyle, value) => {
     appendStyle(styles, {
-      '--Grid-rowSpacing': typeof value === 'string' ? value : theme.spacing?.(value)
+      [`--Grid-rowSpacing${ownerState.level || ''}`]: typeof value === 'string' ? value : theme.spacing?.(value)
     });
   });
   return styles;
@@ -135,10 +157,15 @@ export const generateGridColumnSpacingStyles = ({
   if (!ownerState.container) {
     return {};
   }
-  const styles = {};
+  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${ownerState.level || ''}`]: getParentSpacing('column')
+  } : {};
   traverseBreakpoints(theme.breakpoints, ownerState.columnSpacing, (appendStyle, value) => {
     appendStyle(styles, {
-      '--Grid-columnSpacing': typeof value === 'string' ? value : theme.spacing?.(value)
+      [`--Grid-columnSpacing${ownerState.level || ''}`]: typeof value === 'string' ? value : theme.spacing?.(value)
     });
   });
   return styles;
@@ -161,29 +188,24 @@ export const generateGridDirectionStyles = ({
 export const generateGridStyles = ({
   ownerState
 }) => {
+  const getSelfSpacing = createGetSelfSpacing(ownerState);
+  const getParentSpacing = createGetParentSpacing(ownerState);
   return _extends({
     minWidth: 0,
     boxSizing: 'border-box'
-  }, ownerState.container ? _extends({
+  }, ownerState.container && _extends({
     display: 'flex',
     flexWrap: 'wrap'
   }, ownerState.wrap && ownerState.wrap !== 'wrap' && {
     flexWrap: ownerState.wrap
   }, {
-    margin: `calc(var(--Grid-rowSpacing) / -2) calc(var(--Grid-columnSpacing) / -2)`
+    margin: `calc(${getSelfSpacing('row')} / -2) calc(${getSelfSpacing('column')} / -2)`
   }, ownerState.disableEqualOverflow && {
-    margin: `calc(var(--Grid-rowSpacing) * -1) 0px 0px calc(var(--Grid-columnSpacing) * -1)`
-  }, ownerState.nested ? _extends({
-    padding: `calc(var(--Grid-nested-rowSpacing) / 2) calc(var(--Grid-nested-columnSpacing) / 2)`
+    margin: `calc(${getSelfSpacing('row')} * -1) 0px 0px calc(${getSelfSpacing('column')} * -1)`
+  }), (!ownerState.container || isNestedContainer(ownerState)) && _extends({
+    padding: `calc(${getParentSpacing('row')} / 2) calc(${getParentSpacing('column')} / 2)`
   }, (ownerState.disableEqualOverflow || ownerState.parentDisableEqualOverflow) && {
-    padding: `calc(var(--Grid-nested-rowSpacing)) 0px 0px calc(var(--Grid-nested-columnSpacing))`
-  }) : {
-    '--Grid-nested-rowSpacing': 'var(--Grid-rowSpacing)',
-    '--Grid-nested-columnSpacing': 'var(--Grid-columnSpacing)'
-  }) : _extends({
-    padding: `calc(var(--Grid-rowSpacing) / 2) calc(var(--Grid-columnSpacing) / 2)`
-  }, ownerState.disableEqualOverflow && {
-    padding: `calc(var(--Grid-rowSpacing)) 0px 0px calc(var(--Grid-columnSpacing))`
+    padding: `${getParentSpacing('row')} 0px 0px ${getParentSpacing('column')}`
   }));
 };
 export const generateSizeClassNames = gridSize => {

package/modern/cssVars/createCssVarsProvider.js

@@ -94,14 +94,14 @@ export default function createCssVarsProvider(options) {
       colorScheme = ctx.colorScheme;
     }
     const calculatedMode = (() => {
-      if (!mode) {
-        // This scope occurs on the server
-        if (defaultMode === 'system') {
-          return designSystemMode;
-        }
-        return defaultMode;
+      if (mode) {
+        return mode;
+      }
+      // This scope occurs on the server
+      if (defaultMode === 'system') {
+        return designSystemMode;
       }
-      return mode;
+      return defaultMode;
     })();
     const calculatedColorScheme = (() => {
       if (!colorScheme) {

package/modern/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/system v5.11.7
+ * @mui/system v5.11.8
  *
  * @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.11.7",
+  "version": "5.11.8",
   "private": false,
   "author": "MUI Team",
   "description": "CSS utilities for rapidly laying out custom designs.",
@@ -45,7 +45,7 @@
   "dependencies": {
     "@babel/runtime": "^7.20.7",
     "@mui/private-theming": "^5.11.7",
-    "@mui/styled-engine": "^5.11.0",
+    "@mui/styled-engine": "^5.11.8",
     "@mui/types": "^7.2.3",
     "@mui/utils": "^5.11.7",
     "clsx": "^1.2.1",

package/styleFunctionSx/styleFunctionSx.spec.d.ts

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