@jobber/components 8.23.0 → 8.23.1

package/dist/useCompositeListItem-cjs.js

@@ -1,12 +1,12 @@
 'use strict';
 
 var React = require('react');
-var floatingUi_utils_dom = require('./floating-ui.utils.dom-cjs.js');
 var useButton = require('./useButton-cjs.js');
-var InternalBackdrop = require('./InternalBackdrop-cjs.js');
+var floatingUi_utils_dom = require('./floating-ui.utils.dom-cjs.js');
+var useScrollLock = require('./useScrollLock-cjs.js');
 var useRenderElement = require('./useRenderElement-cjs.js');
 var jsxRuntime = require('react/jsx-runtime');
-var index_esm = require('./index.esm-cjs.js');
+var floatingUi_utils = require('./floating-ui.utils-cjs.js');
 var floatingUi_reactDom = require('./floating-ui.react-dom-cjs.js');
 
 function _interopNamespaceDefault(e) {
@@ -35,22 +35,23 @@ function useFloatingRootContext(options) {
     elements = {}
   } = options;
   const floatingId = useButton.useId();
-  const nested = InternalBackdrop.useFloatingParentNodeId() != null;
+  const nested = useScrollLock.useFloatingParentNodeId() != null;
   if (process.env.NODE_ENV !== 'production') {
     const optionDomReference = elements.reference;
     if (optionDomReference && !floatingUi_utils_dom.isElement(optionDomReference)) {
       console.error('Cannot pass a virtual element to the `elements.reference` option,', 'as it must be a real DOM element. Use `context.setPositionReference()`', 'instead.');
     }
   }
-  const store = useRenderElement.useRefWithInit(() => new InternalBackdrop.FloatingRootStore({
+  const store = useRenderElement.useRefWithInit(() => new useScrollLock.FloatingRootStore({
     open,
+    transitionStatus: undefined,
     onOpenChange,
     referenceElement: elements.reference ?? null,
     floatingElement: elements.floating ?? null,
-    triggerElements: new InternalBackdrop.PopupTriggerMap(),
+    triggerElements: new useScrollLock.PopupTriggerMap(),
     floatingId,
-    nested,
-    noEmit: false
+    syncOnly: false,
+    nested
   })).current;
   useButton.useIsoLayoutEffect(() => {
     const valuesToSync = {
@@ -70,7 +71,6 @@ function useFloatingRootContext(options) {
   }, [open, floatingId, elements.reference, elements.floating, store]);
   store.context.onOpenChange = onOpenChange;
   store.context.nested = nested;
-  store.context.noEmit = false;
   return store;
 }
 
@@ -83,30 +83,37 @@ function useFloating(options = {}) {
     nodeId,
     externalTree
   } = options;
-  const internalRootStore = useFloatingRootContext(options);
-  const rootContext = options.rootContext || internalRootStore;
-  const rootContextElements = {
-    reference: rootContext.useState('referenceElement'),
-    floating: rootContext.useState('floatingElement'),
-    domReference: rootContext.useState('domReferenceElement')
-  };
+  const internalStore = useFloatingRootContext(options);
+  const store = options.rootContext || internalStore;
+  const referenceElement = store.useState('referenceElement');
+  const floatingElement = store.useState('floatingElement');
+  const domReferenceElement = store.useState('domReferenceElement');
+  const open = store.useState('open');
+  const floatingId = store.useState('floatingId');
   const [positionReference, setPositionReferenceRaw] = React__namespace.useState(null);
+  const [localDomReference, setLocalDomReference] = React__namespace.useState(undefined);
+  const [localFloatingElement, setLocalFloatingElement] = React__namespace.useState(undefined);
   const domReferenceRef = React__namespace.useRef(null);
-  const tree = InternalBackdrop.useFloatingTree(externalTree);
-  useButton.useIsoLayoutEffect(() => {
-    if (rootContextElements.domReference) {
-      domReferenceRef.current = rootContextElements.domReference;
-    }
-  }, [rootContextElements.domReference]);
+  const tree = useScrollLock.useFloatingTree(externalTree);
+  const storeElements = React__namespace.useMemo(() => ({
+    reference: referenceElement,
+    floating: floatingElement,
+    domReference: domReferenceElement
+  }), [referenceElement, floatingElement, domReferenceElement]);
   const position = floatingUi_reactDom.useFloating({
     ...options,
     elements: {
-      ...rootContextElements,
+      ...storeElements,
       ...(positionReference && {
         reference: positionReference
       })
     }
   });
+  const localDomReferenceElement = floatingUi_utils_dom.isElement(localDomReference) ? localDomReference : null;
+  const syncedFloatingElement = localFloatingElement === undefined ? store.state.floatingElement : localFloatingElement;
+  store.useSyncedValue('referenceElement', localDomReference ?? null);
+  store.useSyncedValue('domReferenceElement', localDomReference === undefined ? domReferenceElement : localDomReferenceElement);
+  store.useSyncedValue('floatingElement', syncedFloatingElement);
   const setPositionReference = React__namespace.useCallback(node => {
     const computedPositionReference = floatingUi_utils_dom.isElement(node) ? {
       getBoundingClientRect: () => node.getBoundingClientRect(),
@@ -118,11 +125,6 @@ function useFloating(options = {}) {
     setPositionReferenceRaw(computedPositionReference);
     position.refs.setReference(computedPositionReference);
   }, [position.refs]);
-  const [localDomReference, setLocalDomReference] = React__namespace.useState(null);
-  const [localFloatingElement, setLocalFloatingElement] = React__namespace.useState(null);
-  rootContext.useSyncedValue('referenceElement', localDomReference);
-  rootContext.useSyncedValue('domReferenceElement', floatingUi_utils_dom.isElement(localDomReference) ? localDomReference : null);
-  rootContext.useSyncedValue('floatingElement', localFloatingElement);
   const setReference = React__namespace.useCallback(node => {
     if (floatingUi_utils_dom.isElement(node) || node === null) {
       domReferenceRef.current = node;
@@ -152,24 +154,27 @@ function useFloating(options = {}) {
   }), [position.refs, setReference, setFloating, setPositionReference]);
   const elements = React__namespace.useMemo(() => ({
     ...position.elements,
-    domReference: rootContextElements.domReference
-  }), [position.elements, rootContextElements.domReference]);
-  const open = rootContext.useState('open');
-  const floatingId = rootContext.useState('floatingId');
+    domReference: domReferenceElement
+  }), [position.elements, domReferenceElement]);
   const context = React__namespace.useMemo(() => ({
     ...position,
-    dataRef: rootContext.context.dataRef,
+    dataRef: store.context.dataRef,
     open,
-    onOpenChange: rootContext.setOpen,
-    events: rootContext.context.events,
+    onOpenChange: store.setOpen,
+    events: store.context.events,
     floatingId,
     refs,
     elements,
     nodeId,
-    rootStore: rootContext
-  }), [position, refs, elements, nodeId, rootContext, open, floatingId]);
+    rootStore: store
+  }), [position, refs, elements, nodeId, store, open, floatingId]);
+  useButton.useIsoLayoutEffect(() => {
+    if (domReferenceElement) {
+      domReferenceRef.current = domReferenceElement;
+    }
+  }, [domReferenceElement]);
   useButton.useIsoLayoutEffect(() => {
-    rootContext.context.dataRef.current.floatingContext = context;
+    store.context.dataRef.current.floatingContext = context;
     const node = tree?.nodesRef.current.find(n => n.id === nodeId);
     if (node) {
       node.context = context;
@@ -180,8 +185,8 @@ function useFloating(options = {}) {
     context,
     refs,
     elements,
-    rootStore: rootContext
-  }), [position, refs, elements, context, rootContext]);
+    rootStore: store
+  }), [position, refs, elements, context, store]);
 }
 
 const ESCAPE = 'Escape';
