Collection interface

A generic interface to access a readonly sequential collection of unique keyed items.

Introduction#

The Collection interface provides a generic representation for many types of collections. The collection is read only (immutable), and sequential (ordered). Each item has a unique key that identifies it, which can be used to access items. It's like a combination of an array and a map: you can iterate over items in a well defined order, and also access items by key.

Interface#

Properties

Name	Type	Description
`size`	`number`	The number of items in the collection.

Methods

Method	Description
`getKeys(): Iterable<Key>`	Iterate over all keys in the collection.
`getItem(key: Key): T`	Get an item by its key.
`getKeyBefore(key: Key): Key \| null`	Get the key that comes before the given key in the collection.
`getKeyAfter(key: Key): Key \| null`	Get the key that comes after the given key in the collection.
`getFirstKey(): Key \| null`	Get the first key in the collection.
`getLastKey(): Key \| null`	Get the last key in the collection.

Building a collection#

The Collection interface can be implemented in many ways. For example, you could write a class to expose the required methods and properties for an underlying data structure like an array or Map.

As discussed on the Collection Components page, React Spectrum implements a JSX-based API for defining collections. This is implemented by the CollectionBuilder class. CollectionBuilder iterates over the JSX tree, and recursively builds a collection of Node objects. Each node includes the value of the item it represents, along with some metadata about its place in the collection.

These nodes are then wrapped in a class that implements the Collection interface, and exposes the nodes. State management hooks like useListState and useTreeState handle building the collection and exposing the necessary interface to components.

When implementing collection components using react-aria hooks like useListBox, and useSelect, you'll iterate over these nodes to render the data in the collection. The properties exposed by a node are described below.

Node interface#

Name	Type	Description
`type`	`string`	The type of item this node represents.
`key`	`Key`	A unique key for the node.
`value`	`T`	The object value the node was created from.
`level`	`number`	The level of depth this node is at in the heirarchy.
`hasChildNodes`	`boolean`	Whether this item has children, even if not loaded yet.
`childNodes`	`Iterable<Node<T>>`	The loaded children of this node.
`rendered`	`ReactNode`	The rendered contents of this node (e.g. JSX).
`textValue`	`string`	A string value for this node, used for features like typeahead.
`aria-label`	`string`	An accessibility label for this node.
`index`	`number`	The index of this node within its parent.
`wrapper`	`(element: ReactElement) => ReactElement`	A function that should be called to wrap the rendered node.
`parentKey`	`Key`	The key of the parent node.
`prevKey`	`Key`	The key of the node before this node.
`nextKey`	`Key`	The key of the node after this node.
`props`	`any`	Additional properties specific to a particular node type.
`shouldInvalidate`	`(context: unknown) => boolean`

A generic interface to access a readonly sequential collection of unique keyed items.

Properties

Name	Type	Description
`size`	`number`	The number of items in the collection.

Methods

Method	Description
`getKeys(): Iterable<Key>`	Iterate over all keys in the collection.
`getItem(key: Key): T`	Get an item by its key.
`getKeyBefore(key: Key): Key \| null`	Get the key that comes before the given key in the collection.
`getKeyAfter(key: Key): Key \| null`	Get the key that comes after the given key in the collection.
`getFirstKey(): Key \| null`	Get the first key in the collection.
`getLastKey(): Key \| null`	Get the last key in the collection.

Method	Description
`build(props: CollectionBase<T>, context: unknown): void`

Name	Type	Description
`children`	`ReactElement<SectionProps<T>> \| ReactElement<ItemProps<T>> \| ReactElement<SectionProps<T>> \| ReactElement<ItemProps<T>>[] \| (item: T) => ReactElement<SectionProps<T>> \| ReactElement<ItemProps<T>>`	The contents of the collection.
`disabledKeys`	`Iterable<Key>`	They item keys that are disabled. These items cannot be selected, focused, or otherwise interacted with.
`items`	`Iterable<T>`	Item objects in the collection or section.
`itemKey`	`string`	Property name on each item object to use as the unique key. `id` or `key` by default.
`isLoading`	`boolean`	Whether the items are currently loading.
`onLoadMore`	`() => any`	Handler that is called when more items should be loaded, e.g. while scrolling near the bottom.

Name	Type	Description
`title`	`ReactNode`	Rendered contents of the section, e.g. a header.
`aria-label`	`string`	An accessibility label for the section.
`children`	`ReactElement<ItemProps<T>> \| ReactElement<ItemProps<T>>[] \| (item: T) => ReactElement<ItemProps<T>>`	Static child items or a function to render children.
`uniqueKey`	`Key`	A unique key for the section.
`items`	`Iterable<T>`	Item objects in the collection or section.
`itemKey`	`string`	Property name on each item object to use as the unique key. `id` or `key` by default.
`isLoading`	`boolean`	Whether the items are currently loading.
`onLoadMore`	`() => any`	Handler that is called when more items should be loaded, e.g. while scrolling near the bottom.

