@mui/system - npm Package Compare versions

Comparing version 6.0.0-alpha.10 to 6.0.0-alpha.11

cssContainerQueries/cssContainerQueries.js

@@ -29,6 +29,6 @@ import _formatMuiErrorMessage from "@mui/utils/formatMuiErrorMessage";
 export function isCqShorthand(breakpointKeys, value) {
-  return value.startsWith('@') && (breakpointKeys.some(key => value.startsWith(`@${key}`)) || !!value.match(/^@\d/));
+  return value === '@' || value.startsWith('@') && (breakpointKeys.some(key => value.startsWith(`@${key}`)) || !!value.match(/^@\d/));
 }
 export function getContainerQuery(theme, shorthand) {
-  const matches = shorthand.match(/^@([^/]+)\/?(.+)?$/);
+  const matches = shorthand.match(/^@([^/]+)?\/?(.+)?$/);
   if (!matches) {
@@ -42,3 +42,3 @@ if (process.env.NODE_ENV !== 'production') {
   const [, containerQuery, containerName] = matches;
-  const value = Number.isNaN(+containerQuery) ? containerQuery : +containerQuery;
+  const value = Number.isNaN(+containerQuery) ? containerQuery || 0 : +containerQuery;
   return theme.containerQueries(containerName).up(value);
@@ -57,3 +57,3 @@ }
         // `@container` does not work with `not all and`, so need to invert the logic
-        return result.replace('not all and ', '').replace('min-width:', 'width<').replace('max-width:', 'width>');
+        return result.replace('not all and ', '').replace('min-width:', 'width<').replace('max-width:', 'width>').replace('and', 'or');
       }
@@ -60,0 +60,0 @@ return result;

index.js

 /**
- * @mui/system v6.0.0-alpha.10
+ * @mui/system v6.0.0-alpha.11
  *
@@ -4,0 +4,0 @@ * @license MIT

modern/cssContainerQueries/cssContainerQueries.js

@@ -29,6 +29,6 @@ import _formatMuiErrorMessage from "@mui/utils/formatMuiErrorMessage";
 export function isCqShorthand(breakpointKeys, value) {
-  return value.startsWith('@') && (breakpointKeys.some(key => value.startsWith(`@${key}`)) || !!value.match(/^@\d/));
+  return value === '@' || value.startsWith('@') && (breakpointKeys.some(key => value.startsWith(`@${key}`)) || !!value.match(/^@\d/));
 }
 export function getContainerQuery(theme, shorthand) {
-  const matches = shorthand.match(/^@([^/]+)\/?(.+)?$/);
+  const matches = shorthand.match(/^@([^/]+)?\/?(.+)?$/);
   if (!matches) {
@@ -42,3 +42,3 @@ if (process.env.NODE_ENV !== 'production') {
   const [, containerQuery, containerName] = matches;
-  const value = Number.isNaN(+containerQuery) ? containerQuery : +containerQuery;
+  const value = Number.isNaN(+containerQuery) ? containerQuery || 0 : +containerQuery;
   return theme.containerQueries(containerName).up(value);
@@ -57,3 +57,3 @@ }
         // `@container` does not work with `not all and`, so need to invert the logic
-        return result.replace('not all and ', '').replace('min-width:', 'width<').replace('max-width:', 'width>');
+        return result.replace('not all and ', '').replace('min-width:', 'width<').replace('max-width:', 'width>').replace('and', 'or');
       }
@@ -60,0 +60,0 @@ return result;

modern/index.js

 /**
- * @mui/system v6.0.0-alpha.10
+ * @mui/system v6.0.0-alpha.11
  *
@@ -4,0 +4,0 @@ * @license MIT

modern/Unstable_Grid/createGrid.js

@@ -36,6 +36,2 @@ import * as React from 'react';
   } = options;
-  const GridOverflowContext = /*#__PURE__*/React.createContext(undefined);
-  if (process.env.NODE_ENV !== 'production') {
-    GridOverflowContext.displayName = 'GridOverflowContext';
-  }
   const useUtilityClasses = (ownerState, theme) => {
@@ -59,3 +55,2 @@ const {
     const props = extendSxProp(themeProps); // `color` type conflicts with html color attribute.
-    const overflow = React.useContext(GridOverflowContext);
     const {
@@ -72,11 +67,5 @@ className,
       columnSpacing: columnSpacingProp = spacingProp,
-      disableEqualOverflow: themeDisableEqualOverflow,
       unstable_level: level = 0,
       ...rest
     } = props;
-    // Because `disableEqualOverflow` can be set from the theme's defaultProps, the **nested** grid should look at the instance props instead.
-    let disableEqualOverflow = themeDisableEqualOverflow;
-    if (level && themeDisableEqualOverflow !== undefined) {
-      disableEqualOverflow = inProps.disableEqualOverflow;
-    }
     // collect breakpoints related props because they can be customized from the theme.
@@ -110,9 +99,6 @@ const gridSize = {};
       gridSize,
-      gridOffset,
-      disableEqualOverflow: disableEqualOverflow ?? overflow ?? false,
-      // use context value if exists.
-      parentDisableEqualOverflow: overflow // for nested grid
+      gridOffset
     };
     const classes = useUtilityClasses(ownerState, theme);
-    let result = /*#__PURE__*/_jsx(GridRoot, {
+    return /*#__PURE__*/_jsx(GridRoot, {
       ref: ref,
@@ -132,12 +118,2 @@ as: component,
     });
-    if (disableEqualOverflow !== undefined && disableEqualOverflow !== (overflow ?? false)) {
-      // There are 2 possibilities that should wrap with the GridOverflowContext 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(GridOverflowContext.Provider, {
-        value: disableEqualOverflow,
-        children: result
-      });
-    }
-    return result;
   });
