@mui/material 5.15.8 → 5.15.10

package/node/Autocomplete/Autocomplete.js

@@ -14,7 +14,8 @@ Object.defineProperty(exports, "createFilterOptions", {
 exports.default = void 0;
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var React = _interopRequireWildcard(require("react"));
+var _react = _interopRequireWildcard(require("react"));
+var React = _react;
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _clsx = _interopRequireDefault(require("clsx"));
 var _utils = require("@mui/utils");
@@ -39,8 +40,7 @@ var _useForkRef = _interopRequireDefault(require("../utils/useForkRef"));
 var _jsxRuntime = require("react/jsx-runtime");
 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"];
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 const useUtilityClasses = ownerState => {
@@ -540,13 +540,10 @@ const Autocomplete = /*#__PURE__*/React.forwardRef(function Autocomplete(inProps
   }, params.key);
   const renderGroup = renderGroupProp || defaultRenderGroup;
   const defaultRenderOption = (props2, option) => {
-    const {
-        key
-      } = props2,
-      otherProps = (0, _objectWithoutPropertiesLoose2.default)(props2, _excluded3);
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)("li", (0, _extends2.default)({}, otherProps, {
-      children: getOptionLabel(option)
-    }), key);
+    // Need to clearly apply key because of https://github.com/vercel/next.js/issues/55642
+    return /*#__PURE__*/(0, _react.createElement)("li", (0, _extends2.default)({}, props2, {
+      key: props2.key
+    }), getOptionLabel(option));
   };
   const renderOption = renderOptionProp || defaultRenderOption;
   const renderListOption = (option, index) => {

package/node/Avatar/Avatar.js

@@ -16,8 +16,9 @@ var _styled = _interopRequireDefault(require("../styles/styled"));
 var _useThemeProps = _interopRequireDefault(require("../styles/useThemeProps"));
 var _Person = _interopRequireDefault(require("../internal/svg-icons/Person"));
 var _avatarClasses = require("./avatarClasses");
+var _useSlot = _interopRequireDefault(require("../utils/useSlot"));
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["alt", "children", "className", "component", "imgProps", "sizes", "src", "srcSet", "variant"];
+const _excluded = ["alt", "children", "className", "component", "slots", "slotProps", "imgProps", "sizes", "src", "srcSet", "variant"];
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 const useUtilityClasses = ownerState => {
@@ -158,6 +159,8 @@ const Avatar = /*#__PURE__*/React.forwardRef(function Avatar(inProps, ref) {
       children: childrenProp,
       className,
       component = 'div',
+      slots = {},
+      slotProps = {},
       imgProps,
       sizes,
       src,
@@ -180,16 +183,25 @@ const Avatar = /*#__PURE__*/React.forwardRef(function Avatar(inProps, ref) {
     variant
   });
   const classes = useUtilityClasses(ownerState);
+  const [ImgSlot, imgSlotProps] = (0, _useSlot.default)('img', {
+    className: classes.img,
+    elementType: AvatarImg,
+    externalForwardedProps: {
+      slots,
+      slotProps: {
+        img: (0, _extends2.default)({}, imgProps, slotProps.img)
+      }
+    },
+    additionalProps: {
+      alt,
+      src,
+      srcSet,
+      sizes
+    },
+    ownerState
+  });
   if (hasImgNotFailing) {
-    children = /*#__PURE__*/(0, _jsxRuntime.jsx)(AvatarImg, (0, _extends2.default)({
-      alt: alt,
-      srcSet: srcSet,
-      src: src,
-      sizes: sizes,
-      ownerState: ownerState,
-      className: classes.img
-    }, imgProps));
-
+    children = /*#__PURE__*/(0, _jsxRuntime.jsx)(ImgSlot, (0, _extends2.default)({}, 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) {
@@ -242,12 +254,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.default.object,
   /**
    * The `sizes` attribute for the `img` element.
    */
   sizes: _propTypes.default.string,
+  /**
+   * The props used for each slot inside.
+   * @default {}
+   */
+  slotProps: _propTypes.default.shape({
+    img: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object])
+  }),
+  /**
+   * The components used for each slot inside.
+   * @default {}
+   */
+  slots: _propTypes.default.shape({
+    img: _propTypes.default.elementType
+  }),
   /**
    * The `src` attribute for the `img` element.
    */

package/node/Divider/Divider.js

@@ -229,7 +229,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.default.bool,
   /**

package/node/TableRow/TableRow.js

@@ -101,7 +101,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.default.node,
   /**

package/node/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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/material",
-  "version": "5.15.8",
+  "version": "5.15.10",
   "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.",
@@ -30,23 +30,22 @@
     "@babel/runtime": "^7.23.9",
     "@types/react-transition-group": "^4.4.10",
     "clsx": "^2.1.0",
-    "csstype": "^3.1.2",
+    "csstype": "^3.1.3",
     "prop-types": "^15.8.1",
     "react-is": "^18.2.0",
     "react-transition-group": "^4.4.5",
-    "@mui/base": "5.0.0-beta.35",
+    "@mui/core-downloads-tracker": "^5.15.10",
+    "@mui/system": "^5.15.9",
+    "@mui/utils": "^5.15.9",
     "@mui/types": "^7.2.13",
-    "@mui/core-downloads-tracker": "^5.15.8",
-    "@mui/utils": "^5.15.8",
-    "@mui/system": "^5.15.8"
+    "@mui/base": "5.0.0-beta.36"
   },
   "peerDependencies": {
     "@emotion/react": "^11.5.0",
     "@emotion/styled": "^11.3.0",
     "@types/react": "^17.0.0 || ^18.0.0",
     "react": "^17.0.0 || ^18.0.0",
-    "react-dom": "^17.0.0 || ^18.0.0",
-    "@mui/zero-runtime": "^0.0.1"
+    "react-dom": "^17.0.0 || ^18.0.0"
   },
   "peerDependenciesMeta": {
     "@types/react": {

package/styles/experimental_extendTheme.d.ts

@@ -320,15 +320,16 @@ type Split<T, K extends keyof T = keyof T> = K extends string | number
   ? { [k in K]: Exclude<T[K], undefined> }
   : never;
 
-type ConcatDeep<T> = T extends Record<string | number, infer V>
-  ? keyof T extends string | number
-    ? V extends string | number
-      ? keyof T
-      : keyof V extends string | number
-      ? `${keyof T}-${ConcatDeep<Split<V>>}`
+type ConcatDeep<T> =
+  T extends Record<string | number, infer V>
+    ? keyof T extends string | number
+      ? V extends string | number
+        ? keyof T
+        : keyof V extends string | number
+          ? `${keyof T}-${ConcatDeep<Split<V>>}`
+          : never
       : never
-    : never
-  : never;
+    : never;
 
 /**
  * Does not work for these cases:

package/umd/material-ui.development.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
@@ -23270,11 +23270,10 @@
     };
     var renderGroup = renderGroupProp || defaultRenderGroup;
     var defaultRenderOption = function defaultRenderOption(props2, option) {
-      var key = props2.key,
-        otherProps = _objectWithoutProperties(props2, ["key"]);
-      return /*#__PURE__*/jsxRuntime_1("li", _extends({}, otherProps, {
-        children: getOptionLabel(option)
-      }), key);
+      // Need to clearly apply key because of https://github.com/vercel/next.js/issues/55642
+      return /*#__PURE__*/React.createElement("li", _extends({}, props2, {
+        key: props2.key
+      }), getOptionLabel(option));
     };
     var renderOption = renderOptionProp || defaultRenderOption;
     var renderListOption = function renderListOption(option, index) {
@@ -23975,13 +23974,17 @@
       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.
@@ -23997,16 +24000,28 @@
       variant: variant
     });
     var classes = useUtilityClasses$1w(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__*/jsxRuntime_1(AvatarImg, _extends({
-        alt: alt,
-        srcSet: srcSet,
-        src: src,
-        sizes: sizes,
-        ownerState: ownerState,
-        className: classes.img
-      }, imgProps));
-
+      children = /*#__PURE__*/jsxRuntime_1(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) {
@@ -24059,12 +24074,27 @@
     /**
      * [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.
      */
@@ -29213,7 +29243,7 @@
     /**
      * 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,
     /**
@@ -48113,7 +48143,7 @@
     // │    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,
     /**