feat: Support associating components with external forms (#8411)

Author: devongovett

packages/@react-aria/button/src/useButton.ts

@@ -67,7 +67,15 @@ export function useButton(props: AriaButtonOptions<ElementType>, ref: RefObject<
   if (elementType === 'button') {
     additionalProps = {
       type,
-      disabled: isDisabled
+      disabled: isDisabled,
+      form: props.form,
+      formAction: props.formAction,
+      formEncType: props.formEncType,
+      formMethod: props.formMethod,
+      formNoValidate: props.formNoValidate,
+      formTarget: props.formTarget,
+      name: props.name,
+      value: props.value
     };
   } else {
     additionalProps = {

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

@@ -36,7 +36,7 @@ export interface CheckboxGroupAria extends ValidationResult {
  * @param state - State for the checkbox group, as returned by `useCheckboxGroupState`.
  */
 export function useCheckboxGroup(props: AriaCheckboxGroupProps, state: CheckboxGroupState): CheckboxGroupAria {
-  let {isDisabled, name, validationBehavior = 'aria'} = props;
+  let {isDisabled, name, form, validationBehavior = 'aria'} = props;
   let {isInvalid, validationErrors, validationDetails} = state.displayValidation;
 
   let {labelProps, fieldProps, descriptionProps, errorMessageProps} = useField({
@@ -50,6 +50,7 @@ export function useCheckboxGroup(props: AriaCheckboxGroupProps, state: CheckboxG
 
   checkboxGroupData.set(state, {
     name,
+    form,
     descriptionId: descriptionProps.id,
     errorMessageId: errorMessageProps.id,
     validationBehavior

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

@@ -44,7 +44,7 @@ export function useCheckboxGroupItem(props: AriaCheckboxGroupItemProps, state: C
     }
   });
 
-  let {name, descriptionId, errorMessageId, validationBehavior} = checkboxGroupData.get(state)!;
+  let {name, form, descriptionId, errorMessageId, validationBehavior} = checkboxGroupData.get(state)!;
   validationBehavior = props.validationBehavior ?? validationBehavior;
 
   // Local validation for this checkbox.
@@ -73,6 +73,7 @@ export function useCheckboxGroupItem(props: AriaCheckboxGroupItemProps, state: C
     isReadOnly: props.isReadOnly || state.isReadOnly,
     isDisabled: props.isDisabled || state.isDisabled,
     name: props.name || name,
+    form: props.form || form,
     isRequired: props.isRequired ?? state.isRequired,
     validationBehavior,
     [privateValidationStateProp]: {

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

@@ -14,6 +14,7 @@ import {CheckboxGroupState} from '@react-stately/checkbox';
 
 interface CheckboxGroupData {
   name?: string,
+  form?: string,
   descriptionId?: string,
   errorMessageId?: string,
   validationBehavior: 'aria' | 'native'

packages/@react-aria/color/src/useColorArea.ts

@@ -54,7 +54,8 @@ export function useColorArea(props: AriaColorAreaOptions, state: ColorAreaState)
     containerRef,
     'aria-label': ariaLabel,
     xName,
-    yName
+    yName,
+    form
   } = props;
   let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-aria/color');
 
@@ -426,6 +427,7 @@ export function useColorArea(props: AriaColorAreaOptions, state: ColorAreaState)
       disabled: isDisabled,
       value: state.value.getChannelValue(xChannel),
       name: xName,
+      form,
       tabIndex: (isMobile || !focusedInput || focusedInput === 'x' ? undefined : -1),
       /*
         So that only a single "2d slider" control shows up when listing form elements for screen readers,
@@ -451,6 +453,7 @@ export function useColorArea(props: AriaColorAreaOptions, state: ColorAreaState)
       disabled: isDisabled,
       value: state.value.getChannelValue(yChannel),
       name: yName,
+      form,
       tabIndex: (isMobile || focusedInput === 'y' ? undefined : -1),
       /*
         So that only a single "2d slider" control shows up when listing form elements for screen readers,

packages/@react-aria/color/src/useColorSlider.ts

@@ -44,7 +44,7 @@ export interface ColorSliderAria {
  * Color sliders allow users to adjust an individual channel of a color value.
  */
 export function useColorSlider(props: AriaColorSliderOptions, state: ColorSliderState): ColorSliderAria {
-  let {trackRef, inputRef, orientation, channel, 'aria-label': ariaLabel, name} = props;
+  let {trackRef, inputRef, orientation, channel, 'aria-label': ariaLabel, name, form} = props;
 
   let {locale, direction} = useLocale();
 
@@ -60,6 +60,7 @@ export function useColorSlider(props: AriaColorSliderOptions, state: ColorSlider
     orientation,
     isDisabled: props.isDisabled,
     name,
+    form,
     trackRef,
     inputRef
   }, state);

packages/@react-aria/color/src/useColorWheel.ts

@@ -45,7 +45,8 @@ export function useColorWheel(props: AriaColorWheelOptions, state: ColorWheelSta
     innerRadius,
     outerRadius,
     'aria-label': ariaLabel,
-    name
+    name,
+    form
   } = props;
 
   let {addGlobalListener, removeGlobalListener} = useGlobalListeners();
@@ -325,6 +326,7 @@ export function useColorWheel(props: AriaColorWheelOptions, state: ColorWheelSta
         disabled: isDisabled,
         value: `${state.value.getChannelValue('hue')}`,
         name,
+        form,
         onChange: (e: ChangeEvent<HTMLInputElement>) => {
           state.setHue(parseFloat(e.target.value));
         },

packages/@react-aria/datepicker/src/useDateField.ts

@@ -149,6 +149,7 @@ export function useDateField<T extends DateValue>(props: AriaDateFieldOptions<T>
   let inputProps: InputHTMLAttributes<HTMLInputElement> = {
     type: 'hidden',
     name: props.name,
+    form: props.form,
     value: state.value?.toString() || '',
     disabled: props.isDisabled
   };

packages/@react-aria/datepicker/src/useDatePicker.ts

@@ -150,7 +150,8 @@ export function useDatePicker<T extends DateValue>(props: AriaDatePickerProps<T>
       // DatePicker owns the validation state for the date field.
       [privateValidationStateProp]: state,
       autoFocus: props.autoFocus,
-      name: props.name
+      name: props.name,
+      form: props.form
     },
     descriptionProps,
     errorMessageProps,

packages/@react-aria/datepicker/src/useDateRangePicker.ts

@@ -187,6 +187,7 @@ export function useDateRangePicker<T extends DateValue>(props: AriaDateRangePick
       onChange: start => state.setDateTime('start', start),
       autoFocus: props.autoFocus,
       name: props.startName,
+      form: props.form,
       [privateValidationStateProp]: {
         realtimeValidation: state.realtimeValidation,
         displayValidation: state.displayValidation,
@@ -205,6 +206,7 @@ export function useDateRangePicker<T extends DateValue>(props: AriaDateRangePick
       defaultValue: state.defaultValue?.end,
       onChange: end => state.setDateTime('end', end),
       name: props.endName,
+      form: props.form,
       [privateValidationStateProp]: {
         realtimeValidation: state.realtimeValidation,
         displayValidation: state.displayValidation,