Types

// react-virtual-checkbox-tree
export { CheckedState, DEFAULT_ROW_HEIGHT, ROOT_ID } from "./constants";
export { Engine, type EngineOptions } from "./engine";
export {
  Tree,
  type TreeCheckboxRenderProps,
  type TreeExpanderRenderProps,
  type TreeItemRenderProps,
  type TreeProps,
  type TreeRef,
} from "./tree";
export type { SearchScope, TreeDefinition, TreeItem, VisibleItem } from "./types";

// react-virtual-checkbox-tree/engine — no React, no virtualizer, no "use client"
export { CheckedState, DEFAULT_ROW_HEIGHT, ROOT_ID } from "./constants";
export { Engine, type EngineOptions } from "./engine";
export type { SearchScope, TreeDefinition, TreeItem, VisibleItem } from "./types";

export type TreeItem = {
  children?: string[];
  data?: Record<string, unknown>;
  id: number | string;
  label: string;
};

export type TreeDefinition = Record<string, TreeItem>;

import type { TreeDefinition } from "react-virtual-checkbox-tree";

const fileTree: TreeDefinition = {
  __root__: { id: "__root__", label: "root", children: ["docs", "src"] },
  docs: { id: "docs", label: "docs", children: ["readme", "guide"] },
  readme: { id: "readme", label: "README.md" },
  guide: { id: "guide", label: "guide.md" },
  src: { id: "src", label: "src", children: ["engine", "ui"] },
  engine: { id: "engine", label: "engine.ts" },
  ui: { id: "ui", label: "ui", children: ["tree", "row"] },
  tree: { id: "tree", label: "tree.tsx" },
  row: { id: "row", label: "row.tsx" },
};

export type VisibleItem = {
  id: string;
  isExpanded: boolean;
  isFolder: boolean;
  level: number;
  posInSet: number;
  setSize: number;
};

export type SearchScope = "all" | "leaves";

export enum CheckedState {
  Checked = "checked",
  Indeterminate = "indeterminate",
  Unchecked = "unchecked",
}

import {
  CheckedState,
  Engine,
  type TreeDefinition,
} from "react-virtual-checkbox-tree/engine";

const fileTree: TreeDefinition = {
  __root__: { id: "__root__", label: "root", children: ["docs"] },
  docs: { id: "docs", label: "docs", children: ["readme", "guide"] },
  readme: { id: "readme", label: "README.md" },
  guide: { id: "guide", label: "guide.md" },
};

const engine = new Engine(fileTree);
engine.toggle("readme", true);

// Comparing against the string works too — this is a string enum.
engine.getViewState("docs") === CheckedState.Indeterminate; // true
engine.getViewState("docs") === "indeterminate"; // true

export const ROOT_ID = "__root__";
export const DEFAULT_ROW_HEIGHT = 32;

export type TreeProps = {
  "aria-label"?: string;
  "aria-labelledby"?: string;
  checkedItems?: null | string[];
  className?: string;
  data: TreeDefinition;
  estimateSize?: ((index: number) => number) | number;
  expandedItems?: null | string[];
  height?: number | string;
  indent?: number;
  minSearchChars?: number;
  onCheck?: (checkedLeafIds: string[]) => void;
  onExpand?: (expandedFolderIds: string[]) => void;
  overscan?: number;
  renderCheckbox?: (props: TreeCheckboxRenderProps) => ReactNode;
  renderExpander?: (props: TreeExpanderRenderProps) => ReactNode;
  renderItem?: (props: TreeItemRenderProps) => ReactNode;
  style?: CSSProperties;
  searchQuery?: string;
  searchScope?: SearchScope;
};

export type TreeRef = {
  collapseAll: () => void;
  expandAll: () => void;
  getEngine: () => Engine;
  focusId: (id: string) => void;
  scrollToId: (id: string) => void;
};

export type TreeItemRenderProps = {
  checkedState: CheckedState;
  id: string;
  isActive: boolean;
  isExpanded: boolean;
  isFolder: boolean;
  item: TreeItem;
  level: number;
};

import { Tree, type TreeDefinition } from "react-virtual-checkbox-tree";

const fileTree: TreeDefinition = {
  __root__: { id: "__root__", label: "root", children: ["src"] },
  src: { id: "src", label: "src", children: ["engine"] },
  engine: { id: "engine", label: "engine.ts", data: { size: 4096 } },
};

export function WithFileSizes() {
  return (
    <Tree
      aria-label="Project files"
      data={fileTree}
      height={320}
      renderItem={({ isFolder, item, level }) => (
        <span data-depth={level}>
          {item.label}
          {!isFolder && <small> {String(item.data?.size ?? 0)} B</small>}
        </span>
      )}
    />
  );
}

export type TreeCheckboxRenderProps = {
  a11yProps: { "aria-hidden": true; tabIndex: -1 };
  checkedState: CheckedState;
  id: string;
  isActive: boolean;
  isExpanded: boolean;
  isFolder: boolean;
  item: TreeItem;
  level: number;
  onChange: (nextChecked: boolean) => void;
};

export type TreeExpanderRenderProps = {
  a11yProps: { "aria-hidden": true; tabIndex: -1 };
  id: string;
  isExpanded: boolean;
  isFolder: boolean;
  item: TreeItem;
  level: number;
  onToggle: () => void;
};

import { Tree, type TreeDefinition } from "react-virtual-checkbox-tree";

const fileTree: TreeDefinition = {
  __root__: { id: "__root__", label: "root", children: ["src"] },
  src: { id: "src", label: "src", children: ["engine"] },
  engine: { id: "engine", label: "engine.ts" },
};

export function ChevronExpander() {
  return (
    <Tree
      aria-label="Project files"
      data={fileTree}
      height={320}
      renderExpander={({ a11yProps, isExpanded, onToggle }) => (
        <button
          {...a11yProps}
          onClick={(event) => {
            event.stopPropagation();
            onToggle();
          }}
          type="button"
        >
          {isExpanded ? "▾" : "▸"}
        </button>
      )}
    />
  );
}

export type EngineOptions = {
  initialExpanded?: string[];
  minSearchChars?: number;
  rootId?: string;
  searchScope?: SearchScope;
};