@base-ui/react 1.0.0 → 1.1.0

package/esm/utils/usePopupAutoResize.js

@@ -2,6 +2,7 @@ import * as React from 'react';
 import { useAnimationFrame } from '@base-ui/utils/useAnimationFrame';
 import { useIsoLayoutEffect } from '@base-ui/utils/useIsoLayoutEffect';
 import { useStableCallback } from '@base-ui/utils/useStableCallback';
+import { NOOP } from '@base-ui/utils/empty';
 import { useAnimationsFinished } from "./useAnimationsFinished.js";
 import { getCssDimensions } from "./getCssDimensions.js";
 import { EMPTY_OBJECT } from "./constants.js";
@@ -23,10 +24,12 @@ export function usePopupAutoResize(parameters) {
     side,
     direction
   } = parameters;
-  const isInitialRender = React.useRef(true);
   const runOnceAnimationsFinish = useAnimationsFinished(popupElement, true, false);
   const animationFrame = useAnimationFrame();
-  const previousDimensionsRef = React.useRef(null);
+  const committedDimensionsRef = React.useRef(null);
+  const liveDimensionsRef = React.useRef(null);
+  const isInitialRenderRef = React.useRef(true);
+  const restoreAnchoringStylesRef = React.useRef(NOOP);
   const onMeasureLayout = useStableCallback(onMeasureLayoutParam);
   const onMeasureLayoutComplete = useStableCallback(onMeasureLayoutCompleteParam);
   const anchoringStyles = React.useMemo(() => {
@@ -49,80 +52,90 @@ export function usePopupAutoResize(parameters) {
   useIsoLayoutEffect(() => {
     // Reset the state when the popup is closed.
     if (!mounted || !enabled() || !supportsResizeObserver) {
-      isInitialRender.current = true;
-      previousDimensionsRef.current = null;
+      restoreAnchoringStylesRef.current = NOOP;
+      isInitialRenderRef.current = true;
+      committedDimensionsRef.current = null;
+      liveDimensionsRef.current = null;
       return undefined;
     }
     if (!popupElement || !positionerElement) {
       return undefined;
     }
-    Object.entries(anchoringStyles).forEach(([key, value]) => {
-      popupElement.style.setProperty(key, value);
-    });
+    restoreAnchoringStylesRef.current = applyElementStyles(popupElement, anchoringStyles);
     const observer = new ResizeObserver(entries => {
       const entry = entries[0];
       if (entry) {
-        if (previousDimensionsRef.current === null) {
-          previousDimensionsRef.current = {
-            width: Math.ceil(entry.borderBoxSize[0].inlineSize),
-            height: Math.ceil(entry.borderBoxSize[0].blockSize)
-          };
-        } else {
-          previousDimensionsRef.current.width = Math.ceil(entry.borderBoxSize[0].inlineSize);
-          previousDimensionsRef.current.height = Math.ceil(entry.borderBoxSize[0].blockSize);
-        }
+        liveDimensionsRef.current = {
+          width: Math.ceil(entry.borderBoxSize[0].inlineSize),
+          height: Math.ceil(entry.borderBoxSize[0].blockSize)
+        };
       }
     });
     observer.observe(popupElement);
 
     // Measure the rendered size to enable transitions:
-    popupElement.style.setProperty('--popup-width', 'auto');
-    popupElement.style.setProperty('--popup-height', 'auto');
+    setPopupCssSize(popupElement, 'auto');
     const restorePopupPosition = overrideElementStyle(popupElement, 'position', 'static');
     const restorePopupTransform = overrideElementStyle(popupElement, 'transform', 'none');
     const restorePopupScale = overrideElementStyle(popupElement, 'scale', '1');
-    const restoreAvailableWidth = overrideElementStyle(positionerElement, '--available-width', 'max-content');
-    const restoreAvailableHeight = overrideElementStyle(positionerElement, '--available-height', 'max-content');
+    const restorePositionerAvailableSize = applyElementStyles(positionerElement, {
+      '--available-width': 'max-content',
+      '--available-height': 'max-content'
+    });
+    function restoreMeasurementOverrides() {
+      restorePopupPosition();
+      restorePopupTransform();
+      restorePositionerAvailableSize();
+    }
+    function restoreMeasurementOverridesIncludingScale() {
+      restoreMeasurementOverrides();
+      restorePopupScale();
+    }
     onMeasureLayout?.();
 
     // Initial render (for each time the popup opens).
-    if (isInitialRender.current || previousDimensionsRef.current === null) {
-      positionerElement.style.setProperty('--positioner-width', 'max-content');
-      positionerElement.style.setProperty('--positioner-height', 'max-content');
+    if (isInitialRenderRef.current || committedDimensionsRef.current === null) {
+      setPositionerCssSize(positionerElement, 'max-content');
       const dimensions = getCssDimensions(popupElement);
-      positionerElement.style.setProperty('--positioner-width', `${dimensions.width}px`);
-      positionerElement.style.setProperty('--positioner-height', `${dimensions.height}px`);
-      restorePopupPosition();
-      restorePopupTransform();
-      restorePopupScale();
-      restoreAvailableWidth();
-      restoreAvailableHeight();
+      committedDimensionsRef.current = dimensions;
+      setPositionerCssSize(positionerElement, dimensions);
+      restoreMeasurementOverridesIncludingScale();
       onMeasureLayoutComplete?.(null, dimensions);
-      isInitialRender.current = false;
+      isInitialRenderRef.current = false;
       return () => {
         observer.disconnect();
+        restoreAnchoringStylesRef.current();
+        restoreAnchoringStylesRef.current = NOOP;
       };
     }
 
     // Subsequent renders while open (when `content` changes).
-    popupElement.style.setProperty('--popup-width', 'auto');
-    popupElement.style.setProperty('--popup-height', 'auto');
-    positionerElement.style.setProperty('--positioner-width', 'max-content');
-    positionerElement.style.setProperty('--positioner-height', 'max-content');
+    setPopupCssSize(popupElement, 'auto');
+    setPositionerCssSize(positionerElement, 'max-content');
+    const previousDimensions = committedDimensionsRef.current ?? liveDimensionsRef.current;
     const newDimensions = getCssDimensions(popupElement);
-    popupElement.style.setProperty('--popup-width', `${previousDimensionsRef.current.width}px`);
-    popupElement.style.setProperty('--popup-height', `${previousDimensionsRef.current.height}px`);
-    restorePopupPosition();
-    restorePopupTransform();
-    restoreAvailableWidth();
-    restoreAvailableHeight();
-    onMeasureLayoutComplete?.(previousDimensionsRef.current, newDimensions);
-    positionerElement.style.setProperty('--positioner-width', `${newDimensions.width}px`);
-    positionerElement.style.setProperty('--positioner-height', `${newDimensions.height}px`);
+
+    // Commit immediately so future content changes have a stable previous size, even if
+    // ResizeObserver runs after this point.
+    committedDimensionsRef.current = newDimensions;
+    if (!previousDimensions) {
+      setPositionerCssSize(positionerElement, newDimensions);
+      restoreMeasurementOverridesIncludingScale();
+      onMeasureLayoutComplete?.(null, newDimensions);
+      return () => {
+        observer.disconnect();
+        animationFrame.cancel();
+        restoreAnchoringStylesRef.current();
+        restoreAnchoringStylesRef.current = NOOP;
+      };
+    }
+    setPopupCssSize(popupElement, previousDimensions);
+    restoreMeasurementOverrides();
+    onMeasureLayoutComplete?.(previousDimensions, newDimensions);
+    setPositionerCssSize(positionerElement, newDimensions);
     const abortController = new AbortController();
     animationFrame.request(() => {
-      popupElement.style.setProperty('--popup-width', `${newDimensions.width}px`);
-      popupElement.style.setProperty('--popup-height', `${newDimensions.height}px`);
+      setPopupCssSize(popupElement, newDimensions);
       runOnceAnimationsFinish(() => {
         popupElement.style.setProperty('--popup-width', 'auto');
         popupElement.style.setProperty('--popup-height', 'auto');
@@ -132,6 +145,8 @@ export function usePopupAutoResize(parameters) {
       observer.disconnect();
       abortController.abort();
       animationFrame.cancel();
+      restoreAnchoringStylesRef.current();
+      restoreAnchoringStylesRef.current = NOOP;
     };
   }, [content, popupElement, positionerElement, runOnceAnimationsFinish, animationFrame, enabled, mounted, onMeasureLayout, onMeasureLayoutComplete, anchoringStyles]);
 }
@@ -141,4 +156,25 @@ function overrideElementStyle(element, property, value) {
   return () => {
     element.style.setProperty(property, originalValue);
   };
+}
+function applyElementStyles(element, styles) {
+  const restorers = [];
+  for (const [key, value] of Object.entries(styles)) {
+    restorers.push(overrideElementStyle(element, key, value));
+  }
+  return restorers.length ? () => {
+    restorers.forEach(restore => restore());
+  } : NOOP;
+}
+function setPopupCssSize(popupElement, size) {
+  const width = size === 'auto' ? 'auto' : `${size.width}px`;
+  const height = size === 'auto' ? 'auto' : `${size.height}px`;
+  popupElement.style.setProperty('--popup-width', width);
+  popupElement.style.setProperty('--popup-height', height);
+}
+function setPositionerCssSize(positionerElement, size) {
+  const width = size === 'max-content' ? 'max-content' : `${size.width}px`;
+  const height = size === 'max-content' ? 'max-content' : `${size.height}px`;
+  positionerElement.style.setProperty('--positioner-width', width);
+  positionerElement.style.setProperty('--positioner-height', height);
 }

package/field/control/FieldControl.d.ts

@@ -13,7 +13,7 @@ import type { BaseUIChangeEventDetails } from "../../utils/createBaseUIEventDeta
  *
  * Documentation: [Base UI Field](https://base-ui.com/react/components/field)
  */
-export declare const FieldControl: React.ForwardRefExoticComponent<FieldControlProps & React.RefAttributes<HTMLInputElement>>;
+export declare const FieldControl: React.ForwardRefExoticComponent<Omit<FieldControlProps, "ref"> & React.RefAttributes<HTMLInputElement>>;
 export type FieldControlState = FieldRoot.State;
 export interface FieldControlProps extends BaseUIComponentProps<'input', FieldControl.State> {
   /**

package/field/description/FieldDescription.d.ts

@@ -7,7 +7,7 @@ import type { BaseUIComponentProps } from "../../utils/types.js";
  *
  * Documentation: [Base UI Field](https://base-ui.com/react/components/field)
  */
-export declare const FieldDescription: React.ForwardRefExoticComponent<FieldDescriptionProps & React.RefAttributes<HTMLParagraphElement>>;
+export declare const FieldDescription: React.ForwardRefExoticComponent<Omit<FieldDescriptionProps, "ref"> & React.RefAttributes<HTMLParagraphElement>>;
 export type FieldDescriptionState = FieldRoot.State;
 export interface FieldDescriptionProps extends BaseUIComponentProps<'p', FieldDescription.State> {}
 export declare namespace FieldDescription {

package/field/error/FieldError.d.ts

@@ -7,7 +7,7 @@ import type { BaseUIComponentProps } from "../../utils/types.js";
  *
  * Documentation: [Base UI Field](https://base-ui.com/react/components/field)
  */
-export declare const FieldError: React.ForwardRefExoticComponent<FieldErrorProps & React.RefAttributes<HTMLDivElement>>;
+export declare const FieldError: React.ForwardRefExoticComponent<Omit<FieldErrorProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export type FieldErrorState = FieldRoot.State;
 export interface FieldErrorProps extends BaseUIComponentProps<'div', FieldError.State> {
   /**

package/field/index.d.ts

@@ -4,4 +4,5 @@ export type * from "./label/FieldLabel.js";
 export type * from "./description/FieldDescription.js";
 export type * from "./error/FieldError.js";
 export type * from "./control/FieldControl.js";
-export type * from "./validity/FieldValidity.js";
+export type * from "./validity/FieldValidity.js";
+export type * from "./item/FieldItem.js";

package/field/item/FieldItem.d.ts

@@ -7,7 +7,7 @@ import type { BaseUIComponentProps } from "../../utils/types.js";
  *
  * Documentation: [Base UI Field](https://base-ui.com/react/components/field)
  */
-export declare const FieldItem: React.ForwardRefExoticComponent<FieldItemProps & React.RefAttributes<HTMLDivElement>>;
+export declare const FieldItem: React.ForwardRefExoticComponent<Omit<FieldItemProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export interface FieldItemProps extends BaseUIComponentProps<'div', FieldItem.State> {
   /**
    * Whether the wrapped control should ignore user interaction.

package/field/label/FieldLabel.d.ts

@@ -7,9 +7,18 @@ import type { BaseUIComponentProps } from "../../utils/types.js";
  *
  * Documentation: [Base UI Field](https://base-ui.com/react/components/field)
  */
-export declare const FieldLabel: React.ForwardRefExoticComponent<FieldLabelProps & React.RefAttributes<any>>;
+export declare const FieldLabel: React.ForwardRefExoticComponent<Omit<FieldLabelProps, "ref"> & React.RefAttributes<HTMLElement>>;
 export type FieldLabelState = FieldRoot.State;
-export interface FieldLabelProps extends BaseUIComponentProps<'label', FieldLabel.State> {}
+export interface FieldLabelProps extends BaseUIComponentProps<'label', FieldLabel.State> {
+  /**
+   * Whether the component renders a native `<label>` element when replacing it via the `render` prop.
+   * Set to `false` if the rendered element is not a label (e.g. `<div>`).
+   *
+   * This is useful to avoid inheriting label behaviors on `<button>` controls (such as `<Select.Trigger>` and `<Combobox.Trigger>`), including avoiding `:hover` on the button when hovering the label, and preventing clicks on the label from firing on the button.
+   * @default true
+   */
+  nativeLabel?: boolean;
+}
 export declare namespace FieldLabel {
   type State = FieldLabelState;
   type Props = FieldLabelProps;

package/field/label/FieldLabel.js

@@ -7,7 +7,11 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.FieldLabel = void 0;
 var React = _interopRequireWildcard(require("react"));
+var _error = require("@base-ui/utils/error");
+var _dom = require("@floating-ui/utils/dom");
 var _useIsoLayoutEffect = require("@base-ui/utils/useIsoLayoutEffect");
+var _owner = require("@base-ui/utils/owner");
+var _useStableCallback = require("@base-ui/utils/useStableCallback");
 var _utils = require("../../floating-ui-react/utils");
 var _FieldRootContext = require("../root/FieldRootContext");
 var _LabelableContext = require("../../labelable-provider/LabelableContext");
@@ -25,6 +29,7 @@ const FieldLabel = exports.FieldLabel = /*#__PURE__*/React.forwardRef(function F
     render,
     className,
     id: idProp,
+    nativeLabel = true,
     ...elementProps
   } = componentProps;
   const fieldRootContext = (0, _FieldRootContext.useFieldRootContext)(false);
@@ -35,6 +40,45 @@ const FieldLabel = exports.FieldLabel = /*#__PURE__*/React.forwardRef(function F
   } = (0, _LabelableContext.useLabelableContext)();
   const id = (0, _useBaseUiId.useBaseUiId)(idProp);
   const labelRef = React.useRef(null);
+  const handleInteraction = (0, _useStableCallback.useStableCallback)(event => {
+    const target = (0, _utils.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 = (0, _owner.ownerDocument)(event.currentTarget).getElementById(controlId);
+    if ((0, _dom.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
+      });
+    }
+  });
+  if (process.env.NODE_ENV !== 'production') {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    React.useEffect(() => {
+      if (!labelRef.current) {
+        return;
+      }
+      const isLabelTag = labelRef.current.tagName === 'LABEL';
+      if (nativeLabel) {
+        if (!isLabelTag) {
+          (0, _error.error)('<Field.Label> was not rendered as a <label> element, which does not match the `nativeLabel` prop on the component. Ensure that the element passed to the `render` prop of <Field.Label> is a real <label>, or set the `nativeLabel` prop on the component to `false`.');
+        }
+      } else if (isLabelTag) {
+        (0, _error.error)('<Field.Label> was rendered as a <label> element, which does not match the `nativeLabel` prop on the component. Ensure that the element passed to the `render` prop of <Field.Label> is not a real <label>, or set the `nativeLabel` prop on the component to `true`.');
+      }
+    }, [nativeLabel]);
+  }
   (0, _useIsoLayoutEffect.useIsoLayoutEffect)(() => {
     if (id) {
       setLabelId(id);
@@ -47,18 +91,14 @@ const FieldLabel = exports.FieldLabel = /*#__PURE__*/React.forwardRef(function F
     ref: [forwardedRef, labelRef],
     state: fieldRootContext.state,
     props: [{
-      id: labelId,
+      id: labelId
+    }, nativeLabel ? {
       htmlFor: controlId ?? undefined,
-      onMouseDown(event) {
-        const target = (0, _utils.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();
-        }
+      onMouseDown: handleInteraction
+    } : {
+      onClick: handleInteraction,
+      onPointerDown(event) {
+        event.preventDefault();
       }
     }, elementProps],
     stateAttributesMapping: _constants.fieldValidityMapping

package/field/root/FieldRoot.d.ts

@@ -7,7 +7,7 @@ import { BaseUIComponentProps } from "../../utils/types.js";
  *
  * Documentation: [Base UI Field](https://base-ui.com/react/components/field)
  */
-export declare const FieldRoot: React.ForwardRefExoticComponent<FieldRootProps & React.RefAttributes<HTMLDivElement>>;
+export declare const FieldRoot: React.ForwardRefExoticComponent<Omit<FieldRootProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export interface FieldValidityData {
   state: {
     badInput: boolean;
@@ -27,6 +27,9 @@ export interface FieldValidityData {
   value: unknown;
   initialValue: unknown;
 }
+export interface FieldRootActions {
+  validate: () => void;
+}
 export interface FieldRootState {
   /** Whether the component should ignore user interaction. */
   disabled: boolean;
@@ -87,8 +90,14 @@ export interface FieldRootProps extends BaseUIComponentProps<'div', FieldRoot.St
    * Useful when the field state is controlled by an external library.
    */
   touched?: boolean;
+  /**
+   * A ref to imperative actions.
+   * - `validate`: Validates the field when called.
+   */
+  actionsRef?: React.RefObject<FieldRoot.Actions | null>;
 }
 export declare namespace FieldRoot {
   type State = FieldRootState;
   type Props = FieldRootProps;
+  type Actions = FieldRootActions;
 }

package/field/root/FieldRoot.js

@@ -35,6 +35,7 @@ var _jsxRuntime = require("react/jsx-runtime");
     invalid: invalidProp,
     dirty: dirtyProp,
     touched: touchedProp,
+    actionsRef,
     ...elementProps
   } = componentProps;
   const {
@@ -93,6 +94,13 @@ var _jsxRuntime = require("react/jsx-runtime");
     name,
     shouldValidateOnChange
   });
+  const handleImperativeValidate = React.useCallback(() => {
+    markedDirtyRef.current = true;
+    validation.commit(validityData.value);
+  }, [validation, validityData]);
+  React.useImperativeHandle(actionsRef, () => ({
+    validate: handleImperativeValidate
+  }), [handleImperativeValidate]);
   const contextValue = React.useMemo(() => ({
     invalid,
     name,

package/field/useField.js

@@ -54,14 +54,18 @@ function useField(params) {
       name,
       controlRef,
       validityData: (0, _getCombinedFieldValidityData.getCombinedFieldValidityData)(validityData, invalid),
-      validate() {
+      validate(flushSync = true) {
         let nextValue = value;
         if (nextValue === undefined) {
           nextValue = getValue();
         }
         markedDirtyRef.current = true;
-        // Synchronously update the validity state so the submit event can be prevented.
-        ReactDOM.flushSync(() => commit(nextValue));
+        if (!flushSync) {
+          commit(nextValue);
+        } else {
+          // Synchronously update the validity state so the submit event can be prevented.
+          ReactDOM.flushSync(() => commit(nextValue));
+        }
       }
     });
   }, [commit, controlRef, enabled, formRef, getValue, id, invalid, markedDirtyRef, name, validityData, value]);

package/fieldset/legend/FieldsetLegend.d.ts

@@ -6,7 +6,7 @@ import type { BaseUIComponentProps } from "../../utils/types.js";
  *
  * Documentation: [Base UI Fieldset](https://base-ui.com/react/components/fieldset)
  */
-export declare const FieldsetLegend: React.ForwardRefExoticComponent<FieldsetLegendProps & React.RefAttributes<HTMLDivElement>>;
+export declare const FieldsetLegend: React.ForwardRefExoticComponent<Omit<FieldsetLegendProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export interface FieldsetLegendState {
   /**
    * Whether the component should ignore user interaction.

package/fieldset/root/FieldsetRoot.d.ts

@@ -6,7 +6,7 @@ import type { BaseUIComponentProps } from "../../utils/types.js";
  *
  * 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/floating-ui-react/components/FloatingFocusManager.js

@@ -162,6 +162,10 @@ 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 = (0, _useMergedRefs.useMergedRefs)(beforeGuardRef, beforeContentFocusGuardRef, portalContext?.beforeInsideRef);
+  const mergedAfterGuardRef = (0, _useMergedRefs.useMergedRefs)(afterGuardRef, portalContext?.afterInsideRef);
   const blurTimeout = (0, _useTimeout.useTimeout)();
   const pointerDownTimeout = (0, _useTimeout.useTimeout)();
   const restoreFocusFrame = (0, _useAnimationFrame.useAnimationFrame)();
@@ -267,7 +271,8 @@ function FloatingFocusManager(props) {
       queueMicrotask(() => {
         const nodeId = getNodeId();
         const triggers = store.context.triggerElements;
-        const movedToUnrelatedNode = !((0, _utils.contains)(domReference, relatedTarget) || (0, _utils.contains)(floating, relatedTarget) || (0, _utils.contains)(relatedTarget, floating) || (0, _utils.contains)(portalContext?.portalNode, relatedTarget) || relatedTarget != null && triggers.hasElement(relatedTarget) || triggers.hasMatchingElement(trigger => (0, _utils.contains)(trigger, relatedTarget)) || relatedTarget?.hasAttribute((0, _createAttribute.createAttribute)('focus-guard')) || tree && ((0, _utils.getNodeChildren)(tree.nodesRef.current, nodeId).find(node => (0, _utils.contains)(node.context?.elements.floating, relatedTarget) || (0, _utils.contains)(node.context?.elements.domReference, relatedTarget)) || (0, _utils.getNodeAncestors)(tree.nodesRef.current, nodeId).find(node => [node.context?.elements.floating, (0, _utils.getFloatingFocusElement)(node.context?.elements.floating)].includes(relatedTarget) || node.context?.elements.domReference === relatedTarget)));
+        const isRelatedFocusGuard = relatedTarget?.hasAttribute((0, _createAttribute.createAttribute)('focus-guard')) && [beforeGuardRef.current, afterGuardRef.current, portalContext?.beforeInsideRef.current, portalContext?.afterInsideRef.current, portalContext?.beforeOutsideRef.current, portalContext?.afterOutsideRef.current, (0, _resolveRef.resolveRef)(previousFocusableElement), (0, _resolveRef.resolveRef)(nextFocusableElement)].includes(relatedTarget);
+        const movedToUnrelatedNode = !((0, _utils.contains)(domReference, relatedTarget) || (0, _utils.contains)(floating, relatedTarget) || (0, _utils.contains)(relatedTarget, floating) || (0, _utils.contains)(portalContext?.portalNode, relatedTarget) || relatedTarget != null && triggers.hasElement(relatedTarget) || triggers.hasMatchingElement(trigger => (0, _utils.contains)(trigger, relatedTarget)) || isRelatedFocusGuard || tree && ((0, _utils.getNodeChildren)(tree.nodesRef.current, nodeId).find(node => (0, _utils.contains)(node.context?.elements.floating, relatedTarget) || (0, _utils.contains)(node.context?.elements.domReference, relatedTarget)) || (0, _utils.getNodeAncestors)(tree.nodesRef.current, nodeId).find(node => [node.context?.elements.floating, (0, _utils.getFloatingFocusElement)(node.context?.elements.floating)].includes(relatedTarget) || node.context?.elements.domReference === relatedTarget)));
         if (currentTarget === domReference && floatingFocusElement) {
           handleTabIndex(floatingFocusElement, orderRef);
         }
@@ -361,11 +366,7 @@ 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 = (0, _useMergedRefs.useMergedRefs)(beforeGuardRef, beforeContentFocusGuardRef, portalContext?.beforeInsideRef);
-  const mergedAfterGuardRef = (0, _useMergedRefs.useMergedRefs)(afterGuardRef, portalContext?.afterInsideRef);
+  }, [disabled, domReference, floating, floatingFocusElement, modal, tree, portalContext, store, closeOnFocusOut, restoreFocus, getTabbableContent, isUntrappedTypeableCombobox, getNodeId, orderRef, dataRef, blurTimeout, pointerDownTimeout, restoreFocusFrame, nextFocusableElement, previousFocusableElement]);
   React.useEffect(() => {
     if (disabled || !floating || !open) {
       return undefined;

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

@@ -40,9 +40,9 @@ export declare function useFloatingPortalNode(props?: UseFloatingPortalNodeProps
  * @see https://floating-ui.com/docs/FloatingPortal
  * @internal
  */
-export declare const FloatingPortal: React.ForwardRefExoticComponent<FloatingPortal.Props<any> & {
+export declare const FloatingPortal: React.ForwardRefExoticComponent<Omit<FloatingPortal.Props<any> & {
   renderGuards?: boolean;
-} & React.RefAttributes<HTMLDivElement>>;
+}, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export declare namespace FloatingPortal {
   interface Props<State> extends BaseUIComponentProps<'div', State> {
     /**

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

@@ -13,6 +13,7 @@ var ReactDOM = _interopRequireWildcard(require("react-dom"));
 var _dom = require("@floating-ui/utils/dom");
 var _useId = require("@base-ui/utils/useId");
 var _useIsoLayoutEffect = require("@base-ui/utils/useIsoLayoutEffect");
+var _useStableCallback = require("@base-ui/utils/useStableCallback");
 var _FocusGuard = require("../../utils/FocusGuard");
 var _utils = require("../utils");
 var _createBaseUIEventDetails = require("../../utils/createBaseUIEventDetails");
@@ -39,6 +40,14 @@ function useFloatingPortalNode(props = {}) {
   const parentPortalNode = portalContext?.portalNode;
   const [containerElement, setContainerElement] = React.useState(null);
   const [portalNode, setPortalNode] = React.useState(null);
+  const setPortalNodeRef = (0, _useStableCallback.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);
   (0, _useIsoLayoutEffect.useIsoLayoutEffect)(() => {
     // Wait for the container to be resolved if explicitly `null`.
@@ -71,7 +80,7 @@ function useFloatingPortalNode(props = {}) {
     }
   }, [containerProp, parentPortalNode, uniqueId]);
   const portalElement = (0, _useRenderElement.useRenderElement)('div', componentProps, {
-    ref: [ref, setPortalNode],
+    ref: [ref, setPortalNodeRef],
     state: elementState,
     props: [{
       id: uniqueId,
@@ -134,7 +143,7 @@ const FloatingPortal = exports.FloatingPortal = /*#__PURE__*/React.forwardRef(fu
     // portal has already been focused, either by tabbing into a focus trap
     // element outside or using the mouse.
     function onFocus(event) {
-      if (portalNode && (0, _utils.isOutsideEvent)(event)) {
+      if (portalNode && event.relatedTarget && (0, _utils.isOutsideEvent)(event)) {
         const focusing = event.type === 'focusin';
         const manageFocus = focusing ? _utils.enableFocusInside : _utils.disableFocusInside;
         manageFocus(portalNode);

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

@@ -87,7 +87,7 @@ function useClientPoint(context, props = {}) {
   const cleanupListenerRef = React.useRef(null);
   const [pointerType, setPointerType] = React.useState();
   const [reactive, setReactive] = React.useState([]);
-  const setReference = (0, _useStableCallback.useStableCallback)((newX, newY) => {
+  const setReference = (0, _useStableCallback.useStableCallback)((newX, newY, referenceElement) => {
     if (initialRef.current) {
       return;
     }
@@ -98,7 +98,7 @@ function useClientPoint(context, props = {}) {
     if (dataRef.current.openEvent && !isMouseBasedEvent(dataRef.current.openEvent)) {
       return;
     }
-    store.set('positionReference', createVirtualElement(domReference, {
+    store.set('positionReference', createVirtualElement(referenceElement ?? domReference, {
       x: newX,
       y: newY,
       axis,
@@ -111,7 +111,7 @@ function useClientPoint(context, props = {}) {
       return;
     }
     if (!open) {
-      setReference(event.clientX, event.clientY);
+      setReference(event.clientX, event.clientY, event.currentTarget);
     } else if (!cleanupListenerRef.current) {
       // If there's no cleanup, there's no listener, but we want to ensure
       // we add the listener if the cursor landed on the floating element and
@@ -183,6 +183,7 @@ function useClientPoint(context, props = {}) {
     };
   }, [handleReferenceEnterOrMove]);
   return React.useMemo(() => enabled ? {
-    reference
+    reference,
+    trigger: reference
   } : {}, [enabled, reference]);
 }

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

@@ -392,6 +392,7 @@ function useDismiss(context, props = {}) {
         ancestor.removeEventListener('scroll', onScroll);
       });
       compositionTimeout.clear();
+      endedOrStartedInsideRef.current = false;
     };
   }, [dataRef, floatingElement, referenceElement, domReferenceElement, escapeKey, outsidePress, open, onOpenChange, ancestorScroll, enabled, escapeKeyBubbles, outsidePressBubbles, closeOnEscapeKeyDown, closeOnPressOutside, closeOnPressOutsideCapture, handlePointerDown, handleTouchStartCapture, handleTouchMoveCapture, handleTouchEndCapture, trackPointerType, store]);
   React.useEffect(clearInsideReactTree, [outsidePress, clearInsideReactTree]);
@@ -415,6 +416,12 @@ function useDismiss(context, props = {}) {
     }
     endedOrStartedInsideRef.current = true;
   });
+  const markPressStartedInsideReactTree = (0, _useStableCallback.useStableCallback)(event => {
+    if (!open || !enabled || event.button !== 0) {
+      return;
+    }
+    endedOrStartedInsideRef.current = true;
+  });
   const floating = React.useMemo(() => ({
     onKeyDown: closeOnEscapeKeyDown,
     // `onMouseDown` may be blocked if `event.preventDefault()` is called in
@@ -424,12 +431,18 @@ function useDismiss(context, props = {}) {
     onMouseDown: handlePressedInside,
     onMouseUp: handlePressedInside,
     onClickCapture: markInsideReactTree,
-    onMouseDownCapture: markInsideReactTree,
-    onPointerDownCapture: markInsideReactTree,
+    onMouseDownCapture(event) {
+      markInsideReactTree();
+      markPressStartedInsideReactTree(event);
+    },
+    onPointerDownCapture(event) {
+      markInsideReactTree();
+      markPressStartedInsideReactTree(event);
+    },
     onMouseUpCapture: markInsideReactTree,
     onTouchEndCapture: markInsideReactTree,
     onTouchMoveCapture: markInsideReactTree
-  }), [closeOnEscapeKeyDown, handlePressedInside, markInsideReactTree]);
+  }), [closeOnEscapeKeyDown, handlePressedInside, markInsideReactTree, markPressStartedInsideReactTree]);
   return React.useMemo(() => enabled ? {
     reference,
     floating,

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

@@ -12,6 +12,11 @@ export interface UseFocusProps {
    * @default true
    */
   visibleOnly?: boolean;
+  /**
+   * Waits for the specified time before opening.
+   * @default undefined
+   */
+  delay?: number | (() => number | undefined);
 }
 /**
  * Opens the floating element while the reference element has focus, like CSS