@rebasepro/ui 0.12.1-canary.gf5f1d39 → 0.13.0

package/src/views/Kanban/Board.tsx

@@ -1,6 +1,7 @@
-import React, { useCallback, useEffect, useRef, useState } from "react";
+import React, { useEffect, useRef, useState } from "react";
 import { createPortal } from "react-dom";
 import {
+    closestCorners,
     DndContext,
     DragEndEvent,
     DragOverEvent,
@@ -12,7 +13,8 @@ import {
 } from "@dnd-kit/core";
 import { arrayMove, SortableContext } from "@dnd-kit/sortable";
 import { BoardColumn } from "./BoardColumn";
-import { BoardItem, BoardItemMap, BoardItemViewProps, BoardProps } from "./board_types";
+import { placeDroppedCard } from "./placement";
+import { BoardItem, BoardItemMap, BoardProps } from "./board_types";
 import { cls } from "../../util";
 
 export function Board<T, COLUMN extends string>({
@@ -33,26 +35,21 @@ export function Board<T, COLUMN extends string>({
 }: BoardProps<T, COLUMN>) {
 
     const [activeItem, setActiveItem] = useState<BoardItem<T> | null>(null);
-    const [activeColumn, setActiveColumn] = useState<COLUMN | null>(null);
     const [isDragging, setIsDragging] = useState(false);
     const [dragOverColumnId, setDragOverColumnId] = useState<string | null>(null);
 
-    const grabOffsetRef = useRef<{ x: number; y: number }>({ x: 0, y: 0 });
-    const [overlayPos, setOverlayPos] = useState<{ x: number; y: number } | null>(null);
-
-    const handleMouseMove = useCallback((e: MouseEvent) => {
-        setOverlayPos({
-            x: e.clientX - grabOffsetRef.current.x,
-            y: e.clientY - grabOffsetRef.current.y
-        });
-    }, []);
-
-    useEffect(() => {
-        return () => {
-            window.removeEventListener("mousemove", handleMouseMove);
-            window.removeEventListener("pointermove", handleMouseMove);
-        };
-    }, [handleMouseMove]);
+    /**
+     * Which column the card was picked up from.
+     *
+     * `handleDragOver` moves the card between columns in `itemMapState` while
+     * the pointer is still down — that is what makes the gap open up under the
+     * cursor. So by the time the drop is handled, looking the card up by id
+     * finds it in its *destination*, and the board was reporting the move as
+     * source === target: a cross-column drop looked like a plain reorder and
+     * the column property was never written. The card snapped back on the next
+     * fetch.
+     */
+    const dragSourceColumnRef = useRef<COLUMN | null>(null);
 
     const [itemMapState, setItemMapState] = useState<BoardItemMap<T>>(() => {
         const dataColumnMap: Record<string, COLUMN> = data.reduce((prev, item: BoardItem<T>) => ({
@@ -146,31 +143,9 @@ export function Board<T, COLUMN extends string>({
         setDragOverColumnId(null);
         const { active } = event;
 
-        const activatorEvt = event.activatorEvent as PointerEvent | MouseEvent;
-        if (activatorEvt) {
-            const target = activatorEvt.target as HTMLElement;
-            const draggableEl = target.closest<HTMLElement>("[role='button']") ?? target;
-            const rect = draggableEl.getBoundingClientRect();
-            grabOffsetRef.current = {
-                x: activatorEvt.clientX - rect.left,
-                y: activatorEvt.clientY - rect.top
-            };
-            setOverlayPos({
-                x: rect.left,
-                y: rect.top
-            });
-        }
-        window.addEventListener("mousemove", handleMouseMove);
-        window.addEventListener("pointermove", handleMouseMove);
-
-        if (active.data.current?.type === "COLUMN") {
-            const columnId = active.id as string;
-            const column = columnsProp.find(col => String(col) === columnId);
-            if (column) {
-                setActiveColumn(column);
-            }
-        } else if (active.data.current?.type === "ITEM") {
+        if (active.data.current?.type === "ITEM") {
             const columnId = findColumnByItemId(active.id as string);
+            dragSourceColumnRef.current = (columnId as COLUMN | undefined) ?? null;
             if (columnId) {
                 const item = itemMapState[columnId]?.find(i => i.id === active.id);
                 setActiveItem(item || null);
@@ -208,7 +183,7 @@ export function Board<T, COLUMN extends string>({
         }
 
         const activeId = active.id as string;
-        const activeColumn = findColumnByItemId(activeId);
+        const activeItemColumn = findColumnByItemId(activeId);
         let overColumnForMove = findColumnByItemId(overId);
 
         if (!overColumnForMove && overDataType === "ITEM-LIST") {
@@ -218,15 +193,15 @@ export function Board<T, COLUMN extends string>({
             overColumnForMove = overId;
         }
 
-        if (!activeColumn || !overColumnForMove) return;
-        if (activeColumn === overColumnForMove) return;
+        if (!activeItemColumn || !overColumnForMove) return;
+        if (activeItemColumn === overColumnForMove) return;
 
         if (itemMapState[overColumnForMove]?.some(i => i.id === activeId)) {
             return;
         }
 
         setItemMapState(currentMap => {
-            const activeItems = [...(currentMap[activeColumn] || [])];
+            const activeItems = [...(currentMap[activeItemColumn] || [])];
             const overItems = [...(currentMap[overColumnForMove!] || [])];
             const activeIndex = activeItems.findIndex(i => i.id === activeId);
 
@@ -258,26 +233,34 @@ export function Board<T, COLUMN extends string>({
             const newItemMap = { ...currentMap };
             const [moved] = activeItems.splice(activeIndex, 1);
             overItems.splice(overIndex, 0, moved);
-            newItemMap[activeColumn] = activeItems;
+            newItemMap[activeItemColumn] = activeItems;
             newItemMap[overColumnForMove!] = overItems;
             return newItemMap;
         });
     };
 
+    // Escape, or a drop outside the board. `handleDragOver` may already have
+    // moved the card between columns, so the next `data` effect has to be
+    // allowed to put it back.
+    const handleDragCancel = () => {
+        setIsDragging(false);
+        setActiveItem(null);
+        setDragOverColumnId(null);
+        dragSourceColumnRef.current = null;
+    };
+
     const handleDragEnd = (event: DragEndEvent) => {
         const {
             active,
             over
         } = event;
 
-        window.removeEventListener("mousemove", handleMouseMove);
-        window.removeEventListener("pointermove", handleMouseMove);
-        setOverlayPos(null);
+        const sourceColumn = dragSourceColumnRef.current;
 
         setIsDragging(false);
         setActiveItem(null);
-        setActiveColumn(null);
         setDragOverColumnId(null);
+        dragSourceColumnRef.current = null;
 
         if (!over) return;
 
@@ -296,76 +279,56 @@ export function Board<T, COLUMN extends string>({
             return;
         }
 
-        const activeCol = findColumnByItemId(activeId) as COLUMN | undefined;
-        let overCol = findColumnByItemId(overId) as COLUMN | undefined;
+        // Where the card sits right now — `handleDragOver` has already put it in
+        // the column being hovered, so this is the destination, not the origin.
+        const currentCol = findColumnByItemId(activeId) as COLUMN | undefined;
+        let targetCol = findColumnByItemId(overId) as COLUMN | undefined;
 
-        if (!overCol) {
+        if (!targetCol) {
             const overDataType = over.data.current?.type;
             if (overDataType === "ITEM-LIST" || columnsProp.includes(overId as COLUMN)) {
-                overCol = overId as COLUMN;
+                targetCol = overId as COLUMN;
             }
         }
+        targetCol = targetCol ?? currentCol;
 
-        if (!activeCol || !overCol) return;
+        if (!currentCol || !targetCol) return;
 
-        const isSameColumn = activeCol === overCol;
-        const activeItems = itemMapState[activeCol] || [];
-        const overItems = itemMapState[overCol] || [];
+        const targetItems = itemMapState[targetCol] || [];
+        const movedItem = (itemMapState[currentCol] || []).find(i => i.id === activeId);
+        if (!movedItem) return;
 
-        const activeIndex = activeItems.findIndex(i => i.id === activeId);
-
-        let overIndex;
-        if (over.id === overCol) {
-            overIndex = overItems.length;
-        } else {
-            overIndex = overItems.findIndex(i => i.id === overId);
-        }
-
-        if (activeIndex === -1 || overIndex === -1) return;
-
-        let finalItems: BoardItem<T>[] = [];
-
-        if (isSameColumn) {
-            finalItems = arrayMove(activeItems, activeIndex, overIndex);
-        } else {
-            const newActiveItems = [...activeItems];
-            const newOverItems = [...overItems];
-            const [moved] = newActiveItems.splice(activeIndex, 1);
-            newOverItems.splice(overIndex, 0, moved);
-            finalItems = [...newActiveItems, ...newOverItems];
-        }
-
-        const fullFlattenedList: BoardItem<T>[] = [];
-        columnsProp.forEach(col => {
-            if (col === activeCol) {
-                if (isSameColumn) {
-                    fullFlattenedList.push(...finalItems);
-                } else {
-                    fullFlattenedList.push(...activeItems.filter(i => i.id !== activeId));
-                }
-            } else if (col === overCol) {
-                const newOverItems = [...overItems];
-                const [moved] = [...activeItems].splice(activeIndex, 1);
-                newOverItems.splice(overIndex, 0, moved);
-                fullFlattenedList.push(...newOverItems);
-            } else {
-                fullFlattenedList.push(...(itemMapState[col] || []));
-            }
+        const finalTargetItems = placeDroppedCard({
+            targetItems,
+            movedItem,
+            overId,
+            changedColumn: (sourceColumn ?? currentCol) !== targetCol
         });
 
-        onItemsReorder?.(fullFlattenedList, {
+        onItemsReorder?.(finalTargetItems, {
             itemId: activeId,
-            sourceColumn: activeCol,
-            targetColumn: overCol
+            // The column the pointer went down in. `currentCol` would report a
+            // cross-column move as a same-column reorder.
+            sourceColumn: (sourceColumn ?? currentCol),
+            targetColumn: targetCol
         });
     };
 
     return (
         <DndContext
             sensors={sensors}
+            // `rectIntersection`, the default, only reports a target while the
+            // dragged rect physically overlaps it, and prefers whichever
+            // overlap is largest — on a board of tall columns that means a card
+            // held over a gap reports nothing, and one held near a column edge
+            // reports the neighbour. `closestCorners` is the sortable-list
+            // recommendation and is what makes the drop land where it looks
+            // like it will.
+            collisionDetection={closestCorners}
             onDragStart={handleDragStart}
             onDragOver={handleDragOver}
             onDragEnd={handleDragEnd}
+            onDragCancel={handleDragCancel}
         >
             <div className={cls("flex flex-row h-full w-full overflow-x-auto p-4 select-none items-start", className)}>
                 <SortableContext items={columnsProp}>
@@ -385,6 +348,7 @@ export function Board<T, COLUMN extends string>({
                                 allowReorder={allowColumnReorder}
                                 loading={loadingState?.loading}
                                 hasMore={loadingState?.hasMore}
+                                error={loadingState?.error}
                                 totalCount={loadingState?.totalCount}
                                 color={columnColors?.[col]}
                                 onLoadMore={onLoadMoreColumn ? () => onLoadMoreColumn(col) : undefined}
@@ -396,22 +360,21 @@ export function Board<T, COLUMN extends string>({
                 {AddColumnComponent}
             </div>
 
+            {/* The overlay used to be positioned by hand, from `mousemove`
+                listeners on `window` and a grab offset measured off whatever
+                `[role='button']` the pointer went down on. dnd-kit already
+                tracks the pointer and already knows the grab offset — the
+                hand-rolled copy drifted from the position collision detection
+                was actually using, so the card you saw and the slot you got
+                were two different things. */}
             {typeof document !== "undefined" && createPortal(
-                <DragOverlay dropAnimation={null}>
-                    {isDragging && activeItem && (
-                        <div style={{
-                            position: "fixed",
-                            left: overlayPos?.x ?? 0,
-                            top: overlayPos?.y ?? 0,
-                            pointerEvents: "none",
-                            zIndex: 9999
-                        }}>
-                            <ItemComponent
-                                item={activeItem}
-                                isDragging={true}
-                                isClone={true}
-                            />
-                        </div>
+                <DragOverlay dropAnimation={null} zIndex={9999}>
+                    {activeItem && (
+                        <ItemComponent
+                            item={activeItem}
+                            isDragging={true}
+                            isClone={true}
+                        />
                     )}
                 </DragOverlay>,
                 document.body

package/src/views/Kanban/BoardColumn.tsx

@@ -21,6 +21,7 @@ export interface BoardColumnProps<T> {
     allowReorder?: boolean;
     loading?: boolean;
     hasMore?: boolean;
+    error?: Error;
     onLoadMore?: () => void;
     onAddItem?: () => void;
     totalCount?: number;
@@ -38,6 +39,7 @@ export const BoardColumn = memo(function BoardColumn<T>({
     allowReorder = false,
     loading = false,
     hasMore = false,
+    error,
     onLoadMore,
     onAddItem,
     totalCount,
@@ -127,6 +129,7 @@ export const BoardColumn = memo(function BoardColumn<T>({
                     isDragOverColumn={isDragOverColumn}
                     loading={loading}
                     hasMore={hasMore}
+                    error={error}
                     onLoadMore={onLoadMore}
                 />
             </SortableContext>

package/src/views/Kanban/BoardSortableList.tsx

@@ -14,6 +14,7 @@ interface BoardSortableListProps<T> {
     isDragOverColumn: boolean;
     loading?: boolean;
     hasMore?: boolean;
+    error?: Error;
     onLoadMore?: () => void;
 }
 
@@ -25,6 +26,7 @@ export function BoardSortableList<T>({
     isDragOverColumn,
     loading = false,
     hasMore = false,
+    error,
     onLoadMore
 }: BoardSortableListProps<T>) {
     const {
@@ -76,7 +78,10 @@ export function BoardSortableList<T>({
     }, [hasMore, onLoadMore]);
 
     const containerClassName = useMemo(() => cls(
-        "flex flex-col p-2 transition-opacity duration-100 transition-bg ease-linear w-full overflow-y-auto no-scrollbar flex-1 rounded-md",
+        // The scrollbar stays: this is the only thing on the page that scrolls
+        // vertically, and hiding it left a column of cards with no sign that
+        // there were more below the fold.
+        "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-accent-200 dark:bg-surface-900"
             : isDragging
@@ -95,9 +100,16 @@ export function BoardSortableList<T>({
                 strategy={verticalListSortingStrategy}
             >
                 {items.length === 0 && !loading ? (
-                    <div className="flex-1 flex items-center justify-center">
-                        <span className="text-xs text-surface-400 dark:text-surface-500">
-                            No items
+                    <div className="flex-1 flex items-center justify-center px-3 text-center">
+                        {/* "No items" over a header counting eleven of them is
+                            the wrong thing to say when the read failed. */}
+                        <span className={cls(
+                            "text-xs",
+                            error
+                                ? "text-red-600 dark:text-red-400"
+                                : "text-surface-400 dark:text-surface-500"
+                        )}>
+                            {error ? "Could not load this column" : "No items"}
                         </span>
                     </div>
                 ) : (

package/src/views/Kanban/board_types.ts

@@ -39,6 +39,8 @@ export interface ColumnLoadingState {
         hasMore: boolean;
         itemCount: number;
         totalCount?: number;
+        /** Set when the column could not be read at all. */
+        error?: Error;
     };
 }
 
@@ -54,6 +56,14 @@ export interface BoardProps<T, COLUMN extends string> {
     assignColumn: (item: BoardItem<T>) => COLUMN;
     allowColumnReorder?: boolean;
     onColumnReorder?: (columns: COLUMN[]) => void;
+    /**
+     * A card was dropped.
+     *
+     * `items` is the target column's contents in their new order — the moved
+     * card included — so the neighbours of the moved card are the cards it
+     * actually landed between. `sourceColumn` is where the card was picked up,
+     * which is not where it now sits whenever the two differ.
+     */
     onItemsReorder?: (
         items: BoardItem<T>[],
         moveInfo?: {

package/src/views/Kanban/placement.ts

@@ -0,0 +1,62 @@
+import { arrayMove } from "@dnd-kit/sortable";
+import { BoardItem } from "./board_types";
+
+export interface PlaceDroppedCardParams<T> {
+    /**
+     * The destination column as it stands at the moment of the drop. When the
+     * card came from another column it is normally already in here:
+     * `handleDragOver` moves it while the pointer is still down, which is what
+     * opens the gap under the cursor.
+     */
+    targetItems: BoardItem<T>[];
+    /** The card being dropped. */
+    movedItem: BoardItem<T>;
+    /** What the pointer was over — a card id, or the column's own droppable id. */
+    overId: string;
+    /** Whether the card was picked up in a different column than it landed in. */
+    changedColumn: boolean;
+}
+
+/**
+ * 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.
+ */
+export function placeDroppedCard<T>({
+    targetItems,
+    movedItem,
+    overId,
+    changedColumn
+}: PlaceDroppedCardParams<T>): BoardItem<T>[] {
+
+    const indexInTarget = targetItems.findIndex(i => i.id === movedItem.id);
+    const overIndex = targetItems.findIndex(i => i.id === overId);
+
+    // Not placed during the drag — drop straight into the slot. `-1` means the
+    // pointer was over the column itself (an empty one, or the space below the
+    // last card), which appends.
+    if (indexInTarget === -1) {
+        const placed = [...targetItems];
+        placed.splice(overIndex === -1 ? targetItems.length : overIndex, 0, movedItem);
+        return placed;
+    }
+
+    // Released over another card: that card's slot is the one the user chose.
+    if (overIndex !== -1) {
+        return arrayMove(targetItems, indexInTarget, overIndex);
+    }
+
+    // Released over the column rather than a card. The card is already sitting
+    // in the gap the drag opened, so its position is the one on screen —
+    // appending here is what used to send it to the bottom.
+    if (changedColumn) {
+        return targetItems;
+    }
+
+    // Same column, released below the last card.
+    return arrayMove(targetItems, indexInTarget, targetItems.length - 1);
+}

package/src/views/index.ts

@@ -1,5 +1,5 @@
 export * from "./ListView";
 export * from "./CardView";
 export * from "./KanbanView";
-export * from "./TableView";
 export * from "./CollectionView";
+// ./TableView was a pure alias of VirtualTable — import VirtualTable instead.

package/dist/views/TableView.d.ts

@@ -1,6 +0,0 @@
-export { VirtualTable as TableView } from "../components/VirtualTable/VirtualTable";
-export type { VirtualTableProps as TableViewProps } from "../components/VirtualTable/VirtualTableProps";
-export type OnColumnResizeParams = {
-    width: number;
-    key: string;
-};

package/src/views/TableView.tsx

@@ -1,7 +0,0 @@
-export { VirtualTable as TableView } from "../components/VirtualTable/VirtualTable";
-export type { VirtualTableProps as TableViewProps } from "../components/VirtualTable/VirtualTableProps";
-
-export type OnColumnResizeParams = {
-    width: number;
-    key: string;
-};