@monolith-forensics/monolith-ui 1.3.111 → 1.3.112-dev.1

package/dist/Kanban/Kanban.d.ts

@@ -0,0 +1,2 @@
+import { KanbanGroupKey, KanbanProps } from "./types";
+export declare const Kanban: <TCard, TGroup extends KanbanGroupKey>({ cards, getCardId, getCardGroup, getCardOrder, renderCard, onCardsReorder, groupOrder, groupLabels, renderColumnHeader, columnWidth, columnGap, cardGap, columnHeight, estimatedCardHeight, overscanCount, orderStep, minOrderGap, emptyColumnPlaceholder, className, }: KanbanProps<TCard, TGroup>) => import("react/jsx-runtime").JSX.Element;

package/dist/Kanban/Kanban.js

@@ -0,0 +1,234 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { DndContext, DragOverlay, KeyboardSensor, MeasuringStrategy, PointerSensor, closestCenter, getFirstCollision, pointerWithin, rectIntersection, useSensor, useSensors, } from "@dnd-kit/core";
+import { sortableKeyboardCoordinates } from "@dnd-kit/sortable";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { KanbanColumn } from "./KanbanColumn";
+import { findContainer, fromCardToken, isCardToken, isGroupToken, moveCard, moveCardToInsertIndex, } from "./board";
+import { dropAnimation } from "./constants";
+import { CardContainer, Board } from "./styles";
+import { useKanbanBoardData } from "./useKanbanBoardData";
+import { useKanbanRowHeights } from "./useKanbanRowHeights";
+import { DEFAULT_MIN_ORDER_GAP, DEFAULT_ORDER_STEP, calculateOrderValue, } from "./utils";
+export const Kanban = ({ cards, getCardId, getCardGroup, getCardOrder, renderCard, onCardsReorder, groupOrder, groupLabels, renderColumnHeader, columnWidth = 320, columnGap = 12, cardGap = 8, columnHeight, estimatedCardHeight = 100, overscanCount = 4, orderStep = DEFAULT_ORDER_STEP, minOrderGap = DEFAULT_MIN_ORDER_GAP, emptyColumnPlaceholder, className, }) => {
+    var _a, _b;
+    const [activeCardToken, setActiveCardToken] = useState(null);
+    const [activeOverlayWidth, setActiveOverlayWidth] = useState(null);
+    const [projectedBoard, setProjectedBoard] = useState(null);
+    const activeOriginContainerRef = useRef(null);
+    const lastOverId = useRef(null);
+    const recentlyMovedToNewContainer = useRef(false);
+    const { cardByToken, cardIdByToken, groupValueByToken, baseBoard } = useKanbanBoardData({
+        cards,
+        getCardId,
+        getCardGroup,
+        getCardOrder,
+        groupOrder,
+    });
+    const { columnHeights, listRefMap, onRowMeasured } = useKanbanRowHeights();
+    const board = projectedBoard !== null && projectedBoard !== void 0 ? projectedBoard : baseBoard;
+    const sensors = useSensors(useSensor(PointerSensor, {
+        activationConstraint: { distance: 6 },
+    }), useSensor(KeyboardSensor, {
+        coordinateGetter: sortableKeyboardCoordinates,
+    }));
+    const collisionDetectionStrategy = useCallback((args) => {
+        var _a, _b;
+        if (activeCardToken) {
+            const pointerIntersections = pointerWithin(args);
+            const intersections = pointerIntersections.length > 0
+                ? pointerIntersections
+                : rectIntersection(args);
+            let overId = getFirstCollision(intersections, "id");
+            if (overId != null) {
+                const overToken = String(overId);
+                if (isGroupToken(overToken) && ((_a = board[overToken]) === null || _a === void 0 ? void 0 : _a.length) > 0) {
+                    const closestCard = (_b = closestCenter(Object.assign(Object.assign({}, args), { droppableContainers: args.droppableContainers.filter((container) => board[overToken].includes(String(container.id))) }))[0]) === null || _b === void 0 ? void 0 : _b.id;
+                    if (closestCard) {
+                        overId = closestCard;
+                    }
+                }
+                lastOverId.current = overId;
+                return [{ id: overId }];
+            }
+            if (recentlyMovedToNewContainer.current) {
+                lastOverId.current = activeCardToken;
+            }
+            return lastOverId.current ? [{ id: lastOverId.current }] : [];
+        }
+        return closestCenter(args);
+    }, [activeCardToken, board]);
+    useEffect(() => {
+        requestAnimationFrame(() => {
+            recentlyMovedToNewContainer.current = false;
+        });
+    }, [board]);
+    const handleDragStart = useCallback(({ active }) => {
+        var _a, _b;
+        const activeToken = String(active.id);
+        if (!isCardToken(activeToken)) {
+            return;
+        }
+        setActiveCardToken(activeToken);
+        setActiveOverlayWidth((_b = (_a = active.rect.current.initial) === null || _a === void 0 ? void 0 : _a.width) !== null && _b !== void 0 ? _b : null);
+        setProjectedBoard(baseBoard);
+        activeOriginContainerRef.current = findContainer(baseBoard, activeToken);
+    }, [baseBoard]);
+    const handleDragOver = useCallback(({ active, over }) => {
+        if (!over) {
+            return;
+        }
+        const activeToken = String(active.id);
+        if (!isCardToken(activeToken)) {
+            return;
+        }
+        setProjectedBoard((currentBoard) => {
+            var _a;
+            const source = currentBoard !== null && currentBoard !== void 0 ? currentBoard : baseBoard;
+            const sourceContainer = findContainer(source, activeToken);
+            const overToken = String(over.id);
+            const overContainer = isGroupToken(overToken) && source[overToken]
+                ? overToken
+                : findContainer(source, overToken);
+            if (!sourceContainer || !overContainer) {
+                return source;
+            }
+            if (sourceContainer !== overContainer) {
+                recentlyMovedToNewContainer.current = true;
+                const overItems = (_a = source[overContainer]) !== null && _a !== void 0 ? _a : [];
+                const overIndex = overItems.indexOf(overToken);
+                const isPointerBelowOverCard = overIndex >= 0 &&
+                    active.rect.current.translated != null &&
+                    over.rect != null &&
+                    active.rect.current.translated.top >
+                        over.rect.top + over.rect.height;
+                const insertIndex = isGroupToken(overToken)
+                    ? overItems.length
+                    : overIndex >= 0
+                        ? overIndex + (isPointerBelowOverCard ? 1 : 0)
+                        : overItems.length;
+                return moveCardToInsertIndex(source, activeToken, sourceContainer, overContainer, insertIndex);
+            }
+            return moveCard(source, activeToken, over.id);
+        });
+    }, [baseBoard]);
+    const handleDragCancel = useCallback(() => {
+        setActiveCardToken(null);
+        setActiveOverlayWidth(null);
+        setProjectedBoard(null);
+        activeOriginContainerRef.current = null;
+    }, []);
+    const resetDragState = useCallback(() => {
+        setActiveCardToken(null);
+        setActiveOverlayWidth(null);
+        setProjectedBoard(null);
+        activeOriginContainerRef.current = null;
+    }, []);
+    const handleDragEnd = useCallback(({ active, over }) => {
+        var _a, _b, _c;
+        const activeToken = String(active.id);
+        if (!isCardToken(activeToken) || !over) {
+            resetDragState();
+            return;
+        }
+        const activeCard = cardByToken.get(activeToken);
+        if (!activeCard) {
+            resetDragState();
+            return;
+        }
+        const movedBoard = projectedBoard !== null && projectedBoard !== void 0 ? projectedBoard : moveCard(baseBoard, activeToken, over.id);
+        const fromContainer = (_a = activeOriginContainerRef.current) !== null && _a !== void 0 ? _a : findContainer(baseBoard, activeToken);
+        const toContainer = findContainer(movedBoard, activeToken);
+        if (!fromContainer || !toContainer) {
+            resetDragState();
+            return;
+        }
+        const fromItems = (_b = baseBoard[fromContainer]) !== null && _b !== void 0 ? _b : [];
+        const toItems = (_c = movedBoard[toContainer]) !== null && _c !== void 0 ? _c : [];
+        const fromIndex = fromItems.indexOf(activeToken);
+        const toIndex = toItems.indexOf(activeToken);
+        if (fromContainer === toContainer && fromIndex === toIndex) {
+            resetDragState();
+            return;
+        }
+        const previousToken = toIndex > 0 ? toItems[toIndex - 1] : null;
+        const nextToken = toIndex < toItems.length - 1 ? toItems[toIndex + 1] : null;
+        const previousCard = previousToken
+            ? cardByToken.get(previousToken)
+            : null;
+        const nextCard = nextToken ? cardByToken.get(nextToken) : null;
+        const previousOrder = previousCard ? getCardOrder(previousCard) : null;
+        const nextOrder = nextCard ? getCardOrder(nextCard) : null;
+        const fromGroup = groupValueByToken.get(fromContainer);
+        const toGroup = groupValueByToken.get(toContainer);
+        if (fromGroup == null || toGroup == null) {
+            resetDragState();
+            return;
+        }
+        const { order, needsRebalance } = calculateOrderValue({
+            previousOrder,
+            nextOrder,
+            step: orderStep,
+            minGap: minOrderGap,
+        });
+        const change = {
+            movedCard: activeCard,
+            movedCardId: fromCardToken(activeToken),
+            fromGroup,
+            toGroup,
+            newOrder: order,
+            beforeCardId: previousToken ? fromCardToken(previousToken) : null,
+            afterCardId: nextToken ? fromCardToken(nextToken) : null,
+            needsRebalance,
+            updatedCards: [
+                {
+                    id: fromCardToken(activeToken),
+                    group: toGroup,
+                    order,
+                },
+            ],
+        };
+        onCardsReorder(change);
+        resetDragState();
+    }, [
+        baseBoard,
+        cardByToken,
+        getCardOrder,
+        groupValueByToken,
+        minOrderGap,
+        onCardsReorder,
+        orderStep,
+        projectedBoard,
+        resetDragState,
+    ]);
+    const activeCard = activeCardToken ? cardByToken.get(activeCardToken) : null;
+    const activeContainer = activeCardToken
+        ? findContainer(board, activeCardToken)
+        : null;
+    const activeGroup = activeContainer
+        ? ((_a = groupValueByToken.get(activeContainer)) !== null && _a !== void 0 ? _a : null)
+        : null;
+    const activeIndex = activeCardToken && activeContainer
+        ? ((_b = board[activeContainer]) !== null && _b !== void 0 ? _b : []).indexOf(activeCardToken)
+        : -1;
+    return (_jsxs(DndContext, { sensors: sensors, collisionDetection: collisionDetectionStrategy, measuring: {
+            droppable: {
+                strategy: MeasuringStrategy.Always,
+            },
+        }, onDragStart: handleDragStart, onDragOver: handleDragOver, onDragEnd: handleDragEnd, onDragCancel: handleDragCancel, children: [_jsx(Board, { className: className, "$columnGap": columnGap, children: Object.keys(board).map((columnToken) => {
+                    var _a, _b;
+                    const columnItems = (_a = board[columnToken]) !== null && _a !== void 0 ? _a : [];
+                    const groupValue = groupValueByToken.get(columnToken);
+                    if (groupValue == null) {
+                        return null;
+                    }
+                    return (_jsx(KanbanColumn, { columnToken: columnToken, groupValue: groupValue, groupLabel: groupLabels === null || groupLabels === void 0 ? void 0 : groupLabels[String(groupValue)], renderColumnHeader: renderColumnHeader, itemTokens: columnItems, cardByToken: cardByToken, cardIdByToken: cardIdByToken, groupByToken: groupValueByToken, renderCard: renderCard, onMeasure: onRowMeasured, rowHeights: (_b = columnHeights[columnToken]) !== null && _b !== void 0 ? _b : {}, listRefMap: listRefMap, columnWidth: columnWidth, columnHeight: columnHeight, cardGap: cardGap, estimatedCardHeight: estimatedCardHeight, overscanCount: overscanCount, emptyColumnPlaceholder: emptyColumnPlaceholder }, columnToken));
+                }) }), _jsx(DragOverlay, { adjustScale: false, dropAnimation: dropAnimation, children: activeCard && activeGroup != null ? (_jsx("div", { style: { width: activeOverlayWidth !== null && activeOverlayWidth !== void 0 ? activeOverlayWidth : undefined }, children: _jsx(CardContainer, { "$isDragging": true, "$isDragOverlay": true, children: renderCard({
+                            card: activeCard,
+                            cardId: getCardId(activeCard),
+                            group: activeGroup,
+                            index: activeIndex,
+                            isDragging: true,
+                            isSorting: true,
+                            isDragOverlay: true,
+                        }) }) })) : null })] }));
+};

