@mui/system 5.11.7 → 5.11.9

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (43) hide show
  1. package/Box/Box.spec.d.ts +1 -1
  2. package/CHANGELOG.md +128 -1
  3. package/Container/Container.d.ts +13 -13
  4. package/Container/ContainerProps.d.ts +40 -40
  5. package/Container/containerClasses.d.ts +22 -22
  6. package/Container/createContainer.d.ts +18 -18
  7. package/Stack/Stack.d.ts +13 -13
  8. package/Stack/StackProps.d.ts +42 -42
  9. package/Stack/createStack.d.ts +21 -21
  10. package/Stack/index.d.ts +5 -5
  11. package/Stack/stackClasses.d.ts +8 -8
  12. package/Unstable_Grid/Grid.d.ts +12 -12
  13. package/Unstable_Grid/GridProps.d.ts +173 -162
  14. package/Unstable_Grid/createGrid.d.ts +11 -11
  15. package/Unstable_Grid/createGrid.js +10 -10
  16. package/Unstable_Grid/gridClasses.d.ts +20 -20
  17. package/Unstable_Grid/gridGenerator.d.ts +33 -29
  18. package/Unstable_Grid/gridGenerator.js +40 -18
  19. package/Unstable_Grid/index.d.ts +5 -5
  20. package/createBox.spec.d.ts +1 -1
  21. package/createTheme/createSpacing.d.ts +10 -10
  22. package/cssVars/createCssVarsProvider.js +7 -7
  23. package/cssVars/createCssVarsProvider.spec.d.ts +1 -1
  24. package/cssVars/createGetCssVar.d.ts +5 -5
  25. package/cssVars/cssVarsParser.d.ts +63 -63
  26. package/cssVars/getInitColorSchemeScript.d.ts +42 -42
  27. package/cssVars/index.d.ts +3 -3
  28. package/cssVars/useCurrentColorScheme.d.ts +53 -53
  29. package/esm/Unstable_Grid/createGrid.js +10 -10
  30. package/esm/Unstable_Grid/gridGenerator.js +40 -18
  31. package/esm/cssVars/createCssVarsProvider.js +7 -7
  32. package/index.js +1 -1
  33. package/index.spec.d.ts +1 -1
  34. package/legacy/Unstable_Grid/createGrid.js +10 -10
  35. package/legacy/Unstable_Grid/gridGenerator.js +53 -42
  36. package/legacy/cssVars/createCssVarsProvider.js +7 -7
  37. package/legacy/index.js +1 -1
  38. package/modern/Unstable_Grid/createGrid.js +10 -10
  39. package/modern/Unstable_Grid/gridGenerator.js +40 -18
  40. package/modern/cssVars/createCssVarsProvider.js +7 -7
  41. package/modern/index.js +1 -1
  42. package/package.json +5 -5
  43. package/styleFunctionSx/styleFunctionSx.spec.d.ts +1 -1
