@base-ui/react 1.6.0 → 1.7.0

package/number-field/input/NumberFieldInput.mjs

@@ -4,13 +4,12 @@ import * as React from 'react';
 import { SafeReact } from '@base-ui/utils/safeReact';
 import { warn } from '@base-ui/utils/warn';
 import { useIsoLayoutEffect } from '@base-ui/utils/useIsoLayoutEffect';
-import { stopEvent } from "../../floating-ui-react/utils.mjs";
 import { useNumberFieldRootContext } from "../root/NumberFieldRootContext.mjs";
 import { useFieldRootContext } from "../../internals/field-root-context/FieldRootContext.mjs";
 import { useRegisterFieldControl } from "../../internals/field-register-control/useRegisterFieldControl.mjs";
 import { useFormContext } from "../../internals/form-context/FormContext.mjs";
 import { useLabelableContext } from "../../internals/labelable-provider/LabelableContext.mjs";
-import { getNumberLocaleDetails, isNumeralChar, parseNumber, ANY_MINUS_RE, ANY_PLUS_RE, ANY_MINUS_DETECT_RE, ANY_PLUS_DETECT_RE } from "../utils/parse.mjs";
+import { getNumberLocaleDetails, isNumeralChar, parseNumber, ANY_MINUS_RE, ANY_PLUS_RE, ANY_MINUS_DETECT_RE, ANY_PLUS_DETECT_RE, FORMAT_CONTROL_DETECT_RE } from "../utils/parse.mjs";
 import { stateAttributesMapping } from "../utils/stateAttributesMapping.mjs";
 import { useRenderElement } from "../../internals/useRenderElement.mjs";
 import { createChangeEventDetails, createGenericEventDetails } from "../../internals/createBaseUIEventDetails.mjs";
@@ -35,31 +34,33 @@ export const NumberFieldInput = /*#__PURE__*/React.forwardRef(function NumberFie
   } = 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();
@@ -194,7 +195,7 @@ export const NumberFieldInput = /*#__PURE__*/React.forwardRef(function NumberFie
           blockRevalidationRef.current = false;
           return;
         }
-        committedValue = lastChangedValueRef.current ?? committed;
+        committedValue = lastChangedValueRef.current;
         // 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) {
@@ -215,7 +216,7 @@ export const NumberFieldInput = /*#__PURE__*/React.forwardRef(function NumberFie
       }
     },
     onChange(event) {
-      // Workaround for https://github.com/facebook/react/issues/9023
+      // Workaround for https://github.com/react/react/issues/9023
       if (event.nativeEvent.defaultPrevented) {
         return;
       }
@@ -231,7 +232,10 @@ export const NumberFieldInput = /*#__PURE__*/React.forwardRef(function NumberFie
       // 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));
+      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));
       if (!isValidCharacterString) {
         return;
       }
@@ -281,7 +285,7 @@ export const NumberFieldInput = /*#__PURE__*/React.forwardRef(function NumberFie
         if (event.key === symbol) {
           const symbolIndex = inputValue.indexOf(symbol);
           const isSymbolHighlighted = selectionContainsIndex(symbolIndex);
-          isAllowedNonNumericKey = !inputValue.includes(symbol) || isAllSelected || isSymbolHighlighted;
+          isAllowedNonNumericKey = symbolIndex === -1 || isAllSelected || isSymbolHighlighted;
         }
       });
       const isNavigateKey = NAVIGATE_KEYS.has(event.key);
@@ -294,12 +298,18 @@ export const NumberFieldInput = /*#__PURE__*/React.forwardRef(function NumberFie
       event.which === 229 || event.altKey && !isStepKey || event.ctrlKey || event.metaKey || isAllowedNonNumericKey || isNumeralChar(event.key) || isNavigateKey) {
         return;
       }
-      const willSetHome = event.key === 'Home' && min != null;
-      const willSetEnd = event.key === 'End' && max != null;
+
+      // 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;
+      }
 
       // 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 && !willSetHome && !willSetEnd) {
+      if (event.key.length > 1 && !isStepKey && boundaryValue === null) {
         return;
       }
 
