@mui/material 5.2.7 → 5.4.0

package/modern/Autocomplete/Autocomplete.js

@@ -3,7 +3,7 @@ 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", "renderGroup", "renderInput", "renderOption", "renderTags", "selectOnFocus", "size", "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", "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"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
@@ -398,6 +398,7 @@ const Autocomplete = /*#__PURE__*/React.forwardRef(function Autocomplete(inProps
     PaperComponent = Paper,
     PopperComponent = Popper,
     popupIcon = _ArrowDropDownIcon || (_ArrowDropDownIcon = /*#__PURE__*/_jsx(ArrowDropDownIcon, {})),
+    readOnly = false,
     renderGroup: renderGroupProp,
     renderInput,
     renderOption: renderOptionProp,
@@ -431,7 +432,7 @@ const Autocomplete = /*#__PURE__*/React.forwardRef(function Autocomplete(inProps
   } = useAutocomplete(_extends({}, props, {
     componentName: 'Autocomplete'
   }));
-  const hasClearIcon = !disableClearable && !disabled && dirty;
+  const hasClearIcon = !disableClearable && !disabled && dirty && !readOnly;
   const hasPopupIcon = (!freeSolo || forcePopupIcon === true) && forcePopupIcon !== false;
 
   const ownerState = _extends({}, props, {
@@ -550,7 +551,8 @@ const Autocomplete = /*#__PURE__*/React.forwardRef(function Autocomplete(inProps
         },
         inputProps: _extends({
           className: clsx(classes.input),
-          disabled
+          disabled,
+          readOnly
         }, getInputProps())
       })
     })), popupOpen && anchorEl ? /*#__PURE__*/_jsx(AutocompletePopper, {
@@ -564,10 +566,11 @@ const Autocomplete = /*#__PURE__*/React.forwardRef(function Autocomplete(inProps
       role: "presentation",
       anchorEl: anchorEl,
       open: true,
-      children: /*#__PURE__*/_jsxs(AutocompletePaper, {
-        as: PaperComponent,
-        className: classes.paper,
+      children: /*#__PURE__*/_jsxs(AutocompletePaper, _extends({
         ownerState: ownerState,
+        as: PaperComponent
+      }, componentsProps.paper, {
+        className: clsx(classes.paper, componentsProps.paper?.className),
         children: [loading && groupedOptions.length === 0 ? /*#__PURE__*/_jsx(AutocompleteLoading, {
           className: classes.loading,
           ownerState: ownerState,
@@ -598,7 +601,7 @@ const Autocomplete = /*#__PURE__*/React.forwardRef(function Autocomplete(inProps
             return renderListOption(option, index);
           })
         })) : null]
-      })
+      }))
     }) : null]
   });
 });
@@ -668,7 +671,7 @@ process.env.NODE_ENV !== "production" ? Autocomplete.propTypes
    * If `true`, the input's text is cleared on blur if no value is selected.
    *
    * Set to `true` if you want to help the user enter a new value.
-   * Set to `false` if you want to help the user resume his search.
+   * Set to `false` if you want to help the user resume their search.
    * @default !props.freeSolo
    */
   clearOnBlur: PropTypes.bool,
@@ -699,7 +702,10 @@ process.env.NODE_ENV !== "production" ? Autocomplete.propTypes
    * The props used for each slot inside.
    * @default {}
    */
-  componentsProps: PropTypes.object,
+  componentsProps: PropTypes.shape({
+    clearIndicator: PropTypes.object,
+    paper: PropTypes.object
+  }),
 
   /**
    * The default value. Use when the component is not controlled.
@@ -987,6 +993,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/modern/Backdrop/Backdrop.js

@@ -124,7 +124,9 @@ process.env.NODE_ENV !== "production" ? Backdrop.propTypes
    * The props used for each slot inside the Backdrop.
    * @default {}
    */
