@jobber/components 9.6.1 → 9.6.2

package/dist/NumberFieldInput-es.js

@@ -1,8 +1,9 @@
 import * as React from 'react';
-import { v as useControlled, w as useValueAsRef, c as useIsoLayoutEffect, d as useStableCallback, x as ios, y as addEventListener, h as createChangeEventDetails, z as none, B as visuallyHiddenInput, C as visuallyHidden, D as activeElement, o as ownerDocument, E as wheel, G as createGenericEventDetails, H as useOnMount, T as Timeout, q as useTimeout, I as getWindow, f as useButton, J as incrementPress, K as decrementPress, L as useValueChanged, M as inputClear, N as inputBlur, O as inputChange, P as keyboard, S as SafeReact, Q as inputPaste } from './useScrollLock-es.js';
+import { n as useControlled, q as useValueAsRef, a as useIsoLayoutEffect, b as useStableCallback, r as ios, s as addEventListener, d as createChangeEventDetails, v as none, w as visuallyHiddenInput, x as visuallyHidden, y as inputChange, z as inputClear, A as inputBlur, B as inputPaste, D as activeElement, o as ownerDocument, E as createGenericEventDetails, G as wheel, H as useOnMount, T as Timeout, k as useTimeout, I as incrementPress, J as decrementPress, c as useButton, K as useValueChanged, L as stopEvent, M as keyboard, S as SafeReact } from './useScrollLock-es.js';
 import { f as formatErrorMessage, b as useMergedRefs, u as useRenderElement, a as useRefWithInit, N as NOOP, w as warn } from './useRenderElement-es.js';
 import { f as fieldValidityMapping, b as useFieldRootContext, a as useFormContext, c as useLabelableId, u as useLabelableContext, d as useRegisterFieldControl } from './useCompositeListItem-es.js';
 import { jsxs, jsx } from 'react/jsx-runtime';
+import { K as getWindow } from './floating-ui.utils-es.js';
 import { s as stringifyLocale } from './stringifyLocale-es.js';
 import { c as clamp } from './scrollEdges-es.js';
 
@@ -53,112 +54,121 @@ const stateAttributesMapping = {
   ...fieldValidityMapping
 };
 
-// Han numerals in digit order, with both zero forms first ('零' at 0, '〇' at 1), so a
-// character's digit value is `max(indexOf - 1, 0)`.
-const HAN_NUMERALS = '零〇一二三四五六七八九';
-
-// Arabic-Indic (U+0660–0669), Persian (U+06F0–06F9), and fullwidth (U+FF10–FF19) digits are
-// contiguous ranges whose bases are divisible by 16, so `charCode % 16` is the digit value for
-// all three systems.
-const NON_ASCII_DIGIT_RE = /[٠-٩۰-۹０-９]/g;
-const HAN_RE = /[零〇一二三四五六七八九]/g;
+const HAN_NUMERALS = ['零', '〇', '一', '二', '三', '四', '五', '六', '七', '八', '九'];
+// Map Han numeral characters to ASCII digits. Includes both forms of zero.
+const HAN_NUMERAL_TO_DIGIT = {
+  零: '0',
+  〇: '0',
+  一: '1',
+  二: '2',
+  三: '3',
+  四: '4',
+  五: '5',
+  六: '6',
+  七: '7',
+  八: '8',
+  九: '9'
+};
+const ARABIC_NUMERALS = ['٠', '١', '٢', '٣', '٤', '٥', '٦', '٧', '٨', '٩'];
+const PERSIAN_NUMERALS = ['۰', '۱', '۲', '۳', '۴', '۵', '۶', '۷', '۸', '۹'];
+const FULLWIDTH_NUMERALS = ['０', '１', '２', '３', '４', '５', '６', '７', '８', '９'];
 const PERCENTAGES = ['%', '٪', '％', '﹪'];
 const PERMILLE = ['‰', '؉'];
+const UNICODE_MINUS_SIGNS = ['−', '－', '‒', '–', '—', '﹣'];
+const UNICODE_PLUS_SIGNS = ['＋', '﹢'];
 
 // Fullwidth punctuation common in CJK inputs
 const FULLWIDTH_DECIMAL = '．'; // U+FF0E
 const FULLWIDTH_GROUP = '，'; // U+FF0C
 
