@mui/base - npm Package Compare versions

Comparing version 5.0.0-alpha.127 to 5.0.0-alpha.128

Badge/Badge.d.ts

@@ -1,2 +0,2 @@
-import { OverridableComponent } from '@mui/types';
+import { PolymorphicComponent } from '../utils/PolymorphicComponent';
 import { BadgeTypeMap } from './Badge.types';
@@ -13,3 +13,3 @@ /**
  */
-declare const Badge: OverridableComponent<BadgeTypeMap<{}, "span">>;
+declare const Badge: PolymorphicComponent<BadgeTypeMap<{}, "span">>;
 export default Badge;

Badge/Badge.js

 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["badgeContent", "component", "children", "invisible", "max", "slotProps", "slots", "showZero"];
+const _excluded = ["badgeContent", "children", "invisible", "max", "slotProps", "slots", "showZero"];
 import * as React from 'react';
@@ -33,5 +33,5 @@ import PropTypes from 'prop-types';
  */
-const Badge = /*#__PURE__*/React.forwardRef(function Badge(props, ref) {
+const Badge = /*#__PURE__*/React.forwardRef(function Badge(props, forwardedRef) {
+  var _slots$root, _slots$badge;
   const {
-      component,
       children,
@@ -59,3 +59,3 @@ max: maxProp = 99,
   const classes = useUtilityClasses(ownerState);
-  const Root = component || slots.root || 'span';
+  const Root = (_slots$root = slots.root) != null ? _slots$root : 'span';
   const rootProps = useSlotProps({
@@ -66,3 +66,3 @@ elementType: Root,
     additionalProps: {
-      ref
+      ref: forwardedRef
     },
@@ -72,3 +72,3 @@ ownerState,
   });
-  const BadgeComponent = slots.badge || 'span';
+  const BadgeComponent = (_slots$badge = slots.badge) != null ? _slots$badge : 'span';
   const badgeProps = useSlotProps({
@@ -100,7 +100,2 @@ elementType: BadgeComponent,
   /**
-   * The component used for the root node.
-   * Either a string to use a HTML element or a component.
-   */
-  component: PropTypes.elementType,
-  /**
    * If `true`, the badge is invisible.
@@ -107,0 +102,0 @@ * @default false

Badge/Badge.types.d.ts

 import * as React from 'react';
-import { OverrideProps, OverridableTypeMap, OverridableComponent } from '@mui/types';
+import { OverrideProps, OverridableTypeMap, OverridableComponent, Simplify } from '@mui/types';
 import { SlotComponentProps } from '../utils';
@@ -8,3 +8,3 @@ export interface BadgeRootSlotPropsOverrides {
 }
-export type BadgeOwnerState = BadgeProps & {
+export type BadgeOwnerState = Simplify<BadgeOwnProps & {
     badgeContent: React.ReactNode;
@@ -14,3 +14,3 @@ invisible: boolean;
     showZero: boolean;
-};
+}>;
 export interface BadgeOwnProps {
@@ -67,5 +67,5 @@ /**
 }
-export interface BadgeTypeMap<P = {}, D extends React.ElementType = 'span'> {
-    props: P & BadgeOwnProps;
-    defaultComponent: D;
+export interface BadgeTypeMap<AdditionalProps = {}, RootComponentType extends React.ElementType = 'span'> {
+    props: BadgeOwnProps & AdditionalProps;
+    defaultComponent: RootComponentType;
 }
@@ -80,4 +80,4 @@ /**
 export type ExtendBadge<M extends OverridableTypeMap> = OverridableComponent<ExtendBadgeTypeMap<M>>;
-export type BadgeProps<D extends React.ElementType = BadgeTypeMap['defaultComponent']> = OverrideProps<BadgeTypeMap<{}, D>, D> & {
-    component?: D;
+export type BadgeProps<RootComponentType extends React.ElementType = BadgeTypeMap['defaultComponent']> = OverrideProps<BadgeTypeMap<{}, RootComponentType>, RootComponentType> & {
+    component?: RootComponentType;
 };
@@ -84,0 +84,0 @@ export type BadgeRootSlotProps = {

Badge/badgeClasses.d.ts

@@ -0,0 +0,0 @@ export interface BadgeClasses {

Badge/index.d.ts

@@ -0,0 +0,0 @@ export { default } from './Badge';

Button/Button.d.ts

@@ -1,7 +0,3 @@
-import { OverridableComponent } from '@mui/types';
-import { ButtonOwnProps, ButtonTypeMap } from './Button.types';
-export interface ButtonOwnerState extends ButtonOwnProps {
-    focusVisible: boolean;
-    active: boolean;
-}
+import { PolymorphicComponent } from '../utils/PolymorphicComponent';
+import { ButtonTypeMap } from './Button.types';
 /**
@@ -18,3 +14,3 @@ * The foundation for building custom-styled buttons.
  */
-declare const Button: OverridableComponent<ButtonTypeMap<{}, "button">>;
+declare const Button: PolymorphicComponent<ButtonTypeMap<{}, "button">>;
 export default Button;

Button/Button.js

 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["action", "children", "component", "disabled", "focusableWhenDisabled", "onBlur", "onClick", "onFocus", "onFocusVisible", "onKeyDown", "onKeyUp", "onMouseLeave", "slotProps", "slots"];
+const _excluded = ["action", "children", "disabled", "focusableWhenDisabled", "onFocusVisible", "slotProps", "slots"];
 import * as React from 'react';
@@ -35,7 +35,6 @@ import PropTypes from 'prop-types';
 const Button = /*#__PURE__*/React.forwardRef(function Button(props, forwardedRef) {
-  var _ref;
+  var _slots$root;
   const {
       action,
       children,
-      component,
       focusableWhenDisabled = false,
@@ -68,3 +67,3 @@ slotProps = {},
   const defaultElement = other.href || other.to ? 'a' : 'button';
-  const Root = (_ref = component != null ? component : slots.root) != null ? _ref : defaultElement;
+  const Root = (_slots$root = slots.root) != null ? _slots$root : defaultElement;
   const rootProps = useSlotProps({
@@ -103,7 +102,2 @@ elementType: Root,
   /**
-   * The component used for the root node.
-   * Either a string to use a HTML element or a component.
-   */
-  component: PropTypes.elementType,
-  /**
    * If `true`, the component is disabled.
@@ -125,28 +119,4 @@ * @default false
    */
-  onBlur: PropTypes.func,
-  /**
-   * @ignore
-   */
-  onClick: PropTypes.func,
-  /**
-   * @ignore
-   */
-  onFocus: PropTypes.func,
-  /**
-   * @ignore
-   */
   onFocusVisible: PropTypes.func,
   /**
-   * @ignore
-   */
-  onKeyDown: PropTypes.func,
-  /**
-   * @ignore
-   */
-  onKeyUp: PropTypes.func,
-  /**
-   * @ignore
-   */
-  onMouseLeave: PropTypes.func,
-  /**
    * The props used for each slot inside the Button.
@@ -153,0 +123,0 @@ * @default {}

Button/Button.types.d.ts

 import * as React from 'react';
-import { OverrideProps, Simplify } from '@mui/types';
+import { Simplify } from '@mui/types';
 import { UseButtonParameters, UseButtonRootSlotProps } from '../useButton';
 import { SlotComponentProps } from '../utils';
+import { PolymorphicProps } from '../utils/PolymorphicComponent';
 export interface ButtonActions {
@@ -38,13 +39,11 @@ focusVisible(): void;
 }
-export type ButtonProps<D extends React.ElementType = ButtonTypeMap['defaultComponent']> = OverrideProps<ButtonTypeMap<{}, D>, D> & {
-    component?: D;
-};
-export interface ButtonTypeMap<P = {}, D extends React.ElementType = 'button'> {
-    props: P & ButtonOwnProps;
-    defaultComponent: D;
+export type ButtonProps<RootComponentType extends React.ElementType = ButtonTypeMap['defaultComponent']> = PolymorphicProps<ButtonTypeMap<{}, RootComponentType>, RootComponentType>;
+export interface ButtonTypeMap<AdditionalProps = {}, RootComponentType extends React.ElementType = 'button'> {
+    props: ButtonOwnProps & AdditionalProps;
+    defaultComponent: RootComponentType;
 }
-export type ButtonOwnerState = ButtonOwnProps & {
+export type ButtonOwnerState = Simplify<ButtonOwnProps & {
     active: boolean;
     focusVisible: boolean;
-};
+}>;
 export type ButtonRootSlotProps = Simplify<UseButtonRootSlotProps & {
@@ -51,0 +50,0 @@ ownerState: ButtonOwnerState;

Button/buttonClasses.d.ts

@@ -0,0 +0,0 @@ export interface ButtonClasses {

Button/index.d.ts

@@ -0,0 +0,0 @@ export { default } from './Button';

className/index.d.ts

 export { unstable_ClassNameGenerator } from '@mui/utils';

ClickAwayListener/ClickAwayListener.d.ts

@@ -0,0 +0,0 @@ import * as React from 'react';

ClickAwayListener/index.d.ts

 export { default } from './ClickAwayListener';
 export * from './ClickAwayListener';

composeClasses/index.d.ts

 export { unstable_composeClasses as default } from '@mui/utils';

FocusTrap/FocusTrap.d.ts

@@ -0,0 +0,0 @@ /// <reference types="react" />

FocusTrap/FocusTrap.types.d.ts

@@ -0,0 +0,0 @@ import * as React from 'react';

FocusTrap/index.d.ts

 export { default } from './FocusTrap';
 export * from './FocusTrap.types';

FormControl/FormControl.d.ts

@@ -1,2 +0,2 @@
-import { OverridableComponent } from '@mui/types';
+import { PolymorphicComponent } from '../utils/PolymorphicComponent';
 import { FormControlTypeMap } from './FormControl.types';
@@ -40,3 +40,3 @@ /**
  */
-declare const FormControl: OverridableComponent<FormControlTypeMap<{}, "div">>;
+declare const FormControl: PolymorphicComponent<FormControlTypeMap<{}, "div">>;
 export default FormControl;

FormControl/FormControl.js

 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["defaultValue", "children", "component", "disabled", "error", "onChange", "required", "slotProps", "slots", "value"];
+const _excluded = ["defaultValue", "children", "disabled", "error", "onChange", "required", "slotProps", "slots", "value"];
 import * as React from 'react';
@@ -67,8 +67,7 @@ import PropTypes from 'prop-types';
  */
-const FormControl = /*#__PURE__*/React.forwardRef(function FormControl(props, ref) {
-  var _ref;
+const FormControl = /*#__PURE__*/React.forwardRef(function FormControl(props, forwardedRef) {
+  var _slots$root;
   const {
       defaultValue,
       children,
-      component,
       disabled = false,
@@ -127,3 +126,3 @@ error = false,
   };
-  const Root = (_ref = component != null ? component : slots.root) != null ? _ref : 'div';
+  const Root = (_slots$root = slots.root) != null ? _slots$root : 'div';
   const rootProps = useSlotProps({
@@ -134,3 +133,3 @@ elementType: Root,
     additionalProps: {
-      ref,
+      ref: forwardedRef,
       children: renderChildren()
@@ -156,7 +155,2 @@ },
   /**
-   * The component used for the root node.
-   * Either a string to use a HTML element or a component.
-   */
-  component: PropTypes.elementType,
-  /**
    * @ignore
@@ -163,0 +157,0 @@ */

FormControl/FormControl.types.d.ts

 import * as React from 'react';
-import { OverrideProps, Simplify } from '@mui/types';
-import { SlotComponentProps } from '../utils';
+import { Simplify } from '@mui/types';
+import { PolymorphicProps, SlotComponentProps } from '../utils';
 export type NativeFormControlElement = HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement;
@@ -61,9 +61,7 @@ export interface FormControlRootSlotPropsOverrides {
 }
-export interface FormControlTypeMap<P = {}, D extends React.ElementType = 'div'> {
-    props: P & FormControlOwnProps;
-    defaultComponent: D;
+export interface FormControlTypeMap<AdditionalProps = {}, RootComponentType extends React.ElementType = 'div'> {
+    props: FormControlOwnProps & AdditionalProps;
+    defaultComponent: RootComponentType;
 }
-export type FormControlProps<D extends React.ElementType = FormControlTypeMap['defaultComponent'], P = {}> = OverrideProps<FormControlTypeMap<P, D>, D> & {
-    component?: D;
-};
+export type FormControlProps<RootComponentType extends React.ElementType = FormControlTypeMap['defaultComponent']> = PolymorphicProps<FormControlTypeMap<{}, RootComponentType>, RootComponentType>;
 type NonOptionalOwnerState = 'disabled' | 'error' | 'required';
@@ -74,5 +72,12 @@ export type FormControlOwnerState = Simplify<Omit<FormControlOwnProps, NonOptionalOwnerState> & Required<Pick<FormControlProps, NonOptionalOwnerState>> & {
 }>;
-type ContextFromPropsKey = 'disabled' | 'error' | 'onChange' | 'required' | 'value';
-export type FormControlState = Simplify<Pick<FormControlProps, ContextFromPropsKey> & {
+export type FormControlState = {
     /**
+     * If `true`, the label, input and helper text should be displayed in a disabled state.
+     */
+    disabled: boolean;
+    /**
+     * If `true`, the label is displayed in an error state.
+     */
+    error: boolean;
+    /**
      * If `true`, the form element has some value.
@@ -90,6 +95,18 @@ */
     /**
+     * Callback fired when the form element's value is modified.
+     */
+    onChange: React.ChangeEventHandler<NativeFormControlElement>;
+    /**
      * Callback fired when the form element receives focus.
      */
     onFocus: () => void;
-}>;
+    /**
+     * If `true`, the label will indicate that the `input` is required.
+     */
+    required: boolean;
+    /**
+     * The value of the form element.
+     */
+    value: unknown;
+};
 export type FormControlRootSlotProps = {
@@ -96,0 +113,0 @@ children: React.ReactNode | ((state: FormControlState) => React.ReactNode);

FormControl/formControlClasses.d.ts

@@ -0,0 +0,0 @@ export interface FormControlClasses {

FormControl/FormControlContext.d.ts

 import * as React from 'react';
+import { FormControlState } from './FormControl.types';
 /**
  * @ignore - internal component.
  */
-declare const FormControlContext: React.Context<{
-    disabled?: boolean | undefined;
-    required?: boolean | undefined;
-    value?: unknown;
-    onChange?: React.ChangeEventHandler<import("./FormControl.types").NativeFormControlElement> | undefined;
-    error?: boolean | undefined;
-    filled: boolean;
-    focused: boolean;
-    onBlur: () => void;
-    onFocus: () => void;
-} | undefined>;
+declare const FormControlContext: React.Context<FormControlState | undefined>;
 export default FormControlContext;

FormControl/index.d.ts

@@ -0,0 +0,0 @@ export { default } from './FormControl';

FormControl/useFormControlContext.d.ts

@@ -0,0 +0,0 @@ import { UseFormControlContextReturnValue } from './FormControl.types';

generateUtilityClass/index.d.ts

 export { unstable_generateUtilityClass as default } from '@mui/utils';
 export type { GlobalStateSlot } from '@mui/utils';

generateUtilityClasses/index.d.ts

 export { unstable_generateUtilityClasses as default } from '@mui/utils';

index.js

 /**
- * @mui/base v5.0.0-alpha.127
+ * @mui/base v5.0.0-alpha.128
  *
@@ -4,0 +4,0 @@ * @license MIT

Input/index.d.ts

@@ -0,0 +0,0 @@ export { default } from './Input';

Input/Input.d.ts

@@ -1,2 +0,2 @@
-import { OverridableComponent } from '@mui/types';
+import { PolymorphicComponent } from '../utils/PolymorphicComponent';
 import { InputTypeMap } from './Input.types';
@@ -13,3 +13,3 @@ /**
  */
-declare const Input: OverridableComponent<InputTypeMap<{}, "div">>;
+declare const Input: PolymorphicComponent<InputTypeMap<{}, "div">>;
 export default Input;

Input/Input.js

 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["aria-describedby", "aria-label", "aria-labelledby", "autoComplete", "autoFocus", "className", "component", "defaultValue", "disabled", "endAdornment", "error", "id", "multiline", "name", "onClick", "onChange", "onKeyDown", "onKeyUp", "onFocus", "onBlur", "placeholder", "readOnly", "required", "startAdornment", "value", "type", "rows", "slotProps", "slots", "minRows", "maxRows"];
+const _excluded = ["aria-describedby", "aria-label", "aria-labelledby", "autoComplete", "autoFocus", "className", "defaultValue", "disabled", "endAdornment", "error", "id", "multiline", "name", "onClick", "onChange", "onKeyDown", "onKeyUp", "onFocus", "onBlur", "placeholder", "readOnly", "required", "startAdornment", "value", "type", "rows", "slotProps", "slots", "minRows", "maxRows"];
 import * as React from 'react';
@@ -42,3 +42,3 @@ import PropTypes from 'prop-types';
 const Input = /*#__PURE__*/React.forwardRef(function Input(props, forwardedRef) {
-  var _ref, _slots$textarea, _slots$input;
+  var _slots$root, _slots$textarea, _slots$input;
   const {
@@ -51,3 +51,2 @@ 'aria-describedby': ariaDescribedby,
       className,
-      component,
       defaultValue,
@@ -121,3 +120,3 @@ disabled,
   };
-  const Root = (_ref = component != null ? component : slots.root) != null ? _ref : 'div';
+  const Root = (_slots$root = slots.root) != null ? _slots$root : 'div';
   const rootProps = useSlotProps({
@@ -189,6 +188,2 @@ elementType: Root,
   /**
-   * @ignore
-   */
-  children: PropTypes.node,
-  /**
    * Class name applied to the root element.
@@ -198,11 +193,2 @@ */
   /**
-   * @ignore
-   */
-  color: PropTypes.string,
-  /**
-   * The component used for the root node.
-   * Either a string to use a HTML element or a component.
-   */
-  component: PropTypes.elementType,
-  /**
    * The default value. Use when the component is not controlled.
@@ -209,0 +195,0 @@ */

Input/Input.types.d.ts

 import * as React from 'react';
-import { OverrideProps, Simplify } from '@mui/types';
+import { Simplify } from '@mui/types';
 import { FormControlState } from '../FormControl';
 import { UseInputParameters, UseInputRootSlotProps } from '../useInput';
-import { SlotComponentProps } from '../utils';
+import { PolymorphicProps, SlotComponentProps } from '../utils';
 export interface InputRootSlotPropsOverrides {
@@ -144,10 +144,8 @@ }
 }
-export interface InputTypeMap<P = {}, D extends React.ElementType = 'div'> {
-    props: P & InputOwnProps;
-    defaultComponent: D;
+export interface InputTypeMap<AdditionalProps = {}, RootComponentType extends React.ElementType = 'div'> {
+    props: InputOwnProps & AdditionalProps;
+    defaultComponent: RootComponentType;
 }
-export type InputProps<D extends React.ElementType = InputTypeMap['defaultComponent'], P = {}> = OverrideProps<InputTypeMap<P, D>, D> & {
-    component?: D;
-};
-export type InputOwnerState = Simplify<Omit<InputProps, 'component' | 'slots' | 'slotProps'> & {
+export type InputProps<RootComponentType extends React.ElementType = InputTypeMap['defaultComponent']> = PolymorphicProps<InputTypeMap<{}, RootComponentType>, RootComponentType>;
+export type InputOwnerState = Simplify<InputOwnProps & {
     formControlContext: FormControlState | undefined;
@@ -154,0 +152,0 @@ focused: boolean;

Input/inputClasses.d.ts

@@ -0,0 +0,0 @@ export interface InputClasses {

legacy/Badge/Badge.js

@@ -30,5 +30,5 @@ import _extends from "@babel/runtime/helpers/esm/extends";
  */
-var Badge = /*#__PURE__*/React.forwardRef(function Badge(props, ref) {
+var Badge = /*#__PURE__*/React.forwardRef(function Badge(props, forwardedRef) {
+  var _slots$root, _slots$badge;
   var badgeContentProp = props.badgeContent,
-    component = props.component,
     children = props.children,
@@ -44,3 +44,3 @@ invisibleProp = props.invisible,
     showZero = _props$showZero === void 0 ? false : _props$showZero,
-    other = _objectWithoutProperties(props, ["badgeContent", "component", "children", "invisible", "max", "slotProps", "slots", "showZero"]);
+    other = _objectWithoutProperties(props, ["badgeContent", "children", "invisible", "max", "slotProps", "slots", "showZero"]);
   var _useBadge = useBadge(_extends({}, props, {
@@ -60,3 +60,3 @@ max: maxProp
   var classes = useUtilityClasses(ownerState);
-  var Root = component || slots.root || 'span';
+  var Root = (_slots$root = slots.root) != null ? _slots$root : 'span';
   var rootProps = useSlotProps({
@@ -67,3 +67,3 @@ elementType: Root,
     additionalProps: {
-      ref: ref
+      ref: forwardedRef
     },
@@ -73,3 +73,3 @@ ownerState: ownerState,
   });
-  var BadgeComponent = slots.badge || 'span';
+  var BadgeComponent = (_slots$badge = slots.badge) != null ? _slots$badge : 'span';
   var badgeProps = useSlotProps({
@@ -101,7 +101,2 @@ elementType: BadgeComponent,
   /**
-   * The component used for the root node.
-   * Either a string to use a HTML element or a component.
-   */
-  component: PropTypes.elementType,
-  /**
    * If `true`, the badge is invisible.
@@ -108,0 +103,0 @@ * @default false

legacy/Button/Button.js

@@ -32,16 +32,9 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 var Button = /*#__PURE__*/React.forwardRef(function Button(props, forwardedRef) {
-  var _ref;
+  var _slots$root;
   var action = props.action,
     children = props.children,
-    component = props.component,
     disabled = props.disabled,
     _props$focusableWhenD = props.focusableWhenDisabled,
     focusableWhenDisabled = _props$focusableWhenD === void 0 ? false : _props$focusableWhenD,
-    onBlur = props.onBlur,
-    onClick = props.onClick,
-    onFocus = props.onFocus,
     onFocusVisible = props.onFocusVisible,
-    onKeyDown = props.onKeyDown,
-    onKeyUp = props.onKeyUp,
-    onMouseLeave = props.onMouseLeave,
     _props$slotProps = props.slotProps,
@@ -51,3 +44,3 @@ slotProps = _props$slotProps === void 0 ? {} : _props$slotProps,
     slots = _props$slots === void 0 ? {} : _props$slots,
-    other = _objectWithoutProperties(props, ["action", "children", "component", "disabled", "focusableWhenDisabled", "onBlur", "onClick", "onFocus", "onFocusVisible", "onKeyDown", "onKeyUp", "onMouseLeave", "slotProps", "slots"]);
+    other = _objectWithoutProperties(props, ["action", "children", "disabled", "focusableWhenDisabled", "onFocusVisible", "slotProps", "slots"]);
   var buttonRef = React.useRef();
@@ -76,3 +69,3 @@ var _useButton = useButton(_extends({}, props, {
   var defaultElement = other.href || other.to ? 'a' : 'button';
-  var Root = (_ref = component != null ? component : slots.root) != null ? _ref : defaultElement;
+  var Root = (_slots$root = slots.root) != null ? _slots$root : defaultElement;
   var rootProps = useSlotProps({
@@ -111,7 +104,2 @@ elementType: Root,
   /**
-   * The component used for the root node.
-   * Either a string to use a HTML element or a component.
-   */
-  component: PropTypes.elementType,
-  /**
    * If `true`, the component is disabled.
@@ -133,28 +121,4 @@ * @default false
    */
-  onBlur: PropTypes.func,
-  /**
-   * @ignore
-   */
-  onClick: PropTypes.func,
-  /**
-   * @ignore
-   */
-  onFocus: PropTypes.func,
-  /**
-   * @ignore
-   */
   onFocusVisible: PropTypes.func,
   /**
-   * @ignore
-   */
-  onKeyDown: PropTypes.func,
-  /**
-   * @ignore
-   */
-  onKeyUp: PropTypes.func,
-  /**
-   * @ignore
-   */
-  onMouseLeave: PropTypes.func,
-  /**
    * The props used for each slot inside the Button.
@@ -161,0 +125,0 @@ * @default {}

legacy/FormControl/FormControl.js

@@ -65,7 +65,6 @@ import _extends from "@babel/runtime/helpers/esm/extends";
  */
-var FormControl = /*#__PURE__*/React.forwardRef(function FormControl(props, ref) {
-  var _ref;
+var FormControl = /*#__PURE__*/React.forwardRef(function FormControl(props, forwardedRef) {
+  var _slots$root;
   var defaultValue = props.defaultValue,
     children = props.children,
-    component = props.component,
     _props$disabled = props.disabled,
@@ -83,3 +82,3 @@ disabled = _props$disabled === void 0 ? false : _props$disabled,
     incomingValue = props.value,
-    other = _objectWithoutProperties(props, ["defaultValue", "children", "component", "disabled", "error", "onChange", "required", "slotProps", "slots", "value"]);
+    other = _objectWithoutProperties(props, ["defaultValue", "children", "disabled", "error", "onChange", "required", "slotProps", "slots", "value"]);
   var _useControlled = useControlled({
@@ -138,3 +137,3 @@ controlled: incomingValue,
   };
-  var Root = (_ref = component != null ? component : slots.root) != null ? _ref : 'div';
+  var Root = (_slots$root = slots.root) != null ? _slots$root : 'div';
   var rootProps = useSlotProps({
@@ -145,3 +144,3 @@ elementType: Root,
     additionalProps: {
-      ref: ref,
+      ref: forwardedRef,
       children: renderChildren()
@@ -167,7 +166,2 @@ },
   /**
-   * The component used for the root node.
-   * Either a string to use a HTML element or a component.
-   */
-  component: PropTypes.elementType,
-  /**
    * @ignore
@@ -174,0 +168,0 @@ */

legacy/index.js

 /**
- * @mui/base v5.0.0-alpha.127
+ * @mui/base v5.0.0-alpha.128
  *
@@ -4,0 +4,0 @@ * @license MIT

legacy/Input/Input.js

@@ -39,3 +39,3 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 var Input = /*#__PURE__*/React.forwardRef(function Input(props, forwardedRef) {
-  var _ref, _slots$textarea, _slots$input;
+  var _slots$root, _slots$textarea, _slots$input;
   var ariaDescribedby = props['aria-describedby'],
@@ -47,3 +47,2 @@ ariaLabel = props['aria-label'],
     className = props.className,
-    component = props.component,
     defaultValue = props.defaultValue,
@@ -76,3 +75,3 @@ disabled = props.disabled,
     maxRows = props.maxRows,
-    other = _objectWithoutProperties(props, ["aria-describedby", "aria-label", "aria-labelledby", "autoComplete", "autoFocus", "className", "component", "defaultValue", "disabled", "endAdornment", "error", "id", "multiline", "name", "onClick", "onChange", "onKeyDown", "onKeyUp", "onFocus", "onBlur", "placeholder", "readOnly", "required", "startAdornment", "value", "type", "rows", "slotProps", "slots", "minRows", "maxRows"]);
+    other = _objectWithoutProperties(props, ["aria-describedby", "aria-label", "aria-labelledby", "autoComplete", "autoFocus", "className", "defaultValue", "disabled", "endAdornment", "error", "id", "multiline", "name", "onClick", "onChange", "onKeyDown", "onKeyUp", "onFocus", "onBlur", "placeholder", "readOnly", "required", "startAdornment", "value", "type", "rows", "slotProps", "slots", "minRows", "maxRows"]);
   var _useInput = useInput({
@@ -119,3 +118,3 @@ disabled: disabled,
   };
-  var Root = (_ref = component != null ? component : slots.root) != null ? _ref : 'div';
+  var Root = (_slots$root = slots.root) != null ? _slots$root : 'div';
   var rootProps = useSlotProps({
@@ -189,6 +188,2 @@ elementType: Root,
   /**
-   * @ignore
-   */
-  children: PropTypes.node,
-  /**
    * Class name applied to the root element.
@@ -198,11 +193,2 @@ */
   /**
-   * @ignore
-   */
-  color: PropTypes.string,
-  /**
-   * The component used for the root node.
-   * Either a string to use a HTML element or a component.
-   */
-  component: PropTypes.elementType,
-  /**
    * The default value. Use when the component is not controlled.
@@ -209,0 +195,0 @@ */

legacy/Menu/Menu.js

@@ -33,7 +33,6 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 var Menu = /*#__PURE__*/React.forwardRef(function Menu(props, forwardedRef) {
-  var _ref, _slots$listbox;
+  var _slots$root, _slots$listbox;
   var actions = props.actions,
     anchorEl = props.anchorEl,
     children = props.children,
-    component = props.component,
     defaultOpen = props.defaultOpen,
@@ -47,3 +46,3 @@ listboxId = props.listboxId,
     slots = _props$slots === void 0 ? {} : _props$slots,
-    other = _objectWithoutProperties(props, ["actions", "anchorEl", "children", "component", "defaultOpen", "listboxId", "onOpenChange", "open", "slotProps", "slots"]);
+    other = _objectWithoutProperties(props, ["actions", "anchorEl", "children", "defaultOpen", "listboxId", "onOpenChange", "open", "slotProps", "slots"]);
   var _useMenu = useMenu({
@@ -68,3 +67,3 @@ defaultOpen: defaultOpen,
   var classes = useUtilityClasses(ownerState);
-  var Root = (_ref = component != null ? component : slots.root) != null ? _ref : Popper;
+  var Root = (_slots$root = slots.root) != null ? _slots$root : Popper;
   var rootProps = useSlotProps({
@@ -122,7 +121,2 @@ elementType: Root,
   /**
-   * The component used for the root node.
-   * Either a string to use a HTML element or a component.
-   */
-  component: PropTypes.elementType,
-  /**
    * @ignore
@@ -148,3 +142,3 @@ */
    */
-  slotProps: PropTypes.shape({
+  slotProps: PropTypes /* @typescript-to-proptypes-ignore */.shape({
     listbox: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
@@ -151,0 +145,0 @@ root: PropTypes.oneOfType([PropTypes.func, PropTypes.object])

legacy/MenuItem/MenuItem.js

@@ -30,8 +30,7 @@ import _extends from "@babel/runtime/helpers/esm/extends";
  */
-var MenuItem = /*#__PURE__*/React.forwardRef(function MenuItem(props, ref) {
-  var _ref;
+var MenuItem = /*#__PURE__*/React.forwardRef(function MenuItem(props, forwardedRef) {
+  var _slots$root;
   var children = props.children,
     _props$disabled = props.disabled,
     disabledProp = _props$disabled === void 0 ? false : _props$disabled,
-    component = props.component,
     label = props.label,
@@ -42,6 +41,6 @@ _props$slotProps = props.slotProps,
     slots = _props$slots === void 0 ? {} : _props$slots,
-    other = _objectWithoutProperties(props, ["children", "disabled", "component", "label", "slotProps", "slots"]);
+    other = _objectWithoutProperties(props, ["children", "disabled", "label", "slotProps", "slots"]);
   var _useMenuItem = useMenuItem({
       disabled: disabledProp,
-      ref: ref,
+      rootRef: forwardedRef,
       label: label
@@ -59,3 +58,3 @@ }),
   var classes = useUtilityClasses(ownerState);
-  var Root = (_ref = component != null ? component : slots.root) != null ? _ref : 'li';
+  var Root = (_slots$root = slots.root) != null ? _slots$root : 'li';
   var rootProps = useSlotProps({
@@ -83,7 +82,2 @@ elementType: Root,
   /**
-   * The component used for the root node.
-   * Either a string to use a HTML element or a component.
-   */
-  component: PropTypes.elementType,
-  /**
    * @ignore
@@ -90,0 +84,0 @@ */

legacy/Modal/Modal.js

@@ -57,7 +57,6 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 var Modal = /*#__PURE__*/React.forwardRef(function Modal(props, forwardedRef) {
-  var _props$ariaHidden, _ref;
+  var _props$ariaHidden, _slots$root;
   var children = props.children,
     _props$closeAfterTran = props.closeAfterTransition,
     closeAfterTransition = _props$closeAfterTran === void 0 ? false : _props$closeAfterTran,
-    component = props.component,
     container = props.container,
@@ -81,3 +80,3 @@ _props$disableAutoFoc = props.disableAutoFocus,
     _props$manager = props.manager,
-    manager = _props$manager === void 0 ? defaultManager : _props$manager,
+    managerProp = _props$manager === void 0 ? defaultManager : _props$manager,
     onBackdropClick = props.onBackdropClick,
@@ -93,3 +92,5 @@ onClose = props.onClose,
     slots = _props$slots === void 0 ? {} : _props$slots,
-    other = _objectWithoutProperties(props, ["children", "closeAfterTransition", "component", "container", "disableAutoFocus", "disableEnforceFocus", "disableEscapeKeyDown", "disablePortal", "disableRestoreFocus", "disableScrollLock", "hideBackdrop", "keepMounted", "manager", "onBackdropClick", "onClose", "onKeyDown", "open", "onTransitionEnter", "onTransitionExited", "slotProps", "slots"]);
+    other = _objectWithoutProperties(props, ["children", "closeAfterTransition", "container", "disableAutoFocus", "disableEnforceFocus", "disableEscapeKeyDown", "disablePortal", "disableRestoreFocus", "disableScrollLock", "hideBackdrop", "keepMounted", "manager", "onBackdropClick", "onClose", "onKeyDown", "open", "onTransitionEnter", "onTransitionExited", "slotProps", "slots"]); // TODO: `modal`` must change its type in this file to match the type of methods
+  // provided by `ModalManager`
+  var manager = managerProp;
   var _React$useState = React.useState(!open),
@@ -231,3 +232,3 @@ exited = _React$useState[0],
   }
-  var Root = (_ref = component != null ? component : slots.root) != null ? _ref : 'div';
+  var Root = (_slots$root = slots.root) != null ? _slots$root : 'div';
   var rootProps = useSlotProps({
@@ -293,7 +294,2 @@ elementType: Root,
   /**
-   * The component used for the root node.
-   * Either a string to use a HTML element or a component.
-   */
-  component: PropTypes.elementType,
-  /**
    * An HTML element or function that returns one.
@@ -371,6 +367,2 @@ * The `container` will have the portal children appended to it.
   /**
-   * @ignore
-   */
-  onKeyDown: PropTypes.func,
-  /**
    * If `true`, the component is shown.
@@ -377,0 +369,0 @@ */

legacy/Option/Option.js

@@ -25,6 +25,5 @@ import _extends from "@babel/runtime/helpers/esm/extends";
  */
-var Option = /*#__PURE__*/React.forwardRef(function Option(props, ref) {
-  var _optionRef$current;
+var Option = /*#__PURE__*/React.forwardRef(function Option(props, forwardedRef) {
+  var _slots$root, _optionRef$current;
   var children = props.children,
-    component = props.component,
     _props$disabled = props.disabled,
@@ -38,6 +37,6 @@ disabled = _props$disabled === void 0 ? false : _props$disabled,
     value = props.value,
-    other = _objectWithoutProperties(props, ["children", "component", "disabled", "label", "slotProps", "slots", "value"]);
-  var Root = component || slots.root || 'li';
+    other = _objectWithoutProperties(props, ["children", "disabled", "label", "slotProps", "slots", "value"]);
+  var Root = (_slots$root = slots.root) != null ? _slots$root : 'li';
   var optionRef = React.useRef(null);
-  var combinedRef = useForkRef(optionRef, ref);
+  var combinedRef = useForkRef(optionRef, forwardedRef);
 
@@ -50,3 +49,3 @@ // If `label` is not explicitly provided, the `children` are used for convenience.
       label: computedLabel,
-      optionRef: combinedRef,
+      rootRef: combinedRef,
       value: value
@@ -87,7 +86,2 @@ }),
   /**
-   * The component used for the root node.
-   * Either a string to use a HTML element or a component.
-   */
-  component: PropTypes.elementType,
-  /**
    * If `true`, the option will be disabled.
@@ -94,0 +88,0 @@ * @default false

legacy/OptionGroup/OptionGroup.js

@@ -31,5 +31,4 @@ import _extends from "@babel/runtime/helpers/esm/extends";
  */
-var OptionGroup = /*#__PURE__*/React.forwardRef(function OptionGroup(props, ref) {
-  var component = props.component,
-    _props$disabled = props.disabled,
+var OptionGroup = /*#__PURE__*/React.forwardRef(function OptionGroup(props, forwardedRef) {
+  var _props$disabled = props.disabled,
     disabled = _props$disabled === void 0 ? false : _props$disabled,
@@ -40,4 +39,4 @@ _props$slotProps = props.slotProps,
     slots = _props$slots === void 0 ? {} : _props$slots,
-    other = _objectWithoutProperties(props, ["component", "disabled", "slotProps", "slots"]);
-  var Root = component || (slots == null ? void 0 : slots.root) || 'li';
+    other = _objectWithoutProperties(props, ["disabled", "slotProps", "slots"]);
+  var Root = (slots == null ? void 0 : slots.root) || 'li';
   var Label = (slots == null ? void 0 : slots.label) || 'span';
@@ -51,3 +50,3 @@ var List = (slots == null ? void 0 : slots.list) || 'ul';
     additionalProps: {
-      ref: ref
+      ref: forwardedRef
     },
@@ -87,7 +86,2 @@ ownerState: props,
   /**
-   * The component used for the root node.
-   * Either a string to use a HTML element or a component.
-   */
-  component: PropTypes.elementType,
-  /**
    * If `true` all the options in the group will be disabled.
@@ -94,0 +88,0 @@ * @default false

legacy/Popper/Popper.js

@@ -46,7 +46,6 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 var defaultPopperOptions = {};
-var PopperTooltip = /*#__PURE__*/React.forwardRef(function PopperTooltip(props, ref) {
-  var _ref2;
+var PopperTooltip = /*#__PURE__*/React.forwardRef(function PopperTooltip(props, forwardedRef) {
+  var _slots$root;
   var anchorEl = props.anchorEl,
     children = props.children,
-    component = props.component,
     direction = props.direction,
@@ -65,5 +64,5 @@ disablePortal = props.disablePortal,
     ownerStateProp = props.ownerState,
-    other = _objectWithoutProperties(props, ["anchorEl", "children", "component", "direction", "disablePortal", "modifiers", "open", "placement", "popperOptions", "popperRef", "slotProps", "slots", "TransitionProps", "ownerState"]);
+    other = _objectWithoutProperties(props, ["anchorEl", "children", "direction", "disablePortal", "modifiers", "open", "placement", "popperOptions", "popperRef", "slotProps", "slots", "TransitionProps", "ownerState"]);
   var tooltipRef = React.useRef(null);
-  var ownRef = useForkRef(tooltipRef, ref);
+  var ownRef = useForkRef(tooltipRef, forwardedRef);
   var popperRef = React.useRef(null);
@@ -157,3 +156,3 @@ var handlePopperRef = useForkRef(popperRef, popperRefProp);
   var classes = useUtilityClasses();
-  var Root = (_ref2 = component != null ? component : slots.root) != null ? _ref2 : 'div';
+  var Root = (_slots$root = slots.root) != null ? _slots$root : 'div';
   var rootProps = useSlotProps({
@@ -186,3 +185,3 @@ elementType: Root,
  */
-var Popper = /*#__PURE__*/React.forwardRef(function Popper(props, ref) {
+var Popper = /*#__PURE__*/React.forwardRef(function Popper(props, forwardedRef) {
   var anchorEl = props.anchorEl,
@@ -249,3 +248,3 @@ children = props.children,
       modifiers: modifiers,
-      ref: ref,
+      ref: forwardedRef,
       open: transition ? !exited : open,
@@ -384,6 +383,2 @@ placement: placement,
   /**
-   * @ignore
-   */
-  style: PropTypes.object,
-  /**
    * Help supporting a react-transition-group/Transition component.
@@ -390,0 +385,0 @@ * @default false

legacy/Portal/Portal.js

@@ -22,3 +22,3 @@ import * as React from 'react';
  */
-var Portal = /*#__PURE__*/React.forwardRef(function Portal(props, ref) {
+var Portal = /*#__PURE__*/React.forwardRef(function Portal(props, forwardedRef) {
   var children = props.children,
@@ -31,3 +31,3 @@ container = props.container,
     setMountNode = _React$useState[1]; // @ts-expect-error TODO upstream fix
-  var handleRef = useForkRef( /*#__PURE__*/React.isValidElement(children) ? children.ref : null, ref);
+  var handleRef = useForkRef( /*#__PURE__*/React.isValidElement(children) ? children.ref : null, forwardedRef);
   useEnhancedEffect(function () {
@@ -40,9 +40,9 @@ if (!disablePortal) {
     if (mountNode && !disablePortal) {
-      setRef(ref, mountNode);
+      setRef(forwardedRef, mountNode);
       return function () {
-        setRef(ref, null);
+        setRef(forwardedRef, null);
       };
     }
     return undefined;
-  }, [ref, mountNode, disablePortal]);
+  }, [forwardedRef, mountNode, disablePortal]);
   if (disablePortal) {
@@ -49,0 +49,0 @@ if ( /*#__PURE__*/React.isValidElement(children)) {

legacy/Select/Select.js

@@ -76,6 +76,5 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 var Select = /*#__PURE__*/React.forwardRef(function Select(props, forwardedRef) {
-  var _ref, _slots$listbox, _slots$popper;
+  var _slots$root, _slots$listbox, _slots$popper;
   var autoFocus = props.autoFocus,
     children = props.children,
-    component = props.component,
     defaultValue = props.defaultValue,
@@ -102,3 +101,3 @@ _props$defaultListbox = props.defaultListboxOpen,
     valueProp = props.value,
-    other = _objectWithoutProperties(props, ["autoFocus", "children", "component", "defaultValue", "defaultListboxOpen", "disabled", "getSerializedValue", "listboxId", "listboxOpen", "multiple", "name", "onChange", "onListboxOpenChange", "optionStringifier", "renderValue", "slotProps", "slots", "value"]);
+    other = _objectWithoutProperties(props, ["autoFocus", "children", "defaultValue", "defaultListboxOpen", "disabled", "getSerializedValue", "listboxId", "listboxOpen", "multiple", "name", "onChange", "onListboxOpenChange", "optionStringifier", "renderValue", "slotProps", "slots", "value"]);
   var renderValue = renderValueProp != null ? renderValueProp : defaultRenderValue;
@@ -110,3 +109,3 @@ var _React$useState = React.useState(false),
   var listboxRef = React.useRef(null);
-  var Button = (_ref = component != null ? component : slots.root) != null ? _ref : 'button';
+  var Button = (_slots$root = slots.root) != null ? _slots$root : 'button';
   var ListboxRoot = (_slots$listbox = slots.listbox) != null ? _slots$listbox : 'ul';
@@ -230,7 +229,2 @@ var PopperComponent = (_slots$popper = slots.popper) != null ? _slots$popper : Popper;
   /**
-   * The component used for the root node.
-   * Either a string to use a HTML element or a component.
-   */
-  component: PropTypes.elementType,
-  /**
    * If `true`, the select will be initially open.
@@ -301,3 +295,3 @@ * @default false
    */
-  slotProps: PropTypes.shape({
+  slotProps: PropTypes /* @typescript-to-proptypes-ignore */.shape({
     listbox: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
@@ -304,0 +298,0 @@ popper: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),

legacy/Slider/Slider.js

@@ -53,4 +53,4 @@ import _extends from "@babel/runtime/helpers/esm/extends";
  */
-var Slider = /*#__PURE__*/React.forwardRef(function Slider(props, ref) {
-  var _ref, _slots$rail, _slots$track, _slots$thumb, _slots$mark, _slots$markLabel;
+var Slider = /*#__PURE__*/React.forwardRef(function Slider(props, forwardedRef) {
+  var _slots$root, _slots$rail, _slots$track, _slots$thumb, _slots$mark, _slots$markLabel;
   var ariaLabel = props['aria-label'],
@@ -60,3 +60,2 @@ ariaValuetext = props['aria-valuetext'],
     className = props.className,
-    component = props.component,
     _props$disableSwap = props.disableSwap,
@@ -96,3 +95,3 @@ disableSwap = _props$disableSwap === void 0 ? false : _props$disableSwap,
     slots = _props$slots === void 0 ? {} : _props$slots,
-    other = _objectWithoutProperties(props, ["aria-label", "aria-valuetext", "aria-labelledby", "className", "component", "disableSwap", "disabled", "getAriaLabel", "getAriaValueText", "marks", "max", "min", "name", "onChange", "onChangeCommitted", "orientation", "scale", "step", "tabIndex", "track", "value", "valueLabelFormat", "isRtl", "defaultValue", "slotProps", "slots"]); // all props with defaults
+    other = _objectWithoutProperties(props, ["aria-label", "aria-valuetext", "aria-labelledby", "className", "disableSwap", "disabled", "getAriaLabel", "getAriaValueText", "marks", "max", "min", "name", "onChange", "onChangeCommitted", "orientation", "scale", "step", "tabIndex", "track", "value", "valueLabelFormat", "isRtl", "defaultValue", "slotProps", "slots"]); // all props with defaults
   // consider extracting to hook an reusing the lint rule for the variants
@@ -113,3 +112,3 @@ var partialOwnerState = _extends({}, props, {
   var _useSlider = useSlider(_extends({}, partialOwnerState, {
-      ref: ref
+      rootRef: forwardedRef
     })),
@@ -137,3 +136,3 @@ axisProps = _useSlider.axisProps,
   var classes = useUtilityClasses(ownerState);
-  var Root = (_ref = component != null ? component : slots.root) != null ? _ref : 'span';
+  var Root = (_slots$root = slots.root) != null ? _slots$root : 'span';
   var rootProps = useSlotProps({
@@ -286,15 +285,2 @@ elementType: Root,
   /**
-   * @ignore
-   */
-  children: PropTypes.node,
-  /**
-   * @ignore
-   */
-  className: PropTypes.string,
-  /**
-   * The component used for the root node.
-   * Either a string to use a HTML element or a component.
-   */
-  component: PropTypes.elementType,
-  /**
    * The default value. Use when the component is not controlled.
@@ -301,0 +287,0 @@ */

legacy/Snackbar/Snackbar.js

@@ -29,7 +29,6 @@ import _extends from "@babel/runtime/helpers/esm/extends";
  */
-var Snackbar = /*#__PURE__*/React.forwardRef(function Snackbar(props, ref) {
+var Snackbar = /*#__PURE__*/React.forwardRef(function Snackbar(props, forwardedRef) {
   var _props$autoHideDurati = props.autoHideDuration,
     autoHideDuration = _props$autoHideDurati === void 0 ? null : _props$autoHideDurati,
     children = props.children,
-    component = props.component,
     _props$disableWindowB = props.disableWindowBlurListener,
@@ -50,3 +49,3 @@ disableWindowBlurListener = _props$disableWindowB === void 0 ? false : _props$disableWindowB,
     slots = _props$slots === void 0 ? {} : _props$slots,
-    other = _objectWithoutProperties(props, ["autoHideDuration", "children", "component", "disableWindowBlurListener", "exited", "onBlur", "onClose", "onFocus", "onMouseEnter", "onMouseLeave", "open", "resumeHideDuration", "slotProps", "slots"]);
+    other = _objectWithoutProperties(props, ["autoHideDuration", "children", "disableWindowBlurListener", "exited", "onBlur", "onClose", "onFocus", "onMouseEnter", "onMouseLeave", "open", "resumeHideDuration", "slotProps", "slots"]);
   var classes = useUtilityClasses();
@@ -58,4 +57,3 @@ var _useSnackbar = useSnackbar(_extends({}, props, {
       open: open,
-      resumeHideDuration: resumeHideDuration,
-      ref: ref
+      resumeHideDuration: resumeHideDuration
     })),
@@ -65,3 +63,3 @@ getRootProps = _useSnackbar.getRootProps,
   var ownerState = props;
-  var Root = component || slots.root || 'div';
+  var Root = slots.root || 'div';
   var rootProps = useSlotProps({
@@ -73,3 +71,3 @@ elementType: Root,
     additionalProps: {
-      ref: ref
+      ref: forwardedRef
     },
@@ -119,7 +117,2 @@ ownerState: ownerState,
   /**
-   * The component used for the root node.
-   * Either a string to use a HTML element or a component.
-   */
-  component: PropTypes.elementType,
-  /**
    * If `true`, the `autoHideDuration` timer will expire even if the window is not focused.
@@ -135,6 +128,2 @@ * @default false
   /**
-   * @ignore
-   */
-  onBlur: PropTypes.func,
-  /**
    * Callback fired when the component requests to be closed.
@@ -151,14 +140,2 @@ * Typically `onClose` is used to set state in the parent component,
   /**
-   * @ignore
-   */
-  onFocus: PropTypes.func,
-  /**
-   * @ignore
-   */
-  onMouseEnter: PropTypes.func,
-  /**
-   * @ignore
-   */
-  onMouseLeave: PropTypes.func,
-  /**
    * If `true`, the component is shown.
@@ -165,0 +142,0 @@ */

legacy/Switch/Switch.js

@@ -37,6 +37,5 @@ import _extends from "@babel/runtime/helpers/esm/extends";
  */
-var Switch = /*#__PURE__*/React.forwardRef(function Switch(props, ref) {
-  var _ref, _slots$thumb, _slots$input, _slots$track;
+var Switch = /*#__PURE__*/React.forwardRef(function Switch(props, forwardedRef) {
+  var _slots$root, _slots$thumb, _slots$input, _slots$track;
   var checkedProp = props.checked,
-    component = props.component,
     defaultChecked = props.defaultChecked,
@@ -54,3 +53,3 @@ disabledProp = props.disabled,
     slots = _props$slots === void 0 ? {} : _props$slots,
-    other = _objectWithoutProperties(props, ["checked", "component", "defaultChecked", "disabled", "onBlur", "onChange", "onFocus", "onFocusVisible", "readOnly", "required", "slotProps", "slots"]);
+    other = _objectWithoutProperties(props, ["checked", "defaultChecked", "disabled", "onBlur", "onChange", "onFocus", "onFocusVisible", "readOnly", "required", "slotProps", "slots"]);
   var useSwitchProps = {
@@ -79,3 +78,3 @@ checked: checkedProp,
   var classes = useUtilityClasses(ownerState);
-  var Root = (_ref = component != null ? component : slots.root) != null ? _ref : 'span';
+  var Root = (_slots$root = slots.root) != null ? _slots$root : 'span';
   var rootProps = useSlotProps({
@@ -86,3 +85,3 @@ elementType: Root,
     additionalProps: {
-      ref: ref
+      ref: forwardedRef
     },
@@ -130,11 +129,2 @@ ownerState: ownerState,
   /**
-   * @ignore
-   */
-  children: PropTypes.node,
-  /**
-   * The component used for the root node.
-   * Either a string to use a HTML element or a component.
-   */
-  component: PropTypes.elementType,
-  /**
    * The default checked state. Use when the component is not controlled.
@@ -150,6 +140,2 @@ */
    */
-  id: PropTypes.string,
-  /**
-   * @ignore
-   */
   onBlur: PropTypes.func,
@@ -156,0 +142,0 @@ /**

legacy/Tab/Tab.js

@@ -30,4 +30,4 @@ import _extends from "@babel/runtime/helpers/esm/extends";
  */
-var Tab = /*#__PURE__*/React.forwardRef(function Tab(props, ref) {
-  var _ref;
+var Tab = /*#__PURE__*/React.forwardRef(function Tab(props, forwardedRef) {
+  var _slots$root;
   var action = props.action,
@@ -41,3 +41,2 @@ children = props.children,
     onFocus = props.onFocus,
-    component = props.component,
     _props$slotProps = props.slotProps,
@@ -47,7 +46,7 @@ slotProps = _props$slotProps === void 0 ? {} : _props$slotProps,
     slots = _props$slots === void 0 ? {} : _props$slots,
-    other = _objectWithoutProperties(props, ["action", "children", "value", "disabled", "onChange", "onClick", "onFocus", "component", "slotProps", "slots"]);
+    other = _objectWithoutProperties(props, ["action", "children", "value", "disabled", "onChange", "onClick", "onFocus", "slotProps", "slots"]);
   var tabRef = React.useRef();
-  var handleRef = useForkRef(tabRef, ref);
+  var handleRef = useForkRef(tabRef, forwardedRef);
   var _useTab = useTab(_extends({}, props, {
-      ref: handleRef
+      rootRef: handleRef
     })),
@@ -65,3 +64,3 @@ active = _useTab.active,
   var classes = useUtilityClasses(ownerState);
-  var TabRoot = (_ref = component != null ? component : slots.root) != null ? _ref : 'button';
+  var TabRoot = (_slots$root = slots.root) != null ? _slots$root : 'button';
   var tabRootProps = useSlotProps({
@@ -73,3 +72,3 @@ elementType: TabRoot,
     additionalProps: {
-      ref: ref
+      ref: forwardedRef
     },
@@ -101,7 +100,2 @@ ownerState: ownerState,
   /**
-   * The component used for the root node.
-   * Either a string to use a HTML element or a component.
-   */
-  component: PropTypes.elementType,
-  /**
    * If `true`, the component is disabled.
@@ -116,10 +110,2 @@ * @default false
   /**
-   * @ignore
-   */
-  onClick: PropTypes.func,
-  /**
-   * @ignore
-   */
-  onFocus: PropTypes.func,
-  /**
    * The props used for each slot inside the Tab.
@@ -126,0 +112,0 @@ * @default {}

legacy/TablePagination/TablePagination.js

@@ -51,6 +51,5 @@ import _extends from "@babel/runtime/helpers/esm/extends";
  */
-var TablePagination = /*#__PURE__*/React.forwardRef(function TablePagination(props, ref) {
-  var _ref2, _slots$select, _slots$actions, _slots$menuItem, _slots$selectLabel, _slots$displayedRows, _slots$toolbar, _slots$spacer;
-  var component = props.component,
-    colSpanProp = props.colSpan,
+var TablePagination = /*#__PURE__*/React.forwardRef(function TablePagination(props, forwardedRef) {
+  var _slots$root, _slots$select, _slots$actions, _slots$menuItem, _slots$selectLabel, _slots$displayedRows, _slots$toolbar, _slots$spacer;
+  var colSpanProp = props.colSpan,
     count = props.count,
@@ -75,7 +74,8 @@ _props$getItemAriaLab = props.getItemAriaLabel,
     slots = _props$slots === void 0 ? {} : _props$slots,
-    other = _objectWithoutProperties(props, ["component", "colSpan", "count", "getItemAriaLabel", "labelDisplayedRows", "labelId", "labelRowsPerPage", "onPageChange", "onRowsPerPageChange", "page", "rowsPerPage", "rowsPerPageOptions", "selectId", "slotProps", "slots"]);
+    other = _objectWithoutProperties(props, ["colSpan", "count", "getItemAriaLabel", "labelDisplayedRows", "labelId", "labelRowsPerPage", "onPageChange", "onRowsPerPageChange", "page", "rowsPerPage", "rowsPerPageOptions", "selectId", "slotProps", "slots"]);
   var ownerState = props;
   var classes = useUtilityClasses();
   var colSpan;
-  if (!component || component === 'td' || !isHostComponent(component)) {
+  var Root = (_slots$root = slots.root) != null ? _slots$root : 'td';
+  if (Root === 'td' || !isHostComponent(Root)) {
     colSpan = colSpanProp || 1000; // col-span over everything
@@ -92,3 +92,2 @@ }
   var labelId = useId(labelIdProp);
-  var Root = (_ref2 = component != null ? component : slots.root) != null ? _ref2 : 'td';
   var rootProps = useSlotProps({
@@ -100,3 +99,3 @@ elementType: Root,
       colSpan: colSpan,
-      ref: ref
+      ref: forwardedRef
     },
@@ -207,13 +206,4 @@ ownerState: ownerState,
    */
-  children: PropTypes.node,
-  /**
-   * @ignore
-   */
   colSpan: PropTypes.number,
   /**
-   * The component used for the root node.
-   * Either a string to use a HTML element or a component.
-   */
-  component: PropTypes.elementType,
-  /**
    * The total number of rows.
@@ -310,3 +300,3 @@ *
    */
-  slotProps: PropTypes.shape({
+  slotProps: PropTypes /* @typescript-to-proptypes-ignore */.shape({
     actions: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
@@ -313,0 +303,0 @@ displayedRows: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),

legacy/TablePagination/TablePaginationActions.js

@@ -35,6 +35,5 @@ import _extends from "@babel/runtime/helpers/esm/extends";
  */
-var TablePaginationActions = /*#__PURE__*/React.forwardRef(function TablePaginationActions(props, ref) {
-  var _ref, _slots$root, _slots$firstButton, _slots$lastButton, _slots$nextButton, _slots$backButton, _slots$lastPageIcon, _slots$firstPageIcon, _slots$nextPageIcon, _slots$backPageIcon;
-  var component = props.component,
-    count = props.count,
+var TablePaginationActions = /*#__PURE__*/React.forwardRef(function TablePaginationActions(props, forwardedRef) {
+  var _slots$root, _slots$firstButton, _slots$lastButton, _slots$nextButton, _slots$backButton, _slots$lastPageIcon, _slots$firstPageIcon, _slots$nextPageIcon, _slots$backPageIcon;
+  var count = props.count,
     _props$getItemAriaLab = props.getItemAriaLabel,
@@ -55,3 +54,3 @@ getItemAriaLabel = _props$getItemAriaLab === void 0 ? defaultGetAriaLabel : _props$getItemAriaLab,
     slots = _props$slots === void 0 ? {} : _props$slots,
-    other = _objectWithoutProperties(props, ["component", "count", "getItemAriaLabel", "onPageChange", "page", "rowsPerPage", "showFirstButton", "showLastButton", "direction", "ownerState", "slotProps", "slots"]);
+    other = _objectWithoutProperties(props, ["count", "getItemAriaLabel", "onPageChange", "page", "rowsPerPage", "showFirstButton", "showLastButton", "direction", "ownerState", "slotProps", "slots"]);
   var ownerState = props;
@@ -70,3 +69,3 @@ var handleFirstPageButtonClick = function handleFirstPageButtonClick(event) {
   };
-  var Root = (_ref = (_slots$root = slots.root) != null ? _slots$root : component) != null ? _ref : 'div';
+  var Root = (_slots$root = slots.root) != null ? _slots$root : 'div';
   var rootProps = useSlotProps({
@@ -77,3 +76,3 @@ elementType: Root,
     additionalProps: {
-      ref: ref
+      ref: forwardedRef
     },
@@ -80,0 +79,0 @@ ownerState: ownerState

legacy/TabPanel/TabPanel.js

@@ -28,6 +28,5 @@ import _extends from "@babel/runtime/helpers/esm/extends";
  */
-var TabPanel = /*#__PURE__*/React.forwardRef(function TabPanel(props, ref) {
-  var _ref;
+var TabPanel = /*#__PURE__*/React.forwardRef(function TabPanel(props, forwardedRef) {
+  var _slots$root;
   var children = props.children,
-    component = props.component,
     value = props.value,
@@ -38,3 +37,3 @@ _props$slotProps = props.slotProps,
     slots = _props$slots === void 0 ? {} : _props$slots,
-    other = _objectWithoutProperties(props, ["children", "component", "value", "slotProps", "slots"]);
+    other = _objectWithoutProperties(props, ["children", "value", "slotProps", "slots"]);
   var _useTabPanel = useTabPanel(props),
@@ -47,3 +46,3 @@ hidden = _useTabPanel.hidden,
   var classes = useUtilityClasses(ownerState);
-  var TabPanelRoot = (_ref = component != null ? component : slots.root) != null ? _ref : 'div';
+  var TabPanelRoot = (_slots$root = slots.root) != null ? _slots$root : 'div';
   var tabPanelRootProps = useSlotProps({
@@ -56,3 +55,3 @@ elementType: TabPanelRoot,
       role: 'tabpanel',
-      ref: ref
+      ref: forwardedRef
     },
@@ -76,7 +75,2 @@ ownerState: ownerState,
   /**
-   * The component used for the root node.
-   * Either a string to use a HTML element or a component.
-   */
-  component: PropTypes.elementType,
-  /**
    * The props used for each slot inside the TabPanel.
@@ -83,0 +77,0 @@ * @default {}

legacy/Tabs/Tabs.js

@@ -30,4 +30,4 @@ import _extends from "@babel/runtime/helpers/esm/extends";
  */
-var Tabs = /*#__PURE__*/React.forwardRef(function Tabs(props, ref) {
-  var _ref;
+var Tabs = /*#__PURE__*/React.forwardRef(function Tabs(props, forwardedRef) {
+  var _slots$root;
   var children = props.children,
@@ -40,3 +40,2 @@ valueProp = props.value,
     direction = _props$direction === void 0 ? 'ltr' : _props$direction,
-    component = props.component,
     onChange = props.onChange,
@@ -48,3 +47,3 @@ selectionFollowsFocus = props.selectionFollowsFocus,
     slots = _props$slots === void 0 ? {} : _props$slots,
-    other = _objectWithoutProperties(props, ["children", "value", "defaultValue", "orientation", "direction", "component", "onChange", "selectionFollowsFocus", "slotProps", "slots"]);
+    other = _objectWithoutProperties(props, ["children", "value", "defaultValue", "orientation", "direction", "onChange", "selectionFollowsFocus", "slotProps", "slots"]);
   var _useTabs = useTabs(props),
@@ -57,3 +56,3 @@ contextValue = _useTabs.contextValue;
   var classes = useUtilityClasses(ownerState);
-  var TabsRoot = (_ref = component != null ? component : slots.root) != null ? _ref : 'div';
+  var TabsRoot = (_slots$root = slots.root) != null ? _slots$root : 'div';
   var tabsRootProps = useSlotProps({
@@ -64,3 +63,3 @@ elementType: TabsRoot,
     additionalProps: {
-      ref: ref
+      ref: forwardedRef
     },
@@ -87,7 +86,2 @@ ownerState: ownerState,
   /**
-   * The component used for the root node.
-   * Either a string to use a HTML element or a component.
-   */
-  component: PropTypes.elementType,
-  /**
    * The default value. Use when the component is not controlled.
@@ -94,0 +88,0 @@ */

legacy/TabsList/TabsList.js

@@ -30,6 +30,5 @@ import _extends from "@babel/runtime/helpers/esm/extends";
  */
-var TabsList = /*#__PURE__*/React.forwardRef(function TabsList(props, ref) {
-  var _ref;
+var TabsList = /*#__PURE__*/React.forwardRef(function TabsList(props, forwardedRef) {
+  var _slots$root;
   var children = props.children,
-    component = props.component,
     _props$slotProps = props.slotProps,
@@ -39,5 +38,5 @@ slotProps = _props$slotProps === void 0 ? {} : _props$slotProps,
     slots = _props$slots === void 0 ? {} : _props$slots,
-    other = _objectWithoutProperties(props, ["children", "component", "slotProps", "slots"]);
+    other = _objectWithoutProperties(props, ["children", "slotProps", "slots"]);
   var _useTabsList = useTabsList({
-      ref: ref
+      rootRef: forwardedRef
     }),
@@ -53,3 +52,3 @@ isRtl = _useTabsList.isRtl,
   var classes = useUtilityClasses(ownerState);
-  var TabsListRoot = (_ref = component != null ? component : slots.root) != null ? _ref : 'div';
+  var TabsListRoot = (_slots$root = slots.root) != null ? _slots$root : 'div';
   var tabsListRootProps = useSlotProps({
@@ -80,7 +79,2 @@ elementType: TabsListRoot,
   /**
-   * The component used for the root node.
-   * Either a string to use a HTML element or a component.
-   */
-  component: PropTypes.elementType,
-  /**
    * The props used for each slot inside the TabsList.
@@ -87,0 +81,0 @@ * @default {}

legacy/TextareaAutosize/TextareaAutosize.js

@@ -42,3 +42,3 @@ import _extends from "@babel/runtime/helpers/esm/extends";
  */
-var TextareaAutosize = /*#__PURE__*/React.forwardRef(function TextareaAutosize(props, ref) {
+var TextareaAutosize = /*#__PURE__*/React.forwardRef(function TextareaAutosize(props, forwardedRef) {
   var onChange = props.onChange,
@@ -54,3 +54,3 @@ maxRows = props.maxRows,
   var inputRef = React.useRef(null);
-  var handleRef = useForkRef(ref, inputRef);
+  var handleRef = useForkRef(forwardedRef, inputRef);
   var shadowRef = React.useRef(null);
@@ -57,0 +57,0 @@ var renders = React.useRef(0);

legacy/useButton/useButton.js

@@ -21,3 +21,3 @@ import _extends from "@babel/runtime/helpers/esm/extends";
     href = parameters.href,
-    externalRef = parameters.ref,
+    externalRef = parameters.rootRef,
     tabIndex = parameters.tabIndex,
@@ -196,6 +196,5 @@ to = parameters.to,
     setFocusVisible: setFocusVisible,
-    disabled: disabled,
     active: active,
-    ref: handleRef
+    rootRef: handleRef
   };
 }

legacy/useInput/useInput.js

@@ -175,2 +175,3 @@ import _extends from "@babel/runtime/helpers/esm/extends";
     getRootProps: getRootProps,
+    inputRef: handleInputRef,
     required: required,
@@ -177,0 +178,0 @@ value: value

legacy/useList/listActions.types.js

@@ -9,2 +9,6 @@ export var ListActionTypes = {
   textNavigation: 'list:textNavigation'
-};
+};
+
+/**
+ * A union of all standard actions that can be dispatched to the list reducer.
+ */

legacy/useList/useList.js

@@ -64,3 +64,3 @@ import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
     isItemDisabled = _params$isItemDisable === void 0 ? defaultIsItemDisabled : _params$isItemDisable,
-    externalListRef = params.listRef,
+    externalListRef = params.rootRef,
     _params$onStateChange = params.onStateChange,
@@ -295,2 +295,3 @@ onStateChange = _params$onStateChange === void 0 ? NOOP : _params$onStateChange,
     getRootProps: getRootProps,
+    rootRef: handleRef,
     state: state
@@ -297,0 +298,0 @@ };

legacy/useList/useListItem.js

@@ -20,3 +20,3 @@ import _extends from "@babel/runtime/helpers/esm/extends";
     item = parameters.item,
-    externalRef = parameters.ref;
+    externalRef = parameters.rootRef;
   var itemRef = React.useRef(null);
@@ -104,5 +104,5 @@ var handleRef = useForkRef(itemRef, externalRef);
     highlighted: highlighted,
-    ref: handleRef,
+    rootRef: handleRef,
     selected: selected
   };
 }

legacy/useMenu/useMenu.js

@@ -74,3 +74,3 @@ import _extends from "@babel/runtime/helpers/esm/extends";
       },
-      listRef: handleRef,
+      rootRef: handleRef,
       onStateChange: stateChangeHandler,
@@ -88,3 +88,4 @@ reducerActionContext: {
     open = _useList$state.open,
-    highlightedValue = _useList$state.highlightedValue;
+    highlightedValue = _useList$state.highlightedValue,
+    mergedListRef = _useList.rootRef;
   React.useEffect(function () {
@@ -120,2 +121,3 @@ if (open && highlightedValue === subitemKeys[0]) {
     highlightedValue: highlightedValue,
+    listboxRef: mergedListRef,
     menuItems: subitems,
@@ -122,0 +124,0 @@ open: open

legacy/useMenuItem/useMenuItem.js

@@ -22,3 +22,3 @@ import _extends from "@babel/runtime/helpers/esm/extends";
     idParam = params.id,
-    externalRef = params.ref,
+    externalRef = params.rootRef,
     label = params.label;
@@ -40,3 +40,3 @@ var id = useId(idParam);
     highlighted = _useListItem.highlighted,
-    listItemRefHandler = _useListItem.ref;
+    listItemRefHandler = _useListItem.rootRef;
   var _useCompoundItem = useCompoundItem(id, itemMetadata),
@@ -51,3 +51,3 @@ index = _useCompoundItem.index,
     focusVisible = _useButton.focusVisible,
-    buttonRefHandler = _useButton.ref;
+    buttonRefHandler = _useButton.rootRef;
   var handleRef = useForkRef(listItemRefHandler, buttonRefHandler, externalRef, itemRef);
@@ -76,3 +76,3 @@ React.useDebugValue({
       totalItemCount: 0,
-      ref: handleRef
+      rootRef: handleRef
     };
@@ -96,4 +96,4 @@ }
     totalItemCount: totalItemCount,
-    ref: handleRef
+    rootRef: handleRef
   };
 }

legacy/useOption/useOption.js

@@ -21,3 +21,3 @@ import _extends from "@babel/runtime/helpers/esm/extends";
     disabled = params.disabled,
-    optionRefParam = params.optionRef,
+    optionRefParam = params.rootRef,
     idParam = params.id;
@@ -28,3 +28,3 @@ var _useListItem = useListItem({
     getListItemProps = _useListItem.getRootProps,
-    listItemRefHandler = _useListItem.ref,
+    listItemRefHandler = _useListItem.rootRef,
     highlighted = _useListItem.highlighted,
@@ -59,4 +59,4 @@ selected = _useListItem.selected;
     selected: selected,
-    ref: handleRef
+    rootRef: handleRef
   };
 }

legacy/useSelect/useSelect.js

@@ -94,7 +94,8 @@ import _extends from "@babel/runtime/helpers/esm/extends";
       disabled: disabled,
-      ref: handleButtonRef
+      rootRef: handleButtonRef
     }),
     getButtonRootProps = _useButton.getRootProps,
     buttonActive = _useButton.active,
-    buttonFocusVisible = _useButton.focusVisible;
+    buttonFocusVisible = _useButton.focusVisible,
+    mergedButtonRef = _useButton.rootRef;
   var optionValues = React.useMemo(function () {
@@ -157,3 +158,3 @@ return Array.from(options.keys());
     isItemDisabled: isItemDisabled,
-    listRef: handleListboxRef,
+    rootRef: handleListboxRef,
     onChange: handleSelectionChange,
@@ -179,3 +180,4 @@ onHighlightChange: handleHighlightChange,
     highlightedOption = _useList$state.highlightedValue,
-    selectedOptions = _useList$state.selectedValues;
+    selectedOptions = _useList$state.selectedValues,
+    mergedListboxRef = _useList.rootRef;
   React.useEffect(function () {
@@ -305,2 +307,4 @@ focusListboxIfRequested();
     buttonFocusVisible: buttonFocusVisible,
+    buttonRef: mergedButtonRef,
+    contextValue: contextValue,
     disabled: disabled,
@@ -311,3 +315,3 @@ dispatch: dispatch,
     getOptionMetadata: getOptionMetadata,
-    contextValue: contextValue,
+    listboxRef: mergedListboxRef,
     open: open,
@@ -314,0 +318,0 @@ options: optionValues,

legacy/useSlider/useSlider.js

@@ -200,3 +200,3 @@ import _extends from "@babel/runtime/helpers/esm/extends";
     orientation = _parameters$orientati === void 0 ? 'horizontal' : _parameters$orientati,
-    ref = parameters.ref,
+    ref = parameters.rootRef,
     _parameters$scale = parameters.scale,
@@ -657,2 +657,3 @@ scale = _parameters$scale === void 0 ? Identity : _parameters$scale,
     range: range,
+    rootRef: handleRef,
     trackLeap: trackLeap,
@@ -659,0 +660,0 @@ trackOffset: trackOffset,

legacy/useSnackbar/useSnackbar.js

@@ -24,3 +24,2 @@ import _extends from "@babel/runtime/helpers/esm/extends";
     open = parameters.open,
-    ref = parameters.ref,
     resumeHideDuration = parameters.resumeHideDuration;
@@ -132,3 +131,2 @@ var timerAutoHide = React.useRef();
     return _extends({
-      ref: ref,
       // ClickAwayListener adds an `onClick` prop which results in the alert not being announced.
@@ -135,0 +133,0 @@ // See https://github.com/mui/material-ui/issues/29080

legacy/useSwitch/useSwitch.js

@@ -89,3 +89,3 @@ import _extends from "@babel/runtime/helpers/esm/extends";
   };
-  var handleRefChange = useForkRef(focusVisibleRef, inputRef);
+  var handleInputRef = useForkRef(focusVisibleRef, inputRef);
   var getInputProps = function getInputProps() {
@@ -98,3 +98,3 @@ var otherProps = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
       readOnly: readOnly,
-      ref: handleRefChange,
+      ref: handleInputRef,
       required: required,
@@ -113,4 +113,5 @@ type: 'checkbox'
     getInputProps: getInputProps,
+    inputRef: handleInputRef,
     readOnly: Boolean(readOnly)
   };
 }

legacy/useTab/useTab.js

@@ -24,3 +24,3 @@ import _extends from "@babel/runtime/helpers/esm/extends";
   var valueParam = parameters.value,
-    externalRef = parameters.ref,
+    externalRef = parameters.rootRef,
     _parameters$disabled = parameters.disabled,
@@ -50,3 +50,3 @@ disabled = _parameters$disabled === void 0 ? false : _parameters$disabled,
     getTabProps = _useListItem.getRootProps,
-    listItemRefHandler = _useListItem.ref,
+    listItemRefHandler = _useListItem.rootRef,
     highlighted = _useListItem.highlighted,
@@ -60,3 +60,3 @@ selected = _useListItem.selected;
     getButtonProps = _useButton.getRootProps,
-    buttonRefHandler = _useButton.ref,
+    buttonRefHandler = _useButton.rootRef,
     active = _useButton.active,
@@ -85,2 +85,3 @@ focusVisible = _useButton.focusVisible,
     index: index,
+    rootRef: handleRef,
     // the `selected` state isn't set on the server (it relies on effects to be calculated),
@@ -87,0 +88,0 @@ // so we fall back to checking the `value` prop with the selectedValue from the TabsContext

legacy/useTabsList/useTabsList.js

@@ -21,3 +21,3 @@ import _extends from "@babel/runtime/helpers/esm/extends";
   var _selectedValues$;
-  var externalRef = parameters.ref;
+  var externalRef = parameters.rootRef;
   var _useTabsContext = useTabsContext(),
@@ -82,3 +82,3 @@ _useTabsContext$direc = _useTabsContext.direction,
       items: subitemKeys,
-      listRef: externalRef,
+      rootRef: externalRef,
       onChange: handleChange,
@@ -99,3 +99,4 @@ orientation: listOrientation,
     highlightedValue = _useList$state.highlightedValue,
-    selectedValues = _useList$state.selectedValues;
+    selectedValues = _useList$state.selectedValues,
+    mergedRootRef = _useList.rootRef;
   React.useEffect(function () {
@@ -122,11 +123,12 @@ if (value === undefined) {
   return {
+    contextValue: _extends({}, compoundComponentContextValue, listContextValue),
     dispatch: dispatch,
+    getRootProps: getRootProps,
+    highlightedValue: highlightedValue,
     isRtl: isRtl,
     orientation: orientation,
-    selectedValue: (_selectedValues$ = selectedValues[0]) != null ? _selectedValues$ : null,
-    highlightedValue: highlightedValue,
-    getRootProps: getRootProps,
-    contextValue: _extends({}, compoundComponentContextValue, listContextValue)
+    rootRef: mergedRootRef,
+    selectedValue: (_selectedValues$ = selectedValues[0]) != null ? _selectedValues$ : null
   };
 }
 export default useTabsList;

legacy/utils/index.js

@@ -9,2 +9,3 @@ export { default as appendOwnerState } from './appendOwnerState';
 export { default as mergeSlotProps } from './mergeSlotProps';
+export * from './PolymorphicComponent';
 export * from './types';

legacy/utils/useCompoundItem.js

 import * as React from 'react';
 import { unstable_useEnhancedEffect as useEnhancedEffect } from '@mui/utils';
 import { CompoundComponentContext } from './useCompound';
+
+/**
+ * Registers a child component with the parent component.
+ *
+ * @param id A unique key for the child component. If the `id` is `undefined`, the registration logic will not run (this can sometimes be the case during SSR).
+ * @param itemMetadata Arbitrary metadata to pass to the parent component. This should be a stable reference (e.g. a memoized object), to avoid unnecessary re-registrations.
+ * @param missingKeyGenerator A function that generates a unique id for the item.
+ *   It is called with the set of the ids of all the items that have already been registered.
+ *   Return `existingKeys.size` if you want to use the index of the new item as the id.
+ *
+ * @ignore - internal hook.
+ */
+
 export function useCompoundItem(id, itemMetadata, missingKeyGenerator) {
@@ -5,0 +18,0 @@ var context = React.useContext(CompoundComponentContext);

Menu/index.d.ts

@@ -0,0 +0,0 @@ export { default } from './Menu';

Menu/Menu.d.ts

@@ -1,2 +0,2 @@
-import { OverridableComponent } from '@mui/types';
+import { PolymorphicComponent } from '../utils/PolymorphicComponent';
 import { MenuTypeMap } from './Menu.types';
@@ -13,3 +13,3 @@ /**
  */
-declare const Menu: OverridableComponent<MenuTypeMap<{}, "ul">>;
+declare const Menu: PolymorphicComponent<MenuTypeMap<{}, "ul">>;
 export default Menu;

Menu/Menu.js

 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["actions", "anchorEl", "children", "component", "defaultOpen", "listboxId", "onOpenChange", "open", "slotProps", "slots"];
+const _excluded = ["actions", "anchorEl", "children", "defaultOpen", "listboxId", "onOpenChange", "open", "slotProps", "slots"];
 import * as React from 'react';
@@ -36,3 +36,3 @@ import PropTypes from 'prop-types';
 const Menu = /*#__PURE__*/React.forwardRef(function Menu(props, forwardedRef) {
-  var _ref, _slots$listbox;
+  var _slots$root, _slots$listbox;
   const {
@@ -42,3 +42,2 @@ actions,
       children,
-      component,
       defaultOpen,
@@ -70,3 +69,3 @@ listboxId,
   const classes = useUtilityClasses(ownerState);
-  const Root = (_ref = component != null ? component : slots.root) != null ? _ref : Popper;
+  const Root = (_slots$root = slots.root) != null ? _slots$root : Popper;
   const rootProps = useSlotProps({
@@ -124,7 +123,2 @@ elementType: Root,
   /**
-   * The component used for the root node.
-   * Either a string to use a HTML element or a component.
-   */
-  component: PropTypes.elementType,
-  /**
    * @ignore
@@ -150,3 +144,3 @@ */
    */
-  slotProps: PropTypes.shape({
+  slotProps: PropTypes /* @typescript-to-proptypes-ignore */.shape({
     listbox: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
@@ -153,0 +147,0 @@ root: PropTypes.oneOfType([PropTypes.func, PropTypes.object])

Menu/Menu.types.d.ts

@@ -1,5 +0,5 @@
-import { OverrideProps } from '@mui/types';
 import * as React from 'react';
+import { Simplify } from '@mui/types';
 import Popper, { PopperProps } from '../Popper';
-import { SlotComponentProps } from '../utils';
+import { PolymorphicProps, SlotComponentProps } from '../utils';
 import { UseMenuListboxSlotProps } from '../useMenu';
@@ -66,12 +66,10 @@ import { ListAction } from '../useList';
 }
-export interface MenuTypeMap<P = {}, D extends React.ElementType = 'ul'> {
-    props: P & MenuOwnProps;
-    defaultComponent: D;
+export interface MenuTypeMap<AdditionalProps = {}, RootComponentType extends React.ElementType = 'ul'> {
+    props: MenuOwnProps & AdditionalProps;
+    defaultComponent: RootComponentType;
 }
-export type MenuProps<D extends React.ElementType = MenuTypeMap['defaultComponent']> = OverrideProps<MenuTypeMap<{}, D>, D> & {
-    component?: D;
-};
-export interface MenuOwnerState extends MenuOwnProps {
+export type MenuProps<RootComponentType extends React.ElementType = MenuTypeMap['defaultComponent']> = PolymorphicProps<MenuTypeMap<{}, RootComponentType>, RootComponentType>;
+export type MenuOwnerState = Simplify<MenuOwnProps & {
     open: boolean;
-}
+}>;
 export type MenuRootSlotProps = {
@@ -78,0 +76,0 @@ anchorEl: PopperProps['anchorEl'];

Menu/menuClasses.d.ts

@@ -0,0 +0,0 @@ export interface MenuClasses {

MenuItem/index.d.ts

@@ -0,0 +0,0 @@ export { default } from './MenuItem';

MenuItem/MenuItem.d.ts

@@ -1,2 +0,2 @@
-import { OverridableComponent } from '@mui/types';
+import { PolymorphicComponent } from '../utils/PolymorphicComponent';
 import { MenuItemTypeMap } from './MenuItem.types';
@@ -13,3 +13,3 @@ /**
  */
-declare const MenuItem: OverridableComponent<MenuItemTypeMap<{}, "li">>;
+declare const MenuItem: PolymorphicComponent<MenuItemTypeMap<{}, "li">>;
 export default MenuItem;

MenuItem/MenuItem.js

 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["children", "disabled", "component", "label", "slotProps", "slots"];
+const _excluded = ["children", "disabled", "label", "slotProps", "slots"];
 import * as React from 'react';
@@ -33,8 +33,7 @@ import PropTypes from 'prop-types';
  */
-const MenuItem = /*#__PURE__*/React.forwardRef(function MenuItem(props, ref) {
-  var _ref;
+const MenuItem = /*#__PURE__*/React.forwardRef(function MenuItem(props, forwardedRef) {
+  var _slots$root;
   const {
       children,
       disabled: disabledProp = false,
-      component,
       label,
@@ -52,3 +51,3 @@ slotProps = {},
     disabled: disabledProp,
-    ref,
+    rootRef: forwardedRef,
     label
@@ -62,3 +61,3 @@ });
   const classes = useUtilityClasses(ownerState);
-  const Root = (_ref = component != null ? component : slots.root) != null ? _ref : 'li';
+  const Root = (_slots$root = slots.root) != null ? _slots$root : 'li';
   const rootProps = useSlotProps({
@@ -86,7 +85,2 @@ elementType: Root,
   /**
-   * The component used for the root node.
-   * Either a string to use a HTML element or a component.
-   */
-  component: PropTypes.elementType,
-  /**
    * @ignore
@@ -93,0 +87,0 @@ */

MenuItem/MenuItem.types.d.ts

@@ -1,11 +0,11 @@
-import { OverrideProps } from '@mui/types';
 import * as React from 'react';
-import { SlotComponentProps } from '../utils';
+import { Simplify } from '@mui/types';
+import { PolymorphicProps, SlotComponentProps } from '../utils';
 export interface MenuItemRootSlotPropsOverrides {
 }
-export interface MenuItemOwnerState extends MenuItemOwnProps {
+export type MenuItemOwnerState = Simplify<MenuItemOwnProps & {
     disabled: boolean;
     focusVisible: boolean;
     highlighted: boolean;
-}
+}>;
 export interface MenuItemOwnProps {
@@ -46,9 +46,7 @@ children?: React.ReactNode;
 }
-export interface MenuItemTypeMap<P = {}, D extends React.ElementType = 'li'> {
-    props: P & MenuItemOwnProps;
-    defaultComponent: D;
+export interface MenuItemTypeMap<AdditionalProps = {}, RootComponentType extends React.ElementType = 'li'> {
+    props: MenuItemOwnProps & AdditionalProps;
+    defaultComponent: RootComponentType;
 }
-export type MenuItemProps<D extends React.ElementType = MenuItemTypeMap['defaultComponent']> = OverrideProps<MenuItemTypeMap<{}, D>, D> & {
-    component?: D;
-};
+export type MenuItemProps<RootComponentType extends React.ElementType = MenuItemTypeMap['defaultComponent']> = PolymorphicProps<MenuItemTypeMap<{}, RootComponentType>, RootComponentType>;
 export interface MenuItemState {
@@ -55,0 +53,0 @@ disabled: boolean;

MenuItem/menuItemClasses.d.ts

@@ -0,0 +0,0 @@ export interface MenuItemClasses {

Modal/index.d.ts

@@ -0,0 +0,0 @@ export { default } from './Modal';

Modal/Modal.d.ts

@@ -1,2 +0,2 @@
-import { OverridableComponent } from '@mui/types';
+import { PolymorphicComponent } from '../utils/PolymorphicComponent';
 import { ModalTypeMap } from './Modal.types';
@@ -24,3 +24,3 @@ /**
  */
-declare const Modal: OverridableComponent<ModalTypeMap<{}, "div">>;
+declare const Modal: PolymorphicComponent<ModalTypeMap<{}, "div">>;
 export default Modal;

Modal/Modal.js

 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["children", "closeAfterTransition", "component", "container", "disableAutoFocus", "disableEnforceFocus", "disableEscapeKeyDown", "disablePortal", "disableRestoreFocus", "disableScrollLock", "hideBackdrop", "keepMounted", "manager", "onBackdropClick", "onClose", "onKeyDown", "open", "onTransitionEnter", "onTransitionExited", "slotProps", "slots"];
+const _excluded = ["children", "closeAfterTransition", "container", "disableAutoFocus", "disableEnforceFocus", "disableEscapeKeyDown", "disablePortal", "disableRestoreFocus", "disableScrollLock", "hideBackdrop", "keepMounted", "manager", "onBackdropClick", "onClose", "onKeyDown", "open", "onTransitionEnter", "onTransitionExited", "slotProps", "slots"];
 import * as React from 'react';
@@ -60,7 +60,6 @@ import PropTypes from 'prop-types';
 const Modal = /*#__PURE__*/React.forwardRef(function Modal(props, forwardedRef) {
-  var _props$ariaHidden, _ref;
+  var _props$ariaHidden, _slots$root;
   const {
       children,
       closeAfterTransition = false,
-      component,
       container,
@@ -76,3 +75,3 @@ disableAutoFocus = false,
       // private
-      manager = defaultManager,
+      manager: managerProp = defaultManager,
       onBackdropClick,
@@ -88,2 +87,5 @@ onClose,
     other = _objectWithoutPropertiesLoose(props, _excluded);
+  // TODO: `modal`` must change its type in this file to match the type of methods
+  // provided by `ModalManager`
+  const manager = managerProp;
   const [exited, setExited] = React.useState(!open);
@@ -219,3 +221,3 @@ const modal = React.useRef({});
   }
-  const Root = (_ref = component != null ? component : slots.root) != null ? _ref : 'div';
+  const Root = (_slots$root = slots.root) != null ? _slots$root : 'div';
   const rootProps = useSlotProps({
@@ -281,7 +283,2 @@ elementType: Root,
   /**
-   * The component used for the root node.
-   * Either a string to use a HTML element or a component.
-   */
-  component: PropTypes.elementType,
-  /**
    * An HTML element or function that returns one.
@@ -359,6 +356,2 @@ * The `container` will have the portal children appended to it.
   /**
-   * @ignore
-   */
-  onKeyDown: PropTypes.func,
-  /**
    * If `true`, the component is shown.
@@ -365,0 +358,0 @@ */

Modal/Modal.types.d.ts

@@ -1,5 +0,5 @@
-import { OverridableComponent, OverridableTypeMap, OverrideProps } from '@mui/types';
 import * as React from 'react';
+import { OverridableComponent, OverridableTypeMap, Simplify } from '@mui/types';
 import { PortalProps } from '../Portal';
-import { SlotComponentProps } from '../utils';
+import { PolymorphicProps, SlotComponentProps } from '../utils';
 export interface ModalRootSlotPropsOverrides {
@@ -123,5 +123,5 @@ }
 }
-export interface ModalTypeMap<P = {}, D extends React.ElementType = 'div'> {
-    props: P & ModalOwnProps;
-    defaultComponent: D;
+export interface ModalTypeMap<AdditionalProps = {}, RootComponentType extends React.ElementType = 'div'> {
+    props: ModalOwnProps & AdditionalProps;
+    defaultComponent: RootComponentType;
 }
@@ -136,7 +136,4 @@ /**
 export type ExtendModal<M extends OverridableTypeMap> = OverridableComponent<ExtendModalTypeMap<M>>;
-export type ModalProps<D extends React.ElementType = ModalTypeMap['defaultComponent'], P = {
-    component?: React.ElementType;
-    focusVisible?: boolean;
-}> = OverrideProps<ModalTypeMap<P, D>, D>;
-export type ModalOwnerState = ModalProps & {
+export type ModalProps<RootComponentType extends React.ElementType = ModalTypeMap['defaultComponent']> = PolymorphicProps<ModalTypeMap<{}, RootComponentType>, RootComponentType>;
+export type ModalOwnerState = Simplify<ModalOwnProps & {
     closeAfterTransition: boolean;
@@ -152,3 +149,3 @@ disableAutoFocus: boolean;
     keepMounted: boolean;
-};
+}>;
 export interface ModalRootSlotProps {
@@ -155,0 +152,0 @@ children: React.ReactNode;

Modal/modalClasses.d.ts

@@ -0,0 +0,0 @@ export interface ModalClasses {

Modal/ModalManager.d.ts

@@ -0,0 +0,0 @@ export interface ManagedModalProps {

modern/Badge/Badge.js

 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["badgeContent", "component", "children", "invisible", "max", "slotProps", "slots", "showZero"];
+const _excluded = ["badgeContent", "children", "invisible", "max", "slotProps", "slots", "showZero"];
 import * as React from 'react';
@@ -33,5 +33,4 @@ import PropTypes from 'prop-types';
  */
-const Badge = /*#__PURE__*/React.forwardRef(function Badge(props, ref) {
+const Badge = /*#__PURE__*/React.forwardRef(function Badge(props, forwardedRef) {
   const {
-      component,
       children,
@@ -59,3 +58,3 @@ max: maxProp = 99,
   const classes = useUtilityClasses(ownerState);
-  const Root = component || slots.root || 'span';
+  const Root = slots.root ?? 'span';
   const rootProps = useSlotProps({
@@ -66,3 +65,3 @@ elementType: Root,
     additionalProps: {
-      ref
+      ref: forwardedRef
     },
@@ -72,3 +71,3 @@ ownerState,
   });
-  const BadgeComponent = slots.badge || 'span';
+  const BadgeComponent = slots.badge ?? 'span';
   const badgeProps = useSlotProps({
@@ -100,7 +99,2 @@ elementType: BadgeComponent,
   /**
-   * The component used for the root node.
-   * Either a string to use a HTML element or a component.
-   */
-  component: PropTypes.elementType,
-  /**
    * If `true`, the badge is invisible.
@@ -107,0 +101,0 @@ * @default false

modern/Button/Button.js

 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["action", "children", "component", "disabled", "focusableWhenDisabled", "onBlur", "onClick", "onFocus", "onFocusVisible", "onKeyDown", "onKeyUp", "onMouseLeave", "slotProps", "slots"];
+const _excluded = ["action", "children", "disabled", "focusableWhenDisabled", "onFocusVisible", "slotProps", "slots"];
 import * as React from 'react';
@@ -38,3 +38,2 @@ import PropTypes from 'prop-types';
       children,
-      component,
       focusableWhenDisabled = false,
@@ -67,3 +66,3 @@ slotProps = {},
   const defaultElement = other.href || other.to ? 'a' : 'button';
-  const Root = component ?? slots.root ?? defaultElement;
+  const Root = slots.root ?? defaultElement;
   const rootProps = useSlotProps({
@@ -102,7 +101,2 @@ elementType: Root,
   /**
-   * The component used for the root node.
-   * Either a string to use a HTML element or a component.
-   */
-  component: PropTypes.elementType,
-  /**
    * If `true`, the component is disabled.
@@ -124,28 +118,4 @@ * @default false
    */
-  onBlur: PropTypes.func,
-  /**
-   * @ignore
-   */
-  onClick: PropTypes.func,
-  /**
-   * @ignore
-   */
-  onFocus: PropTypes.func,
-  /**
-   * @ignore
-   */
   onFocusVisible: PropTypes.func,
   /**
-   * @ignore
-   */
-  onKeyDown: PropTypes.func,
-  /**
-   * @ignore
-   */
-  onKeyUp: PropTypes.func,
-  /**
-   * @ignore
-   */
-  onMouseLeave: PropTypes.func,
-  /**
    * The props used for each slot inside the Button.
@@ -152,0 +122,0 @@ * @default {}

modern/FormControl/FormControl.js

 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["defaultValue", "children", "component", "disabled", "error", "onChange", "required", "slotProps", "slots", "value"];
+const _excluded = ["defaultValue", "children", "disabled", "error", "onChange", "required", "slotProps", "slots", "value"];
 import * as React from 'react';
@@ -67,7 +67,6 @@ import PropTypes from 'prop-types';
  */
-const FormControl = /*#__PURE__*/React.forwardRef(function FormControl(props, ref) {
+const FormControl = /*#__PURE__*/React.forwardRef(function FormControl(props, forwardedRef) {
   const {
       defaultValue,
       children,
-      component,
       disabled = false,
@@ -126,3 +125,3 @@ error = false,
   };
-  const Root = component ?? slots.root ?? 'div';
+  const Root = slots.root ?? 'div';
   const rootProps = useSlotProps({
@@ -133,3 +132,3 @@ elementType: Root,
     additionalProps: {
-      ref,
+      ref: forwardedRef,
       children: renderChildren()
@@ -155,7 +154,2 @@ },
   /**
-   * The component used for the root node.
-   * Either a string to use a HTML element or a component.
-   */
-  component: PropTypes.elementType,
-  /**
    * @ignore
@@ -162,0 +156,0 @@ */

modern/index.js

 /**
- * @mui/base v5.0.0-alpha.127
+ * @mui/base v5.0.0-alpha.128
  *
@@ -4,0 +4,0 @@ * @license MIT

modern/Input/Input.js

 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["aria-describedby", "aria-label", "aria-labelledby", "autoComplete", "autoFocus", "className", "component", "defaultValue", "disabled", "endAdornment", "error", "id", "multiline", "name", "onClick", "onChange", "onKeyDown", "onKeyUp", "onFocus", "onBlur", "placeholder", "readOnly", "required", "startAdornment", "value", "type", "rows", "slotProps", "slots", "minRows", "maxRows"];
+const _excluded = ["aria-describedby", "aria-label", "aria-labelledby", "autoComplete", "autoFocus", "className", "defaultValue", "disabled", "endAdornment", "error", "id", "multiline", "name", "onClick", "onChange", "onKeyDown", "onKeyUp", "onFocus", "onBlur", "placeholder", "readOnly", "required", "startAdornment", "value", "type", "rows", "slotProps", "slots", "minRows", "maxRows"];
 import * as React from 'react';
@@ -49,3 +49,2 @@ import PropTypes from 'prop-types';
       className,
-      component,
       defaultValue,
@@ -119,3 +118,3 @@ disabled,
   };
-  const Root = component ?? slots.root ?? 'div';
+  const Root = slots.root ?? 'div';
   const rootProps = useSlotProps({
@@ -187,6 +186,2 @@ elementType: Root,
   /**
-   * @ignore
-   */
-  children: PropTypes.node,
-  /**
    * Class name applied to the root element.
@@ -196,11 +191,2 @@ */
   /**
-   * @ignore
-   */
-  color: PropTypes.string,
-  /**
-   * The component used for the root node.
-   * Either a string to use a HTML element or a component.
-   */
-  component: PropTypes.elementType,
-  /**
    * The default value. Use when the component is not controlled.
@@ -207,0 +193,0 @@ */

modern/Menu/Menu.js

 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["actions", "anchorEl", "children", "component", "defaultOpen", "listboxId", "onOpenChange", "open", "slotProps", "slots"];
+const _excluded = ["actions", "anchorEl", "children", "defaultOpen", "listboxId", "onOpenChange", "open", "slotProps", "slots"];
 import * as React from 'react';
@@ -40,3 +40,2 @@ import PropTypes from 'prop-types';
       children,
-      component,
       defaultOpen,
@@ -68,3 +67,3 @@ listboxId,
   const classes = useUtilityClasses(ownerState);
-  const Root = component ?? slots.root ?? Popper;
+  const Root = slots.root ?? Popper;
   const rootProps = useSlotProps({
@@ -122,7 +121,2 @@ elementType: Root,
   /**
-   * The component used for the root node.
-   * Either a string to use a HTML element or a component.
-   */
-  component: PropTypes.elementType,
-  /**
    * @ignore
@@ -148,3 +142,3 @@ */
    */
-  slotProps: PropTypes.shape({
+  slotProps: PropTypes /* @typescript-to-proptypes-ignore */.shape({
     listbox: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
@@ -151,0 +145,0 @@ root: PropTypes.oneOfType([PropTypes.func, PropTypes.object])

modern/MenuItem/MenuItem.js

 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["children", "disabled", "component", "label", "slotProps", "slots"];
+const _excluded = ["children", "disabled", "label", "slotProps", "slots"];
 import * as React from 'react';
@@ -33,7 +33,6 @@ import PropTypes from 'prop-types';
  */
-const MenuItem = /*#__PURE__*/React.forwardRef(function MenuItem(props, ref) {
+const MenuItem = /*#__PURE__*/React.forwardRef(function MenuItem(props, forwardedRef) {
   const {
       children,
       disabled: disabledProp = false,
-      component,
       label,
@@ -51,3 +50,3 @@ slotProps = {},
     disabled: disabledProp,
-    ref,
+    rootRef: forwardedRef,
     label
@@ -61,3 +60,3 @@ });
   const classes = useUtilityClasses(ownerState);
-  const Root = component ?? slots.root ?? 'li';
+  const Root = slots.root ?? 'li';
   const rootProps = useSlotProps({
@@ -85,7 +84,2 @@ elementType: Root,
   /**
-   * The component used for the root node.
-   * Either a string to use a HTML element or a component.
-   */
-  component: PropTypes.elementType,
-  /**
    * @ignore
@@ -92,0 +86,0 @@ */

modern/Modal/Modal.js

 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["children", "closeAfterTransition", "component", "container", "disableAutoFocus", "disableEnforceFocus", "disableEscapeKeyDown", "disablePortal", "disableRestoreFocus", "disableScrollLock", "hideBackdrop", "keepMounted", "manager", "onBackdropClick", "onClose", "onKeyDown", "open", "onTransitionEnter", "onTransitionExited", "slotProps", "slots"];
+const _excluded = ["children", "closeAfterTransition", "container", "disableAutoFocus", "disableEnforceFocus", "disableEscapeKeyDown", "disablePortal", "disableRestoreFocus", "disableScrollLock", "hideBackdrop", "keepMounted", "manager", "onBackdropClick", "onClose", "onKeyDown", "open", "onTransitionEnter", "onTransitionExited", "slotProps", "slots"];
 import * as React from 'react';
@@ -63,3 +63,2 @@ import PropTypes from 'prop-types';
       closeAfterTransition = false,
-      component,
       container,
@@ -75,3 +74,3 @@ disableAutoFocus = false,
       // private
-      manager = defaultManager,
+      manager: managerProp = defaultManager,
       onBackdropClick,
@@ -87,2 +86,5 @@ onClose,
     other = _objectWithoutPropertiesLoose(props, _excluded);
+  // TODO: `modal`` must change its type in this file to match the type of methods
+  // provided by `ModalManager`
+  const manager = managerProp;
   const [exited, setExited] = React.useState(!open);
@@ -218,3 +220,3 @@ const modal = React.useRef({});
   }
-  const Root = component ?? slots.root ?? 'div';
+  const Root = slots.root ?? 'div';
   const rootProps = useSlotProps({
@@ -280,7 +282,2 @@ elementType: Root,
   /**
-   * The component used for the root node.
-   * Either a string to use a HTML element or a component.
-   */
-  component: PropTypes.elementType,
-  /**
    * An HTML element or function that returns one.
@@ -358,6 +355,2 @@ * The `container` will have the portal children appended to it.
   /**
-   * @ignore
-   */
-  onKeyDown: PropTypes.func,
-  /**
    * If `true`, the component is shown.
@@ -364,0 +357,0 @@ */

modern/Option/Option.js

 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["children", "component", "disabled", "label", "slotProps", "slots", "value"];
+const _excluded = ["children", "disabled", "label", "slotProps", "slots", "value"];
 import * as React from 'react';
@@ -28,6 +28,5 @@ import PropTypes from 'prop-types';
  */
-const Option = /*#__PURE__*/React.forwardRef(function Option(props, ref) {
+const Option = /*#__PURE__*/React.forwardRef(function Option(props, forwardedRef) {
   const {
       children,
-      component,
       disabled = false,
@@ -40,5 +39,5 @@ label,
     other = _objectWithoutPropertiesLoose(props, _excluded);
-  const Root = component || slots.root || 'li';
+  const Root = slots.root ?? 'li';
   const optionRef = React.useRef(null);
-  const combinedRef = useForkRef(optionRef, ref);
+  const combinedRef = useForkRef(optionRef, forwardedRef);
 
@@ -56,3 +55,3 @@ // If `label` is not explicitly provided, the `children` are used for convenience.
     label: computedLabel,
-    optionRef: combinedRef,
+    rootRef: combinedRef,
     value
@@ -89,7 +88,2 @@ });
   /**
-   * The component used for the root node.
-   * Either a string to use a HTML element or a component.
-   */
-  component: PropTypes.elementType,
-  /**
    * If `true`, the option will be disabled.
@@ -96,0 +90,0 @@ * @default false

modern/OptionGroup/OptionGroup.js

 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["component", "disabled", "slotProps", "slots"];
+const _excluded = ["disabled", "slotProps", "slots"];
 import * as React from 'react';
@@ -32,5 +32,4 @@ import PropTypes from 'prop-types';
  */
-const OptionGroup = /*#__PURE__*/React.forwardRef(function OptionGroup(props, ref) {
+const OptionGroup = /*#__PURE__*/React.forwardRef(function OptionGroup(props, forwardedRef) {
   const {
-      component,
       disabled = false,
@@ -41,3 +40,3 @@ slotProps = {},
     other = _objectWithoutPropertiesLoose(props, _excluded);
-  const Root = component || slots?.root || 'li';
+  const Root = slots?.root || 'li';
   const Label = slots?.label || 'span';
@@ -51,3 +50,3 @@ const List = slots?.list || 'ul';
     additionalProps: {
-      ref
+      ref: forwardedRef
     },
@@ -87,7 +86,2 @@ ownerState: props,
   /**
-   * The component used for the root node.
-   * Either a string to use a HTML element or a component.
-   */
-  component: PropTypes.elementType,
-  /**
    * If `true` all the options in the group will be disabled.
@@ -94,0 +88,0 @@ * @default false

modern/Popper/Popper.js

 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["anchorEl", "children", "component", "direction", "disablePortal", "modifiers", "open", "placement", "popperOptions", "popperRef", "slotProps", "slots", "TransitionProps", "ownerState"],
+const _excluded = ["anchorEl", "children", "direction", "disablePortal", "modifiers", "open", "placement", "popperOptions", "popperRef", "slotProps", "slots", "TransitionProps", "ownerState"],
   _excluded2 = ["anchorEl", "children", "container", "direction", "disablePortal", "keepMounted", "modifiers", "open", "placement", "popperOptions", "popperRef", "style", "transition", "slotProps", "slots"];
@@ -48,7 +48,6 @@ import * as React from 'react';
 const defaultPopperOptions = {};
-const PopperTooltip = /*#__PURE__*/React.forwardRef(function PopperTooltip(props, ref) {
+const PopperTooltip = /*#__PURE__*/React.forwardRef(function PopperTooltip(props, forwardedRef) {
   const {
       anchorEl,
       children,
-      component,
       direction,
@@ -64,6 +63,8 @@ disablePortal,
       TransitionProps
+      // @ts-ignore internal logic
+      // prevent from spreading to DOM, it can come from the parent component e.g. Select.
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
   const tooltipRef = React.useRef(null);
-  const ownRef = useForkRef(tooltipRef, ref);
+  const ownRef = useForkRef(tooltipRef, forwardedRef);
   const popperRef = React.useRef(null);
@@ -152,3 +153,3 @@ const handlePopperRef = useForkRef(popperRef, popperRefProp);
   const classes = useUtilityClasses();
-  const Root = component ?? slots.root ?? 'div';
+  const Root = slots.root ?? 'div';
   const rootProps = useSlotProps({
@@ -181,3 +182,3 @@ elementType: Root,
  */
-const Popper = /*#__PURE__*/React.forwardRef(function Popper(props, ref) {
+const Popper = /*#__PURE__*/React.forwardRef(function Popper(props, forwardedRef) {
   const {
@@ -236,3 +237,3 @@ anchorEl,
       modifiers: modifiers,
-      ref: ref,
+      ref: forwardedRef,
       open: transition ? !exited : open,
@@ -371,6 +372,2 @@ placement: placement,
   /**
-   * @ignore
-   */
-  style: PropTypes.object,
-  /**
    * Help supporting a react-transition-group/Transition component.
@@ -377,0 +374,0 @@ * @default false

modern/Portal/Portal.js

@@ -22,3 +22,3 @@ import * as React from 'react';
  */
-const Portal = /*#__PURE__*/React.forwardRef(function Portal(props, ref) {
+const Portal = /*#__PURE__*/React.forwardRef(function Portal(props, forwardedRef) {
   const {
@@ -31,3 +31,3 @@ children,
   // @ts-expect-error TODO upstream fix
-  const handleRef = useForkRef( /*#__PURE__*/React.isValidElement(children) ? children.ref : null, ref);
+  const handleRef = useForkRef( /*#__PURE__*/React.isValidElement(children) ? children.ref : null, forwardedRef);
   useEnhancedEffect(() => {
@@ -40,9 +40,9 @@ if (!disablePortal) {
     if (mountNode && !disablePortal) {
-      setRef(ref, mountNode);
+      setRef(forwardedRef, mountNode);
       return () => {
-        setRef(ref, null);
+        setRef(forwardedRef, null);
       };
     }
     return undefined;
-  }, [ref, mountNode, disablePortal]);
+  }, [forwardedRef, mountNode, disablePortal]);
   if (disablePortal) {
@@ -49,0 +49,0 @@ if ( /*#__PURE__*/React.isValidElement(children)) {

modern/Select/Select.js

 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["autoFocus", "children", "component", "defaultValue", "defaultListboxOpen", "disabled", "getSerializedValue", "listboxId", "listboxOpen", "multiple", "name", "onChange", "onListboxOpenChange", "optionStringifier", "renderValue", "slotProps", "slots", "value"];
+const _excluded = ["autoFocus", "children", "defaultValue", "defaultListboxOpen", "disabled", "getSerializedValue", "listboxId", "listboxOpen", "multiple", "name", "onChange", "onListboxOpenChange", "optionStringifier", "renderValue", "slotProps", "slots", "value"];
 import * as React from 'react';
@@ -73,3 +73,2 @@ import PropTypes from 'prop-types';
       children,
-      component,
       defaultValue,
@@ -96,3 +95,3 @@ defaultListboxOpen = false,
   const listboxRef = React.useRef(null);
-  const Button = component ?? slots.root ?? 'button';
+  const Button = slots.root ?? 'button';
   const ListboxRoot = slots.listbox ?? 'ul';
@@ -212,7 +211,2 @@ const PopperComponent = slots.popper ?? Popper;
   /**
-   * The component used for the root node.
-   * Either a string to use a HTML element or a component.
-   */
-  component: PropTypes.elementType,
-  /**
    * If `true`, the select will be initially open.
@@ -283,3 +277,3 @@ * @default false
    */
-  slotProps: PropTypes.shape({
+  slotProps: PropTypes /* @typescript-to-proptypes-ignore */.shape({
     listbox: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
@@ -286,0 +280,0 @@ popper: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),

modern/Slider/Slider.js

 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["aria-label", "aria-valuetext", "aria-labelledby", "className", "component", "disableSwap", "disabled", "getAriaLabel", "getAriaValueText", "marks", "max", "min", "name", "onChange", "onChangeCommitted", "orientation", "scale", "step", "tabIndex", "track", "value", "valueLabelFormat", "isRtl", "defaultValue", "slotProps", "slots"];
+const _excluded = ["aria-label", "aria-valuetext", "aria-labelledby", "className", "disableSwap", "disabled", "getAriaLabel", "getAriaValueText", "marks", "max", "min", "name", "onChange", "onChangeCommitted", "orientation", "scale", "step", "tabIndex", "track", "value", "valueLabelFormat", "isRtl", "defaultValue", "slotProps", "slots"];
 import * as React from 'react';
@@ -56,3 +56,3 @@ import PropTypes from 'prop-types';
  */
-const Slider = /*#__PURE__*/React.forwardRef(function Slider(props, ref) {
+const Slider = /*#__PURE__*/React.forwardRef(function Slider(props, forwardedRef) {
   const {
@@ -63,3 +63,2 @@ 'aria-label': ariaLabel,
       className,
-      component,
       disableSwap = false,
@@ -114,3 +113,3 @@ disabled = false,
   } = useSlider(_extends({}, partialOwnerState, {
-    ref
+    rootRef: forwardedRef
   }));
@@ -123,3 +122,3 @@ const ownerState = _extends({}, partialOwnerState, {
   const classes = useUtilityClasses(ownerState);
-  const Root = component ?? slots.root ?? 'span';
+  const Root = slots.root ?? 'span';
   const rootProps = useSlotProps({
@@ -270,15 +269,2 @@ elementType: Root,
   /**
-   * @ignore
-   */
-  children: PropTypes.node,
-  /**
-   * @ignore
-   */
-  className: PropTypes.string,
-  /**
-   * The component used for the root node.
-   * Either a string to use a HTML element or a component.
-   */
-  component: PropTypes.elementType,
-  /**
    * The default value. Use when the component is not controlled.
@@ -285,0 +271,0 @@ */

modern/Snackbar/Snackbar.js

 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["autoHideDuration", "children", "component", "disableWindowBlurListener", "exited", "onBlur", "onClose", "onFocus", "onMouseEnter", "onMouseLeave", "open", "resumeHideDuration", "slotProps", "slots"];
+const _excluded = ["autoHideDuration", "children", "disableWindowBlurListener", "exited", "onBlur", "onClose", "onFocus", "onMouseEnter", "onMouseLeave", "open", "resumeHideDuration", "slotProps", "slots"];
 import * as React from 'react';
@@ -30,7 +30,6 @@ import PropTypes from 'prop-types';
  */
-const Snackbar = /*#__PURE__*/React.forwardRef(function Snackbar(props, ref) {
+const Snackbar = /*#__PURE__*/React.forwardRef(function Snackbar(props, forwardedRef) {
   const {
       autoHideDuration = null,
       children,
-      component,
       disableWindowBlurListener = false,
@@ -54,7 +53,6 @@ exited = true,
     open,
-    resumeHideDuration,
-    ref
+    resumeHideDuration
   }));
   const ownerState = props;
-  const Root = component || slots.root || 'div';
+  const Root = slots.root || 'div';
   const rootProps = useSlotProps({
@@ -66,3 +64,3 @@ elementType: Root,
     additionalProps: {
-      ref
+      ref: forwardedRef
     },
@@ -112,7 +110,2 @@ ownerState,
   /**
-   * The component used for the root node.
-   * Either a string to use a HTML element or a component.
-   */
-  component: PropTypes.elementType,
-  /**
    * If `true`, the `autoHideDuration` timer will expire even if the window is not focused.
@@ -128,6 +121,2 @@ * @default false
   /**
-   * @ignore
-   */
-  onBlur: PropTypes.func,
-  /**
    * Callback fired when the component requests to be closed.
@@ -144,14 +133,2 @@ * Typically `onClose` is used to set state in the parent component,
   /**
-   * @ignore
-   */
-  onFocus: PropTypes.func,
-  /**
-   * @ignore
-   */
-  onMouseEnter: PropTypes.func,
-  /**
-   * @ignore
-   */
-  onMouseLeave: PropTypes.func,
-  /**
    * If `true`, the component is shown.
@@ -158,0 +135,0 @@ */

modern/Switch/Switch.js

 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["checked", "component", "defaultChecked", "disabled", "onBlur", "onChange", "onFocus", "onFocusVisible", "readOnly", "required", "slotProps", "slots"];
+const _excluded = ["checked", "defaultChecked", "disabled", "onBlur", "onChange", "onFocus", "onFocusVisible", "readOnly", "required", "slotProps", "slots"];
 import * as React from 'react';
@@ -40,6 +40,5 @@ import PropTypes from 'prop-types';
  */
-const Switch = /*#__PURE__*/React.forwardRef(function Switch(props, ref) {
+const Switch = /*#__PURE__*/React.forwardRef(function Switch(props, forwardedRef) {
   const {
       checked: checkedProp,
-      component,
       defaultChecked,
@@ -80,3 +79,3 @@ disabled: disabledProp,
   const classes = useUtilityClasses(ownerState);
-  const Root = component ?? slots.root ?? 'span';
+  const Root = slots.root ?? 'span';
   const rootProps = useSlotProps({
@@ -87,3 +86,3 @@ elementType: Root,
     additionalProps: {
-      ref
+      ref: forwardedRef
     },
@@ -129,11 +128,2 @@ ownerState,
   /**
-   * @ignore
-   */
-  children: PropTypes.node,
-  /**
-   * The component used for the root node.
-   * Either a string to use a HTML element or a component.
-   */
-  component: PropTypes.elementType,
-  /**
    * The default checked state. Use when the component is not controlled.
@@ -149,6 +139,2 @@ */
    */
-  id: PropTypes.string,
-  /**
-   * @ignore
-   */
   onBlur: PropTypes.func,
@@ -155,0 +141,0 @@ /**

modern/Tab/Tab.js

 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["action", "children", "value", "disabled", "onChange", "onClick", "onFocus", "component", "slotProps", "slots"];
+const _excluded = ["action", "children", "value", "disabled", "onChange", "onClick", "onFocus", "slotProps", "slots"];
 import * as React from 'react';
@@ -33,7 +33,6 @@ import PropTypes from 'prop-types';
  */
-const Tab = /*#__PURE__*/React.forwardRef(function Tab(props, ref) {
+const Tab = /*#__PURE__*/React.forwardRef(function Tab(props, forwardedRef) {
   const {
       children,
       disabled = false,
-      component,
       slotProps = {},
@@ -44,3 +43,3 @@ slots = {}
   const tabRef = React.useRef();
-  const handleRef = useForkRef(tabRef, ref);
+  const handleRef = useForkRef(tabRef, forwardedRef);
   const {
@@ -52,3 +51,3 @@ active,
   } = useTab(_extends({}, props, {
-    ref: handleRef
+    rootRef: handleRef
   }));
@@ -62,3 +61,3 @@ const ownerState = _extends({}, props, {
   const classes = useUtilityClasses(ownerState);
-  const TabRoot = component ?? slots.root ?? 'button';
+  const TabRoot = slots.root ?? 'button';
   const tabRootProps = useSlotProps({
@@ -70,3 +69,3 @@ elementType: TabRoot,
     additionalProps: {
-      ref
+      ref: forwardedRef
     },
@@ -98,7 +97,2 @@ ownerState,
   /**
-   * The component used for the root node.
-   * Either a string to use a HTML element or a component.
-   */
-  component: PropTypes.elementType,
-  /**
    * If `true`, the component is disabled.
@@ -113,10 +107,2 @@ * @default false
   /**
-   * @ignore
-   */
-  onClick: PropTypes.func,
-  /**
-   * @ignore
-   */
-  onFocus: PropTypes.func,
-  /**
    * The props used for each slot inside the Tab.
@@ -123,0 +109,0 @@ * @default {}

modern/TablePagination/TablePagination.js

 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["component", "colSpan", "count", "getItemAriaLabel", "labelDisplayedRows", "labelId", "labelRowsPerPage", "onPageChange", "onRowsPerPageChange", "page", "rowsPerPage", "rowsPerPageOptions", "selectId", "slotProps", "slots"];
+const _excluded = ["colSpan", "count", "getItemAriaLabel", "labelDisplayedRows", "labelId", "labelRowsPerPage", "onPageChange", "onRowsPerPageChange", "page", "rowsPerPage", "rowsPerPageOptions", "selectId", "slotProps", "slots"];
 import * as React from 'react';
@@ -53,5 +53,4 @@ import PropTypes from 'prop-types';
  */
-const TablePagination = /*#__PURE__*/React.forwardRef(function TablePagination(props, ref) {
+const TablePagination = /*#__PURE__*/React.forwardRef(function TablePagination(props, forwardedRef) {
   const {
-      component,
       colSpan: colSpanProp,
@@ -76,3 +75,4 @@ count,
   let colSpan;
-  if (!component || component === 'td' || !isHostComponent(component)) {
+  const Root = slots.root ?? 'td';
+  if (Root === 'td' || !isHostComponent(Root)) {
     colSpan = colSpanProp || 1000; // col-span over everything
@@ -89,3 +89,2 @@ }
   const labelId = useId(labelIdProp);
-  const Root = component ?? slots.root ?? 'td';
   const rootProps = useSlotProps({
@@ -97,3 +96,3 @@ elementType: Root,
       colSpan,
-      ref
+      ref: forwardedRef
     },
@@ -200,13 +199,4 @@ ownerState,
    */
-  children: PropTypes.node,
-  /**
-   * @ignore
-   */
   colSpan: PropTypes.number,
   /**
-   * The component used for the root node.
-   * Either a string to use a HTML element or a component.
-   */
-  component: PropTypes.elementType,
-  /**
    * The total number of rows.
@@ -305,3 +295,3 @@ *
    */
-  slotProps: PropTypes.shape({
+  slotProps: PropTypes /* @typescript-to-proptypes-ignore */.shape({
     actions: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
@@ -308,0 +298,0 @@ displayedRows: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),

modern/TablePagination/TablePaginationActions.js

 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["component", "count", "getItemAriaLabel", "onPageChange", "page", "rowsPerPage", "showFirstButton", "showLastButton", "direction", "ownerState", "slotProps", "slots"];
+const _excluded = ["count", "getItemAriaLabel", "onPageChange", "page", "rowsPerPage", "showFirstButton", "showLastButton", "direction", "ownerState", "slotProps", "slots"];
 var _span, _span2, _span3, _span4;
@@ -36,5 +36,4 @@ import * as React from 'react';
  */
-const TablePaginationActions = /*#__PURE__*/React.forwardRef(function TablePaginationActions(props, ref) {
+const TablePaginationActions = /*#__PURE__*/React.forwardRef(function TablePaginationActions(props, forwardedRef) {
   const {
-      component,
       count,
@@ -47,3 +46,6 @@ getItemAriaLabel = defaultGetAriaLabel,
       showLastButton = false,
-      direction,
+      direction
+      // @ts-ignore
+      ,
+
       slotProps = {},
@@ -66,3 +68,3 @@ slots = {}
   };
-  const Root = slots.root ?? component ?? 'div';
+  const Root = slots.root ?? 'div';
   const rootProps = useSlotProps({
@@ -73,3 +75,3 @@ elementType: Root,
     additionalProps: {
-      ref
+      ref: forwardedRef
     },
@@ -76,0 +78,0 @@ ownerState

modern/TabPanel/TabPanel.js

 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["children", "component", "value", "slotProps", "slots"];
+const _excluded = ["children", "value", "slotProps", "slots"];
 import * as React from 'react';
@@ -31,6 +31,5 @@ import PropTypes from 'prop-types';
  */
-const TabPanel = /*#__PURE__*/React.forwardRef(function TabPanel(props, ref) {
+const TabPanel = /*#__PURE__*/React.forwardRef(function TabPanel(props, forwardedRef) {
   const {
       children,
-      component,
       slotProps = {},
@@ -48,3 +47,3 @@ slots = {}
   const classes = useUtilityClasses(ownerState);
-  const TabPanelRoot = component ?? slots.root ?? 'div';
+  const TabPanelRoot = slots.root ?? 'div';
   const tabPanelRootProps = useSlotProps({
@@ -57,3 +56,3 @@ elementType: TabPanelRoot,
       role: 'tabpanel',
-      ref
+      ref: forwardedRef
     },
@@ -77,7 +76,2 @@ ownerState,
   /**
-   * The component used for the root node.
-   * Either a string to use a HTML element or a component.
-   */
-  component: PropTypes.elementType,
-  /**
    * The props used for each slot inside the TabPanel.
@@ -84,0 +78,0 @@ * @default {}

modern/Tabs/Tabs.js

 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["children", "value", "defaultValue", "orientation", "direction", "component", "onChange", "selectionFollowsFocus", "slotProps", "slots"];
+const _excluded = ["children", "value", "defaultValue", "orientation", "direction", "onChange", "selectionFollowsFocus", "slotProps", "slots"];
 import * as React from 'react';
@@ -33,3 +33,3 @@ import PropTypes from 'prop-types';
  */
-const Tabs = /*#__PURE__*/React.forwardRef(function Tabs(props, ref) {
+const Tabs = /*#__PURE__*/React.forwardRef(function Tabs(props, forwardedRef) {
   const {
@@ -39,3 +39,2 @@ children,
       direction = 'ltr',
-      component,
       slotProps = {},
@@ -53,3 +52,3 @@ slots = {}
   const classes = useUtilityClasses(ownerState);
-  const TabsRoot = component ?? slots.root ?? 'div';
+  const TabsRoot = slots.root ?? 'div';
   const tabsRootProps = useSlotProps({
@@ -60,3 +59,3 @@ elementType: TabsRoot,
     additionalProps: {
-      ref
+      ref: forwardedRef
     },
@@ -83,7 +82,2 @@ ownerState,
   /**
-   * The component used for the root node.
-   * Either a string to use a HTML element or a component.
-   */
-  component: PropTypes.elementType,
-  /**
    * The default value. Use when the component is not controlled.
@@ -90,0 +84,0 @@ */

modern/TabsList/TabsList.js

 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["children", "component", "slotProps", "slots"];
+const _excluded = ["children", "slotProps", "slots"];
 import * as React from 'react';
@@ -33,6 +33,5 @@ import PropTypes from 'prop-types';
  */
-const TabsList = /*#__PURE__*/React.forwardRef(function TabsList(props, ref) {
+const TabsList = /*#__PURE__*/React.forwardRef(function TabsList(props, forwardedRef) {
   const {
       children,
-      component,
       slotProps = {},
@@ -48,3 +47,3 @@ slots = {}
   } = useTabsList({
-    ref
+    rootRef: forwardedRef
   });
@@ -56,3 +55,3 @@ const ownerState = _extends({}, props, {
   const classes = useUtilityClasses(ownerState);
-  const TabsListRoot = component ?? slots.root ?? 'div';
+  const TabsListRoot = slots.root ?? 'div';
   const tabsListRootProps = useSlotProps({
@@ -83,7 +82,2 @@ elementType: TabsListRoot,
   /**
-   * The component used for the root node.
-   * Either a string to use a HTML element or a component.
-   */
-  component: PropTypes.elementType,
-  /**
    * The props used for each slot inside the TabsList.
@@ -90,0 +84,0 @@ * @default {}

modern/TextareaAutosize/TextareaAutosize.js

@@ -43,3 +43,3 @@ import _extends from "@babel/runtime/helpers/esm/extends";
  */
-const TextareaAutosize = /*#__PURE__*/React.forwardRef(function TextareaAutosize(props, ref) {
+const TextareaAutosize = /*#__PURE__*/React.forwardRef(function TextareaAutosize(props, forwardedRef) {
   const {
@@ -57,3 +57,3 @@ onChange,
   const inputRef = React.useRef(null);
-  const handleRef = useForkRef(ref, inputRef);
+  const handleRef = useForkRef(forwardedRef, inputRef);
   const shadowRef = React.useRef(null);
@@ -60,0 +60,0 @@ const renders = React.useRef(0);

modern/useButton/useButton.js

@@ -20,3 +20,3 @@ import _extends from "@babel/runtime/helpers/esm/extends";
     href,
-    ref: externalRef,
+    rootRef: externalRef,
     tabIndex,
@@ -165,6 +165,5 @@ to,
     setFocusVisible,
-    disabled,
     active,
-    ref: handleRef
+    rootRef: handleRef
   };
 }

modern/useInput/useInput.js

@@ -154,2 +154,3 @@ import _extends from "@babel/runtime/helpers/esm/extends";
     getRootProps,
+    inputRef: handleInputRef,
     required,
@@ -156,0 +157,0 @@ value

modern/useList/listActions.types.js

@@ -9,2 +9,6 @@ export const ListActionTypes = {
   textNavigation: 'list:textNavigation'
-};
+};
+
+/**
+ * A union of all standard actions that can be dispatched to the list reducer.
+ */

modern/useList/useList.js

@@ -50,3 +50,3 @@ import _extends from "@babel/runtime/helpers/esm/extends";
     isItemDisabled = defaultIsItemDisabled,
-    listRef: externalListRef,
+    rootRef: externalListRef,
     onStateChange = NOOP,
@@ -252,2 +252,3 @@ items,
     getRootProps,
+    rootRef: handleRef,
     state
@@ -254,0 +255,0 @@ };

modern/useList/useListItem.js

@@ -20,3 +20,3 @@ import _extends from "@babel/runtime/helpers/esm/extends";
     item,
-    ref: externalRef
+    rootRef: externalRef
   } = parameters;
@@ -99,5 +99,5 @@ const itemRef = React.useRef(null);
     highlighted,
-    ref: handleRef,
+    rootRef: handleRef,
     selected
   };
 }

modern/useMenu/useMenu.js

@@ -56,3 +56,4 @@ import _extends from "@babel/runtime/helpers/esm/extends";
       highlightedValue
-    }
+    },
+    rootRef: mergedListRef
   } = useList({
@@ -71,3 +72,3 @@ controlledProps,
     itemStringifier: id => subitems.get(id)?.label || subitems.get(id)?.ref.current?.innerText,
-    listRef: handleRef,
+    rootRef: handleRef,
     onStateChange: stateChangeHandler,
@@ -106,2 +107,3 @@ reducerActionContext: {
     highlightedValue,
+    listboxRef: mergedListRef,
     menuItems: subitems,
@@ -108,0 +110,0 @@ open

modern/useMenuItem/useMenuItem.js

@@ -22,3 +22,3 @@ import _extends from "@babel/runtime/helpers/esm/extends";
     id: idParam,
-    ref: externalRef,
+    rootRef: externalRef,
     label
@@ -37,3 +37,3 @@ } = params;
     highlighted,
-    ref: listItemRefHandler
+    rootRef: listItemRefHandler
   } = useListItem({
@@ -49,3 +49,3 @@ item: id
     focusVisible,
-    ref: buttonRefHandler
+    rootRef: buttonRefHandler
   } = useButton({
@@ -75,3 +75,3 @@ disabled,
       totalItemCount: 0,
-      ref: handleRef
+      rootRef: handleRef
     };
@@ -94,4 +94,4 @@ }
     totalItemCount,
-    ref: handleRef
+    rootRef: handleRef
   };
 }

modern/useOption/useOption.js

@@ -22,3 +22,3 @@ import _extends from "@babel/runtime/helpers/esm/extends";
     disabled,
-    optionRef: optionRefParam,
+    rootRef: optionRefParam,
     id: idParam
@@ -28,3 +28,3 @@ } = params;
     getRootProps: getListItemProps,
-    ref: listItemRefHandler,
+    rootRef: listItemRefHandler,
     highlighted,
@@ -58,4 +58,4 @@ selected
     selected,
-    ref: handleRef
+    rootRef: handleRef
   };
 }

modern/useSelect/useSelect.js

@@ -90,6 +90,7 @@ import _extends from "@babel/runtime/helpers/esm/extends";
     active: buttonActive,
-    focusVisible: buttonFocusVisible
+    focusVisible: buttonFocusVisible,
+    rootRef: mergedButtonRef
   } = useButton({
     disabled,
-    ref: handleButtonRef
+    rootRef: handleButtonRef
   });
@@ -140,3 +141,3 @@ const optionValues = React.useMemo(() => Array.from(options.keys()), [options]);
     isItemDisabled,
-    listRef: handleListboxRef,
+    rootRef: handleListboxRef,
     onChange: handleSelectionChange,
@@ -161,3 +162,4 @@ onHighlightChange: handleHighlightChange,
       selectedValues: selectedOptions
-    }
+    },
+    rootRef: mergedListboxRef
   } = useList(useListParameters);
@@ -268,2 +270,4 @@ React.useEffect(() => {
     buttonFocusVisible,
+    buttonRef: mergedButtonRef,
+    contextValue,
     disabled,
@@ -274,3 +278,3 @@ dispatch,
     getOptionMetadata,
-    contextValue,
+    listboxRef: mergedListboxRef,
     open,
@@ -277,0 +281,0 @@ options: optionValues,

modern/useSlider/useSlider.js

@@ -177,3 +177,3 @@ import _extends from "@babel/runtime/helpers/esm/extends";
     orientation = 'horizontal',
-    ref,
+    rootRef: ref,
     scale = Identity,
@@ -603,2 +603,3 @@ step = 1,
     range,
+    rootRef: handleRef,
     trackLeap,
@@ -605,0 +606,0 @@ trackOffset,

modern/useSnackbar/useSnackbar.js

@@ -23,3 +23,2 @@ import _extends from "@babel/runtime/helpers/esm/extends";
     open,
-    ref,
     resumeHideDuration
@@ -123,3 +122,2 @@ } = parameters;
     return _extends({
-      ref,
       // ClickAwayListener adds an `onClick` prop which results in the alert not being announced.
@@ -126,0 +124,0 @@ // See https://github.com/mui/material-ui/issues/29080

modern/useSwitch/useSwitch.js

@@ -77,3 +77,3 @@ import _extends from "@babel/runtime/helpers/esm/extends";
   };
-  const handleRefChange = useForkRef(focusVisibleRef, inputRef);
+  const handleInputRef = useForkRef(focusVisibleRef, inputRef);
   const getInputProps = (otherProps = {}) => _extends({
@@ -84,3 +84,3 @@ checked: checkedProp,
     readOnly,
-    ref: handleRefChange,
+    ref: handleInputRef,
     required,
@@ -98,4 +98,5 @@ type: 'checkbox'
     getInputProps,
+    inputRef: handleInputRef,
     readOnly: Boolean(readOnly)
   };
 }

modern/useTab/useTab.js

@@ -25,3 +25,3 @@ import _extends from "@babel/runtime/helpers/esm/extends";
     value: valueParam,
-    ref: externalRef,
+    rootRef: externalRef,
     disabled = false,
@@ -49,3 +49,3 @@ id: idParam
     getRootProps: getTabProps,
-    ref: listItemRefHandler,
+    rootRef: listItemRefHandler,
     highlighted,
@@ -58,3 +58,3 @@ selected
     getRootProps: getButtonProps,
-    ref: buttonRefHandler,
+    rootRef: buttonRefHandler,
     active,
@@ -87,2 +87,3 @@ focusVisible,
     index,
+    rootRef: handleRef,
     // the `selected` state isn't set on the server (it relies on effects to be calculated),
@@ -89,0 +90,0 @@ // so we fall back to checking the `value` prop with the selectedValue from the TabsContext

modern/useTabsList/useTabsList.js

@@ -21,3 +21,3 @@ import _extends from "@babel/runtime/helpers/esm/extends";
   const {
-    ref: externalRef
+    rootRef: externalRef
   } = parameters;
@@ -75,3 +75,4 @@ const {
       selectedValues
-    }
+    },
+    rootRef: mergedRootRef
   } = useList({
@@ -84,3 +85,3 @@ controlledProps,
     items: subitemKeys,
-    listRef: externalRef,
+    rootRef: externalRef,
     onChange: handleChange,
@@ -114,11 +115,12 @@ orientation: listOrientation,
   return {
+    contextValue: _extends({}, compoundComponentContextValue, listContextValue),
     dispatch,
+    getRootProps,
+    highlightedValue,
     isRtl,
     orientation,
-    selectedValue: selectedValues[0] ?? null,
-    highlightedValue,
-    getRootProps,
-    contextValue: _extends({}, compoundComponentContextValue, listContextValue)
+    rootRef: mergedRootRef,
+    selectedValue: selectedValues[0] ?? null
   };
 }
 export default useTabsList;

modern/utils/index.js

@@ -9,2 +9,3 @@ export { default as appendOwnerState } from './appendOwnerState';
 export { default as mergeSlotProps } from './mergeSlotProps';
+export * from './PolymorphicComponent';
 export * from './types';

modern/utils/useCompoundItem.js

 import * as React from 'react';
 import { unstable_useEnhancedEffect as useEnhancedEffect } from '@mui/utils';
 import { CompoundComponentContext } from './useCompound';
+
+/**
+ * Registers a child component with the parent component.
+ *
+ * @param id A unique key for the child component. If the `id` is `undefined`, the registration logic will not run (this can sometimes be the case during SSR).
+ * @param itemMetadata Arbitrary metadata to pass to the parent component. This should be a stable reference (e.g. a memoized object), to avoid unnecessary re-registrations.
+ * @param missingKeyGenerator A function that generates a unique id for the item.
+ *   It is called with the set of the ids of all the items that have already been registered.
+ *   Return `existingKeys.size` if you want to use the index of the new item as the id.
+ *
+ * @ignore - internal hook.
+ */
+
 export function useCompoundItem(id, itemMetadata, missingKeyGenerator) {
@@ -5,0 +18,0 @@ const context = React.useContext(CompoundComponentContext);

MultiSelect/index.d.ts

 export { default } from './MultiSelect';

MultiSelect/MultiSelect.d.ts

@@ -0,0 +0,0 @@ /**

node/Badge/Badge.js

@@ -18,3 +18,3 @@ "use strict";
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["badgeContent", "component", "children", "invisible", "max", "slotProps", "slots", "showZero"];
+const _excluded = ["badgeContent", "children", "invisible", "max", "slotProps", "slots", "showZero"];
 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); }
@@ -42,5 +42,5 @@ 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 Badge = /*#__PURE__*/React.forwardRef(function Badge(props, ref) {
+const Badge = /*#__PURE__*/React.forwardRef(function Badge(props, forwardedRef) {
+  var _slots$root, _slots$badge;
   const {
-      component,
       children,
@@ -68,3 +68,3 @@ max: maxProp = 99,
   const classes = useUtilityClasses(ownerState);
-  const Root = component || slots.root || 'span';
+  const Root = (_slots$root = slots.root) != null ? _slots$root : 'span';
   const rootProps = (0, _utils.useSlotProps)({
@@ -75,3 +75,3 @@ elementType: Root,
     additionalProps: {
-      ref
+      ref: forwardedRef
     },
@@ -81,3 +81,3 @@ ownerState,
   });
-  const BadgeComponent = slots.badge || 'span';
+  const BadgeComponent = (_slots$badge = slots.badge) != null ? _slots$badge : 'span';
   const badgeProps = (0, _utils.useSlotProps)({
@@ -109,7 +109,2 @@ elementType: BadgeComponent,
   /**
-   * The component used for the root node.
-   * Either a string to use a HTML element or a component.
-   */
-  component: _propTypes.default.elementType,
-  /**
    * If `true`, the badge is invisible.
@@ -116,0 +111,0 @@ * @default false

node/Button/Button.js

@@ -18,3 +18,3 @@ "use strict";
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["action", "children", "component", "disabled", "focusableWhenDisabled", "onBlur", "onClick", "onFocus", "onFocusVisible", "onKeyDown", "onKeyUp", "onMouseLeave", "slotProps", "slots"];
+const _excluded = ["action", "children", "disabled", "focusableWhenDisabled", "onFocusVisible", "slotProps", "slots"];
 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); }
@@ -45,7 +45,6 @@ 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 Button = /*#__PURE__*/React.forwardRef(function Button(props, forwardedRef) {
-  var _ref;
+  var _slots$root;
   const {
       action,
       children,
-      component,
       focusableWhenDisabled = false,
@@ -78,3 +77,3 @@ slotProps = {},
   const defaultElement = other.href || other.to ? 'a' : 'button';
-  const Root = (_ref = component != null ? component : slots.root) != null ? _ref : defaultElement;
+  const Root = (_slots$root = slots.root) != null ? _slots$root : defaultElement;
   const rootProps = (0, _utils.useSlotProps)({
@@ -113,7 +112,2 @@ elementType: Root,
   /**
-   * The component used for the root node.
-   * Either a string to use a HTML element or a component.
-   */
-  component: _propTypes.default.elementType,
-  /**
    * If `true`, the component is disabled.
@@ -135,28 +129,4 @@ * @default false
    */
-  onBlur: _propTypes.default.func,
-  /**
-   * @ignore
-   */
-  onClick: _propTypes.default.func,
-  /**
-   * @ignore
-   */
-  onFocus: _propTypes.default.func,
-  /**
-   * @ignore
-   */
   onFocusVisible: _propTypes.default.func,
   /**
-   * @ignore
-   */
-  onKeyDown: _propTypes.default.func,
-  /**
-   * @ignore
-   */
-  onKeyUp: _propTypes.default.func,
-  /**
-   * @ignore
-   */
-  onMouseLeave: _propTypes.default.func,
-  /**
    * The props used for each slot inside the Button.
@@ -163,0 +133,0 @@ * @default {}

node/FormControl/FormControl.js

@@ -19,3 +19,3 @@ "use strict";
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["defaultValue", "children", "component", "disabled", "error", "onChange", "required", "slotProps", "slots", "value"];
+const _excluded = ["defaultValue", "children", "disabled", "error", "onChange", "required", "slotProps", "slots", "value"];
 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); }
@@ -77,8 +77,7 @@ 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 FormControl = /*#__PURE__*/React.forwardRef(function FormControl(props, ref) {
-  var _ref;
+const FormControl = /*#__PURE__*/React.forwardRef(function FormControl(props, forwardedRef) {
+  var _slots$root;
   const {
       defaultValue,
       children,
-      component,
       disabled = false,
@@ -137,3 +136,3 @@ error = false,
   };
-  const Root = (_ref = component != null ? component : slots.root) != null ? _ref : 'div';
+  const Root = (_slots$root = slots.root) != null ? _slots$root : 'div';
   const rootProps = (0, _utils2.useSlotProps)({
@@ -144,3 +143,3 @@ elementType: Root,
     additionalProps: {
-      ref,
+      ref: forwardedRef,
       children: renderChildren()
@@ -166,7 +165,2 @@ },
   /**
-   * The component used for the root node.
-   * Either a string to use a HTML element or a component.
-   */
-  component: _propTypes.default.elementType,
-  /**
    * @ignore
@@ -173,0 +167,0 @@ */

node/index.js

 /**
- * @mui/base v5.0.0-alpha.127
+ * @mui/base v5.0.0-alpha.128
  *
@@ -4,0 +4,0 @@ * @license MIT

node/Input/Input.js

@@ -19,3 +19,3 @@ "use strict";
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["aria-describedby", "aria-label", "aria-labelledby", "autoComplete", "autoFocus", "className", "component", "defaultValue", "disabled", "endAdornment", "error", "id", "multiline", "name", "onClick", "onChange", "onKeyDown", "onKeyUp", "onFocus", "onBlur", "placeholder", "readOnly", "required", "startAdornment", "value", "type", "rows", "slotProps", "slots", "minRows", "maxRows"];
+const _excluded = ["aria-describedby", "aria-label", "aria-labelledby", "autoComplete", "autoFocus", "className", "defaultValue", "disabled", "endAdornment", "error", "id", "multiline", "name", "onClick", "onChange", "onKeyDown", "onKeyUp", "onFocus", "onBlur", "placeholder", "readOnly", "required", "startAdornment", "value", "type", "rows", "slotProps", "slots", "minRows", "maxRows"];
 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); }
@@ -51,3 +51,3 @@ 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 Input = /*#__PURE__*/React.forwardRef(function Input(props, forwardedRef) {
-  var _ref, _slots$textarea, _slots$input;
+  var _slots$root, _slots$textarea, _slots$input;
   const {
@@ -60,3 +60,2 @@ 'aria-describedby': ariaDescribedby,
       className,
-      component,
       defaultValue,
@@ -130,3 +129,3 @@ disabled,
   };
-  const Root = (_ref = component != null ? component : slots.root) != null ? _ref : 'div';
+  const Root = (_slots$root = slots.root) != null ? _slots$root : 'div';
   const rootProps = (0, _utils.useSlotProps)({
@@ -198,6 +197,2 @@ elementType: Root,
   /**
-   * @ignore
-   */
-  children: _propTypes.default.node,
-  /**
    * Class name applied to the root element.
@@ -207,11 +202,2 @@ */
   /**
-   * @ignore
-   */
-  color: _propTypes.default.string,
-  /**
-   * The component used for the root node.
-   * Either a string to use a HTML element or a component.
-   */
-  component: _propTypes.default.elementType,
-  /**
    * The default value. Use when the component is not controlled.
@@ -218,0 +204,0 @@ */

node/Menu/Menu.js

@@ -21,3 +21,3 @@ "use strict";
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["actions", "anchorEl", "children", "component", "defaultOpen", "listboxId", "onOpenChange", "open", "slotProps", "slots"];
+const _excluded = ["actions", "anchorEl", "children", "defaultOpen", "listboxId", "onOpenChange", "open", "slotProps", "slots"];
 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); }
@@ -46,3 +46,3 @@ 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 Menu = /*#__PURE__*/React.forwardRef(function Menu(props, forwardedRef) {
-  var _ref, _slots$listbox;
+  var _slots$root, _slots$listbox;
   const {
@@ -52,3 +52,2 @@ actions,
       children,
-      component,
       defaultOpen,
@@ -80,3 +79,3 @@ listboxId,
   const classes = useUtilityClasses(ownerState);
-  const Root = (_ref = component != null ? component : slots.root) != null ? _ref : _Popper.default;
+  const Root = (_slots$root = slots.root) != null ? _slots$root : _Popper.default;
   const rootProps = (0, _useSlotProps.default)({
@@ -134,7 +133,2 @@ elementType: Root,
   /**
-   * The component used for the root node.
-   * Either a string to use a HTML element or a component.
-   */
-  component: _propTypes.default.elementType,
-  /**
    * @ignore
@@ -160,3 +154,3 @@ */
    */
-  slotProps: _propTypes.default.shape({
+  slotProps: _propTypes.default /* @typescript-to-proptypes-ignore */.shape({
     listbox: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object]),
@@ -163,0 +157,0 @@ root: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object])

node/MenuItem/MenuItem.js

@@ -18,3 +18,3 @@ "use strict";
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["children", "disabled", "component", "label", "slotProps", "slots"];
+const _excluded = ["children", "disabled", "label", "slotProps", "slots"];
 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); }
@@ -43,8 +43,7 @@ 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 MenuItem = /*#__PURE__*/React.forwardRef(function MenuItem(props, ref) {
-  var _ref;
+const MenuItem = /*#__PURE__*/React.forwardRef(function MenuItem(props, forwardedRef) {
+  var _slots$root;
   const {
       children,
       disabled: disabledProp = false,
-      component,
       label,
@@ -62,3 +61,3 @@ slotProps = {},
     disabled: disabledProp,
-    ref,
+    rootRef: forwardedRef,
     label
@@ -72,3 +71,3 @@ });
   const classes = useUtilityClasses(ownerState);
-  const Root = (_ref = component != null ? component : slots.root) != null ? _ref : 'li';
+  const Root = (_slots$root = slots.root) != null ? _slots$root : 'li';
   const rootProps = (0, _useSlotProps.default)({
@@ -96,7 +95,2 @@ elementType: Root,
   /**
-   * The component used for the root node.
-   * Either a string to use a HTML element or a component.
-   */
-  component: _propTypes.default.elementType,
-  /**
    * @ignore
@@ -103,0 +97,0 @@ */

node/Modal/Modal.js

@@ -21,3 +21,3 @@ "use strict";
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["children", "closeAfterTransition", "component", "container", "disableAutoFocus", "disableEnforceFocus", "disableEscapeKeyDown", "disablePortal", "disableRestoreFocus", "disableScrollLock", "hideBackdrop", "keepMounted", "manager", "onBackdropClick", "onClose", "onKeyDown", "open", "onTransitionEnter", "onTransitionExited", "slotProps", "slots"];
+const _excluded = ["children", "closeAfterTransition", "container", "disableAutoFocus", "disableEnforceFocus", "disableEscapeKeyDown", "disablePortal", "disableRestoreFocus", "disableScrollLock", "hideBackdrop", "keepMounted", "manager", "onBackdropClick", "onClose", "onKeyDown", "open", "onTransitionEnter", "onTransitionExited", "slotProps", "slots"];
 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); }
@@ -69,7 +69,6 @@ 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 Modal = /*#__PURE__*/React.forwardRef(function Modal(props, forwardedRef) {
-  var _props$ariaHidden, _ref;
+  var _props$ariaHidden, _slots$root;
   const {
       children,
       closeAfterTransition = false,
-      component,
       container,
@@ -85,3 +84,3 @@ disableAutoFocus = false,
       // private
-      manager = defaultManager,
+      manager: managerProp = defaultManager,
       onBackdropClick,
@@ -97,2 +96,5 @@ onClose,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
+  // TODO: `modal`` must change its type in this file to match the type of methods
+  // provided by `ModalManager`
+  const manager = managerProp;
   const [exited, setExited] = React.useState(!open);
@@ -228,3 +230,3 @@ const modal = React.useRef({});
   }
-  const Root = (_ref = component != null ? component : slots.root) != null ? _ref : 'div';
+  const Root = (_slots$root = slots.root) != null ? _slots$root : 'div';
   const rootProps = (0, _utils2.useSlotProps)({
@@ -290,7 +292,2 @@ elementType: Root,
   /**
-   * The component used for the root node.
-   * Either a string to use a HTML element or a component.
-   */
-  component: _propTypes.default.elementType,
-  /**
    * An HTML element or function that returns one.
@@ -368,6 +365,2 @@ * The `container` will have the portal children appended to it.
   /**
-   * @ignore
-   */
-  onKeyDown: _propTypes.default.func,
-  /**
    * If `true`, the component is shown.
@@ -374,0 +367,0 @@ */

node/Option/Option.js

@@ -19,3 +19,3 @@ "use strict";
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["children", "component", "disabled", "label", "slotProps", "slots", "value"];
+const _excluded = ["children", "disabled", "label", "slotProps", "slots", "value"];
 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); }
@@ -38,7 +38,6 @@ 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 Option = /*#__PURE__*/React.forwardRef(function Option(props, ref) {
-  var _optionRef$current;
+const Option = /*#__PURE__*/React.forwardRef(function Option(props, forwardedRef) {
+  var _slots$root, _optionRef$current;
   const {
       children,
-      component,
       disabled = false,
@@ -51,5 +50,5 @@ label,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
-  const Root = component || slots.root || 'li';
+  const Root = (_slots$root = slots.root) != null ? _slots$root : 'li';
   const optionRef = React.useRef(null);
-  const combinedRef = (0, _utils.unstable_useForkRef)(optionRef, ref);
+  const combinedRef = (0, _utils.unstable_useForkRef)(optionRef, forwardedRef);
 
@@ -67,3 +66,3 @@ // If `label` is not explicitly provided, the `children` are used for convenience.
     label: computedLabel,
-    optionRef: combinedRef,
+    rootRef: combinedRef,
     value
@@ -100,7 +99,2 @@ });
   /**
-   * The component used for the root node.
-   * Either a string to use a HTML element or a component.
-   */
-  component: _propTypes.default.elementType,
-  /**
    * If `true`, the option will be disabled.
@@ -107,0 +101,0 @@ * @default false

node/OptionGroup/OptionGroup.js

@@ -17,3 +17,3 @@ "use strict";
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["component", "disabled", "slotProps", "slots"];
+const _excluded = ["disabled", "slotProps", "slots"];
 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); }
@@ -41,5 +41,4 @@ 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 OptionGroup = /*#__PURE__*/React.forwardRef(function OptionGroup(props, ref) {
+const OptionGroup = /*#__PURE__*/React.forwardRef(function OptionGroup(props, forwardedRef) {
   const {
-      component,
       disabled = false,
@@ -50,3 +49,3 @@ slotProps = {},
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
-  const Root = component || (slots == null ? void 0 : slots.root) || 'li';
+  const Root = (slots == null ? void 0 : slots.root) || 'li';
   const Label = (slots == null ? void 0 : slots.label) || 'span';
@@ -60,3 +59,3 @@ const List = (slots == null ? void 0 : slots.list) || 'ul';
     additionalProps: {
-      ref
+      ref: forwardedRef
     },
@@ -96,7 +95,2 @@ ownerState: props,
   /**
-   * The component used for the root node.
-   * Either a string to use a HTML element or a component.
-   */
-  component: _propTypes.default.elementType,
-  /**
    * If `true` all the options in the group will be disabled.
@@ -103,0 +97,0 @@ * @default false

node/Popper/Popper.js

@@ -20,3 +20,3 @@ "use strict";
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["anchorEl", "children", "component", "direction", "disablePortal", "modifiers", "open", "placement", "popperOptions", "popperRef", "slotProps", "slots", "TransitionProps", "ownerState"],
+const _excluded = ["anchorEl", "children", "direction", "disablePortal", "modifiers", "open", "placement", "popperOptions", "popperRef", "slotProps", "slots", "TransitionProps", "ownerState"],
   _excluded2 = ["anchorEl", "children", "container", "direction", "disablePortal", "keepMounted", "modifiers", "open", "placement", "popperOptions", "popperRef", "style", "transition", "slotProps", "slots"];
@@ -58,8 +58,7 @@ 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); }
 const defaultPopperOptions = {};
-const PopperTooltip = /*#__PURE__*/React.forwardRef(function PopperTooltip(props, ref) {
-  var _ref;
+const PopperTooltip = /*#__PURE__*/React.forwardRef(function PopperTooltip(props, forwardedRef) {
+  var _slots$root;
   const {
       anchorEl,
       children,
-      component,
       direction,
@@ -75,6 +74,8 @@ disablePortal,
       TransitionProps
+      // @ts-ignore internal logic
+      // prevent from spreading to DOM, it can come from the parent component e.g. Select.
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const tooltipRef = React.useRef(null);
-  const ownRef = (0, _utils.unstable_useForkRef)(tooltipRef, ref);
+  const ownRef = (0, _utils.unstable_useForkRef)(tooltipRef, forwardedRef);
   const popperRef = React.useRef(null);
@@ -163,3 +164,3 @@ const handlePopperRef = (0, _utils.unstable_useForkRef)(popperRef, popperRefProp);
   const classes = useUtilityClasses();
-  const Root = (_ref = component != null ? component : slots.root) != null ? _ref : 'div';
+  const Root = (_slots$root = slots.root) != null ? _slots$root : 'div';
   const rootProps = (0, _utils2.useSlotProps)({
@@ -192,3 +193,3 @@ elementType: Root,
  */
-const Popper = /*#__PURE__*/React.forwardRef(function Popper(props, ref) {
+const Popper = /*#__PURE__*/React.forwardRef(function Popper(props, forwardedRef) {
   const {
@@ -247,3 +248,3 @@ anchorEl,
       modifiers: modifiers,
-      ref: ref,
+      ref: forwardedRef,
       open: transition ? !exited : open,
@@ -382,6 +383,2 @@ placement: placement,
   /**
-   * @ignore
-   */
-  style: _propTypes.default.object,
-  /**
    * Help supporting a react-transition-group/Transition component.
@@ -388,0 +385,0 @@ * @default false

node/Portal/Portal.js

@@ -31,3 +31,3 @@ "use strict";
  */
-const Portal = /*#__PURE__*/React.forwardRef(function Portal(props, ref) {
+const Portal = /*#__PURE__*/React.forwardRef(function Portal(props, forwardedRef) {
   const {
@@ -40,3 +40,3 @@ children,
   // @ts-expect-error TODO upstream fix
-  const handleRef = (0, _utils.unstable_useForkRef)( /*#__PURE__*/React.isValidElement(children) ? children.ref : null, ref);
+  const handleRef = (0, _utils.unstable_useForkRef)( /*#__PURE__*/React.isValidElement(children) ? children.ref : null, forwardedRef);
   (0, _utils.unstable_useEnhancedEffect)(() => {
@@ -49,9 +49,9 @@ if (!disablePortal) {
     if (mountNode && !disablePortal) {
-      (0, _utils.unstable_setRef)(ref, mountNode);
+      (0, _utils.unstable_setRef)(forwardedRef, mountNode);
       return () => {
-        (0, _utils.unstable_setRef)(ref, null);
+        (0, _utils.unstable_setRef)(forwardedRef, null);
       };
     }
     return undefined;
-  }, [ref, mountNode, disablePortal]);
+  }, [forwardedRef, mountNode, disablePortal]);
   if (disablePortal) {
@@ -58,0 +58,0 @@ if ( /*#__PURE__*/React.isValidElement(children)) {

node/Select/Select.js

@@ -22,3 +22,3 @@ "use strict";
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["autoFocus", "children", "component", "defaultValue", "defaultListboxOpen", "disabled", "getSerializedValue", "listboxId", "listboxOpen", "multiple", "name", "onChange", "onListboxOpenChange", "optionStringifier", "renderValue", "slotProps", "slots", "value"];
+const _excluded = ["autoFocus", "children", "defaultValue", "defaultListboxOpen", "disabled", "getSerializedValue", "listboxId", "listboxOpen", "multiple", "name", "onChange", "onListboxOpenChange", "optionStringifier", "renderValue", "slotProps", "slots", "value"];
 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); }
@@ -80,7 +80,6 @@ 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 Select = /*#__PURE__*/React.forwardRef(function Select(props, forwardedRef) {
-  var _ref, _slots$listbox, _slots$popper;
+  var _slots$root, _slots$listbox, _slots$popper;
   const {
       autoFocus,
       children,
-      component,
       defaultValue,
@@ -107,3 +106,3 @@ defaultListboxOpen = false,
   const listboxRef = React.useRef(null);
-  const Button = (_ref = component != null ? component : slots.root) != null ? _ref : 'button';
+  const Button = (_slots$root = slots.root) != null ? _slots$root : 'button';
   const ListboxRoot = (_slots$listbox = slots.listbox) != null ? _slots$listbox : 'ul';
@@ -224,7 +223,2 @@ const PopperComponent = (_slots$popper = slots.popper) != null ? _slots$popper : _Popper.default;
   /**
-   * The component used for the root node.
-   * Either a string to use a HTML element or a component.
-   */
-  component: _propTypes.default.elementType,
-  /**
    * If `true`, the select will be initially open.
@@ -295,3 +289,3 @@ * @default false
    */
-  slotProps: _propTypes.default.shape({
+  slotProps: _propTypes.default /* @typescript-to-proptypes-ignore */.shape({
     listbox: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object]),
@@ -298,0 +292,0 @@ popper: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object]),

node/Slider/Slider.js

@@ -21,6 +21,5 @@ "use strict";
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["aria-label", "aria-valuetext", "aria-labelledby", "className", "component", "disableSwap", "disabled", "getAriaLabel", "getAriaValueText", "marks", "max", "min", "name", "onChange", "onChangeCommitted", "orientation", "scale", "step", "tabIndex", "track", "value", "valueLabelFormat", "isRtl", "defaultValue", "slotProps", "slots"];
+const _excluded = ["aria-label", "aria-valuetext", "aria-labelledby", "className", "disableSwap", "disabled", "getAriaLabel", "getAriaValueText", "marks", "max", "min", "name", "onChange", "onChangeCommitted", "orientation", "scale", "step", "tabIndex", "track", "value", "valueLabelFormat", "isRtl", "defaultValue", "slotProps", "slots"]; // @ts-ignore
 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; }
-// @ts-ignore
 function Identity(x) {
@@ -64,4 +63,4 @@ return x;
  */
-const Slider = /*#__PURE__*/React.forwardRef(function Slider(props, ref) {
-  var _ref, _slots$rail, _slots$track, _slots$thumb, _slots$mark, _slots$markLabel;
+const Slider = /*#__PURE__*/React.forwardRef(function Slider(props, forwardedRef) {
+  var _slots$root, _slots$rail, _slots$track, _slots$thumb, _slots$mark, _slots$markLabel;
   const {
@@ -72,3 +71,2 @@ 'aria-label': ariaLabel,
       className,
-      component,
       disableSwap = false,
@@ -123,3 +121,3 @@ disabled = false,
   } = (0, _useSlider.default)((0, _extends2.default)({}, partialOwnerState, {
-    ref
+    rootRef: forwardedRef
   }));
@@ -132,3 +130,3 @@ const ownerState = (0, _extends2.default)({}, partialOwnerState, {
   const classes = useUtilityClasses(ownerState);
-  const Root = (_ref = component != null ? component : slots.root) != null ? _ref : 'span';
+  const Root = (_slots$root = slots.root) != null ? _slots$root : 'span';
   const rootProps = (0, _useSlotProps.default)({
@@ -279,15 +277,2 @@ elementType: Root,
   /**
-   * @ignore
-   */
-  children: _propTypes.default.node,
-  /**
-   * @ignore
-   */
-  className: _propTypes.default.string,
-  /**
-   * The component used for the root node.
-   * Either a string to use a HTML element or a component.
-   */
-  component: _propTypes.default.elementType,
-  /**
    * The default value. Use when the component is not controlled.
@@ -294,0 +279,0 @@ */

node/Snackbar/Snackbar.js

@@ -19,3 +19,3 @@ "use strict";
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["autoHideDuration", "children", "component", "disableWindowBlurListener", "exited", "onBlur", "onClose", "onFocus", "onMouseEnter", "onMouseLeave", "open", "resumeHideDuration", "slotProps", "slots"];
+const _excluded = ["autoHideDuration", "children", "disableWindowBlurListener", "exited", "onBlur", "onClose", "onFocus", "onMouseEnter", "onMouseLeave", "open", "resumeHideDuration", "slotProps", "slots"];
 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); }
@@ -40,7 +40,6 @@ 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 Snackbar = /*#__PURE__*/React.forwardRef(function Snackbar(props, ref) {
+const Snackbar = /*#__PURE__*/React.forwardRef(function Snackbar(props, forwardedRef) {
   const {
       autoHideDuration = null,
       children,
-      component,
       disableWindowBlurListener = false,
@@ -64,7 +63,6 @@ exited = true,
     open,
-    resumeHideDuration,
-    ref
+    resumeHideDuration
   }));
   const ownerState = props;
-  const Root = component || slots.root || 'div';
+  const Root = slots.root || 'div';
   const rootProps = (0, _utils.useSlotProps)({
@@ -76,3 +74,3 @@ elementType: Root,
     additionalProps: {
-      ref
+      ref: forwardedRef
     },
@@ -122,7 +120,2 @@ ownerState,
   /**
-   * The component used for the root node.
-   * Either a string to use a HTML element or a component.
-   */
-  component: _propTypes.default.elementType,
-  /**
    * If `true`, the `autoHideDuration` timer will expire even if the window is not focused.
@@ -138,6 +131,2 @@ * @default false
   /**
-   * @ignore
-   */
-  onBlur: _propTypes.default.func,
-  /**
    * Callback fired when the component requests to be closed.
@@ -154,14 +143,2 @@ * Typically `onClose` is used to set state in the parent component,
   /**
-   * @ignore
-   */
-  onFocus: _propTypes.default.func,
-  /**
-   * @ignore
-   */
-  onMouseEnter: _propTypes.default.func,
-  /**
-   * @ignore
-   */
-  onMouseLeave: _propTypes.default.func,
-  /**
    * If `true`, the component is shown.
@@ -168,0 +145,0 @@ */

node/Switch/Switch.js

@@ -18,3 +18,3 @@ "use strict";
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["checked", "component", "defaultChecked", "disabled", "onBlur", "onChange", "onFocus", "onFocusVisible", "readOnly", "required", "slotProps", "slots"];
+const _excluded = ["checked", "defaultChecked", "disabled", "onBlur", "onChange", "onFocus", "onFocusVisible", "readOnly", "required", "slotProps", "slots"];
 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); }
@@ -49,7 +49,6 @@ 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 Switch = /*#__PURE__*/React.forwardRef(function Switch(props, ref) {
-  var _ref, _slots$thumb, _slots$input, _slots$track;
+const Switch = /*#__PURE__*/React.forwardRef(function Switch(props, forwardedRef) {
+  var _slots$root, _slots$thumb, _slots$input, _slots$track;
   const {
       checked: checkedProp,
-      component,
       defaultChecked,
@@ -90,3 +89,3 @@ disabled: disabledProp,
   const classes = useUtilityClasses(ownerState);
-  const Root = (_ref = component != null ? component : slots.root) != null ? _ref : 'span';
+  const Root = (_slots$root = slots.root) != null ? _slots$root : 'span';
   const rootProps = (0, _utils.useSlotProps)({
@@ -97,3 +96,3 @@ elementType: Root,
     additionalProps: {
-      ref
+      ref: forwardedRef
     },
@@ -139,11 +138,2 @@ ownerState,
   /**
-   * @ignore
-   */
-  children: _propTypes.default.node,
-  /**
-   * The component used for the root node.
-   * Either a string to use a HTML element or a component.
-   */
-  component: _propTypes.default.elementType,
-  /**
    * The default checked state. Use when the component is not controlled.
@@ -159,6 +149,2 @@ */
    */
-  id: _propTypes.default.string,
-  /**
-   * @ignore
-   */
   onBlur: _propTypes.default.func,
@@ -165,0 +151,0 @@ /**

node/Tab/Tab.js

@@ -19,3 +19,3 @@ "use strict";
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["action", "children", "value", "disabled", "onChange", "onClick", "onFocus", "component", "slotProps", "slots"];
+const _excluded = ["action", "children", "value", "disabled", "onChange", "onClick", "onFocus", "slotProps", "slots"];
 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); }
@@ -43,8 +43,7 @@ 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 Tab = /*#__PURE__*/React.forwardRef(function Tab(props, ref) {
-  var _ref;
+const Tab = /*#__PURE__*/React.forwardRef(function Tab(props, forwardedRef) {
+  var _slots$root;
   const {
       children,
       disabled = false,
-      component,
       slotProps = {},
@@ -55,3 +54,3 @@ slots = {}
   const tabRef = React.useRef();
-  const handleRef = (0, _utils.unstable_useForkRef)(tabRef, ref);
+  const handleRef = (0, _utils.unstable_useForkRef)(tabRef, forwardedRef);
   const {
@@ -63,3 +62,3 @@ active,
   } = (0, _useTab.default)((0, _extends2.default)({}, props, {
-    ref: handleRef
+    rootRef: handleRef
   }));
@@ -73,3 +72,3 @@ const ownerState = (0, _extends2.default)({}, props, {
   const classes = useUtilityClasses(ownerState);
-  const TabRoot = (_ref = component != null ? component : slots.root) != null ? _ref : 'button';
+  const TabRoot = (_slots$root = slots.root) != null ? _slots$root : 'button';
   const tabRootProps = (0, _utils2.useSlotProps)({
@@ -81,3 +80,3 @@ elementType: TabRoot,
     additionalProps: {
-      ref
+      ref: forwardedRef
     },
@@ -109,7 +108,2 @@ ownerState,
   /**
-   * The component used for the root node.
-   * Either a string to use a HTML element or a component.
-   */
-  component: _propTypes.default.elementType,
-  /**
    * If `true`, the component is disabled.
@@ -124,10 +118,2 @@ * @default false
   /**
-   * @ignore
-   */
-  onClick: _propTypes.default.func,
-  /**
-   * @ignore
-   */
-  onFocus: _propTypes.default.func,
-  /**
    * The props used for each slot inside the Tab.
@@ -134,0 +120,0 @@ * @default {}

node/TablePagination/TablePagination.js

@@ -20,3 +20,3 @@ "use strict";
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["component", "colSpan", "count", "getItemAriaLabel", "labelDisplayedRows", "labelId", "labelRowsPerPage", "onPageChange", "onRowsPerPageChange", "page", "rowsPerPage", "rowsPerPageOptions", "selectId", "slotProps", "slots"];
+const _excluded = ["colSpan", "count", "getItemAriaLabel", "labelDisplayedRows", "labelId", "labelRowsPerPage", "onPageChange", "onRowsPerPageChange", "page", "rowsPerPage", "rowsPerPageOptions", "selectId", "slotProps", "slots"];
 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); }
@@ -61,6 +61,5 @@ 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 TablePagination = /*#__PURE__*/React.forwardRef(function TablePagination(props, ref) {
-  var _ref, _slots$select, _slots$actions, _slots$menuItem, _slots$selectLabel, _slots$displayedRows, _slots$toolbar, _slots$spacer;
+const TablePagination = /*#__PURE__*/React.forwardRef(function TablePagination(props, forwardedRef) {
+  var _slots$root, _slots$select, _slots$actions, _slots$menuItem, _slots$selectLabel, _slots$displayedRows, _slots$toolbar, _slots$spacer;
   const {
-      component,
       colSpan: colSpanProp,
@@ -85,3 +84,4 @@ count,
   let colSpan;
-  if (!component || component === 'td' || !(0, _isHostComponent.default)(component)) {
+  const Root = (_slots$root = slots.root) != null ? _slots$root : 'td';
+  if (Root === 'td' || !(0, _isHostComponent.default)(Root)) {
     colSpan = colSpanProp || 1000; // col-span over everything
@@ -98,3 +98,2 @@ }
   const labelId = (0, _utils.unstable_useId)(labelIdProp);
-  const Root = (_ref = component != null ? component : slots.root) != null ? _ref : 'td';
   const rootProps = (0, _utils2.useSlotProps)({
@@ -106,3 +105,3 @@ elementType: Root,
       colSpan,
-      ref
+      ref: forwardedRef
     },
@@ -209,13 +208,4 @@ ownerState,
    */
-  children: _propTypes.default.node,
-  /**
-   * @ignore
-   */
   colSpan: _propTypes.default.number,
   /**
-   * The component used for the root node.
-   * Either a string to use a HTML element or a component.
-   */
-  component: _propTypes.default.elementType,
-  /**
    * The total number of rows.
@@ -314,3 +304,3 @@ *
    */
-  slotProps: _propTypes.default.shape({
+  slotProps: _propTypes.default /* @typescript-to-proptypes-ignore */.shape({
     actions: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object]),
@@ -317,0 +307,0 @@ displayedRows: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object]),

node/TablePagination/TablePaginationActions.js

@@ -13,3 +13,3 @@ "use strict";
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["component", "count", "getItemAriaLabel", "onPageChange", "page", "rowsPerPage", "showFirstButton", "showLastButton", "direction", "ownerState", "slotProps", "slots"];
+const _excluded = ["count", "getItemAriaLabel", "onPageChange", "page", "rowsPerPage", "showFirstButton", "showLastButton", "direction", "ownerState", "slotProps", "slots"];
 var _span, _span2, _span3, _span4;
@@ -45,6 +45,5 @@ 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); }
  */
-const TablePaginationActions = /*#__PURE__*/React.forwardRef(function TablePaginationActions(props, ref) {
-  var _ref, _slots$root, _slots$firstButton, _slots$lastButton, _slots$nextButton, _slots$backButton, _slots$lastPageIcon, _slots$firstPageIcon, _slots$nextPageIcon, _slots$backPageIcon;
+const TablePaginationActions = /*#__PURE__*/React.forwardRef(function TablePaginationActions(props, forwardedRef) {
+  var _slots$root, _slots$firstButton, _slots$lastButton, _slots$nextButton, _slots$backButton, _slots$lastPageIcon, _slots$firstPageIcon, _slots$nextPageIcon, _slots$backPageIcon;
   const {
-      component,
       count,
@@ -57,3 +56,6 @@ getItemAriaLabel = defaultGetAriaLabel,
       showLastButton = false,
-      direction,
+      direction
+      // @ts-ignore
+      ,
+
       slotProps = {},
@@ -76,3 +78,3 @@ slots = {}
   };
-  const Root = (_ref = (_slots$root = slots.root) != null ? _slots$root : component) != null ? _ref : 'div';
+  const Root = (_slots$root = slots.root) != null ? _slots$root : 'div';
   const rootProps = (0, _utils.useSlotProps)({
@@ -83,3 +85,3 @@ elementType: Root,
     additionalProps: {
-      ref
+      ref: forwardedRef
     },
@@ -86,0 +88,0 @@ ownerState

node/TabPanel/TabPanel.js

@@ -18,3 +18,3 @@ "use strict";
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["children", "component", "value", "slotProps", "slots"];
+const _excluded = ["children", "value", "slotProps", "slots"];
 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); }
@@ -41,7 +41,6 @@ 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 TabPanel = /*#__PURE__*/React.forwardRef(function TabPanel(props, ref) {
-  var _ref;
+const TabPanel = /*#__PURE__*/React.forwardRef(function TabPanel(props, forwardedRef) {
+  var _slots$root;
   const {
       children,
-      component,
       slotProps = {},
@@ -59,3 +58,3 @@ slots = {}
   const classes = useUtilityClasses(ownerState);
-  const TabPanelRoot = (_ref = component != null ? component : slots.root) != null ? _ref : 'div';
+  const TabPanelRoot = (_slots$root = slots.root) != null ? _slots$root : 'div';
   const tabPanelRootProps = (0, _utils.useSlotProps)({
@@ -68,3 +67,3 @@ elementType: TabPanelRoot,
       role: 'tabpanel',
-      ref
+      ref: forwardedRef
     },
@@ -88,7 +87,2 @@ ownerState,
   /**
-   * The component used for the root node.
-   * Either a string to use a HTML element or a component.
-   */
-  component: _propTypes.default.elementType,
-  /**
    * The props used for each slot inside the TabPanel.
@@ -95,0 +89,0 @@ * @default {}

node/Tabs/Tabs.js

@@ -19,3 +19,3 @@ "use strict";
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["children", "value", "defaultValue", "orientation", "direction", "component", "onChange", "selectionFollowsFocus", "slotProps", "slots"];
+const _excluded = ["children", "value", "defaultValue", "orientation", "direction", "onChange", "selectionFollowsFocus", "slotProps", "slots"];
 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); }
@@ -43,4 +43,4 @@ 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 Tabs = /*#__PURE__*/React.forwardRef(function Tabs(props, ref) {
-  var _ref;
+const Tabs = /*#__PURE__*/React.forwardRef(function Tabs(props, forwardedRef) {
+  var _slots$root;
   const {
@@ -50,3 +50,2 @@ children,
       direction = 'ltr',
-      component,
       slotProps = {},
@@ -64,3 +63,3 @@ slots = {}
   const classes = useUtilityClasses(ownerState);
-  const TabsRoot = (_ref = component != null ? component : slots.root) != null ? _ref : 'div';
+  const TabsRoot = (_slots$root = slots.root) != null ? _slots$root : 'div';
   const tabsRootProps = (0, _utils.useSlotProps)({
@@ -71,3 +70,3 @@ elementType: TabsRoot,
     additionalProps: {
-      ref
+      ref: forwardedRef
     },
@@ -94,7 +93,2 @@ ownerState,
   /**
-   * The component used for the root node.
-   * Either a string to use a HTML element or a component.
-   */
-  component: _propTypes.default.elementType,
-  /**
    * The default value. Use when the component is not controlled.
@@ -101,0 +95,0 @@ */

node/TabsList/TabsList.js

@@ -19,3 +19,3 @@ "use strict";
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["children", "component", "slotProps", "slots"];
+const _excluded = ["children", "slotProps", "slots"];
 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); }
@@ -43,7 +43,6 @@ 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 TabsList = /*#__PURE__*/React.forwardRef(function TabsList(props, ref) {
-  var _ref;
+const TabsList = /*#__PURE__*/React.forwardRef(function TabsList(props, forwardedRef) {
+  var _slots$root;
   const {
       children,
-      component,
       slotProps = {},
@@ -59,3 +58,3 @@ slots = {}
   } = (0, _useTabsList.default)({
-    ref
+    rootRef: forwardedRef
   });
@@ -67,3 +66,3 @@ const ownerState = (0, _extends2.default)({}, props, {
   const classes = useUtilityClasses(ownerState);
-  const TabsListRoot = (_ref = component != null ? component : slots.root) != null ? _ref : 'div';
+  const TabsListRoot = (_slots$root = slots.root) != null ? _slots$root : 'div';
   const tabsListRootProps = (0, _utils.useSlotProps)({
@@ -94,7 +93,2 @@ elementType: TabsListRoot,
   /**
-   * The component used for the root node.
-   * Either a string to use a HTML element or a component.
-   */
-  component: _propTypes.default.elementType,
-  /**
    * The props used for each slot inside the TabsList.
@@ -101,0 +95,0 @@ * @default {}

node/TextareaAutosize/TextareaAutosize.js

@@ -51,3 +51,3 @@ "use strict";
  */
-const TextareaAutosize = /*#__PURE__*/React.forwardRef(function TextareaAutosize(props, ref) {
+const TextareaAutosize = /*#__PURE__*/React.forwardRef(function TextareaAutosize(props, forwardedRef) {
   const {
@@ -65,3 +65,3 @@ onChange,
   const inputRef = React.useRef(null);
-  const handleRef = (0, _utils.unstable_useForkRef)(ref, inputRef);
+  const handleRef = (0, _utils.unstable_useForkRef)(forwardedRef, inputRef);
   const shadowRef = React.useRef(null);
@@ -68,0 +68,0 @@ const renders = React.useRef(0);

node/useButton/useButton.js

@@ -29,3 +29,3 @@ "use strict";
     href,
-    ref: externalRef,
+    rootRef: externalRef,
     tabIndex,
@@ -185,6 +185,5 @@ to,
     setFocusVisible,
-    disabled,
     active,
-    ref: handleRef
+    rootRef: handleRef
   };
 }

node/useInput/useInput.js

@@ -168,2 +168,3 @@ "use strict";
     getRootProps,
+    inputRef: handleInputRef,
     required,
@@ -170,0 +171,0 @@ value

node/useList/listActions.types.js

@@ -16,2 +16,6 @@ "use strict";
 };
+
+/**
+ * A union of all standard actions that can be dispatched to the list reducer.
+ */
 exports.ListActionTypes = ListActionTypes;

node/useList/useList.js

@@ -59,3 +59,3 @@ "use strict";
     isItemDisabled = defaultIsItemDisabled,
-    listRef: externalListRef,
+    rootRef: externalListRef,
     onStateChange = NOOP,
@@ -265,2 +265,3 @@ items,
     getRootProps,
+    rootRef: handleRef,
     state
@@ -267,0 +268,0 @@ };

node/useList/useListItem.js

@@ -28,3 +28,3 @@ "use strict";
     item,
-    ref: externalRef
+    rootRef: externalRef
   } = parameters;
@@ -109,5 +109,5 @@ const itemRef = React.useRef(null);
     highlighted,
-    ref: handleRef,
+    rootRef: handleRef,
     selected
   };
 }

node/useMenu/useMenu.js

@@ -66,3 +66,4 @@ "use strict";
       highlightedValue
-    }
+    },
+    rootRef: mergedListRef
   } = (0, _useList.default)({
@@ -87,3 +88,3 @@ controlledProps,
     },
-    listRef: handleRef,
+    rootRef: handleRef,
     onStateChange: stateChangeHandler,
@@ -125,2 +126,3 @@ reducerActionContext: {
     highlightedValue,
+    listboxRef: mergedListRef,
     menuItems: subitems,
@@ -127,0 +129,0 @@ open

node/useMenuItem/useMenuItem.js

@@ -30,3 +30,3 @@ "use strict";
     id: idParam,
-    ref: externalRef,
+    rootRef: externalRef,
     label
@@ -45,3 +45,3 @@ } = params;
     highlighted,
-    ref: listItemRefHandler
+    rootRef: listItemRefHandler
   } = (0, _useList.useListItem)({
@@ -57,3 +57,3 @@ item: id
     focusVisible,
-    ref: buttonRefHandler
+    rootRef: buttonRefHandler
   } = (0, _useButton.default)({
@@ -83,3 +83,3 @@ disabled,
       totalItemCount: 0,
-      ref: handleRef
+      rootRef: handleRef
     };
@@ -102,4 +102,4 @@ }
     totalItemCount,
-    ref: handleRef
+    rootRef: handleRef
   };
 }

node/useOption/useOption.js

@@ -30,3 +30,3 @@ "use strict";
     disabled,
-    optionRef: optionRefParam,
+    rootRef: optionRefParam,
     id: idParam
@@ -36,3 +36,3 @@ } = params;
     getRootProps: getListItemProps,
-    ref: listItemRefHandler,
+    rootRef: listItemRefHandler,
     highlighted,
@@ -66,4 +66,4 @@ selected
     selected,
-    ref: handleRef
+    rootRef: handleRef
   };
 }

node/useSelect/useSelect.js

@@ -98,6 +98,7 @@ "use strict";
     active: buttonActive,
-    focusVisible: buttonFocusVisible
+    focusVisible: buttonFocusVisible,
+    rootRef: mergedButtonRef
   } = (0, _useButton.default)({
     disabled,
-    ref: handleButtonRef
+    rootRef: handleButtonRef
   });
@@ -157,3 +158,3 @@ const optionValues = React.useMemo(() => Array.from(options.keys()), [options]);
     isItemDisabled,
-    listRef: handleListboxRef,
+    rootRef: handleListboxRef,
     onChange: handleSelectionChange,
@@ -178,3 +179,4 @@ onHighlightChange: handleHighlightChange,
       selectedValues: selectedOptions
-    }
+    },
+    rootRef: mergedListboxRef
   } = (0, _useList.default)(useListParameters);
@@ -291,2 +293,4 @@ React.useEffect(() => {
     buttonFocusVisible,
+    buttonRef: mergedButtonRef,
+    contextValue,
     disabled,
@@ -297,3 +301,3 @@ dispatch,
     getOptionMetadata,
-    contextValue,
+    listboxRef: mergedListboxRef,
     open,
@@ -300,0 +304,0 @@ options: optionValues,

node/useSlider/useSlider.js

@@ -192,3 +192,3 @@ "use strict";
     orientation = 'horizontal',
-    ref,
+    rootRef: ref,
     scale = Identity,
@@ -626,2 +626,3 @@ step = 1,
     range,
+    rootRef: handleRef,
     trackLeap,
@@ -628,0 +629,0 @@ trackOffset,

node/useSnackbar/useSnackbar.js

@@ -31,3 +31,2 @@ "use strict";
     open,
-    ref,
     resumeHideDuration
@@ -131,3 +130,2 @@ } = parameters;
     return (0, _extends2.default)({
-      ref,
       // ClickAwayListener adds an `onClick` prop which results in the alert not being announced.
@@ -134,0 +132,0 @@ // See https://github.com/mui/material-ui/issues/29080

node/useSwitch/useSwitch.js

@@ -89,3 +89,3 @@ "use strict";
   };
-  const handleRefChange = (0, _utils.unstable_useForkRef)(focusVisibleRef, inputRef);
+  const handleInputRef = (0, _utils.unstable_useForkRef)(focusVisibleRef, inputRef);
   const getInputProps = (otherProps = {}) => (0, _extends2.default)({
@@ -96,3 +96,3 @@ checked: checkedProp,
     readOnly,
-    ref: handleRefChange,
+    ref: handleInputRef,
     required,
@@ -110,4 +110,5 @@ type: 'checkbox'
     getInputProps,
+    inputRef: handleInputRef,
     readOnly: Boolean(readOnly)
   };
 }

node/useTab/useTab.js

@@ -34,3 +34,3 @@ "use strict";
     value: valueParam,
-    ref: externalRef,
+    rootRef: externalRef,
     disabled = false,
@@ -58,3 +58,3 @@ id: idParam
     getRootProps: getTabProps,
-    ref: listItemRefHandler,
+    rootRef: listItemRefHandler,
     highlighted,
@@ -67,3 +67,3 @@ selected
     getRootProps: getButtonProps,
-    ref: buttonRefHandler,
+    rootRef: buttonRefHandler,
     active,
@@ -96,2 +96,3 @@ focusVisible,
     index,
+    rootRef: handleRef,
     // the `selected` state isn't set on the server (it relies on effects to be calculated),
@@ -98,0 +99,0 @@ // so we fall back to checking the `value` prop with the selectedValue from the TabsContext

node/useTabsList/useTabsList.js

@@ -30,3 +30,3 @@ "use strict";
   const {
-    ref: externalRef
+    rootRef: externalRef
   } = parameters;
@@ -90,3 +90,4 @@ const {
       selectedValues
-    }
+    },
+    rootRef: mergedRootRef
   } = (0, _useList.default)({
@@ -99,3 +100,3 @@ controlledProps,
     items: subitemKeys,
-    listRef: externalRef,
+    rootRef: externalRef,
     onChange: handleChange,
@@ -129,9 +130,10 @@ orientation: listOrientation,
   return {
+    contextValue: (0, _extends2.default)({}, compoundComponentContextValue, listContextValue),
     dispatch,
+    getRootProps,
+    highlightedValue,
     isRtl,
     orientation,
-    selectedValue: (_selectedValues$ = selectedValues[0]) != null ? _selectedValues$ : null,
-    highlightedValue,
-    getRootProps,
-    contextValue: (0, _extends2.default)({}, compoundComponentContextValue, listContextValue)
+    rootRef: mergedRootRef,
+    selectedValue: (_selectedValues$ = selectedValues[0]) != null ? _selectedValues$ : null
   };
@@ -138,0 +140,0 @@ }

node/utils/appendOwnerState.js

@@ -11,2 +11,8 @@ "use strict";
 /**
+ * Type of the ownerState based on the type of an element it applies to.
+ * This resolves to the provided OwnerState for React components and `undefined` for host components.
+ * Falls back to `OwnerState | undefined` when the exact type can't be determined in development time.
+ */
+
+/**
  * Appends the ownerState object to the props, merging with the existing one if necessary.
@@ -13,0 +19,0 @@ *

node/utils/index.js

@@ -73,2 +73,14 @@ "use strict";
 var _mergeSlotProps = _interopRequireDefault(require("./mergeSlotProps"));
+var _PolymorphicComponent = require("./PolymorphicComponent");
+Object.keys(_PolymorphicComponent).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _PolymorphicComponent[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _PolymorphicComponent[key];
+    }
+  });
+});
 var _types = require("./types");
@@ -75,0 +87,0 @@ Object.keys(_types).forEach(function (key) {

node/utils/useCompoundItem.js

@@ -12,2 +12,14 @@ "use strict";
 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; }
+/**
+ * Registers a child component with the parent component.
+ *
+ * @param id A unique key for the child component. If the `id` is `undefined`, the registration logic will not run (this can sometimes be the case during SSR).
+ * @param itemMetadata Arbitrary metadata to pass to the parent component. This should be a stable reference (e.g. a memoized object), to avoid unnecessary re-registrations.
+ * @param missingKeyGenerator A function that generates a unique id for the item.
+ *   It is called with the set of the ids of all the items that have already been registered.
+ *   Return `existingKeys.size` if you want to use the index of the new item as the id.
+ *
+ * @ignore - internal hook.
+ */
+
 function useCompoundItem(id, itemMetadata, missingKeyGenerator) {
@@ -14,0 +26,0 @@ const context = React.useContext(_useCompound.CompoundComponentContext);

NoSsr/index.d.ts

 export { default } from './NoSsr';
 export * from './NoSsr.types';

NoSsr/NoSsr.d.ts

@@ -0,0 +0,0 @@ /// <reference types="react" />

NoSsr/NoSsr.types.d.ts

@@ -0,0 +0,0 @@ import * as React from 'react';

Option/index.d.ts

@@ -0,0 +0,0 @@ export { default } from './Option';

Option/Option.d.ts

@@ -0,0 +0,0 @@ import { OptionType } from './Option.types';

Option/Option.js

 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["children", "component", "disabled", "label", "slotProps", "slots", "value"];
+const _excluded = ["children", "disabled", "label", "slotProps", "slots", "value"];
 import * as React from 'react';
@@ -28,7 +28,6 @@ import PropTypes from 'prop-types';
  */
-const Option = /*#__PURE__*/React.forwardRef(function Option(props, ref) {
-  var _optionRef$current;
+const Option = /*#__PURE__*/React.forwardRef(function Option(props, forwardedRef) {
+  var _slots$root, _optionRef$current;
   const {
       children,
-      component,
       disabled = false,
@@ -41,5 +40,5 @@ label,
     other = _objectWithoutPropertiesLoose(props, _excluded);
-  const Root = component || slots.root || 'li';
+  const Root = (_slots$root = slots.root) != null ? _slots$root : 'li';
   const optionRef = React.useRef(null);
-  const combinedRef = useForkRef(optionRef, ref);
+  const combinedRef = useForkRef(optionRef, forwardedRef);
 
@@ -57,3 +56,3 @@ // If `label` is not explicitly provided, the `children` are used for convenience.
     label: computedLabel,
-    optionRef: combinedRef,
+    rootRef: combinedRef,
     value
@@ -90,7 +89,2 @@ });
   /**
-   * The component used for the root node.
-   * Either a string to use a HTML element or a component.
-   */
-  component: PropTypes.elementType,
-  /**
    * If `true`, the option will be disabled.
@@ -97,0 +91,0 @@ * @default false

Option/Option.types.d.ts

 import * as React from 'react';
-import { DefaultComponentProps, OverrideProps, Simplify } from '@mui/types';
+import { Simplify } from '@mui/types';
 import { UseOptionRootSlotProps } from '../useOption';
-import { SlotComponentProps } from '../utils';
+import { PolymorphicProps, SlotComponentProps } from '../utils';
 export interface OptionRootSlotPropsOverrides {
@@ -45,19 +45,11 @@ }
 }
-export interface OptionTypeMap<OptionValue, P = {}, D extends React.ElementType = 'li'> {
-    props: P & OptionOwnProps<OptionValue>;
-    defaultComponent: D;
+export interface OptionTypeMap<OptionValue, AdditionalProps = {}, RootComponentType extends React.ElementType = 'li'> {
+    props: OptionOwnProps<OptionValue> & AdditionalProps;
+    defaultComponent: RootComponentType;
 }
-export type OptionProps<OptionValue, D extends React.ElementType = OptionTypeMap<OptionValue>['defaultComponent']> = OverrideProps<OptionTypeMap<OptionValue, {}, D>, D> & {
-    component?: D;
-};
+export type OptionProps<OptionValue, RootComponentType extends React.ElementType = OptionTypeMap<OptionValue>['defaultComponent']> = PolymorphicProps<OptionTypeMap<OptionValue, {}, RootComponentType>, RootComponentType>;
 export interface OptionType {
-    <OptionValue, 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;
-    } & OverrideProps<OptionTypeMap<OptionValue>, C>): JSX.Element | null;
-    <OptionValue>(props: DefaultComponentProps<OptionTypeMap<OptionValue>>): JSX.Element | null;
+    <OptionValue, RootComponentType extends React.ElementType = OptionTypeMap<OptionValue>['defaultComponent']>(props: PolymorphicProps<OptionTypeMap<OptionValue>, RootComponentType>): JSX.Element | null;
     propTypes?: any;
+    displayName?: string | undefined;
 }
@@ -64,0 +56,0 @@ export type OptionOwnerState<OptionValue> = Simplify<OptionOwnProps<OptionValue> & {

Option/optionClasses.d.ts

@@ -0,0 +0,0 @@ export interface OptionClasses {

OptionGroup/index.d.ts

@@ -0,0 +0,0 @@ export { default } from './OptionGroup';

OptionGroup/OptionGroup.d.ts

@@ -1,2 +0,2 @@
-import { OverridableComponent } from '@mui/types';
+import { PolymorphicComponent } from '../utils/PolymorphicComponent';
 import { OptionGroupTypeMap } from './OptionGroup.types';
@@ -14,3 +14,3 @@ /**
  */
-declare const OptionGroup: OverridableComponent<OptionGroupTypeMap<{}, "li">>;
+declare const OptionGroup: PolymorphicComponent<OptionGroupTypeMap<{}, "li">>;
 export default OptionGroup;

OptionGroup/OptionGroup.js

 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["component", "disabled", "slotProps", "slots"];
+const _excluded = ["disabled", "slotProps", "slots"];
 import * as React from 'react';
@@ -32,5 +32,4 @@ import PropTypes from 'prop-types';
  */
-const OptionGroup = /*#__PURE__*/React.forwardRef(function OptionGroup(props, ref) {
+const OptionGroup = /*#__PURE__*/React.forwardRef(function OptionGroup(props, forwardedRef) {
   const {
-      component,
       disabled = false,
@@ -41,3 +40,3 @@ slotProps = {},
     other = _objectWithoutPropertiesLoose(props, _excluded);
-  const Root = component || (slots == null ? void 0 : slots.root) || 'li';
+  const Root = (slots == null ? void 0 : slots.root) || 'li';
   const Label = (slots == null ? void 0 : slots.label) || 'span';
@@ -51,3 +50,3 @@ const List = (slots == null ? void 0 : slots.list) || 'ul';
     additionalProps: {
-      ref
+      ref: forwardedRef
     },
@@ -87,7 +86,2 @@ ownerState: props,
   /**
-   * The component used for the root node.
-   * Either a string to use a HTML element or a component.
-   */
-  component: PropTypes.elementType,
-  /**
    * If `true` all the options in the group will be disabled.
@@ -94,0 +88,0 @@ * @default false

OptionGroup/OptionGroup.types.d.ts

@@ -1,4 +0,3 @@
-import { OverrideProps } from '@mui/types';
 import * as React from 'react';
-import { SlotComponentProps } from '../utils';
+import { PolymorphicProps, SlotComponentProps } from '../utils';
 export interface OptionGroupRootSlotPropsOverrides {
@@ -55,9 +54,7 @@ }
 }
-export interface OptionGroupTypeMap<P = {}, D extends React.ElementType = 'li'> {
-    props: P & OptionGroupOwnProps;
-    defaultComponent: D;
+export interface OptionGroupTypeMap<AdditionalProps = {}, RootComponentType extends React.ElementType = 'li'> {
+    props: OptionGroupOwnProps & AdditionalProps;
+    defaultComponent: RootComponentType;
 }
-export type OptionGroupProps<D extends React.ElementType = OptionGroupTypeMap['defaultComponent']> = OverrideProps<OptionGroupTypeMap<{}, D>, D> & {
-    component?: D;
-};
+export type OptionGroupProps<RootComponentType extends React.ElementType = OptionGroupTypeMap['defaultComponent']> = PolymorphicProps<OptionGroupTypeMap<{}, RootComponentType>, RootComponentType>;
 export type OptionGroupOwnerState = OptionGroupOwnProps;
@@ -64,0 +61,0 @@ export type OptionGroupRootSlotProps = {

OptionGroup/optionGroupClasses.d.ts

@@ -0,0 +0,0 @@ export interface OptionGroupClasses {

package.json

 {
   "name": "@mui/base",
-  "version": "5.0.0-alpha.127",
+  "version": "5.0.0-alpha.128",
   "private": false,
@@ -43,3 +43,3 @@ "author": "MUI Team",
     "@mui/types": "^7.2.4",
-    "@mui/utils": "^5.12.0",
+    "@mui/utils": "^5.12.3",
     "@popperjs/core": "^2.11.7",
@@ -46,0 +46,0 @@ "clsx": "^1.2.1",

Popper/index.d.ts

@@ -0,0 +0,0 @@ export { default } from './Popper';

Popper/Popper.d.ts

@@ -1,2 +0,2 @@
-import { OverridableComponent } from '@mui/types';
+import { PolymorphicComponent } from '../utils';
 import { PopperTypeMap } from './Popper.types';
@@ -14,3 +14,3 @@ /**
  */
-declare const Popper: OverridableComponent<PopperTypeMap<{}, "div">>;
+declare const Popper: PolymorphicComponent<PopperTypeMap<{}, "div">>;
 export default Popper;

Popper/Popper.js

 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["anchorEl", "children", "component", "direction", "disablePortal", "modifiers", "open", "placement", "popperOptions", "popperRef", "slotProps", "slots", "TransitionProps", "ownerState"],
+const _excluded = ["anchorEl", "children", "direction", "disablePortal", "modifiers", "open", "placement", "popperOptions", "popperRef", "slotProps", "slots", "TransitionProps", "ownerState"],
   _excluded2 = ["anchorEl", "children", "container", "direction", "disablePortal", "keepMounted", "modifiers", "open", "placement", "popperOptions", "popperRef", "style", "transition", "slotProps", "slots"];
@@ -48,8 +48,7 @@ import * as React from 'react';
 const defaultPopperOptions = {};
-const PopperTooltip = /*#__PURE__*/React.forwardRef(function PopperTooltip(props, ref) {
-  var _ref;
+const PopperTooltip = /*#__PURE__*/React.forwardRef(function PopperTooltip(props, forwardedRef) {
+  var _slots$root;
   const {
       anchorEl,
       children,
-      component,
       direction,
@@ -65,6 +64,8 @@ disablePortal,
       TransitionProps
+      // @ts-ignore internal logic
+      // prevent from spreading to DOM, it can come from the parent component e.g. Select.
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
   const tooltipRef = React.useRef(null);
-  const ownRef = useForkRef(tooltipRef, ref);
+  const ownRef = useForkRef(tooltipRef, forwardedRef);
   const popperRef = React.useRef(null);
@@ -153,3 +154,3 @@ const handlePopperRef = useForkRef(popperRef, popperRefProp);
   const classes = useUtilityClasses();
-  const Root = (_ref = component != null ? component : slots.root) != null ? _ref : 'div';
+  const Root = (_slots$root = slots.root) != null ? _slots$root : 'div';
   const rootProps = useSlotProps({
@@ -182,3 +183,3 @@ elementType: Root,
  */
-const Popper = /*#__PURE__*/React.forwardRef(function Popper(props, ref) {
+const Popper = /*#__PURE__*/React.forwardRef(function Popper(props, forwardedRef) {
   const {
@@ -237,3 +238,3 @@ anchorEl,
       modifiers: modifiers,
-      ref: ref,
+      ref: forwardedRef,
       open: transition ? !exited : open,
@@ -372,6 +373,2 @@ placement: placement,
   /**
-   * @ignore
-   */
-  style: PropTypes.object,
-  /**
    * Help supporting a react-transition-group/Transition component.
@@ -378,0 +375,0 @@ * @default false

Popper/Popper.types.d.ts

@@ -1,6 +0,5 @@
-import { OverrideProps } from '@mui/types';
+import * as React from 'react';
 import { Instance, Options, OptionsGeneric, VirtualElement } from '@popperjs/core';
-import * as React from 'react';
 import { PortalProps } from '../Portal';
-import { SlotComponentProps } from '../utils';
+import { PolymorphicProps, SlotComponentProps } from '../utils';
 export type PopperPlacementType = Options['placement'];
@@ -110,19 +109,15 @@ export interface PopperRootSlotPropsOverrides {
 export type PopperOwnerState = PopperOwnProps;
-export interface PopperTypeMap<P = {}, D extends React.ElementType = 'div'> {
-    props: P & PopperOwnProps;
-    defaultComponent: D;
+export interface PopperTypeMap<AdditionalProps = {}, RootComponentType extends React.ElementType = 'div'> {
+    props: PopperOwnProps & AdditionalProps;
+    defaultComponent: RootComponentType;
 }
-export type PopperProps<D extends React.ElementType = PopperTypeMap['defaultComponent'], P = {}> = OverrideProps<PopperTypeMap<P, D>, D> & {
-    component?: D;
-};
+export type PopperProps<RootComponentType extends React.ElementType = PopperTypeMap['defaultComponent']> = PolymorphicProps<PopperTypeMap<{}, RootComponentType>, RootComponentType>;
 export type PopperTooltipOwnProps = Omit<PopperOwnProps, 'container' | 'keepMounted' | 'transition'> & {
     TransitionProps?: PopperTransitionProps;
 };
-export interface PopperTooltipTypeMap<P = {}, D extends React.ElementType = 'div'> {
-    props: P & PopperTooltipOwnProps;
-    defaultComponent: D;
+export interface PopperTooltipTypeMap<AdditionalProps = {}, RootComponentType extends React.ElementType = 'div'> {
+    props: PopperTooltipOwnProps & AdditionalProps;
+    defaultComponent: RootComponentType;
 }
-export type PopperTooltipProps<D extends React.ElementType = PopperTooltipTypeMap['defaultComponent'], P = {}> = OverrideProps<PopperTooltipTypeMap<P, D>, D> & {
-    component?: D;
-};
+export type PopperTooltipProps<RootComponentType extends React.ElementType = PopperTooltipTypeMap['defaultComponent']> = PolymorphicProps<PopperTooltipTypeMap<{}, RootComponentType>, RootComponentType>;
 export interface PopperRootSlotProps {
@@ -129,0 +124,0 @@ className?: string;

Popper/popperClasses.d.ts

@@ -0,0 +0,0 @@ export interface PopperClasses {

Portal/index.d.ts

 export { default } from './Portal';
 export * from './Portal.types';

Portal/Portal.d.ts

@@ -0,0 +0,0 @@ import * as React from 'react';

Portal/Portal.js

@@ -22,3 +22,3 @@ import * as React from 'react';
  */
-const Portal = /*#__PURE__*/React.forwardRef(function Portal(props, ref) {
+const Portal = /*#__PURE__*/React.forwardRef(function Portal(props, forwardedRef) {
   const {
@@ -31,3 +31,3 @@ children,
   // @ts-expect-error TODO upstream fix
-  const handleRef = useForkRef( /*#__PURE__*/React.isValidElement(children) ? children.ref : null, ref);
+  const handleRef = useForkRef( /*#__PURE__*/React.isValidElement(children) ? children.ref : null, forwardedRef);
   useEnhancedEffect(() => {
@@ -40,9 +40,9 @@ if (!disablePortal) {
     if (mountNode && !disablePortal) {
-      setRef(ref, mountNode);
+      setRef(forwardedRef, mountNode);
       return () => {
-        setRef(ref, null);
+        setRef(forwardedRef, null);
       };
     }
     return undefined;
-  }, [ref, mountNode, disablePortal]);
+  }, [forwardedRef, mountNode, disablePortal]);
   if (disablePortal) {
@@ -49,0 +49,0 @@ if ( /*#__PURE__*/React.isValidElement(children)) {

Portal/Portal.types.d.ts

@@ -0,0 +0,0 @@ import * as React from 'react';

Select/index.d.ts

@@ -0,0 +0,0 @@ export { default } from './Select';

Select/Select.d.ts

@@ -0,0 +0,0 @@ import { SelectType } from './Select.types';

Select/Select.js

 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["autoFocus", "children", "component", "defaultValue", "defaultListboxOpen", "disabled", "getSerializedValue", "listboxId", "listboxOpen", "multiple", "name", "onChange", "onListboxOpenChange", "optionStringifier", "renderValue", "slotProps", "slots", "value"];
+const _excluded = ["autoFocus", "children", "defaultValue", "defaultListboxOpen", "disabled", "getSerializedValue", "listboxId", "listboxOpen", "multiple", "name", "onChange", "onListboxOpenChange", "optionStringifier", "renderValue", "slotProps", "slots", "value"];
 import * as React from 'react';
@@ -71,7 +71,6 @@ import PropTypes from 'prop-types';
 const Select = /*#__PURE__*/React.forwardRef(function Select(props, forwardedRef) {
-  var _ref, _slots$listbox, _slots$popper;
+  var _slots$root, _slots$listbox, _slots$popper;
   const {
       autoFocus,
       children,
-      component,
       defaultValue,
@@ -98,3 +97,3 @@ defaultListboxOpen = false,
   const listboxRef = React.useRef(null);
-  const Button = (_ref = component != null ? component : slots.root) != null ? _ref : 'button';
+  const Button = (_slots$root = slots.root) != null ? _slots$root : 'button';
   const ListboxRoot = (_slots$listbox = slots.listbox) != null ? _slots$listbox : 'ul';
@@ -215,7 +214,2 @@ const PopperComponent = (_slots$popper = slots.popper) != null ? _slots$popper : Popper;
   /**
-   * The component used for the root node.
-   * Either a string to use a HTML element or a component.
-   */
-  component: PropTypes.elementType,
-  /**
    * If `true`, the select will be initially open.
@@ -286,3 +280,3 @@ * @default false
    */
-  slotProps: PropTypes.shape({
+  slotProps: PropTypes /* @typescript-to-proptypes-ignore */.shape({
     listbox: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
@@ -289,0 +283,0 @@ popper: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),

Select/Select.types.d.ts

 import * as React from 'react';
-import { DefaultComponentProps, OverrideProps, Simplify } from '@mui/types';
+import { Simplify } from '@mui/types';
 import { SelectValue, UseSelectButtonSlotProps, UseSelectListboxSlotProps } from '../useSelect';
 import { SelectOption } from '../useOption';
 import Popper, { PopperProps } from '../Popper';
-import { SlotComponentProps, WithOptionalOwnerState } from '../utils';
+import { PolymorphicProps, SlotComponentProps, WithOptionalOwnerState } from '../utils';
 export interface SelectRootSlotPropsOverrides {
@@ -121,21 +121,13 @@ }
 }
-export interface SelectTypeMap<OptionValue extends {}, Multiple extends boolean, P = {}, D extends React.ElementType = 'button'> {
-    props: P & SelectOwnProps<OptionValue, Multiple>;
-    defaultComponent: D;
+export interface SelectTypeMap<OptionValue extends {}, Multiple extends boolean, AdditionalProps = {}, RootComponentType extends React.ElementType = 'button'> {
+    props: SelectOwnProps<OptionValue, Multiple> & AdditionalProps;
+    defaultComponent: RootComponentType;
 }
-export type SelectProps<OptionValue extends {}, Multiple extends boolean, D extends React.ElementType = SelectTypeMap<OptionValue, Multiple>['defaultComponent']> = OverrideProps<SelectTypeMap<OptionValue, Multiple, {}, D>, D> & {
-    component?: D;
-};
+export type SelectProps<OptionValue extends {}, Multiple extends boolean, RootComponentType extends React.ElementType = SelectTypeMap<OptionValue, Multiple>['defaultComponent']> = PolymorphicProps<SelectTypeMap<OptionValue, Multiple, {}, RootComponentType>, RootComponentType>;
 export interface SelectType {
-    <OptionValue extends {}, C extends React.ElementType, Multiple extends boolean = false>(props: {
-        /**
-         * The component used for the root node.
-         * Either a string to use a HTML element or a component.
-         */
-        component: C;
-    } & OverrideProps<SelectTypeMap<OptionValue, Multiple>, C>): JSX.Element | null;
-    <OptionValue extends {}, Multiple extends boolean = false>(props: DefaultComponentProps<SelectTypeMap<OptionValue, Multiple>>): JSX.Element | null;
+    <OptionValue extends {}, Multiple extends boolean = false, RootComponentType extends React.ElementType = SelectTypeMap<OptionValue, Multiple>['defaultComponent']>(props: PolymorphicProps<SelectTypeMap<OptionValue, Multiple>, RootComponentType>): JSX.Element | null;
     propTypes?: any;
+    displayName?: string | undefined;
 }
-export interface SelectOwnerState<OptionValue extends {}, Multiple extends boolean> extends SelectOwnProps<OptionValue, Multiple> {
+export type SelectOwnerState<OptionValue extends {}, Multiple extends boolean> = Simplify<SelectOwnProps<OptionValue, Multiple> & {
     active: boolean;
@@ -145,3 +137,3 @@ disabled: boolean;
     open: boolean;
-}
+}>;
 export type SelectRootSlotProps<OptionValue extends {}, Multiple extends boolean> = Simplify<UseSelectButtonSlotProps & {
@@ -148,0 +140,0 @@ className?: string;

Select/selectClasses.d.ts

@@ -0,0 +0,0 @@ export interface SelectClasses {

Slider/index.d.ts

@@ -0,0 +0,0 @@ export { default } from './Slider';

Slider/Slider.d.ts

@@ -1,2 +0,2 @@
-import { OverridableComponent } from '@mui/types';
+import { PolymorphicComponent } from '../utils/PolymorphicComponent';
 import { SliderTypeMap } from './Slider.types';
@@ -13,3 +13,3 @@ /**
  */
-declare const Slider: OverridableComponent<SliderTypeMap<{}, "span">>;
+declare const Slider: PolymorphicComponent<SliderTypeMap<{}, "span">>;
 export default Slider;

Slider/Slider.js

 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["aria-label", "aria-valuetext", "aria-labelledby", "className", "component", "disableSwap", "disabled", "getAriaLabel", "getAriaValueText", "marks", "max", "min", "name", "onChange", "onChangeCommitted", "orientation", "scale", "step", "tabIndex", "track", "value", "valueLabelFormat", "isRtl", "defaultValue", "slotProps", "slots"];
+const _excluded = ["aria-label", "aria-valuetext", "aria-labelledby", "className", "disableSwap", "disabled", "getAriaLabel", "getAriaValueText", "marks", "max", "min", "name", "onChange", "onChangeCommitted", "orientation", "scale", "step", "tabIndex", "track", "value", "valueLabelFormat", "isRtl", "defaultValue", "slotProps", "slots"];
 import * as React from 'react';
@@ -56,4 +56,4 @@ import PropTypes from 'prop-types';
  */
-const Slider = /*#__PURE__*/React.forwardRef(function Slider(props, ref) {
-  var _ref, _slots$rail, _slots$track, _slots$thumb, _slots$mark, _slots$markLabel;
+const Slider = /*#__PURE__*/React.forwardRef(function Slider(props, forwardedRef) {
+  var _slots$root, _slots$rail, _slots$track, _slots$thumb, _slots$mark, _slots$markLabel;
   const {
@@ -64,3 +64,2 @@ 'aria-label': ariaLabel,
       className,
-      component,
       disableSwap = false,
@@ -115,3 +114,3 @@ disabled = false,
   } = useSlider(_extends({}, partialOwnerState, {
-    ref
+    rootRef: forwardedRef
   }));
@@ -124,3 +123,3 @@ const ownerState = _extends({}, partialOwnerState, {
   const classes = useUtilityClasses(ownerState);
-  const Root = (_ref = component != null ? component : slots.root) != null ? _ref : 'span';
+  const Root = (_slots$root = slots.root) != null ? _slots$root : 'span';
   const rootProps = useSlotProps({
@@ -271,15 +270,2 @@ elementType: Root,
   /**
-   * @ignore
-   */
-  children: PropTypes.node,
-  /**
-   * @ignore
-   */
-  className: PropTypes.string,
-  /**
-   * The component used for the root node.
-   * Either a string to use a HTML element or a component.
-   */
-  component: PropTypes.elementType,
-  /**
    * The default value. Use when the component is not controlled.
@@ -286,0 +272,0 @@ */

Slider/Slider.types.d.ts

@@ -1,6 +0,6 @@
-import { OverridableComponent, OverridableTypeMap, OverrideProps } from '@mui/types';
+import { OverridableComponent, OverridableTypeMap, Simplify } from '@mui/types';
 import * as React from 'react';
-import { SlotComponentProps } from '../utils';
+import { PolymorphicProps, SlotComponentProps } from '../utils';
 import { UseSliderHiddenInputProps, UseSliderParameters, UseSliderRootSlotProps, UseSliderThumbSlotProps } from '../useSlider';
-export interface SliderOwnerState extends SliderOwnProps {
+export type SliderOwnerState = Simplify<SliderOwnProps & {
     disabled: boolean;
@@ -18,3 +18,3 @@ focusedThumbIndex: number;
     valueLabelFormat: string | ((value: number, index: number) => React.ReactNode);
-}
+}>;
 export interface SliderRootSlotPropsOverrides {
@@ -145,5 +145,5 @@ }
 }
-export interface SliderTypeMap<P = {}, D extends React.ElementType = 'span'> {
-    props: P & SliderOwnProps;
-    defaultComponent: D;
+export interface SliderTypeMap<AdditionalProps = {}, RootComponentType extends React.ElementType = 'span'> {
+    props: SliderOwnProps & AdditionalProps;
+    defaultComponent: RootComponentType;
 }
@@ -158,5 +158,3 @@ /**
 export type ExtendSlider<M extends OverridableTypeMap> = OverridableComponent<ExtendSliderTypeMap<M>>;
-export type SliderProps<D extends React.ElementType = SliderTypeMap['defaultComponent']> = OverrideProps<SliderTypeMap<{}, D>, D> & {
-    component?: D;
-};
+export type SliderProps<RootComponentType extends React.ElementType = SliderTypeMap['defaultComponent']> = PolymorphicProps<SliderTypeMap<{}, RootComponentType>, RootComponentType>;
 export type SliderRootSlotProps = UseSliderRootSlotProps & {
@@ -163,0 +161,0 @@ children: React.ReactNode;

Slider/sliderClasses.d.ts

@@ -0,0 +0,0 @@ export interface SliderClasses {

Snackbar/index.d.ts

@@ -0,0 +0,0 @@ export { default } from './Snackbar';

Snackbar/Snackbar.d.ts

@@ -1,3 +0,3 @@
-import { OverridableComponent } from '@mui/types';
 import { SnackbarTypeMap } from './Snackbar.types';
+import { PolymorphicComponent } from '../utils';
 /**
@@ -14,3 +14,3 @@ *
  */
-declare const Snackbar: OverridableComponent<SnackbarTypeMap<{}, "div">>;
+declare const Snackbar: PolymorphicComponent<SnackbarTypeMap<{}, "div">>;
 export default Snackbar;

Snackbar/Snackbar.js

 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["autoHideDuration", "children", "component", "disableWindowBlurListener", "exited", "onBlur", "onClose", "onFocus", "onMouseEnter", "onMouseLeave", "open", "resumeHideDuration", "slotProps", "slots"];
+const _excluded = ["autoHideDuration", "children", "disableWindowBlurListener", "exited", "onBlur", "onClose", "onFocus", "onMouseEnter", "onMouseLeave", "open", "resumeHideDuration", "slotProps", "slots"];
 import * as React from 'react';
@@ -30,7 +30,6 @@ import PropTypes from 'prop-types';
  */
-const Snackbar = /*#__PURE__*/React.forwardRef(function Snackbar(props, ref) {
+const Snackbar = /*#__PURE__*/React.forwardRef(function Snackbar(props, forwardedRef) {
   const {
       autoHideDuration = null,
       children,
-      component,
       disableWindowBlurListener = false,
@@ -54,7 +53,6 @@ exited = true,
     open,
-    resumeHideDuration,
-    ref
+    resumeHideDuration
   }));
   const ownerState = props;
-  const Root = component || slots.root || 'div';
+  const Root = slots.root || 'div';
   const rootProps = useSlotProps({
@@ -66,3 +64,3 @@ elementType: Root,
     additionalProps: {
-      ref
+      ref: forwardedRef
     },
@@ -112,7 +110,2 @@ ownerState,
   /**
-   * The component used for the root node.
-   * Either a string to use a HTML element or a component.
-   */
-  component: PropTypes.elementType,
-  /**
    * If `true`, the `autoHideDuration` timer will expire even if the window is not focused.
@@ -128,6 +121,2 @@ * @default false
   /**
-   * @ignore
-   */
-  onBlur: PropTypes.func,
-  /**
    * Callback fired when the component requests to be closed.
@@ -144,14 +133,2 @@ * Typically `onClose` is used to set state in the parent component,
   /**
-   * @ignore
-   */
-  onFocus: PropTypes.func,
-  /**
-   * @ignore
-   */
-  onMouseEnter: PropTypes.func,
-  /**
-   * @ignore
-   */
-  onMouseLeave: PropTypes.func,
-  /**
    * If `true`, the component is shown.
@@ -158,0 +135,0 @@ */

Snackbar/Snackbar.types.d.ts

 import * as React from 'react';
-import { OverrideProps } from '@mui/types';
 import ClickAwayListener, { ClickAwayListenerProps } from '../ClickAwayListener';
 import { UseSnackbarParameters } from '../useSnackbar';
-import { SlotComponentProps } from '../utils';
+import { PolymorphicProps, SlotComponentProps } from '../utils';
 export interface SnackbarRootSlotPropsOverrides {
@@ -39,10 +38,8 @@ }
 }
-export interface SnackbarTypeMap<P = {}, D extends React.ElementType = 'div'> {
-    props: P & SnackbarOwnProps;
-    defaultComponent: D;
+export interface SnackbarTypeMap<AdditionalProps = {}, RootComponentType extends React.ElementType = 'div'> {
+    props: SnackbarOwnProps & AdditionalProps;
+    defaultComponent: RootComponentType;
 }
-export type SnackbarProps<D extends React.ElementType = SnackbarTypeMap['defaultComponent'], P = {}> = OverrideProps<SnackbarTypeMap<P, D>, D> & {
-    component?: D;
-};
-export type SnackbarOwnerState = SnackbarProps;
+export type SnackbarProps<RootComponentType extends React.ElementType = SnackbarTypeMap['defaultComponent']> = PolymorphicProps<SnackbarTypeMap<{}, RootComponentType>, RootComponentType>;
+export type SnackbarOwnerState = SnackbarOwnProps;
 export type SnackbarRootSlotProps = {
@@ -49,0 +46,0 @@ ownerState: SnackbarOwnerState;

Snackbar/snackbarClasses.d.ts

@@ -0,0 +0,0 @@ export interface SnackbarClasses {

Switch/index.d.ts

@@ -0,0 +0,0 @@ export { default } from './Switch';

Switch/Switch.d.ts

@@ -1,2 +0,2 @@
-import { OverridableComponent } from '@mui/types';
+import { PolymorphicComponent } from '../utils/PolymorphicComponent';
 import { SwitchTypeMap } from './Switch.types';
@@ -14,3 +14,3 @@ /**
  */
-declare const Switch: OverridableComponent<SwitchTypeMap<{}, "span">>;
+declare const Switch: PolymorphicComponent<SwitchTypeMap<{}, "span">>;
 export default Switch;

Switch/Switch.js

 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["checked", "component", "defaultChecked", "disabled", "onBlur", "onChange", "onFocus", "onFocusVisible", "readOnly", "required", "slotProps", "slots"];
+const _excluded = ["checked", "defaultChecked", "disabled", "onBlur", "onChange", "onFocus", "onFocusVisible", "readOnly", "required", "slotProps", "slots"];
 import * as React from 'react';
@@ -40,7 +40,6 @@ import PropTypes from 'prop-types';
  */
-const Switch = /*#__PURE__*/React.forwardRef(function Switch(props, ref) {
-  var _ref, _slots$thumb, _slots$input, _slots$track;
+const Switch = /*#__PURE__*/React.forwardRef(function Switch(props, forwardedRef) {
+  var _slots$root, _slots$thumb, _slots$input, _slots$track;
   const {
       checked: checkedProp,
-      component,
       defaultChecked,
@@ -81,3 +80,3 @@ disabled: disabledProp,
   const classes = useUtilityClasses(ownerState);
-  const Root = (_ref = component != null ? component : slots.root) != null ? _ref : 'span';
+  const Root = (_slots$root = slots.root) != null ? _slots$root : 'span';
   const rootProps = useSlotProps({
@@ -88,3 +87,3 @@ elementType: Root,
     additionalProps: {
-      ref
+      ref: forwardedRef
     },
@@ -130,11 +129,2 @@ ownerState,
   /**
-   * @ignore
-   */
-  children: PropTypes.node,
-  /**
-   * The component used for the root node.
-   * Either a string to use a HTML element or a component.
-   */
-  component: PropTypes.elementType,
-  /**
    * The default checked state. Use when the component is not controlled.
@@ -150,6 +140,2 @@ */
    */
-  id: PropTypes.string,
-  /**
-   * @ignore
-   */
   onBlur: PropTypes.func,
@@ -156,0 +142,0 @@ /**

Switch/Switch.types.d.ts

 /// <reference types="react" />
-import { OverrideProps, Simplify } from '@mui/types';
-import { SlotComponentProps } from '../utils';
+import { Simplify } from '@mui/types';
+import { PolymorphicProps, SlotComponentProps } from '../utils';
 import { UseSwitchInputSlotProps, UseSwitchParameters } from '../useSwitch';
@@ -57,9 +57,7 @@ export interface SwitchRootSlotPropsOverrides {
 }
-export interface SwitchTypeMap<P = {}, D extends React.ElementType = 'span'> {
-    props: P & SwitchOwnProps;
-    defaultComponent: D;
+export interface SwitchTypeMap<AdditionalProps = {}, RootComponentType extends React.ElementType = 'span'> {
+    props: SwitchOwnProps & AdditionalProps;
+    defaultComponent: RootComponentType;
 }
-export type SwitchProps<D extends React.ElementType = SwitchTypeMap['defaultComponent']> = OverrideProps<SwitchTypeMap<{}, D>, D> & {
-    component?: D;
-};
+export type SwitchProps<RootComponentType extends React.ElementType = SwitchTypeMap['defaultComponent']> = PolymorphicProps<SwitchTypeMap<{}, RootComponentType>, RootComponentType>;
 export type SwitchOwnerState = Simplify<SwitchOwnProps & {
@@ -66,0 +64,0 @@ checked: boolean;

Switch/switchClasses.d.ts

@@ -0,0 +0,0 @@ export interface SwitchClasses {

Tab/index.d.ts

@@ -0,0 +0,0 @@ export { default } from './Tab';

Tab/Tab.d.ts

@@ -1,3 +0,3 @@
-import { OverridableComponent } from '@mui/types';
 import { TabTypeMap } from './Tab.types';
+import { PolymorphicComponent } from '../utils';
 /**
@@ -13,3 +13,3 @@ *
  */
-declare const Tab: OverridableComponent<TabTypeMap<{}, "button">>;
+declare const Tab: PolymorphicComponent<TabTypeMap<{}, "button">>;
 export default Tab;

Tab/Tab.js

 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["action", "children", "value", "disabled", "onChange", "onClick", "onFocus", "component", "slotProps", "slots"];
+const _excluded = ["action", "children", "value", "disabled", "onChange", "onClick", "onFocus", "slotProps", "slots"];
 import * as React from 'react';
@@ -33,8 +33,7 @@ import PropTypes from 'prop-types';
  */
-const Tab = /*#__PURE__*/React.forwardRef(function Tab(props, ref) {
-  var _ref;
+const Tab = /*#__PURE__*/React.forwardRef(function Tab(props, forwardedRef) {
+  var _slots$root;
   const {
       children,
       disabled = false,
-      component,
       slotProps = {},
@@ -45,3 +44,3 @@ slots = {}
   const tabRef = React.useRef();
-  const handleRef = useForkRef(tabRef, ref);
+  const handleRef = useForkRef(tabRef, forwardedRef);
   const {
@@ -53,3 +52,3 @@ active,
   } = useTab(_extends({}, props, {
-    ref: handleRef
+    rootRef: handleRef
   }));
@@ -63,3 +62,3 @@ const ownerState = _extends({}, props, {
   const classes = useUtilityClasses(ownerState);
-  const TabRoot = (_ref = component != null ? component : slots.root) != null ? _ref : 'button';
+  const TabRoot = (_slots$root = slots.root) != null ? _slots$root : 'button';
   const tabRootProps = useSlotProps({
@@ -71,3 +70,3 @@ elementType: TabRoot,
     additionalProps: {
-      ref
+      ref: forwardedRef
     },
@@ -99,7 +98,2 @@ ownerState,
   /**
-   * The component used for the root node.
-   * Either a string to use a HTML element or a component.
-   */
-  component: PropTypes.elementType,
-  /**
    * If `true`, the component is disabled.
@@ -114,10 +108,2 @@ * @default false
   /**
-   * @ignore
-   */
-  onClick: PropTypes.func,
-  /**
-   * @ignore
-   */
-  onFocus: PropTypes.func,
-  /**
    * The props used for each slot inside the Tab.
@@ -124,0 +110,0 @@ * @default {}

Tab/Tab.types.d.ts

@@ -1,2 +0,2 @@
-import { OverrideProps, Simplify } from '@mui/types';
+import { Simplify } from '@mui/types';
 import * as React from 'react';
@@ -6,2 +6,3 @@ import { ButtonOwnProps } from '../Button';
 import { UseTabRootSlotProps } from '../useTab';
+import { PolymorphicProps } from '../utils/PolymorphicComponent';
 export interface TabRootSlotPropsOverrides {
@@ -39,10 +40,8 @@ }
 }
-export type TabProps<D extends React.ElementType = TabTypeMap['defaultComponent'], P = {}> = OverrideProps<TabTypeMap<P, D>, D> & {
-    component?: D;
-};
-export interface TabTypeMap<P = {}, D extends React.ElementType = 'button'> {
-    props: P & TabOwnProps;
-    defaultComponent: D;
+export type TabProps<RootComponentType extends React.ElementType = TabTypeMap['defaultComponent']> = PolymorphicProps<TabTypeMap<{}, RootComponentType>, RootComponentType>;
+export interface TabTypeMap<AdditionalProps = {}, RootComponentType extends React.ElementType = 'button'> {
+    props: TabOwnProps & AdditionalProps;
+    defaultComponent: RootComponentType;
 }
-export type TabOwnerState = TabProps & {
+export type TabOwnerState = Simplify<TabOwnProps & {
     active: boolean;
@@ -52,3 +51,3 @@ disabled: boolean;
     selected: boolean;
-};
+}>;
 export type TabRootSlotProps = Simplify<UseTabRootSlotProps & {
@@ -55,0 +54,0 @@ className?: string;

Tab/tabClasses.d.ts

@@ -0,0 +0,0 @@ export interface TabClasses {

TablePagination/common.types.d.ts

 export type ItemAriaLabelType = 'first' | 'last' | 'next' | 'previous';

TablePagination/index.d.ts

@@ -0,0 +0,0 @@ export { default } from './TablePagination';

TablePagination/TablePagination.d.ts

@@ -1,2 +0,2 @@
-import { OverridableComponent } from '@mui/types';
+import { PolymorphicComponent } from '../utils';
 import { TablePaginationTypeMap } from './TablePagination.types';
@@ -14,3 +14,3 @@ /**
  */
-declare const TablePagination: OverridableComponent<TablePaginationTypeMap<{}, "td">>;
+declare const TablePagination: PolymorphicComponent<TablePaginationTypeMap<{}, "td">>;
 export default TablePagination;

TablePagination/TablePagination.js

 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["component", "colSpan", "count", "getItemAriaLabel", "labelDisplayedRows", "labelId", "labelRowsPerPage", "onPageChange", "onRowsPerPageChange", "page", "rowsPerPage", "rowsPerPageOptions", "selectId", "slotProps", "slots"];
+const _excluded = ["colSpan", "count", "getItemAriaLabel", "labelDisplayedRows", "labelId", "labelRowsPerPage", "onPageChange", "onRowsPerPageChange", "page", "rowsPerPage", "rowsPerPageOptions", "selectId", "slotProps", "slots"];
 import * as React from 'react';
@@ -53,6 +53,5 @@ import PropTypes from 'prop-types';
  */
-const TablePagination = /*#__PURE__*/React.forwardRef(function TablePagination(props, ref) {
-  var _ref, _slots$select, _slots$actions, _slots$menuItem, _slots$selectLabel, _slots$displayedRows, _slots$toolbar, _slots$spacer;
+const TablePagination = /*#__PURE__*/React.forwardRef(function TablePagination(props, forwardedRef) {
+  var _slots$root, _slots$select, _slots$actions, _slots$menuItem, _slots$selectLabel, _slots$displayedRows, _slots$toolbar, _slots$spacer;
   const {
-      component,
       colSpan: colSpanProp,
@@ -77,3 +76,4 @@ count,
   let colSpan;
-  if (!component || component === 'td' || !isHostComponent(component)) {
+  const Root = (_slots$root = slots.root) != null ? _slots$root : 'td';
+  if (Root === 'td' || !isHostComponent(Root)) {
     colSpan = colSpanProp || 1000; // col-span over everything
@@ -90,3 +90,2 @@ }
   const labelId = useId(labelIdProp);
-  const Root = (_ref = component != null ? component : slots.root) != null ? _ref : 'td';
   const rootProps = useSlotProps({
@@ -98,3 +97,3 @@ elementType: Root,
       colSpan,
-      ref
+      ref: forwardedRef
     },
@@ -201,13 +200,4 @@ ownerState,
    */
-  children: PropTypes.node,
-  /**
-   * @ignore
-   */
   colSpan: PropTypes.number,
   /**
-   * The component used for the root node.
-   * Either a string to use a HTML element or a component.
-   */
-  component: PropTypes.elementType,
-  /**
    * The total number of rows.
@@ -306,3 +296,3 @@ *
    */
-  slotProps: PropTypes.shape({
+  slotProps: PropTypes /* @typescript-to-proptypes-ignore */.shape({
     actions: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
@@ -309,0 +299,0 @@ displayedRows: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),

TablePagination/TablePagination.types.d.ts

 import * as React from 'react';
-import { OverrideProps } from '@mui/types';
-import { SlotComponentProps } from '../utils';
+import { PolymorphicProps, SlotComponentProps } from '../utils';
 import TablePaginationActions from './TablePaginationActions';
@@ -172,10 +171,8 @@ import { ItemAriaLabelType } from './common.types';
 }
-export interface TablePaginationTypeMap<P = {}, D extends React.ElementType = 'td'> {
-    props: P & TablePaginationOwnProps;
-    defaultComponent: D;
+export interface TablePaginationTypeMap<AdditionalProps = {}, RootComponentType extends React.ElementType = 'td'> {
+    props: TablePaginationOwnProps & AdditionalProps;
+    defaultComponent: RootComponentType;
 }
-export type TablePaginationProps<D extends React.ElementType = TablePaginationTypeMap['defaultComponent'], P = {}> = OverrideProps<TablePaginationTypeMap<P, D>, D> & {
-    component?: D;
-};
-export type TablePaginationOwnerState = TablePaginationProps;
+export type TablePaginationProps<RootComponentType extends React.ElementType = TablePaginationTypeMap['defaultComponent']> = PolymorphicProps<TablePaginationTypeMap<{}, RootComponentType>, RootComponentType>;
+export type TablePaginationOwnerState = TablePaginationOwnProps;
 export type TablePaginationRootSlotProps = {
@@ -182,0 +179,0 @@ children?: React.ReactNode;

TablePagination/TablePaginationActions.d.ts

@@ -1,2 +0,2 @@
-import { OverridableComponent } from '@mui/types';
+import { PolymorphicComponent } from '../utils';
 import { TablePaginationActionsTypeMap } from './TablePaginationActions.types';
@@ -6,3 +6,3 @@ /**
  */
-declare const TablePaginationActions: OverridableComponent<TablePaginationActionsTypeMap<{}, "button">>;
+declare const TablePaginationActions: PolymorphicComponent<TablePaginationActionsTypeMap<{}, "button">>;
 export default TablePaginationActions;

TablePagination/TablePaginationActions.js

 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["component", "count", "getItemAriaLabel", "onPageChange", "page", "rowsPerPage", "showFirstButton", "showLastButton", "direction", "ownerState", "slotProps", "slots"];
+const _excluded = ["count", "getItemAriaLabel", "onPageChange", "page", "rowsPerPage", "showFirstButton", "showLastButton", "direction", "ownerState", "slotProps", "slots"];
 var _span, _span2, _span3, _span4;
@@ -36,6 +36,5 @@ import * as React from 'react';
  */
-const TablePaginationActions = /*#__PURE__*/React.forwardRef(function TablePaginationActions(props, ref) {
-  var _ref, _slots$root, _slots$firstButton, _slots$lastButton, _slots$nextButton, _slots$backButton, _slots$lastPageIcon, _slots$firstPageIcon, _slots$nextPageIcon, _slots$backPageIcon;
+const TablePaginationActions = /*#__PURE__*/React.forwardRef(function TablePaginationActions(props, forwardedRef) {
+  var _slots$root, _slots$firstButton, _slots$lastButton, _slots$nextButton, _slots$backButton, _slots$lastPageIcon, _slots$firstPageIcon, _slots$nextPageIcon, _slots$backPageIcon;
   const {
-      component,
       count,
@@ -48,3 +47,6 @@ getItemAriaLabel = defaultGetAriaLabel,
       showLastButton = false,
-      direction,
+      direction
+      // @ts-ignore
+      ,
+
       slotProps = {},
@@ -67,3 +69,3 @@ slots = {}
   };
-  const Root = (_ref = (_slots$root = slots.root) != null ? _slots$root : component) != null ? _ref : 'div';
+  const Root = (_slots$root = slots.root) != null ? _slots$root : 'div';
   const rootProps = useSlotProps({
@@ -74,3 +76,3 @@ elementType: Root,
     additionalProps: {
-      ref
+      ref: forwardedRef
     },
@@ -77,0 +79,0 @@ ownerState

TablePagination/TablePaginationActions.types.d.ts

 import * as React from 'react';
-import { OverrideProps } from '@mui/types';
-import { SlotComponentProps } from '../utils';
+import { PolymorphicProps, SlotComponentProps } from '../utils';
 export interface TablePaginationActionsRootSlotPropsOverrides {
@@ -100,10 +99,8 @@ }
 }
-export type TablePaginationActionsProps<D extends React.ElementType = TablePaginationActionsTypeMap['defaultComponent'], P = {}> = OverrideProps<TablePaginationActionsTypeMap<P, D>, D> & {
-    component?: D;
-};
-export interface TablePaginationActionsTypeMap<P = {}, D extends React.ElementType = 'button'> {
-    props: P & TablePaginationActionsOwnProps;
-    defaultComponent: D;
+export type TablePaginationActionsProps<RootComponentType extends React.ElementType = TablePaginationActionsTypeMap['defaultComponent']> = PolymorphicProps<TablePaginationActionsTypeMap<{}, RootComponentType>, RootComponentType>;
+export interface TablePaginationActionsTypeMap<AdditionalProps = {}, RootComponentType extends React.ElementType = 'button'> {
+    props: TablePaginationActionsOwnProps & AdditionalProps;
+    defaultComponent: RootComponentType;
 }
-export type TablePaginationActionsOwnerState = TablePaginationActionsProps;
+export type TablePaginationActionsOwnerState = TablePaginationActionsOwnProps;
 export type TablePaginationActionsRootSlotProps = {
@@ -110,0 +107,0 @@ children?: React.ReactNode;

TablePagination/tablePaginationClasses.d.ts

@@ -0,0 +0,0 @@ export interface TablePaginationClasses {

TabPanel/index.d.ts

@@ -0,0 +0,0 @@ export { default } from './TabPanel';

TabPanel/TabPanel.d.ts

@@ -1,2 +0,2 @@
-import { OverridableComponent } from '@mui/types';
+import { PolymorphicComponent } from '../utils';
 import { TabPanelTypeMap } from './TabPanel.types';
@@ -13,3 +13,3 @@ /**
  */
-declare const TabPanel: OverridableComponent<TabPanelTypeMap<{}, "div">>;
+declare const TabPanel: PolymorphicComponent<TabPanelTypeMap<{}, "div">>;
 export default TabPanel;

TabPanel/TabPanel.js

 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["children", "component", "value", "slotProps", "slots"];
+const _excluded = ["children", "value", "slotProps", "slots"];
 import * as React from 'react';
@@ -31,7 +31,6 @@ import PropTypes from 'prop-types';
  */
-const TabPanel = /*#__PURE__*/React.forwardRef(function TabPanel(props, ref) {
-  var _ref;
+const TabPanel = /*#__PURE__*/React.forwardRef(function TabPanel(props, forwardedRef) {
+  var _slots$root;
   const {
       children,
-      component,
       slotProps = {},
@@ -49,3 +48,3 @@ slots = {}
   const classes = useUtilityClasses(ownerState);
-  const TabPanelRoot = (_ref = component != null ? component : slots.root) != null ? _ref : 'div';
+  const TabPanelRoot = (_slots$root = slots.root) != null ? _slots$root : 'div';
   const tabPanelRootProps = useSlotProps({
@@ -58,3 +57,3 @@ elementType: TabPanelRoot,
       role: 'tabpanel',
-      ref
+      ref: forwardedRef
     },
@@ -78,7 +77,2 @@ ownerState,
   /**
-   * The component used for the root node.
-   * Either a string to use a HTML element or a component.
-   */
-  component: PropTypes.elementType,
-  /**
    * The props used for each slot inside the TabPanel.
@@ -85,0 +79,0 @@ * @default {}

TabPanel/TabPanel.types.d.ts

 import * as React from 'react';
-import { OverrideProps } from '@mui/types';
+import { Simplify } from '@mui/types';
 import { UseTabPanelRootSlotProps } from '../useTabPanel';
-import { SlotComponentProps } from '../utils';
+import { PolymorphicProps, SlotComponentProps } from '../utils';
 export interface TabPanelRootSlotPropsOverrides {
@@ -40,12 +40,10 @@ }
 }
-export interface TabPanelTypeMap<P = {}, D extends React.ElementType = 'div'> {
-    props: P & TabPanelOwnProps;
-    defaultComponent: D;
+export interface TabPanelTypeMap<AdditionalProps = {}, RootComponentType extends React.ElementType = 'div'> {
+    props: TabPanelOwnProps & AdditionalProps;
+    defaultComponent: RootComponentType;
 }
-export type TabPanelProps<D extends React.ElementType = TabPanelTypeMap['defaultComponent'], P = {}> = OverrideProps<TabPanelTypeMap<P, D>, D> & {
-    component?: D;
-};
-export type TabPanelOwnerState = TabPanelProps & {
+export type TabPanelProps<RootComponentType extends React.ElementType = TabPanelTypeMap['defaultComponent']> = PolymorphicProps<TabPanelTypeMap<{}, RootComponentType>, RootComponentType>;
+export type TabPanelOwnerState = Simplify<TabPanelOwnProps & {
     hidden: boolean;
-};
+}>;
 export type TabPanelRootSlotProps = UseTabPanelRootSlotProps & {
@@ -52,0 +50,0 @@ children?: React.ReactNode;

TabPanel/tabPanelClasses.d.ts

@@ -0,0 +0,0 @@ export interface TabPanelClasses {

Tabs/index.d.ts

@@ -0,0 +0,0 @@ export { default } from './Tabs';

Tabs/Tabs.d.ts

@@ -1,2 +0,2 @@
-import { OverridableComponent } from '@mui/types';
+import { PolymorphicComponent } from '../utils';
 import { TabsTypeMap } from './Tabs.types';
@@ -13,3 +13,3 @@ /**
  */
-declare const Tabs: OverridableComponent<TabsTypeMap<{}, "div">>;
+declare const Tabs: PolymorphicComponent<TabsTypeMap<{}, "div">>;
 export default Tabs;

Tabs/Tabs.js

 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["children", "value", "defaultValue", "orientation", "direction", "component", "onChange", "selectionFollowsFocus", "slotProps", "slots"];
+const _excluded = ["children", "value", "defaultValue", "orientation", "direction", "onChange", "selectionFollowsFocus", "slotProps", "slots"];
 import * as React from 'react';
@@ -33,4 +33,4 @@ import PropTypes from 'prop-types';
  */
-const Tabs = /*#__PURE__*/React.forwardRef(function Tabs(props, ref) {
-  var _ref;
+const Tabs = /*#__PURE__*/React.forwardRef(function Tabs(props, forwardedRef) {
+  var _slots$root;
   const {
@@ -40,3 +40,2 @@ children,
       direction = 'ltr',
-      component,
       slotProps = {},
@@ -54,3 +53,3 @@ slots = {}
   const classes = useUtilityClasses(ownerState);
-  const TabsRoot = (_ref = component != null ? component : slots.root) != null ? _ref : 'div';
+  const TabsRoot = (_slots$root = slots.root) != null ? _slots$root : 'div';
   const tabsRootProps = useSlotProps({
@@ -61,3 +60,3 @@ elementType: TabsRoot,
     additionalProps: {
-      ref
+      ref: forwardedRef
     },
@@ -84,7 +83,2 @@ ownerState,
   /**
-   * The component used for the root node.
-   * Either a string to use a HTML element or a component.
-   */
-  component: PropTypes.elementType,
-  /**
    * The default value. Use when the component is not controlled.
@@ -91,0 +85,0 @@ */

Tabs/Tabs.types.d.ts

 import * as React from 'react';
-import { OverrideProps } from '@mui/types';
+import { Simplify } from '@mui/types';
 import { SlotComponentProps } from '../utils';
+import { PolymorphicProps } from '../utils/PolymorphicComponent';
 export interface TabsRootSlotPropsOverrides {
@@ -63,13 +64,11 @@ }
 }
-export interface TabsTypeMap<P = {}, D extends React.ElementType = 'div'> {
-    props: P & TabsOwnProps;
-    defaultComponent: D;
+export interface TabsTypeMap<AdditionalProps = {}, RootComponentType extends React.ElementType = 'div'> {
+    props: TabsOwnProps & AdditionalProps;
+    defaultComponent: RootComponentType;
 }
-export type TabsProps<D extends React.ElementType = TabsTypeMap['defaultComponent'], P = {}> = OverrideProps<TabsTypeMap<P, D>, D> & {
-    component?: D;
-};
-export type TabsOwnerState = TabsProps & {
+export type TabsProps<RootComponentType extends React.ElementType = TabsTypeMap['defaultComponent']> = PolymorphicProps<TabsTypeMap<{}, RootComponentType>, RootComponentType>;
+export type TabsOwnerState = Simplify<TabsOwnProps & {
     orientation: TabsOrientation;
     direction: TabsDirection;
-};
+}>;
 export type TabsRootSlotProps = {
@@ -76,0 +75,0 @@ ownerState: TabsOwnerState;

Tabs/tabsClasses.d.ts

@@ -0,0 +0,0 @@ export interface TabsClasses {

Tabs/TabsContext.d.ts

@@ -0,0 +0,0 @@ import * as React from 'react';

TabsList/index.d.ts

@@ -0,0 +0,0 @@ export { default } from './TabsList';

TabsList/TabsList.d.ts

@@ -1,2 +0,2 @@
-import { OverridableComponent } from '@mui/types';
+import { PolymorphicComponent } from '../utils';
 import { TabsListTypeMap } from './TabsList.types';
@@ -13,3 +13,3 @@ /**
  */
-declare const TabsList: OverridableComponent<TabsListTypeMap<{}, "div">>;
+declare const TabsList: PolymorphicComponent<TabsListTypeMap<{}, "div">>;
 export default TabsList;

TabsList/TabsList.js

 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["children", "component", "slotProps", "slots"];
+const _excluded = ["children", "slotProps", "slots"];
 import * as React from 'react';
@@ -33,7 +33,6 @@ import PropTypes from 'prop-types';
  */
-const TabsList = /*#__PURE__*/React.forwardRef(function TabsList(props, ref) {
-  var _ref;
+const TabsList = /*#__PURE__*/React.forwardRef(function TabsList(props, forwardedRef) {
+  var _slots$root;
   const {
       children,
-      component,
       slotProps = {},
@@ -49,3 +48,3 @@ slots = {}
   } = useTabsList({
-    ref
+    rootRef: forwardedRef
   });
@@ -57,3 +56,3 @@ const ownerState = _extends({}, props, {
   const classes = useUtilityClasses(ownerState);
-  const TabsListRoot = (_ref = component != null ? component : slots.root) != null ? _ref : 'div';
+  const TabsListRoot = (_slots$root = slots.root) != null ? _slots$root : 'div';
   const tabsListRootProps = useSlotProps({
@@ -84,7 +83,2 @@ elementType: TabsListRoot,
   /**
-   * The component used for the root node.
-   * Either a string to use a HTML element or a component.
-   */
-  component: PropTypes.elementType,
-  /**
    * The props used for each slot inside the TabsList.
@@ -91,0 +85,0 @@ * @default {}

TabsList/TabsList.types.d.ts

 import * as React from 'react';
-import { OverrideProps } from '@mui/types';
+import { Simplify } from '@mui/types';
 import { UseTabsListRootSlotProps } from '../useTabsList';
-import { SlotComponentProps } from '../utils';
+import { PolymorphicProps, SlotComponentProps } from '../utils';
 export interface TabsListRootSlotPropsOverrides {
@@ -34,13 +34,11 @@ }
 }
-export interface TabsListTypeMap<P = {}, D extends React.ElementType = 'div'> {
-    props: P & TabsListOwnProps;
-    defaultComponent: D;
+export interface TabsListTypeMap<AdditionalProps = {}, RootComponentType extends React.ElementType = 'div'> {
+    props: TabsListOwnProps & AdditionalProps;
+    defaultComponent: RootComponentType;
 }
-export type TabsListProps<D extends React.ElementType = TabsListTypeMap['defaultComponent'], P = {}> = OverrideProps<TabsListTypeMap<P, D>, D> & {
-    component?: D;
-};
-export type TabsListOwnerState = TabsListProps & {
+export type TabsListProps<RootComponentType extends React.ElementType = TabsListTypeMap['defaultComponent']> = PolymorphicProps<TabsListTypeMap<{}, RootComponentType>, RootComponentType>;
+export type TabsListOwnerState = Simplify<TabsListOwnProps & {
     isRtl: boolean;
     orientation: 'horizontal' | 'vertical';
-};
+}>;
 export type TabsListRootSlotProps = UseTabsListRootSlotProps & {
@@ -47,0 +45,0 @@ className?: string;

TabsList/tabsListClasses.d.ts

@@ -0,0 +0,0 @@ export interface TabsListClasses {

TextareaAutosize/index.d.ts

 export { default } from './TextareaAutosize';
 export * from './TextareaAutosize.types';

TextareaAutosize/TextareaAutosize.d.ts

@@ -0,0 +0,0 @@ import * as React from 'react';

TextareaAutosize/TextareaAutosize.js

@@ -43,3 +43,3 @@ import _extends from "@babel/runtime/helpers/esm/extends";
  */
-const TextareaAutosize = /*#__PURE__*/React.forwardRef(function TextareaAutosize(props, ref) {
+const TextareaAutosize = /*#__PURE__*/React.forwardRef(function TextareaAutosize(props, forwardedRef) {
   const {
@@ -57,3 +57,3 @@ onChange,
   const inputRef = React.useRef(null);
-  const handleRef = useForkRef(ref, inputRef);
+  const handleRef = useForkRef(forwardedRef, inputRef);
   const shadowRef = React.useRef(null);
@@ -60,0 +60,0 @@ const renders = React.useRef(0);

TextareaAutosize/TextareaAutosize.types.d.ts

@@ -0,0 +0,0 @@ import * as React from 'react';

useBadge/index.d.ts

 export { default } from './useBadge';
 export * from './useBadge.types';

useBadge/useBadge.d.ts

@@ -0,0 +0,0 @@ import { UseBadgeParameters, UseBadgeReturnValue } from './useBadge.types';

useBadge/useBadge.types.d.ts

@@ -0,0 +0,0 @@ /// <reference types="react" />

useButton/index.d.ts

 export { default } from './useButton';
 export * from './useButton.types';

useButton/useButton.d.ts

@@ -0,0 +0,0 @@ import { UseButtonParameters, UseButtonReturnValue } from './useButton.types';

useButton/useButton.js

@@ -20,3 +20,3 @@ import _extends from "@babel/runtime/helpers/esm/extends";
     href,
-    ref: externalRef,
+    rootRef: externalRef,
     tabIndex,
@@ -176,6 +176,5 @@ to,
     setFocusVisible,
-    disabled,
     active,
-    ref: handleRef
+    rootRef: handleRef
   };
 }

useButton/useButton.types.d.ts

@@ -15,3 +15,3 @@ import * as React from 'react';
     onMouseLeave: React.MouseEventHandler;
-    ref: React.Ref<any>;
+    ref: React.RefCallback<Element> | null;
 }
@@ -32,3 +32,3 @@ export type UseButtonRootSlotProps<TOther = {}> = TOther & UseButtonRootSlotOwnProps;
     onFocusVisible?: React.FocusEventHandler;
-    ref?: React.Ref<any>;
+    rootRef?: React.Ref<Element>;
     tabIndex?: NonNullable<React.HTMLAttributes<any>['tabIndex']>;
@@ -59,7 +59,2 @@ to?: string;
     /**
-     * If `true`, the component is disabled.
-     * @default false
-     */
-    disabled: boolean;
-    /**
      * If `true`, the component is active (pressed).
@@ -72,3 +67,3 @@ * @default false
      */
-    ref: ((instance: unknown) => void) | null;
+    rootRef: React.RefCallback<Element> | null;
 }

useInput/index.d.ts

 export { default } from './useInput';
 export * from './useInput.types';

useInput/useInput.d.ts

@@ -0,0 +0,0 @@ import { UseInputParameters, UseInputReturnValue } from './useInput.types';

useInput/useInput.js

@@ -160,2 +160,3 @@ import _extends from "@babel/runtime/helpers/esm/extends";
     getRootProps,
+    inputRef: handleInputRef,
     required,
@@ -162,0 +163,0 @@ value

useInput/useInput.types.d.ts

@@ -37,3 +37,3 @@ import * as React from 'react';
     defaultValue: string | number | readonly string[] | undefined;
-    ref: React.Ref<HTMLInputElement>;
+    ref: React.RefCallback<HTMLInputElement> | null;
     value: string | number | readonly string[] | undefined;
@@ -79,2 +79,3 @@ onBlur: React.FocusEventHandler;
     getRootProps: <TOther extends Record<string, any> = {}>(externalProps?: TOther) => UseInputRootSlotProps<TOther>;
+    inputRef: React.RefCallback<HTMLInputElement> | null;
     /**
@@ -81,0 +82,0 @@ * If `true`, the `input` will indicate that it's required.

useList/index.d.ts

@@ -0,0 +0,0 @@ export { default } from './useList';

useList/listActions.types.d.ts

@@ -0,0 +0,0 @@ /// <reference types="react" />

useList/listActions.types.js

@@ -9,2 +9,6 @@ export const ListActionTypes = {
   textNavigation: 'list:textNavigation'
-};
+};
+
+/**
+ * A union of all standard actions that can be dispatched to the list reducer.
+ */

useList/ListContext.d.ts

@@ -0,0 +0,0 @@ import * as React from 'react';

useList/listReducer.d.ts

@@ -0,0 +0,0 @@ import { ListState, ListReducerAction, ListActionContext, SelectionMode } from './useList.types';

useList/useList.d.ts

@@ -1,6 +0,3 @@
-import { UseListParameters, UseListRootSlotProps, ListState } from './useList.types';
-import { ListAction } from './listActions.types';
-import { ListContextValue } from './ListContext';
+import { UseListParameters, ListState, UseListReturnValue } from './useList.types';
 import { ControllableReducerAction } from '../utils/useControllableReducer.types';
-import { EventHandlers } from '../utils/types';
 /**
@@ -25,8 +22,3 @@ * The useList is a lower-level utility that is used to build list-like components.
  */
-declare function useList<ItemValue, State extends ListState<ItemValue> = ListState<ItemValue>, CustomAction extends ControllableReducerAction = never, CustomActionContext = {}>(params: UseListParameters<ItemValue, State, CustomAction, CustomActionContext>): {
-    contextValue: ListContextValue<ItemValue>;
-    dispatch: (action: CustomAction | ListAction<ItemValue>) => void;
-    getRootProps: <TOther extends EventHandlers = {}>(otherHandlers?: TOther) => UseListRootSlotProps<TOther>;
-    state: State;
-};
+declare function useList<ItemValue, State extends ListState<ItemValue> = ListState<ItemValue>, CustomAction extends ControllableReducerAction = never, CustomActionContext = {}>(params: UseListParameters<ItemValue, State, CustomAction, CustomActionContext>): UseListReturnValue<ItemValue, State, CustomAction>;
 export default useList;

useList/useList.js

@@ -50,3 +50,3 @@ import _extends from "@babel/runtime/helpers/esm/extends";
     isItemDisabled = defaultIsItemDisabled,
-    listRef: externalListRef,
+    rootRef: externalListRef,
     onStateChange = NOOP,
@@ -256,2 +256,3 @@ items,
     getRootProps,
+    rootRef: handleRef,
     state
@@ -258,0 +259,0 @@ };

useList/useList.types.d.ts

@@ -5,2 +5,4 @@ import * as React from 'react';
 import { ActionWithContext, ControllableReducerAction, StateChangeCallback } from '../utils/useControllableReducer.types';
+import { EventHandlers } from '../utils';
+import type { ListContextValue } from './ListContext';
 type ListActionContextRequiredKeys = 'disabledItemsFocusable' | 'disableListWrap' | 'focusManagement' | 'isItemDisabled' | 'itemComparer' | 'items' | 'itemStringifier' | 'orientation' | 'pageSize' | 'selectionMode';
@@ -104,3 +106,3 @@ /**
      */
-    listRef?: React.Ref<any>;
+    rootRef?: React.Ref<Element>;
     /**
@@ -110,3 +112,3 @@ * Callback fired when the selected value changes.
      */
-    onChange?: (e: React.MouseEvent | React.KeyboardEvent | React.FocusEvent | null, value: ItemValue[], reason: string) => void;
+    onChange?: (event: React.MouseEvent | React.KeyboardEvent | React.FocusEvent | null, value: ItemValue[], reason: string) => void;
     /**
@@ -116,3 +118,3 @@ * Callback fired when the highlighted option changes.
      */
-    onHighlightChange?: (e: React.MouseEvent | React.KeyboardEvent | React.FocusEvent | null, option: ItemValue | null, reason: string) => void;
+    onHighlightChange?: (event: React.MouseEvent | React.KeyboardEvent | React.FocusEvent | null, option: ItemValue | null, reason: string) => void;
     /**
@@ -193,5 +195,12 @@ * Callback fired when the any of the state items change.
     tabIndex: number;
-    ref: React.Ref<any>;
+    ref: React.RefCallback<Element> | null;
 }
 export type UseListRootSlotProps<TOther = {}> = TOther & UseListRootSlotOwnProps;
+export interface UseListReturnValue<ItemValue, State extends ListState<ItemValue>, CustomAction extends ControllableReducerAction> {
+    contextValue: ListContextValue<ItemValue>;
+    dispatch: (action: CustomAction | ListAction<ItemValue>) => void;
+    getRootProps: <TOther extends EventHandlers = {}>(otherHandlers?: TOther) => UseListRootSlotProps<TOther>;
+    rootRef: React.RefCallback<Element> | null;
+    state: State;
+}
 export {};

useList/useListChangeNotifiers.d.ts

@@ -0,0 +0,0 @@ export interface ListChangeNotifiers<ItemValue> {

useList/useListItem.d.ts

@@ -0,0 +0,0 @@ import { UseListItemParameters, UseListItemReturnValue } from './useListItem.types';

useList/useListItem.js

@@ -20,3 +20,3 @@ import _extends from "@babel/runtime/helpers/esm/extends";
     item,
-    ref: externalRef
+    rootRef: externalRef
   } = parameters;
@@ -101,5 +101,5 @@ const itemRef = React.useRef(null);
     highlighted,
-    ref: handleRef,
+    rootRef: handleRef,
     selected
   };
 }

useList/useListItem.types.d.ts

@@ -19,3 +19,3 @@ /// <reference types="react" />
      */
-    ref?: React.Ref<HTMLElement>;
+    rootRef?: React.Ref<Element>;
 }
@@ -26,2 +26,3 @@ interface UseListItemRootSlotOwnProps {
     onPointerOver: React.PointerEventHandler | undefined;
+    ref: React.RefCallback<Element> | null;
     tabIndex?: number;
@@ -48,4 +49,4 @@ }
      */
-    ref: ((instance: HTMLElement | null) => void) | null;
+    rootRef: React.RefCallback<Element> | null;
 }
 export {};

useMenu/index.d.ts

@@ -0,0 +0,0 @@ export { default } from './useMenu';

useMenu/MenuProvider.d.ts

@@ -0,0 +0,0 @@ import * as React from 'react';

useMenu/menuReducer.d.ts

@@ -0,0 +0,0 @@ /// <reference types="react" />

useMenu/useMenu.d.ts

@@ -0,0 +0,0 @@ import { UseMenuParameters, UseMenuReturnValue } from './useMenu.types';

useMenu/useMenu.js

@@ -58,3 +58,4 @@ import _extends from "@babel/runtime/helpers/esm/extends";
       highlightedValue
-    }
+    },
+    rootRef: mergedListRef
   } = useList({
@@ -79,3 +80,3 @@ controlledProps,
     },
-    listRef: handleRef,
+    rootRef: handleRef,
     onStateChange: stateChangeHandler,
@@ -117,2 +118,3 @@ reducerActionContext: {
     highlightedValue,
+    listboxRef: mergedListRef,
     menuItems: subitems,
@@ -119,0 +121,0 @@ open

useMenu/useMenu.types.d.ts

@@ -28,3 +28,3 @@ import * as React from 'react';
      */
-    listboxRef?: React.Ref<any>;
+    listboxRef?: React.Ref<Element>;
 }
@@ -52,2 +52,6 @@ export interface UseMenuReturnValue {
     /**
+     * The ref to the listbox DOM node.
+     */
+    listboxRef: React.RefCallback<Element> | null;
+    /**
      * Items in the menu listbox.
@@ -66,3 +70,3 @@ */
 export type UseMenuListboxSlotProps<TOther = {}> = UseListRootSlotProps<Omit<TOther, keyof UseMenuListboxSlotEventHandlers> & UseMenuListboxSlotEventHandlers> & {
-    ref: React.Ref<any>;
+    ref: React.RefCallback<Element> | null;
     role: React.AriaRole;
@@ -69,0 +73,0 @@ };

useMenuItem/index.d.ts

 export { default } from './useMenuItem';
 export * from './useMenuItem.types';

useMenuItem/useMenuItem.d.ts

@@ -0,0 +0,0 @@ import { UseMenuItemParameters, UseMenuItemReturnValue } from './useMenuItem.types';

useMenuItem/useMenuItem.js

@@ -22,3 +22,3 @@ import _extends from "@babel/runtime/helpers/esm/extends";
     id: idParam,
-    ref: externalRef,
+    rootRef: externalRef,
     label
@@ -37,3 +37,3 @@ } = params;
     highlighted,
-    ref: listItemRefHandler
+    rootRef: listItemRefHandler
   } = useListItem({
@@ -49,3 +49,3 @@ item: id
     focusVisible,
-    ref: buttonRefHandler
+    rootRef: buttonRefHandler
   } = useButton({
@@ -75,3 +75,3 @@ disabled,
       totalItemCount: 0,
-      ref: handleRef
+      rootRef: handleRef
     };
@@ -94,4 +94,4 @@ }
     totalItemCount,
-    ref: handleRef
+    rootRef: handleRef
   };
 }

useMenuItem/useMenuItem.types.d.ts

@@ -20,3 +20,3 @@ /// <reference types="react" />
     onClick?: React.MouseEventHandler<any>;
-    ref: React.Ref<any>;
+    rootRef: React.Ref<Element>;
     label?: string;
@@ -50,3 +50,3 @@ }
      */
-    ref: ((instance: unknown) => void) | null;
+    rootRef: React.RefCallback<Element> | null;
     /**
@@ -53,0 +53,0 @@ * Total number of items in the menu.

useOption/index.d.ts

 export { default } from './useOption';
 export * from './useOption.types';

useOption/useOption.d.ts

@@ -0,0 +0,0 @@ import { UseOptionParameters, UseOptionReturnValue } from './useOption.types';

useOption/useOption.js

@@ -22,3 +22,3 @@ import _extends from "@babel/runtime/helpers/esm/extends";
     disabled,
-    optionRef: optionRefParam,
+    rootRef: optionRefParam,
     id: idParam
@@ -28,3 +28,3 @@ } = params;
     getRootProps: getListItemProps,
-    ref: listItemRefHandler,
+    rootRef: listItemRefHandler,
     highlighted,
@@ -58,4 +58,4 @@ selected
     selected,
-    ref: handleRef
+    rootRef: handleRef
   };
 }

useOption/useOption.types.d.ts

@@ -8,3 +8,3 @@ /// <reference types="react" />
     disabled?: boolean;
-    ref: React.RefObject<HTMLElement>;
+    ref: React.RefObject<Element>;
     id?: string;
@@ -16,3 +16,3 @@ }
     value: Value;
-    optionRef?: React.Ref<HTMLElement>;
+    rootRef?: React.Ref<Element>;
     id?: string;
@@ -25,6 +25,6 @@ }
     getRootProps: <Other extends EventHandlers>(otherHandlers?: Other) => UseOptionRootSlotProps<Other>;
-    ref: React.RefCallback<HTMLElement>;
+    rootRef: React.RefCallback<Element> | null;
 }
 export type UseOptionRootSlotProps<Other extends EventHandlers = {}> = UseListItemRootSlotProps<Other> & {
-    ref?: React.RefCallback<HTMLElement> | null;
+    ref?: React.RefCallback<Element> | null;
 } & Other;

useSelect/defaultOptionStringifier.d.ts

 import { SelectOption } from '../useOption';
 declare const defaultOptionStringifier: <OptionValue>(option: SelectOption<OptionValue>) => string;
 export default defaultOptionStringifier;

useSelect/index.d.ts

@@ -0,0 +0,0 @@ export { default } from './useSelect';

useSelect/SelectProvider.d.ts

@@ -0,0 +0,0 @@ import * as React from 'react';

useSelect/selectReducer.d.ts

@@ -0,0 +0,0 @@ import { ListAction, ListActionContext } from '../useList';

useSelect/useSelect.d.ts

@@ -0,0 +0,0 @@ import { UseSelectParameters, UseSelectReturnValue } from './useSelect.types';

useSelect/useSelect.js

@@ -90,6 +90,7 @@ import _extends from "@babel/runtime/helpers/esm/extends";
     active: buttonActive,
-    focusVisible: buttonFocusVisible
+    focusVisible: buttonFocusVisible,
+    rootRef: mergedButtonRef
   } = useButton({
     disabled,
-    ref: handleButtonRef
+    rootRef: handleButtonRef
   });
@@ -149,3 +150,3 @@ const optionValues = React.useMemo(() => Array.from(options.keys()), [options]);
     isItemDisabled,
-    listRef: handleListboxRef,
+    rootRef: handleListboxRef,
     onChange: handleSelectionChange,
@@ -170,3 +171,4 @@ onHighlightChange: handleHighlightChange,
       selectedValues: selectedOptions
-    }
+    },
+    rootRef: mergedListboxRef
   } = useList(useListParameters);
@@ -283,2 +285,4 @@ React.useEffect(() => {
     buttonFocusVisible,
+    buttonRef: mergedButtonRef,
+    contextValue,
     disabled,
@@ -289,3 +293,3 @@ dispatch,
     getOptionMetadata,
-    contextValue,
+    listboxRef: mergedListboxRef,
     open,
@@ -292,0 +296,0 @@ options: optionValues,

useSelect/useSelect.types.d.ts

@@ -108,2 +108,6 @@ import * as React from 'react';
     /**
+     * Ref to the button slot DOM node.
+     */
+    buttonRef: React.RefCallback<Element> | null;
+    /**
      * If `true`, the select is disabled.
@@ -145,2 +149,6 @@ */
     /**
+     * Ref to the listbox slot DOM node.
+     */
+    listboxRef: React.RefCallback<Element> | null;
+    /**
      * If `true`, the listbox is open.
@@ -147,0 +155,0 @@ */

useSlider/index.d.ts

 export { default } from './useSlider';
 export * from './useSlider';
 export * from './useSlider.types';

useSlider/useSlider.d.ts

@@ -0,0 +0,0 @@ import { UseSliderParameters, UseSliderReturnValue } from './useSlider.types';

useSlider/useSlider.js

@@ -180,3 +180,3 @@ import _extends from "@babel/runtime/helpers/esm/extends";
     orientation = 'horizontal',
-    ref,
+    rootRef: ref,
     scale = Identity,
@@ -614,2 +614,3 @@ step = 1,
     range,
+    rootRef: handleRef,
     trackLeap,
@@ -616,0 +617,0 @@ trackOffset,

useSlider/useSlider.types.d.ts

@@ -75,3 +75,3 @@ import * as React from 'react';
      */
-    ref: React.Ref<any>;
+    rootRef?: React.Ref<Element>;
     /**
@@ -111,3 +111,3 @@ * A transformation function, to change the scale of the slider.
     onMouseDown: React.MouseEventHandler;
-    ref: React.Ref<any>;
+    ref: React.RefCallback<Element> | null;
 };
@@ -209,2 +209,6 @@ export type UseSliderRootSlotProps<TOther = {}> = Omit<TOther, keyof UseSliderRootSlotOwnProps> & UseSliderRootSlotOwnProps;
     /**
+     * Ref to the root slot's DOM node.
+     */
+    rootRef: React.RefCallback<Element> | null;
+    /**
      * The track leap for the current value of the slider.
@@ -211,0 +215,0 @@ */

useSnackbar/index.d.ts

 export { default } from './useSnackbar';
 export * from './useSnackbar.types';

useSnackbar/useSnackbar.d.ts

@@ -0,0 +0,0 @@ import { UseSnackbarParameters, UseSnackbarReturnValue } from './useSnackbar.types';

useSnackbar/useSnackbar.js

@@ -23,3 +23,2 @@ import _extends from "@babel/runtime/helpers/esm/extends";
     open,
-    ref,
     resumeHideDuration
@@ -123,3 +122,2 @@ } = parameters;
     return _extends({
-      ref,
       // ClickAwayListener adds an `onClick` prop which results in the alert not being announced.
@@ -126,0 +124,0 @@ // See https://github.com/mui/material-ui/issues/29080

useSnackbar/useSnackbar.types.d.ts

@@ -32,3 +32,2 @@ /// <reference types="react" />
     open?: boolean;
-    ref?: React.Ref<any>;
     /**
@@ -48,3 +47,3 @@ * The number of milliseconds to wait before dismissing after user interaction.
     onMouseLeave: React.MouseEventHandler;
-    ref?: React.Ref<any>;
+    ref?: React.RefCallback<Element>;
     role: React.AriaRole;
@@ -51,0 +50,0 @@ }

useSwitch/index.d.ts

 export { default } from './useSwitch';
 export * from './useSwitch.types';

useSwitch/useSwitch.d.ts

@@ -0,0 +0,0 @@ import { UseSwitchParameters, UseSwitchReturnValue } from './useSwitch.types';

useSwitch/useSwitch.js

@@ -80,3 +80,3 @@ import _extends from "@babel/runtime/helpers/esm/extends";
   };
-  const handleRefChange = useForkRef(focusVisibleRef, inputRef);
+  const handleInputRef = useForkRef(focusVisibleRef, inputRef);
   const getInputProps = (otherProps = {}) => _extends({
@@ -87,3 +87,3 @@ checked: checkedProp,
     readOnly,
-    ref: handleRefChange,
+    ref: handleInputRef,
     required,
@@ -101,4 +101,5 @@ type: 'checkbox'
     getInputProps,
+    inputRef: handleInputRef,
     readOnly: Boolean(readOnly)
   };
 }

useSwitch/useSwitch.types.d.ts

@@ -43,3 +43,3 @@ import * as React from 'react';
     readOnly?: boolean;
-    ref: React.Ref<any>;
+    ref: React.RefCallback<HTMLInputElement> | null;
     required?: boolean;
@@ -70,2 +70,6 @@ type: React.HTMLInputTypeAttribute;
     /**
+     * Ref to the input slot's DOM node.
+     */
+    inputRef: React.RefCallback<HTMLInputElement> | null;
+    /**
      * If `true`, the component will be read only.
@@ -72,0 +76,0 @@ */

useTab/index.d.ts

 export { default } from './useTab';
 export * from './useTab.types';

useTab/useTab.d.ts

@@ -0,0 +0,0 @@ import { UseTabParameters, UseTabReturnValue } from './useTab.types';

useTab/useTab.js

@@ -25,3 +25,3 @@ import _extends from "@babel/runtime/helpers/esm/extends";
     value: valueParam,
-    ref: externalRef,
+    rootRef: externalRef,
     disabled = false,
@@ -49,3 +49,3 @@ id: idParam
     getRootProps: getTabProps,
-    ref: listItemRefHandler,
+    rootRef: listItemRefHandler,
     highlighted,
@@ -58,3 +58,3 @@ selected
     getRootProps: getButtonProps,
-    ref: buttonRefHandler,
+    rootRef: buttonRefHandler,
     active,
@@ -87,2 +87,3 @@ focusVisible,
     index,
+    rootRef: handleRef,
     // the `selected` state isn't set on the server (it relies on effects to be calculated),
@@ -89,0 +90,0 @@ // so we fall back to checking the `value` prop with the selectedValue from the TabsContext

useTab/useTab.types.d.ts

@@ -28,5 +28,5 @@ import * as React from 'react';
     /**
-     * Ref to the DOM element associated with the tab.
+     * Ref to the root slot's DOM element.
      */
-    ref?: React.Ref<any>;
+    rootRef?: React.Ref<Element>;
 }
@@ -37,2 +37,3 @@ export type UseTabRootSlotProps<TOther = {}> = UseButtonRootSlotProps<TOther> & {
     id: string | undefined;
+    ref: React.RefCallback<Element> | null;
     role: React.AriaRole;
@@ -65,2 +66,6 @@ };
     /**
+     * Ref to the root slot's DOM element.
+     */
+    rootRef: React.RefCallback<Element> | null;
+    /**
      * If `true`, the tab is selected.
@@ -67,0 +72,0 @@ */

useTabPanel/index.d.ts

 export { default } from './useTabPanel';
 export * from './useTabPanel.types';

useTabPanel/useTabPanel.d.ts

@@ -0,0 +0,0 @@ import { UseTabPanelParameters, UseTabPanelReturnValue } from './useTabPanel.types';

useTabPanel/useTabPanel.types.d.ts

@@ -0,0 +0,0 @@ export interface UseTabPanelParameters {

useTabs/index.d.ts

@@ -0,0 +0,0 @@ export { default } from './useTabs';

useTabs/TabsProvider.d.ts

@@ -0,0 +0,0 @@ import * as React from 'react';

useTabs/useTabs.d.ts

@@ -0,0 +0,0 @@ import * as React from 'react';

useTabs/useTabs.types.d.ts

@@ -0,0 +0,0 @@ /// <reference types="react" />

useTabsList/index.d.ts

@@ -0,0 +0,0 @@ export { default } from './useTabsList';

useTabsList/TabsListProvider.d.ts

@@ -0,0 +0,0 @@ import * as React from 'react';

useTabsList/tabsListReducer.d.ts

@@ -0,0 +0,0 @@ import { ListState, ListAction, ListActionContext } from '../useList';

useTabsList/useTabsList.d.ts

@@ -0,0 +0,0 @@ import { UseTabsListParameters, UseTabsListReturnValue } from './useTabsList.types';

useTabsList/useTabsList.js

@@ -22,3 +22,3 @@ import _extends from "@babel/runtime/helpers/esm/extends";
   const {
-    ref: externalRef
+    rootRef: externalRef
   } = parameters;
@@ -82,3 +82,4 @@ const {
       selectedValues
-    }
+    },
+    rootRef: mergedRootRef
   } = useList({
@@ -91,3 +92,3 @@ controlledProps,
     items: subitemKeys,
-    listRef: externalRef,
+    rootRef: externalRef,
     onChange: handleChange,
@@ -121,11 +122,12 @@ orientation: listOrientation,
   return {
+    contextValue: _extends({}, compoundComponentContextValue, listContextValue),
     dispatch,
+    getRootProps,
+    highlightedValue,
     isRtl,
     orientation,
-    selectedValue: (_selectedValues$ = selectedValues[0]) != null ? _selectedValues$ : null,
-    highlightedValue,
-    getRootProps,
-    contextValue: _extends({}, compoundComponentContextValue, listContextValue)
+    rootRef: mergedRootRef,
+    selectedValue: (_selectedValues$ = selectedValues[0]) != null ? _selectedValues$ : null
   };
 }
 export default useTabsList;

useTabsList/useTabsList.types.d.ts

@@ -8,3 +8,3 @@ import * as React from 'react';
      */
-    ref: React.Ref<unknown>;
+    rootRef: React.Ref<Element>;
 }
@@ -16,3 +16,3 @@ export type UseTabsListRootSlotProps<TOther = {}> = TOther & {
     role: React.AriaRole;
-    ref: React.Ref<any>;
+    ref: React.RefCallback<Element> | null;
     onKeyDown?: React.KeyboardEventHandler<HTMLElement>;
@@ -22,2 +22,6 @@ };
     /**
+     * The value to be passed to the TabListProvider above all the tabs.
+     */
+    contextValue: TabsListProviderValue;
+    /**
      * Action dispatcher for the tabs list component.
@@ -28,2 +32,8 @@ * Allows to programmatically control the tabs list.
     /**
+     * Resolver for the root slot's props.
+     * @param externalProps props for the root slot
+     * @returns props that should be spread on the root slot
+     */
+    getRootProps: <TOther extends Record<string, any> = {}>(externalProps?: TOther) => UseTabsListRootSlotProps<TOther>;
+    /**
      * The value of the currently highlighted tab.
@@ -42,2 +52,3 @@ */
     orientation: 'horizontal' | 'vertical';
+    rootRef: React.RefCallback<Element> | null;
     /**
@@ -47,12 +58,2 @@ * The value of the currently selected tab.
     selectedValue: string | number | null;
-    /**
-     * Resolver for the root slot's props.
-     * @param externalProps props for the root slot
-     * @returns props that should be spread on the root slot
-     */
-    getRootProps: <TOther extends Record<string, any> = {}>(externalProps?: TOther) => UseTabsListRootSlotProps<TOther>;
-    /**
-     * The value to be passed to the TabListProvider above all the tabs.
-     */
-    contextValue: TabsListProviderValue;
 }
@@ -59,0 +60,0 @@ export declare const TabsListActionTypes: {

utils/appendOwnerState.d.ts

@@ -0,0 +0,0 @@ import * as React from 'react';

utils/areArraysEqual.d.ts

 type ItemComparer<T> = (a: T, b: T) => boolean;
 export default function areArraysEqual<T>(array1: T[], array2: T[], itemComparer?: ItemComparer<T>): boolean;
 export {};

utils/ClassNameConfigurator.d.ts

@@ -0,0 +0,0 @@ import * as React from 'react';

utils/extractEventHandlers.d.ts

@@ -0,0 +0,0 @@ import { EventHandlers } from './types';

utils/index.d.ts

@@ -9,2 +9,3 @@ export { default as appendOwnerState } from './appendOwnerState';
 export { default as mergeSlotProps } from './mergeSlotProps';
+export * from './PolymorphicComponent';
 export * from './types';

utils/index.js

@@ -9,2 +9,3 @@ export { default as appendOwnerState } from './appendOwnerState';
 export { default as mergeSlotProps } from './mergeSlotProps';
+export * from './PolymorphicComponent';
 export * from './types';

utils/isHostComponent.d.ts

@@ -0,0 +0,0 @@ import * as React from 'react';

utils/mergeSlotProps.d.ts

@@ -0,0 +0,0 @@ import * as React from 'react';

utils/omitEventHandlers.d.ts

@@ -0,0 +0,0 @@ /**

utils/resolveComponentProps.d.ts

@@ -0,0 +0,0 @@ /**

utils/types.d.ts

@@ -0,0 +0,0 @@ import * as React from 'react';

utils/useCompound.d.ts

@@ -0,0 +0,0 @@ import * as React from 'react';

utils/useCompoundItem.d.ts

@@ -0,0 +0,0 @@ export interface UseCompoundItemReturnValue<Key> {

utils/useCompoundItem.js

 import * as React from 'react';
 import { unstable_useEnhancedEffect as useEnhancedEffect } from '@mui/utils';
 import { CompoundComponentContext } from './useCompound';
+
+/**
+ * Registers a child component with the parent component.
+ *
+ * @param id A unique key for the child component. If the `id` is `undefined`, the registration logic will not run (this can sometimes be the case during SSR).
+ * @param itemMetadata Arbitrary metadata to pass to the parent component. This should be a stable reference (e.g. a memoized object), to avoid unnecessary re-registrations.
+ * @param missingKeyGenerator A function that generates a unique id for the item.
+ *   It is called with the set of the ids of all the items that have already been registered.
+ *   Return `existingKeys.size` if you want to use the index of the new item as the id.
+ *
+ * @ignore - internal hook.
+ */
+
 export function useCompoundItem(id, itemMetadata, missingKeyGenerator) {
@@ -5,0 +18,0 @@ const context = React.useContext(CompoundComponentContext);

utils/useControllableReducer.d.ts

@@ -0,0 +0,0 @@ import { ControllableReducerAction, ControllableReducerParameters } from './useControllableReducer.types';

utils/useControllableReducer.types.d.ts

@@ -0,0 +0,0 @@ /// <reference types="react" />

utils/useForcedRerendering.d.ts

@@ -0,0 +0,0 @@ /**

utils/useLatest.d.ts

@@ -0,0 +0,0 @@ import * as React from 'react';

utils/useMessageBus.d.ts

@@ -0,0 +0,0 @@ export interface MessageBus {

utils/useSlotProps.d.ts

@@ -0,0 +0,0 @@ import * as React from 'react';

utils/useTextNavigation.d.ts

@@ -0,0 +0,0 @@ import * as React from 'react';

Fixed alerts

Environment variable access

Supply chain risk

Package accesses environment variables, which may be a sign of credential stuffing or data theft.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

2486202

increased by0.23%

Number of package files

975

increased by0.52%

Number of low supply chain risk alerts

184

decreased by-5.15%

Worsened metrics

Lines of code

49283

decreased by-1.3%

Dependency changes

• Updated@mui/utils@^5.12.3