@thebuoyant-tsdev/mui-ts-library 3.35.0 → 3.36.0

package/README.de.md

@@ -104,7 +104,7 @@ const tasks: GanttTask[] = [
 
 ### KanbanBoard
 
-Ein Drag-and-Drop-Kanban-Board mit eingebauten Hinzufügen-/Bearbeiten-/Löschen-Dialogen, WIP-Limits und vollständiger i18n. Ideal für Task-Management-Dashboards, Sprint-Boards oder jeden Workflow, bei dem Nutzer Aufgaben zwischen Statusspalten verschieben sollen — mit Kartenfarben, Prioritäts-Punkten, Zuständige-Person-Chips, Fälligkeitsdatum-Chips mit Überfälligkeits-Warnung, Subtask-Checkliste mit Fortschrittsbalken und eingebautem Suchfeld (`showSearchField`) oder `filterText`-Prop für Live-Filterung.
+Ein Drag-and-Drop-Kanban-Board mit eingebauten Hinzufügen-/Bearbeiten-/Löschen-Dialogen, WIP-Limits und vollständiger i18n. Ideal für Task-Management-Dashboards, Sprint-Boards oder jeden Workflow, bei dem Nutzer Aufgaben zwischen Statusspalten verschieben sollen — mit Kartenfarben, Prioritäts-Punkten, Zuständige-Person-Chips, Fälligkeitsdatum-Chips mit Überfälligkeits-Warnung, Subtask-Checkliste mit Fortschrittsbalken, eingebautem Suchfeld (`showSearchField`) oder `filterText`-Prop für Live-Filterung, und optionalem Spalten-Management (`enableColumnManagement`) zum Hinzufügen, Umbenennen und Löschen von Spalten direkt im Board.
 
 ```tsx
 import { KanbanBoard } from '@thebuoyant-tsdev/mui-ts-library';
@@ -555,6 +555,13 @@ Dieses Projekt folgt [Semantic Versioning](https://semver.org/):
 
 ## Changelog
 
+### [3.36.0] — 2026-07-21
+
+**Hinzugefügt**
+- **KanbanBoard — Spalten-Management-UI (`enableColumnManagement`)**: Neues Opt-in-Prop (Standard `false`). Wenn aktiviert, erhalten Spalten-Header bei Hover Umbenennen-/Löschen-Icon-Buttons und am rechten Board-Ende erscheint ein „Spalte hinzufügen"-Button. Umbenennen erfolgt inline; Löschen zeigt einen Bestätigungsdialog mit Karten-Anzahl-Warnung. Löschen einer Spalte entfernt auch alle ihre Karten. Neue Callbacks: `onColumnsChange`, `onColumnAdd`, `onColumnUpdate`, `onColumnDelete`. Sechs neue Translation-Keys, zwei neue CSS-Klassen. Siehe [Vollständiger Changelog](https://github.com/thebuoyant/mui-ts-library/blob/main/CHANGELOG.de.md) für Details.
+
+---
+
 ### [3.35.0] — 2026-07-20
 
 **Hinzugefügt**

package/README.md

@@ -104,7 +104,7 @@ const tasks: GanttTask[] = [
 
 ### KanbanBoard
 
-A drag-and-drop Kanban board with built-in Add / Edit / Delete dialogs, WIP limits, and full i18n. Use it for task management dashboards, sprint boards, or any workflow where users move work items between status columns — with card colors, priority dots, assignee chips, due-date chips with overdue highlighting, a subtask checklist with progress bar, and a built-in search field (`showSearchField`) or controlled `filterText` prop for live card filtering.
+A drag-and-drop Kanban board with built-in Add / Edit / Delete dialogs, WIP limits, and full i18n. Use it for task management dashboards, sprint boards, or any workflow where users move work items between status columns — with card colors, priority dots, assignee chips, due-date chips with overdue highlighting, a subtask checklist with progress bar, a built-in search field (`showSearchField`) or controlled `filterText` prop for live card filtering, and optional column management (`enableColumnManagement`) for adding, renaming, and deleting columns directly in the board.
 
 ```tsx
 import { KanbanBoard } from '@thebuoyant-tsdev/mui-ts-library';
@@ -555,6 +555,13 @@ This project follows [Semantic Versioning](https://semver.org/):
 
 ## Changelog
 
+### [3.36.0] — 2026-07-21
+
+**Added**
+- **KanbanBoard — column management UI (`enableColumnManagement`)**: New opt-in prop (default `false`). When enabled, column headers show inline Rename / Delete icon buttons on hover and an "Add column" button appears at the right end of the board. Rename is inline in the header; delete shows a confirmation dialog with card-count warning. Deleting a column also removes all its cards. New callbacks: `onColumnsChange`, `onColumnAdd`, `onColumnUpdate`, `onColumnDelete`. Six new translation keys (`columnAddLabel`, `columnAddPlaceholder`, `columnDeleteConfirm`, `columnDeleteCardsWarning`, `columnRenameTooltip`, `columnDeleteTooltip`). Two new CSS classes: `MuiTsKanbanBoard-columnActions`, `MuiTsKanbanBoard-columnAddButton`. See [Full Changelog](https://github.com/thebuoyant/mui-ts-library/blob/main/CHANGELOG.md) for details.
+
+---
+
 ### [3.35.0] — 2026-07-20
 
 **Added**

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

@@ -2,10 +2,10 @@ import { filterByAssignee as e, getVisibleTasks as t } from "./util/gantt-chart.
 import { STATUS_BAR_COLOR as n, STATUS_CHIP_COLOR as r } from "./GanttChart.constants.js";
 import { GanttTaskDialog as i } from "./GanttTaskDialog.js";
 import { GanttDeleteDialog as ee } from "./GanttDeleteDialog.js";
-import { useGanttChartStore as a, useGanttTheme as te, useGanttTranslations as ne, useRawGanttChartStore as o } from "./GanttChart.js";
-import { Box as s, Chip as c, IconButton as l, Menu as u, MenuItem as d, TextField as f, Tooltip as p, Typography as m } from "@mui/material";
-import { useEffect as h, useMemo as g, useState as _ } from "react";
-import v from "@mui/icons-material/Add";
+import { useGanttChartStore as a, useGanttTheme as o, useGanttTranslations as te, useRawGanttChartStore as s } from "./GanttChart.js";
+import c from "@mui/icons-material/Add";
+import { Box as l, Chip as ne, IconButton as u, Menu as d, MenuItem as f, TextField as p, Tooltip as m, Typography as h } from "@mui/material";
+import { useEffect as g, useMemo as _, useState as v } from "react";
 import { Fragment as y, jsx as b, jsxs as x } from "react/jsx-runtime";
 import S from "@mui/icons-material/Delete";
 import { useVirtualizer as C } from "@tanstack/react-virtual";
@@ -19,11 +19,11 @@ function T(e, t) {
 		blocked: t.statusBlocked
 	}[e];
 }
-function E({ task: e, expandedIds: t, toggleExpand: i, hasActionsColumn: ee, showAssigneeColumn: a, onTaskClick: o, onAddTask: h, onEditTask: g, onDeleteTask: y, onStatusChange: C, inlineEdit: E, onInlineRename: D, isSelected: O, onSelect: k }) {
-	let [A, j] = _(null), [M, N] = _(null), P = ne(), { statusColors: F } = te(), I = () => {
+function E({ task: e, expandedIds: t, toggleExpand: i, hasActionsColumn: ee, showAssigneeColumn: a, onTaskClick: s, onAddTask: g, onEditTask: _, onDeleteTask: y, onStatusChange: C, inlineEdit: E, onInlineRename: D, isSelected: O, onSelect: k }) {
+	let [A, j] = v(null), [M, N] = v(null), P = te(), { statusColors: F } = o(), I = () => {
 		M !== null && M.trim() && D?.(e, M.trim()), N(null);
 	};
-	return /* @__PURE__ */ x(s, {
+	return /* @__PURE__ */ x(l, {
 		className: "gantt-task-row",
 		"data-testid": `gantt-task-row-${e.id}`,
 		"aria-selected": O ?? !1,
@@ -35,16 +35,16 @@ function E({ task: e, expandedIds: t, toggleExpand: i, hasActionsColumn: ee, sho
 			borderBottom: "1px solid",
 			borderRight: "1px solid",
 			borderColor: "divider",
-			cursor: o ? "pointer" : "default",
+			cursor: s ? "pointer" : "default",
 			bgcolor: O ? "action.selected" : void 0,
 			boxShadow: O ? (e) => `inset 3px 0 0 ${e.palette.primary.main}` : void 0,
-			"&:hover": { bgcolor: O ? "action.selected" : o ? "action.hover" : void 0 }
+			"&:hover": { bgcolor: O ? "action.selected" : s ? "action.hover" : void 0 }
 		},
 		onClick: () => {
-			k?.(), o?.(e);
+			k?.(), s?.(e);
 		},
 		children: [
-			/* @__PURE__ */ x(s, {
+			/* @__PURE__ */ x(l, {
 				sx: {
 					flex: 1,
 					minWidth: 0,
@@ -56,14 +56,14 @@ function E({ task: e, expandedIds: t, toggleExpand: i, hasActionsColumn: ee, sho
 					height: "100%"
 				},
 				children: [
-					/* @__PURE__ */ b(s, {
+					/* @__PURE__ */ b(l, {
 						sx: {
 							width: 16,
 							flexShrink: 0,
 							display: "flex",
 							justifyContent: "center"
 						},
-						children: e.children.length > 0 && /* @__PURE__ */ b(s, {
+						children: e.children.length > 0 && /* @__PURE__ */ b(l, {
 							component: "span",
 							sx: {
 								fontSize: 9,
@@ -76,7 +76,7 @@ function E({ task: e, expandedIds: t, toggleExpand: i, hasActionsColumn: ee, sho
 							children: t.has(e.id) ? "▼" : "▶"
 						})
 					}),
-					/* @__PURE__ */ b(s, { sx: {
+					/* @__PURE__ */ b(l, { sx: {
 						width: 8,
 						height: 8,
 						borderRadius: e.isMilestone ? 0 : "50%",
@@ -84,7 +84,7 @@ function E({ task: e, expandedIds: t, toggleExpand: i, hasActionsColumn: ee, sho
 						flexShrink: 0,
 						bgcolor: e.color ?? F?.[e.status] ?? n[e.status] ?? "grey.400"
 					} }),
-					M === null ? /* @__PURE__ */ b(m, {
+					M === null ? /* @__PURE__ */ b(h, {
 						variant: "body2",
 						noWrap: !0,
 						sx: {
@@ -96,7 +96,7 @@ function E({ task: e, expandedIds: t, toggleExpand: i, hasActionsColumn: ee, sho
 							t.stopPropagation(), N(e.name);
 						} : void 0,
 						children: e.name
-					}) : /* @__PURE__ */ b(f, {
+					}) : /* @__PURE__ */ b(p, {
 						size: "small",
 						variant: "standard",
 						value: M,
@@ -115,7 +115,7 @@ function E({ task: e, expandedIds: t, toggleExpand: i, hasActionsColumn: ee, sho
 					})
 				]
 			}),
-			a && /* @__PURE__ */ b(s, {
+			a && /* @__PURE__ */ b(l, {
 				sx: {
 					width: 110,
 					flexShrink: 0,
@@ -124,14 +124,14 @@ function E({ task: e, expandedIds: t, toggleExpand: i, hasActionsColumn: ee, sho
 					px: 1,
 					overflow: "hidden"
 				},
-				children: /* @__PURE__ */ b(m, {
+				children: /* @__PURE__ */ b(h, {
 					variant: "caption",
 					noWrap: !0,
 					color: e.assignee ? "text.primary" : "text.disabled",
 					children: e.assignee ?? "—"
 				})
 			}),
-			ee && /* @__PURE__ */ x(s, {
+			ee && /* @__PURE__ */ x(l, {
 				className: "gantt-row-actions",
 				sx: {
 					width: 96,
@@ -142,33 +142,33 @@ function E({ task: e, expandedIds: t, toggleExpand: i, hasActionsColumn: ee, sho
 					pr: .5
 				},
 				children: [
-					g && /* @__PURE__ */ b(p, {
+					_ && /* @__PURE__ */ b(m, {
 						title: P.editTaskTooltip,
-						children: /* @__PURE__ */ b(l, {
+						children: /* @__PURE__ */ b(u, {
 							size: "small",
 							"aria-label": P.editTaskTooltip,
 							"data-testid": `gantt-edit-task-${e.id}`,
 							onClick: (t) => {
-								t.stopPropagation(), g(e);
+								t.stopPropagation(), _(e);
 							},
 							children: /* @__PURE__ */ b(w, { fontSize: "inherit" })
 						})
 					}),
-					h && /* @__PURE__ */ b(p, {
+					g && /* @__PURE__ */ b(m, {
 						title: P.addTaskTooltip,
-						children: /* @__PURE__ */ b(l, {
+						children: /* @__PURE__ */ b(u, {
 							size: "small",
 							"aria-label": P.addTaskTooltip,
 							"data-testid": `gantt-add-task-${e.id}`,
 							onClick: (t) => {
-								t.stopPropagation(), h(e);
+								t.stopPropagation(), g(e);
 							},
-							children: /* @__PURE__ */ b(v, { fontSize: "inherit" })
+							children: /* @__PURE__ */ b(c, { fontSize: "inherit" })
 						})
 					}),
-					y && /* @__PURE__ */ b(p, {
+					y && /* @__PURE__ */ b(m, {
 						title: P.deleteTaskTooltip,
-						children: /* @__PURE__ */ b(l, {
+						children: /* @__PURE__ */ b(u, {
 							size: "small",
 							"aria-label": P.deleteTaskTooltip,
 							"data-testid": `gantt-delete-task-${e.id}`,
@@ -180,7 +180,7 @@ function E({ task: e, expandedIds: t, toggleExpand: i, hasActionsColumn: ee, sho
 					})
 				]
 			}),
-			/* @__PURE__ */ x(s, {
+			/* @__PURE__ */ x(l, {
 				sx: {
 					width: 90,
 					flexShrink: 0,
@@ -188,7 +188,7 @@ function E({ task: e, expandedIds: t, toggleExpand: i, hasActionsColumn: ee, sho
 					alignItems: "center",
 					justifyContent: "center"
 				},
-				children: [/* @__PURE__ */ b(c, {
+				children: [/* @__PURE__ */ b(ne, {
 					label: T(e.status, P),
 					size: "small",
 					variant: "outlined",
@@ -205,7 +205,7 @@ function E({ task: e, expandedIds: t, toggleExpand: i, hasActionsColumn: ee, sho
 					onClick: C ? (e) => {
 						e.stopPropagation(), j(e.currentTarget);
 					} : void 0
-				}), C && /* @__PURE__ */ b(u, {
+				}), C && /* @__PURE__ */ b(d, {
 					anchorEl: A,
 					open: !!A,
 					onClose: () => j(null),
@@ -214,7 +214,7 @@ function E({ task: e, expandedIds: t, toggleExpand: i, hasActionsColumn: ee, sho
 						"in-progress",
 						"done",
 						"blocked"
-					].map((t) => /* @__PURE__ */ b(d, {
+					].map((t) => /* @__PURE__ */ b(f, {
 						selected: e.status === t,
 						onClick: () => {
 							C(e, t), j(null);
@@ -226,8 +226,8 @@ function E({ task: e, expandedIds: t, toggleExpand: i, hasActionsColumn: ee, sho
 		]
 	});
 }
-function D({ scrollRef: n, onScroll: r, panelWidth: te, onTaskClick: c, onAddTask: l, onEditTask: u, onDeleteTask: d, onStatusChange: f, onTasksChange: p, enableBuiltinDialogs: v, onTaskCreated: S, onTaskUpdated: w, onTaskDeleted: T, inlineEdit: D, virtualizeRows: O = !1, showAssigneeColumn: k = !1 }) {
-	let A = ne(), j = o(), M = a((e) => e.taskTree), N = a((e) => e.expandedIds), P = a((e) => e.toggleExpand), F = a((e) => e.timeScale), I = a((e) => e.addTask), re = a((e) => e.updateTask), ie = a((e) => e.deleteTask), L = a((e) => e.assigneeFilter), R = g(() => {
+function D({ scrollRef: n, onScroll: r, panelWidth: o, onTaskClick: c, onAddTask: ne, onEditTask: u, onDeleteTask: d, onStatusChange: f, onTasksChange: p, enableBuiltinDialogs: m, onTaskCreated: S, onTaskUpdated: w, onTaskDeleted: T, inlineEdit: D, virtualizeRows: O = !1, showAssigneeColumn: k = !1 }) {
+	let A = te(), j = s(), M = a((e) => e.taskTree), N = a((e) => e.expandedIds), P = a((e) => e.toggleExpand), F = a((e) => e.timeScale), I = a((e) => e.addTask), re = a((e) => e.updateTask), ie = a((e) => e.deleteTask), L = a((e) => e.assigneeFilter), R = _(() => {
 		let n = t(M, N);
 		return L ? e(n, L) : n;
 	}, [
@@ -239,7 +239,7 @@ function D({ scrollRef: n, onScroll: r, panelWidth: te, onTaskClick: c, onAddTas
 		getScrollElement: () => n.current,
 		estimateSize: () => 40,
 		overscan: 5
-	}), [ae, B] = _(!1), [oe, V] = _(!1), [se, H] = _(!1), [U, W] = _(null), ce = (e) => {
+	}), [ae, B] = v(!1), [oe, V] = v(!1), [se, H] = v(!1), [U, W] = v(null), ce = (e) => {
 		let t = {
 			...e,
 			id: crypto.randomUUID()
@@ -260,14 +260,14 @@ function D({ scrollRef: n, onScroll: r, panelWidth: te, onTaskClick: c, onAddTas
 			name: t
 		};
 		re(n), p?.(j.getState().tasks), w?.(n);
-	}, K = v ? (e) => {
+	}, K = m ? (e) => {
 		W(e), B(!0);
-	} : l, q = v ? (e) => {
+	} : ne, q = m ? (e) => {
 		W(e), V(!0);
-	} : u, J = v ? (e) => {
+	} : u, J = m ? (e) => {
 		W(e), H(!0);
-	} : d, Y = !!(K || q || J), X = F === "days" ? 80 : 40, [Z, Q] = _(null), $ = Z ? R.findIndex((e) => e.id === Z) : -1;
-	h(() => {
+	} : d, Y = !!(K || q || J), X = F === "days" ? 80 : 40, [Z, Q] = v(null), $ = Z ? R.findIndex((e) => e.id === Z) : -1;
+	g(() => {
 		if ($ < 0 || !n.current) return;
 		let e = n.current, t = X + $ * 40, r = t + 40;
 		t < e.scrollTop ? e.scrollTop = t : r > e.scrollTop + e.clientHeight && (e.scrollTop = r - e.clientHeight);
@@ -281,21 +281,21 @@ function D({ scrollRef: n, onScroll: r, panelWidth: te, onTaskClick: c, onAddTas
 		let t = R.length;
 		t !== 0 && (e.key === "ArrowDown" ? (e.preventDefault(), Q(R[Math.min($ < 0 ? 0 : $ + 1, t - 1)].id)) : e.key === "ArrowUp" ? (e.preventDefault(), Q(R[Math.max($ <= 0 ? 0 : $ - 1, 0)].id)) : e.key === "Enter" && $ >= 0 ? (e.preventDefault(), q?.(R[$])) : e.key === "Escape" && Q(null));
 	}
-	return /* @__PURE__ */ x(s, {
+	return /* @__PURE__ */ x(l, {
 		ref: n,
 		onScroll: r,
 		tabIndex: 0,
 		"data-testid": "gantt-task-panel",
 		onKeyDown: de,
 		sx: {
-			width: te,
+			width: o,
 			flexShrink: 0,
 			overflowY: "auto",
 			overflowX: "hidden",
 			outline: "none"
 		},
 		children: [
-			/* @__PURE__ */ x(s, {
+			/* @__PURE__ */ x(l, {
 				sx: {
 					height: X,
 					position: "sticky",
@@ -308,7 +308,7 @@ function D({ scrollRef: n, onScroll: r, panelWidth: te, onTaskClick: c, onAddTas
 					display: "flex",
 					flexDirection: "column"
 				},
-				children: [/* @__PURE__ */ x(s, {
+				children: [/* @__PURE__ */ x(l, {
 					sx: {
 						height: 40,
 						display: "flex",
@@ -318,19 +318,19 @@ function D({ scrollRef: n, onScroll: r, panelWidth: te, onTaskClick: c, onAddTas
 						borderColor: F === "days" ? "divider" : void 0
 					},
 					children: [
-						/* @__PURE__ */ b(s, {
+						/* @__PURE__ */ b(l, {
 							sx: {
 								flex: 1,
 								minWidth: 0,
 								pl: 2
 							},
-							children: /* @__PURE__ */ b(m, {
+							children: /* @__PURE__ */ b(h, {
 								variant: "caption",
 								color: "text.secondary",
 								children: A.columnName
 							})
 						}),
-						k && /* @__PURE__ */ b(s, {
+						k && /* @__PURE__ */ b(l, {
 							sx: {
 								width: 110,
 								flexShrink: 0,
@@ -338,13 +338,13 @@ function D({ scrollRef: n, onScroll: r, panelWidth: te, onTaskClick: c, onAddTas
 								alignItems: "center",
 								px: 1
 							},
-							children: /* @__PURE__ */ b(m, {
+							children: /* @__PURE__ */ b(h, {
 								variant: "caption",
 								color: "text.secondary",
 								children: A.columnAssignee
 							})
 						}),
-						Y && /* @__PURE__ */ b(s, {
+						Y && /* @__PURE__ */ b(l, {
 							sx: {
 								width: 96,
 								flexShrink: 0,
@@ -352,13 +352,13 @@ function D({ scrollRef: n, onScroll: r, panelWidth: te, onTaskClick: c, onAddTas
 								alignItems: "center",
 								justifyContent: "center"
 							},
-							children: /* @__PURE__ */ b(m, {
+							children: /* @__PURE__ */ b(h, {
 								variant: "caption",
 								color: "text.secondary",
 								children: A.columnActions
 							})
 						}),
-						/* @__PURE__ */ b(s, {
+						/* @__PURE__ */ b(l, {
 							sx: {
 								width: 90,
 								flexShrink: 0,
@@ -366,21 +366,21 @@ function D({ scrollRef: n, onScroll: r, panelWidth: te, onTaskClick: c, onAddTas
 								alignItems: "center",
 								justifyContent: "center"
 							},
-							children: /* @__PURE__ */ b(m, {
+							children: /* @__PURE__ */ b(h, {
 								variant: "caption",
 								color: "text.secondary",
 								children: A.columnStatus
 							})
 						})
 					]
-				}), F === "days" && /* @__PURE__ */ b(s, { sx: { flex: 1 } })]
+				}), F === "days" && /* @__PURE__ */ b(l, { sx: { flex: 1 } })]
 			}),
-			O ? /* @__PURE__ */ b(s, {
+			O ? /* @__PURE__ */ b(l, {
 				sx: {
 					position: "relative",
 					height: z.getTotalSize()
 				},
-				children: z.getVirtualItems().map((e) => /* @__PURE__ */ b(s, {
+				children: z.getVirtualItems().map((e) => /* @__PURE__ */ b(l, {
 					style: {
 						position: "absolute",
 						top: 0,
@@ -422,7 +422,7 @@ function D({ scrollRef: n, onScroll: r, panelWidth: te, onTaskClick: c, onAddTas
 				isSelected: e.id === Z,
 				onSelect: () => Q(e.id)
 			}, e.id)),
-			v && /* @__PURE__ */ x(y, { children: [
+			m && /* @__PURE__ */ x(y, { children: [
 				/* @__PURE__ */ b(i, {
 					open: ae,
 					mode: "add",

package/dist/components/kanban-board/KanbanBoard.d.ts

@@ -1,2 +1,2 @@
 import { type KanbanBoardProps } from "./KanbanBoard.types";
-export declare function KanbanBoard({ tasks, columns, onTasksChange, onCardClick, enableBuiltinDialogs, onTaskCreated, onTaskUpdated, onTaskDeleted, onTaskMoved, showPriority, showAssignee, showDueDate, showDueDateWarning, showSubtasks, chipVariant, showSearchField, filterText, width, height, translation, }: KanbanBoardProps): import("react/jsx-runtime").JSX.Element;
+export declare function KanbanBoard({ tasks, columns, onTasksChange, onCardClick, enableBuiltinDialogs, enableColumnManagement, onTaskCreated, onTaskUpdated, onTaskDeleted, onTaskMoved, onColumnsChange, onColumnAdd, onColumnUpdate, onColumnDelete, showPriority, showAssignee, showDueDate, showDueDateWarning, showSubtasks, chipVariant, showSearchField, filterText, width, height, translation, }: KanbanBoardProps): import("react/jsx-runtime").JSX.Element;