@thebuoyant-tsdev/mui-ts-library 3.9.1 → 3.11.0

package/dist/components/horizontal-tree-chart/HorizontalTreeChart.js

@@ -1,6 +1,6 @@
 import { DEFAULT_HORIZONTAL_TREE_TRANSLATION as e } from "./HorizontalTreeChart.types.js";
-import { useCallback as t, useLayoutEffect as n, useMemo as r, useRef as i, useState as a } from "react";
-import { Avatar as o, Box as s, Divider as c, Popover as l, Tooltip as ee, Typography as u, useTheme as d } from "@mui/material";
+import { useCallback as t, useEffect as n, useLayoutEffect as r, useMemo as i, useRef as a, useState as o } from "react";
+import { Avatar as s, Box as c, Divider as l, Popover as u, Tooltip as ee, Typography as d, useTheme as te } from "@mui/material";
 import { Fragment as f, jsx as p, jsxs as m } from "react/jsx-runtime";
 import * as h from "d3";
 //#region src/components/horizontal-tree-chart/HorizontalTreeChart.tsx
@@ -8,7 +8,7 @@ var g = {
 	folder: "M20 6h-8l-2-2H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2zm0 12H4V8h16v10z",
 	person: "M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"
 };
-function te({ path: e, size: t }) {
+function _({ path: e, size: t }) {
 	let n = t / 2;
 	return /* @__PURE__ */ p("g", {
 		transform: `translate(${-n},${-n})`,
@@ -25,63 +25,63 @@ function te({ path: e, size: t }) {
 		})
 	});
 }
