@mui/material 5.15.8 → 5.15.10

package/Autocomplete/Autocomplete.js

@@ -4,8 +4,7 @@ import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWith
 import _extends from "@babel/runtime/helpers/esm/extends";
 var _ClearIcon, _ArrowDropDownIcon;
 const _excluded = ["autoComplete", "autoHighlight", "autoSelect", "blurOnSelect", "ChipProps", "className", "clearIcon", "clearOnBlur", "clearOnEscape", "clearText", "closeText", "componentsProps", "defaultValue", "disableClearable", "disableCloseOnSelect", "disabled", "disabledItemsFocusable", "disableListWrap", "disablePortal", "filterOptions", "filterSelectedOptions", "forcePopupIcon", "freeSolo", "fullWidth", "getLimitTagsText", "getOptionDisabled", "getOptionKey", "getOptionLabel", "isOptionEqualToValue", "groupBy", "handleHomeEndKeys", "id", "includeInputInList", "inputValue", "limitTags", "ListboxComponent", "ListboxProps", "loading", "loadingText", "multiple", "noOptionsText", "onChange", "onClose", "onHighlightChange", "onInputChange", "onOpen", "open", "openOnFocus", "openText", "options", "PaperComponent", "PopperComponent", "popupIcon", "readOnly", "renderGroup", "renderInput", "renderOption", "renderTags", "selectOnFocus", "size", "slotProps", "value"],
