@mui/material 5.13.2 → 5.13.3

package/node/Autocomplete/Autocomplete.js

@@ -34,9 +34,11 @@ var _useThemeProps = _interopRequireDefault(require("../styles/useThemeProps"));
 var _styled = _interopRequireDefault(require("../styles/styled"));
 var _autocompleteClasses = _interopRequireWildcard(require("./autocompleteClasses"));
 var _capitalize = _interopRequireDefault(require("../utils/capitalize"));
+var _useForkRef = _interopRequireDefault(require("../utils/useForkRef"));
 var _jsxRuntime = require("react/jsx-runtime");
 var _ClearIcon, _ArrowDropDownIcon;
-const _excluded = ["autoComplete", "autoHighlight", "autoSelect", "blurOnSelect", "ChipProps", "className", "clearIcon", "clearOnBlur", "clearOnEscape", "clearText", "closeText", "componentsProps", "defaultValue", "disableClearable", "disableCloseOnSelect", "disabled", "disabledItemsFocusable", "disableListWrap", "disablePortal", "filterOptions", "filterSelectedOptions", "forcePopupIcon", "freeSolo", "fullWidth", "getLimitTagsText", "getOptionDisabled", "getOptionLabel", "isOptionEqualToValue", "groupBy", "handleHomeEndKeys", "id", "includeInputInList", "inputValue", "limitTags", "ListboxComponent", "ListboxProps", "loading", "loadingText", "multiple", "noOptionsText", "onChange", "onClose", "onHighlightChange", "onInputChange", "onOpen", "open", "openOnFocus", "openText", "options", "PaperComponent", "PopperComponent", "popupIcon", "readOnly", "renderGroup", "renderInput", "renderOption", "renderTags", "selectOnFocus", "size", "slotProps", "value"];
+const _excluded = ["autoComplete", "autoHighlight", "autoSelect", "blurOnSelect", "ChipProps", "className", "clearIcon", "clearOnBlur", "clearOnEscape", "clearText", "closeText", "componentsProps", "defaultValue", "disableClearable", "disableCloseOnSelect", "disabled", "disabledItemsFocusable", "disableListWrap", "disablePortal", "filterOptions", "filterSelectedOptions", "forcePopupIcon", "freeSolo", "fullWidth", "getLimitTagsText", "getOptionDisabled", "getOptionLabel", "isOptionEqualToValue", "groupBy", "handleHomeEndKeys", "id", "includeInputInList", "inputValue", "limitTags", "ListboxComponent", "ListboxProps", "loading", "loadingText", "multiple", "noOptionsText", "onChange", "onClose", "onHighlightChange", "onInputChange", "onOpen", "open", "openOnFocus", "openText", "options", "PaperComponent", "PopperComponent", "popupIcon", "readOnly", "renderGroup", "renderInput", "renderOption", "renderTags", "selectOnFocus", "size", "slotProps", "value"],
+  _excluded2 = ["ref"];
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 const useUtilityClasses = ownerState => {
@@ -469,6 +471,15 @@ const Autocomplete = /*#__PURE__*/React.forwardRef(function Autocomplete(inProps
   const {
     onMouseDown: handleInputMouseDown
   } = getInputProps();
+  const {
+    ref: externalListboxRef
+  } = ListboxProps != null ? ListboxProps : {};
+  const _getListboxProps = getListboxProps(),
+    {
+      ref: listboxRef
+    } = _getListboxProps,
+    otherListboxProps = (0, _objectWithoutPropertiesLoose2.default)(_getListboxProps, _excluded2);
+  const combinedListboxRef = (0, _useForkRef.default)(listboxRef, externalListboxRef);
 
   // If you modify this, make sure to keep the `AutocompleteOwnerState` type in sync.
   const ownerState = (0, _extends2.default)({}, props, {
@@ -627,7 +638,8 @@ const Autocomplete = /*#__PURE__*/React.forwardRef(function Autocomplete(inProps
           as: ListboxComponent,
           className: classes.listbox,
           ownerState: ownerState
-        }, getListboxProps(), ListboxProps, {
+        }, otherListboxProps, ListboxProps, {
+          ref: combinedListboxRef,
           children: groupedOptions.map((option, index) => {
             if (groupBy) {
               return renderGroup({

package/node/Hidden/Hidden.js

@@ -88,22 +88,22 @@ process.env.NODE_ENV !== "production" ? Hidden.propTypes /* remove-proptypes */
    */
   initialWidth: _propTypes.default.oneOf(['xs', 'sm', 'md', 'lg', 'xl']),
   /**
-   * If `true`, screens this size and down are hidden.
+   * If `true`, component is hidden on screens below (but not including) this size.
    * @default false
    */
   lgDown: _propTypes.default.bool,
   /**
-   * If `true`, screens this size and up are hidden.
+   * If `true`, component is hidden on screens this size and above.
    * @default false
    */
   lgUp: _propTypes.default.bool,
   /**
-   * If `true`, screens this size and down are hidden.
+   * If `true`, component is hidden on screens below (but not including) this size.
    * @default false
    */
   mdDown: _propTypes.default.bool,
   /**
-   * If `true`, screens this size and up are hidden.
+   * If `true`, component is hidden on screens this size and above.
    * @default false
    */
   mdUp: _propTypes.default.bool,
@@ -112,32 +112,32 @@ process.env.NODE_ENV !== "production" ? Hidden.propTypes /* remove-proptypes */
    */
   only: _propTypes.default.oneOfType([_propTypes.default.oneOf(['xs', 'sm', 'md', 'lg', 'xl']), _propTypes.default.arrayOf(_propTypes.default.oneOf(['xs', 'sm', 'md', 'lg', 'xl']).isRequired)]),
   /**
-   * If `true`, screens this size and down are hidden.
+   * If `true`, component is hidden on screens below (but not including) this size.
    * @default false
    */
   smDown: _propTypes.default.bool,
   /**
-   * If `true`, screens this size and up are hidden.
+   * If `true`, component is hidden on screens this size and above.
    * @default false
    */
   smUp: _propTypes.default.bool,
   /**
-   * If `true`, screens this size and down are hidden.
+   * If `true`, component is hidden on screens below (but not including) this size.
    * @default false
    */
   xlDown: _propTypes.default.bool,
   /**
-   * If `true`, screens this size and up are hidden.
+   * If `true`, component is hidden on screens this size and above.
    * @default false
    */
   xlUp: _propTypes.default.bool,
   /**
-   * If `true`, screens this size and down are hidden.
+   * If `true`, component is hidden on screens below (but not including) this size.
    * @default false
    */
   xsDown: _propTypes.default.bool,
   /**
-   * If `true`, screens this size and up are hidden.
+   * If `true`, component is hidden on screens this size and above.
    * @default false
    */
   xsUp: _propTypes.default.bool

package/node/Hidden/withWidth.js

@@ -28,7 +28,7 @@ const isWidthUp = (breakpoint, width, inclusive = true) => {
   return breakpointKeys.indexOf(breakpoint) < breakpointKeys.indexOf(width);
 };
 
-// By default, returns true if screen width is the same or less than the given breakpoint.
+// By default, returns true if screen width is less than the given breakpoint.
 exports.isWidthUp = isWidthUp;
 const isWidthDown = (breakpoint, width, inclusive = false) => {
   if (inclusive) {

package/node/Modal/Modal.js

@@ -137,7 +137,7 @@ const Modal = /*#__PURE__*/React.forwardRef(function Modal(inProps, ref) {
         className: (0, _clsx.default)(className, rootSlotProps == null ? void 0 : rootSlotProps.className, classes == null ? void 0 : classes.root, !ownerState.open && ownerState.exited && (classes == null ? void 0 : classes.hidden))
       }),
       backdrop: () => (0, _extends2.default)({}, BackdropProps, (0, _utils.resolveComponentProps)(backdropSlotProps, ownerState), {
-        className: (0, _clsx.default)(backdropSlotProps == null ? void 0 : backdropSlotProps.className, classes == null ? void 0 : classes.backdrop)
+        className: (0, _clsx.default)(backdropSlotProps == null ? void 0 : backdropSlotProps.className, BackdropProps == null ? void 0 : BackdropProps.className, classes == null ? void 0 : classes.backdrop)
       })
     },
     onTransitionEnter: () => setExited(false),

package/node/index.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/material",
-  "version": "5.13.2",
+  "version": "5.13.3",
   "private": false,
   "author": "MUI Team",
   "description": "React components that implement Google's Material Design.",
@@ -46,8 +46,8 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.21.0",
-    "@mui/base": "5.0.0-beta.2",
-    "@mui/core-downloads-tracker": "^5.13.2",
+    "@mui/base": "5.0.0-beta.3",
+    "@mui/core-downloads-tracker": "^5.13.3",
     "@mui/system": "^5.13.2",
     "@mui/types": "^7.2.4",
     "@mui/utils": "^5.13.1",

package/styles/CssVarsProvider.d.ts

@@ -1,20 +1,20 @@
-/// <reference types="react" />
-import { SupportedColorScheme } from './experimental_extendTheme';
-declare const CssVarsProvider: (props: import("react").PropsWithChildren<Partial<import("@mui/system").CssVarsProviderConfig<SupportedColorScheme>> & {
-    theme?: {
-        cssVarPrefix?: string | undefined;
-        colorSchemes: Record<SupportedColorScheme, Record<string, any>>;
-    } | {
-        $$material: {
-            cssVarPrefix?: string | undefined;
-            colorSchemes: Record<SupportedColorScheme, Record<string, any>>;
-        };
-    } | undefined;
-    documentNode?: Document | null | undefined;
-    colorSchemeNode?: Element | null | undefined;
-    colorSchemeSelector?: string | undefined;
-    storageWindow?: Window | null | undefined;
-    disableNestedContext?: boolean | undefined;
-    disableStyleSheetGeneration?: boolean | undefined;
-}>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>, useColorScheme: () => import("@mui/system").ColorSchemeContextValue<SupportedColorScheme>, getInitColorSchemeScript: typeof import("@mui/system").getInitColorSchemeScript;
-export { useColorScheme, getInitColorSchemeScript, CssVarsProvider as Experimental_CssVarsProvider, };
+/// <reference types="react" />
+import { SupportedColorScheme } from './experimental_extendTheme';
+declare const CssVarsProvider: (props: import("react").PropsWithChildren<Partial<import("@mui/system").CssVarsProviderConfig<SupportedColorScheme>> & {
+    theme?: {
+        cssVarPrefix?: string | undefined;
+        colorSchemes: Record<SupportedColorScheme, Record<string, any>>;
+    } | {
+        $$material: {
+            cssVarPrefix?: string | undefined;
+            colorSchemes: Record<SupportedColorScheme, Record<string, any>>;
+        };
+    } | undefined;
+    documentNode?: Document | null | undefined;
+    colorSchemeNode?: Element | null | undefined;
+    colorSchemeSelector?: string | undefined;
+    storageWindow?: Window | null | undefined;
+    disableNestedContext?: boolean | undefined;
+    disableStyleSheetGeneration?: boolean | undefined;
+}>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>, useColorScheme: () => import("@mui/system").ColorSchemeContextValue<SupportedColorScheme>, getInitColorSchemeScript: typeof import("@mui/system").getInitColorSchemeScript;
+export { useColorScheme, getInitColorSchemeScript, CssVarsProvider as Experimental_CssVarsProvider, };

package/styles/excludeVariablesFromRoot.d.ts

@@ -1,5 +1,5 @@
-/**
- * @internal These variables should not appear in the :root stylesheet when the `defaultMode="dark"`
- */
-declare const excludeVariablesFromRoot: (cssVarPrefix: string) => string[];
-export default excludeVariablesFromRoot;
+/**
+ * @internal These variables should not appear in the :root stylesheet when the `defaultMode="dark"`
+ */
+declare const excludeVariablesFromRoot: (cssVarPrefix: string) => string[];
+export default excludeVariablesFromRoot;

package/styles/getOverlayAlpha.d.ts

@@ -1,2 +1,2 @@
-declare const getOverlayAlpha: (elevation: number) => string;
-export default getOverlayAlpha;
+declare const getOverlayAlpha: (elevation: number) => string;
+export default getOverlayAlpha;

package/styles/identifier.d.ts

@@ -1,2 +1,2 @@
-declare const _default: "$$material";
-export default _default;
+declare const _default: "$$material";
+export default _default;

package/styles/shouldSkipGeneratingVar.d.ts

@@ -1 +1 @@
-export default function shouldSkipGeneratingVar(keys: string[]): boolean;
+export default function shouldSkipGeneratingVar(keys: string[]): boolean;

package/transitions/index.d.ts

@@ -1 +1 @@
-export * from './transition';
+export * from './transition';

package/transitions/transition.d.ts

@@ -1,13 +1,13 @@
-import { TransitionProps as _TransitionProps, TransitionActions } from 'react-transition-group/Transition';
-import * as React from 'react';
-export type TransitionHandlerKeys = 'onEnter' | 'onEntering' | 'onEntered' | 'onExit' | 'onExiting' | 'onExited';
-export type TransitionHandlerProps = Pick<_TransitionProps, TransitionHandlerKeys>;
-export interface EasingProps {
-    easing: string | {
-        enter?: string;
-        exit?: string;
-    };
-}
-export type TransitionKeys = 'in' | 'mountOnEnter' | 'unmountOnExit' | 'timeout' | 'easing' | 'addEndListener' | TransitionHandlerKeys;
-export interface TransitionProps extends TransitionActions, Partial<Pick<_TransitionProps & EasingProps, TransitionKeys>>, React.HTMLAttributes<HTMLElement> {
-}
+import { TransitionProps as _TransitionProps, TransitionActions } from 'react-transition-group/Transition';
+import * as React from 'react';
+export type TransitionHandlerKeys = 'onEnter' | 'onEntering' | 'onEntered' | 'onExit' | 'onExiting' | 'onExited';
+export type TransitionHandlerProps = Pick<_TransitionProps, TransitionHandlerKeys>;
+export interface EasingProps {
+    easing: string | {
+        enter?: string;
+        exit?: string;
+    };
+}
+export type TransitionKeys = 'in' | 'mountOnEnter' | 'unmountOnExit' | 'timeout' | 'easing' | 'addEndListener' | TransitionHandlerKeys;
+export interface TransitionProps extends TransitionActions, Partial<Pick<_TransitionProps & EasingProps, TransitionKeys>>, React.HTMLAttributes<HTMLElement> {
+}

package/transitions/utils.d.ts

@@ -1,23 +1,23 @@
-import * as React from 'react';
-export declare const reflow: (node: Element) => number;
-interface ComponentProps {
-    easing: string | {
-        enter?: string;
-        exit?: string;
-    } | undefined;
-    style: React.CSSProperties | undefined;
-    timeout: number | {
-        enter?: number;
-        exit?: number;
-    };
-}
-interface Options {
-    mode: 'enter' | 'exit';
-}
-interface TransitionProps {
-    duration: string | number;
-    easing: string | undefined;
-    delay: string | undefined;
-}
-export declare function getTransitionProps(props: ComponentProps, options: Options): TransitionProps;
-export {};
+import * as React from 'react';
+export declare const reflow: (node: Element) => number;
+interface ComponentProps {
+    easing: string | {
+        enter?: string;
+        exit?: string;
+    } | undefined;
+    style: React.CSSProperties | undefined;
+    timeout: number | {
+        enter?: number;
+        exit?: number;
+    };
+}
+interface Options {
+    mode: 'enter' | 'exit';
+}
+interface TransitionProps {
+    duration: string | number;
+    easing: string | undefined;
+    delay: string | undefined;
+}
+export declare function getTransitionProps(props: ComponentProps, options: Options): TransitionProps;
+export {};

package/types/OverridableComponentAugmentation.d.ts

@@ -1,31 +1,31 @@
-import * as React from 'react';
-import { DistributiveOmit } from '@mui/types';
-declare module '@mui/material/OverridableComponent' {
-    /**
-     * A component whose root component can be controlled via a `component` prop.
-     *
-     * Adjusts valid props based on the type of `component`.
-     */
-    interface OverridableComponent<M extends OverridableTypeMap> {
-        <C extends React.ElementType>(props: {
-            /**
-             * The component used for the root node.
-             * Either a string to use a HTML element or a component.
-             */
-            component: C;
-        } & OverridePropsVer2<M, C>): JSX.Element;
-        (props: DefaultComponentPropsVer2<M>): JSX.Element;
-    }
-    /**
-     * Props of the component if `component={Component}` is used.
-     */
-    type OverridePropsVer2<M extends OverridableTypeMap, C extends React.ElementType> = (BaseProps<M> & DistributiveOmit<React.ComponentPropsWithoutRef<C>, keyof BaseProps<M>> & {
-        ref?: React.Ref<Element>;
-    });
-    /**
-     * Props if `component={Component}` is NOT used.
-     */
-    type DefaultComponentPropsVer2<M extends OverridableTypeMap> = BaseProps<M> & DistributiveOmit<React.ComponentPropsWithoutRef<M['defaultComponent']>, keyof BaseProps<M>> & {
-        ref?: React.Ref<Element>;
-    };
-}
+import * as React from 'react';
+import { DistributiveOmit } from '@mui/types';
+declare module '@mui/material/OverridableComponent' {
+    /**
+     * A component whose root component can be controlled via a `component` prop.
+     *
+     * Adjusts valid props based on the type of `component`.
+     */
+    interface OverridableComponent<M extends OverridableTypeMap> {
+        <C extends React.ElementType>(props: {
+            /**
+             * The component used for the root node.
+             * Either a string to use a HTML element or a component.
+             */
+            component: C;
+        } & OverridePropsVer2<M, C>): JSX.Element;
+        (props: DefaultComponentPropsVer2<M>): JSX.Element;
+    }
+    /**
+     * Props of the component if `component={Component}` is used.
+     */
+    type OverridePropsVer2<M extends OverridableTypeMap, C extends React.ElementType> = (BaseProps<M> & DistributiveOmit<React.ComponentPropsWithoutRef<C>, keyof BaseProps<M>> & {
+        ref?: React.Ref<Element>;
+    });
+    /**
+     * Props if `component={Component}` is NOT used.
+     */
+    type DefaultComponentPropsVer2<M extends OverridableTypeMap> = BaseProps<M> & DistributiveOmit<React.ComponentPropsWithoutRef<M['defaultComponent']>, keyof BaseProps<M>> & {
+        ref?: React.Ref<Element>;
+    };
+}

package/umd/material-ui.development.js

@@ -1,5 +1,5 @@
 /**
- * @mui/material v5.13.2
+ * @mui/material v5.13.3
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the
@@ -9028,7 +9028,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
   }
 
   const _excluded$2i = ["colorSchemes", "components"],
-    _excluded2$c = ["light"];
+    _excluded2$d = ["light"];
   function prepareCssVars(theme, parserConfig) {
     // @ts-ignore - ignore components do not exist
     const {
@@ -9045,7 +9045,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
     const {
         light
       } = colorSchemes,
-      otherColorSchemes = _objectWithoutPropertiesLoose(colorSchemes, _excluded2$c);
+      otherColorSchemes = _objectWithoutPropertiesLoose(colorSchemes, _excluded2$d);
     Object.entries(otherColorSchemes || {}).forEach(([key, scheme]) => {
       const {
         vars,
@@ -9797,7 +9797,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
   }
 
   const _excluded$2e = ["defaultProps", "mixins", "overrides", "palette", "props", "styleOverrides"],
-    _excluded2$b = ["type", "mode"];
+    _excluded2$c = ["type", "mode"];
   function adaptV4Theme(inputTheme) {
     {
       console.warn(['MUI: adaptV4Theme() is deprecated.', 'Follow the upgrade guide on https://mui.com/r/migration-v4#theme.'].join('\n'));
@@ -9862,7 +9862,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
         type: typeInput,
         mode: modeInput
       } = palette,
-      paletteRest = _objectWithoutPropertiesLoose(palette, _excluded2$b);
+      paletteRest = _objectWithoutPropertiesLoose(palette, _excluded2$c);
     const finalMode = modeInput || typeInput || 'light';
     theme.palette = _extends({
       // theme.palette.text.hint
@@ -10750,7 +10750,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   var getOverlayAlpha$1 = getOverlayAlpha;
 
   const _excluded$28 = ["colorSchemes", "cssVarPrefix", "shouldSkipGeneratingVar"],
-    _excluded2$a = ["palette"];
+    _excluded2$b = ["palette"];
   const defaultDarkOverlays = [...Array(25)].map((_, index) => {
     if (index === 0) {
       return undefined;
@@ -10801,7 +10801,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       {
         palette: lightPalette
       } = _createThemeWithoutVa,
-      muiTheme = _objectWithoutPropertiesLoose(_createThemeWithoutVa, _excluded2$a);
+      muiTheme = _objectWithoutPropertiesLoose(_createThemeWithoutVa, _excluded2$b);
     const {
       palette: darkPalette
     } = createTheme({
@@ -13876,7 +13876,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   generateUtilityClasses('MuiPopper', ['root']);
 
   const _excluded$26 = ["anchorEl", "children", "direction", "disablePortal", "modifiers", "open", "placement", "popperOptions", "popperRef", "slotProps", "slots", "TransitionProps", "ownerState"],
-    _excluded2$9 = ["anchorEl", "children", "container", "direction", "disablePortal", "keepMounted", "modifiers", "open", "placement", "popperOptions", "popperRef", "style", "transition", "slotProps", "slots"];
+    _excluded2$a = ["anchorEl", "children", "container", "direction", "disablePortal", "keepMounted", "modifiers", "open", "placement", "popperOptions", "popperRef", "style", "transition", "slotProps", "slots"];
   function flipPlacement(placement, direction) {
     if (direction === 'ltr') {
       return placement;
@@ -14060,7 +14060,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
         slotProps = {},
         slots = {}
       } = props,
-      other = _objectWithoutPropertiesLoose(props, _excluded2$9);
+      other = _objectWithoutPropertiesLoose(props, _excluded2$a);
     const [exited, setExited] = React__namespace.useState(true);
     const handleEnter = () => {
       setExited(false);
@@ -22612,7 +22612,8 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   var autocompleteClasses$1 = autocompleteClasses;
 
   var _ClearIcon, _ArrowDropDownIcon;
-  const _excluded$1N = ["autoComplete", "autoHighlight", "autoSelect", "blurOnSelect", "ChipProps", "className", "clearIcon", "clearOnBlur", "clearOnEscape", "clearText", "closeText", "componentsProps", "defaultValue", "disableClearable", "disableCloseOnSelect", "disabled", "disabledItemsFocusable", "disableListWrap", "disablePortal", "filterOptions", "filterSelectedOptions", "forcePopupIcon", "freeSolo", "fullWidth", "getLimitTagsText", "getOptionDisabled", "getOptionLabel", "isOptionEqualToValue", "groupBy", "handleHomeEndKeys", "id", "includeInputInList", "inputValue", "limitTags", "ListboxComponent", "ListboxProps", "loading", "loadingText", "multiple", "noOptionsText", "onChange", "onClose", "onHighlightChange", "onInputChange", "onOpen", "open", "openOnFocus", "openText", "options", "PaperComponent", "PopperComponent", "popupIcon", "readOnly", "renderGroup", "renderInput", "renderOption", "renderTags", "selectOnFocus", "size", "slotProps", "value"];
+  const _excluded$1N = ["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"],
+    _excluded2$9 = ["ref"];
   const useUtilityClasses$1w = ownerState => {
     const {
       classes,
@@ -23043,6 +23044,15 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     const {
       onMouseDown: handleInputMouseDown
     } = getInputProps();
+    const {
+      ref: externalListboxRef
+    } = ListboxProps != null ? ListboxProps : {};
+    const _getListboxProps = getListboxProps(),
+      {
+        ref: listboxRef
+      } = _getListboxProps,
+      otherListboxProps = _objectWithoutPropertiesLoose(_getListboxProps, _excluded2$9);
+    const combinedListboxRef = useForkRef(listboxRef, externalListboxRef);
 
     // If you modify this, make sure to keep the `AutocompleteOwnerState` type in sync.
     const ownerState = _extends({}, props, {
@@ -23201,7 +23211,8 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
             as: ListboxComponent,
             className: classes.listbox,
             ownerState: ownerState
-          }, getListboxProps(), ListboxProps, {
+          }, otherListboxProps, ListboxProps, {
+            ref: combinedListboxRef,
             children: groupedOptions.map((option, index) => {
               if (groupBy) {
                 return renderGroup({
@@ -27769,7 +27780,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
           className: clsx(className, rootSlotProps == null ? void 0 : rootSlotProps.className, classes == null ? void 0 : classes.root, !ownerState.open && ownerState.exited && (classes == null ? void 0 : classes.hidden))
         }),
         backdrop: () => _extends({}, BackdropProps, resolveComponentProps(backdropSlotProps, ownerState), {
-          className: clsx(backdropSlotProps == null ? void 0 : backdropSlotProps.className, classes == null ? void 0 : classes.backdrop)
+          className: clsx(backdropSlotProps == null ? void 0 : backdropSlotProps.className, BackdropProps == null ? void 0 : BackdropProps.className, classes == null ? void 0 : classes.backdrop)
         })
       },
       onTransitionEnter: () => setExited(false),
@@ -32067,7 +32078,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     return breakpointKeys.indexOf(breakpoint) < breakpointKeys.indexOf(width);
   };
 
-  // By default, returns true if screen width is the same or less than the given breakpoint.
+  // By default, returns true if screen width is less than the given breakpoint.
   const isWidthDown = (breakpoint, width, inclusive = false) => {
     if (inclusive) {
       return breakpointKeys.indexOf(width) <= breakpointKeys.indexOf(breakpoint);
@@ -32510,22 +32521,22 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
      */
     initialWidth: PropTypes.oneOf(['xs', 'sm', 'md', 'lg', 'xl']),
     /**
-     * If `true`, screens this size and down are hidden.
+     * If `true`, component is hidden on screens below (but not including) this size.
      * @default false
      */
     lgDown: PropTypes.bool,
     /**
-     * If `true`, screens this size and up are hidden.
+     * If `true`, component is hidden on screens this size and above.
      * @default false
      */
     lgUp: PropTypes.bool,
     /**
-     * If `true`, screens this size and down are hidden.
+     * If `true`, component is hidden on screens below (but not including) this size.
      * @default false
      */
     mdDown: PropTypes.bool,
     /**
-     * If `true`, screens this size and up are hidden.
+     * If `true`, component is hidden on screens this size and above.
      * @default false
      */
     mdUp: PropTypes.bool,
@@ -32534,32 +32545,32 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
      */
     only: PropTypes.oneOfType([PropTypes.oneOf(['xs', 'sm', 'md', 'lg', 'xl']), PropTypes.arrayOf(PropTypes.oneOf(['xs', 'sm', 'md', 'lg', 'xl']).isRequired)]),
     /**
-     * If `true`, screens this size and down are hidden.
+     * If `true`, component is hidden on screens below (but not including) this size.
      * @default false
      */
     smDown: PropTypes.bool,
     /**
-     * If `true`, screens this size and up are hidden.
+     * If `true`, component is hidden on screens this size and above.
      * @default false
      */
     smUp: PropTypes.bool,
     /**
-     * If `true`, screens this size and down are hidden.
+     * If `true`, component is hidden on screens below (but not including) this size.
      * @default false
      */
     xlDown: PropTypes.bool,
     /**
-     * If `true`, screens this size and up are hidden.
+     * If `true`, component is hidden on screens this size and above.
      * @default false
      */
     xlUp: PropTypes.bool,
     /**
-     * If `true`, screens this size and down are hidden.
+     * If `true`, component is hidden on screens below (but not including) this size.
      * @default false
      */
     xsDown: PropTypes.bool,
     /**
-     * If `true`, screens this size and up are hidden.
+     * If `true`, component is hidden on screens this size and above.
      * @default false
      */
     xsUp: PropTypes.bool