Name	Type	Description
`children`	`ReactNode`	Rendered contents of the item or child items.
`title`	`ReactNode`	Rendered contents of the item if `children` contains child items.
`textValue`	`string`	A string representation of the item's contents, used for features like typeahead.
`aria-label`	`string`	An accessibility label for this item.
`childItems`	`Iterable<T>`	A list of child item objects. Used for dynamic collections.
`hasChildItems`	`boolean`	Whether this item has children, even if not loaded yet.
`uniqueKey`	`Key`	A unique key for this item.

Provides state management for list-like components. Handles building a collection of items from props, and manages multiple selection state.

useListState<T>(props: CollectionBase<T> & MultipleSelection): ListState<T>

Name	Type	Description
`selectionMode`	`SelectionMode`	The type of selection that is allowed in the collection.
`disallowEmptySelection`	`boolean`	Whether the collection allows empty selection.
`selectedKeys`	`'all' \| Iterable<Key>`	The currently selected keys in the collection (controlled).
`defaultSelectedKeys`	`'all' \| Iterable<Key>`	The initial selected keys in the collection (uncontrolled).
`onSelectionChange`	`(keys: Selection) => any`	Handler that is called when the selection changes.

'none' | 'single' | 'multiple'

'all' | Set<Key>

Name	Type	Description
`collection`	`Collection<Node<T>>`	A collection of items in the list.
`disabledKeys`	`Set<Key>`	A set of items that are disabled.
`selectionManager`	`SelectionManager`	A selection manager to read and update multiple selection state.

An interface for reading and updating multiple selection state.

Properties

Name	Type	Description
`selectionMode`	`SelectionMode`	The type of selection that is allowed in the collection.
`disallowEmptySelection`	`boolean`	Whether the collection allows empty selection.
`isFocused`	`boolean`	Whether the collection is currently focused.
`focusedKey`	`Key`	The current focused key in the collection.
`selectedKeys`	`Set<Key>`	The currently selected keys in the collection.
`isEmpty`	`any`	Whether the selection is empty.
`isSelectAll`	`any`	Whether all items in the collection are selected.

Methods

Method	Description
`setFocused(isFocused: boolean): void`	Sets whether the collection is focused.
`setFocusedKey(key: Key): void`	Sets the focused key.
`isSelected(key: Key): void`	Returns whether a key is selected.
`extendSelection(toKey: Key): void`	Extends the selection to the given key.
`toggleSelection(key: Key): void`	Toggles whether the given key is selected.
`replaceSelection(key: Key): void`	Replaces the selection with only the given key.
`selectAll(): void`	Selects all items in the collection.
`clearSelection(): void`	Removes all keys from the selection.
`toggleSelectAll(): void`	Toggles between select all and an empty selection.

Provides state management for tree-like components. Handles building a collection of items from props, item expanded state, and manages multiple selection state.

useTreeState<T>(props: CollectionBase<T> & Expandable & MultipleSelection): TreeState<T>

Name	Type	Description
`expandedKeys`	`Iterable<Key>`	The currently expanded keys in the collection (controlled).
`defaultExpandedKeys`	`Iterable<Key>`	The initial expanded keys in the collection (uncontrolled).
`onExpandedChange`	`(keys: Set<Key>) => any`	Handler that is called when items are expanded or collapsed.

Name	Type	Description
`collection`	`Collection<Node<T>>`	A collection of items in the tree.
`disabledKeys`	`Set<Key>`	A set of keys for items that are disabled.
`expandedKeys`	`Set<Key>`	A set of keys for items that are expanded.
`toggleKey`	`(key: Key) => void`	Toggles the expanded state for an item by its key.
`selectionManager`	`SelectionManager`	A selection manager to read and update multiple selection state.

Provides the behavior and accessibility implementation for a listbox component. A listbox displays a list of options and allows a user to select one or more of them.

useListBox<T>(props: AriaListBoxProps, state: ListState<T>): ListBoxAria

Name	Type	Description
`ref`	`RefObject<HTMLDivElement>`	A ref to the listbox container element.
`isVirtualized`	`boolean`	Whether the listbox uses virtual scrolling.
`keyboardDelegate`	`KeyboardDelegate`	An optional keyboard delegate implementation for type to select, to override the default.
`autoFocus`	`boolean \| FocusStrategy`	Whether the auto focus the listbox or an option.
`shouldFocusWrap`	`boolean`	Whether focus should wrap around when the end/start is reached.

