@base-ui/react 1.0.0 → 1.2.0

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

@@ -1,40 +1,46 @@
 import type { ElementProps, FloatingContext, FloatingRootContext } from "../types.js";
+import { REASONS } from "../../utils/reasons.js";
 export interface UseClickProps {
   /**
    * Whether the Hook is enabled, including all internal Effects and event
    * handlers.
    * @default true
    */
-  enabled?: boolean;
+  enabled?: boolean | undefined;
   /**
    * The type of event to use to determine a “click” with mouse input.
    * Keyboard clicks work as normal.
    * @default 'click'
    */
-  event?: 'click' | 'mousedown' | 'mousedown-only';
+  event?: ('click' | 'mousedown' | 'mousedown-only') | undefined;
   /**
    * Whether to toggle the open state with repeated clicks.
    * @default true
    */
-  toggle?: boolean;
+  toggle?: boolean | undefined;
   /**
    * Whether to ignore the logic for mouse input (for example, if `useHover()`
    * is also being used).
    * @default false
    */
-  ignoreMouse?: boolean;
+  ignoreMouse?: boolean | undefined;
   /**
    * If already open from another event such as the `useHover()` Hook,
    * determines whether to keep the floating element open when clicking the
    * reference element for the first time.
    * @default true
    */
-  stickIfOpen?: boolean;
+  stickIfOpen?: boolean | undefined;
   /**
    * Touch-only delay (ms) before opening. Useful to allow mobile viewport/keyboard to settle.
    * @default 0
    */
-  touchOpenDelay?: number;
+  touchOpenDelay?: number | undefined;
+  /**
+   * The reason for the click.
+   * @default REASONS.triggerPress
+   */
+  reason?: (typeof REASONS.triggerPress | typeof REASONS.inputPress) | undefined;
 }
 /**
  * Opens or closes the floating element when clicking the reference element.

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

@@ -26,7 +26,8 @@ function useClick(context, props = {}) {
     toggle = true,
     ignoreMouse = false,
     stickIfOpen = true,
-    touchOpenDelay = 0
+    touchOpenDelay = 0,
+    reason = _reasons.REASONS.triggerPress
   } = props;
   const pointerTypeRef = React.useRef(undefined);
   const frame = (0, _useAnimationFrame.useAnimationFrame)();
@@ -53,7 +54,7 @@ function useClick(context, props = {}) {
       // Animations sometimes won't run on a typeable element if using a rAF.
       // Focus is always set on these elements. For touch, we may delay opening.
       if ((0, _utils.isTypeableElement)(nativeEvent.target)) {
-        const details = (0, _createBaseUIEventDetails.createChangeEventDetails)(_reasons.REASONS.triggerPress, nativeEvent, nativeEvent.target);
+        const details = (0, _createBaseUIEventDetails.createChangeEventDetails)(reason, nativeEvent, nativeEvent.target);
         if (nextOpen && pointerType === 'touch' && touchOpenDelay > 0) {
           touchOpenTimeout.start(touchOpenDelay, () => {
             store.setOpen(true, details);
@@ -71,7 +72,7 @@ function useClick(context, props = {}) {
       // Wait until focus is set on the element. This is an alternative to
       // `event.preventDefault()` to avoid :focus-visible from appearing when using a pointer.
       frame.request(() => {
-        const details = (0, _createBaseUIEventDetails.createChangeEventDetails)(_reasons.REASONS.triggerPress, nativeEvent, eventCurrentTarget);
+        const details = (0, _createBaseUIEventDetails.createChangeEventDetails)(reason, nativeEvent, eventCurrentTarget);
         if (nextOpen && pointerType === 'touch' && touchOpenDelay > 0) {
           touchOpenTimeout.start(touchOpenDelay, () => {
             store.setOpen(true, details);
@@ -97,7 +98,7 @@ function useClick(context, props = {}) {
       const openEvent = dataRef.current.openEvent;
       const hasClickedOnInactiveTrigger = store.select('domReferenceElement') !== event.currentTarget;
       const nextOpen = open && hasClickedOnInactiveTrigger || !(open && toggle && (openEvent && stickIfOpen ? (0, _utils.isClickLikeEvent)(openEvent) : true));
-      const details = (0, _createBaseUIEventDetails.createChangeEventDetails)(_reasons.REASONS.triggerPress, event.nativeEvent, event.currentTarget);
+      const details = (0, _createBaseUIEventDetails.createChangeEventDetails)(reason, event.nativeEvent, event.currentTarget);
       if (nextOpen && pointerType === 'touch' && touchOpenDelay > 0) {
         touchOpenTimeout.start(touchOpenDelay, () => {
           store.setOpen(true, details);
@@ -109,7 +110,7 @@ function useClick(context, props = {}) {
     onKeyDown() {
       pointerTypeRef.current = undefined;
     }
-  }), [dataRef, eventOption, ignoreMouse, store, stickIfOpen, toggle, frame, touchOpenTimeout, touchOpenDelay]);
+  }), [dataRef, eventOption, ignoreMouse, store, stickIfOpen, toggle, frame, touchOpenTimeout, touchOpenDelay, reason]);
   return React.useMemo(() => enabled ? {
     reference
   } : _constants.EMPTY_OBJECT, [enabled, reference]);

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

@@ -5,24 +5,14 @@ export interface UseClientPointProps {
    * handlers.
    * @default true
    */
