@mui/system 5.9.0 → 5.9.3

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/cssVars/createCssVarsProvider.js

@@ -155,7 +155,7 @@ export default function createCssVarsProvider(options) {
       })();
 
       if (key === resolvedDefaultColorScheme) {
-        defaultColorSchemeStyleSheet[colorSchemeSelector] = css;
+        defaultColorSchemeStyleSheet[`${colorSchemeSelector}, [${attribute}="${key}"]`] = css;
       } else {
         otherColorSchemesStyleSheet[`${colorSchemeSelector === ':root' ? '' : colorSchemeSelector}[${attribute}="${key}"]`] = css;
       }

package/modern/index.js

@@ -1,4 +1,4 @@
-/** @license MUI v5.9.0
+/** @license MUI v5.9.3
  *
  * 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.3",
   "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.3",
     "@mui/styled-engine": "^5.8.7",
-    "@mui/types": "^7.1.4",
-    "@mui/utils": "^5.9.0",
+    "@mui/types": "^7.1.5",
+    "@mui/utils": "^5.9.3",
     "clsx": "^1.2.1",
     "csstype": "^3.1.0",
     "prop-types": "^15.8.1"

package/styleFunctionSx/styleFunctionSx.spec.d.ts

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