@@ -196,24 +201,24 @@ function doSwitch(orientation, vertical, horizontal) {
   }
 }
 function isMainOrientationKey(key, orientation) {
-  const vertical = key === useButton.ARROW_UP || key === useButton.ARROW_DOWN;
-  const horizontal = key === useButton.ARROW_LEFT || key === useButton.ARROW_RIGHT;
+  const vertical = key === useScrollLock.ARROW_UP || key === useScrollLock.ARROW_DOWN;
+  const horizontal = key === useScrollLock.ARROW_LEFT || key === useScrollLock.ARROW_RIGHT;
   return doSwitch(orientation, vertical, horizontal);
 }
 function isMainOrientationToEndKey(key, orientation, rtl) {
-  const vertical = key === useButton.ARROW_DOWN;
-  const horizontal = rtl ? key === useButton.ARROW_LEFT : key === useButton.ARROW_RIGHT;
+  const vertical = key === useScrollLock.ARROW_DOWN;
+  const horizontal = rtl ? key === useScrollLock.ARROW_LEFT : key === useScrollLock.ARROW_RIGHT;
   return doSwitch(orientation, vertical, horizontal) || key === 'Enter' || key === ' ' || key === '';
 }
 function isCrossOrientationOpenKey(key, orientation, rtl) {
-  const vertical = rtl ? key === useButton.ARROW_LEFT : key === useButton.ARROW_RIGHT;
-  const horizontal = key === useButton.ARROW_DOWN;
+  const vertical = rtl ? key === useScrollLock.ARROW_LEFT : key === useScrollLock.ARROW_RIGHT;
+  const horizontal = key === useScrollLock.ARROW_DOWN;
   return doSwitch(orientation, vertical, horizontal);
 }
