@base-ui/react 1.3.0 → 1.4.0

package/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/floating-ui-react/hooks/useListNavigation.js

@@ -9,11 +9,14 @@ 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 _useIsoLayoutEffect = require("@base-ui/utils/useIsoLayoutEffect");
 var _owner = require("@base-ui/utils/owner");
-var _utils = require("../utils");
+var _element = require("../utils/element");
+var _event = require("../utils/event");
+var _composite = require("../utils/composite");
 var _FloatingTree = require("../components/FloatingTree");
 var _createBaseUIEventDetails = require("../../utils/createBaseUIEventDetails");
 var _reasons = require("../../utils/reasons");
@@ -99,14 +102,14 @@ function useListNavigation(context, props) {
       console.warn('In grid list navigation mode (`cols` > 1), the `orientation` should', 'be either "horizontal" or "both".');
     }
   }
-  const floatingFocusElement = (0, _utils.getFloatingFocusElement)(floatingElement);
+  const floatingFocusElement = (0, _element.getFloatingFocusElement)(floatingElement);
   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, _utils.isTypeableCombobox)(domReferenceElement);
+  const typeableComboboxReference = (0, _element.isTypeableCombobox)(domReferenceElement);
   const focusItemOnOpenRef = React.useRef(focusItemOnOpen);
   const indexRef = React.useRef(selectedIndex ?? -1);
   const keyRef = React.useRef(null);
@@ -119,6 +122,7 @@ 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 = (0, _useValueAsRef.useValueAsRef)(disabledIndices);
   const latestOpenRef = (0, _useValueAsRef.useValueAsRef)(open);
   const selectedIndexRef = (0, _useValueAsRef.useValueAsRef)(selectedIndex);