-  _excluded2 = ["ref"],
-  _excluded3 = ["key"];
+  _excluded2 = ["ref"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
@@ -30,6 +29,7 @@ import capitalize from '../utils/capitalize';
 import useForkRef from '../utils/useForkRef';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
+import { createElement as _createElement } from "react";
 const useUtilityClasses = ownerState => {
   const {
     classes,
@@ -528,13 +528,10 @@ const Autocomplete = /*#__PURE__*/React.forwardRef(function Autocomplete(inProps
   }, params.key);
   const renderGroup = renderGroupProp || defaultRenderGroup;
   const defaultRenderOption = (props2, option) => {
-    const {
-        key
-      } = props2,
-      otherProps = _objectWithoutPropertiesLoose(props2, _excluded3);
-    return /*#__PURE__*/_jsx("li", _extends({}, otherProps, {
-      children: getOptionLabel(option)
-    }), key);
+    // Need to clearly apply key because of https://github.com/vercel/next.js/issues/55642
+    return /*#__PURE__*/_createElement("li", _extends({}, props2, {
+      key: props2.key
+    }), getOptionLabel(option));
   };
   const renderOption = renderOptionProp || defaultRenderOption;
   const renderListOption = (option, index) => {

package/Avatar/Avatar.d.ts

@@ -4,9 +4,30 @@ import { OverridableStringUnion } from '@mui/types';
 import { Theme } from '../styles';
 import { OverridableComponent, OverrideProps } from '../OverridableComponent';
 import { AvatarClasses } from './avatarClasses';
+import { CreateSlotsAndSlotProps, SlotProps } from '../utils/types';
+
+export interface AvatarSlots {
+  /**
+   * The component that renders the transition.
+   * [Follow this guide](/material-ui/transitions/#transitioncomponent-prop) to learn more about the requirements for this component.
+   * @default Collapse
+   */
+  img?: React.JSXElementConstructor<React.ImgHTMLAttributes<HTMLImageElement>>;
+}
 
 export interface AvatarPropsVariantOverrides {}
 
+export type AvatarSlotsAndSlotProps = CreateSlotsAndSlotProps<
+  AvatarSlots,
+  {
+    img: SlotProps<
+      React.ElementType<React.ImgHTMLAttributes<HTMLImageElement>>,
+      {},
+      AvatarOwnProps
+    >;
+  }
+>;
+
 export interface AvatarOwnProps {
   /**
    * Used in combination with `src` or `srcSet` to
@@ -25,6 +46,7 @@ export interface AvatarOwnProps {
   /**
    * [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attributes) applied to the `img` element if the component is used to display an image.
    * It can be used to listen for the loading error event.
+   * @deprecated Use `slotProps.img` instead. This prop will be removed in v7. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/).
    */
   imgProps?: React.ImgHTMLAttributes<HTMLImageElement> & {
     sx?: SxProps<Theme>;
@@ -57,7 +79,7 @@ export interface AvatarTypeMap<
   AdditionalProps = {},
   RootComponent extends React.ElementType = 'div',
 > {
-  props: AdditionalProps & AvatarOwnProps;
+  props: AdditionalProps & AvatarOwnProps & AvatarSlotsAndSlotProps;
   defaultComponent: RootComponent;
 }
 

package/Avatar/Avatar.js

@@ -2,7 +2,7 @@
 
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["alt", "children", "className", "component", "imgProps", "sizes", "src", "srcSet", "variant"];
+const _excluded = ["alt", "children", "className", "component", "slots", "slotProps", "imgProps", "sizes", "src", "srcSet", "variant"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
@@ -11,6 +11,7 @@ import styled from '../styles/styled';
 import useThemeProps from '../styles/useThemeProps';
 import Person from '../internal/svg-icons/Person';
 import { getAvatarUtilityClass } from './avatarClasses';
+import useSlot from '../utils/useSlot';
 import { jsx as _jsx } from "react/jsx-runtime";
 const useUtilityClasses = ownerState => {
   const {
@@ -150,6 +151,8 @@ const Avatar = /*#__PURE__*/React.forwardRef(function Avatar(inProps, ref) {
       children: childrenProp,
       className,
       component = 'div',
+      slots = {},
+      slotProps = {},
       imgProps,
       sizes,
       src,
@@ -172,16 +175,25 @@ const Avatar = /*#__PURE__*/React.forwardRef(function Avatar(inProps, ref) {
     variant
   });
   const classes = useUtilityClasses(ownerState);
+  const [ImgSlot, imgSlotProps] = useSlot('img', {
+    className: classes.img,
+    elementType: AvatarImg,
+    externalForwardedProps: {
+      slots,
+      slotProps: {
+        img: _extends({}, imgProps, slotProps.img)
+      }
+    },
+    additionalProps: {
+      alt,
+      src,
+      srcSet,
+      sizes
+    },
+    ownerState
+  });
   if (hasImgNotFailing) {
-    children = /*#__PURE__*/_jsx(AvatarImg, _extends({
-      alt: alt,
-      srcSet: srcSet,
-      src: src,
-      sizes: sizes,
-      ownerState: ownerState,
-      className: classes.img
-    }, imgProps));
-
+    children = /*#__PURE__*/_jsx(ImgSlot, _extends({}, imgSlotProps));
     // We only render valid children, non valid children are rendered with a fallback
     // We consider that invalid children are all falsy values, except 0, which is valid.
   } else if (!!childrenProp || childrenProp === 0) {
@@ -234,12 +246,27 @@ process.env.NODE_ENV !== "production" ? Avatar.propTypes /* remove-proptypes */
   /**
    * [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attributes) applied to the `img` element if the component is used to display an image.
    * It can be used to listen for the loading error event.
+   * @deprecated Use `slotProps.img` instead. This prop will be removed in v7. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/).
    */
   imgProps: PropTypes.object,
   /**
    * The `sizes` attribute for the `img` element.
    */
   sizes: PropTypes.string,
+  /**
+   * The props used for each slot inside.
+   * @default {}
+   */
+  slotProps: PropTypes.shape({
+    img: PropTypes.oneOfType([PropTypes.func, PropTypes.object])
+  }),
+  /**
+   * The components used for each slot inside.
+   * @default {}
+   */
+  slots: PropTypes.shape({
+    img: PropTypes.elementType
+  }),
   /**
    * The `src` attribute for the `img` element.
    */

package/CHANGELOG.md

@@ -1,5 +1,91 @@
 # [Versions](https://mui.com/versions/)
 
+## v5.15.10
+
+<!-- generated comparing v5.15.9..master -->
+
+_Feb 12, 2024_
+
+A big thanks to the 8 contributors who made this release possible.
+This release was mostly about 🐛 bug fixes and 📚 documentation improvements.
+
+### `@mui/material@5.15.10`
+
+- [Avatar] Add props deprecation with a codemod (#40853) @siriwatknp
+
+### `@mui/system@5.15.10`
+
+- [Stack] Update import statement for Stack component (#41032) @sai6855
+
+### `@mui/joy@5.0.0-beta.28`
+
+- [Button] Fix `disabled` prop priority when inside button group (#41000) @Smileek
+- [IconButton] Support loading prop (#40949) @Smileek
+
+### Docs
+
+- [Button][material-ui] Fix 'File upload' demo a11y (#40943) @oliviertassinari
+- [TableRow][material-ui] Escape markup in `children` prop so docgen tools don't parse it as HTML (#40992) @millerized
+- [material-ui] Remove outdated example projects link (it uses Joy UI now) (#40913) @oliviertassinari
+- [material-ui] Fix the "Intro to the MUI ecosystem" link placement (#40988) @danilo-leal
+- Fix 301 redirection to StackBlitz @oliviertassinari
+- Fix h1 on Joy UI templates @oliviertassinari
+- Have MUI workspace own the CodeSandbox @oliviertassinari
+- Add notification for mui x v7 beta (#41001) @joserodolfofreitas
+- Fix 301 links @oliviertassinari
+- Fix Next.js v13.5.1 <title> SEO regression (#40302) @oliviertassinari
+- Add a 404 page (#40884) @danilo-leal
+- Fix missing GitHub label when opening new issue @oliviertassinari
+
+### Core
+
+- [blog] Add post about upcoming plans for Base UI (#40882) @danilo-leal
+- [core] Simplify CodeSandbox reproduction @oliviertassinari
+- [core] Missing redirection @oliviertassinari
+- [core] Export functions from `copyFiles` script to reuse in MUI X repo (#40970) @cherniavskii
+- [core] Avoid variable shorthands @oliviertassinari
+- [docs-infra] Fix search icon issue (#40957) @oliviertassinari
+- [docs-infra] Ignore classes tagged with `@ignore` (#41009) @cherniavskii
+- [docs-infra] Fix selected tab on codeblocks (#41036) @danilo-leal
+- [website] Polish Customer Support Agent role @oliviertassinari
+
+All contributors of this release in alphabetical order: @cherniavskii, @danilo-leal, @joserodolfofreitas, @millerized, @oliviertassinari, @sai6855, @siriwatknp, @Smileek
+
+## v5.15.9<!-- generated comparing v5.15.8..master -->
+
+_Feb 8, 2024_
+
+A big thanks to the 7 contributors who made this release possible. Here are some highlights ✨:
+
+- 🐛 A critical fix to remove non-published library usage in `@mui/material` peerDependencies.
+
+### `@mui/material@5.15.9`
+
+- &#8203;<!-- 11 -->[autocomplete] Avoid spread operator (#40968) @oliviertassinari
+- &#8203;<!-- 05 -->[material] Remove zero-runtime from peer dep (#41003) @brijeshb42
+
+### `@mui/base@5.0.0-beta.36`
+
+- &#8203;<!-- 10 -->[base-ui] Update props using Array to ReadonlyArray type (#40754) @RaghavenderSingh
+
+### `@mui/system@5.15.9`
+
+- &#8203;<!-- 02 -->[system] use `ReadonlyArray` for CSS related types (#40972) @siriwatknp
+- &#8203;<!-- 01 -->[zero] Migrate to use wyw-in-js instead of linaria (#40866) @brijeshb42
+
+### Docs
+
+- &#8203;<!-- 06 -->[docs] Polish codemod git diff format @oliviertassinari
+- &#8203;<!-- 05 -->[material-ui][docs] Migrating from deprecated apis follow up (#40981) @DiegoAndai
+
+### Core
+
+- &#8203;<!-- 09 -->[code-infra] Move next config to ESM (#40869) @Janpot
+- &#8203;<!-- 08 -->[code-infra] Update prettier (#40772) @Janpot
+- &#8203;<!-- 07 -->[code-infra] Add codemod for `light` prop removal (#40947) @sai6855
+
+All contributors of this release in alphabetical order: @brijeshb42, @DiegoAndai, @Janpot, @oliviertassinari, @RaghavenderSingh, @sai6855, @siriwatknp
+
 ## v5.15.8<!-- generated comparing v5.15.7..master -->
 
 _Feb 6, 2024_

package/Divider/Divider.d.ts

@@ -30,7 +30,7 @@ export interface DividerOwnProps {
   /**
    * If `true`, the divider will have a lighter color.
    * @default false
-   * @deprecated Use <Divider sx={{ bgcolor: '#eee' }} /> (or any color) instead.
+   * @deprecated Use <Divider sx={{ opacity: 0.6 }} /> (or any opacity or color) instead. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/)
    */
   light?: boolean;
   /**

package/Divider/Divider.js

@@ -221,7 +221,7 @@ process.env.NODE_ENV !== "production" ? Divider.propTypes /* remove-proptypes */
   /**
    * If `true`, the divider will have a lighter color.
    * @default false
-   * @deprecated Use <Divider sx={{ bgcolor: '#eee' }} /> (or any color) instead.
+   * @deprecated Use <Divider sx={{ opacity: 0.6 }} /> (or any opacity or color) instead. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/)
    */
   light: PropTypes.bool,
   /**

package/TableRow/TableRow.d.ts

@@ -6,7 +6,7 @@ import { TableRowClasses } from './tableRowClasses';
 
 export interface TableRowOwnProps {
   /**
-   * Should be valid <tr> children such as `TableCell`.
+   * Should be valid `<tr>` children such as `TableCell`.
    */
   children?: React.ReactNode;
   /**

package/TableRow/TableRow.js

@@ -93,7 +93,7 @@ process.env.NODE_ENV !== "production" ? TableRow.propTypes /* remove-proptypes *
   // │    To update them, edit the d.ts file and run `pnpm proptypes`.     │
   // └─────────────────────────────────────────────────────────────────────┘
   /**
-   * Should be valid <tr> children such as `TableCell`.
+   * Should be valid `<tr>` children such as `TableCell`.
    */
   children: PropTypes.node,
   /**

package/TextField/TextField.d.ts

@@ -232,8 +232,8 @@ export type TextFieldProps<Variant extends TextFieldVariants = TextFieldVariants
   Variant extends 'filled'
     ? FilledTextFieldProps
     : Variant extends 'standard'
-    ? StandardTextFieldProps
-    : OutlinedTextFieldProps;
+      ? StandardTextFieldProps
+      : OutlinedTextFieldProps;
 
 /**
  * The `TextField` is a convenience wrapper for the most common cases (80%).

package/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/material v5.15.8
+ * @mui/material v5.15.10
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/legacy/Autocomplete/Autocomplete.js

@@ -28,6 +28,7 @@ import capitalize from '../utils/capitalize';
 import useForkRef from '../utils/useForkRef';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
+import { createElement as _createElement } from "react";
 var useUtilityClasses = function useUtilityClasses(ownerState) {
   var classes = ownerState.classes,
     disablePortal = ownerState.disablePortal,
@@ -539,11 +540,10 @@ var Autocomplete = /*#__PURE__*/React.forwardRef(function Autocomplete(inProps,
   };
   var renderGroup = renderGroupProp || defaultRenderGroup;
   var defaultRenderOption = function defaultRenderOption(props2, option) {
-    var key = props2.key,
-      otherProps = _objectWithoutProperties(props2, ["key"]);
-    return /*#__PURE__*/_jsx("li", _extends({}, otherProps, {
-      children: getOptionLabel(option)
-    }), key);
+    // Need to clearly apply key because of https://github.com/vercel/next.js/issues/55642
+    return /*#__PURE__*/_createElement("li", _extends({}, props2, {
+      key: props2.key
+    }), getOptionLabel(option));
   };
   var renderOption = renderOptionProp || defaultRenderOption;
   var renderListOption = function renderListOption(option, index) {

package/legacy/Avatar/Avatar.js

@@ -1,5 +1,6 @@
 'use client';
 
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
@@ -10,6 +11,7 @@ import styled from '../styles/styled';
 import useThemeProps from '../styles/useThemeProps';
 import Person from '../internal/svg-icons/Person';
 import { getAvatarUtilityClass } from './avatarClasses';
+import useSlot from '../utils/useSlot';
 import { jsx as _jsx } from "react/jsx-runtime";
 var useUtilityClasses = function useUtilityClasses(ownerState) {
   var classes = ownerState.classes,
@@ -151,13 +153,17 @@ var Avatar = /*#__PURE__*/React.forwardRef(function Avatar(inProps, ref) {
     className = props.className,
     _props$component = props.component,
     component = _props$component === void 0 ? 'div' : _props$component,
+    _props$slots = props.slots,
+    slots = _props$slots === void 0 ? {} : _props$slots,
+    _props$slotProps = props.slotProps,
+    slotProps = _props$slotProps === void 0 ? {} : _props$slotProps,
     imgProps = props.imgProps,
     sizes = props.sizes,
     src = props.src,
     srcSet = props.srcSet,
     _props$variant = props.variant,
     variant = _props$variant === void 0 ? 'circular' : _props$variant,
-    other = _objectWithoutProperties(props, ["alt", "children", "className", "component", "imgProps", "sizes", "src", "srcSet", "variant"]);
+    other = _objectWithoutProperties(props, ["alt", "children", "className", "component", "slots", "slotProps", "imgProps", "sizes", "src", "srcSet", "variant"]);
   var children = null;
 
   // Use a hook instead of onError on the img element to support server-side rendering.
@@ -173,16 +179,28 @@ var Avatar = /*#__PURE__*/React.forwardRef(function Avatar(inProps, ref) {
     variant: variant
   });
   var classes = useUtilityClasses(ownerState);
+  var _useSlot = useSlot('img', {
+      className: classes.img,
+      elementType: AvatarImg,
+      externalForwardedProps: {
+        slots: slots,
+        slotProps: {
+          img: _extends({}, imgProps, slotProps.img)
+        }
+      },
+      additionalProps: {
+        alt: alt,
+        src: src,
+        srcSet: srcSet,
+        sizes: sizes
+      },
+      ownerState: ownerState
+    }),
+    _useSlot2 = _slicedToArray(_useSlot, 2),
+    ImgSlot = _useSlot2[0],
+    imgSlotProps = _useSlot2[1];
   if (hasImgNotFailing) {
-    children = /*#__PURE__*/_jsx(AvatarImg, _extends({
-      alt: alt,
-      srcSet: srcSet,
-      src: src,
-      sizes: sizes,
-      ownerState: ownerState,
-      className: classes.img
-    }, imgProps));
-
+    children = /*#__PURE__*/_jsx(ImgSlot, _extends({}, imgSlotProps));
     // We only render valid children, non valid children are rendered with a fallback
     // We consider that invalid children are all falsy values, except 0, which is valid.
   } else if (!!childrenProp || childrenProp === 0) {
@@ -235,12 +253,27 @@ process.env.NODE_ENV !== "production" ? Avatar.propTypes /* remove-proptypes */
   /**
    * [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attributes) applied to the `img` element if the component is used to display an image.
    * It can be used to listen for the loading error event.
+   * @deprecated Use `slotProps.img` instead. This prop will be removed in v7. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/).
    */
   imgProps: PropTypes.object,
   /**
    * The `sizes` attribute for the `img` element.
    */
   sizes: PropTypes.string,
+  /**
+   * The props used for each slot inside.
+   * @default {}
+   */
+  slotProps: PropTypes.shape({
+    img: PropTypes.oneOfType([PropTypes.func, PropTypes.object])
+  }),
+  /**
+   * The components used for each slot inside.
+   * @default {}
+   */
+  slots: PropTypes.shape({
+    img: PropTypes.elementType
+  }),
   /**
    * The `src` attribute for the `img` element.
    */

package/legacy/Divider/Divider.js

@@ -226,7 +226,7 @@ process.env.NODE_ENV !== "production" ? Divider.propTypes /* remove-proptypes */
   /**
    * If `true`, the divider will have a lighter color.
    * @default false
-   * @deprecated Use <Divider sx={{ bgcolor: '#eee' }} /> (or any color) instead.
+   * @deprecated Use <Divider sx={{ opacity: 0.6 }} /> (or any opacity or color) instead. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/)
    */
   light: PropTypes.bool,
   /**

package/legacy/TableRow/TableRow.js

@@ -89,7 +89,7 @@ process.env.NODE_ENV !== "production" ? TableRow.propTypes /* remove-proptypes *
   // │    To update them, edit the d.ts file and run `pnpm proptypes`.     │
   // └─────────────────────────────────────────────────────────────────────┘
   /**
-   * Should be valid <tr> children such as `TableCell`.
+   * Should be valid `<tr>` children such as `TableCell`.
    */
   children: PropTypes.node,
   /**

package/legacy/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/material v5.15.8
+ * @mui/material v5.15.10
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/modern/Autocomplete/Autocomplete.js

@@ -4,8 +4,7 @@ import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWith
 import _extends from "@babel/runtime/helpers/esm/extends";
 var _ClearIcon, _ArrowDropDownIcon;
 const _excluded = ["autoComplete", "autoHighlight", "autoSelect", "blurOnSelect", "ChipProps", "className", "clearIcon", "clearOnBlur", "clearOnEscape", "clearText", "closeText", "componentsProps", "defaultValue", "disableClearable", "disableCloseOnSelect", "disabled", "disabledItemsFocusable", "disableListWrap", "disablePortal", "filterOptions", "filterSelectedOptions", "forcePopupIcon", "freeSolo", "fullWidth", "getLimitTagsText", "getOptionDisabled", "getOptionKey", "getOptionLabel", "isOptionEqualToValue", "groupBy", "handleHomeEndKeys", "id", "includeInputInList", "inputValue", "limitTags", "ListboxComponent", "ListboxProps", "loading", "loadingText", "multiple", "noOptionsText", "onChange", "onClose", "onHighlightChange", "onInputChange", "onOpen", "open", "openOnFocus", "openText", "options", "PaperComponent", "PopperComponent", "popupIcon", "readOnly", "renderGroup", "renderInput", "renderOption", "renderTags", "selectOnFocus", "size", "slotProps", "value"],
-  _excluded2 = ["ref"],
-  _excluded3 = ["key"];
+  _excluded2 = ["ref"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
@@ -30,6 +29,7 @@ import capitalize from '../utils/capitalize';
 import useForkRef from '../utils/useForkRef';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
+import { createElement as _createElement } from "react";
 const useUtilityClasses = ownerState => {
   const {
     classes,
@@ -524,13 +524,10 @@ const Autocomplete = /*#__PURE__*/React.forwardRef(function Autocomplete(inProps
   }, params.key);
   const renderGroup = renderGroupProp || defaultRenderGroup;
   const defaultRenderOption = (props2, option) => {
-    const {
-        key
-      } = props2,
-      otherProps = _objectWithoutPropertiesLoose(props2, _excluded3);
-    return /*#__PURE__*/_jsx("li", _extends({}, otherProps, {
-      children: getOptionLabel(option)
-    }), key);
+    // Need to clearly apply key because of https://github.com/vercel/next.js/issues/55642
+    return /*#__PURE__*/_createElement("li", _extends({}, props2, {
+      key: props2.key
+    }), getOptionLabel(option));
   };
   const renderOption = renderOptionProp || defaultRenderOption;
   const renderListOption = (option, index) => {

package/modern/Avatar/Avatar.js

@@ -2,7 +2,7 @@
 
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["alt", "children", "className", "component", "imgProps", "sizes", "src", "srcSet", "variant"];
+const _excluded = ["alt", "children", "className", "component", "slots", "slotProps", "imgProps", "sizes", "src", "srcSet", "variant"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
@@ -11,6 +11,7 @@ import styled from '../styles/styled';
 import useThemeProps from '../styles/useThemeProps';
 import Person from '../internal/svg-icons/Person';
 import { getAvatarUtilityClass } from './avatarClasses';
+import useSlot from '../utils/useSlot';
 import { jsx as _jsx } from "react/jsx-runtime";
 const useUtilityClasses = ownerState => {
   const {
@@ -150,6 +151,8 @@ const Avatar = /*#__PURE__*/React.forwardRef(function Avatar(inProps, ref) {
       children: childrenProp,
       className,
       component = 'div',
+      slots = {},
+      slotProps = {},
       imgProps,
       sizes,
       src,
@@ -172,16 +175,25 @@ const Avatar = /*#__PURE__*/React.forwardRef(function Avatar(inProps, ref) {
     variant
   });
   const classes = useUtilityClasses(ownerState);
+  const [ImgSlot, imgSlotProps] = useSlot('img', {
+    className: classes.img,
+    elementType: AvatarImg,
+    externalForwardedProps: {
+      slots,
+      slotProps: {
+        img: _extends({}, imgProps, slotProps.img)
+      }
+    },
+    additionalProps: {
+      alt,
+      src,
+      srcSet,
+      sizes
+    },
+    ownerState
+  });
   if (hasImgNotFailing) {
-    children = /*#__PURE__*/_jsx(AvatarImg, _extends({
-      alt: alt,
-      srcSet: srcSet,
-      src: src,
-      sizes: sizes,
-      ownerState: ownerState,
-      className: classes.img
-    }, imgProps));
-
+    children = /*#__PURE__*/_jsx(ImgSlot, _extends({}, imgSlotProps));
     // We only render valid children, non valid children are rendered with a fallback
     // We consider that invalid children are all falsy values, except 0, which is valid.
   } else if (!!childrenProp || childrenProp === 0) {
@@ -234,12 +246,27 @@ process.env.NODE_ENV !== "production" ? Avatar.propTypes /* remove-proptypes */
   /**
    * [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attributes) applied to the `img` element if the component is used to display an image.
    * It can be used to listen for the loading error event.
+   * @deprecated Use `slotProps.img` instead. This prop will be removed in v7. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/).
    */
   imgProps: PropTypes.object,
   /**
    * The `sizes` attribute for the `img` element.
    */
   sizes: PropTypes.string,
+  /**
+   * The props used for each slot inside.
+   * @default {}
+   */
+  slotProps: PropTypes.shape({
+    img: PropTypes.oneOfType([PropTypes.func, PropTypes.object])
+  }),
+  /**
+   * The components used for each slot inside.
+   * @default {}
+   */
+  slots: PropTypes.shape({
+    img: PropTypes.elementType
+  }),
   /**
    * The `src` attribute for the `img` element.
    */

package/modern/Divider/Divider.js

@@ -221,7 +221,7 @@ process.env.NODE_ENV !== "production" ? Divider.propTypes /* remove-proptypes */
   /**
    * If `true`, the divider will have a lighter color.
    * @default false
-   * @deprecated Use <Divider sx={{ bgcolor: '#eee' }} /> (or any color) instead.
+   * @deprecated Use <Divider sx={{ opacity: 0.6 }} /> (or any opacity or color) instead. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/)
    */
   light: PropTypes.bool,
   /**

package/modern/TableRow/TableRow.js

@@ -93,7 +93,7 @@ process.env.NODE_ENV !== "production" ? TableRow.propTypes /* remove-proptypes *
   // │    To update them, edit the d.ts file and run `pnpm proptypes`.     │
   // └─────────────────────────────────────────────────────────────────────┘
   /**
-   * Should be valid <tr> children such as `TableCell`.
+   * Should be valid `<tr>` children such as `TableCell`.
    */
   children: PropTypes.node,
   /**

package/modern/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/material v5.15.8
+ * @mui/material v5.15.10
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the