@mui/material 5.2.8 → 5.3.0

package/TextField/textFieldClasses.d.ts

@@ -1,8 +1,8 @@
-export interface TextFieldClasses {
-    /** Styles applied to the root element. */
-    root: string;
-}
-export declare type TextFieldClassKey = keyof TextFieldClasses;
-export declare function getTextFieldUtilityClass(slot: string): string;
-declare const textFieldClasses: TextFieldClasses;
-export default textFieldClasses;
+export interface TextFieldClasses {
+    /** Styles applied to the root element. */
+    root: string;
+}
+export declare type TextFieldClassKey = keyof TextFieldClasses;
+export declare function getTextFieldUtilityClass(slot: string): string;
+declare const textFieldClasses: TextFieldClasses;
+export default textFieldClasses;

package/ToggleButton/toggleButtonClasses.d.ts

@@ -1,24 +1,24 @@
-export interface ToggleButtonClasses {
-    /** Styles applied to the root element. */
-    root: string;
-    /** State class applied to the root element if `disabled={true}`. */
-    disabled: string;
-    /** State class applied to the root element if `selected={true}`. */
-    selected: string;
-    /** State class applied to the root element if `color="standard"`. */
-    standard: string;
-    /** State class applied to the root element if `color="primary"`. */
-    primary: string;
-    /** State class applied to the root element if `color="secondary"`. */
-    secondary: string;
-    /** Styles applied to the root element if `size="small"`. */
-    sizeSmall: string;
-    /** Styles applied to the root element if `size="medium"`. */
-    sizeMedium: string;
-    /** Styles applied to the root element if `size="large"`. */
-    sizeLarge: string;
-}
-export declare type ToggleButtonClassKey = keyof ToggleButtonClasses;
-export declare function getToggleButtonUtilityClass(slot: string): string;
-declare const toggleButtonClasses: ToggleButtonClasses;
-export default toggleButtonClasses;
+export interface ToggleButtonClasses {
+    /** Styles applied to the root element. */
+    root: string;
+    /** State class applied to the root element if `disabled={true}`. */
+    disabled: string;
+    /** State class applied to the root element if `selected={true}`. */
+    selected: string;
+    /** State class applied to the root element if `color="standard"`. */
+    standard: string;
+    /** State class applied to the root element if `color="primary"`. */
+    primary: string;
+    /** State class applied to the root element if `color="secondary"`. */
+    secondary: string;
+    /** Styles applied to the root element if `size="small"`. */
+    sizeSmall: string;
+    /** Styles applied to the root element if `size="medium"`. */
+    sizeMedium: string;
+    /** Styles applied to the root element if `size="large"`. */
+    sizeLarge: string;
+}
+export declare type ToggleButtonClassKey = keyof ToggleButtonClasses;
+export declare function getToggleButtonUtilityClass(slot: string): string;
+declare const toggleButtonClasses: ToggleButtonClasses;
+export default toggleButtonClasses;

package/ToggleButtonGroup/toggleButtonGroupClasses.d.ts

@@ -1,18 +1,18 @@
-export interface ToggleButtonGroupClasses {
-    /** Styles applied to the root element. */
-    root: string;
-    /** Styles applied to the root element if `orientation="vertical"`. */
-    vertical: string;
-    /** State class applied to the root element if `disabled={true}`. */
-    disabled: string;
-    /** Styles applied to the children. */
-    grouped: string;
-    /** Styles applied to the children if `orientation="horizontal"`. */
-    groupedHorizontal: string;
-    /** Styles applied to the children if `orientation="vertical"`. */
-    groupedVertical: string;
-}
-export declare type ToggleButtonGroupClassKey = keyof ToggleButtonGroupClasses;
-export declare function getToggleButtonGroupUtilityClass(slot: string): string;
-declare const toggleButtonGroupClasses: ToggleButtonGroupClasses;
-export default toggleButtonGroupClasses;
+export interface ToggleButtonGroupClasses {
+    /** Styles applied to the root element. */
+    root: string;
+    /** Styles applied to the root element if `orientation="vertical"`. */
+    vertical: string;
+    /** State class applied to the root element if `disabled={true}`. */
+    disabled: string;
+    /** Styles applied to the children. */
+    grouped: string;
+    /** Styles applied to the children if `orientation="horizontal"`. */
+    groupedHorizontal: string;
+    /** Styles applied to the children if `orientation="vertical"`. */
+    groupedVertical: string;
+}
+export declare type ToggleButtonGroupClassKey = keyof ToggleButtonGroupClasses;
+export declare function getToggleButtonGroupUtilityClass(slot: string): string;
+declare const toggleButtonGroupClasses: ToggleButtonGroupClasses;
+export default toggleButtonGroupClasses;

