@mui/system 7.0.0-alpha.2 → 7.0.0-beta.0

package/CHANGELOG.md

@@ -1,5 +1,47 @@
 # [Versions](https://mui.com/versions/)
 
+## 7.0.0-beta.0
+
+<!-- generated comparing v7.0.0-alpha.2..master -->
+
+_Feb 26, 2025_
+
+A big thanks to the 8 contributors who made this release possible.
+
+### `@mui/material@7.0.0-beta.0`
+
+- [Modal][Dialog] Remove deprecated `onBackdropClick` (#45395) @DiegoAndai
+- [Grid] Improve Grid2 upgrade experience (#45304) @DiegoAndai
+- [Grid] Rename to GridLegacy (#45363) @DiegoAndai
+- [Grid2] Rename to Grid (#45381) @DiegoAndai
+- Remove SvgIcon data-testid in production (#45333) @Janpot
+- Allow nested theme creation with `vars` (#45335) @siriwatknp
+- [Rating] Deprecate \*Props and complete `slots`, `slotProps` (#45295) @harry-whorlow
+- [Slider] Fix css class selector in migration guide (#45402) @sai6855
+- [Slider] Fix spacings in .md files (#45388) @sai6855
+- [styles] Remove deprecated exports (#45397) @DiegoAndai
+- [Menu] Deprecate \*Props and complete `slots`, `slotProps` (#44913) @siriwatknp
+- [StepButton] Remove StepIconButton type (#45396) @DiegoAndai
+
+### Docs
+
+- [Autocomplete] Remove unnecessary renderTags prop from Sizes demo (#45401) @ZeeshanTamboli
+- Add `overriding-component-structure` doc to Material UI (#45186) @siriwatknp
+- Fix typo in slider docs (#45390) @sai6855
+- Fix Context Menu selection lost on Safari (#44903) @NooBat
+
+### Core
+
+- [code-infra] Fix types for @mui/styled-engine (#45413) @Janpot
+- [docs-infra] Fix theme toggle call (#45400) @siriwatknp
+- [docs-infra] Add `color-scheme` to document in iframe demos (#45406) @KenanYusuf
+- [docs-infra] Revert to use deprecated `CssVarsProvider` for MUI X (#45371) @siriwatknp
+- [docs-infra] Fix dark mode flicker for API pages (#45354) @siriwatknp
+- [examples] Remove unnecessary comma in Material UI Vite JS example (#45370) @ZeeshanTamboli
+- [test] Remove unused renderTags prop and fix key warning in Autocomplete regression test (#45410) @ZeeshanTamboli
+
+All contributors of this release in alphabetical order: @DiegoAndai, @harry-whorlow, @Janpot, @KenanYusuf, @NooBat, @sai6855, @siriwatknp, @ZeeshanTamboli
+
 ## 7.0.0-alpha.2
 
 <!-- generated comparing v7.0.0-alpha.1..master -->

package/Grid/createGrid.js

@@ -19,6 +19,7 @@ var _useTheme = _interopRequireDefault(require("../useTheme"));
 var _styleFunctionSx = require("../styleFunctionSx");
 var _createTheme = _interopRequireDefault(require("../createTheme"));
 var _gridGenerator = require("./gridGenerator");
+var _deleteLegacyGridProps = _interopRequireDefault(require("./deleteLegacyGridProps"));
 var _jsxRuntime = require("react/jsx-runtime");
 const defaultTheme = (0, _createTheme.default)();
 
@@ -84,6 +85,9 @@ function createGrid(options = {}) {
     const theme = useTheme();
     const themeProps = useThemeProps(inProps);
     const props = (0, _styleFunctionSx.extendSxProp)(themeProps); // `color` type conflicts with html color attribute.
+
+    // TODO v8: Remove when removing the legacy Grid component
+    (0, _deleteLegacyGridProps.default)(props, theme.breakpoints);
     const {
       className,
       children,

package/Grid/deleteLegacyGridProps.js

@@ -0,0 +1,47 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = deleteLegacyGridProps;
+const getLegacyGridWarning = propName => {
+  if (['item', 'zeroMinWidth'].includes(propName)) {
+    return `The \`${propName}\` prop has been removed and is no longer necessary. You can safely remove it.`;
+  }
+
+  // #host-reference
+  return `The \`${propName}\` prop has been removed. See https://mui.com/material-ui/migration/upgrade-to-grid-v2/ for migration instructions.`;
+};
+const warnedAboutProps = [];
+
+/**
+ * Deletes the legacy Grid component props from the `props` object and warns once about them if found.
+ *
+ * @param {object} props The props object to remove the legacy Grid props from.
+ * @param {Breakpoints} breakpoints The breakpoints object.
+ */
+function deleteLegacyGridProps(props, breakpoints) {
+  const propsToWarn = [];
+  if (props.item !== undefined) {
+    delete props.item;
+    propsToWarn.push('item');
+  }
+  if (props.zeroMinWidth !== undefined) {
+    delete props.zeroMinWidth;
+    propsToWarn.push('zeroMinWidth');
+  }
+  breakpoints.keys.forEach(breakpoint => {
+    if (props[breakpoint] !== undefined) {
+      propsToWarn.push(breakpoint);
+      delete props[breakpoint];
+    }
+  });
+  if (process.env.NODE_ENV !== 'production') {
+    propsToWarn.forEach(prop => {
+      if (!warnedAboutProps.includes(prop)) {
+        warnedAboutProps.push(prop);
+        console.warn(`MUI Grid: ${getLegacyGridWarning(prop)}\n`);
+      }
+    });
+  }
+}

package/esm/Grid/createGrid.js

@@ -12,6 +12,7 @@ import useThemeSystem from "../useTheme/index.js";
 import { extendSxProp } from "../styleFunctionSx/index.js";
 import createTheme from "../createTheme/index.js";
 import { generateGridStyles, generateGridSizeStyles, generateGridColumnsStyles, generateGridColumnSpacingStyles, generateGridRowSpacingStyles, generateGridDirectionStyles, generateGridOffsetStyles, generateSizeClassNames, generateSpacingClassNames, generateDirectionClasses } from "./gridGenerator.js";
+import deleteLegacyGridProps from "./deleteLegacyGridProps.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const defaultTheme = createTheme();
 
@@ -77,6 +78,9 @@ export default function createGrid(options = {}) {
     const theme = useTheme();
     const themeProps = useThemeProps(inProps);
     const props = extendSxProp(themeProps); // `color` type conflicts with html color attribute.
+
+    // TODO v8: Remove when removing the legacy Grid component
+    deleteLegacyGridProps(props, theme.breakpoints);
     const {
       className,
       children,

package/esm/Grid/deleteLegacyGridProps.d.ts

@@ -0,0 +1,11 @@
+import { Breakpoint, Breakpoints } from "../createTheme/index.js";
+/**
+ * Deletes the legacy Grid component props from the `props` object and warns once about them if found.
+ *
+ * @param {object} props The props object to remove the legacy Grid props from.
+ * @param {Breakpoints} breakpoints The breakpoints object.
+ */
+export default function deleteLegacyGridProps(props: {
+  item?: boolean;
+  zeroMinWidth?: boolean;
+} & Partial<Record<Breakpoint, 'auto' | number | boolean>> & Record<string, any>, breakpoints: Breakpoints): void;

package/esm/Grid/deleteLegacyGridProps.js

@@ -0,0 +1,41 @@
+const getLegacyGridWarning = propName => {
+  if (['item', 'zeroMinWidth'].includes(propName)) {
+    return `The \`${propName}\` prop has been removed and is no longer necessary. You can safely remove it.`;
+  }
+
+  // #host-reference
+  return `The \`${propName}\` prop has been removed. See https://mui.com/material-ui/migration/upgrade-to-grid-v2/ for migration instructions.`;
+};
+const warnedAboutProps = [];
+
+/**
+ * Deletes the legacy Grid component props from the `props` object and warns once about them if found.
+ *
+ * @param {object} props The props object to remove the legacy Grid props from.
+ * @param {Breakpoints} breakpoints The breakpoints object.
+ */
+export default function deleteLegacyGridProps(props, breakpoints) {
+  const propsToWarn = [];
+  if (props.item !== undefined) {
+    delete props.item;
+    propsToWarn.push('item');
+  }
+  if (props.zeroMinWidth !== undefined) {
+    delete props.zeroMinWidth;
+    propsToWarn.push('zeroMinWidth');
+  }
+  breakpoints.keys.forEach(breakpoint => {
+    if (props[breakpoint] !== undefined) {
+      propsToWarn.push(breakpoint);
+      delete props[breakpoint];
+    }
+  });
+  if (process.env.NODE_ENV !== 'production') {
+    propsToWarn.forEach(prop => {
+      if (!warnedAboutProps.includes(prop)) {
+        warnedAboutProps.push(prop);
+        console.warn(`MUI Grid: ${getLegacyGridWarning(prop)}\n`);
+      }
+    });
+  }
+}

package/esm/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/system v7.0.0-alpha.2
+ * @mui/system v7.0.0-beta.0
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/esm/version/index.js

@@ -1,6 +1,6 @@
-export const version = "7.0.0-alpha.2";
+export const version = "7.0.0-beta.0";
 export const major = Number("7");
 export const minor = Number("0");
 export const patch = Number("0");
-export const prerelease = "alpha.2";
+export const prerelease = "beta.0";
 export default version;

package/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/system v7.0.0-alpha.2
+ * @mui/system v7.0.0-beta.0
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/modern/Grid/createGrid.js

@@ -12,6 +12,7 @@ import useThemeSystem from "../useTheme/index.js";
 import { extendSxProp } from "../styleFunctionSx/index.js";
 import createTheme from "../createTheme/index.js";
 import { generateGridStyles, generateGridSizeStyles, generateGridColumnsStyles, generateGridColumnSpacingStyles, generateGridRowSpacingStyles, generateGridDirectionStyles, generateGridOffsetStyles, generateSizeClassNames, generateSpacingClassNames, generateDirectionClasses } from "./gridGenerator.js";
+import deleteLegacyGridProps from "./deleteLegacyGridProps.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const defaultTheme = createTheme();
 
@@ -77,6 +78,9 @@ export default function createGrid(options = {}) {
     const theme = useTheme();
     const themeProps = useThemeProps(inProps);
     const props = extendSxProp(themeProps); // `color` type conflicts with html color attribute.
+
+    // TODO v8: Remove when removing the legacy Grid component
+    deleteLegacyGridProps(props, theme.breakpoints);
     const {
       className,
       children,

package/modern/Grid/deleteLegacyGridProps.js

@@ -0,0 +1,41 @@
+const getLegacyGridWarning = propName => {
+  if (['item', 'zeroMinWidth'].includes(propName)) {
+    return `The \`${propName}\` prop has been removed and is no longer necessary. You can safely remove it.`;
+  }
+
+  // #host-reference
+  return `The \`${propName}\` prop has been removed. See https://mui.com/material-ui/migration/upgrade-to-grid-v2/ for migration instructions.`;
+};
+const warnedAboutProps = [];
+
+/**
+ * Deletes the legacy Grid component props from the `props` object and warns once about them if found.
+ *
+ * @param {object} props The props object to remove the legacy Grid props from.
+ * @param {Breakpoints} breakpoints The breakpoints object.
+ */
+export default function deleteLegacyGridProps(props, breakpoints) {
+  const propsToWarn = [];
+  if (props.item !== undefined) {
+    delete props.item;
+    propsToWarn.push('item');
+  }
+  if (props.zeroMinWidth !== undefined) {
+    delete props.zeroMinWidth;
+    propsToWarn.push('zeroMinWidth');
+  }
+  breakpoints.keys.forEach(breakpoint => {
+    if (props[breakpoint] !== undefined) {
+      propsToWarn.push(breakpoint);
+      delete props[breakpoint];
+    }
+  });
+  if (process.env.NODE_ENV !== 'production') {
+    propsToWarn.forEach(prop => {
+      if (!warnedAboutProps.includes(prop)) {
+        warnedAboutProps.push(prop);
+        console.warn(`MUI Grid: ${getLegacyGridWarning(prop)}\n`);
+      }
+    });
+  }
+}

package/modern/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/system v7.0.0-alpha.2
+ * @mui/system v7.0.0-beta.0
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/modern/version/index.js

@@ -1,6 +1,6 @@
-export const version = "7.0.0-alpha.2";
+export const version = "7.0.0-beta.0";
 export const major = Number("7");
 export const minor = Number("0");
 export const patch = Number("0");
-export const prerelease = "alpha.2";
+export const prerelease = "beta.0";
 export default version;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/system",
-  "version": "7.0.0-alpha.2",
+  "version": "7.0.0-beta.0",
   "private": false,
   "author": "MUI Team",
   "description": "MUI System is a set of CSS utilities to help you build custom designs more efficiently. It makes it possible to rapidly lay out custom designs.",
@@ -30,10 +30,10 @@
     "clsx": "^2.1.1",
     "csstype": "^3.1.3",
     "prop-types": "^15.8.1",
-    "@mui/styled-engine": "7.0.0-alpha.2",
     "@mui/private-theming": "7.0.0-alpha.2",
-    "@mui/utils": "7.0.0-alpha.2",
-    "@mui/types": "^7.2.22"
+    "@mui/styled-engine": "7.0.0-alpha.2",
+    "@mui/types": "^7.2.22",
+    "@mui/utils": "7.0.0-alpha.2"
   },
   "peerDependencies": {
     "@emotion/react": "^11.5.0",
@@ -92,6 +92,5 @@
     },
     "./esm": null,
     "./modern": null
-  },
-  "types": "./index.d.ts"
+  }
 }