-  enabled?: boolean;
+  enabled?: boolean | undefined;
   /**
    * Whether to restrict the client point to an axis and use the reference
    * element (if it exists) as the other axis. This can be useful if the
    * floating element is also interactive.
    * @default 'both'
    */
-  axis?: 'x' | 'y' | 'both';
-  /**
-   * An explicitly defined `x` client coordinate.
-   * @default null
-   */
-  x?: number | null;
-  /**
-   * An explicitly defined `y` client coordinate.
-   * @default null
-   */
-  y?: number | null;
+  axis?: ('x' | 'y' | 'both') | undefined;
 }
 /**
  * Positions the floating element relative to a client point (in the viewport),

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

@@ -1,4 +1,5 @@
 "use strict";
+'use client';
 
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 Object.defineProperty(exports, "__esModule", {
@@ -8,7 +9,6 @@ exports.useClientPoint = useClientPoint;
 var React = _interopRequireWildcard(require("react"));
 var _dom = require("@floating-ui/utils/dom");
 var _useStableCallback = require("@base-ui/utils/useStableCallback");
-var _useIsoLayoutEffect = require("@base-ui/utils/useIsoLayoutEffect");
 var _utils = require("../utils");
 function createVirtualElement(domElement, data) {
   let offsetX = null;
@@ -79,15 +79,13 @@ function useClientPoint(context, props = {}) {
   const dataRef = store.context.dataRef;
   const {
     enabled = true,
-    axis = 'both',
-    x = null,
-    y = null
+    axis = 'both'
   } = props;
   const initialRef = React.useRef(false);
   const cleanupListenerRef = React.useRef(null);
   const [pointerType, setPointerType] = React.useState();
   const [reactive, setReactive] = React.useState([]);
-  const setReference = (0, _useStableCallback.useStableCallback)((newX, newY) => {
+  const setReference = (0, _useStableCallback.useStableCallback)((newX, newY, referenceElement) => {
     if (initialRef.current) {
       return;
     }
@@ -98,7 +96,7 @@ function useClientPoint(context, props = {}) {
     if (dataRef.current.openEvent && !isMouseBasedEvent(dataRef.current.openEvent)) {
       return;
     }
-    store.set('positionReference', createVirtualElement(domReference, {
+    store.set('positionReference', createVirtualElement(referenceElement ?? domReference, {
       x: newX,
       y: newY,
       axis,
@@ -107,11 +105,8 @@ function useClientPoint(context, props = {}) {
     }));
   });
   const handleReferenceEnterOrMove = (0, _useStableCallback.useStableCallback)(event => {
-    if (x != null || y != null) {
-      return;
-    }
     if (!open) {
-      setReference(event.clientX, event.clientY);
+      setReference(event.clientX, event.clientY, event.currentTarget);
     } else if (!cleanupListenerRef.current) {
       // If there's no cleanup, there's no listener, but we want to ensure
       // we add the listener if the cursor landed on the floating element and
@@ -126,8 +121,7 @@ function useClientPoint(context, props = {}) {
   // the dismissal touch point.
   const openCheck = (0, _utils.isMouseLikePointerType)(pointerType) ? floating : open;
   const addListener = React.useCallback(() => {
-    // Explicitly specified `x`/`y` coordinates shouldn't add a listener.
-    if (!openCheck || !enabled || x != null || y != null) {
+    if (!openCheck || !enabled) {
       return undefined;
     }
     const win = (0, _dom.getWindow)(floating);
@@ -151,7 +145,7 @@ function useClientPoint(context, props = {}) {
     }
     store.set('positionReference', domReference);
     return undefined;
-  }, [openCheck, enabled, x, y, floating, dataRef, domReference, store, setReference]);
+  }, [openCheck, enabled, floating, dataRef, domReference, store, setReference]);
   React.useEffect(() => {
     return addListener();
   }, [addListener, reactive]);
@@ -165,12 +159,6 @@ function useClientPoint(context, props = {}) {
       initialRef.current = true;
     }
   }, [enabled, open]);
-  (0, _useIsoLayoutEffect.useIsoLayoutEffect)(() => {
-    if (enabled && (x != null || y != null)) {
-      initialRef.current = false;
-      setReference(x, y);
-    }
-  }, [enabled, x, y, setReference]);
   const reference = React.useMemo(() => {
     function setPointerTypeRef(event) {
       setPointerType(event.pointerType);
@@ -183,6 +171,7 @@ function useClientPoint(context, props = {}) {
     };
   }, [handleReferenceEnterOrMove]);
   return React.useMemo(() => enabled ? {
-    reference
+    reference,
+    trigger: reference
   } : {}, [enabled, reference]);
 }

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

@@ -2,8 +2,8 @@ import { FloatingTreeStore } from "../components/FloatingTreeStore.js";
 import type { ElementProps, FloatingContext, FloatingRootContext } from "../types.js";
 type PressType = 'intentional' | 'sloppy';
 export declare function normalizeProp(normalizable?: boolean | {
-  escapeKey?: boolean;
-  outsidePress?: boolean;
+  escapeKey?: boolean | undefined;
+  outsidePress?: boolean | undefined;
 }): {
   escapeKey: boolean;
   outsidePress: boolean;
@@ -14,26 +14,26 @@ export interface UseDismissProps {
    * handlers.
    * @default true
    */
