feat: update column

Author: sadmann7

docs/registry/default/example/kanban-demo.tsx

@@ -3,10 +3,6 @@
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import * as Kanban from "@/registry/default/ui/kanban";
-import {
-  SortableContext,
-  horizontalListSortingStrategy,
-} from "@dnd-kit/sortable";
 import { GripVertical } from "lucide-react";
 import * as React from "react";
 
@@ -113,36 +109,25 @@ export default function KanbanDemo() {
     >
       <Kanban.Board>
         {Object.entries(columns).map(([columnId, tasks]) => (
-          <Kanban.Column key={columnId} value={columnId}>
-            <div className="flex items-center justify-between">
-              <div className="flex items-center gap-2">
-                <h3 className="font-semibold">{COLUMN_TITLES[columnId]}</h3>
-                <Badge
-                  variant="secondary"
-                  className="pointer-events-none rounded-sm"
-                >
-                  {tasks?.length ?? 0}
-                </Badge>
-              </div>
-              <Kanban.ColumnHandle asChild>
-                <Button variant="ghost" size="icon">
-                  <GripVertical className="h-4 w-4" />
-                </Button>
-              </Kanban.ColumnHandle>
-            </div>
-            <div className="flex flex-col gap-2 p-0.5">
-              {tasks?.map((task) => (
-                <TaskCard key={task.id} task={task} asHandle />
-              ))}
-            </div>
-          </Kanban.Column>
+          <TaskColumn key={columnId} columnId={columnId} tasks={tasks} />
         ))}
       </Kanban.Board>
       <Kanban.Overlay>
-        {(activeItem) => {
+        {({ value, type }) => {
+          if (type === "column") {
+            const [columnId, tasks] =
+              Object.entries(columns).find(([id]) => id === value) ?? [];
+
+            if (!columnId || !tasks) return null;
+
+            return (
+              <TaskColumn key={columnId} columnId={columnId} tasks={tasks} />
+            );
+          }
+
           const task = Object.values(columns)
             .flat()
-            .find((task) => task.id === activeItem.value);
+            .find((task) => task.id === value);
 
           if (!task) return null;
 
@@ -190,3 +175,37 @@ function TaskCard({ task, ...props }: TaskCardProps) {
     </Kanban.Item>
   );
 }
+
+interface TaskColumnProps
+  extends Omit<
+    React.ComponentProps<typeof Kanban.Column>,
+    "value" | "children"
+  > {
+  columnId: string;
+  tasks: Task[];
+}
+
+function TaskColumn({ columnId, tasks, ...props }: TaskColumnProps) {
+  return (
+    <Kanban.Column key={columnId} value={columnId} {...props}>
+      <div className="flex items-center justify-between">
+        <div className="flex items-center gap-2">
+          <h3 className="font-semibold">{COLUMN_TITLES[columnId]}</h3>
+          <Badge variant="secondary" className="pointer-events-none rounded-sm">
+            {tasks?.length ?? 0}
+          </Badge>
+        </div>
+        <Kanban.ColumnHandle asChild>
+          <Button variant="ghost" size="icon">
+            <GripVertical className="h-4 w-4" />
+          </Button>
+        </Kanban.ColumnHandle>
+      </div>
+      <div className="flex flex-col gap-2 p-0.5">
+        {tasks?.map((task) => (
+          <TaskCard key={task.id} task={task} asHandle />
+        ))}
+      </div>
+    </Kanban.Column>
+  );
+}

docs/registry/default/ui/kanban.tsx

@@ -573,9 +573,10 @@ const KanbanColumn = React.forwardRef<HTMLDivElement, KanbanColumnProps>(
 
     const context = useKanbanContext("column");
     const inBoard = React.useContext(KanbanBoardContext);
+    const inOverlay = React.useContext(KanbanOverlayContext);
     const id = React.useId();
 
-    if (!inBoard) {
+    if (!inBoard && !inOverlay) {
       throw new Error(KANBAN_ERROR.column);
     }
 
@@ -665,7 +666,6 @@ const KanbanColumn = React.forwardRef<HTMLDivElement, KanbanColumnProps>(
   },
 );
 KanbanColumn.displayName = COLUMN_NAME;
-
 interface KanbanColumnHandleProps
   extends React.ComponentPropsWithoutRef<"button"> {
   asChild?: boolean;
@@ -750,6 +750,13 @@ const KanbanItem = React.forwardRef<HTMLDivElement, KanbanItemProps>(
       ...itemProps
     } = props;
     const context = useKanbanContext("item");
+    const inBoard = React.useContext(KanbanBoardContext);
+    const inOverlay = React.useContext(KanbanOverlayContext);
+
+    if (!inBoard && !inOverlay) {
+      throw new Error(KANBAN_ERROR.item);
+    }
+
     const id = React.useId();
     const {
       attributes,
@@ -867,6 +874,7 @@ const KanbanItemHandle = React.forwardRef<
 });
 KanbanItemHandle.displayName = ITEM_HANDLE_NAME;
 
+const KanbanOverlayContext = React.createContext(false);
 const dropAnimation: DropAnimation = {
   sideEffects: defaultDropAnimationSideEffects({
     styles: {
@@ -881,7 +889,10 @@ interface KanbanOverlayProps
   extends Omit<React.ComponentPropsWithoutRef<typeof DragOverlay>, "children"> {
   container?: HTMLElement | DocumentFragment | null;
   children?:
-    | ((params: { value: UniqueIdentifier }) => React.ReactNode)
+    | ((params: {
+        value: UniqueIdentifier;
+        type: "column" | "item";
+      }) => React.ReactNode)
     | React.ReactNode;
 }
 
@@ -909,11 +920,16 @@ function KanbanOverlay(props: KanbanOverlayProps) {
       className={cn(!context.flatCursor && "cursor-grabbing")}
       {...overlayProps}
     >
-      {context.activeId && children
-        ? typeof children === "function"
-          ? children({ value: context.activeId })
-          : children
-        : null}
+      <KanbanOverlayContext.Provider value={true}>
+        {context.activeId && children
+          ? typeof children === "function"
+            ? children({
+                value: context.activeId,
+                type: context.activeId in context.items ? "column" : "item",
+              })
+            : children
+          : null}
+      </KanbanOverlayContext.Provider>
     </DragOverlay>,
     container,
   );

docs/registry/default/ui/sortable.tsx

@@ -382,7 +382,6 @@ const SortableItem = React.forwardRef<HTMLDivElement, SortableItemProps>(
       className,
       ...itemProps
     } = props;
-
     const inSortableContent = React.useContext(SortableContentContext);
     const inSortableOverlay = React.useContext(SortableOverlayContext);