{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "performant-sidebar",
  "type": "registry:block",
  "title": "Performant sidebar",
  "description": "Performant sidebar",
  "files": [
    {
      "path": "components/usages/performantsidebarusage.tsx",
      "content": "import { PointerEvent as ReactPointerEvent, useRef, useState } from \"react\";\n\nimport { Content } from \"@/registry/open-source/performant-sidebar/Content\";\nimport { TreeviewComponent } from \"@/registry/open-source/performant-sidebar/Treeview\";\nimport clsx from \"clsx\";\nimport clamp from \"lodash.clamp\";\n\n// Credit:\n// https://www.joshuawootonn.com/sidebar-animation-performance\n\nconst Open = {\n\tOpen: \"open\",\n\tClosed: \"closed\",\n} as const;\n\ntype Open = (typeof Open)[keyof typeof Open];\n\nexport default function GitlabSidebarPage({ isDemo = false }) {\n\tconst [selected, select] = useState<string | null>(null);\n\tconst [width, setWidth] = useState(250);\n\tconst originalWidth = useRef(width);\n\tconst originalClientX = useRef(width);\n\tconst [isDragging, setDragging] = useState(false);\n\tconst [isOpen, setOpen] = useState<Open>(Open.Open);\n\n\treturn (\n\t\t<div className=\"flex w-screen justify-start items-start h-screen relative\">\n\t\t\t<nav\n\t\t\t\tclassName={clsx(\n\t\t\t\t\t\"fixed top-0 bottom-0 left-0 flex flex-col space-y-2 h-screen max-h-screen shrink-0 bg-[rgb(251,251,250)] transition-transform ease-[cubic-bezier(0.165,0.84,0.44,1)] duration-300\",\n\t\t\t\t\t{\n\t\t\t\t\t\t[\"cursor-col-resize\"]: isDragging,\n\t\t\t\t\t\tsticky: isDemo,\n\t\t\t\t\t},\n\t\t\t\t\tisDragging\n\t\t\t\t\t\t? \"shadow-[rgba(0,0,0,0.2)_-2px_0px_0px_0px_inset]\"\n\t\t\t\t\t\t: \"shadow-[rgba(0,0,0,0.04)_-2px_0px_0px_0px_inset]\",\n\t\t\t\t\tisOpen === Open.Open ? \"translate-x-0\" : \"-translate-x-full\"\n\t\t\t\t)}\n\t\t\t\taria-labelledby=\"nav-heading\"\n\t\t\t\tstyle={{ width }}\n\t\t\t>\n\t\t\t\t<div className=\"flex flex-col space-y-2 p-3 h-full overflow-auto\">\n\t\t\t\t\t<h2 id=\"nav-heading\" className=\"text-lg font-bold\">\n\t\t\t\t\t\tLorem Ipsum\n\t\t\t\t\t</h2>\n\t\t\t\t\t<TreeviewComponent />\n\t\t\t\t\t<a\n\t\t\t\t\t\tclassName=\"underline text-center\"\n\t\t\t\t\t\thref=\"https://www.joshuawootonn.com/react-treeview-component\"\n\t\t\t\t\t>\n\t\t\t\t\t\tmore about this treeview\n\t\t\t\t\t\t<svg\n\t\t\t\t\t\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\t\t\t\t\t\tfill=\"none\"\n\t\t\t\t\t\t\tviewBox=\"0 0 24 24\"\n\t\t\t\t\t\t\tstrokeWidth={2.5}\n\t\t\t\t\t\t\tstroke=\"currentColor\"\n\t\t\t\t\t\t\tclassName=\"h-4 w-4 inline-block ml-1 -translate-y-1\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<path\n\t\t\t\t\t\t\t\tstrokeLinecap=\"round\"\n\t\t\t\t\t\t\t\tstrokeLinejoin=\"round\"\n\t\t\t\t\t\t\t\td=\"M4.5 19.5l15-15m0 0H8.25m11.25 0v11.25\"\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</svg>\n\t\t\t\t\t</a>\n\t\t\t\t</div>\n\t\t\t\t<button\n\t\t\t\t\tclassName=\"absolute bg-background p-1 border-y-2 border-r-2 border-[rgba(0,0,0,0.08)] text-slate-600 -right-[34px]\"\n\t\t\t\t\tonClick={() =>\n\t\t\t\t\t\tsetOpen((isOpen) =>\n\t\t\t\t\t\t\tisOpen === Open.Closed ? Open.Open : Open.Closed\n\t\t\t\t\t\t)\n\t\t\t\t\t}\n\t\t\t\t>\n\t\t\t\t\t<svg\n\t\t\t\t\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\t\t\t\t\tfill=\"none\"\n\t\t\t\t\t\tviewBox=\"0 0 24 24\"\n\t\t\t\t\t\tstrokeWidth={1.5}\n\t\t\t\t\t\tstroke=\"currentColor\"\n\t\t\t\t\t\tclassName={clsx(\n\t\t\t\t\t\t\t\"w-6 h-6 transition-transform ease-[cubic-bezier(0.165,0.84,0.44,1)] duration-300\",\n\t\t\t\t\t\t\tisOpen === Open.Open ? \"rotate-180\" : \"rotate-0\"\n\t\t\t\t\t\t)}\n\t\t\t\t\t>\n\t\t\t\t\t\t<path\n\t\t\t\t\t\t\tstrokeLinecap=\"round\"\n\t\t\t\t\t\t\tstrokeLinejoin=\"round\"\n\t\t\t\t\t\t\td=\"M4.5 12h15m0 0l-6.75-6.75M19.5 12l-6.75 6.75\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t</svg>\n\t\t\t\t</button>\n\n\t\t\t\t<div className=\"absolute z-10 right-0 w-0 grow-0 top-0 bottom-0\">\n\t\t\t\t\t<div\n\t\t\t\t\t\tonPointerDown={(e: ReactPointerEvent) => {\n\t\t\t\t\t\t\t// this prevents dragging from selecting\n\t\t\t\t\t\t\te.preventDefault();\n\n\t\t\t\t\t\t\tconst { ownerDocument } = e.currentTarget;\n\t\t\t\t\t\t\toriginalWidth.current = width;\n\t\t\t\t\t\t\toriginalClientX.current = e.clientX;\n\t\t\t\t\t\t\tsetDragging(true);\n\n\t\t\t\t\t\t\tfunction onPointerMove(e: PointerEvent) {\n\t\t\t\t\t\t\t\tif (e.clientX < 50) setOpen(Open.Closed);\n\t\t\t\t\t\t\t\telse setOpen(Open.Open);\n\n\t\t\t\t\t\t\t\tsetWidth(\n\t\t\t\t\t\t\t\t\tMath.floor(\n\t\t\t\t\t\t\t\t\t\tclamp(\n\t\t\t\t\t\t\t\t\t\t\toriginalWidth.current +\n\t\t\t\t\t\t\t\t\t\t\t\te.clientX -\n\t\t\t\t\t\t\t\t\t\t\t\toriginalClientX.current,\n\t\t\t\t\t\t\t\t\t\t\t200,\n\t\t\t\t\t\t\t\t\t\t\t400\n\t\t\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\tfunction onPointerUp() {\n\t\t\t\t\t\t\t\townerDocument.removeEventListener(\n\t\t\t\t\t\t\t\t\t\"pointermove\",\n\t\t\t\t\t\t\t\t\tonPointerMove\n\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\tsetDragging(false);\n\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\townerDocument.addEventListener(\n\t\t\t\t\t\t\t\t\"pointermove\",\n\t\t\t\t\t\t\t\tonPointerMove\n\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\townerDocument.addEventListener(\"pointerup\", onPointerUp, {\n\t\t\t\t\t\t\t\tonce: true,\n\t\t\t\t\t\t\t});\n\t\t\t\t\t\t}}\n\t\t\t\t\t\tclassName={clsx(\"w-3 h-full cursor-col-resize shrink-0\")}\n\t\t\t\t\t/>\n\t\t\t\t</div>\n\t\t\t</nav>\n\n\t\t\t<main\n\t\t\t\tstyle={{ paddingLeft: isOpen === Open.Open ? width : 0 }}\n\t\t\t\tclassName={clsx(\n\t\t\t\t\t\"flex grow max-h-screen\",\n\t\t\t\t\tisDragging\n\t\t\t\t\t\t? \"transition-none\"\n\t\t\t\t\t\t: \"transition-all ease-[cubic-bezier(0.165,0.84,0.44,1)] duration-300\"\n\t\t\t\t)}\n\t\t\t>\n\t\t\t\t<div className=\"flex flex-col px-5 py-12 grow overflow-auto\">\n\t\t\t\t\t<div className=\"prose mx-auto\">\n\t\t\t\t\t\t<h1>Gitlab</h1>\n\t\t\t\t\t\t<Content />\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</main>\n\t\t</div>\n\t);\n}\n",
      "type": "registry:block",
      "target": "~/example.tsx"
    },
    {
      "path": "components/usages/performantsidebarusage.tsx",
      "content": "import { PointerEvent as ReactPointerEvent, useRef, useState } from \"react\";\n\nimport { Content } from \"@/registry/open-source/performant-sidebar/Content\";\nimport { TreeviewComponent } from \"@/registry/open-source/performant-sidebar/Treeview\";\nimport clsx from \"clsx\";\nimport clamp from \"lodash.clamp\";\n\n// Credit:\n// https://www.joshuawootonn.com/sidebar-animation-performance\n\nconst Open = {\n\tOpen: \"open\",\n\tClosed: \"closed\",\n} as const;\n\ntype Open = (typeof Open)[keyof typeof Open];\n\nexport default function GitlabSidebarPage({ isDemo = false }) {\n\tconst [selected, select] = useState<string | null>(null);\n\tconst [width, setWidth] = useState(250);\n\tconst originalWidth = useRef(width);\n\tconst originalClientX = useRef(width);\n\tconst [isDragging, setDragging] = useState(false);\n\tconst [isOpen, setOpen] = useState<Open>(Open.Open);\n\n\treturn (\n\t\t<div className=\"flex w-screen justify-start items-start h-screen relative\">\n\t\t\t<nav\n\t\t\t\tclassName={clsx(\n\t\t\t\t\t\"fixed top-0 bottom-0 left-0 flex flex-col space-y-2 h-screen max-h-screen shrink-0 bg-[rgb(251,251,250)] transition-transform ease-[cubic-bezier(0.165,0.84,0.44,1)] duration-300\",\n\t\t\t\t\t{\n\t\t\t\t\t\t[\"cursor-col-resize\"]: isDragging,\n\t\t\t\t\t\tsticky: isDemo,\n\t\t\t\t\t},\n\t\t\t\t\tisDragging\n\t\t\t\t\t\t? \"shadow-[rgba(0,0,0,0.2)_-2px_0px_0px_0px_inset]\"\n\t\t\t\t\t\t: \"shadow-[rgba(0,0,0,0.04)_-2px_0px_0px_0px_inset]\",\n\t\t\t\t\tisOpen === Open.Open ? \"translate-x-0\" : \"-translate-x-full\"\n\t\t\t\t)}\n\t\t\t\taria-labelledby=\"nav-heading\"\n\t\t\t\tstyle={{ width }}\n\t\t\t>\n\t\t\t\t<div className=\"flex flex-col space-y-2 p-3 h-full overflow-auto\">\n\t\t\t\t\t<h2 id=\"nav-heading\" className=\"text-lg font-bold\">\n\t\t\t\t\t\tLorem Ipsum\n\t\t\t\t\t</h2>\n\t\t\t\t\t<TreeviewComponent />\n\t\t\t\t\t<a\n\t\t\t\t\t\tclassName=\"underline text-center\"\n\t\t\t\t\t\thref=\"https://www.joshuawootonn.com/react-treeview-component\"\n\t\t\t\t\t>\n\t\t\t\t\t\tmore about this treeview\n\t\t\t\t\t\t<svg\n\t\t\t\t\t\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\t\t\t\t\t\tfill=\"none\"\n\t\t\t\t\t\t\tviewBox=\"0 0 24 24\"\n\t\t\t\t\t\t\tstrokeWidth={2.5}\n\t\t\t\t\t\t\tstroke=\"currentColor\"\n\t\t\t\t\t\t\tclassName=\"h-4 w-4 inline-block ml-1 -translate-y-1\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<path\n\t\t\t\t\t\t\t\tstrokeLinecap=\"round\"\n\t\t\t\t\t\t\t\tstrokeLinejoin=\"round\"\n\t\t\t\t\t\t\t\td=\"M4.5 19.5l15-15m0 0H8.25m11.25 0v11.25\"\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</svg>\n\t\t\t\t\t</a>\n\t\t\t\t</div>\n\t\t\t\t<button\n\t\t\t\t\tclassName=\"absolute bg-background p-1 border-y-2 border-r-2 border-[rgba(0,0,0,0.08)] text-slate-600 -right-[34px]\"\n\t\t\t\t\tonClick={() =>\n\t\t\t\t\t\tsetOpen((isOpen) =>\n\t\t\t\t\t\t\tisOpen === Open.Closed ? Open.Open : Open.Closed\n\t\t\t\t\t\t)\n\t\t\t\t\t}\n\t\t\t\t>\n\t\t\t\t\t<svg\n\t\t\t\t\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\t\t\t\t\tfill=\"none\"\n\t\t\t\t\t\tviewBox=\"0 0 24 24\"\n\t\t\t\t\t\tstrokeWidth={1.5}\n\t\t\t\t\t\tstroke=\"currentColor\"\n\t\t\t\t\t\tclassName={clsx(\n\t\t\t\t\t\t\t\"w-6 h-6 transition-transform ease-[cubic-bezier(0.165,0.84,0.44,1)] duration-300\",\n\t\t\t\t\t\t\tisOpen === Open.Open ? \"rotate-180\" : \"rotate-0\"\n\t\t\t\t\t\t)}\n\t\t\t\t\t>\n\t\t\t\t\t\t<path\n\t\t\t\t\t\t\tstrokeLinecap=\"round\"\n\t\t\t\t\t\t\tstrokeLinejoin=\"round\"\n\t\t\t\t\t\t\td=\"M4.5 12h15m0 0l-6.75-6.75M19.5 12l-6.75 6.75\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t</svg>\n\t\t\t\t</button>\n\n\t\t\t\t<div className=\"absolute z-10 right-0 w-0 grow-0 top-0 bottom-0\">\n\t\t\t\t\t<div\n\t\t\t\t\t\tonPointerDown={(e: ReactPointerEvent) => {\n\t\t\t\t\t\t\t// this prevents dragging from selecting\n\t\t\t\t\t\t\te.preventDefault();\n\n\t\t\t\t\t\t\tconst { ownerDocument } = e.currentTarget;\n\t\t\t\t\t\t\toriginalWidth.current = width;\n\t\t\t\t\t\t\toriginalClientX.current = e.clientX;\n\t\t\t\t\t\t\tsetDragging(true);\n\n\t\t\t\t\t\t\tfunction onPointerMove(e: PointerEvent) {\n\t\t\t\t\t\t\t\tif (e.clientX < 50) setOpen(Open.Closed);\n\t\t\t\t\t\t\t\telse setOpen(Open.Open);\n\n\t\t\t\t\t\t\t\tsetWidth(\n\t\t\t\t\t\t\t\t\tMath.floor(\n\t\t\t\t\t\t\t\t\t\tclamp(\n\t\t\t\t\t\t\t\t\t\t\toriginalWidth.current +\n\t\t\t\t\t\t\t\t\t\t\t\te.clientX -\n\t\t\t\t\t\t\t\t\t\t\t\toriginalClientX.current,\n\t\t\t\t\t\t\t\t\t\t\t200,\n\t\t\t\t\t\t\t\t\t\t\t400\n\t\t\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\tfunction onPointerUp() {\n\t\t\t\t\t\t\t\townerDocument.removeEventListener(\n\t\t\t\t\t\t\t\t\t\"pointermove\",\n\t\t\t\t\t\t\t\t\tonPointerMove\n\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\tsetDragging(false);\n\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\townerDocument.addEventListener(\n\t\t\t\t\t\t\t\t\"pointermove\",\n\t\t\t\t\t\t\t\tonPointerMove\n\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\townerDocument.addEventListener(\"pointerup\", onPointerUp, {\n\t\t\t\t\t\t\t\tonce: true,\n\t\t\t\t\t\t\t});\n\t\t\t\t\t\t}}\n\t\t\t\t\t\tclassName={clsx(\"w-3 h-full cursor-col-resize shrink-0\")}\n\t\t\t\t\t/>\n\t\t\t\t</div>\n\t\t\t</nav>\n\n\t\t\t<main\n\t\t\t\tstyle={{ paddingLeft: isOpen === Open.Open ? width : 0 }}\n\t\t\t\tclassName={clsx(\n\t\t\t\t\t\"flex grow max-h-screen\",\n\t\t\t\t\tisDragging\n\t\t\t\t\t\t? \"transition-none\"\n\t\t\t\t\t\t: \"transition-all ease-[cubic-bezier(0.165,0.84,0.44,1)] duration-300\"\n\t\t\t\t)}\n\t\t\t>\n\t\t\t\t<div className=\"flex flex-col px-5 py-12 grow overflow-auto\">\n\t\t\t\t\t<div className=\"prose mx-auto\">\n\t\t\t\t\t\t<h1>Gitlab</h1>\n\t\t\t\t\t\t<Content />\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</main>\n\t\t</div>\n\t);\n}\n",
      "type": "registry:ui"
    },
    {
      "path": "registry/open-source/performant-sidebar/Content.tsx",
      "content": "import { PerfSlayer } from \"./perf-slayer.tsx\";\n\nexport function Content() {\n\treturn (\n\t\t<>\n\t\t\t<h2>External links to all the sidebars</h2>\n\t\t\t<div className=\"flex space-x-4\">\n\t\t\t\t<a href=\"https://react-components-from-scratch.vercel.app/sidebar/initial\">\n\t\t\t\t\tInitial\n\t\t\t\t</a>\n\t\t\t\t<a href=\"https://react-components-from-scratch.vercel.app/sidebar/linear\">\n\t\t\t\t\tLinear\n\t\t\t\t</a>\n\t\t\t\t<a href=\"https://react-components-from-scratch.vercel.app/sidebar/notion\">\n\t\t\t\t\tNotion\n\t\t\t\t</a>\n\t\t\t\t<a href=\"https://react-components-from-scratch.vercel.app/sidebar/gitlab\">\n\t\t\t\t\tGitlab\n\t\t\t\t</a>\n\t\t\t</div>\n\n\t\t\t<h2>\n\t\t\t\t<code>PerfSlayer</code>\n\t\t\t</h2>\n\t\t\t<p className=\"\">\n\t\t\t\tIncrease this value to intentionally bottle neck the main thread\n\t\t\t</p>\n\n\t\t\t<PerfSlayer className=\"h-96 w-full mb-12\" />\n\t\t\t<h2>External links to each sidebar examples</h2>\n\n\t\t\t<p>\n\t\t\t\t<strong>Pellentesque habitant morbi tristique</strong> senectus et\n\t\t\t\tnetus et malesuada fames ac turpis egestas. Vestibulum tortor quam,\n\t\t\t\tfeugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu\n\t\t\t\tlibero sit amet quam egestas semper.{\" \"}\n\t\t\t\t<em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend\n\t\t\t\tleo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum\n\t\t\t\terat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit\n\t\t\t\tamet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros\n\t\t\t\tipsum rutrum orci, sagittis tempus lacus enim ac dui.{\" \"}\n\t\t\t\t<a href=\"#\">Donec non enim</a> in turpis pulvinar facilisis. Ut\n\t\t\t\tfelis.\n\t\t\t</p>\n\n\t\t\t<h2>Header Level 2</h2>\n\n\t\t\t<ol>\n\t\t\t\t<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>\n\t\t\t\t<li>Aliquam tincidunt mauris eu risus.</li>\n\t\t\t</ol>\n\n\t\t\t<blockquote>\n\t\t\t\t<p>\n\t\t\t\t\tLorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus\n\t\t\t\t\tmagna. Cras in mi at felis aliquet congue. Ut a est eget ligula\n\t\t\t\t\tmolestie gravida. Curabitur massa. Donec eleifend, libero at\n\t\t\t\t\tsagittis mollis, tellus est malesuada tellus, at luctus turpis\n\t\t\t\t\telit sit amet quam. Vivamus pretium ornare est.\n\t\t\t\t</p>\n\t\t\t</blockquote>\n\n\t\t\t<h3>Header Level 3</h3>\n\n\t\t\t<ul>\n\t\t\t\t<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>\n\t\t\t\t<li>Aliquam tincidunt mauris eu risus.</li>\n\t\t\t</ul>\n\n\t\t\t<pre>\n\t\t\t\t<code>\n\t\t\t\t\t{`#header h1 a {\ndisplay: block;\nwidth: 300px;\nheight: 80px;\n}`}\n\t\t\t\t</code>\n\t\t\t</pre>\n\t\t\t<h2>Header Level 2</h2>\n\n\t\t\t<ol>\n\t\t\t\t<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>\n\t\t\t\t<li>Aliquam tincidunt mauris eu risus.</li>\n\t\t\t</ol>\n\n\t\t\t<blockquote>\n\t\t\t\t<p>\n\t\t\t\t\tLorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus\n\t\t\t\t\tmagna. Cras in mi at felis aliquet congue. Ut a est eget ligula\n\t\t\t\t\tmolestie gravida. Curabitur massa. Donec eleifend, libero at\n\t\t\t\t\tsagittis mollis, tellus est malesuada tellus, at luctus turpis\n\t\t\t\t\telit sit amet quam. Vivamus pretium ornare est.\n\t\t\t\t</p>\n\t\t\t</blockquote>\n\n\t\t\t<h3>Header Level 3</h3>\n\n\t\t\t<ul>\n\t\t\t\t<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>\n\t\t\t\t<li>Aliquam tincidunt mauris eu risus.</li>\n\t\t\t</ul>\n\n\t\t\t<pre>\n\t\t\t\t<code>\n\t\t\t\t\t{`#header h1 a {\ndisplay: block;\nwidth: 300px;\nheight: 80px;\n}`}\n\t\t\t\t</code>\n\t\t\t</pre>\n\t\t</>\n\t);\n}\n",
      "type": "registry:ui"
    },
    {
      "path": "registry/open-source/performant-sidebar/Treeview.tsx",
      "content": "// I put this entire source and data for this component\n// into one file for ease of use. If you want to understand this\n// code I would check out: https://www.joshuawootonn.com/react-treeview-component\n\nimport {\n\tComponentPropsWithoutRef,\n\tcreateContext,\n\tDispatch,\n\tElementType,\n\tKeyboardEvent,\n\tMutableRefObject,\n\tReactNode,\n\tuseContext,\n\tuseReducer,\n\tuseRef,\n\tuseState,\n} from \"react\";\n\nimport clsx from \"clsx\";\nimport isHotkey from \"is-hotkey\";\nimport { AnimatePresence, motion, MotionConfig } from \"motion/react\";\nimport { v4 as uuid } from \"uuid\";\n\n/*********************************************\n * ROVING TABINDEX\n *********************************************/\n\nexport type RovingTabindexItem = {\n\tid: string;\n\telement: HTMLElement;\n};\n\ntype RovingTabindexContext = {\n\tfocusableId: string | null;\n\tsetFocusableId: (id: string) => void;\n\tonShiftTab: () => void;\n\tgetOrderedItems: () => RovingTabindexItem[];\n\telements: MutableRefObject<Map<string, HTMLElement>>;\n};\n\nconst RovingTabindexContext = createContext<RovingTabindexContext>({\n\tfocusableId: null,\n\tsetFocusableId: () => {},\n\tonShiftTab: () => {},\n\tgetOrderedItems: () => [],\n\telements: { current: new Map<string, HTMLElement>() },\n});\n\nexport function useRovingTabindex(id: string) {\n\tconst {\n\t\telements,\n\t\tgetOrderedItems,\n\t\tsetFocusableId,\n\t\tfocusableId,\n\t\tonShiftTab,\n\t} = useContext(RovingTabindexContext);\n\n\treturn {\n\t\tgetOrderedItems,\n\t\tisFocusable: focusableId === id,\n\t\tgetRovingProps: <T extends ElementType>(\n\t\t\tprops: ComponentPropsWithoutRef<T>\n\t\t) => ({\n\t\t\t...props,\n\t\t\tref: (element: HTMLElement | null) => {\n\t\t\t\tif (element) {\n\t\t\t\t\telements.current.set(id, element);\n\t\t\t\t} else {\n\t\t\t\t\telements.current.delete(id);\n\t\t\t\t}\n\t\t\t},\n\t\t\tonMouseDown: (e: MouseEvent) => {\n\t\t\t\tprops?.onMouseDown?.(e);\n\t\t\t\tif (e.target !== e.currentTarget) return;\n\t\t\t\tsetFocusableId(id);\n\t\t\t},\n\t\t\tonKeyDown: (e: KeyboardEvent) => {\n\t\t\t\tprops?.onKeyDown?.(e);\n\t\t\t\tif (e.target !== e.currentTarget) return;\n\t\t\t\tif (isHotkey(\"shift+tab\", e)) {\n\t\t\t\t\tonShiftTab();\n\t\t\t\t\treturn;\n\t\t\t\t}\n\t\t\t},\n\t\t\tonFocus: (e: FocusEvent) => {\n\t\t\t\tprops?.onFocus?.(e);\n\t\t\t\tif (e.target !== e.currentTarget) return;\n\t\t\t\tsetFocusableId(id);\n\t\t\t},\n\t\t\t[\"data-item\"]: true,\n\t\t\ttabIndex: focusableId === id ? 0 : -1,\n\t\t}),\n\t};\n}\n\ntype RovingTabindexRootBaseProps<T> = {\n\tchildren: ReactNode | ReactNode[];\n\tas?: T;\n\tvalueId?: string;\n};\n\ntype RovingTabindexRootProps<T extends ElementType> =\n\tRovingTabindexRootBaseProps<T> &\n\t\tOmit<ComponentPropsWithoutRef<T>, keyof RovingTabindexRootBaseProps<T>>;\n\nexport function RovingTabindexRoot<T extends ElementType>({\n\tchildren,\n\tvalueId,\n\tas,\n\t...props\n}: RovingTabindexRootProps<T>) {\n\tconst Component = as ?? \"div\";\n\tconst [focusableId, setFocusableId] = useState<string | null>(null);\n\tconst [isShiftTabbing, setIsShiftTabbing] = useState(false);\n\tconst elements = useRef(new Map<string, HTMLElement>());\n\tconst ref = useRef<HTMLDivElement | null>(null);\n\n\tfunction getOrderedItems() {\n\t\tif (!ref.current) return [];\n\t\tconst elementsFromDOM = Array.from(\n\t\t\tref.current.querySelectorAll<HTMLElement>(\n\t\t\t\t\":where([data-item=true]):not(:where([aria-expanded=false] *))\"\n\t\t\t)\n\t\t);\n\n\t\treturn Array.from(elements.current)\n\t\t\t.filter((a) => elementsFromDOM.indexOf(a[1]) > -1)\n\t\t\t.sort(\n\t\t\t\t(a, b) =>\n\t\t\t\t\telementsFromDOM.indexOf(a[1]) - elementsFromDOM.indexOf(b[1])\n\t\t\t)\n\t\t\t.map(([id, element]) => ({ id, element }));\n\t}\n\n\treturn (\n\t\t<RovingTabindexContext.Provider\n\t\t\tvalue={{\n\t\t\t\telements,\n\t\t\t\tgetOrderedItems,\n\t\t\t\tsetFocusableId,\n\t\t\t\tfocusableId,\n\t\t\t\tonShiftTab: function () {\n\t\t\t\t\tsetIsShiftTabbing(true);\n\t\t\t\t},\n\t\t\t}}\n\t\t>\n\t\t\t<Component\n\t\t\t\t{...props}\n\t\t\t\tref={ref}\n\t\t\t\ttabIndex={isShiftTabbing ? -1 : 0}\n\t\t\t\tdata-root\n\t\t\t\tonFocus={(e) => {\n\t\t\t\t\tprops?.onFocus?.(e);\n\t\t\t\t\tif (e.target !== e.currentTarget || isShiftTabbing) return;\n\t\t\t\t\tconst orderedItems = getOrderedItems();\n\t\t\t\t\tif (orderedItems.length === 0) return;\n\n\t\t\t\t\tif (focusableId != null) {\n\t\t\t\t\t\telements.current.get(focusableId)?.focus();\n\t\t\t\t\t} else if (valueId != null) {\n\t\t\t\t\t\telements.current.get(valueId)?.focus();\n\t\t\t\t\t} else {\n\t\t\t\t\t\torderedItems.at(0)?.element.focus();\n\t\t\t\t\t}\n\t\t\t\t}}\n\t\t\t\tonBlur={(e) => {\n\t\t\t\t\tprops?.onBlur?.(e);\n\t\t\t\t\tsetIsShiftTabbing(false);\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t{children}\n\t\t\t</Component>\n\t\t</RovingTabindexContext.Provider>\n\t);\n}\n\nexport function getNextFocusableId(\n\torderedItems: RovingTabindexItem[],\n\tid: string\n): RovingTabindexItem | undefined {\n\tconst currIndex = orderedItems.findIndex((item) => item.id === id);\n\treturn orderedItems.at(\n\t\tcurrIndex === orderedItems.length - 1 ? 0 : currIndex + 1\n\t);\n}\n\nexport function getPrevFocusableId(\n\torderedItems: RovingTabindexItem[],\n\tid: string\n): RovingTabindexItem | undefined {\n\tconst currIndex = orderedItems.findIndex((item) => item.id === id);\n\treturn orderedItems.at(currIndex === 0 ? -1 : currIndex - 1);\n}\n\nexport function getParentFocusableId(\n\torderedItems: RovingTabindexItem[],\n\tid: string\n): RovingTabindexItem | undefined {\n\tconst currentElement = orderedItems.find((item) => item.id === id)?.element;\n\n\tif (currentElement == null) return;\n\n\tlet possibleParent = currentElement.parentElement;\n\n\twhile (\n\t\tpossibleParent !== null &&\n\t\tpossibleParent.getAttribute(\"data-item\") === null &&\n\t\tpossibleParent.getAttribute(\"data-root\") === null\n\t) {\n\t\tpossibleParent = possibleParent?.parentElement ?? null;\n\t}\n\n\treturn orderedItems.find((item) => item.element === possibleParent);\n}\n\nexport function getFirstFocusableId(\n\torderedItems: RovingTabindexItem[]\n): RovingTabindexItem | undefined {\n\treturn orderedItems.at(0);\n}\nexport function getLastFocusableId(\n\torderedItems: RovingTabindexItem[]\n): RovingTabindexItem | undefined {\n\treturn orderedItems.at(-1);\n}\n\n// wrapArray([1,2,3],2) -> [3,1,2]\nfunction wrapArray<T>(array: T[], startIndex: number) {\n\treturn array.map((_, index) => array[(startIndex + index) % array.length]);\n}\n\nexport function getNextFocusableIdByTypeahead(\n\titems: RovingTabindexItem[],\n\tid: string,\n\tkeyPressed: string\n) {\n\tconst currentIndex = items.findIndex((item) => item.id === id);\n\tconst wrappedItems = wrapArray(items, currentIndex);\n\tlet index = 0,\n\t\ttypeaheadMatchItem: RovingTabindexItem | undefined;\n\n\twhile (index < wrappedItems.length - 1 && typeaheadMatchItem == null) {\n\t\tconst nextItem = wrappedItems.at(index + 1);\n\n\t\tif (\n\t\t\tnextItem?.element?.textContent?.charAt(0).toLowerCase() ===\n\t\t\tkeyPressed.charAt(0).toLowerCase()\n\t\t) {\n\t\t\ttypeaheadMatchItem = nextItem;\n\t\t}\n\n\t\tindex++;\n\t}\n\n\treturn typeaheadMatchItem;\n}\n\n/*********************************************\n * TREEVIEW\n *********************************************/\n\nexport type TreeViewState = Map<string, boolean>;\n\nexport enum TreeViewActionTypes {\n\tOPEN = \"OPEN\",\n\tCLOSE = \"CLOSE\",\n}\n\nexport type TreeViewActions =\n\t| {\n\t\t\ttype: TreeViewActionTypes.OPEN;\n\t\t\tid: string;\n\t  }\n\t| {\n\t\t\ttype: TreeViewActionTypes.CLOSE;\n\t\t\tid: string;\n\t  };\n\nexport function treeviewReducer(\n\tstate: TreeViewState,\n\taction: TreeViewActions\n): TreeViewState {\n\tswitch (action.type) {\n\t\tcase TreeViewActionTypes.OPEN:\n\t\t\treturn new Map(state).set(action.id, true);\n\n\t\tcase TreeViewActionTypes.CLOSE:\n\t\t\treturn new Map(state).set(action.id, false);\n\n\t\tdefault:\n\t\t\tthrow new Error(\"Tree Reducer received an unknown action\");\n\t}\n}\n\nexport type TreeViewContextType = {\n\topen: TreeViewState;\n\tdispatch: Dispatch<TreeViewActions>;\n\tselectedId: string | null;\n\tselectId: (id: string) => void;\n};\n\nexport const TreeViewContext = createContext<TreeViewContextType>({\n\topen: new Map<string, boolean>(),\n\tdispatch: () => {},\n\tselectedId: null,\n\tselectId: () => {},\n});\n\ntype RootProps = {\n\tchildren: ReactNode | ReactNode[];\n\tclassName?: string;\n\tvalue: string | null;\n\tonChange: (id: string) => void;\n\tlabel: string;\n};\n\nexport function Root({\n\tchildren,\n\tclassName,\n\tvalue,\n\tonChange,\n\tlabel,\n}: RootProps) {\n\tconst [open, dispatch] = useReducer(\n\t\ttreeviewReducer,\n\t\tnew Map<string, boolean>()\n\t);\n\n\treturn (\n\t\t<TreeViewContext.Provider\n\t\t\tvalue={{\n\t\t\t\topen,\n\t\t\t\tdispatch,\n\t\t\t\tselectedId: value,\n\t\t\t\tselectId: onChange,\n\t\t\t}}\n\t\t>\n\t\t\t<RovingTabindexRoot\n\t\t\t\tas=\"ul\"\n\t\t\t\tclassName={clsx(\"flex flex-col overflow-auto\", className)}\n\t\t\t\taria-label={label}\n\t\t\t\taria-multiselectable=\"false\"\n\t\t\t\trole=\"tree\"\n\t\t\t>\n\t\t\t\t{children}\n\t\t\t</RovingTabindexRoot>\n\t\t</TreeViewContext.Provider>\n\t);\n}\n\nexport type TreeNodeType = {\n\tid: string;\n\tname: string;\n\tchildren?: TreeNodeType[];\n\ticon?: ReactNode;\n};\n\ntype IconProps = { open?: boolean; className?: string };\n\nexport function Arrow({ open, className }: IconProps) {\n\treturn (\n\t\t<motion.svg\n\t\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\t\tfill=\"none\"\n\t\t\tviewBox=\"0 0 24 24\"\n\t\t\tstrokeWidth={2}\n\t\t\tstroke=\"currentColor\"\n\t\t\tclassName={clsx(\"origin-center\", className)}\n\t\t\tanimate={{ rotate: open ? 90 : 0 }}\n\t\t>\n\t\t\t<path\n\t\t\t\tstrokeLinecap=\"round\"\n\t\t\t\tstrokeLinejoin=\"round\"\n\t\t\t\td=\"M8.25 4.5l7.5 7.5-7.5 7.5\"\n\t\t\t/>\n\t\t</motion.svg>\n\t);\n}\n\ntype NodeProps = {\n\tnode: TreeNodeType;\n};\n\nexport const Node = function TreeNode({\n\tnode: { id, children, name },\n}: NodeProps) {\n\tconst { open, dispatch, selectId, selectedId } = useContext(TreeViewContext);\n\tconst { isFocusable, getRovingProps, getOrderedItems } =\n\t\tuseRovingTabindex(id);\n\tconst isOpen = open.get(id);\n\treturn (\n\t\t<li\n\t\t\t{...getRovingProps<\"li\">({\n\t\t\t\tclassName:\n\t\t\t\t\t\"flex flex-col cursor-pointer select-none focus:outline-hidden group\",\n\t\t\t\tonKeyDown: function (e: KeyboardEvent) {\n\t\t\t\t\te.stopPropagation();\n\n\t\t\t\t\tconst items = getOrderedItems();\n\t\t\t\t\tlet nextItemToFocus: RovingTabindexItem | undefined;\n\n\t\t\t\t\tif (isHotkey(\"up\", e)) {\n\t\t\t\t\t\te.preventDefault();\n\t\t\t\t\t\tnextItemToFocus = getPrevFocusableId(items, id);\n\t\t\t\t\t} else if (isHotkey(\"down\", e)) {\n\t\t\t\t\t\te.preventDefault();\n\t\t\t\t\t\tnextItemToFocus = getNextFocusableId(items, id);\n\t\t\t\t\t} else if (isHotkey(\"left\", e)) {\n\t\t\t\t\t\tif (isOpen && children?.length) {\n\t\t\t\t\t\t\tdispatch({\n\t\t\t\t\t\t\t\ttype: TreeViewActionTypes.CLOSE,\n\t\t\t\t\t\t\t\tid,\n\t\t\t\t\t\t\t});\n\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\tnextItemToFocus = getParentFocusableId(items, id);\n\t\t\t\t\t\t}\n\t\t\t\t\t} else if (isHotkey(\"right\", e)) {\n\t\t\t\t\t\tif (isOpen && children?.length) {\n\t\t\t\t\t\t\tnextItemToFocus = getNextFocusableId(items, id);\n\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\tdispatch({ type: TreeViewActionTypes.OPEN, id });\n\t\t\t\t\t\t}\n\t\t\t\t\t} else if (isHotkey(\"home\", e)) {\n\t\t\t\t\t\te.preventDefault();\n\t\t\t\t\t\tnextItemToFocus = getFirstFocusableId(items);\n\t\t\t\t\t} else if (isHotkey(\"end\", e)) {\n\t\t\t\t\t\te.preventDefault();\n\t\t\t\t\t\tnextItemToFocus = getLastFocusableId(items);\n\t\t\t\t\t} else if (/^[a-z]$/i.test(e.key)) {\n\t\t\t\t\t\tnextItemToFocus = getNextFocusableIdByTypeahead(\n\t\t\t\t\t\t\titems,\n\t\t\t\t\t\t\tid,\n\t\t\t\t\t\t\te.key\n\t\t\t\t\t\t);\n\t\t\t\t\t} else if (isHotkey(\"space\", e)) {\n\t\t\t\t\t\te.preventDefault();\n\t\t\t\t\t\tselectId(id);\n\t\t\t\t\t}\n\t\t\t\t\tnextItemToFocus?.element.focus();\n\t\t\t\t},\n\t\t\t\t[\"aria-expanded\"]: children?.length ? Boolean(isOpen) : undefined,\n\t\t\t\t[\"aria-selected\"]: selectedId === id,\n\t\t\t\trole: \"treeitem\",\n\t\t\t})}\n\t\t>\n\t\t\t<MotionConfig\n\t\t\t\ttransition={{\n\t\t\t\t\tease: [0.164, 0.84, 0.43, 1],\n\t\t\t\t\tduration: 0.25,\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t<div\n\t\t\t\t\tclassName={clsx(\n\t\t\t\t\t\t\"flex items-center space-x-2 font-mono font-medium px-1 border-[1.5px] border-transparent\",\n\t\t\t\t\t\tisFocusable && \"group-focus:border-slate-500\",\n\t\t\t\t\t\tselectedId === id ? \"bg-slate-200\" : \"bg-transparent\"\n\t\t\t\t\t)}\n\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\tisOpen\n\t\t\t\t\t\t\t? dispatch({\n\t\t\t\t\t\t\t\t\tid: id,\n\t\t\t\t\t\t\t\t\ttype: TreeViewActionTypes.CLOSE,\n\t\t\t\t\t\t\t\t})\n\t\t\t\t\t\t\t: dispatch({\n\t\t\t\t\t\t\t\t\tid: id,\n\t\t\t\t\t\t\t\t\ttype: TreeViewActionTypes.OPEN,\n\t\t\t\t\t\t\t\t});\n\t\t\t\t\t\tselectId(id);\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t{children?.length ? (\n\t\t\t\t\t\t<Arrow className=\"h-4 w-4 shrink-0\" open={isOpen} />\n\t\t\t\t\t) : (\n\t\t\t\t\t\t<span className=\"h-4 w-4\" />\n\t\t\t\t\t)}\n\t\t\t\t\t<span className=\"text-ellipsis whitespace-nowrap overflow-hidden\">\n\t\t\t\t\t\t{name}\n\t\t\t\t\t</span>\n\t\t\t\t</div>\n\t\t\t\t<AnimatePresence initial={false}>\n\t\t\t\t\t{children?.length && isOpen && (\n\t\t\t\t\t\t<motion.ul\n\t\t\t\t\t\t\tinitial={{\n\t\t\t\t\t\t\t\theight: 0,\n\t\t\t\t\t\t\t\topacity: 0,\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\tanimate={{\n\t\t\t\t\t\t\t\theight: \"auto\",\n\t\t\t\t\t\t\t\topacity: 1,\n\t\t\t\t\t\t\t\ttransition: {\n\t\t\t\t\t\t\t\t\theight: {\n\t\t\t\t\t\t\t\t\t\tduration: 0.25,\n\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\topacity: {\n\t\t\t\t\t\t\t\t\t\tduration: 0.2,\n\t\t\t\t\t\t\t\t\t\tdelay: 0.05,\n\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\texit={{\n\t\t\t\t\t\t\t\theight: 0,\n\t\t\t\t\t\t\t\topacity: 0,\n\t\t\t\t\t\t\t\ttransition: {\n\t\t\t\t\t\t\t\t\theight: {\n\t\t\t\t\t\t\t\t\t\tduration: 0.25,\n\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\topacity: {\n\t\t\t\t\t\t\t\t\t\tduration: 0.2,\n\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\tkey={\"ul\"}\n\t\t\t\t\t\t\trole=\"group\"\n\t\t\t\t\t\t\tclassName=\"pl-4 relative\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{children.map((node) => (\n\t\t\t\t\t\t\t\t<Node node={node} key={node.id} />\n\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t</motion.ul>\n\t\t\t\t\t)}\n\t\t\t\t</AnimatePresence>\n\t\t\t</MotionConfig>\n\t\t</li>\n\t);\n};\n\nconst Treeview = { Root, Node };\n\nexport const data: TreeNodeType[] = [\n\t{\n\t\tid: uuid(),\n\t\tname: \"A - 1\",\n\t\tchildren: [\n\t\t\t{\n\t\t\t\tid: uuid(),\n\t\t\t\tname: \"A - 2\",\n\t\t\t\tchildren: [\n\t\t\t\t\t{\n\t\t\t\t\t\tid: uuid(),\n\t\t\t\t\t\tname: \"Child - 3 This Node will overflow and cause an ellipse\",\n\t\t\t\t\t\tchildren: [\n\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\tid: uuid(),\n\t\t\t\t\t\t\t\tname: \"Child - 4\",\n\t\t\t\t\t\t\t\tchildren: [\n\t\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t\tid: uuid(),\n\t\t\t\t\t\t\t\t\t\tname: \"Child - 5\",\n\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t\tid: uuid(),\n\t\t\t\t\t\t\t\t\t\tname: \"Child - 6\",\n\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t],\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\tid: uuid(),\n\t\t\t\t\t\t\t\tname: \"Child - 7\",\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t],\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tid: uuid(),\n\t\t\t\t\t\tname: \"Child - 8\",\n\t\t\t\t\t\tchildren: [\n\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\tid: uuid(),\n\t\t\t\t\t\t\t\tname: \"Child - 9\",\n\t\t\t\t\t\t\t\tchildren: [\n\t\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t\tid: uuid(),\n\t\t\t\t\t\t\t\t\t\tname: \"Child - 10\",\n\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t\tid: uuid(),\n\t\t\t\t\t\t\t\t\t\tname: \"Child - 11\",\n\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t],\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\tid: uuid(),\n\t\t\t\t\t\t\t\tname: \"Child - 12\",\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t],\n\t\t\t\t\t},\n\t\t\t\t],\n\t\t\t},\n\t\t\t{\n\t\t\t\tid: uuid(),\n\t\t\t\tname: \"B - 13\",\n\t\t\t},\n\t\t\t{\n\t\t\t\tid: uuid(),\n\t\t\t\tname: \"C - 14\",\n\t\t\t\tchildren: [\n\t\t\t\t\t{\n\t\t\t\t\t\tid: uuid(),\n\t\t\t\t\t\tname: \"Child - 15\",\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tid: uuid(),\n\t\t\t\t\t\tname: \"Child - 16\",\n\t\t\t\t\t},\n\t\t\t\t],\n\t\t\t},\n\t\t],\n\t},\n\t{\n\t\tid: uuid(),\n\t\tname: \"B - 17\",\n\t\tchildren: [\n\t\t\t{\n\t\t\t\tid: uuid(),\n\t\t\t\tname: \"C - 18\",\n\t\t\t\tchildren: [\n\t\t\t\t\t{\n\t\t\t\t\t\tid: uuid(),\n\t\t\t\t\t\tname: \"Child - 19\",\n\t\t\t\t\t\tchildren: [\n\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\tid: uuid(),\n\t\t\t\t\t\t\t\tname: \"Child - 20\",\n\t\t\t\t\t\t\t\tchildren: [\n\t\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t\tid: uuid(),\n\t\t\t\t\t\t\t\t\t\tname: \"Child - 21\",\n\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t\tid: uuid(),\n\t\t\t\t\t\t\t\t\t\tname: \"Child - 22\",\n\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t],\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\tid: uuid(),\n\t\t\t\t\t\t\t\tname: \"Child - 23\",\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t],\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tid: uuid(),\n\t\t\t\t\t\tname: \"Child - 24\",\n\t\t\t\t\t},\n\t\t\t\t],\n\t\t\t},\n\t\t\t{\n\t\t\t\tid: uuid(),\n\t\t\t\tname: \"A - 25\",\n\t\t\t},\n\t\t\t{\n\t\t\t\tid: uuid(),\n\t\t\t\tname: \"B - 26\",\n\t\t\t},\n\t\t],\n\t},\n\t{\n\t\tid: uuid(),\n\t\tname: \"C - 27\",\n\t\tchildren: [\n\t\t\t{\n\t\t\t\tid: uuid(),\n\t\t\t\tname: \"B - 28\",\n\t\t\t\tchildren: [\n\t\t\t\t\t{\n\t\t\t\t\t\tid: uuid(),\n\t\t\t\t\t\tname: \"Child - 29\",\n\t\t\t\t\t\tchildren: [\n\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\tid: uuid(),\n\t\t\t\t\t\t\t\tname: \"Child - 30\",\n\t\t\t\t\t\t\t\tchildren: [\n\t\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t\tid: uuid(),\n\t\t\t\t\t\t\t\t\t\tname: \"Child - 31\",\n\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t\tid: uuid(),\n\t\t\t\t\t\t\t\t\t\tname: \"Child - 32\",\n\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t],\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\tid: uuid(),\n\t\t\t\t\t\t\t\tname: \"Child - 33\",\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t],\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tid: uuid(),\n\t\t\t\t\t\tname: \"Child - 34\",\n\t\t\t\t\t},\n\t\t\t\t],\n\t\t\t},\n\t\t\t{\n\t\t\t\tid: uuid(),\n\t\t\t\tname: \"C - 35\",\n\t\t\t},\n\t\t\t{\n\t\t\t\tid: uuid(),\n\t\t\t\tname: \"A - 36\",\n\t\t\t},\n\t\t],\n\t},\n];\n\nexport function TreeviewComponent() {\n\tconst [selected, select] = useState<string | null>(null);\n\treturn (\n\t\t<Treeview.Root value={selected} onChange={select} className=\"h-full\">\n\t\t\t{data.map((node) => (\n\t\t\t\t<Treeview.Node node={node} key={node.id} />\n\t\t\t))}\n\t\t</Treeview.Root>\n\t);\n}\n",
      "type": "registry:ui"
    }
  ]
}