@postxl/ui-components 1.6.0 → 1.6.1

package/dist/index.js

@@ -70,7 +70,7 @@ import * as AvatarPrimitive from "@radix-ui/react-avatar";
 import { DayPicker, getDefaultClassNames } from "react-day-picker";
 import * as HoverCardPrimitive from "@radix-ui/react-hover-card";
 import useEmblaCarousel from "embla-carousel-react";
-import { BaselineIcon, BookmarkIcon, CalendarIcon as CalendarIcon$1, Check, CheckIcon as CheckIcon$1, CheckSquareIcon, ChevronDownIcon as ChevronDownIcon$1, ChevronRightIcon as ChevronRightIcon$1, ChevronUpIcon as ChevronUpIcon$1, CircleCheckIcon, CopyIcon, DownloadIcon, EraserIcon, EyeIcon, EyeOffIcon, FilterX, GlobeIcon, GripHorizontalIcon, HashIcon, ListChecksIcon, ListIcon, ListTreeIcon, MessageSquareIcon, MinusIcon, PanelLeftIcon, PanelRightIcon, PencilIcon, PinIcon, PinOffIcon, PlusIcon, SaveIcon, Settings2Icon, SquareIcon, TagIcon, TextInitialIcon, Trash2Icon, TrashIcon, XIcon } from "lucide-react";
+import { BaselineIcon, BookmarkIcon, CalendarIcon as CalendarIcon$1, Check, CheckIcon as CheckIcon$1, CheckSquareIcon, ChevronDownIcon as ChevronDownIcon$1, ChevronRightIcon as ChevronRightIcon$1, ChevronUpIcon as ChevronUpIcon$1, CircleCheckIcon, CopyIcon, DownloadIcon, EraserIcon, EyeIcon, EyeOffIcon, FilterX, GlobeIcon, GripHorizontalIcon, GripVerticalIcon, HashIcon, ListChecksIcon, ListIcon, ListTreeIcon, MessageSquareIcon, MinusIcon, PanelLeftIcon, PanelRightIcon, PencilIcon, PinIcon, PinOffIcon, PlusIcon, SaveIcon, Settings2Icon, SquareIcon, TagIcon, TextInitialIcon, Trash2Icon, TrashIcon, XIcon } from "lucide-react";
 import * as CollapsePrimitive from "@radix-ui/react-collapsible";
 import { Command as Command$1 } from "cmdk";
 import * as DialogPrimitive from "@radix-ui/react-dialog";
@@ -11335,112 +11335,314 @@ ToggleGroupItem.displayName = ToggleGroupPrimitive.Item.displayName;
 
 //#endregion
 //#region src/tree-view/tree-view.tsx