package/dist/Kanban/KanbanColumn.d.ts

@@ -0,0 +1,24 @@
+import { MutableRefObject, ReactNode } from "react";
+import { VariableSizeList } from "react-window";
+import { KanbanGroupKey, RenderCardArgs } from "./types";
+export interface KanbanColumnProps<TCard, TGroup extends KanbanGroupKey> {
+    columnToken: string;
+    groupValue: TGroup;
+    groupLabel?: ReactNode;
+    renderColumnHeader?: (group: TGroup, cardCount: number) => ReactNode;
+    itemTokens: string[];
+    cardByToken: Map<string, TCard>;
+    cardIdByToken: Map<string, string>;
+    groupByToken: Map<string, TGroup>;
+    renderCard: (args: RenderCardArgs<TCard, TGroup>) => ReactNode;
+    onMeasure: (columnToken: string, cardToken: string, index: number, height: number) => void;
+    rowHeights: Record<string, number>;
+    listRefMap: MutableRefObject<Record<string, VariableSizeList | null>>;
+    columnWidth: number;
+    columnHeight?: number;
+    cardGap: number;
+    estimatedCardHeight: number;
+    overscanCount: number;
+    emptyColumnPlaceholder?: ReactNode;
+}
+export declare const KanbanColumn: <TCard, TGroup extends KanbanGroupKey>({ columnToken, groupValue, groupLabel, renderColumnHeader, itemTokens, cardByToken, cardIdByToken, groupByToken, renderCard, onMeasure, rowHeights, listRefMap, columnWidth, columnHeight, cardGap, estimatedCardHeight, overscanCount, emptyColumnPlaceholder, }: KanbanColumnProps<TCard, TGroup>) => import("react/jsx-runtime").JSX.Element;

