@mui/material 9.0.0-alpha.2 → 9.0.0-alpha.4

package/Popover/Popover.mjs

@@ -6,7 +6,6 @@ import clsx from 'clsx';
 import composeClasses from '@mui/utils/composeClasses';
 import HTMLElementType from '@mui/utils/HTMLElementType';
 import refType from '@mui/utils/refType';
-import elementTypeAcceptingRef from '@mui/utils/elementTypeAcceptingRef';
 import integerPropType from '@mui/utils/integerPropType';
 import chainPropTypes from '@mui/utils/chainPropTypes';
 import isHostComponent from '@mui/utils/isHostComponent';
@@ -101,19 +100,13 @@ const Popover = /*#__PURE__*/React.forwardRef(function Popover(inProps, ref) {
     elevation = 8,
     marginThreshold = 16,
     open,
-    PaperProps: PaperPropsProp = {},
-    // TODO: remove in v7
     slots = {},
     slotProps = {},
     transformOrigin = {
       vertical: 'top',
       horizontal: 'left'
     },
-    TransitionComponent,
-    // TODO: remove in v7
     transitionDuration: transitionDurationProp = 'auto',
-    TransitionProps = {},
-    // TODO: remove in v7
     disableScrollLock = false,
     ...other
   } = props;
@@ -125,9 +118,7 @@ const Popover = /*#__PURE__*/React.forwardRef(function Popover(inProps, ref) {
     elevation,
     marginThreshold,
     transformOrigin,
-    TransitionComponent,
-    transitionDuration: transitionDurationProp,
-    TransitionProps
+    transitionDuration: transitionDurationProp
   };
   const classes = useUtilityClasses(ownerState);
 
@@ -284,15 +275,8 @@ const Popover = /*#__PURE__*/React.forwardRef(function Popover(inProps, ref) {
   }, [anchorEl, open, setPositioningStyles]);
   let transitionDuration = transitionDurationProp;
   const externalForwardedProps = {
-    slots: {
-      transition: TransitionComponent,
-      ...slots
-    },
-    slotProps: {
-      transition: TransitionProps,
-      paper: PaperPropsProp,
-      ...slotProps
-    }
+    slots,
+    slotProps
   };
   const [TransitionSlot, transitionSlotProps] = useSlot('transition', {
     elementType: Grow,
@@ -442,25 +426,6 @@ process.env.NODE_ENV !== "production" ? Popover.propTypes /* remove-proptypes */
    * @default 'anchorEl'
    */
   anchorReference: PropTypes.oneOf(['anchorEl', 'anchorPosition', 'none']),
-  /**
-   * A backdrop component. This prop enables custom backdrop rendering.
-   * @deprecated Use `slots.backdrop` instead. This prop will be removed in a future major release. See [Migrating from deprecated APIs](https://mui.com/material-ui/migration/migrating-from-deprecated-apis/) for more details.
-   * @default styled(Backdrop, {
-   *   name: 'MuiModal',
-   *   slot: 'Backdrop',
-   *   overridesResolver: (props, styles) => {
-   *     return styles.backdrop;
-   *   },
-   * })({
-   *   zIndex: -1,
-   * })
-   */
-  BackdropComponent: PropTypes.elementType,
-  /**
-   * Props applied to the [`Backdrop`](/material-ui/api/backdrop/) element.
-   * @deprecated Use `slotProps.backdrop` instead. This prop will be removed in a future major release. See [Migrating from deprecated APIs](https://mui.com/material-ui/migration/migrating-from-deprecated-apis/) for more details.
-   */
-  BackdropProps: PropTypes.object,
   /**
    * The content of the component.
    */
@@ -506,17 +471,6 @@ process.env.NODE_ENV !== "production" ? Popover.propTypes /* remove-proptypes */
    * If `true`, the component is shown.
    */
   open: PropTypes.bool.isRequired,
-  /**
-   * Props applied to the [`Paper`](https://mui.com/material-ui/api/paper/) element.
-   *
-   * This prop is an alias for `slotProps.paper` and will be overridden by it if both are used.
-   * @deprecated Use `slotProps.paper` instead.
-   *
-   * @default {}
-   */
-  PaperProps: PropTypes /* @typescript-to-proptypes-ignore */.shape({
-    component: elementTypeAcceptingRef
-  }),
   /**
    * The props used for each slot inside.
    * @default {}
@@ -557,13 +511,6 @@ process.env.NODE_ENV !== "production" ? Popover.propTypes /* remove-proptypes */
     horizontal: PropTypes.oneOfType([PropTypes.oneOf(['center', 'left', 'right']), PropTypes.number]).isRequired,
     vertical: PropTypes.oneOfType([PropTypes.oneOf(['bottom', 'center', 'top']), PropTypes.number]).isRequired
   }),
-  /**
-   * The component used for the transition.
-   * [Follow this guide](https://mui.com/material-ui/transitions/#transitioncomponent-prop) to learn more about the requirements for this component.
-   * @deprecated use the `slots.transition` prop instead. This prop will be removed in a future major release. See [Migrating from deprecated APIs](https://mui.com/material-ui/migration/migrating-from-deprecated-apis/) for more details.
-   * @default Grow
-   */
-  TransitionComponent: PropTypes.elementType,
   /**
    * Set to 'auto' to automatically calculate transition time based on height.
    * @default 'auto'
@@ -572,13 +519,6 @@ process.env.NODE_ENV !== "production" ? Popover.propTypes /* remove-proptypes */
     appear: PropTypes.number,
     enter: PropTypes.number,
     exit: PropTypes.number
-  })]),
-  /**
-   * Props applied to the transition element.
-   * By default, the element is based on this [`Transition`](https://reactcommunity.org/react-transition-group/transition/) component.
-   * @deprecated use the `slotProps.transition` prop instead. This prop will be removed in a future major release. See [Migrating from deprecated APIs](https://mui.com/material-ui/migration/migrating-from-deprecated-apis/) for more details.
-   * @default {}
-   */
-  TransitionProps: PropTypes.object
+  })])
 } : void 0;
 export default Popover;

