Skip to main content

PROYECTOVIVIANA

Tree

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

Import

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

Props

Props for Tree in @proyecto-viviana/ui
Prop	Type	Default	Description
`children`*	JSX.Element \| ((item: TreeItemData<T>, state: TreeRenderItemState) => JSX.Element)	—	TreeView content. Use a render function with `items` for S2 dynamic collections.
`items`	TreeItemData<T>[]	—	Dynamic hierarchical items. Supports either `id` or `key`, matching React Spectrum examples.
`selectionStyle`	'checkbox' \| 'highlight'	`'checkbox'`	Whether selection is shown with checkboxes or highlighted rows.
`loadingState`	'idle' \| 'loading' \| 'loadingMore' \| 'sorting' \| 'filtering' \| 'error'	—	Loading state forwarded to load-more behavior.
`renderActionBar`	(selectedKeys: "all" \| Set<Key>) => JSX.Element	—	Provides an action bar when items are selected.
`styles`	StyleString	—	Spectrum-defined generated classes.
`UNSAFE_className`	string \| UnsafeClassName	—	Additional CSS class name. Use only as a last resort.
`UNSAFE_style`	JSX.CSSProperties	—	Additional inline styles. Use only as a last resort.
`class`	string	—	Backward-compatible class alias. Prefer UNSAFE_className for S2 parity.
`slot`	string	—	Slot name when used in a Spectrum context.
`ref`	HTMLDivElement \| ((el: HTMLDivElement) => void) \| { current?: HTMLDivElement \| null \| undefined; }	—	Ref for the tree root element.
`label`	number \| boolean \| RenderedElement \| ArrayElement \| (string & {}) \| Node \| JSX.ArrayElement	—	Legacy label helper. Prefer aria-label or aria-labelledby.
`description`	number \| boolean \| RenderedElement \| ArrayElement \| (string & {}) \| Node \| JSX.ArrayElement	—	Legacy description helper.
`id`	string	—	The unique id for the tree. solidaria
`onSelectionChange`	(keys: "all" \| Set<Key>) => void	—	Handler called when selection changes. solidaria-components
`aria-describedby`	string	—	ID of an element that describes the tree. solidaria
`aria-label`	string	—	Label for accessibility. solidaria
`aria-labelledby`	string	—	ID of an element that labels the tree. solidaria
`isDisabled`	false \| true	—	Whether the tree is disabled. solidaria
`onExpandedChange`	(keys: Set<Key>) => void	—	Handler called when expansion changes. solidaria-components
`expandedKeys`	Iterable<Key>	—	Currently expanded keys (controlled). solidaria-components
`defaultExpandedKeys`	Iterable<Key>	—	Default expanded keys (uncontrolled). solidaria-components
`selectionMode`	'none' \| 'single' \| 'multiple'	—	The selection mode. solidaria-components
`selectedKeys`	"all" \| Iterable<Key>	—	Currently selected keys (controlled). solidaria-components
`defaultSelectedKeys`	"all" \| Iterable<Key>	—	Default selected keys (uncontrolled). solidaria-components
`onAction`	(key: Key) => void	—	Handler called when an item action is triggered. solidaria
`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 tree is empty. solidaria-components
`dragAndDropHooks`	DragAndDropHooks<T>	—	Drag and drop hooks from `useDragAndDrop`. solidaria-components
`isVirtualized`	false \| true	—	Whether the tree is virtualized. solidaria
`keyboardNavigationBehavior`	'tab' \| 'arrow'	`"arrow"`	How keyboard navigation should behave within rows. `"arrow"` treats the tree as a single tab stop and uses arrow keys to move through row children. `"tab"` lets tabbable row children participate in normal tab order and stops child key events before tree navigation. solidaria
`direction`	'ltr' \| 'rtl'	—	The writing direction for the tree. Determines expand/collapse key mapping. solidaria
`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
`loadMoreClass`	ClassNameOrFunction<{ isLoading: boolean; }>	—	CSS className for the load-more sentinel. solidaria-components
`renderLoadMoreItem`	(state: { isLoading: boolean; }) => JSX.Element	—	Renders the load-more sentinel content. solidaria-components
`loadMoreStyle`	StyleOrFunction<{ isLoading: boolean; }>	—	Inline style for the load-more sentinel. solidaria-components

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

