@base-ui/react 1.2.0 → 1.3.0

package/esm/field/label/FieldLabel.js

@@ -3,16 +3,11 @@
 import * as React from 'react';
 import { error } from '@base-ui/utils/error';
 import { SafeReact } from '@base-ui/utils/safeReact';
-import { isHTMLElement } from '@floating-ui/utils/dom';
-import { useIsoLayoutEffect } from '@base-ui/utils/useIsoLayoutEffect';
-import { ownerDocument } from '@base-ui/utils/owner';
-import { useStableCallback } from '@base-ui/utils/useStableCallback';
-import { getTarget } from "../../floating-ui-react/utils.js";
 import { useFieldRootContext } from "../root/FieldRootContext.js";
-import { useLabelableContext } from "../../labelable-provider/LabelableContext.js";
 import { fieldValidityMapping } from "../utils/constants.js";
-import { useBaseUiId } from "../../utils/useBaseUiId.js";
 import { useRenderElement } from "../../utils/useRenderElement.js";
+import { useLabelableContext } from "../../labelable-provider/LabelableContext.js";
+import { useLabel } from "../../labelable-provider/useLabel.js";
 
 /**
  * An accessible label that is automatically associated with the field control.
@@ -30,34 +25,12 @@ export const FieldLabel = /*#__PURE__*/React.forwardRef(function FieldLabel(comp
   } = componentProps;
   const fieldRootContext = useFieldRootContext(false);
   const {
-    controlId,
-    setLabelId,
     labelId
   } = useLabelableContext();
-  const id = useBaseUiId(idProp);
   const labelRef = React.useRef(null);
-  const handleInteraction = useStableCallback(event => {
-    const target = getTarget(event.nativeEvent);
-    if (target?.closest('button,input,select,textarea')) {
-      return;
-    }
-
-    // Prevent text selection when double clicking label.
-    if (!event.defaultPrevented && event.detail > 1) {
-      event.preventDefault();
-    }
-    if (nativeLabel || !controlId) {
-      return;
-    }
-    const controlElement = ownerDocument(event.currentTarget).getElementById(controlId);
-    if (isHTMLElement(controlElement)) {
-      controlElement.focus({
-        // Available from Chrome 144+ (January 2026).
-        // Safari and Firefox already support it.
-        // @ts-expect-error not available in types yet
-        focusVisible: true
-      });
-    }
+  const labelProps = useLabel({
+    id: labelId ?? idProp,
+    native: nativeLabel
   });
   if (process.env.NODE_ENV !== 'production') {
     // eslint-disable-next-line react-hooks/rules-of-hooks
@@ -79,28 +52,10 @@ export const FieldLabel = /*#__PURE__*/React.forwardRef(function FieldLabel(comp
       }
     }, [nativeLabel]);
   }
-  useIsoLayoutEffect(() => {
-    if (id) {
-      setLabelId(id);
-    }
-    return () => {
-      setLabelId(undefined);
-    };
-  }, [id, setLabelId]);
   const element = useRenderElement('label', componentProps, {
     ref: [forwardedRef, labelRef],
     state: fieldRootContext.state,
-    props: [{
-      id: labelId
-    }, nativeLabel ? {
-      htmlFor: controlId ?? undefined,
-      onMouseDown: handleInteraction
-    } : {
-      onClick: handleInteraction,
-      onPointerDown(event) {
-        event.preventDefault();
-      }
-    }, elementProps],
+    props: [labelProps, elementProps],
     stateAttributesMapping: fieldValidityMapping
   });
   return element;

package/esm/field/root/FieldRoot.d.ts

@@ -31,15 +31,32 @@ export interface FieldRootActions {
   validate: () => void;
 }
 export interface FieldRootState {
-  /** Whether the component should ignore user interaction. */
+  /**
+   * Whether the component should ignore user interaction.
+   */
   disabled: boolean;
+  /**
+   * Whether the field has been touched.
+   */
   touched: boolean;
+  /**
+   * Whether the field value has changed from its initial value.
+   */
   dirty: boolean;
+  /**
+   * Whether the field is valid.
+   */
   valid: boolean | null;
+  /**
+   * Whether the field has a value.
+   */
   filled: boolean;
+  /**
+   * Whether the field is focused.
+   */
   focused: boolean;
 }
-export interface FieldRootProps extends BaseUIComponentProps<'div', FieldRoot.State> {
+export interface FieldRootProps extends BaseUIComponentProps<'div', FieldRootState> {
   /**
    * Whether the component should ignore user interaction.
    * Takes precedence over the `disabled` prop on the `<Field.Control>` component.

package/esm/field/root/FieldRoot.js

@@ -62,7 +62,8 @@ const FieldRootInner = /*#__PURE__*/React.forwardRef(function FieldRootInner(com
     setTouchedUnwrapped(value);
   });
   const shouldValidateOnChange = useStableCallback(() => validationMode === 'onChange' || validationMode === 'onSubmit' && submitAttemptedRef.current);
-  const invalid = Boolean(invalidProp || name && {}.hasOwnProperty.call(errors, name) && errors[name] !== undefined);
+  const hasFormError = !!name && Object.hasOwn(errors, name) && errors[name] !== undefined;
+  const invalid = invalidProp === true || hasFormError;
   const [validityData, setValidityData] = React.useState({
     state: DEFAULT_VALIDITY_STATE,
     error: '',

package/esm/field/root/FieldRootContext.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { FieldRoot, FieldValidityData } from "./FieldRoot.js";
+import type { FieldValidityData, FieldRootState } from "./FieldRoot.js";
 import type { Form } from "../../form/index.js";
 import type { UseFieldValidationReturnValue } from "./useFieldValidation.js";
 export interface FieldRootContext {
@@ -20,7 +20,7 @@ export interface FieldRootContext {
   validationMode: Form.ValidationMode;
   validationDebounceTime: number;
   shouldValidateOnChange: () => boolean;
-  state: FieldRoot.State;
+  state: FieldRootState;
   markedDirtyRef: React.RefObject<boolean>;
   validation: UseFieldValidationReturnValue;
 }

package/esm/field/root/FieldRootContext.js

@@ -3,7 +3,7 @@
 import _formatErrorMessage from "@base-ui/utils/formatErrorMessage";
 import * as React from 'react';
 import { NOOP } from "../../utils/noop.js";
-import { DEFAULT_VALIDITY_STATE } from "../utils/constants.js";
+import { DEFAULT_FIELD_ROOT_STATE, DEFAULT_FIELD_STATE_ATTRIBUTES, DEFAULT_VALIDITY_STATE } from "../utils/constants.js";
 import { EMPTY_OBJECT } from "../../utils/constants.js";
 export const FieldRootContext = /*#__PURE__*/React.createContext({
   invalid: undefined,
@@ -17,26 +17,19 @@ export const FieldRootContext = /*#__PURE__*/React.createContext({
   },
   setValidityData: NOOP,
   disabled: undefined,
-  touched: false,
+  touched: DEFAULT_FIELD_STATE_ATTRIBUTES.touched,
   setTouched: NOOP,
-  dirty: false,
+  dirty: DEFAULT_FIELD_STATE_ATTRIBUTES.dirty,
   setDirty: NOOP,
-  filled: false,
+  filled: DEFAULT_FIELD_STATE_ATTRIBUTES.filled,
   setFilled: NOOP,
-  focused: false,
+  focused: DEFAULT_FIELD_STATE_ATTRIBUTES.focused,
   setFocused: NOOP,
   validate: () => null,
   validationMode: 'onSubmit',
   validationDebounceTime: 0,
   shouldValidateOnChange: () => false,
-  state: {
-    disabled: false,
-    valid: null,
-    touched: false,
-    dirty: false,
-    filled: false,
-    focused: false
-  },
+  state: DEFAULT_FIELD_ROOT_STATE,
   markedDirtyRef: {
     current: false
   },

package/esm/field/root/useFieldValidation.js

@@ -191,6 +191,7 @@ export function useFieldValidation(params) {
       if (currentFieldData) {
         formRef.current.fields.set(controlId, {
           ...currentFieldData,
+          // Keep Form-level errors part of overall field validity for submit blocking/focus logic.
           ...getCombinedFieldValidityData(nextValidityData, invalid)
         });
       }
@@ -211,9 +212,9 @@ export function useFieldValidation(params) {
         commit(event.currentTarget.value, true);
         return;
       }
-      if (invalid) {
-        return;
-      }
+
+      // When validating on change, run client-side validation even if
+      // externally invalid
       const element = event.currentTarget;
       if (element.value === '') {
         // Ignore the debounce time for empty values.
@@ -229,7 +230,7 @@ export function useFieldValidation(params) {
         commit(element.value);
       }
     }
-  }, getValidationProps(externalProps)), [getValidationProps, clearErrors, name, timeout, commit, invalid, validationDebounceTime, shouldValidateOnChange]);
+  }, getValidationProps(externalProps)), [getValidationProps, clearErrors, name, timeout, commit, validationDebounceTime, shouldValidateOnChange]);
   return React.useMemo(() => ({
     getValidationProps,
     getInputValidationProps,

package/esm/field/utils/constants.d.ts

@@ -1,3 +1,4 @@
+import type { FieldRootState } from "../root/FieldRoot.js";
 export declare const DEFAULT_VALIDITY_STATE: {
   badInput: boolean;
   customError: boolean;
@@ -11,6 +12,8 @@ export declare const DEFAULT_VALIDITY_STATE: {
   valid: null;
   valueMissing: boolean;
 };
+export declare const DEFAULT_FIELD_STATE_ATTRIBUTES: Pick<FieldRootState, 'valid' | 'touched' | 'dirty' | 'filled' | 'focused'>;
+export declare const DEFAULT_FIELD_ROOT_STATE: FieldRootState;
 export declare const fieldValidityMapping: {
   valid(value: boolean | null): Record<string, string> | null;
 };

package/esm/field/utils/constants.js

@@ -12,6 +12,17 @@ export const DEFAULT_VALIDITY_STATE = {
   valid: null,
   valueMissing: false
 };
+export const DEFAULT_FIELD_STATE_ATTRIBUTES = {
+  valid: null,
+  touched: false,
+  dirty: false,
+  filled: false,
+  focused: false
+};
+export const DEFAULT_FIELD_ROOT_STATE = {
+  disabled: false,
+  ...DEFAULT_FIELD_STATE_ATTRIBUTES
+};
 export const fieldValidityMapping = {
   valid(value) {
     if (value === null) {

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

@@ -9,7 +9,13 @@ import { type TransitionStatus } from "../../utils/useTransitionStatus.js";
  */
 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/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/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/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

@@ -2,18 +2,17 @@
 
 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 { 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, isVirtualClick, isVirtualPointerEvent, stopEvent, getNodeAncestors, getNodeChildren, getFloatingFocusElement, getTabbableOptions, isOutsideEvent, getNextTabbable, getPreviousTabbable, isElementVisible, isTypeableElement } from "../utils.js";
 import { createChangeEventDetails } from "../../utils/createBaseUIEventDetails.js";
 import { REASONS } from "../../utils/reasons.js";
 import { createAttribute } from "../utils/createAttribute.js";
@@ -83,7 +82,7 @@ function isFocusable(element) {
   if (typeof element.checkVisibility === 'function') {
     return element.checkVisibility();
   }
-  return getComputedStyle(element).display !== 'none';
+  return isElementVisible(element);
 }
 function handleTabIndex(floatingFocusElement, orderRef) {
   if (!orderRef.current.includes('floating') && !floatingFocusElement.getAttribute('role')?.includes('dialog')) {
@@ -124,7 +123,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,8 +148,6 @@ 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);
@@ -168,6 +166,7 @@ export function FloatingFocusManager(props) {
   const getTabbableContent = useStableCallback((container = floatingFocusElement) => {
     return container ? tabbable(container, getTabbableOptions()) : [];
   });
+  const getResolvedInsideElements = useStableCallback(() => getInsideElements?.().filter(element => element != null) ?? []);
   const getTabbableElements = useStableCallback(container => {
     const content = getTabbableContent(container);
     return orderRef.current.map(() => content).filter(Boolean).flat();
@@ -204,7 +203,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}]`)) {
@@ -224,7 +224,7 @@ export 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(() => {
@@ -255,8 +255,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);
         }
@@ -352,7 +353,7 @@ export 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(() => {
@@ -364,9 +365,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(() => {
@@ -444,13 +455,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,15 +468,16 @@ 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));
       const returnElement = getReturnElement();
       queueMicrotask(() => {
         // This is `returnElement`, if it's tabbable, or its first tabbable child.
@@ -489,11 +494,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.

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/hooks/useClick.d.ts

@@ -12,7 +12,7 @@ export interface UseClickProps {
    * Keyboard clicks work as normal.
    * @default 'click'
    */
-  event?: ('click' | 'mousedown' | 'mousedown-only') | undefined;
+  event?: 'click' | 'mousedown' | 'mousedown-only' | undefined;
   /**
    * Whether to toggle the open state with repeated clicks.
    * @default true
@@ -40,7 +40,7 @@ export interface UseClickProps {
    * The reason for the click.
    * @default REASONS.triggerPress
    */
-  reason?: (typeof REASONS.triggerPress | typeof REASONS.inputPress) | undefined;
+  reason?: typeof REASONS.triggerPress | typeof REASONS.inputPress | undefined;
 }
 /**
  * Opens or closes the floating element when clicking the reference element.

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

@@ -12,7 +12,7 @@ export interface UseClientPointProps {
    * floating element is also interactive.
    * @default 'both'
    */
-  axis?: ('x' | 'y' | 'both') | undefined;
+  axis?: 'x' | 'y' | 'both' | undefined;
 }
 /**
  * Positions the floating element relative to a client point (in the viewport),

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

@@ -24,9 +24,11 @@ export interface UseDismissProps {
    * Whether to dismiss the floating element upon pressing the reference
    * element. You likely want to ensure the `move` option in the `useHover()`
    * Hook has been disabled when this is in use.
+   *
+   * A lazy getter invoked when handling reference press events.
    * @default false
    */
-  referencePress?: boolean | undefined;
+  referencePress?: (() => boolean) | undefined;
   /**
    * The type of event to use to determine a "press".
    * - `down` is `pointerdown` on mouse input, but special iOS-like touch handling on touch input.
@@ -47,33 +49,27 @@ export interface UseDismissProps {
    * ```
    * @default true
    */
-  outsidePress?: (boolean | ((event: MouseEvent | TouchEvent) => boolean)) | undefined;
+  outsidePress?: boolean | ((event: MouseEvent | TouchEvent) => boolean) | undefined;
   /**
    * The type of event to use to determine an outside "press".
    * - `intentional` requires the user to click outside intentionally, firing on `pointerup` for mouse, and requiring minimal `touchmove`s for touch.
    * - `sloppy` fires on `pointerdown` for mouse, while for touch it fires on `touchend` (within 1 second) or while scrolling away after `touchstart`.
    */
-  outsidePressEvent?: (PressType | {
+  outsidePressEvent?: PressType | {
     mouse: PressType;
     touch: PressType;
   } | (() => PressType | {
     mouse: PressType;
     touch: PressType;
-  })) | undefined;
-  /**
-   * Whether to dismiss the floating element upon scrolling an overflow
-   * ancestor.
-   * @default false
-   */
-  ancestorScroll?: boolean | undefined;
+  }) | undefined;
   /**
    * Determines whether event listeners bubble upwards through a tree of
    * floating elements.
    */
-  bubbles?: (boolean | {
+  bubbles?: boolean | {
     escapeKey?: boolean | undefined;
     outsidePress?: boolean | undefined;
-  }) | undefined;
+  } | undefined;
   /**
    * External FlatingTree to use when the one provided by context can't be used.
    */