Draggable

1"use client";
2 
3import { cn } from "@/lib/utils";
4import { type UniqueIdentifier, useDraggable } from "@dnd-kit/core";
5import { CSS } from "@dnd-kit/utilities";
6import type * as React from "react";
7import { useDndMounted } from "./dnd-context";
8 
9export interface DraggableProps
10  extends Omit<React.HTMLAttributes<HTMLDivElement>, "id"> {
11  /** Unique identifier for this draggable item */
12  id: UniqueIdentifier;
13  /** Whether dragging is disabled */
14  disabled?: boolean;
15  /** Optional data to pass along with drag events */
16  data?: Record<string, unknown>;
17  /** Element type to render (default: div) */
18  as?: React.ElementType;
19  children: React.ReactNode;
20}
21 
22function DraggableInner({
23  id,
24  disabled = false,
25  data,
26  children,
27  className,
28  as: Component = "div",
29  ...props
30}: DraggableProps) {
31  const { attributes, listeners, setNodeRef, transform, isDragging } =
32    useDraggable({
33      id,
34      disabled,
35      data,
36    });
37 
38  const style: React.CSSProperties = {
39    transform: CSS.Translate.toString(transform),
40  };
41 
42  return (
43    <Component
44      ref={setNodeRef}
45      style={style}
46      data-draggable-id={id}
47      data-dragging={isDragging}
48      className={cn(
49        isDragging && "opacity-50 z-50",
50        !disabled && "cursor-grab",
51        isDragging && "cursor-grabbing",
52        disabled && "cursor-not-allowed opacity-60",
53        className,
54      )}
55      {...listeners}
56      {...attributes}
57      {...props}
58    >
59      {children}
60    </Component>
61  );
62}
63 
64export function Draggable({
65  children,
66  className,
67  as: Component = "div",
68  id,
69  disabled,
70  data,
71  ...props
72}: DraggableProps) {
73  const isMounted = useDndMounted();
74 
75  // Render static version on server
76  if (!isMounted) {
77    return (
78      <Component className={className} {...props}>
79        {children}
80      </Component>
81    );
82  }
83 
84  return (
85    <DraggableInner
86      className={className}
87      as={Component}
88      id={id}
89      disabled={disabled}
90      data={data}
91      {...props}
92    >
93      {children}
94    </DraggableInner>
95  );
96}
97 
98export interface DraggableHandleProps
99  extends React.HTMLAttributes<HTMLDivElement> {
100  children: React.ReactNode;
101}
102 
103/**
104 * Use this component to create a drag handle within a Draggable.
105 * Pass the listeners and attributes from useDraggable to this component.
106 */
107export function DraggableHandle({
108  children,
109  className,
110  ...props
111}: DraggableHandleProps) {
112  return (
113    <div
114// … truncated