@mui/material 5.3.1 → 5.4.3

package/Slide/Slide.js

@@ -8,7 +8,6 @@ import { elementAcceptingRef, HTMLElementType, chainPropTypes } from '@mui/utils
 import debounce from '../utils/debounce';
 import useForkRef from '../utils/useForkRef';
 import useTheme from '../styles/useTheme';
-import { duration, easing } from '../styles/createTransitions';
 import { reflow, getTransitionProps } from '../transitions/utils';
 import { ownerWindow } from '../utils'; // Translate the node so it can't be seen on the screen.
 // Later, we're going to translate the node back to its original location with `none`.
@@ -82,20 +81,22 @@ export function setTranslateValue(direction, node, containerProp) {
     node.style.transform = transform;
   }
 }
-const defaultEasing = {
-  enter: easing.easeOut,
-  exit: easing.sharp
-};
-const defaultTimeout = {
-  enter: duration.enteringScreen,
-  exit: duration.leavingScreen
-};
 /**
  * The Slide transition is used by the [Drawer](/components/drawers/) component.
  * It uses [react-transition-group](https://github.com/reactjs/react-transition-group) internally.
  */
 
 const Slide = /*#__PURE__*/React.forwardRef(function Slide(props, ref) {
+  const theme = useTheme();
+  const defaultEasing = {
+    enter: theme.transitions.easing.easeOut,
+    exit: theme.transitions.easing.sharp
+  };
+  const defaultTimeout = {
+    enter: theme.transitions.duration.enteringScreen,
+    exit: theme.transitions.duration.leavingScreen
+  };
+
   const {
     addEndListener,
     appear = true,
@@ -117,7 +118,6 @@ const Slide = /*#__PURE__*/React.forwardRef(function Slide(props, ref) {
   } = props,
         other = _objectWithoutPropertiesLoose(props, _excluded);
 
-  const theme = useTheme();
   const childrenRef = React.useRef(null);
   const handleRefIntermediary = useForkRef(children.ref, childrenRef);
   const handleRef = useForkRef(handleRefIntermediary, ref);
@@ -305,8 +305,8 @@ process.env.NODE_ENV !== "production" ? Slide.propTypes
    * The transition timing function.
    * You may specify a single easing or a object containing enter and exit values.
    * @default {
-   *   enter: easing.easeOut,
-   *   exit: easing.sharp,
+   *   enter: theme.transitions.easing.easeOut,
+   *   exit: theme.transitions.easing.sharp,
    * }
    */
   easing: PropTypes.oneOfType([PropTypes.shape({
@@ -358,8 +358,8 @@ process.env.NODE_ENV !== "production" ? Slide.propTypes
    * The duration for the transition, in milliseconds.
    * You may specify a single timeout for all transitions, or individually with an object.
    * @default {
-   *   enter: duration.enteringScreen,
-   *   exit: duration.leavingScreen,
+   *   enter: theme.transitions.duration.enteringScreen,
+   *   exit: theme.transitions.duration.leavingScreen,
    * }
    */
   timeout: PropTypes.oneOfType([PropTypes.number, PropTypes.shape({

package/Slider/Slider.js

@@ -691,7 +691,9 @@ process.env.NODE_ENV !== "production" ? Slider.propTypes
    * The size of the slider.
    * @default 'medium'
    */
-  size: PropTypes.oneOf(['small', 'medium']),
+  size: PropTypes
+  /* @typescript-to-proptypes-ignore */
+  .oneOfType([PropTypes.oneOf(['small', 'medium']), PropTypes.string]),
 
   /**
    * The granularity with which the slider can step through values. (A "discrete" slider.)

package/Snackbar/Snackbar.d.ts

@@ -104,8 +104,8 @@ export interface SnackbarProps extends StandardProps<React.HTMLAttributes<HTMLDi
    * The duration for the transition, in milliseconds.
    * You may specify a single timeout for all transitions, or individually with an object.
    * @default {
-   *   enter: duration.enteringScreen,
-   *   exit: duration.leavingScreen,
+   *   enter: theme.transitions.duration.enteringScreen,
+   *   exit: theme.transitions.duration.leavingScreen,
    * }
    */
   transitionDuration?: TransitionProps['timeout'];

package/Snackbar/Snackbar.js

@@ -10,7 +10,6 @@ import ClickAwayListener from '@mui/base/ClickAwayListener';
 import styled from '../styles/styled';
 import useTheme from '../styles/useTheme';
 import useThemeProps from '../styles/useThemeProps';
-import { duration } from '../styles/createTransitions';
 import useEventCallback from '../utils/useEventCallback';
 import capitalize from '../utils/capitalize';
 import Grow from '../Grow';
@@ -93,6 +92,11 @@ const Snackbar = /*#__PURE__*/React.forwardRef(function Snackbar(inProps, ref) {
     props: inProps,
     name: 'MuiSnackbar'
   });
+  const theme = useTheme();
+  const defaultTransitionDuration = {
+    enter: theme.transitions.duration.enteringScreen,
+    exit: theme.transitions.duration.leavingScreen
+  };
 
   const {
     action,
@@ -118,10 +122,7 @@ const Snackbar = /*#__PURE__*/React.forwardRef(function Snackbar(inProps, ref) {
     open,
     resumeHideDuration,
     TransitionComponent = Grow,
-    transitionDuration = {
-      enter: duration.enteringScreen,
-      exit: duration.leavingScreen
-    },
+    transitionDuration = defaultTransitionDuration,
     TransitionProps: {
       onEnter,
       onExited
@@ -130,7 +131,6 @@ const Snackbar = /*#__PURE__*/React.forwardRef(function Snackbar(inProps, ref) {
         TransitionProps = _objectWithoutPropertiesLoose(props.TransitionProps, _excluded),
         other = _objectWithoutPropertiesLoose(props, _excluded2);
 
-  const theme = useTheme();
   const isRtl = theme.direction === 'rtl';
 
   const ownerState = _extends({}, props, {
@@ -290,7 +290,10 @@ const Snackbar = /*#__PURE__*/React.forwardRef(function Snackbar(inProps, ref) {
       onMouseEnter: handleMouseEnter,
       onMouseLeave: handleMouseLeave,
       ownerState: ownerState,
-      ref: ref
+      ref: ref // ClickAwayListener adds an `onClick` prop which results in the alert not being announced.
+      // See https://github.com/mui-org/material-ui/issues/29080
+      ,
+      role: "presentation"
     }, other, {
       children: /*#__PURE__*/_jsx(TransitionComponent, _extends({
         appear: true,
@@ -446,8 +449,8 @@ process.env.NODE_ENV !== "production" ? Snackbar.propTypes
    * The duration for the transition, in milliseconds.
    * You may specify a single timeout for all transitions, or individually with an object.
    * @default {
-   *   enter: duration.enteringScreen,
-   *   exit: duration.leavingScreen,
+   *   enter: theme.transitions.duration.enteringScreen,
+   *   exit: theme.transitions.duration.leavingScreen,
    * }
    */
   transitionDuration: PropTypes.oneOfType([PropTypes.number, PropTypes.shape({

package/SpeedDial/SpeedDial.d.ts

@@ -80,8 +80,8 @@ export interface SpeedDialProps
    * The duration for the transition, in milliseconds.
    * You may specify a single timeout for all transitions, or individually with an object.
    * @default {
-   *   enter: duration.enteringScreen,
-   *   exit: duration.leavingScreen,
+   *   enter: theme.transitions.duration.enteringScreen,
+   *   exit: theme.transitions.duration.leavingScreen,
    * }
    */
   transitionDuration?: TransitionProps['timeout'];

package/SpeedDial/SpeedDial.js

@@ -10,7 +10,7 @@ import clsx from 'clsx';
 import { unstable_composeClasses as composeClasses } from '@mui/base';
 import styled from '../styles/styled';
 import useThemeProps from '../styles/useThemeProps';
-import { duration } from '../styles/createTransitions';
+import useTheme from '../styles/useTheme';
 import Zoom from '../Zoom';
 import Fab from '../Fab';
 import capitalize from '../utils/capitalize';
@@ -137,6 +137,11 @@ const SpeedDial = /*#__PURE__*/React.forwardRef(function SpeedDial(inProps, ref)
     props: inProps,
     name: 'MuiSpeedDial'
   });
+  const theme = useTheme();
+  const defaultTransitionDuration = {
+    enter: theme.transitions.duration.enteringScreen,
+    exit: theme.transitions.duration.leavingScreen
+  };
 
   const {
     ariaLabel,
@@ -157,10 +162,7 @@ const SpeedDial = /*#__PURE__*/React.forwardRef(function SpeedDial(inProps, ref)
     onOpen,
     open: openProp,
     TransitionComponent = Zoom,
-    transitionDuration = {
-      enter: duration.enteringScreen,
-      exit: duration.leavingScreen
-    },
+    transitionDuration = defaultTransitionDuration,
     TransitionProps
   } = props,
         FabProps = _objectWithoutPropertiesLoose(props.FabProps, _excluded),
@@ -542,8 +544,8 @@ process.env.NODE_ENV !== "production" ? SpeedDial.propTypes
    * The duration for the transition, in milliseconds.
    * You may specify a single timeout for all transitions, or individually with an object.
    * @default {
-   *   enter: duration.enteringScreen,
-   *   exit: duration.leavingScreen,
+   *   enter: theme.transitions.duration.enteringScreen,
+   *   exit: theme.transitions.duration.leavingScreen,
    * }
    */
   transitionDuration: PropTypes.oneOfType([PropTypes.number, PropTypes.shape({

package/Step/StepContext.d.ts

@@ -0,0 +1,20 @@
+import * as React from 'react';
+export interface StepContextType {
+    index: number;
+    last: boolean;
+    expanded: boolean;
+    icon: React.ReactNode;
+    active: boolean;
+    completed: boolean;
+    disabled: boolean;
+}
+/**
+ * Provides information about the current step in Stepper.
+ */
+declare const StepContext: React.Context<{} | StepContextType>;
+/**
+ * Returns the current StepContext or an empty object if no StepContext
+ * has been defined in the component tree.
+ */
+export declare function useStepContext(): StepContextType | {};
+export default StepContext;

package/Step/StepContext.js

@@ -1,12 +1,20 @@
 import * as React from 'react';
+
 /**
- * @ignore - internal component.
+ * Provides information about the current step in Stepper.
  */
-
 const StepContext = /*#__PURE__*/React.createContext({});
 
 if (process.env.NODE_ENV !== 'production') {
   StepContext.displayName = 'StepContext';
 }
+/**
+ * Returns the current StepContext or an empty object if no StepContext
+ * has been defined in the component tree.
+ */
+
 
+export function useStepContext() {
+  return React.useContext(StepContext);
+}
 export default StepContext;

package/Step/index.d.ts

@@ -3,3 +3,6 @@ export * from './Step';
 
 export { default as stepClasses } from './stepClasses';
 export * from './stepClasses';
+
+export { default as StepContext } from './StepContext';
+export * from './StepContext';

package/Step/index.js

@@ -1,3 +1,5 @@
 export { default } from './Step';
 export { default as stepClasses } from './stepClasses';
-export * from './stepClasses';
+export * from './stepClasses';
+export { default as StepContext } from './StepContext';
+export * from './StepContext';

package/SwipeableDrawer/SwipeArea.js

@@ -8,9 +8,7 @@ import styled from '../styles/styled';
 import capitalize from '../utils/capitalize';
 import { isHorizontal } from '../Drawer/Drawer';
 import { jsx as _jsx } from "react/jsx-runtime";
-const SwipeAreaRoot = styled('div', {
-  skipSx: true
-})(({
+const SwipeAreaRoot = styled('div')(({
   theme,
   ownerState
 }) => _extends({

package/SwipeableDrawer/SwipeableDrawer.js

@@ -12,7 +12,6 @@ import ownerDocument from '../utils/ownerDocument';
 import ownerWindow from '../utils/ownerWindow';
 import useEventCallback from '../utils/useEventCallback';
 import useEnhancedEffect from '../utils/useEnhancedEffect';
-import { duration } from '../styles/createTransitions';
 import useTheme from '../styles/useTheme';
 import { getTransitionProps } from '../transitions/utils';
 import SwipeArea from './SwipeArea'; // This value is closed to what browsers are using internally to
@@ -125,16 +124,16 @@ function computeHasNativeHandler({
 }
 
 const iOS = typeof navigator !== 'undefined' && /iPad|iPhone|iPod/.test(navigator.userAgent);
-const transitionDurationDefault = {
-  enter: duration.enteringScreen,
-  exit: duration.leavingScreen
-};
 const SwipeableDrawer = /*#__PURE__*/React.forwardRef(function SwipeableDrawer(inProps, ref) {
   const props = useThemeProps({
     name: 'MuiSwipeableDrawer',
     props: inProps
   });
   const theme = useTheme();
+  const transitionDurationDefault = {
+    enter: theme.transitions.duration.enteringScreen,
+    exit: theme.transitions.duration.leavingScreen
+  };
 
   const {
     anchor = 'left',
@@ -612,7 +611,10 @@ process.env.NODE_ENV !== "production" ? SwipeableDrawer.propTypes
   /**
    * The duration for the transition, in milliseconds.
    * You may specify a single timeout for all transitions, or individually with an object.
-   * @default { enter: duration.enteringScreen, exit: duration.leavingScreen }
+   * @default {
+   *   enter: theme.transitions.duration.enteringScreen,
+   *   exit: theme.transitions.duration.leavingScreen,
+   * }
    */
   transitionDuration: PropTypes.oneOfType([PropTypes.number, PropTypes.shape({
     appear: PropTypes.number,

package/TextField/TextField.js

@@ -191,7 +191,7 @@ const TextField = /*#__PURE__*/React.forwardRef(function TextField(inProps, ref)
     variant: variant,
     ownerState: ownerState
   }, other, {
-    children: [label && /*#__PURE__*/_jsx(InputLabel, _extends({
+    children: [label != null && label !== '' && /*#__PURE__*/_jsx(InputLabel, _extends({
       htmlFor: id,
       id: inputLabelId
     }, InputLabelProps, {

package/ToggleButton/ToggleButton.d.ts

@@ -1,5 +1,6 @@
 import { SxProps } from '@mui/system';
 import { OverridableStringUnion } from '@mui/types';
+import * as React from 'react';
 import { Theme } from '..';
 import { ExtendButtonBase, ExtendButtonBaseTypeMap } from '../ButtonBase';
 import { OverrideProps } from '../OverridableComponent';
@@ -45,6 +46,20 @@ export type ToggleButtonTypeMap<
      * @default false
      */
     fullWidth?: boolean;
+    /**
+     * Callback fired when the state changes.
+     *
+     * @param {React.MouseEvent<HTMLElement>} event The event source of the callback.
+     * @param {any} value of the selected button.
+     */
+    onChange?: (event: React.MouseEvent<HTMLElement>, value: any) => void;
+    /**
+     * Callback fired when the button is clicked.
+     *
+     * @param {React.MouseEvent<HTMLElement>} event The event source of the callback.
+     * @param {any} value of the selected button.
+     */
+    onClick?: (event: React.MouseEvent<HTMLElement>, value: any) => void;
     /**
      * If `true`, the button is rendered in an active state.
      */

package/ToggleButton/ToggleButton.js

@@ -200,12 +200,18 @@ process.env.NODE_ENV !== "production" ? ToggleButton.propTypes
   fullWidth: PropTypes.bool,
 
   /**
-   * @ignore
+   * Callback fired when the state changes.
+   *
+   * @param {React.MouseEvent<HTMLElement>} event The event source of the callback.
+   * @param {any} value of the selected button.
    */
   onChange: PropTypes.func,
 
   /**
-   * @ignore
+   * Callback fired when the button is clicked.
+   *
+   * @param {React.MouseEvent<HTMLElement>} event The event source of the callback.
+   * @param {any} value of the selected button.
    */
   onClick: PropTypes.func,
 

package/Zoom/Zoom.d.ts

@@ -26,8 +26,8 @@ export interface ZoomProps extends TransitionProps {
    * The duration for the transition, in milliseconds.
    * You may specify a single timeout for all transitions, or individually with an object.
    * @default {
-   *   enter: duration.enteringScreen,
-   *   exit: duration.leavingScreen,
+   *   enter: theme.transitions.duration.enteringScreen,
+   *   exit: theme.transitions.duration.leavingScreen,
    * }
    */
   timeout?: TransitionProps['timeout'];

package/Zoom/Zoom.js

@@ -5,7 +5,6 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import { Transition } from 'react-transition-group';
 import { elementAcceptingRef } from '@mui/utils';
-import { duration } from '../styles/createTransitions';
 import useTheme from '../styles/useTheme';
 import { reflow, getTransitionProps } from '../transitions/utils';
 import useForkRef from '../utils/useForkRef';
@@ -18,10 +17,6 @@ const styles = {
     transform: 'none'
   }
 };
-const defaultTimeout = {
-  enter: duration.enteringScreen,
-  exit: duration.leavingScreen
-};
 /**
  * The Zoom transition can be used for the floating variant of the
  * [Button](/components/buttons/#floating-action-buttons) component.
@@ -29,6 +24,12 @@ const defaultTimeout = {
  */
 
 const Zoom = /*#__PURE__*/React.forwardRef(function Zoom(props, ref) {
+  const theme = useTheme();
+  const defaultTimeout = {
+    enter: theme.transitions.duration.enteringScreen,
+    exit: theme.transitions.duration.leavingScreen
+  };
+
   const {
     addEndListener,
     appear = true,
@@ -48,7 +49,6 @@ const Zoom = /*#__PURE__*/React.forwardRef(function Zoom(props, ref) {
   } = props,
         other = _objectWithoutPropertiesLoose(props, _excluded);
 
-  const theme = useTheme();
   const nodeRef = React.useRef(null);
   const foreignRef = useForkRef(children.ref, ref);
   const handleRef = useForkRef(nodeRef, foreignRef);
@@ -213,8 +213,8 @@ process.env.NODE_ENV !== "production" ? Zoom.propTypes
    * The duration for the transition, in milliseconds.
    * You may specify a single timeout for all transitions, or individually with an object.
    * @default {
-   *   enter: duration.enteringScreen,
-   *   exit: duration.leavingScreen,
+   *   enter: theme.transitions.duration.enteringScreen,
+   *   exit: theme.transitions.duration.leavingScreen,
    * }
    */
   timeout: PropTypes.oneOfType([PropTypes.number, PropTypes.shape({

package/index.d.ts

@@ -23,7 +23,7 @@ export type StandardProps<
 
 /**
  * @internal
- * ONLY USE FROM WITHIN mui-org/material-ui
+ * ONLY USE FROM WITHIN mui/material-ui
  *
  * Internal helper type for conform (describeConformance) components
  * However, we don't declare classes on this type.
@@ -74,8 +74,6 @@ export * from './styles';
 
 export * from './utils';
 
-export * from '@mui/base';
-
 export { default as Accordion } from './Accordion';
 export * from './Accordion';
 
@@ -328,6 +326,9 @@ export * from './Popover';
 export { default as Popper } from './Popper';
 export * from './Popper';
 
+export { default as Portal } from './Portal';
+export * from './Portal';
+
 export { default as Radio } from './Radio';
 export * from './Radio';
 
@@ -476,3 +477,10 @@ export * from './GlobalStyles';
  * @deprecated will be removed in v5.beta, please use StyledEngineProvider from @mui/material/styles instead
  */
 export { StyledEngineProvider } from './styles';
+
+export { default as unstable_composeClasses } from '@mui/base/composeClasses';
+
+export { default as generateUtilityClass } from '@mui/base/generateUtilityClass';
+export * from '@mui/base/generateUtilityClass';
+
+export { default as generateUtilityClasses } from '@mui/base/generateUtilityClasses';

package/index.js

@@ -1,4 +1,4 @@
-/** @license MUI v5.3.1
+/** @license MUI v5.4.3
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
@@ -8,7 +8,6 @@ import * as colors from './colors';
 export { colors };
 export * from './styles';
 export * from './utils';
-export * from '@mui/base';
 export { default as Accordion } from './Accordion';
 export * from './Accordion';
 export { default as AccordionActions } from './AccordionActions';
@@ -175,6 +174,8 @@ export { default as Popover } from './Popover';
 export * from './Popover';
 export { default as Popper } from './Popper';
 export * from './Popper';
+export { default as Portal } from './Portal';
+export * from './Portal';
 export { default as Radio } from './Radio';
 export * from './Radio';
 export { default as RadioGroup } from './RadioGroup';
@@ -273,4 +274,8 @@ export * from './Zoom'; // createFilterOptions is exported from Autocomplete
 export { default as useAutocomplete } from './useAutocomplete';
 export { default as GlobalStyles } from './GlobalStyles';
 export * from './GlobalStyles';
-export { StyledEngineProvider } from './styles';
+export { StyledEngineProvider } from './styles';
+export { default as unstable_composeClasses } from '@mui/base/composeClasses';
+export { default as generateUtilityClass } from '@mui/base/generateUtilityClass';
+export * from '@mui/base/generateUtilityClass';
+export { default as generateUtilityClasses } from '@mui/base/generateUtilityClasses';

package/internal/SwitchBase.js

@@ -29,9 +29,7 @@ const useUtilityClasses = ownerState => {
   return composeClasses(slots, getSwitchBaseUtilityClass, classes);
 };
 
-const SwitchBaseRoot = styled(ButtonBase, {
-  skipSx: true
-})(({
+const SwitchBaseRoot = styled(ButtonBase)(({
   ownerState
 }) => _extends({
   padding: 9,
@@ -41,9 +39,7 @@ const SwitchBaseRoot = styled(ButtonBase, {
 }, ownerState.edge === 'end' && {
   marginRight: ownerState.size === 'small' ? -3 : -12
 }));
-const SwitchBaseInput = styled('input', {
-  skipSx: true
-})({
+const SwitchBaseInput = styled('input')({
   cursor: 'inherit',
   position: 'absolute',
   opacity: 0,

package/legacy/Autocomplete/Autocomplete.js

@@ -420,6 +420,8 @@ var Autocomplete = /*#__PURE__*/React.forwardRef(function Autocomplete(inProps,
       PopperComponent = _props$PopperComponen === void 0 ? Popper : _props$PopperComponen,
       _props$popupIcon = props.popupIcon,
       popupIcon = _props$popupIcon === void 0 ? _ArrowDropDownIcon || (_ArrowDropDownIcon = /*#__PURE__*/_jsx(ArrowDropDownIcon, {})) : _props$popupIcon,
+      _props$readOnly = props.readOnly,
+      readOnly = _props$readOnly === void 0 ? false : _props$readOnly,
       renderGroupProp = props.renderGroup,
       renderInput = props.renderInput,
       renderOptionProp = props.renderOption,
@@ -429,7 +431,7 @@ var Autocomplete = /*#__PURE__*/React.forwardRef(function Autocomplete(inProps,
       _props$size = props.size,
       size = _props$size === void 0 ? 'medium' : _props$size,
       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", "renderGroup", "renderInput", "renderOption", "renderTags", "selectOnFocus", "size", "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", "value"]);
   /* eslint-enable @typescript-eslint/no-unused-vars */
 
 
@@ -455,7 +457,7 @@ var Autocomplete = /*#__PURE__*/React.forwardRef(function Autocomplete(inProps,
       inputValue = _useAutocomplete.inputValue,
       groupedOptions = _useAutocomplete.groupedOptions;
 
-  var hasClearIcon = !disableClearable && !disabled && dirty;
+  var hasClearIcon = !disableClearable && !disabled && dirty && !readOnly;
   var hasPopupIcon = (!freeSolo || forcePopupIcon === true) && forcePopupIcon !== false;
 
   var ownerState = _extends({}, props, {
@@ -582,7 +584,8 @@ var Autocomplete = /*#__PURE__*/React.forwardRef(function Autocomplete(inProps,
         },
         inputProps: _extends({
           className: clsx(classes.input),
-          disabled: disabled
+          disabled: disabled,
+          readOnly: readOnly
         }, getInputProps())
       })
     })), popupOpen && anchorEl ? /*#__PURE__*/_jsx(AutocompletePopper, {
@@ -1025,6 +1028,12 @@ process.env.NODE_ENV !== "production" ? Autocomplete.propTypes
    */
   popupIcon: PropTypes.node,
 
+  /**
+   * If `true`, the component becomes readonly. It is also supported for multiple tags where the tag cannot be deleted.
+   * @default false
+   */
+  readOnly: PropTypes.bool,
+
   /**
    * Render the group.
    *

package/legacy/AvatarGroup/AvatarGroup.js

@@ -63,6 +63,8 @@ var AvatarGroupAvatar = styled(Avatar, {
   };
 });
 var AvatarGroup = /*#__PURE__*/React.forwardRef(function AvatarGroup(inProps, ref) {
+  var _componentsProps$addi, _componentsProps$addi2;
+
   var props = useThemeProps({
     props: inProps,
     name: 'MuiAvatarGroup'
@@ -70,6 +72,8 @@ var AvatarGroup = /*#__PURE__*/React.forwardRef(function AvatarGroup(inProps, re
 
   var childrenProp = props.children,
       className = props.className,
+      _props$componentsProp = props.componentsProps,
+      componentsProps = _props$componentsProp === void 0 ? {} : _props$componentsProp,
       _props$max = props.max,
       max = _props$max === void 0 ? 5 : _props$max,
       _props$spacing = props.spacing,
@@ -77,7 +81,7 @@ var AvatarGroup = /*#__PURE__*/React.forwardRef(function AvatarGroup(inProps, re
       total = props.total,
       _props$variant = props.variant,
       variant = _props$variant === void 0 ? 'circular' : _props$variant,
-      other = _objectWithoutProperties(props, ["children", "className", "max", "spacing", "total", "variant"]);
+      other = _objectWithoutProperties(props, ["children", "className", "componentsProps", "max", "spacing", "total", "variant"]);
 
   var clampedMax = max < 2 ? 2 : max;
 
@@ -112,15 +116,16 @@ var AvatarGroup = /*#__PURE__*/React.forwardRef(function AvatarGroup(inProps, re
     className: clsx(classes.root, className),
     ref: ref
   }, other, {
-    children: [extraAvatars ? /*#__PURE__*/_jsxs(AvatarGroupAvatar, {
+    children: [extraAvatars ? /*#__PURE__*/_jsxs(AvatarGroupAvatar, _extends({
       ownerState: ownerState,
-      className: classes.avatar,
-      style: {
+      variant: variant
+    }, componentsProps.additionalAvatar, {
+      className: clsx(classes.avatar, (_componentsProps$addi = componentsProps.additionalAvatar) == null ? void 0 : _componentsProps$addi.className),
+      style: _extends({
         marginLeft: marginLeft
-      },
-      variant: variant,
+      }, (_componentsProps$addi2 = componentsProps.additionalAvatar) == null ? void 0 : _componentsProps$addi2.style),
       children: ["+", extraAvatars]
-    }) : null, children.slice(0, maxAvatars).reverse().map(function (child) {
+    })) : null, children.slice(0, maxAvatars).reverse().map(function (child) {
       return /*#__PURE__*/React.cloneElement(child, {
         className: clsx(child.props.className, classes.avatar),
         style: _extends({
@@ -154,6 +159,14 @@ process.env.NODE_ENV !== "production" ? AvatarGroup.propTypes
    */
   className: PropTypes.string,
 
+  /**
+   * The props used for each slot inside the AvatarGroup.
+   * @default {}
+   */
+  componentsProps: PropTypes.shape({
+    additionalAvatar: PropTypes.object
+  }),
+
   /**
    * Max avatars to show before +x.
    * @default 5