grassroot
Install

DocsAPI referenceUI machineskanban

kanban machine

The public state machine contract for @grassroot/ui-machines/kanban. The machine owns behaviour; the matching headless layer owns composition.

@grassroot/ui-machines/kanban

Package

39 exports
View source packages/ui-machines/src/kanban/index.ts

Service example

kanban.tsts
import { createService } from "@grassroot/statechart";
import { kanbanMachine } from "@grassroot/ui-machines/kanban";
 
const service = createService(kanbanMachine, { input: {} });
service.start();
service.send({ type: "…" });
service.stop();

Exports

createKanbanDragState

function

Duplicate of frozen `createKanbanDragState`.

DeclarationView source
createKanbanDragStatets
declare function createKanbanDragState(): KanbanDragState;
Name
Kind
Type
Requirement
return
return value
KanbanDragState
n/a
Name
return
Kind
return value
Type
KanbanDragState
Requirement
n/a

EMPTY_KANBAN_PLACEMENTS

value
DeclarationView source
EMPTY_KANBAN_PLACEMENTSts
export declare const EMPTY_KANBAN_PLACEMENTS: readonly KanbanPlacement[];

EMPTY_SELECTION_IDS

value
DeclarationView source
EMPTY_SELECTION_IDSts
export declare const EMPTY_SELECTION_IDS: SelectionValue;

KanbanAnnounceCommand

type
DeclarationView source
KanbanAnnounceCommandts
type KanbanAnnounceCommand = {
  readonly type: "ANNOUNCE";
  readonly key: KanbanAnnounceKey;
  readonly cardId?: string;
  readonly columnId?: string;
  readonly fromColumnId?: string;
  readonly toColumnId?: string;
};
Name
Kind
Type
Requirement
cardId
property
string
optional
columnId
property
string
optional
fromColumnId
property
string
optional
key
property
KanbanAnnounceKey
required
toColumnId
property
string
optional
type
property
"ANNOUNCE"
required
Name
cardId
Kind
property
Type
string
Requirement
optional
Name
columnId
Kind
property
Type
string
Requirement
optional
Name
fromColumnId
Kind
property
Type
string
Requirement
optional
Name
key
Kind
property
Type
KanbanAnnounceKey
Requirement
required
Name
toColumnId
Kind
property
Type
string
Requirement
optional
Name
type
Kind
property
Type
"ANNOUNCE"
Requirement
required

KanbanAnnounceDetail

type
DeclarationView source
KanbanAnnounceDetailts
type KanbanAnnounceDetail = {
  readonly key: KanbanAnnounceKey;
  readonly cardId?: string;
  readonly columnId?: string;
  readonly fromColumnId?: string;
  readonly toColumnId?: string;
};
Name
Kind
Type
Requirement
cardId
property
string
optional
columnId
property
string
optional
fromColumnId
property
string
optional
key
property
KanbanAnnounceKey
required
toColumnId
property
string
optional
Name
cardId
Kind
property
Type
string
Requirement
optional
Name
columnId
Kind
property
Type
string
Requirement
optional
Name
fromColumnId
Kind
property
Type
string
Requirement
optional
Name
key
Kind
property
Type
KanbanAnnounceKey
Requirement
required
Name
toColumnId
Kind
property
Type
string
Requirement
optional

KanbanAnnounceKey

type
DeclarationView source
KanbanAnnounceKeyts
type KanbanAnnounceKey = "kanban.grabbed" | "kanban.column" | "kanban.dropped" | "kanban.cancelled";

KanbanCommand

type
DeclarationView source
KanbanCommandts
type KanbanCommand = KanbanMoveCommand | KanbanAnnounceCommand | SelectionCommand;

KanbanContext

type
DeclarationView source
KanbanContextts
type KanbanContext = {
  readonly mode: BindingMode;
  readonly placements: readonly KanbanPlacement[];
  readonly dragStatus: KanbanDragStatus;
  readonly sourceCardId: string | null;
  readonly sourceColumnId: string | null;
  readonly targetColumnId: string | null;
  readonly selection: SelectionMachineState;
};
Name
Kind
Type
Requirement
dragStatus
property
KanbanDragStatus
required
mode
property
BindingMode
required
placements
property
readonly KanbanPlacement[]
required
selection
property
SelectionMachineState
required
sourceCardId
property
string | null
required
sourceColumnId
property
string | null
required
targetColumnId
property
string | null
required
Name
dragStatus
Kind
property
Type
KanbanDragStatus
Requirement
required
Name
mode
Kind
property
Type
BindingMode
Requirement
required
Name
placements
Kind
property
Type
readonly KanbanPlacement[]
Requirement
required
Name
selection
Kind
property
Type
SelectionMachineState
Requirement
required
Name
sourceCardId
Kind
property
Type
string | null
Requirement
required
Name
sourceColumnId
Kind
property
Type
string | null
Requirement
required
Name
targetColumnId
Kind
property
Type
string | null
Requirement
required

