@rebasepro/ui 0.24.0 → 0.24.1-canary.gcb918fc

package/dist/views/Kanban/Board.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Board.es.js","names":[],"sources":["../../../src/views/Kanban/Board.tsx"],"sourcesContent":["import React, { useEffect, useRef, useState } from \"react\";\nimport { createPortal } from \"react-dom\";\nimport {\n    closestCorners,\n    DndContext,\n    DragEndEvent,\n    DragOverEvent,\n    DragOverlay,\n    DragStartEvent,\n    PointerSensor,\n    useSensor,\n    useSensors\n} from \"@dnd-kit/core\";\nimport { arrayMove, SortableContext } from \"@dnd-kit/sortable\";\nimport { BoardColumn } from \"./BoardColumn\";\nimport { placeDroppedCard } from \"./placement\";\nimport { BoardItem, BoardItemMap, BoardProps } from \"./board_types\";\nimport { cls } from \"../../util\";\n\nexport function Board<T, COLUMN extends string>({\n    data,\n    columns: columnsProp,\n    columnLabels,\n    columnColors,\n    className,\n    assignColumn,\n    allowColumnReorder = false,\n    onColumnReorder,\n    onItemsReorder,\n    ItemComponent,\n    columnLoadingState,\n    onLoadMoreColumn,\n    onAddItemToColumn,\n    AddColumnComponent\n}: BoardProps<T, COLUMN>) {\n\n    const [activeItem, setActiveItem] = useState<BoardItem<T> | null>(null);\n    const [isDragging, setIsDragging] = useState(false);\n    const [dragOverColumnId, setDragOverColumnId] = useState<string | null>(null);\n\n    /**\n     * Which column the card was picked up from.\n     *\n     * `handleDragOver` moves the card between columns in `itemMapState` while\n     * the pointer is still down — that is what makes the gap open up under the\n     * cursor. So by the time the drop is handled, looking the card up by id\n     * finds it in its *destination*, and the board was reporting the move as\n     * source === target: a cross-column drop looked like a plain reorder and\n     * the column property was never written. The card snapped back on the next\n     * fetch.\n     */\n    const dragSourceColumnRef = useRef<COLUMN | null>(null);\n\n    const [itemMapState, setItemMapState] = useState<BoardItemMap<T>>(() => {\n        const dataColumnMap: Record<string, COLUMN> = data.reduce((prev, item: BoardItem<T>) => ({\n            ...prev,\n            [item.id]: assignColumn(item)\n        }), {});\n        return columnsProp.reduce(\n            (previous: BoardItemMap<T>, column: COLUMN) => ({\n                ...previous,\n                [column]: data.filter((item: BoardItem<T>) => dataColumnMap[item.id] === column)\n            }),\n            {} as BoardItemMap<T>\n        );\n    });\n\n    const sensors = useSensors(\n        useSensor(PointerSensor, {\n            activationConstraint: {\n                distance: 5\n            }\n        })\n    );\n\n    useEffect(() => {\n        if (isDragging) return;\n\n        const dataColumnMap: Record<string, COLUMN> = data.reduce((prev, item) => ({\n            ...prev,\n            [item.id]: assignColumn(item)\n        }), {});\n\n        const newItemMap = columnsProp.reduce(\n            (previous: BoardItemMap<T>, column: COLUMN) => ({\n                ...previous,\n                [column]: data.filter((item: BoardItem<T>) => dataColumnMap[item.id] === column)\n            }),\n            {} as BoardItemMap<T>\n        );\n\n        setItemMapState(prevMap => {\n            let changed = false;\n\n            for (const col of columnsProp) {\n                const prevItems = prevMap[col] ?? [];\n                const newItems = newItemMap[col] ?? [];\n\n                if (prevItems.length !== newItems.length) {\n                    changed = true;\n                    continue;\n                }\n                for (let i = 0; i < prevItems.length; i++) {\n                    if (prevItems[i].id !== newItems[i].id || prevItems[i].data !== newItems[i].data) {\n                        changed = true;\n                        break;\n                    }\n                }\n            }\n\n            if (!changed) {\n                return prevMap;\n            }\n\n            const updated: BoardItemMap<T> = {};\n            for (const col of columnsProp) {\n                const prevItems = prevMap[col] ?? [];\n                const newItems = newItemMap[col] ?? [];\n\n                const prevById = new Map<string, BoardItem<T>>();\n                for (const item of prevItems) {\n                    prevById.set(item.id, item);\n                }\n\n                updated[col] = newItems.map(newItem => {\n                    const prev = prevById.get(newItem.id);\n                    if (prev && prev.data === newItem.data) {\n                        return prev;\n                    }\n                    return newItem;\n                });\n            }\n            return updated;\n        });\n    }, [data, columnsProp, assignColumn]);\n\n    const findColumnByItemId = (id: string): string | undefined => {\n        return Object.keys(itemMapState).find(col => itemMapState[col]?.some(i => i.id === id));\n    };\n\n    const handleDragStart = (event: DragStartEvent) => {\n        setIsDragging(true);\n        setDragOverColumnId(null);\n        const { active } = event;\n\n        if (active.data.current?.type === \"ITEM\") {\n            const columnId = findColumnByItemId(active.id as string);\n            dragSourceColumnRef.current = (columnId as COLUMN | undefined) ?? null;\n            if (columnId) {\n                const item = itemMapState[columnId]?.find(i => i.id === active.id);\n                setActiveItem(item || null);\n            }\n        }\n    };\n\n    const handleDragOver = (event: DragOverEvent) => {\n        const {\n            active,\n            over\n        } = event;\n\n        if (!over) {\n            setDragOverColumnId(null);\n            return;\n        }\n\n        let currentHoveredColumnId: string | null = null;\n        const overId = over.id as string;\n        const overDataType = over.data.current?.type as string | undefined;\n\n        if (overDataType === \"ITEM-LIST\" || overDataType === \"COLUMN\") {\n            currentHoveredColumnId = overId;\n        } else if (overDataType === \"ITEM\") {\n            currentHoveredColumnId = findColumnByItemId(overId) || null;\n        } else if (columnsProp.includes(overId as COLUMN)) {\n            currentHoveredColumnId = overId;\n        }\n\n        setDragOverColumnId(currentHoveredColumnId);\n\n        if (active.data.current?.type !== \"ITEM\") {\n            return;\n        }\n\n        const activeId = active.id as string;\n        const activeItemColumn = findColumnByItemId(activeId);\n        let overColumnForMove = findColumnByItemId(overId);\n\n        if (!overColumnForMove && overDataType === \"ITEM-LIST\") {\n            overColumnForMove = overId;\n        }\n        if (!overColumnForMove && columnsProp.includes(overId as COLUMN)) {\n            overColumnForMove = overId;\n        }\n\n        if (!activeItemColumn || !overColumnForMove) return;\n        if (activeItemColumn === overColumnForMove) return;\n\n        if (itemMapState[overColumnForMove]?.some(i => i.id === activeId)) {\n            return;\n        }\n\n        setItemMapState(currentMap => {\n            const activeItems = [...(currentMap[activeItemColumn] || [])];\n            const overItems = [...(currentMap[overColumnForMove!] || [])];\n            const activeIndex = activeItems.findIndex(i => i.id === activeId);\n\n            if (activeIndex === -1) return currentMap;\n\n            let overIndex;\n            if (overDataType === \"ITEM-LIST\" || (columnsProp.includes(overId as COLUMN) && !findColumnByItemId(overId))) {\n                overIndex = overItems.length;\n            } else {\n                overIndex = overItems.findIndex(i => i.id === overId);\n                if (overIndex !== -1) {\n                    const activeTop = active.rect.current.translated?.top ?? 0;\n                    const activeHeight = active.rect.current.translated?.height ?? 0;\n                    const activeCenter = activeTop + activeHeight / 2;\n\n                    const overTop = over?.rect.top ?? 0;\n                    const overHeight = over?.rect.height ?? 0;\n                    const overCenter = overTop + overHeight / 2;\n\n                    const isBelowOverItem = activeCenter > overCenter;\n\n                    const modifier = isBelowOverItem ? 1 : 0;\n                    overIndex = overIndex >= 0 ? overIndex + modifier : overItems.length;\n                } else {\n                    overIndex = overItems.length;\n                }\n            }\n\n            const newItemMap = { ...currentMap };\n            const [moved] = activeItems.splice(activeIndex, 1);\n            overItems.splice(overIndex, 0, moved);\n            newItemMap[activeItemColumn] = activeItems;\n            newItemMap[overColumnForMove!] = overItems;\n            return newItemMap;\n        });\n    };\n\n    // Escape, or a drop outside the board. `handleDragOver` may already have\n    // moved the card between columns, so the next `data` effect has to be\n    // allowed to put it back.\n    const handleDragCancel = () => {\n        setIsDragging(false);\n        setActiveItem(null);\n        setDragOverColumnId(null);\n        dragSourceColumnRef.current = null;\n    };\n\n    const handleDragEnd = (event: DragEndEvent) => {\n        const {\n            active,\n            over\n        } = event;\n\n        const sourceColumn = dragSourceColumnRef.current;\n\n        setIsDragging(false);\n        setActiveItem(null);\n        setDragOverColumnId(null);\n        dragSourceColumnRef.current = null;\n\n        if (!over) return;\n\n        const activeId = active.id as string;\n        const overId = over.id as string;\n\n        if (active.data.current?.type === \"COLUMN\") {\n            if (activeId !== overId) {\n                const oldIndex = columnsProp.indexOf(activeId as COLUMN);\n                const newIndex = columnsProp.indexOf(overId as COLUMN);\n                if (oldIndex !== -1 && newIndex !== -1) {\n                    const reordered = arrayMove(columnsProp, oldIndex, newIndex);\n                    onColumnReorder?.(reordered);\n                }\n            }\n            return;\n        }\n\n        // Where the card sits right now — `handleDragOver` has already put it in\n        // the column being hovered, so this is the destination, not the origin.\n        const currentCol = findColumnByItemId(activeId) as COLUMN | undefined;\n        let targetCol = findColumnByItemId(overId) as COLUMN | undefined;\n\n        if (!targetCol) {\n            const overDataType = over.data.current?.type;\n            if (overDataType === \"ITEM-LIST\" || columnsProp.includes(overId as COLUMN)) {\n                targetCol = overId as COLUMN;\n            }\n        }\n        targetCol = targetCol ?? currentCol;\n\n        if (!currentCol || !targetCol) return;\n\n        const targetItems = itemMapState[targetCol] || [];\n        const movedItem = (itemMapState[currentCol] || []).find(i => i.id === activeId);\n        if (!movedItem) return;\n\n        const finalTargetItems = placeDroppedCard({\n            targetItems,\n            movedItem,\n            overId,\n            changedColumn: (sourceColumn ?? currentCol) !== targetCol\n        });\n\n        onItemsReorder?.(finalTargetItems, {\n            itemId: activeId,\n            // The column the pointer went down in. `currentCol` would report a\n            // cross-column move as a same-column reorder.\n            sourceColumn: (sourceColumn ?? currentCol),\n            targetColumn: targetCol\n        });\n    };\n\n    return (\n        <DndContext\n            sensors={sensors}\n            // `rectIntersection`, the default, only reports a target while the\n            // dragged rect physically overlaps it, and prefers whichever\n            // overlap is largest — on a board of tall columns that means a card\n            // held over a gap reports nothing, and one held near a column edge\n            // reports the neighbour. `closestCorners` is the sortable-list\n            // recommendation and is what makes the drop land where it looks\n            // like it will.\n            collisionDetection={closestCorners}\n            onDragStart={handleDragStart}\n            onDragOver={handleDragOver}\n            onDragEnd={handleDragEnd}\n            onDragCancel={handleDragCancel}\n        >\n            <div className={cls(\"flex flex-row h-full w-full overflow-x-auto p-4 select-none items-start\", className)}>\n                <SortableContext items={columnsProp}>\n                    {columnsProp.map((col, index) => {\n                        const colItems = itemMapState[col] || [];\n                        const loadingState = columnLoadingState?.[col];\n                        return (\n                            <BoardColumn\n                                key={String(col)}\n                                id={String(col)}\n                                title={columnLabels?.[col] ?? String(col)}\n                                items={colItems}\n                                index={index}\n                                ItemComponent={ItemComponent}\n                                isDragging={isDragging}\n                                isDragOverColumn={dragOverColumnId === String(col)}\n                                allowReorder={allowColumnReorder}\n                                loading={loadingState?.loading}\n                                hasMore={loadingState?.hasMore}\n                                error={loadingState?.error}\n                                totalCount={loadingState?.totalCount}\n                                color={columnColors?.[col]}\n                                onLoadMore={onLoadMoreColumn ? () => onLoadMoreColumn(col) : undefined}\n                                onAddItem={onAddItemToColumn ? () => onAddItemToColumn(col) : undefined}\n                            />\n                        );\n                    })}\n                </SortableContext>\n                {AddColumnComponent}\n            </div>\n\n            {/* The overlay used to be positioned by hand, from `mousemove`\n                listeners on `window` and a grab offset measured off whatever\n                `[role='button']` the pointer went down on. dnd-kit already\n                tracks the pointer and already knows the grab offset — the\n                hand-rolled copy drifted from the position collision detection\n                was actually using, so the card you saw and the slot you got\n                were two different things. */}\n            {typeof document !== \"undefined\" && createPortal(\n                <DragOverlay dropAnimation={null} zIndex={9999}>\n                    {activeItem && (\n                        <ItemComponent\n                            item={activeItem}\n                            isDragging={true}\n                            isClone={true}\n                        />\n                    )}\n                </DragOverlay>,\n                document.body\n            )}\n        </DndContext>\n    );\n}\n"],"mappings":"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"}

