"use client"; import { useCallback, useId, useMemo, useRef, useState } from "react"; import type { HTMLAttributes, KeyboardEvent } from "react"; export type DocsTreeNode = { id: string; label: string; href?: string; children?: DocsTreeNode[]; }; export type DocsSidebarTreeProps = Omit, "children"> & { nodes: DocsTreeNode[]; activeHref?: string; expanded?: string[]; defaultExpanded?: string[]; onExpandedChange?: (expanded: string[]) => void; label?: string; }; type FlatNode = { node: DocsTreeNode; parentId: string | null }; const ring = "outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[#1F4E79] dark:focus-visible:ring-[#8CB6E0]"; function findPath(nodes: DocsTreeNode[], href: string | undefined, trail: string[] = []): string[] | null { if (!href) return null; for (const node of nodes) { if (node.href === href) return [...trail, node.id]; if (node.children) { const found = findPath(node.children, href, [...trail, node.id]); if (found) return found; } } return null; } function flatten(nodes: DocsTreeNode[], open: Set, parentId: string | null = null, out: FlatNode[] = []) { for (const node of nodes) { out.push({ node, parentId }); if (node.children?.length && open.has(node.id)) flatten(node.children, open, node.id, out); } return out; } export function DocsSidebarTree({ nodes, activeHref, expanded, defaultExpanded, onExpandedChange, label = "Documentation", className = "", ...props }: DocsSidebarTreeProps) { const activePath = useMemo(() => findPath(nodes, activeHref) ?? [], [nodes, activeHref]); const activeId = activePath[activePath.length - 1]; const [uncontrolled, setUncontrolled] = useState(() => defaultExpanded ?? activePath.slice(0, -1)); const openIds = expanded ?? uncontrolled; const openSet = useMemo(() => new Set(openIds), [openIds]); const visible = useMemo(() => flatten(nodes, openSet), [nodes, openSet]); const [focusedId, setFocusedId] = useState(undefined); const refs = useRef(new Map()); const baseId = useId(); const tabStop = focusedId && visible.some((entry) => entry.node.id === focusedId) ? focusedId : activeId && visible.some((entry) => entry.node.id === activeId) ? activeId : visible[0]?.node.id; const setOpen = useCallback( (id: string, next: boolean) => { const set = new Set(openIds); if (next) set.add(id); else set.delete(id); const list = Array.from(set); if (expanded === undefined) setUncontrolled(list); onExpandedChange?.(list); }, [expanded, onExpandedChange, openIds], ); const focusNode = (id: string | undefined) => { if (!id) return; setFocusedId(id); refs.current.get(id)?.focus(); }; const onKeyDown = (event: KeyboardEvent, entry: FlatNode) => { const index = visible.findIndex((item) => item.node.id === entry.node.id); const hasChildren = Boolean(entry.node.children?.length); const isOpen = openSet.has(entry.node.id); let handled = true; switch (event.key) { case "ArrowDown": focusNode(visible[index + 1]?.node.id); break; case "ArrowUp": focusNode(visible[index - 1]?.node.id); break; case "Home": focusNode(visible[0]?.node.id); break; case "End": focusNode(visible[visible.length - 1]?.node.id); break; case "ArrowRight": if (hasChildren && !isOpen) setOpen(entry.node.id, true); else if (hasChildren) focusNode(visible[index + 1]?.node.id); break; case "ArrowLeft": if (hasChildren && isOpen) setOpen(entry.node.id, false); else if (entry.parentId) focusNode(entry.parentId); break; case "Enter": case " ": if (hasChildren) setOpen(entry.node.id, !isOpen); else if (event.key === " ") (event.currentTarget as HTMLElement).click(); else handled = false; break; default: handled = false; if (event.key.length === 1 && /\S/.test(event.key) && !event.altKey && !event.ctrlKey && !event.metaKey) { const char = event.key.toLowerCase(); const ordered = [...visible.slice(index + 1), ...visible.slice(0, index + 1)]; const match = ordered.find((item) => item.node.label.toLowerCase().startsWith(char)); if (match) { focusNode(match.node.id); handled = true; } } } if (handled) event.preventDefault(); }; const renderLevel = (levelNodes: DocsTreeNode[], level: number, parentId: string | null) => levelNodes.map((node, index) => { const entry: FlatNode = { node, parentId }; const hasChildren = Boolean(node.children?.length); const isOpen = openSet.has(node.id); const isActive = node.id === activeId; const onActivePath = activePath.includes(node.id); const groupId = baseId + "-" + node.id; const shared = { role: "treeitem", "aria-level": level, "aria-setsize": levelNodes.length, "aria-posinset": index + 1, tabIndex: tabStop === node.id ? 0 : -1, ref: (element: HTMLElement | null) => { if (element) refs.current.set(node.id, element); else refs.current.delete(node.id); }, onFocus: () => setFocusedId(node.id), onKeyDown: (event: KeyboardEvent) => onKeyDown(event, entry), style: { paddingLeft: 12 + (level - 1) * 14 }, } as const; return (

{hasChildren ? (

{ setFocusedId(node.id); setOpen(node.id, !isOpen); }} className={ "flex min-h-9 cursor-pointer items-center justify-between gap-2 rounded-md pr-2 text-sm select-none hover:bg-[#F1F4F7] dark:hover:bg-[#18222C] " + (onActivePath ? "font-medium text-[#16202A] dark:text-[#E4EAF0] " : "text-[#16202A] dark:text-[#E4EAF0] ") + ring } > {node.label}

) : ( {isActive ? )} {hasChildren && isOpen ? (

{renderLevel(node.children ?? [], level + 1, node.id)} ) : null}

); }); return ( ); }