@@ -311,12 +321,14 @@ export const NumberFieldInput = /*#__PURE__*/React.forwardRef(function NumberFie
       const amount = getStepAmount(event);
 
       // Prevent insertion of text or caret from moving.
-      stopEvent(event);
+      event.preventDefault();
+      event.stopPropagation();
       const commitDetails = createGenericEventDetails(REASONS.keyboard, nativeEvent);
       let changed = false;
-      if (event.key === 'ArrowUp' || event.key === 'ArrowDown') {
+      if (isStepKey || boundaryValue !== null) {
         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).
@@ -329,15 +341,14 @@ export const NumberFieldInput = /*#__PURE__*/React.forwardRef(function NumberFie
           event: nativeEvent,
           reason: REASONS.keyboard
         });
-      } else if (willSetHome) {
-        allowInputSyncRef.current = true;
-        changed = setValue(min, createChangeEventDetails(REASONS.keyboard, nativeEvent));
-      } else if (willSetEnd) {
-        allowInputSyncRef.current = true;
-        changed = setValue(max, createChangeEventDetails(REASONS.keyboard, nativeEvent));
+      } else if (boundaryValue !== null) {
+        changed = setValue(boundaryValue, createChangeEventDetails(REASONS.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 ?? valueRef.current, commitDetails);
+        onValueCommitted(lastChangedValueRef.current, commitDetails);
       }
     },
     onPaste(event) {
@@ -348,6 +359,7 @@ export const NumberFieldInput = /*#__PURE__*/React.forwardRef(function NumberFie
       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);
@@ -360,9 +372,12 @@ export const NumberFieldInput = /*#__PURE__*/React.forwardRef(function NumberFie
 
       // 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 ?? inputValue.length;
-      const selectionEnd = input.selectionEnd ?? inputValue.length;
+      const selectionStart = input.selectionStart;
+      const selectionEnd = input.selectionEnd;
       const nextText = inputValue.slice(0, selectionStart) + pastedData + inputValue.slice(selectionEnd);
       const parsedValue = parseNumber(nextText, locale, formatOptionsRef.current);
       if (parsedValue !== null) {

package/number-field/root/NumberFieldRoot.js

@@ -69,7 +69,6 @@ const NumberFieldRoot = exports.NumberFieldRoot = /*#__PURE__*/React.forwardRef(
     validityData,
     disabled: fieldDisabled,
     setFilled,
-    invalid,
     name: fieldName,
     state: fieldState,
     validation
@@ -118,48 +117,46 @@ const NumberFieldRoot = exports.NumberFieldRoot = /*#__PURE__*/React.forwardRef(
   const [inputValue, setInputValue] = React.useState(() => (0, _formatNumber.formatNumber)(value, locale, format));
   const [inputMode, setInputMode] = React.useState('numeric');
   const getAllowedNonNumericKeys = (0, _useStableCallback.useStableCallback)(() => {
-    const {
-      decimal,
-      group,
-      currency,
-      literal
-    } = (0, _parse.getNumberLocaleDetails)(locale, format);
-    const keys = new Set();
-    _parse.BASE_NON_NUMERIC_SYMBOLS.forEach(symbol => keys.add(symbol));
-    if (decimal) {
-      keys.add(decimal);
-    }
-    if (group) {
-      keys.add(group);
-      if (_parse.SPACE_SEPARATOR_RE.test(group)) {
+    const parts = (0, _parse.getFormatParts)(locale, format);
+    const keys = new Set(_parse.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 ?? (0, _parse.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 (_parse.SPACE_SEPARATOR_RE.test(part.value)) {
         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) {
-      _parse.PERCENTAGES.forEach(key => keys.add(key));
+      addAll(_parse.PERCENTAGES);
     }
     if (allowPermilleSymbols) {
-      _parse.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 (_parse.SPACE_SEPARATOR_RE.test(literal)) {
-        keys.add(' ');
-      }
+      addAll(_parse.PERMILLE);
     }
 
     // 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.
-    _parse.PLUS_SIGNS_WITH_ASCII.forEach(key => keys.add(key));
+    addAll(_parse.PLUS_SIGNS_WITH_ASCII);
     if (minWithDefault < 0 || allowOutOfRange) {
-      _parse.MINUS_SIGNS_WITH_ASCII.forEach(key => keys.add(key));
+      addAll(_parse.MINUS_SIGNS_WITH_ASCII);
     }
     return keys;
   });
@@ -177,21 +174,13 @@ const NumberFieldRoot = exports.NumberFieldRoot = /*#__PURE__*/React.forwardRef(
     const dir = details.direction;
 
     // Direct text entry (typing, pasting, clearing, autofill) behaves natively; step-based
-    // interactions (keyboard arrows, buttons, wheel, scrub) do not.
-    const isInputReason = details.reason === _reasons.REASONS.inputChange || details.reason === _reasons.REASONS.inputClear || details.reason === _reasons.REASONS.inputBlur || details.reason === _reasons.REASONS.inputPaste || details.reason === _reasons.REASONS.none;
+    // 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 === _reasons.REASONS.none;
 
     // Only allow out-of-range values for direct text entry. Step-based interactions still clamp.
     const shouldClampValue = !allowOutOfRange || !isInputReason;
-    const validatedValue = (0, _validate.toValidatedNumber)(unvalidatedValue, {
-      step: dir ? getStepAmount(eventWithOptionalKeyState) * dir : undefined,
-      format: formatOptionsRef.current,
-      minWithDefault,
-      maxWithDefault,
-      minWithZeroDefault,
-      snapOnStep,
-      small: eventWithOptionalKeyState?.altKey ?? false,
-      clamp: shouldClampValue
-    });
+    const validatedValue = (0, _validate.toValidatedNumber)(unvalidatedValue, dir ? getStepAmount(eventWithOptionalKeyState) * dir : undefined, minWithDefault, maxWithDefault, minWithZeroDefault, formatOptionsRef.current, snapOnStep, eventWithOptionalKeyState?.altKey ?? false, 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
@@ -301,10 +290,10 @@ const NumberFieldRoot = exports.NumberFieldRoot = /*#__PURE__*/React.forwardRef(
       const changed = incrementValue(amount, {
         direction: event.deltaY > 0 ? -1 : 1,
         event,
-        reason: 'wheel'
+        reason: _reasons.REASONS.wheel
       });
       if (changed) {
-        onValueCommitted(lastChangedValueRef.current ?? valueRef.current, (0, _createBaseUIEventDetails.createGenericEventDetails)(_reasons.REASONS.wheel, event));
+        onValueCommitted(lastChangedValueRef.current, (0, _createBaseUIEventDetails.createGenericEventDetails)(_reasons.REASONS.wheel, event));
       }
     }
     return (0, _addEventListener.addEventListener)(element, 'wheel', handleWheel);
@@ -320,12 +309,8 @@ const NumberFieldRoot = exports.NumberFieldRoot = /*#__PURE__*/React.forwardRef(
   }), [fieldState, disabled, readOnly, required, value, inputValue, isScrubbing]);
   const contextValue = React.useMemo(() => ({
     inputRef,
-    inputValue,
-    value,
     minWithDefault,
     maxWithDefault,
-    disabled,
-    readOnly,
     id,
     setValue,
     incrementValue,
@@ -337,19 +322,16 @@ const NumberFieldRoot = exports.NumberFieldRoot = /*#__PURE__*/React.forwardRef(
     hasPendingCommitRef,
     name,
     nameProp,
-    required,
-    invalid,
     inputMode,
     getAllowedNonNumericKeys,
     min,
     max,
     setInputValue,
     locale,
-    isScrubbing,
     setIsScrubbing,
     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]);
+  }), [inputRef, minWithDefault, maxWithDefault, id, setValue, incrementValue, getStepAmount, formatOptionsRef, valueRef, name, nameProp, inputMode, getAllowedNonNumericKeys, min, max, setInputValue, locale, state, onValueCommitted]);
   const element = (0, _useRenderElement.useRenderElement)('div', componentProps, {
     ref: forwardedRef,
     state,
@@ -364,7 +346,7 @@ const NumberFieldRoot = exports.NumberFieldRoot = /*#__PURE__*/React.forwardRef(
           inputRef.current?.focus();
         },
         onChange(event) {
-          // Workaround for https://github.com/facebook/react/issues/9023
+          // Workaround for https://github.com/react/react/issues/9023
           if (event.nativeEvent.defaultPrevented || disabled || readOnly) {
             return;
           }
@@ -389,7 +371,7 @@ const NumberFieldRoot = exports.NumberFieldRoot = /*#__PURE__*/React.forwardRef(
       min: min,
       max: max
       // stepMismatch validation is broken unless an explicit `min` is added.
-      // See https://github.com/facebook/react/issues/12334.
+      // See https://github.com/react/react/issues/12334.
       ,
       step: stepProp,
       disabled: disabled,

package/number-field/root/NumberFieldRoot.mjs

@@ -18,7 +18,7 @@ import { useFormContext } from "../../internals/form-context/FormContext.mjs";
 import { useLabelableId } from "../../internals/labelable-provider/useLabelableId.mjs";
 import { stateAttributesMapping } from "../utils/stateAttributesMapping.mjs";
 import { useRenderElement } from "../../internals/useRenderElement.mjs";
-import { getNumberLocaleDetails, PERMILLE, PERCENTAGES, SPACE_SEPARATOR_RE, BASE_NON_NUMERIC_SYMBOLS, MINUS_SIGNS_WITH_ASCII, PLUS_SIGNS_WITH_ASCII } from "../utils/parse.mjs";
+import { getFormatParts, getNumberLocaleDetails, PERMILLE, PERCENTAGES, SPACE_SEPARATOR_RE, BASE_NON_NUMERIC_SYMBOLS, MINUS_SIGNS_WITH_ASCII, PLUS_SIGNS_WITH_ASCII } from "../utils/parse.mjs";
 import { formatNumber } from "../../utils/formatNumber.mjs";
 import { toValidatedNumber } from "../utils/validate.mjs";
 import { createChangeEventDetails, createGenericEventDetails } from "../../internals/createBaseUIEventDetails.mjs";
@@ -64,7 +64,6 @@ export const NumberFieldRoot = /*#__PURE__*/React.forwardRef(function NumberFiel
     validityData,
     disabled: fieldDisabled,
     setFilled,
-    invalid,
     name: fieldName,
     state: fieldState,
     validation
@@ -113,48 +112,46 @@ export const NumberFieldRoot = /*#__PURE__*/React.forwardRef(function NumberFiel
   const [inputValue, setInputValue] = React.useState(() => formatNumber(value, locale, format));
   const [inputMode, setInputMode] = React.useState('numeric');
   const getAllowedNonNumericKeys = useStableCallback(() => {
-    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)) {
+    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)) {
         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) {
-      PERCENTAGES.forEach(key => keys.add(key));
+      addAll(PERCENTAGES);
     }
     if (allowPermilleSymbols) {
-      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(' ');
-      }
+      addAll(PERMILLE);
     }
 
     // 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.
-    PLUS_SIGNS_WITH_ASCII.forEach(key => keys.add(key));
+    addAll(PLUS_SIGNS_WITH_ASCII);
     if (minWithDefault < 0 || allowOutOfRange) {
-      MINUS_SIGNS_WITH_ASCII.forEach(key => keys.add(key));
+      addAll(MINUS_SIGNS_WITH_ASCII);
     }
     return keys;
   });
@@ -172,21 +169,13 @@ export const NumberFieldRoot = /*#__PURE__*/React.forwardRef(function NumberFiel
     const dir = details.direction;
 
     // Direct text entry (typing, pasting, clearing, autofill) behaves natively; step-based
-    // interactions (keyboard arrows, buttons, wheel, scrub) do not.
-    const isInputReason = details.reason === REASONS.inputChange || details.reason === REASONS.inputClear || details.reason === REASONS.inputBlur || details.reason === REASONS.inputPaste || details.reason === REASONS.none;
+    // 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 === REASONS.none;
 
     // Only allow out-of-range values for direct text entry. Step-based interactions still clamp.
     const shouldClampValue = !allowOutOfRange || !isInputReason;
-    const validatedValue = toValidatedNumber(unvalidatedValue, {
-      step: dir ? getStepAmount(eventWithOptionalKeyState) * dir : undefined,
-      format: formatOptionsRef.current,
-      minWithDefault,
-      maxWithDefault,
-      minWithZeroDefault,
-      snapOnStep,
-      small: eventWithOptionalKeyState?.altKey ?? false,
-      clamp: shouldClampValue
-    });
+    const validatedValue = toValidatedNumber(unvalidatedValue, dir ? getStepAmount(eventWithOptionalKeyState) * dir : undefined, minWithDefault, maxWithDefault, minWithZeroDefault, formatOptionsRef.current, snapOnStep, eventWithOptionalKeyState?.altKey ?? false, 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
@@ -296,10 +285,10 @@ export const NumberFieldRoot = /*#__PURE__*/React.forwardRef(function NumberFiel
       const changed = incrementValue(amount, {
         direction: event.deltaY > 0 ? -1 : 1,
         event,
-        reason: 'wheel'
+        reason: REASONS.wheel
       });
       if (changed) {
-        onValueCommitted(lastChangedValueRef.current ?? valueRef.current, createGenericEventDetails(REASONS.wheel, event));
+        onValueCommitted(lastChangedValueRef.current, createGenericEventDetails(REASONS.wheel, event));
       }
     }
     return addEventListener(element, 'wheel', handleWheel);
@@ -315,12 +304,8 @@ export const NumberFieldRoot = /*#__PURE__*/React.forwardRef(function NumberFiel
   }), [fieldState, disabled, readOnly, required, value, inputValue, isScrubbing]);
   const contextValue = React.useMemo(() => ({
     inputRef,
-    inputValue,
-    value,
     minWithDefault,
     maxWithDefault,
-    disabled,
-    readOnly,
     id,
     setValue,
     incrementValue,
@@ -332,19 +317,16 @@ export const NumberFieldRoot = /*#__PURE__*/React.forwardRef(function NumberFiel
     hasPendingCommitRef,
     name,
     nameProp,
-    required,
-    invalid,
     inputMode,
     getAllowedNonNumericKeys,
     min,
     max,
     setInputValue,
     locale,
-    isScrubbing,
     setIsScrubbing,
     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]);
+  }), [inputRef, minWithDefault, maxWithDefault, id, setValue, incrementValue, getStepAmount, formatOptionsRef, valueRef, name, nameProp, inputMode, getAllowedNonNumericKeys, min, max, setInputValue, locale, state, onValueCommitted]);
   const element = useRenderElement('div', componentProps, {
     ref: forwardedRef,
     state,
@@ -359,7 +341,7 @@ export const NumberFieldRoot = /*#__PURE__*/React.forwardRef(function NumberFiel
           inputRef.current?.focus();
         },
         onChange(event) {
-          // Workaround for https://github.com/facebook/react/issues/9023
+          // Workaround for https://github.com/react/react/issues/9023
           if (event.nativeEvent.defaultPrevented || disabled || readOnly) {
             return;
           }
@@ -384,7 +366,7 @@ export const NumberFieldRoot = /*#__PURE__*/React.forwardRef(function NumberFiel
       min: min,
       max: max
       // stepMismatch validation is broken unless an explicit `min` is added.
-      // See https://github.com/facebook/react/issues/12334.
+      // See https://github.com/react/react/issues/12334.
       ,
       step: stepProp,
       disabled: disabled,

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

@@ -3,12 +3,8 @@ import type { NumberFieldRoot, NumberFieldRootState } from "./NumberFieldRoot.mj
 import type { EventWithOptionalKeyState, IncrementValueParameters } from "../utils/types.mjs";
 export type InputMode = 'numeric' | 'decimal' | 'text';
 export interface NumberFieldRootContext {
-  inputValue: string;
-  value: number | null;
   minWithDefault: number;
   maxWithDefault: number;
-  disabled: boolean;
-  readOnly: boolean;
   id: string | undefined;
   setValue: (value: number | null, details: NumberFieldRoot.ChangeEventDetails) => boolean;
   getStepAmount: (event?: EventWithOptionalKeyState) => number;
@@ -21,15 +17,12 @@ export interface NumberFieldRootContext {
   hasPendingCommitRef: React.RefObject<boolean>;
   name: string | undefined;
   nameProp: string | undefined;
-  required: boolean;
-  invalid: boolean | undefined;
   inputMode: InputMode;
   getAllowedNonNumericKeys: () => Set<string>;
   min: number | undefined;
   max: number | undefined;
   setInputValue: React.Dispatch<React.SetStateAction<string>>;
   locale: Intl.LocalesArgument;
-  isScrubbing: boolean;
   setIsScrubbing: React.Dispatch<React.SetStateAction<boolean>>;
   state: NumberFieldRootState;
   onValueCommitted: (value: number | null, eventDetails: NumberFieldRoot.CommitEventDetails) => void;

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

@@ -3,12 +3,8 @@ import type { NumberFieldRoot, NumberFieldRootState } from "./NumberFieldRoot.js
 import type { EventWithOptionalKeyState, IncrementValueParameters } from "../utils/types.js";
 export type InputMode = 'numeric' | 'decimal' | 'text';
 export interface NumberFieldRootContext {
-  inputValue: string;
-  value: number | null;
   minWithDefault: number;
   maxWithDefault: number;
-  disabled: boolean;
-  readOnly: boolean;
   id: string | undefined;
   setValue: (value: number | null, details: NumberFieldRoot.ChangeEventDetails) => boolean;
   getStepAmount: (event?: EventWithOptionalKeyState) => number;
@@ -21,15 +17,12 @@ export interface NumberFieldRootContext {
   hasPendingCommitRef: React.RefObject<boolean>;
   name: string | undefined;
   nameProp: string | undefined;
-  required: boolean;
-  invalid: boolean | undefined;
   inputMode: InputMode;
   getAllowedNonNumericKeys: () => Set<string>;
   min: number | undefined;
   max: number | undefined;
   setInputValue: React.Dispatch<React.SetStateAction<string>>;
   locale: Intl.LocalesArgument;
-  isScrubbing: boolean;
   setIsScrubbing: React.Dispatch<React.SetStateAction<boolean>>;
   state: NumberFieldRootState;
   onValueCommitted: (value: number | null, eventDetails: NumberFieldRoot.CommitEventDetails) => void;