diff --git a/docs/data/base/components/menu/MenuSimple.js b/docs/data/base/components/menu/MenuSimple.js
index e30162faa5bac8..12a46816737323 100644
--- a/docs/data/base/components/menu/MenuSimple.js
+++ b/docs/data/base/components/menu/MenuSimple.js
@@ -5,14 +5,19 @@ import MenuItemUnstyled, {
 } from '@mui/base/MenuItemUnstyled';
 import PopperUnstyled from '@mui/base/PopperUnstyled';
 import { styled } from '@mui/system';
+import { ListActionTypes } from '@mui/base/useList';
 
 export default function UnstyledMenuSimple() {
-  const [anchorEl, setAnchorEl] = React.useState(null);
-  const isOpen = Boolean(anchorEl);
-  const buttonRef = React.useRef(null);
+  const [buttonElement, setButtonElement] = React.useState(null);
+
+  const [isOpen, setOpen] = React.useState(false);
   const menuActions = React.useRef(null);
   const preventReopen = React.useRef(false);
 
+  const updateAnchor = React.useCallback((node) => {
+    setButtonElement(node);
+  }, []);
+
   const handleButtonClick = (event) => {
     if (preventReopen.current) {
       event.preventDefault();
@@ -20,11 +25,7 @@ export default function UnstyledMenuSimple() {
       return;
     }
 
-    if (isOpen) {
-      setAnchorEl(null);
-    } else {
-      setAnchorEl(event.currentTarget);
-    }
+    setOpen((open) => !open);
   };
 
   const handleButtonMouseDown = () => {
@@ -38,22 +39,23 @@ export default function UnstyledMenuSimple() {
   const handleButtonKeyDown = (event) => {
     if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {
       event.preventDefault();
-      setAnchorEl(event.currentTarget);
+      setOpen(true);
       if (event.key === 'ArrowUp') {
-        menuActions.current?.highlightLastItem();
+        // Focus the last item when pressing ArrowUp.
+        menuActions.current?.dispatch({
+          type: ListActionTypes.keyDown,
+          key: event.key,
+          event,
+        });
       }
     }
   };
 
-  const close = () => {
-    setAnchorEl(null);
-    buttonRef.current.focus();
-  };
-
   const createHandleMenuClick = (menuItem) => {
     return () => {
       console.log(`Clicked on ${menuItem}`);
-      close();
+      setOpen(false);
+      buttonElement?.focus();
     };
   };
 
@@ -64,7 +66,7 @@ export default function UnstyledMenuSimple() {
         onClick={handleButtonClick}
         onKeyDown={handleButtonKeyDown}
         onMouseDown={handleButtonMouseDown}
-        ref={buttonRef}
+        ref={updateAnchor}
         aria-controls={isOpen ? 'simple-menu' : undefined}
         aria-expanded={isOpen || undefined}
         aria-haspopup="menu"
@@ -75,8 +77,10 @@ export default function UnstyledMenuSimple() {
       <MenuUnstyled
         actions={menuActions}
         open={isOpen}
-        onClose={close}
-        anchorEl={anchorEl}
+        onOpenChange={(open) => {
+          setOpen(open);
+        }}
+        anchorEl={buttonElement}
         slots={{ root: Popper, listbox: StyledListbox }}
         slotProps={{ listbox: { id: 'simple-menu' } }}
       >
diff --git a/docs/data/base/components/menu/MenuSimple.tsx b/docs/data/base/components/menu/MenuSimple.tsx
index 7a789d99f19566..dacfe9d167edab 100644
--- a/docs/data/base/components/menu/MenuSimple.tsx
+++ b/docs/data/base/components/menu/MenuSimple.tsx
@@ -5,14 +5,20 @@ import MenuItemUnstyled, {
 } from '@mui/base/MenuItemUnstyled';
 import PopperUnstyled from '@mui/base/PopperUnstyled';
 import { styled } from '@mui/system';
+import { ListActionTypes } from '@mui/base/useList';
 
 export default function UnstyledMenuSimple() {
-  const [anchorEl, setAnchorEl] = React.useState<HTMLButtonElement | null>(null);
-  const isOpen = Boolean(anchorEl);
-  const buttonRef = React.useRef<HTMLButtonElement>(null);
+  const [buttonElement, setButtonElement] = React.useState<HTMLButtonElement | null>(
+    null,
+  );
+  const [isOpen, setOpen] = React.useState(false);
   const menuActions = React.useRef<MenuUnstyledActions>(null);
   const preventReopen = React.useRef(false);
 
+  const updateAnchor = React.useCallback((node: HTMLButtonElement | null) => {
+    setButtonElement(node);
+  }, []);
+
   const handleButtonClick = (event: React.MouseEvent<HTMLButtonElement>) => {
     if (preventReopen.current) {
       event.preventDefault();
@@ -20,11 +26,7 @@ export default function UnstyledMenuSimple() {
       return;
     }
 
-    if (isOpen) {
-      setAnchorEl(null);
-    } else {
-      setAnchorEl(event.currentTarget);
-    }
+    setOpen((open) => !open);
   };
 
   const handleButtonMouseDown = () => {
@@ -38,22 +40,23 @@ export default function UnstyledMenuSimple() {
   const handleButtonKeyDown = (event: React.KeyboardEvent<HTMLButtonElement>) => {
     if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {
       event.preventDefault();
-      setAnchorEl(event.currentTarget);
+      setOpen(true);
       if (event.key === 'ArrowUp') {
-        menuActions.current?.highlightLastItem();
+        // Focus the last item when pressing ArrowUp.
+        menuActions.current?.dispatch({
+          type: ListActionTypes.keyDown,
+          key: event.key,
+          event,
+        });
       }
     }
   };
 
-  const close = () => {
-    setAnchorEl(null);
-    buttonRef.current!.focus();
-  };
-
   const createHandleMenuClick = (menuItem: string) => {
     return () => {
       console.log(`Clicked on ${menuItem}`);
-      close();
+      setOpen(false);
+      buttonElement?.focus();
     };
   };
 
@@ -64,7 +67,7 @@ export default function UnstyledMenuSimple() {
         onClick={handleButtonClick}
         onKeyDown={handleButtonKeyDown}
         onMouseDown={handleButtonMouseDown}
-        ref={buttonRef}
+        ref={updateAnchor}
         aria-controls={isOpen ? 'simple-menu' : undefined}
         aria-expanded={isOpen || undefined}
         aria-haspopup="menu"
@@ -75,8 +78,10 @@ export default function UnstyledMenuSimple() {
       <MenuUnstyled
         actions={menuActions}
         open={isOpen}
-        onClose={close}
-        anchorEl={anchorEl}
+        onOpenChange={(open) => {
+          setOpen(open);
+        }}
+        anchorEl={buttonElement}
         slots={{ root: Popper, listbox: StyledListbox }}
         slotProps={{ listbox: { id: 'simple-menu' } }}
       >
diff --git a/docs/data/base/components/menu/UnstyledMenuIntroduction.js b/docs/data/base/components/menu/UnstyledMenuIntroduction.js
index 043292c0d81257..16c791f7fe572b 100644
--- a/docs/data/base/components/menu/UnstyledMenuIntroduction.js
+++ b/docs/data/base/components/menu/UnstyledMenuIntroduction.js
@@ -5,50 +5,67 @@ import MenuItemUnstyled, {
 } from '@mui/base/MenuItemUnstyled';
 import PopperUnstyled from '@mui/base/PopperUnstyled';
 import { styled } from '@mui/system';
+import { ListActionTypes } from '@mui/base/useList';
 
 export default function UnstyledMenuIntroduction() {
-  const [anchorEl, setAnchorEl] = React.useState(null);
-  const isOpen = Boolean(anchorEl);
-  const buttonRef = React.useRef(null);
+  const [buttonElement, setButtonElement] = React.useState(null);
+
+  const [isOpen, setOpen] = React.useState(false);
   const menuActions = React.useRef(null);
+  const preventReopen = React.useRef(false);
+
+  const updateAnchor = React.useCallback((node) => {
+    setButtonElement(node);
+  }, []);
 
   const handleButtonClick = (event) => {
+    if (preventReopen.current) {
+      event.preventDefault();
+      preventReopen.current = false;
+      return;
+    }
+
+    setOpen((open) => !open);
+  };
+
+  const handleButtonMouseDown = () => {
     if (isOpen) {
-      setAnchorEl(null);
-    } else {
-      setAnchorEl(event.currentTarget);
+      // Prevents the menu from reopening right after closing
+      // when clicking the button.
+      preventReopen.current = true;
     }
   };
 
   const handleButtonKeyDown = (event) => {
     if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {
       event.preventDefault();
-      setAnchorEl(event.currentTarget);
+      setOpen(true);
       if (event.key === 'ArrowUp') {
-        menuActions.current?.highlightLastItem();
+        // Focus the last item when pressing ArrowUp.
+        menuActions.current?.dispatch({
+          type: ListActionTypes.keyDown,
+          key: event.key,
+          event,
+        });
       }
     }
   };
 
-  const close = () => {
-    setAnchorEl(null);
-    buttonRef.current.focus();
-  };
-
   const createHandleMenuClick = (menuItem) => {
     return () => {
       console.log(`Clicked on ${menuItem}`);
-      close();
+      setOpen(false);
+      buttonElement?.focus();
     };
   };
-
   return (
     <div>
       <TriggerButton
         type="button"
         onClick={handleButtonClick}
         onKeyDown={handleButtonKeyDown}
-        ref={buttonRef}
+        onMouseDown={handleButtonMouseDown}
+        ref={updateAnchor}
         aria-controls={isOpen ? 'simple-menu' : undefined}
         aria-expanded={isOpen || undefined}
         aria-haspopup="menu"
@@ -58,8 +75,10 @@ export default function UnstyledMenuIntroduction() {
       <MenuUnstyled
         actions={menuActions}
         open={isOpen}
-        onClose={close}
-        anchorEl={anchorEl}
+        onOpenChange={(open) => {
+          setOpen(open);
+        }}
+        anchorEl={buttonElement}
         slots={{ root: Popper, listbox: StyledListbox }}
         slotProps={{ listbox: { id: 'simple-menu' } }}
       >
diff --git a/docs/data/base/components/menu/UnstyledMenuIntroduction.tsx b/docs/data/base/components/menu/UnstyledMenuIntroduction.tsx
index 2549b14717ab1a..0304bbc43969f5 100644
--- a/docs/data/base/components/menu/UnstyledMenuIntroduction.tsx
+++ b/docs/data/base/components/menu/UnstyledMenuIntroduction.tsx
@@ -5,50 +5,68 @@ import MenuItemUnstyled, {
 } from '@mui/base/MenuItemUnstyled';
 import PopperUnstyled from '@mui/base/PopperUnstyled';
 import { styled } from '@mui/system';
+import { ListActionTypes } from '@mui/base/useList';
 
 export default function UnstyledMenuIntroduction() {
-  const [anchorEl, setAnchorEl] = React.useState<HTMLButtonElement | null>(null);
-  const isOpen = Boolean(anchorEl);
-  const buttonRef = React.useRef<HTMLButtonElement>(null);
+  const [buttonElement, setButtonElement] = React.useState<HTMLButtonElement | null>(
+    null,
+  );
+  const [isOpen, setOpen] = React.useState(false);
   const menuActions = React.useRef<MenuUnstyledActions>(null);
+  const preventReopen = React.useRef(false);
+
+  const updateAnchor = React.useCallback((node: HTMLButtonElement | null) => {
+    setButtonElement(node);
+  }, []);
 
   const handleButtonClick = (event: React.MouseEvent<HTMLButtonElement>) => {
+    if (preventReopen.current) {
+      event.preventDefault();
+      preventReopen.current = false;
+      return;
+    }
+
+    setOpen((open) => !open);
+  };
+
+  const handleButtonMouseDown = () => {
     if (isOpen) {
-      setAnchorEl(null);
-    } else {
-      setAnchorEl(event.currentTarget);
+      // Prevents the menu from reopening right after closing
+      // when clicking the button.
+      preventReopen.current = true;
     }
   };
 
   const handleButtonKeyDown = (event: React.KeyboardEvent<HTMLButtonElement>) => {
     if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {
       event.preventDefault();
-      setAnchorEl(event.currentTarget);
+      setOpen(true);
       if (event.key === 'ArrowUp') {
-        menuActions.current?.highlightLastItem();
+        // Focus the last item when pressing ArrowUp.
+        menuActions.current?.dispatch({
+          type: ListActionTypes.keyDown,
+          key: event.key,
+          event,
+        });
       }
     }
   };
 
-  const close = () => {
-    setAnchorEl(null);
-    buttonRef.current!.focus();
-  };
-
   const createHandleMenuClick = (menuItem: string) => {
     return () => {
       console.log(`Clicked on ${menuItem}`);
-      close();
+      setOpen(false);
+      buttonElement?.focus();
     };
   };
-
   return (
     <div>
       <TriggerButton
         type="button"
         onClick={handleButtonClick}
         onKeyDown={handleButtonKeyDown}
-        ref={buttonRef}
+        onMouseDown={handleButtonMouseDown}
+        ref={updateAnchor}
         aria-controls={isOpen ? 'simple-menu' : undefined}
         aria-expanded={isOpen || undefined}
         aria-haspopup="menu"
@@ -58,8 +76,10 @@ export default function UnstyledMenuIntroduction() {
       <MenuUnstyled
         actions={menuActions}
         open={isOpen}
-        onClose={close}
-        anchorEl={anchorEl}
+        onOpenChange={(open) => {
+          setOpen(open);
+        }}
+        anchorEl={buttonElement}
         slots={{ root: Popper, listbox: StyledListbox }}
         slotProps={{ listbox: { id: 'simple-menu' } }}
       >
diff --git a/docs/data/base/components/menu/UseMenu.js b/docs/data/base/components/menu/UseMenu.js
index 7ff446f26e3467..32263958a0195a 100644
--- a/docs/data/base/components/menu/UseMenu.js
+++ b/docs/data/base/components/menu/UseMenu.js
@@ -1,46 +1,35 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { MenuUnstyledContext } from '@mui/base/MenuUnstyled';
-import useMenu from '@mui/base/useMenu';
+import clsx from 'clsx';
+import useMenu, { MenuProvider } from '@mui/base/useMenu';
 import useMenuItem from '@mui/base/useMenuItem';
 import PopperUnstyled from '@mui/base/PopperUnstyled';
 import { GlobalStyles } from '@mui/system';
-import clsx from 'clsx';
 
 const Menu = React.forwardRef(function Menu(props, ref) {
-  const { children, onClose, open, ...other } = props;
+  const { children, onOpenChange, open, ...other } = props;
 
   const { contextValue, getListboxProps } = useMenu({
     listboxRef: ref,
-    onClose,
+    onOpenChange,
     open,
   });
 
-  const menuContextValue = React.useMemo(
-    () => ({
-      ...contextValue,
-      open: true,
-    }),
-    [contextValue],
-  );
-
   return (
     <ul className="menu-root" {...other} {...getListboxProps()}>
-      <MenuUnstyledContext.Provider value={menuContextValue}>
-        {children}
-      </MenuUnstyledContext.Provider>
+      <MenuProvider value={contextValue}>{children}</MenuProvider>
     </ul>
   );
 });
 
 Menu.propTypes = {
   children: PropTypes.node,
-  onClose: PropTypes.func.isRequired,
+  onOpenChange: PropTypes.func.isRequired,
   open: PropTypes.bool.isRequired,
 };
 
 const MenuItem = React.forwardRef(function MenuItem(props, ref) {
-  const { children, ...other } = props;
+  const { children, onClick, ...other } = props;
 
   const { getRootProps, disabled, focusVisible } = useMenuItem({ ref });
 
@@ -51,7 +40,11 @@ const MenuItem = React.forwardRef(function MenuItem(props, ref) {
   };
 
   return (
-    <li className={clsx(classes)} {...other} {...getRootProps()}>
+    <li
+      className={clsx(classes)}
+      {...other}
+      {...getRootProps({ onClick: onClick ?? (() => {}) })}
+    >
       {children}
     </li>
   );
@@ -59,12 +52,18 @@ const MenuItem = React.forwardRef(function MenuItem(props, ref) {
 
 MenuItem.propTypes = {
   children: PropTypes.node,
+  onClick: PropTypes.func,
 };
 
 export default function UseMenu() {
-  const [anchorEl, setAnchorEl] = React.useState(null);
+  const [buttonElement, setButtonElement] = React.useState(null);
+
+  const [isOpen, setOpen] = React.useState(false);
   const preventReopen = React.useRef(false);
-  const buttonRef = React.useRef(null);
+
+  const updateAnchor = React.useCallback((node) => {
+    setButtonElement(node);
+  }, []);
 
   const handleOnClick = (event) => {
     if (preventReopen.current) {
@@ -73,24 +72,32 @@ export default function UseMenu() {
       return;
     }
 
-    setAnchorEl(anchorEl ? null : event.currentTarget);
-  };
-
-  const handleOnClose = () => {
-    setAnchorEl(null);
-    buttonRef.current.focus();
+    setOpen((open) => !open);
   };
 
-  const open = Boolean(anchorEl);
-
   const handleButtonMouseDown = () => {
-    if (open) {
+    if (isOpen) {
       // Prevents the menu from reopening right after closing
       // when clicking the button.
       preventReopen.current = true;
     }
   };
 
+  const handleButtonKeyDown = (event) => {
+    if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {
+      event.preventDefault();
+      setOpen(true);
+    }
+  };
+
+  const createHandleMenuClick = (menuItem) => {
+    return () => {
+      console.log(`Clicked on ${menuItem}`);
+      setOpen(false);
+      buttonElement?.focus();
+    };
+  };
+
   return (
     <React.Fragment>
       <GlobalStyles styles={styles} />
@@ -99,15 +106,25 @@ export default function UseMenu() {
         className="button"
         onClick={handleOnClick}
         onMouseDown={handleButtonMouseDown}
-        ref={buttonRef}
+        onKeyDown={handleButtonKeyDown}
+        ref={updateAnchor}
+        aria-controls="hooks-menu"
+        aria-expanded={isOpen || undefined}
+        aria-haspopup="menu"
       >
         Commands
       </button>
-      <PopperUnstyled open={open} anchorEl={anchorEl}>
-        <Menu onClose={handleOnClose} open={open}>
-          <MenuItem>Cut</MenuItem>
-          <MenuItem>Copy</MenuItem>
-          <MenuItem>Paste</MenuItem>
+      <PopperUnstyled open={isOpen} anchorEl={buttonElement}>
+        <Menu
+          onOpenChange={(open) => {
+            setOpen(open);
+          }}
+          open={isOpen}
+          id="hooks-menu"
+        >
+          <MenuItem onClick={createHandleMenuClick('Cut')}>Cut</MenuItem>
+          <MenuItem onClick={createHandleMenuClick('Copy')}>Copy</MenuItem>
+          <MenuItem onClick={createHandleMenuClick('Paste')}>Paste</MenuItem>
         </Menu>
       </PopperUnstyled>
     </React.Fragment>
diff --git a/docs/data/base/components/menu/UseMenu.tsx b/docs/data/base/components/menu/UseMenu.tsx
index 4c3a1b3bbed2c5..cb72abf94df1ff 100644
--- a/docs/data/base/components/menu/UseMenu.tsx
+++ b/docs/data/base/components/menu/UseMenu.tsx
@@ -1,42 +1,28 @@
 import * as React from 'react';
-import {
-  MenuUnstyledContext,
-  MenuUnstyledContextType,
-} from '@mui/base/MenuUnstyled';
-import useMenu from '@mui/base/useMenu';
+import clsx from 'clsx';
+import useMenu, { MenuProvider } from '@mui/base/useMenu';
 import useMenuItem from '@mui/base/useMenuItem';
 import PopperUnstyled from '@mui/base/PopperUnstyled';
 import { GlobalStyles } from '@mui/system';
-import clsx from 'clsx';
 
 const Menu = React.forwardRef(function Menu(
   props: React.ComponentPropsWithoutRef<'ul'> & {
-    onClose: () => void;
+    onOpenChange: (isOpen: boolean) => void;
     open: boolean;
   },
   ref: React.Ref<HTMLUListElement>,
 ) {
-  const { children, onClose, open, ...other } = props;
+  const { children, onOpenChange, open, ...other } = props;
 
   const { contextValue, getListboxProps } = useMenu({
     listboxRef: ref,
-    onClose,
+    onOpenChange,
     open,
   });
 
-  const menuContextValue: MenuUnstyledContextType = React.useMemo(
-    () => ({
-      ...contextValue,
-      open: true,
-    }),
-    [contextValue],
-  );
-
   return (
     <ul className="menu-root" {...other} {...getListboxProps()}>
-      <MenuUnstyledContext.Provider value={menuContextValue}>
-        {children}
-      </MenuUnstyledContext.Provider>
+      <MenuProvider value={contextValue}>{children}</MenuProvider>
     </ul>
   );
 });
@@ -45,7 +31,7 @@ const MenuItem = React.forwardRef(function MenuItem(
   props: React.ComponentPropsWithoutRef<'li'>,
   ref: React.Ref<any>,
 ) {
-  const { children, ...other } = props;
+  const { children, onClick, ...other } = props;
 
   const { getRootProps, disabled, focusVisible } = useMenuItem({ ref });
 
@@ -56,16 +42,26 @@ const MenuItem = React.forwardRef(function MenuItem(
   };
 
   return (
-    <li className={clsx(classes)} {...other} {...getRootProps()}>
+    <li
+      className={clsx(classes)}
+      {...other}
+      {...getRootProps({ onClick: onClick ?? (() => {}) })}
+    >
       {children}
     </li>
   );
 });
 
 export default function UseMenu() {
-  const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
+  const [buttonElement, setButtonElement] = React.useState<HTMLButtonElement | null>(
+    null,
+  );
+  const [isOpen, setOpen] = React.useState(false);
   const preventReopen = React.useRef(false);
-  const buttonRef = React.useRef<HTMLButtonElement>(null);
+
+  const updateAnchor = React.useCallback((node: HTMLButtonElement | null) => {
+    setButtonElement(node);
+  }, []);
 
   const handleOnClick = (event: React.MouseEvent<HTMLElement>) => {
     if (preventReopen.current) {
@@ -74,24 +70,32 @@ export default function UseMenu() {
       return;
     }
 
-    setAnchorEl(anchorEl ? null : event.currentTarget);
-  };
-
-  const handleOnClose = () => {
-    setAnchorEl(null);
-    buttonRef.current!.focus();
+    setOpen((open) => !open);
   };
 
-  const open = Boolean(anchorEl);
-
   const handleButtonMouseDown = () => {
-    if (open) {
+    if (isOpen) {
       // Prevents the menu from reopening right after closing
       // when clicking the button.
       preventReopen.current = true;
     }
   };
 
+  const handleButtonKeyDown = (event: React.KeyboardEvent<HTMLButtonElement>) => {
+    if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {
+      event.preventDefault();
+      setOpen(true);
+    }
+  };
+
+  const createHandleMenuClick = (menuItem: string) => {
+    return () => {
+      console.log(`Clicked on ${menuItem}`);
+      setOpen(false);
+      buttonElement?.focus();
+    };
+  };
+
   return (
     <React.Fragment>
       <GlobalStyles styles={styles} />
@@ -100,15 +104,25 @@ export default function UseMenu() {
         className="button"
         onClick={handleOnClick}
         onMouseDown={handleButtonMouseDown}
-        ref={buttonRef}
+        onKeyDown={handleButtonKeyDown}
+        ref={updateAnchor}
+        aria-controls="hooks-menu"
+        aria-expanded={isOpen || undefined}
+        aria-haspopup="menu"
       >
         Commands
       </button>
-      <PopperUnstyled open={open} anchorEl={anchorEl}>
-        <Menu onClose={handleOnClose} open={open}>
-          <MenuItem>Cut</MenuItem>
-          <MenuItem>Copy</MenuItem>
-          <MenuItem>Paste</MenuItem>
+      <PopperUnstyled open={isOpen} anchorEl={buttonElement}>
+        <Menu
+          onOpenChange={(open) => {
+            setOpen(open);
+          }}
+          open={isOpen}
+          id="hooks-menu"
+        >
+          <MenuItem onClick={createHandleMenuClick('Cut')}>Cut</MenuItem>
+          <MenuItem onClick={createHandleMenuClick('Copy')}>Copy</MenuItem>
+          <MenuItem onClick={createHandleMenuClick('Paste')}>Paste</MenuItem>
         </Menu>
       </PopperUnstyled>
     </React.Fragment>
diff --git a/docs/data/base/components/menu/WrappedMenuItems.js b/docs/data/base/components/menu/WrappedMenuItems.js
index e2084c826d3629..2f88d313f182a5 100644
--- a/docs/data/base/components/menu/WrappedMenuItems.js
+++ b/docs/data/base/components/menu/WrappedMenuItems.js
@@ -7,6 +7,7 @@ import MenuItemUnstyled, {
 import { buttonUnstyledClasses } from '@mui/base/ButtonUnstyled';
 import PopperUnstyled from '@mui/base/PopperUnstyled';
 import { styled } from '@mui/system';
+import { ListActionTypes } from '@mui/base/useList';
 
 function MenuSection({ children, label }) {
   return (
@@ -23,12 +24,16 @@ MenuSection.propTypes = {
 };
 
 export default function WrappedMenuItems() {
-  const [anchorEl, setAnchorEl] = React.useState(null);
-  const isOpen = Boolean(anchorEl);
-  const buttonRef = React.useRef(null);
+  const [buttonElement, setButtonElement] = React.useState(null);
+
+  const [isOpen, setOpen] = React.useState(false);
   const menuActions = React.useRef(null);
   const preventReopen = React.useRef(false);
 
+  const updateAnchor = React.useCallback((node) => {
+    setButtonElement(node);
+  }, []);
+
   const handleButtonClick = (event) => {
     if (preventReopen.current) {
       event.preventDefault();
@@ -36,11 +41,7 @@ export default function WrappedMenuItems() {
       return;
     }
 
-    if (isOpen) {
-      setAnchorEl(null);
-    } else {
-      setAnchorEl(event.currentTarget);
-    }
+    setOpen((open) => !open);
   };
 
   const handleButtonMouseDown = () => {
@@ -54,22 +55,23 @@ export default function WrappedMenuItems() {
   const handleButtonKeyDown = (event) => {
     if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {
       event.preventDefault();
-      setAnchorEl(event.currentTarget);
+      setOpen(true);
       if (event.key === 'ArrowUp') {
-        menuActions.current?.highlightLastItem();
+        // Focus the last item when pressing ArrowUp.
+        menuActions.current?.dispatch({
+          type: ListActionTypes.keyDown,
+          key: event.key,
+          event,
+        });
       }
     }
   };
 
-  const close = () => {
-    setAnchorEl(null);
-    buttonRef.current.focus();
-  };
-
   const createHandleMenuClick = (menuItem) => {
     return () => {
       console.log(`Clicked on ${menuItem}`);
-      close();
+      setOpen(false);
+      buttonElement?.focus();
     };
   };
 
@@ -80,7 +82,7 @@ export default function WrappedMenuItems() {
         onClick={handleButtonClick}
         onKeyDown={handleButtonKeyDown}
         onMouseDown={handleButtonMouseDown}
-        ref={buttonRef}
+        ref={updateAnchor}
         aria-controls={isOpen ? 'wrapped-menu' : undefined}
         aria-expanded={isOpen || undefined}
         aria-haspopup="menu"
@@ -90,8 +92,10 @@ export default function WrappedMenuItems() {
       <MenuUnstyled
         actions={menuActions}
         open={isOpen}
-        onClose={close}
-        anchorEl={anchorEl}
+        onOpenChange={(open) => {
+          setOpen(open);
+        }}
+        anchorEl={buttonElement}
         slots={{ root: Popper, listbox: StyledListbox }}
         slotProps={{ listbox: { id: 'simple-menu' } }}
       >
diff --git a/docs/data/base/components/menu/WrappedMenuItems.tsx b/docs/data/base/components/menu/WrappedMenuItems.tsx
index 7ad2b1fdde6b88..ccaf4e1d6ed30a 100644
--- a/docs/data/base/components/menu/WrappedMenuItems.tsx
+++ b/docs/data/base/components/menu/WrappedMenuItems.tsx
@@ -6,6 +6,7 @@ import MenuItemUnstyled, {
 import { buttonUnstyledClasses } from '@mui/base/ButtonUnstyled';
 import PopperUnstyled from '@mui/base/PopperUnstyled';
 import { styled } from '@mui/system';
+import { ListActionTypes } from '@mui/base/useList';
 
 function MenuSection({ children, label }: MenuSectionProps) {
   return (
@@ -17,12 +18,17 @@ function MenuSection({ children, label }: MenuSectionProps) {
 }
 
 export default function WrappedMenuItems() {
-  const [anchorEl, setAnchorEl] = React.useState<HTMLButtonElement | null>(null);
-  const isOpen = Boolean(anchorEl);
-  const buttonRef = React.useRef<HTMLButtonElement>(null);
+  const [buttonElement, setButtonElement] = React.useState<HTMLButtonElement | null>(
+    null,
+  );
+  const [isOpen, setOpen] = React.useState(false);
   const menuActions = React.useRef<MenuUnstyledActions>(null);
   const preventReopen = React.useRef(false);
 
+  const updateAnchor = React.useCallback((node: HTMLButtonElement | null) => {
+    setButtonElement(node);
+  }, []);
+
   const handleButtonClick = (event: React.MouseEvent<HTMLButtonElement>) => {
     if (preventReopen.current) {
       event.preventDefault();
@@ -30,11 +36,7 @@ export default function WrappedMenuItems() {
       return;
     }
 
-    if (isOpen) {
-      setAnchorEl(null);
-    } else {
-      setAnchorEl(event.currentTarget);
-    }
+    setOpen((open) => !open);
   };
 
   const handleButtonMouseDown = () => {
@@ -48,22 +50,23 @@ export default function WrappedMenuItems() {
   const handleButtonKeyDown = (event: React.KeyboardEvent<HTMLButtonElement>) => {
     if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {
       event.preventDefault();
-      setAnchorEl(event.currentTarget);
+      setOpen(true);
       if (event.key === 'ArrowUp') {
-        menuActions.current?.highlightLastItem();
+        // Focus the last item when pressing ArrowUp.
+        menuActions.current?.dispatch({
+          type: ListActionTypes.keyDown,
+          key: event.key,
+          event,
+        });
       }
     }
   };
 
-  const close = () => {
-    setAnchorEl(null);
-    buttonRef.current!.focus();
-  };
-
   const createHandleMenuClick = (menuItem: string) => {
     return () => {
       console.log(`Clicked on ${menuItem}`);
-      close();
+      setOpen(false);
+      buttonElement?.focus();
     };
   };
 
@@ -74,7 +77,7 @@ export default function WrappedMenuItems() {
         onClick={handleButtonClick}
         onKeyDown={handleButtonKeyDown}
         onMouseDown={handleButtonMouseDown}
-        ref={buttonRef}
+        ref={updateAnchor}
         aria-controls={isOpen ? 'wrapped-menu' : undefined}
         aria-expanded={isOpen || undefined}
         aria-haspopup="menu"
@@ -84,8 +87,10 @@ export default function WrappedMenuItems() {
       <MenuUnstyled
         actions={menuActions}
         open={isOpen}
-        onClose={close}
-        anchorEl={anchorEl}
+        onOpenChange={(open) => {
+          setOpen(open);
+        }}
+        anchorEl={buttonElement}
         slots={{ root: Popper, listbox: StyledListbox }}
         slotProps={{ listbox: { id: 'simple-menu' } }}
       >
diff --git a/docs/data/base/components/select/UnstyledSelectCustomRenderValue.tsx b/docs/data/base/components/select/UnstyledSelectCustomRenderValue.tsx
index fcb0cc3a099d56..744690ccab9cdd 100644
--- a/docs/data/base/components/select/UnstyledSelectCustomRenderValue.tsx
+++ b/docs/data/base/components/select/UnstyledSelectCustomRenderValue.tsx
@@ -3,7 +3,7 @@ import SelectUnstyled, {
   SelectUnstyledProps,
   selectUnstyledClasses,
 } from '@mui/base/SelectUnstyled';
-import { SelectOption } from '@mui/base/useSelect';
+import { SelectOption } from '@mui/base/useOption';
 import OptionUnstyled, { optionUnstyledClasses } from '@mui/base/OptionUnstyled';
 import PopperUnstyled from '@mui/base/PopperUnstyled';
 import { styled } from '@mui/system';
diff --git a/docs/data/base/components/select/UnstyledSelectObjectValuesForm.tsx b/docs/data/base/components/select/UnstyledSelectObjectValuesForm.tsx
index 4b0aafb658d28e..c2e3531a9adb49 100644
--- a/docs/data/base/components/select/UnstyledSelectObjectValuesForm.tsx
+++ b/docs/data/base/components/select/UnstyledSelectObjectValuesForm.tsx
@@ -3,7 +3,7 @@ import SelectUnstyled, {
   SelectUnstyledProps,
   selectUnstyledClasses,
 } from '@mui/base/SelectUnstyled';
-import { SelectOption } from '@mui/base/useSelect';
+import { SelectOption } from '@mui/base/useOption';
 import OptionUnstyled, { optionUnstyledClasses } from '@mui/base/OptionUnstyled';
 import PopperUnstyled from '@mui/base/PopperUnstyled';
 import { styled } from '@mui/system';
diff --git a/docs/data/base/components/select/UseSelect.js b/docs/data/base/components/select/UseSelect.js
index da15812ce309a3..06dee98243853f 100644
--- a/docs/data/base/components/select/UseSelect.js
+++ b/docs/data/base/components/select/UseSelect.js
@@ -1,9 +1,10 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { useSelect, useOption, SelectUnstyledContext } from '@mui/base';
+import clsx from 'clsx';
+import useSelect, { SelectProvider } from '@mui/base/useSelect';
+import useOption from '@mui/base/useOption';
 import { styled } from '@mui/system';
 import UnfoldMoreRoundedIcon from '@mui/icons-material/UnfoldMoreRounded';
-import clsx from 'clsx';
 
 const blue = {
   100: '#DAECFF',
@@ -150,6 +151,7 @@ function CustomOption(props) {
   const { getRootProps, highlighted } = useOption({
     value,
     disabled,
+    label: children,
   });
 
   return (
@@ -178,7 +180,6 @@ function CustomSelect({ options, placeholder }) {
     listboxRef,
     onOpenChange: setListboxVisible,
     open: listboxVisible,
-    options,
   });
 
   React.useEffect(() => {
@@ -201,7 +202,7 @@ function CustomSelect({ options, placeholder }) {
         aria-hidden={!listboxVisible}
         className={listboxVisible ? '' : 'hidden'}
       >
-        <SelectUnstyledContext.Provider value={contextValue}>
+        <SelectProvider value={contextValue}>
           {options.map((option) => {
             return (
               <CustomOption key={option.value} value={option.value}>
@@ -209,7 +210,7 @@ function CustomSelect({ options, placeholder }) {
               </CustomOption>
             );
           })}
-        </SelectUnstyledContext.Provider>
+        </SelectProvider>
       </Listbox>
     </Root>
   );
@@ -219,7 +220,7 @@ CustomSelect.propTypes = {
   options: PropTypes.arrayOf(
     PropTypes.shape({
       disabled: PropTypes.bool,
-      label: PropTypes.node,
+      label: PropTypes.string.isRequired,
       value: PropTypes.string.isRequired,
     }),
   ).isRequired,
diff --git a/docs/data/base/components/select/UseSelect.tsx b/docs/data/base/components/select/UseSelect.tsx
index 93e036a2702a5c..d63b5ab70d13ee 100644
--- a/docs/data/base/components/select/UseSelect.tsx
+++ b/docs/data/base/components/select/UseSelect.tsx
@@ -1,13 +1,12 @@
 import * as React from 'react';
-import {
-  useSelect,
-  SelectOption,
-  useOption,
-  SelectUnstyledContext,
-} from '@mui/base';
+import clsx from 'clsx';
+import useSelect, {
+  SelectOptionDefinition,
+  SelectProvider,
+} from '@mui/base/useSelect';
+import useOption from '@mui/base/useOption';
 import { styled } from '@mui/system';
 import UnfoldMoreRoundedIcon from '@mui/icons-material/UnfoldMoreRounded';
-import clsx from 'clsx';
 
 const blue = {
   100: '#DAECFF',
@@ -144,7 +143,7 @@ const Option = styled('li')(
 );
 
 interface Props {
-  options: SelectOption<string>[];
+  options: SelectOptionDefinition<string>[];
   placeholder?: string;
 }
 
@@ -155,7 +154,10 @@ interface OptionProps {
   disabled?: boolean;
 }
 
-function renderSelectedValue(value: string | null, options: SelectOption<string>[]) {
+function renderSelectedValue(
+  value: string | null,
+  options: SelectOptionDefinition<string>[],
+) {
   const selectedOption = options.find((option) => option.value === value);
 
   return selectedOption ? `${selectedOption.label} (${value})` : null;
@@ -166,6 +168,7 @@ function CustomOption(props: OptionProps) {
   const { getRootProps, highlighted } = useOption({
     value,
     disabled,
+    label: children,
   });
 
   return (
@@ -183,11 +186,13 @@ function CustomSelect({ options, placeholder }: Props) {
   const listboxRef = React.useRef<HTMLUListElement>(null);
   const [listboxVisible, setListboxVisible] = React.useState(false);
 
-  const { getButtonProps, getListboxProps, contextValue, value } = useSelect({
+  const { getButtonProps, getListboxProps, contextValue, value } = useSelect<
+    string,
+    false
+  >({
     listboxRef,
     onOpenChange: setListboxVisible,
     open: listboxVisible,
-    options,
   });
 
   React.useEffect(() => {
@@ -210,7 +215,7 @@ function CustomSelect({ options, placeholder }: Props) {
         aria-hidden={!listboxVisible}
         className={listboxVisible ? '' : 'hidden'}
       >
-        <SelectUnstyledContext.Provider value={contextValue}>
+        <SelectProvider value={contextValue}>
           {options.map((option) => {
             return (
               <CustomOption key={option.value} value={option.value}>
@@ -218,7 +223,7 @@ function CustomSelect({ options, placeholder }: Props) {
               </CustomOption>
             );
           })}
-        </SelectUnstyledContext.Provider>
+        </SelectProvider>
       </Listbox>
     </Root>
   );
diff --git a/docs/data/base/components/tabs/KeyboardNavigation.js b/docs/data/base/components/tabs/KeyboardNavigation.js
index 8b8bd17146f86c..57b80cd3c336e3 100644
--- a/docs/data/base/components/tabs/KeyboardNavigation.js
+++ b/docs/data/base/components/tabs/KeyboardNavigation.js
@@ -85,26 +85,26 @@ export default function AccessibleTabs1() {
     <div>
       <p>Selection following focus:</p>
       <TabsUnstyled
-        defaultValue={0}
+        defaultValue={1}
         aria-label="Tabs where selection follows focus"
         selectionFollowsFocus
       >
         <TabsList>
-          <Tab>One</Tab>
-          <Tab>Two</Tab>
-          <Tab>Three</Tab>
+          <Tab value={1}>One</Tab>
+          <Tab value={2}>Two</Tab>
+          <Tab value={3}>Three</Tab>
         </TabsList>
       </TabsUnstyled>
 
       <p>Selection independent of focus (default behavior):</p>
       <TabsUnstyled
-        defaultValue={0}
+        defaultValue={1}
         aria-label="Tabs where selection does not follow focus"
       >
         <TabsList>
-          <Tab>One</Tab>
-          <Tab>Two</Tab>
-          <Tab>Three</Tab>
+          <Tab value={1}>One</Tab>
+          <Tab value={2}>Two</Tab>
+          <Tab value={3}>Three</Tab>
         </TabsList>
       </TabsUnstyled>
     </div>
diff --git a/docs/data/base/components/tabs/KeyboardNavigation.tsx b/docs/data/base/components/tabs/KeyboardNavigation.tsx
index 8b8bd17146f86c..57b80cd3c336e3 100644
--- a/docs/data/base/components/tabs/KeyboardNavigation.tsx
+++ b/docs/data/base/components/tabs/KeyboardNavigation.tsx
@@ -85,26 +85,26 @@ export default function AccessibleTabs1() {
     <div>
       <p>Selection following focus:</p>
       <TabsUnstyled
-        defaultValue={0}
+        defaultValue={1}
         aria-label="Tabs where selection follows focus"
         selectionFollowsFocus
       >
         <TabsList>
-          <Tab>One</Tab>
-          <Tab>Two</Tab>
-          <Tab>Three</Tab>
+          <Tab value={1}>One</Tab>
+          <Tab value={2}>Two</Tab>
+          <Tab value={3}>Three</Tab>
         </TabsList>
       </TabsUnstyled>
 
       <p>Selection independent of focus (default behavior):</p>
       <TabsUnstyled
-        defaultValue={0}
+        defaultValue={1}
         aria-label="Tabs where selection does not follow focus"
       >
         <TabsList>
-          <Tab>One</Tab>
-          <Tab>Two</Tab>
-          <Tab>Three</Tab>
+          <Tab value={1}>One</Tab>
+          <Tab value={2}>Two</Tab>
+          <Tab value={3}>Three</Tab>
         </TabsList>
       </TabsUnstyled>
     </div>
diff --git a/docs/data/base/components/tabs/UnstyledTabsBasic.js b/docs/data/base/components/tabs/UnstyledTabsBasic.js
index c4112192089bb4..1ce19b7e447df7 100644
--- a/docs/data/base/components/tabs/UnstyledTabsBasic.js
+++ b/docs/data/base/components/tabs/UnstyledTabsBasic.js
@@ -6,15 +6,15 @@ import TabUnstyled from '@mui/base/TabUnstyled';
 
 export default function UnstyledTabsBasic() {
   return (
-    <TabsUnstyled defaultValue={0}>
+    <TabsUnstyled defaultValue={1}>
       <TabsListUnstyled>
-        <TabUnstyled>One</TabUnstyled>
-        <TabUnstyled>Two</TabUnstyled>
-        <TabUnstyled>Three</TabUnstyled>
+        <TabUnstyled value={1}>One</TabUnstyled>
+        <TabUnstyled value={2}>Two</TabUnstyled>
+        <TabUnstyled value={3}>Three</TabUnstyled>
       </TabsListUnstyled>
-      <TabPanelUnstyled value={0}>First page</TabPanelUnstyled>
-      <TabPanelUnstyled value={1}>Second page</TabPanelUnstyled>
-      <TabPanelUnstyled value={2}>Third page</TabPanelUnstyled>
+      <TabPanelUnstyled value={1}>First page</TabPanelUnstyled>
+      <TabPanelUnstyled value={2}>Second page</TabPanelUnstyled>
+      <TabPanelUnstyled value={3}>Third page</TabPanelUnstyled>
     </TabsUnstyled>
   );
 }
diff --git a/docs/data/base/components/tabs/UnstyledTabsBasic.tsx b/docs/data/base/components/tabs/UnstyledTabsBasic.tsx
index c4112192089bb4..1ce19b7e447df7 100644
--- a/docs/data/base/components/tabs/UnstyledTabsBasic.tsx
+++ b/docs/data/base/components/tabs/UnstyledTabsBasic.tsx
@@ -6,15 +6,15 @@ import TabUnstyled from '@mui/base/TabUnstyled';
 
 export default function UnstyledTabsBasic() {
   return (
-    <TabsUnstyled defaultValue={0}>
+    <TabsUnstyled defaultValue={1}>
       <TabsListUnstyled>
-        <TabUnstyled>One</TabUnstyled>
-        <TabUnstyled>Two</TabUnstyled>
-        <TabUnstyled>Three</TabUnstyled>
+        <TabUnstyled value={1}>One</TabUnstyled>
+        <TabUnstyled value={2}>Two</TabUnstyled>
+        <TabUnstyled value={3}>Three</TabUnstyled>
       </TabsListUnstyled>
-      <TabPanelUnstyled value={0}>First page</TabPanelUnstyled>
-      <TabPanelUnstyled value={1}>Second page</TabPanelUnstyled>
-      <TabPanelUnstyled value={2}>Third page</TabPanelUnstyled>
+      <TabPanelUnstyled value={1}>First page</TabPanelUnstyled>
+      <TabPanelUnstyled value={2}>Second page</TabPanelUnstyled>
+      <TabPanelUnstyled value={3}>Third page</TabPanelUnstyled>
     </TabsUnstyled>
   );
 }
diff --git a/docs/data/base/components/tabs/UnstyledTabsBasic.tsx.preview b/docs/data/base/components/tabs/UnstyledTabsBasic.tsx.preview
index 2669f0b1113b07..077b7ae06663d1 100644
--- a/docs/data/base/components/tabs/UnstyledTabsBasic.tsx.preview
+++ b/docs/data/base/components/tabs/UnstyledTabsBasic.tsx.preview
@@ -1,10 +1,10 @@
-<TabsUnstyled defaultValue={0}>
+<TabsUnstyled defaultValue={1}>
   <TabsListUnstyled>
-    <TabUnstyled>One</TabUnstyled>
-    <TabUnstyled>Two</TabUnstyled>
-    <TabUnstyled>Three</TabUnstyled>
+    <TabUnstyled value={1}>One</TabUnstyled>
+    <TabUnstyled value={2}>Two</TabUnstyled>
+    <TabUnstyled value={3}>Three</TabUnstyled>
   </TabsListUnstyled>
-  <TabPanelUnstyled value={0}>First page</TabPanelUnstyled>
-  <TabPanelUnstyled value={1}>Second page</TabPanelUnstyled>
-  <TabPanelUnstyled value={2}>Third page</TabPanelUnstyled>
+  <TabPanelUnstyled value={1}>First page</TabPanelUnstyled>
+  <TabPanelUnstyled value={2}>Second page</TabPanelUnstyled>
+  <TabPanelUnstyled value={3}>Third page</TabPanelUnstyled>
 </TabsUnstyled>
\ No newline at end of file
diff --git a/docs/data/base/components/tabs/UnstyledTabsCustomized.js b/docs/data/base/components/tabs/UnstyledTabsCustomized.js
index 1deefa2056b9e9..d7c9220c3b0f43 100644
--- a/docs/data/base/components/tabs/UnstyledTabsCustomized.js
+++ b/docs/data/base/components/tabs/UnstyledTabsCustomized.js
@@ -89,15 +89,15 @@ const TabsList = styled(TabsListUnstyled)(
 
 export default function UnstyledTabsCustomized() {
   return (
-    <TabsUnstyled defaultValue={0}>
+    <TabsUnstyled defaultValue={1}>
       <TabsList>
-        <Tab>One</Tab>
-        <Tab>Two</Tab>
-        <Tab>Three</Tab>
+        <Tab value={1}>One</Tab>
+        <Tab value={2}>Two</Tab>
+        <Tab value={3}>Three</Tab>
       </TabsList>
-      <TabPanel value={0}>First page</TabPanel>
-      <TabPanel value={1}>Second page</TabPanel>
-      <TabPanel value={2}>Third page</TabPanel>
+      <TabPanel value={1}>First page</TabPanel>
+      <TabPanel value={2}>Second page</TabPanel>
+      <TabPanel value={3}>Third page</TabPanel>
     </TabsUnstyled>
   );
 }
diff --git a/docs/data/base/components/tabs/UnstyledTabsCustomized.tsx b/docs/data/base/components/tabs/UnstyledTabsCustomized.tsx
index 1deefa2056b9e9..d7c9220c3b0f43 100644
--- a/docs/data/base/components/tabs/UnstyledTabsCustomized.tsx
+++ b/docs/data/base/components/tabs/UnstyledTabsCustomized.tsx
@@ -89,15 +89,15 @@ const TabsList = styled(TabsListUnstyled)(
 
 export default function UnstyledTabsCustomized() {
   return (
-    <TabsUnstyled defaultValue={0}>
+    <TabsUnstyled defaultValue={1}>
       <TabsList>
-        <Tab>One</Tab>
-        <Tab>Two</Tab>
-        <Tab>Three</Tab>
+        <Tab value={1}>One</Tab>
+        <Tab value={2}>Two</Tab>
+        <Tab value={3}>Three</Tab>
       </TabsList>
-      <TabPanel value={0}>First page</TabPanel>
-      <TabPanel value={1}>Second page</TabPanel>
-      <TabPanel value={2}>Third page</TabPanel>
+      <TabPanel value={1}>First page</TabPanel>
+      <TabPanel value={2}>Second page</TabPanel>
+      <TabPanel value={3}>Third page</TabPanel>
     </TabsUnstyled>
   );
 }
diff --git a/docs/data/base/components/tabs/UnstyledTabsCustomized.tsx.preview b/docs/data/base/components/tabs/UnstyledTabsCustomized.tsx.preview
index 481df4cdd1f6de..76364ff1a19211 100644
--- a/docs/data/base/components/tabs/UnstyledTabsCustomized.tsx.preview
+++ b/docs/data/base/components/tabs/UnstyledTabsCustomized.tsx.preview
@@ -1,10 +1,10 @@
-<TabsUnstyled defaultValue={0}>
+<TabsUnstyled defaultValue={1}>
   <TabsList>
-    <Tab>One</Tab>
-    <Tab>Two</Tab>
-    <Tab>Three</Tab>
+    <Tab value={1}>One</Tab>
+    <Tab value={2}>Two</Tab>
+    <Tab value={3}>Three</Tab>
   </TabsList>
-  <TabPanel value={0}>First page</TabPanel>
-  <TabPanel value={1}>Second page</TabPanel>
-  <TabPanel value={2}>Third page</TabPanel>
+  <TabPanel value={1}>First page</TabPanel>
+  <TabPanel value={2}>Second page</TabPanel>
+  <TabPanel value={3}>Third page</TabPanel>
 </TabsUnstyled>
\ No newline at end of file
diff --git a/docs/data/base/components/tabs/UnstyledTabsIntroduction.js b/docs/data/base/components/tabs/UnstyledTabsIntroduction.js
index 97b2193bc1816a..6f8c6345249b89 100644
--- a/docs/data/base/components/tabs/UnstyledTabsIntroduction.js
+++ b/docs/data/base/components/tabs/UnstyledTabsIntroduction.js
@@ -98,9 +98,9 @@ export default function UnstyledTabsIntroduction() {
   return (
     <TabsUnstyled defaultValue={0}>
       <TabsList>
-        <Tab>My account</Tab>
-        <Tab>Profile</Tab>
-        <Tab>Language</Tab>
+        <Tab value={0}>My account</Tab>
+        <Tab value={1}>Profile</Tab>
+        <Tab value={2}>Language</Tab>
       </TabsList>
       <TabPanel value={0}>My account page</TabPanel>
       <TabPanel value={1}>Profile page</TabPanel>
diff --git a/docs/data/base/components/tabs/UnstyledTabsIntroduction.tsx b/docs/data/base/components/tabs/UnstyledTabsIntroduction.tsx
index 97b2193bc1816a..6f8c6345249b89 100644
--- a/docs/data/base/components/tabs/UnstyledTabsIntroduction.tsx
+++ b/docs/data/base/components/tabs/UnstyledTabsIntroduction.tsx
@@ -98,9 +98,9 @@ export default function UnstyledTabsIntroduction() {
   return (
     <TabsUnstyled defaultValue={0}>
       <TabsList>
-        <Tab>My account</Tab>
-        <Tab>Profile</Tab>
-        <Tab>Language</Tab>
+        <Tab value={0}>My account</Tab>
+        <Tab value={1}>Profile</Tab>
+        <Tab value={2}>Language</Tab>
       </TabsList>
       <TabPanel value={0}>My account page</TabPanel>
       <TabPanel value={1}>Profile page</TabPanel>
diff --git a/docs/data/base/components/tabs/UnstyledTabsIntroduction.tsx.preview b/docs/data/base/components/tabs/UnstyledTabsIntroduction.tsx.preview
index 480f510d20466d..c0e474e9b741ba 100644
--- a/docs/data/base/components/tabs/UnstyledTabsIntroduction.tsx.preview
+++ b/docs/data/base/components/tabs/UnstyledTabsIntroduction.tsx.preview
@@ -1,8 +1,8 @@
 <TabsUnstyled defaultValue={0}>
   <TabsList>
-    <Tab>My account</Tab>
-    <Tab>Profile</Tab>
-    <Tab>Language</Tab>
+    <Tab value={0}>My account</Tab>
+    <Tab value={1}>Profile</Tab>
+    <Tab value={2}>Language</Tab>
   </TabsList>
   <TabPanel value={0}>My account page</TabPanel>
   <TabPanel value={1}>Profile page</TabPanel>
diff --git a/docs/data/joy/components/select/SelectCustomOption.js b/docs/data/joy/components/select/SelectCustomOption.js
index d76aa7a3e3b8b3..2b875476bde0d9 100644
--- a/docs/data/joy/components/select/SelectCustomOption.js
+++ b/docs/data/joy/components/select/SelectCustomOption.js
@@ -5,6 +5,27 @@ import ListDivider from '@mui/joy/ListDivider';
 import Select from '@mui/joy/Select';
 import Option from '@mui/joy/Option';
 
+const options = [
+  { value: '1', label: 'Eric', src: '/static/images/avatar/1.jpg' },
+  { value: '2', label: 'Smith', src: '/static/images/avatar/2.jpg' },
+  { value: '3', label: 'Erika', src: '/static/images/avatar/3.jpg' },
+];
+
+function renderValue(option) {
+  if (!option) {
+    return null;
+  }
+
+  return (
+    <React.Fragment>
+      <ListItemDecorator>
+        <Avatar size="sm" src={options.find((o) => o.value === option.value)?.src} />
+      </ListItemDecorator>
+      {option.label}
+    </React.Fragment>
+  );
+}
+
 export default function SelectCustomOption() {
   return (
     <Select
@@ -20,27 +41,19 @@ export default function SelectCustomOption() {
         '--ListItemDecorator-size': '44px',
         minWidth: 240,
       }}
+      renderValue={renderValue}
     >
-      <Option value="1">
-        <ListItemDecorator>
-          <Avatar size="sm" src="/static/images/avatar/1.jpg" />
-        </ListItemDecorator>
-        Eric
-      </Option>
-      <ListDivider role="none" inset="startContent" />
-      <Option value="2">
-        <ListItemDecorator>
-          <Avatar size="sm" src="/static/images/avatar/2.jpg" />
-        </ListItemDecorator>
-        Smith
-      </Option>
-      <ListDivider role="none" inset="startContent" />
-      <Option value="3">
-        <ListItemDecorator>
-          <Avatar size="sm" src="/static/images/avatar/3.jpg" />
-        </ListItemDecorator>
-        Erika
-      </Option>
+      {options.map((option, index) => (
+        <React.Fragment key={option.value}>
+          {index !== 0 ? <ListDivider role="none" inset="startContent" /> : null}
+          <Option value={option.value} label={option.label}>
+            <ListItemDecorator>
+              <Avatar size="sm" src={option.src} />
+            </ListItemDecorator>
+            {option.label}
+          </Option>
+        </React.Fragment>
+      ))}
     </Select>
   );
 }
diff --git a/docs/data/joy/components/select/SelectCustomOption.tsx b/docs/data/joy/components/select/SelectCustomOption.tsx
index d76aa7a3e3b8b3..cfef40ce1bfd4f 100644
--- a/docs/data/joy/components/select/SelectCustomOption.tsx
+++ b/docs/data/joy/components/select/SelectCustomOption.tsx
@@ -2,9 +2,30 @@ import * as React from 'react';
 import Avatar from '@mui/joy/Avatar';
 import ListItemDecorator from '@mui/joy/ListItemDecorator';
 import ListDivider from '@mui/joy/ListDivider';
-import Select from '@mui/joy/Select';
+import Select, { SelectOption } from '@mui/joy/Select';
 import Option from '@mui/joy/Option';
 
+const options = [
+  { value: '1', label: 'Eric', src: '/static/images/avatar/1.jpg' },
+  { value: '2', label: 'Smith', src: '/static/images/avatar/2.jpg' },
+  { value: '3', label: 'Erika', src: '/static/images/avatar/3.jpg' },
+];
+
+function renderValue(option: SelectOption<string> | null) {
+  if (!option) {
+    return null;
+  }
+
+  return (
+    <React.Fragment>
+      <ListItemDecorator>
+        <Avatar size="sm" src={options.find((o) => o.value === option.value)?.src} />
+      </ListItemDecorator>
+      {option.label}
+    </React.Fragment>
+  );
+}
+
 export default function SelectCustomOption() {
   return (
     <Select
@@ -20,27 +41,19 @@ export default function SelectCustomOption() {
         '--ListItemDecorator-size': '44px',
         minWidth: 240,
       }}
+      renderValue={renderValue}
     >
-      <Option value="1">
-        <ListItemDecorator>
-          <Avatar size="sm" src="/static/images/avatar/1.jpg" />
-        </ListItemDecorator>
-        Eric
-      </Option>
-      <ListDivider role="none" inset="startContent" />
-      <Option value="2">
-        <ListItemDecorator>
-          <Avatar size="sm" src="/static/images/avatar/2.jpg" />
-        </ListItemDecorator>
-        Smith
-      </Option>
-      <ListDivider role="none" inset="startContent" />
-      <Option value="3">
-        <ListItemDecorator>
-          <Avatar size="sm" src="/static/images/avatar/3.jpg" />
-        </ListItemDecorator>
-        Erika
-      </Option>
+      {options.map((option, index) => (
+        <React.Fragment key={option.value}>
+          {index !== 0 ? <ListDivider role="none" inset="startContent" /> : null}
+          <Option value={option.value} label={option.label}>
+            <ListItemDecorator>
+              <Avatar size="sm" src={option.src} />
+            </ListItemDecorator>
+            {option.label}
+          </Option>
+        </React.Fragment>
+      ))}
     </Select>
   );
 }
diff --git a/docs/data/joy/getting-started/templates/email/components/Menu.tsx b/docs/data/joy/getting-started/templates/email/components/Menu.tsx
index 8b0ada4a62577b..3dd506947a3997 100644
--- a/docs/data/joy/getting-started/templates/email/components/Menu.tsx
+++ b/docs/data/joy/getting-started/templates/email/components/Menu.tsx
@@ -1,6 +1,7 @@
 import * as React from 'react';
 import JoyMenu, { MenuUnstyledActions } from '@mui/joy/Menu';
 import MenuItem from '@mui/joy/MenuItem';
+import { ListActionTypes } from '@mui/base/useList';
 
 function Menu({
   control,
@@ -11,31 +12,44 @@ function Menu({
   id: string;
   menus: Array<{ label: string } & { [k: string]: any }>;
 }) {
-  const [anchorEl, setAnchorEl] = React.useState<HTMLButtonElement | null>(null);
-  const isOpen = Boolean(anchorEl);
+  const [buttonElement, setButtonElement] = React.useState<HTMLButtonElement | null>(
+    null,
+  );
+  const [isOpen, setOpen] = React.useState(false);
   const buttonRef = React.useRef<HTMLButtonElement>(null);
   const menuActions = React.useRef<MenuUnstyledActions>(null);
+  const preventReopen = React.useRef(false);
+
+  const updateAnchor = React.useCallback((node: HTMLButtonElement | null) => {
+    setButtonElement(node);
+  }, []);
 
   const handleButtonClick = (event: React.MouseEvent<HTMLButtonElement>) => {
-    if (isOpen) {
-      setAnchorEl(null);
-    } else {
-      setAnchorEl(event.currentTarget);
+    if (preventReopen.current) {
+      event.preventDefault();
+      preventReopen.current = false;
+      return;
     }
+
+    setOpen((open) => !open);
   };
 
   const handleButtonKeyDown = (event: React.KeyboardEvent<HTMLButtonElement>) => {
     if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {
       event.preventDefault();
-      setAnchorEl(event.currentTarget);
+      setOpen(true);
       if (event.key === 'ArrowUp') {
-        menuActions.current?.highlightLastItem();
+        menuActions.current?.dispatch({
+          type: ListActionTypes.keyDown,
+          key: event.key,
+          event,
+        });
       }
     }
   };
 
   const close = () => {
-    setAnchorEl(null);
+    setOpen(false);
     buttonRef.current!.focus();
   };
 
@@ -45,7 +59,7 @@ function Menu({
         type: 'button',
         onClick: handleButtonClick,
         onKeyDown: handleButtonKeyDown,
-        ref: buttonRef,
+        ref: updateAnchor,
         'aria-controls': isOpen ? id : undefined,
         'aria-expanded': isOpen || undefined,
         'aria-haspopup': 'menu',
@@ -56,7 +70,7 @@ function Menu({
         actions={menuActions}
         open={isOpen}
         onClose={close}
-        anchorEl={anchorEl}
+        anchorEl={buttonElement}
         sx={{ minWidth: 120 }}
       >
         {menus.map(({ label, active, ...item }) => {
diff --git a/docs/data/joy/getting-started/templates/files/components/Menu.tsx b/docs/data/joy/getting-started/templates/files/components/Menu.tsx
index 8b0ada4a62577b..3dd506947a3997 100644
--- a/docs/data/joy/getting-started/templates/files/components/Menu.tsx
+++ b/docs/data/joy/getting-started/templates/files/components/Menu.tsx
@@ -1,6 +1,7 @@
 import * as React from 'react';
 import JoyMenu, { MenuUnstyledActions } from '@mui/joy/Menu';
 import MenuItem from '@mui/joy/MenuItem';
+import { ListActionTypes } from '@mui/base/useList';
 
 function Menu({
   control,
@@ -11,31 +12,44 @@ function Menu({
   id: string;
   menus: Array<{ label: string } & { [k: string]: any }>;
 }) {
-  const [anchorEl, setAnchorEl] = React.useState<HTMLButtonElement | null>(null);
-  const isOpen = Boolean(anchorEl);
+  const [buttonElement, setButtonElement] = React.useState<HTMLButtonElement | null>(
+    null,
+  );
+  const [isOpen, setOpen] = React.useState(false);
   const buttonRef = React.useRef<HTMLButtonElement>(null);
   const menuActions = React.useRef<MenuUnstyledActions>(null);
+  const preventReopen = React.useRef(false);
+
+  const updateAnchor = React.useCallback((node: HTMLButtonElement | null) => {
+    setButtonElement(node);
+  }, []);
 
   const handleButtonClick = (event: React.MouseEvent<HTMLButtonElement>) => {
-    if (isOpen) {
-      setAnchorEl(null);
-    } else {
-      setAnchorEl(event.currentTarget);
+    if (preventReopen.current) {
+      event.preventDefault();
+      preventReopen.current = false;
+      return;
     }
+
+    setOpen((open) => !open);
   };
 
   const handleButtonKeyDown = (event: React.KeyboardEvent<HTMLButtonElement>) => {
     if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {
       event.preventDefault();
-      setAnchorEl(event.currentTarget);
+      setOpen(true);
       if (event.key === 'ArrowUp') {
-        menuActions.current?.highlightLastItem();
+        menuActions.current?.dispatch({
+          type: ListActionTypes.keyDown,
+          key: event.key,
+          event,
+        });
       }
     }
   };
 
   const close = () => {
-    setAnchorEl(null);
+    setOpen(false);
     buttonRef.current!.focus();
   };
 
@@ -45,7 +59,7 @@ function Menu({
         type: 'button',
         onClick: handleButtonClick,
         onKeyDown: handleButtonKeyDown,
-        ref: buttonRef,
+        ref: updateAnchor,
         'aria-controls': isOpen ? id : undefined,
         'aria-expanded': isOpen || undefined,
         'aria-haspopup': 'menu',
@@ -56,7 +70,7 @@ function Menu({
         actions={menuActions}
         open={isOpen}
         onClose={close}
-        anchorEl={anchorEl}
+        anchorEl={buttonElement}
         sx={{ minWidth: 120 }}
       >
         {menus.map(({ label, active, ...item }) => {
diff --git a/docs/data/joy/getting-started/templates/team/components/Menu.tsx b/docs/data/joy/getting-started/templates/team/components/Menu.tsx
index 8b0ada4a62577b..3dd506947a3997 100644
--- a/docs/data/joy/getting-started/templates/team/components/Menu.tsx
+++ b/docs/data/joy/getting-started/templates/team/components/Menu.tsx
@@ -1,6 +1,7 @@
 import * as React from 'react';
 import JoyMenu, { MenuUnstyledActions } from '@mui/joy/Menu';
 import MenuItem from '@mui/joy/MenuItem';
+import { ListActionTypes } from '@mui/base/useList';
 
 function Menu({
   control,
@@ -11,31 +12,44 @@ function Menu({
   id: string;
   menus: Array<{ label: string } & { [k: string]: any }>;
 }) {
-  const [anchorEl, setAnchorEl] = React.useState<HTMLButtonElement | null>(null);
-  const isOpen = Boolean(anchorEl);
+  const [buttonElement, setButtonElement] = React.useState<HTMLButtonElement | null>(
+    null,
+  );
+  const [isOpen, setOpen] = React.useState(false);
   const buttonRef = React.useRef<HTMLButtonElement>(null);
   const menuActions = React.useRef<MenuUnstyledActions>(null);
+  const preventReopen = React.useRef(false);
+
+  const updateAnchor = React.useCallback((node: HTMLButtonElement | null) => {
+    setButtonElement(node);
+  }, []);
 
   const handleButtonClick = (event: React.MouseEvent<HTMLButtonElement>) => {
-    if (isOpen) {
-      setAnchorEl(null);
-    } else {
-      setAnchorEl(event.currentTarget);
+    if (preventReopen.current) {
+      event.preventDefault();
+      preventReopen.current = false;
+      return;
     }
+
+    setOpen((open) => !open);
   };
 
   const handleButtonKeyDown = (event: React.KeyboardEvent<HTMLButtonElement>) => {
     if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {
       event.preventDefault();
-      setAnchorEl(event.currentTarget);
+      setOpen(true);
       if (event.key === 'ArrowUp') {
-        menuActions.current?.highlightLastItem();
+        menuActions.current?.dispatch({
+          type: ListActionTypes.keyDown,
+          key: event.key,
+          event,
+        });
       }
     }
   };
 
   const close = () => {
-    setAnchorEl(null);
+    setOpen(false);
     buttonRef.current!.focus();
   };
 
@@ -45,7 +59,7 @@ function Menu({
         type: 'button',
         onClick: handleButtonClick,
         onKeyDown: handleButtonKeyDown,
-        ref: buttonRef,
+        ref: updateAnchor,
         'aria-controls': isOpen ? id : undefined,
         'aria-expanded': isOpen || undefined,
         'aria-haspopup': 'menu',
@@ -56,7 +70,7 @@ function Menu({
         actions={menuActions}
         open={isOpen}
         onClose={close}
-        anchorEl={anchorEl}
+        anchorEl={buttonElement}
         sx={{ minWidth: 120 }}
       >
         {menus.map(({ label, active, ...item }) => {
diff --git a/docs/pages/base/api/menu-unstyled.json b/docs/pages/base/api/menu-unstyled.json
index e28d7fa1e3613f..29ea36f1a2ebf1 100644
--- a/docs/pages/base/api/menu-unstyled.json
+++ b/docs/pages/base/api/menu-unstyled.json
@@ -8,8 +8,7 @@
       }
     },
     "component": { "type": { "name": "elementType" } },
-    "keepMounted": { "type": { "name": "bool" }, "default": "false" },
-    "onClose": { "type": { "name": "func" } },
+    "onOpenChange": { "type": { "name": "func" } },
     "open": { "type": { "name": "bool" }, "default": "false" },
     "slotProps": {
       "type": {
diff --git a/docs/pages/base/api/tab-panel-unstyled.json b/docs/pages/base/api/tab-panel-unstyled.json
index fea85c48e849ab..0bb1d8e5d694aa 100644
--- a/docs/pages/base/api/tab-panel-unstyled.json
+++ b/docs/pages/base/api/tab-panel-unstyled.json
@@ -1,9 +1,5 @@
 {
   "props": {
-    "value": {
-      "type": { "name": "union", "description": "number<br>&#124;&nbsp;string" },
-      "required": true
-    },
     "children": { "type": { "name": "node" } },
     "component": { "type": { "name": "elementType" } },
     "slotProps": {
@@ -13,7 +9,8 @@
     "slots": {
       "type": { "name": "shape", "description": "{ root?: elementType }" },
       "default": "{}"
-    }
+    },
+    "value": { "type": { "name": "union", "description": "number<br>&#124;&nbsp;string" } }
   },
   "name": "TabPanelUnstyled",
   "styles": { "classes": [], "globalClasses": {}, "name": null },
diff --git a/docs/pages/base/api/tabs-unstyled.json b/docs/pages/base/api/tabs-unstyled.json
index 9a28f09a2915b7..228ee20b1778cb 100644
--- a/docs/pages/base/api/tabs-unstyled.json
+++ b/docs/pages/base/api/tabs-unstyled.json
@@ -2,12 +2,7 @@
   "props": {
     "children": { "type": { "name": "node" } },
     "component": { "type": { "name": "elementType" } },
-    "defaultValue": {
-      "type": {
-        "name": "union",
-        "description": "false<br>&#124;&nbsp;number<br>&#124;&nbsp;string"
-      }
-    },
+    "defaultValue": { "type": { "name": "union", "description": "number<br>&#124;&nbsp;string" } },
     "direction": {
       "type": { "name": "enum", "description": "'ltr'<br>&#124;&nbsp;'rtl'" },
       "default": "'ltr'"
@@ -26,12 +21,7 @@
       "type": { "name": "shape", "description": "{ root?: elementType }" },
       "default": "{}"
     },
-    "value": {
-      "type": {
-        "name": "union",
-        "description": "false<br>&#124;&nbsp;number<br>&#124;&nbsp;string"
-      }
-    }
+    "value": { "type": { "name": "union", "description": "number<br>&#124;&nbsp;string" } }
   },
   "name": "TabsUnstyled",
   "styles": { "classes": [], "globalClasses": {}, "name": null },
diff --git a/docs/pages/base/api/use-button.json b/docs/pages/base/api/use-button.json
index 00b73df07d8a88..cfd717d3b3e77d 100644
--- a/docs/pages/base/api/use-button.json
+++ b/docs/pages/base/api/use-button.json
@@ -48,6 +48,13 @@
       },
       "required": true
     },
+    "ref": {
+      "type": {
+        "name": "((instance: unknown) =&gt; void) | null",
+        "description": "((instance: unknown) =&gt; void) | null"
+      },
+      "required": true
+    },
     "setFocusVisible": {
       "type": {
         "name": "React.Dispatch&lt;React.SetStateAction&lt;boolean&gt;&gt;",
diff --git a/docs/pages/base/api/use-menu-item.json b/docs/pages/base/api/use-menu-item.json
index 459097b94b117b..3b9bdb346daeca 100644
--- a/docs/pages/base/api/use-menu-item.json
+++ b/docs/pages/base/api/use-menu-item.json
@@ -5,6 +5,7 @@
       "required": true
     },
     "disabled": { "type": { "name": "boolean", "description": "boolean" } },
+    "id": { "type": { "name": "string", "description": "string" } },
     "label": { "type": { "name": "string", "description": "string" } },
     "onClick": {
       "type": {
@@ -14,16 +15,8 @@
     }
   },
   "returnValue": {
-    "disabled": {
-      "type": { "name": "boolean", "description": "boolean" },
-      "default": "false",
-      "required": true
-    },
-    "focusVisible": {
-      "type": { "name": "boolean", "description": "boolean" },
-      "default": "false",
-      "required": true
-    },
+    "disabled": { "type": { "name": "boolean", "description": "boolean" }, "required": true },
+    "focusVisible": { "type": { "name": "boolean", "description": "boolean" }, "required": true },
     "getRootProps": {
       "type": {
         "name": "&lt;TOther extends EventHandlers = {}&gt;(otherHandlers?: TOther) =&gt; UseMenuItemRootSlotProps&lt;TOther&gt;",
@@ -31,11 +24,16 @@
       },
       "required": true
     },
-    "highlighted": {
-      "type": { "name": "boolean", "description": "boolean" },
-      "default": "false",
+    "highlighted": { "type": { "name": "boolean", "description": "boolean" }, "required": true },
+    "index": { "type": { "name": "number", "description": "number" }, "required": true },
+    "ref": {
+      "type": {
+        "name": "((instance: unknown) =&gt; void) | null",
+        "description": "((instance: unknown) =&gt; void) | null"
+      },
       "required": true
-    }
+    },
+    "totalItemCount": { "type": { "name": "number", "description": "number" }, "required": true }
   },
   "name": "useMenuItem",
   "filename": "/packages/mui-base/src/useMenuItem/useMenuItem.ts",
diff --git a/docs/pages/base/api/use-menu.json b/docs/pages/base/api/use-menu.json
index f67a9cbc9f6a86..4cd0ede5cff5c2 100644
--- a/docs/pages/base/api/use-menu.json
+++ b/docs/pages/base/api/use-menu.json
@@ -1,15 +1,25 @@
 {
   "parameters": {
+    "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;" }
     },
-    "onClose": { "type": { "name": "() =&gt; void", "description": "() =&gt; void" } },
+    "onOpenChange": {
+      "type": { "name": "(open: boolean) =&gt; void", "description": "(open: boolean) =&gt; void" }
+    },
     "open": { "type": { "name": "boolean", "description": "boolean" } }
   },
   "returnValue": {
     "contextValue": {
-      "type": { "name": "MenuUnstyledContextType", "description": "MenuUnstyledContextType" },
+      "type": { "name": "MenuProviderValue", "description": "MenuProviderValue" },
+      "required": true
+    },
+    "dispatch": {
+      "type": {
+        "name": "(action: ListAction&lt;string&gt;) =&gt; void",
+        "description": "(action: ListAction&lt;string&gt;) =&gt; void"
+      },
       "required": true
     },
     "getListboxProps": {
@@ -19,25 +29,18 @@
       },
       "required": true
     },
-    "highlightedOption": {
+    "highlightedValue": {
       "type": { "name": "string | null", "description": "string | null" },
       "required": true
     },
-    "highlightFirstItem": {
-      "type": { "name": "() =&gt; void", "description": "() =&gt; void" },
-      "required": true
-    },
-    "highlightLastItem": {
-      "type": { "name": "() =&gt; void", "description": "() =&gt; void" },
-      "required": true
-    },
     "menuItems": {
       "type": {
-        "name": "Record&lt;string, MenuItemMetadata&gt;",
-        "description": "Record&lt;string, MenuItemMetadata&gt;"
+        "name": "Map&lt;string, MenuItemMetadata&gt;",
+        "description": "Map&lt;string, MenuItemMetadata&gt;"
       },
       "required": true
-    }
+    },
+    "open": { "type": { "name": "boolean", "description": "boolean" }, "required": true }
   },
   "name": "useMenu",
   "filename": "/packages/mui-base/src/useMenu/useMenu.ts",
diff --git a/docs/pages/base/api/use-option.json b/docs/pages/base/api/use-option.json
index 091898c40a09c7..2c70333285a5e9 100644
--- a/docs/pages/base/api/use-option.json
+++ b/docs/pages/base/api/use-option.json
@@ -1,7 +1,12 @@
 {
   "parameters": {
     "disabled": { "type": { "name": "boolean", "description": "boolean" }, "required": true },
+    "label": {
+      "type": { "name": "string | React.ReactNode", "description": "string | React.ReactNode" },
+      "required": true
+    },
     "value": { "type": { "name": "Value", "description": "Value" }, "required": true },
+    "id": { "type": { "name": "string", "description": "string" } },
     "optionRef": {
       "type": {
         "name": "React.Ref&lt;HTMLElement&gt;",
@@ -19,6 +24,13 @@
     },
     "highlighted": { "type": { "name": "boolean", "description": "boolean" }, "required": true },
     "index": { "type": { "name": "number", "description": "number" }, "required": true },
+    "ref": {
+      "type": {
+        "name": "React.RefCallback&lt;HTMLElement&gt;",
+        "description": "React.RefCallback&lt;HTMLElement&gt;"
+      },
+      "required": true
+    },
     "selected": { "type": { "name": "boolean", "description": "boolean" }, "required": true }
   },
   "name": "useOption",
diff --git a/docs/pages/base/api/use-select.json b/docs/pages/base/api/use-select.json
index 767592822eb19c..6e26cd8fc6d182 100644
--- a/docs/pages/base/api/use-select.json
+++ b/docs/pages/base/api/use-select.json
@@ -1,6 +1,61 @@
 {
   "parameters": {},
-  "returnValue": {},
+  "returnValue": {
+    "buttonActive": { "type": { "name": "boolean", "description": "boolean" }, "required": true },
+    "buttonFocusVisible": {
+      "type": { "name": "boolean", "description": "boolean" },
+      "required": true
+    },
+    "contextValue": {
+      "type": {
+        "name": "SelectProviderValue&lt;Value&gt;",
+        "description": "SelectProviderValue&lt;Value&gt;"
+      },
+      "required": true
+    },
+    "disabled": { "type": { "name": "boolean", "description": "boolean" }, "required": true },
+    "dispatch": {
+      "type": {
+        "name": "(action: ListAction&lt;Value&gt; | SelectAction) =&gt; void",
+        "description": "(action: ListAction&lt;Value&gt; | SelectAction) =&gt; void"
+      },
+      "required": true
+    },
+    "getButtonProps": {
+      "type": {
+        "name": "&lt;OtherHandlers extends EventHandlers = {}&gt;(otherHandlers?: OtherHandlers) =&gt; UseSelectButtonSlotProps&lt;OtherHandlers&gt;",
+        "description": "&lt;OtherHandlers extends EventHandlers = {}&gt;(otherHandlers?: OtherHandlers) =&gt; UseSelectButtonSlotProps&lt;OtherHandlers&gt;"
+      },
+      "required": true
+    },
+    "getListboxProps": {
+      "type": {
+        "name": "&lt;OtherHandlers extends EventHandlers = {}&gt;(otherHandlers?: OtherHandlers) =&gt; UseSelectListboxSlotProps&lt;OtherHandlers&gt;",
+        "description": "&lt;OtherHandlers extends EventHandlers = {}&gt;(otherHandlers?: OtherHandlers) =&gt; UseSelectListboxSlotProps&lt;OtherHandlers&gt;"
+      },
+      "required": true
+    },
+    "getOptionMetadata": {
+      "type": {
+        "name": "(optionValue: Value) =&gt; SelectOption&lt;Value&gt; | undefined",
+        "description": "(optionValue: Value) =&gt; SelectOption&lt;Value&gt; | undefined"
+      },
+      "required": true
+    },
+    "highlightedOption": {
+      "type": { "name": "Value | null", "description": "Value | null" },
+      "required": true
+    },
+    "open": { "type": { "name": "boolean", "description": "boolean" }, "required": true },
+    "options": { "type": { "name": "Value[]", "description": "Value[]" }, "required": true },
+    "value": {
+      "type": {
+        "name": "SelectValue&lt;Value, Multiple&gt;",
+        "description": "SelectValue&lt;Value, Multiple&gt;"
+      },
+      "required": true
+    }
+  },
   "name": "useSelect",
   "filename": "/packages/mui-base/src/useSelect/useSelect.ts",
   "demos": "<ul><li><a href=\"/base/react-select/#hooks\">Unstyled Select</a></li></ul>"
diff --git a/docs/pages/base/api/use-tab-panel.json b/docs/pages/base/api/use-tab-panel.json
index c26a0cfc8c7dd0..99426daf8a3639 100644
--- a/docs/pages/base/api/use-tab-panel.json
+++ b/docs/pages/base/api/use-tab-panel.json
@@ -1,9 +1,7 @@
 {
   "parameters": {
-    "value": {
-      "type": { "name": "number | string", "description": "number | string" },
-      "required": true
-    }
+    "id": { "type": { "name": "string", "description": "string" } },
+    "value": { "type": { "name": "number | string", "description": "number | string" } }
   },
   "returnValue": {
     "getRootProps": {
diff --git a/docs/pages/base/api/use-tab.json b/docs/pages/base/api/use-tab.json
index 3747380915540d..10d3634a479d70 100644
--- a/docs/pages/base/api/use-tab.json
+++ b/docs/pages/base/api/use-tab.json
@@ -1,10 +1,7 @@
 {
   "parameters": {
-    "ref": {
-      "type": { "name": "React.Ref&lt;any&gt;", "description": "React.Ref&lt;any&gt;" },
-      "required": true
-    },
-    "disabled": { "type": { "name": "boolean", "description": "boolean" }, "default": "false" },
+    "disabled": { "type": { "name": "boolean", "description": "boolean" } },
+    "id": { "type": { "name": "string", "description": "string" } },
     "onChange": {
       "type": {
         "name": "(event: React.SyntheticEvent, value: number | string) =&gt; void",
@@ -14,22 +11,11 @@
     "onClick": {
       "type": { "name": "React.MouseEventHandler", "description": "React.MouseEventHandler" }
     },
-    "onFocus": {
-      "type": { "name": "React.FocusEventHandler", "description": "React.FocusEventHandler" }
-    },
+    "ref": { "type": { "name": "React.Ref&lt;any&gt;", "description": "React.Ref&lt;any&gt;" } },
     "value": { "type": { "name": "number | string", "description": "number | string" } }
   },
   "returnValue": {
-    "active": {
-      "type": { "name": "boolean", "description": "boolean" },
-      "default": "false",
-      "required": true
-    },
-    "disabled": {
-      "type": { "name": "boolean", "description": "boolean" },
-      "default": "false",
-      "required": true
-    },
+    "active": { "type": { "name": "boolean", "description": "boolean" }, "required": true },
     "focusVisible": { "type": { "name": "boolean", "description": "boolean" }, "required": true },
     "getRootProps": {
       "type": {
@@ -38,6 +24,8 @@
       },
       "required": true
     },
+    "highlighted": { "type": { "name": "boolean", "description": "boolean" }, "required": true },
+    "index": { "type": { "name": "number", "description": "number" }, "required": true },
     "selected": { "type": { "name": "boolean", "description": "boolean" }, "required": true },
     "setFocusVisible": {
       "type": {
@@ -45,7 +33,8 @@
         "description": "React.Dispatch&lt;React.SetStateAction&lt;boolean&gt;&gt;"
       },
       "required": true
-    }
+    },
+    "totalTabsCount": { "type": { "name": "number", "description": "number" }, "required": true }
   },
   "name": "useTab",
   "filename": "/packages/mui-base/src/useTab/useTab.ts",
diff --git a/docs/pages/base/api/use-tabs-list.json b/docs/pages/base/api/use-tabs-list.json
index 847034026445a5..3c782a740b3fd3 100644
--- a/docs/pages/base/api/use-tabs-list.json
+++ b/docs/pages/base/api/use-tabs-list.json
@@ -3,12 +3,20 @@
     "ref": {
       "type": { "name": "React.Ref&lt;unknown&gt;", "description": "React.Ref&lt;unknown&gt;" },
       "required": true
-    },
-    "aria-label": { "type": { "name": "string", "description": "string" } },
-    "aria-labelledby": { "type": { "name": "string", "description": "string" } },
-    "children": { "type": { "name": "React.ReactNode", "description": "React.ReactNode" } }
+    }
   },
   "returnValue": {
+    "contextValue": {
+      "type": { "name": "TabsListProviderValue", "description": "TabsListProviderValue" },
+      "required": true
+    },
+    "dispatch": {
+      "type": {
+        "name": "(action: ListAction&lt;string | number&gt;) =&gt; void",
+        "description": "(action: ListAction&lt;string | number&gt;) =&gt; void"
+      },
+      "required": true
+    },
     "getRootProps": {
       "type": {
         "name": "&lt;TOther extends Record&lt;string, any&gt; = {}&gt;(externalProps?: TOther) =&gt; UseTabsListRootSlotProps&lt;TOther&gt;",
@@ -16,6 +24,10 @@
       },
       "required": true
     },
+    "highlightedValue": {
+      "type": { "name": "string | number | null", "description": "string | number | null" },
+      "required": true
+    },
     "isRtl": {
       "type": { "name": "boolean", "description": "boolean" },
       "default": "false",
@@ -29,15 +41,8 @@
       "default": "'horizontal'",
       "required": true
     },
-    "processChildren": {
-      "type": {
-        "name": "() =&gt; React.ReactElement&lt;any, string | React.JSXElementConstructor&lt;any&gt;&gt;[] | null | undefined",
-        "description": "() =&gt; React.ReactElement&lt;any, string | React.JSXElementConstructor&lt;any&gt;&gt;[] | null | undefined"
-      },
-      "required": true
-    },
-    "value": {
-      "type": { "name": "string | number | false", "description": "string | number | false" },
+    "selectedValue": {
+      "type": { "name": "string | number | null", "description": "string | number | null" },
       "required": true
     }
   },
diff --git a/docs/pages/base/api/use-tabs.json b/docs/pages/base/api/use-tabs.json
index 979d10a730c013..9321bb2f5ca546 100644
--- a/docs/pages/base/api/use-tabs.json
+++ b/docs/pages/base/api/use-tabs.json
@@ -1,7 +1,7 @@
 {
   "parameters": {
     "defaultValue": {
-      "type": { "name": "string | number | false", "description": "string | number | false" }
+      "type": { "name": "string | number | null", "description": "string | number | null" }
     },
     "direction": {
       "type": {
@@ -12,8 +12,8 @@
     },
     "onChange": {
       "type": {
-        "name": "(event: React.SyntheticEvent, value: number | string | boolean) =&gt; void",
-        "description": "(event: React.SyntheticEvent, value: number | string | boolean) =&gt; void"
+        "name": "(event: React.SyntheticEvent | null, value: number | string | null) =&gt; void",
+        "description": "(event: React.SyntheticEvent | null, value: number | string | null) =&gt; void"
       }
     },
     "orientation": {
@@ -25,12 +25,12 @@
     },
     "selectionFollowsFocus": { "type": { "name": "boolean", "description": "boolean" } },
     "value": {
-      "type": { "name": "string | number | false", "description": "string | number | false" }
+      "type": { "name": "string | number | null", "description": "string | number | null" }
     }
   },
   "returnValue": {
-    "tabsContextValue": {
-      "type": { "name": "TabsContextValue", "description": "TabsContextValue" },
+    "contextValue": {
+      "type": { "name": "TabsProviderValue", "description": "TabsProviderValue" },
       "required": true
     }
   },
diff --git a/docs/pages/experiments/base/listbox.tsx b/docs/pages/experiments/base/listbox.tsx
new file mode 100644
index 00000000000000..3d87ee935df0c9
--- /dev/null
+++ b/docs/pages/experiments/base/listbox.tsx
@@ -0,0 +1,229 @@
+/* eslint-disable react/no-danger */
+import * as React from 'react';
+import clsx from 'clsx';
+import useList, { ListContext, useListItem } from '@mui/base/useList';
+
+const styles = `
+  body {
+    padding: 0;
+    margin: 0;
+    font-family: IBM Plex Sans, sans-serif;
+  }
+
+  .list {
+    display: flex;
+    gap: 16px;
+    align-items: center;
+    justify-content: flex-start;
+    max-height: 70vh;
+    padding: 16px;
+    width: 100vw;
+    flex-wrap: wrap;
+    background: linear-gradient(-30deg, #009245, #FCEE21);
+    box-sizing: border-box;
+    margin: 0;
+  }
+
+  .list:focus-visible {
+    outline: none;
+  }
+  
+  .item {
+    width: 50px;
+    height: 50px;
+    flex: 0 0 auto;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border: 1px solid rgba(255, 255, 255, 0.3);
+    border-radius: 4px;
+    box-sizing: border-box;
+    background: linear-gradient(-30deg, #f5f5f5, #fff);
+    font-size: 18px;
+    color: #333;
+    user-select: none;
+    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1), 0 4px 4px -2px rgba(0, 0, 0, 0.15);
+  }
+
+  .item.highlighted:not([tabindex]),
+  .item:focus-visible
+   {
+    outline: 2px solid #fff;
+    outline-offset: 4px;
+  }
+
+  .item.selected {
+    background: linear-gradient(-30deg, #363636, #666);
+    color: #fff;
+  }
+
+  .controls {
+    padding: 16px;
+  }
+
+  .controls > div {
+    margin-bottom: 8px;
+  }
+
+  .controls button {
+    border: 1px solid #999;
+    background: #fff;
+    padding: 8px 16px;
+    border-radius: 4px;
+    font-family: inherit;
+    margin: 0 4px;
+    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1), 0 4px 4px -2px rgba(0, 0, 0, 0.15);
+  }
+
+  .controls button.active {
+    background: #73bc34;
+    color: #fff;
+  }
+
+  .state {
+    padding: 16px;
+    background: #202020;
+    color: #fff;
+  }`;
+
+const items = Array.from({ length: 200 }, (_, i) => i + 1);
+
+const Item = React.forwardRef(function Item(
+  props: React.PropsWithChildren<{ value: number; id?: string }>,
+  ref: React.Ref<HTMLElement>,
+) {
+  const { value: item, id } = props;
+  const { getRootProps, selected, highlighted } = useListItem({ item, ref });
+
+  const itemProps = getRootProps();
+
+  const classes = clsx('item', {
+    highlighted,
+    selected,
+  });
+
+  return (
+    <div {...itemProps} className={classes} id={id}>
+      {item}
+    </div>
+  );
+});
+
+function List() {
+  const [orientation, setOrientation] = React.useState<
+    'horizontal-ltr' | 'horizontal-rtl' | 'vertical'
+  >('horizontal-ltr');
+  const [focusManagement, setFocusManagement] = React.useState<'activeDescendant' | 'DOM'>(
+    'activeDescendant',
+  );
+
+  let flexDirection: React.CSSProperties['flexDirection'];
+  switch (orientation) {
+    case 'horizontal-ltr':
+      flexDirection = 'row';
+      break;
+    case 'horizontal-rtl':
+      flexDirection = 'row-reverse';
+      break;
+    default:
+      flexDirection = 'column';
+      break;
+  }
+
+  const itemRefs = React.useRef(new Map<number, HTMLElement>());
+  const listbox = useList({
+    items,
+    getItemDomElement: React.useCallback((item: number) => itemRefs.current.get(item) || null, []),
+    getItemId: React.useCallback((item: number) => `item-${item}`, []),
+    orientation,
+    focusManagement,
+    selectionMode: 'single',
+  });
+
+  const {
+    getRootProps,
+    contextValue,
+    state: { selectedValues, highlightedValue },
+  } = listbox;
+
+  const handleItemRef = React.useCallback((item: number, node: HTMLElement | null) => {
+    if (node) {
+      itemRefs.current.set(item, node);
+    } else {
+      itemRefs.current.delete(item);
+    }
+  }, []);
+
+  return (
+    <React.Fragment>
+      <div className="controls">
+        <div>
+          Orientation:&nbsp;
+          <button
+            type="button"
+            onClick={() => setOrientation('horizontal-ltr')}
+            className={orientation === 'horizontal-ltr' ? 'active' : ''}
+          >
+            horizontal-ltr
+          </button>
+          <button
+            type="button"
+            onClick={() => setOrientation('horizontal-rtl')}
+            className={orientation === 'horizontal-rtl' ? 'active' : ''}
+          >
+            horizontal-rtl
+          </button>
+          <button
+            type="button"
+            onClick={() => setOrientation('vertical')}
+            className={orientation === 'vertical' ? 'active' : ''}
+          >
+            vertical
+          </button>
+        </div>
+        <div>
+          Focus management:&nbsp;
+          <button
+            type="button"
+            onClick={() => setFocusManagement('activeDescendant')}
+            className={focusManagement === 'activeDescendant' ? 'active' : ''}
+          >
+            activeDescendant
+          </button>
+          <button
+            type="button"
+            onClick={() => setFocusManagement('DOM')}
+            className={focusManagement === 'DOM' ? 'active' : ''}
+          >
+            DOM
+          </button>
+        </div>
+      </div>
+      <div className="state">
+        <pre>Selected: {selectedValues.join(', ')}</pre>
+        <pre>Highlighted: {highlightedValue ?? '(none)'}</pre>
+      </div>
+      <div {...getRootProps()} className="list" style={{ flexDirection }}>
+        <ListContext.Provider value={contextValue}>
+          {items.map((item) => (
+            <Item
+              key={item}
+              value={item}
+              ref={(node) => handleItemRef(item, node)}
+              id={`item-${item}`}
+            />
+          ))}
+        </ListContext.Provider>
+      </div>
+    </React.Fragment>
+  );
+}
+
+export default function Demo() {
+  return (
+    <React.Fragment>
+      <style dangerouslySetInnerHTML={{ __html: styles }} />
+      <List />
+    </React.Fragment>
+  );
+}
diff --git a/docs/pages/experiments/base/tabs.tsx b/docs/pages/experiments/base/tabs.tsx
new file mode 100644
index 00000000000000..3775f432fbf1aa
--- /dev/null
+++ b/docs/pages/experiments/base/tabs.tsx
@@ -0,0 +1,177 @@
+import * as React from 'react';
+import { styled } from '@mui/system';
+import TabsUnstyled from '@mui/base/TabsUnstyled';
+import TabsListUnstyled from '@mui/base/TabsListUnstyled';
+import TabPanelUnstyled from '@mui/base/TabPanelUnstyled';
+import TabUnstyled, { tabUnstyledClasses } from '@mui/base/TabUnstyled';
+
+const blue = {
+  50: '#F0F7FF',
+  100: '#C2E0FF',
+  200: '#80BFFF',
+  300: '#66B2FF',
+  400: '#3399FF',
+  500: '#007FFF',
+  600: '#0072E5',
+  700: '#0059B2',
+  800: '#004C99',
+  900: '#003A75',
+};
+
+const grey = {
+  50: '#f6f8fa',
+  100: '#eaeef2',
+  200: '#d0d7de',
+  300: '#afb8c1',
+  400: '#8c959f',
+  500: '#6e7781',
+  600: '#57606a',
+  700: '#424a53',
+  800: '#32383f',
+  900: '#24292f',
+};
+
+const Tab = styled(TabUnstyled)`
+  font-family: IBM Plex Sans, sans-serif;
+  color: #fff;
+  cursor: pointer;
+  font-size: 0.875rem;
+  font-weight: 600;
+  background-color: transparent;
+  width: 100%;
+  padding: 10px 12px;
+  margin: 6px 6px;
+  border: none;
+  border-radius: 7px;
+  display: flex;
+  justify-content: center;
+
+  &:hover {
+    background-color: ${blue[400]};
+  }
+
+  &:focus {
+    color: #fff;
+    outline: 3px solid ${blue[200]};
+  }
+
+  &.${tabUnstyledClasses.selected} {
+    background-color: #fff;
+    color: ${blue[600]};
+  }
+
+  &.${tabUnstyledClasses.disabled} {
+    opacity: 0.5;
+  }
+`;
+
+const TabPanel = styled(TabPanelUnstyled)(
+  ({ theme }) => `
+  width: 100%;
+  font-family: IBM Plex Sans, sans-serif;
+  font-size: 0.875rem;
+  padding: 20px 12px;
+  background: ${theme.palette.mode === 'dark' ? grey[900] : '#fff'};
+  border: 1px solid ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
+  border-radius: 12px;
+  box-sizing: border-box;
+  margin-bottom: 16px;
+  `,
+);
+
+const TabsList = styled(TabsListUnstyled)(
+  ({ theme }) => `
+  min-width: 400px;
+  background-color: ${blue[500]};
+  border-radius: 12px;
+  margin-bottom: 16px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  align-content: space-between;
+  box-shadow: 0px 4px 30px ${theme.palette.mode === 'dark' ? grey[900] : grey[200]};
+  `,
+);
+
+function MoreTabs() {
+  return (
+    <React.Fragment>
+      <Tab value="settings">Settings</Tab>
+      <Tab disabled value="notifications">
+        Notifications
+      </Tab>
+      <Tab value="nested">Nested tabs</Tab>
+    </React.Fragment>
+  );
+}
+
+function MoreTabPanels() {
+  return (
+    <React.Fragment>
+      <TabPanel value="settings">Settings page</TabPanel>
+      <TabPanel value="notifications">Notifications page</TabPanel>
+      <TabPanel value="nested">
+        <TabsUnstyled defaultValue="my-account">
+          <TabsList>
+            <Tab value="my-account">My account</Tab>
+            <Tab value="profile">Profile</Tab>
+            <Tab value="language">Language</Tab>
+            <MoreTabs />
+          </TabsList>
+          <TabPanel value="my-account">My account page</TabPanel>
+          <TabPanel value="profile">Profile page</TabPanel>
+          <TabPanel value="language">Language page</TabPanel>
+          <MoreTabPanels />
+        </TabsUnstyled>
+      </TabPanel>
+    </React.Fragment>
+  );
+}
+
+export default function UnstyledTabsIntroduction() {
+  const [selectionFollowsFocus, setSelectionFollowsFocus] = React.useState(false);
+  const [selectedTab, setSelectedTab] = React.useState<string | number>('profile');
+
+  const handleTabChange = (
+    event: React.SyntheticEvent | null,
+    newValue: string | number | null,
+  ) => {
+    setSelectedTab(newValue!);
+  };
+
+  return (
+    <React.Fragment>
+      <label>
+        <input
+          type="checkbox"
+          checked={selectionFollowsFocus}
+          onChange={(e) => setSelectionFollowsFocus(e.target.checked)}
+        />{' '}
+        Selection follows focus
+      </label>
+      <TabsUnstyled
+        value={selectedTab}
+        onChange={handleTabChange}
+        selectionFollowsFocus={selectionFollowsFocus}
+      >
+        <TabsList>
+          <Tab value="my-account">My account</Tab>
+          <Tab value="profile">Profile</Tab>
+          <Tab value="language">Language</Tab>
+          <MoreTabs />
+        </TabsList>
+        <TabPanel value="my-account">My account page</TabPanel>
+        <TabPanel value="profile">Profile page</TabPanel>
+        <TabPanel value="language">Language page</TabPanel>
+        <MoreTabPanels />
+
+        <TabsList>
+          <Tab value="my-account">My account</Tab>
+          <Tab value="profile">Profile</Tab>
+          <Tab value="language">Language</Tab>
+          <MoreTabs />
+        </TabsList>
+      </TabsUnstyled>
+    </React.Fragment>
+  );
+}
diff --git a/docs/pages/joy-ui/api/menu-list.json b/docs/pages/joy-ui/api/menu-list.json
index cbc63f4adf04e5..73c8b7edbf5771 100644
--- a/docs/pages/joy-ui/api/menu-list.json
+++ b/docs/pages/joy-ui/api/menu-list.json
@@ -3,7 +3,7 @@
     "actions": {
       "type": {
         "name": "union",
-        "description": "func<br>&#124;&nbsp;{ current?: { highlightFirstItem: func, highlightLastItem: func } }"
+        "description": "func<br>&#124;&nbsp;{ current?: { dispatch: func } }"
       }
     },
     "color": {
diff --git a/docs/pages/joy-ui/api/option.json b/docs/pages/joy-ui/api/option.json
index b814358bfa4ded..4a11447f0b5820 100644
--- a/docs/pages/joy-ui/api/option.json
+++ b/docs/pages/joy-ui/api/option.json
@@ -1,5 +1,6 @@
 {
   "props": {
+    "value": { "type": { "name": "any" }, "required": true },
     "children": { "type": { "name": "node" } },
     "color": {
       "type": {
@@ -17,7 +18,6 @@
         "description": "Array&lt;func<br>&#124;&nbsp;object<br>&#124;&nbsp;bool&gt;<br>&#124;&nbsp;func<br>&#124;&nbsp;object"
       }
     },
-    "value": { "type": { "name": "any" } },
     "variant": {
       "type": {
         "name": "union",
diff --git a/docs/pages/joy-ui/api/tabs.json b/docs/pages/joy-ui/api/tabs.json
index 0dc729a582c0b1..918ae93f83b337 100644
--- a/docs/pages/joy-ui/api/tabs.json
+++ b/docs/pages/joy-ui/api/tabs.json
@@ -9,12 +9,7 @@
       "default": "'neutral'"
     },
     "component": { "type": { "name": "elementType" } },
-    "defaultValue": {
-      "type": {
-        "name": "union",
-        "description": "false<br>&#124;&nbsp;number<br>&#124;&nbsp;string"
-      }
-    },
+    "defaultValue": { "type": { "name": "union", "description": "number<br>&#124;&nbsp;string" } },
     "direction": {
       "type": { "name": "enum", "description": "'ltr'<br>&#124;&nbsp;'rtl'" },
       "default": "'ltr'"
@@ -38,12 +33,7 @@
         "description": "Array&lt;func<br>&#124;&nbsp;object<br>&#124;&nbsp;bool&gt;<br>&#124;&nbsp;func<br>&#124;&nbsp;object"
       }
     },
-    "value": {
-      "type": {
-        "name": "union",
-        "description": "false<br>&#124;&nbsp;number<br>&#124;&nbsp;string"
-      }
-    },
+    "value": { "type": { "name": "union", "description": "number<br>&#124;&nbsp;string" } },
     "variant": {
       "type": {
         "name": "union",
diff --git a/docs/translations/api-docs-joy/tabs/tabs.json b/docs/translations/api-docs-joy/tabs/tabs.json
index 4748be888e5deb..efb5e7a1aa1d57 100644
--- a/docs/translations/api-docs-joy/tabs/tabs.json
+++ b/docs/translations/api-docs-joy/tabs/tabs.json
@@ -11,7 +11,7 @@
     "selectionFollowsFocus": "If <code>true</code> the selected tab changes on focus. Otherwise it only changes on activation.",
     "size": "The size of the component. To learn how to add custom sizes to the component, check out <a href=\"/joy-ui/customization/themed-components/#extend-sizes\">Themed components—Extend sizes</a>.",
     "sx": "The system prop that allows defining system overrides as well as additional CSS styles. See the <a href=\"/system/getting-started/the-sx-prop/\">`sx` page</a> for more details.",
-    "value": "The value of the currently selected <code>Tab</code>. If you don&#39;t want any selected <code>Tab</code>, you can set this prop to <code>false</code>.",
+    "value": "The value of the currently selected <code>Tab</code>. If you don&#39;t want any selected <code>Tab</code>, you can set this prop to <code>null</code>.",
     "variant": "The <a href=\"https://mui.com/joy-ui/main-features/global-variants/\">global variant</a> to use. To learn how to add your own variants, check out <a href=\"/joy-ui/customization/themed-components/#extend-variants\">Themed components—Extend variants</a>."
   },
   "classDescriptions": {
diff --git a/docs/translations/api-docs/menu-unstyled/menu-unstyled.json b/docs/translations/api-docs/menu-unstyled/menu-unstyled.json
index bf20a75201ef20..37e00b6c1c4d9e 100644
--- a/docs/translations/api-docs/menu-unstyled/menu-unstyled.json
+++ b/docs/translations/api-docs/menu-unstyled/menu-unstyled.json
@@ -4,8 +4,7 @@
     "actions": "A ref with imperative actions. It allows to select the first or last menu item.",
     "anchorEl": "An HTML element, <a href=\"https://popper.js.org/docs/v2/virtual-elements/\">virtualElement</a>, or a function that returns either. It&#39;s used to set the position of the popper.",
     "component": "The component used for the root node. Either a string to use a HTML element or a component.",
-    "keepMounted": "Always keep the menu in the DOM. This prop can be useful in SEO situation or when you want to maximize the responsiveness of the Menu.",
-    "onClose": "Triggered when focus leaves the menu and the menu should close.",
+    "onOpenChange": "Triggered when focus leaves the menu and the menu should close.",
     "open": "Controls whether the menu is displayed.",
     "slotProps": "The props used for each slot inside the Menu.",
     "slots": "The components used for each slot inside the Menu. Either a string to use a HTML element or a component. See <a href=\"#slots\">Slots API</a> below for more details."
diff --git a/docs/translations/api-docs/select-unstyled/select-unstyled.json b/docs/translations/api-docs/select-unstyled/select-unstyled.json
index 009c7f2ea7e0c9..590bbb9533d5fc 100644
--- a/docs/translations/api-docs/select-unstyled/select-unstyled.json
+++ b/docs/translations/api-docs/select-unstyled/select-unstyled.json
@@ -7,9 +7,9 @@
     "defaultValue": "The default selected value. Use when the component is not controlled.",
     "disabled": "If <code>true</code>, the select is disabled.",
     "getSerializedValue": "A function to convert the currently selected value to a string. Used to set a value of a hidden input associated with the select, so that the selected value can be posted with a form.",
-    "listboxId": "<code>id</code> attribute of the listbox element. Also used to derive the <code>id</code> attributes of options.",
+    "listboxId": "<code>id</code> attribute of the listbox element.",
     "listboxOpen": "Controls the open state of the select&#39;s listbox.",
-    "multiple": "If <code>true</code>, selecting multiple values is allowed.",
+    "multiple": "If <code>true</code>, selecting multiple values is allowed. This affects the type of the <code>value</code>, <code>defaultValue</code>, and <code>onChange</code> props.",
     "name": "Name of the element. For example used by the server to identify the fields in form submits. If the name is provided, the component will render a hidden input element that can be submitted to a server.",
     "onChange": "Callback fired when an option is selected.",
     "onListboxOpenChange": "Callback fired when the component requests to be opened. Use in controlled mode (see listboxOpen).",
diff --git a/docs/translations/api-docs/tab-panel-unstyled/tab-panel-unstyled.json b/docs/translations/api-docs/tab-panel-unstyled/tab-panel-unstyled.json
index c6d2ecac00758f..fa22ca26bbdc73 100644
--- a/docs/translations/api-docs/tab-panel-unstyled/tab-panel-unstyled.json
+++ b/docs/translations/api-docs/tab-panel-unstyled/tab-panel-unstyled.json
@@ -5,7 +5,7 @@
     "component": "The component used for the root node. Either a string to use a HTML element or a component.",
     "slotProps": "The props used for each slot inside the TabPanel.",
     "slots": "The components used for each slot inside the TabPanel. Either a string to use a HTML element or a component. See <a href=\"#slots\">Slots API</a> below for more details.",
-    "value": "The value of the TabPanel. It will be shown when the Tab with the corresponding value is selected."
+    "value": "The value of the TabPanel. It will be shown when the Tab with the corresponding value is selected. If not provided, it will fall back to the index of the panel. It is recommended to explicitly provide it, as it&#39;s required for the tab panel to be rendered on the server."
   },
   "classDescriptions": {
     "root": { "description": "Class name applied to the root element." },
diff --git a/docs/translations/api-docs/tabs-unstyled/tabs-unstyled.json b/docs/translations/api-docs/tabs-unstyled/tabs-unstyled.json
index 5de48aa89fad9b..fe065328796929 100644
--- a/docs/translations/api-docs/tabs-unstyled/tabs-unstyled.json
+++ b/docs/translations/api-docs/tabs-unstyled/tabs-unstyled.json
@@ -10,7 +10,7 @@
     "selectionFollowsFocus": "If <code>true</code> the selected tab changes on focus. Otherwise it only changes on activation.",
     "slotProps": "The props used for each slot inside the Tabs.",
     "slots": "The components used for each slot inside the Tabs. Either a string to use a HTML element or a component. See <a href=\"#slots\">Slots API</a> below for more details.",
-    "value": "The value of the currently selected <code>Tab</code>. If you don&#39;t want any selected <code>Tab</code>, you can set this prop to <code>false</code>."
+    "value": "The value of the currently selected <code>Tab</code>. If you don&#39;t want any selected <code>Tab</code>, you can set this prop to <code>null</code>."
   },
   "classDescriptions": {
     "root": { "description": "Class name applied to the root element." },
diff --git a/docs/translations/api-docs/use-button/use-button.json b/docs/translations/api-docs/use-button/use-button.json
index a1fefeab7fc5a6..15688c68bc0ed6 100644
--- a/docs/translations/api-docs/use-button/use-button.json
+++ b/docs/translations/api-docs/use-button/use-button.json
@@ -10,6 +10,7 @@
     "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.",
     "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 2c2401f077ace3..5c2971b849e460 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
@@ -5,6 +5,9 @@
     "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.",
-    "highlighted": "If <code>true</code>, the component is being highlighted."
+    "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.",
+    "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 4dbb8515560912..28fc5be0ea60b0 100644
--- a/docs/translations/api-docs/use-menu/use-menu.json
+++ b/docs/translations/api-docs/use-menu/use-menu.json
@@ -1,12 +1,18 @@
 {
   "hookDescription": "",
-  "parametersDescriptions": {},
+  "parametersDescriptions": {
+    "defaultOpen": "If <code>true</code>, the menu will be initially open.",
+    "listboxId": "Id of the menu listbox.",
+    "listboxRef": "Ref of the menu listbox.",
+    "onOpenChange": "Callback fired when the menu is opened or closed.",
+    "open": "If <code>true</code>, the menu will be open.\nThis is the controlled equivalent of the <code>defaultOpen</code> parameter."
+  },
   "returnValueDescriptions": {
-    "contextValue": "The value for the menu context.",
+    "contextValue": "The value to be passed into the MenuProvider.",
+    "dispatch": "Action dispatcher for the menu component.\nAllows to programmatically control the menu.",
     "getListboxProps": "Resolver for the listbox component's props.",
-    "highlightedOption": "The highlighted option in the menu listbox.",
-    "highlightFirstItem": "Callback for highlighting the first item in the menu listbox.",
-    "highlightLastItem": "Callback for highlighting the last item in the menu listbox.",
-    "menuItems": "Items in the menu listbox."
+    "highlightedValue": "The highlighted option in the menu listbox.",
+    "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 e3eb65c6e43006..8c89382e26739d 100644
--- a/docs/translations/api-docs/use-select/use-select.json
+++ b/docs/translations/api-docs/use-select/use-select.json
@@ -1 +1,18 @@
-{ "hookDescription": "", "parametersDescriptions": {}, "returnValueDescriptions": {} }
+{
+  "hookDescription": "",
+  "parametersDescriptions": {},
+  "returnValueDescriptions": {
+    "buttonActive": "If <code>true</code>, the trigger button is active (pressed).",
+    "buttonFocusVisible": "If <code>true</code>, the trigger button has a visible focus.",
+    "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.",
+    "getButtonProps": "Resolver for the button slot's props.",
+    "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.",
+    "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-tab-panel/use-tab-panel.json b/docs/translations/api-docs/use-tab-panel/use-tab-panel.json
index af377df9d4eba7..f1ba95b8808dd8 100644
--- a/docs/translations/api-docs/use-tab-panel/use-tab-panel.json
+++ b/docs/translations/api-docs/use-tab-panel/use-tab-panel.json
@@ -1,6 +1,7 @@
 {
   "hookDescription": "",
   "parametersDescriptions": {
+    "id": "The id of the TabPanel.",
     "value": "The value of the TabPanel. It will be shown when the Tab with the corresponding value is selected."
   },
   "returnValueDescriptions": {
diff --git a/docs/translations/api-docs/use-tab/use-tab.json b/docs/translations/api-docs/use-tab/use-tab.json
index 7006c575c81803..0f4fd4712898e2 100644
--- a/docs/translations/api-docs/use-tab/use-tab.json
+++ b/docs/translations/api-docs/use-tab/use-tab.json
@@ -1,16 +1,21 @@
 {
   "hookDescription": "",
   "parametersDescriptions": {
-    "disabled": "If <code>true</code>, the component is disabled.",
-    "onChange": "Callback invoked when new value is being set.",
-    "value": "You can provide your own value. Otherwise, it falls back to the child position index."
+    "disabled": "If <code>true</code>, the tab will be disabled.",
+    "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.",
+    "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": {
-    "active": "If <code>true</code>, the component will be active.",
-    "disabled": "If <code>true</code>, the component will be disabled.",
-    "focusVisible": "If <code>true</code>, the tab's focus will be visible.",
+    "active": "If <code>true</code>, the tab is active (as in </code>:active</code> pseudo-class; in other words, pressed).",
+    "focusVisible": "If <code>true</code>, the tab has visible focus.\nThis is a workaround for browsers that do not support this feature natively.",
     "getRootProps": "Resolver for the root slot's props.",
-    "selected": "If <code>true</code>, the tab will be selected.",
-    "setFocusVisible": "Callback for setting the <code>focusVisible</code> param."
+    "highlighted": "If <code>true</code>, the tab is highlighted.",
+    "index": "0-based index of the tab in the list of tabs.",
+    "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 a63696dd8c378d..eb1cbcd966bb1a 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,11 +1,13 @@
 {
   "hookDescription": "",
-  "parametersDescriptions": { "children": "The content of the component." },
+  "parametersDescriptions": { "ref": "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.",
     "getRootProps": "Resolver for the root slot's props.",
+    "highlightedValue": "The value of the currently highlighted tab.",
     "isRtl": "If <code>true</code>, it will indicate that the text's direction in right-to-left.",
     "orientation": "The component orientation (layout flow direction).",
-    "processChildren": "Callback for processing the children of the tabs list. It adds the necessary attributes for correct a11y and navigation.",
-    "value": "The value of the currently selected <code>Tab</code>."
+    "selectedValue": "The value of the currently selected tab."
   }
 }
diff --git a/docs/translations/api-docs/use-tabs/use-tabs.json b/docs/translations/api-docs/use-tabs/use-tabs.json
index 5fc66c64729d2d..b81de1149c3253 100644
--- a/docs/translations/api-docs/use-tabs/use-tabs.json
+++ b/docs/translations/api-docs/use-tabs/use-tabs.json
@@ -9,6 +9,6 @@
     "value": "The value of the currently selected <code>Tab</code>.\nIf you don't want any selected <code>Tab</code>, you can set this prop to <code>false</code>."
   },
   "returnValueDescriptions": {
-    "tabsContextValue": "Returns the values to be passed to the tabs context provider."
+    "contextValue": "Returns the values to be passed to the tabs provider."
   }
 }
diff --git a/packages/mui-base/src/MenuItemUnstyled/MenuItemUnstyled.test.tsx b/packages/mui-base/src/MenuItemUnstyled/MenuItemUnstyled.test.tsx
index a0523173cf4e1a..1c0602078c39e9 100644
--- a/packages/mui-base/src/MenuItemUnstyled/MenuItemUnstyled.test.tsx
+++ b/packages/mui-base/src/MenuItemUnstyled/MenuItemUnstyled.test.tsx
@@ -1,22 +1,26 @@
 import * as React from 'react';
 import { createMount, createRenderer, describeConformanceUnstyled } from 'test/utils';
 import MenuItemUnstyled, { menuItemUnstyledClasses } from '@mui/base/MenuItemUnstyled';
-import { MenuUnstyledContext } from '@mui/base/MenuUnstyled';
+import { MenuProvider } from '@mui/base/useMenu';
 
 const dummyGetItemState = () => ({
   disabled: false,
   highlighted: false,
   selected: false,
   index: 0,
+  focusable: true,
 });
 
 const testContext = {
-  getItemState: dummyGetItemState,
+  dispatch: () => {},
+  getItemIndex: () => 0,
   getItemProps: () => ({}),
-  registerItem: () => {},
-  unregisterItem: () => {},
+  getItemState: dummyGetItemState,
   open: false,
   registerHighlightChangeHandler: () => () => {},
+  registerItem: () => ({ id: '', deregister: () => {} }),
+  registerSelectionChangeHandler: () => () => {},
+  totalSubitemCount: 0,
 };
 
 describe('<MenuItemUnstyled />', () => {
@@ -26,14 +30,10 @@ describe('<MenuItemUnstyled />', () => {
   describeConformanceUnstyled(<MenuItemUnstyled />, () => ({
     inheritComponent: 'li',
     render: (node) => {
-      return render(
-        <MenuUnstyledContext.Provider value={testContext}>{node}</MenuUnstyledContext.Provider>,
-      );
+      return render(<MenuProvider value={testContext}>{node}</MenuProvider>);
     },
     mount: (node: React.ReactNode) => {
-      const wrapper = mount(
-        <MenuUnstyledContext.Provider value={testContext}>{node}</MenuUnstyledContext.Provider>,
-      );
+      const wrapper = mount(<MenuProvider value={testContext}>{node}</MenuProvider>);
       return wrapper.childAt(0);
     },
     refInstanceof: window.HTMLLIElement,
diff --git a/packages/mui-base/src/MenuItemUnstyled/MenuItemUnstyled.types.ts b/packages/mui-base/src/MenuItemUnstyled/MenuItemUnstyled.types.ts
index 2778f91491daed..ddaeae6637d98a 100644
--- a/packages/mui-base/src/MenuItemUnstyled/MenuItemUnstyled.types.ts
+++ b/packages/mui-base/src/MenuItemUnstyled/MenuItemUnstyled.types.ts
@@ -62,13 +62,6 @@ export type MenuItemUnstyledProps<
   component?: D;
 };
 
-export interface MenuItemMetadata {
-  id: string;
-  disabled: boolean;
-  label?: string;
-  ref: React.RefObject<HTMLElement>;
-}
-
 export interface MenuItemState {
   disabled: boolean;
   highlighted: boolean;
diff --git a/packages/mui-base/src/MenuUnstyled/MenuUnstyled.tsx b/packages/mui-base/src/MenuUnstyled/MenuUnstyled.tsx
index e795b3ea090d6e..4ad11802979ece 100644
--- a/packages/mui-base/src/MenuUnstyled/MenuUnstyled.tsx
+++ b/packages/mui-base/src/MenuUnstyled/MenuUnstyled.tsx
@@ -2,7 +2,6 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import { HTMLElementType, refType } from '@mui/utils';
 import { OverridableComponent } from '@mui/types';
-import MenuUnstyledContext from './MenuUnstyledContext';
 import {
   MenuUnstyledOwnerState,
   MenuUnstyledProps,
@@ -16,6 +15,7 @@ import PopperUnstyled from '../PopperUnstyled';
 import useSlotProps from '../utils/useSlotProps';
 import { useClassNamesOverride } from '../utils/ClassNameConfigurator';
 import { WithOptionalOwnerState } from '../utils';
+import MenuProvider from '../useMenu/MenuProvider';
 
 function useUtilityClasses(ownerState: MenuUnstyledOwnerState) {
   const { open } = ownerState;
@@ -44,34 +44,31 @@ const MenuUnstyled = React.forwardRef(function MenuUnstyled<
     anchorEl,
     children,
     component,
-    keepMounted = false,
+    defaultOpen,
     listboxId,
-    onClose,
-    open = false,
+    onOpenChange,
+    open: openProp,
     slotProps = {},
     slots = {},
     ...other
   } = props;
 
-  const { contextValue, getListboxProps, highlightFirstItem, highlightLastItem } = useMenu({
-    open,
-    onClose,
+  const { contextValue, getListboxProps, dispatch, open } = useMenu({
+    defaultOpen,
+    open: openProp,
+    onOpenChange,
     listboxId,
   });
 
   React.useImperativeHandle(
     actions,
     () => ({
-      highlightFirstItem,
-      highlightLastItem,
+      dispatch,
     }),
-    [highlightFirstItem, highlightLastItem],
+    [dispatch],
   );
 
-  const ownerState: MenuUnstyledOwnerState = {
-    ...props,
-    open,
-  };
+  const ownerState: MenuUnstyledOwnerState = { ...props, open };
 
   const classes = useUtilityClasses(ownerState);
 
@@ -83,7 +80,7 @@ const MenuUnstyled = React.forwardRef(function MenuUnstyled<
     additionalProps: {
       anchorEl,
       open,
-      keepMounted,
+      keepMounted: true,
       role: undefined,
       ref: forwardedRef,
     },
@@ -103,7 +100,7 @@ const MenuUnstyled = React.forwardRef(function MenuUnstyled<
   return (
     <Root {...rootProps}>
       <Listbox {...listboxProps}>
-        <MenuUnstyledContext.Provider value={contextValue}>{children}</MenuUnstyledContext.Provider>
+        <MenuProvider value={contextValue}>{children}</MenuProvider>
       </Listbox>
     </Root>
   );
@@ -139,12 +136,9 @@ MenuUnstyled.propTypes /* remove-proptypes */ = {
    */
   component: PropTypes.elementType,
   /**
-   * Always keep the menu in the DOM.
-   * This prop can be useful in SEO situation or when you want to maximize the responsiveness of the Menu.
-   *
-   * @default false
+   * @ignore
    */
-  keepMounted: PropTypes.bool,
+  defaultOpen: PropTypes.bool,
   /**
    * @ignore
    */
@@ -152,7 +146,7 @@ MenuUnstyled.propTypes /* remove-proptypes */ = {
   /**
    * Triggered when focus leaves the menu and the menu should close.
    */
-  onClose: PropTypes.func,
+  onOpenChange: PropTypes.func,
   /**
    * Controls whether the menu is displayed.
    * @default false
diff --git a/packages/mui-base/src/MenuUnstyled/MenuUnstyled.types.ts b/packages/mui-base/src/MenuUnstyled/MenuUnstyled.types.ts
index 9d5c3de8be473b..757e0c1a5e78f0 100644
--- a/packages/mui-base/src/MenuUnstyled/MenuUnstyled.types.ts
+++ b/packages/mui-base/src/MenuUnstyled/MenuUnstyled.types.ts
@@ -3,13 +3,13 @@ import * as React from 'react';
 import PopperUnstyled, { PopperUnstyledProps } from '../PopperUnstyled';
 import { SlotComponentProps } from '../utils';
 import { UseMenuListboxSlotProps } from '../useMenu';
+import { ListAction } from '../useList';
 
 export interface MenuUnstyledRootSlotPropsOverrides {}
 export interface MenuUnstyledListboxSlotPropsOverrides {}
 
 export interface MenuUnstyledActions {
-  highlightFirstItem: () => void;
-  highlightLastItem: () => void;
+  dispatch: (action: ListAction<string>) => void;
 }
 
 export interface MenuUnstyledOwnProps {
@@ -26,18 +26,12 @@ export interface MenuUnstyledOwnProps {
   anchorEl?: PopperUnstyledProps['anchorEl'];
   children?: React.ReactNode;
   className?: string;
-  /**
-   * Always keep the menu in the DOM.
-   * This prop can be useful in SEO situation or when you want to maximize the responsiveness of the Menu.
-   *
-   * @default false
-   */
-  keepMounted?: boolean;
+  defaultOpen?: boolean;
   listboxId?: string;
   /**
    * Triggered when focus leaves the menu and the menu should close.
    */
-  onClose?: () => void;
+  onOpenChange?: (open: boolean) => void;
   /**
    * Controls whether the menu is displayed.
    * @default false
diff --git a/packages/mui-base/src/MenuUnstyled/MenuUnstyledContext.ts b/packages/mui-base/src/MenuUnstyled/MenuUnstyledContext.ts
deleted file mode 100644
index 118dd908f06524..00000000000000
--- a/packages/mui-base/src/MenuUnstyled/MenuUnstyledContext.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-import * as React from 'react';
-import { MenuItemMetadata, MenuItemState } from '../MenuItemUnstyled/MenuItemUnstyled.types';
-
-export interface MenuUnstyledContextType {
-  registerItem: (id: string, metadata: MenuItemMetadata) => void;
-  unregisterItem: (id: string) => void;
-  getItemState: (id: string) => MenuItemState | undefined;
-  getItemProps: (
-    id: string,
-    otherHandlers?: Record<string, React.EventHandler<any>>,
-  ) => Record<string, any>;
-  open: boolean;
-  registerHighlightChangeHandler: (handler: (itemId: string | null) => void) => void;
-}
-
-const MenuUnstyledContext = React.createContext<MenuUnstyledContextType | null>(null);
-MenuUnstyledContext.displayName = 'MenuUnstyledContext';
-
-export default MenuUnstyledContext;
diff --git a/packages/mui-base/src/MenuUnstyled/index.tsx b/packages/mui-base/src/MenuUnstyled/index.tsx
index 1d1d80240d78a4..cdf84f55254728 100644
--- a/packages/mui-base/src/MenuUnstyled/index.tsx
+++ b/packages/mui-base/src/MenuUnstyled/index.tsx
@@ -1,8 +1,5 @@
 export { default } from './MenuUnstyled';
 
-export { default as MenuUnstyledContext } from './MenuUnstyledContext';
-export * from './MenuUnstyledContext';
-
 export { default as menuUnstyledClasses } from './menuUnstyledClasses';
 export * from './menuUnstyledClasses';
 
diff --git a/packages/mui-base/src/MenuUnstyled/useMenuChangeNotifiers.ts b/packages/mui-base/src/MenuUnstyled/useMenuChangeNotifiers.ts
deleted file mode 100644
index ed4bc97edd1849..00000000000000
--- a/packages/mui-base/src/MenuUnstyled/useMenuChangeNotifiers.ts
+++ /dev/null
@@ -1,43 +0,0 @@
-import * as React from 'react';
-import useMessageBus from '../utils/useMessageBus';
-
-const HIGHLIGHT_CHANGE_TOPIC = 'menu:change-highlight';
-
-export interface MenuChangeNotifiers {
-  /**
-   * Calls all the registered highlight change handlers.
-   *
-   * @param newValue - The newly highlighted value.
-   */
-  notifyHighlightChanged: (newValue: string | null) => void;
-
-  registerHighlightChangeHandler: (handler: (newValue: string | null) => void) => () => void;
-}
-
-/**
- * @ignore - internal hook.
- *
- * This hook is used to notify any interested components about changes in the Menu's selection and highlight.
- */
-export default function useMenuChangeNotifiers(): MenuChangeNotifiers {
-  const messageBus = useMessageBus();
-
-  const notifyHighlightChanged = React.useCallback(
-    (newValue: string | null) => {
-      messageBus.publish(HIGHLIGHT_CHANGE_TOPIC, newValue);
-    },
-    [messageBus],
-  );
-
-  const registerHighlightChangeHandler = React.useCallback(
-    (handler: (newValue: string | null) => void) => {
-      return messageBus.subscribe(HIGHLIGHT_CHANGE_TOPIC, handler);
-    },
-    [messageBus],
-  );
-
-  return {
-    notifyHighlightChanged,
-    registerHighlightChangeHandler,
-  };
-}
diff --git a/packages/mui-base/src/OptionUnstyled/OptionUnstyled.spec.tsx b/packages/mui-base/src/OptionUnstyled/OptionUnstyled.spec.tsx
index 9a4dbd59179c05..dd1689c922be81 100644
--- a/packages/mui-base/src/OptionUnstyled/OptionUnstyled.spec.tsx
+++ b/packages/mui-base/src/OptionUnstyled/OptionUnstyled.spec.tsx
@@ -2,8 +2,8 @@ import * as React from 'react';
 import { expectType } from '@mui/types';
 import OptionUnstyled, { OptionUnstyledRootSlotProps } from '@mui/base/OptionUnstyled';
 
-const Root = React.forwardRef(function Root<TValue>(
-  props: OptionUnstyledRootSlotProps<TValue>,
+const Root = React.forwardRef(function Root<OptionValue>(
+  props: OptionUnstyledRootSlotProps<OptionValue>,
   ref: React.ForwardedRef<HTMLLIElement>,
 ) {
   const { ownerState, ...other } = props;
diff --git a/packages/mui-base/src/OptionUnstyled/OptionUnstyled.test.tsx b/packages/mui-base/src/OptionUnstyled/OptionUnstyled.test.tsx
index 4ef38533a7d0e3..514f02f8b6b2a6 100644
--- a/packages/mui-base/src/OptionUnstyled/OptionUnstyled.test.tsx
+++ b/packages/mui-base/src/OptionUnstyled/OptionUnstyled.test.tsx
@@ -1,23 +1,14 @@
 import * as React from 'react';
 import { createMount, createRenderer, describeConformanceUnstyled } from 'test/utils';
 import OptionUnstyled, { optionUnstyledClasses } from '@mui/base/OptionUnstyled';
-import { SelectUnstyledContext } from '@mui/base/SelectUnstyled';
+import SelectProvider from '../useSelect/SelectProvider';
 
-const dummyGetOptionState = () => ({
+const dummyGetItemState = () => ({
   disabled: false,
   highlighted: false,
   selected: false,
   index: 0,
-});
-
-const dummyGetOptionProps = () => ({
-  'aria-disabled': false,
-  'aria-selected': false,
-  label: '',
-  onClick: () => {},
-  onPointerOver: () => {},
-  role: 'option',
-  value: '',
+  focusable: false,
 });
 
 describe('<OptionUnstyled />', () => {
@@ -28,32 +19,36 @@ describe('<OptionUnstyled />', () => {
     inheritComponent: 'li',
     render: (node) => {
       return render(
-        <SelectUnstyledContext.Provider
+        <SelectProvider
           value={{
-            getOptionState: dummyGetOptionState,
-            getOptionProps: dummyGetOptionProps,
-            listboxRef: React.createRef(),
+            dispatch: () => {},
+            getItemIndex: () => 0,
+            getItemState: dummyGetItemState,
             registerHighlightChangeHandler: () => () => {},
+            registerItem: () => ({ id: 0, deregister: () => {} }),
             registerSelectionChangeHandler: () => () => {},
+            totalSubitemCount: 0,
           }}
         >
           {node}
-        </SelectUnstyledContext.Provider>,
+        </SelectProvider>,
       );
     },
     mount: (node: React.ReactNode) => {
       const wrapper = mount(
-        <SelectUnstyledContext.Provider
+        <SelectProvider
           value={{
-            getOptionState: dummyGetOptionState,
-            getOptionProps: dummyGetOptionProps,
-            listboxRef: React.createRef(),
+            dispatch: () => {},
+            getItemIndex: () => 0,
+            getItemState: dummyGetItemState,
             registerHighlightChangeHandler: () => () => {},
+            registerItem: () => ({ id: 0, deregister: () => {} }),
             registerSelectionChangeHandler: () => () => {},
+            totalSubitemCount: 0,
           }}
         >
           {node}
-        </SelectUnstyledContext.Provider>,
+        </SelectProvider>,
       );
       return wrapper.childAt(0);
     },
diff --git a/packages/mui-base/src/OptionUnstyled/OptionUnstyled.tsx b/packages/mui-base/src/OptionUnstyled/OptionUnstyled.tsx
index 44684aef14029e..728a796923bfaa 100644
--- a/packages/mui-base/src/OptionUnstyled/OptionUnstyled.tsx
+++ b/packages/mui-base/src/OptionUnstyled/OptionUnstyled.tsx
@@ -1,19 +1,18 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { OptionState } from '../useListbox';
+import { unstable_useForkRef as useForkRef } from '@mui/utils';
 import composeClasses from '../composeClasses';
 import {
   OptionUnstyledProps,
   OptionUnstyledOwnerState,
   OptionUnstyledType,
 } from './OptionUnstyled.types';
-import { SelectUnstyledContext } from '../SelectUnstyled/SelectUnstyledContext';
 import { getOptionUnstyledUtilityClass } from './optionUnstyledClasses';
 import { useSlotProps } from '../utils';
 import useOption from '../useOption';
 import { useClassNamesOverride } from '../utils/ClassNameConfigurator';
 
-function useUtilityClasses(ownerState: OptionState) {
+function useUtilityClasses<OptionValue>(ownerState: OptionUnstyledOwnerState<OptionValue>) {
   const { disabled, highlighted, selected } = ownerState;
 
   const slots = {
@@ -26,8 +25,8 @@ function useUtilityClasses(ownerState: OptionState) {
 /**
  * An unstyled option to be used within a SelectUnstyled.
  */
-const OptionUnstyled = React.forwardRef(function OptionUnstyled<TValue>(
-  props: OptionUnstyledProps<TValue>,
+const OptionUnstyled = React.forwardRef(function OptionUnstyled<OptionValue>(
+  props: OptionUnstyledProps<OptionValue>,
   ref: React.ForwardedRef<HTMLLIElement>,
 ) {
   const {
@@ -41,20 +40,24 @@ const OptionUnstyled = React.forwardRef(function OptionUnstyled<TValue>(
     ...other
   } = props;
 
-  const selectContext = React.useContext(SelectUnstyledContext);
-  if (!selectContext) {
-    throw new Error('OptionUnstyled must be used within a SelectUnstyled');
-  }
-
   const Root = component || slots.root || 'li';
 
+  const optionRef = React.useRef<HTMLLIElement>(null);
+  const combinedRef = useForkRef(optionRef, ref);
+
+  // 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.
+  const computedLabel =
+    label ?? (typeof children === 'string' ? children : optionRef.current?.innerText);
+
   const { getRootProps, selected, highlighted, index } = useOption({
     disabled,
+    label: computedLabel,
+    optionRef: combinedRef,
     value,
-    optionRef: ref,
   });
 
-  const ownerState: OptionUnstyledOwnerState<TValue> = {
+  const ownerState: OptionUnstyledOwnerState<OptionValue> = {
     ...props,
     disabled,
     highlighted,
diff --git a/packages/mui-base/src/OptionUnstyled/OptionUnstyled.types.ts b/packages/mui-base/src/OptionUnstyled/OptionUnstyled.types.ts
index eaa1fa083cbf30..0f0470027b01ab 100644
--- a/packages/mui-base/src/OptionUnstyled/OptionUnstyled.types.ts
+++ b/packages/mui-base/src/OptionUnstyled/OptionUnstyled.types.ts
@@ -1,16 +1,15 @@
 import * as React from 'react';
 import { DefaultComponentProps, OverrideProps, Simplify } from '@mui/types';
-import { OptionState } from '../useListbox';
-import { UseSelectOptionSlotProps } from '../useSelect';
+import { UseOptionRootSlotProps } from '../useOption';
 import { SlotComponentProps } from '../utils';
 
 export interface OptionUnstyledRootSlotPropsOverrides {}
 
-export interface OptionUnstyledOwnProps<TValue> {
+export interface OptionUnstyledOwnProps<OptionValue> {
   /**
    * The value of the option.
    */
-  value: TValue;
+  value: OptionValue;
   children?: React.ReactNode;
   /**
    * If `true`, the option will be disabled.
@@ -26,7 +25,7 @@ export interface OptionUnstyledOwnProps<TValue> {
     root?: SlotComponentProps<
       'li',
       OptionUnstyledRootSlotPropsOverrides,
-      OptionUnstyledOwnerState<TValue>
+      OptionUnstyledOwnerState<OptionValue>
     >;
   };
   /**
@@ -50,41 +49,47 @@ export interface OptionUnstyledSlots {
   root?: React.ElementType;
 }
 
-export interface OptionUnstyledTypeMap<TValue, P = {}, D extends React.ElementType = 'li'> {
-  props: P & OptionUnstyledOwnProps<TValue>;
+export interface OptionUnstyledTypeMap<OptionValue, P = {}, D extends React.ElementType = 'li'> {
+  props: P & OptionUnstyledOwnProps<OptionValue>;
   defaultComponent: D;
 }
 
 export type OptionUnstyledProps<
-  TValue,
-  D extends React.ElementType = OptionUnstyledTypeMap<TValue>['defaultComponent'],
-> = OverrideProps<OptionUnstyledTypeMap<TValue, {}, D>, D> & {
+  OptionValue,
+  D extends React.ElementType = OptionUnstyledTypeMap<OptionValue>['defaultComponent'],
+> = OverrideProps<OptionUnstyledTypeMap<OptionValue, {}, D>, D> & {
   component?: D;
 };
 
 export interface OptionUnstyledType {
-  <TValue, C extends React.ElementType>(
+  <OptionValue, C extends React.ElementType>(
     props: {
       /**
        * The component used for the root node.
        * Either a string to use a HTML element or a component.
        */
       component: C;
-    } & OverrideProps<OptionUnstyledTypeMap<TValue>, C>,
+    } & OverrideProps<OptionUnstyledTypeMap<OptionValue>, C>,
+  ): JSX.Element | null;
+  <OptionValue>(
+    props: DefaultComponentProps<OptionUnstyledTypeMap<OptionValue>>,
   ): JSX.Element | null;
-  <TValue>(props: DefaultComponentProps<OptionUnstyledTypeMap<TValue>>): JSX.Element | null;
   propTypes?: any;
 }
 
-export type OptionUnstyledOwnerState<TValue> = Simplify<
-  OptionUnstyledOwnProps<TValue> & OptionState
+export type OptionUnstyledOwnerState<OptionValue> = Simplify<
+  OptionUnstyledOwnProps<OptionValue> & {
+    selected: boolean;
+    highlighted: boolean;
+    index: number;
+  }
 >;
 
-export type OptionUnstyledRootSlotProps<TValue> = Simplify<
-  UseSelectOptionSlotProps & {
+export type OptionUnstyledRootSlotProps<OptionValue> = Simplify<
+  UseOptionRootSlotProps & {
     children?: React.ReactNode;
     className: string;
     ref: React.Ref<HTMLLIElement>;
-    ownerState: OptionUnstyledOwnerState<TValue>;
+    ownerState: OptionUnstyledOwnerState<OptionValue>;
   }
 >;
diff --git a/packages/mui-base/src/SelectUnstyled/SelectUnstyled.spec.tsx b/packages/mui-base/src/SelectUnstyled/SelectUnstyled.spec.tsx
index fc698babdb5dfb..37186db0efc55e 100644
--- a/packages/mui-base/src/SelectUnstyled/SelectUnstyled.spec.tsx
+++ b/packages/mui-base/src/SelectUnstyled/SelectUnstyled.spec.tsx
@@ -28,15 +28,15 @@ const SelectUnstyledSlotPropsOverridesTest = (
   />
 );
 
-function CustomRoot<TValue extends {}, Multiple extends boolean>(
-  props: SelectUnstyledRootSlotProps<TValue, Multiple>,
+function CustomRoot<OptionValue extends {}, Multiple extends boolean>(
+  props: SelectUnstyledRootSlotProps<OptionValue, Multiple>,
 ) {
   const { ownerState, ...other } = props;
   return <div {...other} />;
 }
 
-function CustomPopper<TValue extends {}, Multiple extends boolean>(
-  props: WithOptionalOwnerState<SelectUnstyledPopperSlotProps<TValue, Multiple>>,
+function CustomPopper<OptionValue extends {}, Multiple extends boolean>(
+  props: WithOptionalOwnerState<SelectUnstyledPopperSlotProps<OptionValue, Multiple>>,
 ) {
   const { ownerState, ...other } = props;
   return <PopperUnstyled {...other} />;
diff --git a/packages/mui-base/src/SelectUnstyled/SelectUnstyled.test.tsx b/packages/mui-base/src/SelectUnstyled/SelectUnstyled.test.tsx
index f97a9fb4a929e9..2b1e5ffba258de 100644
--- a/packages/mui-base/src/SelectUnstyled/SelectUnstyled.test.tsx
+++ b/packages/mui-base/src/SelectUnstyled/SelectUnstyled.test.tsx
@@ -1,8 +1,11 @@
 import * as React from 'react';
 import { expect } from 'chai';
 import { spy } from 'sinon';
-import SelectUnstyled, { selectUnstyledClasses } from '@mui/base/SelectUnstyled';
-import { SelectOption } from '@mui/base/useSelect';
+import SelectUnstyled, {
+  SelectUnstyledListboxSlotProps,
+  selectUnstyledClasses,
+} from '@mui/base/SelectUnstyled';
+import useOption, { SelectOption } from '@mui/base/useOption';
 import OptionUnstyled, {
   OptionUnstyledProps,
   optionUnstyledClasses,
@@ -23,7 +26,7 @@ describe('<SelectUnstyled />', () => {
   const { render } = createRenderer();
 
   const componentToTest = (
-    <SelectUnstyled defaultListboxOpen>
+    <SelectUnstyled defaultListboxOpen slotProps={{ popper: { disablePortal: true } }}>
       <OptionGroupUnstyled label="Group">
         <OptionUnstyled value={1}>1</OptionUnstyled>
       </OptionGroupUnstyled>
@@ -85,7 +88,7 @@ describe('<SelectUnstyled />', () => {
 
     ['Enter', ' ', 'Escape'].forEach((key) => {
       it(`closes the dropdown when the "${key}" key is pressed`, () => {
-        const { getByRole, queryByRole } = render(
+        const { getByRole } = render(
           <SelectUnstyled>
             <OptionUnstyled value={1}>1</OptionUnstyled>
           </SelectUnstyled>,
@@ -96,10 +99,10 @@ describe('<SelectUnstyled />', () => {
         });
 
         const listbox = getByRole('listbox');
-        userEvent.keyPress(listbox, { key });
+        fireEvent.keyDown(listbox, { key });
 
         expect(select).to.have.attribute('aria-expanded', 'false');
-        expect(queryByRole('listbox')).to.equal(null);
+        expect(listbox).not.toBeVisible();
       });
     });
 
@@ -140,9 +143,8 @@ describe('<SelectUnstyled />', () => {
 
           const listbox = getByRole('listbox');
 
-          userEvent.keyPress(listbox, { key: 'ArrowDown' }); // highlights '1'
           userEvent.keyPress(listbox, { key: 'ArrowDown' }); // highlights '2'
-          userEvent.keyPress(listbox, { key });
+          fireEvent.keyDown(listbox, { key });
 
           expect(select).to.have.text('2');
         }),
@@ -351,12 +353,76 @@ describe('<SelectUnstyled />', () => {
       });
 
       const listbox = getByRole('listbox');
-      userEvent.keyPress(listbox, { key: 'ArrowDown' }); // highlights '2'
-      userEvent.keyPress(listbox, { key: 'Escape' });
+      fireEvent.keyDown(listbox, { key: 'ArrowDown' }); // highlights '2'
+      fireEvent.keyDown(listbox, { key: 'Escape' });
 
       expect(select).to.have.attribute('aria-expanded', 'false');
       expect(select).to.have.text('1');
-      expect(queryByRole('listbox')).to.equal(null);
+      expect(queryByRole('listbox', { hidden: true })).not.toBeVisible();
+    });
+
+    it('scrolls to highlighted option so it is visible', function test() {
+      if (/jsdom/.test(window.navigator.userAgent)) {
+        this.skip();
+      }
+
+      // two options are visible at a time
+      const SelectListbox = React.forwardRef(function SelectListbox(
+        props: SelectUnstyledListboxSlotProps<string, false>,
+        ref: React.ForwardedRef<HTMLUListElement>,
+      ) {
+        const { ownerState, ...other } = props;
+        return <ul {...other} ref={ref} style={{ maxHeight: '100px', overflow: 'auto' }} />;
+      });
+
+      const Option = React.forwardRef(function Option(
+        props: { value: string; children?: React.ReactNode },
+        ref: React.Ref<HTMLLIElement>,
+      ) {
+        return (
+          <OptionUnstyled
+            {...props}
+            ref={ref}
+            slotProps={{ root: { style: { height: '50px' } } }}
+          />
+        );
+      });
+
+      const { getByRole } = render(
+        <SelectUnstyled slots={{ listbox: SelectListbox }}>
+          <Option value="1">1</Option>
+          <Option value="2">2</Option>
+          <Option value="3">3</Option>
+          <Option value="4">4</Option>
+          <Option value="5">5</Option>
+          <Option value="6">6</Option>
+        </SelectUnstyled>,
+      );
+
+      const select = getByRole('combobox');
+
+      act(() => {
+        select.focus();
+      });
+
+      fireEvent.keyDown(select, { key: 'ArrowDown' }); // opens the listbox and highlights 1
+
+      const listbox = getByRole('listbox');
+
+      fireEvent.keyDown(listbox, { key: 'ArrowDown' }); // highlights 2
+      expect(listbox.scrollTop).to.equal(0);
+
+      fireEvent.keyDown(listbox, { key: 'ArrowDown' }); // highlights 3
+      expect(listbox.scrollTop).to.equal(50);
+
+      fireEvent.keyDown(listbox, { key: 'ArrowDown' }); // highlights 4
+      expect(listbox.scrollTop).to.equal(100);
+
+      fireEvent.keyDown(listbox, { key: 'ArrowUp' }); // highlights 3
+      expect(listbox.scrollTop).to.equal(100);
+
+      fireEvent.keyDown(listbox, { key: 'ArrowUp' }); // highlights 2
+      expect(listbox.scrollTop).to.equal(50);
     });
   });
 
@@ -778,6 +844,126 @@ describe('<SelectUnstyled />', () => {
     });
   });
 
+  describe('open/close behavior', () => {
+    it('closes the listbox without selecting an option when focus is lost', () => {
+      const { getByRole, getByTestId } = render(
+        <div>
+          <SelectUnstyled defaultValue={1}>
+            <OptionUnstyled value={1}>1</OptionUnstyled>
+            <OptionUnstyled value={2}>2</OptionUnstyled>
+          </SelectUnstyled>
+          <p data-testid="focus-target" tabIndex={0}>
+            focus target
+          </p>
+        </div>,
+      );
+
+      const select = getByRole('combobox');
+
+      act(() => {
+        select.click();
+      });
+
+      const listbox = getByRole('listbox');
+      userEvent.keyPress(listbox, { key: 'ArrowDown' }); // highlights '2'
+
+      const focusTarget = getByTestId('focus-target');
+      act(() => {
+        focusTarget.focus();
+      });
+
+      expect(select).to.have.attribute('aria-expanded', 'false');
+      expect(select).to.have.text('1');
+      expect(listbox).not.toBeVisible();
+    });
+
+    it('closes the listbox when already selected option is selected again with a click', () => {
+      const { getByRole, getByTestId } = render(
+        <SelectUnstyled defaultValue={1}>
+          <OptionUnstyled data-testid="selected-option" value={1}>
+            1
+          </OptionUnstyled>
+          <OptionUnstyled value={2}>2</OptionUnstyled>
+        </SelectUnstyled>,
+      );
+
+      const select = getByRole('combobox');
+
+      act(() => {
+        select.click();
+      });
+
+      const selectedOption = getByTestId('selected-option');
+      fireEvent.click(selectedOption);
+
+      expect(select).to.have.attribute('aria-expanded', 'false');
+      expect(select).to.have.text('1');
+    });
+
+    it('focuses the listbox after it is opened', () => {
+      const { getByRole } = render(
+        <SelectUnstyled>
+          <OptionUnstyled value={1}>1</OptionUnstyled>
+        </SelectUnstyled>,
+      );
+
+      const select = getByRole('combobox');
+      act(() => {
+        select.click();
+      });
+
+      expect(document.activeElement).to.equal(getByRole('listbox'));
+    });
+
+    it('scrolls to initially highlighted option after opening', function test() {
+      if (/jsdom/.test(window.navigator.userAgent)) {
+        this.skip();
+      }
+
+      // two options are visible at a time
+      const SelectListbox = React.forwardRef(function SelectListbox(
+        props: SelectUnstyledListboxSlotProps<string, false>,
+        ref: React.ForwardedRef<HTMLUListElement>,
+      ) {
+        const { ownerState, ...other } = props;
+        return <ul {...other} ref={ref} style={{ maxHeight: '100px', overflow: 'auto' }} />;
+      });
+
+      const Option = React.forwardRef(function Option(
+        props: { value: string; children?: React.ReactNode },
+        ref: React.Ref<HTMLLIElement>,
+      ) {
+        return (
+          <OptionUnstyled
+            {...props}
+            ref={ref}
+            slotProps={{ root: { style: { height: '50px' } } }}
+          />
+        );
+      });
+
+      const { getByRole } = render(
+        <SelectUnstyled slots={{ listbox: SelectListbox }} defaultValue={'4'}>
+          <Option value="1">1</Option>
+          <Option value="2">2</Option>
+          <Option value="3">3</Option>
+          <Option value="4">4</Option>
+          <Option value="5">5</Option>
+          <Option value="6">6</Option>
+        </SelectUnstyled>,
+      );
+
+      const select = getByRole('combobox');
+
+      act(() => {
+        select.click();
+      });
+
+      const listbox = getByRole('listbox');
+      expect(listbox.scrollTop).to.equal(100);
+    });
+  });
+
   it('sets a value correctly when interacted by a user and external code', () => {
     function TestComponent() {
       const [value, setValue] = React.useState<number[]>([]);
@@ -817,72 +1003,67 @@ describe('<SelectUnstyled />', () => {
     expect(selectButton).to.have.text('1, 2');
   });
 
-  it('closes the listbox without selecting an option when focus is lost', () => {
-    const { getByRole, getByTestId } = render(
-      <div>
-        <SelectUnstyled defaultValue={1}>
-          <OptionUnstyled value={1}>1</OptionUnstyled>
-          <OptionUnstyled value={2}>2</OptionUnstyled>
-        </SelectUnstyled>
-        <p data-testid="focus-target" tabIndex={0}>
-          focus target
-        </p>
-      </div>,
-    );
-
-    const select = getByRole('combobox');
-
-    act(() => {
-      select.click();
-    });
-
-    const listbox = getByRole('listbox');
-    userEvent.keyPress(listbox, { key: 'ArrowDown' }); // highlights '2'
-
-    const focusTarget = getByTestId('focus-target');
-    act(() => {
-      focusTarget.focus();
-    });
-
-    expect(select).to.have.attribute('aria-expanded', 'false');
-    expect(select).to.have.text('1');
-  });
-
-  it('closes the listbox when already selected option is selected again with a click', () => {
-    const { getByRole, getByTestId } = render(
-      <SelectUnstyled defaultValue={1}>
-        <OptionUnstyled data-testid="selected-option" value={1}>
-          1
-        </OptionUnstyled>
-        <OptionUnstyled value={2}>2</OptionUnstyled>
-      </SelectUnstyled>,
-    );
+  it('perf: does not rerender options unnecessarily', () => {
+    const renderOption1Spy = spy();
+    const renderOption2Spy = spy();
+    const renderOption3Spy = spy();
+    const renderOption4Spy = spy();
 
-    const select = getByRole('combobox');
-
-    act(() => {
-      select.click();
-    });
+    function Option(props: OptionUnstyledProps<number> & { renderSpy?: () => void }) {
+      const { renderSpy, value } = props;
+      renderSpy?.();
 
-    const selectedOption = getByTestId('selected-option');
-    fireEvent.click(selectedOption);
+      const { getRootProps } = useOption({
+        value,
+        label: value.toString(),
+        disabled: false,
+      });
 
-    expect(select).to.have.attribute('aria-expanded', 'false');
-    expect(select).to.have.text('1');
-  });
+      return <li {...getRootProps} />;
+    }
 
-  it('focuses the listbox after it is opened', () => {
     const { getByRole } = render(
       <SelectUnstyled>
-        <OptionUnstyled value={1}>1</OptionUnstyled>
+        <Option renderSpy={renderOption1Spy} value={1}>
+          1
+        </Option>
+        <Option renderSpy={renderOption2Spy} value={2}>
+          2
+        </Option>
+        <Option renderSpy={renderOption3Spy} value={3}>
+          3
+        </Option>
+        <Option renderSpy={renderOption4Spy} value={4}>
+          4
+        </Option>
       </SelectUnstyled>,
     );
 
+    renderOption1Spy.resetHistory();
+    renderOption2Spy.resetHistory();
+    renderOption3Spy.resetHistory();
+    renderOption4Spy.resetHistory();
+
     const select = getByRole('combobox');
     act(() => {
-      select.click();
+      select.click(); // opens and highlights '1'
     });
 
-    expect(document.activeElement).to.equal(getByRole('listbox'));
+    // React renders twice in strict mode, so we expect twice the number of spy calls
+    expect(renderOption1Spy.callCount).to.equal(2);
+
+    const listbox = getByRole('listbox');
+    fireEvent.keyDown(listbox, { key: 'ArrowDown' }); // highlights '2'
+    expect(renderOption1Spy.callCount).to.equal(4); // '1' rerenders as it loses highlight
+    expect(renderOption2Spy.callCount).to.equal(2); // '2' rerenders as it receives highlight
+
+    fireEvent.keyDown(listbox, { key: 'Enter' }); // selects '2'
+    expect(renderOption1Spy.callCount).to.equal(4);
+    expect(renderOption2Spy.callCount).to.equal(4);
+
+    // neither the highlighted nor the selected state of these options changed,
+    // so they don't need to rerender:
+    expect(renderOption3Spy.callCount).to.equal(0);
+    expect(renderOption4Spy.callCount).to.equal(0);
   });
 });
diff --git a/packages/mui-base/src/SelectUnstyled/SelectUnstyled.tsx b/packages/mui-base/src/SelectUnstyled/SelectUnstyled.tsx
index 6687125ff24044..a477e4228ece0d 100644
--- a/packages/mui-base/src/SelectUnstyled/SelectUnstyled.tsx
+++ b/packages/mui-base/src/SelectUnstyled/SelectUnstyled.tsx
@@ -1,9 +1,6 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import {
-  unstable_useForkRef as useForkRef,
-  unstable_useControlled as useControlled,
-} from '@mui/utils';
+import { unstable_useForkRef as useForkRef } from '@mui/utils';
 import {
   SelectUnstyledListboxSlotProps,
   SelectUnstyledOwnerState,
@@ -12,18 +9,18 @@ import {
   SelectUnstyledRootSlotProps,
   SelectUnstyledType,
 } from './SelectUnstyled.types';
-import { flattenOptionGroups, getOptionsFromChildren } from './utils';
-import useSelect, { SelectChild, SelectOption, SelectValue } from '../useSelect';
+import useSelect, { SelectValue } from '../useSelect';
 import { useSlotProps, WithOptionalOwnerState } from '../utils';
 import PopperUnstyled from '../PopperUnstyled';
-import { SelectUnstyledContext } from './SelectUnstyledContext';
 import composeClasses from '../composeClasses';
 import { getSelectUnstyledUtilityClass } from './selectUnstyledClasses';
-import defaultOptionStringifier from './defaultOptionStringifier';
+import defaultOptionStringifier from '../useSelect/defaultOptionStringifier';
 import { useClassNamesOverride } from '../utils/ClassNameConfigurator';
+import { SelectOption } from '../useOption';
+import SelectProvider from '../useSelect/SelectProvider';
 
-function defaultRenderValue<TValue>(
-  selectedOptions: SelectOption<TValue> | SelectOption<TValue>[] | null,
+function defaultRenderValue<OptionValue>(
+  selectedOptions: SelectOption<OptionValue> | SelectOption<OptionValue>[] | null,
 ) {
   if (Array.isArray(selectedOptions)) {
     return <React.Fragment>{selectedOptions.map((o) => o.label).join(', ')}</React.Fragment>;
@@ -32,8 +29,8 @@ function defaultRenderValue<TValue>(
   return selectedOptions?.label ?? '';
 }
 
-function defaultFormValueProvider<TValue>(
-  selectedOption: SelectOption<TValue> | SelectOption<TValue>[] | null,
+function defaultFormValueProvider<OptionValue>(
+  selectedOption: SelectOption<OptionValue> | SelectOption<OptionValue>[] | null,
 ) {
   if (Array.isArray(selectedOption)) {
     if (selectedOption.length === 0) {
@@ -95,9 +92,9 @@ function useUtilityClasses(ownerState: SelectUnstyledOwnerState<any, any>) {
  * - [SelectUnstyled API](https://mui.com/base/react-select/components-api/#select-unstyled)
  */
 const SelectUnstyled = React.forwardRef(function SelectUnstyled<
-  TValue extends {},
+  OptionValue extends {},
   Multiple extends boolean,
->(props: SelectUnstyledProps<TValue, Multiple>, forwardedRef: React.ForwardedRef<any>) {
+>(props: SelectUnstyledProps<OptionValue, Multiple>, forwardedRef: React.ForwardedRef<any>) {
   const {
     autoFocus,
     children,
@@ -120,20 +117,8 @@ const SelectUnstyled = React.forwardRef(function SelectUnstyled<
     ...other
   } = props;
 
-  const renderValue = renderValueProp ?? defaultRenderValue;
-
-  const [groupedOptions, setGroupedOptions] = React.useState<SelectChild<TValue>[]>([]);
-  const options = React.useMemo(() => flattenOptionGroups(groupedOptions), [groupedOptions]);
-  const [listboxOpen, setListboxOpen] = useControlled({
-    controlled: listboxOpenProp,
-    default: defaultListboxOpen,
-    name: 'SelectUnstyled',
-    state: 'listboxOpen',
-  });
-
-  React.useEffect(() => {
-    setGroupedOptions(getOptionsFromChildren(children));
-  }, [children]);
+  const renderValue: (option: SelectValue<SelectOption<OptionValue>, Multiple>) => React.ReactNode =
+    renderValueProp ?? defaultRenderValue;
 
   const [buttonDefined, setButtonDefined] = React.useState(false);
   const buttonRef = React.useRef<HTMLElement | null>(null);
@@ -155,43 +140,37 @@ const SelectUnstyled = React.forwardRef(function SelectUnstyled<
     }
   }, [autoFocus]);
 
-  const handleOpenChange = React.useCallback(
-    (isOpen: boolean) => {
-      setListboxOpen(isOpen);
-      onListboxOpenChange?.(isOpen);
-    },
-    [setListboxOpen, onListboxOpenChange],
-  );
-
   const {
     buttonActive,
     buttonFocusVisible,
+    contextValue,
     disabled,
     getButtonProps,
     getListboxProps,
-    contextValue,
+    getOptionMetadata,
     value,
+    open,
   } = useSelect({
     buttonRef: handleButtonRef,
+    defaultOpen: defaultListboxOpen,
     defaultValue,
     disabled: disabledProp,
     listboxId,
     multiple,
-    open: listboxOpen,
+    open: listboxOpenProp,
     onChange,
-    onOpenChange: handleOpenChange,
-    options,
+    onOpenChange: onListboxOpenChange,
     optionStringifier,
     value: valueProp,
   });
 
-  const ownerState: SelectUnstyledOwnerState<TValue, Multiple> = {
+  const ownerState: SelectUnstyledOwnerState<OptionValue, Multiple> = {
     ...props,
     active: buttonActive,
     defaultListboxOpen,
     disabled,
     focusVisible: buttonFocusVisible,
-    open: listboxOpen,
+    open,
     multiple,
     renderValue,
     value,
@@ -199,25 +178,7 @@ const SelectUnstyled = React.forwardRef(function SelectUnstyled<
 
   const classes = useUtilityClasses(ownerState);
 
-  const selectedOption: SelectValue<SelectOption<TValue>, Multiple> = React.useMemo(() => {
-    if (multiple) {
-      if (value == null) {
-        return [] as unknown as SelectValue<SelectOption<TValue>, Multiple>;
-      }
-
-      return options.filter((o) => (value as TValue[]).includes(o.value)) as SelectValue<
-        SelectOption<TValue>,
-        Multiple
-      >;
-    }
-
-    return (options.find((o) => value === o.value) ?? null) as SelectValue<
-      SelectOption<TValue>,
-      Multiple
-    >;
-  }, [options, value, multiple]);
-
-  const buttonProps: WithOptionalOwnerState<SelectUnstyledRootSlotProps<TValue, Multiple>> =
+  const buttonProps: WithOptionalOwnerState<SelectUnstyledRootSlotProps<OptionValue, Multiple>> =
     useSlotProps({
       elementType: Button,
       getSlotProps: getButtonProps,
@@ -227,26 +188,27 @@ const SelectUnstyled = React.forwardRef(function SelectUnstyled<
       className: classes.root,
     });
 
-  const listboxProps: WithOptionalOwnerState<SelectUnstyledListboxSlotProps<TValue, Multiple>> =
-    useSlotProps({
-      elementType: ListboxRoot,
-      getSlotProps: getListboxProps,
-      externalSlotProps: slotProps.listbox,
-      additionalProps: {
-        ref: listboxRef,
-      },
-      ownerState,
-      className: classes.listbox,
-    });
+  const listboxProps: WithOptionalOwnerState<
+    SelectUnstyledListboxSlotProps<OptionValue, Multiple>
+  > = useSlotProps({
+    elementType: ListboxRoot,
+    getSlotProps: getListboxProps,
+    externalSlotProps: slotProps.listbox,
+    additionalProps: {
+      ref: listboxRef,
+    },
+    ownerState,
+    className: classes.listbox,
+  });
 
-  const popperProps: WithOptionalOwnerState<SelectUnstyledPopperSlotProps<TValue, Multiple>> =
+  const popperProps: WithOptionalOwnerState<SelectUnstyledPopperSlotProps<OptionValue, Multiple>> =
     useSlotProps({
       elementType: Popper,
       externalSlotProps: slotProps.popper,
       additionalProps: {
         anchorEl: buttonRef.current,
-        disablePortal: true,
-        open: listboxOpen,
+        keepMounted: true,
+        open,
         placement: 'bottom-start' as const,
         role: undefined,
       },
@@ -254,20 +216,32 @@ const SelectUnstyled = React.forwardRef(function SelectUnstyled<
       className: classes.popper,
     });
 
+  let selectedOptionsMetadata: SelectValue<SelectOption<OptionValue>, Multiple>;
+  if (multiple) {
+    selectedOptionsMetadata = (value as OptionValue[])
+      .map((v) => getOptionMetadata(v))
+      .filter((o) => o !== undefined) as SelectValue<SelectOption<OptionValue>, Multiple>;
+  } else {
+    selectedOptionsMetadata = (getOptionMetadata(value as OptionValue) ?? null) as SelectValue<
+      SelectOption<OptionValue>,
+      Multiple
+    >;
+  }
+
   return (
     <React.Fragment>
-      <Button {...buttonProps}>{renderValue(selectedOption as any)}</Button>
+      <Button {...buttonProps}>{renderValue(selectedOptionsMetadata)}</Button>
       {buttonDefined && (
         <Popper {...popperProps}>
           <ListboxRoot {...listboxProps}>
-            <SelectUnstyledContext.Provider value={contextValue}>
-              {children}
-            </SelectUnstyledContext.Provider>
+            <SelectProvider value={contextValue}>{children}</SelectProvider>
           </ListboxRoot>
         </Popper>
       )}
 
-      {name && <input type="hidden" name={name} value={getSerializedValue(selectedOption)} />}
+      {name && (
+        <input type="hidden" name={name} value={getSerializedValue(selectedOptionsMetadata)} />
+      )}
     </React.Fragment>
   );
 }) as SelectUnstyledType;
@@ -313,7 +287,6 @@ SelectUnstyled.propTypes /* remove-proptypes */ = {
   getSerializedValue: PropTypes.func,
   /**
    * `id` attribute of the listbox element.
-   * Also used to derive the `id` attributes of options.
    */
   listboxId: PropTypes.string,
   /**
@@ -323,6 +296,7 @@ SelectUnstyled.propTypes /* remove-proptypes */ = {
   listboxOpen: PropTypes.bool,
   /**
    * If `true`, selecting multiple values is allowed.
+   * This affects the type of the `value`, `defaultValue`, and `onChange` props.
    *
    * @default false
    */
diff --git a/packages/mui-base/src/SelectUnstyled/SelectUnstyled.types.ts b/packages/mui-base/src/SelectUnstyled/SelectUnstyled.types.ts
index e30fbb1424967f..f9683e9eb31885 100644
--- a/packages/mui-base/src/SelectUnstyled/SelectUnstyled.types.ts
+++ b/packages/mui-base/src/SelectUnstyled/SelectUnstyled.types.ts
@@ -1,11 +1,7 @@
 import * as React from 'react';
 import { DefaultComponentProps, OverrideProps, Simplify } from '@mui/types';
-import {
-  SelectOption,
-  SelectValue,
-  UseSelectButtonSlotProps,
-  UseSelectListboxSlotProps,
-} from '../useSelect';
+import { SelectValue, UseSelectButtonSlotProps, UseSelectListboxSlotProps } from '../useSelect';
+import { SelectOption } from '../useOption';
 import PopperUnstyled, { PopperUnstyledProps } from '../PopperUnstyled';
 import { SlotComponentProps, WithOptionalOwnerState } from '../utils';
 
@@ -13,7 +9,7 @@ export interface SelectUnstyledRootSlotPropsOverrides {}
 export interface SelectUnstyledListboxSlotPropsOverrides {}
 export interface SelectUnstyledPopperSlotPropsOverrides {}
 
-export interface SelectUnstyledOwnProps<TValue extends {}, Multiple extends boolean> {
+export interface SelectUnstyledOwnProps<OptionValue extends {}, Multiple extends boolean> {
   /**
    * If `true`, the select element is focused during the first mount
    * @default false
@@ -29,7 +25,7 @@ export interface SelectUnstyledOwnProps<TValue extends {}, Multiple extends bool
   /**
    * The default selected value. Use when the component is not controlled.
    */
-  defaultValue?: SelectValue<TValue, Multiple>;
+  defaultValue?: SelectValue<OptionValue, Multiple>;
   /**
    * If `true`, the select is disabled.
    * @default false
@@ -41,11 +37,10 @@ export interface SelectUnstyledOwnProps<TValue extends {}, Multiple extends bool
    * so that the selected value can be posted with a form.
    */
   getSerializedValue?: (
-    option: SelectValue<SelectOption<TValue>, Multiple>,
+    option: SelectValue<SelectOption<OptionValue>, Multiple>,
   ) => React.InputHTMLAttributes<HTMLInputElement>['value'];
   /**
    * `id` attribute of the listbox element.
-   * Also used to derive the `id` attributes of options.
    */
   listboxId?: string;
   /**
@@ -55,6 +50,7 @@ export interface SelectUnstyledOwnProps<TValue extends {}, Multiple extends bool
   listboxOpen?: boolean;
   /**
    * If `true`, selecting multiple values is allowed.
+   * This affects the type of the `value`, `defaultValue`, and `onChange` props.
    *
    * @default false
    */
@@ -69,7 +65,7 @@ export interface SelectUnstyledOwnProps<TValue extends {}, Multiple extends bool
    */
   onChange?: (
     e: React.MouseEvent | React.KeyboardEvent | React.FocusEvent | null,
-    value: SelectValue<TValue, Multiple>,
+    value: SelectValue<OptionValue, Multiple>,
   ) => void;
   /**
    * Callback fired when the component requests to be opened.
@@ -83,11 +79,11 @@ export interface SelectUnstyledOwnProps<TValue extends {}, Multiple extends bool
    *
    * @default defaultOptionStringifier
    */
-  optionStringifier?: (option: SelectOption<TValue>) => string;
+  optionStringifier?: (option: SelectOption<OptionValue>) => string;
   /**
    * Function that customizes the rendering of the selected value.
    */
-  renderValue?: (option: SelectValue<SelectOption<TValue>, Multiple>) => React.ReactNode;
+  renderValue?: (option: SelectValue<SelectOption<OptionValue>, Multiple>) => React.ReactNode;
   /**
    * The props used for each slot inside the Input.
    * @default {}
@@ -96,17 +92,17 @@ export interface SelectUnstyledOwnProps<TValue extends {}, Multiple extends bool
     root?: SlotComponentProps<
       'button',
       SelectUnstyledRootSlotPropsOverrides,
-      SelectUnstyledOwnerState<TValue, Multiple>
+      SelectUnstyledOwnerState<OptionValue, Multiple>
     >;
     listbox?: SlotComponentProps<
       'ul',
       SelectUnstyledListboxSlotPropsOverrides,
-      SelectUnstyledOwnerState<TValue, Multiple>
+      SelectUnstyledOwnerState<OptionValue, Multiple>
     >;
     popper?: SlotComponentProps<
       typeof PopperUnstyled,
       SelectUnstyledPopperSlotPropsOverrides,
-      SelectUnstyledOwnerState<TValue, Multiple>
+      SelectUnstyledOwnerState<OptionValue, Multiple>
     >;
   };
   /**
@@ -114,15 +110,15 @@ export interface SelectUnstyledOwnProps<TValue extends {}, Multiple extends bool
    * Either a string to use a HTML element or a component.
    * @default {}
    */
-  slots?: SelectUnstyledSlots<TValue, Multiple>;
+  slots?: SelectUnstyledSlots<OptionValue, Multiple>;
   /**
    * The selected value.
    * Set to `null` to deselect all options.
    */
-  value?: SelectValue<TValue, Multiple>;
+  value?: SelectValue<OptionValue, Multiple>;
 }
 
-export interface SelectUnstyledSlots<TValue extends {}, Multiple extends boolean> {
+export interface SelectUnstyledSlots<OptionValue extends {}, Multiple extends boolean> {
   /**
    * The component that renders the root.
    * @default 'button'
@@ -138,75 +134,81 @@ export interface SelectUnstyledSlots<TValue extends {}, Multiple extends boolean
    * @default PopperUnstyled
    */
   popper?: React.ComponentType<
-    WithOptionalOwnerState<SelectUnstyledPopperSlotProps<TValue, Multiple>>
+    WithOptionalOwnerState<SelectUnstyledPopperSlotProps<OptionValue, Multiple>>
   >;
 }
 
 export interface SelectUnstyledTypeMap<
-  TValue extends {},
+  OptionValue extends {},
   Multiple extends boolean,
   P = {},
   D extends React.ElementType = 'button',
 > {
-  props: P & SelectUnstyledOwnProps<TValue, Multiple>;
+  props: P & SelectUnstyledOwnProps<OptionValue, Multiple>;
   defaultComponent: D;
 }
 
 export type SelectUnstyledProps<
-  TValue extends {},
+  OptionValue extends {},
   Multiple extends boolean,
-  D extends React.ElementType = SelectUnstyledTypeMap<TValue, Multiple>['defaultComponent'],
-> = OverrideProps<SelectUnstyledTypeMap<TValue, Multiple, {}, D>, D> & {
+  D extends React.ElementType = SelectUnstyledTypeMap<OptionValue, Multiple>['defaultComponent'],
+> = OverrideProps<SelectUnstyledTypeMap<OptionValue, Multiple, {}, D>, D> & {
   component?: D;
 };
 
 // OverridableComponent cannot be used below as SelectUnstyled's props are generic.
 export interface SelectUnstyledType {
-  <TValue extends {}, C extends React.ElementType, Multiple extends boolean = false>(
+  <OptionValue extends {}, C extends React.ElementType, Multiple extends boolean = false>(
     props: {
       /**
        * The component used for the root node.
        * Either a string to use a HTML element or a component.
        */
       component: C;
-    } & OverrideProps<SelectUnstyledTypeMap<TValue, Multiple>, C>,
+    } & OverrideProps<SelectUnstyledTypeMap<OptionValue, Multiple>, C>,
   ): JSX.Element | null;
-  <TValue extends {}, Multiple extends boolean = false>(
-    props: DefaultComponentProps<SelectUnstyledTypeMap<TValue, Multiple>>,
+  <OptionValue extends {}, Multiple extends boolean = false>(
+    props: DefaultComponentProps<SelectUnstyledTypeMap<OptionValue, Multiple>>,
   ): JSX.Element | null;
   propTypes?: any;
 }
 
-export interface SelectUnstyledOwnerState<TValue extends {}, Multiple extends boolean>
-  extends SelectUnstyledOwnProps<TValue, Multiple> {
+export interface SelectUnstyledOwnerState<OptionValue extends {}, Multiple extends boolean>
+  extends SelectUnstyledOwnProps<OptionValue, Multiple> {
   active: boolean;
   disabled: boolean;
   focusVisible: boolean;
   open: boolean;
 }
 
-export type SelectUnstyledRootSlotProps<TValue extends {}, Multiple extends boolean> = Simplify<
+export type SelectUnstyledRootSlotProps<
+  OptionValue extends {},
+  Multiple extends boolean,
+> = Simplify<
   UseSelectButtonSlotProps & {
     className?: string;
     children?: React.ReactNode;
-    ownerState: SelectUnstyledOwnerState<TValue, Multiple>;
+    ownerState: SelectUnstyledOwnerState<OptionValue, Multiple>;
   }
 >;
 
-export type SelectUnstyledListboxSlotProps<TValue extends {}, Multiple extends boolean> = Simplify<
+export type SelectUnstyledListboxSlotProps<
+  OptionValue extends {},
+  Multiple extends boolean,
+> = Simplify<
   UseSelectListboxSlotProps & {
     className?: string;
     children?: React.ReactNode;
-    ownerState: SelectUnstyledOwnerState<TValue, Multiple>;
+    ownerState: SelectUnstyledOwnerState<OptionValue, Multiple>;
   }
 >;
 
-export type SelectUnstyledPopperSlotProps<TValue extends {}, Multiple extends boolean> = {
+export type SelectUnstyledPopperSlotProps<OptionValue extends {}, Multiple extends boolean> = {
   anchorEl: PopperUnstyledProps['anchorEl'];
   children?: PopperUnstyledProps['children'];
   className?: string;
-  disablePortal: PopperUnstyledProps['disablePortal'];
+  keepMounted: PopperUnstyledProps['keepMounted'];
   open: boolean;
-  ownerState: SelectUnstyledOwnerState<TValue, Multiple>;
+  ownerState: SelectUnstyledOwnerState<OptionValue, Multiple>;
   placement: PopperUnstyledProps['placement'];
 };
diff --git a/packages/mui-base/src/SelectUnstyled/SelectUnstyledContext.ts b/packages/mui-base/src/SelectUnstyled/SelectUnstyledContext.ts
deleted file mode 100644
index ec64a0d351564a..00000000000000
--- a/packages/mui-base/src/SelectUnstyled/SelectUnstyledContext.ts
+++ /dev/null
@@ -1,20 +0,0 @@
-import * as React from 'react';
-import { OptionState } from '../useListbox';
-import { EventHandlers } from '../utils';
-import { UseSelectOptionSlotProps } from '../useSelect';
-import { SelectChangeNotifiers } from '../useSelect/useSelectChangeNotifiers';
-
-export interface SelectUnstyledContextType {
-  getOptionState: (value: any) => OptionState;
-  getOptionProps: <OtherHandlers extends EventHandlers>(
-    value: any,
-    otherHandlers: OtherHandlers,
-  ) => UseSelectOptionSlotProps;
-  listboxRef: React.RefObject<any>;
-  registerSelectionChangeHandler: SelectChangeNotifiers<any>['registerSelectionChangeHandler'];
-  registerHighlightChangeHandler: SelectChangeNotifiers<any>['registerHighlightChangeHandler'];
-}
-
-export const SelectUnstyledContext = React.createContext<SelectUnstyledContextType | undefined>(
-  undefined,
-);
diff --git a/packages/mui-base/src/SelectUnstyled/index.ts b/packages/mui-base/src/SelectUnstyled/index.ts
index 4245c00702824b..74eed226187b47 100644
--- a/packages/mui-base/src/SelectUnstyled/index.ts
+++ b/packages/mui-base/src/SelectUnstyled/index.ts
@@ -1,10 +1,6 @@
 export { default } from './SelectUnstyled';
 
-export * from './SelectUnstyledContext';
-
 export { default as selectUnstyledClasses } from './selectUnstyledClasses';
 export * from './selectUnstyledClasses';
 
 export * from './SelectUnstyled.types';
-
-export * from './utils';
diff --git a/packages/mui-base/src/SelectUnstyled/utils.tsx b/packages/mui-base/src/SelectUnstyled/utils.tsx
deleted file mode 100644
index bbee32da77e7a0..00000000000000
--- a/packages/mui-base/src/SelectUnstyled/utils.tsx
+++ /dev/null
@@ -1,75 +0,0 @@
-import * as React from 'react';
-import { OptionUnstyledProps } from '../OptionUnstyled/OptionUnstyled.types';
-import { OptionGroupUnstyledProps } from '../OptionGroupUnstyled';
-import { isOptionGroup, SelectChild, SelectOption, SelectOptionGroup } from '../useSelect';
-
-export function areOptionsEqual<TValue>(
-  option1: SelectOption<TValue>,
-  option2: SelectOption<TValue>,
-) {
-  return (
-    option1.label === option2.label &&
-    option1.value === option2.value &&
-    option1.disabled === option2.disabled
-  );
-}
-
-export function getOptionsFromChildren<TValue>(children: React.ReactNode): SelectChild<TValue>[] {
-  if (children == null) {
-    return [];
-  }
-
-  const selectChildren: SelectChild<TValue>[] = [];
-
-  React.Children.forEach(children, (node: React.ReactNode) => {
-    const nodeChildren = (node as React.ReactElement)?.props?.children;
-    if ((node as React.ReactElement)?.props?.value === undefined) {
-      if (nodeChildren != null) {
-        const element = node as React.ReactElement<OptionGroupUnstyledProps>;
-
-        const group: SelectOptionGroup<TValue> = {
-          options: getOptionsFromChildren<TValue>(nodeChildren),
-          label: element.props.label,
-          disabled: element.props.disabled ?? false,
-        };
-
-        selectChildren.push(group);
-      }
-
-      return;
-    }
-
-    const element = node as React.ReactElement<OptionUnstyledProps<TValue>>;
-
-    const option = {
-      value: element.props.value,
-      label: element.props.label || element.props.children,
-      disabled: element.props.disabled ?? false,
-    };
-
-    selectChildren.push(option);
-  });
-
-  return selectChildren ?? [];
-}
-
-export function flattenOptionGroups<TValue>(
-  groupedOptions: SelectChild<TValue>[],
-  isGroupDisabled: boolean = false,
-): SelectOption<TValue>[] {
-  let flatOptions: SelectOption<TValue>[] = [];
-  groupedOptions.forEach((optionOrGroup) => {
-    if (isOptionGroup(optionOrGroup)) {
-      flatOptions = flatOptions.concat(
-        flattenOptionGroups(optionOrGroup.options, optionOrGroup.disabled),
-      );
-    } else {
-      flatOptions.push({
-        ...optionOrGroup,
-        disabled: isGroupDisabled || optionOrGroup.disabled,
-      });
-    }
-  });
-
-  return flatOptions;
-}
diff --git a/packages/mui-base/src/TabPanelUnstyled/TabPanelUnstyled.test.tsx b/packages/mui-base/src/TabPanelUnstyled/TabPanelUnstyled.test.tsx
index 7515487a5ee9c8..a8ce9b5decb8cf 100644
--- a/packages/mui-base/src/TabPanelUnstyled/TabPanelUnstyled.test.tsx
+++ b/packages/mui-base/src/TabPanelUnstyled/TabPanelUnstyled.test.tsx
@@ -1,29 +1,37 @@
 import * as React from 'react';
 import { createMount, createRenderer, describeConformanceUnstyled } from 'test/utils';
-import { TabsContext } from '@mui/base/TabsUnstyled';
 import TabPanelUnstyled, { tabPanelUnstyledClasses } from '@mui/base/TabPanelUnstyled';
+import { TabsProvider, TabsProviderValue } from '../useTabs';
 
 describe('<TabPanelUnstyled />', () => {
   const mount = createMount();
   const { render } = createRenderer();
 
+  const tabsProviderDefaultValue: TabsProviderValue = {
+    value: '1',
+    onSelected: () => {},
+    registerTabIdLookup() {},
+    getTabId: () => '',
+    getTabPanelId: () => '',
+    getItemIndex: () => 0,
+    registerItem: () => ({ id: 0, deregister: () => {} }),
+    totalSubitemCount: 1,
+    direction: 'ltr',
+    orientation: 'horizontal',
+    selectionFollowsFocus: false,
+  };
+
   describeConformanceUnstyled(<TabPanelUnstyled value="1" />, () => ({
     inheritComponent: 'div',
     render: (node) => {
       const { container, ...other } = render(
-        <TabsContext.Provider value={{ value: '1', idPrefix: '1', onSelected: () => {} }}>
-          {node}
-        </TabsContext.Provider>,
+        <TabsProvider value={tabsProviderDefaultValue}>{node}</TabsProvider>,
       );
 
       return { container, ...other };
     },
     mount: (node: any) => {
-      const wrapper = mount(
-        <TabsContext.Provider value={{ value: '1', idPrefix: '1', onSelected: () => {} }}>
-          {node}
-        </TabsContext.Provider>,
-      );
+      const wrapper = mount(<TabsProvider value={tabsProviderDefaultValue}>{node}</TabsProvider>);
       return wrapper.childAt(0);
     },
     refInstanceof: window.HTMLDivElement,
diff --git a/packages/mui-base/src/TabPanelUnstyled/TabPanelUnstyled.tsx b/packages/mui-base/src/TabPanelUnstyled/TabPanelUnstyled.tsx
index 80bbe720a47734..6be6b331b83581 100644
--- a/packages/mui-base/src/TabPanelUnstyled/TabPanelUnstyled.tsx
+++ b/packages/mui-base/src/TabPanelUnstyled/TabPanelUnstyled.tsx
@@ -94,8 +94,10 @@ TabPanelUnstyled.propTypes /* remove-proptypes */ = {
   }),
   /**
    * The value of the TabPanel. It will be shown when the Tab with the corresponding value is selected.
+   * If not provided, it will fall back to the index of the panel.
+   * It is recommended to explicitly provide it, as it's required for the tab panel to be rendered on the server.
    */
-  value: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
+  value: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
 } as any;
 
 export default TabPanelUnstyled;
diff --git a/packages/mui-base/src/TabPanelUnstyled/TabPanelUnstyled.types.ts b/packages/mui-base/src/TabPanelUnstyled/TabPanelUnstyled.types.ts
index 072c6a73b68d19..b34825d803837a 100644
--- a/packages/mui-base/src/TabPanelUnstyled/TabPanelUnstyled.types.ts
+++ b/packages/mui-base/src/TabPanelUnstyled/TabPanelUnstyled.types.ts
@@ -13,8 +13,10 @@ export interface TabPanelUnstyledOwnProps {
   className?: string;
   /**
    * The value of the TabPanel. It will be shown when the Tab with the corresponding value is selected.
+   * If not provided, it will fall back to the index of the panel.
+   * It is recommended to explicitly provide it, as it's required for the tab panel to be rendered on the server.
    */
-  value: number | string;
+  value?: number | string;
   /**
    * The components used for each slot inside the TabPanel.
    * Either a string to use a HTML element or a component.
diff --git a/packages/mui-base/src/TabUnstyled/TabUnstyled.spec.tsx b/packages/mui-base/src/TabUnstyled/TabUnstyled.spec.tsx
index a093230a9ac0c6..5829f1163a27cc 100644
--- a/packages/mui-base/src/TabUnstyled/TabUnstyled.spec.tsx
+++ b/packages/mui-base/src/TabUnstyled/TabUnstyled.spec.tsx
@@ -7,7 +7,7 @@ function Root(props: TabUnstyledRootSlotProps) {
   return <div data-active={ownerState.active} {...other} />;
 }
 
-const styledTab = <TabUnstyled slots={{ root: Root }} />;
+const styledTab = <TabUnstyled value={0} slots={{ root: Root }} />;
 
 const polymorphicComponentTest = () => {
   const CustomComponent: React.FC<{ stringProp: string; numberProp: number }> =
@@ -18,20 +18,22 @@ const polymorphicComponentTest = () => {
   return (
     <div>
       {/* @ts-expect-error */}
-      <TabUnstyled invalidProp={0} />
+      <TabUnstyled value={0} invalidProp={0} />
 
-      <TabUnstyled component="a" href="#" />
+      <TabUnstyled value={0} component="a" href="#" />
 
-      <TabUnstyled component={CustomComponent} stringProp="test" numberProp={0} />
+      <TabUnstyled value={0} component={CustomComponent} stringProp="test" numberProp={0} />
       {/* @ts-expect-error */}
-      <TabUnstyled component={CustomComponent} />
+      <TabUnstyled value={0} component={CustomComponent} />
 
       <TabUnstyled
+        value={0}
         component="button"
         onClick={(e: React.MouseEvent<HTMLButtonElement>) => e.currentTarget.checkValidity()}
       />
 
       <TabUnstyled<'button'>
+        value={0}
         component="button"
         ref={(elem) => {
           expectType<HTMLButtonElement | null, typeof elem>(elem);
diff --git a/packages/mui-base/src/TabUnstyled/TabUnstyled.test.tsx b/packages/mui-base/src/TabUnstyled/TabUnstyled.test.tsx
index 74c8c497f8c192..28b85cc00bf4fa 100644
--- a/packages/mui-base/src/TabUnstyled/TabUnstyled.test.tsx
+++ b/packages/mui-base/src/TabUnstyled/TabUnstyled.test.tsx
@@ -1,18 +1,39 @@
 import * as React from 'react';
 import { createMount, createRenderer, describeConformanceUnstyled } from 'test/utils';
 import TabUnstyled, { tabUnstyledClasses } from '@mui/base/TabUnstyled';
-import { TabsContext } from '@mui/base/TabsUnstyled';
+import { TabsListProvider, TabsListProviderValue } from '../useTabsList';
+import { TabsContext } from '../TabsUnstyled';
 
 describe('<TabUnstyled />', () => {
   const mount = createMount();
   const { render } = createRenderer();
 
+  const testTabsListContext: TabsListProviderValue = {
+    dispatch: () => {},
+    registerItem: () => ({ id: 0, deregister: () => {} }),
+    getItemIndex: () => 0,
+    totalSubitemCount: 1,
+    getItemState() {
+      return { disabled: false, highlighted: false, selected: false, focusable: true, index: 0 };
+    },
+    registerHighlightChangeHandler: () => () => {},
+    registerSelectionChangeHandler: () => () => {},
+  };
+
   describeConformanceUnstyled(<TabUnstyled value="1" />, () => ({
     inheritComponent: 'div',
     render: (node) => {
       const { container, ...other } = render(
-        <TabsContext.Provider value={{ value: '1', idPrefix: '1', onSelected: () => {} }}>
-          {node}
+        <TabsContext.Provider
+          value={{
+            value: 0,
+            onSelected() {},
+            registerTabIdLookup() {},
+            getTabId: () => '',
+            getTabPanelId: () => '',
+          }}
+        >
+          <TabsListProvider value={testTabsListContext}>{node}</TabsListProvider>
         </TabsContext.Provider>,
       );
 
@@ -20,8 +41,16 @@ describe('<TabUnstyled />', () => {
     },
     mount: (node: any) => {
       const wrapper = mount(
-        <TabsContext.Provider value={{ value: '1', idPrefix: '1', onSelected: () => {} }}>
-          {node}
+        <TabsContext.Provider
+          value={{
+            value: 0,
+            onSelected() {},
+            registerTabIdLookup() {},
+            getTabId: () => '',
+            getTabPanelId: () => '',
+          }}
+        >
+          <TabsListProvider value={testTabsListContext}>{node}</TabsListProvider>
         </TabsContext.Provider>,
       );
       return wrapper.childAt(0);
diff --git a/packages/mui-base/src/TabUnstyled/TabUnstyled.tsx b/packages/mui-base/src/TabUnstyled/TabUnstyled.tsx
index e49a1b4781fcad..03fc10ec8960e6 100644
--- a/packages/mui-base/src/TabUnstyled/TabUnstyled.tsx
+++ b/packages/mui-base/src/TabUnstyled/TabUnstyled.tsx
@@ -51,27 +51,16 @@ const TabUnstyled = React.forwardRef<unknown, TabUnstyledProps>(function TabUnst
   const tabRef = React.useRef<HTMLButtonElement | HTMLAnchorElement | HTMLElement>();
   const handleRef = useForkRef(tabRef, ref);
 
-  const { active, focusVisible, setFocusVisible, selected, getRootProps } = useTab({
+  const { active, highlighted, selected, getRootProps } = useTab({
     ...props,
     ref: handleRef,
   });
 
-  React.useImperativeHandle(
-    action,
-    () => ({
-      focusVisible: () => {
-        setFocusVisible(true);
-        tabRef.current!.focus();
-      },
-    }),
-    [setFocusVisible],
-  );
-
   const ownerState = {
     ...props,
     active,
-    focusVisible,
     disabled,
+    highlighted,
     selected,
   };
 
diff --git a/packages/mui-base/src/TabUnstyled/TabUnstyled.types.ts b/packages/mui-base/src/TabUnstyled/TabUnstyled.types.ts
index 8d7a89ef984134..bf3bcd75b3cc5c 100644
--- a/packages/mui-base/src/TabUnstyled/TabUnstyled.types.ts
+++ b/packages/mui-base/src/TabUnstyled/TabUnstyled.types.ts
@@ -53,8 +53,8 @@ export interface TabUnstyledTypeMap<P = {}, D extends React.ElementType = 'butto
 
 export type TabUnstyledOwnerState = TabUnstyledProps & {
   active: boolean;
-  focusVisible: boolean;
   disabled: boolean;
+  highlighted: boolean;
   selected: boolean;
 };
 
diff --git a/packages/mui-base/src/TabsListUnstyled/TabsListUnstyled.test.tsx b/packages/mui-base/src/TabsListUnstyled/TabsListUnstyled.test.tsx
index 1467f7bdbcc85f..0f9ed6926be19f 100644
--- a/packages/mui-base/src/TabsListUnstyled/TabsListUnstyled.test.tsx
+++ b/packages/mui-base/src/TabsListUnstyled/TabsListUnstyled.test.tsx
@@ -11,7 +11,15 @@ describe('<TabsListUnstyled />', () => {
     inheritComponent: 'div',
     render: (node) => {
       const { container, ...other } = render(
-        <TabsContext.Provider value={{ value: '1', idPrefix: '1', onSelected: () => {} }}>
+        <TabsContext.Provider
+          value={{
+            value: '1',
+            onSelected: () => {},
+            registerTabIdLookup() {},
+            getTabId: () => '',
+            getTabPanelId: () => '',
+          }}
+        >
           {node}
         </TabsContext.Provider>,
       );
@@ -20,7 +28,15 @@ describe('<TabsListUnstyled />', () => {
     },
     mount: (node: any) => {
       const wrapper = mount(
-        <TabsContext.Provider value={{ value: '1', idPrefix: '1', onSelected: () => {} }}>
+        <TabsContext.Provider
+          value={{
+            value: '1',
+            onSelected: () => {},
+            registerTabIdLookup() {},
+            getTabId: () => '',
+            getTabPanelId: () => '',
+          }}
+        >
           {node}
         </TabsContext.Provider>,
       );
diff --git a/packages/mui-base/src/TabsListUnstyled/TabsListUnstyled.tsx b/packages/mui-base/src/TabsListUnstyled/TabsListUnstyled.tsx
index e9ac6199bfd266..36061335060123 100644
--- a/packages/mui-base/src/TabsListUnstyled/TabsListUnstyled.tsx
+++ b/packages/mui-base/src/TabsListUnstyled/TabsListUnstyled.tsx
@@ -11,6 +11,7 @@ import {
 } from './TabsListUnstyled.types';
 import useTabsList from '../useTabsList';
 import { useClassNamesOverride } from '../utils/ClassNameConfigurator';
+import TabsListProvider from '../useTabsList/TabsListProvider';
 
 const useUtilityClasses = (ownerState: { orientation: 'horizontal' | 'vertical' }) => {
   const { orientation } = ownerState;
@@ -32,10 +33,15 @@ 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>((props, ref) => {
+const TabsListUnstyled = React.forwardRef<unknown, TabsListUnstyledProps>(function TabsListUnstyled(
+  props,
+  ref,
+) {
   const { children, component, slotProps = {}, slots = {}, ...other } = props;
 
-  const { isRtl, orientation, getRootProps, processChildren } = useTabsList({ ...props, ref });
+  const { isRtl, orientation, getRootProps, contextValue } = useTabsList({
+    ref,
+  });
 
   const ownerState = {
     ...props,
@@ -55,9 +61,11 @@ const TabsListUnstyled = React.forwardRef<unknown, TabsListUnstyledProps>((props
     className: classes.root,
   });
 
-  const processedChildren = processChildren();
-
-  return <TabsListRoot {...tabsListRootProps}>{processedChildren}</TabsListRoot>;
+  return (
+    <TabsListProvider value={contextValue}>
+      <TabsListRoot {...tabsListRootProps}>{children}</TabsListRoot>
+    </TabsListProvider>
+  );
 }) as OverridableComponent<TabsListUnstyledTypeMap>;
 
 TabsListUnstyled.propTypes /* remove-proptypes */ = {
diff --git a/packages/mui-base/src/TabsUnstyled/TabsContext.ts b/packages/mui-base/src/TabsUnstyled/TabsContext.ts
index 1752319ef080fc..38b0d6a233dd80 100644
--- a/packages/mui-base/src/TabsUnstyled/TabsContext.ts
+++ b/packages/mui-base/src/TabsUnstyled/TabsContext.ts
@@ -1,31 +1,41 @@
 import * as React from 'react';
 
 export interface TabsContextValue {
-  /**
-   * Id used as a prefix for the current Tabs.
-   */
-  idPrefix: string | undefined;
   /**
    * The currently selected tab's value.
    */
-  value: number | string | false;
+  value: number | string | null;
   /**
    * Callback for setting new value.
    */
-  onSelected: (event: React.SyntheticEvent, value: number | string | false) => void;
+  onSelected: (event: React.SyntheticEvent | null, value: number | string | null) => void;
   /**
    * The component orientation (layout flow direction).
    */
   orientation?: 'horizontal' | 'vertical';
   /**
-   * The direction of the text.
+   * The direction of the tabs.
    */
   direction?: 'ltr' | 'rtl';
+  /**
+   * Registers a function that returns the id of the tab with the given value.
+   */
+  registerTabIdLookup: (lookupFunction: (id: string | number) => string | undefined) => void;
   /**
    * If `true` the selected tab changes on focus. Otherwise it only
    * changes on activation.
    */
   selectionFollowsFocus?: boolean;
+  /**
+   * Gets the id of the tab with the given value.
+   * @param value Value to find the tab for.
+   */
+  getTabId: (value: number | string) => string | undefined;
+  /**
+   * Gets the id of the tab panel with the given value.
+   * @param value Value to find the tab panel for.
+   */
+  getTabPanelId: (value: number | string) => string | undefined;
 }
 
 /**
@@ -37,27 +47,13 @@ if (process.env.NODE_ENV !== 'production') {
   Context.displayName = 'TabsContext';
 }
 
-/**
- * @returns {unknown}
- */
-export function useTabContext() {
-  return React.useContext(Context);
-}
-
-export function getPanelId(context: TabsContextValue, value: number | string | false) {
-  const { idPrefix } = context;
-  if (idPrefix === null) {
-    return null;
+export function useTabsContext() {
+  const context = React.useContext(Context);
+  if (context == null) {
+    throw new Error('No TabsContext provided');
   }
-  return `${context.idPrefix}-P-${value}`;
-}
 
-export function getTabId(context: TabsContextValue, value: number | string | false) {
-  const { idPrefix } = context;
-  if (idPrefix === null) {
-    return null;
-  }
-  return `${context.idPrefix}-T-${value}`;
+  return context;
 }
 
 export default Context;
diff --git a/packages/mui-base/src/TabsUnstyled/TabsUnstyled.test.tsx b/packages/mui-base/src/TabsUnstyled/TabsUnstyled.test.tsx
index 282b974d1c5bd9..380b5744f452bf 100644
--- a/packages/mui-base/src/TabsUnstyled/TabsUnstyled.test.tsx
+++ b/packages/mui-base/src/TabsUnstyled/TabsUnstyled.test.tsx
@@ -12,6 +12,7 @@ import {
 import Tab from '@mui/base/TabUnstyled';
 import Tabs, { tabsUnstyledClasses as classes, TabsUnstyledProps } from '@mui/base/TabsUnstyled';
 import TabsList from '@mui/base/TabsListUnstyled';
+import TabPanel from '@mui/base/TabPanelUnstyled';
 
 describe('<TabsUnstyled />', () => {
   const mount = createMount();
@@ -48,7 +49,7 @@ describe('<TabsUnstyled />', () => {
     render(
       <Tabs>
         <TabsList aria-label="string label">
-          <Tab />
+          <Tab value={0} />
         </TabsList>
       </Tabs>,
     );
@@ -62,7 +63,7 @@ describe('<TabsUnstyled />', () => {
         <h3 id="label-id">complex name</h3>
         <Tabs>
           <TabsList aria-labelledby="label-id">
-            <Tab />
+            <Tab value={0} />
           </TabsList>
         </Tabs>
       </React.Fragment>,
@@ -76,7 +77,9 @@ describe('<TabsUnstyled />', () => {
       const { getAllByRole } = render(
         <Tabs value={0}>
           {null}
-          <Tab />
+          <TabsList>
+            <Tab value={1} />
+          </TabsList>
         </Tabs>,
       );
       expect(getAllByRole('tab')).to.have.lengthOf(1);
@@ -90,8 +93,8 @@ describe('<TabsUnstyled />', () => {
       const { getAllByRole, setProps } = render(
         <Tabs value={1}>
           <TabsList>
-            <Tab />
-            <Tab />
+            <Tab value={0} />
+            <Tab value={1} />
           </TabsList>
         </Tabs>,
       );
@@ -102,14 +105,64 @@ describe('<TabsUnstyled />', () => {
 
       expect(getAllByRole('tab').map((tab) => tab.tabIndex)).to.have.ordered.members([0, -1]);
     });
+
+    it('sets the aria-labelledby attribute on tab panels to the corresponding tab id', () => {
+      const { getAllByRole } = render(
+        <Tabs>
+          <TabsList>
+            <Tab value="tab-0" />
+            <Tab value="tab-1" id="explicit-tab-id-1" />
+            <Tab />
+            <Tab id="explicit-tab-id-3" />
+          </TabsList>
+          <TabPanel value="tab-1" />
+          <TabPanel value="tab-0" />
+          <TabPanel />
+          <TabPanel />
+        </Tabs>,
+      );
+
+      const tabs = getAllByRole('tab');
+      const tabPanels = getAllByRole('tabpanel', { hidden: true });
+
+      expect(tabPanels[0]).to.have.attribute('aria-labelledby', tabs[1].id);
+      expect(tabPanels[1]).to.have.attribute('aria-labelledby', tabs[0].id);
+      expect(tabPanels[2]).to.have.attribute('aria-labelledby', tabs[2].id);
+      expect(tabPanels[3]).to.have.attribute('aria-labelledby', tabs[3].id);
+    });
+
+    it('sets the aria-controls attribute on tabs to the corresponding tab panel id', () => {
+      const { getAllByRole } = render(
+        <Tabs>
+          <TabsList>
+            <Tab value="tab-0" />
+            <Tab value="tab-1" id="explicit-tab-id-1" />
+            <Tab />
+            <Tab id="explicit-tab-id-3" />
+          </TabsList>
+          <TabPanel value="tab-1" />
+          <TabPanel value="tab-0" />
+          <TabPanel />
+          <TabPanel />
+        </Tabs>,
+      );
+
+      const tabs = getAllByRole('tab');
+      const tabPanels = getAllByRole('tabpanel', { hidden: true });
+
+      expect(tabs[0]).to.have.attribute('aria-controls', tabPanels[1].id);
+      expect(tabs[1]).to.have.attribute('aria-controls', tabPanels[0].id);
+      expect(tabs[2]).to.have.attribute('aria-controls', tabPanels[2].id);
+      expect(tabs[3]).to.have.attribute('aria-controls', tabPanels[3].id);
+    });
   });
 
   describe('prop: value', () => {
     const tabs = (
       <Tabs value={1}>
         <TabsList>
-          <Tab />
-          <Tab />
+          <Tab value={0} />
+          <Tab value={1} />
         </TabsList>
       </Tabs>
     );
@@ -128,8 +181,8 @@ describe('<TabsUnstyled />', () => {
       const { getAllByRole } = render(
         <Tabs value={0} onChange={handleChange}>
           <TabsList>
-            <Tab />
-            <Tab />
+            <Tab value={0} />
+            <Tab value={1} />
           </TabsList>
         </Tabs>,
       );
@@ -144,8 +197,8 @@ describe('<TabsUnstyled />', () => {
       const { getAllByRole } = render(
         <Tabs value={0} onChange={handleChange}>
           <TabsList>
-            <Tab />
-            <Tab />
+            <Tab value={0} />
+            <Tab value={1} />
           </TabsList>
         </Tabs>,
       );
@@ -159,17 +212,19 @@ describe('<TabsUnstyled />', () => {
       const { getAllByRole } = render(
         <Tabs value={0} onChange={handleChange} selectionFollowsFocus>
           <TabsList>
-            <Tab />
-            <Tab />
+            <Tab value={0} />
+            <Tab value={1} />
           </TabsList>
         </Tabs>,
       );
-      const [, lastTab] = getAllByRole('tab');
+      const [firstTab] = getAllByRole('tab');
 
       act(() => {
-        lastTab.focus();
+        firstTab.focus();
       });
 
+      fireEvent.keyDown(firstTab, { key: 'ArrowRight' });
+
       expect(handleChange.callCount).to.equal(1);
       expect(handleChange.firstCall.args[1]).to.equal(1);
     });
@@ -179,8 +234,8 @@ describe('<TabsUnstyled />', () => {
       const { getAllByRole } = render(
         <Tabs value={0} onChange={handleChange} selectionFollowsFocus>
           <TabsList>
-            <Tab />
-            <Tab />
+            <Tab value={0} />
+            <Tab value={1} />
           </TabsList>
         </Tabs>,
       );
@@ -239,12 +294,12 @@ describe('<TabsUnstyled />', () => {
                 onChange={handleChange}
                 onKeyDown={handleKeyDown}
                 orientation={orientation as TabsUnstyledProps['orientation']}
-                value={1}
+                value={0}
               >
                 <TabsList>
-                  <Tab />
-                  <Tab />
-                  <Tab />
+                  <Tab value={0} />
+                  <Tab value={1} />
+                  <Tab value={2} />
                 </TabsList>
               </Tabs>,
             );
@@ -274,9 +329,9 @@ describe('<TabsUnstyled />', () => {
                 value={0}
               >
                 <TabsList>
-                  <Tab />
-                  <Tab />
-                  <Tab />
+                  <Tab value={0} />
+                  <Tab value={1} />
+                  <Tab value={2} />
                 </TabsList>
               </Tabs>,
             );
@@ -306,9 +361,9 @@ describe('<TabsUnstyled />', () => {
                 value={1}
               >
                 <TabsList>
-                  <Tab />
-                  <Tab />
-                  <Tab />
+                  <Tab value={0} />
+                  <Tab value={1} />
+                  <Tab value={2} />
                 </TabsList>
               </Tabs>,
             );
@@ -338,9 +393,9 @@ describe('<TabsUnstyled />', () => {
                 value={1}
               >
                 <TabsList>
-                  <Tab />
-                  <Tab />
-                  <Tab />
+                  <Tab value={0} />
+                  <Tab value={1} />
+                  <Tab value={2} />
                 </TabsList>
               </Tabs>,
             );
@@ -366,12 +421,12 @@ describe('<TabsUnstyled />', () => {
                 onKeyDown={handleKeyDown}
                 orientation={orientation as TabsUnstyledProps['orientation']}
                 selectionFollowsFocus
-                value={1}
+                value={2}
               >
                 <TabsList>
-                  <Tab />
-                  <Tab disabled />
-                  <Tab />
+                  <Tab value={0} />
+                  <Tab value={1} disabled />
+                  <Tab value={2} />
                 </TabsList>
               </Tabs>,
             );
@@ -398,12 +453,12 @@ describe('<TabsUnstyled />', () => {
                 onChange={handleChange}
                 onKeyDown={handleKeyDown}
                 orientation={orientation as TabsUnstyledProps['orientation']}
-                value={1}
+                value={2}
               >
                 <TabsList>
-                  <Tab />
-                  <Tab />
-                  <Tab />
+                  <Tab value={0} />
+                  <Tab value={1} />
+                  <Tab value={2} />
                 </TabsList>
               </Tabs>,
             );
@@ -433,9 +488,9 @@ describe('<TabsUnstyled />', () => {
                 value={2}
               >
                 <TabsList>
-                  <Tab />
-                  <Tab />
-                  <Tab />
+                  <Tab value={0} />
+                  <Tab value={1} />
+                  <Tab value={2} />
                 </TabsList>
               </Tabs>,
             );
@@ -465,9 +520,9 @@ describe('<TabsUnstyled />', () => {
                 value={1}
               >
                 <TabsList>
-                  <Tab />
-                  <Tab />
-                  <Tab />
+                  <Tab value={0} />
+                  <Tab value={1} />
+                  <Tab value={2} />
                 </TabsList>
               </Tabs>,
             );
@@ -484,7 +539,7 @@ describe('<TabsUnstyled />', () => {
             expect(handleKeyDown.firstCall.args[0]).to.have.property('defaultPrevented', true);
           });
 
-          it('when `selectionFollowsFocus` moves focus to the next tab while activating it it', () => {
+          it('when `selectionFollowsFocus` moves focus to the next tab while activating it', () => {
             const handleChange = spy();
             const handleKeyDown = spy();
             const { getAllByRole } = render(
@@ -497,9 +552,9 @@ describe('<TabsUnstyled />', () => {
                 value={1}
               >
                 <TabsList>
-                  <Tab />
-                  <Tab />
-                  <Tab />
+                  <Tab value={0} />
+                  <Tab value={1} />
+                  <Tab value={2} />
                 </TabsList>
               </Tabs>,
             );
@@ -525,12 +580,12 @@ describe('<TabsUnstyled />', () => {
                 onKeyDown={handleKeyDown}
                 orientation={orientation as TabsUnstyledProps['orientation']}
                 selectionFollowsFocus
-                value={1}
+                value={0}
               >
                 <TabsList>
-                  <Tab />
-                  <Tab disabled />
-                  <Tab />
+                  <Tab value={0} />
+                  <Tab value={1} disabled />
+                  <Tab value={2} />
                 </TabsList>
               </Tabs>,
             );
@@ -555,11 +610,11 @@ describe('<TabsUnstyled />', () => {
           const handleChange = spy();
           const handleKeyDown = spy();
           const { getAllByRole } = render(
-            <Tabs onChange={handleChange} onKeyDown={handleKeyDown} value={1}>
+            <Tabs onChange={handleChange} onKeyDown={handleKeyDown} value={2}>
               <TabsList>
-                <Tab />
-                <Tab />
-                <Tab />
+                <Tab value={0} />
+                <Tab value={1} />
+                <Tab value={2} />
               </TabsList>
             </Tabs>,
           );
@@ -582,9 +637,9 @@ describe('<TabsUnstyled />', () => {
           const { getAllByRole } = render(
             <Tabs onChange={handleChange} onKeyDown={handleKeyDown} selectionFollowsFocus value={2}>
               <TabsList>
-                <Tab />
-                <Tab />
-                <Tab />
+                <Tab value={0} />
+                <Tab value={1} />
+                <Tab value={2} />
               </TabsList>
             </Tabs>,
           );
@@ -607,9 +662,9 @@ describe('<TabsUnstyled />', () => {
           const { getAllByRole } = render(
             <Tabs onKeyDown={handleKeyDown} selectionFollowsFocus value={2}>
               <TabsList>
-                <Tab disabled />
-                <Tab />
-                <Tab />
+                <Tab value={0} disabled />
+                <Tab value={1} />
+                <Tab value={2} />
               </TabsList>
             </Tabs>,
           );
@@ -631,11 +686,11 @@ describe('<TabsUnstyled />', () => {
           const handleChange = spy();
           const handleKeyDown = spy();
           const { getAllByRole } = render(
-            <Tabs onChange={handleChange} onKeyDown={handleKeyDown} value={1}>
+            <Tabs onChange={handleChange} onKeyDown={handleKeyDown} value={0}>
               <TabsList>
-                <Tab />
-                <Tab />
-                <Tab />
+                <Tab value={0} />
+                <Tab value={1} />
+                <Tab value={2} />
               </TabsList>
             </Tabs>,
           );
@@ -658,9 +713,9 @@ describe('<TabsUnstyled />', () => {
           const { getAllByRole } = render(
             <Tabs onChange={handleChange} onKeyDown={handleKeyDown} selectionFollowsFocus value={0}>
               <TabsList>
-                <Tab />
-                <Tab />
-                <Tab />
+                <Tab value={0} />
+                <Tab value={1} />
+                <Tab value={2} />
               </TabsList>
             </Tabs>,
           );
@@ -681,11 +736,11 @@ describe('<TabsUnstyled />', () => {
         it('moves focus to first non-disabled tab', () => {
           const handleKeyDown = spy();
           const { getAllByRole } = render(
-            <Tabs onKeyDown={handleKeyDown} selectionFollowsFocus value={2}>
+            <Tabs onKeyDown={handleKeyDown} selectionFollowsFocus value={0}>
               <TabsList>
-                <Tab />
-                <Tab />
-                <Tab disabled />
+                <Tab value={0} />
+                <Tab value={1} />
+                <Tab value={2} disabled />
               </TabsList>
             </Tabs>,
           );
@@ -705,10 +760,10 @@ describe('<TabsUnstyled />', () => {
 
     it('should allow to focus first tab when there are no active tabs', () => {
       const { getAllByRole } = render(
-        <Tabs value={false}>
+        <Tabs>
           <TabsList>
-            <Tab />
-            <Tab />
+            <Tab value={0} />
+            <Tab value={1} />
           </TabsList>
         </Tabs>,
       );
diff --git a/packages/mui-base/src/TabsUnstyled/TabsUnstyled.tsx b/packages/mui-base/src/TabsUnstyled/TabsUnstyled.tsx
index 4791bbb4db9077..144dc41dda0b9d 100644
--- a/packages/mui-base/src/TabsUnstyled/TabsUnstyled.tsx
+++ b/packages/mui-base/src/TabsUnstyled/TabsUnstyled.tsx
@@ -10,7 +10,7 @@ import {
   TabsUnstyledTypeMap,
 } from './TabsUnstyled.types';
 import useTabs from '../useTabs';
-import Context from './TabsContext';
+import TabsProvider from '../useTabs/TabsProvider';
 import { useClassNamesOverride } from '../utils/ClassNameConfigurator';
 
 const useUtilityClasses = (ownerState: { orientation: 'horizontal' | 'vertical' }) => {
@@ -33,7 +33,10 @@ const useUtilityClasses = (ownerState: { orientation: 'horizontal' | 'vertical'
  *
  * - [TabsUnstyled API](https://mui.com/base/react-tabs/components-api/#tabs-unstyled)
  */
-const TabsUnstyled = React.forwardRef<unknown, TabsUnstyledProps>((props, ref) => {
+const TabsUnstyled = React.forwardRef<unknown, TabsUnstyledProps>(function TabsUnstyled(
+  props,
+  ref,
+) {
   const {
     children,
     value: valueProp,
@@ -48,7 +51,7 @@ const TabsUnstyled = React.forwardRef<unknown, TabsUnstyledProps>((props, ref) =
     ...other
   } = props;
 
-  const { tabsContextValue } = useTabs(props);
+  const { contextValue } = useTabs(props);
 
   const ownerState = {
     ...props,
@@ -72,7 +75,7 @@ const TabsUnstyled = React.forwardRef<unknown, TabsUnstyledProps>((props, ref) =
 
   return (
     <TabsRoot {...tabsRootProps}>
-      <Context.Provider value={tabsContextValue}>{children}</Context.Provider>
+      <TabsProvider value={contextValue}>{children}</TabsProvider>
     </TabsRoot>
   );
 }) as OverridableComponent<TabsUnstyledTypeMap>;
@@ -94,7 +97,7 @@ TabsUnstyled.propTypes /* remove-proptypes */ = {
   /**
    * The default value. Use when the component is not controlled.
    */
-  defaultValue: PropTypes.oneOfType([PropTypes.oneOf([false]), PropTypes.number, PropTypes.string]),
+  defaultValue: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
   /**
    * The direction of the text.
    * @default 'ltr'
@@ -131,9 +134,9 @@ TabsUnstyled.propTypes /* remove-proptypes */ = {
   }),
   /**
    * The value of the currently selected `Tab`.
-   * If you don't want any selected `Tab`, you can set this prop to `false`.
+   * If you don't want any selected `Tab`, you can set this prop to `null`.
    */
-  value: PropTypes.oneOfType([PropTypes.oneOf([false]), PropTypes.number, PropTypes.string]),
+  value: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
 } as any;
 
 export default TabsUnstyled;
diff --git a/packages/mui-base/src/TabsUnstyled/TabsUnstyled.types.ts b/packages/mui-base/src/TabsUnstyled/TabsUnstyled.types.ts
index 9b094fe5378b69..f18333fd9e5d7b 100644
--- a/packages/mui-base/src/TabsUnstyled/TabsUnstyled.types.ts
+++ b/packages/mui-base/src/TabsUnstyled/TabsUnstyled.types.ts
@@ -15,13 +15,13 @@ export interface TabsUnstyledOwnProps {
   children?: React.ReactNode;
   /**
    * The value of the currently selected `Tab`.
-   * If you don't want any selected `Tab`, you can set this prop to `false`.
+   * If you don't want any selected `Tab`, you can set this prop to `null`.
    */
-  value?: string | number | false;
+  value?: string | number | null;
   /**
    * The default value. Use when the component is not controlled.
    */
-  defaultValue?: string | number | false;
+  defaultValue?: string | number | null;
   /**
    * The component orientation (layout flow direction).
    * @default 'horizontal'
@@ -36,7 +36,7 @@ export interface TabsUnstyledOwnProps {
   /**
    * Callback invoked when new value is being set.
    */
-  onChange?: (event: React.SyntheticEvent, value: number | string | boolean) => void;
+  onChange?: (event: React.SyntheticEvent | null, value: number | string | null) => void;
   /**
    * If `true` the selected tab changes on focus. Otherwise it only
    * changes on activation.
diff --git a/packages/mui-base/src/index.d.ts b/packages/mui-base/src/index.d.ts
index c77372e6d90674..451930cca019f2 100644
--- a/packages/mui-base/src/index.d.ts
+++ b/packages/mui-base/src/index.d.ts
@@ -86,9 +86,6 @@ export * from './useButton';
 export { default as useInput } from './useInput';
 export * from './useInput';
 
-export { default as useListbox } from './useListbox';
-export * from './useListbox';
-
 export { default as useMenu } from './useMenu';
 export * from './useMenu';
 
diff --git a/packages/mui-base/src/index.js b/packages/mui-base/src/index.js
index c11b9f3834e2ac..f78c30b8701fee 100644
--- a/packages/mui-base/src/index.js
+++ b/packages/mui-base/src/index.js
@@ -80,9 +80,6 @@ export * from './useButton';
 export { default as useInput } from './useInput';
 export * from './useInput';
 
-export { default as useListbox } from './useListbox';
-export * from './useListbox';
-
 export { default as useMenu } from './useMenu';
 export * from './useMenu';
 
diff --git a/packages/mui-base/src/useButton/useButton.ts b/packages/mui-base/src/useButton/useButton.ts
index a8e4907bfcdb14..588e1403fcf32a 100644
--- a/packages/mui-base/src/useButton/useButton.ts
+++ b/packages/mui-base/src/useButton/useButton.ts
@@ -235,5 +235,6 @@ export default function useButton(parameters: UseButtonParameters): UseButtonRet
     setFocusVisible,
     disabled,
     active,
+    ref: handleRef,
   };
 }
diff --git a/packages/mui-base/src/useButton/useButton.types.ts b/packages/mui-base/src/useButton/useButton.types.ts
index 77e5fcb0899eab..dbb5dc7dfea83c 100644
--- a/packages/mui-base/src/useButton/useButton.types.ts
+++ b/packages/mui-base/src/useButton/useButton.types.ts
@@ -69,4 +69,8 @@ export interface UseButtonReturnValue {
    * @default false
    */
   active: boolean;
+  /**
+   * A ref to the component's root DOM element.
+   */
+  ref: ((instance: unknown) => void) | null;
 }
diff --git a/packages/mui-base/src/useList/ListContext.ts b/packages/mui-base/src/useList/ListContext.ts
new file mode 100644
index 00000000000000..f4eb99490fa215
--- /dev/null
+++ b/packages/mui-base/src/useList/ListContext.ts
@@ -0,0 +1,17 @@
+import * as React from 'react';
+import { ListAction } from './listActions.types';
+import { ListItemState } from './useList.types';
+
+export interface ListContextValue<ItemValue> {
+  dispatch: (action: ListAction<ItemValue>) => void;
+  getItemState: (item: ItemValue) => ListItemState;
+  registerHighlightChangeHandler: (handler: (item: ItemValue | null) => void) => () => void;
+  registerSelectionChangeHandler: (
+    handler: (items: ItemValue | ItemValue[] | null) => void,
+  ) => () => void;
+}
+
+export const ListContext = React.createContext<ListContextValue<any> | null>(null);
+if (process.env.NODE_ENV !== 'production') {
+  ListContext.displayName = 'ListContext';
+}
diff --git a/packages/mui-base/src/useList/index.ts b/packages/mui-base/src/useList/index.ts
new file mode 100644
index 00000000000000..78dd449f74e7c3
--- /dev/null
+++ b/packages/mui-base/src/useList/index.ts
@@ -0,0 +1,12 @@
+export { default } from './useList';
+export * from './useList.types';
+
+export { default as useListItem } from './useListItem';
+export * from './useListItem.types';
+
+export { default as listReducer } from './listReducer';
+export * from './listReducer';
+
+export * from './listActions.types';
+
+export * from './ListContext';
diff --git a/packages/mui-base/src/useList/listActions.types.ts b/packages/mui-base/src/useList/listActions.types.ts
new file mode 100644
index 00000000000000..3c30cfd155aef8
--- /dev/null
+++ b/packages/mui-base/src/useList/listActions.types.ts
@@ -0,0 +1,62 @@
+export const ListActionTypes = {
+  blur: 'list:blur',
+  focus: 'list:focus',
+  keyDown: 'list:keyDown',
+  itemClick: 'list:itemClick',
+  itemHover: 'list:itemHover',
+  itemsChange: 'list:itemsChange',
+  textNavigation: 'list:textNavigation',
+} as const;
+
+interface ItemClickAction<ItemValue> {
+  type: typeof ListActionTypes.itemClick;
+  item: ItemValue;
+  event: React.MouseEvent;
+}
+
+interface ItemHoverAction<ItemValue> {
+  type: typeof ListActionTypes.itemHover;
+  item: ItemValue;
+  event: React.MouseEvent;
+}
+
+interface FocusAction {
+  type: typeof ListActionTypes.focus;
+  event: React.FocusEvent;
+}
+
+interface BlurAction {
+  type: typeof ListActionTypes.blur;
+  event: React.FocusEvent;
+}
+
+interface KeyDownAction {
+  type: typeof ListActionTypes.keyDown;
+  key: string;
+  event: React.KeyboardEvent;
+}
+
+interface TextNavigationAction {
+  type: typeof ListActionTypes.textNavigation;
+  event: React.KeyboardEvent;
+  searchString: string;
+}
+
+interface ItemsChangeAction<ItemValue> {
+  type: typeof ListActionTypes.itemsChange;
+  event: null;
+  items: ItemValue[];
+  previousItems: ItemValue[];
+}
+
+/**
+ * A union of all standard actions that can be dispatched to the list reducer.
+ */
+export type ListAction<ItemValue> =
+  | BlurAction
+  | FocusAction
+  | ItemClickAction<ItemValue>
+  | ItemHoverAction<ItemValue>
+  | ItemsChangeAction<ItemValue>
+  | KeyDownAction
+  | TextNavigationAction;
diff --git a/packages/mui-base/src/useList/listReducer.test.ts b/packages/mui-base/src/useList/listReducer.test.ts
new file mode 100644
index 00000000000000..867795d3c6d10a
--- /dev/null
+++ b/packages/mui-base/src/useList/listReducer.test.ts
@@ -0,0 +1,1060 @@
+import * as React from 'react';
+import { expect } from 'chai';
+import listReducer from './listReducer';
+import { ListReducerAction, ListState } from './useList.types';
+import { ListActionTypes } from './listActions.types';
+
+describe('listReducer', () => {
+  describe('action: blur', () => {
+    it('resets the highlightedValue', () => {
+      const state: ListState<string> = {
+        highlightedValue: 'a',
+        selectedValues: [],
+      };
+
+      const action: ListReducerAction<string> = {
+        type: ListActionTypes.blur,
+        event: {} as any, // not relevant
+        context: {
+          items: [],
+          disableListWrap: false,
+          disabledItemsFocusable: false,
+          focusManagement: 'activeDescendant',
+          isItemDisabled: () => false,
+          itemComparer: (o, v) => o === v,
+          itemStringifier: (option) => option,
+          orientation: 'vertical',
+          pageSize: 5,
+          selectionMode: 'single',
+        },
+      };
+
+      const result = listReducer(state, action);
+      expect(result.highlightedValue).to.equal(null);
+    });
+  });
+
+  describe('action: itemClick', () => {
+    it('sets the selectedValues to the clicked value', () => {
+      const state: ListState<string> = {
+        highlightedValue: 'a',
+        selectedValues: [],
+      };
+
+      const action: ListReducerAction<string> = {
+        type: ListActionTypes.itemClick,
+        event: {} as any, // not relevant
+        context: {
+          items: ['one', 'two', 'three'],
+          disableListWrap: false,
+          disabledItemsFocusable: false,
+          focusManagement: 'activeDescendant',
+          isItemDisabled: () => false,
+          itemComparer: (o, v) => o === v,
+          itemStringifier: (option) => option,
+          orientation: 'vertical',
+          pageSize: 5,
+          selectionMode: 'single',
+        },
+        item: 'two',
+      };
+
+      const result = listReducer(state, action);
+      expect(result.selectedValues).to.deep.equal(['two']);
+    });
+
+    it('replaces the selectedValues with the clicked value if selectionMode = "single"', () => {
+      const state: ListState<string> = {
+        highlightedValue: 'a',
+        selectedValues: ['one'],
+      };
+
+      const action: ListReducerAction<string> = {
+        type: ListActionTypes.itemClick,
+        event: {} as any, // not relevant
+        context: {
+          items: ['one', 'two', 'three'],
+          disableListWrap: false,
+          disabledItemsFocusable: false,
+          focusManagement: 'activeDescendant',
+          isItemDisabled: () => false,
+          itemComparer: (o, v) => o === v,
+          itemStringifier: (option) => option,
+          orientation: 'vertical',
+          pageSize: 5,
+          selectionMode: 'single',
+        },
+        item: 'two',
+      };
+
+      const result = listReducer(state, action);
+      expect(result.selectedValues).to.deep.equal(['two']);
+    });
+
+    it('add the clicked value to the selection if selectionMode = "multiple"', () => {
+      const state: ListState<string> = {
+        highlightedValue: 'one',
+        selectedValues: ['one'],
+      };
+
+      const action: ListReducerAction<string> = {
+        type: ListActionTypes.itemClick,
+        event: {} as any, // not relevant
+        context: {
+          items: ['one', 'two', 'three'],
+          disableListWrap: false,
+          disabledItemsFocusable: false,
+          focusManagement: 'activeDescendant',
+          isItemDisabled: () => false,
+          itemComparer: (o, v) => o === v,
+          itemStringifier: (option) => option,
+          orientation: 'vertical',
+          pageSize: 5,
+          selectionMode: 'multiple',
+        },
+        item: 'two',
+      };
+
+      const result = listReducer(state, action);
+      expect(result.selectedValues).to.deep.equal(['one', 'two']);
+    });
+
+    it('remove the clicked value from the selection if selectionMode = "multiple" and it was selected already', () => {
+      const state: ListState<string> = {
+        highlightedValue: 'three',
+        selectedValues: ['one', 'two'],
+      };
+
+      const action: ListReducerAction<string> = {
+        type: ListActionTypes.itemClick,
+        event: {} as any, // not relevant
+        context: {
+          items: ['one', 'two', 'three'],
+          disableListWrap: false,
+          disabledItemsFocusable: false,
+          focusManagement: 'activeDescendant',
+          isItemDisabled: () => false,
+          itemComparer: (o, v) => o === v,
+          itemStringifier: (option) => option,
+          orientation: 'vertical',
+          pageSize: 5,
+          selectionMode: 'multiple',
+        },
+        item: 'two',
+      };
+
+      const result = listReducer(state, action);
+      expect(result.selectedValues).to.deep.equal(['one']);
+    });
+
+    it('does not select the clicked value to the selection if selectionMode = "none"', () => {
+      const state: ListState<string> = {
+        highlightedValue: 'one',
+        selectedValues: [],
+      };
+
+      const action: ListReducerAction<string> = {
+        type: ListActionTypes.itemClick,
+        event: {} as any, // not relevant
+        context: {
+          items: ['one', 'two', 'three'],
+          disableListWrap: false,
+          disabledItemsFocusable: false,
+          focusManagement: 'activeDescendant',
+          isItemDisabled: () => false,
+          itemComparer: (o, v) => o === v,
+          itemStringifier: (option) => option,
+          orientation: 'vertical',
+          pageSize: 5,
+          selectionMode: 'none',
+        },
+        item: 'two',
+      };
+
+      const result = listReducer(state, action);
+      expect(result.selectedValues).to.deep.equal([]);
+    });
+  });
+
+  describe('action: keyDown', () => {
+    interface KeydownTestCase {
+      description: string;
+      key: string;
+      initialHighlightedItem: string | null;
+      disabledItemFocusable: boolean;
+      disabledItems: string[];
+      disableListWrap: boolean;
+      expected: string | null;
+    }
+
+    const testCases: KeydownTestCase[] = [
+      {
+        description: 'happy path',
+        key: 'Home',
+        initialHighlightedItem: null,
+        disabledItemFocusable: false,
+        disabledItems: [],
+        disableListWrap: false,
+        expected: '1',
+      },
+      {
+        description: 'highlights the first enabled item',
+        key: 'Home',
+        initialHighlightedItem: null,
+        disabledItemFocusable: false,
+        disabledItems: ['1'],
+        disableListWrap: false,
+        expected: '2',
+      },
+      {
+        description: 'highlights the first enabled item',
+        key: 'Home',
+        initialHighlightedItem: null,
+        disabledItemFocusable: false,
+        disabledItems: ['1', '2'],
+        disableListWrap: false,
+        expected: '3',
+      },
+      {
+        description: 'highlights the first item even if it is disabled',
+        key: 'Home',
+        initialHighlightedItem: null,
+        disabledItemFocusable: true,
+        disabledItems: ['1'],
+        disableListWrap: false,
+        expected: '1',
+      },
+      {
+        description: 'all disabled',
+        key: 'Home',
+        initialHighlightedItem: null,
+        disabledItemFocusable: false,
+        disabledItems: ['1', '2', '3', '4', '5'],
+        disableListWrap: false,
+        expected: null,
+      },
+      {
+        description: 'all disabled but focusable',
+        key: 'Home',
+        initialHighlightedItem: null,
+        disabledItemFocusable: true,
+        disabledItems: ['1', '2', '3', '4', '5'],
+        disableListWrap: false,
+        expected: '1',
+      },
+      {
+        description: 'happy path',
+        key: 'End',
+        initialHighlightedItem: null,
+        disabledItemFocusable: false,
+        disabledItems: [],
+        disableListWrap: false,
+        expected: '5',
+      },
+      {
+        description: 'highlights the last enabled item',
+        key: 'End',
+        initialHighlightedItem: null,
+        disabledItemFocusable: false,
+        disabledItems: ['5'],
+        disableListWrap: false,
+        expected: '4',
+      },
+      {
+        description: 'highlights the last enabled item',
+        key: 'End',
+        initialHighlightedItem: null,
+        disabledItemFocusable: false,
+        disabledItems: ['4', '5'],
+        disableListWrap: false,
+        expected: '3',
+      },
+      {
+        description: 'highlights the last item even if it is disabled',
+        key: 'End',
+        initialHighlightedItem: null,
+        disabledItemFocusable: true,
+        disabledItems: ['5'],
+        disableListWrap: false,
+        expected: '5',
+      },
+      {
+        description: 'all disabled',
+        key: 'End',
+        initialHighlightedItem: null,
+        disabledItemFocusable: false,
+        disabledItems: ['1', '2', '3', '4', '5'],
+        disableListWrap: false,
+        expected: null,
+      },
+      {
+        description: 'all disabled but focusable',
+        key: 'End',
+        initialHighlightedItem: null,
+        disabledItemFocusable: true,
+        disabledItems: ['1', '2', '3', '4', '5'],
+        disableListWrap: false,
+        expected: '5',
+      },
+      {
+        description: 'happy path',
+        key: 'ArrowDown',
+        initialHighlightedItem: null,
+        disabledItemFocusable: false,
+        disabledItems: [],
+        disableListWrap: false,
+        expected: '1',
+      },
+      {
+        description: 'happy path',
+        key: 'ArrowDown',
+        initialHighlightedItem: '1',
+        disabledItemFocusable: false,
+        disabledItems: [],
+        disableListWrap: false,
+        expected: '2',
+      },
+      {
+        description: 'skips the disabled item',
+        key: 'ArrowDown',
+        initialHighlightedItem: null,
+        disabledItemFocusable: false,
+        disabledItems: ['1'],
+        disableListWrap: false,
+        expected: '2',
+      },
+      {
+        description: 'skips multiple disabled items',
+        key: 'ArrowDown',
+        initialHighlightedItem: '1',
+        disabledItemFocusable: false,
+        disabledItems: ['2', '3'],
+        disableListWrap: false,
+        expected: '4',
+      },
+      {
+        description: 'skips the disabled items and wraps around',
+        key: 'ArrowDown',
+        initialHighlightedItem: '3',
+        disabledItemFocusable: false,
+        disabledItems: ['1', '4', '5'],
+        disableListWrap: false,
+        expected: '2',
+      },
+      {
+        description: 'focuses the disabled item',
+        key: 'ArrowDown',
+        initialHighlightedItem: null,
+        disabledItemFocusable: true,
+        disabledItems: ['1'],
+        disableListWrap: false,
+        expected: '1',
+      },
+      {
+        description: 'does not wrap around',
+        key: 'ArrowDown',
+        initialHighlightedItem: '5',
+        disabledItemFocusable: false,
+        disabledItems: [],
+        disableListWrap: true,
+        expected: '5',
+      },
+      {
+        description: 'remains on the same item when all the next are disabled',
+        key: 'ArrowDown',
+        initialHighlightedItem: '3',
+        disabledItemFocusable: false,
+        disabledItems: ['4', '5'],
+        disableListWrap: true,
+        expected: '3',
+      },
+      {
+        description: 'all disabled',
+        key: 'ArrowDown',
+        initialHighlightedItem: null,
+        disabledItemFocusable: false,
+        disabledItems: ['1', '2', '3', '4', '5'],
+        disableListWrap: false,
+        expected: null,
+      },
+      {
+        description: 'all disabled but focusable',
+        key: 'ArrowDown',
+        initialHighlightedItem: null,
+        disabledItemFocusable: true,
+        disabledItems: ['1', '2', '3', '4', '5'],
+        disableListWrap: false,
+        expected: '1',
+      },
+      {
+        description: 'happy path',
+        key: 'ArrowUp',
+        initialHighlightedItem: null,
+        disabledItemFocusable: false,
+        disabledItems: [],
+        disableListWrap: false,
+        expected: '5',
+      },
+      {
+        description: 'happy path',
+        key: 'ArrowUp',
+        initialHighlightedItem: '2',
+        disabledItemFocusable: false,
+        disabledItems: [],
+        disableListWrap: false,
+        expected: '1',
+      },
+      {
+        description: 'skips the disabled item',
+        key: 'ArrowUp',
+        initialHighlightedItem: null,
+        disabledItemFocusable: false,
+        disabledItems: ['5'],
+        disableListWrap: false,
+        expected: '4',
+      },
+      {
+        description: 'skips multiple disabled items',
+        key: 'ArrowUp',
+        initialHighlightedItem: '1',
+        disabledItemFocusable: false,
+        disabledItems: ['4', '5'],
+        disableListWrap: false,
+        expected: '3',
+      },
+      {
+        description: 'skips the disabled items and wraps around',
+        key: 'ArrowUp',
+        initialHighlightedItem: '2',
+        disabledItemFocusable: false,
+        disabledItems: ['1', '4', '5'],
+        disableListWrap: false,
+        expected: '3',
+      },
+      {
+        description: 'focuses the disabled item',
+        key: 'ArrowUp',
+        initialHighlightedItem: null,
+        disabledItemFocusable: true,
+        disabledItems: ['5'],
+        disableListWrap: false,
+        expected: '5',
+      },
+      {
+        description: 'does not wrap around',
+        key: 'ArrowUp',
+        initialHighlightedItem: '1',
+        disabledItemFocusable: false,
+        disabledItems: [],
+        disableListWrap: true,
+        expected: '1',
+      },
+      {
+        description: 'remains on the same item when all the previous are disabled',
+        key: 'ArrowUp',
+        initialHighlightedItem: '3',
+        disabledItemFocusable: false,
+        disabledItems: ['1', '2'],
+        disableListWrap: true,
+        expected: '3',
+      },
+      {
+        description: 'all disabled',
+        key: 'ArrowUp',
+        initialHighlightedItem: null,
+        disabledItemFocusable: false,
+        disabledItems: ['1', '2', '3', '4', '5'],
+        disableListWrap: false,
+        expected: null,
+      },
+      {
+        description: 'all disabled but focusable',
+        key: 'ArrowUp',
+        initialHighlightedItem: null,
+        disabledItemFocusable: true,
+        disabledItems: ['1', '2', '3', '4', '5'],
+        disableListWrap: false,
+        expected: '5',
+      },
+      {
+        description: 'happy path',
+        key: 'PageDown',
+        initialHighlightedItem: null,
+        disabledItemFocusable: false,
+        disabledItems: [],
+        disableListWrap: false,
+        expected: '3',
+      },
+      {
+        description: 'skips the disabled item',
+        key: 'PageDown',
+        initialHighlightedItem: null,
+        disabledItemFocusable: false,
+        disabledItems: ['3'],
+        disableListWrap: false,
+        expected: '4',
+      },
+      {
+        description: 'does not wrap around, no matter the setting',
+        key: 'PageDown',
+        initialHighlightedItem: '4',
+        disabledItemFocusable: false,
+        disabledItems: [],
+        disableListWrap: false,
+        expected: '5',
+      },
+      {
+        description: 'does not wrap around, no matter the setting, and skips the disabled item',
+        key: 'PageDown',
+        initialHighlightedItem: '3',
+        disabledItemFocusable: false,
+        disabledItems: ['5'],
+        disableListWrap: false,
+        expected: '4',
+      },
+      {
+        description: 'happy path',
+        key: 'PageUp',
+        initialHighlightedItem: null,
+        disabledItemFocusable: false,
+        disabledItems: [],
+        disableListWrap: false,
+        expected: '1',
+      },
+      {
+        description: 'skips the disabled item',
+        key: 'PageUp',
+        initialHighlightedItem: '5',
+        disabledItemFocusable: false,
+        disabledItems: ['2'],
+        disableListWrap: false,
+        expected: '1',
+      },
+      {
+        description: 'does not wrap around, no matter the setting',
+        key: 'PageUp',
+        initialHighlightedItem: '2',
+        disabledItemFocusable: false,
+        disabledItems: [],
+        disableListWrap: false,
+        expected: '1',
+      },
+      {
+        description: 'does not wrap around, no matter the setting, and skips the disabled item',
+        key: 'PageUp',
+        initialHighlightedItem: '3',
+        disabledItemFocusable: false,
+        disabledItems: ['1'],
+        disableListWrap: false,
+        expected: '2',
+      },
+    ];
+
+    testCases.forEach((spec: KeydownTestCase) => {
+      describe(`given initialHighlightedItem: '${
+        spec.initialHighlightedItem
+      }', disabledItemsFocusable: ${spec.disabledItemFocusable}, disableListWrap: ${
+        spec.disableListWrap
+      }, disabledItems: [${spec.disabledItems.join()}]`, () => {
+        it(`${spec.description}: should highlight the '${spec.expected}' item after the ${spec.key} is pressed`, () => {
+          const state: ListState<string> = {
+            highlightedValue: spec.initialHighlightedItem,
+            selectedValues: [],
+          };
+
+          const action: ListReducerAction<string> = {
+            type: ListActionTypes.keyDown,
+            key: spec.key,
+            event: null as any, // not relevant
+            context: {
+              items: ['1', '2', '3', '4', '5'],
+              disableListWrap: spec.disableListWrap,
+              disabledItemsFocusable: spec.disabledItemFocusable,
+              focusManagement: 'activeDescendant',
+              isItemDisabled: (item) => spec.disabledItems.includes(item),
+              itemComparer: (o, v) => o === v,
+              itemStringifier: (option) => option,
+              orientation: 'vertical',
+              pageSize: 3,
+              selectionMode: 'single',
+            },
+          };
+
+          const result = listReducer(state, action);
+          expect(result.highlightedValue).to.equal(spec.expected);
+        });
+      });
+    });
+
+    describe('Enter key is pressed', () => {
+      it('selects the highlighted option', () => {
+        const state: ListState<string> = {
+          highlightedValue: 'two',
+          selectedValues: [],
+        };
+
+        const action: ListReducerAction<string> = {
+          type: ListActionTypes.keyDown,
+          key: 'Enter',
+          event: {} as any,
+          context: {
+            items: ['one', 'two', 'three'],
+            disableListWrap: false,
+            disabledItemsFocusable: false,
+            focusManagement: 'activeDescendant',
+            isItemDisabled: () => false,
+            itemComparer: (o, v) => o === v,
+            itemStringifier: (option) => option,
+            orientation: 'vertical',
+            pageSize: 5,
+            selectionMode: 'single',
+          },
+        };
+
+        const result = listReducer(state, action);
+        expect(result.selectedValues).to.deep.equal(['two']);
+      });
+
+      it('replaces the selectedValues with the highlighted value if selectionMode = "single"', () => {
+        const state: ListState<string> = {
+          highlightedValue: 'two',
+          selectedValues: ['one'],
+        };
+
+        const action: ListReducerAction<string> = {
+          type: ListActionTypes.keyDown,
+          key: 'Enter',
+          event: {} as any,
+          context: {
+            items: ['one', 'two', 'three'],
+            disableListWrap: false,
+            disabledItemsFocusable: false,
+            focusManagement: 'activeDescendant',
+            isItemDisabled: () => false,
+            itemComparer: (o, v) => o === v,
+            itemStringifier: (option) => option,
+            orientation: 'vertical',
+            pageSize: 5,
+            selectionMode: 'single',
+          },
+        };
+
+        const result = listReducer(state, action);
+        expect(result.selectedValues).to.deep.equal(['two']);
+      });
+
+      it('add the highlighted value to the selection if selectionMode = "multiple"', () => {
+        const state: ListState<string> = {
+          highlightedValue: 'two',
+          selectedValues: ['one'],
+        };
+
+        const action: ListReducerAction<string> = {
+          type: ListActionTypes.keyDown,
+          key: 'Enter',
+          event: {} as any,
+          context: {
+            items: ['one', 'two', 'three'],
+            disableListWrap: false,
+            disabledItemsFocusable: false,
+            focusManagement: 'activeDescendant',
+            isItemDisabled: () => false,
+            itemComparer: (o, v) => o === v,
+            itemStringifier: (option) => option,
+            orientation: 'vertical',
+            pageSize: 5,
+            selectionMode: 'multiple',
+          },
+        };
+
+        const result = listReducer(state, action);
+        expect(result.selectedValues).to.deep.equal(['one', 'two']);
+      });
+    });
+  });
+
+  describe('action: textNavigation', () => {
+    it('should navigate to next match', () => {
+      const state: ListState<string> = {
+        highlightedValue: 'two',
+        selectedValues: [],
+      };
+
+      const action: ListReducerAction<string> = {
+        type: ListActionTypes.textNavigation,
+        searchString: 'th',
+        event: {} as React.KeyboardEvent,
+        context: {
+          items: ['one', 'two', 'three', 'four', 'five'],
+          disableListWrap: false,
+          disabledItemsFocusable: false,
+          focusManagement: 'activeDescendant',
+          isItemDisabled: () => false,
+          itemComparer: (o, v) => o === v,
+          itemStringifier: (option) => option,
+          orientation: 'vertical',
+          pageSize: 5,
+          selectionMode: 'single',
+        },
+      };
+
+      const result = listReducer(state, action);
+      expect(result.highlightedValue).to.equal('three');
+    });
+
+    it('should not move the highlight when there are no matched items', () => {
+      const state: ListState<string> = {
+        highlightedValue: 'one',
+        selectedValues: [],
+      };
+
+      const action: ListReducerAction<string> = {
+        type: ListActionTypes.textNavigation,
+        searchString: 'z',
+        event: {} as React.KeyboardEvent,
+        context: {
+          items: ['one', 'two', 'three', 'four', 'five'],
+          disableListWrap: false,
+          disabledItemsFocusable: false,
+          focusManagement: 'activeDescendant',
+          isItemDisabled: () => false,
+          itemComparer: (o, v) => o === v,
+          itemStringifier: (option) => option,
+          orientation: 'vertical',
+          pageSize: 5,
+          selectionMode: 'single',
+        },
+      };
+
+      const result = listReducer(state, action);
+      expect(result.highlightedValue).to.equal('one');
+    });
+
+    it('should highlight first match that is not disabled', () => {
+      const state: ListState<string> = {
+        highlightedValue: 'one',
+        selectedValues: [],
+      };
+
+      const action: ListReducerAction<string> = {
+        type: ListActionTypes.textNavigation,
+        searchString: 't',
+        event: {} as React.KeyboardEvent,
+        context: {
+          items: ['one', 'two', 'three', 'four', 'five'],
+          disableListWrap: false,
+          disabledItemsFocusable: false,
+          focusManagement: 'activeDescendant',
+          isItemDisabled: (_, i) => i === 1,
+          itemComparer: (o, v) => o === v,
+          itemStringifier: (option) => option,
+          orientation: 'vertical',
+          pageSize: 5,
+          selectionMode: 'single',
+        },
+      };
+
+      const result = listReducer(state, action);
+      expect(result.highlightedValue).to.equal('three');
+    });
+
+    it('should move highlight to disabled items if disabledItemsFocusable=true', () => {
+      const state: ListState<string> = {
+        highlightedValue: 'one',
+        selectedValues: [],
+      };
+
+      const action: ListReducerAction<string> = {
+        type: ListActionTypes.textNavigation,
+        searchString: 't',
+        event: {} as React.KeyboardEvent,
+        context: {
+          items: ['one', 'two', 'three', 'four', 'five'],
+          disableListWrap: false,
+          disabledItemsFocusable: true,
+          focusManagement: 'activeDescendant',
+          isItemDisabled: (_, i) => i === 1,
+          itemComparer: (o, v) => o === v,
+          itemStringifier: (option) => option,
+          orientation: 'vertical',
+          pageSize: 5,
+          selectionMode: 'single',
+        },
+      };
+
+      const result = listReducer(state, action);
+      expect(result.highlightedValue).to.equal('two');
+    });
+
+    it('should not move highlight when disabled wrap and match is before highlighted option', () => {
+      const state: ListState<string> = {
+        highlightedValue: 'three',
+        selectedValues: [],
+      };
+
+      const action: ListReducerAction<string> = {
+        type: ListActionTypes.textNavigation,
+        searchString: 'one',
+        event: {} as React.KeyboardEvent,
+        context: {
+          items: ['one', 'two', 'three', 'four', 'five'],
+          disableListWrap: true,
+          disabledItemsFocusable: false,
+          focusManagement: 'activeDescendant',
+          isItemDisabled: () => false,
+          itemComparer: (o, v) => o === v,
+          itemStringifier: (option) => option,
+          orientation: 'vertical',
+          pageSize: 5,
+          selectionMode: 'single',
+        },
+      };
+
+      const result = listReducer(state, action);
+      expect(result.highlightedValue).to.equal('three');
+    });
+  });
+
+  describe('action: itemsChange', () => {
+    const irrelevantConfig = {
+      disableListWrap: false,
+      disabledItemsFocusable: false,
+      focusManagement: 'activeDescendant' as const,
+      isItemDisabled: () => false,
+      itemStringifier: (option: any) => option,
+      orientation: 'vertical' as const,
+      pageSize: 5,
+      selectionMode: 'single' as const,
+    };
+
+    describe('using default item comparer', () => {
+      it('keeps the highlighted value if it is present among the new items', () => {
+        const state: ListState<string> = {
+          highlightedValue: '1',
+          selectedValues: [],
+        };
+
+        const action: ListReducerAction<string> = {
+          type: ListActionTypes.itemsChange,
+          event: null,
+          items: ['1', '2'],
+          previousItems: ['0', '1', '2'],
+          context: {
+            items: ['1', '2'],
+            itemComparer: (o, v) => o === v,
+            ...irrelevantConfig,
+          },
+        };
+
+        const result = listReducer(state, action);
+        expect(result.highlightedValue).to.equal('1');
+      });
+
+      it('resets the highlighted value if it is not present among the new items', () => {
+        const state: ListState<string> = {
+          highlightedValue: '0',
+          selectedValues: [],
+        };
+
+        const action: ListReducerAction<string> = {
+          type: ListActionTypes.itemsChange,
+          event: null,
+          items: ['1', '2'],
+          previousItems: ['0', '1', '2'],
+          context: {
+            items: ['1', '2'],
+            itemComparer: (o, v) => o === v,
+            ...irrelevantConfig,
+          },
+        };
+
+        const result = listReducer(state, action);
+        expect(result.highlightedValue).to.equal(null);
+      });
+
+      it('keeps the selected values if they are present among the new items', () => {
+        const state: ListState<string> = {
+          highlightedValue: '1',
+          selectedValues: ['1', '2'],
+        };
+
+        const action: ListReducerAction<string> = {
+          type: ListActionTypes.itemsChange,
+          event: null,
+          items: ['1', '2'],
+          previousItems: ['0', '1', '2'],
+          context: {
+            items: ['1', '2'],
+            itemComparer: (o, v) => o === v,
+            ...irrelevantConfig,
+          },
+        };
+
+        const result = listReducer(state, action);
+        expect(result.selectedValues).to.deep.equal(['1', '2']);
+      });
+
+      it('removes the values from the selection if they are no longer present among the new items', () => {
+        const state: ListState<string> = {
+          highlightedValue: '1',
+          selectedValues: ['0', '2'],
+        };
+
+        const action: ListReducerAction<string> = {
+          type: ListActionTypes.itemsChange,
+          event: null,
+          items: ['1', '2'],
+          previousItems: ['0', '1', '2'],
+          context: {
+            items: ['1', '2'],
+            itemComparer: (o, v) => o === v,
+            ...irrelevantConfig,
+          },
+        };
+
+        const result = listReducer(state, action);
+        expect(result.selectedValues).to.deep.equal(['2']);
+      });
+    });
+
+    describe('using custom item comparer', () => {
+      type ItemType = { v: string };
+      it('keeps the highlighted value if it is present among the new items', () => {
+        const state: ListState<ItemType> = {
+          highlightedValue: { v: '1' },
+          selectedValues: [],
+        };
+
+        const action: ListReducerAction<ItemType> = {
+          type: ListActionTypes.itemsChange,
+          event: null,
+          items: [{ v: '1' }, { v: '2' }],
+          previousItems: [{ v: '0' }, { v: '1' }, { v: '2' }],
+          context: {
+            items: [{ v: '1' }, { v: '2' }],
+            itemComparer: (a, b) => a.v === b.v,
+            ...irrelevantConfig,
+          },
+        };
+
+        const result = listReducer(state, action);
+        expect(result.highlightedValue?.v).to.equal('1');
+      });
+
+      it('resets the highlighted value if it is not present among the new items', () => {
+        const state: ListState<ItemType> = {
+          highlightedValue: { v: '0' },
+          selectedValues: [],
+        };
+
+        const action: ListReducerAction<ItemType> = {
+          type: ListActionTypes.itemsChange,
+          event: null,
+          items: [{ v: '1' }, { v: '2' }],
+          previousItems: [{ v: '0' }, { v: '1' }, { v: '2' }],
+          context: {
+            items: [{ v: '1' }, { v: '2' }],
+            itemComparer: (a, b) => a.v === b.v,
+            ...irrelevantConfig,
+          },
+        };
+
+        const result = listReducer(state, action);
+        expect(result.highlightedValue).to.equal(null);
+      });
+
+      it('keeps the selected values if they are present among the new items', () => {
+        const state: ListState<ItemType> = {
+          highlightedValue: { v: '1' },
+          selectedValues: [{ v: '1' }, { v: '2' }],
+        };
+
+        const action: ListReducerAction<ItemType> = {
+          type: ListActionTypes.itemsChange,
+          event: null,
+          items: [{ v: '1' }, { v: '2' }],
+          previousItems: [{ v: '0' }, { v: '1' }, { v: '2' }],
+          context: {
+            items: [{ v: '1' }, { v: '2' }],
+            itemComparer: (a, b) => a.v === b.v,
+            ...irrelevantConfig,
+          },
+        };
+
+        const result = listReducer(state, action);
+        expect(result.selectedValues.map((sv) => sv.v)).to.deep.equal(['1', '2']);
+      });
+
+      it('removes the values from the selection if they are no longer present among the new items', () => {
+        const state: ListState<ItemType> = {
+          highlightedValue: { v: '1' },
+          selectedValues: [{ v: '0' }, { v: '2' }],
+        };
+
+        const action: ListReducerAction<ItemType> = {
+          type: ListActionTypes.itemsChange,
+          event: null,
+          items: [{ v: '1' }, { v: '2' }],
+          previousItems: [{ v: '0' }, { v: '1' }, { v: '2' }],
+          context: {
+            items: [{ v: '1' }, { v: '2' }],
+            itemComparer: (a, b) => a.v === b.v,
+            ...irrelevantConfig,
+          },
+        };
+
+        const result = listReducer(state, action);
+        expect(result.selectedValues.map((sv) => sv.v)).to.deep.equal(['2']);
+      });
+    });
+
+    describe('after the items are initialized', () => {
+      it('highlights the first item when using DOM focus management', () => {
+        const state: ListState<string> = {
+          highlightedValue: null,
+          selectedValues: [],
+        };
+
+        const action: ListReducerAction<string> = {
+          type: ListActionTypes.itemsChange,
+          event: null,
+          items: ['1', '2'],
+          previousItems: [],
+          context: {
+            ...irrelevantConfig,
+            items: ['1', '2'],
+            itemComparer: (o, v) => o === v,
+            focusManagement: 'DOM',
+          },
+        };
+
+        const result = listReducer(state, action);
+        expect(result.highlightedValue).to.equal('1');
+      });
+
+      it('highlights the first enabled item when using DOM focus management', () => {
+        const state: ListState<string> = {
+          highlightedValue: null,
+          selectedValues: [],
+        };
+
+        const action: ListReducerAction<string> = {
+          type: ListActionTypes.itemsChange,
+          event: null,
+          items: ['1', '2', '3'],
+          previousItems: [],
+          context: {
+            ...irrelevantConfig,
+            items: ['1', '2', '3'],
+            itemComparer: (o, v) => o === v,
+            focusManagement: 'DOM',
+            isItemDisabled: (item) => ['1', '2'].includes(item),
+          },
+        };
+
+        const result = listReducer(state, action);
+        expect(result.highlightedValue).to.equal('3');
+      });
+    });
+  });
+});
diff --git a/packages/mui-base/src/useList/listReducer.ts b/packages/mui-base/src/useList/listReducer.ts
new file mode 100644
index 00000000000000..e19db122dd0984
--- /dev/null
+++ b/packages/mui-base/src/useList/listReducer.ts
@@ -0,0 +1,436 @@
+import { ListActionTypes } from './listActions.types';
+import { ListState, ListReducerAction, ListActionContext, SelectionMode } from './useList.types';
+
+type ItemPredicate<ItemValue> = (item: ItemValue, index: number) => boolean;
+
+/**
+ * Looks up the next valid item to highlight within the list.
+ *
+ * @param currentIndex The index of the start of the search.
+ * @param lookupDirection Whether to look for the next or previous item.
+ * @param items The array of items to search.
+ * @param includeDisabledItems Whether to include disabled items in the search.
+ * @param isItemDisabled A function that determines whether an item is disabled.
+ * @param wrapAround Whether to wrap around the list when searching.
+ * @returns The index of the next valid item to highlight or -1 if no valid item is found.
+ */
+function findValidItemToHighlight<ItemValue>(
+  currentIndex: number,
+  lookupDirection: 'next' | 'previous',
+  items: ItemValue[],
+  includeDisabledItems: boolean,
+  isItemDisabled: ItemPredicate<ItemValue>,
+  wrapAround: boolean,
+): number {
+  if (
+    items.length === 0 ||
+    (!includeDisabledItems && items.every((item, itemIndex) => isItemDisabled(item, itemIndex)))
+  ) {
+    return -1;
+  }
+
+  let nextFocus = currentIndex;
+
+  for (;;) {
+    // No valid items found
+    if (
+      (!wrapAround && lookupDirection === 'next' && nextFocus === items.length) ||
+      (!wrapAround && lookupDirection === 'previous' && nextFocus === -1)
+    ) {
+      return -1;
+    }
+
+    const nextFocusDisabled = includeDisabledItems
+      ? false
+      : isItemDisabled(items[nextFocus], nextFocus);
+    if (nextFocusDisabled) {
+      nextFocus += lookupDirection === 'next' ? 1 : -1;
+      if (wrapAround) {
+        nextFocus = (nextFocus + items.length) % items.length;
+      }
+    } else {
+      return nextFocus;
+    }
+  }
+}
+
+/**
+ * Gets the next item to highlight based on the current highlighted item and the search direction.
+ *
+ * @param previouslyHighlightedValue The item from which to start the search for the next candidate.
+ * @param offset The offset from the previously highlighted item to search for the next candidate or a special named value ('reset', 'start', 'end').
+ * @param context The list action context.
+ *
+ * @returns The next item to highlight or null if no item is valid.
+ */
+export function moveHighlight<ItemValue>(
+  previouslyHighlightedValue: ItemValue | null,
+  offset: number | 'reset' | 'start' | 'end',
+  context: ListActionContext<ItemValue>,
+) {
+  const {
+    items,
+    isItemDisabled,
+    disableListWrap,
+    disabledItemsFocusable,
+    itemComparer,
+    focusManagement,
+  } = context;
+
+  // TODO: make this configurable
+  // The always should be an item highlighted when focus is managed by the DOM
+  // so that it's accessible by the `tab` key.
+  const defaultHighlightedIndex = focusManagement === 'DOM' ? 0 : -1;
+  const maxIndex = items.length - 1;
+
+  const previouslyHighlightedIndex =
+    previouslyHighlightedValue == null
+      ? -1
+      : items.findIndex((item) => itemComparer(item, previouslyHighlightedValue));
+
+  let nextIndexCandidate: number;
+  let lookupDirection: 'next' | 'previous';
+  let wrapAround = !disableListWrap;
+
+  switch (offset) {
+    case 'reset':
+      if (defaultHighlightedIndex === -1) {
+        return null;
+      }
+
+      nextIndexCandidate = 0;
+      lookupDirection = 'next';
+      wrapAround = false;
+      break;
+
+    case 'start':
+      nextIndexCandidate = 0;
+      lookupDirection = 'next';
+      wrapAround = false;
+      break;
+
+    case 'end':
+      nextIndexCandidate = maxIndex;
+      lookupDirection = 'previous';
+      wrapAround = false;
+      break;
+
+    default: {
+      const newIndex = previouslyHighlightedIndex + offset;
+
+      if (newIndex < 0) {
+        if ((!wrapAround && previouslyHighlightedIndex !== -1) || Math.abs(offset) > 1) {
+          nextIndexCandidate = 0;
+          lookupDirection = 'next';
+        } else {
+          nextIndexCandidate = maxIndex;
+          lookupDirection = 'previous';
+        }
+      } else if (newIndex > maxIndex) {
+        if (!wrapAround || Math.abs(offset) > 1) {
+          nextIndexCandidate = maxIndex;
+          lookupDirection = 'previous';
+        } else {
+          nextIndexCandidate = 0;
+          lookupDirection = 'next';
+        }
+      } else {
+        nextIndexCandidate = newIndex;
+        lookupDirection = offset >= 0 ? 'next' : 'previous';
+      }
+    }
+  }
+
+  const nextIndex = findValidItemToHighlight(
+    nextIndexCandidate,
+    lookupDirection,
+    items,
+    disabledItemsFocusable,
+    isItemDisabled,
+    wrapAround,
+  );
+
+  // If there are no valid items to highlight, return the previously highlighted item (if it's still valid).
+  if (
+    nextIndex === -1 &&
+    previouslyHighlightedValue !== null &&
+    !isItemDisabled(previouslyHighlightedValue, previouslyHighlightedIndex)
+  ) {
+    return previouslyHighlightedValue;
+  }
+
+  return items[nextIndex] ?? null;
+}
+
+/**
+ * Toggles the selection of an item.
+ *
+ * @param item Item to toggle.
+ * @param selectedValues Already selected items.
+ * @param selectionMode The number of items that can be simultanously selected.
+ * @param itemComparer A custom item comparer function.
+ *
+ * @returns The new array of selected items.
+ */
+export function toggleSelection<ItemValue>(
+  item: ItemValue,
+  selectedValues: ItemValue[],
+  selectionMode: SelectionMode,
+  itemComparer: (item1: ItemValue, item2: ItemValue) => boolean,
+) {
+  if (selectionMode === 'none') {
+    return [];
+  }
+
+  if (selectionMode === 'single') {
+    // if the item to select has already been selected, return the original array
+    if (itemComparer(selectedValues[0], item)) {
+      return selectedValues;
+    }
+
+    return [item];
+  }
+
+  // The toggled item is selected; remove it from the selection.
+  if (selectedValues.some((sv) => itemComparer(sv, item))) {
+    return selectedValues.filter((sv) => !itemComparer(sv, item));
+  }
+
+  // The toggled item is not selected - add it to the selection.
+  return [...selectedValues, item];
+}
+
+function handleItemSelection<ItemValue, State extends ListState<ItemValue>>(
+  item: ItemValue,
+  state: State,
+  context: ListActionContext<ItemValue>,
+): State {
+  const { itemComparer, isItemDisabled, selectionMode, items } = context;
+  const { selectedValues } = state;
+
+  const itemIndex = items.findIndex((i) => itemComparer(item, i));
+
+  if (isItemDisabled(item, itemIndex)) {
+    return state;
+  }
+
+  // if the item is already selected, remove it from the selection, otherwise add it
+  const newSelectedValues = toggleSelection(item, selectedValues, selectionMode, itemComparer);
+
+  return {
+    ...state,
+    selectedValues: newSelectedValues,
+    highlightedValue: item,
+  };
+}
+
+function handleKeyDown<ItemValue, State extends ListState<ItemValue>>(
+  key: string,
+  state: State,
+  context: ListActionContext<ItemValue>,
+): State {
+  const previouslySelectedValue = state.highlightedValue;
+  const { orientation, pageSize } = context;
+
+  switch (key) {
+    case 'Home':
+      return {
+        ...state,
+        highlightedValue: moveHighlight(previouslySelectedValue, 'start', context),
+      };
+
+    case 'End':
+      return {
+        ...state,
+        highlightedValue: moveHighlight(previouslySelectedValue, 'end', context),
+      };
+
+    case 'PageUp':
+      return {
+        ...state,
+        highlightedValue: moveHighlight(previouslySelectedValue, -pageSize, context),
+      };
+
+    case 'PageDown':
+      return {
+        ...state,
+        highlightedValue: moveHighlight(previouslySelectedValue, pageSize, context),
+      };
+
+    case 'ArrowUp':
+      if (orientation !== 'vertical') {
+        break;
+      }
+
+      return {
+        ...state,
+        highlightedValue: moveHighlight(previouslySelectedValue, -1, context),
+      };
+
+    case 'ArrowDown':
+      if (orientation !== 'vertical') {
+        break;
+      }
+
+      return {
+        ...state,
+        highlightedValue: moveHighlight(previouslySelectedValue, 1, context),
+      };
+
+    case 'ArrowLeft': {
+      if (orientation === 'vertical') {
+        break;
+      }
+
+      const offset = orientation === 'horizontal-ltr' ? -1 : 1;
+
+      return {
+        ...state,
+        highlightedValue: moveHighlight(previouslySelectedValue, offset, context),
+      };
+    }
+
+    case 'ArrowRight': {
+      if (orientation === 'vertical') {
+        break;
+      }
+
+      const offset = orientation === 'horizontal-ltr' ? 1 : -1;
+
+      return {
+        ...state,
+        highlightedValue: moveHighlight(previouslySelectedValue, offset, context),
+      };
+    }
+
+    case 'Enter':
+    case ' ':
+      if (state.highlightedValue === null) {
+        return state;
+      }
+
+      return handleItemSelection(state.highlightedValue, state, context);
+
+    default:
+      break;
+  }
+
+  return state;
+}
+
+function handleBlur<ItemValue, State extends ListState<ItemValue>>(
+  state: State,
+  context: ListActionContext<ItemValue>,
+): State {
+  if (context.focusManagement === 'DOM') {
+    return state;
+  }
+
+  return {
+    ...state,
+    highlightedValue: null,
+  };
+}
+
+function textCriteriaMatches<ItemValue>(
+  nextFocus: ItemValue,
+  searchString: string,
+  stringifyItem: (item: ItemValue) => string | undefined,
+) {
+  const text = stringifyItem(nextFocus)?.trim().toLowerCase();
+
+  if (!text || text.length === 0) {
+    // Make item not navigable if stringification fails or results in empty string.
+    return false;
+  }
+
+  return text.indexOf(searchString) === 0;
+}
+
+function handleTextNavigation<ItemValue, State extends ListState<ItemValue>>(
+  state: State,
+  searchString: string,
+  context: ListActionContext<ItemValue>,
+): State {
+  const { items, isItemDisabled, disabledItemsFocusable, itemStringifier } = context;
+
+  const startWithCurrentItem = searchString.length > 1;
+
+  let nextItem = startWithCurrentItem
+    ? state.highlightedValue
+    : moveHighlight(state.highlightedValue, 1, context);
+
+  for (let index = 0; index < items.length; index += 1) {
+    // Return un-mutated state if looped back to the currently highlighted value
+    if (!nextItem || (!startWithCurrentItem && state.highlightedValue === nextItem)) {
+      return state;
+    }
+
+    if (
+      textCriteriaMatches(nextItem, searchString, itemStringifier) &&
+      (!isItemDisabled(nextItem, items.indexOf(nextItem)) || disabledItemsFocusable)
+    ) {
+      // The nextItem is the element to be highlighted
+      return {
+        ...state,
+        highlightedValue: nextItem,
+      };
+    }
+    // Move to the next element.
+    nextItem = moveHighlight(nextItem, 1, context);
+  }
+
+  // No item matches the text search criteria
+  return state;
+}
+
+function handleItemsChange<ItemValue, State extends ListState<ItemValue>>(
+  items: ItemValue[],
+  previousItems: ItemValue[],
+  state: State,
+  context: ListActionContext<ItemValue>,
+): State {
+  const { itemComparer, focusManagement } = context;
+
+  let newHighlightedValue: ItemValue | null = null;
+
+  if (state.highlightedValue != null) {
+    newHighlightedValue = items.find((item) => itemComparer(item, state.highlightedValue!)) ?? null;
+  } else if (focusManagement === 'DOM' && previousItems.length === 0) {
+    newHighlightedValue = moveHighlight(null, 'reset', context);
+  }
+
+  // exclude selected values that are no longer in the items list
+  const selectedValues = state.selectedValues ?? [];
+  const newSelectedValues = selectedValues.filter((selectedValue) =>
+    items.some((item) => itemComparer(item, selectedValue)),
+  );
+
+  return {
+    ...state,
+    highlightedValue: newHighlightedValue,
+    selectedValues: newSelectedValues,
+  };
+}
+
+export default function listReducer<ItemValue, State extends ListState<ItemValue>>(
+  state: State,
+  action: ListReducerAction<ItemValue> & { context: ListActionContext<ItemValue> },
+): State {
+  const { type, context } = action;
+
+  switch (type) {
+    case ListActionTypes.keyDown:
+      return handleKeyDown(action.key, state, context);
+    case ListActionTypes.itemClick:
+      return handleItemSelection(action.item, state, context);
+    case ListActionTypes.blur:
+      return handleBlur(state, context);
+    case ListActionTypes.textNavigation:
+      return handleTextNavigation(state, action.searchString, context);
+    case ListActionTypes.itemsChange:
+      return handleItemsChange(action.items, action.previousItems, state, context);
+    default:
+      return state;
+  }
+}
diff --git a/packages/mui-base/src/useListbox/useListbox.test.tsx b/packages/mui-base/src/useList/useList.test.tsx
similarity index 50%
rename from packages/mui-base/src/useListbox/useListbox.test.tsx
rename to packages/mui-base/src/useList/useList.test.tsx
index d79e881d49040a..efc4a6ff590b56 100644
--- a/packages/mui-base/src/useListbox/useListbox.test.tsx
+++ b/packages/mui-base/src/useList/useList.test.tsx
@@ -2,68 +2,20 @@ import * as React from 'react';
 import { expect } from 'chai';
 import { SinonSpy, spy } from 'sinon';
 import { createRenderer, createEvent, fireEvent } from 'test/utils';
-import useListbox from './useListbox';
+import useList from './useList';
 
-describe('useListbox', () => {
+describe('useList', () => {
   const { render } = createRenderer();
-  describe('prop: id', () => {
-    it('propagates it to the root element', () => {
-      function Listbox() {
-        const { getRootProps } = useListbox({ options: [], id: 'test-id' });
-        return <ul {...getRootProps()} />;
-      }
-      const { getByRole } = render(<Listbox />);
-
-      const listbox = getByRole('listbox');
-      expect(listbox).to.have.attribute('id', 'test-id');
-    });
-
-    it('uses the provided id to create option ids', () => {
-      const options = ['one', 'two'];
-      function Listbox() {
-        const { getRootProps, getOptionProps } = useListbox({ options, id: 'test-id' });
-        return (
-          <ul {...getRootProps()}>
-            {options.map((o) => (
-              <li key={o} {...getOptionProps(o)}>
-                {o}
-              </li>
-            ))}
-          </ul>
-        );
-      }
-      const { getAllByRole } = render(<Listbox />);
-
-      const optionElements = getAllByRole('option');
-      optionElements.forEach((opt, index) =>
-        expect(opt).to.have.attribute('id', `test-id-option-${index}`),
-      );
-    });
-
-    it('generates a unique id if not provided explicitly', () => {
-      function Listbox() {
-        const { getRootProps } = useListbox({ options: [] });
-        return <ul {...getRootProps()} />;
-      }
-
-      const { getAllByRole } = render(
-        <React.Fragment>
-          <Listbox />
-          <Listbox />
-        </React.Fragment>,
-      );
-
-      const listboxes = getAllByRole('listbox');
-      expect(listboxes[0].id).not.to.equal(listboxes[1].id);
-    });
-  });
-
   describe('preventing default behavior on keyDown', () => {
     ['ArrowUp', 'ArrowDown', 'Home', 'End', 'PageUp', 'PageDown', 'Enter', ' '].forEach((key) =>
       it(`prevents default behavior when ${key} is pressed in activeDescendant focus management mode`, () => {
         function Listbox() {
-          const { getRootProps } = useListbox({ options: [], focusManagement: 'activeDescendant' });
-          return <div {...getRootProps()} />;
+          const { getRootProps } = useList({
+            items: [],
+            focusManagement: 'activeDescendant',
+            getItemId: () => undefined,
+          });
+          return <div role="listbox" {...getRootProps()} />;
         }
 
         const { getByRole } = render(<Listbox />);
@@ -84,8 +36,12 @@ describe('useListbox', () => {
     ['ArrowUp', 'ArrowDown', 'Home', 'End', 'PageUp', 'PageDown'].forEach((key) =>
       it(`prevents default behavior when ${key} is pressed in DOM focus management mode`, () => {
         function Listbox() {
-          const { getRootProps } = useListbox({ options: [], focusManagement: 'DOM' });
-          return <div {...getRootProps()} />;
+          const { getRootProps } = useList({
+            items: [],
+            focusManagement: 'DOM',
+            getItemDomElement: () => null,
+          });
+          return <div role="listbox" {...getRootProps()} />;
         }
 
         const { getByRole } = render(<Listbox />);
@@ -106,8 +62,12 @@ describe('useListbox', () => {
     ['Enter', ' '].forEach((key) =>
       it(`does not prevent default behavior when ${key} is pressed in DOM focus management mode`, () => {
         function Listbox() {
-          const { getRootProps } = useListbox({ options: [], focusManagement: 'DOM' });
-          return <div {...getRootProps()} />;
+          const { getRootProps } = useList({
+            items: [],
+            focusManagement: 'DOM',
+            getItemDomElement: () => null,
+          });
+          return <div role="listbox" {...getRootProps()} />;
         }
 
         const { getByRole } = render(<Listbox />);
diff --git a/packages/mui-base/src/useList/useList.ts b/packages/mui-base/src/useList/useList.ts
new file mode 100644
index 00000000000000..84dbb6724d744b
--- /dev/null
+++ b/packages/mui-base/src/useList/useList.ts
@@ -0,0 +1,397 @@
+import * as React from 'react';
+import { unstable_useForkRef as useForkRef } from '@mui/utils';
+import {
+  UseListParameters,
+  ListItemState,
+  UseListRootSlotProps,
+  ListState,
+  ListActionContext,
+} from './useList.types';
+import { ListActionTypes, ListAction } from './listActions.types';
+import { ListContextValue } from './ListContext';
+import defaultReducer from './listReducer';
+import useListChangeNotifiers from './useListChangeNotifiers';
+import useControllableReducer from '../utils/useControllableReducer';
+import {
+  ControllableReducerAction,
+  StateChangeCallback,
+  StateComparers,
+} from '../utils/useControllableReducer.types';
+import areArraysEqual from '../utils/areArraysEqual';
+import { EventHandlers } from '../utils/types';
+import useLatest from '../utils/useLatest';
+import useTextNavigation from '../utils/useTextNavigation';
+
+const EMPTY_OBJECT = {};
+const NOOP = () => {};
+
+const defaultItemComparer = <ItemValue>(optionA: ItemValue, optionB: ItemValue) =>
+  optionA === optionB;
+
+const defaultIsItemDisabled = () => false;
+
+const defaultItemStringifier = <ItemValue>(item: ItemValue) =>
+  typeof item === 'string' ? item : String(item);
+
+const defaultGetInitialState = () => ({
+  highlightedValue: null,
+  selectedValues: [],
+});
+
+/**
+ * The useList is a lower-level utility that is used to build list-like components.
+ * It's used to manage the state of the list and its items.
+ *
+ * Supports highlighting a single item and selecting an arbitrary number of items.
+ *
+ * The state of the list is managed by a controllable reducer - that is a reducer that can have its state
+ * controlled from outside.
+ *
+ * By default, the state consists of `selectedValues` and `highlightedValue` but can be extended by the caller of the hook.
+ * Also the actions that can be dispatched and the reducer function can be defined externally.
+ *
+ * @template ItemValue The type of the item values.
+ * @template State The type of the list state. This should be a subtype of `ListState<ItemValue>`.
+ * @template CustomAction The type of the actions that can be dispatched (besides the standard ListAction).
+ * @template CustomActionContext The shape of additional properties that will be added to actions when dispatched.
+ *
+ * @ignore - internal hook.
+ */
+function useList<
+  ItemValue,
+  State extends ListState<ItemValue> = ListState<ItemValue>,
+  CustomAction extends ControllableReducerAction = never,
+  CustomActionContext = {},
+>(params: UseListParameters<ItemValue, State, CustomAction, CustomActionContext>) {
+  const {
+    controlledProps = EMPTY_OBJECT,
+    disabledItemsFocusable = false,
+    disableListWrap = false,
+    focusManagement = 'activeDescendant',
+    getInitialState = defaultGetInitialState,
+    getItemDomElement,
+    getItemId,
+    isItemDisabled = defaultIsItemDisabled,
+    listRef: externalListRef,
+    onStateChange = NOOP,
+    items,
+    itemComparer = defaultItemComparer,
+    itemStringifier = defaultItemStringifier,
+    onChange,
+    onHighlightChange,
+    orientation = 'vertical',
+    pageSize = 5,
+    reducerActionContext = EMPTY_OBJECT as CustomActionContext,
+    selectionMode = 'single',
+    stateReducer: externalReducer,
+  } = params;
+
+  if (process.env.NODE_ENV !== 'production') {
+    if (focusManagement === 'DOM' && getItemDomElement == null) {
+      throw new Error(
+        'useList: The `getItemDomElement` prop is required when using the `DOM` focus management.',
+      );
+    }
+
+    if (focusManagement === 'activeDescendant' && getItemId == null) {
+      throw new Error(
+        'useList: The `getItemId` prop is required when using the `activeDescendant` focus management.',
+      );
+    }
+  }
+
+  const listRef = React.useRef<HTMLUListElement>(null);
+  const handleRef = useForkRef(externalListRef, listRef);
+
+  const handleHighlightChange = React.useCallback(
+    (
+      event: React.MouseEvent | React.KeyboardEvent | React.FocusEvent | null,
+      value: ItemValue | null,
+      reason: string,
+    ) => {
+      onHighlightChange?.(event, value, reason);
+
+      if (
+        focusManagement === 'DOM' &&
+        value != null &&
+        (reason === ListActionTypes.itemClick ||
+          reason === ListActionTypes.keyDown ||
+          reason === ListActionTypes.textNavigation)
+      ) {
+        getItemDomElement?.(value)?.focus();
+      }
+    },
+    [getItemDomElement, onHighlightChange, focusManagement],
+  );
+
+  const stateComparers = React.useMemo(
+    () =>
+      ({
+        highlightedValue: itemComparer,
+        selectedValues: (valuesArray1, valuesArray2) =>
+          areArraysEqual(valuesArray1, valuesArray2, itemComparer),
+      } as StateComparers<State>),
+    [itemComparer],
+  );
+
+  // This gets called whenever a reducer changes the state.
+  const handleStateChange: StateChangeCallback<State> = React.useCallback(
+    (event, field, value, reason, state) => {
+      onStateChange?.(event, field, value, reason, state);
+
+      switch (field) {
+        case 'highlightedValue':
+          handleHighlightChange(
+            event as React.MouseEvent | React.KeyboardEvent | React.FocusEvent | null,
+            value as ItemValue | null,
+            reason,
+          );
+          break;
+        case 'selectedValues':
+          onChange?.(
+            event as React.MouseEvent | React.KeyboardEvent | React.FocusEvent | null,
+            value as ItemValue[],
+            reason,
+          );
+          break;
+        default:
+          break;
+      }
+    },
+    [handleHighlightChange, onChange, onStateChange],
+  );
+
+  // The following object is added to each action when it's dispatched.
+  // It's accessible in the reducer via the `action.context` field.
+  const listActionContext: ListActionContext<ItemValue> = React.useMemo(() => {
+    return {
+      disabledItemsFocusable,
+      disableListWrap,
+      focusManagement,
+      isItemDisabled,
+      itemComparer,
+      items,
+      itemStringifier,
+      onHighlightChange: handleHighlightChange,
+      orientation,
+      pageSize,
+      selectionMode,
+      stateComparers,
+    };
+  }, [
+    disabledItemsFocusable,
+    disableListWrap,
+    focusManagement,
+    isItemDisabled,
+    itemComparer,
+    items,
+    itemStringifier,
+    handleHighlightChange,
+    orientation,
+    pageSize,
+    selectionMode,
+    stateComparers,
+  ]);
+
+  const initialState = getInitialState();
+  const reducer = (externalReducer ?? defaultReducer) as React.Reducer<
+    State,
+    ListAction<ItemValue> | CustomAction
+  >;
+
+  const actionContext: ListActionContext<ItemValue> & CustomActionContext = React.useMemo(
+    () => ({ ...reducerActionContext, ...listActionContext }),
+    [reducerActionContext, listActionContext],
+  );
+
+  const [state, dispatch] = useControllableReducer<
+    State,
+    ListAction<ItemValue> | CustomAction,
+    ListActionContext<ItemValue> & CustomActionContext
+  >({
+    reducer,
+    actionContext,
+    initialState: initialState as State,
+    controlledProps,
+    stateComparers,
+    onStateChange: handleStateChange,
+  });
+
+  const { highlightedValue, selectedValues } = state;
+
+  const handleTextNavigation = useTextNavigation((searchString, event) =>
+    dispatch({
+      type: ListActionTypes.textNavigation,
+      event,
+      searchString,
+    }),
+  );
+
+  // introducing refs to avoid recreating the getItemState function on each change.
+  const latestSelectedValues = useLatest(selectedValues);
+  const latestHighlightedValue = useLatest(highlightedValue);
+  const previousItems = React.useRef<ItemValue[]>([]);
+
+  React.useEffect(() => {
+    // Whenever the `items` object changes, we need to determine if the actual items changed.
+    // If they did, we need to dispatch an `itemsChange` action, so the selected/highlighted state is updated.
+    if (areArraysEqual(previousItems.current, items, itemComparer)) {
+      return;
+    }
+
+    dispatch({
+      type: ListActionTypes.itemsChange,
+      event: null,
+      items,
+      previousItems: previousItems.current,
+    });
+
+    previousItems.current = items;
+  }, [items, itemComparer, dispatch]);
+
+  // Subitems are notified of changes to the highlighted and selected values.
+  // This is not done via context because we don't want to trigger a re-render of all the subitems each time any of them changes state.
+  // Instead, we use a custom message bus to publish messages about changes.
+  // On the child component, we use a custom hook to subscribe to these messages and re-render only when the value they care about changes.
+  const {
+    notifySelectionChanged,
+    notifyHighlightChanged,
+    registerHighlightChangeHandler,
+    registerSelectionChangeHandler,
+  } = useListChangeNotifiers<ItemValue>();
+
+  React.useEffect(() => {
+    notifySelectionChanged(selectedValues);
+  }, [selectedValues, notifySelectionChanged]);
+
+  React.useEffect(() => {
+    notifyHighlightChanged(highlightedValue);
+  }, [highlightedValue, notifyHighlightChanged]);
+
+  const createHandleKeyDown =
+    (other: Record<string, React.EventHandler<any>>) =>
+    (event: React.KeyboardEvent<HTMLElement>) => {
+      other.onKeyDown?.(event);
+
+      if (event.defaultPrevented) {
+        return;
+      }
+
+      const keysToPreventDefault = ['Home', 'End', 'PageUp', 'PageDown'];
+
+      if (orientation === 'vertical') {
+        keysToPreventDefault.push('ArrowUp', 'ArrowDown');
+      } else {
+        keysToPreventDefault.push('ArrowLeft', 'ArrowRight');
+      }
+
+      if (focusManagement === 'activeDescendant') {
+        // When the child element is focused using the activeDescendant attribute,
+        // the list handles keyboard events on its behalf.
+        // We have to `preventDefault()` is this case to prevent the browser from
+        // scrolling the view when space is pressed or submitting forms when enter is pressed.
+        keysToPreventDefault.push(' ', 'Enter');
+      }
+
+      if (keysToPreventDefault.includes(event.key)) {
+        event.preventDefault();
+      }
+
+      dispatch({
+        type: ListActionTypes.keyDown,
+        key: event.key,
+        event,
+      });
+
+      handleTextNavigation(event);
+    };
+
+  const createHandleBlur =
+    (other: Record<string, React.EventHandler<any>>) => (event: React.FocusEvent<HTMLElement>) => {
+      other.onBlur?.(event);
+
+      if (event.defaultPrevented) {
+        return;
+      }
+
+      if (listRef.current?.contains(event.relatedTarget)) {
+        // focus remains within the list
+        return;
+      }
+
+      dispatch({
+        type: ListActionTypes.blur,
+        event,
+      });
+    };
+
+  const getRootProps = <TOther extends EventHandlers = {}>(
+    otherHandlers: TOther = {} as TOther,
+  ): UseListRootSlotProps<TOther> => {
+    return {
+      ...otherHandlers,
+      'aria-activedescendant':
+        focusManagement === 'activeDescendant' && highlightedValue != null
+          ? getItemId!(highlightedValue)
+          : undefined,
+      onBlur: createHandleBlur(otherHandlers),
+      onKeyDown: createHandleKeyDown(otherHandlers),
+      tabIndex: focusManagement === 'DOM' ? -1 : 0,
+      ref: handleRef,
+    };
+  };
+
+  const getItemState = React.useCallback(
+    (item: ItemValue): ListItemState => {
+      const index = items.findIndex((i) => itemComparer(i, item));
+      const selected = (latestSelectedValues.current ?? []).some(
+        (value) => value != null && itemComparer(item, value),
+      );
+
+      const disabled = isItemDisabled(item, index);
+      const highlighted =
+        latestHighlightedValue.current != null &&
+        itemComparer(item, latestHighlightedValue.current);
+      const focusable = focusManagement === 'DOM';
+
+      return {
+        disabled,
+        focusable,
+        highlighted,
+        index,
+        selected,
+      };
+    },
+    [
+      items,
+      isItemDisabled,
+      itemComparer,
+      latestSelectedValues,
+      latestHighlightedValue,
+      focusManagement,
+    ],
+  );
+
+  const contextValue: ListContextValue<ItemValue> = React.useMemo(
+    () => ({
+      dispatch,
+      getItemState,
+      registerHighlightChangeHandler,
+      registerSelectionChangeHandler,
+    }),
+    [dispatch, getItemState, registerHighlightChangeHandler, registerSelectionChangeHandler],
+  );
+
+  React.useDebugValue({
+    state,
+  });
+
+  return {
+    contextValue,
+    dispatch,
+    getRootProps,
+    state,
+  };
+}
+
+export default useList;
diff --git a/packages/mui-base/src/useList/useList.types.ts b/packages/mui-base/src/useList/useList.types.ts
new file mode 100644
index 00000000000000..81710216dd42c9
--- /dev/null
+++ b/packages/mui-base/src/useList/useList.types.ts
@@ -0,0 +1,243 @@
+import * as React from 'react';
+import { Simplify } from '@mui/types';
+import { ListAction } from './listActions.types';
+import {
+  ActionWithContext,
+  ControllableReducerAction,
+  StateChangeCallback,
+} from '../utils/useControllableReducer.types';
+
+type ListActionContextRequiredKeys =
+  | 'disabledItemsFocusable'
+  | 'disableListWrap'
+  | 'focusManagement'
+  | 'isItemDisabled'
+  | 'itemComparer'
+  | 'items'
+  | 'itemStringifier'
+  | 'orientation'
+  | 'pageSize'
+  | 'selectionMode';
+
+/**
+ * The subset of `UseListParameters` that is passed to the list reducer actions.
+ */
+export type ListActionContext<ItemValue> = Simplify<
+  Required<Pick<UseListParameters<ItemValue, any, any>, ListActionContextRequiredKeys>>
+>;
+
+/**
+ * The action object augmented with the action context ({@linkcode ListActionContext} instance).
+ * Instances of this type are passed to the reducer.
+ *
+ * @template ItemValue The type of the item values.
+ * @template CustomActionContext The shape of additional properties that will be added to actions when dispatched.
+ */
+export type ListReducerAction<ItemValue, CustomActionContext = {}> = ActionWithContext<
+  ListAction<ItemValue>,
+  ListActionContext<ItemValue> & CustomActionContext
+>;
+
+/**
+ * The state of the list.
+ * Modifications to this state should be done via the reducer.
+ */
+export interface ListState<ItemValue> {
+  /**
+   * The item that is currently highlighted.
+   */
+  highlightedValue: ItemValue | null;
+  /**
+   * The item(s) that are currently selected.
+   */
+  selectedValues: ItemValue[];
+}
+
+/**
+ * Type of the reducer that operates on the list state.
+ *
+ * @template ItemValue The type of the item values.
+ * @template State The type of the list state. This should be a subtype of ListState<ItemValue>.
+ * @template CustomActionContext The shape of additional properties that will be added to actions when dispatched.
+ */
+export type ListReducer<ItemValue, State extends ListState<ItemValue>, CustomActionContext> = (
+  state: State,
+  action: ListReducerAction<ItemValue, CustomActionContext>,
+) => State;
+
+export type FocusManagementType = 'DOM' | 'activeDescendant';
+
+export type SelectionMode = 'none' | 'single' | 'multiple';
+
+/**
+ * Parameters of the useList hook.
+ *
+ * @template ItemValue The type of the item values.
+ * @template State The type of the list state. This should be a subtype of `ListState<ItemValue>`.
+ * @template CustomAction The type of the actions that can be dispatched (besides the standard ListAction).
+ * @template CustomActionContext The shape of additional properties that will be added to actions when dispatched.
+ */
+export interface UseListParameters<
+  ItemValue,
+  State extends ListState<ItemValue> = ListState<ItemValue>,
+  CustomAction extends ControllableReducerAction = never,
+  CustomActionContext = {},
+> {
+  /**
+   * The externally controlled values (highlighted and selected item(s)) of the list.
+   * If a custom state is used, this object can contain the added state fields as well.
+   *
+   * @default {}
+   */
+  controlledProps?: Partial<State>;
+  /**
+   * If `true`, it will be possible to highlight disabled items.
+   * @default false
+   */
+  disabledItemsFocusable?: boolean;
+  /**
+   * If `true`, the highlight will not wrap around the list if arrow keys are used.
+   * @default false
+   */
+  disableListWrap?: boolean;
+  /**
+   * The focus management strategy used by the list.
+   * Controls the attributes used to set focus on the list items.
+   */
+  focusManagement?: FocusManagementType;
+  /**
+   * A function that returns the DOM element associated with an item.
+   * This is required when using the `DOM` focus management.
+   *
+   * @param item List item to get the DOM element for.
+   */
+  getItemDomElement?: (itemValue: ItemValue) => HTMLElement | null;
+  /**
+   * A function that returns the id of an item.
+   * This is required when using the `activeDescendant` focus management.
+   *
+   * @param itemValue List item to get the id for.
+   */
+  getItemId?: (itemValue: ItemValue) => string | undefined;
+  /**
+   * A function that intializes the state of the list.
+   * It is required when using a custom state with mandatory fields.
+   * If not provided, the state will be initialized with the default values (nothing highlighted or selected).
+   *
+   * @returns The initial state of the list.
+   */
+  getInitialState?: () => State;
+  /**
+   * A function that determines if a particular item is disabled.
+   * @default () => false
+   */
+  isItemDisabled?: (itemValue: ItemValue, index: number) => boolean;
+  /**
+   * Ref of the list root DOM element.
+   */
+  listRef?: React.Ref<any>;
+  /**
+   * 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,
+    value: ItemValue[],
+    reason: string,
+  ) => void;
+  /**
+   * Callback fired when the highlighted option changes.
+   * This is a strongly typed convenience event that can be used instead of `onStateChange`.
+   */
+  onHighlightChange?: (
+    e: React.MouseEvent | React.KeyboardEvent | React.FocusEvent | null,
+    option: ItemValue | null,
+    reason: string,
+  ) => void;
+  /**
+   * Callback fired when the any of the state items change.
+   * Note that in case of `selectedValues` and `highlightedValue` the strongly typed
+   * `onChange` and `onHighlightChange` callbacks are also fired.
+   */
+  onStateChange?: StateChangeCallback<State>;
+  /**
+   * The number of items skip when using the page up and page down keys.
+   *
+   * @default 5
+   */
+  pageSize?: number;
+  /**
+   * A function that tests equality between two items' values.
+   * @default (a, b) => a === b
+   */
+  itemComparer?: (itemValue1: ItemValue, itemValue2: ItemValue) => boolean;
+  /**
+   * A function that converts an object to its string representation
+   * @default (o) => o
+   */
+  itemStringifier?: (option: ItemValue) => string | undefined;
+  /**
+   * Array of list items.
+   */
+  items: ItemValue[];
+  /**
+   * Additional data to be passed to all the reducer actions.
+   * It will be available in the `context` property of the action when dispatched.
+   */
+  reducerActionContext?: CustomActionContext;
+  /**
+   * Orientation of the items in the list.
+   * Determines the actions that are performed when arrow keys are pressed.
+   */
+  orientation?: 'horizontal-ltr' | 'horizontal-rtl' | 'vertical';
+  /**
+   * Controls how many items can be selected at once: none (the selection functionality is disabled in this case), one, or indefinitely many.
+   * @default 'single'
+   */
+  selectionMode?: SelectionMode;
+  /**
+   * Custom state reducer function. It calculates the new state (highlighted and selected items + optional custom state)
+   * based on the previous one and the performed action.
+   */
+  stateReducer?: (
+    state: State,
+    action: ActionWithContext<
+      ListAction<ItemValue> | CustomAction,
+      ListActionContext<ItemValue> & CustomActionContext
+    >,
+  ) => State;
+}
+
+export interface ListItemState {
+  /**
+   * If `true` the item is disabled.
+   */
+  disabled: boolean;
+  /**
+   * Determines if the item is focusable (its focus is managed by the DOM).
+   */
+  focusable: boolean;
+  /**
+   * If `true` the item is highlighted.
+   */
+  highlighted: boolean;
+  /**
+   * The 0-based index of the item.
+   */
+  index: number;
+  /**
+   * If `true` the item is selected.
+   */
+  selected: boolean;
+}
+
+interface UseListRootSlotOwnProps {
+  'aria-activedescendant'?: React.AriaAttributes['aria-activedescendant'];
+  id?: string;
+  onBlur: React.FocusEventHandler;
+  onKeyDown: React.KeyboardEventHandler;
+  tabIndex: number;
+  ref: React.Ref<any>;
+}
+
+export type UseListRootSlotProps<TOther = {}> = TOther & UseListRootSlotOwnProps;
diff --git a/packages/mui-base/src/useSelect/useSelectChangeNotifiers.ts b/packages/mui-base/src/useList/useListChangeNotifiers.ts
similarity index 61%
rename from packages/mui-base/src/useSelect/useSelectChangeNotifiers.ts
rename to packages/mui-base/src/useList/useListChangeNotifiers.ts
index 426c7e1910a71e..a5529fdb1ebe40 100644
--- a/packages/mui-base/src/useSelect/useSelectChangeNotifiers.ts
+++ b/packages/mui-base/src/useList/useListChangeNotifiers.ts
@@ -4,25 +4,23 @@ import useMessageBus from '../utils/useMessageBus';
 const SELECTION_CHANGE_TOPIC = 'select:change-selection';
 const HIGHLIGHT_CHANGE_TOPIC = 'select:change-highlight';
 
-export interface SelectChangeNotifiers<TValue> {
+export interface ListChangeNotifiers<ItemValue> {
   /**
    * Calls all the registered selection change handlers.
    *
    * @param newValue - The newly selected value(s).
    */
-  notifySelectionChanged: (newValue: TValue | TValue[] | null) => void;
+  notifySelectionChanged: (newValue: ItemValue[]) => void;
   /**
    * Calls all the registered highlight change handlers.
    *
    * @param newValue - The newly highlighted value.
    */
-  notifyHighlightChanged: (newValue: TValue | null) => void;
+  notifyHighlightChanged: (newValue: ItemValue | null) => void;
 
-  registerSelectionChangeHandler: (
-    handler: (newValue: TValue | TValue[] | null) => void,
-  ) => () => void;
+  registerSelectionChangeHandler: (handler: (newValue: ItemValue[]) => void) => () => void;
 
-  registerHighlightChangeHandler: (handler: (newValue: TValue | null) => void) => () => void;
+  registerHighlightChangeHandler: (handler: (newValue: ItemValue | null) => void) => () => void;
 }
 
 /**
@@ -30,32 +28,32 @@ export interface SelectChangeNotifiers<TValue> {
  *
  * This hook is used to notify any interested components about changes in the Select's selection and highlight.
  */
-export default function useSelectChangeNotifiers<TValue>(): SelectChangeNotifiers<TValue> {
+export default function useSelectChangeNotifiers<Item>(): ListChangeNotifiers<Item> {
   const messageBus = useMessageBus();
 
   const notifySelectionChanged = React.useCallback(
-    (newValue: TValue | TValue[] | null) => {
-      messageBus.publish(SELECTION_CHANGE_TOPIC, newValue);
+    (newSelectedItems: Item | Item[] | null) => {
+      messageBus.publish(SELECTION_CHANGE_TOPIC, newSelectedItems);
     },
     [messageBus],
   );
 
   const notifyHighlightChanged = React.useCallback(
-    (newValue: TValue | null) => {
-      messageBus.publish(HIGHLIGHT_CHANGE_TOPIC, newValue);
+    (newHighlightedItem: Item | null) => {
+      messageBus.publish(HIGHLIGHT_CHANGE_TOPIC, newHighlightedItem);
     },
     [messageBus],
   );
 
   const registerSelectionChangeHandler = React.useCallback(
-    (handler: (newValue: TValue | TValue[] | null) => void) => {
+    (handler: (newSelectedItems: Item[]) => void) => {
       return messageBus.subscribe(SELECTION_CHANGE_TOPIC, handler);
     },
     [messageBus],
   );
 
   const registerHighlightChangeHandler = React.useCallback(
-    (handler: (newValue: TValue | null) => void) => {
+    (handler: (newHighlightedItem: Item | null) => void) => {
       return messageBus.subscribe(HIGHLIGHT_CHANGE_TOPIC, handler);
     },
     [messageBus],
diff --git a/packages/mui-base/src/useList/useListItem.ts b/packages/mui-base/src/useList/useListItem.ts
new file mode 100644
index 00000000000000..dbd7f1acf24ad0
--- /dev/null
+++ b/packages/mui-base/src/useList/useListItem.ts
@@ -0,0 +1,121 @@
+import * as React from 'react';
+import {
+  unstable_useForkRef as useForkRef,
+  unstable_useEnhancedEffect as useEnhancedEffect,
+} from '@mui/utils';
+import { EventHandlers } from '../utils/types';
+import useForcedRerendering from '../utils/useForcedRerendering';
+import { UseListItemParameters, UseListItemReturnValue } from './useListItem.types';
+import { ListActionTypes } from './listActions.types';
+import { ListContext } from './ListContext';
+
+/**
+ * Contains the logic for an item of a list-like component (e.g. Select, Menu, etc.).
+ * It provides information about the item's state (selected, highlighted) and
+ * handles the item's mouse events.
+ *
+ * @template ItemValue The type of the item's value. This should be consistent with the type of useList's `items` parameter.
+ * @ignore - internal hook.
+ */
+export default function useListItem<ItemValue>(
+  parameters: UseListItemParameters<ItemValue>,
+): UseListItemReturnValue {
+  const { handlePointerOverEvents = false, item, ref: externalRef } = parameters;
+
+  const itemRef = React.useRef<HTMLElement>(null);
+  const handleRef = useForkRef(itemRef, externalRef);
+
+  const listContext = React.useContext(ListContext);
+  if (!listContext) {
+    throw new Error('useListItem must be used within a ListProvider');
+  }
+
+  const { dispatch, getItemState, registerHighlightChangeHandler, registerSelectionChangeHandler } =
+    listContext;
+
+  const { highlighted, selected, focusable } = getItemState(item);
+
+  const rerender = useForcedRerendering();
+
+  useEnhancedEffect(() => {
+    function updateHighlightedState(highlightedItem: ItemValue | null) {
+      if (highlightedItem === item && !highlighted) {
+        rerender();
+      } else if (highlightedItem !== item && highlighted) {
+        rerender();
+      }
+    }
+
+    return registerHighlightChangeHandler(updateHighlightedState);
+  });
+
+  useEnhancedEffect(() => {
+    function updateSelectedState(selectedItems: ItemValue[]) {
+      if (!selected) {
+        if (selectedItems.includes(item)) {
+          rerender();
+        }
+      } else if (!selectedItems.includes(item)) {
+        rerender();
+      }
+    }
+
+    return registerSelectionChangeHandler(updateSelectedState);
+  }, [registerSelectionChangeHandler, rerender, selected, item]);
+
+  const createHandleClick = React.useCallback(
+    (other: Record<string, React.EventHandler<any>>) => (event: React.MouseEvent) => {
+      other.onClick?.(event);
+      if (event.defaultPrevented) {
+        return;
+      }
+
+      event.preventDefault();
+
+      dispatch({
+        type: ListActionTypes.itemClick,
+        item,
+        event,
+      });
+    },
+    [dispatch, item],
+  );
+
+  const createHandlePointerOver = React.useCallback(
+    (other: Record<string, React.EventHandler<any>>) => (event: React.PointerEvent) => {
+      other.onMouseOver?.(event);
+      if (event.defaultPrevented) {
+        return;
+      }
+
+      dispatch({
+        type: ListActionTypes.itemHover,
+        item,
+        event,
+      });
+    },
+    [dispatch, item],
+  );
+
+  let tabIndex: number | undefined;
+  if (focusable) {
+    tabIndex = highlighted ? 0 : -1;
+  }
+
+  const getRootProps = <TOther extends EventHandlers = {}>(
+    otherHandlers: TOther = {} as TOther,
+  ) => ({
+    ...otherHandlers,
+    onClick: createHandleClick(otherHandlers),
+    onPointerOver: handlePointerOverEvents ? createHandlePointerOver(otherHandlers) : undefined,
+    ref: handleRef,
+    tabIndex,
+  });
+
+  return {
+    getRootProps,
+    highlighted,
+    ref: handleRef,
+    selected,
+  };
+}
diff --git a/packages/mui-base/src/useList/useListItem.types.ts b/packages/mui-base/src/useList/useListItem.types.ts
new file mode 100644
index 00000000000000..cd40d73bc4b3b6
--- /dev/null
+++ b/packages/mui-base/src/useList/useListItem.types.ts
@@ -0,0 +1,56 @@
+import { EventHandlers } from '../utils';
+
+export interface UseListItemParameters<ItemValue> {
+  /**
+   * If `true`, the list item will dispatch the `itemHover` action on pointer over.
+   * Since the use cases for it are rare, it's disabled by default.
+   * It could be used to mimic the native `select` behavior, which highlights the hovered item.
+   *
+   * @default false
+   */
+  handlePointerOverEvents?: boolean;
+  /**
+   * The list item.
+   */
+  item: ItemValue;
+  /**
+   * A ref to the list item's DOM element.
+   */
+  ref?: React.Ref<HTMLElement>;
+}
+
+interface UseListItemRootSlotOwnProps {
+  id?: string;
+  onClick: React.MouseEventHandler;
+  onPointerOver: React.PointerEventHandler | undefined;
+  tabIndex?: number;
+}
+
+export type UseListItemRootSlotProps<TOther = {}> = Omit<
+  TOther,
+  keyof UseListItemRootSlotOwnProps
+> &
+  UseListItemRootSlotOwnProps;
+
+export interface UseListItemReturnValue {
+  /**
+   * Resolver for the root slot's props.
+   * @param otherHandlers event handlers for the root slot
+   * @returns props that should be spread on the root slot
+   */
+  getRootProps: <TOther extends EventHandlers = {}>(
+    otherHandlers?: TOther,
+  ) => UseListItemRootSlotProps<TOther>;
+  /**
+   * If `true`, the current item is highlighted.
+   */
+  highlighted: boolean;
+  /**
+   * If `true`, the current item is selected.
+   */
+  selected: boolean;
+  /**
+   * The ref to the root element.
+   */
+  ref: ((instance: HTMLElement | null) => void) | null;
+}
diff --git a/packages/mui-base/src/useListbox/defaultListboxReducer.test.ts b/packages/mui-base/src/useListbox/defaultListboxReducer.test.ts
deleted file mode 100644
index 13a1973b05d882..00000000000000
--- a/packages/mui-base/src/useListbox/defaultListboxReducer.test.ts
+++ /dev/null
@@ -1,508 +0,0 @@
-import * as React from 'react';
-import { expect } from 'chai';
-import { ActionTypes, ListboxReducerAction, ListboxState } from './useListbox.types';
-import defaultReducer from './defaultListboxReducer';
-
-describe('useListbox defaultReducer', () => {
-  describe('action: setControlledValue', () => {
-    it("assigns the provided value to the state's selectedValue", () => {
-      const state: ListboxState<string> = {
-        highlightedValue: 'a',
-        selectedValues: [],
-      };
-
-      const action: ListboxReducerAction<string> = {
-        type: ActionTypes.setValue,
-        value: ['foo'],
-        event: null,
-        props: {
-          options: ['foo', 'bar'],
-          disableListWrap: false,
-          disabledItemsFocusable: false,
-          isOptionDisabled: () => false,
-          optionComparer: (o, v) => o === v,
-          optionStringifier: (option) => option,
-          selectionLimit: null,
-        },
-      };
-      const result = defaultReducer(state, action);
-      expect(result.selectedValues).to.deep.equal(['foo']);
-    });
-  });
-
-  describe('action: blur', () => {
-    it('resets the highlightedIndex', () => {
-      const state: ListboxState<string> = {
-        highlightedValue: 'a',
-        selectedValues: [],
-      };
-
-      const action: ListboxReducerAction<string> = {
-        type: ActionTypes.blur,
-        event: {} as any, // not relevant
-        props: {
-          options: [],
-          disableListWrap: false,
-          disabledItemsFocusable: false,
-          isOptionDisabled: () => false,
-          optionComparer: (o, v) => o === v,
-          optionStringifier: (option) => option,
-          selectionLimit: null,
-        },
-      };
-
-      const result = defaultReducer(state, action);
-      expect(result.highlightedValue).to.equal(null);
-    });
-  });
-
-  describe('action: optionClick', () => {
-    it('sets the selectedValue to the clicked value', () => {
-      const state: ListboxState<string> = {
-        highlightedValue: 'a',
-        selectedValues: [],
-      };
-
-      const action: ListboxReducerAction<string> = {
-        type: ActionTypes.optionClick,
-        event: {} as any, // not relevant
-        props: {
-          options: ['one', 'two', 'three'],
-          disableListWrap: false,
-          disabledItemsFocusable: false,
-          isOptionDisabled: () => false,
-          optionComparer: (o, v) => o === v,
-          optionStringifier: (option) => option,
-          selectionLimit: null,
-        },
-        option: 'two',
-      };
-
-      const result = defaultReducer(state, action);
-      expect(result.selectedValues).to.deep.equal(['two']);
-    });
-
-    it('replaces the selectedValue with the clicked value if selectionLimit = 1', () => {
-      const state: ListboxState<string> = {
-        highlightedValue: 'a',
-        selectedValues: ['one'],
-      };
-
-      const action: ListboxReducerAction<string> = {
-        type: ActionTypes.optionClick,
-        event: {} as any, // not relevant
-        props: {
-          options: ['one', 'two', 'three'],
-          disableListWrap: false,
-          disabledItemsFocusable: false,
-          isOptionDisabled: () => false,
-          optionComparer: (o, v) => o === v,
-          optionStringifier: (option) => option,
-          selectionLimit: 1,
-        },
-        option: 'two',
-      };
-
-      const result = defaultReducer(state, action);
-      expect(result.selectedValues).to.deep.equal(['two']);
-    });
-
-    it('add the clicked value to the selection if selectionLimit is not set', () => {
-      const state: ListboxState<string> = {
-        highlightedValue: 'one',
-        selectedValues: ['one'],
-      };
-
-      const action: ListboxReducerAction<string> = {
-        type: ActionTypes.optionClick,
-        event: {} as any, // not relevant
-        props: {
-          options: ['one', 'two', 'three'],
-          disableListWrap: false,
-          disabledItemsFocusable: false,
-          isOptionDisabled: () => false,
-          optionComparer: (o, v) => o === v,
-          optionStringifier: (option) => option,
-          selectionLimit: null,
-        },
-        option: 'two',
-      };
-
-      const result = defaultReducer(state, action);
-      expect(result.selectedValues).to.deep.equal(['one', 'two']);
-    });
-
-    it('remove the clicked value from the selection if selectionLimit is not set and it was selected already', () => {
-      const state: ListboxState<string> = {
-        highlightedValue: 'three',
-        selectedValues: ['one', 'two'],
-      };
-
-      const action: ListboxReducerAction<string> = {
-        type: ActionTypes.optionClick,
-        event: {} as any, // not relevant
-        props: {
-          options: ['one', 'two', 'three'],
-          disableListWrap: false,
-          disabledItemsFocusable: false,
-          isOptionDisabled: () => false,
-          optionComparer: (o, v) => o === v,
-          optionStringifier: (option) => option,
-          selectionLimit: null,
-        },
-        option: 'two',
-      };
-
-      const result = defaultReducer(state, action);
-      expect(result.selectedValues).to.deep.equal(['one']);
-    });
-  });
-
-  describe('action: keyDown', () => {
-    describe('Home key is pressed', () => {
-      it('highlights the first non-disabled option if the first is disabled', () => {
-        const state: ListboxState<string> = {
-          highlightedValue: null,
-          selectedValues: [],
-        };
-
-        const action: ListboxReducerAction<string> = {
-          type: ActionTypes.keyDown,
-          event: {
-            key: 'Home',
-          } as any,
-          props: {
-            options: ['one', 'two', 'three', 'four', 'five'],
-            disableListWrap: false,
-            disabledItemsFocusable: false,
-            isOptionDisabled: (_, index) => index === 0,
-            optionComparer: (o, v) => o === v,
-            optionStringifier: (option) => option,
-            selectionLimit: null,
-          },
-        };
-
-        const result = defaultReducer(state, action);
-        expect(result.highlightedValue).to.equal('two');
-      });
-    });
-
-    describe('End key is pressed', () => {
-      it('highlights the last non-disabled option if the last is disabled', () => {
-        const state: ListboxState<string> = {
-          highlightedValue: null,
-          selectedValues: [],
-        };
-
-        const action: ListboxReducerAction<string> = {
-          type: ActionTypes.keyDown,
-          event: {
-            key: 'End',
-          } as any,
-          props: {
-            options: ['one', 'two', 'three', 'four', 'five'],
-            disableListWrap: false,
-            disabledItemsFocusable: false,
-            isOptionDisabled: (_, index) => index === 4,
-            optionComparer: (o, v) => o === v,
-            optionStringifier: (option) => option,
-            selectionLimit: null,
-          },
-        };
-
-        const result = defaultReducer(state, action);
-        expect(result.highlightedValue).to.equal('four');
-      });
-    });
-
-    describe('ArrowUp key is pressed', () => {
-      it('wraps the highlight around omitting disabled items', () => {
-        const state: ListboxState<string> = {
-          highlightedValue: null,
-          selectedValues: [],
-        };
-
-        const action: ListboxReducerAction<string> = {
-          type: ActionTypes.keyDown,
-          event: {
-            key: 'ArrowUp',
-          } as any,
-          props: {
-            options: ['one', 'two', 'three', 'four', 'five'],
-            disableListWrap: false,
-            disabledItemsFocusable: false,
-            isOptionDisabled: (_, index) => index === 0 || index === 4,
-            optionComparer: (o, v) => o === v,
-            optionStringifier: (option) => option,
-            selectionLimit: null,
-          },
-        };
-
-        const result = defaultReducer(state, action);
-        expect(result.highlightedValue).to.equal('four');
-      });
-    });
-
-    describe('ArrowDown key is pressed', () => {
-      it('wraps the highlight around omitting disabled items', () => {
-        const state: ListboxState<string> = {
-          highlightedValue: null,
-          selectedValues: [],
-        };
-
-        const action: ListboxReducerAction<string> = {
-          type: ActionTypes.keyDown,
-          event: {
-            key: 'ArrowDown',
-          } as any,
-          props: {
-            options: ['one', 'two', 'three', 'four', 'five'],
-            disableListWrap: false,
-            disabledItemsFocusable: false,
-            isOptionDisabled: (_, index) => index === 0 || index === 4,
-            optionComparer: (o, v) => o === v,
-            optionStringifier: (option) => option,
-            selectionLimit: null,
-          },
-        };
-
-        const result = defaultReducer(state, action);
-        expect(result.highlightedValue).to.equal('two');
-      });
-
-      it('does not highlight any option if all are disabled', () => {
-        const state: ListboxState<string> = {
-          highlightedValue: null,
-          selectedValues: [],
-        };
-
-        const action: ListboxReducerAction<string> = {
-          type: ActionTypes.keyDown,
-          event: {
-            key: 'ArrowDown',
-          } as any,
-          props: {
-            options: ['one', 'two', 'three', 'four', 'five'],
-            disableListWrap: false,
-            disabledItemsFocusable: false,
-            isOptionDisabled: () => true,
-            optionComparer: (o, v) => o === v,
-            optionStringifier: (option) => option,
-            selectionLimit: null,
-          },
-        };
-
-        const result = defaultReducer(state, action);
-        expect(result.highlightedValue).to.equal(null);
-      });
-    });
-
-    describe('Enter key is pressed', () => {
-      it('selects the highlighted option', () => {
-        const state: ListboxState<string> = {
-          highlightedValue: 'two',
-          selectedValues: [],
-        };
-
-        const action: ListboxReducerAction<string> = {
-          type: ActionTypes.keyDown,
-          event: {
-            key: 'Enter',
-          } as any,
-          props: {
-            options: ['one', 'two', 'three'],
-            disableListWrap: false,
-            disabledItemsFocusable: false,
-            isOptionDisabled: () => false,
-            optionComparer: (o, v) => o === v,
-            optionStringifier: (option) => option,
-            selectionLimit: null,
-          },
-        };
-
-        const result = defaultReducer(state, action);
-        expect(result.selectedValues).to.deep.equal(['two']);
-      });
-
-      it('replaces the selectedValue with the highlighted value if selectionLimit = 1', () => {
-        const state: ListboxState<string> = {
-          highlightedValue: 'two',
-          selectedValues: ['one'],
-        };
-
-        const action: ListboxReducerAction<string> = {
-          type: ActionTypes.keyDown,
-          event: {
-            key: 'Enter',
-          } as any,
-          props: {
-            options: ['one', 'two', 'three'],
-            disableListWrap: false,
-            disabledItemsFocusable: false,
-            isOptionDisabled: () => false,
-            optionComparer: (o, v) => o === v,
-            optionStringifier: (option) => option,
-            selectionLimit: 1,
-          },
-        };
-
-        const result = defaultReducer(state, action);
-        expect(result.selectedValues).to.deep.equal(['two']);
-      });
-
-      it('add the highlighted value to the selection if selectionLimit is not set', () => {
-        const state: ListboxState<string> = {
-          highlightedValue: 'two',
-          selectedValues: ['one'],
-        };
-
-        const action: ListboxReducerAction<string> = {
-          type: ActionTypes.optionClick,
-          event: {
-            key: 'Enter',
-          } as any,
-          props: {
-            options: ['one', 'two', 'three'],
-            disableListWrap: false,
-            disabledItemsFocusable: false,
-            isOptionDisabled: () => false,
-            optionComparer: (o, v) => o === v,
-            optionStringifier: (option) => option,
-            selectionLimit: null,
-          },
-          option: 'two',
-        };
-
-        const result = defaultReducer(state, action);
-        expect(result.selectedValues).to.deep.equal(['one', 'two']);
-      });
-    });
-  });
-
-  describe('action: textNavigation', () => {
-    it('should navigate to next match', () => {
-      const state: ListboxState<string> = {
-        highlightedValue: 'two',
-        selectedValues: [],
-      };
-
-      const action: ListboxReducerAction<string> = {
-        type: ActionTypes.textNavigation,
-        searchString: 'th',
-        event: {} as React.KeyboardEvent,
-        props: {
-          options: ['one', 'two', 'three', 'four', 'five'],
-          disableListWrap: false,
-          disabledItemsFocusable: false,
-          isOptionDisabled: () => false,
-          optionComparer: (o, v) => o === v,
-          optionStringifier: (option) => option,
-          selectionLimit: null,
-        },
-      };
-
-      const result = defaultReducer(state, action);
-      expect(result.highlightedValue).to.equal('three');
-    });
-
-    it('should not move highlight when no matched options', () => {
-      const state: ListboxState<string> = {
-        highlightedValue: 'one',
-        selectedValues: [],
-      };
-
-      const action: ListboxReducerAction<string> = {
-        type: ActionTypes.textNavigation,
-        searchString: 'z',
-        event: {} as React.KeyboardEvent,
-        props: {
-          options: ['one', 'two', 'three', 'four', 'five'],
-          disableListWrap: false,
-          disabledItemsFocusable: false,
-          isOptionDisabled: () => false,
-          optionComparer: (o, v) => o === v,
-          optionStringifier: (option) => option,
-          selectionLimit: null,
-        },
-      };
-
-      const result = defaultReducer(state, action);
-      expect(result.highlightedValue).to.equal('one');
-    });
-
-    it('should highlight first match that is not disabled', () => {
-      const state: ListboxState<string> = {
-        highlightedValue: 'one',
-        selectedValues: [],
-      };
-
-      const action: ListboxReducerAction<string> = {
-        type: ActionTypes.textNavigation,
-        searchString: 't',
-        event: {} as React.KeyboardEvent,
-        props: {
-          options: ['one', 'two', 'three', 'four', 'five'],
-          disableListWrap: false,
-          disabledItemsFocusable: false,
-          isOptionDisabled: (_, i) => i === 1,
-          optionComparer: (o, v) => o === v,
-          optionStringifier: (option) => option,
-          selectionLimit: null,
-        },
-      };
-
-      const result = defaultReducer(state, action);
-      expect(result.highlightedValue).to.equal('three');
-    });
-
-    it('should move highlight to disabled items if disabledItemsFocusable=true', () => {
-      const state: ListboxState<string> = {
-        highlightedValue: 'one',
-        selectedValues: [],
-      };
-
-      const action: ListboxReducerAction<string> = {
-        type: ActionTypes.textNavigation,
-        searchString: 't',
-        event: {} as React.KeyboardEvent,
-        props: {
-          options: ['one', 'two', 'three', 'four', 'five'],
-          disableListWrap: false,
-          disabledItemsFocusable: true,
-          isOptionDisabled: (_, i) => i === 1,
-          optionComparer: (o, v) => o === v,
-          optionStringifier: (option) => option,
-          selectionLimit: null,
-        },
-      };
-
-      const result = defaultReducer(state, action);
-      expect(result.highlightedValue).to.equal('two');
-    });
-
-    it('should not move highlight when disabled wrap and match is before highlighted option', () => {
-      const state: ListboxState<string> = {
-        highlightedValue: 'three',
-        selectedValues: [],
-      };
-
-      const action: ListboxReducerAction<string> = {
-        type: ActionTypes.textNavigation,
-        searchString: 'one',
-        event: {} as React.KeyboardEvent,
-        props: {
-          options: ['one', 'two', 'three', 'four', 'five'],
-          disableListWrap: true,
-          disabledItemsFocusable: false,
-          isOptionDisabled: () => false,
-          optionComparer: (o, v) => o === v,
-          optionStringifier: (option) => option,
-          selectionLimit: null,
-        },
-      };
-
-      const result = defaultReducer(state, action);
-      expect(result.highlightedValue).to.equal('three');
-    });
-  });
-});
diff --git a/packages/mui-base/src/useListbox/defaultListboxReducer.ts b/packages/mui-base/src/useListbox/defaultListboxReducer.ts
deleted file mode 100644
index 53574523f4feb3..00000000000000
--- a/packages/mui-base/src/useListbox/defaultListboxReducer.ts
+++ /dev/null
@@ -1,412 +0,0 @@
-import * as React from 'react';
-import {
-  ListboxState,
-  UseListboxParametersWithDefaults,
-  ActionTypes,
-  ListboxReducerAction,
-} from './useListbox.types';
-
-type OptionPredicate<TOption> = (option: TOption, index: number) => boolean;
-
-const pageSize = 5;
-
-function findValidOptionToHighlight<TOption>(
-  index: number,
-  lookupDirection: 'next' | 'previous',
-  options: TOption[],
-  focusDisabled: boolean,
-  isOptionDisabled: OptionPredicate<TOption>,
-  wrapAround: boolean,
-): number {
-  if (options.length === 0 || options.every((o, i) => isOptionDisabled(o, i))) {
-    return -1;
-  }
-
-  let nextFocus = index;
-
-  for (;;) {
-    // No valid options found
-    if (
-      (!wrapAround && lookupDirection === 'next' && nextFocus === options.length) ||
-      (!wrapAround && lookupDirection === 'previous' && nextFocus === -1)
-    ) {
-      return -1;
-    }
-
-    const nextFocusDisabled = focusDisabled
-      ? false
-      : isOptionDisabled(options[nextFocus], nextFocus);
-    if (nextFocusDisabled) {
-      nextFocus += lookupDirection === 'next' ? 1 : -1;
-      if (wrapAround) {
-        nextFocus = (nextFocus + options.length) % options.length;
-      }
-    } else {
-      return nextFocus;
-    }
-  }
-}
-
-function getNewHighlightedOption<TOption>(
-  options: TOption[],
-  previouslyHighlightedOption: TOption | null,
-  diff: number | 'reset' | 'start' | 'end',
-  highlightDisabledOptions: boolean,
-  isOptionDisabled: OptionPredicate<TOption>,
-  disableListWrap: boolean,
-  optionComparer: (optionA: TOption, optionB: TOption) => boolean,
-): TOption | null {
-  const maxIndex = options.length - 1;
-  const defaultHighlightedIndex = -1;
-  const previouslyHighlightedIndex =
-    previouslyHighlightedOption == null
-      ? -1
-      : options.findIndex((option) => optionComparer(option, previouslyHighlightedOption));
-
-  let nextIndexCandidate: number;
-  let lookupDirection: 'next' | 'previous';
-  let wrapAround: boolean;
-
-  switch (diff) {
-    case 'reset':
-      if (defaultHighlightedIndex === -1) {
-        return null;
-      }
-
-      nextIndexCandidate = 0;
-      lookupDirection = 'next';
-      wrapAround = false;
-      break;
-
-    case 'start':
-      nextIndexCandidate = 0;
-      lookupDirection = 'next';
-      wrapAround = false;
-      break;
-
-    case 'end':
-      nextIndexCandidate = maxIndex;
-      lookupDirection = 'previous';
-      wrapAround = false;
-      break;
-
-    default: {
-      const newIndex = previouslyHighlightedIndex + diff;
-      wrapAround = !disableListWrap;
-
-      if (newIndex < 0) {
-        if ((!wrapAround && previouslyHighlightedIndex !== -1) || Math.abs(diff) > 1) {
-          nextIndexCandidate = 0;
-          lookupDirection = 'next';
-        } else {
-          nextIndexCandidate = maxIndex;
-          lookupDirection = 'previous';
-        }
-      } else if (newIndex > maxIndex) {
-        if (!wrapAround || Math.abs(diff) > 1) {
-          nextIndexCandidate = maxIndex;
-          lookupDirection = 'previous';
-        } else {
-          nextIndexCandidate = 0;
-          lookupDirection = 'next';
-        }
-      } else {
-        nextIndexCandidate = newIndex;
-        lookupDirection = diff >= 0 ? 'next' : 'previous';
-      }
-    }
-  }
-
-  const nextIndex = findValidOptionToHighlight(
-    nextIndexCandidate,
-    lookupDirection,
-    options,
-    highlightDisabledOptions,
-    isOptionDisabled,
-    wrapAround,
-  );
-
-  return options[nextIndex] ?? null;
-}
-
-function moveHighlight<TOption>(
-  previouslyHighlightedOption: TOption | null,
-  diff: number | 'reset' | 'start' | 'end',
-  props: UseListboxParametersWithDefaults<TOption>,
-) {
-  const { options, isOptionDisabled, disableListWrap, disabledItemsFocusable, optionComparer } =
-    props;
-
-  return getNewHighlightedOption(
-    options,
-    previouslyHighlightedOption,
-    diff,
-    disabledItemsFocusable ?? false,
-    isOptionDisabled ?? (() => false),
-    disableListWrap ?? false,
-    optionComparer ?? ((o1, o2) => o1 === o2),
-  );
-}
-
-function toggleSelection<TOption>(
-  option: TOption,
-  selectedOptions: TOption[],
-  selectionLimit: number | null,
-  optionComparer: (optionA: TOption, optionB: TOption) => boolean,
-) {
-  if (selectionLimit === 0) {
-    return [];
-  }
-
-  // Selection limit = 1 is a special case - we don't want to allow deselecting the option.
-  if (selectionLimit === 1) {
-    if (optionComparer(selectedOptions[0], option)) {
-      return selectedOptions;
-    }
-
-    return [option];
-  }
-
-  // The toggled option is selected; remove it from the selection.
-  if (selectedOptions.some((so) => optionComparer(so, option))) {
-    return selectedOptions.filter((so) => !optionComparer(so, option));
-  }
-
-  // The toggled option is not selected and the selected array is shorter than the limit - add to the selection.
-  if (selectionLimit === null || selectedOptions.length < selectionLimit) {
-    return [...selectedOptions, option];
-  }
-
-  // Truncate the selection to the limit (discard items with lower indexes).
-  const newSelection = selectedOptions.slice(selectedOptions.length - selectionLimit + 1);
-  newSelection.push(option);
-
-  return newSelection;
-}
-
-function handleOptionSelection<TOption>(
-  option: TOption,
-  state: ListboxState<TOption>,
-  props: UseListboxParametersWithDefaults<TOption>,
-): ListboxState<TOption> {
-  const {
-    optionComparer = (o, v) => o === v,
-    isOptionDisabled = () => false,
-    selectionLimit,
-  } = props;
-  const { selectedValues } = state;
-
-  const optionIndex = props.options.findIndex((o) => props.optionComparer(option, o));
-
-  if (isOptionDisabled(option, optionIndex)) {
-    return state;
-  }
-
-  // if the option is already selected, remove it from the selection, otherwise add it
-  const newSelectedValues = toggleSelection(option, selectedValues, selectionLimit, optionComparer);
-
-  return {
-    selectedValues: newSelectedValues,
-    highlightedValue: option,
-  };
-}
-
-function handleKeyDown<TOption>(
-  event: React.KeyboardEvent,
-  state: Readonly<ListboxState<TOption>>,
-  parameters: UseListboxParametersWithDefaults<TOption>,
-): ListboxState<TOption> {
-  const previouslySelectedValue = state.highlightedValue;
-
-  switch (event.key) {
-    case 'Home':
-      return {
-        ...state,
-        highlightedValue: moveHighlight(previouslySelectedValue, 'start', parameters),
-      };
-
-    case 'End':
-      return {
-        ...state,
-        highlightedValue: moveHighlight(previouslySelectedValue, 'end', parameters),
-      };
-
-    case 'PageUp':
-      return {
-        ...state,
-        highlightedValue: moveHighlight(previouslySelectedValue, -pageSize, parameters),
-      };
-
-    case 'PageDown':
-      return {
-        ...state,
-        highlightedValue: moveHighlight(previouslySelectedValue, pageSize, parameters),
-      };
-
-    case 'ArrowUp':
-      // TODO: extend current selection with Shift modifier
-      return {
-        ...state,
-        highlightedValue: moveHighlight(previouslySelectedValue, -1, parameters),
-      };
-
-    case 'ArrowDown':
-      // TODO: extend current selection with Shift modifier
-      return {
-        ...state,
-        highlightedValue: moveHighlight(previouslySelectedValue, 1, parameters),
-      };
-
-    case 'Enter':
-    case ' ':
-      if (state.highlightedValue === null) {
-        return state;
-      }
-
-      return handleOptionSelection(state.highlightedValue, state, parameters);
-
-    default:
-      break;
-  }
-
-  return state;
-}
-
-function handleBlur<TOption>(state: ListboxState<TOption>): ListboxState<TOption> {
-  return {
-    ...state,
-    highlightedValue: null,
-  };
-}
-
-const textCriteriaMatches = <TOption>(
-  nextFocus: TOption,
-  searchString: string,
-  stringifyOption: (option: TOption) => string | undefined,
-) => {
-  const text = stringifyOption(nextFocus)?.trim().toLowerCase();
-
-  if (!text || text.length === 0) {
-    // Make option not navigable if stringification fails or results in empty string.
-    return false;
-  }
-
-  return text.indexOf(searchString) === 0;
-};
-
-function handleTextNavigation<TOption>(
-  state: ListboxState<TOption>,
-  searchString: string,
-  props: UseListboxParametersWithDefaults<TOption>,
-): ListboxState<TOption> {
-  const {
-    options,
-    isOptionDisabled,
-    disableListWrap,
-    disabledItemsFocusable,
-    optionComparer,
-    optionStringifier,
-  } = props;
-
-  const startWithCurrentOption = searchString.length > 1;
-
-  let nextOption = startWithCurrentOption
-    ? state.highlightedValue
-    : getNewHighlightedOption(
-        options,
-        state.highlightedValue,
-        1,
-        disabledItemsFocusable ?? false,
-        isOptionDisabled ?? (() => false),
-        disableListWrap ?? false,
-        optionComparer,
-      );
-
-  // use `for` instead of `while` prevent infinite loop
-  for (let index = 0; index < options.length; index += 1) {
-    // Return un-mutated state if looped back to the currently highlighted value
-    if (!nextOption || (!startWithCurrentOption && state.highlightedValue === nextOption)) {
-      return state;
-    }
-
-    if (
-      textCriteriaMatches(nextOption, searchString, optionStringifier) &&
-      (!isOptionDisabled(nextOption, options.indexOf(nextOption)) || disabledItemsFocusable)
-    ) {
-      // The nextOption is the element to be highlighted
-      return {
-        ...state,
-        highlightedValue: nextOption,
-      };
-    }
-    // Move to the next element.
-    nextOption = getNewHighlightedOption(
-      options,
-      nextOption,
-      1,
-      disabledItemsFocusable ?? false,
-      isOptionDisabled ?? (() => false),
-      disableListWrap ?? false,
-      optionComparer,
-    );
-  }
-
-  // No option match text search criteria
-  return state;
-}
-
-function handleOptionsChange<TOption>(
-  options: TOption[],
-  state: ListboxState<TOption>,
-  props: UseListboxParametersWithDefaults<TOption>,
-): ListboxState<TOption> {
-  const { optionComparer } = props;
-
-  const newHighlightedOption =
-    state.highlightedValue == null
-      ? null
-      : options.find((option) => optionComparer(option, state.highlightedValue!)) ?? null;
-
-  // exclude selected values that are no longer in the options
-  const selectedValues = state.selectedValues ?? [];
-  const newSelectedValues = selectedValues.filter((selectedValue) =>
-    options.some((option) => optionComparer(option, selectedValue)),
-  );
-
-  return {
-    highlightedValue: newHighlightedOption,
-    selectedValues: newSelectedValues,
-  };
-}
-
-export default function defaultListboxReducer<TOption>(
-  state: Readonly<ListboxState<TOption>>,
-  action: ListboxReducerAction<TOption>,
-): Readonly<ListboxState<TOption>> {
-  const { type } = action;
-
-  switch (type) {
-    case ActionTypes.keyDown:
-      return handleKeyDown(action.event, state, action.props);
-    case ActionTypes.optionClick:
-      return handleOptionSelection(action.option, state, action.props);
-    case ActionTypes.blur:
-      return handleBlur(state);
-    case ActionTypes.setValue:
-      return {
-        ...state,
-        selectedValues: action.value,
-      };
-    case ActionTypes.setHighlight:
-      return {
-        ...state,
-        highlightedValue: action.highlight,
-      };
-    case ActionTypes.textNavigation:
-      return handleTextNavigation(state, action.searchString, action.props);
-    case ActionTypes.optionsChange:
-      return handleOptionsChange(action.options, state, action.props);
-    default:
-      return state;
-  }
-}
diff --git a/packages/mui-base/src/useListbox/index.ts b/packages/mui-base/src/useListbox/index.ts
deleted file mode 100644
index 501d7efb93ea07..00000000000000
--- a/packages/mui-base/src/useListbox/index.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-export { default } from './useListbox';
-export { default as defaultListboxReducer } from './defaultListboxReducer';
-
-export * from './useListbox.types';
diff --git a/packages/mui-base/src/useListbox/useControllableReducer.test.tsx b/packages/mui-base/src/useListbox/useControllableReducer.test.tsx
deleted file mode 100644
index 8fd84a0b0aa74d..00000000000000
--- a/packages/mui-base/src/useListbox/useControllableReducer.test.tsx
+++ /dev/null
@@ -1,162 +0,0 @@
-import { expect } from 'chai';
-import * as React from 'react';
-import { spy } from 'sinon';
-import { createRenderer } from 'test/utils';
-import useControllableReducer from './useControllableReducer';
-import {
-  ActionTypes,
-  ListboxAction,
-  ListboxState,
-  UseListboxParametersWithDefaults,
-} from './useListbox.types';
-
-describe('useControllableReducer', () => {
-  const { render } = createRenderer();
-
-  describe('dispatch', () => {
-    it('calls the provided internal reducer', () => {
-      // eslint-disable-next-line @typescript-eslint/no-unused-vars
-      const reducer = spy((state: ListboxState<string>, action: ListboxAction<string>) => {
-        return state;
-      });
-
-      const actionToDispatch = { type: ActionTypes.setValue as const, value: ['b'], event: null };
-      const props: UseListboxParametersWithDefaults<string> = {
-        options: ['a', 'b', 'c'],
-        defaultValue: ['a'],
-        isOptionDisabled: () => false,
-        disableListWrap: false,
-        disabledItemsFocusable: false,
-        optionComparer: (a, b) => a === b,
-        optionStringifier: (option) => option,
-        selectionLimit: null,
-      };
-
-      function TestComponent() {
-        const [, dispatch] = useControllableReducer(reducer, undefined, { current: props });
-        React.useEffect(() => dispatch(actionToDispatch), [dispatch]);
-        return null;
-      }
-
-      render(<TestComponent />);
-      expect(reducer.getCalls()[0].args[1]).to.deep.equal({ ...actionToDispatch, props });
-    });
-
-    it('calls the provided external reducer', () => {
-      // eslint-disable-next-line @typescript-eslint/no-unused-vars
-      const internalReducer = spy((state: ListboxState<string>, action: ListboxAction<string>) => {
-        return state;
-      });
-
-      // eslint-disable-next-line @typescript-eslint/no-unused-vars
-      const externalReducer = spy((state: ListboxState<string>, action: ListboxAction<string>) => {
-        return state;
-      });
-
-      const actionToDispatch = { type: ActionTypes.setValue as const, value: ['b'], event: null };
-      const props: UseListboxParametersWithDefaults<string> = {
-        options: ['a', 'b', 'c'],
-        defaultValue: ['a'],
-        isOptionDisabled: () => false,
-        disableListWrap: false,
-        disabledItemsFocusable: false,
-        optionComparer: (a, b) => a === b,
-        optionStringifier: (option) => option,
-        selectionLimit: null,
-      };
-
-      function TestComponent() {
-        const [, dispatch] = useControllableReducer(internalReducer, externalReducer, {
-          current: props,
-        });
-        React.useEffect(() => dispatch(actionToDispatch), [dispatch]);
-        return null;
-      }
-
-      render(<TestComponent />);
-      expect(internalReducer.notCalled).to.equal(true);
-      expect(externalReducer.getCalls()[0].args[1]).to.deep.equal({ ...actionToDispatch, props });
-    });
-
-    it('calls onChange when the reducer returns a modified selected value', () => {
-      const reducer = spy((state: ListboxState<string>) => {
-        return {
-          ...state,
-          selectedValues: ['b'],
-        };
-      });
-
-      const actionToDispatch = {
-        type: ActionTypes.keyDown as const,
-        event: null as unknown as React.KeyboardEvent, // not relevant here
-      };
-      const handleChange = spy();
-      const handleHighlightChange = spy();
-
-      function TestComponent() {
-        const props: UseListboxParametersWithDefaults<string> = {
-          options: ['a', 'b', 'c'],
-          defaultValue: ['a'],
-          isOptionDisabled: () => false,
-          disableListWrap: false,
-          disabledItemsFocusable: false,
-          optionComparer: (a, b) => a === b,
-          optionStringifier: (option) => option,
-          onChange: handleChange,
-          onHighlightChange: handleHighlightChange,
-          selectionLimit: null,
-        };
-
-        const propsRef = React.useRef(props);
-        const [, dispatch] = useControllableReducer(reducer, undefined, propsRef);
-        React.useEffect(() => dispatch(actionToDispatch), [dispatch]);
-        return null;
-      }
-
-      render(<TestComponent />);
-      expect(handleChange.called).to.equal(true);
-      expect(handleChange.getCalls()[0].args[1]).to.deep.equal(['b']);
-      expect(handleHighlightChange.notCalled).to.equal(true);
-    });
-
-    it('calls onHighlightChange when the reducer returns a modified highlighted value', () => {
-      const reducer = spy((state: ListboxState<string>) => {
-        return {
-          ...state,
-          highlightedValue: 'b',
-        };
-      });
-
-      const actionToDispatch = {
-        type: ActionTypes.keyDown as const,
-        event: null as unknown as React.KeyboardEvent, // not relevant here
-      };
-      const handleChange = spy();
-      const handleHighlightChange = spy();
-
-      function TestComponent() {
-        const props: UseListboxParametersWithDefaults<string> = {
-          options: ['a', 'b', 'c'],
-          defaultValue: ['a'],
-          isOptionDisabled: () => false,
-          disableListWrap: false,
-          disabledItemsFocusable: false,
-          optionComparer: (a, b) => a === b,
-          optionStringifier: (option) => option,
-          onChange: handleChange,
-          onHighlightChange: handleHighlightChange,
-          selectionLimit: null,
-        };
-
-        const propsRef = React.useRef(props);
-        const [, dispatch] = useControllableReducer(reducer, undefined, propsRef);
-        React.useEffect(() => dispatch(actionToDispatch), [dispatch]);
-        return null;
-      }
-
-      render(<TestComponent />);
-      expect(handleHighlightChange.getCalls()[0].args[1]).to.equal('b');
-      expect(handleChange.notCalled).to.equal(true);
-    });
-  });
-});
diff --git a/packages/mui-base/src/useListbox/useControllableReducer.ts b/packages/mui-base/src/useListbox/useControllableReducer.ts
deleted file mode 100644
index 81e5240fb2e299..00000000000000
--- a/packages/mui-base/src/useListbox/useControllableReducer.ts
+++ /dev/null
@@ -1,156 +0,0 @@
-import * as React from 'react';
-import {
-  ActionTypes,
-  ListboxAction,
-  ListboxReducer,
-  ListboxReducerAction,
-  ListboxState,
-  UseListboxParametersWithDefaults,
-} from './useListbox.types';
-import areArraysEqual from '../utils/areArraysEqual';
-
-/**
- * Gets the current state. If the selectedValue is controlled,
- * the `value` prop is the source of truth instead of the internal state.
- */
-function getControlledState<TOption>(
-  internalState: ListboxState<TOption>,
-  props: UseListboxParametersWithDefaults<TOption>,
-) {
-  if (props.value !== undefined) {
-    return { ...internalState, selectedValue: props.value };
-  }
-
-  return internalState;
-}
-
-function areOptionsEqual<TOption>(
-  option1: TOption | null,
-  option2: TOption | null,
-  optionComparer: (optionA: TOption, optionB: TOption) => boolean,
-) {
-  if (option1 === option2) {
-    return true;
-  }
-
-  if (option1 === null || option2 === null) {
-    return false;
-  }
-
-  return optionComparer(option1, option2);
-}
-
-/**
- * Triggers change event handlers (onChange and onHighlightChange) when reducer returns changed state.
- *
- * @param nextState The next state returned by the reducer.
- * @param internalPreviousState The previous state. If the component is controlled, this is merged with the props to determine the final state.
- * @param propsRef The props with defaults applied.
- * @param lastActionRef The last action that was dispatched.
- */
-function useStateChangeDetection<TOption>(
-  nextState: ListboxState<TOption>,
-  internalPreviousState: ListboxState<TOption>,
-  propsRef: React.RefObject<UseListboxParametersWithDefaults<TOption>>,
-  lastActionRef: React.MutableRefObject<ListboxAction<TOption> | null>,
-) {
-  React.useEffect(() => {
-    if (!propsRef.current || lastActionRef.current === null) {
-      // Detect changes only if an action has been dispatched.
-      return;
-    }
-
-    if (
-      lastActionRef.current.type === ActionTypes.setValue ||
-      lastActionRef.current.type === ActionTypes.setHighlight
-    ) {
-      // Don't fire change events when the value has been changed externally (e.g. by changing the controlled prop).
-      return;
-    }
-
-    const previousState = getControlledState(internalPreviousState, propsRef.current);
-    const { optionComparer, onChange } = propsRef.current;
-
-    const previousSelectedValues = previousState?.selectedValues ?? [];
-    const nextSelectedValues = nextState.selectedValues as TOption[];
-
-    if (!areArraysEqual(nextSelectedValues, previousSelectedValues, optionComparer)) {
-      onChange?.(lastActionRef.current.event, nextSelectedValues);
-    }
-
-    // Fires the highlightChange event when reducer returns changed `highlightedValue`.
-    if (
-      !areOptionsEqual(
-        internalPreviousState.highlightedValue,
-        nextState.highlightedValue,
-        propsRef.current.optionComparer,
-      )
-    ) {
-      propsRef.current?.onHighlightChange?.(
-        lastActionRef.current.event,
-        nextState.highlightedValue,
-      );
-    }
-
-    lastActionRef.current = null;
-  }, [
-    nextState.selectedValues,
-    nextState.highlightedValue,
-    internalPreviousState,
-    propsRef,
-    lastActionRef,
-  ]);
-}
-
-/**
- * @ignore - do not document.
- */
-export default function useControllableReducer<TOption>(
-  internalReducer: ListboxReducer<TOption>,
-  externalReducer: ListboxReducer<TOption> | undefined,
-  props: React.RefObject<UseListboxParametersWithDefaults<TOption>>,
-): [ListboxState<TOption>, (action: ListboxAction<TOption>) => void] {
-  const { value, defaultValue } = props.current!;
-
-  const actionRef = React.useRef<ListboxAction<TOption> | null>(null);
-
-  const initialSelectedValues = (value === undefined ? defaultValue : value) ?? [];
-
-  const initialState = {
-    highlightedValue: null,
-    selectedValues: initialSelectedValues,
-  };
-
-  const combinedReducer = React.useCallback(
-    (state: ListboxState<TOption>, action: ListboxReducerAction<TOption>) => {
-      actionRef.current = action;
-
-      if (externalReducer) {
-        return externalReducer(getControlledState(state, action.props), action);
-      }
-
-      return internalReducer(getControlledState(state, action.props), action);
-    },
-    [externalReducer, internalReducer],
-  );
-
-  const [nextState, dispatch] = React.useReducer(combinedReducer, initialState);
-
-  const dispatchWithProps = React.useCallback(
-    (action: ListboxAction<TOption>) => {
-      dispatch({
-        props: props.current,
-        ...action,
-      } as ListboxReducerAction<TOption>);
-    },
-    [dispatch, props],
-  );
-
-  const previousState = React.useRef<ListboxState<TOption>>(initialState);
-  React.useEffect(() => {
-    previousState.current = nextState;
-  }, [previousState, nextState]);
-
-  useStateChangeDetection<TOption>(nextState, previousState.current, props, actionRef);
-  return [getControlledState(nextState, props.current!), dispatchWithProps];
-}
diff --git a/packages/mui-base/src/useListbox/useListbox.ts b/packages/mui-base/src/useListbox/useListbox.ts
deleted file mode 100644
index d9883acf3d2586..00000000000000
--- a/packages/mui-base/src/useListbox/useListbox.ts
+++ /dev/null
@@ -1,329 +0,0 @@
-import * as React from 'react';
-import { unstable_useForkRef as useForkRef, unstable_useId as useId } from '@mui/utils';
-import {
-  UseListboxParameters,
-  UseListboxParametersWithDefaults,
-  ActionTypes,
-  OptionState,
-  UseListboxOptionSlotProps,
-  UseListboxRootSlotProps,
-} from './useListbox.types';
-import defaultReducer from './defaultListboxReducer';
-import useControllableReducer from './useControllableReducer';
-import areArraysEqual from '../utils/areArraysEqual';
-import { EventHandlers } from '../utils/types';
-import useLatest from '../utils/useLatest';
-import useTextNavigation from '../utils/useTextNavigation';
-
-const defaultOptionComparer = <TOption>(optionA: TOption, optionB: TOption) => optionA === optionB;
-const defaultIsOptionDisabled = () => false;
-const defaultOptionStringifier = <TOption>(option: TOption) =>
-  typeof option === 'string' ? option : String(option);
-
-/**
- * @ignore - internal hook.
- *
- * The useListbox is a lower-level utility that is used to build a listbox component.
- * It's used to manage the state of the listbox and its options.
- * Contains the logic for keyboard navigation, selection, and focus management.
- */
-export default function useListbox<TOption>(props: UseListboxParameters<TOption>) {
-  const {
-    disabledItemsFocusable = false,
-    disableListWrap = false,
-    focusManagement = 'activeDescendant',
-    id: idProp,
-    isOptionDisabled = defaultIsOptionDisabled,
-    listboxRef: externalListboxRef,
-    optionComparer = defaultOptionComparer,
-    optionStringifier = defaultOptionStringifier,
-    options,
-    stateReducer: externalReducer,
-    value: valueParam,
-    selectionLimit = null,
-  } = props;
-
-  const id = useId(idProp);
-
-  const defaultIdGenerator = React.useCallback(
-    (_: TOption, index: number) => `${id}-option-${index}`,
-    [id],
-  );
-
-  const optionIdGenerator = props.optionIdGenerator ?? defaultIdGenerator;
-
-  const propsWithDefaults: React.RefObject<UseListboxParametersWithDefaults<TOption>> = useLatest(
-    {
-      ...props,
-      disabledItemsFocusable,
-      disableListWrap,
-      focusManagement,
-      isOptionDisabled,
-      optionComparer,
-      optionStringifier,
-      selectionLimit,
-    },
-    [props],
-  );
-
-  const listboxRef = React.useRef<HTMLUListElement>(null);
-  const handleRef = useForkRef(externalListboxRef, listboxRef);
-
-  const [{ highlightedValue, selectedValues: selectedValue }, dispatch] = useControllableReducer(
-    defaultReducer,
-    externalReducer,
-    propsWithDefaults,
-  );
-
-  const handleTextNavigation = useTextNavigation((searchString, event) =>
-    dispatch({
-      type: ActionTypes.textNavigation,
-      event,
-      searchString,
-    }),
-  );
-
-  React.useEffect(() => {
-    // if a controlled value changes, we need to update the state to keep things in sync
-    if (valueParam !== undefined && valueParam !== selectedValue) {
-      dispatch({
-        type: ActionTypes.setValue,
-        event: null,
-        value: valueParam,
-      });
-    }
-  }, [valueParam, selectedValue, dispatch]);
-
-  const highlightedIndex = React.useMemo(() => {
-    return highlightedValue == null
-      ? -1
-      : options.findIndex((option) => optionComparer(option, highlightedValue));
-  }, [highlightedValue, options, optionComparer]);
-
-  // introducing refs to avoid recreating the getOptionState function on each change.
-  const latestSelectedValue = useLatest(selectedValue);
-  const latestHighlightedIndex = useLatest(highlightedIndex);
-  const previousOptions = React.useRef<TOption[]>([]);
-
-  React.useEffect(() => {
-    if (areArraysEqual(previousOptions.current, options, optionComparer)) {
-      return;
-    }
-
-    dispatch({
-      type: ActionTypes.optionsChange,
-      event: null,
-      options,
-      previousOptions: previousOptions.current,
-    });
-
-    previousOptions.current = options;
-  }, [options, optionComparer, dispatch]);
-
-  const setSelectedValue = React.useCallback(
-    (values: TOption[]) => {
-      dispatch({
-        type: ActionTypes.setValue,
-        event: null,
-        value: values,
-      });
-    },
-    [dispatch],
-  );
-
-  const setHighlightedValue = React.useCallback(
-    (option: TOption | null) => {
-      dispatch({
-        type: ActionTypes.setHighlight,
-        event: null,
-        highlight: option,
-      });
-    },
-    [dispatch],
-  );
-
-  const createHandleOptionClick = React.useCallback(
-    (option: TOption, other: Record<string, React.EventHandler<any>>) =>
-      (event: React.MouseEvent) => {
-        other.onClick?.(event);
-        if (event.defaultPrevented) {
-          return;
-        }
-
-        event.preventDefault();
-
-        dispatch({
-          type: ActionTypes.optionClick,
-          option,
-          event,
-        });
-      },
-    [dispatch],
-  );
-
-  const createHandleOptionPointerOver = React.useCallback(
-    (option: TOption, other: Record<string, React.EventHandler<any>>) =>
-      (event: React.PointerEvent) => {
-        other.onMouseOver?.(event);
-        if (event.defaultPrevented) {
-          return;
-        }
-
-        dispatch({
-          type: ActionTypes.optionHover,
-          option,
-          event,
-        });
-      },
-    [dispatch],
-  );
-
-  const createHandleKeyDown =
-    (other: Record<string, React.EventHandler<any>>) =>
-    (event: React.KeyboardEvent<HTMLElement>) => {
-      other.onKeyDown?.(event);
-
-      if (event.defaultPrevented) {
-        return;
-      }
-
-      const keysToPreventDefault = ['ArrowUp', 'ArrowDown', 'Home', 'End', 'PageUp', 'PageDown'];
-
-      if (focusManagement === 'activeDescendant') {
-        // When the child element is focused using the activeDescendant attribute,
-        // the listbox handles keyboard events on its behalf.
-        // We have to `preventDefault()` is this case to prevent the browser from
-        // scrolling the view when space is pressed or submitting forms when enter is pressed.
-        keysToPreventDefault.push(' ', 'Enter');
-      }
-
-      if (keysToPreventDefault.includes(event.key)) {
-        event.preventDefault();
-      }
-
-      dispatch({
-        type: ActionTypes.keyDown,
-        event,
-      });
-
-      handleTextNavigation(event);
-    };
-
-  const createHandleBlur =
-    (other: Record<string, React.EventHandler<any>>) => (event: React.FocusEvent<HTMLElement>) => {
-      other.onBlur?.(event);
-
-      if (event.defaultPrevented) {
-        return;
-      }
-
-      if (listboxRef.current?.contains(document.activeElement)) {
-        // focus is within the listbox
-        return;
-      }
-
-      dispatch({
-        type: ActionTypes.blur,
-        event,
-      });
-    };
-
-  const getRootProps = <TOther extends EventHandlers = {}>(
-    otherHandlers: TOther = {} as TOther,
-  ): UseListboxRootSlotProps<TOther> => {
-    return {
-      ...otherHandlers,
-      'aria-activedescendant':
-        focusManagement === 'activeDescendant' && highlightedValue != null
-          ? optionIdGenerator(highlightedValue, highlightedIndex)
-          : undefined,
-      id,
-      onBlur: createHandleBlur(otherHandlers),
-      onKeyDown: createHandleKeyDown(otherHandlers),
-      role: 'listbox',
-      tabIndex: focusManagement === 'DOM' ? -1 : 0,
-      ref: handleRef,
-    };
-  };
-
-  const getOptionState = React.useCallback(
-    (option: TOption): OptionState => {
-      const index = options.findIndex((opt) => optionComparer(opt, option));
-      const selected = (latestSelectedValue.current ?? []).some(
-        (value) => value != null && optionComparer(option, value),
-      );
-
-      const disabled = isOptionDisabled(option, index);
-      const highlighted = latestHighlightedIndex.current === index && index !== -1;
-
-      return {
-        disabled,
-        highlighted,
-        index,
-        selected,
-      };
-    },
-    [options, isOptionDisabled, optionComparer, latestSelectedValue, latestHighlightedIndex],
-  );
-
-  const getOptionTabIndex = React.useCallback(
-    (optionState: OptionState) => {
-      if (focusManagement === 'activeDescendant') {
-        return undefined;
-      }
-
-      if (!optionState.highlighted) {
-        return -1;
-      }
-
-      if (optionState.disabled && !disabledItemsFocusable) {
-        return -1;
-      }
-
-      return 0;
-    },
-    [focusManagement, disabledItemsFocusable],
-  );
-
-  const getOptionProps = React.useCallback(
-    <TOther extends EventHandlers = {}>(
-      option: TOption,
-      otherHandlers: TOther = {} as TOther,
-    ): UseListboxOptionSlotProps<TOther> => {
-      const optionState = getOptionState(option);
-
-      return {
-        ...otherHandlers,
-        'aria-disabled': optionState.disabled || undefined,
-        'aria-selected': optionState.selected,
-        id: optionIdGenerator(option, optionState.index),
-        onClick: createHandleOptionClick(option, otherHandlers),
-        onPointerOver: createHandleOptionPointerOver(option, otherHandlers),
-        role: 'option',
-        tabIndex: getOptionTabIndex(optionState),
-      };
-    },
-    [
-      optionIdGenerator,
-      createHandleOptionClick,
-      createHandleOptionPointerOver,
-      getOptionTabIndex,
-      getOptionState,
-    ],
-  );
-
-  React.useDebugValue({
-    highlightedOption: highlightedValue,
-    selectedOption: selectedValue,
-  });
-
-  return {
-    getRootProps,
-    getOptionProps,
-    getOptionState,
-    highlightedOption: highlightedValue,
-    selectedOption: selectedValue,
-    setSelectedValue,
-    setHighlightedValue,
-  };
-}
diff --git a/packages/mui-base/src/useListbox/useListbox.types.ts b/packages/mui-base/src/useListbox/useListbox.types.ts
deleted file mode 100644
index 4474019828f0c5..00000000000000
--- a/packages/mui-base/src/useListbox/useListbox.types.ts
+++ /dev/null
@@ -1,221 +0,0 @@
-import * as React from 'react';
-
-type UseListboxStrictParametersRequiredKeys =
-  | 'isOptionDisabled'
-  | 'disableListWrap'
-  | 'disabledItemsFocusable'
-  | 'optionComparer'
-  | 'optionStringifier'
-  | 'selectionLimit';
-
-export type UseListboxParametersWithDefaults<TOption> = Omit<
-  UseListboxParameters<TOption>,
-  UseListboxStrictParametersRequiredKeys
-> &
-  Required<Pick<UseListboxParameters<TOption>, UseListboxStrictParametersRequiredKeys>>;
-
-export type FocusManagementType = 'DOM' | 'activeDescendant';
-
-enum ActionTypes {
-  blur = 'blur',
-  focus = 'focus',
-  keyDown = 'keyDown',
-  optionClick = 'optionClick',
-  optionHover = 'optionHover',
-  optionsChange = 'optionsChange',
-  setValue = 'setValue',
-  setHighlight = 'setHighlight',
-  textNavigation = 'textNavigation',
-}
-
-// split declaration and export due to https://github.com/codesandbox/codesandbox-client/issues/6435
-export { ActionTypes };
-
-interface OptionClickAction<TOption> {
-  type: ActionTypes.optionClick;
-  option: TOption;
-  event: React.MouseEvent;
-}
-
-interface OptionHoverAction<TOption> {
-  type: ActionTypes.optionHover;
-  option: TOption;
-  event: React.MouseEvent;
-}
-
-interface FocusAction {
-  type: ActionTypes.focus;
-  event: React.FocusEvent;
-}
-
-interface BlurAction {
-  type: ActionTypes.blur;
-  event: React.FocusEvent;
-}
-
-interface KeyDownAction {
-  type: ActionTypes.keyDown;
-  event: React.KeyboardEvent;
-}
-
-interface SetValueAction<TOption> {
-  type: ActionTypes.setValue;
-  event: null;
-  value: TOption[];
-}
-
-interface SetHighlightAction<TOption> {
-  type: ActionTypes.setHighlight;
-  event: null;
-  highlight: TOption | null;
-}
-
-interface TextNavigationAction {
-  type: ActionTypes.textNavigation;
-  event: React.KeyboardEvent;
-  searchString: string;
-}
-
-interface OptionsChangeAction<TOption> {
-  type: ActionTypes.optionsChange;
-  event: null;
-  options: TOption[];
-  previousOptions: TOption[];
-}
-
-export type ListboxAction<TOption> =
-  | OptionClickAction<TOption>
-  | OptionHoverAction<TOption>
-  | FocusAction
-  | BlurAction
-  | KeyDownAction
-  | SetHighlightAction<TOption>
-  | TextNavigationAction
-  | SetValueAction<TOption>
-  | OptionsChangeAction<TOption>;
-
-export type ListboxReducerAction<T> = ListboxAction<T> & {
-  props: UseListboxParametersWithDefaults<T>;
-};
-
-export interface ListboxState<TOption> {
-  highlightedValue: TOption | null;
-  selectedValues: TOption[];
-}
-
-export type ListboxReducer<TOption> = (
-  state: ListboxState<TOption>,
-  action: ListboxReducerAction<TOption>,
-) => ListboxState<TOption>;
-
-export interface UseListboxParameters<TOption> {
-  /**
-   * The default selected value. Use when the listbox is not controlled.
-   */
-  defaultValue?: TOption[];
-  /**
-   * If `true`, it will be possible to highlight disabled options.
-   * @default false
-   */
-  disabledItemsFocusable?: boolean;
-  /**
-   * If `true`, the highlight will not wrap around the list if arrow keys are used.
-   * @default false
-   */
-  disableListWrap?: boolean;
-  focusManagement?: FocusManagementType;
-  /**
-   * Id attribute of the listbox.
-   */
-  id?: string;
-  /**
-   * A function that determines if a particular option is disabled.
-   * @default () => false
-   */
-  isOptionDisabled?: (option: TOption, index: number) => boolean;
-  /**
-   * Ref of the listbox DOM element.
-   */
-  listboxRef?: React.Ref<any>;
-  /**
-   * Callback fired when the value changes.
-   */
-  onChange?: (
-    e: React.MouseEvent | React.KeyboardEvent | React.FocusEvent | null,
-    value: TOption[],
-  ) => void;
-  /**
-   * Callback fired when the highlighted option changes.
-   */
-  onHighlightChange?: (
-    e: React.MouseEvent | React.KeyboardEvent | React.FocusEvent | null,
-    option: TOption | null,
-  ) => void;
-  /**
-   * A function that tests equality between two options.
-   * @default (a, b) => a === b
-   */
-  optionComparer?: (optionA: TOption, optionB: TOption) => boolean;
-  /**
-   * A function that generates the id attribute of individual options.
-   */
-  optionIdGenerator?: (option: TOption, index: number) => string;
-  /**
-   * A function that converts an object to its string representation
-   * @default (o) => o
-   */
-  optionStringifier?: (option: TOption) => string | undefined;
-  /**
-   * Array of options to be rendered in the list.
-   */
-  options: TOption[];
-  /**
-   * Maximum number of options that can be selected at once.
-   * Set to `null` to disable the limit.
-   */
-  selectionLimit?: number | null;
-  /**
-   * Custom state reducer function. It calculates the new state (highlighted and selected options)
-   * based on the previous one and the performed action.
-   */
-  stateReducer?: ListboxReducer<TOption>;
-  /**
-   * The selected value. Use when the listbox is controlled.
-   */
-  value?: TOption[];
-}
-
-export interface OptionState {
-  disabled: boolean;
-  highlighted: boolean;
-  index: number;
-  selected: boolean;
-}
-
-interface UseListboxRootSlotOwnProps {
-  'aria-activedescendant'?: React.AriaAttributes['aria-activedescendant'];
-  id?: string;
-  onBlur: React.FocusEventHandler;
-  onKeyDown: React.KeyboardEventHandler;
-  role: React.AriaRole;
-  tabIndex: number;
-  ref: React.Ref<any>;
-}
-
-export type UseListboxRootSlotProps<TOther = {}> = TOther & UseListboxRootSlotOwnProps;
-
-interface UseListboxOptionSlotOwnProps {
-  'aria-disabled': React.AriaAttributes['aria-disabled'];
-  'aria-selected': React.AriaAttributes['aria-selected'];
-  id?: string;
-  onClick: React.MouseEventHandler;
-  onPointerOver: React.PointerEventHandler;
-  role: React.AriaRole;
-  tabIndex?: number;
-}
-
-export type UseListboxOptionSlotProps<TOther = {}> = Omit<
-  TOther,
-  keyof UseListboxOptionSlotOwnProps
-> &
-  UseListboxOptionSlotOwnProps;
diff --git a/packages/mui-base/src/useMenu/MenuProvider.tsx b/packages/mui-base/src/useMenu/MenuProvider.tsx
new file mode 100644
index 00000000000000..a6d23c6ebe14a7
--- /dev/null
+++ b/packages/mui-base/src/useMenu/MenuProvider.tsx
@@ -0,0 +1,64 @@
+import * as React from 'react';
+import { ListContext, ListContextValue } from '../useList/ListContext';
+import { MenuItemMetadata } from '../useMenuItem';
+import { CompoundComponentContext, CompoundComponentContextValue } from '../utils/useCompound';
+
+export type MenuProviderValue = CompoundComponentContextValue<string, MenuItemMetadata> &
+  ListContextValue<string>;
+
+export interface MenuProviderProps {
+  value: MenuProviderValue;
+  children: React.ReactNode;
+}
+
+/**
+ * Sets up the contexts for the underlying MenuItem components.
+ *
+ * @ignore - do not document.
+ */
+export default function MenuProvider(props: MenuProviderProps) {
+  const { value, children } = props;
+
+  const {
+    dispatch,
+    getItemIndex,
+    getItemState,
+    registerHighlightChangeHandler,
+    registerSelectionChangeHandler,
+    registerItem,
+    totalSubitemCount,
+  } = value;
+
+  const listContextValue: ListContextValue<string> = React.useMemo(
+    () => ({
+      dispatch,
+      getItemState,
+      getItemIndex,
+      registerHighlightChangeHandler,
+      registerSelectionChangeHandler,
+    }),
+    [
+      dispatch,
+      getItemIndex,
+      getItemState,
+      registerHighlightChangeHandler,
+      registerSelectionChangeHandler,
+    ],
+  );
+
+  const compoundComponentContextValue: CompoundComponentContextValue<string, MenuItemMetadata> =
+    React.useMemo(
+      () => ({
+        getItemIndex,
+        registerItem,
+        totalSubitemCount,
+      }),
+      [registerItem, getItemIndex, totalSubitemCount],
+    );
+
+  return (
+    <CompoundComponentContext.Provider value={compoundComponentContextValue}>
+      <ListContext.Provider value={listContextValue}>{children}</ListContext.Provider>
+    </CompoundComponentContext.Provider>
+  );
+}
diff --git a/packages/mui-base/src/useMenu/index.ts b/packages/mui-base/src/useMenu/index.ts
index e3343bd18553ca..5d464e91afe4e7 100644
--- a/packages/mui-base/src/useMenu/index.ts
+++ b/packages/mui-base/src/useMenu/index.ts
@@ -1,2 +1,5 @@
 export { default } from './useMenu';
 export * from './useMenu.types';
+
+export { default as MenuProvider } from './MenuProvider';
+export * from './MenuProvider';
diff --git a/packages/mui-base/src/useMenu/menuReducer.ts b/packages/mui-base/src/useMenu/menuReducer.ts
new file mode 100644
index 00000000000000..9a0ac7b2406064
--- /dev/null
+++ b/packages/mui-base/src/useMenu/menuReducer.ts
@@ -0,0 +1,47 @@
+import { ListAction, ListActionContext, ListActionTypes, listReducer } from '../useList';
+import { ActionWithContext } from '../utils/useControllableReducer.types';
+import { MenuInternalState } from './useMenu.types';
+
+export type MenuActionContext = ListActionContext<string> & {
+  listboxRef: React.RefObject<HTMLElement>;
+};
+
+export default function menuReducer(
+  state: MenuInternalState,
+  action: ActionWithContext<ListAction<string>, MenuActionContext>,
+) {
+  if (action.type === ListActionTypes.itemHover) {
+    return state;
+  }
+
+  const newState = listReducer(state, action);
+
+  // make sure an item is always highlighted
+  if (newState.highlightedValue === null && action.context.items.length > 0) {
+    return {
+      ...newState,
+      highlightedValue: action.context.items[0],
+    };
+  }
+
+  if (action.type === ListActionTypes.keyDown) {
+    if (action.event.key === 'Escape') {
+      return {
+        ...newState,
+        open: false,
+      };
+    }
+  }
+
+  if (action.type === ListActionTypes.blur) {
+    if (!action.context.listboxRef.current?.contains(action.event.relatedTarget)) {
+      return {
+        ...newState,
+        open: false,
+        highlightedValue: action.context.items[0],
+      };
+    }
+  }
+
+  return newState;
+}
diff --git a/packages/mui-base/src/useMenu/useMenu.ts b/packages/mui-base/src/useMenu/useMenu.ts
index 3161c0a568a3f8..4fd00a2f15dd92 100644
--- a/packages/mui-base/src/useMenu/useMenu.ts
+++ b/packages/mui-base/src/useMenu/useMenu.ts
@@ -1,44 +1,18 @@
 import * as React from 'react';
 import { unstable_useForkRef as useForkRef } from '@mui/utils';
-import useListbox, {
-  defaultListboxReducer,
-  ListboxState,
-  ActionTypes,
-  ListboxReducerAction,
-} from '../useListbox';
-import { UseMenuListboxSlotProps, UseMenuParameters, UseMenuReturnValue } from './useMenu.types';
+import useList from '../useList';
+import {
+  MenuInternalState,
+  UseMenuListboxSlotProps,
+  UseMenuParameters,
+  UseMenuReturnValue,
+} from './useMenu.types';
 import { EventHandlers } from '../utils';
-import useMenuChangeNotifiers from '../MenuUnstyled/useMenuChangeNotifiers';
-import type { MenuUnstyledContextType } from '../MenuUnstyled';
-import { MenuItemMetadata, MenuItemState } from '../MenuItemUnstyled/MenuItemUnstyled.types';
+import { useCompoundParent } from '../utils/useCompound';
+import { MenuItemMetadata } from '../useMenuItem';
+import { StateChangeCallback } from '../utils/useControllableReducer.types';
+import menuReducer from './menuReducer';
 
-function stateReducer(
-  state: ListboxState<string>,
-  action: ListboxReducerAction<string>,
-): ListboxState<string> {
-  if (
-    action.type === ActionTypes.blur ||
-    action.type === ActionTypes.optionHover ||
-    action.type === ActionTypes.setValue
-  ) {
-    return state;
-  }
-
-  const newState = defaultListboxReducer(state, action);
-
-  if (
-    action.type !== ActionTypes.setHighlight &&
-    newState.highlightedValue === null &&
-    action.props.options.length > 0
-  ) {
-    return {
-      ...newState,
-      highlightedValue: action.props.options[0],
-    };
-  }
-
-  return newState;
-}
 /**
  *
  * Demos:
@@ -50,105 +24,87 @@ function stateReducer(
  * - [useMenu API](https://mui.com/base/react-menu/hooks-api/#use-menu)
  */
 export default function useMenu(parameters: UseMenuParameters = {}): UseMenuReturnValue {
-  const { listboxRef: listboxRefProp, open = false, onClose, listboxId } = parameters;
-
-  const [menuItems, setMenuItems] = React.useState<Record<string, MenuItemMetadata>>({});
+  const { defaultOpen, listboxRef: listboxRefProp, open: openProp, onOpenChange } = parameters;
 
   const listboxRef = React.useRef<HTMLElement | null>(null);
   const handleRef = useForkRef(listboxRef, listboxRefProp);
 
-  const registerItem = React.useCallback((id: string, metadata: MenuItemMetadata) => {
-    setMenuItems((previousState) => {
-      const newState = { ...previousState };
-      newState[id] = metadata;
-      return newState;
-    });
-  }, []);
+  const { subitems, contextValue: compoundComponentContextValue } = useCompoundParent<
+    string,
+    MenuItemMetadata
+  >();
+
+  const subitemKeys = React.useMemo(() => Array.from(subitems.keys()), [subitems]);
+
+  const getItemDomElement = React.useCallback(
+    (itemId: string) => {
+      if (itemId == null) {
+        return null;
+      }
 
-  const unregisterItem = React.useCallback((id: string) => {
-    setMenuItems((previousState) => {
-      const newState = { ...previousState };
-      delete newState[id];
-      return newState;
-    });
-  }, []);
+      return subitems.get(itemId)?.ref.current ?? null;
+    },
+    [subitems],
+  );
 
-  const { notifyHighlightChanged, registerHighlightChangeHandler } = useMenuChangeNotifiers();
+  const controlledProps = React.useMemo(() => ({ open: openProp }), [openProp]);
+
+  const stateChangeHandler: StateChangeCallback<MenuInternalState> = React.useCallback(
+    (event, field, fieldValue, reason, state) => {
+      if (field === 'open') {
+        onOpenChange?.(fieldValue as boolean);
+
+        if (fieldValue === true && state.highlightedValue !== null) {
+          subitems.get(state.highlightedValue)?.ref.current?.focus();
+        }
+      }
+    },
+    [onOpenChange, subitems],
+  );
 
   const {
-    getOptionState,
-    getOptionProps,
+    dispatch,
     getRootProps,
-    highlightedOption,
-    setHighlightedValue: setListboxHighlight,
-  } = useListbox({
-    options: Object.keys(menuItems),
-    optionStringifier: (id: string) => menuItems[id].label || menuItems[id].ref.current?.innerText,
-    isOptionDisabled: (id) => menuItems?.[id]?.disabled || false,
-    listboxRef: handleRef,
-    focusManagement: 'DOM',
-    id: listboxId,
-    stateReducer,
-    selectionLimit: 0,
+    contextValue: listContextValue,
+    state: { open, highlightedValue },
+  } = useList({
+    controlledProps,
     disabledItemsFocusable: true,
+    focusManagement: 'DOM',
+    getItemDomElement,
+    getInitialState: () => ({
+      selectedValues: [],
+      highlightedValue: null,
+      open: defaultOpen ?? false,
+    }),
+    isItemDisabled: (id) => subitems?.get(id)?.disabled || false,
+    items: subitemKeys,
+    itemStringifier: (id: string) =>
+      subitems.get(id)?.label || subitems.get(id)?.ref.current?.innerText,
+    listRef: handleRef,
+    onStateChange: stateChangeHandler,
+    reducerActionContext: { listboxRef },
+    selectionMode: 'none',
+    stateReducer: menuReducer,
   });
 
   React.useEffect(() => {
-    notifyHighlightChanged(highlightedOption);
-  }, [highlightedOption, notifyHighlightChanged]);
-
-  const highlightFirstItem = React.useCallback(() => {
-    if (Object.keys(menuItems).length > 0) {
-      setListboxHighlight(menuItems[Object.keys(menuItems)[0]].id);
-    }
-  }, [menuItems, setListboxHighlight]);
-
-  const highlightLastItem = React.useCallback(() => {
-    if (Object.keys(menuItems).length > 0) {
-      setListboxHighlight(menuItems[Object.keys(menuItems)[Object.keys(menuItems).length - 1]].id);
+    if (open && highlightedValue === subitemKeys[0]) {
+      subitems.get(subitemKeys[0])?.ref?.current?.focus();
     }
-  }, [menuItems, setListboxHighlight]);
-
-  React.useEffect(() => {
-    if (!open) {
-      highlightFirstItem();
-    }
-  }, [open, highlightFirstItem]);
-
-  const createHandleKeyDown = (otherHandlers: EventHandlers) => (e: React.KeyboardEvent) => {
-    otherHandlers.onKeyDown?.(e);
-    if (e.defaultPrevented) {
-      return;
-    }
-
-    if (e.key === 'Escape' && open) {
-      onClose?.();
-    }
-  };
-
-  const createHandleBlur = (otherHandlers: EventHandlers) => (e: React.FocusEvent) => {
-    otherHandlers.onBlur?.(e);
-
-    if (!listboxRef.current?.contains(e.relatedTarget)) {
-      onClose?.();
-    }
-  };
+  }, [open, highlightedValue, subitems, subitemKeys]);
 
   React.useEffect(() => {
     // set focus to the highlighted item (but prevent stealing focus from other elements on the page)
-    if (listboxRef.current?.contains(document.activeElement) && highlightedOption !== null) {
-      menuItems?.[highlightedOption]?.ref.current?.focus();
+    if (listboxRef.current?.contains(document.activeElement) && highlightedValue !== null) {
+      subitems?.get(highlightedValue)?.ref.current?.focus();
     }
-  }, [highlightedOption, menuItems]);
+  }, [highlightedValue, subitems]);
 
   const getListboxProps = <TOther extends EventHandlers>(
     otherHandlers: TOther = {} as TOther,
   ): UseMenuListboxSlotProps => {
-    const rootProps = getRootProps({
-      ...otherHandlers,
-      onBlur: createHandleBlur(otherHandlers),
-      onKeyDown: createHandleKeyDown(otherHandlers),
-    });
+    const rootProps = getRootProps(otherHandlers);
     return {
       ...otherHandlers,
       ...rootProps,
@@ -156,41 +112,17 @@ export default function useMenu(parameters: UseMenuParameters = {}): UseMenuRetu
     };
   };
 
-  const getItemState = React.useCallback(
-    (id: string): MenuItemState => {
-      const { disabled, highlighted } = getOptionState(id);
-      return { disabled, highlighted };
-    },
-    [getOptionState],
-  );
-
-  React.useDebugValue({ menuItems, highlightedOption });
-
-  const contextValue: MenuUnstyledContextType = React.useMemo(
-    () => ({
-      getItemProps: getOptionProps,
-      getItemState,
-      registerHighlightChangeHandler,
-      registerItem,
-      unregisterItem,
-      open,
-    }),
-    [
-      getOptionProps,
-      getItemState,
-      registerHighlightChangeHandler,
-      registerItem,
-      unregisterItem,
-      open,
-    ],
-  );
+  React.useDebugValue({ subitems, highlightedValue });
 
   return {
-    contextValue,
+    contextValue: {
+      ...compoundComponentContextValue,
+      ...listContextValue,
+    },
+    dispatch,
     getListboxProps,
-    highlightedOption,
-    highlightFirstItem,
-    highlightLastItem,
-    menuItems,
+    highlightedValue,
+    menuItems: subitems,
+    open,
   };
 }
diff --git a/packages/mui-base/src/useMenu/useMenu.types.ts b/packages/mui-base/src/useMenu/useMenu.types.ts
index 3b5b0a007e1f0b..219631da5b6bdc 100644
--- a/packages/mui-base/src/useMenu/useMenu.types.ts
+++ b/packages/mui-base/src/useMenu/useMenu.types.ts
@@ -1,21 +1,44 @@
 import * as React from 'react';
-import { MenuItemMetadata } from '../MenuItemUnstyled/MenuItemUnstyled.types';
-import { MenuUnstyledContextType } from '../MenuUnstyled/MenuUnstyledContext';
-import { UseListboxRootSlotProps } from '../useListbox';
+import { ListAction, ListState, UseListRootSlotProps } from '../useList';
+import { MenuItemMetadata } from '../useMenuItem';
 import { EventHandlers } from '../utils/types';
+import { MenuProviderValue } from './MenuProvider';
 
 export interface UseMenuParameters {
+  /**
+   * If `true`, the menu will be initially open.
+   * @default false
+   */
+  defaultOpen?: boolean;
+  /**
+   * If `true`, the menu will be open.
+   * This is the controlled equivalent of the `defaultOpen` parameter.
+   */
   open?: boolean;
-  onClose?: () => void;
+  /**
+   * Callback fired when the menu is opened or closed.
+   */
+  onOpenChange?: (open: boolean) => void;
+  /**
+   * Id of the menu listbox.
+   */
   listboxId?: string;
+  /**
+   * Ref of the menu listbox.
+   */
   listboxRef?: React.Ref<any>;
 }
 
 export interface UseMenuReturnValue {
   /**
-   * The value for the menu context.
+   * The value to be passed into the MenuProvider.
    */
-  contextValue: MenuUnstyledContextType;
+  contextValue: MenuProviderValue;
+  /**
+   * Action dispatcher for the menu component.
+   * Allows to programmatically control the menu.
+   */
+  dispatch: (action: ListAction<string>) => void;
   /**
    * Resolver for the listbox component's props.
    * @param otherHandlers event handlers for the listbox component
@@ -27,19 +50,15 @@ export interface UseMenuReturnValue {
   /**
    * The highlighted option in the menu listbox.
    */
-  highlightedOption: string | null;
+  highlightedValue: string | null;
   /**
-   * Callback for highlighting the first item in the menu listbox.
-   */
-  highlightFirstItem: () => void;
-  /**
-   * Callback for highlighting the last item in the menu listbox.
+   * Items in the menu listbox.
    */
-  highlightLastItem: () => void;
+  menuItems: Map<string, MenuItemMetadata>;
   /**
-   * Items in the menu listbox.
+   * If `true`, the menu is open.
    */
-  menuItems: Record<string, MenuItemMetadata>;
+  open: boolean;
 }
 
 interface UseMenuListboxSlotEventHandlers {
@@ -47,9 +66,16 @@ interface UseMenuListboxSlotEventHandlers {
   onKeyDown: React.KeyboardEventHandler;
 }
 
-export type UseMenuListboxSlotProps<TOther = {}> = UseListboxRootSlotProps<
+export type UseMenuListboxSlotProps<TOther = {}> = UseListRootSlotProps<
   Omit<TOther, keyof UseMenuListboxSlotEventHandlers> & UseMenuListboxSlotEventHandlers
 > & {
   ref: React.Ref<any>;
   role: React.AriaRole;
 };
+
+export interface MenuInternalState extends ListState<string> {
+  /**
+   * If `true`, the menu is open.
+   */
+  open: boolean;
+}
diff --git a/packages/mui-base/src/useMenuItem/useMenuItem.ts b/packages/mui-base/src/useMenuItem/useMenuItem.ts
index 0c587f70ebf85b..f9addc2837ebdb 100644
--- a/packages/mui-base/src/useMenuItem/useMenuItem.ts
+++ b/packages/mui-base/src/useMenuItem/useMenuItem.ts
@@ -1,14 +1,15 @@
 import * as React from 'react';
 import { unstable_useId as useId, unstable_useForkRef as useForkRef } from '@mui/utils';
 import { EventHandlers } from '../utils/types';
-import { MenuUnstyledContext } from '../MenuUnstyled';
 import useButton from '../useButton';
 import {
+  MenuItemMetadata,
   UseMenuItemParameters,
   UseMenuItemReturnValue,
   UseMenuItemRootSlotProps,
 } from './useMenuItem.types';
-import useForcedRerendering from '../utils/useForcedRerendering';
+import { useListItem } from '../useList';
+import { useCompoundItem } from '../utils/useCompoundItem';
 
 /**
  *
@@ -20,76 +21,42 @@ import useForcedRerendering from '../utils/useForcedRerendering';
  *
  * - [useMenuItem API](https://mui.com/base/react-menu/hooks-api/#use-menu-item)
  */
-export default function useMenuItem(props: UseMenuItemParameters): UseMenuItemReturnValue {
-  const { disabled = false, ref, label } = props;
-
-  const id = useId();
-  const menuContext = React.useContext(MenuUnstyledContext);
+export default function useMenuItem(params: UseMenuItemParameters): UseMenuItemReturnValue {
+  const { disabled = false, id: idParam, ref: externalRef, label } = params;
 
+  const id = useId(idParam);
   const itemRef = React.useRef<HTMLElement>(null);
-  const handleRef = useForkRef(itemRef, ref);
-
-  if (menuContext === null) {
-    throw new Error('MenuItemUnstyled must be used within a MenuUnstyled');
-  }
-
-  const { registerItem, unregisterItem, open, registerHighlightChangeHandler } = menuContext;
 
-  React.useEffect(() => {
-    if (id === undefined) {
-      return undefined;
-    }
+  const itemMetadata: MenuItemMetadata = React.useMemo(
+    () => ({ disabled, id: id ?? '', label, ref: itemRef }),
+    [disabled, id, label],
+  );
 
-    registerItem(id, { disabled, id, ref: itemRef, label });
+  const {
+    getRootProps: getListRootProps,
+    highlighted,
+    ref: listItemRefHandler,
+  } = useListItem({
+    item: id,
+  });
 
-    return () => unregisterItem(id);
-  }, [id, registerItem, unregisterItem, disabled, ref, label]);
+  const { index, totalItemCount } = useCompoundItem(id, itemMetadata);
 
-  const { getRootProps: getButtonProps, focusVisible } = useButton({
+  const {
+    getRootProps: getButtonProps,
+    focusVisible,
+    ref: buttonRefHandler,
+  } = useButton({
     disabled,
     focusableWhenDisabled: true,
-    ref: handleRef,
   });
 
-  // Ensure the menu item is focused when highlighted
-  const [focusRequested, requestFocus] = React.useState(false);
-
-  const focusIfRequested = React.useCallback(() => {
-    if (focusRequested && itemRef.current != null) {
-      itemRef.current.focus();
-      requestFocus(false);
-    }
-  }, [focusRequested]);
-
-  React.useEffect(() => {
-    focusIfRequested();
-  });
-
-  React.useDebugValue({ id, disabled, label });
-
-  const itemState = menuContext.getItemState(id ?? '');
-
-  const { highlighted } = itemState ?? { highlighted: false };
-
-  const rerender = useForcedRerendering();
-
-  React.useEffect(() => {
-    function updateHighlightedState(highlightedItemId: string | null) {
-      if (highlightedItemId === id && !highlighted) {
-        rerender();
-      } else if (highlightedItemId !== id && highlighted) {
-        rerender();
-      }
-    }
+  const handleRef = useForkRef(listItemRefHandler, buttonRefHandler, externalRef, itemRef);
 
-    return registerHighlightChangeHandler(updateHighlightedState);
-  });
-
-  React.useEffect(() => {
-    // TODO: this should be handled by the MenuButton
-    requestFocus(highlighted && open);
-  }, [highlighted, open]);
+  React.useDebugValue({ id, highlighted, disabled, label });
 
+  // If `id` is undefined (during SSR in React < 18), we fall back to rendering a simplified menu item
+  // which does not have access to infortmation about its position or highlighted state.
   if (id === undefined) {
     return {
       getRootProps: <TOther extends EventHandlers = {}>(
@@ -102,25 +69,41 @@ export default function useMenuItem(props: UseMenuItemParameters): UseMenuItemRe
       disabled: false,
       focusVisible,
       highlighted: false,
+      index: -1,
+      totalItemCount: 0,
+      ref: handleRef,
     };
   }
 
-  return {
-    getRootProps: <TOther extends EventHandlers = {}>(
-      otherHandlers: TOther = {} as TOther,
-    ): UseMenuItemRootSlotProps<TOther> => {
-      const optionProps = menuContext.getItemProps(id, otherHandlers);
+  const getRootProps = <TOther extends EventHandlers = {}>(
+    otherHandlers: TOther = {} as TOther,
+  ): UseMenuItemRootSlotProps<TOther> => {
+    const resolvedButtonProps = {
+      ...otherHandlers,
+      ...getButtonProps(otherHandlers),
+    };
 
-      return {
-        ...otherHandlers,
-        ...getButtonProps(otherHandlers),
-        tabIndex: optionProps.tabIndex,
-        id: optionProps.id,
-        role: 'menuitem',
-      };
-    },
-    disabled: itemState?.disabled ?? false,
+    const resolvedMenuItemProps = {
+      ...resolvedButtonProps,
+      ...getListRootProps(resolvedButtonProps),
+    };
+
+    return {
+      ...otherHandlers,
+      ...resolvedButtonProps,
+      ...resolvedMenuItemProps,
+      role: 'menuitem',
+      ref: handleRef,
+    };
+  };
+
+  return {
+    getRootProps,
+    disabled,
     focusVisible,
     highlighted,
+    index,
+    totalItemCount,
+    ref: handleRef,
   };
 }
diff --git a/packages/mui-base/src/useMenuItem/useMenuItem.types.ts b/packages/mui-base/src/useMenuItem/useMenuItem.types.ts
index ba2c1edabdecea..6a4bd202a2fd94 100644
--- a/packages/mui-base/src/useMenuItem/useMenuItem.types.ts
+++ b/packages/mui-base/src/useMenuItem/useMenuItem.types.ts
@@ -7,12 +7,20 @@ interface UseMenuItemRootSlotOwnProps {
   id?: string;
 }
 
+export interface MenuItemMetadata {
+  id: string;
+  disabled: boolean;
+  label?: string;
+  ref: React.RefObject<HTMLElement>;
+}
+
 export type UseMenuItemRootSlotProps<TOther = {}> = TOther &
   UseMenuItemRootSlotOwnProps &
   UseButtonRootSlotProps<TOther>;
 
 export interface UseMenuItemParameters {
   disabled?: boolean;
+  id?: string;
   onClick?: React.MouseEventHandler<any>;
   ref: React.Ref<any>;
   label?: string;
@@ -29,17 +37,26 @@ export interface UseMenuItemReturnValue {
   ) => UseMenuItemRootSlotProps<TOther>;
   /**
    * If `true`, the component is disabled.
-   * @default false
    */
   disabled: boolean;
   /**
    * If `true`, the component is being focused using keyboard.
-   * @default false
    */
   focusVisible: boolean;
   /**
    * If `true`, the component is being highlighted.
-   * @default false
    */
   highlighted: boolean;
+  /**
+   * 0-based index of the item in the menu.
+   */
+  index: number;
+  /**
+   * The ref to the component's root DOM element.
+   */
+  ref: ((instance: unknown) => void) | null;
+  /**
+   * Total number of items in the menu.
+   */
+  totalItemCount: number;
 }
diff --git a/packages/mui-base/src/useOption/useOption.ts b/packages/mui-base/src/useOption/useOption.ts
index 9245291e34b619..2db25a8671fbda 100644
--- a/packages/mui-base/src/useOption/useOption.ts
+++ b/packages/mui-base/src/useOption/useOption.ts
@@ -1,9 +1,9 @@
 import * as React from 'react';
-import { unstable_useForkRef as useForkRef } from '@mui/utils';
-import { SelectUnstyledContext } from '../SelectUnstyled/SelectUnstyledContext';
-import { UseOptionParameters, UseOptionReturnValue } from './useOption.types';
+import { unstable_useForkRef as useForkRef, unstable_useId as useId } from '@mui/utils';
+import { SelectOption, UseOptionParameters, UseOptionReturnValue } from './useOption.types';
 import { EventHandlers } from '../utils';
-import useForcedRerendering from '../utils/useForcedRerendering';
+import { useListItem } from '../useList';
+import { useCompoundItem } from '../utils/useCompoundItem';
 
 /**
  *
@@ -16,91 +16,48 @@ import useForcedRerendering from '../utils/useForcedRerendering';
  * - [useOption API](https://mui.com/base/react-select/hooks-api/#use-option)
  */
 export default function useOption<Value>(params: UseOptionParameters<Value>): UseOptionReturnValue {
-  const { value, optionRef: optionRefParam } = params;
-
-  const selectContext = React.useContext(SelectUnstyledContext);
-  if (!selectContext) {
-    throw new Error(
-      'Option must have access to the SelectUnstyledContext (i.e., be used inside a SelectUnstyled component).',
-    );
-  }
+  const { value, label, disabled, optionRef: optionRefParam, id: idParam } = params;
 
   const {
-    getOptionProps,
-    getOptionState,
-    listboxRef,
-    registerHighlightChangeHandler,
-    registerSelectionChangeHandler,
-  } = selectContext;
-
-  const optionState = getOptionState(value);
-
-  const { selected, highlighted } = optionState;
-
-  const rerender = useForcedRerendering();
-
-  React.useEffect(() => {
-    function updateSelectedState(selectedValues: Value | Value[] | null) {
-      if (!selected) {
-        if (Array.isArray(selectedValues)) {
-          if (selectedValues.includes(value)) {
-            rerender();
-          }
-        } else if (selectedValues === value) {
-          rerender();
-        }
-      } else if (Array.isArray(selectedValues)) {
-        if (!selectedValues.includes(value)) {
-          rerender();
-        }
-      } else if (selectedValues !== value) {
-        rerender();
-      }
-    }
-
-    return registerSelectionChangeHandler(updateSelectedState);
-  }, [registerSelectionChangeHandler, rerender, selected, value]);
+    getRootProps: getListItemProps,
+    ref: listItemRefHandler,
+    highlighted,
+    selected,
+  } = useListItem({
+    item: value,
+  });
 
-  React.useEffect(() => {
-    function updateHighlightedState(highlightedValue: Value | null) {
-      if (highlightedValue === value && !highlighted) {
-        rerender();
-      } else if (highlightedValue !== value && highlighted) {
-        rerender();
-      }
-    }
+  const id = useId(idParam);
 
-    return registerHighlightChangeHandler(updateHighlightedState);
-  }, [registerHighlightChangeHandler, rerender, value, highlighted]);
+  const optionRef = React.useRef<HTMLElement>(null);
 
-  const optionRef = React.useRef<HTMLLIElement>(null);
-  const handleRef = useForkRef(optionRefParam, optionRef);
+  const selectOption: SelectOption<Value> = React.useMemo(
+    () => ({
+      disabled,
+      label,
+      value,
+      ref: optionRef,
+      id,
+    }),
+    [disabled, label, value, id],
+  );
 
-  React.useEffect(() => {
-    // Scroll to the currently highlighted option
-    if (highlighted) {
-      if (!listboxRef.current || !optionRef.current) {
-        return;
-      }
-      const listboxClientRect = (listboxRef.current as HTMLElement).getBoundingClientRect();
-      const optionClientRect = optionRef.current.getBoundingClientRect();
+  const { index } = useCompoundItem<Value, SelectOption<Value>>(value, selectOption);
 
-      if (optionClientRect.top < listboxClientRect.top) {
-        listboxRef.current.scrollTop -= listboxClientRect.top - optionClientRect.top;
-      } else if (optionClientRect.bottom > listboxClientRect.bottom) {
-        listboxRef.current.scrollTop += optionClientRect.bottom - listboxClientRect.bottom;
-      }
-    }
-  }, [highlighted, listboxRef]);
+  const handleRef = useForkRef(optionRefParam, optionRef, listItemRefHandler)!;
 
   return {
     getRootProps: <Other extends EventHandlers = {}>(otherHandlers: Other = {} as Other) => ({
       ...otherHandlers,
-      ...getOptionProps(value, otherHandlers),
+      ...getListItemProps(otherHandlers),
+      id,
       ref: handleRef,
+      role: 'option',
+      'aria-selected': selected,
     }),
     highlighted,
-    index: optionState.index,
+    index,
     selected,
+    ref: handleRef,
   };
 }
diff --git a/packages/mui-base/src/useOption/useOption.types.ts b/packages/mui-base/src/useOption/useOption.types.ts
index e67a42a4ac77e8..4f2e7cc94200b6 100644
--- a/packages/mui-base/src/useOption/useOption.types.ts
+++ b/packages/mui-base/src/useOption/useOption.types.ts
@@ -1,10 +1,20 @@
-import { UseSelectOptionSlotProps } from '../useSelect';
+import { UseListItemRootSlotProps } from '../useList';
 import { EventHandlers } from '../utils';
 
+export interface SelectOption<Value> {
+  value: Value;
+  label: React.ReactNode;
+  disabled?: boolean;
+  ref: React.RefObject<HTMLElement>;
+  id?: string;
+}
+
 export interface UseOptionParameters<Value> {
   disabled: boolean;
+  label: string | React.ReactNode;
   value: Value;
   optionRef?: React.Ref<HTMLElement>;
+  id?: string;
 }
 
 export interface UseOptionReturnValue {
@@ -14,8 +24,10 @@ export interface UseOptionReturnValue {
   getRootProps: <Other extends EventHandlers>(
     otherHandlers?: Other,
   ) => UseOptionRootSlotProps<Other>;
+  ref: React.RefCallback<HTMLElement>;
 }
 
-export type UseOptionRootSlotProps<Other extends EventHandlers = {}> = UseSelectOptionSlotProps & {
-  ref?: React.RefCallback<HTMLElement> | null;
-} & Other;
+export type UseOptionRootSlotProps<Other extends EventHandlers = {}> =
+  UseListItemRootSlotProps<Other> & {
+    ref?: React.RefCallback<HTMLElement> | null;
+  } & Other;
diff --git a/packages/mui-base/src/useSelect/SelectProvider.tsx b/packages/mui-base/src/useSelect/SelectProvider.tsx
new file mode 100644
index 00000000000000..eb8d54157526e1
--- /dev/null
+++ b/packages/mui-base/src/useSelect/SelectProvider.tsx
@@ -0,0 +1,66 @@
+import * as React from 'react';
+import { ListContextValue, ListContext } from '../useList/ListContext';
+import { SelectOption } from '../useOption/useOption.types';
+import { CompoundComponentContext, CompoundComponentContextValue } from '../utils/useCompound';
+
+export type SelectProviderValue<Value> = CompoundComponentContextValue<Value, SelectOption<Value>> &
+  ListContextValue<Value>;
+
+export interface SelectProviderProps<Value> {
+  value: SelectProviderValue<Value>;
+  children: React.ReactNode;
+}
+
+/**
+ * Sets up the contexts for the underlying Option components.
+ *
+ * @ignore - do not document.
+ */
+export default function SelectProvider<Value>(props: SelectProviderProps<Value>) {
+  const { value, children } = props;
+
+  const {
+    dispatch,
+    getItemIndex,
+    getItemState,
+    registerHighlightChangeHandler,
+    registerSelectionChangeHandler,
+    registerItem,
+    totalSubitemCount,
+  } = value;
+
+  const listContextValue: ListContextValue<Value> = React.useMemo(
+    () => ({
+      dispatch,
+      getItemState,
+      getItemIndex,
+      registerHighlightChangeHandler,
+      registerSelectionChangeHandler,
+    }),
+    [
+      dispatch,
+      getItemIndex,
+      getItemState,
+      registerHighlightChangeHandler,
+      registerSelectionChangeHandler,
+    ],
+  );
+
+  const compoundComponentContextValue: CompoundComponentContextValue<
+    Value,
+    SelectOption<Value>
+  > = React.useMemo(
+    () => ({
+      getItemIndex,
+      registerItem,
+      totalSubitemCount,
+    }),
+    [registerItem, getItemIndex, totalSubitemCount],
+  );
+
+  return (
+    <CompoundComponentContext.Provider value={compoundComponentContextValue}>
+      <ListContext.Provider value={listContextValue}>{children}</ListContext.Provider>
+    </CompoundComponentContext.Provider>
+  );
+}
diff --git a/packages/mui-base/src/SelectUnstyled/defaultOptionStringifier.ts b/packages/mui-base/src/useSelect/defaultOptionStringifier.ts
similarity index 65%
rename from packages/mui-base/src/SelectUnstyled/defaultOptionStringifier.ts
rename to packages/mui-base/src/useSelect/defaultOptionStringifier.ts
index 7573f1eb717826..e30bf637096468 100644
--- a/packages/mui-base/src/SelectUnstyled/defaultOptionStringifier.ts
+++ b/packages/mui-base/src/useSelect/defaultOptionStringifier.ts
@@ -1,6 +1,6 @@
-import { SelectOption } from '../useSelect/useSelect.types';
+import { SelectOption } from '../useOption';
 
-const defaultOptionStringifier = <TValue>(option: SelectOption<TValue>) => {
+const defaultOptionStringifier = <OptionValue>(option: SelectOption<OptionValue>) => {
   const { label, value } = option;
   if (typeof label === 'string') {
     return label;
diff --git a/packages/mui-base/src/useSelect/index.ts b/packages/mui-base/src/useSelect/index.ts
index b812ca7155b44f..fdf70bd247967a 100644
--- a/packages/mui-base/src/useSelect/index.ts
+++ b/packages/mui-base/src/useSelect/index.ts
@@ -1,2 +1,5 @@
 export { default } from './useSelect';
 export * from './useSelect.types';
+
+export { default as SelectProvider } from './SelectProvider';
+export * from './SelectProvider';
diff --git a/packages/mui-base/src/useSelect/selectReducer.test.ts b/packages/mui-base/src/useSelect/selectReducer.test.ts
new file mode 100644
index 00000000000000..b83a575820291c
--- /dev/null
+++ b/packages/mui-base/src/useSelect/selectReducer.test.ts
@@ -0,0 +1,167 @@
+import { expect } from 'chai';
+import selectReducer from './selectReducer';
+import { SelectAction, SelectActionTypes, SelectInternalState } from './useSelect.types';
+import { ActionWithContext } from '../utils/useControllableReducer.types';
+import { ListActionContext } from '../useList';
+
+describe('selectReducer', () => {
+  const irrelevantConfig = {
+    items: [],
+    disableListWrap: false,
+    disabledItemsFocusable: false,
+    focusManagement: 'activeDescendant' as const,
+    isItemDisabled: () => false,
+    itemComparer: (a: any, b: any) => a === b,
+    itemStringifier: (option: any) => option,
+    orientation: 'vertical' as const,
+    pageSize: 5,
+    selectionMode: 'single' as const,
+  };
+
+  describe('action: buttonClick', () => {
+    it('opens the select if it was closed', () => {
+      const state: SelectInternalState<unknown> = {
+        highlightedValue: null,
+        selectedValues: [],
+        open: false,
+      };
+
+      const action: ActionWithContext<SelectAction, ListActionContext<unknown>> = {
+        type: SelectActionTypes.buttonClick,
+        event: {} as any, // not relevant
+        context: irrelevantConfig,
+      };
+
+      const result = selectReducer(state, action);
+      expect(result.open).to.equal(true);
+    });
+
+    it('closes the select if it was open', () => {
+      const state: SelectInternalState<unknown> = {
+        highlightedValue: null,
+        selectedValues: [],
+        open: true,
+      };
+
+      const action: ActionWithContext<SelectAction, ListActionContext<unknown>> = {
+        type: SelectActionTypes.buttonClick,
+        event: {} as any, // not relevant
+        context: {
+          ...irrelevantConfig,
+        },
+      };
+
+      const result = selectReducer(state, action);
+      expect(result.open).to.equal(false);
+    });
+
+    it('highlights the first selected value if the select was closed', () => {
+      const state: SelectInternalState<string> = {
+        highlightedValue: null,
+        selectedValues: ['2'],
+        open: false,
+      };
+
+      const action: ActionWithContext<SelectAction, ListActionContext<string>> = {
+        type: SelectActionTypes.buttonClick,
+        event: {} as any, // not relevant
+        context: {
+          ...irrelevantConfig,
+          items: ['1', '2', '3'],
+        },
+      };
+
+      const result = selectReducer(state, action);
+      expect(result.highlightedValue).to.equal('2');
+    });
+
+    it('highlights the first value if the select was closed and nothing was selected', () => {
+      const state: SelectInternalState<string> = {
+        highlightedValue: null,
+        selectedValues: [],
+        open: false,
+      };
+
+      const action: ActionWithContext<SelectAction, ListActionContext<string>> = {
+        type: SelectActionTypes.buttonClick,
+        event: {} as any, // not relevant
+        context: {
+          ...irrelevantConfig,
+          items: ['1', '2', '3'],
+        },
+      };
+
+      const result = selectReducer(state, action);
+      expect(result.highlightedValue).to.equal('1');
+    });
+  });
+
+  describe('action: buttonArrowKeyDown', () => {
+    [
+      { key: 'ArrowDown', expectedHighlight: '1' },
+      { key: 'ArrowUp', expectedHighlight: '3' },
+    ].forEach((testCase) => {
+      describe(`after ${testCase.key} was pressed`, () => {
+        it('opens the select if it was closed', () => {
+          const state: SelectInternalState<unknown> = {
+            highlightedValue: null,
+            selectedValues: [],
+            open: false,
+          };
+
+          const action: ActionWithContext<SelectAction, ListActionContext<unknown>> = {
+            type: SelectActionTypes.buttonArrowKeyDown,
+            key: testCase.key,
+            event: {} as any, // not relevant
+            context: irrelevantConfig,
+          };
+
+          const result = selectReducer(state, action);
+          expect(result.open).to.equal(true);
+        });
+
+        it('highlights the first selected value if the select was closed', () => {
+          const state: SelectInternalState<string> = {
+            highlightedValue: null,
+            selectedValues: ['2'],
+            open: false,
+          };
+
+          const action: ActionWithContext<SelectAction, ListActionContext<string>> = {
+            type: SelectActionTypes.buttonArrowKeyDown,
+            key: testCase.key,
+            event: {} as any, // not relevant
+            context: {
+              ...irrelevantConfig,
+              items: ['1', '2', '3'],
+            },
+          };
+
+          const result = selectReducer(state, action);
+          expect(result.highlightedValue).to.equal('2');
+        });
+
+        it(`highlights the ${testCase.expectedHighlight} value if the select was closed and nothing was selected`, () => {
+          const state: SelectInternalState<string> = {
+            highlightedValue: null,
+            selectedValues: [],
+            open: false,
+          };
+
+          const action: ActionWithContext<SelectAction, ListActionContext<string>> = {
+            type: SelectActionTypes.buttonArrowKeyDown,
+            key: testCase.key,
+            event: {} as any, // not relevant
+            context: {
+              ...irrelevantConfig,
+              items: ['1', '2', '3'],
+            },
+          };
+
+          const result = selectReducer(state, action);
+          expect(result.highlightedValue).to.equal(testCase.expectedHighlight);
+        });
+      });
+    });
+  });
+});
diff --git a/packages/mui-base/src/useSelect/selectReducer.ts b/packages/mui-base/src/useSelect/selectReducer.ts
new file mode 100644
index 00000000000000..839b9e499cc6e9
--- /dev/null
+++ b/packages/mui-base/src/useSelect/selectReducer.ts
@@ -0,0 +1,101 @@
+import {
+  ListAction,
+  ListActionContext,
+  moveHighlight,
+  listReducer,
+  ListActionTypes,
+} from '../useList';
+import { ActionWithContext } from '../utils/useControllableReducer.types';
+import { SelectAction, SelectActionTypes, SelectInternalState } from './useSelect.types';
+
+export default function selectReducer<OptionValue>(
+  state: SelectInternalState<OptionValue>,
+  action: ActionWithContext<ListAction<OptionValue> | SelectAction, ListActionContext<OptionValue>>,
+) {
+  const { open } = state;
+  const {
+    context: { selectionMode },
+  } = action;
+
+  switch (action.type) {
+    case SelectActionTypes.buttonClick: {
+      const itemToHighlight =
+        state.selectedValues[0] ?? moveHighlight<OptionValue>(null, 'start', action.context);
+
+      return {
+        ...state,
+        open: !open,
+        highlightedValue: !open ? itemToHighlight : null,
+      };
+    }
+
+    case SelectActionTypes.buttonArrowKeyDown:
+      if (action.key === 'ArrowDown') {
+        const itemToHighlight =
+          state.selectedValues[0] ?? moveHighlight<OptionValue>(null, 'start', action.context);
+
+        return {
+          ...state,
+          open: true,
+          highlightedValue: itemToHighlight,
+        };
+      }
+
+      if (action.key === 'ArrowUp') {
+        const itemToHighlight =
+          state.selectedValues[0] ?? moveHighlight<OptionValue>(null, 'end', action.context);
+
+        return {
+          ...state,
+          open: true,
+          highlightedValue: itemToHighlight,
+        };
+      }
+
+      break;
+
+    default:
+      break;
+  }
+
+  const newState: SelectInternalState<OptionValue> = listReducer(
+    state,
+    action as ActionWithContext<ListAction<OptionValue>, ListActionContext<OptionValue>>,
+  );
+
+  switch (action.type) {
+    case ListActionTypes.keyDown:
+      if (
+        selectionMode === 'single' &&
+        (action.event.key === 'Enter' || action.event.key === ' ' || action.event.key === 'Escape')
+      ) {
+        return {
+          ...newState,
+          open: false,
+        };
+      }
+
+      break;
+
+    case ListActionTypes.itemClick:
+      if (selectionMode === 'single') {
+        return {
+          ...newState,
+          open: false,
+        };
+      }
+
+      break;
+
+    case ListActionTypes.blur:
+      return {
+        ...newState,
+        open: false,
+      };
+
+    default:
+      return newState;
+  }
+
+  return newState;
+}
diff --git a/packages/mui-base/src/useSelect/useSelect.test.tsx b/packages/mui-base/src/useSelect/useSelect.test.tsx
new file mode 100644
index 00000000000000..8c0eee25c5e3c2
--- /dev/null
+++ b/packages/mui-base/src/useSelect/useSelect.test.tsx
@@ -0,0 +1,23 @@
+import { expect } from 'chai';
+import { renderHook } from '@testing-library/react';
+import useSelect from './useSelect';
+
+describe('useSelect', () => {
+  describe('param: options', () => {
+    it('lets define options explicitly', () => {
+      const options = [
+        { value: 'a', label: 'A' },
+        { value: 'b', label: 'B' },
+        { value: 'c', label: 'C', disabled: true },
+      ];
+
+      const { result } = renderHook(() => useSelect({ options }));
+
+      expect(result.current.options).to.deep.equal(['a', 'b', 'c']);
+      expect(result.current.getOptionMetadata('a')?.label).to.equal('A');
+      expect(result.current.getOptionMetadata('b')?.label).to.equal('B');
+      expect(result.current.getOptionMetadata('c')?.label).to.equal('C');
+      expect(result.current.getOptionMetadata('c')?.disabled).to.equal(true);
+    });
+  });
+});
diff --git a/packages/mui-base/src/useSelect/useSelect.ts b/packages/mui-base/src/useSelect/useSelect.ts
index 52afed2c737012..21c1cd69130861 100644
--- a/packages/mui-base/src/useSelect/useSelect.ts
+++ b/packages/mui-base/src/useSelect/useSelect.ts
@@ -1,24 +1,28 @@
 import * as React from 'react';
-import { unstable_useForkRef as useForkRef, unstable_useId as useId } from '@mui/utils';
+import {
+  unstable_useForkRef as useForkRef,
+  unstable_useId as useId,
+  unstable_useEnhancedEffect as useEnhancedEffect,
+} from '@mui/utils';
 import useButton from '../useButton';
 import {
-  SelectOption,
+  ButtonClickAction,
+  SelectAction,
+  SelectActionTypes,
+  SelectInternalState,
   SelectValue,
   UseSelectButtonSlotProps,
   UseSelectListboxSlotProps,
-  UseSelectOptionSlotProps,
   UseSelectParameters,
-  UseSelectResult,
+  UseSelectReturnValue,
 } from './useSelect.types';
-import useListbox, {
-  ListboxReducer,
-  defaultListboxReducer,
-  ActionTypes,
-  UseListboxParameters,
-} from '../useListbox';
+import useList, { UseListParameters } from '../useList';
 import { EventHandlers } from '../utils/types';
-import defaultOptionStringifier from '../SelectUnstyled/defaultOptionStringifier';
-import useSelectChangeNotifiers from './useSelectChangeNotifiers';
+import defaultOptionStringifier from './defaultOptionStringifier';
+import { SelectProviderValue } from './SelectProvider';
+import { useCompoundParent } from '../utils/useCompound';
+import { SelectOption } from '../useOption/useOption.types';
+import selectReducer from './selectReducer';
 
 /**
  *
@@ -30,11 +34,12 @@ import useSelectChangeNotifiers from './useSelectChangeNotifiers';
  *
  * - [useSelect API](https://mui.com/base/react-select/hooks-api/#use-select)
  */
-function useSelect<TValue, Multiple extends boolean = false>(
-  props: UseSelectParameters<TValue, Multiple>,
-): UseSelectResult<TValue, Multiple> {
+function useSelect<OptionValue, Multiple extends boolean = false>(
+  props: UseSelectParameters<OptionValue, Multiple>,
+): UseSelectReturnValue<OptionValue, Multiple> {
   const {
     buttonRef: buttonRefProp,
+    defaultOpen = false,
     defaultValue: defaultValueProp,
     disabled = false,
     listboxId: listboxIdProp,
@@ -43,8 +48,8 @@ function useSelect<TValue, Multiple extends boolean = false>(
     onChange,
     onHighlightChange,
     onOpenChange,
-    open = false,
-    options,
+    open: openProp,
+    options: optionsParam,
     optionStringifier = defaultOptionStringifier,
     value: valueProp,
   } = props;
@@ -55,28 +60,46 @@ function useSelect<TValue, Multiple extends boolean = false>(
   const listboxRef = React.useRef<HTMLElement | null>(null);
   const listboxId = useId(listboxIdProp);
 
-  let defaultValue: TValue[] | undefined;
+  let defaultValue: OptionValue[] | undefined;
   if (valueProp === undefined && defaultValueProp === undefined) {
     defaultValue = [];
   } else if (defaultValueProp !== undefined) {
-    defaultValue = multiple ? (defaultValueProp as TValue[]) : [defaultValueProp as TValue];
+    defaultValue = multiple
+      ? (defaultValueProp as OptionValue[])
+      : [defaultValueProp as OptionValue];
   }
 
   const value = React.useMemo(() => {
     if (valueProp !== undefined) {
-      return multiple ? (valueProp as TValue[]) : [valueProp as TValue];
+      return multiple ? (valueProp as OptionValue[]) : [valueProp as OptionValue];
     }
 
     return undefined;
   }, [valueProp, multiple]);
 
-  const optionsMap = React.useMemo(() => {
-    const map = new Map<TValue, SelectOption<TValue>>();
-    options.forEach((option) => {
-      map.set(option.value, option);
-    });
-    return map;
-  }, [options]);
+  const { subitems, contextValue: compoundComponentContextValue } = useCompoundParent<
+    OptionValue,
+    SelectOption<OptionValue>
+  >();
+
+  const options = React.useMemo(() => {
+    if (optionsParam != null) {
+      return new Map(
+        optionsParam.map((option, index) => [
+          option.value,
+          {
+            value: option.value,
+            label: option.label,
+            disabled: option.disabled,
+            ref: React.createRef<HTMLElement>(),
+            id: `${listboxId}_${index}`,
+          },
+        ]),
+      );
+    }
+
+    return subitems;
+  }, [optionsParam, subitems, listboxId]);
 
   // prevents closing the listbox on keyUp right after opening it
   const ignoreEnterKeyUp = React.useRef(false);
@@ -98,11 +121,124 @@ function useSelect<TValue, Multiple extends boolean = false>(
   const handleListboxRef = useForkRef(listboxRefProp, listboxRef, focusListboxIfRequested);
 
   const {
-    notifySelectionChanged,
-    notifyHighlightChanged,
-    registerHighlightChangeHandler,
-    registerSelectionChangeHandler,
-  } = useSelectChangeNotifiers<TValue>();
+    getRootProps: getButtonRootProps,
+    active: buttonActive,
+    focusVisible: buttonFocusVisible,
+  } = useButton({
+    disabled,
+    ref: handleButtonRef,
+  });
+
+  const optionValues = React.useMemo(() => Array.from(options.keys()), [options]);
+
+  const isItemDisabled = React.useCallback(
+    (valueToCheck: OptionValue) => {
+      const option = options.get(valueToCheck);
+      return option?.disabled ?? false;
+    },
+    [options],
+  );
+
+  const stringifyOption = React.useCallback(
+    (valueToCheck: OptionValue) => {
+      const option = options.get(valueToCheck);
+      if (!option) {
+        return '';
+      }
+
+      return optionStringifier(option);
+    },
+    [options, optionStringifier],
+  );
+
+  const controlledState = React.useMemo(
+    () => ({
+      selectedValues: value,
+      open: openProp,
+    }),
+    [value, openProp],
+  );
+
+  const getItemId = React.useCallback(
+    (itemValue: OptionValue) => options.get(itemValue)?.id,
+    [options],
+  );
+
+  const handleSelectionChange = React.useCallback(
+    (
+      event:
+        | React.MouseEvent<Element, MouseEvent>
+        | React.KeyboardEvent<Element>
+        | React.FocusEvent<Element, Element>
+        | null,
+      newValues: OptionValue[],
+    ) => {
+      if (multiple) {
+        onChange?.(event, newValues as SelectValue<OptionValue, Multiple>);
+      } else {
+        onChange?.(event, (newValues[0] ?? null) as SelectValue<OptionValue, Multiple>);
+      }
+    },
+    [multiple, onChange],
+  );
+
+  const handleHighlightChange = React.useCallback(
+    (
+      event:
+        | React.MouseEvent<Element, MouseEvent>
+        | React.KeyboardEvent<Element>
+        | React.FocusEvent<Element, Element>
+        | null,
+      newValue: OptionValue | null,
+    ) => {
+      onHighlightChange?.(event, newValue ?? null);
+    },
+    [onHighlightChange],
+  );
+
+  const handleStateChange = React.useCallback(
+    (e: React.SyntheticEvent | null, field: string, fieldValue: any) => {
+      if (field === 'open') {
+        onOpenChange?.(fieldValue as boolean);
+        if (fieldValue === false && e?.type !== 'blur') {
+          buttonRef.current?.focus();
+        }
+      }
+    },
+    [onOpenChange],
+  );
+
+  const useListParameters: UseListParameters<
+    OptionValue,
+    SelectInternalState<OptionValue>,
+    SelectAction,
+    { multiple: boolean }
+  > = {
+    getInitialState: () => ({
+      highlightedValue: null,
+      selectedValues: defaultValue ?? [],
+      open: defaultOpen,
+    }),
+    getItemId,
+    controlledProps: controlledState,
+    isItemDisabled,
+    listRef: handleListboxRef,
+    onChange: handleSelectionChange,
+    onHighlightChange: handleHighlightChange,
+    onStateChange: handleStateChange,
+    reducerActionContext: React.useMemo(() => ({ multiple }), [multiple]),
+    items: optionValues,
+    itemStringifier: stringifyOption,
+    selectionMode: multiple ? 'multiple' : 'single',
+    stateReducer: selectReducer,
+  };
+
+  const {
+    dispatch,
+    getRootProps: getListboxRootProps,
+    contextValue: listContextValue,
+    state: { open, highlightedValue: highlightedOption, selectedValues: selectedOptions },
+  } = useList(useListParameters);
 
   React.useEffect(() => {
     focusListboxIfRequested();
@@ -125,7 +261,12 @@ function useSelect<TValue, Multiple extends boolean = false>(
     (otherHandlers?: Record<string, React.EventHandler<any>>) => (event: React.MouseEvent) => {
       otherHandlers?.onClick?.(event);
       if (!event.defaultPrevented && !ignoreClick.current) {
-        onOpenChange?.(!open);
+        const action: ButtonClickAction = {
+          type: SelectActionTypes.buttonClick,
+          event,
+        };
+
+        dispatch(action);
       }
 
       ignoreClick.current = false;
@@ -144,7 +285,7 @@ function useSelect<TValue, Multiple extends boolean = false>(
 
       if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {
         event.preventDefault();
-        onOpenChange?.(true);
+        dispatch({ type: SelectActionTypes.buttonArrowKeyDown, key: event.key, event });
       }
     };
 
@@ -164,134 +305,24 @@ function useSelect<TValue, Multiple extends boolean = false>(
       ignoreEnterKeyUp.current = false;
     };
 
-  const createHandleListboxItemClick = React.useCallback(
-    (otherHandlers?: Record<string, React.EventHandler<any>>) => (event: React.MouseEvent) => {
-      otherHandlers?.onClick?.(event);
-      if (event.defaultPrevented) {
+  useEnhancedEffect(() => {
+    // Scroll to the currently highlighted option.
+    if (highlightedOption != null) {
+      const optionRef = options.get(highlightedOption)?.ref;
+      if (!listboxRef.current || !optionRef?.current) {
         return;
       }
 
-      if (!multiple) {
-        onOpenChange?.(false);
-      }
-    },
-    [multiple, onOpenChange],
-  );
+      const listboxClientRect = (listboxRef.current as HTMLElement).getBoundingClientRect();
+      const optionClientRect = optionRef.current.getBoundingClientRect();
 
-  const createHandleListboxBlur =
-    (otherHandlers?: Record<string, React.EventHandler<any>>) => (event: React.FocusEvent) => {
-      otherHandlers?.onBlur?.(event);
-      if (!event.defaultPrevented) {
-        onOpenChange?.(false);
+      if (optionClientRect.top < listboxClientRect.top) {
+        listboxRef.current.scrollTop -= listboxClientRect.top - optionClientRect.top;
+      } else if (optionClientRect.bottom > listboxClientRect.bottom) {
+        listboxRef.current.scrollTop += optionClientRect.bottom - listboxClientRect.bottom;
       }
-    };
-
-  const listboxReducer: ListboxReducer<TValue> = React.useCallback(
-    (state, action) => {
-      const newState = defaultListboxReducer<TValue>(state, action);
-
-      switch (action.type) {
-        case ActionTypes.keyDown:
-          // change selection when listbox is closed
-          if (
-            (action.event.key === 'ArrowUp' || action.event.key === 'ArrowDown') &&
-            !open &&
-            !multiple
-          ) {
-            return {
-              ...newState,
-              selectedValues: newState.highlightedValue != null ? [newState.highlightedValue] : [],
-            };
-          }
-
-          break;
-
-        case ActionTypes.blur:
-        case ActionTypes.setValue:
-        case ActionTypes.optionsChange:
-          return {
-            ...newState,
-            highlightedValue:
-              newState.selectedValues.length > 0 ? newState.selectedValues[0] : null,
-          };
-
-        default:
-          return newState;
-      }
-
-      return newState;
-    },
-    [open, multiple],
-  );
-
-  const {
-    getRootProps: getButtonRootProps,
-    active: buttonActive,
-    focusVisible: buttonFocusVisible,
-  } = useButton({
-    disabled,
-    ref: handleButtonRef,
-  });
-
-  const optionValues = React.useMemo(() => options.map((o) => o.value), [options]);
-
-  const isOptionDisabled = React.useCallback(
-    (valueToCheck: TValue) => {
-      const option = optionsMap.get(valueToCheck);
-      return option?.disabled ?? false;
-    },
-    [optionsMap],
-  );
-
-  const stringifyOption = React.useCallback(
-    (valueToCheck: TValue) => {
-      const option = optionsMap.get(valueToCheck);
-      if (!option) {
-        return '';
-      }
-
-      return optionStringifier(option);
-    },
-    [optionsMap, optionStringifier],
-  );
-
-  const useListboxParameters: UseListboxParameters<TValue> = {
-    defaultValue,
-    id: listboxId,
-    isOptionDisabled,
-    listboxRef: handleListboxRef,
-    onChange: (e, newValues) => {
-      if (multiple) {
-        onChange?.(e, newValues as SelectValue<TValue, Multiple>);
-      } else {
-        onChange?.(e, (newValues[0] ?? null) as SelectValue<TValue, Multiple>);
-      }
-    },
-    onHighlightChange: (e, newValue) => {
-      onHighlightChange?.(e, newValue ?? null);
-    },
-    options: optionValues,
-    optionStringifier: stringifyOption,
-    selectionLimit: multiple ? null : 1,
-    stateReducer: listboxReducer,
-    value,
-  };
-
-  const {
-    getRootProps: getListboxRootProps,
-    getOptionProps: getListboxOptionProps,
-    getOptionState,
-    highlightedOption,
-    selectedOption,
-  } = useListbox(useListboxParameters);
-
-  React.useEffect(() => {
-    notifySelectionChanged(selectedOption);
-  }, [selectedOption, notifySelectionChanged]);
-
-  React.useEffect(() => {
-    notifyHighlightChanged(highlightedOption);
-  }, [highlightedOption, notifyHighlightChanged]);
+    }
+  }, [highlightedOption, options]);
 
   const getButtonProps = <TOther extends EventHandlers>(
     otherHandlers: TOther = {} as TOther,
@@ -310,73 +341,61 @@ function useSelect<TValue, Multiple extends boolean = false>(
     };
   };
 
+  const getOptionMetadata = React.useCallback(
+    (optionValue: OptionValue) => options.get(optionValue),
+    [options],
+  );
+
   const getListboxProps = <TOther extends EventHandlers>(
     otherHandlers: TOther = {} as TOther,
-  ): UseSelectListboxSlotProps<TOther> =>
-    getListboxRootProps({
-      ...otherHandlers,
-      onBlur: createHandleListboxBlur(otherHandlers),
-      onKeyUp: createHandleListboxKeyUp(otherHandlers),
-    });
-
-  const getOptionProps = React.useCallback(
-    <TOther extends EventHandlers>(
-      optionValue: TValue,
-      otherHandlers: TOther = {} as TOther,
-    ): UseSelectOptionSlotProps<TOther> => {
-      return getListboxOptionProps(optionValue, {
+  ): UseSelectListboxSlotProps<TOther> => {
+    return {
+      ...getListboxRootProps({
         ...otherHandlers,
-        onClick: createHandleListboxItemClick(otherHandlers),
-      });
-    },
-    [getListboxOptionProps, createHandleListboxItemClick],
-  );
+        onKeyUp: createHandleListboxKeyUp(otherHandlers),
+      }),
+      id: listboxId,
+      role: 'listbox' as const,
+      'aria-multiselectable': multiple ? 'true' : undefined,
+    };
+  };
 
   React.useDebugValue({
-    selectedOption,
+    selectedOptions,
     highlightedOption,
     open,
   });
 
-  const contextValue = React.useMemo(
+  const contextValue: SelectProviderValue<OptionValue> = React.useMemo(
     () => ({
-      listboxRef,
-      getOptionProps,
-      getOptionState,
-      registerHighlightChangeHandler,
-      registerSelectionChangeHandler,
+      ...listContextValue,
+      ...compoundComponentContextValue,
     }),
-    [
-      getOptionProps,
-      getOptionState,
-      registerHighlightChangeHandler,
-      registerSelectionChangeHandler,
-    ],
+    [listContextValue, compoundComponentContextValue],
   );
 
+  let selectValue: SelectValue<OptionValue, Multiple>;
   if (props.multiple) {
-    return {
-      buttonActive,
-      buttonFocusVisible,
-      disabled,
-      getButtonProps,
-      getListboxProps,
-      contextValue,
-      open,
-      value: selectedOption as SelectValue<TValue, Multiple>,
-      highlightedOption,
-    };
+    selectValue = selectedOptions as SelectValue<OptionValue, Multiple>;
+  } else {
+    selectValue = (selectedOptions.length > 0 ? selectedOptions[0] : null) as SelectValue<
+      OptionValue,
+      Multiple
+    >;
   }
 
   return {
     buttonActive,
     buttonFocusVisible,
     disabled,
+    dispatch,
     getButtonProps,
     getListboxProps,
+    getOptionMetadata,
     contextValue,
     open,
-    value: (selectedOption.length > 0 ? selectedOption[0] : null) as SelectValue<TValue, Multiple>,
+    options: optionValues,
+    value: selectValue,
     highlightedOption,
   };
 }
diff --git a/packages/mui-base/src/useSelect/useSelect.types.ts b/packages/mui-base/src/useSelect/useSelect.types.ts
index 8e8c4d69a764c3..05db83601c1ce7 100644
--- a/packages/mui-base/src/useSelect/useSelect.types.ts
+++ b/packages/mui-base/src/useSelect/useSelect.types.ts
@@ -1,28 +1,9 @@
 import * as React from 'react';
 import { UseButtonRootSlotProps } from '../useButton';
-import { OptionState, UseListboxOptionSlotProps, UseListboxRootSlotProps } from '../useListbox';
+import { ListAction, ListState, UseListRootSlotProps } from '../useList';
+import { SelectOption } from '../useOption/useOption.types';
 import { EventHandlers } from '../utils/types';
-import { SelectChangeNotifiers } from './useSelectChangeNotifiers';
-
-export interface SelectOption<TValue> {
-  value: TValue;
-  label: React.ReactNode;
-  disabled?: boolean;
-}
-
-export interface SelectOptionGroup<TValue> {
-  options: SelectChild<TValue>[];
-  label: React.ReactNode;
-  disabled?: boolean;
-}
-
-export type SelectChild<TValue> = SelectOption<TValue> | SelectOptionGroup<TValue>;
-
-export function isOptionGroup<TValue>(
-  child: SelectChild<TValue>,
-): child is SelectOptionGroup<TValue> {
-  return !!(child as SelectOptionGroup<TValue>).options;
-}
+import { SelectProviderValue } from './SelectProvider';
 
 export type SelectChangeEventType =
   | React.MouseEvent<Element, MouseEvent>
@@ -32,30 +13,91 @@ export type SelectChangeEventType =
 
 export type SelectValue<Value, Multiple> = Multiple extends true ? Value[] : Value | null;
 
-export type UseSelectParameters<TValue, Multiple extends boolean = false> = {
-  defaultValue?: SelectValue<TValue, Multiple>;
+export interface SelectOptionDefinition<Value> {
+  value: Value;
+  disabled?: boolean;
+  label: string;
+}
+
+export type UseSelectParameters<OptionValue, Multiple extends boolean = false> = {
+  /**
+   * If `true`, the select will be initially open.
+   * @default false
+   */
+  defaultOpen?: boolean;
+  /**
+   * The default selected value. Use when the component is not controlled.
+   */
+  defaultValue?: SelectValue<OptionValue, Multiple>;
+  /**
+   * If `true`, the select is disabled.
+   * @default false
+   */
   disabled?: boolean;
+  /**
+   * The ref of the trigger button element.
+   */
   buttonRef?: React.Ref<Element>;
+  /**
+   * `id` attribute of the listbox element.
+   */
   listboxId?: string;
+  /**
+   * The ref of the listbox element.
+   */
   listboxRef?: React.Ref<Element>;
+  /**
+   * If `true`, selecting multiple values is allowed.
+   * This affects the type of the `value`, `defaultValue`, and `onChange` props.
+   *
+   * @default false
+   */
   multiple?: Multiple;
+  /**
+   * Callback fired when an option is selected.
+   */
   onChange?: (
     e: React.MouseEvent | React.KeyboardEvent | React.FocusEvent | null,
-    value: SelectValue<TValue, Multiple>,
+    value: SelectValue<OptionValue, Multiple>,
   ) => void;
+  /**
+   * Callback fired when an option is highlighted.
+   */
   onHighlightChange?: (
     e:
       | React.MouseEvent<Element, MouseEvent>
       | React.KeyboardEvent<Element>
       | React.FocusEvent<Element, Element>
       | null,
-    highlighted: TValue | null,
+    highlighted: OptionValue | null,
   ) => void;
+  /**
+   * Callback fired when the listbox is opened or closed.
+   */
   onOpenChange?: (open: boolean) => void;
+  /**
+   * Controls the open state of the select's listbox.
+   * This is the controlled equivaled of the `defaultOpen` prop.
+   */
   open?: boolean;
-  options: SelectOption<TValue>[];
-  optionStringifier?: (option: SelectOption<TValue>) => string;
-  value?: SelectValue<TValue, Multiple>;
+  /**
+   * An alternative way to specify the options.
+   * If this parameter is set, options defined as JSX children are ignored.
+   */
+  options?: SelectOptionDefinition<OptionValue>[];
+  /**
+   * A function used to convert the option label to a string.
+   * It's useful when labels are elements and need to be converted to plain text
+   * to enable navigation using character keys on a keyboard.
+   *
+   * @default defaultOptionStringifier
+   */
+  optionStringifier?: (option: SelectOption<OptionValue>) => string;
+  /**
+   * The selected value.
+   * Set to `null` to deselect all options.
+   */
+  value?: SelectValue<OptionValue, Multiple>;
 };
 
 interface UseSelectButtonSlotEventHandlers {
@@ -76,47 +118,91 @@ interface UseSelectListboxSlotEventHandlers {
   onKeyUp: React.KeyboardEventHandler;
 }
 
-export type UseSelectListboxSlotProps<TOther = {}> = UseListboxRootSlotProps<
+export type UseSelectListboxSlotProps<TOther = {}> = UseListRootSlotProps<
   Omit<TOther, keyof UseSelectListboxSlotEventHandlers> & UseSelectListboxSlotEventHandlers
 >;
 
-interface UseSelectOptionSlotEventHandlers {
-  onClick: React.MouseEventHandler;
-}
-
-export type UseSelectOptionSlotProps<TOther = {}> = UseListboxOptionSlotProps<
-  Omit<TOther, keyof UseSelectOptionSlotEventHandlers> & UseSelectOptionSlotEventHandlers
->;
-
-export interface UseSelectResult<TValue, Multiple> {
+export interface UseSelectReturnValue<Value, Multiple> {
+  /**
+   * If `true`, the trigger button is active (pressed).
+   */
   buttonActive: boolean;
+  /**
+   * If `true`, the trigger button has a visible focus.
+   */
   buttonFocusVisible: boolean;
+  /**
+   * If `true`, the select is disabled.
+   */
   disabled: boolean;
-  getButtonProps: <TOther extends EventHandlers = {}>(
-    otherHandlers?: TOther,
-  ) => UseSelectButtonSlotProps<TOther>;
-  getListboxProps: <TOther extends EventHandlers = {}>(
-    otherHandlers?: TOther,
-  ) => UseSelectListboxSlotProps<TOther>;
-  contextValue: {
-    getOptionProps: <TOther extends EventHandlers = {}>(
-      option: TValue,
-      otherHandlers?: TOther,
-    ) => UseSelectOptionSlotProps<TOther>;
-    getOptionState: (option: TValue) => OptionState;
-    listboxRef: React.RefObject<HTMLElement>;
-    /**
-     * Registers a handler for when the highlighted option changes.
-     * @param handler A function that will be called with the new highlighted option.
-     */
-    registerHighlightChangeHandler: SelectChangeNotifiers<TValue>['registerHighlightChangeHandler'];
-    /**
-     * Registers a handler for when the selection changes.
-     * @param handler A function that will be called with the new selected items.
-     */
-    registerSelectionChangeHandler: SelectChangeNotifiers<TValue>['registerSelectionChangeHandler'];
-  };
-  highlightedOption: TValue | null;
+  /**
+   * Action dispatcher for the select component.
+   * Allows to programmatically control the select.
+   */
+  dispatch: (action: ListAction<Value> | SelectAction) => void;
+  /**
+   * Resolver for the button slot's props.
+   * @param otherHandlers event handlers for the button slot
+   * @returns props that should be spread on the button slot
+   */
+  getButtonProps: <OtherHandlers extends EventHandlers = {}>(
+    otherHandlers?: OtherHandlers,
+  ) => UseSelectButtonSlotProps<OtherHandlers>;
+  /**
+   * Resolver for the listbox slot's props.
+   * @param otherHandlers event handlers for the listbox slot
+   * @returns props that should be spread on the listbox slot
+   */
+  getListboxProps: <OtherHandlers extends EventHandlers = {}>(
+    otherHandlers?: OtherHandlers,
+  ) => UseSelectListboxSlotProps<OtherHandlers>;
+  /**
+   * A function that returns the metadata of an option with a given value.
+   *
+   * @param optionValue the value of the option
+   * @returns
+   */
+  getOptionMetadata: (optionValue: Value) => SelectOption<Value> | undefined;
+  /**
+   * A value to be passed to the `SelectProvider` component.
+   */
+  contextValue: SelectProviderValue<Value>;
+  /**
+   * The value of the highlighted option.
+   */
+  highlightedOption: Value | null;
+  /**
+   * If `true`, the listbox is open.
+   */
+  open: boolean;
+  /**
+   * Values of all the registered options.
+   */
+  options: Value[];
+  /**
+   * The value of the selected option(s).
+   */
+  value: SelectValue<Value, Multiple>;
+}
+
+export const SelectActionTypes = {
+  buttonClick: 'buttonClick',
+  buttonArrowKeyDown: 'buttonArrowKeyDown',
+} as const;
+
+export interface ButtonClickAction {
+  type: typeof SelectActionTypes.buttonClick;
+  event: React.MouseEvent;
+}
+
+export interface ButtonArrowKeyDownAction {
+  type: typeof SelectActionTypes.buttonArrowKeyDown;
+  key: string;
+  event: React.KeyboardEvent;
+}
+
+export type SelectAction = ButtonClickAction | ButtonArrowKeyDownAction;
+
+export interface SelectInternalState<OptionValue> extends ListState<OptionValue> {
   open: boolean;
-  value: SelectValue<TValue, Multiple>;
 }
diff --git a/packages/mui-base/src/useSelect/useSelectChangeNotifiers.test.tsx b/packages/mui-base/src/useSelect/useSelectChangeNotifiers.test.tsx
deleted file mode 100644
index f9300855ed9d6b..00000000000000
--- a/packages/mui-base/src/useSelect/useSelectChangeNotifiers.test.tsx
+++ /dev/null
@@ -1,121 +0,0 @@
-import * as React from 'react';
-import { expect } from 'chai';
-import { spy } from 'sinon';
-import { act, render } from 'test/utils';
-import useSelectChangeNotifiers from './useSelectChangeNotifiers';
-
-describe('useSelectChangeNotifiers', () => {
-  it('should call the registered handler when the value changes', () => {
-    const handler = spy();
-
-    function TestComponent() {
-      const { registerSelectionChangeHandler, notifySelectionChanged } = useSelectChangeNotifiers();
-      registerSelectionChangeHandler(handler);
-      const [value, setValue] = React.useState(0);
-
-      const handleClick = () => {
-        setValue((v) => v + 1);
-        notifySelectionChanged(value + 1);
-      };
-
-      return <button onClick={handleClick}>Update selection</button>;
-    }
-
-    const { getByRole } = render(<TestComponent />);
-    const button = getByRole('button');
-
-    act(() => {
-      button.click();
-    });
-
-    expect(handler.callCount).to.equal(1);
-    expect(handler.args[0][0]).to.equal(1);
-  });
-
-  it('should call the registered handler when the highlight changes', () => {
-    const handler = spy();
-
-    function TestComponent() {
-      const { registerHighlightChangeHandler, notifyHighlightChanged } = useSelectChangeNotifiers();
-      registerHighlightChangeHandler(handler);
-      const [value, setValue] = React.useState(0);
-
-      const handleClick = () => {
-        setValue((v) => v + 1);
-        notifyHighlightChanged(value + 1);
-      };
-
-      return <button onClick={handleClick}>Update highlight</button>;
-    }
-
-    const { getByRole } = render(<TestComponent />);
-    const button = getByRole('button');
-
-    act(() => {
-      button.click();
-    });
-
-    expect(handler.callCount).to.equal(1);
-    expect(handler.args[0][0]).to.equal(1);
-  });
-
-  it('should not call the handlers after they are unregistered', () => {
-    const changeHandler = spy();
-    const highlightChangeHandler = spy();
-
-    function TestComponent() {
-      const {
-        notifySelectionChanged,
-        notifyHighlightChanged,
-        registerSelectionChangeHandler,
-        registerHighlightChangeHandler,
-      } = useSelectChangeNotifiers();
-
-      const unregisterSelectionChangeHandler = registerSelectionChangeHandler(changeHandler);
-      const unregisterHighlightChangeHandler =
-        registerHighlightChangeHandler(highlightChangeHandler);
-
-      const [value, setValue] = React.useState(0);
-
-      const updateValue = () => {
-        setValue((v) => v + 1);
-        notifySelectionChanged(value + 1);
-        notifyHighlightChanged(value + 1);
-      };
-
-      const clearHandlers = () => {
-        unregisterSelectionChangeHandler();
-        unregisterHighlightChangeHandler();
-      };
-
-      return (
-        <div>
-          <button onClick={updateValue}>Update selection</button>
-          <button onClick={clearHandlers}>Clear handlers</button>
-        </div>
-      );
-    }
-
-    const { getByText } = render(<TestComponent />);
-    const updateButton = getByText('Update selection');
-    const clearButton = getByText('Clear handlers');
-
-    act(() => {
-      updateButton.click();
-    });
-
-    expect(changeHandler.callCount).to.equal(1);
-    expect(highlightChangeHandler.callCount).to.equal(1);
-
-    act(() => {
-      clearButton.click();
-    });
-
-    act(() => {
-      updateButton.click();
-    });
-
-    expect(changeHandler.callCount).to.equal(1);
-    expect(highlightChangeHandler.callCount).to.equal(1);
-  });
-});
diff --git a/packages/mui-base/src/useTab/useTab.ts b/packages/mui-base/src/useTab/useTab.ts
index ca31046473d8d9..8523579f014121 100644
--- a/packages/mui-base/src/useTab/useTab.ts
+++ b/packages/mui-base/src/useTab/useTab.ts
@@ -1,7 +1,17 @@
-import { useTabContext, getTabId, getPanelId } from '../TabsUnstyled';
-import useButton from '../useButton';
+import * as React from 'react';
+import { unstable_useId as useId, unstable_useForkRef as useForkRef } from '@mui/utils';
+import { useTabsContext } from '../TabsUnstyled';
 import { UseTabParameters, UseTabReturnValue, UseTabRootSlotProps } from './useTab.types';
 import { EventHandlers } from '../utils';
+import { useCompoundItem } from '../utils/useCompoundItem';
+import { useListItem } from '../useList';
+import useButton from '../useButton';
+import { TabMetadata } from '../useTabs';
+
+function tabValueGenerator(otherTabValues: Set<string | number>) {
+  return otherTabValues.size;
+}
+
 /**
  *
  * Demos:
@@ -13,85 +23,80 @@ import { EventHandlers } from '../utils';
  * - [useTab API](https://mui.com/base/react-tabs/hooks-api/#use-tab)
  */
 function useTab(parameters: UseTabParameters): UseTabReturnValue {
-  const { value: valueProp, onChange, onClick, onFocus } = parameters;
-
-  const { getRootProps: getRootPropsButton, ...otherButtonProps } = useButton(parameters);
-
-  const context = useTabContext();
-  if (context === null) {
-    throw new Error('No TabContext provided');
-  }
-
-  const value = valueProp ?? 0;
-  const selected = context.value === value;
-  const selectionFollowsFocus = context.selectionFollowsFocus;
+  const { value: valueParam, ref: externalRef, disabled = false, id: idParam } = parameters;
 
-  const a11yAttributes = {
-    role: 'tab',
-    'aria-controls': getPanelId(context, value) ?? undefined,
-    id: getTabId(context, value) ?? undefined,
-    'aria-selected': selected,
-    disabled: otherButtonProps.disabled,
-  };
+  const tabRef = React.useRef<HTMLElement>(null);
+  const id = useId(idParam);
 
-  const createHandleFocus =
-    (otherHandlers: EventHandlers) => (event: React.FocusEvent<HTMLButtonElement, Element>) => {
-      otherHandlers.onFocus?.(event);
-      if (event.defaultPrevented) {
-        return;
-      }
+  const { value: selectedValue, selectionFollowsFocus, getTabPanelId } = useTabsContext();
 
-      if (selectionFollowsFocus && !selected) {
-        if (onChange) {
-          onChange(event, value);
-        }
+  const tabMetadata = React.useMemo(() => ({ disabled, ref: tabRef, id }), [disabled, tabRef, id]);
 
-        context.onSelected(event, value);
-      }
+  const {
+    id: value,
+    index,
+    totalItemCount: totalTabsCount,
+  } = useCompoundItem<string | number, TabMetadata>(valueParam, tabMetadata, tabValueGenerator);
 
-      if (onFocus) {
-        onFocus(event);
-      }
-    };
+  const {
+    getRootProps: getTabProps,
+    ref: listItemRefHandler,
+    highlighted,
+    selected,
+  } = useListItem({
+    item: value,
+  });
 
-  const createHandleClick =
-    (otherHandlers: EventHandlers) => (event: React.MouseEvent<Element, MouseEvent>) => {
-      otherHandlers.onClick?.(event);
-      if (event.defaultPrevented) {
-        return;
-      }
+  const {
+    getRootProps: getButtonProps,
+    ref: buttonRefHandler,
+    active,
+    focusVisible,
+    setFocusVisible,
+  } = useButton({
+    disabled,
+    focusableWhenDisabled: !selectionFollowsFocus,
+    type: 'button',
+  });
 
-      if (!selected) {
-        if (onChange) {
-          onChange(event, value);
-        }
-        context.onSelected(event, value);
-      }
+  const handleRef = useForkRef(tabRef, externalRef, listItemRefHandler, buttonRefHandler);
 
-      if (onClick) {
-        onClick(event);
-      }
-    };
+  const tabPanelId = value !== undefined ? getTabPanelId(value) : undefined;
 
   const getRootProps = <TOther extends EventHandlers>(
     otherHandlers: TOther = {} as TOther,
   ): UseTabRootSlotProps<TOther> => {
-    const buttonResolvedProps = getRootPropsButton({
+    const resolvedTabProps = {
       ...otherHandlers,
-      onClick: createHandleClick(otherHandlers),
-      onFocus: createHandleFocus(otherHandlers),
-    });
+      ...getTabProps(otherHandlers),
+    };
+
+    const resolvedButtonProps = {
+      ...resolvedTabProps,
+      ...getButtonProps(resolvedTabProps),
+    };
 
     return {
-      ...buttonResolvedProps,
-      ...a11yAttributes,
+      ...resolvedButtonProps,
+      role: 'tab',
+      'aria-controls': tabPanelId,
+      'aria-selected': selected,
+      id,
+      ref: handleRef,
     };
   };
 
   return {
     getRootProps,
-    ...otherButtonProps,
-    selected,
+    active,
+    focusVisible,
+    highlighted,
+    index,
+    // 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,
+    setFocusVisible,
+    totalTabsCount,
   };
 }
 
diff --git a/packages/mui-base/src/useTab/useTab.types.ts b/packages/mui-base/src/useTab/useTab.types.ts
index 0c6d829a3341fc..a0dc1d621a029d 100644
--- a/packages/mui-base/src/useTab/useTab.types.ts
+++ b/packages/mui-base/src/useTab/useTab.types.ts
@@ -3,67 +3,79 @@ import { UseButtonRootSlotProps } from '../useButton';
 
 export interface UseTabParameters {
   /**
-   * You can provide your own value. Otherwise, it falls back to the child position index.
+   * The value of the tab.
+   * It's used to associate the tab with a tab panel(s) with the same value.
+   * If the value is not provided, it falls back to the position index.
    */
   value?: number | string;
   /**
-   * Callback invoked when new value is being set.
+   * If `true`, the tab will be disabled.
    */
   onChange?: (event: React.SyntheticEvent, value: number | string) => void;
+  /**
+   * Callback fired when the tab is clicked.
+   */
   onClick?: React.MouseEventHandler;
   /**
-   * If `true`, the component is disabled.
-   * @default false
+   * If `true`, the tab will be disabled.
    */
   disabled?: boolean;
-  onFocus?: React.FocusEventHandler;
-  ref: React.Ref<any>;
-}
-
-interface UseTabRootSlotEventHandlers {
-  onClick?: React.MouseEventHandler;
-  onFocus?: React.FocusEventHandler;
+  /**
+   * The id of the tab.
+   * If not provided, it will be automatically generated.
+   */
+  id?: string;
+  /**
+   * Ref to the DOM element associated with the tab.
+   */
+  ref?: React.Ref<any>;
 }
 
-export type UseTabRootSlotProps<TOther = {}> = UseButtonRootSlotProps<
-  UseTabRootSlotEventHandlers & TOther
-> & {
+export type UseTabRootSlotProps<TOther = {}> = UseButtonRootSlotProps<TOther> & {
   'aria-controls': React.AriaAttributes['aria-controls'];
   'aria-selected': React.AriaAttributes['aria-selected'];
-  disabled: boolean;
   id: string | undefined;
   role: React.AriaRole;
 };
 
 export interface UseTabReturnValue {
   /**
-   * If `true`, the tab will be selected.
+   * Resolver for the root slot's props.
+   * @param externalProps props for the root slot
+   * @returns props that should be spread on the root slot
    */
-  selected: boolean;
+  getRootProps: <TOther extends Record<string, any> = {}>(
+    externalProps?: TOther,
+  ) => UseTabRootSlotProps<TOther>;
   /**
-   * If `true`, the tab's focus will be visible.
+   * If `true`, the tab is active (as in `:active` pseudo-class; in other words, pressed).
+   */
+  active: boolean;
+  /**
+   * If `true`, the tab has visible focus.
+   * This is a workaround for browsers that do not support this feature natively.
    */
   focusVisible: boolean;
   /**
-   * Callback for setting the `focusVisible` param.
+   * If `true`, the tab is highlighted.
    */
-  setFocusVisible: React.Dispatch<React.SetStateAction<boolean>>;
+  highlighted: boolean;
   /**
-   * If `true`, the component will be disabled.
-   * @default false
+   * 0-based index of the tab in the list of tabs.
    */
-  disabled: boolean;
+  index: number;
   /**
-   * If `true`, the component will be active.
-   * @default false
+   * If `true`, the tab is selected.
    */
-  active: boolean;
+  selected: boolean;
   /**
-   * Resolver for the root slot's props.
-   * @param externalProps props for the root slot
-   * @returns props that should be spread on the root slot
+   * Sets the focus-visible state of the tab.
+   * This is a workaround for browsers that do not support this feature natively.
    */
-  getRootProps: <TOther extends Record<string, any> = {}>(
-    externalProps?: TOther,
-  ) => UseTabRootSlotProps<TOther>;
+  setFocusVisible: React.Dispatch<React.SetStateAction<boolean>>;
+  /**
+   * Total number of tabs in the nearest parent TabsList.
+   * This can be used to determine if the tab is the last one to style it accordingly.
+   */
+  totalTabsCount: number;
 }
diff --git a/packages/mui-base/src/useTabPanel/useTabPanel.ts b/packages/mui-base/src/useTabPanel/useTabPanel.ts
index 8d17319e063b4d..b422a4dd8b761c 100644
--- a/packages/mui-base/src/useTabPanel/useTabPanel.ts
+++ b/packages/mui-base/src/useTabPanel/useTabPanel.ts
@@ -1,5 +1,12 @@
-import { useTabContext, getPanelId, getTabId } from '../TabsUnstyled';
+import { unstable_useId as useId } from '@mui/utils';
+import { useTabsContext } from '../TabsUnstyled';
+import { useCompoundItem } from '../utils/useCompoundItem';
 import { UseTabPanelParameters, UseTabPanelReturnValue } from './useTabPanel.types';
+
+function tabPanelValueGenerator(otherTabPanelValues: Set<string | number>) {
+  return otherTabPanelValues.size;
+}
+
 /**
  *
  * Demos:
@@ -11,20 +18,30 @@ import { UseTabPanelParameters, UseTabPanelReturnValue } from './useTabPanel.typ
  * - [useTabPanel API](https://mui.com/base/react-tabs/hooks-api/#use-tab-panel)
  */
 function useTabPanel(parameters: UseTabPanelParameters): UseTabPanelReturnValue {
-  const { value } = parameters;
+  const { value: valueParam, id: idParam } = parameters;
 
-  const context = useTabContext();
+  const context = useTabsContext();
   if (context === null) {
     throw new Error('No TabContext provided');
   }
 
-  const hidden = value !== context.value;
-  const id = getPanelId(context, value);
-  const tabId = getTabId(context, value);
+  const { value: selectedTabValue, getTabId } = context;
+
+  const id = useId(idParam);
+
+  const { id: value } = useCompoundItem<string | number, string | undefined>(
+    valueParam,
+    id,
+    tabPanelValueGenerator,
+  );
+
+  const hidden = value !== selectedTabValue;
+
+  const correspondingTabId = value !== undefined ? getTabId(value) : undefined;
 
   const getRootProps = () => {
     return {
-      'aria-labelledby': tabId ?? undefined,
+      'aria-labelledby': correspondingTabId ?? undefined,
       hidden,
       id: id ?? undefined,
     };
diff --git a/packages/mui-base/src/useTabPanel/useTabPanel.types.ts b/packages/mui-base/src/useTabPanel/useTabPanel.types.ts
index 73b11362a06e03..26f0ed05084a1e 100644
--- a/packages/mui-base/src/useTabPanel/useTabPanel.types.ts
+++ b/packages/mui-base/src/useTabPanel/useTabPanel.types.ts
@@ -1,8 +1,12 @@
 export interface UseTabPanelParameters {
+  /**
+   * The id of the TabPanel.
+   */
+  id?: string;
   /**
    * The value of the TabPanel. It will be shown when the Tab with the corresponding value is selected.
    */
-  value: number | string;
+  value?: number | string;
 }
 
 export interface UseTabPanelRootSlotProps {
diff --git a/packages/mui-base/src/useTabs/TabsProvider.tsx b/packages/mui-base/src/useTabs/TabsProvider.tsx
new file mode 100644
index 00000000000000..65ac2629f5cf4d
--- /dev/null
+++ b/packages/mui-base/src/useTabs/TabsProvider.tsx
@@ -0,0 +1,72 @@
+import * as React from 'react';
+import TabsContext, { TabsContextValue } from '../TabsUnstyled/TabsContext';
+import { CompoundComponentContext, CompoundComponentContextValue } from '../utils/useCompound';
+
+export type TabsProviderValue = CompoundComponentContextValue<string | number, string> &
+  TabsContextValue;
+
+export interface TabsProviderProps {
+  value: TabsProviderValue;
+  children: React.ReactNode;
+}
+
+/**
+ * Sets up the contexts for the underlying Tab and TabPanel components.
+ *
+ * @ignore - do not document.
+ */
+export default function TabsProvider(props: TabsProviderProps) {
+  const { value: valueProp, children } = props;
+  const {
+    direction,
+    getItemIndex,
+    onSelected,
+    orientation,
+    registerItem,
+    registerTabIdLookup,
+    selectionFollowsFocus,
+    totalSubitemCount,
+    value,
+    getTabId,
+    getTabPanelId,
+  } = valueProp;
+
+  const compoundComponentContextValue: CompoundComponentContextValue<string | number, string> =
+    React.useMemo(
+      () => ({
+        getItemIndex,
+        registerItem,
+        totalSubitemCount,
+      }),
+      [registerItem, getItemIndex, totalSubitemCount],
+    );
+
+  const tabsContextValue: TabsContextValue = React.useMemo(
+    () => ({
+      direction,
+      getTabId,
+      getTabPanelId,
+      onSelected,
+      orientation,
+      registerTabIdLookup,
+      selectionFollowsFocus,
+      value,
+    }),
+    [
+      direction,
+      getTabId,
+      getTabPanelId,
+      onSelected,
+      orientation,
+      registerTabIdLookup,
+      selectionFollowsFocus,
+      value,
+    ],
+  );
+
+  return (
+    <CompoundComponentContext.Provider value={compoundComponentContextValue}>
+      <TabsContext.Provider value={tabsContextValue}>{children}</TabsContext.Provider>
+    </CompoundComponentContext.Provider>
+  );
+}
diff --git a/packages/mui-base/src/useTabs/index.ts b/packages/mui-base/src/useTabs/index.ts
index d60002e901e715..7f7e023692592c 100644
--- a/packages/mui-base/src/useTabs/index.ts
+++ b/packages/mui-base/src/useTabs/index.ts
@@ -1,2 +1,6 @@
 export { default } from './useTabs';
+export * from './useTabs';
 export * from './useTabs.types';
+
+export { default as TabsProvider } from './TabsProvider';
+export * from './TabsProvider';
diff --git a/packages/mui-base/src/useTabs/useTabs.ts b/packages/mui-base/src/useTabs/useTabs.ts
index 518bda6bb59bba..12b992098087c1 100644
--- a/packages/mui-base/src/useTabs/useTabs.ts
+++ b/packages/mui-base/src/useTabs/useTabs.ts
@@ -1,6 +1,15 @@
 import * as React from 'react';
-import { unstable_useControlled as useControlled, unstable_useId as useId } from '@mui/utils';
+import { unstable_useControlled as useControlled } from '@mui/utils';
 import { UseTabsParameters, UseTabsReturnValue } from './useTabs.types';
+import { useCompoundParent } from '../utils/useCompound';
+
+export interface TabMetadata {
+  disabled: boolean;
+  id: string | undefined;
+  ref: React.RefObject<HTMLElement>;
+}
+
+type IdLookupFunction = (id: string | number) => string | undefined;
 
 /**
  *
@@ -29,24 +38,48 @@ function useTabs(parameters: UseTabsParameters): UseTabsReturnValue {
     state: 'value',
   });
 
-  const idPrefix = useId();
-
   const onSelected = React.useCallback(
-    (e: React.SyntheticEvent, newValue: string | number | false) => {
+    (event: React.SyntheticEvent | null, newValue: string | number | null) => {
       setValue(newValue);
-      if (onChange) {
-        onChange(e, newValue);
-      }
+      onChange?.(event, newValue);
     },
     [onChange, setValue],
   );
 
-  const tabsContextValue = React.useMemo(() => {
-    return { idPrefix, value, onSelected, orientation, direction, selectionFollowsFocus };
-  }, [idPrefix, value, onSelected, orientation, direction, selectionFollowsFocus]);
+  const { subitems: tabPanels, contextValue: compoundComponentContextValue } = useCompoundParent<
+    string | number,
+    string | undefined
+  >();
+
+  const tabIdLookup = React.useRef<IdLookupFunction>(() => undefined);
+
+  const getTabPanelId = React.useCallback(
+    (tabValue: string | number) => {
+      return tabPanels.get(tabValue);
+    },
+    [tabPanels],
+  );
+
+  const getTabId = React.useCallback((tabPanelId: string | number) => {
+    return tabIdLookup.current(tabPanelId);
+  }, []);
+
+  const registerTabIdLookup = React.useCallback((lookupFunction: IdLookupFunction) => {
+    tabIdLookup.current = lookupFunction;
+  }, []);
 
   return {
-    tabsContextValue,
+    contextValue: {
+      direction,
+      getTabId,
+      getTabPanelId,
+      onSelected,
+      orientation,
+      registerTabIdLookup,
+      selectionFollowsFocus,
+      value,
+      ...compoundComponentContextValue,
+    },
   };
 }
 
diff --git a/packages/mui-base/src/useTabs/useTabs.types.ts b/packages/mui-base/src/useTabs/useTabs.types.ts
index c0f3ec2da2317f..d30a995bf54f0e 100644
--- a/packages/mui-base/src/useTabs/useTabs.types.ts
+++ b/packages/mui-base/src/useTabs/useTabs.types.ts
@@ -1,15 +1,15 @@
-import type { TabsContextValue } from '../TabsUnstyled';
+import { TabsProviderValue } from './TabsProvider';
 
 export interface UseTabsParameters {
   /**
    * The value of the currently selected `Tab`.
    * If you don't want any selected `Tab`, you can set this prop to `false`.
    */
-  value?: string | number | false;
+  value?: string | number | null;
   /**
    * The default value. Use when the component is not controlled.
    */
-  defaultValue?: string | number | false;
+  defaultValue?: string | number | null;
   /**
    * The component orientation (layout flow direction).
    * @default 'horizontal'
@@ -23,7 +23,7 @@ export interface UseTabsParameters {
   /**
    * Callback invoked when new value is being set.
    */
-  onChange?: (event: React.SyntheticEvent, value: number | string | boolean) => void;
+  onChange?: (event: React.SyntheticEvent | null, value: number | string | null) => void;
   /**
    * If `true` the selected tab changes on focus. Otherwise it only
    * changes on activation.
@@ -33,7 +33,7 @@ export interface UseTabsParameters {
 
 export interface UseTabsReturnValue {
   /**
-   * Returns the values to be passed to the tabs context provider.
+   * Returns the values to be passed to the tabs provider.
    */
-  tabsContextValue: TabsContextValue;
+  contextValue: TabsProviderValue;
 }
diff --git a/packages/mui-base/src/useTabsList/TabsListProvider.tsx b/packages/mui-base/src/useTabsList/TabsListProvider.tsx
new file mode 100644
index 00000000000000..fcef5ff3baebe4
--- /dev/null
+++ b/packages/mui-base/src/useTabsList/TabsListProvider.tsx
@@ -0,0 +1,63 @@
+import * as React from 'react';
+import { ListContextValue, ListContext } from '../useList/ListContext';
+import { TabMetadata } from '../useTabs/useTabs';
+import { CompoundComponentContext, CompoundComponentContextValue } from '../utils/useCompound';
+
+export type TabsListProviderValue = CompoundComponentContextValue<string | number, TabMetadata> &
+  ListContextValue<string | number>;
+
+export interface TabsListProviderProps {
+  value: TabsListProviderValue;
+  children: React.ReactNode;
+}
+
+/**
+ * Sets up the contexts for the underlying Tab components.
+ *
+ * @ignore - do not document.
+ */
+export default function TabsListProvider(props: TabsListProviderProps) {
+  const { value, children } = props;
+  const {
+    dispatch,
+    getItemIndex,
+    getItemState,
+    registerHighlightChangeHandler,
+    registerSelectionChangeHandler,
+    registerItem,
+    totalSubitemCount,
+  } = value;
+
+  const listContextValue: ListContextValue<string | number> = React.useMemo(
+    () => ({
+      dispatch,
+      getItemState,
+      getItemIndex,
+      registerHighlightChangeHandler,
+      registerSelectionChangeHandler,
+    }),
+    [
+      dispatch,
+      getItemIndex,
+      getItemState,
+      registerHighlightChangeHandler,
+      registerSelectionChangeHandler,
+    ],
+  );
+
+  const compoundComponentContextValue: CompoundComponentContextValue<string | number, TabMetadata> =
+    React.useMemo(
+      () => ({
+        getItemIndex,
+        registerItem,
+        totalSubitemCount,
+      }),
+      [registerItem, getItemIndex, totalSubitemCount],
+    );
+
+  return (
+    <CompoundComponentContext.Provider value={compoundComponentContextValue}>
+      <ListContext.Provider value={listContextValue}>{children}</ListContext.Provider>
+    </CompoundComponentContext.Provider>
+  );
+}
diff --git a/packages/mui-base/src/useTabsList/index.ts b/packages/mui-base/src/useTabsList/index.ts
index 9f0f71e4a5757c..3432c5427462b3 100644
--- a/packages/mui-base/src/useTabsList/index.ts
+++ b/packages/mui-base/src/useTabsList/index.ts
@@ -1,2 +1,5 @@
 export { default } from './useTabsList';
 export * from './useTabsList.types';
+
+export { default as TabsListProvider } from './TabsListProvider';
+export * from './TabsListProvider';
diff --git a/packages/mui-base/src/useTabsList/tabsListReducer.ts b/packages/mui-base/src/useTabsList/tabsListReducer.ts
new file mode 100644
index 00000000000000..79c4eb6339e2bb
--- /dev/null
+++ b/packages/mui-base/src/useTabsList/tabsListReducer.ts
@@ -0,0 +1,52 @@
+import {
+  ListState,
+  ListAction,
+  ListActionContext,
+  listReducer,
+  ListActionTypes,
+  moveHighlight,
+} from '../useList';
+import { ActionWithContext } from '../utils/useControllableReducer.types';
+import { TabsListActionTypes, ValueChangeAction } from './useTabsList.types';
+
+export type TabsListActionContext = ListActionContext<string | number> & {
+  selectionFollowsFocus: boolean;
+};
+
+export default function tabsListReducer(
+  state: ListState<string | number>,
+  action: ActionWithContext<ListAction<string | number> | ValueChangeAction, TabsListActionContext>,
+) {
+  if (action.type === TabsListActionTypes.valueChange) {
+    return {
+      ...state,
+      highlightedValue: action.value,
+    };
+  }
+
+  const newState = listReducer(state, action);
+
+  const {
+    context: { selectionFollowsFocus },
+  } = action;
+
+  if (action.type === ListActionTypes.itemsChange) {
+    if (newState.selectedValues.length > 0) {
+      return {
+        ...newState,
+        highlightedValue: newState.selectedValues[0],
+      };
+    }
+
+    moveHighlight(null, 'reset', action.context);
+  }
+
+  if (selectionFollowsFocus && newState.highlightedValue != null) {
+    return {
+      ...newState,
+      selectedValues: [newState.highlightedValue],
+    };
+  }
+
+  return newState;
+}
diff --git a/packages/mui-base/src/useTabsList/useTabsList.ts b/packages/mui-base/src/useTabsList/useTabsList.ts
index bed83ceefa4d3e..26f45f440de181 100644
--- a/packages/mui-base/src/useTabsList/useTabsList.ts
+++ b/packages/mui-base/src/useTabsList/useTabsList.ts
@@ -1,76 +1,18 @@
 import * as React from 'react';
+import { useTabsContext } from '../TabsUnstyled';
 import {
-  unstable_ownerDocument as ownerDocument,
-  unstable_useForkRef as useForkRef,
-} from '@mui/utils';
-import { isFragment } from 'react-is';
-import { useTabContext } from '../TabsUnstyled';
-import extractEventHandlers from '../utils/extractEventHandlers';
-import {
+  TabsListActionTypes,
   UseTabsListParameters,
   UseTabsListReturnValue,
   UseTabsListRootSlotProps,
+  ValueChangeAction,
 } from './useTabsList.types';
 import { EventHandlers } from '../utils';
+import { useCompoundParent } from '../utils/useCompound';
+import { TabMetadata } from '../useTabs/useTabs';
+import useList, { ListState, UseListParameters } from '../useList';
+import tabsListReducer from './tabsListReducer';
 
-const nextItem = (list: Element | null, item: Element | null): Element | null => {
-  if (!list) {
-    return null;
-  }
-
-  if (list === item) {
-    return list.firstChild as Element | null;
-  }
-  if (item && item.nextElementSibling) {
-    return item.nextElementSibling;
-  }
-  return list.firstChild as Element | null;
-};
-
-const previousItem = (list: Element | null, item: Element | null): Element | null => {
-  if (!list) {
-    return null;
-  }
-
-  if (list === item) {
-    return list.lastChild as Element | null;
-  }
-  if (item && item.previousElementSibling) {
-    return item.previousElementSibling;
-  }
-  return list.lastChild as Element | null;
-};
-
-const moveFocus = (
-  list: Element | null,
-  currentFocus: Element | null,
-  traversalFunction: (list: Element | null, currentFocus: Element | null) => Element | null,
-) => {
-  let wrappedOnce = false;
-  let nextFocus = traversalFunction(list, currentFocus);
-
-  while (list && nextFocus) {
-    // Prevent infinite loop.
-    if (nextFocus === list.firstChild) {
-      if (wrappedOnce) {
-        return;
-      }
-      wrappedOnce = true;
-    }
-
-    // Same logic as useAutocomplete.js
-    const nextFocusDisabled =
-      (nextFocus as any).disabled || nextFocus.getAttribute('aria-disabled') === 'true';
-
-    if (!nextFocus.hasAttribute('tabindex') || nextFocusDisabled) {
-      // Move to the next element.
-      nextFocus = traversalFunction(list, nextFocus);
-    } else {
-      (nextFocus as any).focus();
-      return;
-    }
-  }
-};
 /**
  *
  * Demos:
@@ -81,136 +23,145 @@ const moveFocus = (
  *
  * - [useTabsList API](https://mui.com/base/react-tabs/hooks-api/#use-tabs-list)
  */
-
 function useTabsList(parameters: UseTabsListParameters): UseTabsListReturnValue {
-  const { 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, children, ref } = parameters;
+  const { ref: externalRef } = parameters;
 
-  const tabsListRef = React.createRef<any>();
-  const handleRef = useForkRef(tabsListRef, ref);
+  const {
+    direction = 'ltr',
+    onSelected,
+    orientation = 'horizontal',
+    value,
+    registerTabIdLookup,
+    selectionFollowsFocus,
+  } = useTabsContext();
 
-  const context = useTabContext();
-  if (context === null) {
-    throw new Error('No TabContext provided');
-  }
+  const { subitems, contextValue: compoundComponentContextValue } = useCompoundParent<
+    string | number,
+    TabMetadata
+  >();
+
+  const tabIdLookup = React.useCallback(
+    (tabValue: string | number) => {
+      return subitems.get(tabValue)?.id;
+    },
+    [subitems],
+  );
+
+  registerTabIdLookup(tabIdLookup);
+
+  const subitemKeys = React.useMemo(() => Array.from(subitems.keys()), [subitems]);
+
+  const getTabElement = React.useCallback(
+    (tabValue: string | number) => {
+      if (tabValue == null) {
+        return null;
+      }
 
-  const { value, orientation = 'horizontal', direction = 'ltr' } = context;
+      return subitems.get(tabValue)?.ref.current ?? null;
+    },
+    [subitems],
+  );
 
   const isRtl = direction === 'rtl';
 
-  const handleKeyDown = (event: React.KeyboardEvent) => {
-    const list = tabsListRef.current;
-    const currentFocus = ownerDocument(list).activeElement;
-    // Keyboard navigation assumes that [role="tab"] are siblings
-    // though we might warn in the future about nested, interactive elements
-    // as a a11y violation
-    const role = currentFocus?.getAttribute('role');
-    if (role !== 'tab') {
-      return;
-    }
+  let listOrientation: UseListParameters<any, any>['orientation'];
+  if (orientation === 'vertical') {
+    listOrientation = 'vertical';
+  } else {
+    listOrientation = isRtl ? 'horizontal-rtl' : 'horizontal-ltr';
+  }
 
-    let previousItemKey = orientation === 'horizontal' ? 'ArrowLeft' : 'ArrowUp';
-    let nextItemKey = orientation === 'horizontal' ? 'ArrowRight' : 'ArrowDown';
-    if (orientation === 'horizontal' && isRtl) {
-      // swap previousItemKey with nextItemKey
-      previousItemKey = 'ArrowRight';
-      nextItemKey = 'ArrowLeft';
+  const handleChange = React.useCallback(
+    (
+      event:
+        | React.FocusEvent<Element, Element>
+        | React.KeyboardEvent<Element>
+        | React.MouseEvent<Element, MouseEvent>
+        | null,
+      newValue: (string | number)[],
+    ) => {
+      onSelected(event, newValue[0] ?? null);
+    },
+    [onSelected],
+  );
+
+  const controlledProps = React.useMemo(() => {
+    if (value === undefined) {
+      return {};
     }
 
-    switch (event.key) {
-      case previousItemKey:
-        event.preventDefault();
-        moveFocus(list, currentFocus, previousItem);
-        break;
-      case nextItemKey:
-        event.preventDefault();
-        moveFocus(list, currentFocus, nextItem);
-        break;
-      case 'Home':
-        event.preventDefault();
-        moveFocus(list, null, nextItem);
-        break;
-      case 'End':
-        event.preventDefault();
-        moveFocus(list, null, previousItem);
-        break;
-      default:
-        break;
+    return value != null ? { selectedValues: [value] } : { selectedValues: [] };
+  }, [value]);
+
+  const isItemDisabled = React.useCallback(
+    (item: string | number) => subitems.get(item)?.disabled ?? false,
+    [subitems],
+  );
+
+  const {
+    contextValue: listContextValue,
+    dispatch,
+    getRootProps: getListboxRootProps,
+    state: { highlightedValue, selectedValues },
+  } = useList<
+    string | number,
+    ListState<string | number>,
+    ValueChangeAction,
+    { selectionFollowsFocus: boolean }
+  >({
+    controlledProps,
+    disabledItemsFocusable: !selectionFollowsFocus,
+    focusManagement: 'DOM',
+    getItemDomElement: getTabElement,
+    isItemDisabled,
+    items: subitemKeys,
+    listRef: externalRef,
+    onChange: handleChange,
+    orientation: listOrientation,
+    reducerActionContext: React.useMemo(
+      () => ({ selectionFollowsFocus: selectionFollowsFocus || false }),
+      [selectionFollowsFocus],
+    ),
+    selectionMode: 'single',
+    stateReducer: tabsListReducer,
+  });
+
+  React.useEffect(() => {
+    if (value === undefined) {
+      return;
     }
-  };
 
-  const createHandleKeyDown =
-    (otherHandlers: Record<string, React.EventHandler<any>>) => (event: React.KeyboardEvent) => {
-      handleKeyDown(event);
-      otherHandlers.onKeyDown?.(event);
-    };
+    // when a value changes externally, the highlighted value should be synced to it
+    if (value != null) {
+      dispatch({
+        type: TabsListActionTypes.valueChange,
+        value,
+      });
+    }
+  }, [dispatch, value]);
 
   const getRootProps = <TOther extends EventHandlers = {}>(
     otherHandlers: TOther = {} as TOther,
   ): UseTabsListRootSlotProps<TOther> => {
-    const propsEventHandlers = extractEventHandlers(parameters);
-    const externalEventHandlers = { ...propsEventHandlers, ...otherHandlers };
-
-    const ownEventHandlers = {
-      onKeyDown: createHandleKeyDown(externalEventHandlers),
-    };
-
-    const mergedEventHandlers = {
-      ...externalEventHandlers,
-      ...ownEventHandlers,
-    };
     return {
-      'aria-label': ariaLabel,
-      'aria-labelledby': ariaLabelledBy,
+      ...otherHandlers,
+      ...getListboxRootProps(otherHandlers),
       'aria-orientation': orientation === 'vertical' ? 'vertical' : undefined,
       role: 'tablist',
-      ref: handleRef,
-      ...mergedEventHandlers,
     };
   };
 
-  const processChildren = React.useCallback(() => {
-    const valueToIndex = new Map();
-
-    let childIndex = 0;
-
-    const processedChildren = React.Children.map(children, (child) => {
-      if (!React.isValidElement(child)) {
-        return null;
-      }
-
-      if (process.env.NODE_ENV !== 'production') {
-        if (isFragment(child)) {
-          console.error(
-            [
-              "MUI: The Tabs component doesn't accept a Fragment as a child.",
-              'Consider providing an array instead.',
-            ].join('\n'),
-          );
-        }
-      }
-
-      const childValue = child.props.value === undefined ? childIndex : child.props.value;
-      valueToIndex.set(childValue, childIndex);
-
-      childIndex += 1;
-
-      return React.cloneElement(child, {
-        value: childValue,
-        ...((childIndex === 1 && value === false && !child.props.tabIndex) || value === childValue
-          ? { tabIndex: 0 }
-          : { tabIndex: -1 }),
-      });
-    });
-
-    return processedChildren;
-  }, [children, value]);
-
   return {
+    dispatch,
     isRtl,
     orientation,
-    value,
-    processChildren,
+    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 bb8a1ca7d70edf..c5556bbe9c5b05 100644
--- a/packages/mui-base/src/useTabsList/useTabsList.types.ts
+++ b/packages/mui-base/src/useTabsList/useTabsList.types.ts
@@ -1,12 +1,11 @@
 import * as React from 'react';
+import { TabsListProviderValue } from './TabsListProvider';
+import { ListAction } from '../useList';
 
 export interface UseTabsListParameters {
-  'aria-label'?: string;
-  'aria-labelledby'?: string;
   /**
-   * The content of the component.
+   * Ref to the root element.
    */
-  children?: React.ReactNode;
   ref: React.Ref<unknown>;
 }
 
@@ -20,6 +19,15 @@ export type UseTabsListRootSlotProps<TOther = {}> = TOther & {
 };
 
 export interface UseTabsListReturnValue {
+  /**
+   * Action dispatcher for the tabs list component.
+   * Allows to programmatically control the tabs list.
+   */
+  dispatch: (action: ListAction<string | number>) => void;
+  /**
+   * The value of the currently highlighted tab.
+   */
+  highlightedValue: string | number | null;
   /**
    * If `true`, it will indicate that the text's direction in right-to-left.
    * @default false
@@ -31,16 +39,9 @@ export interface UseTabsListReturnValue {
    */
   orientation: 'horizontal' | 'vertical';
   /**
-   * The value of the currently selected `Tab`.
-   */
-  value: string | number | false;
-  /**
-   * Callback for processing the children of the tabs list. It adds the necessary attributes for correct a11y and navigation.
+   * The value of the currently selected tab.
    */
-  processChildren: () =>
-    | React.ReactElement<any, string | React.JSXElementConstructor<any>>[]
-    | null
-    | undefined;
+  selectedValue: string | number | null;
   /**
    * Resolver for the root slot's props.
    * @param externalProps props for the root slot
@@ -49,4 +50,17 @@ export interface UseTabsListReturnValue {
   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 = {
+  valueChange: 'valueChange',
+} as const;
+
+export interface ValueChangeAction {
+  type: typeof TabsListActionTypes.valueChange;
+  value: string | number | null;
 }
diff --git a/packages/mui-base/src/utils/useCompound.test.tsx b/packages/mui-base/src/utils/useCompound.test.tsx
new file mode 100644
index 00000000000000..88157bea3ef177
--- /dev/null
+++ b/packages/mui-base/src/utils/useCompound.test.tsx
@@ -0,0 +1,207 @@
+import * as React from 'react';
+import { expect } from 'chai';
+import { render } from 'test/utils';
+import { CompoundComponentContext, useCompoundParent } from './useCompound';
+import { useCompoundItem } from './useCompoundItem';
+
+describe('compound components', () => {
+  describe('useCompoundParent', () => {
+    it('knows about children from the whole subtree', () => {
+      let parentSubitems: Map<string, string>;
+
+      function Parent(props: React.PropsWithChildren<{}>) {
+        const { children } = props;
+        const { subitems, contextValue } = useCompoundParent<string, string>();
+
+        parentSubitems = subitems;
+
+        return (
+          <CompoundComponentContext.Provider value={contextValue}>
+            {children}
+          </CompoundComponentContext.Provider>
+        );
+      }
+
+      function Child(props: React.PropsWithChildren<{ id: string; value: string }>) {
+        const { id, value, children } = props;
+        useCompoundItem(id, value);
+
+        return <span>{children}</span>;
+      }
+
+      render(
+        <Parent>
+          <Child id="1" value="one" />
+          <Child id="2" value="two">
+            <Child id="2.1" value="two.one" />
+            <Child id="2.2" value="two.two" />
+          </Child>
+          <Child id="3" value="three">
+            <Child id="3.1" value="three.one">
+              <Child id="3.1.1" value="three.one.one" />
+            </Child>
+          </Child>
+        </Parent>,
+      );
+
+      expect(Array.from(parentSubitems!.keys())).to.deep.equal([
+        '1',
+        '2.1',
+        '2.2',
+        '2',
+        '3.1.1',
+        '3.1',
+        '3',
+      ]);
+
+      expect(Array.from(parentSubitems!.values())).to.deep.equal([
+        'one',
+        'two.one',
+        'two.two',
+        'two',
+        'three.one.one',
+        'three.one',
+        'three',
+      ]);
+    });
+
+    it('knows about children rendered by other components', () => {
+      let parentSubitems: Map<string, string>;
+
+      function Parent(props: React.PropsWithChildren<{}>) {
+        const { children } = props;
+        const { subitems, contextValue } = useCompoundParent<string, string>();
+
+        parentSubitems = subitems;
+
+        return (
+          <CompoundComponentContext.Provider value={contextValue}>
+            {children}
+          </CompoundComponentContext.Provider>
+        );
+      }
+
+      function Child(props: { id: string; value: string }) {
+        const { id, value } = props;
+        useCompoundItem(id, value);
+
+        return <span />;
+      }
+
+      function Wrapper() {
+        return (
+          <React.Fragment>
+            <Child id="1" value="one" />
+            <Child id="2" value="two" />
+            <Child id="3" value="three" />
+          </React.Fragment>
+        );
+      }
+
+      render(
+        <Parent>
+          <Child id="0" value="zero" />
+          <Wrapper />
+          <Child id="4" value="four" />
+        </Parent>,
+      );
+
+      expect(Array.from(parentSubitems!.keys())).to.deep.equal(['0', '1', '2', '3', '4']);
+
+      expect(Array.from(parentSubitems!.values())).to.deep.equal([
+        'zero',
+        'one',
+        'two',
+        'three',
+        'four',
+      ]);
+    });
+
+    // TODO: test if removed children are removed from the map
+
+    // TODO: test if parent is notified about updated metadata
+  });
+
+  describe('useCompoundItem', () => {
+    it('knows its position within the parent and total number of registered items', () => {
+      function Parent(props: React.PropsWithChildren<{}>) {
+        const { children } = props;
+        const { contextValue } = useCompoundParent<string, null>();
+
+        return (
+          <CompoundComponentContext.Provider value={contextValue}>
+            {children}
+          </CompoundComponentContext.Provider>
+        );
+      }
+
+      function Child() {
+        const id = React.useId();
+        const { index, totalItemCount } = useCompoundItem(id, null);
+
+        return (
+          <span data-testid="child">
+            {index + 1} of {totalItemCount}
+          </span>
+        );
+      }
+
+      const { getAllByTestId } = render(
+        <Parent>
+          <Child />
+          <Child />
+          <React.Fragment>
+            <p>Unrelated element 1</p>
+            <Child />
+          </React.Fragment>
+          <p>Unrelated element 2</p>
+          <div>
+            <Child />
+          </div>
+        </Parent>,
+      );
+
+      const children = getAllByTestId('child');
+
+      children.forEach((child, index) => {
+        expect(child.innerHTML).to.equal(`${index + 1} of 4`);
+      });
+    });
+
+    it('gets assigned a generated id if none is provided', () => {
+      function Parent(props: React.PropsWithChildren<{}>) {
+        const { children } = props;
+        const { contextValue } = useCompoundParent<number, null>();
+
+        return (
+          <CompoundComponentContext.Provider value={contextValue}>
+            <ul>{children}</ul>
+          </CompoundComponentContext.Provider>
+        );
+      }
+
+      function idGenerator(existingIds: Set<string>) {
+        return `item-${existingIds.size}`;
+      }
+
+      function Child() {
+        const { id } = useCompoundItem<string, null>(undefined, null, idGenerator);
+
+        return <li>{id}</li>;
+      }
+
+      const { getAllByRole } = render(
+        <Parent>
+          <Child />
+          <Child />
+          <Child />
+        </Parent>,
+      );
+
+      const children = getAllByRole('listitem');
+      expect(children[0].innerHTML).to.equal('item-0');
+      expect(children[1].innerHTML).to.equal('item-1');
+      expect(children[2].innerHTML).to.equal('item-2');
+    });
+  });
+});
diff --git a/packages/mui-base/src/utils/useCompound.ts b/packages/mui-base/src/utils/useCompound.ts
new file mode 100644
index 00000000000000..51f4b997af32d9
--- /dev/null
+++ b/packages/mui-base/src/utils/useCompound.ts
@@ -0,0 +1,138 @@
+import * as React from 'react';
+
+interface RegisterItemReturnValue<Key> {
+  /**
+   * The id of the item.
+   * If the `id` was `undefined`, an id from the `missingKeyGenerator` will be used.
+   */
+  id: Key;
+  /**
+   * A function that deregisters the item.
+   */
+  deregister: () => void;
+}
+
+export type CompoundComponentContextValue<Key, Subitem> = {
+  /**
+   * Registers an item with the parent.
+   * This should be called during the effect phase of the child component.
+   * The `itemMetadata` should be a stable reference (e.g. a memoized object), to avoid unnecessary re-registrations.
+   *
+   * @param id Id of the item.
+   * @param itemMetadata Arbitrary metadata to pass to the parent component.
+   * @param missingKeyGenerator A function that generates a unique id for the item.
+   *   It is called with the set of the ids of all the items that have already been registered.
+   *   Return `existingKeys.size` if you want to use the index of the new item as the id.
+   */
+  registerItem: (
+    id: Key | undefined,
+    item: Subitem,
+    missingKeyGenerator?: (existingKeys: Set<Key>) => Key,
+  ) => RegisterItemReturnValue<Key>;
+  /**
+   * Returns the 0-based index of the item in the parent component's list of registered items.
+   *
+   * @param id id of the item.
+   */
+  getItemIndex: (id: Key) => number;
+  /**
+   * The total number of items registered with the parent.
+   */
+  totalSubitemCount: number;
+};
+
+export const CompoundComponentContext = React.createContext<CompoundComponentContextValue<
+  any,
+  any
+> | null>(null);
+
+CompoundComponentContext.displayName = 'CompoundComponentContext';
+
+export interface UseCompoundParentReturnValue<Key, Subitem> {
+  /**
+   * The value for the CompoundComponentContext provider.
+   */
+  contextValue: CompoundComponentContextValue<Key, Subitem>;
+  /**
+   * The subitems registered with the parent.
+   * The key is the id of the subitem, and the value is the metadata passed to the `useCompoundItem` hook.
+   * The order of the items is the same as the order in which they were registered.
+   */
+  subitems: Map<Key, Subitem>;
+}
+
+/**
+ * Provides a way for a component to know about its children.
+ *
+ * Child components register themselves with the `useCompoundItem` hook, passing in arbitrary metadata to the parent.
+ *
+ * This is a more powerful altervantive to `children` traversal, as child components don't have to be placed
+ * directly inside the parent component. They can be anywhere in the tree (and even rendered by other components).
+ *
+ * The downside is that this doesn't work with SSR as it relies on the useEffect hook.
+ *
+ * @ignore - internal hook.
+ */
+export function useCompoundParent<Key, Subitem>(): UseCompoundParentReturnValue<Key, Subitem> {
+  const [subitems, setSubitems] = React.useState(new Map<Key, Subitem>());
+  const subitemKeys = React.useRef(new Set<Key>());
+
+  const deregisterItem = React.useCallback(function deregisterItem(id: Key) {
+    subitemKeys.current.delete(id);
+    setSubitems((previousState) => {
+      const newState = new Map(previousState);
+      newState.delete(id);
+      return newState;
+    });
+  }, []);
+
+  const registerItem = React.useCallback(
+    function registerItem(
+      id: Key | undefined,
+      item: Subitem,
+      missingKeyGenerator?: (existingKeys: Set<Key>) => Key,
+    ) {
+      let providedOrGeneratedId: Key;
+      if (id === undefined) {
+        if (missingKeyGenerator === undefined) {
+          throw new Error(
+            "The compound component's child doesn't have a key. You need to provide a missingKeyGenerator to generate it.",
+          );
+        }
+
+        providedOrGeneratedId = missingKeyGenerator(subitemKeys.current);
+      } else {
+        providedOrGeneratedId = id;
+      }
+
+      subitemKeys.current.add(providedOrGeneratedId);
+      setSubitems((previousState) => {
+        const newState = new Map(previousState);
+        newState.set(providedOrGeneratedId, item);
+        return newState;
+      });
+
+      return {
+        id: providedOrGeneratedId,
+        deregister: () => deregisterItem(providedOrGeneratedId),
+      };
+    },
+    [deregisterItem],
+  );
+
+  const getItemIndex = React.useCallback(
+    function getItemIndex(id: Key) {
+      return Array.from(subitems.keys()).indexOf(id);
+    },
+    [subitems],
+  );
+
+  return {
+    contextValue: {
+      getItemIndex,
+      registerItem,
+      totalSubitemCount: subitems.size,
+    },
+    subitems,
+  };
+}
diff --git a/packages/mui-base/src/utils/useCompoundItem.ts b/packages/mui-base/src/utils/useCompoundItem.ts
new file mode 100644
index 00000000000000..339120572bb34e
--- /dev/null
+++ b/packages/mui-base/src/utils/useCompoundItem.ts
@@ -0,0 +1,71 @@
+import * as React from 'react';
+import { unstable_useEnhancedEffect as useEnhancedEffect } from '@mui/utils';
+import { CompoundComponentContext, CompoundComponentContextValue } from './useCompound';
+
+export interface UseCompoundItemReturnValue<Key> {
+  /**
+   * The unique key for the child component.
+   * If the id was provided to `useCompoundItem`, this will be the same value.
+   * Otherwise, this will be a value generated by the `missingKeyGenerator`.
+   */
+  id: Key | undefined;
+  /**
+   * The 0-based index of the child component in the parent component's list of registered children.
+   */
+  index: number;
+  /**
+   * The total number of child components registered with the parent component.
+   * This value will be correct after the effect phase of the component (as children are registered with the parent during the effect phase).
+   */
+  totalItemCount: number;
+}
+
+/**
+ * Registers a child component with the parent component.
+ *
+ * @param id A unique key for the child component. If the `id` is `undefined`, the registration logic will not run (this can sometimes be the case during SSR).
+ * @param itemMetadata Arbitrary metadata to pass to the parent component. This should be a stable reference (e.g. a memoized object), to avoid unnecessary re-registrations.
+ * @param missingKeyGenerator A function that generates a unique id for the item.
+ *   It is called with the set of the ids of all the items that have already been registered.
+ *   Return `existingKeys.size` if you want to use the index of the new item as the id.
+ *
+ * @ignore - internal hook.
+ */
+export function useCompoundItem<Key, Subitem>(
+  id: Key | undefined,
+  itemMetadata: Subitem,
+  missingKeyGenerator: (existingKeys: Set<Key>) => Key,
+): UseCompoundItemReturnValue<Key>;
+export function useCompoundItem<Key, Subitem>(
+  id: Key,
+  itemMetadata: Subitem,
+): UseCompoundItemReturnValue<Key>;
+export function useCompoundItem<Key, Subitem>(
+  id: Key | undefined,
+  itemMetadata: Subitem,
+  missingKeyGenerator?: (existingKeys: Set<Key>) => Key,
+): UseCompoundItemReturnValue<Key> {
+  const context = React.useContext(CompoundComponentContext) as CompoundComponentContextValue<
+    Key,
+    Subitem
+  >;
+
+  if (context === null) {
+    throw new Error('useCompoundItem must be used within a useCompoundParent');
+  }
+
+  const { registerItem } = context;
+  const [registeredId, setRegisteredId] = React.useState(id);
+
+  useEnhancedEffect(() => {
+    const { id: returnedId, deregister } = registerItem(id, itemMetadata, missingKeyGenerator);
+    setRegisteredId(returnedId);
+    return deregister;
+  }, [registerItem, itemMetadata, missingKeyGenerator, id]);
+
+  return {
+    id: registeredId,
+    index: registeredId !== undefined ? context.getItemIndex(registeredId) : -1,
+    totalItemCount: context.totalSubitemCount,
+  };
+}
diff --git a/packages/mui-base/src/utils/useControllableReducer.test.tsx b/packages/mui-base/src/utils/useControllableReducer.test.tsx
new file mode 100644
index 00000000000000..812e9b81b50958
--- /dev/null
+++ b/packages/mui-base/src/utils/useControllableReducer.test.tsx
@@ -0,0 +1,277 @@
+import { expect } from 'chai';
+import * as React from 'react';
+import { spy } from 'sinon';
+import { createRenderer } from 'test/utils';
+import useControllableReducer from './useControllableReducer';
+import { ControllableReducerParameters } from './useControllableReducer.types';
+
+interface TestState {
+  make: string;
+  model: string;
+  productionYear: number;
+  features?: string[];
+}
+
+interface SetMakeAction {
+  type: 'setMake';
+  value: string;
+}
+
+interface UpdateProductionYearAction {
+  type: 'updateProductionYear';
+  value: number;
+  event: null;
+}
+
+interface UpdateFeaturesAction {
+  type: 'updateFeatures';
+  value: string[];
+}
+
+describe('useControllableReducer', () => {
+  const { render } = createRenderer();
+
+  describe('param: reducer', () => {
+    it('calls the provided reducer', () => {
+      const reducer = spy((state: TestState, action: SetMakeAction) => {
+        return {
+          ...state,
+          make: action.value,
+        };
+      });
+
+      const actionToDispatch: SetMakeAction = {
+        type: 'setMake',
+        value: 'BMW',
+      };
+
+      const reducerParameters: ControllableReducerParameters<TestState, SetMakeAction> = {
+        reducer,
+        controlledProps: {},
+        initialState: { make: 'Mazda', model: '3', productionYear: 2022 },
+      };
+
+      function TestComponent() {
+        const [state, dispatch] = useControllableReducer(reducerParameters);
+        React.useEffect(() => dispatch(actionToDispatch), [dispatch]);
+        return (
+          <p>
+            {state.make} {state.model} ({state.productionYear})
+          </p>
+        );
+      }
+
+      const { container } = render(<TestComponent />);
+      expect(reducer.getCalls()[0].args[1]).to.include({ ...actionToDispatch });
+      expect(container.firstChild).to.have.text('BMW 3 (2022)');
+    });
+  });
+
+  describe('param: initialProps', () => {
+    it('sets the initial state', () => {
+      const reducerParameters: ControllableReducerParameters<TestState, SetMakeAction> = {
+        reducer: (state) => state,
+        controlledProps: {},
+        initialState: { make: 'Mazda', model: '3', productionYear: 2022 },
+      };
+
+      function TestComponent() {
+        const [state] = useControllableReducer(reducerParameters);
+        return (
+          <p>
+            {state.make} {state.model} ({state.productionYear})
+          </p>
+        );
+      }
+
+      const { container } = render(<TestComponent />);
+      expect(container.firstChild).to.have.text('Mazda 3 (2022)');
+    });
+  });
+
+  describe('param: controlledProps', () => {
+    it('overwrites the state field with the corresponding controlled prop value', () => {
+      const reducer = (state: TestState, action: SetMakeAction) => {
+        // Even though the initial state is set to 'Mazda', the controlled prop overwrites it.
+        expect(state.make).to.equal('Tesla');
+
+        return {
+          ...state,
+          make: action.value,
+        };
+      };
+
+      const actionToDispatch: SetMakeAction = {
+        type: 'setMake',
+        value: 'BMW',
+      };
+
+      const reducerParameters: ControllableReducerParameters<TestState, SetMakeAction> = {
+        reducer,
+        initialState: { make: 'Mazda', model: '3', productionYear: 2022 },
+      };
+
+      function TestComponent(props: { make: string }) {
+        const [state, dispatch] = useControllableReducer<TestState, SetMakeAction>({
+          ...reducerParameters,
+          controlledProps: { make: props.make },
+        });
+
+        React.useEffect(() => dispatch(actionToDispatch), [dispatch]);
+        return (
+          <p>
+            {state.make} {state.model} ({state.productionYear})
+          </p>
+        );
+      }
+
+      const { container, setProps } = render(<TestComponent make="Tesla" />);
+      expect(container.firstChild).to.have.text('Tesla 3 (2022)');
+
+      setProps({ make: 'Mazda' });
+      expect(container.firstChild).to.have.text('Mazda 3 (2022)');
+    });
+  });
+
+  describe('param: stateComparers', () => {
+    it('uses the provided state comparers', () => {
+      const reducer = (state: TestState, action: UpdateFeaturesAction) => {
+        return {
+          ...state,
+          features: action.value,
+        };
+      };
+
+      const actionToDispatch: UpdateFeaturesAction = {
+        type: 'updateFeatures',
+        value: ['ABS', 'Traction control'],
+      };
+
+      const onStateChangeSpy = spy();
+
+      const reducerParameters: ControllableReducerParameters<TestState, UpdateFeaturesAction> = {
+        reducer,
+        controlledProps: {},
+        initialState: {
+          make: 'Mazda',
+          model: '3',
+          productionYear: 2022,
+          features: ['ABS', 'Traction control'],
+        },
+        stateComparers: {
+          // deep comparison of the features array
+          features: (a, b) =>
+            a !== undefined &&
+            b !== undefined &&
+            a.length === b.length &&
+            a.every((v, i) => v === b[i]),
+        },
+        onStateChange: onStateChangeSpy,
+      };
+
+      function TestComponent() {
+        const [, dispatch] = useControllableReducer(reducerParameters);
+
+        // The features array is new, but it contents remain the same.
+        React.useEffect(() => dispatch(actionToDispatch), [dispatch]);
+        return null;
+      }
+
+      render(<TestComponent />);
+      expect(onStateChangeSpy.callCount).to.equal(0);
+    });
+  });
+
+  describe('param: onStateChange', () => {
+    it('calls onStateChange when the reducer returns a modified selected value', () => {
+      const reducer = spy((state: TestState, action: UpdateProductionYearAction) => {
+        return {
+          ...state,
+          productionYear: action.value,
+        };
+      });
+
+      const actionToDispatch = {
+        type: 'updateProductionYear' as const,
+        event: null,
+        value: 2010,
+      };
+
+      const handleChange = spy();
+
+      const reducerParameters: ControllableReducerParameters<
+        TestState,
+        UpdateProductionYearAction
+      > = {
+        reducer,
+        controlledProps: {},
+        initialState: { make: 'Mazda', model: '3', productionYear: 2022 },
+        onStateChange: handleChange,
+      };
+
+      function TestComponent() {
+        const [, dispatch] = useControllableReducer(reducerParameters);
+        React.useEffect(() => dispatch(actionToDispatch), [dispatch]);
+        return null;
+      }
+
+      render(<TestComponent />);
+      expect(handleChange.called).to.equal(true);
+      expect(handleChange.getCalls()[0].args).to.deep.equal([
+        null,
+        'productionYear',
+        2010,
+        'updateProductionYear',
+        {
+          make: 'Mazda',
+          model: '3',
+          productionYear: 2010,
+        },
+      ]);
+    });
+  });
+
+  describe('param: actionContext', () => {
+    it('augments actions with the object provided to the reducer', () => {
+      const reducer = (
+        state: TestState,
+        action: UpdateProductionYearAction & { context: { overrideProductionYear: number } },
+      ) => {
+        return {
+          ...state,
+          productionYear: action.context.overrideProductionYear,
+        };
+      };
+
+      const actionToDispatch: UpdateProductionYearAction = {
+        type: 'updateProductionYear',
+        event: null,
+        value: 2010,
+      };
+
+      const reducerParameters: ControllableReducerParameters<
+        TestState,
+        UpdateProductionYearAction,
+        { overrideProductionYear: number }
+      > = {
+        reducer,
+        controlledProps: {},
+        initialState: { make: 'Mazda', model: '3', productionYear: 2022 },
+        actionContext: { overrideProductionYear: 2016 },
+      };
+
+      function TestComponent() {
+        const [state, dispatch] = useControllableReducer(reducerParameters);
+        React.useEffect(() => dispatch(actionToDispatch), [dispatch]);
+        return (
+          <p>
+            {state.make} {state.model} ({state.productionYear})
+          </p>
+        );
+      }
+
+      const { container } = render(<TestComponent />);
+      expect(container.firstChild).to.have.text('Mazda 3 (2016)');
+    });
+  });
+});
diff --git a/packages/mui-base/src/utils/useControllableReducer.ts b/packages/mui-base/src/utils/useControllableReducer.ts
new file mode 100644
index 00000000000000..f5d5dfee473482
--- /dev/null
+++ b/packages/mui-base/src/utils/useControllableReducer.ts
@@ -0,0 +1,185 @@
+import * as React from 'react';
+import {
+  ActionWithContext,
+  ControllableReducerAction,
+  ControllableReducerParameters,
+  StateChangeCallback,
+  StateComparers,
+} from './useControllableReducer.types';
+
+function areEqual(a: any, b: any): boolean {
+  return a === b;
+}
+
+const EMPTY_OBJECT = {};
+const NOOP = () => {};
+
+/**
+ * Gets the current state augmented with controlled values from the outside.
+ * If a state item has a corresponding controlled value, it will be used instead of the internal state.
+ */
+function getControlledState<State>(internalState: State, controlledProps: Partial<State>) {
+  const augmentedState = { ...internalState };
+  (Object.keys(controlledProps) as (keyof State)[]).forEach((key) => {
+    if (controlledProps[key] !== undefined) {
+      (augmentedState as Record<keyof State, any>)[key] = controlledProps[key];
+    }
+  });
+
+  return augmentedState;
+}
+
+interface UseStateChangeDetectionParameters<State extends {}> {
+  /**
+   * The next state returned by the reducer.
+   */
+  nextState: State;
+  /**
+   * The initial state.
+   */
+  initialState: State;
+  /**
+   * Comparers for each state item. If a state item has a corresponding comparer, it will be used to determine if the state has changed.
+   */
+  stateComparers: StateComparers<State>;
+  /**
+   * The function called when the state has changed.
+   */
+  onStateChange: StateChangeCallback<State>;
+  /**
+   * The external props used to override the state items.
+   */
+  controlledProps: Partial<State>;
+  /**
+   * The last action that was dispatched.
+   */
+  lastActionRef: React.MutableRefObject<ControllableReducerAction | null>;
+}
+
+/**
+ * Defines an effect that compares the next state with the previous state and calls
+ * the `onStateChange` callback if the state has changed.
+ * The comparison is done based on the `stateComparers` parameter.
+ */
+function useStateChangeDetection<State extends {}>(
+  parameters: UseStateChangeDetectionParameters<State>,
+) {
+  const { nextState, initialState, stateComparers, onStateChange, controlledProps, lastActionRef } =
+    parameters;
+
+  const internalPreviousStateRef = React.useRef<State>(initialState);
+
+  React.useEffect(() => {
+    if (lastActionRef.current === null) {
+      // Detect changes only if an action has been dispatched.
+      return;
+    }
+
+    const previousState = getControlledState(internalPreviousStateRef.current, controlledProps);
+
+    (Object.keys(nextState) as (keyof State)[]).forEach((key) => {
+      // go through all state keys and compare them with the previous state
+      const stateComparer = stateComparers[key] ?? areEqual;
+
+      const nextStateItem = nextState[key];
+      const previousStateItem = previousState[key];
+
+      if (!stateComparer(nextStateItem, previousStateItem)) {
+        onStateChange?.(
+          lastActionRef.current!.event ?? null,
+          key,
+          nextStateItem,
+          lastActionRef.current!.type ?? '',
+          nextState,
+        );
+      }
+    });
+
+    internalPreviousStateRef.current = nextState;
+    lastActionRef.current = null;
+  }, [
+    internalPreviousStateRef,
+    nextState,
+    lastActionRef,
+    onStateChange,
+    stateComparers,
+    controlledProps,
+  ]);
+}
+
+/**
+ * The alternative to `React.useReducer` that lets you control the state from the outside.
+ *
+ * It can be used in an uncontrolled mode, similar to `React.useReducer`, or in a controlled mode, when the state is controlled by the props.
+ * It also supports partially controlled state, when some state items are controlled and some are not.
+ *
+ * The controlled state items are provided via the `controlledProps` parameter.
+ * When a reducer action is dispatched, the internal state is updated with the new values.
+ * A change event (`onStateChange`) is then triggered (for each changed state item) if the new state is different from the previous state.
+ * This event can be used to update the controlled values.
+ *
+ * The comparison of the previous and next states is done using the `stateComparers` parameter.
+ * If a state item has a corresponding comparer, it will be used to determine if the state has changed.
+ * This is useful when the state item is an object and you want to compare only a subset of its properties or if it's an array and you want to compare its contents.
+ *
+ * An additional feature is the `actionContext` parameter. It allows you to add additional properties to every action object,
+ * similarly to how React context is implicitly available to every component.
+ *
+ * @template State - The type of the state calculated by the reducer.
+ * @template Action - The type of the actions that can be dispatched.
+ * @template ActionContext - The type of the additional properties that will be added to every action object.
+ *
+ * @ignore - internal hook.
+ */
+export default function useControllableReducer<
+  State extends {},
+  Action extends ControllableReducerAction,
+  ActionContext = undefined,
+>(
+  parameters: ControllableReducerParameters<State, Action, ActionContext>,
+): [State, (action: Action) => void] {
+  const lastActionRef = React.useRef<Action | null>(null);
+
+  const {
+    reducer,
+    initialState,
+    controlledProps = EMPTY_OBJECT,
+    stateComparers = EMPTY_OBJECT,
+    onStateChange = NOOP,
+    actionContext,
+  } = parameters;
+
+  // The reducer that is passed to React.useReducer is wrapped with a function that augments the state with controlled values.
+  const reducerWithControlledState = React.useCallback(
+    (state: State, action: ActionWithContext<Action, ActionContext>) => {
+      lastActionRef.current = action;
+      const controlledState = getControlledState(state, controlledProps);
+      return reducer(controlledState, action);
+    },
+    [controlledProps, reducer],
+  );
+
+  const [nextState, dispatch] = React.useReducer(reducerWithControlledState, initialState);
+
+  // The action that is passed to dispatch is augmented with the actionContext.
+  const dispatchWithContext = React.useCallback(
+    (action: Action) => {
+      dispatch({
+        ...action,
+        context: actionContext,
+      } as ActionWithContext<Action, ActionContext>);
+    },
+    [actionContext],
+  );
+
+  useStateChangeDetection<State>({
+    nextState,
+    initialState,
+    stateComparers: stateComparers ?? EMPTY_OBJECT,
+    onStateChange: onStateChange ?? NOOP,
+    controlledProps,
+    lastActionRef,
+  });
+
+  return [getControlledState(nextState, controlledProps), dispatchWithContext];
+}
diff --git a/packages/mui-base/src/utils/useControllableReducer.types.ts b/packages/mui-base/src/utils/useControllableReducer.types.ts
new file mode 100644
index 00000000000000..c4769af6c32ae9
--- /dev/null
+++ b/packages/mui-base/src/utils/useControllableReducer.types.ts
@@ -0,0 +1,72 @@
+/**
+ * Functions that compare fields of a given State object
+ */
+export type StateComparers<State> = {
+  [key in keyof State]?: (value1: State[key], value2: State[key]) => boolean;
+};
+
+export type StateChangeCallback<State> = <StateKey extends keyof State>(
+  event: React.SyntheticEvent | null,
+  field: StateKey,
+  value: State[StateKey],
+  reason: string,
+  state: State,
+) => void;
+
+export type ActionWithContext<Action, ContextValue> = Action & {
+  context: ContextValue;
+};
+
+/**
+ * Parameters of the useControllableReducer hook.
+ */
+export interface ControllableReducerParameters<
+  State,
+  Action extends ControllableReducerAction,
+  ActionContext = undefined,
+> {
+  /**
+   * The reducer function.
+   *
+   * @param state The previous state. If controlledProps are defined, the state will contain the values of the controlledProps.
+   * @param action The action to dispatch. The action can be augmented with the `actionContext`.
+   * @returns The updated state.
+   */
+  reducer: (state: State, action: ActionWithContext<Action, ActionContext>) => State;
+  /**
+   * The controlled props that will override the state items.
+   */
+  controlledProps?: Partial<State>;
+  /**
+   * The initial state.
+   */
+  initialState: State;
+  /**
+   * Comparers for each state item. If a state item has a corresponding comparer, it will be used to determine if the state has changed.
+   * This is taken into consideration when firing the `onStateChange` event.
+   * If no comparer is defined, the default equality comparison will be used.
+   */
+  stateComparers?: StateComparers<State>;
+  /**
+   * The event handler called whenever a field of the state changes.
+   */
+  onStateChange?: StateChangeCallback<State>;
+  /**
+   * Additional properties that will be added to the action.
+   */
+  actionContext?: ActionContext;
+}
+
+/*
+ * The standard shape of the action accepted by the controllable reducer
+ */
+export type ControllableReducerAction = {
+  /**
+   * The type of the action.
+   */
+  type?: string;
+  /**
+   * The event that triggered the action.
+   */
+  event?: React.SyntheticEvent | null;
+};
diff --git a/packages/mui-base/src/utils/useMessageBus.test.ts b/packages/mui-base/src/utils/useMessageBus.test.ts
index eead0e9b6f40d2..f7c495bb0698d7 100644
--- a/packages/mui-base/src/utils/useMessageBus.test.ts
+++ b/packages/mui-base/src/utils/useMessageBus.test.ts
@@ -5,38 +5,44 @@ import { createMessageBus } from './useMessageBus';
 describe('messageBus', () => {
   it('should be able to subscribe to a message', () => {
     const { subscribe, publish } = createMessageBus();
+    const testSubject = 'test';
     const callback = spy();
-    subscribe('test', callback);
-    publish('test', 'foo');
+    subscribe(testSubject, callback);
+    publish(testSubject, 'foo');
     expect(callback.args[0][0]).to.equal('foo');
   });
 
   it('should be able to unsubscribe from a message', () => {
     const { subscribe, publish } = createMessageBus();
+    const testSubject = 'test';
     const callback = spy();
-    const unsubscribe = subscribe('test', callback);
+    const unsubscribe = subscribe(testSubject, callback);
     unsubscribe();
-    publish('test', 'foo');
+    publish(testSubject, 'foo');
     expect(callback.callCount).to.equal(0);
   });
 
   it('should be able to publish multiple messages', () => {
     const { subscribe, publish } = createMessageBus();
+    const testSubject1 = 'test1';
+    const testSubject2 = 'test2';
     const callback = spy();
-    subscribe('test', callback);
-    subscribe('test2', callback);
-    publish('test', 'foo');
-    publish('test2', 'foo');
+    subscribe(testSubject1, callback);
+    subscribe(testSubject2, callback);
+    publish(testSubject1, 'foo');
+    publish(testSubject2, 'foo');
     expect(callback.callCount).to.equal(2);
   });
 
   it('should be able to publish multiple messages with different arguments', () => {
     const { subscribe, publish } = createMessageBus();
+    const testSubject1 = 'test1';
+    const testSubject2 = 'test2';
     const callback = spy();
-    subscribe('test', callback);
-    subscribe('test2', callback);
-    publish('test', 'foo');
-    publish('test2', 'bar');
+    subscribe(testSubject1, callback);
+    subscribe(testSubject2, callback);
+    publish(testSubject1, 'foo');
+    publish(testSubject2, 'bar');
     expect(callback.args[0][0]).to.equal('foo');
     expect(callback.args[1][0]).to.equal('bar');
   });
diff --git a/packages/mui-base/src/utils/useTextNavigation.ts b/packages/mui-base/src/utils/useTextNavigation.ts
index 92b8c159768ab0..105945f8996f24 100644
--- a/packages/mui-base/src/utils/useTextNavigation.ts
+++ b/packages/mui-base/src/utils/useTextNavigation.ts
@@ -6,7 +6,7 @@ const TEXT_NAVIGATION_RESET_TIMEOUT = 500; // milliseconds
  * @ignore - internal hook.
  *
  * Provides a handler for text navigation.
- * It's used to navigate the listbox by typing the first letters of the options.
+ * It's used to navigate a list by typing the first letters of the options.
  *
  * @param callback A function to be called when the navigation should be performed.
  * @returns A function to be used in a keydown event handler.
diff --git a/packages/mui-base/test/integration/SelectUnstyled.test.tsx b/packages/mui-base/test/integration/SelectUnstyled.test.tsx
deleted file mode 100644
index 5edb5ea778e199..00000000000000
--- a/packages/mui-base/test/integration/SelectUnstyled.test.tsx
+++ /dev/null
@@ -1,65 +0,0 @@
-import * as React from 'react';
-import { expect } from 'chai';
-import { act, createRenderer, fireEvent } from 'test/utils';
-import OptionUnstyled from '@mui/base/OptionUnstyled';
-import SelectUnstyled, { SelectUnstyledListboxSlotProps } from '@mui/base/SelectUnstyled';
-
-describe('<SelectUnstyled> integration', () => {
-  const { render } = createRenderer();
-
-  it('should scroll to highlighted option so it is visible', function test() {
-    if (/jsdom/.test(window.navigator.userAgent)) {
-      this.skip();
-    }
-
-    const SelectListbox = React.forwardRef(function SelectListbox(
-      props: SelectUnstyledListboxSlotProps<string, false>,
-      ref: React.ForwardedRef<HTMLUListElement>,
-    ) {
-      const { ownerState, ...other } = props;
-      return <ul {...other} ref={ref} style={{ maxHeight: '100px', overflow: 'auto' }} />;
-    });
-
-    const Option = React.forwardRef(function Option(
-      props: { value: string; children?: React.ReactNode },
-      ref: React.Ref<HTMLLIElement>,
-    ) {
-      return (
-        <OptionUnstyled {...props} ref={ref} slotProps={{ root: { style: { height: '50px' } } }} />
-      );
-    });
-
-    const { getByRole } = render(
-      <SelectUnstyled slots={{ listbox: SelectListbox }}>
-        <Option value="1">1</Option>
-        <Option value="2">2</Option>
-        <Option value="3">3</Option>
-        <Option value="4">4</Option>
-        <Option value="5">5</Option>
-        <Option value="6">6</Option>
-      </SelectUnstyled>,
-    );
-
-    const select = getByRole('combobox');
-
-    act(() => {
-      select.focus();
-    });
-
-    fireEvent.keyDown(select, { key: 'ArrowDown' });
-
-    const listbox = getByRole('listbox');
-
-    fireEvent.keyDown(listbox, { key: 'ArrowDown' });
-    fireEvent.keyDown(listbox, { key: 'ArrowDown' });
-    fireEvent.keyDown(listbox, { key: 'ArrowDown' });
-    fireEvent.keyDown(listbox, { key: 'ArrowDown' });
-
-    expect(listbox.scrollTop).to.equal(100);
-
-    fireEvent.keyDown(listbox, { key: 'ArrowUp' });
-    fireEvent.keyDown(listbox, { key: 'ArrowUp' });
-
-    expect(listbox.scrollTop).to.equal(50);
-  });
-});
diff --git a/packages/mui-joy/src/List/GroupListContext.ts b/packages/mui-joy/src/List/GroupListContext.ts
new file mode 100644
index 00000000000000..0f6584855e2355
--- /dev/null
+++ b/packages/mui-joy/src/List/GroupListContext.ts
@@ -0,0 +1,5 @@
+import * as React from 'react';
+
+const GroupListContext = React.createContext<undefined | 'menu' | 'select'>(undefined);
+
+export default GroupListContext;
diff --git a/packages/mui-joy/src/List/List.tsx b/packages/mui-joy/src/List/List.tsx
index 6f2506adbeedc5..a6b74e366797eb 100644
--- a/packages/mui-joy/src/List/List.tsx
+++ b/packages/mui-joy/src/List/List.tsx
@@ -4,14 +4,13 @@ import clsx from 'clsx';
 import { unstable_capitalize as capitalize } from '@mui/utils';
 import { OverridableComponent } from '@mui/types';
 import composeClasses from '@mui/base/composeClasses';
-import { MenuUnstyledContext } from '@mui/base/MenuUnstyled';
-import { SelectUnstyledContext } from '@mui/base/SelectUnstyled';
 import { styled, useThemeProps } from '../styles';
 import { useColorInversion } from '../styles/ColorInversion';
 import { ListProps, ListOwnerState, ListTypeMap } from './ListProps';
 import { getListUtilityClass } from './listClasses';
 import NestedListContext from './NestedListContext';
 import ComponentListContext from './ComponentListContext';
+import GroupListContext from './GroupListContext';
 import ListProvider from './ListProvider';
 import RadioGroupContext from '../RadioGroup/RadioGroupContext';
 import useSlot from '../utils/useSlot';
@@ -156,8 +155,7 @@ const ListRoot = styled(StyledList, {
  */
 const List = React.forwardRef(function List(inProps, ref) {
   const nesting = React.useContext(NestedListContext);
-  const menuContext = React.useContext(MenuUnstyledContext);
-  const selectContext = React.useContext(SelectUnstyledContext);
+  const group = React.useContext(GroupListContext);
   const radioGroupContext = React.useContext(RadioGroupContext);
   const props = useThemeProps<typeof inProps & { component?: React.ElementType }>({
     props: inProps,
@@ -181,7 +179,7 @@ const List = React.forwardRef(function List(inProps, ref) {
   const size = sizeProp || (inProps.size ?? 'md');
 
   let role;
-  if (menuContext || selectContext) {
+  if (group) {
     role = 'group';
   }
   if (radioGroupContext) {
diff --git a/packages/mui-joy/src/ListItem/ListItem.tsx b/packages/mui-joy/src/ListItem/ListItem.tsx
index 207b2ef793a6a9..676e1a7660b78a 100644
--- a/packages/mui-joy/src/ListItem/ListItem.tsx
+++ b/packages/mui-joy/src/ListItem/ListItem.tsx
@@ -7,7 +7,6 @@ import {
 } from '@mui/utils';
 import { OverridableComponent } from '@mui/types';
 import composeClasses from '@mui/base/composeClasses';
-import { MenuUnstyledContext } from '@mui/base/MenuUnstyled';
 import { styled, useThemeProps } from '../styles';
 import { useColorInversion } from '../styles/ColorInversion';
 import useSlot from '../utils/useSlot';
@@ -18,6 +17,7 @@ import RowListContext from '../List/RowListContext';
 import WrapListContext from '../List/WrapListContext';
 import ComponentListContext from '../List/ComponentListContext';
 import ListSubheaderDispatch from '../ListSubheader/ListSubheaderContext';
+import GroupListContext from '../List/GroupListContext';
 
 const useUtilityClasses = (ownerState: ListItemOwnerState) => {
   const { sticky, nested, nesting, variant, color } = ownerState;
@@ -149,8 +149,7 @@ const ListItem = React.forwardRef(function ListItem(inProps, ref) {
     name: 'JoyListItem',
   });
 
-  const menuContext = React.useContext(MenuUnstyledContext);
-
+  const group = React.useContext(GroupListContext);
   const listComponent = React.useContext(ComponentListContext);
   const row = React.useContext(RowListContext);
   const wrap = React.useContext(WrapListContext);
@@ -178,7 +177,7 @@ const ListItem = React.forwardRef(function ListItem(inProps, ref) {
   const component =
     componentProp || (listElement && !listElement.match(/^(ul|ol|menu)$/) ? 'div' : undefined);
 
-  let role = menuContext ? 'none' : undefined;
+  let role = group === 'menu' ? 'none' : undefined;
 
   if (listComponent) {
     // ListItem can be used inside Menu to create nested menus, so it should have role="none"
diff --git a/packages/mui-joy/src/Menu/Menu.tsx b/packages/mui-joy/src/Menu/Menu.tsx
index 5cc7e8f401d9f5..a9c088ba8ba5e1 100644
--- a/packages/mui-joy/src/Menu/Menu.tsx
+++ b/packages/mui-joy/src/Menu/Menu.tsx
@@ -3,12 +3,12 @@ import PropTypes from 'prop-types';
 import { unstable_capitalize as capitalize, HTMLElementType, refType } from '@mui/utils';
 import { OverridableComponent } from '@mui/types';
 import composeClasses from '@mui/base/composeClasses';
-import { MenuUnstyledContext, MenuUnstyledContextType } from '@mui/base/MenuUnstyled';
-import useMenu from '@mui/base/useMenu';
+import useMenu, { MenuProvider } from '@mui/base/useMenu';
 import PopperUnstyled from '@mui/base/PopperUnstyled';
 import { useSlotProps } from '@mui/base/utils';
 import { StyledList } from '../List/List';
 import ListProvider, { scopedVariables } from '../List/ListProvider';
+import GroupListContext from '../List/GroupListContext';
 import { styled, useThemeProps } from '../styles';
 import ColorInversion, { useColorInversion } from '../styles/ColorInversion';
 import { MenuTypeMap, MenuOwnerState } from './MenuProps';
@@ -91,19 +91,27 @@ const Menu = React.forwardRef(function Menu(inProps, ref: React.ForwardedRef<HTM
   const { getColor } = useColorInversion(variant);
   const color = disablePortal ? getColor(inProps.color, colorProp) : colorProp;
 
-  const { contextValue, getListboxProps, highlightFirstItem, highlightLastItem } = useMenu({
+  const handleOpenChange = React.useCallback(
+    (isOpen: boolean) => {
+      if (!isOpen) {
+        onClose?.();
+      }
+    },
+    [onClose],
+  );
+
+  const { contextValue, getListboxProps, dispatch } = useMenu({
     open,
-    onClose,
+    onOpenChange: handleOpenChange,
     listboxId: id,
   });
 
   React.useImperativeHandle(
     actions,
     () => ({
-      highlightFirstItem,
-      highlightLastItem,
+      dispatch,
     }),
-    [highlightFirstItem, highlightLastItem],
+    [dispatch],
   );
 
   const ownerState = {
@@ -149,14 +157,6 @@ const Menu = React.forwardRef(function Menu(inProps, ref: React.ForwardedRef<HTM
     className: classes.root,
   });
 
-  const menuContextValue: MenuUnstyledContextType = React.useMemo(
-    () => ({
-      ...contextValue,
-      open,
-    }),
-    [contextValue, open],
-  );
-
   const result = (
     <MenuRoot
       {...rootProps}
@@ -167,16 +167,18 @@ const Menu = React.forwardRef(function Menu(inProps, ref: React.ForwardedRef<HTM
         },
       })}
     >
-      <MenuUnstyledContext.Provider value={menuContextValue}>
-        <ListProvider nested>
-          {disablePortal ? (
-            children
-          ) : (
-            // For portal popup, the children should not inherit color inversion from the upper parent.
-            <ColorInversion.Provider value={undefined}>{children}</ColorInversion.Provider>
-          )}
-        </ListProvider>
-      </MenuUnstyledContext.Provider>
+      <MenuProvider value={contextValue}>
+        <GroupListContext.Provider value="menu">
+          <ListProvider nested>
+            {disablePortal ? (
+              children
+            ) : (
+              // For portal popup, the children should not inherit color inversion from the upper parent.
+              <ColorInversion.Provider value={undefined}>{children}</ColorInversion.Provider>
+            )}
+          </ListProvider>
+        </GroupListContext.Provider>
+      </MenuProvider>
     </MenuRoot>
   );
 
diff --git a/packages/mui-joy/src/MenuItem/MenuItem.test.js b/packages/mui-joy/src/MenuItem/MenuItem.test.js
index 72c637ac05e526..8fb7c50ef8ccc1 100644
--- a/packages/mui-joy/src/MenuItem/MenuItem.test.js
+++ b/packages/mui-joy/src/MenuItem/MenuItem.test.js
@@ -9,29 +9,28 @@ import {
   screen,
   describeJoyColorInversion,
 } from 'test/utils';
+import { MenuProvider } from '@mui/base/useMenu';
 import { ThemeProvider } from '@mui/joy/styles';
-import { MenuUnstyledContext } from '@mui/base/MenuUnstyled';
 import MenuItem, { menuItemClasses as classes } from '@mui/joy/MenuItem';
 import ListItemButton from '@mui/joy/ListItemButton';
 
 const testContext = {
+  registerItem: () => ({ id: 0, deregister: () => {} }),
+  getItemIndex: () => 0,
+  totalSubitemCount: 1,
+  dispatch: () => {},
   getItemState: () => ({
     disabled: false,
     highlighted: false,
     selected: false,
     index: 0,
   }),
-  getItemProps: () => ({}),
-  registerItem: () => {},
-  unregisterItem: () => {},
-  open: false,
   registerHighlightChangeHandler: () => () => {},
+  registerSelectionChangeHandler: () => () => {},
 };
 
 function Wrapper({ children }) {
-  return (
-    <MenuUnstyledContext.Provider value={testContext}>{children}</MenuUnstyledContext.Provider>
-  );
+  return <MenuProvider value={testContext}>{children}</MenuProvider>;
 }
 
 describe('Joy <MenuItem />', () => {
@@ -41,14 +40,9 @@ describe('Joy <MenuItem />', () => {
   describeConformance(<MenuItem />, () => ({
     classes,
     inheritComponent: ListItemButton,
-    render: (node) =>
-      render(
-        <MenuUnstyledContext.Provider value={testContext}>{node}</MenuUnstyledContext.Provider>,
-      ),
+    render: (node) => render(<MenuProvider value={testContext}>{node}</MenuProvider>),
     wrapMount: (mount) => (node) => {
-      const wrapper = mount(
-        <MenuUnstyledContext.Provider value={testContext}>{node}</MenuUnstyledContext.Provider>,
-      );
+      const wrapper = mount(<MenuProvider value={testContext}>{node}</MenuProvider>);
       return wrapper.childAt(0);
     },
     ThemeProvider,
@@ -68,9 +62,7 @@ describe('Joy <MenuItem />', () => {
   describeJoyColorInversion(<MenuItem />, {
     muiName: 'JoyMenuItem',
     classes,
-    wrapper: (node) => (
-      <MenuUnstyledContext.Provider value={testContext}>{node}</MenuUnstyledContext.Provider>
-    ),
+    wrapper: (node) => <MenuProvider value={testContext}>{node}</MenuProvider>,
   });
 
   it('should render with the variant class', () => {
diff --git a/packages/mui-joy/src/MenuList/MenuList.tsx b/packages/mui-joy/src/MenuList/MenuList.tsx
index 7fce9715ff557c..01718befdf5356 100644
--- a/packages/mui-joy/src/MenuList/MenuList.tsx
+++ b/packages/mui-joy/src/MenuList/MenuList.tsx
@@ -3,12 +3,12 @@ import PropTypes from 'prop-types';
 import { unstable_capitalize as capitalize } from '@mui/utils';
 import { OverridableComponent } from '@mui/types';
 import composeClasses from '@mui/base/composeClasses';
-import { MenuUnstyledContext, MenuUnstyledContextType } from '@mui/base/MenuUnstyled';
-import useMenu from '@mui/base/useMenu';
+import useMenu, { MenuProvider, MenuProviderValue } from '@mui/base/useMenu';
 import { styled, useThemeProps } from '../styles';
 import { useColorInversion } from '../styles/ColorInversion';
 import { StyledList } from '../List/List';
 import ListProvider, { scopedVariables } from '../List/ListProvider';
+import GroupListContext from '../List/GroupListContext';
 import { MenuListOwnerState, MenuListTypeMap } from './MenuListProps';
 import { getMenuListUtilityClass } from './menuListClasses';
 import useSlot from '../utils/useSlot';
@@ -77,7 +77,7 @@ const MenuList = React.forwardRef(function MenuList(inProps, ref) {
   const { getColor } = useColorInversion(variant);
   const color = getColor(inProps.color, colorProp);
 
-  const { contextValue, getListboxProps, highlightFirstItem, highlightLastItem } = useMenu({
+  const { contextValue, getListboxProps, dispatch } = useMenu({
     listboxRef: ref,
     listboxId: idProp,
   });
@@ -85,10 +85,9 @@ const MenuList = React.forwardRef(function MenuList(inProps, ref) {
   React.useImperativeHandle(
     actions,
     () => ({
-      highlightFirstItem,
-      highlightLastItem,
+      dispatch,
     }),
-    [highlightFirstItem, highlightLastItem],
+    [dispatch],
   );
 
   const ownerState = {
@@ -117,15 +116,17 @@ const MenuList = React.forwardRef(function MenuList(inProps, ref) {
         ...contextValue,
         getListboxProps,
         open: true,
-      } as MenuUnstyledContextType),
+      } as MenuProviderValue),
     [contextValue, getListboxProps],
   );
 
   return (
     <SlotRoot {...rootProps}>
-      <MenuUnstyledContext.Provider value={menuContextValue}>
-        <ListProvider nested>{children}</ListProvider>
-      </MenuUnstyledContext.Provider>
+      <MenuProvider value={menuContextValue}>
+        <GroupListContext.Provider value="menu">
+          <ListProvider nested>{children}</ListProvider>
+        </GroupListContext.Provider>
+      </MenuProvider>
     </SlotRoot>
   );
 }) as OverridableComponent<MenuListTypeMap>;
@@ -143,8 +144,7 @@ MenuList.propTypes /* remove-proptypes */ = {
     PropTypes.func,
     PropTypes.shape({
       current: PropTypes.shape({
-        highlightFirstItem: PropTypes.func.isRequired,
-        highlightLastItem: PropTypes.func.isRequired,
+        dispatch: PropTypes.func.isRequired,
       }),
     }),
   ]),
diff --git a/packages/mui-joy/src/Option/Option.tsx b/packages/mui-joy/src/Option/Option.tsx
index 748e60d69f2238..a43a8a854dbaef 100644
--- a/packages/mui-joy/src/Option/Option.tsx
+++ b/packages/mui-joy/src/Option/Option.tsx
@@ -2,6 +2,7 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import composeClasses from '@mui/base/composeClasses';
 import useOption from '@mui/base/useOption';
+import { unstable_useForkRef as useForkRef } from '@mui/utils';
 import useSlot from '../utils/useSlot';
 import { StyledListItemButton } from '../ListItemButton/ListItemButton';
 import { styled, useThemeProps } from '../styles';
@@ -60,17 +61,23 @@ const Option = React.forwardRef(function Option(inProps, ref: React.ForwardedRef
   } = props;
 
   const row = React.useContext(RowListContext);
+  const optionRef = React.useRef<HTMLLIElement>(null);
+  const combinedRef = useForkRef(optionRef, ref);
+
+  const computedLabel =
+    label ?? (typeof children === 'string' ? children : optionRef.current?.innerText);
 
   const { getRootProps, selected, highlighted, index } = useOption({
     disabled,
+    label: computedLabel,
     value,
-    optionRef: ref,
+    optionRef: combinedRef,
   });
 
   const { getColor } = useColorInversion(variant);
   const color = getColor(inProps.color, selected ? 'primary' : colorProp);
 
-  const ownerState = {
+  const ownerState: OptionOwnerState = {
     ...props,
     disabled,
     selected,
@@ -139,7 +146,7 @@ Option.propTypes /* remove-proptypes */ = {
   /**
    * The option value.
    */
-  value: PropTypes.any,
+  value: PropTypes.any.isRequired,
   /**
    * The [global variant](https://mui.com/joy-ui/main-features/global-variants/) to use.
    * @default 'plain'
diff --git a/packages/mui-joy/src/Option/OptionProps.ts b/packages/mui-joy/src/Option/OptionProps.ts
index 2726372f3a58ea..59adbc146d989c 100644
--- a/packages/mui-joy/src/Option/OptionProps.ts
+++ b/packages/mui-joy/src/Option/OptionProps.ts
@@ -5,7 +5,6 @@ import {
   OverridableTypeMap,
   OverrideProps,
 } from '@mui/types';
-import { OptionState } from '@mui/base/useListbox';
 import { ColorPaletteProp, VariantProp, SxProps, ApplyColorInversion } from '../styles/types';
 import { SlotProps, CreateSlotsAndSlotProps } from '../utils/types';
 
@@ -58,7 +57,7 @@ export interface OptionTypeMap<P = {}, D extends React.ElementType = 'li'> {
     /**
      * The option value.
      */
-    value?: any;
+    value: any;
     /**
      * The system prop that allows defining system overrides as well as additional CSS styles.
      */
@@ -79,9 +78,25 @@ export type OptionProps<
   },
 > = OverrideProps<OptionTypeMap<P, D>, D>;
 
-export interface OptionOwnerState
-  extends ApplyColorInversion<Omit<OptionProps, 'disabled'>>,
-    OptionState {}
+export interface OptionOwnerState extends ApplyColorInversion<Omit<OptionProps, 'disabled'>> {
+  /**
+   * If `true` the item is disabled.
+   */
+  disabled: boolean;
+  /**
+   * If `true` the item is highlighted.
+   */
+  highlighted: boolean;
+  /**
+   * The 0-based index of the item.
+   */
+  index: number;
+  /**
+   * If `true` the item is selected.
+   */
+  selected: boolean;
+  row: boolean;
+}
 
 export type ExtendOption<M extends OverridableTypeMap> = ((
   props: OverrideProps<ExtendOptionTypeMap<M>, 'a'>,
diff --git a/packages/mui-joy/src/Select/Select.test.tsx b/packages/mui-joy/src/Select/Select.test.tsx
index 252be6ff3c03c1..e8e32fddd3fde1 100644
--- a/packages/mui-joy/src/Select/Select.test.tsx
+++ b/packages/mui-joy/src/Select/Select.test.tsx
@@ -612,11 +612,11 @@ describe('Joy <Select />', () => {
 
   it('should show dropdown if the children of the select button is clicked', () => {
     const { getByTestId, getByRole } = render(
-      <Select defaultValue="1">
-        <Option value="1">
-          <span data-testid="test-element" />
-          Eric
-        </Option>
+      <Select
+        defaultValue="1"
+        renderValue={(option) => <span data-testid="test-element">{option?.label}</span>}
+      >
+        <Option value="1">Eric</Option>
       </Select>,
     );
     // Fire Click of the avatar
diff --git a/packages/mui-joy/src/Select/Select.tsx b/packages/mui-joy/src/Select/Select.tsx
index b714ee5a94fec5..3b50f8fbfa5841 100644
--- a/packages/mui-joy/src/Select/Select.tsx
+++ b/packages/mui-joy/src/Select/Select.tsx
@@ -2,21 +2,14 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import { OverrideProps, DefaultComponentProps } from '@mui/types';
-import {
-  unstable_capitalize as capitalize,
-  unstable_useForkRef as useForkRef,
-  unstable_useControlled as useControlled,
-} from '@mui/utils';
+import { unstable_capitalize as capitalize, unstable_useForkRef as useForkRef } from '@mui/utils';
 import PopperUnstyled, { PopperUnstyledProps } from '@mui/base/PopperUnstyled';
-import {
-  SelectUnstyledContext,
-  flattenOptionGroups,
-  getOptionsFromChildren,
-} from '@mui/base/SelectUnstyled';
-import useSelect, { SelectChild, SelectOption } from '@mui/base/useSelect';
+import useSelect, { SelectActionTypes, SelectProvider } from '@mui/base/useSelect';
+import { SelectOption } from '@mui/base/useOption';
 import composeClasses from '@mui/base/composeClasses';
 import { StyledList } from '../List/List';
 import ListProvider, { scopedVariables } from '../List/ListProvider';
+import GroupListContext from '../List/GroupListContext';
 import Unfold from '../internal/svg-icons/Unfold';
 import { styled, useThemeProps } from '../styles';
 import ColorInversion, { useColorInversion } from '../styles/ColorInversion';
@@ -386,15 +379,6 @@ const Select = React.forwardRef(function Select<TValue extends {}>(
   const renderValue = renderValueProp ?? defaultRenderSingleValue;
   const [anchorEl, setAnchorEl] = React.useState<HTMLElement | null>(null);
 
-  const [groupedOptions, setGroupedOptions] = React.useState<SelectChild<TValue>[]>([]);
-  const options = React.useMemo(() => flattenOptionGroups(groupedOptions), [groupedOptions]);
-  const [listboxOpen, setListboxOpen] = useControlled({
-    controlled: listboxOpenProp,
-    default: defaultListboxOpen,
-    name: 'SelectUnstyled',
-    state: 'listboxOpen',
-  });
-
   const rootRef = React.useRef<HTMLElement | null>(null);
   const buttonRef = React.useRef<HTMLElement | null>(null);
   const listboxRef = React.useRef<HTMLElement | null>(null);
@@ -411,10 +395,6 @@ const Select = React.forwardRef(function Select<TValue extends {}>(
     [],
   );
 
-  React.useEffect(() => {
-    setGroupedOptions(getOptionsFromChildren(children));
-  }, [children]);
-
   React.useEffect(() => {
     setAnchorEl(rootRef.current);
   }, []);
@@ -427,13 +407,12 @@ const Select = React.forwardRef(function Select<TValue extends {}>(
 
   const handleOpenChange = React.useCallback(
     (isOpen: boolean) => {
-      setListboxOpen(isOpen);
       onListboxOpenChange?.(isOpen);
       if (!isOpen) {
         onClose?.();
       }
     },
-    [onClose, onListboxOpenChange, setListboxOpen],
+    [onClose, onListboxOpenChange],
   );
 
   const {
@@ -441,19 +420,22 @@ const Select = React.forwardRef(function Select<TValue extends {}>(
     buttonFocusVisible,
     contextValue,
     disabled,
+    dispatch,
     getButtonProps,
     getListboxProps,
+    getOptionMetadata,
+    open: listboxOpen,
     value,
   } = useSelect({
     buttonRef,
+    defaultOpen: defaultListboxOpen,
     defaultValue,
     disabled: disabledProp,
     listboxId,
     multiple: false,
     onChange,
     onOpenChange: handleOpenChange,
-    open: listboxOpen,
-    options,
+    open: listboxOpenProp,
     value: valueProp,
   });
 
@@ -473,9 +455,10 @@ const Select = React.forwardRef(function Select<TValue extends {}>(
 
   const classes = useUtilityClasses(ownerState);
 
-  const selectedOption = React.useMemo(() => {
-    return options.find((o) => value === o.value) ?? null;
-  }, [options, value]);
+  const selectedOption = React.useMemo(
+    () => getOptionMetadata(value as TValue) ?? null,
+    [getOptionMetadata, value],
+  );
 
   const [SlotRoot, rootProps] = useSlot('root', {
     ref: handleRef,
@@ -491,7 +474,7 @@ const Select = React.forwardRef(function Select<TValue extends {}>(
         ) {
           // show the popup if user click outside of the button element.
           // the close action is already handled by blur event.
-          handleOpenChange(true);
+          dispatch({ type: SelectActionTypes.buttonClick, event });
         }
         handlers.onMouseDown?.(event);
       },
@@ -521,6 +504,7 @@ const Select = React.forwardRef(function Select<TValue extends {}>(
       disablePortal: true,
       open: listboxOpen,
       placement: 'bottom' as const,
+      keepMounted: true,
     },
     className: classes.listbox,
     elementType: SelectListbox,
@@ -591,10 +575,12 @@ const Select = React.forwardRef(function Select<TValue extends {}>(
           slots: { root: listboxProps.as || 'ul' },
         })}
       >
-        <SelectUnstyledContext.Provider value={context}>
-          {/* for building grouped options */}
-          <ListProvider nested>{children}</ListProvider>
-        </SelectUnstyledContext.Provider>
+        <SelectProvider value={context}>
+          <GroupListContext.Provider value="select">
+            {/* for building grouped options */}
+            <ListProvider nested>{children}</ListProvider>
+          </GroupListContext.Provider>
+        </SelectProvider>
       </SlotListbox>
     );
 
diff --git a/packages/mui-joy/src/Select/SelectProps.ts b/packages/mui-joy/src/Select/SelectProps.ts
index e16b3b5f337830..37f7aa57d992f0 100644
--- a/packages/mui-joy/src/Select/SelectProps.ts
+++ b/packages/mui-joy/src/Select/SelectProps.ts
@@ -1,11 +1,11 @@
 import * as React from 'react';
 import { OverridableStringUnion, OverrideProps } from '@mui/types';
 import { PopperUnstyledOwnProps } from '@mui/base/PopperUnstyled';
-import { SelectOption } from '@mui/base/useSelect';
+import { SelectOption } from '@mui/base/useOption';
 import { ColorPaletteProp, SxProps, VariantProp, ApplyColorInversion } from '../styles/types';
 import { CreateSlotsAndSlotProps, SlotProps } from '../utils/types';
 
-export type { SelectOption } from '@mui/base/useSelect';
+export type { SelectOption } from '@mui/base/useOption';
 
 export type SelectSlot =
   | 'root'
diff --git a/packages/mui-joy/src/Tab/Tab.test.tsx b/packages/mui-joy/src/Tab/Tab.test.tsx
index 1a07b0e82f2fb2..b94a892f17b596 100644
--- a/packages/mui-joy/src/Tab/Tab.test.tsx
+++ b/packages/mui-joy/src/Tab/Tab.test.tsx
@@ -1,14 +1,27 @@
 import * as React from 'react';
 import { expect } from 'chai';
 import { describeConformance, createRenderer, screen, describeJoyColorInversion } from 'test/utils';
-import { TabsContext, TabsUnstyledProps } from '@mui/base/TabsUnstyled';
-import useTabs from '@mui/base/useTabs';
+import { TabsUnstyledProps } from '@mui/base/TabsUnstyled';
+import useTabs, { TabsProvider as BaseTabsProvider } from '@mui/base/useTabs';
+import useTabsList, { TabsListProvider as BaseTabsListProvider } from '@mui/base/useTabsList';
 import { ThemeProvider } from '@mui/joy/styles';
 import Tab, { tabClasses as classes } from '@mui/joy/Tab';
 
+function TabsListProvider({ children }: React.PropsWithChildren<{}>) {
+  const { contextValue: tabsListContextValue } = useTabsList({
+    ref: { current: null },
+  });
+  return <BaseTabsListProvider value={tabsListContextValue}>{children}</BaseTabsListProvider>;
+}
+
 function TabsProvider({ children, ...props }: TabsUnstyledProps) {
-  const { tabsContextValue } = useTabs(props);
-  return <TabsContext.Provider value={tabsContextValue}>{children}</TabsContext.Provider>;
+  const { contextValue: tabsContextValue } = useTabs(props);
+
+  return (
+    <BaseTabsProvider value={tabsContextValue}>
+      <TabsListProvider>{children}</TabsListProvider>
+    </BaseTabsProvider>
+  );
 }
 
 describe('Joy <Tab />', () => {
@@ -63,6 +76,6 @@ describe('Joy <Tab />', () => {
       </TabsProvider>,
     );
     expect(screen.getByRole('tab')).to.have.class(classes.disabled);
-    expect(screen.getByRole('tab')).to.have.attribute('disabled');
+    expect(screen.getByRole('tab')).to.have.attribute('aria-disabled');
   });
 });
diff --git a/packages/mui-joy/src/TabList/TabList.test.tsx b/packages/mui-joy/src/TabList/TabList.test.tsx
index 3adba10f66051b..07848d9655b723 100644
--- a/packages/mui-joy/src/TabList/TabList.test.tsx
+++ b/packages/mui-joy/src/TabList/TabList.test.tsx
@@ -1,16 +1,16 @@
 import * as React from 'react';
 import { expect } from 'chai';
 import { describeConformance, createRenderer, screen, describeJoyColorInversion } from 'test/utils';
-import { TabsContext, TabsUnstyledProps } from '@mui/base/TabsUnstyled';
-import useTabs from '@mui/base/useTabs';
+import { TabsUnstyledProps } from '@mui/base/TabsUnstyled';
+import useTabs, { TabsProvider as BaseTabsProvider } from '@mui/base/useTabs';
 import { ThemeProvider } from '@mui/joy/styles';
 import Tabs from '@mui/joy/Tabs';
 import TabList, { tabListClasses as classes } from '@mui/joy/TabList';
 import RowListContext from '../List/RowListContext';
 
 function TabsProvider({ children, ...props }: TabsUnstyledProps) {
-  const { tabsContextValue } = useTabs(props);
-  return <TabsContext.Provider value={tabsContextValue}>{children}</TabsContext.Provider>;
+  const { contextValue } = useTabs(props);
+  return <BaseTabsProvider value={contextValue}>{children}</BaseTabsProvider>;
 }
 
 describe('Joy <TabList />', () => {
diff --git a/packages/mui-joy/src/TabList/TabList.tsx b/packages/mui-joy/src/TabList/TabList.tsx
index bf274fc2048ecf..ea1338234cc58d 100644
--- a/packages/mui-joy/src/TabList/TabList.tsx
+++ b/packages/mui-joy/src/TabList/TabList.tsx
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import { unstable_capitalize as capitalize } from '@mui/utils';
 import { unstable_composeClasses as composeClasses } from '@mui/base';
 import { OverridableComponent } from '@mui/types';
-import useTabsList from '@mui/base/useTabsList';
+import useTabsList, { TabsListProvider } from '@mui/base/useTabsList';
 import { useThemeProps } from '../styles';
 import styled from '../styles/styled';
 import { useColorInversion } from '../styles/ColorInversion';
@@ -71,7 +71,9 @@ const TabList = React.forwardRef(function TabList(inProps, ref) {
   const { getColor } = useColorInversion(variant);
   const color = getColor(inProps.color, colorProp);
 
-  const { isRtl, orientation, getRootProps, processChildren } = useTabsList({ ...props, ref });
+  const { isRtl, orientation, getRootProps, contextValue } = useTabsList({
+    ref,
+  });
 
   const size = sizeProp ?? tabsSize;
 
@@ -96,14 +98,14 @@ const TabList = React.forwardRef(function TabList(inProps, ref) {
     className: classes.root,
   });
 
-  const processedChildren = processChildren();
-
   return (
     // @ts-ignore conflicted ref types
     <SlotRoot {...rootProps}>
-      <ListProvider row={orientation === 'horizontal'} nested>
-        {processedChildren}
-      </ListProvider>
+      <TabsListProvider value={contextValue}>
+        <ListProvider row={orientation === 'horizontal'} nested>
+          {children}
+        </ListProvider>
+      </TabsListProvider>
     </SlotRoot>
   );
 }) as OverridableComponent<TabListTypeMap>;
diff --git a/packages/mui-joy/src/TabPanel/TabPanel.test.tsx b/packages/mui-joy/src/TabPanel/TabPanel.test.tsx
index 3bdee67db096cb..f94f2ee41e8833 100644
--- a/packages/mui-joy/src/TabPanel/TabPanel.test.tsx
+++ b/packages/mui-joy/src/TabPanel/TabPanel.test.tsx
@@ -1,15 +1,15 @@
 import * as React from 'react';
 import { expect } from 'chai';
 import { describeConformance, createRenderer, screen } from 'test/utils';
-import { TabsContext, TabsUnstyledProps } from '@mui/base/TabsUnstyled';
-import useTabs from '@mui/base/useTabs';
+import { TabsUnstyledProps } from '@mui/base/TabsUnstyled';
+import useTabs, { TabsProvider as BaseTabsProvider } from '@mui/base/useTabs';
 import { ThemeProvider } from '@mui/joy/styles';
 import Tabs from '@mui/joy/Tabs';
 import TabPanel, { tabPanelClasses as classes } from '@mui/joy/TabPanel';
 
 function TabsProvider({ children, ...props }: TabsUnstyledProps) {
-  const { tabsContextValue } = useTabs(props);
-  return <TabsContext.Provider value={tabsContextValue}>{children}</TabsContext.Provider>;
+  const { contextValue } = useTabs(props);
+  return <BaseTabsProvider value={contextValue}>{children}</BaseTabsProvider>;
 }
 
 describe('Joy <TabPanel />', () => {
diff --git a/packages/mui-joy/src/TabPanel/TabPanel.tsx b/packages/mui-joy/src/TabPanel/TabPanel.tsx
index cc42299b036740..f27f8c33dceb95 100644
--- a/packages/mui-joy/src/TabPanel/TabPanel.tsx
+++ b/packages/mui-joy/src/TabPanel/TabPanel.tsx
@@ -3,8 +3,8 @@ import PropTypes from 'prop-types';
 import { unstable_capitalize as capitalize } from '@mui/utils';
 import { unstable_composeClasses as composeClasses } from '@mui/base';
 import { OverridableComponent } from '@mui/types';
-import { useTabContext } from '@mui/base/TabsUnstyled';
 import useTabPanel from '@mui/base/useTabPanel';
+import { useTabsContext } from '@mui/base/TabsUnstyled';
 import { styled, useThemeProps } from '../styles';
 import SizeTabsContext from '../Tabs/SizeTabsContext';
 import { getTabPanelUtilityClass } from './tabPanelClasses';
@@ -61,7 +61,7 @@ const TabPanel = React.forwardRef(function TabPanel(inProps, ref) {
     name: 'JoyTabPanel',
   });
 
-  const { orientation } = useTabContext() || { orientation: 'horizontal' };
+  const { orientation } = useTabsContext() || { orientation: 'horizontal' };
   const tabsSize = React.useContext(SizeTabsContext);
 
   const { children, value = 0, component, size: sizeProp, ...other } = props;
diff --git a/packages/mui-joy/src/Tabs/Tabs.tsx b/packages/mui-joy/src/Tabs/Tabs.tsx
index e0d985268df187..11c9c37b911a5d 100644
--- a/packages/mui-joy/src/Tabs/Tabs.tsx
+++ b/packages/mui-joy/src/Tabs/Tabs.tsx
@@ -3,8 +3,7 @@ import PropTypes from 'prop-types';
 import { unstable_capitalize as capitalize } from '@mui/utils';
 import { unstable_composeClasses as composeClasses } from '@mui/base';
 import { OverridableComponent } from '@mui/types';
-import useTabs from '@mui/base/useTabs';
-import { TabsContext } from '@mui/base/TabsUnstyled';
+import useTabs, { TabsProvider } from '@mui/base/useTabs';
 import { SheetRoot } from '../Sheet/Sheet';
 import { styled, useThemeProps } from '../styles';
 import { useColorInversion } from '../styles/ColorInversion';
@@ -83,7 +82,7 @@ const Tabs = React.forwardRef(function Tabs(inProps, ref) {
   const { getColor } = useColorInversion(variant);
   const color = getColor(inProps.color, colorProp);
   const defaultValue = defaultValueProp || (valueProp === undefined ? 0 : undefined);
-  const { tabsContextValue } = useTabs({ ...props, orientation, defaultValue });
+  const { contextValue } = useTabs({ ...props, orientation, defaultValue });
 
   const ownerState = {
     ...props,
@@ -111,9 +110,9 @@ const Tabs = React.forwardRef(function Tabs(inProps, ref) {
   return (
     // @ts-ignore `defaultValue` between HTMLDiv and TabsProps is conflicted.
     <SlotRoot {...rootProps}>
-      <TabsContext.Provider value={tabsContextValue}>
+      <TabsProvider value={contextValue}>
         <SizeTabsContext.Provider value={size}>{children}</SizeTabsContext.Provider>
-      </TabsContext.Provider>
+      </TabsProvider>
     </SlotRoot>
   );
 }) as OverridableComponent<TabsTypeMap>;
@@ -143,7 +142,7 @@ Tabs.propTypes /* remove-proptypes */ = {
   /**
    * The default value. Use when the component is not controlled.
    */
-  defaultValue: PropTypes.oneOfType([PropTypes.oneOf([false]), PropTypes.number, PropTypes.string]),
+  defaultValue: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
   /**
    * The direction of the text.
    * @default 'ltr'
@@ -181,9 +180,9 @@ Tabs.propTypes /* remove-proptypes */ = {
   ]),
   /**
    * The value of the currently selected `Tab`.
-   * If you don't want any selected `Tab`, you can set this prop to `false`.
+   * If you don't want any selected `Tab`, you can set this prop to `null`.
    */
-  value: PropTypes.oneOfType([PropTypes.oneOf([false]), PropTypes.number, PropTypes.string]),
+  value: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
   /**
    * The [global variant](https://mui.com/joy-ui/main-features/global-variants/) to use.
    * @default 'plain'
diff --git a/packages/mui-material-next/src/Tab/Tab.js b/packages/mui-material-next/src/Tab/Tab.js
index 7ec700b8505241..cfbeef0b22bbaa 100644
--- a/packages/mui-material-next/src/Tab/Tab.js
+++ b/packages/mui-material-next/src/Tab/Tab.js
@@ -11,6 +11,7 @@ import {
 } from '@mui/utils';
 import { styled, useThemeProps } from '@mui/material/styles';
 import tabClasses, { getTabUtilityClass } from './tabClasses';
+import TabsListContext from '../Tabs/TabsListContext';
 
 const useUtilityClasses = (ownerState) => {
   const { classes, textColor, fullWidth, wrapped, icon, label, selected, disabled } = ownerState;
@@ -126,14 +127,14 @@ const Tab = React.forwardRef(function Tab(inProps, ref) {
     className,
     disableFocusRipple = false,
     // eslint-disable-next-line react/prop-types
-    fullWidth,
+    fullWidth: fullWidthProp,
     icon: iconProp,
     iconPosition = 'top',
     // eslint-disable-next-line react/prop-types
-    indicator,
+    indicator: indicatorProp,
     label,
     // eslint-disable-next-line react/prop-types
-    textColor = 'inherit',
+    textColor: textColorProp = 'inherit',
     value,
     wrapped = false,
     ...other
@@ -141,6 +142,17 @@ const Tab = React.forwardRef(function Tab(inProps, ref) {
 
   const { disabled, selected, getRootProps } = useTab(props);
 
+  let indicator = indicatorProp;
+  let textColor = textColorProp;
+  let fullWidth = fullWidthProp;
+
+  const tabsListContext = React.useContext(TabsListContext);
+  if (tabsListContext != null) {
+    indicator ??= tabsListContext.indicator;
+    textColor ??= tabsListContext.textColor;
+    fullWidth ??= tabsListContext.fullWidth;
+  }
+
   const ownerState = {
     ...props,
     disabled,
diff --git a/packages/mui-material-next/src/Tabs/Tabs.js b/packages/mui-material-next/src/Tabs/Tabs.js
index a3a9032665cdfb..9dcca65a0d32a2 100644
--- a/packages/mui-material-next/src/Tabs/Tabs.js
+++ b/packages/mui-material-next/src/Tabs/Tabs.js
@@ -10,8 +10,7 @@ import {
   unstable_ownerWindow as ownerWindow,
 } from '@mui/utils';
 import { unstable_composeClasses as composeClasses } from '@mui/base';
-import { TabsContext } from '@mui/base/TabsUnstyled';
-import useTabs from '@mui/base/useTabs';
+import useTabs, { TabsProvider } from '@mui/base/useTabs';
 import { styled, useThemeProps, useTheme } from '@mui/material/styles';
 import animate from '@mui/material/internal/animate';
 import TabScrollButton from '../TabScrollButton';
@@ -199,7 +198,10 @@ const Tabs = React.forwardRef(function Tabs(inProps, ref) {
   const clientSize = vertical ? 'clientHeight' : 'clientWidth';
   const size = vertical ? 'height' : 'width';
 
-  const { tabsContextValue } = useTabs({ ...props, direction: theme.direction });
+  const { contextValue: tabsContextValue } = useTabs({
+    ...props,
+    direction: theme.direction ?? 'ltr',
+  });
 
   const ownerState = {
     ...props,
@@ -278,7 +280,7 @@ const Tabs = React.forwardRef(function Tabs(inProps, ref) {
     }
 
     let tabMeta;
-    if (tabsNode && value !== false) {
+    if (tabsNode && value !== null) {
       const currentChildren = tabListRef.current.children;
 
       if (currentChildren.length > 0) {
@@ -579,7 +581,7 @@ const Tabs = React.forwardRef(function Tabs(inProps, ref) {
   const conditionalElements = getConditionalElements();
 
   return (
-    <TabsContext.Provider value={tabsContextValue}>
+    <TabsProvider value={tabsContextValue}>
       <TabsRoot
         className={clsx(classes.root, className)}
         ownerState={ownerState}
@@ -618,7 +620,7 @@ const Tabs = React.forwardRef(function Tabs(inProps, ref) {
         </TabsScroller>
         {conditionalElements.scrollButtonEnd}
       </TabsRoot>
-    </TabsContext.Provider>
+    </TabsProvider>
   );
 });
 
diff --git a/packages/mui-material-next/src/Tabs/Tabs.test.js b/packages/mui-material-next/src/Tabs/Tabs.test.js
index 9fe906e7e9c801..9d17ac411e1107 100644
--- a/packages/mui-material-next/src/Tabs/Tabs.test.js
+++ b/packages/mui-material-next/src/Tabs/Tabs.test.js
@@ -195,9 +195,9 @@ describe('<Tabs />', () => {
     });
 
     describe('indicator', () => {
-      it('should accept a false value', () => {
+      it('should accept a null value', () => {
         const { container } = render(
-          <Tabs value={false}>
+          <Tabs value={null}>
             <Tab />
             <Tab />
           </Tabs>,
@@ -395,7 +395,7 @@ describe('<Tabs />', () => {
     it('when `selectionFollowsFocus` should call if an unselected tab gets focused', () => {
       const handleChange = spy();
       const { getAllByRole } = render(
-        <Tabs value={0} onChange={handleChange} selectionFollowsFocus>
+        <Tabs value={1} onChange={handleChange} selectionFollowsFocus>
           <Tab />
           <Tab />
         </Tabs>,
@@ -406,8 +406,10 @@ describe('<Tabs />', () => {
         lastTab.focus();
       });
 
+      fireEvent.keyDown(lastTab, { key: 'ArrowLeft' });
+
       expect(handleChange.callCount).to.equal(1);
-      expect(handleChange.firstCall.args[1]).to.equal(1);
+      expect(handleChange.firstCall.args[1]).to.equal(0);
     });
 
     it('when `selectionFollowsFocus` should not call if an selected tab gets focused', () => {
@@ -818,10 +820,11 @@ describe('<Tabs />', () => {
     it('should let the selected <Tab /> render the indicator server-side', () => {
       const { container } = renderToString(
         <Tabs value={1}>
-          <Tab />
-          <Tab />
+          <Tab value={0} />
+          <Tab value={1} />
         </Tabs>,
       );
+
       const indicator = container.firstChild.querySelectorAll(`button > .${classes.indicator}`);
       expect(indicator).to.have.lengthOf(1);
     });
@@ -851,7 +854,7 @@ describe('<Tabs />', () => {
                 onChange={handleChange}
                 onKeyDown={handleKeyDown}
                 orientation={orientation}
-                value={1}
+                value={0}
               >
                 <Tab />
                 <Tab />
@@ -1000,7 +1003,7 @@ describe('<Tabs />', () => {
                 onChange={handleChange}
                 onKeyDown={handleKeyDown}
                 orientation={orientation}
-                value={1}
+                value={2}
               >
                 <Tab />
                 <Tab />
@@ -1286,7 +1289,7 @@ describe('<Tabs />', () => {
 
     it('should allow to focus first tab when there are no active tabs', () => {
       const { getAllByRole } = render(
-        <Tabs value={false}>
+        <Tabs value={null}>
           <Tab />
           <Tab />
         </Tabs>,
diff --git a/packages/mui-material-next/src/Tabs/TabsList.js b/packages/mui-material-next/src/Tabs/TabsList.js
index 0964bac4d912a9..ceb35eb1f1a614 100644
--- a/packages/mui-material-next/src/Tabs/TabsList.js
+++ b/packages/mui-material-next/src/Tabs/TabsList.js
@@ -1,7 +1,8 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { styled } from '@mui/material/styles';
-import useTabsList from '@mui/base/useTabsList';
+import useTabsList, { TabsListProvider } from '@mui/base/useTabsList';
+import TabsListContext from './TabsListContext';
 
 const FlexContainer = styled('div', {
   name: 'MuiTabs',
@@ -28,27 +29,32 @@ const FlexContainer = styled('div', {
  * @ignore - internal component.
  */
 const TabsList = React.forwardRef((props, ref) => {
-  const { variant, indicator, textColor, ...other } = props;
+  const { variant, indicator, textColor, children, ...other } = props;
 
-  const { getRootProps, processChildren } = useTabsList({ ...props, ref });
+  const { getRootProps, contextValue } = useTabsList({ ...props, ref });
 
-  const processedChildren = processChildren();
-  const children = React.Children.map(processedChildren, (child) => {
-    return React.cloneElement(child, {
+  const tabsListContextValue = React.useMemo(
+    () => ({
       indicator,
       textColor,
       fullWidth: variant === 'fullWidth',
-    });
-  });
+    }),
+    [indicator, textColor, variant],
+  );
 
   return (
-    <FlexContainer {...other} {...getRootProps()}>
-      {children}
-    </FlexContainer>
+    <TabsListProvider value={contextValue}>
+      <TabsListContext.Provider value={tabsListContextValue}>
+        <FlexContainer {...other} {...getRootProps()}>
+          {children}
+        </FlexContainer>
+      </TabsListContext.Provider>
+    </TabsListProvider>
   );
 });
 
 TabsList.propTypes = {
+  children: PropTypes.node,
   indicator: PropTypes.node,
   textColor: PropTypes.oneOf(['primary', 'secondary']),
   variant: PropTypes.oneOf(['fullWidth', 'scrollable', 'standard']),
diff --git a/packages/mui-material-next/src/Tabs/TabsListContext.js b/packages/mui-material-next/src/Tabs/TabsListContext.js
new file mode 100644
index 00000000000000..8230cb50b80e39
--- /dev/null
+++ b/packages/mui-material-next/src/Tabs/TabsListContext.js
@@ -0,0 +1,5 @@
+import * as React from 'react';
+
+const TabsListContext = React.createContext(null);
+
+export default TabsListContext;
diff --git a/test/karma.tests.js b/test/karma.tests.js
index 36208528532b97..4625479c8dea4c 100644
--- a/test/karma.tests.js
+++ b/test/karma.tests.js
@@ -8,13 +8,6 @@ const materialIntegrationContext = require.context(
 );
 materialIntegrationContext.keys().forEach(materialIntegrationContext);
 
-const baseIntegrationContext = require.context(
-  '../packages/mui-base/test/integration',
-  true,
-  /\.test\.(js|ts|tsx)$/,
-);
-baseIntegrationContext.keys().forEach(baseIntegrationContext);
-
 const materialUnitContext = require.context(
   '../packages/mui-material/src/',
   true,
diff --git a/test/regressions/fixtures/JoyColorInversion/JoyColorInversion.js b/test/regressions/fixtures/JoyColorInversion/JoyColorInversion.js
index b00b0c70ec44ff..0be461f1fd3d8f 100644
--- a/test/regressions/fixtures/JoyColorInversion/JoyColorInversion.js
+++ b/test/regressions/fixtures/JoyColorInversion/JoyColorInversion.js
@@ -104,7 +104,7 @@ export default function JoyColorInversion() {
       {renderComponents(<ListSubheader>Subheader</ListSubheader>)}
       {renderComponents(
         <Select placeholder="Choose one">
-          <Option>Option</Option>
+          <Option value={0}>Option</Option>
         </Select>,
       )}
       {renderComponents(<Radio label="Label" />)}