Support native form validation (#5288)

Author: devongovett

packages/@react-aria/autocomplete/src/useSearchAutocomplete.ts

@@ -14,13 +14,13 @@ import {AriaButtonProps} from '@react-types/button';
 import {AriaListBoxOptions} from '@react-aria/listbox';
 import {AriaSearchAutocompleteProps} from '@react-types/autocomplete';
 import {ComboBoxState} from '@react-stately/combobox';
-import {DOMAttributes, KeyboardDelegate} from '@react-types/shared';
+import {DOMAttributes, KeyboardDelegate, ValidationResult} from '@react-types/shared';
 import {InputHTMLAttributes, RefObject} from 'react';
 import {mergeProps} from '@react-aria/utils';
 import {useComboBox} from '@react-aria/combobox';
 import {useSearchField} from '@react-aria/searchfield';
 
-export interface SearchAutocompleteAria<T> {
+export interface SearchAutocompleteAria<T> extends ValidationResult {
   /** Props for the label element. */
   labelProps: DOMAttributes,
   /** Props for the search input element. */
@@ -61,11 +61,16 @@ export function useSearchAutocomplete<T>(props: AriaSearchAutocompleteOptions<T>
     onSubmit = () => {},
     onClear,
     onKeyDown,
-    onKeyUp
+    onKeyUp,
+    isInvalid,
+    validationState,
+    validationBehavior,
+    isRequired,
+    ...otherProps
   } = props;
 
-  let {inputProps, clearButtonProps, descriptionProps, errorMessageProps} = useSearchField({
-    ...props,
+  let {inputProps, clearButtonProps} = useSearchField({
+    ...otherProps,
     value: state.inputValue,
     onChange: state.setInputValue,
     autoComplete: 'off',
@@ -87,11 +92,11 @@ export function useSearchAutocomplete<T>(props: AriaSearchAutocompleteOptions<T>
     value: state.inputValue,
     setValue: state.setInputValue
   }, inputRef);
-  
 
-  let {listBoxProps, labelProps, inputProps: comboBoxInputProps} = useComboBox(
+
+  let {listBoxProps, labelProps, inputProps: comboBoxInputProps, ...validation} = useComboBox(
     {
-      ...props,
+      ...otherProps,
       keyboardDelegate,
       popoverRef,
       listBoxRef,
@@ -100,7 +105,12 @@ export function useSearchAutocomplete<T>(props: AriaSearchAutocompleteOptions<T>
       onFocusChange: undefined,
       onBlur: undefined,
       onKeyDown: undefined,
-      onKeyUp: undefined
+      onKeyUp: undefined,
+      isInvalid,
+      validationState,
+      validationBehavior,
+      isRequired,
+      validate: undefined
     },
     state
   );
@@ -110,7 +120,6 @@ export function useSearchAutocomplete<T>(props: AriaSearchAutocompleteOptions<T>
     inputProps: mergeProps(inputProps, comboBoxInputProps),
     listBoxProps,
     clearButtonProps,
-    descriptionProps,
-    errorMessageProps
+    ...validation
   };
 }

packages/@react-aria/autocomplete/test/useSearchAutocomplete.test.js

@@ -16,7 +16,6 @@ import React from 'react';
 import {renderHook} from '@react-spectrum/test-utils';
 import {useComboBoxState} from '@react-stately/combobox';
 import {useSearchAutocomplete} from '../';
-import {useSingleSelectListState} from '@react-stately/list';
 
 describe('useSearchAutocomplete', function () {
   let preventDefault = jest.fn();
@@ -28,7 +27,7 @@ describe('useSearchAutocomplete', function () {
   });
 
   let defaultProps = {items: [{id: 1, name: 'one'}], children: (props) => <Item>{props.name}</Item>};
-  let {result} = renderHook(() => useSingleSelectListState(defaultProps));
+  let {result} = renderHook(() => useComboBoxState(defaultProps));
   let mockLayout = new ListLayout({
     rowHeight: 40
   });
@@ -47,7 +46,7 @@ describe('useSearchAutocomplete', function () {
       layout: mockLayout
     };
 
-    let {result} = renderHook(() => useSearchAutocomplete(props, useSingleSelectListState(defaultProps)));
+    let {result} = renderHook(() => useSearchAutocomplete(props, useComboBoxState(defaultProps)));
     let {inputProps, listBoxProps, labelProps} = result.current;
 
     expect(labelProps.id).toBeTruthy();
@@ -69,10 +68,7 @@ describe('useSearchAutocomplete', function () {
       label: 'test label',
       popoverRef: React.createRef(),
       inputRef: {
-        current: {
-          contains: jest.fn(),
-          focus: jest.fn()
-        }
+        current: document.createElement('input')
       },
       listBoxRef: React.createRef(),
       layout: mockLayout

packages/@react-aria/checkbox/package.json

@@ -22,10 +22,12 @@
     "url": "https://github.com/adobe/react-spectrum"
   },
   "dependencies": {
+    "@react-aria/form": "3.0.0-alpha.1",
     "@react-aria/label": "^3.7.2",
     "@react-aria/toggle": "^3.8.2",
     "@react-aria/utils": "^3.21.1",
     "@react-stately/checkbox": "^3.5.1",
+    "@react-stately/form": "3.0.0-alpha.1",
     "@react-stately/toggle": "^3.6.3",
     "@react-types/checkbox": "^3.5.2",
     "@react-types/shared": "^3.21.0",

packages/@react-aria/checkbox/src/useCheckbox.ts

@@ -13,9 +13,12 @@
 import {AriaCheckboxProps} from '@react-types/checkbox';
 import {InputHTMLAttributes, RefObject, useEffect} from 'react';
 import {ToggleState} from '@react-stately/toggle';
+import {useFormValidation} from '@react-aria/form';
+import {useFormValidationState} from '@react-stately/form';
 import {useToggle} from '@react-aria/toggle';
+import {ValidationResult} from '@react-types/shared';
 
-export interface CheckboxAria {
+export interface CheckboxAria extends ValidationResult {
   /** Props for the input element. */
   inputProps: InputHTMLAttributes<HTMLInputElement>,
   /** Whether the checkbox is selected. */
@@ -25,9 +28,7 @@ export interface CheckboxAria {
   /** Whether the checkbox is disabled. */
   isDisabled: boolean,
   /** Whether the checkbox is read only. */
-  isReadOnly: boolean,
-  /** Whether the checkbox is invalid. */
-  isInvalid: boolean
+  isReadOnly: boolean
 }
 
 /**
@@ -39,9 +40,17 @@ export interface CheckboxAria {
  * @param inputRef - A ref for the HTML input element.
  */
 export function useCheckbox(props: AriaCheckboxProps, state: ToggleState, inputRef: RefObject<HTMLInputElement>): CheckboxAria {
-  let {inputProps, isSelected, isPressed, isDisabled, isReadOnly, isInvalid} = useToggle(props, state, inputRef);
+  // Create validation state here because it doesn't make sense to add to general useToggleState.
+  let validationState = useFormValidationState({...props, value: state.isSelected});
+  let {isInvalid, validationErrors, validationDetails} = validationState.displayValidation;
+  let {inputProps, isSelected, isPressed, isDisabled, isReadOnly} = useToggle({
+    ...props,
+    isInvalid
+  }, state, inputRef);
+
+  useFormValidation(props, validationState, inputRef);
 
-  let {isIndeterminate} = props;
+  let {isIndeterminate, isRequired, validationBehavior = 'aria'} = props;
   useEffect(() => {
     // indeterminate is a property, but it can only be set via javascript
     // https://css-tricks.com/indeterminate-checkboxes/
@@ -53,12 +62,16 @@ export function useCheckbox(props: AriaCheckboxProps, state: ToggleState, inputR
   return {
     inputProps: {
       ...inputProps,
-      checked: isSelected
+      checked: isSelected,
+      'aria-required': (isRequired && validationBehavior === 'aria') || undefined,
+      required: isRequired && validationBehavior === 'native'
     },
     isSelected,
     isPressed,
     isDisabled,
     isReadOnly,
-    isInvalid
+    isInvalid,
+    validationErrors,
+    validationDetails
   };
 }

packages/@react-aria/checkbox/src/useCheckboxGroup.ts

@@ -11,13 +11,13 @@
  */
 
 import {AriaCheckboxGroupProps} from '@react-types/checkbox';
-import {checkboxGroupDescriptionIds, checkboxGroupErrorMessageIds, checkboxGroupNames} from './utils';
+import {checkboxGroupData} from './utils';
 import {CheckboxGroupState} from '@react-stately/checkbox';
-import {DOMAttributes} from '@react-types/shared';
+import {DOMAttributes, ValidationResult} from '@react-types/shared';
 import {filterDOMProps, mergeProps} from '@react-aria/utils';
 import {useField} from '@react-aria/label';
 
-export interface CheckboxGroupAria {
+export interface CheckboxGroupAria extends ValidationResult {
   /** Props for the checkbox group wrapper element. */
   groupProps: DOMAttributes,
   /** Props for the checkbox group's visible label (if any). */
@@ -35,21 +35,26 @@ export interface CheckboxGroupAria {
  * @param state - State for the checkbox group, as returned by `useCheckboxGroupState`.
  */
 export function useCheckboxGroup(props: AriaCheckboxGroupProps, state: CheckboxGroupState): CheckboxGroupAria {
-  let {isDisabled, name} = props;
+  let {isDisabled, name, validationBehavior = 'aria'} = props;
+  let {isInvalid, validationErrors, validationDetails} = state.displayValidation;
 
   let {labelProps, fieldProps, descriptionProps, errorMessageProps} = useField({
     ...props,
     // Checkbox group is not an HTML input element so it
     // shouldn't be labeled by a <label> element.
-    labelElementType: 'span'
+    labelElementType: 'span',
+    isInvalid,
+    errorMessage: props.errorMessage || validationErrors
   });
-  checkboxGroupDescriptionIds.set(state, descriptionProps.id);
-  checkboxGroupErrorMessageIds.set(state, errorMessageProps.id);
 
-  let domProps = filterDOMProps(props, {labelable: true});
+  checkboxGroupData.set(state, {
+    name,
+    descriptionId: descriptionProps.id,
+    errorMessageId: errorMessageProps.id,
+    validationBehavior
+  });
 
-  // Pass name prop from group to all items by attaching to the state.
-  checkboxGroupNames.set(state, name);
+  let domProps = filterDOMProps(props, {labelable: true});
 
   return {
     groupProps: mergeProps(domProps, {
@@ -59,6 +64,9 @@ export function useCheckboxGroup(props: AriaCheckboxGroupProps, state: CheckboxG
     }),
     labelProps,
     descriptionProps,
-    errorMessageProps
+    errorMessageProps,
+    isInvalid,
+    validationErrors,
+    validationDetails
   };
 }

packages/@react-aria/checkbox/src/useCheckboxGroupItem.ts

@@ -12,9 +12,10 @@
 
 import {AriaCheckboxGroupItemProps} from '@react-types/checkbox';
 import {CheckboxAria, useCheckbox} from './useCheckbox';
-import {checkboxGroupDescriptionIds, checkboxGroupErrorMessageIds, checkboxGroupNames} from './utils';
+import {checkboxGroupData} from './utils';
 import {CheckboxGroupState} from '@react-stately/checkbox';
-import {RefObject} from 'react';
+import {DEFAULT_VALIDATION_RESULT, privateValidationStateProp, useFormValidationState} from '@react-stately/form';
+import {RefObject, useEffect, useRef} from 'react';
 import {useToggleState} from '@react-stately/toggle';
 
 /**
@@ -41,11 +42,47 @@ export function useCheckboxGroupItem(props: AriaCheckboxGroupItemProps, state: C
     }
   });
 
+  let {name, descriptionId, errorMessageId, validationBehavior} = checkboxGroupData.get(state)!;
+  validationBehavior = props.validationBehavior ?? validationBehavior;
+
+  // Local validation for this checkbox.
+  let {realtimeValidation} = useFormValidationState({
+    ...props,
+    value: toggleState.isSelected,
+    // Server validation is handled at the group level.
+    name: undefined,
+    validationBehavior: 'aria'
+  });
+
+  // Update the checkbox group state when realtime validation changes.
+  let nativeValidation = useRef(DEFAULT_VALIDATION_RESULT);
+  let updateValidation = () => {
+    state.setInvalid(props.value, realtimeValidation.isInvalid ? realtimeValidation : nativeValidation.current);
+  };
+
+  useEffect(updateValidation);
+
+  // Combine group and checkbox level validation.
+  let combinedRealtimeValidation = state.realtimeValidation.isInvalid ? state.realtimeValidation : realtimeValidation;
+  let displayValidation = validationBehavior === 'native' ? state.displayValidation : combinedRealtimeValidation;
+
   let res = useCheckbox({
     ...props,
     isReadOnly: props.isReadOnly || state.isReadOnly,
     isDisabled: props.isDisabled || state.isDisabled,
-    name: props.name || checkboxGroupNames.get(state)
+    name: props.name || name,
+    isRequired: props.isRequired ?? state.isRequired,
+    validationBehavior,
+    [privateValidationStateProp]: {
+      realtimeValidation: combinedRealtimeValidation,
+      displayValidation,
+      resetValidation: state.resetValidation,
+      commitValidation: state.commitValidation,
+      updateValidation(v) {
+        nativeValidation.current = v;
+        updateValidation();
+      }
+    }
   }, toggleState, inputRef);
 
   return {
@@ -54,8 +91,8 @@ export function useCheckboxGroupItem(props: AriaCheckboxGroupItemProps, state: C
       ...res.inputProps,
       'aria-describedby': [
         props['aria-describedby'],
-        state.isInvalid ? checkboxGroupErrorMessageIds.get(state) : null,
-        checkboxGroupDescriptionIds.get(state)
+        state.isInvalid ? errorMessageId : null,
+        descriptionId
       ].filter(Boolean).join(' ') || undefined
     }
   };

packages/@react-aria/checkbox/src/utils.ts

@@ -12,6 +12,11 @@
 
 import {CheckboxGroupState} from '@react-stately/checkbox';
 
-export const checkboxGroupNames = new WeakMap<CheckboxGroupState, string>();
-export const checkboxGroupDescriptionIds = new WeakMap<CheckboxGroupState, string>();
-export const checkboxGroupErrorMessageIds = new WeakMap<CheckboxGroupState, string>();
+interface CheckboxGroupData {
+  name: string,
+  descriptionId: string,
+  errorMessageId: string,
+  validationBehavior: 'aria' | 'native'
+}
+
+export const checkboxGroupData = new WeakMap<CheckboxGroupState, CheckboxGroupData>();

packages/@react-aria/color/package.json

@@ -30,6 +30,7 @@
     "@react-aria/utils": "^3.21.1",
     "@react-aria/visually-hidden": "^3.8.6",
     "@react-stately/color": "^3.4.4",
+    "@react-stately/form": "3.0.0-alpha.1",
     "@react-types/color": "3.0.0-beta.20",
     "@react-types/shared": "^3.21.0",
     "@react-types/slider": "^3.6.2",