@teamix-evo/ui 0.4.0 → 0.5.0

package/src/components/tree/index.tsx

@@ -0,0 +1,764 @@
+/**
+ * 树 Tree
+ *
+ * 多层级结构数据展示，支持展开收起、选中、勾选（父子联动 / 独立）、回填策略、
+ * 节点占满整行、自定义图标、异步加载、过滤高亮、虚拟滚动等业界主流能力。
+ *
+ * @when
+ * - 文件目录 / 组织架构 / 分类层级浏览
+ * - 需要勾选 / 单选 / 多选层级数据
+ * - 大数据量树（开启 `virtual`）
+ * - 异步分级加载（`loadData`）
+ */
+'use client';
+
+import * as React from 'react';
+import { useVirtualizer } from '@tanstack/react-virtual';
+import { cva, type VariantProps } from 'class-variance-authority';
+import {
+  ChevronRightIcon,
+  FileIcon,
+  FolderIcon,
+  Loader2Icon,
+} from 'lucide-react';
+
+import { cn } from '@/lib/utils';
+import { Checkbox } from '@/components/checkbox';
+
+import {
+  applyCheckedStrategy,
+  collectIndeterminateKeys,
+  expandWithParents,
+  findNode,
+  flattenVisible,
+  getAllKeys,
+  isFullyChecked,
+  isIndeterminate,
+  toggleWithCascade,
+  type FlatTreeNode,
+  type TreeNodeBase,
+} from './utils';
+
+// ─── Variants ────────────────────────────────────────────────────────────────
+
+const treeNodeVariants = cva(
+  'group/tree-node relative flex items-center gap-1 rounded-sm text-xs select-none transition-colors data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground',
+  {
+    variants: {
+      size: {
+        sm: 'h-6 px-1',
+        default: 'h-7 px-1',
+      },
+      block: {
+        true: 'w-full',
+        false: 'w-fit',
+      },
+      selectable: {
+        true: 'cursor-pointer hover:data-[selected=false]:bg-accent/50',
+        false: 'cursor-default',
+      },
+    },
+    defaultVariants: { size: 'default', block: false, selectable: true },
+  },
+);
+
+const INDENT_PER_LEVEL = 16;
+const NODE_BASE_PADDING_LEFT = 4;
+
+// ─── Types ───────────────────────────────────────────────────────────────────
+
+/** 树节点。 */
+export interface TreeNode extends TreeNodeBase {
+  /** 唯一标识。 */
+  key: string;
+  /** 显示文本。 */
+  label: React.ReactNode;
+  /** 子节点。 */
+  children?: TreeNode[];
+  /** 节点图标，覆盖默认 Folder / File。 */
+  icon?: React.ReactNode;
+  /** 节点级覆盖 `Tree.selectable`。 */
+  selectable?: boolean;
+  /** 节点级覆盖 `Tree.checkable`。 */
+  checkable?: boolean;
+}
+
+/** Tree 组件 Props。 */
+export interface TreeProps
+  extends Omit<React.ComponentProps<'div'>, 'onSelect'>,
+    VariantProps<typeof treeNodeVariants> {
+  /** 树形数据源。 */
+  treeData: TreeNode[];
+
+  // ── 选中态（节点点击高亮）──────────────────────────────────────────────
+  /** 是否支持节点选中。@default true */
+  selectable?: boolean;
+  /** 是否支持多选选中。@default false */
+  multiple?: boolean;
+  /** 受控选中节点 key 列表。 */
+  selectedKeys?: string[];
+  /** 默认选中节点 key 列表。 */
+  defaultSelectedKeys?: string[];
+  /** 选中变化回调。 */
+  onSelect?: (
+    selectedKeys: string[],
+    info: { node: TreeNode; selected: boolean; selectedNodes: TreeNode[] },
+  ) => void;
+
+  // ── 勾选态（checkbox）─────────────────────────────────────────────────
+  /** 是否显示复选框。@default false */
+  checkable?: boolean;
+  /** 受控勾选 key 列表。 */
+  checkedKeys?: string[];
+  /** 默认勾选 key 列表。 */
+  defaultCheckedKeys?: string[];
+  /** 父子勾选独立（不联动）。@default false */
+  checkStrictly?: boolean;
+  /**
+   * 勾选回填策略：
+   * - 'all' 全量返回（默认，与 cloud-design 一致）
+   * - 'parent' 父级 fully checked 时仅返回父级
+   * - 'child' 仅返回叶子节点
+   * 仅在 `checkStrictly=false` 时生效。
+   * @default 'all'
+   */
+  checkedStrategy?: 'all' | 'parent' | 'child';
+  /** 勾选变化回调。 */
+  onCheck?: (
+    checkedKeys: string[],
+    info: {
+      node: TreeNode;
+      checked: boolean;
+      checkedNodes: TreeNode[];
+      indeterminateKeys: string[];
+    },
+  ) => void;
+
+  // ── 展开态 ───────────────────────────────────────────────────────────
+  /** 受控展开 key 列表。 */
+  expandedKeys?: string[];
+  /** 默认展开 key 列表。 */
+  defaultExpandedKeys?: string[];
+  /** 默认展开全部节点。@default false */
+  defaultExpandAll?: boolean;
+  /**
+   * 自动展开父节点；搜索高亮场景下建议设为 false 由外部控制。
+   * @default true
+   */
+  autoExpandParent?: boolean;
+  /** 展开/收起回调。 */
+  onExpand?: (
+    expandedKeys: string[],
+    info: { node: TreeNode; expanded: boolean },
+  ) => void;
+
+  // ── 视觉 ─────────────────────────────────────────────────────────────
+  /** 是否显示连接线。@default false */
+  showLine?: boolean;
+  /**
+   * 是否显示节点图标（默认 File / Folder，可由 node.icon 覆盖）。
+   * @default false（与 antd v5 一致）
+   */
+  showIcon?: boolean;
+  /** 节点占满整行（替代 cloud-design 的 isLabelBlock / isNodeBlock）。@default false */
+  blockNode?: boolean;
+  /** 节点行高档位。@default 'default' */
+  size?: 'sm' | 'default';
+
+  // ── 数据 / 渲染 ──────────────────────────────────────────────────────
+  /**
+   * 异步加载子节点：点击展开非 isLeaf 且 children 未提供的节点时调用。
+   * 业务侧应在 resolve 前更新 treeData 引用，组件不直接持有 children 状态。
+   */
+  loadData?: (node: TreeNode) => Promise<void> | void;
+  /**
+   * 节点过滤回调；返回 true 的节点 label 会被高亮（不影响节点显隐，
+   * 业务侧可配合 expandedKeys 做搜索体验）。
+   */
+  filterTreeNode?: (node: TreeNode) => boolean;
+  /** 自定义节点 label 渲染（替代 cloud-design 的 renderChildNodes）。 */
+  titleRender?: (node: TreeNode) => React.ReactNode;
+
+  // ── 虚拟滚动 ─────────────────────────────────────────────────────────
+  /**
+   * 虚拟滚动；启用且展平后可见节点 ≥ threshold 时启用 react-virtual。
+   * - `true` 等价 `{ threshold: 200 }`
+   * - 启用时容器需固定高度，默认 `max-h-96 overflow-auto`，可通过 className 覆盖。
+   */
+  virtual?: boolean | { threshold?: number; itemHeight?: number };
+}
+
+// ─── 内部上下文（避免跨层级 prop drilling）──────────────────────────────────
+
+interface TreeRuntimeContextValue {
+  size: 'sm' | 'default';
+  blockNode: boolean;
+  showLine: boolean;
+  showIcon: boolean;
+  selectable: boolean;
+  multiple: boolean;
+  checkable: boolean;
+  checkStrictly: boolean;
+  selectedSet: Set<string>;
+  checkedSet: Set<string>;
+  expandedSet: Set<string>;
+  loadingSet: Set<string>;
+  filterTreeNode?: (node: TreeNode) => boolean;
+  titleRender?: (node: TreeNode) => React.ReactNode;
+  onToggleExpand: (node: TreeNode) => void;
+  onSelect: (node: TreeNode) => void;
+  onCheck: (node: TreeNode, nextChecked: boolean) => void;
+}
+
+const TreeRuntimeContext = React.createContext<TreeRuntimeContextValue | null>(
+  null,
+);
+
+function useTreeRuntime() {
+  const ctx = React.useContext(TreeRuntimeContext);
+  if (!ctx) throw new Error('TreeNodeRow must be used within Tree');
+  return ctx;
+}
+
+const getKey = (n: TreeNode) => n.key;
+
+// ─── Tree ────────────────────────────────────────────────────────────────────
+
+function Tree({
+  treeData,
+  // 选中
+  selectable = true,
+  multiple = false,
+  selectedKeys: controlledSelected,
+  defaultSelectedKeys,
+  onSelect,
+  // 勾选
+  checkable = false,
+  checkedKeys: controlledChecked,
+  defaultCheckedKeys,
+  checkStrictly = false,
+  checkedStrategy = 'all',
+  onCheck,
+  // 展开
+  expandedKeys: controlledExpanded,
+  defaultExpandedKeys,
+  defaultExpandAll = false,
+  autoExpandParent = true,
+  onExpand,
+  // 视觉
+  showLine = false,
+  showIcon = false,
+  blockNode = false,
+  size = 'default',
+  // 数据
+  loadData,
+  filterTreeNode,
+  titleRender,
+  // 虚拟化
+  virtual = false,
+  className,
+  ...divProps
+}: TreeProps) {
+  // ── 状态 ──────────────────────────────────────────────────────────────
+  const [internalSelected, setInternalSelected] = React.useState<string[]>(
+    defaultSelectedKeys ?? [],
+  );
+  const [internalChecked, setInternalChecked] = React.useState<string[]>(
+    defaultCheckedKeys ?? [],
+  );
+  const [internalExpanded, setInternalExpanded] = React.useState<string[]>(
+    () => {
+      if (defaultExpandAll) return getAllKeys(treeData, getKey);
+      return defaultExpandedKeys ?? [];
+    },
+  );
+  const [loadingKeys, setLoadingKeys] = React.useState<Set<string>>(
+    () => new Set(),
+  );
+
+  const selectedFromProp = controlledSelected ?? internalSelected;
+  const checkedFromProp = controlledChecked ?? internalChecked;
+  const expandedFromProp = controlledExpanded ?? internalExpanded;
+
+  // 多选 + 父子联动场景：外部传入的 checkedKeys 可能是策略压缩后的，
+  // 这里展开为完整勾选集，保证 isFullyChecked / cascade 正确。
+  const checkedSet = React.useMemo(() => {
+    if (!checkable || checkStrictly) return new Set(checkedFromProp);
+    const expanded = new Set<string>(checkedFromProp);
+    for (const k of checkedFromProp) {
+      const node = findNode(treeData, k, getKey);
+      if (node) {
+        const walk = (n: TreeNode) => {
+          if (n.disabled || n.disableCheckbox) return;
+          expanded.add(n.key);
+          n.children?.forEach(walk);
+        };
+        walk(node);
+      }
+    }
+    return expanded;
+  }, [checkable, checkStrictly, checkedFromProp, treeData]);
+
+  const selectedSet = React.useMemo(
+    () => new Set(selectedFromProp),
+    [selectedFromProp],
+  );
+
+  const expandedSet = React.useMemo(() => {
+    if (autoExpandParent) {
+      return new Set(expandWithParents(treeData, expandedFromProp, getKey));
+    }
+    return new Set(expandedFromProp);
+  }, [expandedFromProp, autoExpandParent, treeData]);
+
+  // ── 处理函数 ──────────────────────────────────────────────────────────
+  const handleToggleExpand = React.useCallback(
+    (node: TreeNode) => {
+      const nextExpanded = !expandedSet.has(node.key);
+      const next = new Set(expandedSet);
+      if (nextExpanded) next.add(node.key);
+      else next.delete(node.key);
+      const nextKeys = Array.from(next);
+
+      if (controlledExpanded === undefined) setInternalExpanded(nextKeys);
+      onExpand?.(nextKeys, { node, expanded: nextExpanded });
+
+      // 异步加载：展开 + 非叶子 + 无 children + loadData 提供
+      const hasChildren = !!(node.children && node.children.length > 0);
+      const isLeafFlag = node.isLeaf ?? !hasChildren;
+      if (
+        nextExpanded &&
+        loadData &&
+        !isLeafFlag &&
+        !hasChildren &&
+        !loadingKeys.has(node.key)
+      ) {
+        setLoadingKeys((prev) => {
+          const s = new Set(prev);
+          s.add(node.key);
+          return s;
+        });
+        Promise.resolve(loadData(node)).finally(() => {
+          setLoadingKeys((prev) => {
+            const s = new Set(prev);
+            s.delete(node.key);
+            return s;
+          });
+        });
+      }
+    },
+    [expandedSet, controlledExpanded, onExpand, loadData, loadingKeys],
+  );
+
+  const handleSelect = React.useCallback(
+    (node: TreeNode) => {
+      if (node.disabled) return;
+      const nodeSelectable = node.selectable ?? selectable;
+      if (!nodeSelectable) return;
+
+      const isCurrentlySelected = selectedSet.has(node.key);
+      let nextKeys: string[];
+      let nextSelected: boolean;
+
+      if (multiple) {
+        if (isCurrentlySelected) {
+          nextKeys = selectedFromProp.filter((k) => k !== node.key);
+          nextSelected = false;
+        } else {
+          nextKeys = [...selectedFromProp, node.key];
+          nextSelected = true;
+        }
+      } else {
+        if (isCurrentlySelected) {
+          nextKeys = [];
+          nextSelected = false;
+        } else {
+          nextKeys = [node.key];
+          nextSelected = true;
+        }
+      }
+
+      if (controlledSelected === undefined) setInternalSelected(nextKeys);
+      const selectedNodes = nextKeys
+        .map((k) => findNode(treeData, k, getKey))
+        .filter(Boolean) as TreeNode[];
+      onSelect?.(nextKeys, { node, selected: nextSelected, selectedNodes });
+    },
+    [
+      selectable,
+      multiple,
+      selectedSet,
+      selectedFromProp,
+      controlledSelected,
+      treeData,
+      onSelect,
+    ],
+  );
+
+  const handleCheck = React.useCallback(
+    (node: TreeNode, nextChecked: boolean) => {
+      if (node.disabled || node.disableCheckbox) return;
+
+      let nextSet: Set<string>;
+      if (checkStrictly) {
+        nextSet = new Set(checkedSet);
+        if (nextChecked) nextSet.add(node.key);
+        else nextSet.delete(node.key);
+      } else {
+        nextSet = toggleWithCascade(
+          treeData,
+          checkedSet,
+          node,
+          nextChecked,
+          getKey,
+        );
+      }
+
+      const outputKeys = checkStrictly
+        ? Array.from(nextSet)
+        : applyCheckedStrategy(treeData, nextSet, checkedStrategy, getKey);
+
+      if (controlledChecked === undefined) setInternalChecked(outputKeys);
+
+      const checkedNodes = Array.from(nextSet)
+        .map((k) => findNode(treeData, k, getKey))
+        .filter(Boolean) as TreeNode[];
+      const indeterminateKeys = checkStrictly
+        ? []
+        : collectIndeterminateKeys(treeData, nextSet, getKey);
+
+      onCheck?.(outputKeys, {
+        node,
+        checked: nextChecked,
+        checkedNodes,
+        indeterminateKeys,
+      });
+    },
+    [
+      checkStrictly,
+      checkedSet,
+      treeData,
+      checkedStrategy,
+      controlledChecked,
+      onCheck,
+    ],
+  );
+
+  // ── 上下文 ────────────────────────────────────────────────────────────
+  const runtime = React.useMemo<TreeRuntimeContextValue>(
+    () => ({
+      size: size ?? 'default',
+      blockNode,
+      showLine,
+      showIcon,
+      selectable,
+      multiple,
+      checkable,
+      checkStrictly,
+      selectedSet,
+      checkedSet,
+      expandedSet,
+      loadingSet: loadingKeys,
+      filterTreeNode,
+      titleRender,
+      onToggleExpand: handleToggleExpand,
+      onSelect: handleSelect,
+      onCheck: handleCheck,
+    }),
+    [
+      size,
+      blockNode,
+      showLine,
+      showIcon,
+      selectable,
+      multiple,
+      checkable,
+      checkStrictly,
+      selectedSet,
+      checkedSet,
+      expandedSet,
+      loadingKeys,
+      filterTreeNode,
+      titleRender,
+      handleToggleExpand,
+      handleSelect,
+      handleCheck,
+    ],
+  );
+
+  // ── 虚拟化判定 ────────────────────────────────────────────────────────
+  const virtualConfig = React.useMemo(() => {
+    if (!virtual) return null;
+    const opts = virtual === true ? {} : virtual;
+    const itemHeight = opts.itemHeight ?? (size === 'sm' ? 24 : 28);
+    const threshold = opts.threshold ?? 200;
+    return { itemHeight, threshold };
+  }, [virtual, size]);
+
+  const flat = React.useMemo<FlatTreeNode<TreeNode>[]>(() => {
+    if (!virtualConfig) return [];
+    return flattenVisible(treeData, expandedSet, getKey);
+  }, [virtualConfig, treeData, expandedSet]);
+
+  const useVirtualPath = !!(
+    virtualConfig && flat.length >= virtualConfig.threshold
+  );
+
+  return (
+    <TreeRuntimeContext.Provider value={runtime}>
+      <div
+        data-slot="tree"
+        data-size={size}
+        role="tree"
+        className={cn(
+          'text-xs text-foreground',
+          useVirtualPath && 'max-h-96 overflow-auto',
+          className,
+        )}
+        {...divProps}
+      >
+        {useVirtualPath ? (
+          <TreeVirtualBody flat={flat} itemHeight={virtualConfig!.itemHeight} />
+        ) : (
+          treeData.map((node) => (
+            <TreeNodeRow key={node.key} node={node} level={0} />
+          ))
+        )}
+      </div>
+    </TreeRuntimeContext.Provider>
+  );
+}
+
+// ─── TreeNodeRow（递归渲染路径）─────────────────────────────────────────────
+
+function TreeNodeRow({ node, level }: { node: TreeNode; level: number }) {
+  const ctx = useTreeRuntime();
+  const hasChildren = !!(node.children && node.children.length > 0);
+  const isLeaf = node.isLeaf ?? !hasChildren;
+  const isExpanded = ctx.expandedSet.has(node.key);
+
+  return (
+    <div data-slot="tree-node-wrapper">
+      <TreeNodeRowInner node={node} level={level} isLeaf={isLeaf} />
+      {hasChildren && isExpanded && (
+        <div data-slot="tree-children" className="relative">
+          {ctx.showLine && (
+            <span
+              aria-hidden
+              data-slot="tree-line"
+              className="pointer-events-none absolute top-0 bottom-0 w-px bg-border"
+              style={{
+                left: `${
+                  level * INDENT_PER_LEVEL + NODE_BASE_PADDING_LEFT + 8
+                }px`,
+              }}
+            />
+          )}
+          {node.children!.map((child) => (
+            <TreeNodeRow key={child.key} node={child} level={level + 1} />
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}
+
+// ─── 单行渲染（虚拟路径与递归路径共用）──────────────────────────────────────
+
+function TreeNodeRowInner({
+  node,
+  level,
+  isLeaf,
+}: {
+  node: TreeNode;
+  level: number;
+  isLeaf: boolean;
+}) {
+  const ctx = useTreeRuntime();
+  const hasChildren = !!(node.children && node.children.length > 0);
+  const isExpanded = ctx.expandedSet.has(node.key);
+  const isLoading = ctx.loadingSet.has(node.key);
+  const isSelected = ctx.selectedSet.has(node.key);
+  const nodeSelectable = !node.disabled && (node.selectable ?? ctx.selectable);
+  const nodeCheckable = node.checkable ?? ctx.checkable;
+  const isMatched = ctx.filterTreeNode?.(node) ?? false;
+
+  // 勾选态
+  let isChecked: boolean | 'indeterminate' = false;
+  if (nodeCheckable) {
+    if (ctx.checkStrictly) {
+      isChecked = ctx.checkedSet.has(node.key);
+    } else {
+      const fully = isFullyChecked(node, ctx.checkedSet, getKey);
+      const half = !fully && isIndeterminate(node, ctx.checkedSet, getKey);
+      isChecked = fully ? true : half ? 'indeterminate' : false;
+    }
+  }
+
+  return (
+    <div
+      role="treeitem"
+      aria-expanded={hasChildren ? isExpanded : undefined}
+      aria-selected={isSelected}
+      data-slot="tree-node"
+      data-selected={isSelected}
+      data-disabled={node.disabled ? 'true' : 'false'}
+      data-level={level}
+      className={cn(
+        treeNodeVariants({
+          size: ctx.size,
+          block: ctx.blockNode,
+          selectable: nodeSelectable,
+        }),
+      )}
+      style={{
+        paddingLeft: `${level * INDENT_PER_LEVEL + NODE_BASE_PADDING_LEFT}px`,
+      }}
+      onClick={() => {
+        if (node.disabled) return;
+        // 点行为：可选中时优先选中；否则若可勾选则切换勾选（TreeSelect 多选场景复用）
+        if (nodeSelectable) {
+          ctx.onSelect(node);
+          return;
+        }
+        if (ctx.checkable && nodeCheckable && !node.disableCheckbox) {
+          const fully = isChecked === true;
+          ctx.onCheck(node, !fully);
+        }
+      }}
+    >
+      {/* Expand / loading switcher */}
+      <span
+        data-slot="tree-switcher"
+        className="inline-flex size-4 shrink-0 items-center justify-center"
+        onClick={(e) => {
+          if (isLeaf) return;
+          e.stopPropagation();
+          ctx.onToggleExpand(node);
+        }}
+      >
+        {isLoading ? (
+          <Loader2Icon className="size-3 animate-spin text-muted-foreground" />
+        ) : !isLeaf ? (
+          <ChevronRightIcon
+            className={cn(
+              'size-3 text-muted-foreground transition-transform',
+              isExpanded && 'rotate-90',
+            )}
+          />
+        ) : null}
+      </span>
+
+      {/* Checkbox */}
+      {ctx.checkable && nodeCheckable && (
+        <span
+          className="inline-flex shrink-0"
+          onClick={(e) => e.stopPropagation()}
+          onPointerDown={(e) => e.stopPropagation()}
+        >
+          <Checkbox
+            checked={isChecked}
+            disabled={node.disabled || node.disableCheckbox}
+            onCheckedChange={(next) =>
+              ctx.onCheck(
+                node,
+                next === true || next === 'indeterminate' ? true : false,
+              )
+            }
+            tabIndex={-1}
+          />
+        </span>
+      )}
+
+      {/* Icon */}
+      {ctx.showIcon && (
+        <span
+          data-slot="tree-icon"
+          className="inline-flex size-4 shrink-0 items-center justify-center text-muted-foreground"
+        >
+          {node.icon ??
+            (isLeaf ? (
+              <FileIcon className="size-3.5" />
+            ) : (
+              <FolderIcon className="size-3.5" />
+            ))}
+        </span>
+      )}
+
+      {/* Label */}
+      <span
+        data-slot="tree-label"
+        data-matched={isMatched ? 'true' : undefined}
+        className={cn(
+          'truncate',
+          ctx.blockNode && 'flex-1',
+          isMatched &&
+            'rounded-sm bg-accent px-1 font-medium text-accent-foreground',
+        )}
+      >
+        {ctx.titleRender ? ctx.titleRender(node) : node.label}
+      </span>
+    </div>
+  );
+}
+
+// ─── 虚拟滚动渲染路径 ───────────────────────────────────────────────────────
+
+function TreeVirtualBody({
+  flat,
+  itemHeight,
+}: {
+  flat: FlatTreeNode<TreeNode>[];
+  itemHeight: number;
+}) {
+  const parentRef = React.useRef<HTMLDivElement | null>(null);
+  // virtualizer 直接挂在外层 div（max-h-96 overflow-auto），但外层 div 由 Tree 控制；
+  // 这里再包一层固定高度容器以承载虚拟列表。
+  const virtualizer = useVirtualizer({
+    count: flat.length,
+    getScrollElement: () => parentRef.current,
+    estimateSize: () => itemHeight,
+    overscan: 8,
+  });
+  const items = virtualizer.getVirtualItems();
+  const total = virtualizer.getTotalSize();
+
+  return (
+    <div
+      ref={parentRef}
+      data-slot="tree-virtual-scroll"
+      className="h-96 overflow-auto"
+    >
+      <div
+        data-slot="tree-virtual-inner"
+        style={{ height: total, position: 'relative', width: '100%' }}
+      >
+        {items.map((vi) => {
+          const entry = flat[vi.index]!;
+          return (
+            <div
+              key={getKey(entry.node)}
+              data-index={vi.index}
+              ref={virtualizer.measureElement}
+              style={{
+                position: 'absolute',
+                top: 0,
+                left: 0,
+                width: '100%',
+                transform: `translateY(${vi.start}px)`,
+              }}
+            >
+              <TreeNodeRowInner
+                node={entry.node}
+                level={entry.level}
+                isLeaf={entry.isLeaf}
+              />
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+}
+
+export { Tree, treeNodeVariants };