@base-ui/react 1.3.0 → 1.4.1

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

@@ -3,29 +3,29 @@
 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 { EMPTY_ARRAY } from '@base-ui/utils/empty';
 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";
 import { useNavigationMenuItemContext } from "../item/NavigationMenuItemContext.js";
 import { useNavigationMenuRootContext, useNavigationMenuTreeContext } from "../root/NavigationMenuRootContext.js";
-import { createChangeEventDetails } from "../../utils/createBaseUIEventDetails.js";
-import { REASONS } from "../../utils/reasons.js";
-import { EMPTY_ARRAY, ownerVisuallyHidden, PATIENT_CLICK_THRESHOLD } from "../../utils/constants.js";
+import { createChangeEventDetails } from "../../internals/createBaseUIEventDetails.js";
+import { REASONS } from "../../internals/reasons.js";
+import { ownerVisuallyHidden, PATIENT_CLICK_THRESHOLD } from "../../internals/constants.js";
 import { FocusGuard } from "../../utils/FocusGuard.js";
 import { pressableTriggerOpenStateMapping } from "../../utils/popupStateMapping.js";
-import { TransitionStatusDataAttributes } from "../../utils/stateAttributesMapping.js";
+import { TransitionStatusDataAttributes } from "../../internals/stateAttributesMapping.js";
 import { isOutsideMenuEvent } from "../utils/isOutsideMenuEvent.js";
-import { CompositeItem } from "../../composite/item/CompositeItem.js";
-import { useButton } from "../../use-button/index.js";
-import { useAnimationsFinished } from "../../utils/useAnimationsFinished.js";
+import { CompositeItem } from "../../internals/composite/item/CompositeItem.js";
+import { useButton } from "../../internals/use-button/index.js";
+import { useAnimationsFinished } from "../../internals/useAnimationsFinished.js";
 import { getCssDimensions } from "../../utils/getCssDimensions.js";
 import { NAVIGATION_MENU_TRIGGER_IDENTIFIER } from "../utils/constants.js";
 import { useNavigationMenuDismissContext } from "../list/NavigationMenuDismissContext.js";