-  enabled?: boolean;
+  enabled?: boolean | undefined;
   /**
    * Whether to dismiss the floating element upon pressing the `esc` key.
    * @default true
    */
-  escapeKey?: boolean;
+  escapeKey?: boolean | undefined;
   /**
    * Whether to dismiss the floating element upon pressing the reference
    * element. You likely want to ensure the `move` option in the `useHover()`
    * Hook has been disabled when this is in use.
    * @default false
    */
-  referencePress?: boolean;
+  referencePress?: boolean | undefined;
   /**
    * The type of event to use to determine a "press".
    * - `down` is `pointerdown` on mouse input, but special iOS-like touch handling on touch input.
    * - `up` is lazy on both mouse + touch input (equivalent to `click`).
    * @default 'down'
    */
-  referencePressEvent?: PressType;
+  referencePressEvent?: PressType | undefined;
   /**
    * Whether to dismiss the floating element upon pressing outside of the
    * floating element.
@@ -47,37 +47,37 @@ export interface UseDismissProps {
    * ```
    * @default true
    */
-  outsidePress?: boolean | ((event: MouseEvent | TouchEvent) => boolean);
+  outsidePress?: (boolean | ((event: MouseEvent | TouchEvent) => boolean)) | undefined;
   /**
    * The type of event to use to determine an outside "press".
    * - `intentional` requires the user to click outside intentionally, firing on `pointerup` for mouse, and requiring minimal `touchmove`s for touch.
    * - `sloppy` fires on `pointerdown` for mouse, while for touch it fires on `touchend` (within 1 second) or while scrolling away after `touchstart`.
    */