package/dist/views/Kanban/BoardColumn.es.js

@@ -0,0 +1,81 @@
+import { cls } from "../../util/cls.es.js";
+import { iconSize } from "../../icons/Icon.es.js";
+import { PlusIcon } from "../../icons/index.es.js";
+import { IconButton } from "../../components/IconButton.es.js";
+import { BoardSortableList } from "./BoardSortableList.es.js";
+import { BoardColumnTitle } from "./BoardColumnTitle.es.js";
+import { memo, useMemo } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { SortableContext, useSortable, verticalListSortingStrategy } from "@dnd-kit/sortable";
+import { CSS } from "@dnd-kit/utilities";
+//#region src/views/Kanban/BoardColumn.tsx
+var BoardColumn = memo(function BoardColumn({ id, title, items, ItemComponent, isDragging, isDragOverColumn, allowReorder = false, loading = false, hasMore = false, error, onLoadMore, onAddItem, totalCount, color, style }) {
+	const { setNodeRef, attributes, listeners, isDragging: isColumnBeingDragged, transform, transition } = useSortable({
+		id,
+		data: { type: "COLUMN" },
+		disabled: !allowReorder
+	});
+	const combinedStyle = useMemo(() => ({
+		...style,
+		transform: CSS.Translate.toString(transform),
+		transition,
+		zIndex: isColumnBeingDragged ? 2 : 1
+	}), [
+		style,
+		transform,
+		transition,
+		isColumnBeingDragged
+	]);
+	const dragListeners = allowReorder ? listeners : {};
+	const columnClassName = useMemo(() => cls("border h-full w-80 min-w-80 mx-2 flex flex-col rounded-md border-hairline", isColumnBeingDragged ? "ring-2 ring-primary" : ""), [isColumnBeingDragged]);
+	const headerClassName = useMemo(() => cls("flex items-center justify-between px-2 rounded-t-md transition-colors duration-200 ease-in-out", isColumnBeingDragged ? "bg-surface-active" : "bg-surface-field hover:bg-surface-field-hover", allowReorder ? "cursor-grab" : ""), [isColumnBeingDragged, allowReorder]);
+	const itemIds = useMemo(() => items.map((i) => i.id), [items]);
+	return /* @__PURE__ */ jsxs("div", {
+		ref: setNodeRef,
+		style: combinedStyle,
+		...attributes,
+		className: columnClassName,
+		children: [/* @__PURE__ */ jsxs("div", {
+			...dragListeners,
+			className: headerClassName,
+			children: [/* @__PURE__ */ jsxs("div", {
+				className: "flex items-center gap-2",
+				children: [/* @__PURE__ */ jsx(BoardColumnTitle, {
+					"aria-label": `${title} item list`,
+					color,
+					children: title
+				}), totalCount !== void 0 && /* @__PURE__ */ jsx("span", {
+					className: "text-xs text-surface-500 dark:text-surface-400",
+					children: totalCount
+				})]
+			}), onAddItem && /* @__PURE__ */ jsx(IconButton, {
+				"aria-label": `Add to ${title}`,
+				size: "small",
+				onClick: (e) => {
+					e.stopPropagation();
+					onAddItem();
+				},
+				className: "opacity-60 hover:opacity-100",
+				children: /* @__PURE__ */ jsx(PlusIcon, { size: iconSize.small })
+			})]
+		}), /* @__PURE__ */ jsx(SortableContext, {
+			items: itemIds,
+			strategy: verticalListSortingStrategy,
+			children: /* @__PURE__ */ jsx(BoardSortableList, {
+				columnId: id,
+				items,
+				ItemComponent,
+				isDragging,
+				isDragOverColumn,
+				loading,
+				hasMore,
+				error,
+				onLoadMore
+			})
+		})]
+	});
+});
+//#endregion
+export { BoardColumn };
+
+//# sourceMappingURL=BoardColumn.es.js.map

