@particle-academy/react-fancy 1.9.0 → 2.0.0

package/dist/index.cjs

@@ -10564,12 +10564,67 @@ function ChevronIcon({ open }) {
     }
   );
 }
+function isDescendantOf(nodes, ancestorId, targetId) {
+  function findNode(haystack, id) {
+    for (const n of haystack) {
+      if (n.id === id) return n;
+      if (n.children) {
+        const found = findNode(n.children, id);
+        if (found) return found;
+      }
+    }
+    return void 0;
+  }
+  function hasDescendant(node, id) {
+    if (!node.children) return false;
+    for (const child of node.children) {
+      if (child.id === id) return true;
+      if (hasDescendant(child, id)) return true;
+    }
+    return false;
+  }
+  const ancestor = findNode(nodes, ancestorId);
+  return ancestor ? hasDescendant(ancestor, targetId) : false;
+}
+function computeDropPosition(e, isFolder) {
+  const rect = e.currentTarget.getBoundingClientRect();
+  const offsetY = e.clientY - rect.top;
+  const third = rect.height / 3;
+  if (offsetY < third) return "before";
+  if (offsetY > third * 2) return "after";
+  return isFolder ? "inside" : "after";
+}
 function TreeNode({ node, depth }) {
-  const { selectedId, onSelect, onNodeContextMenu, expandedIds, toggle, indentSize, showIcons } = useTreeNav();
+  const {
+    selectedId,
+    onSelect,
+    onNodeContextMenu,
+    expandedIds,
+    toggle,
+    indentSize,
+    showIcons,
+    draggable,
+    dragState,
+    setDragState,
+    onNodeMove,
+    nodes,
+    expandNode
+  } = useTreeNav();
   const isFolder = node.type === "folder" || node.children && node.children.length > 0;
   const isExpanded = expandedIds.includes(node.id);
   const isSelected = selectedId === node.id;
   const paddingLeft = depth * indentSize + 4;
+  const isDragging = dragState.draggedNodeId === node.id;
+  const isDropTarget = dragState.dropTargetId === node.id;
+  const dropPosition = isDropTarget ? dragState.dropPosition : null;
+  const autoExpandTimer = react.useRef(null);
+  const clearAutoExpand = react.useCallback(() => {
+    if (autoExpandTimer.current) {
+      clearTimeout(autoExpandTimer.current);
+      autoExpandTimer.current = null;
+    }
+  }, []);
+  react.useEffect(() => clearAutoExpand, [clearAutoExpand]);
   const handleClick = () => {
     if (node.disabled) return;
     if (isFolder) {
@@ -10583,30 +10638,116 @@ function TreeNode({ node, depth }) {
       onNodeContextMenu(e, node);
     }
   };
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-react-fancy-tree-node": "", children: [
-    /* @__PURE__ */ jsxRuntime.jsxs(
-      "button",
-      {
-        type: "button",
-        onClick: handleClick,
-        onContextMenu: handleContextMenu,
-        disabled: node.disabled,
-        className: cn(
-          "flex w-full items-center gap-1 rounded-md py-0.5 text-left text-[13px] transition-colors",
-          isSelected ? "bg-blue-500/15 text-blue-600 dark:text-blue-400" : "text-zinc-700 hover:bg-zinc-100 dark:text-zinc-300 dark:hover:bg-zinc-800",
-          node.disabled && "pointer-events-none opacity-40"
-        ),
-        style: { paddingLeft },
-        children: [
-          isFolder && /* @__PURE__ */ jsxRuntime.jsx(ChevronIcon, { open: isExpanded }),
-          !isFolder && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "w-3.5 shrink-0" }),
-          showIcons && (node.icon ?? (isFolder ? /* @__PURE__ */ jsxRuntime.jsx(FolderIcon, { open: isExpanded }) : /* @__PURE__ */ jsxRuntime.jsx(FileIcon, { ext: node.ext ?? node.label.split(".").pop() }))),
-          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate", children: node.label })
-        ]
+  const handleDragStart = react.useCallback((e) => {
+    e.dataTransfer.setData("text/plain", node.id);
+    e.dataTransfer.effectAllowed = "move";
+    requestAnimationFrame(() => {
+      setDragState({ draggedNodeId: node.id, dropTargetId: null, dropPosition: null });
+    });
+  }, [node.id, setDragState]);
+  const handleDragEnd = react.useCallback(() => {
+    clearAutoExpand();
+    setDragState({ draggedNodeId: null, dropTargetId: null, dropPosition: null });
+  }, [clearAutoExpand, setDragState]);
+  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;
+    e.preventDefault();
+    e.stopPropagation();
+    e.dataTransfer.dropEffect = "move";
+    const position = computeDropPosition(e, !!isFolder);
+    if (isFolder && !isExpanded && position === "inside") {
+      if (!autoExpandTimer.current) {
+        autoExpandTimer.current = setTimeout(() => {
+          expandNode(node.id);
+          autoExpandTimer.current = null;
+        }, 500);
       }
-    ),
-    isFolder && isExpanded && node.children && /* @__PURE__ */ jsxRuntime.jsx("div", { "data-react-fancy-tree-node-children": "", children: node.children.map((child) => /* @__PURE__ */ jsxRuntime.jsx(TreeNode, { node: child, depth: depth + 1 }, child.id)) })
-  ] });
+    } else {
+      clearAutoExpand();
+    }
+    if (dragState.dropTargetId !== node.id || dragState.dropPosition !== position) {
+      setDragState({ draggedNodeId: sourceId, dropTargetId: node.id, dropPosition: position });
+    }
+  }, [dragState, node.id, isFolder, isExpanded, nodes, setDragState, expandNode, clearAutoExpand]);
+  const handleDragLeave = react.useCallback((e) => {
+    if (!e.currentTarget.contains(e.relatedTarget)) {
+      clearAutoExpand();
+      if (dragState.dropTargetId === node.id) {
+        setDragState({ ...dragState, dropTargetId: null, dropPosition: null });
+      }
+    }
+  }, [dragState, node.id, setDragState, clearAutoExpand]);
+  const handleDrop = react.useCallback((e) => {
+    e.preventDefault();
+    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);
+    setDragState({ draggedNodeId: null, dropTargetId: null, dropPosition: null });
+  }, [dragState, node.id, nodes, onNodeMove, setDragState, clearAutoExpand]);
+  const canDrag = draggable && !node.disabled;
+  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,
+      children: [
+        isDropTarget && dropPosition === "before" && /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            "data-react-fancy-tree-drop-indicator": "before",
+            className: "pointer-events-none h-0.5 rounded-full bg-blue-500",
+            style: { marginLeft: paddingLeft }
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "button",
+          {
+            type: "button",
+            draggable: canDrag,
+            onDragStart: canDrag ? handleDragStart : void 0,
+            onDragEnd: canDrag ? handleDragEnd : void 0,
+            onClick: handleClick,
+            onContextMenu: handleContextMenu,
+            disabled: node.disabled,
+            className: cn(
+              "flex w-full items-center gap-1 rounded-md py-0.5 text-left text-[13px] transition-colors",
+              isSelected ? "bg-blue-500/15 text-blue-600 dark:text-blue-400" : "text-zinc-700 hover:bg-zinc-100 dark:text-zinc-300 dark:hover:bg-zinc-800",
+              node.disabled && "pointer-events-none opacity-40",
+              isDragging && "opacity-50",
+              canDrag && "cursor-grab active:cursor-grabbing",
+              isDropTarget && dropPosition === "inside" && "bg-blue-500/10 ring-1 ring-blue-500/30 ring-inset"
+            ),
+            style: { paddingLeft },
+            children: [
+              isFolder && /* @__PURE__ */ jsxRuntime.jsx(ChevronIcon, { open: isExpanded }),
+              !isFolder && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "w-3.5 shrink-0" }),
+              showIcons && (node.icon ?? (isFolder ? /* @__PURE__ */ jsxRuntime.jsx(FolderIcon, { open: isExpanded }) : /* @__PURE__ */ jsxRuntime.jsx(FileIcon, { ext: node.ext ?? node.label.split(".").pop() }))),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate", children: node.label })
+            ]
+          }
+        ),
+        isDropTarget && dropPosition === "after" && /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            "data-react-fancy-tree-drop-indicator": "after",
+            className: "pointer-events-none h-0.5 rounded-full bg-blue-500",
+            style: { marginLeft: paddingLeft }
+          }
+        ),
+        isFolder && isExpanded && node.children && /* @__PURE__ */ jsxRuntime.jsx("div", { "data-react-fancy-tree-node-children": "", children: node.children.map((child) => /* @__PURE__ */ jsxRuntime.jsx(TreeNode, { node: child, depth: depth + 1 }, child.id)) })
+      ]
+    }
+  );
 }
 TreeNode.displayName = "TreeNode";
 function collectFolderIds(nodes) {
@@ -10619,11 +10760,18 @@ function collectFolderIds(nodes) {
   }
   return ids;
 }
