@mui/material 5.14.18 → 5.14.20

package/Autocomplete/Autocomplete.js

@@ -3,7 +3,7 @@
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 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", "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"],
+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"];
 import * as React from 'react';
@@ -830,6 +830,14 @@ process.env.NODE_ENV !== "production" ? Autocomplete.propTypes /* remove-proptyp
    * @returns {boolean}
    */
   getOptionDisabled: PropTypes.func,
+  /**
+   * Used to determine the key for a given option.
+   * This can be useful when the labels of options are not unique (since labels are used as keys by default).
+   *
+   * @param {Value} option The option to get the key for.
+   * @returns {string | number}
+   */
+  getOptionKey: PropTypes.func,
   /**
    * Used to determine the string value for a given option.
    * It's used to fill the input (and the list box options if `renderOption` is not provided).

package/Box/Box.js

@@ -5,11 +5,12 @@ import PropTypes from 'prop-types';
 import { unstable_ClassNameGenerator as ClassNameGenerator } from '../className';
 import { createTheme } from '../styles';
 import THEME_ID from '../styles/identifier';
+import boxClasses from './boxClasses';
 const defaultTheme = createTheme();
 const Box = createBox({
   themeId: THEME_ID,
   defaultTheme,
-  defaultClassName: 'MuiBox-root',
+  defaultClassName: boxClasses.root,
   generateClassName: ClassNameGenerator.generate
 });
 process.env.NODE_ENV !== "production" ? Box.propTypes /* remove-proptypes */ = {

package/Box/boxClasses.d.ts

@@ -0,0 +1,7 @@
+export interface BoxClasses {
+    /** Styles applied to the root element. */
+    root: string;
+}
+export type BoxClassKey = keyof BoxClasses;
+declare const boxClasses: BoxClasses;
+export default boxClasses;

package/Box/boxClasses.js

@@ -0,0 +1,3 @@
+import { unstable_generateUtilityClasses as generateUtilityClasses } from '@mui/utils';
+const boxClasses = generateUtilityClasses('MuiBox', ['root']);
+export default boxClasses;

package/Box/index.d.ts

@@ -1,2 +1,5 @@
 export { default } from './Box';
 export * from './Box';
+
+export { default as boxClasses } from './boxClasses';
+export * from './boxClasses';

package/Box/index.js

@@ -1,3 +1,5 @@
 'use client';
 
-export { default } from './Box';
+export { default } from './Box';
+export { default as boxClasses } from './boxClasses';
+export * from './boxClasses';

package/CHANGELOG.md

@@ -1,5 +1,130 @@
 # [Versions](https://mui.com/versions/)
 
+## 5.14.20
+
+<!-- generated comparing v5.14.19..master -->
+
+_Dec 5, 2023_
+
+A big thanks to the 14 contributors who made this release possible.
+This release was mostly about 🐛 bug fixes and 📚 documentation improvements.
+
+### `@mui/material-next@6.0.0-alpha.112`
+
+- &#8203;<!-- 07 -->[Menu] Enable again the usage of the autoFocus prop (#39960) @mnajdova
+- &#8203;<!-- 06 -->[ProgressIndicator] Apply MD3 style to `CircularProgress` (#39825) @lhilgert9
+
+### Docs
+
+- &#8203;<!-- 15 -->Remove outdated showcase (#40063) @oliviertassinari
+- &#8203;<!-- 14 -->Support yaml as prism language (#40044) @Janpot
+- &#8203;<!-- 12 -->[material-ui] Fix SearchAppBar width on `sm` screens (#40049) @DiegoAndai
+- &#8203;<!-- 11 -->[material-ui] Update the basic Grid section copy (#40035) @REX500
+- &#8203;<!-- 10 -->[material-ui] Add a react-admin example project (#39972) @fzaninotto
+- &#8203;<!-- 09 -->[material-ui][TextField] Add a performance section (#39692) @anle9650
+- &#8203;<!-- 05 -->[material-ui][tabs] Refine scrollable tabs description (#40037) @zanivan
+- &#8203;<!-- 08 -->[system] Fix typo on the CSS theme variables page (#40040) @caweidmann
+
+### Core
+
+- &#8203;<!-- 17 -->[blog] Fix scrollbar on mobile (#40057) @oliviertassinari
+- &#8203;<!-- 16 -->[blog] Fix link to charts getting started page (#40043) @alexfauquette
+- &#8203;<!-- 13 -->[docs-infra] Simplify CSS classes extraction in API docs generator (#39808) @michaldudak
+- &#8203;<!-- 04 -->[website] Polish dark mode colors (#40052) @danilo-leal
+- &#8203;<!-- 03 -->[website] Add why Design Engineer for data grid (#40016) @oliviertassinari
+- &#8203;<!-- 02 -->[website] Add stray fixes to the Base UI page (#40051) @danilo-leal
+- &#8203;<!-- 01 -->[website] Revise the Developer Advocate job posting (#39210) @samuelsycamore
+
+All contributors of this release in alphabetical order: @alexfauquette, @anle9650, @caweidmann, @danilo-leal, @DiegoAndai, @fzaninotto, @Janpot, @lhilgert9, @michaldudak, @mnajdova, @oliviertassinari, @REX500, @samuelsycamore, @zanivan
+
+## 5.14.19
+
+<!-- generated comparing v5.14.18..master -->
+
+_Nov 29, 2023_
+
+A big thanks to the 18 contributors who made this release possible. Here are some highlights ✨:
+
+- 🐛 Fix Material UI Autocomplete behavior when there are duplicate labels (#36426) @islandryu
+- 🚀 Added Material You Linear Progress to `material-next` package (#39807) @lhilgert9
+
+### `@mui/material@5.14.19`
+
+- &#8203;<!-- 44 -->[Autocomplete] Fix behavior when there are duplicate labels (#36426) @islandryu
+- &#8203;<!-- 37 -->[Box] Added boxClasses (#39889) @sadik-malik
+- &#8203;<!-- 18 -->[FilledInput] Fix slot props deepmerge order (#38922) @dhaub-exelixis
+- &#8203;<!-- 12 -->[Select] Add id to hidden input element (#39414) @DarhkVoyd
+- &#8203;<!-- 11 -->[Select] Remove unnecessary picking of `onChange` type from SelectInputProps (#39891) @ZeeshanTamboli
+
+### `@mui/base@5.0.0-beta.25`
+
+- &#8203;<!-- 46 -->[Menu] Fix navigation of items when 1st item is disabled (#39828) @sai6855
+- &#8203;<!-- 42 -->[Modal] Refine demos (#39824) @zanivan
+- &#8203;<!-- 41 -->[NumberInput] Implement `numberInputReducer` (#38723) @mj12albert
+- &#8203;<!-- 40 -->[useNumberInput] Fix change handlers passed through slotProps (#39407) @mj12albert
+
+### `@mui/joy@5.0.0-beta.16`
+
+- &#8203;<!-- 38 -->[Box] Added boxClasses (#39895) @sadik-malik
+
+### `@mui/system@5.14.19`
+
+- &#8203;<!-- 36 -->[Box] Added boxClasses (#39896) @sadik-malik
+- &#8203;<!-- 09 -->Add outlineColor to defaultSxConfig (#39962) @brijeshb42
+
+### `@mui/types@7.2.10`
+
+- &#8203;<!-- 08 -->Add `PartiallyRequired` type (#39939) @lhilgert9
+
+### `@mui/material-next@6.0.0-alpha.111`
+
+- &#8203;<!-- 47 -->[ProgressIndicator] Apply MD3 style to `LinearProgress` (#39807) @lhilgert9
+- &#8203;<!-- 17 -->[FormHelperText] Add FormHelperText component (#39503) @mj12albert
+- &#8203;<!-- 16 -->[IconButton] Copy IconButton to material-next (#39945) @mj12albert
+- &#8203;<!-- 13 -->[Switch] Copy `Switch` to material next (#39887) @lhilgert9
+
+### Docs
+
+- &#8203;<!-- 19 -->[material-ui] Fix theme prop in v5 migration guide (#39976) @sai6855
+- &#8203;<!-- 43 -->[base-ui] Improve Next.js Link docs (#39838) @oliviertassinari
+- &#8203;<!-- 39 -->[base-ui] Export Base UI theme in stylesheet (#39694) @mnajdova
+- &#8203;<!-- 52 -->[joy-ui] Fix the date min & max slot props values on the Input demo (#40018) @avikalpg
+- &#8203;<!-- 35 -->[joy-ui][ButtonGroup] Fix orientation prop description (#39876) @sai6855
+- &#8203;<!-- 25 -->[joy-ui] Update gif from the Dark Mode Optimization page (#39726) @danilo-leal
+- &#8203;<!-- 24 -->[joy-ui] Fix h1 template (#40017) @oliviertassinari
+- &#8203;<!-- 23 -->[joy-ui] Fix wrong product id @oliviertassinari
+- &#8203;<!-- 22 -->[joy-ui] Fixes in theme scoping documentation (#39899) @ZeeshanTamboli
+- &#8203;<!-- 21 -->[joy-ui] Refine the Email, Teams and Files templates (#39579) @zanivan
+- &#8203;<!-- 15 -->[joy-ui][templates] Fix layout shift on Profile template (#40022) @zanivan
+- &#8203;<!-- 14 -->[joy-ui][Templates] Update thumbnails (#39938) @zanivan
+- &#8203;<!-- 20 -->[material-next] Add contributing guide (#39944) @mj12albert
+- &#8203;<!-- 51 -->End v6 blogpost notification (#39879) @joserodolfofreitas
+- &#8203;<!-- 31 -->Fix nested CSS warning (#39932) @mnajdova
+- &#8203;<!-- 30 -->Make integration searchable (#39967) @oliviertassinari
+- &#8203;<!-- 29 -->Fix use of quote in markdown (#39953) @oliviertassinari
+- &#8203;<!-- 28 -->Show design links on Joy UI (#39955) @oliviertassinari
+- &#8203;<!-- 27 -->Restore Algolia results when searching for "Figma" (#39956) @oliviertassinari
+- &#8203;<!-- 26 -->Fix two tone icon dark mode color (#39868) @mnajdova
+
+### Core
+
+- &#8203;<!-- 45 -->Improve lerna's renovate package rules (#40029) @DiegoAndai
+- &#8203;<!-- 34 -->Downgrade lerna to 7.2.0 (#40026) @DiegoAndai
+- &#8203;<!-- 32 -->Rename OpenCollective @oliviertassinari
+- &#8203;<!-- 48 -->[docs-infra] Env variables should be string (#39991) @oliviertassinari
+- &#8203;<!-- 10 -->[Portal] Improve docs for container prop (#39180) @oliviertassinari
+- &#8203;<!-- 50 -->[website] Update pricing table (#40023) @cherniavskii
+- &#8203;<!-- 49 -->[website][docs] Update the product identifier menu and X page (#39832) @danilo-leal
+- &#8203;<!-- 07 -->[website] Mark TreeView and Charts as stable (#39975) @flaviendelangle
+- &#8203;<!-- 06 -->[website] Update career page (#40015) @oliviertassinari
+- &#8203;<!-- 05 -->[website] Sync about dataset @oliviertassinari
+- &#8203;<!-- 04 -->[website] Fix 301 redirection to X tree-view @oliviertassinari
+- &#8203;<!-- 03 -->[website] Change redirection prefixes @oliviertassinari
+- &#8203;<!-- 02 -->[website] Fix 301 link @oliviertassinari
+- &#8203;<!-- 01 -->[website] Fix modal not being closed with the escape key on the Base UI page (#39880) @ZeeshanTamboli
+
+All contributors of this release in alphabetical order: @avikalpg, @brijeshb42, @cherniavskii, @danilo-leal, @DarhkVoyd, @dhaub-exelixis, @DiegoAndai, @flaviendelangle, @islandryu, @joserodolfofreitas, @lhilgert9, @mj12albert, @mnajdova, @oliviertassinari, @sadik-malik, @sai6855, @zanivan, @ZeeshanTamboli
+
 ## 5.14.18
 
 <!-- generated comparing v5.14.17..master -->
@@ -10204,7 +10329,7 @@ A big thanks to the 26 contributors who made this release possible. Here are som
   This is a follow-up effort after we have merged `material-ui-pickers`. The components are written in TypeScript which required us to upgrade our infra.
 - 👌 Improve the Slider thumb and track animation (#24968) @remyoudemans.
   The thumb is now moving with a light transition between different values unless it's dragged.
-  <img src="https://user-images.githubusercontent.com/3165635/109394906-b7405a00-7929-11eb-829a-3b5246c30c08.gif" width="412" height="110" />
+  <img src="https://user-images.githubusercontent.com/3165635/109394906-b7405a00-7929-11eb-829a-3b5246c30c08.gif" width="412" height="110" alt="thumb-animation" />
 - 💅 Convert 5 components with custom colors support (#25099, #25088) @mngu.
   This change makes it easier to leverage custom palettes
 - And many more 🐛 bug fixes and 📚 improvements.

package/Chip/Chip.js

@@ -358,10 +358,10 @@ const Chip = /*#__PURE__*/React.forwardRef(function Chip(inProps, ref) {
   }) : {};
   let deleteIcon = null;
   if (onDelete) {
-    deleteIcon = deleteIconProp && /*#__PURE__*/React.isValidElement(deleteIconProp) ? /*#__PURE__*/React.cloneElement(deleteIconProp, {
+    deleteIcon = deleteIconProp && /*#__PURE__*/React.isValidElement(deleteIconProp) ? ( /*#__PURE__*/React.cloneElement(deleteIconProp, {
       className: clsx(deleteIconProp.props.className, classes.deleteIcon),
       onClick: handleDeleteIconClick
-    }) : /*#__PURE__*/_jsx(CancelIcon, {
+    })) : /*#__PURE__*/_jsx(CancelIcon, {
       className: clsx(classes.deleteIcon),
       onClick: handleDeleteIconClick
     });

package/FilledInput/FilledInput.js

@@ -215,7 +215,7 @@ const FilledInput = /*#__PURE__*/React.forwardRef(function FilledInput(inProps,
       ownerState
     }
   };
-  const componentsProps = (slotProps != null ? slotProps : componentsPropsProp) ? deepmerge(slotProps != null ? slotProps : componentsPropsProp, filledInputComponentsProps) : filledInputComponentsProps;
+  const componentsProps = (slotProps != null ? slotProps : componentsPropsProp) ? deepmerge(filledInputComponentsProps, slotProps != null ? slotProps : componentsPropsProp) : filledInputComponentsProps;
   const RootSlot = (_ref = (_slots$root = slots.root) != null ? _slots$root : components.Root) != null ? _ref : FilledInputRoot;
   const InputSlot = (_ref2 = (_slots$input = slots.input) != null ? _slots$input : components.Input) != null ? _ref2 : FilledInputInput;
   return /*#__PURE__*/_jsx(InputBase, _extends({

package/InputAdornment/InputAdornment.js

@@ -114,10 +114,10 @@ const InputAdornment = /*#__PURE__*/React.forwardRef(function InputAdornment(inP
         color: "text.secondary",
         children: children
       }) : /*#__PURE__*/_jsxs(React.Fragment, {
-        children: [position === 'start' ? /* notranslate needed while Google Translate will not fix zero-width space issue */_span || (_span = /*#__PURE__*/_jsx("span", {
+        children: [position === 'start' ? ( /* notranslate needed while Google Translate will not fix zero-width space issue */_span || (_span = /*#__PURE__*/_jsx("span", {
           className: "notranslate",
           children: "\u200B"
-        })) : null, children]
+        }))) : null, children]
       })
     }))
   });

package/InputLabel/InputLabel.js

@@ -105,7 +105,11 @@ const InputLabelRoot = styled(FormLabel, {
   // but it feels a better when it bleeds a bit on the left, so 32px.
   maxWidth: 'calc(133% - 32px)',
   transform: 'translate(14px, -9px) scale(0.75)'
-})));
+}), ownerState.variant === 'standard' && {
+  '&:not(label) + div': {
+    marginTop: 16
+  }
+}));
 const InputLabel = /*#__PURE__*/React.forwardRef(function InputLabel(inProps, ref) {
   const props = useThemeProps({
     name: 'MuiInputLabel',

package/Modal/Modal.d.ts

@@ -93,6 +93,9 @@ export interface ModalOwnProps {
    * An HTML element or function that returns one.
    * The `container` will have the portal children appended to it.
    *
+   * You can also provide a callback, which is called in a React layout effect.
+   * This lets you set the container from a ref, and also makes server-side rendering possible.
+   *
    * By default, it uses the body of the top-level document object,
    * so it's simply `document.body` most of the time.
    */

package/Modal/Modal.js

@@ -276,6 +276,9 @@ process.env.NODE_ENV !== "production" ? Modal.propTypes /* remove-proptypes */ =
    * An HTML element or function that returns one.
    * The `container` will have the portal children appended to it.
    *
+   * You can also provide a callback, which is called in a React layout effect.
+   * This lets you set the container from a ref, and also makes server-side rendering possible.
+   *
    * By default, it uses the body of the top-level document object,
    * so it's simply `document.body` most of the time.
    */

package/Popper/Popper.js

@@ -117,6 +117,9 @@ process.env.NODE_ENV !== "production" ? Popper.propTypes /* remove-proptypes */
    * An HTML element or function that returns one.
    * The `container` will have the portal children appended to it.
    *
+   * You can also provide a callback, which is called in a React layout effect.
+   * This lets you set the container from a ref, and also makes server-side rendering possible.
+   *
    * By default, it uses the body of the top-level document object,
    * so it's simply `document.body` most of the time.
    */

package/Select/Select.d.ts

@@ -11,8 +11,7 @@ export { SelectChangeEvent };
 
 export interface SelectProps<Value = unknown>
   extends StandardProps<InputProps, 'value' | 'onChange'>,
-    Omit<OutlinedInputProps, 'value' | 'onChange'>,
-    Pick<SelectInputProps<Value>, 'onChange'> {
+    Omit<OutlinedInputProps, 'value' | 'onChange'> {
   /**
    * If `true`, the width of the popover will automatically be set according to the items inside the
    * menu, otherwise it will be at least the width of the select input.

package/Select/SelectInput.js

@@ -435,6 +435,7 @@ const SelectInput = /*#__PURE__*/React.forwardRef(function SelectInput(props, re
   const classes = useUtilityClasses(ownerState);
   const paperProps = _extends({}, MenuProps.PaperProps, (_MenuProps$slotProps = MenuProps.slotProps) == null ? void 0 : _MenuProps$slotProps.paper);
   const listboxId = useId();
+  const hiddenInputId = useId();
   return /*#__PURE__*/_jsxs(React.Fragment, {
     children: [/*#__PURE__*/_jsx(SelectSelect, _extends({
       ref: handleDisplayRef,
@@ -465,7 +466,7 @@ const SelectInput = /*#__PURE__*/React.forwardRef(function SelectInput(props, re
     })), /*#__PURE__*/_jsx(SelectNativeInput, _extends({
       "aria-invalid": error,
       value: Array.isArray(value) ? value.join(',') : value,
-      name: name,
+      name: name != null ? name : hiddenInputId,
       ref: inputRef,
       "aria-hidden": true,
       onChange: handleChange,

package/StepButton/StepButton.js

@@ -81,7 +81,7 @@ const StepButton = /*#__PURE__*/React.forwardRef(function StepButton(inProps, re
     icon,
     optional
   };
-  const child = isMuiElement(children, ['StepLabel']) ? /*#__PURE__*/React.cloneElement(children, childProps) : /*#__PURE__*/_jsx(StepLabel, _extends({}, childProps, {
+  const child = isMuiElement(children, ['StepLabel']) ? ( /*#__PURE__*/React.cloneElement(children, childProps)) : /*#__PURE__*/_jsx(StepLabel, _extends({}, childProps, {
     children: children
   }));
   return /*#__PURE__*/_jsx(StepButtonRoot, _extends({

package/index.js

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

package/legacy/Accordion/Accordion.js

@@ -40,12 +40,11 @@ var AccordionRoot = styled(Paper, {
     return [_defineProperty({}, "& .".concat(accordionClasses.region), styles.region), styles.root, !ownerState.square && styles.rounded, !ownerState.disableGutters && styles.gutters];
   }
 })(function (_ref2) {
-  var _ref3;
   var theme = _ref2.theme;
   var transition = {
     duration: theme.transitions.duration.shortest
   };
-  return _ref3 = {
+  return _defineProperty(_defineProperty({
     position: 'relative',
     transition: theme.transitions.create(['margin'], transition),
     overflowAnchor: 'none',
@@ -66,7 +65,7 @@ var AccordionRoot = styled(Paper, {
         display: 'none'
       }
     }
-  }, _defineProperty(_ref3, "&.".concat(accordionClasses.expanded), {
+  }, "&.".concat(accordionClasses.expanded), {
     '&:before': {
       opacity: 0
     },
@@ -81,9 +80,9 @@ var AccordionRoot = styled(Paper, {
         display: 'none'
       }
     }
-  }), _defineProperty(_ref3, "&.".concat(accordionClasses.disabled), {
+  }), "&.".concat(accordionClasses.disabled), {
     backgroundColor: (theme.vars || theme).palette.action.disabledBackground
-  }), _ref3;
+  });
 }, function (_ref4) {
   var theme = _ref4.theme,
     ownerState = _ref4.ownerState;

package/legacy/AccordionSummary/AccordionSummary.js

@@ -34,24 +34,23 @@ var AccordionSummaryRoot = styled(ButtonBase, {
     return styles.root;
   }
 })(function (_ref) {
-  var _extends2;
   var theme = _ref.theme,
     ownerState = _ref.ownerState;
   var transition = {
     duration: theme.transitions.duration.shortest
   };
-  return _extends((_extends2 = {
+  return _extends(_defineProperty(_defineProperty(_defineProperty({
     display: 'flex',
     minHeight: 48,
     padding: theme.spacing(0, 2),
     transition: theme.transitions.create(['min-height', 'background-color'], transition)
-  }, _defineProperty(_extends2, "&.".concat(accordionSummaryClasses.focusVisible), {
+  }, "&.".concat(accordionSummaryClasses.focusVisible), {
     backgroundColor: (theme.vars || theme).palette.action.focus
-  }), _defineProperty(_extends2, "&.".concat(accordionSummaryClasses.disabled), {
+  }), "&.".concat(accordionSummaryClasses.disabled), {
     opacity: (theme.vars || theme).palette.action.disabledOpacity
-  }), _defineProperty(_extends2, "&:hover:not(.".concat(accordionSummaryClasses.disabled, ")"), {
+  }), "&:hover:not(.".concat(accordionSummaryClasses.disabled, ")"), {
     cursor: 'pointer'
-  }), _extends2), !ownerState.disableGutters && _defineProperty({}, "&.".concat(accordionSummaryClasses.expanded), {
+  }), !ownerState.disableGutters && _defineProperty({}, "&.".concat(accordionSummaryClasses.expanded), {
     minHeight: 64
   }));
 });

package/legacy/Autocomplete/Autocomplete.js

@@ -71,47 +71,47 @@ var AutocompleteRoot = styled('div', {
     return [_defineProperty({}, "& .".concat(autocompleteClasses.tag), styles.tag), _defineProperty({}, "& .".concat(autocompleteClasses.tag), styles["tagSize".concat(capitalize(size))]), _defineProperty({}, "& .".concat(autocompleteClasses.inputRoot), styles.inputRoot), _defineProperty({}, "& .".concat(autocompleteClasses.input), styles.input), _defineProperty({}, "& .".concat(autocompleteClasses.input), inputFocused && styles.inputFocused), styles.root, fullWidth && styles.fullWidth, hasPopupIcon && styles.hasPopupIcon, hasClearIcon && styles.hasClearIcon];
   }
 })(function (_ref6) {
-  var _extends2, _$concat, _$concat2, _$concat3, _extends3;
+  var _extends3;
   var ownerState = _ref6.ownerState;
-  return _extends((_extends2 = {}, _defineProperty(_extends2, "&.".concat(autocompleteClasses.focused, " .").concat(autocompleteClasses.clearIndicator), {
+  return _extends(_defineProperty(_defineProperty({}, "&.".concat(autocompleteClasses.focused, " .").concat(autocompleteClasses.clearIndicator), {
     visibility: 'visible'
-  }), _defineProperty(_extends2, '@media (pointer: fine)', _defineProperty({}, "&:hover .".concat(autocompleteClasses.clearIndicator), {
+  }), '@media (pointer: fine)', _defineProperty({}, "&:hover .".concat(autocompleteClasses.clearIndicator), {
     visibility: 'visible'
-  })), _extends2), ownerState.fullWidth && {
+  })), ownerState.fullWidth && {
     width: '100%'
-  }, (_extends3 = {}, _defineProperty(_extends3, "& .".concat(autocompleteClasses.tag), _extends({
+  }, (_extends3 = {}, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_extends3, "& .".concat(autocompleteClasses.tag), _extends({
     margin: 3,
     maxWidth: 'calc(100% - 6px)'
   }, ownerState.size === 'small' && {
     margin: 2,
     maxWidth: 'calc(100% - 4px)'
-  })), _defineProperty(_extends3, "& .".concat(autocompleteClasses.inputRoot), (_$concat = {
+  })), "& .".concat(autocompleteClasses.inputRoot), _defineProperty(_defineProperty(_defineProperty({
     flexWrap: 'wrap'
-  }, _defineProperty(_$concat, ".".concat(autocompleteClasses.hasPopupIcon, "&, .").concat(autocompleteClasses.hasClearIcon, "&"), {
+  }, ".".concat(autocompleteClasses.hasPopupIcon, "&, .").concat(autocompleteClasses.hasClearIcon, "&"), {
     paddingRight: 26 + 4
-  }), _defineProperty(_$concat, ".".concat(autocompleteClasses.hasPopupIcon, ".").concat(autocompleteClasses.hasClearIcon, "&"), {
+  }), ".".concat(autocompleteClasses.hasPopupIcon, ".").concat(autocompleteClasses.hasClearIcon, "&"), {
     paddingRight: 52 + 4
-  }), _defineProperty(_$concat, "& .".concat(autocompleteClasses.input), {
+  }), "& .".concat(autocompleteClasses.input), {
     width: 0,
     minWidth: 30
-  }), _$concat)), _defineProperty(_extends3, "& .".concat(inputClasses.root), {
+  })), "& .".concat(inputClasses.root), {
     paddingBottom: 1,
     '& .MuiInput-input': {
       padding: '4px 4px 4px 0px'
     }
-  }), _defineProperty(_extends3, "& .".concat(inputClasses.root, ".").concat(inputBaseClasses.sizeSmall), _defineProperty({}, "& .".concat(inputClasses.input), {
+  }), "& .".concat(inputClasses.root, ".").concat(inputBaseClasses.sizeSmall), _defineProperty({}, "& .".concat(inputClasses.input), {
     padding: '2px 4px 3px 0'
-  })), _defineProperty(_extends3, "& .".concat(outlinedInputClasses.root), (_$concat2 = {
+  })), "& .".concat(outlinedInputClasses.root), _defineProperty(_defineProperty(_defineProperty(_defineProperty({
     padding: 9
-  }, _defineProperty(_$concat2, ".".concat(autocompleteClasses.hasPopupIcon, "&, .").concat(autocompleteClasses.hasClearIcon, "&"), {
+  }, ".".concat(autocompleteClasses.hasPopupIcon, "&, .").concat(autocompleteClasses.hasClearIcon, "&"), {
     paddingRight: 26 + 4 + 9
-  }), _defineProperty(_$concat2, ".".concat(autocompleteClasses.hasPopupIcon, ".").concat(autocompleteClasses.hasClearIcon, "&"), {
+  }), ".".concat(autocompleteClasses.hasPopupIcon, ".").concat(autocompleteClasses.hasClearIcon, "&"), {
     paddingRight: 52 + 4 + 9
-  }), _defineProperty(_$concat2, "& .".concat(autocompleteClasses.input), {
+  }), "& .".concat(autocompleteClasses.input), {
     padding: '7.5px 4px 7.5px 5px'
-  }), _defineProperty(_$concat2, "& .".concat(autocompleteClasses.endAdornment), {
+  }), "& .".concat(autocompleteClasses.endAdornment), {
     right: 9
-  }), _$concat2)), _defineProperty(_extends3, "& .".concat(outlinedInputClasses.root, ".").concat(inputBaseClasses.sizeSmall), _defineProperty({
+  })), "& .".concat(outlinedInputClasses.root, ".").concat(inputBaseClasses.sizeSmall), _defineProperty({
     // Don't specify paddingRight, as it overrides the default value set when there is only
     // one of the popup or clear icon as the specificity is equal so the latter one wins
     paddingTop: 6,
@@ -119,39 +119,39 @@ var AutocompleteRoot = styled('div', {
     paddingLeft: 6
   }, "& .".concat(autocompleteClasses.input), {
     padding: '2.5px 4px 2.5px 8px'
-  })), _defineProperty(_extends3, "& .".concat(filledInputClasses.root), (_$concat3 = {
+  })), "& .".concat(filledInputClasses.root), _defineProperty(_defineProperty(_defineProperty(_defineProperty({
     paddingTop: 19,
     paddingLeft: 8
-  }, _defineProperty(_$concat3, ".".concat(autocompleteClasses.hasPopupIcon, "&, .").concat(autocompleteClasses.hasClearIcon, "&"), {
+  }, ".".concat(autocompleteClasses.hasPopupIcon, "&, .").concat(autocompleteClasses.hasClearIcon, "&"), {
     paddingRight: 26 + 4 + 9
-  }), _defineProperty(_$concat3, ".".concat(autocompleteClasses.hasPopupIcon, ".").concat(autocompleteClasses.hasClearIcon, "&"), {
+  }), ".".concat(autocompleteClasses.hasPopupIcon, ".").concat(autocompleteClasses.hasClearIcon, "&"), {
     paddingRight: 52 + 4 + 9
-  }), _defineProperty(_$concat3, "& .".concat(filledInputClasses.input), {
+  }), "& .".concat(filledInputClasses.input), {
     padding: '7px 4px'
-  }), _defineProperty(_$concat3, "& .".concat(autocompleteClasses.endAdornment), {
+  }), "& .".concat(autocompleteClasses.endAdornment), {
     right: 9
-  }), _$concat3)), _defineProperty(_extends3, "& .".concat(filledInputClasses.root, ".").concat(inputBaseClasses.sizeSmall), _defineProperty({
+  })), "& .".concat(filledInputClasses.root, ".").concat(inputBaseClasses.sizeSmall), _defineProperty({
     paddingBottom: 1
   }, "& .".concat(filledInputClasses.input), {
     padding: '2.5px 4px'
-  })), _defineProperty(_extends3, "& .".concat(inputBaseClasses.hiddenLabel), {
+  })), "& .".concat(inputBaseClasses.hiddenLabel), {
     paddingTop: 8
-  }), _defineProperty(_extends3, "& .".concat(filledInputClasses.root, ".").concat(inputBaseClasses.hiddenLabel), _defineProperty({
+  }), "& .".concat(filledInputClasses.root, ".").concat(inputBaseClasses.hiddenLabel), _defineProperty({
     paddingTop: 0,
     paddingBottom: 0
   }, "& .".concat(autocompleteClasses.input), {
     paddingTop: 16,
     paddingBottom: 17
-  })), _defineProperty(_extends3, "& .".concat(filledInputClasses.root, ".").concat(inputBaseClasses.hiddenLabel, ".").concat(inputBaseClasses.sizeSmall), _defineProperty({}, "& .".concat(autocompleteClasses.input), {
+  })), _defineProperty(_defineProperty(_extends3, "& .".concat(filledInputClasses.root, ".").concat(inputBaseClasses.hiddenLabel, ".").concat(inputBaseClasses.sizeSmall), _defineProperty({}, "& .".concat(autocompleteClasses.input), {
     paddingTop: 8,
     paddingBottom: 9
-  })), _defineProperty(_extends3, "& .".concat(autocompleteClasses.input), _extends({
+  })), "& .".concat(autocompleteClasses.input), _extends({
     flexGrow: 1,
     textOverflow: 'ellipsis',
     opacity: 0
   }, ownerState.inputFocused && {
     opacity: 1
-  })), _extends3));
+  }))));
 });
 var AutocompleteEndAdornment = styled('div', {
   name: 'MuiAutocomplete',
@@ -254,7 +254,6 @@ var AutocompleteListbox = styled('div', {
     return styles.listbox;
   }
 })(function (_ref14) {
-  var _ariaSelectedTru, _$concat4;
   var theme = _ref14.theme;
   return _defineProperty({
     listStyle: 'none',
@@ -263,7 +262,7 @@ var AutocompleteListbox = styled('div', {
     maxHeight: '40vh',
     overflow: 'auto',
     position: 'relative'
-  }, "& .".concat(autocompleteClasses.option), (_$concat4 = {
+  }, "& .".concat(autocompleteClasses.option), _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({
     minHeight: 48,
     display: 'flex',
     overflow: 'hidden',
@@ -277,30 +276,30 @@ var AutocompleteListbox = styled('div', {
     paddingBottom: 6,
     paddingLeft: 16,
     paddingRight: 16
-  }, _defineProperty(_$concat4, theme.breakpoints.up('sm'), {
+  }, theme.breakpoints.up('sm'), {
     minHeight: 'auto'
-  }), _defineProperty(_$concat4, "&.".concat(autocompleteClasses.focused), {
+  }), "&.".concat(autocompleteClasses.focused), {
     backgroundColor: (theme.vars || theme).palette.action.hover,
     // Reset on touch devices, it doesn't add specificity
     '@media (hover: none)': {
       backgroundColor: 'transparent'
     }
-  }), _defineProperty(_$concat4, '&[aria-disabled="true"]', {
+  }), '&[aria-disabled="true"]', {
     opacity: (theme.vars || theme).palette.action.disabledOpacity,
     pointerEvents: 'none'
-  }), _defineProperty(_$concat4, "&.".concat(autocompleteClasses.focusVisible), {
+  }), "&.".concat(autocompleteClasses.focusVisible), {
     backgroundColor: (theme.vars || theme).palette.action.focus
-  }), _defineProperty(_$concat4, '&[aria-selected="true"]', (_ariaSelectedTru = {
+  }), '&[aria-selected="true"]', _defineProperty(_defineProperty({
     backgroundColor: theme.vars ? "rgba(".concat(theme.vars.palette.primary.mainChannel, " / ").concat(theme.vars.palette.action.selectedOpacity, ")") : alpha(theme.palette.primary.main, theme.palette.action.selectedOpacity)
-  }, _defineProperty(_ariaSelectedTru, "&.".concat(autocompleteClasses.focused), {
+  }, "&.".concat(autocompleteClasses.focused), {
     backgroundColor: theme.vars ? "rgba(".concat(theme.vars.palette.primary.mainChannel, " / calc(").concat(theme.vars.palette.action.selectedOpacity, " + ").concat(theme.vars.palette.action.hoverOpacity, "))") : alpha(theme.palette.primary.main, theme.palette.action.selectedOpacity + theme.palette.action.hoverOpacity),
     // Reset on touch devices, it doesn't add specificity
     '@media (hover: none)': {
       backgroundColor: (theme.vars || theme).palette.action.selected
     }
-  }), _defineProperty(_ariaSelectedTru, "&.".concat(autocompleteClasses.focusVisible), {
+  }), "&.".concat(autocompleteClasses.focusVisible), {
     backgroundColor: theme.vars ? "rgba(".concat(theme.vars.palette.primary.mainChannel, " / calc(").concat(theme.vars.palette.action.selectedOpacity, " + ").concat(theme.vars.palette.action.focusOpacity, "))") : alpha(theme.palette.primary.main, theme.palette.action.selectedOpacity + theme.palette.action.focusOpacity)
-  }), _ariaSelectedTru)), _$concat4));
+  })));
 });
 var AutocompleteGroupLabel = styled(ListSubheader, {
   name: 'MuiAutocomplete',
@@ -387,6 +386,7 @@ var Autocomplete = /*#__PURE__*/React.forwardRef(function Autocomplete(inProps,
       return "+".concat(more);
     } : _props$getLimitTagsTe,
     getOptionDisabled = props.getOptionDisabled,
+    getOptionKey = props.getOptionKey,
     getOptionLabelProp = props.getOptionLabel,
     isOptionEqualToValue = props.isOptionEqualToValue,
     groupBy = props.groupBy,
@@ -439,7 +439,7 @@ var Autocomplete = /*#__PURE__*/React.forwardRef(function Autocomplete(inProps,
     _props$slotProps = props.slotProps,
     slotProps = _props$slotProps === void 0 ? {} : _props$slotProps,
     valueProp = props.value,
-    other = _objectWithoutProperties(props, ["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", "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"]);
+    other = _objectWithoutProperties(props, ["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"]);
   /* eslint-enable @typescript-eslint/no-unused-vars */
   var _useAutocomplete = useAutocomplete(_extends({}, props, {
       componentName: 'Autocomplete'
@@ -841,6 +841,14 @@ process.env.NODE_ENV !== "production" ? Autocomplete.propTypes /* remove-proptyp
    * @returns {boolean}
    */
   getOptionDisabled: PropTypes.func,
+  /**
+   * Used to determine the key for a given option.
+   * This can be useful when the labels of options are not unique (since labels are used as keys by default).
+   *
+   * @param {Value} option The option to get the key for.
+   * @returns {string | number}
+   */
+  getOptionKey: PropTypes.func,
   /**
    * Used to determine the string value for a given option.
    * It's used to fill the input (and the list box options if `renderOption` is not provided).