KanbanDiagnosticCodes

value
DeclarationView source
KanbanDiagnosticCodests
export declare const KanbanDiagnosticCodes: readonly DiagnosticCatalogueEntry[];

KanbanDragAction

type

Duplicate of frozen `KanbanDragAction`.

DeclarationView source
KanbanDragActionts
type KanbanDragAction = {
  readonly type: "dragStart";
  readonly cardId: string;
} | {
  readonly type: "dragOverColumn";
  readonly columnId: string;
} | {
  readonly type: "dragLeaveColumn";
  readonly columnId: string;
} | {
  readonly type: "dragEnd";
} | {
  readonly type: "drop";
};

KanbanDragState

type

Duplicate of frozen `KanbanDragState`.

DeclarationView source
KanbanDragStatets
type KanbanDragState = {
  readonly draggingId: string | null;
  readonly overColumn: string | null;
};
Name
Kind
Type
Requirement
draggingId
property
string | null
required
overColumn
property
string | null
required
Name
draggingId
Kind
property
Type
string | null
Requirement
required
Name
overColumn
Kind
property
Type
string | null
Requirement
required

KanbanDragStatus

type
DeclarationView source
KanbanDragStatusts
type KanbanDragStatus = "idle" | "grabbed" | "dragging";

KanbanEvent

type
DeclarationView source
KanbanEventts
type KanbanEvent = {
  readonly type: "POINTER_DRAG_START";
  readonly cardId: string;
} | {
  readonly type: "POINTER_DRAG_OVER";
  readonly columnId: string;
} | {
  readonly type: "POINTER_DRAG_LEAVE";
  readonly columnId: string;
} | {
  readonly type: "POINTER_DROP";
  readonly columnId: string;
  readonly reason: KanbanMoveReason;
} | {
  readonly type: "POINTER_DRAG_END";
} | {
  readonly type: "KEYBOARD_GRAB";
  readonly cardId: string;
} | {
  readonly type: "KEYBOARD_MOVE";
  readonly toColumnId: string;
} | {
  readonly type: "KEYBOARD_DROP";
  readonly reason: "keyboard";
} | {
  readonly type: "KEYBOARD_CANCEL";
} | {
  readonly type: "MOVE";
  readonly cardId: string;
  readonly toColumnId: string;
  readonly reason: KanbanMoveReason;
} | SelectionEvent;

KanbanInput

type
DeclarationView source
KanbanInputts
type KanbanInput = {
  readonly cards?: readonly KanbanPlacement[];
  readonly defaultCards?: readonly KanbanPlacement[];
  readonly columnIds?: readonly string[];
  readonly disableDrag?: boolean;
  readonly selectionMode?: SelectionMode;
  readonly selectedIds?: SelectionValue;
  readonly defaultSelectedIds?: SelectionValue;
  readonly orderedIds?: readonly string[];
  readonly disabledIds?: readonly string[];
};
Name
Kind
Type
Requirement
cards
property
readonly KanbanPlacement[]
optional
columnIds
property
readonly string[]
optional
defaultCards
property
readonly KanbanPlacement[]
optional
defaultSelectedIds
property
SelectionValue
optional
disabledIds
property
readonly string[]
optional
disableDrag
property
boolean
optional
orderedIds
property
readonly string[]
optional
selectedIds
property
SelectionValue
optional
selectionMode
property
SelectionMode
optional
Name
cards
Kind
property
Type
readonly KanbanPlacement[]
Requirement
optional
Name
columnIds
Kind
property
Type
readonly string[]
Requirement
optional
Name
defaultCards
Kind
property
Type
readonly KanbanPlacement[]
Requirement
optional
Name
defaultSelectedIds
Kind
property
Type
SelectionValue
Requirement
optional
Name
disabledIds
Kind
property
Type
readonly string[]
Requirement
optional
Name
disableDrag
Kind
property
Type
boolean
Requirement
optional
Name
orderedIds
Kind
property
Type
readonly string[]
Requirement
optional
Name
selectedIds
Kind
property
Type
SelectionValue
Requirement
optional
Name
selectionMode
Kind
property
Type
SelectionMode
Requirement
optional

kanbanMachine

