Tree component: is it possible to add "action item" along with other tree items?

[warm-tune]

I have a requirement to add an action button like "+ Add entity" right inside the tree.
I see like a two easy ways to do that:

• add buttons inside tree markup avoiding put it in the tree state. That works but keyboard navigation not working, of course.
• add button as tree item. It solves first issue with keyboard navigation, but technically this is not a data item, and it should not be selectable. So here is semantic problems, and somehow need to not allow item selection.

Is there any better variants to handle my situation?

Thanks.

[segunadebayo]

How about a third idea, add button outside the tree but beside the tree label (like VSCode)

[warm-tune]

unfortunately i can't change design. Design requires action item be part of the tree.
May be there some way to prevent state changing on selection event? Return false or something like e.preventDefaults()?

Or I just sacrifice keyboard navigation, and its done, if no other options available.

[warm-tune]

I also had similar issue.
Action items acts and renders as regular nodes. But every node has a type, so it is clear how each type should be handled.
Didn't find another way.

[segunadebayo]

We now support the upcoming v2 version. Stay tuned.
https://github.com/chakra-ui/zag/blob/v2/examples/next-ts/app/tree-view/actions/page.tsx