package/Toolbar/toolbarClasses.d.ts

@@ -1,14 +1,14 @@
-export interface ToolbarClasses {
-    /** Styles applied to the root element. */
-    root: string;
-    /** Styles applied to the root element unless `disableGutters={true}`. */
-    gutters: string;
-    /** Styles applied to the root element if `variant="regular"`. */
-    regular: string;
-    /** Styles applied to the root element if `variant="dense"`. */
-    dense: string;
-}
-export declare type ToolbarClassKey = keyof ToolbarClasses;
-export declare function getToolbarUtilityClass(slot: string): string;
-declare const toolbarClasses: ToolbarClasses;
-export default toolbarClasses;
+export interface ToolbarClasses {
+    /** Styles applied to the root element. */
+    root: string;
+    /** Styles applied to the root element unless `disableGutters={true}`. */
+    gutters: string;
+    /** Styles applied to the root element if `variant="regular"`. */
+    regular: string;
+    /** Styles applied to the root element if `variant="dense"`. */
+    dense: string;
+}
+export declare type ToolbarClassKey = keyof ToolbarClasses;
+export declare function getToolbarUtilityClass(slot: string): string;
+declare const toolbarClasses: ToolbarClasses;
+export default toolbarClasses;

package/Tooltip/tooltipClasses.d.ts

@@ -1,30 +1,30 @@
-export interface TooltipClasses {
-    /** Styles applied to the Popper component. */
-    popper: string;
-    /** Styles applied to the Popper component unless `disableInteractive={true}`. */
-    popperInteractive: string;
-    /** Styles applied to the Popper component if `arrow={true}`. */
-    popperArrow: string;
-    /** Styles applied to the Popper component unless the tooltip is open. */
-    popperClose: string;
-    /** Styles applied to the tooltip (label wrapper) element. */
-    tooltip: string;
-    /** Styles applied to the tooltip (label wrapper) element if `arrow={true}`. */
-    tooltipArrow: string;
-    /** Styles applied to the arrow element. */
-    arrow: string;
-    /** Styles applied to the tooltip (label wrapper) element if the tooltip is opened by touch. */
-    touch: string;
-    /** Styles applied to the tooltip (label wrapper) element if `placement` contains "left". */
-    tooltipPlacementLeft: string;
-    /** Styles applied to the tooltip (label wrapper) element if `placement` contains "right". */
-    tooltipPlacementRight: string;
-    /** Styles applied to the tooltip (label wrapper) element if `placement` contains "top". */
-    tooltipPlacementTop: string;
-    /** Styles applied to the tooltip (label wrapper) element if `placement` contains "bottom". */
-    tooltipPlacementBottom: string;
-}
-export declare type TooltipClassKey = keyof TooltipClasses;
-export declare function getTooltipUtilityClass(slot: string): string;
-declare const tooltipClasses: TooltipClasses;
-export default tooltipClasses;
+export interface TooltipClasses {
+    /** Styles applied to the Popper component. */
+    popper: string;
+    /** Styles applied to the Popper component unless `disableInteractive={true}`. */
+    popperInteractive: string;
+    /** Styles applied to the Popper component if `arrow={true}`. */
+    popperArrow: string;
+    /** Styles applied to the Popper component unless the tooltip is open. */
+    popperClose: string;
+    /** Styles applied to the tooltip (label wrapper) element. */
+    tooltip: string;
+    /** Styles applied to the tooltip (label wrapper) element if `arrow={true}`. */
+    tooltipArrow: string;
+    /** Styles applied to the arrow element. */
+    arrow: string;
+    /** Styles applied to the tooltip (label wrapper) element if the tooltip is opened by touch. */
+    touch: string;
+    /** Styles applied to the tooltip (label wrapper) element if `placement` contains "left". */
+    tooltipPlacementLeft: string;
+    /** Styles applied to the tooltip (label wrapper) element if `placement` contains "right". */
+    tooltipPlacementRight: string;
+    /** Styles applied to the tooltip (label wrapper) element if `placement` contains "top". */
+    tooltipPlacementTop: string;
+    /** Styles applied to the tooltip (label wrapper) element if `placement` contains "bottom". */
+    tooltipPlacementBottom: string;
+}
+export declare type TooltipClassKey = keyof TooltipClasses;
+export declare function getTooltipUtilityClass(slot: string): string;
+declare const tooltipClasses: TooltipClasses;
+export default tooltipClasses;