package/dist/views/Kanban/BoardColumn.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BoardColumn.es.js","names":[],"sources":["../../../src/views/Kanban/BoardColumn.tsx"],"sourcesContent":["import React, { memo, useMemo } from \"react\";\nimport { SortableContext, useSortable, verticalListSortingStrategy } from \"@dnd-kit/sortable\";\nimport { CSS } from \"@dnd-kit/utilities\";\nimport { BoardSortableList } from \"./BoardSortableList\";\nimport { BoardColumnTitle } from \"./BoardColumnTitle\";\nimport { BoardItem, BoardItemViewProps } from \"./board_types\";\nimport {\n    IconButton\n} from \"../../components\";\nimport { cls } from \"../../util\";\nimport { iconSize, PlusIcon } from \"../../icons\";\n\nexport interface BoardColumnProps<T> {\n    id: string;\n    title: string;\n    items: BoardItem<T>[];\n    index: number;\n    ItemComponent: React.ComponentType<BoardItemViewProps<T>>;\n    isDragging: boolean;\n    isDragOverColumn: boolean;\n    allowReorder?: boolean;\n    loading?: boolean;\n    hasMore?: boolean;\n    error?: Error;\n    onLoadMore?: () => void;\n    onAddItem?: () => void;\n    totalCount?: number;\n    color?: any;\n    style?: React.CSSProperties;\n}\n\nexport const BoardColumn = memo(function BoardColumn<T>({\n    id,\n    title,\n    items,\n    ItemComponent,\n    isDragging,\n    isDragOverColumn,\n    allowReorder = false,\n    loading = false,\n    hasMore = false,\n    error,\n    onLoadMore,\n    onAddItem,\n    totalCount,\n    color,\n    style\n}: BoardColumnProps<T>) {\n    const {\n        setNodeRef,\n        attributes,\n        listeners,\n        isDragging: isColumnBeingDragged,\n        transform,\n        transition\n    } = useSortable({\n        id,\n        data: { type: \"COLUMN\" },\n        disabled: !allowReorder\n    });\n\n    const combinedStyle = useMemo(() => ({\n        ...style,\n        transform: CSS.Translate.toString(transform),\n        transition,\n        zIndex: isColumnBeingDragged ? 2 : 1\n    }), [style, transform, transition, isColumnBeingDragged]);\n\n    const dragListeners = allowReorder ? listeners : {};\n\n    const columnClassName = useMemo(() => cls(\n        \"border h-full w-80 min-w-80 mx-2 flex flex-col rounded-md border-hairline\",\n        isColumnBeingDragged ? \"ring-2 ring-primary\" : \"\"\n    ), [isColumnBeingDragged]);\n\n    const headerClassName = useMemo(() => cls(\n        \"flex items-center justify-between px-2 rounded-t-md transition-colors duration-200 ease-in-out\",\n        isColumnBeingDragged\n            ? \"bg-surface-active\"\n            : \"bg-surface-field hover:bg-surface-field-hover\",\n        allowReorder ? \"cursor-grab\" : \"\"\n    ), [isColumnBeingDragged, allowReorder]);\n\n    const itemIds = useMemo(() => items.map(i => i.id), [items]);\n\n    return (\n        <div\n            ref={setNodeRef}\n            style={combinedStyle}\n            {...attributes}\n            className={columnClassName}\n        >\n            <div\n                {...dragListeners}\n                className={headerClassName}\n            >\n                <div className=\"flex items-center gap-2\">\n                    <BoardColumnTitle aria-label={`${title} item list`} color={color}>\n                        {title}\n                    </BoardColumnTitle>\n                    {totalCount !== undefined && (\n                        <span className=\"text-xs text-surface-500 dark:text-surface-400\">\n                            {totalCount}\n                        </span>\n                    )}\n                </div>\n                {onAddItem && (\n                    <IconButton\n                        aria-label={`Add to ${title}`}\n                        size=\"small\"\n                        onClick={(e: React.MouseEvent) => {\n                            e.stopPropagation();\n                            onAddItem();\n                        }}\n                        className=\"opacity-60 hover:opacity-100\"\n                    >\n                        <PlusIcon size={iconSize.small}/>\n                    </IconButton>\n                )}\n            </div>\n            <SortableContext\n                items={itemIds}\n                strategy={verticalListSortingStrategy}\n            >\n                <BoardSortableList\n                    columnId={id}\n                    items={items}\n                    ItemComponent={ItemComponent}\n                    isDragging={isDragging}\n                    isDragOverColumn={isDragOverColumn}\n                    loading={loading}\n                    hasMore={hasMore}\n                    error={error}\n                    onLoadMore={onLoadMore}\n                />\n            </SortableContext>\n        </div>\n    );\n}) as <T>(props: BoardColumnProps<T>) => React.ReactElement;\n"],"mappings":";;;;;;;;;;;AA+BA,IAAa,cAAc,KAAK,SAAS,YAAe,EACpD,IACA,OACA,OACA,eACA,YACA,kBACA,eAAe,OACf,UAAU,OACV,UAAU,OACV,OACA,YACA,WACA,YACA,OACA,SACoB;CACpB,MAAM,EACF,YACA,YACA,WACA,YAAY,sBACZ,WACA,eACA,YAAY;EACZ;EACA,MAAM,EAAE,MAAM,SAAS;EACvB,UAAU,CAAC;CACf,CAAC;CAED,MAAM,gBAAgB,eAAe;EACjC,GAAG;EACH,WAAW,IAAI,UAAU,SAAS,SAAS;EAC3C;EACA,QAAQ,uBAAuB,IAAI;CACvC,IAAI;EAAC;EAAO;EAAW;EAAY;CAAoB,CAAC;CAExD,MAAM,gBAAgB,eAAe,YAAY,CAAC;CAElD,MAAM,kBAAkB,cAAc,IAClC,6EACA,uBAAuB,wBAAwB,EACnD,GAAG,CAAC,oBAAoB,CAAC;CAEzB,MAAM,kBAAkB,cAAc,IAClC,kGACA,uBACM,sBACA,iDACN,eAAe,gBAAgB,EACnC,GAAG,CAAC,sBAAsB,YAAY,CAAC;CAEvC,MAAM,UAAU,cAAc,MAAM,KAAI,MAAK,EAAE,EAAE,GAAG,CAAC,KAAK,CAAC;CAE3D,OACI,qBAAC,OAAD;EACI,KAAK;EACL,OAAO;EACP,GAAI;EACJ,WAAW;YAJf,CAMI,qBAAC,OAAD;GACI,GAAI;GACJ,WAAW;aAFf,CAII,qBAAC,OAAD;IAAK,WAAU;cAAf,CACI,oBAAC,kBAAD;KAAkB,cAAY,GAAG,MAAM;KAAoB;eACtD;IACa,CAAA,GACjB,eAAe,KAAA,KACZ,oBAAC,QAAD;KAAM,WAAU;eACX;IACC,CAAA,CAET;OACJ,aACG,oBAAC,YAAD;IACI,cAAY,UAAU;IACtB,MAAK;IACL,UAAU,MAAwB;KAC9B,EAAE,gBAAgB;KAClB,UAAU;IACd;IACA,WAAU;cAEV,oBAAC,UAAD,EAAU,MAAM,SAAS,MAAO,CAAA;GACxB,CAAA,CAEf;MACL,oBAAC,iBAAD;GACI,OAAO;GACP,UAAU;aAEV,oBAAC,mBAAD;IACI,UAAU;IACH;IACQ;IACH;IACM;IACT;IACA;IACF;IACK;GACf,CAAA;EACY,CAAA,CAChB;;AAEb,CAAC"}

