Tree View

Simple Tree View

Loading...

Rich Tree View

Loading...

Rich Tree View with Drag & Drop Reordering

Loading...

<flint-rich-tree-view>

A data-driven tree view that renders its structure from an items array.

• Tag: <flint-rich-tree-view>
• Class: FlintRichTreeView

Import

import '@getufy/flint-ui'; // auto-registers all
// or
import { FlintRichTreeView } from '@getufy/flint-ui';

Usage

<flint-rich-tree-view></flint-rich-tree-view>

Properties

Property	Attribute	Type	Default	Description
items	items	RichTreeItem[]	[]	Array of item data objects.
dataSource	dataSource	RichTreeViewDataSource	—	Optional lazy-load data source.
getItemId	getItemId	(item) => string	—	Extract unique ID (default: item.id).
getItemLabel	getItemLabel	(item) => string	—	Extract label (default: item.label).
getItemChildren	getItemChildren	(item) => RichTreeItem[] | undefined	—	Extract children (default: item.children).
isItemDisabled	isItemDisabled	(item) => boolean	—	Return true to disable an item.
disabledItemsFocusable	disabled-items-focusable	boolean	false	When true, disabled items can receive keyboard focus.
onItemClick	onItemClick	(itemId: string) => void | undefined	—	Callback invoked when a tree item is clicked or activated via keyboard.
expansionTrigger	expansion-trigger	'content' | 'iconContainer'	'content'	What interaction triggers expand/collapse.
expandedItems	expandedItems	string[] | undefined	—	Controlled mode. The set of item IDs that should be expanded.
defaultExpandedItems	defaultExpandedItems	string[]	[]	Uncontrolled mode. Item IDs to expand on initial mount.
onExpandedItemsChange	onExpandedItemsChange	(itemIds: string[]) => void | undefined	—	Callback fired when the user toggles an item's expansion.
itemsReordering	items-reordering	boolean	false	When true, enables drag-and-drop reordering of items.
isItemReorderable	isItemReorderable	(itemId: string) => boolean | undefined	—	Function that determines if a specific item can be reordered.
canMoveItemToNewPosition	canMoveItemToNewPosition	(params: { itemId: string; targetId: string; position: 'before' | 'after' | 'inside'; }) => boolean | undefined	—	Function that determines if an item can be moved to a specific target position.
itemsReorderingHandle	items-reordering-handle	boolean	false	Whether to use a drag handle icon for reordering.
onItemPositionChange	onItemPositionChange	(params: { itemId: string; newParentId: string | null; newIndex: number; }) => void | undefined	—	Fired when an item's position changes via reordering.
selectionMode	selection-mode	'none' | 'single' | 'multiple'	'none'	Selection mode:
selectedItems	selectedItems	string[] | undefined	—	Controlled mode. The set of selected item IDs.
defaultSelectedItems	defaultSelectedItems	string[]	[]	Uncontrolled mode. Item IDs selected on initial mount.
onSelectedItemsChange	onSelectedItemsChange	(itemIds: string[]) => void | undefined	—	Callback fired when the selection changes.
selectionPropagation	selection-propagation	boolean	false	When true (and selectionMode='multiple'), selecting a parent item

Events

Event	Detail	Description
flint-selection-change	{ selectedItems }	When the selected set changes (detail: { selectedItems })
flint-tree-view-expanded-items-change	{ expandedItems }	When the expanded set changes (detail: { expandedItems })
flint-tree-view-item-click	{ itemId }	When a tree item is activated (detail: { itemId })
flint-tree-view-error	{ message, id, error }	When a lazy-loading dataSource call fails (detail: { message, id, error })

CSS Custom Properties

Property	Default
--flint-font-family	—
--flint-text-color	—
--flint-primary-color	—
--flint-border-radius-sm	—
--flint-hover-color	—
--flint-active-color	—
--flint-primary-color-light	—
--flint-border-color	—
--flint-text-color-muted	—

Methods

Method	Description
getItem(id: string): RichTreeItem | null	Returns the data item with the given ID, or null if not found.
getItemDOMElement(id: string): FlintTreeItem | null	Returns the DOM element for the tree item with the given ID, or null.
getItemTree(): RichTreeItem[]	Returns the current items tree. Returns the reordered tree if reordering is active.
getItemOrderedChildrenIds(itemId: string | null): string[]	Returns the ordered child IDs for an item, or root items if null.
setIsItemDisabled(id: string, disabled: boolean): void	Imperatively toggle the disabled state of an item by ID.

