@base-ui/react 1.3.0 → 1.4.1

package/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",
   /**

package/number-field/input/NumberFieldInputDataAttributes.js

@@ -22,11 +22,11 @@ let NumberFieldInputDataAttributes = exports.NumberFieldInputDataAttributes = /*
    */
   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).
    */
   NumberFieldInputDataAttributes["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).
    */
   NumberFieldInputDataAttributes["invalid"] = "data-invalid";
   /**

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

@@ -1,9 +1,9 @@
 import * as React from 'react';
 import type { FieldRootState } from "../../field/root/FieldRoot.js";
-import type { BaseUIComponentProps } from "../../utils/types.js";
+import type { BaseUIComponentProps } from "../../internals/types.js";
 import type { ChangeEventCustomProperties } from "../utils/types.js";
-import { type BaseUIChangeEventDetails, type BaseUIGenericEventDetails } from "../../utils/createBaseUIEventDetails.js";
-import { REASONS } from "../../utils/reasons.js";
+import { type BaseUIChangeEventDetails, type BaseUIGenericEventDetails } from "../../internals/createBaseUIEventDetails.js";
+import { REASONS } from "../../internals/reasons.js";
 /**
  * Groups all parts of the number field and manages its state.
  * Renders a `<div>` element.
@@ -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.
    */

package/number-field/root/NumberFieldRoot.js

@@ -7,10 +7,9 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.NumberFieldRoot = void 0;
 var React = _interopRequireWildcard(require("react"));
+var _addEventListener = require("@base-ui/utils/addEventListener");
 var _useControlled = require("@base-ui/utils/useControlled");
 var _useStableCallback = require("@base-ui/utils/useStableCallback");
-var _useTimeout = require("@base-ui/utils/useTimeout");
-var _useInterval = require("@base-ui/utils/useInterval");
 var _useIsoLayoutEffect = require("@base-ui/utils/useIsoLayoutEffect");
 var _useValueAsRef = require("@base-ui/utils/useValueAsRef");
 var _useForcedRerendering = require("@base-ui/utils/useForcedRerendering");
@@ -18,17 +17,18 @@ var _useMergedRefs = require("@base-ui/utils/useMergedRefs");
 var _visuallyHidden = require("@base-ui/utils/visuallyHidden");
 var _owner = require("@base-ui/utils/owner");
 var _detectBrowser = require("@base-ui/utils/detectBrowser");
+var _utils = require("../../floating-ui-react/utils");
 var _NumberFieldRootContext = require("./NumberFieldRootContext");
-var _FieldRootContext = require("../../field/root/FieldRootContext");
-var _useLabelableId = require("../../labelable-provider/useLabelableId");
+var _FieldRootContext = require("../../internals/field-root-context/FieldRootContext");
+var _useLabelableId = require("../../internals/labelable-provider/useLabelableId");
 var _stateAttributesMapping = require("../utils/stateAttributesMapping");
-var _useRenderElement = require("../../utils/useRenderElement");
+var _useRenderElement = require("../../internals/useRenderElement");
 var _parse = require("../utils/parse");
 var _formatNumber = require("../../utils/formatNumber");
 var _constants = require("../utils/constants");
 var _validate = require("../utils/validate");
-var _createBaseUIEventDetails = require("../../utils/createBaseUIEventDetails");
-var _reasons = require("../../utils/reasons");
+var _createBaseUIEventDetails = require("../../internals/createBaseUIEventDetails");
+var _reasons = require("../../internals/reasons");
 var _jsxRuntime = require("react/jsx-runtime");
 /**
  * Groups all parts of the number field and manages its state.
@@ -47,6 +47,7 @@ const NumberFieldRoot = exports.NumberFieldRoot = /*#__PURE__*/React.forwardRef(
     required = false,
     disabled: disabledProp = false,
     readOnly = false,
+    form,
     name: nameProp,
     defaultValue,
     value: valueProp,
@@ -60,6 +61,7 @@ const NumberFieldRoot = exports.NumberFieldRoot = /*#__PURE__*/React.forwardRef(
     render,
     className,
     inputRef: inputRefProp,
+    style,
     ...elementProps
   } = componentProps;
   const {
@@ -104,14 +106,8 @@ const NumberFieldRoot = exports.NumberFieldRoot = /*#__PURE__*/React.forwardRef(
     hasPendingCommitRef.current = false;
     onValueCommittedProp?.(nextValue, eventDetails);
   });
-  const startTickTimeout = (0, _useTimeout.useTimeout)();
-  const tickInterval = (0, _useInterval.useInterval)();
-  const intentionalTouchCheckTimeout = (0, _useTimeout.useTimeout)();
-  const isPressedRef = React.useRef(false);
-  const movesAfterTouchRef = React.useRef(0);
   const allowInputSyncRef = React.useRef(true);
   const lastChangedValueRef = React.useRef(null);
-  const unsubscribeFromGlobalContextMenuRef = React.useRef(() => {});
 
   // During SSR, the value is formatted on the server, whose locale may differ from the client's
   // locale. This causes a hydration mismatch, which we manually suppress. This is preferable to
@@ -237,58 +233,6 @@ const NumberFieldRoot = exports.NumberFieldRoot = /*#__PURE__*/React.forwardRef(
       direction
     }));
   });
