@base-ui/react 1.3.0 → 1.4.1

package/navigation-menu/trigger/NavigationMenuTrigger.js

@@ -9,29 +9,29 @@ exports.NavigationMenuTrigger = void 0;
 var React = _interopRequireWildcard(require("react"));
 var ReactDOM = _interopRequireWildcard(require("react-dom"));
 var _dom = require("@floating-ui/utils/dom");
-var _tabbable = require("tabbable");
+var _addEventListener = require("@base-ui/utils/addEventListener");
 var _useIsoLayoutEffect = require("@base-ui/utils/useIsoLayoutEffect");
 var _owner = require("@base-ui/utils/owner");
 var _useStableCallback = require("@base-ui/utils/useStableCallback");
 var _useTimeout = require("@base-ui/utils/useTimeout");
 var _useAnimationFrame = require("@base-ui/utils/useAnimationFrame");
 var _useValueAsRef = require("@base-ui/utils/useValueAsRef");
-var _detectBrowser = require("@base-ui/utils/detectBrowser");
+var _empty = require("@base-ui/utils/empty");
 var _floatingUiReact = require("../../floating-ui-react");
 var _useHoverInteractionSharedState = require("../../floating-ui-react/hooks/useHoverInteractionSharedState");
 var _utils = require("../../floating-ui-react/utils");
 var _NavigationMenuItemContext = require("../item/NavigationMenuItemContext");
 var _NavigationMenuRootContext = require("../root/NavigationMenuRootContext");
-var _createBaseUIEventDetails = require("../../utils/createBaseUIEventDetails");
-var _reasons = require("../../utils/reasons");
-var _constants = require("../../utils/constants");
+var _createBaseUIEventDetails = require("../../internals/createBaseUIEventDetails");
+var _reasons = require("../../internals/reasons");
+var _constants = require("../../internals/constants");
 var _FocusGuard = require("../../utils/FocusGuard");
 var _popupStateMapping = require("../../utils/popupStateMapping");
-var _stateAttributesMapping = require("../../utils/stateAttributesMapping");
+var _stateAttributesMapping = require("../../internals/stateAttributesMapping");
 var _isOutsideMenuEvent = require("../utils/isOutsideMenuEvent");
-var _CompositeItem = require("../../composite/item/CompositeItem");
-var _useButton = require("../../use-button");
-var _useAnimationsFinished = require("../../utils/useAnimationsFinished");
+var _CompositeItem = require("../../internals/composite/item/CompositeItem");
+var _useButton = require("../../internals/use-button");
+var _useAnimationsFinished = require("../../internals/useAnimationsFinished");
 var _getCssDimensions = require("../../utils/getCssDimensions");
 var _constants2 = require("../utils/constants");
 var _NavigationMenuDismissContext = require("../list/NavigationMenuDismissContext");
@@ -56,6 +56,7 @@ const NavigationMenuTrigger = exports.NavigationMenuTrigger = /*#__PURE__*/React
     render,
     nativeButton = true,
     disabled,
+    style,
     ...elementProps
   } = componentProps;
   const {
@@ -75,6 +76,7 @@ const NavigationMenuTrigger = exports.NavigationMenuTrigger = /*#__PURE__*/React
     afterInsideRef,
     beforeInsideRef,
     prevTriggerElementRef,
+    popupAutoSizeResetRef,
     currentContentRef,
     delay,
     closeDelay,
@@ -99,7 +101,6 @@ const NavigationMenuTrigger = exports.NavigationMenuTrigger = /*#__PURE__*/React
   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 = (0, _useValueAsRef.useValueAsRef)(isActiveItem);
@@ -111,9 +112,22 @@ const NavigationMenuTrigger = exports.NavigationMenuTrigger = /*#__PURE__*/React
     triggerElementRef.current = element;
     setTriggerElement(element);
   }, []);