TreeExpandButton props

Props for TreeExpandButton in @proyecto-viviana/ui
Prop	Type	Default	Description
`class`	string	—	Additional CSS class name. Use only as a last resort.
`style`	JSX.CSSProperties	—	Additional inline styles. Use only as a last resort.
`children`	number \| boolean \| RenderedElement \| ArrayElement \| (string & {}) \| Node \| JSX.ArrayElement \| ((props: { isExpanded: boolean; }) => JSX.Element)	—	Children to render inside the button. solidaria-components

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

TreeItem props

Props for TreeItem in @proyecto-viviana/ui
Prop	Type	Default	Description
`id`*	Key	—	The unique id of the TreeViewItem.
`children`	number \| boolean \| RenderedElement \| ArrayElement \| (string & {}) \| Node \| JSX.ArrayElement \| ((renderProps: TreeItemRenderProps) => JSX.Element)	—	TreeViewItem content. Text-only children are wrapped in the S2 label slot.
`isDisabled`	false \| true	—	Whether this item is disabled. Dynamic collections should prefer item data `isDisabled`.
`hasChildItems`	false \| true	—	Whether this item has children that may not be loaded yet.
`href`	string	—	Link target metadata.
`target`	string	—	Not yet documented
`download`	string \| boolean	—	Not yet documented
`rel`	string	—	Not yet documented
`hrefLang`	string	—	Not yet documented
`ping`	string	—	Not yet documented
`referrerPolicy`	'' \| 'no-referrer' \| 'no-referrer-when-downgrade' \| 'origin' \| 'origin-when-cross-origin' \| 'same-origin' \| 'strict-origin' \| 'strict-origin-when-cross-origin' \| 'unsafe-url'	—	Not yet documented
`routerOptions`	RouterOptions	—	Not yet documented
`description`	number \| boolean \| RenderedElement \| ArrayElement \| (string & {}) \| Node \| JSX.ArrayElement	—	Optional description text. Prefer `<Text slot="description">`.
`icon`	() => JSX.Element	—	Optional icon helper retained from the older Tree API. Prefer an icon child.
`styles`	StyleString	—	Spectrum-defined generated classes.
`UNSAFE_className`	string \| UnsafeClassName	—	Additional CSS class name. Use only as a last resort.
`UNSAFE_style`	JSX.CSSProperties	—	Additional inline styles. Use only as a last resort.
`class`	string	—	Backward-compatible class alias. Prefer UNSAFE_className for S2 parity.
`ref`	HTMLElement \| ((el: HTMLElement) => void) \| { current?: HTMLElement \| null \| undefined; }	—	Ref for the rendered row element.
`slot`	string \| false	—	A slot name for the component. HTML `slot` may be `false` to omit. solidaria-components
`onAction`	() => void	—	Handler called when the item is activated. solidaria-components
`item`	TreeItemData<T>	—	The item value. solidaria-components
`textValue`	string	—	The text value of the item (for accessibility). solidaria-components

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

TreeItemContent props

Props for TreeItemContent in @proyecto-viviana/ui
Prop	Type	Default	Description
`class`	string	—	Additional CSS class name. Use only as a last resort.
`style`	JSX.CSSProperties	—	Additional inline styles. Use only as a last resort.
`children`	number \| boolean \| RenderedElement \| ArrayElement \| (string & {}) \| Node \| JSX.ArrayElement \| ((renderProps: TreeItemRenderProps) => JSX.Element)	—	Not yet documented solidaria-components

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

TreeLoadMoreItem props

Props for TreeLoadMoreItem in @proyecto-viviana/ui
Prop	Type	Default	Description
`onLoadMore`*	() => void \| Promise<void>	—	Not yet documented
`isLoading`	false \| true	—	Not yet documented
`loadingState`	'idle' \| 'loading' \| 'loadingMore' \| 'sorting' \| 'filtering' \| 'error'	—	Not yet documented
`level`	number	—	Not yet documented
`children`	number \| boolean \| RenderedElement \| ArrayElement \| (string & {}) \| Node \| JSX.ArrayElement	—	Not yet documented
`class`	string	—	Not yet documented
`style`	JSX.CSSProperties	—	Not yet documented

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

