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

package/dist/components/horizontal-tree-chart/HorizontalTreeChart.types.d.ts

@@ -88,6 +88,8 @@ export type HorizontalTreeChartProps = {
     renderNodePopoverContent?: (info: HorizontalTreeNodeInfo) => React.ReactNode;
     /** Fires on every node click */
     onNodeClick?: (info: HorizontalTreeNodeInfo, event: React.MouseEvent<SVGGElement>) => void;
+    /** Drill-down/out crossfade duration in ms — set to 0 to disable (default: 750) */
+    duration?: number;
     /** Disables all interactions (default: false) */
     disabled?: boolean;
     /** Override translation strings */

package/dist/components/radial-tree-chart/RadialTreeChart.d.ts

@@ -1,5 +1,5 @@
 import { type RadialTreeChartProps } from "./RadialTreeChart.types";
-export declare function RadialTreeChart({ data, size, autoFit, sortBy, showLabels, showIcons, chartColors, rootNodeRadius, branchNodeRadius, leafNodeRadius, linkColor, linkStrokeOpacity, linkStrokeWidth, labelFontSize, labelColor, separationSibling, separationCousin, zoomable, drillable, onFocusChange, showNodePopover, renderNodePopoverContent, onNodeClick, disabled, translation, }: RadialTreeChartProps): import("react/jsx-runtime").JSX.Element;
+export declare function RadialTreeChart({ data, size, autoFit, sortBy, showLabels, showIcons, chartColors, rootNodeRadius, branchNodeRadius, leafNodeRadius, linkColor, linkStrokeOpacity, linkStrokeWidth, labelFontSize, labelColor, separationSibling, separationCousin, zoomable, drillable, onFocusChange, duration, showNodePopover, renderNodePopoverContent, onNodeClick, disabled, translation, }: RadialTreeChartProps): import("react/jsx-runtime").JSX.Element;
 export declare namespace RadialTreeChart {
     var displayName: string;
 }

package/dist/components/radial-tree-chart/RadialTreeChart.js

@@ -1,87 +1,87 @@
 import { DEFAULT_RADIAL_TREE_CHART_TRANSLATION as e } from "./RadialTreeChart.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 ee, Tooltip as te, Typography as l, useTheme as u } from "@mui/material";
-import { Fragment as d, jsx as f, jsxs as p } from "react/jsx-runtime";
-import * as m 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 re, jsx as d, jsxs as f } from "react/jsx-runtime";
+import * as p from "d3";
 //#region src/components/radial-tree-chart/RadialTreeChart.tsx
