Tree component: multiple items at the root level

[Gee-Bee]

It looks like the tree component could only build trees with one root node.

"School Activities" in examples.

In my use case I need to build a tree with multiple items at the root level. Deque University has such an example: https://dequeuniversity.com/library/aria/tree-view

I tried to workaround the issue, placing multiple components one under another:

<Tree>...</Tree>
<Tree>...</Tree>

but this does not produce a valid tree structure and I lost the ability to move around the root nodes.

[Gee-Bee]

I worked around this issue by importing TreeContext and rendering it conditionally within <ul role="tree"> element.

import React from 'react'
import TreeContext from '@devtools-ds/tree/dist/esm/TreeContext'

const Level = ({ parentId }) => {

  const items = ...

  if (!parentId) {
    return (
      <ul
        role="tree"
        tabIndex={0}
      >
        <TreeContext.Provider value={{ isChild: true, depth: 0, hasHover: true }} >
          {items}
        </TreeContext.Provider>
      </ul>
    )
  } else {
    return items
  }
}

It's not an ideal solution, because I lost some attributes on the root <ul>, but the tree structure is at least valid now.