@base-ui/react 1.6.0 → 1.7.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) {
@@ -49,17 +50,14 @@ function findRepresentativeInput(inputs) {
   return fallback;
 }
 function clearCustomValidity(element, inputs) {
-  let didClearElement = false;
-  for (const input of inputs) {
+  for (const input of inputs.keys()) {
     input.setCustomValidity('');
-    didClearElement ||= input === element;
-  }
-  if (!didClearElement) {
-    element.setCustomValidity('');
   }
+  element?.setCustomValidity('');
 }
 export function useFieldValidation(params) {
   const {
+    elementRef,
     formRef
   } = useFormContext();
   const {
@@ -71,7 +69,7 @@ export function useFieldValidation(params) {
     markedDirtyRef,
     state,
     shouldValidateOnChange,
-    getRegisteredFieldId
+    registeredFieldIdRef
   } = params;
   const {
     controlId,
@@ -79,32 +77,27 @@ 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);
 
-  // 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,8 +111,31 @@ export function useFieldValidation(params) {
         validityData: validityDataWithFormErrors
       });
     }
+    function publishAllValid(input, externalInvalid) {
+      const nextValidityData = {
+        value,
+        state: {
+          ...DEFAULT_VALIDITY_STATE,
+          valid: true
+        },
+        error: '',
+        errors: [],
+        initialValue: validityData.initialValue
+      };
+      clearCustomValidity(input, registeredInputs);
+      updateRegisteredFieldValidity(nextValidityData, externalInvalid);
+      setValidityData(nextValidityData);
+    }
+
+    // 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.
+    const element = 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.
+
     if (revalidate) {
-      if (state.valid !== false) {
+      if (state.valid !== false || !element) {
         return;
       }
       const currentNativeValidity = element.validity;
@@ -127,39 +143,20 @@ export function useFieldValidation(params) {
         // 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);
+        publishAllValid(element, false);
         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;
+      // 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' && currentNativeValidity[key]) {
+          return;
+        }
       }
 
-      // 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.
+      // 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.
     }
     function getState(el) {
       const computedState = validityKeys.reduce((acc, key) => {
@@ -189,10 +186,16 @@ export function useFieldValidation(params) {
     timeout.clear();
     let result = null;
     let validationErrors = [];
-    const nextState = getState(element);
+
+    // With no representative input the field carries no native constraint, so start from an
+    // all-valid native state and let the custom `validate` result below decide the outcome.
+    const nextState = element ? getState(element) : {
+      ...DEFAULT_VALIDITY_STATE,
+      valid: true
+    };
     let defaultValidationMessage;
     const isValidatingOnChange = shouldValidateOnChange();
-    if (element.validationMessage && !isValidatingOnChange) {
+    if (element && 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;
@@ -221,20 +224,20 @@ export function useFieldValidation(params) {
         nextState.customError = true;
         if (Array.isArray(result)) {
           validationErrors = result;
-          element.setCustomValidity(result.join('\n'));
+          element?.setCustomValidity(result.join('\n'));
         } else if (result) {
           validationErrors = [result];
-          element.setCustomValidity(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) {
+        if (element && element.validationMessage) {
           defaultValidationMessage = element.validationMessage;
           validationErrors = [element.validationMessage];
-        } else if (element.validity.valid && !nextState.valid) {
+        } else if ((!element || element.validity.valid) && !nextState.valid) {
           nextState.valid = true;
         }
       }
@@ -269,8 +272,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;

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;

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

@@ -91,10 +91,4 @@ export interface FloatingFocusManagerProps {
    * even if they are rendered outside the floating element itself.
    */
   getInsideElements?: (() => Array<Element | null | undefined>) | undefined;
-}
-/**
- * Provides focus management for the floating element.
- * @see https://floating-ui.com/docs/FloatingFocusManager
- * @internal
- */
-export declare function FloatingFocusManager(props: FloatingFocusManagerProps): React.JSX.Element;
+}

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

@@ -91,10 +91,4 @@ export interface FloatingFocusManagerProps {
    * even if they are rendered outside the floating element itself.
    */
   getInsideElements?: (() => Array<Element | null | undefined>) | undefined;
-}
-/**
- * Provides focus management for the floating element.
- * @see https://floating-ui.com/docs/FloatingFocusManager
- * @internal
- */
-export declare function FloatingFocusManager(props: FloatingFocusManagerProps): React.JSX.Element;
+}