@jobber/components 8.23.0 → 8.23.1

package/dist/useCompositeListItem-es.js

@@ -1,10 +1,10 @@
 import * as React from 'react';
+import { l as useId, a as useIsoLayoutEffect, m as useValueAsRef, b as useStableCallback, n as useAnimationFrame, p as activeElement, o as ownerDocument, q as contains, s as stopEvent, d as createChangeEventDetails, r as listNavigation, g as getTarget, v as focusOut, w as isVirtualClick, x as isVirtualPointerEvent, h as useTimeout, y as jsdom } from './useButton-es.js';
 import { b as isElement, a as isHTMLElement, o as getWindow } from './floating-ui.utils.dom-es.js';
-import { l as useId, a as useIsoLayoutEffect, m as getFloatingFocusElement, n as useValueAsRef, p as isTypeableCombobox, b as useStableCallback, q as activeElement, o as ownerDocument, r as contains, s as stopEvent, d as createChangeEventDetails, v as listNavigation, A as ARROW_DOWN, w as ARROW_LEFT, x as ARROW_RIGHT, g as getTarget, y as focusOut, z as isVirtualClick, B as isVirtualPointerEvent, C as ARROW_UP, h as useTimeout } from './useButton-es.js';
-import { u as useFloatingParentNodeId, a as FloatingRootStore, P as PopupTriggerMap, b as useFloatingTree, i as isIndexOutOfListBounds, g as getMinListIndex, c as getMaxListIndex, d as createGridCellMap, e as isListIndexDisabled, f as getGridNavigatedIndex, h as getGridCellIndices, j as getGridCellIndexOfCorner, k as findNonDisabledListIndex, l as enqueueFocus, m as isElementVisible, n as useDirection, D as DISABLED_TRANSITIONS_STYLE } from './InternalBackdrop-es.js';
-import { a as useRefWithInit, E as EMPTY_OBJECT } from './useRenderElement-es.js';
+import { u as useFloatingParentNodeId, b as FloatingRootStore, P as PopupTriggerMap, d as useFloatingTree, g as getFloatingFocusElement, i as isTypeableCombobox, e as isIndexOutOfListBounds, f as getMinListIndex, h as getMaxListIndex, j as findNonDisabledListIndex, k as enqueueFocus, A as ARROW_UP, l as ARROW_DOWN, m as ARROW_LEFT, n as ARROW_RIGHT, o as isListIndexDisabled, q as isElementVisible, r as useDirection, D as DISABLED_TRANSITIONS_STYLE, p as popupStateMapping, s as useScrollLock } from './useScrollLock-es.js';
+import { a as useRefWithInit, b as EMPTY_ARRAY, E as EMPTY_OBJECT, u as useRenderElement } from './useRenderElement-es.js';
 import { jsx } from 'react/jsx-runtime';