package/dist/Kanban/KanbanColumn.js

@@ -0,0 +1,118 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useDroppable } from "@dnd-kit/core";
+import { SortableContext, verticalListSortingStrategy } from "@dnd-kit/sortable";
+import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, } from "react";
+import { useOverlayScrollbars } from "overlayscrollbars-react";
+import AutoSizer from "react-virtualized-auto-sizer";
+import { VariableSizeList } from "react-window";
+import { Column, ColumnBody, ColumnCount, ColumnHeader, EmptyColumn, } from "./styles";
+import { MemoizedSortableVirtualRow } from "./virtualRow";
+export const KanbanColumn = ({ columnToken, groupValue, groupLabel, renderColumnHeader, itemTokens, cardByToken, cardIdByToken, groupByToken, renderCard, onMeasure, rowHeights, listRefMap, columnWidth, columnHeight, cardGap, estimatedCardHeight, overscanCount, emptyColumnPlaceholder, }) => {
+    const { setNodeRef, isOver } = useDroppable({
+        id: columnToken,
+        data: {
+            type: "column",
+        },
+    });
+    const cardCount = itemTokens.length;
+    const rowData = useMemo(() => ({
+        itemTokens,
+        columnToken,
+        cardByToken,
+        cardIdByToken,
+        groupByToken,
+        renderCard,
+        onMeasure,
+        cardGap,
+    }), [
+        cardByToken,
+        cardIdByToken,
+        columnToken,
+        groupByToken,
+        itemTokens,
+        onMeasure,
+        renderCard,
+        cardGap,
+    ]);
+    const previousOrderTokensRef = useRef([]);
+    const scrollTargetRef = useRef(null);
+    const scrollViewportRef = useRef(null);
+    const [initializeScrollbars, getScrollbarsInstance] = useOverlayScrollbars({
+        options: {
+            overflow: {
+                x: "hidden",
+                y: "scroll",
+            },
+            scrollbars: {
+                autoHide: "scroll",
+                autoHideDelay: 500,
+            },
+        },
+    });
+    const initializeColumnScrollbars = useCallback(() => {
+        var _a;
+        const target = scrollTargetRef.current;
+        const viewport = scrollViewportRef.current;
+        if (!target || !viewport || cardCount === 0) {
+            (_a = getScrollbarsInstance()) === null || _a === void 0 ? void 0 : _a.destroy();
+            return;
+        }
+        initializeScrollbars({
+            target,
+            elements: {
+                viewport,
+            },
+        });
+    }, [cardCount, getScrollbarsInstance, initializeScrollbars]);
+    const setScrollTargetRef = useCallback((node) => {
+        scrollTargetRef.current = node;
+        if (node) {
+            node.style.overflowX = "hidden";
+        }
+        initializeColumnScrollbars();
+    }, [initializeColumnScrollbars]);
+    const setScrollViewportRef = useCallback((node) => {
+        scrollViewportRef.current = node;
+        if (node) {
+            node.style.overflowX = "hidden";
+        }
+        initializeColumnScrollbars();
+    }, [initializeColumnScrollbars]);
+    useLayoutEffect(() => {
+        var _a;
+        const previousTokens = previousOrderTokensRef.current;
+        const currentTokens = rowData.itemTokens;
+        if (previousTokens.length === currentTokens.length &&
+            previousTokens.every((token, index) => token === currentTokens[index])) {
+            return;
+        }
+        if (previousTokens.length === 0) {
+            previousOrderTokensRef.current = [...currentTokens];
+            return;
+        }
+        const maxLength = Math.max(previousTokens.length, currentTokens.length);
+        let firstChangedIndex = 0;
+        for (let index = 0; index < maxLength; index += 1) {
+            if (previousTokens[index] !== currentTokens[index]) {
+                firstChangedIndex = index;
+                break;
+            }
+        }
+        previousOrderTokensRef.current = [...currentTokens];
+        (_a = listRefMap.current[columnToken]) === null || _a === void 0 ? void 0 : _a.resetAfterIndex(firstChangedIndex);
+    }, [columnToken, listRefMap, rowData.itemTokens]);
+    useEffect(() => {
+        initializeColumnScrollbars();
+        return () => {
+            var _a;
+            (_a = getScrollbarsInstance()) === null || _a === void 0 ? void 0 : _a.destroy();
+        };
+    }, [getScrollbarsInstance, initializeColumnScrollbars]);
+    return (_jsxs(Column, { ref: setNodeRef, "$width": columnWidth, "$isOver": isOver, children: [_jsx(ColumnHeader, { children: renderColumnHeader ? (renderColumnHeader(groupValue, cardCount)) : (_jsxs(_Fragment, { children: [_jsx("span", { children: groupLabel !== null && groupLabel !== void 0 ? groupLabel : String(groupValue) }), _jsx(ColumnCount, { children: cardCount })] })) }), _jsx(SortableContext, { items: rowData.itemTokens, strategy: verticalListSortingStrategy, children: _jsx(ColumnBody, { ref: setScrollTargetRef, "$height": columnHeight, children: cardCount === 0 ? (_jsx(EmptyColumn, { children: emptyColumnPlaceholder !== null && emptyColumnPlaceholder !== void 0 ? emptyColumnPlaceholder : "Drop cards here" })) : (_jsx(AutoSizer, { children: ({ width, height }) => (_jsx(VariableSizeList, { ref: (node) => {
+                                listRefMap.current[columnToken] = node;
+                            }, outerRef: setScrollViewportRef, width: width, height: height, itemCount: cardCount, overscanCount: overscanCount, itemData: rowData, itemKey: (index, data) => data.itemTokens[index], itemSize: (index) => {
+                                var _a;
+                                const token = rowData.itemTokens[index];
+                                return (_a = rowHeights[token]) !== null && _a !== void 0 ? _a : estimatedCardHeight + cardGap;
+                            }, children: MemoizedSortableVirtualRow })) })) }) })] }));
+};