-const PERCENT_RE = /[%٪％﹪]/;
-const PERMILLE_RE = /[‰؉]/;
-const PERCENT_GLOBAL_RE = /[%٪％﹪]/g;
-const PERMILLE_GLOBAL_RE = /[‰؉]/g;
-
-// Detection regexes (non-global to avoid lastIndex side effects). Arabic-Indic and Persian
-// digits share one regex because both resolve to the `ar` locale heuristic.
-const ARABIC_PERSIAN_DETECT_RE = /[٠-٩۰-۹]/;
-const HAN_DETECT_RE = /[零〇一二三四五六七八九]/;
-const ANY_NUMERAL_DETECT_RE = /[0-9٠-٩۰-۹０-９零〇一二三四五六七八九]/;
+const ARABIC_RE = new RegExp(`[${ARABIC_NUMERALS.join('')}]`, 'g');
+const PERSIAN_RE = new RegExp(`[${PERSIAN_NUMERALS.join('')}]`, 'g');
+const FULLWIDTH_RE = new RegExp(`[${FULLWIDTH_NUMERALS.join('')}]`, 'g');
+const HAN_RE = new RegExp(`[${HAN_NUMERALS.join('')}]`, 'g');
+const PERCENT_RE = new RegExp(`[${PERCENTAGES.join('')}]`);
+const PERMILLE_RE = new RegExp(`[${PERMILLE.join('')}]`);
+const PERCENT_GLOBAL_RE = new RegExp(PERCENT_RE.source, 'g');
+const PERMILLE_GLOBAL_RE = new RegExp(PERMILLE_RE.source, 'g');
+
+// Detection regexes (non-global to avoid lastIndex side effects), derived from the numeral arrays
+// so they can't drift out of sync.
+const ARABIC_DETECT_RE = new RegExp(`[${ARABIC_NUMERALS.join('')}]`);
+const PERSIAN_DETECT_RE = new RegExp(`[${PERSIAN_NUMERALS.join('')}]`);
+const HAN_DETECT_RE = new RegExp(`[${HAN_NUMERALS.join('')}]`);
+const FULLWIDTH_DETECT_RE = new RegExp(`[${FULLWIDTH_NUMERALS.join('')}]`);
 
 // Whether the character is a digit in any numeral system the field accepts.
 function isNumeralChar(char) {
-  return ANY_NUMERAL_DETECT_RE.test(char);
+  return char >= '0' && char <= '9' || ARABIC_DETECT_RE.test(char) || PERSIAN_DETECT_RE.test(char) || HAN_DETECT_RE.test(char) || FULLWIDTH_DETECT_RE.test(char);
 }
 const BASE_NON_NUMERIC_SYMBOLS = ['.', ',', FULLWIDTH_DECIMAL, FULLWIDTH_GROUP, '٫', '٬'];
 const SPACE_SEPARATOR_RE = /\p{Zs}/u;
-// Format/bidi control characters (e.g. the LRM/ALM marks RTL locales insert around exponent and
-// currency signs). `parseNumber` strips these, so input validation must treat them as ignorable
-// rather than rejecting the typed string. Non-global so it's safe for repeated `.test(char)`.
-const FORMAT_CONTROL_DETECT_RE = /\p{Cf}/u;
-const FORMAT_CONTROL_GLOBAL_RE = /\p{Cf}/gu;
-const PLUS_SIGNS_WITH_ASCII = ['+', '＋', '﹢'];
-const MINUS_SIGNS_WITH_ASCII = ['-', '−', '－', '‒', '–', '—', '﹣'];
+const PLUS_SIGNS_WITH_ASCII = ['+', ...UNICODE_PLUS_SIGNS];
+const MINUS_SIGNS_WITH_ASCII = ['-', ...UNICODE_MINUS_SIGNS];
 const escapeRegExp = s => s.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+const escapeClassChar = s => s.replace(/[-\\\]^]/g, m => `\\${m}`); // escape for use inside [...]
+
 function shiftDecimal(value, exponentDelta) {
   const [coefficient, exponent = '0'] = String(value).split('e');
   return Number(`${coefficient}e${Number(exponent) + exponentDelta}`);
 }
