@thebuoyant-tsdev/mui-ts-library 3.29.1 → 3.30.0

package/dist/components/circle-packing-chart/CirclePackingChart.js

@@ -1,6 +1,6 @@
 import { DEFAULT_CIRCLE_PACKING_TRANSLATION as e } from "./CirclePackingChart.types.js";
-import { useCallback as t, useEffect as n, useLayoutEffect as r, useMemo as i, useRef as a, useState as o } from "react";
-import { Box as s, Tooltip as c, Typography as l, useTheme as u } from "@mui/material";
+import { Box as t, Tooltip as n, Typography as r, useTheme as i } from "@mui/material";
+import { useCallback as a, useEffect as o, useLayoutEffect as s, useMemo as c, useRef as l, useState as u } from "react";
 import { jsx as d, jsxs as f } from "react/jsx-runtime";
 import * as p from "d3";
 //#region src/components/circle-packing-chart/CirclePackingChart.tsx
@@ -8,18 +8,18 @@ var m = .56;
 function ee(e, t, n) {
 	return e.length * n * m <= t ? e : t >= 3 * n * m + n * 2 ? "…" : "";
 }
-function h({ data: m, size: h = 600, padding: g = 3, sortBy: _ = "value", showLabels: v = !0, showAllLabels: y = !1, labelFontSize: te = 13, innerLabelFontSize: b = 9, labelColor: ne, chartColors: x, depthColorStart: S, depthColorEnd: C, background: re, duration: w = 750, zoomable: T = !1, disabled: E = !1, onCircleClick: ie, onCircleHover: D, onZoomChange: O, valueFormatter: k, translation: ae }) {
-	let A = u(), oe = {
+function h({ data: m, size: h = 600, padding: g = 3, sortBy: _ = "value", showLabels: v = !0, showAllLabels: y = !1, labelFontSize: te = 13, innerLabelFontSize: b = 9, labelColor: ne, chartColors: x, depthColorStart: S, depthColorEnd: C, background: w, duration: T = 750, zoomable: E = !1, disabled: D = !1, onCircleClick: re, onCircleHover: O, onZoomChange: k, valueFormatter: A, translation: ie }) {
+	let j = i(), ae = {
 		...e,
-		...ae
-	}, se = !m.children?.length && !m.value, ce = [
-		A.palette.primary.main,
-		A.palette.secondary.main,
-		A.palette.error.main,
-		A.palette.warning.main,
-		A.palette.success.main,
-		A.palette.info.main
-	], j = ne || A.palette.text.primary, M = re || A.palette.background.default, le = A.typography.fontFamily, N = i(() => {
+		...ie
+	}, oe = !m.children?.length && !m.value, se = [
+		j.palette.primary.main,
+		j.palette.secondary.main,
+		j.palette.error.main,
+		j.palette.warning.main,
+		j.palette.success.main,
+		j.palette.info.main
+	], M = ne || j.palette.text.primary, N = w || j.palette.background.default, ce = j.typography.fontFamily, P = c(() => {
 		let e = p.hierarchy(m).sum((e) => e.value ?? 0);
 		return _ === "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,
@@ -30,36 +30,36 @@ function h({ data: m, size: h = 600, padding: g = 3, sortBy: _ = "value", showLa
 		h,
 		g,
 		_
-	]), P = N.descendants(), F = i(() => p.max(P, (e) => e.depth) ?? 0, [P]), I = !!(S && C), L = i(() => I ? p.scaleSequential(p.interpolateHcl(S, C)).domain([0, Math.max(1, F)]) : null, [
-		I,
+	]), F = P.descendants(), I = c(() => p.max(F, (e) => e.depth) ?? 0, [F]), L = !!(S && C), R = c(() => L ? p.scaleSequential(p.interpolateHcl(S, C)).domain([0, Math.max(1, I)]) : null, [
+		L,
 		S,
 		C,
-		F
-	]), R = x && x.length > 0 ? x : ce, ue = t((e) => e.data.colorConfig?.fill ? e.data.colorConfig.fill : I && L ? e.children ? L(e.depth) : A.palette.background.paper : R[e.depth % R.length], [
-		I,
+		I
+	]), z = x && x.length > 0 ? x : se, le = a((e) => e.data.colorConfig?.fill ? e.data.colorConfig.fill : L && R ? e.children ? R(e.depth) : j.palette.background.paper : z[e.depth % z.length], [
 		L,
 		R,
-		A
-	]), [z, B] = o(1), V = t((e) => {
-		if (!T || E || !e.ctrlKey) return;
+		z,
+		j
+	]), [B, V] = u(1), H = a((e) => {
+		if (!E || D || !e.ctrlKey) return;
 		e.preventDefault();
 		let t = e.deltaY < 0 ? 1.15 : 1 / 1.15;
-		B((e) => Math.max(.25, Math.min(8, e * t)));
-	}, [T, E]);
-	r(() => {
-		if (!T) return;
+		V((e) => Math.max(.25, Math.min(8, e * t)));
+	}, [E, D]);
+	s(() => {
+		if (!E) return;
 		let e = (e) => {
-			e.key === "Escape" && B(1);
+			e.key === "Escape" && V(1);
 		};
 		return window.addEventListener("keydown", e), () => window.removeEventListener("keydown", e);
-	}, [T]);
-	let H = i(() => {
+	}, [E]);
+	let U = c(() => {
 		let e = `${-h / 2} ${-h / 2} ${h} ${h}`;
-		if (z === 1) return e;
-		let t = h / z, n = (h - t) / 2;
+		if (B === 1) return e;
+		let t = h / B, n = (h - t) / 2;
 		return `${-h / 2 + n} ${-h / 2 + n} ${t} ${t}`;
-	}, [h, z]), de = t((e) => {
-		let t = e.value ?? 0, n = N.value ?? 0;
+	}, [h, B]), ue = a((e) => {
+		let t = e.value ?? 0, n = P.value ?? 0;
 		return {
 			id: e.data.id ?? null,
 			name: e.data.name,
@@ -70,38 +70,38 @@ function h({ data: m, size: h = 600, padding: g = 3, sortBy: _ = "value", showLa
 			childrenCount: e.children?.length ?? 0,
 			data: e.data
 		};
-	}, [N]), U = a(null), W = a([
-		N.x,
-		N.y,
-		N.r * 2
-	]), G = a(N), [K, fe] = o(N), q = t((e) => {
-		G.current = e, fe(e);
-	}, []), [pe, J] = o(N);
-	pe !== N && (J(N), q(N), G.current = N);
-	let Y = t((e) => {
-		let t = U.current;
+	}, [P]), W = l(null), G = l([
+		P.x,
+		P.y,
+		P.r * 2
+	]), K = l(P), [q, de] = u(P), J = a((e) => {
+		K.current = e, de(e);
+	}, []), [fe, pe] = u(P);
+	fe !== P && (pe(P), J(P), K.current = P);
+	let Y = a((e) => {
+		let t = W.current;
 		if (!t) return;
-		W.current = e;
-		let n = h / e[2], r = G.current, i = t.querySelectorAll("g[data-role='nodes'] > g"), a = t.querySelectorAll("g[data-role='nodes'] > g > circle");
-		for (let t = 0; t < P.length; t++) {
-			let r = P[t], o = i[t];
+		G.current = e;
+		let n = h / e[2], r = K.current, i = t.querySelectorAll("g[data-role='nodes'] > g"), a = t.querySelectorAll("g[data-role='nodes'] > g > circle");
+		for (let t = 0; t < F.length; t++) {
+			let r = F[t], o = i[t];
 			o && o.setAttribute("transform", `translate(${(r.x - e[0]) * n},${(r.y - e[1]) * n})`);
 			let s = t - 1;
 			s >= 0 && a[s] && a[s].setAttribute("r", String(r.r * n));
 		}
 		if (v) {
 			let r = t.querySelectorAll("g[data-role='labels'] > text");
-			for (let t = 0; t < P.length; t++) {
-				let i = P[t], a = r[t];
+			for (let t = 0; t < F.length; t++) {
+				let i = F[t], a = r[t];
 				a && (a.setAttribute("transform", `translate(${(i.x - e[0]) * n},${(i.y - e[1]) * n})`), a.setAttribute("font-weight", i.children ? "bold" : "normal"));
 			}
 		}
 		if (y) {
 			let i = t.querySelectorAll("g[data-role='inner-labels'] > text");
-			for (let t = 0; t < P.length; t++) {
-				let a = P[t], o = i[t];
+			for (let t = 0; t < F.length; t++) {
+				let a = F[t], o = i[t];
 				if (!o) continue;
-				let s = a.r * n, c = s * 1.6, l = r === N ? a !== N : a.ancestors().includes(r), u = a.parent === r;
+				let s = a.r * n, c = s * 1.6, l = r === P ? a !== P : a.ancestors().includes(r), u = a.parent === r;
 				if (l && !u && s >= 14) {
 					let t = ee(a.data.name, c, b);
 					t ? (o.textContent = t, o.setAttribute("transform", `translate(${(a.x - e[0]) * n},${(a.y - e[1]) * n})`), o.setAttribute("font-weight", a.children ? "bold" : "normal"), o.style.display = "inline") : o.style.display = "none";
@@ -109,127 +109,127 @@ function h({ data: m, size: h = 600, padding: g = 3, sortBy: _ = "value", showLa
 			}
 		}
 	}, [
-		P,
+		F,
 		h,
 		v,
 		y,
 		b,
-		N
+		P
 	]);
-	r(() => {
+	s(() => {
 		Y([
-			K.x,
-			K.y,
-			K.r * 2
+			q.x,
+			q.y,
+			q.r * 2
 		]);
 	}, [
-		N,
+		P,
 		h,
-		K,
+		q,
 		Y
 	]);
-	let X = t((e, t) => {
-		let n = U.current;
+	let X = a((e, t) => {
+		let n = W.current;
 		if (!n) return;
-		let r = K, i = W.current, a = [
+		let r = q, i = G.current, a = [
 			e.x,
 			e.y,
 			e.r * 2
 		];
-		q(e), p.select(n).transition().duration(t).ease(p.easeCubic).tween("zoom", () => {
+		J(e), p.select(n).transition().duration(t).ease(p.easeCubic).tween("zoom", () => {
 			let e = p.interpolateZoom(i, a);
 			return (t) => Y(e(t));
 		});
 		let o = n.querySelectorAll("g[data-role='labels'] > text");
-		p.selectAll(o).transition().duration(t).ease(p.easeCubic).style("fill-opacity", (t, n) => +(P[n].parent === e)).on("start", function(t, n) {
-			P[n].parent === e && (this.style.display = "inline");
+		p.selectAll(o).transition().duration(t).ease(p.easeCubic).style("fill-opacity", (t, n) => +(F[n].parent === e)).on("start", function(t, n) {
+			F[n].parent === e && (this.style.display = "inline");
 		}).on("end", function(t, n) {
-			P[n].parent !== e && (this.style.display = "none");
-		}), O?.({
+			F[n].parent !== e && (this.style.display = "none");
+		}), k?.({
 			previousName: r.data.name,
 			currentName: e.data.name,
 			currentDepth: e.depth,
-			isRoot: e === N
+			isRoot: e === P
 		});
 	}, [
-		K,
+		q,
+		F,
 		P,
-		N,
 		Y,
-		O,
-		q
-	]), Z = a(null), me = (e) => {
+		k,
+		J
+	]), Z = l(null), me = (e) => {
 		Z.current &&= (clearTimeout(Z.current), null), Z.current = setTimeout(() => {
 			e(), Z.current = null;
 		}, 250);
 	}, Q = () => {
 		Z.current &&= (clearTimeout(Z.current), null);
-	}, $ = a(X);
-	n(() => {
+	}, $ = l(X);
+	o(() => {
 		$.current = X;
-	}, [X]), r(() => {
-		if (E) return;
+	}, [X]), s(() => {
+		if (D) return;
 		let e = (e) => {
-			e.key === "Escape" && (Q(), $.current(N, w));
+			e.key === "Escape" && (Q(), $.current(P, T));
 		};
 		return window.addEventListener("keydown", e), () => window.removeEventListener("keydown", e);
 	}, [
-		E,
-		N,
-		w
+		D,
+		P,
+		T
 	]);
 	let he = (e) => {
-		if (E || !(e.ctrlKey || e.metaKey)) return;
+		if (D || !(e.ctrlKey || e.metaKey)) return;
 		Q(), e.preventDefault();
-		let t = K.parent ?? N;
-		t !== K && X(t, e.altKey ? Math.max(250, w * 10) : w);
+		let t = q.parent ?? P;
+		t !== q && X(t, e.altKey ? Math.max(250, T * 10) : T);
 	}, ge = {
 		followCursor: !0,
 		enterDelay: 50,
 		enterNextDelay: 0,
-		disableHoverListener: E,
+		disableHoverListener: D,
 		slotProps: { tooltip: { sx: { maxWidth: 220 } } }
 	};
-	return /* @__PURE__ */ f(s, {
+	return /* @__PURE__ */ f(t, {
 		sx: {
 			display: "inline-flex",
 			position: "relative",
-			opacity: E ? .5 : 1,
-			cursor: E ? "not-allowed" : "default",
+			opacity: D ? .5 : 1,
+			cursor: D ? "not-allowed" : "default",
 			userSelect: "none"
 		},
 		children: [/* @__PURE__ */ f("svg", {
-			ref: U,
+			ref: W,
 			width: h,
 			height: h,
-			viewBox: H,
-			onWheel: V,
+			viewBox: U,
+			onWheel: H,
 			style: {
 				display: "block",
-				background: M,
-				fontFamily: le ?? "sans-serif",
-				overflow: T && z > 1 ? "hidden" : "visible"
+				background: N,
+				fontFamily: ce ?? "sans-serif",
+				overflow: E && B > 1 ? "hidden" : "visible"
 			},
 			role: "img",
 			"aria-label": m.name,
 			onDoubleClick: he,
 			children: [
-				se && /* @__PURE__ */ d("text", {
+				oe && /* @__PURE__ */ d("text", {
 					textAnchor: "middle",
 					dy: "0.35em",
 					fontSize: 13,
-					fill: A.palette.text.secondary,
-					children: oe.noData
+					fill: j.palette.text.secondary,
+					children: ae.noData
 				}),
 				/* @__PURE__ */ d("g", {
 					"data-role": "nodes",
-					children: P.map((e, t) => {
-						let n = de(e), r = /* @__PURE__ */ f(s, {
+					children: F.map((e, i) => {
+						let a = ue(e), o = /* @__PURE__ */ f(t, {
 							sx: {
 								py: .5,
 								minWidth: 160
 							},
-							children: [/* @__PURE__ */ d(l, {
+							children: [/* @__PURE__ */ d(r, {
 								variant: "caption",
 								sx: {
 									fontWeight: "bold",
@@ -237,54 +237,54 @@ function h({ data: m, size: h = 600, padding: g = 3, sortBy: _ = "value", showLa
 									fontSize: "0.8rem"
 								},
 								children: e.data.name
-							}), (e.value ?? 0) > 0 && /* @__PURE__ */ f(s, {
+							}), (e.value ?? 0) > 0 && /* @__PURE__ */ f(t, {
 								sx: {
 									mt: .75,
 									borderTop: "1px solid rgba(255,255,255,0.2)",
 									pt: .75
 								},
 								children: [
-									/* @__PURE__ */ f(s, {
+									/* @__PURE__ */ f(t, {
 										sx: {
 											display: "flex",
 											justifyContent: "space-between",
 											gap: 2
 										},
-										children: [/* @__PURE__ */ d(l, {
+										children: [/* @__PURE__ */ d(r, {
 											variant: "caption",
 											sx: { opacity: .6 },
 											children: "Value"
-										}), /* @__PURE__ */ d(l, {
+										}), /* @__PURE__ */ d(r, {
 											variant: "caption",
-											children: k ? k(e.value ?? 0) : (e.value ?? 0).toLocaleString()
+											children: A ? A(e.value ?? 0) : (e.value ?? 0).toLocaleString()
 										})]
 									}),
-									/* @__PURE__ */ f(s, {
+									/* @__PURE__ */ f(t, {
 										sx: {
 											display: "flex",
 											justifyContent: "space-between",
 											gap: 2
 										},
-										children: [/* @__PURE__ */ d(l, {
+										children: [/* @__PURE__ */ d(r, {
 											variant: "caption",
 											sx: { opacity: .6 },
 											children: "Share"
-										}), /* @__PURE__ */ f(l, {
+										}), /* @__PURE__ */ f(r, {
 											variant: "caption",
-											children: [n.percentage, "%"]
+											children: [a.percentage, "%"]
 										})]
 									}),
-									e.children && /* @__PURE__ */ f(s, {
+									e.children && /* @__PURE__ */ f(t, {
 										sx: {
 											display: "flex",
 											justifyContent: "space-between",
 											gap: 2
 										},
-										children: [/* @__PURE__ */ d(l, {
+										children: [/* @__PURE__ */ d(r, {
 											variant: "caption",
 											sx: { opacity: .6 },
 											children: "Children"
-										}), /* @__PURE__ */ d(l, {
+										}), /* @__PURE__ */ d(r, {
 											variant: "caption",
 											children: e.children.length
 										})]
@@ -294,46 +294,46 @@ function h({ data: m, size: h = 600, padding: g = 3, sortBy: _ = "value", showLa
 						});
 						return /* @__PURE__ */ d("g", {
 							transform: `translate(${e.x - h / 2},${e.y - h / 2})`,
-							children: t === 0 ? null : /* @__PURE__ */ d(c, {
+							children: i === 0 ? null : /* @__PURE__ */ d(n, {
 								...ge,
-								title: r,
+								title: o,
 								children: /* @__PURE__ */ d("circle", {
 									r: e.r,
-									fill: ue(e),
-									stroke: e.data.colorConfig?.stroke ?? A.palette.background.paper,
+									fill: le(e),
+									stroke: e.data.colorConfig?.stroke ?? j.palette.background.paper,
 									strokeWidth: .75,
 									style: {
-										cursor: E ? "not-allowed" : e.children ? "pointer" : "default",
+										cursor: D ? "not-allowed" : e.children ? "pointer" : "default",
 										transition: "stroke-width 0.1s"
 									},
 									onMouseEnter: (e) => {
-										E || (e.currentTarget.style.strokeWidth = "2", D?.(n, e));
+										D || (e.currentTarget.style.strokeWidth = "2", O?.(a, e));
 									},
 									onMouseLeave: (e) => {
-										e.currentTarget.style.strokeWidth = "0.75", D?.(null, e);
+										e.currentTarget.style.strokeWidth = "0.75", O?.(null, e);
 									},
 									onClick: (t) => {
-										if (!E) {
+										if (!D) {
 											if (t.ctrlKey || t.metaKey) {
 												if (e.children) {
-													let n = t.altKey ? Math.max(250, w * 10) : w;
+													let n = t.altKey ? Math.max(250, T * 10) : T;
 													me(() => X(e, n));
 												}
 												return;
 											}
-											ie?.(n, t);
+											re?.(a, t);
 										}
 									},
 									onDoubleClick: (e) => {
-										if (!E && (e.ctrlKey || e.metaKey)) {
+										if (!D && (e.ctrlKey || e.metaKey)) {
 											Q(), e.preventDefault(), e.stopPropagation();
-											let t = K.parent ?? N;
-											t !== K && X(t, e.altKey ? Math.max(250, w * 10) : w);
+											let t = q.parent ?? P;
+											t !== q && X(t, e.altKey ? Math.max(250, T * 10) : T);
 										}
 									}
 								})
 							})
-						}, `n-${t}`);
+						}, `n-${i}`);
 					})
 				}),
 				v && /* @__PURE__ */ d("g", {
@@ -342,12 +342,12 @@ function h({ data: m, size: h = 600, padding: g = 3, sortBy: _ = "value", showLa
 					dominantBaseline: "middle",
 					pointerEvents: "none",
 					fontSize: te,
-					fill: j,
-					children: P.map((e, t) => /* @__PURE__ */ d("text", {
+					fill: M,
+					children: F.map((e, t) => /* @__PURE__ */ d("text", {
 						transform: `translate(${e.x - h / 2},${e.y - h / 2})`,
 						style: {
-							display: e.parent === N ? "inline" : "none",
-							fillOpacity: +(e.parent === N)
+							display: e.parent === P ? "inline" : "none",
+							fillOpacity: +(e.parent === P)
 						},
 						children: e.data.name
 					}, `lbl-${t}`))
@@ -358,14 +358,14 @@ function h({ data: m, size: h = 600, padding: g = 3, sortBy: _ = "value", showLa
 					dominantBaseline: "middle",
 					pointerEvents: "none",
 					fontSize: b,
-					fill: j,
-					children: P.map((e, t) => /* @__PURE__ */ d("text", {
+					fill: M,
+					children: F.map((e, t) => /* @__PURE__ */ d("text", {
 						transform: `translate(${e.x - h / 2},${e.y - h / 2})`,
 						style: { display: "none" }
 					}, `inner-lbl-${t}`))
 				})
 			]
-		}), K !== N && !E && /* @__PURE__ */ d(s, {
+		}), q !== P && !D && /* @__PURE__ */ d(t, {
 			sx: {
 				position: "absolute",
 				bottom: 6,
@@ -375,7 +375,7 @@ function h({ data: m, size: h = 600, padding: g = 3, sortBy: _ = "value", showLa
 				justifyContent: "center",
 				pointerEvents: "none"
 			},
-			children: /* @__PURE__ */ f(l, {
+			children: /* @__PURE__ */ f(r, {
 				variant: "caption",
 				sx: {
 					bgcolor: "action.hover",
@@ -385,7 +385,7 @@ function h({ data: m, size: h = 600, padding: g = 3, sortBy: _ = "value", showLa
 					color: "text.secondary",
 					fontSize: "0.7rem"
 				},
-				children: [K.ancestors().map((e) => e.data.name).reverse().join(" › "), " · Ctrl / Cmd ⌘+DblClick to zoom out · Escape to reset"]
+				children: [q.ancestors().map((e) => e.data.name).reverse().join(" › "), " · Ctrl / Cmd ⌘+DblClick to zoom out · Escape to reset"]
 			})
 		})]
 	});