Tree view

import { useState, type KeyboardEvent } from 'react';

export type TreeNode = { id: string; name: string; children?: TreeNode[] };

export function FileTree({ nodes }: { nodes: TreeNode[] }) {
  const [open, setOpen] = useState<Record<string, boolean>>({});
  // Only the active row is in the tab order, so the tree is one tab stop.
  const [active, setActive] = useState(nodes[0]?.id);
  const toggle = (id: string, next = !open[id]) =>
    setOpen({ ...open, [id]: next });

  function onKeyDown(event: KeyboardEvent<HTMLUListElement>) {
    // Closed folders render no children, so DOM order is the visible order.
    const rows = [
      ...event.currentTarget.querySelectorAll<HTMLElement>('[role=treeitem]')
    ];
    const row = event.target as HTMLElement;
    const [index, id] = [rows.indexOf(row), row.dataset.id ?? ''];
    const folder = row.hasAttribute('aria-expanded');
    if (event.key === 'ArrowRight' && folder && !open[id]) toggle(id, true);
    else if (event.key === 'ArrowLeft' && open[id]) toggle(id, false);
    else if (event.key === 'Enter' && folder) toggle(id);
    else {
      const next = {
        ArrowDown: rows[index + 1],
        ArrowUp: rows[index - 1],
        Home: rows[0],
        End: rows.at(-1),
        ArrowRight: folder ? rows[index + 1] : undefined,
        ArrowLeft: row.parentElement?.closest<HTMLElement>('[role=treeitem]')
      }[event.key];
      if (!next) return;
      next.focus();
    }
    event.preventDefault();
  }

  const renderRows = (list: TreeNode[], level: number) =>
    list.map((node) => (
      <li
        key={node.id}
        role='treeitem'
        data-id={node.id}
        aria-level={level}
        aria-expanded={node.children ? !!open[node.id] : undefined}
        aria-selected={node.id === active}
        tabIndex={node.id === active ? 0 : -1}
        onFocus={(event) => {
          event.stopPropagation();
          setActive(node.id);
        }}
        className='outline-none focus-visible:[&>div]:ring-2 focus-visible:[&>div]:ring-blue-500'
      >
        <div
          onClick={() => node.children && toggle(node.id)}
          className={`flex items-center gap-1.5 rounded-md px-2 py-1 ${node.id === active ? 'bg-blue-500/10' : ''}`}
        >
          <span
            aria-hidden='true'
            className={`transition-transform ${node.children ? '' : 'invisible'} ${open[node.id] ? 'rotate-90' : ''}`}
          >
            ›
          </span>
          {node.name}
        </div>
        {node.children && open[node.id] && (
          // The left border doubles as the indent guide.
          <ul role='group' className='ml-3.5 border-l pl-2'>
            {renderRows(node.children, level + 1)}
          </ul>
        )}
      </li>
    ));

  return (
    <ul role='tree' aria-label='Files' onKeyDown={onKeyDown} className='w-64'>
      {renderRows(nodes, 1)}
    </ul>
  );
}