package/dist/Kanban/board.d.ts

@@ -0,0 +1,12 @@
+import { UniqueIdentifier } from "@dnd-kit/core";
+import { KanbanGroupKey } from "./types";
+export type BoardState = Record<string, string[]>;
+export type HeightMap = Record<string, Record<string, number>>;
+export declare const isCardToken: (value: string) => boolean;
+export declare const isGroupToken: (value: string) => boolean;
+export declare const toCardToken: (cardId: string) => string;
+export declare const toGroupToken: (group: KanbanGroupKey) => string;
+export declare const fromCardToken: (cardToken: string) => string;
+export declare function findContainer(board: BoardState, id: UniqueIdentifier | null): string | null;
+export declare function moveCard(board: BoardState, activeCardToken: string, overId: UniqueIdentifier | null): BoardState;
+export declare function moveCardToInsertIndex(board: BoardState, activeCardToken: string, activeContainer: string, overContainer: string, insertIndex: number): BoardState;

package/dist/Kanban/board.js

@@ -0,0 +1,84 @@
+import { arrayMove } from "@dnd-kit/sortable";
+import { CARD_PREFIX, GROUP_PREFIX } from "./constants";
+export const isCardToken = (value) => value.startsWith(CARD_PREFIX);
+export const isGroupToken = (value) => value.startsWith(GROUP_PREFIX);
+export const toCardToken = (cardId) => `${CARD_PREFIX}${cardId}`;
+export const toGroupToken = (group) => `${GROUP_PREFIX}${String(group)}`;
+export const fromCardToken = (cardToken) => cardToken.replace(CARD_PREFIX, "");
+export function findContainer(board, id) {
+    if (id == null) {
+        return null;
+    }
+    const targetId = String(id);
+    if (isGroupToken(targetId) && board[targetId]) {
+        return targetId;
+    }
+    const groupTokens = Object.keys(board);
+    for (const groupToken of groupTokens) {
+        if (board[groupToken].includes(targetId)) {
+            return groupToken;
+        }
+    }
+    return null;
+}
+export function moveCard(board, activeCardToken, overId) {
+    if (overId == null) {
+        return board;
+    }
+    const overToken = String(overId);
+    const activeContainer = findContainer(board, activeCardToken);
+    const overContainer = isGroupToken(overToken) && board[overToken]
+        ? overToken
+        : findContainer(board, overToken);
+    if (!activeContainer || !overContainer) {
+        return board;
+    }
+    const activeItems = board[activeContainer];
+    const overItems = board[overContainer];
+    const activeIndex = activeItems.indexOf(activeCardToken);
+    if (activeIndex === -1) {
+        return board;
+    }
+    if (activeContainer === overContainer) {
+        if (isGroupToken(overToken)) {
+            const targetIndex = Math.max(activeItems.length - 1, 0);
+            if (activeIndex === targetIndex) {
+                return board;
+            }
+            return Object.assign(Object.assign({}, board), { [activeContainer]: arrayMove(activeItems, activeIndex, targetIndex) });
+        }
+        const overIndex = overItems.indexOf(overToken);
+        if (overIndex === -1 || overIndex === activeIndex) {
+            return board;
+        }
+        return Object.assign(Object.assign({}, board), { [activeContainer]: arrayMove(activeItems, activeIndex, overIndex) });
+    }
+    const nextActiveItems = activeItems.filter((item) => item !== activeCardToken);
+    const overIndex = isGroupToken(overToken)
+        ? overItems.length
+        : overItems.indexOf(overToken);
+    const insertIndex = overIndex < 0 ? overItems.length : overIndex;
+    const nextOverItems = [
+        ...overItems.slice(0, insertIndex),
+        activeCardToken,
+        ...overItems.slice(insertIndex),
+    ];
+    return Object.assign(Object.assign({}, board), { [activeContainer]: nextActiveItems, [overContainer]: nextOverItems });
+}
+export function moveCardToInsertIndex(board, activeCardToken, activeContainer, overContainer, insertIndex) {
+    var _a, _b;
+    const activeItems = (_a = board[activeContainer]) !== null && _a !== void 0 ? _a : [];
+    const overItems = (_b = board[overContainer]) !== null && _b !== void 0 ? _b : [];
+    const activeIndex = activeItems.indexOf(activeCardToken);
+    if (activeIndex === -1 || activeContainer === overContainer) {
+        return board;
+    }
+    const clampedInsertIndex = Math.max(0, Math.min(insertIndex, overItems.length));
+    const nextActiveItems = activeItems.filter((item) => item !== activeCardToken);
+    const nextOverItems = [
+        ...overItems.slice(0, clampedInsertIndex),
+        activeCardToken,
+        ...overItems.slice(clampedInsertIndex),
+    ];
+    return Object.assign(Object.assign({}, board), { [activeContainer]: nextActiveItems, [overContainer]: nextOverItems });
+}

