ListBox

The props declared for ListBox, generated from the types @proyecto-viviana/ui ships.

Import

import { ListBox } from "@proyecto-viviana/ui";

Props

Props for ListBox in @proyecto-viviana/ui
Prop	Type	Default	Description
`size`	'sm' \| 'md' \| 'lg'	—	The size of the listbox.
`class`	string	—	Additional CSS class name.
`label`	string	—	Label for the listbox.
`description`	string	—	Description for the listbox.
`children`*	(item: T) => JSX.Element	—	The children of the component. A function may be provided to render each item. solidaria-components
`slot`	string \| false	—	A slot name for the component. HTML `slot` may be `false` to omit. solidaria-components
`ref`	((el: HTMLDivElement) => void) \| { current?: HTMLDivElement \| null \| undefined; }	—	Ref for the listbox element. solidaria-components
`id`	string	—	An ID for the listbox. solidaria
`onBlur`	(e: FocusEvent) => void	—	Handler called when focus moves out of the listbox. solidaria
`onFocus`	(e: FocusEvent) => void	—	Handler called when focus moves into the listbox. solidaria
`onSelectionChange`	(keys: "all" \| Set<Key>) => void	—	Handler called when selection changes. solidaria-components
`aria-describedby`	string	—	The ID of an element that describes the listbox. solidaria
`aria-label`	string	—	An accessible label for the listbox when no visible label is provided. solidaria
`aria-labelledby`	string	—	The ID of an element that labels the listbox. solidaria
`isDisabled`	false \| true	—	Whether the listbox is disabled. solidaria
`onFocusChange`	(isFocused: boolean) => void	—	Handler called when the focus state changes. solidaria
`selectionMode`	'none' \| 'single' \| 'multiple'	—	The selection mode. solidaria-components
`disallowEmptySelection`	false \| true	—	Whether Escape and other collection-level interactions may clear the selection. This is an ARIA behavior override and does not change whether an option press may toggle the final selected item. solidaria
`selectedKeys`	"all" \| Iterable<Key>	—	Currently selected keys (controlled). solidaria-components
`defaultSelectedKeys`	"all" \| Iterable<Key>	—	Default selected keys (uncontrolled). solidaria-components
`orientation`	'horizontal' \| 'vertical'	—	Orientation hint for styling parity. solidaria-components
`items`*	CollectionEntry<T>[]	—	The items to render in the listbox. solidaria-components
`onAction`	(key: Key) => void	—	Handler called when an item is activated (pressed). solidaria
`shouldFocusWrap`	false \| true	—	Whether focus should automatically wrap around. solidaria
`disallowTypeAhead`	false \| true	`false`	Whether type-to-select is disabled. solidaria
`selectionBehavior`	'toggle' \| 'replace'	—	The selection behavior (toggle vs replace). solidaria-components
`getKey`	(item: T) => Key	—	Function to get the key from an item. solidaria-components
`getTextValue`	(item: T) => string	—	Function to get the text value from an item. solidaria-components
`getDisabled`	(item: T) => boolean	—	Function to check if an item is disabled. solidaria-components
`disabledKeys`	Iterable<Key>	—	Keys of disabled items. solidaria-components
`disabledBehavior`	'all' \| 'selection'	—	Whether disabled items can still receive focus. solidaria-components
`renderEmptyState`	() => JSX.Element	—	A function to render when the listbox is empty. solidaria-components
`dragAndDropHooks`	DragAndDropHooks<T>	—	Drag and drop hooks from `useDragAndDrop`. solidaria-components
`isVirtualized`	false \| true	—	Whether the listbox uses virtual scrolling. solidaria
`isLoading`	false \| true	—	Whether additional items are currently loading. solidaria-components
`keyboardDelegate`	KeyboardDelegate	—	An optional keyboard delegate implementation for type to select, to override the default. solidaria
`layoutDelegate`	LayoutDelegate	—	A delegate object that provides layout information for items in the collection. By default this uses the DOM, but this can be overridden to implement things like virtualized scrolling. solidaria
`shouldSelectOnPressUp`	false \| true	—	Whether selection should occur on press up. solidaria
`direction`	'ltr' \| 'rtl'	`"ltr"`	The text direction, used to resolve the horizontal navigation axis. In a horizontal listbox, RTL flips Left/Right (Right=previous, Left=next). solidaria
`layout`	'grid' \| 'stack'	—	Layout hint for styling parity. solidaria-components
`hasMore`	false \| true	—	Whether there are more items to load. solidaria-components
`onLoadMore`	() => void \| Promise<void>	—	Called when the load more sentinel becomes visible. solidaria-components
`shouldFocusOnHover`	false \| true	—	Whether to focus items on hover. solidaria
`shouldUseVirtualFocus`	false \| true	—	Whether options should use virtual focus instead of receiving DOM focus. solidaria
`slots`	Record<string, Partial<ListBoxProps<T>>>	—	Slot definitions provided through ListBoxContext. solidaria-components
`linkBehavior`	'none' \| 'selection' \| 'action' \| 'override'	—	The behavior of links in the collection. solidaria
`UNSTABLE_itemBehavior`	'selection' \| 'action'	—	Unstable upstream override that forces items with actions to prefer selection or action behavior. solidaria
`shouldSelectOnFocus`	false \| true	`true`	Whether keyboard focus movement should also update selection in single selection mode. solidaria
`escapeKeyBehavior`	'none' \| 'clearSelection'	`"clearSelection"`	Whether pressing the Escape key should clear selection in the listbox or not. Most experiences should not modify this option as it eliminates a keyboard user's ability to easily clear selection. Only use if the escape key is being handled externally or should not trigger selection clearing contextually. solidaria

