Skip to main content

Tree State

Overview​

Core types for representing the tree structure and drag-and-drop state.

TreeItem<T>​

export interface TreeItem<T extends TreeItem<any> = TreeItem<any>> {
  id: string;
  children?: T[];
}

Represents a single node in the tree.

  • id: Unique identifier for the node.

  • children: Optional list of nested tree items of the same generic type T. The generic parameter T allows the interface to reference itself recursively, enabling strongly typed nested trees.

TreeItem is the base type of the tree.

It is intentionally minimal and should not be extended with custom fields.

TreeState​

export type TreeState = {
  lastAction: TreeAction | null;
  data: TreeItem[];
};

Represents the state of the tree at any point in time.

  • data: The current tree structure (TreeItem[]).

  • lastAction: The last TreeAction applied (or null if none).

This is the ground state used across the drag-and-drop system.

TreeAction​

import type { Instruction } from '@atlaskit/pragmatic-drag-and-drop-hitbox/list-item';

export type TreeAction =
  | {
      type: 'instruction';
      instruction: Instruction;
      itemId: string;
      targetId: string;
    }
  | {
      type: 'add';
      instruction: Instruction;
      itemId: string;
      targetId: string;
      item: TreeItem;
    }
  | { type: 'toggle'; itemId: string }
  | { type: 'expand'; itemId: string }
  | { type: 'collapse'; itemId: string }
  | { type: 'modal-move'; itemId: string; targetId: string; index: number };

Represents an operation performed on the tree.

  • instruction: Apply a drag-and-drop instruction.

  • add: Insert a new item.

  • toggle: Toggle expand/collapse state.

  • expand: Force expand a node.

  • collapse: Force collapse a node.

  • modal-move: Reorder items using a modal input.

Extending TreeAction

The TreeAction union is extensible. Advanced developers can add their own action types if custom tree operations are needed.

Example:

type CustomTreeAction =
  | TreeAction
  | { type: 'archive'; itemId: string };

See Also​