NEXT: Tree View

[endigo9740]

Zag Integration

Zag docs are currently unavilable, but Ark has an example: https://ark-ui.com/react/docs/components/tree-view

Update: the Zag team has confirmed this component will be available in the future, but Chakra v3 is taking priority. Unfortunately this component may not make it in time for the v3 launch. But we will provide it as soon as possible, potentially post-launch.

Maintainer Requests

The following requests are coming straight from the Skeleton team. These are highly likely be implemented:

• Refactor and rewrite to take advantage of new features introduce in Svelte 5
• (expect this to expand over time)

Community Requests

The following requests have come from the community and are under consideration:

• https://github.com/skeletonlabs/skeleton/issues/2175
• https://github.com/skeletonlabs/skeleton/issues/2276
• https://github.com/skeletonlabs/skeleton/issues/1926
• https://github.com/skeletonlabs/skeleton/issues/2249
• https://github.com/skeletonlabs/skeleton/issues/2403
• https://github.com/skeletonlabs/skeleton/issues/2631
• https://github.com/skeletonlabs/skeleton/issues/2722

Bugs and Issues

• https://github.com/skeletonlabs/skeleton/issues/2350
• https://github.com/skeletonlabs/skeleton/issues/2403
• https://github.com/skeletonlabs/skeleton/issues/2491
• https://github.com/skeletonlabs/skeleton/issues/2502
• https://github.com/skeletonlabs/skeleton/issues/2826

Feedback

If you have additional updates or requests for this feature, please do so in the comments section below.

[ThingEngineer]

Feature Request - onChecked RecursiveTreeView event

• Only fires when a node checkbox is checked or unchecked
• Returns (at a minimum) the id of the node and the checked value:boolean of the nodes checkbox input
• Could: also return radio button value, but seems more relevant to checkbox inputs
• Nice to have: ensure checkedNodes is updated/current before this event is dispatched
• Not great: Returning the checkbox input value on the existing click event. This event fires too often already, and would require extra state management to tell if the checkbox value changed or the user just clicked elsewhere on the node.

The current 2 (non-optimal) methods of monitoring checkbox state - and related observations.

REPL for the topics below.

The REPL setup:

let nodes: TreeViewNode[] = [];
let checkedNodes: string[] = [];
let expandedNodes: string[] = [];

nodes = [
  {
    id: '1',
    content: 'Parent 1',
    children: [
      {
        id: '1.2',
        content: 'Child 1'
      }
    ]
  },
  {
    id: '2',
    content: 'Parent 2'
  }
];

// expandedNodes = ['1'];
// checkedNodes = ['2'];

$: if (browser) console.log('reactive --> expandedNodes:', expandedNodes);
$: if (browser) console.log('reactive --> checkedNodes:', checkedNodes);
</script>

<RecursiveTreeView
  selection
  multiple
  nodes={nodes}
  bind:checkedNodes={checkedNodes}
  bind:expandedNodes={expandedNodes}
  on:click={(e) => {
    console.log('click event -->', e.detail, 'checkedNodes:', checkedNodes);
  }}
  on:toggle={(e) => {
    console.log('toggle event -->', e.detail, 'expandedNodes:', expandedNodes);
  }}
/>

Expanding and Collapsing 'Parent 1' node from a fresh page load where expandedNodes = []

+page.svelte:46 toggle event --> {id: '1'} expandedNodes: ['1']
+page.svelte:29 reactive --> expandedNodes: ['1']
+page.svelte:46 toggle event --> {id: '1'} expandedNodes: []
+page.svelte:29 reactive --> expandedNodes: []

Notice that when toggling (opening and closing a parent tree view with 0 > children) the bound variable expandedNodes is updated before the custom event is dispatched so we can see that the node with id: 1 was toggled and we know it's state by checking expandedNodes for that id. Looking at the browser console.log output we can see that I expanded then collapsed the node with id:1 . That's great, as expected!

Method 1 - Click event + tracking previous vs current checkedNodes.

Checking and Unchecking the 'Parent 1' node from a fresh page load where checkedNodes = []

+page.svelte:43 click event --> {id: '1'} checkedNodes: []
+page.svelte:30 reactive --> checkedNodes: ['1']
+page.svelte:43 click event --> {id: '1'} checkedNodes: ['1']
+page.svelte:30 

Notice that when checking or unchecking the checkbox of any node the bound variable checkedNodes is not updated before the the custom event is dispatched so we can not see current state of the node with id: 1 that was just checked or unchecked (we don't know which).

Method 2 Reactivity - checkedNodes reactive statement.

State could be monitored via svelte's reactivity on your bound checkedNodes variable. But reactive events fire for checkedNodes on load when you are building your tree view, and while loading saved checked and expanded nodes. All that is fine, we can handle that by setting, checking and clearing flags but that could be avoided with a clean event that fires only when a node is checked or unchecked and that returns at minimum the id of the node and the current state of the checkbox.

[endigo9740]

Please be aware that all components in Skeleton v3 are now built on top of Zag.js. In this case Zag does provide a feature rich Tree View component that we're keen to adopt: https://zagjs.com/components/react/tree-view

Unfortunately, the component is currently indicated as being in a beta status. To prevent rolling out an unstable feature in our stable release, we're going to hold off on implementing this for now. To reiterate - this will NOT be available during initial release of Skeleton v3.

However, we have reached out to Zag to confirm the progress on this, which you can read below:

TreeView Updates: We're working to get Chakra UI v3 out of the gate. After which, the tree view will be completed and shipped everywhere. https://github.com/chakra-ui/zag/discussions/1807

Once the component reaches a stable status, we will aim to publish the Skeleton version asap.

If you're desperate for this feature, we might suggest you implement the Zag component directly in your application. This is currently available for React, Svelte, and more. You're welcome to follow our opinionated component contribution guide to ensure compatibility with Skeleton.

[endigo9740]

Replacing this with a new issue that focuses on the Zag-based component implementation. We'll be copying the "beta" tag label for this component to help launch it in Skeleton sooner than later!

• https://github.com/skeletonlabs/skeleton/issues/3468