package/Typography/typographyClasses.d.ts

@@ -1,50 +1,50 @@
-export interface TypographyClasses {
-    /** Styles applied to the root element. */
-    root: string;
-    /** Styles applied to the root element if `variant="body2"`. */
-    body2: string;
-    /** Styles applied to the root element if `variant="body1"`. */
-    body1: string;
-    /** Styles applied to the root element if `variant="caption"`. */
-    caption: string;
-    /** Styles applied to the root element if `variant="button"`. */
-    button: string;
-    /** Styles applied to the root element if `variant="h1"`. */
-    h1: string;
-    /** Styles applied to the root element if `variant="h2"`. */
-    h2: string;
-    /** Styles applied to the root element if `variant="h3"`. */
-    h3: string;
-    /** Styles applied to the root element if `variant="h4"`. */
-    h4: string;
-    /** Styles applied to the root element if `variant="h5"`. */
-    h5: string;
-    /** Styles applied to the root element if `variant="h6"`. */
-    h6: string;
-    /** Styles applied to the root element if `variant="subtitle1"`. */
-    subtitle1: string;
-    /** Styles applied to the root element if `variant="subtitle2"`. */
-    subtitle2: string;
-    /** Styles applied to the root element if `variant="overline"`. */
-    overline: string;
-    /** Styles applied to the root element if `variant="inherit"`. */
-    inherit: string;
-    /** Styles applied to the root element if `align="left"`. */
-    alignLeft: string;
-    /** Styles applied to the root element if `align="center"`. */
-    alignCenter: string;
-    /** Styles applied to the root element if `align="right"`. */
-    alignRight: string;
-    /** Styles applied to the root element if `align="justify"`. */
-    alignJustify: string;
-    /** Styles applied to the root element if `nowrap={true}`. */
-    noWrap: string;
-    /** Styles applied to the root element if `gutterBottom={true}`. */
-    gutterBottom: string;
-    /** Styles applied to the root element if `paragraph={true}`. */
-    paragraph: string;
-}
-export declare type TypographyClassKey = keyof TypographyClasses;
-export declare function getTypographyUtilityClass(slot: string): string;
-declare const typographyClasses: TypographyClasses;
-export default typographyClasses;
+export interface TypographyClasses {
+    /** Styles applied to the root element. */
+    root: string;
+    /** Styles applied to the root element if `variant="body2"`. */
+    body2: string;
+    /** Styles applied to the root element if `variant="body1"`. */
+    body1: string;
+    /** Styles applied to the root element if `variant="caption"`. */
+    caption: string;
+    /** Styles applied to the root element if `variant="button"`. */
+    button: string;
+    /** Styles applied to the root element if `variant="h1"`. */
+    h1: string;
+    /** Styles applied to the root element if `variant="h2"`. */
+    h2: string;
+    /** Styles applied to the root element if `variant="h3"`. */
+    h3: string;
+    /** Styles applied to the root element if `variant="h4"`. */
+    h4: string;
+    /** Styles applied to the root element if `variant="h5"`. */
+    h5: string;
+    /** Styles applied to the root element if `variant="h6"`. */
+    h6: string;
+    /** Styles applied to the root element if `variant="subtitle1"`. */
+    subtitle1: string;
+    /** Styles applied to the root element if `variant="subtitle2"`. */
+    subtitle2: string;
+    /** Styles applied to the root element if `variant="overline"`. */
+    overline: string;
+    /** Styles applied to the root element if `variant="inherit"`. */
+    inherit: string;
+    /** Styles applied to the root element if `align="left"`. */
+    alignLeft: string;
+    /** Styles applied to the root element if `align="center"`. */
+    alignCenter: string;
+    /** Styles applied to the root element if `align="right"`. */
+    alignRight: string;
+    /** Styles applied to the root element if `align="justify"`. */
+    alignJustify: string;
+    /** Styles applied to the root element if `nowrap={true}`. */
+    noWrap: string;
+    /** Styles applied to the root element if `gutterBottom={true}`. */
+    gutterBottom: string;
+    /** Styles applied to the root element if `paragraph={true}`. */
+    paragraph: string;
+}
+export declare type TypographyClassKey = keyof TypographyClasses;
+export declare function getTypographyUtilityClass(slot: string): string;
+declare const typographyClasses: TypographyClasses;
+export default typographyClasses;

