@react-aria/numberfield 3.9.0 → 3.10.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-aria/numberfield",
-  "version": "3.9.0",
+  "version": "3.10.0",
   "description": "Spectrum UI components in React",
   "license": "Apache-2.0",
   "main": "dist/main.js",
@@ -22,17 +22,16 @@
     "url": "https://github.com/adobe/react-spectrum"
   },
   "dependencies": {
-    "@react-aria/i18n": "^3.8.3",
-    "@react-aria/interactions": "^3.19.0",
-    "@react-aria/live-announcer": "^3.3.1",
-    "@react-aria/spinbutton": "^3.5.3",
-    "@react-aria/textfield": "^3.12.1",
-    "@react-aria/utils": "^3.21.0",
-    "@react-stately/numberfield": "^3.6.2",
-    "@react-types/button": "^3.9.0",
-    "@react-types/numberfield": "^3.6.1",
-    "@react-types/shared": "^3.21.0",
-    "@react-types/textfield": "^3.8.1",
+    "@react-aria/i18n": "^3.9.0",
+    "@react-aria/interactions": "^3.20.0",
+    "@react-aria/spinbutton": "^3.6.0",
+    "@react-aria/textfield": "^3.13.0",
+    "@react-aria/utils": "^3.22.0",
+    "@react-stately/form": "^3.0.0",
+    "@react-stately/numberfield": "^3.7.0",
+    "@react-types/button": "^3.9.1",
+    "@react-types/numberfield": "^3.7.0",
+    "@react-types/shared": "^3.22.0",
     "@swc/helpers": "^0.5.0"
   },
   "peerDependencies": {
@@ -42,5 +41,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "4122e44d1991c90507d630d35ed297f89db435d3"
+  "gitHead": "9ce2f674eab2cc8912800d3162dcf00a1ce94274"
 }

package/src/useNumberField.ts

@@ -13,7 +13,7 @@
 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} from '@react-types/shared';
+import {DOMAttributes, GroupDOMAttributes, TextInputDOMProps, ValidationResult} from '@react-types/shared';
 import {
   InputHTMLAttributes,
   LabelHTMLAttributes,
@@ -25,6 +25,7 @@ import {
 // @ts-ignore
 import intlMessages from '../intl/*.json';
 import {NumberFieldState} from '@react-stately/numberfield';
+import {privateValidationStateProp} from '@react-stately/form';
 import {useFocus, useFocusWithin, useScrollWheel} from '@react-aria/interactions';
 import {useFormattedTextField} from '@react-aria/textfield';
 import {
@@ -33,7 +34,7 @@ import {
 } from '@react-aria/i18n';
 import {useSpinButton} from '@react-aria/spinbutton';
 
-export interface NumberFieldAria {
+export interface NumberFieldAria extends ValidationResult {
   /** Props for the label element. */
   labelProps: LabelHTMLAttributes<HTMLLabelElement>,
   /** Props for the group wrapper around the input and stepper buttons. */
@@ -65,8 +66,6 @@ export function useNumberField(props: AriaNumberFieldProps, state: NumberFieldSt
     minValue,
     maxValue,
     autoFocus,
-    validationState,
-    isInvalid,
     label,
     formatOptions,
     onBlur = () => {},
@@ -86,15 +85,15 @@ export function useNumberField(props: AriaNumberFieldProps, state: NumberFieldSt
     decrementToMin,
     numberValue,
     inputValue,
-    commit
+    commit,
+    commitValidation
   } = state;
 
   const stringFormatter = useLocalizedStringFormatter(intlMessages);
 
   let inputId = useId(id);
-
   let {focusProps} = useFocus({
-    onBlur: () => {
+    onBlur() {
       // Set input value to normalized valid value
       commit();
     }
@@ -185,9 +184,13 @@ export function useNumberField(props: AriaNumberFieldProps, state: NumberFieldSt
   let onKeyDownEnter = useCallback((e) => {
     if (e.key === 'Enter') {
       commit();
+      commitValidation();
+    } else {
+      e.continuePropagation();
     }
-  }, [commit]);
+  }, [commit, commitValidation]);
 
+  let {isInvalid, validationErrors, validationDetails} = state.displayValidation;
   let {labelProps, inputProps: textFieldProps, descriptionProps, errorMessageProps} = useFormattedTextField({
     ...otherProps,
     ...domProps,
@@ -197,8 +200,8 @@ export function useNumberField(props: AriaNumberFieldProps, state: NumberFieldSt
     isDisabled,
     isReadOnly,
     isRequired,
-    validationState,
-    isInvalid,
+    validate: undefined,
+    [privateValidationStateProp]: state,
     value: inputValue,
     defaultValue: undefined, // defaultValue already used to populate state.inputValue, unneeded here
     autoComplete: 'off',
@@ -237,6 +240,10 @@ export function useNumberField(props: AriaNumberFieldProps, state: NumberFieldSt
     }
   );
 
+  if (props.validationBehavior === 'native') {
+    inputProps['aria-required'] = undefined;
+  }
+
   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.
@@ -302,13 +309,16 @@ export function useNumberField(props: AriaNumberFieldProps, state: NumberFieldSt
       ...focusWithinProps,
       role: 'group',
       'aria-disabled': isDisabled,
-      'aria-invalid': isInvalid || validationState === 'invalid' ? 'true' : undefined
+      'aria-invalid': isInvalid ? 'true' : undefined
     },
     labelProps,
     inputProps,
     incrementButtonProps,
     decrementButtonProps,
     errorMessageProps,
-    descriptionProps
+    descriptionProps,
+    isInvalid,
+    validationErrors,
+    validationDetails
   };
 }