feat: Allow collection items to be values other than objects by devongovett · Pull Request #10047 · adobe/react-spectrum

devongovett · 2026-05-11T19:02:20Z

Sometimes it's annoying that the items prop on our collection components only accepts objects, and not other types (e.g. strings or numbers). This can be worked around by using array.map but then you have to worry about keys. The only reason we required objects before was because only objects can be keys in a WeakMap which we use for caching. So this PR removes that restriction by simply not caching values that aren't objects. We could use a regular Map but that would require diffing to remove items that are no longer in the list so we avoid memory leaks.

We also loosen the restriction of requiring an id in all cases, no longer throwing an error. Instead, if an id is not provided, we simply let the default id generation work (just as it does in static collections). A React key is still generated based on the index in this case.

Finally, I noticed that collection components didn't update during HMR if you changed the children function because it isn't a dependency by default. Making it a regular dependency would require everyone to use useCallback on their children functions which would be annoying. So now, only in development, we stringify the function and use that as a dependency. So if the code of the function changes, we invalidate the cache.

Note for reviewers: actual code changes are in useCachedChildren. The rest is just updating TS types.

rspbot · 2026-05-11T19:06:42Z

Build successful! 🎉

rspbot · 2026-05-11T19:06:43Z

## API Changes

react-aria-components

/react-aria-components:Autocomplete