---

<flint-simple-tree-view>

A simple tree-view container that manages keyboard navigation, focus, and item selection/expansion for nested flint-tree-item elements.

• Tag: <flint-simple-tree-view>
• Class: FlintSimpleTreeView

Import

import '@getufy/flint-ui'; // auto-registers all
// or
import { FlintSimpleTreeView } from '@getufy/flint-ui';

Usage

<flint-simple-tree-view></flint-simple-tree-view>

Properties

Property	Attribute	Type	Default	Description
disabledItemsFocusable	disabled-items-focusable	boolean	false	When true, disabled items can receive keyboard focus.
onItemClick	onItemClick	(itemId: string) => void | undefined	—	Callback invoked when a tree item is clicked or activated via keyboard.
expandedItems	expandedItems	string[] | undefined	—	Controlled mode. The set of item IDs that should be expanded.
defaultExpandedItems	defaultExpandedItems	string[]	[]	Uncontrolled mode. Item IDs to expand on initial mount.
onExpandedItemsChange	onExpandedItemsChange	(itemIds: string[]) => void | undefined	—	Callback fired when the user toggles an item's expansion.
expansionTrigger	expansion-trigger	'content' | 'iconContainer'	'content'	What interaction triggers expand/collapse.
selectionMode	selection-mode	'none' | 'single' | 'multiple'	'none'	Selection mode:
selectedItems	selectedItems	string[] | undefined	—	Controlled mode. The set of selected item IDs.
defaultSelectedItems	defaultSelectedItems	string[]	[]	Uncontrolled mode. Item IDs selected on initial mount.
onSelectedItemsChange	onSelectedItemsChange	(itemIds: string[]) => void | undefined	—	Callback fired when the selection changes.

Events

Event	Detail	Description
flint-selection-change	{ selectedItems }	When the selected set changes (detail: { selectedItems })
flint-tree-view-expanded-items-change	{ expandedItems }	When the expanded set changes (detail: { expandedItems })
flint-tree-view-item-click	{ itemId }	When a tree item is activated (detail: { itemId })

Slots

Name	Description
(default)	Place flint-tree-item elements here.

CSS Parts

Name	Description
base	The component's base wrapper element.

Methods

Method	Description
getItemDOMElement(itemId: string): FlintTreeItem | null	Returns the DOM element for the tree item with the given itemId,

---

<flint-tree-item>

A single item inside a flint-simple-tree-view or flint-rich-tree-view.

• Tag: <flint-tree-item>
• Class: FlintTreeItem

Import

import '@getufy/flint-ui'; // auto-registers all
// or
import { FlintTreeItem } from '@getufy/flint-ui';

Usage

<flint-tree-item></flint-tree-item>

Properties

Property	Attribute	Type	Default	Description
itemId	item-id	string	''	Unique identifier for this item within the tree
label	label	string	''	Label text displayed for this item
disabled	disabled	boolean	false	Whether this item is disabled (non-interactive)
expanded	expanded	boolean	false	Whether this item's children are visible
hasChildren	has-children	boolean	false	When true, forces the expand button to render even if no flint-tree-item
selected	selected	boolean	false	Whether this item is visually selected. Managed by the parent tree-view.
indeterminate	indeterminate	boolean	false	Whether the checkbox is in an indeterminate state (some but not all children selected).
dropPosition	drop-position	'before' | 'after' | 'inside' | null	null	Visual drop position indicator — reflected so CSS :host selectors match
showDragHandle	show-drag-handle	boolean	false	Whether to show a dedicated drag handle icon

Events

Event	Detail	Description
flint-tree-item-click	{ itemId, ctrlKey, shiftKey }	Fired when the item is clicked (detail: { itemId, ctrlKey, shiftKey })
flint-tree-item-toggle	{ itemId, expanded }	Fired when expanded state changes (detail: { itemId, expanded })

Slots

Name	Description
lead	Leading icon or content.
(default)	Item label text.

CSS Parts

Name	Description
base	The component's base wrapper element.
children	The children element.
label	The label element.
checkbox	The selection checkbox element.

Methods

Method	Description
setShowCheckbox(value: boolean): void
setDraggable(value: boolean, handleOnly: unknown): void	Called by flint-rich-tree-view to set drag enabled state.

---