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

package/dist/components/kanban-board/KanbanBoard.js

@@ -2,89 +2,122 @@ import { kanbanBoardClasses as e } from "./kanbanBoardClasses.js";
 import { DEFAULT_KANBAN_BOARD_TRANSLATION as t } from "./KanbanBoard.types.js";
 import { KanbanBoardCard as n } from "./KanbanBoardCard.js";
 import { KanbanBoardCardDialog as r } from "./KanbanBoardCardDialog.js";
-import { KanbanBoardColumn as i } from "./KanbanBoardColumn.js";
-import { DndContext as a, DragOverlay as o, KeyboardSensor as s, PointerSensor as c, closestCorners as l, useSensor as u, useSensors as d } from "@dnd-kit/core";
-import { arrayMove as ee, sortableKeyboardCoordinates as f } from "@dnd-kit/sortable";
-import p from "@mui/icons-material/Search";
-import { Box as m, InputAdornment as h, TextField as g } from "@mui/material";
+import { KanbanBoardColumnDialog as i } from "./KanbanBoardColumnDialog.js";
+import { KanbanBoardColumn as a } from "./KanbanBoardColumn.js";
+import { DndContext as o, DragOverlay as s, KeyboardSensor as c, PointerSensor as l, closestCorners as u, useSensor as d, useSensors as ee } from "@dnd-kit/core";
+import { arrayMove as te, sortableKeyboardCoordinates as ne } from "@dnd-kit/sortable";
+import f from "@mui/icons-material/Add";
+import re from "@mui/icons-material/Search";
+import { Box as p, Button as m, InputAdornment as h, TextField as g } from "@mui/material";
 import { useEffect as _, useState as v } from "react";
 import { jsx as y, jsxs as b } from "react/jsx-runtime";
 //#region src/components/kanban-board/KanbanBoard.tsx