@@ -152,3 +128,2 @@ process.env.NODE_ENV !== "production" ? Grid.propTypes /* remove-proptypes */ = {
     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]),
@@ -155,0 +130,0 @@ lgOffset: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.number]),

modern/Unstable_Grid/Grid.js

@@ -49,6 +49,2 @@ 'use client';
   /**
-   * 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.
@@ -55,0 +51,0 @@ * It can't be greater than the total number of columns of the container (12 by default).

modern/Unstable_Grid/gridGenerator.js

@@ -34,3 +34,3 @@ import { traverseBreakpoints } from './traverseBreakpoints';
 }) => {
-  const getSelfSpacing = createGetSelfSpacing(ownerState);
+  const getParentSpacing = createGetParentSpacing(ownerState);
   const styles = {};
@@ -59,3 +59,3 @@ traverseBreakpoints(theme.breakpoints, ownerState.gridSize, (appendStyle, value) => {
         flexBasis: 'auto',
-        width: `calc(100% * ${value} / ${getParentColumns(ownerState)}${isNestedContainer(ownerState) ? ` + ${getSelfSpacing('column')}` : ''})`
+        width: `calc(100% * ${value} / ${getParentColumns(ownerState)} - (${getParentColumns(ownerState)} - ${value}) * (${getParentSpacing('column')} / ${getParentColumns(ownerState)}))`
       };
@@ -71,2 +71,3 @@ }
 }) => {
+  const getParentSpacing = createGetParentSpacing(ownerState);
   const styles = {};
@@ -82,3 +83,3 @@ traverseBreakpoints(theme.breakpoints, ownerState.gridOffset, (appendStyle, value) => {
       style = {
-        marginLeft: value === 0 ? '0px' : `calc(100% * ${value} / ${getParentColumns(ownerState)})`
+        marginLeft: value === 0 ? '0px' : `calc(100% * ${value} / ${getParentColumns(ownerState)} + ${getParentSpacing('column')} * ${value} / ${getParentColumns(ownerState)})`
       };
@@ -168,3 +169,2 @@ }
   const getSelfSpacing = createGetSelfSpacing(ownerState);
-  const getParentSpacing = createGetParentSpacing(ownerState);
   return {
@@ -179,12 +179,3 @@ minWidth: 0,
       }),
-      margin: `calc(${getSelfSpacing('row')} / -2) calc(${getSelfSpacing('column')} / -2)`,
-      ...(ownerState.disableEqualOverflow && {
-        margin: `calc(${getSelfSpacing('row')} * -1) 0px 0px calc(${getSelfSpacing('column')} * -1)`
-      })
-    }),
-    ...((!ownerState.container || isNestedContainer(ownerState)) && {
-      padding: `calc(${getParentSpacing('row')} / 2) calc(${getParentSpacing('column')} / 2)`,
-      ...((ownerState.disableEqualOverflow || ownerState.parentDisableEqualOverflow) && {
-        padding: `${getParentSpacing('row')} 0px 0px ${getParentSpacing('column')}`
-      })
+      gap: `${getSelfSpacing('row')} ${getSelfSpacing('column')}`
     })
@@ -191,0 +182,0 @@ };

modern/useMediaQuery/useMediaQuery.js

@@ -34,3 +34,2 @@ 'use client';
   useEnhancedEffect(() => {
-    let active = true;
     if (!matchMedia) {
@@ -41,15 +40,8 @@ return undefined;
     const updateMatch = () => {
-      // Workaround Safari wrong implementation of matchMedia
-      // TODO can we remove it?
-      // https://github.com/mui/material-ui/pull/17315#issuecomment-528286677
-      if (active) {
-        setMatch(queryList.matches);
-      }
+      setMatch(queryList.matches);
     };
     updateMatch();
-    // TODO: Use `addEventListener` once support for Safari < 14 is dropped
-    queryList.addListener(updateMatch);
+    queryList.addEventListener('change', updateMatch);
     return () => {
-      active = false;
-      queryList.removeListener(updateMatch);
+      queryList.removeEventListener('change', updateMatch);
     };
@@ -82,6 +74,5 @@ }, [query, matchMedia]);
     return [() => mediaQueryList.matches, notify => {
-      // TODO: Use `addEventListener` once support for Safari < 14 is dropped
-      mediaQueryList.addListener(notify);
+      mediaQueryList.addEventListener('change', notify);
       return () => {
-        mediaQueryList.removeListener(notify);
+        mediaQueryList.removeEventListener('change', notify);
       };
@@ -88,0 +79,0 @@ }];

node/cssContainerQueries/cssContainerQueries.js

@@ -40,6 +40,6 @@ "use strict";
 function isCqShorthand(breakpointKeys, value) {
-  return value.startsWith('@') && (breakpointKeys.some(key => value.startsWith(`@${key}`)) || !!value.match(/^@\d/));
+  return value === '@' || value.startsWith('@') && (breakpointKeys.some(key => value.startsWith(`@${key}`)) || !!value.match(/^@\d/));
 }
 function getContainerQuery(theme, shorthand) {
-  const matches = shorthand.match(/^@([^/]+)\/?(.+)?$/);
+  const matches = shorthand.match(/^@([^/]+)?\/?(.+)?$/);
   if (!matches) {
@@ -53,3 +53,3 @@ if (process.env.NODE_ENV !== 'production') {
   const [, containerQuery, containerName] = matches;
-  const value = Number.isNaN(+containerQuery) ? containerQuery : +containerQuery;
+  const value = Number.isNaN(+containerQuery) ? containerQuery || 0 : +containerQuery;
   return theme.containerQueries(containerName).up(value);
@@ -68,3 +68,3 @@ }
         // `@container` does not work with `not all and`, so need to invert the logic
-        return result.replace('not all and ', '').replace('min-width:', 'width<').replace('max-width:', 'width>');
+        return result.replace('not all and ', '').replace('min-width:', 'width<').replace('max-width:', 'width>').replace('and', 'or');
       }
@@ -71,0 +71,0 @@ return result;

node/index.js

 /**
- * @mui/system v6.0.0-alpha.10
+ * @mui/system v6.0.0-alpha.11
  *
@@ -4,0 +4,0 @@ * @license MIT

node/Unstable_Grid/createGrid.js

@@ -45,6 +45,2 @@ "use strict";
   } = options;
-  const GridOverflowContext = /*#__PURE__*/React.createContext(undefined);
-  if (process.env.NODE_ENV !== 'production') {
-    GridOverflowContext.displayName = 'GridOverflowContext';
-  }
   const useUtilityClasses = (ownerState, theme) => {
@@ -65,7 +61,6 @@ const {
   const Grid = /*#__PURE__*/React.forwardRef(function Grid(inProps, ref) {
-    var _inProps$columns, _inProps$spacing, _ref, _inProps$rowSpacing, _ref2, _inProps$columnSpacin, _ref3, _disableEqualOverflow;
+    var _inProps$columns, _inProps$spacing, _ref, _inProps$rowSpacing, _ref2, _inProps$columnSpacin;
     const theme = (0, _useTheme.default)();
     const themeProps = useThemeProps(inProps);
     const props = (0, _styleFunctionSx.extendSxProp)(themeProps); // `color` type conflicts with html color attribute.
-    const overflow = React.useContext(GridOverflowContext);
     const {
@@ -82,11 +77,5 @@ className,
       columnSpacing: columnSpacingProp = spacingProp,
-      disableEqualOverflow: themeDisableEqualOverflow,
       unstable_level: level = 0,
       ...rest
     } = props;
-    // Because `disableEqualOverflow` can be set from the theme's defaultProps, the **nested** grid should look at the instance props instead.
-    let disableEqualOverflow = themeDisableEqualOverflow;
-    if (level && themeDisableEqualOverflow !== undefined) {
-      disableEqualOverflow = inProps.disableEqualOverflow;
-    }
     // collect breakpoints related props because they can be customized from the theme.
@@ -120,9 +109,6 @@ const gridSize = {};
       gridSize,
-      gridOffset,
-      disableEqualOverflow: (_ref3 = (_disableEqualOverflow = disableEqualOverflow) != null ? _disableEqualOverflow : overflow) != null ? _ref3 : false,
-      // use context value if exists.
-      parentDisableEqualOverflow: overflow // for nested grid
+      gridOffset
     };
     const classes = useUtilityClasses(ownerState, theme);
-    let result = /*#__PURE__*/(0, _jsxRuntime.jsx)(GridRoot, {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(GridRoot, {
       ref: ref,
@@ -143,12 +129,2 @@ as: component,
     });
-    if (disableEqualOverflow !== undefined && disableEqualOverflow !== (overflow != null ? overflow : false)) {
-      // There are 2 possibilities that should wrap with the GridOverflowContext 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__*/(0, _jsxRuntime.jsx)(GridOverflowContext.Provider, {
-        value: disableEqualOverflow,
-        children: result
-      });
-    }
-    return result;
   });
@@ -163,3 +139,2 @@ process.env.NODE_ENV !== "production" ? Grid.propTypes /* remove-proptypes */ = {
     direction: _propTypes.default.oneOfType([_propTypes.default.oneOf(['column-reverse', 'column', 'row-reverse', 'row']), _propTypes.default.arrayOf(_propTypes.default.oneOf(['column-reverse', 'column', 'row-reverse', 'row'])), _propTypes.default.object]),
-    disableEqualOverflow: _propTypes.default.bool,
     lg: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.number, _propTypes.default.bool]),