package/dist/Kanban/constants.d.ts

@@ -0,0 +1,4 @@
+import { DropAnimation } from "@dnd-kit/core";
+export declare const GROUP_PREFIX = "group::";
+export declare const CARD_PREFIX = "card::";
+export declare const dropAnimation: DropAnimation;

package/dist/Kanban/constants.js

@@ -0,0 +1,14 @@
+import { defaultDropAnimationSideEffects } from "@dnd-kit/core";
+export const GROUP_PREFIX = "group::";
+export const CARD_PREFIX = "card::";
+export const dropAnimation = {
+    duration: 220,
+    easing: "cubic-bezier(0.2, 0, 0, 1)",
+    sideEffects: defaultDropAnimationSideEffects({
+        styles: {
+            active: {
+                opacity: "0.35",
+            },
+        },
+    }),
+};

package/dist/Kanban/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./Kanban";
+export * from "./types";

package/dist/Kanban/index.js

@@ -0,0 +1,2 @@
+export * from "./Kanban";
+export * from "./types";

package/dist/Kanban/styles.d.ts

@@ -0,0 +1,17 @@
+export declare const Board: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    $columnGap?: number;
+}>> & string;
+export declare const Column: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    $width: number;
+    $isOver: boolean;
+}>> & string;
+export declare const ColumnHeader: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const ColumnCount: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>> & string;
+export declare const ColumnBody: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    $height?: number;
+}>> & string;
+export declare const EmptyColumn: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const CardContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    $isDragging: boolean;
+    $isDragOverlay: boolean;
+}>> & string;

package/dist/Kanban/styles.js

@@ -0,0 +1,64 @@
+import styled from "styled-components";
+export const Board = styled.div `
+  display: flex;
+  align-items: stretch;
+  gap: ${({ $columnGap }) => $columnGap !== null && $columnGap !== void 0 ? $columnGap : 12}px;
+  width: 100%;
+  height: 100%;
+  min-height: 0;
+  overflow-x: auto;
+  overflow-y: hidden;
+  padding-bottom: 8px;
+`;
+export const Column = styled.div `
+  width: ${({ $width }) => $width}px;
+  min-width: ${({ $width }) => $width}px;
+  max-width: ${({ $width }) => $width}px;
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  min-height: 0;
+  transition: border-color 120ms ease;
+`;
+export const ColumnHeader = styled.div `
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 10px 5px;
+  color: ${({ theme }) => theme.palette.text.primary};
+  font-weight: 600;
+  font-size: 13px;
+`;
+export const ColumnCount = styled.span `
+  color: ${({ theme }) => theme.palette.text.secondary};
+  font-size: 12px;
+`;
+export const ColumnBody = styled.div `
+  ${({ $height }) => typeof $height === "number"
+    ? `height: ${$height}px;`
+    : `
+      flex: 1 1 auto;
+      min-height: 0;
+    `}
+  width: 100%;
+  padding: 8px;
+`;
+export const EmptyColumn = styled.div `
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: 1px dashed ${({ theme }) => theme.palette.divider};
+  border-radius: 6px;
+  color: ${({ theme }) => theme.palette.text.secondary};
+  font-size: 12px;
+  text-align: center;
+  padding: 8px;
+`;
+export const CardContainer = styled.div `
+  box-sizing: border-box;
+  padding: 4px 2px;
+  transition: opacity 120ms ease;
+  opacity: ${({ $isDragging, $isDragOverlay }) => $isDragging && !$isDragOverlay ? 0.35 : 1};
+  pointer-events: ${({ $isDragOverlay }) => ($isDragOverlay ? "none" : "auto")};
+`;

