@base-ui/react 1.4.1 → 1.5.0

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

@@ -7,24 +7,29 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.useHoverFloatingInteraction = useHoverFloatingInteraction;
 var React = _interopRequireWildcard(require("react"));
-var _dom = require("@floating-ui/utils/dom");
 var _addEventListener = require("@base-ui/utils/addEventListener");
 var _mergeCleanups = require("@base-ui/utils/mergeCleanups");
-var _useStableCallback = require("@base-ui/utils/useStableCallback");
 var _useIsoLayoutEffect = require("@base-ui/utils/useIsoLayoutEffect");
-var _useTimeout = require("@base-ui/utils/useTimeout");
 var _owner = require("@base-ui/utils/owner");
-var _element = require("../utils/element");
-var _nodes = require("../utils/nodes");
+var _useStableCallback = require("@base-ui/utils/useStableCallback");
+var _useTimeout = require("@base-ui/utils/useTimeout");
+var _dom = require("@floating-ui/utils/dom");
 var _createBaseUIEventDetails = require("../../internals/createBaseUIEventDetails");
 var _reasons = require("../../internals/reasons");
 var _FloatingTree = require("../components/FloatingTree");
+var _element = require("../utils/element");
+var _nodes = require("../utils/nodes");
 var _useHoverInteractionSharedState = require("./useHoverInteractionSharedState");
 var _useHoverShared = require("./useHoverShared");
 /**
  * Provides hover interactions that should be attached to the floating element.
  */
 function useHoverFloatingInteraction(context, parameters = {}) {
+  const {
+    enabled = true,
+    closeDelay: closeDelayProp = 0,
+    nodeId: nodeIdProp
+  } = parameters;
   const store = 'rootStore' in context ? context.rootStore : context;
   const open = store.useState('open');
   const floatingElement = store.useState('floatingElement');
@@ -32,48 +37,19 @@ function useHoverFloatingInteraction(context, parameters = {}) {
   const {
     dataRef
   } = store.context;
-  const {
-    enabled = true,
-    closeDelay: closeDelayProp = 0,
-    nodeId: nodeIdProp
-  } = parameters;
-  const instance = (0, _useHoverInteractionSharedState.useHoverInteractionSharedState)(store);
   const tree = (0, _FloatingTree.useFloatingTree)();
   const parentId = (0, _FloatingTree.useFloatingParentNodeId)();
+  const instance = (0, _useHoverInteractionSharedState.useHoverInteractionSharedState)(store);
+  const childClosedTimeout = (0, _useTimeout.useTimeout)();
   const isClickLikeOpenEvent = (0, _useStableCallback.useStableCallback)(() => {
     return (0, _useHoverShared.isClickLikeOpenEvent)(dataRef.current.openEvent?.type, instance.interactedInside);
   });
   const isHoverOpen = (0, _useStableCallback.useStableCallback)(() => {
-    const type = dataRef.current.openEvent?.type;
-    return type?.includes('mouse') && type !== 'mousedown';
+    return (0, _useHoverShared.isHoverOpenEvent)(dataRef.current.openEvent?.type);
   });
-  const isRelatedTargetInsideEnabledTrigger = (0, _useStableCallback.useStableCallback)(target => {
-    return (0, _element.isTargetInsideEnabledTrigger)(target, store.context.triggerElements);
-  });
-  const closeWithDelay = React.useCallback(event => {
-    const closeDelay = (0, _useHoverShared.getDelay)(closeDelayProp, 'close', instance.pointerType);
-    const close = () => {
-      store.setOpen(false, (0, _createBaseUIEventDetails.createChangeEventDetails)(_reasons.REASONS.triggerHover, event));
-      tree?.events.emit('floating.closed', event);
-    };
-    if (closeDelay) {
-      instance.openChangeTimeout.start(closeDelay, close);
-    } else {
-      instance.openChangeTimeout.clear();
-      close();
-    }
-  }, [closeDelayProp, store, instance, tree]);
   const clearPointerEvents = (0, _useStableCallback.useStableCallback)(() => {
     (0, _useHoverInteractionSharedState.clearSafePolygonPointerEventsMutation)(instance);
   });
-  const handleInteractInside = (0, _useStableCallback.useStableCallback)(event => {
-    const target = (0, _element.getTarget)(event);
-    if (!(0, _useHoverInteractionSharedState.isInteractiveElement)(target)) {
-      instance.interactedInside = false;
-      return;
-    }
-    instance.interactedInside = target?.closest('[aria-haspopup]') != null;
-  });
   (0, _useIsoLayoutEffect.useIsoLayoutEffect)(() => {
     if (!open) {
       instance.pointerType = undefined;
@@ -97,7 +73,13 @@ function useHoverFloatingInteraction(context, parameters = {}) {
       if (parentFloating) {
         parentFloating.style.pointerEvents = '';
       }
-      const scopeElement = instance.handleCloseOptions?.getScope?.() ?? instance.pointerEventsScopeElement ?? parentFloating ?? ref.closest('[data-rootownerid]') ?? doc.body;
+
+      // A keep-mounted submenu can appear in the tree before it opens, so a
+      // cached scope or parent lookup may resolve to the submenu itself. That
+      // would not shield sibling items in the parent menu.
+      const cachedScopeElement = instance.pointerEventsScopeElement !== floatingEl ? instance.pointerEventsScopeElement : null;
+      const parentScopeElement = parentFloating !== floatingEl ? parentFloating : null;
+      const scopeElement = instance.handleCloseOptions?.getScope?.() ?? cachedScopeElement ?? parentScopeElement ?? ref.closest('[data-rootownerid]') ?? doc.body;
       (0, _useHoverInteractionSharedState.applySafePolygonPointerEventsMutation)(instance, {
         scopeElement,
         referenceElement: ref,
@@ -109,11 +91,34 @@ function useHoverFloatingInteraction(context, parameters = {}) {
     }
     return undefined;
   }, [enabled, open, domReferenceElement, floatingElement, instance, isHoverOpen, tree, parentId, clearPointerEvents]);
-  const childClosedTimeout = (0, _useTimeout.useTimeout)();
   React.useEffect(() => {
     if (!enabled) {
       return undefined;
     }
+    function hasParentChildren() {
+      return !!(tree && parentId && (0, _nodes.getNodeChildren)(tree.nodesRef.current, parentId).length > 0);
+    }
+    function closeWithDelay(event) {
+      const closeDelay = (0, _useHoverShared.getDelay)(closeDelayProp, 'close', instance.pointerType);
+      const close = () => {
+        store.setOpen(false, (0, _createBaseUIEventDetails.createChangeEventDetails)(_reasons.REASONS.triggerHover, event));
+        tree?.events.emit('floating.closed', event);
+      };
+      if (closeDelay) {
+        instance.openChangeTimeout.start(closeDelay, close);
+      } else {
+        instance.openChangeTimeout.clear();
+        close();
+      }
+    }
+    function handleInteractInside(event) {
+      const target = (0, _element.getTarget)(event);
+      if (!(0, _useHoverInteractionSharedState.isInteractiveElement)(target)) {
+        instance.interactedInside = false;
+        return;
+      }
+      instance.interactedInside = target?.closest('[aria-haspopup]') != null;
+    }
     function onFloatingMouseEnter() {
       instance.openChangeTimeout.clear();
       childClosedTimeout.clear();
@@ -121,11 +126,11 @@ function useHoverFloatingInteraction(context, parameters = {}) {
       clearPointerEvents();
     }
     function onFloatingMouseLeave(event) {
-      if (tree && parentId && (0, _nodes.getNodeChildren)(tree.nodesRef.current, parentId).length > 0) {
+      if (hasParentChildren() && tree) {
         tree.events.on('floating.closed', onNodeClosed);
         return;
       }
-      if (isRelatedTargetInsideEnabledTrigger(event.relatedTarget)) {
+      if ((0, _useHoverShared.isInsideEnabledTrigger)(event.relatedTarget, store.context.triggerElements)) {
         // If the mouse is leaving the reference element to another trigger, don't explicitly close the popup
         // as it will be moved.
         return;
@@ -148,7 +153,7 @@ function useHoverFloatingInteraction(context, parameters = {}) {
       }
     }
     function onNodeClosed(event) {
-      if (!tree || !parentId || (0, _nodes.getNodeChildren)(tree.nodesRef.current, parentId).length > 0) {
+      if (!tree || !parentId || hasParentChildren()) {
         return;
       }
       // Allow the mouseenter event to fire in case child was closed because mouse moved into parent.
@@ -162,5 +167,5 @@ function useHoverFloatingInteraction(context, parameters = {}) {
     return (0, _mergeCleanups.mergeCleanups)(floating && (0, _addEventListener.addEventListener)(floating, 'mouseenter', onFloatingMouseEnter), floating && (0, _addEventListener.addEventListener)(floating, 'mouseleave', onFloatingMouseLeave), floating && (0, _addEventListener.addEventListener)(floating, 'pointerdown', handleInteractInside, true), () => {
       tree?.events.off('floating.closed', onNodeClosed);
     });
-  }, [enabled, floatingElement, store, dataRef, nodeIdProp, isClickLikeOpenEvent, isRelatedTargetInsideEnabledTrigger, closeWithDelay, clearPointerEvents, handleInteractInside, instance, tree, parentId, childClosedTimeout]);
+  }, [enabled, floatingElement, store, dataRef, closeDelayProp, nodeIdProp, isClickLikeOpenEvent, clearPointerEvents, instance, tree, parentId, childClosedTimeout]);
 }

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

@@ -83,8 +83,8 @@ function applySafePolygonPointerEventsMutation(instance, options) {
   floatingElement.style.pointerEvents = 'auto';
 }
 function useHoverInteractionSharedState(store) {
-  const instance = (0, _useRefWithInit.useRefWithInit)(HoverInteraction.create).current;
   const data = store.context.dataRef.current;
+  const instance = (0, _useRefWithInit.useRefWithInit)(() => data.hoverInteractionState ?? HoverInteraction.create()).current;
   if (!data.hoverInteractionState) {
     data.hoverInteractionState = instance;
   }

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

@@ -1,8 +1,8 @@
 import * as React from 'react';
-import type { Delay, FloatingContext, FloatingRootContext } from "../types.js";
+import { HTMLProps } from "../../internals/types.js";
 import type { FloatingTreeStore } from "../components/FloatingTreeStore.js";
+import type { Delay, FloatingContext, FloatingRootContext } from "../types.js";
 import type { HandleClose, HandleCloseContextBase } from "./useHoverShared.js";
-import { HTMLProps } from "../../internals/types.js";
 export interface UseHoverReferenceInteractionProps {
   enabled?: boolean | undefined;
   handleClose?: HandleClose | null | undefined;
@@ -21,6 +21,11 @@ export interface UseHoverReferenceInteractionProps {
   triggerElementRef?: Readonly<React.RefObject<Element | null>> | undefined;
   getHandleCloseContext?: (() => HandleCloseContextBase | null) | undefined;
   isClosing?: (() => boolean) | undefined;
+  /**
+   * Called before each hover-driven open attempt (immediate, delayed, and rest-ms
+   * paths). Return `false` to veto; any other return value permits the open.
+   */
+  shouldOpen?: (() => boolean) | undefined;
 }
 /**
  * Provides hover interactions that should be attached to reference or trigger

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

@@ -8,17 +8,17 @@ Object.defineProperty(exports, "__esModule", {
 exports.useHoverReferenceInteraction = useHoverReferenceInteraction;
 var React = _interopRequireWildcard(require("react"));
 var ReactDOM = _interopRequireWildcard(require("react-dom"));
-var _dom = require("@floating-ui/utils/dom");
 var _addEventListener = require("@base-ui/utils/addEventListener");
 var _mergeCleanups = require("@base-ui/utils/mergeCleanups");
-var _useValueAsRef = require("@base-ui/utils/useValueAsRef");
-var _useStableCallback = require("@base-ui/utils/useStableCallback");
 var _owner = require("@base-ui/utils/owner");
-var _element = require("../utils/element");
-var _event = require("../utils/event");
+var _useStableCallback = require("@base-ui/utils/useStableCallback");
+var _useValueAsRef = require("@base-ui/utils/useValueAsRef");
+var _dom = require("@floating-ui/utils/dom");
 var _createBaseUIEventDetails = require("../../internals/createBaseUIEventDetails");
 var _reasons = require("../../internals/reasons");
 var _FloatingTree = require("../components/FloatingTree");
+var _element = require("../utils/element");
+var _event = require("../utils/event");
 var _useHoverInteractionSharedState = require("./useHoverInteractionSharedState");
 var _useHoverShared = require("./useHoverShared");
 const EMPTY_REF = {
@@ -30,11 +30,6 @@ const EMPTY_REF = {
  * elements.
  */
 function useHoverReferenceInteraction(context, props = {}) {
-  const store = 'rootStore' in context ? context.rootStore : context;
-  const {
-    dataRef,
-    events
-  } = store.context;
   const {
     enabled = true,
     delay = 0,
@@ -46,8 +41,14 @@ function useHoverReferenceInteraction(context, props = {}) {
     externalTree,
     isActiveTrigger = true,
     getHandleCloseContext,
-    isClosing
+    isClosing,
+    shouldOpen: shouldOpenProp
   } = props;
+  const store = 'rootStore' in context ? context.rootStore : context;
+  const {
+    dataRef,
+    events
+  } = store.context;
   const tree = (0, _FloatingTree.useFloatingTree)(externalTree);
   const instance = (0, _useHoverInteractionSharedState.useHoverInteractionSharedState)(store);
   const isHoverCloseActiveRef = React.useRef(false);
@@ -55,16 +56,13 @@ function useHoverReferenceInteraction(context, props = {}) {
   const delayRef = (0, _useValueAsRef.useValueAsRef)(delay);
   const restMsRef = (0, _useValueAsRef.useValueAsRef)(restMs);
   const enabledRef = (0, _useValueAsRef.useValueAsRef)(enabled);
+  const shouldOpenRef = (0, _useValueAsRef.useValueAsRef)(shouldOpenProp);
   const isClosingRef = (0, _useValueAsRef.useValueAsRef)(isClosing);
-  if (isActiveTrigger) {
-    // eslint-disable-next-line no-underscore-dangle
-    instance.handleCloseOptions = handleCloseRef.current?.__options;
-  }
   const isClickLikeOpenEvent = (0, _useStableCallback.useStableCallback)(() => {
     return (0, _useHoverShared.isClickLikeOpenEvent)(dataRef.current.openEvent?.type, instance.interactedInside);
   });
-  const isRelatedTargetInsideEnabledTrigger = (0, _useStableCallback.useStableCallback)(target => {
-    return (0, _element.isTargetInsideEnabledTrigger)(target, store.context.triggerElements);
+  const checkShouldOpen = (0, _useStableCallback.useStableCallback)(() => {
+    return shouldOpenRef.current?.() !== false;
   });
   const isOverInactiveTrigger = (0, _useStableCallback.useStableCallback)((currentDomReference, currentTarget, target) => {
     const allTriggers = store.context.triggerElements;
@@ -81,19 +79,6 @@ function useHoverReferenceInteraction(context, props = {}) {
     const targetElement = target;
     return allTriggers.hasMatchingElement(trigger => (0, _element.contains)(trigger, targetElement)) && (!currentDomReference || !(0, _element.contains)(currentDomReference, targetElement));
   });
-  const closeWithDelay = (0, _useStableCallback.useStableCallback)((event, runElseBranch = true) => {
-    const closeDelay = (0, _useHoverShared.getDelay)(delayRef.current, 'close', instance.pointerType);
-    if (closeDelay) {
-      instance.openChangeTimeout.start(closeDelay, () => {
-        store.setOpen(false, (0, _createBaseUIEventDetails.createChangeEventDetails)(_reasons.REASONS.triggerHover, event));
-        tree?.events.emit('floating.closed', event);
-      });
-    } else if (runElseBranch) {
-      instance.openChangeTimeout.clear();
-      store.setOpen(false, (0, _createBaseUIEventDetails.createChangeEventDetails)(_reasons.REASONS.triggerHover, event));
-      tree?.events.emit('floating.closed', event);
-    }
-  });
   const cleanupMouseMoveHandler = (0, _useStableCallback.useStableCallback)(() => {
     if (!instance.handler) {
       return;
@@ -105,6 +90,10 @@ function useHoverReferenceInteraction(context, props = {}) {
   const clearPointerEvents = (0, _useStableCallback.useStableCallback)(() => {
     (0, _useHoverInteractionSharedState.clearSafePolygonPointerEventsMutation)(instance);
   });
+  if (isActiveTrigger) {
+    // eslint-disable-next-line no-underscore-dangle
+    instance.handleCloseOptions = handleCloseRef.current?.__options;
+  }
   React.useEffect(() => cleanupMouseMoveHandler, [cleanupMouseMoveHandler]);
 
   // When closing before opening, clear the delay timeouts to cancel it
@@ -134,6 +123,19 @@ function useHoverReferenceInteraction(context, props = {}) {
     if (!enabled) {
       return undefined;
     }
+    function closeWithDelay(event, runElseBranch = true) {
+      const closeDelay = (0, _useHoverShared.getDelay)(delayRef.current, 'close', instance.pointerType);
+      if (closeDelay) {
+        instance.openChangeTimeout.start(closeDelay, () => {
+          store.setOpen(false, (0, _createBaseUIEventDetails.createChangeEventDetails)(_reasons.REASONS.triggerHover, event));
+          tree?.events.emit('floating.closed', event);
+        });
+      } else if (runElseBranch) {
+        instance.openChangeTimeout.clear();
+        store.setOpen(false, (0, _createBaseUIEventDetails.createChangeEventDetails)(_reasons.REASONS.triggerHover, event));
+        tree?.events.emit('floating.closed', event);
+      }
+    }
     const trigger = triggerElementRef.current ?? (isActiveTrigger ? store.select('domReferenceElement') : null);
     if (!(0, _dom.isElement)(trigger)) {
       return undefined;
@@ -181,7 +183,9 @@ function useHoverReferenceInteraction(context, props = {}) {
       // 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, (0, _createBaseUIEventDetails.createChangeEventDetails)(_reasons.REASONS.triggerHover, event, triggerNode));
+        if (checkShouldOpen()) {
+          store.setOpen(true, (0, _createBaseUIEventDetails.createChangeEventDetails)(_reasons.REASONS.triggerHover, event, triggerNode));
+        }
         return;
       }
       if (isRestOnlyDelay) {
@@ -189,12 +193,14 @@ function useHoverReferenceInteraction(context, props = {}) {
       }
       if (openDelay) {
         instance.openChangeTimeout.start(openDelay, () => {
-          if (shouldOpen) {
+          if (shouldOpen && checkShouldOpen()) {
             store.setOpen(true, (0, _createBaseUIEventDetails.createChangeEventDetails)(_reasons.REASONS.triggerHover, event, triggerNode));
           }
         });
       } else if (shouldOpen) {
-        store.setOpen(true, (0, _createBaseUIEventDetails.createChangeEventDetails)(_reasons.REASONS.triggerHover, event, triggerNode));
+        if (checkShouldOpen()) {
+          store.setOpen(true, (0, _createBaseUIEventDetails.createChangeEventDetails)(_reasons.REASONS.triggerHover, event, triggerNode));
+        }
       }
     }
     function onMouseLeave(event) {
@@ -208,8 +214,7 @@ function useHoverReferenceInteraction(context, props = {}) {
       instance.restTimeout.clear();
       instance.restTimeoutPending = false;
       const handleCloseContextBase = dataRef.current.floatingContext ?? getHandleCloseContext?.();
-      const ignoreRelatedTargetTrigger = isRelatedTargetInsideEnabledTrigger(event.relatedTarget);
-      if (ignoreRelatedTargetTrigger) {
+      if ((0, _useHoverShared.isInsideEnabledTrigger)(event.relatedTarget, store.context.triggerElements)) {
         return;
       }
       if (handleCloseRef.current && handleCloseContextBase) {
@@ -245,7 +250,7 @@ function useHoverReferenceInteraction(context, props = {}) {
       }), (0, _addEventListener.addEventListener)(trigger, 'mouseenter', onMouseEnter), (0, _addEventListener.addEventListener)(trigger, 'mouseleave', onMouseLeave));
     }
     return (0, _mergeCleanups.mergeCleanups)((0, _addEventListener.addEventListener)(trigger, 'mouseenter', onMouseEnter), (0, _addEventListener.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]);
+  }, [cleanupMouseMoveHandler, clearPointerEvents, dataRef, delayRef, store, enabled, handleCloseRef, instance, isActiveTrigger, isOverInactiveTrigger, isClickLikeOpenEvent, mouseOnly, move, restMsRef, triggerElementRef, tree, enabledRef, getHandleCloseContext, isClosingRef, checkShouldOpen]);
   return React.useMemo(() => {
     if (!enabled) {
       return undefined;
@@ -295,7 +300,7 @@ function useHoverReferenceInteraction(context, props = {}) {
             return;
           }
           const latestOpen = store.select('open');
-          if (!instance.blockMouseMove && (!latestOpen || isOverInactive)) {
+          if (!instance.blockMouseMove && (!latestOpen || isOverInactive) && checkShouldOpen()) {
             store.setOpen(true, (0, _createBaseUIEventDetails.createChangeEventDetails)(_reasons.REASONS.triggerHover, nativeEvent, trigger));
           }
         }
@@ -311,5 +316,5 @@ function useHoverReferenceInteraction(context, props = {}) {
         }
       }
     };
-  }, [enabled, instance, isClickLikeOpenEvent, isOverInactiveTrigger, mouseOnly, store, restMsRef]);
+  }, [enabled, instance, isClickLikeOpenEvent, isOverInactiveTrigger, mouseOnly, store, restMsRef, checkShouldOpen]);
 }

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

@@ -1,4 +1,5 @@
 import type { ExtendedElements, FloatingTreeType, Placement } from "../types.js";
+export { isTargetInsideEnabledTrigger as isInsideEnabledTrigger } from "../utils/element.js";
 export interface HandleCloseOptions {
   blockPointerEvents?: boolean | undefined;
   getScope?: (() => HTMLElement | SVGSVGElement | null) | undefined;
@@ -25,4 +26,4 @@ type HoverDelay = number | Partial<{
 export declare function getDelay(value: HoverDelay | (() => HoverDelay) | undefined, prop: 'open' | 'close', pointerType?: PointerEvent['pointerType']): number | undefined;
 export declare function getRestMs(value: number | (() => number)): number;
 export declare function isClickLikeOpenEvent(openEventType: string | undefined, interactedInside: boolean): boolean;
-export {};
+export declare function isHoverOpenEvent(openEventType: string | undefined): boolean | undefined;

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

@@ -6,7 +6,15 @@ Object.defineProperty(exports, "__esModule", {
 exports.getDelay = getDelay;
 exports.getRestMs = getRestMs;
 exports.isClickLikeOpenEvent = isClickLikeOpenEvent;
+exports.isHoverOpenEvent = isHoverOpenEvent;
+Object.defineProperty(exports, "isInsideEnabledTrigger", {
+  enumerable: true,
+  get: function () {
+    return _element.isTargetInsideEnabledTrigger;
+  }
+});
 var _event = require("../utils/event");
+var _element = require("../utils/element");
 function resolveValue(value, pointerType) {
   if (pointerType != null && !(0, _event.isMouseLikePointerType)(pointerType)) {
     return 0;
@@ -31,4 +39,7 @@ function getRestMs(value) {
 }
 function isClickLikeOpenEvent(openEventType, interactedInside) {
   return interactedInside || openEventType === 'click' || openEventType === 'mousedown';
+}
+function isHoverOpenEvent(openEventType) {
+  return openEventType?.includes('mouse') && openEventType !== 'mousedown';
 }

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

@@ -99,8 +99,6 @@ 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
-   * generated automatically.
    * @default false
    */
   virtual?: boolean | undefined;
@@ -128,7 +126,7 @@ export interface UseListNavigationProps {
    */
   resetOnPointerLeave?: boolean | 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;
 }