@@ -166,0 +141,0 @@ lgOffset: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.number]),

node/Unstable_Grid/Grid.js

@@ -55,6 +55,2 @@ "use strict";
   /**
-   * If `true`, the negative margin and padding are apply only to the top and left sides of the grid.
-   */
-  disableEqualOverflow: _propTypes.default.bool,
-  /**
    * If a number, it sets the number of columns the grid item uses.
@@ -61,0 +57,0 @@ * It can't be greater than the total number of columns of the container (12 by default).

node/Unstable_Grid/gridGenerator.js

@@ -40,3 +40,3 @@ "use strict";
 }) => {
-  const getSelfSpacing = createGetSelfSpacing(ownerState);
+  const getParentSpacing = createGetParentSpacing(ownerState);
   const styles = {};
@@ -65,3 +65,3 @@ (0, _traverseBreakpoints.traverseBreakpoints)(theme.breakpoints, ownerState.gridSize, (appendStyle, value) => {
         flexBasis: 'auto',
-        width: `calc(100% * ${value} / ${getParentColumns(ownerState)}${isNestedContainer(ownerState) ? ` + ${getSelfSpacing('column')}` : ''})`
+        width: `calc(100% * ${value} / ${getParentColumns(ownerState)} - (${getParentColumns(ownerState)} - ${value}) * (${getParentSpacing('column')} / ${getParentColumns(ownerState)}))`
       };
@@ -78,2 +78,3 @@ }
 }) => {
+  const getParentSpacing = createGetParentSpacing(ownerState);
   const styles = {};
@@ -89,3 +90,3 @@ (0, _traverseBreakpoints.traverseBreakpoints)(theme.breakpoints, ownerState.gridOffset, (appendStyle, value) => {
       style = {
-        marginLeft: value === 0 ? '0px' : `calc(100% * ${value} / ${getParentColumns(ownerState)})`
+        marginLeft: value === 0 ? '0px' : `calc(100% * ${value} / ${getParentColumns(ownerState)} + ${getParentSpacing('column')} * ${value} / ${getParentColumns(ownerState)})`
       };
@@ -182,3 +183,2 @@ }
   const getSelfSpacing = createGetSelfSpacing(ownerState);
-  const getParentSpacing = createGetParentSpacing(ownerState);
   return {
@@ -193,12 +193,3 @@ minWidth: 0,
       }),
-      margin: `calc(${getSelfSpacing('row')} / -2) calc(${getSelfSpacing('column')} / -2)`,
-      ...(ownerState.disableEqualOverflow && {
-        margin: `calc(${getSelfSpacing('row')} * -1) 0px 0px calc(${getSelfSpacing('column')} * -1)`
-      })
-    }),
-    ...((!ownerState.container || isNestedContainer(ownerState)) && {
-      padding: `calc(${getParentSpacing('row')} / 2) calc(${getParentSpacing('column')} / 2)`,
-      ...((ownerState.disableEqualOverflow || ownerState.parentDisableEqualOverflow) && {
-        padding: `${getParentSpacing('row')} 0px 0px ${getParentSpacing('column')}`
-      })
+      gap: `${getSelfSpacing('row')} ${getSelfSpacing('column')}`
     })
@@ -205,0 +196,0 @@ };

node/useMediaQuery/useMediaQuery.js

@@ -41,3 +41,2 @@ "use strict";
   (0, _useEnhancedEffect.default)(() => {
-    let active = true;
     if (!matchMedia) {
@@ -48,15 +47,8 @@ return undefined;
     const updateMatch = () => {
-      // Workaround Safari wrong implementation of matchMedia
-      // TODO can we remove it?
-      // https://github.com/mui/material-ui/pull/17315#issuecomment-528286677
-      if (active) {
-        setMatch(queryList.matches);
-      }
+      setMatch(queryList.matches);
     };
     updateMatch();
-    // TODO: Use `addEventListener` once support for Safari < 14 is dropped
-    queryList.addListener(updateMatch);
+    queryList.addEventListener('change', updateMatch);
     return () => {
-      active = false;
-      queryList.removeListener(updateMatch);
+      queryList.removeEventListener('change', updateMatch);
     };
@@ -89,6 +81,5 @@ }, [query, matchMedia]);
     return [() => mediaQueryList.matches, notify => {
-      // TODO: Use `addEventListener` once support for Safari < 14 is dropped
-      mediaQueryList.addListener(notify);
+      mediaQueryList.addEventListener('change', notify);
       return () => {
-        mediaQueryList.removeListener(notify);
+        mediaQueryList.removeEventListener('change', notify);
       };
@@ -95,0 +86,0 @@ }];

package.json

 {
   "name": "@mui/system",
-  "version": "6.0.0-alpha.10",
+  "version": "6.0.0-alpha.11",
   "private": false,
@@ -29,10 +29,10 @@ "author": "MUI Team",
   "dependencies": {
-    "@babel/runtime": "^7.24.6",
+    "@babel/runtime": "^7.24.7",
     "clsx": "^2.1.1",
     "csstype": "^3.1.3",
     "prop-types": "^15.8.1",
-    "@mui/types": "^7.2.14",
-    "@mui/utils": "^6.0.0-alpha.9",
-    "@mui/styled-engine": "^6.0.0-alpha.9",
-    "@mui/private-theming": "^6.0.0-alpha.9"
+    "@mui/private-theming": "^6.0.0-alpha.11",
+    "@mui/styled-engine": "^6.0.0-alpha.11",
+    "@mui/utils": "^6.0.0-alpha.11",
+    "@mui/types": "^7.2.14"
   },
@@ -39,0 +39,0 @@ "peerDependencies": {

Unstable_Grid/createGrid.js

@@ -36,6 +36,2 @@ import * as React from 'react';
   } = options;
-  const GridOverflowContext = /*#__PURE__*/React.createContext(undefined);
-  if (process.env.NODE_ENV !== 'production') {
-    GridOverflowContext.displayName = 'GridOverflowContext';
-  }
   const useUtilityClasses = (ownerState, theme) => {
@@ -59,3 +55,2 @@ const {
     const props = extendSxProp(themeProps); // `color` type conflicts with html color attribute.
-    const overflow = React.useContext(GridOverflowContext);
     const {
@@ -72,11 +67,5 @@ className,
       columnSpacing: columnSpacingProp = spacingProp,
-      disableEqualOverflow: themeDisableEqualOverflow,
       unstable_level: level = 0,
       ...rest
     } = props;
-    // Because `disableEqualOverflow` can be set from the theme's defaultProps, the **nested** grid should look at the instance props instead.
-    let disableEqualOverflow = themeDisableEqualOverflow;
-    if (level && themeDisableEqualOverflow !== undefined) {
-      disableEqualOverflow = inProps.disableEqualOverflow;
-    }
     // collect breakpoints related props because they can be customized from the theme.
@@ -110,9 +99,6 @@ const gridSize = {};
       gridSize,
-      gridOffset,
-      disableEqualOverflow: disableEqualOverflow ?? overflow ?? false,
-      // use context value if exists.
-      parentDisableEqualOverflow: overflow // for nested grid
+      gridOffset
     };
     const classes = useUtilityClasses(ownerState, theme);
-    let result = /*#__PURE__*/_jsx(GridRoot, {
+    return /*#__PURE__*/_jsx(GridRoot, {
       ref: ref,
@@ -132,12 +118,2 @@ as: component,
     });
-    if (disableEqualOverflow !== undefined && disableEqualOverflow !== (overflow ?? false)) {
-      // There are 2 possibilities that should wrap with the GridOverflowContext 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(GridOverflowContext.Provider, {
-        value: disableEqualOverflow,
-        children: result
-      });
-    }
-    return result;
   });
