feat: Allow collection items to be values other than objects (#10047)

* feat: Allow collection items to be values other than objects

* review comments

Author: devongovett

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

@@ -51,9 +51,10 @@ export const ActionMenuContext =
 /**
  * ActionMenu combines an ActionButton with a Menu for simple "more actions" use cases.
  */
-export const ActionMenu = /*#__PURE__*/ (forwardRef as forwardRefType)(function ActionMenu<
-  T extends object
->(props: ActionMenuProps<T>, ref: FocusableRef<HTMLButtonElement>) {
+export const ActionMenu = /*#__PURE__*/ (forwardRef as forwardRefType)(function ActionMenu<T>(
+  props: ActionMenuProps<T>,
+  ref: FocusableRef<HTMLButtonElement>
+) {
   let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/s2');
   [props, ref] = useSpectrumContextProps(props, ref, ActionMenuContext);
   let buttonProps = filterDOMProps(props, {labelable: true});

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

@@ -140,9 +140,10 @@ const wrapper = style<BreadcrumbsStyleProps>(
 const InternalBreadcrumbsContext = createContext<Partial<BreadcrumbsProps<any>>>({});
 
 /** Breadcrumbs show hierarchy and navigational context for a user's location within an application. */
-export const Breadcrumbs = /*#__PURE__*/ (forwardRef as forwardRefType)(function Breadcrumbs<
-  T extends object
->(props: BreadcrumbsProps<T>, ref: DOMRef<HTMLOListElement>) {
+export const Breadcrumbs = /*#__PURE__*/ (forwardRef as forwardRefType)(function Breadcrumbs<T>(
+  props: BreadcrumbsProps<T>,
+  ref: DOMRef<HTMLOListElement>
+) {
   [props, ref] = useSpectrumContextProps(props, ref, BreadcrumbsContext);
   let domRef = useDOMRef(ref);
   let {

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

@@ -239,9 +239,10 @@ export const CardViewContext =
 /**
  * A CardView displays a group of related objects, with support for selection and bulk actions.
  */
-export const CardView = /*#__PURE__*/ (forwardRef as forwardRefType)(function CardView<
-  T extends object
->(props: CardViewProps<T>, ref: DOMRef<HTMLDivElement>) {
+export const CardView = /*#__PURE__*/ (forwardRef as forwardRefType)(function CardView<T>(
+  props: CardViewProps<T>,
+  ref: DOMRef<HTMLDivElement>
+) {
   [props, ref] = useSpectrumContextProps(props, ref, CardViewContext);
   let {
     children,

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

@@ -104,7 +104,7 @@ export interface ComboboxStyleProps {
    */
   prefix?: ReactNode;
 }
-export interface ComboBoxProps<T extends object>
+export interface ComboBoxProps<T>
   extends
     Omit<
       AriaComboBoxProps<T>,
@@ -390,9 +390,10 @@ let InternalComboboxContext = createContext<{size: 'S' | 'M' | 'L' | 'XL'}>({siz
  * ComboBox allow users to choose a single option from a collapsible list of options when space is
  * limited.
  */
-export const ComboBox = /*#__PURE__*/ (forwardRef as forwardRefType)(function ComboBox<
-  T extends object
->(props: ComboBoxProps<T>, ref: Ref<TextFieldRef>) {
+export const ComboBox = /*#__PURE__*/ (forwardRef as forwardRefType)(function ComboBox<T>(
+  props: ComboBoxProps<T>,
+  ref: Ref<TextFieldRef>
+) {
   [props, ref] = useSpectrumContextProps(props, ref, ComboBoxContext);
 
   let formContext = useContext(FormContext);
@@ -532,11 +533,11 @@ export function ComboBoxItem(props: ComboBoxItemProps): ReactNode {
   );
 }
 
-export interface ComboBoxSectionProps<T extends object> extends Omit<
+export interface ComboBoxSectionProps<T> extends Omit<
   ListBoxSectionProps<T>,
   'style' | 'className' | 'render' | keyof GlobalDOMAttributes
 > {}
-export function ComboBoxSection<T extends object>(props: ComboBoxSectionProps<T>): ReactNode {
+export function ComboBoxSection<T>(props: ComboBoxSectionProps<T>): ReactNode {
   let {size} = useContext(InternalComboboxContext);
   return (
     <>

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

@@ -18,7 +18,7 @@ import {
 } from 'react-aria-components/ListBox';
 import {ReactNode} from 'react';
 
-export function ListBox<T extends object>({children, ...props}: ListBoxProps<T>): ReactNode {
+export function ListBox<T>({children, ...props}: ListBoxProps<T>): ReactNode {
   return <AriaListBox {...props}>{children}</AriaListBox>;
 }
 

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

@@ -256,9 +256,10 @@ export class S2ListLayout<T> extends ListLayout<T> {
  * A ListView displays a list of interactive items, and allows a user to navigate, select, or
  * perform an action.
  */
-export const ListView = /*#__PURE__*/ (forwardRef as forwardRefType)(function ListView<
-  T extends object
->(props: ListViewProps<T>, ref: DOMRef<HTMLDivElement>) {
+export const ListView = /*#__PURE__*/ (forwardRef as forwardRefType)(function ListView<T>(
+  props: ListViewProps<T>,
+  ref: DOMRef<HTMLDivElement>
+) {
   [props, ref] = useSpectrumContextProps(props, ref, ListViewContext);
   let {
     children,

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

@@ -423,7 +423,7 @@ let wrappingDiv = style({
 /**
  * Menus display a list of actions or options that a user can choose.
  */
-export const Menu = /*#__PURE__*/ (forwardRef as forwardRefType)(function Menu<T extends object>(
+export const Menu = /*#__PURE__*/ (forwardRef as forwardRefType)(function Menu<T>(
   props: MenuProps<T>,
   ref: DOMRef<HTMLDivElement>
 ) {
@@ -510,12 +510,12 @@ export function Divider(props: SeparatorProps): ReactNode {
   );
 }
 
-export interface MenuSectionProps<T extends object> extends Omit<
+export interface MenuSectionProps<T> extends Omit<
   AriaMenuSectionProps<T>,
   'style' | 'className' | 'render' | keyof GlobalDOMAttributes
 > {}
 
-export function MenuSection<T extends object>(props: MenuSectionProps<T>): ReactNode {
+export function MenuSection<T>(props: MenuSectionProps<T>): ReactNode {
   // remember, context doesn't work if it's around Section nor inside
   let {size} = useContext(InternalMenuContext);
   return (
@@ -833,8 +833,8 @@ function UnavailableMenuItemTrigger(props: UnavailableMenuItemTriggerProps): JSX
 export {MenuTrigger, SubmenuTrigger, UnavailableMenuItemTrigger};
 
 // This is purely so that storybook generates the types for both Menu and MenuTrigger
-interface ICombined<T extends object> extends MenuProps<T>, Omit<MenuTriggerProps, 'children'> {}
+interface ICombined<T> extends MenuProps<T>, Omit<MenuTriggerProps, 'children'> {}
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
-export function CombinedMenu<T extends object>(props: ICombined<T>): ReactNode {
+export function CombinedMenu<T>(props: ICombined<T>): ReactNode {
   return <div />;
 }

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

@@ -119,7 +119,7 @@ export interface PickerStyleProps {
 }
 
 type SelectionMode = 'single' | 'multiple';
-export interface PickerProps<T extends object, M extends SelectionMode = 'single'>
+export interface PickerProps<T, M extends SelectionMode = 'single'>
   extends
     Omit<
       AriaSelectProps<T, M>,
@@ -320,7 +320,7 @@ let InsideSelectValueContext = createContext(false);
  * limited.
  */
 export const Picker = /*#__PURE__*/ (forwardRef as forwardRefType)(function Picker<
-  T extends object,
+  T,
   M extends SelectionMode = 'single'
 >(props: PickerProps<T, M>, ref: FocusableRef<HTMLButtonElement>) {
   let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/s2');
@@ -570,7 +570,7 @@ let INTERACTIVE_ARIA_ROLES = new Set([
   'treeitem'
 ]);
 
-interface PickerButtonInnerProps<T extends object>
+interface PickerButtonInnerProps<T>
   extends
     PickerStyleProps,
     Omit<AriaSelectRenderProps, 'isRequired' | 'isFocused'>,
@@ -580,7 +580,7 @@ interface PickerButtonInnerProps<T extends object>
 }
 
 // Needs to be hidable component or otherwise the PressResponder throws a warning when rendered in the fake DOM and tries to register
-const PickerButton = createHideableComponent(function PickerButton<T extends object>(
+const PickerButton = createHideableComponent(function PickerButton<T>(
   props: PickerButtonInnerProps<T>
 ) {
   let {
@@ -880,11 +880,11 @@ function DefaultProvider({
   return <context.Provider value={value}>{children}</context.Provider>;
 }
 
-export interface PickerSectionProps<T extends object> extends Omit<
+export interface PickerSectionProps<T> extends Omit<
   ListBoxSectionProps<T>,
   'style' | 'className' | 'render' | keyof GlobalDOMAttributes
 > {}
-export function PickerSection<T extends object>(props: PickerSectionProps<T>): ReactNode {
+export function PickerSection<T>(props: PickerSectionProps<T>): ReactNode {
   let {size} = useContext(InternalPickerContext);
   return (
     <>

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

@@ -415,7 +415,7 @@ export function SelectBox(props: SelectBoxProps): ReactNode {
  * SelectBoxGroup allows users to select one or more options from a list.
  */
 export const SelectBoxGroup = /*#__PURE__*/ (forwardRef as forwardRefType)(function SelectBoxGroup<
-  T extends object
+  T
 >(props: SelectBoxGroupProps<T>, ref: DOMRef<HTMLDivElement>) {
   [props, ref] = useSpectrumContextProps(props, ref, SelectBoxGroupContext);
 

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

@@ -580,9 +580,10 @@ export interface TableBodyProps<T> extends Omit<
 /**
  * The body of a `<Table>`, containing the table rows.
  */
-export const TableBody = /*#__PURE__*/ (forwardRef as forwardRefType)(function TableBody<
-  T extends object
->(props: TableBodyProps<T>, ref: DOMRef<HTMLDivElement>) {
+export const TableBody = /*#__PURE__*/ (forwardRef as forwardRefType)(function TableBody<T>(
+  props: TableBodyProps<T>,
+  ref: DOMRef<HTMLDivElement>
+) {
   let {items, renderEmptyState, children, dependencies = []} = props;
   let domRef = useDOMRef(ref);
   let {loadingState, onLoadMore} = useContext(InternalTableContext);
@@ -1151,9 +1152,10 @@ export interface TableHeaderProps<T> extends Omit<
 /**
  * A header within a `<Table>`, containing the table columns.
  */
-export const TableHeader = /*#__PURE__*/ (forwardRef as forwardRefType)(function TableHeader<
-  T extends object
->({columns, dependencies, children}: TableHeaderProps<T>, ref: DOMRef<HTMLDivElement>) {
+export const TableHeader = /*#__PURE__*/ (forwardRef as forwardRefType)(function TableHeader<T>(
+  {columns, dependencies, children}: TableHeaderProps<T>,
+  ref: DOMRef<HTMLDivElement>
+) {
   let scale = useScale();
   let {selectionBehavior, selectionMode, allowsDragging} = useTableOptions();
   let {isQuiet, selectionStyle} = useContext(InternalTableContext);
@@ -2191,7 +2193,7 @@ export interface RowProps<T>
 /**
  * A row within a `<Table>`.
  */
-export const Row = /*#__PURE__*/ (forwardRef as forwardRefType)(function Row<T extends object>(
+export const Row = /*#__PURE__*/ (forwardRef as forwardRefType)(function Row<T>(
   {id, columns, children, dependencies = [], ...otherProps}: RowProps<T>,
   ref: DOMRef<HTMLDivElement>
 ) {
@@ -2264,9 +2266,10 @@ const FooterContext = createContext(false);
 /**
  * A footer within a `<Table>`, containing summary rows.
  */
-export const TableFooter = /*#__PURE__*/ (forwardRef as forwardRefType)(function TableFooter<
-  T extends object
->(props: TableFooterProps<T>, ref: DOMRef<HTMLDivElement>) {
+export const TableFooter = /*#__PURE__*/ (forwardRef as forwardRefType)(function TableFooter<T>(
+  props: TableFooterProps<T>,
+  ref: DOMRef<HTMLDivElement>
+) {
   let domRef = useDOMRef(ref);
 
   return (