Tree widget: Status of consuming Kiwi UI

[MartynasStrazdas]

Current widget status

A short demo of the Kiwi-based tree widget at the current stage: https://github.com/user-attachments/assets/5a157d8c-c9a2-4410-9c74-eb331e7ae8d8

Current kiwi tree implementation: iTwin/presentation#847

iTwinUI v5 dependencies status

Below is a list of iTwinUI v5 components that have been successfully consumed or are still missing (based on status). The list is incomplete, more components / issues might appear in the future.

Components required for Tree rendering

Preview Give feedback

1. Tree item equivalent error node component.
2. Multiline label
3. Icon button not rendering correctly in action items (https://stackblitz.com/edit/github-u7hdd6jp?file=src%2FApp.tsx)
4. Tree item expander click selects tree item (unconfirmed, might be our issue)
5. Unified onClick and onKeyDown for item selection (nice to have)

Components required for Tree widget

Preview Give feedback

1. ButtonGroup or equivalent component, there is a need for a wrapper which has overflow logic
2. Dropdown menu button
3. Search box
4. Progress radial (indeterminate)
5. Checkbox to have a partial state
6. NonIdealState or equivalent

[GerardasB]

Tree item equivalent error node component.

Would you like to display an error state for specific tree items? Or are you looking for an error state for the whole tree i.e. instead of displaying any nodes, it could say that the tree is empty or that there was a problem fetching data.

Multiline label

Can we simply expose a sub-label prop or would you like to update the styling of existing label i.e. to specify https://developer.mozilla.org/en-US/docs/Web/CSS/text-wrap?

Tree item expander click selects tree item (unconfirmed, might be our issue)

Are you using onExpandedChange? Seems to work fine in our sandbox w/o additional custom logic.

Unified onClick and onKeyDown for item selection (nice to have)

We have onSelectedChange for that use-case. But we are not handling multi selection (or key modifiers).

Dropdown menu button

You can use a DropdownMenu component.

Search box

Take a look at TextBox and IconButton components. I.e. you could create a simple search box by simply using decorations API:

<TextBox.Root>
	<TextBox.Icon href={searchIcon} />
	<TextBox.Input placeholder="Search" />
</TextBox.Root>
<IconButton
	icon={searchIcon}
	label="Search"
	variant="ghost"
/>

Progress radial (indeterminate)

This is available as a Spinner component.

Checkbox to have a partial state

We support "mixed" state in the Checkbox component. But I believe, there's a rendering issue, we'll investigate.