Declared in packages/viviana-ui/src/listbox/index.tsx.

ListBoxOption props

Props for ListBoxOption in @proyecto-viviana/ui
Prop	Type	Default	Description
`class`	string	—	Additional CSS class name.
`description`	string	—	Optional description text.
`icon`	() => JSX.Element	—	Optional icon to display before the label. Use a function returning JSX for SSR compatibility: `icon={() => <MyIcon />}`
`children`	number \| boolean \| RenderedElement \| ArrayElement \| (string & {}) \| Node \| JSX.ArrayElement \| ((renderProps: ListBoxOptionRenderProps) => JSX.Element)	—	The children of the option. A function may be provided to receive render props. solidaria-components
`slot`	string \| false	—	A slot name for the component. HTML `slot` may be `false` to omit. solidaria-components
`ref`	((el: HTMLDivElement) => void) \| { current?: HTMLDivElement \| null \| undefined; }	—	Ref for the option element. solidaria-components
`id`*	Key	—	The unique key for the option. solidaria-components
`aria-label`	string	—	An accessible label for the option. solidaria
`isDisabled`	false \| true	—	Whether the option is disabled. solidaria
`onHoverStart`	(e: HoverEvent) => void	—	Handler called when hover starts. solidaria
`onHoverEnd`	(e: HoverEvent) => void	—	Handler called when hover ends. solidaria
`onHoverChange`	(isHovering: boolean) => void	—	Handler called when hover state changes. solidaria
`onAction`	() => void	—	Handler called when the option is activated. solidaria
`isVirtualized`	false \| true	—	Whether the option is contained in a virtual scrolling listbox. solidaria
`item`	NonNullable<T>	—	The item value. solidaria-components
`textValue`	string	—	The text value of the option (for typeahead). solidaria-components
`shouldSelectOnPressUp`	false \| true	—	Whether selection should occur on press up. solidaria
`optionId`	string	—	Optional DOM id for the option element. Defaults to the key. solidaria
`shouldFocusOnHover`	false \| true	—	Whether to focus the option on hover. solidaria
`shouldUseVirtualFocus`	false \| true	—	Whether the option should use virtual focus instead of receiving DOM focus. solidaria
`focus`	() => void	—	Function to focus the option, overriding the default DOM focus. Forwarded into `createSelectableItem` (`useSelectableItem` `focus`). solidaria
`allowsDifferentPressOrigin`	false \| true	—	Whether press-up may occur without the press starting on this option. solidaria

Declared in packages/viviana-ui/src/listbox/index.tsx.

ListBoxSection props

Props for ListBoxSection in @proyecto-viviana/ui
Prop	Type	Default	Description
`class`	string	—	Additional CSS class name.
`children`	number \| boolean \| RenderedElement \| ArrayElement \| (string & {}) \| Node \| JSX.ArrayElement	—	Section contents, usually Header + Group/items. solidaria-components
`slot`	string \| false	—	A slot name for the component. HTML `slot` may be `false` to omit. solidaria-components
`ref`	((el: HTMLDivElement) => void) \| { current?: HTMLDivElement \| null \| undefined; }	—	Ref for the section element. solidaria-components
`id`	string	—	DOM id forwarded to the section element. solidaria-components
`aria-label`	string	—	Accessible name when the section has no naming header. solidaria-components
`aria-labelledby`	string	—	Id of the element that names the section. solidaria-components
`role`	false \| 'group' \| 'region' \| 'none' \| 'form' \| 'menu' \| 'listbox' \| 'tree' \| 'grid' \| 'dialog' \| 'button' \| 'alert' \| 'alertdialog' \| 'application' \| 'article' \| 'banner' \| 'cell' \| 'checkbox' \| 'columnheader' \| 'combobox' \| 'complementary' \| 'contentinfo' \| 'definition' \| 'directory' \| 'document' \| 'feed' \| 'figure' \| 'gridcell' \| 'heading' \| 'img' \| 'link' \| 'list' \| 'listitem' \| 'log' \| 'main' \| 'marquee' \| 'math' \| 'menubar' \| 'menuitem' \| 'menuitemcheckbox' \| 'menuitemradio' \| 'meter' \| 'navigation' \| 'note' \| 'option' \| 'presentation' \| 'progressbar' \| 'radio' \| 'radiogroup' \| 'row' \| 'rowgroup' \| 'rowheader' \| 'scrollbar' \| 'search' \| 'searchbox' \| 'separator' \| 'slider' \| 'spinbutton' \| 'status' \| 'switch' \| 'tab' \| 'table' \| 'tablist' \| 'tabpanel' \| 'term' \| 'textbox' \| 'timer' \| 'toolbar' \| 'tooltip' \| 'treegrid' \| 'treeitem'	—	ARIA role forwarded to the section element. solidaria-components

Declared in packages/viviana-ui/src/listbox/index.tsx.

Props marked solidaria or solidaria-components come from the headless layer underneath and behave the same in both registers. Components that wrap a DOM element also accept that element's standard attributes, which are left out here on purpose — listing them would bury the props that are actually ours.