fix lint errors; align types with other components

Author: Dan Grossen

packages/@react-spectrum/s2/src/SelectBox.tsx

@@ -18,20 +18,21 @@
 import {
   Checkbox as AriaCheckbox,
   Radio as AriaRadio,
+  GridListItemProps,
   Provider,
   TextContext
 } from 'react-aria-components';
 import {Checkbox, IconContext, Radio} from '@react-spectrum/s2';
 import {FocusableRef} from '@react-types/shared';
 import {focusRing, size, style}  from '../style' with {type: 'macro'};
-import React, {forwardRef, useRef} from 'react';
+import React, {forwardRef, ReactNode, useRef} from 'react';
+import {StyleProps}  from './style-utils' with {type: 'macro'};
 
 import {useFocusableRef} from '@react-spectrum/utils';
 import {useSelectBoxGroupProvider} from './SelectBoxGroup';
 
-export interface SelectBoxProps {
-  children?: React.ReactNode,
-  isDisabled?: boolean,
+export interface SelectBoxProps extends Omit<GridListItemProps, 'className' | 'style' | 'children' | 'onHoverChange' | 'onHoverStart' | 'onHoverEnd' | 'value'>, StyleProps {
+  children: ReactNode | ((renderProps: SelectBoxProps) => ReactNode),
   value: string
 }
 
@@ -295,7 +296,7 @@ const SelectBox = (props: SelectBoxProps, ref: FocusableRef<HTMLLabelElement>) =
                 }
               ]
             ]}>
-            {props.children}
+            {typeof props.children === 'function' ? props.children(renderProps) : props.children}
           </Provider>
         </span>
       )}

packages/@react-spectrum/s2/src/SelectBoxGroup.tsx

@@ -15,8 +15,9 @@
  * from Adobe.
  **************************************************************************/
 
-import {CheckboxGroup, Label, Provider, RadioGroup} from 'react-aria-components';
+import {CheckboxGroup, CheckboxGroupProps, GridListProps, Label, Provider, RadioGroup, RadioGroupProps, SelectionMode} from 'react-aria-components';
 import {IconContext, TextContext} from '@react-spectrum/s2';
+import {Orientation} from 'react-aria';
 import React, {
   ForwardedRef,
   forwardRef,
@@ -27,6 +28,8 @@ import React, {
   useState
 } from 'react';
 import {style}  from '../style' with {type: 'macro'};
+import {UnsafeStyles} from './style-utils' with {type: 'macro'};
+import {ValueBase} from '@react-types/shared';
 
 /**
  * Ensures the return value is a string.
@@ -54,47 +57,19 @@ function ensureArray(value: string | string[]): string[] {
 
 export {unwrapValue, ensureArray};
 
-export type SelectBoxValueType = string | string[];
-export interface SelectBoxGroupProps {
+export interface SelectBoxGroupProps<T> extends Omit<GridListProps<T>, 'layout' | 'keyboardNavigationBehavior' | 'selectionBehavior' | 'onSelectionChange' | 'className' | 'style'>, UnsafeStyles, ValueBase<string | string[]> {
   children?: ReactNode,
-  defaultValue?: SelectBoxValueType,
   label?: ReactNode,
   isDisabled?: boolean,
   isRequired?: boolean,
-  onSelectionChange: (val: SelectBoxValueType) => void,
-  orientation?: 'horizontal' | 'vertical',
-  selectionMode?: 'single' | 'multiple',
-  size?: 'XS' | 'S' | 'M' | 'L' | 'XL',
-  value?: SelectBoxValueType
+  onChange?: (value: string | string[]) => void,
+  orientation?: Orientation,
+  size?: 'XS' | 'S' | 'M' | 'L' | 'XL'
 }
 
-export interface SelectorGroupProps {
-  children: ReactNode,
-  className: string,
-  defaultValue?: SelectBoxValueType,
-  isDisabled?: boolean,
-  isRequired?: boolean,
-  onChange: (val: SelectBoxValueType) => void,
-  selectionMode: 'single' | 'multiple',
-  value?: SelectBoxValueType
-}
-export interface SelectBoxProps {
-  value: string,
-  children?: ReactNode,
-  isDisabled?: boolean
-}
-
-interface SelectBoxGroupContext {
-  orientation?: 'horizontal' | 'vertical',
-  selectedValue?: SelectBoxValueType,
-  selectionMode?: 'single' | 'multiple',
-  validationState?: 'valid' | 'invalid',
-  value?: SelectBoxValueType,
-  size: 'XS' | 'S' | 'M' | 'L' | 'XL'
-}
+export type SelectorGroupProps = (CheckboxGroupProps | RadioGroupProps) & { selectionMode: SelectionMode };
 
-export const SelectBoxContext = React.createContext<SelectBoxGroupContext>({
-  value: undefined,
+export const SelectBoxContext = React.createContext<SelectBoxGroupProps<any>>({
   size: 'M',
   orientation: 'vertical'
 });
@@ -126,14 +101,14 @@ const SelectorGroup = forwardRef(function SelectorGroupComponent(
   };
 
   return selectionMode === 'single' ? (
-    <RadioGroup {...props} value={unwrapValue(value)} defaultValue={unwrapValue(defaultValue)} />
+    <RadioGroup {...props as RadioGroupProps} value={unwrapValue(value)} defaultValue={unwrapValue(defaultValue)} />
   ) : (
-    <CheckboxGroup {...props} value={ensureArray(value)} defaultValue={ensureArray(defaultValue)} />
+    <CheckboxGroup {...props as CheckboxGroupProps} value={ensureArray(value)} defaultValue={ensureArray(defaultValue)} />
   );
 });
 
-function SelectBoxGroup(
-  props: SelectBoxGroupProps,
+function SelectBoxGroup<T extends object>(
+  props: SelectBoxGroupProps<T>,
   ref: ForwardedRef<HTMLDivElement>
 ): React.ReactElement {
   const {
@@ -142,7 +117,7 @@ function SelectBoxGroup(
     isDisabled = false,
     isRequired = false,
     label,
-    onSelectionChange,
+    onChange,
     orientation = 'vertical',
     selectionMode = 'multiple',
     size = 'M',
@@ -152,10 +127,10 @@ function SelectBoxGroup(
   const [value, setValue] = useState<string | string[] | undefined>(defaultValue || valueProp);
 
   useEffect(() => {
-    if (value !== undefined) {
-      onSelectionChange(value);
+    if (value !== undefined && onChange) {
+      onChange(value);
     }
-  }, [onSelectionChange, value]);
+  }, [onChange, value]);
 
   const selectBoxContextValue = useMemo(
     () => ({

packages/@react-spectrum/s2/stories/SelectBoxGroup.stories.tsx

@@ -27,7 +27,7 @@ const meta: Meta<typeof SelectBoxGroup> = {
   },
   tags: ['autodocs'],
   argTypes: {
-    onSelectionChange: {table: {category: 'Events'}},
+    onChange: {table: {category: 'Events'}},
     orientation: {
       control: 'radio',
       options: ['horizontal', 'vertical']