package/dist/Kanban/types.d.ts

@@ -0,0 +1,67 @@
+import { ReactNode } from "react";
+export type KanbanGroupKey = string | number;
+export interface KanbanUpdatedCard<TGroup extends KanbanGroupKey> {
+    id: string;
+    group: TGroup;
+    order: number;
+}
+export interface KanbanReorderChange<TCard, TGroup extends KanbanGroupKey> {
+    movedCard: TCard;
+    movedCardId: string;
+    fromGroup: TGroup;
+    toGroup: TGroup;
+    newOrder: number;
+    beforeCardId: string | null;
+    afterCardId: string | null;
+    needsRebalance: boolean;
+    updatedCards: KanbanUpdatedCard<TGroup>[];
+}
+export interface RenderCardArgs<TCard, TGroup extends KanbanGroupKey> {
+    card: TCard;
+    cardId: string;
+    group: TGroup;
+    index: number;
+    isDragging: boolean;
+    isSorting: boolean;
+    isDragOverlay: boolean;
+}
+export interface KanbanProps<TCard, TGroup extends KanbanGroupKey> {
+    /** Full collection of cards rendered by the board. */
+    cards: TCard[];
+    /** Returns a stable unique id for a card. Tells the kanban how to get the id of a card. */
+    getCardId: (card: TCard) => string;
+    /** Returns the current group/column key for a card. Tells the kanban how to get the group of a card. */
+    getCardGroup: (card: TCard) => TGroup;
+    /** Returns the numeric sort order used inside a column. Tells the kanban how to get the order of a card. */
+    getCardOrder: (card: TCard) => number;
+    /** Renders the visual content for a single card. */
+    renderCard: (args: RenderCardArgs<TCard, TGroup>) => ReactNode;
+    /** Called after drag-and-drop with the computed reorder payload. */
+    onCardsReorder: (change: KanbanReorderChange<TCard, TGroup>) => void;
+    /** Explicit column order; if omitted, columns are derived from card groups. */
+    groupOrder?: TGroup[];
+    /** Optional display labels keyed by group value (`String(group)`). */
+    groupLabels?: Partial<Record<string, ReactNode>>;
+    /** Custom header renderer for each column. */
+    renderColumnHeader?: (group: TGroup, cardCount: number) => ReactNode;
+    /** Width of each column in pixels. Defaults to `320`. */
+    columnWidth?: number;
+    /** Gap between columns in pixels. Defaults to `8`. */
+    columnGap?: number;
+    /** Fixed column body height in pixels. If omitted, it grows with container layout. */
+    columnHeight?: number;
+    /** Fallback card height estimate for virtualization. Defaults to `100`. */
+    estimatedCardHeight?: number;
+    /** Number of extra rows rendered outside the viewport. Defaults to `4`. */
+    overscanCount?: number;
+    /** Preferred spacing for generated order values. */
+    orderStep?: number;
+    /** Minimum allowed gap between adjacent order values before rebalance is suggested. */
+    minOrderGap?: number;
+    /** Content shown when a column has no cards. */
+    emptyColumnPlaceholder?: ReactNode;
+    /** Optional class name applied to the board root element. */
+    className?: string;
+    /** Gap between cards in pixels. Defaults to `8`. */
+    cardGap?: number;
+}

package/dist/Kanban/types.js

@@ -0,0 +1 @@
+export {};

package/dist/Kanban/useKanbanBoardData.d.ts

@@ -0,0 +1,16 @@
+import { BoardState } from "./board";
+import { KanbanGroupKey } from "./types";
+interface UseKanbanBoardDataArgs<TCard, TGroup extends KanbanGroupKey> {
+    cards: TCard[];
+    getCardId: (card: TCard) => string;
+    getCardGroup: (card: TCard) => TGroup;
+    getCardOrder: (card: TCard) => number;
+    groupOrder?: TGroup[];
+}
+export declare function useKanbanBoardData<TCard, TGroup extends KanbanGroupKey>({ cards, getCardId, getCardGroup, getCardOrder, groupOrder, }: UseKanbanBoardDataArgs<TCard, TGroup>): {
+    cardByToken: Map<string, TCard>;
+    cardIdByToken: Map<string, string>;
+    groupValueByToken: Map<string, TGroup>;
+    baseBoard: BoardState;
+};
+export {};

package/dist/Kanban/useKanbanBoardData.js

