@thebuoyant-tsdev/mui-ts-library 3.21.0 → 3.24.1

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

@@ -14,8 +14,8 @@ 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 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(" › ");
+function ne({ node: e, valueDecimalCount: t, valueDecimalSep: n, valueThousandsSep: r, valueFormatter: i }) {
+	let a = (e.value ?? 0) > 0, o = e.ancestors().map((e) => e.data.name).reverse().join(" › ");
 	return /* @__PURE__ */ d(s, {
 		sx: { py: .25 },
 		children: [
@@ -27,13 +27,13 @@ function ne({ node: e, valueDecimalCount: t, valueDecimalSep: n, valueThousandsS
 				},
 				children: e.data.name
 			}),
-			i && /* @__PURE__ */ u(l, {
+			a && /* @__PURE__ */ u(l, {
 				variant: "caption",
 				sx: {
 					display: "block",
 					opacity: .85
 				},
-				children: _(e.value ?? 0, t, n, r)
+				children: ((e) => i ? i(e) : _(e, t, n, r))(e.value ?? 0)
 			}),
 			e.depth > 0 && /* @__PURE__ */ u(l, {
 				variant: "caption",
@@ -42,27 +42,27 @@ function ne({ node: e, valueDecimalCount: t, valueDecimalSep: n, valueThousandsS
 					opacity: .65,
 					mt: .25
 				},
-				children: a
+				children: o
 			})
 		]
 	});
 }
-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 = {
+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 = {
 		...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(() => {
+		...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;
 		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), le = [
+	}, [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 : le, { root: L, ringThickness: R } = i(() => {
+	], I = y && y.length > 0 ? y : ue, { 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,
@@ -79,22 +79,22 @@ function v({ data: l, size: h = 500, showSegmentLabels: g = !0, innerRadius: _ =
 		l,
 		F,
 		v
-	]), [z, B] = o(L), [ue, de] = o(L), V = (e) => ({
+	]), [z, B] = o(L), [de, fe] = o(L), V = (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 (ue !== L) {
-		de(L), B(L);
+	if (de !== L) {
+		fe(L), B(L);
 		let e = V(L);
 		W.current = e, U(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) => {
+	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) => {
 		if (e.data.colorConfig?.fill) return e.data.colorConfig.fill;
 		let t = e;
 		for (; t.depth > 1;) t = t.parent;
-		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) => {
+		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);
 		return {
 			x0: Math.max(0, Math.min(p, (e.x0 - H.x0) * t)),
@@ -126,10 +126,10 @@ function v({ data: l, size: h = 500, showSegmentLabels: g = !0, innerRadius: _ =
 		R,
 		w
 	]);
-	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 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;
 		return `rotate(${t - 90}) translate(${n},0) rotate(${r})`;
-	}, ve = t((e) => e.ancestors().includes(z), [z]), q = t((e) => {
+	}, ye = 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,
@@ -172,7 +172,7 @@ function v({ data: l, size: h = 500, showSegmentLabels: g = !0, innerRadius: _ =
 		R,
 		b
 	]);
-	let Y = a(null), ye = (e) => {
+	let Y = a(null), be = (e) => {
 		Y.current &&= (clearTimeout(Y.current), null), Y.current = setTimeout(() => {
 			e(), Y.current = null;
 		}, 250);
@@ -190,22 +190,22 @@ function v({ data: l, size: h = 500, showSegmentLabels: g = !0, innerRadius: _ =
 		L,
 		J
 	]);
-	let be = t((e) => {
+	let xe = t((e) => {
 		if (!C || T || !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), xe = (e) => {
+	}, [C, T]), Z = L.descendants().filter((e) => e.depth > 0), Se = (e) => {
 		if (T) return;
 		let t = Z[Number(e.currentTarget.getAttribute("data-idx"))];
 		if (t) {
 			if (e.ctrlKey || e.metaKey) {
-				t.children && ye(() => J(t));
+				t.children && be(() => J(t));
 				return;
 			}
 			x?.(q(t), e);
 		}
-	}, Se = (e) => {
+	}, Ce = (e) => {
 		T || (e.ctrlKey || e.metaKey) && (X(), J(z.parent ?? L));
 	}, Q = (e) => {
 		if (!T) {
@@ -221,7 +221,7 @@ function v({ data: l, size: h = 500, showSegmentLabels: g = !0, innerRadius: _ =
 		enterNextDelay: 0,
 		disableHoverListener: T,
 		slotProps: { tooltip: { sx: { maxWidth: 260 } } }
-	}, Ce = E.palette.text.primary, we = E.typography.fontFamily;
+	}, we = E.palette.text.primary, Te = E.typography.fontFamily;
 	return /* @__PURE__ */ u(s, {
 		sx: {
 			display: "inline-flex",
@@ -232,10 +232,10 @@ function v({ data: l, size: h = 500, showSegmentLabels: g = !0, innerRadius: _ =
 		children: /* @__PURE__ */ u("svg", {
 			width: h,
 			height: h,
-			viewBox: ce,
-			onWheel: be,
+			viewBox: le,
+			onWheel: xe,
 			style: {
-				fontFamily: we ?? "sans-serif",
+				fontFamily: Te ?? "sans-serif",
 				overflow: C && j > 1 ? "hidden" : "visible"
 			},
 			role: "img",
@@ -248,7 +248,7 @@ function v({ data: l, size: h = 500, showSegmentLabels: g = !0, innerRadius: _ =
 						dy: "0.35em",
 						fontSize: 13,
 						fill: E.palette.text.secondary,
-						children: se.noData
+						children: ce.noData
 					}),
 					P > 0 && /* @__PURE__ */ u(c, {
 						...$,
@@ -265,7 +265,7 @@ function v({ data: l, size: h = 500, showSegmentLabels: g = !0, innerRadius: _ =
 						})
 					}),
 					/* @__PURE__ */ u("g", { children: Z.map((e, t) => {
-						let n = K(e), r = he(n), i = !!e.children;
+						let n = K(e), r = ge(n), i = !!e.children;
 						return /* @__PURE__ */ u(c, {
 							...$,
 							placement: "top",
@@ -273,34 +273,35 @@ function v({ data: l, size: h = 500, showSegmentLabels: g = !0, innerRadius: _ =
 								node: e,
 								valueDecimalCount: re,
 								valueDecimalSep: ie,
-								valueThousandsSep: ae
+								valueThousandsSep: ae,
+								valueFormatter: oe
 							}) : "",
 							children: /* @__PURE__ */ u("path", {
 								"data-idx": t,
-								d: me(n) || "",
-								fill: pe(e),
+								d: he(n) || "",
+								fill: me(e),
 								fillOpacity: r ? i ? .75 : .5 : 0,
 								style: {
 									pointerEvents: r && !T ? "auto" : "none",
 									cursor: i && !T ? "pointer" : "default",
 									transition: "fill-opacity 0.15s"
 								},
-								onClick: xe,
-								onDoubleClick: Se
+								onClick: Se,
+								onDoubleClick: Ce
 							})
 						}, `tt-${e.data.id}-${t}`);
 					}) }),
 					g && /* @__PURE__ */ u("g", {
 						pointerEvents: "none",
 						textAnchor: "middle",
-						fill: Ce,
+						fill: we,
 						children: Z.map((e, t) => {
-							if (!ve(e)) return null;
+							if (!ye(e)) return null;
 							let n = K(e);
-							if (!ge(n)) return null;
+							if (!_e(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: _e(n),
+								transform: ve(n),
 								dy: "0.35em",
 								fontSize: m,
 								children: i
@@ -313,7 +314,7 @@ function v({ data: l, size: h = 500, showSegmentLabels: g = !0, innerRadius: _ =
 						title: "",
 						children: /* @__PURE__ */ u("g", {
 							textAnchor: "middle",
-							fill: Ce,
+							fill: we,
 							pointerEvents: T ? "none" : "auto",
 							onClick: Q,
 							style: { cursor: z !== L && !T ? "pointer" : "default" },

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

@@ -64,6 +64,13 @@ export type SunburstChartProps = {
     valueDecimalSeparator?: string;
     /** Thousands separator for values (default: ',') */
     valueThousandsSeparator?: string;
+    /**
+     * Custom formatter for numeric values in tooltips. Overrides `valueDecimalCount`,
+     * `valueDecimalSeparator`, and `valueThousandsSeparator`.
+     * Example: `(v) => \`${v.toLocaleString('de-DE')} MB\``
+     * @since 3.22.0
+     */
+    valueFormatter?: (value: number) => string;
     /** Enable Ctrl+Scroll zoom — content outside `size` is clipped (default: false) */
     zoomable?: boolean;
     /** Drill-down/out transition duration in ms — set to 0 to disable animation (default: 750) */

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

@@ -1,108 +1,111 @@
-import { createTagSelectionStore as e } from "./TagSelection.store.js";
-import { TagSelectionAutocomplete as t } from "./TagSelectionAutocomplete.js";
-import { TagSelectionSelectedTags as n } from "./TagSelectionSelectedTags.js";
-import { DEFAULT_TAG_SELECTION_TRANSLATION as r } from "./TagSelection.types.js";
-import { createContext as i, useContext as a, useEffect as o, useMemo as s, useRef as c, useState as l } from "react";
-import { Box as u, Stack as d } from "@mui/material";
-import { jsx as f, jsxs as p } from "react/jsx-runtime";
-import { useStore as m } from "zustand";
+import { muiTsStateClasses as e } from "../../utils/muiTsClasses.js";
+import { tagSelectionClasses as t } from "./tagSelectionClasses.js";
+import { createTagSelectionStore as n } from "./TagSelection.store.js";
+import { TagSelectionAutocomplete as r } from "./TagSelectionAutocomplete.js";
+import { TagSelectionSelectedTags as i } from "./TagSelectionSelectedTags.js";
+import { DEFAULT_TAG_SELECTION_TRANSLATION as a } from "./TagSelection.types.js";
+import { createContext as o, useContext as s, useEffect as c, useMemo as l, useRef as u, useState as d } from "react";
+import { Box as f, Stack as p } from "@mui/material";
+import { jsx as m, jsxs as h } from "react/jsx-runtime";
+import { useStore as g } from "zustand";
 //#region src/components/tag-selection/TagSelection.tsx
-var h = i(null);
-function g(e) {
-	let t = a(h);
+var _ = o(null);
+function v(e) {
+	let t = s(_);
 	if (!t) throw Error("TagSelectionStoreContext is missing.");
-	return m(t, e);
+	return g(t, e);
 }
-function _({ tags: e, showSelectedTags: r = !0, showSelectedTagsLabel: i = !0, showAutoComplete: a = !0, inputSize: l = "medium", chipSize: m = "small", chipVariant: h = "filled", disabled: _ = !1, loading: v = !1, maxTags: y, allowCreate: b = !1, maxVisibleChips: x, popoverPlacement: S = "bottom", listboxMaxHeight: C, searchDebounceMs: w, serverSideFilter: T = !1, translation: E, onTagSelect: D, onTagDelete: O, onTagsChange: k, onSearchChange: A, onTagCreate: j }) {
-	let M = g((e) => e.tags), N = g((e) => e.searchValue), P = g((e) => e.setTags), F = g((e) => e.setSearchValue), I = g((e) => e.selectTag), L = g((e) => e.deleteTag), R = g((e) => e.addTag);
-	o(() => {
-		P(e);
-	}, [e, P]);
-	let z = s(() => M.filter((e) => e.selected).sort((e, t) => e.label.localeCompare(t.label)), [M]), B = s(() => M.filter((e) => !e.selected && !e.disabled).sort((e, t) => e.label.localeCompare(t.label)), [M]), V = y !== void 0 && z.length >= y, H = (e) => {
-		k && k(e.filter((e) => e.selected), e);
-	}, U = (e) => {
+function y({ tags: n, showSelectedTags: a = !0, showSelectedTagsLabel: o = !0, showAutoComplete: s = !0, inputSize: d = "medium", chipSize: g = "small", chipVariant: _ = "filled", disabled: y = !1, loading: b = !1, maxTags: x, allowCreate: S = !1, maxVisibleChips: C, popoverPlacement: w = "bottom", listboxMaxHeight: T, searchDebounceMs: E, serverSideFilter: D = !1, translation: O, onTagSelect: k, onTagDelete: A, onTagsChange: j, onSearchChange: M, onTagCreate: N }) {
+	let P = v((e) => e.tags), F = v((e) => e.searchValue), I = v((e) => e.setTags), L = v((e) => e.setSearchValue), R = v((e) => e.selectTag), z = v((e) => e.deleteTag), B = v((e) => e.addTag);
+	c(() => {
+		I(n);
+	}, [n, I]);
+	let V = l(() => P.filter((e) => e.selected).sort((e, t) => e.label.localeCompare(t.label)), [P]), H = l(() => P.filter((e) => !e.selected && !e.disabled).sort((e, t) => e.label.localeCompare(t.label)), [P]), U = x !== void 0 && V.length >= x, W = (e) => {
+		j && j(e.filter((e) => e.selected), e);
+	}, G = (e) => {
 		if (e.disabled || e.selected) return;
-		I(e.id);
-		let t = M.map((t) => t.id === e.id ? {
+		R(e.id);
+		let t = P.map((t) => t.id === e.id ? {
 			...t,
 			selected: !0
 		} : t), n = t.filter((e) => e.selected), r = t.find((t) => t.id === e.id);
-		r && D && D(r, n, t), H(t);
-	}, W = (e) => {
-		L(e.id);
-		let t = M.map((t) => t.id === e.id ? {
+		r && k && k(r, n, t), W(t);
+	}, K = (e) => {
+		z(e.id);
+		let t = P.map((t) => t.id === e.id ? {
 			...t,
 			selected: !1
 		} : t), n = t.filter((e) => e.selected), r = t.find((t) => t.id === e.id);
-		r && O && O(r, n, t), H(t);
-	}, G = c(null);
-	return o(() => () => {
-		G.current && clearTimeout(G.current);
-	}, []), /* @__PURE__ */ f(u, {
+		r && A && A(r, n, t), W(t);
+	}, q = u(null);
+	return c(() => () => {
+		q.current && clearTimeout(q.current);
+	}, []), /* @__PURE__ */ m(f, {
 		sx: { width: "100%" },
-		children: /* @__PURE__ */ p(d, { children: [r && /* @__PURE__ */ f(n, {
-			selectedTags: z,
-			translation: E,
-			onTagDelete: W,
-			showSelectedTagsLabel: i,
-			chipSize: m,
-			chipVariant: h,
-			disabled: _,
-			maxVisibleChips: x,
-			popoverPlacement: S
-		}), a && /* @__PURE__ */ f(t, {
-			availableTags: B,
-			searchValue: N,
-			translation: E,
+		className: [t.root, y && e.disabled].filter(Boolean).join(" "),
+		children: /* @__PURE__ */ h(p, { children: [a && /* @__PURE__ */ m(i, {
+			selectedTags: V,
+			translation: O,
+			onTagDelete: K,
+			showSelectedTagsLabel: o,
+			chipSize: g,
+			chipVariant: _,
+			disabled: y,
+			maxVisibleChips: C,
+			popoverPlacement: w
+		}), s && /* @__PURE__ */ m(r, {
+			availableTags: H,
+			searchValue: F,
+			translation: O,
 			onSearchChange: (e) => {
-				if (F(e), A) {
-					if (G.current &&= (clearTimeout(G.current), null), !w) {
-						A(e);
+				if (L(e), M) {
+					if (q.current &&= (clearTimeout(q.current), null), !E) {
+						M(e);
 						return;
 					}
-					G.current = setTimeout(() => {
-						A(e), G.current = null;
-					}, w);
+					q.current = setTimeout(() => {
+						M(e), q.current = null;
+					}, E);
 				}
 			},
-			onTagSelect: U,
+			onTagSelect: G,
 			onTagCreate: (e) => {
-				R(e), H([...M, e]), j && j(e);
+				B(e), W([...P, e]), N && N(e);
 			},
-			inputSize: l,
-			chipSize: m,
-			chipVariant: h,
-			disabled: _,
-			loading: v,
-			isMaxReached: V,
-			allowCreate: b,
-			listboxMaxHeight: C,
-			serverSideFilter: T
+			inputSize: d,
+			chipSize: g,
+			chipVariant: _,
+			disabled: y,
+			loading: b,
+			isMaxReached: U,
+			allowCreate: S,
+			listboxMaxHeight: T,
+			serverSideFilter: D
 		})] })
 	});
 }
-function v({ tags: t, showSelectedTags: n = !0, showSelectedTagsLabel: i = !0, showAutoComplete: a = !0, translation: o, inputSize: s = "medium", chipSize: c = "small", chipVariant: u = "filled", disabled: d = !1, loading: p = !1, maxTags: m, allowCreate: g = !1, maxVisibleChips: v, popoverPlacement: y = "bottom", listboxMaxHeight: b, searchDebounceMs: x, serverSideFilter: S = !1, onTagSelect: C, onTagDelete: w, onTagsChange: T, onSearchChange: E, onTagCreate: D }) {
+function b({ tags: e, showSelectedTags: t = !0, showSelectedTagsLabel: r = !0, showAutoComplete: i = !0, translation: o, inputSize: s = "medium", chipSize: c = "small", chipVariant: l = "filled", disabled: u = !1, loading: f = !1, maxTags: p, allowCreate: h = !1, maxVisibleChips: g, popoverPlacement: v = "bottom", listboxMaxHeight: b, searchDebounceMs: x, serverSideFilter: S = !1, onTagSelect: C, onTagDelete: w, onTagsChange: T, onSearchChange: E, onTagCreate: D }) {
 	let O = {
-		...r,
+		...a,
 		...o
-	}, [k] = l(() => e(t));
-	return /* @__PURE__ */ f(h.Provider, {
+	}, [k] = d(() => n(e));
+	return /* @__PURE__ */ m(_.Provider, {
 		value: k,
-		children: /* @__PURE__ */ f(_, {
-			tags: t,
-			showSelectedTags: n,
-			showSelectedTagsLabel: i,
-			showAutoComplete: a,
+		children: /* @__PURE__ */ m(y, {
+			tags: e,
+			showSelectedTags: t,
+			showSelectedTagsLabel: r,
+			showAutoComplete: i,
 			translation: O,
 			inputSize: s,
 			chipSize: c,
-			chipVariant: u,
-			disabled: d,
-			loading: p,
-			maxTags: m,
-			allowCreate: g,
-			maxVisibleChips: v,
-			popoverPlacement: y,
+			chipVariant: l,
+			disabled: u,
+			loading: f,
+			maxTags: p,
+			allowCreate: h,
+			maxVisibleChips: g,
+			popoverPlacement: v,
 			listboxMaxHeight: b,
 			searchDebounceMs: x,
 			serverSideFilter: S,
@@ -115,4 +118,4 @@ function v({ tags: t, showSelectedTags: n = !0, showSelectedTagsLabel: i = !0, s
 	});
 }
 //#endregion
-export { v as TagSelection };
+export { b as TagSelection };