esc
navigate select
Browse documentation

Types

All exported from the package root: import { TreeNode, TreeKitProps, ... } from "@treekit-ui/core".

TreeNode<T>

interface TreeNode<T = unknown> {
  id: string;
  label: string;
  children?: TreeNode<T>[];
  disabled?: boolean;
  hasChildren?: boolean;
  icon?: ReactNode;
  data?: T;
}

CheckedState

type CheckedState = "checked" | "unchecked" | "indeterminate";

SelectionPropagation

interface SelectionPropagation {
  toChildren?: boolean; // default true
  toParents?: boolean;  // default true
}

SelectionMode

type SelectionMode = "none" | "single" | "multiple";

ExpandTrigger

type ExpandTrigger = "chevron" | "label" | "either";

DisabledBehavior

interface DisabledBehavior {
  cascadeToChildren?: boolean; // default true
  allowExpand?: boolean;       // default true
}

TreeKitVariant

type TreeKitVariant =
  | "default"
  | "connected"
  | "compact"
  | "spacious"
  | "file-explorer";

TreeKitIcons<T>

interface TreeKitIcons<T = unknown> {
  expandIcon?: ReactNode;
  collapseIcon?: ReactNode;
  leafIcon?: ReactNode | ((node: TreeNode<T>) => ReactNode);
  loadingIcon?: ReactNode;
  checkedIcon?: ReactNode;
  uncheckedIcon?: ReactNode;
  indeterminateIcon?: ReactNode;
}

TreeKitClassNames

interface TreeKitClassNames {
  root?: string;
  node?: string;
  nodeContent?: string;
  chevron?: string;
  checkbox?: string;
  icon?: string;
  label?: string;
  children?: string;
}

TreeNodeRenderContext<T>

interface TreeNodeRenderContext<T = unknown> {
  node: TreeNode<T>;
  level: number;
  posInSet: number;
  setSize: number;
  expanded: boolean;
  checked: CheckedState;
  selected: boolean;
  disabled: boolean;
  hasChildren: boolean;
  isLoading: boolean;
  loadError: unknown;
  isMatch: boolean;
  toggleExpanded: () => void;
  toggleChecked: () => void;
  selectNode: () => void;
  retryLoad: () => void;
}

TreeKitProps<T>

The full component prop type — see <TreeKit /> for every field with a description, grouped by concern, rather than one flat interface here.