@@ -0,0 +1,59 @@
+import { useMemo } from "react";
+import { toCardToken, toGroupToken } from "./board";
+export function useKanbanBoardData({ cards, getCardId, getCardGroup, getCardOrder, groupOrder, }) {
+    const cardByToken = useMemo(() => {
+        const map = new Map();
+        for (const card of cards) {
+            map.set(toCardToken(getCardId(card)), card);
+        }
+        return map;
+    }, [cards, getCardId]);
+    const cardIdByToken = useMemo(() => {
+        const map = new Map();
+        for (const card of cards) {
+            const cardId = getCardId(card);
+            map.set(toCardToken(cardId), cardId);
+        }
+        return map;
+    }, [cards, getCardId]);
+    const groupValueByToken = useMemo(() => {
+        const map = new Map();
+        if (groupOrder) {
+            for (const group of groupOrder) {
+                map.set(toGroupToken(group), group);
+            }
+        }
+        for (const card of cards) {
+            const group = getCardGroup(card);
+            map.set(toGroupToken(group), group);
+        }
+        return map;
+    }, [cards, getCardGroup, groupOrder]);
+    const baseBoard = useMemo(() => {
+        const board = {};
+        for (const groupToken of groupValueByToken.keys()) {
+            board[groupToken] = [];
+        }
+        const sortedCards = [...cards].sort((cardA, cardB) => {
+            const orderDiff = getCardOrder(cardA) - getCardOrder(cardB);
+            if (orderDiff !== 0) {
+                return orderDiff;
+            }
+            return getCardId(cardA).localeCompare(getCardId(cardB));
+        });
+        for (const card of sortedCards) {
+            const groupToken = toGroupToken(getCardGroup(card));
+            if (!board[groupToken]) {
+                board[groupToken] = [];
+            }
+            board[groupToken].push(toCardToken(getCardId(card)));
+        }
+        return board;
+    }, [cards, getCardGroup, getCardId, getCardOrder, groupValueByToken]);
+    return {
+        cardByToken,
+        cardIdByToken,
+        groupValueByToken,
+        baseBoard,
+    };
+}

package/dist/Kanban/useKanbanRowHeights.d.ts

@@ -0,0 +1,7 @@
+import { VariableSizeList } from "react-window";
+import { HeightMap } from "./board";
+export declare function useKanbanRowHeights(): {
+    columnHeights: HeightMap;
+    listRefMap: import("react").RefObject<Record<string, VariableSizeList<any> | null>>;
+    onRowMeasured: (columnToken: string, cardToken: string, index: number, height: number) => void;
+};

package/dist/Kanban/useKanbanRowHeights.js

@@ -0,0 +1,36 @@
+import { useCallback, useEffect, useRef, useState } from "react";
+export function useKanbanRowHeights() {
+    const [columnHeights, setColumnHeights] = useState({});
+    const listRefMap = useRef({});
+    const pendingListResetsRef = useRef({});
+    const onRowMeasured = useCallback((columnToken, cardToken, index, height) => {
+        setColumnHeights((prev) => {
+            var _a;
+            const columnMap = (_a = prev[columnToken]) !== null && _a !== void 0 ? _a : {};
+            if (columnMap[cardToken] === height) {
+                return prev;
+            }
+            const next = Object.assign(Object.assign({}, prev), { [columnToken]: Object.assign(Object.assign({}, columnMap), { [cardToken]: height }) });
+            const pendingIndex = pendingListResetsRef.current[columnToken];
+            pendingListResetsRef.current[columnToken] =
+                pendingIndex == null ? index : Math.min(pendingIndex, index);
+            return next;
+        });
+    }, []);
+    useEffect(() => {
+        var _a;
+        const entries = Object.entries(pendingListResetsRef.current);
+        if (!entries.length) {
+            return;
+        }
+        for (const [columnToken, index] of entries) {
+            (_a = listRefMap.current[columnToken]) === null || _a === void 0 ? void 0 : _a.resetAfterIndex(index);
+        }
+        pendingListResetsRef.current = {};
+    }, [columnHeights]);
+    return {
+        columnHeights,
+        listRefMap,
+        onRowMeasured,
+    };
+}

package/dist/Kanban/utils.d.ts

@@ -0,0 +1,13 @@
+export interface CalculateOrderInput {
+    previousOrder: number | null;
+    nextOrder: number | null;
+    step?: number;
+    minGap?: number;
+}
+export interface CalculateOrderOutput {
+    order: number;
+    needsRebalance: boolean;
+}
+export declare const DEFAULT_ORDER_STEP = 1024;
+export declare const DEFAULT_MIN_ORDER_GAP = 0.000001;
+export declare function calculateOrderValue({ previousOrder, nextOrder, step, minGap, }: CalculateOrderInput): CalculateOrderOutput;

package/dist/Kanban/utils.js

@@ -0,0 +1,19 @@
+export const DEFAULT_ORDER_STEP = 1024;
+export const DEFAULT_MIN_ORDER_GAP = 0.000001;
+export function calculateOrderValue({ previousOrder, nextOrder, step = DEFAULT_ORDER_STEP, minGap = DEFAULT_MIN_ORDER_GAP, }) {
+    if (previousOrder == null && nextOrder == null) {
+        return { order: 0, needsRebalance: false };
+    }
+    if (previousOrder == null && nextOrder != null) {
+        return { order: nextOrder - step, needsRebalance: false };
+    }
+    if (previousOrder != null && nextOrder == null) {
+        return { order: previousOrder + step, needsRebalance: false };
+    }
+    const gap = Math.abs(nextOrder - previousOrder);
+    const order = previousOrder + (nextOrder - previousOrder) / 2;
+    return {
+        order,
+        needsRebalance: gap <= minGap,
+    };
+}

package/dist/Kanban/virtualRow.d.ts

