@base-ui/react 1.3.0 → 1.4.1

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

@@ -16,11 +16,11 @@ export let NumberFieldInputDataAttributes = /*#__PURE__*/function (NumberFieldIn
    */
   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/esm/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/esm/number-field/root/NumberFieldRoot.js

@@ -1,28 +1,28 @@
 'use client';
 
 import * as React from 'react';
+import { addEventListener } from '@base-ui/utils/addEventListener';
 import { useControlled } from '@base-ui/utils/useControlled';
 import { useStableCallback } from '@base-ui/utils/useStableCallback';
-import { useTimeout } from '@base-ui/utils/useTimeout';
-import { useInterval } from '@base-ui/utils/useInterval';
 import { useIsoLayoutEffect } from '@base-ui/utils/useIsoLayoutEffect';
 import { useValueAsRef } from '@base-ui/utils/useValueAsRef';
 import { useForcedRerendering } from '@base-ui/utils/useForcedRerendering';
 import { useMergedRefs } from '@base-ui/utils/useMergedRefs';
 import { visuallyHidden, visuallyHiddenInput } from '@base-ui/utils/visuallyHidden';
-import { ownerDocument, ownerWindow } from '@base-ui/utils/owner';
+import { ownerDocument } from '@base-ui/utils/owner';
 import { isIOS } from '@base-ui/utils/detectBrowser';
+import { activeElement } from "../../floating-ui-react/utils.js";
 import { NumberFieldRootContext } from "./NumberFieldRootContext.js";
-import { useFieldRootContext } from "../../field/root/FieldRootContext.js";
-import { useLabelableId } from "../../labelable-provider/useLabelableId.js";
+import { useFieldRootContext } from "../../internals/field-root-context/FieldRootContext.js";
+import { useLabelableId } from "../../internals/labelable-provider/useLabelableId.js";
 import { stateAttributesMapping } from "../utils/stateAttributesMapping.js";
-import { useRenderElement } from "../../utils/useRenderElement.js";
+import { useRenderElement } from "../../internals/useRenderElement.js";
 import { getNumberLocaleDetails, PERMILLE, PERCENTAGES, SPACE_SEPARATOR_RE, BASE_NON_NUMERIC_SYMBOLS, MINUS_SIGNS_WITH_ASCII, PLUS_SIGNS_WITH_ASCII } from "../utils/parse.js";
 import { formatNumber, formatNumberMaxPrecision } from "../../utils/formatNumber.js";
-import { CHANGE_VALUE_TICK_DELAY, DEFAULT_STEP, START_AUTO_CHANGE_DELAY } from "../utils/constants.js";
+import { DEFAULT_STEP } from "../utils/constants.js";
 import { toValidatedNumber } from "../utils/validate.js";
-import { createChangeEventDetails, createGenericEventDetails } from "../../utils/createBaseUIEventDetails.js";
-import { REASONS } from "../../utils/reasons.js";
+import { createChangeEventDetails } from "../../internals/createBaseUIEventDetails.js";
+import { REASONS } from "../../internals/reasons.js";
 
 /**
  * Groups all parts of the number field and manages its state.
@@ -42,6 +42,7 @@ export const NumberFieldRoot = /*#__PURE__*/React.forwardRef(function NumberFiel
     required = false,
     disabled: disabledProp = false,
     readOnly = false,
+    form,
     name: nameProp,
     defaultValue,
     value: valueProp,
@@ -55,6 +56,7 @@ export const NumberFieldRoot = /*#__PURE__*/React.forwardRef(function NumberFiel
     render,
     className,
     inputRef: inputRefProp,
+    style,
     ...elementProps
   } = componentProps;
   const {
@@ -99,14 +101,8 @@ export const NumberFieldRoot = /*#__PURE__*/React.forwardRef(function NumberFiel
     hasPendingCommitRef.current = false;
     onValueCommittedProp?.(nextValue, eventDetails);
   });
-  const startTickTimeout = useTimeout();
-  const tickInterval = useInterval();
-  const intentionalTouchCheckTimeout = 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
@@ -232,58 +228,6 @@ export const NumberFieldRoot = /*#__PURE__*/React.forwardRef(function NumberFiel
       direction
     }));
   });
