@base-ui/react 1.3.0 → 1.4.0

package/esm/drawer/popup/DrawerPopup.js

@@ -1,6 +1,8 @@
 'use client';
 
 import * as React from 'react';
+import { error } from '@base-ui/utils/error';
+import { SafeReact } from '@base-ui/utils/safeReact';
 import { useIsoLayoutEffect } from '@base-ui/utils/useIsoLayoutEffect';
 import { useStableCallback } from '@base-ui/utils/useStableCallback';
 import { FloatingFocusManager } from "../../floating-ui-react/index.js";
@@ -118,6 +120,7 @@ export const DrawerPopup = /*#__PURE__*/React.forwardRef(function DrawerPopup(co
     finalFocus,
     initialFocus,
     render,
+    style,
     ...elementProps
   } = componentProps;
   const {
@@ -140,13 +143,13 @@ export const DrawerPopup = /*#__PURE__*/React.forwardRef(function DrawerPopup(co
   const modal = store.useState('modal');
   const mounted = store.useState('mounted');
   const nested = store.useState('nested');
-  const nestedOpenDialogCount = store.useState('nestedOpenDialogCount');
+  const nestedOpenDrawerCount = store.useState('nestedOpenDrawerCount');
   const transitionStatus = store.useState('transitionStatus');
   const open = store.useState('open');
   const openMethod = store.useState('openMethod');
   const titleElementId = store.useState('titleElementId');
   const role = store.useState('role');
-  const nestedDrawerOpen = nestedOpenDialogCount > 0;
+  const nestedDrawerOpen = nestedOpenDrawerCount > 0;
   const swipe = useDrawerViewportContext(true);
   const swiping = swipe?.swiping ?? false;
   const swipeStrength = swipe?.swipeStrength ?? null;
@@ -158,6 +161,17 @@ export const DrawerPopup = /*#__PURE__*/React.forwardRef(function DrawerPopup(co
   useDialogPortalContext();
   const [popupHeight, setPopupHeight] = React.useState(0);
   const popupHeightRef = React.useRef(0);
+  if (process.env.NODE_ENV !== 'production') {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    React.useEffect(() => {
+      if (swipe) {
+        return;
+      }
+      const ownerStackMessage = SafeReact.captureOwnerStack?.() || '';
+      const message = '<Drawer.Popup> expected to be rendered within <Drawer.Viewport>. Omitting the ' + 'viewport disables drawer swipe handling and touch scroll locking. Wrap ' + '<Drawer.Popup> in <Drawer.Viewport>.';
+      error(`${message}${ownerStackMessage}`);
+    }, [swipe]);
+  }
   const measureHeight = useStableCallback(() => {
     const popupElement = store.context.popupRef.current;
     if (!popupElement) {
@@ -317,7 +331,7 @@ export const DrawerPopup = /*#__PURE__*/React.forwardRef(function DrawerPopup(co
       style: {
         ...dragStyles,
         [DrawerBackdropCssVars.swipeProgress]: '0',
-        [DrawerPopupCssVars.nestedDrawers]: nestedOpenDialogCount,
+        [DrawerPopupCssVars.nestedDrawers]: nestedOpenDrawerCount,
         [DrawerPopupCssVars.height]: popupHeightCssVarValue,
         [DrawerPopupCssVars.snapPointOffset]: typeof snapPointOffsetValue === 'number' ? `${snapPointOffsetValue}px` : '0px',
         [DrawerPopupCssVars.frontmostHeight]: frontmostHeight ? `${frontmostHeight}px` : undefined,

package/esm/drawer/root/DrawerRoot.d.ts

@@ -62,7 +62,7 @@ export interface DrawerRootProps<Payload = unknown> {
   /**
    * ID of the trigger that the drawer is associated with.
    * This is useful in conjunction with the `open` prop to create a controlled drawer.
-   * There's no need to specify this prop when the drawer is uncontrolled (i.e. when the `open` prop is not set).
+   * There's no need to specify this prop when the drawer is uncontrolled (that is, when the `open` prop is not set).
    */
   triggerId?: string | null | undefined;
   /**

package/esm/drawer/root/DrawerRoot.js

@@ -2,6 +2,7 @@
 
 var _DrawerProviderReport, _DrawerProviderReport2;
 import * as React from 'react';
+import { addEventListener } from '@base-ui/utils/addEventListener';
 import { useControlled } from '@base-ui/utils/useControlled';
 import { useStableCallback } from '@base-ui/utils/useStableCallback';
 import { ownerWindow } from '@base-ui/utils/owner';
@@ -9,6 +10,7 @@ import { isAndroid } from '@base-ui/utils/detectBrowser';
 import { useId } from '@base-ui/utils/useId';
 import { DrawerRootContext, useDrawerRootContext } from "./DrawerRootContext.js";
 import { Dialog } from "../../dialog/index.js";
+import { IsDrawerContext } from "../../dialog/root/DialogRoot.js";
 import { createChangeEventDetails } from "../../utils/createBaseUIEventDetails.js";
 import { REASONS } from "../../utils/reasons.js";
 import { useDialogRootContext } from "../../dialog/root/DialogRootContext.js";
@@ -145,18 +147,21 @@ export function DrawerRoot(props) {
   });
   return /*#__PURE__*/_jsx(DrawerRootContext.Provider, {
     value: contextValue,
-    children: /*#__PURE__*/_jsx(Dialog.Root, {
-      open: openProp,
-      defaultOpen: defaultOpen,
-      onOpenChange: handleOpenChange,
-      onOpenChangeComplete: onOpenChangeComplete,
-      disablePointerDismissal: disablePointerDismissal,
-      modal: modal,
-      actionsRef: actionsRef,
-      handle: handle,
-      triggerId: triggerIdProp,
-      defaultTriggerId: defaultTriggerIdProp,
-      children: resolvedChildren
+    children: /*#__PURE__*/_jsx(IsDrawerContext.Provider, {
+      value: true,
+      children: /*#__PURE__*/_jsx(Dialog.Root, {
+        open: openProp,
+        defaultOpen: defaultOpen,
+        onOpenChange: handleOpenChange,
+        onOpenChangeComplete: onOpenChangeComplete,
+        disablePointerDismissal: disablePointerDismissal,
+        modal: modal,
+        actionsRef: actionsRef,
+        handle: handle,
+        triggerId: triggerIdProp,
+        defaultTriggerId: defaultTriggerIdProp,
+        children: resolvedChildren
+      })
     })
   });
 }
@@ -223,9 +228,9 @@ function DrawerProviderReporter() {
       dialogRootContext.store.setOpen(false, createChangeEventDetails(REASONS.closeWatcher, event));
     }
     const closeWatcher = new CloseWatcherCtor();
-    closeWatcher.addEventListener('close', handleCloseWatcher);
+    const unsubscribe = addEventListener(closeWatcher, 'close', handleCloseWatcher);
     return () => {
-      closeWatcher.removeEventListener('close', handleCloseWatcher);
+      unsubscribe();
       closeWatcher.destroy();
     };
   }, [dialogRootContext.store, isTopmost, open, popupElement]);

package/esm/drawer/root/DrawerRootContext.d.ts

@@ -38,6 +38,10 @@ export interface DrawerRootContext {
    * transitioning out).
    */
   hasNestedDrawer: boolean;
+  /**
+   * Called by the drawer popup to report its own measured height.
+   */
+  onPopupHeightChange: (height: number) => void;
   /**
    * Whether a nested drawer is currently being swiped.
    */
@@ -50,10 +54,6 @@ export interface DrawerRootContext {
    * Called by a nested drawer to report whether it is still present (open or transitioning out).
    */
   onNestedDrawerPresenceChange: (present: boolean) => void;
-  /**
-   * Called by the drawer popup to report its own measured height.
-   */
-  onPopupHeightChange: (height: number) => void;
   /**
    * Called by a nested drawer to report the frontmost height of its own stack.
    */

package/esm/drawer/swipe-area/DrawerSwipeArea.js

@@ -70,6 +70,7 @@ export const DrawerSwipeArea = /*#__PURE__*/React.forwardRef(function DrawerSwip
     render,
     disabled = false,
     swipeDirection: swipeDirectionProp,
+    style,
     ...elementProps
   } = componentProps;
   const {
@@ -241,6 +242,18 @@ export const DrawerSwipeArea = /*#__PURE__*/React.forwardRef(function DrawerSwip
     }
     store.setOpen(false, createChangeEventDetails(REASONS.swipe, event, swipeAreaRef.current ?? undefined));
   }
+  function resetSwipeInteractionState() {
+    swipeStartEventRef.current = null;
+    openedBySwipeRef.current = false;
+    closedOffsetRef.current = null;
+    setSwipeActive(false);
+  }
+  function finishSwipeInteraction() {
+    resetSwipeInteractionState();
+    enableDismissAfterRelease();
+    resetDragDelta();
+    clearSwipeStyles();
+  }
   const swipe = useSwipeDismiss({
     enabled,
     directions: [resolvedSwipeDirection],
@@ -299,15 +312,10 @@ export const DrawerSwipeArea = /*#__PURE__*/React.forwardRef(function DrawerSwip
       } else if (openedBySwipeRef.current) {
         closeDrawer(event);
       }
-      swipeStartEventRef.current = null;
-      openedBySwipeRef.current = false;
-      setSwipeActive(false);
-      closedOffsetRef.current = null;
-      enableDismissAfterRelease();
-      resetDragDelta();
-      clearSwipeStyles();
+      finishSwipeInteraction();
       return false;
-    }
+    },
+    onCancel: finishSwipeInteraction
   });
   const swipePointerProps = swipe.getPointerProps();
   const swipeTouchProps = swipe.getTouchProps();
@@ -317,10 +325,7 @@ export const DrawerSwipeArea = /*#__PURE__*/React.forwardRef(function DrawerSwip
       resetSwipe();
       resetDragDelta();
       clearSwipeStyles();
-      setSwipeActive(false);
-      openedBySwipeRef.current = false;
-      swipeStartEventRef.current = null;
-      closedOffsetRef.current = null;
+      resetSwipeInteractionState();
     }
   }, [clearSwipeStyles, enabled, resetDragDelta, resetSwipe]);
   React.useEffect(() => {

package/esm/drawer/viewport/DrawerViewport.js

@@ -3,6 +3,7 @@
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
 import { isElement } from '@floating-ui/utils/dom';
+import { addEventListener } from '@base-ui/utils/addEventListener';
 import { ownerDocument, ownerWindow } from '@base-ui/utils/owner';
 import { useAnimationFrame } from '@base-ui/utils/useAnimationFrame';
 import { useStableCallback } from '@base-ui/utils/useStableCallback';
@@ -20,7 +21,7 @@ import { DrawerBackdropCssVars } from "../backdrop/DrawerBackdropCssVars.js";
 import { DRAWER_CONTENT_ATTRIBUTE } from "../content/DrawerContentDataAttributes.js";
 import { REASONS } from "../../utils/reasons.js";
 import { createChangeEventDetails } from "../../utils/createBaseUIEventDetails.js";
-import { contains } from "../../floating-ui-react/utils.js";
+import { activeElement, contains, getTarget } from "../../floating-ui-react/utils.js";
 import { DrawerViewportContext } from "./DrawerViewportContext.js";
 import { TransitionStatusDataAttributes } from "../../utils/stateAttributesMapping.js";
 import { findScrollableTouchTarget } from "../../utils/scrollable.js";
@@ -49,6 +50,7 @@ export const DrawerViewport = /*#__PURE__*/React.forwardRef(function DrawerViewp
   const {
     className,
     render,
+    style,
     children,
     ...elementProps
   } = props;
@@ -67,10 +69,10 @@ export const DrawerViewport = /*#__PURE__*/React.forwardRef(function DrawerViewp
   const open = store.useState('open');
   const mounted = store.useState('mounted');
   const nested = store.useState('nested');
-  const nestedOpenDialogCount = store.useState('nestedOpenDialogCount');
+  const nestedOpenDrawerCount = store.useState('nestedOpenDrawerCount');
   const viewportElement = store.useState('viewportElement');
   const popupElementState = store.useState('popupElement');
-  const nestedDrawerOpen = nestedOpenDialogCount > 0;
+  const nestedDrawerOpen = nestedOpenDrawerCount > 0;
   const scrollAxis = swipeDirection === 'left' || swipeDirection === 'right' ? 'horizontal' : 'vertical';
   const isVerticalScrollAxis = scrollAxis === 'vertical';
   const crossScrollAxis = isVerticalScrollAxis ? 'horizontal' : 'vertical';
@@ -141,6 +143,13 @@ export const DrawerViewport = /*#__PURE__*/React.forwardRef(function DrawerViewp
     store.context.popupRef.current?.removeAttribute(TransitionStatusDataAttributes.endingStyle);
     setSwipeRelease(null);
   });
+  const finishNestedSwipe = useStableCallback(() => {
+    if (!nestedSwipeActiveRef.current) {
+      return;
+    }
+    nestedSwipeActiveRef.current = false;
+    notifyParentSwipingChange?.(false);
+  });
   const applySwipeProgress = useStableCallback(({
     resolvedProgress,
     shouldTrackProgress,
@@ -148,9 +157,12 @@ export const DrawerViewport = /*#__PURE__*/React.forwardRef(function DrawerViewp
   }) => {
     const isActive = open && !nested && shouldTrackProgress;
     const swipeProgress = isActive ? resolvedProgress : 0;
+    const nestedSwipeProgress = open && shouldTrackProgress ? resolvedProgress : 0;
     if (notifyParent && notifyParentSwipeProgressChange) {
-      const nestedSwipeProgress = open && shouldTrackProgress ? resolvedProgress : 0;
       notifyParentSwipeProgressChange(nestedSwipeProgress);
+      if (nestedSwipeProgress <= 0) {
+        finishNestedSwipe();
+      }
     }
     visualStateStore?.set({
       swipeProgress,
@@ -269,9 +281,8 @@ export const DrawerViewport = /*#__PURE__*/React.forwardRef(function DrawerViewp
     },
     onSwipingChange(swiping) {
       setBackdropSwipingAttribute(store.context.backdropRef.current, swiping);
-      if (!swiping) {
-        nestedSwipeActiveRef.current = false;
-        notifyParentSwipingChange?.(false);
+      if (!swiping && !notifyParentSwipeProgressChange) {
+        finishNestedSwipe();
       }
     },
     swipeThreshold({
@@ -353,7 +364,7 @@ export const DrawerViewport = /*#__PURE__*/React.forwardRef(function DrawerViewp
         if (!popupElement) {
           return;
         }
-        notifyParentSwipingChange?.(false);
+        finishNestedSwipe();
         setSwipeDismissed(true);
         popupElement.style.removeProperty('transition');
         popupElement.setAttribute(TransitionStatusDataAttributes.endingStyle, '');
@@ -638,15 +649,10 @@ export const DrawerViewport = /*#__PURE__*/React.forwardRef(function DrawerViewp
       }
       updateTouchScrollPosition(touchState, touch);
     }
-    doc.addEventListener('touchmove', handleNativeTouchMove, {
+    return addEventListener(doc, 'touchmove', handleNativeTouchMove, {
       passive: false,
       capture: true
     });
-    return () => {
-      doc.removeEventListener('touchmove', handleNativeTouchMove, {
-        capture: true
-      });
-    };
   }, [mounted, nestedDrawerOpen, open, popupElementState, isVerticalScrollAxis, scrollAxis, swipeDirection, viewportElement]);
   React.useEffect(() => {
     if (!snapPointRange || swipe.swiping) {
@@ -683,9 +689,9 @@ export const DrawerViewport = /*#__PURE__*/React.forwardRef(function DrawerViewp
         frontmostHeight: 0
       });
       setBackdropSwipingAttribute(store.context.backdropRef.current, false);
-      notifyParentSwipingChange?.(false);
+      finishNestedSwipe();
     };
-  }, [notifyParentSwipingChange, store, visualStateStore]);
+  }, [finishNestedSwipe, store, visualStateStore]);
   const swipeProviderValue = React.useMemo(() => ({
     swiping: swipe.swiping,
     getDragStyles: swipe.getDragStyles,
@@ -775,10 +781,16 @@ export const DrawerViewport = /*#__PURE__*/React.forwardRef(function DrawerViewp
           return;
         }
         const rootElement = viewportElement ?? popupElementState;
-        const target = isElement(event.target) ? event.target : null;
+        const eventTarget = getTarget(event.nativeEvent);
+        const target = isElement(eventTarget) ? eventTarget : null;
+        if (rootElement && target && !contains(rootElement, target)) {
+          ignoreTouchSwipeRef.current = true;
+          touchScrollStateRef.current = null;
+          return;
+        }
         let scrollTarget = null;
         let hasCrossAxisScrollableContent = false;
-        if (rootElement && target && contains(rootElement, target)) {
+        if (rootElement && target) {
           scrollTarget = findScrollableTouchTarget(target, rootElement, scrollAxis);
           hasCrossAxisScrollableContent = findScrollableTouchTarget(target, rootElement, crossScrollAxis) != null;
         }
@@ -878,13 +890,13 @@ function hasExpandedSelectionWithinTarget(selection, target) {
   return selection.containsNode(target, true) || contains(target, anchorElement) || contains(target, focusElement);
 }
 function shouldIgnoreSwipeForTextSelection(doc, rootElement) {
-  const activeElement = doc.activeElement;
-  const activeElementWithinRoot = Boolean(activeElement && contains(rootElement, activeElement));
-  if (activeElementWithinRoot && isTextSelectionControl(activeElement)) {
+  const activeEl = activeElement(doc);
+  const activeElementWithinRoot = Boolean(activeEl && contains(rootElement, activeEl));
+  if (activeElementWithinRoot && isTextSelectionControl(activeEl)) {
     const {
       selectionStart,
       selectionEnd
-    } = activeElement;
+    } = activeEl;
     if (selectionStart != null && selectionEnd != null && selectionStart < selectionEnd) {
       return true;
     }
@@ -900,7 +912,7 @@ function isEventOnRangeInput(event, win) {
   if (composedPath) {
     return composedPath.some(pathTarget => isRangeInput(pathTarget, win));
   }
-  return isRangeInput(event.target, win);
+  return isRangeInput(getTarget(event), win);
 }
 function isReactTouchEventOnRangeInput(event) {
   return isEventOnRangeInput(event.nativeEvent, ownerWindow(event.currentTarget));

package/esm/field/control/FieldControl.js

@@ -4,12 +4,13 @@ import * as React from 'react';
 import { useControlled } from '@base-ui/utils/useControlled';
 import { useIsoLayoutEffect } from '@base-ui/utils/useIsoLayoutEffect';
 import { ownerDocument } from '@base-ui/utils/owner';
+import { useStableCallback } from '@base-ui/utils/useStableCallback';
 import { useFieldRootContext } from "../root/FieldRootContext.js";
+import { useRegisterFieldControl } from "../root/useRegisterFieldControl.js";
 import { useLabelableContext } from "../../labelable-provider/LabelableContext.js";
 import { useLabelableId } from "../../labelable-provider/useLabelableId.js";
 import { fieldValidityMapping } from "../utils/constants.js";
 import { useRenderElement } from "../../utils/useRenderElement.js";
-import { useField } from "../useField.js";
 import { createChangeEventDetails } from "../../utils/createBaseUIEventDetails.js";
 import { REASONS } from "../../utils/reasons.js";
 import { activeElement } from "../../floating-ui-react/utils.js";
@@ -35,6 +36,7 @@ export const FieldControl = /*#__PURE__*/React.forwardRef(function FieldControl(
     onValueChange,
     defaultValue,
     autoFocus = false,
+    style,
     ...elementProps
   } = componentProps;
   const {
@@ -83,13 +85,11 @@ export const FieldControl = /*#__PURE__*/React.forwardRef(function FieldControl(
   });
   const isControlled = valueProp !== undefined;
   const value = isControlled ? valueUnwrapped : undefined;
-  useField({
+  const getFieldValue = useStableCallback(() => validation.inputRef.current?.value);
+  useRegisterFieldControl(validation.inputRef, {
     id,
-    name,
-    commit: validation.commit,
     value,
-    getValue: () => validation.inputRef.current?.value,
-    controlRef: validation.inputRef
+    getValue: getFieldValue
   });
   const element = useRenderElement('input', componentProps, {
     ref: [forwardedRef, inputRef],

package/esm/field/description/FieldDescription.js

@@ -19,6 +19,7 @@ export const FieldDescription = /*#__PURE__*/React.forwardRef(function FieldDesc
     render,
     id: idProp,
     className,
+    style,
     ...elementProps
   } = componentProps;
   const id = useBaseUiId(idProp);

package/esm/field/error/FieldError.d.ts

@@ -17,7 +17,7 @@ export interface FieldErrorState extends FieldRootState {
 }
 export interface FieldErrorProps extends BaseUIComponentProps<'div', FieldErrorState> {
   /**
-   * Determines whether to show the error message according to the field’s
+   * Determines whether to show the error message according to the field's
    * [ValidityState](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState).
    * Specifying `true` will always show the error message, and lets external libraries
    * control the visibility.

package/esm/field/error/FieldError.js

@@ -29,6 +29,7 @@ export const FieldError = /*#__PURE__*/React.forwardRef(function FieldError(comp
     id: idProp,
     className,
     match,
+    style,
     ...elementProps
   } = componentProps;
   const id = useBaseUiId(idProp);
@@ -44,13 +45,14 @@ export const FieldError = /*#__PURE__*/React.forwardRef(function FieldError(comp
     errors
   } = useFormContext();
   const formError = name ? errors[name] : null;
+  const hasSpecificMatch = typeof match === 'string';
   let rendered = false;
-  if (formError || match === true) {
+  if (match === true) {
     rendered = true;
-  } else if (match) {
+  } else if (hasSpecificMatch) {
     rendered = Boolean(validityData.state[match]);
   } else {
-    rendered = validityData.state.valid === false;
+    rendered = Boolean(formError) || validityData.state.valid === false;
   }
   const {
     mounted,
@@ -69,11 +71,12 @@ export const FieldError = /*#__PURE__*/React.forwardRef(function FieldError(comp
   const errorRef = React.useRef(null);
   const [lastRenderedMessage, setLastRenderedMessage] = React.useState(null);
   const [lastRenderedMessageKey, setLastRenderedMessageKey] = React.useState(null);
-  const errorMessage = formError || (validityData.errors.length > 1 ? /*#__PURE__*/_jsx("ul", {
+  const clientErrorMessage = validityData.errors.length > 1 ? /*#__PURE__*/_jsx("ul", {
     children: validityData.errors.map(message => /*#__PURE__*/_jsx("li", {
       children: message
     }, message))
-  }) : validityData.error);
+  }) : validityData.error;
+  const errorMessage = hasSpecificMatch ? clientErrorMessage : formError || clientErrorMessage;
   let errorKey = validityData.error;
   if (formError != null) {
     errorKey = Array.isArray(formError) ? JSON.stringify(formError) : formError;

package/esm/field/item/FieldItem.js

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

package/esm/field/label/FieldLabel.d.ts

@@ -12,7 +12,7 @@ export interface FieldLabelState extends FieldRootState {}
 export interface FieldLabelProps extends BaseUIComponentProps<'label', FieldLabelState> {
   /**
    * 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>`).
+   * Set to `false` if the rendered element is not a label (for example, `<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

package/esm/field/label/FieldLabel.js

@@ -19,6 +19,7 @@ export const FieldLabel = /*#__PURE__*/React.forwardRef(function FieldLabel(comp
   const {
     render,
     className,
+    style,
     id: idProp,
     nativeLabel = true,
     ...elementProps

package/esm/field/root/FieldRoot.js

@@ -9,6 +9,7 @@ import { useFormContext } from "../../form/FormContext.js";
 import { LabelableProvider } from "../../labelable-provider/index.js";
 import { useRenderElement } from "../../utils/useRenderElement.js";
 import { useFieldValidation } from "./useFieldValidation.js";
+import { useFieldControlRegistration } from "./useFieldControlRegistration.js";
 
 /**
  * @internal
@@ -32,6 +33,7 @@ const FieldRootInner = /*#__PURE__*/React.forwardRef(function FieldRootInner(com
     dirty: dirtyProp,
     touched: touchedProp,
     actionsRef,
+    style,
     ...elementProps
   } = componentProps;
   const {
@@ -95,6 +97,14 @@ const FieldRootInner = /*#__PURE__*/React.forwardRef(function FieldRootInner(com
     markedDirtyRef.current = true;
     validation.commit(validityData.value);
   }, [validation, validityData]);
+  const registerFieldControl = useFieldControlRegistration({
+    commit: validation.commit,
+    invalid,
+    markedDirtyRef,
+    name,
+    setValidityData,
+    validityData
+  });
   React.useImperativeHandle(actionsRef, () => ({
     validate: handleImperativeValidate
   }), [handleImperativeValidate]);
@@ -118,8 +128,9 @@ const FieldRootInner = /*#__PURE__*/React.forwardRef(function FieldRootInner(com
     shouldValidateOnChange,
     state,
     markedDirtyRef,
+    registerFieldControl,
     validation
-  }), [invalid, name, validityData, disabled, touched, setTouched, dirty, setDirty, filled, setFilled, focused, setFocused, validate, validationMode, validationDebounceTime, shouldValidateOnChange, state, validation]);
+  }), [invalid, name, validityData, disabled, touched, setTouched, dirty, setDirty, filled, setFilled, focused, setFocused, validate, validationMode, validationDebounceTime, shouldValidateOnChange, state, registerFieldControl, validation]);
   const element = useRenderElement('div', componentProps, {
     ref: forwardedRef,
     state,

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

@@ -2,6 +2,7 @@ import * as React from 'react';
 import type { FieldValidityData, FieldRootState } from "./FieldRoot.js";
 import type { Form } from "../../form/index.js";
 import type { UseFieldValidationReturnValue } from "./useFieldValidation.js";
+import type { FieldControlRegistration } from "./useFieldControlRegistration.js";
 export interface FieldRootContext {
   invalid: boolean | undefined;
   name: string | undefined;
@@ -22,6 +23,7 @@ export interface FieldRootContext {
   shouldValidateOnChange: () => boolean;
   state: FieldRootState;
   markedDirtyRef: React.RefObject<boolean>;
+  registerFieldControl: (source: symbol, registration: FieldControlRegistration | undefined) => void;
   validation: UseFieldValidationReturnValue;
 }
 export declare const FieldRootContext: React.Context<FieldRootContext>;

package/esm/field/root/FieldRootContext.js

@@ -33,6 +33,7 @@ export const FieldRootContext = /*#__PURE__*/React.createContext({
   markedDirtyRef: {
     current: false
   },
+  registerFieldControl: NOOP,
   validation: {
     getValidationProps: (props = EMPTY_OBJECT) => props,
     getInputValidationProps: (props = EMPTY_OBJECT) => props,

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

@@ -0,0 +1,17 @@
+import * as React from 'react';
+import type { FieldValidityData } from "./FieldRoot.js";
+export interface FieldControlRegistration {
+  controlRef: React.RefObject<any>;
+  getValue?: (() => unknown) | undefined;
+  id: string | undefined;
+  value: unknown;
+}
+export declare function useFieldControlRegistration(params: UseFieldControlRegistrationParameters): (source: symbol, registration: FieldControlRegistration | undefined) => void;
+export interface UseFieldControlRegistrationParameters {
+  commit: (value: unknown) => void;
+  invalid: boolean;
+  markedDirtyRef: React.RefObject<boolean>;
+  name: string | undefined;
+  setValidityData: React.Dispatch<React.SetStateAction<FieldValidityData>>;
+  validityData: FieldValidityData;
+}