-function isCrossOrientationCloseKey(key, orientation, rtl, cols) {
-  const vertical = rtl ? key === useButton.ARROW_RIGHT : key === useButton.ARROW_LEFT;
-  const horizontal = key === useButton.ARROW_UP;
-  if (orientation === 'both' || orientation === 'horizontal' && cols && cols > 1) {
+function isCrossOrientationCloseKey(key, orientation, rtl, grid) {
+  const vertical = rtl ? key === useScrollLock.ARROW_RIGHT : key === useScrollLock.ARROW_LEFT;
+  const horizontal = key === useScrollLock.ARROW_UP;
+  if (orientation === 'both' || orientation === 'horizontal' && grid) {
     return key === ESCAPE;
   }
   return doSwitch(orientation, vertical, horizontal);
@@ -224,11 +229,6 @@ function isCrossOrientationCloseKey(key, orientation, rtl, cols) {
  * @see https://floating-ui.com/docs/useListNavigation
  */
 function useListNavigation(context, props) {
-  const store = 'rootStore' in context ? context.rootStore : context;
-  const open = store.useState('open');
-  const floatingElement = store.useState('floatingElement');
-  const domReferenceElement = store.useState('domReferenceElement');
-  const dataRef = store.context.dataRef;
   const {
     listRef,
     activeIndex,
@@ -246,11 +246,12 @@ function useListNavigation(context, props) {
     disabledIndices = undefined,
     orientation = 'vertical',
     parentOrientation,
-    cols = 1,
     id,
     resetOnPointerLeave = true,
-    externalTree
+    externalTree,
+    grid: navigateGrid
   } = props;
+  const isGrid = navigateGrid != null;
   if (process.env.NODE_ENV !== 'production') {
     if (allowEscape) {
       if (!loopFocus) {
@@ -260,18 +261,20 @@ function useListNavigation(context, props) {
         console.warn('`useListNavigation` must be virtual to allow escaping.');
       }
     }
-    if (orientation === 'vertical' && cols > 1) {
-      console.warn('In grid list navigation mode (`cols` > 1), the `orientation` should', 'be either "horizontal" or "both".');
+    if (orientation === 'vertical' && isGrid) {
+      console.warn('In grid list navigation mode, the `orientation` should', 'be either "horizontal" or "both".');
     }
   }
-  const floatingFocusElement = useButton.getFloatingFocusElement(floatingElement);
+  const store = 'rootStore' in context ? context.rootStore : context;
+  const open = store.useState('open');
+  const floatingElement = store.useState('floatingElement');
+  const domReferenceElement = store.useState('domReferenceElement');
+  const dataRef = store.context.dataRef;
+  const floatingFocusElement = useScrollLock.getFloatingFocusElement(floatingElement);
+  const typeableComboboxReference = useScrollLock.isTypeableCombobox(domReferenceElement);
   const floatingFocusElementRef = useButton.useValueAsRef(floatingFocusElement);
-  const parentId = InternalBackdrop.useFloatingParentNodeId();
-  const tree = InternalBackdrop.useFloatingTree(externalTree);
-  useButton.useIsoLayoutEffect(() => {
-    dataRef.current.orientation = orientation;
-  }, [dataRef, orientation]);
-  const typeableComboboxReference = useButton.isTypeableCombobox(domReferenceElement);
+  const parentId = useScrollLock.useFloatingParentNodeId();
+  const tree = useScrollLock.useFloatingTree(externalTree);
   const focusItemOnOpenRef = React__namespace.useRef(focusItemOnOpen);
   const indexRef = React__namespace.useRef(selectedIndex ?? -1);
   const keyRef = React__namespace.useRef(null);
@@ -279,21 +282,23 @@ function useListNavigation(context, props) {
   const onNavigate = useButton.useStableCallback(event => {
     onNavigateProp(indexRef.current === -1 ? null : indexRef.current, event);
   });
-  const previousOnNavigateRef = React__namespace.useRef(onNavigate);
   const previousMountedRef = React__namespace.useRef(!!floatingElement);
   const previousOpenRef = React__namespace.useRef(open);
   const forceSyncFocusRef = React__namespace.useRef(false);
   const forceScrollIntoViewRef = React__namespace.useRef(false);
+  const cancelQueuedFocusRef = React__namespace.useRef(null);
   const disabledIndicesRef = useButton.useValueAsRef(disabledIndices);
   const latestOpenRef = useButton.useValueAsRef(open);
   const selectedIndexRef = useButton.useValueAsRef(selectedIndex);
   const resetOnPointerLeaveRef = useButton.useValueAsRef(resetOnPointerLeave);
+  const focusFrame = useButton.useAnimationFrame();
+  const waitForListPopulatedFrame = useButton.useAnimationFrame();
   const focusItem = useButton.useStableCallback(() => {
     function runFocus(item) {
       if (virtual) {
         tree?.events.emit('virtualfocus', item);
       } else {
-        InternalBackdrop.enqueueFocus(item, {
+        cancelQueuedFocusRef.current = useScrollLock.enqueueFocus(item, {
           sync: forceSyncFocusRef.current,
           preventScroll: true
         });
@@ -304,7 +309,7 @@ function useListNavigation(context, props) {
     if (initialItem) {
       runFocus(initialItem);
     }
-    const scheduler = forceSyncFocusRef.current ? v => v() : requestAnimationFrame;
+    const scheduler = forceSyncFocusRef.current ? callback => callback() : callback => focusFrame.request(callback);
     scheduler(() => {
       const waitedItem = listRef.current[indexRef.current] || initialItem;
       if (!waitedItem) {
@@ -326,6 +331,9 @@ function useListNavigation(context, props) {
       }
     });
   });
+  useButton.useIsoLayoutEffect(() => {
+    dataRef.current.orientation = orientation;
+  }, [dataRef, orientation]);
 
   // Sync `selectedIndex` to be the `activeIndex` upon opening the floating
   // element. Also, reset `activeIndex` upon closing the floating element.
@@ -342,11 +350,11 @@ function useListNavigation(context, props) {
         onNavigate();
       }
     } else if (previousMountedRef.current) {
-      // Since the user can specify `onNavigate` conditionally
-      // (onNavigate: open ? setActiveIndex : setSelectedIndex),
-      // we store and call the previous function.
+      // Reset the active index when the list is no longer open and mounted (closing or
+      // unmounting). `onNavigate` is a stable callback that always forwards to the latest
+      // `onNavigate` prop.
       indexRef.current = -1;
-      previousOnNavigateRef.current();
+      onNavigate();
     }
   }, [enabled, open, floatingElement, selectedIndex, onNavigate]);
 
@@ -384,25 +392,28 @@ function useListNavigation(context, props) {
             // otherwise use rAF. Don't try more than twice, since something
             // is wrong otherwise.
             if (runs < 2) {
-              const scheduler = runs ? requestAnimationFrame : queueMicrotask;
+              const scheduler = runs ? callback => waitForListPopulatedFrame.request(callback) : queueMicrotask;
               scheduler(waitForListPopulated);
             }
             runs += 1;
           } else {
-            // initially focus the first non-disabled item
-            indexRef.current = keyRef.current == null || isMainOrientationToEndKey(keyRef.current, orientation, rtl) || nested ? InternalBackdrop.getMinListIndex(listRef) : InternalBackdrop.getMaxListIndex(listRef);
+            // Initially focus the first non-disabled item. `disabledIndices` is deliberately
+            // omitted here so attribute-disabled items (`disabled`/`aria-disabled`) are skipped
+            // on open even when the consumer passes an empty `disabledIndices` array. Passing it
+            // would regress that behavior (see mui/base-ui#2604).
+            indexRef.current = keyRef.current == null || isMainOrientationToEndKey(keyRef.current, orientation, rtl) || nested ? useScrollLock.getMinListIndex(listRef) : useScrollLock.getMaxListIndex(listRef);
             keyRef.current = null;
             onNavigate();
           }
         };
         waitForListPopulated();
       }
-    } else if (!InternalBackdrop.isIndexOutOfListBounds(listRef, activeIndex)) {
+    } else if (!useScrollLock.isIndexOutOfListBounds(listRef.current, activeIndex)) {
       indexRef.current = activeIndex;
       focusItem();
       forceScrollIntoViewRef.current = false;
     }
-  }, [enabled, open, floatingElement, activeIndex, selectedIndexRef, nested, listRef, orientation, rtl, onNavigate, focusItem, disabledIndicesRef]);
+  }, [enabled, open, floatingElement, activeIndex, selectedIndexRef, nested, listRef, orientation, rtl, onNavigate, focusItem, waitForListPopulatedFrame]);
 
   // Ensure the parent floating element has focus when a nested child closes
   // to allow arrow key navigation to work after the pointer leaves the child.
@@ -412,16 +423,18 @@ function useListNavigation(context, props) {
     }
     const nodes = tree.nodesRef.current;
     const parent = nodes.find(node => node.id === parentId)?.context?.elements.floating;
-    const activeEl = useButton.activeElement(useButton.ownerDocument(floatingElement));
+    // `floatingElement` is null here (see the guard above), so resolve the owner document from an
+    // in-DOM element for realm-safety (shadow DOM/iframes): the reference element, falling back to
+    // the parent floating element when the reference is virtual (`domReferenceElement` is null).
+    const activeEl = useButton.activeElement(useButton.ownerDocument(domReferenceElement ?? parent ?? null));
     const treeContainsActiveEl = nodes.some(node => node.context && useButton.contains(node.context.elements.floating, activeEl));
     if (parent && !treeContainsActiveEl && isPointerModalityRef.current) {
       parent.focus({
         preventScroll: true
       });
     }
-  }, [enabled, floatingElement, tree, parentId, virtual]);
+  }, [enabled, floatingElement, domReferenceElement, tree, parentId, virtual]);
   useButton.useIsoLayoutEffect(() => {
-    previousOnNavigateRef.current = onNavigate;
     previousOpenRef.current = open;
     previousMountedRef.current = !!floatingElement;
   });
@@ -432,68 +445,22 @@ function useListNavigation(context, props) {
     }
   }, [open, focusItemOnOpen]);
   const hasActiveIndex = activeIndex != null;
