@base-ui/react 1.3.0 → 1.4.0

package/esm/utils/usePopupViewport.js

@@ -7,6 +7,7 @@ import { useAnimationFrame } from '@base-ui/utils/useAnimationFrame';
 import { usePreviousValue } from '@base-ui/utils/usePreviousValue';
 import { useIsoLayoutEffect } from '@base-ui/utils/useIsoLayoutEffect';
 import { useStableCallback } from '@base-ui/utils/useStableCallback';
+import { ownerDocument } from '@base-ui/utils/owner';
 import { useAnimationsFinished } from "./useAnimationsFinished.js";
 import { usePopupAutoResize } from "./usePopupAutoResize.js";
 import { useDirection } from "../direction-provider/index.js";
@@ -101,7 +102,7 @@ export function usePopupViewport(parameters) {
     if (!source) {
       return;
     }
-    const wrapper = document.createElement('div');
+    const wrapper = ownerDocument(source).createElement('div');
     for (const child of Array.from(source.childNodes)) {
       wrapper.appendChild(child.cloneNode(true));
     }

package/esm/utils/usePositioner.d.ts

@@ -0,0 +1,23 @@
+import { type UseRenderElementComponentProps } from "./useRenderElement.js";
+import type { TransitionStatus } from "./useTransitionStatus.js";
+interface UsePositionerOptions {
+  styles: React.CSSProperties;
+  transitionStatus: TransitionStatus;
+  props?: React.ComponentProps<'div'> | undefined;
+  refs?: React.Ref<HTMLDivElement> | (React.Ref<HTMLDivElement> | undefined)[] | undefined;
+  hidden?: boolean | undefined;
+  inert?: boolean | undefined;
+}
+/**
+ * Renders the shared outer Positioner element used by popup components.
+ * Applies the common role, hidden state, transition styles, state attributes, and optional inert styling.
+ */
+export declare function usePositioner<State extends Record<string, any>>(componentProps: UseRenderElementComponentProps<State>, state: State, {
+  styles,
+  transitionStatus,
+  props,
+  refs,
+  hidden,
+  inert
+}: UsePositionerOptions): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export {};

package/esm/utils/usePositioner.js

@@ -0,0 +1,34 @@
+'use client';
+
+import { popupStateMapping } from "./popupStateMapping.js";
+import { useRenderElement } from "./useRenderElement.js";
+import { getDisabledMountTransitionStyles } from "./getDisabledMountTransitionStyles.js";
+/**
+ * Renders the shared outer Positioner element used by popup components.
+ * Applies the common role, hidden state, transition styles, state attributes, and optional inert styling.
+ */
+export function usePositioner(componentProps, state, {
+  styles,
+  transitionStatus,
+  props,
+  refs,
+  hidden,
+  inert = false
+}) {
+  const style = {
+    ...styles
+  };
+  if (inert) {
+    style.pointerEvents = 'none';
+  }
+  return useRenderElement('div', componentProps, {
+    state,
+    ref: refs,
+    props: [{
+      role: 'presentation',
+      hidden,
+      style
+    }, getDisabledMountTransitionStyles(transitionStatus), props],
+    stateAttributesMapping: popupStateMapping
+  });
+}

package/esm/utils/usePressAndHold.d.ts

@@ -0,0 +1,58 @@
+import * as React from 'react';
+export interface UsePressAndHoldParameters {
+  disabled: boolean;
+  readOnly?: boolean | undefined;
+  /**
+   * Called on each tick during a hold. Return `false` to stop the auto-change sequence.
+   */
+  tick: (triggerEvent?: Event) => boolean;
+  /**
+   * Called when the hold ends via the global `pointerup` event.
+   */
+  onStop?: ((nativeEvent: PointerEvent) => void) | undefined;
+  /**
+   * Interval between ticks once the hold is active.
+   * @default 60
+   */
+  tickDelay?: number | undefined;
+  /**
+   * Delay before the repeating ticks start after the initial hold.
+   * @default 400
+   */
+  startDelay?: number | undefined;
+  /**
+   * Pointer movement distance (px) that cancels the hold and is treated as scrolling.
+   * @default 8
+   */
+  scrollDistance?: number | undefined;
+  /**
+   * Ref to the anchor element used to resolve `ownerWindow`.
+   */
+  elementRef: React.RefObject<HTMLElement | null>;
+}
+export interface UsePressAndHoldReturnValue {
+  pointerHandlers: {
+    onTouchStart: React.TouchEventHandler<HTMLElement>;
+    onTouchEnd: React.TouchEventHandler<HTMLElement>;
+    onPointerDown: React.PointerEventHandler<HTMLElement>;
+    onPointerUp: React.PointerEventHandler<HTMLElement>;
+    onPointerMove: React.PointerEventHandler<HTMLElement>;
+    onMouseEnter: React.MouseEventHandler<HTMLElement>;
+    onMouseLeave: React.MouseEventHandler<HTMLElement>;
+    onMouseUp: React.MouseEventHandler<HTMLElement>;
+  };
+  /**
+   * Returns `true` if the `onClick` handler should be skipped.
+   * Use this in the element's `onClick` to prevent double-firing on mouse clicks
+   * (already handled by `onPointerDown`) and to suppress the synthesized click
+   * that browsers fire after a touch hold.
+   */
+  shouldSkipClick: (event: React.MouseEvent) => boolean;
+}
+/**
+ * Adds press-and-hold behavior to a button element.
+ * On pointer down, performs one action immediately, then after a delay starts
+ * continuous repeated actions at a fixed interval. Handles mouse, touch, and pen
+ * inputs correctly, including Android-specific quirks.
+ */
+export declare function usePressAndHold(params: UsePressAndHoldParameters): UsePressAndHoldReturnValue;

package/esm/utils/usePressAndHold.js

@@ -0,0 +1,192 @@
+'use client';
+
+import * as React from 'react';
+import { addEventListener } from '@base-ui/utils/addEventListener';
+import { useTimeout } from '@base-ui/utils/useTimeout';
+import { useInterval } from '@base-ui/utils/useInterval';
+import { useStableCallback } from '@base-ui/utils/useStableCallback';
+import { ownerWindow } from '@base-ui/utils/owner';
+const DEFAULT_TICK_DELAY = 60;
+const DEFAULT_START_DELAY = 400;
+const DEFAULT_SCROLL_DISTANCE = 8;
+const TOUCH_TIMEOUT = 50;
+const MAX_POINTER_MOVES_AFTER_TOUCH = 3;
+
+// Treat pen as touch-like to avoid forcing the software keyboard on stylus taps.
+// Linux Chrome may emit "pen" historically for mouse usage due to a bug, but the touch path
+// still works with minor behavioral differences.
+function isTouchLikePointerType(pointerType) {
+  return pointerType === 'touch' || pointerType === 'pen';
+}
+/**
+ * Adds press-and-hold behavior to a button element.
+ * On pointer down, performs one action immediately, then after a delay starts
+ * continuous repeated actions at a fixed interval. Handles mouse, touch, and pen
+ * inputs correctly, including Android-specific quirks.
+ */
+export function usePressAndHold(params) {
+  const {
+    disabled,
+    readOnly = false,
+    tick,
+    onStop,
+    tickDelay = DEFAULT_TICK_DELAY,
+    startDelay = DEFAULT_START_DELAY,
+    scrollDistance = DEFAULT_SCROLL_DISTANCE,
+    elementRef
+  } = params;
+  const startTickTimeout = useTimeout();
+  const tickInterval = useInterval();
+  const intentionalTouchCheckTimeout = useTimeout();
+  const isPressedRef = React.useRef(false);
+  const movesAfterTouchRef = React.useRef(0);
+  const downCoordsRef = React.useRef({
+    x: 0,
+    y: 0
+  });
+  const isTouchingButtonRef = React.useRef(false);
+  const ignoreClickRef = React.useRef(false);
+  const pointerTypeRef = React.useRef('');
+  const unsubscribeFromGlobalContextMenuRef = React.useRef(() => {});
+  const stopAutoChange = useStableCallback(() => {
+    intentionalTouchCheckTimeout.clear();
+    startTickTimeout.clear();
+    tickInterval.clear();
+    unsubscribeFromGlobalContextMenuRef.current();
+    movesAfterTouchRef.current = 0;
+  });
+  const startAutoChange = useStableCallback(triggerNativeEvent => {
+    stopAutoChange();
+    const element = elementRef.current;
+    if (!element) {
+      return;
+    }
+    const win = ownerWindow(element);
+    function handleContextMenu(event) {
+      event.preventDefault();
+    }
+
+    // A global context menu listener is necessary to prevent the context menu from
+    // appearing when the touch is slightly outside of the element's hit area.
+    unsubscribeFromGlobalContextMenuRef.current = addEventListener(win, 'contextmenu', handleContextMenu);
+    addEventListener(win, 'pointerup', event => {
+      isPressedRef.current = false;
+      stopAutoChange();
+      onStop?.(event);
+    }, {
+      once: true
+    });
+    if (!tick(triggerNativeEvent)) {
+      stopAutoChange();
+      return;
+    }
+    startTickTimeout.start(startDelay, () => {
+      tickInterval.start(tickDelay, () => {
+        if (!tick(triggerNativeEvent)) {
+          stopAutoChange();
+        }
+      });
+    });
+  });
+  React.useEffect(() => () => stopAutoChange(), [stopAutoChange]);
+  const pointerHandlers = {
+    onTouchStart() {
+      isTouchingButtonRef.current = true;
+    },
+    onTouchEnd() {
+      isTouchingButtonRef.current = false;
+    },
+    onPointerDown(event) {
+      const isMainButton = !event.button || event.button === 0;
+      if (event.defaultPrevented || !isMainButton || disabled || readOnly) {
+        return;
+      }
+      pointerTypeRef.current = event.pointerType;
+      ignoreClickRef.current = false;
+      isPressedRef.current = true;
+      downCoordsRef.current = {
+        x: event.clientX,
+        y: event.clientY
+      };
+      const isTouchPointer = isTouchLikePointerType(event.pointerType);
+      if (!isTouchPointer) {
+        event.preventDefault();
+        startAutoChange(event.nativeEvent);
+      } else {
+        // Check if the pointerdown was intentional and not the result of a scroll or
+        // pinch-zoom. In that case, we don't want to start the auto-change sequence.
+        intentionalTouchCheckTimeout.start(TOUCH_TIMEOUT, () => {
+          const moves = movesAfterTouchRef.current;
+          movesAfterTouchRef.current = 0;
+          // Only start auto-change if the touch is still pressed (prevents races
+          // with pointerup occurring before the timeout fires on quick taps).
+          const stillPressed = isPressedRef.current;
+          if (stillPressed && moves < MAX_POINTER_MOVES_AFTER_TOUCH) {
+            startAutoChange(event.nativeEvent);
+            ignoreClickRef.current = true; // synthesized click after hold should be ignored
+          } else {
+            // No auto-change (simple tap or scroll gesture), allow the click handler
+            // to perform a single action.
+            ignoreClickRef.current = false;
+            stopAutoChange();
+          }
+        });
+      }
+    },
+    onPointerUp(event) {
+      // Ensure we mark the press as released for touch flows even if auto-change never
+      // started, so the delayed auto-change check won't start after a quick tap.
+      if (isTouchLikePointerType(event.pointerType)) {
+        isPressedRef.current = false;
+      }
+    },
+    onPointerMove(event) {
+      if (disabled || readOnly || !isTouchLikePointerType(event.pointerType) || !isPressedRef.current) {
+        return;
+      }
+      if (movesAfterTouchRef.current != null) {
+        movesAfterTouchRef.current += 1;
+      }
+      const {
+        x,
+        y
+      } = downCoordsRef.current;
+      const dx = x - event.clientX;
+      const dy = y - event.clientY;
+      if (dx ** 2 + dy ** 2 > scrollDistance ** 2) {
+        stopAutoChange();
+      }
+    },
+    onMouseEnter(event) {
+      if (event.defaultPrevented || disabled || readOnly || !isPressedRef.current || isTouchingButtonRef.current || isTouchLikePointerType(pointerTypeRef.current)) {
+        return;
+      }
+      startAutoChange(event.nativeEvent);
+    },
+    onMouseLeave() {
+      if (isTouchingButtonRef.current) {
+        return;
+      }
+      stopAutoChange();
+    },
+    onMouseUp() {
+      if (isTouchingButtonRef.current) {
+        return;
+      }
+      stopAutoChange();
+    }
+  };
+  const shouldSkipClick = useStableCallback(event => {
+    if (event.defaultPrevented) {
+      return true;
+    }
+    if (isTouchLikePointerType(pointerTypeRef.current)) {
+      return ignoreClickRef.current;
+    }
+    return event.detail !== 0;
+  });
+  return {
+    pointerHandlers,
+    shouldSkipClick
+  };
+}

package/esm/utils/useRenderElement.js

@@ -46,7 +46,12 @@ function useRenderElementProps(componentProps, params = {}) {
   const className = enabled ? resolveClassName(classNameProp, state) : undefined;
   const style = enabled ? resolveStyle(styleProp, state) : undefined;
   const stateProps = enabled ? getStateAttributesProps(state, stateAttributesMapping) : EMPTY_OBJECT;
-  const outProps = enabled ? mergeObjects(stateProps, Array.isArray(props) ? mergePropsN(props) : props) ?? EMPTY_OBJECT : EMPTY_OBJECT;
+  const resolvedProps = enabled && props ? resolveRenderFunctionProps(props) : undefined;
+
+  // Ensure outProps is always a new mutable object when enabled, never EMPTY_OBJECT.
+  // This prevents potential TypeError when setting ref, className, or style properties,
+  // since EMPTY_OBJECT is frozen and mutations would fail in strict mode.
+  const outProps = enabled ? mergeObjects(stateProps, resolvedProps) ?? {} : EMPTY_OBJECT;
 
   // SAFETY: The `useMergedRefs` functions use a single hook to store the same value,
   // switching between them at runtime is safe. If this assertion fails, React will
@@ -74,12 +79,20 @@ function useRenderElementProps(componentProps, params = {}) {
   }
   return outProps;
 }
+function resolveRenderFunctionProps(props) {
+  if (Array.isArray(props)) {
+    return mergePropsN(props);
+  }
+  return mergeProps(undefined, props);
+}
 
 // The symbol React uses internally for lazy components
 // https://github.com/facebook/react/blob/a0566250b210499b4c5677f5ac2eedbd71d51a1b/packages/shared/ReactSymbols.js#L31
 //
 // TODO delete once https://github.com/facebook/react/issues/32392 is fixed
 const REACT_LAZY_TYPE = Symbol.for('react.lazy');
+const COMPONENT_IDENTIFIER_PATTERN = /^[A-Z][A-Za-z0-9$]*$/;
+const LOWERCASE_CHARACTER_PATTERN = /[a-z]/;
 function evaluateRenderProp(element, render, props, state) {
   if (render) {
     if (typeof render === 'function') {
@@ -127,8 +140,10 @@ function warnIfRenderPropLooksLikeComponent(renderFn) {
   if (functionName.length === 0) {
     return;
   }
-  const firstCharacterCode = functionName.charCodeAt(0);
-  if (firstCharacterCode < 65 || firstCharacterCode > 90) {
+  if (!COMPONENT_IDENTIFIER_PATTERN.test(functionName)) {
+    return;
+  }
+  if (!LOWERCASE_CHARACTER_PATTERN.test(functionName)) {
     return;
   }
   warn(`The \`render\` prop received a function named \`${functionName}\` that starts with an uppercase letter.`, 'This usually means a React component was passed directly as `render={Component}`.', 'Base UI calls `render` as a plain function, which can break the Rules of Hooks during reconciliation.', 'If this is an intentional render callback, rename it to start with a lowercase letter.', 'Use `render={<Component />}` or `render={(props) => <Component {...props} />}` instead.', 'https://base-ui.com/r/invalid-render-prop');

package/esm/utils/useSwipeDismiss.d.ts

@@ -63,6 +63,7 @@ export interface UseSwipeDismissOptions {
   trackDrag?: boolean | undefined;
   onSwipeStart?: ((event: PointerEvent | TouchEvent) => void) | undefined;
   onProgress?: ((progress: number, details?: UseSwipeDismissProgressDetails) => void) | undefined;
+  onCancel?: ((event: PointerEvent | TouchEvent) => void) | undefined;
   /**
    * Called when the swipe interaction starts or ends.
    */

package/esm/utils/useSwipeDismiss.js

@@ -2,7 +2,7 @@
 
 import * as React from 'react';
 import { useStableCallback } from '@base-ui/utils/useStableCallback';
-import { ownerDocument } from '@base-ui/utils/owner';
+import { ownerDocument, ownerWindow } from '@base-ui/utils/owner';
 import { contains, getTarget } from "../floating-ui-react/utils.js";
 import { findScrollableTouchTarget, hasScrollableAncestor } from "./scrollable.js";
 import { clamp } from "./clamp.js";
@@ -29,7 +29,7 @@ export function getDisplacement(direction, deltaX, deltaY) {
   }
 }
 export function getElementTransform(element) {
-  const computedStyle = window.getComputedStyle(element);
+  const computedStyle = ownerWindow(element).getComputedStyle(element);
   const transform = computedStyle.transform;
   let translateX = 0;
   let translateY = 0;
@@ -87,6 +87,7 @@ export function useSwipeDismiss(options) {
     swipeThreshold: swipeThresholdProp,
     onDismiss,
     onProgress,
+    onCancel,
     onSwipeStart,
     onRelease,
     onSwipingChange,
@@ -422,6 +423,7 @@ export function useSwipeDismiss(options) {
       deltaY: 0,
       direction: undefined
     });
+    onCancel?.(event.nativeEvent);
   }
   function applyDirectionalDamping(deltaX, deltaY) {
     const exponent = value => value >= 0 ? value ** 0.5 : -(Math.abs(value) ** 0.5);

package/esm/utils/useTransitionStatus.js

@@ -58,10 +58,10 @@ export function useTransitionStatus(open, enableIdleState = false, deferEndingSt
     return () => {
       AnimationFrame.cancel(frame);
     };
-  }, [enableIdleState, open, mounted, setTransitionStatus, transitionStatus]);
-  return React.useMemo(() => ({
+  }, [enableIdleState, open, mounted, transitionStatus]);
+  return {
     mounted,
     setMounted,
     transitionStatus
-  }), [mounted, transitionStatus]);
+  };
 }

package/field/control/FieldControl.js

@@ -10,12 +10,13 @@ var React = _interopRequireWildcard(require("react"));
 var _useControlled = require("@base-ui/utils/useControlled");
 var _useIsoLayoutEffect = require("@base-ui/utils/useIsoLayoutEffect");
 var _owner = require("@base-ui/utils/owner");
+var _useStableCallback = require("@base-ui/utils/useStableCallback");
 var _FieldRootContext = require("../root/FieldRootContext");
+var _useRegisterFieldControl = require("../root/useRegisterFieldControl");
 var _LabelableContext = require("../../labelable-provider/LabelableContext");
 var _useLabelableId = require("../../labelable-provider/useLabelableId");
 var _constants = require("../utils/constants");
 var _useRenderElement = require("../../utils/useRenderElement");
-var _useField = require("../useField");
 var _createBaseUIEventDetails = require("../../utils/createBaseUIEventDetails");
 var _reasons = require("../../utils/reasons");
 var _utils = require("../../floating-ui-react/utils");
@@ -40,6 +41,7 @@ const FieldControl = exports.FieldControl = /*#__PURE__*/React.forwardRef(functi
     onValueChange,
     defaultValue,
     autoFocus = false,
+    style,
     ...elementProps
   } = componentProps;
   const {
@@ -88,13 +90,11 @@ const FieldControl = exports.FieldControl = /*#__PURE__*/React.forwardRef(functi
   });
   const isControlled = valueProp !== undefined;
   const value = isControlled ? valueUnwrapped : undefined;
-  (0, _useField.useField)({
+  const getFieldValue = (0, _useStableCallback.useStableCallback)(() => validation.inputRef.current?.value);
+  (0, _useRegisterFieldControl.useRegisterFieldControl)(validation.inputRef, {
     id,
-    name,
-    commit: validation.commit,
     value,
-    getValue: () => validation.inputRef.current?.value,
-    controlRef: validation.inputRef
+    getValue: getFieldValue
   });
   const element = (0, _useRenderElement.useRenderElement)('input', componentProps, {
     ref: [forwardedRef, inputRef],

package/field/description/FieldDescription.js

@@ -24,6 +24,7 @@ const FieldDescription = exports.FieldDescription = /*#__PURE__*/React.forwardRe
     render,
     id: idProp,
     className,
+    style,
     ...elementProps
   } = componentProps;
   const id = (0, _useBaseUiId.useBaseUiId)(idProp);

package/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/field/error/FieldError.js

@@ -35,6 +35,7 @@ const FieldError = exports.FieldError = /*#__PURE__*/React.forwardRef(function F
     id: idProp,
     className,
     match,
+    style,
     ...elementProps
   } = componentProps;
   const id = (0, _useBaseUiId.useBaseUiId)(idProp);
@@ -50,13 +51,14 @@ const FieldError = exports.FieldError = /*#__PURE__*/React.forwardRef(function F
     errors
   } = (0, _FormContext.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,
@@ -75,11 +77,12 @@ const FieldError = exports.FieldError = /*#__PURE__*/React.forwardRef(function F
   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__*/(0, _jsxRuntime.jsx)("ul", {
+  const clientErrorMessage = validityData.errors.length > 1 ? /*#__PURE__*/(0, _jsxRuntime.jsx)("ul", {
     children: validityData.errors.map(message => /*#__PURE__*/(0, _jsxRuntime.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/field/item/FieldItem.js

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

package/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/field/label/FieldLabel.js

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

package/field/root/FieldRoot.js

@@ -15,6 +15,7 @@ var _FormContext = require("../../form/FormContext");
 var _labelableProvider = require("../../labelable-provider");
 var _useRenderElement = require("../../utils/useRenderElement");
 var _useFieldValidation = require("./useFieldValidation");
+var _useFieldControlRegistration = require("./useFieldControlRegistration");
 var _jsxRuntime = require("react/jsx-runtime");
 /**
  * @internal
@@ -36,6 +37,7 @@ var _jsxRuntime = require("react/jsx-runtime");
     dirty: dirtyProp,
     touched: touchedProp,
     actionsRef,
+    style,
     ...elementProps
   } = componentProps;
   const {
@@ -99,6 +101,14 @@ var _jsxRuntime = require("react/jsx-runtime");
     markedDirtyRef.current = true;
     validation.commit(validityData.value);
   }, [validation, validityData]);
+  const registerFieldControl = (0, _useFieldControlRegistration.useFieldControlRegistration)({
+    commit: validation.commit,
+    invalid,
+    markedDirtyRef,
+    name,
+    setValidityData,
+    validityData
+  });
   React.useImperativeHandle(actionsRef, () => ({
     validate: handleImperativeValidate
   }), [handleImperativeValidate]);
@@ -122,8 +132,9 @@ var _jsxRuntime = require("react/jsx-runtime");
     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 = (0, _useRenderElement.useRenderElement)('div', componentProps, {
     ref: forwardedRef,
     state,

package/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/field/root/FieldRootContext.js

@@ -41,6 +41,7 @@ const FieldRootContext = exports.FieldRootContext = /*#__PURE__*/React.createCon
   markedDirtyRef: {
     current: false
   },
+  registerFieldControl: _noop.NOOP,
   validation: {
     getValidationProps: (props = _constants2.EMPTY_OBJECT) => props,
     getInputValidationProps: (props = _constants2.EMPTY_OBJECT) => props,

package/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;
+}