package/darkScrollbar/index.d.ts

@@ -1,28 +1,28 @@
-export default function darkScrollbar(options?: {
-    track: string;
-    thumb: string;
-    active: string;
-}): {
-    scrollbarColor: string;
-    '&::-webkit-scrollbar, & *::-webkit-scrollbar': {
-        backgroundColor: string;
-    };
-    '&::-webkit-scrollbar-thumb, & *::-webkit-scrollbar-thumb': {
-        borderRadius: number;
-        backgroundColor: string;
-        minHeight: number;
-        border: string;
-    };
-    '&::-webkit-scrollbar-thumb:focus, & *::-webkit-scrollbar-thumb:focus': {
-        backgroundColor: string;
-    };
-    '&::-webkit-scrollbar-thumb:active, & *::-webkit-scrollbar-thumb:active': {
-        backgroundColor: string;
-    };
-    '&::-webkit-scrollbar-thumb:hover, & *::-webkit-scrollbar-thumb:hover': {
-        backgroundColor: string;
-    };
-    '&::-webkit-scrollbar-corner, & *::-webkit-scrollbar-corner': {
-        backgroundColor: string;
-    };
-};
+export default function darkScrollbar(options?: {
+    track: string;
+    thumb: string;
+    active: string;
+}): {
+    scrollbarColor: string;
+    '&::-webkit-scrollbar, & *::-webkit-scrollbar': {
+        backgroundColor: string;
+    };
+    '&::-webkit-scrollbar-thumb, & *::-webkit-scrollbar-thumb': {
+        borderRadius: number;
+        backgroundColor: string;
+        minHeight: number;
+        border: string;
+    };
+    '&::-webkit-scrollbar-thumb:focus, & *::-webkit-scrollbar-thumb:focus': {
+        backgroundColor: string;
+    };
+    '&::-webkit-scrollbar-thumb:active, & *::-webkit-scrollbar-thumb:active': {
+        backgroundColor: string;
+    };
+    '&::-webkit-scrollbar-thumb:hover, & *::-webkit-scrollbar-thumb:hover': {
+        backgroundColor: string;
+    };
+    '&::-webkit-scrollbar-corner, & *::-webkit-scrollbar-corner': {
+        backgroundColor: string;
+    };
+};

package/index.js

@@ -1,4 +1,4 @@
-/** @license MUI v5.2.8
+/** @license MUI v5.3.0
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.

package/internal/switchBaseClasses.d.ts

@@ -1,12 +1,12 @@
-export interface SwitchBaseClasses {
-    root: string;
-    checked: string;
-    disabled: string;
-    input: string;
-    edgeStart: string;
-    edgeEnd: string;
-}
-export declare type SwitchBaseClassKey = keyof SwitchBaseClasses;
-export declare function getSwitchBaseUtilityClass(slot: string): string;
-declare const switchBaseClasses: SwitchBaseClasses;
-export default switchBaseClasses;
+export interface SwitchBaseClasses {
+    root: string;
+    checked: string;
+    disabled: string;
+    input: string;
+    edgeStart: string;
+    edgeEnd: string;
+}
+export declare type SwitchBaseClassKey = keyof SwitchBaseClasses;
+export declare function getSwitchBaseUtilityClass(slot: string): string;
+declare const switchBaseClasses: SwitchBaseClasses;
+export default switchBaseClasses;

package/legacy/Autocomplete/Autocomplete.js

@@ -316,7 +316,7 @@ var AutocompleteGroupUl = styled('ul', {
 }));
 export { createFilterOptions };
 var Autocomplete = /*#__PURE__*/React.forwardRef(function Autocomplete(inProps, ref) {
-  var _componentsProps$clea;
+  var _componentsProps$clea, _componentsProps$pape;
 
   var props = useThemeProps({
     props: inProps,
@@ -596,10 +596,11 @@ var 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$pape = componentsProps.paper) == null ? void 0 : _componentsProps$pape.className),
         children: [loading && groupedOptions.length === 0 ? /*#__PURE__*/_jsx(AutocompleteLoading, {
           className: classes.loading,
           ownerState: ownerState,
@@ -632,7 +633,7 @@ var Autocomplete = /*#__PURE__*/React.forwardRef(function Autocomplete(inProps,
             return renderListOption(option, index);
           })
         })) : null]
-      })
+      }))
     }) : null]
   });
 });
