@react-aria/numberfield 3.0.0-nightly.2517 → 3.0.0-nightly.2531

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,11 +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,
@@ -199,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',
@@ -239,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.
@@ -304,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
   };
 }