package/dist/views/Kanban/BoardColumnTitle.es.js

@@ -0,0 +1,27 @@
+import { cls } from "../../util/cls.es.js";
+import { getColorSchemeForKey } from "../../util/chip_colors.es.js";
+import { Typography } from "../../components/Typography.es.js";
+import { useMemo } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/views/Kanban/BoardColumnTitle.tsx
+function BoardColumnTitle({ children, className, color, ...props }) {
+	const colorScheme = useMemo(() => {
+		if (!color) return void 0;
+		if (typeof color === "string") return getColorSchemeForKey(color);
+		return color;
+	}, [color]);
+	return /* @__PURE__ */ jsxs(Typography, {
+		variant: "subtitle2",
+		component: "h4",
+		className: cls("py-3 px-3 transition-colors duration-200 flex-grow select-none relative outline-none focus:outline focus:outline-2 focus:outline-offset-2 flex items-center gap-3", className),
+		...props,
+		children: [colorScheme && /* @__PURE__ */ jsx("div", {
+			className: "w-3 h-3 rounded-full flex-shrink-0",
+			style: { backgroundColor: colorScheme.darkColor ?? colorScheme.color }
+		}), children]
+	});
+}
+//#endregion
+export { BoardColumnTitle };
+
+//# sourceMappingURL=BoardColumnTitle.es.js.map

package/dist/views/Kanban/BoardColumnTitle.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BoardColumnTitle.es.js","names":[],"sources":["../../../src/views/Kanban/BoardColumnTitle.tsx"],"sourcesContent":["import React, { useMemo } from \"react\";\nimport { Typography } from \"../../components\";\nimport { cls, getColorSchemeForKey } from \"../../util\";\n\nexport interface BoardColumnTitleProps {\n    children: React.ReactNode;\n    className?: string;\n    \"aria-label\"?: string;\n    color?: any;\n}\n\nexport function BoardColumnTitle({\n    children,\n    className,\n    color,\n    ...props\n}: BoardColumnTitleProps) {\n    const colorScheme = useMemo(() => {\n        if (!color) return undefined;\n        if (typeof color === \"string\") {\n            return getColorSchemeForKey(color);\n        }\n        return color;\n    }, [color]);\n\n    return (\n        <Typography\n            variant=\"subtitle2\"\n            component=\"h4\"\n            className={\n                cls(\"py-3 px-3 transition-colors duration-200 flex-grow select-none relative outline-none focus:outline focus:outline-2 focus:outline-offset-2 flex items-center gap-3\",\n                    className)\n            }\n            {...props}\n        >\n            {colorScheme && (\n                <div\n                    className=\"w-3 h-3 rounded-full flex-shrink-0\"\n                    style={{\n                        backgroundColor: colorScheme.darkColor ?? colorScheme.color\n                    }}\n                />\n            )}\n            {children}\n        </Typography>\n    );\n}\n"],"mappings":";;;;;;AAWA,SAAgB,iBAAiB,EAC7B,UACA,WACA,OACA,GAAG,SACmB;CACtB,MAAM,cAAc,cAAc;EAC9B,IAAI,CAAC,OAAO,OAAO,KAAA;EACnB,IAAI,OAAO,UAAU,UACjB,OAAO,qBAAqB,KAAK;EAErC,OAAO;CACX,GAAG,CAAC,KAAK,CAAC;CAEV,OACI,qBAAC,YAAD;EACI,SAAQ;EACR,WAAU;EACV,WACI,IAAI,qKACA,SAAS;EAEjB,GAAI;YAPR,CASK,eACG,oBAAC,OAAD;GACI,WAAU;GACV,OAAO,EACH,iBAAiB,YAAY,aAAa,YAAY,MAC1D;EACH,CAAA,GAEJ,QACO;;AAEpB"}

package/dist/views/Kanban/BoardSortableList.es.js

@@ -0,0 +1,98 @@
+import { cls } from "../../util/cls.es.js";
+import { CircularProgress } from "../../components/CircularProgress.es.js";
+import { memo, useEffect, useMemo, useRef } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { SortableContext, useSortable, verticalListSortingStrategy } from "@dnd-kit/sortable";
+import { useDroppable } from "@dnd-kit/core";
+import { CSS } from "@dnd-kit/utilities";
+//#region src/views/Kanban/BoardSortableList.tsx
+function BoardSortableList({ columnId, items, ItemComponent, isDragging, isDragOverColumn, loading = false, hasMore = false, error, onLoadMore }) {
+	const { setNodeRef } = useDroppable({
+		id: columnId,
+		data: { type: "ITEM-LIST" }
+	});
+	const sentinelRef = useRef(null);
+	const isLoadingRef = useRef(loading);
+	isLoadingRef.current = loading;
+	const lastLoadTimeRef = useRef(0);
+	useEffect(() => {
+		if (!sentinelRef.current || !hasMore || !onLoadMore) return;
+		const sentinel = sentinelRef.current;
+		const observer = new IntersectionObserver((entries) => {
+			const now = Date.now();
+			if (entries[0].isIntersecting && hasMore && !isLoadingRef.current && now - lastLoadTimeRef.current > 500) {
+				lastLoadTimeRef.current = now;
+				onLoadMore();
+			}
+		}, { threshold: .1 });
+		observer.observe(sentinel);
+		const rect = sentinel.getBoundingClientRect();
+		const containerRect = sentinel.parentElement?.getBoundingClientRect();
+		if (containerRect && rect.top < containerRect.bottom && rect.bottom > containerRect.top) {
+			const now = Date.now();
+			if (hasMore && !isLoadingRef.current && now - lastLoadTimeRef.current > 500) {
+				lastLoadTimeRef.current = now;
+				onLoadMore();
+			}
+		}
+		return () => observer.disconnect();
+	}, [hasMore, onLoadMore]);
+	return /* @__PURE__ */ jsx("div", {
+		ref: setNodeRef,
+		className: useMemo(() => cls("flex flex-col p-2 transition-opacity duration-100 transition-bg ease-linear w-full overflow-y-auto flex-1 min-h-0 rounded-md", isDragging && isDragOverColumn ? "bg-surface-active" : isDragging ? "bg-surface-field hover:bg-surface-hover" : "bg-surface-field"), [isDragging, isDragOverColumn]),
+		style: { minHeight: 80 },
+		children: /* @__PURE__ */ jsx(SortableContext, {
+			items: items.map((i) => i.id),
+			strategy: verticalListSortingStrategy,
+			children: items.length === 0 && !loading ? /* @__PURE__ */ jsx("div", {
+				className: "flex-1 flex items-center justify-center px-3 text-center",
+				children: /* @__PURE__ */ jsx("span", {
+					className: cls("text-xs", error ? "text-red-600 dark:text-red-400" : "text-surface-400 dark:text-surface-500"),
+					children: error ? "Could not load this column" : "No items"
+				})
+			}) : /* @__PURE__ */ jsxs(Fragment, { children: [items.map((item, index) => /* @__PURE__ */ jsx(SortableItem, {
+				item,
+				index,
+				columnId,
+				ItemComponent
+			}, item.id)), (loading || hasMore) && /* @__PURE__ */ jsx("div", {
+				ref: sentinelRef,
+				className: "flex items-center justify-center py-2 min-h-6",
+				children: loading && /* @__PURE__ */ jsx(CircularProgress, { size: "smallest" })
+			})] })
+		})
+	});
+}
+var SortableItem = memo(function SortableItem({ item, index, columnId, ItemComponent }) {
+	const { setNodeRef, attributes, listeners, isDragging: isItemBeingDragged, transform, transition } = useSortable({
+		id: item.id,
+		data: {
+			type: "ITEM",
+			columnId
+		}
+	});
+	return /* @__PURE__ */ jsx("div", {
+		ref: setNodeRef,
+		style: useMemo(() => ({
+			transform: CSS.Transform.toString(transform),
+			transition,
+			zIndex: isItemBeingDragged ? 2 : 1,
+			opacity: isItemBeingDragged ? 0 : 1
+		}), [
+			transform,
+			transition,
+			isItemBeingDragged
+		]),
+		...attributes,
+		...listeners,
+		children: /* @__PURE__ */ jsx(ItemComponent, {
+			item,
+			isDragging: isItemBeingDragged,
+			index
+		})
+	});
+});
+//#endregion
+export { BoardSortableList };
+
+//# sourceMappingURL=BoardSortableList.es.js.map