-const TreeBranch = ({ node, level, onNodeSelect, onGroupSelect, onToggleGroup, isLast = false, parentIsLast = [], defaultExpandedIds = [], selectedId }) => {
+const DragContext = React$1.createContext({
+	dragState: {
+		draggedNodeId: null,
+		dropTarget: null
+	},
+	setDragState: () => {}
+});
+/** Checks if `targetId` is a descendant of `ancestorId` in the tree. Used to prevent dropping a node into itself. */
+function isDescendant(nodes, ancestorId, targetId) {
+	for (const node of nodes) {
+		if (node.id === ancestorId && node.children) return containsNode(node.children, targetId);
+		if (node.children && isDescendant(node.children, ancestorId, targetId)) return true;
+	}
+	return false;
+}
+/** Recursively checks if any node in the subtree has the given id. */
+function containsNode(nodes, targetId) {
+	for (const node of nodes) {
+		if (node.id === targetId) return true;
+		if (node.children && containsNode(node.children, targetId)) return true;
+	}
+	return false;
+}
+/** Finds and returns a node by id from anywhere in the tree. */
+function findNode(nodes, id) {
+	for (const node of nodes) {
+		if (node.id === id) return node;
+		if (node.children) {
+			const found = findNode(node.children, id);
+			if (found) return found;
+		}
+	}
+	return void 0;
+}
+const TreeBranch = ({ node, level, onNodeSelect, onGroupSelect, onToggleGroup, onNodeDelete, onNodeDrop, defaultExpandedIds = [], selectedId, rootData }) => {
 	const isGroup = node.type === "group";
 	const hasChildren = node.children && node.children.length > 0;
+	const { dragState, setDragState } = React$1.useContext(DragContext);
+	/** Determines drop position (before/after/inside) based on cursor proximity to element edges. */
+	const handleDragOver = (e) => {
+		if (!dragState.draggedNodeId || dragState.draggedNodeId === node.id) return;
+		if (isDescendant(rootData, dragState.draggedNodeId, node.id)) return;
+		e.preventDefault();
+		e.stopPropagation();
+		const rect = e.currentTarget.getBoundingClientRect();
+		const distFromTop = e.clientY - rect.top;
+		const distFromBottom = rect.bottom - e.clientY;
+		const isExpanded = isGroup && hasChildren && defaultExpandedIds.includes(node.id);
+		let position;
+		if (distFromTop < 10) position = "before";
+		else if (!isExpanded && distFromBottom < 10) position = "after";
+		else position = "inside";
+		if (node.locked && position !== "inside") return;
+		setDragState((prev) => {
+			if (prev.dropTarget?.nodeId === node.id && prev.dropTarget.position === position) return prev;
+			return {
+				...prev,
+				dropTarget: {
+					nodeId: node.id,
+					position
+				}
+			};
+		});
+	};
+	/** Fires onNodeDrop with the source node and target info, then resets drag state. */
+	const handleDrop = (e) => {
+		e.preventDefault();
+		e.stopPropagation();
+		if (!dragState.draggedNodeId || !dragState.dropTarget || !onNodeDrop) return;
+		const sourceNode = findNode(rootData, dragState.draggedNodeId);
+		if (!sourceNode) return;
+		onNodeDrop(sourceNode, {
+			node,
+			position: dragState.dropTarget.position
+		});
+		setDragState({
+			draggedNodeId: null,
+			dropTarget: null
+		});
+	};
+	/** Clears drop target when the cursor leaves this node (but not when moving to a child element). */
+	const handleDragLeave = (e) => {
+		if (!e.currentTarget.contains(e.relatedTarget)) setDragState((prev) => prev.dropTarget?.nodeId === node.id ? {
+			...prev,
+			dropTarget: null
+		} : prev);
+	};
+	const isDraggedOver = dragState.dropTarget?.nodeId === node.id;
+	const dropPosition = dragState.dropTarget?.position;
+	const isDragging = dragState.draggedNodeId === node.id;
+	const indent = level * 24;
+	const dropLineBase = "after:absolute after:right-0 after:h-[2.5px] after:bg-primary after:left-(--drop-left) after:z-10";
+	const showLine = isDraggedOver && dropPosition;
+	const dropLineClass = cn("relative", {
+		[`after:top-0 ${dropLineBase}`]: showLine === "before",
+		[`after:-bottom-px ${dropLineBase}`]: showLine === "after" || showLine === "inside",
+		"opacity-50": isDragging
+	});
+	const dropLineStyle = (offset) => isDraggedOver ? { "--drop-left": `${offset + (dropPosition === "inside" ? 24 : 0)}px` } : {};
+	const dropHighlightClass = cn({ "bg-accent text-accent-foreground": isDraggedOver && dropPosition === "inside" });
 	if (!isGroup) return /* @__PURE__ */ jsxs("div", {
 		"data-test-id": `tree-node-${node.id}`,
-		className: cn("relative flex items-center gap-2 py-1.5 px-2 rounded-md cursor-pointer hover:bg-accent hover:text-accent-foreground transition-colors border border-transparent hover:border hover:border-(--discreet-border)", node.className, { "bg-primary text-primary-foreground hover:border hover:border-(--discreet-border)": selectedId === node.id }),
-		style: { marginLeft: `${level * 24}px` },
-		onClick: () => onNodeSelect?.(node),
+		className: cn("relative group/node flex items-center gap-2 py-1.5 px-2 rounded-md cursor-pointer hover:bg-accent hover:text-accent-foreground transition-colors border border-transparent hover:border hover:border-(--discreet-border)", node.className, { "bg-primary text-primary-foreground hover:border hover:border-(--discreet-border)": selectedId === node.id }, dropLineClass, dropHighlightClass),
+		style: {
+			marginLeft: `${indent}px`,
+			...dropLineStyle(0)
+		},
+		onClick: (e) => {
+			if (e.target.closest("[data-slot=\"drag-handle\"]")) return;
+			onNodeSelect?.(node);
+		},
+		onDragOver: onNodeDrop ? handleDragOver : void 0,
+		onDrop: onNodeDrop ? handleDrop : void 0,
+		onDragLeave: onNodeDrop ? handleDragLeave : void 0,
 		children: [
 			node.icon,
 			/* @__PURE__ */ jsx("span", {
 				className: "text-sm select-none truncate",
 				children: node.name
 			}),
-			node.trailing
+			node.trailing,
+			!node.locked && (onNodeDelete || onNodeDrop) && /* @__PURE__ */ jsx(NodeActions, {
+				node,
+				onNodeDelete,
+				onNodeDrop
+			})
 		]
 	});
 	return /* @__PURE__ */ jsxs(AccordionItem, {
 		value: node.id,
-		className: "border-0",
+		className: "border-0 overflow-y-visible overflow-x-clip",
 		"data-test-id": `tree-group-${node.id}`,
-		children: [/* @__PURE__ */ jsxs(AccordionTrigger, {
-			style: { "--margin-left": `calc(${level * 24 + 16}px - 16px)` },
-			className: cn("flex flex-1 overflow-hidden items-center gap-2 py-1.5 px-2 rounded-md ml-(--margin-left) hover:bg-accent hover:text-accent-foreground hover:no-underline transition-colors border border-transparent hover:border hover:border-(--discreet-border)", "[&>svg:last-child]:hidden", node.className, { "bg-primary text-primary-foreground": selectedId === node.id }),
-			children: [
-				/* @__PURE__ */ jsx(PlusIcon, {
-					"data-test-id": `tree-expand-${node.id}`,
-					className: "size-4 shrink-0 hidden [[data-state=closed]>&]:block hover:border rounded",
-					onClick: () => {
-						onToggleGroup?.({
-							isExpanded: true,
-							node
-						});
-					}
-				}),
-				/* @__PURE__ */ jsx(MinusIcon, {
-					"data-test-id": `tree-collapse-${node.id}`,
-					className: "size-4 shrink-0 hidden [[data-state=open]>&]:block hover:border rounded",
-					onClick: () => {
-						onToggleGroup?.({
-							isExpanded: false,
-							node
-						});
-					}
-				}),
-				/* @__PURE__ */ jsxs("div", {
-					"data-test-id": `tree-group-label-${node.id}`,
-					className: "flex w-[calc(100%-16px)] gap-2",
-					onClick: (e) => {
-						e.stopPropagation();
-						onGroupSelect?.(node);
-					},
-					children: [
-						node.icon,
-						/* @__PURE__ */ jsx("span", {
-							className: "text-sm select-none truncate text-left",
-							children: node.name
-						}),
-						node.trailing
-					]
-				})
-			]
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: cn("relative group/node overflow-y-visible overflow-x-clip", dropLineClass),
+			style: dropLineStyle(indent),
+			onDragOver: onNodeDrop ? handleDragOver : void 0,
+			onDrop: onNodeDrop ? handleDrop : void 0,
+			onDragLeave: onNodeDrop ? handleDragLeave : void 0,
+			children: [/* @__PURE__ */ jsxs(AccordionTrigger, {
+				style: { "--margin-left": `calc(${level * 24 + 16}px - 16px)` },
+				className: cn("relative flex flex-1 overflow-hidden items-center gap-2 py-1.5 px-2 rounded-md ml-(--margin-left) group-hover/node:bg-accent group-hover/node:text-accent-foreground hover:no-underline transition-colors border border-transparent group-hover/node:border group-hover/node:border-(--discreet-border)", "[&>svg:last-child]:hidden", node.className, { "bg-primary text-primary-foreground": selectedId === node.id }, dropHighlightClass),
+				children: [
+					/* @__PURE__ */ jsx(PlusIcon, {
+						"data-test-id": `tree-expand-${node.id}`,
+						className: "size-4 shrink-0 hidden [[data-state=closed]>&]:block hover:border rounded",
+						onClick: () => {
+							onToggleGroup?.({
+								isExpanded: true,
+								node
+							});
+						}
+					}),
+					/* @__PURE__ */ jsx(MinusIcon, {
+						"data-test-id": `tree-collapse-${node.id}`,
+						className: "size-4 shrink-0 hidden [[data-state=open]>&]:block hover:border rounded",
+						onClick: () => {
+							onToggleGroup?.({
+								isExpanded: false,
+								node
+							});
+						}
+					}),
+					/* @__PURE__ */ jsxs("div", {
+						"data-test-id": `tree-group-label-${node.id}`,
+						className: "flex w-[calc(100%-16px)] gap-2",
+						onClick: (e) => {
+							e.stopPropagation();
+							if (e.target.closest("[data-slot=\"dropdown-menu-trigger\"]")) return;
+							if (e.target.closest("[data-slot=\"drag-handle\"]")) return;
+							onGroupSelect?.(node);
+						},
+						children: [
+							node.icon,
+							/* @__PURE__ */ jsx("span", {
+								className: "text-sm select-none truncate text-left",
+								children: node.name
+							}),
+							node.trailing
+						]
+					})
+				]
+			}), !node.locked && (onNodeDelete || onNodeDrop) && /* @__PURE__ */ jsx(NodeActions, {
+				node,
+				onNodeDelete,
+				onNodeDrop
+			})]
 		}), hasChildren && /* @__PURE__ */ jsxs(AccordionContent, {
-			className: "pb-0 pt-0 relative",
+			className: "pb-0 pt-0 relative overflow-y-visible overflow-x-clip",
 			children: [/* @__PURE__ */ jsx("div", {
 				style: { "--left-offset": `calc(${level * 24 + 32}px - 16px)` },
 				className: "before:absolute before:top-0 before:start-(--left-offset) before:w-0.5 before:-ms-px before:h-full before:bg-sidebar-ring dark:before:bg-sidebar-ring"
 			}), /* @__PURE__ */ jsx(Accordion, {
 				type: "multiple",
 				value: defaultExpandedIds,
-				children: node.children?.map((child, index) => /* @__PURE__ */ jsx(TreeBranch, {
+				children: node.children?.map((child) => /* @__PURE__ */ jsx(TreeBranch, {
 					node: child,
 					level: level + 1,
 					onNodeSelect,
 					onGroupSelect,
 					onToggleGroup,
-					isLast: index === node.children.length - 1,
-					parentIsLast: [...parentIsLast, isLast],
+					onNodeDelete,
+					onNodeDrop,
 					defaultExpandedIds,
-					selectedId
+					selectedId,
+					rootData
 				}, child.id))
 			})]
 		})]
 	});
 };
-const TreeView = React$1.forwardRef(({ data, onNodeSelect, onGroupSelect, onToggleGroup, className, defaultExpandedIds = [], selectedId }, ref) => {
-	return /* @__PURE__ */ jsx("div", {
-		ref,
-		className: cn("w-full select-none", className),
-		children: /* @__PURE__ */ jsx(Accordion, {
-			type: "multiple",
-			value: defaultExpandedIds,
-			children: data.map((node, index) => /* @__PURE__ */ jsx(TreeBranch, {
-				node,
-				level: 0,
-				onNodeSelect,
-				onGroupSelect,
-				onToggleGroup,
-				isLast: index === data.length - 1,
-				parentIsLast: [],
-				defaultExpandedIds,
-				selectedId
-			}, node.id))
+const TreeView = React$1.forwardRef(({ data, onNodeSelect, onGroupSelect, onToggleGroup, onNodeDelete, onNodeDrop, className, defaultExpandedIds = [], selectedId }, ref) => {
+	const [dragState, setDragState] = React$1.useState({
+		draggedNodeId: null,
+		dropTarget: null
+	});
+	return /* @__PURE__ */ jsx(DragContext.Provider, {
+		value: {
+			dragState,
+			setDragState
+		},
+		children: /* @__PURE__ */ jsx("div", {
+			ref,
+			className: cn("w-full select-none", className),
+			onDragOver: onNodeDrop && dragState.draggedNodeId ? (e) => e.preventDefault() : void 0,
+			children: /* @__PURE__ */ jsx(Accordion, {
+				type: "multiple",
+				value: defaultExpandedIds,
+				children: data.map((node) => /* @__PURE__ */ jsx(TreeBranch, {
+					node,
+					level: 0,
+					onNodeSelect,
+					onGroupSelect,
+					onToggleGroup,
+					onNodeDelete,
+					onNodeDrop,
+					defaultExpandedIds,
+					selectedId,
+					rootData: data
+				}, node.id))
+			})
 		})
 	});
 });
+const NodeActions = ({ node, onNodeDelete, onNodeDrop }) => {
+	const [showDeleteConfirmation, setShowDeleteConfirmation] = React$1.useState(false);
+	const containerRef = React$1.useRef(null);
+	const { setDragState } = React$1.useContext(DragContext);
+	React$1.useEffect(() => {
+		if (!showDeleteConfirmation) return;
+		const handleClickOutside = (e) => {
+			if (containerRef.current && !containerRef.current.contains(e.target)) setShowDeleteConfirmation(false);
+		};
+		document.addEventListener("mousedown", handleClickOutside);
+		return () => document.removeEventListener("mousedown", handleClickOutside);
+	}, [showDeleteConfirmation]);
+	return /* @__PURE__ */ jsx("div", {
+		ref: containerRef,
+		className: "absolute top-1/2 -translate-y-1/2 end-1 flex items-center gap-0.5 rounded transition-none group-hover/node:bg-accent",
+		children: showDeleteConfirmation && onNodeDelete ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Button, {
+			variant: "ghost",
+			size: "iconXs",
+			onClick: (e) => {
+				e.stopPropagation();
+				setShowDeleteConfirmation(false);
+			},
+			children: /* @__PURE__ */ jsx(XIcon, { className: "size-4" })
+		}), /* @__PURE__ */ jsx(Button, {
+			variant: "destructive",
+			size: "iconXs",
+			onClick: (e) => {
+				e.stopPropagation();
+				onNodeDelete(node);
+				setShowDeleteConfirmation(false);
+			},
+			children: /* @__PURE__ */ jsx(CheckIcon$1, { className: "size-4" })
+		})] }) : /* @__PURE__ */ jsxs(Fragment, { children: [onNodeDelete && /* @__PURE__ */ jsx(Button, {
+			variant: "ghost",
+			size: "iconXs",
+			className: "opacity-0 group-hover/node:opacity-100",
+			onClick: (e) => {
+				e.stopPropagation();
+				setShowDeleteConfirmation(true);
+			},
+			children: /* @__PURE__ */ jsx(Trash2Icon, { className: "size-4" })
+		}), onNodeDrop && /* @__PURE__ */ jsx(Button, {
+			variant: "ghost",
+			size: "iconXs",
+			"data-slot": "drag-handle",
+			draggable: true,
+			className: "opacity-0 group-hover/node:opacity-100 cursor-grab active:cursor-grabbing bg-transparent",
+			onDragStart: (e) => {
+				e.dataTransfer.effectAllowed = "move";
+				e.dataTransfer.setData("text/plain", node.id);
+				setDragState({
+					draggedNodeId: node.id,
+					dropTarget: null
+				});
+			},
+			onDragEnd: () => {
+				setDragState({
+					draggedNodeId: null,
+					dropTarget: null
+				});
+			},
+			children: /* @__PURE__ */ jsx(GripVerticalIcon, { className: "size-4" })
+		})] })
+	});
+};
 TreeView.displayName = "TreeView";
 
 //#endregion