sortable

1"use client";
2 
3import {
4  type Announcements,
5  closestCenter,
6  closestCorners,
7  DndContext,
8  type DndContextProps,
9  type DragEndEvent,
10  type DraggableAttributes,
11  type DraggableSyntheticListeners,
12  DragOverlay,
13  type DragStartEvent,
14  type DropAnimation,
15  defaultDropAnimationSideEffects,
16  KeyboardSensor,
17  MouseSensor,
18  type ScreenReaderInstructions,
19  TouchSensor,
20  type UniqueIdentifier,
21  useSensor,
22  useSensors,
23} from "@dnd-kit/core";
24import {
25  restrictToHorizontalAxis,
26  restrictToParentElement,
27  restrictToVerticalAxis,
28} from "@dnd-kit/modifiers";
29import {
30  arrayMove,
31  horizontalListSortingStrategy,
32  SortableContext,
33  type SortableContextProps,
34  sortableKeyboardCoordinates,
35  useSortable,
36  verticalListSortingStrategy,
37} from "@dnd-kit/sortable";
38import { CSS } from "@dnd-kit/utilities";
39import { Slot as SlotPrimitive } from "radix-ui";
40import * as React from "react";
41import * as ReactDOM from "react-dom";
42import { useComposedRefs } from "@/lib/compose-refs";
43import { cn } from "@/lib/utils";
44 
45const orientationConfig = {
46  vertical: {
47    modifiers: [restrictToVerticalAxis, restrictToParentElement],
48    strategy: verticalListSortingStrategy,
49    collisionDetection: closestCenter,
50  },
51  horizontal: {
52    modifiers: [restrictToHorizontalAxis, restrictToParentElement],
53    strategy: horizontalListSortingStrategy,
54    collisionDetection: closestCenter,
55  },
56  mixed: {
57    modifiers: [restrictToParentElement],
58    strategy: undefined,
59    collisionDetection: closestCorners,
60  },
61};
62 
63const ROOT_NAME = "Sortable";
64const CONTENT_NAME = "SortableContent";
65const ITEM_NAME = "SortableItem";
66const ITEM_HANDLE_NAME = "SortableItemHandle";
67const OVERLAY_NAME = "SortableOverlay";
68 
69interface SortableRootContextValue<T> {
70  id: string;
71  items: UniqueIdentifier[];
72  modifiers: DndContextProps["modifiers"];
73  strategy: SortableContextProps["strategy"];
74  activeId: UniqueIdentifier | null;
75  setActiveId: (id: UniqueIdentifier | null) => void;
76  getItemValue: (item: T) => UniqueIdentifier;
77  flatCursor: boolean;
78}
79 
80const SortableRootContext =
81  React.createContext<SortableRootContextValue<unknown> | null>(null);
82 
83function useSortableContext(consumerName: string) {
84  const context = React.useContext(SortableRootContext);
85  if (!context) {
86    throw new Error(`\`${consumerName}\` must be used within \`${ROOT_NAME}\``);
87  }
88  return context;
89}
90 
91interface GetItemValue<T> {
92  /**
93// … truncated