@@ -152,3 +128,2 @@ process.env.NODE_ENV !== "production" ? Grid.propTypes /* remove-proptypes */ = {
     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]),
@@ -155,0 +130,0 @@ lgOffset: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.number]),

Unstable_Grid/Grid.js

@@ -49,6 +49,2 @@ 'use client';
   /**
-   * 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.
@@ -55,0 +51,0 @@ * It can't be greater than the total number of columns of the container (12 by default).

Unstable_Grid/gridGenerator.d.ts

@@ -10,5 +10,3 @@ import { Breakpoints } from '../createTheme/createBreakpoints';
     };
-    ownerState: GridOwnerState & {
-        parentDisableEqualOverflow?: boolean;
-    };
+    ownerState: GridOwnerState;
 }
@@ -15,0 +13,0 @@ export declare const generateGridSizeStyles: ({ theme, ownerState }: Props) => {};

Unstable_Grid/gridGenerator.js

@@ -34,3 +34,3 @@ import { traverseBreakpoints } from './traverseBreakpoints';
 }) => {
-  const getSelfSpacing = createGetSelfSpacing(ownerState);
+  const getParentSpacing = createGetParentSpacing(ownerState);
   const styles = {};
@@ -59,3 +59,3 @@ traverseBreakpoints(theme.breakpoints, ownerState.gridSize, (appendStyle, value) => {
         flexBasis: 'auto',
-        width: `calc(100% * ${value} / ${getParentColumns(ownerState)}${isNestedContainer(ownerState) ? ` + ${getSelfSpacing('column')}` : ''})`
+        width: `calc(100% * ${value} / ${getParentColumns(ownerState)} - (${getParentColumns(ownerState)} - ${value}) * (${getParentSpacing('column')} / ${getParentColumns(ownerState)}))`
       };
@@ -71,2 +71,3 @@ }
 }) => {
+  const getParentSpacing = createGetParentSpacing(ownerState);
   const styles = {};
@@ -82,3 +83,3 @@ traverseBreakpoints(theme.breakpoints, ownerState.gridOffset, (appendStyle, value) => {
       style = {
-        marginLeft: value === 0 ? '0px' : `calc(100% * ${value} / ${getParentColumns(ownerState)})`
+        marginLeft: value === 0 ? '0px' : `calc(100% * ${value} / ${getParentColumns(ownerState)} + ${getParentSpacing('column')} * ${value} / ${getParentColumns(ownerState)})`
       };
@@ -168,3 +169,2 @@ }
   const getSelfSpacing = createGetSelfSpacing(ownerState);
-  const getParentSpacing = createGetParentSpacing(ownerState);
   return {
@@ -179,12 +179,3 @@ minWidth: 0,
       }),
-      margin: `calc(${getSelfSpacing('row')} / -2) calc(${getSelfSpacing('column')} / -2)`,
-      ...(ownerState.disableEqualOverflow && {
-        margin: `calc(${getSelfSpacing('row')} * -1) 0px 0px calc(${getSelfSpacing('column')} * -1)`
-      })
-    }),
-    ...((!ownerState.container || isNestedContainer(ownerState)) && {
-      padding: `calc(${getParentSpacing('row')} / 2) calc(${getParentSpacing('column')} / 2)`,
-      ...((ownerState.disableEqualOverflow || ownerState.parentDisableEqualOverflow) && {
-        padding: `${getParentSpacing('row')} 0px 0px ${getParentSpacing('column')}`
-      })
+      gap: `${getSelfSpacing('row')} ${getSelfSpacing('column')}`
     })
@@ -191,0 +182,0 @@ };

Unstable_Grid/GridProps.d.ts

@@ -127,6 +127,2 @@ import * as React from 'react';
     /**
-     * If `true`, the negative margin and padding are apply only to the top and left sides of the grid.
-     */
-    disableEqualOverflow?: boolean;
-    /**
      * @internal
@@ -133,0 +129,0 @@ * The level of the grid starts from `0`

useMediaQuery/useMediaQuery.js

@@ -34,3 +34,2 @@ 'use client';
   useEnhancedEffect(() => {
-    let active = true;
     if (!matchMedia) {
@@ -41,15 +40,8 @@ return undefined;
     const updateMatch = () => {
-      // Workaround Safari wrong implementation of matchMedia
-      // TODO can we remove it?
-      // https://github.com/mui/material-ui/pull/17315#issuecomment-528286677
-      if (active) {
-        setMatch(queryList.matches);
-      }
+      setMatch(queryList.matches);
     };
     updateMatch();
-    // TODO: Use `addEventListener` once support for Safari < 14 is dropped
-    queryList.addListener(updateMatch);
+    queryList.addEventListener('change', updateMatch);
     return () => {
-      active = false;
-      queryList.removeListener(updateMatch);
+      queryList.removeEventListener('change', updateMatch);
     };
@@ -82,6 +74,5 @@ }, [query, matchMedia]);
     return [() => mediaQueryList.matches, notify => {
-      // TODO: Use `addEventListener` once support for Safari < 14 is dropped
-      mediaQueryList.addListener(notify);
+      mediaQueryList.addEventListener('change', notify);
       return () => {
-        mediaQueryList.removeListener(notify);
+        mediaQueryList.removeEventListener('change', notify);
       };
@@ -88,0 +79,0 @@ }];

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

Improved metrics

Number of low supply chain risk alerts

138

decreased by-2.13%

Number of medium supply chain risk alerts

0

decreased by-100%

Worsened metrics

Total package byte prevSize

1490540

decreased by-0.16%

Lines of code

17766

decreased by-0.82%

Dependency changes

• Updated@babel/runtime@^7.24.7

• Updated@mui/private-theming@^6.0.0-alpha.11

• Updated@mui/styled-engine@^6.0.0-alpha.11

• Updated@mui/utils@^6.0.0-alpha.11