@mui/material 5.15.8 → 5.15.9

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

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

@@ -1,5 +1,5 @@
 /**
- * @mui/material v5.15.8
+ * @mui/material v5.15.9
  *
  * @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/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/index.js

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

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/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/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/material v5.15.8
+ * @mui/material v5.15.9
  *
  * @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.9",
   "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/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",
+    "@mui/utils": "^5.15.9",
+    "@mui/system": "^5.15.9",
+    "@mui/core-downloads-tracker": "^5.15.9"
   },
   "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.9
  *
  * @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) {
@@ -29213,7 +29212,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,
     /**