Tree Select

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

const labels: Record<string, string> = {
  europe: 'Europe',
  france: 'France',
  paris: 'Paris',
  lyon: 'Lyon',
  germany: 'Germany',
  berlin: 'Berlin',
  munich: 'Munich',
  asia: 'Asia',
  japan: 'Japan',
  tokyo: 'Tokyo',
  osaka: 'Osaka',
}
const children: Record<string, string[]> = {
  europe: ['france', 'germany'],
  france: ['paris', 'lyon'],
  germany: ['berlin', 'munich'],
  asia: ['japan'],
  japan: ['tokyo', 'osaka'],
}
const roots = ['europe', 'asia']

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 TreeSelectFilterExample() {
  return (
    // Typing keeps the matching rows and their ancestors, and opens the branches that hold a match.
    <TreeSelect.Root
      items={roots}
      getItemChildren={(value: string) => children[value]}
      itemToStringLabel={(value: string) => labels[value]}
    >
      <div className="field">
        <div id="tree-select-filter-label" className="select-label">
          City
        </div>
        <TreeSelect.Trigger
          className="select"
          aria-labelledby="tree-select-filter-label"
        >
          <TreeSelect.Value
            className="select-value"
            placeholder="Choose a city"
          />
          <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.Input
              className="input tree-select-input"
              placeholder="Search places"
              aria-label="Search places"
            />
            <TreeSelect.Tree
              className="tree tree-select-tree"
              aria-label="Places"
            >
              {renderNodes(roots)}
            </TreeSelect.Tree>
            <TreeSelect.Empty className="tree-select-empty">
              No places found
            </TreeSelect.Empty>
            <TreeSelect.Status className="tree-select-status" />
          </TreeSelect.Popup>
        </TreeSelect.Positioner>
      </TreeSelect.Portal>
    </TreeSelect.Root>
  )
}

import * as React from 'react'
import { Field } from '@hamur/react/field'
import { Form } from '@hamur/react/form'
import { TreeSelect } from '@hamur/react/tree-select'

const labels: Record<string, string> = {
  americas: 'Americas',
  canada: 'Canada',
  mexico: 'Mexico',
  emea: 'EMEA',
  ireland: 'Ireland',
  kenya: 'Kenya',
  apac: 'APAC',
  australia: 'Australia',
  singapore: 'Singapore',
}
const children: Record<string, string[]> = {
  americas: ['canada', 'mexico'],
  emea: ['ireland', 'kenya'],
  apac: ['australia', 'singapore'],
}
const roots = ['americas', 'emea', 'apac']

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.ItemIndicator keepMounted className="tree-check">
          <svg viewBox="0 0 16 16" width="12" height="12" aria-hidden="true">
            <path className="tree-check-mark" d="M3 8.5l3 3 7-7" />
            <path className="tree-check-dash" d="M4 8h8" />
          </svg>
        </TreeSelect.ItemIndicator>
        <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 TreeSelectFormExample() {
  const [submitted, setSubmitted] = React.useState('')
  return (
    <Form
      className="stack"
      onFormSubmit={(_values, details) => {
        const form = details.event.target as HTMLFormElement
        // A multiple tree select submits one entry per value: regions=canada&regions=mexico.
        setSubmitted([...new FormData(form)].map(([key, value]) => `${key}=${value}`).join('&'))
      }}
    >
      <Field.Root name="regions" className="field">
        <Field.Label className="select-label">Regions</Field.Label>
        <TreeSelect.Root
          multiple
          cascade
          cascadeValue="leaves"
          required
          items={roots}
          getItemChildren={(value: string) => children[value]}
          itemToStringLabel={(value: string) => labels[value]}
          defaultExpanded={roots}
        >
          <div className="tree-select-row">
            <TreeSelect.Trigger className="select">
              <TreeSelect.Value
                className="select-value"
                placeholder="Choose regions"
              />
              <TreeSelect.Icon className="select-icon" />
            </TreeSelect.Trigger>
            <TreeSelect.Clear
              className="tree-select-clear"
              aria-label="Clear regions"
            >
              <svg viewBox="0 0 16 16" width="14" height="14" aria-hidden="true">
                <path d="M4 4l8 8M12 4l-8 8" />
              </svg>
            </TreeSelect.Clear>
          </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="Regions"
                >
                  {renderNodes(roots)}
                </TreeSelect.Tree>
              </TreeSelect.Popup>
            </TreeSelect.Positioner>
          </TreeSelect.Portal>
        </TreeSelect.Root>
        <Field.Error className="error" />
      </Field.Root>
      <button className="button" type="submit">
        Save
      </button>
      {submitted ? <pre className="output">{submitted}</pre> : null}
    </Form>
  )
}