@react-aria/color 3.0.0-nightly.4228 → 3.0.0-nightly.4242

package/src/useColorField.ts

@@ -20,11 +20,13 @@ import {
   useState
 } from 'react';
 import {mergeProps, useId} from '@react-aria/utils';
+import {privateValidationStateProp} from '@react-stately/form';
 import {useFocusWithin, useScrollWheel} from '@react-aria/interactions';
 import {useFormattedTextField} from '@react-aria/textfield';
 import {useSpinButton} from '@react-aria/spinbutton';
+import {ValidationResult} from '@react-types/shared';
 
-export interface ColorFieldAria {
+export interface ColorFieldAria extends ValidationResult {
   /** Props for the label element. */
   labelProps: LabelHTMLAttributes<HTMLLabelElement>,
   /** Props for the input element. */
@@ -43,17 +45,18 @@ export function useColorField(
   let {
     isDisabled,
     isReadOnly,
-    isRequired
+    isRequired,
+    validationBehavior = 'aria'
   } = props;
 
   let {
     colorValue,
     inputValue,
-    commit,
     increment,
     decrement,
     incrementToMax,
-    decrementToMin
+    decrementToMin,
+    commit
   } = state;
 
   let inputId = useId();
@@ -96,27 +99,35 @@ export function useColorField(
     }
   };
 
-  let {labelProps, inputProps} = useFormattedTextField(
+  let {inputProps, ...otherProps} = useFormattedTextField(
     mergeProps(props, {
       id: inputId,
       value: inputValue,
       defaultValue: undefined,
+      validate: undefined,
+      [privateValidationStateProp]: state,
       type: 'text',
       autoComplete: 'off',
       onChange
     }), state, ref);
 
+  inputProps = mergeProps(inputProps, spinButtonProps, focusWithinProps, {
+    role: 'textbox',
+    'aria-valuemax': null,
+    'aria-valuemin': null,
+    'aria-valuenow': null,
+    'aria-valuetext': null,
+    autoCorrect: 'off',
+    spellCheck: 'false',
+    onBlur: commit
+  });
+
+  if (validationBehavior === 'native') {
+    inputProps['aria-required'] = undefined;
+  }
+
   return {
-    labelProps,
-    inputProps: mergeProps(inputProps, spinButtonProps, focusWithinProps, {
-      role: 'textbox',
-      'aria-valuemax': null,
-      'aria-valuemin': null,
-      'aria-valuenow': null,
-      'aria-valuetext': null,
-      autoCorrect: 'off',
-      spellCheck: 'false',
-      onBlur: commit
-    })
+    inputProps,
+    ...otherProps
   };
 }