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

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

@@ -2,121 +2,154 @@ 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 f, sortableKeyboardCoordinates as p } from "@dnd-kit/sortable";
-import m from "@mui/icons-material/Search";
-import { Box as h, InputAdornment as g, TextField as ee } 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, chipVariant: P = "outlined", showSearchField: F = !1, filterText: I = "", width: L = "100%", height: R = "100%", translation: z }) {
-	let B = {
+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,
-		...z
-	}, [V, H] = v(x);
+		...V
+	}, [U, W] = v(x);
 	_(() => {
-		H(x);
+		W(x);
 	}, [x]);
-	let [U, W] = v(null), [G, K] = v(null), [q, J] = v(""), Y = d(u(c, { activationConstraint: { distance: 8 } }), u(s, { coordinateGetter: p }));
-	function X({ active: e }) {
-		W(V.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 Z({ active: e, over: t }) {
+	function fe({ active: e, over: t }) {
 		if (!t) return;
-		let n = e.id, r = t.id, i = V.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 = V.find((e) => e.id === r), s = a?.id ?? o?.status;
-		!s || i.status === s || H((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 Q({ active: e, over: t }) {
-		let n = U?.status;
-		if (W(null), !t) {
-			H(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 = V.findIndex((e) => e.id === r), o = V.findIndex((e) => e.id === i), s;
-		if (s = a !== -1 && o !== -1 && a !== o ? f(V, a, o) : [...V], H(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 te(e) {
-		T ? K({
+	function me(e) {
+		w ? X({
 			mode: "edit",
 			task: e
-		}) : w?.(e);
+		}) : ie?.(e);
 	}
-	function ne(e) {
-		K({
+	function he(e) {
+		X({
 			mode: "add",
 			columnId: e
 		});
 	}
-	function re(e) {
-		let t = !V.find((t) => t.id === e.id), n = t ? [...V, e] : V.map((t) => t.id === e.id ? e : t);
-		H(n), C?.(n), t ? E?.(e) : D?.(e), K(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 ie(e) {
-		let t = V.filter((t) => t.id !== e);
-		H(t), C?.(t), O?.(e), K(null);
+	function _e(e) {
+		let t = U.filter((t) => t.id !== e);
+		W(t), C?.(t), E?.(e), X(null);
 	}
-	function ae(e) {
-		K({
+	function ve(e) {
+		X({
 			mode: "delete",
 			task: e
 		});
 	}
-	let $ = (I || q).trim().toLowerCase();
-	function oe(e) {
+	let $ = (R || Q).trim().toLowerCase();
+	function ye(e) {
 		return $ ? e.title.toLowerCase().includes($) || (e.assignee?.toLowerCase().includes($) ?? !1) : !0;
 	}
-	return /* @__PURE__ */ b(h, {
+	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: L,
-			height: R,
+			width: z,
+			height: B,
 			display: "flex",
 			flexDirection: "column",
 			overflow: "hidden"
 		},
 		children: [
-			F && /* @__PURE__ */ y(h, {
+			L && /* @__PURE__ */ y(p, {
 				className: e.searchFieldWrapper,
 				sx: {
 					px: 2,
 					pt: 1.5,
 					pb: .5
 				},
-				children: /* @__PURE__ */ y(ee, {
+				children: /* @__PURE__ */ y(g, {
 					className: e.searchField,
 					size: "small",
-					placeholder: B.searchFieldPlaceholder,
-					value: q,
-					onChange: (e) => J(e.target.value),
+					placeholder: H.searchFieldPlaceholder,
+					value: Q,
+					onChange: (e) => le(e.target.value),
 					slotProps: {
-						input: { startAdornment: /* @__PURE__ */ y(g, {
+						input: { startAdornment: /* @__PURE__ */ y(h, {
 							position: "start",
-							children: /* @__PURE__ */ y(m, {
+							children: /* @__PURE__ */ y(re, {
 								fontSize: "small",
 								sx: { color: "text.disabled" }
 							})
 						}) },
-						htmlInput: { "aria-label": B.searchFieldPlaceholder }
+						htmlInput: { "aria-label": H.searchFieldPlaceholder }
 					},
 					sx: { width: 280 }
 				})
 			}),
-			/* @__PURE__ */ b(a, {
-				sensors: Y,
-				collisionDetection: l,
-				onDragStart: X,
-				onDragOver: Z,
-				onDragEnd: Q,
-				children: [/* @__PURE__ */ y(h, {
+			/* @__PURE__ */ b(o, {
+				sensors: ue,
+				collisionDetection: u,
+				onDragStart: de,
+				onDragOver: fe,
+				onDragEnd: pe,
+				children: [/* @__PURE__ */ b(p, {
 					className: e.columns,
 					sx: {
 						flex: 1,
@@ -127,44 +160,86 @@ function x({ tasks: x, columns: S, onTasksChange: C, onCardClick: w, enableBuilt
 						overflowY: "hidden",
 						alignItems: "stretch"
 					},
-					children: S.map((e) => {
-						let t = V.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(oe),
+							tasks: t.filter(ye),
 							totalCount: t.length,
-							showPriority: A,
-							showAssignee: j,
-							showDueDate: M,
-							showDueDateWarning: N,
-							chipVariant: P,
-							t: B,
-							enableBuiltinDialogs: T,
-							onCardClick: te,
-							onAddClick: ne
+							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: U && /* @__PURE__ */ y(n, {
-					task: U,
-					showPriority: A,
-					showAssignee: j,
-					showDueDate: M,
-					showDueDateWarning: N,
-					chipVariant: P,
-					t: B,
+					}), 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: I,
+					t: H,
 					onCardClick: () => {},
 					isOverlay: !0
 				}) })]
 			}),
-			T && /* @__PURE__ */ y(r, {
-				state: G,
-				columns: S,
-				t: B,
-				onSave: re,
-				onDelete: ie,
-				onRequestDelete: ae,
-				onClose: () => K(null)
-			}, G ? `${G.mode}-${G.mode === "add" ? G.columnId : G.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

@@ -1,4 +1,9 @@
 export type KanbanTaskPriority = "low" | "medium" | "high" | "critical";
+export type KanbanSubtask = {
+    id: string;
+    title: string;
+    done: boolean;
+};
 export type KanbanTask = {
     id: string;
     title: string;
@@ -11,6 +16,8 @@ export type KanbanTask = {
     dueDate?: Date;
     /** Optional priority level — shown as a colored dot next to the card title when `showPriority` is true. */
     priority?: KanbanTaskPriority;
+    /** Optional checklist items — shown as a progress bar on the card and a checklist in the edit dialog. */
+    subtasks?: KanbanSubtask[];
 };
 export type KanbanColumn = {
     /** Used as the key — must match `KanbanTask.status` values. */
@@ -39,6 +46,24 @@ export type KanbanBoardTranslation = {
     noCardsLabel: string;
     /** Placeholder text for the built-in search field (`showSearchField={true}`). */
     searchFieldPlaceholder: string;
+    /** Section label for the subtask checklist in the edit/add dialog. */
+    dialogFieldSubtasks: string;
+    /** Placeholder for the "add subtask" input in the dialog. */
+    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 = {
@@ -94,6 +119,11 @@ export type KanbanBoardProps = {
      * `"filled"` — solid background, more prominent.
      */
     chipVariant?: "outlined" | "filled";
+    /**
+     * Show the subtask progress bar on cards and the subtask checklist in the edit/add dialog (default: true).
+     * Has no visual effect when a card has no `subtasks` field set.
+     */
+    showSubtasks?: boolean;
     /**
      * When `true`, renders a built-in `size="small"` search field above the board columns.
      * The board manages the search state internally — no extra wiring needed.
@@ -113,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

@@ -14,7 +14,16 @@ var e = {
 	dialogFieldDueDate: "Due date",
 	dialogFieldStatus: "Status",
 	noCardsLabel: "No cards",
-	searchFieldPlaceholder: "Search by title or assignee…"
+	searchFieldPlaceholder: "Search by title or assignee…",
+	dialogFieldSubtasks: "Subtasks",
+	dialogSubtaskAdd: "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.d.ts

@@ -5,11 +5,13 @@ type KanbanBoardCardProps = {
     showAssignee: boolean;
     showDueDate: boolean;
     showDueDateWarning: boolean;
+    showSubtasks: boolean;
+    enableBuiltinDialogs: boolean;
     chipVariant: "outlined" | "filled";
     t: Required<KanbanBoardTranslation>;
     onCardClick: (task: KanbanTask) => void;
     /** True when this card is the drag overlay ghost — rendered without transform/listeners. */
     isOverlay?: boolean;
 };
-export declare function KanbanBoardCard({ task, showPriority, showAssignee, showDueDate, showDueDateWarning, chipVariant, t, onCardClick, isOverlay, }: KanbanBoardCardProps): import("react/jsx-runtime").JSX.Element;
+export declare function KanbanBoardCard({ task, showPriority, showAssignee, showDueDate, showDueDateWarning, showSubtasks, enableBuiltinDialogs, chipVariant, t, onCardClick, isOverlay, }: KanbanBoardCardProps): import("react/jsx-runtime").JSX.Element;
 export {};