@thebuoyant-tsdev/mui-ts-library 3.26.1 → 3.27.1

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

@@ -8,7 +8,7 @@ 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 re({ path: e, size: t }) {
+function g({ path: e, size: t }) {
 	let n = t / 2;
 	return /* @__PURE__ */ f("g", {
 		transform: `translate(${-n},${-n})`,
@@ -25,7 +25,7 @@ function re({ path: e, size: t }) {
 		})
 	});
 }
-function ie({ info: e, labelA: t, labelB: n }) {
+function re({ info: e, labelA: t, labelB: n }) {
 	return /* @__PURE__ */ p(c, {
 		sx: {
 			p: 2,
@@ -89,90 +89,90 @@ function ie({ info: e, labelA: t, labelB: n }) {
 		] })]
 	});
 }
-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 }) {
+function _({ data: s, orientation: l = "LR", width: d = 800, height: _ = 500, levelSpacing: v = 200, nodeRadius: y = 10, sortBy: ie = "name", showLabels: ae = !0, labelFontSize: oe = 12, labelColor: se, showIcons: b = !0, chartColors: x, linkStrokeOpacity: S = 1, linkStrokeWidth: C = 1.5, linkColor: ce, zoomable: w = !1, drillable: T = !1, onFocusChange: E, showNodePopover: le = !1, renderNodePopoverContent: ue, onNodeClick: de, onNodeHover: fe, duration: D = 750, disabled: O = !1, translation: pe }) {
 	let k = ne(), A = {
 		...e,
-		...fe
-	}, pe = [
+		...pe
+	}, me = [
 		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 = 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)));
+	], j = x && x.length > 0 ? x : me, M = se || k.palette.text.primary, N = ce || k.palette.text.secondary, he = k.palette.background.paper, ge = k.typography.fontFamily, _e = !s.children?.length && !s.value, P = l === "TB" || l === "BT", F = P ? _ : d, I = P ? d : _, [L, R] = o([s]), z = L[L.length - 1], [ve, ye] = o(s), [B, V] = o(!1);
+	ve !== s && (ye(s), R([s]), V(!0));
+	let H = i(() => {
+		let e = m.hierarchy(z);
+		ie === "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);
+		return m.tree().size([F * .8, Math.min(t * v, I * .85)])(e);
 	}, [
-		L,
-		y,
-		N,
-		P,
-		_
-	]), V = i(() => {
-		let e = m.max(m.hierarchy(L).descendants(), (e) => e.depth) ?? 1;
-		return Math.min(e * _, P * .85);
+		z,
+		ie,
+		F,
+		I,
+		v
+	]), U = i(() => {
+		let e = m.max(m.hierarchy(z).descendants(), (e) => e.depth) ?? 1;
+		return Math.min(e * v, I * .85);
 	}, [
-		L,
-		_,
-		P
-	]), xe = B.descendants(), Se = B.links(), H = a(B), U = a(null), [W, G] = o(null), [Ce, K] = o(0);
+		z,
+		v,
+		I
+	]), be = H.descendants(), xe = H.links(), Se = a(H), W = a(null), [Ce, G] = o(null), [we, Te] = 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);
+		let e = Se.current;
+		if (Se.current = H, e === H) return;
+		if (W.current != null && (cancelAnimationFrame(W.current), W.current = null), B || D <= 0) {
+			V(!1), G(null);
 			return;
 		}
-		G(e), K(1);
+		G(e), Te(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));
+			Te(1 - m.easeCubic(r)), r < 1 ? W.current = requestAnimationFrame(n) : (W.current = null, G(null));
 		};
-		return U.current = requestAnimationFrame(n), () => {
-			U.current != null && cancelAnimationFrame(U.current);
+		return W.current = requestAnimationFrame(n), () => {
+			W.current != null && cancelAnimationFrame(W.current);
 		};
 	}, [
-		B,
+		H,
 		D,
-		R
+		B
 	]);
