@mui/material 5.14.17 → 5.14.19

package/TablePagination/TablePagination.js

@@ -3,7 +3,7 @@
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
 var _InputBase;
-const _excluded = ["ActionsComponent", "backIconButtonProps", "className", "colSpan", "component", "count", "getItemAriaLabel", "labelDisplayedRows", "labelRowsPerPage", "nextIconButtonProps", "onPageChange", "onRowsPerPageChange", "page", "rowsPerPage", "rowsPerPageOptions", "SelectProps", "showFirstButton", "showLastButton"];
+const _excluded = ["ActionsComponent", "backIconButtonProps", "className", "colSpan", "component", "count", "disabled", "getItemAriaLabel", "labelDisplayedRows", "labelRowsPerPage", "nextIconButtonProps", "onPageChange", "onRowsPerPageChange", "page", "rowsPerPage", "rowsPerPageOptions", "SelectProps", "showFirstButton", "showLastButton", "slotProps"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
@@ -144,6 +144,7 @@ const useUtilityClasses = ownerState => {
  * A `TableCell` based component for placing inside `TableFooter` for pagination.
  */
 const TablePagination = /*#__PURE__*/React.forwardRef(function TablePagination(inProps, ref) {
+  var _slotProps$select;
   const props = useThemeProps({
     props: inProps,
     name: 'MuiTablePagination'
@@ -155,6 +156,7 @@ const TablePagination = /*#__PURE__*/React.forwardRef(function TablePagination(i
       colSpan: colSpanProp,
       component = TableCell,
       count,
+      disabled = false,
       getItemAriaLabel = defaultGetAriaLabel,
       labelDisplayedRows = defaultLabelDisplayedRows,
       labelRowsPerPage = 'Rows per page:',
@@ -166,19 +168,21 @@ const TablePagination = /*#__PURE__*/React.forwardRef(function TablePagination(i
       rowsPerPageOptions = [10, 25, 50, 100],
       SelectProps = {},
       showFirstButton = false,
-      showLastButton = false
+      showLastButton = false,
+      slotProps
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
   const ownerState = props;
   const classes = useUtilityClasses(ownerState);
-  const MenuItemComponent = SelectProps.native ? 'option' : TablePaginationMenuItem;
+  const selectProps = (_slotProps$select = slotProps == null ? void 0 : slotProps.select) != null ? _slotProps$select : SelectProps;
+  const MenuItemComponent = selectProps.native ? 'option' : TablePaginationMenuItem;
   let colSpan;
   if (component === TableCell || component === 'td') {
     colSpan = colSpanProp || 1000; // col-span over everything
   }
 
-  const selectId = useId(SelectProps.id);
-  const labelId = useId(SelectProps.labelId);
+  const selectId = useId(selectProps.id);
+  const labelId = useId(selectProps.labelId);
   const getLabelDisplayedRowsTo = () => {
     if (count === -1) {
       return (page + 1) * rowsPerPage;
@@ -202,21 +206,22 @@ const TablePagination = /*#__PURE__*/React.forwardRef(function TablePagination(i
         children: labelRowsPerPage
       }), rowsPerPageOptions.length > 1 && /*#__PURE__*/_jsx(TablePaginationSelect, _extends({
         variant: "standard"
-      }, !SelectProps.variant && {
+      }, !selectProps.variant && {
         input: _InputBase || (_InputBase = /*#__PURE__*/_jsx(InputBase, {}))
       }, {
         value: rowsPerPage,
         onChange: onRowsPerPageChange,
         id: selectId,
         labelId: labelId
-      }, SelectProps, {
-        classes: _extends({}, SelectProps.classes, {
+      }, selectProps, {
+        classes: _extends({}, selectProps.classes, {
           // TODO v5 remove `classes.input`
-          root: clsx(classes.input, classes.selectRoot, (SelectProps.classes || {}).root),
-          select: clsx(classes.select, (SelectProps.classes || {}).select),
+          root: clsx(classes.input, classes.selectRoot, (selectProps.classes || {}).root),
+          select: clsx(classes.select, (selectProps.classes || {}).select),
           // TODO v5 remove `selectIcon`
-          icon: clsx(classes.selectIcon, (SelectProps.classes || {}).icon)
+          icon: clsx(classes.selectIcon, (selectProps.classes || {}).icon)
         }),
+        disabled: disabled,
         children: rowsPerPageOptions.map(rowsPerPageOption => /*#__PURE__*/_createElement(MenuItemComponent, _extends({}, !isHostComponent(MenuItemComponent) && {
           ownerState
         }, {
@@ -242,7 +247,9 @@ const TablePagination = /*#__PURE__*/React.forwardRef(function TablePagination(i
         rowsPerPage: rowsPerPage,
         showFirstButton: showFirstButton,
         showLastButton: showLastButton,
-        getItemAriaLabel: getItemAriaLabel
+        slotProps: slotProps == null ? void 0 : slotProps.actions,
+        getItemAriaLabel: getItemAriaLabel,
+        disabled: disabled
       })]
     })
   }));
@@ -260,6 +267,9 @@ process.env.NODE_ENV !== "production" ? TablePagination.propTypes /* remove-prop
   ActionsComponent: PropTypes.elementType,
   /**
    * Props applied to the back arrow [`IconButton`](/material-ui/api/icon-button/) component.
+   *
+   * This prop is an alias for `slotProps.actions.previousButton` and will be overriden by it if both are used.
+   * @deprecated Use `slotProps.actions.previousButton` instead.
    */
   backIconButtonProps: PropTypes.object,
   /**
@@ -285,6 +295,11 @@ process.env.NODE_ENV !== "production" ? TablePagination.propTypes /* remove-prop
    * To enable server side pagination for an unknown number of items, provide -1.
    */
   count: integerPropType.isRequired,
+  /**
+   * If `true`, the component is disabled.
+   * @default false
+   */
+  disabled: PropTypes.bool,
   /**
    * Accepts a function which returns a string value that provides a user-friendly name for the current page.
    * This is important for screen reader users.
@@ -316,6 +331,9 @@ process.env.NODE_ENV !== "production" ? TablePagination.propTypes /* remove-prop
   labelRowsPerPage: PropTypes.node,
   /**
    * Props applied to the next arrow [`IconButton`](/material-ui/api/icon-button/) element.
+   *
+   * This prop is an alias for `slotProps.actions.nextButton` and will be overriden by it if both are used.
+   * @deprecated Use `slotProps.actions.nextButton` instead.
    */
   nextIconButtonProps: PropTypes.object,
   /**
@@ -367,6 +385,10 @@ process.env.NODE_ENV !== "production" ? TablePagination.propTypes /* remove-prop
   })]).isRequired),
   /**
    * Props applied to the rows per page [`Select`](/material-ui/api/select/) element.
+   *
+   * This prop is an alias for `slotProps.select` and will be overriden by it if both are used.
+   * @deprecated Use `slotProps.select` instead.
+   *
    * @default {}
    */
   SelectProps: PropTypes.object,
@@ -380,6 +402,19 @@ process.env.NODE_ENV !== "production" ? TablePagination.propTypes /* remove-prop
    * @default false
    */
   showLastButton: PropTypes.bool,
+  /**
+   * The props used for each slot inside the TablePagination.
+   * @default {}
+   */
+  slotProps: PropTypes.shape({
+    actions: PropTypes.shape({
+      firstButton: PropTypes.object,
+      lastButton: PropTypes.object,
+      nextButton: PropTypes.object,
+      previousButton: PropTypes.object
+    }),
+    select: PropTypes.object
+  }),
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */

package/TablePagination/TablePaginationActions.d.ts

@@ -2,12 +2,21 @@ import * as React from 'react';
 import { IconButtonProps } from '../IconButton/IconButton';
 
 export interface TablePaginationActionsProps extends React.HTMLAttributes<HTMLDivElement> {
+  /**
+   * This prop is an alias for `slotProps.previousButton` and will be overriden by it if both are used.
+   * @deprecated Use `slotProps.previousButton` instead.
+   */
   backIconButtonProps?: Partial<IconButtonProps>;
   /**
    * Override or extend the styles applied to the component.
    */
   classes?: {};
   count: number;
+  /**
+   * If `true`, the component is disabled.
+   * @default false
+   */
+  disabled?: boolean;
   /**
    * Accepts a function which returns a string value that provides a user-friendly name for the current page.
    * This is important for screen reader users.
@@ -17,12 +26,22 @@ export interface TablePaginationActionsProps extends React.HTMLAttributes<HTMLDi
    * @returns {string}
    */
   getItemAriaLabel: (type: 'first' | 'last' | 'next' | 'previous') => string;
+  /**
+   * This prop is an alias for `slotProps.nextButton` and will be overriden by it if both are used.
+   * @deprecated Use `slotProps.nextButton` instead.
+   */
   nextIconButtonProps?: Partial<IconButtonProps>;
   onPageChange: (event: React.MouseEvent<HTMLButtonElement> | null, page: number) => void;
   page: number;
   rowsPerPage: number;
   showFirstButton: boolean;
   showLastButton: boolean;
+  slotProps?: {
+    firstButton?: Partial<IconButtonProps>;
+    lastButton?: Partial<IconButtonProps>;
+    nextButton?: Partial<IconButtonProps>;
+    previousButton?: Partial<IconButtonProps>;
+  };
 }
 
 declare const TablePaginationActions: React.JSXElementConstructor<TablePaginationActionsProps>;

package/TablePagination/TablePaginationActions.js

@@ -3,7 +3,7 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 var _LastPageIcon, _FirstPageIcon, _KeyboardArrowRight, _KeyboardArrowLeft, _KeyboardArrowLeft2, _KeyboardArrowRight2, _FirstPageIcon2, _LastPageIcon2;
-const _excluded = ["backIconButtonProps", "count", "getItemAriaLabel", "nextIconButtonProps", "onPageChange", "page", "rowsPerPage", "showFirstButton", "showLastButton"];
+const _excluded = ["backIconButtonProps", "count", "disabled", "getItemAriaLabel", "nextIconButtonProps", "onPageChange", "page", "rowsPerPage", "showFirstButton", "showLastButton", "slotProps"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import KeyboardArrowLeft from '../internal/svg-icons/KeyboardArrowLeft';
@@ -19,16 +19,19 @@ import FirstPageIcon from '../internal/svg-icons/FirstPage';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const TablePaginationActions = /*#__PURE__*/React.forwardRef(function TablePaginationActions(props, ref) {
+  var _slotProps$firstButto, _slotProps$previousBu, _slotProps$nextButton, _slotProps$lastButton;
   const {
       backIconButtonProps,
       count,
+      disabled = false,
       getItemAriaLabel,
       nextIconButtonProps,
       onPageChange,
       page,
       rowsPerPage,
       showFirstButton,
-      showLastButton
+      showLastButton,
+      slotProps
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
   const theme = useTheme();
@@ -47,35 +50,37 @@ const TablePaginationActions = /*#__PURE__*/React.forwardRef(function TablePagin
   return /*#__PURE__*/_jsxs("div", _extends({
     ref: ref
   }, other, {
-    children: [showFirstButton && /*#__PURE__*/_jsx(IconButton, {
+    children: [showFirstButton && /*#__PURE__*/_jsx(IconButton, _extends({
       onClick: handleFirstPageButtonClick,
-      disabled: page === 0,
+      disabled: disabled || page === 0,
       "aria-label": getItemAriaLabel('first', page),
-      title: getItemAriaLabel('first', page),
+      title: getItemAriaLabel('first', page)
+    }, (_slotProps$firstButto = slotProps == null ? void 0 : slotProps.firstButton) != null ? _slotProps$firstButto : {}, {
       children: theme.direction === 'rtl' ? _LastPageIcon || (_LastPageIcon = /*#__PURE__*/_jsx(LastPageIcon, {})) : _FirstPageIcon || (_FirstPageIcon = /*#__PURE__*/_jsx(FirstPageIcon, {}))
-    }), /*#__PURE__*/_jsx(IconButton, _extends({
+    })), /*#__PURE__*/_jsx(IconButton, _extends({
       onClick: handleBackButtonClick,
-      disabled: page === 0,
+      disabled: disabled || page === 0,
       color: "inherit",
       "aria-label": getItemAriaLabel('previous', page),
       title: getItemAriaLabel('previous', page)
-    }, backIconButtonProps, {
+    }, (_slotProps$previousBu = slotProps == null ? void 0 : slotProps.previousButton) != null ? _slotProps$previousBu : backIconButtonProps, {
       children: theme.direction === 'rtl' ? _KeyboardArrowRight || (_KeyboardArrowRight = /*#__PURE__*/_jsx(KeyboardArrowRight, {})) : _KeyboardArrowLeft || (_KeyboardArrowLeft = /*#__PURE__*/_jsx(KeyboardArrowLeft, {}))
     })), /*#__PURE__*/_jsx(IconButton, _extends({
       onClick: handleNextButtonClick,
-      disabled: count !== -1 ? page >= Math.ceil(count / rowsPerPage) - 1 : false,
+      disabled: disabled || (count !== -1 ? page >= Math.ceil(count / rowsPerPage) - 1 : false),
       color: "inherit",
       "aria-label": getItemAriaLabel('next', page),
       title: getItemAriaLabel('next', page)
-    }, nextIconButtonProps, {
+    }, (_slotProps$nextButton = slotProps == null ? void 0 : slotProps.nextButton) != null ? _slotProps$nextButton : nextIconButtonProps, {
       children: theme.direction === 'rtl' ? _KeyboardArrowLeft2 || (_KeyboardArrowLeft2 = /*#__PURE__*/_jsx(KeyboardArrowLeft, {})) : _KeyboardArrowRight2 || (_KeyboardArrowRight2 = /*#__PURE__*/_jsx(KeyboardArrowRight, {}))
-    })), showLastButton && /*#__PURE__*/_jsx(IconButton, {
+    })), showLastButton && /*#__PURE__*/_jsx(IconButton, _extends({
       onClick: handleLastPageButtonClick,
-      disabled: page >= Math.ceil(count / rowsPerPage) - 1,
+      disabled: disabled || page >= Math.ceil(count / rowsPerPage) - 1,
       "aria-label": getItemAriaLabel('last', page),
-      title: getItemAriaLabel('last', page),
+      title: getItemAriaLabel('last', page)
+    }, (_slotProps$lastButton = slotProps == null ? void 0 : slotProps.lastButton) != null ? _slotProps$lastButton : {}, {
       children: theme.direction === 'rtl' ? _FirstPageIcon2 || (_FirstPageIcon2 = /*#__PURE__*/_jsx(FirstPageIcon, {})) : _LastPageIcon2 || (_LastPageIcon2 = /*#__PURE__*/_jsx(LastPageIcon, {}))
-    })]
+    }))]
   }));
 });
 process.env.NODE_ENV !== "production" ? TablePaginationActions.propTypes = {
@@ -87,6 +92,11 @@ process.env.NODE_ENV !== "production" ? TablePaginationActions.propTypes = {
    * The total number of rows.
    */
   count: PropTypes.number.isRequired,
+  /**
+   * If `true`, the component is disabled.
+   * @default false
+   */
+  disabled: PropTypes.bool,
   /**
    * Accepts a function which returns a string value that provides a user-friendly name for the current page.
    *
@@ -123,6 +133,16 @@ process.env.NODE_ENV !== "production" ? TablePaginationActions.propTypes = {
   /**
    * If `true`, show the last-page button.
    */
-  showLastButton: PropTypes.bool.isRequired
+  showLastButton: PropTypes.bool.isRequired,
+  /**
+   * The props used for each slot inside the TablePaginationActions.
+   * @default {}
+   */
+  slotProps: PropTypes.shape({
+    firstButton: PropTypes.object,
+    lastButton: PropTypes.object,
+    nextButton: PropTypes.object,
+    previousButton: PropTypes.object
+  })
 } : void 0;
 export default TablePaginationActions;

package/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/material v5.14.17
+ * @mui/material v5.14.19
  *
  * @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'
@@ -540,9 +540,11 @@ var Autocomplete = /*#__PURE__*/React.forwardRef(function Autocomplete(inProps,
   };
   var renderGroup = renderGroupProp || defaultRenderGroup;
   var defaultRenderOption = function defaultRenderOption(props2, option) {
-    return /*#__PURE__*/_jsx("li", _extends({}, props2, {
+    var key = props2.key,
+      otherProps = _objectWithoutProperties(props2, ["key"]);
+    return /*#__PURE__*/_jsx("li", _extends({}, otherProps, {
       children: getOptionLabel(option)
-    }));
+    }), key);
   };
   var renderOption = renderOptionProp || defaultRenderOption;
   var renderListOption = function renderListOption(option, index) {
@@ -839,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).
@@ -961,6 +971,10 @@ process.env.NODE_ENV !== "production" ? Autocomplete.propTypes /* remove-proptyp
    * @param {string} reason Can be: `"input"` (user input), `"reset"` (programmatic change), `"clear"`.
    */
   onInputChange: PropTypes.func,
+  /**
+   * @ignore
+   */
+  onKeyDown: PropTypes.func,
   /**
    * Callback fired when the popup requests to be opened.
    * Use in controlled mode (see open).

package/legacy/AvatarGroup/AvatarGroup.js

@@ -34,16 +34,15 @@ var AvatarGroupRoot = styled('div', {
     return _extends(_defineProperty({}, "& .".concat(avatarGroupClasses.avatar), styles.avatar), styles.root);
   }
 })(function (_ref) {
-  var _ref2;
   var theme = _ref.theme;
-  return _ref2 = {}, _defineProperty(_ref2, "& .".concat(avatarClasses.root), {
+  return _defineProperty(_defineProperty(_defineProperty({}, "& .".concat(avatarClasses.root), {
     border: "2px solid ".concat((theme.vars || theme).palette.background.default),
     boxSizing: 'content-box',
     marginLeft: -8,
     '&:last-child': {
       marginLeft: 0
     }
-  }), _defineProperty(_ref2, "display", 'flex'), _defineProperty(_ref2, "flexDirection", 'row-reverse'), _ref2;
+  }), "display", 'flex'), "flexDirection", 'row-reverse');
 });
 var AvatarGroupAvatar = styled(Avatar, {
   name: 'MuiAvatarGroup',