value
DeclarationView source
kanbanMachinets
export declare const kanbanMachine: KanbanMachine;

KanbanMachine

type
DeclarationView source
KanbanMachinets
type KanbanMachine = Machine<KanbanInput, KanbanStateValue, KanbanContext, KanbanEvent, KanbanCommand>;

KanbanMachineState

type
DeclarationView source
KanbanMachineStatets
type KanbanMachineState = MachineState<KanbanStateValue, KanbanContext>;

KanbanMoveCommand

type
DeclarationView source
KanbanMoveCommandts
type KanbanMoveCommand = {
  readonly type: "CARD_MOVE_REQUEST";
  readonly cardId: string;
  readonly fromColumnId: string;
  readonly toColumnId: string;
  readonly reason: KanbanMoveReason;
};
Name
Kind
Type
Requirement
cardId
property
string
required
fromColumnId
property
string
required
reason
property
KanbanMoveReason
required
toColumnId
property
string
required
type
property
"CARD_MOVE_REQUEST"
required
Name
cardId
Kind
property
Type
string
Requirement
required
Name
fromColumnId
Kind
property
Type
string
Requirement
required
Name
reason
Kind
property
Type
KanbanMoveReason
Requirement
required
Name
toColumnId
Kind
property
Type
string
Requirement
required
Name
type
Kind
property
Type
"CARD_MOVE_REQUEST"
Requirement
required

KanbanMoveDetail

type
DeclarationView source
KanbanMoveDetailts
type KanbanMoveDetail = {
  readonly cardId: string;
  readonly fromColumnId: string;
  readonly toColumnId: string;
  readonly reason: KanbanMoveReason;
};
Name
Kind
Type
Requirement
cardId
property
string
required
fromColumnId
property
string
required
reason
property
KanbanMoveReason
required
toColumnId
property
string
required
Name
cardId
Kind
property
Type
string
Requirement
required
Name
fromColumnId
Kind
property
Type
string
Requirement
required
Name
reason
Kind
property
Type
KanbanMoveReason
Requirement
required
Name
toColumnId
Kind
property
Type
string
Requirement
required

KanbanMoveReason

type
DeclarationView source
KanbanMoveReasonts
type KanbanMoveReason = "pointer" | "keyboard" | "programmatic";

KanbanPlacement

type
DeclarationView source
KanbanPlacementts
type KanbanPlacement = {
  readonly cardId: string;
  readonly columnId: string;
};
Name
Kind
Type
Requirement
cardId
property
string
required
columnId
property
string
required
Name
cardId
Kind
property
Type
string
Requirement
required
Name
columnId
Kind
property
Type
string
Requirement
required

kanbanReplaySequence

value
DeclarationView source
kanbanReplaySequencets
export declare const kanbanReplaySequence: readonly KanbanEvent[];

kanbanSelectors

value
DeclarationView source
kanbanSelectorsts
export declare const kanbanSelectors: {
  mode: (snapshot: KanbanSnapshot) => BindingMode;
  placements: (snapshot: KanbanSnapshot) => readonly KanbanPlacement[];
  dragStatus: (snapshot: KanbanSnapshot) => KanbanDragStatus;
  sourceCardId: (snapshot: KanbanSnapshot) => string | null;
  sourceColumnId: (snapshot: KanbanSnapshot) => string | null;
  targetColumnId: (snapshot: KanbanSnapshot) => string | null;
  draggingId: (snapshot: KanbanSnapshot) => string | null;
  overColumn: (snapshot: KanbanSnapshot) => string | null;
  selectedIds: (snapshot: KanbanSnapshot) => SelectionValue;
  selection: (snapshot: KanbanSnapshot) => SelectionMachineState;
  cardsInColumn: (snapshot: KanbanSnapshot, columnId: string) => readonly KanbanPlacement[];
};
Name
Kind
Type
Requirement
cardsInColumn
property
(snapshot: KanbanSnapshot, columnId: string) => readonly KanbanPlacement[]
required
draggingId
property
(snapshot: KanbanSnapshot) => string | null
required
dragStatus
property
(snapshot: KanbanSnapshot) => KanbanDragStatus
required
mode
property
(snapshot: KanbanSnapshot) => BindingMode
required
overColumn
property
(snapshot: KanbanSnapshot) => string | null
required
placements
property
(snapshot: KanbanSnapshot) => readonly KanbanPlacement[]
required
selectedIds
property
(snapshot: KanbanSnapshot) => SelectionValue
required
selection
property
(snapshot: KanbanSnapshot) => SelectionMachineState
required
sourceCardId
property
(snapshot: KanbanSnapshot) => string | null
required
sourceColumnId
property
(snapshot: KanbanSnapshot) => string | null
required
targetColumnId
property
(snapshot: KanbanSnapshot) => string | null
required
Name
cardsInColumn
Kind
property
Type
(snapshot: KanbanSnapshot, columnId: string) => readonly KanbanPlacement[]
Requirement
required
Name
draggingId
Kind
property
Type
(snapshot: KanbanSnapshot) => string | null
Requirement
required
Name
dragStatus
Kind
property
Type
(snapshot: KanbanSnapshot) => KanbanDragStatus
Requirement
required
Name
mode
Kind
property
Type
(snapshot: KanbanSnapshot) => BindingMode
Requirement
required
Name
overColumn
Kind
property
Type
(snapshot: KanbanSnapshot) => string | null
Requirement
required
Name
placements
Kind
property
Type
(snapshot: KanbanSnapshot) => readonly KanbanPlacement[]
Requirement
required
Name
selectedIds
Kind
property
Type
(snapshot: KanbanSnapshot) => SelectionValue
Requirement
required
Name
selection
Kind
property
Type
(snapshot: KanbanSnapshot) => SelectionMachineState
Requirement
required
Name
sourceCardId
Kind
property
Type
(snapshot: KanbanSnapshot) => string | null
Requirement
required
Name
sourceColumnId
Kind
property
Type
(snapshot: KanbanSnapshot) => string | null
Requirement
required
Name
targetColumnId
Kind
property
Type
(snapshot: KanbanSnapshot) => string | null
Requirement
required

