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

package/dist/components/sunburst-chart/SunburstChart.js

@@ -47,28 +47,28 @@ function ne({ node: e, valueDecimalCount: t, valueDecimalSep: n, valueThousandsS
 		]
 	});
 }
-function v({ data: l, size: h = 500, showSegmentLabels: g = !0, innerRadius: _ = 0, sortBy: v = "value", chartColors: y, showRootLabel: b = !0, onSegmentClick: x, onZoomChange: S, valueDecimalCount: re = 0, valueDecimalSeparator: ie = ".", valueThousandsSeparator: ae = ",", valueFormatter: oe, zoomable: C = !1, duration: w = 750, disabled: T = !1, translation: se }) {
-	let E = ee(), ce = {
+function v({ data: l, size: h = 500, showSegmentLabels: g = !0, innerRadius: _ = 0, sortBy: v = "value", chartColors: y, showRootLabel: b = !0, onSegmentClick: x, onSegmentHover: S, onZoomChange: C, valueDecimalCount: re = 0, valueDecimalSeparator: ie = ".", valueThousandsSeparator: ae = ",", valueFormatter: oe, zoomable: w = !1, duration: T = 750, disabled: E = !1, translation: se }) {
+	let D = ee(), ce = {
 		...e,
 		...se
-	}, D = !l.children?.length && !l.value, O = a(null), [k, A] = o(`-${h / 2} -${h / 2} ${h} ${h}`), [j, M] = o(1), le = i(() => {
-		if (j === 1) return k;
-		let [e, t, n, r] = k.split(" ").map(Number), i = n / j, a = r / j;
+	}, O = !l.children?.length && !l.value, k = a(null), [A, j] = o(`-${h / 2} -${h / 2} ${h} ${h}`), [M, N] = o(1), le = i(() => {
+		if (M === 1) return A;
+		let [e, t, n, r] = A.split(" ").map(Number), i = n / M, a = r / M;
 		return `${e + (n - i) / 2} ${t + (r - a) / 2} ${i} ${a}`;
-	}, [k, j]), N = h / 2, P = Math.max(0, Math.min(_, Math.max(0, N - 1))), F = Math.max(1, N - P), ue = [
-		E.palette.primary.main,
-		E.palette.secondary.main,
-		E.palette.error.main,
-		E.palette.warning.main,
-		E.palette.success.main,
-		E.palette.info.main
-	], I = y && y.length > 0 ? y : ue, { root: L, ringThickness: R } = i(() => {
+	}, [A, M]), P = h / 2, F = Math.max(0, Math.min(_, Math.max(0, P - 1))), I = Math.max(1, P - F), ue = [
+		D.palette.primary.main,
+		D.palette.secondary.main,
+		D.palette.error.main,
+		D.palette.warning.main,
+		D.palette.success.main,
+		D.palette.info.main
+	], L = y && y.length > 0 ? y : ue, { root: R, ringThickness: z } = i(() => {
 		let e = f.hierarchy(l).sum((e) => e.value ?? 0);
 		v === "value" ? e.sort((e, t) => (t.value ?? 0) - (e.value ?? 0)) : e.sort((e, t) => String(e.data.name).localeCompare(String(t.data.name), void 0, {
 			numeric: !0,
 			sensitivity: "base"
 		}));
-		let t = f.partition().size([p, F])(e), n = f.max(t.descendants(), (e) => e.depth) ?? 0, r = n > 0 ? F / n : F;
+		let t = f.partition().size([p, I])(e), n = f.max(t.descendants(), (e) => e.depth) ?? 0, r = n > 0 ? I / n : I;
 		return n > 0 && t.descendants().forEach((e) => {
 			e.depth === 0 ? (e.y0 = 0, e.y1 = 0) : (e.y0 = (e.depth - 1) * r, e.y1 = e.depth * r);
 		}), {
@@ -77,60 +77,60 @@ function v({ data: l, size: h = 500, showSegmentLabels: g = !0, innerRadius: _ =
 		};
 	}, [
 		l,
-		F,
+		I,
 		v
-	]), [z, B] = o(L), [de, fe] = o(L), V = (e) => ({
+	]), [B, V] = o(R), [de, fe] = o(R), H = (e) => ({
 		x0: e.x0,
 		x1: e.x1,
-		yShift: e.depth === 0 ? 0 : (e.depth - 1) * R
-	}), [H, U] = o(() => V(L)), W = a(H);
-	if (de !== L) {
-		fe(L), B(L);
-		let e = V(L);
-		W.current = e, U(e);
+		yShift: e.depth === 0 ? 0 : (e.depth - 1) * z
+	}), [U, W] = o(() => H(R)), G = a(U);
+	if (de !== R) {
+		fe(R), V(R);
+		let e = H(R);
+		G.current = e, W(e);
 	}
-	let G = i(() => L.children?.map((e) => e.data.name) ?? [L.data.name], [L]), pe = i(() => f.scaleOrdinal().domain(G).range(I), [I, G]), me = (e) => {
+	let K = i(() => R.children?.map((e) => e.data.name) ?? [R.data.name], [R]), pe = i(() => f.scaleOrdinal().domain(K).range(L), [L, K]), me = (e) => {
 		if (e.data.colorConfig?.fill) return e.data.colorConfig.fill;
 		let t = e;
 		for (; t.depth > 1;) t = t.parent;
 		return pe(t.data.name);
-	}, he = i(() => f.arc().startAngle((e) => e.x0).endAngle((e) => e.x1).padAngle((e) => Math.min((e.x1 - e.x0) / 2, .005)).padRadius(N / 2).innerRadius((e) => P + e.y0).outerRadius((e) => P + e.y1 - 1), [N, P]), K = t((e) => {
-		let t = p / (H.x1 - H.x0);
+	}, he = i(() => f.arc().startAngle((e) => e.x0).endAngle((e) => e.x1).padAngle((e) => Math.min((e.x1 - e.x0) / 2, .005)).padRadius(P / 2).innerRadius((e) => F + e.y0).outerRadius((e) => F + e.y1 - 1), [P, F]), q = t((e) => {
+		let t = p / (U.x1 - U.x0);
 		return {
-			x0: Math.max(0, Math.min(p, (e.x0 - H.x0) * t)),
-			x1: Math.max(0, Math.min(p, (e.x1 - H.x0) * t)),
-			y0: Math.max(0, e.y0 - H.yShift),
-			y1: Math.max(0, e.y1 - H.yShift)
+			x0: Math.max(0, Math.min(p, (e.x0 - U.x0) * t)),
+			x1: Math.max(0, Math.min(p, (e.x1 - U.x0) * t)),
+			y0: Math.max(0, e.y0 - U.yShift),
+			y1: Math.max(0, e.y1 - U.yShift)
 		};
-	}, [H]);
+	}, [U]);
 	n(() => {
-		let e = V(z), t = W.current;
+		let e = H(B), t = G.current;
 		if (t.x0 === e.x0 && t.x1 === e.x1 && t.yShift === e.yShift) return;
-		if (w <= 0) {
-			W.current = e, U(e);
+		if (T <= 0) {
+			G.current = e, W(e);
 			return;
 		}
 		let n = null, r = f.interpolateNumber(t.x0, e.x0), i = f.interpolateNumber(t.x1, e.x1), a = f.interpolateNumber(t.yShift, e.yShift), o = performance.now(), s = (e) => {
-			let t = Math.min(1, (e - o) / w), c = f.easeCubic(t), l = {
+			let t = Math.min(1, (e - o) / T), c = f.easeCubic(t), l = {
 				x0: r(c),
 				x1: i(c),
 				yShift: a(c)
 			};
-			W.current = l, U(l), n = t < 1 ? requestAnimationFrame(s) : null;
+			G.current = l, W(l), n = t < 1 ? requestAnimationFrame(s) : null;
 		};
 		return n = requestAnimationFrame(s), () => {
 			n != null && cancelAnimationFrame(n);
 		};
 	}, [
+		B,
 		z,
-		R,
-		w
+		T
 	]);
-	let ge = (e) => e.x1 > e.x0 && e.y1 > e.y0, _e = (e) => (P + (e.y0 + e.y1) / 2) * (e.x1 - e.x0) > 12, ve = (e) => {
-		let t = (e.x0 + e.x1) / 2 * 180 / Math.PI, n = P + (e.y0 + e.y1) / 2, r = t < 180 ? 0 : 180;
+	let ge = (e) => e.x1 > e.x0 && e.y1 > e.y0, _e = (e) => (F + (e.y0 + e.y1) / 2) * (e.x1 - e.x0) > 12, ve = (e) => {
+		let t = (e.x0 + e.x1) / 2 * 180 / Math.PI, n = F + (e.y0 + e.y1) / 2, r = t < 180 ? 0 : 180;
 		return `rotate(${t - 90}) translate(${n},0) rotate(${r})`;
-	}, ye = t((e) => e.ancestors().includes(z), [z]), q = t((e) => {
-		let t = e.ancestors().reverse(), n = e.value ?? 0, r = L.value ?? 0;
+	}, ye = t((e) => e.ancestors().includes(B), [B]), J = t((e) => {
+		let t = e.ancestors().reverse(), n = e.value ?? 0, r = R.value ?? 0;
 		return {
 			id: e.data.id,
 			name: e.data.name,
@@ -142,91 +142,91 @@ function v({ data: l, size: h = 500, showSegmentLabels: g = !0, innerRadius: _ =
 			childrenCount: e.children?.length ?? 0,
 			data: e.data
 		};
-	}, [L]), J = t((e) => {
-		B(e), S && S({
-			focusNode: q(e),
-			isRoot: e === L
+	}, [R]), Y = t((e) => {
+		V(e), C && C({
+			focusNode: J(e),
+			isRoot: e === R
 		});
 	}, [
-		L,
-		q,
-		S
+		R,
+		J,
+		C
 	]);
 	r(() => {
-		let e = O.current;
+		let e = k.current;
 		if (!e) return;
 		let t = requestAnimationFrame(() => {
 			try {
 				let t = e.getBBox();
-				A(`${t.x - 8} ${t.y - 8} ${t.width + 16} ${t.height + 16}`);
+				j(`${t.x - 8} ${t.y - 8} ${t.width + 16} ${t.height + 16}`);
 			} catch {
-				A(`-${h / 2} -${h / 2} ${h} ${h}`);
+				j(`-${h / 2} -${h / 2} ${h} ${h}`);
 			}
 		});
 		return () => cancelAnimationFrame(t);
 	}, [
 		h,
-		L,
-		z,
-		P,
 		R,
+		B,
+		F,
+		z,
 		b
 	]);
-	let Y = a(null), be = (e) => {
-		Y.current &&= (clearTimeout(Y.current), null), Y.current = setTimeout(() => {
-			e(), Y.current = null;
+	let X = a(null), be = (e) => {
+		X.current &&= (clearTimeout(X.current), null), X.current = setTimeout(() => {
+			e(), X.current = null;
 		}, 250);
-	}, X = () => {
-		Y.current &&= (clearTimeout(Y.current), null);
+	}, Z = () => {
+		X.current &&= (clearTimeout(X.current), null);
 	};
 	r(() => {
-		if (T) return;
+		if (E) return;
 		let e = (e) => {
-			e.key === "Escape" && (X(), J(L), M(1));
+			e.key === "Escape" && (Z(), Y(R), N(1));
 		};
 		return window.addEventListener("keydown", e), () => window.removeEventListener("keydown", e);
 	}, [
-		T,
-		L,
-		J
+		E,
+		R,
+		Y
 	]);
 	let xe = t((e) => {
-		if (!C || T || !e.ctrlKey) return;
+		if (!w || E || !e.ctrlKey) return;
 		e.preventDefault();
 		let t = e.deltaY < 0 ? 1.15 : 1 / 1.15;
-		M((e) => Math.max(.25, Math.min(8, e * t)));
-	}, [C, T]), Z = L.descendants().filter((e) => e.depth > 0), Se = (e) => {
-		if (T) return;
-		let t = Z[Number(e.currentTarget.getAttribute("data-idx"))];
+		N((e) => Math.max(.25, Math.min(8, e * t)));
+	}, [w, E]), Q = R.descendants().filter((e) => e.depth > 0), Se = (e) => {
+		if (E) return;
+		let t = Q[Number(e.currentTarget.getAttribute("data-idx"))];
 		if (t) {
 			if (e.ctrlKey || e.metaKey) {
-				t.children && be(() => J(t));
+				t.children && be(() => Y(t));
 				return;
 			}
-			x?.(q(t), e);
+			x?.(J(t), e);
 		}
 	}, Ce = (e) => {
-		T || (e.ctrlKey || e.metaKey) && (X(), J(z.parent ?? L));
-	}, Q = (e) => {
-		if (!T) {
+		E || (e.ctrlKey || e.metaKey) && (Z(), Y(B.parent ?? R));
+	}, we = (e) => {
+		if (!E) {
 			if (e.ctrlKey || e.metaKey) {
-				X(), J(z.parent ?? L);
+				Z(), Y(B.parent ?? R);
 				return;
 			}
-			x?.(q(z.parent ?? L), e);
+			x?.(J(B.parent ?? R), e);
 		}
 	}, $ = {
 		followCursor: !0,
 		enterDelay: 50,
 		enterNextDelay: 0,
-		disableHoverListener: T,
+		disableHoverListener: E,
 		slotProps: { tooltip: { sx: { maxWidth: 260 } } }
-	}, we = E.palette.text.primary, Te = E.typography.fontFamily;
+	}, Te = D.palette.text.primary, Ee = D.typography.fontFamily;
 	return /* @__PURE__ */ u(s, {
 		sx: {
 			display: "inline-flex",
-			opacity: T ? .5 : 1,
-			cursor: T ? "not-allowed" : "default",
+			opacity: E ? .5 : 1,
+			cursor: E ? "not-allowed" : "default",
 			userSelect: "none"
 		},
 		children: /* @__PURE__ */ u("svg", {
@@ -235,37 +235,43 @@ function v({ data: l, size: h = 500, showSegmentLabels: g = !0, innerRadius: _ =
 			viewBox: le,
 			onWheel: xe,
 			style: {
-				fontFamily: Te ?? "sans-serif",
-				overflow: C && j > 1 ? "hidden" : "visible"
+				fontFamily: Ee ?? "sans-serif",
+				overflow: w && M > 1 ? "hidden" : "visible"
 			},
 			role: "img",
 			"aria-label": l.name,
 			children: /* @__PURE__ */ d("g", {
-				ref: O,
+				ref: k,
 				children: [
-					D && /* @__PURE__ */ u("text", {
+					O && /* @__PURE__ */ u("text", {
 						textAnchor: "middle",
 						dy: "0.35em",
 						fontSize: 13,
-						fill: E.palette.text.secondary,
+						fill: D.palette.text.secondary,
 						children: ce.noData
 					}),
-					P > 0 && /* @__PURE__ */ u(c, {
+					F > 0 && /* @__PURE__ */ u(c, {
 						...$,
-						title: z.data.name,
+						title: B.data.name,
 						placement: "top",
 						children: /* @__PURE__ */ u("circle", {
 							cx: 0,
 							cy: 0,
-							r: P,
+							r: F,
 							fill: "transparent",
-							pointerEvents: T ? "none" : "auto",
-							onClick: Q,
-							style: { cursor: T ? "not-allowed" : "pointer" }
+							pointerEvents: E ? "none" : "auto",
+							onClick: we,
+							style: { cursor: E ? "not-allowed" : "pointer" },
+							onMouseEnter: (e) => {
+								E || S?.(J(B.parent ?? R), e);
+							},
+							onMouseLeave: (e) => {
+								S?.(null, e);
+							}
 						})
 					}),
-					/* @__PURE__ */ u("g", { children: Z.map((e, t) => {
-						let n = K(e), r = ge(n), i = !!e.children;
+					/* @__PURE__ */ u("g", { children: Q.map((e, t) => {
+						let n = q(e), r = ge(n), i = !!e.children;
 						return /* @__PURE__ */ u(c, {
 							...$,
 							placement: "top",
@@ -282,24 +288,32 @@ function v({ data: l, size: h = 500, showSegmentLabels: g = !0, innerRadius: _ =
 								fill: me(e),
 								fillOpacity: r ? i ? .75 : .5 : 0,
 								style: {
-									pointerEvents: r && !T ? "auto" : "none",
-									cursor: i && !T ? "pointer" : "default",
+									pointerEvents: r && !E ? "auto" : "none",
+									cursor: i && !E ? "pointer" : "default",
 									transition: "fill-opacity 0.15s"
 								},
 								onClick: Se,
-								onDoubleClick: Ce
+								onDoubleClick: Ce,
+								onMouseEnter: (e) => {
+									if (E || !r) return;
+									let t = Q[Number(e.currentTarget.getAttribute("data-idx"))];
+									t && S?.(J(t), e);
+								},
+								onMouseLeave: (e) => {
+									r && S?.(null, e);
+								}
 							})
 						}, `tt-${e.data.id}-${t}`);
 					}) }),
 					g && /* @__PURE__ */ u("g", {
 						pointerEvents: "none",
 						textAnchor: "middle",
-						fill: we,
-						children: Z.map((e, t) => {
+						fill: Te,
+						children: Q.map((e, t) => {
 							if (!ye(e)) return null;
-							let n = K(e);
+							let n = q(e);
 							if (!_e(n)) return null;
-							let r = (P + (n.y0 + n.y1) / 2) * (n.x1 - n.x0) * .88, i = te(e.data.name, r);
+							let r = (F + (n.y0 + n.y1) / 2) * (n.x1 - n.x0) * .88, i = te(e.data.name, r);
 							return i ? /* @__PURE__ */ u("text", {
 								transform: ve(n),
 								dy: "0.35em",
@@ -308,21 +322,21 @@ function v({ data: l, size: h = 500, showSegmentLabels: g = !0, innerRadius: _ =
 							}, `lbl-${e.data.id}-${t}`) : null;
 						})
 					}),
-					b && !D && /* @__PURE__ */ u(c, {
+					b && !O && /* @__PURE__ */ u(c, {
 						...$,
 						placement: "top",
 						title: "",
 						children: /* @__PURE__ */ u("g", {
 							textAnchor: "middle",
-							fill: we,
-							pointerEvents: T ? "none" : "auto",
-							onClick: Q,
-							style: { cursor: z !== L && !T ? "pointer" : "default" },
+							fill: Te,
+							pointerEvents: E ? "none" : "auto",
+							onClick: we,
+							style: { cursor: B !== R && !E ? "pointer" : "default" },
 							children: /* @__PURE__ */ u("text", {
 								fontSize: 13,
 								dy: "0.35em",
 								fontWeight: "bold",
-								children: z.data.name
+								children: B.data.name
 							})
 						})
 					})

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

@@ -56,6 +56,8 @@ export type SunburstChartProps = {
     showRootLabel?: boolean;
     /** Fired on single-click on any segment */
     onSegmentClick?: (info: SunburstSegmentInfo, event: React.MouseEvent<SVGPathElement | SVGCircleElement>) => void;
+    /** Fired on mouse enter/leave — `null` on leave. Use for linked-view highlighting. */
+    onSegmentHover?: (info: SunburstSegmentInfo | null, event: React.MouseEvent<SVGPathElement | SVGCircleElement> | null) => void;
     /** Fired when zoom focus changes (Ctrl+Click in/out, Escape reset) */
     onZoomChange?: (zoom: SunburstZoomInfo) => void;
     /** Decimal places for value display in tooltips (default: 0) */