createTree

constant

const createTree: WidgetFactory<TreeWidget>

Create a Tree with given config props

Param

an optional tree config

Returns

a TreeWidget

DefaultTreeSlotItem

function

DefaultTreeSlotItem(slotContext): Element

A functional component that renders a tree item element with a directive applied to it. The directive is provided through the slotContext parameter.

Parameters
slotContext

TreeSlotItemContext

The context object containing the directives and item for the tree item element.

Returns

Element

A tree root element with the applied directive.

DefaultTreeSlotItemContent

function

DefaultTreeSlotItemContent(slotContext): Element

A functional component that renders a tree item content element.

Parameters
slotContext

TreeSlotItemContext

The context object containing the item content for display.

Returns

Element

A tree item element.

DefaultTreeSlotItemToggle

function

DefaultTreeSlotItemToggle(slotContext): Element

A functional component that renders a toggle element with a directive applied to it. The directive is provided through the slotContext parameter.

Parameters
slotContext

TreeSlotItemContext

The context object containing the directives and item the toggle.

Returns

Element

A toggle element with the applied directive.

DefaultTreeSlotStructure

function

DefaultTreeSlotStructure(slotContext): Element

A functional component that renders a tree structure with a directive applied to it. The directive is provided through the slotContext parameter.

Parameters
slotContext

TreeContext

The context object containing the directives and items for the tree display.

Returns

Element

A tree structure with the applied directive.

getTreeDefaultConfig

constant

const getTreeDefaultConfig: () => TreeProps

Retrieve a shallow copy of the default Tree config

Returns

TreeProps

the default Tree config

NormalizedTreeItem

interface

Normalized TreeItem object

Properties
ariaLabel

ariaLabel: string

Accessibility label for the node

children

children: NormalizedTreeItem[]

An array of children nodes

isExpanded?

optional isExpanded: boolean

If true the node is expanded

label

label: string

String title of the node

level

level: number

Level in the hierarchy, starts with 0 for a root node

Tree

function

Tree(props): Element

Tree component that integrates with a widget context and renders a slot structure.

Parameters
props

Partial<TreeProps>

The properties for the Tree component.

Returns

Element

The rendered Tree component.

The Tree component uses the useWidget hook to create a widget context with the provided configuration. It renders the slot content using the Slot component.

TreeApi

interface

Interface representing the API for a Tree component.

TreeContext

type alias

TreeContext = WidgetSlotContext<TreeWidget>

Represents the context for a Tree widget. This interface is an alias for WidgetSlotContext<TreeWidget>.

TreeDirectives

interface

Interface representing various directives used in the Tree component.

Properties
itemAttributesDirective

itemAttributesDirective: Directive<{ item: NormalizedTreeItem; }>

Directive to handle attributes for the tree item

itemToggleDirective

itemToggleDirective: Directive<{ item: NormalizedTreeItem; }>

Directive to handle toggle for the tree item

navigationDirective

navigationDirective: Directive

Directive to attach navManager for the tree

TreeItem

interface

Represents a tree item component.

Properties
ariaLabel?

optional ariaLabel: string

Optional accessibility label for the node

children?

optional children: TreeItem[]

Optional array of children nodes

isExpanded?

optional isExpanded: boolean

If true the node is expanded

label

label: string

String title of the node

TreeProps

interface

Represents the properties for the Tree component.

Properties
ariaLabel?

optional ariaLabel: string

Optional accessibility label for the tree if there is no explicit label

Default Value

''

ariaLabelToggleFn

ariaLabelToggleFn: (label) => string

Return the value for the 'aria-label' attribute of the toggle

Parameters
label

string

tree item label

Returns

string

Default Value
(label: string) => `Toggle ${label}`
className

className: string

CSS classes to be applied on the widget main container

Default Value

''

item

item: SlotContent<TreeSlotItemContext>

Slot to change the default tree item

itemContent

itemContent: SlotContent<TreeSlotItemContext>

Slot to change the default tree item content

itemToggle

itemToggle: SlotContent<TreeSlotItemContext>

Slot to change the default tree item toggle

nodes

nodes: TreeItem[]

Array of the tree nodes to display

Default Value

[]

onExpandToggle

onExpandToggle: (node) => void

An event emitted when the user toggles the expand of the TreeItem.

Event payload is equal to the TreeItem clicked.

Parameters
node

NormalizedTreeItem

Returns

void

Default Value
() => {}
structure

structure: SlotContent<TreeContext>

Slot to change the default display of the tree

Methods
navSelector

navSelector(node): NodeListOf<HTMLElement>

Retrieves expand items of the TreeItem

Parameters
node

HTMLElement

HTML element that is representing the expand item

Returns

NodeListOf<HTMLElement>

Default Value
(node: HTMLElement) => node.querySelectorAll('button')

TreeSlotItemContext

type alias

TreeSlotItemContext = TreeContext & object

Represents the context for a tree item, extending the base TreeContext with an additional item property.

Type declaration
item

item: NormalizedTreeItem

TreeState

interface

Represents the state of a Tree component.

Properties
ariaLabel?

optional ariaLabel: string

Optional accessibility label for the tree if there is no explicit label

Default Value

''

className

className: string

CSS classes to be applied on the widget main container

Default Value

''

expandedMap

expandedMap: object

Getter of expanded state for each tree node

get

get(item): undefined | boolean

Parameters

####### item

NormalizedTreeItem

Returns

undefined | boolean

item

item: SlotContent<TreeSlotItemContext>

Slot to change the default tree item

itemContent

itemContent: SlotContent<TreeSlotItemContext>

Slot to change the default tree item content

itemToggle

itemToggle: SlotContent<TreeSlotItemContext>

Slot to change the default tree item toggle

normalizedNodes

normalizedNodes: NormalizedTreeItem[]

Array of normalized tree nodes

structure

structure: SlotContent<TreeContext>

Slot to change the default display of the tree

TreeWidget

type alias

TreeWidget = Widget<TreeProps, TreeState, TreeApi, TreeDirectives>

Represents a Tree widget component.