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

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

@@ -1,87 +1,87 @@
 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 { Fragment as f, jsx as p, jsxs as m } from "react/jsx-runtime";
-import * as h from "d3";
+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 ee, Tooltip as te, Typography as u, useTheme as ne } from "@mui/material";
+import { Fragment as d, jsx as f, jsxs as p } from "react/jsx-runtime";
+import * as m from "d3";
 //#region src/components/horizontal-tree-chart/HorizontalTreeChart.tsx
-var g = {
+var h = {
 	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 re({ path: e, size: t }) {
 	let n = t / 2;
-	return /* @__PURE__ */ p("g", {
+	return /* @__PURE__ */ f("g", {
 		transform: `translate(${-n},${-n})`,
 		pointerEvents: "none",
-		children: /* @__PURE__ */ p("svg", {
+		children: /* @__PURE__ */ f("svg", {
 			width: t,
 			height: t,
 			viewBox: "0 0 24 24",
 			overflow: "visible",
-			children: /* @__PURE__ */ p("path", {
+			children: /* @__PURE__ */ f("path", {
 				d: e,
 				fill: "white"
 			})
 		})
 	});
 }
-function _({ info: e, labelA: t, labelB: n }) {
-	return /* @__PURE__ */ m(s, {
+function ie({ info: e, labelA: t, labelB: n }) {
+	return /* @__PURE__ */ p(c, {
 		sx: {
 			p: 2,
 			minWidth: 200,
 			maxWidth: 280
 		},
-		children: [/* @__PURE__ */ m(s, {
+		children: [/* @__PURE__ */ p(c, {
 			sx: {
 				display: "flex",
 				alignItems: "center",
 				gap: 1.5,
 				mb: 1.5
 			},
-			children: [/* @__PURE__ */ p(o, {
+			children: [/* @__PURE__ */ f(s, {
 				sx: {
 					bgcolor: "primary.main",
 					width: 40,
 					height: 40
 				},
 				children: e.name.charAt(0).toUpperCase()
-			}), /* @__PURE__ */ m(s, { children: [/* @__PURE__ */ p(u, {
+			}), /* @__PURE__ */ p(c, { children: [/* @__PURE__ */ f(u, {
 				variant: "body2",
 				sx: { fontWeight: "bold" },
 				children: e.name
-			}), e.subname && /* @__PURE__ */ p(u, {
+			}), e.subname && /* @__PURE__ */ f(u, {
 				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, {
+		}), (e.specialValueA != null || e.specialValueB != null) && /* @__PURE__ */ p(d, { children: [
+			/* @__PURE__ */ f(l, { sx: { mb: 1.5 } }),
+			e.specialValueA != null && /* @__PURE__ */ p(c, {
 				sx: {
 					display: "flex",
 					justifyContent: "space-between",
 					mb: .5
 				},
-				children: [/* @__PURE__ */ p(u, {
+				children: [/* @__PURE__ */ f(u, {
 					variant: "caption",
 					color: "text.secondary",
 					children: t
-				}), /* @__PURE__ */ p(u, {
+				}), /* @__PURE__ */ f(u, {
 					variant: "caption",
 					children: String(e.specialValueA)
 				})]
 			}),
-			e.specialValueB != null && /* @__PURE__ */ m(s, {
+			e.specialValueB != null && /* @__PURE__ */ p(c, {
 				sx: {
 					display: "flex",
 					justifyContent: "space-between"
 				},
-				children: [/* @__PURE__ */ p(u, {
+				children: [/* @__PURE__ */ f(u, {
 					variant: "caption",
 					color: "text.secondary",
 					children: n
-				}), /* @__PURE__ */ p(u, {
+				}), /* @__PURE__ */ f(u, {
 					variant: "caption",
 					children: String(e.specialValueB)
 				})]
@@ -89,38 +89,66 @@ 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 g({ data: s, orientation: l = "LR", width: d = 800, height: g = 500, levelSpacing: _ = 200, nodeRadius: v = 10, sortBy: y = "name", showLabels: ae = !0, labelFontSize: oe = 12, labelColor: se, showIcons: ce = !0, chartColors: b, linkStrokeOpacity: le = 1, linkStrokeWidth: x = 1.5, linkColor: ue, zoomable: S = !1, drillable: C = !1, onFocusChange: w, showNodePopover: T = !1, renderNodePopoverContent: E, onNodeClick: de, duration: D = 750, disabled: O = !1, translation: fe }) {
+	let k = ne(), A = {
 		...e,
-		...ue
-	}, de = [
+		...fe
+	}, pe = [
 		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)));
-		let t = h.max(e.descendants(), (e) => e.depth) ?? 1;
-		return h.tree().size([N * .8, Math.min(t * y, P * .85)])(e);
+	], j = b && b.length > 0 ? b : pe, M = se || k.palette.text.primary, me = ue || k.palette.text.secondary, he = k.palette.background.paper, ge = k.typography.fontFamily, _e = !s.children?.length && !s.value, ve = l === "TB" || l === "BT", N = ve ? g : d, P = ve ? d : g, [F, I] = o([s]), L = F[F.length - 1], [ye, be] = o(s), [R, z] = o(!1);
+	ye !== s && (be(s), I([s]), z(!0));
+	let B = i(() => {
+		let e = m.hierarchy(L);
+		y === "value" ? (e.sum((e) => e.value ?? 0), e.sort((e, t) => (t.value ?? 0) - (e.value ?? 0))) : e.sort((e, t) => m.ascending(String(e.data.name), String(t.data.name)));
+		let t = m.max(e.descendants(), (e) => e.depth) ?? 1;
+		return m.tree().size([N * .8, Math.min(t * _, P * .85)])(e);
 	}, [
 		L,
-		x,
+		y,
 		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) {
+		_
+	]), V = i(() => {
+		let e = m.max(m.hierarchy(L).descendants(), (e) => e.depth) ?? 1;
+		return Math.min(e * _, P * .85);
+	}, [
+		L,
+		_,
+		P
+	]), xe = B.descendants(), Se = B.links(), H = a(B), U = a(null), [W, G] = o(null), [Ce, K] = o(0);
+	n(() => {
+		let e = H.current;
+		if (H.current = B, e === B) return;
+		if (U.current != null && (cancelAnimationFrame(U.current), U.current = null), R || D <= 0) {
+			z(!1), G(null);
+			return;
+		}
+		G(e), K(1);
+		let t = performance.now(), n = (e) => {
+			let r = Math.min(1, (e - t) / D);
+			K(1 - m.easeCubic(r)), r < 1 ? U.current = requestAnimationFrame(n) : (U.current = null, G(null));
+		};
+		return U.current = requestAnimationFrame(n), () => {
+			U.current != null && cancelAnimationFrame(U.current);
+		};
+	}, [
+		B,
+		D,
+		R
+	]);
+	let q = t((e) => e.data.colorConfig?.fill ?? j[e.depth % j.length], [j]), J = t((e) => {
+		switch (l) {
 			case "LR": return {
 				x: e.y,
 				y: e.x - N * .4
 			};
 			case "RL": return {
-				x: P * .85 - e.y,
+				x: V - e.y,
 				y: e.x - N * .4
 			};
 			case "TB": return {
@@ -129,22 +157,22 @@ function v({ data: o, orientation: c = "LR", width: f = 800, height: v = 500, le
 			};
 			case "BT": return {
 				x: e.x - N * .4,
-				y: P * .85 - e.y
+				y: V - e.y
 			};
 		}
 	}, [
-		c,
+		l,
 		N,
-		P
-	]), xe = t((e) => {
-		let t = z(e.source), n = z(e.target);
-		if (c === "LR" || c === "RL") {
+		V
+	]), we = t((e) => {
+		let t = J(e.source), n = J(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) => ({
+	}, [J, l]), Te = t((e) => ({
 		id: e.data.id ?? null,
 		name: e.data.name,
 		subname: e.data.subname ?? null,
@@ -155,45 +183,47 @@ 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;
+	}), []), [Y, Ee] = o(`0 -${g / 2} ${d} ${g}`), [X, De] = o(1), Oe = a(null), ke = i(() => {
+		if (X === 1) return Y;
+		let [e, t, n, r] = Y.split(" ").map(Number), i = n / X, a = r / X;
 		return `${e + (n - i) / 2} ${t + (r - a) / 2} ${i} ${a}`;
-	}, [V, U]);
-	n(() => {
-		let e = G.current;
+	}, [Y, X]);
+	r(() => {
+		let e = Oe.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}`);
+				Ee(`${t.x - 24} ${t.y - 24} ${t.width + 48} ${t.height + 48}`);
 			} catch {
-				H(`0 -${v / 2} ${f} ${v}`);
+				Ee(`0 -${g / 2} ${d} ${g}`);
 			}
 		});
 		return () => cancelAnimationFrame(t);
 	}, [
-		R,
-		f,
-		v,
-		c
+		B,
+		d,
+		g,
+		l
 	]);
-	let Ce = t((e) => {
-		if (!C || O || !e.ctrlKey) return;
+	let Ae = t((e) => {
+		if (!S || O || !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;
+		De((e) => Math.max(.25, Math.min(8, e * t)));
+	}, [S, O]), Z = a(null), je = (e) => {
+		Z.current &&= (clearTimeout(Z.current), null), Z.current = setTimeout(() => {
+			e(), Z.current = null;
 		}, 250);
-	}, q = () => {
-		K.current &&= (clearTimeout(K.current), null);
-	}, J = t(() => {
+	}, Q = () => {
+		Z.current &&= (clearTimeout(Z.current), null);
+	};
+	n(() => () => Q(), []);
+	let Me = t(() => {
 		I((e) => {
 			if (e.length <= 1) return e;
 			let t = e.slice(0, -1);
-			return T?.({
+			return w?.({
 				focusedNode: {
 					id: t[t.length - 1].id ?? null,
 					name: t[t.length - 1].name,
@@ -209,71 +239,71 @@ 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;
+	}, [w]);
+	r(() => {
+		if (!S && !C) return;
 		let e = (e) => {
-			e.key === "Escape" && (C && W(1), w && (I([o]), T?.({
+			e.key === "Escape" && (S && De(1), C && (Q(), I([s]), w?.({
 				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);
 	}, [
+		S,
 		C,
-		w,
-		o,
-		T
+		s,
+		w
 	]);
-	let Y = i(null), X = i(null), [Te, Z] = a(!1), [Ee, De] = a(null), [Q, Oe] = a({
+	let Ne = a(null), Pe = a(null), [Fe, Ie] = o(!1), [Le, Re] = o(null), [ze, Be] = o({
 		left: 0,
 		top: 0
-	}), [$, ke] = a(null), Ae = (e, t) => {
+	}), [$, Ve] = o(null), He = (e, t) => {
 		if (O) return;
-		let n = B(e);
-		if ((t.ctrlKey || t.metaKey) && w && e.children) {
-			we(() => {
-				I((t) => [...t, e.data]), T?.({
+		let n = Te(e);
+		if ((t.ctrlKey || t.metaKey) && C && e.children) {
+			je(() => {
+				I((t) => [...t, e.data]), w?.({
 					focusedNode: n,
 					isRoot: !1
 				});
 			});
 			return;
 		}
-		if ((t.ctrlKey || t.metaKey) && w) {
-			q(), J();
+		if ((t.ctrlKey || t.metaKey) && C) {
+			Q(), Me();
 			return;
 		}
-		if (E) {
-			let e = Y.current?.getBoundingClientRect();
-			Oe({
+		if (T) {
+			let e = Ne.current?.getBoundingClientRect();
+			Be({
 				left: e ? t.clientX - e.left : t.clientX,
 				top: e ? t.clientY - e.top : t.clientY
-			}), De(X.current), ke(n), Z(!0);
+			}), Re(Pe.current), Ve(n), Ie(!0);
 		}
-		le?.(n, t);
-	}, je = (e, t) => {
-		O || !w || (t.ctrlKey || t.metaKey) && (q(), J());
-	}, Me = {
+		de?.(n, t);
+	}, Ue = (e, t) => {
+		O || !C || (t.ctrlKey || t.metaKey) && (Q(), Me());
+	}, We = {
 		followCursor: !0,
 		enterDelay: 50,
 		enterNextDelay: 0,
 		disableHoverListener: O,
 		slotProps: { tooltip: { sx: { maxWidth: 240 } } }
-	}, Ne = Math.round(b * 1.3);
-	return /* @__PURE__ */ m(s, {
-		ref: Y,
+	}, Ge = Math.round(v * 1.3);
+	return /* @__PURE__ */ p(c, {
+		ref: Ne,
 		sx: {
 			display: "inline-flex",
 			position: "relative",
@@ -282,17 +312,17 @@ function v({ data: o, orientation: c = "LR", width: f = 800, height: v = 500, le
 			userSelect: "none"
 		},
 		children: [
-			/* @__PURE__ */ p(s, {
-				ref: X,
+			/* @__PURE__ */ f(c, {
+				ref: Pe,
 				sx: {
 					position: "absolute",
-					left: Q.left,
-					top: Q.top,
+					left: ze.left,
+					top: ze.top,
 					width: 0,
 					height: 0
 				}
 			}),
-			w && F.length > 1 && /* @__PURE__ */ p(s, {
+			C && F.length > 1 && /* @__PURE__ */ f(c, {
 				sx: {
 					position: "absolute",
 					top: 4,
@@ -303,7 +333,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__ */ f(u, {
 					variant: "caption",
 					sx: {
 						bgcolor: "action.hover",
@@ -316,155 +346,197 @@ function v({ data: o, orientation: c = "LR", width: f = 800, height: v = 500, le
 					children: F.map((e) => e.name).join(" › ")
 				})
 			}),
-			/* @__PURE__ */ p("svg", {
-				width: f,
-				height: v,
-				viewBox: Se,
-				onWheel: Ce,
+			/* @__PURE__ */ f("svg", {
+				width: d,
+				height: g,
+				viewBox: ke,
+				onWheel: Ae,
 				style: {
-					fontFamily: he ?? "sans-serif",
-					overflow: C && U > 1 ? "hidden" : "visible"
+					fontFamily: ge ?? "sans-serif",
+					overflow: S && X > 1 ? "hidden" : "visible"
 				},
 				role: "img",
-				"aria-label": o.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
-									},
+				"aria-label": s.name,
+				children: /* @__PURE__ */ p("g", {
+					ref: Oe,
+					children: [
+						_e && /* @__PURE__ */ f("text", {
+							textAnchor: "middle",
+							dy: "0.35em",
+							fontSize: 13,
+							fill: M,
+							children: A.noData
+						}),
+						/* @__PURE__ */ f("g", {
+							fill: "none",
+							stroke: me,
+							strokeOpacity: le,
+							strokeWidth: x,
+							children: Se.map((e, t) => /* @__PURE__ */ f("path", { d: we(e) }, `link-${t}`))
+						}),
+						xe.map((e, t) => {
+							let n = J(e), r = q(e), i = Te(e), a = e.children ? h.folder : h.person, o = l === "LR", s = l === "RL", ee = o ? v + 6 : s ? -(v + 6) : 0, ne = !o && !s ? l === "TB" ? v + 16 : -(v + 6) : 0, d = o ? "start" : s ? "end" : "middle", m = /* @__PURE__ */ p(c, {
+								sx: {
+									py: .5,
+									minWidth: 140
+								},
+								children: [
+									/* @__PURE__ */ f(u, {
+										variant: "caption",
+										sx: {
+											fontWeight: "bold",
+											display: "block",
+											fontSize: "0.8rem"
+										},
+										children: e.data.name
+									}),
+									e.data.subname && /* @__PURE__ */ f(u, {
+										variant: "caption",
+										sx: {
+											display: "block",
+											opacity: .85
+										},
+										children: e.data.subname
+									}),
+									(i.specialValueA != null || i.specialValueB != null || e.children) && /* @__PURE__ */ p(c, {
+										sx: {
+											mt: .75,
+											borderTop: "1px solid rgba(255,255,255,0.2)",
+											pt: .75
+										},
+										children: [
+											i.specialValueA != null && /* @__PURE__ */ p(c, {
+												sx: {
+													display: "flex",
+													justifyContent: "space-between",
+													gap: 2
+												},
+												children: [/* @__PURE__ */ f(u, {
+													variant: "caption",
+													sx: { opacity: .6 },
+													children: A.specialValueA ?? "A"
+												}), /* @__PURE__ */ f(u, {
+													variant: "caption",
+													children: String(i.specialValueA)
+												})]
+											}),
+											i.specialValueB != null && /* @__PURE__ */ p(c, {
+												sx: {
+													display: "flex",
+													justifyContent: "space-between",
+													gap: 2
+												},
+												children: [/* @__PURE__ */ f(u, {
+													variant: "caption",
+													sx: { opacity: .6 },
+													children: A.specialValueB ?? "B"
+												}), /* @__PURE__ */ f(u, {
+													variant: "caption",
+													children: String(i.specialValueB)
+												})]
+											}),
+											e.children && /* @__PURE__ */ p(c, {
+												sx: {
+													display: "flex",
+													justifyContent: "space-between",
+													gap: 2
+												},
+												children: [/* @__PURE__ */ f(u, {
+													variant: "caption",
+													sx: { opacity: .6 },
+													children: "Reports"
+												}), /* @__PURE__ */ f(u, {
+													variant: "caption",
+													children: e.children.length
+												})]
+											})
+										]
+									})
+								]
+							});
+							return /* @__PURE__ */ f(te, {
+								...We,
+								title: m,
+								children: /* @__PURE__ */ p("g", {
+									transform: `translate(${n.x},${n.y})`,
+									onClick: (t) => He(e, t),
+									onDoubleClick: (t) => Ue(e, t),
+									style: { cursor: O ? "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__ */ f("circle", {
+											r: v + 8,
+											fill: "transparent"
+										}),
+										/* @__PURE__ */ f("circle", {
+											r: v + 2,
+											fill: r,
+											fillOpacity: .15
 										}),
-										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__ */ f("circle", {
+											r: v,
+											fill: r
 										}),
-										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
-											})]
+										ce && /* @__PURE__ */ f(re, {
+											path: a,
+											size: Ge
+										}),
+										ae && /* @__PURE__ */ f("text", {
+											x: ee,
+											y: ne,
+											dy: "0.35em",
+											textAnchor: d,
+											fontSize: oe,
+											fontWeight: e.children ? "bold" : "normal",
+											fill: e.data.colorConfig?.textColor ?? M,
+											paintOrder: "stroke",
+											stroke: he,
+											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}`);
+						}),
+						W && ((e, t) => /* @__PURE__ */ p("g", {
+							"data-testid": "drill-ghost-layer",
+							opacity: t,
+							pointerEvents: "none",
+							children: [/* @__PURE__ */ f("g", {
+								fill: "none",
+								stroke: me,
+								strokeOpacity: le,
+								strokeWidth: x,
+								children: e.links().map((e, t) => /* @__PURE__ */ f("path", { d: we(e) }, `ghost-link-${t}`))
+							}), /* @__PURE__ */ f("g", { children: e.descendants().map((e, t) => {
+								let n = J(e);
+								return /* @__PURE__ */ p("g", {
+									transform: `translate(${n.x},${n.y})`,
+									children: [
+										/* @__PURE__ */ f("circle", {
+											r: v + 2,
+											fill: q(e),
+											fillOpacity: .15
+										}),
+										/* @__PURE__ */ f("circle", {
+											r: v,
+											fill: q(e)
+										}),
+										ce && /* @__PURE__ */ f(re, {
+											path: e.children ? h.folder : h.person,
+											size: Ge
+										})
+									]
+								}, `ghost-node-${t}`);
+							}) })]
+						}))(W, Ce)
+					]
 				})
 			}),
-			E && /* @__PURE__ */ p(l, {
-				open: Te,
-				anchorEl: Ee,
-				onClose: () => Z(!1),
+			T && /* @__PURE__ */ f(ee, {
+				open: Fe,
+				anchorEl: Le,
+				onClose: () => Ie(!1),
 				anchorOrigin: {
 					vertical: "top",
 					horizontal: "right"
@@ -474,7 +546,7 @@ 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: $ && (E ? E($) : /* @__PURE__ */ f(ie, {
 					info: $,
 					labelA: A.specialValueA ?? "Value A",
 					labelB: A.specialValueB ?? "Value B"
@@ -483,6 +555,6 @@ function v({ data: o, orientation: c = "LR", width: f = 800, height: v = 500, le
 		]
 	});
 }
-v.displayName = "HorizontalTreeChart";
+g.displayName = "HorizontalTreeChart";
 //#endregion
-export { v as HorizontalTreeChart };
+export { g as HorizontalTreeChart };