+var EMPTY_DRAG_STATE = {
+  draggedNodeId: null,
+  dropTargetId: null,
+  dropPosition: null
+};
 function TreeNavRoot({
   nodes,
   selectedId,
   onSelect,
   onNodeContextMenu,
+  draggable = false,
+  onNodeMove,
   expandedIds: controlledExpanded,
   defaultExpandedIds,
   onExpandedChange,
@@ -10649,15 +10797,58 @@ function TreeNavRoot({
     },
     [expandedIds, isControlled, onExpandedChange]
   );
+  const expandNode = react.useCallback(
+    (id) => {
+      if (expandedIds.includes(id)) return;
+      const next = [...expandedIds, id];
+      if (!isControlled) {
+        setInternalExpanded(next);
+      }
+      onExpandedChange?.(next);
+    },
+    [expandedIds, isControlled, onExpandedChange]
+  );
+  const [dragState, setDragState] = react.useState(EMPTY_DRAG_STATE);
+  const handleDragEnd = react.useCallback(() => {
+    setDragState(EMPTY_DRAG_STATE);
+  }, []);
   const ctx = react.useMemo(
-    () => ({ selectedId, onSelect, onNodeContextMenu, expandedIds, toggle, indentSize, showIcons }),
-    [selectedId, onSelect, onNodeContextMenu, expandedIds, toggle, indentSize, showIcons]
+    () => ({
+      selectedId,
+      onSelect,
+      onNodeContextMenu,
+      expandedIds,
+      toggle,
+      indentSize,
+      showIcons,
+      draggable,
+      dragState,
+      setDragState,
+      onNodeMove,
+      nodes,
+      expandNode
+    }),
+    [
+      selectedId,
+      onSelect,
+      onNodeContextMenu,
+      expandedIds,
+      toggle,
+      indentSize,
+      showIcons,
+      draggable,
+      dragState,
+      onNodeMove,
+      nodes,
+      expandNode
+    ]
   );
   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,
       children: nodes.map((node) => /* @__PURE__ */ jsxRuntime.jsx(TreeNode, { node, depth: 0 }, node.id))
     }
   ) });