@base-ui/react 1.6.0 → 1.7.0

package/utils/popups/popupTriggerMap.mjs

@@ -1,10 +1,30 @@
+/**
+ * Development-only reverse index of element to registered id, keyed by the owning map.
+ *
+ * Registration would otherwise have to scan every entry to detect an element claimed by two ids,
+ * making the mount of many triggers sharing one handle quadratic. Kept module-scoped, lazily
+ * initialized, and read only from `process.env.NODE_ENV` guards so production builds drop it along
+ * with the checks.
+ */
+let devElementIdsByMap;
+function getDevElementIds(map) {
+  devElementIdsByMap ??= new WeakMap();
+  let elementIds = devElementIdsByMap.get(map);
+  if (!elementIds) {
+    elementIds = new WeakMap();
+    devElementIdsByMap.set(map, elementIds);
+  }
+  return elementIds;
+}
+
 /**
  * Data structure to keep track of popup trigger elements by their IDs.
- * Uses both a set of Elements and a map of IDs to Elements for efficient lookups.
+ *
+ * Element lookups iterate the id map rather than maintaining a parallel Set. Registration is O(1),
+ * while `hasElement` and `hasMatchingElement` are linear in the number of triggers.
  */
 export class PopupTriggerMap {
   constructor() {
-    this.elementsSet = new Set();
     this.idMap = new Map();
   }
 
@@ -14,49 +34,56 @@ export class PopupTriggerMap {
    * Note: The provided element is assumed to not be registered under multiple IDs.
    */
   add(id, element) {
-    const existingElement = this.idMap.get(id);
-    if (existingElement === element) {
-      return;
-    }
-    if (existingElement !== undefined) {
-      // We assume that the same element won't be registered under multiple ids.
-      // This is safe considering how useTriggerRegistration is implemented.
-      this.elementsSet.delete(existingElement);
-    }
-    this.elementsSet.add(element);
-    this.idMap.set(id, element);
     if (process.env.NODE_ENV !== 'production') {
-      if (this.elementsSet.size !== this.idMap.size) {
+      const elementIds = getDevElementIds(this);
+      const existingId = elementIds.get(element);
+      if (existingId !== undefined && existingId !== id) {
         // TODO: fix mui/no-guarded-throw
         // eslint-disable-next-line mui/no-guarded-throw
         throw new Error('Base UI: A trigger element cannot be registered under multiple IDs in PopupTriggerMap.');
       }
+
+      // Reusing an id for a different element evicts the previous one, so it must lose its claim
+      // on the id or a later registration under a different id would be reported as a duplicate.
+      const previousElement = this.idMap.get(id);
+      if (previousElement !== undefined && previousElement !== element) {
+        elementIds.delete(previousElement);
+      }
+      elementIds.set(element, id);
     }
+    this.idMap.set(id, element);
   }
 
   /**
    * Removes the trigger element with the given ID.
    */
   delete(id) {
-    const element = this.idMap.get(id);
-    if (element) {
-      this.elementsSet.delete(element);
-      this.idMap.delete(id);
+    if (process.env.NODE_ENV !== 'production') {
+      const element = this.idMap.get(id);
+      if (element !== undefined) {
+        devElementIdsByMap?.get(this)?.delete(element);
+      }
     }
+    this.idMap.delete(id);
   }
 
   /**
    * Whether the given element is registered as a trigger.
    */
   hasElement(element) {
-    return this.elementsSet.has(element);
+    for (const registered of this.idMap.values()) {
+      if (registered === element) {
+        return true;
+      }
+    }
+    return false;
   }
 
   /**
    * Whether there is a registered trigger element matching the given predicate.
    */
   hasMatchingElement(predicate) {
-    for (const element of this.elementsSet) {
+    for (const element of this.idMap.values()) {
       if (predicate(element)) {
         return true;
       }
@@ -82,7 +109,7 @@ export class PopupTriggerMap {
    * Returns an iterable of all registered trigger elements.
    */
   elements() {
-    return this.elementsSet.values();
+    return this.idMap.values();
   }
 
   /**

package/utils/popups/store.d.mts

@@ -1,3 +1,4 @@
+import type { ReactStore } from '@base-ui/utils/store';
 import { FloatingRootContext } from "../../floating-ui-react/index.mjs";
 import { FloatingRootStore } from "../../floating-ui-react/components/FloatingRootStore.mjs";
 import { TransitionStatus } from "../../internals/useTransitionStatus.mjs";
@@ -126,4 +127,17 @@ export declare const popupStoreSelectors: {
   positionerElement: (state: S) => HTMLElement | null;
 };
 export type PopupStoreSelectors = typeof popupStoreSelectors;
+/**
+ * Store members a detached handle-backed trigger reads or invokes for trigger registration and data
+ * forwarding. `set`/`update` are included only for trigger-count and trigger-data bookkeeping; on a
+ * detached (inert) store they are intentionally no-ops, so a write through them is not guaranteed to
+ * be durable. Component handle-store views Pick these from their concrete store (preserving its
+ * context and selectors) and add any component-specific trigger-invoked members such as `setOpen`.
+ */
+export type PopupTriggerStoreKeys = 'context' | 'select' | 'set' | 'state' | 'update' | 'useState';
+/**
+ * The subset of a popup store that trigger registration and data forwarding rely on. Narrow enough
+ * that an inert store can be passed while detached.
+ */
+export type PopupTriggerDataStore<State extends PopupStoreState<unknown>> = Pick<ReactStore<Readonly<State>, PopupStoreContext<never>, PopupStoreSelectors>, PopupTriggerStoreKeys>;
 export {};

package/utils/popups/store.d.ts

@@ -1,3 +1,4 @@
+import type { ReactStore } from '@base-ui/utils/store';
 import { FloatingRootContext } from "../../floating-ui-react/index.js";
 import { FloatingRootStore } from "../../floating-ui-react/components/FloatingRootStore.js";
 import { TransitionStatus } from "../../internals/useTransitionStatus.js";
@@ -126,4 +127,17 @@ export declare const popupStoreSelectors: {
   positionerElement: (state: S) => HTMLElement | null;
 };
 export type PopupStoreSelectors = typeof popupStoreSelectors;
+/**
+ * Store members a detached handle-backed trigger reads or invokes for trigger registration and data
+ * forwarding. `set`/`update` are included only for trigger-count and trigger-data bookkeeping; on a
+ * detached (inert) store they are intentionally no-ops, so a write through them is not guaranteed to
+ * be durable. Component handle-store views Pick these from their concrete store (preserving its
+ * context and selectors) and add any component-specific trigger-invoked members such as `setOpen`.
+ */
+export type PopupTriggerStoreKeys = 'context' | 'select' | 'set' | 'state' | 'update' | 'useState';
+/**
+ * The subset of a popup store that trigger registration and data forwarding rely on. Narrow enough
+ * that an inert store can be passed while detached.
+ */
+export type PopupTriggerDataStore<State extends PopupStoreState<unknown>> = Pick<ReactStore<Readonly<State>, PopupStoreContext<never>, PopupStoreSelectors>, PopupTriggerStoreKeys>;
 export {};

package/utils/popups/store.js

@@ -6,7 +6,6 @@ Object.defineProperty(exports, "__esModule", {
 exports.createInitialPopupStoreState = createInitialPopupStoreState;
 exports.createPopupFloatingRootContext = createPopupFloatingRootContext;
 exports.popupStoreSelectors = void 0;
-var _store = require("@base-ui/utils/store");
 var _empty = require("@base-ui/utils/empty");
 var _FloatingRootStore = require("../../floating-ui-react/components/FloatingRootStore");
 var _getEmptyRootContext = require("../../floating-ui-react/utils/getEmptyRootContext");
@@ -48,12 +47,12 @@ function createPopupFloatingRootContext(triggerElements, floatingId, nested = fa
     onOpenChange: undefined
   });
 }
-const activeTriggerIdSelector = (0, _store.createSelector)(state => state.triggerIdProp ?? state.activeTriggerId);
-const openSelector = (0, _store.createSelector)(state => state.openProp ?? state.open);
-const popupIdSelector = (0, _store.createSelector)(state => {
+const activeTriggerIdSelector = state => state.triggerIdProp ?? state.activeTriggerId;
+const openSelector = state => state.openProp ?? state.open;
+const popupIdSelector = state => {
   const popupId = state.popupElement?.id ?? state.floatingId;
   return popupId || undefined;
-});
+};
 function triggerOwnsOpenPopup(state, triggerId) {
   return triggerId !== undefined && openSelector(state) && activeTriggerIdSelector(state) === triggerId;
 }
@@ -65,33 +64,46 @@ function triggerOwnsOpenPopupOrIsOnlyTrigger(state, triggerId) {
 }
 const popupStoreSelectors = exports.popupStoreSelectors = {
   open: openSelector,
-  mounted: (0, _store.createSelector)(state => state.mounted),
-  transitionStatus: (0, _store.createSelector)(state => state.transitionStatus),
-  floatingRootContext: (0, _store.createSelector)(state => state.floatingRootContext),
-  triggerCount: (0, _store.createSelector)(state => state.triggerCount),
-  preventUnmountingOnClose: (0, _store.createSelector)(state => state.preventUnmountingOnClose),
-  payload: (0, _store.createSelector)(state => state.payload),
+  mounted: state => state.mounted,
+  transitionStatus: state => state.transitionStatus,
+  floatingRootContext: state => state.floatingRootContext,
+  triggerCount: state => state.triggerCount,
+  preventUnmountingOnClose: state => state.preventUnmountingOnClose,
+  payload: state => state.payload,
   activeTriggerId: activeTriggerIdSelector,
-  activeTriggerElement: (0, _store.createSelector)(state => state.mounted ? state.activeTriggerElement : null),
+  activeTriggerElement: state => state.mounted ? state.activeTriggerElement : null,
   popupId: popupIdSelector,
   /**
    * Whether the trigger with the given ID was used to open the popup.
    */
-  isTriggerActive: (0, _store.createSelector)((state, triggerId) => triggerId !== undefined && activeTriggerIdSelector(state) === triggerId),
+  isTriggerActive: (state, triggerId) => triggerId !== undefined && activeTriggerIdSelector(state) === triggerId,
   /**
    * Whether the popup is open and was activated by a trigger with the given ID.
    */
-  isOpenedByTrigger: (0, _store.createSelector)((state, triggerId) => triggerOwnsOpenPopup(state, triggerId)),
+  isOpenedByTrigger: (state, triggerId) => triggerOwnsOpenPopup(state, triggerId),
   /**
    * Whether the popup is mounted and was activated by a trigger with the given ID.
    */
-  isMountedByTrigger: (0, _store.createSelector)((state, triggerId) => triggerId !== undefined && activeTriggerIdSelector(state) === triggerId && state.mounted),
-  triggerProps: (0, _store.createSelector)((state, isActive) => isActive ? state.activeTriggerProps : state.inactiveTriggerProps),
+  isMountedByTrigger: (state, triggerId) => triggerId !== undefined && activeTriggerIdSelector(state) === triggerId && state.mounted,
+  triggerProps: (state, isActive) => isActive ? state.activeTriggerProps : state.inactiveTriggerProps,
   /**
    * Popup id for the trigger that currently owns the open popup.
    */
-  triggerPopupId: (0, _store.createSelector)((state, triggerId) => triggerOwnsOpenPopupOrIsOnlyTrigger(state, triggerId) ? popupIdSelector(state) : undefined),
-  popupProps: (0, _store.createSelector)(state => state.popupProps),
-  popupElement: (0, _store.createSelector)(state => state.popupElement),
-  positionerElement: (0, _store.createSelector)(state => state.positionerElement)
-};
+  triggerPopupId: (state, triggerId) => triggerOwnsOpenPopupOrIsOnlyTrigger(state, triggerId) ? popupIdSelector(state) : undefined,
+  popupProps: state => state.popupProps,
+  popupElement: state => state.popupElement,
+  positionerElement: state => state.positionerElement
+};
+
+/**
+ * Store members a detached handle-backed trigger reads or invokes for trigger registration and data
+ * forwarding. `set`/`update` are included only for trigger-count and trigger-data bookkeeping; on a
+ * detached (inert) store they are intentionally no-ops, so a write through them is not guaranteed to
+ * be durable. Component handle-store views Pick these from their concrete store (preserving its
+ * context and selectors) and add any component-specific trigger-invoked members such as `setOpen`.
+ */
+
+/**
+ * The subset of a popup store that trigger registration and data forwarding rely on. Narrow enough
+ * that an inert store can be passed while detached.
+ */

package/utils/popups/store.mjs

@@ -1,4 +1,3 @@
-import { createSelector } from '@base-ui/utils/store';
 import { EMPTY_OBJECT } from '@base-ui/utils/empty';
 import { FloatingRootStore } from "../../floating-ui-react/components/FloatingRootStore.mjs";
 import { getEmptyRootContext } from "../../floating-ui-react/utils/getEmptyRootContext.mjs";
@@ -41,12 +40,12 @@ export function createPopupFloatingRootContext(triggerElements, floatingId, nest
     onOpenChange: undefined
   });
 }
-const activeTriggerIdSelector = createSelector(state => state.triggerIdProp ?? state.activeTriggerId);
-const openSelector = createSelector(state => state.openProp ?? state.open);
-const popupIdSelector = createSelector(state => {
+const activeTriggerIdSelector = state => state.triggerIdProp ?? state.activeTriggerId;
+const openSelector = state => state.openProp ?? state.open;
+const popupIdSelector = state => {
   const popupId = state.popupElement?.id ?? state.floatingId;
   return popupId || undefined;
-});
+};
 function triggerOwnsOpenPopup(state, triggerId) {
   return triggerId !== undefined && openSelector(state) && activeTriggerIdSelector(state) === triggerId;
 }
@@ -58,33 +57,46 @@ function triggerOwnsOpenPopupOrIsOnlyTrigger(state, triggerId) {
 }
 export const popupStoreSelectors = {
   open: openSelector,
-  mounted: createSelector(state => state.mounted),
-  transitionStatus: createSelector(state => state.transitionStatus),
-  floatingRootContext: createSelector(state => state.floatingRootContext),
-  triggerCount: createSelector(state => state.triggerCount),
-  preventUnmountingOnClose: createSelector(state => state.preventUnmountingOnClose),
-  payload: createSelector(state => state.payload),
+  mounted: state => state.mounted,
+  transitionStatus: state => state.transitionStatus,
+  floatingRootContext: state => state.floatingRootContext,
+  triggerCount: state => state.triggerCount,
+  preventUnmountingOnClose: state => state.preventUnmountingOnClose,
+  payload: state => state.payload,
   activeTriggerId: activeTriggerIdSelector,
-  activeTriggerElement: createSelector(state => state.mounted ? state.activeTriggerElement : null),
+  activeTriggerElement: state => state.mounted ? state.activeTriggerElement : null,
   popupId: popupIdSelector,
   /**
    * Whether the trigger with the given ID was used to open the popup.
    */
-  isTriggerActive: createSelector((state, triggerId) => triggerId !== undefined && activeTriggerIdSelector(state) === triggerId),
+  isTriggerActive: (state, triggerId) => triggerId !== undefined && activeTriggerIdSelector(state) === triggerId,
   /**
    * Whether the popup is open and was activated by a trigger with the given ID.
    */
-  isOpenedByTrigger: createSelector((state, triggerId) => triggerOwnsOpenPopup(state, triggerId)),
+  isOpenedByTrigger: (state, triggerId) => triggerOwnsOpenPopup(state, triggerId),
   /**
    * Whether the popup is mounted and was activated by a trigger with the given ID.
    */
-  isMountedByTrigger: createSelector((state, triggerId) => triggerId !== undefined && activeTriggerIdSelector(state) === triggerId && state.mounted),
-  triggerProps: createSelector((state, isActive) => isActive ? state.activeTriggerProps : state.inactiveTriggerProps),
+  isMountedByTrigger: (state, triggerId) => triggerId !== undefined && activeTriggerIdSelector(state) === triggerId && state.mounted,
+  triggerProps: (state, isActive) => isActive ? state.activeTriggerProps : state.inactiveTriggerProps,
   /**
    * Popup id for the trigger that currently owns the open popup.
    */
-  triggerPopupId: createSelector((state, triggerId) => triggerOwnsOpenPopupOrIsOnlyTrigger(state, triggerId) ? popupIdSelector(state) : undefined),
-  popupProps: createSelector(state => state.popupProps),
-  popupElement: createSelector(state => state.popupElement),
-  positionerElement: createSelector(state => state.positionerElement)
-};
+  triggerPopupId: (state, triggerId) => triggerOwnsOpenPopupOrIsOnlyTrigger(state, triggerId) ? popupIdSelector(state) : undefined,
+  popupProps: state => state.popupProps,
+  popupElement: state => state.popupElement,
+  positionerElement: state => state.positionerElement
+};
+
+/**
+ * Store members a detached handle-backed trigger reads or invokes for trigger registration and data
+ * forwarding. `set`/`update` are included only for trigger-count and trigger-data bookkeeping; on a
+ * detached (inert) store they are intentionally no-ops, so a write through them is not guaranteed to
+ * be durable. Component handle-store views Pick these from their concrete store (preserving its
+ * context and selectors) and add any component-specific trigger-invoked members such as `setOpen`.
+ */
+
+/**
+ * The subset of a popup store that trigger registration and data forwarding rely on. Narrow enough
+ * that an inert store can be passed while detached.
+ */

package/utils/popups/usePopupHandleStore.d.mts

@@ -0,0 +1,12 @@
+import type { PopupHandleStoreProvider } from "./popupHandle.mjs";
+/**
+ * Reads the store currently exposed by a popup handle and subscribes to store-pointer changes.
+ * Detached triggers use this to follow a handle as a root attaches or detaches: while no root is
+ * attached, the handle exposes its fallback store; once a root attaches, subscribers re-render and
+ * read from the live root store.
+ *
+ * Returns `undefined` when no handle is provided so callers can fall back to their root context.
+ *
+ * @param handle The popup handle to read from, or `undefined` when the trigger is not handle-bound.
+ */
+export declare function usePopupHandleStore<HandleStore>(handle: PopupHandleStoreProvider<HandleStore> | undefined): HandleStore | undefined;

package/utils/popups/usePopupHandleStore.d.ts

@@ -0,0 +1,12 @@
+import type { PopupHandleStoreProvider } from "./popupHandle.js";
+/**
+ * Reads the store currently exposed by a popup handle and subscribes to store-pointer changes.
+ * Detached triggers use this to follow a handle as a root attaches or detaches: while no root is
+ * attached, the handle exposes its fallback store; once a root attaches, subscribers re-render and
+ * read from the live root store.
+ *
+ * Returns `undefined` when no handle is provided so callers can fall back to their root context.
+ *
+ * @param handle The popup handle to read from, or `undefined` when the trigger is not handle-bound.
+ */
+export declare function usePopupHandleStore<HandleStore>(handle: PopupHandleStoreProvider<HandleStore> | undefined): HandleStore | undefined;

package/utils/popups/usePopupHandleStore.js

@@ -0,0 +1,33 @@
+"use strict";
+'use client';
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.usePopupHandleStore = usePopupHandleStore;
+var React = _interopRequireWildcard(require("react"));
+var _shim = require("use-sync-external-store/shim");
+var _empty = require("@base-ui/utils/empty");
+/**
+ * Reads the store currently exposed by a popup handle and subscribes to store-pointer changes.
+ * Detached triggers use this to follow a handle as a root attaches or detaches: while no root is
+ * attached, the handle exposes its fallback store; once a root attaches, subscribers re-render and
+ * read from the live root store.
+ *
+ * Returns `undefined` when no handle is provided so callers can fall back to their root context.
+ *
+ * @param handle The popup handle to read from, or `undefined` when the trigger is not handle-bound.
+ */
+function usePopupHandleStore(handle) {
+  const subscribe = React.useCallback(listener => {
+    if (handle === undefined) {
+      return _empty.NOOP;
+    }
+    return handle.subscribeStore(listener);
+  }, [handle]);
+  const getSnapshot = React.useCallback(() => {
+    return handle === undefined ? undefined : handle.store;
+  }, [handle]);
+  return (0, _shim.useSyncExternalStore)(subscribe, getSnapshot, () => handle?.serverStore);
+}

package/utils/popups/usePopupHandleStore.mjs

@@ -0,0 +1,27 @@
+'use client';
+
+import * as React from 'react';
+import { useSyncExternalStore } from 'use-sync-external-store/shim';
+import { NOOP } from '@base-ui/utils/empty';
+/**
+ * Reads the store currently exposed by a popup handle and subscribes to store-pointer changes.
+ * Detached triggers use this to follow a handle as a root attaches or detaches: while no root is
+ * attached, the handle exposes its fallback store; once a root attaches, subscribers re-render and
+ * read from the live root store.
+ *
+ * Returns `undefined` when no handle is provided so callers can fall back to their root context.
+ *
+ * @param handle The popup handle to read from, or `undefined` when the trigger is not handle-bound.
+ */
+export function usePopupHandleStore(handle) {
+  const subscribe = React.useCallback(listener => {
+    if (handle === undefined) {
+      return NOOP;
+    }
+    return handle.subscribeStore(listener);
+  }, [handle]);
+  const getSnapshot = React.useCallback(() => {
+    return handle === undefined ? undefined : handle.store;
+  }, [handle]);
+  return useSyncExternalStore(subscribe, getSnapshot, () => handle?.serverStore);
+}

package/utils/scrollable.d.mts

@@ -1,4 +1,6 @@
 export type ScrollAxis = 'horizontal' | 'vertical';
+export declare function isScrollableY(element: HTMLElement, allowOverflowIntent?: boolean): boolean;
+export declare function isScrollableX(element: HTMLElement, allowOverflowIntent?: boolean): boolean;
 export declare function isScrollable(element: HTMLElement, axis: ScrollAxis, allowOverflowIntent?: boolean): boolean;
 export declare function hasScrollableAncestor(target: HTMLElement, root: HTMLElement, axes: ScrollAxis[]): boolean;
 export declare function findScrollableTouchTarget(target: EventTarget | null, root: HTMLElement, axis?: ScrollAxis, allowOverflowIntent?: boolean): HTMLElement | null;

package/utils/scrollable.d.ts

@@ -1,4 +1,6 @@
 export type ScrollAxis = 'horizontal' | 'vertical';
+export declare function isScrollableY(element: HTMLElement, allowOverflowIntent?: boolean): boolean;
+export declare function isScrollableX(element: HTMLElement, allowOverflowIntent?: boolean): boolean;
 export declare function isScrollable(element: HTMLElement, axis: ScrollAxis, allowOverflowIntent?: boolean): boolean;
 export declare function hasScrollableAncestor(target: HTMLElement, root: HTMLElement, axes: ScrollAxis[]): boolean;
 export declare function findScrollableTouchTarget(target: EventTarget | null, root: HTMLElement, axis?: ScrollAxis, allowOverflowIntent?: boolean): HTMLElement | null;

package/utils/scrollable.js

@@ -6,25 +6,33 @@ Object.defineProperty(exports, "__esModule", {
 exports.findScrollableTouchTarget = findScrollableTouchTarget;
 exports.hasScrollableAncestor = hasScrollableAncestor;
 exports.isScrollable = isScrollable;
+exports.isScrollableX = isScrollableX;
+exports.isScrollableY = isScrollableY;
 var _dom = require("@floating-ui/utils/dom");
-function isScrollable(element, axis,
-// When true, a container that overflows only once extra space is added (e.g. drawer
-// keyboard scroll slack) still counts, as long as it has layout size on the axis.
-allowOverflowIntent = false) {
-  const style = (0, _dom.getComputedStyle)(element);
-  if (axis === 'vertical') {
-    const overflowY = style.overflowY;
-    if (overflowY !== 'auto' && overflowY !== 'scroll') {
-      return false;
-    }
-    return allowOverflowIntent ? element.clientHeight > 0 : element.scrollHeight > element.clientHeight;
+function isScrollableY(element, allowOverflowIntent = false) {
+  const {
+    overflowY
+  } = (0, _dom.getComputedStyle)(element);
+  if (overflowY !== 'auto' && overflowY !== 'scroll') {
+    return false;
   }
-  const overflowX = style.overflowX;
+  // When `allowOverflowIntent` is true, a container that overflows only once extra space is
+  // added (e.g. drawer keyboard scroll slack) still counts, as long as it has layout size on
+  // the axis.
+  return allowOverflowIntent ? element.clientHeight > 0 : element.scrollHeight > element.clientHeight;
+}
+function isScrollableX(element, allowOverflowIntent = false) {
+  const {
+    overflowX
+  } = (0, _dom.getComputedStyle)(element);
   if (overflowX !== 'auto' && overflowX !== 'scroll') {
     return false;
   }
   return allowOverflowIntent ? element.clientWidth > 0 : element.scrollWidth > element.clientWidth;
 }
+function isScrollable(element, axis, allowOverflowIntent = false) {
+  return axis === 'vertical' ? isScrollableY(element, allowOverflowIntent) : isScrollableX(element, allowOverflowIntent);
+}
 function hasScrollableAncestor(target, root, axes) {
   // `getParentNode` crosses shadow boundaries (and slots), so a target inside a shadow root
   // still walks up to scrollable ancestors in the light DOM.

package/utils/scrollable.mjs

@@ -1,22 +1,28 @@
 import { getComputedStyle, getParentNode, isHTMLElement, isLastTraversableNode } from '@floating-ui/utils/dom';
-export function isScrollable(element, axis,
-// When true, a container that overflows only once extra space is added (e.g. drawer
-// keyboard scroll slack) still counts, as long as it has layout size on the axis.
-allowOverflowIntent = false) {
-  const style = getComputedStyle(element);
-  if (axis === 'vertical') {
-    const overflowY = style.overflowY;
-    if (overflowY !== 'auto' && overflowY !== 'scroll') {
-      return false;
-    }
-    return allowOverflowIntent ? element.clientHeight > 0 : element.scrollHeight > element.clientHeight;
+export function isScrollableY(element, allowOverflowIntent = false) {
+  const {
+    overflowY
+  } = getComputedStyle(element);
+  if (overflowY !== 'auto' && overflowY !== 'scroll') {
+    return false;
   }
-  const overflowX = style.overflowX;
+  // When `allowOverflowIntent` is true, a container that overflows only once extra space is
+  // added (e.g. drawer keyboard scroll slack) still counts, as long as it has layout size on
+  // the axis.
+  return allowOverflowIntent ? element.clientHeight > 0 : element.scrollHeight > element.clientHeight;
+}
+export function isScrollableX(element, allowOverflowIntent = false) {
+  const {
+    overflowX
+  } = getComputedStyle(element);
   if (overflowX !== 'auto' && overflowX !== 'scroll') {
     return false;
   }
   return allowOverflowIntent ? element.clientWidth > 0 : element.scrollWidth > element.clientWidth;
 }
+export function isScrollable(element, axis, allowOverflowIntent = false) {
+  return axis === 'vertical' ? isScrollableY(element, allowOverflowIntent) : isScrollableX(element, allowOverflowIntent);
+}
 export function hasScrollableAncestor(target, root, axes) {
   // `getParentNode` crosses shadow boundaries (and slots), so a target inside a shadow root
   // still walks up to scrollable ancestors in the light DOM.

package/utils/usePopupAutoResize.d.mts

@@ -1,5 +1,5 @@
 import { Dimensions } from "../floating-ui-react/types.mjs";
-import { Side } from "./useAnchorPositioning.mjs";
+import { Side } from "../internals/useAnchorPositioning.mjs";
 /**
  * Allows the element to automatically resize based on its content while supporting animations.
  */

package/utils/usePopupAutoResize.d.ts

@@ -1,5 +1,5 @@
 import { Dimensions } from "../floating-ui-react/types.js";
-import { Side } from "./useAnchorPositioning.js";
+import { Side } from "../internals/useAnchorPositioning.js";
 /**
  * Allows the element to automatically resize based on its content while supporting animations.
  */

package/utils/usePopupAutoResize.js

@@ -27,30 +27,14 @@ function usePopupAutoResize(parameters) {
     side,
     direction
   } = parameters;
-  const runOnceAnimationsFinish = (0, _useAnimationsFinished.useAnimationsFinished)(popupElement, true, false);
+  const runOnceAnimationsFinish = (0, _useAnimationsFinished.useAnimationsFinished)(popupElement, true);
   const animationFrame = (0, _useAnimationFrame.useAnimationFrame)();
   const committedDimensionsRef = React.useRef(null);
   const isInitialRenderRef = React.useRef(true);
   const restoreAnchoringStylesRef = React.useRef(_empty.NOOP);
   const onMeasureLayout = (0, _useStableCallback.useStableCallback)(onMeasureLayoutParam);
   const onMeasureLayoutComplete = (0, _useStableCallback.useStableCallback)(onMeasureLayoutCompleteParam);
-  const anchoringStyles = React.useMemo(() => {
-    // Ensure popup size transitions correctly when anchored to `bottom` (side=top) or `right` (side=left).
-    let isOriginSide = side === 'top';
-    let isPhysicalLeft = side === 'left';
-    if (direction === 'rtl') {
-      isOriginSide = isOriginSide || side === 'inline-end';
-      isPhysicalLeft = isPhysicalLeft || side === 'inline-end';
-    } else {
-      isOriginSide = isOriginSide || side === 'inline-start';
-      isPhysicalLeft = isPhysicalLeft || side === 'inline-start';
-    }
-    return isOriginSide ? {
-      position: 'absolute',
-      [side === 'top' ? 'bottom' : 'top']: '0',
-      [isPhysicalLeft ? 'right' : 'left']: '0'
-    } : _empty.EMPTY_OBJECT;
-  }, [side, direction]);
+  const anchoringStyles = React.useMemo(() => getPopupAnchoringStyles(side, direction), [side, direction]);
   (0, _useIsoLayoutEffect.useIsoLayoutEffect)(() => {
     // Reset the state when the popup is closed.
     if (!mounted) {
@@ -126,6 +110,19 @@ function usePopupAutoResize(parameters) {
     };
   }, [content, popupElement, positionerElement, runOnceAnimationsFinish, animationFrame, mounted, onMeasureLayout, onMeasureLayoutComplete, anchoringStyles]);
 }
+function getPopupAnchoringStyles(side, direction) {
+  // Ensure popup size transitions correctly when anchored to `bottom` (side=top) or `right` (side=left).
+  const isPhysicalTop = side === 'top';
+  const isPhysicalLeft = side === 'left' || side === (direction === 'rtl' ? 'inline-end' : 'inline-start');
+  if (!isPhysicalTop && !isPhysicalLeft) {
+    return _empty.EMPTY_OBJECT;
+  }
+  return {
+    position: 'absolute',
+    [isPhysicalTop ? 'bottom' : 'top']: '0',
+    [isPhysicalLeft ? 'right' : 'left']: '0'
+  };
+}
 function overrideElementStyle(element, property, value) {
   const originalValue = element.style.getPropertyValue(property);
   element.style.setProperty(property, value);