-  React.useEffect(() => {
-    animationAbortControllerRef.current?.abort();
-  }, [isActiveItem]);
+  const cancelAutoSizeReset = (0, _useStableCallback.useStableCallback)((force = false) => {
+    if (!force && popupAutoSizeResetRef.current.owner !== itemValue) {
+      return;
+    }
+    popupAutoSizeResetRef.current.abortController?.abort();
+    popupAutoSizeResetRef.current.abortController = null;
+    popupAutoSizeResetRef.current.owner = null;
+  });
+  (0, _useIsoLayoutEffect.useIsoLayoutEffect)(() => {
+    if (isActiveItem) {
+      return;
+    }
+    mutationFrame.cancel();
+    sizeFrame.cancel();
+    cancelAutoSizeReset();
+  }, [isActiveItem, mutationFrame, sizeFrame, cancelAutoSizeReset]);
   function setAutoSizes() {
     if (!popupElement) {
       return;
@@ -140,13 +154,24 @@ const NavigationMenuTrigger = exports.NavigationMenuTrigger = /*#__PURE__*/React
     positionerElement.style.setProperty(_NavigationMenuPositionerCssVars.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 = (0, _useStableCallback.useStableCallback)((currentWidth, currentHeight, options = {}) => {
     if (!popupElement || !positionerElement) {
       return;
     }
+    cancelAutoSizeReset(true);
     const {
       syncPositioner = false
     } = options;
@@ -166,6 +191,9 @@ const NavigationMenuTrigger = exports.NavigationMenuTrigger = /*#__PURE__*/React
     positionerElement.style.setProperty(_NavigationMenuPositionerCssVars.NavigationMenuPositionerCssVars.positionerWidth, `${syncPositioner ? currentWidth : measuredWidth}px`);
     positionerElement.style.setProperty(_NavigationMenuPositionerCssVars.NavigationMenuPositionerCssVars.positionerHeight, `${syncPositioner ? currentHeight : measuredHeight}px`);
     sizeFrame.request(() => {
+      if (!isActiveItemRef.current) {
+        return;
+      }
       popupElement.style.setProperty(_NavigationMenuPopupCssVars.NavigationMenuPopupCssVars.popupWidth, `${measuredWidth}px`);
       popupElement.style.setProperty(_NavigationMenuPopupCssVars.NavigationMenuPopupCssVars.popupHeight, `${measuredHeight}px`);
       if (syncPositioner) {
@@ -181,8 +209,7 @@ const NavigationMenuTrigger = exports.NavigationMenuTrigger = /*#__PURE__*/React
     }
     sizeFrame.cancel();
     mutationFrame.cancel();
-    animationAbortControllerRef.current?.abort();
-    animationAbortControllerRef.current = null;
+    cancelAutoSizeReset(true);
     if (currentWidth === 0 || currentHeight === 0) {
       return;
     }
@@ -198,6 +225,9 @@ const NavigationMenuTrigger = exports.NavigationMenuTrigger = /*#__PURE__*/React
         const measuredHeight = height || currentHeight || prevSizeRef.current.height;
         setSharedFixedSizes(currentWidth, currentHeight);
         sizeFrame.request(() => {
+          if (!isActiveItemRef.current) {
+            return;
+          }
           setSharedFixedSizes(measuredWidth, measuredHeight);
           scheduleAutoSizeReset();
         });
@@ -209,8 +239,7 @@ const NavigationMenuTrigger = exports.NavigationMenuTrigger = /*#__PURE__*/React
       return;
     }
     sizeFrame.cancel();
-    animationAbortControllerRef.current?.abort();
-    animationAbortControllerRef.current = null;
+    cancelAutoSizeReset(true);
     clearFixedSizes();
     const {
       width,
@@ -257,12 +286,11 @@ const NavigationMenuTrigger = exports.NavigationMenuTrigger = /*#__PURE__*/React
       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;
@@ -292,10 +320,10 @@ const NavigationMenuTrigger = exports.NavigationMenuTrigger = /*#__PURE__*/React
       resizeFrame.cancel();
       resizeFrame.request(syncCurrentSize);
     }
-    win.addEventListener('resize', handleResize);
+    const unsubscribe = (0, _addEventListener.addEventListener)(win, 'resize', handleResize);
     return () => {
       resizeFrame.cancel();
-      win.removeEventListener('resize', handleResize);
+      unsubscribe();
     };
   }, [open, isActiveItem, popupElement, positionerElement, resizeFrame, syncCurrentSize]);
   React.useEffect(() => {
@@ -353,7 +381,11 @@ const NavigationMenuTrigger = exports.NavigationMenuTrigger = /*#__PURE__*/React
         skipAutoSizeSyncRef.current = false;
         return undefined;
       }
-      handleValueChange(0, 0);
+      const {
+        width,
+        height
+      } = (0, _getCssDimensions.getCssDimensions)(popupElement);
+      handleValueChange(width, height);
     }
     return undefined;
   }, [currentContentRef, handleValueChange, isActiveItemRef, open, popupElement, sizeFrame, syncCurrentSize, transitionStatus]);
@@ -400,6 +432,7 @@ const NavigationMenuTrigger = exports.NavigationMenuTrigger = /*#__PURE__*/React
     }
   });
   const hoverInteractionState = (0, _useHoverInteractionSharedState.useHoverInteractionSharedState)(context);
