From d0261c8aa279abbc3631d9cdb85e27e7175f7f0c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C5=82=20Dudak?= <michal@dudak.me>
Date: Wed, 19 Apr 2023 13:52:59 +0200
Subject: [PATCH 01/15] useButton

---
 docs/data/base/components/button/UseButton.tsx |  6 +++---
 .../mui-base/src/useButton/useButton.test.tsx  | 18 +++++++++---------
 packages/mui-base/src/useButton/useButton.ts   |  5 ++---
 .../mui-base/src/useButton/useButton.types.ts  | 11 +++--------
 .../mui-base/src/useMenuItem/useMenuItem.ts    |  2 +-
 packages/mui-base/src/useSelect/useSelect.ts   |  2 +-
 packages/mui-base/src/useTab/useTab.ts         |  2 +-
 packages/mui-joy/src/Button/Button.tsx         |  2 +-
 packages/mui-joy/src/Chip/Chip.tsx             |  2 +-
 packages/mui-joy/src/ChipDelete/ChipDelete.tsx |  2 +-
 packages/mui-joy/src/IconButton/IconButton.tsx |  2 +-
 .../src/ListItemButton/ListItemButton.tsx      |  2 +-
 packages/mui-joy/src/ModalClose/ModalClose.tsx |  2 +-
 packages/mui-joy/src/Tooltip/Tooltip.tsx       |  4 ++--
 .../mui-material-next/src/Button/Button.tsx    |  2 +-
 packages/mui-utils/src/useIsFocusVisible.ts    |  2 +-
 16 files changed, 30 insertions(+), 36 deletions(-)