TreeView props

Props for TreeView in @proyecto-viviana/ui
Prop	Type	Default	Description
`children`*	JSX.Element \| ((item: TreeItemData<T>, state: TreeRenderItemState) => JSX.Element)	—	TreeView content. Use a render function with `items` for S2 dynamic collections.
`items`	TreeItemData<T>[]	—	Dynamic hierarchical items. Supports either `id` or `key`, matching React Spectrum examples.
`selectionStyle`	'checkbox' \| 'highlight'	`'checkbox'`	Whether selection is shown with checkboxes or highlighted rows.
`loadingState`	'idle' \| 'loading' \| 'loadingMore' \| 'sorting' \| 'filtering' \| 'error'	—	Loading state forwarded to load-more behavior.
`renderActionBar`	(selectedKeys: "all" \| Set<Key>) => JSX.Element	—	Provides an action bar when items are selected.
`styles`	StyleString	—	Spectrum-defined generated classes.
`UNSAFE_className`	string \| UnsafeClassName	—	Additional CSS class name. Use only as a last resort.
`UNSAFE_style`	JSX.CSSProperties	—	Additional inline styles. Use only as a last resort.
`class`	string	—	Backward-compatible class alias. Prefer UNSAFE_className for S2 parity.
`slot`	string	—	Slot name when used in a Spectrum context.
`ref`	HTMLDivElement \| ((el: HTMLDivElement) => void) \| { current?: HTMLDivElement \| null \| undefined; }	—	Ref for the tree root element.
`label`	number \| boolean \| RenderedElement \| ArrayElement \| (string & {}) \| Node \| JSX.ArrayElement	—	Legacy label helper. Prefer aria-label or aria-labelledby.
`description`	number \| boolean \| RenderedElement \| ArrayElement \| (string & {}) \| Node \| JSX.ArrayElement	—	Legacy description helper.
`id`	string	—	The unique id for the tree. solidaria
`onSelectionChange`	(keys: "all" \| Set<Key>) => void	—	Handler called when selection changes. solidaria-components
`aria-describedby`	string	—	ID of an element that describes the tree. solidaria
`aria-label`	string	—	Label for accessibility. solidaria
`aria-labelledby`	string	—	ID of an element that labels the tree. solidaria
`isDisabled`	false \| true	—	Whether the tree is disabled. solidaria
`onExpandedChange`	(keys: Set<Key>) => void	—	Handler called when expansion changes. solidaria-components
`expandedKeys`	Iterable<Key>	—	Currently expanded keys (controlled). solidaria-components
`defaultExpandedKeys`	Iterable<Key>	—	Default expanded keys (uncontrolled). solidaria-components
`selectionMode`	'none' \| 'single' \| 'multiple'	—	The selection mode. solidaria-components
`selectedKeys`	"all" \| Iterable<Key>	—	Currently selected keys (controlled). solidaria-components
`defaultSelectedKeys`	"all" \| Iterable<Key>	—	Default selected keys (uncontrolled). solidaria-components
`onAction`	(key: Key) => void	—	Handler called when an item action is triggered. solidaria
`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 tree is empty. solidaria-components
`dragAndDropHooks`	DragAndDropHooks<T>	—	Drag and drop hooks from `useDragAndDrop`. solidaria-components
`isVirtualized`	false \| true	—	Whether the tree is virtualized. solidaria
`keyboardNavigationBehavior`	'tab' \| 'arrow'	`"arrow"`	How keyboard navigation should behave within rows. `"arrow"` treats the tree as a single tab stop and uses arrow keys to move through row children. `"tab"` lets tabbable row children participate in normal tab order and stops child key events before tree navigation. solidaria
`direction`	'ltr' \| 'rtl'	—	The writing direction for the tree. Determines expand/collapse key mapping. solidaria
`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
`loadMoreClass`	ClassNameOrFunction<{ isLoading: boolean; }>	—	CSS className for the load-more sentinel. solidaria-components
`renderLoadMoreItem`	(state: { isLoading: boolean; }) => JSX.Element	—	Renders the load-more sentinel content. solidaria-components
`loadMoreStyle`	StyleOrFunction<{ isLoading: boolean; }>	—	Inline style for the load-more sentinel. solidaria-components

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

