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

package/README.de.md

@@ -408,6 +408,20 @@ Dieses Projekt folgt [Semantic Versioning](https://semver.org/). In der Praxis b
 
 ## Changelog
 
+### [3.11.2] — 2026-06-28
+
+**Behoben**
+- Eine tiefgreifende Bug-Prüfung über alle 11 Komponenten — veraltete Timer/Listener bei Unmount, `maxTags`-Umgehung, fehlendes `noData`-Rendering auf allen 5 D3-Charts, ChordChart valueIn/valueOut-Fehlzählung im undirected-Modus, HorizontalTreeChart RL/BT-Spiegelung außermittig bei flachen Bäumen, und mehr. Jeder Fix ist mit einem Regressionstest abgesichert. Vollständige Liste siehe [Changelog](#3112--2026-06-28).
+
+---
+
+### [3.11.1] — 2026-06-27
+
+**Behoben**
+- TagSelection: doppeltes Tag in der `WithCustomColorCreation`-Storybook-Story — ein Story-Bug, kein Komponenten-Bug. Siehe [Changelog](#3111--2026-06-27).
+
+---
+
 ### [3.11.0] — 2026-06-25
 
 **RadialTreeChart & HorizontalTreeChart**

package/README.md

@@ -408,6 +408,20 @@ This project follows [Semantic Versioning](https://semver.org/). In practice:
 
 ## Changelog
 
+### [3.11.2] — 2026-06-28
+
+**Fixed**
+- A deep bug audit across all 11 components — stale timers/listeners on unmount, `maxTags` bypass, missing `noData` rendering on all 5 D3 charts, `ChordChart` valueIn/valueOut miscount in undirected mode, `HorizontalTreeChart` RL/BT mirror off-center for shallow trees, and more. Every fix is backed by a regression test. See [Changelog](#3112--2026-06-28) for the full list.
+
+---
+
+### [3.11.1] — 2026-06-27
+
+**Fixed**
+- TagSelection: duplicate tag in the `WithCustomColorCreation` Storybook story — a story bug, not a component bug. See [Changelog](#3111--2026-06-27).
+
+---
+
 ### [3.11.0] — 2026-06-25
 
 **RadialTreeChart & HorizontalTreeChart**

package/dist/components/chord-chart/ChordChart.d.ts

@@ -1,5 +1,5 @@
 import { type ChordChartProps } from "./ChordChart.types";
-export declare function ChordChart({ data, size, innerRadius, ringThickness, padAngle, ribbonPadAngle, sortSubgroups, sortChords, chartColors, groupColorConfigs, showGroupLabels, labelOffset, ribbonOpacity, ribbonBlendMode, directed, valueDecimalCount, valueDecimalSeparator, valueThousandsSeparator, onGroupClick, onChordClick, zoomable, disabled, }: ChordChartProps): import("react/jsx-runtime").JSX.Element;
+export declare function ChordChart({ data, size, innerRadius, ringThickness, padAngle, ribbonPadAngle, sortSubgroups, sortChords, chartColors, groupColorConfigs, showGroupLabels, labelOffset, ribbonOpacity, ribbonBlendMode, directed, valueDecimalCount, valueDecimalSeparator, valueThousandsSeparator, onGroupClick, onChordClick, zoomable, disabled, translation, }: ChordChartProps): import("react/jsx-runtime").JSX.Element;
 export declare namespace ChordChart {
     var displayName: string;
 }

package/dist/components/chord-chart/ChordChart.js

@@ -1,18 +1,19 @@
-import { useCallback as e, useLayoutEffect as t, useMemo as n, useRef as r, useState as i } from "react";
-import { Box as a, Tooltip as o, Typography as s, useTheme as ee } from "@mui/material";
-import { jsx as c, jsxs as l } from "react/jsx-runtime";
-import * as u from "d3";
+import { DEFAULT_CHORD_CHART_TRANSLATION as e } from "./ChordChart.types.js";
+import { useCallback 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 ee } from "@mui/material";
+import { jsx as l, jsxs as u } from "react/jsx-runtime";
+import * as d from "d3";
 //#region src/components/chord-chart/ChordChart.tsx
-function d(e, t = 0, n = ".", r = ",") {
+function te(e, t = 0, n = ".", r = ",") {
 	if (!isFinite(e)) return String(e);
 	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 f({ name: e, valueOut: t, valueIn: n, fmt: r }) {
-	return /* @__PURE__ */ l(a, {
+function ne({ name: e, valueOut: t, valueIn: n, fmt: r }) {
+	return /* @__PURE__ */ u(o, {
 		sx: { py: .25 },
 		children: [
-			/* @__PURE__ */ c(s, {
+			/* @__PURE__ */ l(c, {
 				variant: "caption",
 				sx: {
 					fontWeight: "bold",
@@ -20,7 +21,7 @@ function f({ name: e, valueOut: t, valueIn: n, fmt: r }) {
 				},
 				children: e
 			}),
-			/* @__PURE__ */ l(s, {
+			/* @__PURE__ */ u(c, {
 				variant: "caption",
 				sx: {
 					display: "block",
@@ -28,7 +29,7 @@ function f({ name: e, valueOut: t, valueIn: n, fmt: r }) {
 				},
 				children: [r(t), " outgoing →"]
 			}),
-			/* @__PURE__ */ l(s, {
+			/* @__PURE__ */ u(c, {
 				variant: "caption",
 				sx: {
 					display: "block",
@@ -39,11 +40,11 @@ function f({ name: e, valueOut: t, valueIn: n, fmt: r }) {
 		]
 	});
 }
-function te({ sourceName: e, targetName: t, sourceValue: n, targetValue: r, directed: i, fmt: o }) {
-	return /* @__PURE__ */ l(a, {
+function f({ sourceName: e, targetName: t, sourceValue: n, targetValue: r, directed: i, fmt: a }) {
+	return /* @__PURE__ */ u(o, {
 		sx: { py: .25 },
 		children: [
-			/* @__PURE__ */ l(s, {
+			/* @__PURE__ */ u(c, {
 				variant: "caption",
 				sx: {
 					fontWeight: "bold",
@@ -55,15 +56,15 @@ function te({ sourceName: e, targetName: t, sourceValue: n, targetValue: r, dire
 					t
 				]
 			}),
-			/* @__PURE__ */ c(s, {
+			/* @__PURE__ */ l(c, {
 				variant: "caption",
 				sx: {
 					display: "block",
 					opacity: .85
 				},
-				children: o(n)
+				children: a(n)
 			}),
-			i && r > 0 && r !== n && /* @__PURE__ */ l(s, {
+			i && r > 0 && r !== n && /* @__PURE__ */ u(c, {
 				variant: "caption",
 				sx: {
 					display: "block",
@@ -75,27 +76,30 @@ function te({ sourceName: e, targetName: t, sourceValue: n, targetValue: r, dire
 					" → ",
 					e,
 					": ",
-					o(r)
+					a(r)
 				]
 			})
 		]
 	});
 }
-function p({ data: s, size: p = 500, innerRadius: m, ringThickness: h = 20, padAngle: ne, ribbonPadAngle: re, sortSubgroups: g = "descending", sortChords: _ = "descending", chartColors: v, groupColorConfigs: y, showGroupLabels: b = !0, labelOffset: ie = 8, ribbonOpacity: x = .75, ribbonBlendMode: ae, directed: S = !0, valueDecimalCount: C = 0, valueDecimalSeparator: w = ".", valueThousandsSeparator: T = ",", onGroupClick: E, onChordClick: D, zoomable: O = !1, disabled: k = !1 }) {
-	let A = ee(), j = ae ?? (A.palette.mode === "dark" ? "normal" : "multiply"), oe = [
-		A.palette.primary.main,
-		A.palette.secondary.main,
-		A.palette.error.main,
-		A.palette.warning.main,
-		A.palette.success.main,
-		A.palette.info.main
-	], M = v && v.length > 0 ? v : oe, se = m ?? Math.min(p, p) * .5 - 90, N = Math.max(10, se), P = N + Math.max(1, h), F = ne ?? 10 / N, I = re ?? 1 / N, L = e((e) => d(e, C, w, T), [
-		C,
-		w,
-		T
-	]), { names: R, matrix: z } = n(() => {
-		let e = u.sort(u.union(s.map((e) => e.source), s.map((e) => e.target))), t = new Map(e.map((e, t) => [e, t])), n = Array.from({ length: e.length }, () => Array(e.length).fill(0));
-		for (let { source: e, target: r, value: i } of s) {
+function p({ data: c, size: p = 500, innerRadius: m, ringThickness: h = 20, padAngle: re, ribbonPadAngle: g, sortSubgroups: _ = "descending", sortChords: v = "descending", chartColors: y, groupColorConfigs: b, showGroupLabels: ie = !0, labelOffset: x = 8, ribbonOpacity: S = .75, ribbonBlendMode: C, directed: w = !0, valueDecimalCount: T = 0, valueDecimalSeparator: E = ".", valueThousandsSeparator: D = ",", onGroupClick: O, onChordClick: k, zoomable: A = !1, disabled: j = !1, translation: ae }) {
+	let M = ee(), oe = {
+		...e,
+		...ae
+	}, se = c.length === 0, ce = C ?? (M.palette.mode === "dark" ? "normal" : "multiply"), le = [
+		M.palette.primary.main,
+		M.palette.secondary.main,
+		M.palette.error.main,
+		M.palette.warning.main,
+		M.palette.success.main,
+		M.palette.info.main
+	], N = y && y.length > 0 ? y : le, ue = m ?? Math.min(p, p) * .5 - 90, P = Math.max(10, ue), F = P + Math.max(1, h), I = re ?? 10 / P, L = g ?? 1 / P, R = t((e) => te(e, T, E, D), [
+		T,
+		E,
+		D
+	]), { names: z, matrix: B } = r(() => {
+		let e = d.sort(d.union(c.map((e) => e.source), c.map((e) => e.target))), t = new Map(e.map((e, t) => [e, t])), n = Array.from({ length: e.length }, () => Array(e.length).fill(0));
+		for (let { source: e, target: r, value: i } of c) {
 			let a = t.get(e), o = t.get(r);
 			a == null || o == null || (n[a][o] += i);
 		}
@@ -103,40 +107,40 @@ function p({ data: s, size: p = 500, innerRadius: m, ringThickness: h = 20, padA
 			names: e,
 			matrix: n
 		};
-	}, [s]), B = n(() => {
-		let e = (S ? u.chordDirected() : u.chord()).padAngle(F);
-		return g === "ascending" && (e = e.sortSubgroups(u.ascending)), g === "descending" && (e = e.sortSubgroups(u.descending)), _ === "ascending" && (e = e.sortChords(u.ascending)), _ === "descending" && (e = e.sortChords(u.descending)), e(z);
+	}, [c]), V = r(() => {
+		let e = (w ? d.chordDirected() : d.chord()).padAngle(I);
+		return _ === "ascending" && (e = e.sortSubgroups(d.ascending)), _ === "descending" && (e = e.sortSubgroups(d.descending)), v === "ascending" && (e = e.sortChords(d.ascending)), v === "descending" && (e = e.sortChords(d.descending)), e(B);
 	}, [
-		z,
-		F,
-		S,
-		g,
-		_
-	]), V = n(() => u.arc().innerRadius(N).outerRadius(P), [N, P]), H = n(() => (S ? u.ribbonArrow() : u.ribbon()).radius(N - 1).padAngle(I), [
-		N,
+		B,
 		I,
-		S
-	]), U = e((e) => H({
+		w,
+		_,
+		v
+	]), H = r(() => d.arc().innerRadius(P).outerRadius(F), [P, F]), U = r(() => (w ? d.ribbonArrow() : d.ribbon()).radius(P - 1).padAngle(L), [
+		P,
+		L,
+		w
+	]), de = t((e) => U({
 		source: {
 			startAngle: e.source.startAngle,
 			endAngle: e.source.endAngle,
-			radius: N - 1
+			radius: P - 1
 		},
 		target: {
 			startAngle: e.target.startAngle,
 			endAngle: e.target.endAngle,
-			radius: N - 1
+			radius: P - 1
 		}
-	}) ?? "", [H, N]), W = n(() => u.scaleOrdinal().domain(u.range(R.length)).range(M.length >= R.length ? M : [...Array(Math.ceil(R.length / M.length))].flatMap(() => M).slice(0, R.length)), [M, R.length]), G = e((e) => y?.[R[e]]?.fill ?? W(e), [
-		y,
-		R,
+	}) ?? "", [U, P]), W = r(() => d.scaleOrdinal().domain(d.range(z.length)).range(N.length >= z.length ? N : [...Array(Math.ceil(z.length / N.length))].flatMap(() => N).slice(0, z.length)), [N, z.length]), G = t((e) => b?.[z[e]]?.fill ?? W(e), [
+		b,
+		z,
 		W
-	]), K = r(null), [q, J] = i(`-${p / 2} -${p / 2} ${p} ${p}`), [Y, X] = i(1), ce = n(() => {
+	]), K = i(null), [q, J] = a(`-${p / 2} -${p / 2} ${p} ${p}`), [Y, X] = a(1), fe = r(() => {
 		if (Y === 1) return q;
 		let [e, t, n, r] = q.split(" ").map(Number), i = n / Y, a = r / Y;
 		return `${e + (n - i) / 2} ${t + (r - a) / 2} ${i} ${a}`;
 	}, [q, Y]);
-	t(() => {
+	n(() => {
 		let e = K.current;
 		if (!e) return;
 		let t = requestAnimationFrame(() => {
@@ -150,131 +154,145 @@ function p({ data: s, size: p = 500, innerRadius: m, ringThickness: h = 20, padA
 		return () => cancelAnimationFrame(t);
 	}, [
 		p,
-		N,
 		P,
-		R.length,
-		B
+		F,
+		z.length,
+		V
 	]);
-	let [Z, Q] = i(null), le = e((e) => ({
-		name: R[e.index],
+	let [Z, Q] = a(null), pe = t((e) => ({
+		name: z[e.index],
 		index: e.index,
-		valueOut: u.sum(B, (t) => t.source.index === e.index ? t.source.value : 0),
-		valueIn: u.sum(B, (t) => t.target.index === e.index ? t.source.value : 0)
-	}), [R, B]), ue = e((e) => ({
+		valueOut: d.sum(V, (t) => (t.source.index === e.index ? t.source.value : 0) + (!w && t.target.index === e.index ? t.target.value : 0)),
+		valueIn: d.sum(V, (t) => (t.target.index === e.index ? t.source.value : 0) + (!w && t.source.index === e.index ? t.target.value : 0))
+	}), [
+		z,
+		V,
+		w
+	]), me = t((e) => ({
 		source: {
-			name: R[e.source.index],
+			name: z[e.source.index],
 			index: e.source.index,
 			value: e.source.value
 		},
 		target: {
-			name: R[e.target.index],
+			name: z[e.target.index],
 			index: e.target.index,
 			value: e.target.value
 		}
-	}), [R]), de = (e) => {
+	}), [z]), he = (e) => {
 		let t = (e.startAngle + e.endAngle) / 2, n = t * 180 / Math.PI - 90, r = t > Math.PI ? " rotate(180)" : "";
-		return `rotate(${n}) translate(${P + ie})${r}`;
-	}, fe = (e) => (e.startAngle + e.endAngle) / 2 > Math.PI ? "end" : "start", pe = e((e) => {
-		if (!O || k || !e.ctrlKey) return;
+		return `rotate(${n}) translate(${F + x})${r}`;
+	}, ge = (e) => (e.startAngle + e.endAngle) / 2 > Math.PI ? "end" : "start", _e = t((e) => {
+		if (!A || j || !e.ctrlKey) return;
 		e.preventDefault();
 		let t = e.deltaY < 0 ? 1.15 : 1 / 1.15;
 		X((e) => Math.max(.25, Math.min(8, e * t)));
-	}, [O, k]);
-	t(() => {
-		if (!O) return;
+	}, [A, j]);
+	n(() => {
+		if (!A) return;
 		let e = (e) => {
 			e.key === "Escape" && X(1);
 		};
 		return window.addEventListener("keydown", e), () => window.removeEventListener("keydown", e);
-	}, [O]);
+	}, [A]);
 	let $ = {
 		followCursor: !0,
 		enterDelay: 50,
 		enterNextDelay: 0,
-		disableHoverListener: k,
+		disableHoverListener: j,
 		slotProps: { tooltip: { sx: { maxWidth: 240 } } }
-	}, me = A.palette.text.primary, he = A.typography.fontFamily;
-	return /* @__PURE__ */ c(a, {
+	}, ve = M.palette.text.primary, ye = M.typography.fontFamily;
+	return /* @__PURE__ */ l(o, {
 		sx: {
 			display: "inline-flex",
-			opacity: k ? .5 : 1,
-			cursor: k ? "not-allowed" : "default",
+			opacity: j ? .5 : 1,
+			cursor: j ? "not-allowed" : "default",
 			userSelect: "none"
 		},
-		children: /* @__PURE__ */ c("svg", {
+		children: /* @__PURE__ */ l("svg", {
 			width: p,
 			height: p,
-			viewBox: ce,
-			onWheel: pe,
+			viewBox: fe,
+			onWheel: _e,
 			style: {
-				fontFamily: he ?? "sans-serif",
-				overflow: O && Y > 1 ? "hidden" : "visible"
+				fontFamily: ye ?? "sans-serif",
+				overflow: A && Y > 1 ? "hidden" : "visible"
 			},
 			role: "img",
 			"aria-label": "Chord chart",
-			children: /* @__PURE__ */ l("g", {
+			children: /* @__PURE__ */ u("g", {
 				ref: K,
-				children: [/* @__PURE__ */ c("g", { children: B.groups.map((e) => {
-					let t = le(e), n = Z === e.index, r = Z !== null && !n;
-					return /* @__PURE__ */ c(o, {
-						...$,
-						title: /* @__PURE__ */ c(f, {
-							name: t.name,
-							valueOut: t.valueOut,
-							valueIn: t.valueIn,
-							fmt: L
-						}),
-						children: /* @__PURE__ */ l("g", {
-							style: { cursor: k ? "not-allowed" : "pointer" },
-							onMouseEnter: () => !k && Q(e.index),
-							onMouseLeave: () => Q(null),
-							onClick: (e) => !k && E?.(t, e),
-							children: [/* @__PURE__ */ c("path", {
-								d: V(e) || "",
-								fill: G(e.index),
-								stroke: A.palette.divider,
-								opacity: r ? .35 : 1,
-								style: { transition: "opacity 0.15s" }
-							}), b && /* @__PURE__ */ c("text", {
-								dy: "0.35em",
-								fontSize: 11,
-								fill: me,
-								transform: de(e),
-								textAnchor: fe(e),
-								pointerEvents: "none",
-								children: R[e.index]
-							})]
-						})
-					}, `grp-tt-${e.index}`);
-				}) }), /* @__PURE__ */ c("g", {
-					fillOpacity: x,
-					style: { mixBlendMode: j },
-					children: B.map((e, t) => {
-						let n = ue(e), r = Z === null || e.source.index === Z || e.target.index === Z;
-						return /* @__PURE__ */ c(o, {
+				children: [
+					se && /* @__PURE__ */ l("text", {
+						textAnchor: "middle",
+						dy: "0.35em",
+						fontSize: 13,
+						fill: M.palette.text.secondary,
+						children: oe.noData
+					}),
+					/* @__PURE__ */ l("g", { children: V.groups.map((e) => {
+						let t = pe(e), n = Z === e.index, r = Z !== null && !n;
+						return /* @__PURE__ */ l(s, {
 							...$,
-							title: /* @__PURE__ */ c(te, {
-								sourceName: n.source.name,
-								targetName: n.target.name,
-								sourceValue: n.source.value,
-								targetValue: n.target.value,
-								directed: S,
-								fmt: L
+							title: /* @__PURE__ */ l(ne, {
+								name: t.name,
+								valueOut: t.valueOut,
+								valueIn: t.valueIn,
+								fmt: R
 							}),
-							children: /* @__PURE__ */ c("path", {
-								d: U(e),
-								fill: G(e.target.index),
-								stroke: "none",
-								opacity: r ? 1 : .12,
-								style: {
-									cursor: k ? "not-allowed" : "pointer",
-									transition: "opacity 0.15s"
-								},
-								onClick: (e) => !k && D?.(n, e)
+							children: /* @__PURE__ */ u("g", {
+								style: { cursor: j ? "not-allowed" : "pointer" },
+								onMouseEnter: () => !j && Q(e.index),
+								onMouseLeave: () => Q(null),
+								onClick: (e) => !j && O?.(t, e),
+								children: [/* @__PURE__ */ l("path", {
+									d: H(e) || "",
+									fill: G(e.index),
+									stroke: M.palette.divider,
+									opacity: r ? .35 : 1,
+									style: { transition: "opacity 0.15s" }
+								}), ie && /* @__PURE__ */ l("text", {
+									dy: "0.35em",
+									fontSize: 11,
+									fill: ve,
+									transform: he(e),
+									textAnchor: ge(e),
+									pointerEvents: "none",
+									children: z[e.index]
+								})]
 							})
-						}, `chord-tt-${t}`);
+						}, `grp-tt-${e.index}`);
+					}) }),
+					/* @__PURE__ */ l("g", {
+						fillOpacity: S,
+						style: { mixBlendMode: ce },
+						children: V.map((e, t) => {
+							let n = me(e), r = Z === null || e.source.index === Z || e.target.index === Z;
+							return /* @__PURE__ */ l(s, {
+								...$,
+								title: /* @__PURE__ */ l(f, {
+									sourceName: n.source.name,
+									targetName: n.target.name,
+									sourceValue: n.source.value,
+									targetValue: n.target.value,
+									directed: w,
+									fmt: R
+								}),
+								children: /* @__PURE__ */ l("path", {
+									d: de(e),
+									fill: G(e.target.index),
+									stroke: "none",
+									opacity: r ? 1 : .12,
+									style: {
+										cursor: j ? "not-allowed" : "pointer",
+										transition: "opacity 0.15s"
+									},
+									onClick: (e) => !j && k?.(n, e)
+								})
+							}, `chord-tt-${t}`);
+						})
 					})
-				})]
+				]
 			})
 		})
 	});

package/dist/components/chord-chart/ChordChart.types.d.ts

@@ -68,7 +68,7 @@ export type ChordChartProps = {
     groupColorConfigs?: ChordGroupColorConfigs;
     /** Show group name labels outside the arc ring (default: true) */
     showGroupLabels?: boolean;
-    /** Gap between arc outer edge and label text in px (default: 6) */
+    /** Gap between arc outer edge and label text in px (default: 8) */
     labelOffset?: number;
     /** Opacity of ribbons — 0 to 1 (default: 0.75) */
     ribbonOpacity?: number;

package/dist/components/circle-packing-chart/CirclePackingChart.d.ts

@@ -1,5 +1,5 @@
 import { type CirclePackingChartProps } from "./CirclePackingChart.types";
-export declare function CirclePackingChart({ data, size, padding, sortBy, showLabels, showAllLabels, labelFontSize, innerLabelFontSize, labelColor, chartColors, depthColorStart, depthColorEnd, background, duration, zoomable, disabled, onCircleClick, onZoomChange, }: CirclePackingChartProps): import("react/jsx-runtime").JSX.Element;
+export declare function CirclePackingChart({ data, size, padding, sortBy, showLabels, showAllLabels, labelFontSize, innerLabelFontSize, labelColor, chartColors, depthColorStart, depthColorEnd, background, duration, zoomable, disabled, onCircleClick, onZoomChange, translation, }: CirclePackingChartProps): import("react/jsx-runtime").JSX.Element;
 export declare namespace CirclePackingChart {
     var displayName: string;
 }