-  componentsProps: PropTypes.object,
+  componentsProps: PropTypes.shape({
+    root: PropTypes.object
+  }),
 
   /**
    * If `true`, the backdrop is invisible.

package/modern/Badge/Badge.js

@@ -5,10 +5,11 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import { usePreviousProps } from '@mui/utils';
-import { generateUtilityClasses, isHostComponent } from '@mui/base';
+import { generateUtilityClasses } from '@mui/base';
 import BadgeUnstyled, { badgeUnstyledClasses, getBadgeUtilityClass } from '@mui/base/BadgeUnstyled';
 import styled from '../styles/styled';
 import useThemeProps from '../styles/useThemeProps';
+import shouldSpreadAdditionalProps from '../utils/shouldSpreadAdditionalProps';
 import capitalize from '../utils/capitalize';
 import { jsx as _jsx } from "react/jsx-runtime";
 export const badgeClasses = _extends({}, badgeUnstyledClasses, generateUtilityClasses('MuiBadge', ['colorError', 'colorInfo', 'colorPrimary', 'colorSecondary', 'colorSuccess', 'colorWarning', 'overlapRectangular', 'overlapCircular', // TODO: v6 remove the overlap value from these class keys
@@ -152,11 +153,6 @@ const BadgeBadge = styled('span', {
     duration: theme.transitions.duration.leavingScreen
   })
 }));
-
-const shouldSpreadAdditionalProps = Slot => {
-  return !Slot || !isHostComponent(Slot);
-};
-
 const Badge = /*#__PURE__*/React.forwardRef(function Badge(inProps, ref) {
   const props = useThemeProps({
     props: inProps,
@@ -298,7 +294,10 @@ process.env.NODE_ENV !== "production" ? Badge.propTypes
    * The props used for each slot inside the Badge.
    * @default {}
    */
-  componentsProps: PropTypes.object,
+  componentsProps: PropTypes.shape({
+    badge: PropTypes.object,
+    root: PropTypes.object
+  }),
 
   /**
    * If `true`, the badge is invisible.

package/modern/Breadcrumbs/BreadcrumbCollapsed.js

@@ -6,9 +6,7 @@ import styled from '../styles/styled';
 import MoreHorizIcon from '../internal/svg-icons/MoreHoriz';
 import ButtonBase from '../ButtonBase';
 import { jsx as _jsx } from "react/jsx-runtime";
-const BreadcrumbCollapsedButton = styled(ButtonBase, {
-  skipSx: true
-})(({
+const BreadcrumbCollapsedButton = styled(ButtonBase)(({
   theme
 }) => _extends({
   display: 'flex',

package/modern/ButtonBase/TouchRipple.js

@@ -48,8 +48,7 @@ const pulsateKeyframe = keyframes`
 `;
 export const TouchRippleRoot = styled('span', {
   name: 'MuiTouchRipple',
-  slot: 'Root',
-  skipSx: true
+  slot: 'Root'
 })({
   overflow: 'hidden',
   pointerEvents: 'none',

package/modern/FilledInput/FilledInput.js

@@ -257,7 +257,10 @@ process.env.NODE_ENV !== "production" ? FilledInput.propTypes
    * The props used for each slot inside the Input.
    * @default {}
    */
-  componentsProps: PropTypes.object,
+  componentsProps: PropTypes.shape({
+    input: PropTypes.object,
+    root: PropTypes.object
+  }),
 
   /**
    * The default value. Use when the component is not controlled.

package/modern/FormControlLabel/FormControlLabel.js

@@ -12,6 +12,7 @@ import capitalize from '../utils/capitalize';
 import styled from '../styles/styled';
 import useThemeProps from '../styles/useThemeProps';
 import formControlLabelClasses, { getFormControlLabelUtilityClasses } from './formControlLabelClasses';
+import formControlState from '../FormControl/formControlState';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 
@@ -19,10 +20,11 @@ const useUtilityClasses = ownerState => {
   const {
     classes,
     disabled,
-    labelPlacement
+    labelPlacement,
+    error
   } = ownerState;
   const slots = {
-    root: ['root', disabled && 'disabled', `labelPlacement${capitalize(labelPlacement)}`],
+    root: ['root', disabled && 'disabled', `labelPlacement${capitalize(labelPlacement)}`, error && 'error'],
     label: ['label', disabled && 'disabled']
   };
   return composeClasses(slots, getFormControlLabelUtilityClasses, classes);
@@ -114,11 +116,17 @@ const FormControlLabel = /*#__PURE__*/React.forwardRef(function FormControlLabel
       controlProps[key] = props[key];
     }
   });
+  const fcs = formControlState({
+    props,
+    muiFormControl,
+    states: ['error']
+  });
 
   const ownerState = _extends({}, props, {
     disabled,
     label,
-    labelPlacement
+    labelPlacement,
+    error: fcs.error
   });
 
   const classes = useUtilityClasses(ownerState);
@@ -162,7 +170,9 @@ process.env.NODE_ENV !== "production" ? FormControlLabel.propTypes
    * The props used for each slot inside.
    * @default {}
    */
-  componentsProps: PropTypes.object,
+  componentsProps: PropTypes.shape({
+    typography: PropTypes.object
+  }),
 
   /**
    * A control element. For instance, it can be a `Radio`, a `Switch` or a `Checkbox`.

package/modern/FormControlLabel/formControlLabelClasses.js

@@ -2,5 +2,5 @@ import { generateUtilityClasses, generateUtilityClass } from '@mui/base';
 export function getFormControlLabelUtilityClasses(slot) {
   return generateUtilityClass('MuiFormControlLabel', slot);
 }
-const formControlLabelClasses = generateUtilityClasses('MuiFormControlLabel', ['root', 'labelPlacementStart', 'labelPlacementTop', 'labelPlacementBottom', 'disabled', 'label']);
+const formControlLabelClasses = generateUtilityClasses('MuiFormControlLabel', ['root', 'labelPlacementStart', 'labelPlacementTop', 'labelPlacementBottom', 'disabled', 'label', 'error']);
 export default formControlLabelClasses;

package/modern/FormGroup/FormGroup.js

@@ -8,15 +8,18 @@ import { unstable_composeClasses as composeClasses } from '@mui/base';
 import styled from '../styles/styled';
 import useThemeProps from '../styles/useThemeProps';
 import { getFormGroupUtilityClass } from './formGroupClasses';
+import useFormControl from '../FormControl/useFormControl';
+import formControlState from '../FormControl/formControlState';
 import { jsx as _jsx } from "react/jsx-runtime";
 
 const useUtilityClasses = ownerState => {
   const {
     classes,
-    row
+    row,
+    error
   } = ownerState;
   const slots = {
-    root: ['root', row && 'row']
+    root: ['root', row && 'row', error && 'error']
   };
   return composeClasses(slots, getFormGroupUtilityClass, classes);
 };
@@ -57,8 +60,16 @@ const FormGroup = /*#__PURE__*/React.forwardRef(function FormGroup(inProps, ref)
   } = props,
         other = _objectWithoutPropertiesLoose(props, _excluded);
 
+  const muiFormControl = useFormControl();
+  const fcs = formControlState({
+    props,
+    muiFormControl,
+    states: ['error']
+  });
+
   const ownerState = _extends({}, props, {
-    row
+    row,
+    error: fcs.error
   });
 
   const classes = useUtilityClasses(ownerState);

package/modern/FormGroup/formGroupClasses.js

@@ -2,5 +2,5 @@ import { generateUtilityClass, generateUtilityClasses } from '@mui/base';
 export function getFormGroupUtilityClass(slot) {
   return generateUtilityClass('MuiFormGroup', slot);
 }
-const formGroupClasses = generateUtilityClasses('MuiFormGroup', ['root', 'row']);
+const formGroupClasses = generateUtilityClasses('MuiFormGroup', ['root', 'row', 'error']);
 export default formGroupClasses;

package/modern/FormHelperText/FormHelperText.js

@@ -1,5 +1,8 @@
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
+
+var _span;
+
 const _excluded = ["children", "className", "component", "disabled", "error", "filled", "focused", "margin", "required", "variant"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
@@ -101,16 +104,11 @@ const FormHelperText = /*#__PURE__*/React.forwardRef(function FormHelperText(inP
     className: clsx(classes.root, className),
     ref: ref
   }, other, {
-    children: children === ' ' ?
-    /*#__PURE__*/
-    // notranslate needed while Google Translate will not fix zero-width space issue
-    // eslint-disable-next-line react/no-danger
-    _jsx("span", {
+    children: children === ' ' ? // notranslate needed while Google Translate will not fix zero-width space issue
+    _span || (_span = /*#__PURE__*/_jsx("span", {
       className: "notranslate",
-      dangerouslySetInnerHTML: {
-        __html: '​'
-      }
-    }) : children
+      children: "\u200B"
+    })) : children
   }));
 });
 process.env.NODE_ENV !== "production" ? FormHelperText.propTypes