package/dist/views/Kanban/BoardSortableList.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BoardSortableList.es.js","names":[],"sources":["../../../src/views/Kanban/BoardSortableList.tsx"],"sourcesContent":["import React, { memo, useEffect, useMemo, useRef } from \"react\";\nimport { useDroppable } from \"@dnd-kit/core\";\nimport { useSortable, SortableContext, verticalListSortingStrategy } from \"@dnd-kit/sortable\";\nimport { CSS } from \"@dnd-kit/utilities\";\nimport { CircularProgress } from \"../../components\";\nimport { cls } from \"../../util\";\nimport { BoardItem, BoardItemViewProps } from \"./board_types\";\n\ninterface BoardSortableListProps<T> {\n    columnId: string;\n    items: BoardItem<T>[];\n    ItemComponent: React.ComponentType<BoardItemViewProps<T>>;\n    isDragging: boolean;\n    isDragOverColumn: boolean;\n    loading?: boolean;\n    hasMore?: boolean;\n    error?: Error;\n    onLoadMore?: () => void;\n}\n\nexport function BoardSortableList<T>({\n    columnId,\n    items,\n    ItemComponent,\n    isDragging,\n    isDragOverColumn,\n    loading = false,\n    hasMore = false,\n    error,\n    onLoadMore\n}: BoardSortableListProps<T>) {\n    const {\n        setNodeRef\n    } = useDroppable({\n        id: columnId,\n        data: { type: \"ITEM-LIST\" }\n    });\n\n    const sentinelRef = useRef<HTMLDivElement>(null);\n    const isLoadingRef = useRef(loading);\n    isLoadingRef.current = loading;\n    const lastLoadTimeRef = useRef(0);\n\n    useEffect(() => {\n        if (!sentinelRef.current || !hasMore || !onLoadMore) return;\n\n        const sentinel = sentinelRef.current;\n\n        const observer = new IntersectionObserver(\n            (entries) => {\n                const now = Date.now();\n                if (\n                    entries[0].isIntersecting &&\n                    hasMore &&\n                    !isLoadingRef.current &&\n                    now - lastLoadTimeRef.current > 500\n                ) {\n                    lastLoadTimeRef.current = now;\n                    onLoadMore();\n                }\n            },\n            { threshold: 0.1 }\n        );\n\n        observer.observe(sentinel);\n\n        const rect = sentinel.getBoundingClientRect();\n        const containerRect = sentinel.parentElement?.getBoundingClientRect();\n        if (containerRect && rect.top < containerRect.bottom && rect.bottom > containerRect.top) {\n            const now = Date.now();\n            if (hasMore && !isLoadingRef.current && now - lastLoadTimeRef.current > 500) {\n                lastLoadTimeRef.current = now;\n                onLoadMore();\n            }\n        }\n\n        return () => observer.disconnect();\n    }, [hasMore, onLoadMore]);\n\n    const containerClassName = useMemo(() => cls(\n        // The scrollbar stays: this is the only thing on the page that scrolls\n        // vertically, and hiding it left a column of cards with no sign that\n        // there were more below the fold.\n        \"flex flex-col p-2 transition-opacity duration-100 transition-bg ease-linear w-full overflow-y-auto flex-1 min-h-0 rounded-md\",\n        isDragging && isDragOverColumn\n            ? \"bg-surface-active\"\n            : isDragging\n                ? \"bg-surface-field hover:bg-surface-hover\"\n                : \"bg-surface-field\"\n    ), [isDragging, isDragOverColumn]);\n\n    return (\n        <div\n            ref={setNodeRef}\n            className={containerClassName}\n            style={{ minHeight: 80 }}\n        >\n            <SortableContext\n                items={items.map(i => i.id)}\n                strategy={verticalListSortingStrategy}\n            >\n                {items.length === 0 && !loading ? (\n                    <div className=\"flex-1 flex items-center justify-center px-3 text-center\">\n                        {/* \"No items\" over a header counting eleven of them is\n                            the wrong thing to say when the read failed. */}\n                        <span className={cls(\n                            \"text-xs\",\n                            error\n                                ? \"text-red-600 dark:text-red-400\"\n                                : \"text-surface-400 dark:text-surface-500\"\n                        )}>\n                            {error ? \"Could not load this column\" : \"No items\"}\n                        </span>\n                    </div>\n                ) : (\n                    <>\n                        {items.map((item, index) => (\n                            <SortableItem\n                                key={item.id}\n                                item={item}\n                                index={index}\n                                columnId={columnId}\n                                ItemComponent={ItemComponent}\n                            />\n                        ))}\n                        {(loading || hasMore) && (\n                            <div ref={sentinelRef} className=\"flex items-center justify-center py-2 min-h-6\">\n                                {loading && <CircularProgress size=\"smallest\"/>}\n                            </div>\n                        )}\n                    </>\n                )}\n            </SortableContext>\n        </div>\n    );\n}\n\ninterface SortableItemProps<T> {\n    item: BoardItem<T>;\n    index: number;\n    columnId: string;\n    ItemComponent: React.ComponentType<BoardItemViewProps<T>>;\n}\n\nconst SortableItem = memo(function SortableItem<T>({\n    item,\n    index,\n    columnId,\n    ItemComponent\n}: SortableItemProps<T>) {\n    const {\n        setNodeRef,\n        attributes,\n        listeners,\n        isDragging: isItemBeingDragged,\n        transform,\n        transition\n    } = useSortable({\n        id: item.id,\n        data: {\n            type: \"ITEM\",\n            columnId\n        }\n    });\n\n    const sortableStyle = useMemo(() => ({\n        transform: CSS.Transform.toString(transform),\n        transition,\n        zIndex: isItemBeingDragged ? 2 : 1,\n        opacity: isItemBeingDragged ? 0 : 1\n    }), [transform, transition, isItemBeingDragged]);\n\n    return (\n        <div ref={setNodeRef} style={sortableStyle} {...attributes} {...listeners}>\n            <ItemComponent\n                item={item}\n                isDragging={isItemBeingDragged}\n                index={index}\n            />\n        </div>\n    );\n}) as <T>(props: SortableItemProps<T>) => React.ReactElement;\n"],"mappings":";;;;;;;;AAoBA,SAAgB,kBAAqB,EACjC,UACA,OACA,eACA,YACA,kBACA,UAAU,OACV,UAAU,OACV,OACA,cAC0B;CAC1B,MAAM,EACF,eACA,aAAa;EACb,IAAI;EACJ,MAAM,EAAE,MAAM,YAAY;CAC9B,CAAC;CAED,MAAM,cAAc,OAAuB,IAAI;CAC/C,MAAM,eAAe,OAAO,OAAO;CACnC,aAAa,UAAU;CACvB,MAAM,kBAAkB,OAAO,CAAC;CAEhC,gBAAgB;EACZ,IAAI,CAAC,YAAY,WAAW,CAAC,WAAW,CAAC,YAAY;EAErD,MAAM,WAAW,YAAY;EAE7B,MAAM,WAAW,IAAI,sBAChB,YAAY;GACT,MAAM,MAAM,KAAK,IAAI;GACrB,IACI,QAAQ,EAAE,CAAC,kBACX,WACA,CAAC,aAAa,WACd,MAAM,gBAAgB,UAAU,KAClC;IACE,gBAAgB,UAAU;IAC1B,WAAW;GACf;EACJ,GACA,EAAE,WAAW,GAAI,CACrB;EAEA,SAAS,QAAQ,QAAQ;EAEzB,MAAM,OAAO,SAAS,sBAAsB;EAC5C,MAAM,gBAAgB,SAAS,eAAe,sBAAsB;EACpE,IAAI,iBAAiB,KAAK,MAAM,cAAc,UAAU,KAAK,SAAS,cAAc,KAAK;GACrF,MAAM,MAAM,KAAK,IAAI;GACrB,IAAI,WAAW,CAAC,aAAa,WAAW,MAAM,gBAAgB,UAAU,KAAK;IACzE,gBAAgB,UAAU;IAC1B,WAAW;GACf;EACJ;EAEA,aAAa,SAAS,WAAW;CACrC,GAAG,CAAC,SAAS,UAAU,CAAC;CAcxB,OACI,oBAAC,OAAD;EACI,KAAK;EACL,WAfmB,cAAc,IAIrC,gIACA,cAAc,mBACR,sBACA,aACI,4CACA,kBACd,GAAG,CAAC,YAAY,gBAAgB,CAKb;EACX,OAAO,EAAE,WAAW,GAAG;YAEvB,oBAAC,iBAAD;GACI,OAAO,MAAM,KAAI,MAAK,EAAE,EAAE;GAC1B,UAAU;aAET,MAAM,WAAW,KAAK,CAAC,UACpB,oBAAC,OAAD;IAAK,WAAU;cAGX,oBAAC,QAAD;KAAM,WAAW,IACb,WACA,QACM,mCACA,wCACV;eACK,QAAQ,+BAA+B;IACtC,CAAA;GACL,CAAA,IAEL,qBAAA,UAAA,EAAA,UAAA,CACK,MAAM,KAAK,MAAM,UACd,oBAAC,cAAD;IAEU;IACC;IACG;IACK;GAClB,GALQ,KAAK,EAKb,CACJ,IACC,WAAW,YACT,oBAAC,OAAD;IAAK,KAAK;IAAa,WAAU;cAC5B,WAAW,oBAAC,kBAAD,EAAkB,MAAK,WAAW,CAAA;GAC7C,CAAA,CAEX,EAAA,CAAA;EAEO,CAAA;CAChB,CAAA;AAEb;AASA,IAAM,eAAe,KAAK,SAAS,aAAgB,EAC/C,MACA,OACA,UACA,iBACqB;CACrB,MAAM,EACF,YACA,YACA,WACA,YAAY,oBACZ,WACA,eACA,YAAY;EACZ,IAAI,KAAK;EACT,MAAM;GACF,MAAM;GACN;EACJ;CACJ,CAAC;CASD,OACI,oBAAC,OAAD;EAAK,KAAK;EAAY,OARJ,eAAe;GACjC,WAAW,IAAI,UAAU,SAAS,SAAS;GAC3C;GACA,QAAQ,qBAAqB,IAAI;GACjC,SAAS,qBAAqB,IAAI;EACtC,IAAI;GAAC;GAAW;GAAY;EAAkB,CAGb;EAAe,GAAI;EAAY,GAAI;YAC5D,oBAAC,eAAD;GACU;GACN,YAAY;GACL;EACV,CAAA;CACA,CAAA;AAEb,CAAC"}