-function x({ tasks: x, columns: S, onTasksChange: C, onCardClick: w, enableBuiltinDialogs: T = !0, onTaskCreated: E, onTaskUpdated: D, onTaskDeleted: O, onTaskMoved: k, showPriority: A = !0, showAssignee: j = !0, showDueDate: M = !0, showDueDateWarning: N = !0, showSubtasks: P = !0, chipVariant: F = "outlined", showSearchField: I = !1, filterText: L = "", width: R = "100%", height: z = "100%", translation: B }) {
-	let V = {
+function x({ tasks: x, columns: S, onTasksChange: C, onCardClick: ie, enableBuiltinDialogs: w = !0, enableColumnManagement: T = !1, onTaskCreated: ae, onTaskUpdated: oe, onTaskDeleted: E, onTaskMoved: D, onColumnsChange: O, onColumnAdd: k, onColumnUpdate: A, onColumnDelete: se, showPriority: j = !0, showAssignee: M = !0, showDueDate: N = !0, showDueDateWarning: P = !0, showSubtasks: F = !0, chipVariant: I = "outlined", showSearchField: L = !1, filterText: R = "", width: z = "100%", height: B = "100%", translation: V }) {
+	let H = {
 		...t,
-		...B
-	}, [H, U] = v(x);
+		...V
+	}, [U, W] = v(x);
 	_(() => {
-		U(x);
+		W(x);
 	}, [x]);
-	let [W, G] = v(null), [K, q] = v(null), [J, Y] = v(""), X = d(u(c, { activationConstraint: { distance: 8 } }), u(s, { coordinateGetter: f }));
-	function Z({ active: e }) {
-		G(H.find((t) => t.id === e.id) ?? null);
+	let [G, K] = v(S);
+	_(() => {
+		K(S);
+	}, [S]);
+	let [q, J] = v(null), [Y, X] = v(null), [ce, Z] = v(null), [Q, le] = v(""), ue = ee(d(l, { activationConstraint: { distance: 8 } }), d(c, { coordinateGetter: ne }));
+	function de({ active: e }) {
+		J(U.find((t) => t.id === e.id) ?? null);
 	}
-	function Q({ active: e, over: t }) {
+	function fe({ active: e, over: t }) {
 		if (!t) return;
-		let n = e.id, r = t.id, i = H.find((e) => e.id === n);
+		let n = e.id, r = t.id, i = U.find((e) => e.id === n);
 		if (!i) return;
-		let a = S.find((e) => e.id === r), o = H.find((e) => e.id === r), s = a?.id ?? o?.status;
-		!s || i.status === s || U((e) => e.map((e) => e.id === n ? {
+		let a = S.find((e) => e.id === r), o = U.find((e) => e.id === r), s = a?.id ?? o?.status;
+		!s || i.status === s || W((e) => e.map((e) => e.id === n ? {
 			...e,
 			status: s
 		} : e));
 	}
-	function te({ active: e, over: t }) {
-		let n = W?.status;
-		if (G(null), !t) {
-			U(x);
+	function pe({ active: e, over: t }) {
+		let n = q?.status;
+		if (J(null), !t) {
+			W(x);
 			return;
 		}
-		let r = e.id, i = t.id, a = H.findIndex((e) => e.id === r), o = H.findIndex((e) => e.id === i), s;
-		if (s = a !== -1 && o !== -1 && a !== o ? ee(H, a, o) : [...H], U(s), C?.(s), n) {
+		let r = e.id, i = t.id, a = U.findIndex((e) => e.id === r), o = U.findIndex((e) => e.id === i), s;
+		if (s = a !== -1 && o !== -1 && a !== o ? te(U, a, o) : [...U], W(s), C?.(s), n) {
 			let e = s.find((e) => e.id === r);
-			e && e.status !== n && k?.(e, n, e.status);
+			e && e.status !== n && D?.(e, n, e.status);
 		}
 	}
-	function ne(e) {
-		T ? q({
+	function me(e) {
+		w ? X({
 			mode: "edit",
 			task: e
-		}) : w?.(e);
+		}) : ie?.(e);
 	}
-	function re(e) {
-		q({
+	function he(e) {
+		X({
 			mode: "add",
 			columnId: e
 		});
 	}
-	function ie(e) {
-		let t = !H.find((t) => t.id === e.id), n = t ? [...H, e] : H.map((t) => t.id === e.id ? e : t);
-		U(n), C?.(n), t ? E?.(e) : D?.(e), q(null);
+	function ge(e) {
+		let t = !U.find((t) => t.id === e.id), n = t ? [...U, e] : U.map((t) => t.id === e.id ? e : t);
+		W(n), C?.(n), t ? ae?.(e) : oe?.(e), X(null);
 	}
-	function ae(e) {
-		let t = H.filter((t) => t.id !== e);
-		U(t), C?.(t), O?.(e), q(null);
+	function _e(e) {
+		let t = U.filter((t) => t.id !== e);
+		W(t), C?.(t), E?.(e), X(null);
 	}
-	function oe(e) {
-		q({
+	function ve(e) {
+		X({
 			mode: "delete",
 			task: e
 		});
 	}
-	let $ = (L || J).trim().toLowerCase();
-	function se(e) {
+	let $ = (R || Q).trim().toLowerCase();
+	function ye(e) {
 		return $ ? e.title.toLowerCase().includes($) || (e.assignee?.toLowerCase().includes($) ?? !1) : !0;
 	}
-	return /* @__PURE__ */ b(m, {
+	function be(e) {
+		let t = [...G, e];
+		K(t), k?.(e), O?.(t), Z(null);
+	}
+	function xe(e, t) {
+		let n = G.map((n) => n.id === e ? {
+			...n,
+			label: t
+		} : n);
+		K(n);
+		let r = n.find((t) => t.id === e);
+		r && A?.(r), O?.(n);
+	}
+	function Se(e) {
+		let t = G.find((t) => t.id === e);
+		if (!t) return;
+		let n = U.filter((t) => t.status === e).length;
+		Z({
+			mode: "delete",
+			column: t,
+			cardCount: n
+		});
+	}
+	function Ce(e) {
+		let t = G.filter((t) => t.id !== e), n = U.filter((t) => t.status !== e);
+		K(t), W(n), se?.(e), O?.(t), C?.(n), Z(null);
+	}
+	return /* @__PURE__ */ b(p, {
 		className: e.root,
 		sx: {
-			width: R,
-			height: z,
+			width: z,
+			height: B,
 			display: "flex",
 			flexDirection: "column",
 			overflow: "hidden"
 		},
 		children: [
-			I && /* @__PURE__ */ y(m, {
+			L && /* @__PURE__ */ y(p, {
 				className: e.searchFieldWrapper,
 				sx: {
 					px: 2,
@@ -94,29 +127,29 @@ function x({ tasks: x, columns: S, onTasksChange: C, onCardClick: w, enableBuilt
 				children: /* @__PURE__ */ y(g, {
 					className: e.searchField,
 					size: "small",
-					placeholder: V.searchFieldPlaceholder,
-					value: J,
-					onChange: (e) => Y(e.target.value),
+					placeholder: H.searchFieldPlaceholder,
+					value: Q,
+					onChange: (e) => le(e.target.value),
 					slotProps: {
 						input: { startAdornment: /* @__PURE__ */ y(h, {
 							position: "start",
-							children: /* @__PURE__ */ y(p, {
+							children: /* @__PURE__ */ y(re, {
 								fontSize: "small",
 								sx: { color: "text.disabled" }
 							})
 						}) },
-						htmlInput: { "aria-label": V.searchFieldPlaceholder }
+						htmlInput: { "aria-label": H.searchFieldPlaceholder }
 					},
 					sx: { width: 280 }
 				})
 			}),
-			/* @__PURE__ */ b(a, {
-				sensors: X,
-				collisionDetection: l,
-				onDragStart: Z,
-				onDragOver: Q,
-				onDragEnd: te,
-				children: [/* @__PURE__ */ y(m, {
+			/* @__PURE__ */ b(o, {
+				sensors: ue,
+				collisionDetection: u,
+				onDragStart: de,
+				onDragOver: fe,
+				onDragEnd: pe,
+				children: [/* @__PURE__ */ b(p, {
 					className: e.columns,
 					sx: {
 						flex: 1,
@@ -127,48 +160,86 @@ function x({ tasks: x, columns: S, onTasksChange: C, onCardClick: w, enableBuilt
 						overflowY: "hidden",
 						alignItems: "stretch"
 					},
-					children: S.map((e) => {
-						let t = H.filter((t) => t.status === e.id);
-						return /* @__PURE__ */ y(i, {
+					children: [G.map((e) => {
+						let t = U.filter((t) => t.status === e.id);
+						return /* @__PURE__ */ y(a, {
 							column: e,
-							tasks: t.filter(se),
+							tasks: t.filter(ye),
 							totalCount: t.length,
-							showPriority: A,
-							showAssignee: j,
-							showDueDate: M,
-							showDueDateWarning: N,
-							showSubtasks: P,
-							chipVariant: F,
-							t: V,
-							enableBuiltinDialogs: T,
-							onCardClick: ne,
-							onAddClick: re
+							showPriority: j,
+							showAssignee: M,
+							showDueDate: N,
+							showDueDateWarning: P,
+							showSubtasks: F,
+							chipVariant: I,
+							t: H,
+							enableBuiltinDialogs: w,
+							enableColumnManagement: T && w,
+							onCardClick: me,
+							onAddClick: he,
+							onColumnRename: xe,
+							onColumnDeleteRequest: Se
 						}, e.id);
-					})
-				}), /* @__PURE__ */ y(o, { children: W && /* @__PURE__ */ y(n, {
-					task: W,
-					showPriority: A,
-					showAssignee: j,
-					showDueDate: M,
-					showDueDateWarning: N,
-					showSubtasks: P,
+					}), T && w && /* @__PURE__ */ y(p, {
+						sx: {
+							display: "flex",
+							alignItems: "flex-start",
+							pt: .5
+						},
+						children: /* @__PURE__ */ y(m, {
+							className: e.columnAddButton,
+							startIcon: /* @__PURE__ */ y(f, {}),
+							size: "small",
+							onClick: () => Z({ mode: "add" }),
+							sx: {
+								minWidth: 140,
+								whiteSpace: "nowrap",
+								color: "text.secondary",
+								border: "1px dashed",
+								borderColor: "divider",
+								borderRadius: 2,
+								py: 1,
+								px: 2,
+								fontWeight: 600,
+								"&:hover": {
+									bgcolor: "action.hover",
+									borderColor: "text.secondary"
+								}
+							},
+							children: H.columnAddLabel
+						})
+					})]
+				}), /* @__PURE__ */ y(s, { children: q && /* @__PURE__ */ y(n, {
+					task: q,
+					showPriority: j,
+					showAssignee: M,
+					showDueDate: N,
+					showDueDateWarning: P,
+					showSubtasks: F,
 					enableBuiltinDialogs: !1,
-					chipVariant: F,
-					t: V,
+					chipVariant: I,
+					t: H,
 					onCardClick: () => {},
 					isOverlay: !0
 				}) })]
 			}),
-			T && /* @__PURE__ */ y(r, {
-				state: K,
-				columns: S,
-				t: V,
-				showSubtasks: P,
-				onSave: ie,
-				onDelete: ae,
-				onRequestDelete: oe,
-				onClose: () => q(null)
-			}, K ? `${K.mode}-${K.mode === "add" ? K.columnId : K.task.id}` : "closed")
+			w && /* @__PURE__ */ y(r, {
+				state: Y,
+				columns: G,
+				t: H,
+				showSubtasks: F,
+				onSave: ge,
+				onDelete: _e,
+				onRequestDelete: ve,
+				onClose: () => X(null)
+			}, Y ? `${Y.mode}-${Y.mode === "add" ? Y.columnId : Y.task.id}` : "closed"),
+			T && w && /* @__PURE__ */ y(i, {
+				state: ce,
+				t: H,
+				onAdd: be,
+				onDelete: Ce,
+				onClose: () => Z(null)
+			})
 		]
 	});
 }

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

@@ -52,6 +52,18 @@ export type KanbanBoardTranslation = {
     dialogSubtaskAdd: string;
     /** Tooltip for the "+" button on the card's subtask progress bar. */
     cardSubtaskAdd: string;
+    /** Button label for the "Add column" ghost button (`enableColumnManagement`). */
+    columnAddLabel: string;
+    /** Placeholder inside the add-column dialog text field. */
+    columnAddPlaceholder: string;
+    /** Confirmation dialog title when deleting a column. "{label}" → column name. */
+    columnDeleteConfirm: string;
+    /** Warning line shown when the column being deleted still has cards. "{count}" → number of cards. */
+    columnDeleteCardsWarning: string;
+    /** Tooltip on the rename icon in the column header. */
+    columnRenameTooltip: string;
+    /** Tooltip on the delete icon in the column header. */
+    columnDeleteTooltip: string;
 };
 export declare const DEFAULT_KANBAN_BOARD_TRANSLATION: Required<KanbanBoardTranslation>;
 export type KanbanBoardProps = {
@@ -131,6 +143,25 @@ export type KanbanBoardProps = {
      * Alternative: set `showSearchField={true}` to let the board render a built-in field.
      */
     filterText?: string;
+    /**
+     * When `true`, shows inline rename / delete controls on column headers and an
+     * "Add column" button at the end of the board. Default: `false`.
+     *
+     * Requires `enableBuiltinDialogs` to be `true` (the controls are suppressed
+     * when built-in dialogs are disabled).
+     */
+    enableColumnManagement?: boolean;
+    /**
+     * Called after every column add, rename, or delete with the full updated column list.
+     * Mirror of `onTasksChange` for columns.
+     */
+    onColumnsChange?: (columns: KanbanColumn[]) => void;
+    /** Called after a new column is added via the built-in UI. */
+    onColumnAdd?: (column: KanbanColumn) => void;
+    /** Called after a column label is changed via the inline rename. */
+    onColumnUpdate?: (column: KanbanColumn) => void;
+    /** Called after a column (and all its cards) is deleted via the built-in UI. */
+    onColumnDelete?: (columnId: string) => void;
     /** Width of the board. Default: "100%". */
     width?: number | string;
     /** Height of the board. Default: "100%". */

package/dist/components/kanban-board/KanbanBoard.types.js

@@ -17,7 +17,13 @@ var e = {
 	searchFieldPlaceholder: "Search by title or assignee…",
 	dialogFieldSubtasks: "Subtasks",
 	dialogSubtaskAdd: "Add subtask",
-	cardSubtaskAdd: "Add subtask"
+	cardSubtaskAdd: "Add subtask",
+	columnAddLabel: "Add column",
+	columnAddPlaceholder: "Column name",
+	columnDeleteConfirm: "Delete column \"{label}\"?",
+	columnDeleteCardsWarning: "{count} card(s) in this column will also be deleted.",
+	columnRenameTooltip: "Rename",
+	columnDeleteTooltip: "Delete column"
 };
 //#endregion
 export { e as DEFAULT_KANBAN_BOARD_TRANSLATION };

package/dist/components/kanban-board/KanbanBoardCard.js

@@ -1,9 +1,9 @@
 import { muiTsStateClasses as e } from "../../utils/muiTsClasses.js";
 import { kanbanBoardClasses as t } from "./kanbanBoardClasses.js";
 import { useSortable as n } from "@dnd-kit/sortable";
-import { Box as r, Card as i, CardActionArea as a, CardContent as o, Chip as s, IconButton as c, LinearProgress as l, Tooltip as u, Typography as d } from "@mui/material";
-import { CSS as f } from "@dnd-kit/utilities";
-import p from "@mui/icons-material/Add";
+import r from "@mui/icons-material/Add";
+import { Box as i, Card as a, CardActionArea as o, CardContent as s, Chip as c, IconButton as l, LinearProgress as u, Tooltip as d, Typography as f } from "@mui/material";
+import { CSS as p } from "@dnd-kit/utilities";
 import m from "@mui/icons-material/CalendarToday";
 import h from "@mui/icons-material/Person";
 import { alpha as g } from "@mui/material/styles";
@@ -34,7 +34,7 @@ function x({ task: x, showPriority: S, showAssignee: C, showDueDate: w, showDueD
 		id: x.id,
 		disabled: j
 	}), R = j ? void 0 : {
-		transform: f.Transform.toString(F),
+		transform: p.Transform.toString(F),
 		transition: I,
 		opacity: +!L
 	}, z = C && !!x.assignee || w && !!x.dueDate, B = E && !!x.subtasks?.length, V = x.subtasks?.length ?? 0, H = x.subtasks?.filter((e) => e.done).length ?? 0, U = x.dueDate ? x.dueDate.toLocaleDateString(void 0, {
@@ -44,7 +44,7 @@ function x({ task: x, showPriority: S, showAssignee: C, showDueDate: w, showDueD
 	}) : null, W = /* @__PURE__ */ new Date();
 	W.setHours(0, 0, 0, 0);
 	let G = T && !!x.dueDate && x.dueDate < W;
-	return /* @__PURE__ */ _(i, {
+	return /* @__PURE__ */ _(a, {
 		ref: j ? void 0 : P,
 		style: R,
 		elevation: 0,
@@ -71,23 +71,23 @@ function x({ task: x, showPriority: S, showAssignee: C, showDueDate: w, showDueD
 		},
 		onClick: () => !L && A(x),
 		"aria-label": x.title,
-		children: /* @__PURE__ */ _(a, {
+		children: /* @__PURE__ */ _(o, {
 			component: "div",
 			sx: { cursor: "inherit" },
-			children: /* @__PURE__ */ v(o, {
+			children: /* @__PURE__ */ v(s, {
 				sx: {
 					p: 1.5,
 					"&:last-child": { pb: 1.5 }
 				},
 				children: [
-					/* @__PURE__ */ v(r, {
+					/* @__PURE__ */ v(i, {
 						sx: {
 							display: "flex",
 							alignItems: "flex-start",
 							gap: .75,
 							mb: z || B ? 1 : 0
 						},
-						children: [S && x.priority && /* @__PURE__ */ _(r, {
+						children: [S && x.priority && /* @__PURE__ */ _(i, {
 							className: t.cardPriorityDot,
 							role: "img",
 							"aria-label": `Priority: ${x.priority}`,
@@ -100,7 +100,7 @@ function x({ task: x, showPriority: S, showAssignee: C, showDueDate: w, showDueD
 								mt: "5px",
 								flexShrink: 0
 							}
-						}), /* @__PURE__ */ _(d, {
+						}), /* @__PURE__ */ _(f, {
 							className: t.cardTitle,
 							variant: "body2",
 							sx: {
@@ -111,7 +111,7 @@ function x({ task: x, showPriority: S, showAssignee: C, showDueDate: w, showDueD
 							children: x.title
 						})]
 					}),
-					z && /* @__PURE__ */ v(r, {
+					z && /* @__PURE__ */ v(i, {
 						className: t.cardMeta,
 						sx: {
 							display: "flex",
@@ -119,7 +119,7 @@ function x({ task: x, showPriority: S, showAssignee: C, showDueDate: w, showDueD
 							flexWrap: "wrap",
 							alignItems: "center"
 						},
-						children: [C && x.assignee && /* @__PURE__ */ _(s, {
+						children: [C && x.assignee && /* @__PURE__ */ _(c, {
 							className: t.cardAssignee,
 							icon: /* @__PURE__ */ _(h, {}),
 							label: x.assignee,
@@ -127,7 +127,7 @@ function x({ task: x, showPriority: S, showAssignee: C, showDueDate: w, showDueD
 							variant: O,
 							"aria-label": `${k.dialogFieldAssignee}: ${x.assignee}`,
 							sx: b
-						}), w && U && /* @__PURE__ */ _(s, {
+						}), w && U && /* @__PURE__ */ _(c, {
 							className: t.cardDueDate,
 							icon: /* @__PURE__ */ _(m, {}),
 							label: U,
@@ -138,7 +138,7 @@ function x({ task: x, showPriority: S, showAssignee: C, showDueDate: w, showDueD
 							sx: b
 						})]
 					}),
-					B && /* @__PURE__ */ v(r, {
+					B && /* @__PURE__ */ v(i, {
 						className: t.cardSubtasks,
 						sx: {
 							display: "flex",
@@ -147,7 +147,7 @@ function x({ task: x, showPriority: S, showAssignee: C, showDueDate: w, showDueD
 							mt: z ? .75 : 0
 						},
 						children: [
-							/* @__PURE__ */ _(l, {
+							/* @__PURE__ */ _(u, {
 								className: t.cardSubtasksBar,
 								variant: "determinate",
 								value: H / V * 100,
@@ -158,7 +158,7 @@ function x({ task: x, showPriority: S, showAssignee: C, showDueDate: w, showDueD
 								},
 								"aria-label": `${H} of ${V} subtasks done`
 							}),
-							/* @__PURE__ */ v(d, {
+							/* @__PURE__ */ v(f, {
 								variant: "caption",
 								sx: {
 									whiteSpace: "nowrap",
@@ -173,11 +173,11 @@ function x({ task: x, showPriority: S, showAssignee: C, showDueDate: w, showDueD
 									" ✓"
 								]
 							}),
-							D && !j && /* @__PURE__ */ _(u, {
+							D && !j && /* @__PURE__ */ _(d, {
 								title: k.cardSubtaskAdd,
 								placement: "top",
 								arrow: !0,
-								children: /* @__PURE__ */ _(c, {
+								children: /* @__PURE__ */ _(l, {
 									size: "small",
 									"aria-label": k.cardSubtaskAdd,
 									onClick: (e) => {
@@ -189,7 +189,7 @@ function x({ task: x, showPriority: S, showAssignee: C, showDueDate: w, showDueD
 										transition: "opacity 0.15s",
 										[`.${t.card}:hover &`]: { opacity: 1 }
 									},
-									children: /* @__PURE__ */ _(p, { sx: { fontSize: "0.85rem" } })
+									children: /* @__PURE__ */ _(r, { sx: { fontSize: "0.85rem" } })
 								})
 							})
 						]