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

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

@@ -2,13 +2,24 @@ import { kanbanBoardClasses as e } from "./kanbanBoardClasses.js";
 import { KanbanBoardCard as t } from "./KanbanBoardCard.js";
 import { useDroppable as n } from "@dnd-kit/core";
 import { SortableContext as r, verticalListSortingStrategy as i } from "@dnd-kit/sortable";
-import { Box as a, Button as o, Chip as s, Typography as c } from "@mui/material";
-import { jsx as l, jsxs as u } from "react/jsx-runtime";
-import d from "@mui/icons-material/Add";
+import a from "@mui/icons-material/Add";
+import { Box as o, Button as s, Chip as c, IconButton as l, TextField as u, Tooltip as d, Typography as f } from "@mui/material";
+import { useState as p } from "react";
+import { jsx as m, jsxs as h } from "react/jsx-runtime";
+import g from "@mui/icons-material/DeleteOutlined";
+import _ from "@mui/icons-material/EditOutlined";
 //#region src/components/kanban-board/KanbanBoardColumn.tsx
-function f({ column: f, tasks: p, totalCount: m, showPriority: h, showAssignee: g, showDueDate: _, showDueDateWarning: v, chipVariant: y, t: b, enableBuiltinDialogs: x, onCardClick: S, onAddClick: C }) {
-	let { setNodeRef: w, isOver: T } = n({ id: f.id }), E = f.wipLimit !== void 0 && m > f.wipLimit, D = f.wipLimit === void 0 ? `${p.length}` : `${p.length} / ${f.wipLimit}`, O = f.color ?? "primary.main";
-	return /* @__PURE__ */ u(a, {
+function v({ column: v, tasks: y, totalCount: b, showPriority: x, showAssignee: S, showDueDate: C, showDueDateWarning: w, showSubtasks: T, chipVariant: E, t: D, enableBuiltinDialogs: O, enableColumnManagement: k, onCardClick: A, onAddClick: j, onColumnRename: M, onColumnDeleteRequest: N }) {
+	let { setNodeRef: P, isOver: F } = n({ id: v.id }), [I, L] = p(!1), [R, z] = p(v.label);
+	function B() {
+		let e = R.trim();
+		e && e !== v.label ? M(v.id, e) : z(v.label), L(!1);
+	}
+	function V() {
+		z(v.label), L(!0);
+	}
+	let H = v.wipLimit !== void 0 && b > v.wipLimit, U = v.wipLimit === void 0 ? `${y.length}` : `${y.length} / ${v.wipLimit}`, W = v.color ?? "primary.main";
+	return /* @__PURE__ */ h(o, {
 		className: e.column,
 		sx: {
 			display: "flex",
@@ -23,7 +34,7 @@ function f({ column: f, tasks: p, totalCount: m, showPriority: h, showAssignee:
 			borderColor: "divider"
 		},
 		children: [
-			/* @__PURE__ */ u(a, {
+			/* @__PURE__ */ h(o, {
 				className: e.columnHeader,
 				sx: {
 					px: 2,
@@ -33,38 +44,86 @@ function f({ column: f, tasks: p, totalCount: m, showPriority: h, showAssignee:
 					gap: 1,
 					borderBottom: "1px solid",
 					borderColor: "divider",
-					borderTop: `3px solid ${f.color ?? "transparent"}`,
+					borderTop: `3px solid ${v.color ?? "transparent"}`,
 					bgcolor: (e) => e.palette.mode === "dark" ? "grey.800" : "grey.300"
 				},
-				children: [/* @__PURE__ */ l(c, {
-					className: e.columnTitle,
-					variant: "subtitle2",
-					sx: {
-						flex: 1,
-						fontWeight: 700
-					},
-					children: f.label
-				}), /* @__PURE__ */ l(s, {
-					className: e.columnCount,
-					label: D,
-					size: "small",
-					color: E ? "error" : "default",
-					sx: {
-						height: 20,
-						fontSize: "0.7rem",
-						...!E && f.color && {
-							bgcolor: f.color,
-							color: "#fff"
-						}
-					},
-					"aria-label": `${p.length} cards${f.wipLimit ? ` of ${f.wipLimit} limit` : ""}${p.length === m ? "" : ` (${m} total)`}`
-				})]
+				children: [
+					I ? /* @__PURE__ */ m(u, {
+						autoFocus: !0,
+						size: "small",
+						value: R,
+						onChange: (e) => z(e.target.value),
+						onBlur: B,
+						onKeyDown: (e) => {
+							e.key === "Enter" && (e.preventDefault(), B()), e.key === "Escape" && (z(v.label), L(!1));
+						},
+						sx: {
+							flex: 1,
+							"& .MuiInputBase-input": {
+								fontWeight: 700,
+								fontSize: "0.875rem",
+								py: .5
+							}
+						},
+						slotProps: { htmlInput: { "aria-label": D.columnRenameTooltip } }
+					}) : /* @__PURE__ */ m(f, {
+						className: e.columnTitle,
+						variant: "subtitle2",
+						sx: {
+							flex: 1,
+							fontWeight: 700
+						},
+						children: v.label
+					}),
+					/* @__PURE__ */ m(c, {
+						className: e.columnCount,
+						label: U,
+						size: "small",
+						color: H ? "error" : "default",
+						sx: {
+							height: 20,
+							fontSize: "0.7rem",
+							...!H && v.color && {
+								bgcolor: v.color,
+								color: "#fff"
+							}
+						},
+						"aria-label": `${y.length} cards${v.wipLimit ? ` of ${v.wipLimit} limit` : ""}${y.length === b ? "" : ` (${b} total)`}`
+					}),
+					k && !I && /* @__PURE__ */ h(o, {
+						className: e.columnActions,
+						sx: {
+							display: "flex",
+							gap: .25
+						},
+						children: [/* @__PURE__ */ m(d, {
+							title: D.columnRenameTooltip,
+							children: /* @__PURE__ */ m(l, {
+								size: "small",
+								onClick: V,
+								sx: { p: .25 },
+								children: /* @__PURE__ */ m(_, { sx: { fontSize: 18 } })
+							})
+						}), /* @__PURE__ */ m(d, {
+							title: D.columnDeleteTooltip,
+							children: /* @__PURE__ */ m(l, {
+								size: "small",
+								onClick: () => N(v.id),
+								sx: {
+									p: .25,
+									color: "error.main"
+								},
+								children: /* @__PURE__ */ m(g, { sx: { fontSize: 18 } })
+							})
+						})]
+					})
+				]
 			}),
-			/* @__PURE__ */ l(r, {
-				items: p.map((e) => e.id),
+			/* @__PURE__ */ m(r, {
+				items: y.map((e) => e.id),
 				strategy: i,
-				children: /* @__PURE__ */ u(a, {
-					ref: w,
+				children: /* @__PURE__ */ h(o, {
+					ref: P,
 					className: e.columnBody,
 					sx: {
 						flex: 1,
@@ -73,10 +132,10 @@ function f({ column: f, tasks: p, totalCount: m, showPriority: h, showAssignee:
 						"&::-webkit-scrollbar": { display: "none" },
 						p: 1,
 						minHeight: 80,
-						bgcolor: (e) => T ? e.palette.action.selected : e.palette.mode === "dark" ? e.palette.grey[900] : e.palette.grey[100],
+						bgcolor: (e) => F ? e.palette.action.selected : e.palette.mode === "dark" ? e.palette.grey[900] : e.palette.grey[100],
 						transition: "background-color 0.15s"
 					},
-					children: [p.length === 0 && !T && /* @__PURE__ */ l(c, {
+					children: [y.length === 0 && !F && /* @__PURE__ */ m(f, {
 						variant: "caption",
 						color: "text.disabled",
 						sx: {
@@ -84,36 +143,38 @@ function f({ column: f, tasks: p, totalCount: m, showPriority: h, showAssignee:
 							textAlign: "center",
 							mt: 2
 						},
-						children: b.noCardsLabel
-					}), p.map((e) => /* @__PURE__ */ l(t, {
+						children: D.noCardsLabel
+					}), y.map((e) => /* @__PURE__ */ m(t, {
 						task: e,
-						showPriority: h,
-						showAssignee: g,
-						showDueDate: _,
-						showDueDateWarning: v,
-						chipVariant: y,
-						t: b,
-						onCardClick: S
+						showPriority: x,
+						showAssignee: S,
+						showDueDate: C,
+						showDueDateWarning: w,
+						showSubtasks: T,
+						enableBuiltinDialogs: O,
+						chipVariant: E,
+						t: D,
+						onCardClick: A
 					}, e.id))]
 				})
 			}),
-			x && /* @__PURE__ */ l(a, {
+			O && /* @__PURE__ */ m(o, {
 				sx: {
 					p: 1,
 					borderTop: "1px solid",
 					borderColor: "divider"
 				},
-				children: /* @__PURE__ */ l(o, {
+				children: /* @__PURE__ */ m(s, {
 					className: e.addButton,
-					startIcon: /* @__PURE__ */ l(d, {}),
+					startIcon: /* @__PURE__ */ m(a, {}),
 					size: "small",
 					fullWidth: !0,
-					onClick: () => C(f.id),
+					onClick: () => j(v.id),
 					sx: {
 						justifyContent: "flex-start",
-						color: O,
+						color: W,
 						border: "1px dashed",
-						borderColor: O,
+						borderColor: W,
 						borderRadius: 1,
 						py: .75,
 						fontWeight: 600,
@@ -123,11 +184,11 @@ function f({ column: f, tasks: p, totalCount: m, showPriority: h, showAssignee:
 							borderStyle: "dashed"
 						}
 					},
-					children: b.addCardLabel
+					children: D.addCardLabel
 				})
 			})
 		]
 	});
 }
 //#endregion
-export { f as KanbanBoardColumn };
+export { v as KanbanBoardColumn };

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

@@ -0,0 +1,17 @@
+import type { KanbanBoardTranslation, KanbanColumn } from "./KanbanBoard.types";
+export type KanbanColumnDialogState = {
+    mode: "add";
+} | {
+    mode: "delete";
+    column: KanbanColumn;
+    cardCount: number;
+};
+type Props = {
+    state: KanbanColumnDialogState | null;
+    t: Required<KanbanBoardTranslation>;
+    onAdd: (column: KanbanColumn) => void;
+    onDelete: (columnId: string) => void;
+    onClose: () => void;
+};
+export declare function KanbanBoardColumnDialog({ state, t, onAdd, onDelete, onClose }: Props): import("react/jsx-runtime").JSX.Element | null;
+export {};

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

@@ -0,0 +1,78 @@
+import { Box as e, Button as t, Dialog as n, DialogActions as r, DialogContent as i, DialogTitle as a, TextField as o, Typography as s } from "@mui/material";
+import { useState as c } from "react";
+import { jsx as l, jsxs as u } from "react/jsx-runtime";
+//#region src/components/kanban-board/KanbanBoardColumnDialog.tsx
+function d({ state: d, t: f, onAdd: p, onDelete: m, onClose: h }) {
+	let [g, _] = c("");
+	if (!d) return null;
+	function v() {
+		let e = g.trim();
+		e && (p({
+			id: crypto.randomUUID(),
+			label: e
+		}), _(""));
+	}
+	if (d.mode === "add") return /* @__PURE__ */ u(n, {
+		open: !0,
+		onClose: h,
+		maxWidth: "xs",
+		fullWidth: !0,
+		children: [
+			/* @__PURE__ */ l(a, { children: f.columnAddLabel }),
+			/* @__PURE__ */ l(i, { children: /* @__PURE__ */ l(o, {
+				autoFocus: !0,
+				fullWidth: !0,
+				size: "small",
+				placeholder: f.columnAddPlaceholder,
+				value: g,
+				onChange: (e) => _(e.target.value),
+				onKeyDown: (e) => {
+					e.key === "Enter" && v(), e.key === "Escape" && h();
+				},
+				sx: { mt: 1 }
+			}) }),
+			/* @__PURE__ */ u(r, { children: [/* @__PURE__ */ l(t, {
+				onClick: h,
+				children: f.dialogCancel
+			}), /* @__PURE__ */ l(t, {
+				variant: "contained",
+				onClick: v,
+				disabled: !g.trim(),
+				children: f.dialogSave
+			})] })
+		]
+	});
+	let y = f.columnDeleteConfirm.replace("{label}", d.column.label), b = d.cardCount > 0;
+	return /* @__PURE__ */ u(n, {
+		open: !0,
+		onClose: h,
+		maxWidth: "xs",
+		fullWidth: !0,
+		children: [
+			/* @__PURE__ */ l(a, { children: y }),
+			b && /* @__PURE__ */ l(i, { children: /* @__PURE__ */ l(e, {
+				sx: {
+					display: "flex",
+					flexDirection: "column",
+					gap: 1
+				},
+				children: /* @__PURE__ */ l(s, {
+					variant: "body2",
+					color: "text.secondary",
+					children: f.columnDeleteCardsWarning.replace("{count}", String(d.cardCount))
+				})
+			}) }),
+			/* @__PURE__ */ u(r, { children: [/* @__PURE__ */ l(t, {
+				onClick: h,
+				children: f.dialogCancel
+			}), /* @__PURE__ */ l(t, {
+				color: "error",
+				variant: "contained",
+				onClick: () => m(d.column.id),
+				children: f.dialogDelete
+			})] })
+		]
+	});
+}
+//#endregion
+export { d as KanbanBoardColumnDialog };

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

@@ -50,4 +50,12 @@ export declare const kanbanBoardClasses: {
     readonly searchFieldWrapper: "MuiTsKanbanBoard-searchFieldWrapper";
     /** The built-in search TextField (`showSearchField={true}`). */
     readonly searchField: "MuiTsKanbanBoard-searchField";
+    /** The subtask progress row at the bottom of a card (bar + "N / M ✓" label). */
+    readonly cardSubtasks: "MuiTsKanbanBoard-cardSubtasks";
+    /** The LinearProgress bar inside the subtask row. */
+    readonly cardSubtasksBar: "MuiTsKanbanBoard-cardSubtasksBar";
+    /** The edit / delete icon row that appears on column header hover (`enableColumnManagement`). */
+    readonly columnActions: "MuiTsKanbanBoard-columnActions";
+    /** The "Add column" ghost button at the end of the columns row (`enableColumnManagement`). */
+    readonly columnAddButton: "MuiTsKanbanBoard-columnAddButton";
 };

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

@@ -15,7 +15,11 @@ var e = {
 	cardPriorityDot: "MuiTsKanbanBoard-cardPriorityDot",
 	addButton: "MuiTsKanbanBoard-addButton",
 	searchFieldWrapper: "MuiTsKanbanBoard-searchFieldWrapper",
-	searchField: "MuiTsKanbanBoard-searchField"
+	searchField: "MuiTsKanbanBoard-searchField",
+	cardSubtasks: "MuiTsKanbanBoard-cardSubtasks",
+	cardSubtasksBar: "MuiTsKanbanBoard-cardSubtasksBar",
+	columnActions: "MuiTsKanbanBoard-columnActions",
+	columnAddButton: "MuiTsKanbanBoard-columnAddButton"
 };
 //#endregion
 export { e as kanbanBoardClasses };

package/dist/components/rich-text-editor/RichTextEditorTableMenu.js

@@ -1,22 +1,22 @@
-import { Divider as e, IconButton as t, ListItemIcon as n, ListItemText as r, Menu as i, MenuItem as a, Tooltip as o } from "@mui/material";
-import { useState as s } from "react";
-import { Fragment as c, jsx as l, jsxs as u } from "react/jsx-runtime";
-import d from "@mui/icons-material/Delete";
-import f from "@mui/icons-material/Add";
+import e from "@mui/icons-material/Add";
+import { Divider as t, IconButton as n, ListItemIcon as r, ListItemText as i, Menu as a, MenuItem as o, Tooltip as s } from "@mui/material";
+import { useState as c } from "react";
+import { Fragment as l, jsx as u, jsxs as d } from "react/jsx-runtime";
+import f from "@mui/icons-material/Delete";
 import p from "@mui/icons-material/TableChart";
 //#region src/components/rich-text-editor/RichTextEditorTableMenu.tsx
 function m({ editor: m, translation: h, disabled: g }) {
-	let [_, v] = s(null), y = g || !m, b = m?.isActive("table") ?? !1;
+	let [_, v] = c(null), y = g || !m, b = m?.isActive("table") ?? !1;
 	function x() {
 		v(null);
 	}
 	function S(e) {
 		e(), x();
 	}
-	return /* @__PURE__ */ u(c, { children: [/* @__PURE__ */ l(o, {
+	return /* @__PURE__ */ d(l, { children: [/* @__PURE__ */ u(s, {
 		title: h.table,
 		arrow: !0,
-		children: /* @__PURE__ */ l("span", { children: /* @__PURE__ */ l(t, {
+		children: /* @__PURE__ */ u("span", { children: /* @__PURE__ */ u(n, {
 			size: "small",
 			onMouseDown: (e) => e.preventDefault(),
 			onClick: (e) => v(e.currentTarget),
@@ -25,67 +25,67 @@ function m({ editor: m, translation: h, disabled: g }) {
 			sx: { borderRadius: 1 },
 			"aria-label": h.table,
 			"aria-pressed": b,
-			children: /* @__PURE__ */ l(p, { fontSize: "small" })
+			children: /* @__PURE__ */ u(p, { fontSize: "small" })
 		}) })
-	}), /* @__PURE__ */ u(i, {
+	}), /* @__PURE__ */ d(a, {
 		anchorEl: _,
 		open: !!_,
 		onClose: x,
 		slotProps: { paper: { sx: { minWidth: 220 } } },
 		children: [
-			/* @__PURE__ */ u(a, {
+			/* @__PURE__ */ d(o, {
 				onClick: () => S(() => m?.chain().focus().insertTable({
 					rows: 3,
 					cols: 3,
 					withHeaderRow: !0
 				}).run()),
-				children: [/* @__PURE__ */ l(n, { children: /* @__PURE__ */ l(p, { fontSize: "small" }) }), /* @__PURE__ */ l(r, { children: h.insertTable })]
+				children: [/* @__PURE__ */ u(r, { children: /* @__PURE__ */ u(p, { fontSize: "small" }) }), /* @__PURE__ */ u(i, { children: h.insertTable })]
 			}),
-			b && /* @__PURE__ */ l(e, {}),
-			b && /* @__PURE__ */ u(a, {
+			b && /* @__PURE__ */ u(t, {}),
+			b && /* @__PURE__ */ d(o, {
 				onClick: () => S(() => m?.chain().focus().addRowBefore().run()),
-				children: [/* @__PURE__ */ l(n, { children: /* @__PURE__ */ l(f, { fontSize: "small" }) }), /* @__PURE__ */ l(r, { children: h.addRowBefore })]
+				children: [/* @__PURE__ */ u(r, { children: /* @__PURE__ */ u(e, { fontSize: "small" }) }), /* @__PURE__ */ u(i, { children: h.addRowBefore })]
 			}),
-			b && /* @__PURE__ */ u(a, {
+			b && /* @__PURE__ */ d(o, {
 				onClick: () => S(() => m?.chain().focus().addRowAfter().run()),
-				children: [/* @__PURE__ */ l(n, { children: /* @__PURE__ */ l(f, { fontSize: "small" }) }), /* @__PURE__ */ l(r, { children: h.addRowAfter })]
+				children: [/* @__PURE__ */ u(r, { children: /* @__PURE__ */ u(e, { fontSize: "small" }) }), /* @__PURE__ */ u(i, { children: h.addRowAfter })]
 			}),
-			b && /* @__PURE__ */ u(a, {
+			b && /* @__PURE__ */ d(o, {
 				onClick: () => S(() => m?.chain().focus().deleteRow().run()),
-				children: [/* @__PURE__ */ l(n, { children: /* @__PURE__ */ l(d, {
+				children: [/* @__PURE__ */ u(r, { children: /* @__PURE__ */ u(f, {
 					fontSize: "small",
 					color: "error"
-				}) }), /* @__PURE__ */ l(r, {
+				}) }), /* @__PURE__ */ u(i, {
 					sx: { color: "error.main" },
 					children: h.deleteRow
 				})]
 			}),
-			b && /* @__PURE__ */ l(e, {}),
-			b && /* @__PURE__ */ u(a, {
+			b && /* @__PURE__ */ u(t, {}),
+			b && /* @__PURE__ */ d(o, {
 				onClick: () => S(() => m?.chain().focus().addColumnBefore().run()),
-				children: [/* @__PURE__ */ l(n, { children: /* @__PURE__ */ l(f, { fontSize: "small" }) }), /* @__PURE__ */ l(r, { children: h.addColumnBefore })]
+				children: [/* @__PURE__ */ u(r, { children: /* @__PURE__ */ u(e, { fontSize: "small" }) }), /* @__PURE__ */ u(i, { children: h.addColumnBefore })]
 			}),
-			b && /* @__PURE__ */ u(a, {
+			b && /* @__PURE__ */ d(o, {
 				onClick: () => S(() => m?.chain().focus().addColumnAfter().run()),
-				children: [/* @__PURE__ */ l(n, { children: /* @__PURE__ */ l(f, { fontSize: "small" }) }), /* @__PURE__ */ l(r, { children: h.addColumnAfter })]
+				children: [/* @__PURE__ */ u(r, { children: /* @__PURE__ */ u(e, { fontSize: "small" }) }), /* @__PURE__ */ u(i, { children: h.addColumnAfter })]
 			}),
-			b && /* @__PURE__ */ u(a, {
+			b && /* @__PURE__ */ d(o, {
 				onClick: () => S(() => m?.chain().focus().deleteColumn().run()),
-				children: [/* @__PURE__ */ l(n, { children: /* @__PURE__ */ l(d, {
+				children: [/* @__PURE__ */ u(r, { children: /* @__PURE__ */ u(f, {
 					fontSize: "small",
 					color: "error"
-				}) }), /* @__PURE__ */ l(r, {
+				}) }), /* @__PURE__ */ u(i, {
 					sx: { color: "error.main" },
 					children: h.deleteColumn
 				})]
 			}),
-			b && /* @__PURE__ */ l(e, {}),
-			b && /* @__PURE__ */ u(a, {
+			b && /* @__PURE__ */ u(t, {}),
+			b && /* @__PURE__ */ d(o, {
 				onClick: () => S(() => m?.chain().focus().deleteTable().run()),
-				children: [/* @__PURE__ */ l(n, { children: /* @__PURE__ */ l(d, {
+				children: [/* @__PURE__ */ u(r, { children: /* @__PURE__ */ u(f, {
 					fontSize: "small",
 					color: "error"
-				}) }), /* @__PURE__ */ l(r, {
+				}) }), /* @__PURE__ */ u(i, {
 					sx: { color: "error.main" },
 					children: h.deleteTable
 				})]

package/dist/components/tag-selection/TagSelectionAutocomplete.js

@@ -2,8 +2,8 @@ import { tagSelectionClasses as e } from "./tagSelectionClasses.js";
 import { Autocomplete as t, Box as n, Chip as r, IconButton as i, Stack as a, Switch as ee, TextField as o, Tooltip as s, Typography as c } from "@mui/material";
 import { useState as l } from "react";
 import { Fragment as u, jsx as d, jsxs as f } from "react/jsx-runtime";
-import p from "@mui/icons-material/Check";
-import m from "@mui/icons-material/Close";
+import p from "@mui/icons-material/Close";
+import m from "@mui/icons-material/Check";
 //#region src/components/tag-selection/TagSelectionAutocomplete.tsx
 var te = [
 	"default",
@@ -191,13 +191,13 @@ function x({ availableTags: x, searchValue: S, translation: C, onSearchChange: w
 							onClick: Z,
 							disabled: q,
 							"aria-label": C.confirmCreateLabel,
-							children: /* @__PURE__ */ d(p, { fontSize: "small" })
+							children: /* @__PURE__ */ d(m, { fontSize: "small" })
 						}), /* @__PURE__ */ d(i, {
 							size: "small",
 							onMouseDown: $,
 							onClick: Q,
 							"aria-label": C.cancelCreateLabel,
-							children: /* @__PURE__ */ d(m, { fontSize: "small" })
+							children: /* @__PURE__ */ d(p, { fontSize: "small" })
 						})] }), e.slotProps?.input?.endAdornment] })
 					}
 				}