@base-ui/react 1.4.0 → 1.5.0

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

@@ -1,20 +1,20 @@
 'use client';
 
 import * as React from 'react';
-import { isHTMLElement } from '@floating-ui/utils/dom';
-import { isMouseWithinBounds } from '@base-ui/utils/isMouseWithinBounds';
-import { useValueAsRef } from '@base-ui/utils/useValueAsRef';
-import { useStableCallback } from '@base-ui/utils/useStableCallback';
+import { useAnimationFrame } from '@base-ui/utils/useAnimationFrame';
 import { useIsoLayoutEffect } from '@base-ui/utils/useIsoLayoutEffect';
 import { ownerDocument } from '@base-ui/utils/owner';
-import { activeElement, contains, getTarget, isTypeableCombobox, getFloatingFocusElement } from "../utils/element.js";
-import { isVirtualClick, isVirtualPointerEvent, stopEvent } from "../utils/event.js";
-import { isIndexOutOfListBounds, getMinListIndex, getMaxListIndex, getGridNavigatedIndex, isListIndexDisabled, createGridCellMap, getGridCellIndices, getGridCellIndexOfCorner, findNonDisabledListIndex } from "../utils/composite.js";
+import { useStableCallback } from '@base-ui/utils/useStableCallback';
+import { useValueAsRef } from '@base-ui/utils/useValueAsRef';
+import { isHTMLElement } from '@floating-ui/utils/dom';
+import { createChangeEventDetails } from "../../internals/createBaseUIEventDetails.js";
+import { REASONS } from "../../internals/reasons.js";
 import { useFloatingParentNodeId, useFloatingTree } from "../components/FloatingTree.js";
-import { createChangeEventDetails } from "../../utils/createBaseUIEventDetails.js";
-import { REASONS } from "../../utils/reasons.js";
+import { createGridCellMap, findNonDisabledListIndex, getGridCellIndexOfCorner, getGridCellIndices, getGridNavigatedIndex, getMaxListIndex, getMinListIndex, isIndexOutOfListBounds, isListIndexDisabled } from "../utils/composite.js";
+import { ARROW_DOWN, ARROW_LEFT, ARROW_RIGHT, ARROW_UP } from "../utils/constants.js";
+import { activeElement, contains, getFloatingFocusElement, getTarget, isTypeableCombobox } from "../utils/element.js";
 import { enqueueFocus } from "../utils/enqueueFocus.js";