-  const item = React__namespace.useMemo(() => {
-    function syncCurrentTarget(event) {
-      if (!latestOpenRef.current) {
-        return;
-      }
-      const index = listRef.current.indexOf(event.currentTarget);
-      if (index !== -1 && indexRef.current !== index) {
-        indexRef.current = index;
-        onNavigate(event);
-      }
+  const syncCurrentTarget = useButton.useStableCallback(event => {
+    if (!latestOpenRef.current) {
+      return;
     }
-    const itemProps = {
-      onFocus(event) {
-        forceSyncFocusRef.current = true;
-        syncCurrentTarget(event);
-      },
-      onClick: ({
-        currentTarget
-      }) => currentTarget.focus({
-        preventScroll: true
-      }),
-      // Safari
-      onMouseMove(event) {
-        forceSyncFocusRef.current = true;
-        forceScrollIntoViewRef.current = false;
-        if (focusItemOnHover) {
-          syncCurrentTarget(event);
-        }
-      },
-      onPointerLeave(event) {
-        if (!latestOpenRef.current || !isPointerModalityRef.current || event.pointerType === 'touch') {
-          return;
-        }
-        forceSyncFocusRef.current = true;
-        const relatedTarget = event.relatedTarget;
-        if (!focusItemOnHover || listRef.current.includes(relatedTarget)) {
-          return;
-        }
-        if (!resetOnPointerLeaveRef.current) {
-          return;
-        }
-        InternalBackdrop.enqueueFocus(null, {
-          sync: true
-        });
-        indexRef.current = -1;
-        onNavigate(event);
-        if (!virtual) {
-          const floatingFocusEl = floatingFocusElementRef.current;
-          const activeEl = useButton.activeElement(useButton.ownerDocument(floatingFocusEl));
-          if (floatingFocusEl && useButton.contains(floatingFocusEl, activeEl)) {
-            floatingFocusEl.focus({
-              preventScroll: true
-            });
-          }
-        }
-      }
-    };
-    return itemProps;
-  }, [latestOpenRef, floatingFocusElementRef, focusItemOnHover, listRef, onNavigate, resetOnPointerLeaveRef, virtual]);
-  const getParentOrientation = React__namespace.useCallback(() => {
+    const index = listRef.current.indexOf(event.currentTarget);
+    if (index !== -1 && (indexRef.current !== index || activeIndex !== index)) {
+      indexRef.current = index;
+      onNavigate(event);
+    }
+  });
+  const getParentOrientation = useButton.useStableCallback(() => {
     return parentOrientation ?? tree?.nodesRef.current.find(node => node.id === parentId)?.context?.dataRef?.current.orientation;
-  }, [parentId, tree, parentOrientation]);
+  });
+  const getMinEnabledIndex = useButton.useStableCallback(() => {
+    return useScrollLock.getMinListIndex(listRef, disabledIndicesRef.current);
+  });
   const commonOnKeyDown = useButton.useStableCallback(event => {
     isPointerModalityRef.current = false;
     forceSyncFocusRef.current = true;
@@ -512,7 +479,7 @@ function useListNavigation(context, props) {
     if (!latestOpenRef.current && event.currentTarget === floatingFocusElementRef.current) {
       return;
     }
-    if (nested && isCrossOrientationCloseKey(event.key, orientation, rtl, cols)) {
+    if (nested && isCrossOrientationCloseKey(event.key, orientation, rtl, isGrid)) {
       // If the nested list's close key is also the parent navigation key,
       // let the parent navigate. Otherwise, stop propagating the event.
       if (!isMainOrientationKey(event.key, getParentOrientation())) {
@@ -529,8 +496,8 @@ function useListNavigation(context, props) {
       return;
     }
     const currentIndex = indexRef.current;
-    const minIndex = InternalBackdrop.getMinListIndex(listRef, disabledIndices);
-    const maxIndex = InternalBackdrop.getMaxListIndex(listRef, disabledIndices);
+    const minIndex = useScrollLock.getMinListIndex(listRef, disabledIndices);
+    const maxIndex = useScrollLock.getMaxListIndex(listRef, disabledIndices);
     if (!typeableComboboxReference) {
       if (event.key === 'Home') {
         useButton.stopEvent(event);
@@ -544,41 +511,10 @@ function useListNavigation(context, props) {
       }
     }
 
-    // Grid navigation.
-    if (cols > 1) {
-      const sizes = Array.from({
-        length: listRef.current.length
-      }, () => ({
-        width: 1,
-        height: 1
-      }));
-      // To calculate movements on the grid, we use hypothetical cell indices
-      // as if every item was 1x1, then convert back to real indices.
-      const cellMap = InternalBackdrop.createGridCellMap(sizes, cols);
-      const minGridIndex = cellMap.findIndex(index => index != null && !InternalBackdrop.isListIndexDisabled(listRef, index, disabledIndices));
-      // last enabled index
-      const maxGridIndex = cellMap.reduce((foundIndex, index, cellIndex) => index != null && !InternalBackdrop.isListIndexDisabled(listRef, index, disabledIndices) ? cellIndex : foundIndex, -1);
-      const index = cellMap[InternalBackdrop.getGridNavigatedIndex({
-        current: cellMap.map(itemIndex => itemIndex != null ? listRef.current[itemIndex] : null)
-      }, {
-        event,
-        orientation,
-        loopFocus,
-        rtl,
-        cols,
-        // treat undefined (empty grid spaces) as disabled indices so we
-        // don't end up in them
-        disabledIndices: InternalBackdrop.getGridCellIndices([...((typeof disabledIndices !== 'function' ? disabledIndices : null) || listRef.current.map((_, listIndex) => InternalBackdrop.isListIndexDisabled(listRef, listIndex, disabledIndices) ? listIndex : undefined)), undefined], cellMap),
-        minIndex: minGridIndex,
-        maxIndex: maxGridIndex,
-        prevIndex: InternalBackdrop.getGridCellIndexOfCorner(indexRef.current > maxIndex ? minIndex : indexRef.current, sizes, cellMap, cols,
-        // use a corner matching the edge closest to the direction
-        // we're moving in so we don't end up in the same item. Prefer
-        // top/left over bottom/right.
-        // eslint-disable-next-line no-nested-ternary
-        event.key === useButton.ARROW_DOWN ? 'bl' : event.key === (rtl ? useButton.ARROW_LEFT : useButton.ARROW_RIGHT) ? 'tr' : 'tl'),
-        stopEvent: true
-      })];
+    // Grid navigation is injected by grid-capable consumers so non-grid
+    // consumers (menu, select) tree-shake the grid helpers out.
+    if (navigateGrid != null) {
+      const index = navigateGrid(event, indexRef.current, listRef, orientation, loopFocus, rtl, disabledIndices, minIndex, maxIndex);
       if (index != null) {
         indexRef.current = index;
         onNavigate(event);
@@ -607,13 +543,13 @@ function useListNavigation(context, props) {
               indexRef.current = minIndex;
             }
           } else {
-            indexRef.current = InternalBackdrop.findNonDisabledListIndex(listRef, {
+            indexRef.current = useScrollLock.findNonDisabledListIndex(listRef.current, {
               startingIndex: currentIndex,
               disabledIndices
             });
           }
         } else {
-          indexRef.current = Math.min(maxIndex, InternalBackdrop.findNonDisabledListIndex(listRef, {
+          indexRef.current = Math.min(maxIndex, useScrollLock.findNonDisabledListIndex(listRef.current, {
             startingIndex: currentIndex,
             disabledIndices
           }));
@@ -628,25 +564,73 @@ function useListNavigation(context, props) {
             indexRef.current = maxIndex;
           }
         } else {
-          indexRef.current = InternalBackdrop.findNonDisabledListIndex(listRef, {
+          indexRef.current = useScrollLock.findNonDisabledListIndex(listRef.current, {
             startingIndex: currentIndex,
             decrement: true,
             disabledIndices
           });
         }
       } else {
-        indexRef.current = Math.max(minIndex, InternalBackdrop.findNonDisabledListIndex(listRef, {
+        indexRef.current = Math.max(minIndex, useScrollLock.findNonDisabledListIndex(listRef.current, {
           startingIndex: currentIndex,
           decrement: true,
           disabledIndices
         }));
       }
-      if (InternalBackdrop.isIndexOutOfListBounds(listRef, indexRef.current)) {
+      if (useScrollLock.isIndexOutOfListBounds(listRef.current, indexRef.current)) {
         indexRef.current = -1;
       }
       onNavigate(event);
     }
   });
+  const item = React__namespace.useMemo(() => {
+    const itemProps = {
+      onFocus(event) {
+        forceSyncFocusRef.current = true;
+        syncCurrentTarget(event);
+      },
+      onClick: ({
+        currentTarget
+      }) => currentTarget.focus({
+        preventScroll: true
+      }),
+      // Safari
+      onMouseMove(event) {
+        forceSyncFocusRef.current = true;
+        forceScrollIntoViewRef.current = false;
+        if (focusItemOnHover) {
+          syncCurrentTarget(event);
+        }
+      },
+      onPointerLeave(event) {
+        if (!latestOpenRef.current || !isPointerModalityRef.current || event.pointerType === 'touch') {
+          return;
+        }
+        forceSyncFocusRef.current = true;
+        const relatedTarget = event.relatedTarget;
+        if (!focusItemOnHover || listRef.current.includes(relatedTarget)) {
+          return;
+        }
+        if (!resetOnPointerLeaveRef.current) {
+          return;
+        }
+        cancelQueuedFocusRef.current?.();
+        cancelQueuedFocusRef.current = null;
+        indexRef.current = -1;
+        onNavigate(event);
+        if (!virtual) {
+          const floatingFocusEl = floatingFocusElementRef.current;
+          const activeEl = useButton.activeElement(useButton.ownerDocument(floatingFocusEl));
+          if (floatingFocusEl && useButton.contains(floatingFocusEl, activeEl)) {
+            floatingFocusEl.focus({
+              preventScroll: true
+            });
+          }
+        }
+      }
+    };
+    return itemProps;
+  }, [syncCurrentTarget, latestOpenRef, floatingFocusElementRef, focusItemOnHover, listRef, onNavigate, resetOnPointerLeaveRef, virtual]);
   const ariaActiveDescendantProp = React__namespace.useMemo(() => {
     return virtual && open && hasActiveIndex && {
       'aria-activedescendant': `${id}-${activeIndex}`
@@ -681,6 +665,9 @@ function useListNavigation(context, props) {
     };
   }, [ariaActiveDescendantProp, commonOnKeyDown, floatingFocusElementRef, orientation, typeableComboboxReference, store, open, virtual, domReferenceElement]);
   const trigger = React__namespace.useMemo(() => {
+    function openOnNavigationKeyDown(event) {
+      store.setOpen(true, useButton.createChangeEventDetails(useButton.listNavigation, event.nativeEvent, event.currentTarget));
+    }
     function checkVirtualMouse(event) {
       if (focusItemOnOpen === 'auto' && useButton.isVirtualClick(event.nativeEvent)) {
         focusItemOnOpenRef.current = !virtual;
@@ -719,10 +706,10 @@ function useListNavigation(context, props) {
           if (isParentCrossOpenKey) {
             useButton.stopEvent(event);
             if (currentOpen) {
-              indexRef.current = InternalBackdrop.getMinListIndex(listRef, disabledIndicesRef.current);
+              indexRef.current = getMinEnabledIndex();
               onNavigate(event);
             } else {
-              store.setOpen(true, useButton.createChangeEventDetails(useButton.listNavigation, event.nativeEvent, event.currentTarget));
+              openOnNavigationKeyDown(event);
             }
           }
           return undefined;
@@ -733,7 +720,7 @@ function useListNavigation(context, props) {
           }
           useButton.stopEvent(event);
           if (!currentOpen && openOnArrowKeyDown) {
-            store.setOpen(true, useButton.createChangeEventDetails(useButton.listNavigation, event.nativeEvent, event.currentTarget));
+            openOnNavigationKeyDown(event);
           } else {
             commonOnKeyDown(event);
           }
@@ -754,7 +741,7 @@ function useListNavigation(context, props) {
       onMouseDown: checkVirtualMouse,
       onClick: checkVirtualMouse
     };
-  }, [commonOnKeyDown, disabledIndicesRef, focusItemOnOpen, listRef, nested, onNavigate, store, openOnArrowKeyDown, orientation, getParentOrientation, rtl, selectedIndexRef, virtual]);
+  }, [commonOnKeyDown, focusItemOnOpen, getMinEnabledIndex, nested, onNavigate, store, openOnArrowKeyDown, orientation, getParentOrientation, rtl, selectedIndexRef, virtual]);
   const reference = React__namespace.useMemo(() => {
     return {
       ...ariaActiveDescendantProp,
@@ -775,65 +762,48 @@ function useListNavigation(context, props) {
  * @see https://floating-ui.com/docs/useTypeahead
  */
 function useTypeahead(context, props) {
-  const store = 'rootStore' in context ? context.rootStore : context;
-  const dataRef = store.context.dataRef;
-  const open = store.useState('open');
   const {
     listRef,
     elementsRef,
     activeIndex,
     onMatch: onMatchProp,
-    onTypingChange,
+    disabledIndices,
+    onTyping,
     enabled = true,
     resetMs = 750,
     selectedIndex = null
   } = props;
+  const store = 'rootStore' in context ? context.rootStore : context;
+  const open = store.useState('open');
   const timeout = useButton.useTimeout();
   const stringRef = React__namespace.useRef('');
   const prevIndexRef = React__namespace.useRef(selectedIndex ?? activeIndex ?? -1);
   const matchIndexRef = React__namespace.useRef(null);
-  useButton.useIsoLayoutEffect(() => {
-    if (!open && selectedIndex !== null) {
-      return;
-    }
-    timeout.clear();
-    matchIndexRef.current = null;
-    if (stringRef.current !== '') {
-      stringRef.current = '';
-    }
-  }, [open, selectedIndex, timeout]);
-  useButton.useIsoLayoutEffect(() => {
-    // Sync arrow key navigation but not typeahead navigation.
-    if (open && stringRef.current === '') {
-      prevIndexRef.current = selectedIndex ?? activeIndex ?? -1;
-    }
-  }, [open, selectedIndex, activeIndex]);
-  const setTypingChange = useButton.useStableCallback(value => {
-    if (value) {
-      if (!dataRef.current.typing) {
-        dataRef.current.typing = value;
-        onTypingChange?.(value);
-      }
-    } else if (dataRef.current.typing) {
-      dataRef.current.typing = value;
-      onTypingChange?.(value);
-    }
-  });
   const onKeyDown = useButton.useStableCallback(event => {
     function isVisible(index) {
       const element = elementsRef?.current[index];
-      return !element || InternalBackdrop.isElementVisible(element);
+      return !element || useScrollLock.isElementVisible(element);
+    }
+    function isItemAvailable(index) {
+      if (!isVisible(index)) {
+        return false;
+      }
+      // Visibility is handled above; pass an empty element list so `isListIndexDisabled`
+      // resolves only the explicit `disabledIndices` (array/predicate) and skips its own
+      // visibility/attribute fallbacks. Consumers that don't opt in keep matching every
+      // visible item.
+      return disabledIndices == null || !useScrollLock.isListIndexDisabled(useRenderElement.EMPTY_ARRAY, index, disabledIndices);
     }
     function getMatchingIndex(list, string, startIndex = 0) {
       if (list.length === 0) {
         return -1;
       }
       const normalizedStartIndex = (startIndex % list.length + list.length) % list.length;
-      const lowerString = string.toLocaleLowerCase();
+      const lowerString = string.toLowerCase();
       for (let offset = 0; offset < list.length; offset += 1) {
         const index = (normalizedStartIndex + offset) % list.length;
         const text = list[index];
-        if (!text?.toLocaleLowerCase().startsWith(lowerString) || !isVisible(index)) {
+        if (!text?.toLowerCase().startsWith(lowerString) || !isItemAvailable(index)) {
           continue;
         }
         return index;
@@ -844,11 +814,11 @@ function useTypeahead(context, props) {
     if (stringRef.current.length > 0 && event.key === ' ') {
       // Space should continue the in-progress typeahead session.
       useButton.stopEvent(event);
-      setTypingChange(true);
+      onTyping?.(true);
     }
     if (stringRef.current.length > 0 && stringRef.current[0] !== ' ') {
       if (getMatchingIndex(listContent, stringRef.current) === -1 && event.key !== ' ') {
-        setTypingChange(false);
+        onTyping?.(false);
       }
     }
     if (listContent == null ||
@@ -860,7 +830,7 @@ function useTypeahead(context, props) {
     }
     if (open && event.key !== ' ') {
       useButton.stopEvent(event);
-      setTypingChange(true);
+      onTyping?.(true);
     }
 
     // Capture whether this is a new typing session before mutating the string.
@@ -870,8 +840,10 @@ function useTypeahead(context, props) {
     }
 
     // Bail out if the list contains a word like "llama" or "aaron". TODO:
-    // allow it in this case, too.
-    const allowRapidSuccessionOfFirstLetter = listContent.every(text => text ? text[0]?.toLocaleLowerCase() !== text[1]?.toLocaleLowerCase() : true);
+    // allow it in this case, too. Unavailable items are skipped while matching, so
+    // they must be ignored here as well — otherwise a hidden or disabled double-letter
+    // label would block rapid cycling through the available items.
+    const allowRapidSuccessionOfFirstLetter = listContent.every((text, index) => text && isItemAvailable(index) ? text[0]?.toLowerCase() !== text[1]?.toLowerCase() : true);
 
     // Allows the user to cycle through items that start with the same letter
     // in rapid succession.
@@ -883,7 +855,7 @@ function useTypeahead(context, props) {
     timeout.start(resetMs, () => {
       stringRef.current = '';
       prevIndexRef.current = matchIndexRef.current;
-      setTypingChange(false);
+      onTyping?.(false);
     });
 
     // Compute the starting index for this search.
@@ -897,18 +869,17 @@ function useTypeahead(context, props) {
       matchIndexRef.current = index;
     } else if (event.key !== ' ') {
       stringRef.current = '';
-      setTypingChange(false);
+      onTyping?.(false);
     }
   });
   const onBlur = useButton.useStableCallback(event => {
     const next = event.relatedTarget;
     const currentDomReferenceElement = store.select('domReferenceElement');
     const currentFloatingElement = store.select('floatingElement');
-    const withinReference = useButton.contains(currentDomReferenceElement, next);
-    const withinFloating = useButton.contains(currentFloatingElement, next);
+    const withinComposite = useButton.contains(currentDomReferenceElement, next) || useButton.contains(currentFloatingElement, next);
 
     // Keep the session if focus moves within the composite (reference <-> floating).
-    if (withinReference || withinFloating) {
+    if (withinComposite) {
       return;
     }
 
@@ -916,33 +887,44 @@ function useTypeahead(context, props) {
     timeout.clear();
     stringRef.current = '';
     prevIndexRef.current = matchIndexRef.current;
-    setTypingChange(false);
+    onTyping?.(false);
   });
-  const reference = React__namespace.useMemo(() => ({
+  useButton.useIsoLayoutEffect(() => {
+    if (!open && selectedIndex !== null) {
+      return;
+    }
+    timeout.clear();
+    matchIndexRef.current = null;
+    if (stringRef.current !== '') {
+      stringRef.current = '';
+    }
+  }, [open, selectedIndex, timeout]);
+  useButton.useIsoLayoutEffect(() => {
+    // Sync arrow key navigation but not typeahead navigation.
+    if (open && stringRef.current === '') {
+      prevIndexRef.current = selectedIndex ?? activeIndex ?? -1;
+    }
+  }, [open, selectedIndex, activeIndex]);
+  const sharedProps = React__namespace.useMemo(() => ({
     onKeyDown,
     onBlur
   }), [onKeyDown, onBlur]);
-  const floating = React__namespace.useMemo(() => {
-    return {
-      onKeyDown,
-      onBlur
-    };
-  }, [onKeyDown, onBlur]);
   return React__namespace.useMemo(() => enabled ? {
-    reference,
-    floating
-  } : {}, [enabled, reference, floating]);
+    reference: sharedProps,
+    floating: sharedProps
+  } : {}, [enabled, sharedProps]);
 }
 
 function getPseudoElementBounds(element) {
   const elementRect = element.getBoundingClientRect();
+  const win = floatingUi_utils_dom.getWindow(element);
 
-  // Avoid "Not implemented: window.getComputedStyle(elt, pseudoElt)"
-  if (process.env.NODE_ENV !== 'production') {
+  // Avoid "Not implemented: window.getComputedStyle(elt, pseudoElt)" in jsdom.
+  if (useButton.jsdom) {
     return elementRect;
   }
-  const beforeStyles = window.getComputedStyle(element, '::before');
-  const afterStyles = window.getComputedStyle(element, '::after');
+  const beforeStyles = win.getComputedStyle(element, '::before');
+  const afterStyles = win.getComputedStyle(element, '::after');
   const hasPseudoElements = beforeStyles.content !== 'none' || afterStyles.content !== 'none';
   if (!hasPseudoElements) {
     return elementRect;
@@ -1152,17 +1134,17 @@ const baseArrow = options => ({
       element,
       padding = 0,
       offsetParent = 'real'
-    } = index_esm.evaluate(options, state) || {};
+    } = floatingUi_utils.evaluate(options, state) || {};
     if (element == null) {
       return {};
     }
-    const paddingObject = index_esm.getPaddingObject(padding);
+    const paddingObject = floatingUi_utils.getPaddingObject(padding);
     const coords = {
       x,
       y
     };
-    const axis = index_esm.getAlignmentAxis(placement);
-    const length = index_esm.getAxisLength(axis);
+    const axis = floatingUi_utils.getAlignmentAxis(placement);
+    const length = floatingUi_utils.getAxisLength(axis);
     const arrowDimensions = await platform.getDimensions(element);
     const isYAxis = axis === 'y';
     const minProp = isYAxis ? 'top' : 'left';
@@ -1190,13 +1172,13 @@ const baseArrow = options => ({
     const min = minPadding;
     const max = clientSize - arrowDimensions[length] - maxPadding;
     const center = clientSize / 2 - arrowDimensions[length] / 2 + centerToReference;
-    const offset = index_esm.clamp(min, center, max);
+    const offset = floatingUi_utils.clamp(min, center, max);
 
     // If the reference is small enough that the arrow's padding causes it to
     // to point to nothing for an aligned placement, adjust the offset of the
     // floating element itself. To ensure `shift()` continues to take action,
     // a single reset is performed when this is true.
-    const shouldAddOffset = !middlewareData.arrow && index_esm.getAlignment(placement) != null && center !== offset && rects.reference[length] / 2 - (center < min ? minPadding : maxPadding) - arrowDimensions[length] / 2 < 0;
+    const shouldAddOffset = !middlewareData.arrow && floatingUi_utils.getAlignment(placement) != null && center !== offset && rects.reference[length] / 2 - (center < min ? minPadding : maxPadding) - arrowDimensions[length] / 2 < 0;
     // eslint-disable-next-line no-nested-ternary
     const alignmentOffset = shouldAddOffset ? center < min ? center - min : center - max : 0;
     return {
@@ -1224,6 +1206,7 @@ const arrow = (options, deps) => ({
   options: [options, deps]
 });
 
+const nativeHideFn = floatingUi_reactDom.hide().fn;
 const hide = {
   name: 'hide',
   async fn(state) {
@@ -1234,7 +1217,7 @@ const hide = {
       y
     } = state.rects.reference;
     const anchorHidden = width === 0 && height === 0 && x === 0 && y === 0;
-    const nativeHideResult = await floatingUi_reactDom.hide().fn(state);
+    const nativeHideResult = await nativeHideFn(state);
     return {
       data: {
         referenceHidden: nativeHideResult.data?.referenceHidden || anchorHidden
@@ -1294,7 +1277,7 @@ const adaptiveOrigin = {
     } else if (await platform.isElement?.(offsetParent)) {
       offsetDimensions = await platform.getDimensions(offsetParent);
     }
-    const currentSide = index_esm.getSide(placement);
+    const currentSide = floatingUi_utils.getSide(placement);
     let x = rawX;
     let y = rawY;
     if (currentSide === 'left') {
@@ -1333,8 +1316,8 @@ function getOffsetData(state, sideParam, isRtl) {
     placement
   } = state;
   const data = {
-    side: getLogicalSide(sideParam, index_esm.getSide(placement), isRtl),
-    align: index_esm.getAlignment(placement) || 'center',
+    side: getLogicalSide(sideParam, floatingUi_utils.getSide(placement), isRtl),
+    align: floatingUi_utils.getAlignment(placement) || 'center',
     anchor: {
       width: rects.reference.width,
       height: rects.reference.height
@@ -1364,6 +1347,7 @@ function useAnchorPositioning(params) {
     sticky = false,
     arrowPadding = 5,
     disableAnchorTracking = false,
+    inline: inlineMiddleware,
     // Private parameters
     keepMounted = false,
     floatingRootContext,
@@ -1386,7 +1370,8 @@ function useAnchorPositioning(params) {
   const anchorFnCallback = useButton.useStableCallback(anchorFn);
   const anchorDep = anchorFn ? anchorFnCallback : anchor;
   const anchorValueRef = useButton.useValueAsRef(anchor);
-  const direction = InternalBackdrop.useDirection();
+  const mountedRef = useButton.useValueAsRef(mounted);
+  const direction = useScrollLock.useDirection();
   const isRtl = direction === 'rtl';
   const side = mountSide || {
     top: 'top',
@@ -1437,7 +1422,11 @@ function useAnchorPositioning(params) {
   const alignOffsetRef = useButton.useValueAsRef(alignOffset);
   const sideOffsetDep = typeof sideOffset !== 'function' ? sideOffset : 0;
   const alignOffsetDep = typeof alignOffset !== 'function' ? alignOffset : 0;
-  const middleware = [floatingUi_reactDom.offset(state => {
+  const middleware = [];
+  if (inlineMiddleware) {
+    middleware.push(inlineMiddleware);
+  }
+  middleware.push(floatingUi_reactDom.offset(state => {
     const data = getOffsetData(state, sideParam, isRtl);
     const sideAxis = typeof sideOffsetRef.current === 'function' ? sideOffsetRef.current(data) : sideOffsetRef.current;
     const alignAxis = typeof alignOffsetRef.current === 'function' ? alignOffsetRef.current(data) : alignOffsetRef.current;
@@ -1446,7 +1435,7 @@ function useAnchorPositioning(params) {
       crossAxis: alignAxis,
       alignmentAxis: alignAxis
     };
-  }, [sideOffsetDep, alignOffsetDep, isRtl, sideParam])];
+  }, [sideOffsetDep, alignOffsetDep, isRtl, sideParam]));
   const shiftDisabled = collisionAvoidanceAlign === 'none' && collisionAvoidanceSide !== 'shift';
   const crossAxisShiftEnabled = !shiftDisabled && (sticky || shiftCrossAxis || collisionAvoidanceSide === 'shift');
   const flipMiddleware = collisionAvoidanceSide === 'none' ? null : floatingUi_reactDom.flip({
@@ -1485,7 +1474,7 @@ function useAnchorPositioning(params) {
           width,
           height
         } = arrowRef.current.getBoundingClientRect();
-        const sideAxis = index_esm.getSideAxis(index_esm.getSide(limitData.placement));
+        const sideAxis = floatingUi_utils.getSideAxis(floatingUi_utils.getSide(limitData.placement));
         const arrowSize = sideAxis === 'y' ? width : height;
         const offsetAmount = sideAxis === 'y' ? collisionPadding.left + collisionPadding.right : collisionPadding.top + collisionPadding.bottom;
         return {
@@ -1511,12 +1500,15 @@ function useAnchorPositioning(params) {
       availableHeight,
       rects
     }) {
+      if (!mountedRef.current) {
+        return;
+      }
       const floatingStyle = floating.style;
       floatingStyle.setProperty('--available-width', `${availableWidth}px`);
       floatingStyle.setProperty('--available-height', `${availableHeight}px`);
 
       // Snap anchor dimensions to device pixels to ensure the popup's visual width matches the anchor's one.
-      const dpr = window.devicePixelRatio || 1;
+      const dpr = floatingUi_utils_dom.getWindow(floating).devicePixelRatio || 1;
       const {
         x,
         y,
@@ -1528,10 +1520,10 @@ function useAnchorPositioning(params) {
       floatingStyle.setProperty('--anchor-width', `${anchorWidth}px`);
       floatingStyle.setProperty('--anchor-height', `${anchorHeight}px`);
     }
-  }), arrow(() => ({
+  }), arrow(state => ({
     // `transform-origin` calculations rely on an element existing. If the arrow hasn't been set,
     // we'll create a fake element.
-    element: arrowRef.current || document.createElement('div'),
+    element: arrowRef.current || useButton.ownerDocument(state.elements.floating).createElement('div'),
     padding: arrowPadding,
     offsetParent: 'floating'
   }), [arrowPadding]), {
@@ -1544,8 +1536,8 @@ function useAnchorPositioning(params) {
         rects,
         y
       } = state;
-      const currentRenderedSide = index_esm.getSide(renderedPlacement);
-      const currentRenderedAxis = index_esm.getSideAxis(currentRenderedSide);
+      const currentRenderedSide = floatingUi_utils.getSide(renderedPlacement);
+      const currentRenderedAxis = floatingUi_utils.getSideAxis(currentRenderedSide);
       const arrowEl = arrowRef.current;
       const arrowX = middlewareData.arrow?.x || 0;
       const arrowY = middlewareData.arrow?.y || 0;
@@ -1575,7 +1567,8 @@ function useAnchorPositioning(params) {
       floatingRootContext.update({
         referenceElement: null,
         floatingElement: null,
-        domReferenceElement: null
+        domReferenceElement: null,
+        positionReference: null
       });
     }
   }, [mounted, floatingRootContext]);
@@ -1596,6 +1589,7 @@ function useAnchorPositioning(params) {
     floatingStyles: originalFloatingStyles
   } = useFloating({
     rootContext: floatingRootContext,
+    open: keepMounted ? mounted : undefined,
     placement,
     middleware,
     strategy: positionMethod,
@@ -1656,21 +1650,19 @@ function useAnchorPositioning(params) {
     }
   }, [mounted, refs, anchorDep, anchorValueRef]);
   React__namespace.useEffect(() => {
-    if (keepMounted && mounted && elements.domReference && elements.floating) {
-      return floatingUi_reactDom.autoUpdate(elements.domReference, elements.floating, update, autoUpdateOptions);
+    if (keepMounted && mounted && elements.reference && elements.floating) {
+      return floatingUi_reactDom.autoUpdate(elements.reference, elements.floating, update, autoUpdateOptions);
     }
     return undefined;
   }, [keepMounted, mounted, elements, update, autoUpdateOptions]);
-  const renderedSide = index_esm.getSide(renderedPlacement);
+  const renderedSide = floatingUi_utils.getSide(renderedPlacement);
   const logicalRenderedSide = getLogicalSide(sideParam, renderedSide, isRtl);
-  const renderedAlign = index_esm.getAlignment(renderedPlacement) || 'center';
+  const renderedAlign = floatingUi_utils.getAlignment(renderedPlacement) || 'center';
   const anchorHidden = Boolean(middlewareData.hide?.referenceHidden);
 
-  /**
-   * Locks the flip (makes it "sticky") so it doesn't prefer a given placement
-   * and flips back lazily, not eagerly. Ideal for filtered lists that change
-   * the size of the popup dynamically to avoid unwanted flipping when typing.
-   */
+  // Locks the flip (makes it "sticky") so it doesn't prefer a given placement
+  // and flips back lazily, not eagerly. Ideal for filtered lists that change
+  // the size of the popup dynamically to avoid unwanted flipping when typing.
   useButton.useIsoLayoutEffect(() => {
     if (lazyFlip && mounted && isPositioned) {
       setMountSide(renderedSide);
@@ -1702,7 +1694,62 @@ function isRef(param) {
 }
 
 function getDisabledMountTransitionStyles(transitionStatus) {
-  return transitionStatus === 'starting' ? InternalBackdrop.DISABLED_TRANSITIONS_STYLE : useRenderElement.EMPTY_OBJECT;
+  return transitionStatus === 'starting' ? useScrollLock.DISABLED_TRANSITIONS_STYLE : useRenderElement.EMPTY_OBJECT;
+}
+
+/**
+ * Renders the shared outer Positioner element used by popup components.
+ * Applies the common role, hidden state, transition styles, state attributes, and optional inert styling.
+ */
+function usePositioner(componentProps, state, {
+  styles,
+  transitionStatus,
+  props,
+  refs,
+  hidden,
+  inert = false
+}) {
+  const style = {
+    ...styles
+  };
+  if (inert) {
+    style.pointerEvents = 'none';
+  }
+  return useRenderElement.useRenderElement('div', componentProps, {
+    state,
+    ref: refs,
+    props: [{
+      role: 'presentation',
+      hidden,
+      style
+    }, getDisabledMountTransitionStyles(transitionStatus), props],
+    stateAttributesMapping: useScrollLock.popupStateMapping
+  });
+}
+
+// Touch-opened popups normally avoid scroll locking so users can still swipe outside to dismiss.
+// This hook re-enables scroll lock only when the popup is effectively full-width.
+// Treat popups with up to 20px of total horizontal gutter as full-width so common ~10px side
+// padding still locks scroll, since that leaves too little outside space for a reliable swipe.
+const VIEWPORT_WIDTH_TOLERANCE_PX = 20;
+
+/**
+ * Manages scroll lock for anchored popups. For non-touch opens, scroll lock is applied when
+ * enabled. For touch opens, scroll lock is applied only when the positioner width is effectively
+ * viewport-sized.
+ */
+function useAnchoredPopupScrollLock(enabled, touchOpen, positionerElement, referenceElement) {
+  const [touchOpenShouldLockScroll, setTouchOpenShouldLockScroll] = React__namespace.useState(false);
+  useButton.useIsoLayoutEffect(() => {
+    if (!enabled || !touchOpen || positionerElement == null) {
+      setTouchOpenShouldLockScroll(false);
+      return;
+    }
+    const viewportWidth = useButton.ownerDocument(positionerElement).documentElement.clientWidth;
+    const popupWidth = positionerElement.offsetWidth;
+    setTouchOpenShouldLockScroll(viewportWidth > 0 && popupWidth > 0 && popupWidth >= viewportWidth - VIEWPORT_WIDTH_TOLERANCE_PX);
+  }, [enabled, touchOpen, positionerElement]);
+  useScrollLock.useScrollLock(enabled && (!touchOpen || touchOpenShouldLockScroll), referenceElement);
 }
 
 let IndexGuessBehavior = /*#__PURE__*/function (IndexGuessBehavior) {
@@ -1774,10 +1821,10 @@ function useCompositeListItem(params = {}) {
       }
     });
   }, [externalIndex, subscribeMapChange, setIndex]);
-  return React__namespace.useMemo(() => ({
+  return {
     ref,
     index
-  }), [index, ref]);
+  };
 }
 
 exports.CompositeList = CompositeList;
@@ -1786,7 +1833,9 @@ exports.adaptiveOrigin = adaptiveOrigin;
 exports.getDisabledMountTransitionStyles = getDisabledMountTransitionStyles;
 exports.getPseudoElementBounds = getPseudoElementBounds;
 exports.useAnchorPositioning = useAnchorPositioning;
+exports.useAnchoredPopupScrollLock = useAnchoredPopupScrollLock;
 exports.useCompositeListItem = useCompositeListItem;
 exports.useFloatingRootContext = useFloatingRootContext;
 exports.useListNavigation = useListNavigation;
+exports.usePositioner = usePositioner;
 exports.useTypeahead = useTypeahead;