package/modern/Grid/Grid.js

@@ -260,10 +260,8 @@ const GridRoot = styled('div', {
 
 }, ownerState.zeroMinWidth && {
   minWidth: 0
-}, ownerState.wrap === 'nowrap' && {
-  flexWrap: 'nowrap'
-}, ownerState.wrap === 'reverse' && {
-  flexWrap: 'wrap-reverse'
+}, ownerState.wrap !== 'wrap' && {
+  flexWrap: ownerState.wrap
 }), generateDirection, generateRowGap, generateColumnGap, generateGrid);
 
 const useUtilityClasses = ownerState => {

package/modern/Input/Input.js

@@ -192,7 +192,10 @@ process.env.NODE_ENV !== "production" ? Input.propTypes
    * The props used for each slot inside the Input.
    * @default {}
    */
-  componentsProps: PropTypes.object,
+  componentsProps: PropTypes.shape({
+    input: PropTypes.object,
+    root: PropTypes.object
+  }),
 
   /**
    * The default value. Use when the component is not controlled.

package/modern/InputAdornment/InputAdornment.js

@@ -1,5 +1,8 @@
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
+
+var _span;
+
 const _excluded = ["children", "className", "component", "disablePointerEvents", "disableTypography", "position", "variant"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
@@ -121,17 +124,11 @@ const InputAdornment = /*#__PURE__*/React.forwardRef(function InputAdornment(inP
         children: children
       }) : /*#__PURE__*/_jsxs(React.Fragment, {
         children: [position === 'start' ?
-        /*#__PURE__*/
-
         /* notranslate needed while Google Translate will not fix zero-width space issue */
-
-        /* eslint-disable-next-line react/no-danger */
-        _jsx("span", {
+        _span || (_span = /*#__PURE__*/_jsx("span", {
           className: "notranslate",
-          dangerouslySetInnerHTML: {
-            __html: '​'
-          }
-        }) : null, children]
+          children: "\u200B"
+        })) : null, children]
       })
     }))
   });

