@mui/system 5.9.0 → 5.9.1

package/esm/Unstable_Grid/Grid.js

@@ -57,6 +57,11 @@ process.env.NODE_ENV !== "production" ? Grid.propTypes
   /* @typescript-to-proptypes-ignore */
   .oneOfType([PropTypes.oneOf(['column-reverse', 'column', 'row-reverse', 'row']), PropTypes.arrayOf(PropTypes.oneOf(['column-reverse', 'column', 'row-reverse', 'row'])), PropTypes.object]),
 
+  /**
+   * If `true`, the negative margin and padding are apply only to the top and left sides of the grid.
+   */
+  disableEqualOverflow: PropTypes.bool,
+
   /**
    * If a number, it sets the number of columns the grid item uses.
    * It can't be greater than the total number of columns of the container (12 by default).

package/esm/Unstable_Grid/createGrid.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["className", "columns", "container", "component", "direction", "wrap", "spacing", "rowSpacing", "columnSpacing"];
+const _excluded = ["className", "columns", "container", "component", "direction", "wrap", "spacing", "rowSpacing", "columnSpacing", "disableEqualOverflow"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
@@ -36,6 +36,7 @@ export default function createGrid(options = {}) {
     componentName = 'MuiGrid'
   } = options;
   const NestedContext = /*#__PURE__*/React.createContext(false);
+  const OverflowContext = /*#__PURE__*/React.createContext(undefined);
 
   const useUtilityClasses = (ownerState, theme) => {
     const {
@@ -53,13 +54,14 @@ export default function createGrid(options = {}) {
 
   const GridRoot = createStyledComponent(generateGridColumnsStyles, generateGridColumnSpacingStyles, generateGridRowSpacingStyles, generateGridSizeStyles, generateGridDirectionStyles, generateGridStyles, generateGridOffsetStyles);
   const Grid = /*#__PURE__*/React.forwardRef(function Grid(inProps, ref) {
-    var _inProps$columns, _inProps$spacing, _ref, _inProps$rowSpacing, _ref2, _inProps$columnSpacin;
+    var _inProps$columns, _inProps$spacing, _ref, _inProps$rowSpacing, _ref2, _inProps$columnSpacin, _ref3, _disableEqualOverflow;
 
     const theme = useTheme();
     const themeProps = useThemeProps(inProps);
     const props = extendSxProp(themeProps); // `color` type conflicts with html color attribute.
 
     const nested = React.useContext(NestedContext);
+    const overflow = React.useContext(OverflowContext);
 
     const {
       className,
@@ -70,9 +72,17 @@ export default function createGrid(options = {}) {
       wrap = 'wrap',
       spacing: spacingProp = 0,
       rowSpacing: rowSpacingProp = spacingProp,
-      columnSpacing: columnSpacingProp = spacingProp
+      columnSpacing: columnSpacingProp = spacingProp,
+      disableEqualOverflow: themeDisableEqualOverflow
     } = props,
-          rest = _objectWithoutPropertiesLoose(props, _excluded); // collect breakpoints related props because they can be custom from the theme.
+          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) {
+      disableEqualOverflow = inProps.disableEqualOverflow;
+    } // collect breakpoints related props because they can be customized from the theme.
 
 
     const gridSize = {};
@@ -102,7 +112,11 @@ export default function createGrid(options = {}) {
       rowSpacing,
       columnSpacing,
       gridSize,
-      gridOffset
+      gridOffset,
+      disableEqualOverflow: (_ref3 = (_disableEqualOverflow = disableEqualOverflow) != null ? _disableEqualOverflow : overflow) != null ? _ref3 : false,
+      // use context value if exists.
+      parentDisableEqualOverflow: overflow // for nested grid
+
     });
 
     const classes = useUtilityClasses(ownerState, theme);
@@ -121,6 +135,16 @@ export default function createGrid(options = {}) {
       });
     }
 
+    if (disableEqualOverflow !== undefined && disableEqualOverflow !== (overflow != null ? overflow : false)) {
+      // There are 2 possibilities that should wrap with the OverflowContext to communicate with the nested grids:
+      // 1. It is the root grid with `disableEqualOverflow`.
+      // 2. It is a nested grid with different `disableEqualOverflow` from the context.
+      result = /*#__PURE__*/_jsx(OverflowContext.Provider, {
+        value: disableEqualOverflow,
+        children: result
+      });
+    }
+
     return result;
   });
   process.env.NODE_ENV !== "production" ? Grid.propTypes
