@particle-academy/react-fancy 2.8.0 → 2.9.0

package/dist/index.cjs

@@ -11462,12 +11462,30 @@ function countCardChildren(children) {
       n += 1;
       return;
     }
-    if (child.type === react.Fragment) {
-      n += countCardChildren(child.props.children);
-    }
+    const inner = child.props.children;
+    if (inner !== void 0) n += countCardChildren(inner);
   });
   return n;
 }
+function findCardIndex(children, cardId) {
+  let idx = -1;
+  let i = 0;
+  function walk2(nodes) {
+    react.Children.forEach(nodes, (child) => {
+      if (idx !== -1) return;
+      if (!react.isValidElement(child)) return;
+      if (child.type === KanbanCard) {
+        if (child.props.id === cardId) idx = i;
+        i += 1;
+        return;
+      }
+      const inner = child.props.children;
+      if (inner !== void 0) walk2(inner);
+    });
+  }
+  walk2(children);
+  return idx;
+}
 function KanbanColumn({
   children,
   id,
@@ -11480,26 +11498,46 @@ function KanbanColumn({
   const { onCardMove, draggedCard, dragSource, registerColumn } = useKanban();
   const [dragOver, setDragOver] = react.useState(false);
   const [dropIndex, setDropIndex] = react.useState(null);
+  const [dropY, setDropY] = react.useState(null);
   const cardsRef = react.useRef(null);
   react.useEffect(() => registerColumn(id), [id, registerColumn]);
-  const updateDropIndex = react.useCallback((clientY) => {
+  const updateDrop = react.useCallback((clientY) => {
     const container = cardsRef.current;
     if (!container) {
       setDropIndex(null);
+      setDropY(null);
       return;
     }
-    const cards = container.querySelectorAll(
-      ":scope > [data-react-fancy-kanban-card]"
+    const all = Array.from(
+      container.querySelectorAll(
+        "[data-react-fancy-kanban-card]"
+      )
+    );
+    const cards = all.filter(
+      (el) => el.closest("[data-react-fancy-kanban-column]") === cardsRef.current?.closest("[data-react-fancy-kanban-column]")
     );
+    const containerRect = container.getBoundingClientRect();
+    if (cards.length === 0) {
+      setDropIndex(0);
+      setDropY(0);
+      return;
+    }
     let idx = cards.length;
+    let yRel = 0;
     for (let i = 0; i < cards.length; i++) {
       const rect = cards[i].getBoundingClientRect();
       if (clientY < rect.top + rect.height / 2) {
         idx = i;
+        yRel = rect.top - containerRect.top;
         break;
       }
     }
+    if (idx === cards.length) {
+      const last = cards[cards.length - 1].getBoundingClientRect();
+      yRel = last.bottom - containerRect.top;
+    }
     setDropIndex(idx);
+    setDropY(yRel);
   }, []);
   const handleDragOver = react.useCallback(
     (e) => {
@@ -11507,14 +11545,15 @@ function KanbanColumn({
       e.preventDefault();
       e.stopPropagation();
       setDragOver(true);
-      updateDropIndex(e.clientY);
+      updateDrop(e.clientY);
     },
-    [draggedCard, updateDropIndex]
+    [draggedCard, updateDrop]
   );
   const handleDragLeave = react.useCallback((e) => {
     if (e.currentTarget.contains(e.relatedTarget)) return;
     setDragOver(false);
     setDropIndex(null);
+    setDropY(null);
   }, []);
   const handleDrop = react.useCallback(
     (e) => {
@@ -11522,16 +11561,15 @@ function KanbanColumn({
       e.preventDefault();
       e.stopPropagation();
       const target = dropIndex ?? 0;
-      if (dragSource && draggedCard) {
+      if (dragSource) {
         let finalIdx = target;
         if (dragSource === id) {
           const srcIdx = findCardIndex(children, draggedCard);
-          if (srcIdx !== -1 && target > srcIdx) {
-            finalIdx = target - 1;
-          }
+          if (srcIdx !== -1 && target > srcIdx) finalIdx = target - 1;
           if (srcIdx === finalIdx) {
             setDragOver(false);
             setDropIndex(null);
+            setDropY(null);
             return;
           }
         }
@@ -11539,27 +11577,13 @@ function KanbanColumn({
       }
       setDragOver(false);
       setDropIndex(null);
+      setDropY(null);
     },
     [draggedCard, dragSource, dropIndex, id, onCardMove, children]
   );
   const cardCount = countCardChildren(children);
-  if (hideWhenEmpty && cardCount === 0 && !draggedCard) {
-    return null;
-  }
-  let cardSeen = 0;
-  const showIndicator = draggedCard !== null && dropIndex !== null && dragOver;
-  const renderedChildren = react.Children.toArray(children).map((child, i) => {
-    const isCard = react.isValidElement(child) && child.type === KanbanCard;
-    const indicator = showIndicator && isCard && cardSeen === dropIndex ? /* @__PURE__ */ jsxRuntime.jsx(DropIndicator, {}, `drop-${i}`) : null;
-    if (isCard) cardSeen += 1;
-    return /* @__PURE__ */ jsxRuntime.jsxs(react.Fragment, { children: [
-      indicator,
-      child
-    ] }, i);
-  });
-  if (showIndicator && dropIndex === cardCount) {
-    renderedChildren.push(/* @__PURE__ */ jsxRuntime.jsx(DropIndicator, {}, "drop-end"));
-  }
+  if (hideWhenEmpty && cardCount === 0 && !draggedCard) return null;
+  const showIndicator = draggedCard !== null && dropIndex !== null && dropY !== null && dragOver;
   const overWip = wipLimit !== void 0 && cardCount > wipLimit;
   return /* @__PURE__ */ jsxRuntime.jsx(KanbanColumnContext.Provider, { value: id, children: /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
@@ -11594,36 +11618,22 @@ function KanbanColumn({
             }
           )
         ] }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { ref: cardsRef, className: "flex flex-1 flex-col gap-2", children: renderedChildren })
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { ref: cardsRef, className: "relative flex flex-1 flex-col gap-2", children: [
+          children,
+          showIndicator && /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              "data-react-fancy-kanban-drop-indicator": "",
+              style: { top: dropY },
+              className: "pointer-events-none absolute left-0 right-0 h-0.5 -translate-y-1/2 rounded-full bg-blue-500/80 shadow-[0_0_0_3px_rgba(59,130,246,0.15)]"
+            }
+          )
+        ] })
       ]
     }
   ) });
 }
 KanbanColumn.displayName = "KanbanColumn";
-function DropIndicator() {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "div",
-    {
-      "data-react-fancy-kanban-drop-indicator": "",
-      className: "h-0.5 -my-1 rounded-full bg-blue-500/80"
-    }
-  );
-}
-function findCardIndex(children, cardId) {
-  let idx = -1;
-  let i = 0;
-  react.Children.forEach(children, (child) => {
-    if (idx !== -1) return;
-    if (!react.isValidElement(child)) return;
-    if (child.type === KanbanCard) {
-      if (child.props.id === cardId) {
-        idx = i;
-      }
-      i += 1;
-    }
-  });
-  return idx;
-}
 function KanbanColumnHandle({
   children,
   className
@@ -11761,7 +11771,7 @@ function useCanvas() {
   return ctx;
 }
 function CanvasNode({ children, id, x, y, draggable, onPositionChange, className, style }) {
-  const { registerNode, unregisterNode, viewport } = useCanvas();
+  const { registerNode, unregisterNode, viewport, gridSize, snapToGrid } = useCanvas();
   const nodeRef = react.useRef(null);
   const isDragging = react.useRef(false);
   const dragStart = react.useRef({ mouseX: 0, mouseY: 0, nodeX: 0, nodeY: 0 });
@@ -11794,9 +11804,15 @@ function CanvasNode({ children, id, x, y, draggable, onPositionChange, className
       if (!isDragging.current) return;
       const dx = (e.clientX - dragStart.current.mouseX) / viewport.zoom;
       const dy = (e.clientY - dragStart.current.mouseY) / viewport.zoom;
-      onPositionChange?.(dragStart.current.nodeX + dx, dragStart.current.nodeY + dy);
+      let nx = dragStart.current.nodeX + dx;
+      let ny = dragStart.current.nodeY + dy;
+      if (snapToGrid && gridSize > 0) {
+        nx = Math.round(nx / gridSize) * gridSize;
+        ny = Math.round(ny / gridSize) * gridSize;
+      }
+      onPositionChange?.(nx, ny);
     },
-    [viewport.zoom, onPositionChange]
+    [viewport.zoom, onPositionChange, snapToGrid, gridSize]
   );
   const handlePointerUp = react.useCallback(() => {
     isDragging.current = false;
@@ -12044,6 +12060,10 @@ function CanvasRoot({
   pannable = true,
   zoomable = true,
   showGrid = false,
+  gridStyle = "dots",
+  gridSize = 20,
+  gridColor = "rgb(161 161 170 / 0.3)",
+  snapToGrid = false,
   fitOnMount = false,
   className,
   style
@@ -12061,8 +12081,8 @@ function CanvasRoot({
     containerRef
   });
   const ctx = react.useMemo(
-    () => ({ viewport, setViewport, registerNode, unregisterNode, nodeRects, registryVersion, containerRef }),
-    [viewport, setViewport, registerNode, unregisterNode, nodeRects, registryVersion]
+    () => ({ viewport, setViewport, registerNode, unregisterNode, nodeRects, registryVersion, containerRef, gridSize, snapToGrid }),
+    [viewport, setViewport, registerNode, unregisterNode, nodeRects, registryVersion, gridSize, snapToGrid]
   );
   const hasFitted = react.useRef(false);
   react.useEffect(() => {
@@ -12118,9 +12138,13 @@ function CanvasRoot({
           {
             "data-canvas-bg": "",
             className: "absolute inset-0",
-            style: showGrid ? {
-              backgroundImage: `radial-gradient(circle, rgb(161 161 170 / 0.3) 1px, transparent 1px)`,
-              backgroundSize: `${20 * viewport.zoom}px ${20 * viewport.zoom}px`,
+            style: showGrid && gridStyle !== "none" ? gridStyle === "lines" ? {
+              backgroundImage: `linear-gradient(to right, ${gridColor} 1px, transparent 1px), linear-gradient(to bottom, ${gridColor} 1px, transparent 1px)`,
+              backgroundSize: `${gridSize * viewport.zoom}px ${gridSize * viewport.zoom}px`,
+              backgroundPosition: `${viewport.panX}px ${viewport.panY}px`
+            } : {
+              backgroundImage: `radial-gradient(circle, ${gridColor} 1px, transparent 1px)`,
+              backgroundSize: `${gridSize * viewport.zoom}px ${gridSize * viewport.zoom}px`,
               backgroundPosition: `${viewport.panX}px ${viewport.panY}px`
             } : void 0
           }
@@ -12837,6 +12861,8 @@ function TreeNode({ node, depth }) {
     dragState,
     setDragState,
     onNodeMove,
+    acceptExternalDrops,
+    onExternalDrop,
     nodes,
     expandNode
   } = useTreeNav();
@@ -12879,14 +12905,18 @@ function TreeNode({ node, depth }) {
     clearAutoExpand();
     setDragState({ draggedNodeId: null, dropTargetId: null, dropPosition: null });
   }, [clearAutoExpand, setDragState]);
+  const isExternalDrag = !dragState.draggedNodeId;
   const handleDragOver = react.useCallback((e) => {
-    if (!dragState.draggedNodeId) return;
-    const sourceId = dragState.draggedNodeId;
-    if (sourceId === node.id) return;
-    if (isDescendantOf(nodes, sourceId, node.id)) return;
+    if (isExternalDrag) {
+      if (!acceptExternalDrops) return;
+    } else {
+      const sourceId = dragState.draggedNodeId;
+      if (sourceId === node.id) return;
+      if (isDescendantOf(nodes, sourceId, node.id)) return;
+    }
     e.preventDefault();
     e.stopPropagation();
-    e.dataTransfer.dropEffect = "move";
+    e.dataTransfer.dropEffect = isExternalDrag ? "copy" : "move";
     const position = computeDropPosition(e, !!isFolder);
     if (isFolder && !isExpanded && position === "inside") {
       if (!autoExpandTimer.current) {
@@ -12899,9 +12929,9 @@ function TreeNode({ node, depth }) {
       clearAutoExpand();
     }
     if (dragState.dropTargetId !== node.id || dragState.dropPosition !== position) {
-      setDragState({ draggedNodeId: sourceId, dropTargetId: node.id, dropPosition: position });
+      setDragState({ draggedNodeId: dragState.draggedNodeId, dropTargetId: node.id, dropPosition: position });
     }
-  }, [dragState, node.id, isFolder, isExpanded, nodes, setDragState, expandNode, clearAutoExpand]);
+  }, [dragState, isExternalDrag, acceptExternalDrops, node.id, isFolder, isExpanded, nodes, setDragState, expandNode, clearAutoExpand]);
   const handleDragLeave = react.useCallback((e) => {
     if (!e.currentTarget.contains(e.relatedTarget)) {
       clearAutoExpand();
@@ -12915,21 +12945,25 @@ function TreeNode({ node, depth }) {
     e.stopPropagation();
     clearAutoExpand();
     const sourceId = dragState.draggedNodeId;
-    const position = dragState.dropPosition;
-    if (!sourceId || !position) return;
-    if (sourceId === node.id) return;
-    if (isDescendantOf(nodes, sourceId, node.id)) return;
-    onNodeMove?.(sourceId, node.id, position);
+    const position = dragState.dropPosition ?? computeDropPosition(e, !!isFolder);
+    if (sourceId) {
+      if (sourceId === node.id) return;
+      if (isDescendantOf(nodes, sourceId, node.id)) return;
+      onNodeMove?.(sourceId, node.id, position);
+    } else if (acceptExternalDrops) {
+      onExternalDrop?.(e, node, position);
+    }
     setDragState({ draggedNodeId: null, dropTargetId: null, dropPosition: null });
-  }, [dragState, node.id, nodes, onNodeMove, setDragState, clearAutoExpand]);
+  }, [dragState, node, isFolder, nodes, onNodeMove, acceptExternalDrops, onExternalDrop, setDragState, clearAutoExpand]);
   const canDrag = draggable && !node.disabled;
+  const dropEnabled = draggable || acceptExternalDrops;
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
       "data-react-fancy-tree-node": "",
-      onDragOver: draggable ? handleDragOver : void 0,
-      onDragLeave: draggable ? handleDragLeave : void 0,
-      onDrop: draggable ? handleDrop : void 0,
+      onDragOver: dropEnabled ? handleDragOver : void 0,
+      onDragLeave: dropEnabled ? handleDragLeave : void 0,
+      onDrop: dropEnabled ? handleDrop : void 0,
       children: [
         isDropTarget && dropPosition === "before" && /* @__PURE__ */ jsxRuntime.jsx(
           "div",
@@ -13002,6 +13036,8 @@ function TreeNavRoot({
   onNodeContextMenu,
   draggable = false,
   onNodeMove,
+  acceptExternalDrops = false,
+  onExternalDrop,
   expandedIds: controlledExpanded,
   defaultExpandedIds,
   onExpandedChange,
@@ -13055,6 +13091,8 @@ function TreeNavRoot({
       dragState,
       setDragState,
       onNodeMove,
+      acceptExternalDrops,
+      onExternalDrop,
       nodes,
       expandNode
     }),
@@ -13069,16 +13107,19 @@ function TreeNavRoot({
       draggable,
       dragState,
       onNodeMove,
+      acceptExternalDrops,
+      onExternalDrop,
       nodes,
       expandNode
     ]
   );
+  const dropEnabled = draggable || acceptExternalDrops;
   return /* @__PURE__ */ jsxRuntime.jsx(TreeNavContext.Provider, { value: ctx, children: /* @__PURE__ */ jsxRuntime.jsx(
     "nav",
     {
       "data-react-fancy-tree-nav": "",
       className: cn("flex flex-col gap-0.5 py-1 text-sm", className),
-      onDragEnd: draggable ? handleDragEnd : void 0,
+      onDragEnd: dropEnabled ? handleDragEnd : void 0,
       children: nodes.map((node) => /* @__PURE__ */ jsxRuntime.jsx(TreeNode, { node, depth: 0 }, node.id))
     }
   ) });