-  const stopAutoChange = (0, _useStableCallback.useStableCallback)(() => {
-    intentionalTouchCheckTimeout.clear();
-    startTickTimeout.clear();
-    tickInterval.clear();
-    unsubscribeFromGlobalContextMenuRef.current();
-    movesAfterTouchRef.current = 0;
-  });
-  const startAutoChange = (0, _useStableCallback.useStableCallback)((isIncrement, triggerEvent) => {
-    stopAutoChange();
-    if (!inputRef.current) {
-      return;
-    }
-    const win = (0, _owner.ownerWindow)(inputRef.current);
-    function handleContextMenu(event) {
-      event.preventDefault();
-    }
-
-    // A global context menu is necessary to prevent the context menu from appearing when the touch
-    // is slightly outside of the element's hit area.
-    win.addEventListener('contextmenu', handleContextMenu);
-    unsubscribeFromGlobalContextMenuRef.current = () => {
-      win.removeEventListener('contextmenu', handleContextMenu);
-    };
-    win.addEventListener('pointerup', event => {
-      isPressedRef.current = false;
-      stopAutoChange();
-      const committed = lastChangedValueRef.current ?? valueRef.current;
-      const commitReason = isIncrement ? _reasons.REASONS.incrementPress : _reasons.REASONS.decrementPress;
-      onValueCommitted(committed, (0, _createBaseUIEventDetails.createGenericEventDetails)(commitReason, event));
-    }, {
-      once: true
-    });
-    function tick() {
-      const amount = getStepAmount(triggerEvent) ?? _constants.DEFAULT_STEP;
-      return incrementValue(amount, {
-        direction: isIncrement ? 1 : -1,
-        event: triggerEvent,
-        reason: isIncrement ? 'increment-press' : 'decrement-press'
-      });
-    }
-    if (!tick()) {
-      stopAutoChange();
-      return;
-    }
-    startTickTimeout.start(_constants.START_AUTO_CHANGE_DELAY, () => {
-      tickInterval.start(_constants.CHANGE_VALUE_TICK_DELAY, () => {
-        if (!tick()) {
-          stopAutoChange();
-        }
-      });
-    });
-  });
 
   // We need to update the input value when the external `value` prop changes. This ends up acting
   // as a single source of truth to update the input value, bypassing the need to manually set it in
@@ -326,9 +270,6 @@ const NumberFieldRoot = exports.NumberFieldRoot = /*#__PURE__*/React.forwardRef(
     }
     setInputMode(computedInputMode);
   }, [minWithDefault, formatStyle]);
