@base-ui/react 1.1.0 → 1.3.0

package/floating-ui-react/components/FloatingFocusManager.js

@@ -13,8 +13,8 @@ var _useMergedRefs = require("@base-ui/utils/useMergedRefs");
 var _useValueAsRef = require("@base-ui/utils/useValueAsRef");
 var _useStableCallback = require("@base-ui/utils/useStableCallback");
 var _useIsoLayoutEffect = require("@base-ui/utils/useIsoLayoutEffect");
-var _visuallyHidden = require("@base-ui/utils/visuallyHidden");
 var _useTimeout = require("@base-ui/utils/useTimeout");
+var _detectBrowser = require("@base-ui/utils/detectBrowser");
 var _useAnimationFrame = require("@base-ui/utils/useAnimationFrame");
 var _owner = require("@base-ui/utils/owner");
 var _FocusGuard = require("../../utils/FocusGuard");
@@ -54,12 +54,14 @@ function getEventType(event, lastInteractionType) {
 const LIST_LIMIT = 20;
 let previouslyFocusedElements = [];
 function clearDisconnectedPreviouslyFocusedElements() {
-  previouslyFocusedElements = previouslyFocusedElements.filter(el => el.isConnected);
+  previouslyFocusedElements = previouslyFocusedElements.filter(entry => {
+    return entry.deref()?.isConnected;
+  });
 }
 function addPreviouslyFocusedElement(element) {
   clearDisconnectedPreviouslyFocusedElements();
   if (element && (0, _dom.getNodeName)(element) !== 'body') {
-    previouslyFocusedElements.push(element);
+    previouslyFocusedElements.push(new WeakRef(element));
     if (previouslyFocusedElements.length > LIST_LIMIT) {
       previouslyFocusedElements = previouslyFocusedElements.slice(-LIST_LIMIT);
     }
@@ -67,7 +69,7 @@ function addPreviouslyFocusedElement(element) {
 }
 function getPreviouslyFocusedElement() {
   clearDisconnectedPreviouslyFocusedElements();
-  return previouslyFocusedElements[previouslyFocusedElements.length - 1];
+  return previouslyFocusedElements[previouslyFocusedElements.length - 1]?.deref();
 }
 function getFirstTabbableElement(container) {
   if (!container) {
@@ -86,7 +88,7 @@ function isFocusable(element) {
   if (typeof element.checkVisibility === 'function') {
     return element.checkVisibility();
   }
-  return (0, _dom.getComputedStyle)(element).display !== 'none';
+  return (0, _utils.isElementVisible)(element);
 }
 function handleTabIndex(floatingFocusElement, orderRef) {
   if (!orderRef.current.includes('floating') && !floatingFocusElement.getAttribute('role')?.includes('dialog')) {
@@ -118,18 +120,17 @@ function FloatingFocusManager(props) {
     context,
     children,
     disabled = false,
-    order = ['content'],
     initialFocus = true,
     returnFocus = true,
     restoreFocus = false,
     modal = true,
     closeOnFocusOut = true,
     openInteractionType = '',
-    getInsideElements: getInsideElementsProp = () => [],
     nextFocusableElement,
     previousFocusableElement,
     beforeContentFocusGuardRef,
-    externalTree
+    externalTree,
+    getInsideElements
   } = props;
   const store = 'rootStore' in context ? context.rootStore : context;
   const open = store.useState('open');
@@ -140,7 +141,6 @@ function FloatingFocusManager(props) {
     dataRef
   } = store.context;
   const getNodeId = (0, _useStableCallback.useStableCallback)(() => dataRef.current.floatingContext?.nodeId);
-  const getInsideElements = (0, _useStableCallback.useStableCallback)(getInsideElementsProp);
   const ignoreInitialFocus = initialFocus === false;
   // If the reference is a combobox and is typeable (e.g. input/textarea),
   // there are different focus semantics. The guards should not be rendered, but
@@ -148,14 +148,12 @@ function FloatingFocusManager(props) {
   // hidden dismiss button should only appear at the end of the list, not the
   // start.
   const isUntrappedTypeableCombobox = (0, _utils.isTypeableCombobox)(domReference) && ignoreInitialFocus;
-  const orderRef = (0, _useValueAsRef.useValueAsRef)(order);
+  const orderRef = React.useRef(['content']);
   const initialFocusRef = (0, _useValueAsRef.useValueAsRef)(initialFocus);
   const returnFocusRef = (0, _useValueAsRef.useValueAsRef)(returnFocus);
   const openInteractionTypeRef = (0, _useValueAsRef.useValueAsRef)(openInteractionType);
   const tree = (0, _FloatingTree.useFloatingTree)(externalTree);
   const portalContext = (0, _FloatingPortal.usePortalContext)();
-  const startDismissButtonRef = React.useRef(null);
-  const endDismissButtonRef = React.useRef(null);
   const preventReturnFocusRef = React.useRef(false);
   const isPointerDownRef = React.useRef(false);
   const pointerDownOutsideRef = React.useRef(false);
@@ -174,66 +172,50 @@ function FloatingFocusManager(props) {
   const getTabbableContent = (0, _useStableCallback.useStableCallback)((container = floatingFocusElement) => {
     return container ? (0, _tabbable.tabbable)(container, (0, _utils.getTabbableOptions)()) : [];
   });
+  const getResolvedInsideElements = (0, _useStableCallback.useStableCallback)(() => getInsideElements?.().filter(element => element != null) ?? []);
   const getTabbableElements = (0, _useStableCallback.useStableCallback)(container => {
     const content = getTabbableContent(container);
     return orderRef.current.map(() => content).filter(Boolean).flat();
   });
+
+  // Prevent Tab from escaping the modal when there are no tabbable elements.
   React.useEffect(() => {
-    if (disabled) {
-      return undefined;
-    }
-    if (!modal) {
+    if (disabled || !modal) {
       return undefined;
     }
     function onKeyDown(event) {
       if (event.key === 'Tab') {
         // The focus guards have nothing to focus, so we need to stop the event.
-        if ((0, _utils.contains)(floatingFocusElement, (0, _utils.activeElement)((0, _utils.getDocument)(floatingFocusElement))) && getTabbableContent().length === 0 && !isUntrappedTypeableCombobox) {
+        if ((0, _utils.contains)(floatingFocusElement, (0, _utils.activeElement)((0, _owner.ownerDocument)(floatingFocusElement))) && getTabbableContent().length === 0 && !isUntrappedTypeableCombobox) {
           (0, _utils.stopEvent)(event);
         }
       }
     }
-    const doc = (0, _utils.getDocument)(floatingFocusElement);
+    const doc = (0, _owner.ownerDocument)(floatingFocusElement);
     doc.addEventListener('keydown', onKeyDown);
     return () => {
       doc.removeEventListener('keydown', onKeyDown);
     };
   }, [disabled, domReference, floatingFocusElement, modal, orderRef, isUntrappedTypeableCombobox, getTabbableContent, getTabbableElements]);
-  React.useEffect(() => {
-    if (disabled) {
-      return undefined;
-    }
-    if (!floating) {
-      return undefined;
-    }
-    function handleFocusIn(event) {
-      const target = (0, _utils.getTarget)(event);
-      const tabbableContent = getTabbableContent();
-      const tabbableIndex = tabbableContent.indexOf(target);
-      if (tabbableIndex !== -1) {
-        tabbableIndexRef.current = tabbableIndex;
-      }
-    }
-    floating.addEventListener('focusin', handleFocusIn);
-    return () => {
-      floating.removeEventListener('focusin', handleFocusIn);
-    };
-  }, [disabled, floating, getTabbableContent]);
 
-  // Track the last interaction type at the document level to disambiguate focus events
+  // Track pointer/keyboard interactions to disambiguate focus and outside presses.
   React.useEffect(() => {
     if (disabled || !open) {
       return undefined;
     }
-    const doc = (0, _utils.getDocument)(floatingFocusElement);
+    const doc = (0, _owner.ownerDocument)(floatingFocusElement);
     function clearPointerDownOutside() {
       pointerDownOutsideRef.current = false;
     }
     function onPointerDown(event) {
       const target = (0, _utils.getTarget)(event);
-      const pointerTargetInside = (0, _utils.contains)(floating, target) || (0, _utils.contains)(domReference, target) || (0, _utils.contains)(portalContext?.portalNode, target);
+      const insideElements = getResolvedInsideElements();
+      const pointerTargetInside = (0, _utils.contains)(floating, target) || (0, _utils.contains)(domReference, target) || (0, _utils.contains)(portalContext?.portalNode, target) || insideElements.some(element => element === target || (0, _utils.contains)(element, target));
       pointerDownOutsideRef.current = !pointerTargetInside;
       lastInteractionTypeRef.current = event.pointerType || 'keyboard';
+      if (target?.closest(`[${_constants.CLICK_TRIGGER_IDENTIFIER}]`)) {
+        isPointerDownRef.current = true;
+      }
     }
     function onKeyDown() {
       lastInteractionTypeRef.current = 'keyboard';
@@ -248,14 +230,14 @@ function FloatingFocusManager(props) {
       doc.removeEventListener('pointercancel', clearPointerDownOutside, true);
       doc.removeEventListener('keydown', onKeyDown, true);
     };
-  }, [disabled, floating, domReference, floatingFocusElement, open, portalContext]);
+  }, [disabled, floating, domReference, floatingFocusElement, open, portalContext, getResolvedInsideElements]);
+
+  // Close on focus out and restore focus within the floating tree when needed.
   React.useEffect(() => {
-    if (disabled) {
-      return undefined;
-    }
-    if (!closeOnFocusOut) {
+    if (disabled || !closeOnFocusOut) {
       return undefined;
     }
+    const doc = (0, _owner.ownerDocument)(floatingFocusElement);
 
     // In Safari, buttons lose focus when pressing them.
     function handlePointerDown() {
@@ -264,6 +246,14 @@ function FloatingFocusManager(props) {
         isPointerDownRef.current = false;
       });
     }
+    function handleFocusIn(event) {
+      const target = (0, _utils.getTarget)(event);
+      const tabbableContent = getTabbableContent();
+      const tabbableIndex = tabbableContent.indexOf(target);
+      if (tabbableIndex !== -1) {
+        tabbableIndexRef.current = tabbableIndex;
+      }
+    }
     function handleFocusOutside(event) {
       const relatedTarget = event.relatedTarget;
       const currentTarget = event.currentTarget;
@@ -271,15 +261,16 @@ function FloatingFocusManager(props) {
       queueMicrotask(() => {
         const nodeId = getNodeId();
         const triggers = store.context.triggerElements;
+        const insideElements = getResolvedInsideElements();
         const isRelatedFocusGuard = relatedTarget?.hasAttribute((0, _createAttribute.createAttribute)('focus-guard')) && [beforeGuardRef.current, afterGuardRef.current, portalContext?.beforeInsideRef.current, portalContext?.afterInsideRef.current, portalContext?.beforeOutsideRef.current, portalContext?.afterOutsideRef.current, (0, _resolveRef.resolveRef)(previousFocusableElement), (0, _resolveRef.resolveRef)(nextFocusableElement)].includes(relatedTarget);
-        const movedToUnrelatedNode = !((0, _utils.contains)(domReference, relatedTarget) || (0, _utils.contains)(floating, relatedTarget) || (0, _utils.contains)(relatedTarget, floating) || (0, _utils.contains)(portalContext?.portalNode, relatedTarget) || relatedTarget != null && triggers.hasElement(relatedTarget) || triggers.hasMatchingElement(trigger => (0, _utils.contains)(trigger, relatedTarget)) || isRelatedFocusGuard || tree && ((0, _utils.getNodeChildren)(tree.nodesRef.current, nodeId).find(node => (0, _utils.contains)(node.context?.elements.floating, relatedTarget) || (0, _utils.contains)(node.context?.elements.domReference, relatedTarget)) || (0, _utils.getNodeAncestors)(tree.nodesRef.current, nodeId).find(node => [node.context?.elements.floating, (0, _utils.getFloatingFocusElement)(node.context?.elements.floating)].includes(relatedTarget) || node.context?.elements.domReference === relatedTarget)));
+        const movedToUnrelatedNode = !((0, _utils.contains)(domReference, relatedTarget) || (0, _utils.contains)(floating, relatedTarget) || (0, _utils.contains)(relatedTarget, floating) || (0, _utils.contains)(portalContext?.portalNode, relatedTarget) || insideElements.some(element => element === relatedTarget || (0, _utils.contains)(element, relatedTarget)) || relatedTarget != null && triggers.hasElement(relatedTarget) || triggers.hasMatchingElement(trigger => (0, _utils.contains)(trigger, relatedTarget)) || isRelatedFocusGuard || tree && ((0, _utils.getNodeChildren)(tree.nodesRef.current, nodeId).find(node => (0, _utils.contains)(node.context?.elements.floating, relatedTarget) || (0, _utils.contains)(node.context?.elements.domReference, relatedTarget)) || (0, _utils.getNodeAncestors)(tree.nodesRef.current, nodeId).find(node => [node.context?.elements.floating, (0, _utils.getFloatingFocusElement)(node.context?.elements.floating)].includes(relatedTarget) || node.context?.elements.domReference === relatedTarget)));
         if (currentTarget === domReference && floatingFocusElement) {
           handleTabIndex(floatingFocusElement, orderRef);
         }
 
         // Restore focus to the previous tabbable element index to prevent
         // focus from being lost outside the floating tree.
-        if (restoreFocus && currentTarget !== domReference && !isFocusable(target) && (0, _utils.activeElement)((0, _utils.getDocument)(floatingFocusElement)) === (0, _utils.getDocument)(floatingFocusElement).body) {
+        if (restoreFocus && currentTarget !== domReference && !isFocusable(target) && (0, _utils.activeElement)(doc) === doc.body) {
           // Let `FloatingPortal` effect knows that focus is still inside the
           // floating tree.
           if ((0, _dom.isHTMLElement)(floatingFocusElement)) {
@@ -350,6 +341,7 @@ function FloatingFocusManager(props) {
       });
     }
     if (floating) {
+      floating.addEventListener('focusin', handleFocusIn);
       floating.addEventListener('focusout', handleFocusOutside);
       if (portalContext) {
         floating.addEventListener('focusout', markInsideReactTree, true);
@@ -358,6 +350,7 @@ function FloatingFocusManager(props) {
         });
       }
       cleanups.push(() => {
+        floating.removeEventListener('focusin', handleFocusIn);
         floating.removeEventListener('focusout', handleFocusOutside);
       });
     }
@@ -366,7 +359,9 @@ function FloatingFocusManager(props) {
         cleanup();
       });
     };
-  }, [disabled, domReference, floating, floatingFocusElement, modal, tree, portalContext, store, closeOnFocusOut, restoreFocus, getTabbableContent, isUntrappedTypeableCombobox, getNodeId, orderRef, dataRef, blurTimeout, pointerDownTimeout, restoreFocusFrame, nextFocusableElement, previousFocusableElement]);
+  }, [disabled, domReference, floating, floatingFocusElement, modal, tree, portalContext, store, closeOnFocusOut, restoreFocus, getTabbableContent, isUntrappedTypeableCombobox, getNodeId, orderRef, dataRef, blurTimeout, pointerDownTimeout, restoreFocusFrame, nextFocusableElement, previousFocusableElement, getResolvedInsideElements]);
+
+  // Hide everything outside the floating tree from assistive tech while open.
   React.useEffect(() => {
     if (disabled || !floating || !open) {
       return undefined;
@@ -376,17 +371,26 @@ function FloatingFocusManager(props) {
     const portalNodes = Array.from(portalContext?.portalNode?.querySelectorAll(`[${(0, _createAttribute.createAttribute)('portal')}]`) || []);
     const ancestors = tree ? (0, _utils.getNodeAncestors)(tree.nodesRef.current, getNodeId()) : [];
     const rootAncestorComboboxDomReference = ancestors.find(node => (0, _utils.isTypeableCombobox)(node.context?.elements.domReference || null))?.context?.elements.domReference;
-    const insideElements = [floating, rootAncestorComboboxDomReference, ...portalNodes, ...getInsideElements(), startDismissButtonRef.current, endDismissButtonRef.current, beforeGuardRef.current, afterGuardRef.current, portalContext?.beforeOutsideRef.current, portalContext?.afterOutsideRef.current, (0, _resolveRef.resolveRef)(previousFocusableElement), (0, _resolveRef.resolveRef)(nextFocusableElement), isUntrappedTypeableCombobox ? domReference : null].filter(x => x != null);
-    const cleanup = (0, _markOthers.markOthers)(insideElements, modal || isUntrappedTypeableCombobox);
+    const controlInsideElements = [floating, ...portalNodes, beforeGuardRef.current, afterGuardRef.current, portalContext?.beforeOutsideRef.current, portalContext?.afterOutsideRef.current, ...getResolvedInsideElements()];
+    const insideElements = [...controlInsideElements, rootAncestorComboboxDomReference, (0, _resolveRef.resolveRef)(previousFocusableElement), (0, _resolveRef.resolveRef)(nextFocusableElement), isUntrappedTypeableCombobox ? domReference : null].filter(x => x != null);
+    const ariaHiddenCleanup = (0, _markOthers.markOthers)(insideElements, {
+      ariaHidden: modal || isUntrappedTypeableCombobox,
+      mark: false
+    });
+    const markerInsideElements = [floating, ...portalNodes].filter(x => x != null);
+    const markerCleanup = (0, _markOthers.markOthers)(markerInsideElements);
     return () => {
-      cleanup();
+      markerCleanup();
+      ariaHiddenCleanup();
     };
-  }, [open, disabled, domReference, floating, modal, orderRef, portalContext, isUntrappedTypeableCombobox, tree, getNodeId, getInsideElements, nextFocusableElement, previousFocusableElement]);
+  }, [open, disabled, domReference, floating, modal, orderRef, portalContext, isUntrappedTypeableCombobox, tree, getNodeId, nextFocusableElement, previousFocusableElement, getResolvedInsideElements]);
+
+  // Focus the initial element when the floating element opens.
   (0, _useIsoLayoutEffect.useIsoLayoutEffect)(() => {
     if (!open || disabled || !(0, _dom.isHTMLElement)(floatingFocusElement)) {
       return;
     }
-    const doc = (0, _utils.getDocument)(floatingFocusElement);
+    const doc = (0, _owner.ownerDocument)(floatingFocusElement);
     const previouslyFocusedElement = (0, _utils.activeElement)(doc);
 
     // Wait for any layout effect state setters to execute to set `tabIndex`.
@@ -415,11 +419,13 @@ function FloatingFocusManager(props) {
       });
     });
   }, [disabled, open, floatingFocusElement, ignoreInitialFocus, getTabbableElements, initialFocusRef, openInteractionTypeRef]);
+
+  // Track return focus targets and restore focus on unmount/close.
   (0, _useIsoLayoutEffect.useIsoLayoutEffect)(() => {
     if (disabled || !floatingFocusElement) {
       return undefined;
     }
-    const doc = (0, _utils.getDocument)(floatingFocusElement);
+    const doc = (0, _owner.ownerDocument)(floatingFocusElement);
     const previouslyFocusedElement = (0, _utils.activeElement)(doc);
     addPreviouslyFocusedElement(previouslyFocusedElement);
 
@@ -455,13 +461,6 @@ function FloatingFocusManager(props) {
       }
     }
     events.on('openchange', onOpenChangeLocal);
-    const fallbackEl = doc.createElement('span');
-    fallbackEl.setAttribute('tabindex', '-1');
-    fallbackEl.setAttribute('aria-hidden', 'true');
-    Object.assign(fallbackEl.style, _visuallyHidden.visuallyHidden);
-    if (isInsidePortal && domReference) {
-      domReference.insertAdjacentElement('afterend', fallbackEl);
-    }
     function getReturnElement() {
       const returnFocusValueOrFn = returnFocusRef.current;
       let resolvedReturnFocusValue = typeof returnFocusValueOrFn === 'function' ? returnFocusValueOrFn(closeTypeRef.current) : returnFocusValueOrFn;
@@ -475,15 +474,16 @@ function FloatingFocusManager(props) {
       }
       if (typeof resolvedReturnFocusValue === 'boolean') {
         const el = domReference || getPreviouslyFocusedElement();
-        return el && el.isConnected ? el : fallbackEl;
+        return el && el.isConnected ? el : null;
       }
-      const fallback = domReference || getPreviouslyFocusedElement() || fallbackEl;
-      return (0, _resolveRef.resolveRef)(resolvedReturnFocusValue) || fallback;
+      const fallback = domReference || getPreviouslyFocusedElement();
+      return (0, _resolveRef.resolveRef)(resolvedReturnFocusValue) || fallback || null;
     }
     return () => {
       events.off('openchange', onOpenChangeLocal);
       const activeEl = (0, _utils.activeElement)(doc);
-      const isFocusInsideFloatingTree = (0, _utils.contains)(floating, activeEl) || tree && (0, _utils.getNodeChildren)(tree.nodesRef.current, getNodeId(), false).some(node => (0, _utils.contains)(node.context?.elements.floating, activeEl));
+      const insideElements = getResolvedInsideElements();
+      const isFocusInsideFloatingTree = (0, _utils.contains)(floating, activeEl) || insideElements.some(element => element === activeEl || (0, _utils.contains)(element, activeEl)) || tree && (0, _utils.getNodeChildren)(tree.nodesRef.current, getNodeId(), false).some(node => (0, _utils.contains)(node.context?.elements.floating, activeEl));
       const returnElement = getReturnElement();
       queueMicrotask(() => {
         // This is `returnElement`, if it's tabbable, or its first tabbable child.
@@ -500,41 +500,30 @@ function FloatingFocusManager(props) {
             preventScroll: true
           });
         }
-        fallbackEl.remove();
+        preventReturnFocusRef.current = false;
       });
     };
-  }, [disabled, floating, floatingFocusElement, returnFocusRef, dataRef, events, tree, isInsidePortal, domReference, getNodeId]);
-  React.useEffect(() => {
-    // The `returnFocus` cleanup behavior is inside a microtask; ensure we
-    // wait for it to complete before resetting the flag.
-    queueMicrotask(() => {
-      preventReturnFocusRef.current = false;
-    });
-  }, [disabled]);
-  React.useEffect(() => {
-    if (disabled || !open) {
-      return undefined;
+  }, [disabled, floating, floatingFocusElement, returnFocusRef, dataRef, events, tree, domReference, getNodeId, getResolvedInsideElements]);
+
+  // Safari may randomly scroll to the bottom of the page if an input inside a popup has focus
+  // when the popup unmounts from the DOM.
+  // By blurring it before the popup unmounts, we can prevent this behavior.
+  (0, _useIsoLayoutEffect.useIsoLayoutEffect)(() => {
+    if (!_detectBrowser.isWebKit || open || !floating) {
+      return;
     }
-    function handlePointerDown(event) {
-      const target = (0, _utils.getTarget)(event);
-      if (target?.closest(`[${_constants.CLICK_TRIGGER_IDENTIFIER}]`)) {
-        isPointerDownRef.current = true;
-      }
+    const activeEl = (0, _utils.activeElement)((0, _owner.ownerDocument)(floating));
+    if (!(0, _dom.isHTMLElement)(activeEl) || !(0, _utils.isTypeableElement)(activeEl)) {
+      return;
     }
-    const doc = (0, _utils.getDocument)(floatingFocusElement);
-    doc.addEventListener('pointerdown', handlePointerDown, true);
-    return () => {
-      doc.removeEventListener('pointerdown', handlePointerDown, true);
-    };
-  }, [disabled, open, floatingFocusElement]);
-
+    if ((0, _utils.contains)(floating, activeEl)) {
+      activeEl.blur();
+    }
+  }, [open, floating]);
   // Synchronize the `context` & `modal` value to the FloatingPortal context.
   // It will decide whether or not it needs to render its own guards.
   (0, _useIsoLayoutEffect.useIsoLayoutEffect)(() => {
-    if (disabled) {
-      return undefined;
-    }
-    if (!portalContext) {
+    if (disabled || !portalContext) {
       return undefined;
     }
     portalContext.setFocusManagerState({
@@ -548,6 +537,8 @@ function FloatingFocusManager(props) {
       portalContext.setFocusManagerState(null);
     };
   }, [disabled, portalContext, modal, open, store, closeOnFocusOut, domReference]);
+
+  // Keep the floating element tabIndex in sync and clear stale focus records.
   (0, _useIsoLayoutEffect.useIsoLayoutEffect)(() => {
     if (disabled || !floatingFocusElement) {
       return undefined;

package/floating-ui-react/components/FloatingPortal.d.ts

@@ -1,12 +1,12 @@
 import * as React from 'react';
-import { useRenderElement } from "../../utils/useRenderElement.js";
+import { type UseRenderElementComponentProps } from "../../utils/useRenderElement.js";
 import type { BaseUIComponentProps } from "../../utils/types.js";
 type FocusManagerState = null | {
   modal: boolean;
   open: boolean;
   onOpenChange(open: boolean, data?: {
-    reason?: string;
-    event?: Event;
+    reason?: string | undefined;
+    event?: Event | undefined;
   }): void;
   domReference: Element | null;
   closeOnFocusOut: boolean;
@@ -20,11 +20,10 @@ export declare const usePortalContext: () => {
   afterOutsideRef: React.RefObject<HTMLSpanElement | null>;
 } | null;
 export interface UseFloatingPortalNodeProps {
-  ref?: React.Ref<HTMLDivElement>;
-  container?: HTMLElement | ShadowRoot | null | React.RefObject<HTMLElement | ShadowRoot | null>;
-  componentProps?: useRenderElement.ComponentProps<any>;
-  elementProps?: React.HTMLAttributes<HTMLDivElement>;
-  elementState?: Record<string, unknown>;
+  ref?: React.Ref<HTMLDivElement> | undefined;
+  container?: HTMLElement | ShadowRoot | null | React.RefObject<HTMLElement | ShadowRoot | null> | undefined;
+  componentProps?: UseRenderElementComponentProps<any> | undefined;
+  elementProps?: React.HTMLAttributes<HTMLDivElement> | undefined;
 }
 export interface UseFloatingPortalNodeResult {
   portalNode: HTMLElement | null;
@@ -41,14 +40,16 @@ export declare function useFloatingPortalNode(props?: UseFloatingPortalNodeProps
  * @internal
  */
 export declare const FloatingPortal: React.ForwardRefExoticComponent<Omit<FloatingPortal.Props<any> & {
-  renderGuards?: boolean;
+  renderGuards?: boolean | undefined;
 }, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export interface FloatingPortalState {}
 export declare namespace FloatingPortal {
-  interface Props<State> extends BaseUIComponentProps<'div', State> {
+  type State = FloatingPortalState;
+  interface Props<TState> extends BaseUIComponentProps<'div', TState> {
     /**
      * A parent element to render the portal element into.
      */
-    container?: UseFloatingPortalNodeProps['container'];
+    container?: UseFloatingPortalNodeProps['container'] | undefined;
   }
 }
 export {};

package/floating-ui-react/components/FloatingPortal.js

@@ -32,8 +32,7 @@ function useFloatingPortalNode(props = {}) {
     ref,
     container: containerProp,
     componentProps = _constants.EMPTY_OBJECT,
-    elementProps,
-    elementState
+    elementProps
   } = props;
   const uniqueId = (0, _useId.useId)();
   const portalContext = usePortalContext();
@@ -81,7 +80,6 @@ function useFloatingPortalNode(props = {}) {
   }, [containerProp, parentPortalNode, uniqueId]);
   const portalElement = (0, _useRenderElement.useRenderElement)('div', componentProps, {
     ref: [ref, setPortalNodeRef],
-    state: elementState,
     props: [{
       id: uniqueId,
       [attr]: ''

package/floating-ui-react/components/FloatingTree.d.ts

@@ -27,7 +27,7 @@ export interface FloatingNodeProps {
 export declare function FloatingNode(props: FloatingNodeProps): React.JSX.Element;
 export interface FloatingTreeProps {
   children?: React.ReactNode;
-  externalTree?: FloatingTreeStore;
+  externalTree?: FloatingTreeStore | undefined;
 }
 /**
  * Provides context for nested floating elements when they are not children of

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),