feat: update kanban

Author: sadmann7

docs/content/docs/components/sortable.mdx

@@ -64,7 +64,7 @@ import * as Sortable from "@/components/ui/sortable";
 
 ### With Handle
 
-Use `ItemHandle` as a drag handle for sorting.
+Use `ItemHandle` as a drag handle for sortable items.
 
 <ComponentTabs name="sortable-handle-demo" />
 

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

@@ -121,7 +121,7 @@ export default function KanbanDemo() {
                 <GripVertical className="h-4 w-4" />
               </Button>
             </div>
-            <div className="flex max-h-[600px] flex-col gap-2 overflow-y-auto p-0.5">
+            <div className="flex flex-col gap-2 p-0.5">
               {tasks?.map((task) => (
                 <TaskCard key={task.id} task={task} asHandle />
               ))}

docs/registry/default/example/sortable-handle-demo.tsx

@@ -51,7 +51,7 @@ export default function SortableHandleDemo() {
         <SortableContent asChild>
           <TableBody>
             {tricks.map((trick) => (
-              <SortableItem key={trick.id} value={trick.id} asChild asHandle>
+              <SortableItem key={trick.id} value={trick.id} asChild>
                 <TableRow>
                   <TableCell className="w-[50px]">
                     <SortableItemHandle asChild>

docs/registry/default/ui/kanban.tsx

@@ -611,8 +611,6 @@ const KanbanItem = React.forwardRef<HTMLDivElement, KanbanItemProps>(
       };
     }, [transform, transition, style]);
 
-    const ItemSlot = asChild ? Slot : "div";
-
     const itemContext = React.useMemo<KanbanItemContextValue>(
       () => ({
         id,
@@ -625,10 +623,13 @@ const KanbanItem = React.forwardRef<HTMLDivElement, KanbanItemProps>(
       [id, attributes, listeners, setActivatorNodeRef, isDragging, disabled],
     );
 
+    const ItemSlot = asChild ? Slot : "div";
+
     return (
       <KanbanItemContext.Provider value={itemContext}>
         <ItemSlot
           data-dragging={isDragging ? "" : undefined}
+          data-kanban-item=""
           {...itemProps}
           {...(asHandle ? attributes : {})}
           {...(asHandle ? listeners : {})}
@@ -739,7 +740,10 @@ function KanbanOverlay(props: KanbanOverlayProps) {
     <DragOverlay
       modifiers={context.modifiers}
       dropAnimation={dropAnimationProp ?? dropAnimation}
-      className={cn(!context.flatCursor && "cursor-grabbing")}
+      className={cn(
+        "[&_[data-kanban-item]]:opacity-50 [&_[data-kanban-item]]:outline-none [&_[data-kanban-item]]:ring-1 [&_[data-kanban-item]]:ring-ring [&_[data-kanban-item]]:ring-offset-1",
+        !context.flatCursor && "cursor-grabbing",
+      )}
       {...overlayProps}
     >
       {context.activeId && children

docs/registry/default/ui/sortable.tsx

@@ -327,7 +327,10 @@ function SortableOverlay(props: SortableOverlayProps) {
     <DragOverlay
       modifiers={context.modifiers}
       dropAnimation={dropAnimationProp ?? dropAnimation}
-      className={cn(!context.flatCursor && "cursor-grabbing")}
+      className={cn(
+        "[&_[data-sortable-item]]:opacity-50 [&_[data-sortable-item]]:outline-none [&_[data-sortable-item]]:ring-1 [&_[data-sortable-item]]:ring-ring [&_[data-sortable-item]]:ring-offset-1",
+        !context.flatCursor && "cursor-grabbing",
+      )}
       {...overlayProps}
     >
       <SortableOverlayContext.Provider value={true}>
@@ -439,6 +442,7 @@ const SortableItem = React.forwardRef<HTMLDivElement, SortableItemProps>(
         <ItemSlot
           id={id}
           data-dragging={isDragging ? "" : undefined}
+          data-sortable-item=""
           {...itemProps}
           {...(asHandle ? attributes : {})}
           {...(asHandle ? listeners : {})}