package/modern/InputBase/InputBase.js

@@ -552,7 +552,10 @@ process.env.NODE_ENV !== "production" ? InputBase.propTypes
    * The props used for each slot inside the Input.
    * @default {}
    */
-  componentsProps: PropTypes.object,
+  componentsProps: PropTypes.shape({
+    input: PropTypes.object,
+    root: PropTypes.object
+  }),
 
   /**
    * The default value. Use when the component is not controlled.

package/modern/InputLabel/InputLabel.js

@@ -82,6 +82,8 @@ const InputLabelRoot = styled(FormLabel, {
 }, ownerState.size === 'small' && {
   transform: 'translate(12px, 13px) scale(1)'
 }, ownerState.shrink && _extends({
+  userSelect: 'none',
+  pointerEvents: 'auto',
   transform: 'translate(12px, 7px) scale(0.75)',
   maxWidth: 'calc(133% - 24px)'
 }, ownerState.size === 'small' && {
@@ -95,6 +97,8 @@ const InputLabelRoot = styled(FormLabel, {
 }, ownerState.size === 'small' && {
   transform: 'translate(14px, 9px) scale(1)'
 }, ownerState.shrink && {
+  userSelect: 'none',
+  pointerEvents: 'auto',
   maxWidth: 'calc(133% - 24px)',
   transform: 'translate(14px, -9px) scale(0.75)'
 })));

package/modern/ListItem/ListItem.js

@@ -346,7 +346,9 @@ process.env.NODE_ENV !== "production" ? ListItem.propTypes
    * The props used for each slot inside the Input.
    * @default {}
    */
-  componentsProps: PropTypes.object,
+  componentsProps: PropTypes.shape({
+    root: PropTypes.object
+  }),
 
   /**
    * The container component used when a `ListItemSecondaryAction` is the last child.

package/modern/Modal/Modal.js

@@ -177,7 +177,9 @@ process.env.NODE_ENV !== "production" ? Modal.propTypes
    * The props used for each slot inside the Modal.
    * @default {}
    */
-  componentsProps: PropTypes.object,
+  componentsProps: PropTypes.shape({
+    root: PropTypes.object
+  }),
 
   /**
    * An HTML element or function that returns one.

package/modern/OutlinedInput/NotchedOutline.js

@@ -1,5 +1,8 @@
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
+
+var _span;
+
 const _excluded = ["children", "classes", "className", "label", "notched"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
@@ -21,14 +24,12 @@ const NotchedOutlineRoot = styled('fieldset')({
   overflow: 'hidden',
   minWidth: '0%'
 });
-const NotchedOutlineLegend = styled('legend', {
-  skipSx: true
-})(({
+const NotchedOutlineLegend = styled('legend')(({
   ownerState,
   theme
 }) => _extends({
   float: 'unset'
-}, ownerState.label === undefined && {
+}, !ownerState.withLabel && {
   padding: 0,
   lineHeight: '11px',
   // sync with `height` in `legend` styles
@@ -36,7 +37,7 @@ const NotchedOutlineLegend = styled('legend', {
     duration: 150,
     easing: theme.transitions.easing.easeOut
   })
-}, ownerState.label !== undefined && _extends({
+}, ownerState.withLabel && _extends({
   display: 'block',
   // Fix conflict with normalize.css and sanitize.css
   width: 'auto',
@@ -77,9 +78,11 @@ export default function NotchedOutline(props) {
   } = props,
         other = _objectWithoutPropertiesLoose(props, _excluded);
 
+  const withLabel = label != null && label !== '';
+
   const ownerState = _extends({}, props, {
     notched,
-    label
+    withLabel
   });
 
   return /*#__PURE__*/_jsx(NotchedOutlineRoot, _extends({
@@ -89,18 +92,13 @@ export default function NotchedOutline(props) {
   }, other, {
     children: /*#__PURE__*/_jsx(NotchedOutlineLegend, {
       ownerState: ownerState,
-      children: label ? /*#__PURE__*/_jsx("span", {
+      children: withLabel ? /*#__PURE__*/_jsx("span", {
         children: label
-      }) :
-      /*#__PURE__*/
-      // notranslate needed while Google Translate will not fix zero-width space issue
-      // eslint-disable-next-line react/no-danger
-      _jsx("span", {
+      }) : // notranslate needed while Google Translate will not fix zero-width space issue
+      _span || (_span = /*#__PURE__*/_jsx("span", {
         className: "notranslate",
-        dangerouslySetInnerHTML: {
-          __html: '​'
-        }
-      })
+        children: "\u200B"
+      }))
     })
   }));
 }

