SearchListControl

Component to display a searchable, selectable list of items.

Usage

jsx

<SearchListControl
	list={ list }
	isLoading={ loading }
	selected={ selected }
	onChange={ items => setState( { selected: items } ) }
/>

Name	Type	Default	Description
`className`	String	`null`	Additional CSS classes
`isHierarchical`	Boolean	`null`	Whether the list of items is hierarchical or not. If true, each list item is expected to have a parent property
`isLoading`	Boolean	`null`	Whether the list of items is still loading
`isSingle`	Boolean	`null`	Restrict selections to one item
`list`	Array	`null`	A complete list of item objects, each with id, name properties. This is displayed as a clickable/keyboard-able list, and possibly filtered by the search term (searches name)
`messages`	Object	`null`	Messages displayed or read to the user. Configure these to reflect your object type. See `defaultMessages` above for examples
`onChange`	Function	`null`	(required) Callback fired when selected items change, whether added, cleared, or removed. Passed an array of item objects (as passed in via props.list)
`onSearch`	Function	`null`	Callback fired when the search field is used
`renderItem`	Function	`null`	Callback to render each item in the selection list, allows any custom object-type rendering
`selected`	Array	`null`	(required) The list of currently selected items
`search`	String	`null`
`setState`	Function	`null`
`debouncedSpeak`	Function	`null`
`instanceId`	Number	`null`

clear: String - A more detailed label for the "Clear all" button, read to screen reader users.
list: String - Label for the list of selectable items, only read to screen reader users.
noItems: String - Message to display when the list is empty (implies nothing loaded from the server or parent component).
noResults: String - Message to display when no matching results are found. %s is the search term.
search: String - Label for the search input
selected: Function - Label for the selected items. This is actually a function, so that we can pass through the count of currently selected items.
updated: String - Label indicating that search results have changed, read to screen reader users.

Used implicitly by SearchListControl when the renderItem prop is omitted.

Name	Type	Default	Description
`className`	String	`null`	Additional CSS classes
`countLabel`	ReactNode	`null`	Label to display in the count bubble. Takes preference over `item.count`.
`depth`	Number	`0`	Depth, non-zero if the list is hierarchical
`item`	Object	`null`	Current item to display
`isSelected`	Boolean	`null`	Whether this item is selected
`isSingle`	Boolean	`null`	Whether this should only display a single item (controls radio vs checkbox icon)
`onSelect`	Function	`null`	Callback for selecting the item
`search`	String	`''`	Search string, used to highlight the substring in the item name