-  const stopAutoChange = useStableCallback(() => {
-    intentionalTouchCheckTimeout.clear();
-    startTickTimeout.clear();
-    tickInterval.clear();
-    unsubscribeFromGlobalContextMenuRef.current();
-    movesAfterTouchRef.current = 0;
-  });
-  const startAutoChange = useStableCallback((isIncrement, triggerEvent) => {
-    stopAutoChange();
-    if (!inputRef.current) {
-      return;
-    }
-    const win = 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.incrementPress : REASONS.decrementPress;
-      onValueCommitted(committed, createGenericEventDetails(commitReason, event));
-    }, {
-      once: true
-    });
-    function tick() {
-      const amount = getStepAmount(triggerEvent) ?? DEFAULT_STEP;
-      return incrementValue(amount, {
-        direction: isIncrement ? 1 : -1,
-        event: triggerEvent,
-        reason: isIncrement ? 'increment-press' : 'decrement-press'
-      });
-    }
-    if (!tick()) {
-      stopAutoChange();
-      return;
-    }
-    startTickTimeout.start(START_AUTO_CHANGE_DELAY, () => {
-      tickInterval.start(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
@@ -321,9 +265,6 @@ export const NumberFieldRoot = /*#__PURE__*/React.forwardRef(function NumberFiel
     }
     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() {
@@ -334,7 +275,7 @@ export const NumberFieldRoot = /*#__PURE__*/React.forwardRef(function NumberFiel
     function handleWheel(event) {
       if (
       // Allow pinch-zooming.
-      event.ctrlKey || ownerDocument(inputRef.current).activeElement !== inputRef.current) {
+      event.ctrlKey || activeElement(ownerDocument(inputRef.current)) !== inputRef.current) {
         return;
       }
 
@@ -347,10 +288,7 @@ export const NumberFieldRoot = /*#__PURE__*/React.forwardRef(function NumberFiel
         reason: 'wheel'
       });
     }
-    element.addEventListener('wheel', handleWheel);
-    return () => {
-      element.removeEventListener('wheel', handleWheel);
-    };
+    return addEventListener(element, 'wheel', handleWheel);
   }, [allowWheelScrub, incrementValue, disabled, readOnly, largeStep, step, getStepAmount]);
   const state = React.useMemo(() => ({
     ...fieldState,
@@ -365,8 +303,6 @@ export const NumberFieldRoot = /*#__PURE__*/React.forwardRef(function NumberFiel
     inputRef,
     inputValue,
     value,
-    startAutoChange,
-    stopAutoChange,
     minWithDefault,
     maxWithDefault,
     disabled,
@@ -380,9 +316,6 @@ export const NumberFieldRoot = /*#__PURE__*/React.forwardRef(function NumberFiel
     valueRef,
     lastChangedValueRef,
     hasPendingCommitRef,
-    isPressedRef,
-    intentionalTouchCheckTimeout,
-    movesAfterTouchRef,
     name,
     required,
     invalid,
@@ -396,7 +329,7 @@ export const NumberFieldRoot = /*#__PURE__*/React.forwardRef(function NumberFiel
     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 = useRenderElement('div', componentProps, {
     ref: forwardedRef,
     state,
@@ -429,6 +362,7 @@ export const NumberFieldRoot = /*#__PURE__*/React.forwardRef(function NumberFiel
       }),
       ref: hiddenInputRef,
       type: "number",
+      form: form,
       name: name,
       value: value ?? '',
       min: min,
@@ -441,7 +375,8 @@ export const NumberFieldRoot = /*#__PURE__*/React.forwardRef(function NumberFiel
       required: required,
       "aria-hidden": true,
       tabIndex: -1,
-      style: name ? visuallyHiddenInput : visuallyHidden
+      style: name ? visuallyHiddenInput : visuallyHidden,
+      suppressHydrationWarning: true
     })]
   });
 });

package/esm/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/esm/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/esm/number-field/root/NumberFieldRootDataAttributes.js

@@ -16,11 +16,11 @@ export let NumberFieldRootDataAttributes = /*#__PURE__*/function (NumberFieldRoo
    */
   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/esm/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/esm/number-field/root/useNumberFieldButton.js

@@ -1,9 +1,11 @@
 'use client';
 
-import * as React from 'react';
-import { DEFAULT_STEP, MAX_POINTER_MOVES_AFTER_TOUCH, SCROLLING_POINTER_MOVE_DISTANCE, TOUCH_TIMEOUT } from "../utils/constants.js";
+import { usePressAndHold } from "../../internals/usePressAndHold.js";
+import { DEFAULT_STEP, CHANGE_VALUE_TICK_DELAY, START_AUTO_CHANGE_DELAY, SCROLLING_POINTER_MOVE_DISTANCE } from "../utils/constants.js";
 import { parseNumber } from "../utils/parse.js";
-import { createChangeEventDetails, createGenericEventDetails } from "../../utils/createBaseUIEventDetails.js";
+import { createChangeEventDetails, createGenericEventDetails } from "../../internals/createBaseUIEventDetails.js";
+import { REASONS } from "../../internals/reasons.js";
+
 // 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.
@@ -20,27 +22,15 @@ export 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.incrementPress : REASONS.decrementPress;
   function commitValue(nativeEvent) {
     allowInputSyncRef.current = true;
 
@@ -55,6 +45,28 @@ export function useNumberFieldButton(params) {
       }));
     }
   }
+  const {
+    pointerHandlers,
+    shouldSkipClick
+  } = usePressAndHold({
+    disabled: disabled || readOnly,
+    elementRef: inputRef,
+    tickDelay: CHANGE_VALUE_TICK_DELAY,
+    startDelay: START_AUTO_CHANGE_DELAY,
+    scrollDistance: SCROLLING_POINTER_MOVE_DISTANCE,
+    tick(triggerEvent) {
+      const amount = getStepAmount(triggerEvent) ?? DEFAULT_STEP;
+      return incrementValue(amount, {
+        direction: isIncrement ? 1 : -1,
+        event: triggerEvent,
+        reason: pressReason
+      });
+    },
+    onStop(nativeEvent) {
+      const committed = lastChangedValueRef.current ?? valueRef.current;
+      onValueCommitted(committed, createGenericEventDetails(pressReason, nativeEvent));
+    }
+  });
   const props = {
     disabled,
     'aria-readonly': readOnly || undefined,
@@ -68,17 +80,10 @@ export 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);
@@ -99,86 +104,14 @@ export 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(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 < 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 > 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/esm/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/esm/number-field/scrub-area/NumberFieldScrubArea.js

@@ -2,6 +2,8 @@
 
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
+import { addEventListener } from '@base-ui/utils/addEventListener';
+import { mergeCleanups } from '@base-ui/utils/mergeCleanups';
 import { ownerWindow, ownerDocument } from '@base-ui/utils/owner';
 import { isFirefox, isWebKit } from '@base-ui/utils/detectBrowser';
 import { useStableCallback } from '@base-ui/utils/useStableCallback';
@@ -9,12 +11,13 @@ import { useTimeout } from '@base-ui/utils/useTimeout';
 import { useNumberFieldRootContext } from "../root/NumberFieldRootContext.js";
 import { stateAttributesMapping } from "../utils/stateAttributesMapping.js";
 import { NumberFieldScrubAreaContext } from "./NumberFieldScrubAreaContext.js";
-import { useRenderElement } from "../../utils/useRenderElement.js";
+import { useRenderElement } from "../../internals/useRenderElement.js";
 import { getViewportRect } from "../utils/getViewportRect.js";
 import { subscribeToVisualViewportResize } from "../utils/subscribeToVisualViewportResize.js";
 import { DEFAULT_STEP } from "../utils/constants.js";
-import { createGenericEventDetails } from "../../utils/createBaseUIEventDetails.js";
-import { REASONS } from "../../utils/reasons.js";
+import { createGenericEventDetails } from "../../internals/createBaseUIEventDetails.js";
+import { REASONS } from "../../internals/reasons.js";
+import { getTarget } from "../../floating-ui-react/utils.js";
 
 /**
  * An interactive area where the user can click and drag to change the field value.
@@ -30,6 +33,7 @@ export const NumberFieldScrubArea = /*#__PURE__*/React.forwardRef(function Numbe
     direction = 'horizontal',
     pixelSensitivity = 2,
     teleportDistance,
+    style,
     ...elementProps
   } = componentProps;
   const {
@@ -184,12 +188,10 @@ export const NumberFieldScrubArea = /*#__PURE__*/React.forwardRef(function Numbe
       }
     }
     const win = ownerWindow(inputRef.current);
-    win.addEventListener('pointerup', handleScrubPointerUp, true);
-    win.addEventListener('pointermove', handleScrubPointerMove, true);
+    const unsubscribe = mergeCleanups(addEventListener(win, 'pointerup', handleScrubPointerUp, true), 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]);
 
@@ -204,10 +206,7 @@ export const NumberFieldScrubArea = /*#__PURE__*/React.forwardRef(function Numbe
         event.preventDefault();
       }
     }