diff --git a/docs/data/base/components/button/UseButton.tsx b/docs/data/base/components/button/UseButton.tsx
index 30b6bd9cb1bc50..55b247aa4bc9ef 100644
--- a/docs/data/base/components/button/UseButton.tsx
+++ b/docs/data/base/components/button/UseButton.tsx
@@ -9,10 +9,10 @@ const CustomButton = React.forwardRef(function CustomButton(
   props: ButtonUnstyledProps,
   ref: React.ForwardedRef<any>,
 ) {
-  const { children } = props;
-  const { active, disabled, focusVisible, getRootProps } = useButton({
+  const { children, disabled } = props;
+  const { active, focusVisible, getRootProps } = useButton({
     ...props,
-    ref,
+    rootRef: ref,
   });
 
   const classes = {
diff --git a/packages/mui-base/src/useButton/useButton.test.tsx b/packages/mui-base/src/useButton/useButton.test.tsx
index 8150b84bff0328..2ab557bd3e27d0 100644
--- a/packages/mui-base/src/useButton/useButton.test.tsx
+++ b/packages/mui-base/src/useButton/useButton.test.tsx
@@ -12,7 +12,7 @@ describe('useButton', () => {
       it('is set when triggered by mouse', () => {
         function TestComponent() {
           const buttonRef = React.useRef(null);
-          const { active, getRootProps } = useButton({ ref: buttonRef });
+          const { active, getRootProps } = useButton({ rootRef: buttonRef });
 
           return <button {...getRootProps()} className={active ? 'active' : ''} />;
         }
@@ -28,7 +28,7 @@ describe('useButton', () => {
       it('is set when triggered by keyboard', () => {
         function TestComponent() {
           const buttonRef = React.useRef(null);
-          const { active, getRootProps } = useButton({ ref: buttonRef });
+          const { active, getRootProps } = useButton({ rootRef: buttonRef });
 
           return <button {...getRootProps()} className={active ? 'active' : ''} />;
         }
@@ -45,7 +45,7 @@ describe('useButton', () => {
       it('is set when clicked on an element inside the button', () => {
         function TestComponent() {
           const buttonRef = React.useRef(null);
-          const { active, getRootProps } = useButton({ ref: buttonRef });
+          const { active, getRootProps } = useButton({ rootRef: buttonRef });
 
           return (
             <button {...getRootProps()} className={active ? 'active' : ''}>
@@ -64,7 +64,7 @@ describe('useButton', () => {
       it('is unset when mouse button is released above another element', () => {
         function TestComponent() {
           const buttonRef = React.useRef(null);
-          const { active, getRootProps } = useButton({ ref: buttonRef });
+          const { active, getRootProps } = useButton({ rootRef: buttonRef });
 
           return (
             <div data-testid="parent">
@@ -87,7 +87,7 @@ describe('useButton', () => {
       it('is set when triggered by mouse', () => {
         function TestComponent() {
           const buttonRef = React.useRef(null);
-          const { active, getRootProps } = useButton({ ref: buttonRef });
+          const { active, getRootProps } = useButton({ rootRef: buttonRef });
 
           return <span {...getRootProps()} className={active ? 'active' : ''} />;
         }
@@ -103,7 +103,7 @@ describe('useButton', () => {
       it('is set when triggered by keyboard', () => {
         function TestComponent() {
           const buttonRef = React.useRef(null);
-          const { active, getRootProps } = useButton({ ref: buttonRef });
+          const { active, getRootProps } = useButton({ rootRef: buttonRef });
 
           return <span {...getRootProps()} className={active ? 'active' : ''} />;
         }
@@ -126,7 +126,7 @@ describe('useButton', () => {
       it('calls them when provided in props', () => {
         function TestComponent(props: WithClickHandler) {
           const ref = React.useRef(null);
-          const { getRootProps } = useButton({ ...props, ref });
+          const { getRootProps } = useButton({ ...props, rootRef: ref });
           return <button {...getRootProps()} />;
         }
 
@@ -143,7 +143,7 @@ describe('useButton', () => {
 
         function TestComponent() {
           const ref = React.useRef(null);
-          const { getRootProps } = useButton({ ref });
+          const { getRootProps } = useButton({ rootRef: ref });
           return <button {...getRootProps({ onClick: handleClick })} />;
         }
 
@@ -159,7 +159,7 @@ describe('useButton', () => {
 
         function TestComponent(props: WithClickHandler) {
           const ref = React.useRef(null);
-          const { getRootProps } = useButton({ ...props, ref });
+          const { getRootProps } = useButton({ ...props, rootRef: ref });
           return <button {...getRootProps({ onClick: handleClickInternal })} />;
         }
 
diff --git a/packages/mui-base/src/useButton/useButton.ts b/packages/mui-base/src/useButton/useButton.ts
index 588e1403fcf32a..50c9718a2ea72e 100644
--- a/packages/mui-base/src/useButton/useButton.ts
+++ b/packages/mui-base/src/useButton/useButton.ts
@@ -25,7 +25,7 @@ export default function useButton(parameters: UseButtonParameters): UseButtonRet
     disabled = false,
     focusableWhenDisabled,
     href,
-    ref: externalRef,
+    rootRef: externalRef,
     tabIndex,
     to,
     type,
@@ -233,8 +233,7 @@ export default function useButton(parameters: UseButtonParameters): UseButtonRet
     getRootProps,
     focusVisible,
     setFocusVisible,
-    disabled,
     active,
-    ref: handleRef,
+    rootRef: handleRef,
   };
 }
diff --git a/packages/mui-base/src/useButton/useButton.types.ts b/packages/mui-base/src/useButton/useButton.types.ts
index dbb5dc7dfea83c..50a1e1907f96cc 100644
--- a/packages/mui-base/src/useButton/useButton.types.ts
+++ b/packages/mui-base/src/useButton/useButton.types.ts
@@ -13,7 +13,7 @@ export interface UseButtonRootSlotOwnProps {
   onKeyUp: React.KeyboardEventHandler;
   onMouseDown: React.MouseEventHandler;
   onMouseLeave: React.MouseEventHandler;
-  ref: React.Ref<any>;
+  ref: React.RefCallback<Element> | null;
 }
 
 export type UseButtonRootSlotProps<TOther = {}> = TOther & UseButtonRootSlotOwnProps;
@@ -31,7 +31,7 @@ export interface UseButtonParameters {
   focusableWhenDisabled?: boolean;
   href?: string;
   onFocusVisible?: React.FocusEventHandler;
-  ref?: React.Ref<any>;
+  rootRef?: React.Ref<Element>;
   tabIndex?: NonNullable<React.HTMLAttributes<any>['tabIndex']>;
   to?: string;
   /**
@@ -59,11 +59,6 @@ export interface UseButtonReturnValue {
    * Callback for setting the `focusVisible` param.
    */
   setFocusVisible: React.Dispatch<React.SetStateAction<boolean>>;
-  /**
-   * If `true`, the component is disabled.
-   * @default false
-   */
-  disabled: boolean;
   /**
    * If `true`, the component is active (pressed).
    * @default false
@@ -72,5 +67,5 @@ export interface UseButtonReturnValue {
   /**
    * A ref to the component's root DOM element.
    */
-  ref: ((instance: unknown) => void) | null;
+  rootRef: React.RefCallback<Element> | null;
 }
diff --git a/packages/mui-base/src/useMenuItem/useMenuItem.ts b/packages/mui-base/src/useMenuItem/useMenuItem.ts
index f9addc2837ebdb..cfc1a6ccf310ba 100644
--- a/packages/mui-base/src/useMenuItem/useMenuItem.ts
+++ b/packages/mui-base/src/useMenuItem/useMenuItem.ts
@@ -45,7 +45,7 @@ export default function useMenuItem(params: UseMenuItemParameters): UseMenuItemR
   const {
     getRootProps: getButtonProps,
     focusVisible,
-    ref: buttonRefHandler,
+    rootRef: buttonRefHandler,
   } = useButton({
     disabled,
     focusableWhenDisabled: true,
diff --git a/packages/mui-base/src/useSelect/useSelect.ts b/packages/mui-base/src/useSelect/useSelect.ts
index 21c1cd69130861..566fbd95e921c9 100644
--- a/packages/mui-base/src/useSelect/useSelect.ts
+++ b/packages/mui-base/src/useSelect/useSelect.ts
@@ -126,7 +126,7 @@ function useSelect<OptionValue, Multiple extends boolean = false>(
     focusVisible: buttonFocusVisible,
   } = useButton({
     disabled,
-    ref: handleButtonRef,
+    rootRef: handleButtonRef,
   });
 
   const optionValues = React.useMemo(() => Array.from(options.keys()), [options]);
diff --git a/packages/mui-base/src/useTab/useTab.ts b/packages/mui-base/src/useTab/useTab.ts
index 8523579f014121..30d2f88fea8152 100644
--- a/packages/mui-base/src/useTab/useTab.ts
+++ b/packages/mui-base/src/useTab/useTab.ts
@@ -49,7 +49,7 @@ function useTab(parameters: UseTabParameters): UseTabReturnValue {
 
   const {
     getRootProps: getButtonProps,
-    ref: buttonRefHandler,
+    rootRef: buttonRefHandler,
     active,
     focusVisible,
     setFocusVisible,
diff --git a/packages/mui-joy/src/Button/Button.tsx b/packages/mui-joy/src/Button/Button.tsx
index cc1d67bc6767cb..24aa91e9f85f6e 100644
--- a/packages/mui-joy/src/Button/Button.tsx
+++ b/packages/mui-joy/src/Button/Button.tsx
@@ -195,7 +195,7 @@ const Button = React.forwardRef(function Button(inProps, ref) {
   const { focusVisible, setFocusVisible, getRootProps } = useButton({
     ...props,
     disabled: disabled || loading,
-    ref: handleRef,
+    rootRef: handleRef,
   });
 
   const loadingIndicator = loadingIndicatorProp ?? (
diff --git a/packages/mui-joy/src/Chip/Chip.tsx b/packages/mui-joy/src/Chip/Chip.tsx
index 2ea1f38033b160..fe15fa70d8125e 100644
--- a/packages/mui-joy/src/Chip/Chip.tsx
+++ b/packages/mui-joy/src/Chip/Chip.tsx
@@ -240,7 +240,7 @@ const Chip = React.forwardRef(function Chip(inProps, ref) {
   const { focusVisible, getRootProps } = useButton({
     ...resolvedActionProps,
     disabled,
-    ref: actionRef,
+    rootRef: actionRef,
   });
 
   ownerState.focusVisible = focusVisible;
diff --git a/packages/mui-joy/src/ChipDelete/ChipDelete.tsx b/packages/mui-joy/src/ChipDelete/ChipDelete.tsx
index 1d2c3574ffc144..24256017aa9e03 100644
--- a/packages/mui-joy/src/ChipDelete/ChipDelete.tsx
+++ b/packages/mui-joy/src/ChipDelete/ChipDelete.tsx
@@ -106,7 +106,7 @@ const ChipDelete = React.forwardRef(function ChipDelete(inProps, ref) {
   const { focusVisible, getRootProps } = useButton({
     ...props,
     disabled,
-    ref: handleRef,
+    rootRef: handleRef,
   });
 
   const ownerState = {
diff --git a/packages/mui-joy/src/IconButton/IconButton.tsx b/packages/mui-joy/src/IconButton/IconButton.tsx
index 2c219747840f64..32d655a0d0b1f6 100644
--- a/packages/mui-joy/src/IconButton/IconButton.tsx
+++ b/packages/mui-joy/src/IconButton/IconButton.tsx
@@ -126,7 +126,7 @@ const IconButton = React.forwardRef(function IconButton(inProps, ref) {
 
   const { focusVisible, setFocusVisible, getRootProps } = useButton({
     ...props,
-    ref: handleRef,
+    rootRef: handleRef,
   });
 
   React.useImperativeHandle(
diff --git a/packages/mui-joy/src/ListItemButton/ListItemButton.tsx b/packages/mui-joy/src/ListItemButton/ListItemButton.tsx
index 1a38720838f94b..4766b16329cfcd 100644
--- a/packages/mui-joy/src/ListItemButton/ListItemButton.tsx
+++ b/packages/mui-joy/src/ListItemButton/ListItemButton.tsx
@@ -147,7 +147,7 @@ const ListItemButton = React.forwardRef(function ListItemButton(inProps, ref) {
 
   const { focusVisible, setFocusVisible, getRootProps } = useButton({
     ...props,
-    ref: handleRef,
+    rootRef: handleRef,
   });
 
   React.useImperativeHandle(
diff --git a/packages/mui-joy/src/ModalClose/ModalClose.tsx b/packages/mui-joy/src/ModalClose/ModalClose.tsx
index 4edd7a331394b4..e941feb1dbfe5f 100644
--- a/packages/mui-joy/src/ModalClose/ModalClose.tsx
+++ b/packages/mui-joy/src/ModalClose/ModalClose.tsx
@@ -101,7 +101,7 @@ const ModalClose = React.forwardRef(function ModalClose(inProps, ref) {
 
   const { focusVisible, getRootProps } = useButton({
     ...props,
-    ref,
+    rootRef: ref,
   });
 
   const ownerState = {
diff --git a/packages/mui-joy/src/Tooltip/Tooltip.tsx b/packages/mui-joy/src/Tooltip/Tooltip.tsx
index f5aa8ec1bfb3ac..447955de947cec 100644
--- a/packages/mui-joy/src/Tooltip/Tooltip.tsx
+++ b/packages/mui-joy/src/Tooltip/Tooltip.tsx
@@ -250,7 +250,7 @@ const Tooltip = React.forwardRef(function Tooltip(inProps, ref) {
   const { getColor } = useColorInversion(variant);
   const color = disablePortal ? getColor(inProps.color, colorProp) : colorProp;
 
-  const [childNode, setChildNode] = React.useState<HTMLElement>();
+  const [childNode, setChildNode] = React.useState<Element>();
   const [arrowRef, setArrowRef] = React.useState<HTMLSpanElement | null>(null);
   const ignoreNonTouchEvents = React.useRef(false);
 
@@ -459,7 +459,7 @@ const Tooltip = React.forwardRef(function Tooltip(inProps, ref) {
   }, [handleClose, open]);
 
   const handleUseRef = useForkRef(setChildNode, ref);
-  const handleFocusRef = useForkRef(focusVisibleRef, handleUseRef);
+  const handleFocusRef = useForkRef<Element>(focusVisibleRef, handleUseRef);
   const handleRef = useForkRef(
     (children as unknown as { ref: React.Ref<HTMLElement> }).ref,
     handleFocusRef,
diff --git a/packages/mui-material-next/src/Button/Button.tsx b/packages/mui-material-next/src/Button/Button.tsx
index 114ad81c54f767..ad28159f51f949 100644
--- a/packages/mui-material-next/src/Button/Button.tsx
+++ b/packages/mui-material-next/src/Button/Button.tsx
@@ -472,7 +472,7 @@ const Button = React.forwardRef(function Button<
     // @ts-ignore
     to: props.to,
     type,
-    ref: handleRef,
+    rootRef: handleRef,
   });
 
   React.useImperativeHandle(
diff --git a/packages/mui-utils/src/useIsFocusVisible.ts b/packages/mui-utils/src/useIsFocusVisible.ts
index 6b48cfbdf2dda2..899d7f15dfe23e 100644
--- a/packages/mui-utils/src/useIsFocusVisible.ts
+++ b/packages/mui-utils/src/useIsFocusVisible.ts
@@ -119,7 +119,7 @@ export interface UseIsFocusVisibleResult {
   isFocusVisibleRef: React.MutableRefObject<boolean>;
   onBlur: (event: React.FocusEvent<any>) => void;
   onFocus: (event: React.FocusEvent<any>) => void;
-  ref: React.Ref<unknown>;
+  ref: React.RefCallback<Element>;
 }
 
 export default function useIsFocusVisible(): UseIsFocusVisibleResult {

From 09b4161a014fb324be2cdf73978c64c9ed40be1d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C5=82=20Dudak?= <michal@dudak.me>
Date: Wed, 19 Apr 2023 14:06:58 +0200
Subject: [PATCH 02/15] useInput

---
 packages/mui-base/src/useInput/useInput.ts       | 1 +
 packages/mui-base/src/useInput/useInput.types.ts | 3 ++-
 2 files changed, 3 insertions(+), 1 deletion(-)

diff --git a/packages/mui-base/src/useInput/useInput.ts b/packages/mui-base/src/useInput/useInput.ts
index ebd3a8333a8056..09fd318ff1a902 100644
--- a/packages/mui-base/src/useInput/useInput.ts
+++ b/packages/mui-base/src/useInput/useInput.ts
@@ -214,6 +214,7 @@ export default function useInput(parameters: UseInputParameters): UseInputReturn
     formControlContext,
     getInputProps,
     getRootProps,
+    inputRef: handleInputRef,
     required,
     value,
   };
diff --git a/packages/mui-base/src/useInput/useInput.types.ts b/packages/mui-base/src/useInput/useInput.types.ts
index f436b20e47a2df..cf19c61fbf8b72 100644
--- a/packages/mui-base/src/useInput/useInput.types.ts
+++ b/packages/mui-base/src/useInput/useInput.types.ts
@@ -42,7 +42,7 @@ export type UseInputRootSlotProps<TOther = {}> = Omit<
 export interface UseInputInputSlotOwnProps {
   'aria-invalid': React.AriaAttributes['aria-invalid'];
   defaultValue: string | number | readonly string[] | undefined;
-  ref: React.Ref<HTMLInputElement>;
+  ref: React.RefCallback<HTMLInputElement> | null;
   value: string | number | readonly string[] | undefined;
   onBlur: React.FocusEventHandler;
   onChange: React.ChangeEventHandler<HTMLInputElement>;
@@ -90,6 +90,7 @@ export interface UseInputReturnValue {
   getRootProps: <TOther extends Record<string, any> = {}>(
     externalProps?: TOther,
   ) => UseInputRootSlotProps<TOther>;
+  inputRef: React.RefCallback<HTMLInputElement> | null;
   /**
    * If `true`, the `input` will indicate that it's required.
    * @default false

From 40684d8e0aa576aa6e224cbc606bd598cbaf3b87 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C5=82=20Dudak?= <michal@dudak.me>
Date: Wed, 19 Apr 2023 14:32:36 +0200
Subject: [PATCH 03/15] useList

---
 docs/pages/experiments/base/listbox.tsx       |  2 +-
 .../src/TabsListUnstyled/TabsListUnstyled.tsx |  2 +-
 packages/mui-base/src/useList/useList.ts      |  8 +++++--
 .../mui-base/src/useList/useList.types.ts     | 24 +++++++++++++++----
 packages/mui-base/src/useList/useListItem.ts  |  6 ++---
 .../mui-base/src/useList/useListItem.types.ts |  5 ++--
 packages/mui-base/src/useMenu/useMenu.ts      |  2 +-
 .../mui-base/src/useMenuItem/useMenuItem.ts   |  2 +-
 packages/mui-base/src/useOption/useOption.ts  |  2 +-
 packages/mui-base/src/useSelect/useSelect.ts  |  2 +-
 packages/mui-base/src/useTab/useTab.ts        |  2 +-
 .../mui-base/src/useTabsList/useTabsList.ts   |  2 +-
 .../src/useTabsList/useTabsList.types.ts      |  2 +-
 13 files changed, 41 insertions(+), 20 deletions(-)

diff --git a/docs/pages/experiments/base/listbox.tsx b/docs/pages/experiments/base/listbox.tsx
index 3d87ee935df0c9..47dcd768043cbe 100644
--- a/docs/pages/experiments/base/listbox.tsx
+++ b/docs/pages/experiments/base/listbox.tsx
@@ -93,7 +93,7 @@ const Item = React.forwardRef(function Item(
   ref: React.Ref<HTMLElement>,
 ) {
   const { value: item, id } = props;
-  const { getRootProps, selected, highlighted } = useListItem({ item, ref });
+  const { getRootProps, selected, highlighted } = useListItem({ item, rootRef: ref });
 
   const itemProps = getRootProps();
 
diff --git a/packages/mui-base/src/TabsListUnstyled/TabsListUnstyled.tsx b/packages/mui-base/src/TabsListUnstyled/TabsListUnstyled.tsx
index 36061335060123..0c8208aa2f8615 100644
--- a/packages/mui-base/src/TabsListUnstyled/TabsListUnstyled.tsx
+++ b/packages/mui-base/src/TabsListUnstyled/TabsListUnstyled.tsx
@@ -33,7 +33,7 @@ const useUtilityClasses = (ownerState: { orientation: 'horizontal' | 'vertical'
  *
  * - [TabsListUnstyled API](https://mui.com/base/react-tabs/components-api/#tabs-list-unstyled)
  */
-const TabsListUnstyled = React.forwardRef<unknown, TabsListUnstyledProps>(function TabsListUnstyled(
+const TabsListUnstyled = React.forwardRef<Element, TabsListUnstyledProps>(function TabsListUnstyled(
   props,
   ref,
 ) {
diff --git a/packages/mui-base/src/useList/useList.ts b/packages/mui-base/src/useList/useList.ts
index 84dbb6724d744b..e6867f00575214 100644
--- a/packages/mui-base/src/useList/useList.ts
+++ b/packages/mui-base/src/useList/useList.ts
@@ -6,6 +6,7 @@ import {
   UseListRootSlotProps,
   ListState,
   ListActionContext,
+  UseListReturnValue,
 } from './useList.types';
 import { ListActionTypes, ListAction } from './listActions.types';
 import { ListContextValue } from './ListContext';
@@ -62,7 +63,9 @@ function useList<
   State extends ListState<ItemValue> = ListState<ItemValue>,
   CustomAction extends ControllableReducerAction = never,
   CustomActionContext = {},
->(params: UseListParameters<ItemValue, State, CustomAction, CustomActionContext>) {
+>(
+  params: UseListParameters<ItemValue, State, CustomAction, CustomActionContext>,
+): UseListReturnValue<ItemValue, State, CustomAction> {
   const {
     controlledProps = EMPTY_OBJECT,
     disabledItemsFocusable = false,
@@ -72,7 +75,7 @@ function useList<
     getItemDomElement,
     getItemId,
     isItemDisabled = defaultIsItemDisabled,
-    listRef: externalListRef,
+    rootRef: externalListRef,
     onStateChange = NOOP,
     items,
     itemComparer = defaultItemComparer,
@@ -390,6 +393,7 @@ function useList<
     contextValue,
     dispatch,
     getRootProps,
+    rootRef: handleRef,
     state,
   };
 }
diff --git a/packages/mui-base/src/useList/useList.types.ts b/packages/mui-base/src/useList/useList.types.ts
index 81710216dd42c9..50c0e8f8065d71 100644
--- a/packages/mui-base/src/useList/useList.types.ts
+++ b/packages/mui-base/src/useList/useList.types.ts
@@ -6,6 +6,8 @@ import {
   ControllableReducerAction,
   StateChangeCallback,
 } from '../utils/useControllableReducer.types';
+import { EventHandlers } from '../utils';
+import type { ListContextValue } from './ListContext';
 
 type ListActionContextRequiredKeys =
   | 'disabledItemsFocusable'
@@ -135,13 +137,13 @@ export interface UseListParameters<
   /**
    * Ref of the list root DOM element.
    */
-  listRef?: React.Ref<any>;
+  rootRef?: React.Ref<Element>;
   /**
    * Callback fired when the selected value changes.
    * This is a strongly typed convenience event that can be used instead of `onStateChange`.
    */
   onChange?: (
-    e: React.MouseEvent | React.KeyboardEvent | React.FocusEvent | null,
+    event: React.MouseEvent | React.KeyboardEvent | React.FocusEvent | null,
     value: ItemValue[],
     reason: string,
   ) => void;
@@ -150,7 +152,7 @@ export interface UseListParameters<
    * This is a strongly typed convenience event that can be used instead of `onStateChange`.
    */
   onHighlightChange?: (
-    e: React.MouseEvent | React.KeyboardEvent | React.FocusEvent | null,
+    event: React.MouseEvent | React.KeyboardEvent | React.FocusEvent | null,
     option: ItemValue | null,
     reason: string,
   ) => void;
@@ -237,7 +239,21 @@ interface UseListRootSlotOwnProps {
   onBlur: React.FocusEventHandler;
   onKeyDown: React.KeyboardEventHandler;
   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;
+}
diff --git a/packages/mui-base/src/useList/useListItem.ts b/packages/mui-base/src/useList/useListItem.ts
index dbd7f1acf24ad0..03bd8b01a125fc 100644
--- a/packages/mui-base/src/useList/useListItem.ts
+++ b/packages/mui-base/src/useList/useListItem.ts
@@ -20,9 +20,9 @@ import { ListContext } from './ListContext';
 export default function useListItem<ItemValue>(
   parameters: UseListItemParameters<ItemValue>,
 ): UseListItemReturnValue {
-  const { handlePointerOverEvents = false, item, ref: externalRef } = parameters;
+  const { handlePointerOverEvents = false, item, rootRef: externalRef } = parameters;
 
-  const itemRef = React.useRef<HTMLElement>(null);
+  const itemRef = React.useRef<Element>(null);
   const handleRef = useForkRef(itemRef, externalRef);
 
   const listContext = React.useContext(ListContext);
@@ -115,7 +115,7 @@ export default function useListItem<ItemValue>(
   return {
     getRootProps,
     highlighted,
-    ref: handleRef,
+    rootRef: handleRef,
     selected,
   };
 }
diff --git a/packages/mui-base/src/useList/useListItem.types.ts b/packages/mui-base/src/useList/useListItem.types.ts
index cd40d73bc4b3b6..64862e9ced0c8e 100644
--- a/packages/mui-base/src/useList/useListItem.types.ts
+++ b/packages/mui-base/src/useList/useListItem.types.ts
@@ -16,13 +16,14 @@ export interface UseListItemParameters<ItemValue> {
   /**
    * A ref to the list item's DOM element.
    */
-  ref?: React.Ref<HTMLElement>;
+  rootRef?: React.Ref<Element>;
 }
 
 interface UseListItemRootSlotOwnProps {
   id?: string;
   onClick: React.MouseEventHandler;
   onPointerOver: React.PointerEventHandler | undefined;
+  ref: React.RefCallback<Element> | null;
   tabIndex?: number;
 }
 
@@ -52,5 +53,5 @@ export interface UseListItemReturnValue {
   /**
    * The ref to the root element.
    */
-  ref: ((instance: HTMLElement | null) => void) | null;
+  rootRef: React.RefCallback<Element> | null;
 }
diff --git a/packages/mui-base/src/useMenu/useMenu.ts b/packages/mui-base/src/useMenu/useMenu.ts
index 4fd00a2f15dd92..031fee7fde5664 100644
--- a/packages/mui-base/src/useMenu/useMenu.ts
+++ b/packages/mui-base/src/useMenu/useMenu.ts
@@ -81,7 +81,7 @@ export default function useMenu(parameters: UseMenuParameters = {}): UseMenuRetu
     items: subitemKeys,
     itemStringifier: (id: string) =>
       subitems.get(id)?.label || subitems.get(id)?.ref.current?.innerText,
-    listRef: handleRef,
+    rootRef: handleRef,
     onStateChange: stateChangeHandler,
     reducerActionContext: { listboxRef },
     selectionMode: 'none',
diff --git a/packages/mui-base/src/useMenuItem/useMenuItem.ts b/packages/mui-base/src/useMenuItem/useMenuItem.ts
index cfc1a6ccf310ba..fe96840ebbf63a 100644
--- a/packages/mui-base/src/useMenuItem/useMenuItem.ts
+++ b/packages/mui-base/src/useMenuItem/useMenuItem.ts
@@ -35,7 +35,7 @@ export default function useMenuItem(params: UseMenuItemParameters): UseMenuItemR
   const {
     getRootProps: getListRootProps,
     highlighted,
-    ref: listItemRefHandler,
+    rootRef: listItemRefHandler,
   } = useListItem({
     item: id,
   });
diff --git a/packages/mui-base/src/useOption/useOption.ts b/packages/mui-base/src/useOption/useOption.ts
index 2db25a8671fbda..e7af6b820b2371 100644
--- a/packages/mui-base/src/useOption/useOption.ts
+++ b/packages/mui-base/src/useOption/useOption.ts
@@ -20,7 +20,7 @@ export default function useOption<Value>(params: UseOptionParameters<Value>): Us
 
   const {
     getRootProps: getListItemProps,
-    ref: listItemRefHandler,
+    rootRef: listItemRefHandler,
     highlighted,
     selected,
   } = useListItem({
diff --git a/packages/mui-base/src/useSelect/useSelect.ts b/packages/mui-base/src/useSelect/useSelect.ts
index 566fbd95e921c9..fe25e9e948c30c 100644
--- a/packages/mui-base/src/useSelect/useSelect.ts
+++ b/packages/mui-base/src/useSelect/useSelect.ts
@@ -222,7 +222,7 @@ function useSelect<OptionValue, Multiple extends boolean = false>(
     getItemId,
     controlledProps: controlledState,
     isItemDisabled,
-    listRef: handleListboxRef,
+    rootRef: handleListboxRef,
     onChange: handleSelectionChange,
     onHighlightChange: handleHighlightChange,
     onStateChange: handleStateChange,
diff --git a/packages/mui-base/src/useTab/useTab.ts b/packages/mui-base/src/useTab/useTab.ts
index 30d2f88fea8152..97b009949d3f71 100644
--- a/packages/mui-base/src/useTab/useTab.ts
+++ b/packages/mui-base/src/useTab/useTab.ts
@@ -40,7 +40,7 @@ function useTab(parameters: UseTabParameters): UseTabReturnValue {
 
   const {
     getRootProps: getTabProps,
-    ref: listItemRefHandler,
+    rootRef: listItemRefHandler,
     highlighted,
     selected,
   } = useListItem({
diff --git a/packages/mui-base/src/useTabsList/useTabsList.ts b/packages/mui-base/src/useTabsList/useTabsList.ts
index 26f45f440de181..d66091afed83d5 100644
--- a/packages/mui-base/src/useTabsList/useTabsList.ts
+++ b/packages/mui-base/src/useTabsList/useTabsList.ts
@@ -115,7 +115,7 @@ function useTabsList(parameters: UseTabsListParameters): UseTabsListReturnValue
     getItemDomElement: getTabElement,
     isItemDisabled,
     items: subitemKeys,
-    listRef: externalRef,
+    rootRef: externalRef,
     onChange: handleChange,
     orientation: listOrientation,
     reducerActionContext: React.useMemo(
diff --git a/packages/mui-base/src/useTabsList/useTabsList.types.ts b/packages/mui-base/src/useTabsList/useTabsList.types.ts
index c5556bbe9c5b05..583a99583e086a 100644
--- a/packages/mui-base/src/useTabsList/useTabsList.types.ts
+++ b/packages/mui-base/src/useTabsList/useTabsList.types.ts
@@ -6,7 +6,7 @@ export interface UseTabsListParameters {
   /**
    * Ref to the root element.
    */
-  ref: React.Ref<unknown>;
+  ref: React.Ref<Element>;
 }
 
 export type UseTabsListRootSlotProps<TOther = {}> = TOther & {

From a4424a6b055a2c0e40256aafa22f0b23642051aa Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C5=82=20Dudak?= <michal@dudak.me>
Date: Wed, 19 Apr 2023 14:43:14 +0200
Subject: [PATCH 04/15] useMenu

---
 docs/data/base/components/menu/UseMenu.tsx     | 2 +-
 packages/mui-base/src/useMenu/useMenu.ts       | 2 ++
 packages/mui-base/src/useMenu/useMenu.types.ts | 8 ++++++--
 3 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/docs/data/base/components/menu/UseMenu.tsx b/docs/data/base/components/menu/UseMenu.tsx
index cb72abf94df1ff..c756b1a44a7a02 100644
--- a/docs/data/base/components/menu/UseMenu.tsx
+++ b/docs/data/base/components/menu/UseMenu.tsx
@@ -33,7 +33,7 @@ const MenuItem = React.forwardRef(function MenuItem(
 ) {
   const { children, onClick, ...other } = props;
 
-  const { getRootProps, disabled, focusVisible } = useMenuItem({ ref });
+  const { getRootProps, disabled, focusVisible } = useMenuItem({ rootRef: ref });
 
   const classes = {
     'focus-visible': focusVisible,
diff --git a/packages/mui-base/src/useMenu/useMenu.ts b/packages/mui-base/src/useMenu/useMenu.ts
index 031fee7fde5664..69bd1a448835b4 100644
--- a/packages/mui-base/src/useMenu/useMenu.ts
+++ b/packages/mui-base/src/useMenu/useMenu.ts
@@ -67,6 +67,7 @@ export default function useMenu(parameters: UseMenuParameters = {}): UseMenuRetu
     getRootProps,
     contextValue: listContextValue,
     state: { open, highlightedValue },
+    rootRef: mergedListRef,
   } = useList({
     controlledProps,
     disabledItemsFocusable: true,
@@ -122,6 +123,7 @@ export default function useMenu(parameters: UseMenuParameters = {}): UseMenuRetu
     dispatch,
     getListboxProps,
     highlightedValue,
+    listboxRef: mergedListRef,
     menuItems: subitems,
     open,
   };
diff --git a/packages/mui-base/src/useMenu/useMenu.types.ts b/packages/mui-base/src/useMenu/useMenu.types.ts
index 219631da5b6bdc..821a73e7ca34ac 100644
--- a/packages/mui-base/src/useMenu/useMenu.types.ts
+++ b/packages/mui-base/src/useMenu/useMenu.types.ts
@@ -26,7 +26,7 @@ export interface UseMenuParameters {
   /**
    * Ref of the menu listbox.
    */
-  listboxRef?: React.Ref<any>;
+  listboxRef?: React.Ref<Element>;
 }
 
 export interface UseMenuReturnValue {
@@ -51,6 +51,10 @@ export interface UseMenuReturnValue {
    * The highlighted option in the menu listbox.
    */
   highlightedValue: string | null;
+  /**
+   * The ref to the listbox DOM node.
+   */
+  listboxRef: React.RefCallback<Element> | null;
   /**
    * Items in the menu listbox.
    */
@@ -69,7 +73,7 @@ interface UseMenuListboxSlotEventHandlers {
 export type UseMenuListboxSlotProps<TOther = {}> = UseListRootSlotProps<
   Omit<TOther, keyof UseMenuListboxSlotEventHandlers> & UseMenuListboxSlotEventHandlers
 > & {
-  ref: React.Ref<any>;
+  ref: React.RefCallback<Element> | null;
   role: React.AriaRole;
 };
 

From d1b63af66695c25d135f22ae816d51bbb1cd622e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C5=82=20Dudak?= <michal@dudak.me>
Date: Wed, 19 Apr 2023 15:40:10 +0200
Subject: [PATCH 05/15] useMenuItem

---
 packages/mui-base/src/MenuItemUnstyled/MenuItemUnstyled.tsx | 2 +-
 packages/mui-base/src/useMenuItem/useMenuItem.ts            | 6 +++---
 packages/mui-base/src/useMenuItem/useMenuItem.types.ts      | 4 ++--
 3 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/packages/mui-base/src/MenuItemUnstyled/MenuItemUnstyled.tsx b/packages/mui-base/src/MenuItemUnstyled/MenuItemUnstyled.tsx
index c3ad98dff7b6e0..314d21c0870be9 100644
--- a/packages/mui-base/src/MenuItemUnstyled/MenuItemUnstyled.tsx
+++ b/packages/mui-base/src/MenuItemUnstyled/MenuItemUnstyled.tsx
@@ -47,7 +47,7 @@ const MenuItemUnstyled = React.forwardRef(function MenuItemUnstyled<
 
   const { getRootProps, disabled, focusVisible, highlighted } = useMenuItem({
     disabled: disabledProp,
-    ref,
+    rootRef: ref,
     label,
   });
 
diff --git a/packages/mui-base/src/useMenuItem/useMenuItem.ts b/packages/mui-base/src/useMenuItem/useMenuItem.ts
index fe96840ebbf63a..37231fc002061f 100644
--- a/packages/mui-base/src/useMenuItem/useMenuItem.ts
+++ b/packages/mui-base/src/useMenuItem/useMenuItem.ts
@@ -22,7 +22,7 @@ import { useCompoundItem } from '../utils/useCompoundItem';
  * - [useMenuItem API](https://mui.com/base/react-menu/hooks-api/#use-menu-item)
  */
 export default function useMenuItem(params: UseMenuItemParameters): UseMenuItemReturnValue {
-  const { disabled = false, id: idParam, ref: externalRef, label } = params;
+  const { disabled = false, id: idParam, rootRef: externalRef, label } = params;
 
   const id = useId(idParam);
   const itemRef = React.useRef<HTMLElement>(null);
@@ -71,7 +71,7 @@ export default function useMenuItem(params: UseMenuItemParameters): UseMenuItemR
       highlighted: false,
       index: -1,
       totalItemCount: 0,
-      ref: handleRef,
+      rootRef: handleRef,
     };
   }
 
@@ -104,6 +104,6 @@ export default function useMenuItem(params: UseMenuItemParameters): UseMenuItemR
     highlighted,
     index,
     totalItemCount,
-    ref: handleRef,
+    rootRef: handleRef,
   };
 }
diff --git a/packages/mui-base/src/useMenuItem/useMenuItem.types.ts b/packages/mui-base/src/useMenuItem/useMenuItem.types.ts
index 6a4bd202a2fd94..c27093584f36c4 100644
--- a/packages/mui-base/src/useMenuItem/useMenuItem.types.ts
+++ b/packages/mui-base/src/useMenuItem/useMenuItem.types.ts
@@ -22,7 +22,7 @@ export interface UseMenuItemParameters {
   disabled?: boolean;
   id?: string;
   onClick?: React.MouseEventHandler<any>;
-  ref: React.Ref<any>;
+  rootRef: React.Ref<Element>;
   label?: string;
 }
 
@@ -54,7 +54,7 @@ export interface UseMenuItemReturnValue {
   /**
    * The ref to the component's root DOM element.
    */
-  ref: ((instance: unknown) => void) | null;
+  rootRef: React.RefCallback<Element> | null;
   /**
    * Total number of items in the menu.
    */

From 2abd7770ab95305ef03f708f94f4a13bcec86eb7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C5=82=20Dudak?= <michal@dudak.me>
Date: Wed, 19 Apr 2023 15:51:11 +0200
Subject: [PATCH 06/15] useOption

---
 packages/mui-base/src/OptionUnstyled/OptionUnstyled.tsx | 2 +-
 packages/mui-base/src/useOption/useOption.ts            | 6 +++---
 packages/mui-base/src/useOption/useOption.types.ts      | 8 ++++----
 packages/mui-joy/src/MenuItem/MenuItem.tsx              | 2 +-
 packages/mui-joy/src/Option/Option.tsx                  | 2 +-
 5 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/packages/mui-base/src/OptionUnstyled/OptionUnstyled.tsx b/packages/mui-base/src/OptionUnstyled/OptionUnstyled.tsx
index 728a796923bfaa..e473eab2b796f4 100644
--- a/packages/mui-base/src/OptionUnstyled/OptionUnstyled.tsx
+++ b/packages/mui-base/src/OptionUnstyled/OptionUnstyled.tsx
@@ -53,7 +53,7 @@ const OptionUnstyled = React.forwardRef(function OptionUnstyled<OptionValue>(
   const { getRootProps, selected, highlighted, index } = useOption({
     disabled,
     label: computedLabel,
-    optionRef: combinedRef,
+    rootRef: combinedRef,
     value,
   });
 
diff --git a/packages/mui-base/src/useOption/useOption.ts b/packages/mui-base/src/useOption/useOption.ts
index e7af6b820b2371..7f3c712412e3bb 100644
--- a/packages/mui-base/src/useOption/useOption.ts
+++ b/packages/mui-base/src/useOption/useOption.ts
@@ -16,7 +16,7 @@ import { useCompoundItem } from '../utils/useCompoundItem';
  * - [useOption API](https://mui.com/base/react-select/hooks-api/#use-option)
  */
 export default function useOption<Value>(params: UseOptionParameters<Value>): UseOptionReturnValue {
-  const { value, label, disabled, optionRef: optionRefParam, id: idParam } = params;
+  const { value, label, disabled, rootRef: optionRefParam, id: idParam } = params;
 
   const {
     getRootProps: getListItemProps,
@@ -29,7 +29,7 @@ export default function useOption<Value>(params: UseOptionParameters<Value>): Us
 
   const id = useId(idParam);
 
-  const optionRef = React.useRef<HTMLElement>(null);
+  const optionRef = React.useRef<Element>(null);
 
   const selectOption: SelectOption<Value> = React.useMemo(
     () => ({
@@ -58,6 +58,6 @@ export default function useOption<Value>(params: UseOptionParameters<Value>): Us
     highlighted,
     index,
     selected,
-    ref: handleRef,
+    rootRef: handleRef,
   };
 }
diff --git a/packages/mui-base/src/useOption/useOption.types.ts b/packages/mui-base/src/useOption/useOption.types.ts
index 4f2e7cc94200b6..7693a3c9fa40ef 100644
--- a/packages/mui-base/src/useOption/useOption.types.ts
+++ b/packages/mui-base/src/useOption/useOption.types.ts
@@ -5,7 +5,7 @@ export interface SelectOption<Value> {
   value: Value;
   label: React.ReactNode;
   disabled?: boolean;
-  ref: React.RefObject<HTMLElement>;
+  ref: React.RefObject<Element>;
   id?: string;
 }
 
@@ -13,7 +13,7 @@ export interface UseOptionParameters<Value> {
   disabled: boolean;
   label: string | React.ReactNode;
   value: Value;
-  optionRef?: React.Ref<HTMLElement>;
+  rootRef?: React.Ref<Element>;
   id?: string;
 }
 
@@ -24,10 +24,10 @@ export interface UseOptionReturnValue {
   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;
diff --git a/packages/mui-joy/src/MenuItem/MenuItem.tsx b/packages/mui-joy/src/MenuItem/MenuItem.tsx
index 375cdee6af82b7..55ba8b162a768d 100644
--- a/packages/mui-joy/src/MenuItem/MenuItem.tsx
+++ b/packages/mui-joy/src/MenuItem/MenuItem.tsx
@@ -69,7 +69,7 @@ const MenuItem = React.forwardRef(function MenuItem(inProps, ref) {
 
   const { getRootProps, disabled, focusVisible } = useMenuItem({
     disabled: disabledProp,
-    ref,
+    rootRef: ref,
   });
 
   const ownerState = {
diff --git a/packages/mui-joy/src/Option/Option.tsx b/packages/mui-joy/src/Option/Option.tsx
index 2838ee6dea46fd..dfcdffdb68e6bd 100644
--- a/packages/mui-joy/src/Option/Option.tsx
+++ b/packages/mui-joy/src/Option/Option.tsx
@@ -73,7 +73,7 @@ const Option = React.forwardRef(function Option(inProps, ref: React.ForwardedRef
     disabled,
     label: computedLabel,
     value,
-    optionRef: combinedRef,
+    rootRef: combinedRef,
   });
 
   const { getColor } = useColorInversion(variant);

From 09046afb48ea004c83de1205dbddd1bab9fb341b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C5=82=20Dudak?= <michal@dudak.me>
Date: Wed, 19 Apr 2023 16:22:59 +0200
Subject: [PATCH 07/15] useSelect

---
 packages/mui-base/src/useSelect/useSelect.ts       | 6 +++++-
 packages/mui-base/src/useSelect/useSelect.types.ts | 8 ++++++++
 2 files changed, 13 insertions(+), 1 deletion(-)

diff --git a/packages/mui-base/src/useSelect/useSelect.ts b/packages/mui-base/src/useSelect/useSelect.ts
index fe25e9e948c30c..c6b6b382a9d42d 100644
--- a/packages/mui-base/src/useSelect/useSelect.ts
+++ b/packages/mui-base/src/useSelect/useSelect.ts
@@ -124,6 +124,7 @@ function useSelect<OptionValue, Multiple extends boolean = false>(
     getRootProps: getButtonRootProps,
     active: buttonActive,
     focusVisible: buttonFocusVisible,
+    rootRef: mergedButtonRef,
   } = useButton({
     disabled,
     rootRef: handleButtonRef,
@@ -238,6 +239,7 @@ function useSelect<OptionValue, Multiple extends boolean = false>(
     getRootProps: getListboxRootProps,
     contextValue: listContextValue,
     state: { open, highlightedValue: highlightedOption, selectedValues: selectedOptions },
+    rootRef: mergedListboxRef,
   } = useList(useListParameters);
 
   React.useEffect(() => {
@@ -387,12 +389,14 @@ function useSelect<OptionValue, Multiple extends boolean = false>(
   return {
     buttonActive,
     buttonFocusVisible,
+    buttonRef: mergedButtonRef,
+    contextValue,
     disabled,
     dispatch,
     getButtonProps,
     getListboxProps,
     getOptionMetadata,
-    contextValue,
+    listboxRef: mergedListboxRef,
     open,
     options: optionValues,
     value: selectValue,
diff --git a/packages/mui-base/src/useSelect/useSelect.types.ts b/packages/mui-base/src/useSelect/useSelect.types.ts
index b30ff7f200561c..674822809f6705 100644
--- a/packages/mui-base/src/useSelect/useSelect.types.ts
+++ b/packages/mui-base/src/useSelect/useSelect.types.ts
@@ -131,6 +131,10 @@ export interface UseSelectReturnValue<Value, Multiple> {
    * If `true`, the trigger button has a visible focus.
    */
   buttonFocusVisible: boolean;
+  /**
+   * Ref to the button slot DOM node.
+   */
+  buttonRef: React.RefCallback<Element> | null;
   /**
    * If `true`, the select is disabled.
    */
@@ -171,6 +175,10 @@ export interface UseSelectReturnValue<Value, Multiple> {
    * The value of the highlighted option.
    */
   highlightedOption: Value | null;
+  /**
+   * Ref to the listbox slot DOM node.
+   */
+  listboxRef: React.RefCallback<Element> | null;
   /**
    * If `true`, the listbox is open.
    */

From 10393404b51649da1ddc7aac53718129a4767c0b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C5=82=20Dudak?= <michal@dudak.me>
Date: Wed, 19 Apr 2023 16:34:24 +0200
Subject: [PATCH 08/15] useSlider

---
 packages/mui-base/src/SliderUnstyled/SliderUnstyled.tsx | 2 +-
 packages/mui-base/src/useSlider/useSlider.ts            | 3 ++-
 packages/mui-base/src/useSlider/useSlider.types.ts      | 8 ++++++--
 packages/mui-joy/src/Slider/Slider.tsx                  | 2 +-
 packages/mui-material/src/Slider/Slider.js              | 2 +-
 5 files changed, 11 insertions(+), 6 deletions(-)

diff --git a/packages/mui-base/src/SliderUnstyled/SliderUnstyled.tsx b/packages/mui-base/src/SliderUnstyled/SliderUnstyled.tsx
index 1e7e1be1cdfd51..e7771a0608ca06 100644
--- a/packages/mui-base/src/SliderUnstyled/SliderUnstyled.tsx
+++ b/packages/mui-base/src/SliderUnstyled/SliderUnstyled.tsx
@@ -126,7 +126,7 @@ const SliderUnstyled = React.forwardRef(function SliderUnstyled<
     values,
     trackOffset,
     trackLeap,
-  } = useSlider({ ...partialOwnerState, ref });
+  } = useSlider({ ...partialOwnerState, rootRef: ref });
 
   const ownerState: SliderUnstyledOwnerState = {
     ...partialOwnerState,
diff --git a/packages/mui-base/src/useSlider/useSlider.ts b/packages/mui-base/src/useSlider/useSlider.ts
index 8e1f2c9631799f..b25bd47537a894 100644
--- a/packages/mui-base/src/useSlider/useSlider.ts
+++ b/packages/mui-base/src/useSlider/useSlider.ts
@@ -202,7 +202,7 @@ export default function useSlider(parameters: UseSliderParameters): UseSliderRet
     onChange,
     onChangeCommitted,
     orientation = 'horizontal',
-    ref,
+    rootRef: ref,
     scale = Identity,
     step = 1,
     tabIndex,
@@ -695,6 +695,7 @@ export default function useSlider(parameters: UseSliderParameters): UseSliderRet
     marks: marks as Mark[],
     open,
     range,
+    rootRef: handleRef,
     trackLeap,
     trackOffset,
     values,
diff --git a/packages/mui-base/src/useSlider/useSlider.types.ts b/packages/mui-base/src/useSlider/useSlider.types.ts
index a63a5d413064df..0744ad4ae0c792 100644
--- a/packages/mui-base/src/useSlider/useSlider.types.ts
+++ b/packages/mui-base/src/useSlider/useSlider.types.ts
@@ -73,7 +73,7 @@ export interface UseSliderParameters {
   /**
    * The ref attached to the root of the Slider.
    */
-  ref: React.Ref<any>;
+  rootRef?: React.Ref<Element>;
   /**
    * A transformation function, to change the scale of the slider.
    * @param {any} x
@@ -110,7 +110,7 @@ export interface Mark {
 
 export type UseSliderRootSlotOwnProps = {
   onMouseDown: React.MouseEventHandler;
-  ref: React.Ref<any>;
+  ref: React.RefCallback<Element> | null;
 };
 
 export type UseSliderRootSlotProps<TOther = {}> = Omit<TOther, keyof UseSliderRootSlotOwnProps> &
@@ -228,6 +228,10 @@ export interface UseSliderReturnValue {
    * If `true`, the slider is a range slider when the `value` prop passed is an array.
    */
   range: boolean;
+  /**
+   * Ref to the root slot's DOM node.
+   */
+  rootRef: React.RefCallback<Element> | null;
   /**
    * The track leap for the current value of the slider.
    */
diff --git a/packages/mui-joy/src/Slider/Slider.tsx b/packages/mui-joy/src/Slider/Slider.tsx
index bab6d217b8596b..05fb1842b0603f 100644
--- a/packages/mui-joy/src/Slider/Slider.tsx
+++ b/packages/mui-joy/src/Slider/Slider.tsx
@@ -471,7 +471,7 @@ const Slider = React.forwardRef(function Slider(inProps, ref) {
     values,
     trackOffset,
     trackLeap,
-  } = useSlider({ ...ownerState, ref });
+  } = useSlider({ ...ownerState, rootRef: ref });
 
   ownerState.marked = marks.length > 0 && marks.some((mark) => mark.label);
   ownerState.dragging = dragging;
diff --git a/packages/mui-material/src/Slider/Slider.js b/packages/mui-material/src/Slider/Slider.js
index cdd5d988faa2c5..10a716720c75aa 100644
--- a/packages/mui-material/src/Slider/Slider.js
+++ b/packages/mui-material/src/Slider/Slider.js
@@ -569,7 +569,7 @@ const Slider = React.forwardRef(function Slider(inputProps, ref) {
     values,
     trackOffset,
     trackLeap,
-  } = useSlider({ ...ownerState, ref });
+  } = useSlider({ ...ownerState, rootRef: ref });
 
   ownerState.marked = marks.length > 0 && marks.some((mark) => mark.label);
   ownerState.dragging = dragging;

From 84241b572d50025c3277085645b4bbb291fead26 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C5=82=20Dudak?= <michal@dudak.me>
Date: Wed, 19 Apr 2023 16:41:34 +0200
Subject: [PATCH 09/15] useSnackbar

---
 packages/mui-base/src/SnackbarUnstyled/SnackbarUnstyled.tsx | 1 -
 packages/mui-base/src/useSnackbar/useSnackbar.ts            | 2 --
 packages/mui-base/src/useSnackbar/useSnackbar.types.ts      | 3 +--
 packages/mui-material/src/Snackbar/Snackbar.js              | 5 ++++-
 4 files changed, 5 insertions(+), 6 deletions(-)

diff --git a/packages/mui-base/src/SnackbarUnstyled/SnackbarUnstyled.tsx b/packages/mui-base/src/SnackbarUnstyled/SnackbarUnstyled.tsx
index 62f1d93b494408..37251dcdec051b 100644
--- a/packages/mui-base/src/SnackbarUnstyled/SnackbarUnstyled.tsx
+++ b/packages/mui-base/src/SnackbarUnstyled/SnackbarUnstyled.tsx
@@ -63,7 +63,6 @@ const SnackbarUnstyled = React.forwardRef(function SnackbarUnstyled(
     onClose,
     open,
     resumeHideDuration,
-    ref,
   });
 
   const ownerState: SnackbarUnstyledOwnerState = props;
diff --git a/packages/mui-base/src/useSnackbar/useSnackbar.ts b/packages/mui-base/src/useSnackbar/useSnackbar.ts
index 0d0d110797ce1a..58e22f6cd50dc5 100644
--- a/packages/mui-base/src/useSnackbar/useSnackbar.ts
+++ b/packages/mui-base/src/useSnackbar/useSnackbar.ts
@@ -24,7 +24,6 @@ export default function useSnackbar(parameters: UseSnackbarParameters): UseSnack
     disableWindowBlurListener = false,
     onClose,
     open,
-    ref,
     resumeHideDuration,
   } = parameters;
 
@@ -157,7 +156,6 @@ export default function useSnackbar(parameters: UseSnackbarParameters): UseSnack
     };
 
     return {
-      ref,
       // ClickAwayListener adds an `onClick` prop which results in the alert not being announced.
       // See https://github.com/mui/material-ui/issues/29080
       role: 'presentation',
diff --git a/packages/mui-base/src/useSnackbar/useSnackbar.types.ts b/packages/mui-base/src/useSnackbar/useSnackbar.types.ts
index c3ad16b1d780c4..037af18b22bf08 100644
--- a/packages/mui-base/src/useSnackbar/useSnackbar.types.ts
+++ b/packages/mui-base/src/useSnackbar/useSnackbar.types.ts
@@ -29,7 +29,6 @@ export interface UseSnackbarParameters {
    * If `true`, the component is shown.
    */
   open?: boolean;
-  ref?: React.Ref<any>;
   /**
    * The number of milliseconds to wait before dismissing after user interaction.
    * If `autoHideDuration` prop isn't specified, it does nothing.
@@ -46,7 +45,7 @@ export interface UseSnackbarRootSlotOwnProps {
   onFocus: React.FocusEventHandler;
   onMouseEnter: React.MouseEventHandler;
   onMouseLeave: React.MouseEventHandler;
-  ref?: React.Ref<any>;
+  ref?: React.RefCallback<Element>;
   role: React.AriaRole;
 }
 
diff --git a/packages/mui-material/src/Snackbar/Snackbar.js b/packages/mui-material/src/Snackbar/Snackbar.js
index 1951cb34673fd4..91fca324b9b4f8 100644
--- a/packages/mui-material/src/Snackbar/Snackbar.js
+++ b/packages/mui-material/src/Snackbar/Snackbar.js
@@ -114,7 +114,7 @@ const Snackbar = React.forwardRef(function Snackbar(inProps, ref) {
 
   const classes = useUtilityClasses(ownerState);
 
-  const { getRootProps, onClickAway } = useSnackbar({ ...ownerState, ref });
+  const { getRootProps, onClickAway } = useSnackbar({ ...ownerState });
 
   const [exited, setExited] = React.useState(true);
 
@@ -123,6 +123,9 @@ const Snackbar = React.forwardRef(function Snackbar(inProps, ref) {
     getSlotProps: getRootProps,
     externalForwardedProps: other,
     ownerState,
+    additionalProps: {
+      ref,
+    },
     className: [classes.root, className],
   });
 

From 3b4efbe6c4a41b36a69d9f2c09cada4a5d8dd7ad Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C5=82=20Dudak?= <michal@dudak.me>
Date: Wed, 19 Apr 2023 16:48:47 +0200
Subject: [PATCH 10/15] useSwitch

---
 packages/mui-base/src/useSwitch/useSwitch.ts       | 7 ++++---
 packages/mui-base/src/useSwitch/useSwitch.types.ts | 6 +++++-
 2 files changed, 9 insertions(+), 4 deletions(-)

diff --git a/packages/mui-base/src/useSwitch/useSwitch.ts b/packages/mui-base/src/useSwitch/useSwitch.ts
index 295bf74fff9d2f..959b951625fee8 100644
--- a/packages/mui-base/src/useSwitch/useSwitch.ts
+++ b/packages/mui-base/src/useSwitch/useSwitch.ts
@@ -66,7 +66,7 @@ export default function useSwitch(props: UseSwitchParameters): UseSwitchReturnVa
     isFocusVisibleRef.current = focusVisible;
   }, [focusVisible, isFocusVisibleRef]);
 
-  const inputRef = React.useRef<any>(null);
+  const inputRef = React.useRef<HTMLInputElement | null>(null);
 
   const createHandleFocus =
     (otherProps: React.InputHTMLAttributes<HTMLInputElement>) =>
@@ -99,14 +99,14 @@ export default function useSwitch(props: UseSwitchParameters): UseSwitchReturnVa
       otherProps.onBlur?.(event);
     };
 
-  const handleRefChange = useForkRef(focusVisibleRef, inputRef);
+  const handleInputRef = useForkRef(focusVisibleRef, inputRef);
 
   const getInputProps: UseSwitchReturnValue['getInputProps'] = (otherProps = {}) => ({
     checked: checkedProp,
     defaultChecked,
     disabled,
     readOnly,
-    ref: handleRefChange,
+    ref: handleInputRef,
     required,
     type: 'checkbox',
     ...otherProps,
@@ -120,6 +120,7 @@ export default function useSwitch(props: UseSwitchParameters): UseSwitchReturnVa
     disabled: Boolean(disabled),
     focusVisible,
     getInputProps,
+    inputRef: handleInputRef,
     readOnly: Boolean(readOnly),
   };
 }
diff --git a/packages/mui-base/src/useSwitch/useSwitch.types.ts b/packages/mui-base/src/useSwitch/useSwitch.types.ts
index 7abb2d5da9ff7e..ce3c791e0bf8eb 100644
--- a/packages/mui-base/src/useSwitch/useSwitch.types.ts
+++ b/packages/mui-base/src/useSwitch/useSwitch.types.ts
@@ -42,7 +42,7 @@ interface UseSwitchInputSlotOwnProps {
   onChange: React.ChangeEventHandler<HTMLInputElement>;
   onFocus: React.FocusEventHandler;
   readOnly?: boolean;
-  ref: React.Ref<any>;
+  ref: React.RefCallback<HTMLInputElement> | null;
   required?: boolean;
   type: React.HTMLInputTypeAttribute;
 }
@@ -72,6 +72,10 @@ export interface UseSwitchReturnValue {
   getInputProps: (
     externalProps?: React.HTMLAttributes<HTMLInputElement>,
   ) => UseSwitchInputSlotProps;
+  /**
+   * Ref to the input slot's DOM node.
+   */
+  inputRef: React.RefCallback<HTMLInputElement> | null;
   /**
    * If `true`, the component will be read only.
    */

From 5250dde66ac042fa05d68546bde3a10ad9fdbac4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C5=82=20Dudak?= <michal@dudak.me>
Date: Wed, 19 Apr 2023 17:00:05 +0200
Subject: [PATCH 11/15] Tabs

---
 .../mui-base/src/TabUnstyled/TabUnstyled.tsx  |  2 +-
 .../src/TabsListUnstyled/TabsListUnstyled.tsx |  2 +-
 packages/mui-base/src/useTab/useTab.ts        |  3 +-
 packages/mui-base/src/useTab/useTab.types.ts  |  9 ++++--
 .../mui-base/src/useTabsList/useTabsList.ts   | 13 ++++-----
 .../src/useTabsList/useTabsList.types.ts      | 29 ++++++++++---------
 packages/mui-joy/src/Tab/Tab.test.tsx         |  2 +-
 packages/mui-joy/src/Tab/Tab.tsx              |  4 +--
 packages/mui-joy/src/TabList/TabList.tsx      |  2 +-
 packages/mui-material-next/src/Tab/Tab.js     |  3 +-
 .../mui-material-next/src/Tabs/TabsList.js    |  2 +-
 11 files changed, 38 insertions(+), 33 deletions(-)

diff --git a/packages/mui-base/src/TabUnstyled/TabUnstyled.tsx b/packages/mui-base/src/TabUnstyled/TabUnstyled.tsx
index 03fc10ec8960e6..ef3619c56ca8a2 100644
--- a/packages/mui-base/src/TabUnstyled/TabUnstyled.tsx
+++ b/packages/mui-base/src/TabUnstyled/TabUnstyled.tsx
@@ -53,7 +53,7 @@ const TabUnstyled = React.forwardRef<unknown, TabUnstyledProps>(function TabUnst
 
   const { active, highlighted, selected, getRootProps } = useTab({
     ...props,
-    ref: handleRef,
+    rootRef: handleRef,
   });
 
   const ownerState = {
diff --git a/packages/mui-base/src/TabsListUnstyled/TabsListUnstyled.tsx b/packages/mui-base/src/TabsListUnstyled/TabsListUnstyled.tsx
index 0c8208aa2f8615..6c4654afe5c4aa 100644
--- a/packages/mui-base/src/TabsListUnstyled/TabsListUnstyled.tsx
+++ b/packages/mui-base/src/TabsListUnstyled/TabsListUnstyled.tsx
@@ -40,7 +40,7 @@ const TabsListUnstyled = React.forwardRef<Element, TabsListUnstyledProps>(functi
   const { children, component, slotProps = {}, slots = {}, ...other } = props;
 
   const { isRtl, orientation, getRootProps, contextValue } = useTabsList({
-    ref,
+    rootRef: ref,
   });
 
   const ownerState = {
diff --git a/packages/mui-base/src/useTab/useTab.ts b/packages/mui-base/src/useTab/useTab.ts
index 97b009949d3f71..de87aa21d32525 100644
--- a/packages/mui-base/src/useTab/useTab.ts
+++ b/packages/mui-base/src/useTab/useTab.ts
@@ -23,7 +23,7 @@ function tabValueGenerator(otherTabValues: Set<string | number>) {
  * - [useTab API](https://mui.com/base/react-tabs/hooks-api/#use-tab)
  */
 function useTab(parameters: UseTabParameters): UseTabReturnValue {
-  const { value: valueParam, ref: externalRef, disabled = false, id: idParam } = parameters;
+  const { value: valueParam, rootRef: externalRef, disabled = false, id: idParam } = parameters;
 
   const tabRef = React.useRef<HTMLElement>(null);
   const id = useId(idParam);
@@ -92,6 +92,7 @@ function useTab(parameters: UseTabParameters): UseTabReturnValue {
     focusVisible,
     highlighted,
     index,
+    rootRef: handleRef,
     // the `selected` state isn't set on the server (it relies on effects to be calculated),
     // so we fall back to checking the `value` prop with the selectedValue from the TabsContext
     selected: selected || value === selectedValue,
diff --git a/packages/mui-base/src/useTab/useTab.types.ts b/packages/mui-base/src/useTab/useTab.types.ts
index a0dc1d621a029d..eb01fc1a7ccc80 100644
--- a/packages/mui-base/src/useTab/useTab.types.ts
+++ b/packages/mui-base/src/useTab/useTab.types.ts
@@ -26,15 +26,16 @@ export interface UseTabParameters {
    */
   id?: string;
   /**
-   * 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>;
 }
 
 export type UseTabRootSlotProps<TOther = {}> = UseButtonRootSlotProps<TOther> & {
   'aria-controls': React.AriaAttributes['aria-controls'];
   'aria-selected': React.AriaAttributes['aria-selected'];
   id: string | undefined;
+  ref: React.RefCallback<Element> | null;
   role: React.AriaRole;
 };
 
@@ -64,6 +65,10 @@ export interface UseTabReturnValue {
    * 0-based index of the tab in the list of tabs.
    */
   index: number;
+  /**
+   * Ref to the root slot's DOM element.
+   */
+  rootRef: React.RefCallback<Element> | null;
   /**
    * If `true`, the tab is selected.
    */
diff --git a/packages/mui-base/src/useTabsList/useTabsList.ts b/packages/mui-base/src/useTabsList/useTabsList.ts
index d66091afed83d5..d4a1a16b075a2a 100644
--- a/packages/mui-base/src/useTabsList/useTabsList.ts
+++ b/packages/mui-base/src/useTabsList/useTabsList.ts
@@ -24,7 +24,7 @@ import tabsListReducer from './tabsListReducer';
  * - [useTabsList API](https://mui.com/base/react-tabs/hooks-api/#use-tabs-list)
  */
 function useTabsList(parameters: UseTabsListParameters): UseTabsListReturnValue {
-  const { ref: externalRef } = parameters;
+  const { rootRef: externalRef } = parameters;
 
   const {
     direction = 'ltr',
@@ -103,6 +103,7 @@ function useTabsList(parameters: UseTabsListParameters): UseTabsListReturnValue
     dispatch,
     getRootProps: getListboxRootProps,
     state: { highlightedValue, selectedValues },
+    rootRef: mergedRootRef,
   } = useList<
     string | number,
     ListState<string | number>,
@@ -152,16 +153,14 @@ function useTabsList(parameters: UseTabsListParameters): UseTabsListReturnValue
   };
 
   return {
+    contextValue: { ...compoundComponentContextValue, ...listContextValue },
     dispatch,
+    getRootProps,
+    highlightedValue,
     isRtl,
     orientation,
+    rootRef: mergedRootRef,
     selectedValue: selectedValues[0] ?? null,
-    highlightedValue,
-    getRootProps,
-    contextValue: {
-      ...compoundComponentContextValue,
-      ...listContextValue,
-    },
   };
 }
 
diff --git a/packages/mui-base/src/useTabsList/useTabsList.types.ts b/packages/mui-base/src/useTabsList/useTabsList.types.ts
index 583a99583e086a..e7dadbc3357e3f 100644
--- a/packages/mui-base/src/useTabsList/useTabsList.types.ts
+++ b/packages/mui-base/src/useTabsList/useTabsList.types.ts
@@ -6,7 +6,7 @@ export interface UseTabsListParameters {
   /**
    * Ref to the root element.
    */
-  ref: React.Ref<Element>;
+  rootRef: React.Ref<Element>;
 }
 
 export type UseTabsListRootSlotProps<TOther = {}> = TOther & {
@@ -14,16 +14,28 @@ export type UseTabsListRootSlotProps<TOther = {}> = TOther & {
   'aria-labelledby'?: React.AriaAttributes['aria-labelledby'];
   'aria-orientation'?: React.AriaAttributes['aria-orientation'];
   role: React.AriaRole;
-  ref: React.Ref<any>;
+  ref: React.RefCallback<Element> | null;
   onKeyDown?: React.KeyboardEventHandler<HTMLElement>;
 };
 
 export interface UseTabsListReturnValue {
+  /**
+   * The value to be passed to the TabListProvider above all the tabs.
+   */
+  contextValue: TabsListProviderValue;
   /**
    * Action dispatcher for the tabs list component.
    * Allows to programmatically control the tabs list.
    */
   dispatch: (action: ListAction<string | number>) => void;
+  /**
+   * 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.
    */
@@ -38,22 +50,11 @@ export interface UseTabsListReturnValue {
    * @default 'horizontal'
    */
   orientation: 'horizontal' | 'vertical';
+  rootRef: React.RefCallback<Element> | null;
   /**
    * 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;
 }
 
 export const TabsListActionTypes = {
diff --git a/packages/mui-joy/src/Tab/Tab.test.tsx b/packages/mui-joy/src/Tab/Tab.test.tsx
index b94a892f17b596..da1341a195f985 100644
--- a/packages/mui-joy/src/Tab/Tab.test.tsx
+++ b/packages/mui-joy/src/Tab/Tab.test.tsx
@@ -9,7 +9,7 @@ import Tab, { tabClasses as classes } from '@mui/joy/Tab';
 
 function TabsListProvider({ children }: React.PropsWithChildren<{}>) {
   const { contextValue: tabsListContextValue } = useTabsList({
-    ref: { current: null },
+    rootRef: { current: null },
   });
   return <BaseTabsListProvider value={tabsListContextValue}>{children}</BaseTabsListProvider>;
 }
diff --git a/packages/mui-joy/src/Tab/Tab.tsx b/packages/mui-joy/src/Tab/Tab.tsx
index b186fbd254b81e..962013d589165b 100644
--- a/packages/mui-joy/src/Tab/Tab.tsx
+++ b/packages/mui-joy/src/Tab/Tab.tsx
@@ -92,11 +92,11 @@ const Tab = React.forwardRef(function Tab(inProps, ref) {
   const color = getColor(inProps.color, colorProp);
 
   const tabRef = React.useRef<HTMLButtonElement | HTMLAnchorElement | HTMLElement>();
-  const handleRef = useForkRef(tabRef, ref);
+  const handleRef = useForkRef(tabRef, ref) as React.RefCallback<Element>;
 
   const { active, focusVisible, setFocusVisible, selected, getRootProps } = useTab({
     ...props,
-    ref: handleRef,
+    rootRef: handleRef,
   });
 
   React.useImperativeHandle(
diff --git a/packages/mui-joy/src/TabList/TabList.tsx b/packages/mui-joy/src/TabList/TabList.tsx
index bc334d2fd2ad85..a47ab032e990de 100644
--- a/packages/mui-joy/src/TabList/TabList.tsx
+++ b/packages/mui-joy/src/TabList/TabList.tsx
@@ -74,7 +74,7 @@ const TabList = React.forwardRef(function TabList(inProps, ref) {
   const color = getColor(inProps.color, colorProp);
 
   const { isRtl, orientation, getRootProps, contextValue } = useTabsList({
-    ref,
+    rootRef: ref,
   });
 
   const size = sizeProp ?? tabsSize;
diff --git a/packages/mui-material-next/src/Tab/Tab.js b/packages/mui-material-next/src/Tab/Tab.js
index cfbeef0b22bbaa..bfb4e3b2ca6d9d 100644
--- a/packages/mui-material-next/src/Tab/Tab.js
+++ b/packages/mui-material-next/src/Tab/Tab.js
@@ -140,7 +140,7 @@ const Tab = React.forwardRef(function Tab(inProps, ref) {
     ...other
   } = props;
 
-  const { disabled, selected, getRootProps } = useTab(props);
+  const { disabled, selected, getRootProps } = useTab({ ...props, rootRef: ref });
 
   let indicator = indicatorProp;
   let textColor = textColorProp;
@@ -178,7 +178,6 @@ const Tab = React.forwardRef(function Tab(inProps, ref) {
     <TabRoot
       focusRipple={!disableFocusRipple}
       className={clsx(classes.root, className)}
-      ref={ref}
       ownerState={ownerState}
       {...other}
       {...getRootProps()}
diff --git a/packages/mui-material-next/src/Tabs/TabsList.js b/packages/mui-material-next/src/Tabs/TabsList.js
index ceb35eb1f1a614..3359506906d912 100644
--- a/packages/mui-material-next/src/Tabs/TabsList.js
+++ b/packages/mui-material-next/src/Tabs/TabsList.js
@@ -31,7 +31,7 @@ const FlexContainer = styled('div', {
 const TabsList = React.forwardRef((props, ref) => {
   const { variant, indicator, textColor, children, ...other } = props;
 
-  const { getRootProps, contextValue } = useTabsList({ ...props, ref });
+  const { getRootProps, contextValue } = useTabsList({ ...props, rootRef: ref });
 
   const tabsListContextValue = React.useMemo(
     () => ({

From 6834145b9a73dc4e6f08959d5faf0b3590e7934a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C5=82=20Dudak?= <michal@dudak.me>
Date: Fri, 21 Apr 2023 07:34:40 -0400
Subject: [PATCH 12/15] Components

---
 .../src/ButtonUnstyled/ButtonUnstyled.tsx     |   2 +-
 .../FormControlUnstyled.tsx                   |   4 +-
 .../src/InputUnstyled/InputUnstyled.tsx       |   2 +-
 .../src/MenuItemUnstyled/MenuItemUnstyled.tsx |   4 +-
 .../src/MenuUnstyled/MenuUnstyled.tsx         |   2 +-
 .../src/ModalUnstyled/ModalUnstyled.tsx       |   2 +-
 .../OptionGroupUnstyled.tsx                   |   4 +-
 .../src/OptionUnstyled/OptionUnstyled.tsx     |   6 +-
 .../src/PopperUnstyled/PopperUnstyled.tsx     |   8 +-
 packages/mui-base/src/Portal/Portal.tsx       |  10 +-
 .../src/SelectUnstyled/SelectUnstyled.tsx     |   2 +-
 .../src/SliderUnstyled/SliderUnstyled.tsx     |   4 +-
 .../src/SnackbarUnstyled/SnackbarUnstyled.tsx |   4 +-
 .../src/SwitchUnstyled/SwitchUnstyled.tsx     |   4 +-
 .../src/TabPanelUnstyled/TabPanelUnstyled.tsx |   8 +-
 .../mui-base/src/TabUnstyled/TabUnstyled.tsx  |   9 +-
 .../TablePaginationActionsUnstyled.tsx        |  10 +-
 .../TablePaginationUnstyled.tsx               | 329 +++++++++---------
 .../src/TabsListUnstyled/TabsListUnstyled.tsx |   8 +-
 .../src/TabsUnstyled/TabsUnstyled.tsx         |   8 +-
 .../src/TextareaAutosize/TextareaAutosize.tsx |   4 +-
 21 files changed, 218 insertions(+), 216 deletions(-)

diff --git a/packages/mui-base/src/ButtonUnstyled/ButtonUnstyled.tsx b/packages/mui-base/src/ButtonUnstyled/ButtonUnstyled.tsx
index f95f060e6d29ab..ed444d98d46abd 100644
--- a/packages/mui-base/src/ButtonUnstyled/ButtonUnstyled.tsx
+++ b/packages/mui-base/src/ButtonUnstyled/ButtonUnstyled.tsx
@@ -41,7 +41,7 @@ const useUtilityClasses = (ownerState: ButtonUnstyledOwnerState) => {
  */
 const ButtonUnstyled = React.forwardRef(function ButtonUnstyled<
   BaseComponentType extends React.ElementType = ButtonUnstyledTypeMap['defaultComponent'],
->(props: ButtonUnstyledProps<BaseComponentType>, forwardedRef: React.ForwardedRef<any>) {
+>(props: ButtonUnstyledProps<BaseComponentType>, forwardedRef: React.ForwardedRef<Element>) {
   const {
     action,
     children,
diff --git a/packages/mui-base/src/FormControlUnstyled/FormControlUnstyled.tsx b/packages/mui-base/src/FormControlUnstyled/FormControlUnstyled.tsx
index f63989fc445c6f..9b8089ba1ed211 100644
--- a/packages/mui-base/src/FormControlUnstyled/FormControlUnstyled.tsx
+++ b/packages/mui-base/src/FormControlUnstyled/FormControlUnstyled.tsx
@@ -71,7 +71,7 @@ function useUtilityClasses(ownerState: FormControlUnstyledOwnerState) {
  */
 const FormControlUnstyled = React.forwardRef(function FormControlUnstyled<
   D extends React.ElementType = FormControlUnstyledTypeMap['defaultComponent'],
->(props: FormControlUnstyledProps<D>, ref: React.ForwardedRef<any>) {
+>(props: FormControlUnstyledProps<D>, forwardedRef: React.ForwardedRef<Element>) {
   const {
     defaultValue,
     children,
@@ -146,7 +146,7 @@ const FormControlUnstyled = React.forwardRef(function FormControlUnstyled<
     externalSlotProps: slotProps.root,
     externalForwardedProps: other,
     additionalProps: {
-      ref,
+      ref: forwardedRef,
       children: renderChildren(),
     },
     ownerState,
diff --git a/packages/mui-base/src/InputUnstyled/InputUnstyled.tsx b/packages/mui-base/src/InputUnstyled/InputUnstyled.tsx
index 77ad9f735d0f18..3c0f4e39094d0c 100644
--- a/packages/mui-base/src/InputUnstyled/InputUnstyled.tsx
+++ b/packages/mui-base/src/InputUnstyled/InputUnstyled.tsx
@@ -48,7 +48,7 @@ const useUtilityClasses = (ownerState: InputUnstyledOwnerState) => {
  */
 const InputUnstyled = React.forwardRef(function InputUnstyled(
   props: InputUnstyledProps,
-  forwardedRef: React.ForwardedRef<any>,
+  forwardedRef: React.ForwardedRef<Element>,
 ) {
   const {
     'aria-describedby': ariaDescribedby,
diff --git a/packages/mui-base/src/MenuItemUnstyled/MenuItemUnstyled.tsx b/packages/mui-base/src/MenuItemUnstyled/MenuItemUnstyled.tsx
index 314d21c0870be9..6b0f2f472abfa7 100644
--- a/packages/mui-base/src/MenuItemUnstyled/MenuItemUnstyled.tsx
+++ b/packages/mui-base/src/MenuItemUnstyled/MenuItemUnstyled.tsx
@@ -34,7 +34,7 @@ function useUtilityClasses(ownerState: MenuItemUnstyledOwnerState) {
  */
 const MenuItemUnstyled = React.forwardRef(function MenuItemUnstyled<
   BaseComponentType extends React.ElementType = MenuItemUnstyledTypeMap['defaultComponent'],
->(props: MenuItemUnstyledProps<BaseComponentType>, ref: React.Ref<any>) {
+>(props: MenuItemUnstyledProps<BaseComponentType>, forwardedRef: React.ForwardedRef<Element>) {
   const {
     children,
     disabled: disabledProp = false,
@@ -47,7 +47,7 @@ const MenuItemUnstyled = React.forwardRef(function MenuItemUnstyled<
 
   const { getRootProps, disabled, focusVisible, highlighted } = useMenuItem({
     disabled: disabledProp,
-    rootRef: ref,
+    rootRef: forwardedRef,
     label,
   });
 
diff --git a/packages/mui-base/src/MenuUnstyled/MenuUnstyled.tsx b/packages/mui-base/src/MenuUnstyled/MenuUnstyled.tsx
index 4ad11802979ece..0f6957a3a06ac1 100644
--- a/packages/mui-base/src/MenuUnstyled/MenuUnstyled.tsx
+++ b/packages/mui-base/src/MenuUnstyled/MenuUnstyled.tsx
@@ -38,7 +38,7 @@ function useUtilityClasses(ownerState: MenuUnstyledOwnerState) {
  */
 const MenuUnstyled = React.forwardRef(function MenuUnstyled<
   BaseComponentType extends React.ElementType = MenuUnstyledTypeMap['defaultComponent'],
->(props: MenuUnstyledProps<BaseComponentType>, forwardedRef: React.Ref<any>) {
+>(props: MenuUnstyledProps<BaseComponentType>, forwardedRef: React.ForwardedRef<Element>) {
   const {
     actions,
     anchorEl,
diff --git a/packages/mui-base/src/ModalUnstyled/ModalUnstyled.tsx b/packages/mui-base/src/ModalUnstyled/ModalUnstyled.tsx
index fd3138f290ad32..667cb4694d9ee1 100644
--- a/packages/mui-base/src/ModalUnstyled/ModalUnstyled.tsx
+++ b/packages/mui-base/src/ModalUnstyled/ModalUnstyled.tsx
@@ -69,7 +69,7 @@ const defaultManager = new ModalManager();
  */
 const ModalUnstyled = React.forwardRef(function ModalUnstyled<
   BaseComponentType extends React.ElementType = ModalUnstyledTypeMap['defaultComponent'],
->(props: ModalUnstyledProps<BaseComponentType>, forwardedRef: React.Ref<Element> | undefined) {
+>(props: ModalUnstyledProps<BaseComponentType>, forwardedRef: React.ForwardedRef<Element>) {
   const {
     children,
     closeAfterTransition = false,
diff --git a/packages/mui-base/src/OptionGroupUnstyled/OptionGroupUnstyled.tsx b/packages/mui-base/src/OptionGroupUnstyled/OptionGroupUnstyled.tsx
index d3f9a4222fe0ac..97dc5bed69bd50 100644
--- a/packages/mui-base/src/OptionGroupUnstyled/OptionGroupUnstyled.tsx
+++ b/packages/mui-base/src/OptionGroupUnstyled/OptionGroupUnstyled.tsx
@@ -36,7 +36,7 @@ function useUtilityClasses(disabled: boolean) {
  */
 const OptionGroupUnstyled = React.forwardRef(function OptionGroupUnstyled<
   BaseComponentType extends React.ElementType = OptionGroupUnstyledTypeMap['defaultComponent'],
->(props: OptionGroupUnstyledProps<BaseComponentType>, ref: React.ForwardedRef<HTMLLIElement>) {
+>(props: OptionGroupUnstyledProps<BaseComponentType>, forwardedRef: React.ForwardedRef<Element>) {
   const { component, disabled = false, slotProps = {}, slots = {}, ...other } = props;
 
   const Root = component || slots?.root || 'li';
@@ -50,7 +50,7 @@ const OptionGroupUnstyled = React.forwardRef(function OptionGroupUnstyled<
     externalSlotProps: slotProps.root,
     externalForwardedProps: other,
     additionalProps: {
-      ref,
+      ref: forwardedRef,
     },
     ownerState: props,
     className: classes.root,
diff --git a/packages/mui-base/src/OptionUnstyled/OptionUnstyled.tsx b/packages/mui-base/src/OptionUnstyled/OptionUnstyled.tsx
index e473eab2b796f4..1cef03cbcdf8c7 100644
--- a/packages/mui-base/src/OptionUnstyled/OptionUnstyled.tsx
+++ b/packages/mui-base/src/OptionUnstyled/OptionUnstyled.tsx
@@ -27,7 +27,7 @@ function useUtilityClasses<OptionValue>(ownerState: OptionUnstyledOwnerState<Opt
  */
 const OptionUnstyled = React.forwardRef(function OptionUnstyled<OptionValue>(
   props: OptionUnstyledProps<OptionValue>,
-  ref: React.ForwardedRef<HTMLLIElement>,
+  forwardedRef: React.ForwardedRef<Element>,
 ) {
   const {
     children,
@@ -42,8 +42,8 @@ const OptionUnstyled = React.forwardRef(function OptionUnstyled<OptionValue>(
 
   const Root = component || slots.root || 'li';
 
-  const optionRef = React.useRef<HTMLLIElement>(null);
-  const combinedRef = useForkRef(optionRef, ref);
+  const optionRef = React.useRef<HTMLElement>(null);
+  const combinedRef = useForkRef(optionRef, forwardedRef);
 
   // If `label` is not explicitly provided, the `children` are used for convenience.
   // This is used to populate the select's trigger with the selected option's label.
diff --git a/packages/mui-base/src/PopperUnstyled/PopperUnstyled.tsx b/packages/mui-base/src/PopperUnstyled/PopperUnstyled.tsx
index 885e48352c8250..46b59cdf2d7bd7 100644
--- a/packages/mui-base/src/PopperUnstyled/PopperUnstyled.tsx
+++ b/packages/mui-base/src/PopperUnstyled/PopperUnstyled.tsx
@@ -77,7 +77,7 @@ const defaultPopperOptions = {};
 
 const PopperTooltip = React.forwardRef(function PopperTooltip(
   props: PopperTooltipProps,
-  ref: React.ForwardedRef<HTMLElement>,
+  forwardedRef: React.ForwardedRef<HTMLDivElement>,
 ) {
   const {
     anchorEl,
@@ -99,7 +99,7 @@ const PopperTooltip = React.forwardRef(function PopperTooltip(
   } = props;
 
   const tooltipRef = React.useRef<HTMLElement | null>(null);
-  const ownRef = useForkRef(tooltipRef, ref);
+  const ownRef = useForkRef(tooltipRef, forwardedRef);
 
   const popperRef = React.useRef<Instance | null>(null);
   const handlePopperRef = useForkRef(popperRef, popperRefProp);
@@ -249,7 +249,7 @@ const PopperTooltip = React.forwardRef(function PopperTooltip(
  */
 const PopperUnstyled = React.forwardRef(function PopperUnstyled(
   props: PopperUnstyledProps,
-  ref: React.ForwardedRef<HTMLDivElement>,
+  forwardedRef: React.ForwardedRef<HTMLDivElement>,
 ) {
   const {
     anchorEl,
@@ -313,7 +313,7 @@ const PopperUnstyled = React.forwardRef(function PopperUnstyled(
         direction={direction}
         disablePortal={disablePortal}
         modifiers={modifiers}
-        ref={ref}
+        ref={forwardedRef}
         open={transition ? !exited : open}
         placement={placement}
         popperOptions={popperOptions}
diff --git a/packages/mui-base/src/Portal/Portal.tsx b/packages/mui-base/src/Portal/Portal.tsx
index 64a23f78e8d7de..4042ab8b341d83 100644
--- a/packages/mui-base/src/Portal/Portal.tsx
+++ b/packages/mui-base/src/Portal/Portal.tsx
@@ -28,12 +28,12 @@ function getContainer(container: PortalProps['container']) {
  */
 const Portal = React.forwardRef(function Portal(
   props: PortalProps,
-  ref: React.ForwardedRef<Element>,
+  forwardedRef: React.ForwardedRef<Element>,
 ) {
   const { children, container, disablePortal = false } = props;
   const [mountNode, setMountNode] = React.useState<ReturnType<typeof getContainer>>(null);
   // @ts-expect-error TODO upstream fix
-  const handleRef = useForkRef(React.isValidElement(children) ? children.ref : null, ref);
+  const handleRef = useForkRef(React.isValidElement(children) ? children.ref : null, forwardedRef);
 
   useEnhancedEffect(() => {
     if (!disablePortal) {
@@ -43,14 +43,14 @@ const Portal = React.forwardRef(function Portal(
 
   useEnhancedEffect(() => {
     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) {
     if (React.isValidElement(children)) {
diff --git a/packages/mui-base/src/SelectUnstyled/SelectUnstyled.tsx b/packages/mui-base/src/SelectUnstyled/SelectUnstyled.tsx
index a477e4228ece0d..e4c98a98ad6b72 100644
--- a/packages/mui-base/src/SelectUnstyled/SelectUnstyled.tsx
+++ b/packages/mui-base/src/SelectUnstyled/SelectUnstyled.tsx
@@ -94,7 +94,7 @@ function useUtilityClasses(ownerState: SelectUnstyledOwnerState<any, any>) {
 const SelectUnstyled = React.forwardRef(function SelectUnstyled<
   OptionValue extends {},
   Multiple extends boolean,
->(props: SelectUnstyledProps<OptionValue, Multiple>, forwardedRef: React.ForwardedRef<any>) {
+>(props: SelectUnstyledProps<OptionValue, Multiple>, forwardedRef: React.ForwardedRef<Element>) {
   const {
     autoFocus,
     children,
diff --git a/packages/mui-base/src/SliderUnstyled/SliderUnstyled.tsx b/packages/mui-base/src/SliderUnstyled/SliderUnstyled.tsx
index e7771a0608ca06..206fc95905ce45 100644
--- a/packages/mui-base/src/SliderUnstyled/SliderUnstyled.tsx
+++ b/packages/mui-base/src/SliderUnstyled/SliderUnstyled.tsx
@@ -61,7 +61,7 @@ const useUtilityClasses = (ownerState: SliderUnstyledOwnerState) => {
  */
 const SliderUnstyled = React.forwardRef(function SliderUnstyled<
   BaseComponentType extends React.ElementType = SliderUnstyledTypeMap['defaultComponent'],
->(props: SliderUnstyledProps<BaseComponentType>, ref: React.ForwardedRef<any>) {
+>(props: SliderUnstyledProps<BaseComponentType>, forwardedRef: React.ForwardedRef<Element>) {
   const {
     'aria-label': ariaLabel,
     'aria-valuetext': ariaValuetext,
@@ -126,7 +126,7 @@ const SliderUnstyled = React.forwardRef(function SliderUnstyled<
     values,
     trackOffset,
     trackLeap,
-  } = useSlider({ ...partialOwnerState, rootRef: ref });
+  } = useSlider({ ...partialOwnerState, rootRef: forwardedRef });
 
   const ownerState: SliderUnstyledOwnerState = {
     ...partialOwnerState,
diff --git a/packages/mui-base/src/SnackbarUnstyled/SnackbarUnstyled.tsx b/packages/mui-base/src/SnackbarUnstyled/SnackbarUnstyled.tsx
index 37251dcdec051b..f6354480157559 100644
--- a/packages/mui-base/src/SnackbarUnstyled/SnackbarUnstyled.tsx
+++ b/packages/mui-base/src/SnackbarUnstyled/SnackbarUnstyled.tsx
@@ -34,7 +34,7 @@ const useUtilityClasses = () => {
  */
 const SnackbarUnstyled = React.forwardRef(function SnackbarUnstyled(
   props: SnackbarUnstyledProps,
-  ref: React.ForwardedRef<any>,
+  forwardedRef: React.ForwardedRef<Element>,
 ) {
   const {
     autoHideDuration = null,
@@ -75,7 +75,7 @@ const SnackbarUnstyled = React.forwardRef(function SnackbarUnstyled(
     externalForwardedProps: other,
     externalSlotProps: slotProps.root,
     additionalProps: {
-      ref,
+      ref: forwardedRef,
     },
     ownerState,
     className: classes.root,
diff --git a/packages/mui-base/src/SwitchUnstyled/SwitchUnstyled.tsx b/packages/mui-base/src/SwitchUnstyled/SwitchUnstyled.tsx
index 4bda47c3c16337..2aa7e1482b4632 100644
--- a/packages/mui-base/src/SwitchUnstyled/SwitchUnstyled.tsx
+++ b/packages/mui-base/src/SwitchUnstyled/SwitchUnstyled.tsx
@@ -48,7 +48,7 @@ const useUtilityClasses = (ownerState: SwitchUnstyledOwnerState) => {
  */
 const SwitchUnstyled = React.forwardRef(function SwitchUnstyled<
   BaseComponentType extends React.ElementType = SwitchUnstyledTypeMap['defaultComponent'],
->(props: SwitchUnstyledProps<BaseComponentType>, ref: React.ForwardedRef<any>) {
+>(props: SwitchUnstyledProps<BaseComponentType>, forwardedRef: React.ForwardedRef<Element>) {
   const {
     checked: checkedProp,
     component,
@@ -94,7 +94,7 @@ const SwitchUnstyled = React.forwardRef(function SwitchUnstyled<
     externalSlotProps: slotProps.root,
     externalForwardedProps: other,
     additionalProps: {
-      ref,
+      ref: forwardedRef,
     },
     ownerState,
     className: classes.root,
diff --git a/packages/mui-base/src/TabPanelUnstyled/TabPanelUnstyled.tsx b/packages/mui-base/src/TabPanelUnstyled/TabPanelUnstyled.tsx
index 6be6b331b83581..3063ed10cf3407 100644
--- a/packages/mui-base/src/TabPanelUnstyled/TabPanelUnstyled.tsx
+++ b/packages/mui-base/src/TabPanelUnstyled/TabPanelUnstyled.tsx
@@ -31,9 +31,9 @@ const useUtilityClasses = (ownerState: { hidden: boolean }) => {
  *
  * - [TabPanelUnstyled API](https://mui.com/base/react-tabs/components-api/#tab-panel-unstyled)
  */
-const TabPanelUnstyled = React.forwardRef<unknown, TabPanelUnstyledProps>(function TabPanelUnstyled(
-  props,
-  ref,
+const TabPanelUnstyled = React.forwardRef(function TabPanelUnstyled(
+  props: TabPanelUnstyledProps,
+  forwardedRef: React.ForwardedRef<Element>,
 ) {
   const { children, component, value, slotProps = {}, slots = {}, ...other } = props;
 
@@ -54,7 +54,7 @@ const TabPanelUnstyled = React.forwardRef<unknown, TabPanelUnstyledProps>(functi
     externalForwardedProps: other,
     additionalProps: {
       role: 'tabpanel',
-      ref,
+      ref: forwardedRef,
     },
     ownerState,
     className: classes.root,
diff --git a/packages/mui-base/src/TabUnstyled/TabUnstyled.tsx b/packages/mui-base/src/TabUnstyled/TabUnstyled.tsx
index ef3619c56ca8a2..2f1a5750767de2 100644
--- a/packages/mui-base/src/TabUnstyled/TabUnstyled.tsx
+++ b/packages/mui-base/src/TabUnstyled/TabUnstyled.tsx
@@ -33,7 +33,10 @@ const useUtilityClasses = (ownerState: TabUnstyledOwnerState) => {
  *
  * - [TabUnstyled API](https://mui.com/base/react-tabs/components-api/#tab-unstyled)
  */
-const TabUnstyled = React.forwardRef<unknown, TabUnstyledProps>(function TabUnstyled(props, ref) {
+const TabUnstyled = React.forwardRef(function TabUnstyled(
+  props: TabUnstyledProps,
+  forwardedRef: React.ForwardedRef<Element>,
+) {
   const {
     action,
     children,
@@ -49,7 +52,7 @@ const TabUnstyled = React.forwardRef<unknown, TabUnstyledProps>(function TabUnst
   } = props;
 
   const tabRef = React.useRef<HTMLButtonElement | HTMLAnchorElement | HTMLElement>();
-  const handleRef = useForkRef(tabRef, ref);
+  const handleRef = useForkRef(tabRef, forwardedRef);
 
   const { active, highlighted, selected, getRootProps } = useTab({
     ...props,
@@ -73,7 +76,7 @@ const TabUnstyled = React.forwardRef<unknown, TabUnstyledProps>(function TabUnst
     externalSlotProps: slotProps.root,
     externalForwardedProps: other,
     additionalProps: {
-      ref,
+      ref: forwardedRef,
     },
     ownerState,
     className: classes.root,
diff --git a/packages/mui-base/src/TablePaginationUnstyled/TablePaginationActionsUnstyled.tsx b/packages/mui-base/src/TablePaginationUnstyled/TablePaginationActionsUnstyled.tsx
index 8c37bf1c9d2ab5..703d9334d96ae3 100644
--- a/packages/mui-base/src/TablePaginationUnstyled/TablePaginationActionsUnstyled.tsx
+++ b/packages/mui-base/src/TablePaginationUnstyled/TablePaginationActionsUnstyled.tsx
@@ -29,10 +29,10 @@ function defaultGetAriaLabel(type: ItemAriaLabelType) {
 /**
  * @ignore - internal component.
  */
-const TablePaginationActionsUnstyled = React.forwardRef<
-  unknown,
-  TablePaginationActionsUnstyledProps
->(function TablePaginationActionsUnstyled(props, ref) {
+const TablePaginationActionsUnstyled = React.forwardRef(function TablePaginationActionsUnstyled(
+  props: TablePaginationActionsUnstyledProps,
+  forwardedRef: React.ForwardedRef<Element>,
+) {
   const {
     component,
     count,
@@ -74,7 +74,7 @@ const TablePaginationActionsUnstyled = React.forwardRef<
       elementType: Root,
       externalSlotProps: slotProps.root,
       externalForwardedProps: other,
-      additionalProps: { ref },
+      additionalProps: { ref: forwardedRef },
       ownerState,
     });
 
diff --git a/packages/mui-base/src/TablePaginationUnstyled/TablePaginationUnstyled.tsx b/packages/mui-base/src/TablePaginationUnstyled/TablePaginationUnstyled.tsx
index c6854a6fd2c0c1..298615db96f8c9 100644
--- a/packages/mui-base/src/TablePaginationUnstyled/TablePaginationUnstyled.tsx
+++ b/packages/mui-base/src/TablePaginationUnstyled/TablePaginationUnstyled.tsx
@@ -59,190 +59,189 @@ const useUtilityClasses = () => {
  *
  * - [TablePaginationUnstyled API](https://mui.com/base/react-table-pagination/components-api/#table-pagination-unstyled)
  */
-const TablePaginationUnstyled = React.forwardRef<unknown, TablePaginationUnstyledProps>(
-  function TablePaginationUnstyled(props, ref) {
-    const {
-      component,
-      colSpan: colSpanProp,
-      count,
-      getItemAriaLabel = defaultGetAriaLabel,
-      labelDisplayedRows = defaultLabelDisplayedRows,
-      labelId: labelIdProp,
-      labelRowsPerPage = 'Rows per page:',
-      onPageChange,
-      onRowsPerPageChange,
-      page,
-      rowsPerPage,
-      rowsPerPageOptions = [10, 25, 50, 100],
-      selectId: selectIdProp,
-      slotProps = {},
-      slots = {},
-      ...other
-    } = props;
+const TablePaginationUnstyled = React.forwardRef(function TablePaginationUnstyled(
+  props: TablePaginationUnstyledProps,
+  forwardedRef: React.ForwardedRef<Element>,
+) {
+  const {
+    component,
+    colSpan: colSpanProp,
+    count,
+    getItemAriaLabel = defaultGetAriaLabel,
+    labelDisplayedRows = defaultLabelDisplayedRows,
+    labelId: labelIdProp,
+    labelRowsPerPage = 'Rows per page:',
+    onPageChange,
+    onRowsPerPageChange,
+    page,
+    rowsPerPage,
+    rowsPerPageOptions = [10, 25, 50, 100],
+    selectId: selectIdProp,
+    slotProps = {},
+    slots = {},
+    ...other
+  } = props;
 
-    const ownerState = props;
-    const classes = useUtilityClasses();
+  const ownerState = props;
+  const classes = useUtilityClasses();
 
-    let colSpan;
-    if (!component || component === 'td' || !isHostComponent(component)) {
-      colSpan = colSpanProp || 1000; // col-span over everything
+  let colSpan;
+  if (!component || component === 'td' || !isHostComponent(component)) {
+    colSpan = colSpanProp || 1000; // col-span over everything
+  }
+
+  const getLabelDisplayedRowsTo = () => {
+    if (count === -1) {
+      return (page + 1) * rowsPerPage;
     }
+    return rowsPerPage === -1 ? count : Math.min(count, (page + 1) * rowsPerPage);
+  };
 
-    const getLabelDisplayedRowsTo = () => {
-      if (count === -1) {
-        return (page + 1) * rowsPerPage;
-      }
-      return rowsPerPage === -1 ? count : Math.min(count, (page + 1) * rowsPerPage);
-    };
+  const selectId = useId(selectIdProp);
+  const labelId = useId(labelIdProp);
 
-    const selectId = useId(selectIdProp);
-    const labelId = useId(labelIdProp);
+  const Root = component ?? slots.root ?? 'td';
+  const rootProps: WithOptionalOwnerState<TablePaginationUnstyledRootSlotProps> = useSlotProps({
+    elementType: Root,
+    externalSlotProps: slotProps.root,
+    externalForwardedProps: other,
+    additionalProps: {
+      colSpan,
+      ref: forwardedRef,
+    },
+    ownerState,
+    className: classes.root,
+  });
 
-    const Root = component ?? slots.root ?? 'td';
-    const rootProps: WithOptionalOwnerState<TablePaginationUnstyledRootSlotProps> = useSlotProps({
-      elementType: Root,
-      externalSlotProps: slotProps.root,
-      externalForwardedProps: other,
+  const Select = slots.select ?? 'select';
+  const selectProps: WithOptionalOwnerState<TablePaginationUnstyledSelectSlotProps> = useSlotProps({
+    elementType: Select,
+    externalSlotProps: slotProps.select,
+    additionalProps: {
+      value: rowsPerPage,
+      id: selectId,
+      onChange: (e: React.ChangeEvent<HTMLTextAreaElement | HTMLInputElement>) =>
+        onRowsPerPageChange && onRowsPerPageChange(e),
+      'aria-label': rowsPerPage.toString(),
+      'aria-labelledby': [labelId, selectId].filter(Boolean).join(' ') || undefined,
+    },
+    ownerState,
+    className: classes.select,
+  });
+
+  const Actions = slots.actions ?? TablePaginationActionsUnstyled;
+  const actionsProps: WithOptionalOwnerState<TablePaginationUnstyledActionsSlotProps> =
+    useSlotProps({
+      elementType: Actions,
+      externalSlotProps: slotProps.actions,
       additionalProps: {
-        colSpan,
-        ref,
+        page,
+        rowsPerPage,
+        count,
+        onPageChange,
+        getItemAriaLabel,
       },
       ownerState,
-      className: classes.root,
+      className: classes.actions,
     });
 
-    const Select = slots.select ?? 'select';
-    const selectProps: WithOptionalOwnerState<TablePaginationUnstyledSelectSlotProps> =
-      useSlotProps({
-        elementType: Select,
-        externalSlotProps: slotProps.select,
-        additionalProps: {
-          value: rowsPerPage,
-          id: selectId,
-          onChange: (e: React.ChangeEvent<HTMLTextAreaElement | HTMLInputElement>) =>
-            onRowsPerPageChange && onRowsPerPageChange(e),
-          'aria-label': rowsPerPage.toString(),
-          'aria-labelledby': [labelId, selectId].filter(Boolean).join(' ') || undefined,
-        },
-        ownerState,
-        className: classes.select,
-      });
-
-    const Actions = slots.actions ?? TablePaginationActionsUnstyled;
-    const actionsProps: WithOptionalOwnerState<TablePaginationUnstyledActionsSlotProps> =
-      useSlotProps({
-        elementType: Actions,
-        externalSlotProps: slotProps.actions,
-        additionalProps: {
-          page,
-          rowsPerPage,
-          count,
-          onPageChange,
-          getItemAriaLabel,
-        },
-        ownerState,
-        className: classes.actions,
-      });
-
-    const MenuItem = slots.menuItem ?? 'option';
-    const menuItemProps: WithOptionalOwnerState<TablePaginationUnstyledMenuItemSlotProps> =
-      useSlotProps({
-        elementType: MenuItem,
-        externalSlotProps: slotProps.menuItem,
-        additionalProps: {
-          value: undefined,
-        },
-        ownerState,
-        className: classes.menuItem,
-      });
+  const MenuItem = slots.menuItem ?? 'option';
+  const menuItemProps: WithOptionalOwnerState<TablePaginationUnstyledMenuItemSlotProps> =
+    useSlotProps({
+      elementType: MenuItem,
+      externalSlotProps: slotProps.menuItem,
+      additionalProps: {
+        value: undefined,
+      },
+      ownerState,
+      className: classes.menuItem,
+    });
 
-    const SelectLabel = slots.selectLabel ?? 'p';
-    const selectLabelProps: WithOptionalOwnerState<TablePaginationUnstyledSelectLabelSlotProps> =
-      useSlotProps({
-        elementType: SelectLabel,
-        externalSlotProps: slotProps.selectLabel,
-        additionalProps: {
-          id: labelId,
-        },
-        ownerState,
-        className: classes.selectLabel,
-      });
+  const SelectLabel = slots.selectLabel ?? 'p';
+  const selectLabelProps: WithOptionalOwnerState<TablePaginationUnstyledSelectLabelSlotProps> =
+    useSlotProps({
+      elementType: SelectLabel,
+      externalSlotProps: slotProps.selectLabel,
+      additionalProps: {
+        id: labelId,
+      },
+      ownerState,
+      className: classes.selectLabel,
+    });
 
-    const DisplayedRows = slots.displayedRows ?? 'p';
-    const displayedRowsProps: WithOptionalOwnerState<TablePaginationUnstyledDisplayedRowsSlotProps> =
-      useSlotProps({
-        elementType: DisplayedRows,
-        externalSlotProps: slotProps.displayedRows,
-        ownerState,
-        className: classes.displayedRows,
-      });
+  const DisplayedRows = slots.displayedRows ?? 'p';
+  const displayedRowsProps: WithOptionalOwnerState<TablePaginationUnstyledDisplayedRowsSlotProps> =
+    useSlotProps({
+      elementType: DisplayedRows,
+      externalSlotProps: slotProps.displayedRows,
+      ownerState,
+      className: classes.displayedRows,
+    });
 
-    const Toolbar = slots.toolbar ?? 'div';
-    const toolbarProps: WithOptionalOwnerState<TablePaginationUnstyledToolbarSlotProps> =
-      useSlotProps({
-        elementType: Toolbar,
-        externalSlotProps: slotProps.toolbar,
-        ownerState,
-        className: classes.toolbar,
-      });
+  const Toolbar = slots.toolbar ?? 'div';
+  const toolbarProps: WithOptionalOwnerState<TablePaginationUnstyledToolbarSlotProps> =
+    useSlotProps({
+      elementType: Toolbar,
+      externalSlotProps: slotProps.toolbar,
+      ownerState,
+      className: classes.toolbar,
+    });
 
-    const Spacer = slots.spacer ?? 'div';
-    const spacerProps: WithOptionalOwnerState<TablePaginationUnstyledSpacerSlotProps> =
-      useSlotProps({
-        elementType: Spacer,
-        externalSlotProps: slotProps.spacer,
-        ownerState,
-        className: classes.spacer,
-      });
+  const Spacer = slots.spacer ?? 'div';
+  const spacerProps: WithOptionalOwnerState<TablePaginationUnstyledSpacerSlotProps> = useSlotProps({
+    elementType: Spacer,
+    externalSlotProps: slotProps.spacer,
+    ownerState,
+    className: classes.spacer,
+  });
 
-    return (
-      <Root {...rootProps}>
-        <Toolbar {...toolbarProps}>
-          <Spacer {...spacerProps} />
-          {rowsPerPageOptions.length > 1 && (
-            <SelectLabel {...selectLabelProps}>{labelRowsPerPage}</SelectLabel>
-          )}
+  return (
+    <Root {...rootProps}>
+      <Toolbar {...toolbarProps}>
+        <Spacer {...spacerProps} />
+        {rowsPerPageOptions.length > 1 && (
+          <SelectLabel {...selectLabelProps}>{labelRowsPerPage}</SelectLabel>
+        )}
 
-          {rowsPerPageOptions.length > 1 && (
-            <Select {...selectProps}>
-              {rowsPerPageOptions.map(
-                (rowsPerPageOption: number | { label: string; value: number }) => (
-                  <MenuItem
-                    {...menuItemProps}
-                    key={
-                      typeof rowsPerPageOption !== 'number' && rowsPerPageOption.label
-                        ? rowsPerPageOption.label
-                        : rowsPerPageOption
-                    }
-                    value={
-                      typeof rowsPerPageOption !== 'number' && rowsPerPageOption.value
-                        ? rowsPerPageOption.value
-                        : rowsPerPageOption
-                    }
-                  >
-                    {typeof rowsPerPageOption !== 'number' && rowsPerPageOption.label
+        {rowsPerPageOptions.length > 1 && (
+          <Select {...selectProps}>
+            {rowsPerPageOptions.map(
+              (rowsPerPageOption: number | { label: string; value: number }) => (
+                <MenuItem
+                  {...menuItemProps}
+                  key={
+                    typeof rowsPerPageOption !== 'number' && rowsPerPageOption.label
                       ? rowsPerPageOption.label
-                      : rowsPerPageOption}
-                  </MenuItem>
-                ),
-              )}
-            </Select>
-          )}
+                      : rowsPerPageOption
+                  }
+                  value={
+                    typeof rowsPerPageOption !== 'number' && rowsPerPageOption.value
+                      ? rowsPerPageOption.value
+                      : rowsPerPageOption
+                  }
+                >
+                  {typeof rowsPerPageOption !== 'number' && rowsPerPageOption.label
+                    ? rowsPerPageOption.label
+                    : rowsPerPageOption}
+                </MenuItem>
+              ),
+            )}
+          </Select>
+        )}
 
-          <DisplayedRows {...displayedRowsProps}>
-            {labelDisplayedRows({
-              from: count === 0 ? 0 : page * rowsPerPage + 1,
-              to: getLabelDisplayedRowsTo(),
-              count: count === -1 ? -1 : count,
-              page,
-            })}
-          </DisplayedRows>
-          <Actions {...actionsProps} />
-        </Toolbar>
-      </Root>
-    );
-  },
-) as OverridableComponent<TablePaginationUnstyledTypeMap>;
+        <DisplayedRows {...displayedRowsProps}>
+          {labelDisplayedRows({
+            from: count === 0 ? 0 : page * rowsPerPage + 1,
+            to: getLabelDisplayedRowsTo(),
+            count: count === -1 ? -1 : count,
+            page,
+          })}
+        </DisplayedRows>
+        <Actions {...actionsProps} />
+      </Toolbar>
+    </Root>
+  );
+}) as OverridableComponent<TablePaginationUnstyledTypeMap>;
 
 TablePaginationUnstyled.propTypes /* remove-proptypes */ = {
   // ----------------------------- Warning --------------------------------
diff --git a/packages/mui-base/src/TabsListUnstyled/TabsListUnstyled.tsx b/packages/mui-base/src/TabsListUnstyled/TabsListUnstyled.tsx
index 6c4654afe5c4aa..296b12691e38ad 100644
--- a/packages/mui-base/src/TabsListUnstyled/TabsListUnstyled.tsx
+++ b/packages/mui-base/src/TabsListUnstyled/TabsListUnstyled.tsx
@@ -33,14 +33,14 @@ const useUtilityClasses = (ownerState: { orientation: 'horizontal' | 'vertical'
  *
  * - [TabsListUnstyled API](https://mui.com/base/react-tabs/components-api/#tabs-list-unstyled)
  */
-const TabsListUnstyled = React.forwardRef<Element, TabsListUnstyledProps>(function TabsListUnstyled(
-  props,
-  ref,
+const TabsListUnstyled = React.forwardRef(function TabsListUnstyled(
+  props: TabsListUnstyledProps,
+  forwardedRef: React.ForwardedRef<Element>,
 ) {
   const { children, component, slotProps = {}, slots = {}, ...other } = props;
 
   const { isRtl, orientation, getRootProps, contextValue } = useTabsList({
-    rootRef: ref,
+    rootRef: forwardedRef,
   });
 
   const ownerState = {
diff --git a/packages/mui-base/src/TabsUnstyled/TabsUnstyled.tsx b/packages/mui-base/src/TabsUnstyled/TabsUnstyled.tsx
index 144dc41dda0b9d..aeaf89d942edb2 100644
--- a/packages/mui-base/src/TabsUnstyled/TabsUnstyled.tsx
+++ b/packages/mui-base/src/TabsUnstyled/TabsUnstyled.tsx
@@ -33,9 +33,9 @@ const useUtilityClasses = (ownerState: { orientation: 'horizontal' | 'vertical'
  *
  * - [TabsUnstyled API](https://mui.com/base/react-tabs/components-api/#tabs-unstyled)
  */
-const TabsUnstyled = React.forwardRef<unknown, TabsUnstyledProps>(function TabsUnstyled(
-  props,
-  ref,
+const TabsUnstyled = React.forwardRef(function TabsUnstyled(
+  props: TabsUnstyledProps,
+  forwardedRef: React.ForwardedRef<Element>,
 ) {
   const {
     children,
@@ -67,7 +67,7 @@ const TabsUnstyled = React.forwardRef<unknown, TabsUnstyledProps>(function TabsU
     externalSlotProps: slotProps.root,
     externalForwardedProps: other,
     additionalProps: {
-      ref,
+      ref: forwardedRef,
     },
     ownerState,
     className: classes.root,
diff --git a/packages/mui-base/src/TextareaAutosize/TextareaAutosize.tsx b/packages/mui-base/src/TextareaAutosize/TextareaAutosize.tsx
index 6ae04f63eff498..49a759681f586c 100644
--- a/packages/mui-base/src/TextareaAutosize/TextareaAutosize.tsx
+++ b/packages/mui-base/src/TextareaAutosize/TextareaAutosize.tsx
@@ -58,13 +58,13 @@ function isEmpty(obj: State) {
  */
 const TextareaAutosize = React.forwardRef(function TextareaAutosize(
   props: TextareaAutosizeProps,
-  ref: React.ForwardedRef<Element>,
+  forwardedRef: React.ForwardedRef<Element>,
 ) {
   const { onChange, maxRows, minRows = 1, style, value, ...other } = props;
 
   const { current: isControlled } = React.useRef(value != null);
   const inputRef = React.useRef<HTMLInputElement>(null);
-  const handleRef = useForkRef(ref, inputRef);
+  const handleRef = useForkRef(forwardedRef, inputRef);
   const shadowRef = React.useRef<HTMLTextAreaElement>(null);
   const renders = React.useRef(0);
   const [state, setState] = React.useState<State>({

From a0cb4d5c151debe500e9bfc837ae7f2a1765fa71 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C5=82=20Dudak?= <michal@dudak.me>
Date: Sun, 23 Apr 2023 08:20:47 -0400
Subject: [PATCH 13/15] Docs

---
 docs/pages/base/api/use-button.json               | 15 ++++++---------
 docs/pages/base/api/use-input.json                |  7 +++++++
 docs/pages/base/api/use-menu-item.json            | 10 +++++-----
 docs/pages/base/api/use-menu.json                 |  9 ++++++++-
 docs/pages/base/api/use-option.json               | 13 +++++--------
 docs/pages/base/api/use-select.json               | 14 ++++++++++++++
 docs/pages/base/api/use-slider.json               | 14 ++++++++++----
 docs/pages/base/api/use-snackbar.json             |  1 -
 docs/pages/base/api/use-switch.json               |  7 +++++++
 docs/pages/base/api/use-tab.json                  | 11 ++++++++++-
 docs/pages/base/api/use-tabs-list.json            | 11 +++++++++--
 .../api-docs/use-button/use-button.json           |  3 +--
 .../api-docs/use-menu-item/use-menu-item.json     |  2 +-
 docs/translations/api-docs/use-menu/use-menu.json |  1 +
 .../api-docs/use-select/use-select.json           |  2 ++
 .../api-docs/use-slider/use-slider.json           |  3 ++-
 .../api-docs/use-switch/use-switch.json           |  1 +
 docs/translations/api-docs/use-tab/use-tab.json   |  3 ++-
 .../api-docs/use-tabs-list/use-tabs-list.json     |  2 +-
 19 files changed, 92 insertions(+), 37 deletions(-)

diff --git a/docs/pages/base/api/use-button.json b/docs/pages/base/api/use-button.json
index cfd717d3b3e77d..7f3cdd16d9d7ef 100644
--- a/docs/pages/base/api/use-button.json
+++ b/docs/pages/base/api/use-button.json
@@ -9,7 +9,9 @@
     "onFocusVisible": {
       "type": { "name": "React.FocusEventHandler", "description": "React.FocusEventHandler" }
     },
-    "ref": { "type": { "name": "React.Ref&lt;any&gt;", "description": "React.Ref&lt;any&gt;" } },
+    "rootRef": {
+      "type": { "name": "React.Ref&lt;Element&gt;", "description": "React.Ref&lt;Element&gt;" }
+    },
     "tabIndex": {
       "type": {
         "name": "NonNullable&lt;React.HTMLAttributes&lt;any&gt;[&#39;tabIndex&#39;]&gt;",
@@ -31,11 +33,6 @@
       "default": "false",
       "required": true
     },
-    "disabled": {
-      "type": { "name": "boolean", "description": "boolean" },
-      "default": "false",
-      "required": true
-    },
     "focusVisible": {
       "type": { "name": "boolean", "description": "boolean" },
       "default": "false",
@@ -48,10 +45,10 @@
       },
       "required": true
     },
-    "ref": {
+    "rootRef": {
       "type": {
-        "name": "((instance: unknown) =&gt; void) | null",
-        "description": "((instance: unknown) =&gt; void) | null"
+        "name": "React.RefCallback&lt;Element&gt; | null",
+        "description": "React.RefCallback&lt;Element&gt; | null"
       },
       "required": true
     },
diff --git a/docs/pages/base/api/use-input.json b/docs/pages/base/api/use-input.json
index 938537b1a61308..d7ed39a9f64ba7 100644
--- a/docs/pages/base/api/use-input.json
+++ b/docs/pages/base/api/use-input.json
@@ -64,6 +64,13 @@
       },
       "required": true
     },
+    "inputRef": {
+      "type": {
+        "name": "React.RefCallback&lt;HTMLInputElement&gt; | null",
+        "description": "React.RefCallback&lt;HTMLInputElement&gt; | null"
+      },
+      "required": true
+    },
     "required": {
       "type": { "name": "boolean", "description": "boolean" },
       "default": "false",
diff --git a/docs/pages/base/api/use-menu-item.json b/docs/pages/base/api/use-menu-item.json
index 3b9bdb346daeca..fade4cbe426d99 100644
--- a/docs/pages/base/api/use-menu-item.json
+++ b/docs/pages/base/api/use-menu-item.json
@@ -1,7 +1,7 @@
 {
   "parameters": {
-    "ref": {
-      "type": { "name": "React.Ref&lt;any&gt;", "description": "React.Ref&lt;any&gt;" },
+    "rootRef": {
+      "type": { "name": "React.Ref&lt;Element&gt;", "description": "React.Ref&lt;Element&gt;" },
       "required": true
     },
     "disabled": { "type": { "name": "boolean", "description": "boolean" } },
@@ -26,10 +26,10 @@
     },
     "highlighted": { "type": { "name": "boolean", "description": "boolean" }, "required": true },
     "index": { "type": { "name": "number", "description": "number" }, "required": true },
-    "ref": {
+    "rootRef": {
       "type": {
-        "name": "((instance: unknown) =&gt; void) | null",
-        "description": "((instance: unknown) =&gt; void) | null"
+        "name": "React.RefCallback&lt;Element&gt; | null",
+        "description": "React.RefCallback&lt;Element&gt; | null"
       },
       "required": true
     },
diff --git a/docs/pages/base/api/use-menu.json b/docs/pages/base/api/use-menu.json
index 4cd0ede5cff5c2..f76467d56a1d8d 100644
--- a/docs/pages/base/api/use-menu.json
+++ b/docs/pages/base/api/use-menu.json
@@ -3,7 +3,7 @@
     "defaultOpen": { "type": { "name": "boolean", "description": "boolean" }, "default": "false" },
     "listboxId": { "type": { "name": "string", "description": "string" } },
     "listboxRef": {
-      "type": { "name": "React.Ref&lt;any&gt;", "description": "React.Ref&lt;any&gt;" }
+      "type": { "name": "React.Ref&lt;Element&gt;", "description": "React.Ref&lt;Element&gt;" }
     },
     "onOpenChange": {
       "type": { "name": "(open: boolean) =&gt; void", "description": "(open: boolean) =&gt; void" }
@@ -33,6 +33,13 @@
       "type": { "name": "string | null", "description": "string | null" },
       "required": true
     },
+    "listboxRef": {
+      "type": {
+        "name": "React.RefCallback&lt;Element&gt; | null",
+        "description": "React.RefCallback&lt;Element&gt; | null"
+      },
+      "required": true
+    },
     "menuItems": {
       "type": {
         "name": "Map&lt;string, MenuItemMetadata&gt;",
diff --git a/docs/pages/base/api/use-option.json b/docs/pages/base/api/use-option.json
index 2c70333285a5e9..e322082cbdd43a 100644
--- a/docs/pages/base/api/use-option.json
+++ b/docs/pages/base/api/use-option.json
@@ -7,11 +7,8 @@
     },
     "value": { "type": { "name": "Value", "description": "Value" }, "required": true },
     "id": { "type": { "name": "string", "description": "string" } },
-    "optionRef": {
-      "type": {
-        "name": "React.Ref&lt;HTMLElement&gt;",
-        "description": "React.Ref&lt;HTMLElement&gt;"
-      }
+    "rootRef": {
+      "type": { "name": "React.Ref&lt;Element&gt;", "description": "React.Ref&lt;Element&gt;" }
     }
   },
   "returnValue": {
@@ -24,10 +21,10 @@
     },
     "highlighted": { "type": { "name": "boolean", "description": "boolean" }, "required": true },
     "index": { "type": { "name": "number", "description": "number" }, "required": true },
-    "ref": {
+    "rootRef": {
       "type": {
-        "name": "React.RefCallback&lt;HTMLElement&gt;",
-        "description": "React.RefCallback&lt;HTMLElement&gt;"
+        "name": "React.RefCallback&lt;Element&gt; | null",
+        "description": "React.RefCallback&lt;Element&gt; | null"
       },
       "required": true
     },
diff --git a/docs/pages/base/api/use-select.json b/docs/pages/base/api/use-select.json
index b07cfe1249c88b..19bce52885da1c 100644
--- a/docs/pages/base/api/use-select.json
+++ b/docs/pages/base/api/use-select.json
@@ -58,6 +58,13 @@
       "type": { "name": "boolean", "description": "boolean" },
       "required": true
     },
+    "buttonRef": {
+      "type": {
+        "name": "React.RefCallback&lt;Element&gt; | null",
+        "description": "React.RefCallback&lt;Element&gt; | null"
+      },
+      "required": true
+    },
     "contextValue": {
       "type": {
         "name": "SelectProviderValue&lt;Value&gt;",
@@ -98,6 +105,13 @@
       "type": { "name": "Value | null", "description": "Value | null" },
       "required": true
     },
+    "listboxRef": {
+      "type": {
+        "name": "React.RefCallback&lt;Element&gt; | null",
+        "description": "React.RefCallback&lt;Element&gt; | null"
+      },
+      "required": true
+    },
     "open": { "type": { "name": "boolean", "description": "boolean" }, "required": true },
     "options": { "type": { "name": "Value[]", "description": "Value[]" }, "required": true },
     "value": {
diff --git a/docs/pages/base/api/use-slider.json b/docs/pages/base/api/use-slider.json
index e037be96deb6c6..03c2e06e08c803 100644
--- a/docs/pages/base/api/use-slider.json
+++ b/docs/pages/base/api/use-slider.json
@@ -1,9 +1,5 @@
 {
   "parameters": {
-    "ref": {
-      "type": { "name": "React.Ref&lt;any&gt;", "description": "React.Ref&lt;any&gt;" },
-      "required": true
-    },
     "aria-labelledby": { "type": { "name": "string", "description": "string" } },
     "defaultValue": { "type": { "name": "number | number[]", "description": "number | number[]" } },
     "disabled": { "type": { "name": "boolean", "description": "boolean" }, "default": "false" },
@@ -35,6 +31,9 @@
       },
       "default": "'horizontal'"
     },
+    "rootRef": {
+      "type": { "name": "React.Ref&lt;Element&gt;", "description": "React.Ref&lt;Element&gt;" }
+    },
     "scale": {
       "type": {
         "name": "(value: number) =&gt; number",
@@ -101,6 +100,13 @@
       "required": true
     },
     "range": { "type": { "name": "boolean", "description": "boolean" }, "required": true },
+    "rootRef": {
+      "type": {
+        "name": "React.RefCallback&lt;Element&gt; | null",
+        "description": "React.RefCallback&lt;Element&gt; | null"
+      },
+      "required": true
+    },
     "trackLeap": { "type": { "name": "number", "description": "number" }, "required": true },
     "trackOffset": { "type": { "name": "number", "description": "number" }, "required": true },
     "values": { "type": { "name": "number[]", "description": "number[]" }, "required": true }
diff --git a/docs/pages/base/api/use-snackbar.json b/docs/pages/base/api/use-snackbar.json
index c0bd0ac77161ae..09d06c08c56591 100644
--- a/docs/pages/base/api/use-snackbar.json
+++ b/docs/pages/base/api/use-snackbar.json
@@ -15,7 +15,6 @@
       }
     },
     "open": { "type": { "name": "boolean", "description": "boolean" } },
-    "ref": { "type": { "name": "React.Ref&lt;any&gt;", "description": "React.Ref&lt;any&gt;" } },
     "resumeHideDuration": { "type": { "name": "number", "description": "number" } }
   },
   "returnValue": {
diff --git a/docs/pages/base/api/use-switch.json b/docs/pages/base/api/use-switch.json
index 6ab490e162cf37..20e284d6da70ec 100644
--- a/docs/pages/base/api/use-switch.json
+++ b/docs/pages/base/api/use-switch.json
@@ -36,6 +36,13 @@
       },
       "required": true
     },
+    "inputRef": {
+      "type": {
+        "name": "React.RefCallback&lt;HTMLInputElement&gt; | null",
+        "description": "React.RefCallback&lt;HTMLInputElement&gt; | null"
+      },
+      "required": true
+    },
     "readOnly": { "type": { "name": "boolean", "description": "boolean" }, "required": true }
   },
   "name": "useSwitch",
diff --git a/docs/pages/base/api/use-tab.json b/docs/pages/base/api/use-tab.json
index 10d3634a479d70..43eaa028650571 100644
--- a/docs/pages/base/api/use-tab.json
+++ b/docs/pages/base/api/use-tab.json
@@ -11,7 +11,9 @@
     "onClick": {
       "type": { "name": "React.MouseEventHandler", "description": "React.MouseEventHandler" }
     },
-    "ref": { "type": { "name": "React.Ref&lt;any&gt;", "description": "React.Ref&lt;any&gt;" } },
+    "rootRef": {
+      "type": { "name": "React.Ref&lt;Element&gt;", "description": "React.Ref&lt;Element&gt;" }
+    },
     "value": { "type": { "name": "number | string", "description": "number | string" } }
   },
   "returnValue": {
@@ -26,6 +28,13 @@
     },
     "highlighted": { "type": { "name": "boolean", "description": "boolean" }, "required": true },
     "index": { "type": { "name": "number", "description": "number" }, "required": true },
+    "rootRef": {
+      "type": {
+        "name": "React.RefCallback&lt;Element&gt; | null",
+        "description": "React.RefCallback&lt;Element&gt; | null"
+      },
+      "required": true
+    },
     "selected": { "type": { "name": "boolean", "description": "boolean" }, "required": true },
     "setFocusVisible": {
       "type": {
diff --git a/docs/pages/base/api/use-tabs-list.json b/docs/pages/base/api/use-tabs-list.json
index 3c782a740b3fd3..bd9cf3902d130f 100644
--- a/docs/pages/base/api/use-tabs-list.json
+++ b/docs/pages/base/api/use-tabs-list.json
@@ -1,7 +1,7 @@
 {
   "parameters": {
-    "ref": {
-      "type": { "name": "React.Ref&lt;unknown&gt;", "description": "React.Ref&lt;unknown&gt;" },
+    "rootRef": {
+      "type": { "name": "React.Ref&lt;Element&gt;", "description": "React.Ref&lt;Element&gt;" },
       "required": true
     }
   },
@@ -41,6 +41,13 @@
       "default": "'horizontal'",
       "required": true
     },
+    "rootRef": {
+      "type": {
+        "name": "React.RefCallback&lt;Element&gt; | null",
+        "description": "React.RefCallback&lt;Element&gt; | null"
+      },
+      "required": true
+    },
     "selectedValue": {
       "type": { "name": "string | number | null", "description": "string | number | null" },
       "required": true
diff --git a/docs/translations/api-docs/use-button/use-button.json b/docs/translations/api-docs/use-button/use-button.json
index 15688c68bc0ed6..b4dbbae1765c6b 100644
--- a/docs/translations/api-docs/use-button/use-button.json
+++ b/docs/translations/api-docs/use-button/use-button.json
@@ -7,10 +7,9 @@
   },
   "returnValueDescriptions": {
     "active": "If <code>true</code>, the component is active (pressed).",
-    "disabled": "If <code>true</code>, the component is disabled.",
     "focusVisible": "If <code>true</code>, the component is being focused using keyboard.",
     "getRootProps": "Resolver for the root slot's props.",
-    "ref": "A ref to the component's root DOM element.",
+    "rootRef": "A ref to the component's root DOM element.",
     "setFocusVisible": "Callback for setting the <code>focusVisible</code> param."
   }
 }
diff --git a/docs/translations/api-docs/use-menu-item/use-menu-item.json b/docs/translations/api-docs/use-menu-item/use-menu-item.json
index 5c2971b849e460..1b3d173e4923ee 100644
--- a/docs/translations/api-docs/use-menu-item/use-menu-item.json
+++ b/docs/translations/api-docs/use-menu-item/use-menu-item.json
@@ -7,7 +7,7 @@
     "getRootProps": "Resolver for the root slot's props.",
     "highlighted": "If <code>true</code>, the component is being highlighted.",
     "index": "0-based index of the item in the menu.",
-    "ref": "The ref to the component's root DOM element.",
+    "rootRef": "The ref to the component's root DOM element.",
     "totalItemCount": "Total number of items in the menu."
   }
 }
diff --git a/docs/translations/api-docs/use-menu/use-menu.json b/docs/translations/api-docs/use-menu/use-menu.json
index 28fc5be0ea60b0..24966d2a171183 100644
--- a/docs/translations/api-docs/use-menu/use-menu.json
+++ b/docs/translations/api-docs/use-menu/use-menu.json
@@ -12,6 +12,7 @@
     "dispatch": "Action dispatcher for the menu component.\nAllows to programmatically control the menu.",
     "getListboxProps": "Resolver for the listbox component's props.",
     "highlightedValue": "The highlighted option in the menu listbox.",
+    "listboxRef": "The ref to the listbox DOM node.",
     "menuItems": "Items in the menu listbox.",
     "open": "If <code>true</code>, the menu is open."
   }
diff --git a/docs/translations/api-docs/use-select/use-select.json b/docs/translations/api-docs/use-select/use-select.json
index c9822f6fbf031f..ec626227399f64 100644
--- a/docs/translations/api-docs/use-select/use-select.json
+++ b/docs/translations/api-docs/use-select/use-select.json
@@ -19,6 +19,7 @@
   "returnValueDescriptions": {
     "buttonActive": "If <code>true</code>, the trigger button is active (pressed).",
     "buttonFocusVisible": "If <code>true</code>, the trigger button has a visible focus.",
+    "buttonRef": "Ref to the button slot DOM node.",
     "contextValue": "A value to be passed to the <code>SelectProvider</code> component.",
     "disabled": "If <code>true</code>, the select is disabled.",
     "dispatch": "Action dispatcher for the select component.\nAllows to programmatically control the select.",
@@ -26,6 +27,7 @@
     "getListboxProps": "Resolver for the listbox slot's props.",
     "getOptionMetadata": "A function that returns the metadata of an option with a given value.",
     "highlightedOption": "The value of the highlighted option.",
+    "listboxRef": "Ref to the listbox slot DOM node.",
     "open": "If <code>true</code>, the listbox is open.",
     "options": "Values of all the registered options.",
     "value": "The value of the selected option(s)."
diff --git a/docs/translations/api-docs/use-slider/use-slider.json b/docs/translations/api-docs/use-slider/use-slider.json
index 0ed11afef95b15..6125d7226b96b9 100644
--- a/docs/translations/api-docs/use-slider/use-slider.json
+++ b/docs/translations/api-docs/use-slider/use-slider.json
@@ -13,7 +13,7 @@
     "onChange": "Callback function that is fired when the slider's value changed.",
     "onChangeCommitted": "Callback function that is fired when the <code>mouseup</code> is triggered.",
     "orientation": "The component orientation.",
-    "ref": "The ref attached to the root of the Slider.",
+    "rootRef": "The ref attached to the root of the Slider.",
     "scale": "A transformation function, to change the scale of the slider.",
     "step": "The granularity with which the slider can step through values. (A \"discrete\" slider.)\nThe <code>min</code> prop serves as the origin for the valid values.\nWe recommend (max - min) to be evenly divisible by the step.\n\nWhen step is <code>null</code>, the thumb can only be slid onto marks provided with the <code>marks</code> prop.",
     "tabIndex": "Tab index attribute of the hidden <code>input</code> element.",
@@ -31,6 +31,7 @@
     "marks": "The marks of the slider. Marks indicate predetermined values to which the user can move the slider.",
     "open": "The thumb index for the current value when in hover state.",
     "range": "If <code>true</code>, the slider is a range slider when the <code>value</code> prop passed is an array.",
+    "rootRef": "Ref to the root slot's DOM node.",
     "trackLeap": "The track leap for the current value of the slider.",
     "trackOffset": "The track offset for the current value of the slider.",
     "values": "The possible values of the slider."
diff --git a/docs/translations/api-docs/use-switch/use-switch.json b/docs/translations/api-docs/use-switch/use-switch.json
index 2858315d56d30c..16f137be40b835 100644
--- a/docs/translations/api-docs/use-switch/use-switch.json
+++ b/docs/translations/api-docs/use-switch/use-switch.json
@@ -13,6 +13,7 @@
     "disabled": "If <code>true</code>, the component will be disabled.",
     "focusVisible": "If <code>true</code>, it indicates that the component is being focused using keyboard.",
     "getInputProps": "Resolver for the input slot's props.",
+    "inputRef": "Ref to the input slot's DOM node.",
     "readOnly": "If <code>true</code>, the component will be read only."
   }
 }
diff --git a/docs/translations/api-docs/use-tab/use-tab.json b/docs/translations/api-docs/use-tab/use-tab.json
index 0f4fd4712898e2..84dde04e8b49cc 100644
--- a/docs/translations/api-docs/use-tab/use-tab.json
+++ b/docs/translations/api-docs/use-tab/use-tab.json
@@ -5,7 +5,7 @@
     "id": "The id of the tab.\nIf not provided, it will be automatically generated.",
     "onChange": "If <code>true</code>, the tab will be disabled.",
     "onClick": "Callback fired when the tab is clicked.",
-    "ref": "Ref to the DOM element associated with the tab.",
+    "rootRef": "Ref to the root slot's DOM element.",
     "value": "The value of the tab.\nIt's used to associate the tab with a tab panel(s) with the same value.\nIf the value is not provided, it falls back to the position index."
   },
   "returnValueDescriptions": {
@@ -14,6 +14,7 @@
     "getRootProps": "Resolver for the root slot's props.",
     "highlighted": "If <code>true</code>, the tab is highlighted.",
     "index": "0-based index of the tab in the list of tabs.",
+    "rootRef": "Ref to the root slot's DOM element.",
     "selected": "If <code>true</code>, the tab is selected.",
     "setFocusVisible": "Sets the focus-visible state of the tab.\nThis is a workaround for browsers that do not support this feature natively.",
     "totalTabsCount": "Total number of tabs in the nearest parent TabsList.\nThis can be used to determine if the tab is the last one to style it accordingly."
diff --git a/docs/translations/api-docs/use-tabs-list/use-tabs-list.json b/docs/translations/api-docs/use-tabs-list/use-tabs-list.json
index eb1cbcd966bb1a..9cba356151ab91 100644
--- a/docs/translations/api-docs/use-tabs-list/use-tabs-list.json
+++ b/docs/translations/api-docs/use-tabs-list/use-tabs-list.json
@@ -1,6 +1,6 @@
 {
   "hookDescription": "",
-  "parametersDescriptions": { "ref": "Ref to the root element." },
+  "parametersDescriptions": { "rootRef": "Ref to the root element." },
   "returnValueDescriptions": {
     "contextValue": "The value to be passed to the TabListProvider above all the tabs.",
     "dispatch": "Action dispatcher for the tabs list component.\nAllows to programmatically control the tabs list.",

From 854970c7096f4c91cceba0d9212b455eb384fd0b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C5=82=20Dudak?= <michal@dudak.me>
Date: Sun, 23 Apr 2023 08:43:52 -0400
Subject: [PATCH 14/15] TS demos

---
 docs/data/base/components/button/UseButton.js | 11 ++++++++---
 docs/data/base/components/menu/UseMenu.js     |  2 +-
 2 files changed, 9 insertions(+), 4 deletions(-)

diff --git a/docs/data/base/components/button/UseButton.js b/docs/data/base/components/button/UseButton.js
index 081adb4019c822..24e1d25505a7e3 100644
--- a/docs/data/base/components/button/UseButton.js
+++ b/docs/data/base/components/button/UseButton.js
@@ -7,10 +7,10 @@ import { styled } from '@mui/system';
 import Stack from '@mui/material/Stack';
 
 const CustomButton = React.forwardRef(function CustomButton(props, ref) {
-  const { children } = props;
-  const { active, disabled, focusVisible, getRootProps } = useButton({
+  const { children, disabled } = props;
+  const { active, focusVisible, getRootProps } = useButton({
     ...props,
-    ref,
+    rootRef: ref,
   });
 
   const classes = {
@@ -28,6 +28,11 @@ const CustomButton = React.forwardRef(function CustomButton(props, ref) {
 
 CustomButton.propTypes = {
   children: PropTypes.node,
+  /**
+   * If `true`, the component is disabled.
+   * @default false
+   */
+  disabled: PropTypes.bool,
 };
 
 export default function UseButton() {
diff --git a/docs/data/base/components/menu/UseMenu.js b/docs/data/base/components/menu/UseMenu.js
index 32263958a0195a..6fe2fc6600db7d 100644
--- a/docs/data/base/components/menu/UseMenu.js
+++ b/docs/data/base/components/menu/UseMenu.js
@@ -31,7 +31,7 @@ Menu.propTypes = {
 const MenuItem = React.forwardRef(function MenuItem(props, ref) {
   const { children, onClick, ...other } = props;
 
-  const { getRootProps, disabled, focusVisible } = useMenuItem({ ref });
+  const { getRootProps, disabled, focusVisible } = useMenuItem({ rootRef: ref });
 
   const classes = {
     'focus-visible': focusVisible,

From 12ef4d6178cf8d427b3147821053ea0135205241 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C5=82=20Dudak?= <michal@dudak.me>
Date: Tue, 25 Apr 2023 16:39:55 +0200
Subject: [PATCH 15/15] Rename generic parameters

---
 packages/mui-base/src/Badge/Badge.tsx         |  7 ++-
 packages/mui-base/src/Badge/Badge.types.ts    | 34 +++++++------
 packages/mui-base/src/Button/Button.tsx       | 14 ++----
 packages/mui-base/src/Button/Button.types.ts  | 28 +++++++----
 .../mui-base/src/FormControl/FormControl.tsx  |  4 +-
 .../src/FormControl/FormControl.types.ts      | 16 +++---
 packages/mui-base/src/Input/Input.tsx         |  4 +-
 packages/mui-base/src/Input/Input.types.ts    | 18 ++++---
 packages/mui-base/src/Menu/Menu.tsx           |  7 +--
 packages/mui-base/src/Menu/Menu.types.ts      | 28 +++++++----
 packages/mui-base/src/MenuItem/MenuItem.tsx   |  7 +--
 .../mui-base/src/MenuItem/MenuItem.types.ts   | 32 +++++++-----
 packages/mui-base/src/Modal/Modal.tsx         |  7 +--
 packages/mui-base/src/Modal/Modal.types.ts    | 45 +++++++++--------
 packages/mui-base/src/Option/Option.tsx       |  8 +--
 packages/mui-base/src/Option/Option.types.ts  | 22 ++++----
 .../mui-base/src/OptionGroup/OptionGroup.tsx  |  4 +-
 .../src/OptionGroup/OptionGroup.types.ts      | 18 ++++---
 packages/mui-base/src/Popper/Popper.tsx       | 11 ++--
 packages/mui-base/src/Popper/Popper.types.ts  | 34 +++++++------
 packages/mui-base/src/Select/Select.tsx       | 12 +++--
 packages/mui-base/src/Select/Select.types.ts  | 45 ++++++++++-------
 packages/mui-base/src/Slider/Slider.tsx       |  7 +--
 packages/mui-base/src/Slider/Slider.types.ts  | 50 +++++++++++--------
 packages/mui-base/src/Snackbar/Snackbar.tsx   |  4 +-
 .../mui-base/src/Snackbar/Snackbar.types.ts   | 18 ++++---
 packages/mui-base/src/Switch/Switch.tsx       |  7 +--
 packages/mui-base/src/Switch/Switch.types.ts  | 18 ++++---
 packages/mui-base/src/Tab/Tab.tsx             |  6 +--
 packages/mui-base/src/Tab/Tab.types.ts        | 33 ++++++------
 packages/mui-base/src/TabPanel/TabPanel.tsx   | 13 +++--
 .../mui-base/src/TabPanel/TabPanel.types.ts   | 26 ++++++----
 .../src/TablePagination/TablePagination.tsx   |  7 ++-
 .../TablePagination/TablePagination.types.ts  | 18 ++++---
 .../TablePaginationActions.tsx                |  6 ++-
 .../TablePaginationActions.types.ts           | 18 ++++---
 packages/mui-base/src/Tabs/Tabs.tsx           |  8 +--
 packages/mui-base/src/Tabs/Tabs.types.ts      | 28 ++++++-----
 packages/mui-base/src/TabsList/TabsList.tsx   | 13 +++--
 .../mui-base/src/TabsList/TabsList.types.ts   | 28 ++++++-----
 40 files changed, 408 insertions(+), 305 deletions(-)

diff --git a/packages/mui-base/src/Badge/Badge.tsx b/packages/mui-base/src/Badge/Badge.tsx
index 4f35db7bbf7ef9..3936c21e8c4b3d 100644
--- a/packages/mui-base/src/Badge/Badge.tsx
+++ b/packages/mui-base/src/Badge/Badge.tsx
@@ -34,7 +34,10 @@ const useUtilityClasses = (ownerState: BadgeOwnerState) => {
  *
  * - [Badge API](https://mui.com/base/react-badge/components-api/#badge)
  */
-const Badge = React.forwardRef(function Badge(props: BadgeProps, ref) {
+const Badge = React.forwardRef(function Badge<RootComponentType extends React.ElementType>(
+  props: BadgeProps<RootComponentType>,
+  forwardedRef: React.ForwardedRef<Element>,
+) {
   const {
     badgeContent: badgeContentProp,
     component,
@@ -68,7 +71,7 @@ const Badge = React.forwardRef(function Badge(props: BadgeProps, ref) {
     externalSlotProps: slotProps.root,
     externalForwardedProps: other,
     additionalProps: {
-      ref,
+      ref: forwardedRef,
     },
     ownerState,
     className: classes.root,
diff --git a/packages/mui-base/src/Badge/Badge.types.ts b/packages/mui-base/src/Badge/Badge.types.ts
index 0e49314d5da09c..8bf9d3756ed9e7 100644
--- a/packages/mui-base/src/Badge/Badge.types.ts
+++ b/packages/mui-base/src/Badge/Badge.types.ts
@@ -1,16 +1,18 @@
 import * as React from 'react';
-import { OverrideProps, OverridableTypeMap, OverridableComponent } from '@mui/types';
+import { OverrideProps, OverridableTypeMap, OverridableComponent, Simplify } from '@mui/types';
 import { SlotComponentProps } from '../utils';
 
 export interface BadgeRootSlotPropsOverrides {}
 export interface BadgeBadgeSlotPropsOverrides {}
 
-export type BadgeOwnerState = BadgeProps & {
-  badgeContent: React.ReactNode;
-  invisible: boolean;
-  max: number;
-  showZero: boolean;
-};
+export type BadgeOwnerState = Simplify<
+  BadgeOwnProps & {
+    badgeContent: React.ReactNode;
+    invisible: boolean;
+    max: number;
+    showZero: boolean;
+  }
+>;
 
 export interface BadgeOwnProps {
   /**
@@ -65,9 +67,12 @@ export interface BadgeSlots {
   badge?: React.ElementType;
 }
 
-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,10 +85,11 @@ export interface ExtendBadgeTypeMap<M extends OverridableTypeMap> {
 
 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;
+};
 
 export type BadgeRootSlotProps = {
   children?: React.ReactNode;
diff --git a/packages/mui-base/src/Button/Button.tsx b/packages/mui-base/src/Button/Button.tsx
index 406b59b92ad213..013c3fb78e56e1 100644
--- a/packages/mui-base/src/Button/Button.tsx
+++ b/packages/mui-base/src/Button/Button.tsx
@@ -3,17 +3,12 @@ import PropTypes from 'prop-types';
 import { OverridableComponent } from '@mui/types';
 import composeClasses from '../composeClasses';
 import { getButtonUtilityClass } from './buttonClasses';
-import { ButtonProps, ButtonOwnProps, ButtonTypeMap, ButtonRootSlotProps } from './Button.types';
+import { ButtonProps, ButtonTypeMap, ButtonRootSlotProps, ButtonOwnerState } from './Button.types';
 import useButton from '../useButton';
 import { WithOptionalOwnerState } from '../utils/types';
 import { useSlotProps } from '../utils';
 import { useClassNamesOverride } from '../utils/ClassNameConfigurator';
 
-export interface ButtonOwnerState extends ButtonOwnProps {
-  focusVisible: boolean;
-  active: boolean;
-}
-
 const useUtilityClasses = (ownerState: ButtonOwnerState) => {
   const { active, disabled, focusVisible } = ownerState;
 
@@ -34,9 +29,10 @@ const useUtilityClasses = (ownerState: ButtonOwnerState) => {
  *
  * - [Button API](https://mui.com/base/react-button/components-api/#button)
  */
-const Button = React.forwardRef(function Button<
-  BaseComponentType extends React.ElementType = ButtonTypeMap['defaultComponent'],
->(props: ButtonProps<BaseComponentType>, forwardedRef: React.ForwardedRef<Element>) {
+const Button = React.forwardRef(function Button<RootComponentType extends React.ElementType>(
+  props: ButtonProps<RootComponentType>,
+  forwardedRef: React.ForwardedRef<Element>,
+) {
   const {
     action,
     children,
diff --git a/packages/mui-base/src/Button/Button.types.ts b/packages/mui-base/src/Button/Button.types.ts
index 54c35764b4f68b..c873aa0f89eb5d 100644
--- a/packages/mui-base/src/Button/Button.types.ts
+++ b/packages/mui-base/src/Button/Button.types.ts
@@ -39,20 +39,26 @@ export interface ButtonSlots {
   root?: React.ElementType;
 }
 
-export type ButtonProps<D extends React.ElementType = ButtonTypeMap['defaultComponent']> =
-  OverrideProps<ButtonTypeMap<{}, D>, D> & {
-    component?: D;
-  };
+export type ButtonProps<
+  RootComponentType extends React.ElementType = ButtonTypeMap['defaultComponent'],
+> = OverrideProps<ButtonTypeMap<{}, RootComponentType>, RootComponentType> & {
+  component?: RootComponentType;
+};
 
-export interface ButtonTypeMap<P = {}, D extends React.ElementType = 'button'> {
-  props: P & ButtonOwnProps;
-  defaultComponent: D;
+export interface ButtonTypeMap<
+  AdditionalProps = {},
+  RootComponentType extends React.ElementType = 'button',
+> {
+  props: ButtonOwnProps & AdditionalProps;
+  defaultComponent: RootComponentType;
 }
 
-export type ButtonOwnerState = ButtonOwnProps & {
-  active: boolean;
-  focusVisible: boolean;
-};
+export type ButtonOwnerState = Simplify<
+  ButtonOwnProps & {
+    active: boolean;
+    focusVisible: boolean;
+  }
+>;
 
 export type ButtonRootSlotProps = Simplify<
   UseButtonRootSlotProps & {
diff --git a/packages/mui-base/src/FormControl/FormControl.tsx b/packages/mui-base/src/FormControl/FormControl.tsx
index d66c0a63082d6f..f79f77647eaa2b 100644
--- a/packages/mui-base/src/FormControl/FormControl.tsx
+++ b/packages/mui-base/src/FormControl/FormControl.tsx
@@ -75,8 +75,8 @@ function useUtilityClasses(ownerState: FormControlOwnerState) {
  * - [FormControl API](https://mui.com/base/react-form-control/components-api/#form-control)
  */
 const FormControl = React.forwardRef(function FormControl<
-  D extends React.ElementType = FormControlTypeMap['defaultComponent'],
->(props: FormControlProps<D>, forwardedRef: React.ForwardedRef<Element>) {
+  RootComponentType extends React.ElementType,
+>(props: FormControlProps<RootComponentType>, forwardedRef: React.ForwardedRef<Element>) {
   const {
     defaultValue,
     children,
diff --git a/packages/mui-base/src/FormControl/FormControl.types.ts b/packages/mui-base/src/FormControl/FormControl.types.ts
index a1b4b8e6f675a6..faa33734da2979 100644
--- a/packages/mui-base/src/FormControl/FormControl.types.ts
+++ b/packages/mui-base/src/FormControl/FormControl.types.ts
@@ -62,16 +62,18 @@ export interface FormControlSlots {
   root?: React.ElementType;
 }
 
-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;
+  RootComponentType extends React.ElementType = FormControlTypeMap['defaultComponent'],
+> = OverrideProps<FormControlTypeMap<{}, RootComponentType>, RootComponentType> & {
+  component?: RootComponentType;
 };
 
 type NonOptionalOwnerState = 'disabled' | 'error' | 'required';
diff --git a/packages/mui-base/src/Input/Input.tsx b/packages/mui-base/src/Input/Input.tsx
index 3e89432153e4b8..2ce2cad7adc565 100644
--- a/packages/mui-base/src/Input/Input.tsx
+++ b/packages/mui-base/src/Input/Input.tsx
@@ -46,8 +46,8 @@ const useUtilityClasses = (ownerState: InputOwnerState) => {
  *
  * - [Input API](https://mui.com/base/react-input/components-api/#input)
  */
-const Input = React.forwardRef(function Input(
-  props: InputProps,
+const Input = React.forwardRef(function Input<RootComponentType extends React.ElementType>(
+  props: InputProps<RootComponentType>,
   forwardedRef: React.ForwardedRef<Element>,
 ) {
   const {
diff --git a/packages/mui-base/src/Input/Input.types.ts b/packages/mui-base/src/Input/Input.types.ts
index dc4262134007c2..71d142d22defe5 100644
--- a/packages/mui-base/src/Input/Input.types.ts
+++ b/packages/mui-base/src/Input/Input.types.ts
@@ -146,20 +146,22 @@ export interface InputSlots {
   textarea?: React.ElementType;
 }
 
-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;
+  RootComponentType extends React.ElementType = InputTypeMap['defaultComponent'],
+> = OverrideProps<InputTypeMap<{}, RootComponentType>, RootComponentType> & {
+  component?: RootComponentType;
 };
 
 export type InputOwnerState = Simplify<
-  Omit<InputProps, 'component' | 'slots' | 'slotProps'> & {
+  InputOwnProps & {
     formControlContext: FormControlState | undefined;
     focused: boolean;
     type: React.InputHTMLAttributes<HTMLInputElement>['type'] | undefined;
diff --git a/packages/mui-base/src/Menu/Menu.tsx b/packages/mui-base/src/Menu/Menu.tsx
index 285d5097476fef..41c463e4da7976 100644
--- a/packages/mui-base/src/Menu/Menu.tsx
+++ b/packages/mui-base/src/Menu/Menu.tsx
@@ -31,9 +31,10 @@ function useUtilityClasses(ownerState: MenuOwnerState) {
  *
  * - [Menu API](https://mui.com/base/react-menu/components-api/#menu)
  */
-const Menu = React.forwardRef(function Menu<
-  BaseComponentType extends React.ElementType = MenuTypeMap['defaultComponent'],
->(props: MenuProps<BaseComponentType>, forwardedRef: React.ForwardedRef<Element>) {
+const Menu = React.forwardRef(function Menu<RootComponentType extends React.ElementType>(
+  props: MenuProps<RootComponentType>,
+  forwardedRef: React.ForwardedRef<Element>,
+) {
   const {
     actions,
     anchorEl,
diff --git a/packages/mui-base/src/Menu/Menu.types.ts b/packages/mui-base/src/Menu/Menu.types.ts
index 87262a72b64450..fa8ccca77518c8 100644
--- a/packages/mui-base/src/Menu/Menu.types.ts
+++ b/packages/mui-base/src/Menu/Menu.types.ts
@@ -1,5 +1,5 @@
-import { OverrideProps } from '@mui/types';
 import * as React from 'react';
+import { OverrideProps, Simplify } from '@mui/types';
 import Popper, { PopperProps } from '../Popper';
 import { SlotComponentProps } from '../utils';
 import { UseMenuListboxSlotProps } from '../useMenu';
@@ -66,19 +66,25 @@ export interface MenuSlots {
   listbox?: React.ElementType;
 }
 
-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 type MenuProps<
+  RootComponentType extends React.ElementType = MenuTypeMap['defaultComponent'],
+> = OverrideProps<MenuTypeMap<{}, RootComponentType>, RootComponentType> & {
+  component?: RootComponentType;
+};
 
-export interface MenuOwnerState extends MenuOwnProps {
-  open: boolean;
-}
+export type MenuOwnerState = Simplify<
+  MenuOwnProps & {
+    open: boolean;
+  }
+>;
 
 export type MenuRootSlotProps = {
   anchorEl: PopperProps['anchorEl'];
diff --git a/packages/mui-base/src/MenuItem/MenuItem.tsx b/packages/mui-base/src/MenuItem/MenuItem.tsx
index 752843cf762c17..7786d99a7251cb 100644
--- a/packages/mui-base/src/MenuItem/MenuItem.tsx
+++ b/packages/mui-base/src/MenuItem/MenuItem.tsx
@@ -28,9 +28,10 @@ function useUtilityClasses(ownerState: MenuItemOwnerState) {
  *
  * - [MenuItem API](https://mui.com/base/react-menu/components-api/#menu-item)
  */
-const MenuItem = React.forwardRef(function MenuItem<
-  BaseComponentType extends React.ElementType = MenuItemTypeMap['defaultComponent'],
->(props: MenuItemProps<BaseComponentType>, forwardedRef: React.ForwardedRef<Element>) {
+const MenuItem = React.forwardRef(function MenuItem<RootComponentType extends React.ElementType>(
+  props: MenuItemProps<RootComponentType>,
+  forwardedRef: React.ForwardedRef<Element>,
+) {
   const {
     children,
     disabled: disabledProp = false,
diff --git a/packages/mui-base/src/MenuItem/MenuItem.types.ts b/packages/mui-base/src/MenuItem/MenuItem.types.ts
index 8979b3d598962a..43f9454a7357aa 100644
--- a/packages/mui-base/src/MenuItem/MenuItem.types.ts
+++ b/packages/mui-base/src/MenuItem/MenuItem.types.ts
@@ -1,14 +1,16 @@
-import { OverrideProps } from '@mui/types';
 import * as React from 'react';
+import { OverrideProps, Simplify } from '@mui/types';
 import { SlotComponentProps } from '../utils';
 
 export interface MenuItemRootSlotPropsOverrides {}
 
-export interface MenuItemOwnerState extends MenuItemOwnProps {
-  disabled: boolean;
-  focusVisible: boolean;
-  highlighted: boolean;
-}
+export type MenuItemOwnerState = Simplify<
+  MenuItemOwnProps & {
+    disabled: boolean;
+    focusVisible: boolean;
+    highlighted: boolean;
+  }
+>;
 
 export interface MenuItemOwnProps {
   children?: React.ReactNode;
@@ -47,15 +49,19 @@ export interface MenuItemSlots {
   root?: React.ElementType;
 }
 
-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'],
+> = OverrideProps<MenuItemTypeMap<{}, RootComponentType>, RootComponentType> & {
+  component?: RootComponentType;
+};
 
 export interface MenuItemState {
   disabled: boolean;
diff --git a/packages/mui-base/src/Modal/Modal.tsx b/packages/mui-base/src/Modal/Modal.tsx
index 202b982def67f5..c2e95b3b85e416 100644
--- a/packages/mui-base/src/Modal/Modal.tsx
+++ b/packages/mui-base/src/Modal/Modal.tsx
@@ -62,9 +62,10 @@ const defaultManager = new ModalManager();
  *
  * - [Modal API](https://mui.com/base/react-modal/components-api/#modal)
  */
-const Modal = React.forwardRef(function Modal<
-  BaseComponentType extends React.ElementType = ModalTypeMap['defaultComponent'],
->(props: ModalProps<BaseComponentType>, forwardedRef: React.ForwardedRef<Element>) {
+const Modal = React.forwardRef(function Modal<RootComponentType extends React.ElementType>(
+  props: ModalProps<RootComponentType>,
+  forwardedRef: React.ForwardedRef<Element>,
+) {
   const {
     children,
     closeAfterTransition = false,
diff --git a/packages/mui-base/src/Modal/Modal.types.ts b/packages/mui-base/src/Modal/Modal.types.ts
index 4ba580e8f213e0..586d49124f4a3c 100644
--- a/packages/mui-base/src/Modal/Modal.types.ts
+++ b/packages/mui-base/src/Modal/Modal.types.ts
@@ -1,5 +1,5 @@
-import { OverridableComponent, OverridableTypeMap, OverrideProps } from '@mui/types';
 import * as React from 'react';
+import { OverridableComponent, OverridableTypeMap, OverrideProps, Simplify } from '@mui/types';
 import { PortalProps } from '../Portal';
 import { SlotComponentProps } from '../utils';
 
@@ -122,9 +122,12 @@ export interface ModalSlots {
   backdrop?: React.ElementType;
 }
 
-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;
 }
 
 /**
@@ -138,25 +141,23 @@ export interface ExtendModalTypeMap<M extends OverridableTypeMap> {
 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>;
+  RootComponentType extends React.ElementType = ModalTypeMap['defaultComponent'],
+> = OverrideProps<ModalTypeMap<{}, RootComponentType>, RootComponentType>;
 
-export type ModalOwnerState = ModalProps & {
-  closeAfterTransition: boolean;
-  disableAutoFocus: boolean;
-  disableEnforceFocus: boolean;
-  disableEscapeKeyDown: boolean;
-  disablePortal: boolean;
-  disableRestoreFocus: boolean;
-  disableScrollLock: boolean;
-  exited: boolean;
-  hideBackdrop: boolean;
-  keepMounted: boolean;
-};
+export type ModalOwnerState = Simplify<
+  ModalOwnProps & {
+    closeAfterTransition: boolean;
+    disableAutoFocus: boolean;
+    disableEnforceFocus: boolean;
+    disableEscapeKeyDown: boolean;
+    disablePortal: boolean;
+    disableRestoreFocus: boolean;
+    disableScrollLock: boolean;
+    exited: boolean;
+    hideBackdrop: boolean;
+    keepMounted: boolean;
+  }
+>;
 
 export interface ModalRootSlotProps {
   children: React.ReactNode;
diff --git a/packages/mui-base/src/Option/Option.tsx b/packages/mui-base/src/Option/Option.tsx
index 5898b12231abd5..7ecb1ef8091662 100644
--- a/packages/mui-base/src/Option/Option.tsx
+++ b/packages/mui-base/src/Option/Option.tsx
@@ -21,10 +21,10 @@ function useUtilityClasses<OptionValue>(ownerState: OptionOwnerState<OptionValue
 /**
  * An unstyled option to be used within a Select.
  */
-const Option = React.forwardRef(function Option<OptionValue>(
-  props: OptionProps<OptionValue>,
-  forwardedRef: React.ForwardedRef<Element>,
-) {
+const Option = React.forwardRef(function Option<
+  OptionValue,
+  RootComponentType extends React.ElementType,
+>(props: OptionProps<OptionValue, RootComponentType>, forwardedRef: React.ForwardedRef<Element>) {
   const {
     children,
     component,
diff --git a/packages/mui-base/src/Option/Option.types.ts b/packages/mui-base/src/Option/Option.types.ts
index 2ea4769164e200..c87e9f911d39be 100644
--- a/packages/mui-base/src/Option/Option.types.ts
+++ b/packages/mui-base/src/Option/Option.types.ts
@@ -45,27 +45,31 @@ export interface OptionSlots {
   root?: React.ElementType;
 }
 
-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;
+  RootComponentType extends React.ElementType = OptionTypeMap<OptionValue>['defaultComponent'],
+> = OverrideProps<OptionTypeMap<OptionValue, {}, RootComponentType>, RootComponentType> & {
+  component?: RootComponentType;
 };
 
 export interface OptionType {
-  <OptionValue, C extends React.ElementType>(
+  <OptionValue, RootComponentType 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>,
+      component: RootComponentType;
+    } & OverrideProps<OptionTypeMap<OptionValue>, RootComponentType>,
   ): JSX.Element | null;
   <OptionValue>(props: DefaultComponentProps<OptionTypeMap<OptionValue>>): JSX.Element | null;
   propTypes?: any;
diff --git a/packages/mui-base/src/OptionGroup/OptionGroup.tsx b/packages/mui-base/src/OptionGroup/OptionGroup.tsx
index 4ff6f6ff240e14..8f4d8ebf8b2c8d 100644
--- a/packages/mui-base/src/OptionGroup/OptionGroup.tsx
+++ b/packages/mui-base/src/OptionGroup/OptionGroup.tsx
@@ -35,8 +35,8 @@ function useUtilityClasses(disabled: boolean) {
  * - [OptionGroup API](https://mui.com/base/react-select/components-api/#option-group)
  */
 const OptionGroup = React.forwardRef(function OptionGroup<
-  BaseComponentType extends React.ElementType = OptionGroupTypeMap['defaultComponent'],
->(props: OptionGroupProps<BaseComponentType>, forwardedRef: React.ForwardedRef<Element>) {
+  RootComponentType extends React.ElementType,
+>(props: OptionGroupProps<RootComponentType>, forwardedRef: React.ForwardedRef<Element>) {
   const { component, disabled = false, slotProps = {}, slots = {}, ...other } = props;
 
   const Root = component || slots?.root || 'li';
diff --git a/packages/mui-base/src/OptionGroup/OptionGroup.types.ts b/packages/mui-base/src/OptionGroup/OptionGroup.types.ts
index 8a9517cf734a96..709d3c7c512b32 100644
--- a/packages/mui-base/src/OptionGroup/OptionGroup.types.ts
+++ b/packages/mui-base/src/OptionGroup/OptionGroup.types.ts
@@ -53,15 +53,19 @@ export interface OptionGroupSlots {
   list?: React.ElementType;
 }
 
-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'],
+> = OverrideProps<OptionGroupTypeMap<{}, RootComponentType>, RootComponentType> & {
+  component?: RootComponentType;
+};
 
 export type OptionGroupOwnerState = OptionGroupOwnProps;
 
diff --git a/packages/mui-base/src/Popper/Popper.tsx b/packages/mui-base/src/Popper/Popper.tsx
index 6500834b5cd650..95208a0e67771d 100644
--- a/packages/mui-base/src/Popper/Popper.tsx
+++ b/packages/mui-base/src/Popper/Popper.tsx
@@ -75,10 +75,9 @@ const useUtilityClasses = () => {
 
 const defaultPopperOptions = {};
 
-const PopperTooltip = React.forwardRef(function PopperTooltip(
-  props: PopperTooltipProps,
-  forwardedRef: React.ForwardedRef<HTMLDivElement>,
-) {
+const PopperTooltip = React.forwardRef(function PopperTooltip<
+  RootComponentType extends React.ElementType,
+>(props: PopperTooltipProps<RootComponentType>, forwardedRef: React.ForwardedRef<HTMLDivElement>) {
   const {
     anchorEl,
     children,
@@ -247,8 +246,8 @@ const PopperTooltip = React.forwardRef(function PopperTooltip(
  *
  * - [Popper API](https://mui.com/base/react-popper/components-api/#popper)
  */
-const Popper = React.forwardRef(function Popper(
-  props: PopperProps,
+const Popper = React.forwardRef(function Popper<RootComponentType extends React.ElementType>(
+  props: PopperProps<RootComponentType>,
   forwardedRef: React.ForwardedRef<HTMLDivElement>,
 ) {
   const {
diff --git a/packages/mui-base/src/Popper/Popper.types.ts b/packages/mui-base/src/Popper/Popper.types.ts
index cce150f69cd0ea..9a7e1df513b8f7 100644
--- a/packages/mui-base/src/Popper/Popper.types.ts
+++ b/packages/mui-base/src/Popper/Popper.types.ts
@@ -1,6 +1,6 @@
+import * as React from 'react';
 import { OverrideProps } from '@mui/types';
 import { Instance, Options, OptionsGeneric, VirtualElement } from '@popperjs/core';
-import * as React from 'react';
 import { PortalProps } from '../Portal';
 import { SlotComponentProps } from '../utils';
 
@@ -114,16 +114,18 @@ export interface PopperSlots {
 
 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;
+  RootComponentType extends React.ElementType = PopperTypeMap['defaultComponent'],
+> = OverrideProps<PopperTypeMap<{}, RootComponentType>, RootComponentType> & {
+  component?: RootComponentType;
 };
 
 export type PopperTooltipOwnProps = Omit<
@@ -133,16 +135,18 @@ export type PopperTooltipOwnProps = Omit<
   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;
+  RootComponentType extends React.ElementType = PopperTooltipTypeMap['defaultComponent'],
+> = OverrideProps<PopperTooltipTypeMap<{}, RootComponentType>, RootComponentType> & {
+  component?: RootComponentType;
 };
 
 export interface PopperRootSlotProps {
diff --git a/packages/mui-base/src/Select/Select.tsx b/packages/mui-base/src/Select/Select.tsx
index 036c33d06f196c..1bd7e94f4fd99f 100644
--- a/packages/mui-base/src/Select/Select.tsx
+++ b/packages/mui-base/src/Select/Select.tsx
@@ -62,7 +62,9 @@ function defaultFormValueProvider<OptionValue>(
   return JSON.stringify(selectedOption.value);
 }
 
-function useUtilityClasses(ownerState: SelectOwnerState<any, any>) {
+function useUtilityClasses<OptionValue extends {}, Multiple extends boolean>(
+  ownerState: SelectOwnerState<OptionValue, Multiple>,
+) {
   const { active, disabled, open, focusVisible } = ownerState;
 
   const slots = {
@@ -91,8 +93,12 @@ function useUtilityClasses(ownerState: SelectOwnerState<any, any>) {
  *
  * - [Select API](https://mui.com/base/react-select/components-api/#select)
  */
-const Select = React.forwardRef(function Select<OptionValue extends {}, Multiple extends boolean>(
-  props: SelectProps<OptionValue, Multiple>,
+const Select = React.forwardRef(function Select<
+  OptionValue extends {},
+  Multiple extends boolean,
+  RootComponentType extends React.ElementType,
+>(
+  props: SelectProps<OptionValue, Multiple, RootComponentType>,
   forwardedRef: React.ForwardedRef<Element>,
 ) {
   const {
diff --git a/packages/mui-base/src/Select/Select.types.ts b/packages/mui-base/src/Select/Select.types.ts
index e4dad740da409d..e7d6aea61f2bb5 100644
--- a/packages/mui-base/src/Select/Select.types.ts
+++ b/packages/mui-base/src/Select/Select.types.ts
@@ -141,31 +141,41 @@ export interface SelectSlots<OptionValue extends {}, Multiple extends boolean> {
 export interface SelectTypeMap<
   OptionValue extends {},
   Multiple extends boolean,
-  P = {},
-  D extends React.ElementType = 'button',
+  AdditionalProps = {},
+  RootComponentType extends React.ElementType = 'button',
 > {
-  props: P & SelectOwnProps<OptionValue, Multiple>;
-  defaultComponent: D;
+  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;
+  RootComponentType extends React.ElementType = SelectTypeMap<
+    OptionValue,
+    Multiple
+  >['defaultComponent'],
+> = OverrideProps<
+  SelectTypeMap<OptionValue, Multiple, {}, RootComponentType>,
+  RootComponentType
+> & {
+  component?: RootComponentType;
 };
 
 // OverridableComponent cannot be used below as Select's props are generic.
 export interface SelectType {
-  <OptionValue extends {}, C extends React.ElementType, Multiple extends boolean = false>(
+  <
+    OptionValue extends {},
+    RootComponentType 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>,
+      component: RootComponentType;
+    } & OverrideProps<SelectTypeMap<OptionValue, Multiple>, RootComponentType>,
   ): JSX.Element | null;
   <OptionValue extends {}, Multiple extends boolean = false>(
     props: DefaultComponentProps<SelectTypeMap<OptionValue, Multiple>>,
@@ -173,13 +183,14 @@ export interface SelectType {
   propTypes?: any;
 }
 
-export interface SelectOwnerState<OptionValue extends {}, Multiple extends boolean>
-  extends SelectOwnProps<OptionValue, Multiple> {
-  active: boolean;
-  disabled: boolean;
-  focusVisible: boolean;
-  open: boolean;
-}
+export type SelectOwnerState<OptionValue extends {}, Multiple extends boolean> = Simplify<
+  SelectOwnProps<OptionValue, Multiple> & {
+    active: boolean;
+    disabled: boolean;
+    focusVisible: boolean;
+    open: boolean;
+  }
+>;
 
 export type SelectRootSlotProps<OptionValue extends {}, Multiple extends boolean> = Simplify<
   UseSelectButtonSlotProps & {
diff --git a/packages/mui-base/src/Slider/Slider.tsx b/packages/mui-base/src/Slider/Slider.tsx
index bf67f501002e48..b64edc34e442d7 100644
--- a/packages/mui-base/src/Slider/Slider.tsx
+++ b/packages/mui-base/src/Slider/Slider.tsx
@@ -55,9 +55,10 @@ const useUtilityClasses = (ownerState: SliderOwnerState) => {
  *
  * - [Slider API](https://mui.com/base/react-slider/components-api/#slider)
  */
-const Slider = React.forwardRef(function Slider<
-  BaseComponentType extends React.ElementType = SliderTypeMap['defaultComponent'],
->(props: SliderProps<BaseComponentType>, forwardedRef: React.ForwardedRef<Element>) {
+const Slider = React.forwardRef(function Slider<RootComponentType extends React.ElementType>(
+  props: SliderProps<RootComponentType>,
+  forwardedRef: React.ForwardedRef<Element>,
+) {
   const {
     'aria-label': ariaLabel,
     'aria-valuetext': ariaValuetext,
diff --git a/packages/mui-base/src/Slider/Slider.types.ts b/packages/mui-base/src/Slider/Slider.types.ts
index 95542a46bfb9ca..a95ecc53533f9e 100644
--- a/packages/mui-base/src/Slider/Slider.types.ts
+++ b/packages/mui-base/src/Slider/Slider.types.ts
@@ -1,4 +1,4 @@
-import { OverridableComponent, OverridableTypeMap, OverrideProps } from '@mui/types';
+import { OverridableComponent, OverridableTypeMap, OverrideProps, Simplify } from '@mui/types';
 import * as React from 'react';
 import { SlotComponentProps } from '../utils';
 import {
@@ -8,20 +8,22 @@ import {
   UseSliderThumbSlotProps,
 } from '../useSlider';
 
-export interface SliderOwnerState extends SliderOwnProps {
-  disabled: boolean;
-  focusedThumbIndex: number;
-  isRtl: boolean;
-  max: number;
-  min: number;
-  dragging: boolean;
-  marked: boolean;
-  orientation: 'horizontal' | 'vertical';
-  scale: (value: number) => number;
-  step: number | null;
-  track: 'normal' | false | 'inverted';
-  valueLabelFormat: string | ((value: number, index: number) => React.ReactNode);
-}
+export type SliderOwnerState = Simplify<
+  SliderOwnProps & {
+    disabled: boolean;
+    focusedThumbIndex: number;
+    isRtl: boolean;
+    max: number;
+    min: number;
+    dragging: boolean;
+    marked: boolean;
+    orientation: 'horizontal' | 'vertical';
+    scale: (value: number) => number;
+    step: number | null;
+    track: 'normal' | false | 'inverted';
+    valueLabelFormat: string | ((value: number, index: number) => React.ReactNode);
+  }
+>;
 
 export interface SliderRootSlotPropsOverrides {}
 export interface SliderTrackSlotPropsOverrides {}
@@ -147,9 +149,12 @@ export interface SliderSlots {
   input?: React.ElementType;
 }
 
-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;
 }
 
 /**
@@ -164,10 +169,11 @@ 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'],
+> = OverrideProps<SliderTypeMap<{}, RootComponentType>, RootComponentType> & {
+  component?: RootComponentType;
+};
 
 export type SliderRootSlotProps = UseSliderRootSlotProps & {
   children: React.ReactNode;
diff --git a/packages/mui-base/src/Snackbar/Snackbar.tsx b/packages/mui-base/src/Snackbar/Snackbar.tsx
index 224b136e918099..2d3e3d03964fe1 100644
--- a/packages/mui-base/src/Snackbar/Snackbar.tsx
+++ b/packages/mui-base/src/Snackbar/Snackbar.tsx
@@ -33,8 +33,8 @@ const useUtilityClasses = () => {
  *
  * - [Snackbar API](https://mui.com/base/react-snackbar/components-api/#snackbar)
  */
-const Snackbar = React.forwardRef(function Snackbar(
-  props: SnackbarProps,
+const Snackbar = React.forwardRef(function Snackbar<RootComponentType extends React.ElementType>(
+  props: SnackbarProps<RootComponentType>,
   forwardedRef: React.ForwardedRef<Element>,
 ) {
   const {
diff --git a/packages/mui-base/src/Snackbar/Snackbar.types.ts b/packages/mui-base/src/Snackbar/Snackbar.types.ts
index 36346c24ec6885..eac50b9f1eb636 100644
--- a/packages/mui-base/src/Snackbar/Snackbar.types.ts
+++ b/packages/mui-base/src/Snackbar/Snackbar.types.ts
@@ -42,19 +42,21 @@ export interface SnackbarSlots {
   root?: React.ElementType;
 }
 
-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;
+  RootComponentType extends React.ElementType = SnackbarTypeMap['defaultComponent'],
+> = OverrideProps<SnackbarTypeMap<{}, RootComponentType>, RootComponentType> & {
+  component?: RootComponentType;
 };
 
-export type SnackbarOwnerState = SnackbarProps;
+export type SnackbarOwnerState = SnackbarOwnProps;
 
 export type SnackbarRootSlotProps = {
   ownerState: SnackbarOwnerState;
diff --git a/packages/mui-base/src/Switch/Switch.tsx b/packages/mui-base/src/Switch/Switch.tsx
index 8bffa03c71bd5e..754fc0e7b85b67 100644
--- a/packages/mui-base/src/Switch/Switch.tsx
+++ b/packages/mui-base/src/Switch/Switch.tsx
@@ -46,9 +46,10 @@ const useUtilityClasses = (ownerState: SwitchOwnerState) => {
  *
  * - [Switch API](https://mui.com/base/react-switch/components-api/#switch)
  */
-const Switch = React.forwardRef(function Switch<
-  BaseComponentType extends React.ElementType = SwitchTypeMap['defaultComponent'],
->(props: SwitchProps<BaseComponentType>, forwardedRef: React.ForwardedRef<Element>) {
+const Switch = React.forwardRef(function Switch<RootComponentType extends React.ElementType>(
+  props: SwitchProps<RootComponentType>,
+  forwardedRef: React.ForwardedRef<Element>,
+) {
   const {
     checked: checkedProp,
     component,
diff --git a/packages/mui-base/src/Switch/Switch.types.ts b/packages/mui-base/src/Switch/Switch.types.ts
index a09d087d8ae21b..ef6fd19c34aa26 100644
--- a/packages/mui-base/src/Switch/Switch.types.ts
+++ b/packages/mui-base/src/Switch/Switch.types.ts
@@ -53,15 +53,19 @@ export interface SwitchSlots {
   track?: React.ElementType | null;
 }
 
-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'],
+> = OverrideProps<SwitchTypeMap<{}, RootComponentType>, RootComponentType> & {
+  component?: RootComponentType;
+};
 
 export type SwitchOwnerState = Simplify<
   SwitchOwnProps & {
diff --git a/packages/mui-base/src/Tab/Tab.tsx b/packages/mui-base/src/Tab/Tab.tsx
index c957e2a6f6613e..b1abb62b4dbd38 100644
--- a/packages/mui-base/src/Tab/Tab.tsx
+++ b/packages/mui-base/src/Tab/Tab.tsx
@@ -28,8 +28,8 @@ const useUtilityClasses = (ownerState: TabOwnerState) => {
  *
  * - [Tab API](https://mui.com/base/react-tabs/components-api/#tab)
  */
-const Tab = React.forwardRef(function Tab(
-  props: TabProps,
+const Tab = React.forwardRef(function Tab<RootComponentType extends React.ElementType>(
+  props: TabProps<RootComponentType>,
   forwardedRef: React.ForwardedRef<Element>,
 ) {
   const {
@@ -54,7 +54,7 @@ const Tab = React.forwardRef(function Tab(
     rootRef: handleRef,
   });
 
-  const ownerState = {
+  const ownerState: TabOwnerState = {
     ...props,
     active,
     disabled,
diff --git a/packages/mui-base/src/Tab/Tab.types.ts b/packages/mui-base/src/Tab/Tab.types.ts
index 314bbe16fa247e..226e7ef6b0d898 100644
--- a/packages/mui-base/src/Tab/Tab.types.ts
+++ b/packages/mui-base/src/Tab/Tab.types.ts
@@ -38,24 +38,27 @@ export interface TabSlots {
   root?: React.ElementType;
 }
 
-export type TabProps<
-  D extends React.ElementType = TabTypeMap['defaultComponent'],
-  P = {},
-> = OverrideProps<TabTypeMap<P, D>, D> & {
-  component?: D;
-};
+export type TabProps<RootComponentType extends React.ElementType = TabTypeMap['defaultComponent']> =
+  OverrideProps<TabTypeMap<{}, RootComponentType>, RootComponentType> & {
+    component?: RootComponentType;
+  };
 
-export interface TabTypeMap<P = {}, D extends React.ElementType = 'button'> {
-  props: P & TabOwnProps;
-  defaultComponent: D;
+export interface TabTypeMap<
+  AdditionalProps = {},
+  RootComponentType extends React.ElementType = 'button',
+> {
+  props: TabOwnProps & AdditionalProps;
+  defaultComponent: RootComponentType;
 }
 
-export type TabOwnerState = TabProps & {
-  active: boolean;
-  disabled: boolean;
-  highlighted: boolean;
-  selected: boolean;
-};
+export type TabOwnerState = Simplify<
+  TabOwnProps & {
+    active: boolean;
+    disabled: boolean;
+    highlighted: boolean;
+    selected: boolean;
+  }
+>;
 
 export type TabRootSlotProps = Simplify<
   UseTabRootSlotProps & {
diff --git a/packages/mui-base/src/TabPanel/TabPanel.tsx b/packages/mui-base/src/TabPanel/TabPanel.tsx
index cbc733095960a8..594081404bbf1f 100644
--- a/packages/mui-base/src/TabPanel/TabPanel.tsx
+++ b/packages/mui-base/src/TabPanel/TabPanel.tsx
@@ -5,7 +5,12 @@ import { useSlotProps, WithOptionalOwnerState } from '../utils';
 import composeClasses from '../composeClasses';
 import { getTabPanelUtilityClass } from './tabPanelClasses';
 import useTabPanel from '../useTabPanel/useTabPanel';
-import { TabPanelProps, TabPanelRootSlotProps, TabPanelTypeMap } from './TabPanel.types';
+import {
+  TabPanelOwnerState,
+  TabPanelProps,
+  TabPanelRootSlotProps,
+  TabPanelTypeMap,
+} from './TabPanel.types';
 import { useClassNamesOverride } from '../utils/ClassNameConfigurator';
 
 const useUtilityClasses = (ownerState: { hidden: boolean }) => {
@@ -27,15 +32,15 @@ const useUtilityClasses = (ownerState: { hidden: boolean }) => {
  *
  * - [TabPanel API](https://mui.com/base/react-tabs/components-api/#tab-panel)
  */
-const TabPanel = React.forwardRef(function TabPanel(
-  props: TabPanelProps,
+const TabPanel = React.forwardRef(function TabPanel<RootComponentType extends React.ElementType>(
+  props: TabPanelProps<RootComponentType>,
   forwardedRef: React.ForwardedRef<Element>,
 ) {
   const { children, component, value, slotProps = {}, slots = {}, ...other } = props;
 
   const { hidden, getRootProps } = useTabPanel(props);
 
-  const ownerState = {
+  const ownerState: TabPanelOwnerState = {
     ...props,
     hidden,
   };
diff --git a/packages/mui-base/src/TabPanel/TabPanel.types.ts b/packages/mui-base/src/TabPanel/TabPanel.types.ts
index 371d006cc6ac9a..6aeb60db779310 100644
--- a/packages/mui-base/src/TabPanel/TabPanel.types.ts
+++ b/packages/mui-base/src/TabPanel/TabPanel.types.ts
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { OverrideProps } from '@mui/types';
+import { OverrideProps, Simplify } from '@mui/types';
 import { UseTabPanelRootSlotProps } from '../useTabPanel';
 import { SlotComponentProps } from '../utils';
 
@@ -40,21 +40,25 @@ export interface TabPanelSlots {
   root?: React.ElementType;
 }
 
-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;
+  RootComponentType extends React.ElementType = TabPanelTypeMap['defaultComponent'],
+> = OverrideProps<TabPanelTypeMap<{}, RootComponentType>, RootComponentType> & {
+  component?: RootComponentType;
 };
 
-export type TabPanelOwnerState = TabPanelProps & {
-  hidden: boolean;
-};
+export type TabPanelOwnerState = Simplify<
+  TabPanelOwnProps & {
+    hidden: boolean;
+  }
+>;
 
 export type TabPanelRootSlotProps = UseTabPanelRootSlotProps & {
   children?: React.ReactNode;
diff --git a/packages/mui-base/src/TablePagination/TablePagination.tsx b/packages/mui-base/src/TablePagination/TablePagination.tsx
index 309fb5e4697ce8..a233ebb085f289 100644
--- a/packages/mui-base/src/TablePagination/TablePagination.tsx
+++ b/packages/mui-base/src/TablePagination/TablePagination.tsx
@@ -59,10 +59,9 @@ const useUtilityClasses = () => {
  *
  * - [TablePagination API](https://mui.com/base/react-table-pagination/components-api/#table-pagination)
  */
-const TablePagination = React.forwardRef(function TablePagination(
-  props: TablePaginationProps,
-  forwardedRef: React.ForwardedRef<Element>,
-) {
+const TablePagination = React.forwardRef(function TablePagination<
+  RootComponentType extends React.ElementType,
+>(props: TablePaginationProps<RootComponentType>, forwardedRef: React.ForwardedRef<Element>) {
   const {
     component,
     colSpan: colSpanProp,
diff --git a/packages/mui-base/src/TablePagination/TablePagination.types.ts b/packages/mui-base/src/TablePagination/TablePagination.types.ts
index dae470f0e51ec7..537c185a560bda 100644
--- a/packages/mui-base/src/TablePagination/TablePagination.types.ts
+++ b/packages/mui-base/src/TablePagination/TablePagination.types.ts
@@ -195,19 +195,21 @@ export interface TablePaginationSlots {
   spacer?: React.ElementType;
 }
 
-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;
+  RootComponentType extends React.ElementType = TablePaginationTypeMap['defaultComponent'],
+> = OverrideProps<TablePaginationTypeMap<{}, RootComponentType>, RootComponentType> & {
+  component?: RootComponentType;
 };
 
-export type TablePaginationOwnerState = TablePaginationProps;
+export type TablePaginationOwnerState = TablePaginationOwnProps;
 
 export type TablePaginationRootSlotProps = {
   children?: React.ReactNode;
diff --git a/packages/mui-base/src/TablePagination/TablePaginationActions.tsx b/packages/mui-base/src/TablePagination/TablePaginationActions.tsx
index f800430948d369..de43160147baee 100644
--- a/packages/mui-base/src/TablePagination/TablePaginationActions.tsx
+++ b/packages/mui-base/src/TablePagination/TablePaginationActions.tsx
@@ -29,8 +29,10 @@ function defaultGetAriaLabel(type: ItemAriaLabelType) {
 /**
  * @ignore - internal component.
  */
-const TablePaginationActions = React.forwardRef(function TablePaginationActions(
-  props: TablePaginationActionsProps,
+const TablePaginationActions = React.forwardRef(function TablePaginationActions<
+  RootComponentType extends React.ElementType,
+>(
+  props: TablePaginationActionsProps<RootComponentType>,
   forwardedRef: React.ForwardedRef<Element>,
 ) {
   const {
diff --git a/packages/mui-base/src/TablePagination/TablePaginationActions.types.ts b/packages/mui-base/src/TablePagination/TablePaginationActions.types.ts
index 90536b9f395005..2297c8112bfbaf 100644
--- a/packages/mui-base/src/TablePagination/TablePaginationActions.types.ts
+++ b/packages/mui-base/src/TablePagination/TablePaginationActions.types.ts
@@ -117,18 +117,20 @@ export interface TablePaginationActionsSlots {
 }
 
 export type TablePaginationActionsProps<
-  D extends React.ElementType = TablePaginationActionsTypeMap['defaultComponent'],
-  P = {},
-> = OverrideProps<TablePaginationActionsTypeMap<P, D>, D> & {
-  component?: D;
+  RootComponentType extends React.ElementType = TablePaginationActionsTypeMap['defaultComponent'],
+> = OverrideProps<TablePaginationActionsTypeMap<{}, RootComponentType>, RootComponentType> & {
+  component?: RootComponentType;
 };
 
-export interface TablePaginationActionsTypeMap<P = {}, D extends React.ElementType = 'button'> {
-  props: P & TablePaginationActionsOwnProps;
-  defaultComponent: D;
+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 = {
   children?: React.ReactNode;
diff --git a/packages/mui-base/src/Tabs/Tabs.tsx b/packages/mui-base/src/Tabs/Tabs.tsx
index 59019c1e6f4d7e..ac9ae86635c95f 100644
--- a/packages/mui-base/src/Tabs/Tabs.tsx
+++ b/packages/mui-base/src/Tabs/Tabs.tsx
@@ -4,7 +4,7 @@ import { OverridableComponent } from '@mui/types';
 import { useSlotProps, WithOptionalOwnerState } from '../utils';
 import composeClasses from '../composeClasses';
 import { getTabsUtilityClass } from './tabsClasses';
-import { TabsProps, TabsRootSlotProps, TabsTypeMap } from './Tabs.types';
+import { TabsOwnerState, TabsProps, TabsRootSlotProps, TabsTypeMap } from './Tabs.types';
 import useTabs from '../useTabs';
 import TabsProvider from '../useTabs/TabsProvider';
 import { useClassNamesOverride } from '../utils/ClassNameConfigurator';
@@ -29,8 +29,8 @@ const useUtilityClasses = (ownerState: { orientation: 'horizontal' | 'vertical'
  *
  * - [Tabs API](https://mui.com/base/react-tabs/components-api/#tabs)
  */
-const Tabs = React.forwardRef(function Tabs(
-  props: TabsProps,
+const Tabs = React.forwardRef(function Tabs<RootComponentType extends React.ElementType>(
+  props: TabsProps<RootComponentType>,
   forwardedRef: React.ForwardedRef<Element>,
 ) {
   const {
@@ -49,7 +49,7 @@ const Tabs = React.forwardRef(function Tabs(
 
   const { contextValue } = useTabs(props);
 
-  const ownerState = {
+  const ownerState: TabsOwnerState = {
     ...props,
     orientation,
     direction,
diff --git a/packages/mui-base/src/Tabs/Tabs.types.ts b/packages/mui-base/src/Tabs/Tabs.types.ts
index 1abd353b5d4a78..56cea3e0b3e7ec 100644
--- a/packages/mui-base/src/Tabs/Tabs.types.ts
+++ b/packages/mui-base/src/Tabs/Tabs.types.ts
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { OverrideProps } from '@mui/types';
+import { OverrideProps, Simplify } from '@mui/types';
 import { SlotComponentProps } from '../utils';
 
 export interface TabsRootSlotPropsOverrides {}
@@ -65,22 +65,26 @@ export interface TabsSlots {
   root?: React.ElementType;
 }
 
-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;
+  RootComponentType extends React.ElementType = TabsTypeMap['defaultComponent'],
+> = OverrideProps<TabsTypeMap<{}, RootComponentType>, RootComponentType> & {
+  component?: RootComponentType;
 };
 
-export type TabsOwnerState = TabsProps & {
-  orientation: TabsOrientation;
-  direction: TabsDirection;
-};
+export type TabsOwnerState = Simplify<
+  TabsOwnProps & {
+    orientation: TabsOrientation;
+    direction: TabsDirection;
+  }
+>;
 
 export type TabsRootSlotProps = {
   ownerState: TabsOwnerState;
diff --git a/packages/mui-base/src/TabsList/TabsList.tsx b/packages/mui-base/src/TabsList/TabsList.tsx
index f0b88f0d618fab..b49e0b7eb63d41 100644
--- a/packages/mui-base/src/TabsList/TabsList.tsx
+++ b/packages/mui-base/src/TabsList/TabsList.tsx
@@ -4,7 +4,12 @@ import { OverridableComponent } from '@mui/types';
 import composeClasses from '../composeClasses';
 import { useSlotProps, WithOptionalOwnerState } from '../utils';
 import { getTabsListUtilityClass } from './tabsListClasses';
-import { TabsListProps, TabsListRootSlotProps, TabsListTypeMap } from './TabsList.types';
+import {
+  TabsListOwnerState,
+  TabsListProps,
+  TabsListRootSlotProps,
+  TabsListTypeMap,
+} from './TabsList.types';
 import useTabsList from '../useTabsList';
 import { useClassNamesOverride } from '../utils/ClassNameConfigurator';
 import TabsListProvider from '../useTabsList/TabsListProvider';
@@ -29,8 +34,8 @@ const useUtilityClasses = (ownerState: { orientation: 'horizontal' | 'vertical'
  *
  * - [TabsList API](https://mui.com/base/react-tabs/components-api/#tabs-list)
  */
-const TabsList = React.forwardRef(function TabsList(
-  props: TabsListProps,
+const TabsList = React.forwardRef(function TabsList<RootComponentType extends React.ElementType>(
+  props: TabsListProps<RootComponentType>,
   forwardedRef: React.ForwardedRef<Element>,
 ) {
   const { children, component, slotProps = {}, slots = {}, ...other } = props;
@@ -39,7 +44,7 @@ const TabsList = React.forwardRef(function TabsList(
     rootRef: forwardedRef,
   });
 
-  const ownerState = {
+  const ownerState: TabsListOwnerState = {
     ...props,
     isRtl,
     orientation,
diff --git a/packages/mui-base/src/TabsList/TabsList.types.ts b/packages/mui-base/src/TabsList/TabsList.types.ts
index 5abbe181d4cd9c..8b1e4a4475b67b 100644
--- a/packages/mui-base/src/TabsList/TabsList.types.ts
+++ b/packages/mui-base/src/TabsList/TabsList.types.ts
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { OverrideProps } from '@mui/types';
+import { OverrideProps, Simplify } from '@mui/types';
 import { UseTabsListRootSlotProps } from '../useTabsList';
 import { SlotComponentProps } from '../utils';
 
@@ -34,22 +34,26 @@ export interface TabsListSlots {
   root?: React.ElementType;
 }
 
-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;
+  RootComponentType extends React.ElementType = TabsListTypeMap['defaultComponent'],
+> = OverrideProps<TabsListTypeMap<{}, RootComponentType>, RootComponentType> & {
+  component?: RootComponentType;
 };
 
-export type TabsListOwnerState = TabsListProps & {
-  isRtl: boolean;
-  orientation: 'horizontal' | 'vertical';
-};
+export type TabsListOwnerState = Simplify<
+  TabsListOwnProps & {
+    isRtl: boolean;
+    orientation: 'horizontal' | 'vertical';
+  }
+>;
 
 export type TabsListRootSlotProps = UseTabsListRootSlotProps & {
   className?: string;