@base-ui/react 1.3.0 → 1.4.0

package/esm/navigation-menu/root/NavigationMenuRoot.d.ts

@@ -8,7 +8,9 @@ import { REASONS } from "../../utils/reasons.js";
  *
  * Documentation: [Base UI Navigation Menu](https://base-ui.com/react/components/navigation-menu)
  */
-export declare const NavigationMenuRoot: React.ForwardRefExoticComponent<Omit<NavigationMenuRootProps, "ref"> & React.RefAttributes<HTMLElement>>;
+export declare const NavigationMenuRoot: {
+  <Value = any>(props: NavigationMenuRoot.Props<Value>): React.JSX.Element;
+};
 export interface NavigationMenuRootState {
   /**
    * If `true`, the popup is open.
@@ -19,7 +21,7 @@ export interface NavigationMenuRootState {
    */
   nested: boolean;
 }
-export interface NavigationMenuRootProps extends BaseUIComponentProps<'nav', NavigationMenuRootState> {
+export interface NavigationMenuRootProps<Value = any> extends BaseUIComponentProps<'nav', NavigationMenuRootState> {
   /**
    * A ref to imperative actions.
    */
@@ -35,18 +37,18 @@ export interface NavigationMenuRootProps extends BaseUIComponentProps<'nav', Nav
    * To render an uncontrolled navigation menu, use the `defaultValue` prop instead.
    * @default null
    */
-  value?: any;
+  value?: Value | null | undefined;
   /**
    * The uncontrolled value of the item that should be initially selected.
    *
    * To render a controlled navigation menu, use the `value` prop instead.
    * @default null
    */
-  defaultValue?: any;
+  defaultValue?: Value | null | undefined;
   /**
    * Callback fired when the value changes.
    */
-  onValueChange?: ((value: any, eventDetails: NavigationMenuRoot.ChangeEventDetails) => void) | undefined;
+  onValueChange?: ((value: Value | null, eventDetails: NavigationMenuRoot.ChangeEventDetails) => void) | undefined;
   /**
    * How long to wait before opening the navigation popup. Specified in milliseconds.
    * @default 50
@@ -70,7 +72,8 @@ export type NavigationMenuRootChangeEventReason = typeof REASONS.triggerPress |
 export type NavigationMenuRootChangeEventDetails = BaseUIChangeEventDetails<NavigationMenuRoot.ChangeEventReason>;
 export declare namespace NavigationMenuRoot {
   type State = NavigationMenuRootState;
-  type Props = NavigationMenuRootProps;
+  type Props<TValue = any> = NavigationMenuRootProps<TValue>;
+  type Value<TValue = any> = TValue | null;
   type Actions = NavigationMenuRootActions;
   type ChangeEventReason = NavigationMenuRootChangeEventReason;
   type ChangeEventDetails = NavigationMenuRootChangeEventDetails;

package/esm/navigation-menu/root/NavigationMenuRoot.js

@@ -74,6 +74,12 @@ export const NavigationMenuRoot = /*#__PURE__*/React.forwardRef(function Navigat
   const afterInsideRef = React.useRef(null);
   const beforeOutsideRef = React.useRef(null);
   const afterOutsideRef = React.useRef(null);
+  // Shared across triggers so a newly active trigger can cancel a stale
+  // popup auto-size reset scheduled by the previously active trigger.
+  const popupAutoSizeResetRef = React.useRef({
+    abortController: null,
+    owner: null
+  });
   const {
     mounted,
     setMounted,
@@ -169,6 +175,7 @@ export const NavigationMenuRoot = /*#__PURE__*/React.forwardRef(function Navigat
     beforeOutsideRef,
     afterOutsideRef,
     prevTriggerElementRef,
+    popupAutoSizeResetRef,
     delay,
     closeDelay,
     orientation,
@@ -204,6 +211,7 @@ function TreeContext(props) {
     closeDelay,
     orientation,
     onOpenChangeComplete,
+    style,
     ...elementProps
   } = props.componentProps;
   const nodeId = useFloatingNodeId();

package/esm/navigation-menu/root/NavigationMenuRootContext.d.ts

@@ -2,10 +2,14 @@ import * as React from 'react';
 import type { FloatingRootContext } from "../../floating-ui-react/index.js";
 import type { TransitionStatus } from "../../utils/useTransitionStatus.js";
 import type { NavigationMenuRoot } from "./NavigationMenuRoot.js";
-export interface NavigationMenuRootContext {
+export type NavigationMenuPopupAutoSizeResetState = {
+  abortController: AbortController | null;
+  owner: any;
+};
+export interface NavigationMenuRootContext<Value = any> {
   open: boolean;
-  value: any;
-  setValue: (value: any, eventDetails: NavigationMenuRoot.ChangeEventDetails) => void;
+  value: NavigationMenuRoot.Value<Value>;
+  setValue: (value: NavigationMenuRoot.Value<Value>, eventDetails: NavigationMenuRoot.ChangeEventDetails) => void;
   transitionStatus: TransitionStatus;
   mounted: boolean;
   popupElement: HTMLElement | null;
@@ -28,15 +32,16 @@ export interface NavigationMenuRootContext {
   beforeOutsideRef: React.RefObject<HTMLSpanElement | null>;
   afterOutsideRef: React.RefObject<HTMLSpanElement | null>;
   prevTriggerElementRef: React.RefObject<Element | null | undefined>;
+  popupAutoSizeResetRef: React.MutableRefObject<NavigationMenuPopupAutoSizeResetState>;
   delay: number;
   closeDelay: number;
   orientation: 'horizontal' | 'vertical';
   viewportInert: boolean;
   setViewportInert: React.Dispatch<React.SetStateAction<boolean>>;
 }
-export declare const NavigationMenuRootContext: React.Context<NavigationMenuRootContext | undefined>;
-declare function useNavigationMenuRootContext(optional?: false): NavigationMenuRootContext;
-declare function useNavigationMenuRootContext(optional: true): NavigationMenuRootContext | undefined;
+export declare const NavigationMenuRootContext: React.Context<NavigationMenuRootContext<any> | undefined>;
+declare function useNavigationMenuRootContext<Value = any>(optional?: false): NavigationMenuRootContext<Value>;
+declare function useNavigationMenuRootContext<Value = any>(optional: true): NavigationMenuRootContext<Value> | undefined;
 export declare const NavigationMenuTreeContext: React.Context<string | undefined>;
 declare function useNavigationMenuTreeContext(): string | undefined;
 export { useNavigationMenuRootContext, useNavigationMenuTreeContext };

package/esm/navigation-menu/trigger/NavigationMenuTrigger.js

@@ -3,14 +3,13 @@
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
 import { isHTMLElement } from '@floating-ui/utils/dom';
-import { isTabbable } from 'tabbable';
+import { addEventListener } from '@base-ui/utils/addEventListener';
 import { useIsoLayoutEffect } from '@base-ui/utils/useIsoLayoutEffect';
 import { ownerWindow } from '@base-ui/utils/owner';
 import { useStableCallback } from '@base-ui/utils/useStableCallback';
 import { useTimeout } from '@base-ui/utils/useTimeout';
 import { useAnimationFrame } from '@base-ui/utils/useAnimationFrame';
 import { useValueAsRef } from '@base-ui/utils/useValueAsRef';
-import { isWebKit } from '@base-ui/utils/detectBrowser';
 import { safePolygon, useClick, useFloatingRootContext, useFloatingTree, useHoverReferenceInteraction, useInteractions } from "../../floating-ui-react/index.js";
 import { applySafePolygonPointerEventsMutation, clearSafePolygonPointerEventsMutation, useHoverInteractionSharedState } from "../../floating-ui-react/hooks/useHoverInteractionSharedState.js";
 import { contains, getTabbableAfterElement, getNextTabbable, getPreviousTabbable, isOutsideEvent, stopEvent } from "../../floating-ui-react/utils.js";
@@ -50,6 +49,7 @@ export const NavigationMenuTrigger = /*#__PURE__*/React.forwardRef(function Navi
     render,
     nativeButton = true,
     disabled,
+    style,
     ...elementProps
   } = componentProps;
   const {
@@ -69,6 +69,7 @@ export const NavigationMenuTrigger = /*#__PURE__*/React.forwardRef(function Navi
     afterInsideRef,
     beforeInsideRef,
     prevTriggerElementRef,
+    popupAutoSizeResetRef,
     currentContentRef,
     delay,
     closeDelay,
@@ -93,7 +94,6 @@ export const NavigationMenuTrigger = /*#__PURE__*/React.forwardRef(function Navi
   const triggerElementRef = React.useRef(null);
   const allowFocusRef = React.useRef(false);
   const prevSizeRef = React.useRef(DEFAULT_SIZE);
-  const animationAbortControllerRef = React.useRef(null);
   const skipAutoSizeSyncRef = React.useRef(false);
   const isActiveItem = open && value === itemValue;
   const isActiveItemRef = useValueAsRef(isActiveItem);
@@ -105,9 +105,15 @@ export const NavigationMenuTrigger = /*#__PURE__*/React.forwardRef(function Navi
     triggerElementRef.current = element;
     setTriggerElement(element);
   }, []);
-  React.useEffect(() => {
-    animationAbortControllerRef.current?.abort();
-  }, [isActiveItem]);
+  const cancelAutoSizeReset = useStableCallback((force = false) => {
+    if (!force && popupAutoSizeResetRef.current.owner !== itemValue) {
+      return;
+    }
+    popupAutoSizeResetRef.current.abortController?.abort();
+    popupAutoSizeResetRef.current.abortController = null;
+    popupAutoSizeResetRef.current.owner = null;
+  });
+  React.useEffect(cancelAutoSizeReset, [isActiveItem, cancelAutoSizeReset]);
   function setAutoSizes() {
     if (!popupElement) {
       return;
@@ -134,13 +140,24 @@ export const NavigationMenuTrigger = /*#__PURE__*/React.forwardRef(function Navi
     positionerElement.style.setProperty(NavigationMenuPositionerCssVars.positionerHeight, `${height}px`);
   }
   function scheduleAutoSizeReset() {
-    animationAbortControllerRef.current = new AbortController();
-    runOnceAnimationsFinish(setAutoSizes, animationAbortControllerRef.current.signal);
+    cancelAutoSizeReset(true);
+    const abortController = new AbortController();
+    popupAutoSizeResetRef.current.abortController = abortController;
+    popupAutoSizeResetRef.current.owner = itemValue;
+    runOnceAnimationsFinish(() => {
+      if (popupAutoSizeResetRef.current.abortController !== abortController || popupAutoSizeResetRef.current.owner !== itemValue) {
+        return;
+      }
+      popupAutoSizeResetRef.current.abortController = null;
+      popupAutoSizeResetRef.current.owner = null;
+      setAutoSizes();
+    }, abortController.signal);
   }
   const handleValueChange = useStableCallback((currentWidth, currentHeight, options = {}) => {
     if (!popupElement || !positionerElement) {
       return;
     }
+    cancelAutoSizeReset(true);
     const {
       syncPositioner = false
     } = options;
@@ -175,8 +192,7 @@ export const NavigationMenuTrigger = /*#__PURE__*/React.forwardRef(function Navi
     }
     sizeFrame.cancel();
     mutationFrame.cancel();
-    animationAbortControllerRef.current?.abort();
-    animationAbortControllerRef.current = null;
+    cancelAutoSizeReset(true);
     if (currentWidth === 0 || currentHeight === 0) {
       return;
     }
@@ -203,8 +219,7 @@ export const NavigationMenuTrigger = /*#__PURE__*/React.forwardRef(function Navi
       return;
     }
     sizeFrame.cancel();
-    animationAbortControllerRef.current?.abort();
-    animationAbortControllerRef.current = null;
+    cancelAutoSizeReset(true);
     clearFixedSizes();
     const {
       width,
@@ -251,12 +266,11 @@ export const NavigationMenuTrigger = /*#__PURE__*/React.forwardRef(function Navi
       mutationFrame.cancel();
       resizeFrame.cancel();
       sizeFrame.cancel();
-      animationAbortControllerRef.current?.abort();
-      animationAbortControllerRef.current = null;
+      cancelAutoSizeReset(true);
       skipAutoSizeSyncRef.current = false;
       setPointerType('');
     }
-  }, [stickIfOpenTimeout, open, mutationFrame, resizeFrame, sizeFrame]);
+  }, [stickIfOpenTimeout, open, mutationFrame, resizeFrame, sizeFrame, cancelAutoSizeReset]);
   React.useEffect(() => {
     if (!mounted) {
       prevSizeRef.current = DEFAULT_SIZE;
@@ -286,10 +300,10 @@ export const NavigationMenuTrigger = /*#__PURE__*/React.forwardRef(function Navi
       resizeFrame.cancel();
       resizeFrame.request(syncCurrentSize);
     }
-    win.addEventListener('resize', handleResize);
+    const unsubscribe = addEventListener(win, 'resize', handleResize);
     return () => {
       resizeFrame.cancel();
-      win.removeEventListener('resize', handleResize);
+      unsubscribe();
     };
   }, [open, isActiveItem, popupElement, positionerElement, resizeFrame, syncCurrentSize]);
   React.useEffect(() => {
@@ -347,7 +361,11 @@ export const NavigationMenuTrigger = /*#__PURE__*/React.forwardRef(function Navi
         skipAutoSizeSyncRef.current = false;
         return undefined;
       }
-      handleValueChange(0, 0);
+      const {
+        width,
+        height
+      } = getCssDimensions(popupElement);
+      handleValueChange(width, height);
     }
     return undefined;
   }, [currentContentRef, handleValueChange, isActiveItemRef, open, popupElement, sizeFrame, syncCurrentSize, transitionStatus]);
@@ -394,6 +412,7 @@ export const NavigationMenuTrigger = /*#__PURE__*/React.forwardRef(function Navi
     }
   });
   const hoverInteractionState = useHoverInteractionSharedState(context);
+  const shouldBlockSafePolygonPointerEvents = pointerType !== 'touch';
   React.useEffect(() => {
     if (!open) {
       context.context.dataRef.current.openEvent = undefined;
@@ -412,13 +431,16 @@ export const NavigationMenuTrigger = /*#__PURE__*/React.forwardRef(function Navi
     return getHandleCloseContext(triggerElementRef.current, hoverFloatingElement, nodeId);
   });
   function getScope() {
-    return triggerElementRef.current?.closest('ul') ?? null;
+    if (!nested || !positionerElement) {
+      return triggerElementRef.current?.closest('ul') ?? null;
+    }
+    return null;
   }
   const hoverProps = useHoverReferenceInteraction(context, {
     enabled: hoverInteractionsEnabled,
     move: false,
     handleClose: safePolygon({
-      blockPointerEvents: pointerType !== 'touch' && (!isWebKit || nested),
+      blockPointerEvents: shouldBlockSafePolygonPointerEvents,
       getScope
     }),
     restMs: mounted && positionerElement ? 0 : delay,
@@ -447,6 +469,7 @@ export const NavigationMenuTrigger = /*#__PURE__*/React.forwardRef(function Navi
   }, [isActiveItem, context, setFloatingRootContext, prevTriggerElementRef, triggerElement]);
   function handleActivation(event) {
     ReactDOM.flushSync(() => {
+      const currentTarget = isHTMLElement(event.currentTarget) ? event.currentTarget : null;
       const prevTriggerRect = prevTriggerElementRef.current?.getBoundingClientRect();
       if (mounted && prevTriggerRect && triggerElement) {
         const nextTriggerRect = triggerElement.getBoundingClientRect();
@@ -471,16 +494,20 @@ export const NavigationMenuTrigger = /*#__PURE__*/React.forwardRef(function Navi
       if (value != null) {
         setValue(itemValue, createChangeEventDetails(event.type === 'mouseenter' ? REASONS.triggerHover : REASONS.triggerPress, event.nativeEvent));
       }
-      if (event.type === 'mouseenter' && nested && !positionerElement && pointerType !== 'touch' && hoverFloatingElement && isHTMLElement(event.currentTarget)) {
-        const scopeElement = getScope();
-        if (!scopeElement) {
-          return;
+      if (event.type === 'mouseenter' && shouldBlockSafePolygonPointerEvents && (!nested || !positionerElement) && hoverFloatingElement && currentTarget) {
+        const applyPointerEventsMutation = () => {
+          const scopeElement = getScope() ?? currentTarget.ownerDocument.body;
+          applySafePolygonPointerEventsMutation(hoverInteractionState, {
+            scopeElement,
+            referenceElement: currentTarget,
+            floatingElement: hoverFloatingElement
+          });
+        };
+        if (value != null && value !== itemValue) {
+          queueMicrotask(applyPointerEventsMutation);
+        } else {
+          applyPointerEventsMutation();
         }
-        applySafePolygonPointerEventsMutation(hoverInteractionState, {
-          scopeElement,
-          referenceElement: event.currentTarget,
-          floatingElement: hoverFloatingElement
-        });
       }
     });
   }
@@ -506,12 +533,16 @@ export const NavigationMenuTrigger = /*#__PURE__*/React.forwardRef(function Navi
   function handleSetPointerType(event) {
     setPointerType(event.pointerType);
   }
+  function handleTriggerPointerDown(event) {
+    handleSetPointerType(event);
+    clearSafePolygonPointerEventsMutation(hoverInteractionState);
+  }
   const defaultProps = {
     tabIndex: 0,
     onMouseEnter: handleOpenEvent,
     onClick: handleOpenEvent,
     onPointerEnter: handleSetPointerType,
-    onPointerDown: handleSetPointerType,
+    onPointerDown: handleTriggerPointerDown,
     'aria-expanded': isActiveItem,
     'aria-controls': isActiveItem ? popupElement?.id : undefined,
     [NAVIGATION_MENU_TRIGGER_IDENTIFIER]: '',
@@ -569,6 +600,7 @@ export const NavigationMenuTrigger = /*#__PURE__*/React.forwardRef(function Navi
       tag: "button",
       render: render,
       className: className,
+      style: style,
       state: state,
       stateAttributesMapping: pressableTriggerOpenStateMapping,
       refs: [forwardedRef, handleTriggerElement, buttonRef],
@@ -591,7 +623,10 @@ export const NavigationMenuTrigger = /*#__PURE__*/React.forwardRef(function Navi
         ref: afterOutsideRef,
         onFocus: event => {
           if (referenceElement && isOutsideEvent(event, referenceElement)) {
-            const elementToFocus = afterInsideRef.current && isTabbable(afterInsideRef.current) ? afterInsideRef.current : triggerElement;
+            ReactDOM.flushSync(() => {
+              setViewportInert(false);
+            });
+            const elementToFocus = afterInsideRef.current || triggerElement;
             elementToFocus?.focus();
           } else {
             let nextTabbable = getNextTabbable(triggerElement);

package/esm/navigation-menu/viewport/NavigationMenuViewport.js

@@ -65,6 +65,7 @@ export const NavigationMenuViewport = /*#__PURE__*/React.forwardRef(function Nav
     render,
     children,
     id: idProp,
+    style,
     ...elementProps
   } = componentProps;
   const id = useId(idProp);

package/esm/number-field/decrement/NumberFieldDecrement.js

@@ -19,6 +19,7 @@ export const NumberFieldDecrement = /*#__PURE__*/React.forwardRef(function Numbe
     className,
     disabled: disabledProp = false,
     nativeButton = true,
+    style,
     ...elementProps
   } = componentProps;
   const {
@@ -30,15 +31,10 @@ export const NumberFieldDecrement = /*#__PURE__*/React.forwardRef(function Numbe
     incrementValue,
     inputRef,
     inputValue,
-    intentionalTouchCheckTimeout,
-    isPressedRef,
     minWithDefault,
-    movesAfterTouchRef,
     readOnly,
     setValue,
-    startAutoChange,
     state,
-    stopAutoChange,
     value,
     valueRef,
     locale,
@@ -50,8 +46,6 @@ export const NumberFieldDecrement = /*#__PURE__*/React.forwardRef(function Numbe
   const props = useNumberFieldButton({
     isIncrement: false,
     inputRef,
-    startAutoChange,
-    stopAutoChange,
     inputValue,
     disabled,
     readOnly,
@@ -62,9 +56,6 @@ export const NumberFieldDecrement = /*#__PURE__*/React.forwardRef(function Numbe
     allowInputSyncRef,
     formatOptionsRef,
     valueRef,
-    isPressedRef,
-    intentionalTouchCheckTimeout,
-    movesAfterTouchRef,
     locale,
     lastChangedValueRef,
     onValueCommitted

package/esm/number-field/group/NumberFieldGroup.js

@@ -15,6 +15,7 @@ export const NumberFieldGroup = /*#__PURE__*/React.forwardRef(function NumberFie
   const {
     render,
     className,
+    style,
     ...elementProps
   } = componentProps;
   const {

package/esm/number-field/increment/NumberFieldIncrement.js

@@ -19,6 +19,7 @@ export const NumberFieldIncrement = /*#__PURE__*/React.forwardRef(function Numbe
     className,
     disabled: disabledProp = false,
     nativeButton = true,
+    style,
     ...elementProps
   } = componentProps;
   const {
@@ -30,16 +31,11 @@ export const NumberFieldIncrement = /*#__PURE__*/React.forwardRef(function Numbe
     incrementValue,
     inputRef,
     inputValue,
-    intentionalTouchCheckTimeout,
-    isPressedRef,
     locale,
     maxWithDefault,
-    movesAfterTouchRef,
     readOnly,
     setValue,
-    startAutoChange,
     state,
-    stopAutoChange,
     value,
     valueRef,
     lastChangedValueRef,
@@ -50,8 +46,6 @@ export const NumberFieldIncrement = /*#__PURE__*/React.forwardRef(function Numbe
   const props = useNumberFieldButton({
     isIncrement: true,
     inputRef,
-    startAutoChange,
-    stopAutoChange,
     inputValue,
     disabled,
     readOnly,
@@ -62,9 +56,6 @@ export const NumberFieldIncrement = /*#__PURE__*/React.forwardRef(function Numbe
     allowInputSyncRef,
     formatOptionsRef,
     valueRef,
-    isPressedRef,
-    intentionalTouchCheckTimeout,
-    movesAfterTouchRef,
     locale,
     lastChangedValueRef,
     onValueCommitted

package/esm/number-field/input/NumberFieldInput.js

@@ -4,8 +4,8 @@ import * as React from 'react';
 import { stopEvent } from "../../floating-ui-react/utils.js";
 import { useNumberFieldRootContext } from "../root/NumberFieldRootContext.js";
 import { useFieldRootContext } from "../../field/root/FieldRootContext.js";
+import { useRegisterFieldControl } from "../../field/root/useRegisterFieldControl.js";
 import { fieldValidityMapping } from "../../field/utils/constants.js";
-import { useField } from "../../field/useField.js";
 import { useFormContext } from "../../form/FormContext.js";
 import { useLabelableContext } from "../../labelable-provider/LabelableContext.js";
 import { DEFAULT_STEP } from "../utils/constants.js";
@@ -32,6 +32,7 @@ export const NumberFieldInput = /*#__PURE__*/React.forwardRef(function NumberFie
   const {
     render,
     className,
+    style,
     ...elementProps
   } = componentProps;
   const {
@@ -76,13 +77,9 @@ export const NumberFieldInput = /*#__PURE__*/React.forwardRef(function NumberFie
   } = useLabelableContext();
   const hasTouchedInputRef = React.useRef(false);
   const blockRevalidationRef = React.useRef(false);
-  useField({
+  useRegisterFieldControl(inputRef, {
     id,
-    commit: validation.commit,
-    value,
-    controlRef: inputRef,
-    name,
-    getValue: () => value ?? null
+    value
   });
   useValueChanged(value, previousValue => {
     const validateOnChange = shouldValidateOnChange();
@@ -175,8 +172,7 @@ export const NumberFieldInput = /*#__PURE__*/React.forwardRef(function NumberFie
 
       // Normalize only the displayed text
       const canonicalText = formatNumber(committed, locale, formatOptions);
-      const maxPrecisionText = formatNumberMaxPrecision(parsedValue, locale, formatOptions);
-      const shouldPreserveFullPrecision = !hasExplicitPrecision && parsedValue === value && inputValue === maxPrecisionText;
+      const shouldPreserveFullPrecision = !hasExplicitPrecision && parsedValue === value && inputValue === formatNumberMaxPrecision(parsedValue, locale, formatOptions);
       if (!shouldPreserveFullPrecision && inputValue !== canonicalText) {
         setInputValue(canonicalText);
       }
@@ -187,7 +183,7 @@ export const NumberFieldInput = /*#__PURE__*/React.forwardRef(function NumberFie
         return;
       }
       allowInputSyncRef.current = false;
-      const targetValue = event.target.value;
+      const targetValue = event.currentTarget.value;
       if (targetValue.trim() === '') {
         setInputValue(targetValue);
         setValue(null, createChangeEventDetails(REASONS.inputClear, event.nativeEvent));

package/esm/number-field/root/NumberFieldRoot.d.ts

@@ -69,12 +69,17 @@ export interface NumberFieldRootProps extends Omit<BaseUIComponentProps<'div', N
    * Identifies the field when a form is submitted.
    */
   name?: string | undefined;
+  /**
+   * Identifies the form that owns the hidden input.
+   * Useful when the number field is rendered outside the form.
+   */
+  form?: string | undefined;
   /**
    * The raw numeric value of the field.
    */
   value?: number | null | undefined;
   /**
-   * The uncontrolled value of the field when it’s initially rendered.
+   * The uncontrolled value of the field when it's initially rendered.
    *
    * To render a controlled number field, use the `value` prop instead.
    */