@@ -0,0 +1,14 @@
+import { ListChildComponentProps } from "react-window";
+import { ReactNode } from "react";
+import { KanbanGroupKey, RenderCardArgs } from "./types";
+export interface ColumnRowData<TCard, TGroup extends KanbanGroupKey> {
+    itemTokens: string[];
+    columnToken: string;
+    cardByToken: Map<string, TCard>;
+    cardIdByToken: Map<string, string>;
+    groupByToken: Map<string, TGroup>;
+    renderCard: (args: RenderCardArgs<TCard, TGroup>) => ReactNode;
+    cardGap: number;
+    onMeasure: (columnToken: string, cardToken: string, index: number, height: number) => void;
+}
+export declare const MemoizedSortableVirtualRow: import("react").MemoExoticComponent<({ data, index, style, }: ListChildComponentProps<ColumnRowData<any, any>>) => import("react/jsx-runtime").JSX.Element | null>;

package/dist/Kanban/virtualRow.js

@@ -0,0 +1,56 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { defaultAnimateLayoutChanges, useSortable } from "@dnd-kit/sortable";
+import { CSS } from "@dnd-kit/utilities";
+import { areEqual, } from "react-window";
+import { memo, useCallback, useEffect, useState } from "react";
+import { CardContainer } from "./styles";
+const SortableVirtualRow = ({ data, index, style, }) => {
+    const cardToken = data.itemTokens[index];
+    const card = data.cardByToken.get(cardToken);
+    const cardId = data.cardIdByToken.get(cardToken);
+    const group = data.groupByToken.get(data.columnToken);
+    const [contentNode, setContentNode] = useState(null);
+    const { attributes, listeners, setNodeRef, transform, transition, isDragging, isSorting, } = useSortable({
+        id: cardToken,
+        data: {
+            type: "card",
+            columnToken: data.columnToken,
+        },
+        transition: {
+            duration: 180,
+            easing: "cubic-bezier(0.2, 0, 0, 1)",
+        },
+        animateLayoutChanges: (args) => defaultAnimateLayoutChanges(Object.assign(Object.assign({}, args), { wasDragging: true })),
+    });
+    const setCombinedRef = useCallback((node) => {
+        setNodeRef(node);
+    }, [setNodeRef]);
+    useEffect(() => {
+        if (!contentNode || typeof ResizeObserver === "undefined") {
+            return;
+        }
+        const observer = new ResizeObserver((entries) => {
+            var _a, _b;
+            const nextHeight = (_b = (_a = entries[0]) === null || _a === void 0 ? void 0 : _a.contentRect) === null || _b === void 0 ? void 0 : _b.height;
+            if (!nextHeight || nextHeight <= 0) {
+                return;
+            }
+            data.onMeasure(data.columnToken, cardToken, index, Math.ceil(nextHeight) + data.cardGap);
+        });
+        observer.observe(contentNode);
+        return () => observer.disconnect();
+    }, [cardToken, contentNode, data, index]);
+    if (!card || !cardId || group == null) {
+        return null;
+    }
+    return (_jsx("div", { ref: setCombinedRef, style: Object.assign(Object.assign({}, style), { transform: CSS.Transform.toString(transform), transition, willChange: isDragging || isSorting ? "transform" : undefined, zIndex: isDragging ? 2 : 1 }), children: _jsx(CardContainer, { ref: setContentNode, style: { marginBottom: data.cardGap }, "$isDragging": isDragging, "$isDragOverlay": false, children: _jsx("div", Object.assign({}, attributes, listeners, { children: data.renderCard({
+                    card,
+                    cardId,
+                    group,
+                    index,
+                    isDragging,
+                    isSorting,
+                    isDragOverlay: false,
+                }) })) }) }));
+};
+export const MemoizedSortableVirtualRow = memo(SortableVirtualRow, areEqual);

package/dist/index.d.ts

@@ -11,6 +11,7 @@ export * from "./Button";
 export * from "./DropDownMenu";
 export * from "./Switch";
 export * from "./Alert";
+export * from "./Kanban";
 export { default as IconButton } from "./IconButton";
 export { default as DateInput } from "./DateInput";
 export { default as TextArea } from "./TextArea";

package/dist/index.js

@@ -6,6 +6,7 @@ export * from "./Button";
 export * from "./DropDownMenu";
 export * from "./Switch";
 export * from "./Alert";
+export * from "./Kanban";
 export { default as IconButton } from "./IconButton";
 export { default as DateInput } from "./DateInput";
 export { default as TextArea } from "./TextArea";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@monolith-forensics/monolith-ui",
-  "version": "1.3.111",
+  "version": "1.3.112-dev.1",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "author": "Matt Danner (Monolith Forensics LLC)",
@@ -25,12 +25,16 @@
     "listFiles": "tsc --listFiles",
     "dist-alpha": "yarn build && npm publish --tag alpha-$npm_package_version && yarn clean",
     "dist-beta": "yarn build && npm publish --tag beta-$npm_package_version && yarn clean",
+    "dist-dev": "yarn build && npm version prerelease --preid=dev && npm publish --tag dev && yarn clean",
     "release-patch": "yarn version --patch --deferred && yarn build && npm publish && yarn clean",
     "release-minor": "yarn version --minor --deferred && yarn build && npm publish && yarn clean",
     "release-major": "yarn version --major --deferred && yarn build && npm publish && yarn clean"
   },
   "dependencies": {
     "@codemirror/language-data": "^6.5.1",
+    "@dnd-kit/core": "^6.3.1",
+    "@dnd-kit/sortable": "^10.0.0",
+    "@dnd-kit/utilities": "^3.2.2",
     "@floating-ui/react": "^0.26.16",
     "@mantine/hooks": "^7.13.0",
     "@radix-ui/react-switch": "^1.0.7",