KanbanSnapshot

type
DeclarationView source
KanbanSnapshotts
type KanbanSnapshot = Snapshot<KanbanStateValue, KanbanContext>;

KanbanStateValue

type
DeclarationView source
KanbanStateValuets
type KanbanStateValue = "active";

moveKanbanPlacement

function

Duplicate of frozen `moveCard` over placements (cardId, not full card objects).

DeclarationView source
moveKanbanPlacementts
declare function moveKanbanPlacement(placements: readonly KanbanPlacement[], cardId: string, toColumnId: string): readonly KanbanPlacement[];
Name
Kind
Type
Requirement
placements
parameter
readonly KanbanPlacement[]
required
cardId
parameter
string
required
toColumnId
parameter
string
required
return
return value
readonly KanbanPlacement[]
n/a
Name
placements
Kind
parameter
Type
readonly KanbanPlacement[]
Requirement
required
Name
cardId
Kind
parameter
Type
string
Requirement
required
Name
toColumnId
Kind
parameter
Type
string
Requirement
required
Name
return
Kind
return value
Type
readonly KanbanPlacement[]
Requirement
n/a

placementsByColumn

function

Duplicate of frozen `cardsByColumn`.

DeclarationView source
placementsByColumnts
declare function placementsByColumn(placements: readonly KanbanPlacement[], columnId: string): readonly KanbanPlacement[];
Name
Kind
Type
Requirement
placements
parameter
readonly KanbanPlacement[]
required
columnId
parameter
string
required
return
return value
readonly KanbanPlacement[]
n/a
Name
placements
Kind
parameter
Type
readonly KanbanPlacement[]
Requirement
required
Name
columnId
Kind
parameter
Type
string
Requirement
required
Name
return
Kind
return value
Type
readonly KanbanPlacement[]
Requirement
n/a

projectKanbanPlacements

function
DeclarationView source
projectKanbanPlacementsts
declare function projectKanbanPlacements(cards: readonly {
  readonly id: string;
  readonly columnId: string;
}[]): readonly KanbanPlacement[];
Name
Kind
Type
Requirement
cards
parameter
readonly { readonly id: string; readonly columnId: string; }[]
required
return
return value
readonly KanbanPlacement[]
n/a
Name
cards
Kind
parameter
Type
readonly { readonly id: string; readonly columnId: string; }[]
Requirement
required
Name
return
Kind
return value
Type
readonly KanbanPlacement[]
Requirement
n/a

reduceKanbanDrag

function

Duplicate of frozen `reduceKanbanDrag`.

DeclarationView source
reduceKanbanDragts
declare function reduceKanbanDrag(state: KanbanDragState, action: KanbanDragAction): KanbanDragState;
Name
Kind
Type
Requirement
state
parameter
KanbanDragState
required
action
parameter
KanbanDragAction
required
return
return value
KanbanDragState
n/a
Name
state
Kind
parameter
Type
KanbanDragState
Requirement
required
Name
action
Kind
parameter
Type
KanbanDragAction
Requirement
required
Name
return
Kind
return value
Type
KanbanDragState
Requirement
n/a

