@react-aria/color 3.0.0-beta.26 → 3.0.0-beta.27

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
   };
 }

package/src/useColorWheel.ts

@@ -59,7 +59,7 @@ export function useColorWheel(props: AriaColorWheelOptions, state: ColorWheelSta
 
   useFormReset(inputRef, state.hue, state.setHue);
 
-  let currentPosition = useRef<{x: number, y: number}>(null);
+  let currentPosition = useRef<{x: number, y: number} | null>(null);
 
   let {keyboardProps} = useKeyboard({
     onKeyDown(e) {
@@ -108,7 +108,7 @@ export function useColorWheel(props: AriaColorWheelOptions, state: ColorWheelSta
       }
     },
     onMoveEnd() {
-      isOnTrack.current = undefined;
+      isOnTrack.current = false;
       state.setDragging(false);
       focusInput();
     }
@@ -135,7 +135,7 @@ export function useColorWheel(props: AriaColorWheelOptions, state: ColorWheelSta
     }
   });
 
-  let onThumbDown = (id: number | null) => {
+  let onThumbDown = (id: number | null | undefined) => {
     if (!state.isDragging) {
       currentPointer.current = id;
       focusInput();
@@ -167,7 +167,7 @@ export function useColorWheel(props: AriaColorWheelOptions, state: ColorWheelSta
     }
   };
 
-  let onTrackDown = (track: Element, id: number | null, pageX: number, pageY: number) => {
+  let onTrackDown = (track: Element, id: number | null | undefined, pageX: number, pageY: number) => {
     let rect = track.getBoundingClientRect();
     let x = pageX - rect.x - rect.width / 2;
     let y = pageY - rect.y - rect.height / 2;