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

package/README.de.md

@@ -483,6 +483,23 @@ Dieses Projekt folgt [Semantic Versioning](https://semver.org/):
 
 ## Changelog
 
+### [3.27.1] — 2026-07-14
+
+**Behoben**
+- `GanttChart`: Das linke Task-Panel kann nicht mehr so schmal gezogen werden, dass Spalten-Header überlappen oder Inhalte überlaufen. Der Trenner erzwingt nun eine spaltenbasierte Mindestbreite (Status + Aktionen + optionaler Assignee + 80 px für den Namen). Zeilen- und Header-Container schneiden Inhalte sauber mit `overflow: hidden` ab. Keine API-Änderung.
+
+---
+
+### [3.27.0] — 2026-07-14
+
+**Hinzugefügt**
+- Hover-Callbacks für alle 6 D3-Charts (`onSegmentHover`, `onGroupHover`, `onChordHover`, `onNodeHover`, `onCircleHover`, `onBarHover`) — feuern mit typisiertem Info-Objekt bei `mouseenter`, `null` bei `mouseleave`. Ermöglicht Linked-View-Muster. Alle Props optional, vollständig abwärtskompatibel.
+
+**Behoben**
+- `GanttChart`: `showAssigneeColumn={true}` lässt die Name-Spalte nicht mehr auf ~24 px zusammenfallen. Die initiale Panel-Breite addiert nun automatisch `ASSIGNEE_COL_WIDTH` (110 px) wenn die Spalte aktiviert ist.
+
+---
+
 ### [3.26.1] — 2026-07-13
 
 **Behoben**

package/README.md

@@ -483,6 +483,23 @@ This project follows [Semantic Versioning](https://semver.org/):
 
 ## Changelog
 
+### [3.27.1] — 2026-07-14
+
+**Fixed**
+- `GanttChart`: The left task panel can no longer be dragged so narrow that column headers overlap or content overflows. The divider now enforces a column-aware minimum width (Status + Actions + optional Assignee + 80 px for the name). Row and header containers clip cleanly with `overflow: hidden`. No API change.
+
+---
+
+### [3.27.0] — 2026-07-14
+
+**Added**
+- Hover callbacks for all 6 D3 charts (`onSegmentHover`, `onGroupHover`, `onChordHover`, `onNodeHover`, `onCircleHover`, `onBarHover`) — fire with typed info on `mouseenter`, `null` on `mouseleave`. Enables linked-view patterns. All props optional, fully backwards compatible.
+
+**Fixed**
+- `GanttChart`: `showAssigneeColumn={true}` no longer collapses the name column to ~24 px. Initial panel width now auto-adds `ASSIGNEE_COL_WIDTH` (110 px) when the column is enabled.
+
+---
+
 ### [3.26.1] — 2026-07-13
 
 **Fixed**

package/dist/components/gantt-chart/GanttChart.js

@@ -4,39 +4,39 @@ import { DEFAULT_GANTT_TRANSLATIONS as r } from "./GanttChart.types.js";
 import { GanttTaskPanel as i } from "./GanttTaskPanel.js";
 import { GanttTimeline as a } from "./GanttTimeline.js";
 import { GanttToolbar as o } from "./GanttToolbar.js";
-import { createContext as s, useCallback as c, useContext as l, useEffect as u, useMemo as d, useRef as f, useState as p } from "react";
-import { Box as m } from "@mui/material";
-import { jsx as h, jsxs as g } from "react/jsx-runtime";
-import { useStore as _ } from "zustand";
+import { createContext as s, useCallback as c, useContext as l, useEffect as u, useMemo as d, useRef as f, useState as ee } from "react";
+import { Box 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/gantt-chart/GanttChart.tsx
-var v = s(null);
-function y(e) {
-	let t = l(v);
+var _ = s(null);
+function v(e) {
+	let t = l(_);
 	if (!t) throw Error("GanttChartStoreContext is missing.");
-	return _(t, e);
+	return g(t, e);
 }
-function b() {
-	let e = l(v);
+function y() {
+	let e = l(_);
 	if (!e) throw Error("GanttChartStoreContext is missing.");
 	return e;
 }
-var x = s(r);
-function S() {
-	return l(x);
+var b = s(r);
+function x() {
+	return l(b);
 }
-var C = s({});
-function w() {
-	return l(C);
+var S = s({});
+function C() {
+	return l(S);
 }
-function T(e, t) {
+function w(e, t) {
 	return e === void 0 ? t : e === "auto" ? "100%" : typeof e == "string" && /^\d+$/.test(e) ? Number(e) : e;
 }
-var E = [
+var T = [
 	"days",
 	"weeks",
 	"months",
 	"quarters"
-], D = {
+], E = {
 	showScaleDays: !0,
 	showScaleWeeks: !0,
 	showScaleMonths: !0,
@@ -49,12 +49,12 @@ var E = [
 	showExportCSV: !1,
 	showAssigneeFilter: !1
 };
-function ee({ tasks: t, onTaskClick: n, onMilestoneClick: r, onAddTask: s, onEditTask: l, onDeleteTask: _, onStatusChange: v, onTasksChange: x, enableBuiltinDialogs: S = !0, onTaskCreated: C, onTaskUpdated: w, onTaskDeleted: ee, showToolbar: O = !0, toolbarConfig: k, height: A, width: te, minPanelWidth: j = 200, maxPanelWidth: M = 600, zoomable: N = !1, draggable: P = !1, resizable: F = !1, inlineEdit: I = !1, progressDraggable: ne = !1, showCriticalPath: re = !1, virtualizeRows: L = !1, showAssigneeColumn: R = !1, onExportCSV: z, onDragStart: B, onTaskMoved: V, onTaskResized: H }) {
-	let U = T(A, 400), W = d(() => ({
-		...D,
+function D({ tasks: t, onTaskClick: n, onMilestoneClick: r, onAddTask: s, onEditTask: l, onDeleteTask: g, onStatusChange: _, onTasksChange: b, enableBuiltinDialogs: x = !0, onTaskCreated: S, onTaskUpdated: C, onTaskDeleted: D, showToolbar: O = !0, toolbarConfig: k, height: A, width: j, minPanelWidth: M = 200, maxPanelWidth: N = 600, zoomable: P = !1, draggable: F = !1, resizable: te = !1, inlineEdit: ne = !1, progressDraggable: re = !1, showCriticalPath: ie = !1, virtualizeRows: I = !1, showAssigneeColumn: L = !1, onExportCSV: R, onDragStart: z, onTaskMoved: B, onTaskResized: V }) {
+	let H = w(A, 400), U = d(() => ({
+		...E,
 		...k
-	}), [k]), G = T(te, "100%"), K = y((e) => e.setTasks), q = y((e) => e.timeScale), J = y((e) => e.setTimeScale), Y = y((e) => e.timelineRange), X = f(null), Z = f(null), Q = f(!1), [$, ie] = p(320 + (R ? 110 : 0)), ae = b(), oe = c(() => {
-		let e = ae.getState().tasks, t = [[
+	}), [k]), W = w(j, "100%"), G = v((e) => e.setTasks), K = v((e) => e.timeScale), q = v((e) => e.setTimeScale), J = v((e) => e.timelineRange), Y = f(null), X = f(null), Z = f(!1), [Q, ae] = ee(320 + (L ? 110 : 0)), oe = Math.max(M, 90 + (x || s || l || g ? 96 : 0) + (L ? 110 : 0) + 80), $ = y(), se = c(() => {
+		let e = $.getState().tasks, t = [[
 			"id",
 			"name",
 			"status",
@@ -79,93 +79,93 @@ function ee({ tasks: t, onTaskClick: n, onMilestoneClick: r, onAddTask: s, onEdi
 			(e.dependencies ?? []).join(";"),
 			e.color ?? ""
 		].join(","))].join("\n");
-		if (z) z(t, e);
+		if (R) R(t, e);
 		else {
 			let e = new Blob([t], { type: "text/csv;charset=utf-8;" }), n = URL.createObjectURL(e), r = document.createElement("a");
 			r.href = n, r.download = "gantt-tasks.csv", r.click(), URL.revokeObjectURL(n);
 		}
-	}, [ae, z]);
+	}, [$, R]);
 	u(() => {
-		K(t);
-	}, [t, K]);
-	let se = () => {
-		Q.current ||= (Q.current = !0, Z.current && X.current && (Z.current.scrollTop = X.current.scrollTop), !1);
-	}, ce = () => {
-		Q.current ||= (Q.current = !0, X.current && Z.current && (X.current.scrollTop = Z.current.scrollTop), !1);
-	}, le = c(() => {
-		if (!Z.current) return;
-		let t = e(Y, q), n = Date.now(), r = t.start.getTime(), i = t.end.getTime(), a = (n - r) / (i - r) * Z.current.scrollWidth;
-		Z.current.scrollLeft = Math.max(0, a - Z.current.clientWidth / 2);
-	}, [Y, q]);
+		G(t);
+	}, [t, G]);
+	let ce = () => {
+		Z.current ||= (Z.current = !0, X.current && Y.current && (X.current.scrollTop = Y.current.scrollTop), !1);
+	}, le = () => {
+		Z.current ||= (Z.current = !0, Y.current && X.current && (Y.current.scrollTop = X.current.scrollTop), !1);
+	}, ue = c(() => {
+		if (!X.current) return;
+		let t = e(J, K), n = Date.now(), r = t.start.getTime(), i = t.end.getTime(), a = (n - r) / (i - r) * X.current.scrollWidth;
+		X.current.scrollLeft = Math.max(0, a - X.current.clientWidth / 2);
+	}, [J, K]);
 	u(() => {
-		if (!N || !Z.current) return;
-		let e = Z.current, t = (e) => {
+		if (!P || !X.current) return;
+		let e = X.current, t = (e) => {
 			if (!e.ctrlKey) return;
 			e.preventDefault();
-			let t = E.indexOf(q);
-			e.deltaY < 0 && t > 0 ? J(E[t - 1]) : e.deltaY > 0 && t < E.length - 1 && J(E[t + 1]);
+			let t = T.indexOf(K);
+			e.deltaY < 0 && t > 0 ? q(T[t - 1]) : e.deltaY > 0 && t < T.length - 1 && q(T[t + 1]);
 		};
 		return e.addEventListener("wheel", t, { passive: !1 }), () => e.removeEventListener("wheel", t);
 	}, [
-		N,
-		q,
-		J
+		P,
+		K,
+		q
 	]);
-	let ue = c((e) => {
+	let de = c((e) => {
 		e.preventDefault();
-		let t = e.clientX, n = $, r = (e) => {
+		let t = e.clientX, n = Q, r = (e) => {
 			let r = e.clientX - t;
-			ie(Math.max(j, Math.min(M, n + r)));
+			ae(Math.max(oe, Math.min(N, n + r)));
 		}, i = () => {
 			document.removeEventListener("mousemove", r), document.removeEventListener("mouseup", i);
 		};
 		document.addEventListener("mousemove", r), document.addEventListener("mouseup", i);
 	}, [
-		$,
-		j,
-		M
+		Q,
+		oe,
+		N
 	]);
-	return /* @__PURE__ */ g(m, {
+	return /* @__PURE__ */ h(p, {
 		sx: {
 			display: "flex",
 			flexDirection: "column",
-			height: U,
-			width: G,
+			height: H,
+			width: W,
 			border: "1px solid",
 			borderColor: "divider",
 			borderRadius: 1,
 			overflow: "hidden"
 		},
-		children: [O && /* @__PURE__ */ h(o, {
-			onScrollToToday: le,
-			config: W,
-			onExportCSV: W.showExportCSV ? oe : void 0
-		}), /* @__PURE__ */ g(m, {
+		children: [O && /* @__PURE__ */ m(o, {
+			onScrollToToday: ue,
+			config: U,
+			onExportCSV: U.showExportCSV ? se : void 0
+		}), /* @__PURE__ */ h(p, {
 			sx: {
 				display: "flex",
 				flex: 1,
 				overflow: "hidden"
 			},
 			children: [
-				/* @__PURE__ */ h(i, {
-					scrollRef: X,
-					onScroll: se,
-					panelWidth: $,
+				/* @__PURE__ */ m(i, {
+					scrollRef: Y,
+					onScroll: ce,
+					panelWidth: Q,
 					onTaskClick: n,
 					onAddTask: s,
 					onEditTask: l,
-					onDeleteTask: _,
-					onStatusChange: v,
-					onTasksChange: x,
-					enableBuiltinDialogs: S,
-					onTaskCreated: C,
-					onTaskUpdated: w,
-					onTaskDeleted: ee,
-					inlineEdit: I,
-					virtualizeRows: L,
-					showAssigneeColumn: R
+					onDeleteTask: g,
+					onStatusChange: _,
+					onTasksChange: b,
+					enableBuiltinDialogs: x,
+					onTaskCreated: S,
+					onTaskUpdated: C,
+					onTaskDeleted: D,
+					inlineEdit: ne,
+					virtualizeRows: I,
+					showAssigneeColumn: L
 				}),
-				/* @__PURE__ */ h(m, {
+				/* @__PURE__ */ m(p, {
 					"data-testid": "gantt-panel-divider",
 					sx: {
 						width: 4,
@@ -174,88 +174,88 @@ function ee({ tasks: t, onTaskClick: n, onMilestoneClick: r, onAddTask: s, onEdi
 						cursor: "col-resize",
 						"&:hover": { bgcolor: "action.hover" }
 					},
-					onMouseDown: ue
+					onMouseDown: de
 				}),
-				/* @__PURE__ */ h(a, {
-					scrollRef: Z,
-					onScroll: ce,
+				/* @__PURE__ */ m(a, {
+					scrollRef: X,
+					onScroll: le,
 					onTaskClick: n,
 					onMilestoneClick: r,
-					draggable: P,
-					resizable: F,
-					progressDraggable: ne,
-					showCriticalPath: re,
-					virtualizeRows: L,
-					onDragStart: B,
-					onTaskMoved: V,
-					onTaskResized: H,
-					onTasksChange: x,
-					onStatusChange: v
+					draggable: F,
+					resizable: te,
+					progressDraggable: re,
+					showCriticalPath: ie,
+					virtualizeRows: I,
+					onDragStart: z,
+					onTaskMoved: B,
+					onTaskResized: V,
+					onTasksChange: b,
+					onStatusChange: _
 				})
 			]
 		})]
 	});
 }
-function O({ tasks: e, timeScale: i = "months", initialExpandAll: a = !1, showToolbar: o = !0, defaultRangeStart: s, defaultRangeEnd: c, translations: l, enableBuiltinDialogs: u = !0, toolbarConfig: f, zoomable: m = !1, draggable: g = !1, resizable: _ = !1, inlineEdit: y = !1, progressDraggable: b = !1, showCriticalPath: S = !1, virtualizeRows: w = !1, showAssigneeColumn: T = !1, cascadeDependencies: E = !1, statusColors: D, ganttTheme: O, onExportCSV: k, onDragStart: A, onTaskClick: te, onMilestoneClick: j, onAddTask: M, onEditTask: N, onDeleteTask: P, onStatusChange: F, onTasksChange: I, onTaskMoved: ne, onTaskResized: re, onTaskCreated: L, onTaskUpdated: R, onTaskDeleted: z, height: B, width: V, minPanelWidth: H, maxPanelWidth: U }) {
-	let W = d(() => ({
+function O({ tasks: e, timeScale: i = "months", initialExpandAll: a = !1, showToolbar: o = !0, defaultRangeStart: s, defaultRangeEnd: c, translations: l, enableBuiltinDialogs: u = !0, toolbarConfig: f, zoomable: p = !1, draggable: h = !1, resizable: g = !1, inlineEdit: v = !1, progressDraggable: y = !1, showCriticalPath: x = !1, virtualizeRows: C = !1, showAssigneeColumn: w = !1, cascadeDependencies: T = !1, statusColors: E, ganttTheme: O, onExportCSV: k, onDragStart: A, onTaskClick: j, onMilestoneClick: M, onAddTask: N, onEditTask: P, onDeleteTask: F, onStatusChange: te, onTasksChange: ne, onTaskMoved: re, onTaskResized: ie, onTaskCreated: I, onTaskUpdated: L, onTaskDeleted: R, height: z, width: B, minPanelWidth: V, maxPanelWidth: H }) {
+	let U = d(() => ({
 		...r,
 		...l
-	}), [l]), [G] = p(() => {
-		if (!(s !== void 0 || c !== void 0)) return n(e, i, a, void 0, E);
+	}), [l]), [W] = ee(() => {
+		if (!(s !== void 0 || c !== void 0)) return n(e, i, a, void 0, T);
 		let r = t(e);
 		return n(e, i, a, {
 			start: s ?? r.start,
 			end: c ?? r.end
-		}, E);
-	}), K = d(() => ({
+		}, T);
+	}), G = d(() => ({
 		...O,
 		statusColors: {
-			...D,
+			...E,
 			...O?.statusColors
 		}
-	}), [D, O]);
-	return /* @__PURE__ */ h(x.Provider, {
-		value: W,
-		children: /* @__PURE__ */ h(C.Provider, {
-			value: K,
-			children: /* @__PURE__ */ h(v.Provider, {
-				value: G,
-				children: /* @__PURE__ */ h(ee, {
+	}), [E, O]);
+	return /* @__PURE__ */ m(b.Provider, {
+		value: U,
+		children: /* @__PURE__ */ m(S.Provider, {
+			value: G,
+			children: /* @__PURE__ */ m(_.Provider, {
+				value: W,
+				children: /* @__PURE__ */ m(D, {
 					tasks: e,
 					timeScale: i,
 					enableBuiltinDialogs: u,
 					showToolbar: o,
 					toolbarConfig: f,
-					zoomable: m,
-					draggable: g,
-					resizable: _,
-					inlineEdit: y,
-					progressDraggable: b,
-					showCriticalPath: S,
-					virtualizeRows: w,
-					showAssigneeColumn: T,
+					zoomable: p,
+					draggable: h,
+					resizable: g,
+					inlineEdit: v,
+					progressDraggable: y,
+					showCriticalPath: x,
+					virtualizeRows: C,
+					showAssigneeColumn: w,
 					onExportCSV: k,
 					onDragStart: A,
-					onTaskClick: te,
-					onMilestoneClick: j,
-					onAddTask: M,
-					onEditTask: N,
-					onDeleteTask: P,
-					onStatusChange: F,
-					onTasksChange: I,
-					onTaskMoved: ne,
-					onTaskResized: re,
-					onTaskCreated: L,
-					onTaskUpdated: R,
-					onTaskDeleted: z,
-					height: B,
-					width: V,
-					minPanelWidth: H,
-					maxPanelWidth: U
+					onTaskClick: j,
+					onMilestoneClick: M,
+					onAddTask: N,
+					onEditTask: P,
+					onDeleteTask: F,
+					onStatusChange: te,
+					onTasksChange: ne,
+					onTaskMoved: re,
+					onTaskResized: ie,
+					onTaskCreated: I,
+					onTaskUpdated: L,
+					onTaskDeleted: R,
+					height: z,
+					width: B,
+					minPanelWidth: V,
+					maxPanelWidth: H
 				})
 			})
 		})
 	});
 }
 //#endregion
-export { O as GanttChart, y as useGanttChartStore, w as useGanttTheme, S as useGanttTranslations, b as useRawGanttChartStore };
+export { O as GanttChart, v as useGanttChartStore, C as useGanttTheme, x as useGanttTranslations, y as useRawGanttChartStore };

package/dist/components/gantt-chart/GanttTaskPanel.js

@@ -31,6 +31,7 @@ function T({ task: e, expandedIds: t, toggleExpand: i, hasActionsColumn: a, show
 			height: 40,
 			display: "flex",
 			alignItems: "center",
+			overflow: "hidden",
 			borderBottom: "1px solid",
 			borderRight: "1px solid",
 			borderColor: "divider",
@@ -312,6 +313,7 @@ function E({ scrollRef: n, onScroll: r, panelWidth: ee, onTaskClick: f, onAddTas
 						height: 40,
 						display: "flex",
 						alignItems: "center",
+						overflow: "hidden",
 						borderBottom: P === "days" ? "1px solid" : void 0,
 						borderColor: P === "days" ? "divider" : void 0
 					},