Tree
Hierarchical tree view with expand/collapse.
Generated from the package's public source.
API
Branchcomponent
@solidiom/tree — Headless tree view primitive. Parts: Root, Item, Branch, ItemIndicator.
Branch(props: TreeBranchProps): Element
Props
class?string
children: Element
Itemcomponent
@solidiom/tree — Headless tree view primitive. Parts: Root, Item, Branch, ItemIndicator.
Item(props: TreeItemProps): Element
Props
class?stringdisabled?boolean— Whether this item is disabled.idstring— Unique ID for this item.ref?(el: HTMLDivElement) => voidtextValue?string— Text value for typeahead matching.
children: Element
ItemIndicatorcomponent
@solidiom/tree — Headless tree view primitive. Parts: Root, Item, Branch, ItemIndicator.
ItemIndicator(props: TreeItemIndicatorProps): Element
Props
class?string
children: Element
Rootcomponent
@solidiom/tree — Headless tree view primitive. Parts: Root, Item, Branch, ItemIndicator.
Root(props: TreeRootProps): Element
Props
class?stringdefaultExpandedIds?Set<string>— Default expanded IDs for uncontrolled mode.defaultSelectedIds?Set<string>— Default selected IDs for uncontrolled mode.expandedIds?Accessor<Set<string>>— Controlled expanded IDs.onExpandedChange?(ids: Set<string>, details: ChangeDetails<TreeReason>) => void— Called when expanded IDs change.onSelectedChange?(ids: Set<string>, details: ChangeDetails<TreeReason>) => void— Called when selected IDs change.ref?(el: HTMLDivElement) => voidselectedIds?Accessor<Set<string>>— Controlled selected IDs.selectionMode?SelectionMode— Selection mode: "single" (default) or "multiple".
children: Element
SelectionModetype
Selection mode for the tree.
TreeBranchPropsinterface
Props for a tree branch (group of nested items).
Props
class?string
children: Element
TreeContextValueinterface
Props
baseIdstring— Generated base ID.expandedIdsAccessor<Set<string>>— Set of currently expanded item IDs.focusedIdAccessor<string | null>— Currently focused item ID.registerItem(item: TreeItemEntry) => () => void— Register a visible tree item for focus management. Returns cleanup.requestExpandedChange(ids: Set<string>, details: ChangeDetails<TreeReason>) => void— Request expansion state change.requestSelectedChange(ids: Set<string>, details: ChangeDetails<TreeReason>) => void— Request selection state change.selectedIdsAccessor<Set<string>>— Set of currently selected item IDs.selectionModeSelectionMode— Selection mode.setFocusedId(id: string | null) => void— Set focus to an item by ID.typeaheadTypeahead— Typeahead instance for character navigation.visibleItemsAccessor<TreeItemEntry[]>— All registered visible items in DOM order.
TreeItemEntryinterface
Registration entry for a tree item.
Props
depthnumberdisabledbooleanidstringparentIdstring | nullref?HTMLElementtextValuestring
TreeItemIndicatorPropsinterface
Props for the tree item expand/collapse indicator.
Props
class?string
children: Element
TreeItemPropsinterface
Props for a tree item.
Props
class?stringdisabled?boolean— Whether this item is disabled.idstring— Unique ID for this item.ref?(el: HTMLDivElement) => voidtextValue?string— Text value for typeahead matching.
children: Element
TreeReasontype
Reason for a tree state change.
TreeRootPropsinterface
@solidiom/tree — Headless tree view primitive. Parts: Root, Item, Branch, ItemIndicator.
Props
class?stringdefaultExpandedIds?Set<string>— Default expanded IDs for uncontrolled mode.defaultSelectedIds?Set<string>— Default selected IDs for uncontrolled mode.expandedIds?Accessor<Set<string>>— Controlled expanded IDs.onExpandedChange?(ids: Set<string>, details: ChangeDetails<TreeReason>) => void— Called when expanded IDs change.onSelectedChange?(ids: Set<string>, details: ChangeDetails<TreeReason>) => void— Called when selected IDs change.ref?(el: HTMLDivElement) => voidselectedIds?Accessor<Set<string>>— Controlled selected IDs.selectionMode?SelectionMode— Selection mode: "single" (default) or "multiple".
children: Element