-  React.useEffect(() => {
-    return () => stopAutoChange();
-  }, [stopAutoChange]);
 
   // The `onWheel` prop can't be prevented, so we need to use a global event listener.
   React.useEffect(function registerElementWheelListener() {
@@ -339,7 +280,7 @@ const NumberFieldRoot = exports.NumberFieldRoot = /*#__PURE__*/React.forwardRef(
     function handleWheel(event) {
       if (
       // Allow pinch-zooming.
-      event.ctrlKey || (0, _owner.ownerDocument)(inputRef.current).activeElement !== inputRef.current) {
+      event.ctrlKey || (0, _utils.activeElement)((0, _owner.ownerDocument)(inputRef.current)) !== inputRef.current) {
         return;
       }
 
@@ -352,10 +293,7 @@ const NumberFieldRoot = exports.NumberFieldRoot = /*#__PURE__*/React.forwardRef(
         reason: 'wheel'
       });
     }
-    element.addEventListener('wheel', handleWheel);
-    return () => {
-      element.removeEventListener('wheel', handleWheel);
-    };
+    return (0, _addEventListener.addEventListener)(element, 'wheel', handleWheel);
   }, [allowWheelScrub, incrementValue, disabled, readOnly, largeStep, step, getStepAmount]);
   const state = React.useMemo(() => ({
     ...fieldState,
@@ -370,8 +308,6 @@ const NumberFieldRoot = exports.NumberFieldRoot = /*#__PURE__*/React.forwardRef(
     inputRef,
     inputValue,
     value,
-    startAutoChange,
-    stopAutoChange,
     minWithDefault,
     maxWithDefault,
     disabled,
@@ -385,9 +321,6 @@ const NumberFieldRoot = exports.NumberFieldRoot = /*#__PURE__*/React.forwardRef(
     valueRef,
     lastChangedValueRef,
     hasPendingCommitRef,
-    isPressedRef,
-    intentionalTouchCheckTimeout,
-    movesAfterTouchRef,
     name,
     required,
     invalid,
@@ -401,7 +334,7 @@ const NumberFieldRoot = exports.NumberFieldRoot = /*#__PURE__*/React.forwardRef(
     setIsScrubbing,
     state,
     onValueCommitted
-  }), [inputRef, inputValue, value, startAutoChange, stopAutoChange, minWithDefault, maxWithDefault, disabled, readOnly, id, setValue, incrementValue, getStepAmount, formatOptionsRef, valueRef, intentionalTouchCheckTimeout, name, required, invalid, inputMode, getAllowedNonNumericKeys, min, max, setInputValue, locale, isScrubbing, state, onValueCommitted]);
+  }), [inputRef, inputValue, value, minWithDefault, maxWithDefault, disabled, readOnly, id, setValue, incrementValue, getStepAmount, formatOptionsRef, valueRef, name, required, invalid, inputMode, getAllowedNonNumericKeys, min, max, setInputValue, locale, isScrubbing, state, onValueCommitted]);
   const element = (0, _useRenderElement.useRenderElement)('div', componentProps, {
     ref: forwardedRef,
     state,
@@ -434,6 +367,7 @@ const NumberFieldRoot = exports.NumberFieldRoot = /*#__PURE__*/React.forwardRef(
       }),
       ref: hiddenInputRef,
       type: "number",
+      form: form,
       name: name,
       value: value ?? '',
       min: min,
@@ -446,7 +380,8 @@ const NumberFieldRoot = exports.NumberFieldRoot = /*#__PURE__*/React.forwardRef(
       required: required,
       "aria-hidden": true,
       tabIndex: -1,
-      style: name ? _visuallyHidden.visuallyHiddenInput : _visuallyHidden.visuallyHidden
+      style: name ? _visuallyHidden.visuallyHiddenInput : _visuallyHidden.visuallyHidden,
+      suppressHydrationWarning: true
     })]
   });
 });

package/number-field/root/NumberFieldRootContext.d.ts

@@ -1,5 +1,4 @@
 import * as React from 'react';
