@mui/system 6.4.3 → 6.4.6

package/CHANGELOG.md

@@ -1,5 +1,98 @@
 # [Versions](https://mui.com/versions/)
 
+## 6.4.6
+
+<!-- generated comparing v6.4.5..v6.x -->
+
+_Feb 26, 2025_
+
+A big thanks to the 4 contributors who made this release possible.
+
+### `@mui/material@6.4.6`
+
+- [Checkbox] Add slots and slotProps (#45361) @siriwatknp
+- [Drawer] Deprecate *Props and complete `slots`, `slotProps` (#45377) @siriwatknp
+- [Grid] Improve Grid2 upgrade experience (#45372) @DiegoAndai
+- [InputBase] Deprecate composed classes (#45366) @siriwatknp
+- Fix `slotProps.transition` types (#45367) @siriwatknp
+- Allow nested theme creation with `vars` (#45368) @siriwatknp
+- Fix wrong slotProps of DetailsHTMLAttributes types (#45356) @siriwatknp
+- [Popover] Deprecate *Props and complete `slots`, `slotProps` (#45337) @siriwatknp
+- [Radio] Add slots and slotProps (#45364) @siriwatknp
+- [Slider] Fix css class selector in migration guide (#45409) @sai6855
+- [Slider] Fix spacings in .md files (#45393) @sai6855
+- [Snackbar] Add Slots and SlotProps (#45103) (#45352) @siriwatknp
+- [SpeedDialAction] Add slots and slotProps (#45365) @siriwatknp
+- [SwitchBase] Deprecate `inputProps` and complete slots, slotProps (#45338) @siriwatknp
+- [Tabs] Deprecate *Props and complete slots, slotProps (#45012) (#45355) @siriwatknp
+- [Menu] Deprecate *Props and complete `slots`, `slotProps`  (#45369) @siriwatknp
+
+### Docs
+
+- [Autocomplete] Remove unnecessary renderTags prop from Sizes demo (#45403) @ZeeshanTamboli
+- Fix typo in slider docs (#45392) @sai6855
+
+### Core
+
+- [test] Remove unused renderTags prop and fix key warning in Autocomplete regression test (#45412) @ZeeshanTamboli
+
+All contributors of this release in alphabetical order: @DiegoAndai, @sai6855, @siriwatknp, @ZeeshanTamboli
+
+## 6.4.5
+
+<!-- generated comparing v6.4.4..v6.x -->
+
+_Feb 18, 2025_
+
+A big thanks to the 5 contributors who made this release possible.
+
+### `@mui/material@6.4.5`
+
+- [Autocomplete] Remove legacy `aria-owns` attribute for combobox (#45303) @ZeeshanTamboli
+- [Button] Apply id only if loading indicator is present (#45339) @aarongarciah
+
+### Docs
+
+- [icons] Fix typo in material-icons.md (#45336) @a-s-russo
+- [Menu] Add Grouped Menu demo (#45292) @noobDev31
+
+### Core
+
+- [blog] Consistent Base UI terminology (#45342) @aarongarciah
+- Fix double redirection to Base UI (#45146) @oliviertassinari
+
+All contributors of this release in alphabetical order: @a-s-russo, @aarongarciah, @noobDev31, @oliviertassinari, @ZeeshanTamboli
+
+## 6.4.4
+
+<!-- generated comparing v6.4.3..v6.x -->
+
+_Feb 11, 2025_
+
+A big thanks to the 3 contributors who made this release possible.
+
+### `@mui/material@6.4.4`
+
+- [MobileStepper] deprecate `LinearProgressProps` and complete `slots`, `slotProps` (@siriwatknp) (#45242) @siriwatknp
+- [Slider] Deprecate composed classes (@sai6855) (#45223) @sai6855
+- [utils] Merge `sx` instead of override when using `mergeSlotProps` (#45129) @siriwatknp
+
+### Docs
+
+- [Autocomplete] Improve Google Maps search example (#44708) @oliviertassinari
+- [Dialog] Removes deprecated PaperProps from docs (#45217) @sai6855
+- A quick first step to update docs for Tailwind v4 (#45221) @oliviertassinari
+
+### Core
+
+- Fix missing store contributor renaming (527222d) @oliviertassinari
+- Fix MUI Base vale rule (#45140) @oliviertassinari
+- Fix 404 errors (#45137) @oliviertassinari
+- [docs] Sync active sponsors (#45204) @oliviertassinari
+- [docs-infra] Move Ukraine banner to the bottom (#45135) @oliviertassinari
+
+All contributors of this release in alphabetical order: @oliviertassinari, @sai6855, @siriwatknp
+
 ## 6.4.3
 
 <!-- generated comparing v6.4.2..v6.x -->

package/Grid/createGrid.js

@@ -18,6 +18,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)();
 
@@ -83,6 +84,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.d.ts

@@ -0,0 +1,11 @@
+import { Breakpoint, Breakpoints } from '../createTheme';
+/**
+ * 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/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 Grid2: ${getLegacyGridWarning(prop)}\n`);
+      }
+    });
+  }
+}

package/esm/Grid/createGrid.js

@@ -10,6 +10,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();
 
@@ -75,6 +76,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.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 Grid2: ${getLegacyGridWarning(prop)}\n`);
+      }
+    });
+  }
+}

package/esm/version/index.js

@@ -1,6 +1,6 @@
-export const version = "6.4.3";
+export const version = "6.4.6";
 export const major = Number("6");
 export const minor = Number("4");
-export const patch = Number("3");
+export const patch = Number("6");
 export const prerelease = undefined;
 export default version;

package/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/system v6.4.3
+ * @mui/system v6.4.6
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/modern/Grid/createGrid.js

@@ -10,6 +10,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();
 
@@ -75,6 +76,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 Grid2: ${getLegacyGridWarning(prop)}\n`);
+      }
+    });
+  }
+}

package/modern/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/system v6.4.3
+ * @mui/system v6.4.6
  *
  * @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 = "6.4.3";
+export const version = "6.4.6";
 export const major = Number("6");
 export const minor = Number("4");
-export const patch = Number("3");
+export const patch = Number("6");
 export const prerelease = undefined;
 export default version;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/system",
-  "version": "6.4.3",
+  "version": "6.4.6",
   "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": "^6.4.3",
-    "@mui/private-theming": "^6.4.3",
-    "@mui/utils": "^6.4.3",
-    "@mui/types": "^7.2.21"
+    "@mui/private-theming": "^6.4.6",
+    "@mui/styled-engine": "^6.4.6",
+    "@mui/types": "^7.2.21",
+    "@mui/utils": "^6.4.6"
   },
   "peerDependencies": {
     "@emotion/react": "^11.5.0",

package/version/index.js

@@ -4,9 +4,9 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.version = exports.prerelease = exports.patch = exports.minor = exports.major = exports.default = void 0;
-const version = exports.version = "6.4.3";
+const version = exports.version = "6.4.6";
 const major = exports.major = Number("6");
 const minor = exports.minor = Number("4");
-const patch = exports.patch = Number("3");
+const patch = exports.patch = Number("6");
 const prerelease = exports.prerelease = undefined;
 var _default = exports.default = version;