@@ -133,6 +157,7 @@ export default function createGrid(options = {}) {
     component: PropTypes.elementType,
     container: PropTypes.bool,
     direction: PropTypes.oneOfType([PropTypes.oneOf(['column-reverse', 'column', 'row-reverse', 'row']), PropTypes.arrayOf(PropTypes.oneOf(['column-reverse', 'column', 'row-reverse', 'row'])), PropTypes.object]),
+    disableEqualOverflow: PropTypes.bool,
     lg: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.number, PropTypes.bool]),
     lgOffset: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.number]),
     md: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.number, PropTypes.bool]),

package/esm/Unstable_Grid/gridGenerator.js

@@ -185,14 +185,20 @@ export const generateGridStyles = ({
     flexWrap: ownerState.wrap
   }, {
     margin: `calc(var(--Grid-rowSpacing) / -2) calc(var(--Grid-columnSpacing) / -2)`
-  }, ownerState.nested ? {
+  }, 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)`
-  } : {
+  }, (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))`
+  }));
 };
 export const generateSizeClassNames = gridSize => {
   const classNames = [];

package/esm/breakpoints.js

@@ -85,7 +85,7 @@ function breakpoints(styleFunction) {
 export function createEmptyBreakpointObject(breakpointsInput = {}) {
   var _breakpointsInput$key;
 
-  const breakpointsInOrder = breakpointsInput == null ? void 0 : (_breakpointsInput$key = breakpointsInput.keys) == null ? void 0 : _breakpointsInput$key.reduce((acc, key) => {
+  const breakpointsInOrder = (_breakpointsInput$key = breakpointsInput.keys) == null ? void 0 : _breakpointsInput$key.reduce((acc, key) => {
     const breakpointStyleKey = breakpointsInput.up(key);
     acc[breakpointStyleKey] = {};
     return acc;

package/index.js

@@ -1,4 +1,4 @@
-/** @license MUI v5.9.0
+/** @license MUI v5.9.1
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.

package/index.spec.d.ts

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

package/legacy/Unstable_Grid/Grid.js

@@ -57,6 +57,11 @@ process.env.NODE_ENV !== "production" ? Grid.propTypes
   /* @typescript-to-proptypes-ignore */
   .oneOfType([PropTypes.oneOf(['column-reverse', 'column', 'row-reverse', 'row']), PropTypes.arrayOf(PropTypes.oneOf(['column-reverse', 'column', 'row-reverse', 'row'])), PropTypes.object]),
 
+  /**
+   * If `true`, the negative margin and padding are apply only to the top and left sides of the grid.
+   */
+  disableEqualOverflow: PropTypes.bool,
+
   /**
    * If a number, it sets the number of columns the grid item uses.
    * It can't be greater than the total number of columns of the container (12 by default).

package/legacy/Unstable_Grid/createGrid.js

@@ -40,6 +40,7 @@ export default function createGrid() {
       _options$componentNam = options.componentName,
       componentName = _options$componentNam === void 0 ? 'MuiGrid' : _options$componentNam;
   var NestedContext = /*#__PURE__*/React.createContext(false);
+  var OverflowContext = /*#__PURE__*/React.createContext(undefined);
 
   var useUtilityClasses = function useUtilityClasses(ownerState, theme) {
     var container = ownerState.container,
@@ -57,13 +58,14 @@ export default function createGrid() {
 
   var GridRoot = createStyledComponent(generateGridColumnsStyles, generateGridColumnSpacingStyles, generateGridRowSpacingStyles, generateGridSizeStyles, generateGridDirectionStyles, generateGridStyles, generateGridOffsetStyles);
   var Grid = /*#__PURE__*/React.forwardRef(function Grid(inProps, ref) {
-    var _inProps$columns, _inProps$spacing, _ref3, _inProps$rowSpacing, _ref4, _inProps$columnSpacin;
+    var _inProps$columns, _inProps$spacing, _ref3, _inProps$rowSpacing, _ref4, _inProps$columnSpacin, _ref5, _disableEqualOverflow;
 
     var theme = useTheme();
     var themeProps = useThemeProps(inProps);
     var props = extendSxProp(themeProps); // `color` type conflicts with html color attribute.
 
     var nested = React.useContext(NestedContext);
+    var overflow = React.useContext(OverflowContext);
 
     var className = props.className,
         _props$columns = props.columns,
@@ -82,7 +84,15 @@ export default function createGrid() {
         rowSpacingProp = _props$rowSpacing === void 0 ? spacingProp : _props$rowSpacing,
         _props$columnSpacing = props.columnSpacing,
         columnSpacingProp = _props$columnSpacing === void 0 ? spacingProp : _props$columnSpacing,
-        rest = _objectWithoutProperties(props, ["className", "columns", "container", "component", "direction", "wrap", "spacing", "rowSpacing", "columnSpacing"]); // collect breakpoints related props because they can be custom from the theme.
+        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) {
+      disableEqualOverflow = inProps.disableEqualOverflow;
+    } // collect breakpoints related props because they can be customized from the theme.
 
 
     var gridSize = {};
@@ -116,7 +126,11 @@ export default function createGrid() {
       rowSpacing: rowSpacing,
       columnSpacing: columnSpacing,
       gridSize: gridSize,
-      gridOffset: gridOffset
+      gridOffset: gridOffset,
+      disableEqualOverflow: (_ref5 = (_disableEqualOverflow = disableEqualOverflow) != null ? _disableEqualOverflow : overflow) != null ? _ref5 : false,
+      // use context value if exists.
+      parentDisableEqualOverflow: overflow // for nested grid
+
     });
 
     var classes = useUtilityClasses(ownerState, theme);
@@ -135,6 +149,16 @@ export default function createGrid() {
       });
     }
 
+    if (disableEqualOverflow !== undefined && disableEqualOverflow !== (overflow != null ? overflow : false)) {
+      // There are 2 possibilities that should wrap with the OverflowContext to communicate with the nested grids:
+      // 1. It is the root grid with `disableEqualOverflow`.
+      // 2. It is a nested grid with different `disableEqualOverflow` from the context.
+      result = /*#__PURE__*/_jsx(OverflowContext.Provider, {
+        value: disableEqualOverflow,
+        children: result
+      });
+    }
+
     return result;
   });
   process.env.NODE_ENV !== "production" ? Grid.propTypes
@@ -147,6 +171,7 @@ export default function createGrid() {
     component: PropTypes.elementType,
     container: PropTypes.bool,
     direction: PropTypes.oneOfType([PropTypes.oneOf(['column-reverse', 'column', 'row-reverse', 'row']), PropTypes.arrayOf(PropTypes.oneOf(['column-reverse', 'column', 'row-reverse', 'row'])), PropTypes.object]),
+    disableEqualOverflow: PropTypes.bool,
     lg: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.number, PropTypes.bool]),
     lgOffset: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.number]),
     md: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.number, PropTypes.bool]),

package/legacy/Unstable_Grid/gridGenerator.js

@@ -184,14 +184,20 @@ export var generateGridStyles = function generateGridStyles(_ref7) {
     flexWrap: ownerState.wrap
   }, {
     margin: "calc(var(--Grid-rowSpacing) / -2) calc(var(--Grid-columnSpacing) / -2)"
-  }, ownerState.nested ? {
+  }, 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)"
-  } : {
+  }, (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))"
+  }));
 };
 export var generateSizeClassNames = function generateSizeClassNames(gridSize) {
   var classNames = [];

package/legacy/breakpoints.js

@@ -92,7 +92,7 @@ export function createEmptyBreakpointObject() {
   var _breakpointsInput$key;
 
   var breakpointsInput = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-  var breakpointsInOrder = breakpointsInput == null ? void 0 : (_breakpointsInput$key = breakpointsInput.keys) == null ? void 0 : _breakpointsInput$key.reduce(function (acc, key) {
+  var breakpointsInOrder = (_breakpointsInput$key = breakpointsInput.keys) == null ? void 0 : _breakpointsInput$key.reduce(function (acc, key) {
     var breakpointStyleKey = breakpointsInput.up(key);
     acc[breakpointStyleKey] = {};
     return acc;

package/legacy/index.js

@@ -1,4 +1,4 @@
-/** @license MUI v5.9.0
+/** @license MUI v5.9.1
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.

package/modern/Unstable_Grid/Grid.js

@@ -57,6 +57,11 @@ process.env.NODE_ENV !== "production" ? Grid.propTypes
   /* @typescript-to-proptypes-ignore */
   .oneOfType([PropTypes.oneOf(['column-reverse', 'column', 'row-reverse', 'row']), PropTypes.arrayOf(PropTypes.oneOf(['column-reverse', 'column', 'row-reverse', 'row'])), PropTypes.object]),
 
+  /**
+   * If `true`, the negative margin and padding are apply only to the top and left sides of the grid.
+   */
+  disableEqualOverflow: PropTypes.bool,
+
   /**
    * If a number, it sets the number of columns the grid item uses.
    * It can't be greater than the total number of columns of the container (12 by default).

package/modern/Unstable_Grid/createGrid.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["className", "columns", "container", "component", "direction", "wrap", "spacing", "rowSpacing", "columnSpacing"];
+const _excluded = ["className", "columns", "container", "component", "direction", "wrap", "spacing", "rowSpacing", "columnSpacing", "disableEqualOverflow"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
@@ -36,6 +36,7 @@ export default function createGrid(options = {}) {
     componentName = 'MuiGrid'
   } = options;
   const NestedContext = /*#__PURE__*/React.createContext(false);
+  const OverflowContext = /*#__PURE__*/React.createContext(undefined);
 
   const useUtilityClasses = (ownerState, theme) => {
     const {
@@ -58,6 +59,7 @@ export default function createGrid(options = {}) {
     const props = extendSxProp(themeProps); // `color` type conflicts with html color attribute.
 
     const nested = React.useContext(NestedContext);
+    const overflow = React.useContext(OverflowContext);
 
     const {
       className,
@@ -68,9 +70,17 @@ export default function createGrid(options = {}) {
       wrap = 'wrap',
       spacing: spacingProp = 0,
       rowSpacing: rowSpacingProp = spacingProp,
-      columnSpacing: columnSpacingProp = spacingProp
+      columnSpacing: columnSpacingProp = spacingProp,
+      disableEqualOverflow: themeDisableEqualOverflow
     } = props,
-          rest = _objectWithoutPropertiesLoose(props, _excluded); // collect breakpoints related props because they can be custom from the theme.
+          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) {
+      disableEqualOverflow = inProps.disableEqualOverflow;
+    } // collect breakpoints related props because they can be customized from the theme.
 
 
     const gridSize = {};
@@ -100,7 +110,11 @@ export default function createGrid(options = {}) {
       rowSpacing,
       columnSpacing,
       gridSize,
-      gridOffset
+      gridOffset,
+      disableEqualOverflow: disableEqualOverflow ?? overflow ?? false,
+      // use context value if exists.
+      parentDisableEqualOverflow: overflow // for nested grid
+
     });
 
     const classes = useUtilityClasses(ownerState, theme);
@@ -119,6 +133,16 @@ export default function createGrid(options = {}) {
       });
     }
 
+    if (disableEqualOverflow !== undefined && disableEqualOverflow !== (overflow ?? false)) {
+      // There are 2 possibilities that should wrap with the OverflowContext to communicate with the nested grids:
+      // 1. It is the root grid with `disableEqualOverflow`.
+      // 2. It is a nested grid with different `disableEqualOverflow` from the context.
+      result = /*#__PURE__*/_jsx(OverflowContext.Provider, {
+        value: disableEqualOverflow,
+        children: result
+      });
+    }
+
     return result;
   });
   process.env.NODE_ENV !== "production" ? Grid.propTypes
@@ -131,6 +155,7 @@ export default function createGrid(options = {}) {
     component: PropTypes.elementType,
     container: PropTypes.bool,
     direction: PropTypes.oneOfType([PropTypes.oneOf(['column-reverse', 'column', 'row-reverse', 'row']), PropTypes.arrayOf(PropTypes.oneOf(['column-reverse', 'column', 'row-reverse', 'row'])), PropTypes.object]),
+    disableEqualOverflow: PropTypes.bool,
     lg: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.number, PropTypes.bool]),
     lgOffset: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.number]),
     md: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.number, PropTypes.bool]),

