useMultipleSelectionState

Manages state for multiple selection and focus in a collection.

install	`yarn add @react-stately/selection`
version	3.0.0-alpha.1
usage	`import {useMultipleSelectionState} from '@react-stately/selection'`

View repository

GitHub

View package

NPM

Introduction#

useMultipleSelectionState manages selection state for many components. Oftentimes, you won't need to use this hook directly, since it's included in hooks like useListState, and useSelectState. These expose a SelectionManager, which provides a higher level way to manipulate selection state.

API#

useMultipleSelectionState(props: MultipleSelection): MultipleSelectionState

Interface#

Properties

Name	Type	Description
`selectionMode`	`SelectionMode`
`disallowEmptySelection`	`boolean`
`selectedKeys`	`Selection`
`isFocused`	`boolean`
`focusedKey`	`Key`

Methods

Method	Description
`setSelectedKeys(keys: Selection \| (v: Selection) => Selection): void`
`setFocused(isFocused: boolean): void`
`setFocusedKey(key: Key): void`

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
`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.

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.

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.

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 a select component. Handles building a collection of items from props, handles the open state for the popup menu, and manages multiple selection state.

useSelectState<T>(props: SelectProps<T>): SelectState<T>

Name	Type	Description
`isOpen`	`boolean`	Sets the open state of the menu
`defaultOpen`	`boolean`	Sets the default open state of the menu
`onOpenChange`	`(isOpen: boolean) => void`	Method that is called when the open state of the menu changes
`shouldFlip`	`boolean`	Whether the menu should automatically flip direction when space is limited
`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.
`isDisabled`	`boolean`	Whether the input is disabled.
`isRequired`	`boolean`	Whether user input is required on the input before form submission. Often paired with the `necessityIndicator` prop to add a visual indicator to the input.
`validationState`	`ValidationState`	Whether the input should display its "valid" or "invalid" visual styling.
`isReadOnly`	`boolean`	Whether the input can be selected but not changed by the user.
`autoFocus`	`boolean`	Whether the element should receive focus on render
`onFocus`	`(e: FocusEvent) => void`	Handler that is called when the element receives focus.
`onBlur`	`(e: FocusEvent) => void`	Handler that is called when the element loses focus.
`onFocusChange`	`(isFocused: boolean) => void`	Handler that is called when the element's focus status changes.
`onKeyDown`	`(e: KeyboardEvent) => void`	Handler that is called when a key is pressed.
`onKeyUp`	`(e: KeyboardEvent) => void`	Handler that is called when a key is released.
`label`	`ReactNode`	The content to display as the label.
`placeholder`	`string`	Temporary text that occupies the text input when it is empty.
`disallowEmptySelection`	`boolean`	Whether the collection allows empty selection.
`selectedKey`	`Key`	The currently selected key in the collection (controlled).
`defaultSelectedKey`	`Key`	The initial selected key in the collection (uncontrolled).
`onSelectionChange`	`(key: Key) => any`	Handler that is called when the selection changes.

'valid' | 'invalid'

T & {stopPropagation: () => void,
continuePropagation: () => void
}

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'

Properties

Name	Type	Description
`selectionMode`	`SelectionMode`
`disallowEmptySelection`	`boolean`
`selectedKeys`	`Selection`
`isFocused`	`boolean`
`focusedKey`	`Key`

Methods

Method	Description
`setSelectedKeys(keys: Selection \| (v: Selection) => Selection): void`
`setFocused(isFocused: boolean): void`
`setFocusedKey(key: Key): void`