1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
// adapted from https://github.com/Georgegriff/react-dnd-kit-tailwind-shadcn-ui/blob/main/src/components/multipleContainersKeyboardPreset.tsimport {  closestCorners,  DroppableContainer,  getFirstCollision,  KeyboardCode,  KeyboardCoordinateGetter,} from "../../../deps/@dnd-kit/core.ts";
const directions: string[] = [  KeyboardCode.Down,  KeyboardCode.Right,  KeyboardCode.Up,  KeyboardCode.Left,];
export const coordinateGetter: KeyboardCoordinateGetter = (  event,  { context: { active, droppableRects, droppableContainers, collisionRect } },) => {  if (directions.includes(event.code)) {    event.preventDefault();
    if (!active || !collisionRect) return;
    const filteredContainers: DroppableContainer[] = [];
    droppableContainers.getEnabled().forEach((entry) => {      if (!entry || entry?.disabled) return;
      const rect = droppableRects.get(entry.id);
      if (!rect) return;
      const data = entry.data.current;
      if (data) {        const { type, children } = data;
        if (type === "Group" && children?.length > 0) {          if (active.data.current?.type !== "Group") return;        }      }
      switch (event.code) {        case KeyboardCode.Down:          if (active.data.current?.type === "Group") return;
          if (collisionRect.top < rect.top) {            // find all droppable areas below            filteredContainers.push(entry);          }          break;        case KeyboardCode.Up:          if (active.data.current?.type === "Group") {            return;          }          if (collisionRect.top > rect.top) {            // find all droppable areas above            filteredContainers.push(entry);          }          break;        case KeyboardCode.Left:          if (collisionRect.left >= rect.left + rect.width) {            // find all droppable areas to left            filteredContainers.push(entry);          }          break;        case KeyboardCode.Right:          // find all droppable areas to right          if (collisionRect.left + collisionRect.width <= rect.left) {            filteredContainers.push(entry);          }          break;      }    });    const collisions = closestCorners({      active,      collisionRect: collisionRect,      droppableRects,      droppableContainers: filteredContainers,      pointerCoordinates: null,    });    const closestId = getFirstCollision(collisions, "id");
    if (closestId != null) {      const newDroppable = droppableContainers.get(closestId);      const newNode = newDroppable?.node.current;      const newRect = newDroppable?.rect.current;
      if (newNode && newRect) {        return {          x: newRect.left,          y: newRect.top,        };      }    }  }
  return undefined;};