-  outsidePressEvent?: PressType | {
+  outsidePressEvent?: (PressType | {
     mouse: PressType;
     touch: PressType;
   } | (() => PressType | {
     mouse: PressType;
     touch: PressType;
-  });
+  })) | undefined;
   /**
    * Whether to dismiss the floating element upon scrolling an overflow
    * ancestor.
    * @default false
    */
-  ancestorScroll?: boolean;
+  ancestorScroll?: boolean | undefined;
   /**
    * Determines whether event listeners bubble upwards through a tree of
    * floating elements.
    */
-  bubbles?: boolean | {
-    escapeKey?: boolean;
-    outsidePress?: boolean;
-  };
+  bubbles?: (boolean | {
+    escapeKey?: boolean | undefined;
+    outsidePress?: boolean | undefined;
+  }) | undefined;
   /**
    * External FlatingTree to use when the one provided by context can't be used.
    */
-  externalTree?: FloatingTreeStore;
+  externalTree?: FloatingTreeStore | undefined;
 }
 /**
  * Closes the floating element when a dismissal is requested — by default, when

package/floating-ui-react/hooks/useDismiss.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 _reactDom = require("@floating-ui/react-dom");
 var _dom = require("@floating-ui/utils/dom");
 var _useTimeout = require("@base-ui/utils/useTimeout");
 var _useStableCallback = require("@base-ui/utils/useStableCallback");
+var _owner = require("@base-ui/utils/owner");
 var _utils = require("../utils");
 var _FloatingTree = require("../components/FloatingTree");
 var _createBaseUIEventDetails = require("../../utils/createBaseUIEventDetails");
@@ -140,7 +142,7 @@ function useDismiss(context, props = {}) {
     }
     const target = (0, _utils.getTarget)(event);
     const inertSelector = `[${(0, _createAttribute.createAttribute)('inert')}]`;
-    const markers = (0, _utils.getDocument)(store.select('floatingElement')).querySelectorAll(inertSelector);
+    const markers = (0, _owner.ownerDocument)(store.select('floatingElement')).querySelectorAll(inertSelector);
     const triggers = store.context.triggerElements;
 
     // If another trigger is clicked, don't close the floating element.
@@ -338,7 +340,7 @@ function useDismiss(context, props = {}) {
         isComposingRef.current = false;
       });
     }
-    const doc = (0, _utils.getDocument)(floatingElement);
+    const doc = (0, _owner.ownerDocument)(floatingElement);
     doc.addEventListener('pointerdown', trackPointerType, true);
     if (escapeKey) {
       doc.addEventListener('keydown', closeOnEscapeKeyDown);
@@ -392,6 +394,7 @@ function useDismiss(context, props = {}) {
         ancestor.removeEventListener('scroll', onScroll);
       });
       compositionTimeout.clear();
+      endedOrStartedInsideRef.current = false;
     };
   }, [dataRef, floatingElement, referenceElement, domReferenceElement, escapeKey, outsidePress, open, onOpenChange, ancestorScroll, enabled, escapeKeyBubbles, outsidePressBubbles, closeOnEscapeKeyDown, closeOnPressOutside, closeOnPressOutsideCapture, handlePointerDown, handleTouchStartCapture, handleTouchMoveCapture, handleTouchEndCapture, trackPointerType, store]);
   React.useEffect(clearInsideReactTree, [outsidePress, clearInsideReactTree]);
@@ -415,6 +418,12 @@ function useDismiss(context, props = {}) {
     }
     endedOrStartedInsideRef.current = true;
   });
+  const markPressStartedInsideReactTree = (0, _useStableCallback.useStableCallback)(event => {
+    if (!open || !enabled || event.button !== 0) {
+      return;
+    }
+    endedOrStartedInsideRef.current = true;
+  });
   const floating = React.useMemo(() => ({
     onKeyDown: closeOnEscapeKeyDown,
     // `onMouseDown` may be blocked if `event.preventDefault()` is called in
@@ -424,12 +433,18 @@ function useDismiss(context, props = {}) {
     onMouseDown: handlePressedInside,
     onMouseUp: handlePressedInside,
     onClickCapture: markInsideReactTree,
-    onMouseDownCapture: markInsideReactTree,
-    onPointerDownCapture: markInsideReactTree,
+    onMouseDownCapture(event) {
+      markInsideReactTree();
+      markPressStartedInsideReactTree(event);
+    },
+    onPointerDownCapture(event) {
+      markInsideReactTree();
+      markPressStartedInsideReactTree(event);
+    },
     onMouseUpCapture: markInsideReactTree,
     onTouchEndCapture: markInsideReactTree,
     onTouchMoveCapture: markInsideReactTree
-  }), [closeOnEscapeKeyDown, handlePressedInside, markInsideReactTree]);
+  }), [closeOnEscapeKeyDown, handlePressedInside, markInsideReactTree, markPressStartedInsideReactTree]);
   return React.useMemo(() => enabled ? {
     reference,
     floating,

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

@@ -1,4 +1,5 @@
 "use strict";
+'use client';
 
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 Object.defineProperty(exports, "__esModule", {

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

@@ -1,18 +1,12 @@
 import type { ReferenceType } from "../types.js";
 import type { BaseUIChangeEventDetails } from "../../utils/createBaseUIEventDetails.js";
 import { FloatingRootStore } from "../components/FloatingRootStore.js";
-import { PopupTriggerMap } from "../../utils/popups/index.js";
 export interface UseFloatingRootContextOptions {
-  open?: boolean;
+  open?: boolean | undefined;
   onOpenChange?(open: boolean, eventDetails: BaseUIChangeEventDetails<string>): void;
   elements?: {
-    reference?: ReferenceType | null;
-    floating?: HTMLElement | null;
-    triggers?: PopupTriggerMap;
-  };
-  /**
-   * Whether to prevent the auto-emitted `openchange` event.
-   */
-  noEmit?: boolean;
+    reference?: (ReferenceType | null) | undefined;
+    floating?: (HTMLElement | null) | undefined;
+  } | undefined;
 }
 export declare function useFloatingRootContext(options: UseFloatingRootContextOptions): FloatingRootStore;

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