@@ -128,7 +132,7 @@ function useListNavigation(context, props) {
       if (virtual) {
         tree?.events.emit('virtualfocus', item);
       } else {
-        (0, _enqueueFocus.enqueueFocus)(item, {
+        cancelQueuedFocusRef.current = (0, _enqueueFocus.enqueueFocus)(item, {
           sync: forceSyncFocusRef.current,
           preventScroll: true
         });
@@ -225,14 +229,14 @@ function useListNavigation(context, props) {
             runs += 1;
           } else {
             // initially focus the first non-disabled item
-            indexRef.current = keyRef.current == null || isMainOrientationToEndKey(keyRef.current, orientation, rtl) || nested ? (0, _utils.getMinListIndex)(listRef) : (0, _utils.getMaxListIndex)(listRef);
+            indexRef.current = keyRef.current == null || isMainOrientationToEndKey(keyRef.current, orientation, rtl) || nested ? (0, _composite.getMinListIndex)(listRef) : (0, _composite.getMaxListIndex)(listRef);
             keyRef.current = null;
             onNavigate();
           }
         };
         waitForListPopulated();
       }
-    } else if (!(0, _utils.isIndexOutOfListBounds)(listRef, activeIndex)) {
+    } else if (!(0, _composite.isIndexOutOfListBounds)(listRef.current, activeIndex)) {
       indexRef.current = activeIndex;
       focusItem();
       forceScrollIntoViewRef.current = false;
@@ -247,8 +251,8 @@ function useListNavigation(context, props) {
     }
     const nodes = tree.nodesRef.current;
     const parent = nodes.find(node => node.id === parentId)?.context?.elements.floating;
-    const activeEl = (0, _utils.activeElement)((0, _owner.ownerDocument)(floatingElement));
-    const treeContainsActiveEl = nodes.some(node => node.context && (0, _utils.contains)(node.context.elements.floating, activeEl));
+    const activeEl = (0, _element.activeElement)((0, _owner.ownerDocument)(floatingElement));
+    const treeContainsActiveEl = nodes.some(node => node.context && (0, _element.contains)(node.context.elements.floating, activeEl));
     if (parent && !treeContainsActiveEl && isPointerModalityRef.current) {
       parent.focus({
         preventScroll: true
@@ -267,17 +271,17 @@ 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 = (0, _useStableCallback.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;
@@ -302,21 +306,23 @@ function useListNavigation(context, props) {
         }
         forceSyncFocusRef.current = true;
         const relatedTarget = event.relatedTarget;
+        if ((0, _isMouseWithinBounds.isMouseWithinBounds)(event)) {
+          return;
+        }
         if (!focusItemOnHover || listRef.current.includes(relatedTarget)) {
           return;
         }
         if (!resetOnPointerLeaveRef.current) {
           return;
         }
-        (0, _enqueueFocus.enqueueFocus)(null, {
-          sync: true
-        });
+        cancelQueuedFocusRef.current?.();
+        cancelQueuedFocusRef.current = null;
         indexRef.current = -1;
         onNavigate(event);
         if (!virtual) {
           const floatingFocusEl = floatingFocusElementRef.current;
-          const activeEl = (0, _utils.activeElement)((0, _owner.ownerDocument)(floatingFocusEl));
-          if (floatingFocusEl && (0, _utils.contains)(floatingFocusEl, activeEl)) {
+          const activeEl = (0, _element.activeElement)((0, _owner.ownerDocument)(floatingFocusEl));
+          if (floatingFocusEl && (0, _element.contains)(floatingFocusEl, activeEl)) {
             floatingFocusEl.focus({
               preventScroll: true
             });
@@ -325,7 +331,7 @@ 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]);
@@ -351,7 +357,7 @@ function useListNavigation(context, props) {
       // 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())) {
-        (0, _utils.stopEvent)(event);
+        (0, _event.stopEvent)(event);
       }
       store.setOpen(false, (0, _createBaseUIEventDetails.createChangeEventDetails)(_reasons.REASONS.listNavigation, event.nativeEvent));
       if ((0, _dom.isHTMLElement)(domReferenceElement)) {
@@ -364,16 +370,16 @@ function useListNavigation(context, props) {
       return;
     }
     const currentIndex = indexRef.current;
-    const minIndex = (0, _utils.getMinListIndex)(listRef, disabledIndices);
-    const maxIndex = (0, _utils.getMaxListIndex)(listRef, disabledIndices);
+    const minIndex = (0, _composite.getMinListIndex)(listRef, disabledIndices);
+    const maxIndex = (0, _composite.getMaxListIndex)(listRef, disabledIndices);
     if (!typeableComboboxReference) {
       if (event.key === 'Home') {
-        (0, _utils.stopEvent)(event);
+        (0, _event.stopEvent)(event);
         indexRef.current = minIndex;
         onNavigate(event);
       }
       if (event.key === 'End') {
-        (0, _utils.stopEvent)(event);
+        (0, _event.stopEvent)(event);
         indexRef.current = maxIndex;
         onNavigate(event);
       }
@@ -389,13 +395,11 @@ 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 = (0, _utils.createGridCellMap)(sizes, cols, false);
-      const minGridIndex = cellMap.findIndex(index => index != null && !(0, _utils.isListIndexDisabled)(listRef, index, disabledIndices));
+      const cellMap = (0, _composite.createGridCellMap)(sizes, cols, false);
+      const minGridIndex = cellMap.findIndex(index => index != null && !(0, _composite.isListIndexDisabled)(listRef.current, index, disabledIndices));
       // last enabled index
-      const maxGridIndex = cellMap.reduce((foundIndex, index, cellIndex) => index != null && !(0, _utils.isListIndexDisabled)(listRef, index, disabledIndices) ? cellIndex : foundIndex, -1);
-      const index = cellMap[(0, _utils.getGridNavigatedIndex)({
-        current: cellMap.map(itemIndex => itemIndex != null ? listRef.current[itemIndex] : null)
-      }, {
+      const maxGridIndex = cellMap.reduce((foundIndex, index, cellIndex) => index != null && !(0, _composite.isListIndexDisabled)(listRef.current, index, disabledIndices) ? cellIndex : foundIndex, -1);
+      const index = cellMap[(0, _composite.getGridNavigatedIndex)(cellMap.map(itemIndex => itemIndex != null ? listRef.current[itemIndex] : null), {
         event,
         orientation,
         loopFocus,
@@ -403,10 +407,10 @@ function useListNavigation(context, props) {
         cols,
         // treat undefined (empty grid spaces) as disabled indices so we
         // don't end up in them
-        disabledIndices: (0, _utils.getGridCellIndices)([...((typeof disabledIndices !== 'function' ? disabledIndices : null) || listRef.current.map((_, listIndex) => (0, _utils.isListIndexDisabled)(listRef, listIndex, disabledIndices) ? listIndex : undefined)), undefined], cellMap),
+        disabledIndices: (0, _composite.getGridCellIndices)([...((typeof disabledIndices !== 'function' ? disabledIndices : null) || listRef.current.map((_, listIndex) => (0, _composite.isListIndexDisabled)(listRef.current, listIndex, disabledIndices) ? listIndex : undefined)), undefined], cellMap),
         minIndex: minGridIndex,
         maxIndex: maxGridIndex,
-        prevIndex: (0, _utils.getGridCellIndexOfCorner)(indexRef.current > maxIndex ? minIndex : indexRef.current, sizes, cellMap, cols,
+        prevIndex: (0, _composite.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.
@@ -423,10 +427,10 @@ function useListNavigation(context, props) {
       }
     }
     if (isMainOrientationKey(event.key, orientation)) {
-      (0, _utils.stopEvent)(event);
+      (0, _event.stopEvent)(event);
 
       // Reset the index if no item is focused.
-      if (open && !virtual && (0, _utils.activeElement)(event.currentTarget.ownerDocument) === event.currentTarget) {
+      if (open && !virtual && (0, _element.activeElement)(event.currentTarget.ownerDocument) === event.currentTarget) {
         indexRef.current = isMainOrientationToEndKey(event.key, orientation, rtl) ? minIndex : maxIndex;
         onNavigate(event);
         return;
@@ -442,13 +446,13 @@ function useListNavigation(context, props) {
               indexRef.current = minIndex;
             }
           } else {
-            indexRef.current = (0, _utils.findNonDisabledListIndex)(listRef, {
+            indexRef.current = (0, _composite.findNonDisabledListIndex)(listRef.current, {
               startingIndex: currentIndex,
               disabledIndices
             });
           }
         } else {
-          indexRef.current = Math.min(maxIndex, (0, _utils.findNonDisabledListIndex)(listRef, {
+          indexRef.current = Math.min(maxIndex, (0, _composite.findNonDisabledListIndex)(listRef.current, {
             startingIndex: currentIndex,
             disabledIndices
           }));
@@ -463,20 +467,20 @@ function useListNavigation(context, props) {
             indexRef.current = maxIndex;
           }
         } else {
-          indexRef.current = (0, _utils.findNonDisabledListIndex)(listRef, {
+          indexRef.current = (0, _composite.findNonDisabledListIndex)(listRef.current, {
             startingIndex: currentIndex,
             decrement: true,
             disabledIndices
           });
         }
       } else {
-        indexRef.current = Math.max(minIndex, (0, _utils.findNonDisabledListIndex)(listRef, {
+        indexRef.current = Math.max(minIndex, (0, _composite.findNonDisabledListIndex)(listRef.current, {
           startingIndex: currentIndex,
           decrement: true,
           disabledIndices
         }));
       }
-      if ((0, _utils.isIndexOutOfListBounds)(listRef, indexRef.current)) {
+      if ((0, _composite.isIndexOutOfListBounds)(listRef.current, indexRef.current)) {
         indexRef.current = -1;
       }
       onNavigate(event);
@@ -497,11 +501,11 @@ function useListNavigation(context, props) {
           // If the event originated from within a nested element (e.g., a Dialog opened from
           // within the menu), don't close the menu. The nested element has its own focus
           // management and should handle the Tab key.
-          const target = (0, _utils.getTarget)(event.nativeEvent);
-          if (target && !(0, _utils.contains)(floatingFocusElementRef.current, target)) {
+          const target = (0, _element.getTarget)(event.nativeEvent);
+          if (target && !(0, _element.contains)(floatingFocusElementRef.current, target)) {
             return;
           }
-          (0, _utils.stopEvent)(event);
+          (0, _event.stopEvent)(event);
           store.setOpen(false, (0, _createBaseUIEventDetails.createChangeEventDetails)(_reasons.REASONS.focusOut, event.nativeEvent));
           if ((0, _dom.isHTMLElement)(domReferenceElement)) {
             domReferenceElement.focus();
@@ -517,14 +521,14 @@ function useListNavigation(context, props) {
   }, [ariaActiveDescendantProp, commonOnKeyDown, floatingFocusElementRef, orientation, typeableComboboxReference, store, open, virtual, domReferenceElement]);
   const trigger = React.useMemo(() => {
     function checkVirtualMouse(event) {
-      if (focusItemOnOpen === 'auto' && (0, _utils.isVirtualClick)(event.nativeEvent)) {
+      if (focusItemOnOpen === 'auto' && (0, _event.isVirtualClick)(event.nativeEvent)) {
         focusItemOnOpenRef.current = !virtual;
       }
     }
     function checkVirtualPointer(event) {
       // `pointerdown` fires first, reset the state then perform the checks.
       focusItemOnOpenRef.current = focusItemOnOpen;
-      if (focusItemOnOpen === 'auto' && (0, _utils.isVirtualPointerEvent)(event.nativeEvent)) {
+      if (focusItemOnOpen === 'auto' && (0, _event.isVirtualPointerEvent)(event.nativeEvent)) {
         focusItemOnOpenRef.current = true;
       }
     }
@@ -552,9 +556,9 @@ function useListNavigation(context, props) {
         }
         if (nested) {
           if (isParentCrossOpenKey) {
-            (0, _utils.stopEvent)(event);
+            (0, _event.stopEvent)(event);
             if (currentOpen) {
-              indexRef.current = (0, _utils.getMinListIndex)(listRef, disabledIndicesRef.current);
+              indexRef.current = (0, _composite.getMinListIndex)(listRef, disabledIndicesRef.current);
               onNavigate(event);
             } else {
               store.setOpen(true, (0, _createBaseUIEventDetails.createChangeEventDetails)(_reasons.REASONS.listNavigation, event.nativeEvent, event.currentTarget));
@@ -566,7 +570,7 @@ function useListNavigation(context, props) {
           if (selectedIndexRef.current != null) {
             indexRef.current = selectedIndexRef.current;
           }
-          (0, _utils.stopEvent)(event);
+          (0, _event.stopEvent)(event);
           if (!currentOpen && openOnArrowKeyDown) {
             store.setOpen(true, (0, _createBaseUIEventDetails.createChangeEventDetails)(_reasons.REASONS.listNavigation, event.nativeEvent, event.currentTarget));
           } else {

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

@@ -7,7 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.useRole = useRole;
 var React = _interopRequireWildcard(require("react"));
 var _useId = require("@base-ui/utils/useId");
-var _utils = require("../utils");
+var _element = require("../utils/element");
 var _FloatingTree = require("../components/FloatingTree");
 var _constants = require("../../utils/constants");
 const componentRoleToAriaRoleMap = new Map([['select', 'listbox'], ['combobox', 'listbox'], ['label', false]]);
@@ -28,7 +28,7 @@ function useRole(context, props = {}) {
   } = props;
   const defaultReferenceId = (0, _useId.useId)();
   const referenceId = domReference?.id || defaultReferenceId;
-  const floatingId = React.useMemo(() => (0, _utils.getFloatingFocusElement)(floatingElement)?.id || defaultFloatingId, [floatingElement, defaultFloatingId]);
+  const floatingId = React.useMemo(() => (0, _element.getFloatingFocusElement)(floatingElement)?.id || defaultFloatingId, [floatingElement, defaultFloatingId]);
   const ariaRole = componentRoleToAriaRoleMap.get(role) ?? role;
   const parentId = (0, _FloatingTree.useFloatingParentNodeId)();
   const isNested = parentId != null;

package/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/floating-ui-react/hooks/useSyncedFloatingRootContext.js

@@ -18,7 +18,6 @@ var _FloatingRootStore = require("../components/FloatingRootStore");
 function useSyncedFloatingRootContext(options) {
   const {
     popupStore,
-    noEmit = false,
     treatPopupAsFloatingElement = false,
     onOpenChange
   } = options;
@@ -30,13 +29,14 @@ function useSyncedFloatingRootContext(options) {
   const triggerElements = popupStore.context.triggerElements;
   const store = (0, _useRefWithInit.useRefWithInit)(() => new _FloatingRootStore.FloatingRootStore({
     open,
+    transitionStatus: undefined,
     referenceElement,
     floatingElement,
     triggerElements,
     onOpenChange,
     floatingId,
-    nested,
-    noEmit
+    syncOnly: true,
+    nested
   })).current;
   (0, _useIsoLayoutEffect.useIsoLayoutEffect)(() => {
     const valuesToSync = {
@@ -57,6 +57,5 @@ 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/floating-ui-react/hooks/useTypeahead.js

@@ -10,7 +10,9 @@ var React = _interopRequireWildcard(require("react"));
 var _useStableCallback = require("@base-ui/utils/useStableCallback");
 var _useIsoLayoutEffect = require("@base-ui/utils/useIsoLayoutEffect");
 var _useTimeout = require("@base-ui/utils/useTimeout");
-var _utils = require("../utils");
+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()`.
@@ -64,7 +66,7 @@ function useTypeahead(context, props) {
   const onKeyDown = (0, _useStableCallback.useStableCallback)(event => {
     function isVisible(index) {
       const element = elementsRef?.current[index];
-      return !element || (0, _utils.isElementVisible)(element);
+      return !element || (0, _composite.isElementVisible)(element);
     }
     function getMatchingIndex(list, string, startIndex = 0) {
       if (list.length === 0) {
@@ -85,7 +87,7 @@ function useTypeahead(context, props) {
     const listContent = listRef.current;
     if (stringRef.current.length > 0 && event.key === ' ') {
       // Space should continue the in-progress typeahead session.
-      (0, _utils.stopEvent)(event);
+      (0, _event.stopEvent)(event);
       setTypingChange(true);
     }
     if (stringRef.current.length > 0 && stringRef.current[0] !== ' ') {
@@ -101,7 +103,7 @@ function useTypeahead(context, props) {
       return;
     }
     if (open && event.key !== ' ') {
-      (0, _utils.stopEvent)(event);
+      (0, _event.stopEvent)(event);
       setTypingChange(true);
     }
 
@@ -146,8 +148,8 @@ function useTypeahead(context, props) {
     const next = event.relatedTarget;
     const currentDomReferenceElement = store.select('domReferenceElement');
     const currentFloatingElement = store.select('floatingElement');
-    const withinReference = (0, _utils.contains)(currentDomReferenceElement, next);
-    const withinFloating = (0, _utils.contains)(currentFloatingElement, next);
+    const withinReference = (0, _element.contains)(currentDomReferenceElement, next);
+    const withinFloating = (0, _element.contains)(currentFloatingElement, next);
 
     // Keep the session if focus moves within the composite (reference <-> floating).
     if (withinReference || withinFloating) {

package/floating-ui-react/safePolygon.js

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

package/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,6 @@ 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 isListIndexDisabled(list: ReadonlyArray<HTMLElement | null>, index: number, disabledIndices?: DisabledIndices): boolean;
 export declare function isElementVisible(element: Element): boolean;
 export {};