-function _({ info: e, labelA: t, labelB: n }) {
-	return /* @__PURE__ */ m(s, {
+function ne({ info: e, labelA: t, labelB: n }) {
+	return /* @__PURE__ */ m(c, {
 		sx: {
 			p: 2,
 			minWidth: 200,
 			maxWidth: 280
 		},
-		children: [/* @__PURE__ */ m(s, {
+		children: [/* @__PURE__ */ m(c, {
 			sx: {
 				display: "flex",
 				alignItems: "center",
 				gap: 1.5,
 				mb: 1.5
 			},
-			children: [/* @__PURE__ */ p(o, {
+			children: [/* @__PURE__ */ p(s, {
 				sx: {
 					bgcolor: "primary.main",
 					width: 40,
 					height: 40
 				},
 				children: e.name.charAt(0).toUpperCase()
-			}), /* @__PURE__ */ m(s, { children: [/* @__PURE__ */ p(u, {
+			}), /* @__PURE__ */ m(c, { children: [/* @__PURE__ */ p(d, {
 				variant: "body2",
 				sx: { fontWeight: "bold" },
 				children: e.name
-			}), e.subname && /* @__PURE__ */ p(u, {
+			}), e.subname && /* @__PURE__ */ p(d, {
 				variant: "caption",
 				color: "text.secondary",
 				children: e.subname
 			})] })]
 		}), (e.specialValueA != null || e.specialValueB != null) && /* @__PURE__ */ m(f, { children: [
-			/* @__PURE__ */ p(c, { sx: { mb: 1.5 } }),
-			e.specialValueA != null && /* @__PURE__ */ m(s, {
+			/* @__PURE__ */ p(l, { sx: { mb: 1.5 } }),
+			e.specialValueA != null && /* @__PURE__ */ m(c, {
 				sx: {
 					display: "flex",
 					justifyContent: "space-between",
 					mb: .5
 				},
-				children: [/* @__PURE__ */ p(u, {
+				children: [/* @__PURE__ */ p(d, {
 					variant: "caption",
 					color: "text.secondary",
 					children: t
-				}), /* @__PURE__ */ p(u, {
+				}), /* @__PURE__ */ p(d, {
 					variant: "caption",
 					children: String(e.specialValueA)
 				})]
 			}),
-			e.specialValueB != null && /* @__PURE__ */ m(s, {
+			e.specialValueB != null && /* @__PURE__ */ m(c, {
 				sx: {
 					display: "flex",
 					justifyContent: "space-between"
 				},
-				children: [/* @__PURE__ */ p(u, {
+				children: [/* @__PURE__ */ p(d, {
 					variant: "caption",
 					color: "text.secondary",
 					children: n
-				}), /* @__PURE__ */ p(u, {
+				}), /* @__PURE__ */ p(d, {
 					variant: "caption",
 					children: String(e.specialValueB)
 				})]
@@ -89,62 +89,83 @@ function _({ info: e, labelA: t, labelB: n }) {
 		] })]
 	});
 }
-function v({ data: o, orientation: c = "LR", width: f = 800, height: v = 500, levelSpacing: y = 200, nodeRadius: b = 10, sortBy: x = "name", showLabels: ne = !0, labelFontSize: re = 12, labelColor: ie, showIcons: ae = !0, chartColors: S, linkStrokeOpacity: oe = 1, linkStrokeWidth: se = 1.5, linkColor: ce, zoomable: C = !1, drillable: w = !1, onFocusChange: T, showNodePopover: E = !1, renderNodePopoverContent: D, onNodeClick: le, disabled: O = !1, translation: ue }) {
-	let k = d(), A = {
+function v({ data: s, orientation: l = "LR", width: f = 800, height: v = 500, levelSpacing: re = 200, nodeRadius: y = 10, sortBy: b = "name", showLabels: ie = !0, labelFontSize: ae = 12, labelColor: oe, showIcons: x = !0, chartColors: S, linkStrokeOpacity: C = 1, linkStrokeWidth: w = 1.5, linkColor: se, zoomable: T = !1, drillable: E = !1, onFocusChange: D, showNodePopover: ce = !1, renderNodePopoverContent: le, onNodeClick: ue, duration: O = 750, disabled: k = !1, translation: de }) {
+	let A = te(), j = {
 		...e,
-		...ue
-	}, de = [
-		k.palette.primary.main,
-		k.palette.secondary.main,
-		k.palette.error.main,
-		k.palette.warning.main,
-		k.palette.success.main,
-		k.palette.info.main
-	], j = S && S.length > 0 ? S : de, fe = ie || k.palette.text.primary, pe = ce || k.palette.text.secondary, me = k.palette.background.paper, he = k.typography.fontFamily, M = c === "TB" || c === "BT", N = M ? v : f, P = M ? f : v, [F, I] = a([o]), L = F[F.length - 1], [ge, _e] = a(o);
-	ge !== o && (_e(o), I([o]));
-	let R = r(() => {
-		let e = h.hierarchy(L);
-		x === "value" ? (e.sum((e) => e.value ?? 0), e.sort((e, t) => (t.value ?? 0) - (e.value ?? 0))) : e.sort((e, t) => h.ascending(String(e.data.name), String(t.data.name)));
+		...de
+	}, fe = [
+		A.palette.primary.main,
+		A.palette.secondary.main,
+		A.palette.error.main,
+		A.palette.warning.main,
+		A.palette.success.main,
+		A.palette.info.main
+	], M = S && S.length > 0 ? S : fe, pe = oe || A.palette.text.primary, N = se || A.palette.text.secondary, me = A.palette.background.paper, he = A.typography.fontFamily, P = l === "TB" || l === "BT", F = P ? v : f, I = P ? f : v, [L, R] = o([s]), z = L[L.length - 1], [ge, _e] = o(s), [B, V] = o(!1);
+	ge !== s && (_e(s), R([s]), V(!0));
+	let H = i(() => {
+		let e = h.hierarchy(z);
+		b === "value" ? (e.sum((e) => e.value ?? 0), e.sort((e, t) => (t.value ?? 0) - (e.value ?? 0))) : e.sort((e, t) => h.ascending(String(e.data.name), String(t.data.name)));
 		let t = h.max(e.descendants(), (e) => e.depth) ?? 1;
-		return h.tree().size([N * .8, Math.min(t * y, P * .85)])(e);
+		return h.tree().size([F * .8, Math.min(t * re, I * .85)])(e);
 	}, [
-		L,
-		x,
-		N,
-		P,
-		y
-	]), ve = R.descendants(), ye = R.links(), be = t((e) => e.data.colorConfig?.fill ?? j[e.depth % j.length], [j]), z = t((e) => {
-		switch (c) {
+		z,
+		b,
+		F,
+		I,
+		re
+	]), ve = H.descendants(), ye = H.links(), U = a(H), W = a(null), [G, K] = o(null), [be, q] = o(0);
+	n(() => {
+		let e = U.current;
+		if (U.current = H, e === H) return;
+		if (W.current != null && (cancelAnimationFrame(W.current), W.current = null), B || O <= 0) {
+			V(!1), K(null);
+			return;
+		}
+		K(e), q(1);
+		let t = performance.now(), n = (e) => {
+			let r = Math.min(1, (e - t) / O);
+			q(1 - h.easeCubic(r)), r < 1 ? W.current = requestAnimationFrame(n) : (W.current = null, K(null));
+		};
+		return W.current = requestAnimationFrame(n), () => {
+			W.current != null && cancelAnimationFrame(W.current);
+		};
+	}, [
+		H,
+		O,
+		B
+	]);
+	let J = t((e) => e.data.colorConfig?.fill ?? M[e.depth % M.length], [M]), Y = t((e) => {
+		switch (l) {
 			case "LR": return {
 				x: e.y,
-				y: e.x - N * .4
+				y: e.x - F * .4
 			};
 			case "RL": return {
-				x: P * .85 - e.y,
-				y: e.x - N * .4
+				x: I * .85 - e.y,
+				y: e.x - F * .4
 			};
 			case "TB": return {
-				x: e.x - N * .4,
+				x: e.x - F * .4,
 				y: e.y
 			};
 			case "BT": return {
-				x: e.x - N * .4,
-				y: P * .85 - e.y
+				x: e.x - F * .4,
+				y: I * .85 - e.y
 			};
 		}
 	}, [
-		c,
-		N,
-		P
+		l,
+		F,
+		I
 	]), xe = t((e) => {
-		let t = z(e.source), n = z(e.target);
-		if (c === "LR" || c === "RL") {
+		let t = Y(e.source), n = Y(e.target);
+		if (l === "LR" || l === "RL") {
 			let e = (t.x + n.x) / 2;
 			return `M${t.x},${t.y} C${e},${t.y} ${e},${n.y} ${n.x},${n.y}`;
 		}
 		let r = (t.y + n.y) / 2;
 		return `M${t.x},${t.y} C${t.x},${r} ${n.x},${r} ${n.x},${n.y}`;
-	}, [z, c]), B = t((e) => ({
+	}, [Y, l]), Se = t((e) => ({
 		id: e.data.id ?? null,
 		name: e.data.name,
 		subname: e.data.subname ?? null,
@@ -155,45 +176,45 @@ function v({ data: o, orientation: c = "LR", width: f = 800, height: v = 500, le
 		path: e.ancestors().map((e) => e.data.name).reverse(),
 		childrenCount: e.children?.length ?? 0,
 		data: e.data
-	}), []), [V, H] = a(`0 -${v / 2} ${f} ${v}`), [U, W] = a(1), G = i(null), Se = r(() => {
-		if (U === 1) return V;
-		let [e, t, n, r] = V.split(" ").map(Number), i = n / U, a = r / U;
+	}), []), [X, Ce] = o(`0 -${v / 2} ${f} ${v}`), [Z, we] = o(1), Te = a(null), Ee = i(() => {
+		if (Z === 1) return X;
+		let [e, t, n, r] = X.split(" ").map(Number), i = n / Z, a = r / Z;
 		return `${e + (n - i) / 2} ${t + (r - a) / 2} ${i} ${a}`;
-	}, [V, U]);
-	n(() => {
-		let e = G.current;
+	}, [X, Z]);
+	r(() => {
+		let e = Te.current;
 		if (!e) return;
 		let t = requestAnimationFrame(() => {
 			try {
 				let t = e.getBBox();
-				H(`${t.x - 24} ${t.y - 24} ${t.width + 48} ${t.height + 48}`);
+				Ce(`${t.x - 24} ${t.y - 24} ${t.width + 48} ${t.height + 48}`);
 			} catch {
-				H(`0 -${v / 2} ${f} ${v}`);
+				Ce(`0 -${v / 2} ${f} ${v}`);
 			}
 		});
 		return () => cancelAnimationFrame(t);
 	}, [
-		R,
+		H,
 		f,
 		v,
-		c
+		l
 	]);
-	let Ce = t((e) => {
-		if (!C || O || !e.ctrlKey) return;
+	let De = t((e) => {
+		if (!T || k || !e.ctrlKey) return;
 		e.preventDefault();
 		let t = e.deltaY < 0 ? 1.15 : 1 / 1.15;
-		W((e) => Math.max(.25, Math.min(8, e * t)));
-	}, [C, O]), K = i(null), we = (e) => {
-		K.current &&= (clearTimeout(K.current), null), K.current = setTimeout(() => {
-			e(), K.current = null;
+		we((e) => Math.max(.25, Math.min(8, e * t)));
+	}, [T, k]), Q = a(null), Oe = (e) => {
+		Q.current &&= (clearTimeout(Q.current), null), Q.current = setTimeout(() => {
+			e(), Q.current = null;
 		}, 250);
-	}, q = () => {
-		K.current &&= (clearTimeout(K.current), null);
-	}, J = t(() => {
-		I((e) => {
+	}, ke = () => {
+		Q.current &&= (clearTimeout(Q.current), null);
+	}, Ae = t(() => {
+		R((e) => {
 			if (e.length <= 1) return e;
 			let t = e.slice(0, -1);
-			return T?.({
+			return D?.({
 				focusedNode: {
 					id: t[t.length - 1].id ?? null,
 					name: t[t.length - 1].name,
@@ -209,90 +230,90 @@ function v({ data: o, orientation: c = "LR", width: f = 800, height: v = 500, le
 				isRoot: t.length <= 1
 			}), t;
 		});
-	}, [T]);
-	n(() => {
-		if (!C && !w) return;
+	}, [D]);
+	r(() => {
+		if (!T && !E) return;
 		let e = (e) => {
-			e.key === "Escape" && (C && W(1), w && (I([o]), T?.({
+			e.key === "Escape" && (T && we(1), E && (R([s]), D?.({
 				focusedNode: {
-					id: o.id ?? null,
-					name: o.name,
-					subname: o.subname ?? null,
+					id: s.id ?? null,
+					name: s.name,
+					subname: s.subname ?? null,
 					value: null,
 					specialValueA: null,
 					specialValueB: null,
 					depth: 0,
-					path: [o.name],
-					childrenCount: o.children?.length ?? 0,
-					data: o
+					path: [s.name],
+					childrenCount: s.children?.length ?? 0,
+					data: s
 				},
 				isRoot: !0
 			})));
 		};
 		return window.addEventListener("keydown", e), () => window.removeEventListener("keydown", e);
 	}, [
-		C,
-		w,
-		o,
-		T
+		T,
+		E,
+		s,
+		D
 	]);
-	let Y = i(null), X = i(null), [Te, Z] = a(!1), [Ee, De] = a(null), [Q, Oe] = a({
+	let je = a(null), Me = a(null), [Ne, Pe] = o(!1), [Fe, Ie] = o(null), [Le, Re] = o({
 		left: 0,
 		top: 0
-	}), [$, ke] = a(null), Ae = (e, t) => {
-		if (O) return;
-		let n = B(e);
-		if ((t.ctrlKey || t.metaKey) && w && e.children) {
-			we(() => {
-				I((t) => [...t, e.data]), T?.({
+	}), [$, ze] = o(null), Be = (e, t) => {
+		if (k) return;
+		let n = Se(e);
+		if ((t.ctrlKey || t.metaKey) && E && e.children) {
+			Oe(() => {
+				R((t) => [...t, e.data]), D?.({
 					focusedNode: n,
 					isRoot: !1
 				});
 			});
 			return;
 		}
-		if ((t.ctrlKey || t.metaKey) && w) {
-			q(), J();
+		if ((t.ctrlKey || t.metaKey) && E) {
+			ke(), Ae();
 			return;
 		}
-		if (E) {
-			let e = Y.current?.getBoundingClientRect();
-			Oe({
+		if (ce) {
+			let e = je.current?.getBoundingClientRect();
+			Re({
 				left: e ? t.clientX - e.left : t.clientX,
 				top: e ? t.clientY - e.top : t.clientY
-			}), De(X.current), ke(n), Z(!0);
+			}), Ie(Me.current), ze(n), Pe(!0);
 		}
-		le?.(n, t);
-	}, je = (e, t) => {
-		O || !w || (t.ctrlKey || t.metaKey) && (q(), J());
-	}, Me = {
+		ue?.(n, t);
+	}, Ve = (e, t) => {
+		k || !E || (t.ctrlKey || t.metaKey) && (ke(), Ae());
+	}, He = {
 		followCursor: !0,
 		enterDelay: 50,
 		enterNextDelay: 0,
-		disableHoverListener: O,
+		disableHoverListener: k,
 		slotProps: { tooltip: { sx: { maxWidth: 240 } } }
-	}, Ne = Math.round(b * 1.3);
-	return /* @__PURE__ */ m(s, {
-		ref: Y,
+	}, Ue = Math.round(y * 1.3);
+	return /* @__PURE__ */ m(c, {
+		ref: je,
 		sx: {
 			display: "inline-flex",
 			position: "relative",
-			opacity: O ? .5 : 1,
-			cursor: O ? "not-allowed" : "default",
+			opacity: k ? .5 : 1,
+			cursor: k ? "not-allowed" : "default",
 			userSelect: "none"
 		},
 		children: [
-			/* @__PURE__ */ p(s, {
-				ref: X,
+			/* @__PURE__ */ p(c, {
+				ref: Me,
 				sx: {
 					position: "absolute",
-					left: Q.left,
-					top: Q.top,
+					left: Le.left,
+					top: Le.top,
 					width: 0,
 					height: 0
 				}
 			}),
-			w && F.length > 1 && /* @__PURE__ */ p(s, {
+			E && L.length > 1 && /* @__PURE__ */ p(c, {
 				sx: {
 					position: "absolute",
 					top: 4,
@@ -303,7 +324,7 @@ function v({ data: o, orientation: c = "LR", width: f = 800, height: v = 500, le
 					pointerEvents: "none",
 					zIndex: 1
 				},
-				children: /* @__PURE__ */ p(u, {
+				children: /* @__PURE__ */ p(d, {
 					variant: "caption",
 					sx: {
 						bgcolor: "action.hover",
@@ -313,158 +334,193 @@ function v({ data: o, orientation: c = "LR", width: f = 800, height: v = 500, le
 						color: "text.secondary",
 						fontSize: "0.7rem"
 					},
-					children: F.map((e) => e.name).join(" › ")
+					children: L.map((e) => e.name).join(" › ")
 				})
 			}),
 			/* @__PURE__ */ p("svg", {
 				width: f,
 				height: v,
-				viewBox: Se,
-				onWheel: Ce,
+				viewBox: Ee,
+				onWheel: De,
 				style: {
 					fontFamily: he ?? "sans-serif",
-					overflow: C && U > 1 ? "hidden" : "visible"
+					overflow: T && Z > 1 ? "hidden" : "visible"
 				},
 				role: "img",
-				"aria-label": o.name,
+				"aria-label": s.name,
 				children: /* @__PURE__ */ m("g", {
-					ref: G,
-					children: [/* @__PURE__ */ p("g", {
-						fill: "none",
-						stroke: pe,
-						strokeOpacity: oe,
-						strokeWidth: se,
-						children: ye.map((e, t) => /* @__PURE__ */ p("path", { d: xe(e) }, `link-${t}`))
-					}), ve.map((e, t) => {
-						let n = z(e), r = be(e), i = B(e), a = e.children ? g.folder : g.person, o = c === "LR", l = c === "RL", d = o ? b + 6 : l ? -(b + 6) : 0, f = !o && !l ? c === "TB" ? b + 16 : -(b + 6) : 0, h = o ? "start" : l ? "end" : "middle", _ = /* @__PURE__ */ m(s, {
-							sx: {
-								py: .5,
-								minWidth: 140
-							},
-							children: [
-								/* @__PURE__ */ p(u, {
-									variant: "caption",
-									sx: {
-										fontWeight: "bold",
-										display: "block",
-										fontSize: "0.8rem"
-									},
-									children: e.data.name
-								}),
-								e.data.subname && /* @__PURE__ */ p(u, {
-									variant: "caption",
-									sx: {
-										display: "block",
-										opacity: .85
-									},
-									children: e.data.subname
-								}),
-								(i.specialValueA != null || i.specialValueB != null || e.children) && /* @__PURE__ */ m(s, {
-									sx: {
-										mt: .75,
-										borderTop: "1px solid rgba(255,255,255,0.2)",
-										pt: .75
-									},
+					ref: Te,
+					children: [
+						/* @__PURE__ */ p("g", {
+							fill: "none",
+							stroke: N,
+							strokeOpacity: C,
+							strokeWidth: w,
+							children: ye.map((e, t) => /* @__PURE__ */ p("path", { d: xe(e) }, `link-${t}`))
+						}),
+						ve.map((e, t) => {
+							let n = Y(e), r = J(e), i = Se(e), a = e.children ? g.folder : g.person, o = l === "LR", s = l === "RL", u = o ? y + 6 : s ? -(y + 6) : 0, te = !o && !s ? l === "TB" ? y + 16 : -(y + 6) : 0, f = o ? "start" : s ? "end" : "middle", h = /* @__PURE__ */ m(c, {
+								sx: {
+									py: .5,
+									minWidth: 140
+								},
+								children: [
+									/* @__PURE__ */ p(d, {
+										variant: "caption",
+										sx: {
+											fontWeight: "bold",
+											display: "block",
+											fontSize: "0.8rem"
+										},
+										children: e.data.name
+									}),
+									e.data.subname && /* @__PURE__ */ p(d, {
+										variant: "caption",
+										sx: {
+											display: "block",
+											opacity: .85
+										},
+										children: e.data.subname
+									}),
+									(i.specialValueA != null || i.specialValueB != null || e.children) && /* @__PURE__ */ m(c, {
+										sx: {
+											mt: .75,
+											borderTop: "1px solid rgba(255,255,255,0.2)",
+											pt: .75
+										},
+										children: [
+											i.specialValueA != null && /* @__PURE__ */ m(c, {
+												sx: {
+													display: "flex",
+													justifyContent: "space-between",
+													gap: 2
+												},
+												children: [/* @__PURE__ */ p(d, {
+													variant: "caption",
+													sx: { opacity: .6 },
+													children: j.specialValueA ?? "A"
+												}), /* @__PURE__ */ p(d, {
+													variant: "caption",
+													children: String(i.specialValueA)
+												})]
+											}),
+											i.specialValueB != null && /* @__PURE__ */ m(c, {
+												sx: {
+													display: "flex",
+													justifyContent: "space-between",
+													gap: 2
+												},
+												children: [/* @__PURE__ */ p(d, {
+													variant: "caption",
+													sx: { opacity: .6 },
+													children: j.specialValueB ?? "B"
+												}), /* @__PURE__ */ p(d, {
+													variant: "caption",
+													children: String(i.specialValueB)
+												})]
+											}),
+											e.children && /* @__PURE__ */ m(c, {
+												sx: {
+													display: "flex",
+													justifyContent: "space-between",
+													gap: 2
+												},
+												children: [/* @__PURE__ */ p(d, {
+													variant: "caption",
+													sx: { opacity: .6 },
+													children: "Reports"
+												}), /* @__PURE__ */ p(d, {
+													variant: "caption",
+													children: e.children.length
+												})]
+											})
+										]
+									})
+								]
+							});
+							return /* @__PURE__ */ p(ee, {
+								...He,
+								title: h,
+								children: /* @__PURE__ */ m("g", {
+									transform: `translate(${n.x},${n.y})`,
+									onClick: (t) => Be(e, t),
+									onDoubleClick: (t) => Ve(e, t),
+									style: { cursor: k ? "not-allowed" : "pointer" },
 									children: [
-										i.specialValueA != null && /* @__PURE__ */ m(s, {
-											sx: {
-												display: "flex",
-												justifyContent: "space-between",
-												gap: 2
-											},
-											children: [/* @__PURE__ */ p(u, {
-												variant: "caption",
-												sx: { opacity: .6 },
-												children: A.specialValueA ?? "A"
-											}), /* @__PURE__ */ p(u, {
-												variant: "caption",
-												children: String(i.specialValueA)
-											})]
+										/* @__PURE__ */ p("circle", {
+											r: y + 8,
+											fill: "transparent"
 										}),
-										i.specialValueB != null && /* @__PURE__ */ m(s, {
-											sx: {
-												display: "flex",
-												justifyContent: "space-between",
-												gap: 2
-											},
-											children: [/* @__PURE__ */ p(u, {
-												variant: "caption",
-												sx: { opacity: .6 },
-												children: A.specialValueB ?? "B"
-											}), /* @__PURE__ */ p(u, {
-												variant: "caption",
-												children: String(i.specialValueB)
-											})]
+										/* @__PURE__ */ p("circle", {
+											r: y + 2,
+											fill: r,
+											fillOpacity: .15
 										}),
-										e.children && /* @__PURE__ */ m(s, {
-											sx: {
-												display: "flex",
-												justifyContent: "space-between",
-												gap: 2
-											},
-											children: [/* @__PURE__ */ p(u, {
-												variant: "caption",
-												sx: { opacity: .6 },
-												children: "Reports"
-											}), /* @__PURE__ */ p(u, {
-												variant: "caption",
-												children: e.children.length
-											})]
+										/* @__PURE__ */ p("circle", {
+											r: y,
+											fill: r
+										}),
+										x && /* @__PURE__ */ p(_, {
+											path: a,
+											size: Ue
+										}),
+										ie && /* @__PURE__ */ p("text", {
+											x: u,
+											y: te,
+											dy: "0.35em",
+											textAnchor: f,
+											fontSize: ae,
+											fontWeight: e.children ? "bold" : "normal",
+											fill: e.data.colorConfig?.textColor ?? pe,
+											paintOrder: "stroke",
+											stroke: me,
+											strokeWidth: 3,
+											pointerEvents: "none",
+											children: e.data.name
 										})
 									]
 								})
-							]
-						});
-						return /* @__PURE__ */ p(ee, {
-							...Me,
-							title: _,
-							children: /* @__PURE__ */ m("g", {
-								transform: `translate(${n.x},${n.y})`,
-								onClick: (t) => Ae(e, t),
-								onDoubleClick: (t) => je(e, t),
-								style: { cursor: O ? "not-allowed" : "pointer" },
-								children: [
-									/* @__PURE__ */ p("circle", {
-										r: b + 8,
-										fill: "transparent"
-									}),
-									/* @__PURE__ */ p("circle", {
-										r: b + 2,
-										fill: r,
-										fillOpacity: .15
-									}),
-									/* @__PURE__ */ p("circle", {
-										r: b,
-										fill: r
-									}),
-									ae && /* @__PURE__ */ p(te, {
-										path: a,
-										size: Ne
-									}),
-									ne && /* @__PURE__ */ p("text", {
-										x: d,
-										y: f,
-										dy: "0.35em",
-										textAnchor: h,
-										fontSize: re,
-										fontWeight: e.children ? "bold" : "normal",
-										fill: e.data.colorConfig?.textColor ?? fe,
-										paintOrder: "stroke",
-										stroke: me,
-										strokeWidth: 3,
-										pointerEvents: "none",
-										children: e.data.name
-									})
-								]
-							})
-						}, `node-${t}`);
-					})]
+							}, `node-${t}`);
+						}),
+						G && ((e, t) => /* @__PURE__ */ m("g", {
+							"data-testid": "drill-ghost-layer",
+							opacity: t,
+							pointerEvents: "none",
+							children: [/* @__PURE__ */ p("g", {
+								fill: "none",
+								stroke: N,
+								strokeOpacity: C,
+								strokeWidth: w,
+								children: e.links().map((e, t) => /* @__PURE__ */ p("path", { d: xe(e) }, `ghost-link-${t}`))
+							}), /* @__PURE__ */ p("g", { children: e.descendants().map((e, t) => {
+								let n = Y(e);
+								return /* @__PURE__ */ m("g", {
+									transform: `translate(${n.x},${n.y})`,
+									children: [
+										/* @__PURE__ */ p("circle", {
+											r: y + 2,
+											fill: J(e),
+											fillOpacity: .15
+										}),
+										/* @__PURE__ */ p("circle", {
+											r: y,
+											fill: J(e)
+										}),
+										x && /* @__PURE__ */ p(_, {
+											path: e.children ? g.folder : g.person,
+											size: Ue
+										})
+									]
+								}, `ghost-node-${t}`);
+							}) })]
+						}))(G, be)
+					]
 				})
 			}),
-			E && /* @__PURE__ */ p(l, {
-				open: Te,
-				anchorEl: Ee,
-				onClose: () => Z(!1),
+			ce && /* @__PURE__ */ p(u, {
+				open: Ne,
+				anchorEl: Fe,
+				onClose: () => Pe(!1),
 				anchorOrigin: {
 					vertical: "top",
 					horizontal: "right"
@@ -474,10 +530,10 @@ function v({ data: o, orientation: c = "LR", width: f = 800, height: v = 500, le
 					horizontal: "left"
 				},
 				slotProps: { paper: { elevation: 4 } },
-				children: $ && (D ? D($) : /* @__PURE__ */ p(_, {
+				children: $ && (le ? le($) : /* @__PURE__ */ p(ne, {
 					info: $,
-					labelA: A.specialValueA ?? "Value A",
-					labelB: A.specialValueB ?? "Value B"
+					labelA: j.specialValueA ?? "Value A",
+					labelB: j.specialValueB ?? "Value B"
 				}))
 			})
 		]