package/dist/views/Kanban/placement.es.js

@@ -0,0 +1,27 @@
+import { arrayMove } from "@dnd-kit/sortable";
+//#region src/views/Kanban/placement.ts
+/**
+* Where a dropped card ends up in its destination column.
+*
+* Pulled out of the drop handler because it is the part that was wrong twice:
+* once appending a card that had been dropped into the middle of a column, and
+* once refusing to place a card at all when it was released over an empty
+* column rather than over another card. It is pure, so it can be checked
+* without driving a pointer.
+*/
+function placeDroppedCard({ targetItems, movedItem, overId, changedColumn }) {
+	const indexInTarget = targetItems.findIndex((i) => i.id === movedItem.id);
+	const overIndex = targetItems.findIndex((i) => i.id === overId);
+	if (indexInTarget === -1) {
+		const placed = [...targetItems];
+		placed.splice(overIndex === -1 ? targetItems.length : overIndex, 0, movedItem);
+		return placed;
+	}
+	if (overIndex !== -1) return arrayMove(targetItems, indexInTarget, overIndex);
+	if (changedColumn) return targetItems;
+	return arrayMove(targetItems, indexInTarget, targetItems.length - 1);
+}
+//#endregion
+export { placeDroppedCard };
+
+//# sourceMappingURL=placement.es.js.map

package/dist/views/Kanban/placement.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"placement.es.js","names":[],"sources":["../../../src/views/Kanban/placement.ts"],"sourcesContent":["import { arrayMove } from \"@dnd-kit/sortable\";\nimport { BoardItem } from \"./board_types\";\n\nexport interface PlaceDroppedCardParams<T> {\n    /**\n     * The destination column as it stands at the moment of the drop. When the\n     * card came from another column it is normally already in here:\n     * `handleDragOver` moves it while the pointer is still down, which is what\n     * opens the gap under the cursor.\n     */\n    targetItems: BoardItem<T>[];\n    /** The card being dropped. */\n    movedItem: BoardItem<T>;\n    /** What the pointer was over — a card id, or the column's own droppable id. */\n    overId: string;\n    /** Whether the card was picked up in a different column than it landed in. */\n    changedColumn: boolean;\n}\n\n/**\n * Where a dropped card ends up in its destination column.\n *\n * Pulled out of the drop handler because it is the part that was wrong twice:\n * once appending a card that had been dropped into the middle of a column, and\n * once refusing to place a card at all when it was released over an empty\n * column rather than over another card. It is pure, so it can be checked\n * without driving a pointer.\n */\nexport function placeDroppedCard<T>({\n    targetItems,\n    movedItem,\n    overId,\n    changedColumn\n}: PlaceDroppedCardParams<T>): BoardItem<T>[] {\n\n    const indexInTarget = targetItems.findIndex(i => i.id === movedItem.id);\n    const overIndex = targetItems.findIndex(i => i.id === overId);\n\n    // Not placed during the drag — drop straight into the slot. `-1` means the\n    // pointer was over the column itself (an empty one, or the space below the\n    // last card), which appends.\n    if (indexInTarget === -1) {\n        const placed = [...targetItems];\n        placed.splice(overIndex === -1 ? targetItems.length : overIndex, 0, movedItem);\n        return placed;\n    }\n\n    // Released over another card: that card's slot is the one the user chose.\n    if (overIndex !== -1) {\n        return arrayMove(targetItems, indexInTarget, overIndex);\n    }\n\n    // Released over the column rather than a card. The card is already sitting\n    // in the gap the drag opened, so its position is the one on screen —\n    // appending here is what used to send it to the bottom.\n    if (changedColumn) {\n        return targetItems;\n    }\n\n    // Same column, released below the last card.\n    return arrayMove(targetItems, indexInTarget, targetItems.length - 1);\n}\n"],"mappings":";;;;;;;;;;;AA4BA,SAAgB,iBAAoB,EAChC,aACA,WACA,QACA,iBAC0C;CAE1C,MAAM,gBAAgB,YAAY,WAAU,MAAK,EAAE,OAAO,UAAU,EAAE;CACtE,MAAM,YAAY,YAAY,WAAU,MAAK,EAAE,OAAO,MAAM;CAK5D,IAAI,kBAAkB,IAAI;EACtB,MAAM,SAAS,CAAC,GAAG,WAAW;EAC9B,OAAO,OAAO,cAAc,KAAK,YAAY,SAAS,WAAW,GAAG,SAAS;EAC7E,OAAO;CACX;CAGA,IAAI,cAAc,IACd,OAAO,UAAU,aAAa,eAAe,SAAS;CAM1D,IAAI,eACA,OAAO;CAIX,OAAO,UAAU,aAAa,eAAe,YAAY,SAAS,CAAC;AACvE"}

