@base-ui/react 1.6.0 → 1.7.0

package/number-field/root/useNumberFieldStepperButton.js

@@ -7,9 +7,16 @@ Object.defineProperty(exports, "__esModule", {
 exports.useNumberFieldStepperButton = useNumberFieldStepperButton;
 var _useRenderElement = require("../../internals/useRenderElement");
 var _useButton = require("../../internals/use-button");
+var _usePressAndHold = require("../../internals/usePressAndHold");
+var _parse = require("../utils/parse");
+var _createBaseUIEventDetails = require("../../internals/createBaseUIEventDetails");
+var _reasons = require("../../internals/reasons");
 var _NumberFieldRootContext = require("./NumberFieldRootContext");
-var _useNumberFieldButton = require("./useNumberFieldButton");
 var _stateAttributesMapping = require("../utils/stateAttributesMapping");
+const SELECT_NONE_STYLE = {
+  WebkitUserSelect: 'none',
+  userSelect: 'none'
+};
 /**
  * Shared implementation for the increment and decrement stepper buttons. They differ only in the
  * direction they step and the boundary (`max` vs `min`) at which they become disabled.
@@ -25,43 +32,123 @@ function useNumberFieldStepperButton(componentProps, forwardedRef, isIncrement)
   } = componentProps;
   const {
     allowInputSyncRef,
-    disabled: contextDisabled,
     formatOptionsRef,
     getStepAmount,
     id,
     incrementValue,
     inputRef,
-    inputValue,
     maxWithDefault,
     minWithDefault,
-    readOnly,
     setValue,
     state,
-    value,
     valueRef,
     locale,
     lastChangedValueRef,
     onValueCommitted
   } = (0, _NumberFieldRootContext.useNumberFieldRootContext)();
+  const {
+    disabled: contextDisabled,
+    readOnly,
+    value,
+    inputValue
+  } = state;
   const isAtBoundary = value != null && (isIncrement ? value >= maxWithDefault : value <= minWithDefault);
   const disabled = disabledProp || contextDisabled || isAtBoundary;
-  const props = (0, _useNumberFieldButton.useNumberFieldButton)({
-    isIncrement,
-    inputRef,
-    inputValue,
-    disabled,
-    readOnly,
-    id,
-    setValue,
-    getStepAmount,
-    incrementValue,
-    allowInputSyncRef,
-    formatOptionsRef,
-    valueRef,
-    locale,
-    lastChangedValueRef,
-    onValueCommitted
+  const pressReason = isIncrement ? _reasons.REASONS.incrementPress : _reasons.REASONS.decrementPress;
+  function commitValue(nativeEvent) {
+    const shouldCommitInputValue = !allowInputSyncRef.current;
+    allowInputSyncRef.current = true;
+    if (!shouldCommitInputValue) {
+      // The input is already synced, so step from the authoritative numeric value rather than
+      // re-parsing the rounded display text. Refresh the commit ref to the current value so a
+      // subsequent canceled step can't commit a stale `lastChangedValueRef` left over from an
+      // earlier change (the `setValue` that used to refresh it is now skipped on this path).
+      lastChangedValueRef.current = valueRef.current;
+      return;
+    }
+
+    // The input is dirty but not yet blurred, so the value won't have been committed.
+    const parsedValue = (0, _parse.parseNumber)(inputValue, locale, formatOptionsRef.current);
+    if (parsedValue !== null) {
+      // Sync the dirty typed value with no direction so it isn't directionally snapped
+      // (`snapOnStep`) before the real increment/decrement runs, which would otherwise emit a
+      // spurious intermediate value.
+      const details = (0, _createBaseUIEventDetails.createChangeEventDetails)(pressReason, nativeEvent);
+      setValue(parsedValue, details);
+
+      // Only sync the ref base when the commit wasn't canceled, so a subsequent increment in the
+      // same interaction steps from the value actually applied.
+      if (!details.isCanceled) {
+        valueRef.current = parsedValue;
+      }
+    }
+  }
+  const {
+    pointerHandlers,
+    shouldSkipClick
+  } = (0, _usePressAndHold.usePressAndHold)({
+    disabled: disabled || readOnly,
+    elementRef: inputRef,
+    tick(triggerEvent) {
+      const amount = getStepAmount(triggerEvent);
+      return incrementValue(amount, {
+        direction: isIncrement ? 1 : -1,
+        event: triggerEvent,
+        reason: pressReason
+      });
+    },
+    onStop(nativeEvent) {
+      // `onStop` fires on every release; fall back to the current value when no tick changed it.
+      // Step interactions never commit `null`, so the `??` can't mask a legitimate null commit.
+      const committed = lastChangedValueRef.current ?? valueRef.current;
+      onValueCommitted(committed, (0, _createBaseUIEventDetails.createGenericEventDetails)(pressReason, nativeEvent));
+    }
   });
+  const props = {
+    disabled,
+    'aria-label': isIncrement ? 'Increase' : 'Decrease',
+    'aria-controls': id,
+    // Keyboard users shouldn't have access to the buttons, since they can use the input element
+    // to change the value. On the other hand, `aria-hidden` is not applied because touch screen
+    // readers should be able to use the buttons.
+    tabIndex: -1,
+    style: SELECT_NONE_STYLE,
+    ...pointerHandlers,
+    onClick(event) {
+      const isDisabled = disabled || readOnly;
+      if (event.defaultPrevented || isDisabled || shouldSkipClick(event)) {
+        return;
+      }
+      commitValue(event.nativeEvent);
+      const amount = getStepAmount(event);
+      const prev = valueRef.current;
+      incrementValue(amount, {
+        direction: isIncrement ? 1 : -1,
+        event: event.nativeEvent,
+        reason: pressReason
+      });
+      const committed = lastChangedValueRef.current ?? valueRef.current;
+      if (committed !== prev) {
+        onValueCommitted(committed, (0, _createBaseUIEventDetails.createGenericEventDetails)(pressReason, event.nativeEvent));
+      }
+    },
+    onPointerDown(event) {
+      if (event.defaultPrevented || readOnly || event.button || disabled) {
+        return;
+      }
+
+      // Sync dirty input value before starting the hold sequence.
+      commitValue(event.nativeEvent);
+      // Treat `lastChangedValueRef` as a per-hold result slot. If the first tick is a no-op or is
+      // canceled, `onStop` should fall back to the current value, not a previous interaction.
+      lastChangedValueRef.current = null;
+      if (!(0, _usePressAndHold.isTouchLikePointerType)(event.pointerType)) {
+        // Focus the input so the user can continue with keyboard interactions.
+        inputRef.current?.focus();
+      }
+      pointerHandlers.onPointerDown(event);
+    }
+  };
   const {
     getButtonProps,
     buttonRef

package/number-field/root/useNumberFieldStepperButton.mjs

@@ -2,9 +2,16 @@
 
 import { useRenderElement } from "../../internals/useRenderElement.mjs";
 import { useButton } from "../../internals/use-button/index.mjs";
+import { isTouchLikePointerType, usePressAndHold } from "../../internals/usePressAndHold.mjs";
+import { parseNumber } from "../utils/parse.mjs";
+import { createChangeEventDetails, createGenericEventDetails } from "../../internals/createBaseUIEventDetails.mjs";
+import { REASONS } from "../../internals/reasons.mjs";
 import { useNumberFieldRootContext } from "./NumberFieldRootContext.mjs";
-import { useNumberFieldButton } from "./useNumberFieldButton.mjs";
 import { stateAttributesMapping } from "../utils/stateAttributesMapping.mjs";
+const SELECT_NONE_STYLE = {
+  WebkitUserSelect: 'none',
+  userSelect: 'none'
+};
 /**
  * Shared implementation for the increment and decrement stepper buttons. They differ only in the
  * direction they step and the boundary (`max` vs `min`) at which they become disabled.
@@ -20,43 +27,123 @@ export function useNumberFieldStepperButton(componentProps, forwardedRef, isIncr
   } = componentProps;
   const {
     allowInputSyncRef,
-    disabled: contextDisabled,
     formatOptionsRef,
     getStepAmount,
     id,
     incrementValue,
     inputRef,
-    inputValue,
     maxWithDefault,
     minWithDefault,
-    readOnly,
     setValue,
     state,
-    value,
     valueRef,
     locale,
     lastChangedValueRef,
     onValueCommitted
   } = useNumberFieldRootContext();
+  const {
+    disabled: contextDisabled,
+    readOnly,
+    value,
+    inputValue
+  } = state;
   const isAtBoundary = value != null && (isIncrement ? value >= maxWithDefault : value <= minWithDefault);
   const disabled = disabledProp || contextDisabled || isAtBoundary;
-  const props = useNumberFieldButton({
-    isIncrement,
-    inputRef,
-    inputValue,
-    disabled,
-    readOnly,
-    id,
-    setValue,
-    getStepAmount,
-    incrementValue,
-    allowInputSyncRef,
-    formatOptionsRef,
-    valueRef,
-    locale,
-    lastChangedValueRef,
-    onValueCommitted
+  const pressReason = isIncrement ? REASONS.incrementPress : REASONS.decrementPress;
+  function commitValue(nativeEvent) {
+    const shouldCommitInputValue = !allowInputSyncRef.current;
+    allowInputSyncRef.current = true;
+    if (!shouldCommitInputValue) {
+      // The input is already synced, so step from the authoritative numeric value rather than
+      // re-parsing the rounded display text. Refresh the commit ref to the current value so a
+      // subsequent canceled step can't commit a stale `lastChangedValueRef` left over from an
+      // earlier change (the `setValue` that used to refresh it is now skipped on this path).
+      lastChangedValueRef.current = valueRef.current;
+      return;
+    }
+
+    // The input is dirty but not yet blurred, so the value won't have been committed.
+    const parsedValue = parseNumber(inputValue, locale, formatOptionsRef.current);
+    if (parsedValue !== null) {
+      // Sync the dirty typed value with no direction so it isn't directionally snapped
+      // (`snapOnStep`) before the real increment/decrement runs, which would otherwise emit a
+      // spurious intermediate value.
+      const details = createChangeEventDetails(pressReason, nativeEvent);
+      setValue(parsedValue, details);
+
+      // Only sync the ref base when the commit wasn't canceled, so a subsequent increment in the
+      // same interaction steps from the value actually applied.
+      if (!details.isCanceled) {
+        valueRef.current = parsedValue;
+      }
+    }
+  }
+  const {
+    pointerHandlers,
+    shouldSkipClick
+  } = usePressAndHold({
+    disabled: disabled || readOnly,
+    elementRef: inputRef,
+    tick(triggerEvent) {
+      const amount = getStepAmount(triggerEvent);
+      return incrementValue(amount, {
+        direction: isIncrement ? 1 : -1,
+        event: triggerEvent,
+        reason: pressReason
+      });
+    },
+    onStop(nativeEvent) {
+      // `onStop` fires on every release; fall back to the current value when no tick changed it.
+      // Step interactions never commit `null`, so the `??` can't mask a legitimate null commit.
+      const committed = lastChangedValueRef.current ?? valueRef.current;
+      onValueCommitted(committed, createGenericEventDetails(pressReason, nativeEvent));
+    }
   });
+  const props = {
+    disabled,
+    'aria-label': isIncrement ? 'Increase' : 'Decrease',
+    'aria-controls': id,
+    // Keyboard users shouldn't have access to the buttons, since they can use the input element
+    // to change the value. On the other hand, `aria-hidden` is not applied because touch screen
+    // readers should be able to use the buttons.
+    tabIndex: -1,
+    style: SELECT_NONE_STYLE,
+    ...pointerHandlers,
+    onClick(event) {
+      const isDisabled = disabled || readOnly;
+      if (event.defaultPrevented || isDisabled || shouldSkipClick(event)) {
+        return;
+      }
+      commitValue(event.nativeEvent);
+      const amount = getStepAmount(event);
+      const prev = valueRef.current;
+      incrementValue(amount, {
+        direction: isIncrement ? 1 : -1,
+        event: event.nativeEvent,
+        reason: pressReason
+      });
+      const committed = lastChangedValueRef.current ?? valueRef.current;
+      if (committed !== prev) {
+        onValueCommitted(committed, createGenericEventDetails(pressReason, event.nativeEvent));
+      }
+    },
+    onPointerDown(event) {
+      if (event.defaultPrevented || readOnly || event.button || disabled) {
+        return;
+      }
+
+      // Sync dirty input value before starting the hold sequence.
+      commitValue(event.nativeEvent);
+      // Treat `lastChangedValueRef` as a per-hold result slot. If the first tick is a no-op or is
+      // canceled, `onStop` should fall back to the current value, not a previous interaction.
+      lastChangedValueRef.current = null;
+      if (!isTouchLikePointerType(event.pointerType)) {
+        // Focus the input so the user can continue with keyboard interactions.
+        inputRef.current?.focus();
+      }
+      pointerHandlers.onPointerDown(event);
+    }
+  };
   const {
     getButtonProps,
     buttonRef

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

@@ -19,7 +19,6 @@ var _stateAttributesMapping = require("../utils/stateAttributesMapping");
 var _NumberFieldScrubAreaContext = require("./NumberFieldScrubAreaContext");
 var _useRenderElement = require("../../internals/useRenderElement");
 var _getViewportRect = require("../utils/getViewportRect");
-var _subscribeToVisualViewportResize = require("../utils/subscribeToVisualViewportResize");
 var _createBaseUIEventDetails = require("../../internals/createBaseUIEventDetails");
 var _reasons = require("../../internals/reasons");
 var _utils = require("../../floating-ui-react/utils");
@@ -49,8 +48,6 @@ const NumberFieldScrubArea = exports.NumberFieldScrubArea = /*#__PURE__*/React.f
   const {
     state,
     setIsScrubbing: setRootScrubbing,
-    disabled,
-    readOnly,
     inputRef,
     incrementValue,
     allowInputSyncRef,
@@ -59,6 +56,10 @@ const NumberFieldScrubArea = exports.NumberFieldScrubArea = /*#__PURE__*/React.f
     lastChangedValueRef,
     valueRef
   } = (0, _NumberFieldRootContext.useNumberFieldRootContext)();
+  const {
+    disabled,
+    readOnly
+  } = state;
   const scrubAreaRef = React.useRef(null);
   const isScrubbingRef = React.useRef(false);
   const didMoveRef = React.useRef(false);
@@ -68,21 +69,15 @@ const NumberFieldScrubArea = exports.NumberFieldScrubArea = /*#__PURE__*/React.f
     x: 0,
     y: 0
   });
