@moontra/moonui-pro 2.14.0 → 2.14.1

package/dist/index.mjs

@@ -12503,6 +12503,9 @@ function Kanban({
   const [selectedColor, setSelectedColor] = useState("#6B7280");
   const { scrollRef, startAutoScroll, stopAutoScroll } = useAutoScroll();
   const { toast: toast3 } = useToast();
+  useEffect(() => {
+    setColumns(initialColumns);
+  }, [initialColumns]);
   const filteredColumns = useMemo(() => {
     if (!searchQuery && !activeFilter)
       return columns;
@@ -12604,7 +12607,7 @@ function Kanban({
     stopAutoScroll();
   };
   const handleDrop = (e, targetColumnId, targetIndex) => {
-    if (disabled || !draggedCard || !onCardMove)
+    if (disabled || !draggedCard)
       return;
     e.preventDefault();
     const targetColumn = columns.find((col) => col.id === targetColumnId);
@@ -12623,7 +12626,27 @@ function Kanban({
       }
     }
     if (sourceColumnId && sourceCard) {
-      onCardMove(draggedCard, sourceColumnId, targetColumnId, targetIndex);
+      const newColumns = columns.map((col) => {
+        if (col.id === sourceColumnId) {
+          return {
+            ...col,
+            cards: col.cards.filter((c2) => c2.id !== draggedCard)
+          };
+        }
+        if (col.id === targetColumnId) {
+          const newCards = [...col.cards];
+          newCards.splice(targetIndex, 0, sourceCard);
+          return {
+            ...col,
+            cards: newCards
+          };
+        }
+        return col;
+      });
+      setColumns(newColumns);
+      if (onCardMove) {
+        onCardMove(draggedCard, sourceColumnId, targetColumnId, targetIndex);
+      }
     }
     handleDragEnd();
   };
@@ -12705,10 +12728,9 @@ function Kanban({
     }
   };
   const handleCardClick = (card) => {
+    setSelectedCard(card);
     if (onCardClick) {
       onCardClick(card);
-    } else {
-      setSelectedCard(card);
     }
   };
   const handleCardUpdate = (updatedCard) => {
@@ -12719,11 +12741,7 @@ function Kanban({
     })));
   };
   const handleAddCard = (columnId, newCard) => {
-    if (onAddCard) {
-      onAddCard(columnId, newCard);
-    } else {
-      setAddCardColumnId(columnId);
-    }
+    setAddCardColumnId(columnId);
   };
   const handleAddNewCard = (card) => {
     if (!addCardColumnId)
@@ -12743,7 +12761,9 @@ function Kanban({
       }
       return col;
     }));
-    onAddCard?.(addCardColumnId, newCard);
+    if (onAddCard) {
+      onAddCard(addCardColumnId, newCard);
+    }
     toast3({
       title: "Card added",
       description: `"${newCard.title}" has been added`
@@ -13173,7 +13193,7 @@ function Kanban({
                         cardTemplates.map((template, index2) => /* @__PURE__ */ jsxs(
                           MoonUIDropdownMenuItemPro,
                           {
-                            onClick: () => handleAddCard(column.id, template),
+                            onClick: () => handleAddCard(column.id),
                             children: [
                               /* @__PURE__ */ jsx(Star, { className: "mr-2 h-4 w-4" }),
                               template.title || `Template ${index2 + 1}`

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@moontra/moonui-pro",
-  "version": "2.14.0",
+  "version": "2.14.1",
   "description": "Premium React components for MoonUI - Advanced UI library with 50+ pro components including performance, interactive, and gesture components",
   "type": "module",
   "main": "dist/index.mjs",

package/src/components/kanban/kanban.tsx

@@ -603,6 +603,11 @@ export function Kanban({
   const { scrollRef, startAutoScroll, stopAutoScroll } = useAutoScroll()
   const { toast } = useToast()
 
+  // Update state when props change
+  useEffect(() => {
+    setColumns(initialColumns)
+  }, [initialColumns])
+
   // Filter cards based on search and filters
   const filteredColumns = useMemo(() => {
     if (!searchQuery && !activeFilter) return columns
@@ -728,7 +733,7 @@ export function Kanban({
   }
 
   const handleDrop = (e: React.DragEvent, targetColumnId: string, targetIndex: number) => {
-    if (disabled || !draggedCard || !onCardMove) return
+    if (disabled || !draggedCard) return
     e.preventDefault()
     
     const targetColumn = columns.find(col => col.id === targetColumnId)
@@ -752,7 +757,30 @@ export function Kanban({
     }
 
     if (sourceColumnId && sourceCard) {
-      onCardMove(draggedCard, sourceColumnId, targetColumnId, targetIndex)
+      // Update local state immediately for better UX
+      const newColumns = columns.map(col => {
+        if (col.id === sourceColumnId) {
+          return {
+            ...col,
+            cards: col.cards.filter(c => c.id !== draggedCard)
+          }
+        }
+        if (col.id === targetColumnId) {
+          const newCards = [...col.cards]
+          newCards.splice(targetIndex, 0, sourceCard!)
+          return {
+            ...col,
+            cards: newCards
+          }
+        }
+        return col
+      })
+      setColumns(newColumns)
+      
+      // Call the callback if provided
+      if (onCardMove) {
+        onCardMove(draggedCard, sourceColumnId, targetColumnId, targetIndex)
+      }
     }
 
     handleDragEnd()
@@ -838,10 +866,9 @@ export function Kanban({
 
   // Card handlers
   const handleCardClick = (card: KanbanCard) => {
+    setSelectedCard(card)
     if (onCardClick) {
       onCardClick(card)
-    } else {
-      setSelectedCard(card)
     }
   }
 
@@ -854,11 +881,7 @@ export function Kanban({
   }
 
   const handleAddCard = (columnId: string, newCard?: Partial<KanbanCard>) => {
-    if (onAddCard) {
-      onAddCard(columnId, newCard)
-    } else {
-      setAddCardColumnId(columnId)
-    }
+    setAddCardColumnId(columnId)
   }
 
   const handleAddNewCard = (card: Partial<KanbanCard>) => {
@@ -871,6 +894,7 @@ export function Kanban({
       ...card
     }
     
+    // Update local state
     setColumns(columns.map(col => {
       if (col.id === addCardColumnId) {
         return {
@@ -881,7 +905,11 @@ export function Kanban({
       return col
     }))
     
-    onAddCard?.(addCardColumnId, newCard)
+    // Call the callback if provided
+    if (onAddCard) {
+      onAddCard(addCardColumnId, newCard)
+    }
+    
     toast({
       title: "Card added",
       description: `"${newCard.title}" has been added`