Test Out React Spectrum Tree View

[curran]

This looks like an amazing tree navigator UI widget that has full accessibility!

adobe/react-spectrum#2396 (comment)

I wonder if we could use it to replace the current infra for the sidebar with collapsible folders.

[curran]

https://react-spectrum.adobe.com/react-aria/Tree.html#tree

import {
  UNSTABLE_Tree as Tree,
  UNSTABLE_TreeItem as TreeItem,
  UNSTABLE_TreeItemContent as TreeItemContent,
  Button,
  Collection
} from 'react-aria-components';
import {MyCheckbox} from './Checkbox';

let items = [
  {id: 1, title: 'Documents', children: [
    {id: 2, title: 'Project', children: [
      {id: 3, title: 'Weekly Report', children: []}
    ]}
  ]},
  {id: 4, title: 'Photos', children: [
    {id: 5, title: 'Image 1', children: []},
    {id: 6, title: 'Image 2', children: []}
  ]}
];

<Tree aria-label="Files" selectionMode="multiple" items={items}>
  {function renderItem(item) {
    return (
      <TreeItem textValue={item.title}>
        <TreeItemContent>
          {item.children.length ? <Button slot="chevron">
            <svg viewBox="0 0 24 24">
              <path d="m8.25 4.5 7.5 7.5-7.5 7.5" />
            </svg>
          </Button> : null}
          <MyCheckbox slot="selection" />
          {item.title}
          <Button aria-label="Info">ⓘ</Button>
        </TreeItemContent>
        <Collection items={item.children}>
          {renderItem}
        </Collection>
      </TreeItem>
    );
  }}
</Tree>