-import { Timeout } from '@base-ui/utils/useTimeout';
 import type { NumberFieldRoot, NumberFieldRootState } from "./NumberFieldRoot.js";
 import { EventWithOptionalKeyState } from "../utils/types.js";
 import type { IncrementValueParameters } from "../utils/types.js";
@@ -7,8 +6,6 @@ export type InputMode = 'numeric' | 'decimal' | 'text';
 export interface NumberFieldRootContext {
   inputValue: string;
   value: number | null;
-  startAutoChange: (isIncrement: boolean, event?: React.MouseEvent | Event) => void;
-  stopAutoChange: () => void;
   minWithDefault: number;
   maxWithDefault: number;
   disabled: boolean;
@@ -23,9 +20,6 @@ export interface NumberFieldRootContext {
   valueRef: React.RefObject<number | null>;
   lastChangedValueRef: React.RefObject<number | null>;
   hasPendingCommitRef: React.RefObject<boolean>;
-  isPressedRef: React.RefObject<boolean | null>;
-  intentionalTouchCheckTimeout: Timeout;
-  movesAfterTouchRef: React.RefObject<number | null>;
   name: string | undefined;
   required: boolean;
   invalid: boolean | undefined;

package/number-field/root/NumberFieldRootDataAttributes.d.ts

@@ -16,11 +16,11 @@ export declare enum NumberFieldRootDataAttributes {
    */
   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/root/NumberFieldRootDataAttributes.js

@@ -22,11 +22,11 @@ let NumberFieldRootDataAttributes = exports.NumberFieldRootDataAttributes = /*#_
    */
   NumberFieldRootDataAttributes["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).
    */
   NumberFieldRootDataAttributes["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).
    */
   NumberFieldRootDataAttributes["invalid"] = "data-invalid";
   /**

package/number-field/root/useNumberFieldButton.d.ts

@@ -1,8 +1,7 @@
 import * as React from 'react';
-import type { Timeout } from '@base-ui/utils/useTimeout';
 import type { EventWithOptionalKeyState, IncrementValueParameters } from "../utils/types.js";
 import type { NumberFieldRoot } from "./NumberFieldRoot.js";
-import type { HTMLProps } from "../../utils/types.js";
+import type { HTMLProps } from "../../internals/types.js";
 export declare function useNumberFieldButton(params: UseNumberFieldButtonParameters): React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>;
 export interface UseNumberFieldButtonParameters {
   allowInputSyncRef: React.RefObject<boolean | null>;
@@ -13,15 +12,10 @@ export interface UseNumberFieldButtonParameters {
   incrementValue: (amount: number, params: IncrementValueParameters) => boolean;
   inputRef: React.RefObject<HTMLInputElement | null>;
   inputValue: string;
-  intentionalTouchCheckTimeout: Timeout;
   isIncrement: boolean;
-  isPressedRef: React.RefObject<boolean | null>;
   locale?: Intl.LocalesArgument | undefined;
-  movesAfterTouchRef: React.RefObject<number | null>;
   readOnly: boolean;
   setValue: (value: number | null, details: NumberFieldRoot.ChangeEventDetails) => boolean;
-  startAutoChange: (isIncrement: boolean, event?: React.MouseEvent | Event) => void;
-  stopAutoChange: () => void;
   valueRef: React.RefObject<number | null>;
   lastChangedValueRef: React.RefObject<number | null>;
   onValueCommitted: (value: number | null, eventDetails: NumberFieldRoot.CommitEventDetails) => void;

package/number-field/root/useNumberFieldButton.js

@@ -1,15 +1,15 @@
 "use strict";
 'use client';
 
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.useNumberFieldButton = useNumberFieldButton;
-var React = _interopRequireWildcard(require("react"));
+var _usePressAndHold = require("../../internals/usePressAndHold");
 var _constants = require("../utils/constants");
 var _parse = require("../utils/parse");
-var _createBaseUIEventDetails = require("../../utils/createBaseUIEventDetails");
+var _createBaseUIEventDetails = require("../../internals/createBaseUIEventDetails");
+var _reasons = require("../../internals/reasons");
 // 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.
@@ -26,27 +26,15 @@ function useNumberFieldButton(params) {
     incrementValue,
     inputRef,
     inputValue,
-    intentionalTouchCheckTimeout,
     isIncrement,
-    isPressedRef,
     locale,
-    movesAfterTouchRef,
     readOnly,
     setValue,
-    startAutoChange,
-    stopAutoChange,
     valueRef,
     lastChangedValueRef,
     onValueCommitted
   } = params;
-  const incrementDownCoordsRef = React.useRef({
-    x: 0,
-    y: 0
-  });
-  const isTouchingButtonRef = React.useRef(false);
-  const ignoreClickRef = React.useRef(false);
-  const pointerTypeRef = React.useRef('');
-  const pressReason = isIncrement ? 'increment-press' : 'decrement-press';
+  const pressReason = isIncrement ? _reasons.REASONS.incrementPress : _reasons.REASONS.decrementPress;
   function commitValue(nativeEvent) {
     allowInputSyncRef.current = true;
 
@@ -61,6 +49,28 @@ function useNumberFieldButton(params) {
       }));
     }
   }
+  const {
+    pointerHandlers,
+    shouldSkipClick
+  } = (0, _usePressAndHold.usePressAndHold)({
+    disabled: disabled || readOnly,
+    elementRef: inputRef,
+    tickDelay: _constants.CHANGE_VALUE_TICK_DELAY,
+    startDelay: _constants.START_AUTO_CHANGE_DELAY,
+    scrollDistance: _constants.SCROLLING_POINTER_MOVE_DISTANCE,
+    tick(triggerEvent) {
+      const amount = getStepAmount(triggerEvent) ?? _constants.DEFAULT_STEP;
+      return incrementValue(amount, {
+        direction: isIncrement ? 1 : -1,
+        event: triggerEvent,
+        reason: pressReason
+      });
+    },
+    onStop(nativeEvent) {
+      const committed = lastChangedValueRef.current ?? valueRef.current;
+      onValueCommitted(committed, (0, _createBaseUIEventDetails.createGenericEventDetails)(pressReason, nativeEvent));
+    }
+  });
   const props = {
     disabled,
     'aria-readonly': readOnly || undefined,
@@ -74,17 +84,10 @@ function useNumberFieldButton(params) {
       WebkitUserSelect: 'none',
       userSelect: 'none'
     },
-    onTouchStart() {
-      isTouchingButtonRef.current = true;
-    },
-    onTouchEnd() {
-      isTouchingButtonRef.current = false;
-    },
+    ...pointerHandlers,
     onClick(event) {
       const isDisabled = disabled || readOnly;
-      if (event.defaultPrevented || isDisabled || (
-      // If it's not a keyboard/virtual click, ignore.
-      isTouchLikePointerType(pointerTypeRef.current) ? ignoreClickRef.current : event.detail !== 0)) {
+      if (event.defaultPrevented || isDisabled || shouldSkipClick(event)) {
         return;
       }
       commitValue(event.nativeEvent);
@@ -105,86 +108,14 @@ function useNumberFieldButton(params) {
       if (event.defaultPrevented || readOnly || !isMainButton || disabled) {
         return;
       }
-      pointerTypeRef.current = event.pointerType;
-      ignoreClickRef.current = false;
-      isPressedRef.current = true;
-      incrementDownCoordsRef.current = {
-        x: event.clientX,
-        y: event.clientY
-      };
+
+      // Sync dirty input value before starting the hold sequence.
       commitValue(event.nativeEvent);
-      const isTouchPointer = isTouchLikePointerType(event.pointerType);
-      if (!isTouchPointer) {
-        event.preventDefault();
+      if (!isTouchLikePointerType(event.pointerType)) {
+        // Focus the input so the user can continue with keyboard interactions.
         inputRef.current?.focus();
-        startAutoChange(isIncrement, event);
-      } else {
-        // We need to check if the pointerdown was intentional, and not the result of a scroll
-        // or pinch-zoom. In that case, we don't want to change the value.
-        intentionalTouchCheckTimeout.start(_constants.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 != null && moves < _constants.MAX_POINTER_MOVES_AFTER_TOUCH) {
-            startAutoChange(isIncrement, event);
-            ignoreClickRef.current = true; // synthesized click should be ignored
-          } else {
-            // No auto-change (simple tap or scroll gesture), allow the click handler
-            // to perform a single increment and commit.
-            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) {
-      const isDisabled = disabled || readOnly;
-      if (isDisabled || !isTouchLikePointerType(event.pointerType) || !isPressedRef.current) {
-        return;
-      }
-      if (movesAfterTouchRef.current != null) {
-        movesAfterTouchRef.current += 1;
-      }
-      const {
-        x,
-        y
-      } = incrementDownCoordsRef.current;
-      const dx = x - event.clientX;
-      const dy = y - event.clientY;
-
-      // An alternative to this technique is to detect when the NumberField's parent container
-      // has been scrolled
-      if (dx ** 2 + dy ** 2 > _constants.SCROLLING_POINTER_MOVE_DISTANCE ** 2) {
-        stopAutoChange();
-      }
-    },
-    onMouseEnter(event) {
-      const isDisabled = disabled || readOnly;
-      if (event.defaultPrevented || isDisabled || !isPressedRef.current || isTouchingButtonRef.current || isTouchLikePointerType(pointerTypeRef.current)) {
-        return;
-      }
-      startAutoChange(isIncrement, event);
-    },
-    onMouseLeave() {
-      if (isTouchingButtonRef.current) {
-        return;
-      }
-      stopAutoChange();
-    },
-    onMouseUp() {
-      if (isTouchingButtonRef.current) {
-        return;
       }
-      stopAutoChange();
+      pointerHandlers.onPointerDown(event);
     }
   };
   return props;

package/number-field/scrub-area/NumberFieldScrubArea.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";
 /**
  * An interactive area where the user can click and drag to change the field value.

package/number-field/scrub-area/NumberFieldScrubArea.js

@@ -8,6 +8,8 @@ Object.defineProperty(exports, "__esModule", {
 exports.NumberFieldScrubArea = void 0;
 var React = _interopRequireWildcard(require("react"));
 var ReactDOM = _interopRequireWildcard(require("react-dom"));
+var _addEventListener = require("@base-ui/utils/addEventListener");
+var _mergeCleanups = require("@base-ui/utils/mergeCleanups");
 var _owner = require("@base-ui/utils/owner");
 var _detectBrowser = require("@base-ui/utils/detectBrowser");
 var _useStableCallback = require("@base-ui/utils/useStableCallback");
@@ -15,12 +17,13 @@ var _useTimeout = require("@base-ui/utils/useTimeout");
 var _NumberFieldRootContext = require("../root/NumberFieldRootContext");
 var _stateAttributesMapping = require("../utils/stateAttributesMapping");
 var _NumberFieldScrubAreaContext = require("./NumberFieldScrubAreaContext");
-var _useRenderElement = require("../../utils/useRenderElement");
+var _useRenderElement = require("../../internals/useRenderElement");
 var _getViewportRect = require("../utils/getViewportRect");
 var _subscribeToVisualViewportResize = require("../utils/subscribeToVisualViewportResize");
 var _constants = require("../utils/constants");
-var _createBaseUIEventDetails = require("../../utils/createBaseUIEventDetails");
-var _reasons = require("../../utils/reasons");
+var _createBaseUIEventDetails = require("../../internals/createBaseUIEventDetails");
+var _reasons = require("../../internals/reasons");
+var _utils = require("../../floating-ui-react/utils");
 var _jsxRuntime = require("react/jsx-runtime");
 /**
  * An interactive area where the user can click and drag to change the field value.
@@ -35,6 +38,7 @@ const NumberFieldScrubArea = exports.NumberFieldScrubArea = /*#__PURE__*/React.f
     direction = 'horizontal',
     pixelSensitivity = 2,
     teleportDistance,
+    style,
     ...elementProps
   } = componentProps;
   const {
@@ -189,12 +193,10 @@ const NumberFieldScrubArea = exports.NumberFieldScrubArea = /*#__PURE__*/React.f
       }
     }
     const win = (0, _owner.ownerWindow)(inputRef.current);
-    win.addEventListener('pointerup', handleScrubPointerUp, true);
-    win.addEventListener('pointermove', handleScrubPointerMove, true);
+    const unsubscribe = (0, _mergeCleanups.mergeCleanups)((0, _addEventListener.addEventListener)(win, 'pointerup', handleScrubPointerUp, true), (0, _addEventListener.addEventListener)(win, 'pointermove', handleScrubPointerMove, true));
     return () => {
       exitPointerLockTimeout.clear();
-      win.removeEventListener('pointerup', handleScrubPointerUp, true);
-      win.removeEventListener('pointermove', handleScrubPointerMove, true);
+      unsubscribe();
     };
   }, [disabled, readOnly, incrementValue, isScrubbing, getStepAmount, inputRef, onScrubbingChange, onScrub, direction, pixelSensitivity, lastChangedValueRef, onValueCommitted, valueRef, exitPointerLockTimeout]);
 
@@ -209,10 +211,7 @@ const NumberFieldScrubArea = exports.NumberFieldScrubArea = /*#__PURE__*/React.f
         event.preventDefault();
       }
     }
