Picker

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

Import

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

Props

Props for Picker in @proyecto-viviana/ui
Prop	Type	Default	Description
`size`	'S' \| 'M' \| 'L' \| 'XL'	—	Not yet documented
`isQuiet`	false \| true	—	Not yet documented
`styles`	StyleString	—	Not yet documented
`UNSAFE_className`	string	—	Not yet documented
`UNSAFE_style`	JSX.CSSProperties	—	Not yet documented
`class`	string	—	Not yet documented
`label`	number \| boolean \| RenderedElement \| ArrayElement \| (string & {}) \| Node \| JSX.ArrayElement	—	The label for the select.
`description`	number \| boolean \| RenderedElement \| ArrayElement \| (string & {}) \| Node \| JSX.ArrayElement	—	A description for the select. Provides a hint such as specific requirements for what to choose.
`errorMessage`	number \| boolean \| RenderedElement \| ArrayElement \| (string & {}) \| Node \| JSX.ArrayElement	—	An error message for the select.
`isInvalid`	false \| true	—	Whether the select is invalid.
`labelPosition`	'top' \| 'side'	—	Not yet documented
`labelAlign`	'start' \| 'end'	—	Not yet documented
`necessityIndicator`	'label' \| 'icon'	—	Not yet documented
`contextualHelp`	number \| boolean \| RenderedElement \| ArrayElement \| (string & {}) \| Node \| JSX.ArrayElement	—	Not yet documented
`direction`	'top' \| 'bottom'	—	Not yet documented
`align`	'start' \| 'end'	—	Not yet documented
`menuWidth`	number	—	Not yet documented
`shouldFlip`	false \| true	—	Not yet documented
`loadingState`	'idle' \| 'loading' \| 'loadingMore' \| 'sorting' \| 'filtering' \| 'error'	—	Not yet documented
`onLoadMore`	() => void \| Promise<void>	—	Not yet documented
`renderValue`	(selectedItems: T[]) => JSX.Element	—	Not yet documented
`children`	number \| boolean \| RenderedElement \| ArrayElement \| (string & {}) \| Node \| JSX.ArrayElement \| ((item: T) => JSX.Element)	—	Not yet documented
`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 outer select element. solidaria-components
`id`	string	—	An ID for the select. solidaria
`onBlur`	(e: FocusEvent) => void	—	Handler called when focus moves away from the select. solidaria
`onFocus`	(e: FocusEvent) => void	—	Handler called when focus moves to the select. solidaria
`onSelectionChange`	(key: Key \| null) => void	—	Handler called when selection changes. solidaria-components
`aria-describedby`	string	—	The ID of an element that describes the select. solidaria
`aria-label`	string	—	An accessible label for the select when no visible label is provided. solidaria
`aria-labelledby`	string	—	The ID of an element that labels the select. solidaria
`isDisabled`	false \| true	—	Whether the select is disabled. solidaria
`render`	(props: JSX.HTMLAttributes<HTMLDivElement>, renderProps: SelectRenderProps) => JSX.Element	—	Custom renderer for the outer select element. solidaria-components
`autoFocus`	false \| true	—	Whether the select should be auto-focused. solidaria
`form`	string	—	Associates the hidden native select with a form element by id. solidaria
`name`	string	—	The name of the select, used when submitting an HTML form. solidaria-components
`onFocusChange`	(isFocused: boolean) => void	—	Handler called when the focus state changes. solidaria
`selectionMode`	'single' \| 'multiple'	—	Selection mode. solidaria-components
`selectedKeys`	"all" \| Iterable<Key>	—	Currently selected keys (controlled, for multiple selection). solidaria-components
`defaultSelectedKeys`	"all" \| Iterable<Key>	—	Default selected keys (uncontrolled, for multiple selection). solidaria-components
`items`	T[]	—	The items to render in the select. solidaria-components
`disallowTypeAhead`	false \| true	`false`	Whether type-to-select is disabled. solidaria
`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
`defaultOpen`	false \| true	—	Whether the select is open by default (uncontrolled). solidaria-components
`isOpen`	false \| true	—	Whether the select is open (controlled). solidaria-components
`onOpenChange`	(isOpen: boolean) => void	—	Handler called when the open state changes. solidaria-components
`validationState`	'valid' \| 'invalid'	—	Not yet documented solidaria
`isRequired`	false \| true	—	Whether the select is required. solidaria
`validationBehavior`	'aria' \| 'native'	—	Whether validation should use ARIA attributes or native browser validation. solidaria
`validate`	(value: unknown) => boolean \| string \| string[] \| null \| undefined	—	Custom validation function. solidaria
`placeholder`	string	—	Placeholder text when no option is selected. solidaria-components
`selectedKey`	Key	—	The currently selected key (controlled). solidaria-components
`defaultSelectedKey`	Key	—	The default selected key (uncontrolled). solidaria-components
`allowsEmptyCollection`	false \| true	`false`	Whether the select can open when its collection is empty. solidaria
`onSelectionChangeKeys`	(keys: "all" \| Set<Key>) => void	—	Handler called when selected keys change. solidaria-components

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

PickerItem props

Props for PickerItem in @proyecto-viviana/ui
Prop	Type	Default	Description
`children`	number \| boolean \| RenderedElement \| ArrayElement \| (string & {}) \| Node \| JSX.ArrayElement	—	Not yet documented
`styles`	StyleString	—	Not yet documented
`UNSAFE_className`	string	—	Not yet documented
`UNSAFE_style`	JSX.CSSProperties	—	Not yet documented
`class`	string	—	Not yet documented
`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; }	—	A ref callback/object for the underlying 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/picker/index.tsx.

PickerSection props

Props for PickerSection in @proyecto-viviana/ui
Prop	Type	Default	Description
`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/picker/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.