@base-ui/react 1.0.0 → 1.2.0

package/esm/fieldset/legend/FieldsetLegend.js

@@ -29,9 +29,9 @@ export const FieldsetLegend = /*#__PURE__*/React.forwardRef(function FieldsetLeg
       setLegendId(undefined);
     };
   }, [setLegendId, id]);
-  const state = React.useMemo(() => ({
+  const state = {
     disabled: disabled ?? false
-  }), [disabled]);
+  };
   const element = useRenderElement('div', componentProps, {
     state,
     ref: forwardedRef,

package/esm/fieldset/root/FieldsetRoot.d.ts

@@ -1,12 +1,12 @@
 import * as React from 'react';
 import type { BaseUIComponentProps } from "../../utils/types.js";
 /**
- * Groups the fieldset legend and the associated fields.
+ * Groups a shared legend with related controls.
  * Renders a `<fieldset>` element.
  *
  * Documentation: [Base UI Fieldset](https://base-ui.com/react/components/fieldset)
  */
-export declare const FieldsetRoot: React.ForwardRefExoticComponent<FieldsetRootProps & React.RefAttributes<HTMLElement>>;
+export declare const FieldsetRoot: React.ForwardRefExoticComponent<Omit<FieldsetRootProps, "ref"> & React.RefAttributes<HTMLElement>>;
 export interface FieldsetRootState {
   /**
    * Whether the component should ignore user interaction.

package/esm/fieldset/root/FieldsetRoot.js

@@ -5,7 +5,7 @@ import { FieldsetRootContext } from "./FieldsetRootContext.js";
 import { useRenderElement } from "../../utils/useRenderElement.js";
 
 /**
- * Groups the fieldset legend and the associated fields.
+ * Groups a shared legend with related controls.
  * Renders a `<fieldset>` element.
  *
  * Documentation: [Base UI Fieldset](https://base-ui.com/react/components/fieldset)
@@ -19,9 +19,9 @@ export const FieldsetRoot = /*#__PURE__*/React.forwardRef(function FieldsetRoot(
     ...elementProps
   } = componentProps;
   const [legendId, setLegendId] = React.useState(undefined);
-  const state = React.useMemo(() => ({
+  const state = {
     disabled
-  }), [disabled]);
+  };
   const element = useRenderElement('fieldset', componentProps, {
     ref: forwardedRef,
     state,

package/esm/floating-ui-react/components/FloatingDelayGroup.d.ts

@@ -12,7 +12,7 @@ export interface FloatingDelayGroupProps {
    * This is useful if you want grouping to “last” longer than the close delay,
    * for example if there is no close delay at all.
    */
-  timeoutMs?: number;
+  timeoutMs?: number | undefined;
 }
 /**
  * Experimental next version of `FloatingDelayGroup` to become the default
@@ -26,11 +26,6 @@ export interface FloatingDelayGroupProps {
  */
 export declare function FloatingDelayGroup(props: FloatingDelayGroupProps): React.JSX.Element;
 interface UseDelayGroupOptions {
-  /**
-   * Whether delay grouping should be enabled.
-   * @default true
-   */
-  enabled?: boolean;
   /**
    * Whether the trigger this hook is used in has opened the tooltip.
    */
@@ -40,7 +35,7 @@ interface UseDelayGroupReturn {
   /**
    * The delay reference object.
    */
-  delayRef: React.MutableRefObject<Delay>;
+  delayRef: React.RefObject<Delay>;
   /**
    * Whether animations should be removed.
    */

package/esm/floating-ui-react/components/FloatingDelayGroup.js

@@ -71,7 +71,6 @@ export function useDelayGroup(context, options = {
   const store = 'rootStore' in context ? context.rootStore : context;
   const floatingId = store.useState('floatingId');
   const {
-    enabled = true,
     open
   } = options;
   const groupContext = React.useContext(FloatingDelayGroupContext);
@@ -93,9 +92,6 @@ export function useDelayGroup(context, options = {
       currentContextRef.current = null;
       delayRef.current = initialDelayRef.current;
     }
-    if (!enabled) {
-      return undefined;
-    }
     if (!currentIdRef.current) {
       return undefined;
     }
@@ -117,11 +113,8 @@ export function useDelayGroup(context, options = {
       unset();
     }
     return undefined;
-  }, [enabled, open, floatingId, currentIdRef, delayRef, timeoutMs, initialDelayRef, currentContextRef, timeout, store]);
+  }, [open, floatingId, currentIdRef, delayRef, timeoutMs, initialDelayRef, currentContextRef, timeout, store]);
   useIsoLayoutEffect(() => {
-    if (!enabled) {
-      return;
-    }
     if (!open) {
       return;
     }
@@ -148,7 +141,7 @@ export function useDelayGroup(context, options = {
       setIsInstantPhase(false);
       prevContext?.setIsInstantPhase(false);
     }
-  }, [enabled, open, floatingId, store, currentIdRef, delayRef, timeoutMs, initialDelayRef, currentContextRef, timeout]);
+  }, [open, floatingId, store, currentIdRef, delayRef, timeoutMs, initialDelayRef, currentContextRef, timeout]);
   useIsoLayoutEffect(() => {
     return () => {
       currentContextRef.current = null;

package/esm/floating-ui-react/components/FloatingFocusManager.d.ts

@@ -11,19 +11,14 @@ export interface FloatingFocusManagerProps {
   /**
    * The interaction type used to open the floating element.
    */
-  openInteractionType?: InteractionType | null;
+  openInteractionType?: (InteractionType | null) | undefined;
   /**
    * Whether or not the focus manager should be disabled. Useful to delay focus
    * management until after a transition completes or some other conditional
    * state.
    * @default false
    */
-  disabled?: boolean;
-  /**
-   * The order in which focus cycles.
-   * @default ['content']
-   */
-  order?: Array<'reference' | 'floating' | 'content'>;
+  disabled?: boolean | undefined;
   /**
    * Determines the element to focus when the floating element is opened.
    *
@@ -35,7 +30,7 @@ export interface FloatingFocusManagerProps {
    *   or `false`/`undefined` to do nothing.
    * @default true
    */
-  initialFocus?: boolean | React.RefObject<HTMLElement | null> | ((openType: InteractionType) => boolean | HTMLElement | null | void);
+  initialFocus?: (boolean | React.RefObject<HTMLElement | null> | ((openType: InteractionType) => boolean | HTMLElement | null | void)) | undefined;
   /**
    * Determines the element to focus when the floating element is closed.
    *
@@ -47,7 +42,7 @@ export interface FloatingFocusManagerProps {
    *   or `false`/`undefined` to do nothing.
    * @default true
    */
-  returnFocus?: boolean | React.RefObject<HTMLElement | null> | ((closeType: InteractionType) => boolean | HTMLElement | null | void);
+  returnFocus?: (boolean | React.RefObject<HTMLElement | null> | ((closeType: InteractionType) => boolean | HTMLElement | null | void)) | undefined;
   /**
    * Determines where focus should be restored if focus inside the floating element is lost
    * (such as due to the removal of the currently focused element from the DOM).
@@ -58,14 +53,14 @@ export interface FloatingFocusManagerProps {
    * - `false`: do not restore focus
    * @default false
    */
-  restoreFocus?: boolean | 'popup';
+  restoreFocus?: (boolean | 'popup') | undefined;
   /**
    * Determines if focus is “modal”, meaning focus is fully trapped inside the
    * floating element and outside content cannot be accessed. This includes
    * screen reader virtual cursors.
    * @default true
    */
-  modal?: boolean;
+  modal?: boolean | undefined;
   /**
    * Determines whether `focusout` event listeners that control whether the
    * floating element should be closed if the focus moves outside of it are
@@ -73,29 +68,24 @@ export interface FloatingFocusManagerProps {
    * focus management.
    * @default true
    */
-  closeOnFocusOut?: boolean;
-  /**
-   * Returns a list of elements that should be considered part of the
-   * floating element.
-   */
-  getInsideElements?: () => Element[];
+  closeOnFocusOut?: boolean | undefined;
   /**
    * Overrides the element to focus when tabbing forward out of the floating element.
    */
-  nextFocusableElement?: HTMLElement | React.RefObject<HTMLElement | null> | null;
+  nextFocusableElement?: (HTMLElement | React.RefObject<HTMLElement | null> | null) | undefined;
   /**
    * Overrides the element to focus when tabbing backward out of the floating element.
    */
-  previousFocusableElement?: HTMLElement | React.RefObject<HTMLElement | null> | null;
+  previousFocusableElement?: (HTMLElement | React.RefObject<HTMLElement | null> | null) | undefined;
   /**
    * Ref to the focus guard preceding the floating element content.
    * Can be useful to focus the popup progammatically.
    */
-  beforeContentFocusGuardRef?: React.RefObject<HTMLSpanElement | null>;
+  beforeContentFocusGuardRef?: React.RefObject<HTMLSpanElement | null> | undefined;
   /**
    * External FlatingTree to use when the one provided by context can't be used.
    */
-  externalTree?: FloatingTreeStore;
+  externalTree?: FloatingTreeStore | undefined;
 }
 /**
  * Provides focus management for the floating element.

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

@@ -9,10 +9,11 @@ import { useStableCallback } from '@base-ui/utils/useStableCallback';
 import { useIsoLayoutEffect } from '@base-ui/utils/useIsoLayoutEffect';
 import { visuallyHidden } from '@base-ui/utils/visuallyHidden';
 import { useTimeout } from '@base-ui/utils/useTimeout';
+import { isWebKit } from '@base-ui/utils/detectBrowser';
 import { useAnimationFrame } from '@base-ui/utils/useAnimationFrame';
-import { ownerWindow } from '@base-ui/utils/owner';
+import { ownerDocument, ownerWindow } from '@base-ui/utils/owner';
 import { FocusGuard } from "../../utils/FocusGuard.js";
-import { activeElement, contains, getDocument, getTarget, isTypeableCombobox, isVirtualClick, isVirtualPointerEvent, stopEvent, getNodeAncestors, getNodeChildren, getFloatingFocusElement, getTabbableOptions, isOutsideEvent, getNextTabbable, getPreviousTabbable } from "../utils.js";
+import { activeElement, contains, getTarget, isTypeableCombobox, isVirtualClick, isVirtualPointerEvent, stopEvent, getNodeAncestors, getNodeChildren, getFloatingFocusElement, getTabbableOptions, isOutsideEvent, getNextTabbable, getPreviousTabbable, isTypeableElement } from "../utils.js";
 import { createChangeEventDetails } from "../../utils/createBaseUIEventDetails.js";
 import { REASONS } from "../../utils/reasons.js";
 import { createAttribute } from "../utils/createAttribute.js";
@@ -48,12 +49,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 && getNodeName(element) !== 'body') {
-    previouslyFocusedElements.push(element);
+    previouslyFocusedElements.push(new WeakRef(element));
     if (previouslyFocusedElements.length > LIST_LIMIT) {
       previouslyFocusedElements = previouslyFocusedElements.slice(-LIST_LIMIT);
     }
@@ -61,7 +64,7 @@ function addPreviouslyFocusedElement(element) {
 }
 function getPreviouslyFocusedElement() {
   clearDisconnectedPreviouslyFocusedElements();
-  return previouslyFocusedElements[previouslyFocusedElements.length - 1];
+  return previouslyFocusedElements[previouslyFocusedElements.length - 1]?.deref();
 }
 function getFirstTabbableElement(container) {
   if (!container) {
@@ -112,14 +115,12 @@ export 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,
@@ -134,7 +135,6 @@ export function FloatingFocusManager(props) {
     dataRef
   } = store.context;
   const getNodeId = useStableCallback(() => dataRef.current.floatingContext?.nodeId);
-  const getInsideElements = 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
@@ -142,7 +142,7 @@ export function FloatingFocusManager(props) {
   // hidden dismiss button should only appear at the end of the list, not the
   // start.
   const isUntrappedTypeableCombobox = isTypeableCombobox(domReference) && ignoreInitialFocus;
-  const orderRef = useValueAsRef(order);
+  const orderRef = React.useRef(['content']);
   const initialFocusRef = useValueAsRef(initialFocus);
   const returnFocusRef = useValueAsRef(returnFocus);
   const openInteractionTypeRef = useValueAsRef(openInteractionType);
@@ -156,6 +156,10 @@ export function FloatingFocusManager(props) {
   const tabbableIndexRef = React.useRef(-1);
   const closeTypeRef = React.useRef('');
   const lastInteractionTypeRef = React.useRef('');
+  const beforeGuardRef = React.useRef(null);
+  const afterGuardRef = React.useRef(null);
+  const mergedBeforeGuardRef = useMergedRefs(beforeGuardRef, beforeContentFocusGuardRef, portalContext?.beforeInsideRef);
+  const mergedAfterGuardRef = useMergedRefs(afterGuardRef, portalContext?.afterInsideRef);
   const blurTimeout = useTimeout();
   const pointerDownTimeout = useTimeout();
   const restoreFocusFrame = useAnimationFrame();
@@ -168,54 +172,33 @@ export function FloatingFocusManager(props) {
     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 (contains(floatingFocusElement, activeElement(getDocument(floatingFocusElement))) && getTabbableContent().length === 0 && !isUntrappedTypeableCombobox) {
+        if (contains(floatingFocusElement, activeElement(ownerDocument(floatingFocusElement))) && getTabbableContent().length === 0 && !isUntrappedTypeableCombobox) {
           stopEvent(event);
         }
       }
     }
-    const doc = getDocument(floatingFocusElement);
+    const doc = 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 = 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 = getDocument(floatingFocusElement);
+    const doc = ownerDocument(floatingFocusElement);
     function clearPointerDownOutside() {
       pointerDownOutsideRef.current = false;
     }
@@ -224,6 +207,9 @@ export function FloatingFocusManager(props) {
       const pointerTargetInside = contains(floating, target) || contains(domReference, target) || contains(portalContext?.portalNode, target);
       pointerDownOutsideRef.current = !pointerTargetInside;
       lastInteractionTypeRef.current = event.pointerType || 'keyboard';
+      if (target?.closest(`[${CLICK_TRIGGER_IDENTIFIER}]`)) {
+        isPointerDownRef.current = true;
+      }
     }
     function onKeyDown() {
       lastInteractionTypeRef.current = 'keyboard';
@@ -239,13 +225,13 @@ export function FloatingFocusManager(props) {
       doc.removeEventListener('keydown', onKeyDown, true);
     };
   }, [disabled, floating, domReference, floatingFocusElement, open, portalContext]);
+
+  // 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 = ownerDocument(floatingFocusElement);
 
     // In Safari, buttons lose focus when pressing them.
     function handlePointerDown() {
@@ -254,6 +240,14 @@ export function FloatingFocusManager(props) {
         isPointerDownRef.current = false;
       });
     }
+    function handleFocusIn(event) {
+      const target = 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;
@@ -261,14 +255,15 @@ export function FloatingFocusManager(props) {
       queueMicrotask(() => {
         const nodeId = getNodeId();
         const triggers = store.context.triggerElements;
-        const movedToUnrelatedNode = !(contains(domReference, relatedTarget) || contains(floating, relatedTarget) || contains(relatedTarget, floating) || contains(portalContext?.portalNode, relatedTarget) || relatedTarget != null && triggers.hasElement(relatedTarget) || triggers.hasMatchingElement(trigger => contains(trigger, relatedTarget)) || relatedTarget?.hasAttribute(createAttribute('focus-guard')) || tree && (getNodeChildren(tree.nodesRef.current, nodeId).find(node => contains(node.context?.elements.floating, relatedTarget) || contains(node.context?.elements.domReference, relatedTarget)) || getNodeAncestors(tree.nodesRef.current, nodeId).find(node => [node.context?.elements.floating, getFloatingFocusElement(node.context?.elements.floating)].includes(relatedTarget) || node.context?.elements.domReference === relatedTarget)));
+        const isRelatedFocusGuard = relatedTarget?.hasAttribute(createAttribute('focus-guard')) && [beforeGuardRef.current, afterGuardRef.current, portalContext?.beforeInsideRef.current, portalContext?.afterInsideRef.current, portalContext?.beforeOutsideRef.current, portalContext?.afterOutsideRef.current, resolveRef(previousFocusableElement), resolveRef(nextFocusableElement)].includes(relatedTarget);
+        const movedToUnrelatedNode = !(contains(domReference, relatedTarget) || contains(floating, relatedTarget) || contains(relatedTarget, floating) || contains(portalContext?.portalNode, relatedTarget) || relatedTarget != null && triggers.hasElement(relatedTarget) || triggers.hasMatchingElement(trigger => contains(trigger, relatedTarget)) || isRelatedFocusGuard || tree && (getNodeChildren(tree.nodesRef.current, nodeId).find(node => contains(node.context?.elements.floating, relatedTarget) || contains(node.context?.elements.domReference, relatedTarget)) || getNodeAncestors(tree.nodesRef.current, nodeId).find(node => [node.context?.elements.floating, 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) && activeElement(getDocument(floatingFocusElement)) === getDocument(floatingFocusElement).body) {
+        if (restoreFocus && currentTarget !== domReference && !isFocusable(target) && activeElement(doc) === doc.body) {
           // Let `FloatingPortal` effect knows that focus is still inside the
           // floating tree.
           if (isHTMLElement(floatingFocusElement)) {
@@ -339,6 +334,7 @@ export function FloatingFocusManager(props) {
       });
     }
     if (floating) {
+      floating.addEventListener('focusin', handleFocusIn);
       floating.addEventListener('focusout', handleFocusOutside);
       if (portalContext) {
         floating.addEventListener('focusout', markInsideReactTree, true);
@@ -347,6 +343,7 @@ export function FloatingFocusManager(props) {
         });
       }
       cleanups.push(() => {
+        floating.removeEventListener('focusin', handleFocusIn);
         floating.removeEventListener('focusout', handleFocusOutside);
       });
     }
@@ -355,11 +352,9 @@ export function FloatingFocusManager(props) {
         cleanup();
       });
     };
-  }, [disabled, domReference, floating, floatingFocusElement, modal, tree, portalContext, store, closeOnFocusOut, restoreFocus, getTabbableContent, isUntrappedTypeableCombobox, getNodeId, orderRef, dataRef, blurTimeout, pointerDownTimeout, restoreFocusFrame]);
-  const beforeGuardRef = React.useRef(null);
-  const afterGuardRef = React.useRef(null);
-  const mergedBeforeGuardRef = useMergedRefs(beforeGuardRef, beforeContentFocusGuardRef, portalContext?.beforeInsideRef);
-  const mergedAfterGuardRef = useMergedRefs(afterGuardRef, portalContext?.afterInsideRef);
+  }, [disabled, domReference, floating, floatingFocusElement, modal, tree, portalContext, store, closeOnFocusOut, restoreFocus, getTabbableContent, isUntrappedTypeableCombobox, getNodeId, orderRef, dataRef, blurTimeout, pointerDownTimeout, restoreFocusFrame, nextFocusableElement, previousFocusableElement]);
+
+  // Hide everything outside the floating tree from assistive tech while open.
   React.useEffect(() => {
     if (disabled || !floating || !open) {
       return undefined;
@@ -369,17 +364,16 @@ export function FloatingFocusManager(props) {
     const portalNodes = Array.from(portalContext?.portalNode?.querySelectorAll(`[${createAttribute('portal')}]`) || []);
     const ancestors = tree ? getNodeAncestors(tree.nodesRef.current, getNodeId()) : [];
     const rootAncestorComboboxDomReference = ancestors.find(node => 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, resolveRef(previousFocusableElement), resolveRef(nextFocusableElement), isUntrappedTypeableCombobox ? domReference : null].filter(x => x != null);
-    const cleanup = markOthers(insideElements, modal || isUntrappedTypeableCombobox);
-    return () => {
-      cleanup();
-    };
-  }, [open, disabled, domReference, floating, modal, orderRef, portalContext, isUntrappedTypeableCombobox, tree, getNodeId, getInsideElements, nextFocusableElement, previousFocusableElement]);
+    const insideElements = [floating, rootAncestorComboboxDomReference, ...portalNodes, startDismissButtonRef.current, endDismissButtonRef.current, beforeGuardRef.current, afterGuardRef.current, portalContext?.beforeOutsideRef.current, portalContext?.afterOutsideRef.current, resolveRef(previousFocusableElement), resolveRef(nextFocusableElement), isUntrappedTypeableCombobox ? domReference : null].filter(x => x != null);
+    return markOthers(insideElements, modal || isUntrappedTypeableCombobox);
+  }, [open, disabled, domReference, floating, modal, orderRef, portalContext, isUntrappedTypeableCombobox, tree, getNodeId, nextFocusableElement, previousFocusableElement]);
+
+  // Focus the initial element when the floating element opens.
   useIsoLayoutEffect(() => {
     if (!open || disabled || !isHTMLElement(floatingFocusElement)) {
       return;
     }
-    const doc = getDocument(floatingFocusElement);
+    const doc = ownerDocument(floatingFocusElement);
     const previouslyFocusedElement = activeElement(doc);
 
     // Wait for any layout effect state setters to execute to set `tabIndex`.
@@ -408,11 +402,13 @@ export function FloatingFocusManager(props) {
       });
     });
   }, [disabled, open, floatingFocusElement, ignoreInitialFocus, getTabbableElements, initialFocusRef, openInteractionTypeRef]);
+
+  // Track return focus targets and restore focus on unmount/close.
   useIsoLayoutEffect(() => {
     if (disabled || !floatingFocusElement) {
       return undefined;
     }
-    const doc = getDocument(floatingFocusElement);
+    const doc = ownerDocument(floatingFocusElement);
     const previouslyFocusedElement = activeElement(doc);
     addPreviouslyFocusedElement(previouslyFocusedElement);
 
@@ -494,40 +490,30 @@ export function FloatingFocusManager(props) {
           });
         }
         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;
+
+  // 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.
+  useIsoLayoutEffect(() => {
+    if (!isWebKit || open || !floating) {
+      return;
     }
-    function handlePointerDown(event) {
-      const target = getTarget(event);
-      if (target?.closest(`[${CLICK_TRIGGER_IDENTIFIER}]`)) {
-        isPointerDownRef.current = true;
-      }
+    const activeEl = activeElement(ownerDocument(floating));
+    if (!isHTMLElement(activeEl) || !isTypeableElement(activeEl)) {
+      return;
     }
-    const doc = getDocument(floatingFocusElement);
-    doc.addEventListener('pointerdown', handlePointerDown, true);
-    return () => {
-      doc.removeEventListener('pointerdown', handlePointerDown, true);
-    };
-  }, [disabled, open, floatingFocusElement]);
-
+    if (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.
   useIsoLayoutEffect(() => {
-    if (disabled) {
-      return undefined;
-    }
-    if (!portalContext) {
+    if (disabled || !portalContext) {
       return undefined;
     }
     portalContext.setFocusManagerState({
@@ -541,6 +527,8 @@ export 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.
   useIsoLayoutEffect(() => {
     if (disabled || !floatingFocusElement) {
       return undefined;

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

@@ -5,8 +5,8 @@ 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?: useRenderElement.ComponentProps<any> | undefined;
+  elementProps?: React.HTMLAttributes<HTMLDivElement> | undefined;
 }
 export interface UseFloatingPortalNodeResult {
   portalNode: HTMLElement | null;
@@ -40,15 +39,15 @@ export declare function useFloatingPortalNode(props?: UseFloatingPortalNodeProps
  * @see https://floating-ui.com/docs/FloatingPortal
  * @internal
  */
-export declare const FloatingPortal: React.ForwardRefExoticComponent<FloatingPortal.Props<any> & {
-  renderGuards?: boolean;
-} & React.RefAttributes<HTMLDivElement>>;
+export declare const FloatingPortal: React.ForwardRefExoticComponent<Omit<FloatingPortal.Props<any> & {
+  renderGuards?: boolean | undefined;
+}, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export declare namespace FloatingPortal {
   interface Props<State> extends BaseUIComponentProps<'div', State> {
     /**
      * A parent element to render the portal element into.
      */
-    container?: UseFloatingPortalNodeProps['container'];
+    container?: UseFloatingPortalNodeProps['container'] | undefined;
   }
 }
 export {};

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

@@ -5,6 +5,7 @@ import * as ReactDOM from 'react-dom';
 import { isNode } from '@floating-ui/utils/dom';
 import { useId } from '@base-ui/utils/useId';
 import { useIsoLayoutEffect } from '@base-ui/utils/useIsoLayoutEffect';
+import { useStableCallback } from '@base-ui/utils/useStableCallback';
 import { FocusGuard } from "../../utils/FocusGuard.js";
 import { enableFocusInside, disableFocusInside, getPreviousTabbable, getNextTabbable, isOutsideEvent } from "../utils.js";
 import { createChangeEventDetails } from "../../utils/createBaseUIEventDetails.js";
@@ -22,14 +23,21 @@ export function useFloatingPortalNode(props = {}) {
     ref,
     container: containerProp,
     componentProps = EMPTY_OBJECT,
-    elementProps,
-    elementState
+    elementProps
   } = props;
   const uniqueId = useId();
   const portalContext = usePortalContext();
   const parentPortalNode = portalContext?.portalNode;
   const [containerElement, setContainerElement] = React.useState(null);
   const [portalNode, setPortalNode] = React.useState(null);
+  const setPortalNodeRef = useStableCallback(node => {
+    if (node !== null) {
+      // the useIsoLayoutEffect below watching containerProp / parentPortalNode
+      // sets setPortalNode(null) when the container becomes null or changes.
+      // So even though the ref callback now ignores null, the portal node still gets cleared.
+      setPortalNode(node);
+    }
+  });
   const containerRef = React.useRef(null);
   useIsoLayoutEffect(() => {
     // Wait for the container to be resolved if explicitly `null`.
@@ -62,8 +70,7 @@ export function useFloatingPortalNode(props = {}) {
     }
   }, [containerProp, parentPortalNode, uniqueId]);
   const portalElement = useRenderElement('div', componentProps, {
-    ref: [ref, setPortalNode],
-    state: elementState,
+    ref: [ref, setPortalNodeRef],
     props: [{
       id: uniqueId,
       [attr]: ''
@@ -125,7 +132,7 @@ export const FloatingPortal = /*#__PURE__*/React.forwardRef(function FloatingPor
     // portal has already been focused, either by tabbing into a focus trap
     // element outside or using the mouse.
     function onFocus(event) {
-      if (portalNode && isOutsideEvent(event)) {
+      if (portalNode && event.relatedTarget && isOutsideEvent(event)) {
         const focusing = event.type === 'focusin';
         const manageFocus = focusing ? enableFocusInside : disableFocusInside;
         manageFocus(portalNode);

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