-	let q = t((e) => e.data.colorConfig?.fill ?? j[e.depth % j.length], [j]), J = t((e) => {
+	let K = t((e) => e.data.colorConfig?.fill ?? j[e.depth % j.length], [j]), q = t((e) => {
 		switch (l) {
 			case "LR": return {
 				x: e.y,
-				y: e.x - N * .4
+				y: e.x - F * .4
 			};
 			case "RL": return {
-				x: V - e.y,
-				y: e.x - N * .4
+				x: U - 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: V - e.y
+				x: e.x - F * .4,
+				y: U - e.y
 			};
 		}
 	}, [
 		l,
-		N,
-		V
-	]), we = t((e) => {
-		let t = J(e.source), n = J(e.target);
+		F,
+		U
+	]), Ee = t((e) => {
+		let t = q(e.source), n = q(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}`;
-	}, [J, l]), Te = t((e) => ({
+	}, [q, l]), J = t((e) => ({
 		id: e.data.id ?? null,
 		name: e.data.name,
 		subname: e.data.subname ?? null,
@@ -183,35 +183,35 @@ function g({ data: s, orientation: l = "LR", width: d = 800, height: g = 500, le
 		path: e.ancestors().map((e) => e.data.name).reverse(),
 		childrenCount: e.children?.length ?? 0,
 		data: e.data
-	}), []), [Y, Ee] = o(`0 -${g / 2} ${d} ${g}`), [X, De] = o(1), Oe = a(null), ke = i(() => {
+	}), []), [Y, De] = o(`0 -${_ / 2} ${d} ${_}`), [X, Oe] = o(1), ke = a(null), Ae = 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}`;
 	}, [Y, X]);
 	r(() => {
-		let e = Oe.current;
+		let e = ke.current;
 		if (!e) return;
 		let t = requestAnimationFrame(() => {
 			try {
 				let t = e.getBBox();
-				Ee(`${t.x - 24} ${t.y - 24} ${t.width + 48} ${t.height + 48}`);
+				De(`${t.x - 24} ${t.y - 24} ${t.width + 48} ${t.height + 48}`);
 			} catch {
-				Ee(`0 -${g / 2} ${d} ${g}`);
+				De(`0 -${_ / 2} ${d} ${_}`);
 			}
 		});
 		return () => cancelAnimationFrame(t);
 	}, [
-		B,
+		H,
 		d,
-		g,
+		_,
 		l
 	]);
-	let Ae = t((e) => {
-		if (!S || O || !e.ctrlKey) return;
+	let je = t((e) => {
+		if (!w || O || !e.ctrlKey) return;
 		e.preventDefault();
 		let t = e.deltaY < 0 ? 1.15 : 1 / 1.15;
-		De((e) => Math.max(.25, Math.min(8, e * t)));
-	}, [S, O]), Z = a(null), je = (e) => {
+		Oe((e) => Math.max(.25, Math.min(8, e * t)));
+	}, [w, O]), Z = a(null), Me = (e) => {
 		Z.current &&= (clearTimeout(Z.current), null), Z.current = setTimeout(() => {
 			e(), Z.current = null;
 		}, 250);
@@ -219,11 +219,11 @@ function g({ data: s, orientation: l = "LR", width: d = 800, height: g = 500, le
 		Z.current &&= (clearTimeout(Z.current), null);
 	};
 	n(() => () => Q(), []);
-	let Me = t(() => {
-		I((e) => {
+	let Ne = t(() => {
+		R((e) => {
 			if (e.length <= 1) return e;
 			let t = e.slice(0, -1);
-			return w?.({
+			return E?.({
 				focusedNode: {
 					id: t[t.length - 1].id ?? null,
 					name: t[t.length - 1].name,
@@ -239,11 +239,11 @@ function g({ data: s, orientation: l = "LR", width: d = 800, height: g = 500, le
 				isRoot: t.length <= 1
 			}), t;
 		});
-	}, [w]);
+	}, [E]);
 	r(() => {
-		if (!S && !C) return;
+		if (!w && !T) return;
 		let e = (e) => {
-			e.key === "Escape" && (S && De(1), C && (Q(), I([s]), w?.({
+			e.key === "Escape" && (w && Oe(1), T && (Q(), R([s]), E?.({
 				focusedNode: {
 					id: s.id ?? null,
 					name: s.name,
@@ -261,49 +261,49 @@ function g({ data: s, orientation: l = "LR", width: d = 800, height: g = 500, le
 		};
 		return window.addEventListener("keydown", e), () => window.removeEventListener("keydown", e);
 	}, [
-		S,
-		C,
+		w,
+		T,
 		s,
-		w
+		E
 	]);
-	let Ne = a(null), Pe = a(null), [Fe, Ie] = o(!1), [Le, Re] = o(null), [ze, Be] = o({
+	let Pe = a(null), Fe = a(null), [Ie, Le] = o(!1), [Re, ze] = o(null), [Be, Ve] = o({
 		left: 0,
 		top: 0
-	}), [$, Ve] = o(null), He = (e, t) => {
+	}), [$, He] = o(null), Ue = (e, t) => {
 		if (O) return;
-		let n = Te(e);
-		if ((t.ctrlKey || t.metaKey) && C && e.children) {
-			je(() => {
-				I((t) => [...t, e.data]), w?.({
+		let n = J(e);
+		if ((t.ctrlKey || t.metaKey) && T && e.children) {
+			Me(() => {
+				R((t) => [...t, e.data]), E?.({
 					focusedNode: n,
 					isRoot: !1
 				});
 			});
 			return;
 		}
-		if ((t.ctrlKey || t.metaKey) && C) {
-			Q(), Me();
+		if ((t.ctrlKey || t.metaKey) && T) {
+			Q(), Ne();
 			return;
 		}
-		if (T) {
-			let e = Ne.current?.getBoundingClientRect();
-			Be({
+		if (le) {
+			let e = Pe.current?.getBoundingClientRect();
+			Ve({
 				left: e ? t.clientX - e.left : t.clientX,
 				top: e ? t.clientY - e.top : t.clientY
-			}), Re(Pe.current), Ve(n), Ie(!0);
+			}), ze(Fe.current), He(n), Le(!0);
 		}
 		de?.(n, t);
-	}, Ue = (e, t) => {
-		O || !C || (t.ctrlKey || t.metaKey) && (Q(), Me());
-	}, We = {
+	}, We = (e, t) => {
+		O || !T || (t.ctrlKey || t.metaKey) && (Q(), Ne());
+	}, Ge = {
 		followCursor: !0,
 		enterDelay: 50,
 		enterNextDelay: 0,
 		disableHoverListener: O,
 		slotProps: { tooltip: { sx: { maxWidth: 240 } } }
-	}, Ge = Math.round(v * 1.3);
+	}, Ke = Math.round(y * 1.3);
 	return /* @__PURE__ */ p(c, {
-		ref: Ne,
+		ref: Pe,
 		sx: {
 			display: "inline-flex",
 			position: "relative",
@@ -313,16 +313,16 @@ function g({ data: s, orientation: l = "LR", width: d = 800, height: g = 500, le
 		},
 		children: [
 			/* @__PURE__ */ f(c, {
-				ref: Pe,
+				ref: Fe,
 				sx: {
 					position: "absolute",
-					left: ze.left,
-					top: ze.top,
+					left: Be.left,
+					top: Be.top,
 					width: 0,
 					height: 0
 				}
 			}),
-			C && F.length > 1 && /* @__PURE__ */ f(c, {
+			T && L.length > 1 && /* @__PURE__ */ f(c, {
 				sx: {
 					position: "absolute",
 					top: 4,
@@ -343,22 +343,22 @@ function g({ data: s, orientation: l = "LR", width: d = 800, height: g = 500, le
 						color: "text.secondary",
 						fontSize: "0.7rem"
 					},
-					children: F.map((e) => e.name).join(" › ")
+					children: L.map((e) => e.name).join(" › ")
 				})
 			}),
 			/* @__PURE__ */ f("svg", {
 				width: d,
-				height: g,
-				viewBox: ke,
-				onWheel: Ae,
+				height: _,
+				viewBox: Ae,
+				onWheel: je,
 				style: {
 					fontFamily: ge ?? "sans-serif",
-					overflow: S && X > 1 ? "hidden" : "visible"
+					overflow: w && X > 1 ? "hidden" : "visible"
 				},
 				role: "img",
 				"aria-label": s.name,
 				children: /* @__PURE__ */ p("g", {
-					ref: Oe,
+					ref: ke,
 					children: [
 						_e && /* @__PURE__ */ f("text", {
 							textAnchor: "middle",
@@ -369,13 +369,13 @@ function g({ data: s, orientation: l = "LR", width: d = 800, height: g = 500, le
 						}),
 						/* @__PURE__ */ f("g", {
 							fill: "none",
-							stroke: me,
-							strokeOpacity: le,
-							strokeWidth: x,
-							children: Se.map((e, t) => /* @__PURE__ */ f("path", { d: we(e) }, `link-${t}`))
+							stroke: N,
+							strokeOpacity: S,
+							strokeWidth: C,
+							children: xe.map((e, t) => /* @__PURE__ */ f("path", { d: Ee(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, {
+						be.map((e, t) => {
+							let n = q(e), r = K(e), i = J(e), a = e.children ? h.folder : h.person, o = l === "LR", s = l === "RL", ee = o ? y + 6 : s ? -(y + 6) : 0, ne = !o && !s ? l === "TB" ? y + 16 : -(y + 6) : 0, d = o ? "start" : s ? "end" : "middle", m = /* @__PURE__ */ p(c, {
 								sx: {
 									py: .5,
 									minWidth: 140
@@ -455,30 +455,36 @@ function g({ data: s, orientation: l = "LR", width: d = 800, height: g = 500, le
 								]
 							});
 							return /* @__PURE__ */ f(te, {
-								...We,
+								...Ge,
 								title: m,
 								children: /* @__PURE__ */ p("g", {
 									transform: `translate(${n.x},${n.y})`,
-									onClick: (t) => He(e, t),
-									onDoubleClick: (t) => Ue(e, t),
+									onClick: (t) => Ue(e, t),
+									onDoubleClick: (t) => We(e, t),
+									onMouseEnter: (t) => {
+										O || fe?.(J(e), t);
+									},
+									onMouseLeave: (e) => {
+										fe?.(null, e);
+									},
 									style: { cursor: O ? "not-allowed" : "pointer" },
 									children: [
 										/* @__PURE__ */ f("circle", {
-											r: v + 8,
+											r: y + 8,
 											fill: "transparent"
 										}),
 										/* @__PURE__ */ f("circle", {
-											r: v + 2,
+											r: y + 2,
 											fill: r,
 											fillOpacity: .15
 										}),
 										/* @__PURE__ */ f("circle", {
-											r: v,
+											r: y,
 											fill: r
 										}),
-										ce && /* @__PURE__ */ f(re, {
+										b && /* @__PURE__ */ f(g, {
 											path: a,
-											size: Ge
+											size: Ke
 										}),
 										ae && /* @__PURE__ */ f("text", {
 											x: ee,
@@ -498,45 +504,45 @@ function g({ data: s, orientation: l = "LR", width: d = 800, height: g = 500, le
 								})
 							}, `node-${t}`);
 						}),
-						W && ((e, t) => /* @__PURE__ */ p("g", {
+						Ce && ((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}`))
+								stroke: N,
+								strokeOpacity: S,
+								strokeWidth: C,
+								children: e.links().map((e, t) => /* @__PURE__ */ f("path", { d: Ee(e) }, `ghost-link-${t}`))
 							}), /* @__PURE__ */ f("g", { children: e.descendants().map((e, t) => {
-								let n = J(e);
+								let n = q(e);
 								return /* @__PURE__ */ p("g", {
 									transform: `translate(${n.x},${n.y})`,
 									children: [
 										/* @__PURE__ */ f("circle", {
-											r: v + 2,
-											fill: q(e),
+											r: y + 2,
+											fill: K(e),
 											fillOpacity: .15
 										}),
 										/* @__PURE__ */ f("circle", {
-											r: v,
-											fill: q(e)
+											r: y,
+											fill: K(e)
 										}),
-										ce && /* @__PURE__ */ f(re, {
+										b && /* @__PURE__ */ f(g, {
 											path: e.children ? h.folder : h.person,
-											size: Ge
+											size: Ke
 										})
 									]
 								}, `ghost-node-${t}`);
 							}) })]
-						}))(W, Ce)
+						}))(Ce, we)
 					]
 				})
 			}),
-			T && /* @__PURE__ */ f(ee, {
-				open: Fe,
-				anchorEl: Le,
-				onClose: () => Ie(!1),
+			le && /* @__PURE__ */ f(ee, {
+				open: Ie,
+				anchorEl: Re,
+				onClose: () => Le(!1),
 				anchorOrigin: {
 					vertical: "top",
 					horizontal: "right"
@@ -546,7 +552,7 @@ function g({ data: s, orientation: l = "LR", width: d = 800, height: g = 500, le
 					horizontal: "left"
 				},
 				slotProps: { paper: { elevation: 4 } },
-				children: $ && (E ? E($) : /* @__PURE__ */ f(ie, {
+				children: $ && (ue ? ue($) : /* @__PURE__ */ f(re, {
 					info: $,
 					labelA: A.specialValueA ?? "Value A",
 					labelB: A.specialValueB ?? "Value B"
@@ -555,6 +561,6 @@ function g({ data: s, orientation: l = "LR", width: d = 800, height: g = 500, le
 		]
 	});
 }
-g.displayName = "HorizontalTreeChart";
+_.displayName = "HorizontalTreeChart";
 //#endregion
-export { g as HorizontalTreeChart };
+export { _ as HorizontalTreeChart };

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;
+    /** Fired on mouse enter/leave a node — `null` on leave. Use for linked-view highlighting. */
+    onNodeHover?: (info: HorizontalTreeNodeInfo | null, event: React.MouseEvent<SVGGElement> | null) => void;
     /** Drill-down/out crossfade duration in ms — set to 0 to disable (default: 750) */
     duration?: number;
     /** Disables all interactions (default: false) */

package/dist/components/radial-stacked-bar-chart/RadialStackedBarChart.d.ts

@@ -1,5 +1,5 @@
 import { type RadialStackedBarChartProps } from "./RadialStackedBarChart.types";
-export declare function RadialStackedBarChart({ data, keys, size, innerRadius, barPadding, chartColors, colorConfig, showLabels, showGridLines, gridLineCount, showGridValues, showLegend, sortBy, valueDecimalCount, valueDecimalSeparator, valueThousandsSeparator, valueFormatter, gridValueFormatter, zoomable, onBarClick, disabled, translation, }: RadialStackedBarChartProps): import("react/jsx-runtime").JSX.Element;
+export declare function RadialStackedBarChart({ data, keys, size, innerRadius, barPadding, chartColors, colorConfig, showLabels, showGridLines, gridLineCount, showGridValues, showLegend, sortBy, valueDecimalCount, valueDecimalSeparator, valueThousandsSeparator, valueFormatter, gridValueFormatter, zoomable, onBarClick, onBarHover, disabled, translation, }: RadialStackedBarChartProps): import("react/jsx-runtime").JSX.Element;
 export declare namespace RadialStackedBarChart {
     var displayName: string;
 }