@mui/material 9.0.0-alpha.3 → 9.0.0-beta.0

package/Radio/Radio.js

@@ -10,7 +10,6 @@ exports.default = void 0;
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _clsx = _interopRequireDefault(require("clsx"));
-var _refType = _interopRequireDefault(require("@mui/utils/refType"));
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
 var _SwitchBase = _interopRequireDefault(require("../internal/SwitchBase"));
 var _RadioButtonIcon = _interopRequireDefault(require("./RadioButtonIcon"));
@@ -134,7 +133,6 @@ const Radio = /*#__PURE__*/React.forwardRef(function Radio(inProps, ref) {
     disableRipple = false,
     slots = {},
     slotProps = {},
-    inputProps,
     ...other
   } = props;
   const muiFormControl = (0, _useFormControl.default)();
@@ -165,7 +163,7 @@ const Radio = /*#__PURE__*/React.forwardRef(function Radio(inProps, ref) {
       name = radioGroup.name;
     }
   }
-  const externalInputProps = slotProps.input ?? inputProps;
+  const externalInputProps = slotProps.input;
   const [RootSlot, rootSlotProps] = (0, _useSlot.default)('root', {
     ref,
     elementType: RadioRoot,
@@ -254,16 +252,6 @@ process.env.NODE_ENV !== "production" ? Radio.propTypes /* remove-proptypes */ =
    * The id of the `input` element.
    */
   id: _propTypes.default.string,
-  /**
-   * [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#attributes) applied to the `input` element.
-   * @deprecated Use `slotProps.input` instead. This prop will be removed in a future major release. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
-   */
-  inputProps: _propTypes.default.object,
-  /**
-   * Pass a ref to the `input` element.
-   * @deprecated Use `slotProps.input.ref` instead. This prop will be removed in a future major release. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
-   */
-  inputRef: _refType.default,
   /**
    * Name attribute of the `input` element.
    */

package/Radio/Radio.mjs

@@ -3,7 +3,6 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
-import refType from '@mui/utils/refType';
 import composeClasses from '@mui/utils/composeClasses';
 import SwitchBase from "../internal/SwitchBase.mjs";
 import RadioButtonIcon from "./RadioButtonIcon.mjs";
@@ -127,7 +126,6 @@ const Radio = /*#__PURE__*/React.forwardRef(function Radio(inProps, ref) {
     disableRipple = false,
     slots = {},
     slotProps = {},
-    inputProps,
     ...other
   } = props;
   const muiFormControl = useFormControl();
@@ -158,7 +156,7 @@ const Radio = /*#__PURE__*/React.forwardRef(function Radio(inProps, ref) {
       name = radioGroup.name;
     }
   }
-  const externalInputProps = slotProps.input ?? inputProps;
+  const externalInputProps = slotProps.input;
   const [RootSlot, rootSlotProps] = useSlot('root', {
     ref,
     elementType: RadioRoot,
@@ -247,16 +245,6 @@ process.env.NODE_ENV !== "production" ? Radio.propTypes /* remove-proptypes */ =
    * The id of the `input` element.
    */
   id: PropTypes.string,
-  /**
-   * [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#attributes) applied to the `input` element.
-   * @deprecated Use `slotProps.input` instead. This prop will be removed in a future major release. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
-   */
-  inputProps: PropTypes.object,
-  /**
-   * Pass a ref to the `input` element.
-   * @deprecated Use `slotProps.input.ref` instead. This prop will be removed in a future major release. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
-   */
-  inputRef: refType,
   /**
    * Name attribute of the `input` element.
    */

package/Rating/Rating.d.mts

@@ -104,15 +104,6 @@ export interface RatingOwnProps extends RatingSlotsAndSlotProps {
    * @default <Star fontSize="inherit" />
    */
   icon?: React.ReactNode;
-  /**
-   * The component containing the icon.
-   * @deprecated Use `slotProps.icon.component` instead. This prop will be removed in a future major release. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
-   * @default function IconContainer(props) {
-   *   const { value, ...other } = props;
-   *   return <span {...other} />;
-   * }
-   */
-  IconContainerComponent?: React.ElementType<IconContainerProps> | undefined;
   /**
    * Maximum rating.
    * @default 5

package/Rating/Rating.d.ts

@@ -104,15 +104,6 @@ export interface RatingOwnProps extends RatingSlotsAndSlotProps {
    * @default <Star fontSize="inherit" />
    */
   icon?: React.ReactNode;
-  /**
-   * The component containing the icon.
-   * @deprecated Use `slotProps.icon.component` instead. This prop will be removed in a future major release. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
-   * @default function IconContainer(props) {
-   *   const { value, ...other } = props;
-   *   return <span {...other} />;
-   * }
-   */
-  IconContainerComponent?: React.ElementType<IconContainerProps> | undefined;
   /**
    * Maximum rating.
    * @default 5

package/Rating/Rating.js

@@ -217,7 +217,6 @@ function RatingItem(props) {
     highlightSelectedOnly,
     hover,
     icon,
-    IconContainerComponent,
     isActive,
     itemValue,
     labelProps,
@@ -263,9 +262,7 @@ function RatingItem(props) {
       value: itemValue
     },
     internalForwardedProps: {
-      // TODO: remove this in v7 because `IconContainerComponent` is deprecated
-      // only forward if `slots.icon` is NOT provided
-      as: IconContainerComponent
+      as: IconContainer
     }
   });
   const [LabelSlot, labelSlotProps] = (0, _useSlot.default)('label', {
@@ -321,7 +318,6 @@ process.env.NODE_ENV !== "production" ? RatingItem.propTypes = {
   highlightSelectedOnly: _propTypes.default.bool.isRequired,
   hover: _propTypes.default.number.isRequired,
   icon: _propTypes.default.node,
-  IconContainerComponent: _propTypes.default.elementType.isRequired,
   isActive: _propTypes.default.bool.isRequired,
   itemValue: _propTypes.default.number.isRequired,
   labelProps: _propTypes.default.object,
@@ -361,7 +357,6 @@ const Rating = /*#__PURE__*/React.forwardRef(function Rating(inProps, ref) {
     getLabelText = defaultLabelText,
     highlightSelectedOnly = false,
     icon = defaultIcon,
-    IconContainerComponent = IconContainer,
     max = 5,
     name: nameProp,
     onChange,
@@ -504,7 +499,6 @@ const Rating = /*#__PURE__*/React.forwardRef(function Rating(inProps, ref) {
     focusVisible,
     getLabelText,
     icon,
-    IconContainerComponent,
     max,
     precision,
     readOnly,
@@ -566,7 +560,6 @@ const Rating = /*#__PURE__*/React.forwardRef(function Rating(inProps, ref) {
         highlightSelectedOnly,
         hover,
         icon,
-        IconContainerComponent,
         name,
         onBlur: handleBlur,
         onChange: handleChange,
@@ -692,15 +685,6 @@ process.env.NODE_ENV !== "production" ? Rating.propTypes /* remove-proptypes */
    * @default <Star fontSize="inherit" />
    */
   icon: _propTypes.default.node,
-  /**
-   * The component containing the icon.
-   * @deprecated Use `slotProps.icon.component` instead. This prop will be removed in a future major release. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
-   * @default function IconContainer(props) {
-   *   const { value, ...other } = props;
-   *   return <span {...other} />;
-   * }
-   */
-  IconContainerComponent: _propTypes.default.elementType,
   /**
    * Maximum rating.
    * @default 5

package/Rating/Rating.mjs

@@ -210,7 +210,6 @@ function RatingItem(props) {
     highlightSelectedOnly,
     hover,
     icon,
-    IconContainerComponent,
     isActive,
     itemValue,
     labelProps,
@@ -256,9 +255,7 @@ function RatingItem(props) {
       value: itemValue
     },
     internalForwardedProps: {
-      // TODO: remove this in v7 because `IconContainerComponent` is deprecated
-      // only forward if `slots.icon` is NOT provided
-      as: IconContainerComponent
+      as: IconContainer
     }
   });
   const [LabelSlot, labelSlotProps] = useSlot('label', {
@@ -314,7 +311,6 @@ process.env.NODE_ENV !== "production" ? RatingItem.propTypes = {
   highlightSelectedOnly: PropTypes.bool.isRequired,
   hover: PropTypes.number.isRequired,
   icon: PropTypes.node,
-  IconContainerComponent: PropTypes.elementType.isRequired,
   isActive: PropTypes.bool.isRequired,
   itemValue: PropTypes.number.isRequired,
   labelProps: PropTypes.object,
@@ -354,7 +350,6 @@ const Rating = /*#__PURE__*/React.forwardRef(function Rating(inProps, ref) {
     getLabelText = defaultLabelText,
     highlightSelectedOnly = false,
     icon = defaultIcon,
-    IconContainerComponent = IconContainer,
     max = 5,
     name: nameProp,
     onChange,
@@ -497,7 +492,6 @@ const Rating = /*#__PURE__*/React.forwardRef(function Rating(inProps, ref) {
     focusVisible,
     getLabelText,
     icon,
-    IconContainerComponent,
     max,
     precision,
     readOnly,
@@ -559,7 +553,6 @@ const Rating = /*#__PURE__*/React.forwardRef(function Rating(inProps, ref) {
         highlightSelectedOnly,
         hover,
         icon,
-        IconContainerComponent,
         name,
         onBlur: handleBlur,
         onChange: handleChange,
@@ -685,15 +678,6 @@ process.env.NODE_ENV !== "production" ? Rating.propTypes /* remove-proptypes */
    * @default <Star fontSize="inherit" />
    */
   icon: PropTypes.node,
-  /**
-   * The component containing the icon.
-   * @deprecated Use `slotProps.icon.component` instead. This prop will be removed in a future major release. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
-   * @default function IconContainer(props) {
-   *   const { value, ...other } = props;
-   *   return <span {...other} />;
-   * }
-   */
-  IconContainerComponent: PropTypes.elementType,
   /**
    * Maximum rating.
    * @default 5

package/Select/SelectInput.js

@@ -16,7 +16,6 @@ var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"
 var _useId = _interopRequireDefault(require("@mui/utils/useId"));
 var _refType = _interopRequireDefault(require("@mui/utils/refType"));
 var _ownerDocument = _interopRequireDefault(require("../utils/ownerDocument"));
-var _capitalize = _interopRequireDefault(require("../utils/capitalize"));
 var _Menu = _interopRequireDefault(require("../Menu/Menu"));
 var _NativeSelectInput = require("../NativeSelect/NativeSelectInput");
 var _utils = require("../InputBase/utils");
@@ -25,6 +24,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, {
@@ -65,7 +66,7 @@ const SelectIcon = (0, _zeroStyled.styled)(_NativeSelectInput.StyledSelectIcon,
     const {
       ownerState
     } = props;
-    return [styles.icon, ownerState.variant && styles[`icon${(0, _capitalize.default)(ownerState.variant)}`], ownerState.open && styles.iconOpen];
+    return [styles.icon, ownerState.open && styles.iconOpen];
   }
 })({});
 const SelectNativeInput = (0, _zeroStyled.styled)('input', {
@@ -81,17 +82,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,
@@ -103,7 +93,7 @@ const useUtilityClasses = ownerState => {
   } = ownerState;
   const slots = {
     select: ['select', variant, disabled && 'disabled', multiple && 'multiple', error && 'error'],
-    icon: ['icon', `icon${(0, _capitalize.default)(variant)}`, open && 'iconOpen', disabled && 'disabled'],
+    icon: ['icon', open && 'iconOpen', disabled && 'disabled'],
     nativeInput: ['nativeInput']
   };
   return (0, _composeClasses.default)(slots, _selectClasses.getSelectUtilityClasses, classes);
@@ -169,6 +159,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 +228,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 +372,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 +454,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 +483,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 +502,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

@@ -10,7 +10,6 @@ import composeClasses from '@mui/utils/composeClasses';
 import useId from '@mui/utils/useId';
 import refType from '@mui/utils/refType';
 import ownerDocument from "../utils/ownerDocument.mjs";
-import capitalize from "../utils/capitalize.mjs";
 import Menu from "../Menu/Menu.mjs";
 import { StyledSelectSelect, StyledSelectIcon } from "../NativeSelect/NativeSelectInput.mjs";
 import { isFilled } from "../InputBase/utils.mjs";
@@ -19,6 +18,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',
@@ -58,7 +59,7 @@ const SelectIcon = styled(StyledSelectIcon, {
     const {
       ownerState
     } = props;
-    return [styles.icon, ownerState.variant && styles[`icon${capitalize(ownerState.variant)}`], ownerState.open && styles.iconOpen];
+    return [styles.icon, ownerState.open && styles.iconOpen];
   }
 })({});
 const SelectNativeInput = styled('input', {
@@ -74,17 +75,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,
@@ -96,7 +86,7 @@ const useUtilityClasses = ownerState => {
   } = ownerState;
   const slots = {
     select: ['select', variant, disabled && 'disabled', multiple && 'multiple', error && 'error'],
-    icon: ['icon', `icon${capitalize(variant)}`, open && 'iconOpen', disabled && 'disabled'],
+    icon: ['icon', open && 'iconOpen', disabled && 'disabled'],
     nativeInput: ['nativeInput']
   };
   return composeClasses(slots, getSelectUtilityClasses, classes);
@@ -162,6 +152,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 +221,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 +447,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 +495,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";

package/Select/index.d.ts

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

package/Select/index.js

@@ -21,6 +21,18 @@ Object.defineProperty(exports, "selectClasses", {
   }
 });
 var _Select = _interopRequireDefault(require("./Select"));
+var _utils = require("./utils");
+Object.keys(_utils).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _utils[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _utils[key];
+    }
+  });
+});
 var _selectClasses = _interopRequireWildcard(require("./selectClasses"));
 Object.keys(_selectClasses).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;

package/Select/index.mjs

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