@@ -1,4 +1,5 @@
 "use strict";
+'use client';
 
 Object.defineProperty(exports, "__esModule", {
   value: true
@@ -30,10 +31,10 @@ function useFloatingRootContext(options) {
     onOpenChange,
     referenceElement: elements.reference ?? null,
     floatingElement: elements.floating ?? null,
-    triggerElements: elements.triggers ?? new _popups.PopupTriggerMap(),
+    triggerElements: new _popups.PopupTriggerMap(),
     floatingId,
     nested,
-    noEmit: options.noEmit || false
+    noEmit: false
   })).current;
   (0, _useIsoLayoutEffect.useIsoLayoutEffect)(() => {
     const valuesToSync = {
@@ -53,6 +54,6 @@ function useFloatingRootContext(options) {
   }, [open, floatingId, elements.reference, elements.floating, store]);
   store.context.onOpenChange = onOpenChange;
   store.context.nested = nested;
-  store.context.noEmit = options.noEmit || false;
+  store.context.noEmit = false;
   return store;
 }

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

@@ -5,13 +5,12 @@ export interface UseFocusProps {
    * handlers.
    * @default true
    */
-  enabled?: boolean;
+  enabled?: boolean | undefined;
   /**
-   * Whether the open state only changes if the focus event is considered
-   * visible (`:focus-visible` CSS selector).
-   * @default true
+   * Waits for the specified time before opening.
+   * @default undefined
    */
-  visibleOnly?: boolean;
+  delay?: (number | (() => number | undefined)) | undefined;
 }
 /**
  * Opens the floating element while the reference element has focus, like CSS

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

@@ -1,4 +1,5 @@
 "use strict";
+'use client';
 
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 Object.defineProperty(exports, "__esModule", {
@@ -9,6 +10,7 @@ var React = _interopRequireWildcard(require("react"));
 var _dom = require("@floating-ui/utils/dom");
 var _detectBrowser = require("@base-ui/utils/detectBrowser");
 var _useTimeout = require("@base-ui/utils/useTimeout");
+var _owner = require("@base-ui/utils/owner");
 var _utils = require("../utils");
 var _createBaseUIEventDetails = require("../../utils/createBaseUIEventDetails");
 var _reasons = require("../../utils/reasons");
@@ -27,9 +29,11 @@ function useFocus(context, props = {}) {
   } = store.context;
   const {
     enabled = true,
-    visibleOnly = true
+    delay
   } = props;
   const blockFocusRef = React.useRef(false);
+  // Track which reference should be blocked from re-opening after Escape/press dismissal.
+  const blockedReferenceRef = React.useRef(null);
   const timeout = (0, _useTimeout.useTimeout)();
   const keyboardModalityRef = React.useRef(true);
   React.useEffect(() => {
@@ -43,7 +47,8 @@ function useFocus(context, props = {}) {
     // floating element was not open, the focus should be blocked when they
     // return to the tab/window.
     function onBlur() {
-      if (!store.select('open') && (0, _dom.isHTMLElement)(domReference) && domReference === (0, _utils.activeElement)((0, _utils.getDocument)(domReference))) {
+      const currentDomReference = store.select('domReferenceElement');
+      if (!store.select('open') && (0, _dom.isHTMLElement)(currentDomReference) && currentDomReference === (0, _utils.activeElement)((0, _owner.ownerDocument)(currentDomReference))) {
         blockFocusRef.current = true;
       }
     }
@@ -72,24 +77,34 @@ function useFocus(context, props = {}) {
     }
     function onOpenChangeLocal(details) {
       if (details.reason === _reasons.REASONS.triggerPress || details.reason === _reasons.REASONS.escapeKey) {
-        blockFocusRef.current = true;
+        const referenceElement = store.select('domReferenceElement');
+        if ((0, _dom.isElement)(referenceElement)) {
+          blockedReferenceRef.current = referenceElement;
+          blockFocusRef.current = true;
+        }
       }
     }
     events.on('openchange', onOpenChangeLocal);
     return () => {
       events.off('openchange', onOpenChangeLocal);
     };
-  }, [events, enabled]);
+  }, [events, enabled, store]);
   const reference = React.useMemo(() => ({
     onMouseLeave() {
       blockFocusRef.current = false;
+      blockedReferenceRef.current = null;
     },
     onFocus(event) {
+      const focusTarget = event.currentTarget;
       if (blockFocusRef.current) {
-        return;
+        if (blockedReferenceRef.current === focusTarget) {
+          return;
+        }
+        blockFocusRef.current = false;
+        blockedReferenceRef.current = null;
       }
       const target = (0, _utils.getTarget)(event.nativeEvent);
-      if (visibleOnly && (0, _dom.isElement)(target)) {
+      if ((0, _dom.isElement)(target)) {
         // Safari fails to match `:focus-visible` if focus was initially
         // outside the document.
         if (isMacSafari && !event.relatedTarget) {
@@ -100,10 +115,26 @@ function useFocus(context, props = {}) {
           return;
         }
       }
-      store.setOpen(true, (0, _createBaseUIEventDetails.createChangeEventDetails)(_reasons.REASONS.triggerFocus, event.nativeEvent, event.currentTarget));
+      const movedFromOtherEnabledTrigger = (0, _utils.isTargetInsideEnabledTrigger)(event.relatedTarget, store.context.triggerElements);
+      const {
+        nativeEvent,
+        currentTarget
+      } = event;
+      const delayValue = typeof delay === 'function' ? delay() : delay;
+      if (store.select('open') && movedFromOtherEnabledTrigger || delayValue === 0 || delayValue === undefined) {
+        store.setOpen(true, (0, _createBaseUIEventDetails.createChangeEventDetails)(_reasons.REASONS.triggerFocus, nativeEvent, currentTarget));
+        return;
+      }
+      timeout.start(delayValue, () => {
+        if (blockFocusRef.current) {
+          return;
+        }
+        store.setOpen(true, (0, _createBaseUIEventDetails.createChangeEventDetails)(_reasons.REASONS.triggerFocus, nativeEvent, currentTarget));
+      });
     },
     onBlur(event) {
       blockFocusRef.current = false;
+      blockedReferenceRef.current = null;
       const relatedTarget = event.relatedTarget;
       const nativeEvent = event.nativeEvent;
 
@@ -135,13 +166,14 @@ function useFocus(context, props = {}) {
         // If the next focused element is one of the triggers, do not close
         // the floating element. The focus handler of that trigger will
         // handle the open state.
-        if (store.context.triggerElements.hasElement(event.relatedTarget)) {
+        const nextFocusedElement = relatedTarget ?? activeEl;
+        if ((0, _utils.isTargetInsideEnabledTrigger)(nextFocusedElement, store.context.triggerElements)) {
           return;
         }
         store.setOpen(false, (0, _createBaseUIEventDetails.createChangeEventDetails)(_reasons.REASONS.triggerFocus, nativeEvent));
       });
     }
-  }), [dataRef, store, visibleOnly, timeout]);
+  }), [dataRef, store, timeout, delay]);
   return React.useMemo(() => enabled ? {
     reference,
     trigger: reference

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

@@ -1,62 +1,39 @@
-import { FloatingTreeStore } from "../components/FloatingTreeStore.js";
 import type { Delay, ElementProps, FloatingContext, FloatingRootContext, FloatingTreeType, SafePolygonOptions } from "../types.js";
 export interface HandleCloseContext extends FloatingContext {
   onClose: () => void;
-  tree?: FloatingTreeType | null;
-  leave?: boolean;
+  tree?: (FloatingTreeType | null) | undefined;
+  leave?: boolean | undefined;
 }
 export interface HandleClose {
   (context: HandleCloseContext): (event: MouseEvent) => void;
-  __options?: SafePolygonOptions;
+  __options?: SafePolygonOptions | undefined;
 }
 export declare function getDelay(value: UseHoverProps['delay'], prop: 'open' | 'close', pointerType?: PointerEvent['pointerType']): number | undefined;
 export interface UseHoverProps {
-  /**
-   * Whether the Hook is enabled, including all internal Effects and event
-   * handlers.
-   * @default true
-   */
-  enabled?: boolean;
   /**
    * Accepts an event handler that runs on `mousemove` to control when the
    * floating element closes once the cursor leaves the reference element.
    * @default null
    */
-  handleClose?: HandleClose | null;
+  handleClose?: (HandleClose | null) | undefined;
   /**
    * Waits until the user’s cursor is at “rest” over the reference element
    * before changing the `open` state.
    * @default 0
    */
-  restMs?: number | (() => number);
+  restMs?: (number | (() => number)) | undefined;
   /**
    * Waits for the specified time when the event listener runs before changing
    * the `open` state.
    * @default 0
    */
-  delay?: Delay | (() => Delay);
-  /**
-   * Whether the logic only runs for mouse input, ignoring touch input.
-   * Note: due to a bug with Linux Chrome, "pen" inputs are considered "mouse".
-   * @default false
-   */
-  mouseOnly?: boolean;
+  delay?: (Delay | (() => Delay)) | undefined;
   /**
    * Whether moving the cursor over the floating element will open it, without a
    * regular hover event required.
    * @default true
    */
-  move?: boolean;
-  /**
-   * Allows to override the element that will trigger the popup.
-   * When it's set, useHover won't read the reference element from the root context.
-   * This allows to have multiple triggers per floating element (assuming `useHover` is called per trigger).
-   */
-  triggerElement?: HTMLElement | null;
-  /**
-   * External FlatingTree to use when the one provided by context can't be used.
-   */
-  externalTree?: FloatingTreeStore;
+  move?: boolean | undefined;
 }
 /**
  * Opens the floating element while hovering over the reference element, like