kanban

1"use client";
2 
3import {
4  type Announcements,
5  type CollisionDetection,
6  closestCenter,
7  closestCorners,
8  DndContext,
9  type DndContextProps,
10  type DragCancelEvent,
11  type DragEndEvent,
12  type DraggableAttributes,
13  type DraggableSyntheticListeners,
14  type DragOverEvent,
15  DragOverlay,
16  type DragStartEvent,
17  type DropAnimation,
18  type DroppableContainer,
19  defaultDropAnimationSideEffects,
20  getFirstCollision,
21  KeyboardCode,
22  type KeyboardCoordinateGetter,
23  KeyboardSensor,
24  MeasuringStrategy,
25  MouseSensor,
26  pointerWithin,
27  rectIntersection,
28  TouchSensor,
29  type UniqueIdentifier,
30  useSensor,
31  useSensors,
32} from "@dnd-kit/core";
33import {
34  type AnimateLayoutChanges,
35  arrayMove,
36  defaultAnimateLayoutChanges,
37  horizontalListSortingStrategy,
38  SortableContext,
39  type SortableContextProps,
40  useSortable,
41  verticalListSortingStrategy,
42} from "@dnd-kit/sortable";
43import { CSS } from "@dnd-kit/utilities";
44import { Slot as SlotPrimitive } from "radix-ui";
45import * as React from "react";
46import * as ReactDOM from "react-dom";
47 
48import { useComposedRefs } from "@/lib/compose-refs";
49import { cn } from "@/lib/utils";
50 
51const directions: string[] = [
52  KeyboardCode.Down,
53  KeyboardCode.Right,
54  KeyboardCode.Up,
55  KeyboardCode.Left,
56];
57 
58const coordinateGetter: KeyboardCoordinateGetter = (event, { context }) => {
59  const { active, droppableRects, droppableContainers, collisionRect } =
60    context;
61 
62  if (directions.includes(event.code)) {
63    event.preventDefault();
64 
65    if (!active || !collisionRect) return;
66 
67    const filteredContainers: DroppableContainer[] = [];
68 
69    for (const entry of droppableContainers.getEnabled()) {
70      if (!entry || entry?.disabled) return;
71 
72      const rect = droppableRects.get(entry.id);
73 
74      if (!rect) return;
75 
76      const data = entry.data.current;
77 
78      if (data) {
79        const { type, children } = data;
80 
81        if (type === "container" && children?.length > 0) {
82          if (active.data.current?.type !== "container") {
83            return;
84          }
85        }
86      }
87 
88      switch (event.code) {
89        case KeyboardCode.Down:
90          if (collisionRect.top < rect.top) {
91            filteredContainers.push(entry);
92          }
93          break;
94        case KeyboardCode.Up:
95          if (collisionRect.top > rect.top) {
96            filteredContainers.push(entry);
97          }
98          break;
99        case KeyboardCode.Left:
100          if (collisionRect.left >= rect.left + rect.width) {
101// … truncated