@mui/material 7.0.1 → 7.0.2

package/Autocomplete/Autocomplete.d.ts

@@ -35,6 +35,25 @@ export type AutocompleteRenderGetTagProps = ({
   tabIndex: -1;
   onDelete: (event: any) => void;
 };
+export type AutocompleteRenderValueGetItemProps<Multiple extends boolean | undefined> = Multiple extends true ? (args: {
+  index: number;
+}) => {
+  key: number;
+  className: string;
+  disabled: boolean;
+  'data-item-index': number;
+  tabIndex: -1;
+  onDelete: (event: any) => void;
+} : (args?: {
+  index?: number;
+}) => {
+  className: string;
+  disabled: boolean;
+  'data-item-index': number;
+  tabIndex: -1;
+  onDelete: (event: any) => void;
+};
+export type AutocompleteRenderValue<Value, Multiple, FreeSolo> = Multiple extends true ? Array<Value | AutocompleteFreeSoloValueMapping<FreeSolo>> : NonNullable<Value | AutocompleteFreeSoloValueMapping<FreeSolo>>;
 export interface AutocompleteRenderOptionState {
   inputValue: string;
   index: number;
@@ -258,7 +277,9 @@ export interface AutocompleteProps<Value, Multiple extends boolean | undefined,
     key: any;
   }, option: Value, state: AutocompleteRenderOptionState, ownerState: AutocompleteOwnerState<Value, Multiple, DisableClearable, FreeSolo, ChipComponent>) => React.ReactNode;
   /**
-   * Render the selected value.
+   * Render the selected value when doing multiple selections.
+   *
+   * @deprecated Use `renderValue` prop instead
    *
    * @param {Value[]} value The `value` provided to the component.
    * @param {function} getTagProps A tag props getter.
@@ -266,6 +287,15 @@ export interface AutocompleteProps<Value, Multiple extends boolean | undefined,
    * @returns {ReactNode}
    */
   renderTags?: (value: Value[], getTagProps: AutocompleteRenderGetTagProps, ownerState: AutocompleteOwnerState<Value, Multiple, DisableClearable, FreeSolo, ChipComponent>) => React.ReactNode;
