@mui/material 6.4.9 → 6.4.11

package/AvatarGroup/AvatarGroup.js

@@ -93,7 +93,14 @@ const AvatarGroup = /*#__PURE__*/React.forwardRef(function AvatarGroup(inProps,
   const maxAvatars = Math.min(children.length, clampedMax - 1);
   const extraAvatars = Math.max(totalAvatars - clampedMax, totalAvatars - maxAvatars, 0);
   const extraAvatarsElement = renderSurplus ? renderSurplus(extraAvatars) : `+${extraAvatars}`;
-  const marginValue = ownerState.spacing && SPACINGS[ownerState.spacing] !== undefined ? SPACINGS[ownerState.spacing] : -ownerState.spacing || -8;
+  let marginValue;
+  if (ownerState.spacing && SPACINGS[ownerState.spacing] !== undefined) {
+    marginValue = SPACINGS[ownerState.spacing];
+  } else if (ownerState.spacing === 0) {
+    marginValue = 0;
+  } else {
+    marginValue = -ownerState.spacing || SPACINGS.medium;
+  }
   const externalForwardedProps = {
     slots,
     slotProps: {
@@ -118,7 +125,8 @@ const AvatarGroup = /*#__PURE__*/React.forwardRef(function AvatarGroup(inProps,
     ref: ref,
     ...other,
     style: {
-      '--AvatarGroup-spacing': marginValue ? `${marginValue}px` : undefined,
+      '--AvatarGroup-spacing': `${marginValue}px`,
+      // marginValue is always defined
       ...other.style
     },
     children: [extraAvatars ? /*#__PURE__*/_jsx(SurplusSlot, {

package/CHANGELOG.md

@@ -1,5 +1,51 @@
 # [Versions](https://mui.com/versions/)
 
+## 6.4.11
+
+_Apr 9, 2025_
+
+A big thanks to the 3 contributors who made this release possible.
+
+### `@mui/material@6.4.11`
+
+- [AvatarGroup] Fix `spacing` prop ignoring value `0` (#45845) @Kartik-Murthy
+- [Dialog] Deprecate composed classes (#45814) @sai6855
+
+### `@mui/styled-engine@6.4.11`
+
+- Add caching to improve performance for running tests with Jest (#45855) @siriwatknp
+
+### Docs
+
+- Add missing v7 docs banner (#45842) @DiegoAndai
+- Add v7 is here banner (#45838) @DiegoAndai
+- Fix lab version install instructions (#45770) @DiegoAndai
+
+All contributors of this release in alphabetical order: @DiegoAndai, @Kartik-Murthy, @sai6855
+
+## 6.4.10
+
+<!-- generated comparing v6.4.9..v6.x -->
+
+_Mar 31, 2025_
+
+A big thanks to the 4 contributors who made this release possible.
+
+### `@mui/material@6.4.10`
+
+- [Autocomplete] Prevent shrink animation in controlled Autocomplete when initial `value` is provided (#45735) @imadx
+- [Popover] Allow `null` in `anchorEl` function return type (#45723) @eduter
+
+### Docs
+
+- Fix new React project link, CRA deprecated (#45669) @oliviertassinari
+
+### Core
+
+- [utils] Support cleanup callbacks in useForkRef (#45733) @DiegoAndai
+
+All contributors of this release in alphabetical order: @DiegoAndai, @eduter, @imadx, @oliviertassinari
+
 ## 6.4.9
 
 <!-- generated comparing v6.4.8..v6.x -->

package/Dialog/dialogClasses.d.ts

@@ -9,9 +9,13 @@ export interface DialogClasses {
     container: string;
     /** Styles applied to the Paper component. */
     paper: string;
-    /** Styles applied to the Paper component if `scroll="paper"`. */
+    /** Styles applied to the Paper component if `scroll="paper"`.
+     * @deprecated Combine the [.MuiDialog-paper](/material-ui/api/dialog/#dialog-classes-paper) and [.MuiDialog-scrollPaper](/material-ui/api/dialog/#dialog-classes-scrollPaper) classes instead. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
+     */
     paperScrollPaper: string;
-    /** Styles applied to the Paper component if `scroll="body"`. */
+    /** Styles applied to the Paper component if `scroll="body"`.
+     * @deprecated Combine the [.MuiDialog-paper](/material-ui/api/dialog/#dialog-classes-paper) and [.MuiDialog-scrollBody](/material-ui/api/dialog/#dialog-classes-scrollBody) classes instead. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
+     */
     paperScrollBody: string;
     /** Styles applied to the Paper component if `maxWidth=false`. */
     paperWidthFalse: string;

package/Popover/Popover.d.ts

@@ -108,9 +108,8 @@ export interface PopoverProps
   anchorEl?:
     | null
     | Element
-    | (() => Element)
     | PopoverVirtualElement
-    | (() => PopoverVirtualElement);
+    | (() => Element | PopoverVirtualElement | null);
   /**
    * This is the point on the anchor where the popover's
    * `anchorEl` will attach to. This is not used when the

package/Popover/Popover.js

@@ -276,7 +276,7 @@ const Popover = /*#__PURE__*/React.forwardRef(function Popover(inProps, ref) {
     const handleResize = debounce(() => {
       setPositioningStyles();
     });
-    const containerWindow = ownerWindow(anchorEl);
+    const containerWindow = ownerWindow(resolveAnchorEl(anchorEl));
     containerWindow.addEventListener('resize', handleResize);
     return () => {
       handleResize.clear();

package/index.js

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

package/modern/AvatarGroup/AvatarGroup.js

@@ -93,7 +93,14 @@ const AvatarGroup = /*#__PURE__*/React.forwardRef(function AvatarGroup(inProps,
   const maxAvatars = Math.min(children.length, clampedMax - 1);
   const extraAvatars = Math.max(totalAvatars - clampedMax, totalAvatars - maxAvatars, 0);
   const extraAvatarsElement = renderSurplus ? renderSurplus(extraAvatars) : `+${extraAvatars}`;
-  const marginValue = ownerState.spacing && SPACINGS[ownerState.spacing] !== undefined ? SPACINGS[ownerState.spacing] : -ownerState.spacing || -8;
+  let marginValue;
+  if (ownerState.spacing && SPACINGS[ownerState.spacing] !== undefined) {
+    marginValue = SPACINGS[ownerState.spacing];
+  } else if (ownerState.spacing === 0) {
+    marginValue = 0;
+  } else {
+    marginValue = -ownerState.spacing || SPACINGS.medium;
+  }
   const externalForwardedProps = {
     slots,
     slotProps: {
@@ -118,7 +125,8 @@ const AvatarGroup = /*#__PURE__*/React.forwardRef(function AvatarGroup(inProps,
     ref: ref,
     ...other,
     style: {
-      '--AvatarGroup-spacing': marginValue ? `${marginValue}px` : undefined,
+      '--AvatarGroup-spacing': `${marginValue}px`,
+      // marginValue is always defined
       ...other.style
     },
     children: [extraAvatars ? /*#__PURE__*/_jsx(SurplusSlot, {

package/modern/Popover/Popover.js

@@ -276,7 +276,7 @@ const Popover = /*#__PURE__*/React.forwardRef(function Popover(inProps, ref) {
     const handleResize = debounce(() => {
       setPositioningStyles();
     });
-    const containerWindow = ownerWindow(anchorEl);
+    const containerWindow = ownerWindow(resolveAnchorEl(anchorEl));
     containerWindow.addEventListener('resize', handleResize);
     return () => {
       handleResize.clear();

package/modern/index.js

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

package/modern/useAutocomplete/useAutocomplete.js

@@ -121,8 +121,8 @@ function useAutocomplete(props) {
   const highlightedIndexRef = React.useRef(defaultHighlighted);
 
   // Calculate the initial inputValue on mount only.
-  // Using useRef since defaultValue doesn't need to update inputValue dynamically.
-  const initialInputValue = React.useRef(getInputValue(defaultValue, multiple, getOptionLabel)).current;
+  // useRef ensures it doesn't update dynamically with defaultValue or value props.
+  const initialInputValue = React.useRef(getInputValue(defaultValue ?? valueProp, multiple, getOptionLabel)).current;
   const [value, setValueState] = useControlled({
     controlled: valueProp,
     default: defaultValue,

package/modern/version/index.js

@@ -1,6 +1,6 @@
-export const version = "6.4.9";
+export const version = "6.4.11";
 export const major = Number("6");
 export const minor = Number("4");
-export const patch = Number("9");
+export const patch = Number("11");
 export const prerelease = undefined;
 export default version;

package/node/AvatarGroup/AvatarGroup.js

@@ -100,7 +100,14 @@ const AvatarGroup = /*#__PURE__*/React.forwardRef(function AvatarGroup(inProps,
   const maxAvatars = Math.min(children.length, clampedMax - 1);
   const extraAvatars = Math.max(totalAvatars - clampedMax, totalAvatars - maxAvatars, 0);
   const extraAvatarsElement = renderSurplus ? renderSurplus(extraAvatars) : `+${extraAvatars}`;
-  const marginValue = ownerState.spacing && SPACINGS[ownerState.spacing] !== undefined ? SPACINGS[ownerState.spacing] : -ownerState.spacing || -8;
+  let marginValue;
+  if (ownerState.spacing && SPACINGS[ownerState.spacing] !== undefined) {
+    marginValue = SPACINGS[ownerState.spacing];
+  } else if (ownerState.spacing === 0) {
+    marginValue = 0;
+  } else {
+    marginValue = -ownerState.spacing || SPACINGS.medium;
+  }
   const externalForwardedProps = {
     slots,
     slotProps: {
@@ -125,7 +132,8 @@ const AvatarGroup = /*#__PURE__*/React.forwardRef(function AvatarGroup(inProps,
     ref: ref,
     ...other,
     style: {
-      '--AvatarGroup-spacing': marginValue ? `${marginValue}px` : undefined,
+      '--AvatarGroup-spacing': `${marginValue}px`,
+      // marginValue is always defined
       ...other.style
     },
     children: [extraAvatars ? /*#__PURE__*/(0, _jsxRuntime.jsx)(SurplusSlot, {

package/node/Popover/Popover.js

@@ -285,7 +285,7 @@ const Popover = /*#__PURE__*/React.forwardRef(function Popover(inProps, ref) {
     const handleResize = (0, _debounce.default)(() => {
       setPositioningStyles();
     });
-    const containerWindow = (0, _ownerWindow.default)(anchorEl);
+    const containerWindow = (0, _ownerWindow.default)(resolveAnchorEl(anchorEl));
     containerWindow.addEventListener('resize', handleResize);
     return () => {
       handleResize.clear();

package/node/index.js

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

package/node/useAutocomplete/useAutocomplete.js

@@ -127,8 +127,8 @@ function useAutocomplete(props) {
   const highlightedIndexRef = React.useRef(defaultHighlighted);
 
   // Calculate the initial inputValue on mount only.
-  // Using useRef since defaultValue doesn't need to update inputValue dynamically.
-  const initialInputValue = React.useRef(getInputValue(defaultValue, multiple, getOptionLabel)).current;
+  // useRef ensures it doesn't update dynamically with defaultValue or value props.
+  const initialInputValue = React.useRef(getInputValue(defaultValue ?? valueProp, multiple, getOptionLabel)).current;
   const [value, setValueState] = (0, _utils.unstable_useControlled)({
     controlled: valueProp,
     default: defaultValue,

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.9";
+const version = exports.version = "6.4.11";
 const major = exports.major = Number("6");
 const minor = exports.minor = Number("4");
-const patch = exports.patch = Number("9");
+const patch = exports.patch = Number("11");
 const prerelease = exports.prerelease = undefined;
 var _default = exports.default = version;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/material",
-  "version": "6.4.9",
+  "version": "6.4.11",
   "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.11",
+    "@mui/system": "^6.4.11",
     "@mui/types": "~7.2.24",
-    "@mui/system": "^6.4.9",
-    "@mui/utils": "^6.4.8",
-    "@mui/core-downloads-tracker": "^6.4.9"
+    "@mui/utils": "^6.4.9"
   },
   "peerDependencies": {
     "@emotion/react": "^11.5.0",
@@ -46,7 +46,7 @@
     "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0",
     "react": "^17.0.0 || ^18.0.0 || ^19.0.0",
     "react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0",
-    "@mui/material-pigment-css": "^6.4.9"
+    "@mui/material-pigment-css": "^6.4.11"
   },
   "peerDependenciesMeta": {
     "@types/react": {

package/useAutocomplete/useAutocomplete.js

@@ -121,8 +121,8 @@ function useAutocomplete(props) {
   const highlightedIndexRef = React.useRef(defaultHighlighted);
 
   // Calculate the initial inputValue on mount only.
-  // Using useRef since defaultValue doesn't need to update inputValue dynamically.
-  const initialInputValue = React.useRef(getInputValue(defaultValue, multiple, getOptionLabel)).current;
+  // useRef ensures it doesn't update dynamically with defaultValue or value props.
+  const initialInputValue = React.useRef(getInputValue(defaultValue ?? valueProp, multiple, getOptionLabel)).current;
   const [value, setValueState] = useControlled({
     controlled: valueProp,
     default: defaultValue,

package/version/index.js

@@ -1,6 +1,6 @@
-export const version = "6.4.9";
+export const version = "6.4.11";
 export const major = Number("6");
 export const minor = Number("4");
-export const patch = Number("9");
+export const patch = Number("11");
 export const prerelease = undefined;
 export default version;