-  const visualScaleRef = React.useRef(1);
   const exitPointerLockTimeout = (0, _useTimeout.useTimeout)();
   const [isTouchInput, setIsTouchInput] = React.useState(false);
   const [isPointerLockDenied, setIsPointerLockDenied] = React.useState(false);
   const [isScrubbing, setIsScrubbing] = React.useState(false);
-  React.useEffect(() => {
-    if (!isScrubbing || !scrubAreaCursorRef.current) {
-      return undefined;
-    }
-    return (0, _subscribeToVisualViewportResize.subscribeToVisualViewportResize)(scrubAreaCursorRef.current, visualScaleRef);
-  }, [isScrubbing]);
-  function updateCursorTransform(x, y) {
-    if (scrubAreaCursorRef.current) {
-      scrubAreaCursorRef.current.style.transform = `translate3d(${x}px,${y}px,0) scale(${1 / visualScaleRef.current})`;
-    }
+  function updateCursorTransform(virtualCursor, x, y) {
+    // Invert the visual viewport scale so the cursor matches the OS cursor, which doesn't
+    // scale with the content on pinch-zoom.
+    const scale = (0, _owner.ownerWindow)(virtualCursor).visualViewport?.scale ?? 1;
+    virtualCursor.style.transform = `translate3d(${x}px,${y}px,0) scale(${1 / scale})`;
   }
   const onScrub = (0, _useStableCallback.useStableCallback)(({
     movementX,
@@ -95,24 +90,23 @@ const NumberFieldScrubArea = exports.NumberFieldScrubArea = /*#__PURE__*/React.f
     }
     const rect = (0, _getViewportRect.getViewportRect)(teleportDistance, scrubAreaEl);
     const coords = virtualCursorCoords.current;
+
+    // Wrap the cursor to the opposite edge when its center crosses a viewport bound.
+    const wrap = (coord, halfSize, low, high) => {
+      if (coord + halfSize < low) {
+        return high - halfSize;
+      }
+      if (coord + halfSize > high) {
+        return low - halfSize;
+      }
+      return coord;
+    };
     const newCoords = {
-      x: Math.round(coords.x + movementX),
-      y: Math.round(coords.y + movementY)
+      x: wrap(Math.round(coords.x + movementX), virtualCursor.offsetWidth / 2, rect.left, rect.right),
+      y: wrap(Math.round(coords.y + movementY), virtualCursor.offsetHeight / 2, rect.top, rect.bottom)
     };
-    const cursorWidth = virtualCursor.offsetWidth;
-    const cursorHeight = virtualCursor.offsetHeight;
-    if (newCoords.x + cursorWidth / 2 < rect.left) {
-      newCoords.x = rect.right - cursorWidth / 2;
-    } else if (newCoords.x + cursorWidth / 2 > rect.right) {
-      newCoords.x = rect.left - cursorWidth / 2;
-    }
-    if (newCoords.y + cursorHeight / 2 < rect.top) {
-      newCoords.y = rect.bottom - cursorHeight / 2;
-    } else if (newCoords.y + cursorHeight / 2 > rect.bottom) {
-      newCoords.y = rect.top - cursorHeight / 2;
-    }
     virtualCursorCoords.current = newCoords;
-    updateCursorTransform(newCoords.x, newCoords.y);
+    updateCursorTransform(virtualCursor, newCoords.x, newCoords.y);
   });
   const onScrubbingChange = (0, _useStableCallback.useStableCallback)((scrubbingValue, {
     clientX,
@@ -131,7 +125,7 @@ const NumberFieldScrubArea = exports.NumberFieldScrubArea = /*#__PURE__*/React.f
       y: clientY - virtualCursor.offsetHeight / 2
     };
     virtualCursorCoords.current = initialCoords;
-    updateCursorTransform(initialCoords.x, initialCoords.y);
+    updateCursorTransform(virtualCursor, initialCoords.x, initialCoords.y);
   });
   React.useEffect(function registerGlobalScrubbingEventListeners() {
     // Only listen while actively scrubbing; avoids unrelated pointerup events committing.
@@ -173,6 +167,9 @@ const NumberFieldScrubArea = exports.NumberFieldScrubArea = /*#__PURE__*/React.f
       }
     }
     function handleScrubPointerMove(event) {
+      // The effects below can tear down and re-run without unmounting (`<Activity>`), which
+      // clears the ref while `isScrubbing` stays `true` and re-attaches this listener. The ref
+      // is the source of truth for whether a pointer is actually down.
       if (!isScrubbingRef.current) {
         return;
       }
@@ -240,8 +237,7 @@ const NumberFieldScrubArea = exports.NumberFieldScrubArea = /*#__PURE__*/React.f
     role: 'presentation',
     style: SCRUB_AREA_STYLE,
     async onPointerDown(event) {
-      const isMainButton = !event.button || event.button === 0;
-      if (event.defaultPrevented || readOnly || !isMainButton || disabled) {
+      if (event.defaultPrevented || readOnly || event.button || disabled) {
         return;
       }
       const isTouch = event.pointerType === 'touch';

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

@@ -13,7 +13,6 @@ import { stateAttributesMapping } from "../utils/stateAttributesMapping.mjs";
 import { NumberFieldScrubAreaContext } from "./NumberFieldScrubAreaContext.mjs";
 import { useRenderElement } from "../../internals/useRenderElement.mjs";
 import { getViewportRect } from "../utils/getViewportRect.mjs";
-import { subscribeToVisualViewportResize } from "../utils/subscribeToVisualViewportResize.mjs";
 import { createGenericEventDetails } from "../../internals/createBaseUIEventDetails.mjs";
 import { REASONS } from "../../internals/reasons.mjs";
 import { getTarget } from "../../floating-ui-react/utils.mjs";
@@ -43,8 +42,6 @@ export const NumberFieldScrubArea = /*#__PURE__*/React.forwardRef(function Numbe
   const {
     state,
     setIsScrubbing: setRootScrubbing,
-    disabled,
-    readOnly,
     inputRef,
     incrementValue,
     allowInputSyncRef,
@@ -53,6 +50,10 @@ export const NumberFieldScrubArea = /*#__PURE__*/React.forwardRef(function Numbe
     lastChangedValueRef,
     valueRef
   } = useNumberFieldRootContext();
+  const {
+    disabled,
+    readOnly
+  } = state;
   const scrubAreaRef = React.useRef(null);
   const isScrubbingRef = React.useRef(false);
   const didMoveRef = React.useRef(false);
@@ -62,21 +63,15 @@ export const NumberFieldScrubArea = /*#__PURE__*/React.forwardRef(function Numbe
     x: 0,
     y: 0
   });
-  const visualScaleRef = React.useRef(1);
   const exitPointerLockTimeout = useTimeout();
   const [isTouchInput, setIsTouchInput] = React.useState(false);
   const [isPointerLockDenied, setIsPointerLockDenied] = React.useState(false);
   const [isScrubbing, setIsScrubbing] = React.useState(false);
-  React.useEffect(() => {
-    if (!isScrubbing || !scrubAreaCursorRef.current) {
-      return undefined;
-    }
-    return subscribeToVisualViewportResize(scrubAreaCursorRef.current, visualScaleRef);
-  }, [isScrubbing]);
-  function updateCursorTransform(x, y) {
-    if (scrubAreaCursorRef.current) {
-      scrubAreaCursorRef.current.style.transform = `translate3d(${x}px,${y}px,0) scale(${1 / visualScaleRef.current})`;
-    }
+  function updateCursorTransform(virtualCursor, x, y) {
+    // Invert the visual viewport scale so the cursor matches the OS cursor, which doesn't
+    // scale with the content on pinch-zoom.
+    const scale = ownerWindow(virtualCursor).visualViewport?.scale ?? 1;
+    virtualCursor.style.transform = `translate3d(${x}px,${y}px,0) scale(${1 / scale})`;
   }
   const onScrub = useStableCallback(({
     movementX,
@@ -89,24 +84,23 @@ export const NumberFieldScrubArea = /*#__PURE__*/React.forwardRef(function Numbe
     }
     const rect = getViewportRect(teleportDistance, scrubAreaEl);
     const coords = virtualCursorCoords.current;
+
+    // Wrap the cursor to the opposite edge when its center crosses a viewport bound.
+    const wrap = (coord, halfSize, low, high) => {
+      if (coord + halfSize < low) {
+        return high - halfSize;
+      }
+      if (coord + halfSize > high) {
+        return low - halfSize;
+      }
+      return coord;
+    };
     const newCoords = {
-      x: Math.round(coords.x + movementX),
-      y: Math.round(coords.y + movementY)
+      x: wrap(Math.round(coords.x + movementX), virtualCursor.offsetWidth / 2, rect.left, rect.right),
+      y: wrap(Math.round(coords.y + movementY), virtualCursor.offsetHeight / 2, rect.top, rect.bottom)
     };
-    const cursorWidth = virtualCursor.offsetWidth;
-    const cursorHeight = virtualCursor.offsetHeight;
-    if (newCoords.x + cursorWidth / 2 < rect.left) {
-      newCoords.x = rect.right - cursorWidth / 2;
-    } else if (newCoords.x + cursorWidth / 2 > rect.right) {
-      newCoords.x = rect.left - cursorWidth / 2;
-    }
-    if (newCoords.y + cursorHeight / 2 < rect.top) {
-      newCoords.y = rect.bottom - cursorHeight / 2;
-    } else if (newCoords.y + cursorHeight / 2 > rect.bottom) {
-      newCoords.y = rect.top - cursorHeight / 2;
-    }
     virtualCursorCoords.current = newCoords;
-    updateCursorTransform(newCoords.x, newCoords.y);
+    updateCursorTransform(virtualCursor, newCoords.x, newCoords.y);
   });
   const onScrubbingChange = useStableCallback((scrubbingValue, {
     clientX,
@@ -125,7 +119,7 @@ export const NumberFieldScrubArea = /*#__PURE__*/React.forwardRef(function Numbe
       y: clientY - virtualCursor.offsetHeight / 2
     };
     virtualCursorCoords.current = initialCoords;
-    updateCursorTransform(initialCoords.x, initialCoords.y);
+    updateCursorTransform(virtualCursor, initialCoords.x, initialCoords.y);
   });
   React.useEffect(function registerGlobalScrubbingEventListeners() {
     // Only listen while actively scrubbing; avoids unrelated pointerup events committing.
@@ -167,6 +161,9 @@ export const NumberFieldScrubArea = /*#__PURE__*/React.forwardRef(function Numbe
       }
     }
     function handleScrubPointerMove(event) {
+      // The effects below can tear down and re-run without unmounting (`<Activity>`), which
+      // clears the ref while `isScrubbing` stays `true` and re-attaches this listener. The ref
+      // is the source of truth for whether a pointer is actually down.
       if (!isScrubbingRef.current) {
         return;
       }
@@ -234,8 +231,7 @@ export const NumberFieldScrubArea = /*#__PURE__*/React.forwardRef(function Numbe
     role: 'presentation',
     style: SCRUB_AREA_STYLE,
     async onPointerDown(event) {
-      const isMainButton = !event.button || event.button === 0;
-      if (event.defaultPrevented || readOnly || !isMainButton || disabled) {
+      if (event.defaultPrevented || readOnly || event.button || disabled) {
         return;
       }
       const isTouch = event.pointerType === 'touch';

package/number-field/utils/constants.d.mts

@@ -1,3 +1,2 @@
 export declare const CHANGE_VALUE_TICK_DELAY = 60;
-export declare const START_AUTO_CHANGE_DELAY = 400;
-export declare const SCROLLING_POINTER_MOVE_DISTANCE = 8;
+export declare const START_AUTO_CHANGE_DELAY = 400;

package/number-field/utils/constants.d.ts

@@ -1,3 +1,2 @@
 export declare const CHANGE_VALUE_TICK_DELAY = 60;
-export declare const START_AUTO_CHANGE_DELAY = 400;
-export declare const SCROLLING_POINTER_MOVE_DISTANCE = 8;
+export declare const START_AUTO_CHANGE_DELAY = 400;

package/number-field/utils/constants.js

@@ -3,7 +3,6 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.START_AUTO_CHANGE_DELAY = exports.SCROLLING_POINTER_MOVE_DISTANCE = exports.CHANGE_VALUE_TICK_DELAY = void 0;
+exports.START_AUTO_CHANGE_DELAY = exports.CHANGE_VALUE_TICK_DELAY = void 0;
 const CHANGE_VALUE_TICK_DELAY = exports.CHANGE_VALUE_TICK_DELAY = 60;
-const START_AUTO_CHANGE_DELAY = exports.START_AUTO_CHANGE_DELAY = 400;
-const SCROLLING_POINTER_MOVE_DISTANCE = exports.SCROLLING_POINTER_MOVE_DISTANCE = 8;
+const START_AUTO_CHANGE_DELAY = exports.START_AUTO_CHANGE_DELAY = 400;

package/number-field/utils/constants.mjs

@@ -1,3 +1,2 @@
 export const CHANGE_VALUE_TICK_DELAY = 60;
-export const START_AUTO_CHANGE_DELAY = 400;
-export const SCROLLING_POINTER_MOVE_DISTANCE = 8;
+export const START_AUTO_CHANGE_DELAY = 400;

package/number-field/utils/parse.d.mts

@@ -1,32 +1,44 @@
-export declare const HAN_NUMERALS: string[];
-export declare const HAN_NUMERAL_TO_DIGIT: Record<string, string>;
-export declare const ARABIC_NUMERALS: string[];
-export declare const PERSIAN_NUMERALS: string[];
-export declare const FULLWIDTH_NUMERALS: string[];
 export declare const PERCENTAGES: string[];
 export declare const PERMILLE: string[];
-export declare const UNICODE_MINUS_SIGNS: string[];
-export declare const UNICODE_PLUS_SIGNS: string[];
 export declare const FULLWIDTH_DECIMAL = "\uFF0E";
 export declare const FULLWIDTH_GROUP = "\uFF0C";
-export declare const ARABIC_RE: RegExp;
-export declare const PERSIAN_RE: RegExp;
-export declare const FULLWIDTH_RE: RegExp;
-export declare const HAN_RE: RegExp;
 export declare const PERCENT_RE: RegExp;
 export declare const PERMILLE_RE: RegExp;
-export declare const ARABIC_DETECT_RE: RegExp;
-export declare const PERSIAN_DETECT_RE: RegExp;
+export declare const ARABIC_PERSIAN_DETECT_RE: RegExp;
 export declare const HAN_DETECT_RE: RegExp;
-export declare const FULLWIDTH_DETECT_RE: RegExp;
 export declare function isNumeralChar(char: string): boolean;
 export declare const BASE_NON_NUMERIC_SYMBOLS: readonly ['.', ',', "．", "，", '٫', '٬'];
 export declare const SPACE_SEPARATOR_RE: RegExp;
+export declare const FORMAT_CONTROL_DETECT_RE: RegExp;
 export declare const PLUS_SIGNS_WITH_ASCII: string[];
 export declare const MINUS_SIGNS_WITH_ASCII: string[];
 export declare const ANY_MINUS_RE: RegExp;
 export declare const ANY_PLUS_RE: RegExp;
 export declare const ANY_MINUS_DETECT_RE: RegExp;
 export declare const ANY_PLUS_DETECT_RE: RegExp;
-export declare function getNumberLocaleDetails(locale?: Intl.LocalesArgument, options?: Intl.NumberFormatOptions): Partial<Record<keyof Intl.NumberFormatPartTypeRegistry, string | undefined>>;
+/**
+ * Returns the `Intl.NumberFormat` parts of a representative number, which surface every
+ * non-numeric symbol a given locale/format renders.
+ */
+export declare function getFormatParts(locale?: Intl.LocalesArgument, options?: Intl.NumberFormatOptions): Intl.NumberFormatPart[];
+export declare function getNumberLocaleDetails(locale?: Intl.LocalesArgument, options?: Intl.NumberFormatOptions): {
+  decimal: string;
+  compact?: string | undefined;
+  currency?: string | undefined;
+  exponentInteger?: string | undefined;
+  exponentMinusSign?: string | undefined;
+  exponentSeparator?: string | undefined;
+  fraction?: string | undefined;
+  group?: string | undefined;
+  infinity?: string | undefined;
+  integer?: string | undefined;
+  literal?: string | undefined;
+  minusSign?: string | undefined;
+  nan?: string | undefined;
+  percent?: string | undefined;
+  percentSign?: string | undefined;
+  plusSign?: string | undefined;
+  unit?: string | undefined;
+  unknown?: string | undefined;
+};
 export declare function parseNumber(formattedNumber: string, locale?: Intl.LocalesArgument, options?: Intl.NumberFormatOptions): number | null;