ink-tree-view 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024-2026 John Costa
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,383 @@
+# ink-tree-view
+
+[![CI](https://github.com/costajohnt/ink-tree-view/actions/workflows/ci.yml/badge.svg)](https://github.com/costajohnt/ink-tree-view/actions/workflows/ci.yml)
+[![npm version](https://img.shields.io/npm/v/ink-tree-view)](https://www.npmjs.com/package/ink-tree-view)
+[![license](https://img.shields.io/npm/l/ink-tree-view)](https://github.com/costajohnt/ink-tree-view/blob/main/LICENSE)
+
+A tree view component for [Ink](https://github.com/vadimdemedes/ink) (React for CLIs). Display hierarchical data with expand/collapse, keyboard navigation, selection modes, custom rendering, virtual scrolling, and async lazy loading.
+
+## Features
+
+- Hierarchical data display with expand/collapse
+- Full keyboard navigation (arrows, Home/End, Enter, Space)
+- Selection modes: none, single, and multiple (with checkboxes)
+- Custom node rendering via `renderNode` prop
+- Virtual scrolling for large trees (`visibleNodeCount`)
+- Async/lazy-loaded children via `loadChildren` + `isParent`
+- Error handling for failed async loads via `onLoadError`
+- Headless hooks (`useTreeViewState`, `useTreeView`) for full control
+- TypeScript-first with complete type exports
+
+## Install
+
+```
+npm install ink-tree-view
+```
+
+Peer dependencies: `ink` (>=5.0.0), `react` (>=18.0.0)
+
+## Quick Start
+
+```tsx
+import {render} from 'ink';
+import {TreeView} from 'ink-tree-view';
+
+const data = [
+  {
+    id: 'src',
+    label: 'src',
+    children: [
+      {id: 'index', label: 'index.ts'},
+      {
+        id: 'components',
+        label: 'components',
+        children: [
+          {id: 'button', label: 'button.tsx'},
+          {id: 'input', label: 'input.tsx'},
+        ],
+      },
+    ],
+  },
+  {id: 'readme', label: 'README.md'},
+  {id: 'package', label: 'package.json'},
+];
+
+render(<TreeView data={data} />);
+```
+
+Use arrow keys to navigate, Right to expand, Left to collapse, and Enter to toggle.
+
+## Data Model
+
+Tree data is an array of `TreeNode<T>` objects. Each node must have a unique `id` across the entire tree.
+
+```ts
+type TreeNode<T = Record<string, unknown>> = {
+  /** Unique identifier. Must be unique across the entire tree. */
+  id: string;
+  /** Display label used by the default renderer. */
+  label: string;
+  /** Arbitrary user data attached to this node. */
+  data?: T;
+  /** Child nodes. Undefined or empty array means leaf node. */
+  children?: Array<TreeNode<T>>;
+  /** Mark as a parent whose children will be loaded via loadChildren. */
+  isParent?: boolean;
+};
+```
+
+### Example with custom data
+
+```tsx
+type FileInfo = {size: number; modified: string};
+
+const data: TreeNode<FileInfo>[] = [
+  {
+    id: 'doc',
+    label: 'document.pdf',
+    data: {size: 1024, modified: '2025-01-15'},
+  },
+];
+```
+
+## Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `data` | `TreeNode<T>[]` | *required* | Array of root-level tree nodes. |
+| `selectionMode` | `'none' \| 'single' \| 'multiple'` | `'none'` | Selection behavior. `'single'` allows one selected node; `'multiple'` shows checkboxes. |
+| `defaultExpanded` | `ReadonlySet<string> \| 'all'` | `undefined` | Node IDs expanded on mount, or `'all'` to expand everything. |
+| `defaultSelected` | `ReadonlySet<string>` | `undefined` | Node IDs selected on mount (ignored in `'none'` mode). |
+| `visibleNodeCount` | `number` | `Infinity` | Max visible rows. Enables virtual scrolling when finite. |
+| `renderNode` | `(props: TreeNodeRendererProps<T>) => ReactNode` | `undefined` | Custom renderer for each node. Receives `{node, state}`. |
+| `loadChildren` | `(node: TreeNode<T>) => Promise<TreeNode<T>[]>` | `undefined` | Async loader called when expanding an `isParent: true` node. |
+| `onLoadError` | `(nodeId: string, error: Error) => void` | `undefined` | Called when `loadChildren` rejects. Loading state is cleared so the user can retry. |
+| `onFocusChange` | `(nodeId: string) => void` | `undefined` | Called when the focused node changes (not on initial mount). |
+| `onExpandChange` | `(expandedIds: ReadonlySet<string>) => void` | `undefined` | Called when the set of expanded nodes changes. |
+| `onSelectChange` | `(selectedIds: ReadonlySet<string>) => void` | `undefined` | Called when the selection changes. |
+| `isDisabled` | `boolean` | `false` | When true, all keyboard input is ignored. |
+
+## Keyboard Shortcuts
+
+| Key | Action |
+|-----|--------|
+| Up Arrow | Move focus to the previous visible node |
+| Down Arrow | Move focus to the next visible node |
+| Right Arrow | Expand focused node, or move to first child if already expanded. Triggers async load for `isParent` nodes. |
+| Left Arrow | Collapse focused node, or move to parent if already collapsed |
+| Enter | Toggle expand/collapse (`'none'` mode) or select (`'single'`/`'multiple'` mode) |
+| Space | Toggle expand/collapse (`'none'`/`'single'` mode) or toggle selection (`'multiple'` mode) |
+| Home | Jump to the first node |
+| End | Jump to the last node |
+
+## Custom Rendering
+
+Use the `renderNode` prop to completely control how each node looks.
+
+```tsx
+import {Box, Text} from 'ink';
+import {TreeView, type TreeNodeRendererProps} from 'ink-tree-view';
+
+type FileData = {size: number};
+
+function CustomNode({node, state}: TreeNodeRendererProps<FileData>) {
+  const prefix = state.hasChildren
+    ? state.isExpanded ? 'v ' : '> '
+    : '  ';
+
+  return (
+    <Box>
+      <Text dimColor={!state.isFocused}>
+        {'  '.repeat(state.depth)}
+        {prefix}
+        {node.label}
+      </Text>
+      {node.data && (
+        <Text color="gray"> ({node.data.size} bytes)</Text>
+      )}
+      {state.isSelected && <Text color="green"> [selected]</Text>}
+    </Box>
+  );
+}
+
+render(
+  <TreeView<FileData>
+    data={data}
+    selectionMode="single"
+    renderNode={CustomNode}
+  />
+);
+```
+
+`TreeNodeRendererProps<T>` includes:
+
+- `node` -- the `TreeNode<T>` data
+- `state` -- a `TreeNodeState` with: `isFocused`, `isExpanded`, `isSelected`, `depth`, `hasChildren`, `isLoading`
+
+## Selection Modes
+
+### No selection (default)
+
+```tsx
+<TreeView data={data} />
+```
+
+Enter and Space toggle expand/collapse.
+
+### Single selection
+
+```tsx
+<TreeView
+  data={data}
+  selectionMode="single"
+  onSelectChange={(selectedIds) => {
+    const selected = [...selectedIds][0];
+    console.log('Selected:', selected);
+  }}
+/>
+```
+
+Enter selects the focused node. Only one node can be selected at a time.
+
+### Multiple selection
+
+```tsx
+<TreeView
+  data={data}
+  selectionMode="multiple"
+  defaultSelected={new Set(['node-1', 'node-3'])}
+  onSelectChange={(selectedIds) => {
+    console.log('Selected:', [...selectedIds]);
+  }}
+/>
+```
+
+Enter and Space toggle selection on the focused node. Checkboxes appear next to each node.
+
+## Virtual Scrolling
+
+For large trees, set `visibleNodeCount` to limit the number of visible rows. The viewport scrolls to keep the focused node in view, and scroll indicators appear when content extends beyond the viewport.
+
+```tsx
+<TreeView
+  data={largeTree}
+  defaultExpanded="all"
+  visibleNodeCount={15}
+/>
+```
+
+## Async Children
+
+Use `loadChildren` to lazily load children when a node is first expanded. Mark on-demand nodes with `isParent: true`. A loading indicator is shown while the request is in progress.
+
+```tsx
+async function fetchChildren(node) {
+  const response = await fetch(`/api/tree/${node.id}/children`);
+  return response.json();
+}
+
+const data = [
+  {id: 'root', label: 'Root', isParent: true},
+  {id: 'leaf', label: 'Leaf'},
+];
+
+render(
+  <TreeView
+    data={data}
+    loadChildren={fetchChildren}
+    onLoadError={(nodeId, error) => {
+      console.error(`Failed to load children for ${nodeId}:`, error.message);
+    }}
+  />
+);
+```
+
+When `loadChildren` rejects, `onLoadError` fires and the loading state is cleared so the user can retry by pressing Right Arrow again.
+
+## Hooks API
+
+For headless/custom usage, two hooks are exported directly.
+
+### `useTreeViewState<T>(props)`
+
+Manages all tree state: focus, expansion, selection, viewport scrolling, and loading.
+
+```tsx
+import {useTreeViewState} from 'ink-tree-view';
+
+const state = useTreeViewState({
+  data,
+  selectionMode: 'multiple',
+  defaultExpanded: new Set(['root']),
+  visibleNodeCount: 10,
+  onFocusChange: (id) => { /* ... */ },
+  onExpandChange: (ids) => { /* ... */ },
+  onSelectChange: (ids) => { /* ... */ },
+});
+```
+
+**Returned state:**
+
+| Property | Type | Description |
+|----------|------|-------------|
+| `focusedId` | `string \| undefined` | Currently focused node ID |
+| `expandedIds` | `ReadonlySet<string>` | Set of expanded node IDs |
+| `selectedIds` | `ReadonlySet<string>` | Set of selected node IDs |
+| `viewportNodes` | `Array<{node, state}>` | Nodes in current viewport |
+| `visibleCount` | `number` | Total visible node count |
+| `hasScrollUp` | `boolean` | Nodes exist above the viewport |
+| `hasScrollDown` | `boolean` | Nodes exist below the viewport |
+| `loadingIds` | `ReadonlySet<string>` | Currently loading node IDs |
+| `nodeMap` | `TreeNodeMap<T>` | Underlying data structure |
+
+**Actions:**
+
+| Method | Description |
+|--------|-------------|
+| `focusNext()` | Move focus down |
+| `focusPrevious()` | Move focus up |
+| `focusFirst()` | Jump to first node |
+| `focusLast()` | Jump to last node |
+| `expand()` | Expand focused node |
+| `expandNode(id)` | Expand a specific node |
+| `collapse()` | Collapse focused node |
+| `collapseNode(id)` | Collapse a specific node |
+| `toggleExpanded()` | Toggle expand/collapse on focused node |
+| `expandAll()` | Expand all nodes |
+| `collapseAll()` | Collapse all nodes |
+| `select()` | Select/deselect focused node |
+| `focusParent()` | Move focus to parent |
+| `focusFirstChild()` | Move focus to first child |
+| `setLoading(id, bool)` | Mark a node as loading |
+| `setChildrenError(id)` | Clear loading state after failure |
+| `insertChildren(parentId, children)` | Insert children under a parent |
+
+### `useTreeView<T>(props)`
+
+Wires keyboard input to a `TreeViewState` instance. Call this after `useTreeViewState` to enable keyboard navigation.
+
+```tsx
+import {Box, Text} from 'ink';
+import {useTreeViewState, useTreeView} from 'ink-tree-view';
+
+function MyTree({data}) {
+  const state = useTreeViewState({data});
+
+  useTreeView({
+    state,
+    selectionMode: 'none',
+    loadChildren: async (node) => {
+      // fetch children...
+    },
+  });
+
+  return (
+    <Box flexDirection="column">
+      {state.viewportNodes.map(({node, state: ns}) => (
+        <Text key={node.id} bold={ns.isFocused}>
+          {'  '.repeat(ns.depth)}{node.label}
+        </Text>
+      ))}
+    </Box>
+  );
+}
+```
+
+## TypeScript
+
+All types are exported from the package entry point:
+
+```ts
+import type {
+  TreeNode,
+  TreeNodeState,
+  SelectionMode,
+  AsyncChildrenFn,
+  TreeViewProps,
+  TreeNodeRendererProps,
+  TreeViewState,
+  UseTreeViewStateProps,
+  UseTreeViewProps,
+  TreeViewTheme,
+  FlatNode,
+} from 'ink-tree-view';
+
+import {
+  TreeView,
+  useTreeViewState,
+  useTreeView,
+  treeViewTheme,
+  TreeNodeMap,
+} from 'ink-tree-view';
+```
+
+## Contributing
+
+Contributions are welcome. Please open an issue to discuss your idea before submitting a PR.
+
+```bash
+git clone https://github.com/costajohnt/ink-tree-view.git
+cd ink-tree-view
+npm install
+npm test
+```
+
+Run `npm run build` to compile and `npm run typecheck` to verify types.
+
+## Changelog
+
+See [GitHub Releases](https://github.com/costajohnt/ink-tree-view/releases) for a list of changes.
+
+## License
+
+[MIT](LICENSE) -- Copyright (c) 2024-2026 John Costa

package/dist/index.d.ts

@@ -0,0 +1,258 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ReactNode } from 'react';
+import { BoxProps, TextProps } from 'ink';
+
+/**
+ * A single node in the tree. Generic over the user's data shape.
+ * The `id` field MUST be unique across the entire tree.
+ */
+type TreeNode<T = Record<string, unknown>> = {
+    /** Unique identifier for this node. Used as the key for all lookups. */
+    id: string;
+    /** Display label. Used by the default renderer. */
+    label: string;
+    /** Arbitrary user data attached to this node. */
+    data?: T;
+    /** Child nodes. Undefined or empty array means leaf node. */
+    children?: Array<TreeNode<T>>;
+    /**
+     * Explicitly marks this node as a parent that can have children loaded
+     * asynchronously via `loadChildren`. When true, the node shows an expand
+     * indicator even if `children` is empty or undefined, and expanding it
+     * triggers the `loadChildren` callback.
+     */
+    isParent?: boolean;
+};
+/**
+ * For async/lazy loading: a function that resolves children on demand.
+ */
+type AsyncChildrenFn<T = Record<string, unknown>> = (node: TreeNode<T>) => Promise<Array<TreeNode<T>>>;
+/**
+ * State passed to custom renderers and theme functions.
+ */
+type TreeNodeState = {
+    /** Whether this node is currently focused (cursor is on it). */
+    isFocused: boolean;
+    /** Whether this node is expanded (children visible). */
+    isExpanded: boolean;
+    /** Whether this node is selected (in select/multi-select mode). */
+    isSelected: boolean;
+    /** Depth of this node in the tree (root = 0). */
+    depth: number;
+    /** Whether this node has children (or a lazy loader). */
+    hasChildren: boolean;
+    /** Whether children are currently loading (async mode). */
+    isLoading: boolean;
+};
+/**
+ * Props received by a custom node renderer.
+ */
+type TreeNodeRendererProps<T = Record<string, unknown>> = {
+    /** The tree node data. */
+    node: TreeNode<T>;
+    /** Current state of this node. */
+    state: TreeNodeState;
+};
+/**
+ * Selection mode for the tree view.
+ */
+type SelectionMode = 'none' | 'single' | 'multiple';
+/**
+ * Props for the TreeView component.
+ */
+type TreeViewProps<T = Record<string, unknown>> = {
+    /** The tree data. Array of root-level nodes. */
+    readonly data: Array<TreeNode<T>>;
+    /**
+     * Selection mode.
+     * - 'none': No selection behavior (default).
+     * - 'single': One node can be selected at a time.
+     * - 'multiple': Multiple nodes can be selected (checkboxes shown).
+     * @default 'none'
+     */
+    readonly selectionMode?: SelectionMode;
+    /**
+     * Set of node IDs that are expanded by default.
+     * If not provided, all nodes start collapsed.
+     */
+    readonly defaultExpanded?: ReadonlySet<string> | 'all';
+    /**
+     * Set of node IDs that are selected by default.
+     */
+    readonly defaultSelected?: ReadonlySet<string>;
+    /**
+     * Number of visible nodes in the viewport (for virtualization).
+     * @default Infinity (no virtualization)
+     */
+    readonly visibleNodeCount?: number;
+    /**
+     * Custom node renderer. Receives node + state, returns Ink JSX.
+     */
+    readonly renderNode?: (props: TreeNodeRendererProps<T>) => ReactNode;
+    /**
+     * Async function to load children on demand.
+     */
+    readonly loadChildren?: AsyncChildrenFn<T>;
+    /**
+     * Called when `loadChildren` rejects. Receives the node ID and error.
+     * The node's loading state is automatically cleared so the user can retry.
+     */
+    readonly onLoadError?: (nodeId: string, error: Error) => void;
+    /** Called when the focused node changes. */
+    readonly onFocusChange?: (nodeId: string) => void;
+    /** Called when expanded set changes. */
+    readonly onExpandChange?: (expandedIds: ReadonlySet<string>) => void;
+    /** Called when selection changes. */
+    readonly onSelectChange?: (selectedIds: ReadonlySet<string>) => void;
+    /**
+     * When disabled, user input is ignored.
+     * @default false
+     */
+    readonly isDisabled?: boolean;
+};
+
+declare function TreeView<T = Record<string, unknown>>({ data, selectionMode, defaultExpanded, defaultSelected, visibleNodeCount, renderNode, loadChildren, onLoadError, onFocusChange, onExpandChange, onSelectChange, isDisabled, }: TreeViewProps<T>): react_jsx_runtime.JSX.Element;
+
+/**
+ * A flattened representation of a tree node with navigation links.
+ */
+type FlatNode<T = Record<string, unknown>> = {
+    /** The original tree node. */
+    node: TreeNode<T>;
+    /** Depth in the tree (0 for roots). */
+    depth: number;
+    /** Index in the flattened DFS order (across ALL nodes, not just visible). */
+    flatIndex: number;
+    /** Parent's id, or undefined if root. */
+    parentId: string | undefined;
+    /** Whether this node has children. */
+    hasChildren: boolean;
+    /** Ordered list of direct children IDs. */
+    childrenIds: string[];
+    /** Previous sibling's ID, or undefined. */
+    previousSiblingId: string | undefined;
+    /** Next sibling's ID, or undefined. */
+    nextSiblingId: string | undefined;
+};
+/**
+ * A flattened map of all tree nodes built via DFS traversal.
+ * Stores parent/child/sibling links for O(1) navigation.
+ */
+declare class TreeNodeMap<T = Record<string, unknown>> {
+    /** Map from node ID to FlatNode. */
+    private readonly map;
+    /** All node IDs in DFS order. */
+    readonly orderedIds: string[];
+    /** Root-level node IDs. */
+    readonly rootIds: string[];
+    constructor(data: Array<TreeNode<T>>);
+    private buildFromData;
+    /**
+     * Get a flat node by ID.
+     */
+    get(id: string): FlatNode<T> | undefined;
+    /**
+     * Total number of nodes in the tree.
+     */
+    get size(): number;
+    /**
+     * Iterate over all entries.
+     */
+    entries(): IterableIterator<[string, FlatNode<T>]>;
+    /**
+     * Check if a node is a descendant of another node.
+     */
+    isDescendantOf(nodeId: string, ancestorId: string): boolean;
+    /**
+     * Given a set of expanded node IDs, return the ordered list of
+     * VISIBLE node IDs (i.e., a node is visible if all its ancestors
+     * are expanded).
+     *
+     * Uses iterative DFS, skipping collapsed subtrees.
+     */
+    getVisibleIds(expandedIds: ReadonlySet<string>): string[];
+    /**
+     * Insert dynamically-loaded children under a parent node.
+     * Returns a new TreeNodeMap (immutable operation).
+     */
+    withChildren(parentId: string, children: Array<TreeNode<T>>): TreeNodeMap<T>;
+}
+
+type UseTreeViewStateProps<T = Record<string, unknown>> = {
+    data: Array<TreeNode<T>>;
+    selectionMode?: SelectionMode;
+    defaultExpanded?: ReadonlySet<string> | 'all';
+    defaultSelected?: ReadonlySet<string>;
+    visibleNodeCount?: number;
+    onFocusChange?: (nodeId: string) => void;
+    onExpandChange?: (expandedIds: ReadonlySet<string>) => void;
+    onSelectChange?: (selectedIds: ReadonlySet<string>) => void;
+};
+type TreeViewState<T = Record<string, unknown>> = {
+    focusedId: string | undefined;
+    expandedIds: ReadonlySet<string>;
+    selectedIds: ReadonlySet<string>;
+    viewportNodes: Array<{
+        node: TreeNode<T>;
+        state: TreeNodeState;
+    }>;
+    visibleCount: number;
+    hasScrollUp: boolean;
+    hasScrollDown: boolean;
+    viewportFromIndex: number;
+    viewportToIndex: number;
+    loadingIds: ReadonlySet<string>;
+    nodeMap: TreeNodeMap<T>;
+    focusNext: () => void;
+    focusPrevious: () => void;
+    focusFirst: () => void;
+    focusLast: () => void;
+    expand: () => void;
+    expandNode: (nodeId: string) => void;
+    collapse: () => void;
+    collapseNode: (nodeId: string) => void;
+    toggleExpanded: () => void;
+    expandAll: () => void;
+    collapseAll: () => void;
+    select: () => void;
+    focusParent: () => void;
+    focusFirstChild: () => void;
+    setLoading: (nodeId: string, isLoading: boolean) => void;
+    setChildrenError: (nodeId: string) => void;
+    insertChildren: (parentId: string, children: Array<TreeNode<T>>) => void;
+};
+declare function useTreeViewState<T = Record<string, unknown>>({ data, selectionMode, defaultExpanded, defaultSelected, visibleNodeCount, onFocusChange, onExpandChange, onSelectChange, }: UseTreeViewStateProps<T>): TreeViewState<T>;
+
+type UseTreeViewProps<T = Record<string, unknown>> = {
+    isDisabled?: boolean;
+    selectionMode: SelectionMode;
+    state: TreeViewState<T>;
+    loadChildren?: AsyncChildrenFn<T>;
+    onLoadError?: (nodeId: string, error: Error) => void;
+};
+declare function useTreeView<T>({ isDisabled, selectionMode, state, loadChildren, onLoadError, }: UseTreeViewProps<T>): void;
+
+type StyleFnProps = {
+    isFocused?: boolean;
+    isExpanded?: boolean;
+    isSelected?: boolean;
+    depth?: number;
+    hasChildren?: boolean;
+    isLoading?: boolean;
+};
+declare const theme: {
+    styles: {
+        container: () => BoxProps;
+        node: ({ isFocused }: StyleFnProps) => BoxProps;
+        indent: ({ depth }: StyleFnProps) => BoxProps;
+        focusIndicator: () => TextProps;
+        expandIndicator: (_props: StyleFnProps) => TextProps;
+        label: ({ isFocused, isSelected }: StyleFnProps) => TextProps;
+        selectedIndicator: () => TextProps;
+        loadingIndicator: () => TextProps;
+    };
+};
+
+type Theme = typeof theme;
+
+export { type AsyncChildrenFn, type FlatNode, type SelectionMode, type TreeNode, TreeNodeMap, type TreeNodeRendererProps, type TreeNodeState, TreeView, type TreeViewProps, type TreeViewState, type Theme as TreeViewTheme, type UseTreeViewProps, type UseTreeViewStateProps, theme as treeViewTheme, useTreeView, useTreeViewState };