-const ANY_MINUS_RE = /[-−－‒–—﹣]/gu;
-const ANY_PLUS_RE = /[+＋﹢]/gu;
-const ANY_MINUS_DETECT_RE = /[-−－‒–—﹣]/;
-const ANY_PLUS_DETECT_RE = /[+＋﹢]/;
-
-// A representative value with a grouping separator and a fractional part, so that the formatter
-// emits every locale-specific part (group, decimal, currency, unit, literal, exponent, …). Shared
-// so the locale-detail and allowed-character derivations enumerate the same parts.
-const SAMPLE_FORMAT_NUMBER = 11111.1;
-
-/**
- * Returns the `Intl.NumberFormat` parts of a representative number, which surface every
- * non-numeric symbol a given locale/format renders.
- */
-function getFormatParts(locale, options) {
-  return getFormatter(locale, options).formatToParts(SAMPLE_FORMAT_NUMBER);
-}
+const charClassFrom = chars => `[${chars.map(escapeClassChar).join('')}]`;
+const ANY_MINUS_CLASS = charClassFrom(['-'].concat(UNICODE_MINUS_SIGNS));
+const ANY_PLUS_CLASS = charClassFrom(['+'].concat(UNICODE_PLUS_SIGNS));
+const ANY_MINUS_RE = new RegExp(ANY_MINUS_CLASS, 'gu');
+const ANY_PLUS_RE = new RegExp(ANY_PLUS_CLASS, 'gu');
+const ANY_MINUS_DETECT_RE = new RegExp(ANY_MINUS_CLASS);
+const ANY_PLUS_DETECT_RE = new RegExp(ANY_PLUS_CLASS);
 function getNumberLocaleDetails(locale, options) {
-  const parts = getFormatParts(locale, options);
+  const parts = getFormatter(locale, options).formatToParts(11111.1);
   const result = {};
   parts.forEach(part => {
     result[part.type] = part.value;
   });
 
   // The formatting options may omit the decimal separator (e.g. integer formats), so resolve it
-  // from the plain locale formatter, which renders one for every locale and numbering system. This
-  // overrides any options-derived decimal too, which is safe because the separator is
-  // locale-determined and identical across format styles. The ASCII seed is a formality to keep
-  // the separator non-optional for callers; it is always replaced below.
-  let decimal = '.';
+  // from the plain locale formatter. This overrides any options-derived decimal too, which is
+  // safe because the separator is locale-determined and identical across format styles.
   getFormatter(locale).formatToParts(0.1).forEach(part => {
     if (part.type === 'decimal') {
-      decimal = part.value;
+      result[part.type] = part.value;
     }
   });
-  return {
-    ...result,
-    decimal
-  };
+  return result;
 }
 function parseNumber(formattedNumber, locale, options) {
+  if (formattedNumber == null) {
+    return null;
+  }
+
   // Normalize control characters and whitespace; remove bidi/format controls
-  let input = formattedNumber.replace(FORMAT_CONTROL_GLOBAL_RE, '').trim();
+  let input = String(formattedNumber).replace(/\p{Cf}/gu, '').trim();
 
   // Normalize unicode minus/plus to ASCII, handle leading/trailing signs
   input = input.replace(ANY_MINUS_RE, '-').replace(ANY_PLUS_RE, '+');
   let isNegative = false;
 
-  // Strips a matched sign (leading "-12" / trailing "1234-") while recording negativity.
-  const takeSign = (match, sign) => {
-    if (sign === '-') {
+  // Trailing sign, e.g. "1234-" / "1234+"
+  const trailing = input.match(/([+-])\s*$/);
+  if (trailing) {
+    if (trailing[1] === '-') {
       isNegative = true;
     }
-    return '';
-  };
-  input = input.replace(/([+-])\s*$/, takeSign).replace(/^\s*([+-])/, takeSign);
+    input = input.replace(/([+-])\s*$/, '');
+  }
+  // Leading sign
+  const leading = input.match(/^\s*([+-])/);
+  if (leading) {
+    if (leading[1] === '-') {
+      isNegative = true;
+    }
+    input = input.replace(/^\s*[+-]/, '');
+  }
 
   // Heuristic locale detection
   let computedLocale = locale;
   if (computedLocale === undefined) {
-    if (ARABIC_PERSIAN_DETECT_RE.test(input)) {
+    if (ARABIC_DETECT_RE.test(input) || PERSIAN_DETECT_RE.test(input)) {
       computedLocale = 'ar';
     } else if (HAN_DETECT_RE.test(input)) {
       computedLocale = 'zh';
@@ -190,17 +200,70 @@ function parseNumber(formattedNumber, locale, options) {
       groupRegex = new RegExp(escapeRegExp(group), 'g');
     }
   }
-  const replacements = [[groupRegex, ''], [new RegExp(escapeRegExp(decimal), 'g'), '.'],
-  // Fullwidth/Arabic punctuation
-  [/[．٫]/g, '.'],
-  // FULLWIDTH_DECIMAL, ARABIC DECIMAL SEPARATOR (U+066B)
-  [/[，٬]/g, ''],
-  // FULLWIDTH_GROUP, ARABIC THOUSANDS SEPARATOR (U+066C)
+  const replacements = [{
+    regex: groupRegex,
+    replacement: ''
+  }, {
+    regex: decimal ? new RegExp(escapeRegExp(decimal), 'g') : null,
+    replacement: '.'
+  },
+  // Fullwidth punctuation
+  {
+    regex: /．/g,
+    replacement: '.'
+  },
+  // FULLWIDTH_DECIMAL
+  {
+    regex: /，/g,
+    replacement: ''
+  },
+  // FULLWIDTH_GROUP
+  // Arabic punctuation
+  {
+    regex: /٫/g,
+    replacement: '.'
+  },
+  // ARABIC DECIMAL SEPARATOR (U+066B)
+  {
+    regex: /٬/g,
+    replacement: ''
+  },
+  // ARABIC THOUSANDS SEPARATOR (U+066C)
   // Currency & unit labels
-  [currency ? new RegExp(escapeRegExp(currency), 'g') : null, ''], [unitRegex, ''], [PERCENT_GLOBAL_RE, ''], [PERMILLE_GLOBAL_RE, ''], [exponentSeparator ? new RegExp(escapeRegExp(exponentSeparator), 'g') : null, 'e'],
+  {
+    regex: currency ? new RegExp(escapeRegExp(currency), 'g') : null,
+    replacement: ''
+  }, {
+    regex: unitRegex,
+    replacement: ''
+  }, {
+    regex: PERCENT_GLOBAL_RE,
+    replacement: ''
+  }, {
+    regex: PERMILLE_GLOBAL_RE,
+    replacement: ''
+  }, {
+    regex: exponentSeparator ? new RegExp(escapeRegExp(exponentSeparator), 'g') : null,
+    replacement: 'e'
+  },
   // Numeral systems to ASCII digits
-  [NON_ASCII_DIGIT_RE, ch => String(ch.charCodeAt(0) % 16)], [HAN_RE, ch => String(Math.max(HAN_NUMERALS.indexOf(ch) - 1, 0))]];
-  let unformatted = replacements.reduce((acc, [regex, replacement]) => {
+  {
+    regex: ARABIC_RE,
+    replacement: ch => String(ARABIC_NUMERALS.indexOf(ch))
+  }, {
+    regex: PERSIAN_RE,
+    replacement: ch => String(PERSIAN_NUMERALS.indexOf(ch))
+  }, {
+    regex: FULLWIDTH_RE,
+    replacement: ch => String(FULLWIDTH_NUMERALS.indexOf(ch))
+  }, {
+    regex: HAN_RE,
+    replacement: ch => HAN_NUMERAL_TO_DIGIT[ch]
+  }];
+  let unformatted = replacements.reduce((acc, {
+    regex,
+    replacement
+  }) => {
     return regex ? acc.replace(regex, replacement) : acc;
   }, input);
 
@@ -278,18 +341,27 @@ function removeFloatingPointErrors(value, format) {
   }
   return formatter.format(roundedValue) === roundedText ? roundedValue : value;
 }
-function snapToStep(value, base, step, nearest) {
+function snapToStep(value, base, step, mode = 'directional') {
   const stepSize = Math.abs(step);
   const direction = Math.sign(step);
   const tolerance = stepSize * STEP_EPSILON_FACTOR * direction;
   const rawSteps = value - base + tolerance;
-  if (nearest) {
+  if (mode === 'nearest') {
     return base + Math.round(rawSteps / step) * step;
   }
   const snappedSteps = direction > 0 ? Math.floor(rawSteps / stepSize) : Math.ceil(rawSteps / stepSize);
   return base + snappedSteps * stepSize;
 }
-function toValidatedNumber(value, step, minWithDefault, maxWithDefault, minWithZeroDefault, format, snapOnStep, small, shouldClamp) {
+function toValidatedNumber(value, {
+  step,
+  minWithDefault,
+  maxWithDefault,
+  minWithZeroDefault,
+  format,
+  snapOnStep,
+  small,
+  clamp: shouldClamp
+}) {
   if (value === null) {
     return value;
   }
@@ -297,9 +369,8 @@ function toValidatedNumber(value, step, minWithDefault, maxWithDefault, minWithZ
   if (step != null && snapOnStep && step !== 0) {
     const base = small || minWithDefault === Number.MIN_SAFE_INTEGER ? minWithZeroDefault : minWithDefault;
 
-    // Snap before clamping so non-step-aligned boundaries stay reachable. Small (alt-key) steps
-    // snap to the nearest multiple; regular steps snap directionally.
-    nextValue = snapToStep(nextValue, base, step, small);
+    // Snap before clamping so non-step-aligned boundaries stay reachable.
+    nextValue = snapToStep(nextValue, base, step, small ? 'nearest' : 'directional');
   }
 
   // Clamp before rounding so a value just outside a fractional boundary (e.g. `0.4` with
@@ -354,6 +425,7 @@ const NumberFieldRoot = /*#__PURE__*/React.forwardRef(function NumberFieldRoot(c
     validityData,
     disabled: fieldDisabled,
     setFilled,
+    invalid,
     name: fieldName,
     state: fieldState,
     validation
@@ -402,46 +474,48 @@ const NumberFieldRoot = /*#__PURE__*/React.forwardRef(function NumberFieldRoot(c
   const [inputValue, setInputValue] = React.useState(() => formatNumber(value, locale, format));
   const [inputMode, setInputMode] = React.useState('numeric');
   const getAllowedNonNumericKeys = useStableCallback(() => {
-    const parts = getFormatParts(locale, format);
-    const keys = new Set(BASE_NON_NUMERIC_SYMBOLS);
-    const addAll = chars => chars.forEach(char => keys.add(char));
-
-    // Integer formats omit the decimal from `parts`, so fall back to the locale's separator in that
-    // case; it must stay typeable regardless of whether the format renders a fraction.
-    const decimal = parts.find(part => part.type === 'decimal')?.value ?? getNumberLocaleDetails(locale, format).decimal;
-    keys.add(decimal);
-
-    // Allow every non-digit character the formatter renders — separators, currency symbols, units
-    // (e.g. `km/h`, `°C`), exponent separators, and locale literals — decomposed per character
-    // because the input validates the typed string one character at a time. Deriving these from
-    // the formatter covers multi-character and locale-specific symbols of every part type
-    // uniformly. `compact` suffixes (e.g. `K`/`M`) are excluded because `parseNumber` can't reverse
-    // them, so allowing them would yield a silently incorrect value.
-    parts.forEach(part => {
-      if (part.type === 'integer' || part.type === 'fraction' || part.type === 'exponentInteger' || part.type === 'compact') {
-        return;
-      }
-      addAll(Array.from(part.value));
-      if (SPACE_SEPARATOR_RE.test(part.value)) {
+    const {
+      decimal,
+      group,
+      currency,
+      literal
+    } = getNumberLocaleDetails(locale, format);
+    const keys = new Set();
+    BASE_NON_NUMERIC_SYMBOLS.forEach(symbol => keys.add(symbol));
+    if (decimal) {
+      keys.add(decimal);
+    }
+    if (group) {
+      keys.add(group);
+      if (SPACE_SEPARATOR_RE.test(group)) {
         keys.add(' ');
       }
-    });
+    }
     const allowPercentSymbols = formatStyle === 'percent' || formatStyle === 'unit' && format?.unit === 'percent';
     const allowPermilleSymbols = formatStyle === 'percent' || formatStyle === 'unit' && format?.unit === 'permille';
-
-    // Tolerate percent/permille variants the formatter doesn't emit but users may type or paste.
     if (allowPercentSymbols) {
-      addAll(PERCENTAGES);
+      PERCENTAGES.forEach(key => keys.add(key));
     }
     if (allowPermilleSymbols) {
-      addAll(PERMILLE);
+      PERMILLE.forEach(key => keys.add(key));
+    }
+    if (formatStyle === 'currency' && currency) {
+      keys.add(currency);
+    }
+    if (literal) {
+      // Some locales (e.g. de-DE) insert a literal space character between the number
+      // and the symbol, so allow those characters to be typed/removed.
+      Array.from(literal).forEach(char => keys.add(char));
+      if (SPACE_SEPARATOR_RE.test(literal)) {
+        keys.add(' ');
+      }
     }
 
     // Allow plus sign in all cases; minus sign when negatives are valid, or when out-of-range
     // entry is allowed so native underflow validation can be triggered from the keyboard.
-    addAll(PLUS_SIGNS_WITH_ASCII);
+    PLUS_SIGNS_WITH_ASCII.forEach(key => keys.add(key));
     if (minWithDefault < 0 || allowOutOfRange) {
-      addAll(MINUS_SIGNS_WITH_ASCII);
+      MINUS_SIGNS_WITH_ASCII.forEach(key => keys.add(key));
     }
     return keys;
   });
@@ -459,13 +533,21 @@ const NumberFieldRoot = /*#__PURE__*/React.forwardRef(function NumberFieldRoot(c
     const dir = details.direction;
 
     // Direct text entry (typing, pasting, clearing, autofill) behaves natively; step-based
-    // interactions (keyboard arrows, buttons, wheel, scrub) do not. All direct-entry reasons
-    // (`input-change`, `input-clear`, `input-blur`, `input-paste`) share the `input-` prefix.
-    const isInputReason = details.reason.startsWith('input-') || details.reason === none;
+    // interactions (keyboard arrows, buttons, wheel, scrub) do not.
+    const isInputReason = details.reason === inputChange || details.reason === inputClear || details.reason === inputBlur || details.reason === inputPaste || details.reason === none;
 
     // Only allow out-of-range values for direct text entry. Step-based interactions still clamp.
     const shouldClampValue = !allowOutOfRange || !isInputReason;
-    const validatedValue = toValidatedNumber(unvalidatedValue, dir ? getStepAmount(eventWithOptionalKeyState) * dir : undefined, minWithDefault, maxWithDefault, minWithZeroDefault, formatOptionsRef.current, snapOnStep, eventWithOptionalKeyState?.altKey ?? false, shouldClampValue);
+    const validatedValue = toValidatedNumber(unvalidatedValue, {
+      step: dir ? getStepAmount(eventWithOptionalKeyState) * dir : undefined,
+      format: formatOptionsRef.current,
+      minWithDefault,
+      maxWithDefault,
+      minWithZeroDefault,
+      snapOnStep,
+      small: eventWithOptionalKeyState?.altKey ?? false,
+      clamp: shouldClampValue
+    });
 
     // Notify about a change even when the numeric value is unchanged for input reasons: the
     // typed text may clamp/snap to the current value, or differ while validation normalizes
@@ -575,10 +657,10 @@ const NumberFieldRoot = /*#__PURE__*/React.forwardRef(function NumberFieldRoot(c
       const changed = incrementValue(amount, {
         direction: event.deltaY > 0 ? -1 : 1,
         event,
-        reason: wheel
+        reason: 'wheel'
       });
       if (changed) {
-        onValueCommitted(lastChangedValueRef.current, createGenericEventDetails(wheel, event));
+        onValueCommitted(lastChangedValueRef.current ?? valueRef.current, createGenericEventDetails(wheel, event));
       }
     }
     return addEventListener(element, 'wheel', handleWheel);
@@ -594,8 +676,12 @@ const NumberFieldRoot = /*#__PURE__*/React.forwardRef(function NumberFieldRoot(c
   }), [fieldState, disabled, readOnly, required, value, inputValue, isScrubbing]);
   const contextValue = React.useMemo(() => ({
     inputRef,
+    inputValue,
+    value,
     minWithDefault,
     maxWithDefault,
+    disabled,
+    readOnly,
     id,
     setValue,
     incrementValue,
@@ -607,16 +693,19 @@ const NumberFieldRoot = /*#__PURE__*/React.forwardRef(function NumberFieldRoot(c
     hasPendingCommitRef,
     name,
     nameProp,
+    required,
+    invalid,
     inputMode,
     getAllowedNonNumericKeys,
     min,
     max,
     setInputValue,
     locale,
+    isScrubbing,
     setIsScrubbing,
     state,
     onValueCommitted
-  }), [inputRef, minWithDefault, maxWithDefault, id, setValue, incrementValue, getStepAmount, formatOptionsRef, valueRef, name, nameProp, inputMode, getAllowedNonNumericKeys, min, max, setInputValue, locale, state, onValueCommitted]);
+  }), [inputRef, inputValue, value, minWithDefault, maxWithDefault, disabled, readOnly, id, setValue, incrementValue, getStepAmount, formatOptionsRef, valueRef, name, nameProp, required, invalid, inputMode, getAllowedNonNumericKeys, min, max, setInputValue, locale, isScrubbing, state, onValueCommitted]);
   const element = useRenderElement('div', componentProps, {
     ref: forwardedRef,
     state,
@@ -631,7 +720,7 @@ const NumberFieldRoot = /*#__PURE__*/React.forwardRef(function NumberFieldRoot(c
           inputRef.current?.focus();
         },
         onChange(event) {
-          // Workaround for https://github.com/react/react/issues/9023
+          // Workaround for https://github.com/facebook/react/issues/9023
           if (event.nativeEvent.defaultPrevented || disabled || readOnly) {
             return;
           }
@@ -656,7 +745,7 @@ const NumberFieldRoot = /*#__PURE__*/React.forwardRef(function NumberFieldRoot(c
       min: min,
       max: max
       // stepMismatch validation is broken unless an explicit `min` is added.
-      // See https://github.com/react/react/issues/12334.
+      // See https://github.com/facebook/react/issues/12334.
       ,
       step: stepProp,
       disabled: disabled,
@@ -753,6 +842,7 @@ function isTouchLikePointerType(pointerType) {
 function usePressAndHold(params) {
   const {
     disabled,
+    readOnly = false,
     tick,
     onStop,
     tickDelay = DEFAULT_TICK_DELAY,
@@ -832,7 +922,8 @@ function usePressAndHold(params) {
       isTouchingButtonRef.current = false;
     },
     onPointerDown(event) {
-      if (event.defaultPrevented || event.button || disabled) {
+      const isMainButton = !event.button || event.button === 0;
+      if (event.defaultPrevented || !isMainButton || disabled || readOnly) {
         return;
       }
       pointerTypeRef.current = event.pointerType;
@@ -875,10 +966,12 @@ function usePressAndHold(params) {
       }
     },
     onPointerMove(event) {
-      if (disabled || !isTouchLikePointerType(event.pointerType) || !isPressedRef.current) {
+      if (disabled || readOnly || !isTouchLikePointerType(event.pointerType) || !isPressedRef.current) {
         return;
       }
-      movesAfterTouchRef.current += 1;
+      if (movesAfterTouchRef.current != null) {
+        movesAfterTouchRef.current += 1;
+      }
       const {
         x,
         y
@@ -890,7 +983,7 @@ function usePressAndHold(params) {
       }
     },
     onMouseEnter(event) {
-      if (event.defaultPrevented || disabled || !isPressedRef.current || isTouchingButtonRef.current || isTouchLikePointerType(pointerTypeRef.current)) {
+      if (event.defaultPrevented || disabled || readOnly || !isPressedRef.current || isTouchingButtonRef.current || isTouchLikePointerType(pointerTypeRef.current)) {
         return;
       }
       startAutoChange(event.nativeEvent);
@@ -923,47 +1016,32 @@ function usePressAndHold(params) {
   };
 }
 
+const CHANGE_VALUE_TICK_DELAY = 60;
+const START_AUTO_CHANGE_DELAY = 400;
+const SCROLLING_POINTER_MOVE_DISTANCE = 8;
+
 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.
- */
-function useNumberFieldStepperButton(componentProps, forwardedRef, isIncrement) {
-  const {
-    render,
-    className,
-    disabled: disabledProp = false,
-    nativeButton = true,
-    style,
-    ...elementProps
-  } = componentProps;
+function useNumberFieldButton(params) {
   const {
     allowInputSyncRef,
+    disabled,
     formatOptionsRef,
     getStepAmount,
     id,
     incrementValue,
     inputRef,
-    maxWithDefault,
-    minWithDefault,
+    inputValue,
+    isIncrement,
+    locale,
+    readOnly,
     setValue,
-    state,
     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;
+  } = params;
   const pressReason = isIncrement ? incrementPress : decrementPress;
   function commitValue(nativeEvent) {
     const shouldCommitInputValue = !allowInputSyncRef.current;
@@ -999,6 +1077,9 @@ function useNumberFieldStepperButton(componentProps, forwardedRef, isIncrement)
   } = 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);
       return incrementValue(amount, {
@@ -1043,7 +1124,8 @@ function useNumberFieldStepperButton(componentProps, forwardedRef, isIncrement)
       }
     },
     onPointerDown(event) {
-      if (event.defaultPrevented || readOnly || event.button || disabled) {
+      const isMainButton = !event.button || event.button === 0;
+      if (event.defaultPrevented || readOnly || !isMainButton || disabled) {
         return;
       }
 
@@ -1059,6 +1141,61 @@ function useNumberFieldStepperButton(componentProps, forwardedRef, isIncrement)
       pointerHandlers.onPointerDown(event);
     }
   };
+  return props;
+}
+
+/**
+ * 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.
+ */
+function useNumberFieldStepperButton(componentProps, forwardedRef, isIncrement) {
+  const {
+    render,
+    className,
+    disabled: disabledProp = false,
+    nativeButton = true,
+    style,
+    ...elementProps
+  } = componentProps;
+  const {
+    allowInputSyncRef,
+    disabled: contextDisabled,
+    formatOptionsRef,
+    getStepAmount,
+    id,
+    incrementValue,
+    inputRef,
+    inputValue,
+    maxWithDefault,
+    minWithDefault,
+    readOnly,
+    setValue,
+    state,
+    value,
+    valueRef,
+    locale,
+    lastChangedValueRef,
+    onValueCommitted
+  } = useNumberFieldRootContext();
+  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 {
     getButtonProps,
     buttonRef
@@ -1121,33 +1258,31 @@ const NumberFieldInput = /*#__PURE__*/React.forwardRef(function NumberFieldInput
   } = componentProps;
   const {
     allowInputSyncRef,
+    disabled,
     formatOptionsRef,
     getAllowedNonNumericKeys,
     getStepAmount,
     id,
     incrementValue,
     inputMode,
+    inputValue,
     max,
     min,
     name,
     nameProp,
+    readOnly,
+    required,
     setValue,
     state,
     setInputValue,
     locale,
     inputRef,
+    value,
     onValueCommitted,
     lastChangedValueRef,
     hasPendingCommitRef,
     valueRef
   } = useNumberFieldRootContext();
-  const {
-    disabled,
-    readOnly,
-    required,
-    value,
-    inputValue
-  } = state;
   const {
     clearErrors
   } = useFormContext();
@@ -1282,7 +1417,7 @@ const NumberFieldInput = /*#__PURE__*/React.forwardRef(function NumberFieldInput
           blockRevalidationRef.current = false;
           return;
         }
-        committedValue = lastChangedValueRef.current;
+        committedValue = lastChangedValueRef.current ?? committed;
         // If validation normalized back to the current value, `useValueChanged` won't fire to
         // reset the flag, so reset it here or the next external change won't revalidate.
         if (committedValue === value) {
@@ -1303,7 +1438,7 @@ const NumberFieldInput = /*#__PURE__*/React.forwardRef(function NumberFieldInput
       }
     },
     onChange(event) {
-      // Workaround for https://github.com/react/react/issues/9023
+      // Workaround for https://github.com/facebook/react/issues/9023
       if (event.nativeEvent.defaultPrevented) {
         return;
       }
@@ -1319,10 +1454,7 @@ const NumberFieldInput = /*#__PURE__*/React.forwardRef(function NumberFieldInput
       // currently parseable into a number. This preserves good UX for IME
       // composition/partial input while still providing live numeric updates when possible.
       const allowedNonNumericKeys = getAllowedNonNumericKeys();
-      const isValidCharacterString = Array.from(targetValue).every(ch => isNumeralChar(ch) || ANY_MINUS_DETECT_RE.test(ch) || allowedNonNumericKeys.has(ch) ||
-      // Bidi/format controls are stripped by `parseNumber`; don't let them reject the string
-      // (RTL locales insert them around exponent/currency signs, e.g. scientific notation).
-      FORMAT_CONTROL_DETECT_RE.test(ch));
+      const isValidCharacterString = Array.from(targetValue).every(ch => isNumeralChar(ch) || ANY_MINUS_DETECT_RE.test(ch) || allowedNonNumericKeys.has(ch));
       if (!isValidCharacterString) {
         return;
       }
@@ -1372,7 +1504,7 @@ const NumberFieldInput = /*#__PURE__*/React.forwardRef(function NumberFieldInput
         if (event.key === symbol) {
           const symbolIndex = inputValue.indexOf(symbol);
           const isSymbolHighlighted = selectionContainsIndex(symbolIndex);
-          isAllowedNonNumericKey = symbolIndex === -1 || isAllSelected || isSymbolHighlighted;
+          isAllowedNonNumericKey = !inputValue.includes(symbol) || isAllSelected || isSymbolHighlighted;
         }
       });
       const isNavigateKey = NAVIGATE_KEYS.has(event.key);
@@ -1385,18 +1517,12 @@ const NumberFieldInput = /*#__PURE__*/React.forwardRef(function NumberFieldInput
       event.which === 229 || event.altKey && !isStepKey || event.ctrlKey || event.metaKey || isAllowedNonNumericKey || isNumeralChar(event.key) || isNavigateKey) {
         return;
       }
-
-      // Home/End jump to the corresponding bound, but only when that bound is defined.
-      let boundaryValue = null;
-      if (event.key === 'Home' && min != null) {
-        boundaryValue = min;
-      } else if (event.key === 'End' && max != null) {
-        boundaryValue = max;
-      }
+      const willSetHome = event.key === 'Home' && min != null;
+      const willSetEnd = event.key === 'End' && max != null;
 
       // Let the browser handle multi-character keys we don't act on (PageUp, Insert, F-keys,
       // Home/End without min/max); invalid single characters are still blocked below.
-      if (event.key.length > 1 && !isStepKey && boundaryValue === null) {
+      if (event.key.length > 1 && !isStepKey && !willSetHome && !willSetEnd) {
         return;
       }
 
@@ -1408,14 +1534,12 @@ const NumberFieldInput = /*#__PURE__*/React.forwardRef(function NumberFieldInput
       const amount = getStepAmount(event);
 
       // Prevent insertion of text or caret from moving.
-      event.preventDefault();
-      event.stopPropagation();
+      stopEvent(event);
       const commitDetails = createGenericEventDetails(keyboard, nativeEvent);
       let changed = false;
-      if (isStepKey || boundaryValue !== null) {
+      if (event.key === 'ArrowUp' || event.key === 'ArrowDown') {
         allowInputSyncRef.current = true;
-      }
-      if (isStepKey) {
+
         // When stepping from the synced numeric state, refresh the commit ref to the current
         // value so a canceled step can't commit a stale `lastChangedValueRef` left over from an
         // earlier change (mirrors the button path).
@@ -1428,14 +1552,15 @@ const NumberFieldInput = /*#__PURE__*/React.forwardRef(function NumberFieldInput
           event: nativeEvent,
           reason: keyboard
         });
-      } else if (boundaryValue !== null) {
-        changed = setValue(boundaryValue, createChangeEventDetails(keyboard, nativeEvent));
+      } else if (willSetHome) {
+        allowInputSyncRef.current = true;
+        changed = setValue(min, createChangeEventDetails(keyboard, nativeEvent));
+      } else if (willSetEnd) {
+        allowInputSyncRef.current = true;
+        changed = setValue(max, createChangeEventDetails(keyboard, nativeEvent));
       }
-
-      // `changed` is only true when `setValue` applied the change, which records the stored
-      // (clamped/snapped) value, so commit that rather than the pre-validation input.
       if (changed) {
-        onValueCommitted(lastChangedValueRef.current, commitDetails);
+        onValueCommitted(lastChangedValueRef.current ?? valueRef.current, commitDetails);
       }
     },
     onPaste(event) {
@@ -1446,7 +1571,6 @@ const NumberFieldInput = /*#__PURE__*/React.forwardRef(function NumberFieldInput
       try {
         pastedData = event.clipboardData?.getData('text/plain') ?? '';
       } catch {
-        /* istanbul ignore else -- `process.env.NODE_ENV` is a build-time constant under test */
         if (process.env.NODE_ENV !== 'production') {
           const ownerStackMessage = SafeReact.captureOwnerStack?.() || '';
           warn('<NumberField.Input> could not read clipboard text during paste handling.', ownerStackMessage);
@@ -1459,12 +1583,9 @@ const NumberFieldInput = /*#__PURE__*/React.forwardRef(function NumberFieldInput
 
       // Insert the pasted text at the caret/selection instead of replacing the entire value,
       // matching native input behavior (e.g. pasting "5" into "123|" yields "1235").
-      // The component renders `type="text"`, which always reports a selection range. Overriding
-      // `type` with a selection-less one (`email`, `number`) is unsupported either way: the caret
-      // restore above throws on those, so there is no working behavior to preserve here.
       const input = event.currentTarget;
-      const selectionStart = input.selectionStart;
-      const selectionEnd = input.selectionEnd;
+      const selectionStart = input.selectionStart ?? inputValue.length;
+      const selectionEnd = input.selectionEnd ?? inputValue.length;
       const nextText = inputValue.slice(0, selectionStart) + pastedData + inputValue.slice(selectionEnd);
       const parsedValue = parseNumber(nextText, locale, formatOptionsRef.current);
       if (parsedValue !== null) {