@@ -50,6 +50,7 @@ export const NavigationMenuTrigger = /*#__PURE__*/React.forwardRef(function Navi
     render,
     nativeButton = true,
     disabled,
+    style,
     ...elementProps
   } = componentProps;
   const {
@@ -69,6 +70,7 @@ export const NavigationMenuTrigger = /*#__PURE__*/React.forwardRef(function Navi
     afterInsideRef,
     beforeInsideRef,
     prevTriggerElementRef,
+    popupAutoSizeResetRef,
     currentContentRef,
     delay,
     closeDelay,
@@ -93,7 +95,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 +106,22 @@ 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;
+  });
+  useIsoLayoutEffect(() => {
+    if (isActiveItem) {
+      return;
+    }
+    mutationFrame.cancel();
+    sizeFrame.cancel();
+    cancelAutoSizeReset();
+  }, [isActiveItem, mutationFrame, sizeFrame, cancelAutoSizeReset]);
   function setAutoSizes() {
     if (!popupElement) {
       return;
@@ -134,13 +148,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;
@@ -160,6 +185,9 @@ export const NavigationMenuTrigger = /*#__PURE__*/React.forwardRef(function Navi
     positionerElement.style.setProperty(NavigationMenuPositionerCssVars.positionerWidth, `${syncPositioner ? currentWidth : measuredWidth}px`);
     positionerElement.style.setProperty(NavigationMenuPositionerCssVars.positionerHeight, `${syncPositioner ? currentHeight : measuredHeight}px`);
     sizeFrame.request(() => {
+      if (!isActiveItemRef.current) {
+        return;
+      }
       popupElement.style.setProperty(NavigationMenuPopupCssVars.popupWidth, `${measuredWidth}px`);
       popupElement.style.setProperty(NavigationMenuPopupCssVars.popupHeight, `${measuredHeight}px`);
       if (syncPositioner) {
@@ -175,8 +203,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;
     }
@@ -192,6 +219,9 @@ export const NavigationMenuTrigger = /*#__PURE__*/React.forwardRef(function Navi
         const measuredHeight = height || currentHeight || prevSizeRef.current.height;
         setSharedFixedSizes(currentWidth, currentHeight);
         sizeFrame.request(() => {
+          if (!isActiveItemRef.current) {
+            return;
+          }
           setSharedFixedSizes(measuredWidth, measuredHeight);
           scheduleAutoSizeReset();
         });
@@ -203,8 +233,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 +280,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 +314,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 +375,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 +426,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 +445,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 +483,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 +508,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 +547,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 +614,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 +637,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.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { BaseUIComponentProps } from "../../utils/types.js";
+import type { BaseUIComponentProps } from "../../internals/types.js";
 /**
  * The clipping viewport of the navigation menu's current content.
  * Renders a `<div>` element.

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

@@ -4,7 +4,7 @@ import * as React from 'react';
 import { useIsoLayoutEffect } from '@base-ui/utils/useIsoLayoutEffect';
 import { useId } from '@base-ui/utils/useId';
 import { inertValue } from '@base-ui/utils/inertValue';
-import { useRenderElement } from "../../utils/useRenderElement.js";
+import { useRenderElement } from "../../internals/useRenderElement.js";
 import { useNavigationMenuRootContext } from "../root/NavigationMenuRootContext.js";
 import { FocusGuard } from "../../utils/FocusGuard.js";
 import { getNextTabbable, getPreviousTabbable, isOutsideEvent, contains } from "../../floating-ui-react/utils.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.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { BaseUIComponentProps, NativeButtonProps } from "../../utils/types.js";
+import { BaseUIComponentProps, NativeButtonProps } from "../../internals/types.js";
 import type { NumberFieldRootState } from "../root/NumberFieldRoot.js";
 /**
  * A stepper button that decreases the field value when clicked.

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

@@ -1,8 +1,8 @@
 'use client';
 
 import * as React from 'react';
-import { useRenderElement } from "../../utils/useRenderElement.js";
-import { useButton } from "../../use-button/index.js";
+import { useRenderElement } from "../../internals/useRenderElement.js";
+import { useButton } from "../../internals/use-button/index.js";
 import { useNumberFieldRootContext } from "../root/NumberFieldRootContext.js";
 import { useNumberFieldButton } from "../root/useNumberFieldButton.js";
 import { stateAttributesMapping } from "../utils/stateAttributesMapping.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/decrement/NumberFieldDecrementDataAttributes.d.ts

@@ -16,11 +16,11 @@ export declare enum NumberFieldDecrementDataAttributes {
    */
   required = "data-required",
   /**
-   * Present when the number field is in valid state (when wrapped in Field.Root).
+   * Present when the number field is in a valid state (when wrapped in Field.Root).
    */
   valid = "data-valid",
   /**
-   * Present when the number field is in invalid state (when wrapped in Field.Root).
+   * Present when the number field is in an invalid state (when wrapped in Field.Root).
    */
   invalid = "data-invalid",
   /**

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

@@ -16,11 +16,11 @@ export let NumberFieldDecrementDataAttributes = /*#__PURE__*/function (NumberFie
    */
   NumberFieldDecrementDataAttributes["required"] = "data-required";
   /**
-   * Present when the number field is in valid state (when wrapped in Field.Root).
+   * Present when the number field is in a valid state (when wrapped in Field.Root).
    */
   NumberFieldDecrementDataAttributes["valid"] = "data-valid";
   /**
-   * Present when the number field is in invalid state (when wrapped in Field.Root).
+   * Present when the number field is in an invalid state (when wrapped in Field.Root).
    */
   NumberFieldDecrementDataAttributes["invalid"] = "data-invalid";
   /**

package/esm/number-field/group/NumberFieldGroup.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import type { NumberFieldRootState } from "../root/NumberFieldRoot.js";
-import type { BaseUIComponentProps } from "../../utils/types.js";
+import type { BaseUIComponentProps } from "../../internals/types.js";
 /**
  * Groups the input with the increment and decrement buttons.
  * Renders a `<div>` element.

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

@@ -3,7 +3,7 @@
 import * as React from 'react';
 import { useNumberFieldRootContext } from "../root/NumberFieldRootContext.js";
 import { stateAttributesMapping } from "../utils/stateAttributesMapping.js";
-import { useRenderElement } from "../../utils/useRenderElement.js";
+import { useRenderElement } from "../../internals/useRenderElement.js";
 
 /**
  * Groups the input with the increment and decrement buttons.
@@ -15,6 +15,7 @@ export const NumberFieldGroup = /*#__PURE__*/React.forwardRef(function NumberFie
   const {
     render,
     className,
+    style,
     ...elementProps
   } = componentProps;
   const {

package/esm/number-field/group/NumberFieldGroupDataAttributes.d.ts

@@ -16,11 +16,11 @@ export declare enum NumberFieldGroupDataAttributes {
    */
   required = "data-required",
   /**
-   * Present when the number field is in valid state (when wrapped in Field.Root).
+   * Present when the number field is in a valid state (when wrapped in Field.Root).
    */
   valid = "data-valid",
   /**
-   * Present when the number field is in invalid state (when wrapped in Field.Root).
+   * Present when the number field is in an invalid state (when wrapped in Field.Root).
    */
   invalid = "data-invalid",
   /**

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

@@ -16,11 +16,11 @@ export let NumberFieldGroupDataAttributes = /*#__PURE__*/function (NumberFieldGr
    */
   NumberFieldGroupDataAttributes["required"] = "data-required";
   /**
-   * Present when the number field is in valid state (when wrapped in Field.Root).
+   * Present when the number field is in a valid state (when wrapped in Field.Root).
    */
   NumberFieldGroupDataAttributes["valid"] = "data-valid";
   /**
-   * Present when the number field is in invalid state (when wrapped in Field.Root).
+   * Present when the number field is in an invalid state (when wrapped in Field.Root).
    */
   NumberFieldGroupDataAttributes["invalid"] = "data-invalid";
   /**

package/esm/number-field/increment/NumberFieldIncrement.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { BaseUIComponentProps, NativeButtonProps } from "../../utils/types.js";
+import type { BaseUIComponentProps, NativeButtonProps } from "../../internals/types.js";
 import type { NumberFieldRootState } from "../root/NumberFieldRoot.js";
 /**
  * A stepper button that increases the field value when clicked.

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

@@ -1,8 +1,8 @@
 'use client';
 
 import * as React from 'react';
-import { useRenderElement } from "../../utils/useRenderElement.js";
-import { useButton } from "../../use-button/index.js";
+import { useRenderElement } from "../../internals/useRenderElement.js";
+import { useButton } from "../../internals/use-button/index.js";
 import { useNumberFieldRootContext } from "../root/NumberFieldRootContext.js";
 import { useNumberFieldButton } from "../root/useNumberFieldButton.js";
 import { stateAttributesMapping } from "../utils/stateAttributesMapping.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/increment/NumberFieldIncrementDataAttributes.d.ts

@@ -16,11 +16,11 @@ export declare enum NumberFieldIncrementDataAttributes {
    */
   required = "data-required",
   /**
-   * Present when the number field is in valid state (when wrapped in Field.Root).
+   * Present when the number field is in a valid state (when wrapped in Field.Root).
    */
   valid = "data-valid",
   /**
-   * Present when the number field is in invalid state (when wrapped in Field.Root).
+   * Present when the number field is in an invalid state (when wrapped in Field.Root).
    */
   invalid = "data-invalid",
   /**

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

@@ -16,11 +16,11 @@ export let NumberFieldIncrementDataAttributes = /*#__PURE__*/function (NumberFie
    */
   NumberFieldIncrementDataAttributes["required"] = "data-required";
   /**
-   * Present when the number field is in valid state (when wrapped in Field.Root).
+   * Present when the number field is in a valid state (when wrapped in Field.Root).
    */
   NumberFieldIncrementDataAttributes["valid"] = "data-valid";
   /**
-   * Present when the number field is in invalid state (when wrapped in Field.Root).
+   * Present when the number field is in an invalid state (when wrapped in Field.Root).
    */
   NumberFieldIncrementDataAttributes["invalid"] = "data-invalid";
   /**

package/esm/number-field/input/NumberFieldInput.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { BaseUIComponentProps } from "../../utils/types.js";
+import type { BaseUIComponentProps } from "../../internals/types.js";
 import type { NumberFieldRootState } from "../root/NumberFieldRoot.js";
 /**
  * The native input control in the number field.

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

@@ -3,19 +3,19 @@
 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 { 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 { useFieldRootContext } from "../../internals/field-root-context/FieldRootContext.js";
+import { useRegisterFieldControl } from "../../internals/field-register-control/useRegisterFieldControl.js";
+import { fieldValidityMapping } from "../../internals/field-constants/constants.js";
+import { useFormContext } from "../../internals/form-context/FormContext.js";
+import { useLabelableContext } from "../../internals/labelable-provider/LabelableContext.js";
 import { DEFAULT_STEP } from "../utils/constants.js";
 import { ARABIC_DETECT_RE, PERSIAN_DETECT_RE, HAN_DETECT_RE, FULLWIDTH_DETECT_RE, getNumberLocaleDetails, parseNumber, ANY_MINUS_RE, ANY_PLUS_RE, ANY_MINUS_DETECT_RE, ANY_PLUS_DETECT_RE } from "../utils/parse.js";
 import { stateAttributesMapping as numberFieldStateAttributesMapping } from "../utils/stateAttributesMapping.js";
-import { useRenderElement } from "../../utils/useRenderElement.js";
-import { createChangeEventDetails, createGenericEventDetails } from "../../utils/createBaseUIEventDetails.js";
+import { useRenderElement } from "../../internals/useRenderElement.js";
+import { createChangeEventDetails, createGenericEventDetails } from "../../internals/createBaseUIEventDetails.js";
 import { formatNumber, formatNumberMaxPrecision } from "../../utils/formatNumber.js";
-import { useValueChanged } from "../../utils/useValueChanged.js";
-import { REASONS } from "../../utils/reasons.js";
+import { useValueChanged } from "../../internals/useValueChanged.js";
+import { REASONS } from "../../internals/reasons.js";
 const stateAttributesMapping = {
   ...fieldValidityMapping,
   ...numberFieldStateAttributesMapping
@@ -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/input/NumberFieldInputDataAttributes.d.ts

@@ -16,11 +16,11 @@ export declare enum NumberFieldInputDataAttributes {
    */
   required = "data-required",
   /**
-   * Present when the number field is in valid state (when wrapped in Field.Root).
+   * Present when the number field is in a valid state (when wrapped in Field.Root).
    */
   valid = "data-valid",
   /**
-   * Present when the number field is in invalid state (when wrapped in Field.Root).
+   * Present when the number field is in an invalid state (when wrapped in Field.Root).
    */
   invalid = "data-invalid",
   /**