@particle-academy/react-fancy 2.8.0 → 2.8.1

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