-    element.addEventListener('touchstart', handleTouchStart);
-    return () => {
-      element.removeEventListener('touchstart', handleTouchStart);
-    };
+    return (0, _addEventListener.addEventListener)(element, 'touchstart', handleTouchStart);
   }, [disabled, readOnly]);
   const defaultProps = {
     role: 'presentation',
@@ -234,7 +233,7 @@ const NumberFieldScrubArea = exports.NumberFieldScrubArea = /*#__PURE__*/React.f
       }
       isScrubbingRef.current = true;
       didMoveRef.current = false;
-      pointerDownTargetRef.current = event.target;
+      pointerDownTargetRef.current = (0, _utils.getTarget)(event.nativeEvent);
       onScrubbingChange(true, event.nativeEvent);
 
       // WebKit causes significant layout shift with the native message, so we can't use it.

package/number-field/scrub-area/NumberFieldScrubAreaDataAttributes.d.ts

@@ -16,11 +16,11 @@ export declare enum NumberFieldScrubAreaDataAttributes {
    */
   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/scrub-area/NumberFieldScrubAreaDataAttributes.js

@@ -22,11 +22,11 @@ let NumberFieldScrubAreaDataAttributes = exports.NumberFieldScrubAreaDataAttribu
    */
   NumberFieldScrubAreaDataAttributes["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).
    */
   NumberFieldScrubAreaDataAttributes["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).
    */
   NumberFieldScrubAreaDataAttributes["invalid"] = "data-invalid";
   /**

package/number-field/scrub-area-cursor/NumberFieldScrubAreaCursor.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";
 /**
  * A custom element to display instead of the native cursor while using the scrub area.

package/number-field/scrub-area-cursor/NumberFieldScrubAreaCursor.js

@@ -13,7 +13,7 @@ var _owner = require("@base-ui/utils/owner");
 var _NumberFieldRootContext = require("../root/NumberFieldRootContext");
 var _stateAttributesMapping = require("../utils/stateAttributesMapping");
 var _NumberFieldScrubAreaContext = require("../scrub-area/NumberFieldScrubAreaContext");
-var _useRenderElement = require("../../utils/useRenderElement");
+var _useRenderElement = require("../../internals/useRenderElement");
 /**
  * A custom element to display instead of the native cursor while using the scrub area.
  * Renders a `<span>` element.
@@ -27,6 +27,7 @@ const NumberFieldScrubAreaCursor = exports.NumberFieldScrubAreaCursor = /*#__PUR
   const {
     render,
     className,
+    style,
     ...elementProps
   } = componentProps;
   const {