+  /**
+   * Renders the selected value(s) as rich content in the input for both single and multiple selections.
+   *
+   * @param {AutocompleteRenderValue<Value, Multiple, FreeSolo>} value The `value` provided to the component.
+   * @param {function} getItemProps The value item props.
+   * @param {object} ownerState The state of the Autocomplete component.
+   * @returns {ReactNode}
+   */
+  renderValue?: (value: AutocompleteRenderValue<Value, Multiple, FreeSolo>, getItemProps: AutocompleteRenderValueGetItemProps<Multiple>, ownerState: AutocompleteOwnerState<Value, Multiple, DisableClearable, FreeSolo, ChipComponent>) => React.ReactNode;
   /**
    * The size of the component.
    * @default 'medium'

package/Autocomplete/Autocomplete.js

@@ -483,6 +483,7 @@ const Autocomplete = /*#__PURE__*/React.forwardRef(function Autocomplete(inProps
     renderInput,
     renderOption: renderOptionProp,
     renderTags,
+    renderValue,
     selectOnFocus = !props.freeSolo,
     size = 'medium',
     slots = {},
@@ -498,7 +499,7 @@ const Autocomplete = /*#__PURE__*/React.forwardRef(function Autocomplete(inProps
     getInputLabelProps,
     getPopupIndicatorProps,
     getClearProps,
-    getTagProps,
+    getItemProps,
     getListboxProps,
     getOptionProps,
     value,
@@ -507,7 +508,7 @@ const Autocomplete = /*#__PURE__*/React.forwardRef(function Autocomplete(inProps
     id,
     popupOpen,
     focused,
-    focusedTag,
+    focusedItem,
     anchorEl,
     setAnchorEl,
     inputValue,
@@ -538,7 +539,7 @@ const Autocomplete = /*#__PURE__*/React.forwardRef(function Autocomplete(inProps
     getOptionLabel,
     hasClearIcon,
     hasPopupIcon,
-    inputFocused: focusedTag === -1,
+    inputFocused: focusedItem === -1,
     popupOpen,
     size
   };
@@ -586,30 +587,30 @@ const Autocomplete = /*#__PURE__*/React.forwardRef(function Autocomplete(inProps
     }
   });
   let startAdornment;
-  if (multiple && value.length > 0) {
-    const getCustomizedTagProps = params => ({
-      className: classes.tag,
-      disabled,
-      ...getTagProps(params)
-    });
-    if (renderTags) {
-      startAdornment = renderTags(value, getCustomizedTagProps, ownerState);
-    } else {
-      startAdornment = value.map((option, index) => {
-        const {
-          key,
-          ...customTagProps
-        } = getCustomizedTagProps({
-          index
-        });
-        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Chip.default, {
-          label: getOptionLabel(option),
-          size: size,
-          ...customTagProps,
-          ...externalForwardedProps.slotProps.chip
-        }, key);
+  const getCustomizedItemProps = params => ({
+    className: classes.tag,
+    disabled,
+    ...getItemProps(params)
+  });
+  if (renderTags && multiple && value.length > 0) {
+    startAdornment = renderTags(value, getCustomizedItemProps, ownerState);
+  } else if (renderValue && value) {
+    startAdornment = renderValue(value, getCustomizedItemProps, ownerState);
+  } else if (multiple && value.length > 0) {
+    startAdornment = value.map((option, index) => {
+      const {
+        key,
+        ...customItemProps
+      } = getCustomizedItemProps({
+        index
       });
-    }
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Chip.default, {
+        label: getOptionLabel(option),
+        size: size,
+        ...customItemProps,
+        ...externalForwardedProps.slotProps.chip
+      }, key);
+    });
   }
   if (limitTags > -1 && Array.isArray(startAdornment)) {
     const more = startAdornment.length - limitTags;
@@ -1138,7 +1139,9 @@ process.env.NODE_ENV !== "production" ? Autocomplete.propTypes /* remove-proptyp
    */
   renderOption: _propTypes.default.func,
   /**
-   * Render the selected value.
+   * Render the selected value when doing multiple selections.
+   *
+   * @deprecated Use `renderValue` prop instead
    *
    * @param {Value[]} value The `value` provided to the component.
    * @param {function} getTagProps A tag props getter.
@@ -1146,6 +1149,15 @@ process.env.NODE_ENV !== "production" ? Autocomplete.propTypes /* remove-proptyp
    * @returns {ReactNode}
    */
   renderTags: _propTypes.default.func,
+  /**
+   * Renders the selected value(s) as rich content in the input for both single and multiple selections.
+   *
+   * @param {AutocompleteRenderValue<Value, Multiple, FreeSolo>} value The `value` provided to the component.
+   * @param {function} getItemProps The value item props.
+   * @param {object} ownerState The state of the Autocomplete component.
+   * @returns {ReactNode}
+   */
+  renderValue: _propTypes.default.func,
   /**
    * If `true`, the input's text is selected on focus.
    * It helps the user clear the selected value.

package/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/CHANGELOG.md

@@ -1,5 +1,65 @@
 # [Versions](https://mui.com/versions/)
 
+## 7.0.2
+
+_Apr 9, 2025_
+
+A big thanks to the 12 contributors who made this release possible.
+
+### `@mui/material@7.0.2`
+
+- [Autocomplete] Add ability to render custom single value (#45387) @ZeeshanTamboli
+- [Autocomplete] Prevent shrink animation in controlled Autocomplete when initial `value` is provided (#45734) @imadx
+- [AvatarGroup] Fix `spacing` prop ignoring value `0` (#45799) @Kartik-Murthy
+- [Dialog] Deprecate composed classes (#45418) @sai6855
+
+### `@mui/material-nextjs@7.0.2`
+
+- Fix nonce issues (#45794) @Janpot
+- Add warnings to nextjs router integration (#45778) @Janpot
+
+### `@mui/styled-engine@7.0.2`
+
+- Added caching to `StyledEngineProvider` to improve performance for running tests with Jest (#45846) @siriwatknp
+
+### Core
+
+- [blog] Improve upvote video (0646444) @oliviertassinari
+- [code-infra] Remove webpack aliases (#45841) @Janpot
+- [code-infra] Remove .tsbuildinfo from build folder (#45727) @Janpot
+- [code-infra] Stabilize theme viewer screenshot tests (#45768) @Janpot
+- [code-infra] Remove modern bundles (#45808) @Janpot
+- Update buildTypes script to optionally remove css imports (#45835) @brijeshb42
+- Allow repo to be accepted as an argument for releaseTag (#45801) @brijeshb42
+- Update scripts to support base-ui (#45784) @brijeshb42
+- Sync scorecards.yml across codebase (4de5076) @oliviertassinari
+- Remove baseUrl and skipLibCheck (#45806) @Janpot
+- [docs-infra] Fix redirect styles pages (#45848) @siriwatknp
+- [docs-infra] Remove false-positive Vale rules (#45843) @oliviertassinari
+- [docs-infra] Make sure Next.js can find package.json through its aliases (#45840) @Janpot
+- [docs-infra] Fix Next.js brand name coverage (6915f8d) @oliviertassinari
+- [docs-infra] Fix layout shift between MIT and commercial pages (#45760) @oliviertassinari
+- [docs-infra] Non breaking space for ESM (#45758) @oliviertassinari
+- [support-infra] Remove dead 'workflow_call:' (#45736) @oliviertassinari
+- [utils] Support cleanup callbacks in useForkRef (#45621) @DiegoAndai
+
+### Docs
+
+- Fix pigment vite integration example (#44746) @brijeshb42
+- Update migration instructions and codemod references for deprecated APIs (#45793) @sai6855
+- Add TanStack Router routing example (#44930) @vetledv
+- Fix layout shifting in icons page (#45779) @sai6855
+- Fix migration instructions (#45762) @oliviertassinari
+- Fix wrong TypeScript support version (#45761) @oliviertassinari
+- Fix link to mui-joy/src/styles/components.d.ts (#45763) @oliviertassinari
+- Fix 301 link (ae94c40) @oliviertassinari
+- Fix 301 links (abd8f63) @oliviertassinari
+- Fix 301 redirection (c7658de) @oliviertassinari
+- [nextjs] Migrate from deprecated "legacyBehavior" prop (#44871) @oliviertassinari
+- [nextjs] Document CSP for Next.js Pages Router (#45798) @Grohden
+
+All contributors of this release in alphabetical order: @brijeshb42, @DiegoAndai, @Grohden, @imadx, @Janpot, @Kartik-Murthy, @oliviertassinari, @renovate[bot], @sai6855, @siriwatknp, @vetledv, @ZeeshanTamboli
+
 ## 7.0.1
 
 <!-- generated comparing v7.0.0..master -->

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/SvgIcon/SvgIcon.d.ts

@@ -42,7 +42,7 @@ export interface SvgIconOwnProps {
   inheritViewBox?: boolean;
   /**
    * The shape-rendering attribute. The behavior of the different options is described on the
-   * [MDN Web Docs](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/shape-rendering).
+   * [MDN Web Docs](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/shape-rendering).
    * If you are having issues with blurry icons you should investigate this prop.
    */
   shapeRendering?: string;

package/SvgIcon/SvgIcon.js

@@ -214,7 +214,7 @@ process.env.NODE_ENV !== "production" ? SvgIcon.propTypes /* remove-proptypes */
   inheritViewBox: _propTypes.default.bool,
   /**
    * The shape-rendering attribute. The behavior of the different options is described on the
-   * [MDN Web Docs](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/shape-rendering).
+   * [MDN Web Docs](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/shape-rendering).
    * If you are having issues with blurry icons you should investigate this prop.
    */
   shapeRendering: _propTypes.default.string,

package/esm/Autocomplete/Autocomplete.d.ts

@@ -35,6 +35,25 @@ export type AutocompleteRenderGetTagProps = ({
   tabIndex: -1;
   onDelete: (event: any) => void;
 };
+export type AutocompleteRenderValueGetItemProps<Multiple extends boolean | undefined> = Multiple extends true ? (args: {
+  index: number;
+}) => {
+  key: number;
+  className: string;
+  disabled: boolean;
+  'data-item-index': number;
+  tabIndex: -1;
+  onDelete: (event: any) => void;
+} : (args?: {
+  index?: number;
+}) => {
+  className: string;
+  disabled: boolean;
+  'data-item-index': number;
+  tabIndex: -1;
+  onDelete: (event: any) => void;
+};
+export type AutocompleteRenderValue<Value, Multiple, FreeSolo> = Multiple extends true ? Array<Value | AutocompleteFreeSoloValueMapping<FreeSolo>> : NonNullable<Value | AutocompleteFreeSoloValueMapping<FreeSolo>>;
 export interface AutocompleteRenderOptionState {
   inputValue: string;
   index: number;
@@ -258,7 +277,9 @@ export interface AutocompleteProps<Value, Multiple extends boolean | undefined,
     key: any;
   }, option: Value, state: AutocompleteRenderOptionState, ownerState: AutocompleteOwnerState<Value, Multiple, DisableClearable, FreeSolo, ChipComponent>) => React.ReactNode;
   /**
-   * Render the selected value.
+   * Render the selected value when doing multiple selections.
+   *
+   * @deprecated Use `renderValue` prop instead
    *
    * @param {Value[]} value The `value` provided to the component.
    * @param {function} getTagProps A tag props getter.
@@ -266,6 +287,15 @@ export interface AutocompleteProps<Value, Multiple extends boolean | undefined,
    * @returns {ReactNode}
    */
   renderTags?: (value: Value[], getTagProps: AutocompleteRenderGetTagProps, ownerState: AutocompleteOwnerState<Value, Multiple, DisableClearable, FreeSolo, ChipComponent>) => React.ReactNode;
+  /**
+   * Renders the selected value(s) as rich content in the input for both single and multiple selections.
+   *
+   * @param {AutocompleteRenderValue<Value, Multiple, FreeSolo>} value The `value` provided to the component.
+   * @param {function} getItemProps The value item props.
+   * @param {object} ownerState The state of the Autocomplete component.
+   * @returns {ReactNode}
+   */
+  renderValue?: (value: AutocompleteRenderValue<Value, Multiple, FreeSolo>, getItemProps: AutocompleteRenderValueGetItemProps<Multiple>, ownerState: AutocompleteOwnerState<Value, Multiple, DisableClearable, FreeSolo, ChipComponent>) => React.ReactNode;
   /**
    * The size of the component.
    * @default 'medium'

package/esm/Autocomplete/Autocomplete.js

@@ -471,6 +471,7 @@ const Autocomplete = /*#__PURE__*/React.forwardRef(function Autocomplete(inProps
     renderInput,
     renderOption: renderOptionProp,
     renderTags,
+    renderValue,
     selectOnFocus = !props.freeSolo,
     size = 'medium',
     slots = {},
@@ -486,7 +487,7 @@ const Autocomplete = /*#__PURE__*/React.forwardRef(function Autocomplete(inProps
     getInputLabelProps,
     getPopupIndicatorProps,
     getClearProps,
-    getTagProps,
+    getItemProps,
     getListboxProps,
     getOptionProps,
     value,
@@ -495,7 +496,7 @@ const Autocomplete = /*#__PURE__*/React.forwardRef(function Autocomplete(inProps
     id,
     popupOpen,
     focused,
-    focusedTag,
+    focusedItem,
     anchorEl,
     setAnchorEl,
     inputValue,
@@ -526,7 +527,7 @@ const Autocomplete = /*#__PURE__*/React.forwardRef(function Autocomplete(inProps
     getOptionLabel,
     hasClearIcon,
     hasPopupIcon,
-    inputFocused: focusedTag === -1,
+    inputFocused: focusedItem === -1,
     popupOpen,
     size
   };
@@ -574,30 +575,30 @@ const Autocomplete = /*#__PURE__*/React.forwardRef(function Autocomplete(inProps
     }
   });
   let startAdornment;
-  if (multiple && value.length > 0) {
-    const getCustomizedTagProps = params => ({
-      className: classes.tag,
-      disabled,
-      ...getTagProps(params)
-    });
-    if (renderTags) {
-      startAdornment = renderTags(value, getCustomizedTagProps, ownerState);
-    } else {
-      startAdornment = value.map((option, index) => {
-        const {
-          key,
-          ...customTagProps
-        } = getCustomizedTagProps({
-          index
-        });
-        return /*#__PURE__*/_jsx(Chip, {
-          label: getOptionLabel(option),
-          size: size,
-          ...customTagProps,
-          ...externalForwardedProps.slotProps.chip
-        }, key);
+  const getCustomizedItemProps = params => ({
+    className: classes.tag,
+    disabled,
+    ...getItemProps(params)
+  });
+  if (renderTags && multiple && value.length > 0) {
+    startAdornment = renderTags(value, getCustomizedItemProps, ownerState);
+  } else if (renderValue && value) {
+    startAdornment = renderValue(value, getCustomizedItemProps, ownerState);
+  } else if (multiple && value.length > 0) {
+    startAdornment = value.map((option, index) => {
+      const {
+        key,
+        ...customItemProps
+      } = getCustomizedItemProps({
+        index
       });
-    }
+      return /*#__PURE__*/_jsx(Chip, {
+        label: getOptionLabel(option),
+        size: size,
+        ...customItemProps,
+        ...externalForwardedProps.slotProps.chip
+      }, key);
+    });
   }
   if (limitTags > -1 && Array.isArray(startAdornment)) {
     const more = startAdornment.length - limitTags;
@@ -1126,7 +1127,9 @@ process.env.NODE_ENV !== "production" ? Autocomplete.propTypes /* remove-proptyp
    */
   renderOption: PropTypes.func,
   /**
-   * Render the selected value.
+   * Render the selected value when doing multiple selections.
+   *
+   * @deprecated Use `renderValue` prop instead
    *
    * @param {Value[]} value The `value` provided to the component.
    * @param {function} getTagProps A tag props getter.
@@ -1134,6 +1137,15 @@ process.env.NODE_ENV !== "production" ? Autocomplete.propTypes /* remove-proptyp
    * @returns {ReactNode}
    */
   renderTags: PropTypes.func,
+  /**
+   * Renders the selected value(s) as rich content in the input for both single and multiple selections.
+   *
+   * @param {AutocompleteRenderValue<Value, Multiple, FreeSolo>} value The `value` provided to the component.
+   * @param {function} getItemProps The value item props.
+   * @param {object} ownerState The state of the Autocomplete component.
+   * @returns {ReactNode}
+   */
+  renderValue: PropTypes.func,
   /**
    * If `true`, the input's text is selected on focus.
    * It helps the user clear the selected value.

package/esm/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/esm/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/esm/SvgIcon/SvgIcon.d.ts

@@ -42,7 +42,7 @@ export interface SvgIconOwnProps {
   inheritViewBox?: boolean;
   /**
    * The shape-rendering attribute. The behavior of the different options is described on the
-   * [MDN Web Docs](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/shape-rendering).
+   * [MDN Web Docs](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/shape-rendering).
    * If you are having issues with blurry icons you should investigate this prop.
    */
   shapeRendering?: string;

package/esm/SvgIcon/SvgIcon.js

@@ -207,7 +207,7 @@ process.env.NODE_ENV !== "production" ? SvgIcon.propTypes /* remove-proptypes */
   inheritViewBox: PropTypes.bool,
   /**
    * The shape-rendering attribute. The behavior of the different options is described on the
-   * [MDN Web Docs](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/shape-rendering).
+   * [MDN Web Docs](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/shape-rendering).
    * If you are having issues with blurry icons you should investigate this prop.
    */
   shapeRendering: PropTypes.string,

package/esm/index.d.ts

@@ -37,7 +37,6 @@ StyledComponentProps<never> & {
 };
 export namespace PropTypes {
   // keeping the type structure for backwards compat
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   type Color = 'inherit' | 'primary' | 'secondary' | 'default';
 }
 

package/esm/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/material v7.0.1
+ * @mui/material v7.0.2
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/esm/useAutocomplete/useAutocomplete.d.ts

@@ -281,6 +281,20 @@ export interface AutocompleteChangeDetails<Value = string> {
 }
 export type AutocompleteCloseReason = 'createOption' | 'toggleInput' | 'escape' | 'selectOption' | 'removeOption' | 'blur';
 export type AutocompleteInputChangeReason = 'input' | 'reset' | 'clear' | 'blur' | 'selectOption' | 'removeOption';
+export type AutocompleteGetItemProps<Multiple extends boolean | undefined> = Multiple extends true ? (args: {
+  index: number;
+}) => {
+  key: number;
+  'data-item-index': number;
+  tabIndex: -1;
+  onDelete: (event: any) => void;
+} : (args?: {
+  index?: number;
+}) => {
+  'data-item-index': number;
+  tabIndex: -1;
+  onDelete: (event: any) => void;
+};
 export type AutocompleteGetTagProps = ({
   index
 }: {
@@ -331,12 +345,18 @@ export interface UseAutocompleteReturnValue<Value, Multiple extends boolean | un
    * @returns props that should be spread on the *clear* button element
    */
   getClearProps: () => React.HTMLAttributes<HTMLButtonElement>;
+  /**
+   * An item props getter
+   */
+  getItemProps: AutocompleteGetItemProps<Multiple>;
   /**
    * Resolver for the popup icon's props.
    * @returns props that should be spread on the popup icon
    */
   getPopupIndicatorProps: () => React.HTMLAttributes<HTMLButtonElement>;
   /**
+   * @deprecated Use `getItemProps` instead
+   *
    * A tag props getter.
    */
   getTagProps: AutocompleteGetTagProps;
@@ -391,6 +411,12 @@ export interface UseAutocompleteReturnValue<Value, Multiple extends boolean | un
    */
   setAnchorEl: () => void;
   /**
+   * Index of the focused item for the component.
+   */
+  focusedItem: number;
+  /**
+   * @deprecated Use `focusedItem` instead
+   *
    * Index of the focused tag for the component.
    */
   focusedTag: number;