@base-ui/react 1.4.0 → 1.5.0

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

@@ -1,24 +1,29 @@
 'use client';
 
 import * as React from 'react';
-import { isElement } from '@floating-ui/utils/dom';
 import { addEventListener } from '@base-ui/utils/addEventListener';
 import { mergeCleanups } from '@base-ui/utils/mergeCleanups';
-import { useStableCallback } from '@base-ui/utils/useStableCallback';
 import { useIsoLayoutEffect } from '@base-ui/utils/useIsoLayoutEffect';
-import { useTimeout } from '@base-ui/utils/useTimeout';
 import { ownerDocument } from '@base-ui/utils/owner';
-import { contains, getTarget, isTargetInsideEnabledTrigger } from "../utils/element.js";
-import { getNodeChildren } from "../utils/nodes.js";
-import { createChangeEventDetails } from "../../utils/createBaseUIEventDetails.js";
-import { REASONS } from "../../utils/reasons.js";
+import { useStableCallback } from '@base-ui/utils/useStableCallback';
+import { useTimeout } from '@base-ui/utils/useTimeout';
+import { isElement } from '@floating-ui/utils/dom';
+import { createChangeEventDetails } from "../../internals/createBaseUIEventDetails.js";
+import { REASONS } from "../../internals/reasons.js";
 import { useFloatingParentNodeId, useFloatingTree } from "../components/FloatingTree.js";
+import { contains, getTarget } from "../utils/element.js";
+import { getNodeChildren } from "../utils/nodes.js";
 import { applySafePolygonPointerEventsMutation, clearSafePolygonPointerEventsMutation, isInteractiveElement, useHoverInteractionSharedState } from "./useHoverInteractionSharedState.js";
-import { getDelay, isClickLikeOpenEvent as isClickLikeOpenEventShared } from "./useHoverShared.js";
+import { getDelay, isClickLikeOpenEvent as isClickLikeOpenEventShared, isHoverOpenEvent, isInsideEnabledTrigger } from "./useHoverShared.js";
 /**
  * Provides hover interactions that should be attached to the floating element.
  */
 export 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');