-import { ARROW_UP, ARROW_DOWN, ARROW_RIGHT, ARROW_LEFT } from "../utils/constants.js";
+import { isVirtualClick, isVirtualPointerEvent, stopEvent } from "../utils/event.js";
 export const ESCAPE = 'Escape';
 function doSwitch(orientation, vertical, horizontal) {
   switch (orientation) {
@@ -55,11 +55,6 @@ function isCrossOrientationCloseKey(key, orientation, rtl, cols) {
  * @see https://floating-ui.com/docs/useListNavigation
  */
 export 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,
@@ -95,14 +90,16 @@ export 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 = 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);
@@ -120,6 +117,8 @@ export function useListNavigation(context, props) {
   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) {
@@ -136,7 +135,7 @@ export 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) {
@@ -158,6 +157,9 @@ export 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.
@@ -216,7 +218,7 @@ export 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;
@@ -234,7 +236,7 @@ export 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.
@@ -274,60 +276,12 @@ export 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 (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 = activeElement(ownerDocument(floatingFocusEl));
-          if (floatingFocusEl && contains(floatingFocusEl, activeEl)) {
-            floatingFocusEl.focus({
-              preventScroll: true
-            });
-          }
-        }
-      }
-    };
-    return itemProps;
-  }, [syncCurrentTarget, latestOpenRef, floatingFocusElementRef, focusItemOnHover, listRef, onNavigate, resetOnPointerLeaveRef, virtual]);
-  const getParentOrientation = React.useCallback(() => {
+  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;
@@ -479,6 +433,54 @@ export 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 = 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}`
@@ -513,6 +515,9 @@ export function useListNavigation(context, props) {
     };
   }, [ariaActiveDescendantProp, commonOnKeyDown, floatingFocusElementRef, orientation, typeableComboboxReference, store, open, virtual, domReferenceElement]);
   const trigger = React.useMemo(() => {
+    function openOnNavigationKeyDown(event) {
+      store.setOpen(true, createChangeEventDetails(REASONS.listNavigation, event.nativeEvent, event.currentTarget));
+    }
     function checkVirtualMouse(event) {
       if (focusItemOnOpen === 'auto' && isVirtualClick(event.nativeEvent)) {
         focusItemOnOpenRef.current = !virtual;
@@ -551,10 +556,10 @@ export 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(REASONS.listNavigation, event.nativeEvent, event.currentTarget));
+              openOnNavigationKeyDown(event);
             }
           }
           return undefined;
@@ -565,7 +570,7 @@ export function useListNavigation(context, props) {
           }
           stopEvent(event);
           if (!currentOpen && openOnArrowKeyDown) {
-            store.setOpen(true, createChangeEventDetails(REASONS.listNavigation, event.nativeEvent, event.currentTarget));
+            openOnNavigationKeyDown(event);
           } else {
             commonOnKeyDown(event);
           }
@@ -586,7 +591,7 @@ export 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/esm/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/esm/floating-ui-react/hooks/useSyncedFloatingRootContext.js

@@ -1,38 +1,43 @@
 'use client';
 
-import { useId } from '@base-ui/utils/useId';
-import { useRefWithInit } from '@base-ui/utils/useRefWithInit';
+import * as React from 'react';
 import { useIsoLayoutEffect } from '@base-ui/utils/useIsoLayoutEffect';
 import { isElement } from '@floating-ui/utils/dom';
-import { useFloatingParentNodeId } from "../components/FloatingTree.js";
 import { FloatingRootStore } from "../components/FloatingRootStore.js";
 /**
- * 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 function useSyncedFloatingRootContext(options) {
   const {
     popupStore,
     treatPopupAsFloatingElement = false,
+    floatingRootContext: floatingRootContextProp,
+    floatingId,
+    nested,
     onOpenChange
   } = options;
-  const floatingId = useId();
-  const nested = 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 = useRefWithInit(() => new 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({
+      open,
+      transitionStatus: undefined,
+      referenceElement,
+      floatingElement,
+      triggerElements,
+      onOpenChange: handleOpenChange,
+      floatingId,
+      syncOnly: true,
+      nested
+    });
+  }
+  const store = floatingRootContextProp ?? internalStoreRef.current;
+  popupStore.useSyncedValue('floatingId', floatingId);
   useIsoLayoutEffect(() => {
     const valuesToSync = {
       open,
@@ -49,8 +54,8 @@ export 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/esm/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/esm/floating-ui-react/hooks/useTypeahead.js

@@ -1,62 +1,34 @@
 'use client';
 
 import * as React from 'react';
-import { useStableCallback } from '@base-ui/utils/useStableCallback';
 import { useIsoLayoutEffect } from '@base-ui/utils/useIsoLayoutEffect';
+import { useStableCallback } from '@base-ui/utils/useStableCallback';
 import { useTimeout } from '@base-ui/utils/useTimeout';
+import { isElementVisible } from "../utils/composite.js";
 import { contains } from "../utils/element.js";
 import { stopEvent } from "../utils/event.js";
-import { isElementVisible } from "../utils/composite.js";
 /**
  * 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
  */
 export 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 = 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];
@@ -82,11 +54,11 @@ export 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 ||
@@ -98,7 +70,7 @@ export 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.
@@ -121,7 +93,7 @@ export function useTypeahead(context, props) {
     timeout.start(resetMs, () => {
       stringRef.current = '';
       prevIndexRef.current = matchIndexRef.current;
-      setTypingChange(false);
+      onTyping?.(false);
     });
 
     // Compute the starting index for this search.
@@ -135,18 +107,17 @@ export 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;
     }
 
@@ -154,20 +125,30 @@ export 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]);
 }

package/esm/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/esm/floating-ui-react/index.js

@@ -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 { arrow, autoPlacement, autoUpdate, computePosition, detectOverflow, flip, getOverflowAncestors, hide, inline, limitShift, offset, platform, shift, size } from '@floating-ui/react-dom';

package/esm/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/esm/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 {};

package/esm/floating-ui-react/utils/composite.js

@@ -296,6 +296,8 @@ export function createGridCellMap(sizes, cols, dense) {
   }, index) => {
     if (width > cols) {
       if (process.env.NODE_ENV !== 'production') {
+        // TODO: fix mui/no-guarded-throw
+        // eslint-disable-next-line mui/no-guarded-throw
         throw new Error(`[Floating UI]: Invalid grid - item width at index ${index} is greater than grid columns`);
       }
     }
@@ -370,9 +372,15 @@ export function isListIndexDisabled(list, index, disabledIndices) {
   }
   return !disabledIndices && (element.hasAttribute('disabled') || element.getAttribute('aria-disabled') === 'true');
 }
-export function isElementVisible(element) {
+export function isHiddenByStyles(styles) {
+  return styles.visibility === 'hidden' || styles.visibility === 'collapse';
+}
+export function isElementVisible(element, styles = element ? getComputedStyle(element) : null) {
+  if (!element || !element.isConnected || !styles || isHiddenByStyles(styles)) {
+    return false;
+  }
   if (typeof element.checkVisibility === 'function') {
     return element.checkVisibility();
   }
-  return getComputedStyle(element).display !== 'none';
+  return styles.display !== 'none' && styles.display !== 'contents';
 }