TreeViewItem props

Props for TreeViewItem in @proyecto-viviana/ui
Prop	Type	Default	Description
`id`*	Key	—	The unique id of the TreeViewItem.
`children`	number \| boolean \| RenderedElement \| ArrayElement \| (string & {}) \| Node \| JSX.ArrayElement \| ((renderProps: TreeItemRenderProps) => JSX.Element)	—	TreeViewItem content. Text-only children are wrapped in the S2 label slot.
`isDisabled`	false \| true	—	Whether this item is disabled. Dynamic collections should prefer item data `isDisabled`.
`hasChildItems`	false \| true	—	Whether this item has children that may not be loaded yet.
`href`	string	—	Link target metadata.
`target`	string	—	Not yet documented
`download`	string \| boolean	—	Not yet documented
`rel`	string	—	Not yet documented
`hrefLang`	string	—	Not yet documented
`ping`	string	—	Not yet documented
`referrerPolicy`	'' \| 'no-referrer' \| 'no-referrer-when-downgrade' \| 'origin' \| 'origin-when-cross-origin' \| 'same-origin' \| 'strict-origin' \| 'strict-origin-when-cross-origin' \| 'unsafe-url'	—	Not yet documented
`routerOptions`	RouterOptions	—	Not yet documented
`description`	number \| boolean \| RenderedElement \| ArrayElement \| (string & {}) \| Node \| JSX.ArrayElement	—	Optional description text. Prefer `<Text slot="description">`.
`icon`	() => JSX.Element	—	Optional icon helper retained from the older Tree API. Prefer an icon child.
`styles`	StyleString	—	Spectrum-defined generated classes.
`UNSAFE_className`	string \| UnsafeClassName	—	Additional CSS class name. Use only as a last resort.
`UNSAFE_style`	JSX.CSSProperties	—	Additional inline styles. Use only as a last resort.
`class`	string	—	Backward-compatible class alias. Prefer UNSAFE_className for S2 parity.
`ref`	HTMLElement \| ((el: HTMLElement) => void) \| { current?: HTMLElement \| null \| undefined; }	—	Ref for the rendered row element.
`slot`	string \| false	—	A slot name for the component. HTML `slot` may be `false` to omit. solidaria-components
`onAction`	() => void	—	Handler called when the item is activated. solidaria-components
`item`	TreeItemData<T>	—	The item value. solidaria-components
`textValue`	string	—	The text value of the item (for accessibility). solidaria-components

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

TreeViewItemContent props

Props for TreeViewItemContent in @proyecto-viviana/ui
Prop	Type	Default	Description
`class`	string	—	Additional CSS class name. Use only as a last resort.
`style`	JSX.CSSProperties	—	Additional inline styles. Use only as a last resort.
`children`	number \| boolean \| RenderedElement \| ArrayElement \| (string & {}) \| Node \| JSX.ArrayElement \| ((renderProps: TreeItemRenderProps) => JSX.Element)	—	Not yet documented solidaria-components

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

TreeViewLoadMoreItem props

Props for TreeViewLoadMoreItem in @proyecto-viviana/ui
Prop	Type	Default	Description
`onLoadMore`*	() => void \| Promise<void>	—	Not yet documented
`isLoading`	false \| true	—	Not yet documented
`loadingState`	'idle' \| 'loading' \| 'loadingMore' \| 'sorting' \| 'filtering' \| 'error'	—	Not yet documented
`level`	number	—	Not yet documented
`children`	number \| boolean \| RenderedElement \| ArrayElement \| (string & {}) \| Node \| JSX.ArrayElement	—	Not yet documented
`class`	string	—	Not yet documented
`style`	JSX.CSSProperties	—	Not yet documented

Declared in packages/viviana-ui/src/tree/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.