From f6e03180c82e5387c0605d2e43116ab2f776083f Mon Sep 17 00:00:00 2001
From: Olivier Tassinari <olivier.tassinari@gmail.com>
Date: Thu, 12 Sep 2024 00:59:19 +0200
Subject: [PATCH] [core] Include history from the @mui/base components & hooks
 v4

---
 .../ClickAwayListener.test.js                 | 441 +++++++++++
 .../ClickAwayListener/ClickAwayListener.tsx   | 258 ++++++
 .../mui-base/src/FocusTrap/FocusTrap.test.tsx | 410 ++++++++++
 packages/mui-base/src/FocusTrap/FocusTrap.tsx | 434 ++++++++++
 .../mui-base/src/FocusTrap/FocusTrap.types.ts |  52 ++
 packages/mui-base/src/NoSsr/NoSsr.test.tsx    |  56 ++
 packages/mui-base/src/NoSsr/NoSsr.types.ts    |  19 +
 packages/mui-base/src/Popper/Popper.tsx       | 545 +++++++++++++
 packages/mui-base/src/Popper/Popper.types.ts  | 154 ++++
 packages/mui-base/src/Portal/Portal.test.tsx  | 220 ++++++
 packages/mui-base/src/Portal/Portal.tsx       | 108 +++
 packages/mui-base/src/Portal/Portal.types.ts  |  24 +
 .../TextareaAutosize.test.tsx                 | 465 +++++++++++
 .../src/TextareaAutosize/TextareaAutosize.tsx | 265 +++++++
 .../TextareaAutosize.types.ts                 |  15 +
 .../unstable_useModal/ModalManager.test.ts    | 435 ++++++++++
 .../src/unstable_useModal/ModalManager.ts     | 314 ++++++++
 .../src/unstable_useModal/useModal.ts         | 240 ++++++
 .../src/unstable_useModal/useModal.types.ts   | 123 +++
 .../useAutocomplete/useAutocomplete.spec.ts   | 184 +++++
 .../useAutocomplete/useAutocomplete.test.js   | 398 ++++++++++
 packages/mui-base/src/useBadge/useBadge.ts    |  46 ++
 .../mui-base/src/useBadge/useBadge.types.ts   |  40 +
 packages/mui-base/src/useSlider/useSlider.ts  | 747 ++++++++++++++++++
 .../mui-base/src/useSlider/useSlider.types.ts | 259 ++++++
 .../src/useSnackbar/useSnackbar.test.tsx      |  53 ++
 .../mui-base/src/useSnackbar/useSnackbar.ts   | 164 ++++
 .../src/useSnackbar/useSnackbar.types.ts      |  66 ++
 28 files changed, 6535 insertions(+)
 create mode 100644 packages/mui-base/src/ClickAwayListener/ClickAwayListener.test.js
 create mode 100644 packages/mui-base/src/ClickAwayListener/ClickAwayListener.tsx
 create mode 100644 packages/mui-base/src/FocusTrap/FocusTrap.test.tsx
 create mode 100644 packages/mui-base/src/FocusTrap/FocusTrap.tsx
 create mode 100644 packages/mui-base/src/FocusTrap/FocusTrap.types.ts
 create mode 100644 packages/mui-base/src/NoSsr/NoSsr.test.tsx
 create mode 100644 packages/mui-base/src/NoSsr/NoSsr.types.ts
 create mode 100644 packages/mui-base/src/Popper/Popper.tsx
 create mode 100644 packages/mui-base/src/Popper/Popper.types.ts
 create mode 100644 packages/mui-base/src/Portal/Portal.test.tsx
 create mode 100644 packages/mui-base/src/Portal/Portal.tsx
 create mode 100644 packages/mui-base/src/Portal/Portal.types.ts
 create mode 100644 packages/mui-base/src/TextareaAutosize/TextareaAutosize.test.tsx
 create mode 100644 packages/mui-base/src/TextareaAutosize/TextareaAutosize.tsx
 create mode 100644 packages/mui-base/src/TextareaAutosize/TextareaAutosize.types.ts
 create mode 100644 packages/mui-base/src/unstable_useModal/ModalManager.test.ts
 create mode 100644 packages/mui-base/src/unstable_useModal/ModalManager.ts
 create mode 100644 packages/mui-base/src/unstable_useModal/useModal.ts
 create mode 100644 packages/mui-base/src/unstable_useModal/useModal.types.ts
 create mode 100644 packages/mui-base/src/useAutocomplete/useAutocomplete.spec.ts
 create mode 100644 packages/mui-base/src/useAutocomplete/useAutocomplete.test.js
 create mode 100644 packages/mui-base/src/useBadge/useBadge.ts
 create mode 100644 packages/mui-base/src/useBadge/useBadge.types.ts
 create mode 100644 packages/mui-base/src/useSlider/useSlider.ts
 create mode 100644 packages/mui-base/src/useSlider/useSlider.types.ts
 create mode 100644 packages/mui-base/src/useSnackbar/useSnackbar.test.tsx
 create mode 100644 packages/mui-base/src/useSnackbar/useSnackbar.ts
 create mode 100644 packages/mui-base/src/useSnackbar/useSnackbar.types.ts

