Migrating from react-checkbox-tree

import { useState } from "react";
import CheckboxTree from "react-checkbox-tree";
import "react-checkbox-tree/lib/react-checkbox-tree.css";

const nodes = [
  {
    value: "docs",
    label: "docs",
    children: [
      { value: "readme", label: "README.md" },
      { value: "guide", label: "guide.md" },
    ],
  },
  {
    value: "src",
    label: "src",
    children: [
      { value: "engine", label: "engine.ts" },
      {
        value: "ui",
        label: "ui",
        children: [
          { value: "tree", label: "tree.tsx" },
          { value: "row", label: "row.tsx" },
        ],
      },
    ],
  },
];

export function Files() {
  const [checked, setChecked] = useState<string[]>([]);
  const [expanded, setExpanded] = useState<string[]>(["docs", "src"]);

  return (
    <CheckboxTree
      checked={checked}
      expanded={expanded}
      nodes={nodes}
      onCheck={(next) => setChecked(next)}
      onExpand={(next) => setExpanded(next)}
    />
  );
}

"use client";

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

const data: 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 function Files() {
  const [checked, setChecked] = useState<string[]>([]);
  const [expanded, setExpanded] = useState<string[]>(["docs", "src"]);

  return (
    <Tree
      aria-label="Project files"
      checkedItems={checked}
      data={data}
      expandedItems={expanded}
      height={320}
      onCheck={setChecked}
      onExpand={setExpanded}
    />
  );
}

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

/** The node shape react-checkbox-tree accepts. */
export type RctNode = {
  children?: RctNode[];
  className?: string;
  disabled?: boolean;
  icon?: unknown;
  label: unknown;
  showCheckbox?: boolean;
  title?: string;
  value: number | string;
};

/**
 * Flattens a react-checkbox-tree `nodes` array into a `TreeDefinition`.
 *
 * Everything the old component read off the node itself — icon, className,
 * disabled, title — is preserved under `item.data` and comes back untouched in
 * `renderItem`.
 */
export function convertNodes(nodes: RctNode[], rootId = "__root__"): TreeDefinition {
  const data: TreeDefinition = { [rootId]: { id: rootId, label: "root", children: [] } };

  // An explicit stack rather than recursion: a deeply nested export should not
  // overflow the call stack halfway through a migration.
  const stack: Array<{ nodes: RctNode[]; parentId: string }> = [{ nodes, parentId: rootId }];

  while (stack.length > 0) {
    const frame = stack.pop()!;
    const childIds: string[] = [];

    for (const node of frame.nodes) {
      const id = String(node.value);

      if (data[id]) {
        throw new Error(
          `convertNodes: duplicate node value "${id}". IDs must be unique across the whole tree.`
        );
      }

      const hasChildren = Array.isArray(node.children) && node.children.length > 0;

      // `label` must be a string here — it is what search matches against. A
      // React-element label moves into `data` and is drawn by `renderItem`.
      const item: TreeItem = {
        id,
        label: typeof node.label === "string" ? node.label : id,
        data: {
          className: node.className,
          disabled: node.disabled ?? false,
          icon: node.icon,
          richLabel: typeof node.label === "string" ? undefined : node.label,
          showCheckbox: node.showCheckbox ?? true,
          title: node.title,
        },
      };
      if (hasChildren) item.children = [];

      data[id] = item;
      childIds.push(id);
      if (hasChildren) stack.push({ nodes: node.children!, parentId: id });
    }

    data[frame.parentId].children = childIds;
  }

  return data;
}

"use client";

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

const data: 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 function Files() {
  return (
    <Tree
      aria-label="Project files"
      data={data}
      height={320}
      // The `onlyLeafCheckboxes` equivalent: folders simply get no checkbox.
      renderCheckbox={({ a11yProps, checkedState, isFolder }) =>
        isFolder ? null : (
          <input
            {...a11yProps}
            checked={checkedState === CheckedState.Checked}
            onChange={() => {
              /* the row owns the interaction */
            }}
            type="checkbox"
          />
        )
      }
      renderExpander={({ a11yProps, isExpanded, onToggle }) => (
        <button
          {...a11yProps}
          onClick={(event) => {
            event.stopPropagation();
            onToggle();
          }}
          type="button"
        >
          {isExpanded ? "▾" : "▸"}
        </button>
      )}
    />
  );
}

"use client";

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

const data: 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 function Files() {
  return (
    <Tree
      aria-label="Project files"
      data={data}
      height={320}
      // Not renderItem(item) — one object, destructured.
      renderItem={({ checkedState, isFolder, item, level }) => (
        <span
          style={{ fontWeight: isFolder ? 600 : 400 }}
          title={`level ${level}, ${checkedState}`}
        >
          {item.label}
          {checkedState === CheckedState.Indeterminate ? " (partial)" : null}
        </span>
      )}
    />
  );
}

"use client";

import { useCallback, useRef } from "react";
import {
  CheckedState,
  Tree,
  type TreeDefinition,
  type TreeRef,
} from "react-virtual-checkbox-tree";

const data: 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 function Files() {
  const treeRef = useRef<TreeRef>(null);

  // Equivalent to react-checkbox-tree's checkModel="all": every fully checked
  // node, folders included. Costs one pass over `data`, so call it when you
  // submit, not on every keystroke.
  const checkedAll = useCallback(() => {
    const engine = treeRef.current?.getEngine();
    if (!engine) return [];
    return Object.keys(data).filter(
      (id) => id !== "__root__" && engine.getState(id) === CheckedState.Checked
    );
  }, []);

  return (
    <>
      <Tree aria-label="Project files" data={data} height={320} ref={treeRef} />
      <button onClick={() => console.log(checkedAll())} type="button">
        Log selection
      </button>
    </>
  );
}