@@ -38,7 +38,7 @@ export default function createGrid() {
38
38
  useThemeProps = _options$useThemeProp === void 0 ? useThemePropsDefault : _options$useThemeProp,
39
39
  _options$componentNam = options.componentName,
40
40
  componentName = _options$componentNam === void 0 ? 'MuiGrid' : _options$componentNam;
41
- var NestedContext = /*#__PURE__*/React.createContext(false);
41
+ var NestedContext = /*#__PURE__*/React.createContext(0);
42
42
  var OverflowContext = /*#__PURE__*/React.createContext(undefined);
43
43
  var useUtilityClasses = function useUtilityClasses(ownerState, theme) {
44
44
  var container = ownerState.container,
@@ -59,7 +59,7 @@ export default function createGrid() {
59
59
  var theme = useTheme();
60
60
  var themeProps = useThemeProps(inProps);
61
61
  var props = extendSxProp(themeProps); // `color` type conflicts with html color attribute.
62
- var nested = React.useContext(NestedContext);
62
+ var level = React.useContext(NestedContext);
63
63
  var overflow = React.useContext(OverflowContext);
64
64
  var className = props.className,
65
65
  _props$columns = props.columns,
@@ -81,7 +81,7 @@ export default function createGrid() {
81
81
  themeDisableEqualOverflow = props.disableEqualOverflow,
82
82
  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.
83
83
  var disableEqualOverflow = themeDisableEqualOverflow;
84
- if (nested && themeDisableEqualOverflow !== undefined) {
84
+ if (level && themeDisableEqualOverflow !== undefined) {
85
85
  disableEqualOverflow = inProps.disableEqualOverflow;
86
86
  }
87
87
  // collect breakpoints related props because they can be customized from the theme.
@@ -100,12 +100,12 @@ export default function createGrid() {
100
100
  other[key] = val;
101
101
  }
102
102
  });
103
- var columns = (_inProps$columns = inProps.columns) != null ? _inProps$columns : nested ? undefined : columnsProp;
104
- var spacing = (_inProps$spacing = inProps.spacing) != null ? _inProps$spacing : nested ? undefined : spacingProp;
105
- var rowSpacing = (_ref3 = (_inProps$rowSpacing = inProps.rowSpacing) != null ? _inProps$rowSpacing : inProps.spacing) != null ? _ref3 : nested ? undefined : rowSpacingProp;
106
- var columnSpacing = (_ref4 = (_inProps$columnSpacin = inProps.columnSpacing) != null ? _inProps$columnSpacin : inProps.spacing) != null ? _ref4 : nested ? undefined : columnSpacingProp;
103
+ var columns = (_inProps$columns = inProps.columns) != null ? _inProps$columns : level ? undefined : columnsProp;
104
+ var spacing = (_inProps$spacing = inProps.spacing) != null ? _inProps$spacing : level ? undefined : spacingProp;
105
+ var rowSpacing = (_ref3 = (_inProps$rowSpacing = inProps.rowSpacing) != null ? _inProps$rowSpacing : inProps.spacing) != null ? _ref3 : level ? undefined : rowSpacingProp;
106
+ var columnSpacing = (_ref4 = (_inProps$columnSpacin = inProps.columnSpacing) != null ? _inProps$columnSpacin : inProps.spacing) != null ? _ref4 : level ? undefined : columnSpacingProp;
107
107
  var ownerState = _extends({}, props, {
108
- nested: nested,
108
+ level: level,
109
109
  columns: columns,
110
110
  container: container,
111
111
  direction: direction,
@@ -127,9 +127,9 @@ export default function createGrid() {
127
127
  ownerState: ownerState,
128
128
  className: clsx(classes.root, className)
129
129
  }, other));
130
- if (!nested) {
130
+ if (container) {
131
131
  result = /*#__PURE__*/_jsx(NestedContext.Provider, {
132
- value: true,
132
+ value: level + 1,
133
133
  children: result
134
134
  });
135
135
  }
@@ -1,6 +1,23 @@
1
1
  import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
2
+ import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
2
3
  import _typeof from "@babel/runtime/helpers/esm/typeof";
3
4
  import _extends from "@babel/runtime/helpers/esm/extends";
5
+ function isNestedContainer(ownerState) {
6
+ return ownerState.level > 0 && ownerState.container;
7
+ }
8
+ function createGetSelfSpacing(ownerState) {
9
+ return function getSelfSpacing(axis) {
10
+ return "var(--Grid-".concat(axis, "Spacing").concat(ownerState.level || '', ")");
11
+ };
12
+ }
13
+ function createGetParentSpacing(ownerState) {
14
+ return function getParentSpacing(axis) {
15
+ if (ownerState.level === 0) {
16
+ return "var(--Grid-".concat(axis, "Spacing)");
17
+ }
18
+ return "var(--Grid-".concat(axis, "Spacing").concat(ownerState.level - 1 || '', ")");
19
+ };
20
+ }
4
21
  export var filterBreakpointKeys = function filterBreakpointKeys(breakpointsKeys, responsiveKeys) {
5
22
  return breakpointsKeys.filter(function (key) {
6
23
  return responsiveKeys.includes(key);
@@ -50,6 +67,7 @@ export var traverseBreakpoints = function traverseBreakpoints(breakpoints, respo
50
67
  export var generateGridSizeStyles = function generateGridSizeStyles(_ref) {
51
68
  var theme = _ref.theme,
52
69
  ownerState = _ref.ownerState;
70
+ var getSelfSpacing = createGetSelfSpacing(ownerState);
53
71
  var styles = {};
54
72
  traverseBreakpoints(theme.breakpoints, ownerState.gridSize, function (appendStyle, value) {
55
73
  var style = {};
@@ -73,7 +91,7 @@ export var generateGridSizeStyles = function generateGridSizeStyles(_ref) {
73
91
  style = {
74
92
  flexGrow: 0,
75
93
  flexBasis: 'auto',
76
- width: "calc(100% * ".concat(value, " / var(--Grid-columns)").concat(ownerState.nested && ownerState.container ? " + var(--Grid-columnSpacing)" : '', ")")
94
+ width: "calc(100% * ".concat(value, " / var(--Grid-columns)").concat(isNestedContainer(ownerState) ? " + ".concat(getSelfSpacing('column')) : '', ")")
77
95
  };
78
96
  }
79
97
  appendStyle(styles, style);
@@ -122,33 +140,31 @@ export var generateGridRowSpacingStyles = function generateGridRowSpacingStyles(
122
140
  if (!ownerState.container) {
123
141
  return {};
124
142
  }
125
- var styles = {};
143
+ var getParentSpacing = createGetParentSpacing(ownerState);
144
+ var styles = isNestedContainer(ownerState) ? _defineProperty({}, "--Grid-rowSpacing".concat(ownerState.level || ''), getParentSpacing('row')) : {};
126
145
  traverseBreakpoints(theme.breakpoints, ownerState.rowSpacing, function (appendStyle, value) {
127
146
  var _theme$spacing;
128
- appendStyle(styles, {
129
- '--Grid-rowSpacing': typeof value === 'string' ? value : (_theme$spacing = theme.spacing) == null ? void 0 : _theme$spacing.call(theme, value)
130
- });
147
+ appendStyle(styles, _defineProperty({}, "--Grid-rowSpacing".concat(ownerState.level || ''), typeof value === 'string' ? value : (_theme$spacing = theme.spacing) == null ? void 0 : _theme$spacing.call(theme, value)));
131
148
  });
132
149
  return styles;
133
150
  };
134
- export var generateGridColumnSpacingStyles = function generateGridColumnSpacingStyles(_ref5) {
135
- var theme = _ref5.theme,
136
- ownerState = _ref5.ownerState;
151
+ export var generateGridColumnSpacingStyles = function generateGridColumnSpacingStyles(_ref6) {
152
+ var theme = _ref6.theme,
153
+ ownerState = _ref6.ownerState;
137
154
  if (!ownerState.container) {
138
155
  return {};
139
156
  }
140
- var styles = {};
157
+ var getParentSpacing = createGetParentSpacing(ownerState);
158
+ var styles = isNestedContainer(ownerState) ? _defineProperty({}, "--Grid-columnSpacing".concat(ownerState.level || ''), getParentSpacing('column')) : {};
141
159
  traverseBreakpoints(theme.breakpoints, ownerState.columnSpacing, function (appendStyle, value) {
142
160
  var _theme$spacing2;
143
- appendStyle(styles, {
144
- '--Grid-columnSpacing': typeof value === 'string' ? value : (_theme$spacing2 = theme.spacing) == null ? void 0 : _theme$spacing2.call(theme, value)
145
- });
161
+ appendStyle(styles, _defineProperty({}, "--Grid-columnSpacing".concat(ownerState.level || ''), typeof value === 'string' ? value : (_theme$spacing2 = theme.spacing) == null ? void 0 : _theme$spacing2.call(theme, value)));
146
162
  });
147
163
  return styles;
148
164
  };
149
- export var generateGridDirectionStyles = function generateGridDirectionStyles(_ref6) {
150
- var theme = _ref6.theme,
151
- ownerState = _ref6.ownerState;
165
+ export var generateGridDirectionStyles = function generateGridDirectionStyles(_ref8) {
166
+ var theme = _ref8.theme,
167
+ ownerState = _ref8.ownerState;
152
168
  if (!ownerState.container) {
153
169
  return {};
154
170
  }
@@ -160,39 +176,34 @@ export var generateGridDirectionStyles = function generateGridDirectionStyles(_r
160
176
  });
161
177
  return styles;
162
178
  };
163
- export var generateGridStyles = function generateGridStyles(_ref7) {
164
- var ownerState = _ref7.ownerState;
179
+ export var generateGridStyles = function generateGridStyles(_ref9) {
180
+ var ownerState = _ref9.ownerState;
181
+ var getSelfSpacing = createGetSelfSpacing(ownerState);
182
+ var getParentSpacing = createGetParentSpacing(ownerState);
165
183
  return _extends({
166
184
  minWidth: 0,
167
185
  boxSizing: 'border-box'
168
- }, ownerState.container ? _extends({
186
+ }, ownerState.container && _extends({
169
187
  display: 'flex',
170
188
  flexWrap: 'wrap'
171
189
  }, ownerState.wrap && ownerState.wrap !== 'wrap' && {
172
190
  flexWrap: ownerState.wrap
173
191
  }, {
174
- margin: "calc(var(--Grid-rowSpacing) / -2) calc(var(--Grid-columnSpacing) / -2)"
192
+ margin: "calc(".concat(getSelfSpacing('row'), " / -2) calc(").concat(getSelfSpacing('column'), " / -2)")
175
193
  }, ownerState.disableEqualOverflow && {
176
- margin: "calc(var(--Grid-rowSpacing) * -1) 0px 0px calc(var(--Grid-columnSpacing) * -1)"
177
- }, ownerState.nested ? _extends({
178
- padding: "calc(var(--Grid-nested-rowSpacing) / 2) calc(var(--Grid-nested-columnSpacing) / 2)"
194
+ margin: "calc(".concat(getSelfSpacing('row'), " * -1) 0px 0px calc(").concat(getSelfSpacing('column'), " * -1)")
195
+ }), (!ownerState.container || isNestedContainer(ownerState)) && _extends({
196
+ padding: "calc(".concat(getParentSpacing('row'), " / 2) calc(").concat(getParentSpacing('column'), " / 2)")
179
197
  }, (ownerState.disableEqualOverflow || ownerState.parentDisableEqualOverflow) && {
180
- padding: "calc(var(--Grid-nested-rowSpacing)) 0px 0px calc(var(--Grid-nested-columnSpacing))"
181
- }) : {
182
- '--Grid-nested-rowSpacing': 'var(--Grid-rowSpacing)',
183
- '--Grid-nested-columnSpacing': 'var(--Grid-columnSpacing)'
184
- }) : _extends({
185
- padding: "calc(var(--Grid-rowSpacing) / 2) calc(var(--Grid-columnSpacing) / 2)"
186
- }, ownerState.disableEqualOverflow && {
187
- padding: "calc(var(--Grid-rowSpacing)) 0px 0px calc(var(--Grid-columnSpacing))"
198
+ padding: "".concat(getParentSpacing('row'), " 0px 0px ").concat(getParentSpacing('column'))
188
199
  }));
189
200
  };
190
201
  export var generateSizeClassNames = function generateSizeClassNames(gridSize) {
191
202
  var classNames = [];
192
- Object.entries(gridSize).forEach(function (_ref8) {
193
- var _ref9 = _slicedToArray(_ref8, 2),
194
- key = _ref9[0],
195
- value = _ref9[1];
203
+ Object.entries(gridSize).forEach(function (_ref10) {
204
+ var _ref11 = _slicedToArray(_ref10, 2),
205
+ key = _ref11[0],
206
+ value = _ref11[1];
196
207
  if (value !== false && value !== undefined) {
197
208
  classNames.push("grid-".concat(key, "-").concat(String(value)));
198
209
  }
@@ -212,10 +223,10 @@ export var generateSpacingClassNames = function generateSpacingClassNames(spacin
212
223
  }
213
224
  if (_typeof(spacing) === 'object' && !Array.isArray(spacing)) {
214
225
  var classNames = [];
215
- Object.entries(spacing).forEach(function (_ref10) {
216
- var _ref11 = _slicedToArray(_ref10, 2),
217
- key = _ref11[0],
218
- value = _ref11[1];
226
+ Object.entries(spacing).forEach(function (_ref12) {
227
+ var _ref13 = _slicedToArray(_ref12, 2),
228
+ key = _ref13[0],
229
+ value = _ref13[1];
219
230
  if (isValidSpacing(value)) {
220
231
  classNames.push("spacing-".concat(key, "-").concat(String(value)));
221
232
  }
@@ -229,10 +240,10 @@ export var generateDirectionClasses = function generateDirectionClasses(directio
229
240
  return [];
230
241
  }
231
242
  if (_typeof(direction) === 'object') {
232
- return Object.entries(direction).map(function (_ref12) {
233
- var _ref13 = _slicedToArray(_ref12, 2),
234
- key = _ref13[0],
235
- value = _ref13[1];
243
+ return Object.entries(direction).map(function (_ref14) {
244
+ var _ref15 = _slicedToArray(_ref14, 2),
245
+ key = _ref15[0],
246
+ value = _ref15[1];
236
247
  return "direction-".concat(key, "-").concat(value);
237
248
  });
238
249
  }
@@ -112,14 +112,14 @@ export default function createCssVarsProvider(options) {
112
112
  colorScheme = ctx.colorScheme;
113
113
  }
114
114
  var calculatedMode = function () {
115
- if (!mode) {
116
- // This scope occurs on the server
117
- if (defaultMode === 'system') {
118
- return designSystemMode;
119
- }
120
- return defaultMode;
115
+ if (mode) {
116
+ return mode;
117
+ }
118
+ // This scope occurs on the server
119
+ if (defaultMode === 'system') {
120
+ return designSystemMode;
121
121
  }
122
- return mode;
122
+ return defaultMode;
123
123
  }();
124
124
  var calculatedColorScheme = function () {
125
125
  if (!colorScheme) {
package/legacy/index.js CHANGED
@@ -1,5 +1,5 @@
1
1
  /**
2
- * @mui/system v5.11.7
2
+ * @mui/system v5.11.9
3
3
  *
4
4
  * @license MIT
5
5
  * This source code is licensed under the MIT license found in the
@@ -34,7 +34,7 @@ export default function createGrid(options = {}) {
34
34
  useThemeProps = useThemePropsDefault,
35
35
  componentName = 'MuiGrid'
36
36
  } = options;
37
- const NestedContext = /*#__PURE__*/React.createContext(false);
37
+ const NestedContext = /*#__PURE__*/React.createContext(0);
38
38
  const OverflowContext = /*#__PURE__*/React.createContext(undefined);
39
39
  const useUtilityClasses = (ownerState, theme) => {
40
40
  const {
@@ -54,7 +54,7 @@ export default function createGrid(options = {}) {
54
54
  const theme = useTheme();
55
55
  const themeProps = useThemeProps(inProps);
56
56
  const props = extendSxProp(themeProps); // `color` type conflicts with html color attribute.
57
- const nested = React.useContext(NestedContext);
57
+ const level = React.useContext(NestedContext);
58
58
  const overflow = React.useContext(OverflowContext);
59
59
  const {
60
60
  className,
@@ -71,7 +71,7 @@ export default function createGrid(options = {}) {
71
71
  rest = _objectWithoutPropertiesLoose(props, _excluded);
72
72
  // Because `disableEqualOverflow` can be set from the theme's defaultProps, the **nested** grid should look at the instance props instead.
73
73
  let disableEqualOverflow = themeDisableEqualOverflow;
74
- if (nested && themeDisableEqualOverflow !== undefined) {
74
+ if (level && themeDisableEqualOverflow !== undefined) {
75
75
  disableEqualOverflow = inProps.disableEqualOverflow;
76
76
  }
77
77
  // collect breakpoints related props because they can be customized from the theme.
@@ -87,12 +87,12 @@ export default function createGrid(options = {}) {
87
87
  other[key] = val;
88
88
  }
89
89
  });
90
- const columns = inProps.columns ?? (nested ? undefined : columnsProp);
91
- const spacing = inProps.spacing ?? (nested ? undefined : spacingProp);
92
- const rowSpacing = inProps.rowSpacing ?? inProps.spacing ?? (nested ? undefined : rowSpacingProp);
93
- const columnSpacing = inProps.columnSpacing ?? inProps.spacing ?? (nested ? undefined : columnSpacingProp);
90
+ const columns = inProps.columns ?? (level ? undefined : columnsProp);
91
+ const spacing = inProps.spacing ?? (level ? undefined : spacingProp);
92
+ const rowSpacing = inProps.rowSpacing ?? inProps.spacing ?? (level ? undefined : rowSpacingProp);
93
+ const columnSpacing = inProps.columnSpacing ?? inProps.spacing ?? (level ? undefined : columnSpacingProp);
94
94
  const ownerState = _extends({}, props, {
95
- nested,
95
+ level,
96
96
  columns,
97
97
  container,
98
98
  direction,
@@ -114,9 +114,9 @@ export default function createGrid(options = {}) {
114
114
  ownerState: ownerState,
115
115
  className: clsx(classes.root, className)
116
116
  }, other));
117
- if (!nested) {
117
+ if (container) {
118
118
  result = /*#__PURE__*/_jsx(NestedContext.Provider, {
119
- value: true,
119
+ value: level + 1,
120
120
  children: result
121
121
  });
122
122
  }
@@ -1,4 +1,20 @@
1
1
  import _extends from "@babel/runtime/helpers/esm/extends";
2
+ function isNestedContainer(ownerState) {
3
+ return ownerState.level > 0 && ownerState.container;
4
+ }
5
+ function createGetSelfSpacing(ownerState) {
6
+ return function getSelfSpacing(axis) {
7
+ return `var(--Grid-${axis}Spacing${ownerState.level || ''})`;
8
+ };
9
+ }
10
+ function createGetParentSpacing(ownerState) {
11
+ return function getParentSpacing(axis) {
12
+ if (ownerState.level === 0) {
13
+ return `var(--Grid-${axis}Spacing)`;
14
+ }
15
+ return `var(--Grid-${axis}Spacing${ownerState.level - 1 || ''})`;
16
+ };
17
+ }
2
18
  export const filterBreakpointKeys = (breakpointsKeys, responsiveKeys) => breakpointsKeys.filter(key => responsiveKeys.includes(key));
3
19
  export const traverseBreakpoints = (breakpoints, responsive, iterator) => {
4
20
  const smallestBreakpoint = breakpoints.keys[0]; // the keys is sorted from smallest to largest by `createBreakpoints`.
@@ -45,6 +61,7 @@ export const generateGridSizeStyles = ({
45
61
  theme,
46
62
  ownerState
47
63
  }) => {
64
+ const getSelfSpacing = createGetSelfSpacing(ownerState);
48
65
  const styles = {};
49
66
  traverseBreakpoints(theme.breakpoints, ownerState.gridSize, (appendStyle, value) => {
50
67
  let style = {};
@@ -68,7 +85,7 @@ export const generateGridSizeStyles = ({
68
85
  style = {
69
86
  flexGrow: 0,
70
87
  flexBasis: 'auto',
71
- width: `calc(100% * ${value} / var(--Grid-columns)${ownerState.nested && ownerState.container ? ` + var(--Grid-columnSpacing)` : ''})`
88
+ width: `calc(100% * ${value} / var(--Grid-columns)${isNestedContainer(ownerState) ? ` + ${getSelfSpacing('column')}` : ''})`
72
89
  };
73
90
  }
74
91
  appendStyle(styles, style);
@@ -120,10 +137,15 @@ export const generateGridRowSpacingStyles = ({
120
137
  if (!ownerState.container) {
121
138
  return {};
122
139
  }
123
- const styles = {};
140
+ const getParentSpacing = createGetParentSpacing(ownerState);
141
+ const styles = isNestedContainer(ownerState) ? {
142
+ // Set the default spacing as its parent spacing.
143
+ // It will be overridden if spacing props are provided
144
+ [`--Grid-rowSpacing${ownerState.level || ''}`]: getParentSpacing('row')
145
+ } : {};
124
146
  traverseBreakpoints(theme.breakpoints, ownerState.rowSpacing, (appendStyle, value) => {
125
147
  appendStyle(styles, {
126
- '--Grid-rowSpacing': typeof value === 'string' ? value : theme.spacing?.(value)
148
+ [`--Grid-rowSpacing${ownerState.level || ''}`]: typeof value === 'string' ? value : theme.spacing?.(value)
127
149
  });
128
150
  });
129
151
  return styles;
@@ -135,10 +157,15 @@ export const generateGridColumnSpacingStyles = ({
135
157
  if (!ownerState.container) {
136
158
  return {};
137
159
  }
138
- const styles = {};
160
+ const getParentSpacing = createGetParentSpacing(ownerState);
161
+ const styles = isNestedContainer(ownerState) ? {
162
+ // Set the default spacing as its parent spacing.
163
+ // It will be overridden if spacing props are provided
164
+ [`--Grid-columnSpacing${ownerState.level || ''}`]: getParentSpacing('column')
165
+ } : {};
139
166
  traverseBreakpoints(theme.breakpoints, ownerState.columnSpacing, (appendStyle, value) => {
140
167
  appendStyle(styles, {
141
- '--Grid-columnSpacing': typeof value === 'string' ? value : theme.spacing?.(value)
168
+ [`--Grid-columnSpacing${ownerState.level || ''}`]: typeof value === 'string' ? value : theme.spacing?.(value)
142
169
  });
143
170
  });
144
171
  return styles;
@@ -161,29 +188,24 @@ export const generateGridDirectionStyles = ({
161
188
  export const generateGridStyles = ({
162
189
  ownerState
163
190
  }) => {
191
+ const getSelfSpacing = createGetSelfSpacing(ownerState);
192
+ const getParentSpacing = createGetParentSpacing(ownerState);
164
193
  return _extends({
165
194
  minWidth: 0,
166
195
  boxSizing: 'border-box'
167
- }, ownerState.container ? _extends({
196
+ }, ownerState.container && _extends({
168
197
  display: 'flex',
169
198
  flexWrap: 'wrap'
170
199
  }, ownerState.wrap && ownerState.wrap !== 'wrap' && {
171
200
  flexWrap: ownerState.wrap
172
201
  }, {
173
- margin: `calc(var(--Grid-rowSpacing) / -2) calc(var(--Grid-columnSpacing) / -2)`
202
+ margin: `calc(${getSelfSpacing('row')} / -2) calc(${getSelfSpacing('column')} / -2)`
174
203
  }, ownerState.disableEqualOverflow && {
175
- margin: `calc(var(--Grid-rowSpacing) * -1) 0px 0px calc(var(--Grid-columnSpacing) * -1)`
176
- }, ownerState.nested ? _extends({
177
- padding: `calc(var(--Grid-nested-rowSpacing) / 2) calc(var(--Grid-nested-columnSpacing) / 2)`
204
+ margin: `calc(${getSelfSpacing('row')} * -1) 0px 0px calc(${getSelfSpacing('column')} * -1)`
205
+ }), (!ownerState.container || isNestedContainer(ownerState)) && _extends({
206
+ padding: `calc(${getParentSpacing('row')} / 2) calc(${getParentSpacing('column')} / 2)`
178
207
  }, (ownerState.disableEqualOverflow || ownerState.parentDisableEqualOverflow) && {
179
- padding: `calc(var(--Grid-nested-rowSpacing)) 0px 0px calc(var(--Grid-nested-columnSpacing))`
180
- }) : {
181
- '--Grid-nested-rowSpacing': 'var(--Grid-rowSpacing)',
182
- '--Grid-nested-columnSpacing': 'var(--Grid-columnSpacing)'
183
- }) : _extends({
184
- padding: `calc(var(--Grid-rowSpacing) / 2) calc(var(--Grid-columnSpacing) / 2)`
185
- }, ownerState.disableEqualOverflow && {
186
- padding: `calc(var(--Grid-rowSpacing)) 0px 0px calc(var(--Grid-columnSpacing))`
208
+ padding: `${getParentSpacing('row')} 0px 0px ${getParentSpacing('column')}`
187
209
  }));
188
210
  };
189
211
  export const generateSizeClassNames = gridSize => {
@@ -94,14 +94,14 @@ export default function createCssVarsProvider(options) {
94
94
  colorScheme = ctx.colorScheme;
95
95
  }
96
96
  const calculatedMode = (() => {
97
- if (!mode) {
98
- // This scope occurs on the server
99
- if (defaultMode === 'system') {
100
- return designSystemMode;
101
- }
102
- return defaultMode;
97
+ if (mode) {
98
+ return mode;
99
+ }
100
+ // This scope occurs on the server
101
+ if (defaultMode === 'system') {
102
+ return designSystemMode;
103
103
  }
104
- return mode;
104
+ return defaultMode;
105
105
  })();
106
106
  const calculatedColorScheme = (() => {
107
107
  if (!colorScheme) {
package/modern/index.js CHANGED
@@ -1,5 +1,5 @@
1
1
  /**
2
- * @mui/system v5.11.7
2
+ * @mui/system v5.11.9
3
3
  *
4
4
  * @license MIT
5
5
  * This source code is licensed under the MIT license found in the
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@mui/system",
3
- "version": "5.11.7",
3
+ "version": "5.11.9",
4
4
  "private": false,
5
5
  "author": "MUI Team",
6
6
  "description": "CSS utilities for rapidly laying out custom designs.",
@@ -43,11 +43,11 @@
43
43
  }
44
44
  },
45
45
  "dependencies": {
46
- "@babel/runtime": "^7.20.7",
47
- "@mui/private-theming": "^5.11.7",
48
- "@mui/styled-engine": "^5.11.0",
46
+ "@babel/runtime": "^7.20.13",
47
+ "@mui/private-theming": "^5.11.9",
48
+ "@mui/styled-engine": "^5.11.9",
49
49
  "@mui/types": "^7.2.3",
50
- "@mui/utils": "^5.11.7",
50
+ "@mui/utils": "^5.11.9",
51
51
  "clsx": "^1.2.1",
52
52
  "csstype": "^3.1.1",
53
53
  "prop-types": "^15.8.1"
@@ -1 +1 @@
1
- export {};
1
+ export {};