fix: Make value required on AriaCheckboxGroupItemProps interface (#1337)

Author: stefanprobst

packages/@react-aria/checkbox/test/useCheckboxGroup.test.tsx

@@ -10,21 +10,21 @@
  * governing permissions and limitations under the License.
  */
 
-import {AriaCheckboxGroupProps, AriaCheckboxProps} from '@react-types/checkbox';
+import {AriaCheckboxGroupItemProps, AriaCheckboxGroupProps} from '@react-types/checkbox';
 import {CheckboxGroupState, useCheckboxGroupState} from '@react-stately/checkbox';
 import React, {useRef} from 'react';
 import {render} from '@testing-library/react';
 import {useCheckboxGroup, useCheckboxGroupItem} from '../';
 import userEvent from '@testing-library/user-event';
 
-function Checkbox({checkboxGroupState, ...props}: AriaCheckboxProps & { checkboxGroupState: CheckboxGroupState }) {
+function Checkbox({checkboxGroupState, ...props}: AriaCheckboxGroupItemProps & { checkboxGroupState: CheckboxGroupState }) {
   const ref = useRef<HTMLInputElement>();
   const {children} = props;
   const {inputProps} = useCheckboxGroupItem(props, checkboxGroupState, ref);
   return <label>{children}<input ref={ref} {...inputProps} /></label>;
 }
 
-function CheckboxGroup({groupProps, checkboxProps}: {groupProps: AriaCheckboxGroupProps, checkboxProps: AriaCheckboxProps[]}) {
+function CheckboxGroup({groupProps, checkboxProps}: {groupProps: AriaCheckboxGroupProps, checkboxProps: AriaCheckboxGroupItemProps[]}) {
   const state = useCheckboxGroupState(groupProps);
   const {groupProps: checkboxGroupProps, labelProps} = useCheckboxGroup(groupProps, state);
   return (

packages/@react-spectrum/checkbox/src/Checkbox.tsx

@@ -50,6 +50,9 @@ function Checkbox(props: SpectrumCheckboxProps, ref: FocusableRef<HTMLLabelEleme
     // eslint-disable-next-line react-hooks/rules-of-hooks
     ? useCheckboxGroupItem({
       ...props,
+      // Value is optional for standalone checkboxes, but required for CheckboxGroup items;
+      // it's passed explicitly here to avoid typescript error (requires strictNullChecks disabled).
+      value: props.value,
       // Only pass isRequired and validationState to react-aria if they came from
       // the props for this individual checkbox, and not from the group via context.
       isRequired: originalProps.isRequired,
@@ -68,6 +71,9 @@ function Checkbox(props: SpectrumCheckboxProps, ref: FocusableRef<HTMLLabelEleme
         console.warn(`${key} is unsupported on individual <Checkbox> elements within a <CheckboxGroup>. Please apply these props to the group instead.`);
       }
     }
+    if (props.value == null) {
+      console.warn('A <Checkbox> element within a <CheckboxGroup> requires a `value` property.');
+    }
   }
 
   return (

packages/@react-types/checkbox/src/index.d.ts

@@ -79,7 +79,9 @@ export interface AriaCheckboxGroupProps extends CheckboxGroupProps, DOMProps, Ar
   name?: string
 }
 
-export interface AriaCheckboxGroupItemProps extends Omit<AriaCheckboxProps, 'isSelected' | 'defaultSelected'> {}
+export interface AriaCheckboxGroupItemProps extends Omit<AriaCheckboxProps, 'isSelected' | 'defaultSelected'> {
+  value: string
+}
 
 export interface SpectrumCheckboxProps extends AriaCheckboxProps, StyleProps {
   /**