package/dist/views/KanbanView.es.js

@@ -0,0 +1,11 @@
+import { Board } from "./Kanban/Board.es.js";
+import "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/views/KanbanView.tsx
+function KanbanView(props) {
+	return /* @__PURE__ */ jsx(Board, { ...props });
+}
+//#endregion
+export { KanbanView };
+
+//# sourceMappingURL=KanbanView.es.js.map

package/dist/views/KanbanView.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"KanbanView.es.js","names":[],"sources":["../../src/views/KanbanView.tsx"],"sourcesContent":["import React from \"react\";\nimport { Board } from \"./Kanban/Board\";\nimport { BoardItem, BoardItemViewProps, ColumnLoadingState } from \"./Kanban/board_types\";\n\nexport type KanbanViewProps<T, COLUMN extends string> = {\n    columns: COLUMN[];\n    columnLabels?: Record<COLUMN, string>;\n    columnColors?: Record<COLUMN, any>;\n    className?: string;\n    assignColumn: (item: BoardItem<T>) => COLUMN;\n    allowColumnReorder?: boolean;\n    onColumnReorder?: (columns: COLUMN[]) => void;\n    onItemsReorder?: (\n        items: BoardItem<T>[],\n        moveInfo?: {\n            itemId: string;\n            sourceColumn: COLUMN;\n            targetColumn: COLUMN;\n        }\n    ) => void;\n    ItemComponent: React.ComponentType<BoardItemViewProps<T>>;\n    columnLoadingState?: ColumnLoadingState;\n    onLoadMoreColumn?: (column: COLUMN) => void;\n    onAddItemToColumn?: (column: COLUMN) => void;\n    AddColumnComponent?: React.ReactNode;\n    data: BoardItem<T>[];\n};\n\nexport function KanbanView<T, COLUMN extends string>(props: KanbanViewProps<T, COLUMN>) {\n    return <Board {...props} />;\n}\nexport type { BoardItem, BoardItemViewProps, ColumnLoadingState };\n"],"mappings":";;;;AA4BA,SAAgB,WAAqC,OAAmC;CACpF,OAAO,oBAAC,OAAD,EAAO,GAAI,MAAQ,CAAA;AAC9B"}

package/dist/views/ListView.d.ts