diff --git a/packages/mui-base/src/ClickAwayListener/ClickAwayListener.test.js b/packages/mui-base/src/ClickAwayListener/ClickAwayListener.test.js
new file mode 100644
index 00000000000000..1cbd6e67d15e50
--- /dev/null
+++ b/packages/mui-base/src/ClickAwayListener/ClickAwayListener.test.js
@@ -0,0 +1,441 @@
+import * as React from 'react';
+import * as ReactDOM from 'react-dom';
+import { expect } from 'chai';
+import { spy } from 'sinon';
+import {
+  act,
+  createRenderer,
+  fireEvent,
+  fireDiscreteEvent,
+  screen,
+} from '@mui/internal-test-utils';
+import { Portal } from '@mui/base/Portal';
+import { ClickAwayListener } from '@mui/base/ClickAwayListener';
+
+describe('<ClickAwayListener />', () => {
+  const { render: clientRender, clock } = createRenderer({ clock: 'fake' });
+  /**
+   * @type  {typeof plainRender extends (...args: infer T) => any ? T : never} args
+   *
+   * @remarks
+   * This is for all intents and purposes the same as our client render method.
+   * `plainRender` is already wrapped in act().
+   * However, React has a bug that flushes effects in a portal synchronously.
+   * We have to defer the effect manually like `useEffect` would so we have to flush the effect manually instead of relying on `act()`.
+   * React bug: https://github.com/facebook/react/issues/20074
+   */
+  function render(...args) {
+    const result = clientRender(...args);
+    clock.tick(0);
+    return result;
+  }
+
+  it('should render the children', () => {
+    const children = <span />;
+    const { container } = render(
+      <ClickAwayListener onClickAway={() => {}}>{children}</ClickAwayListener>,
+    );
+    expect(container.querySelectorAll('span').length).to.equal(1);
+  });
+
+  describe('prop: onClickAway', () => {
+    it('should be called when clicking away', () => {
+      const handleClickAway = spy();
+      render(
+        <ClickAwayListener onClickAway={handleClickAway}>
+          <span />
+        </ClickAwayListener>,
+      );
+
+      fireEvent.click(document.body);
+      expect(handleClickAway.callCount).to.equal(1);
+      expect(handleClickAway.args[0].length).to.equal(1);
+    });
+
+    it('should not be called when clicking inside', () => {
+      const handleClickAway = spy();
+      const { container } = render(
+        <ClickAwayListener onClickAway={handleClickAway}>
+          <span />
+        </ClickAwayListener>,
+      );
+
+      fireEvent.click(container.querySelector('span'));
+      expect(handleClickAway.callCount).to.equal(0);
+    });
+
+    it('should be called when preventDefault is `true`', () => {
+      const handleClickAway = spy();
+      render(
+        <ClickAwayListener onClickAway={handleClickAway}>
+          <span />
+        </ClickAwayListener>,
+      );
+      const preventDefault = (event) => event.preventDefault();
+      document.body.addEventListener('click', preventDefault);
+
+      fireEvent.click(document.body);
+      expect(handleClickAway.callCount).to.equal(1);
+
+      document.body.removeEventListener('click', preventDefault);
+    });
+
+    it('should not be called when clicking inside a portaled element', () => {
+      const handleClickAway = spy();
+      const { getByText } = render(
+        <ClickAwayListener onClickAway={handleClickAway}>
+          <div>
+            <Portal>
+              <span>Inside a portal</span>
+            </Portal>
+          </div>
+        </ClickAwayListener>,
+      );
+
+      fireEvent.click(getByText('Inside a portal'));
+      expect(handleClickAway.callCount).to.equal(0);
+    });
+
+    it('should be called when clicking inside a portaled element and `disableReactTree` is `true`', () => {
+      const handleClickAway = spy();
+      const { getByText } = render(
+        <ClickAwayListener onClickAway={handleClickAway} disableReactTree>
+          <div>
+            <Portal>
+              <span>Inside a portal</span>
+            </Portal>
+          </div>
+        </ClickAwayListener>,
+      );
+
+      fireEvent.click(getByText('Inside a portal'));
+      expect(handleClickAway.callCount).to.equal(1);
+    });
+
+    it('should not be called even if the event propagation is stopped', () => {
+      const handleClickAway = spy();
+      const { getByText } = render(
+        <ClickAwayListener onClickAway={handleClickAway} disableReactTree>
+          <div>
+            <div
+              onClick={(event) => {
+                event.stopPropagation();
+              }}
+            >
+              Outside a portal
+            </div>
+            <Portal>
+              <span
+                onClick={(event) => {
+                  event.stopPropagation();
+                }}
+              >
+                Stop inside a portal
+              </span>
+            </Portal>
+            <Portal>
+              <span
+                onClick={(event) => {
+                  event.stopPropagation();
+                  event.nativeEvent.stopImmediatePropagation();
+                }}
+              >
+                Stop all inside a portal
+              </span>
+            </Portal>
+          </div>
+        </ClickAwayListener>,
+      );
+
+      fireEvent.click(getByText('Outside a portal'));
+      expect(handleClickAway.callCount).to.equal(0);
+
+      fireEvent.click(getByText('Stop all inside a portal'));
+      expect(handleClickAway.callCount).to.equal(0);
+
+      fireEvent.click(getByText('Stop inside a portal'));
+      // undesired behavior in React 16
+      expect(handleClickAway.callCount).to.equal(React.version.startsWith('16') ? 1 : 0);
+    });
+
+    ['onClick', 'onClickCapture'].forEach((eventListenerName) => {
+      it(`should not be called when ${eventListenerName} mounted the listener`, () => {
+        function Test() {
+          const [open, setOpen] = React.useState(false);
+
+          return (
+            <React.Fragment>
+              <button data-testid="trigger" {...{ [eventListenerName]: () => setOpen(true) }} />
+              {open &&
+                ReactDOM.createPortal(
+                  <ClickAwayListener onClickAway={() => setOpen(false)}>
+                    <div data-testid="child" />
+                  </ClickAwayListener>,
+                  // Needs to be an element between the react root we render into and the element where CAL attaches its native listener (now: `document`).
+                  document.body,
+                )}
+            </React.Fragment>
+          );
+        }
+        render(<Test />);
+
+        fireDiscreteEvent.click(screen.getByTestId('trigger'));
+
+        expect(screen.getByTestId('child')).not.to.equal(null);
+      });
+    });
+
+    it('should be called if an element is interleaved between mousedown and mouseup', () => {
+      /**
+       * @param {Element} element
+       * @returns {Element[]}
+       */
+      function ancestorElements(element) {
+        const ancestors = [];
+        let ancestor = element;
+        while (ancestor !== null) {
+          ancestors.unshift(ancestor);
+          ancestor = ancestor.parentElement;
+        }
+        return ancestors;
+      }
+
+      /**
+       * @param {Element} elementA
+       * @param {Element} elementB
+       * @returns {Element}
+       */
+      function findNearestCommonAncestor(elementA, elementB) {
+        const ancestorsA = ancestorElements(elementA);
+        const ancestorsB = ancestorElements(elementB);
+
+        if (ancestorsA[0] !== ancestorsB[0]) {
+          throw new Error('A and B share no common ancestor');
+        }
+
+        for (let index = 1; index < ancestorsA.length; index += 1) {
+          if (ancestorsA[index] !== ancestorsB[index]) {
+            return ancestorsA[index - 1];
+          }
+        }
+
+        throw new Error('Unreachable reached. This is a bug in findNearestCommonAncestor');
+      }
+
+      const onClickAway = spy();
+      function ClickAwayListenerMouseDownPortal() {
+        const [open, toggleOpen] = React.useReducer((flag) => !flag, false);
+
+        return (
+          <ClickAwayListener onClickAway={onClickAway}>
+            <div data-testid="trigger" onMouseDown={toggleOpen}>
+              {open &&
+                // interleave an element during mousedown so that the following mouseup would not be targetted at the mousedown target.
+                // This results in the click event being targetted at the nearest common ancestor.
+                ReactDOM.createPortal(
+                  <div data-testid="interleaved-element">Portaled Div</div>,
+                  document.body,
+                )}
+            </div>
+          </ClickAwayListener>
+        );
+      }
+      render(<ClickAwayListenerMouseDownPortal />);
+      const mouseDownTarget = screen.getByTestId('trigger');
+
+      fireDiscreteEvent.mouseDown(mouseDownTarget);
+      const mouseUpTarget = screen.getByTestId('interleaved-element');
+      // https://w3c.github.io/uievents/#events-mouseevent-event-order
+      const clickTarget = findNearestCommonAncestor(mouseDownTarget, mouseUpTarget);
+      fireDiscreteEvent.mouseUp(mouseUpTarget);
+      fireDiscreteEvent.click(clickTarget);
+
+      expect(onClickAway.callCount).to.equal(1);
+    });
+  });
+
+  describe('prop: mouseEvent', () => {
+    it('should not call `props.onClickAway` when `props.mouseEvent` is `false`', () => {
+      const handleClickAway = spy();
+      render(
+        <ClickAwayListener onClickAway={handleClickAway} mouseEvent={false}>
+          <span />
+        </ClickAwayListener>,
+      );
+      fireEvent.click(document.body);
+      expect(handleClickAway.callCount).to.equal(0);
+    });
+
+    it('should call `props.onClickAway` when mouse down is triggered', () => {
+      const handleClickAway = spy();
+      render(
+        <ClickAwayListener onClickAway={handleClickAway} mouseEvent="onMouseDown">
+          <span />
+        </ClickAwayListener>,
+      );
+      fireEvent.mouseUp(document.body);
+      expect(handleClickAway.callCount).to.equal(0);
+      fireEvent.mouseDown(document.body);
+      expect(handleClickAway.callCount).to.equal(1);
+      expect(handleClickAway.args[0].length).to.equal(1);
+    });
+
+    it('should call `props.onClickAway` when mouse up is triggered', () => {
+      const handleClickAway = spy();
+      render(
+        <ClickAwayListener onClickAway={handleClickAway} mouseEvent="onMouseUp">
+          <span />
+        </ClickAwayListener>,
+      );
+      fireEvent.mouseDown(document.body);
+      expect(handleClickAway.callCount).to.equal(0);
+      fireEvent.mouseUp(document.body);
+      expect(handleClickAway.callCount).to.equal(1);
+      expect(handleClickAway.args[0].length).to.equal(1);
+    });
+
+    it('should call `props.onClickAway` when pointer down is triggered', () => {
+      const handleClickAway = spy();
+      render(
+        <ClickAwayListener onClickAway={handleClickAway} mouseEvent="onPointerDown">
+          <span />
+        </ClickAwayListener>,
+      );
+      fireEvent.pointerUp(document.body);
+      expect(handleClickAway.callCount).to.equal(0);
+      fireEvent.pointerDown(document.body);
+      expect(handleClickAway.callCount).to.equal(1);
+      expect(handleClickAway.args[0].length).to.equal(1);
+    });
+
+    it('should call `props.onClickAway` when pointer up is triggered', () => {
+      const handleClickAway = spy();
+      render(
+        <ClickAwayListener onClickAway={handleClickAway} mouseEvent="onPointerUp">
+          <span />
+        </ClickAwayListener>,
+      );
+      fireEvent.pointerDown(document.body);
+      expect(handleClickAway.callCount).to.equal(0);
+      fireEvent.pointerUp(document.body);
+      expect(handleClickAway.callCount).to.equal(1);
+      expect(handleClickAway.args[0].length).to.equal(1);
+    });
+  });
+
+  describe('prop: touchEvent', () => {
+    it('should not call `props.onClickAway` when `props.touchEvent` is `false`', () => {
+      const handleClickAway = spy();
+      render(
+        <ClickAwayListener onClickAway={handleClickAway} touchEvent={false}>
+          <span />
+        </ClickAwayListener>,
+      );
+      fireEvent.touchEnd(document.body);
+      expect(handleClickAway.callCount).to.equal(0);
+    });
+
+    it('should call `props.onClickAway` when the appropriate touch event is triggered', () => {
+      const handleClickAway = spy();
+      render(
+        <ClickAwayListener onClickAway={handleClickAway} touchEvent="onTouchStart">
+          <span />
+        </ClickAwayListener>,
+      );
+      fireEvent.touchEnd(document.body);
+      expect(handleClickAway.callCount).to.equal(0);
+      fireEvent.touchStart(document.body);
+      expect(handleClickAway.callCount).to.equal(1);
+      expect(handleClickAway.args[0].length).to.equal(1);
+    });
+
+    it('should ignore `touchend` when preceded by `touchmove` event', () => {
+      const handleClickAway = spy();
+      render(
+        <ClickAwayListener onClickAway={handleClickAway} touchEvent="onTouchEnd">
+          <span />
+        </ClickAwayListener>,
+      );
+
+      fireEvent.touchStart(document.body);
+      fireEvent.touchMove(document.body);
+      fireEvent.touchEnd(document.body);
+      expect(handleClickAway.callCount).to.equal(0);
+
+      fireEvent.touchEnd(document.body);
+      expect(handleClickAway.callCount).to.equal(1);
+      expect(handleClickAway.args[0].length).to.equal(1);
+    });
+  });
+
+  it('should handle null child', () => {
+    const Child = React.forwardRef(() => null);
+    const handleClickAway = spy();
+    render(
+      <ClickAwayListener onClickAway={handleClickAway}>
+        <Child />
+      </ClickAwayListener>,
+    );
+    fireEvent.click(document.body);
+    expect(handleClickAway.callCount).to.equal(0);
+  });
+
+  [
+    ['onClick', false],
+    ['onClick', true],
+    ['onClickCapture', false],
+    ['onClickCapture', true],
+  ].forEach(([eventName, disableReactTree]) => {
+    it(`when 'disableRectTree=${disableReactTree}' ${eventName} triggers onClickAway if an outside target is removed`, function test() {
+      if (!new Event('click').composedPath) {
+        this.skip();
+      }
+
+      const handleClickAway = spy();
+      function Test() {
+        const [buttonShown, hideButton] = React.useReducer(() => false, true);
+
+        return (
+          <React.Fragment>
+            {buttonShown && <button {...{ [eventName]: hideButton }} type="button" />}
+            <ClickAwayListener onClickAway={handleClickAway} disableReactTree={disableReactTree}>
+              <div />
+            </ClickAwayListener>
+          </React.Fragment>
+        );
+      }
+      render(<Test />);
+
+      act(() => {
+        screen.getByRole('button').click();
+      });
+
+      expect(handleClickAway.callCount).to.equal(1);
+    });
+
+    it(`when 'disableRectTree=${disableReactTree}' ${eventName} does not trigger onClickAway if an inside target is removed`, function test() {
+      if (!new Event('click').composedPath) {
+        this.skip();
+      }
+
+      const handleClickAway = spy();
+
+      function Test() {
+        const [buttonShown, hideButton] = React.useReducer(() => false, true);
+
+        return (
+          <ClickAwayListener onClickAway={handleClickAway} disableReactTree={disableReactTree}>
+            <div>{buttonShown && <button {...{ [eventName]: hideButton }} type="button" />}</div>
+          </ClickAwayListener>
+        );
+      }
+      render(<Test />);
+
+      act(() => {
+        screen.getByRole('button').click();
+      });
+
+      expect(handleClickAway.callCount).to.equal(0);
+    });
+  });
+});
diff --git a/packages/mui-base/src/ClickAwayListener/ClickAwayListener.tsx b/packages/mui-base/src/ClickAwayListener/ClickAwayListener.tsx
new file mode 100644
index 00000000000000..a7c7c49148d2d5
--- /dev/null
+++ b/packages/mui-base/src/ClickAwayListener/ClickAwayListener.tsx
@@ -0,0 +1,258 @@
+'use client';
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import {
+  elementAcceptingRef,
+  exactProp,
+  unstable_ownerDocument as ownerDocument,
+  unstable_useForkRef as useForkRef,
+  unstable_useEventCallback as useEventCallback,
+  unstable_getReactNodeRef as getReactNodeRef,
+} from '@mui/utils';
+
+// TODO: return `EventHandlerName extends `on${infer EventName}` ? Lowercase<EventName> : never` once generatePropTypes runs with TS 4.1
+function mapEventPropToEvent(
+  eventProp: ClickAwayMouseEventHandler | ClickAwayTouchEventHandler,
+): 'click' | 'mousedown' | 'mouseup' | 'touchstart' | 'touchend' | 'pointerdown' | 'pointerup' {
+  return eventProp.substring(2).toLowerCase() as any;
+}
+
+function clickedRootScrollbar(event: MouseEvent, doc: Document) {
+  return (
+    doc.documentElement.clientWidth < event.clientX ||
+    doc.documentElement.clientHeight < event.clientY
+  );
+}
+
+type ClickAwayMouseEventHandler =
+  | 'onClick'
+  | 'onMouseDown'
+  | 'onMouseUp'
+  | 'onPointerDown'
+  | 'onPointerUp';
+type ClickAwayTouchEventHandler = 'onTouchStart' | 'onTouchEnd';
+
+export interface ClickAwayListenerProps {
+  /**
+   * The wrapped element.
+   */
+  children: React.ReactElement<any>;
+  /**
+   * If `true`, the React tree is ignored and only the DOM tree is considered.
+   * This prop changes how portaled elements are handled.
+   * @default false
+   */
+  disableReactTree?: boolean;
+  /**
+   * The mouse event to listen to. You can disable the listener by providing `false`.
+   * @default 'onClick'
+   */
+  mouseEvent?: ClickAwayMouseEventHandler | false;
+  /**
+   * Callback fired when a "click away" event is detected.
+   */
+  onClickAway: (event: MouseEvent | TouchEvent) => void;
+  /**
+   * The touch event to listen to. You can disable the listener by providing `false`.
+   * @default 'onTouchEnd'
+   */
+  touchEvent?: ClickAwayTouchEventHandler | false;
+}
+
+/**
+ * Listen for click events that occur somewhere in the document, outside of the element itself.
+ * For instance, if you need to hide a menu when people click anywhere else on your page.
+ *
+ * Demos:
+ *
+ * - [Click-Away Listener](https://mui.com/base-ui/react-click-away-listener/)
+ *
+ * API:
+ *
+ * - [ClickAwayListener API](https://mui.com/base-ui/react-click-away-listener/components-api/#click-away-listener)
+ */
+function ClickAwayListener(props: ClickAwayListenerProps): React.JSX.Element {
+  const {
+    children,
+    disableReactTree = false,
+    mouseEvent = 'onClick',
+    onClickAway,
+    touchEvent = 'onTouchEnd',
+  } = props;
+  const movedRef = React.useRef(false);
+  const nodeRef = React.useRef<Element>(null);
+  const activatedRef = React.useRef(false);
+  const syntheticEventRef = React.useRef(false);
+
+  React.useEffect(() => {
+    // Ensure that this component is not "activated" synchronously.
+    // https://github.com/facebook/react/issues/20074
+    setTimeout(() => {
+      activatedRef.current = true;
+    }, 0);
+    return () => {
+      activatedRef.current = false;
+    };
+  }, []);
+
+  const handleRef = useForkRef(getReactNodeRef(children), nodeRef);
+
+  // The handler doesn't take event.defaultPrevented into account:
+  //
+  // event.preventDefault() is meant to stop default behaviors like
+  // clicking a checkbox to check it, hitting a button to submit a form,
+  // and hitting left arrow to move the cursor in a text input etc.
+  // Only special HTML elements have these default behaviors.
+  const handleClickAway = useEventCallback((event: MouseEvent | TouchEvent) => {
+    // Given developers can stop the propagation of the synthetic event,
+    // we can only be confident with a positive value.
+    const insideReactTree = syntheticEventRef.current;
+    syntheticEventRef.current = false;
+
+    const doc = ownerDocument(nodeRef.current);
+
+    // 1. IE11 support, which trigger the handleClickAway even after the unbind
+    // 2. The child might render null.
+    // 3. Behave like a blur listener.
+    if (
+      !activatedRef.current ||
+      !nodeRef.current ||
+      ('clientX' in event && clickedRootScrollbar(event, doc))
+    ) {
+      return;
+    }
+
+    // Do not act if user performed touchmove
+    if (movedRef.current) {
+      movedRef.current = false;
+      return;
+    }
+
+    let insideDOM;
+
+    // If not enough, can use https://github.com/DieterHolvoet/event-propagation-path/blob/master/propagationPath.js
+    if (event.composedPath) {
+      insideDOM = event.composedPath().indexOf(nodeRef.current) > -1;
+    } else {
+      insideDOM =
+        !doc.documentElement.contains(
+          // @ts-expect-error returns `false` as intended when not dispatched from a Node
+          event.target,
+        ) ||
+        nodeRef.current.contains(
+          // @ts-expect-error returns `false` as intended when not dispatched from a Node
+          event.target,
+        );
+    }
+
+    if (!insideDOM && (disableReactTree || !insideReactTree)) {
+      onClickAway(event);
+    }
+  });
+
+  // Keep track of mouse/touch events that bubbled up through the portal.
+  const createHandleSynthetic = (handlerName: string) => (event: React.SyntheticEvent) => {
+    syntheticEventRef.current = true;
+
+    const childrenPropsHandler = children.props[handlerName];
+    if (childrenPropsHandler) {
+      childrenPropsHandler(event);
+    }
+  };
+
+  const childrenProps: { ref: React.Ref<Element> } & Pick<
+    React.DOMAttributes<Element>,
+    ClickAwayMouseEventHandler | ClickAwayTouchEventHandler
+  > = { ref: handleRef };
+
+  if (touchEvent !== false) {
+    childrenProps[touchEvent] = createHandleSynthetic(touchEvent);
+  }
+
+  React.useEffect(() => {
+    if (touchEvent !== false) {
+      const mappedTouchEvent = mapEventPropToEvent(touchEvent);
+      const doc = ownerDocument(nodeRef.current);
+
+      const handleTouchMove = () => {
+        movedRef.current = true;
+      };
+
+      doc.addEventListener(mappedTouchEvent, handleClickAway);
+      doc.addEventListener('touchmove', handleTouchMove);
+
+      return () => {
+        doc.removeEventListener(mappedTouchEvent, handleClickAway);
+        doc.removeEventListener('touchmove', handleTouchMove);
+      };
+    }
+
+    return undefined;
+  }, [handleClickAway, touchEvent]);
+
+  if (mouseEvent !== false) {
+    childrenProps[mouseEvent] = createHandleSynthetic(mouseEvent);
+  }
+
+  React.useEffect(() => {
+    if (mouseEvent !== false) {
+      const mappedMouseEvent = mapEventPropToEvent(mouseEvent);
+      const doc = ownerDocument(nodeRef.current);
+
+      doc.addEventListener(mappedMouseEvent, handleClickAway);
+
+      return () => {
+        doc.removeEventListener(mappedMouseEvent, handleClickAway);
+      };
+    }
+
+    return undefined;
+  }, [handleClickAway, mouseEvent]);
+
+  return <React.Fragment>{React.cloneElement(children, childrenProps)}</React.Fragment>;
+}
+
+ClickAwayListener.propTypes /* remove-proptypes */ = {
+  // ┌────────────────────────────── Warning ──────────────────────────────┐
+  // │ These PropTypes are generated from the TypeScript type definitions. │
+  // │ To update them, edit the TypeScript types and run `pnpm proptypes`. │
+  // └─────────────────────────────────────────────────────────────────────┘
+  /**
+   * The wrapped element.
+   */
+  children: elementAcceptingRef.isRequired,
+  /**
+   * If `true`, the React tree is ignored and only the DOM tree is considered.
+   * This prop changes how portaled elements are handled.
+   * @default false
+   */
+  disableReactTree: PropTypes.bool,
+  /**
+   * The mouse event to listen to. You can disable the listener by providing `false`.
+   * @default 'onClick'
+   */
+  mouseEvent: PropTypes.oneOf([
+    'onClick',
+    'onMouseDown',
+    'onMouseUp',
+    'onPointerDown',
+    'onPointerUp',
+    false,
+  ]),
+  /**
+   * Callback fired when a "click away" event is detected.
+   */
+  onClickAway: PropTypes.func.isRequired,
+  /**
+   * The touch event to listen to. You can disable the listener by providing `false`.
+   * @default 'onTouchEnd'
+   */
+  touchEvent: PropTypes.oneOf(['onTouchEnd', 'onTouchStart', false]),
+} as any;
+
+if (process.env.NODE_ENV !== 'production') {
+  // eslint-disable-next-line
+  (ClickAwayListener as any)['propTypes' + ''] = exactProp(ClickAwayListener.propTypes);
+}
+
+export { ClickAwayListener };
diff --git a/packages/mui-base/src/FocusTrap/FocusTrap.test.tsx b/packages/mui-base/src/FocusTrap/FocusTrap.test.tsx
new file mode 100644
index 00000000000000..1cca94309e0e8d
--- /dev/null
+++ b/packages/mui-base/src/FocusTrap/FocusTrap.test.tsx
@@ -0,0 +1,410 @@
+import * as React from 'react';
+import * as ReactDOM from 'react-dom';
+import { expect } from 'chai';
+import { act, createRenderer, screen } from '@mui/internal-test-utils';
+import { FocusTrap } from '@mui/base/FocusTrap';
+import { Portal } from '@mui/base/Portal';
+
+interface GenericProps {
+  [index: string]: any;
+}
+
+describe('<FocusTrap />', () => {
+  const { clock, render } = createRenderer();
+
+  let initialFocus: HTMLElement | null = null;
+
+  beforeEach(() => {
+    initialFocus = document.createElement('button');
+    initialFocus.tabIndex = 0;
+    document.body.appendChild(initialFocus);
+    act(() => {
+      initialFocus!.focus();
+    });
+  });
+
+  afterEach(() => {
+    document.body.removeChild(initialFocus!);
+  });
+
+  it('should return focus to the root', () => {
+    const { getByTestId } = render(
+      <FocusTrap open>
+        <div tabIndex={-1} data-testid="root">
+          <input autoFocus data-testid="auto-focus" />
+        </div>
+      </FocusTrap>,
+      // TODO: https://github.com/reactwg/react-18/discussions/18#discussioncomment-893076
+      { strictEffects: false },
+    );
+
+    expect(getByTestId('auto-focus')).toHaveFocus();
+
+    act(() => {
+      initialFocus!.focus();
+    });
+    expect(getByTestId('root')).toHaveFocus();
+  });
+
+  it('should not return focus to the children when disableEnforceFocus is true', () => {
+    const { getByTestId } = render(
+      <FocusTrap open disableEnforceFocus>
+        <div tabIndex={-1}>
+          <input autoFocus data-testid="auto-focus" />
+        </div>
+      </FocusTrap>,
+      // TODO: https://github.com/reactwg/react-18/discussions/18#discussioncomment-893076s
+      { strictEffects: false },
+    );
+
+    expect(getByTestId('auto-focus')).toHaveFocus();
+
+    act(() => {
+      initialFocus!.focus();
+    });
+
+    expect(initialFocus).toHaveFocus();
+  });
+
+  it('should focus first focusable child in portal', () => {
+    const { getByTestId } = render(
+      <FocusTrap open>
+        <div tabIndex={-1}>
+          <Portal>
+            <input autoFocus data-testid="auto-focus" />
+          </Portal>
+        </div>
+      </FocusTrap>,
+    );
+
+    expect(getByTestId('auto-focus')).toHaveFocus();
+  });
+
+  it('should warn if the root content is not focusable', () => {
+    const UnfocusableDialog = React.forwardRef<HTMLDivElement>((_, ref) => <div ref={ref} />);
+
+    expect(() => {
+      render(
+        <FocusTrap open>
+          <UnfocusableDialog />
+        </FocusTrap>,
+      );
+    }).toErrorDev('MUI: The modal content node does not accept focus');
+  });
+
+  it('should not attempt to focus nonexistent children', () => {
+    const EmptyDialog = React.forwardRef(() => null);
+
+    render(
+      <FocusTrap open>
+        <EmptyDialog />
+      </FocusTrap>,
+    );
+  });
+
+  it('should focus rootRef if no tabbable children are rendered', () => {
+    render(
+      <FocusTrap open>
+        <div tabIndex={-1} data-testid="root">
+          <div>Title</div>
+        </div>
+      </FocusTrap>,
+    );
+    expect(screen.getByTestId('root')).toHaveFocus();
+  });
+
+  it('does not steal focus from a portaled element if any prop but open changes', () => {
+    function Test(props: GenericProps) {
+      return (
+        <FocusTrap disableAutoFocus open {...props}>
+          <div data-testid="focus-root" tabIndex={-1}>
+            {ReactDOM.createPortal(<input data-testid="portal-input" />, document.body)}
+          </div>
+        </FocusTrap>
+      );
+    }
+    const { setProps } = render(<Test />);
+    const portaledTextbox = screen.getByTestId('portal-input');
+    act(() => {
+      portaledTextbox.focus();
+    });
+
+    // sanity check
+    expect(portaledTextbox).toHaveFocus();
+
+    setProps({ disableAutoFocus: false });
+
+    expect(portaledTextbox).toHaveFocus();
+
+    setProps({ disableEnforceFocus: true });
+
+    expect(portaledTextbox).toHaveFocus();
+
+    setProps({ disableRestoreFocus: true });
+
+    expect(portaledTextbox).toHaveFocus();
+
+    // same behavior, just referential equality changes
+    setProps({ isEnabled: () => true });
+
+    expect(portaledTextbox).toHaveFocus();
+  });
+
+  it('undesired: lazy root does not get autofocus', () => {
+    let mountDeferredComponent: React.DispatchWithoutAction;
+    const DeferredComponent = React.forwardRef<HTMLDivElement>(
+      function DeferredComponent(props, ref) {
+        const [mounted, setMounted] = React.useReducer(() => true, false);
+
+        mountDeferredComponent = setMounted;
+
+        if (mounted) {
+          return <div ref={ref} {...props} />;
+        }
+        return null;
+      },
+    );
+    render(
+      <FocusTrap open>
+        <DeferredComponent data-testid="deferred-component" />
+      </FocusTrap>,
+    );
+
+    expect(initialFocus).toHaveFocus();
+
+    act(() => {
+      mountDeferredComponent();
+    });
+
+    // desired
+    // expect(screen.getByTestId('deferred-component')).toHaveFocus();
+    // undesired
+    expect(initialFocus).toHaveFocus();
+  });
+
+  it('does not bounce focus around due to sync focus-restore + focus-contain', () => {
+    const eventLog: string[] = [];
+    function Test(props: GenericProps) {
+      return (
+        <div onBlur={() => eventLog.push('blur')}>
+          <FocusTrap open {...props}>
+            <div data-testid="root" tabIndex={-1}>
+              <input data-testid="focus-input" />
+            </div>
+          </FocusTrap>
+        </div>
+      );
+    }
+    const { setProps } = render(<Test />, {
+      // Strict Effects interferes with the premise of the test.
+      // It would trigger a focus restore (i.e. a blur event)
+      strictEffects: false,
+    });
+
+    // same behavior, just referential equality changes
+    setProps({ isEnabled: () => true });
+
+    expect(screen.getByTestId('root')).toHaveFocus();
+    expect(eventLog).to.deep.equal([]);
+  });
+
+  it('does not focus if isEnabled returns false', () => {
+    function Test(props: GenericProps) {
+      return (
+        <div>
+          <input />
+          <FocusTrap open {...props}>
+            <div tabIndex={-1} data-testid="root" />
+          </FocusTrap>
+        </div>
+      );
+    }
+    const { setProps, getByRole } = render(<Test />);
+    expect(screen.getByTestId('root')).toHaveFocus();
+
+    act(() => {
+      getByRole('textbox').focus();
+    });
+    expect(getByRole('textbox')).not.toHaveFocus();
+
+    setProps({ isEnabled: () => false });
+
+    act(() => {
+      getByRole('textbox').focus();
+    });
+    expect(getByRole('textbox')).toHaveFocus();
+  });
+
+  it('restores focus when closed', () => {
+    function Test(props: GenericProps) {
+      return (
+        <FocusTrap open {...props}>
+          <div data-testid="focus-root" tabIndex={-1}>
+            <input />
+          </div>
+        </FocusTrap>
+      );
+    }
+    const { setProps } = render(<Test />);
+
+    setProps({ open: false });
+
+    expect(initialFocus).toHaveFocus();
+  });
+
+  it('undesired: enabling restore-focus logic when closing has no effect', () => {
+    function Test(props: GenericProps) {
+      return (
+        <FocusTrap open disableRestoreFocus {...props}>
+          <div data-testid="root" tabIndex={-1}>
+            <input data-testid="focus-input" />
+          </div>
+        </FocusTrap>
+      );
+    }
+    const { setProps } = render(<Test />);
+
+    setProps({ open: false, disableRestoreFocus: false });
+
+    // undesired: should be expect(initialFocus).toHaveFocus();
+    expect(screen.getByTestId('root')).toHaveFocus();
+  });
+
+  it('undesired: setting `disableRestoreFocus` to false before closing has no effect', () => {
+    function Test(props: GenericProps) {
+      return (
+        <FocusTrap open disableRestoreFocus {...props}>
+          <div data-testid="root" tabIndex={-1}>
+            <input data-testid="focus-input" />
+          </div>
+        </FocusTrap>
+      );
+    }
+    const { setProps } = render(<Test />);
+
+    setProps({ disableRestoreFocus: false });
+    setProps({ open: false });
+
+    // undesired: should be expect(initialFocus).toHaveFocus();
+    expect(screen.getByTestId('root')).toHaveFocus();
+  });
+
+  describe('interval', () => {
+    clock.withFakeTimers();
+
+    it('contains the focus if the active element is removed', () => {
+      function WithRemovableElement({ hideButton = false }) {
+        return (
+          <FocusTrap open>
+            <div tabIndex={-1} data-testid="root">
+              {!hideButton && (
+                <button type="button" data-testid="hide-button">
+                  I am going to disappear
+                </button>
+              )}
+            </div>
+          </FocusTrap>
+        );
+      }
+
+      const { setProps } = render(<WithRemovableElement />);
+
+      expect(screen.getByTestId('root')).toHaveFocus();
+      act(() => {
+        screen.getByTestId('hide-button').focus();
+      });
+      expect(screen.getByTestId('hide-button')).toHaveFocus();
+
+      setProps({ hideButton: true });
+      expect(screen.getByTestId('root')).not.toHaveFocus();
+      clock.tick(500); // wait for the interval check to kick in.
+      expect(screen.getByTestId('root')).toHaveFocus();
+    });
+
+    describe('prop: disableAutoFocus', () => {
+      it('should not trap', () => {
+        const { getByRole } = render(
+          <div>
+            <input />
+            <FocusTrap open disableAutoFocus>
+              <div tabIndex={-1} data-testid="root" />
+            </FocusTrap>
+          </div>,
+        );
+
+        clock.tick(500); // trigger an interval call
+        expect(initialFocus).toHaveFocus();
+
+        act(() => {
+          getByRole('textbox').focus();
+        });
+        expect(getByRole('textbox')).toHaveFocus();
+      });
+
+      it('should trap once the focus moves inside', () => {
+        render(
+          <div>
+            <input data-testid="outside-input" />
+            <FocusTrap open disableAutoFocus>
+              <div tabIndex={-1} data-testid="root">
+                <button type="button" data-testid="focus-input" />
+              </div>
+            </FocusTrap>
+          </div>,
+        );
+
+        expect(initialFocus).toHaveFocus();
+
+        act(() => {
+          screen.getByTestId('outside-input').focus();
+        });
+        expect(screen.getByTestId('outside-input')).toHaveFocus();
+
+        // the trap activates
+        act(() => {
+          screen.getByTestId('focus-input').focus();
+        });
+        expect(screen.getByTestId('focus-input')).toHaveFocus();
+
+        // the trap prevent to escape
+        act(() => {
+          screen.getByTestId('outside-input').focus();
+        });
+        expect(screen.getByTestId('root')).toHaveFocus();
+      });
+
+      it('should restore the focus', () => {
+        function Test(props: GenericProps) {
+          return (
+            <div>
+              <input data-testid="outside-input" />
+              <FocusTrap open disableAutoFocus {...props}>
+                <div tabIndex={-1} data-testid="root">
+                  <input data-testid="focus-input" />
+                </div>
+              </FocusTrap>
+            </div>
+          );
+        }
+
+        const { setProps } = render(<Test />);
+
+        // set the expected focus restore location
+        act(() => {
+          screen.getByTestId('outside-input').focus();
+        });
+        expect(screen.getByTestId('outside-input')).toHaveFocus();
+
+        // the trap activates
+        act(() => {
+          screen.getByTestId('root').focus();
+        });
+        expect(screen.getByTestId('root')).toHaveFocus();
+
+        // restore the focus to the first element before triggering the trap
+        setProps({ open: false });
+        expect(screen.getByTestId('outside-input')).toHaveFocus();
+      });
+    });
+  });
+});
diff --git a/packages/mui-base/src/FocusTrap/FocusTrap.tsx b/packages/mui-base/src/FocusTrap/FocusTrap.tsx
new file mode 100644
index 00000000000000..d17c562746eeed
--- /dev/null
+++ b/packages/mui-base/src/FocusTrap/FocusTrap.tsx
@@ -0,0 +1,434 @@
+'use client';
+/* eslint-disable consistent-return, jsx-a11y/no-noninteractive-tabindex */
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import {
+  exactProp,
+  elementAcceptingRef,
+  unstable_useForkRef as useForkRef,
+  unstable_ownerDocument as ownerDocument,
+  unstable_getReactNodeRef as getReactNodeRef,
+} from '@mui/utils';
+import { FocusTrapProps } from './FocusTrap.types';
+
+// Inspired by https://github.com/focus-trap/tabbable
+const candidatesSelector = [
+  'input',
+  'select',
+  'textarea',
+  'a[href]',
+  'button',
+  '[tabindex]',
+  'audio[controls]',
+  'video[controls]',
+  '[contenteditable]:not([contenteditable="false"])',
+].join(',');
+
+interface OrderedTabNode {
+  documentOrder: number;
+  tabIndex: number;
+  node: HTMLElement;
+}
+
+function getTabIndex(node: HTMLElement): number {
+  const tabindexAttr = parseInt(node.getAttribute('tabindex') || '', 10);
+
+  if (!Number.isNaN(tabindexAttr)) {
+    return tabindexAttr;
+  }
+
+  // Browsers do not return `tabIndex` correctly for contentEditable nodes;
+  // https://bugs.chromium.org/p/chromium/issues/detail?id=661108&q=contenteditable%20tabindex&can=2
+  // so if they don't have a tabindex attribute specifically set, assume it's 0.
+  // in Chrome, <details/>, <audio controls/> and <video controls/> elements get a default
+  //  `tabIndex` of -1 when the 'tabindex' attribute isn't specified in the DOM,
+  //  yet they are still part of the regular tab order; in FF, they get a default
+  //  `tabIndex` of 0; since Chrome still puts those elements in the regular tab
+  //  order, consider their tab index to be 0.
+  if (
+    node.contentEditable === 'true' ||
+    ((node.nodeName === 'AUDIO' || node.nodeName === 'VIDEO' || node.nodeName === 'DETAILS') &&
+      node.getAttribute('tabindex') === null)
+  ) {
+    return 0;
+  }
+
+  return node.tabIndex;
+}
+
+function isNonTabbableRadio(node: HTMLInputElement): boolean {
+  if (node.tagName !== 'INPUT' || node.type !== 'radio') {
+    return false;
+  }
+
+  if (!node.name) {
+    return false;
+  }
+
+  const getRadio = (selector: string) =>
+    node.ownerDocument.querySelector(`input[type="radio"]${selector}`);
+
+  let roving = getRadio(`[name="${node.name}"]:checked`);
+
+  if (!roving) {
+    roving = getRadio(`[name="${node.name}"]`);
+  }
+
+  return roving !== node;
+}
+
+function isNodeMatchingSelectorFocusable(node: HTMLInputElement): boolean {
+  if (
+    node.disabled ||
+    (node.tagName === 'INPUT' && node.type === 'hidden') ||
+    isNonTabbableRadio(node)
+  ) {
+    return false;
+  }
+  return true;
+}
+
+function defaultGetTabbable(root: HTMLElement): HTMLElement[] {
+  const regularTabNodes: HTMLElement[] = [];
+  const orderedTabNodes: OrderedTabNode[] = [];
+
+  Array.from(root.querySelectorAll(candidatesSelector)).forEach((node, i) => {
+    const nodeTabIndex = getTabIndex(node as HTMLElement);
+
+    if (nodeTabIndex === -1 || !isNodeMatchingSelectorFocusable(node as HTMLInputElement)) {
+      return;
+    }
+
+    if (nodeTabIndex === 0) {
+      regularTabNodes.push(node as HTMLElement);
+    } else {
+      orderedTabNodes.push({
+        documentOrder: i,
+        tabIndex: nodeTabIndex,
+        node: node as HTMLElement,
+      });
+    }
+  });
+
+  return orderedTabNodes
+    .sort((a, b) =>
+      a.tabIndex === b.tabIndex ? a.documentOrder - b.documentOrder : a.tabIndex - b.tabIndex,
+    )
+    .map((a) => a.node)
+    .concat(regularTabNodes);
+}
+
+function defaultIsEnabled(): boolean {
+  return true;
+}
+
+/**
+ * Utility component that locks focus inside the component.
+ *
+ * Demos:
+ *
+ * - [Focus Trap](https://mui.com/base-ui/react-focus-trap/)
+ *
+ * API:
+ *
+ * - [FocusTrap API](https://mui.com/base-ui/react-focus-trap/components-api/#focus-trap)
+ */
+function FocusTrap(props: FocusTrapProps): React.JSX.Element {
+  const {
+    children,
+    disableAutoFocus = false,
+    disableEnforceFocus = false,
+    disableRestoreFocus = false,
+    getTabbable = defaultGetTabbable,
+    isEnabled = defaultIsEnabled,
+    open,
+  } = props;
+  const ignoreNextEnforceFocus = React.useRef(false);
+  const sentinelStart = React.useRef<HTMLDivElement>(null);
+  const sentinelEnd = React.useRef<HTMLDivElement>(null);
+  const nodeToRestore = React.useRef<EventTarget | null>(null);
+  const reactFocusEventTarget = React.useRef<EventTarget | null>(null);
+  // This variable is useful when disableAutoFocus is true.
+  // It waits for the active element to move into the component to activate.
+  const activated = React.useRef(false);
+
+  const rootRef = React.useRef<HTMLElement>(null);
+  const handleRef = useForkRef(getReactNodeRef(children), rootRef);
+  const lastKeydown = React.useRef<KeyboardEvent | null>(null);
+
+  React.useEffect(() => {
+    // We might render an empty child.
+    if (!open || !rootRef.current) {
+      return;
+    }
+
+    activated.current = !disableAutoFocus;
+  }, [disableAutoFocus, open]);
+
+  React.useEffect(() => {
+    // We might render an empty child.
+    if (!open || !rootRef.current) {
+      return;
+    }
+
+    const doc = ownerDocument(rootRef.current);
+
+    if (!rootRef.current.contains(doc.activeElement)) {
+      if (!rootRef.current.hasAttribute('tabIndex')) {
+        if (process.env.NODE_ENV !== 'production') {
+          console.error(
+            [
+              'MUI: The modal content node does not accept focus.',
+              'For the benefit of assistive technologies, ' +
+                'the tabIndex of the node is being set to "-1".',
+            ].join('\n'),
+          );
+        }
+        rootRef.current.setAttribute('tabIndex', '-1');
+      }
+
+      if (activated.current) {
+        rootRef.current.focus();
+      }
+    }
+
+    return () => {
+      // restoreLastFocus()
+      if (!disableRestoreFocus) {
+        // In IE11 it is possible for document.activeElement to be null resulting
+        // in nodeToRestore.current being null.
+        // Not all elements in IE11 have a focus method.
+        // Once IE11 support is dropped the focus() call can be unconditional.
+        if (nodeToRestore.current && (nodeToRestore.current as HTMLElement).focus) {
+          ignoreNextEnforceFocus.current = true;
+          (nodeToRestore.current as HTMLElement).focus();
+        }
+
+        nodeToRestore.current = null;
+      }
+    };
+    // Missing `disableRestoreFocus` which is fine.
+    // We don't support changing that prop on an open FocusTrap
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [open]);
+
+  React.useEffect(() => {
+    // We might render an empty child.
+    if (!open || !rootRef.current) {
+      return;
+    }
+
+    const doc = ownerDocument(rootRef.current);
+
+    const loopFocus = (nativeEvent: KeyboardEvent) => {
+      lastKeydown.current = nativeEvent;
+
+      if (disableEnforceFocus || !isEnabled() || nativeEvent.key !== 'Tab') {
+        return;
+      }
+
+      // Make sure the next tab starts from the right place.
+      // doc.activeElement refers to the origin.
+      if (doc.activeElement === rootRef.current && nativeEvent.shiftKey) {
+        // We need to ignore the next contain as
+        // it will try to move the focus back to the rootRef element.
+        ignoreNextEnforceFocus.current = true;
+        if (sentinelEnd.current) {
+          sentinelEnd.current.focus();
+        }
+      }
+    };
+
+    const contain = () => {
+      const rootElement = rootRef.current;
+
+      // Cleanup functions are executed lazily in React 17.
+      // Contain can be called between the component being unmounted and its cleanup function being run.
+      if (rootElement === null) {
+        return;
+      }
+
+      if (!doc.hasFocus() || !isEnabled() || ignoreNextEnforceFocus.current) {
+        ignoreNextEnforceFocus.current = false;
+        return;
+      }
+
+      // The focus is already inside
+      if (rootElement.contains(doc.activeElement)) {
+        return;
+      }
+
+      // The disableEnforceFocus is set and the focus is outside of the focus trap (and sentinel nodes)
+      if (
+        disableEnforceFocus &&
+        doc.activeElement !== sentinelStart.current &&
+        doc.activeElement !== sentinelEnd.current
+      ) {
+        return;
+      }
+
+      // if the focus event is not coming from inside the children's react tree, reset the refs
+      if (doc.activeElement !== reactFocusEventTarget.current) {
+        reactFocusEventTarget.current = null;
+      } else if (reactFocusEventTarget.current !== null) {
+        return;
+      }
+
+      if (!activated.current) {
+        return;
+      }
+
+      let tabbable: ReadonlyArray<string> | HTMLElement[] = [];
+      if (
+        doc.activeElement === sentinelStart.current ||
+        doc.activeElement === sentinelEnd.current
+      ) {
+        tabbable = getTabbable(rootRef.current!);
+      }
+
+      // one of the sentinel nodes was focused, so move the focus
+      // to the first/last tabbable element inside the focus trap
+      if (tabbable.length > 0) {
+        const isShiftTab = Boolean(
+          lastKeydown.current?.shiftKey && lastKeydown.current?.key === 'Tab',
+        );
+
+        const focusNext = tabbable[0];
+        const focusPrevious = tabbable[tabbable.length - 1];
+
+        if (typeof focusNext !== 'string' && typeof focusPrevious !== 'string') {
+          if (isShiftTab) {
+            focusPrevious.focus();
+          } else {
+            focusNext.focus();
+          }
+        }
+        // no tabbable elements in the trap focus or the focus was outside of the focus trap
+      } else {
+        rootElement.focus();
+      }
+    };
+
+    doc.addEventListener('focusin', contain);
+    doc.addEventListener('keydown', loopFocus, true);
+
+    // With Edge, Safari and Firefox, no focus related events are fired when the focused area stops being a focused area.
+    // for example https://bugzilla.mozilla.org/show_bug.cgi?id=559561.
+    // Instead, we can look if the active element was restored on the BODY element.
+    //
+    // The whatwg spec defines how the browser should behave but does not explicitly mention any events:
+    // https://html.spec.whatwg.org/multipage/interaction.html#focus-fixup-rule.
+    const interval = setInterval(() => {
+      if (doc.activeElement && doc.activeElement.tagName === 'BODY') {
+        contain();
+      }
+    }, 50);
+
+    return () => {
+      clearInterval(interval);
+
+      doc.removeEventListener('focusin', contain);
+      doc.removeEventListener('keydown', loopFocus, true);
+    };
+  }, [disableAutoFocus, disableEnforceFocus, disableRestoreFocus, isEnabled, open, getTabbable]);
+
+  const onFocus = (event: FocusEvent) => {
+    if (nodeToRestore.current === null) {
+      nodeToRestore.current = event.relatedTarget;
+    }
+    activated.current = true;
+    reactFocusEventTarget.current = event.target;
+
+    const childrenPropsHandler = children.props.onFocus;
+    if (childrenPropsHandler) {
+      childrenPropsHandler(event);
+    }
+  };
+
+  const handleFocusSentinel = (event: React.FocusEvent<HTMLDivElement>) => {
+    if (nodeToRestore.current === null) {
+      nodeToRestore.current = event.relatedTarget;
+    }
+    activated.current = true;
+  };
+
+  return (
+    <React.Fragment>
+      <div
+        tabIndex={open ? 0 : -1}
+        onFocus={handleFocusSentinel}
+        ref={sentinelStart}
+        data-testid="sentinelStart"
+      />
+      {React.cloneElement(children, { ref: handleRef, onFocus })}
+      <div
+        tabIndex={open ? 0 : -1}
+        onFocus={handleFocusSentinel}
+        ref={sentinelEnd}
+        data-testid="sentinelEnd"
+      />
+    </React.Fragment>
+  );
+}
+
+FocusTrap.propTypes /* remove-proptypes */ = {
+  // ┌────────────────────────────── Warning ──────────────────────────────┐
+  // │ These PropTypes are generated from the TypeScript type definitions. │
+  // │ To update them, edit the TypeScript types and run `pnpm proptypes`. │
+  // └─────────────────────────────────────────────────────────────────────┘
+  /**
+   * A single child content element.
+   */
+  children: elementAcceptingRef,
+  /**
+   * If `true`, the focus trap will not automatically shift focus to itself when it opens, and
+   * replace it to the last focused element when it closes.
+   * This also works correctly with any focus trap children that have the `disableAutoFocus` prop.
+   *
+   * Generally this should never be set to `true` as it makes the focus trap less
+   * accessible to assistive technologies, like screen readers.
+   * @default false
+   */
+  disableAutoFocus: PropTypes.bool,
+  /**
+   * If `true`, the focus trap will not prevent focus from leaving the focus trap while open.
+   *
+   * Generally this should never be set to `true` as it makes the focus trap less
+   * accessible to assistive technologies, like screen readers.
+   * @default false
+   */
+  disableEnforceFocus: PropTypes.bool,
+  /**
+   * If `true`, the focus trap will not restore focus to previously focused element once
+   * focus trap is hidden or unmounted.
+   * @default false
+   */
+  disableRestoreFocus: PropTypes.bool,
+  /**
+   * Returns an array of ordered tabbable nodes (i.e. in tab order) within the root.
+   * For instance, you can provide the "tabbable" npm dependency.
+   * @param {HTMLElement} root
+   */
+  getTabbable: PropTypes.func,
+  /**
+   * This prop extends the `open` prop.
+   * It allows to toggle the open state without having to wait for a rerender when changing the `open` prop.
+   * This prop should be memoized.
+   * It can be used to support multiple focus trap mounted at the same time.
+   * @default function defaultIsEnabled(): boolean {
+   *   return true;
+   * }
+   */
+  isEnabled: PropTypes.func,
+  /**
+   * If `true`, focus is locked.
+   */
+  open: PropTypes.bool.isRequired,
+} as any;
+
+if (process.env.NODE_ENV !== 'production') {
+  // eslint-disable-next-line
+  (FocusTrap as any)['propTypes' + ''] = exactProp(FocusTrap.propTypes);
+}
+
+export { FocusTrap };
diff --git a/packages/mui-base/src/FocusTrap/FocusTrap.types.ts b/packages/mui-base/src/FocusTrap/FocusTrap.types.ts
new file mode 100644
index 00000000000000..be9cf5ee1e93c3
--- /dev/null
+++ b/packages/mui-base/src/FocusTrap/FocusTrap.types.ts
@@ -0,0 +1,52 @@
+import * as React from 'react';
+
+export interface FocusTrapProps {
+  /**
+   * If `true`, focus is locked.
+   */
+  open: boolean;
+  /**
+   * Returns an array of ordered tabbable nodes (i.e. in tab order) within the root.
+   * For instance, you can provide the "tabbable" npm dependency.
+   * @param {HTMLElement} root
+   */
+  getTabbable?: (root: HTMLElement) => ReadonlyArray<string>;
+  /**
+   * This prop extends the `open` prop.
+   * It allows to toggle the open state without having to wait for a rerender when changing the `open` prop.
+   * This prop should be memoized.
+   * It can be used to support multiple focus trap mounted at the same time.
+   * @default function defaultIsEnabled(): boolean {
+   *   return true;
+   * }
+   */
+  isEnabled?: () => boolean;
+  /**
+   * A single child content element.
+   */
+  children: React.ReactElement<any>;
+  /**
+   * If `true`, the focus trap will not automatically shift focus to itself when it opens, and
+   * replace it to the last focused element when it closes.
+   * This also works correctly with any focus trap children that have the `disableAutoFocus` prop.
+   *
+   * Generally this should never be set to `true` as it makes the focus trap less
+   * accessible to assistive technologies, like screen readers.
+   * @default false
+   */
+  disableAutoFocus?: boolean;
+  /**
+   * If `true`, the focus trap will not prevent focus from leaving the focus trap while open.
+   *
+   * Generally this should never be set to `true` as it makes the focus trap less
+   * accessible to assistive technologies, like screen readers.
+   * @default false
+   */
+  disableEnforceFocus?: boolean;
+  /**
+   * If `true`, the focus trap will not restore focus to previously focused element once
+   * focus trap is hidden or unmounted.
+   * @default false
+   */
+  disableRestoreFocus?: boolean;
+}
diff --git a/packages/mui-base/src/NoSsr/NoSsr.test.tsx b/packages/mui-base/src/NoSsr/NoSsr.test.tsx
new file mode 100644
index 00000000000000..3fa928a48b4be0
--- /dev/null
+++ b/packages/mui-base/src/NoSsr/NoSsr.test.tsx
@@ -0,0 +1,56 @@
+import * as React from 'react';
+import { expect } from 'chai';
+import { createRenderer } from '@mui/internal-test-utils';
+import { NoSsr } from '@mui/base/NoSsr';
+
+describe('<NoSsr />', () => {
+  const { render, renderToString } = createRenderer();
+
+  describe('server-side rendering', () => {
+    it('should not render the children as the width is unknown', () => {
+      const { container } = renderToString(
+        <NoSsr>
+          <span>Hello</span>
+        </NoSsr>,
+      );
+
+      expect(container.firstChild).to.equal(null);
+    });
+  });
+
+  describe('mounted', () => {
+    it('should render the children', () => {
+      render(
+        <NoSsr>
+          <span id="client-only" />
+        </NoSsr>,
+      );
+      expect(document.querySelector('#client-only')).not.to.equal(null);
+    });
+  });
+
+  describe('prop: fallback', () => {
+    it('should render the fallback', () => {
+      const { container } = renderToString(
+        <div>
+          <NoSsr fallback="fallback">
+            <span>Hello</span>
+          </NoSsr>
+        </div>,
+      );
+
+      expect(container.firstChild).to.have.text('fallback');
+    });
+  });
+
+  describe('prop: defer', () => {
+    it('should defer the rendering', () => {
+      render(
+        <NoSsr defer>
+          <span id="client-only">Hello</span>
+        </NoSsr>,
+      );
+      expect(document.querySelector('#client-only')).not.to.equal(null);
+    });
+  });
+});
diff --git a/packages/mui-base/src/NoSsr/NoSsr.types.ts b/packages/mui-base/src/NoSsr/NoSsr.types.ts
new file mode 100644
index 00000000000000..1efd5c8771a875
--- /dev/null
+++ b/packages/mui-base/src/NoSsr/NoSsr.types.ts
@@ -0,0 +1,19 @@
+import * as React from 'react';
+
+export interface NoSsrProps {
+  /**
+   * You can wrap a node.
+   */
+  children?: React.ReactNode;
+  /**
+   * If `true`, the component will not only prevent server-side rendering.
+   * It will also defer the rendering of the children into a different screen frame.
+   * @default false
+   */
+  defer?: boolean;
+  /**
+   * The fallback content to display.
+   * @default null
+   */
+  fallback?: React.ReactNode;
+}
diff --git a/packages/mui-base/src/Popper/Popper.tsx b/packages/mui-base/src/Popper/Popper.tsx
new file mode 100644
index 00000000000000..b42dfcb37e1266
--- /dev/null
+++ b/packages/mui-base/src/Popper/Popper.tsx
@@ -0,0 +1,545 @@
+'use client';
+import * as React from 'react';
+import {
+  chainPropTypes,
+  HTMLElementType,
+  refType,
+  unstable_ownerDocument as ownerDocument,
+  unstable_useEnhancedEffect as useEnhancedEffect,
+  unstable_useForkRef as useForkRef,
+} from '@mui/utils';
+import { createPopper, Instance, Modifier, Placement, State, VirtualElement } from '@popperjs/core';
+import PropTypes from 'prop-types';
+import { unstable_composeClasses as composeClasses } from '../composeClasses';
+import { Portal } from '../Portal';
+import { getPopperUtilityClass } from './popperClasses';
+import { PolymorphicComponent, useSlotProps, WithOptionalOwnerState } from '../utils';
+import {
+  PopperPlacementType,
+  PopperTooltipProps,
+  PopperTooltipTypeMap,
+  PopperChildrenProps,
+  PopperProps,
+  PopperRootSlotProps,
+  PopperTransitionProps,
+  PopperTypeMap,
+} from './Popper.types';
+import { useClassNamesOverride } from '../utils/ClassNameConfigurator';
+
+function flipPlacement(placement?: PopperPlacementType, direction?: 'ltr' | 'rtl') {
+  if (direction === 'ltr') {
+    return placement;
+  }
+
+  switch (placement) {
+    case 'bottom-end':
+      return 'bottom-start';
+    case 'bottom-start':
+      return 'bottom-end';
+    case 'top-end':
+      return 'top-start';
+    case 'top-start':
+      return 'top-end';
+    default:
+      return placement;
+  }
+}
+
+function resolveAnchorEl(
+  anchorEl:
+    | VirtualElement
+    | (() => VirtualElement)
+    | HTMLElement
+    | (() => HTMLElement)
+    | null
+    | undefined,
+): HTMLElement | VirtualElement | null | undefined {
+  return typeof anchorEl === 'function' ? anchorEl() : anchorEl;
+}
+
+function isHTMLElement(element: HTMLElement | VirtualElement): element is HTMLElement {
+  return (element as HTMLElement).nodeType !== undefined;
+}
+
+function isVirtualElement(element: HTMLElement | VirtualElement): element is VirtualElement {
+  return !isHTMLElement(element);
+}
+
+const useUtilityClasses = () => {
+  const slots = {
+    root: ['root'],
+  };
+
+  return composeClasses(slots, useClassNamesOverride(getPopperUtilityClass));
+};
+
+const defaultPopperOptions = {};
+
+const PopperTooltip = React.forwardRef(function PopperTooltip<
+  RootComponentType extends React.ElementType,
+>(props: PopperTooltipProps<RootComponentType>, forwardedRef: React.ForwardedRef<HTMLDivElement>) {
+  const {
+    anchorEl,
+    children,
+    direction,
+    disablePortal,
+    modifiers,
+    open,
+    placement: initialPlacement,
+    popperOptions,
+    popperRef: popperRefProp,
+    slotProps = {},
+    slots = {},
+    TransitionProps,
+    // @ts-ignore internal logic
+    ownerState: ownerStateProp, // prevent from spreading to DOM, it can come from the parent component e.g. Select.
+    ...other
+  } = props;
+
+  const tooltipRef = React.useRef<HTMLElement>(null);
+  const ownRef = useForkRef(tooltipRef, forwardedRef);
+
+  const popperRef = React.useRef<Instance | null>(null);
+  const handlePopperRef = useForkRef(popperRef, popperRefProp);
+  const handlePopperRefRef = React.useRef(handlePopperRef);
+  useEnhancedEffect(() => {
+    handlePopperRefRef.current = handlePopperRef;
+  }, [handlePopperRef]);
+  React.useImperativeHandle(popperRefProp, () => popperRef.current!, []);
+
+  const rtlPlacement = flipPlacement(initialPlacement, direction);
+  /**
+   * placement initialized from prop but can change during lifetime if modifiers.flip.
+   * modifiers.flip is essentially a flip for controlled/uncontrolled behavior
+   */
+  const [placement, setPlacement] = React.useState<Placement | undefined>(rtlPlacement);
+  const [resolvedAnchorElement, setResolvedAnchorElement] = React.useState<
+    HTMLElement | VirtualElement | null | undefined
+  >(resolveAnchorEl(anchorEl));
+
+  React.useEffect(() => {
+    if (popperRef.current) {
+      popperRef.current.forceUpdate();
+    }
+  });
+
+  React.useEffect(() => {
+    if (anchorEl) {
+      setResolvedAnchorElement(resolveAnchorEl(anchorEl));
+    }
+  }, [anchorEl]);
+
+  useEnhancedEffect(() => {
+    if (!resolvedAnchorElement || !open) {
+      return undefined;
+    }
+
+    const handlePopperUpdate = (data: State) => {
+      setPlacement(data.placement);
+    };
+
+    if (process.env.NODE_ENV !== 'production') {
+      if (
+        resolvedAnchorElement &&
+        isHTMLElement(resolvedAnchorElement) &&
+        resolvedAnchorElement.nodeType === 1
+      ) {
+        const box = resolvedAnchorElement.getBoundingClientRect();
+
+        if (
+          process.env.NODE_ENV !== 'test' &&
+          box.top === 0 &&
+          box.left === 0 &&
+          box.right === 0 &&
+          box.bottom === 0
+        ) {
+          console.warn(
+            [
+              'MUI: The `anchorEl` prop provided to the component is invalid.',
+              'The anchor element should be part of the document layout.',
+              "Make sure the element is present in the document or that it's not display none.",
+            ].join('\n'),
+          );
+        }
+      }
+    }
+
+    let popperModifiers: Partial<Modifier<any, any>>[] = [
+      {
+        name: 'preventOverflow',
+        options: {
+          altBoundary: disablePortal,
+        },
+      },
+      {
+        name: 'flip',
+        options: {
+          altBoundary: disablePortal,
+        },
+      },
+      {
+        name: 'onUpdate',
+        enabled: true,
+        phase: 'afterWrite',
+        fn: ({ state }) => {
+          handlePopperUpdate(state);
+        },
+      },
+    ];
+
+    if (modifiers != null) {
+      popperModifiers = popperModifiers.concat(modifiers);
+    }
+    if (popperOptions && popperOptions.modifiers != null) {
+      popperModifiers = popperModifiers.concat(popperOptions.modifiers);
+    }
+
+    const popper = createPopper(resolvedAnchorElement, tooltipRef.current!, {
+      placement: rtlPlacement,
+      ...popperOptions,
+      modifiers: popperModifiers,
+    });
+
+    handlePopperRefRef.current!(popper);
+
+    return () => {
+      popper.destroy();
+      handlePopperRefRef.current!(null);
+    };
+  }, [resolvedAnchorElement, disablePortal, modifiers, open, popperOptions, rtlPlacement]);
+
+  const childProps: PopperChildrenProps = { placement: placement! };
+
+  if (TransitionProps !== null) {
+    childProps.TransitionProps = TransitionProps;
+  }
+
+  const classes = useUtilityClasses();
+  const Root = slots.root ?? 'div';
+
+  const rootProps: WithOptionalOwnerState<PopperRootSlotProps> = useSlotProps({
+    elementType: Root,
+    externalSlotProps: slotProps.root,
+    externalForwardedProps: other,
+    additionalProps: {
+      role: 'tooltip',
+      ref: ownRef,
+    },
+    ownerState: props,
+    className: classes.root,
+  });
+
+  return (
+    <Root {...rootProps}>{typeof children === 'function' ? children(childProps) : children}</Root>
+  );
+}) as PolymorphicComponent<PopperTooltipTypeMap>;
+
+/**
+ * Poppers rely on the 3rd party library [Popper.js](https://popper.js.org/docs/v2/) for positioning.
+ *
+ * Demos:
+ *
+ * - [Popper](https://mui.com/base-ui/react-popper/)
+ *
+ * API:
+ *
+ * - [Popper API](https://mui.com/base-ui/react-popper/components-api/#popper)
+ */
+const Popper = React.forwardRef(function Popper<RootComponentType extends React.ElementType>(
+  props: PopperProps<RootComponentType>,
+  forwardedRef: React.ForwardedRef<HTMLDivElement>,
+) {
+  const {
+    anchorEl,
+    children,
+    container: containerProp,
+    direction = 'ltr',
+    disablePortal = false,
+    keepMounted = false,
+    modifiers,
+    open,
+    placement = 'bottom',
+    popperOptions = defaultPopperOptions,
+    popperRef,
+    style,
+    transition = false,
+    slotProps = {},
+    slots = {},
+    ...other
+  } = props;
+
+  const [exited, setExited] = React.useState(true);
+
+  const handleEnter = () => {
+    setExited(false);
+  };
+
+  const handleExited = () => {
+    setExited(true);
+  };
+
+  if (!keepMounted && !open && (!transition || exited)) {
+    return null;
+  }
+
+  // If the container prop is provided, use that
+  // If the anchorEl prop is provided, use its parent body element as the container
+  // If neither are provided let the Modal take care of choosing the container
+  let container;
+  if (containerProp) {
+    container = containerProp;
+  } else if (anchorEl) {
+    const resolvedAnchorEl = resolveAnchorEl(anchorEl);
+    container =
+      resolvedAnchorEl && isHTMLElement(resolvedAnchorEl)
+        ? ownerDocument(resolvedAnchorEl).body
+        : ownerDocument(null).body;
+  }
+  const display = !open && keepMounted && (!transition || exited) ? 'none' : undefined;
+  const transitionProps: PopperTransitionProps | undefined = transition
+    ? {
+        in: open,
+        onEnter: handleEnter,
+        onExited: handleExited,
+      }
+    : undefined;
+
+  return (
+    <Portal disablePortal={disablePortal} container={container}>
+      <PopperTooltip
+        anchorEl={anchorEl}
+        direction={direction}
+        disablePortal={disablePortal}
+        modifiers={modifiers}
+        ref={forwardedRef}
+        open={transition ? !exited : open}
+        placement={placement}
+        popperOptions={popperOptions}
+        popperRef={popperRef}
+        slotProps={slotProps}
+        slots={slots}
+        {...other}
+        style={{
+          // Prevents scroll issue, waiting for Popper.js to add this style once initiated.
+          position: 'fixed',
+          // Fix Popper.js display issue
+          top: 0,
+          left: 0,
+          display,
+          ...style,
+        }}
+        TransitionProps={transitionProps}
+      >
+        {children}
+      </PopperTooltip>
+    </Portal>
+  );
+}) as PolymorphicComponent<PopperTypeMap>;
+
+Popper.propTypes /* remove-proptypes */ = {
+  // ┌────────────────────────────── Warning ──────────────────────────────┐
+  // │ These PropTypes are generated from the TypeScript type definitions. │
+  // │ To update them, edit the TypeScript types and run `pnpm proptypes`. │
+  // └─────────────────────────────────────────────────────────────────────┘
+  /**
+   * An HTML element, [virtualElement](https://popper.js.org/docs/v2/virtual-elements/),
+   * or a function that returns either.
+   * It's used to set the position of the popper.
+   * The return value will passed as the reference object of the Popper instance.
+   */
+  anchorEl: chainPropTypes(
+    PropTypes.oneOfType([HTMLElementType, PropTypes.object, PropTypes.func]),
+    (props) => {
+      if (props.open) {
+        const resolvedAnchorEl = resolveAnchorEl(props.anchorEl);
+
+        if (
+          resolvedAnchorEl &&
+          isHTMLElement(resolvedAnchorEl) &&
+          resolvedAnchorEl.nodeType === 1
+        ) {
+          const box = resolvedAnchorEl.getBoundingClientRect();
+
+          if (
+            process.env.NODE_ENV !== 'test' &&
+            box.top === 0 &&
+            box.left === 0 &&
+            box.right === 0 &&
+            box.bottom === 0
+          ) {
+            return new Error(
+              [
+                'MUI: The `anchorEl` prop provided to the component is invalid.',
+                'The anchor element should be part of the document layout.',
+                "Make sure the element is present in the document or that it's not display none.",
+              ].join('\n'),
+            );
+          }
+        } else if (
+          !resolvedAnchorEl ||
+          typeof resolvedAnchorEl.getBoundingClientRect !== 'function' ||
+          (isVirtualElement(resolvedAnchorEl) &&
+            resolvedAnchorEl.contextElement != null &&
+            resolvedAnchorEl.contextElement.nodeType !== 1)
+        ) {
+          return new Error(
+            [
+              'MUI: The `anchorEl` prop provided to the component is invalid.',
+              'It should be an HTML element instance or a virtualElement ',
+              '(https://popper.js.org/docs/v2/virtual-elements/).',
+            ].join('\n'),
+          );
+        }
+      }
+
+      return null;
+    },
+  ),
+  /**
+   * Popper render function or node.
+   */
+  children: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([
+    PropTypes.node,
+    PropTypes.func,
+  ]),
+  /**
+   * An HTML element or function that returns one.
+   * The `container` will have the portal children appended to it.
+   *
+   * You can also provide a callback, which is called in a React layout effect.
+   * This lets you set the container from a ref, and also makes server-side rendering possible.
+   *
+   * By default, it uses the body of the top-level document object,
+   * so it's simply `document.body` most of the time.
+   */
+  container: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([
+    HTMLElementType,
+    PropTypes.func,
+  ]),
+  /**
+   * Direction of the text.
+   * @default 'ltr'
+   */
+  direction: PropTypes.oneOf(['ltr', 'rtl']),
+  /**
+   * The `children` will be under the DOM hierarchy of the parent component.
+   * @default false
+   */
+  disablePortal: PropTypes.bool,
+  /**
+   * Always keep the children in the DOM.
+   * This prop can be useful in SEO situation or
+   * when you want to maximize the responsiveness of the Popper.
+   * @default false
+   */
+  keepMounted: PropTypes.bool,
+  /**
+   * Popper.js is based on a "plugin-like" architecture,
+   * most of its features are fully encapsulated "modifiers".
+   *
+   * A modifier is a function that is called each time Popper.js needs to
+   * compute the position of the popper.
+   * For this reason, modifiers should be very performant to avoid bottlenecks.
+   * To learn how to create a modifier, [read the modifiers documentation](https://popper.js.org/docs/v2/modifiers/).
+   */
+  modifiers: PropTypes.arrayOf(
+    PropTypes.shape({
+      data: PropTypes.object,
+      effect: PropTypes.func,
+      enabled: PropTypes.bool,
+      fn: PropTypes.func,
+      name: PropTypes.any,
+      options: PropTypes.object,
+      phase: PropTypes.oneOf([
+        'afterMain',
+        'afterRead',
+        'afterWrite',
+        'beforeMain',
+        'beforeRead',
+        'beforeWrite',
+        'main',
+        'read',
+        'write',
+      ]),
+      requires: PropTypes.arrayOf(PropTypes.string),
+      requiresIfExists: PropTypes.arrayOf(PropTypes.string),
+    }),
+  ),
+  /**
+   * If `true`, the component is shown.
+   */
+  open: PropTypes.bool.isRequired,
+  /**
+   * Popper placement.
+   * @default 'bottom'
+   */
+  placement: PropTypes.oneOf([
+    'auto-end',
+    'auto-start',
+    'auto',
+    'bottom-end',
+    'bottom-start',
+    'bottom',
+    'left-end',
+    'left-start',
+    'left',
+    'right-end',
+    'right-start',
+    'right',
+    'top-end',
+    'top-start',
+    'top',
+  ]),
+  /**
+   * Options provided to the [`Popper.js`](https://popper.js.org/docs/v2/constructors/#options) instance.
+   * @default {}
+   */
+  popperOptions: PropTypes.shape({
+    modifiers: PropTypes.array,
+    onFirstUpdate: PropTypes.func,
+    placement: PropTypes.oneOf([
+      'auto-end',
+      'auto-start',
+      'auto',
+      'bottom-end',
+      'bottom-start',
+      'bottom',
+      'left-end',
+      'left-start',
+      'left',
+      'right-end',
+      'right-start',
+      'right',
+      'top-end',
+      'top-start',
+      'top',
+    ]),
+    strategy: PropTypes.oneOf(['absolute', 'fixed']),
+  }),
+  /**
+   * A ref that points to the used popper instance.
+   */
+  popperRef: refType,
+  /**
+   * The props used for each slot inside the Popper.
+   * @default {}
+   */
+  slotProps: PropTypes.shape({
+    root: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+  }),
+  /**
+   * The components used for each slot inside the Popper.
+   * Either a string to use a HTML element or a component.
+   * @default {}
+   */
+  slots: PropTypes.shape({
+    root: PropTypes.elementType,
+  }),
+  /**
+   * Help supporting a react-transition-group/Transition component.
+   * @default false
+   */
+  transition: PropTypes.bool,
+} as any;
+
+export { Popper };
diff --git a/packages/mui-base/src/Popper/Popper.types.ts b/packages/mui-base/src/Popper/Popper.types.ts
new file mode 100644
index 00000000000000..abeac3ec83c587
--- /dev/null
+++ b/packages/mui-base/src/Popper/Popper.types.ts
@@ -0,0 +1,154 @@
+import * as React from 'react';
+import { Instance, Options, OptionsGeneric, VirtualElement } from '@popperjs/core';
+import { PortalProps } from '../Portal';
+import { PolymorphicProps, SlotComponentProps } from '../utils';
+
+export type PopperPlacementType = Options['placement'];
+
+export interface PopperRootSlotPropsOverrides {}
+
+export interface PopperTransitionProps {
+  in: boolean;
+  onEnter: () => void;
+  onExited: () => void;
+}
+
+export interface PopperChildrenProps {
+  placement: PopperPlacementType;
+  TransitionProps?: PopperTransitionProps;
+}
+
+export interface PopperOwnProps {
+  /**
+   * An HTML element, [virtualElement](https://popper.js.org/docs/v2/virtual-elements/),
+   * or a function that returns either.
+   * It's used to set the position of the popper.
+   * The return value will passed as the reference object of the Popper instance.
+   */
+  anchorEl?: null | VirtualElement | HTMLElement | (() => HTMLElement) | (() => VirtualElement);
+  /**
+   * Popper render function or node.
+   */
+  children?: React.ReactNode | ((props: PopperChildrenProps) => React.ReactNode);
+  /**
+   * An HTML element or function that returns one.
+   * The `container` will have the portal children appended to it.
+   *
+   * You can also provide a callback, which is called in a React layout effect.
+   * This lets you set the container from a ref, and also makes server-side rendering possible.
+   *
+   * By default, it uses the body of the top-level document object,
+   * so it's simply `document.body` most of the time.
+   */
+  container?: PortalProps['container'];
+  /**
+   * Direction of the text.
+   * @default 'ltr'
+   */
+  direction?: 'ltr' | 'rtl';
+  /**
+   * The `children` will be under the DOM hierarchy of the parent component.
+   * @default false
+   */
+  disablePortal?: PortalProps['disablePortal'];
+  /**
+   * Always keep the children in the DOM.
+   * This prop can be useful in SEO situation or
+   * when you want to maximize the responsiveness of the Popper.
+   * @default false
+   */
+  keepMounted?: boolean;
+  /**
+   * Popper.js is based on a "plugin-like" architecture,
+   * most of its features are fully encapsulated "modifiers".
+   *
+   * A modifier is a function that is called each time Popper.js needs to
+   * compute the position of the popper.
+   * For this reason, modifiers should be very performant to avoid bottlenecks.
+   * To learn how to create a modifier, [read the modifiers documentation](https://popper.js.org/docs/v2/modifiers/).
+   */
+  modifiers?: Options['modifiers'];
+  /**
+   * If `true`, the component is shown.
+   */
+  open: boolean;
+  /**
+   * Popper placement.
+   * @default 'bottom'
+   */
+  placement?: PopperPlacementType;
+  /**
+   * Options provided to the [`Popper.js`](https://popper.js.org/docs/v2/constructors/#options) instance.
+   * @default {}
+   */
+  popperOptions?: Partial<OptionsGeneric<any>>;
+  /**
+   * A ref that points to the used popper instance.
+   */
+  popperRef?: React.Ref<Instance>;
+  /**
+   * The props used for each slot inside the Popper.
+   * @default {}
+   */
+  slotProps?: {
+    root?: SlotComponentProps<'div', PopperRootSlotPropsOverrides, PopperOwnerState>;
+  };
+  /**
+   * The components used for each slot inside the Popper.
+   * Either a string to use a HTML element or a component.
+   * @default {}
+   */
+  slots?: PopperSlots;
+  /**
+   * Help supporting a react-transition-group/Transition component.
+   * @default false
+   */
+  transition?: boolean;
+}
+
+export interface PopperSlots {
+  /**
+   * The component that renders the root.
+   * @default 'div'
+   */
+  root?: React.ElementType;
+}
+
+export type PopperOwnerState = PopperOwnProps;
+
+export interface PopperTypeMap<
+  AdditionalProps = {},
+  RootComponentType extends React.ElementType = 'div',
+> {
+  props: PopperOwnProps & AdditionalProps;
+  defaultComponent: RootComponentType;
+}
+
+export type PopperProps<
+  RootComponentType extends React.ElementType = PopperTypeMap['defaultComponent'],
+> = PolymorphicProps<PopperTypeMap<{}, RootComponentType>, RootComponentType>;
+
+export type PopperTooltipOwnProps = Omit<
+  PopperOwnProps,
+  'container' | 'keepMounted' | 'transition'
+> & {
+  TransitionProps?: PopperTransitionProps;
+};
+
+export interface PopperTooltipTypeMap<
+  AdditionalProps = {},
+  RootComponentType extends React.ElementType = 'div',
+> {
+  props: PopperTooltipOwnProps & AdditionalProps;
+  defaultComponent: RootComponentType;
+}
+
+export type PopperTooltipProps<
+  RootComponentType extends React.ElementType = PopperTooltipTypeMap['defaultComponent'],
+> = PolymorphicProps<PopperTooltipTypeMap<{}, RootComponentType>, RootComponentType>;
+
+export interface PopperRootSlotProps {
+  className?: string;
+  ref: React.Ref<any>;
+  ownerState: PopperOwnerState;
+}
diff --git a/packages/mui-base/src/Portal/Portal.test.tsx b/packages/mui-base/src/Portal/Portal.test.tsx
new file mode 100644
index 00000000000000..4b9b0a6f9a6b3f
--- /dev/null
+++ b/packages/mui-base/src/Portal/Portal.test.tsx
@@ -0,0 +1,220 @@
+import * as React from 'react';
+import { expect } from 'chai';
+import { spy } from 'sinon';
+import { createRenderer } from '@mui/internal-test-utils';
+import { Portal, PortalProps } from '@mui/base/Portal';
+
+describe('<Portal />', () => {
+  const { render, renderToString } = createRenderer();
+
+  describe('server-side', () => {
+    before(function beforeHook() {
+      // Only run the test on node.
+      if (!/jsdom/.test(window.navigator.userAgent)) {
+        this.skip();
+      }
+    });
+
+    it('render nothing on the server', () => {
+      const { container } = renderToString(
+        <Portal>
+          <div>Bar</div>
+        </Portal>,
+      );
+      expect(container.firstChild).to.equal(null);
+    });
+  });
+
+  describe('ref', () => {
+    it('should have access to the mountNode when disabledPortal={false}', () => {
+      const refSpy = spy();
+      const { unmount } = render(
+        <Portal ref={refSpy}>
+          <h1>Foo</h1>
+        </Portal>,
+      );
+      expect(refSpy.args).to.deep.equal([[document.body]]);
+      unmount();
+      expect(refSpy.args).to.deep.equal([[document.body], [null]]);
+    });
+
+    it('should have access to the mountNode when disabledPortal={true}', () => {
+      const refSpy = spy();
+      const { unmount } = render(
+        <Portal disablePortal ref={refSpy}>
+          <h1 className="woofPortal">Foo</h1>
+        </Portal>,
+      );
+      const mountNode = document.querySelector('.woofPortal');
+      expect(refSpy.args).to.deep.equal([[mountNode]]);
+      unmount();
+      expect(refSpy.args).to.deep.equal([[mountNode], [null]]);
+    });
+
+    it('should have access to the mountNode when switching disabledPortal', () => {
+      const refSpy = spy();
+      const { setProps, unmount } = render(
+        <Portal disablePortal ref={refSpy}>
+          <h1 className="woofPortal">Foo</h1>
+        </Portal>,
+      );
+      const mountNode = document.querySelector('.woofPortal');
+      expect(refSpy.args).to.deep.equal([[mountNode]]);
+      setProps({
+        disablePortal: false,
+        ref: refSpy,
+      });
+      expect(refSpy.args).to.deep.equal([[mountNode], [null], [document.body]]);
+      unmount();
+      expect(refSpy.args).to.deep.equal([[mountNode], [null], [document.body], [null]]);
+    });
+  });
+
+  it('should render in a different node', () => {
+    render(
+      <div id="test1">
+        <h1 className="woofPortal1">Foo</h1>
+        <Portal>
+          <h1 className="woofPortal2">Foo</h1>
+        </Portal>
+      </div>,
+    );
+    const rootElement = document.querySelector<HTMLDivElement>('#test1')!;
+    expect(rootElement.contains(document.querySelector('.woofPortal1'))).to.equal(true);
+    expect(rootElement.contains(document.querySelector('.woofPortal2'))).to.equal(false);
+  });
+
+  it('should unmount when parent unmounts', () => {
+    function Child() {
+      const containerRef = React.useRef<HTMLDivElement>(null);
+      return (
+        <div>
+          <div ref={containerRef} />
+          <Portal container={() => containerRef.current}>
+            <div id="test1" />
+          </Portal>
+        </div>
+      );
+    }
+
+    function Parent(props: { show?: boolean }) {
+      const { show = true } = props;
+      return <div>{show ? <Child /> : null}</div>;
+    }
+
+    const { setProps } = render(<Parent />);
+    expect(document.querySelectorAll('#test1').length).to.equal(1);
+    setProps({ show: false });
+    expect(document.querySelectorAll('#test1').length).to.equal(0);
+  });
+
+  it('should render overlay into container (document)', () => {
+    render(
+      <Portal>
+        <div className="test2" />
+        <div className="test2" />
+      </Portal>,
+    );
+    expect(document.querySelectorAll('.test2').length).to.equal(2);
+  });
+
+  it('should render overlay into container (DOMNode)', () => {
+    const container = document.createElement('div');
+    render(
+      <Portal container={container}>
+        <div id="test2" />
+      </Portal>,
+    );
+    expect(container.querySelectorAll('#test2').length).to.equal(1);
+  });
+
+  it('should change container on prop change', () => {
+    type ContainerProps = {
+      disablePortal?: boolean;
+      containerElement?: boolean;
+    };
+    function ContainerTest(props: ContainerProps) {
+      const { containerElement = false, disablePortal = true } = props;
+      const containerRef = React.useRef<HTMLElement>(null);
+      const container = React.useCallback(
+        () => (containerElement ? containerRef.current : null),
+        [containerElement],
+      );
+
+      return (
+        <span>
+          <strong ref={containerRef} />
+          <Portal disablePortal={disablePortal} container={container}>
+            <div id="test3" />
+          </Portal>
+        </span>
+      );
+    }
+
+    const { setProps } = render(<ContainerTest />);
+
+    expect(document.querySelector('#test3')?.parentElement?.nodeName).to.equal('SPAN');
+    setProps({
+      containerElement: true,
+      disablePortal: true,
+    });
+    expect(document.querySelector('#test3')?.parentElement?.nodeName).to.equal('SPAN');
+    setProps({
+      containerElement: true,
+      disablePortal: false,
+    });
+    expect(document.querySelector('#test3')?.parentElement?.nodeName).to.equal('STRONG');
+    setProps({
+      containerElement: false,
+      disablePortal: false,
+    });
+    expect(document.querySelector('#test3')?.parentElement?.nodeName).to.equal('BODY');
+  });
+
+  it('should call ref after child effect', () => {
+    const callOrder: Array<string> = [];
+    const handleRef = (node: Element | null) => {
+      if (node) {
+        callOrder.push('ref');
+      }
+    };
+    const updateFunction = () => {
+      callOrder.push('effect');
+    };
+
+    function Test(props: PortalProps) {
+      const { container } = props;
+      const containerRef = React.useRef<PortalProps['container']>(null);
+
+      React.useEffect(() => {
+        if (containerRef.current !== container) {
+          updateFunction();
+        }
+        containerRef.current = container;
+      }, [container]);
+
+      return (
+        <Portal ref={handleRef} container={container}>
+          <div />
+        </Portal>
+      );
+    }
+
+    const { setProps } = render(<Test container={document.createElement('div')} />);
+
+    setProps({ container: null });
+    setProps({ container: document.createElement('div') });
+    setProps({ container: null });
+
+    expect(callOrder).to.deep.equal([
+      'effect',
+      'ref',
+      'effect',
+      'ref',
+      'effect',
+      'ref',
+      'effect',
+      'ref',
+    ]);
+  });
+});
diff --git a/packages/mui-base/src/Portal/Portal.tsx b/packages/mui-base/src/Portal/Portal.tsx
new file mode 100644
index 00000000000000..89588fa288ce7d
--- /dev/null
+++ b/packages/mui-base/src/Portal/Portal.tsx
@@ -0,0 +1,108 @@
+'use client';
+import * as React from 'react';
+import * as ReactDOM from 'react-dom';
+import PropTypes from 'prop-types';
+import getReactNodeRef from '@mui/utils/getReactNodeRef';
+import {
+  exactProp,
+  HTMLElementType,
+  unstable_useEnhancedEffect as useEnhancedEffect,
+  unstable_useForkRef as useForkRef,
+  unstable_setRef as setRef,
+} from '@mui/utils';
+import { PortalProps } from './Portal.types';
+
+function getContainer(container: PortalProps['container']) {
+  return typeof container === 'function' ? container() : container;
+}
+
+/**
+ * Portals provide a first-class way to render children into a DOM node
+ * that exists outside the DOM hierarchy of the parent component.
+ *
+ * Demos:
+ *
+ * - [Portal](https://mui.com/base-ui/react-portal/)
+ *
+ * API:
+ *
+ * - [Portal API](https://mui.com/base-ui/react-portal/components-api/#portal)
+ */
+const Portal = React.forwardRef(function Portal(
+  props: PortalProps,
+  forwardedRef: React.ForwardedRef<Element>,
+) {
+  const { children, container, disablePortal = false } = props;
+  const [mountNode, setMountNode] = React.useState<ReturnType<typeof getContainer>>(null);
+  const handleRef = useForkRef(getReactNodeRef(children), forwardedRef);
+
+  useEnhancedEffect(() => {
+    if (!disablePortal) {
+      setMountNode(getContainer(container) || document.body);
+    }
+  }, [container, disablePortal]);
+
+  useEnhancedEffect(() => {
+    if (mountNode && !disablePortal) {
+      setRef(forwardedRef, mountNode);
+      return () => {
+        setRef(forwardedRef, null);
+      };
+    }
+
+    return undefined;
+  }, [forwardedRef, mountNode, disablePortal]);
+
+  if (disablePortal) {
+    if (React.isValidElement(children)) {
+      const newProps = {
+        ref: handleRef,
+      };
+      return React.cloneElement(children, newProps);
+    }
+    return <React.Fragment>{children}</React.Fragment>;
+  }
+
+  return (
+    <React.Fragment>
+      {mountNode ? ReactDOM.createPortal(children, mountNode) : mountNode}
+    </React.Fragment>
+  );
+}) as React.ForwardRefExoticComponent<PortalProps & React.RefAttributes<Element>>;
+
+Portal.propTypes /* remove-proptypes */ = {
+  // ┌────────────────────────────── Warning ──────────────────────────────┐
+  // │ These PropTypes are generated from the TypeScript type definitions. │
+  // │ To update them, edit the TypeScript types and run `pnpm proptypes`. │
+  // └─────────────────────────────────────────────────────────────────────┘
+  /**
+   * The children to render into the `container`.
+   */
+  children: PropTypes.node,
+  /**
+   * An HTML element or function that returns one.
+   * The `container` will have the portal children appended to it.
+   *
+   * You can also provide a callback, which is called in a React layout effect.
+   * This lets you set the container from a ref, and also makes server-side rendering possible.
+   *
+   * By default, it uses the body of the top-level document object,
+   * so it's simply `document.body` most of the time.
+   */
+  container: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([
+    HTMLElementType,
+    PropTypes.func,
+  ]),
+  /**
+   * The `children` will be under the DOM hierarchy of the parent component.
+   * @default false
+   */
+  disablePortal: PropTypes.bool,
+} as any;
+
+if (process.env.NODE_ENV !== 'production') {
+  // eslint-disable-next-line
+  (Portal as any)['propTypes' + ''] = exactProp((Portal as any).propTypes);
+}
+
+export { Portal };
diff --git a/packages/mui-base/src/Portal/Portal.types.ts b/packages/mui-base/src/Portal/Portal.types.ts
new file mode 100644
index 00000000000000..8e5717db2742bf
--- /dev/null
+++ b/packages/mui-base/src/Portal/Portal.types.ts
@@ -0,0 +1,24 @@
+import * as React from 'react';
+
+export interface PortalProps {
+  /**
+   * The children to render into the `container`.
+   */
+  children?: React.ReactNode;
+  /**
+   * An HTML element or function that returns one.
+   * The `container` will have the portal children appended to it.
+   *
+   * You can also provide a callback, which is called in a React layout effect.
+   * This lets you set the container from a ref, and also makes server-side rendering possible.
+   *
+   * By default, it uses the body of the top-level document object,
+   * so it's simply `document.body` most of the time.
+   */
+  container?: Element | (() => Element | null) | null;
+  /**
+   * The `children` will be under the DOM hierarchy of the parent component.
+   * @default false
+   */
+  disablePortal?: boolean;
+}
diff --git a/packages/mui-base/src/TextareaAutosize/TextareaAutosize.test.tsx b/packages/mui-base/src/TextareaAutosize/TextareaAutosize.test.tsx
new file mode 100644
index 00000000000000..d2645e3a662b70
--- /dev/null
+++ b/packages/mui-base/src/TextareaAutosize/TextareaAutosize.test.tsx
@@ -0,0 +1,465 @@
+import * as React from 'react';
+import { expect } from 'chai';
+import sinon, { spy, stub } from 'sinon';
+import { act, screen, waitFor, createRenderer, fireEvent } from '@mui/internal-test-utils';
+import { TextareaAutosize } from '@mui/base/TextareaAutosize';
+import { describeConformanceUnstyled } from '../../test/describeConformanceUnstyled';
+
+function getStyleValue(value: string) {
+  return parseInt(value, 10) || 0;
+}
+
+// TODO: merge into a shared test helpers.
+// MUI X already have one under mui-x/test/utils/helperFn.ts
+function sleep(duration: number): Promise<void> {
+  return new Promise<void>((resolve) => {
+    setTimeout(() => {
+      resolve();
+    }, duration);
+  });
+}
+
+async function raf() {
+  return new Promise<void>((resolve) => {
+    // Chrome and Safari have a bug where calling rAF once returns the current
+    // frame instead of the next frame, so we need to call a double rAF here.
+    // See crbug.com/675795 for more.
+    requestAnimationFrame(() => {
+      requestAnimationFrame(() => {
+        resolve();
+      });
+    });
+  });
+}
+
+describe('<TextareaAutosize />', () => {
+  const { clock, render } = createRenderer();
+
+  describeConformanceUnstyled(<TextareaAutosize />, () => ({
+    render,
+    inheritComponent: 'textarea',
+    refInstanceof: window.HTMLTextAreaElement,
+    slots: {},
+    skip: [
+      // doesn't have slots, so these tests are irrelevant:
+      'componentProp',
+      'mergeClassName',
+      'ownerStatePropagation',
+      'propsSpread',
+      'refForwarding',
+      'slotsProp',
+    ],
+  }));
+
+  // For https://github.com/mui/material-ui/pull/33238
+  it('should not crash when unmounting with Suspense', async () => {
+    const LazyRoute = React.lazy(() => {
+      // Force react to show fallback suspense
+      return new Promise<any>((resolve) => {
+        setTimeout(() => {
+          resolve({
+            default: () => <div>LazyRoute</div>,
+          });
+        }, 0);
+      });
+    });
+
+    function App() {
+      const [toggle, setToggle] = React.useState(false);
+
+      return (
+        <React.Suspense fallback={null}>
+          <button onClick={() => setToggle((r) => !r)}>Toggle</button>
+          {toggle ? <LazyRoute /> : <TextareaAutosize />}
+        </React.Suspense>
+      );
+    }
+
+    render(<App />);
+    const button = screen.getByRole('button');
+    fireEvent.click(button);
+    await waitFor(() => {
+      expect(screen.queryByText('LazyRoute')).not.to.equal(null);
+    });
+  });
+
+  // For https://github.com/mui/material-ui/pull/33253
+  it('should update height without an infinite rendering loop', async () => {
+    function App() {
+      const [value, setValue] = React.useState('Controlled');
+
+      const handleChange = (event: React.ChangeEvent<any>) => {
+        setValue(event.target.value);
+      };
+
+      return <TextareaAutosize value={value} onChange={handleChange} />;
+    }
+    const { container } = render(<App />);
+    const input = container.querySelector<HTMLTextAreaElement>('textarea')!;
+    act(() => {
+      input.focus();
+    });
+    const activeElement = document.activeElement!;
+    // set the value of the input to be 1 larger than its content width
+    fireEvent.change(activeElement, {
+      target: { value: 'Controlled\n' },
+    });
+    await sleep(0);
+    fireEvent.change(activeElement, {
+      target: { value: 'Controlled\n\n' },
+    });
+  });
+
+  // For https://github.com/mui/material-ui/pull/37135
+  it('should update height without delay', async function test() {
+    if (/jsdom/.test(window.navigator.userAgent)) {
+      // It depends on ResizeObserver
+      this.skip();
+    }
+
+    function App() {
+      const ref = React.useRef<HTMLTextAreaElement>(null);
+      return (
+        <div>
+          <button
+            onClick={() => {
+              ref.current!.style.width = '250px';
+            }}
+          >
+            change
+          </button>
+          <div>
+            <TextareaAutosize
+              ref={ref}
+              style={{
+                width: 150,
+                padding: 0,
+                fontSize: 14,
+                lineHeight: '15px',
+                border: '1px solid',
+              }}
+              defaultValue="qdzqzd qzd qzd qzd qz dqz"
+            />
+          </div>
+        </div>
+      );
+    }
+    const { container } = render(<App />);
+    const input = container.querySelector<HTMLTextAreaElement>('textarea')!;
+    const button = screen.getByRole('button');
+    expect(parseInt(input.style.height, 10)).to.be.within(30, 32);
+    fireEvent.click(button);
+    await raf();
+    await raf();
+    expect(parseInt(input.style.height, 10)).to.be.within(15, 17);
+  });
+
+  describe('layout', () => {
+    const getComputedStyleStub = new Map<Element, Partial<CSSStyleDeclaration>>();
+    function setLayout(
+      input: HTMLTextAreaElement,
+      shadow: Element,
+      {
+        getComputedStyle,
+        scrollHeight: scrollHeightArg,
+        lineHeight: lineHeightArg,
+      }: {
+        getComputedStyle: Partial<CSSStyleDeclaration>;
+        scrollHeight?: number | (() => number);
+        lineHeight?: number | (() => number);
+      },
+    ) {
+      const lineHeight = typeof lineHeightArg === 'function' ? lineHeightArg : () => lineHeightArg;
+      const scrollHeight =
+        typeof scrollHeightArg === 'function' ? scrollHeightArg : () => scrollHeightArg;
+
+      getComputedStyleStub.set(input, getComputedStyle);
+
+      let index = 0;
+      stub(shadow, 'scrollHeight').get(() => {
+        index += 1;
+        return index % 2 === 1 ? scrollHeight() : lineHeight();
+      });
+    }
+
+    before(function beforeHook() {
+      // Only run the test on node.
+      if (!/jsdom/.test(window.navigator.userAgent)) {
+        this.skip();
+      }
+
+      stub(window, 'getComputedStyle').value(
+        (node: Element) => getComputedStyleStub.get(node) || {},
+      );
+    });
+
+    after(() => {
+      sinon.restore();
+    });
+
+    describe('resize', () => {
+      clock.withFakeTimers();
+
+      it('should handle the resize event', () => {
+        const { container } = render(<TextareaAutosize />);
+        const input = container.querySelector<HTMLTextAreaElement>('textarea[aria-hidden=null]')!;
+        const shadow = container.querySelector('textarea[aria-hidden=true]')!;
+
+        expect(input.style).to.have.property('height', '0px');
+        expect(input.style).to.have.property('overflow', 'hidden');
+
+        setLayout(input, shadow, {
+          getComputedStyle: {
+            boxSizing: 'content-box',
+          },
+          scrollHeight: 30,
+          lineHeight: 15,
+        });
+        window.dispatchEvent(new window.Event('resize', {}));
+
+        clock.tick(166);
+
+        expect(input.style).to.have.property('height', '30px');
+        expect(input.style).to.have.property('overflow', 'hidden');
+      });
+    });
+
+    it('should update when uncontrolled', () => {
+      const handleChange = spy();
+      const { container } = render(<TextareaAutosize onChange={handleChange} />);
+      const input = container.querySelector<HTMLTextAreaElement>('textarea[aria-hidden=null]')!;
+      const shadow = container.querySelector('textarea[aria-hidden=true]')!;
+      expect(input.style).to.have.property('height', '0px');
+      expect(input.style).to.have.property('overflow', 'hidden');
+      setLayout(input, shadow, {
+        getComputedStyle: {
+          boxSizing: 'content-box',
+        },
+        scrollHeight: 30,
+        lineHeight: 15,
+      });
+      act(() => {
+        input.focus();
+      });
+      const activeElement = document.activeElement!;
+      fireEvent.change(activeElement, { target: { value: 'a' } });
+      expect(input.style).to.have.property('height', '30px');
+      expect(input.style).to.have.property('overflow', 'hidden');
+      expect(handleChange.callCount).to.equal(1);
+    });
+
+    it('should take the border into account with border-box', () => {
+      const border = 5;
+      const { container, forceUpdate } = render(<TextareaAutosize />);
+      const input = container.querySelector<HTMLTextAreaElement>('textarea[aria-hidden=null]')!;
+      const shadow = container.querySelector('textarea[aria-hidden=true]')!;
+      expect(input.style).to.have.property('height', '0px');
+      expect(input.style).to.have.property('overflow', 'hidden');
+      setLayout(input, shadow, {
+        getComputedStyle: {
+          boxSizing: 'border-box',
+          borderBottomWidth: `${border}px`,
+        },
+        scrollHeight: 30,
+        lineHeight: 15,
+      });
+      forceUpdate();
+      expect(input.style).to.have.property('height', `${30 + border}px`);
+      expect(input.style).to.have.property('overflow', 'hidden');
+    });
+
+    it('should take the padding into account with content-box', () => {
+      const padding = 5;
+      const { container, forceUpdate } = render(<TextareaAutosize />);
+      const input = container.querySelector<HTMLTextAreaElement>('textarea[aria-hidden=null]')!;
+      const shadow = container.querySelector('textarea[aria-hidden=true]')!;
+      setLayout(input, shadow, {
+        getComputedStyle: {
+          boxSizing: 'border-box',
+          paddingTop: `${padding}px`,
+        },
+        scrollHeight: 30,
+        lineHeight: 15,
+      });
+      forceUpdate();
+      expect(input.style).to.have.property('height', `${30 + padding}px`);
+      expect(input.style).to.have.property('overflow', 'hidden');
+    });
+
+    it('should have at least height of "minRows"', () => {
+      const minRows = 3;
+      const lineHeight = 15;
+      const { container, forceUpdate } = render(<TextareaAutosize minRows={minRows} />);
+      const input = container.querySelector<HTMLTextAreaElement>('textarea[aria-hidden=null]')!;
+      const shadow = container.querySelector('textarea[aria-hidden=true]')!;
+      setLayout(input, shadow, {
+        getComputedStyle: {
+          boxSizing: 'content-box',
+        },
+        scrollHeight: 30,
+        lineHeight,
+      });
+      forceUpdate();
+      expect(input.style).to.have.property('height', `${lineHeight * minRows}px`);
+      expect(input.style).to.have.property('overflow', '');
+    });
+
+    it('should have at max "maxRows" rows', () => {
+      const maxRows = 3;
+      const lineHeight = 15;
+      const { container, forceUpdate } = render(<TextareaAutosize maxRows={maxRows} />);
+      const input = container.querySelector<HTMLTextAreaElement>('textarea[aria-hidden=null]')!;
+      const shadow = container.querySelector('textarea[aria-hidden=true]')!;
+      setLayout(input, shadow, {
+        getComputedStyle: {
+          boxSizing: 'content-box',
+        },
+        scrollHeight: 100,
+        lineHeight,
+      });
+      forceUpdate();
+      expect(input.style).to.have.property('height', `${lineHeight * maxRows}px`);
+      expect(input.style).to.have.property('overflow', '');
+    });
+
+    it('should show scrollbar when having more rows than "maxRows"', () => {
+      const maxRows = 3;
+      const lineHeight = 15;
+      const { container, forceUpdate } = render(<TextareaAutosize maxRows={maxRows} />);
+      const input = container.querySelector<HTMLTextAreaElement>('textarea[aria-hidden=null]')!;
+      const shadow = container.querySelector('textarea[aria-hidden=true]')!;
+      setLayout(input, shadow, {
+        getComputedStyle: {
+          boxSizing: 'border-box',
+        },
+        scrollHeight: lineHeight * 2,
+        lineHeight,
+      });
+      forceUpdate();
+      expect(input.style).to.have.property('height', `${lineHeight * 2}px`);
+      expect(input.style).to.have.property('overflow', 'hidden');
+      setLayout(input, shadow, {
+        getComputedStyle: {
+          boxSizing: 'border-box',
+        },
+        scrollHeight: lineHeight * 3,
+        lineHeight,
+      });
+      forceUpdate();
+      expect(input.style).to.have.property('height', `${lineHeight * 3}px`);
+      expect(input.style).to.have.property('overflow', 'hidden');
+      setLayout(input, shadow, {
+        getComputedStyle: {
+          boxSizing: 'border-box',
+        },
+        scrollHeight: lineHeight * 4,
+        lineHeight,
+      });
+      forceUpdate();
+      expect(input.style).to.have.property('height', `${lineHeight * 3}px`);
+      expect(input.style).to.have.property('overflow', '');
+    });
+
+    it('should update its height when the "maxRows" prop changes', () => {
+      const lineHeight = 15;
+      const { container, forceUpdate, setProps } = render(<TextareaAutosize maxRows={3} />);
+      const input = container.querySelector<HTMLTextAreaElement>('textarea[aria-hidden=null]')!;
+      const shadow = container.querySelector('textarea[aria-hidden=true]')!;
+      setLayout(input, shadow, {
+        getComputedStyle: {
+          boxSizing: 'content-box',
+        },
+        scrollHeight: 100,
+        lineHeight,
+      });
+      forceUpdate();
+      expect(input.style).to.have.property('height', `${lineHeight * 3}px`);
+      expect(input.style).to.have.property('overflow', '');
+      setProps({ maxRows: 2 });
+      expect(input.style).to.have.property('height', `${lineHeight * 2}px`);
+      expect(input.style).to.have.property('overflow', '');
+    });
+
+    it('should not sync height if container width is 0px', () => {
+      const lineHeight = 15;
+      const { container, forceUpdate } = render(<TextareaAutosize />);
+      const input = container.querySelector<HTMLTextAreaElement>('textarea[aria-hidden=null]')!;
+      const shadow = container.querySelector('textarea[aria-hidden=true]')!;
+
+      setLayout(input, shadow, {
+        getComputedStyle: {
+          boxSizing: 'content-box',
+        },
+        scrollHeight: lineHeight * 2,
+        lineHeight,
+      });
+      forceUpdate();
+
+      expect(input.style).to.have.property('height', `${lineHeight * 2}px`);
+      expect(input.style).to.have.property('overflow', 'hidden');
+
+      setLayout(input, shadow, {
+        getComputedStyle: {
+          boxSizing: 'content-box',
+          width: '0px',
+        },
+        scrollHeight: lineHeight * 3,
+        lineHeight,
+      });
+
+      forceUpdate();
+      expect(input.style).to.have.property('height', `${lineHeight * 2}px`);
+      expect(input.style).to.have.property('overflow', 'hidden');
+    });
+
+    it('should compute the correct height if padding-right is greater than 0px', () => {
+      const paddingRight = 50;
+      const { container, forceUpdate } = render(<TextareaAutosize style={{ paddingRight }} />);
+      const input = container.querySelector<HTMLTextAreaElement>('textarea[aria-hidden=null]')!;
+      const shadow = container.querySelector('textarea[aria-hidden=true]')! as HTMLTextAreaElement;
+      const contentWidth = 100;
+      const lineHeight = 15;
+      const width = contentWidth + paddingRight;
+      setLayout(input, shadow, {
+        getComputedStyle: {
+          boxSizing: 'border-box',
+          width: `${width}px`,
+        },
+        scrollHeight: () => {
+          // assuming that the width of the word is 1px, and substract the width of the paddingRight
+          const lineNum = Math.ceil(
+            input.value.length / (width - getStyleValue(shadow.style.paddingRight)),
+          );
+          return lineNum * lineHeight;
+        },
+        lineHeight,
+      });
+
+      act(() => {
+        input.focus();
+      });
+      const activeElement = document.activeElement!;
+      // set the value of the input to be 1 larger than its content width
+      fireEvent.change(activeElement, {
+        target: { value: new Array(contentWidth + 1).fill('a').join('') },
+      });
+      forceUpdate();
+
+      // the input should be 2 lines
+      expect(input.style).to.have.property('height', `${lineHeight * 2}px`);
+    });
+  });
+
+  it('should apply the inline styles using the "style" prop', function test() {
+    if (/jsdom/.test(window.navigator.userAgent)) {
+      this.skip();
+    }
+
+    const { container } = render(<TextareaAutosize style={{ backgroundColor: 'yellow' }} />);
+    const input = container.querySelector<HTMLTextAreaElement>('textarea')!;
+
+    expect(input).toHaveComputedStyle({
+      backgroundColor: 'rgb(255, 255, 0)',
+    });
+  });
+});
diff --git a/packages/mui-base/src/TextareaAutosize/TextareaAutosize.tsx b/packages/mui-base/src/TextareaAutosize/TextareaAutosize.tsx
new file mode 100644
index 00000000000000..23799d01516409
--- /dev/null
+++ b/packages/mui-base/src/TextareaAutosize/TextareaAutosize.tsx
@@ -0,0 +1,265 @@
+'use client';
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import {
+  unstable_debounce as debounce,
+  unstable_useForkRef as useForkRef,
+  unstable_useEnhancedEffect as useEnhancedEffect,
+  unstable_ownerWindow as ownerWindow,
+} from '@mui/utils';
+import { TextareaAutosizeProps } from './TextareaAutosize.types';
+
+function getStyleValue(value: string) {
+  return parseInt(value, 10) || 0;
+}
+
+const styles: {
+  shadow: React.CSSProperties;
+} = {
+  shadow: {
+    // Visibility needed to hide the extra text area on iPads
+    visibility: 'hidden',
+    // Remove from the content flow
+    position: 'absolute',
+    // Ignore the scrollbar width
+    overflow: 'hidden',
+    height: 0,
+    top: 0,
+    left: 0,
+    // Create a new layer, increase the isolation of the computed values
+    transform: 'translateZ(0)',
+  },
+};
+
+type TextareaStyles = {
+  outerHeightStyle: number;
+  overflowing: boolean;
+};
+
+function isEmpty(obj: TextareaStyles) {
+  return (
+    obj === undefined ||
+    obj === null ||
+    Object.keys(obj).length === 0 ||
+    (obj.outerHeightStyle === 0 && !obj.overflowing)
+  );
+}
+
+/**
+ *
+ * Demos:
+ *
+ * - [Textarea Autosize](https://mui.com/base-ui/react-textarea-autosize/)
+ * - [Textarea Autosize](https://mui.com/material-ui/react-textarea-autosize/)
+ *
+ * API:
+ *
+ * - [TextareaAutosize API](https://mui.com/base-ui/react-textarea-autosize/components-api/#textarea-autosize)
+ */
+const TextareaAutosize = React.forwardRef(function TextareaAutosize(
+  props: TextareaAutosizeProps,
+  forwardedRef: React.ForwardedRef<Element>,
+) {
+  const { onChange, maxRows, minRows = 1, style, value, ...other } = props;
+
+  const { current: isControlled } = React.useRef(value != null);
+  const inputRef = React.useRef<HTMLTextAreaElement>(null);
+  const handleRef = useForkRef(forwardedRef, inputRef);
+  const heightRef = React.useRef<number | null>(null);
+  const shadowRef = React.useRef<HTMLTextAreaElement>(null);
+
+  const calculateTextareaStyles = React.useCallback(() => {
+    const input = inputRef.current!;
+
+    const containerWindow = ownerWindow(input);
+    const computedStyle = containerWindow.getComputedStyle(input);
+
+    // If input's width is shrunk and it's not visible, don't sync height.
+    if (computedStyle.width === '0px') {
+      return {
+        outerHeightStyle: 0,
+        overflowing: false,
+      };
+    }
+
+    const inputShallow = shadowRef.current!;
+
+    inputShallow.style.width = computedStyle.width;
+    inputShallow.value = input.value || props.placeholder || 'x';
+    if (inputShallow.value.slice(-1) === '\n') {
+      // Certain fonts which overflow the line height will cause the textarea
+      // to report a different scrollHeight depending on whether the last line
+      // is empty. Make it non-empty to avoid this issue.
+      inputShallow.value += ' ';
+    }
+
+    const boxSizing = computedStyle.boxSizing;
+    const padding =
+      getStyleValue(computedStyle.paddingBottom) + getStyleValue(computedStyle.paddingTop);
+    const border =
+      getStyleValue(computedStyle.borderBottomWidth) + getStyleValue(computedStyle.borderTopWidth);
+
+    // The height of the inner content
+    const innerHeight = inputShallow.scrollHeight;
+
+    // Measure height of a textarea with a single row
+    inputShallow.value = 'x';
+    const singleRowHeight = inputShallow.scrollHeight;
+
+    // The height of the outer content
+    let outerHeight = innerHeight;
+
+    if (minRows) {
+      outerHeight = Math.max(Number(minRows) * singleRowHeight, outerHeight);
+    }
+    if (maxRows) {
+      outerHeight = Math.min(Number(maxRows) * singleRowHeight, outerHeight);
+    }
+    outerHeight = Math.max(outerHeight, singleRowHeight);
+
+    // Take the box sizing into account for applying this value as a style.
+    const outerHeightStyle = outerHeight + (boxSizing === 'border-box' ? padding + border : 0);
+    const overflowing = Math.abs(outerHeight - innerHeight) <= 1;
+
+    return { outerHeightStyle, overflowing };
+  }, [maxRows, minRows, props.placeholder]);
+
+  const syncHeight = React.useCallback(() => {
+    const textareaStyles = calculateTextareaStyles();
+
+    if (isEmpty(textareaStyles)) {
+      return;
+    }
+
+    const outerHeightStyle = textareaStyles.outerHeightStyle;
+    const input = inputRef.current!;
+    if (heightRef.current !== outerHeightStyle) {
+      heightRef.current = outerHeightStyle;
+      input.style.height = `${outerHeightStyle}px`;
+    }
+    input.style.overflow = textareaStyles.overflowing ? 'hidden' : '';
+  }, [calculateTextareaStyles]);
+
+  useEnhancedEffect(() => {
+    const handleResize = () => {
+      syncHeight();
+    };
+    // Workaround a "ResizeObserver loop completed with undelivered notifications" error
+    // in test.
+    // Note that we might need to use this logic in production per https://github.com/WICG/resize-observer/issues/38
+    // Also see https://github.com/mui/mui-x/issues/8733
+    let rAF: any;
+    const rAFHandleResize = () => {
+      cancelAnimationFrame(rAF);
+      rAF = requestAnimationFrame(() => {
+        handleResize();
+      });
+    };
+    const debounceHandleResize = debounce(handleResize);
+    const input = inputRef.current!;
+    const containerWindow = ownerWindow(input);
+
+    containerWindow.addEventListener('resize', debounceHandleResize);
+
+    let resizeObserver: ResizeObserver;
+
+    if (typeof ResizeObserver !== 'undefined') {
+      resizeObserver = new ResizeObserver(
+        process.env.NODE_ENV === 'test' ? rAFHandleResize : handleResize,
+      );
+      resizeObserver.observe(input);
+    }
+
+    return () => {
+      debounceHandleResize.clear();
+      cancelAnimationFrame(rAF);
+      containerWindow.removeEventListener('resize', debounceHandleResize);
+      if (resizeObserver) {
+        resizeObserver.disconnect();
+      }
+    };
+  }, [calculateTextareaStyles, syncHeight]);
+
+  useEnhancedEffect(() => {
+    syncHeight();
+  });
+
+  const handleChange = (event: React.ChangeEvent<HTMLTextAreaElement>) => {
+    if (!isControlled) {
+      syncHeight();
+    }
+
+    if (onChange) {
+      onChange(event);
+    }
+  };
+
+  return (
+    <React.Fragment>
+      <textarea
+        value={value}
+        onChange={handleChange}
+        ref={handleRef}
+        // Apply the rows prop to get a "correct" first SSR paint
+        rows={minRows as number}
+        style={style}
+        {...other}
+      />
+      <textarea
+        aria-hidden
+        className={props.className}
+        readOnly
+        ref={shadowRef}
+        tabIndex={-1}
+        style={{
+          ...styles.shadow,
+          ...style,
+          paddingTop: 0,
+          paddingBottom: 0,
+        }}
+      />
+    </React.Fragment>
+  );
+}) as React.ForwardRefExoticComponent<TextareaAutosizeProps & React.RefAttributes<Element>>;
+
+TextareaAutosize.propTypes /* remove-proptypes */ = {
+  // ┌────────────────────────────── Warning ──────────────────────────────┐
+  // │ These PropTypes are generated from the TypeScript type definitions. │
+  // │ To update them, edit the TypeScript types and run `pnpm proptypes`. │
+  // └─────────────────────────────────────────────────────────────────────┘
+  /**
+   * @ignore
+   */
+  className: PropTypes.string,
+  /**
+   * Maximum number of rows to display.
+   */
+  maxRows: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+  /**
+   * Minimum number of rows to display.
+   * @default 1
+   */
+  minRows: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+  /**
+   * @ignore
+   */
+  onChange: PropTypes.func,
+  /**
+   * @ignore
+   */
+  placeholder: PropTypes.string,
+  /**
+   * @ignore
+   */
+  style: PropTypes.object,
+  /**
+   * @ignore
+   */
+  value: PropTypes.oneOfType([
+    PropTypes.arrayOf(PropTypes.string),
+    PropTypes.number,
+    PropTypes.string,
+  ]),
+} as any;
+
+export { TextareaAutosize };
diff --git a/packages/mui-base/src/TextareaAutosize/TextareaAutosize.types.ts b/packages/mui-base/src/TextareaAutosize/TextareaAutosize.types.ts
new file mode 100644
index 00000000000000..db83a932802cb3
--- /dev/null
+++ b/packages/mui-base/src/TextareaAutosize/TextareaAutosize.types.ts
@@ -0,0 +1,15 @@
+import * as React from 'react';
+
+export interface TextareaAutosizeProps
+  extends Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, 'children' | 'rows'> {
+  ref?: React.Ref<HTMLTextAreaElement>;
+  /**
+   * Maximum number of rows to display.
+   */
+  maxRows?: string | number;
+  /**
+   * Minimum number of rows to display.
+   * @default 1
+   */
+  minRows?: string | number;
+}
diff --git a/packages/mui-base/src/unstable_useModal/ModalManager.test.ts b/packages/mui-base/src/unstable_useModal/ModalManager.test.ts
new file mode 100644
index 00000000000000..a53aa83068124b
--- /dev/null
+++ b/packages/mui-base/src/unstable_useModal/ModalManager.test.ts
@@ -0,0 +1,435 @@
+import { expect } from 'chai';
+import { unstable_getScrollbarSize as getScrollbarSize } from '@mui/utils';
+import { ModalManager } from './ModalManager';
+
+interface Modal {
+  mount: Element;
+  modalRef: Element;
+}
+
+function getDummyModal(): Modal {
+  return {
+    mount: document.createElement('div'),
+    modalRef: document.createElement('div'),
+  };
+}
+
+describe('ModalManager', () => {
+  let modalManager: ModalManager;
+  let container1: HTMLDivElement;
+
+  before(() => {
+    modalManager = new ModalManager();
+    container1 = document.createElement('div');
+    container1.style.paddingRight = '20px';
+    Object.defineProperty(container1, 'scrollHeight', {
+      value: 100,
+      writable: false,
+    });
+    Object.defineProperty(container1, 'clientHeight', {
+      value: 90,
+      writable: false,
+    });
+    document.body.appendChild(container1);
+  });
+
+  after(() => {
+    document.body.removeChild(container1);
+  });
+
+  it('should add a modal only once', () => {
+    const modal = getDummyModal();
+    const modalManager2 = new ModalManager();
+    const idx = modalManager2.add(modal, container1);
+    modalManager2.mount(modal, {});
+    expect(modalManager2.add(modal, container1)).to.equal(idx);
+    modalManager2.remove(modal);
+  });
+
+  describe('managing modals', () => {
+    let modal1: Modal;
+    let modal2: Modal;
+    let modal3: Modal;
+
+    before(() => {
+      modal1 = getDummyModal();
+      modal2 = getDummyModal();
+      modal3 = getDummyModal();
+    });
+
+    it('should add modal1', () => {
+      const idx = modalManager.add(modal1, container1);
+      modalManager.mount(modal1, {});
+      expect(idx).to.equal(0);
+      expect(modalManager.isTopModal(modal1)).to.equal(true);
+    });
+
+    it('should add modal2', () => {
+      const idx = modalManager.add(modal2, container1);
+      expect(idx).to.equal(1);
+      expect(modalManager.isTopModal(modal2)).to.equal(true);
+    });
+
+    it('should add modal3', () => {
+      const idx = modalManager.add(modal3, container1);
+      expect(idx).to.equal(2);
+      expect(modalManager.isTopModal(modal3)).to.equal(true);
+    });
+
+    it('should remove modal2', () => {
+      const idx = modalManager.remove(modal2);
+      expect(idx).to.equal(1);
+    });
+
+    it('should add modal2 2', () => {
+      const idx = modalManager.add(modal2, container1);
+      modalManager.mount(modal2, {});
+      expect(idx).to.equal(2);
+      expect(modalManager.isTopModal(modal2)).to.equal(true);
+      expect(modalManager.isTopModal(modal3)).to.equal(false);
+    });
+
+    it('should remove modal3', () => {
+      const idx = modalManager.remove(modal3);
+      expect(idx).to.equal(1);
+    });
+
+    it('should remove modal2 2', () => {
+      const idx = modalManager.remove(modal2);
+      expect(idx).to.equal(1);
+      expect(modalManager.isTopModal(modal1)).to.equal(true);
+    });
+
+    it('should remove modal1', () => {
+      const idx = modalManager.remove(modal1);
+      expect(idx).to.equal(0);
+    });
+
+    it('should not do anything', () => {
+      const idx = modalManager.remove(getDummyModal());
+      expect(idx).to.equal(-1);
+    });
+  });
+
+  describe('overflow', () => {
+    let fixedNode: HTMLDivElement;
+
+    beforeEach(() => {
+      container1.style.paddingRight = '20px';
+
+      fixedNode = document.createElement('div');
+      fixedNode.classList.add('mui-fixed');
+      document.body.appendChild(fixedNode);
+      window.innerWidth += 1; // simulate a scrollbar
+    });
+
+    afterEach(() => {
+      document.body.removeChild(fixedNode);
+      window.innerWidth -= 1;
+    });
+
+    it('should handle the scroll', () => {
+      fixedNode.style.paddingRight = '14px';
+
+      const modal = getDummyModal();
+      modalManager.add(modal, container1);
+      modalManager.mount(modal, {});
+      expect(container1.style.overflow).to.equal('hidden');
+      expect(container1.style.paddingRight).to.equal(`${20 + getScrollbarSize(document)}px`);
+      expect(fixedNode.style.paddingRight).to.equal(`${14 + getScrollbarSize(document)}px`);
+      modalManager.remove(modal);
+      expect(container1.style.overflow).to.equal('');
+      expect(container1.style.paddingRight).to.equal('20px');
+      expect(fixedNode.style.paddingRight).to.equal('14px');
+    });
+
+    it('should disable the scroll even when not overflowing', () => {
+      // simulate non-overflowing container
+      const container2 = document.createElement('div');
+      Object.defineProperty(container2, 'scrollHeight', {
+        value: 100,
+        writable: false,
+      });
+      Object.defineProperty(container2, 'clientHeight', {
+        value: 100,
+        writable: false,
+      });
+      document.body.appendChild(container2);
+
+      const modal = getDummyModal();
+      modalManager.add(modal, container2);
+      modalManager.mount(modal, {});
+      expect(container2.style.overflow).to.equal('hidden');
+      modalManager.remove(modal);
+      expect(container2.style.overflow).to.equal('');
+
+      document.body.removeChild(container2);
+    });
+
+    it('should restore styles correctly if none existed before', () => {
+      const modal = getDummyModal();
+      modalManager.add(modal, container1);
+      modalManager.mount(modal, {});
+      expect(container1.style.overflow).to.equal('hidden');
+      expect(container1.style.paddingRight).to.equal(`${20 + getScrollbarSize(document)}px`);
+      expect(fixedNode.style.paddingRight).to.equal(`${getScrollbarSize(document)}px`);
+      modalManager.remove(modal);
+      expect(container1.style.overflow).to.equal('');
+      expect(container1.style.paddingRight).to.equal('20px');
+      expect(fixedNode.style.paddingRight).to.equal('');
+    });
+
+    describe('shadow dom', () => {
+      let shadowContainer: HTMLDivElement;
+      let container2: HTMLDivElement;
+
+      beforeEach(() => {
+        shadowContainer = document.createElement('div');
+        const shadowRoot = shadowContainer.attachShadow({ mode: 'open' });
+        container2 = document.createElement('div');
+        shadowRoot.appendChild(container2);
+      });
+
+      afterEach(() => {
+        document.body.removeChild(shadowContainer);
+      });
+
+      it('should scroll body when parent is shadow root', () => {
+        const modal = getDummyModal();
+
+        container2.style.overflow = 'scroll';
+
+        document.body.appendChild(shadowContainer);
+        modalManager.add(modal, container2);
+        modalManager.mount(modal, {});
+
+        expect(container2.style.overflow).to.equal('scroll');
+        expect(document.body.style.overflow).to.equal('hidden');
+        modalManager.remove(modal);
+
+        expect(container2.style.overflow).to.equal('scroll');
+        expect(document.body.style.overflow).to.equal('');
+      });
+    });
+
+    describe('restore styles', () => {
+      let container2: HTMLDivElement;
+
+      beforeEach(() => {
+        container2 = document.createElement('div');
+      });
+
+      afterEach(() => {
+        document.body.removeChild(container2);
+      });
+
+      it('should restore styles correctly if overflow existed before', () => {
+        const modal = getDummyModal();
+
+        container2.style.overflow = 'scroll';
+
+        Object.defineProperty(container2, 'scrollHeight', {
+          value: 100,
+          writable: false,
+        });
+        Object.defineProperty(container2, 'clientHeight', {
+          value: 90,
+          writable: false,
+        });
+
+        document.body.appendChild(container2);
+        modalManager.add(modal, container2);
+        modalManager.mount(modal, {});
+
+        expect(container2.style.overflow).to.equal('hidden');
+        modalManager.remove(modal);
+
+        expect(container2.style.overflow).to.equal('scroll');
+        expect(fixedNode.style.paddingRight).to.equal('');
+      });
+
+      it('should restore styles correctly if overflow-x existed before', () => {
+        const modal = getDummyModal();
+
+        container2.style.overflowX = 'hidden';
+
+        Object.defineProperty(container2, 'scrollHeight', {
+          value: 100,
+          writable: false,
+        });
+        Object.defineProperty(container2, 'clientHeight', {
+          value: 90,
+          writable: false,
+        });
+
+        document.body.appendChild(container2);
+
+        modalManager.add(modal, container2);
+        modalManager.mount(modal, {});
+
+        expect(container2.style.overflow).to.equal('hidden');
+
+        modalManager.remove(modal);
+
+        expect(container2.style.overflow).to.equal('');
+        expect(container2.style.overflowX).to.equal('hidden');
+      });
+    });
+  });
+
+  describe('multi container', () => {
+    let container3: HTMLDivElement;
+    let container4: HTMLDivElement;
+
+    beforeEach(() => {
+      container3 = document.createElement('div');
+      document.body.appendChild(container3);
+      container3.appendChild(document.createElement('div'));
+
+      container4 = document.createElement('div');
+      document.body.appendChild(container4);
+      container4.appendChild(document.createElement('div'));
+    });
+
+    it('should work will multiple containers', () => {
+      modalManager = new ModalManager();
+      const modal1 = getDummyModal();
+      const modal2 = getDummyModal();
+      modalManager.add(modal1, container3);
+      modalManager.mount(modal1, {});
+      expect(container3.children[0]).toBeAriaHidden();
+
+      modalManager.add(modal2, container4);
+      modalManager.mount(modal2, {});
+      expect(container4.children[0]).toBeAriaHidden();
+
+      modalManager.remove(modal2);
+      expect(container4.children[0]).not.toBeAriaHidden();
+
+      modalManager.remove(modal1);
+      expect(container3.children[0]).not.toBeAriaHidden();
+    });
+
+    afterEach(() => {
+      document.body.removeChild(container3);
+      document.body.removeChild(container4);
+    });
+  });
+
+  describe('container aria-hidden', () => {
+    let modalRef1;
+    let container2: HTMLDivElement;
+
+    beforeEach(() => {
+      container2 = document.createElement('div');
+      document.body.appendChild(container2);
+
+      modalRef1 = document.createElement('div');
+      container2.appendChild(modalRef1);
+
+      modalManager = new ModalManager();
+    });
+
+    afterEach(() => {
+      document.body.removeChild(container2);
+    });
+
+    it('should not contain aria-hidden on modal', () => {
+      const modal2 = document.createElement('div');
+      modal2.setAttribute('aria-hidden', 'true');
+
+      expect(modal2).toBeAriaHidden();
+      modalManager.add({ ...getDummyModal(), modalRef: modal2 }, container2);
+      expect(modal2).not.toBeAriaHidden();
+    });
+
+    it('should add aria-hidden to container siblings', () => {
+      const secondSibling = document.createElement('input');
+      container2.appendChild(secondSibling);
+      modalManager.add(getDummyModal(), container2);
+      expect(container2.children[0]).toBeAriaHidden();
+      expect(container2.children[1]).toBeAriaHidden();
+    });
+
+    it('should not add aria-hidden to forbidden container siblings', () => {
+      [
+        'template',
+        'script',
+        'style',
+        'link',
+        'map',
+        'meta',
+        'noscript',
+        'picture',
+        'col',
+        'colgroup',
+        'param',
+        'slot',
+        'source',
+        'track',
+      ].forEach(function createBlacklistSiblings(name) {
+        const sibling = document.createElement(name);
+        container2.appendChild(sibling);
+      });
+      const inputHiddenSibling = document.createElement('input');
+      inputHiddenSibling.setAttribute('type', 'hidden');
+      container2.appendChild(inputHiddenSibling);
+
+      const numberOfChildren = 16;
+      expect(container2.children.length).equal(numberOfChildren);
+
+      modalManager.add(getDummyModal(), container2);
+      expect(container2.children[0]).toBeAriaHidden();
+      for (let i = 1; i < numberOfChildren; i += 1) {
+        expect(container2.children[i]).not.toBeAriaHidden();
+      }
+    });
+
+    it('should add aria-hidden to previous modals', () => {
+      const modal2 = document.createElement('div');
+      const modal3 = document.createElement('div');
+
+      container2.appendChild(modal2);
+      container2.appendChild(modal3);
+
+      modalManager.add({ ...getDummyModal(), modalRef: modal2 }, container2);
+      // Simulate the main React DOM true.
+      expect(container2.children[0]).toBeAriaHidden();
+      expect(container2.children[1]).not.toBeAriaHidden();
+
+      modalManager.add({ ...getDummyModal(), modalRef: modal3 }, container2);
+      expect(container2.children[0]).toBeAriaHidden();
+      expect(container2.children[1]).toBeAriaHidden();
+      expect(container2.children[2]).not.toBeAriaHidden();
+    });
+
+    it('should remove aria-hidden on siblings', () => {
+      const modal = { ...getDummyModal(), modalRef: container2.children[0] };
+
+      modalManager.add(modal, container2);
+      modalManager.mount(modal, {});
+      expect(container2.children[0]).not.toBeAriaHidden();
+      modalManager.remove(modal);
+      expect(container2.children[0]).toBeAriaHidden();
+    });
+
+    it('should keep previous aria-hidden siblings hidden', () => {
+      const modal = { ...getDummyModal(), modalRef: container2.children[0] };
+      const sibling1 = document.createElement('div');
+      const sibling2 = document.createElement('div');
+
+      sibling1.setAttribute('aria-hidden', 'true');
+
+      container2.appendChild(sibling1);
+      container2.appendChild(sibling2);
+
+      modalManager.add(modal, container2);
+      modalManager.mount(modal, {});
+      expect(container2.children[0]).not.toBeAriaHidden();
+      modalManager.remove(modal);
+      expect(container2.children[0]).toBeAriaHidden();
+      expect(container2.children[1]).toBeAriaHidden();
+      expect(container2.children[2]).not.toBeAriaHidden();
+    });
+  });
+});
diff --git a/packages/mui-base/src/unstable_useModal/ModalManager.ts b/packages/mui-base/src/unstable_useModal/ModalManager.ts
new file mode 100644
index 00000000000000..81470c4864f831
--- /dev/null
+++ b/packages/mui-base/src/unstable_useModal/ModalManager.ts
@@ -0,0 +1,314 @@
+import {
+  unstable_ownerWindow as ownerWindow,
+  unstable_ownerDocument as ownerDocument,
+  unstable_getScrollbarSize as getScrollbarSize,
+} from '@mui/utils';
+
+export interface ManagedModalProps {
+  disableScrollLock?: boolean;
+}
+
+// Is a vertical scrollbar displayed?
+function isOverflowing(container: Element): boolean {
+  const doc = ownerDocument(container);
+
+  if (doc.body === container) {
+    return ownerWindow(container).innerWidth > doc.documentElement.clientWidth;
+  }
+
+  return container.scrollHeight > container.clientHeight;
+}
+
+export function ariaHidden(element: Element, show: boolean): void {
+  if (show) {
+    element.setAttribute('aria-hidden', 'true');
+  } else {
+    element.removeAttribute('aria-hidden');
+  }
+}
+
+function getPaddingRight(element: Element): number {
+  return parseInt(ownerWindow(element).getComputedStyle(element).paddingRight, 10) || 0;
+}
+
+function isAriaHiddenForbiddenOnElement(element: Element): boolean {
+  // The forbidden HTML tags are the ones from ARIA specification that
+  // can be children of body and can't have aria-hidden attribute.
+  // cf. https://www.w3.org/TR/html-aria/#docconformance
+  const forbiddenTagNames = [
+    'TEMPLATE',
+    'SCRIPT',
+    'STYLE',
+    'LINK',
+    'MAP',
+    'META',
+    'NOSCRIPT',
+    'PICTURE',
+    'COL',
+    'COLGROUP',
+    'PARAM',
+    'SLOT',
+    'SOURCE',
+    'TRACK',
+  ];
+  const isForbiddenTagName = forbiddenTagNames.indexOf(element.tagName) !== -1;
+  const isInputHidden = element.tagName === 'INPUT' && element.getAttribute('type') === 'hidden';
+  return isForbiddenTagName || isInputHidden;
+}
+
+function ariaHiddenSiblings(
+  container: Element,
+  mountElement: Element,
+  currentElement: Element,
+  elementsToExclude: readonly Element[],
+  show: boolean,
+): void {
+  const blacklist = [mountElement, currentElement, ...elementsToExclude];
+
+  [].forEach.call(container.children, (element: Element) => {
+    const isNotExcludedElement = blacklist.indexOf(element) === -1;
+    const isNotForbiddenElement = !isAriaHiddenForbiddenOnElement(element);
+    if (isNotExcludedElement && isNotForbiddenElement) {
+      ariaHidden(element, show);
+    }
+  });
+}
+
+function findIndexOf<T>(items: readonly T[], callback: (item: T) => boolean): number {
+  let idx = -1;
+  items.some((item, index) => {
+    if (callback(item)) {
+      idx = index;
+      return true;
+    }
+    return false;
+  });
+  return idx;
+}
+
+function handleContainer(containerInfo: Container, props: ManagedModalProps) {
+  const restoreStyle: Array<{
+    /**
+     * CSS property name (HYPHEN CASE) to be modified.
+     */
+    property: string;
+    el: HTMLElement | SVGElement;
+    value: string;
+  }> = [];
+  const container = containerInfo.container;
+
+  if (!props.disableScrollLock) {
+    if (isOverflowing(container)) {
+      // Compute the size before applying overflow hidden to avoid any scroll jumps.
+      const scrollbarSize = getScrollbarSize(ownerDocument(container));
+
+      restoreStyle.push({
+        value: container.style.paddingRight,
+        property: 'padding-right',
+        el: container,
+      });
+      // Use computed style, here to get the real padding to add our scrollbar width.
+      container.style.paddingRight = `${getPaddingRight(container) + scrollbarSize}px`;
+
+      // .mui-fixed is a global helper.
+      const fixedElements = ownerDocument(container).querySelectorAll('.mui-fixed');
+      [].forEach.call(fixedElements, (element: HTMLElement | SVGElement) => {
+        restoreStyle.push({
+          value: element.style.paddingRight,
+          property: 'padding-right',
+          el: element,
+        });
+        element.style.paddingRight = `${getPaddingRight(element) + scrollbarSize}px`;
+      });
+    }
+
+    let scrollContainer: HTMLElement;
+
+    if (container.parentNode instanceof DocumentFragment) {
+      scrollContainer = ownerDocument(container).body;
+    } else {
+      // Support html overflow-y: auto for scroll stability between pages
+      // https://css-tricks.com/snippets/css/force-vertical-scrollbar/
+      const parent = container.parentElement;
+      const containerWindow = ownerWindow(container);
+      scrollContainer =
+        parent?.nodeName === 'HTML' &&
+        containerWindow.getComputedStyle(parent).overflowY === 'scroll'
+          ? parent
+          : container;
+    }
+
+    // Block the scroll even if no scrollbar is visible to account for mobile keyboard
+    // screensize shrink.
+    restoreStyle.push(
+      {
+        value: scrollContainer.style.overflow,
+        property: 'overflow',
+        el: scrollContainer,
+      },
+      {
+        value: scrollContainer.style.overflowX,
+        property: 'overflow-x',
+        el: scrollContainer,
+      },
+      {
+        value: scrollContainer.style.overflowY,
+        property: 'overflow-y',
+        el: scrollContainer,
+      },
+    );
+
+    scrollContainer.style.overflow = 'hidden';
+  }
+
+  const restore = () => {
+    restoreStyle.forEach(({ value, el, property }) => {
+      if (value) {
+        el.style.setProperty(property, value);
+      } else {
+        el.style.removeProperty(property);
+      }
+    });
+  };
+
+  return restore;
+}
+
+function getHiddenSiblings(container: Element) {
+  const hiddenSiblings: Element[] = [];
+  [].forEach.call(container.children, (element: Element) => {
+    if (element.getAttribute('aria-hidden') === 'true') {
+      hiddenSiblings.push(element);
+    }
+  });
+  return hiddenSiblings;
+}
+
+interface Modal {
+  mount: Element;
+  modalRef: Element;
+}
+
+interface Container {
+  container: HTMLElement;
+  hiddenSiblings: Element[];
+  modals: Modal[];
+  restore: null | (() => void);
+}
+
+/**
+ * @ignore - do not document.
+ *
+ * Proper state management for containers and the modals in those containers.
+ * Simplified, but inspired by react-overlay's ModalManager class.
+ * Used by the Modal to ensure proper styling of containers.
+ */
+export class ModalManager {
+  private containers: Container[];
+
+  private modals: Modal[];
+
+  constructor() {
+    this.modals = [];
+    this.containers = [];
+  }
+
+  add(modal: Modal, container: HTMLElement): number {
+    let modalIndex = this.modals.indexOf(modal);
+    if (modalIndex !== -1) {
+      return modalIndex;
+    }
+
+    modalIndex = this.modals.length;
+    this.modals.push(modal);
+
+    // If the modal we are adding is already in the DOM.
+    if (modal.modalRef) {
+      ariaHidden(modal.modalRef, false);
+    }
+
+    const hiddenSiblings = getHiddenSiblings(container);
+    ariaHiddenSiblings(container, modal.mount, modal.modalRef, hiddenSiblings, true);
+
+    const containerIndex = findIndexOf(this.containers, (item) => item.container === container);
+    if (containerIndex !== -1) {
+      this.containers[containerIndex].modals.push(modal);
+      return modalIndex;
+    }
+
+    this.containers.push({
+      modals: [modal],
+      container,
+      restore: null,
+      hiddenSiblings,
+    });
+
+    return modalIndex;
+  }
+
+  mount(modal: Modal, props: ManagedModalProps): void {
+    const containerIndex = findIndexOf(
+      this.containers,
+      (item) => item.modals.indexOf(modal) !== -1,
+    );
+    const containerInfo = this.containers[containerIndex];
+
+    if (!containerInfo.restore) {
+      containerInfo.restore = handleContainer(containerInfo, props);
+    }
+  }
+
+  remove(modal: Modal, ariaHiddenState = true): number {
+    const modalIndex = this.modals.indexOf(modal);
+
+    if (modalIndex === -1) {
+      return modalIndex;
+    }
+
+    const containerIndex = findIndexOf(
+      this.containers,
+      (item) => item.modals.indexOf(modal) !== -1,
+    );
+    const containerInfo = this.containers[containerIndex];
+
+    containerInfo.modals.splice(containerInfo.modals.indexOf(modal), 1);
+    this.modals.splice(modalIndex, 1);
+
+    // If that was the last modal in a container, clean up the container.
+    if (containerInfo.modals.length === 0) {
+      // The modal might be closed before it had the chance to be mounted in the DOM.
+      if (containerInfo.restore) {
+        containerInfo.restore();
+      }
+
+      if (modal.modalRef) {
+        // In case the modal wasn't in the DOM yet.
+        ariaHidden(modal.modalRef, ariaHiddenState);
+      }
+
+      ariaHiddenSiblings(
+        containerInfo.container,
+        modal.mount,
+        modal.modalRef,
+        containerInfo.hiddenSiblings,
+        false,
+      );
+      this.containers.splice(containerIndex, 1);
+    } else {
+      // Otherwise make sure the next top modal is visible to a screen reader.
+      const nextTop = containerInfo.modals[containerInfo.modals.length - 1];
+      // as soon as a modal is adding its modalRef is undefined. it can't set
+      // aria-hidden because the dom element doesn't exist either
+      // when modal was unmounted before modalRef gets null
+      if (nextTop.modalRef) {
+        ariaHidden(nextTop.modalRef, false);
+      }
+    }
+
+    return modalIndex;
+  }
+
+  isTopModal(modal: Modal): boolean {
+    return this.modals.length > 0 && this.modals[this.modals.length - 1] === modal;
+  }
+}
diff --git a/packages/mui-base/src/unstable_useModal/useModal.ts b/packages/mui-base/src/unstable_useModal/useModal.ts
new file mode 100644
index 00000000000000..3166acd289d6eb
--- /dev/null
+++ b/packages/mui-base/src/unstable_useModal/useModal.ts
@@ -0,0 +1,240 @@
+'use client';
+import * as React from 'react';
+import {
+  unstable_ownerDocument as ownerDocument,
+  unstable_useForkRef as useForkRef,
+  unstable_useEventCallback as useEventCallback,
+  unstable_createChainedFunction as createChainedFunction,
+} from '@mui/utils';
+import { EventHandlers, extractEventHandlers } from '../utils';
+import { ModalManager, ariaHidden } from './ModalManager';
+import {
+  UseModalParameters,
+  UseModalReturnValue,
+  UseModalRootSlotProps,
+  UseModalBackdropSlotProps,
+} from './useModal.types';
+
+function getContainer(container: UseModalParameters['container']) {
+  return typeof container === 'function' ? container() : container;
+}
+
+function getHasTransition(children: UseModalParameters['children']) {
+  return children ? children.props.hasOwnProperty('in') : false;
+}
+
+// A modal manager used to track and manage the state of open Modals.
+// Modals don't open on the server so this won't conflict with concurrent requests.
+const defaultManager = new ModalManager();
+/**
+ *
+ * Demos:
+ *
+ * - [Modal](https://mui.com/base-ui/react-modal/#hook)
+ *
+ * API:
+ *
+ * - [useModal API](https://mui.com/base-ui/react-modal/hooks-api/#use-modal)
+ */
+export function useModal(parameters: UseModalParameters): UseModalReturnValue {
+  const {
+    container,
+    disableEscapeKeyDown = false,
+    disableScrollLock = false,
+    // @ts-ignore internal logic - Base UI supports the manager as a prop too
+    manager = defaultManager,
+    closeAfterTransition = false,
+    onTransitionEnter,
+    onTransitionExited,
+    children,
+    onClose,
+    open,
+    rootRef,
+  } = parameters;
+
+  // @ts-ignore internal logic
+  const modal = React.useRef<{ modalRef: HTMLDivElement; mount: HTMLElement }>({});
+  const mountNodeRef = React.useRef<HTMLElement | null>(null);
+  const modalRef = React.useRef<HTMLDivElement>(null);
+  const handleRef = useForkRef(modalRef, rootRef);
+  const [exited, setExited] = React.useState(!open);
+  const hasTransition = getHasTransition(children);
+
+  let ariaHiddenProp = true;
+  if (parameters['aria-hidden'] === 'false' || parameters['aria-hidden'] === false) {
+    ariaHiddenProp = false;
+  }
+
+  const getDoc = () => ownerDocument(mountNodeRef.current);
+  const getModal = () => {
+    modal.current.modalRef = modalRef.current!;
+    modal.current.mount = mountNodeRef.current!;
+    return modal.current;
+  };
+
+  const handleMounted = () => {
+    manager.mount(getModal(), { disableScrollLock });
+
+    // Fix a bug on Chrome where the scroll isn't initially 0.
+    if (modalRef.current) {
+      modalRef.current.scrollTop = 0;
+    }
+  };
+
+  const handleOpen = useEventCallback(() => {
+    const resolvedContainer = getContainer(container) || getDoc().body;
+
+    manager.add(getModal(), resolvedContainer);
+
+    // The element was already mounted.
+    if (modalRef.current) {
+      handleMounted();
+    }
+  });
+
+  const isTopModal = React.useCallback(() => manager.isTopModal(getModal()), [manager]);
+
+  const handlePortalRef = useEventCallback((node: HTMLElement) => {
+    mountNodeRef.current = node;
+
+    if (!node) {
+      return;
+    }
+
+    if (open && isTopModal()) {
+      handleMounted();
+    } else if (modalRef.current) {
+      ariaHidden(modalRef.current, ariaHiddenProp);
+    }
+  });
+
+  const handleClose = React.useCallback(() => {
+    manager.remove(getModal(), ariaHiddenProp);
+  }, [ariaHiddenProp, manager]);
+
+  React.useEffect(() => {
+    return () => {
+      handleClose();
+    };
+  }, [handleClose]);
+
+  React.useEffect(() => {
+    if (open) {
+      handleOpen();
+    } else if (!hasTransition || !closeAfterTransition) {
+      handleClose();
+    }
+  }, [open, handleClose, hasTransition, closeAfterTransition, handleOpen]);
+
+  const createHandleKeyDown = (otherHandlers: EventHandlers) => (event: React.KeyboardEvent) => {
+    otherHandlers.onKeyDown?.(event);
+
+    // The handler doesn't take event.defaultPrevented into account:
+    //
+    // event.preventDefault() is meant to stop default behaviors like
+    // clicking a checkbox to check it, hitting a button to submit a form,
+    // and hitting left arrow to move the cursor in a text input etc.
+    // Only special HTML elements have these default behaviors.
+    if (
+      event.key !== 'Escape' ||
+      event.which === 229 || // Wait until IME is settled.
+      !isTopModal()
+    ) {
+      return;
+    }
+
+    if (!disableEscapeKeyDown) {
+      // Swallow the event, in case someone is listening for the escape key on the body.
+      event.stopPropagation();
+
+      if (onClose) {
+        onClose(event, 'escapeKeyDown');
+      }
+    }
+  };
+
+  const createHandleBackdropClick = (otherHandlers: EventHandlers) => (event: React.MouseEvent) => {
+    otherHandlers.onClick?.(event);
+
+    if (event.target !== event.currentTarget) {
+      return;
+    }
+
+    if (onClose) {
+      onClose(event, 'backdropClick');
+    }
+  };
+
+  const getRootProps = <TOther extends EventHandlers = {}>(
+    otherHandlers: TOther = {} as TOther,
+  ): UseModalRootSlotProps<TOther> => {
+    const propsEventHandlers = extractEventHandlers(parameters) as Partial<UseModalParameters>;
+
+    // The custom event handlers shouldn't be spread on the root element
+    delete propsEventHandlers.onTransitionEnter;
+    delete propsEventHandlers.onTransitionExited;
+
+    const externalEventHandlers = {
+      ...propsEventHandlers,
+      ...otherHandlers,
+    };
+
+    return {
+      role: 'presentation',
+      ...externalEventHandlers,
+      onKeyDown: createHandleKeyDown(externalEventHandlers),
+      ref: handleRef,
+    };
+  };
+
+  const getBackdropProps = <TOther extends EventHandlers = {}>(
+    otherHandlers: TOther = {} as TOther,
+  ): UseModalBackdropSlotProps<TOther> => {
+    const externalEventHandlers = otherHandlers;
+
+    return {
+      'aria-hidden': true,
+      ...externalEventHandlers,
+      onClick: createHandleBackdropClick(externalEventHandlers),
+      open,
+    };
+  };
+
+  const getTransitionProps = () => {
+    const handleEnter = () => {
+      setExited(false);
+
+      if (onTransitionEnter) {
+        onTransitionEnter();
+      }
+    };
+
+    const handleExited = () => {
+      setExited(true);
+
+      if (onTransitionExited) {
+        onTransitionExited();
+      }
+
+      if (closeAfterTransition) {
+        handleClose();
+      }
+    };
+
+    return {
+      onEnter: createChainedFunction(handleEnter, children?.props.onEnter),
+      onExited: createChainedFunction(handleExited, children?.props.onExited),
+    };
+  };
+
+  return {
+    getRootProps,
+    getBackdropProps,
+    getTransitionProps,
+    rootRef: handleRef,
+    portalRef: handlePortalRef,
+    isTopModal,
+    exited,
+    hasTransition,
+  };
+}
diff --git a/packages/mui-base/src/unstable_useModal/useModal.types.ts b/packages/mui-base/src/unstable_useModal/useModal.types.ts
new file mode 100644
index 00000000000000..ef7068b56f3a59
--- /dev/null
+++ b/packages/mui-base/src/unstable_useModal/useModal.types.ts
@@ -0,0 +1,123 @@
+import { PortalProps } from '../Portal';
+import { EventHandlers } from '../utils';
+
+export interface UseModalRootSlotOwnProps {
+  role: React.AriaRole;
+  onKeyDown: React.KeyboardEventHandler;
+  ref: React.RefCallback<Element> | null;
+}
+
+export interface UseModalBackdropSlotOwnProps {
+  'aria-hidden': React.AriaAttributes['aria-hidden'];
+  onClick: React.MouseEventHandler;
+  open?: boolean;
+}
+
+export type UseModalBackdropSlotProps<TOther = {}> = TOther & UseModalBackdropSlotOwnProps;
+
+export type UseModalRootSlotProps<TOther = {}> = TOther & UseModalRootSlotOwnProps;
+
+export type UseModalParameters = {
+  'aria-hidden'?: React.AriaAttributes['aria-hidden'];
+  /**
+   * A single child content element.
+   */
+  children: React.ReactElement<any> | undefined | null;
+  /**
+   * When set to true the Modal waits until a nested Transition is completed before closing.
+   * @default false
+   */
+  closeAfterTransition?: boolean;
+  /**
+   * An HTML element or function that returns one.
+   * The `container` will have the portal children appended to it.
+   *
+   * You can also provide a callback, which is called in a React layout effect.
+   * This lets you set the container from a ref, and also makes server-side rendering possible.
+   *
+   * By default, it uses the body of the top-level document object,
+   * so it's simply `document.body` most of the time.
+   */
+  container?: PortalProps['container'];
+  /**
+   * If `true`, hitting escape will not fire the `onClose` callback.
+   * @default false
+   */
+  disableEscapeKeyDown?: boolean;
+  /**
+   * Disable the scroll lock behavior.
+   * @default false
+   */
+  disableScrollLock?: boolean;
+  /**
+   * Callback fired when the component requests to be closed.
+   * The `reason` parameter can optionally be used to control the response to `onClose`.
+   *
+   * @param {object} event The event source of the callback.
+   * @param {string} reason Can be: `"escapeKeyDown"`, `"backdropClick"`.
+   */
+  onClose?: {
+    bivarianceHack(event: {}, reason: 'backdropClick' | 'escapeKeyDown'): void;
+  }['bivarianceHack'];
+  onKeyDown?: React.KeyboardEventHandler;
+  /**
+   * A function called when a transition enters.
+   */
+  onTransitionEnter?: () => void;
+  /**
+   * A function called when a transition has exited.
+   */
+  onTransitionExited?: () => void;
+  /**
+   * If `true`, the component is shown.
+   */
+  open: boolean;
+  rootRef: React.Ref<Element>;
+};
+
+export interface UseModalReturnValue {
+  /**
+   * Resolver for the root slot's props.
+   * @param externalProps props for the root slot
+   * @returns props that should be spread on the root slot
+   */
+  getRootProps: <TOther extends EventHandlers = {}>(
+    externalProps?: TOther,
+  ) => UseModalRootSlotProps<TOther>;
+  /**
+   * Resolver for the backdrop slot's props.
+   * @param externalProps props for the backdrop slot
+   * @returns props that should be spread on the backdrop slot
+   */
+  getBackdropProps: <TOther extends EventHandlers = {}>(
+    externalProps?: TOther,
+  ) => UseModalBackdropSlotProps<TOther>;
+  /**
+   * Resolver for the transition related props.
+   * @param externalProps props for the transition element
+   * @returns props that should be spread on the transition element
+   */
+  getTransitionProps: <TOther extends EventHandlers = {}>(
+    externalProps?: TOther,
+  ) => { onEnter: () => void; onExited: () => void };
+  /**
+   * A ref to the component's root DOM element.
+   */
+  rootRef: React.RefCallback<Element> | null;
+  /**
+   * A ref to the component's portal DOM element.
+   */
+  portalRef: React.RefCallback<Element> | null;
+  /**
+   * If `true`, the modal is the top most one.
+   */
+  isTopModal: () => boolean;
+  /**
+   * If `true`, the exiting transition finished (to be used for unmounting the component).
+   */
+  exited: boolean;
+  /**
+   * If `true`, the component's child is transition component.
+   */
+  hasTransition: boolean;
+}
diff --git a/packages/mui-base/src/useAutocomplete/useAutocomplete.spec.ts b/packages/mui-base/src/useAutocomplete/useAutocomplete.spec.ts
new file mode 100644
index 00000000000000..e7712ffdb1e4fe
--- /dev/null
+++ b/packages/mui-base/src/useAutocomplete/useAutocomplete.spec.ts
@@ -0,0 +1,184 @@
+import { expectType } from '@mui/types';
+import { useAutocomplete, FilterOptionsState } from '@mui/base/useAutocomplete';
+
+interface Person {
+  id: string;
+  name: string;
+}
+
+const persons: Person[] = [
+  { id: '1', name: 'Chris' },
+  { id: '2', name: 'Kim' },
+  { id: '3', name: 'Ben' },
+  { id: '4', name: 'Matt' },
+];
+
+function Component() {
+  // value type is inferred correctly when multiple is undefined
+  useAutocomplete({
+    options: ['1', '2', '3'],
+    onChange(event, value) {
+      expectType<string | null, typeof value>(value);
+    },
+  });
+
+  // value type is inferred correctly when multiple is false
+  useAutocomplete({
+    options: ['1', '2', '3'],
+    multiple: false,
+    onChange(event, value) {
+      expectType<string | null, typeof value>(value);
+    },
+  });
+
+  // value type is inferred correctly for type unions
+  useAutocomplete({
+    options: ['1', '2', '3', 4, true],
+    onChange(event, value) {
+      expectType<string | number | boolean | null, typeof value>(value);
+    },
+  });
+
+  // value type is inferred correctly for interface
+  useAutocomplete({
+    options: persons,
+    onChange(event, value) {
+      expectType<Person | null, typeof value>(value);
+    },
+  });
+
+  // value type is inferred correctly when value is set
+  useAutocomplete({
+    options: ['1', '2', '3'],
+    onChange(event, value) {
+      expectType<string | null, typeof value>(value);
+      value;
+    },
+    filterOptions(options, state) {
+      expectType<FilterOptionsState<string>, typeof state>(state);
+      expectType<string[], typeof options>(options);
+      return options;
+    },
+    getOptionLabel(option) {
+      expectType<string, typeof option>(option);
+      return option;
+    },
+    value: null,
+  });
+
+  // Multiple selection mode
+
+  // value type is inferred correctly for simple type
+  useAutocomplete({
+    options: ['1', '2', '3'],
+    multiple: true,
+    onChange(event, value) {
+      expectType<string[], typeof value>(value);
+      value;
+    },
+  });
+
+  // value type is inferred correctly for union type
+  useAutocomplete({
+    options: ['1', '2', '3', 4, true],
+    multiple: true,
+    onChange(event, value) {
+      expectType<Array<string | number | boolean>, typeof value>(value);
+    },
+  });
+
+  // value type is inferred correctly for interface
+  useAutocomplete({
+    options: persons,
+    multiple: true,
+    onChange(event, value) {
+      expectType<Person[], typeof value>(value);
+      value;
+    },
+  });
+
+  // no type inference conflict when value type is set explicitly
+  useAutocomplete({
+    options: persons,
+    multiple: true,
+    onChange(event, value: Person[]) {},
+  });
+
+  // options accepts const and value has correct type
+  useAutocomplete({
+    options: ['1', '2', '3'] as const,
+    onChange(event, value) {
+      expectType<'1' | '2' | '3' | null, typeof value>(value);
+    },
+  });
+
+  // Disable clearable
+
+  useAutocomplete({
+    options: ['1', '2', '3'],
+    disableClearable: true,
+    onChange(event, value) {
+      expectType<string, typeof value>(value);
+    },
+  });
+
+  useAutocomplete({
+    options: ['1', '2', '3'],
+    disableClearable: false,
+    onChange(event, value) {
+      expectType<string | null, typeof value>(value);
+    },
+  });
+
+  useAutocomplete({
+    options: ['1', '2', '3'],
+    onChange(event, value) {
+      expectType<string | null, typeof value>(value);
+    },
+  });
+
+  // Free solo
+  useAutocomplete({
+    options: persons,
+    onChange(event, value) {
+      expectType<string | Person | null, typeof value>(value);
+    },
+    freeSolo: true,
+  });
+
+  useAutocomplete({
+    options: persons,
+    disableClearable: true,
+    onChange(event, value) {
+      expectType<string | Person, typeof value>(value);
+    },
+    freeSolo: true,
+  });
+
+  useAutocomplete({
+    options: persons,
+    multiple: true,
+    onChange(event, value) {
+      expectType<Array<string | Person>, typeof value>(value);
+    },
+    freeSolo: true,
+  });
+
+  useAutocomplete({
+    options: persons,
+    getOptionLabel(option) {
+      expectType<string | Person, typeof option>(option);
+      return '';
+    },
+    freeSolo: true,
+  });
+
+  useAutocomplete({
+    options: persons,
+    getOptionKey(option) {
+      expectType<string | Person, typeof option>(option);
+      return '';
+    },
+    freeSolo: true,
+  });
+}
diff --git a/packages/mui-base/src/useAutocomplete/useAutocomplete.test.js b/packages/mui-base/src/useAutocomplete/useAutocomplete.test.js
new file mode 100644
index 00000000000000..438ac78cf52fff
--- /dev/null
+++ b/packages/mui-base/src/useAutocomplete/useAutocomplete.test.js
@@ -0,0 +1,398 @@
+import * as React from 'react';
+import { expect } from 'chai';
+import {
+  createRenderer,
+  screen,
+  ErrorBoundary,
+  act,
+  fireEvent,
+  reactMajor,
+} from '@mui/internal-test-utils';
+import { spy } from 'sinon';
+import { useAutocomplete, createFilterOptions } from '@mui/base/useAutocomplete';
+
+describe('useAutocomplete', () => {
+  const { render } = createRenderer();
+
+  it('should preserve DOM nodes of options when re-ordering', () => {
+    function Test(props) {
+      const { options } = props;
+      const {
+        groupedOptions,
+        getRootProps,
+        getInputLabelProps,
+        getInputProps,
+        getListboxProps,
+        getOptionProps,
+      } = useAutocomplete({
+        options,
+        open: true,
+      });
+
+      return (
+        <div>
+          <div {...getRootProps()}>
+            <label {...getInputLabelProps()}>useAutocomplete</label>
+            <input {...getInputProps()} />
+          </div>
+          {groupedOptions.length > 0 ? (
+            <ul {...getListboxProps()}>
+              {groupedOptions.map((option, index) => {
+                const { key, ...optionProps } = getOptionProps({ option, index });
+                return (
+                  <li key={key} {...optionProps}>
+                    {option}
+                  </li>
+                );
+              })}
+            </ul>
+          ) : null}
+        </div>
+      );
+    }
+
+    const { rerender } = render(<Test options={['foo', 'bar']} />);
+    const [fooOptionAsFirst, barOptionAsSecond] = screen.getAllByRole('option');
+    rerender(<Test options={['bar', 'foo']} />);
+    const [barOptionAsFirst, fooOptionAsSecond] = screen.getAllByRole('option');
+
+    // If the DOM nodes are not preserved VO will not read the first option again since it thinks it didn't change.
+    expect(fooOptionAsFirst).to.equal(fooOptionAsSecond);
+    expect(barOptionAsFirst).to.equal(barOptionAsSecond);
+  });
+
+  describe('createFilterOptions', () => {
+    it('defaults to getOptionLabel for text filtering', () => {
+      const filterOptions = createFilterOptions();
+
+      const getOptionLabel = (option) => option.name;
+      const options = [
+        {
+          id: '1234',
+          name: 'cat',
+        },
+        {
+          id: '5678',
+          name: 'dog',
+        },
+        {
+          id: '9abc',
+          name: 'emu',
+        },
+      ];
+
+      expect(filterOptions(options, { inputValue: 'a', getOptionLabel })).to.deep.equal([
+        options[0],
+      ]);
+    });
+
+    it('filters without error with empty option set', () => {
+      const filterOptions = createFilterOptions();
+
+      const getOptionLabel = (option) => option.name;
+      const options = [];
+
+      expect(filterOptions(options, { inputValue: 'a', getOptionLabel })).to.deep.equal([]);
+    });
+
+    describe('option: limit', () => {
+      it('limits the number of suggested options to be shown', () => {
+        const filterOptions = createFilterOptions({ limit: 2 });
+
+        const getOptionLabel = (option) => option.name;
+        const options = [
+          {
+            id: '1234',
+            name: 'a1',
+          },
+          {
+            id: '5678',
+            name: 'a2',
+          },
+          {
+            id: '9abc',
+            name: 'a3',
+          },
+          {
+            id: '9abc',
+            name: 'a4',
+          },
+        ];
+
+        expect(filterOptions(options, { inputValue: 'a', getOptionLabel })).to.deep.equal([
+          options[0],
+          options[1],
+        ]);
+      });
+    });
+
+    describe('option: matchFrom', () => {
+      let filterOptions;
+      let getOptionLabel;
+      let options;
+
+      beforeEach(() => {
+        filterOptions = createFilterOptions({ matchFrom: 'any' });
+        getOptionLabel = (option) => option.name;
+        options = [
+          {
+            id: '1234',
+            name: 'ab',
+          },
+          {
+            id: '5678',
+            name: 'ba',
+          },
+          {
+            id: '9abc',
+            name: 'ca',
+          },
+        ];
+      });
+
+      describe('any', () => {
+        it('show all results that match', () => {
+          expect(filterOptions(options, { inputValue: 'a', getOptionLabel })).to.deep.equal(
+            options,
+          );
+        });
+      });
+
+      describe('empty', () => {
+        it('does not call getOptionLabel if filter is empty', () => {
+          const getOptionLabelSpy = spy(getOptionLabel);
+          expect(
+            filterOptions(options, { inputValue: '', getOptionLabel: getOptionLabelSpy }),
+          ).to.deep.equal(options);
+          expect(getOptionLabelSpy.callCount).to.equal(0);
+        });
+      });
+
+      describe('start', () => {
+        it('show only results that start with search', () => {
+          expect(filterOptions(options, { inputValue: 'a', getOptionLabel })).to.deep.equal(
+            options,
+          );
+        });
+      });
+    });
+
+    describe('option: ignoreAccents', () => {
+      it('does not ignore accents', () => {
+        const filterOptions = createFilterOptions({ ignoreAccents: false });
+
+        const getOptionLabel = (option) => option.name;
+        const options = [
+          {
+            id: '1234',
+            name: 'áb',
+          },
+          {
+            id: '5678',
+            name: 'ab',
+          },
+          {
+            id: '9abc',
+            name: 'áe',
+          },
+          {
+            id: '9abc',
+            name: 'ae',
+          },
+        ];
+
+        expect(filterOptions(options, { inputValue: 'á', getOptionLabel })).to.deep.equal([
+          options[0],
+          options[2],
+        ]);
+      });
+    });
+
+    describe('option: ignoreCase', () => {
+      it('matches results with case insensitive', () => {
+        const filterOptions = createFilterOptions({ ignoreCase: false });
+
+        const getOptionLabel = (option) => option.name;
+        const options = [
+          {
+            id: '1234',
+            name: 'Ab',
+          },
+          {
+            id: '5678',
+            name: 'ab',
+          },
+          {
+            id: '9abc',
+            name: 'Ae',
+          },
+          {
+            id: '9abc',
+            name: 'ae',
+          },
+        ];
+
+        expect(filterOptions(options, { inputValue: 'A', getOptionLabel })).to.deep.equal([
+          options[0],
+          options[2],
+        ]);
+      });
+    });
+  });
+
+  it('should warn if the input is not binded', function test() {
+    // TODO is this fixed?
+    if (!/jsdom/.test(window.navigator.userAgent)) {
+      // can't catch render errors in the browser for unknown reason
+      // tried try-catch + error boundary + window onError preventDefault
+      this.skip();
+    }
+
+    function Test(props) {
+      const { options } = props;
+      const {
+        groupedOptions,
+        getRootProps,
+        getInputLabelProps,
+        // getInputProps,
+        getListboxProps,
+        getOptionProps,
+      } = useAutocomplete({
+        options,
+        open: true,
+      });
+
+      return (
+        <div>
+          <div {...getRootProps()}>
+            <label {...getInputLabelProps()}>useAutocomplete</label>
+          </div>
+          {groupedOptions.length > 0 ? (
+            <ul {...getListboxProps()}>
+              {groupedOptions.map((option, index) => {
+                const { key, ...optionProps } = getOptionProps({ option, index });
+                return (
+                  <li key={key} {...optionProps}>
+                    {option}
+                  </li>
+                );
+              })}
+            </ul>
+          ) : null}
+        </div>
+      );
+    }
+
+    const muiErrorMessage = 'MUI: Unable to find the input element.';
+    const aboveErrorUlElementMessage = 'The above error occurred in the <ul> component';
+    const aboveErrorTestComponentMessage = 'The above error occurred in the <Test> component';
+    const node16ErrorMessage =
+      "TypeError: Cannot read properties of null (reading 'removeAttribute')";
+    const olderNodeErrorMessage = "TypeError: Cannot read property 'removeAttribute' of null";
+
+    const nodeVersion = Number(process.versions.node.split('.')[0]);
+    const nodeErrorMessage = nodeVersion >= 16 ? node16ErrorMessage : olderNodeErrorMessage;
+
+    const defaultErrorMessages = [muiErrorMessage, nodeErrorMessage, nodeErrorMessage];
+
+    const errorMessagesByReactMajor = {
+      17: [
+        nodeErrorMessage,
+        muiErrorMessage,
+        nodeErrorMessage,
+        aboveErrorUlElementMessage,
+        aboveErrorTestComponentMessage,
+      ],
+      18: [
+        nodeErrorMessage,
+        muiErrorMessage,
+        nodeErrorMessage,
+        muiErrorMessage,
+        nodeErrorMessage,
+        aboveErrorUlElementMessage,
+        aboveErrorTestComponentMessage,
+        aboveErrorTestComponentMessage,
+      ],
+    };
+
+    const devErrorMessages = errorMessagesByReactMajor[reactMajor] || defaultErrorMessages;
+
+    expect(() => {
+      render(
+        <ErrorBoundary>
+          <Test options={['foo', 'bar']} />
+        </ErrorBoundary>,
+      );
+    }).toErrorDev(devErrorMessages);
+  });
+
+  describe('prop: freeSolo', () => {
+    it('should not reset if the component value does not change on blur', () => {
+      function Test(props) {
+        const { options } = props;
+        const { getInputProps } = useAutocomplete({ options, open: true, freeSolo: true });
+
+        return <input {...getInputProps()} />;
+      }
+      render(<Test options={['foo', 'bar']} />);
+      const input = screen.getByRole('combobox');
+
+      act(() => {
+        fireEvent.change(input, { target: { value: 'free' } });
+        input.blur();
+      });
+
+      expect(input.value).to.equal('free');
+    });
+  });
+
+  describe('getInputProps', () => {
+    it('should disable input element', () => {
+      function Test(props) {
+        const { options } = props;
+        const { getInputProps } = useAutocomplete({ options, disabled: true });
+
+        return <input {...getInputProps()} />;
+      }
+      render(<Test options={['foo', 'bar']} />);
+      const input = screen.getByRole('combobox');
+
+      expect(input).to.have.attribute('disabled');
+    });
+  });
+
+  it('should allow tuples or arrays as value when multiple=false', () => {
+    const defaultValue = ['bar'];
+
+    function Test() {
+      const { getClearProps, getInputProps } = useAutocomplete({
+        defaultValue,
+        disableClearable: false,
+        getOptionLabel: ([val]) => val,
+        isOptionEqualToValue: (option, value) => {
+          if (option === value) {
+            return true;
+          }
+          return option[0] === value[0];
+        },
+        multiple: false,
+        options: [['foo'], defaultValue, ['baz']],
+      });
+
+      return (
+        <div>
+          <input {...getInputProps()} />
+          <button data-testid="button" {...getClearProps()} />;
+        </div>
+      );
+    }
+
+    const { getByTestId } = render(<Test />);
+
+    const button = getByTestId('button');
+
+    expect(() => {
+      fireEvent.click(button);
+    }).not.to.throw();
+  });
+});
diff --git a/packages/mui-base/src/useBadge/useBadge.ts b/packages/mui-base/src/useBadge/useBadge.ts
new file mode 100644
index 00000000000000..19422269495fbe
--- /dev/null
+++ b/packages/mui-base/src/useBadge/useBadge.ts
@@ -0,0 +1,46 @@
+'use client';
+import * as React from 'react';
+import { usePreviousProps } from '@mui/utils';
+import { UseBadgeParameters, UseBadgeReturnValue } from './useBadge.types';
+
+/**
+ *
+ * Demos:
+ *
+ * - [Badge](https://mui.com/base-ui/react-badge/#hook)
+ *
+ * API:
+ *
+ * - [useBadge API](https://mui.com/base-ui/react-badge/hooks-api/#use-badge)
+ */
+export function useBadge(parameters: UseBadgeParameters): UseBadgeReturnValue {
+  const {
+    badgeContent: badgeContentProp,
+    invisible: invisibleProp = false,
+    max: maxProp = 99,
+    showZero = false,
+  } = parameters;
+
+  const prevProps = usePreviousProps({
+    badgeContent: badgeContentProp,
+    max: maxProp,
+  });
+
+  let invisible = invisibleProp;
+
+  if (invisibleProp === false && badgeContentProp === 0 && !showZero) {
+    invisible = true;
+  }
+
+  const { badgeContent, max = maxProp } = invisible ? prevProps : parameters;
+
+  const displayValue: React.ReactNode =
+    badgeContent && Number(badgeContent) > max ? `${max}+` : badgeContent;
+
+  return {
+    badgeContent,
+    invisible,
+    max,
+    displayValue,
+  };
+}
diff --git a/packages/mui-base/src/useBadge/useBadge.types.ts b/packages/mui-base/src/useBadge/useBadge.types.ts
new file mode 100644
index 00000000000000..be6ef34830c5f8
--- /dev/null
+++ b/packages/mui-base/src/useBadge/useBadge.types.ts
@@ -0,0 +1,40 @@
+export interface UseBadgeParameters {
+  /**
+   * The content rendered within the badge.
+   */
+  badgeContent?: React.ReactNode;
+  /**
+   * If `true`, the badge is invisible.
+   * @default false
+   */
+  invisible?: boolean;
+  /**
+   * Max count to show.
+   * @default 99
+   */
+  max?: number;
+  /**
+   * Controls whether the badge is hidden when `badgeContent` is zero.
+   * @default false
+   */
+  showZero?: boolean;
+}
+
+export interface UseBadgeReturnValue {
+  /**
+   * Defines the content that's displayed inside the badge.
+   */
+  badgeContent: React.ReactNode;
+  /**
+   * If `true`, the component will not be visible.
+   */
+  invisible: boolean;
+  /**
+   * Maximum number to be displayed in the badge.
+   */
+  max: number;
+  /**
+   * Value to be displayed in the badge. If `badgeContent` is greater than `max`, it will return `max+`.
+   */
+  displayValue: React.ReactNode;
+}
diff --git a/packages/mui-base/src/useSlider/useSlider.ts b/packages/mui-base/src/useSlider/useSlider.ts
new file mode 100644
index 00000000000000..5fe4fdf97ecb0e
--- /dev/null
+++ b/packages/mui-base/src/useSlider/useSlider.ts
@@ -0,0 +1,747 @@
+'use client';
+import * as React from 'react';
+import {
+  unstable_ownerDocument as ownerDocument,
+  unstable_useControlled as useControlled,
+  unstable_useEnhancedEffect as useEnhancedEffect,
+  unstable_useEventCallback as useEventCallback,
+  unstable_useForkRef as useForkRef,
+  unstable_isFocusVisible as isFocusVisible,
+  visuallyHidden,
+  clamp,
+} from '@mui/utils';
+import {
+  Mark,
+  UseSliderHiddenInputProps,
+  UseSliderParameters,
+  UseSliderReturnValue,
+  UseSliderRootSlotProps,
+  UseSliderThumbSlotProps,
+} from './useSlider.types';
+import { areArraysEqual, EventHandlers, extractEventHandlers } from '../utils';
+
+const INTENTIONAL_DRAG_COUNT_THRESHOLD = 2;
+
+function asc(a: number, b: number) {
+  return a - b;
+}
+
+function findClosest(values: number[], currentValue: number) {
+  const { index: closestIndex } =
+    values.reduce<{ distance: number; index: number } | null>(
+      (acc, value: number, index: number) => {
+        const distance = Math.abs(currentValue - value);
+
+        if (acc === null || distance < acc.distance || distance === acc.distance) {
+          return {
+            distance,
+            index,
+          };
+        }
+
+        return acc;
+      },
+      null,
+    ) ?? {};
+  return closestIndex;
+}
+
+function trackFinger(
+  event: TouchEvent | MouseEvent | React.MouseEvent,
+  touchId: React.RefObject<any>,
+) {
+  // The event is TouchEvent
+  if (touchId.current !== undefined && (event as TouchEvent).changedTouches) {
+    const touchEvent = event as TouchEvent;
+    for (let i = 0; i < touchEvent.changedTouches.length; i += 1) {
+      const touch = touchEvent.changedTouches[i];
+      if (touch.identifier === touchId.current) {
+        return {
+          x: touch.clientX,
+          y: touch.clientY,
+        };
+      }
+    }
+
+    return false;
+  }
+
+  // The event is MouseEvent
+  return {
+    x: (event as MouseEvent).clientX,
+    y: (event as MouseEvent).clientY,
+  };
+}
+
+export function valueToPercent(value: number, min: number, max: number) {
+  return ((value - min) * 100) / (max - min);
+}
+
+function percentToValue(percent: number, min: number, max: number) {
+  return (max - min) * percent + min;
+}
+
+function getDecimalPrecision(num: number) {
+  // This handles the case when num is very small (0.00000001), js will turn this into 1e-8.
+  // When num is bigger than 1 or less than -1 it won't get converted to this notation so it's fine.
+  if (Math.abs(num) < 1) {
+    const parts = num.toExponential().split('e-');
+    const matissaDecimalPart = parts[0].split('.')[1];
+    return (matissaDecimalPart ? matissaDecimalPart.length : 0) + parseInt(parts[1], 10);
+  }
+
+  const decimalPart = num.toString().split('.')[1];
+  return decimalPart ? decimalPart.length : 0;
+}
+
+function roundValueToStep(value: number, step: number, min: number) {
+  const nearest = Math.round((value - min) / step) * step + min;
+  return Number(nearest.toFixed(getDecimalPrecision(step)));
+}
+
+function setValueIndex({
+  values,
+  newValue,
+  index,
+}: {
+  values: number[];
+  newValue: number;
+  index: number;
+}) {
+  const output = values.slice();
+  output[index] = newValue;
+  return output.sort(asc);
+}
+
+function focusThumb({
+  sliderRef,
+  activeIndex,
+  setActive,
+}: {
+  sliderRef: React.RefObject<any>;
+  activeIndex: number;
+  setActive?: (num: number) => void;
+}) {
+  const doc = ownerDocument(sliderRef.current);
+  if (
+    !sliderRef.current?.contains(doc.activeElement) ||
+    Number(doc?.activeElement?.getAttribute('data-index')) !== activeIndex
+  ) {
+    sliderRef.current?.querySelector(`[type="range"][data-index="${activeIndex}"]`).focus();
+  }
+
+  if (setActive) {
+    setActive(activeIndex);
+  }
+}
+
+function areValuesEqual(
+  newValue: number | ReadonlyArray<number>,
+  oldValue: number | ReadonlyArray<number>,
+): boolean {
+  if (typeof newValue === 'number' && typeof oldValue === 'number') {
+    return newValue === oldValue;
+  }
+  if (typeof newValue === 'object' && typeof oldValue === 'object') {
+    return areArraysEqual(newValue, oldValue);
+  }
+  return false;
+}
+
+const axisProps = {
+  horizontal: {
+    offset: (percent: number) => ({ left: `${percent}%` }),
+    leap: (percent: number) => ({ width: `${percent}%` }),
+  },
+  'horizontal-reverse': {
+    offset: (percent: number) => ({ right: `${percent}%` }),
+    leap: (percent: number) => ({ width: `${percent}%` }),
+  },
+  vertical: {
+    offset: (percent: number) => ({ bottom: `${percent}%` }),
+    leap: (percent: number) => ({ height: `${percent}%` }),
+  },
+};
+
+export const Identity = (x: any) => x;
+
+// TODO: remove support for Safari < 13.
+// https://caniuse.com/#search=touch-action
+//
+// Safari, on iOS, supports touch action since v13.
+// Over 80% of the iOS phones are compatible
+// in August 2020.
+// Utilizing the CSS.supports method to check if touch-action is supported.
+// Since CSS.supports is supported on all but Edge@12 and IE and touch-action
+// is supported on both Edge@12 and IE if CSS.supports is not available that means that
+// touch-action will be supported
+let cachedSupportsTouchActionNone: any;
+function doesSupportTouchActionNone() {
+  if (cachedSupportsTouchActionNone === undefined) {
+    if (typeof CSS !== 'undefined' && typeof CSS.supports === 'function') {
+      cachedSupportsTouchActionNone = CSS.supports('touch-action', 'none');
+    } else {
+      cachedSupportsTouchActionNone = true;
+    }
+  }
+  return cachedSupportsTouchActionNone;
+}
+/**
+ *
+ * Demos:
+ *
+ * - [Slider](https://mui.com/base-ui/react-slider/#hook)
+ *
+ * API:
+ *
+ * - [useSlider API](https://mui.com/base-ui/react-slider/hooks-api/#use-slider)
+ */
+export function useSlider(parameters: UseSliderParameters): UseSliderReturnValue {
+  const {
+    'aria-labelledby': ariaLabelledby,
+    defaultValue,
+    disabled = false,
+    disableSwap = false,
+    isRtl = false,
+    marks: marksProp = false,
+    max = 100,
+    min = 0,
+    name,
+    onChange,
+    onChangeCommitted,
+    orientation = 'horizontal',
+    rootRef: ref,
+    scale = Identity,
+    step = 1,
+    shiftStep = 10,
+    tabIndex,
+    value: valueProp,
+  } = parameters;
+
+  const touchId = React.useRef<number | undefined>(undefined);
+  // We can't use the :active browser pseudo-classes.
+  // - The active state isn't triggered when clicking on the rail.
+  // - The active state isn't transferred when inversing a range slider.
+  const [active, setActive] = React.useState(-1);
+  const [open, setOpen] = React.useState(-1);
+  const [dragging, setDragging] = React.useState(false);
+  const moveCount = React.useRef(0);
+
+  const [valueDerived, setValueState] = useControlled({
+    controlled: valueProp,
+    default: defaultValue ?? min,
+    name: 'Slider',
+  });
+
+  const handleChange =
+    onChange &&
+    ((event: Event | React.SyntheticEvent, value: number | number[], thumbIndex: number) => {
+      // Redefine target to allow name and value to be read.
+      // This allows seamless integration with the most popular form libraries.
+      // https://github.com/mui/material-ui/issues/13485#issuecomment-676048492
+      // Clone the event to not override `target` of the original event.
+      const nativeEvent = (event as React.SyntheticEvent).nativeEvent || event;
+      // @ts-ignore The nativeEvent is function, not object
+      const clonedEvent = new nativeEvent.constructor(nativeEvent.type, nativeEvent);
+
+      Object.defineProperty(clonedEvent, 'target', {
+        writable: true,
+        value: { value, name },
+      });
+
+      onChange(clonedEvent, value, thumbIndex);
+    });
+
+  const range = Array.isArray(valueDerived);
+  let values = range ? valueDerived.slice().sort(asc) : [valueDerived];
+  values = values.map((value) => (value == null ? min : clamp(value, min, max)));
+
+  const marks =
+    marksProp === true && step !== null
+      ? [...Array(Math.floor((max - min) / step) + 1)].map((_, index) => ({
+          value: min + step * index,
+        }))
+      : marksProp || [];
+
+  const marksValues = (marks as Mark[]).map((mark: Mark) => mark.value);
+
+  const [focusedThumbIndex, setFocusedThumbIndex] = React.useState(-1);
+
+  const sliderRef = React.useRef<HTMLSpanElement | null>(null);
+  const handleRef = useForkRef(ref, sliderRef);
+
+  const createHandleHiddenInputFocus =
+    (otherHandlers: EventHandlers) => (event: React.FocusEvent) => {
+      const index = Number(event.currentTarget.getAttribute('data-index'));
+      if (isFocusVisible(event.target)) {
+        setFocusedThumbIndex(index);
+      }
+      setOpen(index);
+      otherHandlers?.onFocus?.(event);
+    };
+  const createHandleHiddenInputBlur =
+    (otherHandlers: EventHandlers) => (event: React.FocusEvent) => {
+      if (!isFocusVisible(event.target)) {
+        setFocusedThumbIndex(-1);
+      }
+      setOpen(-1);
+      otherHandlers?.onBlur?.(event);
+    };
+
+  const changeValue = (event: React.KeyboardEvent | React.ChangeEvent, valueInput: number) => {
+    const index = Number(event.currentTarget.getAttribute('data-index'));
+    const value = values[index];
+    const marksIndex = marksValues.indexOf(value);
+    let newValue: number | number[] = valueInput;
+
+    if (marks && step == null) {
+      const maxMarksValue = marksValues[marksValues.length - 1];
+      if (newValue > maxMarksValue) {
+        newValue = maxMarksValue;
+      } else if (newValue < marksValues[0]) {
+        newValue = marksValues[0];
+      } else {
+        newValue = newValue < value ? marksValues[marksIndex - 1] : marksValues[marksIndex + 1];
+      }
+    }
+
+    newValue = clamp(newValue, min, max);
+
+    if (range) {
+      // Bound the new value to the thumb's neighbours.
+      if (disableSwap) {
+        newValue = clamp(newValue, values[index - 1] || -Infinity, values[index + 1] || Infinity);
+      }
+
+      const previousValue = newValue;
+      newValue = setValueIndex({
+        values,
+        newValue,
+        index,
+      });
+
+      let activeIndex = index;
+
+      // Potentially swap the index if needed.
+      if (!disableSwap) {
+        activeIndex = newValue.indexOf(previousValue);
+      }
+
+      focusThumb({ sliderRef, activeIndex });
+    }
+
+    setValueState(newValue);
+    setFocusedThumbIndex(index);
+
+    if (handleChange && !areValuesEqual(newValue, valueDerived)) {
+      handleChange(event, newValue, index);
+    }
+
+    if (onChangeCommitted) {
+      onChangeCommitted(event, newValue);
+    }
+  };
+
+  const createHandleHiddenInputKeyDown =
+    (otherHandlers: EventHandlers) => (event: React.KeyboardEvent) => {
+      // The Shift + Up/Down keyboard shortcuts for moving the slider makes sense to be supported
+      // only if the step is defined. If the step is null, this means tha the marks are used for specifying the valid values.
+      if (step !== null) {
+        const index = Number(event.currentTarget.getAttribute('data-index'));
+        const value = values[index];
+
+        let newValue = null;
+        if (
+          ((event.key === 'ArrowLeft' || event.key === 'ArrowDown') && event.shiftKey) ||
+          event.key === 'PageDown'
+        ) {
+          newValue = Math.max(value - shiftStep, min);
+        } else if (
+          ((event.key === 'ArrowRight' || event.key === 'ArrowUp') && event.shiftKey) ||
+          event.key === 'PageUp'
+        ) {
+          newValue = Math.min(value + shiftStep, max);
+        }
+
+        if (newValue !== null) {
+          changeValue(event, newValue);
+          event.preventDefault();
+        }
+      }
+
+      otherHandlers?.onKeyDown?.(event);
+    };
+
+  useEnhancedEffect(() => {
+    if (disabled && sliderRef.current!.contains(document.activeElement)) {
+      // This is necessary because Firefox and Safari will keep focus
+      // on a disabled element:
+      // https://codesandbox.io/p/sandbox/mui-pr-22247-forked-h151h?file=/src/App.js
+      // @ts-ignore
+      document.activeElement?.blur();
+    }
+  }, [disabled]);
+
+  if (disabled && active !== -1) {
+    setActive(-1);
+  }
+  if (disabled && focusedThumbIndex !== -1) {
+    setFocusedThumbIndex(-1);
+  }
+
+  const createHandleHiddenInputChange =
+    (otherHandlers: EventHandlers) => (event: React.ChangeEvent) => {
+      otherHandlers.onChange?.(event);
+      // @ts-ignore
+      changeValue(event, event.target.valueAsNumber);
+    };
+
+  const previousIndex = React.useRef<number | undefined>(undefined);
+  let axis = orientation;
+  if (isRtl && orientation === 'horizontal') {
+    axis += '-reverse';
+  }
+
+  const getFingerNewValue = ({
+    finger,
+    move = false,
+  }: {
+    finger: { x: number; y: number };
+    move?: boolean;
+  }) => {
+    const { current: slider } = sliderRef;
+    const { width, height, bottom, left } = slider!.getBoundingClientRect();
+    let percent;
+
+    if (axis.startsWith('vertical')) {
+      percent = (bottom - finger.y) / height;
+    } else {
+      percent = (finger.x - left) / width;
+    }
+
+    if (axis.indexOf('-reverse') !== -1) {
+      percent = 1 - percent;
+    }
+
+    let newValue;
+    newValue = percentToValue(percent, min, max);
+    if (step) {
+      newValue = roundValueToStep(newValue, step, min);
+    } else {
+      const closestIndex = findClosest(marksValues, newValue);
+      newValue = marksValues[closestIndex!];
+    }
+
+    newValue = clamp(newValue, min, max);
+    let activeIndex = 0;
+
+    if (range) {
+      if (!move) {
+        activeIndex = findClosest(values, newValue)!;
+      } else {
+        activeIndex = previousIndex.current!;
+      }
+
+      // Bound the new value to the thumb's neighbours.
+      if (disableSwap) {
+        newValue = clamp(
+          newValue,
+          values[activeIndex - 1] || -Infinity,
+          values[activeIndex + 1] || Infinity,
+        );
+      }
+
+      const previousValue = newValue;
+      newValue = setValueIndex({
+        values,
+        newValue,
+        index: activeIndex,
+      });
+
+      // Potentially swap the index if needed.
+      if (!(disableSwap && move)) {
+        activeIndex = newValue.indexOf(previousValue);
+        previousIndex.current = activeIndex;
+      }
+    }
+
+    return { newValue, activeIndex };
+  };
+
+  const handleTouchMove = useEventCallback((nativeEvent: TouchEvent | MouseEvent) => {
+    const finger = trackFinger(nativeEvent, touchId);
+
+    if (!finger) {
+      return;
+    }
+
+    moveCount.current += 1;
+
+    // Cancel move in case some other element consumed a mouseup event and it was not fired.
+    // @ts-ignore buttons doesn't not exists on touch event
+    if (nativeEvent.type === 'mousemove' && nativeEvent.buttons === 0) {
+      // eslint-disable-next-line @typescript-eslint/no-use-before-define
+      handleTouchEnd(nativeEvent);
+      return;
+    }
+
+    const { newValue, activeIndex } = getFingerNewValue({
+      finger,
+      move: true,
+    });
+
+    focusThumb({ sliderRef, activeIndex, setActive });
+    setValueState(newValue);
+
+    if (!dragging && moveCount.current > INTENTIONAL_DRAG_COUNT_THRESHOLD) {
+      setDragging(true);
+    }
+
+    if (handleChange && !areValuesEqual(newValue, valueDerived)) {
+      handleChange(nativeEvent, newValue, activeIndex);
+    }
+  });
+
+  const handleTouchEnd = useEventCallback((nativeEvent: TouchEvent | MouseEvent) => {
+    const finger = trackFinger(nativeEvent, touchId);
+    setDragging(false);
+
+    if (!finger) {
+      return;
+    }
+
+    const { newValue } = getFingerNewValue({ finger, move: true });
+
+    setActive(-1);
+    if (nativeEvent.type === 'touchend') {
+      setOpen(-1);
+    }
+
+    if (onChangeCommitted) {
+      onChangeCommitted(nativeEvent, newValue);
+    }
+
+    touchId.current = undefined;
+
+    // eslint-disable-next-line @typescript-eslint/no-use-before-define
+    stopListening();
+  });
+
+  const handleTouchStart = useEventCallback((nativeEvent: TouchEvent) => {
+    if (disabled) {
+      return;
+    }
+    // If touch-action: none; is not supported we need to prevent the scroll manually.
+    if (!doesSupportTouchActionNone()) {
+      nativeEvent.preventDefault();
+    }
+
+    const touch = nativeEvent.changedTouches[0];
+    if (touch != null) {
+      // A number that uniquely identifies the current finger in the touch session.
+      touchId.current = touch.identifier;
+    }
+    const finger = trackFinger(nativeEvent, touchId);
+    if (finger !== false) {
+      const { newValue, activeIndex } = getFingerNewValue({ finger });
+      focusThumb({ sliderRef, activeIndex, setActive });
+
+      setValueState(newValue);
+
+      if (handleChange && !areValuesEqual(newValue, valueDerived)) {
+        handleChange(nativeEvent, newValue, activeIndex);
+      }
+    }
+
+    moveCount.current = 0;
+    const doc = ownerDocument(sliderRef.current);
+    doc.addEventListener('touchmove', handleTouchMove, { passive: true });
+    doc.addEventListener('touchend', handleTouchEnd, { passive: true });
+  });
+
+  const stopListening = React.useCallback(() => {
+    const doc = ownerDocument(sliderRef.current);
+    doc.removeEventListener('mousemove', handleTouchMove);
+    doc.removeEventListener('mouseup', handleTouchEnd);
+    doc.removeEventListener('touchmove', handleTouchMove);
+    doc.removeEventListener('touchend', handleTouchEnd);
+  }, [handleTouchEnd, handleTouchMove]);
+
+  React.useEffect(() => {
+    const { current: slider } = sliderRef;
+    slider!.addEventListener('touchstart', handleTouchStart, {
+      passive: doesSupportTouchActionNone(),
+    });
+
+    return () => {
+      slider!.removeEventListener('touchstart', handleTouchStart);
+
+      stopListening();
+    };
+  }, [stopListening, handleTouchStart]);
+
+  React.useEffect(() => {
+    if (disabled) {
+      stopListening();
+    }
+  }, [disabled, stopListening]);
+
+  const createHandleMouseDown =
+    (otherHandlers: EventHandlers) => (event: React.MouseEvent<HTMLSpanElement>) => {
+      otherHandlers.onMouseDown?.(event);
+      if (disabled) {
+        return;
+      }
+
+      if (event.defaultPrevented) {
+        return;
+      }
+
+      // Only handle left clicks
+      if (event.button !== 0) {
+        return;
+      }
+
+      // Avoid text selection
+      event.preventDefault();
+      const finger = trackFinger(event, touchId);
+      if (finger !== false) {
+        const { newValue, activeIndex } = getFingerNewValue({ finger });
+        focusThumb({ sliderRef, activeIndex, setActive });
+
+        setValueState(newValue);
+
+        if (handleChange && !areValuesEqual(newValue, valueDerived)) {
+          handleChange(event, newValue, activeIndex);
+        }
+      }
+
+      moveCount.current = 0;
+      const doc = ownerDocument(sliderRef.current);
+      doc.addEventListener('mousemove', handleTouchMove, { passive: true });
+      doc.addEventListener('mouseup', handleTouchEnd);
+    };
+
+  const trackOffset = valueToPercent(range ? values[0] : min, min, max);
+  const trackLeap = valueToPercent(values[values.length - 1], min, max) - trackOffset;
+
+  const getRootProps = <ExternalProps extends Record<string, unknown> = {}>(
+    externalProps: ExternalProps = {} as ExternalProps,
+  ): UseSliderRootSlotProps<ExternalProps> => {
+    const externalHandlers = extractEventHandlers(externalProps);
+
+    const ownEventHandlers = {
+      onMouseDown: createHandleMouseDown(externalHandlers || {}),
+    };
+
+    const mergedEventHandlers = {
+      ...externalHandlers,
+      ...ownEventHandlers,
+    };
+
+    return {
+      ...externalProps,
+      ref: handleRef,
+      ...mergedEventHandlers,
+    };
+  };
+
+  const createHandleMouseOver =
+    (otherHandlers: EventHandlers) => (event: React.MouseEvent<HTMLSpanElement, MouseEvent>) => {
+      otherHandlers.onMouseOver?.(event);
+
+      const index = Number(event.currentTarget.getAttribute('data-index'));
+      setOpen(index);
+    };
+
+  const createHandleMouseLeave =
+    (otherHandlers: EventHandlers) => (event: React.MouseEvent<HTMLSpanElement, MouseEvent>) => {
+      otherHandlers.onMouseLeave?.(event);
+
+      setOpen(-1);
+    };
+
+  const getThumbProps = <ExternalProps extends Record<string, unknown> = {}>(
+    externalProps: ExternalProps = {} as ExternalProps,
+  ): UseSliderThumbSlotProps<ExternalProps> => {
+    const externalHandlers = extractEventHandlers(externalProps);
+
+    const ownEventHandlers = {
+      onMouseOver: createHandleMouseOver(externalHandlers || {}),
+      onMouseLeave: createHandleMouseLeave(externalHandlers || {}),
+    };
+
+    return {
+      ...externalProps,
+      ...externalHandlers,
+      ...ownEventHandlers,
+    };
+  };
+
+  const getThumbStyle = (index: number) => {
+    return {
+      // So the non active thumb doesn't show its label on hover.
+      pointerEvents: active !== -1 && active !== index ? 'none' : undefined,
+    };
+  };
+
+  const getHiddenInputProps = <ExternalProps extends Record<string, unknown> = {}>(
+    externalProps: ExternalProps = {} as ExternalProps,
+  ): UseSliderHiddenInputProps<ExternalProps> => {
+    const externalHandlers = extractEventHandlers(externalProps);
+
+    const ownEventHandlers = {
+      onChange: createHandleHiddenInputChange(externalHandlers || {}),
+      onFocus: createHandleHiddenInputFocus(externalHandlers || {}),
+      onBlur: createHandleHiddenInputBlur(externalHandlers || {}),
+      onKeyDown: createHandleHiddenInputKeyDown(externalHandlers || {}),
+    };
+
+    const mergedEventHandlers = {
+      ...externalHandlers,
+      ...ownEventHandlers,
+    };
+
+    return {
+      tabIndex,
+      'aria-labelledby': ariaLabelledby,
+      'aria-orientation': orientation,
+      'aria-valuemax': scale(max),
+      'aria-valuemin': scale(min),
+      name,
+      type: 'range',
+      min: parameters.min,
+      max: parameters.max,
+      step: parameters.step === null && parameters.marks ? 'any' : (parameters.step ?? undefined),
+      disabled,
+      ...externalProps,
+      ...mergedEventHandlers,
+      style: {
+        ...visuallyHidden,
+        direction: isRtl ? 'rtl' : 'ltr',
+        // So that VoiceOver's focus indicator matches the thumb's dimensions
+        width: '100%',
+        height: '100%',
+      },
+    };
+  };
+
+  return {
+    active,
+    axis: axis as keyof typeof axisProps,
+    axisProps,
+    dragging,
+    focusedThumbIndex,
+    getHiddenInputProps,
+    getRootProps,
+    getThumbProps,
+    marks: marks as Mark[],
+    open,
+    range,
+    rootRef: handleRef,
+    trackLeap,
+    trackOffset,
+    values,
+    getThumbStyle,
+  };
+}
diff --git a/packages/mui-base/src/useSlider/useSlider.types.ts b/packages/mui-base/src/useSlider/useSlider.types.ts
new file mode 100644
index 00000000000000..38f411b5df6335
--- /dev/null
+++ b/packages/mui-base/src/useSlider/useSlider.types.ts
@@ -0,0 +1,259 @@
+import * as React from 'react';
+
+export interface UseSliderParameters {
+  /**
+   * The id of the element containing a label for the slider.
+   */
+  'aria-labelledby'?: string;
+  /**
+   * The default value. Use when the component is not controlled.
+   */
+  defaultValue?: number | ReadonlyArray<number>;
+  /**
+   * If `true`, the component is disabled.
+   * @default false
+   */
+  disabled?: boolean;
+  /**
+   * If `true`, the active thumb doesn't swap when moving pointer over a thumb while dragging another thumb.
+   * @default false
+   */
+  disableSwap?: boolean;
+  /**
+   * If `true` the Slider will be rendered right-to-left (with the lowest value on the right-hand side).
+   * @default false
+   */
+  isRtl?: boolean;
+  /**
+   * Marks indicate predetermined values to which the user can move the slider.
+   * If `true` the marks are spaced according the value of the `step` prop.
+   * If an array, it should contain objects with `value` and an optional `label` keys.
+   * @default false
+   */
+  marks?: boolean | ReadonlyArray<Mark>;
+  /**
+   * The maximum allowed value of the slider.
+   * Should not be equal to min.
+   * @default 100
+   */
+  max?: number;
+  /**
+   * The minimum allowed value of the slider.
+   * Should not be equal to max.
+   * @default 0
+   */
+  min?: number;
+  /**
+   * Name attribute of the hidden `input` element.
+   */
+  name?: string;
+  /**
+   * Callback function that is fired when the slider's value changed.
+   *
+   * @param {Event} event The event source of the callback.
+   * You can pull out the new value by accessing `event.target.value` (any).
+   * **Warning**: This is a generic event not a change event.
+   * @param {number | number[]} value The new value.
+   * @param {number} activeThumb Index of the currently moved thumb.
+   */
+  onChange?: (event: Event, value: number | number[], activeThumb: number) => void;
+  /**
+   * Callback function that is fired when the `mouseup` is triggered.
+   *
+   * @param {React.SyntheticEvent | Event} event The event source of the callback. **Warning**: This is a generic event not a change event.
+   * @param {number | number[]} value The new value.
+   */
+  onChangeCommitted?: (event: React.SyntheticEvent | Event, value: number | number[]) => void;
+  /**
+   * The component orientation.
+   * @default 'horizontal'
+   */
+  orientation?: 'horizontal' | 'vertical';
+  /**
+   * The ref attached to the root of the Slider.
+   */
+  rootRef?: React.Ref<Element>;
+  /**
+   * A transformation function, to change the scale of the slider.
+   * @param {any} x
+   * @returns {any}
+   * @default function Identity(x) {
+   *   return x;
+   * }
+   */
+  scale?: (value: number) => number;
+  /**
+   * The granularity with which the slider can step through values when using Page Up/Page Down or Shift + Arrow Up/Arrow Down.
+   * @default 10
+   */
+  shiftStep?: number;
+  /**
+   * The granularity with which the slider can step through values. (A "discrete" slider.)
+   * The `min` prop serves as the origin for the valid values.
+   * We recommend (max - min) to be evenly divisible by the step.
+   *
+   * When step is `null`, the thumb can only be slid onto marks provided with the `marks` prop.
+   * @default 1
+   */
+  step?: number | null;
+  /**
+   * Tab index attribute of the hidden `input` element.
+   */
+  tabIndex?: number;
+  /**
+   * The value of the slider.
+   * For ranged sliders, provide an array with two values.
+   */
+  value?: number | ReadonlyArray<number>;
+}
+
+export interface Mark {
+  value: number;
+  label?: React.ReactNode;
+}
+
+export type UseSliderRootSlotOwnProps = {
+  onMouseDown: React.MouseEventHandler;
+  ref: React.RefCallback<Element> | null;
+};
+
+export type UseSliderRootSlotProps<ExternalProps = {}> = Omit<
+  ExternalProps,
+  keyof UseSliderRootSlotOwnProps
+> &
+  UseSliderRootSlotOwnProps;
+
+export type UseSliderThumbSlotOwnProps = {
+  onMouseLeave: React.MouseEventHandler;
+  onMouseOver: React.MouseEventHandler;
+};
+
+export type UseSliderThumbSlotProps<ExternalProps = {}> = Omit<
+  ExternalProps,
+  keyof UseSliderThumbSlotOwnProps
+> &
+  UseSliderThumbSlotOwnProps;
+
+export type UseSliderHiddenInputOwnProps = {
+  'aria-labelledby'?: string;
+  'aria-orientation'?: React.AriaAttributes['aria-orientation'];
+  'aria-valuemax'?: React.AriaAttributes['aria-valuemax'];
+  'aria-valuemin'?: React.AriaAttributes['aria-valuemin'];
+  disabled: boolean;
+  name?: string;
+  onBlur: React.FocusEventHandler;
+  onChange: React.ChangeEventHandler;
+  onFocus: React.FocusEventHandler;
+  step?: number | 'any';
+  style: React.CSSProperties;
+  tabIndex?: number;
+  type?: React.InputHTMLAttributes<HTMLInputElement>['type'];
+};
+
+export type UseSliderHiddenInputProps<ExternalProps = {}> = Omit<
+  ExternalProps,
+  keyof UseSliderHiddenInputOwnProps
+> &
+  UseSliderHiddenInputOwnProps;
+
+export type Axis = 'horizontal' | 'vertical' | 'horizontal-reverse';
+
+export interface AxisProps<T extends Axis> {
+  offset: (
+    percent: number,
+  ) => T extends 'horizontal'
+    ? { left: string }
+    : T extends 'vertical'
+      ? { bottom: string }
+      : T extends 'horizontal-reverse'
+        ? { right: string }
+        : never;
+  leap: (
+    percent: number,
+  ) => T extends 'horizontal' | 'horizontal-reverse'
+    ? { width: string }
+    : T extends 'vertical'
+      ? { height: string }
+      : never;
+}
+
+export interface UseSliderReturnValue {
+  /**
+   * The active index of the slider.
+   */
+  active: number;
+  /**
+   * The orientation of the slider.
+   */
+  axis: Axis;
+  /**
+   * Returns the `offset` and `leap` methods to calculate the positioning styles based on the slider axis.
+   */
+  axisProps: { [key in Axis]: AxisProps<key> };
+  /**
+   * If `true`, the slider is being dragged.
+   */
+  dragging: boolean;
+  /**
+   * The index of the thumb which is focused on the slider.
+   */
+  focusedThumbIndex: number;
+  /**
+   * Resolver for the hidden input slot's props.
+   * @param externalProps props for the hidden input slot
+   * @returns props that should be spread on the hidden input slot
+   */
+  getHiddenInputProps: <ExternalProps extends Record<string, unknown> = {}>(
+    externalProps?: ExternalProps,
+  ) => UseSliderHiddenInputProps<ExternalProps>;
+  /**
+   * Resolver for the root slot's props.
+   * @param externalProps props for the root slot
+   * @returns props that should be spread on the root slot
+   */
+  getRootProps: <ExternalProps extends Record<string, unknown> = {}>(
+    externalProps?: ExternalProps,
+  ) => UseSliderRootSlotProps<ExternalProps>;
+  /**
+   * Resolver for the thumb slot's props.
+   * @param externalProps props for the thumb slot
+   * @returns props that should be spread on the thumb slot
+   */
+  getThumbProps: <ExternalProps extends Record<string, unknown> = {}>(
+    externalProps?: ExternalProps,
+  ) => UseSliderThumbSlotProps<ExternalProps>;
+  /**
+   * Resolver for the thumb slot's style prop.
+   * @param index of the currently moved thumb
+   * @returns props that should be spread on the style prop of thumb slot
+   */
+  getThumbStyle: (index: number) => object;
+  /**
+   * The marks of the slider. Marks indicate predetermined values to which the user can move the slider.
+   */
+  marks: Mark[];
+  /**
+   * The thumb index for the current value when in hover state.
+   */
+  open: number;
+  /**
+   * If `true`, the slider is a range slider when the `value` prop passed is an array.
+   */
+  range: boolean;
+  /**
+   * Ref to the root slot's DOM node.
+   */
+  rootRef: React.RefCallback<Element> | null;
+  /**
+   * The track leap for the current value of the slider.
+   */
+  trackLeap: number;
+  /**
+   * The track offset for the current value of the slider.
+   */
+  trackOffset: number;
+  /**
+   * The possible values of the slider.
+   */
+  values: number[];
+}
diff --git a/packages/mui-base/src/useSnackbar/useSnackbar.test.tsx b/packages/mui-base/src/useSnackbar/useSnackbar.test.tsx
new file mode 100644
index 00000000000000..cf8c62f2117828
--- /dev/null
+++ b/packages/mui-base/src/useSnackbar/useSnackbar.test.tsx
@@ -0,0 +1,53 @@
+import * as React from 'react';
+import { expect } from 'chai';
+import { spy } from 'sinon';
+import { fireEvent, createRenderer } from '@mui/internal-test-utils';
+import { useSnackbar, UseSnackbarParameters } from '@mui/base/useSnackbar';
+
+describe('useSnackbar', () => {
+  const { render } = createRenderer();
+
+  const invokeUseSnackbar = (props: UseSnackbarParameters) => {
+    const ref = React.createRef<ReturnType<typeof useSnackbar>>();
+    function TestComponent() {
+      const snackbarDefinition = useSnackbar(props);
+      React.useImperativeHandle(ref, () => snackbarDefinition, [snackbarDefinition]);
+      return null;
+    }
+
+    render(<TestComponent />);
+
+    return ref.current!;
+  };
+
+  describe('getRootProps', () => {
+    it('returns props for the root slot', () => {
+      const props: UseSnackbarParameters = {};
+
+      const { getRootProps } = invokeUseSnackbar(props);
+
+      const rootProps = getRootProps();
+
+      expect(rootProps.role).to.equal('presentation');
+    });
+
+    it('forwards external props including event handlers', () => {
+      const handleClickSpy = spy();
+
+      function Snackbar() {
+        const { getRootProps } = useSnackbar();
+
+        return <div {...getRootProps({ onClick: handleClickSpy, random: 'arbitraryValue' })} />;
+      }
+      const { getByRole } = render(<Snackbar />);
+
+      const snackbar = getByRole('presentation');
+
+      expect(snackbar).to.have.attribute('random', 'arbitraryValue');
+
+      fireEvent.click(snackbar);
+
+      expect(handleClickSpy.callCount).to.equal(1);
+    });
+  });
+});
diff --git a/packages/mui-base/src/useSnackbar/useSnackbar.ts b/packages/mui-base/src/useSnackbar/useSnackbar.ts
new file mode 100644
index 00000000000000..4b9de6ad0754bb
--- /dev/null
+++ b/packages/mui-base/src/useSnackbar/useSnackbar.ts
@@ -0,0 +1,164 @@
+'use client';
+import * as React from 'react';
+import {
+  unstable_useEventCallback as useEventCallback,
+  unstable_useTimeout as useTimeout,
+} from '@mui/utils';
+import {
+  UseSnackbarParameters,
+  SnackbarCloseReason,
+  UseSnackbarReturnValue,
+} from './useSnackbar.types';
+import { extractEventHandlers } from '../utils/extractEventHandlers';
+import { EventHandlers } from '../utils/types';
+
+/**
+ * The basic building block for creating custom snackbar.
+ *
+ * Demos:
+ *
+ * - [Snackbar](https://mui.com/base-ui/react-snackbar/#hook)
+ *
+ * API:
+ *
+ * - [useSnackbar API](https://mui.com/base-ui/react-snackbar/hooks-api/#use-snackbar)
+ */
+export function useSnackbar(parameters: UseSnackbarParameters = {}): UseSnackbarReturnValue {
+  const {
+    autoHideDuration = null,
+    disableWindowBlurListener = false,
+    onClose,
+    open,
+    resumeHideDuration,
+  } = parameters;
+
+  const timerAutoHide = useTimeout();
+
+  React.useEffect(() => {
+    if (!open) {
+      return undefined;
+    }
+
+    /**
+     * @param {KeyboardEvent} nativeEvent
+     */
+    function handleKeyDown(nativeEvent: KeyboardEvent) {
+      if (!nativeEvent.defaultPrevented) {
+        if (nativeEvent.key === 'Escape') {
+          // not calling `preventDefault` since we don't know if people may ignore this event e.g. a permanently open snackbar
+          onClose?.(nativeEvent, 'escapeKeyDown');
+        }
+      }
+    }
+
+    document.addEventListener('keydown', handleKeyDown);
+
+    return () => {
+      document.removeEventListener('keydown', handleKeyDown);
+    };
+  }, [open, onClose]);
+
+  const handleClose = useEventCallback((event: null, reason: SnackbarCloseReason) => {
+    onClose?.(event, reason);
+  });
+
+  const setAutoHideTimer = useEventCallback((autoHideDurationParam: number | null) => {
+    if (!onClose || autoHideDurationParam == null) {
+      return;
+    }
+
+    timerAutoHide.start(autoHideDurationParam, () => {
+      handleClose(null, 'timeout');
+    });
+  });
+
+  React.useEffect(() => {
+    if (open) {
+      setAutoHideTimer(autoHideDuration);
+    }
+
+    return timerAutoHide.clear;
+  }, [open, autoHideDuration, setAutoHideTimer, timerAutoHide]);
+
+  const handleClickAway = (event: React.SyntheticEvent<any> | Event) => {
+    onClose?.(event, 'clickaway');
+  };
+
+  // Pause the timer when the user is interacting with the Snackbar
+  // or when the user hide the window.
+  const handlePause = timerAutoHide.clear;
+
+  // Restart the timer when the user is no longer interacting with the Snackbar
+  // or when the window is shown back.
+  const handleResume = React.useCallback(() => {
+    if (autoHideDuration != null) {
+      setAutoHideTimer(resumeHideDuration != null ? resumeHideDuration : autoHideDuration * 0.5);
+    }
+  }, [autoHideDuration, resumeHideDuration, setAutoHideTimer]);
+
+  const createHandleBlur =
+    (otherHandlers: EventHandlers) => (event: React.FocusEvent<HTMLDivElement, Element>) => {
+      const onBlurCallback = otherHandlers.onBlur;
+      onBlurCallback?.(event);
+      handleResume();
+    };
+
+  const createHandleFocus =
+    (otherHandlers: EventHandlers) => (event: React.FocusEvent<HTMLDivElement, Element>) => {
+      const onFocusCallback = otherHandlers.onFocus;
+      onFocusCallback?.(event);
+      handlePause();
+    };
+
+  const createMouseEnter =
+    (otherHandlers: EventHandlers) => (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
+      const onMouseEnterCallback = otherHandlers.onMouseEnter;
+      onMouseEnterCallback?.(event);
+      handlePause();
+    };
+
+  const createMouseLeave =
+    (otherHandlers: EventHandlers) => (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
+      const onMouseLeaveCallback = otherHandlers.onMouseLeave;
+      onMouseLeaveCallback?.(event);
+      handleResume();
+    };
+
+  React.useEffect(() => {
+    // TODO: window global should be refactored here
+    if (!disableWindowBlurListener && open) {
+      window.addEventListener('focus', handleResume);
+      window.addEventListener('blur', handlePause);
+
+      return () => {
+        window.removeEventListener('focus', handleResume);
+        window.removeEventListener('blur', handlePause);
+      };
+    }
+
+    return undefined;
+  }, [disableWindowBlurListener, open, handleResume, handlePause]);
+
+  const getRootProps = <ExternalProps extends Record<string, unknown> = {}>(
+    externalProps: ExternalProps = {} as ExternalProps,
+  ) => {
+    const externalEventHandlers = {
+      ...extractEventHandlers(parameters),
+      ...extractEventHandlers(externalProps),
+    };
+
+    return {
+      // ClickAwayListener adds an `onClick` prop which results in the alert not being announced.
+      // See https://github.com/mui/material-ui/issues/29080
+      role: 'presentation',
+      ...externalProps,
+      ...externalEventHandlers,
+      onBlur: createHandleBlur(externalEventHandlers),
+      onFocus: createHandleFocus(externalEventHandlers),
+      onMouseEnter: createMouseEnter(externalEventHandlers),
+      onMouseLeave: createMouseLeave(externalEventHandlers),
+    };
+  };
+
+  return { getRootProps, onClickAway: handleClickAway };
+}
diff --git a/packages/mui-base/src/useSnackbar/useSnackbar.types.ts b/packages/mui-base/src/useSnackbar/useSnackbar.types.ts
new file mode 100644
index 00000000000000..845fb51760bbfe
--- /dev/null
+++ b/packages/mui-base/src/useSnackbar/useSnackbar.types.ts
@@ -0,0 +1,66 @@
+export type SnackbarCloseReason = 'timeout' | 'clickaway' | 'escapeKeyDown';
+
+export interface UseSnackbarParameters {
+  /**
+   * The number of milliseconds to wait before automatically calling the
+   * `onClose` function. `onClose` should then set the state of the `open`
+   * prop to hide the Snackbar. This behavior is disabled by default with
+   * the `null` value.
+   * @default null
+   */
+  autoHideDuration?: number | null;
+  /**
+   * If `true`, the `autoHideDuration` timer will expire even if the window is not focused.
+   * @default false
+   */
+  disableWindowBlurListener?: boolean;
+  /**
+   * Callback fired when the component requests to be closed.
+   * Typically `onClose` is used to set state in the parent component,
+   * which is used to control the `Snackbar` `open` prop.
+   * The `reason` parameter can optionally be used to control the response to `onClose`,
+   * for example ignoring `clickaway`.
+   *
+   * @param {React.SyntheticEvent<any> | Event} event The event source of the callback.
+   * @param {string} reason Can be: `"timeout"` (`autoHideDuration` expired), `"clickaway"`, or `"escapeKeyDown"`.
+   */
+  onClose?: (event: React.SyntheticEvent<any> | Event | null, reason: SnackbarCloseReason) => void;
+  /**
+   * If `true`, the component is shown.
+   */
+  open?: boolean;
+  /**
+   * The number of milliseconds to wait before dismissing after user interaction.
+   * If `autoHideDuration` prop isn't specified, it does nothing.
+   * If `autoHideDuration` prop is specified but `resumeHideDuration` isn't,
+   * we default to `autoHideDuration / 2` ms.
+   */
+  resumeHideDuration?: number;
+}
+
+export type UseSnackbarRootSlotProps<ExternalProps = {}> = ExternalProps &
+  UseSnackbarRootSlotOwnProps;
+
+export interface UseSnackbarRootSlotOwnProps {
+  onBlur: React.FocusEventHandler;
+  onFocus: React.FocusEventHandler;
+  onMouseEnter: React.MouseEventHandler;
+  onMouseLeave: React.MouseEventHandler;
+  ref?: React.RefCallback<Element>;
+  role: React.AriaRole;
+}
+
+export interface UseSnackbarReturnValue {
+  /**
+   * Resolver for the root slot's props.
+   * @param externalProps props for the root slot
+   * @returns props that should be spread on the root slot
+   */
+  getRootProps: <ExternalProps extends Record<string, unknown> = {}>(
+    externalProps?: ExternalProps,
+  ) => UseSnackbarRootSlotProps<ExternalProps>;
+  /**
+   * Callback fired when a "click away" event is detected.
+   */
+  onClickAway: (event: React.SyntheticEvent<any> | Event) => void;
+}