Method	Description
`getKeyBelow(key: Key): Key`	Returns the key visually below the given one, or `null` for none.
`getKeyAbove(key: Key): Key`	Returns the key visually above the given one, or `null` for none.
`getKeyLeftOf(key: Key): Key`	Returns the key visually to the left of the given one, or `null` for none.
`getKeyRightOf(key: Key): Key`	Returns the key visually to the right of the given one, or `null` for none.
`getKeyPageBelow(key: Key): Key`	Returns the key visually one page below the given one, or `null` for none.
`getKeyPageAbove(key: Key): Key`	Returns the key visually one page above the given one, or `null` for none.
`getFirstKey(key: Key, global: boolean): Key`	Returns the first key, or `null` for none.
`getLastKey(key: Key, global: boolean): Key`	Returns the last key, or `null` for none.
`getKeyForSearch(search: string, fromKey: Key): Key`	Returns the next key after `fromKey` that matches the given search string, or `null` for none.

Name	Type	Description
`listBoxProps`	`HTMLAttributes<HTMLElement>`	Props for the listbox element.

Provides the behavior and accessibility implementation for a select component. A select displays a collapsible list of options and allows a user to select one of them.

useSelect<T>(props: SelectProps, state: SelectState<T>): SelectAria

Name	Type	Description
`triggerRef`	`RefObject<HTMLElement>`	A ref to the trigger element.
`keyboardDelegate`	`KeyboardDelegate`	An optional keyboard delegate implementation for type to select, to override the default.

Properties

Name	Type	Description
`selectedKey`	`Key`	The key for the currently selected item.
`setSelectedKey`	`(key: Key) => void`	Sets the selected key.
`selectedItem`	`Node<T>`	The value of the currently selected item.
`isFocused`	`boolean`	Whether the select is currently focused.
`setFocused`	`(isFocused: boolean) => void`	Sets whether the select is focused.
`collection`	`Collection<Node<T>>`	A collection of items in the list.
`disabledKeys`	`Set<Key>`	A set of items that are disabled.
`selectionManager`	`SelectionManager`	A selection manager to read and update multiple selection state.
`isOpen`	`boolean`	Whether the menu is currently open.
`focusStrategy`	`FocusStrategy`	Controls which item will be auto focused when the menu opens.

Methods

Method	Description
`setOpen(value: boolean): void`	Sets whether the menu is open.
`setFocusStrategy(value: FocusStrategy): void`	Sets which item will be auto focused when the menu opens.
`open(): void`	Opens the menu.
`close(): void`	Closes the menu.
`toggle(focusStrategy: FocusStrategy \| null): void`	Toggles the menu.

'first' | 'last'

Name	Type	Description
`labelProps`	`HTMLAttributes<HTMLElement>`	Props for the label element.
`triggerProps`	`HTMLAttributes<HTMLElement> & PressProps`	Props for the popup trigger element.
`valueProps`	`HTMLAttributes<HTMLElement>`	Props for the element representing the selected value.
`menuProps`	`HTMLAttributes<HTMLElement>`	Props for the popup.

Name	Type	Description
`isPressed`	`boolean`	Whether the target is in a controlled press state (e.g. an overlay it triggers is open).
`isDisabled`	`boolean`	Whether the press events should be disabled.
`onPress`	`(e: PressEvent) => void`	Handler that is called when the press is released over the target.
`onPressStart`	`(e: PressEvent) => void`	Handler that is called when a press interaction starts.
`onPressEnd`	`(e: PressEvent) => void`	Handler that is called when a press interation ends, either over the target or when the pointer leaves the target.
`onPressChange`	`(isPressed: boolean) => void`	Handler that is called when the press state changes.
`onPressUp`	`(e: PressEvent) => void`	Handler that is called when a press is released over the target, regardless of whether it started on the target or not.

Name	Type	Description
`type`	`'pressstart' \| 'pressend' \| 'pressup' \| 'press'`	The type of press event being fired.
`pointerType`	`PointerType`	The pointer type that triggered the press event.
`target`	`HTMLElement`	The target element of the press event.
`shiftKey`	`boolean`	Whether the shift keyboard modifier was held during the press event.
`ctrlKey`	`boolean`	Whether the ctrl keyboard modifier was held during the press event.
`metaKey`	`boolean`	Whether the meta keyboard modifier was held during the press event.

'mouse'
  | 'pen'
  | 'touch'
  | 'keyboard'
  | 'virtual'