Tree Select in five frameworks

import type * as React from 'react'
import { TreeSelect } from '@hamur/react/tree-select'

const labels: Record<string, string> = {
  documents: 'Documents',
  work: 'Work',
  reports: 'Reports',
  slides: 'Slides',
  personal: 'Personal',
  pictures: 'Pictures',
  music: 'Music',
}
const children: Record<string, string[]> = {
  documents: ['work', 'personal'],
  work: ['reports', 'slides'],
}
const roots = ['documents', 'pictures', 'music']

function renderNodes(values: string[]): React.ReactNode {
  return values.map((value) => (
    <TreeSelect.Item key={value} value={value} className="tree-item">
      <TreeSelect.ItemContent className="tree-row">
        <TreeSelect.ItemToggle keepMounted className="tree-toggle">
          <svg viewBox="0 0 16 16" width="16" height="16" aria-hidden="true">
            <path d="M6 4l4 4-4 4" />
          </svg>
        </TreeSelect.ItemToggle>
        <TreeSelect.ItemText className="tree-text">
          {labels[value]}
        </TreeSelect.ItemText>
      </TreeSelect.ItemContent>
      {children[value] ? (
        <TreeSelect.Group className="tree-group">
          {renderNodes(children[value])}
        </TreeSelect.Group>
      ) : null}
    </TreeSelect.Item>
  ))
}

export default function TreeSelectExample() {
  return (
    // The whole tree as data, so the trigger can name the value while the popup is closed.
    <TreeSelect.Root
      items={roots}
      getItemChildren={(value: string) => children[value]}
      itemToStringLabel={(value: string) => labels[value]}
      defaultExpanded={['documents']}
    >
      <div className="field">
        <div id="tree-select-label" className="select-label">
          Folder
        </div>
        <TreeSelect.Trigger
          className="select"
          aria-labelledby="tree-select-label"
        >
          <TreeSelect.Value
            className="select-value"
            placeholder="Choose a folder"
          />
          <TreeSelect.Icon className="select-icon" />
        </TreeSelect.Trigger>
      </div>
      <TreeSelect.Portal>
        <TreeSelect.Positioner className="select-positioner" sideOffset={6}>
          <TreeSelect.Popup className="select-popup tree-select-popup">
            <TreeSelect.Tree
              className="tree tree-select-tree"
              aria-label="Folders"
            >
              {renderNodes(roots)}
            </TreeSelect.Tree>
          </TreeSelect.Popup>
        </TreeSelect.Positioner>
      </TreeSelect.Portal>
    </TreeSelect.Root>
  )
}