package/Popper/Popper.d.mts

@@ -8,23 +8,6 @@ export interface PopperProps extends Omit<BasePopperProps, 'direction'> {
    * Either a string to use a HTML element or a component.
    */
   component?: React.ElementType | undefined;
-  /**
-   * The components used for each slot inside the Popper.
-   * Either a string to use a HTML element or a component.
-   *
-   * @deprecated use the `slots` prop instead. This prop will be removed in a future major release. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/).
-   * @default {}
-   */
-  components?: {
-    Root?: React.ElementType | undefined;
-  } | undefined;
-  /**
-   * The props used for each slot inside the Popper.
-   *
-   * @deprecated use the `slotProps` prop instead. This prop will be removed in a future major release. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/).
-   * @default {}
-   */
-  componentsProps?: BasePopperProps['slotProps'] | undefined;
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */

package/Popper/Popper.d.ts

@@ -8,23 +8,6 @@ export interface PopperProps extends Omit<BasePopperProps, 'direction'> {
    * Either a string to use a HTML element or a component.
    */
   component?: React.ElementType | undefined;
-  /**
-   * The components used for each slot inside the Popper.
-   * Either a string to use a HTML element or a component.
-   *
-   * @deprecated use the `slots` prop instead. This prop will be removed in a future major release. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/).
-   * @default {}
-   */
-  components?: {
-    Root?: React.ElementType | undefined;
-  } | undefined;
-  /**
-   * The props used for each slot inside the Popper.
-   *
-   * @deprecated use the `slotProps` prop instead. This prop will be removed in a future major release. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/).
-   * @default {}
-   */
-  componentsProps?: BasePopperProps['slotProps'] | undefined;
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */

package/Popper/Popper.js

@@ -42,8 +42,6 @@ const Popper = /*#__PURE__*/React.forwardRef(function Popper(inProps, ref) {
   const {
     anchorEl,
     component,
-    components,
-    componentsProps,
     container,
     disablePortal,
     keepMounted,
@@ -57,7 +55,6 @@ const Popper = /*#__PURE__*/React.forwardRef(function Popper(inProps, ref) {
     slotProps,
     ...other
   } = props;
-  const RootComponent = slots?.root ?? components?.Root;
   const otherProps = {
     anchorEl,
     container,
@@ -74,10 +71,8 @@ const Popper = /*#__PURE__*/React.forwardRef(function Popper(inProps, ref) {
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(PopperRoot, {
     as: component,
     direction: isRtl ? 'rtl' : 'ltr',
-    slots: {
-      root: RootComponent
-    },
-    slotProps: slotProps ?? componentsProps,
+    slots: slots,
+    slotProps: slotProps,
     ...otherProps,
     ref: ref
   });
@@ -103,25 +98,6 @@ process.env.NODE_ENV !== "production" ? Popper.propTypes /* remove-proptypes */
    * Either a string to use a HTML element or a component.
    */
   component: _propTypes.default.elementType,
-  /**
-   * The components used for each slot inside the Popper.
-   * Either a string to use a HTML element or a component.
-   *
-   * @deprecated use the `slots` prop instead. This prop will be removed in a future major release. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/).
-   * @default {}
-   */
-  components: _propTypes.default.shape({
-    Root: _propTypes.default.elementType
-  }),
-  /**
-   * The props used for each slot inside the Popper.
-   *
-   * @deprecated use the `slotProps` prop instead. This prop will be removed in a future major release. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/).
-   * @default {}
-   */
-  componentsProps: _propTypes.default.shape({
-    root: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object])
-  }),
   /**
    * An HTML element or function that returns one.
    * The `container` will have the portal children appended to it.

package/Popper/Popper.mjs

@@ -35,8 +35,6 @@ const Popper = /*#__PURE__*/React.forwardRef(function Popper(inProps, ref) {
   const {
     anchorEl,
     component,
-    components,
-    componentsProps,
     container,
     disablePortal,
     keepMounted,
@@ -50,7 +48,6 @@ const Popper = /*#__PURE__*/React.forwardRef(function Popper(inProps, ref) {
     slotProps,
     ...other
   } = props;
-  const RootComponent = slots?.root ?? components?.Root;
   const otherProps = {
     anchorEl,
     container,
@@ -67,10 +64,8 @@ const Popper = /*#__PURE__*/React.forwardRef(function Popper(inProps, ref) {
   return /*#__PURE__*/_jsx(PopperRoot, {
     as: component,
     direction: isRtl ? 'rtl' : 'ltr',
-    slots: {
-      root: RootComponent
-    },
-    slotProps: slotProps ?? componentsProps,
+    slots: slots,
+    slotProps: slotProps,
     ...otherProps,
     ref: ref
   });
@@ -96,25 +91,6 @@ process.env.NODE_ENV !== "production" ? Popper.propTypes /* remove-proptypes */
    * Either a string to use a HTML element or a component.
    */
   component: PropTypes.elementType,
-  /**
-   * The components used for each slot inside the Popper.
-   * Either a string to use a HTML element or a component.
-   *
-   * @deprecated use the `slots` prop instead. This prop will be removed in a future major release. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/).
-   * @default {}
-   */
-  components: PropTypes.shape({
-    Root: PropTypes.elementType
-  }),
-  /**
-   * The props used for each slot inside the Popper.
-   *
-   * @deprecated use the `slotProps` prop instead. This prop will be removed in a future major release. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/).
-   * @default {}
-   */
-  componentsProps: PropTypes.shape({
-    root: PropTypes.oneOfType([PropTypes.func, PropTypes.object])
-  }),
   /**
    * An HTML element or function that returns one.
    * The `container` will have the portal children appended to it.

package/Popper/index.d.mts

@@ -1,4 +1,5 @@
 export { default } from "./Popper.mjs";
 export * from "./Popper.mjs";
+export { default as popperClasses } from "./popperClasses.mjs";
 export * from "./popperClasses.mjs";
 export { PopperPlacementType } from "./BasePopper.types.mjs";

package/Popper/index.d.ts

@@ -1,4 +1,5 @@
 export { default } from "./Popper.js";
 export * from "./Popper.js";
+export { default as popperClasses } from "./popperClasses.js";
 export * from "./popperClasses.js";
 export { PopperPlacementType } from "./BasePopper.types.js";

package/Popper/index.js

@@ -1,18 +1,27 @@
 "use strict";
 
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-var _exportNames = {};
+var _exportNames = {
+  popperClasses: true
+};
 Object.defineProperty(exports, "default", {
   enumerable: true,
   get: function () {
     return _Popper.default;
   }
 });
+Object.defineProperty(exports, "popperClasses", {
+  enumerable: true,
+  get: function () {
+    return _popperClasses.default;
+  }
+});
 var _Popper = _interopRequireDefault(require("./Popper"));
-var _popperClasses = require("./popperClasses");
+var _popperClasses = _interopRequireWildcard(require("./popperClasses"));
 Object.keys(_popperClasses).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;

package/Popper/index.mjs

@@ -1,2 +1,3 @@
 export { default } from "./Popper.mjs";
+export { default as popperClasses } from "./popperClasses.mjs";
 export * from "./popperClasses.mjs";

package/Select/SelectInput.js

@@ -25,6 +25,8 @@ var _slotShouldForwardProp = _interopRequireDefault(require("../styles/slotShoul
 var _useForkRef = _interopRequireDefault(require("../utils/useForkRef"));
 var _useControlled = _interopRequireDefault(require("../utils/useControlled"));
 var _selectClasses = _interopRequireWildcard(require("./selectClasses"));
+var _utils2 = require("./utils");
+var _SelectFocusSourceContext = require("./utils/SelectFocusSourceContext");
 var _jsxRuntime = require("react/jsx-runtime");
 var _span;
 const SelectSelect = (0, _zeroStyled.styled)(_NativeSelectInput.StyledSelectSelect, {
@@ -81,17 +83,6 @@ const SelectNativeInput = (0, _zeroStyled.styled)('input', {
   width: '100%',
   boxSizing: 'border-box'
 });
-function areEqualValues(a, b) {
-  if (typeof b === 'object' && b !== null) {
-    return a === b;
-  }
-
-  // The value could be a number, the DOM will stringify it anyway.
-  return String(a) === String(b);
-}
-function isEmpty(display) {
-  return display == null || typeof display === 'string' && !display.trim();
-}
 const useUtilityClasses = ownerState => {
   const {
     classes,
@@ -169,6 +160,7 @@ const SelectInput = /*#__PURE__*/React.forwardRef(function SelectInput(props, re
     current: isOpenControlled
   } = React.useRef(openProp != null);
   const [menuMinWidthState, setMenuMinWidthState] = React.useState();
+  const [openInteractionType, setOpenInteractionType] = React.useState(null);
   const handleRef = (0, _useForkRef.default)(ref, inputRefProp);
   const handleDisplayRef = React.useCallback(node => {
     displayRef.current = node;
@@ -237,11 +229,15 @@ const SelectInput = /*#__PURE__*/React.forwardRef(function SelectInput(props, re
   }, [labelId]);
   const update = (openParam, event) => {
     if (openParam) {
+      setOpenInteractionType((0, _utils2.getOpenInteractionType)(event));
       if (onOpen) {
         onOpen(event);
       }
-    } else if (onClose) {
-      onClose(event);
+    } else {
+      setOpenInteractionType(null);
+      if (onClose) {
+        onClose(event);
+      }
     }
     if (!isOpenControlled) {
       setMenuMinWidthState(autoWidth ? null : anchorElement.clientWidth);
@@ -377,12 +373,12 @@ const SelectInput = /*#__PURE__*/React.forwardRef(function SelectInput(props, re
       if (!Array.isArray(value)) {
         throw new Error(process.env.NODE_ENV !== "production" ? 'MUI: The `value` prop must be an array ' + 'when using the `Select` component with `multiple`.' : (0, _formatMuiErrorMessage.default)(2));
       }
-      selected = value.some(v => areEqualValues(v, child.props.value));
+      selected = value.some(v => (0, _utils2.areEqualValues)(v, child.props.value));
       if (selected && computeDisplay) {
         displayMultiple.push(child.props.children);
       }
     } else {
-      selected = areEqualValues(value, child.props.value);
+      selected = (0, _utils2.areEqualValues)(value, child.props.value);
       if (selected && computeDisplay) {
         displaySingle = child.props.children;
       }
@@ -459,15 +455,10 @@ const SelectInput = /*#__PURE__*/React.forwardRef(function SelectInput(props, re
     error
   };
   const classes = useUtilityClasses(ownerState);
-  const paperProps = {
-    ...MenuProps.PaperProps,
-    ...(typeof MenuProps.slotProps?.paper === 'function' ? MenuProps.slotProps.paper(ownerState) : MenuProps.slotProps?.paper)
-  };
-  const listProps = {
-    ...MenuProps.MenuListProps,
-    ...(typeof MenuProps.slotProps?.list === 'function' ? MenuProps.slotProps.list(ownerState) : MenuProps.slotProps?.list)
-  };
+  const menuPaperSlotProps = typeof MenuProps.slotProps?.paper === 'function' ? MenuProps.slotProps.paper(ownerState) : MenuProps.slotProps?.paper;
+  const menuListSlotProps = typeof MenuProps.slotProps?.list === 'function' ? MenuProps.slotProps.list(ownerState) : MenuProps.slotProps?.list;
   const listboxId = (0, _useId.default)();
+  const nativeInputId = (0, _useId.default)();
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(React.Fragment, {
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(SelectSelect, {
       as: "div",
@@ -493,7 +484,7 @@ const SelectInput = /*#__PURE__*/React.forwardRef(function SelectInput(props, re
       // The id is required for proper a11y
       ,
       id: buttonId,
-      children: isEmpty(display) ? // notranslate needed while Google Translate will not fix zero-width space issue
+      children: (0, _utils2.isEmpty)(display) ? // notranslate needed while Google Translate will not fix zero-width space issue
       _span || (_span = /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
         className: "notranslate",
         "aria-hidden": true,
@@ -512,44 +503,48 @@ const SelectInput = /*#__PURE__*/React.forwardRef(function SelectInput(props, re
       autoFocus: autoFocus,
       required: required,
       ...other,
+      id: other.id ?? nativeInputId,
       ownerState: ownerState
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(SelectIcon, {
       as: IconComponent,
       className: classes.icon,
       ownerState: ownerState
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Menu.default, {
-      id: `menu-${name || ''}`,
-      anchorEl: anchorElement,
-      open: open,
-      onClose: handleClose,
-      anchorOrigin: {
-        vertical: 'bottom',
-        horizontal: 'center'
-      },
-      transformOrigin: {
-        vertical: 'top',
-        horizontal: 'center'
-      },
-      ...MenuProps,
-      slotProps: {
-        ...MenuProps.slotProps,
-        list: {
-          'aria-labelledby': labelId,
-          role: 'listbox',
-          'aria-multiselectable': multiple ? 'true' : undefined,
-          disableListWrap: true,
-          id: listboxId,
-          ...listProps
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_SelectFocusSourceContext.SelectFocusSourceProvider, {
+      value: openInteractionType,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Menu.default, {
+        id: `menu-${name || ''}`,
+        anchorEl: anchorElement,
+        open: open,
+        onClose: handleClose,
+        anchorOrigin: {
+          vertical: 'bottom',
+          horizontal: 'center'
+        },
+        transformOrigin: {
+          vertical: 'top',
+          horizontal: 'center'
         },
-        paper: {
-          ...paperProps,
-          style: {
-            minWidth: menuMinWidth,
-            ...(paperProps != null ? paperProps.style : null)
+        ...MenuProps,
+        slotProps: {
+          ...MenuProps.slotProps,
+          list: {
+            'aria-labelledby': labelId,
+            role: 'listbox',
+            'aria-multiselectable': multiple ? 'true' : undefined,
+            disableListWrap: true,
+            id: listboxId,
+            ...menuListSlotProps
+          },
+          paper: {
+            ...menuPaperSlotProps,
+            style: {
+              minWidth: menuMinWidth,
+              ...menuPaperSlotProps?.style
+            }
           }
-        }
-      },
-      children: items
+        },
+        children: items
+      })
     })]
   });
 });

package/Select/SelectInput.mjs

@@ -19,6 +19,8 @@ import slotShouldForwardProp from "../styles/slotShouldForwardProp.mjs";
 import useForkRef from "../utils/useForkRef.mjs";
 import useControlled from "../utils/useControlled.mjs";
 import selectClasses, { getSelectUtilityClasses } from "./selectClasses.mjs";
+import { areEqualValues, isEmpty, getOpenInteractionType } from "./utils/index.mjs";
+import { SelectFocusSourceProvider } from "./utils/SelectFocusSourceContext.mjs";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const SelectSelect = styled(StyledSelectSelect, {
   name: 'MuiSelect',
@@ -74,17 +76,6 @@ const SelectNativeInput = styled('input', {
   width: '100%',
   boxSizing: 'border-box'
 });
-function areEqualValues(a, b) {
-  if (typeof b === 'object' && b !== null) {
-    return a === b;
-  }
-
-  // The value could be a number, the DOM will stringify it anyway.
-  return String(a) === String(b);
-}
-function isEmpty(display) {
-  return display == null || typeof display === 'string' && !display.trim();
-}
 const useUtilityClasses = ownerState => {
   const {
     classes,
@@ -162,6 +153,7 @@ const SelectInput = /*#__PURE__*/React.forwardRef(function SelectInput(props, re
     current: isOpenControlled
   } = React.useRef(openProp != null);
   const [menuMinWidthState, setMenuMinWidthState] = React.useState();
+  const [openInteractionType, setOpenInteractionType] = React.useState(null);
   const handleRef = useForkRef(ref, inputRefProp);
   const handleDisplayRef = React.useCallback(node => {
     displayRef.current = node;
@@ -230,11 +222,15 @@ const SelectInput = /*#__PURE__*/React.forwardRef(function SelectInput(props, re
   }, [labelId]);
   const update = (openParam, event) => {
     if (openParam) {
+      setOpenInteractionType(getOpenInteractionType(event));
       if (onOpen) {
         onOpen(event);
       }
-    } else if (onClose) {
-      onClose(event);
+    } else {
+      setOpenInteractionType(null);
+      if (onClose) {
+        onClose(event);
+      }
     }
     if (!isOpenControlled) {
       setMenuMinWidthState(autoWidth ? null : anchorElement.clientWidth);
@@ -452,15 +448,10 @@ const SelectInput = /*#__PURE__*/React.forwardRef(function SelectInput(props, re
     error
   };
   const classes = useUtilityClasses(ownerState);
-  const paperProps = {
-    ...MenuProps.PaperProps,
-    ...(typeof MenuProps.slotProps?.paper === 'function' ? MenuProps.slotProps.paper(ownerState) : MenuProps.slotProps?.paper)
-  };
-  const listProps = {
-    ...MenuProps.MenuListProps,
-    ...(typeof MenuProps.slotProps?.list === 'function' ? MenuProps.slotProps.list(ownerState) : MenuProps.slotProps?.list)
-  };
+  const menuPaperSlotProps = typeof MenuProps.slotProps?.paper === 'function' ? MenuProps.slotProps.paper(ownerState) : MenuProps.slotProps?.paper;
+  const menuListSlotProps = typeof MenuProps.slotProps?.list === 'function' ? MenuProps.slotProps.list(ownerState) : MenuProps.slotProps?.list;
   const listboxId = useId();
+  const nativeInputId = useId();
   return /*#__PURE__*/_jsxs(React.Fragment, {
     children: [/*#__PURE__*/_jsx(SelectSelect, {
       as: "div",
@@ -505,44 +496,48 @@ const SelectInput = /*#__PURE__*/React.forwardRef(function SelectInput(props, re
       autoFocus: autoFocus,
       required: required,
       ...other,
+      id: other.id ?? nativeInputId,
       ownerState: ownerState
     }), /*#__PURE__*/_jsx(SelectIcon, {
       as: IconComponent,
       className: classes.icon,
       ownerState: ownerState
-    }), /*#__PURE__*/_jsx(Menu, {
-      id: `menu-${name || ''}`,
-      anchorEl: anchorElement,
-      open: open,
-      onClose: handleClose,
-      anchorOrigin: {
-        vertical: 'bottom',
-        horizontal: 'center'
-      },
-      transformOrigin: {
-        vertical: 'top',
-        horizontal: 'center'
-      },
-      ...MenuProps,
-      slotProps: {
-        ...MenuProps.slotProps,
-        list: {
-          'aria-labelledby': labelId,
-          role: 'listbox',
-          'aria-multiselectable': multiple ? 'true' : undefined,
-          disableListWrap: true,
-          id: listboxId,
-          ...listProps
+    }), /*#__PURE__*/_jsx(SelectFocusSourceProvider, {
+      value: openInteractionType,
+      children: /*#__PURE__*/_jsx(Menu, {
+        id: `menu-${name || ''}`,
+        anchorEl: anchorElement,
+        open: open,
+        onClose: handleClose,
+        anchorOrigin: {
+          vertical: 'bottom',
+          horizontal: 'center'
+        },
+        transformOrigin: {
+          vertical: 'top',
+          horizontal: 'center'
         },
-        paper: {
-          ...paperProps,
-          style: {
-            minWidth: menuMinWidth,
-            ...(paperProps != null ? paperProps.style : null)
+        ...MenuProps,
+        slotProps: {
+          ...MenuProps.slotProps,
+          list: {
+            'aria-labelledby': labelId,
+            role: 'listbox',
+            'aria-multiselectable': multiple ? 'true' : undefined,
+            disableListWrap: true,
+            id: listboxId,
+            ...menuListSlotProps
+          },
+          paper: {
+            ...menuPaperSlotProps,
+            style: {
+              minWidth: menuMinWidth,
+              ...menuPaperSlotProps?.style
+            }
           }
-        }
-      },
-      children: items
+        },
+        children: items
+      })
     })]
   });
 });

package/Select/index.d.mts

@@ -1,4 +1,5 @@
 export { default } from "./Select.mjs";
 export * from "./Select.mjs";
+export * from "./utils/index.mjs";
 export { default as selectClasses } from "./selectClasses.mjs";
 export * from "./selectClasses.mjs";