feat: update kanban

sadmann7 · sadmann7 · commit dbd63bb45c31 · 2025-01-22T17:40:02.000+06:00
diff --git a/docs/registry/default/ui/kanban.tsx b/docs/registry/default/ui/kanban.tsx
@@ -23,6 +23,7 @@ import {
 } from "@dnd-kit/core";
 import {
   SortableContext,
+  type SortableContextProps,
   arrayMove,
   sortableKeyboardCoordinates,
   useSortable,
@@ -55,6 +56,8 @@ const KANBAN_ERROR = {
 interface KanbanContextValue<T> {
   id: string;
   items: Record<UniqueIdentifier, T[]>;
+  modifiers: DndContextProps["modifiers"];
+  strategy: SortableContextProps["strategy"];
   activeId: UniqueIdentifier | null;
   setActiveId: (id: UniqueIdentifier | null) => void;
   getItemValue: (item: T) => UniqueIdentifier;
@@ -78,7 +81,9 @@ type KanbanProps<T> = DndContextProps & {
   value: Record<UniqueIdentifier, T[]>;
   onValueChange?: (columns: Record<UniqueIdentifier, T[]>) => void;
   onMove?: (event: DragEndEvent) => void;
+  modifiers?: DndContextProps["modifiers"];
   sensors?: DndContextProps["sensors"];
+  strategy?: SortableContextProps["strategy"];
   flatCursor?: boolean;
 } & (T extends object
     ? { getItemValue: (item: T) => UniqueIdentifier }
@@ -89,7 +94,9 @@ function Kanban<T>(props: KanbanProps<T>) {
     id = React.useId(),
     value,
     onValueChange,
+    modifiers,
     sensors: sensorsProp,
+    strategy = verticalListSortingStrategy,
     onMove,
     getItemValue: getItemValueProp,
     flatCursor = false,
@@ -125,18 +132,6 @@ function Kanban<T>(props: KanbanProps<T>) {
     [getItemValueProp],
   );
 
-  const contextValue = React.useMemo<KanbanContextValue<T>>(
-    () => ({
-      id,
-      items: value,
-      activeId,
-      setActiveId,
-      getItemValue,
-      flatCursor,
-    }),
-    [id, value, activeId, getItemValue, flatCursor],
-  );
-
   const getContainer = React.useCallback(
     (id: UniqueIdentifier) => {
       if (id in value) return id;
@@ -203,10 +198,25 @@ function Kanban<T>(props: KanbanProps<T>) {
     [activeId, value, getItemValue],
   );
 
+  const contextValue = React.useMemo<KanbanContextValue<T>>(
+    () => ({
+      id,
+      items: value,
+      modifiers,
+      strategy,
+      activeId,
+      setActiveId,
+      getItemValue,
+      flatCursor,
+    }),
+    [id, value, activeId, modifiers, strategy, getItemValue, flatCursor],
+  );
+
   return (
     <KanbanContext.Provider value={contextValue as KanbanContextValue<unknown>}>
       <DndContext
         id={id}
+        modifiers={modifiers}
         sensors={sensorsProp ?? sensors}
         collisionDetection={collisionDetection}
         measuring={{
@@ -444,7 +454,7 @@ interface KanbanColumnProps extends SlotProps {
 
 const KanbanColumn = React.forwardRef<HTMLDivElement, KanbanColumnProps>(
   (props, forwardedRef) => {
-    const { value, asChild, ...columnProps } = props;
+    const { value, asChild, className, ...columnProps } = props;
     const context = useKanbanContext("board");
     const inBoard = React.useContext(KanbanBoardContext);
 
@@ -453,19 +463,20 @@ const KanbanColumn = React.forwardRef<HTMLDivElement, KanbanColumnProps>(
     }
 
     const ColumnSlot = asChild ? Slot : "div";
-    const items = context.items[value] ?? [];
+
+    const items = React.useMemo(() => {
+      const items = context.items[value] ?? [];
+      return items.map((item) => context.getItemValue(item));
+    }, [context.items, value, context.getItemValue]);
 
     return (
-      <SortableContext
-        items={items.map((item) => context.getItemValue(item))}
-        strategy={verticalListSortingStrategy}
-      >
+      <SortableContext strategy={context.strategy} items={items}>
         <ColumnSlot
           {...columnProps}
           ref={forwardedRef}
           className={cn(
-            "flex h-full min-h-[200px] w-[300px] flex-none flex-col gap-2 rounded-lg bg-muted/50 p-4",
-            props.className,
+            "flex size-full flex-col gap-2 rounded-lg border bg-card p-4 text-card-foreground",
+            className,
           )}
         />
       </SortableContext>
@@ -543,6 +554,7 @@ const KanbanItem = React.forwardRef<HTMLDivElement, KanbanItemProps>(
           ref={composeRefs(forwardedRef, (node) => setNodeRef(node))}
           style={composedStyle}
           className={cn(
+            "data-[dragging]:focus-visible:outline-none data-[dragging]:focus-visible:ring-1 data-[dragging]:focus-visible:ring-ring data-[dragging]:focus-visible:ring-offset-1",
             {
               "touch-none select-none": asGrip,
               "cursor-default": context.flatCursor,
@@ -656,17 +668,17 @@ const ItemGrip = KanbanItemGrip;
 const Overlay = KanbanOverlay;
 
 export {
-  Root,
   Board,
   Column,
   Item,
   ItemGrip,
-  Overlay,
   //
   Kanban,
   KanbanBoard,
   KanbanColumn,
   KanbanItem,
   KanbanItemGrip,
   KanbanOverlay,
+  Overlay,
+  Root,
 };
diff --git a/docs/registry/default/ui/sortable.tsx b/docs/registry/default/ui/sortable.tsx
@@ -101,6 +101,7 @@ type SortableProps<T> = DndContextProps & {
   collisionDetection?: DndContextProps["collisionDetection"];
   modifiers?: DndContextProps["modifiers"];
   sensors?: DndContextProps["sensors"];
+  strategy?: SortableContextProps["strategy"];
   orientation?: "vertical" | "horizontal" | "mixed";
   flatCursor?: boolean;
 } & (T extends object
@@ -115,6 +116,7 @@ function Sortable<T>(props: SortableProps<T>) {
     collisionDetection,
     modifiers,
     sensors: sensorsProp,
+    strategy,
     onMove,
     orientation = "vertical",
     flatCursor = false,
@@ -152,7 +154,7 @@ function Sortable<T>(props: SortableProps<T>) {
       id,
       items: value,
       modifiers: modifiers ?? config.modifiers,
-      strategy: config.strategy,
+      strategy: strategy ?? config.strategy,
       activeId,
       setActiveId,
       getItemValue,
@@ -162,6 +164,7 @@ function Sortable<T>(props: SortableProps<T>) {
       id,
       value,
       modifiers,
+      strategy,
       config.modifiers,
       config.strategy,
       activeId,
@@ -256,12 +259,14 @@ const SortableContent = React.forwardRef<HTMLDivElement, SortableContentProps>(
 
     const ContentSlot = asChild ? Slot : "div";
 
+    const items = React.useMemo(() => {
+      return context.items.map((item) => context.getItemValue(item));
+    }, [context.items, context.getItemValue]);
+
     return (
       <SortableContentContext.Provider value={true}>
         <SortableContext
-          items={context.items.map((item) => ({
-            id: context.getItemValue(item),
-          }))}
+          items={items}
           strategy={strategyProp ?? context.strategy}
         >
           <ContentSlot {...contentProps} ref={forwardedRef} />
@@ -367,37 +372,34 @@ const SortableItem = React.forwardRef<HTMLDivElement, SortableItemProps>(
     const { value, style, asGrip, asChild, className, ...itemProps } = props;
     const context = useSortableContext("item");
     const id = React.useId();
-    const sortableContext = useSortable({ id: value });
+    const {
+      attributes,
+      listeners,
+      setNodeRef,
+      transform,
+      transition,
+      isDragging,
+    } = useSortable({ id: value });
 
     const composedStyle = React.useMemo<React.CSSProperties>(() => {
       return {
-        opacity: sortableContext.isDragging ? 0.5 : 1,
-        transform: CSS.Translate.toString(sortableContext.transform),
-        transition: sortableContext.transition,
+        opacity: isDragging ? 0.5 : 1,
+        transform: CSS.Translate.toString(transform),
+        transition,
         ...style,
       };
-    }, [
-      sortableContext.isDragging,
-      sortableContext.transform,
-      sortableContext.transition,
-      style,
-    ]);
+    }, [isDragging, transform, transition, style]);
 
     const ItemSlot = asChild ? Slot : "div";
 
     const itemContext = React.useMemo<SortableItemContextValue>(
       () => ({
         id,
-        attributes: sortableContext.attributes,
-        listeners: sortableContext.listeners,
-        isDragging: sortableContext.isDragging,
+        attributes,
+        listeners,
+        isDragging,
       }),
-      [
-        id,
-        sortableContext.attributes,
-        sortableContext.listeners,
-        sortableContext.isDragging,
-      ],
+      [id, attributes, listeners, isDragging],
     );
 
     if (value === "") {
@@ -408,25 +410,22 @@ const SortableItem = React.forwardRef<HTMLDivElement, SortableItemProps>(
       <SortableItemContext.Provider value={itemContext}>
         <ItemSlot
           id={id}
-          data-dragging={sortableContext.isDragging ? "" : undefined}
+          data-dragging={isDragging ? "" : undefined}
           {...itemProps}
-          ref={composeRefs(forwardedRef, (node) =>
-            sortableContext.setNodeRef(node),
-          )}
+          ref={composeRefs(forwardedRef, (node) => setNodeRef(node))}
           style={composedStyle}
           className={cn(
             "data-[dragging]:focus-visible:outline-none data-[dragging]:focus-visible:ring-1 data-[dragging]:focus-visible:ring-ring data-[dragging]:focus-visible:ring-offset-1",
             {
               "touch-none select-none": asGrip,
               "cursor-default": context.flatCursor,
               "data-[dragging]:cursor-grabbing": !context.flatCursor,
-              "cursor-grab":
-                !sortableContext.isDragging && asGrip && !context.flatCursor,
+              "cursor-grab": !isDragging && asGrip && !context.flatCursor,
             },
             className,
           )}
-          {...(asGrip ? sortableContext.attributes : {})}
-          {...(asGrip ? sortableContext.listeners : {})}
+          {...(asGrip ? attributes : {})}
+          {...(asGrip ? listeners : {})}
         />
       </SortableItemContext.Provider>
     );
diff --git a/docs/types/docs/sortable.ts b/docs/types/docs/sortable.ts
@@ -54,6 +54,16 @@ export interface RootProps<TData> extends DndContextProps {
    */
   modifiers?: DndContextProps["modifiers"];
 
+  /**
+   * The strategy to use for sorting the items.
+   * @default
+   * Automatically selected based on orientation:
+   * - vertical: verticalListSortingStrategy
+   * - horizontal: horizontalListSortingStrategy
+   * - mixed: undefined
+   */
+  strategy?: SortableContextProps["strategy"];
+
   /**
    * An array of sensors that will be used to detect the position of the sortable items.\n
    * @default
