@base-ui/react 1.6.0 → 1.8.0

package/field/root/useFieldValidation.mjs

@@ -11,34 +11,35 @@ import { DEFAULT_VALIDITY_STATE } from "../../internals/field-constants/constant
 import { useFormContext } from "../../internals/form-context/FormContext.mjs";
 import { getCombinedFieldValidityData } from "../utils/getCombinedFieldValidityData.mjs";
 const validityKeys = Object.keys(DEFAULT_VALIDITY_STATE);
-function isOnlyValueMissing(state) {
-  if (!state || state.valid || !state.valueMissing) {
+/**
+ * Whether an input participates in the surrounding Base UI Form. Inputs that are effectively
+ * disabled, or whose `form` attribute explicitly associates them with another form, are excluded.
+ * DOM position only matters when it associates the input with a different form. Otherwise, field
+ * registration is context-driven, so portaled inputs (for example inside a dialog) still belong to
+ * the form for both validation and values projected into `onFormSubmit`.
+ */
+export function isEligibleInput(input, formElement) {
+  if (input.matches(':disabled')) {
     return false;
   }
-  let onlyValueMissing = false;
-  for (const key of validityKeys) {
-    if (key === 'valid') {
-      continue;
-    }
-    if (key === 'valueMissing') {
-      onlyValueMissing = state[key];
-    } else if (state[key]) {
-      onlyValueMissing = false;
-    }
+  if (!formElement || input.form === formElement) {
+    return true;
   }
-  return onlyValueMissing;
+
+  // React context crosses portal boundaries. An unassociated portaled input still participates in
+  // contextual validation, unless an explicit `form` attribute opts it out of the surrounding Form.
+  return input.form === null && !input.hasAttribute('form');
 }
 
 /**
  * Picks the input whose native validity should represent a field that owns several inputs (such as a
- * checkbox group). Prefers the first enabled currently-invalid input, where "first" follows Set
- * insertion order (mount order), and otherwise returns the first enabled input. Disabled inputs are
- * skipped because they don't participate in native constraint validation.
+ * checkbox or radio group). Prefers the first eligible currently-invalid input, where "first" follows
+ * registration order (mount order), and otherwise returns the first eligible input.
  */
-function findRepresentativeInput(inputs) {
+function findRepresentativeInput(inputs, formElement) {
   let fallback = null;
-  for (const input of inputs) {
-    if (input.disabled) {
+  for (const input of inputs.keys()) {
+    if (!isEligibleInput(input, formElement)) {
       continue;
     }
     if (!input.validity.valid) {
@@ -48,18 +49,19 @@ function findRepresentativeInput(inputs) {
   }
   return fallback;
 }
-function clearCustomValidity(element, inputs) {
-  let didClearElement = false;
-  for (const input of inputs) {
-    input.setCustomValidity('');
-    didClearElement ||= input === element;
-  }
-  if (!didClearElement) {
-    element.setCustomValidity('');
-  }
+function makeState(customError) {
+  return {
+    ...DEFAULT_VALIDITY_STATE,
+    valid: !customError,
+    customError
+  };
+}
+function getNativeErrors(element) {
+  return element && element.validationMessage ? [element.validationMessage] : [];
 }
 export function useFieldValidation(params) {
   const {
+    elementRef,
     formRef
   } = useFormContext();
   const {
@@ -71,7 +73,8 @@ export function useFieldValidation(params) {
     markedDirtyRef,
     state,
     shouldValidateOnChange,
-    getRegisteredFieldId
+    validationMode,
+    registeredFieldIdRef
   } = params;
   const {
     controlId,
@@ -79,32 +82,29 @@ export function useFieldValidation(params) {
   } = useLabelableContext();
   const timeout = useTimeout();
   const inputRef = React.useRef(null);
-  const registeredInputs = useRefWithInit(() => new Set()).current;
+  const registeredInputs = useRefWithInit(() => new Map()).current;
   const validationCommitIdRef = React.useRef(0);
+  // Tracks the message installed by Base UI and the custom message it displaced.
+  const customValidityRef = React.useRef(null);
 
-  // Checkbox groups register several inputs against a single field. Track them so a `required`
-  // checkbox can't be satisfied by another input in the group, matching native per-checkbox behavior.
-  const registerInput = React.useCallback(element => {
-    if (!element) {
-      return undefined;
-    }
-    registeredInputs.add(element);
+  // Groups register several inputs against a single field so focus, validation, and form-value
+  // projection can use the same live controls. This also ensures a `required` checkbox can't be
+  // satisfied by another input in the group, matching native per-checkbox behavior.
+  const registerInput = React.useCallback((element, registration) => {
+    registeredInputs.set(element, registration);
     return () => {
       registeredInputs.delete(element);
     };
   }, [registeredInputs]);
+  const getInputControl = useStableCallback(() => {
+    const element = findRepresentativeInput(registeredInputs, elementRef.current);
+    return element && registeredInputs.get(element)?.controlRef.current || null;
+  });
   const commit = useStableCallback(async (value, revalidate = false) => {
-    // A field can own several inputs (a checkbox group), but only the last-mounted one wins the shared
-    // `inputRef`. Validate against the registry instead so every input counts; `inputRef` is the
-    // fallback only when no registered input applies (none registered, or all of them disabled).
-    const element = findRepresentativeInput(registeredInputs) ?? inputRef.current;
-    if (!element) {
-      return;
-    }
     validationCommitIdRef.current += 1;
     const validationCommitId = validationCommitIdRef.current;
     function updateRegisteredFieldValidity(nextValidityData, externalInvalid = invalid) {
-      const fieldId = getRegisteredFieldId() ?? controlId;
+      const fieldId = registeredFieldIdRef.current ?? controlId;
       if (fieldId == null) {
         return;
       }
@@ -118,48 +118,36 @@ export function useFieldValidation(params) {
         validityData: validityDataWithFormErrors
       });
     }
-    if (revalidate) {
-      if (state.valid !== false) {
-        return;
-      }
-      const currentNativeValidity = element.validity;
-      if (!currentNativeValidity.valueMissing) {
-        // The 'valueMissing' (required) condition has been resolved by the user typing.
-        // Temporarily mark the field as valid for this onChange event.
-        // Other native errors (e.g., typeMismatch) will be caught by full validation on blur or submit.
-        const nextValidityData = {
-          value,
-          state: {
-            ...DEFAULT_VALIDITY_STATE,
-            valid: true
-          },
-          error: '',
-          errors: [],
-          initialValue: validityData.initialValue
-        };
-        clearCustomValidity(element, registeredInputs);
-
-        // The required value is now present; ignore stale external invalid state for this pass.
-        updateRegisteredFieldValidity(nextValidityData, false);
-        setValidityData(nextValidityData);
-        return;
-      }
-
-      // Value is still missing, or other conditions apply.
-      // Let's use a representation of current validity for isOnlyValueMissing.
-      const currentNativeValidityObject = validityKeys.reduce((acc, key) => {
-        acc[key] = currentNativeValidity[key];
-        return acc;
-      }, {});
-
-      // If it's (still) natively invalid due to something other than just valueMissing,
-      // then bail from this revalidation on change to avoid "scolding" for other errors.
-      if (!currentNativeValidityObject.valid && !isOnlyValueMissing(currentNativeValidityObject)) {
-        return;
+    function makeValidityData(validityState, errorMessages) {
+      // `valueMissing` may be suppressed while the native message remains non-empty.
+      const errors = validityState.valid === false ? errorMessages : [];
+      return {
+        value,
+        state: validityState,
+        error: errors[0] ?? '',
+        errors,
+        initialValue: validityData.initialValue
+      };
+    }
+    function setCustomValidity(element, message) {
+      // Never reinstall a native constraint message as custom validity.
+      const displaced = element.validity.customError ? element.validationMessage : '';
+      const ownedMessage = message.replace(/\r\n?/g, '\n');
+      element.setCustomValidity(ownedMessage);
+      customValidityRef.current = [element, ownedMessage, displaced];
+    }
+    function clearCustomValidity() {
+      const record = customValidityRef.current;
+      customValidityRef.current = null;
+      // Replacement transfers ownership; barred controls hide `validationMessage`.
+      if (record && (!record[0].willValidate || record[0].validationMessage === record[1])) {
+        record[0].setCustomValidity(record[2]);
       }
-
-      // If valueMissing is still true AND it's the only issue, or if the field is now natively valid,
-      // let it fall through to the main validation logic below.
+    }
+    function publish(validityState, errorMessages, externalInvalid) {
+      const nextValidityData = makeValidityData(validityState, errorMessages);
+      updateRegisteredFieldValidity(nextValidityData, externalInvalid);
+      setValidityData(nextValidityData);
     }
     function getState(el) {
       const computedState = validityKeys.reduce((acc, key) => {
@@ -186,18 +174,59 @@ export function useFieldValidation(params) {
       }
       return computedState;
     }
+
+    // A field can own several inputs (such as a checkbox or radio group), but only the last-mounted
+    // one wins the shared `inputRef`. Validate against the registry instead so every input counts;
+    // `inputRef` is the fallback only when no inputs are registered.
+    function resolveRepresentativeInput() {
+      return registeredInputs.size > 0 ? findRepresentativeInput(registeredInputs, elementRef.current) : inputRef.current;
+    }
+
+    // A field with no eligible input has no native constraint, but its custom validator still
+    // applies to the logical value at the configured validation boundary.
+    let element = resolveRepresentativeInput();
+    function refreshState() {
+      element = resolveRepresentativeInput();
+      // Barred controls expose no usable native constraint state.
+      return element?.willValidate ? getState(element) : makeState(false);
+    }
+    if (revalidate) {
+      if (state.valid !== false || !element) {
+        return;
+      }
+      if (!element.validity.valueMissing) {
+        // The 'valueMissing' (required) condition has been resolved by the user typing.
+        // Temporarily mark the field as valid for this onChange event.
+        // Other native errors (e.g., typeMismatch) will be caught by full validation on blur or submit.
+        // The required value is now present; ignore stale external invalid state for this pass.
+        clearCustomValidity();
+        // Clearing can make another registered input with a custom error representative.
+        const currentElement = resolveRepresentativeInput();
+        const foreign = currentElement?.validity.customError ? getNativeErrors(currentElement) : [];
+        publish(makeState(foreign.length > 0), foreign, false);
+        return;
+      }
+
+      // A stale custom error can coexist with valueMissing, but defer any other native errors.
+      for (const key of validityKeys) {
+        if (key !== 'valid' && key !== 'valueMissing' && key !== 'customError' && element.validity[key]) {
+          return;
+        }
+      }
+
+      // Value is still missing: publish the current native state so valueMissing and the changed
+      // value are observable immediately. Full custom validation still waits for its boundary.
+    }
     timeout.clear();
-    let result = null;
-    let validationErrors = [];
-    const nextState = getState(element);
-    let defaultValidationMessage;
+
+    // Do not read Base UI's previous message back as a native constraint.
+    clearCustomValidity();
+    let nextState = refreshState();
+    let validationErrors = getNativeErrors(element);
     const isValidatingOnChange = shouldValidateOnChange();
-    if (element.validationMessage && !isValidatingOnChange) {
-      // not validating on change, if there is a `validationMessage` from
-      // native validity, set errors and skip calling the custom validate fn
-      defaultValidationMessage = element.validationMessage;
-      validationErrors = [element.validationMessage];
-    } else {
+
+    // Native or externally set errors take precedence outside onChange validation.
+    if (validationErrors.length === 0 || isValidatingOnChange) {
       // call the validate function because either
       // - validating on change, or
       // - native constraint validations passed, custom validity check is next
@@ -208,54 +237,53 @@ export function useFieldValidation(params) {
         return acc;
       }, {});
       const resultOrPromise = validate(value, formValues);
+      let result;
       if (typeof resultOrPromise === 'object' && resultOrPromise !== null && 'then' in resultOrPromise) {
+        // Validity is unknown while the validator runs, so go neutral, but keep what must block
+        // submission synchronously: native failures, and a previous custom error outside onSubmit
+        // mode. A previous native error is never kept, since `nextState` already carries the fresh
+        // native verdict.
+        if (nextState.valid === false) {
+          publish(nextState, validationErrors);
+        } else if (validationMode === 'onSubmit' || !validityData.state.customError) {
+          nextState.valid = null;
+          publish(nextState, validationErrors);
+        }
+
+        // A rejected validator keeps the previously published state, so a transient
+        // failure can't retire an error and unblock submission.
         result = await resultOrPromise;
         if (validationCommitId !== validationCommitIdRef.current) {
           return;
         }
+        nextState = refreshState();
       } else {
         result = resultOrPromise;
       }
-      if (result !== null) {
+
+      // Empty results and empty array entries are valid.
+      validationErrors = result ? [].concat(result).filter(Boolean) : [];
+      if (validationErrors.length > 0) {
         nextState.valid = false;
         nextState.customError = true;
-        if (Array.isArray(result)) {
-          validationErrors = result;
-          element.setCustomValidity(result.join('\n'));
-        } else if (result) {
-          validationErrors = [result];
-          element.setCustomValidity(result);
-        }
-      } else if (isValidatingOnChange) {
-        // validate function returned no errors, if validating on change
-        // we need to clear the custom validity state
-        clearCustomValidity(element, registeredInputs);
-        nextState.customError = false;
-        if (element.validationMessage) {
-          defaultValidationMessage = element.validationMessage;
-          validationErrors = [element.validationMessage];
-        } else if (element.validity.valid && !nextState.valid) {
-          nextState.valid = true;
+        // Keep custom errors for barred controls in field state only.
+        if (element?.willValidate) {
+          setCustomValidity(element, validationErrors.join('\n'));
         }
+      } else {
+        validationErrors = getNativeErrors(element);
       }
     }
-    const nextValidityData = {
-      value,
-      state: nextState,
-      error: defaultValidationMessage ?? (Array.isArray(result) ? result[0] : result ?? ''),
-      errors: validationErrors,
-      initialValue: validityData.initialValue
-    };
-
-    // Keep Form-level errors part of overall field validity for submit blocking/focus logic.
-    updateRegisteredFieldValidity(nextValidityData);
-    setValidityData(nextValidityData);
+    publish(nextState, validationErrors);
   });
-  const change = useStableCallback(value => {
+  const change = useStableCallback((value, cancelPending = false) => {
     timeout.clear();
+    validationCommitIdRef.current += 1;
+    if (cancelPending) {
+      return;
+    }
     const validateOnChange = shouldValidateOnChange();
     if (validateOnChange && value !== '' && validationDebounceTime) {
-      validationCommitIdRef.current += 1;
       timeout.start(validationDebounceTime, () => {
         commit(value);
       });
@@ -269,8 +297,10 @@ export function useFieldValidation(params) {
   return React.useMemo(() => ({
     getValidationProps,
     inputRef,
+    registeredInputs,
     registerInput,
+    getInputControl,
     commit,
     change
-  }), [getValidationProps, registerInput, commit, change]);
+  }), [getValidationProps, registeredInputs, registerInput, getInputControl, commit, change]);
 }

package/field/validity/FieldValidity.js

@@ -30,6 +30,10 @@ const FieldValidity = exports.FieldValidity = function FieldValidity(props) {
   const {
     transitionStatus
   } = (0, _useTransitionStatus.useTransitionStatus)(isInvalid);
+
+  // `fieldValidityState` is handed straight to a public render prop, so its identity is observable:
+  // consumers can pass it to a memoized child. Keep it stable across unrelated field-state changes
+  // (focus, dirty, filled) so those children don't rerender when the validity itself is unchanged.
   const fieldValidityState = React.useMemo(() => {
     return {
       ...combinedFieldValidityData,

package/field/validity/FieldValidity.mjs

@@ -25,6 +25,10 @@ export const FieldValidity = function FieldValidity(props) {
   const {
     transitionStatus
   } = useTransitionStatus(isInvalid);
+
+  // `fieldValidityState` is handed straight to a public render prop, so its identity is observable:
+  // consumers can pass it to a memoized child. Keep it stable across unrelated field-state changes
+  // (focus, dirty, filled) so those children don't rerender when the validity itself is unchanged.
   const fieldValidityState = React.useMemo(() => {
     return {
       ...combinedFieldValidityData,

package/fieldset/legend/FieldsetLegend.js

@@ -7,10 +7,9 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.FieldsetLegend = void 0;
 var React = _interopRequireWildcard(require("react"));
-var _useIsoLayoutEffect = require("@base-ui/utils/useIsoLayoutEffect");
-var _useBaseUiId = require("../../internals/useBaseUiId");
 var _useRenderElement = require("../../internals/useRenderElement");
 var _FieldsetRootContext = require("../root/FieldsetRootContext");
+var _useRegisteredLabelId = require("../../utils/useRegisteredLabelId");
 /**
  * An accessible label that is automatically associated with the fieldset.
  * Renders a `<div>` element.
@@ -29,15 +28,9 @@ const FieldsetLegend = exports.FieldsetLegend = /*#__PURE__*/React.forwardRef(fu
     disabled,
     setLegendId
   } = (0, _FieldsetRootContext.useFieldsetRootContext)();
-  const id = (0, _useBaseUiId.useBaseUiId)(idProp);
-  (0, _useIsoLayoutEffect.useIsoLayoutEffect)(() => {
-    setLegendId(id);
-    return () => {
-      setLegendId(undefined);
-    };
-  }, [setLegendId, id]);
+  const id = (0, _useRegisteredLabelId.useRegisteredLabelId)(idProp, setLegendId);
   const state = {
-    disabled: disabled ?? false
+    disabled
   };
   const element = (0, _useRenderElement.useRenderElement)('div', componentProps, {
     state,

package/fieldset/legend/FieldsetLegend.mjs

@@ -1,10 +1,10 @@
 'use client';
 
 import * as React from 'react';
-import { useIsoLayoutEffect } from '@base-ui/utils/useIsoLayoutEffect';
-import { useBaseUiId } from "../../internals/useBaseUiId.mjs";
 import { useRenderElement } from "../../internals/useRenderElement.mjs";
 import { useFieldsetRootContext } from "../root/FieldsetRootContext.mjs";
+import { useRegisteredLabelId } from "../../utils/useRegisteredLabelId.mjs";
+
 /**
  * An accessible label that is automatically associated with the fieldset.
  * Renders a `<div>` element.
@@ -23,15 +23,9 @@ export const FieldsetLegend = /*#__PURE__*/React.forwardRef(function FieldsetLeg
     disabled,
     setLegendId
   } = useFieldsetRootContext();
-  const id = useBaseUiId(idProp);
-  useIsoLayoutEffect(() => {
-    setLegendId(id);
-    return () => {
-      setLegendId(undefined);
-    };
-  }, [setLegendId, id]);
+  const id = useRegisteredLabelId(idProp, setLegendId);
   const state = {
-    disabled: disabled ?? false
+    disabled
   };
   const element = useRenderElement('div', componentProps, {
     state,

package/fieldset/root/FieldsetRootContext.d.mts

@@ -2,7 +2,7 @@ import * as React from 'react';
 export interface FieldsetRootContext {
   legendId: string | undefined;
   setLegendId: React.Dispatch<React.SetStateAction<string | undefined>>;
-  disabled: boolean | undefined;
+  disabled: boolean;
 }
 export declare const FieldsetRootContext: React.Context<FieldsetRootContext | undefined>;
 export declare function useFieldsetRootContext(optional: true): FieldsetRootContext | undefined;

package/fieldset/root/FieldsetRootContext.d.ts

@@ -2,7 +2,7 @@ import * as React from 'react';
 export interface FieldsetRootContext {
   legendId: string | undefined;
   setLegendId: React.Dispatch<React.SetStateAction<string | undefined>>;
-  disabled: boolean | undefined;
+  disabled: boolean;
 }
 export declare const FieldsetRootContext: React.Context<FieldsetRootContext | undefined>;
 export declare function useFieldsetRootContext(optional: true): FieldsetRootContext | undefined;

package/floating-ui-react/components/FloatingDelayGroup.d.mts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { FloatingRootContext, Delay, FloatingContext } from "../types.mjs";
+import type { Delay } from "../types.mjs";
 export interface FloatingDelayGroupProps {
   children?: React.ReactNode;
   /**
@@ -13,43 +13,4 @@ export interface FloatingDelayGroupProps {
    * for example if there is no close delay at all.
    */
   timeoutMs?: number | undefined;
-}
-/**
- * Experimental next version of `FloatingDelayGroup` to become the default
- * in the future. This component is not yet stable.
- * Provides context for a group of floating elements that should share a
- * `delay`. Unlike `FloatingDelayGroup`, `useDelayGroup` with this
- * component does not cause a re-render of unrelated consumers of the
- * context when the delay changes.
- * @see https://floating-ui.com/docs/FloatingDelayGroup
- * @internal
- */
-export declare function FloatingDelayGroup(props: FloatingDelayGroupProps): React.JSX.Element;
-interface UseDelayGroupOptions {
-  /**
-   * Whether the trigger this hook is used in has opened the tooltip.
-   */
-  open: boolean;
-}
-interface UseDelayGroupReturn {
-  /**
-   * The delay reference object.
-   */
-  delayRef: React.RefObject<Delay>;
-  /**
-   * Whether animations should be removed.
-   */
-  isInstantPhase: boolean;
-  /**
-   * Whether a `<FloatingDelayGroup>` provider is present.
-   */
-  hasProvider: boolean;
-}
-/**
- * Enables grouping when called inside a component that's a child of a
- * `FloatingDelayGroup`.
- * @see https://floating-ui.com/docs/FloatingDelayGroup
- * @internal
- */
-export declare function useDelayGroup(context: FloatingRootContext | FloatingContext, options?: UseDelayGroupOptions): UseDelayGroupReturn;
-export {};
+}

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

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { FloatingRootContext, Delay, FloatingContext } from "../types.js";
+import type { Delay } from "../types.js";
 export interface FloatingDelayGroupProps {
   children?: React.ReactNode;
   /**
@@ -13,43 +13,4 @@ export interface FloatingDelayGroupProps {
    * for example if there is no close delay at all.
    */
   timeoutMs?: number | undefined;
-}
-/**
- * Experimental next version of `FloatingDelayGroup` to become the default
- * in the future. This component is not yet stable.
- * Provides context for a group of floating elements that should share a
- * `delay`. Unlike `FloatingDelayGroup`, `useDelayGroup` with this
- * component does not cause a re-render of unrelated consumers of the
- * context when the delay changes.
- * @see https://floating-ui.com/docs/FloatingDelayGroup
- * @internal
- */
-export declare function FloatingDelayGroup(props: FloatingDelayGroupProps): React.JSX.Element;
-interface UseDelayGroupOptions {
-  /**
-   * Whether the trigger this hook is used in has opened the tooltip.
-   */
-  open: boolean;
-}
-interface UseDelayGroupReturn {
-  /**
-   * The delay reference object.
-   */
-  delayRef: React.RefObject<Delay>;
-  /**
-   * Whether animations should be removed.
-   */
-  isInstantPhase: boolean;
-  /**
-   * Whether a `<FloatingDelayGroup>` provider is present.
-   */
-  hasProvider: boolean;
-}
-/**
- * Enables grouping when called inside a component that's a child of a
- * `FloatingDelayGroup`.
- * @see https://floating-ui.com/docs/FloatingDelayGroup
- * @internal
- */
-export declare function useDelayGroup(context: FloatingRootContext | FloatingContext, options?: UseDelayGroupOptions): UseDelayGroupReturn;
-export {};
+}

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

@@ -106,20 +106,11 @@ function useDelayGroup(context, options = {
   } = groupContext;
   const [isInstantPhase, setIsInstantPhase] = React.useState(false);
   const openRef = React.useRef(open);
-  const isUnmountedRef = React.useRef(false);
   (0, _useIsoLayoutEffect.useIsoLayoutEffect)(() => {
     openRef.current = open;
   }, [open]);
-  (0, _useIsoLayoutEffect.useIsoLayoutEffect)(() => {
-    return () => {
-      isUnmountedRef.current = true;
-    };
-  }, []);
   (0, _useIsoLayoutEffect.useIsoLayoutEffect)(() => {
     function unset() {
-      if (!isUnmountedRef.current) {
-        setIsInstantPhase(false);
-      }
       currentContextRef.current?.setIsInstantPhase(false);
       currentIdRef.current = null;
       currentContextRef.current = null;
@@ -192,8 +183,9 @@ function useDelayGroup(context, options = {
     };
   }, [currentContextRef, currentIdRef, delayRef, floatingId, initialDelayRef, timeout]);
   return React.useMemo(() => ({
+    activeIdRef: currentIdRef,
     hasProvider,
     delayRef,
     isInstantPhase
-  }), [hasProvider, delayRef, isInstantPhase]);
+  }), [currentIdRef, hasProvider, delayRef, isInstantPhase]);
 }

package/floating-ui-react/components/FloatingDelayGroup.mjs

@@ -99,20 +99,11 @@ export function useDelayGroup(context, options = {
   } = groupContext;
   const [isInstantPhase, setIsInstantPhase] = React.useState(false);
   const openRef = React.useRef(open);
-  const isUnmountedRef = React.useRef(false);
   useIsoLayoutEffect(() => {
     openRef.current = open;
   }, [open]);
-  useIsoLayoutEffect(() => {
-    return () => {
-      isUnmountedRef.current = true;
-    };
-  }, []);
   useIsoLayoutEffect(() => {
     function unset() {
-      if (!isUnmountedRef.current) {
-        setIsInstantPhase(false);
-      }
       currentContextRef.current?.setIsInstantPhase(false);
       currentIdRef.current = null;
       currentContextRef.current = null;
@@ -185,8 +176,9 @@ export function useDelayGroup(context, options = {
     };
   }, [currentContextRef, currentIdRef, delayRef, floatingId, initialDelayRef, timeout]);
   return React.useMemo(() => ({
+    activeIdRef: currentIdRef,
     hasProvider,
     delayRef,
     isInstantPhase
-  }), [hasProvider, delayRef, isInstantPhase]);
+  }), [currentIdRef, hasProvider, delayRef, isInstantPhase]);
 }