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

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

@@ -1,5 +1,6 @@
-import { useCallback as e, useEffect as t, useLayoutEffect as n, useMemo as r, useRef as i, useState as a } from "react";
-import { Box as o, Tooltip as s, Typography as c, useTheme as l } from "@mui/material";
+import { DEFAULT_SUNBURST_CHART_TRANSLATION as e } from "./SunburstChart.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 ee } from "@mui/material";
 import { jsx as u, jsxs as d } from "react/jsx-runtime";
 import * as f from "d3";
 //#region src/components/sunburst-chart/SunburstChart.tsx
@@ -9,16 +10,16 @@ function _(e, t = 0, n = ".", r = ",") {
 	let [i, a] = e.toFixed(Math.max(0, t)).split("."), o = i.replace(/\B(?=(\d{3})+(?!\d))/g, r);
 	return a ? `${o}${n}${a}` : o;
 }
-function ee(e, t) {
+function te(e, t) {
 	let n = Math.floor(t / h);
 	return n <= 0 ? "" : e.length <= n ? e : n < g ? "" : e.slice(0, n - 1) + "…";
 }
-function te({ node: e, valueDecimalCount: t, valueDecimalSep: n, valueThousandsSep: r }) {
+function ne({ node: e, valueDecimalCount: t, valueDecimalSep: n, valueThousandsSep: r }) {
 	let i = (e.value ?? 0) > 0, a = e.ancestors().map((e) => e.data.name).reverse().join(" › ");
-	return /* @__PURE__ */ d(o, {
+	return /* @__PURE__ */ d(s, {
 		sx: { py: .25 },
 		children: [
-			/* @__PURE__ */ u(c, {
+			/* @__PURE__ */ u(l, {
 				variant: "caption",
 				sx: {
 					fontWeight: "bold",
@@ -26,7 +27,7 @@ function te({ node: e, valueDecimalCount: t, valueDecimalSep: n, valueThousandsS
 				},
 				children: e.data.name
 			}),
-			i && /* @__PURE__ */ u(c, {
+			i && /* @__PURE__ */ u(l, {
 				variant: "caption",
 				sx: {
 					display: "block",
@@ -34,7 +35,7 @@ function te({ node: e, valueDecimalCount: t, valueDecimalSep: n, valueThousandsS
 				},
 				children: _(e.value ?? 0, t, n, r)
 			}),
-			e.depth > 0 && /* @__PURE__ */ u(c, {
+			e.depth > 0 && /* @__PURE__ */ u(l, {
 				variant: "caption",
 				sx: {
 					display: "block",
@@ -46,25 +47,28 @@ function te({ node: e, valueDecimalCount: t, valueDecimalSep: n, valueThousandsS
 		]
 	});
 }
-function v({ data: c, size: h = 500, showSegmentLabels: g = !0, innerRadius: _ = 0, sortBy: v = "value", chartColors: y, showRootLabel: b = !0, onSegmentClick: x, onZoomChange: S, valueDecimalCount: ne = 0, valueDecimalSeparator: re = ".", valueThousandsSeparator: ie = ",", zoomable: C = !1, duration: w = 750, disabled: T = !1 }) {
-	let E = l(), D = i(null), [O, k] = a(`-${h / 2} -${h / 2} ${h} ${h}`), [A, j] = a(1), ae = r(() => {
-		if (A === 1) return O;
-		let [e, t, n, r] = O.split(" ").map(Number), i = n / A, a = r / A;
+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 = ",", zoomable: C = !1, duration: w = 750, disabled: T = !1, translation: oe }) {
+	let E = ee(), se = {
+		...e,
+		...oe
+	}, D = !l.children?.length && !l.value, O = a(null), [k, A] = o(`-${h / 2} -${h / 2} ${h} ${h}`), [j, M] = o(1), ce = i(() => {
+		if (j === 1) return k;
+		let [e, t, n, r] = k.split(" ").map(Number), i = n / j, a = r / j;
 		return `${e + (n - i) / 2} ${t + (r - a) / 2} ${i} ${a}`;
-	}, [O, A]), M = h / 2, N = Math.max(0, Math.min(_, Math.max(0, M - 1))), P = Math.max(1, M - N), oe = [
+	}, [k, j]), N = h / 2, P = Math.max(0, Math.min(_, Math.max(0, N - 1))), F = Math.max(1, N - P), le = [
 		E.palette.primary.main,
 		E.palette.secondary.main,
 		E.palette.error.main,
 		E.palette.warning.main,
 		E.palette.success.main,
 		E.palette.info.main
-	], F = y && y.length > 0 ? y : oe, { root: I, ringThickness: L } = r(() => {
-		let e = f.hierarchy(c).sum((e) => e.value ?? 0);
+	], I = y && y.length > 0 ? y : le, { root: L, ringThickness: R } = 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, P])(e), n = f.max(t.descendants(), (e) => e.depth) ?? 0, r = n > 0 ? P / n : P;
+		let t = f.partition().size([p, F])(e), n = f.max(t.descendants(), (e) => e.depth) ?? 0, r = n > 0 ? F / n : F;
 		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);
 		}), {
@@ -72,38 +76,38 @@ function v({ data: c, size: h = 500, showSegmentLabels: g = !0, innerRadius: _ =
 			ringThickness: r
 		};
 	}, [
-		c,
-		P,
+		l,
+		F,
 		v
-	]), [R, z] = a(I), [se, ce] = a(I), B = (e) => ({
+	]), [z, B] = o(L), [ue, de] = o(L), V = (e) => ({
 		x0: e.x0,
 		x1: e.x1,
-		yShift: e.depth === 0 ? 0 : (e.depth - 1) * L
-	}), [V, H] = a(() => B(I)), U = i(V);
-	if (se !== I) {
-		ce(I), z(I);
-		let e = B(I);
-		U.current = e, H(e);
+		yShift: e.depth === 0 ? 0 : (e.depth - 1) * R
+	}), [H, U] = o(() => V(L)), W = a(H);
+	if (ue !== L) {
+		de(L), B(L);
+		let e = V(L);
+		W.current = e, U(e);
 	}
-	let W = r(() => I.children?.map((e) => e.data.name) ?? [I.data.name], [I]), le = r(() => f.scaleOrdinal().domain(W).range(F), [F, W]), ue = (e) => {
+	let G = i(() => L.children?.map((e) => e.data.name) ?? [L.data.name], [L]), fe = i(() => f.scaleOrdinal().domain(G).range(I), [I, G]), pe = (e) => {
 		if (e.data.colorConfig?.fill) return e.data.colorConfig.fill;
 		let t = e;
 		for (; t.depth > 1;) t = t.parent;
-		return le(t.data.name);
-	}, de = r(() => f.arc().startAngle((e) => e.x0).endAngle((e) => e.x1).padAngle((e) => Math.min((e.x1 - e.x0) / 2, .005)).padRadius(M / 2).innerRadius((e) => N + e.y0).outerRadius((e) => N + e.y1 - 1), [M, N]), G = e((e) => {
-		let t = p / (V.x1 - V.x0);
+		return fe(t.data.name);
+	}, me = 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);
 		return {
-			x0: Math.max(0, Math.min(p, (e.x0 - V.x0) * t)),
-			x1: Math.max(0, Math.min(p, (e.x1 - V.x0) * t)),
-			y0: Math.max(0, e.y0 - V.yShift),
-			y1: Math.max(0, e.y1 - V.yShift)
+			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)
 		};
-	}, [V]);
-	t(() => {
-		let e = B(R), t = U.current;
+	}, [H]);
+	n(() => {
+		let e = V(z), t = W.current;
 		if (t.x0 === e.x0 && t.x1 === e.x1 && t.yShift === e.yShift) return;
 		if (w <= 0) {
-			U.current = e, H(e);
+			W.current = e, U(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) => {
@@ -112,21 +116,21 @@ function v({ data: c, size: h = 500, showSegmentLabels: g = !0, innerRadius: _ =
 				x1: i(c),
 				yShift: a(c)
 			};
-			U.current = l, H(l), n = t < 1 ? requestAnimationFrame(s) : null;
+			W.current = l, U(l), n = t < 1 ? requestAnimationFrame(s) : null;
 		};
 		return n = requestAnimationFrame(s), () => {
 			n != null && cancelAnimationFrame(n);
 		};
 	}, [
+		z,
 		R,
-		L,
 		w
 	]);
-	let fe = (e) => e.x1 > e.x0 && e.y1 > e.y0, pe = (e) => (N + (e.y0 + e.y1) / 2) * (e.x1 - e.x0) > 12, me = (e) => {
-		let t = (e.x0 + e.x1) / 2 * 180 / Math.PI, n = N + (e.y0 + e.y1) / 2, r = t < 180 ? 0 : 180;
+	let he = (e) => e.x1 > e.x0 && e.y1 > e.y0, ge = (e) => (P + (e.y0 + e.y1) / 2) * (e.x1 - e.x0) > 12, _e = (e) => {
+		let t = (e.x0 + e.x1) / 2 * 180 / Math.PI, n = P + (e.y0 + e.y1) / 2, r = t < 180 ? 0 : 180;
 		return `rotate(${t - 90}) translate(${n},0) rotate(${r})`;
-	}, he = e((e) => e.ancestors().includes(R), [R]), K = e((e) => {
-		let t = e.ancestors().reverse(), n = e.value ?? 0, r = I.value ?? 0;
+	}, ve = t((e) => e.ancestors().includes(z), [z]), q = t((e) => {
+		let t = e.ancestors().reverse(), n = e.value ?? 0, r = L.value ?? 0;
 		return {
 			id: e.data.id,
 			name: e.data.name,
@@ -138,87 +142,87 @@ function v({ data: c, size: h = 500, showSegmentLabels: g = !0, innerRadius: _ =
 			childrenCount: e.children?.length ?? 0,
 			data: e.data
 		};
-	}, [I]), q = e((e) => {
-		z(e), S && S({
-			focusNode: K(e),
-			isRoot: e === I
+	}, [L]), J = t((e) => {
+		B(e), S && S({
+			focusNode: q(e),
+			isRoot: e === L
 		});
 	}, [
-		I,
-		K,
+		L,
+		q,
 		S
 	]);
-	n(() => {
-		let e = D.current;
+	r(() => {
+		let e = O.current;
 		if (!e) return;
 		let t = requestAnimationFrame(() => {
 			try {
 				let t = e.getBBox();
-				k(`${t.x - 8} ${t.y - 8} ${t.width + 16} ${t.height + 16}`);
+				A(`${t.x - 8} ${t.y - 8} ${t.width + 16} ${t.height + 16}`);
 			} catch {
-				k(`-${h / 2} -${h / 2} ${h} ${h}`);
+				A(`-${h / 2} -${h / 2} ${h} ${h}`);
 			}
 		});
 		return () => cancelAnimationFrame(t);
 	}, [
 		h,
-		I,
-		R,
-		N,
 		L,
+		z,
+		P,
+		R,
 		b
 	]);
-	let J = i(null), ge = (e) => {
-		J.current &&= (clearTimeout(J.current), null), J.current = setTimeout(() => {
-			e(), J.current = null;
+	let Y = a(null), ye = (e) => {
+		Y.current &&= (clearTimeout(Y.current), null), Y.current = setTimeout(() => {
+			e(), Y.current = null;
 		}, 250);
-	}, Y = () => {
-		J.current &&= (clearTimeout(J.current), null);
+	}, X = () => {
+		Y.current &&= (clearTimeout(Y.current), null);
 	};
-	n(() => {
+	r(() => {
 		if (T) return;
 		let e = (e) => {
-			e.key === "Escape" && (Y(), q(I), j(1));
+			e.key === "Escape" && (X(), J(L), M(1));
 		};
 		return window.addEventListener("keydown", e), () => window.removeEventListener("keydown", e);
 	}, [
 		T,
-		I,
-		q
+		L,
+		J
 	]);
-	let _e = e((e) => {
+	let be = t((e) => {
 		if (!C || T || !e.ctrlKey) return;
 		e.preventDefault();
 		let t = e.deltaY < 0 ? 1.15 : 1 / 1.15;
-		j((e) => Math.max(.25, Math.min(8, e * t)));
-	}, [C, T]), X = I.descendants().filter((e) => e.depth > 0), ve = (e) => {
+		M((e) => Math.max(.25, Math.min(8, e * t)));
+	}, [C, T]), Z = L.descendants().filter((e) => e.depth > 0), xe = (e) => {
 		if (T) return;
-		let t = X[Number(e.currentTarget.getAttribute("data-idx"))];
+		let t = Z[Number(e.currentTarget.getAttribute("data-idx"))];
 		if (t) {
 			if (e.ctrlKey || e.metaKey) {
-				t.children && ge(() => q(t));
+				t.children && ye(() => J(t));
 				return;
 			}
-			x?.(K(t), e);
+			x?.(q(t), e);
 		}
-	}, ye = (e) => {
-		T || (e.ctrlKey || e.metaKey) && (Y(), q(R.parent ?? I));
-	}, Z = (e) => {
+	}, Se = (e) => {
+		T || (e.ctrlKey || e.metaKey) && (X(), J(z.parent ?? L));
+	}, Q = (e) => {
 		if (!T) {
 			if (e.ctrlKey || e.metaKey) {
-				Y(), q(R.parent ?? I);
+				X(), J(z.parent ?? L);
 				return;
 			}
-			x?.(K(R.parent ?? I), e);
+			x?.(q(z.parent ?? L), e);
 		}
-	}, Q = {
+	}, $ = {
 		followCursor: !0,
 		enterDelay: 50,
 		enterNextDelay: 0,
 		disableHoverListener: T,
 		slotProps: { tooltip: { sx: { maxWidth: 260 } } }
-	}, $ = E.palette.text.primary, be = E.typography.fontFamily;
-	return /* @__PURE__ */ u(o, {
+	}, Ce = E.palette.text.primary, we = E.typography.fontFamily;
+	return /* @__PURE__ */ u(s, {
 		sx: {
 			display: "inline-flex",
 			opacity: T ? .5 : 1,
@@ -228,89 +232,96 @@ function v({ data: c, size: h = 500, showSegmentLabels: g = !0, innerRadius: _ =
 		children: /* @__PURE__ */ u("svg", {
 			width: h,
 			height: h,
-			viewBox: ae,
-			onWheel: _e,
+			viewBox: ce,
+			onWheel: be,
 			style: {
-				fontFamily: be ?? "sans-serif",
-				overflow: C && A > 1 ? "hidden" : "visible"
+				fontFamily: we ?? "sans-serif",
+				overflow: C && j > 1 ? "hidden" : "visible"
 			},
 			role: "img",
-			"aria-label": c.name,
+			"aria-label": l.name,
 			children: /* @__PURE__ */ d("g", {
-				ref: D,
+				ref: O,
 				children: [
-					N > 0 && /* @__PURE__ */ u(s, {
-						...Q,
-						title: R.data.name,
+					D && /* @__PURE__ */ u("text", {
+						textAnchor: "middle",
+						dy: "0.35em",
+						fontSize: 13,
+						fill: E.palette.text.secondary,
+						children: se.noData
+					}),
+					P > 0 && /* @__PURE__ */ u(c, {
+						...$,
+						title: z.data.name,
 						placement: "top",
 						children: /* @__PURE__ */ u("circle", {
 							cx: 0,
 							cy: 0,
-							r: N,
+							r: P,
 							fill: "transparent",
 							pointerEvents: T ? "none" : "auto",
-							onClick: Z,
+							onClick: Q,
 							style: { cursor: T ? "not-allowed" : "pointer" }
 						})
 					}),
-					/* @__PURE__ */ u("g", { children: X.map((e, t) => {
-						let n = G(e), r = fe(n), i = !!e.children;
-						return /* @__PURE__ */ u(s, {
-							...Q,
+					/* @__PURE__ */ u("g", { children: Z.map((e, t) => {
+						let n = K(e), r = he(n), i = !!e.children;
+						return /* @__PURE__ */ u(c, {
+							...$,
 							placement: "top",
-							title: r ? /* @__PURE__ */ u(te, {
+							title: r ? /* @__PURE__ */ u(ne, {
 								node: e,
-								valueDecimalCount: ne,
-								valueDecimalSep: re,
-								valueThousandsSep: ie
+								valueDecimalCount: re,
+								valueDecimalSep: ie,
+								valueThousandsSep: ae
 							}) : "",
 							children: /* @__PURE__ */ u("path", {
 								"data-idx": t,
-								d: de(n) || "",
-								fill: ue(e),
+								d: me(n) || "",
+								fill: pe(e),
 								fillOpacity: r ? i ? .75 : .5 : 0,
 								style: {
 									pointerEvents: r && !T ? "auto" : "none",
 									cursor: i && !T ? "pointer" : "default",
 									transition: "fill-opacity 0.15s"
 								},
-								onClick: ve,
-								onDoubleClick: ye
+								onClick: xe,
+								onDoubleClick: Se
 							})
 						}, `tt-${e.data.id}-${t}`);
 					}) }),
 					g && /* @__PURE__ */ u("g", {
 						pointerEvents: "none",
 						textAnchor: "middle",
-						fill: $,
-						children: X.map((e, t) => {
-							if (!he(e)) return null;
-							let n = G(e);
-							if (!pe(n)) return null;
-							let r = (N + (n.y0 + n.y1) / 2) * (n.x1 - n.x0) * .88, i = ee(e.data.name, r);
+						fill: Ce,
+						children: Z.map((e, t) => {
+							if (!ve(e)) return null;
+							let n = K(e);
+							if (!ge(n)) return null;
+							let r = (P + (n.y0 + n.y1) / 2) * (n.x1 - n.x0) * .88, i = te(e.data.name, r);
 							return i ? /* @__PURE__ */ u("text", {
-								transform: me(n),
+								transform: _e(n),
 								dy: "0.35em",
 								fontSize: m,
 								children: i
 							}, `lbl-${e.data.id}-${t}`) : null;
 						})
 					}),
-					b && /* @__PURE__ */ u(s, {
-						...Q,
+					b && !D && /* @__PURE__ */ u(c, {
+						...$,
 						placement: "top",
 						title: "",
 						children: /* @__PURE__ */ u("g", {
 							textAnchor: "middle",
-							fill: $,
+							fill: Ce,
 							pointerEvents: T ? "none" : "auto",
-							onClick: Z,
-							style: { cursor: R !== I && !T ? "pointer" : "default" },
+							onClick: Q,
+							style: { cursor: z !== L && !T ? "pointer" : "default" },
 							children: /* @__PURE__ */ u("text", {
 								fontSize: 13,
 								dy: "0.35em",
 								fontWeight: "bold",
-								children: R.data.name
+								children: z.data.name
 							})
 						})
 					})

package/dist/components/tag-selection/TagSelectionAutocomplete.js

@@ -104,8 +104,9 @@ function v({ value: e, onChange: t, disabled: r = !1 }) {
 		} }) } }
 	});
 }
-function y({ availableTags: y, searchValue: b, translation: x, onSearchChange: S, onTagSelect: re, onTagCreate: C, inputSize: w = "medium", chipSize: T = "medium", disabled: E = !1, loading: ie = !1, isMaxReached: D = !1, allowCreate: O = !1, listboxMaxHeight: k }) {
-	let [A, j] = e("default"), [M, N] = e(null), [P, F] = e(null), [I, L] = e(!0), [R, z] = e(!1), [B, V] = e(!1), [H, U] = e("#1976d2"), [W, G] = e("#ffffff"), K = E || D, q = M !== null, J = y.filter((e) => e.label.toLowerCase().includes(b.trim().toLowerCase())), Y = O && b.trim() !== "" && J.length === 0, ae = B && !Y, X = q ? I ? h(M) : P ?? "#000000" : void 0, Z = () => {
+function y({ availableTags: y, searchValue: b, translation: x, onSearchChange: S, onTagSelect: re, onTagCreate: C, inputSize: w = "medium", chipSize: T = "medium", disabled: E = !1, loading: D = !1, isMaxReached: O = !1, allowCreate: ie = !1, listboxMaxHeight: k }) {
+	let [A, j] = e("default"), [M, N] = e(null), [P, F] = e(null), [I, L] = e(!0), [R, z] = e(!1), [B, V] = e(!1), [H, U] = e("#1976d2"), [W, G] = e("#ffffff"), K = E || O, q = M !== null, J = y.filter((e) => e.label.toLowerCase().includes(b.trim().toLowerCase())), Y = ie && b.trim() !== "" && J.length === 0, ae = B && !Y, X = q ? I ? h(M) : P ?? "#000000" : void 0, Z = () => {
+		if (K) return;
 		let e = b.trim(), t = e.toLowerCase().replace(/\s+/g, "-");
 		C?.(q && M ? {
 			id: t,
@@ -149,7 +150,7 @@ function y({ availableTags: y, searchValue: b, translation: x, onSearchChange: S
 			onClose: () => V(!1),
 			size: w,
 			disabled: K,
-			loading: ie,
+			loading: D,
 			getOptionLabel: (e) => e.label,
 			inputValue: b,
 			onInputChange: (e, t) => S(t),
@@ -170,9 +171,9 @@ function y({ availableTags: y, searchValue: b, translation: x, onSearchChange: S
 				...e,
 				label: x.autoCompleteLabel,
 				placeholder: x.placeholder,
-				helperText: D && !E ? x.maxTagsReachedText : void 0,
+				helperText: O && !E ? x.maxTagsReachedText : void 0,
 				onKeyDown: (e) => {
-					Y && e.key === "Enter" && (e.preventDefault(), Z());
+					Y && !K && e.key === "Enter" && (e.preventDefault(), Z());
 				},
 				slotProps: {
 					...e.slotProps,
@@ -183,6 +184,7 @@ function y({ availableTags: y, searchValue: b, translation: x, onSearchChange: S
 							sx: { color: "success.main" },
 							onMouseDown: $,
 							onClick: Z,
+							disabled: K,
 							"aria-label": x.confirmCreateLabel,
 							children: /* @__PURE__ */ u(te, { fontSize: "small" })
 						}), /* @__PURE__ */ u(i, {