-    element.addEventListener('touchstart', handleTouchStart);
-    return () => {
-      element.removeEventListener('touchstart', handleTouchStart);
-    };
+    return addEventListener(element, 'touchstart', handleTouchStart);
   }, [disabled, readOnly]);
   const defaultProps = {
     role: 'presentation',
@@ -229,7 +228,7 @@ export const NumberFieldScrubArea = /*#__PURE__*/React.forwardRef(function Numbe
       }
       isScrubbingRef.current = true;
       didMoveRef.current = false;
-      pointerDownTargetRef.current = event.target;
+      pointerDownTargetRef.current = getTarget(event.nativeEvent);
       onScrubbingChange(true, event.nativeEvent);
 
       // WebKit causes significant layout shift with the native message, so we can't use it.

package/esm/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/esm/number-field/scrub-area/NumberFieldScrubAreaDataAttributes.js

@@ -16,11 +16,11 @@ export let NumberFieldScrubAreaDataAttributes = /*#__PURE__*/function (NumberFie
    */
   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/esm/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/esm/number-field/scrub-area-cursor/NumberFieldScrubAreaCursor.js

@@ -7,7 +7,7 @@ import { ownerDocument } from '@base-ui/utils/owner';
 import { useNumberFieldRootContext } from "../root/NumberFieldRootContext.js";
 import { stateAttributesMapping } from "../utils/stateAttributesMapping.js";
 import { useNumberFieldScrubAreaContext } from "../scrub-area/NumberFieldScrubAreaContext.js";
-import { useRenderElement } from "../../utils/useRenderElement.js";
+import { useRenderElement } from "../../internals/useRenderElement.js";
 
 /**
  * A custom element to display instead of the native cursor while using the scrub area.
@@ -22,6 +22,7 @@ export const NumberFieldScrubAreaCursor = /*#__PURE__*/React.forwardRef(function
   const {
     render,
     className,
+    style,
     ...elementProps
   } = componentProps;
   const {

package/esm/number-field/scrub-area-cursor/NumberFieldScrubAreaCursorDataAttributes.d.ts

@@ -16,11 +16,11 @@ export declare enum NumberFieldScrubAreaCursorDataAttributes {
    */
   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",
   /**