-import { e as evaluate, h as getPaddingObject, b as getAlignmentAxis, d as getAlignment, q as getAxisLength, n as clamp, c as getSide, g as getSideAxis } from './index.esm-es.js';
+import { e as evaluate, d as getPaddingObject, a as getAlignmentAxis, c as getAlignment, o as getAxisLength, l as clamp, b as getSide, g as getSideAxis } from './floating-ui.utils-es.js';
 import { u as useFloating$1, h as hide$1, f as flip, d as size, b as autoUpdate, o as offset, s as shift, l as limitShift } from './floating-ui.react-dom-es.js';
 
 function useFloatingRootContext(options) {
@@ -23,13 +23,14 @@ function useFloatingRootContext(options) {
   }
   const store = useRefWithInit(() => new FloatingRootStore({
     open,
+    transitionStatus: undefined,
     onOpenChange,
     referenceElement: elements.reference ?? null,
     floatingElement: elements.floating ?? null,
     triggerElements: new PopupTriggerMap(),
     floatingId,
-    nested,
-    noEmit: false
+    syncOnly: false,
+    nested
   })).current;
   useIsoLayoutEffect(() => {
     const valuesToSync = {
@@ -49,7 +50,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;
 }
 
@@ -62,30 +62,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.useState(null);
+  const [localDomReference, setLocalDomReference] = React.useState(undefined);
+  const [localFloatingElement, setLocalFloatingElement] = React.useState(undefined);
   const domReferenceRef = React.useRef(null);
   const tree = useFloatingTree(externalTree);
-  useIsoLayoutEffect(() => {
-    if (rootContextElements.domReference) {
-      domReferenceRef.current = rootContextElements.domReference;
-    }
-  }, [rootContextElements.domReference]);
+  const storeElements = React.useMemo(() => ({
+    reference: referenceElement,
+    floating: floatingElement,
+    domReference: domReferenceElement
+  }), [referenceElement, floatingElement, domReferenceElement]);
   const position = useFloating$1({
     ...options,
     elements: {
-      ...rootContextElements,
+      ...storeElements,
       ...(positionReference && {
         reference: positionReference
       })
     }
   });
+  const localDomReferenceElement = 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.useCallback(node => {
     const computedPositionReference = isElement(node) ? {
       getBoundingClientRect: () => node.getBoundingClientRect(),
@@ -97,11 +104,6 @@ function useFloating(options = {}) {
     setPositionReferenceRaw(computedPositionReference);
     position.refs.setReference(computedPositionReference);
   }, [position.refs]);
-  const [localDomReference, setLocalDomReference] = React.useState(null);
-  const [localFloatingElement, setLocalFloatingElement] = React.useState(null);
-  rootContext.useSyncedValue('referenceElement', localDomReference);
-  rootContext.useSyncedValue('domReferenceElement', isElement(localDomReference) ? localDomReference : null);
-  rootContext.useSyncedValue('floatingElement', localFloatingElement);
   const setReference = React.useCallback(node => {
     if (isElement(node) || node === null) {
       domReferenceRef.current = node;
@@ -131,24 +133,27 @@ function useFloating(options = {}) {
   }), [position.refs, setReference, setFloating, setPositionReference]);
   const elements = React.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.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]);
   useIsoLayoutEffect(() => {
-    rootContext.context.dataRef.current.floatingContext = context;
+    if (domReferenceElement) {
+      domReferenceRef.current = domReferenceElement;
+    }
+  }, [domReferenceElement]);
+  useIsoLayoutEffect(() => {
+    store.context.dataRef.current.floatingContext = context;
     const node = tree?.nodesRef.current.find(n => n.id === nodeId);
     if (node) {
       node.context = context;
@@ -159,8 +164,8 @@ function useFloating(options = {}) {
     context,
     refs,
     elements,
-    rootStore: rootContext
-  }), [position, refs, elements, context, rootContext]);
+    rootStore: store
+  }), [position, refs, elements, context, store]);
 }
 
 const ESCAPE = 'Escape';
@@ -189,10 +194,10 @@ function isCrossOrientationOpenKey(key, orientation, rtl) {
   const horizontal = key === ARROW_DOWN;
   return doSwitch(orientation, vertical, horizontal);
 }
-function isCrossOrientationCloseKey(key, orientation, rtl, cols) {
+function isCrossOrientationCloseKey(key, orientation, rtl, grid) {
   const vertical = rtl ? key === ARROW_RIGHT : key === ARROW_LEFT;
   const horizontal = key === ARROW_UP;
-  if (orientation === 'both' || orientation === 'horizontal' && cols && cols > 1) {
+  if (orientation === 'both' || orientation === 'horizontal' && grid) {
     return key === ESCAPE;
   }
   return doSwitch(orientation, vertical, horizontal);
@@ -203,11 +208,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,
@@ -225,11 +225,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) {
@@ -239,18 +240,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 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 = getFloatingFocusElement(floatingElement);
+  const typeableComboboxReference = isTypeableCombobox(domReferenceElement);
   const floatingFocusElementRef = useValueAsRef(floatingFocusElement);
   const parentId = useFloatingParentNodeId();
   const tree = useFloatingTree(externalTree);
-  useIsoLayoutEffect(() => {
-    dataRef.current.orientation = orientation;
-  }, [dataRef, orientation]);
-  const typeableComboboxReference = isTypeableCombobox(domReferenceElement);
   const focusItemOnOpenRef = React.useRef(focusItemOnOpen);
   const indexRef = React.useRef(selectedIndex ?? -1);
   const keyRef = React.useRef(null);
@@ -258,21 +261,23 @@ function useListNavigation(context, props) {
   const onNavigate = useStableCallback(event => {
     onNavigateProp(indexRef.current === -1 ? null : indexRef.current, event);
   });
-  const previousOnNavigateRef = React.useRef(onNavigate);
   const previousMountedRef = React.useRef(!!floatingElement);
   const previousOpenRef = React.useRef(open);
   const forceSyncFocusRef = React.useRef(false);
   const forceScrollIntoViewRef = React.useRef(false);
+  const cancelQueuedFocusRef = React.useRef(null);
   const disabledIndicesRef = useValueAsRef(disabledIndices);
   const latestOpenRef = useValueAsRef(open);
   const selectedIndexRef = useValueAsRef(selectedIndex);
   const resetOnPointerLeaveRef = useValueAsRef(resetOnPointerLeave);
+  const focusFrame = useAnimationFrame();
+  const waitForListPopulatedFrame = useAnimationFrame();
   const focusItem = useStableCallback(() => {
     function runFocus(item) {
       if (virtual) {
         tree?.events.emit('virtualfocus', item);
       } else {
-        enqueueFocus(item, {
+        cancelQueuedFocusRef.current = enqueueFocus(item, {
           sync: forceSyncFocusRef.current,
           preventScroll: true
         });
@@ -283,7 +288,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) {
@@ -305,6 +310,9 @@ function useListNavigation(context, props) {
       }
     });
   });
+  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.
@@ -321,11 +329,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]);
 
@@ -363,12 +371,15 @@ 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
+            // 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 ? getMinListIndex(listRef) : getMaxListIndex(listRef);
             keyRef.current = null;
             onNavigate();
@@ -376,12 +387,12 @@ function useListNavigation(context, props) {
         };
         waitForListPopulated();
       }
-    } else if (!isIndexOutOfListBounds(listRef, activeIndex)) {
+    } else if (!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.
@@ -391,16 +402,18 @@ function useListNavigation(context, props) {
     }
     const nodes = tree.nodesRef.current;
     const parent = nodes.find(node => node.id === parentId)?.context?.elements.floating;
-    const activeEl = activeElement(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 = activeElement(ownerDocument(domReferenceElement ?? parent ?? null));
     const treeContainsActiveEl = nodes.some(node => node.context && 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]);
   useIsoLayoutEffect(() => {
-    previousOnNavigateRef.current = onNavigate;
     previousOpenRef.current = open;
     previousMountedRef.current = !!floatingElement;
   });
@@ -411,68 +424,22 @@ function useListNavigation(context, props) {
     }
   }, [open, focusItemOnOpen]);
   const hasActiveIndex = activeIndex != null;
-  const item = React.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 = 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;
-        }
-        enqueueFocus(null, {
-          sync: true
-        });
-        indexRef.current = -1;
-        onNavigate(event);
-        if (!virtual) {
-          const floatingFocusEl = floatingFocusElementRef.current;
-          const activeEl = activeElement(ownerDocument(floatingFocusEl));
-          if (floatingFocusEl && contains(floatingFocusEl, activeEl)) {
-            floatingFocusEl.focus({
-              preventScroll: true
-            });
-          }
-        }
-      }
-    };
-    return itemProps;
-  }, [latestOpenRef, floatingFocusElementRef, focusItemOnHover, listRef, onNavigate, resetOnPointerLeaveRef, virtual]);
-  const getParentOrientation = React.useCallback(() => {
+    const index = listRef.current.indexOf(event.currentTarget);
+    if (index !== -1 && (indexRef.current !== index || activeIndex !== index)) {
+      indexRef.current = index;
+      onNavigate(event);
+    }
+  });
+  const getParentOrientation = useStableCallback(() => {
     return parentOrientation ?? tree?.nodesRef.current.find(node => node.id === parentId)?.context?.dataRef?.current.orientation;
-  }, [parentId, tree, parentOrientation]);
+  });
+  const getMinEnabledIndex = useStableCallback(() => {
+    return getMinListIndex(listRef, disabledIndicesRef.current);
+  });
   const commonOnKeyDown = useStableCallback(event => {
     isPointerModalityRef.current = false;
     forceSyncFocusRef.current = true;
@@ -491,7 +458,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())) {
@@ -523,41 +490,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 = createGridCellMap(sizes, cols);
-      const minGridIndex = cellMap.findIndex(index => index != null && !isListIndexDisabled(listRef, index, disabledIndices));
-      // last enabled index
-      const maxGridIndex = cellMap.reduce((foundIndex, index, cellIndex) => index != null && !isListIndexDisabled(listRef, index, disabledIndices) ? cellIndex : foundIndex, -1);
-      const index = cellMap[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: getGridCellIndices([...((typeof disabledIndices !== 'function' ? disabledIndices : null) || listRef.current.map((_, listIndex) => isListIndexDisabled(listRef, listIndex, disabledIndices) ? listIndex : undefined)), undefined], cellMap),
-        minIndex: minGridIndex,
-        maxIndex: maxGridIndex,
-        prevIndex: 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 === ARROW_DOWN ? 'bl' : event.key === (rtl ? ARROW_LEFT : 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);
@@ -586,13 +522,13 @@ function useListNavigation(context, props) {
               indexRef.current = minIndex;
             }
           } else {
-            indexRef.current = findNonDisabledListIndex(listRef, {
+            indexRef.current = findNonDisabledListIndex(listRef.current, {
               startingIndex: currentIndex,
               disabledIndices
             });
           }
         } else {
-          indexRef.current = Math.min(maxIndex, findNonDisabledListIndex(listRef, {
+          indexRef.current = Math.min(maxIndex, findNonDisabledListIndex(listRef.current, {
             startingIndex: currentIndex,
             disabledIndices
           }));
@@ -607,25 +543,73 @@ function useListNavigation(context, props) {
             indexRef.current = maxIndex;
           }
         } else {
-          indexRef.current = findNonDisabledListIndex(listRef, {
+          indexRef.current = findNonDisabledListIndex(listRef.current, {
             startingIndex: currentIndex,
             decrement: true,
             disabledIndices
           });
         }
       } else {
-        indexRef.current = Math.max(minIndex, findNonDisabledListIndex(listRef, {
+        indexRef.current = Math.max(minIndex, findNonDisabledListIndex(listRef.current, {
           startingIndex: currentIndex,
           decrement: true,
           disabledIndices
         }));
       }
-      if (isIndexOutOfListBounds(listRef, indexRef.current)) {
+      if (isIndexOutOfListBounds(listRef.current, indexRef.current)) {
         indexRef.current = -1;
       }
       onNavigate(event);
     }
   });
+  const item = React.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 = activeElement(ownerDocument(floatingFocusEl));
+          if (floatingFocusEl && contains(floatingFocusEl, activeEl)) {
+            floatingFocusEl.focus({
+              preventScroll: true
+            });
+          }
+        }
+      }
+    };
+    return itemProps;
+  }, [syncCurrentTarget, latestOpenRef, floatingFocusElementRef, focusItemOnHover, listRef, onNavigate, resetOnPointerLeaveRef, virtual]);
   const ariaActiveDescendantProp = React.useMemo(() => {
     return virtual && open && hasActiveIndex && {
       'aria-activedescendant': `${id}-${activeIndex}`
@@ -660,6 +644,9 @@ function useListNavigation(context, props) {
     };
   }, [ariaActiveDescendantProp, commonOnKeyDown, floatingFocusElementRef, orientation, typeableComboboxReference, store, open, virtual, domReferenceElement]);
   const trigger = React.useMemo(() => {
+    function openOnNavigationKeyDown(event) {
+      store.setOpen(true, createChangeEventDetails(listNavigation, event.nativeEvent, event.currentTarget));
+    }
     function checkVirtualMouse(event) {
       if (focusItemOnOpen === 'auto' && isVirtualClick(event.nativeEvent)) {
         focusItemOnOpenRef.current = !virtual;
@@ -698,10 +685,10 @@ function useListNavigation(context, props) {
           if (isParentCrossOpenKey) {
             stopEvent(event);
             if (currentOpen) {
-              indexRef.current = getMinListIndex(listRef, disabledIndicesRef.current);
+              indexRef.current = getMinEnabledIndex();
               onNavigate(event);
             } else {
-              store.setOpen(true, createChangeEventDetails(listNavigation, event.nativeEvent, event.currentTarget));
+              openOnNavigationKeyDown(event);
             }
           }
           return undefined;
@@ -712,7 +699,7 @@ function useListNavigation(context, props) {
           }
           stopEvent(event);
           if (!currentOpen && openOnArrowKeyDown) {
-            store.setOpen(true, createChangeEventDetails(listNavigation, event.nativeEvent, event.currentTarget));
+            openOnNavigationKeyDown(event);
           } else {
             commonOnKeyDown(event);
           }
@@ -733,7 +720,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.useMemo(() => {
     return {
       ...ariaActiveDescendantProp,
@@ -754,65 +741,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 = useTimeout();
   const stringRef = React.useRef('');
   const prevIndexRef = React.useRef(selectedIndex ?? activeIndex ?? -1);
   const matchIndexRef = React.useRef(null);
-  useIsoLayoutEffect(() => {
-    if (!open && selectedIndex !== null) {
-      return;
-    }
-    timeout.clear();
-    matchIndexRef.current = null;
-    if (stringRef.current !== '') {
-      stringRef.current = '';
-    }
-  }, [open, selectedIndex, timeout]);
-  useIsoLayoutEffect(() => {
-    // Sync arrow key navigation but not typeahead navigation.
-    if (open && stringRef.current === '') {
-      prevIndexRef.current = selectedIndex ?? activeIndex ?? -1;
-    }
-  }, [open, selectedIndex, activeIndex]);
-  const setTypingChange = 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 = useStableCallback(event => {
     function isVisible(index) {
       const element = elementsRef?.current[index];
       return !element || 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 || !isListIndexDisabled(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;
@@ -823,11 +793,11 @@ function useTypeahead(context, props) {
     if (stringRef.current.length > 0 && event.key === ' ') {
       // Space should continue the in-progress typeahead session.
       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 ||
@@ -839,7 +809,7 @@ function useTypeahead(context, props) {
     }
     if (open && event.key !== ' ') {
       stopEvent(event);
-      setTypingChange(true);
+      onTyping?.(true);
     }
 
     // Capture whether this is a new typing session before mutating the string.
@@ -849,8 +819,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.
@@ -862,7 +834,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.
@@ -876,18 +848,17 @@ function useTypeahead(context, props) {
       matchIndexRef.current = index;
     } else if (event.key !== ' ') {
       stringRef.current = '';
-      setTypingChange(false);
+      onTyping?.(false);
     }
   });
   const onBlur = useStableCallback(event => {
     const next = event.relatedTarget;
     const currentDomReferenceElement = store.select('domReferenceElement');
     const currentFloatingElement = store.select('floatingElement');
-    const withinReference = contains(currentDomReferenceElement, next);
-    const withinFloating = contains(currentFloatingElement, next);
+    const withinComposite = contains(currentDomReferenceElement, next) || contains(currentFloatingElement, next);
 
     // Keep the session if focus moves within the composite (reference <-> floating).
-    if (withinReference || withinFloating) {
+    if (withinComposite) {
       return;
     }
 
@@ -895,33 +866,44 @@ function useTypeahead(context, props) {
     timeout.clear();
     stringRef.current = '';
     prevIndexRef.current = matchIndexRef.current;
-    setTypingChange(false);
+    onTyping?.(false);
   });
-  const reference = React.useMemo(() => ({
+  useIsoLayoutEffect(() => {
+    if (!open && selectedIndex !== null) {
+      return;
+    }
+    timeout.clear();
+    matchIndexRef.current = null;
+    if (stringRef.current !== '') {
+      stringRef.current = '';
+    }
+  }, [open, selectedIndex, timeout]);
+  useIsoLayoutEffect(() => {
+    // Sync arrow key navigation but not typeahead navigation.
+    if (open && stringRef.current === '') {
+      prevIndexRef.current = selectedIndex ?? activeIndex ?? -1;
+    }
+  }, [open, selectedIndex, activeIndex]);
+  const sharedProps = React.useMemo(() => ({
     onKeyDown,
     onBlur
   }), [onKeyDown, onBlur]);
-  const floating = React.useMemo(() => {
-    return {
-      onKeyDown,
-      onBlur
-    };
-  }, [onKeyDown, onBlur]);
   return React.useMemo(() => enabled ? {
-    reference,
-    floating
-  } : {}, [enabled, reference, floating]);
+    reference: sharedProps,
+    floating: sharedProps
+  } : {}, [enabled, sharedProps]);
 }
 
 function getPseudoElementBounds(element) {
   const elementRect = element.getBoundingClientRect();
+  const win = 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 (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;
@@ -1203,6 +1185,7 @@ const arrow = (options, deps) => ({
   options: [options, deps]
 });
 
+const nativeHideFn = hide$1().fn;
 const hide = {
   name: 'hide',
   async fn(state) {
@@ -1213,7 +1196,7 @@ const hide = {
       y
     } = state.rects.reference;
     const anchorHidden = width === 0 && height === 0 && x === 0 && y === 0;
-    const nativeHideResult = await hide$1().fn(state);
+    const nativeHideResult = await nativeHideFn(state);
     return {
       data: {
         referenceHidden: nativeHideResult.data?.referenceHidden || anchorHidden
@@ -1343,6 +1326,7 @@ function useAnchorPositioning(params) {
     sticky = false,
     arrowPadding = 5,
     disableAnchorTracking = false,
+    inline: inlineMiddleware,
     // Private parameters
     keepMounted = false,
     floatingRootContext,
@@ -1365,6 +1349,7 @@ function useAnchorPositioning(params) {
   const anchorFnCallback = useStableCallback(anchorFn);
   const anchorDep = anchorFn ? anchorFnCallback : anchor;
   const anchorValueRef = useValueAsRef(anchor);
+  const mountedRef = useValueAsRef(mounted);
   const direction = useDirection();
   const isRtl = direction === 'rtl';
   const side = mountSide || {
@@ -1416,7 +1401,11 @@ function useAnchorPositioning(params) {
   const alignOffsetRef = useValueAsRef(alignOffset);
   const sideOffsetDep = typeof sideOffset !== 'function' ? sideOffset : 0;
   const alignOffsetDep = typeof alignOffset !== 'function' ? alignOffset : 0;
-  const middleware = [offset(state => {
+  const middleware = [];
+  if (inlineMiddleware) {
+    middleware.push(inlineMiddleware);
+  }
+  middleware.push(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;
@@ -1425,7 +1414,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 : flip({
@@ -1490,12 +1479,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 = getWindow(floating).devicePixelRatio || 1;
       const {
         x,
         y,
@@ -1507,10 +1499,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 || ownerDocument(state.elements.floating).createElement('div'),
     padding: arrowPadding,
     offsetParent: 'floating'
   }), [arrowPadding]), {
@@ -1554,7 +1546,8 @@ function useAnchorPositioning(params) {
       floatingRootContext.update({
         referenceElement: null,
         floatingElement: null,
-        domReferenceElement: null
+        domReferenceElement: null,
+        positionReference: null
       });
     }
   }, [mounted, floatingRootContext]);
@@ -1575,6 +1568,7 @@ function useAnchorPositioning(params) {
     floatingStyles: originalFloatingStyles
   } = useFloating({
     rootContext: floatingRootContext,
+    open: keepMounted ? mounted : undefined,
     placement,
     middleware,
     strategy: positionMethod,
@@ -1635,8 +1629,8 @@ function useAnchorPositioning(params) {
     }
   }, [mounted, refs, anchorDep, anchorValueRef]);
   React.useEffect(() => {
-    if (keepMounted && mounted && elements.domReference && elements.floating) {
-      return autoUpdate(elements.domReference, elements.floating, update, autoUpdateOptions);
+    if (keepMounted && mounted && elements.reference && elements.floating) {
+      return autoUpdate(elements.reference, elements.floating, update, autoUpdateOptions);
     }
     return undefined;
   }, [keepMounted, mounted, elements, update, autoUpdateOptions]);
@@ -1645,11 +1639,9 @@ function useAnchorPositioning(params) {
   const renderedAlign = 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.
   useIsoLayoutEffect(() => {
     if (lazyFlip && mounted && isPositioned) {
       setMountSide(renderedSide);
@@ -1684,6 +1676,61 @@ function getDisabledMountTransitionStyles(transitionStatus) {
   return transitionStatus === 'starting' ? DISABLED_TRANSITIONS_STYLE : 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('div', componentProps, {
+    state,
+    ref: refs,
+    props: [{
+      role: 'presentation',
+      hidden,
+      style
+    }, getDisabledMountTransitionStyles(transitionStatus), props],
+    stateAttributesMapping: 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.useState(false);
+  useIsoLayoutEffect(() => {
+    if (!enabled || !touchOpen || positionerElement == null) {
+      setTouchOpenShouldLockScroll(false);
+      return;
+    }
+    const viewportWidth = ownerDocument(positionerElement).documentElement.clientWidth;
+    const popupWidth = positionerElement.offsetWidth;
+    setTouchOpenShouldLockScroll(viewportWidth > 0 && popupWidth > 0 && popupWidth >= viewportWidth - VIEWPORT_WIDTH_TOLERANCE_PX);
+  }, [enabled, touchOpen, positionerElement]);
+  useScrollLock(enabled && (!touchOpen || touchOpenShouldLockScroll), referenceElement);
+}
+
 let IndexGuessBehavior = /*#__PURE__*/function (IndexGuessBehavior) {
   IndexGuessBehavior[IndexGuessBehavior["None"] = 0] = "None";
   IndexGuessBehavior[IndexGuessBehavior["GuessFromOrder"] = 1] = "GuessFromOrder";
@@ -1753,10 +1800,10 @@ function useCompositeListItem(params = {}) {
       }
     });
   }, [externalIndex, subscribeMapChange, setIndex]);
-  return React.useMemo(() => ({
+  return {
     ref,
     index
-  }), [index, ref]);
+  };
 }
 
-export { CompositeList as C, IndexGuessBehavior as I, useListNavigation as a, useTypeahead as b, useAnchorPositioning as c, getDisabledMountTransitionStyles as d, useCompositeListItem as e, adaptiveOrigin as f, getPseudoElementBounds as g, useFloatingRootContext as u };
+export { CompositeList as C, IndexGuessBehavior as I, useListNavigation as a, useTypeahead as b, useAnchoredPopupScrollLock as c, useAnchorPositioning as d, usePositioner as e, getDisabledMountTransitionStyles as f, getPseudoElementBounds as g, useCompositeListItem as h, adaptiveOrigin as i, useFloatingRootContext as u };