@base-ui/react 1.1.0 → 1.2.0

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

@@ -1,13 +1,15 @@
 "use strict";
+'use client';
 
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+exports.HoverInteraction = void 0;
 exports.isInteractiveElement = isInteractiveElement;
 exports.safePolygonIdentifier = void 0;
 exports.useHoverInteractionSharedState = useHoverInteractionSharedState;
-var React = _interopRequireWildcard(require("react"));
+var _useOnMount = require("@base-ui/utils/useOnMount");
+var _useRefWithInit = require("@base-ui/utils/useRefWithInit");
 var _useTimeout = require("@base-ui/utils/useTimeout");
 var _createAttribute = require("../utils/createAttribute");
 var _constants = require("../utils/constants");
@@ -16,33 +18,37 @@ const interactiveSelector = `button,a,[role="button"],select,[tabindex]:not([tab
 function isInteractiveElement(element) {
   return element ? Boolean(element.closest(interactiveSelector)) : false;
 }
+class HoverInteraction {
+  constructor() {
+    this.pointerType = undefined;
+    this.interactedInside = false;
+    this.handler = undefined;
+    this.blockMouseMove = true;
+    this.performedPointerEventsMutation = false;
+    this.unbindMouseMove = () => {};
+    this.restTimeoutPending = false;
+    this.openChangeTimeout = new _useTimeout.Timeout();
+    this.restTimeout = new _useTimeout.Timeout();
+    this.handleCloseOptions = undefined;
+  }
+  static create() {
+    return new HoverInteraction();
+  }
+  dispose = () => {
+    this.openChangeTimeout.clear();
+    this.restTimeout.clear();
+  };
+  disposeEffect = () => {
+    return this.dispose;
+  };
+}
+exports.HoverInteraction = HoverInteraction;
 function useHoverInteractionSharedState(store) {
-  const pointerTypeRef = React.useRef(undefined);
-  const interactedInsideRef = React.useRef(false);
-  const handlerRef = React.useRef(undefined);
-  const blockMouseMoveRef = React.useRef(true);
-  const performedPointerEventsMutationRef = React.useRef(false);
-  const unbindMouseMoveRef = React.useRef(() => {});
-  const restTimeoutPendingRef = React.useRef(false);
-  const openChangeTimeout = (0, _useTimeout.useTimeout)();
-  const restTimeout = (0, _useTimeout.useTimeout)();
-  const handleCloseOptionsRef = React.useRef(undefined);
-  return React.useMemo(() => {
-    const data = store.context.dataRef.current;
-    if (!data.hoverInteractionState) {
-      data.hoverInteractionState = {
-        pointerTypeRef,
-        interactedInsideRef,
-        handlerRef,
-        blockMouseMoveRef,
-        performedPointerEventsMutationRef,
-        unbindMouseMoveRef,
-        restTimeoutPendingRef,
-        openChangeTimeout,
-        restTimeout,
-        handleCloseOptionsRef
-      };
-    }
-    return data.hoverInteractionState;
-  }, [store, pointerTypeRef, interactedInsideRef, handlerRef, blockMouseMoveRef, performedPointerEventsMutationRef, unbindMouseMoveRef, restTimeoutPendingRef, openChangeTimeout, restTimeout, handleCloseOptionsRef]);
+  const instance = (0, _useRefWithInit.useRefWithInit)(HoverInteraction.create).current;
+  const data = store.context.dataRef.current;
+  if (!data.hoverInteractionState) {
+    data.hoverInteractionState = instance;
+  }
+  (0, _useOnMount.useOnMount)(data.hoverInteractionState.disposeEffect);
+  return data.hoverInteractionState;
 }

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

@@ -1,16 +1,20 @@
 import * as React from 'react';
 import type { FloatingContext, FloatingRootContext } from "../types.js";
 import type { UseHoverProps } from "./useHover.js";
+import type { FloatingTreeStore } from "../components/FloatingTreeStore.js";
 import { HTMLProps } from "../../utils/types.js";
-export interface UseHoverReferenceInteractionProps extends Omit<UseHoverProps, 'triggerElement'> {
+export interface UseHoverReferenceInteractionProps extends UseHoverProps {
+  enabled?: boolean | undefined;
+  mouseOnly?: boolean | undefined;
+  externalTree?: FloatingTreeStore | undefined;
   /**
    * Whether the hook controls the active trigger. When false, the props are
    * returned under the `trigger` key so they can be applied to inactive
    * triggers via `getTriggerProps`.
    * @default true
    */
-  isActiveTrigger?: boolean;
-  triggerElementRef?: Readonly<React.RefObject<Element | null>>;
+  isActiveTrigger?: boolean | undefined;
+  triggerElementRef?: Readonly<React.RefObject<Element | null>> | undefined;
 }
 /**
  * Provides hover interactions that should be attached to reference or trigger

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

@@ -1,4 +1,5 @@
 "use strict";
+'use client';
 
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 Object.defineProperty(exports, "__esModule", {
@@ -10,6 +11,7 @@ var ReactDOM = _interopRequireWildcard(require("react-dom"));
 var _dom = require("@floating-ui/utils/dom");
 var _useValueAsRef = require("@base-ui/utils/useValueAsRef");
 var _useStableCallback = require("@base-ui/utils/useStableCallback");
+var _owner = require("@base-ui/utils/owner");
 var _utils = require("../utils");
 var _createBaseUIEventDetails = require("../../utils/createBaseUIEventDetails");
 var _reasons = require("../../utils/reasons");
@@ -48,50 +50,43 @@ function useHoverReferenceInteraction(context, props = {}) {
     isActiveTrigger = true
   } = props;
   const tree = (0, _FloatingTree.useFloatingTree)(externalTree);
-  const {
-    pointerTypeRef,
-    interactedInsideRef,
-    handlerRef: closeHandlerRef,
-    blockMouseMoveRef,
-    performedPointerEventsMutationRef,
-    unbindMouseMoveRef,
-    restTimeoutPendingRef,
-    openChangeTimeout,
-    restTimeout,
-    handleCloseOptionsRef
-  } = (0, _useHoverInteractionSharedState.useHoverInteractionSharedState)(store);
+  const instance = (0, _useHoverInteractionSharedState.useHoverInteractionSharedState)(store);
   const handleCloseRef = (0, _useValueAsRef.useValueAsRef)(handleClose);
   const delayRef = (0, _useValueAsRef.useValueAsRef)(delay);
   const restMsRef = (0, _useValueAsRef.useValueAsRef)(restMs);
+  const enabledRef = (0, _useValueAsRef.useValueAsRef)(enabled);
   if (isActiveTrigger) {
     // eslint-disable-next-line no-underscore-dangle
-    handleCloseOptionsRef.current = handleCloseRef.current?.__options;
+    instance.handleCloseOptions = handleCloseRef.current?.__options;
   }
   const isClickLikeOpenEvent = (0, _useStableCallback.useStableCallback)(() => {
-    if (interactedInsideRef.current) {
+    if (instance.interactedInside) {
       return true;
     }
     return dataRef.current.openEvent ? ['click', 'mousedown'].includes(dataRef.current.openEvent.type) : false;
   });
+  const isRelatedTargetInsideEnabledTrigger = (0, _useStableCallback.useStableCallback)(target => {
+    return (0, _utils.isTargetInsideEnabledTrigger)(target, store.context.triggerElements);
+  });
   const closeWithDelay = React.useCallback((event, runElseBranch = true) => {
-    const closeDelay = (0, _useHover.getDelay)(delayRef.current, 'close', pointerTypeRef.current);
-    if (closeDelay && !closeHandlerRef.current) {
-      openChangeTimeout.start(closeDelay, () => store.setOpen(false, (0, _createBaseUIEventDetails.createChangeEventDetails)(_reasons.REASONS.triggerHover, event)));
+    const closeDelay = (0, _useHover.getDelay)(delayRef.current, 'close', instance.pointerType);
+    if (closeDelay && !instance.handler) {
+      instance.openChangeTimeout.start(closeDelay, () => store.setOpen(false, (0, _createBaseUIEventDetails.createChangeEventDetails)(_reasons.REASONS.triggerHover, event)));
     } else if (runElseBranch) {
-      openChangeTimeout.clear();
+      instance.openChangeTimeout.clear();
       store.setOpen(false, (0, _createBaseUIEventDetails.createChangeEventDetails)(_reasons.REASONS.triggerHover, event));
     }
-  }, [delayRef, closeHandlerRef, store, pointerTypeRef, openChangeTimeout]);
+  }, [delayRef, store, instance]);
   const cleanupMouseMoveHandler = (0, _useStableCallback.useStableCallback)(() => {
-    unbindMouseMoveRef.current();
-    closeHandlerRef.current = undefined;
+    instance.unbindMouseMove();
+    instance.handler = undefined;
   });
   const clearPointerEvents = (0, _useStableCallback.useStableCallback)(() => {
-    if (performedPointerEventsMutationRef.current) {
-      const body = (0, _utils.getDocument)(store.select('domReferenceElement')).body;
+    if (instance.performedPointerEventsMutation) {
+      const body = (0, _owner.ownerDocument)(store.select('domReferenceElement')).body;
       body.style.pointerEvents = '';
       body.removeAttribute(_useHoverInteractionSharedState.safePolygonIdentifier);
-      performedPointerEventsMutationRef.current = false;
+      instance.performedPointerEventsMutation = false;
     }
   });
 
@@ -103,17 +98,17 @@ function useHoverReferenceInteraction(context, props = {}) {
     }
     function onOpenChangeLocal(details) {
       if (!details.open) {
-        openChangeTimeout.clear();
-        restTimeout.clear();
-        blockMouseMoveRef.current = true;
-        restTimeoutPendingRef.current = false;
+        instance.openChangeTimeout.clear();
+        instance.restTimeout.clear();
+        instance.blockMouseMove = true;
+        instance.restTimeoutPending = false;
       }
     }
     events.on('openchange', onOpenChangeLocal);
     return () => {
       events.off('openchange', onOpenChangeLocal);
     };
-  }, [enabled, events, openChangeTimeout, restTimeout, blockMouseMoveRef, restTimeoutPendingRef]);
+  }, [enabled, events, instance]);
   const handleScrollMouseLeave = (0, _useStableCallback.useStableCallback)(event => {
     if (isClickLikeOpenEvent()) {
       return;
@@ -121,8 +116,7 @@ function useHoverReferenceInteraction(context, props = {}) {
     if (!dataRef.current.floatingContext) {
       return;
     }
-    const triggerElements = store.context.triggerElements;
-    if (event.relatedTarget && triggerElements.hasElement(event.relatedTarget)) {
+    if (isRelatedTargetInsideEnabledTrigger(event.relatedTarget)) {
       return;
     }
     const currentTrigger = triggerElementRef.current;
@@ -149,9 +143,9 @@ function useHoverReferenceInteraction(context, props = {}) {
       return undefined;
     }
     function onMouseEnter(event) {
-      openChangeTimeout.clear();
-      blockMouseMoveRef.current = false;
-      if (mouseOnly && !(0, _utils.isMouseLikePointerType)(pointerTypeRef.current)) {
+      instance.openChangeTimeout.clear();
+      instance.blockMouseMove = false;
+      if (mouseOnly && !(0, _utils.isMouseLikePointerType)(instance.pointerType)) {
         return;
       }
 
@@ -160,7 +154,7 @@ function useHoverReferenceInteraction(context, props = {}) {
       if (getRestMs(restMsRef.current) > 0 && !(0, _useHover.getDelay)(delayRef.current, 'open')) {
         return;
       }
-      const openDelay = (0, _useHover.getDelay)(delayRef.current, 'open', pointerTypeRef.current);
+      const openDelay = (0, _useHover.getDelay)(delayRef.current, 'open', instance.pointerType);
       const currentDomReference = store.select('domReferenceElement');
       const allTriggers = store.context.triggerElements;
       const isOverInactiveTrigger = (allTriggers.hasElement(event.target) || allTriggers.hasMatchingElement(t => (0, _utils.contains)(t, event.target))) && (!currentDomReference || !(0, _utils.contains)(currentDomReference, event.target));
@@ -172,7 +166,7 @@ function useHoverReferenceInteraction(context, props = {}) {
       if (isOverInactiveTrigger && isOpen) {
         store.setOpen(true, (0, _createBaseUIEventDetails.createChangeEventDetails)(_reasons.REASONS.triggerHover, event, triggerNode));
       } else if (openDelay) {
-        openChangeTimeout.start(openDelay, () => {
+        instance.openChangeTimeout.start(openDelay, () => {
           if (shouldOpen) {
             store.setOpen(true, (0, _createBaseUIEventDetails.createChangeEventDetails)(_reasons.REASONS.triggerHover, event, triggerNode));
           }
@@ -186,21 +180,20 @@ function useHoverReferenceInteraction(context, props = {}) {
         clearPointerEvents();
         return;
       }
-      unbindMouseMoveRef.current();
+      instance.unbindMouseMove();
       const domReferenceElement = store.select('domReferenceElement');
-      const doc = (0, _utils.getDocument)(domReferenceElement);
-      restTimeout.clear();
-      restTimeoutPendingRef.current = false;
-      const triggerElements = store.context.triggerElements;
-      if (event.relatedTarget && triggerElements.hasElement(event.relatedTarget)) {
+      const doc = (0, _owner.ownerDocument)(domReferenceElement);
+      instance.restTimeout.clear();
+      instance.restTimeoutPending = false;
+      if (isRelatedTargetInsideEnabledTrigger(event.relatedTarget)) {
         return;
       }
       if (handleCloseRef.current && dataRef.current.floatingContext) {
         if (!store.select('open')) {
-          openChangeTimeout.clear();
+          instance.openChangeTimeout.clear();
         }
         const currentTrigger = triggerElementRef.current;
-        closeHandlerRef.current = handleCloseRef.current({
+        instance.handler = handleCloseRef.current({
           ...dataRef.current.floatingContext,
           tree,
           x: event.clientX,
@@ -208,20 +201,20 @@ function useHoverReferenceInteraction(context, props = {}) {
           onClose() {
             clearPointerEvents();
             cleanupMouseMoveHandler();
-            if (!isClickLikeOpenEvent() && currentTrigger === store.select('domReferenceElement')) {
+            if (enabledRef.current && !isClickLikeOpenEvent() && currentTrigger === store.select('domReferenceElement')) {
               closeWithDelay(event, true);
             }
           }
         });
-        const handler = closeHandlerRef.current;
+        const handler = instance.handler;
         handler(event);
         doc.addEventListener('mousemove', handler);
-        unbindMouseMoveRef.current = () => {
+        instance.unbindMouseMove = () => {
           doc.removeEventListener('mousemove', handler);
         };
         return;
       }
-      const shouldClose = pointerTypeRef.current === 'touch' ? !(0, _utils.contains)(store.select('floatingElement'), event.relatedTarget) : true;
+      const shouldClose = instance.pointerType === 'touch' ? !(0, _utils.contains)(store.select('floatingElement'), event.relatedTarget) : true;
       if (shouldClose) {
         closeWithDelay(event);
       }
@@ -247,10 +240,13 @@ function useHoverReferenceInteraction(context, props = {}) {
       trigger.removeEventListener('mouseenter', onMouseEnter);
       trigger.removeEventListener('mouseleave', onMouseLeave);
     };
-  }, [cleanupMouseMoveHandler, clearPointerEvents, blockMouseMoveRef, dataRef, delayRef, closeWithDelay, store, enabled, handleCloseRef, handleScrollMouseLeave, isActiveTrigger, isClickLikeOpenEvent, mouseOnly, move, pointerTypeRef, restMsRef, restTimeout, restTimeoutPendingRef, openChangeTimeout, triggerElementRef, tree, unbindMouseMoveRef, closeHandlerRef]);
+  }, [cleanupMouseMoveHandler, clearPointerEvents, dataRef, delayRef, closeWithDelay, store, enabled, handleCloseRef, handleScrollMouseLeave, instance, isActiveTrigger, isClickLikeOpenEvent, isRelatedTargetInsideEnabledTrigger, mouseOnly, move, restMsRef, triggerElementRef, tree, enabledRef]);
   return React.useMemo(() => {
+    if (!enabled) {
+      return undefined;
+    }
     function setPointerRef(event) {
-      pointerTypeRef.current = event.pointerType;
+      instance.pointerType = event.pointerType;
     }
     return {
       onPointerDown: setPointerRef,
@@ -264,18 +260,18 @@ function useHoverReferenceInteraction(context, props = {}) {
         const allTriggers = store.context.triggerElements;
         const currentOpen = store.select('open');
         const isOverInactiveTrigger = (allTriggers.hasElement(event.target) || allTriggers.hasMatchingElement(t => (0, _utils.contains)(t, event.target))) && (!currentDomReference || !(0, _utils.contains)(currentDomReference, event.target));
-        if (mouseOnly && !(0, _utils.isMouseLikePointerType)(pointerTypeRef.current)) {
+        if (mouseOnly && !(0, _utils.isMouseLikePointerType)(instance.pointerType)) {
           return;
         }
         if (currentOpen && !isOverInactiveTrigger || getRestMs(restMsRef.current) === 0) {
           return;
         }
-        if (!isOverInactiveTrigger && restTimeoutPendingRef.current && event.movementX ** 2 + event.movementY ** 2 < 2) {
+        if (!isOverInactiveTrigger && instance.restTimeoutPending && event.movementX ** 2 + event.movementY ** 2 < 2) {
           return;
         }
-        restTimeout.clear();
+        instance.restTimeout.clear();
         function handleMouseMove() {
-          restTimeoutPendingRef.current = false;
+          instance.restTimeoutPending = false;
 
           // A delayed hover open should not override a click-like open that happened
           // while the hover delay was pending.
@@ -283,21 +279,21 @@ function useHoverReferenceInteraction(context, props = {}) {
             return;
           }
           const latestOpen = store.select('open');
-          if (!blockMouseMoveRef.current && (!latestOpen || isOverInactiveTrigger)) {
+          if (!instance.blockMouseMove && (!latestOpen || isOverInactiveTrigger)) {
             store.setOpen(true, (0, _createBaseUIEventDetails.createChangeEventDetails)(_reasons.REASONS.triggerHover, nativeEvent, trigger));
           }
         }
-        if (pointerTypeRef.current === 'touch') {
+        if (instance.pointerType === 'touch') {
           ReactDOM.flushSync(() => {
             handleMouseMove();
           });
         } else if (isOverInactiveTrigger && currentOpen) {
           handleMouseMove();
         } else {
-          restTimeoutPendingRef.current = true;
-          restTimeout.start(getRestMs(restMsRef.current), handleMouseMove);
+          instance.restTimeoutPending = true;
+          instance.restTimeout.start(getRestMs(restMsRef.current), handleMouseMove);
         }
       }
     };
-  }, [blockMouseMoveRef, isClickLikeOpenEvent, mouseOnly, store, pointerTypeRef, restMsRef, restTimeout, restTimeoutPendingRef]);
+  }, [enabled, instance, isClickLikeOpenEvent, mouseOnly, store, restMsRef]);
 }

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

@@ -2,8 +2,8 @@ import * as React from 'react';
 import type { ElementProps } from "../types.js";
 import { ACTIVE_KEY, SELECTED_KEY } from "../utils/constants.js";
 export type ExtendedUserProps = {
-  [ACTIVE_KEY]?: boolean;
-  [SELECTED_KEY]?: boolean;
+  [ACTIVE_KEY]?: boolean | undefined;
+  [SELECTED_KEY]?: boolean | undefined;
 };
 export interface UseInteractionsReturn {
   getReferenceProps: (userProps?: React.HTMLProps<Element>) => Record<string, unknown>;

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

@@ -1,13 +1,13 @@
 import * as React from 'react';
 import { FloatingTreeStore } from "../components/FloatingTreeStore.js";
-import type { Dimensions, ElementProps, FloatingContext, FloatingRootContext } from "../types.js";
+import type { ElementProps, FloatingContext, FloatingRootContext } from "../types.js";
 export declare const ESCAPE = "Escape";
 export interface UseListNavigationProps {
   /**
    * A ref that holds an array of list items.
    * @default empty list
    */
-  listRef: React.MutableRefObject<Array<HTMLElement | null>>;
+  listRef: React.RefObject<Array<HTMLElement | null>>;
   /**
    * The index of the currently active (focused or highlighted) item, which may
    * or may not be selected.
@@ -18,36 +18,36 @@ export interface UseListNavigationProps {
    * A callback that is called when the user navigates to a new active item,
    * passed in a new `activeIndex`.
    */
-  onNavigate?: (activeIndex: number | null, event: React.SyntheticEvent | undefined) => void;
+  onNavigate?: ((activeIndex: number | null, event: React.SyntheticEvent | undefined) => void) | undefined;
   /**
    * Whether the Hook is enabled, including all internal Effects and event
    * handlers.
    * @default true
    */
-  enabled?: boolean;
+  enabled?: boolean | undefined;
   /**
    * The currently selected item index, which may or may not be active.
    * @default null
    */
-  selectedIndex?: number | null;
+  selectedIndex?: (number | null) | undefined;
   /**
    * Whether to focus the item upon opening the floating element. 'auto' infers
    * what to do based on the input type (keyboard vs. pointer), while a boolean
    * value will force the value.
    * @default 'auto'
    */
-  focusItemOnOpen?: boolean | 'auto';
+  focusItemOnOpen?: (boolean | 'auto') | undefined;
   /**
    * Whether hovering an item synchronizes the focus.
    * @default true
    */
-  focusItemOnHover?: boolean;
+  focusItemOnHover?: boolean | undefined;
   /**
    * Whether pressing an arrow key on the navigation’s main axis opens the
    * floating element.
    * @default true
    */
-  openOnArrowKeyDown?: boolean;
+  openOnArrowKeyDown?: boolean | undefined;
   /**
    * By default elements with either a `disabled` or `aria-disabled` attribute
    * are skipped in the list navigation — however, this requires the items to
@@ -58,7 +58,7 @@ export interface UseListNavigationProps {
    * navigating via arrow keys, specify an empty array.
    * @default undefined
    */
-  disabledIndices?: ReadonlyArray<number> | ((index: number) => boolean);
+  disabledIndices?: (ReadonlyArray<number> | ((index: number) => boolean)) | undefined;
   /**
    * Determines whether focus can escape the list, such that nothing is selected
    * after navigating beyond the boundary of the list. In some
@@ -67,32 +67,32 @@ export interface UseListNavigationProps {
    * `loopFocus` must be `true`.
    * @default false
    */
-  allowEscape?: boolean;
+  allowEscape?: boolean | undefined;
   /**
    * Determines whether focus should loop around when navigating past the first
    * or last item.
    * @default false
    */
-  loopFocus?: boolean;
+  loopFocus?: boolean | undefined;
   /**
    * If the list is nested within another one (e.g. a nested submenu), the
    * navigation semantics change.
    * @default false
    */
-  nested?: boolean;
+  nested?: boolean | undefined;
   /**
    * Allows to specify the orientation of the parent list, which is used to
    * determine the direction of the navigation.
    * This is useful when list navigation is used within a Composite,
    * as the hook can't determine the orientation of the parent list automatically.
    */
-  parentOrientation?: UseListNavigationProps['orientation'];
+  parentOrientation?: UseListNavigationProps['orientation'] | undefined;
   /**
    * Whether the direction of the floating element’s navigation is in RTL
    * layout.
    * @default false
    */
-  rtl?: boolean;
+  rtl?: boolean | undefined;
   /**
    * Whether the focus is virtual (using `aria-activedescendant`).
    * Use this if you need focus to remain on the reference element
@@ -103,12 +103,12 @@ export interface UseListNavigationProps {
    * generated automatically.
    * @default false
    */
-  virtual?: boolean;
+  virtual?: boolean | undefined;
   /**
    * The orientation in which navigation occurs.
    * @default 'vertical'
    */
-  orientation?: 'vertical' | 'horizontal' | 'both';
+  orientation?: ('vertical' | 'horizontal' | 'both') | undefined;
   /**
    * 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
@@ -117,23 +117,7 @@ export interface UseListNavigationProps {
    * and ArrowDown).
    * @default 1
    */
-  cols?: number;
-  /**
-   * Whether to scroll the active item into view when navigating. The default
-   * value uses nearest options.
-   */
-  scrollItemIntoView?: boolean | ScrollIntoViewOptions;
-  /**
-   * Only for `cols > 1`, specify sizes for grid items.
-   * `{ width: 2, height: 2 }` means an item is 2 columns wide and 2 rows tall.
-   */
-  itemSizes?: Dimensions[];
-  /**
-   * Only relevant for `cols > 1` and items with different sizes, specify if
-   * the grid is dense (as defined in the CSS spec for `grid-auto-flow`).
-   * @default false
-   */
-  dense?: boolean;
+  cols?: number | undefined;
   /**
    * The id of the root component.
    */
@@ -142,11 +126,11 @@ export interface UseListNavigationProps {
    * Whether to clear the active index when the pointer leaves an item.
    * @default true
    */
-  resetOnPointerLeave?: boolean;
+  resetOnPointerLeave?: boolean | undefined;
   /**
    * External FlatingTree to use when the one provided by context can't be used.
    */
-  externalTree?: FloatingTreeStore;
+  externalTree?: FloatingTreeStore | undefined;
 }
 /**
  * Adds arrow key-based navigation of a list of items, either using real DOM

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

@@ -1,4 +1,5 @@
 "use strict";
+'use client';
 
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 Object.defineProperty(exports, "__esModule", {
@@ -11,6 +12,7 @@ var _dom = require("@floating-ui/utils/dom");
 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 _FloatingTree = require("../components/FloatingTree");
 var _createBaseUIEventDetails = require("../../utils/createBaseUIEventDetails");
@@ -80,9 +82,6 @@ function useListNavigation(context, props) {
     orientation = 'vertical',
     parentOrientation,
     cols = 1,
-    scrollItemIntoView = true,
-    itemSizes,
-    dense = false,
     id,
     resetOnPointerLeave = true,
     externalTree
@@ -122,7 +121,6 @@ function useListNavigation(context, props) {
   const forceScrollIntoViewRef = React.useRef(false);
   const disabledIndicesRef = (0, _useValueAsRef.useValueAsRef)(disabledIndices);
   const latestOpenRef = (0, _useValueAsRef.useValueAsRef)(open);
-  const scrollItemIntoViewRef = (0, _useValueAsRef.useValueAsRef)(scrollItemIntoView);
   const selectedIndexRef = (0, _useValueAsRef.useValueAsRef)(selectedIndex);
   const resetOnPointerLeaveRef = (0, _useValueAsRef.useValueAsRef)(resetOnPointerLeave);
   const focusItem = (0, _useStableCallback.useStableCallback)(() => {
@@ -150,17 +148,16 @@ function useListNavigation(context, props) {
       if (!initialItem) {
         runFocus(waitedItem);
       }
-      const scrollIntoViewOptions = scrollItemIntoViewRef.current;
-      const shouldScrollIntoView = scrollIntoViewOptions &&
+      const shouldScrollIntoView =
       // eslint-disable-next-line @typescript-eslint/no-use-before-define
       item && (forceScrollIntoView || !isPointerModalityRef.current);
       if (shouldScrollIntoView) {
         // JSDOM doesn't support `.scrollIntoView()` but it's widely supported
         // by all browsers.
-        waitedItem.scrollIntoView?.(typeof scrollIntoViewOptions === 'boolean' ? {
+        waitedItem.scrollIntoView?.({
           block: 'nearest',
           inline: 'nearest'
-        } : scrollIntoViewOptions);
+        });
       }
     });
   });
@@ -250,7 +247,7 @@ 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, _utils.getDocument)(floatingElement));
+    const activeEl = (0, _utils.activeElement)((0, _owner.ownerDocument)(floatingElement));
     const treeContainsActiveEl = nodes.some(node => node.context && (0, _utils.contains)(node.context.elements.floating, activeEl));
     if (parent && !treeContainsActiveEl && isPointerModalityRef.current) {
       parent.focus({
@@ -311,6 +308,9 @@ function useListNavigation(context, props) {
         if (!resetOnPointerLeaveRef.current) {
           return;
         }
+        (0, _enqueueFocus.enqueueFocus)(null, {
+          sync: true
+        });
         indexRef.current = -1;
         onNavigate(event);
         if (!virtual) {
@@ -377,7 +377,7 @@ function useListNavigation(context, props) {
 
     // Grid navigation.
     if (cols > 1) {
-      const sizes = itemSizes || Array.from({
+      const sizes = Array.from({
         length: listRef.current.length
       }, () => ({
         width: 1,
@@ -385,7 +385,7 @@ 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, dense);
+      const cellMap = (0, _utils.createGridCellMap)(sizes, cols, false);
       const minGridIndex = cellMap.findIndex(index => index != null && !(0, _utils.isListIndexDisabled)(listRef, index, disabledIndices));
       // last enabled index
       const maxGridIndex = cellMap.reduce((foundIndex, index, cellIndex) => index != null && !(0, _utils.isListIndexDisabled)(listRef, index, disabledIndices) ? cellIndex : foundIndex, -1);

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

@@ -2,17 +2,11 @@ import type { ElementProps, FloatingContext, FloatingRootContext } from "../type
 type AriaRole = 'tooltip' | 'dialog' | 'alertdialog' | 'menu' | 'listbox' | 'grid' | 'tree';
 type ComponentRole = 'select' | 'label' | 'combobox';
 export interface UseRoleProps {
-  /**
-   * Whether the Hook is enabled, including all internal Effects and event
-   * handlers.
-   * @default true
-   */
-  enabled?: boolean;
   /**
    * The role of the floating element.
    * @default 'dialog'
    */
-  role?: AriaRole | ComponentRole;
+  role?: (AriaRole | ComponentRole) | undefined;
 }
 /**
  * Adds base screen reader props to the reference and floating elements for a