@react-aria/numberfield 3.12.3 → 3.12.5

package/dist/types.d.ts

@@ -1,7 +1,7 @@
 import { AriaButtonProps } from "@react-types/button";
 import { AriaNumberFieldProps } from "@react-types/numberfield";
-import { DOMAttributes, GroupDOMAttributes, ValidationResult } from "@react-types/shared";
 import { InputHTMLAttributes, LabelHTMLAttributes, RefObject } from "react";
+import { DOMAttributes, GroupDOMAttributes, ValidationResult } from "@react-types/shared";
 import { NumberFieldState } from "@react-stately/numberfield";
 export interface NumberFieldAria extends ValidationResult {
     /** Props for the label element. */

package/dist/types.d.ts.map

@@ -1 +1 @@
-{"mappings":";;;;;AAoCA,gCAAiC,SAAQ,gBAAgB;IACvD,mCAAmC;IACnC,UAAU,EAAE,oBAAoB,gBAAgB,CAAC,CAAC;IAClD,wEAAwE;IACxE,UAAU,EAAE,kBAAkB,CAAC;IAC/B,mCAAmC;IACnC,UAAU,EAAE,oBAAoB,gBAAgB,CAAC,CAAC;IAClD,mEAAmE;IACnE,oBAAoB,EAAE,eAAe,CAAC;IACtC,mEAAmE;IACnE,oBAAoB,EAAE,eAAe,CAAC;IACtC,gEAAgE;IAChE,gBAAgB,EAAE,aAAa,CAAC;IAChC,kEAAkE;IAClE,iBAAiB,EAAE,aAAa,CAAA;CACjC;AAED;;;GAGG;AACH,+BAA+B,KAAK,EAAE,oBAAoB,EAAE,KAAK,EAAE,gBAAgB,EAAE,QAAQ,EAAE,UAAU,gBAAgB,GAAG,IAAI,CAAC,GAAG,eAAe,CAiRlJ;AC9TD,YAAY,EAAC,oBAAoB,EAAC,MAAM,0BAA0B,CAAC","sources":["packages/@react-aria/numberfield/src/packages/@react-aria/numberfield/src/useNumberField.ts","packages/@react-aria/numberfield/src/packages/@react-aria/numberfield/src/index.ts","packages/@react-aria/numberfield/src/index.ts"],"sourcesContent":[null,null,"/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\nexport {useNumberField} from './useNumberField';\nexport type {AriaNumberFieldProps} from '@react-types/numberfield';\nexport type {NumberFieldAria} from './useNumberField';\n"],"names":[],"version":3,"file":"types.d.ts.map"}
+{"mappings":";;;;;AAwCA,gCAAiC,SAAQ,gBAAgB;IACvD,mCAAmC;IACnC,UAAU,EAAE,oBAAoB,gBAAgB,CAAC,CAAC;IAClD,wEAAwE;IACxE,UAAU,EAAE,kBAAkB,CAAC;IAC/B,mCAAmC;IACnC,UAAU,EAAE,oBAAoB,gBAAgB,CAAC,CAAC;IAClD,mEAAmE;IACnE,oBAAoB,EAAE,eAAe,CAAC;IACtC,mEAAmE;IACnE,oBAAoB,EAAE,eAAe,CAAC;IACtC,gEAAgE;IAChE,gBAAgB,EAAE,aAAa,CAAC;IAChC,kEAAkE;IAClE,iBAAiB,EAAE,aAAa,CAAA;CACjC;AAED;;;GAGG;AACH,+BAA+B,KAAK,EAAE,oBAAoB,EAAE,KAAK,EAAE,gBAAgB,EAAE,QAAQ,EAAE,UAAU,gBAAgB,GAAG,IAAI,CAAC,GAAG,eAAe,CA6SlJ;AC9VD,YAAY,EAAC,oBAAoB,EAAC,MAAM,0BAA0B,CAAC","sources":["packages/@react-aria/numberfield/src/packages/@react-aria/numberfield/src/useNumberField.ts","packages/@react-aria/numberfield/src/packages/@react-aria/numberfield/src/index.ts","packages/@react-aria/numberfield/src/index.ts"],"sourcesContent":[null,null,"/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\nexport {useNumberField} from './useNumberField';\nexport type {AriaNumberFieldProps} from '@react-types/numberfield';\nexport type {NumberFieldAria} from './useNumberField';\n"],"names":[],"version":3,"file":"types.d.ts.map"}

package/dist/useNumberField.main.js

@@ -1,6 +1,8 @@
 var $4932e21065cdc2cd$exports = require("./intlStrings.main.js");
+var $9WaOX$reactarialiveannouncer = require("@react-aria/live-announcer");
 var $9WaOX$reactariautils = require("@react-aria/utils");
 var $9WaOX$react = require("react");
+var $9WaOX$reactdom = require("react-dom");
 var $9WaOX$reactstatelyform = require("@react-stately/form");
 var $9WaOX$reactariainteractions = require("@react-aria/interactions");
 var $9WaOX$reactariatextfield = require("@react-aria/textfield");
@@ -35,15 +37,30 @@ $parcel$export(module.exports, "useNumberField", () => $fa863e9b015ae839$export$
 
 
 
+
+
 function $fa863e9b015ae839$export$23f548e970bdf099(props, state, inputRef) {
     let { id: id, decrementAriaLabel: decrementAriaLabel, incrementAriaLabel: incrementAriaLabel, isDisabled: isDisabled, isReadOnly: isReadOnly, isRequired: isRequired, minValue: minValue, maxValue: maxValue, autoFocus: autoFocus, label: label, formatOptions: formatOptions, onBlur: onBlur = ()=>{}, onFocus: onFocus, onFocusChange: onFocusChange, onKeyDown: onKeyDown, onKeyUp: onKeyUp, description: description, errorMessage: errorMessage, isWheelDisabled: isWheelDisabled, ...otherProps } = props;
     let { increment: increment, incrementToMax: incrementToMax, decrement: decrement, decrementToMin: decrementToMin, numberValue: numberValue, inputValue: inputValue, commit: commit, commitValidation: commitValidation } = state;
     const stringFormatter = (0, $9WaOX$reactariai18n.useLocalizedStringFormatter)((0, ($parcel$interopDefault($4932e21065cdc2cd$exports))), '@react-aria/numberfield');
+    let commitAndAnnounce = (0, $9WaOX$react.useCallback)(()=>{
+        var _inputRef_current, _inputRef_current1, _inputRef_current2;
+        var _inputRef_current_value;
+        let oldValue = (_inputRef_current_value = (_inputRef_current = inputRef.current) === null || _inputRef_current === void 0 ? void 0 : _inputRef_current.value) !== null && _inputRef_current_value !== void 0 ? _inputRef_current_value : '';
+        // Set input value to normalized valid value
+        (0, $9WaOX$reactdom.flushSync)(()=>{
+            commit();
+        });
+        var _inputRef_current_value1;
+        if (((_inputRef_current1 = inputRef.current) === null || _inputRef_current1 === void 0 ? void 0 : _inputRef_current1.value) !== oldValue) (0, $9WaOX$reactarialiveannouncer.announce)((_inputRef_current_value1 = (_inputRef_current2 = inputRef.current) === null || _inputRef_current2 === void 0 ? void 0 : _inputRef_current2.value) !== null && _inputRef_current_value1 !== void 0 ? _inputRef_current_value1 : '', 'assertive');
+    }, [
+        commit,
+        inputRef
+    ]);
     let inputId = (0, $9WaOX$reactariautils.useId)(id);
     let { focusProps: focusProps } = (0, $9WaOX$reactariainteractions.useFocus)({
         onBlur () {
-            // Set input value to normalized valid value
-            commit();
+            commitAndAnnounce();
         }
     });
     let numberFormatter = (0, $9WaOX$reactariai18n.useNumberFormatter)(formatOptions);
@@ -119,6 +136,24 @@ function $fa863e9b015ae839$export$23f548e970bdf099(props, state, inputRef) {
     let onChange = (value)=>{
         if (state.validate(value)) state.setInputValue(value);
     };
+    let onPaste = (e)=>{
+        var _props_onPaste;
+        (_props_onPaste = props.onPaste) === null || _props_onPaste === void 0 ? void 0 : _props_onPaste.call(props, e);
+        let inputElement = (0, $9WaOX$reactariautils.getEventTarget)(e);
+        var _inputElement_selectionEnd, _inputElement_selectionStart;
+        // we can only handle the case where the paste takes over the entire input, otherwise things get very complicated
+        // trying to calculate the new string based on what the paste is replacing and where in the source string it is
+        if (inputElement && ((_inputElement_selectionEnd = inputElement.selectionEnd) !== null && _inputElement_selectionEnd !== void 0 ? _inputElement_selectionEnd : -1) - ((_inputElement_selectionStart = inputElement.selectionStart) !== null && _inputElement_selectionStart !== void 0 ? _inputElement_selectionStart : 0) === inputElement.value.length) {
+            var _e_clipboardData_getData, _e_clipboardData_getData1, _e_clipboardData;
+            e.preventDefault();
+            var _e_clipboardData_getData_trim;
+            // commit so that the user gets to see what it formats to immediately
+            // paste happens before inputRef's value is updated, so have to prevent the default and do it ourselves
+            // spin button will then handle announcing the new value, this should work with controlled state as well
+            // because the announcement is done as a result of the new rendered input value if there is one
+            commit((_e_clipboardData_getData_trim = (_e_clipboardData = e.clipboardData) === null || _e_clipboardData === void 0 ? void 0 : (_e_clipboardData_getData1 = _e_clipboardData.getData) === null || _e_clipboardData_getData1 === void 0 ? void 0 : (_e_clipboardData_getData = _e_clipboardData_getData1.call(_e_clipboardData, 'text/plain')) === null || _e_clipboardData_getData === void 0 ? void 0 : _e_clipboardData_getData.trim()) !== null && _e_clipboardData_getData_trim !== void 0 ? _e_clipboardData_getData_trim : '');
+        }
+    };
     let domProps = (0, $9WaOX$reactariautils.filterDOMProps)(props);
     let onKeyDownEnter = (0, $9WaOX$react.useCallback)((e)=>{
         if (e.nativeEvent.isComposing) return;
@@ -161,6 +196,7 @@ function $fa863e9b015ae839$export$23f548e970bdf099(props, state, inputRef) {
             onKeyDown
         ]),
         onKeyUp: onKeyUp,
+        onPaste: onPaste,
         description: description,
         errorMessage: errorMessage
     }, state, inputRef);
@@ -182,7 +218,7 @@ function $fa863e9b015ae839$export$23f548e970bdf099(props, state, inputRef) {
         var _inputRef_current;
         // If focus is already on the input, keep it there so we don't hide the
         // software keyboard when tapping the increment/decrement buttons.
-        if (document.activeElement === inputRef.current) return;
+        if ((0, $9WaOX$reactariautils.getActiveElement)() === inputRef.current) return;
         // Otherwise, when using a mouse, move focus to the input.
         // On touch, or with a screen reader, focus the button so that the software
         // keyboard does not appear and the screen reader cursor is not moved off the button.

package/dist/useNumberField.main.js.map

@@ -1 +1 @@
-{"mappings":"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","sources":["packages/@react-aria/numberfield/src/useNumberField.ts"],"sourcesContent":["/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {AriaButtonProps} from '@react-types/button';\nimport {AriaNumberFieldProps} from '@react-types/numberfield';\nimport {chain, filterDOMProps, isAndroid, isIOS, isIPhone, mergeProps, useFormReset, useId} from '@react-aria/utils';\nimport {DOMAttributes, GroupDOMAttributes, TextInputDOMProps, ValidationResult} from '@react-types/shared';\nimport {\n  InputHTMLAttributes,\n  LabelHTMLAttributes,\n  RefObject,\n  useCallback,\n  useMemo,\n  useState\n} from 'react';\n// @ts-ignore\nimport intlMessages from '../intl/*.json';\nimport {NumberFieldState} from '@react-stately/numberfield';\nimport {privateValidationStateProp} from '@react-stately/form';\nimport {useFocus, useFocusWithin, useScrollWheel} from '@react-aria/interactions';\nimport {useFormattedTextField} from '@react-aria/textfield';\nimport {\n  useLocalizedStringFormatter,\n  useNumberFormatter\n} from '@react-aria/i18n';\nimport {useSpinButton} from '@react-aria/spinbutton';\n\nexport interface NumberFieldAria extends ValidationResult {\n  /** Props for the label element. */\n  labelProps: LabelHTMLAttributes<HTMLLabelElement>,\n  /** Props for the group wrapper around the input and stepper buttons. */\n  groupProps: GroupDOMAttributes,\n  /** Props for the input element. */\n  inputProps: InputHTMLAttributes<HTMLInputElement>,\n  /** Props for the increment button, to be passed to `useButton`. */\n  incrementButtonProps: AriaButtonProps,\n  /** Props for the decrement button, to be passed to `useButton`. */\n  decrementButtonProps: AriaButtonProps,\n  /** Props for the number field's description element, if any. */\n  descriptionProps: DOMAttributes,\n  /** Props for the number field's error message element, if any. */\n  errorMessageProps: DOMAttributes\n}\n\n/**\n * Provides the behavior and accessibility implementation for a number field component.\n * Number fields allow users to enter a number, and increment or decrement the value using stepper buttons.\n */\nexport function useNumberField(props: AriaNumberFieldProps, state: NumberFieldState, inputRef: RefObject<HTMLInputElement | null>): NumberFieldAria {\n  let {\n    id,\n    decrementAriaLabel,\n    incrementAriaLabel,\n    isDisabled,\n    isReadOnly,\n    isRequired,\n    minValue,\n    maxValue,\n    autoFocus,\n    label,\n    formatOptions,\n    onBlur = () => {},\n    onFocus,\n    onFocusChange,\n    onKeyDown,\n    onKeyUp,\n    description,\n    errorMessage,\n    isWheelDisabled,\n    ...otherProps\n  } = props;\n\n  let {\n    increment,\n    incrementToMax,\n    decrement,\n    decrementToMin,\n    numberValue,\n    inputValue,\n    commit,\n    commitValidation\n  } = state;\n\n  const stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-aria/numberfield');\n\n  let inputId = useId(id);\n  let {focusProps} = useFocus({\n    onBlur() {\n      // Set input value to normalized valid value\n      commit();\n    }\n  });\n\n  let numberFormatter = useNumberFormatter(formatOptions);\n  let intlOptions = useMemo(() => numberFormatter.resolvedOptions(), [numberFormatter]);\n\n  // Replace negative textValue formatted using currencySign: 'accounting'\n  // with a textValue that can be announced using a minus sign.\n  let textValueFormatter = useNumberFormatter({...formatOptions, currencySign: undefined});\n  let textValue = useMemo(() => isNaN(numberValue) ? '' : textValueFormatter.format(numberValue), [textValueFormatter, numberValue]);\n\n  let {\n    spinButtonProps,\n    incrementButtonProps: incButtonProps,\n    decrementButtonProps: decButtonProps\n  } = useSpinButton(\n    {\n      isDisabled,\n      isReadOnly,\n      isRequired,\n      maxValue,\n      minValue,\n      onIncrement: increment,\n      onIncrementToMax: incrementToMax,\n      onDecrement: decrement,\n      onDecrementToMin: decrementToMin,\n      value: numberValue,\n      textValue\n    }\n  );\n\n  let [focusWithin, setFocusWithin] = useState(false);\n  let {focusWithinProps} = useFocusWithin({isDisabled, onFocusWithinChange: setFocusWithin});\n\n  let onWheel = useCallback((e) => {\n    // if on a trackpad, users can scroll in both X and Y at once, check the magnitude of the change\n    // if it's mostly in the X direction, then just return, the user probably doesn't mean to inc/dec\n    // this isn't perfect, events come in fast with small deltas and a part of the scroll may give a false indication\n    // especially if the user is scrolling near 45deg\n    if (Math.abs(e.deltaY) <= Math.abs(e.deltaX)) {\n      return;\n    }\n    if (e.deltaY > 0) {\n      increment();\n    } else if (e.deltaY < 0) {\n      decrement();\n    }\n  }, [decrement, increment]);\n  // If the input isn't supposed to receive input, disable scrolling.\n  let scrollingDisabled = isWheelDisabled || isDisabled || isReadOnly || !focusWithin;\n  useScrollWheel({onScroll: onWheel, isDisabled: scrollingDisabled}, inputRef);\n\n  // The inputMode attribute influences the software keyboard that is shown on touch devices.\n  // Browsers and operating systems are quite inconsistent about what keys are available, however.\n  // We choose between numeric and decimal based on whether we allow negative and fractional numbers,\n  // and based on testing on various devices to determine what keys are available in each inputMode.\n  let hasDecimals = (intlOptions.maximumFractionDigits ?? 0) > 0;\n  let hasNegative = (state.minValue === undefined || isNaN(state.minValue)) || state.minValue < 0;\n  let inputMode: TextInputDOMProps['inputMode'] = 'numeric';\n  if (isIPhone()) {\n    // iPhone doesn't have a minus sign in either numeric or decimal.\n    // Note this is only for iPhone, not iPad, which always has both\n    // minus and decimal in numeric.\n    if (hasNegative) {\n      inputMode = 'text';\n    } else if (hasDecimals) {\n      inputMode = 'decimal';\n    }\n  } else if (isAndroid()) {\n    // Android numeric has both a decimal point and minus key.\n    // decimal does not have a minus key.\n    if (hasNegative) {\n      inputMode = 'numeric';\n    } else if (hasDecimals) {\n      inputMode = 'decimal';\n    }\n  }\n\n  let onChange = value => {\n    if (state.validate(value)) {\n      state.setInputValue(value);\n    }\n  };\n\n  let domProps = filterDOMProps(props);\n  let onKeyDownEnter = useCallback((e) => {\n    if (e.nativeEvent.isComposing) {\n      return;\n    }\n\n    if (e.key === 'Enter') {\n      commit();\n      commitValidation();\n    } else {\n      e.continuePropagation();\n    }\n  }, [commit, commitValidation]);\n\n  let {isInvalid, validationErrors, validationDetails} = state.displayValidation;\n  let {labelProps, inputProps: textFieldProps, descriptionProps, errorMessageProps} = useFormattedTextField({\n    ...otherProps,\n    ...domProps,\n    // These props are added to a hidden input rather than the formatted textfield.\n    name: undefined,\n    form: undefined,\n    label,\n    autoFocus,\n    isDisabled,\n    isReadOnly,\n    isRequired,\n    validate: undefined,\n    [privateValidationStateProp]: state,\n    value: inputValue,\n    defaultValue: '!', // an invalid value so that form reset is ignored in onChange above\n    autoComplete: 'off',\n    'aria-label': props['aria-label'] || undefined,\n    'aria-labelledby': props['aria-labelledby'] || undefined,\n    id: inputId,\n    type: 'text', // Can't use type=\"number\" because then we can't have things like $ in the field.\n    inputMode,\n    onChange,\n    onBlur,\n    onFocus,\n    onFocusChange,\n    onKeyDown: useMemo(() => chain(onKeyDownEnter, onKeyDown), [onKeyDownEnter, onKeyDown]),\n    onKeyUp,\n    description,\n    errorMessage\n  }, state, inputRef);\n\n  useFormReset(inputRef, state.defaultNumberValue, state.setNumberValue);\n\n  let inputProps: InputHTMLAttributes<HTMLInputElement> = mergeProps(\n    spinButtonProps,\n    focusProps,\n    textFieldProps,\n    {\n      // override the spinbutton role, we can't focus a spin button with VO\n      role: null,\n      // ignore aria-roledescription on iOS so that required state will announce when it is present\n      'aria-roledescription': (!isIOS() ? stringFormatter.format('numberField') : null),\n      'aria-valuemax': null,\n      'aria-valuemin': null,\n      'aria-valuenow': null,\n      'aria-valuetext': null,\n      autoCorrect: 'off',\n      spellCheck: 'false'\n    }\n  );\n\n  if (props.validationBehavior === 'native') {\n    inputProps['aria-required'] = undefined;\n  }\n\n  let onButtonPressStart = (e) => {\n    // If focus is already on the input, keep it there so we don't hide the\n    // software keyboard when tapping the increment/decrement buttons.\n    if (document.activeElement === inputRef.current) {\n      return;\n    }\n\n    // Otherwise, when using a mouse, move focus to the input.\n    // On touch, or with a screen reader, focus the button so that the software\n    // keyboard does not appear and the screen reader cursor is not moved off the button.\n    if (e.pointerType === 'mouse') {\n      inputRef.current?.focus();\n    } else {\n      e.target.focus();\n    }\n  };\n\n  // Determine the label for the increment and decrement buttons. There are 4 cases:\n  //\n  // 1. With a visible label that is a string: aria-label: `Increase ${props.label}`\n  // 2. With a visible label that is JSX: aria-label: 'Increase', aria-labelledby: '${incrementId} ${labelId}'\n  // 3. With an aria-label: aria-label: `Increase ${props['aria-label']}`\n  // 4. With an aria-labelledby: aria-label: 'Increase', aria-labelledby: `${incrementId} ${props['aria-labelledby']}`\n  //\n  // (1) and (2) could possibly be combined and both use aria-labelledby. However, placing the label in\n  // the aria-label string rather than using aria-labelledby gives more flexibility to translators to change\n  // the order or add additional words around the label if needed.\n  let fieldLabel = props['aria-label'] || (typeof props.label === 'string' ? props.label : '');\n  let ariaLabelledby: string | undefined;\n  if (!fieldLabel) {\n    ariaLabelledby = props.label != null ? labelProps.id : props['aria-labelledby'];\n  }\n\n  let incrementId = useId();\n  let decrementId = useId();\n\n  let incrementButtonProps: AriaButtonProps = mergeProps(incButtonProps, {\n    'aria-label': incrementAriaLabel || stringFormatter.format('increase', {fieldLabel}).trim(),\n    id: ariaLabelledby && !incrementAriaLabel ? incrementId : null,\n    'aria-labelledby': ariaLabelledby && !incrementAriaLabel ? `${incrementId} ${ariaLabelledby}` : null,\n    'aria-controls': inputId,\n    excludeFromTabOrder: true,\n    preventFocusOnPress: true,\n    allowFocusWhenDisabled: true,\n    isDisabled: !state.canIncrement,\n    onPressStart: onButtonPressStart\n  });\n\n  let decrementButtonProps: AriaButtonProps = mergeProps(decButtonProps, {\n    'aria-label': decrementAriaLabel || stringFormatter.format('decrease', {fieldLabel}).trim(),\n    id: ariaLabelledby && !decrementAriaLabel ? decrementId : null,\n    'aria-labelledby': ariaLabelledby && !decrementAriaLabel ? `${decrementId} ${ariaLabelledby}` : null,\n    'aria-controls': inputId,\n    excludeFromTabOrder: true,\n    preventFocusOnPress: true,\n    allowFocusWhenDisabled: true,\n    isDisabled: !state.canDecrement,\n    onPressStart: onButtonPressStart\n  });\n\n  return {\n    groupProps: {\n      ...focusWithinProps,\n      role: 'group',\n      'aria-disabled': isDisabled,\n      'aria-invalid': isInvalid ? 'true' : undefined\n    },\n    labelProps,\n    inputProps,\n    incrementButtonProps,\n    decrementButtonProps,\n    errorMessageProps,\n    descriptionProps,\n    isInvalid,\n    validationErrors,\n    validationDetails\n  };\n}\n"],"names":[],"version":3,"file":"useNumberField.main.js.map"}
+{"mappings":"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","sources":["packages/@react-aria/numberfield/src/useNumberField.ts"],"sourcesContent":["/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {announce} from '@react-aria/live-announcer';\nimport {AriaButtonProps} from '@react-types/button';\nimport {AriaNumberFieldProps} from '@react-types/numberfield';\nimport {chain, filterDOMProps, getActiveElement, getEventTarget, isAndroid, isIOS, isIPhone, mergeProps, useFormReset, useId} from '@react-aria/utils';\nimport {\n  type ClipboardEvent,\n  type ClipboardEventHandler,\n  InputHTMLAttributes,\n  LabelHTMLAttributes,\n  RefObject,\n  useCallback,\n  useMemo,\n  useState\n} from 'react';\nimport {DOMAttributes, GroupDOMAttributes, TextInputDOMProps, ValidationResult} from '@react-types/shared';\nimport {flushSync} from 'react-dom';\n// @ts-ignore\nimport intlMessages from '../intl/*.json';\nimport {NumberFieldState} from '@react-stately/numberfield';\nimport {privateValidationStateProp} from '@react-stately/form';\nimport {useFocus, useFocusWithin, useScrollWheel} from '@react-aria/interactions';\nimport {useFormattedTextField} from '@react-aria/textfield';\nimport {\n  useLocalizedStringFormatter,\n  useNumberFormatter\n} from '@react-aria/i18n';\nimport {useSpinButton} from '@react-aria/spinbutton';\n\nexport interface NumberFieldAria extends ValidationResult {\n  /** Props for the label element. */\n  labelProps: LabelHTMLAttributes<HTMLLabelElement>,\n  /** Props for the group wrapper around the input and stepper buttons. */\n  groupProps: GroupDOMAttributes,\n  /** Props for the input element. */\n  inputProps: InputHTMLAttributes<HTMLInputElement>,\n  /** Props for the increment button, to be passed to `useButton`. */\n  incrementButtonProps: AriaButtonProps,\n  /** Props for the decrement button, to be passed to `useButton`. */\n  decrementButtonProps: AriaButtonProps,\n  /** Props for the number field's description element, if any. */\n  descriptionProps: DOMAttributes,\n  /** Props for the number field's error message element, if any. */\n  errorMessageProps: DOMAttributes\n}\n\n/**\n * Provides the behavior and accessibility implementation for a number field component.\n * Number fields allow users to enter a number, and increment or decrement the value using stepper buttons.\n */\nexport function useNumberField(props: AriaNumberFieldProps, state: NumberFieldState, inputRef: RefObject<HTMLInputElement | null>): NumberFieldAria {\n  let {\n    id,\n    decrementAriaLabel,\n    incrementAriaLabel,\n    isDisabled,\n    isReadOnly,\n    isRequired,\n    minValue,\n    maxValue,\n    autoFocus,\n    label,\n    formatOptions,\n    onBlur = () => {},\n    onFocus,\n    onFocusChange,\n    onKeyDown,\n    onKeyUp,\n    description,\n    errorMessage,\n    isWheelDisabled,\n    ...otherProps\n  } = props;\n\n  let {\n    increment,\n    incrementToMax,\n    decrement,\n    decrementToMin,\n    numberValue,\n    inputValue,\n    commit,\n    commitValidation\n  } = state;\n\n  const stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-aria/numberfield');\n  let commitAndAnnounce = useCallback(() => {\n    let oldValue = inputRef.current?.value ?? '';\n    // Set input value to normalized valid value\n    flushSync(() => {\n      commit();\n    });\n\n    if (inputRef.current?.value !== oldValue) {\n      announce(inputRef.current?.value ?? '', 'assertive');\n    }\n  }, [commit, inputRef]);\n\n  let inputId = useId(id);\n  let {focusProps} = useFocus({\n    onBlur() {\n      commitAndAnnounce();\n    }\n  });\n\n  let numberFormatter = useNumberFormatter(formatOptions);\n  let intlOptions = useMemo(() => numberFormatter.resolvedOptions(), [numberFormatter]);\n\n  // Replace negative textValue formatted using currencySign: 'accounting'\n  // with a textValue that can be announced using a minus sign.\n  let textValueFormatter = useNumberFormatter({...formatOptions, currencySign: undefined});\n  let textValue = useMemo(() => isNaN(numberValue) ? '' : textValueFormatter.format(numberValue), [textValueFormatter, numberValue]);\n\n  let {\n    spinButtonProps,\n    incrementButtonProps: incButtonProps,\n    decrementButtonProps: decButtonProps\n  } = useSpinButton(\n    {\n      isDisabled,\n      isReadOnly,\n      isRequired,\n      maxValue,\n      minValue,\n      onIncrement: increment,\n      onIncrementToMax: incrementToMax,\n      onDecrement: decrement,\n      onDecrementToMin: decrementToMin,\n      value: numberValue,\n      textValue\n    }\n  );\n\n  let [focusWithin, setFocusWithin] = useState(false);\n  let {focusWithinProps} = useFocusWithin({isDisabled, onFocusWithinChange: setFocusWithin});\n\n  let onWheel = useCallback((e) => {\n    // if on a trackpad, users can scroll in both X and Y at once, check the magnitude of the change\n    // if it's mostly in the X direction, then just return, the user probably doesn't mean to inc/dec\n    // this isn't perfect, events come in fast with small deltas and a part of the scroll may give a false indication\n    // especially if the user is scrolling near 45deg\n    if (Math.abs(e.deltaY) <= Math.abs(e.deltaX)) {\n      return;\n    }\n    if (e.deltaY > 0) {\n      increment();\n    } else if (e.deltaY < 0) {\n      decrement();\n    }\n  }, [decrement, increment]);\n  // If the input isn't supposed to receive input, disable scrolling.\n  let scrollingDisabled = isWheelDisabled || isDisabled || isReadOnly || !focusWithin;\n  useScrollWheel({onScroll: onWheel, isDisabled: scrollingDisabled}, inputRef);\n\n  // The inputMode attribute influences the software keyboard that is shown on touch devices.\n  // Browsers and operating systems are quite inconsistent about what keys are available, however.\n  // We choose between numeric and decimal based on whether we allow negative and fractional numbers,\n  // and based on testing on various devices to determine what keys are available in each inputMode.\n  let hasDecimals = (intlOptions.maximumFractionDigits ?? 0) > 0;\n  let hasNegative = (state.minValue === undefined || isNaN(state.minValue)) || state.minValue < 0;\n  let inputMode: TextInputDOMProps['inputMode'] = 'numeric';\n  if (isIPhone()) {\n    // iPhone doesn't have a minus sign in either numeric or decimal.\n    // Note this is only for iPhone, not iPad, which always has both\n    // minus and decimal in numeric.\n    if (hasNegative) {\n      inputMode = 'text';\n    } else if (hasDecimals) {\n      inputMode = 'decimal';\n    }\n  } else if (isAndroid()) {\n    // Android numeric has both a decimal point and minus key.\n    // decimal does not have a minus key.\n    if (hasNegative) {\n      inputMode = 'numeric';\n    } else if (hasDecimals) {\n      inputMode = 'decimal';\n    }\n  }\n\n  let onChange = value => {\n    if (state.validate(value)) {\n      state.setInputValue(value);\n    }\n  };\n\n  let onPaste: ClipboardEventHandler<HTMLInputElement> = (e: ClipboardEvent<HTMLInputElement>) => {\n    props.onPaste?.(e);\n    let inputElement = getEventTarget(e) as HTMLInputElement;\n    // we can only handle the case where the paste takes over the entire input, otherwise things get very complicated\n    // trying to calculate the new string based on what the paste is replacing and where in the source string it is\n    if (inputElement &&\n      ((inputElement.selectionEnd ?? -1) - (inputElement.selectionStart ?? 0)) === inputElement.value.length\n    ) {\n      e.preventDefault();\n      // commit so that the user gets to see what it formats to immediately\n      // paste happens before inputRef's value is updated, so have to prevent the default and do it ourselves\n      // spin button will then handle announcing the new value, this should work with controlled state as well\n      // because the announcement is done as a result of the new rendered input value if there is one\n      commit(e.clipboardData?.getData?.('text/plain')?.trim() ?? '');\n    }\n  };\n\n  let domProps = filterDOMProps(props);\n  let onKeyDownEnter = useCallback((e) => {\n    if (e.nativeEvent.isComposing) {\n      return;\n    }\n\n    if (e.key === 'Enter') {\n      commit();\n      commitValidation();\n    } else {\n      e.continuePropagation();\n    }\n  }, [commit, commitValidation]);\n\n  let {isInvalid, validationErrors, validationDetails} = state.displayValidation;\n  let {labelProps, inputProps: textFieldProps, descriptionProps, errorMessageProps} = useFormattedTextField({\n    ...otherProps,\n    ...domProps,\n    // These props are added to a hidden input rather than the formatted textfield.\n    name: undefined,\n    form: undefined,\n    label,\n    autoFocus,\n    isDisabled,\n    isReadOnly,\n    isRequired,\n    validate: undefined,\n    [privateValidationStateProp]: state,\n    value: inputValue,\n    defaultValue: '!', // an invalid value so that form reset is ignored in onChange above\n    autoComplete: 'off',\n    'aria-label': props['aria-label'] || undefined,\n    'aria-labelledby': props['aria-labelledby'] || undefined,\n    id: inputId,\n    type: 'text', // Can't use type=\"number\" because then we can't have things like $ in the field.\n    inputMode,\n    onChange,\n    onBlur,\n    onFocus,\n    onFocusChange,\n    onKeyDown: useMemo(() => chain(onKeyDownEnter, onKeyDown), [onKeyDownEnter, onKeyDown]),\n    onKeyUp,\n    onPaste,\n    description,\n    errorMessage\n  }, state, inputRef);\n\n  useFormReset(inputRef, state.defaultNumberValue, state.setNumberValue);\n\n  let inputProps: InputHTMLAttributes<HTMLInputElement> = mergeProps(\n    spinButtonProps,\n    focusProps,\n    textFieldProps,\n    {\n      // override the spinbutton role, we can't focus a spin button with VO\n      role: null,\n      // ignore aria-roledescription on iOS so that required state will announce when it is present\n      'aria-roledescription': (!isIOS() ? stringFormatter.format('numberField') : null),\n      'aria-valuemax': null,\n      'aria-valuemin': null,\n      'aria-valuenow': null,\n      'aria-valuetext': null,\n      autoCorrect: 'off',\n      spellCheck: 'false'\n    }\n  );\n\n  if (props.validationBehavior === 'native') {\n    inputProps['aria-required'] = undefined;\n  }\n\n  let onButtonPressStart = (e) => {\n    // If focus is already on the input, keep it there so we don't hide the\n    // software keyboard when tapping the increment/decrement buttons.\n    if (getActiveElement() === inputRef.current) {\n      return;\n    }\n\n    // Otherwise, when using a mouse, move focus to the input.\n    // On touch, or with a screen reader, focus the button so that the software\n    // keyboard does not appear and the screen reader cursor is not moved off the button.\n    if (e.pointerType === 'mouse') {\n      inputRef.current?.focus();\n    } else {\n      e.target.focus();\n    }\n  };\n\n  // Determine the label for the increment and decrement buttons. There are 4 cases:\n  //\n  // 1. With a visible label that is a string: aria-label: `Increase ${props.label}`\n  // 2. With a visible label that is JSX: aria-label: 'Increase', aria-labelledby: '${incrementId} ${labelId}'\n  // 3. With an aria-label: aria-label: `Increase ${props['aria-label']}`\n  // 4. With an aria-labelledby: aria-label: 'Increase', aria-labelledby: `${incrementId} ${props['aria-labelledby']}`\n  //\n  // (1) and (2) could possibly be combined and both use aria-labelledby. However, placing the label in\n  // the aria-label string rather than using aria-labelledby gives more flexibility to translators to change\n  // the order or add additional words around the label if needed.\n  let fieldLabel = props['aria-label'] || (typeof props.label === 'string' ? props.label : '');\n  let ariaLabelledby: string | undefined;\n  if (!fieldLabel) {\n    ariaLabelledby = props.label != null ? labelProps.id : props['aria-labelledby'];\n  }\n\n  let incrementId = useId();\n  let decrementId = useId();\n\n  let incrementButtonProps: AriaButtonProps = mergeProps(incButtonProps, {\n    'aria-label': incrementAriaLabel || stringFormatter.format('increase', {fieldLabel}).trim(),\n    id: ariaLabelledby && !incrementAriaLabel ? incrementId : null,\n    'aria-labelledby': ariaLabelledby && !incrementAriaLabel ? `${incrementId} ${ariaLabelledby}` : null,\n    'aria-controls': inputId,\n    excludeFromTabOrder: true,\n    preventFocusOnPress: true,\n    allowFocusWhenDisabled: true,\n    isDisabled: !state.canIncrement,\n    onPressStart: onButtonPressStart\n  });\n\n  let decrementButtonProps: AriaButtonProps = mergeProps(decButtonProps, {\n    'aria-label': decrementAriaLabel || stringFormatter.format('decrease', {fieldLabel}).trim(),\n    id: ariaLabelledby && !decrementAriaLabel ? decrementId : null,\n    'aria-labelledby': ariaLabelledby && !decrementAriaLabel ? `${decrementId} ${ariaLabelledby}` : null,\n    'aria-controls': inputId,\n    excludeFromTabOrder: true,\n    preventFocusOnPress: true,\n    allowFocusWhenDisabled: true,\n    isDisabled: !state.canDecrement,\n    onPressStart: onButtonPressStart\n  });\n\n  return {\n    groupProps: {\n      ...focusWithinProps,\n      role: 'group',\n      'aria-disabled': isDisabled,\n      'aria-invalid': isInvalid ? 'true' : undefined\n    },\n    labelProps,\n    inputProps,\n    incrementButtonProps,\n    decrementButtonProps,\n    errorMessageProps,\n    descriptionProps,\n    isInvalid,\n    validationErrors,\n    validationDetails\n  };\n}\n"],"names":[],"version":3,"file":"useNumberField.main.js.map"}

package/dist/useNumberField.mjs

@@ -1,6 +1,8 @@
 import $jvaNJ$intlStringsmodulejs from "./intlStrings.mjs";
-import {useId as $jvaNJ$useId, isIPhone as $jvaNJ$isIPhone, isAndroid as $jvaNJ$isAndroid, filterDOMProps as $jvaNJ$filterDOMProps, chain as $jvaNJ$chain, useFormReset as $jvaNJ$useFormReset, mergeProps as $jvaNJ$mergeProps, isIOS as $jvaNJ$isIOS} from "@react-aria/utils";
-import {useMemo as $jvaNJ$useMemo, useState as $jvaNJ$useState, useCallback as $jvaNJ$useCallback} from "react";
+import {announce as $jvaNJ$announce} from "@react-aria/live-announcer";
+import {useId as $jvaNJ$useId, isIPhone as $jvaNJ$isIPhone, isAndroid as $jvaNJ$isAndroid, getEventTarget as $jvaNJ$getEventTarget, filterDOMProps as $jvaNJ$filterDOMProps, chain as $jvaNJ$chain, useFormReset as $jvaNJ$useFormReset, mergeProps as $jvaNJ$mergeProps, isIOS as $jvaNJ$isIOS, getActiveElement as $jvaNJ$getActiveElement} from "@react-aria/utils";
+import {useCallback as $jvaNJ$useCallback, useMemo as $jvaNJ$useMemo, useState as $jvaNJ$useState} from "react";
+import {flushSync as $jvaNJ$flushSync} from "react-dom";
 import {privateValidationStateProp as $jvaNJ$privateValidationStateProp} from "@react-stately/form";
 import {useFocus as $jvaNJ$useFocus, useFocusWithin as $jvaNJ$useFocusWithin, useScrollWheel as $jvaNJ$useScrollWheel} from "@react-aria/interactions";
 import {useFormattedTextField as $jvaNJ$useFormattedTextField} from "@react-aria/textfield";
@@ -29,15 +31,30 @@ function $parcel$interopDefault(a) {
 
 
 
+
+
 function $81397a9303501bda$export$23f548e970bdf099(props, state, inputRef) {
     let { id: id, decrementAriaLabel: decrementAriaLabel, incrementAriaLabel: incrementAriaLabel, isDisabled: isDisabled, isReadOnly: isReadOnly, isRequired: isRequired, minValue: minValue, maxValue: maxValue, autoFocus: autoFocus, label: label, formatOptions: formatOptions, onBlur: onBlur = ()=>{}, onFocus: onFocus, onFocusChange: onFocusChange, onKeyDown: onKeyDown, onKeyUp: onKeyUp, description: description, errorMessage: errorMessage, isWheelDisabled: isWheelDisabled, ...otherProps } = props;
     let { increment: increment, incrementToMax: incrementToMax, decrement: decrement, decrementToMin: decrementToMin, numberValue: numberValue, inputValue: inputValue, commit: commit, commitValidation: commitValidation } = state;
     const stringFormatter = (0, $jvaNJ$useLocalizedStringFormatter)((0, ($parcel$interopDefault($jvaNJ$intlStringsmodulejs))), '@react-aria/numberfield');
+    let commitAndAnnounce = (0, $jvaNJ$useCallback)(()=>{
+        var _inputRef_current, _inputRef_current1, _inputRef_current2;
+        var _inputRef_current_value;
+        let oldValue = (_inputRef_current_value = (_inputRef_current = inputRef.current) === null || _inputRef_current === void 0 ? void 0 : _inputRef_current.value) !== null && _inputRef_current_value !== void 0 ? _inputRef_current_value : '';
+        // Set input value to normalized valid value
+        (0, $jvaNJ$flushSync)(()=>{
+            commit();
+        });
+        var _inputRef_current_value1;
+        if (((_inputRef_current1 = inputRef.current) === null || _inputRef_current1 === void 0 ? void 0 : _inputRef_current1.value) !== oldValue) (0, $jvaNJ$announce)((_inputRef_current_value1 = (_inputRef_current2 = inputRef.current) === null || _inputRef_current2 === void 0 ? void 0 : _inputRef_current2.value) !== null && _inputRef_current_value1 !== void 0 ? _inputRef_current_value1 : '', 'assertive');
+    }, [
+        commit,
+        inputRef
+    ]);
     let inputId = (0, $jvaNJ$useId)(id);
     let { focusProps: focusProps } = (0, $jvaNJ$useFocus)({
         onBlur () {
-            // Set input value to normalized valid value
-            commit();
+            commitAndAnnounce();
         }
     });
     let numberFormatter = (0, $jvaNJ$useNumberFormatter)(formatOptions);
@@ -113,6 +130,24 @@ function $81397a9303501bda$export$23f548e970bdf099(props, state, inputRef) {
     let onChange = (value)=>{
         if (state.validate(value)) state.setInputValue(value);
     };
+    let onPaste = (e)=>{
+        var _props_onPaste;
+        (_props_onPaste = props.onPaste) === null || _props_onPaste === void 0 ? void 0 : _props_onPaste.call(props, e);
+        let inputElement = (0, $jvaNJ$getEventTarget)(e);
+        var _inputElement_selectionEnd, _inputElement_selectionStart;
+        // we can only handle the case where the paste takes over the entire input, otherwise things get very complicated
+        // trying to calculate the new string based on what the paste is replacing and where in the source string it is
+        if (inputElement && ((_inputElement_selectionEnd = inputElement.selectionEnd) !== null && _inputElement_selectionEnd !== void 0 ? _inputElement_selectionEnd : -1) - ((_inputElement_selectionStart = inputElement.selectionStart) !== null && _inputElement_selectionStart !== void 0 ? _inputElement_selectionStart : 0) === inputElement.value.length) {
+            var _e_clipboardData_getData, _e_clipboardData_getData1, _e_clipboardData;
+            e.preventDefault();
+            var _e_clipboardData_getData_trim;
+            // commit so that the user gets to see what it formats to immediately
+            // paste happens before inputRef's value is updated, so have to prevent the default and do it ourselves
+            // spin button will then handle announcing the new value, this should work with controlled state as well
+            // because the announcement is done as a result of the new rendered input value if there is one
+            commit((_e_clipboardData_getData_trim = (_e_clipboardData = e.clipboardData) === null || _e_clipboardData === void 0 ? void 0 : (_e_clipboardData_getData1 = _e_clipboardData.getData) === null || _e_clipboardData_getData1 === void 0 ? void 0 : (_e_clipboardData_getData = _e_clipboardData_getData1.call(_e_clipboardData, 'text/plain')) === null || _e_clipboardData_getData === void 0 ? void 0 : _e_clipboardData_getData.trim()) !== null && _e_clipboardData_getData_trim !== void 0 ? _e_clipboardData_getData_trim : '');
+        }
+    };
     let domProps = (0, $jvaNJ$filterDOMProps)(props);
     let onKeyDownEnter = (0, $jvaNJ$useCallback)((e)=>{
         if (e.nativeEvent.isComposing) return;
@@ -155,6 +190,7 @@ function $81397a9303501bda$export$23f548e970bdf099(props, state, inputRef) {
             onKeyDown
         ]),
         onKeyUp: onKeyUp,
+        onPaste: onPaste,
         description: description,
         errorMessage: errorMessage
     }, state, inputRef);
@@ -176,7 +212,7 @@ function $81397a9303501bda$export$23f548e970bdf099(props, state, inputRef) {
         var _inputRef_current;
         // If focus is already on the input, keep it there so we don't hide the
         // software keyboard when tapping the increment/decrement buttons.
-        if (document.activeElement === inputRef.current) return;
+        if ((0, $jvaNJ$getActiveElement)() === inputRef.current) return;
         // Otherwise, when using a mouse, move focus to the input.
         // On touch, or with a screen reader, focus the button so that the software
         // keyboard does not appear and the screen reader cursor is not moved off the button.

package/dist/useNumberField.module.js

@@ -1,6 +1,8 @@
 import $jvaNJ$intlStringsmodulejs from "./intlStrings.module.js";
-import {useId as $jvaNJ$useId, isIPhone as $jvaNJ$isIPhone, isAndroid as $jvaNJ$isAndroid, filterDOMProps as $jvaNJ$filterDOMProps, chain as $jvaNJ$chain, useFormReset as $jvaNJ$useFormReset, mergeProps as $jvaNJ$mergeProps, isIOS as $jvaNJ$isIOS} from "@react-aria/utils";
-import {useMemo as $jvaNJ$useMemo, useState as $jvaNJ$useState, useCallback as $jvaNJ$useCallback} from "react";
+import {announce as $jvaNJ$announce} from "@react-aria/live-announcer";
+import {useId as $jvaNJ$useId, isIPhone as $jvaNJ$isIPhone, isAndroid as $jvaNJ$isAndroid, getEventTarget as $jvaNJ$getEventTarget, filterDOMProps as $jvaNJ$filterDOMProps, chain as $jvaNJ$chain, useFormReset as $jvaNJ$useFormReset, mergeProps as $jvaNJ$mergeProps, isIOS as $jvaNJ$isIOS, getActiveElement as $jvaNJ$getActiveElement} from "@react-aria/utils";
+import {useCallback as $jvaNJ$useCallback, useMemo as $jvaNJ$useMemo, useState as $jvaNJ$useState} from "react";
+import {flushSync as $jvaNJ$flushSync} from "react-dom";
 import {privateValidationStateProp as $jvaNJ$privateValidationStateProp} from "@react-stately/form";
 import {useFocus as $jvaNJ$useFocus, useFocusWithin as $jvaNJ$useFocusWithin, useScrollWheel as $jvaNJ$useScrollWheel} from "@react-aria/interactions";
 import {useFormattedTextField as $jvaNJ$useFormattedTextField} from "@react-aria/textfield";
@@ -29,15 +31,30 @@ function $parcel$interopDefault(a) {
 
 
 
+
+
 function $81397a9303501bda$export$23f548e970bdf099(props, state, inputRef) {
     let { id: id, decrementAriaLabel: decrementAriaLabel, incrementAriaLabel: incrementAriaLabel, isDisabled: isDisabled, isReadOnly: isReadOnly, isRequired: isRequired, minValue: minValue, maxValue: maxValue, autoFocus: autoFocus, label: label, formatOptions: formatOptions, onBlur: onBlur = ()=>{}, onFocus: onFocus, onFocusChange: onFocusChange, onKeyDown: onKeyDown, onKeyUp: onKeyUp, description: description, errorMessage: errorMessage, isWheelDisabled: isWheelDisabled, ...otherProps } = props;
     let { increment: increment, incrementToMax: incrementToMax, decrement: decrement, decrementToMin: decrementToMin, numberValue: numberValue, inputValue: inputValue, commit: commit, commitValidation: commitValidation } = state;
     const stringFormatter = (0, $jvaNJ$useLocalizedStringFormatter)((0, ($parcel$interopDefault($jvaNJ$intlStringsmodulejs))), '@react-aria/numberfield');
+    let commitAndAnnounce = (0, $jvaNJ$useCallback)(()=>{
+        var _inputRef_current, _inputRef_current1, _inputRef_current2;
+        var _inputRef_current_value;
+        let oldValue = (_inputRef_current_value = (_inputRef_current = inputRef.current) === null || _inputRef_current === void 0 ? void 0 : _inputRef_current.value) !== null && _inputRef_current_value !== void 0 ? _inputRef_current_value : '';
+        // Set input value to normalized valid value
+        (0, $jvaNJ$flushSync)(()=>{
+            commit();
+        });
+        var _inputRef_current_value1;
+        if (((_inputRef_current1 = inputRef.current) === null || _inputRef_current1 === void 0 ? void 0 : _inputRef_current1.value) !== oldValue) (0, $jvaNJ$announce)((_inputRef_current_value1 = (_inputRef_current2 = inputRef.current) === null || _inputRef_current2 === void 0 ? void 0 : _inputRef_current2.value) !== null && _inputRef_current_value1 !== void 0 ? _inputRef_current_value1 : '', 'assertive');
+    }, [
+        commit,
+        inputRef
+    ]);
     let inputId = (0, $jvaNJ$useId)(id);
     let { focusProps: focusProps } = (0, $jvaNJ$useFocus)({
         onBlur () {
-            // Set input value to normalized valid value
-            commit();
+            commitAndAnnounce();
         }
     });
     let numberFormatter = (0, $jvaNJ$useNumberFormatter)(formatOptions);
@@ -113,6 +130,24 @@ function $81397a9303501bda$export$23f548e970bdf099(props, state, inputRef) {
     let onChange = (value)=>{
         if (state.validate(value)) state.setInputValue(value);
     };
+    let onPaste = (e)=>{
+        var _props_onPaste;
+        (_props_onPaste = props.onPaste) === null || _props_onPaste === void 0 ? void 0 : _props_onPaste.call(props, e);
+        let inputElement = (0, $jvaNJ$getEventTarget)(e);
+        var _inputElement_selectionEnd, _inputElement_selectionStart;
+        // we can only handle the case where the paste takes over the entire input, otherwise things get very complicated
+        // trying to calculate the new string based on what the paste is replacing and where in the source string it is
+        if (inputElement && ((_inputElement_selectionEnd = inputElement.selectionEnd) !== null && _inputElement_selectionEnd !== void 0 ? _inputElement_selectionEnd : -1) - ((_inputElement_selectionStart = inputElement.selectionStart) !== null && _inputElement_selectionStart !== void 0 ? _inputElement_selectionStart : 0) === inputElement.value.length) {
+            var _e_clipboardData_getData, _e_clipboardData_getData1, _e_clipboardData;
+            e.preventDefault();
+            var _e_clipboardData_getData_trim;
+            // commit so that the user gets to see what it formats to immediately
+            // paste happens before inputRef's value is updated, so have to prevent the default and do it ourselves
+            // spin button will then handle announcing the new value, this should work with controlled state as well
+            // because the announcement is done as a result of the new rendered input value if there is one
+            commit((_e_clipboardData_getData_trim = (_e_clipboardData = e.clipboardData) === null || _e_clipboardData === void 0 ? void 0 : (_e_clipboardData_getData1 = _e_clipboardData.getData) === null || _e_clipboardData_getData1 === void 0 ? void 0 : (_e_clipboardData_getData = _e_clipboardData_getData1.call(_e_clipboardData, 'text/plain')) === null || _e_clipboardData_getData === void 0 ? void 0 : _e_clipboardData_getData.trim()) !== null && _e_clipboardData_getData_trim !== void 0 ? _e_clipboardData_getData_trim : '');
+        }
+    };
     let domProps = (0, $jvaNJ$filterDOMProps)(props);
     let onKeyDownEnter = (0, $jvaNJ$useCallback)((e)=>{
         if (e.nativeEvent.isComposing) return;
@@ -155,6 +190,7 @@ function $81397a9303501bda$export$23f548e970bdf099(props, state, inputRef) {
             onKeyDown
         ]),
         onKeyUp: onKeyUp,
+        onPaste: onPaste,
         description: description,
         errorMessage: errorMessage
     }, state, inputRef);
@@ -176,7 +212,7 @@ function $81397a9303501bda$export$23f548e970bdf099(props, state, inputRef) {
         var _inputRef_current;
         // If focus is already on the input, keep it there so we don't hide the
         // software keyboard when tapping the increment/decrement buttons.
-        if (document.activeElement === inputRef.current) return;
+        if ((0, $jvaNJ$getActiveElement)() === inputRef.current) return;
         // Otherwise, when using a mouse, move focus to the input.
         // On touch, or with a screen reader, focus the button so that the software
         // keyboard does not appear and the screen reader cursor is not moved off the button.

package/dist/useNumberField.module.js.map

@@ -1 +1 @@
-{"mappings":"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","sources":["packages/@react-aria/numberfield/src/useNumberField.ts"],"sourcesContent":["/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {AriaButtonProps} from '@react-types/button';\nimport {AriaNumberFieldProps} from '@react-types/numberfield';\nimport {chain, filterDOMProps, isAndroid, isIOS, isIPhone, mergeProps, useFormReset, useId} from '@react-aria/utils';\nimport {DOMAttributes, GroupDOMAttributes, TextInputDOMProps, ValidationResult} from '@react-types/shared';\nimport {\n  InputHTMLAttributes,\n  LabelHTMLAttributes,\n  RefObject,\n  useCallback,\n  useMemo,\n  useState\n} from 'react';\n// @ts-ignore\nimport intlMessages from '../intl/*.json';\nimport {NumberFieldState} from '@react-stately/numberfield';\nimport {privateValidationStateProp} from '@react-stately/form';\nimport {useFocus, useFocusWithin, useScrollWheel} from '@react-aria/interactions';\nimport {useFormattedTextField} from '@react-aria/textfield';\nimport {\n  useLocalizedStringFormatter,\n  useNumberFormatter\n} from '@react-aria/i18n';\nimport {useSpinButton} from '@react-aria/spinbutton';\n\nexport interface NumberFieldAria extends ValidationResult {\n  /** Props for the label element. */\n  labelProps: LabelHTMLAttributes<HTMLLabelElement>,\n  /** Props for the group wrapper around the input and stepper buttons. */\n  groupProps: GroupDOMAttributes,\n  /** Props for the input element. */\n  inputProps: InputHTMLAttributes<HTMLInputElement>,\n  /** Props for the increment button, to be passed to `useButton`. */\n  incrementButtonProps: AriaButtonProps,\n  /** Props for the decrement button, to be passed to `useButton`. */\n  decrementButtonProps: AriaButtonProps,\n  /** Props for the number field's description element, if any. */\n  descriptionProps: DOMAttributes,\n  /** Props for the number field's error message element, if any. */\n  errorMessageProps: DOMAttributes\n}\n\n/**\n * Provides the behavior and accessibility implementation for a number field component.\n * Number fields allow users to enter a number, and increment or decrement the value using stepper buttons.\n */\nexport function useNumberField(props: AriaNumberFieldProps, state: NumberFieldState, inputRef: RefObject<HTMLInputElement | null>): NumberFieldAria {\n  let {\n    id,\n    decrementAriaLabel,\n    incrementAriaLabel,\n    isDisabled,\n    isReadOnly,\n    isRequired,\n    minValue,\n    maxValue,\n    autoFocus,\n    label,\n    formatOptions,\n    onBlur = () => {},\n    onFocus,\n    onFocusChange,\n    onKeyDown,\n    onKeyUp,\n    description,\n    errorMessage,\n    isWheelDisabled,\n    ...otherProps\n  } = props;\n\n  let {\n    increment,\n    incrementToMax,\n    decrement,\n    decrementToMin,\n    numberValue,\n    inputValue,\n    commit,\n    commitValidation\n  } = state;\n\n  const stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-aria/numberfield');\n\n  let inputId = useId(id);\n  let {focusProps} = useFocus({\n    onBlur() {\n      // Set input value to normalized valid value\n      commit();\n    }\n  });\n\n  let numberFormatter = useNumberFormatter(formatOptions);\n  let intlOptions = useMemo(() => numberFormatter.resolvedOptions(), [numberFormatter]);\n\n  // Replace negative textValue formatted using currencySign: 'accounting'\n  // with a textValue that can be announced using a minus sign.\n  let textValueFormatter = useNumberFormatter({...formatOptions, currencySign: undefined});\n  let textValue = useMemo(() => isNaN(numberValue) ? '' : textValueFormatter.format(numberValue), [textValueFormatter, numberValue]);\n\n  let {\n    spinButtonProps,\n    incrementButtonProps: incButtonProps,\n    decrementButtonProps: decButtonProps\n  } = useSpinButton(\n    {\n      isDisabled,\n      isReadOnly,\n      isRequired,\n      maxValue,\n      minValue,\n      onIncrement: increment,\n      onIncrementToMax: incrementToMax,\n      onDecrement: decrement,\n      onDecrementToMin: decrementToMin,\n      value: numberValue,\n      textValue\n    }\n  );\n\n  let [focusWithin, setFocusWithin] = useState(false);\n  let {focusWithinProps} = useFocusWithin({isDisabled, onFocusWithinChange: setFocusWithin});\n\n  let onWheel = useCallback((e) => {\n    // if on a trackpad, users can scroll in both X and Y at once, check the magnitude of the change\n    // if it's mostly in the X direction, then just return, the user probably doesn't mean to inc/dec\n    // this isn't perfect, events come in fast with small deltas and a part of the scroll may give a false indication\n    // especially if the user is scrolling near 45deg\n    if (Math.abs(e.deltaY) <= Math.abs(e.deltaX)) {\n      return;\n    }\n    if (e.deltaY > 0) {\n      increment();\n    } else if (e.deltaY < 0) {\n      decrement();\n    }\n  }, [decrement, increment]);\n  // If the input isn't supposed to receive input, disable scrolling.\n  let scrollingDisabled = isWheelDisabled || isDisabled || isReadOnly || !focusWithin;\n  useScrollWheel({onScroll: onWheel, isDisabled: scrollingDisabled}, inputRef);\n\n  // The inputMode attribute influences the software keyboard that is shown on touch devices.\n  // Browsers and operating systems are quite inconsistent about what keys are available, however.\n  // We choose between numeric and decimal based on whether we allow negative and fractional numbers,\n  // and based on testing on various devices to determine what keys are available in each inputMode.\n  let hasDecimals = (intlOptions.maximumFractionDigits ?? 0) > 0;\n  let hasNegative = (state.minValue === undefined || isNaN(state.minValue)) || state.minValue < 0;\n  let inputMode: TextInputDOMProps['inputMode'] = 'numeric';\n  if (isIPhone()) {\n    // iPhone doesn't have a minus sign in either numeric or decimal.\n    // Note this is only for iPhone, not iPad, which always has both\n    // minus and decimal in numeric.\n    if (hasNegative) {\n      inputMode = 'text';\n    } else if (hasDecimals) {\n      inputMode = 'decimal';\n    }\n  } else if (isAndroid()) {\n    // Android numeric has both a decimal point and minus key.\n    // decimal does not have a minus key.\n    if (hasNegative) {\n      inputMode = 'numeric';\n    } else if (hasDecimals) {\n      inputMode = 'decimal';\n    }\n  }\n\n  let onChange = value => {\n    if (state.validate(value)) {\n      state.setInputValue(value);\n    }\n  };\n\n  let domProps = filterDOMProps(props);\n  let onKeyDownEnter = useCallback((e) => {\n    if (e.nativeEvent.isComposing) {\n      return;\n    }\n\n    if (e.key === 'Enter') {\n      commit();\n      commitValidation();\n    } else {\n      e.continuePropagation();\n    }\n  }, [commit, commitValidation]);\n\n  let {isInvalid, validationErrors, validationDetails} = state.displayValidation;\n  let {labelProps, inputProps: textFieldProps, descriptionProps, errorMessageProps} = useFormattedTextField({\n    ...otherProps,\n    ...domProps,\n    // These props are added to a hidden input rather than the formatted textfield.\n    name: undefined,\n    form: undefined,\n    label,\n    autoFocus,\n    isDisabled,\n    isReadOnly,\n    isRequired,\n    validate: undefined,\n    [privateValidationStateProp]: state,\n    value: inputValue,\n    defaultValue: '!', // an invalid value so that form reset is ignored in onChange above\n    autoComplete: 'off',\n    'aria-label': props['aria-label'] || undefined,\n    'aria-labelledby': props['aria-labelledby'] || undefined,\n    id: inputId,\n    type: 'text', // Can't use type=\"number\" because then we can't have things like $ in the field.\n    inputMode,\n    onChange,\n    onBlur,\n    onFocus,\n    onFocusChange,\n    onKeyDown: useMemo(() => chain(onKeyDownEnter, onKeyDown), [onKeyDownEnter, onKeyDown]),\n    onKeyUp,\n    description,\n    errorMessage\n  }, state, inputRef);\n\n  useFormReset(inputRef, state.defaultNumberValue, state.setNumberValue);\n\n  let inputProps: InputHTMLAttributes<HTMLInputElement> = mergeProps(\n    spinButtonProps,\n    focusProps,\n    textFieldProps,\n    {\n      // override the spinbutton role, we can't focus a spin button with VO\n      role: null,\n      // ignore aria-roledescription on iOS so that required state will announce when it is present\n      'aria-roledescription': (!isIOS() ? stringFormatter.format('numberField') : null),\n      'aria-valuemax': null,\n      'aria-valuemin': null,\n      'aria-valuenow': null,\n      'aria-valuetext': null,\n      autoCorrect: 'off',\n      spellCheck: 'false'\n    }\n  );\n\n  if (props.validationBehavior === 'native') {\n    inputProps['aria-required'] = undefined;\n  }\n\n  let onButtonPressStart = (e) => {\n    // If focus is already on the input, keep it there so we don't hide the\n    // software keyboard when tapping the increment/decrement buttons.\n    if (document.activeElement === inputRef.current) {\n      return;\n    }\n\n    // Otherwise, when using a mouse, move focus to the input.\n    // On touch, or with a screen reader, focus the button so that the software\n    // keyboard does not appear and the screen reader cursor is not moved off the button.\n    if (e.pointerType === 'mouse') {\n      inputRef.current?.focus();\n    } else {\n      e.target.focus();\n    }\n  };\n\n  // Determine the label for the increment and decrement buttons. There are 4 cases:\n  //\n  // 1. With a visible label that is a string: aria-label: `Increase ${props.label}`\n  // 2. With a visible label that is JSX: aria-label: 'Increase', aria-labelledby: '${incrementId} ${labelId}'\n  // 3. With an aria-label: aria-label: `Increase ${props['aria-label']}`\n  // 4. With an aria-labelledby: aria-label: 'Increase', aria-labelledby: `${incrementId} ${props['aria-labelledby']}`\n  //\n  // (1) and (2) could possibly be combined and both use aria-labelledby. However, placing the label in\n  // the aria-label string rather than using aria-labelledby gives more flexibility to translators to change\n  // the order or add additional words around the label if needed.\n  let fieldLabel = props['aria-label'] || (typeof props.label === 'string' ? props.label : '');\n  let ariaLabelledby: string | undefined;\n  if (!fieldLabel) {\n    ariaLabelledby = props.label != null ? labelProps.id : props['aria-labelledby'];\n  }\n\n  let incrementId = useId();\n  let decrementId = useId();\n\n  let incrementButtonProps: AriaButtonProps = mergeProps(incButtonProps, {\n    'aria-label': incrementAriaLabel || stringFormatter.format('increase', {fieldLabel}).trim(),\n    id: ariaLabelledby && !incrementAriaLabel ? incrementId : null,\n    'aria-labelledby': ariaLabelledby && !incrementAriaLabel ? `${incrementId} ${ariaLabelledby}` : null,\n    'aria-controls': inputId,\n    excludeFromTabOrder: true,\n    preventFocusOnPress: true,\n    allowFocusWhenDisabled: true,\n    isDisabled: !state.canIncrement,\n    onPressStart: onButtonPressStart\n  });\n\n  let decrementButtonProps: AriaButtonProps = mergeProps(decButtonProps, {\n    'aria-label': decrementAriaLabel || stringFormatter.format('decrease', {fieldLabel}).trim(),\n    id: ariaLabelledby && !decrementAriaLabel ? decrementId : null,\n    'aria-labelledby': ariaLabelledby && !decrementAriaLabel ? `${decrementId} ${ariaLabelledby}` : null,\n    'aria-controls': inputId,\n    excludeFromTabOrder: true,\n    preventFocusOnPress: true,\n    allowFocusWhenDisabled: true,\n    isDisabled: !state.canDecrement,\n    onPressStart: onButtonPressStart\n  });\n\n  return {\n    groupProps: {\n      ...focusWithinProps,\n      role: 'group',\n      'aria-disabled': isDisabled,\n      'aria-invalid': isInvalid ? 'true' : undefined\n    },\n    labelProps,\n    inputProps,\n    incrementButtonProps,\n    decrementButtonProps,\n    errorMessageProps,\n    descriptionProps,\n    isInvalid,\n    validationErrors,\n    validationDetails\n  };\n}\n"],"names":[],"version":3,"file":"useNumberField.module.js.map"}
+{"mappings":"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","sources":["packages/@react-aria/numberfield/src/useNumberField.ts"],"sourcesContent":["/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {announce} from '@react-aria/live-announcer';\nimport {AriaButtonProps} from '@react-types/button';\nimport {AriaNumberFieldProps} from '@react-types/numberfield';\nimport {chain, filterDOMProps, getActiveElement, getEventTarget, isAndroid, isIOS, isIPhone, mergeProps, useFormReset, useId} from '@react-aria/utils';\nimport {\n  type ClipboardEvent,\n  type ClipboardEventHandler,\n  InputHTMLAttributes,\n  LabelHTMLAttributes,\n  RefObject,\n  useCallback,\n  useMemo,\n  useState\n} from 'react';\nimport {DOMAttributes, GroupDOMAttributes, TextInputDOMProps, ValidationResult} from '@react-types/shared';\nimport {flushSync} from 'react-dom';\n// @ts-ignore\nimport intlMessages from '../intl/*.json';\nimport {NumberFieldState} from '@react-stately/numberfield';\nimport {privateValidationStateProp} from '@react-stately/form';\nimport {useFocus, useFocusWithin, useScrollWheel} from '@react-aria/interactions';\nimport {useFormattedTextField} from '@react-aria/textfield';\nimport {\n  useLocalizedStringFormatter,\n  useNumberFormatter\n} from '@react-aria/i18n';\nimport {useSpinButton} from '@react-aria/spinbutton';\n\nexport interface NumberFieldAria extends ValidationResult {\n  /** Props for the label element. */\n  labelProps: LabelHTMLAttributes<HTMLLabelElement>,\n  /** Props for the group wrapper around the input and stepper buttons. */\n  groupProps: GroupDOMAttributes,\n  /** Props for the input element. */\n  inputProps: InputHTMLAttributes<HTMLInputElement>,\n  /** Props for the increment button, to be passed to `useButton`. */\n  incrementButtonProps: AriaButtonProps,\n  /** Props for the decrement button, to be passed to `useButton`. */\n  decrementButtonProps: AriaButtonProps,\n  /** Props for the number field's description element, if any. */\n  descriptionProps: DOMAttributes,\n  /** Props for the number field's error message element, if any. */\n  errorMessageProps: DOMAttributes\n}\n\n/**\n * Provides the behavior and accessibility implementation for a number field component.\n * Number fields allow users to enter a number, and increment or decrement the value using stepper buttons.\n */\nexport function useNumberField(props: AriaNumberFieldProps, state: NumberFieldState, inputRef: RefObject<HTMLInputElement | null>): NumberFieldAria {\n  let {\n    id,\n    decrementAriaLabel,\n    incrementAriaLabel,\n    isDisabled,\n    isReadOnly,\n    isRequired,\n    minValue,\n    maxValue,\n    autoFocus,\n    label,\n    formatOptions,\n    onBlur = () => {},\n    onFocus,\n    onFocusChange,\n    onKeyDown,\n    onKeyUp,\n    description,\n    errorMessage,\n    isWheelDisabled,\n    ...otherProps\n  } = props;\n\n  let {\n    increment,\n    incrementToMax,\n    decrement,\n    decrementToMin,\n    numberValue,\n    inputValue,\n    commit,\n    commitValidation\n  } = state;\n\n  const stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-aria/numberfield');\n  let commitAndAnnounce = useCallback(() => {\n    let oldValue = inputRef.current?.value ?? '';\n    // Set input value to normalized valid value\n    flushSync(() => {\n      commit();\n    });\n\n    if (inputRef.current?.value !== oldValue) {\n      announce(inputRef.current?.value ?? '', 'assertive');\n    }\n  }, [commit, inputRef]);\n\n  let inputId = useId(id);\n  let {focusProps} = useFocus({\n    onBlur() {\n      commitAndAnnounce();\n    }\n  });\n\n  let numberFormatter = useNumberFormatter(formatOptions);\n  let intlOptions = useMemo(() => numberFormatter.resolvedOptions(), [numberFormatter]);\n\n  // Replace negative textValue formatted using currencySign: 'accounting'\n  // with a textValue that can be announced using a minus sign.\n  let textValueFormatter = useNumberFormatter({...formatOptions, currencySign: undefined});\n  let textValue = useMemo(() => isNaN(numberValue) ? '' : textValueFormatter.format(numberValue), [textValueFormatter, numberValue]);\n\n  let {\n    spinButtonProps,\n    incrementButtonProps: incButtonProps,\n    decrementButtonProps: decButtonProps\n  } = useSpinButton(\n    {\n      isDisabled,\n      isReadOnly,\n      isRequired,\n      maxValue,\n      minValue,\n      onIncrement: increment,\n      onIncrementToMax: incrementToMax,\n      onDecrement: decrement,\n      onDecrementToMin: decrementToMin,\n      value: numberValue,\n      textValue\n    }\n  );\n\n  let [focusWithin, setFocusWithin] = useState(false);\n  let {focusWithinProps} = useFocusWithin({isDisabled, onFocusWithinChange: setFocusWithin});\n\n  let onWheel = useCallback((e) => {\n    // if on a trackpad, users can scroll in both X and Y at once, check the magnitude of the change\n    // if it's mostly in the X direction, then just return, the user probably doesn't mean to inc/dec\n    // this isn't perfect, events come in fast with small deltas and a part of the scroll may give a false indication\n    // especially if the user is scrolling near 45deg\n    if (Math.abs(e.deltaY) <= Math.abs(e.deltaX)) {\n      return;\n    }\n    if (e.deltaY > 0) {\n      increment();\n    } else if (e.deltaY < 0) {\n      decrement();\n    }\n  }, [decrement, increment]);\n  // If the input isn't supposed to receive input, disable scrolling.\n  let scrollingDisabled = isWheelDisabled || isDisabled || isReadOnly || !focusWithin;\n  useScrollWheel({onScroll: onWheel, isDisabled: scrollingDisabled}, inputRef);\n\n  // The inputMode attribute influences the software keyboard that is shown on touch devices.\n  // Browsers and operating systems are quite inconsistent about what keys are available, however.\n  // We choose between numeric and decimal based on whether we allow negative and fractional numbers,\n  // and based on testing on various devices to determine what keys are available in each inputMode.\n  let hasDecimals = (intlOptions.maximumFractionDigits ?? 0) > 0;\n  let hasNegative = (state.minValue === undefined || isNaN(state.minValue)) || state.minValue < 0;\n  let inputMode: TextInputDOMProps['inputMode'] = 'numeric';\n  if (isIPhone()) {\n    // iPhone doesn't have a minus sign in either numeric or decimal.\n    // Note this is only for iPhone, not iPad, which always has both\n    // minus and decimal in numeric.\n    if (hasNegative) {\n      inputMode = 'text';\n    } else if (hasDecimals) {\n      inputMode = 'decimal';\n    }\n  } else if (isAndroid()) {\n    // Android numeric has both a decimal point and minus key.\n    // decimal does not have a minus key.\n    if (hasNegative) {\n      inputMode = 'numeric';\n    } else if (hasDecimals) {\n      inputMode = 'decimal';\n    }\n  }\n\n  let onChange = value => {\n    if (state.validate(value)) {\n      state.setInputValue(value);\n    }\n  };\n\n  let onPaste: ClipboardEventHandler<HTMLInputElement> = (e: ClipboardEvent<HTMLInputElement>) => {\n    props.onPaste?.(e);\n    let inputElement = getEventTarget(e) as HTMLInputElement;\n    // we can only handle the case where the paste takes over the entire input, otherwise things get very complicated\n    // trying to calculate the new string based on what the paste is replacing and where in the source string it is\n    if (inputElement &&\n      ((inputElement.selectionEnd ?? -1) - (inputElement.selectionStart ?? 0)) === inputElement.value.length\n    ) {\n      e.preventDefault();\n      // commit so that the user gets to see what it formats to immediately\n      // paste happens before inputRef's value is updated, so have to prevent the default and do it ourselves\n      // spin button will then handle announcing the new value, this should work with controlled state as well\n      // because the announcement is done as a result of the new rendered input value if there is one\n      commit(e.clipboardData?.getData?.('text/plain')?.trim() ?? '');\n    }\n  };\n\n  let domProps = filterDOMProps(props);\n  let onKeyDownEnter = useCallback((e) => {\n    if (e.nativeEvent.isComposing) {\n      return;\n    }\n\n    if (e.key === 'Enter') {\n      commit();\n      commitValidation();\n    } else {\n      e.continuePropagation();\n    }\n  }, [commit, commitValidation]);\n\n  let {isInvalid, validationErrors, validationDetails} = state.displayValidation;\n  let {labelProps, inputProps: textFieldProps, descriptionProps, errorMessageProps} = useFormattedTextField({\n    ...otherProps,\n    ...domProps,\n    // These props are added to a hidden input rather than the formatted textfield.\n    name: undefined,\n    form: undefined,\n    label,\n    autoFocus,\n    isDisabled,\n    isReadOnly,\n    isRequired,\n    validate: undefined,\n    [privateValidationStateProp]: state,\n    value: inputValue,\n    defaultValue: '!', // an invalid value so that form reset is ignored in onChange above\n    autoComplete: 'off',\n    'aria-label': props['aria-label'] || undefined,\n    'aria-labelledby': props['aria-labelledby'] || undefined,\n    id: inputId,\n    type: 'text', // Can't use type=\"number\" because then we can't have things like $ in the field.\n    inputMode,\n    onChange,\n    onBlur,\n    onFocus,\n    onFocusChange,\n    onKeyDown: useMemo(() => chain(onKeyDownEnter, onKeyDown), [onKeyDownEnter, onKeyDown]),\n    onKeyUp,\n    onPaste,\n    description,\n    errorMessage\n  }, state, inputRef);\n\n  useFormReset(inputRef, state.defaultNumberValue, state.setNumberValue);\n\n  let inputProps: InputHTMLAttributes<HTMLInputElement> = mergeProps(\n    spinButtonProps,\n    focusProps,\n    textFieldProps,\n    {\n      // override the spinbutton role, we can't focus a spin button with VO\n      role: null,\n      // ignore aria-roledescription on iOS so that required state will announce when it is present\n      'aria-roledescription': (!isIOS() ? stringFormatter.format('numberField') : null),\n      'aria-valuemax': null,\n      'aria-valuemin': null,\n      'aria-valuenow': null,\n      'aria-valuetext': null,\n      autoCorrect: 'off',\n      spellCheck: 'false'\n    }\n  );\n\n  if (props.validationBehavior === 'native') {\n    inputProps['aria-required'] = undefined;\n  }\n\n  let onButtonPressStart = (e) => {\n    // If focus is already on the input, keep it there so we don't hide the\n    // software keyboard when tapping the increment/decrement buttons.\n    if (getActiveElement() === inputRef.current) {\n      return;\n    }\n\n    // Otherwise, when using a mouse, move focus to the input.\n    // On touch, or with a screen reader, focus the button so that the software\n    // keyboard does not appear and the screen reader cursor is not moved off the button.\n    if (e.pointerType === 'mouse') {\n      inputRef.current?.focus();\n    } else {\n      e.target.focus();\n    }\n  };\n\n  // Determine the label for the increment and decrement buttons. There are 4 cases:\n  //\n  // 1. With a visible label that is a string: aria-label: `Increase ${props.label}`\n  // 2. With a visible label that is JSX: aria-label: 'Increase', aria-labelledby: '${incrementId} ${labelId}'\n  // 3. With an aria-label: aria-label: `Increase ${props['aria-label']}`\n  // 4. With an aria-labelledby: aria-label: 'Increase', aria-labelledby: `${incrementId} ${props['aria-labelledby']}`\n  //\n  // (1) and (2) could possibly be combined and both use aria-labelledby. However, placing the label in\n  // the aria-label string rather than using aria-labelledby gives more flexibility to translators to change\n  // the order or add additional words around the label if needed.\n  let fieldLabel = props['aria-label'] || (typeof props.label === 'string' ? props.label : '');\n  let ariaLabelledby: string | undefined;\n  if (!fieldLabel) {\n    ariaLabelledby = props.label != null ? labelProps.id : props['aria-labelledby'];\n  }\n\n  let incrementId = useId();\n  let decrementId = useId();\n\n  let incrementButtonProps: AriaButtonProps = mergeProps(incButtonProps, {\n    'aria-label': incrementAriaLabel || stringFormatter.format('increase', {fieldLabel}).trim(),\n    id: ariaLabelledby && !incrementAriaLabel ? incrementId : null,\n    'aria-labelledby': ariaLabelledby && !incrementAriaLabel ? `${incrementId} ${ariaLabelledby}` : null,\n    'aria-controls': inputId,\n    excludeFromTabOrder: true,\n    preventFocusOnPress: true,\n    allowFocusWhenDisabled: true,\n    isDisabled: !state.canIncrement,\n    onPressStart: onButtonPressStart\n  });\n\n  let decrementButtonProps: AriaButtonProps = mergeProps(decButtonProps, {\n    'aria-label': decrementAriaLabel || stringFormatter.format('decrease', {fieldLabel}).trim(),\n    id: ariaLabelledby && !decrementAriaLabel ? decrementId : null,\n    'aria-labelledby': ariaLabelledby && !decrementAriaLabel ? `${decrementId} ${ariaLabelledby}` : null,\n    'aria-controls': inputId,\n    excludeFromTabOrder: true,\n    preventFocusOnPress: true,\n    allowFocusWhenDisabled: true,\n    isDisabled: !state.canDecrement,\n    onPressStart: onButtonPressStart\n  });\n\n  return {\n    groupProps: {\n      ...focusWithinProps,\n      role: 'group',\n      'aria-disabled': isDisabled,\n      'aria-invalid': isInvalid ? 'true' : undefined\n    },\n    labelProps,\n    inputProps,\n    incrementButtonProps,\n    decrementButtonProps,\n    errorMessageProps,\n    descriptionProps,\n    isInvalid,\n    validationErrors,\n    validationDetails\n  };\n}\n"],"names":[],"version":3,"file":"useNumberField.module.js.map"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-aria/numberfield",
-  "version": "3.12.3",
+  "version": "3.12.5",
   "description": "Spectrum UI components in React",
   "license": "Apache-2.0",
   "main": "dist/main.js",
@@ -26,16 +26,17 @@
     "url": "https://github.com/adobe/react-spectrum"
   },
   "dependencies": {
-    "@react-aria/i18n": "^3.12.14",
-    "@react-aria/interactions": "^3.26.0",
-    "@react-aria/spinbutton": "^3.7.0",
-    "@react-aria/textfield": "^3.18.3",
-    "@react-aria/utils": "^3.32.0",
-    "@react-stately/form": "^3.2.2",
-    "@react-stately/numberfield": "^3.10.3",
-    "@react-types/button": "^3.14.1",
-    "@react-types/numberfield": "^3.8.16",
-    "@react-types/shared": "^3.32.1",
+    "@react-aria/i18n": "^3.12.16",
+    "@react-aria/interactions": "^3.27.1",
+    "@react-aria/live-announcer": "^3.4.4",
+    "@react-aria/spinbutton": "^3.7.2",
+    "@react-aria/textfield": "^3.18.5",
+    "@react-aria/utils": "^3.33.1",
+    "@react-stately/form": "^3.2.4",
+    "@react-stately/numberfield": "^3.11.0",
+    "@react-types/button": "^3.15.1",
+    "@react-types/numberfield": "^3.8.18",
+    "@react-types/shared": "^3.33.1",
     "@swc/helpers": "^0.5.0"
   },
   "peerDependencies": {
@@ -45,5 +46,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "4d838da5bfe36abb35aed166995a9ef63825370f"
+  "gitHead": "8df187370053aa35f553cb388ad670f65e1ab371"
 }

package/src/useNumberField.ts

@@ -10,11 +10,13 @@
  * governing permissions and limitations under the License.
  */
 
+import {announce} from '@react-aria/live-announcer';
 import {AriaButtonProps} from '@react-types/button';
 import {AriaNumberFieldProps} from '@react-types/numberfield';
-import {chain, filterDOMProps, isAndroid, isIOS, isIPhone, mergeProps, useFormReset, useId} from '@react-aria/utils';
-import {DOMAttributes, GroupDOMAttributes, TextInputDOMProps, ValidationResult} from '@react-types/shared';
+import {chain, filterDOMProps, getActiveElement, getEventTarget, isAndroid, isIOS, isIPhone, mergeProps, useFormReset, useId} from '@react-aria/utils';
 import {
+  type ClipboardEvent,
+  type ClipboardEventHandler,
   InputHTMLAttributes,
   LabelHTMLAttributes,
   RefObject,
@@ -22,6 +24,8 @@ import {
   useMemo,
   useState
 } from 'react';
+import {DOMAttributes, GroupDOMAttributes, TextInputDOMProps, ValidationResult} from '@react-types/shared';
+import {flushSync} from 'react-dom';
 // @ts-ignore
 import intlMessages from '../intl/*.json';
 import {NumberFieldState} from '@react-stately/numberfield';
@@ -91,12 +95,22 @@ export function useNumberField(props: AriaNumberFieldProps, state: NumberFieldSt
   } = state;
 
   const stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-aria/numberfield');
+  let commitAndAnnounce = useCallback(() => {
+    let oldValue = inputRef.current?.value ?? '';
+    // Set input value to normalized valid value
+    flushSync(() => {
+      commit();
+    });
+
+    if (inputRef.current?.value !== oldValue) {
+      announce(inputRef.current?.value ?? '', 'assertive');
+    }
+  }, [commit, inputRef]);
 
   let inputId = useId(id);
   let {focusProps} = useFocus({
     onBlur() {
-      // Set input value to normalized valid value
-      commit();
+      commitAndAnnounce();
     }
   });
 
@@ -181,6 +195,23 @@ export function useNumberField(props: AriaNumberFieldProps, state: NumberFieldSt
     }
   };
 
+  let onPaste: ClipboardEventHandler<HTMLInputElement> = (e: ClipboardEvent<HTMLInputElement>) => {
+    props.onPaste?.(e);
+    let inputElement = getEventTarget(e) as HTMLInputElement;
+    // we can only handle the case where the paste takes over the entire input, otherwise things get very complicated
+    // trying to calculate the new string based on what the paste is replacing and where in the source string it is
+    if (inputElement &&
+      ((inputElement.selectionEnd ?? -1) - (inputElement.selectionStart ?? 0)) === inputElement.value.length
+    ) {
+      e.preventDefault();
+      // commit so that the user gets to see what it formats to immediately
+      // paste happens before inputRef's value is updated, so have to prevent the default and do it ourselves
+      // spin button will then handle announcing the new value, this should work with controlled state as well
+      // because the announcement is done as a result of the new rendered input value if there is one
+      commit(e.clipboardData?.getData?.('text/plain')?.trim() ?? '');
+    }
+  };
+
   let domProps = filterDOMProps(props);
   let onKeyDownEnter = useCallback((e) => {
     if (e.nativeEvent.isComposing) {
@@ -223,6 +254,7 @@ export function useNumberField(props: AriaNumberFieldProps, state: NumberFieldSt
     onFocusChange,
     onKeyDown: useMemo(() => chain(onKeyDownEnter, onKeyDown), [onKeyDownEnter, onKeyDown]),
     onKeyUp,
+    onPaste,
     description,
     errorMessage
   }, state, inputRef);
@@ -254,7 +286,7 @@ export function useNumberField(props: AriaNumberFieldProps, state: NumberFieldSt
   let onButtonPressStart = (e) => {
     // If focus is already on the input, keep it there so we don't hide the
     // software keyboard when tapping the increment/decrement buttons.
-    if (document.activeElement === inputRef.current) {
+    if (getActiveElement() === inputRef.current) {
       return;
     }