package/modern/OutlinedInput/OutlinedInput.js

@@ -136,7 +136,7 @@ const OutlinedInput = /*#__PURE__*/React.forwardRef(function OutlinedInput(inPro
     }, components),
     renderSuffix: state => /*#__PURE__*/_jsx(NotchedOutlineRoot, {
       className: classes.notchedOutline,
-      label: label && fcs.required ? _React$Fragment || (_React$Fragment = /*#__PURE__*/_jsxs(React.Fragment, {
+      label: label != null && label !== '' && fcs.required ? _React$Fragment || (_React$Fragment = /*#__PURE__*/_jsxs(React.Fragment, {
         children: [label, "\xA0", '*']
       })) : label,
       notched: typeof notched !== 'undefined' ? notched : Boolean(state.startAdornment || state.filled || state.focused)

package/modern/Radio/RadioButtonIcon.js

@@ -10,15 +10,11 @@ const RadioButtonIconRoot = styled('span')({
   position: 'relative',
   display: 'flex'
 });
-const RadioButtonIconBackground = styled(RadioButtonUncheckedIcon, {
-  skipSx: true
-})({
+const RadioButtonIconBackground = styled(RadioButtonUncheckedIcon)({
   // Scale applied to prevent dot misalignment in Safari
   transform: 'scale(1)'
 });
-const RadioButtonIconDot = styled(RadioButtonCheckedIcon, {
-  skipSx: true
-})(({
+const RadioButtonIconDot = styled(RadioButtonCheckedIcon)(({
   theme,
   ownerState
 }) => _extends({

package/modern/Select/Select.js

@@ -3,7 +3,7 @@ import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWith
 
 var _Input, _FilledInput;
 
-const _excluded = ["autoWidth", "children", "classes", "className", "displayEmpty", "IconComponent", "id", "input", "inputProps", "label", "labelId", "MenuProps", "multiple", "native", "onClose", "onOpen", "open", "renderValue", "SelectDisplayProps", "variant"];
+const _excluded = ["autoWidth", "children", "classes", "className", "defaultOpen", "displayEmpty", "IconComponent", "id", "input", "inputProps", "label", "labelId", "MenuProps", "multiple", "native", "onClose", "onOpen", "open", "renderValue", "SelectDisplayProps", "variant"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
@@ -38,6 +38,7 @@ const Select = /*#__PURE__*/React.forwardRef(function Select(inProps, ref) {
     children,
     classes: classesProp = {},
     className,
+    defaultOpen = false,
     displayEmpty = false,
     IconComponent = ArrowDropDownIcon,
     id,
@@ -94,6 +95,7 @@ const Select = /*#__PURE__*/React.forwardRef(function Select(inProps, ref) {
       id
     } : {
       autoWidth,
+      defaultOpen,
       displayEmpty,
       labelId,
       MenuProps,
@@ -148,6 +150,13 @@ process.env.NODE_ENV !== "production" ? Select.propTypes
    */
   className: PropTypes.string,
 
+  /**
+   * If `true`, the component is initially open. Use when the component open state is not controlled (i.e. the `open` prop is not defined).
+   * You can only use it when the `native` prop is `false` (default).
+   * @default false
+   */
+  defaultOpen: PropTypes.bool,
+
   /**
    * The default value. Use when the component is not controlled.
    */