@@ -10,7 +10,11 @@ export type ListViewColumnDef<T> = {
     isTitle?: boolean;
 };
 export type ListViewProps<T> = {
-    data: T[];
+    /**
+     * The rows, in order. A position holding `undefined` is a row that exists
+     * but has not been read yet: a placeholder is drawn in its place.
+     */
+    data: (T | undefined)[];
     dataLoading?: boolean;
     noMoreToLoad?: boolean;
     dataLoadingError?: Error;
@@ -31,6 +35,15 @@ export type ListViewProps<T> = {
      */
     onScroll?: (props: ViewScrollEvent) => void;
     initialScroll?: number;
+    /**
+     * Called with the positions in `data` of the rows on screen — not the
+     * ones drawn ahead of them — end exclusive, each time they change. While
+     * the list is still scrolling to `initialScroll`, the rows there.
+     */
+    onRowsRendered?: (range: {
+        start: number;
+        end: number;
+    }) => void;
     size?: CollectionSize;
     selectedEntityId?: string | number;
     /**
@@ -51,4 +64,4 @@ export type ListViewProps<T> = {
         onSelectionChange: (selected: boolean) => void;
     }) => React.ReactNode;
 };
-export declare function ListView<T>({ data, dataLoading, noMoreToLoad, dataLoadingError, itemCount, setItemCount, pageSize, paginationEnabled, onItemClick, selectedIds, highlightedIds, selectionEnabled, onSelectionChange, emptyComponent, onScroll, initialScroll, size, selectedEntityId, header, renderRow }: ListViewProps<T>): React.JSX.Element;
+export declare function ListView<T>({ data, dataLoading, noMoreToLoad, dataLoadingError, itemCount, setItemCount, pageSize, paginationEnabled, onItemClick, selectedIds, highlightedIds, selectionEnabled, onSelectionChange, emptyComponent, onScroll, initialScroll, onRowsRendered, size, selectedEntityId, header, renderRow }: ListViewProps<T>): React.JSX.Element;

package/dist/views/ListView.es.js

@@ -0,0 +1,245 @@
+import { cls } from "../util/cls.es.js";
+import { CircularProgress } from "../components/CircularProgress.es.js";
+import { Typography } from "../components/Typography.es.js";
+import { useUiLabels } from "../hooks/UiLabelsContext.es.js";
+import { Skeleton } from "../components/Skeleton.es.js";
+import { getScrollParent, useScrollParentRestoration } from "./useScrollParentRestoration.es.js";
+import React, { useCallback, useEffect, useRef, useState } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region src/views/ListView.tsx
+function getEstimatedRowHeight(size) {
+	switch (size) {
+		case "xs": return 44;
+		case "s": return 52;
+		case "m": return 64;
+		case "l": return 76;
+		case "xl": return 88;
+		default: return 64;
+	}
+}
+var OVERSCAN_COUNT = 8;
+var LOAD_MORE_THRESHOLD = 400;
+function ListView({ data, dataLoading = false, noMoreToLoad = false, dataLoadingError, itemCount, setItemCount, pageSize = 50, paginationEnabled = true, onItemClick, selectedIds, highlightedIds, selectionEnabled = true, onSelectionChange, emptyComponent, onScroll, initialScroll, onRowsRendered, size = "m", selectedEntityId, header, renderRow }) {
+	const labels = useUiLabels();
+	const containerRef = useRef(null);
+	const rowsRef = useRef(null);
+	const isLoadingMore = useRef(false);
+	useEffect(() => {
+		if (!dataLoading) isLoadingMore.current = false;
+	}, [dataLoading]);
+	const estimatedRowHeight = getEstimatedRowHeight(size);
+	const [effectiveScrollTop, setEffectiveScrollTop] = useState(0);
+	const [viewportHeight, setViewportHeight] = useState(800);
+	const [reportedScrollTop, setReportedScrollTop] = useState(0);
+	const [reportedHeight, setReportedHeight] = useState(800);
+	const paginationStateRef = useRef({
+		paginationEnabled,
+		noMoreToLoad,
+		itemCount,
+		pageSize
+	});
+	useEffect(() => {
+		paginationStateRef.current = {
+			paginationEnabled,
+			noMoreToLoad,
+			itemCount,
+			pageSize
+		};
+	}, [
+		paginationEnabled,
+		noMoreToLoad,
+		itemCount,
+		pageSize
+	]);
+	useEffect(() => {
+		const el = containerRef.current;
+		if (!el) return;
+		const scrollEl = getScrollParent(el);
+		if (!scrollEl) return;
+		let rafId = null;
+		const update = () => {
+			rafId = null;
+			const scrollRect = scrollEl.getBoundingClientRect();
+			const listTopRelative = (rowsRef.current ?? el).getBoundingClientRect().top - scrollRect.top;
+			setEffectiveScrollTop(Math.max(0, -listTopRelative));
+			setViewportHeight(scrollRect.height);
+			const restoring = pendingScroll.current;
+			const top = restoring ? restoring - (scrollEl.scrollTop + listTopRelative) : -listTopRelative;
+			setReportedScrollTop(Math.max(0, top));
+			setReportedHeight(Math.max(0, scrollRect.height + Math.min(0, top)));
+			const { paginationEnabled: pe, noMoreToLoad: nm, itemCount: ic, pageSize: ps } = paginationStateRef.current;
+			if (pe && !nm && !isLoadingMore.current && scrollEl.scrollHeight - scrollEl.scrollTop - scrollEl.clientHeight < LOAD_MORE_THRESHOLD) {
+				isLoadingMore.current = true;
+				setItemCount?.((ic ?? ps) + ps);
+			}
+		};
+		const onScrollEvent = () => {
+			if (rafId === null) rafId = requestAnimationFrame(update);
+		};
+		scrollEl.addEventListener("scroll", onScrollEvent, { passive: true });
+		const ro = new ResizeObserver(() => update());
+		ro.observe(scrollEl);
+		update();
+		return () => {
+			scrollEl.removeEventListener("scroll", onScrollEvent);
+			ro.disconnect();
+			if (rafId !== null) cancelAnimationFrame(rafId);
+		};
+	}, [setItemCount]);
+	const { pendingScroll } = useScrollParentRestoration({
+		containerRef,
+		initialScroll,
+		onScroll,
+		dataLength: data.length
+	});
+	const visibleStart = Math.min(data.length, Math.floor(reportedScrollTop / estimatedRowHeight));
+	const visibleEnd = Math.min(data.length, Math.ceil((reportedScrollTop + reportedHeight) / estimatedRowHeight));
+	useEffect(() => {
+		if (onRowsRendered && data.length > 0) onRowsRendered({
+			start: visibleStart,
+			end: visibleEnd
+		});
+	}, [
+		visibleStart,
+		visibleEnd,
+		onRowsRendered
+	]);
+	const totalHeight = data.length * estimatedRowHeight;
+	const startIndex = Math.max(0, Math.floor(effectiveScrollTop / estimatedRowHeight) - OVERSCAN_COUNT);
+	const endIndex = Math.min(data.length, Math.ceil((effectiveScrollTop + viewportHeight) / estimatedRowHeight) + OVERSCAN_COUNT);
+	const visibleData = data.slice(startIndex, endIndex);
+	const offsetY = startIndex * estimatedRowHeight;
+	const footerHeight = dataLoading ? 48 : !dataLoading && noMoreToLoad && data.length > 0 ? 32 : 0;
+	const isInitialLoading = dataLoading && data.length === 0;
+	const isEmpty = !dataLoading && data.length === 0 && !dataLoadingError;
+	const getItemId = useCallback((item) => {
+		if (item && typeof item === "object" && "id" in item) {
+			const id = item.id;
+			return typeof id === "number" ? id : String(id);
+		}
+		return String(item);
+	}, []);
+	return /* @__PURE__ */ jsx("div", {
+		ref: containerRef,
+		className: cls("w-full", selectedEntityId === void 0 && `rounded-lg overflow-hidden border border-hairline`),
+		children: dataLoadingError && data.length === 0 ? /* @__PURE__ */ jsx("div", {
+			className: "flex items-center justify-center p-8",
+			children: /* @__PURE__ */ jsx(Typography, {
+				className: "text-red-500",
+				children: labels.errorLoadingData(dataLoadingError.message)
+			})
+		}) : isInitialLoading ? /* @__PURE__ */ jsx("div", {
+			className: "flex items-center justify-center py-12 px-8",
+			children: /* @__PURE__ */ jsx(CircularProgress, { size: "small" })
+		}) : isEmpty ? /* @__PURE__ */ jsx("div", {
+			className: "w-full flex items-center justify-center py-12 px-8",
+			children: emptyComponent ?? /* @__PURE__ */ jsx(Typography, {
+				variant: "label",
+				color: "secondary",
+				children: labels.noEntriesFound
+			})
+		}) : /* @__PURE__ */ jsxs(Fragment, { children: [header, /* @__PURE__ */ jsxs("div", {
+			ref: rowsRef,
+			className: "my-1.5",
+			style: {
+				height: totalHeight + footerHeight,
+				position: "relative"
+			},
+			children: [
+				/* @__PURE__ */ jsx("div", {
+					style: {
+						position: "absolute",
+						top: offsetY,
+						left: 0,
+						right: 0
+					},
+					children: visibleData.map((item, i) => {
+						const actualIndex = startIndex + i;
+						if (item === void 0) return /* @__PURE__ */ jsx(UnreadRow, { height: estimatedRowHeight }, `__unread_${actualIndex}`);
+						const isLast = actualIndex === data.length - 1;
+						const id = getItemId(item);
+						const selected = selectedIds?.has(id) ?? false;
+						const highlighted = highlightedIds?.has(id) ?? false;
+						const handleClick = (e) => {
+							if ((e.metaKey || e.ctrlKey) && selectionEnabled) {
+								e.preventDefault();
+								onSelectionChange?.(item, !selected);
+								return;
+							}
+							onItemClick?.(item);
+						};
+						const handleSelectionChange = (val) => {
+							onSelectionChange?.(item, val);
+						};
+						return /* @__PURE__ */ jsx(React.Fragment, { children: renderRow({
+							item,
+							index: actualIndex,
+							style: {
+								height: estimatedRowHeight,
+								overflow: "hidden"
+							},
+							className: "py-0.5",
+							selected,
+							highlighted,
+							isLast,
+							onClick: handleClick,
+							onSelectionChange: handleSelectionChange
+						}) }, id || actualIndex);
+					})
+				}),
+				dataLoading && /* @__PURE__ */ jsx("div", {
+					className: "flex items-center justify-center py-3",
+					style: {
+						position: "absolute",
+						top: totalHeight,
+						left: 0,
+						right: 0
+					},
+					children: /* @__PURE__ */ jsx(CircularProgress, { size: "small" })
+				}),
+				!dataLoading && noMoreToLoad && data.length > 0 && /* @__PURE__ */ jsx("div", {
+					className: "flex items-center justify-center py-2",
+					style: {
+						position: "absolute",
+						top: totalHeight,
+						left: 0,
+						right: 0
+					},
+					children: /* @__PURE__ */ jsx(Typography, {
+						variant: "caption",
+						color: "secondary",
+						children: labels.allEntriesLoaded(data.length)
+					})
+				})
+			]
+		})] })
+	});
+}
+/** A row that exists but has not been read yet. */
+function UnreadRow({ height }) {
+	return /* @__PURE__ */ jsxs("div", {
+		className: "py-0.5 flex items-center gap-3 px-4",
+		style: {
+			height,
+			overflow: "hidden"
+		},
+		"aria-busy": true,
+		children: [/* @__PURE__ */ jsx(Skeleton, {
+			width: 32,
+			height: 32
+		}), /* @__PURE__ */ jsxs("div", {
+			className: "flex flex-col gap-1.5 grow",
+			children: [/* @__PURE__ */ jsx(Skeleton, {
+				width: 160,
+				height: 12
+			}), /* @__PURE__ */ jsx(Skeleton, {
+				width: 96,
+				height: 10
+			})]
+		})]
+	});
+}
+//#endregion
+export { ListView };
+
+//# sourceMappingURL=ListView.es.js.map