{"name":"tree-view","title":"Tree View","description":"A hierarchical list of items that can be expanded, collapsed, and selected.","installCommand":"bunx marko-ui add tree-view -y","usageTags":"<TreeView>","importSnippet":"import TreeView from \"@/components/ui/tree-view/tree-view.marko\";","usageSnippet":"static const FILE_TREE = [\n  { id: \"src\", label: \"src\", children: [{ id: \"src/index.ts\", label: \"index.ts\" }] },\n  { id: \"package.json\", label: \"package.json\" },\n];\n\n<TreeView items=FILE_TREE/>","tags":["TreeView"],"parts":[],"props":[{"name":"items","type":"TreeViewItem[]","required":true},{"name":"canRename","type":"((node: T, indexPath: IndexPath) => boolean) | undefined","required":false,"description":"Function to determine if a node can be renamed"},{"name":"checkedValue","type":"string[] | undefined","required":false,"description":"The controlled checked node value"},{"name":"defaultCheckedValue","type":"string[] | undefined","required":false,"description":"The initial checked node value when rendered.\nUse when you don't need to control the checked node value."},{"name":"defaultExpandedValue","type":"string[] | undefined","required":false,"description":"The initial expanded node ids when rendered.\nUse when you don't need to control the expanded node value."},{"name":"defaultFocusedValue","type":"string | null | undefined","required":false,"description":"The initial focused node value when rendered.\nUse when you don't need to control the focused node value."},{"name":"defaultSelectedValue","type":"string[] | undefined","required":false,"description":"The initial selected node value when rendered.\nUse when you don't need to control the selected node value."},{"name":"dir","type":"'ltr' | 'rtl' | undefined","required":false,"default":"ltr","description":"The document's text/writing direction."},{"name":"expandedValue","type":"string[] | undefined","required":false,"description":"The controlled expanded node ids"},{"name":"expandOnClick","type":"boolean | undefined","required":false,"default":"true","description":"Whether clicking on a branch should open it or not"},{"name":"focusedValue","type":"string | null | undefined","required":false,"description":"The value of the focused node"},{"name":"getRootNode","type":"(() => ShadowRoot | Document | Node) | undefined","required":false,"description":"A root node to correctly resolve document in custom environments. E.x.: Iframes, Electron."},{"name":"ids","type":"ElementIds | undefined","required":false,"description":"The ids of the tree elements. Useful for composition."},{"name":"loadChildren","type":"((details: LoadChildrenDetails<T>) => Promise<T[]>) | undefined","required":false,"description":"Function to load children for a node asynchronously.\nWhen provided, branches will wait for this promise to resolve before expanding."},{"name":"onBeforeRename","type":"((details: RenameCompleteDetails) => boolean) | undefined","required":false,"description":"Called before a rename is completed. Return false to prevent the rename."},{"name":"scrollToIndexFn","type":"((details: ScrollToIndexDetails<T>) => void) | undefined","required":false,"description":"Function to scroll to a specific index.\nUseful for virtualized tree views."},{"name":"selectedValue","type":"string[] | undefined","required":false,"description":"The controlled selected node value"},{"name":"selectionMode","type":"'multiple' | 'single' | undefined","required":false,"default":"single","description":"Whether the tree supports multiple selection\n- \"single\": only one node can be selected\n- \"multiple\": multiple nodes can be selected"},{"name":"translations","type":"IntlTranslations | undefined","required":false,"description":"Specifies the localized strings that identifies the accessibility elements and their states"},{"name":"typeahead","type":"boolean | undefined","required":false,"default":"true","description":"Whether the tree supports typeahead search"}],"events":[{"name":"expandedValueChange","arg":"string[]"},{"name":"onCheckedChange","arg":"CheckedChangeDetails","description":"Called when the checked value changes"},{"name":"onExpandedChange","arg":"ExpandedChangeDetails<T>","description":"Called when the tree is opened or closed"},{"name":"onFocusChange","arg":"FocusChangeDetails<T>","description":"Called when the focused node changes"},{"name":"onLoadChildrenComplete","arg":"LoadChildrenCompleteDetails<T>","description":"Called when a node finishes loading children"},{"name":"onLoadChildrenError","arg":"LoadChildrenErrorDetails<T>","description":"Called when loading children fails for one or more nodes"},{"name":"onRenameComplete","arg":"RenameCompleteDetails","description":"Called when a node label rename is completed"},{"name":"onRenameStart","arg":"RenameStartDetails<T>","description":"Called when a node starts being renamed"},{"name":"onSelectionChange","arg":"SelectionChangeDetails<T>","description":"Called when the selection changes"},{"name":"selectedValueChange","arg":"string[]"}],"keyboard":[],"accessibilityNotes":[],"examples":[{"id":"tree-view-demo","title":"Default","source":"import TreeView from \"@marko-ui/shadcn/ui/tree-view/tree-view.marko\";\n\nstatic const FILE_TREE = [\n  {\n    id: \"src\",\n    label: \"src\",\n    children: [\n      {\n        id: \"components\",\n        label: \"components\",\n        children: [\n          { id: \"button.tsx\", label: \"button.tsx\" },\n          { id: \"input.tsx\", label: \"input.tsx\" },\n        ],\n      },\n      { id: \"index.ts\", label: \"index.ts\" },\n      { id: \"app.ts\", label: \"app.ts\" },\n    ],\n  },\n  {\n    id: \"public\",\n    label: \"public\",\n    children: [\n      { id: \"favicon.ico\", label: \"favicon.ico\" },\n      { id: \"robots.txt\", label: \"robots.txt\" },\n    ],\n  },\n  { id: \"package.json\", label: \"package.json\" },\n  { id: \"readme.md\", label: \"README.md\" },\n];\n\n<TreeView items=FILE_TREE/>","description":"A tree of nested items, each expandable and selectable."},{"id":"tree-view-expanded","title":"Default expanded","source":"import TreeView from \"@marko-ui/shadcn/ui/tree-view/tree-view.marko\";\n\nstatic const FILE_TREE = [\n  {\n    id: \"src\",\n    label: \"src\",\n    children: [\n      {\n        id: \"components\",\n        label: \"components\",\n        children: [\n          { id: \"button.tsx\", label: \"button.tsx\" },\n          { id: \"input.tsx\", label: \"input.tsx\" },\n        ],\n      },\n      { id: \"index.ts\", label: \"index.ts\" },\n      { id: \"app.ts\", label: \"app.ts\" },\n    ],\n  },\n  {\n    id: \"public\",\n    label: \"public\",\n    children: [\n      { id: \"favicon.ico\", label: \"favicon.ico\" },\n      { id: \"robots.txt\", label: \"robots.txt\" },\n    ],\n  },\n  { id: \"package.json\", label: \"package.json\" },\n  { id: \"readme.md\", label: \"README.md\" },\n];\n\n<TreeView items=FILE_TREE expandedValue=[\"src\", \"components\"]/>","description":"Pass `expandedValue` with the ids of branches that should start open."},{"id":"tree-view-multiple-selection","title":"Multiple selection","source":"import TreeView from \"@marko-ui/shadcn/ui/tree-view/tree-view.marko\";\n\nstatic const FILE_TREE = [\n  {\n    id: \"src\",\n    label: \"src\",\n    children: [\n      {\n        id: \"components\",\n        label: \"components\",\n        children: [\n          { id: \"button.tsx\", label: \"button.tsx\" },\n          { id: \"input.tsx\", label: \"input.tsx\" },\n        ],\n      },\n      { id: \"index.ts\", label: \"index.ts\" },\n      { id: \"app.ts\", label: \"app.ts\" },\n    ],\n  },\n  {\n    id: \"public\",\n    label: \"public\",\n    children: [\n      { id: \"favicon.ico\", label: \"favicon.ico\" },\n      { id: \"robots.txt\", label: \"robots.txt\" },\n    ],\n  },\n  { id: \"package.json\", label: \"package.json\" },\n  { id: \"readme.md\", label: \"README.md\" },\n];\n\n<TreeView items=FILE_TREE selectionMode=\"multiple\"/>","description":"Set `selectionMode=\"multiple\"` to let users select more than one item at once."},{"id":"tree-view-controlled-selection","title":"Controlled selection","source":"import TreeView from \"@marko-ui/shadcn/ui/tree-view/tree-view.marko\";\n\nstatic const FILE_TREE = [\n  {\n    id: \"src\",\n    label: \"src\",\n    children: [\n      {\n        id: \"components\",\n        label: \"components\",\n        children: [\n          { id: \"button.tsx\", label: \"button.tsx\" },\n          { id: \"input.tsx\", label: \"input.tsx\" },\n        ],\n      },\n      { id: \"index.ts\", label: \"index.ts\" },\n      { id: \"app.ts\", label: \"app.ts\" },\n    ],\n  },\n  {\n    id: \"public\",\n    label: \"public\",\n    children: [\n      { id: \"favicon.ico\", label: \"favicon.ico\" },\n      { id: \"robots.txt\", label: \"robots.txt\" },\n    ],\n  },\n  { id: \"package.json\", label: \"package.json\" },\n  { id: \"readme.md\", label: \"README.md\" },\n];\n\n<let/selected=[\"index.ts\"]/>\n\n<div class=\"flex flex-col gap-4\">\n  <p class=\"text-sm text-muted-foreground\">Selected: ${selected.join(\", \") || \"none\"}</p>\n  <TreeView\n    items=FILE_TREE\n    selectedValue=selected\n    selectedValueChange(value) { selected = value; }\n  />\n</div>","description":"Zag machines are controlled: a `selectedValue` prop without a change handler never moves. Pair it with `selectedValueChange`, or use Marko's bind shorthand `selectedValue:=state`."},{"id":"tree-view-disabled","title":"Disabled items","source":"import TreeView from \"@marko-ui/shadcn/ui/tree-view/tree-view.marko\";\n\nstatic const FILE_TREE = [\n  {\n    id: \"src\",\n    label: \"src\",\n    children: [\n      { id: \"index.ts\", label: \"index.ts\" },\n      { id: \"app.ts\", label: \"app.ts\", disabled: true },\n    ],\n  },\n  {\n    id: \"public\",\n    label: \"public\",\n    disabled: true,\n    children: [{ id: \"favicon.ico\", label: \"favicon.ico\" }],\n  },\n  { id: \"package.json\", label: \"package.json\" },\n];\n\n<TreeView items=FILE_TREE expandedValue=[\"src\", \"public\"]/>","description":"Mark any node `disabled` — branches and leaves are both skipped by pointer and keyboard interaction."}],"importInstallCommand":"bun add @marko-ui/shadcn marko-zag","nativeAttributes":"div","itemTypes":[{"prop":"items","typeName":"TreeViewItem","fields":[{"name":"id","type":"string","required":true},{"name":"label","type":"string","required":true},{"name":"children","type":"TreeViewItem[]","required":false},{"name":"disabled","type":"boolean","required":false}]}]}