+  const shouldBlockSafePolygonPointerEvents = pointerType !== 'touch';
   React.useEffect(() => {
     if (!open) {
       context.context.dataRef.current.openEvent = undefined;
@@ -418,13 +451,16 @@ const NavigationMenuTrigger = exports.NavigationMenuTrigger = /*#__PURE__*/React
     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 = (0, _floatingUiReact.useHoverReferenceInteraction)(context, {
     enabled: hoverInteractionsEnabled,
     move: false,
     handleClose: (0, _floatingUiReact.safePolygon)({
-      blockPointerEvents: pointerType !== 'touch' && (!_detectBrowser.isWebKit || nested),
+      blockPointerEvents: shouldBlockSafePolygonPointerEvents,
       getScope
     }),
     restMs: mounted && positionerElement ? 0 : delay,
@@ -453,6 +489,7 @@ const NavigationMenuTrigger = exports.NavigationMenuTrigger = /*#__PURE__*/React
   }, [isActiveItem, context, setFloatingRootContext, prevTriggerElementRef, triggerElement]);
   function handleActivation(event) {
     ReactDOM.flushSync(() => {
+      const currentTarget = (0, _dom.isHTMLElement)(event.currentTarget) ? event.currentTarget : null;
       const prevTriggerRect = prevTriggerElementRef.current?.getBoundingClientRect();
       if (mounted && prevTriggerRect && triggerElement) {
         const nextTriggerRect = triggerElement.getBoundingClientRect();
@@ -477,16 +514,20 @@ const NavigationMenuTrigger = exports.NavigationMenuTrigger = /*#__PURE__*/React
       if (value != null) {
         setValue(itemValue, (0, _createBaseUIEventDetails.createChangeEventDetails)(event.type === 'mouseenter' ? _reasons.REASONS.triggerHover : _reasons.REASONS.triggerPress, event.nativeEvent));
       }
-      if (event.type === 'mouseenter' && nested && !positionerElement && pointerType !== 'touch' && hoverFloatingElement && (0, _dom.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;
+          (0, _useHoverInteractionSharedState.applySafePolygonPointerEventsMutation)(hoverInteractionState, {
+            scopeElement,
+            referenceElement: currentTarget,
+            floatingElement: hoverFloatingElement
+          });
+        };
+        if (value != null && value !== itemValue) {
+          queueMicrotask(applyPointerEventsMutation);
+        } else {
+          applyPointerEventsMutation();
         }
-        (0, _useHoverInteractionSharedState.applySafePolygonPointerEventsMutation)(hoverInteractionState, {
-          scopeElement,
-          referenceElement: event.currentTarget,
-          floatingElement: hoverFloatingElement
-        });
       }
     });
   }
@@ -512,12 +553,16 @@ const NavigationMenuTrigger = exports.NavigationMenuTrigger = /*#__PURE__*/React
   function handleSetPointerType(event) {
     setPointerType(event.pointerType);
   }
+  function handleTriggerPointerDown(event) {
+    handleSetPointerType(event);
+    (0, _useHoverInteractionSharedState.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,
     [_constants2.NAVIGATION_MENU_TRIGGER_IDENTIFIER]: '',
@@ -575,10 +620,11 @@ const NavigationMenuTrigger = exports.NavigationMenuTrigger = /*#__PURE__*/React
       tag: "button",
       render: render,
       className: className,
+      style: style,
       state: state,
       stateAttributesMapping: _popupStateMapping.pressableTriggerOpenStateMapping,
       refs: [forwardedRef, handleTriggerElement, buttonRef],
-      props: [getReferenceProps, dismissProps?.reference || _constants.EMPTY_ARRAY, defaultProps, elementProps, getButtonProps]
+      props: [getReferenceProps, dismissProps?.reference || _empty.EMPTY_ARRAY, defaultProps, elementProps, getButtonProps]
     }), isActiveItem && /*#__PURE__*/(0, _jsxRuntime.jsxs)(React.Fragment, {
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_FocusGuard.FocusGuard, {
         ref: beforeOutsideRef,
@@ -597,7 +643,10 @@ const NavigationMenuTrigger = exports.NavigationMenuTrigger = /*#__PURE__*/React
         ref: afterOutsideRef,
         onFocus: event => {
           if (referenceElement && (0, _utils.isOutsideEvent)(event, referenceElement)) {
-            const elementToFocus = afterInsideRef.current && (0, _tabbable.isTabbable)(afterInsideRef.current) ? afterInsideRef.current : triggerElement;
+            ReactDOM.flushSync(() => {
+              setViewportInert(false);
+            });
+            const elementToFocus = afterInsideRef.current || triggerElement;
             elementToFocus?.focus();
           } else {
             let nextTabbable = (0, _utils.getNextTabbable)(triggerElement);

package/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/navigation-menu/viewport/NavigationMenuViewport.js

@@ -10,7 +10,7 @@ var React = _interopRequireWildcard(require("react"));
 var _useIsoLayoutEffect = require("@base-ui/utils/useIsoLayoutEffect");
 var _useId = require("@base-ui/utils/useId");
 var _inertValue = require("@base-ui/utils/inertValue");
-var _useRenderElement = require("../../utils/useRenderElement");
+var _useRenderElement = require("../../internals/useRenderElement");
 var _NavigationMenuRootContext = require("../root/NavigationMenuRootContext");
 var _FocusGuard = require("../../utils/FocusGuard");
 var _utils = require("../../floating-ui-react/utils");
@@ -71,6 +71,7 @@ const NavigationMenuViewport = exports.NavigationMenuViewport = /*#__PURE__*/Rea
     render,
     children,
     id: idProp,
+    style,
     ...elementProps
   } = componentProps;
   const id = (0, _useId.useId)(idProp);

package/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/number-field/decrement/NumberFieldDecrement.js

@@ -7,8 +7,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.NumberFieldDecrement = void 0;
 var React = _interopRequireWildcard(require("react"));
-var _useRenderElement = require("../../utils/useRenderElement");
-var _useButton = require("../../use-button");
+var _useRenderElement = require("../../internals/useRenderElement");
+var _useButton = require("../../internals/use-button");
 var _NumberFieldRootContext = require("../root/NumberFieldRootContext");
 var _useNumberFieldButton = require("../root/useNumberFieldButton");
 var _stateAttributesMapping = require("../utils/stateAttributesMapping");
@@ -24,6 +24,7 @@ const NumberFieldDecrement = exports.NumberFieldDecrement = /*#__PURE__*/React.f
     className,
     disabled: disabledProp = false,
     nativeButton = true,
+    style,
     ...elementProps
   } = componentProps;
   const {
@@ -35,15 +36,10 @@ const NumberFieldDecrement = exports.NumberFieldDecrement = /*#__PURE__*/React.f
     incrementValue,
     inputRef,
     inputValue,
-    intentionalTouchCheckTimeout,
-    isPressedRef,
     minWithDefault,
-    movesAfterTouchRef,
     readOnly,
     setValue,
-    startAutoChange,
     state,
-    stopAutoChange,
     value,
     valueRef,
     locale,
@@ -55,8 +51,6 @@ const NumberFieldDecrement = exports.NumberFieldDecrement = /*#__PURE__*/React.f
   const props = (0, _useNumberFieldButton.useNumberFieldButton)({
     isIncrement: false,
     inputRef,
-    startAutoChange,
-    stopAutoChange,
     inputValue,
     disabled,
     readOnly,
@@ -67,9 +61,6 @@ const NumberFieldDecrement = exports.NumberFieldDecrement = /*#__PURE__*/React.f
     allowInputSyncRef,
     formatOptionsRef,
     valueRef,
-    isPressedRef,
-    intentionalTouchCheckTimeout,
-    movesAfterTouchRef,
     locale,
     lastChangedValueRef,
     onValueCommitted

package/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/number-field/decrement/NumberFieldDecrementDataAttributes.js

@@ -22,11 +22,11 @@ let NumberFieldDecrementDataAttributes = exports.NumberFieldDecrementDataAttribu
    */
   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/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/number-field/group/NumberFieldGroup.js

@@ -9,7 +9,7 @@ exports.NumberFieldGroup = void 0;
 var React = _interopRequireWildcard(require("react"));
 var _NumberFieldRootContext = require("../root/NumberFieldRootContext");
 var _stateAttributesMapping = require("../utils/stateAttributesMapping");
-var _useRenderElement = require("../../utils/useRenderElement");
+var _useRenderElement = require("../../internals/useRenderElement");
 /**
  * Groups the input with the increment and decrement buttons.
  * Renders a `<div>` element.
@@ -20,6 +20,7 @@ const NumberFieldGroup = exports.NumberFieldGroup = /*#__PURE__*/React.forwardRe
   const {
     render,
     className,
+    style,
     ...elementProps
   } = componentProps;
   const {

package/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/number-field/group/NumberFieldGroupDataAttributes.js

@@ -22,11 +22,11 @@ let NumberFieldGroupDataAttributes = exports.NumberFieldGroupDataAttributes = /*
    */
   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/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/number-field/increment/NumberFieldIncrement.js

@@ -7,8 +7,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.NumberFieldIncrement = void 0;
 var React = _interopRequireWildcard(require("react"));
-var _useRenderElement = require("../../utils/useRenderElement");
-var _useButton = require("../../use-button");
+var _useRenderElement = require("../../internals/useRenderElement");
+var _useButton = require("../../internals/use-button");
 var _NumberFieldRootContext = require("../root/NumberFieldRootContext");
 var _useNumberFieldButton = require("../root/useNumberFieldButton");
 var _stateAttributesMapping = require("../utils/stateAttributesMapping");
@@ -24,6 +24,7 @@ const NumberFieldIncrement = exports.NumberFieldIncrement = /*#__PURE__*/React.f
     className,
     disabled: disabledProp = false,
     nativeButton = true,
+    style,
     ...elementProps
   } = componentProps;
   const {
@@ -35,16 +36,11 @@ const NumberFieldIncrement = exports.NumberFieldIncrement = /*#__PURE__*/React.f
     incrementValue,
     inputRef,
     inputValue,
-    intentionalTouchCheckTimeout,
-    isPressedRef,
     locale,
     maxWithDefault,
-    movesAfterTouchRef,
     readOnly,
     setValue,
-    startAutoChange,
     state,
-    stopAutoChange,
     value,
     valueRef,
     lastChangedValueRef,
@@ -55,8 +51,6 @@ const NumberFieldIncrement = exports.NumberFieldIncrement = /*#__PURE__*/React.f
   const props = (0, _useNumberFieldButton.useNumberFieldButton)({
     isIncrement: true,
     inputRef,
-    startAutoChange,
-    stopAutoChange,
     inputValue,
     disabled,
     readOnly,
@@ -67,9 +61,6 @@ const NumberFieldIncrement = exports.NumberFieldIncrement = /*#__PURE__*/React.f
     allowInputSyncRef,
     formatOptionsRef,
     valueRef,
-    isPressedRef,
-    intentionalTouchCheckTimeout,
-    movesAfterTouchRef,
     locale,
     lastChangedValueRef,
     onValueCommitted

package/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/number-field/increment/NumberFieldIncrementDataAttributes.js

@@ -22,11 +22,11 @@ let NumberFieldIncrementDataAttributes = exports.NumberFieldIncrementDataAttribu
    */
   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/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/number-field/input/NumberFieldInput.js

@@ -9,19 +9,19 @@ exports.NumberFieldInput = void 0;
 var React = _interopRequireWildcard(require("react"));
 var _utils = require("../../floating-ui-react/utils");
 var _NumberFieldRootContext = require("../root/NumberFieldRootContext");
-var _FieldRootContext = require("../../field/root/FieldRootContext");
-var _constants = require("../../field/utils/constants");
-var _useField = require("../../field/useField");
-var _FormContext = require("../../form/FormContext");
-var _LabelableContext = require("../../labelable-provider/LabelableContext");
+var _FieldRootContext = require("../../internals/field-root-context/FieldRootContext");
+var _useRegisterFieldControl = require("../../internals/field-register-control/useRegisterFieldControl");
+var _constants = require("../../internals/field-constants/constants");
+var _FormContext = require("../../internals/form-context/FormContext");
+var _LabelableContext = require("../../internals/labelable-provider/LabelableContext");
 var _constants2 = require("../utils/constants");
 var _parse = require("../utils/parse");
 var _stateAttributesMapping = require("../utils/stateAttributesMapping");
-var _useRenderElement = require("../../utils/useRenderElement");
-var _createBaseUIEventDetails = require("../../utils/createBaseUIEventDetails");
+var _useRenderElement = require("../../internals/useRenderElement");
+var _createBaseUIEventDetails = require("../../internals/createBaseUIEventDetails");
 var _formatNumber = require("../../utils/formatNumber");
-var _useValueChanged = require("../../utils/useValueChanged");
-var _reasons = require("../../utils/reasons");
+var _useValueChanged = require("../../internals/useValueChanged");
+var _reasons = require("../../internals/reasons");
 const stateAttributesMapping = {
   ..._constants.fieldValidityMapping,
   ..._stateAttributesMapping.stateAttributesMapping
@@ -38,6 +38,7 @@ const NumberFieldInput = exports.NumberFieldInput = /*#__PURE__*/React.forwardRe
   const {
     render,
     className,
+    style,
     ...elementProps
   } = componentProps;
   const {
@@ -82,13 +83,9 @@ const NumberFieldInput = exports.NumberFieldInput = /*#__PURE__*/React.forwardRe
   } = (0, _LabelableContext.useLabelableContext)();
   const hasTouchedInputRef = React.useRef(false);
   const blockRevalidationRef = React.useRef(false);
-  (0, _useField.useField)({
+  (0, _useRegisterFieldControl.useRegisterFieldControl)(inputRef, {
     id,
-    commit: validation.commit,
-    value,
-    controlRef: inputRef,
-    name,
-    getValue: () => value ?? null
+    value
   });
   (0, _useValueChanged.useValueChanged)(value, previousValue => {
     const validateOnChange = shouldValidateOnChange();
@@ -181,8 +178,7 @@ const NumberFieldInput = exports.NumberFieldInput = /*#__PURE__*/React.forwardRe
 
       // Normalize only the displayed text
       const canonicalText = (0, _formatNumber.formatNumber)(committed, locale, formatOptions);
-      const maxPrecisionText = (0, _formatNumber.formatNumberMaxPrecision)(parsedValue, locale, formatOptions);
-      const shouldPreserveFullPrecision = !hasExplicitPrecision && parsedValue === value && inputValue === maxPrecisionText;
+      const shouldPreserveFullPrecision = !hasExplicitPrecision && parsedValue === value && inputValue === (0, _formatNumber.formatNumberMaxPrecision)(parsedValue, locale, formatOptions);
       if (!shouldPreserveFullPrecision && inputValue !== canonicalText) {
         setInputValue(canonicalText);
       }
@@ -193,7 +189,7 @@ const NumberFieldInput = exports.NumberFieldInput = /*#__PURE__*/React.forwardRe
         return;
       }
       allowInputSyncRef.current = false;
-      const targetValue = event.target.value;
+      const targetValue = event.currentTarget.value;
       if (targetValue.trim() === '') {
         setInputValue(targetValue);
         setValue(null, (0, _createBaseUIEventDetails.createChangeEventDetails)(_reasons.REASONS.inputClear, event.nativeEvent));