-Autocomplete <T extends {}> {
+Autocomplete <T> {
   children: ReactNode
   defaultInputValue?: string
   disableAutoFocusFirst?: boolean = false
   disableVirtualFocus?: boolean = false
-  filter?: (string, string, Node<{}>) => boolean
+  filter?: (string, string, Node<T>) => boolean
   inputValue?: string
   onInputChange?: (string) => void
   slot?: string | null
 }

/react-aria-components:Breadcrumbs

-Breadcrumbs <T extends {}> {
+Breadcrumbs <T> {
   aria-describedby?: string
   aria-details?: string
   aria-label?: string
   children?: ReactNode | (T) => ReactNode
   className?: string = 'react-aria-Breadcrumbs'
   dependencies?: ReadonlyArray<any>
   id?: string
   isDisabled?: boolean
   items?: Iterable<T>
   onAction?: (Key) => void
   render?: DOMRenderFunction<keyof React.JSX.IntrinsicElements, undefined>
   slot?: string | null
   style?: CSSProperties
 }

/react-aria-components:ComboBox

-ComboBox <M extends SelectionMode = 'single', T extends {}> {
+ComboBox <M extends SelectionMode = 'single', T> {
   allowsCustomValue?: boolean
   allowsEmptyCollection?: boolean
   aria-describedby?: string
   aria-label?: string
   aria-labelledby?: string
   autoFocus?: boolean
   children?: ChildrenOrFunction<ComboBoxRenderProps>
   className?: ClassNameOrFunction<ComboBoxRenderProps> = 'react-aria-ComboBox'
   defaultFilter?: (string, string) => boolean
   defaultInputValue?: string
   defaultItems?: Iterable<T>
   defaultValue?: ValueType<SelectionMode>
   disabledKeys?: Iterable<Key>
   form?: string
   formValue?: 'text' | 'key' = 'key'
   id?: string
   inputValue?: string
   isDisabled?: boolean
   isInvalid?: boolean
   isReadOnly?: boolean
   isRequired?: boolean
   items?: Iterable<T>
   menuTrigger?: MenuTriggerAction = 'input'
   name?: string
   onBlur?: (FocusEvent<HTMLInputElement>) => void
   onChange?: (ChangeValueType<SelectionMode>) => void
   onFocus?: (FocusEvent<HTMLInputElement>) => void
   onFocusChange?: (boolean) => void
   onInputChange?: (string) => void
   onKeyDown?: (KeyboardEvent) => void
   onKeyUp?: (KeyboardEvent) => void
   onOpenChange?: (boolean, MenuTriggerAction) => void
   render?: DOMRenderFunction<keyof React.JSX.IntrinsicElements, ComboBoxRenderProps>
   selectionMode?: SelectionMode = 'single'
   shouldFocusWrap?: boolean
   slot?: string | null
   style?: StyleOrFunction<ComboBoxRenderProps>
   validate?: (ComboBoxValidationValue<SelectionMode>) => ValidationError | boolean | null | undefined
   validationBehavior?: 'native' | 'aria' = 'native'
   value?: ValueType<SelectionMode>
 }

/react-aria-components:ComboBoxValue

-ComboBoxValue <T extends {}> extends HTMLAttributes {
+ComboBoxValue <T> extends HTMLAttributes {
-  children?: ChildrenOrFunction<ComboBoxValueRenderProps<{}>>
-  className?: ClassNameOrFunction<ComboBoxValueRenderProps<{}>> = 'react-aria-ComboBoxValue'
+  children?: ChildrenOrFunction<ComboBoxValueRenderProps<T>>
+  className?: ClassNameOrFunction<ComboBoxValueRenderProps<T>> = 'react-aria-ComboBoxValue'
   placeholder?: ReactNode
-  render?: DOMRenderFunction<keyof React.JSX.IntrinsicElements, ComboBoxValueRenderProps<{}>>
-  style?: StyleOrFunction<ComboBoxValueRenderProps<{}>>
+  render?: DOMRenderFunction<keyof React.JSX.IntrinsicElements, ComboBoxValueRenderProps<T>>
+  style?: StyleOrFunction<ComboBoxValueRenderProps<T>>
 }

/react-aria-components:GridList

-GridList <T extends {}> {
+GridList <T> {
   aria-describedby?: string
   aria-details?: string
   aria-label?: string
   aria-labelledby?: string
   autoFocus?: boolean | FocusStrategy
-  children?: ReactNode | ({}) => ReactNode
+  children?: ReactNode | (T) => ReactNode
   className?: ClassNameOrFunction<GridListRenderProps> = 'react-aria-GridList'
   defaultSelectedKeys?: 'all' | Iterable<Key>
   dependencies?: ReadonlyArray<any>
   disabledBehavior?: DisabledBehavior = "all"
   disabledKeys?: Iterable<Key>
   disallowEmptySelection?: boolean
   disallowTypeAhead?: boolean = false
-  dragAndDropHooks?: DragAndDropHooks<NoInfer<{}>>
+  dragAndDropHooks?: DragAndDropHooks<NoInfer<T>>
   escapeKeyBehavior?: 'clearSelection' | 'none' = 'clearSelection'
   id?: string
   items?: Iterable<T>
   keyboardNavigationBehavior?: 'arrow' | 'tab' = 'arrow'
   onAction?: (Key) => void
   onSelectionChange?: (Selection) => void
   orientation?: Orientation = 'vertical'
   render?: DOMRenderFunction<keyof React.JSX.IntrinsicElements, GridListRenderProps>
   renderEmptyState?: (GridListRenderProps) => ReactNode
   selectedKeys?: 'all' | Iterable<Key>
   selectionBehavior?: SelectionBehavior = "toggle"
   selectionMode?: SelectionMode
   shouldSelectOnPressUp?: boolean
   slot?: string | null
   style?: StyleOrFunction<GridListRenderProps>
 }

/react-aria-components:GridListItem

-GridListItem <T extends {}> {
+GridListItem <T> {
   children?: ChildrenOrFunction<GridListItemRenderProps>
   className?: ClassNameOrFunction<GridListItemRenderProps> = 'react-aria-GridListItem'
   download?: boolean | string
   href?: Href
   hrefLang?: string
   id?: Key
   isDisabled?: boolean
   onAction?: () => void
   onClick?: (MouseEvent<FocusableElement>) => void
   onHoverChange?: (boolean) => void
   onHoverEnd?: (HoverEvent) => void
   onHoverStart?: (HoverEvent) => void
   onPress?: (PressEvent) => void
   onPressChange?: (boolean) => void
   onPressEnd?: (PressEvent) => void
   onPressStart?: (PressEvent) => void
   onPressUp?: (PressEvent) => void
   ping?: string
   referrerPolicy?: HTMLAttributeReferrerPolicy
   rel?: string
   render?: DOMRenderFunction<keyof React.JSX.IntrinsicElements, GridListItemRenderProps>
   routerOptions?: RouterOptions
   style?: StyleOrFunction<GridListItemRenderProps>
   target?: HTMLAttributeAnchorTarget
   textValue?: string
-  value?: {}
+  value?: T
 }

/react-aria-components:GridListSection

-GridListSection <T extends {}> {
+GridListSection <T extends any> {
   aria-label?: string
-  children?: ReactNode | ({}) => ReactElement
+  children?: ReactNode | (any) => ReactElement
   className?: string = 'react-aria-GridListSection'
   dependencies?: ReadonlyArray<any>
   id?: Key
-  items?: Iterable<{}>
+  items?: Iterable<any>
   render?: DOMRenderFunction<keyof React.JSX.IntrinsicElements, undefined>
   style?: CSSProperties
-  value?: {}
+  value?: any
 }

/react-aria-components:Section

-Section <T extends {}> {
+Section <T extends any> {
   aria-label?: string
-  children?: ReactNode | ({}) => ReactElement
+  children?: ReactNode | (any) => ReactElement
   className?: string
   dependencies?: ReadonlyArray<any>
   id?: Key
   items?: Iterable<T>
   style?: CSSProperties
-  value?: {}
+  value?: any
 }

/react-aria-components:Collection

-Collection <T extends {}> {
+Collection <T> {
   addIdAndValue?: boolean
-  children?: ReactNode | ({}) => ReactNode
+  children?: ReactNode | (T) => ReactNode
   dependencies?: ReadonlyArray<any>
   idScope?: Key
-  items?: Iterable<{}>
+  items?: Iterable<T>
 }

/react-aria-components:createBranchComponent

 createBranchComponent <E extends Element, P extends {
     children?: any
-}, T extends {}> {
+}, T> {
   CollectionNodeClass: {}<any> | string
   render: (P, ForwardedRef<E>, Node<T>) => ReactElement | null
   useChildren: (P) => ReactNode
 }

/react-aria-components:CollectionBuilder

-CollectionBuilder <C extends BaseCollection<{}>> {
+CollectionBuilder <C extends BaseCollection<any>> {
-  children: (BaseCollection<{}>) => ReactNode
+  children: (BaseCollection<any>) => ReactNode
   content: ReactNode
-  createCollection?: () => BaseCollection<{}>
+  createCollection?: () => BaseCollection<any>
 }

/react-aria-components:ListBox

-ListBox <T extends {}> {
+ListBox <T> {
   aria-describedby?: string
   aria-details?: string
   aria-label?: string
   aria-labelledby?: string
   autoFocus?: boolean | FocusStrategy
-  children?: ReactNode | ({}) => ReactNode
+  children?: ReactNode | (T) => ReactNode
   className?: ClassNameOrFunction<ListBoxRenderProps> = 'react-aria-ListBox'
   defaultSelectedKeys?: 'all' | Iterable<Key>
   dependencies?: ReadonlyArray<any>
   disabledKeys?: Iterable<Key>
   disallowEmptySelection?: boolean
-  dragAndDropHooks?: DragAndDropHooks<NoInfer<{}>>
+  dragAndDropHooks?: DragAndDropHooks<NoInfer<T>>
   escapeKeyBehavior?: 'clearSelection' | 'none' = 'clearSelection'
   id?: string
   items?: Iterable<T>
   layout?: 'stack' | 'grid' = 'stack'
   onBlur?: (FocusEvent<Target>) => void
   onFocus?: (FocusEvent<Target>) => void
   onFocusChange?: (boolean) => void
   onSelectionChange?: (Selection) => void
   orientation?: Orientation = 'vertical'
   render?: DOMRenderFunction<keyof React.JSX.IntrinsicElements, ListBoxRenderProps>
   renderEmptyState?: (ListBoxRenderProps) => ReactNode
   selectedKeys?: 'all' | Iterable<Key>
   selectionBehavior?: SelectionBehavior = "toggle"
   selectionMode?: SelectionMode
   shouldFocusOnHover?: boolean
   shouldFocusWrap?: boolean
   shouldSelectOnPressUp?: boolean
   slot?: string | null
   style?: StyleOrFunction<ListBoxRenderProps>
 }

/react-aria-components:ListBoxItem

-ListBoxItem <T extends {}> {
+ListBoxItem <T> {
   aria-label?: string
   children?: ChildrenOrFunction<T>
   className?: ClassNameOrFunction<ListBoxItemRenderProps> = 'react-aria-ListBoxItem'
   download?: boolean | string
   href?: Href
   hrefLang?: string
   id?: Key
   isDisabled?: boolean
   onAction?: () => void
   onBlur?: (FocusEvent<HTMLDivElement>) => void
   onClick?: (MouseEvent<FocusableElement>) => void
   onFocus?: (FocusEvent<HTMLDivElement>) => void
   onFocusChange?: (boolean) => void
   onHoverChange?: (boolean) => void
   onHoverEnd?: (HoverEvent) => void
   onHoverStart?: (HoverEvent) => void
   onKeyDown?: (KeyboardEvent) => void
   onKeyUp?: (KeyboardEvent) => void
   onPress?: (PressEvent) => void
   onPressChange?: (boolean) => void
   onPressEnd?: (PressEvent) => void
   onPressStart?: (PressEvent) => void
   onPressUp?: (PressEvent) => void
   ping?: string
   referrerPolicy?: HTMLAttributeReferrerPolicy
   rel?: string
   render?: (DetailedHTMLProps<LinkWithRequiredHref, HTMLAnchorElement> | React.JSX.IntrinsicElements[keyof React.JSX.IntrinsicElements], ListBoxItemRenderProps) => ReactElement
   routerOptions?: RouterOptions
   style?: StyleOrFunction<T>
   target?: HTMLAttributeAnchorTarget
   textValue?: string
-  value?: {}
+  value?: T
 }

/react-aria-components:ListBoxSection

-ListBoxSection <T extends {}> {
+ListBoxSection <T> {
   aria-label?: string
-  children?: ReactNode | ({}) => ReactElement
+  children?: ReactNode | (T) => ReactElement
   className?: string = 'react-aria-ListBoxSection'
   dependencies?: ReadonlyArray<any>
   id?: Key
-  items?: Iterable<{}>
+  items?: Iterable<T>
   render?: DOMRenderFunction<keyof React.JSX.IntrinsicElements, undefined>
   style?: CSSProperties
-  value?: {}
+  value?: T
 }

/react-aria-components:Menu

-Menu <T extends {}> {
+Menu <T> {
   aria-describedby?: string
   aria-details?: string
   aria-label?: string
   aria-labelledby?: string
   autoFocus?: boolean | FocusStrategy
-  children?: ReactNode | ({}) => ReactNode
+  children?: ReactNode | (T) => ReactNode
   className?: ClassNameOrFunction<MenuRenderProps> = 'react-aria-Menu'
   defaultSelectedKeys?: 'all' | Iterable<Key>
   dependencies?: ReadonlyArray<any>
   disabledKeys?: Iterable<Key>
   escapeKeyBehavior?: 'clearSelection' | 'none' = 'clearSelection'
   id?: string
   items?: Iterable<T>
   onAction?: (Key) => void
   onClose?: () => void
   onSelectionChange?: (Selection) => void
   render?: DOMRenderFunction<keyof React.JSX.IntrinsicElements, MenuRenderProps>
   renderEmptyState?: () => ReactNode
   selectedKeys?: 'all' | Iterable<Key>
   selectionMode?: SelectionMode
   shouldCloseOnSelect?: boolean
   shouldFocusWrap?: boolean
   slot?: string | null
   style?: StyleOrFunction<MenuRenderProps>
 }

/react-aria-components:MenuItem

-MenuItem <T extends {}> {
+MenuItem <T> {
   aria-label?: string
   children?: ChildrenOrFunction<T>
   className?: ClassNameOrFunction<MenuItemRenderProps> = 'react-aria-MenuItem'
   download?: boolean | string
   href?: Href
   hrefLang?: string
   id?: Key
   isDisabled?: boolean
   onAction?: () => void
   onBlur?: (FocusEvent<Target>) => void
   onClick?: (MouseEvent<FocusableElement>) => void
   onFocus?: (FocusEvent<Target>) => void
   onFocusChange?: (boolean) => void
   onHoverChange?: (boolean) => void
   onHoverEnd?: (HoverEvent) => void
   onHoverStart?: (HoverEvent) => void
   onPress?: (PressEvent) => void
   onPressChange?: (boolean) => void
   onPressEnd?: (PressEvent) => void
   onPressStart?: (PressEvent) => void
   onPressUp?: (PressEvent) => void
   ping?: string
   referrerPolicy?: HTMLAttributeReferrerPolicy
   rel?: string
   render?: (DetailedHTMLProps<LinkWithRequiredHref, HTMLAnchorElement> | React.JSX.IntrinsicElements[keyof React.JSX.IntrinsicElements], MenuItemRenderProps) => ReactElement
   routerOptions?: RouterOptions
   shouldCloseOnSelect?: boolean
   style?: StyleOrFunction<T>
   target?: HTMLAttributeAnchorTarget
   textValue?: string
-  value?: {}
+  value?: T
 }

/react-aria-components:MenuSection

-MenuSection <T extends {}> {
+MenuSection <T> {
   aria-label?: string
-  children?: ReactNode | ({}) => ReactElement
+  children?: ReactNode | (T) => ReactElement
   className?: string = 'react-aria-MenuSection'
   defaultSelectedKeys?: 'all' | Iterable<Key>
   dependencies?: ReadonlyArray<any>
   disallowEmptySelection?: boolean
   id?: Key
-  items?: Iterable<{}>
+  items?: Iterable<T>
   onSelectionChange?: (Selection) => void
   render?: DOMRenderFunction<keyof React.JSX.IntrinsicElements, undefined>
   selectedKeys?: 'all' | Iterable<Key>
   selectionMode?: SelectionMode
   shouldCloseOnSelect?: boolean
   style?: CSSProperties
-  value?: {}
+  value?: T
 }

/react-aria-components:Select

-Select <M extends SelectionMode = 'single', T extends {} = {
-  
-}> {
+Select <M extends SelectionMode = 'single', T> {
   allowsEmptyCollection?: boolean
   aria-describedby?: string
   aria-details?: string
   aria-labelledby?: string
   autoComplete?: string
   autoFocus?: boolean
   children?: ChildrenOrFunction<SelectRenderProps>
   className?: ClassNameOrFunction<SelectRenderProps> = 'react-aria-Select'
   defaultOpen?: boolean
   defaultValue?: ValueType<SelectionMode>
   disabledKeys?: Iterable<Key>
   excludeFromTabOrder?: boolean
   form?: string
   id?: string
   isDisabled?: boolean
   isInvalid?: boolean
   isOpen?: boolean
   isRequired?: boolean
   name?: string
   onBlur?: (FocusEvent<Target>) => void
   onChange?: (ChangeValueType<SelectionMode>) => void
   onFocus?: (FocusEvent<Target>) => void
   onFocusChange?: (boolean) => void
   onKeyDown?: (KeyboardEvent) => void
   onKeyUp?: (KeyboardEvent) => void
   onOpenChange?: (boolean) => void
   placeholder?: string = 'Select an item' (localized)
   render?: DOMRenderFunction<keyof React.JSX.IntrinsicElements, SelectRenderProps>
   selectionMode?: SelectionMode = 'single'
   shouldCloseOnSelect?: boolean
   slot?: string | null
   style?: StyleOrFunction<SelectRenderProps>
   validate?: (ValidationType<SelectionMode>) => ValidationError | boolean | null | undefined
   validationBehavior?: 'native' | 'aria' = 'native'
   value?: ValueType<SelectionMode>
 }

/react-aria-components:SelectValue

-SelectValue <T extends {}> extends HTMLAttributes {
+SelectValue <T> extends HTMLAttributes {
-  children?: ChildrenOrFunction<SelectValueRenderProps<{}>>
-  className?: ClassNameOrFunction<SelectValueRenderProps<{}>> = 'react-aria-SelectValue'
-  render?: DOMRenderFunction<keyof React.JSX.IntrinsicElements, SelectValueRenderProps<{}>>
-  style?: StyleOrFunction<SelectValueRenderProps<{}>>
+  children?: ChildrenOrFunction<SelectValueRenderProps<T>>
+  className?: ClassNameOrFunction<SelectValueRenderProps<T>> = 'react-aria-SelectValue'
+  render?: DOMRenderFunction<keyof React.JSX.IntrinsicElements, SelectValueRenderProps<T>>
+  style?: StyleOrFunction<SelectValueRenderProps<T>>
 }

/react-aria-components:Row

-Row <T extends {}> {
+Row <T extends any> {
-  children?: ReactNode | ({}) => ReactElement
+  children?: ReactNode | (any) => ReactElement
   className?: ClassNameOrFunction<RowRenderProps> = 'react-aria-Row'
-  columns?: Iterable<{}>
+  columns?: Iterable<any>
   dependencies?: ReadonlyArray<any>
   disabledBehavior?: DisabledBehavior
   download?: boolean | string
   hasChildItems?: boolean
   href?: Href
   hrefLang?: string
   id?: Key
   isDisabled?: boolean
   onAction?: () => void
   onClick?: (MouseEvent<FocusableElement>) => void
   onHoverChange?: (boolean) => void
   onHoverEnd?: (HoverEvent) => void
   onHoverStart?: (HoverEvent) => void
   onPress?: (PressEvent) => void
   onPressChange?: (boolean) => void
   onPressEnd?: (PressEvent) => void
   onPressStart?: (PressEvent) => void
   onPressUp?: (PressEvent) => void
   ping?: string
   referrerPolicy?: HTMLAttributeReferrerPolicy
   rel?: string
   render?: DOMRenderFunction<keyof React.JSX.IntrinsicElements, RowRenderProps>
   routerOptions?: RouterOptions
   style?: StyleOrFunction<RowRenderProps>
   target?: HTMLAttributeAnchorTarget
   textValue?: string
-  value?: {}
+  value?: any
 }

/react-aria-components:TableHeader

-TableHeader <T extends {}> {
+TableHeader <T extends any> {
-  children?: ReactNode | ({}) => ReactElement
+  children?: ReactNode | (any) => ReactElement
   className?: ClassNameOrFunction<TableHeaderRenderProps> = 'react-aria-TableHeader'
-  columns?: Iterable<{}>
+  columns?: Iterable<any>
   dependencies?: ReadonlyArray<any>
   onHoverChange?: (boolean) => void
   onHoverEnd?: (HoverEvent) => void
   onHoverStart?: (HoverEvent) => void
   style?: StyleOrFunction<TableHeaderRenderProps>
 }

/react-aria-components:TableBody

-TableBody <T extends {}> {
+TableBody <T extends any> {
   children?: ReactNode | (T) => ReactNode
   className?: ClassNameOrFunction<TableBodyRenderProps> = 'react-aria-TableBody'
   dependencies?: ReadonlyArray<any>
   render?: DOMRenderFunction<keyof React.JSX.IntrinsicElements, TableBodyRenderProps>
   renderEmptyState?: (TableBodyRenderProps) => ReactNode
   style?: StyleOrFunction<TableBodyRenderProps>
 }

/react-aria-components:TableFooter

-TableFooter <T extends {}> {
+TableFooter <T extends any> {
   children?: ReactNode | (T) => ReactNode
   className?: string = 'react-aria-TableFooter'
   dependencies?: ReadonlyArray<any>
   style?: CSSProperties
 }

/react-aria-components:TabList

-TabList <T extends {}> {
+TabList <T> {
   aria-describedby?: string
   aria-details?: string
   aria-label?: string
   children?: ReactNode | (T) => ReactNode
   className?: ClassNameOrFunction<TabListRenderProps> = 'react-aria-TabList'
   dependencies?: ReadonlyArray<any>
   items?: Iterable<T>
   render?: DOMRenderFunction<keyof React.JSX.IntrinsicElements, TabListRenderProps>
   style?: StyleOrFunction<TabListRenderProps>
 }

/react-aria-components:TabPanels

-TabPanels <T extends {}> {
+TabPanels <T> {
   children?: ReactNode | (T) => ReactNode
   className?: string = 'react-aria-TabPanels'
   dependencies?: ReadonlyArray<any>
   render?: DOMRenderFunction<keyof React.JSX.IntrinsicElements, undefined>
   style?: CSSProperties
 }

/react-aria-components:TagList

-TagList <T extends {}> {
+TagList <T> {
   children?: ReactNode | (T) => ReactNode
   className?: ClassNameOrFunction<TagListRenderProps> = 'react-aria-TagList'
   dependencies?: ReadonlyArray<any>
   render?: DOMRenderFunction<keyof React.JSX.IntrinsicElements, TagListRenderProps>
   renderEmptyState?: (TagListRenderProps) => ReactNode
   style?: StyleOrFunction<TagListRenderProps>
 }

/react-aria-components:TreeLoadMoreItem

-TreeLoadMoreItem <T extends {}> {
+TreeLoadMoreItem <T> {
   children?: ChildrenOrFunction<TreeLoadMoreItemRenderProps>
   className?: ClassNameOrFunction<TreeLoadMoreItemRenderProps> = 'react-aria-TreeLoadMoreItem'
   isLoading?: boolean
   render?: DOMRenderFunction<keyof React.JSX.IntrinsicElements, TreeLoadMoreItemRenderProps>
   scrollOffset?: number = 1
   style?: StyleOrFunction<TreeLoadMoreItemRenderProps>
 }

/react-aria-components:Tree

-Tree <T extends {}> {
+Tree <T> {
   aria-describedby?: string
   aria-details?: string
   aria-label?: string
   aria-labelledby?: string
   autoFocus?: boolean | FocusStrategy
-  children?: ReactNode | ({}) => ReactNode
+  children?: ReactNode | (T) => ReactNode
   className?: ClassNameOrFunction<TreeRenderProps> = 'react-aria-Tree'
   defaultExpandedKeys?: Iterable<Key>
   defaultSelectedKeys?: 'all' | Iterable<Key>
   dependencies?: ReadonlyArray<any>
   disabledBehavior?: DisabledBehavior = 'all'
   disabledKeys?: Iterable<Key>
   disallowEmptySelection?: boolean
-  dragAndDropHooks?: DragAndDropHooks<NoInfer<{}>>
+  dragAndDropHooks?: DragAndDropHooks<NoInfer<T>>
   escapeKeyBehavior?: 'clearSelection' | 'none' = 'clearSelection'
   expandedKeys?: Iterable<Key>
   id?: string
   items?: Iterable<T>
   onExpandedChange?: (Set<Key>) => any
   onSelectionChange?: (Selection) => void
   render?: DOMRenderFunction<keyof React.JSX.IntrinsicElements, TreeRenderProps>
   renderEmptyState?: (TreeEmptyStateRenderProps) => ReactNode
   selectedKeys?: 'all' | Iterable<Key>
   selectionBehavior?: SelectionBehavior = "toggle"
   selectionMode?: SelectionMode
   shouldSelectOnPressUp?: boolean
   slot?: string | null
   style?: StyleOrFunction<TreeRenderProps>
 }

/react-aria-components:TreeItem

-TreeItem <T extends {}> {
+TreeItem <T extends any> {
   aria-label?: string
   children: ReactNode
   className?: ClassNameOrFunction<TreeItemRenderProps> = 'react-aria-TreeItem'
   download?: boolean | string
   hasChildItems?: boolean
   href?: Href
   hrefLang?: string
   id?: Key
   isDisabled?: boolean
   onAction?: () => void
   onClick?: (MouseEvent<FocusableElement>) => void
   onHoverChange?: (boolean) => void
   onHoverEnd?: (HoverEvent) => void
   onHoverStart?: (HoverEvent) => void
   onPress?: (PressEvent) => void
   onPressChange?: (boolean) => void
   onPressEnd?: (PressEvent) => void
   onPressStart?: (PressEvent) => void
   onPressUp?: (PressEvent) => void
   ping?: string
   referrerPolicy?: HTMLAttributeReferrerPolicy
   rel?: string
   render?: DOMRenderFunction<keyof React.JSX.IntrinsicElements, TreeItemRenderProps>
   routerOptions?: RouterOptions
   style?: StyleOrFunction<TreeItemRenderProps>
   target?: HTMLAttributeAnchorTarget
   textValue: string
-  value?: {}
+  value?: any
 }

/react-aria-components:TreeSection

-TreeSection <T extends {}> {
+TreeSection <T extends any> {
   aria-label?: string
-  children?: ReactNode | ({}) => ReactElement
+  children?: ReactNode | (any) => ReactElement
   className?: string
   dependencies?: ReadonlyArray<any>
   id?: Key
-  items?: Iterable<{}>
+  items?: Iterable<any>
   render?: DOMRenderFunction<keyof React.JSX.IntrinsicElements, undefined>
   style?: CSSProperties
-  value?: {}
+  value?: any
 }

/react-aria-components:ComboBoxProps

-ComboBoxProps <M extends SelectionMode = 'single', T extends {}> {
+ComboBoxProps <M extends SelectionMode = 'single', T> {
   allowsCustomValue?: boolean
   allowsEmptyCollection?: boolean
   aria-describedby?: string
   aria-label?: string
   aria-labelledby?: string
   autoFocus?: boolean
   children?: ChildrenOrFunction<ComboBoxRenderProps>
   className?: ClassNameOrFunction<ComboBoxRenderProps> = 'react-aria-ComboBox'
   defaultFilter?: (string, string) => boolean
   defaultInputValue?: string
   defaultItems?: Iterable<T>
   defaultValue?: ValueType<SelectionMode>
   disabledKeys?: Iterable<Key>
   form?: string
   formValue?: 'text' | 'key' = 'key'
   id?: string
   inputValue?: string
   isDisabled?: boolean
   isInvalid?: boolean
   isReadOnly?: boolean
   isRequired?: boolean
   items?: Iterable<T>
   menuTrigger?: MenuTriggerAction = 'input'
   name?: string
   onBlur?: (FocusEvent<HTMLInputElement>) => void
   onChange?: (ChangeValueType<SelectionMode>) => void
   onFocus?: (FocusEvent<HTMLInputElement>) => void
   onFocusChange?: (boolean) => void
   onInputChange?: (string) => void
   onKeyDown?: (KeyboardEvent) => void
   onKeyUp?: (KeyboardEvent) => void
   onOpenChange?: (boolean, MenuTriggerAction) => void
   render?: DOMRenderFunction<keyof React.JSX.IntrinsicElements, ComboBoxRenderProps>
   selectionMode?: SelectionMode = 'single'
   shouldFocusWrap?: boolean
   slot?: string | null
   style?: StyleOrFunction<ComboBoxRenderProps>
   validate?: (ComboBoxValidationValue<SelectionMode>) => ValidationError | boolean | null | undefined
   validationBehavior?: 'native' | 'aria' = 'native'
   value?: ValueType<SelectionMode>
 }

/react-aria-components:ComboBoxValueProps

-ComboBoxValueProps <T extends {}> {
+ComboBoxValueProps <T> {
-  children?: ChildrenOrFunction<ComboBoxValueRenderProps<{}>>
-  className?: ClassNameOrFunction<ComboBoxValueRenderProps<{}>> = 'react-aria-ComboBoxValue'
+  children?: ChildrenOrFunction<ComboBoxValueRenderProps<T>>
+  className?: ClassNameOrFunction<ComboBoxValueRenderProps<T>> = 'react-aria-ComboBoxValue'
   placeholder?: ReactNode
-  render?: DOMRenderFunction<keyof React.JSX.IntrinsicElements, ComboBoxValueRenderProps<{}>>
-  style?: StyleOrFunction<ComboBoxValueRenderProps<{}>>
+  render?: DOMRenderFunction<keyof React.JSX.IntrinsicElements, ComboBoxValueRenderProps<T>>
+  style?: StyleOrFunction<ComboBoxValueRenderProps<T>>
 }

/react-aria-components:SelectProps

-SelectProps <M extends SelectionMode = 'single', T extends {} = {
-  
-}> {
+SelectProps <M extends SelectionMode = 'single', T> {
   allowsEmptyCollection?: boolean
   aria-describedby?: string
   aria-details?: string
   aria-labelledby?: string
   autoComplete?: string
   autoFocus?: boolean
   children?: ChildrenOrFunction<SelectRenderProps>
   className?: ClassNameOrFunction<SelectRenderProps> = 'react-aria-Select'
   defaultOpen?: boolean
   defaultValue?: ValueType<SelectionMode>
   disabledKeys?: Iterable<Key>
   excludeFromTabOrder?: boolean
   form?: string
   id?: string
   isDisabled?: boolean
   isInvalid?: boolean
   isOpen?: boolean
   isRequired?: boolean
   name?: string
   onBlur?: (FocusEvent<Target>) => void
   onChange?: (ChangeValueType<SelectionMode>) => void
   onFocus?: (FocusEvent<Target>) => void
   onFocusChange?: (boolean) => void
   onKeyDown?: (KeyboardEvent) => void
   onKeyUp?: (KeyboardEvent) => void
   onOpenChange?: (boolean) => void
   placeholder?: string = 'Select an item' (localized)
   render?: DOMRenderFunction<keyof React.JSX.IntrinsicElements, SelectRenderProps>
   selectionMode?: SelectionMode = 'single'
   shouldCloseOnSelect?: boolean
   slot?: string | null
   style?: StyleOrFunction<SelectRenderProps>
   validate?: (ValidationType<SelectionMode>) => ValidationError | boolean | null | undefined
   validationBehavior?: 'native' | 'aria' = 'native'
   value?: ValueType<SelectionMode>
 }

/react-aria-components:SelectValueProps

-SelectValueProps <T extends {}> {
+SelectValueProps <T> {
-  children?: ChildrenOrFunction<SelectValueRenderProps<{}>>
-  className?: ClassNameOrFunction<SelectValueRenderProps<{}>> = 'react-aria-SelectValue'
-  render?: DOMRenderFunction<keyof React.JSX.IntrinsicElements, SelectValueRenderProps<{}>>
-  style?: StyleOrFunction<SelectValueRenderProps<{}>>
+  children?: ChildrenOrFunction<SelectValueRenderProps<T>>
+  className?: ClassNameOrFunction<SelectValueRenderProps<T>> = 'react-aria-SelectValue'
+  render?: DOMRenderFunction<keyof React.JSX.IntrinsicElements, SelectValueRenderProps<T>>
+  style?: StyleOrFunction<SelectValueRenderProps<T>>
 }

@react-aria/collections

/@react-aria/collections:CollectionBuilder

-CollectionBuilder <C extends BaseCollection<{}>> {
+CollectionBuilder <C extends BaseCollection<any>> {
-  children: (BaseCollection<{}>) => ReactNode
+  children: (BaseCollection<any>) => ReactNode
   content: ReactNode
-  createCollection?: () => BaseCollection<{}>
+  createCollection?: () => BaseCollection<any>
 }

/@react-aria/collections:createBranchComponent

 createBranchComponent <E extends Element, P extends {
     children?: any
-}, T extends {}> {
+}, T> {
   CollectionNodeClass: {}<any> | string
   render: (P, ForwardedRef<E>, Node<T>) => ReactElement | null
   useChildren: (P) => ReactNode
 }

/@react-aria/collections:Collection

-Collection <T extends {}> {
+Collection <T> {
   addIdAndValue?: boolean
-  children?: ReactNode | ({}) => ReactNode
+  children?: ReactNode | (T) => ReactNode
   dependencies?: ReadonlyArray<any>
   idScope?: Key
-  items?: Iterable<{}>
+  items?: Iterable<T>
 }

/@react-aria/collections:useCachedChildren

-useCachedChildren <T extends {}> {
+useCachedChildren <T> {
   props: CachedChildrenOptions<T>
   returnVal: undefined
 }

/@react-aria/collections:CollectionBuilderProps

-CollectionBuilderProps <C extends BaseCollection<{}>> {
+CollectionBuilderProps <C extends BaseCollection<any>> {
-  children: (BaseCollection<{}>) => ReactNode
+  children: (BaseCollection<any>) => ReactNode
   content: ReactNode
-  createCollection?: () => BaseCollection<{}>
+  createCollection?: () => BaseCollection<any>
 }

@react-spectrum/s2

/@react-spectrum/s2:ActionMenu

-ActionMenu <T extends {}> {
+ActionMenu <T> {
   UNSAFE_className?: UnsafeClassName
   UNSAFE_style?: CSSProperties
   align?: 'start' | 'end' = 'start'
   aria-details?: string
   aria-label?: string
   aria-labelledby?: string
   autoFocus?: boolean
   children: ReactNode | (T) => ReactNode
   defaultOpen?: boolean
   direction?: 'bottom' | 'top' | 'left' | 'right' | 'start' | 'end' = 'bottom'
   disabledKeys?: Iterable<Key>
   id?: string
   isDisabled?: boolean
   isOpen?: boolean
   isQuiet?: boolean
   items?: Iterable<T>
   menuSize?: 'S' | 'M' | 'L' | 'XL' = 'M'
   onAction?: (Key) => void
   onOpenChange?: (boolean) => void
   shouldCloseOnSelect?: boolean
   shouldFlip?: boolean = true
   size?: 'XS' | 'S' | 'M' | 'L' | 'XL' = 'M'
   styles?: StylesProp
 }

/@react-spectrum/s2:Breadcrumbs

-Breadcrumbs <T extends {}> {
+Breadcrumbs <T> {
   UNSAFE_className?: UnsafeClassName
   UNSAFE_style?: CSSProperties
   aria-describedby?: string
   aria-details?: string
   aria-label?: string
   aria-labelledby?: string
-  children: ReactNode | ({}) => ReactNode
+  children: ReactNode | (T) => ReactNode
   dependencies?: ReadonlyArray<any>
   id?: string
   isDisabled?: boolean
   items?: Iterable<T>
   size?: 'M' | 'L' = 'M'
   slot?: string | null
   styles?: StylesProp
 }

/@react-spectrum/s2:CardView

-CardView <T extends {}> {
+CardView <T> {
   UNSAFE_className?: UnsafeClassName
   UNSAFE_style?: CSSProperties
   aria-describedby?: string
   aria-label?: string
   aria-labelledby?: string
   autoFocus?: boolean | FocusStrategy
   children?: ReactNode | (T) => ReactNode
   defaultSelectedKeys?: 'all' | Iterable<Key>
   density?: 'compact' | 'regular' | 'spacious' = 'regular'
   dependencies?: ReadonlyArray<any>
   disabledBehavior?: DisabledBehavior = "all"
   disabledKeys?: Iterable<Key>
   disallowEmptySelection?: boolean
   disallowTypeAhead?: boolean = false
   dragAndDropHooks?: DragAndDropHooks<NoInfer<T>>
   escapeKeyBehavior?: 'clearSelection' | 'none' = 'clearSelection'
   id?: string
   items?: Iterable<T>
   layout?: 'grid' | 'waterfall' = 'grid'
   loadingState?: LoadingState
   onAction?: (Key) => void
   onLoadMore?: () => void
   onSelectionChange?: (Selection) => void
   orientation?: Orientation = 'vertical'
   renderActionBar?: ('all' | Set<Key>) => ReactElement
   renderEmptyState?: (GridListRenderProps) => ReactNode
   selectedKeys?: 'all' | Iterable<Key>
   selectionMode?: SelectionMode
   selectionStyle?: 'checkbox' | 'highlight' = 'checkbox'
   shouldSelectOnPressUp?: boolean
   size?: 'XS' | 'S' | 'M' | 'L' | 'XL' = 'M'
   slot?: string | null
   styles?: StylesPropWithHeight
   variant?: 'primary' | 'secondary' | 'tertiary' | 'quiet' = 'primary'
 }

/@react-spectrum/s2:ComboBox

-ComboBox <T extends {}> {
+ComboBox <T> {
   UNSAFE_className?: UnsafeClassName
   UNSAFE_style?: CSSProperties
   align?: 'start' | 'end' = 'start'
   allowsCustomValue?: boolean
   aria-describedby?: string
   aria-details?: string
   aria-label?: string
   aria-labelledby?: string
   autoFocus?: boolean
-  children: ReactNode | ({}) => ReactNode
+  children: ReactNode | (T) => ReactNode
   contextualHelp?: ReactNode
   defaultInputValue?: string
   defaultItems?: Iterable<T>
   defaultSelectedKey?: Key | null
   description?: ReactNode
   direction?: 'bottom' | 'top' = 'bottom'
   disabledKeys?: Iterable<Key>
   errorMessage?: ReactNode | (ValidationResult) => ReactNode
   form?: string
   formValue?: 'text' | 'key' = 'key'
   id?: string
   inputValue?: string
   isDisabled?: boolean
   isInvalid?: boolean
   isReadOnly?: boolean
   isRequired?: boolean
   items?: Iterable<T>
   label?: ReactNode
   labelAlign?: Alignment = 'start'
   labelPosition?: LabelPosition = 'top'
   loadingState?: LoadingState
   menuTrigger?: MenuTriggerAction = 'input'
   menuWidth?: number
   name?: string
   necessityIndicator?: NecessityIndicator = 'icon'
   onBlur?: (FocusEvent<HTMLInputElement>) => void
   onFocus?: (FocusEvent<HTMLInputElement>) => void
   onFocusChange?: (boolean) => void
   onInputChange?: (string) => void
   onKeyDown?: (KeyboardEvent) => void
   onKeyUp?: (KeyboardEvent) => void
   onLoadMore?: () => any
   onOpenChange?: (boolean, MenuTriggerAction) => void
   onSelectionChange?: (Key | null) => void
   placeholder?: string
   selectedKey?: Key | null
   shouldFlip?: boolean = true
   shouldFocusWrap?: boolean
   size?: 'S' | 'M' | 'L' | 'XL' = 'M'
   slot?: string | null
   styles?: StylesProp
   validate?: (ComboBoxValidationValue<SelectionMode>) => ValidationError | boolean | null | undefined
   validationBehavior?: 'native' | 'aria' = 'native'
 }

/@react-spectrum/s2:ComboBoxSection

-ComboBoxSection <T extends {}> {
+ComboBoxSection <T> {
   aria-label?: string
   children?: ReactNode | (T) => ReactElement
   dependencies?: ReadonlyArray<any>
   items?: Iterable<T>
   value?: T
 }

/@react-spectrum/s2:ListView

-ListView <T extends {}> {
+ListView <T> {
   UNSAFE_className?: UnsafeClassName
   UNSAFE_style?: CSSProperties
   aria-describedby?: string
   aria-details?: string
   aria-label?: string
   aria-labelledby?: string
   autoFocus?: boolean | FocusStrategy
-  children: ReactNode | ({}) => ReactNode
+  children: ReactNode | (T) => ReactNode
   defaultSelectedKeys?: 'all' | Iterable<Key>
   dependencies?: ReadonlyArray<any>
   disabledBehavior?: DisabledBehavior = "all"
   disabledKeys?: Iterable<Key>
   disallowTypeAhead?: boolean = false
   escapeKeyBehavior?: 'clearSelection' | 'none' = 'clearSelection'
   hideLinkOutIcon?: boolean
   id?: string
   isQuiet?: boolean
   items?: Iterable<T>
   loadingState?: LoadingState
   onAction?: (Key) => void
   onLoadMore?: () => void
   onSelectionChange?: (Selection) => void
   overflowMode?: 'wrap' | 'truncate' = 'truncate'
   renderActionBar?: ('all' | Set<Key>) => ReactElement
   renderEmptyState?: (GridListRenderProps) => ReactNode
   selectedKeys?: 'all' | Iterable<Key>
   selectionMode?: SelectionMode
   selectionStyle?: 'highlight' | 'checkbox' = 'checkbox'
   shouldSelectOnPressUp?: boolean
   slot?: string | null
   styles?: StylesPropWithHeight
 }

/@react-spectrum/s2:Menu

-Menu <T extends {}> {
+Menu <T> {
   UNSAFE_className?: UnsafeClassName
   UNSAFE_style?: CSSProperties
   aria-describedby?: string
   aria-details?: string
   aria-label?: string
   aria-labelledby?: string
   autoFocus?: boolean | FocusStrategy
-  children: ReactNode | ({}) => ReactNode
+  children: ReactNode | (T) => ReactNode
   defaultSelectedKeys?: 'all' | Iterable<Key>
   disabledKeys?: Iterable<Key>
   disallowEmptySelection?: boolean
   escapeKeyBehavior?: 'clearSelection' | 'none' = 'clearSelection'
   id?: string
   items?: Iterable<T>
   onAction?: (Key) => void
   onClose?: () => void
   onSelectionChange?: (Selection) => void
   selectedKeys?: 'all' | Iterable<Key>
   selectionMode?: SelectionMode
   shouldCloseOnSelect?: boolean
   shouldFocusWrap?: boolean
   size?: 'S' | 'M' | 'L' | 'XL' = 'M'
   slot?: string | null
   styles?: StylesProp
 }

/@react-spectrum/s2:MenuSection

-MenuSection <T extends {}> {
+MenuSection <T> {
   aria-label?: string
   children?: ReactNode | (T) => ReactElement
   defaultSelectedKeys?: 'all' | Iterable<Key>
   disallowEmptySelection?: boolean
   id?: Key
   items?: Iterable<T>
   onSelectionChange?: (Selection) => void
   selectedKeys?: 'all' | Iterable<Key>
   selectionMode?: SelectionMode
   shouldCloseOnSelect?: boolean
   value?: T
 }

/@react-spectrum/s2:Picker

-Picker <M extends SelectionMode = 'single', T extends {}> {
+Picker <M extends SelectionMode = 'single', T> {
   UNSAFE_className?: UnsafeClassName
   UNSAFE_style?: CSSProperties
   align?: 'start' | 'end' = 'start'
   aria-describedby?: string
   aria-details?: string
   aria-label?: string
   aria-labelledby?: string
   autoComplete?: string
   autoFocus?: boolean
-  children: ReactNode | ({}) => ReactNode
+  children: ReactNode | (T) => ReactNode
   contextualHelp?: ReactNode
   defaultOpen?: boolean
   defaultValue?: ValueType<SelectionMode>
   dependencies?: ReadonlyArray<any>
   description?: ReactNode
   direction?: 'bottom' | 'top' = 'bottom'
   disabledKeys?: Iterable<Key>
   errorMessage?: ReactNode | (ValidationResult) => ReactNode
   excludeFromTabOrder?: boolean
   form?: string
   id?: string
   isDisabled?: boolean
   isInvalid?: boolean
   isOpen?: boolean
   isQuiet?: boolean
   isRequired?: boolean
   items?: Iterable<T>
   label?: ReactNode
   labelAlign?: Alignment = 'start'
   labelPosition?: LabelPosition = 'top'
   loadingState?: LoadingState
   menuWidth?: number
   name?: string
   necessityIndicator?: NecessityIndicator = 'icon'
   onBlur?: (FocusEvent<Target>) => void
   onChange?: (ChangeValueType<SelectionMode>) => void
   onFocus?: (FocusEvent<Target>) => void
   onFocusChange?: (boolean) => void
   onKeyDown?: (KeyboardEvent) => void
   onKeyUp?: (KeyboardEvent) => void
   onLoadMore?: () => any
   onOpenChange?: (boolean) => void
   placeholder?: string = 'Select an item' (localized)
-  renderValue?: (Array<{}>) => ReactNode
+  renderValue?: (Array<T>) => ReactNode
   selectionMode?: SelectionMode = 'single'
   shouldCloseOnSelect?: boolean
   shouldFlip?: boolean = true
   size?: 'S' | 'M' | 'L' | 'XL' = 'M'
   styles?: StylesProp
   validate?: (ValidationType<SelectionMode>) => ValidationError | boolean | null | undefined
   validationBehavior?: 'native' | 'aria' = 'native'
   value?: ValueType<SelectionMode>
 }

/@react-spectrum/s2:PickerSection

-PickerSection <T extends {}> {
+PickerSection <T> {
   aria-label?: string
   children?: ReactNode | (T) => ReactElement
   dependencies?: ReadonlyArray<any>
   items?: Iterable<T>
   value?: T
 }

/@react-spectrum/s2:SelectBoxGroup

-SelectBoxGroup <T extends {}> {
+SelectBoxGroup <T> {
   UNSAFE_className?: UnsafeClassName
   UNSAFE_style?: CSSProperties
   aria-describedby?: string
   aria-details?: string
   aria-label?: string
   aria-labelledby?: string
   autoFocus?: boolean | FocusStrategy
-  children: ReactNode | ({}) => ReactNode
+  children: ReactNode | (T) => ReactNode
   defaultSelectedKeys?: 'all' | Iterable<Key>
   disabledKeys?: Iterable<Key>
   disallowEmptySelection?: boolean
   escapeKeyBehavior?: 'clearSelection' | 'none' = 'clearSelection'
   isDisabled?: boolean
   items?: Iterable<T>
   onBlur?: (FocusEvent<Target>) => void
   onFocus?: (FocusEvent<Target>) => void
   onFocusChange?: (boolean) => void
   onSelectionChange?: (Selection) => void
   orientation?: Orientation = 'vertical'
   selectedKeys?: 'all' | Iterable<Key>
   selectionMode?: 'single' | 'multiple' = 'single'
   slot?: string | null
   styles?: StylesProp
 }

/@react-spectrum/s2:TableHeader

-TableHeader <T extends {}> {
+TableHeader <T> {
   children?: ReactNode | (T) => ReactElement
   columns?: Iterable<T>
   dependencies?: ReadonlyArray<any>

/@react-spectrum/s2:TableBody

-TableBody <T extends {}> {
+TableBody <T> {
   children?: ReactNode | (T) => ReactNode
   dependencies?: ReadonlyArray<any>
   items?: Iterable<T>
 }

/@react-spectrum/s2:Row

-Row <T extends {}> {
+Row <T> {
   children?: ReactNode | (T) => ReactElement
   columns?: Iterable<T>
   dependencies?: ReadonlyArray<any>
   href?: Href
   hrefLang?: string
   id?: Key
   isDisabled?: boolean
   onAction?: () => void
   ping?: string
   referrerPolicy?: HTMLAttributeReferrerPolicy
   rel?: string
   routerOptions?: RouterOptions
   target?: HTMLAttributeAnchorTarget
   textValue?: string
 }

/@react-spectrum/s2:TableFooter

-TableFooter <T extends {}> {
+TableFooter <T> {
   children?: ReactNode | (T) => ReactNode
   dependencies?: ReadonlyArray<any>
   items?: Iterable<T>

/@react-spectrum/s2:TabList

-TabList <T extends {}> {
+TabList <T> {
   UNSAFE_className?: UnsafeClassName
   UNSAFE_style?: CSSProperties
   aria-describedby?: string
   aria-details?: string
-  children: ReactNode | ({}) => ReactNode
+  children: ReactNode | (T) => ReactNode
   dependencies?: ReadonlyArray<any>
   items?: Iterable<T>
   styles?: StylesProp
 }

/@react-spectrum/s2:TagGroup

-TagGroup <T extends {}> {
+TagGroup <T> {
   UNSAFE_className?: UnsafeClassName
   UNSAFE_style?: CSSProperties
   aria-describedby?: string
   aria-label?: string
   aria-labelledby?: string
   children?: ReactNode | (T) => ReactNode
   contextualHelp?: ReactNode
   defaultSelectedKeys?: 'all' | Iterable<Key>
   description?: ReactNode
   disabledKeys?: Iterable<Key>
   disallowEmptySelection?: boolean
   errorMessage?: ReactNode
   escapeKeyBehavior?: 'clearSelection' | 'none' = 'clearSelection'
   groupActionLabel?: string
   id?: string
   isEmphasized?: boolean
   isInvalid?: boolean
   items?: Iterable<T>
   label?: ReactNode
   labelAlign?: Alignment = 'start'
   labelPosition?: LabelPosition = 'top'
   maxRows?: number
   onAction?: (Key) => void
   onGroupAction?: () => void
   onRemove?: (Set<Key>) => void
   onSelectionChange?: (Selection) => void
   renderEmptyState?: () => ReactNode
   selectedKeys?: 'all' | Iterable<Key>
   selectionBehavior?: SelectionBehavior = 'toggle'
   selectionMode?: SelectionMode
   shouldSelectOnPressUp?: boolean
   size?: 'S' | 'M' | 'L' = 'M'
   slot?: string | null
   styles?: StylesProp
 }

/@react-spectrum/s2:TreeView

-TreeView <T extends {}> {
+TreeView <T> {
   UNSAFE_className?: UnsafeClassName
   UNSAFE_style?: CSSProperties
   aria-describedby?: string
   aria-label?: string
   aria-labelledby?: string
   autoFocus?: boolean | FocusStrategy
   children?: ReactNode | (T) => ReactNode
   defaultExpandedKeys?: Iterable<Key>
   defaultSelectedKeys?: 'all' | Iterable<Key>
   dependencies?: ReadonlyArray<any>
   disabledBehavior?: DisabledBehavior = 'all'
   disabledKeys?: Iterable<Key>
   disallowEmptySelection?: boolean
   escapeKeyBehavior?: 'clearSelection' | 'none' = 'clearSelection'
   expandedKeys?: Iterable<Key>
   id?: string
   items?: Iterable<T>
   onAction?: (Key) => void
   onExpandedChange?: (Set<Key>) => any
   onSelectionChange?: (Selection) => void
   renderActionBar?: ('all' | Set<Key>) => ReactElement
   renderEmptyState?: (TreeEmptyStateRenderProps) => ReactNode
   selectedKeys?: 'all' | Iterable<Key>
   selectionMode?: SelectionMode
   selectionStyle?: 'highlight' | 'checkbox' = 'checkbox'
   shouldSelectOnPressUp?: boolean
   slot?: string | null
   styles?: StylesPropWithHeight
 }

/@react-spectrum/s2:Autocomplete

-Autocomplete <T extends {}> {
+Autocomplete <T> {
   children: ReactNode
   defaultInputValue?: string
   disableAutoFocusFirst?: boolean = false
   disableVirtualFocus?: boolean = false
-  filter?: (string, string, Node<{}>) => boolean
+  filter?: (string, string, Node<T>) => boolean
   inputValue?: string
   onInputChange?: (string) => void
   slot?: string | null
 }

/@react-spectrum/s2:Collection

-Collection <T extends {}> {
+Collection <T> {
   addIdAndValue?: boolean
-  children?: ReactNode | ({}) => ReactNode
+  children?: ReactNode | (T) => ReactNode
   dependencies?: ReadonlyArray<any>
   idScope?: Key
-  items?: Iterable<{}>
+  items?: Iterable<T>
 }

/@react-spectrum/s2:ComboBoxProps

-ComboBoxProps <T extends {}> {
+ComboBoxProps <T> {
   UNSAFE_className?: UnsafeClassName
   UNSAFE_style?: CSSProperties
   align?: 'start' | 'end' = 'start'
   allowsCustomValue?: boolean
   aria-describedby?: string
   aria-details?: string
   aria-label?: string
   aria-labelledby?: string
   autoFocus?: boolean
-  children: ReactNode | ({}) => ReactNode
+  children: ReactNode | (T) => ReactNode
   contextualHelp?: ReactNode
   defaultInputValue?: string
   defaultItems?: Iterable<T>
   defaultSelectedKey?: Key | null
   description?: ReactNode
   direction?: 'bottom' | 'top' = 'bottom'
   disabledKeys?: Iterable<Key>
   errorMessage?: ReactNode | (ValidationResult) => ReactNode
   form?: string
   formValue?: 'text' | 'key' = 'key'
   id?: string
   inputValue?: string
   isDisabled?: boolean
   isInvalid?: boolean
   isReadOnly?: boolean
   isRequired?: boolean
   items?: Iterable<T>
   label?: ReactNode
   labelAlign?: Alignment = 'start'
   labelPosition?: LabelPosition = 'top'
   loadingState?: LoadingState
   menuTrigger?: MenuTriggerAction = 'input'
   menuWidth?: number
   name?: string
   necessityIndicator?: NecessityIndicator = 'icon'
   onBlur?: (FocusEvent<HTMLInputElement>) => void
   onFocus?: (FocusEvent<HTMLInputElement>) => void
   onFocusChange?: (boolean) => void
   onInputChange?: (string) => void
   onKeyDown?: (KeyboardEvent) => void
   onKeyUp?: (KeyboardEvent) => void
   onLoadMore?: () => any
   onOpenChange?: (boolean, MenuTriggerAction) => void
   onSelectionChange?: (Key | null) => void
   placeholder?: string
   selectedKey?: Key | null
   shouldFlip?: boolean = true
   shouldFocusWrap?: boolean
   size?: 'S' | 'M' | 'L' | 'XL' = 'M'
   slot?: string | null
   styles?: StylesProp
   validate?: (ComboBoxValidationValue<SelectionMode>) => ValidationError | boolean | null | undefined
   validationBehavior?: 'native' | 'aria' = 'native'
 }

/@react-spectrum/s2:ComboBoxSectionProps

-ComboBoxSectionProps <T extends {}> {
+ComboBoxSectionProps <T> {
   aria-label?: string
   children?: ReactNode | (T) => ReactElement
   dependencies?: ReadonlyArray<any>
   items?: Iterable<T>
   value?: T
 }

/@react-spectrum/s2:MenuSectionProps

-MenuSectionProps <T extends {}> {
+MenuSectionProps <T> {
   aria-label?: string
   children?: ReactNode | (T) => ReactElement
   defaultSelectedKeys?: 'all' | Iterable<Key>
   disallowEmptySelection?: boolean
   id?: Key
   items?: Iterable<T>
   onSelectionChange?: (Selection) => void
   selectedKeys?: 'all' | Iterable<Key>
   selectionMode?: SelectionMode
   shouldCloseOnSelect?: boolean
   value?: T
 }

/@react-spectrum/s2:PickerProps

-PickerProps <M extends SelectionMode = 'single', T extends {}> {
+PickerProps <M extends SelectionMode = 'single', T> {
   UNSAFE_className?: UnsafeClassName
   UNSAFE_style?: CSSProperties
   align?: 'start' | 'end' = 'start'
   aria-describedby?: string
   aria-details?: string
   aria-label?: string
   aria-labelledby?: string
   autoComplete?: string
   autoFocus?: boolean
-  children: ReactNode | ({}) => ReactNode
+  children: ReactNode | (T) => ReactNode
   contextualHelp?: ReactNode
   defaultOpen?: boolean
   defaultValue?: ValueType<SelectionMode>
   dependencies?: ReadonlyArray<any>
   description?: ReactNode
   direction?: 'bottom' | 'top' = 'bottom'
   disabledKeys?: Iterable<Key>
   errorMessage?: ReactNode | (ValidationResult) => ReactNode
   excludeFromTabOrder?: boolean
   form?: string
   id?: string
   isDisabled?: boolean
   isInvalid?: boolean
   isOpen?: boolean
   isQuiet?: boolean
   isRequired?: boolean
   items?: Iterable<T>
   label?: ReactNode
   labelAlign?: Alignment = 'start'
   labelPosition?: LabelPosition = 'top'
   loadingState?: LoadingState
   menuWidth?: number
   name?: string
   necessityIndicator?: NecessityIndicator = 'icon'
   onBlur?: (FocusEvent<Target>) => void
   onChange?: (ChangeValueType<SelectionMode>) => void
   onFocus?: (FocusEvent<Target>) => void
   onFocusChange?: (boolean) => void
   onKeyDown?: (KeyboardEvent) => void
   onKeyUp?: (KeyboardEvent) => void
   onLoadMore?: () => any
   onOpenChange?: (boolean) => void
   placeholder?: string = 'Select an item' (localized)
-  renderValue?: (Array<{}>) => ReactNode
+  renderValue?: (Array<T>) => ReactNode
   selectionMode?: SelectionMode = 'single'
   shouldCloseOnSelect?: boolean
   shouldFlip?: boolean = true
   size?: 'S' | 'M' | 'L' | 'XL' = 'M'
   styles?: StylesProp
   validate?: (ValidationType<SelectionMode>) => ValidationError | boolean | null | undefined
   validationBehavior?: 'native' | 'aria' = 'native'
   value?: ValueType<SelectionMode>
 }

/@react-spectrum/s2:PickerSectionProps

-PickerSectionProps <T extends {}> {
+PickerSectionProps <T> {
   aria-label?: string
   children?: ReactNode | (T) => ReactElement
   dependencies?: ReadonlyArray<any>
   items?: Iterable<T>
   value?: T
 }

@react-spectrum/tree

/@react-spectrum/tree:Collection

-Collection <T extends {}> {
+Collection <T> {
   addIdAndValue?: boolean
-  children?: ReactNode | ({}) => ReactNode
+  children?: ReactNode | (T) => ReactNode
   dependencies?: ReadonlyArray<any>
   idScope?: Key
-  items?: Iterable<{}>
+  items?: Iterable<T>
 }

@react-stately/collections

/@react-stately/collections:useCollection

-useCollection <C extends Collection<Node<T>> = Collection<Node<T>>, T extends {}> {
+useCollection <C extends Collection<Node<T>> = Collection<Node<T>>, T> {
   props: CollectionOptions<T, C>
   factory: CollectionFactory<T, C>
   context?: unknown
 }

@react-stately/combobox

/@react-stately/combobox:useComboBoxState

-useComboBoxState <M extends SelectionMode = 'single', T extends {}> {
+useComboBoxState <M extends SelectionMode = 'single', T> {
   props: ComboBoxStateOptions<T, M>
   returnVal: undefined
 }

@react-stately/list

/@react-stately/list:useListState

-useListState <T extends {}> {
+useListState <T> {
   props: ListProps<T>
   returnVal: undefined
 }

/@react-stately/list:UNSTABLE_useFilteredListState

-UNSTABLE_useFilteredListState <T extends {}> {
+UNSTABLE_useFilteredListState <T> {
   state: ListState<T>
   filterFn: (string, Node<T>) => boolean | null | undefined
   returnVal: undefined

@react-stately/select

/@react-stately/select:useSelectState

-useSelectState <M extends SelectionMode = 'single', T extends {}> {
+useSelectState <M extends SelectionMode = 'single', T> {
   props: SelectStateOptions<T, M>
   returnVal: undefined
 }

@react-stately/tree

/@react-stately/tree:useTreeState

-useTreeState <T extends {}> {
+useTreeState <T> {
   props: TreeProps<T>
   returnVal: undefined
 }

snowystinger · 2026-05-12T04:38:59Z

-  layout = 'grid',
-  ...props
-}: GridListProps<T>) {
+export function GridList<T>({children, layout = 'grid', ...props}: GridListProps<T>) {


annoying that the formatter changes this one :-/

snowystinger · 2026-05-12T04:45:21Z

                </Text>
              </SearchField>
-              <Menu className={styles.menu} items={dynamicAutocompleteSubdialog} {...args}>
+              <Menu<MenuNode>


why is this needed now?

I think because it had T extends object before it inferred item to be object, but without that now it's unknown.

do we consider it breaking? or was object realistically so broad that we should have had this?

feat: Allow collection items to be values other than objects

75ea541

github-actions Bot added ComboBox ListBox TableView Tabs Picker Breadcrumbs TagGroup ActionMenu TreeView CardView RAC Autocomplete S2 GridList Table Menu Select SelectBoxGroup Tree labels May 11, 2026

snowystinger reviewed May 12, 2026

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

feat: Allow collection items to be values other than objects#10047
devongovett wants to merge 1 commit into
mainfrom
collection-literals

devongovett commented May 11, 2026 •

edited

Loading

Uh oh!

rspbot commented May 11, 2026

Uh oh!

rspbot commented May 11, 2026

Uh oh!

Uh oh!

snowystinger May 12, 2026

Uh oh!

snowystinger May 12, 2026

Uh oh!

devongovett May 12, 2026

Uh oh!

snowystinger May 13, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Conversation

devongovett commented May 11, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

rspbot commented May 11, 2026

Uh oh!

rspbot commented May 11, 2026

react-aria-components

/react-aria-components:Autocomplete

/react-aria-components:Breadcrumbs

/react-aria-components:ComboBox

/react-aria-components:ComboBoxValue

/react-aria-components:GridList

/react-aria-components:GridListItem

/react-aria-components:GridListSection

/react-aria-components:Section

/react-aria-components:Collection

/react-aria-components:createBranchComponent

/react-aria-components:CollectionBuilder

/react-aria-components:ListBox

/react-aria-components:ListBoxItem

/react-aria-components:ListBoxSection

/react-aria-components:Menu

/react-aria-components:MenuItem

/react-aria-components:MenuSection

/react-aria-components:Select

/react-aria-components:SelectValue

/react-aria-components:Row

/react-aria-components:TableHeader

/react-aria-components:TableBody

/react-aria-components:TableFooter

/react-aria-components:TabList

/react-aria-components:TabPanels

/react-aria-components:TagList

/react-aria-components:TreeLoadMoreItem

/react-aria-components:Tree

/react-aria-components:TreeItem

/react-aria-components:TreeSection

/react-aria-components:ComboBoxProps

/react-aria-components:ComboBoxValueProps

/react-aria-components:SelectProps

/react-aria-components:SelectValueProps

@react-aria/collections

/@react-aria/collections:CollectionBuilder

/@react-aria/collections:createBranchComponent

/@react-aria/collections:Collection

/@react-aria/collections:useCachedChildren

/@react-aria/collections:CollectionBuilderProps

@react-spectrum/s2

/@react-spectrum/s2:ActionMenu

/@react-spectrum/s2:Breadcrumbs

/@react-spectrum/s2:CardView

/@react-spectrum/s2:ComboBox

/@react-spectrum/s2:ComboBoxSection

/@react-spectrum/s2:ListView

/@react-spectrum/s2:Menu

/@react-spectrum/s2:MenuSection

/@react-spectrum/s2:Picker

/@react-spectrum/s2:PickerSection

/@react-spectrum/s2:SelectBoxGroup

/@react-spectrum/s2:TableHeader

/@react-spectrum/s2:TableBody

/@react-spectrum/s2:Row

/@react-spectrum/s2:TableFooter

/@react-spectrum/s2:TabList

/@react-spectrum/s2:TagGroup

/@react-spectrum/s2:TreeView

/@react-spectrum/s2:Autocomplete

/@react-spectrum/s2:Collection

/@react-spectrum/s2:ComboBoxProps

/@react-spectrum/s2:ComboBoxSectionProps

/@react-spectrum/s2:MenuSectionProps

/@react-spectrum/s2:PickerProps

/@react-spectrum/s2:PickerSectionProps

@react-spectrum/tree

/@react-spectrum/tree:Collection

@react-stately/collections

/@react-stately/collections:useCollection

@react-stately/combobox

/@react-stately/combobox:useComboBoxState

devongovett commented May 11, 2026 •

edited

Loading