sameKanbanPlacements

function
DeclarationView source
sameKanbanPlacementsts
declare function sameKanbanPlacements(left: readonly KanbanPlacement[], right: readonly KanbanPlacement[]): boolean;
Name
Kind
Type
Requirement
left
parameter
readonly KanbanPlacement[]
required
right
parameter
readonly KanbanPlacement[]
required
return
return value
boolean
n/a
Name
left
Kind
parameter
Type
readonly KanbanPlacement[]
Requirement
required
Name
right
Kind
parameter
Type
readonly KanbanPlacement[]
Requirement
required
Name
return
Kind
return value
Type
boolean
Requirement
n/a

sameSelectionIds

function
DeclarationView source
sameSelectionIdsts
declare function sameSelectionIds(left: SelectionValue, right: SelectionValue): boolean;
Name
Kind
Type
Requirement
left
parameter
SelectionValue
required
right
parameter
SelectionValue
required
return
return value
boolean
n/a
Name
left
Kind
parameter
Type
SelectionValue
Requirement
required
Name
right
Kind
parameter
Type
SelectionValue
Requirement
required
Name
return
Kind
return value
Type
boolean
Requirement
n/a

SelectionChangeDetail

type
DeclarationView source
SelectionChangeDetailts
type SelectionChangeDetail = {
  readonly selectedIds: SelectionValue;
  readonly reason: SelectionChangeReason;
};
Name
Kind
Type
Requirement
reason
property
SelectionChangeReason
required
selectedIds
property
SelectionValue
required
Name
reason
Kind
property
Type
SelectionChangeReason
Requirement
required
Name
selectedIds
Kind
property
Type
SelectionValue
Requirement
required

SelectionChangeReason

type
DeclarationView source
SelectionChangeReasonts
type SelectionChangeReason = "pointer" | "keyboard" | "programmatic";

SelectionCommand

type
DeclarationView source
SelectionCommandts
type SelectionCommand = CommandObject & {
  readonly type: "SELECTION_CHANGE_REQUEST";
  readonly selectedIds: SelectionValue;
  readonly reason: SelectionChangeReason;
};
Name
Kind
Type
Requirement
reason
property
SelectionChangeReason
required
selectedIds
property
SelectionValue
required
type
property
string
required
Name
reason
Kind
property
Type
SelectionChangeReason
Requirement
required
Name
selectedIds
Kind
property
Type
SelectionValue
Requirement
required
Name
type
Kind
property
Type
string
Requirement
required

selectionInputFromKanban

function
DeclarationView source
selectionInputFromKanbants
declare function selectionInputFromKanban(input: KanbanInput): SelectionInput;
Name
Kind
Type
Requirement
input
parameter
KanbanInput
required
return
return value
SelectionInput
n/a
Name
input
Kind
parameter
Type
KanbanInput
Requirement
required
Name
return
Kind
return value
Type
SelectionInput
Requirement
n/a

selectionMachine

value
DeclarationView source
selectionMachinets
export declare const selectionMachine: SelectionMachine;

SelectionMode

type
DeclarationView source
SelectionModets
type SelectionMode = "none" | "single" | "multiple";

selectionSelectors

value
DeclarationView source
selectionSelectorsts
export declare const selectionSelectors: {
  selectedIds: (snapshot: SelectionSnapshot) => SelectionValue;
  anchorId: (snapshot: SelectionSnapshot) => string | null;
  bindingMode: (snapshot: SelectionSnapshot) => BindingMode;
  isSelected: (snapshot: SelectionSnapshot, id: string) => boolean;
};
Name
Kind
Type
Requirement
anchorId
property
(snapshot: SelectionSnapshot) => string | null
required
bindingMode
property
(snapshot: SelectionSnapshot) => BindingMode
required
isSelected
property
(snapshot: SelectionSnapshot, id: string) => boolean
required
selectedIds
property
(snapshot: SelectionSnapshot) => SelectionValue
required
Name
anchorId
Kind
property
Type
(snapshot: SelectionSnapshot) => string | null
Requirement
required
Name
bindingMode
Kind
property
Type
(snapshot: SelectionSnapshot) => BindingMode
Requirement
required
Name
isSelected
Kind
property
Type
(snapshot: SelectionSnapshot, id: string) => boolean
Requirement
required
Name
selectedIds
Kind
property
Type
(snapshot: SelectionSnapshot) => SelectionValue
Requirement
required

SelectionValue

type
DeclarationView source
SelectionValuets
type SelectionValue = readonly string[];