package/modern/Unstable_Grid/gridGenerator.js

@@ -181,14 +181,20 @@ export const generateGridStyles = ({
     flexWrap: ownerState.wrap
   }, {
     margin: `calc(var(--Grid-rowSpacing) / -2) calc(var(--Grid-columnSpacing) / -2)`
-  }, ownerState.nested ? {
+  }, 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)`
-  } : {
+  }, (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))`
+  }));
 };
 export const generateSizeClassNames = gridSize => {
   const classNames = [];

package/modern/breakpoints.js

@@ -83,7 +83,7 @@ function breakpoints(styleFunction) {
 }
 
 export function createEmptyBreakpointObject(breakpointsInput = {}) {
-  const breakpointsInOrder = breakpointsInput?.keys?.reduce((acc, key) => {
+  const breakpointsInOrder = breakpointsInput.keys?.reduce((acc, key) => {
     const breakpointStyleKey = breakpointsInput.up(key);
     acc[breakpointStyleKey] = {};
     return acc;

package/modern/index.js

@@ -1,4 +1,4 @@
-/** @license MUI v5.9.0
+/** @license MUI v5.9.1
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/system",
-  "version": "5.9.0",
+  "version": "5.9.1",
   "private": false,
   "author": "MUI Team",
   "description": "CSS utilities for rapidly laying out custom designs.",
@@ -44,10 +44,10 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.17.2",
-    "@mui/private-theming": "^5.9.0",
+    "@mui/private-theming": "^5.9.1",
     "@mui/styled-engine": "^5.8.7",
     "@mui/types": "^7.1.4",
-    "@mui/utils": "^5.9.0",
+    "@mui/utils": "^5.9.1",
     "clsx": "^1.2.1",
     "csstype": "^3.1.0",
     "prop-types": "^15.8.1"

package/styleFunctionSx/styleFunctionSx.spec.d.ts

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