@mui/material 6.4.4 → 6.4.5

package/Button/Button.js

@@ -501,9 +501,9 @@ const Button = /*#__PURE__*/React.forwardRef(function Button(inProps, ref) {
     variant = 'text',
     ...other
   } = props;
-  const id = useId(idProp);
+  const loadingId = useId(idProp);
   const loadingIndicator = loadingIndicatorProp ?? /*#__PURE__*/_jsx(CircularProgress, {
-    "aria-labelledby": id,
+    "aria-labelledby": loadingId,
     color: "inherit",
     size: 16
   });
@@ -563,7 +563,7 @@ const Button = /*#__PURE__*/React.forwardRef(function Button(inProps, ref) {
     focusVisibleClassName: clsx(classes.focusVisible, focusVisibleClassName),
     ref: ref,
     type: type,
-    id: id,
+    id: loading ? loadingId : idProp,
     ...other,
     classes: classes,
     children: [startIcon, loadingPosition !== 'end' && loader, children, loadingPosition === 'end' && loader, endIcon]

package/CHANGELOG.md

@@ -1,5 +1,30 @@
 # [Versions](https://mui.com/versions/)
 
+## 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 -->

package/IconButton/IconButton.js

@@ -193,9 +193,9 @@ const IconButton = /*#__PURE__*/React.forwardRef(function IconButton(inProps, re
     loadingIndicator: loadingIndicatorProp,
     ...other
   } = props;
-  const id = useId(idProp);
+  const loadingId = useId(idProp);
   const loadingIndicator = loadingIndicatorProp ?? /*#__PURE__*/_jsx(CircularProgress, {
-    "aria-labelledby": id,
+    "aria-labelledby": loadingId,
     color: "inherit",
     size: 16
   });
@@ -211,7 +211,7 @@ const IconButton = /*#__PURE__*/React.forwardRef(function IconButton(inProps, re
   };
   const classes = useUtilityClasses(ownerState);
   return /*#__PURE__*/_jsxs(IconButtonRoot, {
-    id: id,
+    id: loading ? loadingId : idProp,
     className: clsx(classes.root, className),
     centerRipple: true,
     focusRipple: !disableFocusRipple,

package/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/material v6.4.4
+ * @mui/material v6.4.5
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/modern/Button/Button.js

@@ -501,9 +501,9 @@ const Button = /*#__PURE__*/React.forwardRef(function Button(inProps, ref) {
     variant = 'text',
     ...other
   } = props;
-  const id = useId(idProp);
+  const loadingId = useId(idProp);
   const loadingIndicator = loadingIndicatorProp ?? /*#__PURE__*/_jsx(CircularProgress, {
-    "aria-labelledby": id,
+    "aria-labelledby": loadingId,
     color: "inherit",
     size: 16
   });
@@ -563,7 +563,7 @@ const Button = /*#__PURE__*/React.forwardRef(function Button(inProps, ref) {
     focusVisibleClassName: clsx(classes.focusVisible, focusVisibleClassName),
     ref: ref,
     type: type,
-    id: id,
+    id: loading ? loadingId : idProp,
     ...other,
     classes: classes,
     children: [startIcon, loadingPosition !== 'end' && loader, children, loadingPosition === 'end' && loader, endIcon]

package/modern/IconButton/IconButton.js

@@ -193,9 +193,9 @@ const IconButton = /*#__PURE__*/React.forwardRef(function IconButton(inProps, re
     loadingIndicator: loadingIndicatorProp,
     ...other
   } = props;
-  const id = useId(idProp);
+  const loadingId = useId(idProp);
   const loadingIndicator = loadingIndicatorProp ?? /*#__PURE__*/_jsx(CircularProgress, {
-    "aria-labelledby": id,
+    "aria-labelledby": loadingId,
     color: "inherit",
     size: 16
   });
@@ -211,7 +211,7 @@ const IconButton = /*#__PURE__*/React.forwardRef(function IconButton(inProps, re
   };
   const classes = useUtilityClasses(ownerState);
   return /*#__PURE__*/_jsxs(IconButtonRoot, {
-    id: id,
+    id: loading ? loadingId : idProp,
     className: clsx(classes.root, className),
     centerRipple: true,
     focusRipple: !disableFocusRipple,

package/modern/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/material v6.4.4
+ * @mui/material v6.4.5
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/modern/useAutocomplete/useAutocomplete.js

@@ -877,7 +877,6 @@ function useAutocomplete(props) {
   }
   return {
     getRootProps: (other = {}) => ({
-      'aria-owns': listboxAvailable ? `${id}-listbox` : null,
       ...other,
       onKeyDown: handleKeyDown(other),
       onMouseDown: handleMouseDown,

package/modern/version/index.js

@@ -1,6 +1,6 @@
-export const version = "6.4.4";
+export const version = "6.4.5";
 export const major = Number("6");
 export const minor = Number("4");
-export const patch = Number("4");
+export const patch = Number("5");
 export const prerelease = undefined;
 export default version;

package/node/Button/Button.js

@@ -508,9 +508,9 @@ const Button = /*#__PURE__*/React.forwardRef(function Button(inProps, ref) {
     variant = 'text',
     ...other
   } = props;
-  const id = (0, _utils.unstable_useId)(idProp);
+  const loadingId = (0, _utils.unstable_useId)(idProp);
   const loadingIndicator = loadingIndicatorProp ?? /*#__PURE__*/(0, _jsxRuntime.jsx)(_CircularProgress.default, {
-    "aria-labelledby": id,
+    "aria-labelledby": loadingId,
     color: "inherit",
     size: 16
   });
@@ -570,7 +570,7 @@ const Button = /*#__PURE__*/React.forwardRef(function Button(inProps, ref) {
     focusVisibleClassName: (0, _clsx.default)(classes.focusVisible, focusVisibleClassName),
     ref: ref,
     type: type,
-    id: id,
+    id: loading ? loadingId : idProp,
     ...other,
     classes: classes,
     children: [startIcon, loadingPosition !== 'end' && loader, children, loadingPosition === 'end' && loader, endIcon]

package/node/IconButton/IconButton.js

@@ -200,9 +200,9 @@ const IconButton = /*#__PURE__*/React.forwardRef(function IconButton(inProps, re
     loadingIndicator: loadingIndicatorProp,
     ...other
   } = props;
-  const id = (0, _utils.unstable_useId)(idProp);
+  const loadingId = (0, _utils.unstable_useId)(idProp);
   const loadingIndicator = loadingIndicatorProp ?? /*#__PURE__*/(0, _jsxRuntime.jsx)(_CircularProgress.default, {
-    "aria-labelledby": id,
+    "aria-labelledby": loadingId,
     color: "inherit",
     size: 16
   });
@@ -218,7 +218,7 @@ const IconButton = /*#__PURE__*/React.forwardRef(function IconButton(inProps, re
   };
   const classes = useUtilityClasses(ownerState);
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(IconButtonRoot, {
-    id: id,
+    id: loading ? loadingId : idProp,
     className: (0, _clsx.default)(classes.root, className),
     centerRipple: true,
     focusRipple: !disableFocusRipple,

package/node/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/material v6.4.4
+ * @mui/material v6.4.5
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/node/useAutocomplete/useAutocomplete.js

@@ -883,7 +883,6 @@ function useAutocomplete(props) {
   }
   return {
     getRootProps: (other = {}) => ({
-      'aria-owns': listboxAvailable ? `${id}-listbox` : null,
       ...other,
       onKeyDown: handleKeyDown(other),
       onMouseDown: handleMouseDown,

package/node/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.4";
+const version = exports.version = "6.4.5";
 const major = exports.major = Number("6");
 const minor = exports.minor = Number("4");
-const patch = exports.patch = Number("4");
+const patch = exports.patch = Number("5");
 const prerelease = exports.prerelease = undefined;
 var _default = exports.default = version;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/material",
-  "version": "6.4.4",
+  "version": "6.4.5",
   "private": false,
   "author": "MUI Team",
   "description": "Material UI is an open-source React component library that implements Google's Material Design. It's comprehensive and can be used in production out of the box.",
@@ -35,10 +35,10 @@
     "prop-types": "^15.8.1",
     "react-is": "^19.0.0",
     "react-transition-group": "^4.4.5",
-    "@mui/core-downloads-tracker": "^6.4.4",
+    "@mui/core-downloads-tracker": "^6.4.5",
     "@mui/system": "^6.4.3",
-    "@mui/utils": "^6.4.3",
-    "@mui/types": "^7.2.21"
+    "@mui/types": "^7.2.21",
+    "@mui/utils": "^6.4.3"
   },
   "peerDependencies": {
     "@emotion/react": "^11.5.0",

package/useAutocomplete/useAutocomplete.js

@@ -877,7 +877,6 @@ function useAutocomplete(props) {
   }
   return {
     getRootProps: (other = {}) => ({
-      'aria-owns': listboxAvailable ? `${id}-listbox` : null,
       ...other,
       onKeyDown: handleKeyDown(other),
       onMouseDown: handleMouseDown,

package/version/index.js

@@ -1,6 +1,6 @@
-export const version = "6.4.4";
+export const version = "6.4.5";
 export const major = Number("6");
 export const minor = Number("4");
-export const patch = Number("4");
+export const patch = Number("5");
 export const prerelease = undefined;
 export default version;