@@ -734,7 +735,8 @@ process.env.NODE_ENV !== "production" ? Autocomplete.propTypes
    * @default {}
    */
   componentsProps: PropTypes.shape({
-    clearIndicator: PropTypes.object
+    clearIndicator: PropTypes.object,
+    paper: PropTypes.object
   }),
 
   /**

package/legacy/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 var badgeClasses = _extends({}, badgeUnstyledClasses, generateUtilityClasses('MuiBadge', ['colorError', 'colorInfo', 'colorPrimary', 'colorSecondary', 'colorSuccess', 'colorWarning', 'overlapRectangular', 'overlapCircular', // TODO: v6 remove the overlap value from these class keys
@@ -144,11 +145,6 @@ var BadgeBadge = styled('span', {
     })
   });
 });
-
-var shouldSpreadAdditionalProps = function shouldSpreadAdditionalProps(Slot) {
-  return !Slot || !isHostComponent(Slot);
-};
-
 var Badge = /*#__PURE__*/React.forwardRef(function Badge(inProps, ref) {
   var _componentsProps$root, _componentsProps$badg;
 

package/legacy/Select/Select.js

@@ -36,6 +36,8 @@ var Select = /*#__PURE__*/React.forwardRef(function Select(inProps, ref) {
       _props$classes = props.classes,
       classesProp = _props$classes === void 0 ? {} : _props$classes,
       className = props.className,
+      _props$defaultOpen = props.defaultOpen,
+      defaultOpen = _props$defaultOpen === void 0 ? false : _props$defaultOpen,
       _props$displayEmpty = props.displayEmpty,
       displayEmpty = _props$displayEmpty === void 0 ? false : _props$displayEmpty,
       _props$IconComponent = props.IconComponent,
@@ -57,7 +59,7 @@ var Select = /*#__PURE__*/React.forwardRef(function Select(inProps, ref) {
       SelectDisplayProps = props.SelectDisplayProps,
       _props$variant = props.variant,
       variantProps = _props$variant === void 0 ? 'outlined' : _props$variant,
-      other = _objectWithoutProperties(props, ["autoWidth", "children", "classes", "className", "displayEmpty", "IconComponent", "id", "input", "inputProps", "label", "labelId", "MenuProps", "multiple", "native", "onClose", "onOpen", "open", "renderValue", "SelectDisplayProps", "variant"]);
+      other = _objectWithoutProperties(props, ["autoWidth", "children", "classes", "className", "defaultOpen", "displayEmpty", "IconComponent", "id", "input", "inputProps", "label", "labelId", "MenuProps", "multiple", "native", "onClose", "onOpen", "open", "renderValue", "SelectDisplayProps", "variant"]);
 
   var inputComponent = native ? NativeSelectInput : SelectInput;
   var muiFormControl = useFormControl();
@@ -96,6 +98,7 @@ var Select = /*#__PURE__*/React.forwardRef(function Select(inProps, ref) {
       id: id
     } : {
       autoWidth: autoWidth,
+      defaultOpen: defaultOpen,
       displayEmpty: displayEmpty,
       labelId: labelId,
       MenuProps: MenuProps,
@@ -150,6 +153,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.
    */

package/legacy/Select/SelectInput.js

@@ -103,6 +103,7 @@ var SelectInput = /*#__PURE__*/React.forwardRef(function SelectInput(props, ref)
       autoWidth = props.autoWidth,
       children = props.children,
       className = props.className,
+      defaultOpen = props.defaultOpen,
       defaultValue = props.defaultValue,
       disabled = props.disabled,
       displayEmpty = props.displayEmpty,
@@ -128,7 +129,7 @@ var SelectInput = /*#__PURE__*/React.forwardRef(function SelectInput(props, ref)
       valueProp = props.value,
       _props$variant = props.variant,
       variant = _props$variant === void 0 ? 'standard' : _props$variant,
-      other = _objectWithoutProperties(props, ["aria-describedby", "aria-label", "autoFocus", "autoWidth", "children", "className", "defaultValue", "disabled", "displayEmpty", "IconComponent", "inputRef", "labelId", "MenuProps", "multiple", "name", "onBlur", "onChange", "onClose", "onFocus", "onOpen", "open", "readOnly", "renderValue", "SelectDisplayProps", "tabIndex", "type", "value", "variant"]);
+      other = _objectWithoutProperties(props, ["aria-describedby", "aria-label", "autoFocus", "autoWidth", "children", "className", "defaultOpen", "defaultValue", "disabled", "displayEmpty", "IconComponent", "inputRef", "labelId", "MenuProps", "multiple", "name", "onBlur", "onChange", "onClose", "onFocus", "onOpen", "open", "readOnly", "renderValue", "SelectDisplayProps", "tabIndex", "type", "value", "variant"]);
 
   var _useControlled = useControlled({
     controlled: valueProp,
@@ -139,6 +140,15 @@ var SelectInput = /*#__PURE__*/React.forwardRef(function SelectInput(props, ref)
       value = _useControlled2[0],
       setValueState = _useControlled2[1];
 
+  var _useControlled3 = useControlled({
+    controlled: openProp,
+    default: defaultOpen,
+    name: 'Select'
+  }),
+      _useControlled4 = _slicedToArray(_useControlled3, 2),
+      openState = _useControlled4[0],
+      setOpenState = _useControlled4[1];
+
   var inputRef = React.useRef(null);
   var displayRef = React.useRef(null);
 
@@ -153,10 +163,6 @@ var SelectInput = /*#__PURE__*/React.forwardRef(function SelectInput(props, ref)
       menuMinWidthState = _React$useState2[0],
       setMenuMinWidthState = _React$useState2[1];
 
-  var _React$useState3 = React.useState(false),
-      openState = _React$useState3[0],
-      setOpenState = _React$useState3[1];
-
   var handleRef = useForkRef(ref, inputRefProp);
   var handleDisplayRef = React.useCallback(function (node) {
     displayRef.current = node;
@@ -173,7 +179,17 @@ var SelectInput = /*#__PURE__*/React.forwardRef(function SelectInput(props, ref)
       node: inputRef.current,
       value: value
     };
-  }, [value]);
+  }, [value]); // Resize menu on `defaultOpen` automatic toggle.
+
+  React.useEffect(function () {
+    if (defaultOpen && openState && displayNode && !isOpenControlled) {
+      setMenuMinWidthState(autoWidth ? null : displayNode.clientWidth);
+      displayRef.current.focus();
+    } // eslint-disable-next-line react-hooks/exhaustive-deps
+
+  }, [displayNode, autoWidth]); // `isOpenControlled` is ignored because the component should never switch between controlled and uncontrolled modes.
+  // `defaultOpen` and `openState` are ignored to avoid unnecessary callbacks.
+
   React.useEffect(function () {
     if (autoFocus) {
       displayRef.current.focus();
@@ -313,7 +329,7 @@ var SelectInput = /*#__PURE__*/React.forwardRef(function SelectInput(props, ref)
     }
   };
 
-  var open = displayNode !== null && (isOpenControlled ? openProp : openState);
+  var open = displayNode !== null && openState;
 
   var handleBlur = function handleBlur(event) {
     // if open event.stopImmediatePropagation
@@ -580,6 +596,12 @@ process.env.NODE_ENV !== "production" ? SelectInput.propTypes = {
    */
   className: PropTypes.string,
 
+  /**
+   * If `true`, the component is toggled on mount. Use when the component open state is not controlled.
+   * You can only use it when the `native` prop is `false` (default).
+   */
+  defaultOpen: PropTypes.bool,
+
   /**
    * The default value. Use when the component is not controlled.
    */