@base-ui/react 1.4.0 → 1.5.0

package/floating-ui-react/hooks/useListNavigation.js

@@ -8,20 +8,20 @@ Object.defineProperty(exports, "__esModule", {
 exports.ESCAPE = void 0;
 exports.useListNavigation = useListNavigation;
 var React = _interopRequireWildcard(require("react"));
-var _dom = require("@floating-ui/utils/dom");
-var _isMouseWithinBounds = require("@base-ui/utils/isMouseWithinBounds");
-var _useValueAsRef = require("@base-ui/utils/useValueAsRef");
-var _useStableCallback = require("@base-ui/utils/useStableCallback");
+var _useAnimationFrame = require("@base-ui/utils/useAnimationFrame");
 var _useIsoLayoutEffect = require("@base-ui/utils/useIsoLayoutEffect");
 var _owner = require("@base-ui/utils/owner");
-var _element = require("../utils/element");
-var _event = require("../utils/event");
-var _composite = require("../utils/composite");
+var _useStableCallback = require("@base-ui/utils/useStableCallback");
+var _useValueAsRef = require("@base-ui/utils/useValueAsRef");
+var _dom = require("@floating-ui/utils/dom");
+var _createBaseUIEventDetails = require("../../internals/createBaseUIEventDetails");
+var _reasons = require("../../internals/reasons");
 var _FloatingTree = require("../components/FloatingTree");
-var _createBaseUIEventDetails = require("../../utils/createBaseUIEventDetails");
-var _reasons = require("../../utils/reasons");
-var _enqueueFocus = require("../utils/enqueueFocus");
+var _composite = require("../utils/composite");
 var _constants = require("../utils/constants");
+var _element = require("../utils/element");
+var _enqueueFocus = require("../utils/enqueueFocus");
+var _event = require("../utils/event");
 const ESCAPE = exports.ESCAPE = 'Escape';
 function doSwitch(orientation, vertical, horizontal) {
   switch (orientation) {
@@ -62,11 +62,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,
@@ -102,14 +97,16 @@ function useListNavigation(context, props) {
       console.warn('In grid list navigation mode (`cols` > 1), 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 = (0, _element.getFloatingFocusElement)(floatingElement);
+  const typeableComboboxReference = (0, _element.isTypeableCombobox)(domReferenceElement);
   const floatingFocusElementRef = (0, _useValueAsRef.useValueAsRef)(floatingFocusElement);
   const parentId = (0, _FloatingTree.useFloatingParentNodeId)();
   const tree = (0, _FloatingTree.useFloatingTree)(externalTree);
-  (0, _useIsoLayoutEffect.useIsoLayoutEffect)(() => {
-    dataRef.current.orientation = orientation;
-  }, [dataRef, orientation]);
-  const typeableComboboxReference = (0, _element.isTypeableCombobox)(domReferenceElement);
   const focusItemOnOpenRef = React.useRef(focusItemOnOpen);
   const indexRef = React.useRef(selectedIndex ?? -1);
   const keyRef = React.useRef(null);
@@ -127,6 +124,8 @@ function useListNavigation(context, props) {
   const latestOpenRef = (0, _useValueAsRef.useValueAsRef)(open);
   const selectedIndexRef = (0, _useValueAsRef.useValueAsRef)(selectedIndex);
   const resetOnPointerLeaveRef = (0, _useValueAsRef.useValueAsRef)(resetOnPointerLeave);
+  const focusFrame = (0, _useAnimationFrame.useAnimationFrame)();
+  const waitForListPopulatedFrame = (0, _useAnimationFrame.useAnimationFrame)();
   const focusItem = (0, _useStableCallback.useStableCallback)(() => {
     function runFocus(item) {
       if (virtual) {
@@ -143,7 +142,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) {
@@ -165,6 +164,9 @@ function useListNavigation(context, props) {
       }
     });
   });
+  (0, _useIsoLayoutEffect.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.
@@ -223,7 +225,7 @@ 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;
@@ -241,7 +243,7 @@ function useListNavigation(context, props) {
       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.
@@ -281,60 +283,12 @@ function useListNavigation(context, props) {
       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 ((0, _isMouseWithinBounds.isMouseWithinBounds)(event)) {
-          return;
-        }
-        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 = (0, _element.activeElement)((0, _owner.ownerDocument)(floatingFocusEl));
-          if (floatingFocusEl && (0, _element.contains)(floatingFocusEl, activeEl)) {
-            floatingFocusEl.focus({
-              preventScroll: true
-            });
-          }
-        }
-      }
-    };
-    return itemProps;
-  }, [syncCurrentTarget, latestOpenRef, floatingFocusElementRef, focusItemOnHover, listRef, onNavigate, resetOnPointerLeaveRef, virtual]);
-  const getParentOrientation = React.useCallback(() => {
+  const getParentOrientation = (0, _useStableCallback.useStableCallback)(() => {
     return parentOrientation ?? tree?.nodesRef.current.find(node => node.id === parentId)?.context?.dataRef?.current.orientation;
-  }, [parentId, tree, parentOrientation]);
+  });
+  const getMinEnabledIndex = (0, _useStableCallback.useStableCallback)(() => {
+    return (0, _composite.getMinListIndex)(listRef, disabledIndicesRef.current);
+  });
   const commonOnKeyDown = (0, _useStableCallback.useStableCallback)(event => {
     isPointerModalityRef.current = false;
     forceSyncFocusRef.current = true;
@@ -486,6 +440,54 @@ function useListNavigation(context, props) {
       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 = (0, _element.activeElement)((0, _owner.ownerDocument)(floatingFocusEl));
+          if (floatingFocusEl && (0, _element.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}`
@@ -520,6 +522,9 @@ function useListNavigation(context, props) {
     };
   }, [ariaActiveDescendantProp, commonOnKeyDown, floatingFocusElementRef, orientation, typeableComboboxReference, store, open, virtual, domReferenceElement]);
   const trigger = React.useMemo(() => {
+    function openOnNavigationKeyDown(event) {
+      store.setOpen(true, (0, _createBaseUIEventDetails.createChangeEventDetails)(_reasons.REASONS.listNavigation, event.nativeEvent, event.currentTarget));
+    }
     function checkVirtualMouse(event) {
       if (focusItemOnOpen === 'auto' && (0, _event.isVirtualClick)(event.nativeEvent)) {
         focusItemOnOpenRef.current = !virtual;
@@ -558,10 +563,10 @@ function useListNavigation(context, props) {
           if (isParentCrossOpenKey) {
             (0, _event.stopEvent)(event);
             if (currentOpen) {
-              indexRef.current = (0, _composite.getMinListIndex)(listRef, disabledIndicesRef.current);
+              indexRef.current = getMinEnabledIndex();
               onNavigate(event);
             } else {
-              store.setOpen(true, (0, _createBaseUIEventDetails.createChangeEventDetails)(_reasons.REASONS.listNavigation, event.nativeEvent, event.currentTarget));
+              openOnNavigationKeyDown(event);
             }
           }
           return undefined;
@@ -572,7 +577,7 @@ function useListNavigation(context, props) {
           }
           (0, _event.stopEvent)(event);
           if (!currentOpen && openOnArrowKeyDown) {
-            store.setOpen(true, (0, _createBaseUIEventDetails.createChangeEventDetails)(_reasons.REASONS.listNavigation, event.nativeEvent, event.currentTarget));
+            openOnNavigationKeyDown(event);
           } else {
             commonOnKeyDown(event);
           }
@@ -593,7 +598,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,

package/floating-ui-react/hooks/useSyncedFloatingRootContext.d.ts

@@ -2,16 +2,19 @@ import { ReactStore } from '@base-ui/utils/store';
 import { BaseUIChangeEventDetails } from "../../types/index.js";
 import { PopupStoreContext, PopupStoreSelectors, PopupStoreState } from "../../utils/popups/index.js";
 import { FloatingRootStore } from "../components/FloatingRootStore.js";
-export interface UseSyncedFloatingRootContextOptions<State extends PopupStoreState<any>> {
-  popupStore: ReactStore<State, PopupStoreContext<any>, PopupStoreSelectors>;
+export interface UseSyncedFloatingRootContextOptions<State extends PopupStoreState<unknown>, ContextEventDetails extends BaseUIChangeEventDetails<string>, OpenChangeEventDetails extends BaseUIChangeEventDetails<string>> {
+  popupStore: ReactStore<State, PopupStoreContext<ContextEventDetails>, PopupStoreSelectors>;
   /**
    * Whether the Popup element is passed to Floating UI as the floating element instead of the default Positioner.
    */
   treatPopupAsFloatingElement?: boolean | undefined;
-  onOpenChange(open: boolean, eventDetails: BaseUIChangeEventDetails<string>): void;
+  floatingRootContext?: FloatingRootStore | undefined;
+  floatingId: string | undefined;
+  nested: boolean;
+  onOpenChange(open: boolean, eventDetails: OpenChangeEventDetails): void;
 }
 /**
- * Initializes a FloatingRootStore that is kept in sync with the provided PopupStore.
- * The new instance is created only once and updated on every render.
+ * Keeps a FloatingRootStore in sync with the provided PopupStore.
+ * Uses the provided FloatingRootStore when one exists, otherwise creates one once and updates it on every render.
  */
-export declare function useSyncedFloatingRootContext<State extends PopupStoreState<any>>(options: UseSyncedFloatingRootContextOptions<State>): FloatingRootStore;
+export declare function useSyncedFloatingRootContext<State extends PopupStoreState<unknown>, ContextEventDetails extends BaseUIChangeEventDetails<string>, OpenChangeEventDetails extends BaseUIChangeEventDetails<string>>(options: UseSyncedFloatingRootContextOptions<State, ContextEventDetails, OpenChangeEventDetails>): FloatingRootStore;

package/floating-ui-react/hooks/useSyncedFloatingRootContext.js

@@ -1,43 +1,49 @@
 "use strict";
 'use client';
 
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.useSyncedFloatingRootContext = useSyncedFloatingRootContext;
-var _useId = require("@base-ui/utils/useId");
-var _useRefWithInit = require("@base-ui/utils/useRefWithInit");
+var React = _interopRequireWildcard(require("react"));
 var _useIsoLayoutEffect = require("@base-ui/utils/useIsoLayoutEffect");
 var _dom = require("@floating-ui/utils/dom");
-var _FloatingTree = require("../components/FloatingTree");
 var _FloatingRootStore = require("../components/FloatingRootStore");
 /**
- * Initializes a FloatingRootStore that is kept in sync with the provided PopupStore.
- * The new instance is created only once and updated on every render.
+ * Keeps a FloatingRootStore in sync with the provided PopupStore.
+ * Uses the provided FloatingRootStore when one exists, otherwise creates one once and updates it on every render.
  */
 function useSyncedFloatingRootContext(options) {
   const {
     popupStore,
     treatPopupAsFloatingElement = false,
+    floatingRootContext: floatingRootContextProp,
+    floatingId,
+    nested,
     onOpenChange
   } = options;
-  const floatingId = (0, _useId.useId)();
-  const nested = (0, _FloatingTree.useFloatingParentNodeId)() != null;
   const open = popupStore.useState('open');
   const referenceElement = popupStore.useState('activeTriggerElement');
   const floatingElement = popupStore.useState(treatPopupAsFloatingElement ? 'popupElement' : 'positionerElement');
   const triggerElements = popupStore.context.triggerElements;
-  const store = (0, _useRefWithInit.useRefWithInit)(() => new _FloatingRootStore.FloatingRootStore({
-    open,
-    transitionStatus: undefined,
-    referenceElement,
-    floatingElement,
-    triggerElements,
-    onOpenChange,
-    floatingId,
-    syncOnly: true,
-    nested
-  })).current;
+  const handleOpenChange = onOpenChange;
+  const internalStoreRef = React.useRef(null);
+  if (floatingRootContextProp === undefined && internalStoreRef.current === null) {
+    internalStoreRef.current = new _FloatingRootStore.FloatingRootStore({
+      open,
+      transitionStatus: undefined,
+      referenceElement,
+      floatingElement,
+      triggerElements,
+      onOpenChange: handleOpenChange,
+      floatingId,
+      syncOnly: true,
+      nested
+    });
+  }
+  const store = floatingRootContextProp ?? internalStoreRef.current;
+  popupStore.useSyncedValue('floatingId', floatingId);
   (0, _useIsoLayoutEffect.useIsoLayoutEffect)(() => {
     const valuesToSync = {
       open,
@@ -54,8 +60,8 @@ function useSyncedFloatingRootContext(options) {
     store.update(valuesToSync);
   }, [open, floatingId, referenceElement, floatingElement, store]);
 
-  // TODO: When `setOpen` is a part of the PopupStore API, we don't need to sync it.
-  store.context.onOpenChange = onOpenChange;
+  // Keep non-reactive context values fresh for interactions that call `store.setOpen`.
+  store.context.onOpenChange = handleOpenChange;
   store.context.nested = nested;
   return store;
 }

package/floating-ui-react/hooks/useTypeahead.d.ts

@@ -18,14 +18,15 @@ export interface UseTypeaheadProps {
   onMatch?: ((index: number) => void) | undefined;
   /**
    * Optional list of item elements that correspond to `listRef` indices.
-   * When an element exists for an index, typeahead skips it if it is hidden
-   * via CSS (`display: none`).
+   * When an element exists for an index, typeahead skips it if it is hidden by
+   * `display: none`, `visibility: hidden|collapse`, or other
+   * browser-reported visibility checks.
    */
   elementsRef?: React.RefObject<Array<HTMLElement | null>> | undefined;
   /**
-   * Callback invoked with the typing state as the user types.
+   * Callback invoked with the current typing activity as the user types.
    */
-  onTypingChange?: ((isTyping: boolean) => void) | undefined;
+  onTyping?: ((isTyping: boolean) => void) | undefined;
   /**
    * Whether the Hook is enabled, including all internal Effects and event
    * handlers.

package/floating-ui-react/hooks/useTypeahead.js

@@ -7,62 +7,34 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.useTypeahead = useTypeahead;
 var React = _interopRequireWildcard(require("react"));
-var _useStableCallback = require("@base-ui/utils/useStableCallback");
 var _useIsoLayoutEffect = require("@base-ui/utils/useIsoLayoutEffect");
+var _useStableCallback = require("@base-ui/utils/useStableCallback");
 var _useTimeout = require("@base-ui/utils/useTimeout");
+var _composite = require("../utils/composite");
 var _element = require("../utils/element");
 var _event = require("../utils/event");
-var _composite = require("../utils/composite");
 /**
  * Provides a matching callback that can be used to focus an item as the user
  * types, often used in tandem with `useListNavigation()`.
  * @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,
+    onTyping,
     enabled = true,
     resetMs = 750,
     selectedIndex = null
   } = props;
+  const store = 'rootStore' in context ? context.rootStore : context;
+  const open = store.useState('open');
   const timeout = (0, _useTimeout.useTimeout)();
   const stringRef = React.useRef('');
   const prevIndexRef = React.useRef(selectedIndex ?? activeIndex ?? -1);
   const matchIndexRef = React.useRef(null);
-  (0, _useIsoLayoutEffect.useIsoLayoutEffect)(() => {
-    if (!open && selectedIndex !== null) {
-      return;
-    }
-    timeout.clear();
-    matchIndexRef.current = null;
-    if (stringRef.current !== '') {
-      stringRef.current = '';
-    }
-  }, [open, selectedIndex, timeout]);
-  (0, _useIsoLayoutEffect.useIsoLayoutEffect)(() => {
-    // Sync arrow key navigation but not typeahead navigation.
-    if (open && stringRef.current === '') {
-      prevIndexRef.current = selectedIndex ?? activeIndex ?? -1;
-    }
-  }, [open, selectedIndex, activeIndex]);
-  const setTypingChange = (0, _useStableCallback.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 = (0, _useStableCallback.useStableCallback)(event => {
     function isVisible(index) {
       const element = elementsRef?.current[index];
@@ -88,11 +60,11 @@ function useTypeahead(context, props) {
     if (stringRef.current.length > 0 && event.key === ' ') {
       // Space should continue the in-progress typeahead session.
       (0, _event.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 ||
@@ -104,7 +76,7 @@ function useTypeahead(context, props) {
     }
     if (open && event.key !== ' ') {
       (0, _event.stopEvent)(event);
-      setTypingChange(true);
+      onTyping?.(true);
     }
 
     // Capture whether this is a new typing session before mutating the string.
@@ -127,7 +99,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.
@@ -141,18 +113,17 @@ function useTypeahead(context, props) {
       matchIndexRef.current = index;
     } else if (event.key !== ' ') {
       stringRef.current = '';
-      setTypingChange(false);
+      onTyping?.(false);
     }
   });
   const onBlur = (0, _useStableCallback.useStableCallback)(event => {
     const next = event.relatedTarget;
     const currentDomReferenceElement = store.select('domReferenceElement');
     const currentFloatingElement = store.select('floatingElement');
-    const withinReference = (0, _element.contains)(currentDomReferenceElement, next);
-    const withinFloating = (0, _element.contains)(currentFloatingElement, next);
+    const withinComposite = (0, _element.contains)(currentDomReferenceElement, next) || (0, _element.contains)(currentFloatingElement, next);
 
     // Keep the session if focus moves within the composite (reference <-> floating).
-    if (withinReference || withinFloating) {
+    if (withinComposite) {
       return;
     }
 
@@ -160,20 +131,30 @@ function useTypeahead(context, props) {
     timeout.clear();
     stringRef.current = '';
     prevIndexRef.current = matchIndexRef.current;
-    setTypingChange(false);
+    onTyping?.(false);
   });
-  const reference = React.useMemo(() => ({
+  (0, _useIsoLayoutEffect.useIsoLayoutEffect)(() => {
+    if (!open && selectedIndex !== null) {
+      return;
+    }
+    timeout.clear();
+    matchIndexRef.current = null;
+    if (stringRef.current !== '') {
+      stringRef.current = '';
+    }
+  }, [open, selectedIndex, timeout]);
+  (0, _useIsoLayoutEffect.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]);
 }

package/floating-ui-react/index.d.ts

@@ -13,9 +13,7 @@ export { useFocus } from "./hooks/useFocus.js";
 export { useHoverFloatingInteraction } from "./hooks/useHoverFloatingInteraction.js";
 export { useHoverReferenceInteraction } from "./hooks/useHoverReferenceInteraction.js";
 export { useHover } from "./hooks/useHover.js";
-export { useInteractions } from "./hooks/useInteractions.js";
 export { useListNavigation } from "./hooks/useListNavigation.js";
-export { useRole } from "./hooks/useRole.js";
 export { useTypeahead } from "./hooks/useTypeahead.js";
 export { safePolygon } from "./safePolygon.js";
 export type * from "./types.js";

package/floating-ui-react/index.js

@@ -213,24 +213,12 @@ Object.defineProperty(exports, "useHoverReferenceInteraction", {
     return _useHoverReferenceInteraction.useHoverReferenceInteraction;
   }
 });
-Object.defineProperty(exports, "useInteractions", {
-  enumerable: true,
-  get: function () {
-    return _useInteractions.useInteractions;
-  }
-});
 Object.defineProperty(exports, "useListNavigation", {
   enumerable: true,
   get: function () {
     return _useListNavigation.useListNavigation;
   }
 });
-Object.defineProperty(exports, "useRole", {
-  enumerable: true,
-  get: function () {
-    return _useRole.useRole;
-  }
-});
 Object.defineProperty(exports, "useSyncedFloatingRootContext", {
   enumerable: true,
   get: function () {
@@ -258,9 +246,7 @@ var _useFocus = require("./hooks/useFocus");
 var _useHoverFloatingInteraction = require("./hooks/useHoverFloatingInteraction");
 var _useHoverReferenceInteraction = require("./hooks/useHoverReferenceInteraction");
 var _useHover = require("./hooks/useHover");
-var _useInteractions = require("./hooks/useInteractions");
 var _useListNavigation = require("./hooks/useListNavigation");
-var _useRole = require("./hooks/useRole");
 var _useTypeahead = require("./hooks/useTypeahead");
 var _safePolygon = require("./safePolygon");
 var _reactDom = require("@floating-ui/react-dom");

package/floating-ui-react/types.d.ts

@@ -1,7 +1,6 @@
 import type { UseFloatingOptions as UsePositionOptions, UseFloatingReturn as UsePositionFloatingReturn, VirtualElement } from '@floating-ui/react-dom';
 import type * as React from 'react';
-import type { BaseUIChangeEventDetails } from "../utils/createBaseUIEventDetails.js";
-import type { ExtendedUserProps } from "./hooks/useInteractions.js";
+import type { BaseUIChangeEventDetails } from "../internals/createBaseUIEventDetails.js";
 import type { FloatingTreeStore } from "./components/FloatingTreeStore.js";
 import type { FloatingRootStore } from "./components/FloatingRootStore.js";
 export * from "./index.js";
@@ -16,10 +15,8 @@ export type { HandleCloseContext, HandleClose } from "./hooks/useHoverShared.js"
 export type { UseHoverFloatingInteractionProps } from "./hooks/useHoverFloatingInteraction.js";
 export type { UseHoverReferenceInteractionProps } from "./hooks/useHoverReferenceInteraction.js";
 export type { UseListNavigationProps } from "./hooks/useListNavigation.js";
-export type { UseRoleProps } from "./hooks/useRole.js";
 export type { UseTypeaheadProps } from "./hooks/useTypeahead.js";
 export type { UseFloatingRootContextOptions } from "./hooks/useFloatingRootContext.js";
-export type { UseInteractionsReturn } from "./hooks/useInteractions.js";
 export type { SafePolygonOptions } from "./safePolygon.js";
 export type { FloatingTreeProps, FloatingNodeProps } from "./components/FloatingTree.js";
 export type { AlignedPlacement, Alignment, ArrowOptions, AutoPlacementOptions, AutoUpdateOptions, Axis, Boundary, ClientRectObject, ComputePositionConfig, ComputePositionReturn, Coords, DetectOverflowOptions, Dimensions, ElementContext, ElementRects, Elements, FlipOptions, FloatingElement, HideOptions, InlineOptions, Length, Middleware, MiddlewareArguments, MiddlewareData, MiddlewareReturn, MiddlewareState, NodeScroll, OffsetOptions, Padding, Placement, Platform, Rect, ReferenceElement, RootBoundary, ShiftOptions, Side, SideObject, SizeOptions, Strategy, VirtualElement } from '@floating-ui/react-dom';
@@ -51,8 +48,6 @@ export interface FloatingEvents {
 export interface ContextData {
   openEvent?: Event | undefined;
   floatingContext?: FloatingContext | undefined;
-  /** @deprecated use `onTypingChange` prop in `useTypeahead` */
-  typing?: boolean | undefined;
   [key: string]: any;
 }
 export type FloatingRootContext = FloatingRootStore;
@@ -76,7 +71,7 @@ export type FloatingTreeType = FloatingTreeStore;
 export interface ElementProps {
   reference?: React.HTMLProps<Element> | undefined;
   floating?: React.HTMLProps<HTMLElement> | undefined;
-  item?: React.HTMLProps<HTMLElement> | ((props: ExtendedUserProps) => React.HTMLProps<HTMLElement>) | undefined;
+  item?: React.HTMLProps<HTMLElement> | undefined;
   trigger?: React.HTMLProps<Element> | undefined;
 }
 export type ReferenceType = Element | VirtualElement;
@@ -117,7 +112,7 @@ export interface UseFloatingOptions extends Omit<UsePositionOptions, 'elements'>
    */
   nodeId?: string | undefined;
   /**
-   * External FlatingTree to use when the one provided by context can't be used.
+   * External FloatingTree to use when the one provided by context can't be used.
    */
   externalTree?: FloatingTreeStore | undefined;
 }

package/floating-ui-react/utils/composite.d.ts

@@ -47,5 +47,6 @@ export declare function getGridCellIndexOfCorner(index: number, sizes: Dimension
 /** Gets all cell indices that correspond to the specified indices */
 export declare function getGridCellIndices(indices: (number | undefined)[], cellMap: (number | undefined)[]): number[];
 export declare function isListIndexDisabled(list: ReadonlyArray<HTMLElement | null>, index: number, disabledIndices?: DisabledIndices): boolean;
-export declare function isElementVisible(element: Element): boolean;
+export declare function isHiddenByStyles(styles: CSSStyleDeclaration): boolean;
+export declare function isElementVisible(element: Element | null, styles?: CSSStyleDeclaration | null): boolean;
 export {};