@base-ui/react 1.3.0 → 1.4.1

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

@@ -3,14 +3,17 @@
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
 import { isElement } from '@floating-ui/utils/dom';
+import { addEventListener } from '@base-ui/utils/addEventListener';
+import { mergeCleanups } from '@base-ui/utils/mergeCleanups';
 import { useValueAsRef } from '@base-ui/utils/useValueAsRef';
 import { useStableCallback } from '@base-ui/utils/useStableCallback';
 import { ownerDocument } from '@base-ui/utils/owner';
-import { contains, isMouseLikePointerType, isTargetInsideEnabledTrigger } from "../utils.js";
-import { createChangeEventDetails } from "../../utils/createBaseUIEventDetails.js";
-import { REASONS } from "../../utils/reasons.js";
+import { contains, getTarget, isTargetInsideEnabledTrigger } from "../utils/element.js";
+import { isMouseLikePointerType } from "../utils/event.js";
+import { createChangeEventDetails } from "../../internals/createBaseUIEventDetails.js";
+import { REASONS } from "../../internals/reasons.js";
 import { useFloatingTree } from "../components/FloatingTree.js";
-import { clearSafePolygonPointerEventsMutation, useHoverInteractionSharedState } from "./useHoverInteractionSharedState.js";
+import { applySafePolygonPointerEventsMutation, clearSafePolygonPointerEventsMutation, useHoverInteractionSharedState } from "./useHoverInteractionSharedState.js";
 import { getDelay, getRestMs, isClickLikeOpenEvent as isClickLikeOpenEventShared } from "./useHoverShared.js";
 const EMPTY_REF = {
   current: null
@@ -36,14 +39,17 @@ export function useHoverReferenceInteraction(context, props = {}) {
     triggerElementRef = EMPTY_REF,
     externalTree,
     isActiveTrigger = true,
-    getHandleCloseContext
+    getHandleCloseContext,
+    isClosing
   } = props;
   const tree = useFloatingTree(externalTree);
   const instance = useHoverInteractionSharedState(store);
+  const isHoverCloseActiveRef = React.useRef(false);
   const handleCloseRef = useValueAsRef(handleClose);
   const delayRef = useValueAsRef(delay);
   const restMsRef = useValueAsRef(restMs);
   const enabledRef = useValueAsRef(enabled);
+  const isClosingRef = useValueAsRef(isClosing);
   if (isActiveTrigger) {
     // eslint-disable-next-line no-underscore-dangle
     instance.handleCloseOptions = handleCloseRef.current?.__options;
@@ -69,7 +75,7 @@ export function useHoverReferenceInteraction(context, props = {}) {
     const targetElement = target;
     return allTriggers.hasMatchingElement(trigger => contains(trigger, targetElement)) && (!currentDomReference || !contains(currentDomReference, targetElement));
   });
-  const closeWithDelay = React.useCallback((event, runElseBranch = true) => {
+  const closeWithDelay = useStableCallback((event, runElseBranch = true) => {
     const closeDelay = getDelay(delayRef.current, 'close', instance.pointerType);
     if (closeDelay) {
       instance.openChangeTimeout.start(closeDelay, () => {
@@ -81,7 +87,7 @@ export function useHoverReferenceInteraction(context, props = {}) {
       store.setOpen(false, createChangeEventDetails(REASONS.triggerHover, event));
       tree?.events.emit('floating.closed', event);
     }
-  }, [delayRef, store, instance, tree]);
+  });
   const cleanupMouseMoveHandler = useStableCallback(() => {
     if (!instance.handler) {
       return;
@@ -90,10 +96,10 @@ export function useHoverReferenceInteraction(context, props = {}) {
     doc.removeEventListener('mousemove', instance.handler);
     instance.handler = undefined;
   });
-  React.useEffect(() => cleanupMouseMoveHandler, [cleanupMouseMoveHandler]);
   const clearPointerEvents = useStableCallback(() => {
     clearSafePolygonPointerEventsMutation(instance);
   });
+  React.useEffect(() => cleanupMouseMoveHandler, [cleanupMouseMoveHandler]);
 
   // When closing before opening, clear the delay timeouts to cancel it
   // from showing.
@@ -103,11 +109,14 @@ export function useHoverReferenceInteraction(context, props = {}) {
     }
     function onOpenChangeLocal(details) {
       if (!details.open) {
+        isHoverCloseActiveRef.current = details.reason === REASONS.triggerHover;
         cleanupMouseMoveHandler();
         instance.openChangeTimeout.clear();
         instance.restTimeout.clear();
         instance.blockMouseMove = true;
         instance.restTimeoutPending = false;
+      } else {
+        isHoverCloseActiveRef.current = false;
       }
     }
     events.on('openchange', onOpenChangeLocal);
@@ -133,20 +142,46 @@ export function useHoverReferenceInteraction(context, props = {}) {
       // Only rest delay is set; there's no fallback delay.
       // This will be handled by `onMouseMove`.
       const restMsValue = getRestMs(restMsRef.current);
-      if (restMsValue > 0 && !getDelay(delayRef.current, 'open')) {
-        return;
-      }
       const openDelay = getDelay(delayRef.current, 'open', instance.pointerType);
-      const triggerNode = event.currentTarget ?? null;
+      const eventTarget = getTarget(event);
+      const currentTarget = event.currentTarget ?? null;
       const currentDomReference = store.select('domReferenceElement');
-      const isOverInactive = triggerNode == null ? false : isOverInactiveTrigger(currentDomReference, triggerNode, event.target);
+      let triggerNode = currentTarget;
+
+      // Wrapper/delegated mode: resolve the actual trigger from the event target.
+      if (isElement(eventTarget) && !store.context.triggerElements.hasElement(eventTarget)) {
+        for (const triggerElement of store.context.triggerElements.elements()) {
+          if (contains(triggerElement, eventTarget)) {
+            triggerNode = triggerElement;
+            break;
+          }
+        }
+      }
+
+      // Wrapper/delegated mode fallback: if the wrapper contains the active trigger,
+      // treat this as re-entering that active trigger.
+      if (isElement(currentTarget) && isElement(currentDomReference) && !store.context.triggerElements.hasElement(currentTarget) && contains(currentTarget, currentDomReference)) {
+        triggerNode = currentDomReference;
+      }
+      const isOverInactive = triggerNode == null ? false : isOverInactiveTrigger(currentDomReference, triggerNode, eventTarget);
       const isOpen = store.select('open');
+      const isInClosingTransition = isClosingRef.current?.() ?? store.select('transitionStatus') === 'ending';
+      const isHoverCloseTransition = !isOpen && isInClosingTransition && isHoverCloseActiveRef.current;
+      const isReenteringSameTriggerDuringCloseTransition = !isOverInactive && isElement(triggerNode) && isElement(currentDomReference) && contains(currentDomReference, triggerNode) && isHoverCloseTransition;
+      const isRestOnlyDelay = restMsValue > 0 && !openDelay;
+      const shouldOpenImmediately = isOverInactive && (isOpen || isHoverCloseTransition) || isReenteringSameTriggerDuringCloseTransition;
       const shouldOpen = !isOpen || isOverInactive;
 
-      // When moving between triggers while already open, open immediately without delay
-      if (isOverInactive && isOpen) {
+      // Open immediately when moving between triggers while open, or during
+      // a hover-driven close transition (including same-trigger re-entry).
+      if (shouldOpenImmediately) {
         store.setOpen(true, createChangeEventDetails(REASONS.triggerHover, event, triggerNode));
-      } else if (openDelay) {
+        return;
+      }
+      if (isRestOnlyDelay) {
+        return;
+      }
+      if (openDelay) {
         instance.openChangeTimeout.start(openDelay, () => {
           if (shouldOpen) {
             store.setOpen(true, createChangeEventDetails(REASONS.triggerHover, event, triggerNode));
@@ -199,20 +234,12 @@ export function useHoverReferenceInteraction(context, props = {}) {
       }
     }
     if (move) {
-      trigger.addEventListener('mousemove', onMouseEnter, {
+      return mergeCleanups(addEventListener(trigger, 'mousemove', onMouseEnter, {
         once: true
-      });
+      }), addEventListener(trigger, 'mouseenter', onMouseEnter), addEventListener(trigger, 'mouseleave', onMouseLeave));
     }
-    trigger.addEventListener('mouseenter', onMouseEnter);
-    trigger.addEventListener('mouseleave', onMouseLeave);
-    return () => {
-      if (move) {
-        trigger.removeEventListener('mousemove', onMouseEnter);
-      }
-      trigger.removeEventListener('mouseenter', onMouseEnter);
-      trigger.removeEventListener('mouseleave', onMouseLeave);
-    };
-  }, [cleanupMouseMoveHandler, clearPointerEvents, dataRef, delayRef, closeWithDelay, store, enabled, handleCloseRef, instance, isActiveTrigger, isOverInactiveTrigger, isClickLikeOpenEvent, isRelatedTargetInsideEnabledTrigger, mouseOnly, move, restMsRef, triggerElementRef, tree, enabledRef, getHandleCloseContext]);
+    return mergeCleanups(addEventListener(trigger, 'mouseenter', onMouseEnter), addEventListener(trigger, 'mouseleave', onMouseLeave));
+  }, [cleanupMouseMoveHandler, clearPointerEvents, dataRef, delayRef, closeWithDelay, store, enabled, handleCloseRef, instance, isActiveTrigger, isOverInactiveTrigger, isClickLikeOpenEvent, isRelatedTargetInsideEnabledTrigger, mouseOnly, move, restMsRef, triggerElementRef, tree, enabledRef, getHandleCloseContext, isClosingRef]);
   return React.useMemo(() => {
     if (!enabled) {
       return undefined;
@@ -234,6 +261,17 @@ export function useHoverReferenceInteraction(context, props = {}) {
         if (mouseOnly && !isMouseLikePointerType(instance.pointerType)) {
           return;
         }
+        if (currentOpen && isOverInactive && instance.handleCloseOptions?.blockPointerEvents) {
+          const floatingElement = store.select('floatingElement');
+          if (floatingElement) {
+            const scopeElement = instance.handleCloseOptions?.getScope?.() ?? trigger.ownerDocument.body;
+            applySafePolygonPointerEventsMutation(instance, {
+              scopeElement,
+              referenceElement: trigger,
+              floatingElement
+            });
+          }
+        }
         const restMsValue = getRestMs(restMsRef.current);
         if (currentOpen && !isOverInactive || restMsValue === 0) {
           return;

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

@@ -1,4 +1,4 @@
-import { isMouseLikePointerType } from "../utils.js";
+import { isMouseLikePointerType } from "../utils/event.js";
 function resolveValue(value, pointerType) {
   if (pointerType != null && !isMouseLikePointerType(pointerType)) {
     return 0;

package/esm/floating-ui-react/hooks/useListNavigation.d.ts

@@ -43,7 +43,7 @@ export interface UseListNavigationProps {
    */
   focusItemOnHover?: boolean | undefined;
   /**
-   * Whether pressing an arrow key on the navigation’s main axis opens the
+   * Whether pressing an arrow key on the navigation's main axis opens the
    * floating element.
    * @default true
    */
@@ -88,7 +88,7 @@ export interface UseListNavigationProps {
    */
   parentOrientation?: UseListNavigationProps['orientation'] | undefined;
   /**
-   * Whether the direction of the floating element’s navigation is in RTL
+   * Whether the direction of the floating element's navigation is in RTL
    * layout.
    * @default false
    */
@@ -99,7 +99,7 @@ export interface UseListNavigationProps {
    * (such as an input), but allow arrow keys to navigate list items.
    * This is common in autocomplete listbox components.
    * Your virtually-focused list items must have a unique `id` set on them.
-   * If you’re using a component role with the `useRole()` Hook, then an `id` is
+   * If you're using a component role with the `useRole()` Hook, then an `id` is
    * generated automatically.
    * @default false
    */
@@ -110,7 +110,7 @@ export interface UseListNavigationProps {
    */
   orientation?: 'vertical' | 'horizontal' | 'both' | undefined;
   /**
-   * Specifies how many columns the list has (i.e., it’s a grid). Use an
+   * Specifies how many columns the list has (i.e., it's a grid). Use an
    * orientation of 'horizontal' (e.g. for an emoji picker/date picker, where
    * pressing ArrowRight or ArrowLeft can change rows), or 'both' (where the
    * current row cannot be escaped with ArrowRight or ArrowLeft, only ArrowUp

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

@@ -6,10 +6,12 @@ import { useValueAsRef } from '@base-ui/utils/useValueAsRef';
 import { useStableCallback } from '@base-ui/utils/useStableCallback';
 import { useIsoLayoutEffect } from '@base-ui/utils/useIsoLayoutEffect';
 import { ownerDocument } from '@base-ui/utils/owner';
-import { activeElement, contains, getTarget, isTypeableCombobox, isVirtualClick, isVirtualPointerEvent, stopEvent, getFloatingFocusElement, isIndexOutOfListBounds, getMinListIndex, getMaxListIndex, getGridNavigatedIndex, isListIndexDisabled, createGridCellMap, getGridCellIndices, getGridCellIndexOfCorner, findNonDisabledListIndex } from "../utils.js";
+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 { useFloatingParentNodeId, useFloatingTree } from "../components/FloatingTree.js";
-import { createChangeEventDetails } from "../../utils/createBaseUIEventDetails.js";
-import { REASONS } from "../../utils/reasons.js";
+import { createChangeEventDetails } from "../../internals/createBaseUIEventDetails.js";
+import { REASONS } from "../../internals/reasons.js";
 import { enqueueFocus } from "../utils/enqueueFocus.js";
 import { ARROW_UP, ARROW_DOWN, ARROW_RIGHT, ARROW_LEFT } from "../utils/constants.js";
 export const ESCAPE = 'Escape';
@@ -112,6 +114,7 @@ export function useListNavigation(context, props) {
   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);
@@ -121,7 +124,7 @@ export function useListNavigation(context, props) {
       if (virtual) {
         tree?.events.emit('virtualfocus', item);
       } else {
-        enqueueFocus(item, {
+        cancelQueuedFocusRef.current = enqueueFocus(item, {
           sync: forceSyncFocusRef.current,
           preventScroll: true
         });
@@ -225,7 +228,7 @@ export function useListNavigation(context, props) {
         };
         waitForListPopulated();
       }
-    } else if (!isIndexOutOfListBounds(listRef, activeIndex)) {
+    } else if (!isIndexOutOfListBounds(listRef.current, activeIndex)) {
       indexRef.current = activeIndex;
       focusItem();
       forceScrollIntoViewRef.current = false;
@@ -260,17 +263,17 @@ export 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 index = listRef.current.indexOf(event.currentTarget);
+    if (index !== -1 && (indexRef.current !== index || activeIndex !== index)) {
+      indexRef.current = index;
+      onNavigate(event);
     }
+  });
+  const item = React.useMemo(() => {
     const itemProps = {
       onFocus(event) {
         forceSyncFocusRef.current = true;
@@ -301,9 +304,8 @@ export function useListNavigation(context, props) {
         if (!resetOnPointerLeaveRef.current) {
           return;
         }
-        enqueueFocus(null, {
-          sync: true
-        });
+        cancelQueuedFocusRef.current?.();
+        cancelQueuedFocusRef.current = null;
         indexRef.current = -1;
         onNavigate(event);
         if (!virtual) {
@@ -318,7 +320,7 @@ export function useListNavigation(context, props) {
       }
     };
     return itemProps;
-  }, [latestOpenRef, floatingFocusElementRef, focusItemOnHover, listRef, onNavigate, resetOnPointerLeaveRef, virtual]);
+  }, [syncCurrentTarget, latestOpenRef, floatingFocusElementRef, focusItemOnHover, listRef, onNavigate, resetOnPointerLeaveRef, virtual]);
   const getParentOrientation = React.useCallback(() => {
     return parentOrientation ?? tree?.nodesRef.current.find(node => node.id === parentId)?.context?.dataRef?.current.orientation;
   }, [parentId, tree, parentOrientation]);
@@ -383,12 +385,10 @@ export function useListNavigation(context, props) {
       // 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, false);
-      const minGridIndex = cellMap.findIndex(index => index != null && !isListIndexDisabled(listRef, index, disabledIndices));
+      const minGridIndex = cellMap.findIndex(index => index != null && !isListIndexDisabled(listRef.current, 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)
-      }, {
+      const maxGridIndex = cellMap.reduce((foundIndex, index, cellIndex) => index != null && !isListIndexDisabled(listRef.current, index, disabledIndices) ? cellIndex : foundIndex, -1);
+      const index = cellMap[getGridNavigatedIndex(cellMap.map(itemIndex => itemIndex != null ? listRef.current[itemIndex] : null), {
         event,
         orientation,
         loopFocus,
@@ -396,7 +396,7 @@ export function useListNavigation(context, props) {
         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),
+        disabledIndices: getGridCellIndices([...((typeof disabledIndices !== 'function' ? disabledIndices : null) || listRef.current.map((_, listIndex) => isListIndexDisabled(listRef.current, listIndex, disabledIndices) ? listIndex : undefined)), undefined], cellMap),
         minIndex: minGridIndex,
         maxIndex: maxGridIndex,
         prevIndex: getGridCellIndexOfCorner(indexRef.current > maxIndex ? minIndex : indexRef.current, sizes, cellMap, cols,
@@ -435,13 +435,13 @@ export 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
           }));
@@ -456,20 +456,20 @@ export 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);

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

@@ -1,8 +1,8 @@
 import * as React from 'react';
 import { useId } from '@base-ui/utils/useId';
-import { getFloatingFocusElement } from "../utils.js";
+import { EMPTY_OBJECT } from '@base-ui/utils/empty';
+import { getFloatingFocusElement } from "../utils/element.js";
 import { useFloatingParentNodeId } from "../components/FloatingTree.js";
-import { EMPTY_OBJECT } from "../../utils/constants.js";
 const componentRoleToAriaRoleMap = new Map([['select', 'listbox'], ['combobox', 'listbox'], ['label', false]]);
 
 /**

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

@@ -4,10 +4,6 @@ import { PopupStoreContext, PopupStoreSelectors, PopupStoreState } from "../../u
 import { FloatingRootStore } from "../components/FloatingRootStore.js";
 export interface UseSyncedFloatingRootContextOptions<State extends PopupStoreState<any>> {
   popupStore: ReactStore<State, PopupStoreContext<any>, PopupStoreSelectors>;
-  /**
-   * Whether to prevent the auto-emitted `openchange` event.
-   */
-  noEmit?: boolean | undefined;
   /**
    * Whether the Popup element is passed to Floating UI as the floating element instead of the default Positioner.
    */

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

@@ -13,7 +13,6 @@ import { FloatingRootStore } from "../components/FloatingRootStore.js";
 export function useSyncedFloatingRootContext(options) {
   const {
     popupStore,
-    noEmit = false,
     treatPopupAsFloatingElement = false,
     onOpenChange
   } = options;
@@ -25,13 +24,14 @@ export function useSyncedFloatingRootContext(options) {
   const triggerElements = popupStore.context.triggerElements;
   const store = useRefWithInit(() => new FloatingRootStore({
     open,
+    transitionStatus: undefined,
     referenceElement,
     floatingElement,
     triggerElements,
     onOpenChange,
     floatingId,
-    nested,
-    noEmit
+    syncOnly: true,
+    nested
   })).current;
   useIsoLayoutEffect(() => {
     const valuesToSync = {
@@ -52,6 +52,5 @@ export function useSyncedFloatingRootContext(options) {
   // TODO: When `setOpen` is a part of the PopupStore API, we don't need to sync it.
   store.context.onOpenChange = onOpenChange;
   store.context.nested = nested;
-  store.context.noEmit = noEmit;
   return store;
 }

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

@@ -18,8 +18,9 @@ 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;
   /**

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

@@ -4,7 +4,9 @@ import * as React from 'react';
 import { useStableCallback } from '@base-ui/utils/useStableCallback';
 import { useIsoLayoutEffect } from '@base-ui/utils/useIsoLayoutEffect';
 import { useTimeout } from '@base-ui/utils/useTimeout';
-import { contains, isElementVisible, stopEvent } from "../utils.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()`.

package/esm/floating-ui-react/safePolygon.js

@@ -241,6 +241,7 @@ export function safePolygon(options = {}) {
 
   // eslint-disable-next-line no-underscore-dangle
   fn.__options = {
+    ...options,
     blockPointerEvents
   };
   return fn;

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

@@ -1,6 +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 { BaseUIChangeEventDetails } from "../internals/createBaseUIEventDetails.js";
 import type { ExtendedUserProps } from "./hooks/useInteractions.js";
 import type { FloatingTreeStore } from "./components/FloatingTreeStore.js";
 import type { FloatingRootStore } from "./components/FloatingRootStore.js";

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

@@ -1,10 +1,10 @@
 import type { Dimensions } from "../types.js";
 type DisabledIndices = ReadonlyArray<number> | ((index: number) => boolean);
 export declare function isDifferentGridRow(index: number, cols: number, prevRow: number): boolean;
-export declare function isIndexOutOfListBounds(listRef: React.RefObject<Array<HTMLElement | null>>, index: number): boolean;
+export declare function isIndexOutOfListBounds(list: Array<HTMLElement | null>, index: number): boolean;
 export declare function getMinListIndex(listRef: React.RefObject<ReadonlyArray<HTMLElement | null>>, disabledIndices?: DisabledIndices | undefined): number;
 export declare function getMaxListIndex(listRef: React.RefObject<Array<HTMLElement | null>>, disabledIndices?: DisabledIndices | undefined): number;
-export declare function findNonDisabledListIndex(listRef: React.RefObject<ReadonlyArray<HTMLElement | null>>, {
+export declare function findNonDisabledListIndex(list: ReadonlyArray<HTMLElement | null>, {
   startingIndex,
   decrement,
   disabledIndices,
@@ -15,10 +15,11 @@ export declare function findNonDisabledListIndex(listRef: React.RefObject<Readon
   disabledIndices?: DisabledIndices | undefined;
   amount?: number | undefined;
 }): number;
-export declare function getGridNavigatedIndex(listRef: React.RefObject<Array<HTMLElement | null>>, {
+export declare function getGridNavigatedIndex(list: Array<HTMLElement | null>, {
   event,
   orientation,
   loopFocus,
+  onLoop,
   rtl,
   cols,
   disabledIndices,
@@ -30,6 +31,7 @@ export declare function getGridNavigatedIndex(listRef: React.RefObject<Array<HTM
   event: React.KeyboardEvent;
   orientation: 'horizontal' | 'vertical' | 'both';
   loopFocus: boolean;
+  onLoop?: ((event: React.KeyboardEvent, prevIndex: number, nextIndex: number) => number) | undefined;
   rtl: boolean;
   cols: number;
   disabledIndices: DisabledIndices | undefined;
@@ -44,6 +46,7 @@ export declare function createGridCellMap(sizes: Dimensions[], cols: number, den
 export declare function getGridCellIndexOfCorner(index: number, sizes: Dimensions[], cellMap: (number | undefined)[], cols: number, corner: 'tl' | 'tr' | 'bl' | 'br'): number;
 /** 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(listRef: React.RefObject<ReadonlyArray<HTMLElement | null>>, index: number, disabledIndices?: DisabledIndices): boolean;
-export declare function isElementVisible(element: Element): boolean;
+export declare function isListIndexDisabled(list: ReadonlyArray<HTMLElement | null>, index: number, disabledIndices?: DisabledIndices): boolean;
+export declare function isHiddenByStyles(styles: CSSStyleDeclaration): boolean;
+export declare function isElementVisible(element: Element | null, styles?: CSSStyleDeclaration | null): boolean;
 export {};