-var h = {
+var m = {
 	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 ne({ path: e, size: t }) {
+function ie({ path: e, size: t }) {
 	let n = t / 2;
-	return /* @__PURE__ */ f("g", {
+	return /* @__PURE__ */ d("g", {
 		transform: `translate(${-n},${-n})`,
 		pointerEvents: "none",
-		children: /* @__PURE__ */ f("svg", {
+		children: /* @__PURE__ */ d("svg", {
 			width: t,
 			height: t,
 			viewBox: "0 0 24 24",
 			overflow: "visible",
-			children: /* @__PURE__ */ f("path", {
+			children: /* @__PURE__ */ d("path", {
 				d: e,
 				fill: "white"
 			})
 		})
 	});
 }
-function re({ info: e, labelA: t, labelB: n }) {
-	return /* @__PURE__ */ p(s, {
+function ae({ info: e, labelA: t, labelB: n }) {
+	return /* @__PURE__ */ f(c, {
 		sx: {
 			p: 2,
 			minWidth: 200,
 			maxWidth: 280
 		},
-		children: [/* @__PURE__ */ p(s, {
+		children: [/* @__PURE__ */ f(c, {
 			sx: {
 				display: "flex",
 				alignItems: "center",
 				gap: 1.5,
 				mb: 1.5
 			},
-			children: [/* @__PURE__ */ f(o, {
+			children: [/* @__PURE__ */ d(s, {
 				sx: {
 					bgcolor: "primary.main",
 					width: 40,
 					height: 40
 				},
 				children: e.name.charAt(0).toUpperCase()
-			}), /* @__PURE__ */ p(s, { children: [/* @__PURE__ */ f(l, {
+			}), /* @__PURE__ */ f(c, { children: [/* @__PURE__ */ d(u, {
 				variant: "body2",
 				sx: { fontWeight: "bold" },
 				children: e.name
-			}), e.subname && /* @__PURE__ */ f(l, {
+			}), e.subname && /* @__PURE__ */ d(u, {
 				variant: "caption",
 				color: "text.secondary",
 				children: e.subname
 			})] })]
-		}), (e.specialValueA != null || e.specialValueB != null) && /* @__PURE__ */ p(d, { children: [
-			/* @__PURE__ */ f(c, { sx: { mb: 1.5 } }),
-			e.specialValueA != null && /* @__PURE__ */ p(s, {
+		}), (e.specialValueA != null || e.specialValueB != null) && /* @__PURE__ */ f(re, { children: [
+			/* @__PURE__ */ d(l, { sx: { mb: 1.5 } }),
+			e.specialValueA != null && /* @__PURE__ */ f(c, {
 				sx: {
 					display: "flex",
 					justifyContent: "space-between",
 					mb: .5
 				},
-				children: [/* @__PURE__ */ f(l, {
+				children: [/* @__PURE__ */ d(u, {
 					variant: "caption",
 					color: "text.secondary",
 					children: t
-				}), /* @__PURE__ */ f(l, {
+				}), /* @__PURE__ */ d(u, {
 					variant: "caption",
 					children: String(e.specialValueA)
 				})]
 			}),
-			e.specialValueB != null && /* @__PURE__ */ p(s, {
+			e.specialValueB != null && /* @__PURE__ */ f(c, {
 				sx: {
 					display: "flex",
 					justifyContent: "space-between"
 				},
-				children: [/* @__PURE__ */ f(l, {
+				children: [/* @__PURE__ */ d(u, {
 					variant: "caption",
 					color: "text.secondary",
 					children: n
-				}), /* @__PURE__ */ f(l, {
+				}), /* @__PURE__ */ d(u, {
 					variant: "caption",
 					children: String(e.specialValueB)
 				})]
@@ -89,33 +89,54 @@ function re({ info: e, labelA: t, labelB: n }) {
 		] })]
 	});
 }
-function g({ data: o, size: c = 600, autoFit: d = !0, sortBy: g = "name", showLabels: _ = !0, showIcons: ie = !0, chartColors: v, rootNodeRadius: y = 22, branchNodeRadius: b = 16, leafNodeRadius: x = 11, linkColor: ae, linkStrokeOpacity: oe = 1, linkStrokeWidth: se = 1.5, labelFontSize: ce = 12, labelColor: le, separationSibling: S = 1, separationCousin: C = 2, zoomable: w = !1, drillable: T = !1, onFocusChange: E, showNodePopover: D = !1, renderNodePopoverContent: O, onNodeClick: ue, disabled: k = !1, translation: de }) {
-	let A = u(), j = {
+function h({ data: s, size: l = 600, autoFit: re = !0, sortBy: h = "name", showLabels: g = !0, showIcons: _ = !0, chartColors: v, rootNodeRadius: y = 22, branchNodeRadius: b = 16, leafNodeRadius: x = 11, linkColor: oe, linkStrokeOpacity: S = 1, linkStrokeWidth: C = 1.5, labelFontSize: se = 12, labelColor: ce, separationSibling: w = 1, separationCousin: le = 2, zoomable: T = !1, drillable: E = !1, onFocusChange: D, duration: O = 750, showNodePopover: k = !1, renderNodePopoverContent: A, onNodeClick: ue, disabled: j = !1, translation: de }) {
+	let M = ne(), N = {
 		...e,
 		...de
 	}, fe = [
-		A.palette.primary.main,
-		A.palette.secondary.main,
-		A.palette.info.main,
-		A.palette.success.main,
-		A.palette.warning.main,
-		A.palette.error.main
-	], M = v && v.length > 0 ? v : fe, N = t((e) => e.depth === 0 ? y : e.children ? b : x, [
+		M.palette.primary.main,
+		M.palette.secondary.main,
+		M.palette.info.main,
+		M.palette.success.main,
+		M.palette.warning.main,
+		M.palette.error.main
+	], P = v && v.length > 0 ? v : fe, F = t((e) => e.depth === 0 ? y : e.children ? b : x, [
 		y,
 		b,
 		x
-	]), pe = t((e) => e.data.colorConfig?.fill ?? M[e.depth % M.length], [M]), [P, F] = a([o]), I = P[P.length - 1], [me, he] = a(o);
-	me !== o && (he(o), F([o]));
-	let L = Math.max(1, c / 2 - 70), R = r(() => {
-		let e = m.hierarchy(I);
-		return g === "value" ? (e.sum((e) => e.value ?? 0), e.sort((e, t) => (t.value ?? 0) - (e.value ?? 0))) : e.sort((e, t) => m.ascending(e.data.name, t.data.name)), m.tree().size([2 * Math.PI, L]).separation((e, t) => (e.parent === t.parent ? S : C) * 1.4 / Math.max(1, e.depth))(e);
+	]), I = t((e) => e.data.colorConfig?.fill ?? P[e.depth % P.length], [P]), [L, R] = o([s]), z = L[L.length - 1], [pe, me] = o(s), [B, V] = o(!1);
+	pe !== s && (me(s), R([s]), V(!0));
+	let H = Math.max(1, l / 2 - 70), U = i(() => {
+		let e = p.hierarchy(z);
+		return h === "value" ? (e.sum((e) => e.value ?? 0), e.sort((e, t) => (t.value ?? 0) - (e.value ?? 0))) : e.sort((e, t) => p.ascending(e.data.name, t.data.name)), p.tree().size([2 * Math.PI, H]).separation((e, t) => (e.parent === t.parent ? w : le) * 1.4 / Math.max(1, e.depth))(e);
 	}, [
-		I,
-		g,
-		L,
-		S,
-		C
-	]), ge = R.links(), z = R.descendants(), _e = r(() => m.linkRadial().angle((e) => e.x).radius((e) => e.y), []), B = t((e) => ({
+		z,
+		h,
+		H,
+		w,
+		le
+	]), he = U.links(), W = U.descendants(), G = a(U), K = a(null), [q, J] = o(null), [ge, _e] = o(0);
+	n(() => {
+		let e = G.current;
+		if (G.current = U, e === U) return;
+		if (K.current != null && (cancelAnimationFrame(K.current), K.current = null), B || O <= 0) {
+			V(!1), J(null);
+			return;
+		}
+		J(e), _e(1);
+		let t = performance.now(), n = (e) => {
+			let r = Math.min(1, (e - t) / O);
+			_e(1 - p.easeCubic(r)), r < 1 ? K.current = requestAnimationFrame(n) : (K.current = null, J(null));
+		};
+		return K.current = requestAnimationFrame(n), () => {
+			K.current != null && cancelAnimationFrame(K.current);
+		};
+	}, [
+		U,
+		O,
+		B
+	]);
+	let Y = i(() => p.linkRadial().angle((e) => e.x).radius((e) => e.y), []), ve = t((e) => ({
 		id: e.data.id,
 		name: e.data.name,
 		subname: e.data.subname ?? null,
@@ -126,61 +147,61 @@ function g({ data: o, size: c = 600, autoFit: d = !0, sortBy: g = "name", showLa
 		path: e.ancestors().map((e) => e.data.name).reverse(),
 		childrenCount: e.children?.length ?? 0,
 		data: e.data
-	}), []), V = i(null), [H, U] = a(`-${c / 2} -${c / 2} ${c} ${c}`), [W, G] = a(1);
-	n(() => {
-		let e = V.current;
+	}), []), ye = a(null), [X, be] = o(`-${l / 2} -${l / 2} ${l} ${l}`), [Z, xe] = o(1);
+	r(() => {
+		let e = ye.current;
 		if (!e) return;
 		let t = requestAnimationFrame(() => {
 			try {
 				let t = e.getBBox();
-				U(`${t.x - 20} ${t.y - 20} ${t.width + 40} ${t.height + 40}`);
+				be(`${t.x - 20} ${t.y - 20} ${t.width + 40} ${t.height + 40}`);
 			} catch {
-				U(`-${c / 2} -${c / 2} ${c} ${c}`);
+				be(`-${l / 2} -${l / 2} ${l} ${l}`);
 			}
 		});
 		return () => cancelAnimationFrame(t);
 	}, [
-		c,
-		R,
-		_,
-		d
+		l,
+		U,
+		g,
+		re
 	]);
-	let ve = r(() => {
-		if (W === 1) return H;
-		let [e, t, n, r] = H.split(" ").map(Number), i = n / W, a = r / W;
+	let Se = 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}`;
-	}, [H, W]), ye = t((e) => {
-		if (!w || k || !e.ctrlKey) return;
+	}, [X, Z]), Ce = t((e) => {
+		if (!T || j || !e.ctrlKey) return;
 		e.preventDefault();
 		let t = e.deltaY < 0 ? 1.15 : 1 / 1.15;
-		G((e) => Math.max(.25, Math.min(8, e * t)));
-	}, [w, k]);
-	n(() => {
-		if (!w && !T) return;
+		xe((e) => Math.max(.25, Math.min(8, e * t)));
+	}, [T, j]);
+	r(() => {
+		if (!T && !E) return;
 		let e = (e) => {
-			e.key === "Escape" && (w && G(1), T && (F([o]), E?.(null)));
+			e.key === "Escape" && (T && xe(1), E && (R([s]), D?.(null)));
 		};
 		return window.addEventListener("keydown", e), () => window.removeEventListener("keydown", e);
 	}, [
-		w,
 		T,
-		o,
-		E
+		E,
+		s,
+		D
 	]);
-	let K = i(null), be = (e) => {
-		K.current &&= (clearTimeout(K.current), null), K.current = setTimeout(() => {
-			e(), K.current = null;
+	let Q = a(null), we = (e) => {
+		Q.current &&= (clearTimeout(Q.current), null), Q.current = setTimeout(() => {
+			e(), Q.current = null;
 		}, 250);
-	}, xe = () => {
-		K.current &&= (clearTimeout(K.current), null);
-	}, [Se, q] = a(null), J = i(null), Y = i(null), [Ce, X] = a(!1), [we, Te] = a(null), [Z, Ee] = a({
+	}, Te = () => {
+		Q.current &&= (clearTimeout(Q.current), null);
+	}, [Ee, De] = o(null), Oe = a(null), ke = a(null), [Ae, je] = o(!1), [Me, Ne] = o(null), [Pe, Fe] = o({
 		left: 0,
 		top: 0
-	}), [Q, De] = a(null), Oe = t(() => {
-		F((e) => {
+	}), [$, Ie] = o(null), Le = t(() => {
+		R((e) => {
 			if (e.length <= 1) return e;
 			let t = e.slice(0, -1);
-			return E?.(t.length <= 1 ? null : {
+			return D?.(t.length <= 1 ? null : {
 				id: t[t.length - 1].id,
 				name: t[t.length - 1].name,
 				subname: t[t.length - 1].subname ?? null,
@@ -193,39 +214,39 @@ function g({ data: o, size: c = 600, autoFit: d = !0, sortBy: g = "name", showLa
 				data: t[t.length - 1]
 			}), t;
 		});
-	}, [E]), ke = (e) => {
-		k || !T || (e.ctrlKey || e.metaKey) && (xe(), Oe());
-	}, Ae = (e) => {
-		if (k) return;
-		let t = z[Number(e.currentTarget.getAttribute("data-idx"))];
+	}, [D]), Re = (e) => {
+		j || !E || (e.ctrlKey || e.metaKey) && (Te(), Le());
+	}, ze = (e) => {
+		if (j) return;
+		let t = W[Number(e.currentTarget.getAttribute("data-idx"))];
 		if (!t) return;
-		let n = B(t);
-		if ((e.ctrlKey || e.metaKey) && T && t.children) {
-			be(() => {
-				F((e) => [...e, t.data]), E?.(n);
+		let n = ve(t);
+		if ((e.ctrlKey || e.metaKey) && E && t.children) {
+			we(() => {
+				R((e) => [...e, t.data]), D?.(n);
 			});
 			return;
 		}
-		if (D) {
-			let t = J.current?.getBoundingClientRect();
-			Ee({
+		if (k) {
+			let t = Oe.current?.getBoundingClientRect();
+			Fe({
 				left: t ? e.clientX - t.left : e.clientX,
 				top: t ? e.clientY - t.top : e.clientY
-			}), Te(Y.current), De(n), X(!0);
+			}), Ne(ke.current), Ie(n), je(!0);
 		}
 		ue?.(n, e);
-	}, $ = le || A.palette.text.primary, je = ae || A.palette.text.secondary, Me = A.palette.background.paper, Ne = A.typography.fontFamily;
-	return /* @__PURE__ */ p(s, {
-		ref: J,
+	}, Be = ce || M.palette.text.primary, Ve = oe || M.palette.text.secondary, He = M.palette.background.paper, Ue = M.typography.fontFamily;
+	return /* @__PURE__ */ f(c, {
+		ref: Oe,
 		sx: {
 			display: "inline-flex",
 			position: "relative",
-			opacity: k ? .5 : 1,
-			cursor: k ? "not-allowed" : "default",
+			opacity: j ? .5 : 1,
+			cursor: j ? "not-allowed" : "default",
 			userSelect: "none"
 		},
 		children: [
-			T && P.length > 1 && /* @__PURE__ */ f(s, {
+			E && L.length > 1 && /* @__PURE__ */ d(c, {
 				sx: {
 					position: "absolute",
 					top: 4,
@@ -237,7 +258,7 @@ function g({ data: o, size: c = 600, autoFit: d = !0, sortBy: g = "name", showLa
 					pointerEvents: "none",
 					zIndex: 1
 				},
-				children: /* @__PURE__ */ f(l, {
+				children: /* @__PURE__ */ d(u, {
 					variant: "caption",
 					sx: {
 						bgcolor: "action.hover",
@@ -247,50 +268,50 @@ function g({ data: o, size: c = 600, autoFit: d = !0, sortBy: g = "name", showLa
 						color: "text.secondary",
 						fontSize: "0.7rem"
 					},
-					children: P.map((e) => e.name).join(" › ")
+					children: L.map((e) => e.name).join(" › ")
 				})
 			}),
-			/* @__PURE__ */ f(s, {
-				ref: Y,
+			/* @__PURE__ */ d(c, {
+				ref: ke,
 				sx: {
 					position: "absolute",
-					left: Z.left,
-					top: Z.top,
+					left: Pe.left,
+					top: Pe.top,
 					width: 0,
 					height: 0
 				}
 			}),
-			/* @__PURE__ */ f("svg", {
-				width: c,
-				height: c,
-				viewBox: ve,
-				onWheel: ye,
+			/* @__PURE__ */ d("svg", {
+				width: l,
+				height: l,
+				viewBox: Se,
+				onWheel: Ce,
 				style: {
-					fontFamily: Ne ?? "sans-serif",
-					overflow: w && W > 1 ? "hidden" : "visible"
+					fontFamily: Ue ?? "sans-serif",
+					overflow: T && Z > 1 ? "hidden" : "visible"
 				},
 				role: "img",
-				"aria-label": o.name,
-				children: /* @__PURE__ */ p("g", {
-					ref: V,
+				"aria-label": s.name,
+				children: /* @__PURE__ */ f("g", {
+					ref: ye,
 					children: [
-						/* @__PURE__ */ f("g", {
+						/* @__PURE__ */ d("g", {
 							fill: "none",
-							stroke: je,
-							strokeOpacity: oe,
-							strokeWidth: se,
-							children: ge.map((e, t) => /* @__PURE__ */ f("path", { d: _e(e) }, `link-${t}`))
+							stroke: Ve,
+							strokeOpacity: S,
+							strokeWidth: C,
+							children: he.map((e, t) => /* @__PURE__ */ d("path", { d: Y(e) }, `link-${t}`))
 						}),
-						/* @__PURE__ */ f("g", { children: z.map((e, t) => {
-							let n = N(e), r = pe(e), i = B(e), a = Se === t, o = e.children ? h.folder : h.person, c = Math.round(n * 1.3);
-							return /* @__PURE__ */ f(te, {
-								title: /* @__PURE__ */ p(s, {
+						/* @__PURE__ */ d("g", { children: W.map((e, t) => {
+							let n = F(e), r = I(e), i = ve(e), a = Ee === t, o = e.children ? m.folder : m.person, s = Math.round(n * 1.3);
+							return /* @__PURE__ */ d(te, {
+								title: /* @__PURE__ */ f(c, {
 									sx: {
 										py: .5,
 										minWidth: 160
 									},
 									children: [
-										/* @__PURE__ */ f(l, {
+										/* @__PURE__ */ d(u, {
 											variant: "caption",
 											sx: {
 												fontWeight: "bold",
@@ -299,7 +320,7 @@ function g({ data: o, size: c = 600, autoFit: d = !0, sortBy: g = "name", showLa
 											},
 											children: e.data.name
 										}),
-										e.data.subname && /* @__PURE__ */ f(l, {
+										e.data.subname && /* @__PURE__ */ d(u, {
 											variant: "caption",
 											sx: {
 												display: "block",
@@ -307,54 +328,54 @@ function g({ data: o, size: c = 600, autoFit: d = !0, sortBy: g = "name", showLa
 											},
 											children: e.data.subname
 										}),
-										(i.specialValueA != null || i.specialValueB != null || e.children) && /* @__PURE__ */ p(s, {
+										(i.specialValueA != null || i.specialValueB != null || e.children) && /* @__PURE__ */ f(c, {
 											sx: {
 												mt: .75,
 												borderTop: "1px solid rgba(255,255,255,0.2)",
 												pt: .75
 											},
 											children: [
-												i.specialValueA != null && /* @__PURE__ */ p(s, {
+												i.specialValueA != null && /* @__PURE__ */ f(c, {
 													sx: {
 														display: "flex",
 														justifyContent: "space-between",
 														gap: 2
 													},
-													children: [/* @__PURE__ */ f(l, {
+													children: [/* @__PURE__ */ d(u, {
 														variant: "caption",
 														sx: { opacity: .6 },
-														children: j.specialValueA ?? "A"
-													}), /* @__PURE__ */ f(l, {
+														children: N.specialValueA ?? "A"
+													}), /* @__PURE__ */ d(u, {
 														variant: "caption",
 														children: String(i.specialValueA)
 													})]
 												}),
-												i.specialValueB != null && /* @__PURE__ */ p(s, {
+												i.specialValueB != null && /* @__PURE__ */ f(c, {
 													sx: {
 														display: "flex",
 														justifyContent: "space-between",
 														gap: 2
 													},
-													children: [/* @__PURE__ */ f(l, {
+													children: [/* @__PURE__ */ d(u, {
 														variant: "caption",
 														sx: { opacity: .6 },
-														children: j.specialValueB ?? "B"
-													}), /* @__PURE__ */ f(l, {
+														children: N.specialValueB ?? "B"
+													}), /* @__PURE__ */ d(u, {
 														variant: "caption",
 														children: String(i.specialValueB)
 													})]
 												}),
-												e.children && /* @__PURE__ */ p(s, {
+												e.children && /* @__PURE__ */ f(c, {
 													sx: {
 														display: "flex",
 														justifyContent: "space-between",
 														gap: 2
 													},
-													children: [/* @__PURE__ */ f(l, {
+													children: [/* @__PURE__ */ d(u, {
 														variant: "caption",
 														sx: { opacity: .6 },
 														children: "Reports"
-													}), /* @__PURE__ */ f(l, {
+													}), /* @__PURE__ */ d(u, {
 														variant: "caption",
 														children: e.children.length
 													})]
@@ -366,52 +387,81 @@ function g({ data: o, size: c = 600, autoFit: d = !0, sortBy: g = "name", showLa
 								followCursor: !0,
 								enterDelay: 50,
 								enterNextDelay: 0,
-								disableHoverListener: k,
+								disableHoverListener: j,
 								slotProps: { tooltip: { sx: { maxWidth: 260 } } },
-								children: /* @__PURE__ */ p("g", {
+								children: /* @__PURE__ */ f("g", {
 									"data-idx": t,
 									transform: `rotate(${e.x * 180 / Math.PI - 90}) translate(${e.y},0)`,
-									onClick: Ae,
-									onDoubleClick: ke,
-									onMouseEnter: () => !k && q(t),
-									onMouseLeave: () => q(null),
-									style: { cursor: k ? "not-allowed" : "pointer" },
+									onClick: ze,
+									onDoubleClick: Re,
+									onMouseEnter: () => !j && De(t),
+									onMouseLeave: () => De(null),
+									style: { cursor: j ? "not-allowed" : "pointer" },
 									children: [
-										/* @__PURE__ */ f("circle", {
+										/* @__PURE__ */ d("circle", {
 											r: Math.max(n + 8, 24),
 											fill: "transparent"
 										}),
-										/* @__PURE__ */ f("circle", {
+										/* @__PURE__ */ d("circle", {
 											r: n + 2,
 											fill: r,
 											fillOpacity: .15
 										}),
-										/* @__PURE__ */ f("circle", {
+										/* @__PURE__ */ d("circle", {
 											r: n,
 											fill: r,
 											fillOpacity: a ? .85 : 1,
 											style: { transition: "fill-opacity 0.15s" }
 										}),
-										ie && /* @__PURE__ */ f(ne, {
+										_ && /* @__PURE__ */ d(ie, {
 											path: o,
-											size: c
+											size: s
 										})
 									]
 								})
 							}, `node-${e.data.id}-${t}`);
 						}) }),
-						_ && /* @__PURE__ */ f("g", { children: z.map((e, t) => {
-							let n = N(e), r = e.x < Math.PI == !e.children, i = n + 6, a = r ? i : -i, o = r ? "start" : "end";
-							return /* @__PURE__ */ f("text", {
+						q && ((e, t) => /* @__PURE__ */ f("g", {
+							"data-testid": "drill-ghost-layer",
+							opacity: t,
+							pointerEvents: "none",
+							children: [/* @__PURE__ */ d("g", {
+								fill: "none",
+								stroke: Ve,
+								strokeOpacity: S,
+								strokeWidth: C,
+								children: e.links().map((e, t) => /* @__PURE__ */ d("path", { d: Y(e) }, `ghost-link-${t}`))
+							}), /* @__PURE__ */ d("g", { children: e.descendants().map((e, t) => /* @__PURE__ */ f("g", {
+								transform: `rotate(${e.x * 180 / Math.PI - 90}) translate(${e.y},0)`,
+								children: [
+									/* @__PURE__ */ d("circle", {
+										r: F(e) + 2,
+										fill: I(e),
+										fillOpacity: .15
+									}),
+									/* @__PURE__ */ d("circle", {
+										r: F(e),
+										fill: I(e)
+									}),
+									_ && /* @__PURE__ */ d(ie, {
+										path: e.children ? m.folder : m.person,
+										size: Math.round(F(e) * 1.3)
+									})
+								]
+							}, `ghost-node-${t}`)) })]
+						}))(q, ge),
+						g && /* @__PURE__ */ d("g", { children: W.map((e, t) => {
+							let n = F(e), r = e.x < Math.PI == !e.children, i = n + 6, a = r ? i : -i, o = r ? "start" : "end";
+							return /* @__PURE__ */ d("text", {
 								transform: `rotate(${e.x * 180 / Math.PI - 90}) translate(${e.y},0) rotate(${e.x >= Math.PI ? 180 : 0})`,
 								dy: "0.35em",
 								x: a,
 								textAnchor: o,
 								paintOrder: "stroke",
-								stroke: Me,
+								stroke: He,
 								strokeWidth: 3,
-								fill: $,
-								fontSize: ce,
+								fill: Be,
+								fontSize: se,
 								fontWeight: e.depth === 0 ? "bold" : "normal",
 								pointerEvents: "none",
 								children: e.data.name
@@ -420,10 +470,10 @@ function g({ data: o, size: c = 600, autoFit: d = !0, sortBy: g = "name", showLa
 					]
 				})
 			}),
-			D && /* @__PURE__ */ f(ee, {
-				open: Ce,
-				anchorEl: we,
-				onClose: () => X(!1),
+			k && /* @__PURE__ */ d(ee, {
+				open: Ae,
+				anchorEl: Me,
+				onClose: () => je(!1),
 				anchorOrigin: {
 					vertical: "top",
 					horizontal: "right"
@@ -433,15 +483,15 @@ function g({ data: o, size: c = 600, autoFit: d = !0, sortBy: g = "name", showLa
 					horizontal: "left"
 				},
 				slotProps: { paper: { elevation: 4 } },
-				children: Q && (O ? O(Q) : /* @__PURE__ */ f(re, {
-					info: Q,
-					labelA: j.specialValueA ?? "Value A",
-					labelB: j.specialValueB ?? "Value B"
+				children: $ && (A ? A($) : /* @__PURE__ */ d(ae, {
+					info: $,
+					labelA: N.specialValueA ?? "Value A",
+					labelB: N.specialValueB ?? "Value B"
 				}))
 			})
 		]
 	});
 }
-g.displayName = "RadialTreeChart";
+h.displayName = "RadialTreeChart";
 //#endregion
-export { g as RadialTreeChart };
+export { h as RadialTreeChart };