@base-ui/react 1.2.0 → 1.4.0

package/esm/field/validity/FieldValidity.d.ts

@@ -2,14 +2,20 @@ import * as React from 'react';
 import { FieldValidityData } from "../root/FieldRoot.js";
 import { type TransitionStatus } from "../../utils/useTransitionStatus.js";
 /**
- * Used to display a custom message based on the field’s validity.
+ * Used to display a custom message based on the field's validity.
  * Requires `children` to be a function that accepts field validity state as an argument.
  *
  * Documentation: [Base UI Field](https://base-ui.com/react/components/field)
  */
 export declare const FieldValidity: React.FC<FieldValidity.Props>;
 export interface FieldValidityState extends Omit<FieldValidityData, 'state'> {
+  /**
+   * The validity state.
+   */
   validity: FieldValidityData['state'];
+  /**
+   * The transition status of the component.
+   */
   transitionStatus: TransitionStatus;
 }
 export interface FieldValidityProps {
@@ -24,7 +30,7 @@ export interface FieldValidityProps {
    * </Field.Validity>
    * ```
    */
-  children: (state: FieldValidity.State) => React.ReactNode;
+  children: (state: FieldValidityState) => React.ReactNode;
 }
 export declare namespace FieldValidity {
   type State = FieldValidityState;

package/esm/field/validity/FieldValidity.js

@@ -6,7 +6,7 @@ import { getCombinedFieldValidityData } from "../utils/getCombinedFieldValidityD
 import { useTransitionStatus } from "../../utils/useTransitionStatus.js";
 
 /**
- * Used to display a custom message based on the field’s validity.
+ * Used to display a custom message based on the field's validity.
  * Requires `children` to be a function that accepts field validity state as an argument.
  *
  * Documentation: [Base UI Field](https://base-ui.com/react/components/field)

package/esm/fieldset/legend/FieldsetLegend.d.ts

@@ -13,7 +13,7 @@ export interface FieldsetLegendState {
    */
   disabled: boolean;
 }
-export interface FieldsetLegendProps extends BaseUIComponentProps<'div', FieldsetLegend.State> {}
+export interface FieldsetLegendProps extends BaseUIComponentProps<'div', FieldsetLegendState> {}
 export declare namespace FieldsetLegend {
   type State = FieldsetLegendState;
   type Props = FieldsetLegendProps;

package/esm/fieldset/legend/FieldsetLegend.js

@@ -15,6 +15,7 @@ export const FieldsetLegend = /*#__PURE__*/React.forwardRef(function FieldsetLeg
   const {
     render,
     className,
+    style,
     id: idProp,
     ...elementProps
   } = componentProps;

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

@@ -13,7 +13,7 @@ export interface FieldsetRootState {
    */
   disabled: boolean;
 }
-export interface FieldsetRootProps extends BaseUIComponentProps<'fieldset', FieldsetRoot.State> {}
+export interface FieldsetRootProps extends BaseUIComponentProps<'fieldset', FieldsetRootState> {}
 export declare namespace FieldsetRoot {
   type State = FieldsetRootState;
   type Props = FieldsetRootProps;

package/esm/fieldset/root/FieldsetRoot.js

@@ -15,6 +15,7 @@ export const FieldsetRoot = /*#__PURE__*/React.forwardRef(function FieldsetRoot(
   const {
     render,
     className,
+    style,
     disabled = false,
     ...elementProps
   } = componentProps;

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

@@ -3,7 +3,7 @@
 import * as React from 'react';
 import { useTimeout, Timeout } from '@base-ui/utils/useTimeout';
 import { useIsoLayoutEffect } from '@base-ui/utils/useIsoLayoutEffect';
-import { getDelay } from "../hooks/useHover.js";
+import { getDelay } from "../hooks/useHoverShared.js";
 import { createChangeEventDetails } from "../../utils/createBaseUIEventDetails.js";
 import { REASONS } from "../../utils/reasons.js";
 import { jsx as _jsx } from "react/jsx-runtime";

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

@@ -11,7 +11,7 @@ export interface FloatingFocusManagerProps {
   /**
    * The interaction type used to open the floating element.
    */
-  openInteractionType?: (InteractionType | null) | undefined;
+  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
@@ -30,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)) | undefined;
+  initialFocus?: boolean | React.RefObject<HTMLElement | null> | ((openType: InteractionType) => boolean | HTMLElement | null | void) | undefined;
   /**
    * Determines the element to focus when the floating element is closed.
    *
@@ -42,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)) | undefined;
+  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).
@@ -53,7 +53,7 @@ export interface FloatingFocusManagerProps {
    * - `false`: do not restore focus
    * @default false
    */
-  restoreFocus?: (boolean | 'popup') | undefined;
+  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
@@ -72,20 +72,25 @@ export interface FloatingFocusManagerProps {
   /**
    * Overrides the element to focus when tabbing forward out of the floating element.
    */
-  nextFocusableElement?: (HTMLElement | React.RefObject<HTMLElement | null> | null) | undefined;
+  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) | undefined;
+  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.
+   * Can be useful to focus the popup programmatically.
    */
   beforeContentFocusGuardRef?: React.RefObject<HTMLSpanElement | null> | undefined;
   /**
    * External FlatingTree to use when the one provided by context can't be used.
    */
   externalTree?: FloatingTreeStore | undefined;
+  /**
+   * Additional elements that should be treated as part of the floating subtree
+   * even if they are rendered outside the floating element itself.
+   */
+  getInsideElements?: (() => Array<Element | null | undefined>) | undefined;
 }
 /**
  * Provides focus management for the floating element.

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

@@ -1,19 +1,23 @@
 'use client';
 
 import * as React from 'react';
-import { tabbable, isTabbable, focusable } from 'tabbable';
-import { getComputedStyle, getNodeName, isHTMLElement } from '@floating-ui/utils/dom';
+import { getNodeName, isHTMLElement } from '@floating-ui/utils/dom';
+import { addEventListener } from '@base-ui/utils/addEventListener';
+import { mergeCleanups } from '@base-ui/utils/mergeCleanups';
 import { useMergedRefs } from '@base-ui/utils/useMergedRefs';
 import { useValueAsRef } from '@base-ui/utils/useValueAsRef';
 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 { ownerDocument, ownerWindow } from '@base-ui/utils/owner';
 import { FocusGuard } from "../../utils/FocusGuard.js";
-import { activeElement, contains, getTarget, isTypeableCombobox, isVirtualClick, isVirtualPointerEvent, stopEvent, getNodeAncestors, getNodeChildren, getFloatingFocusElement, getTabbableOptions, isOutsideEvent, getNextTabbable, getPreviousTabbable, isTypeableElement } from "../utils.js";
+import { activeElement, contains, getTarget, isTypeableCombobox, getFloatingFocusElement, isTypeableElement } from "../utils/element.js";
+import { isVirtualClick, isVirtualPointerEvent, stopEvent } from "../utils/event.js";
+import { tabbable, focusable, isOutsideEvent, isTabbable, getNextTabbable, getPreviousTabbable } from "../utils/tabbable.js";
+import { getNodeAncestors, getNodeChildren } from "../utils/nodes.js";
+import { isElementVisible } from "../utils/composite.js";
 import { createChangeEventDetails } from "../../utils/createBaseUIEventDetails.js";
 import { REASONS } from "../../utils/reasons.js";
 import { createAttribute } from "../utils/createAttribute.js";
@@ -25,7 +29,7 @@ import { CLICK_TRIGGER_IDENTIFIER } from "../../utils/constants.js";
 import { resolveRef } from "../../utils/resolveRef.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 function getEventType(event, lastInteractionType) {
-  const win = ownerWindow(event.target);
+  const win = ownerWindow(getTarget(event));
   if (event instanceof win.KeyboardEvent) {
     return 'keyboard';
   }
@@ -70,11 +74,10 @@ function getFirstTabbableElement(container) {
   if (!container) {
     return null;
   }
-  const tabbableOptions = getTabbableOptions();
-  if (isTabbable(container, tabbableOptions)) {
+  if (isTabbable(container)) {
     return container;
   }
-  return tabbable(container, tabbableOptions)[0] || container;
+  return tabbable(container)[0] || container;
 }
 function isFocusable(element) {
   if (!element || !element.isConnected) {
@@ -83,17 +86,19 @@ function isFocusable(element) {
   if (typeof element.checkVisibility === 'function') {
     return element.checkVisibility();
   }
-  return getComputedStyle(element).display !== 'none';
+  return isElementVisible(element);
 }
 function handleTabIndex(floatingFocusElement, orderRef) {
+  if (floatingFocusElement.hasAttribute('tabindex') && !floatingFocusElement.hasAttribute('data-tabindex')) {
+    return;
+  }
   if (!orderRef.current.includes('floating') && !floatingFocusElement.getAttribute('role')?.includes('dialog')) {
     return;
   }
-  const options = getTabbableOptions();
-  const focusableElements = focusable(floatingFocusElement, options);
+  const focusableElements = focusable(floatingFocusElement);
   const tabbableContent = focusableElements.filter(element => {
     const dataTabIndex = element.getAttribute('data-tabindex') || '';
-    return isTabbable(element, options) || element.hasAttribute('data-tabindex') && !dataTabIndex.startsWith('-');
+    return isTabbable(element) || element.hasAttribute('data-tabindex') && !dataTabIndex.startsWith('-');
   });
   const tabIndex = floatingFocusElement.getAttribute('tabindex');
   if (orderRef.current.includes('floating') || tabbableContent.length === 0) {
@@ -124,7 +129,8 @@ export function FloatingFocusManager(props) {
     nextFocusableElement,
     previousFocusableElement,
     beforeContentFocusGuardRef,
-    externalTree
+    externalTree,
+    getInsideElements
   } = props;
   const store = 'rootStore' in context ? context.rootStore : context;
   const open = store.useState('open');
@@ -148,12 +154,10 @@ export function FloatingFocusManager(props) {
   const openInteractionTypeRef = useValueAsRef(openInteractionType);
   const tree = useFloatingTree(externalTree);
   const portalContext = 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);
-  const tabbableIndexRef = React.useRef(-1);
+  const lastFocusedTabbableRef = React.useRef(null);
   const closeTypeRef = React.useRef('');
   const lastInteractionTypeRef = React.useRef('');
   const beforeGuardRef = React.useRef(null);
@@ -166,12 +170,9 @@ export function FloatingFocusManager(props) {
   const isInsidePortal = portalContext != null;
   const floatingFocusElement = getFloatingFocusElement(floating);
   const getTabbableContent = useStableCallback((container = floatingFocusElement) => {
-    return container ? tabbable(container, getTabbableOptions()) : [];
-  });
-  const getTabbableElements = useStableCallback(container => {
-    const content = getTabbableContent(container);
-    return orderRef.current.map(() => content).filter(Boolean).flat();
+    return container ? tabbable(container) : [];
   });
+  const getResolvedInsideElements = useStableCallback(() => getInsideElements?.().filter(element => element != null) ?? []);
 
   // Prevent Tab from escaping the modal when there are no tabbable elements.
   React.useEffect(() => {
@@ -187,11 +188,8 @@ export function FloatingFocusManager(props) {
       }
     }
     const doc = ownerDocument(floatingFocusElement);
-    doc.addEventListener('keydown', onKeyDown);
-    return () => {
-      doc.removeEventListener('keydown', onKeyDown);
-    };
-  }, [disabled, domReference, floatingFocusElement, modal, orderRef, isUntrappedTypeableCombobox, getTabbableContent, getTabbableElements]);
+    return addEventListener(doc, 'keydown', onKeyDown);
+  }, [disabled, domReference, floatingFocusElement, modal, orderRef, isUntrappedTypeableCombobox, getTabbableContent]);
 
   // Track pointer/keyboard interactions to disambiguate focus and outside presses.
   React.useEffect(() => {
@@ -204,7 +202,8 @@ export function FloatingFocusManager(props) {
     }
     function onPointerDown(event) {
       const target = getTarget(event);
-      const pointerTargetInside = contains(floating, target) || contains(domReference, target) || contains(portalContext?.portalNode, target);
+      const insideElements = getResolvedInsideElements();
+      const pointerTargetInside = contains(floating, target) || contains(domReference, target) || contains(portalContext?.portalNode, target) || insideElements.some(element => element === target || contains(element, target));
       pointerDownOutsideRef.current = !pointerTargetInside;
       lastInteractionTypeRef.current = event.pointerType || 'keyboard';
       if (target?.closest(`[${CLICK_TRIGGER_IDENTIFIER}]`)) {
@@ -214,17 +213,8 @@ export function FloatingFocusManager(props) {
     function onKeyDown() {
       lastInteractionTypeRef.current = 'keyboard';
     }
-    doc.addEventListener('pointerdown', onPointerDown, true);
-    doc.addEventListener('pointerup', clearPointerDownOutside, true);
-    doc.addEventListener('pointercancel', clearPointerDownOutside, true);
-    doc.addEventListener('keydown', onKeyDown, true);
-    return () => {
-      doc.removeEventListener('pointerdown', onPointerDown, true);
-      doc.removeEventListener('pointerup', clearPointerDownOutside, true);
-      doc.removeEventListener('pointercancel', clearPointerDownOutside, true);
-      doc.removeEventListener('keydown', onKeyDown, true);
-    };
-  }, [disabled, floating, domReference, floatingFocusElement, open, portalContext]);
+    return mergeCleanups(addEventListener(doc, 'pointerdown', onPointerDown, true), addEventListener(doc, 'pointerup', clearPointerDownOutside, true), addEventListener(doc, 'pointercancel', clearPointerDownOutside, true), addEventListener(doc, 'keydown', onKeyDown, true));
+  }, [disabled, floating, domReference, floatingFocusElement, open, portalContext, getResolvedInsideElements]);
 
   // Close on focus out and restore focus within the floating tree when needed.
   React.useEffect(() => {
@@ -242,10 +232,8 @@ export function FloatingFocusManager(props) {
     }
     function handleFocusIn(event) {
       const target = getTarget(event);
-      const tabbableContent = getTabbableContent();
-      const tabbableIndex = tabbableContent.indexOf(target);
-      if (tabbableIndex !== -1) {
-        tabbableIndexRef.current = tabbableIndex;
+      if (isTabbable(target)) {
+        lastFocusedTabbableRef.current = target;
       }
     }
     function handleFocusOutside(event) {
@@ -255,8 +243,9 @@ export function FloatingFocusManager(props) {
       queueMicrotask(() => {
         const nodeId = getNodeId();
         const triggers = store.context.triggerElements;
+        const insideElements = getResolvedInsideElements();
         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)));
+        const movedToUnrelatedNode = !(contains(domReference, relatedTarget) || contains(floating, relatedTarget) || contains(relatedTarget, floating) || contains(portalContext?.portalNode, relatedTarget) || insideElements.some(element => element === relatedTarget || contains(element, 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);
         }
@@ -281,9 +270,9 @@ export function FloatingFocusManager(props) {
               return;
             }
           }
-          const prevTabbableIndex = tabbableIndexRef.current;
           const tabbableContent = getTabbableContent();
-          const nodeToFocus = tabbableContent[prevTabbableIndex] || tabbableContent[tabbableContent.length - 1] || floatingFocusElement;
+          const prevTabbable = lastFocusedTabbableRef.current;
+          const nodeToFocus = (prevTabbable && tabbableContent.includes(prevTabbable) ? prevTabbable : null) || tabbableContent[tabbableContent.length - 1] || floatingFocusElement;
           if (isHTMLElement(nodeToFocus)) {
             nodeToFocus.focus();
           }
@@ -321,38 +310,11 @@ export function FloatingFocusManager(props) {
       });
     }
     const domReferenceElement = isHTMLElement(domReference) ? domReference : null;
-    const cleanups = [];
     if (!floating && !domReferenceElement) {
       return undefined;
     }
-    if (domReferenceElement) {
-      domReferenceElement.addEventListener('focusout', handleFocusOutside);
-      domReferenceElement.addEventListener('pointerdown', handlePointerDown);
-      cleanups.push(() => {
-        domReferenceElement.removeEventListener('focusout', handleFocusOutside);
-        domReferenceElement.removeEventListener('pointerdown', handlePointerDown);
-      });
-    }
-    if (floating) {
-      floating.addEventListener('focusin', handleFocusIn);
-      floating.addEventListener('focusout', handleFocusOutside);
-      if (portalContext) {
-        floating.addEventListener('focusout', markInsideReactTree, true);
-        cleanups.push(() => {
-          floating.removeEventListener('focusout', markInsideReactTree, true);
-        });
-      }
-      cleanups.push(() => {
-        floating.removeEventListener('focusin', handleFocusIn);
-        floating.removeEventListener('focusout', handleFocusOutside);
-      });
-    }
-    return () => {
-      cleanups.forEach(cleanup => {
-        cleanup();
-      });
-    };
-  }, [disabled, domReference, floating, floatingFocusElement, modal, tree, portalContext, store, closeOnFocusOut, restoreFocus, getTabbableContent, isUntrappedTypeableCombobox, getNodeId, orderRef, dataRef, blurTimeout, pointerDownTimeout, restoreFocusFrame, nextFocusableElement, previousFocusableElement]);
+    return mergeCleanups(domReferenceElement && addEventListener(domReferenceElement, 'focusout', handleFocusOutside), domReferenceElement && addEventListener(domReferenceElement, 'pointerdown', handlePointerDown), floating && addEventListener(floating, 'focusin', handleFocusIn), floating && addEventListener(floating, 'focusout', handleFocusOutside), floating && portalContext && addEventListener(floating, 'focusout', markInsideReactTree, true));
+  }, [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(() => {
@@ -364,9 +326,19 @@ 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, 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]);
+    const controlInsideElements = [floating, ...portalNodes, beforeGuardRef.current, afterGuardRef.current, portalContext?.beforeOutsideRef.current, portalContext?.afterOutsideRef.current, ...getResolvedInsideElements()];
+    const insideElements = [...controlInsideElements, rootAncestorComboboxDomReference, resolveRef(previousFocusableElement), resolveRef(nextFocusableElement), isUntrappedTypeableCombobox ? domReference : null].filter(x => x != null);
+    const ariaHiddenCleanup = markOthers(insideElements, {
+      ariaHidden: modal || isUntrappedTypeableCombobox,
+      mark: false
+    });
+    const markerInsideElements = [floating, ...portalNodes].filter(x => x != null);
+    const markerCleanup = markOthers(markerInsideElements);
+    return () => {
+      markerCleanup();
+      ariaHiddenCleanup();
+    };
+  }, [open, disabled, domReference, floating, modal, orderRef, portalContext, isUntrappedTypeableCombobox, tree, getNodeId, nextFocusableElement, previousFocusableElement, getResolvedInsideElements]);
 
   // Focus the initial element when the floating element opens.
   useIsoLayoutEffect(() => {
@@ -378,7 +350,6 @@ export function FloatingFocusManager(props) {
 
     // Wait for any layout effect state setters to execute to set `tabIndex`.
     queueMicrotask(() => {
-      const focusableElements = getTabbableElements(floatingFocusElement);
       const initialFocusValueOrFn = initialFocusRef.current;
       const resolvedInitialFocus = typeof initialFocusValueOrFn === 'function' ? initialFocusValueOrFn(openInteractionTypeRef.current || '') : initialFocusValueOrFn;
 
@@ -386,22 +357,29 @@ export function FloatingFocusManager(props) {
       if (resolvedInitialFocus === undefined || resolvedInitialFocus === false) {
         return;
       }
+      const focusAlreadyInsideFloatingEl = contains(floatingFocusElement, previouslyFocusedElement);
+      if (focusAlreadyInsideFloatingEl) {
+        return;
+      }
+      let focusableElements = null;
+      const getDefaultFocusElement = () => {
+        if (focusableElements == null) {
+          focusableElements = getTabbableContent(floatingFocusElement);
+        }
+        return focusableElements[0] || floatingFocusElement;
+      };
       let elToFocus;
       if (resolvedInitialFocus === true || resolvedInitialFocus === null) {
-        elToFocus = focusableElements[0] || floatingFocusElement;
+        elToFocus = getDefaultFocusElement();
       } else {
         elToFocus = resolveRef(resolvedInitialFocus);
       }
-      elToFocus = elToFocus || focusableElements[0] || floatingFocusElement;
-      const focusAlreadyInsideFloatingEl = contains(floatingFocusElement, previouslyFocusedElement);
-      if (focusAlreadyInsideFloatingEl) {
-        return;
-      }
+      elToFocus = elToFocus || getDefaultFocusElement();
       enqueueFocus(elToFocus, {
         preventScroll: elToFocus === floatingFocusElement
       });
     });
-  }, [disabled, open, floatingFocusElement, ignoreInitialFocus, getTabbableElements, initialFocusRef, openInteractionTypeRef]);
+  }, [disabled, open, floatingFocusElement, ignoreInitialFocus, getTabbableContent, initialFocusRef, openInteractionTypeRef]);
 
   // Track return focus targets and restore focus on unmount/close.
   useIsoLayoutEffect(() => {
@@ -430,7 +408,7 @@ export function FloatingFocusManager(props) {
         preventReturnFocusRef.current = false;
       } else {
         let isPreventScrollSupported = false;
-        document.createElement('div').focus({
+        ownerDocument(floatingFocusElement).createElement('div').focus({
           get preventScroll() {
             isPreventScrollSupported = true;
             return false;
@@ -444,13 +422,6 @@ export 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);
-    if (isInsidePortal && domReference) {
-      domReference.insertAdjacentElement('afterend', fallbackEl);
-    }
     function getReturnElement() {
       const returnFocusValueOrFn = returnFocusRef.current;
       let resolvedReturnFocusValue = typeof returnFocusValueOrFn === 'function' ? returnFocusValueOrFn(closeTypeRef.current) : returnFocusValueOrFn;
@@ -464,23 +435,25 @@ export 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 resolveRef(resolvedReturnFocusValue) || fallback;
+      const fallback = domReference || getPreviouslyFocusedElement();
+      return resolveRef(resolvedReturnFocusValue) || fallback || null;
     }
     return () => {
       events.off('openchange', onOpenChangeLocal);
       const activeEl = activeElement(doc);
-      const isFocusInsideFloatingTree = contains(floating, activeEl) || tree && getNodeChildren(tree.nodesRef.current, getNodeId(), false).some(node => contains(node.context?.elements.floating, activeEl));
+      const insideElements = getResolvedInsideElements();
+      const isFocusInsideFloatingTree = contains(floating, activeEl) || insideElements.some(element => element === activeEl || contains(element, activeEl)) || tree && getNodeChildren(tree.nodesRef.current, getNodeId(), false).some(node => contains(node.context?.elements.floating, activeEl));
+
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+      const returnFocusValueOrFn = returnFocusRef.current;
       const returnElement = getReturnElement();
       queueMicrotask(() => {
         // This is `returnElement`, if it's tabbable, or its first tabbable child.
         const tabbableReturnElement = getFirstTabbableElement(returnElement);
-        const hasExplicitReturnFocus = typeof returnFocusRef.current !== 'boolean';
-        if (
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-        returnFocusRef.current && !preventReturnFocusRef.current && isHTMLElement(tabbableReturnElement) && (
+        const hasExplicitReturnFocus = typeof returnFocusValueOrFn !== 'boolean';
+        if (returnFocusValueOrFn && !preventReturnFocusRef.current && isHTMLElement(tabbableReturnElement) && (
         // If the focus moved somewhere else after mount, avoid returning focus
         // since it likely entered a different element which should be
         // respected: https://github.com/floating-ui/floating-ui/issues/2607
@@ -489,11 +462,10 @@ export function FloatingFocusManager(props) {
             preventScroll: true
           });
         }
-        fallbackEl.remove();
         preventReturnFocusRef.current = false;
       });
     };
-  }, [disabled, floating, floatingFocusElement, returnFocusRef, dataRef, events, tree, isInsidePortal, domReference, getNodeId]);
+  }, [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.
@@ -545,7 +517,7 @@ export function FloatingFocusManager(props) {
       ref: mergedBeforeGuardRef,
       onFocus: event => {
         if (modal) {
-          const els = getTabbableElements();
+          const els = getTabbableContent();
           enqueueFocus(els[els.length - 1]);
         } else if (portalContext?.portalNode) {
           preventReturnFocusRef.current = false;
@@ -562,7 +534,7 @@ export function FloatingFocusManager(props) {
       ref: mergedAfterGuardRef,
       onFocus: event => {
         if (modal) {
-          enqueueFocus(getTabbableElements()[0]);
+          enqueueFocus(getTabbableContent()[0]);
         } else if (portalContext?.portalNode) {
           if (closeOnFocusOut) {
             preventReturnFocusRef.current = true;

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

@@ -1,5 +1,5 @@
 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;
@@ -21,8 +21,8 @@ export declare const usePortalContext: () => {
 } | null;
 export interface UseFloatingPortalNodeProps {
   ref?: React.Ref<HTMLDivElement> | undefined;
-  container?: (HTMLElement | ShadowRoot | null | React.RefObject<HTMLElement | ShadowRoot | null>) | undefined;
-  componentProps?: useRenderElement.ComponentProps<any> | undefined;
+  container?: HTMLElement | ShadowRoot | null | React.RefObject<HTMLElement | ShadowRoot | null> | undefined;
+  componentProps?: UseRenderElementComponentProps<any> | undefined;
   elementProps?: React.HTMLAttributes<HTMLDivElement> | undefined;
 }
 export interface UseFloatingPortalNodeResult {
@@ -42,8 +42,10 @@ export declare function useFloatingPortalNode(props?: UseFloatingPortalNodeProps
 export declare const FloatingPortal: React.ForwardRefExoticComponent<Omit<FloatingPortal.Props<any> & {
   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.
      */

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

@@ -3,11 +3,13 @@
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
 import { isNode } from '@floating-ui/utils/dom';
+import { addEventListener } from '@base-ui/utils/addEventListener';
+import { mergeCleanups } from '@base-ui/utils/mergeCleanups';
 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 { enableFocusInside, disableFocusInside, getPreviousTabbable, getNextTabbable, isOutsideEvent } from "../utils/tabbable.js";
 import { createChangeEventDetails } from "../../utils/createBaseUIEventDetails.js";
 import { REASONS } from "../../utils/reasons.js";
 import { createAttribute } from "../utils/createAttribute.js";
@@ -102,6 +104,7 @@ export const FloatingPortal = /*#__PURE__*/React.forwardRef(function FloatingPor
     className,
     render,
     renderGuards,
+    style,
     ...elementProps
   } = componentProps;
   const {
@@ -118,6 +121,7 @@ export const FloatingPortal = /*#__PURE__*/React.forwardRef(function FloatingPor
   const beforeInsideRef = React.useRef(null);
   const afterInsideRef = React.useRef(null);
   const [focusManagerState, setFocusManagerState] = React.useState(null);
+  const focusInsideDisabledRef = React.useRef(false);
   const modal = focusManagerState?.modal;
   const open = focusManagerState?.open;
   const shouldRenderGuards = typeof renderGuards === 'boolean' ? renderGuards : !!focusManagerState && !focusManagerState.modal && focusManagerState.open && !!portalNode;
@@ -133,26 +137,28 @@ export const FloatingPortal = /*#__PURE__*/React.forwardRef(function FloatingPor
     // element outside or using the mouse.
     function onFocus(event) {
       if (portalNode && event.relatedTarget && isOutsideEvent(event)) {
-        const focusing = event.type === 'focusin';
-        const manageFocus = focusing ? enableFocusInside : disableFocusInside;
-        manageFocus(portalNode);
+        if (event.type === 'focusin') {
+          if (focusInsideDisabledRef.current) {
+            enableFocusInside(portalNode);
+            focusInsideDisabledRef.current = false;
+          }
+        } else {
+          disableFocusInside(portalNode);
+          focusInsideDisabledRef.current = true;
+        }
       }
     }
 
     // Listen to the event on the capture phase so they run before the focus
     // trap elements onFocus prop is called.
-    portalNode.addEventListener('focusin', onFocus, true);
-    portalNode.addEventListener('focusout', onFocus, true);
-    return () => {
-      portalNode.removeEventListener('focusin', onFocus, true);
-      portalNode.removeEventListener('focusout', onFocus, true);
-    };
+    return mergeCleanups(addEventListener(portalNode, 'focusin', onFocus, true), addEventListener(portalNode, 'focusout', onFocus, true));
   }, [portalNode, modal]);
   React.useEffect(() => {
-    if (!portalNode || open) {
+    if (!portalNode || open !== false) {
       return;
     }
     enableFocusInside(portalNode);
+    focusInsideDisabledRef.current = false;
   }, [open, portalNode]);
   const portalContextValue = React.useMemo(() => ({
     beforeOutsideRef,