@thebuoyant-tsdev/mui-ts-library 3.26.0 → 3.27.0

package/dist/components/radial-tree-chart/RadialTreeChart.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,54 +89,54 @@ function ie({ info: e, labelA: t, labelB: n }) {
 		] })]
 	});
 }
-function g({ data: s, size: l = 600, autoFit: d = !0, sortBy: g = "name", showLabels: _ = !0, showIcons: v = !0, chartColors: y, rootNodeRadius: b = 22, branchNodeRadius: x = 16, leafNodeRadius: S = 11, linkColor: ae, linkStrokeOpacity: C = 1, linkStrokeWidth: w = 1.5, labelFontSize: oe = 12, labelColor: se, separationSibling: T = 1, separationCousin: ce = 2, zoomable: E = !1, drillable: D = !1, onFocusChange: O, duration: k = 750, showNodePopover: le = !1, renderNodePopoverContent: ue, onNodeClick: de, disabled: A = !1, translation: fe }) {
-	let j = ne(), M = {
+function _({ data: s, size: l = 600, autoFit: d = !0, sortBy: _ = "name", showLabels: v = !0, showIcons: y = !0, chartColors: b, rootNodeRadius: x = 22, branchNodeRadius: S = 16, leafNodeRadius: C = 11, linkColor: ie, linkStrokeOpacity: ae = 1, linkStrokeWidth: w = 1.5, labelFontSize: oe = 12, labelColor: se, separationSibling: ce = 1, separationCousin: T = 2, zoomable: E = !1, drillable: D = !1, onFocusChange: O, duration: k = 750, showNodePopover: le = !1, renderNodePopoverContent: ue, onNodeClick: de, onNodeHover: A, disabled: j = !1, translation: fe }) {
+	let M = ne(), N = {
 		...e,
 		...fe
 	}, pe = [
-		j.palette.primary.main,
-		j.palette.secondary.main,
-		j.palette.info.main,
-		j.palette.success.main,
-		j.palette.warning.main,
-		j.palette.error.main
-	], N = y && y.length > 0 ? y : pe, P = t((e) => e.depth === 0 ? b : e.children ? x : S, [
-		b,
+		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 = b && b.length > 0 ? b : pe, F = t((e) => e.depth === 0 ? x : e.children ? S : C, [
 		x,
-		S
-	]), F = t((e) => e.data.colorConfig?.fill ?? N[e.depth % N.length], [N]), [I, L] = o([s]), R = I[I.length - 1], [me, he] = o(s), [z, B] = o(!1);
-	me !== s && (he(s), L([s]), B(!0));
-	let ge = !s.children?.length && !s.value, V = Math.max(1, l / 2 - 70), H = i(() => {
-		let e = m.hierarchy(R);
-		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, V]).separation((e, t) => (e.parent === t.parent ? T : ce) * 1.4 / Math.max(1, e.depth))(e);
+		S,
+		C
+	]), I = t((e) => e.data.colorConfig?.fill ?? P[e.depth % P.length], [P]), [L, R] = o([s]), z = L[L.length - 1], [me, he] = o(s), [B, V] = o(!1);
+	me !== s && (he(s), R([s]), V(!0));
+	let ge = !s.children?.length && !s.value, H = Math.max(1, l / 2 - 70), U = i(() => {
+		let e = m.hierarchy(z);
+		return _ === "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, H]).separation((e, t) => (e.parent === t.parent ? ce : T) * 1.4 / Math.max(1, e.depth))(e);
 	}, [
-		R,
-		g,
-		V,
-		T,
-		ce
-	]), _e = H.links(), U = H.descendants(), W = a(H), G = a(null), [K, q] = o(null), [ve, ye] = o(0);
+		z,
+		_,
+		H,
+		ce,
+		T
+	]), _e = U.links(), W = U.descendants(), G = a(U), K = a(null), [ve, q] = o(null), [ye, be] = o(0);
 	n(() => {
-		let e = W.current;
-		if (W.current = H, e === H) return;
-		if (G.current != null && (cancelAnimationFrame(G.current), G.current = null), z || k <= 0) {
-			B(!1), q(null);
+		let e = G.current;
+		if (G.current = U, e === U) return;
+		if (K.current != null && (cancelAnimationFrame(K.current), K.current = null), B || k <= 0) {
+			V(!1), q(null);
 			return;
 		}
-		q(e), ye(1);
+		q(e), be(1);
 		let t = performance.now(), n = (e) => {
 			let r = Math.min(1, (e - t) / k);
-			ye(1 - m.easeCubic(r)), r < 1 ? G.current = requestAnimationFrame(n) : (G.current = null, q(null));
+			be(1 - m.easeCubic(r)), r < 1 ? K.current = requestAnimationFrame(n) : (K.current = null, q(null));
 		};
-		return G.current = requestAnimationFrame(n), () => {
-			G.current != null && cancelAnimationFrame(G.current);
+		return K.current = requestAnimationFrame(n), () => {
+			K.current != null && cancelAnimationFrame(K.current);
 		};
 	}, [
-		H,
+		U,
 		k,
-		z
+		B
 	]);
-	let be = i(() => m.linkRadial().angle((e) => e.x).radius((e) => e.y), []), xe = t((e) => ({
+	let xe = i(() => m.linkRadial().angle((e) => e.x).radius((e) => e.y), []), Se = t((e) => ({
 		id: e.data.id,
 		name: e.data.name,
 		subname: e.data.subname ?? null,
@@ -147,13 +147,13 @@ function g({ data: s, size: l = 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
-	}), []), Se = a(null), [J, Y] = o(`-${l / 2} -${l / 2} ${l} ${l}`), [X, Ce] = o(1);
+	}), []), Ce = a(null), [J, Y] = o(`-${l / 2} -${l / 2} ${l} ${l}`), [X, we] = o(1);
 	r(() => {
 		if (!d) {
 			Y(`-${l / 2} -${l / 2} ${l} ${l}`);
 			return;
 		}
-		let e = Se.current;
+		let e = Ce.current;
 		if (!e) return;
 		let t = requestAnimationFrame(() => {
 			try {
@@ -166,20 +166,20 @@ function g({ data: s, size: l = 600, autoFit: d = !0, sortBy: g = "name", showLa
 		return () => cancelAnimationFrame(t);
 	}, [
 		l,
-		H,
-		_,
+		U,
+		v,
 		d
 	]);
-	let we = i(() => {
+	let Te = i(() => {
 		if (X === 1) return J;
 		let [e, t, n, r] = J.split(" ").map(Number), i = n / X, a = r / X;
 		return `${e + (n - i) / 2} ${t + (r - a) / 2} ${i} ${a}`;
-	}, [J, X]), Te = t((e) => {
-		if (!E || A || !e.ctrlKey) return;
+	}, [J, X]), Ee = t((e) => {
+		if (!E || j || !e.ctrlKey) return;
 		e.preventDefault();
 		let t = e.deltaY < 0 ? 1.15 : 1 / 1.15;
-		Ce((e) => Math.max(.25, Math.min(8, e * t)));
-	}, [E, A]), Z = a(null), Ee = (e) => {
+		we((e) => Math.max(.25, Math.min(8, e * t)));
+	}, [E, j]), Z = a(null), De = (e) => {
 		Z.current &&= (clearTimeout(Z.current), null), Z.current = setTimeout(() => {
 			e(), Z.current = null;
 		}, 250);
@@ -189,7 +189,7 @@ function g({ data: s, size: l = 600, autoFit: d = !0, sortBy: g = "name", showLa
 	n(() => () => Q(), []), r(() => {
 		if (!E && !D) return;
 		let e = (e) => {
-			e.key === "Escape" && (E && Ce(1), D && (Q(), L([s]), O?.(null)));
+			e.key === "Escape" && (E && we(1), D && (Q(), R([s]), O?.(null)));
 		};
 		return window.addEventListener("keydown", e), () => window.removeEventListener("keydown", e);
 	}, [
@@ -198,11 +198,11 @@ function g({ data: s, size: l = 600, autoFit: d = !0, sortBy: g = "name", showLa
 		s,
 		O
 	]);
-	let [De, Oe] = o(null), ke = a(null), Ae = a(null), [je, Me] = o(!1), [Ne, Pe] = o(null), [Fe, Ie] = o({
+	let [Oe, ke] = o(null), Ae = a(null), je = a(null), [Me, Ne] = o(!1), [Pe, Fe] = o(null), [Ie, Le] = o({
 		left: 0,
 		top: 0
-	}), [$, Le] = o(null), Re = t(() => {
-		L((e) => {
+	}), [$, Re] = o(null), ze = t(() => {
+		R((e) => {
 			if (e.length <= 1) return e;
 			let t = e.slice(0, -1);
 			return O?.(t.length <= 1 ? null : {
@@ -218,39 +218,39 @@ function g({ data: s, size: l = 600, autoFit: d = !0, sortBy: g = "name", showLa
 				data: t[t.length - 1]
 			}), t;
 		});
-	}, [O]), ze = (e) => {
-		A || !D || (e.ctrlKey || e.metaKey) && (Q(), Re());
-	}, Be = (e) => {
-		if (A) return;
-		let t = U[Number(e.currentTarget.getAttribute("data-idx"))];
+	}, [O]), Be = (e) => {
+		j || !D || (e.ctrlKey || e.metaKey) && (Q(), ze());
+	}, Ve = (e) => {
+		if (j) return;
+		let t = W[Number(e.currentTarget.getAttribute("data-idx"))];
 		if (!t) return;
-		let n = xe(t);
+		let n = Se(t);
 		if ((e.ctrlKey || e.metaKey) && D && t.children) {
-			Ee(() => {
-				L((e) => [...e, t.data]), O?.(n);
+			De(() => {
+				R((e) => [...e, t.data]), O?.(n);
 			});
 			return;
 		}
 		if (le) {
-			let t = ke.current?.getBoundingClientRect();
-			Ie({
+			let t = Ae.current?.getBoundingClientRect();
+			Le({
 				left: t ? e.clientX - t.left : e.clientX,
 				top: t ? e.clientY - t.top : e.clientY
-			}), Pe(Ae.current), Le(n), Me(!0);
+			}), Fe(je.current), Re(n), Ne(!0);
 		}
 		de?.(n, e);
-	}, Ve = se || j.palette.text.primary, He = ae || j.palette.text.secondary, Ue = j.palette.background.paper, We = j.typography.fontFamily;
+	}, He = se || M.palette.text.primary, Ue = ie || M.palette.text.secondary, We = M.palette.background.paper, Ge = M.typography.fontFamily;
 	return /* @__PURE__ */ p(c, {
-		ref: ke,
+		ref: Ae,
 		sx: {
 			display: "inline-flex",
 			position: "relative",
-			opacity: A ? .5 : 1,
-			cursor: A ? "not-allowed" : "default",
+			opacity: j ? .5 : 1,
+			cursor: j ? "not-allowed" : "default",
 			userSelect: "none"
 		},
 		children: [
-			D && I.length > 1 && /* @__PURE__ */ f(c, {
+			D && L.length > 1 && /* @__PURE__ */ f(c, {
 				sx: {
 					position: "absolute",
 					top: 4,
@@ -272,15 +272,15 @@ function g({ data: s, size: l = 600, autoFit: d = !0, sortBy: g = "name", showLa
 						color: "text.secondary",
 						fontSize: "0.7rem"
 					},
-					children: I.map((e) => e.name).join(" › ")
+					children: L.map((e) => e.name).join(" › ")
 				})
 			}),
 			/* @__PURE__ */ f(c, {
-				ref: Ae,
+				ref: je,
 				sx: {
 					position: "absolute",
-					left: Fe.left,
-					top: Fe.top,
+					left: Ie.left,
+					top: Ie.top,
 					width: 0,
 					height: 0
 				}
@@ -288,33 +288,33 @@ function g({ data: s, size: l = 600, autoFit: d = !0, sortBy: g = "name", showLa
 			/* @__PURE__ */ f("svg", {
 				width: l,
 				height: l,
-				viewBox: we,
-				onWheel: Te,
+				viewBox: Te,
+				onWheel: Ee,
 				style: {
-					fontFamily: We ?? "sans-serif",
+					fontFamily: Ge ?? "sans-serif",
 					overflow: E && X > 1 ? "hidden" : "visible"
 				},
 				role: "img",
 				"aria-label": s.name,
 				children: /* @__PURE__ */ p("g", {
-					ref: Se,
+					ref: Ce,
 					children: [
 						ge && /* @__PURE__ */ f("text", {
 							textAnchor: "middle",
 							dy: "0.35em",
 							fontSize: 13,
-							fill: Ve,
-							children: M.noData
+							fill: He,
+							children: N.noData
 						}),
 						/* @__PURE__ */ f("g", {
 							fill: "none",
-							stroke: He,
-							strokeOpacity: C,
+							stroke: Ue,
+							strokeOpacity: ae,
 							strokeWidth: w,
-							children: _e.map((e, t) => /* @__PURE__ */ f("path", { d: be(e) }, `link-${t}`))
+							children: _e.map((e, t) => /* @__PURE__ */ f("path", { d: xe(e) }, `link-${t}`))
 						}),
-						/* @__PURE__ */ f("g", { children: U.map((e, t) => {
-							let n = P(e), r = F(e), i = xe(e), a = De === t, o = e.children ? h.folder : h.person, s = Math.round(n * 1.3);
+						/* @__PURE__ */ f("g", { children: W.map((e, t) => {
+							let n = F(e), r = I(e), i = Se(e), a = Oe === t, o = e.children ? h.folder : h.person, s = Math.round(n * 1.3);
 							return /* @__PURE__ */ f(te, {
 								title: /* @__PURE__ */ p(c, {
 									sx: {
@@ -355,7 +355,7 @@ function g({ data: s, size: l = 600, autoFit: d = !0, sortBy: g = "name", showLa
 													children: [/* @__PURE__ */ f(u, {
 														variant: "caption",
 														sx: { opacity: .6 },
-														children: M.specialValueA ?? "A"
+														children: N.specialValueA ?? "A"
 													}), /* @__PURE__ */ f(u, {
 														variant: "caption",
 														children: String(i.specialValueA)
@@ -370,7 +370,7 @@ function g({ data: s, size: l = 600, autoFit: d = !0, sortBy: g = "name", showLa
 													children: [/* @__PURE__ */ f(u, {
 														variant: "caption",
 														sx: { opacity: .6 },
-														children: M.specialValueB ?? "B"
+														children: N.specialValueB ?? "B"
 													}), /* @__PURE__ */ f(u, {
 														variant: "caption",
 														children: String(i.specialValueB)
@@ -398,16 +398,20 @@ function g({ data: s, size: l = 600, autoFit: d = !0, sortBy: g = "name", showLa
 								followCursor: !0,
 								enterDelay: 50,
 								enterNextDelay: 0,
-								disableHoverListener: A,
+								disableHoverListener: j,
 								slotProps: { tooltip: { sx: { maxWidth: 260 } } },
 								children: /* @__PURE__ */ p("g", {
 									"data-idx": t,
 									transform: `rotate(${e.x * 180 / Math.PI - 90}) translate(${e.y},0)`,
-									onClick: Be,
-									onDoubleClick: ze,
-									onMouseEnter: () => !A && Oe(t),
-									onMouseLeave: () => Oe(null),
-									style: { cursor: A ? "not-allowed" : "pointer" },
+									onClick: Ve,
+									onDoubleClick: Be,
+									onMouseEnter: (e) => {
+										j || (ke(t), A?.(i, e));
+									},
+									onMouseLeave: (e) => {
+										ke(null), A?.(null, e);
+									},
+									style: { cursor: j ? "not-allowed" : "pointer" },
 									children: [
 										/* @__PURE__ */ f("circle", {
 											r: Math.max(n + 8, 24),
@@ -424,7 +428,7 @@ function g({ data: s, size: l = 600, autoFit: d = !0, sortBy: g = "name", showLa
 											fillOpacity: a ? .85 : 1,
 											style: { transition: "fill-opacity 0.15s" }
 										}),
-										v && /* @__PURE__ */ f(re, {
+										y && /* @__PURE__ */ f(g, {
 											path: o,
 											size: s
 										})
@@ -432,46 +436,46 @@ function g({ data: s, size: l = 600, autoFit: d = !0, sortBy: g = "name", showLa
 								})
 							}, `node-${e.data.id}-${t}`);
 						}) }),
-						K && ((e, t) => /* @__PURE__ */ p("g", {
+						ve && ((e, t) => /* @__PURE__ */ p("g", {
 							"data-testid": "drill-ghost-layer",
 							opacity: t,
 							pointerEvents: "none",
 							children: [/* @__PURE__ */ f("g", {
 								fill: "none",
-								stroke: He,
-								strokeOpacity: C,
+								stroke: Ue,
+								strokeOpacity: ae,
 								strokeWidth: w,
-								children: e.links().map((e, t) => /* @__PURE__ */ f("path", { d: be(e) }, `ghost-link-${t}`))
+								children: e.links().map((e, t) => /* @__PURE__ */ f("path", { d: xe(e) }, `ghost-link-${t}`))
 							}), /* @__PURE__ */ f("g", { children: e.descendants().map((e, t) => /* @__PURE__ */ p("g", {
 								transform: `rotate(${e.x * 180 / Math.PI - 90}) translate(${e.y},0)`,
 								children: [
 									/* @__PURE__ */ f("circle", {
-										r: P(e) + 2,
-										fill: F(e),
+										r: F(e) + 2,
+										fill: I(e),
 										fillOpacity: .15
 									}),
 									/* @__PURE__ */ f("circle", {
-										r: P(e),
-										fill: F(e)
+										r: F(e),
+										fill: I(e)
 									}),
-									v && /* @__PURE__ */ f(re, {
+									y && /* @__PURE__ */ f(g, {
 										path: e.children ? h.folder : h.person,
-										size: Math.round(P(e) * 1.3)
+										size: Math.round(F(e) * 1.3)
 									})
 								]
 							}, `ghost-node-${t}`)) })]
-						}))(K, ve),
-						_ && /* @__PURE__ */ f("g", { children: U.map((e, t) => {
-							let n = P(e), r = e.x < Math.PI == !e.children, i = n + 6, a = r ? i : -i, o = r ? "start" : "end";
+						}))(ve, ye),
+						v && /* @__PURE__ */ f("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__ */ f("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: Ue,
+								stroke: We,
 								strokeWidth: 3,
-								fill: Ve,
+								fill: He,
 								fontSize: oe,
 								fontWeight: e.depth === 0 ? "bold" : "normal",
 								pointerEvents: "none",
@@ -482,9 +486,9 @@ function g({ data: s, size: l = 600, autoFit: d = !0, sortBy: g = "name", showLa
 				})
 			}),
 			le && /* @__PURE__ */ f(ee, {
-				open: je,
-				anchorEl: Ne,
-				onClose: () => Me(!1),
+				open: Me,
+				anchorEl: Pe,
+				onClose: () => Ne(!1),
 				anchorOrigin: {
 					vertical: "top",
 					horizontal: "right"
@@ -494,15 +498,15 @@ function g({ data: s, size: l = 600, autoFit: d = !0, sortBy: g = "name", showLa
 					horizontal: "left"
 				},
 				slotProps: { paper: { elevation: 4 } },
-				children: $ && (ue ? ue($) : /* @__PURE__ */ f(ie, {
+				children: $ && (ue ? ue($) : /* @__PURE__ */ f(re, {
 					info: $,
-					labelA: M.specialValueA ?? "Value A",
-					labelB: M.specialValueB ?? "Value B"
+					labelA: N.specialValueA ?? "Value A",
+					labelB: N.specialValueB ?? "Value B"
 				}))
 			})
 		]
 	});
 }
-g.displayName = "RadialTreeChart";
+_.displayName = "RadialTreeChart";
 //#endregion
-export { g as RadialTreeChart };
+export { _ as RadialTreeChart };

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

@@ -81,6 +81,8 @@ export type RadialTreeChartProps = {
     renderNodePopoverContent?: (info: RadialTreeNodeInfo) => React.ReactNode;
     /** Fired on every node click */
     onNodeClick?: (info: RadialTreeNodeInfo, event: React.MouseEvent<SVGGElement>) => void;
+    /** Fired on mouse enter/leave a node — `null` on leave. Use for linked-view highlighting. */
+    onNodeHover?: (info: RadialTreeNodeInfo | null, event: React.MouseEvent<SVGGElement> | null) => void;
     /** Enable Ctrl+Scroll zoom — Ctrl+Wheel zooms in/out, Escape resets (default: false) */
     zoomable?: boolean;
     /** Enable Ctrl+Click drill-down into subtrees, Ctrl+DblClick zoom out (default: false) */

package/dist/components/sunburst-chart/SunburstChart.d.ts

@@ -1,5 +1,5 @@
 import { type SunburstChartProps } from "./SunburstChart.types";
-export declare function SunburstChart({ data, size, showSegmentLabels, innerRadius, sortBy, chartColors, showRootLabel, onSegmentClick, onZoomChange, valueDecimalCount, valueDecimalSeparator, valueThousandsSeparator, valueFormatter, zoomable, duration, disabled, translation, }: SunburstChartProps): import("react/jsx-runtime").JSX.Element;
+export declare function SunburstChart({ data, size, showSegmentLabels, innerRadius, sortBy, chartColors, showRootLabel, onSegmentClick, onSegmentHover, onZoomChange, valueDecimalCount, valueDecimalSeparator, valueThousandsSeparator, valueFormatter, zoomable, duration, disabled, translation, }: SunburstChartProps): import("react/jsx-runtime").JSX.Element;
 export declare namespace SunburstChart {
     var displayName: string;
 }