@@ -26,48 +31,19 @@ export function useHoverFloatingInteraction(context, parameters = {}) {
   const {
     dataRef
   } = store.context;
-  const {
-    enabled = true,
-    closeDelay: closeDelayProp = 0,
-    nodeId: nodeIdProp
-  } = parameters;
-  const instance = useHoverInteractionSharedState(store);
   const tree = useFloatingTree();
   const parentId = useFloatingParentNodeId();
+  const instance = useHoverInteractionSharedState(store);
+  const childClosedTimeout = useTimeout();
   const isClickLikeOpenEvent = useStableCallback(() => {
     return isClickLikeOpenEventShared(dataRef.current.openEvent?.type, instance.interactedInside);
   });
   const isHoverOpen = useStableCallback(() => {
-    const type = dataRef.current.openEvent?.type;
-    return type?.includes('mouse') && type !== 'mousedown';
-  });
-  const isRelatedTargetInsideEnabledTrigger = useStableCallback(target => {
-    return isTargetInsideEnabledTrigger(target, store.context.triggerElements);
+    return isHoverOpenEvent(dataRef.current.openEvent?.type);
   });
-  const closeWithDelay = React.useCallback(event => {
-    const closeDelay = getDelay(closeDelayProp, 'close', instance.pointerType);
-    const close = () => {
-      store.setOpen(false, createChangeEventDetails(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 = useStableCallback(() => {
     clearSafePolygonPointerEventsMutation(instance);
   });
-  const handleInteractInside = useStableCallback(event => {
-    const target = getTarget(event);
-    if (!isInteractiveElement(target)) {
-      instance.interactedInside = false;
-      return;
-    }
-    instance.interactedInside = target?.closest('[aria-haspopup]') != null;
-  });
   useIsoLayoutEffect(() => {
     if (!open) {
       instance.pointerType = undefined;
@@ -91,7 +67,13 @@ export 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;
       applySafePolygonPointerEventsMutation(instance, {
         scopeElement,
         referenceElement: ref,
@@ -103,11 +85,34 @@ export function useHoverFloatingInteraction(context, parameters = {}) {
     }
     return undefined;
   }, [enabled, open, domReferenceElement, floatingElement, instance, isHoverOpen, tree, parentId, clearPointerEvents]);
-  const childClosedTimeout = useTimeout();
   React.useEffect(() => {
     if (!enabled) {
       return undefined;
     }
+    function hasParentChildren() {
+      return !!(tree && parentId && getNodeChildren(tree.nodesRef.current, parentId).length > 0);
+    }
+    function closeWithDelay(event) {
+      const closeDelay = getDelay(closeDelayProp, 'close', instance.pointerType);
+      const close = () => {
+        store.setOpen(false, createChangeEventDetails(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 = getTarget(event);
+      if (!isInteractiveElement(target)) {
+        instance.interactedInside = false;
+        return;
+      }
+      instance.interactedInside = target?.closest('[aria-haspopup]') != null;
+    }
     function onFloatingMouseEnter() {
       instance.openChangeTimeout.clear();
       childClosedTimeout.clear();
@@ -115,11 +120,11 @@ export function useHoverFloatingInteraction(context, parameters = {}) {
       clearPointerEvents();
     }
     function onFloatingMouseLeave(event) {
-      if (tree && parentId && getNodeChildren(tree.nodesRef.current, parentId).length > 0) {
+      if (hasParentChildren() && tree) {
         tree.events.on('floating.closed', onNodeClosed);
         return;
       }
-      if (isRelatedTargetInsideEnabledTrigger(event.relatedTarget)) {
+      if (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;
@@ -142,7 +147,7 @@ export function useHoverFloatingInteraction(context, parameters = {}) {
       }
     }
     function onNodeClosed(event) {
-      if (!tree || !parentId || 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.
@@ -156,5 +161,5 @@ export function useHoverFloatingInteraction(context, parameters = {}) {
     return mergeCleanups(floating && addEventListener(floating, 'mouseenter', onFloatingMouseEnter), floating && addEventListener(floating, 'mouseleave', onFloatingMouseLeave), floating && 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/esm/floating-ui-react/hooks/useHoverInteractionSharedState.js

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

package/esm/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 "../../utils/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/esm/floating-ui-react/hooks/useHoverReferenceInteraction.js

@@ -2,19 +2,19 @@
 
 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, getTarget, isTargetInsideEnabledTrigger } from "../utils/element.js";
-import { isMouseLikePointerType } from "../utils/event.js";
-import { createChangeEventDetails } from "../../utils/createBaseUIEventDetails.js";
-import { REASONS } from "../../utils/reasons.js";
+import { useStableCallback } from '@base-ui/utils/useStableCallback';
+import { useValueAsRef } from '@base-ui/utils/useValueAsRef';
+import { isElement } from '@floating-ui/utils/dom';
+import { createChangeEventDetails } from "../../internals/createBaseUIEventDetails.js";
+import { REASONS } from "../../internals/reasons.js";
 import { useFloatingTree } from "../components/FloatingTree.js";
+import { contains, getTarget } from "../utils/element.js";
+import { isMouseLikePointerType } from "../utils/event.js";
 import { applySafePolygonPointerEventsMutation, clearSafePolygonPointerEventsMutation, useHoverInteractionSharedState } from "./useHoverInteractionSharedState.js";
-import { getDelay, getRestMs, isClickLikeOpenEvent as isClickLikeOpenEventShared } from "./useHoverShared.js";
+import { getDelay, getRestMs, isClickLikeOpenEvent as isClickLikeOpenEventShared, isInsideEnabledTrigger } from "./useHoverShared.js";
 const EMPTY_REF = {
   current: null
 };
@@ -24,11 +24,6 @@ const EMPTY_REF = {
  * elements.
  */
 export function useHoverReferenceInteraction(context, props = {}) {
-  const store = 'rootStore' in context ? context.rootStore : context;
-  const {
-    dataRef,
-    events
-  } = store.context;
   const {
     enabled = true,
     delay = 0,
@@ -40,8 +35,14 @@ export 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 = useFloatingTree(externalTree);
   const instance = useHoverInteractionSharedState(store);
   const isHoverCloseActiveRef = React.useRef(false);
@@ -49,16 +50,13 @@ export function useHoverReferenceInteraction(context, props = {}) {
   const delayRef = useValueAsRef(delay);
   const restMsRef = useValueAsRef(restMs);
   const enabledRef = useValueAsRef(enabled);
+  const shouldOpenRef = useValueAsRef(shouldOpenProp);
   const isClosingRef = useValueAsRef(isClosing);
-  if (isActiveTrigger) {
-    // eslint-disable-next-line no-underscore-dangle
-    instance.handleCloseOptions = handleCloseRef.current?.__options;
-  }
   const isClickLikeOpenEvent = useStableCallback(() => {
     return isClickLikeOpenEventShared(dataRef.current.openEvent?.type, instance.interactedInside);
   });
-  const isRelatedTargetInsideEnabledTrigger = useStableCallback(target => {
-    return isTargetInsideEnabledTrigger(target, store.context.triggerElements);
+  const checkShouldOpen = useStableCallback(() => {
+    return shouldOpenRef.current?.() !== false;
   });
   const isOverInactiveTrigger = useStableCallback((currentDomReference, currentTarget, target) => {
     const allTriggers = store.context.triggerElements;
@@ -75,19 +73,6 @@ export function useHoverReferenceInteraction(context, props = {}) {
     const targetElement = target;
     return allTriggers.hasMatchingElement(trigger => contains(trigger, targetElement)) && (!currentDomReference || !contains(currentDomReference, targetElement));
   });
-  const closeWithDelay = useStableCallback((event, runElseBranch = true) => {
-    const closeDelay = getDelay(delayRef.current, 'close', instance.pointerType);
-    if (closeDelay) {
-      instance.openChangeTimeout.start(closeDelay, () => {
-        store.setOpen(false, createChangeEventDetails(REASONS.triggerHover, event));
-        tree?.events.emit('floating.closed', event);
-      });
-    } else if (runElseBranch) {
-      instance.openChangeTimeout.clear();
-      store.setOpen(false, createChangeEventDetails(REASONS.triggerHover, event));
-      tree?.events.emit('floating.closed', event);
-    }
-  });
   const cleanupMouseMoveHandler = useStableCallback(() => {
     if (!instance.handler) {
       return;
@@ -99,6 +84,10 @@ export function useHoverReferenceInteraction(context, props = {}) {
   const clearPointerEvents = useStableCallback(() => {
     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
@@ -128,6 +117,19 @@ export function useHoverReferenceInteraction(context, props = {}) {
     if (!enabled) {
       return undefined;
     }
+    function closeWithDelay(event, runElseBranch = true) {
+      const closeDelay = getDelay(delayRef.current, 'close', instance.pointerType);
+      if (closeDelay) {
+        instance.openChangeTimeout.start(closeDelay, () => {
+          store.setOpen(false, createChangeEventDetails(REASONS.triggerHover, event));
+          tree?.events.emit('floating.closed', event);
+        });
+      } else if (runElseBranch) {
+        instance.openChangeTimeout.clear();
+        store.setOpen(false, createChangeEventDetails(REASONS.triggerHover, event));
+        tree?.events.emit('floating.closed', event);
+      }
+    }
     const trigger = triggerElementRef.current ?? (isActiveTrigger ? store.select('domReferenceElement') : null);
     if (!isElement(trigger)) {
       return undefined;
@@ -175,7 +177,9 @@ export 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, createChangeEventDetails(REASONS.triggerHover, event, triggerNode));
+        if (checkShouldOpen()) {
+          store.setOpen(true, createChangeEventDetails(REASONS.triggerHover, event, triggerNode));
+        }
         return;
       }
       if (isRestOnlyDelay) {
@@ -183,12 +187,14 @@ export function useHoverReferenceInteraction(context, props = {}) {
       }
       if (openDelay) {
         instance.openChangeTimeout.start(openDelay, () => {
-          if (shouldOpen) {
+          if (shouldOpen && checkShouldOpen()) {
             store.setOpen(true, createChangeEventDetails(REASONS.triggerHover, event, triggerNode));
           }
         });
       } else if (shouldOpen) {
-        store.setOpen(true, createChangeEventDetails(REASONS.triggerHover, event, triggerNode));
+        if (checkShouldOpen()) {
+          store.setOpen(true, createChangeEventDetails(REASONS.triggerHover, event, triggerNode));
+        }
       }
     }
     function onMouseLeave(event) {
@@ -202,8 +208,7 @@ export function useHoverReferenceInteraction(context, props = {}) {
       instance.restTimeout.clear();
       instance.restTimeoutPending = false;
       const handleCloseContextBase = dataRef.current.floatingContext ?? getHandleCloseContext?.();
-      const ignoreRelatedTargetTrigger = isRelatedTargetInsideEnabledTrigger(event.relatedTarget);
-      if (ignoreRelatedTargetTrigger) {
+      if (isInsideEnabledTrigger(event.relatedTarget, store.context.triggerElements)) {
         return;
       }
       if (handleCloseRef.current && handleCloseContextBase) {
@@ -239,7 +244,7 @@ export function useHoverReferenceInteraction(context, props = {}) {
       }), addEventListener(trigger, 'mouseenter', onMouseEnter), addEventListener(trigger, 'mouseleave', onMouseLeave));
     }
     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]);
+  }, [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;
@@ -289,7 +294,7 @@ export function useHoverReferenceInteraction(context, props = {}) {
             return;
           }
           const latestOpen = store.select('open');
-          if (!instance.blockMouseMove && (!latestOpen || isOverInactive)) {
+          if (!instance.blockMouseMove && (!latestOpen || isOverInactive) && checkShouldOpen()) {
             store.setOpen(true, createChangeEventDetails(REASONS.triggerHover, nativeEvent, trigger));
           }
         }
@@ -305,5 +310,5 @@ export function useHoverReferenceInteraction(context, props = {}) {
         }
       }
     };
-  }, [enabled, instance, isClickLikeOpenEvent, isOverInactiveTrigger, mouseOnly, store, restMsRef]);
+  }, [enabled, instance, isClickLikeOpenEvent, isOverInactiveTrigger, mouseOnly, store, restMsRef, checkShouldOpen]);
 }

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

@@ -1,4 +1,5 @@
 import { isMouseLikePointerType } from "../utils/event.js";
+export { isTargetInsideEnabledTrigger as isInsideEnabledTrigger } from "../utils/element.js";
 function resolveValue(value, pointerType) {
   if (pointerType != null && !isMouseLikePointerType(pointerType)) {
     return 0;
@@ -23,4 +24,7 @@ export function getRestMs(value) {
 }
 export function isClickLikeOpenEvent(openEventType, interactedInside) {
   return interactedInside || openEventType === 'click' || openEventType === 'mousedown';
+}
+export function isHoverOpenEvent(openEventType) {
+  return openEventType?.includes('mouse') && openEventType !== 'mousedown';
 }

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