"use client"; import * as React from "react"; import { AnimatePresence, motion } from "motion/react"; import { cn } from "@kineticui/core"; import { ChevronRightIcon, FileIcon, FolderIcon } from "@kineticui/icons"; export type TreeNode = { id: string; label: string; icon?: React.ReactNode; children?: TreeNode[]; meta?: React.ReactNode }; export type TreeViewProps = { data: TreeNode[]; selected?: string; onSelect?: (node: TreeNode) => void; defaultExpanded?: string[]; className?: string; }; /** File-tree style hierarchy with keyboard navigation (arrows, Home/End, Enter). */ export function TreeView({ data, selected, onSelect, defaultExpanded = [], className }: TreeViewProps) { const [expanded, setExpanded] = React.useState>(() => new Set(defaultExpanded)); const [focus, setFocus] = React.useState(selected ?? data[0]?.id); const ref = React.useRef(null); const flat: { node: TreeNode; depth: number; parent?: string }[] = []; const walk = (nodes: TreeNode[], depth: number, parent?: string) => nodes.forEach((n) => { flat.push({ node: n, depth, parent }); if (n.children && expanded.has(n.id)) walk(n.children, depth + 1, n.id); }); walk(data, 0); const toggle = (id: string) => setExpanded((s) => { const n = new Set(s); if (n.has(id)) n.delete(id); else n.add(id); return n; }); const focusId = (id?: string) => { if (!id) return; setFocus(id); requestAnimationFrame(() => (ref.current?.querySelector(`[data-id="${CSS.escape(id)}"]`) as HTMLElement | null)?.focus()); }; const onKey = (e: React.KeyboardEvent) => { const i = flat.findIndex((f) => f.node.id === focus); const cur = flat[i]; if (!cur) return; const hasKids = !!cur.node.children?.length; const map: Record void> = { ArrowDown: () => focusId(flat[i + 1]?.node.id), ArrowUp: () => focusId(flat[i - 1]?.node.id), Home: () => focusId(flat[0]?.node.id), End: () => focusId(flat.at(-1)?.node.id), ArrowRight: () => (hasKids && !expanded.has(cur.node.id) ? toggle(cur.node.id) : hasKids ? focusId(flat[i + 1]?.node.id) : undefined), ArrowLeft: () => (hasKids && expanded.has(cur.node.id) ? toggle(cur.node.id) : focusId(cur.parent)), Enter: () => (hasKids ? toggle(cur.node.id) : onSelect?.(cur.node)), " ": () => (hasKids ? toggle(cur.node.id) : onSelect?.(cur.node)), }; if (map[e.key]) { e.preventDefault(); map[e.key]!(); } }; const render = (nodes: TreeNode[], depth: number): React.ReactNode => nodes.map((n) => { const kids = !!n.children?.length; const open = expanded.has(n.id); return (

setFocus(n.id)} onClick={() => (kids ? toggle(n.id) : onSelect?.(n))} style={{ paddingLeft: 8 + depth * 16 }} className={cn( "flex h-8 cursor-pointer items-center gap-1.5 rounded-lg pr-2 text-sm outline-none focus-visible:ring-2 focus-visible:ring-accent", selected === n.id ? "bg-accent-soft text-foreground" : "text-muted hover:bg-surface-raised hover:text-foreground", )} > {n.icon ?? (kids ? : )} {n.label} {n.meta ? {n.meta} : null}

{kids && open ? ( {render(n.children!, depth + 1)} ) : null}

); }); return (

{render(data, 0)} ); }

Tree View

Installation

Exports