@moontra/moonui-pro 2.14.0 → 2.14.2

package/dist/index.mjs

@@ -11243,49 +11243,37 @@ function CardDetailModal({
     });
   };
   return /* @__PURE__ */ jsx(MoonUIDialogPro, { open: isOpen, onOpenChange: onClose, children: /* @__PURE__ */ jsxs(MoonUIDialogContentPro, { className: "max-w-4xl max-h-[90vh] overflow-hidden p-0", children: [
-    /* @__PURE__ */ jsx("div", { className: "p-6 pb-0", children: /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between", children: [
-      /* @__PURE__ */ jsxs("div", { className: "flex-1", children: [
-        isEditingTitle ? /* @__PURE__ */ jsx(
-          MoonUIInputPro,
-          {
-            value: card.title,
-            onChange: (e) => updateCard({ title: e.target.value }),
-            onBlur: () => setIsEditingTitle(false),
-            onKeyDown: (e) => {
-              if (e.key === "Enter")
-                setIsEditingTitle(false);
-              if (e.key === "Escape") {
-                setCard(initialCard);
-                setIsEditingTitle(false);
-              }
-            },
-            className: "text-xl font-semibold",
-            autoFocus: true
-          }
-        ) : /* @__PURE__ */ jsx(
-          "h2",
-          {
-            className: "text-xl font-semibold cursor-pointer hover:bg-muted rounded px-2 -mx-2 py-1",
-            onClick: () => setIsEditingTitle(true),
-            children: card.title
-          }
-        ),
-        currentColumn && /* @__PURE__ */ jsxs("p", { className: "text-sm text-muted-foreground mt-1", children: [
-          "in ",
-          currentColumn
-        ] })
-      ] }),
-      /* @__PURE__ */ jsx(
-        MoonUIButtonPro,
+    /* @__PURE__ */ jsx("div", { className: "p-6 pb-0", children: /* @__PURE__ */ jsx("div", { className: "flex items-start justify-between", children: /* @__PURE__ */ jsxs("div", { className: "flex-1", children: [
+      isEditingTitle ? /* @__PURE__ */ jsx(
+        MoonUIInputPro,
         {
-          variant: "ghost",
-          size: "icon",
-          onClick: onClose,
-          className: "h-8 w-8",
-          children: /* @__PURE__ */ jsx(X, { className: "h-4 w-4" })
+          value: card.title,
+          onChange: (e) => updateCard({ title: e.target.value }),
+          onBlur: () => setIsEditingTitle(false),
+          onKeyDown: (e) => {
+            if (e.key === "Enter")
+              setIsEditingTitle(false);
+            if (e.key === "Escape") {
+              setCard(initialCard);
+              setIsEditingTitle(false);
+            }
+          },
+          className: "text-xl font-semibold",
+          autoFocus: true
         }
-      )
-    ] }) }),
+      ) : /* @__PURE__ */ jsx(
+        "h2",
+        {
+          className: "text-xl font-semibold cursor-pointer hover:bg-muted rounded px-2 -mx-2 py-1",
+          onClick: () => setIsEditingTitle(true),
+          children: card.title
+        }
+      ),
+      currentColumn && /* @__PURE__ */ jsxs("p", { className: "text-sm text-muted-foreground mt-1", children: [
+        "in ",
+        currentColumn
+      ] })
+    ] }) }) }),
     /* @__PURE__ */ jsxs(MoonUITabsPro, { value: selectedTab, onValueChange: setSelectedTab, className: "flex-1", children: [
       /* @__PURE__ */ jsx("div", { className: "px-6 pt-4", children: /* @__PURE__ */ jsxs(MoonUITabsListPro, { children: [
         /* @__PURE__ */ jsx(MoonUITabsTriggerPro, { value: "overview", children: "Overview" }),
@@ -12503,6 +12491,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 +12595,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 +12614,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 +12716,9 @@ function Kanban({
     }
   };
   const handleCardClick = (card) => {
+    setSelectedCard(card);
     if (onCardClick) {
       onCardClick(card);
-    } else {
-      setSelectedCard(card);
     }
   };
   const handleCardUpdate = (updatedCard) => {
@@ -12719,11 +12729,7 @@ function Kanban({
     })));
   };
   const handleAddCard = (columnId, newCard) => {
-    if (onAddCard) {
-      onAddCard(columnId, newCard);
-    } else {
-      setAddCardColumnId(columnId);
-    }
+    setAddCardColumnId(columnId);
   };
   const handleAddNewCard = (card) => {
     if (!addCardColumnId)
@@ -12743,7 +12749,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 +13181,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.2",
   "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/card-detail-modal.tsx

@@ -241,14 +241,6 @@ export function CardDetailModal({
                 </p>
               )}
             </div>
-            <Button
-              variant="ghost"
-              size="icon"
-              onClick={onClose}
-              className="h-8 w-8"
-            >
-              <X className="h-4 w-4" />
-            </Button>
           </div>
         </div>
 

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`