@thebuoyant-tsdev/mui-ts-library 3.16.0 → 3.17.1

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

@@ -1,17 +1,17 @@
-import { getVisibleTasks as e } from "./util/gantt-chart.util.js";
-import { STATUS_BAR_COLOR as t, STATUS_CHIP_COLOR as n } from "./GanttChart.constants.js";
-import { GanttTaskDialog as r } from "./GanttTaskDialog.js";
-import { GanttDeleteDialog as i } from "./GanttDeleteDialog.js";
-import { useGanttChartStore as a, useGanttTheme as o, useGanttTranslations as s, useRawGanttChartStore as c } from "./GanttChart.js";
-import { useMemo as l, useState as u } from "react";
-import { Box as d, Chip as f, IconButton as p, Menu as m, MenuItem as h, TextField as g, Tooltip as _, Typography as v } from "@mui/material";
-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";
-import w from "@mui/icons-material/Add";
-import T from "@mui/icons-material/Edit";
+import { filterByAssignee as e, getVisibleTasks as t } from "./util/gantt-chart.util.js";
+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 a } from "./GanttDeleteDialog.js";
+import { useGanttChartStore as o, useGanttTheme as s, useGanttTranslations as c, useRawGanttChartStore as l } from "./GanttChart.js";
+import { useMemo as u, useState as d } from "react";
+import { Box as f, Chip as p, IconButton as m, Menu as h, MenuItem as g, TextField as _, Tooltip as v, Typography as y } from "@mui/material";
+import { Fragment as b, jsx as x, jsxs as S } from "react/jsx-runtime";
+import C from "@mui/icons-material/Delete";
+import { useVirtualizer as w } from "@tanstack/react-virtual";
+import T from "@mui/icons-material/Add";
+import E from "@mui/icons-material/Edit";
 //#region src/components/gantt-chart/GanttTaskPanel.tsx
-function E(e, t) {
+function D(e, t) {
 	return {
 		planned: t.statusPlanned,
 		"in-progress": t.statusInProgress,
@@ -19,11 +19,11 @@ function E(e, t) {
 		blocked: t.statusBlocked
 	}[e];
 }
-function D({ task: e, expandedIds: r, toggleExpand: i, hasActionsColumn: a, showAssigneeColumn: c, onTaskClick: l, onAddTask: y, onEditTask: C, onDeleteTask: D, onStatusChange: O, inlineEdit: k, onInlineRename: A }) {
-	let [j, M] = u(null), [N, P] = u(null), F = s(), { statusColors: I } = o(), L = () => {
+function O({ task: e, expandedIds: t, toggleExpand: i, hasActionsColumn: a, showAssigneeColumn: o, onTaskClick: l, onAddTask: u, onEditTask: b, onDeleteTask: w, onStatusChange: O, inlineEdit: k, onInlineRename: A }) {
+	let [j, M] = d(null), [N, P] = d(null), F = c(), { statusColors: I } = s(), L = () => {
 		N !== null && N.trim() && A?.(e, N.trim()), P(null);
 	};
-	return /* @__PURE__ */ x(d, {
+	return /* @__PURE__ */ S(f, {
 		className: "gantt-task-row",
 		"data-testid": `gantt-task-row-${e.id}`,
 		sx: {
@@ -38,7 +38,7 @@ function D({ task: e, expandedIds: r, toggleExpand: i, hasActionsColumn: a, show
 		},
 		onClick: () => l?.(e),
 		children: [
-			/* @__PURE__ */ x(d, {
+			/* @__PURE__ */ S(f, {
 				sx: {
 					flex: 1,
 					minWidth: 0,
@@ -50,14 +50,14 @@ function D({ task: e, expandedIds: r, toggleExpand: i, hasActionsColumn: a, show
 					height: "100%"
 				},
 				children: [
-					/* @__PURE__ */ b(d, {
+					/* @__PURE__ */ x(f, {
 						sx: {
 							width: 16,
 							flexShrink: 0,
 							display: "flex",
 							justifyContent: "center"
 						},
-						children: e.children.length > 0 && /* @__PURE__ */ b(d, {
+						children: e.children.length > 0 && /* @__PURE__ */ x(f, {
 							component: "span",
 							sx: {
 								fontSize: 9,
@@ -67,18 +67,18 @@ function D({ task: e, expandedIds: r, toggleExpand: i, hasActionsColumn: a, show
 							onClick: (t) => {
 								t.stopPropagation(), i(e.id);
 							},
-							children: r.has(e.id) ? "▼" : "▶"
+							children: t.has(e.id) ? "▼" : "▶"
 						})
 					}),
-					/* @__PURE__ */ b(d, { sx: {
+					/* @__PURE__ */ x(f, { sx: {
 						width: 8,
 						height: 8,
 						borderRadius: e.isMilestone ? 0 : "50%",
 						transform: e.isMilestone ? "rotate(45deg)" : void 0,
 						flexShrink: 0,
-						bgcolor: e.color ?? I?.[e.status] ?? t[e.status] ?? "grey.400"
+						bgcolor: e.color ?? I?.[e.status] ?? n[e.status] ?? "grey.400"
 					} }),
-					N === null ? /* @__PURE__ */ b(v, {
+					N === null ? /* @__PURE__ */ x(y, {
 						variant: "body2",
 						noWrap: !0,
 						sx: {
@@ -90,7 +90,7 @@ function D({ task: e, expandedIds: r, toggleExpand: i, hasActionsColumn: a, show
 							t.stopPropagation(), P(e.name);
 						} : void 0,
 						children: e.name
-					}) : /* @__PURE__ */ b(g, {
+					}) : /* @__PURE__ */ x(_, {
 						size: "small",
 						variant: "standard",
 						value: N,
@@ -109,7 +109,7 @@ function D({ task: e, expandedIds: r, toggleExpand: i, hasActionsColumn: a, show
 					})
 				]
 			}),
-			c && /* @__PURE__ */ b(d, {
+			o && /* @__PURE__ */ x(f, {
 				sx: {
 					width: 110,
 					flexShrink: 0,
@@ -118,14 +118,14 @@ function D({ task: e, expandedIds: r, toggleExpand: i, hasActionsColumn: a, show
 					px: 1,
 					overflow: "hidden"
 				},
-				children: /* @__PURE__ */ b(v, {
+				children: /* @__PURE__ */ x(y, {
 					variant: "caption",
 					noWrap: !0,
 					color: e.assignee ? "text.primary" : "text.disabled",
 					children: e.assignee ?? "—"
 				})
 			}),
-			a && /* @__PURE__ */ x(d, {
+			a && /* @__PURE__ */ S(f, {
 				className: "gantt-row-actions",
 				sx: {
 					width: 96,
@@ -136,45 +136,45 @@ function D({ task: e, expandedIds: r, toggleExpand: i, hasActionsColumn: a, show
 					pr: .5
 				},
 				children: [
-					C && /* @__PURE__ */ b(_, {
+					b && /* @__PURE__ */ x(v, {
 						title: F.editTaskTooltip,
-						children: /* @__PURE__ */ b(p, {
+						children: /* @__PURE__ */ x(m, {
 							size: "small",
 							"aria-label": F.editTaskTooltip,
 							"data-testid": `gantt-edit-task-${e.id}`,
 							onClick: (t) => {
-								t.stopPropagation(), C(e);
+								t.stopPropagation(), b(e);
 							},
-							children: /* @__PURE__ */ b(T, { fontSize: "inherit" })
+							children: /* @__PURE__ */ x(E, { fontSize: "inherit" })
 						})
 					}),
-					y && /* @__PURE__ */ b(_, {
+					u && /* @__PURE__ */ x(v, {
 						title: F.addTaskTooltip,
-						children: /* @__PURE__ */ b(p, {
+						children: /* @__PURE__ */ x(m, {
 							size: "small",
 							"aria-label": F.addTaskTooltip,
 							"data-testid": `gantt-add-task-${e.id}`,
 							onClick: (t) => {
-								t.stopPropagation(), y(e);
+								t.stopPropagation(), u(e);
 							},
-							children: /* @__PURE__ */ b(w, { fontSize: "inherit" })
+							children: /* @__PURE__ */ x(T, { fontSize: "inherit" })
 						})
 					}),
-					D && /* @__PURE__ */ b(_, {
+					w && /* @__PURE__ */ x(v, {
 						title: F.deleteTaskTooltip,
-						children: /* @__PURE__ */ b(p, {
+						children: /* @__PURE__ */ x(m, {
 							size: "small",
 							"aria-label": F.deleteTaskTooltip,
 							"data-testid": `gantt-delete-task-${e.id}`,
 							onClick: (t) => {
-								t.stopPropagation(), D(e);
+								t.stopPropagation(), w(e);
 							},
-							children: /* @__PURE__ */ b(S, { fontSize: "inherit" })
+							children: /* @__PURE__ */ x(C, { fontSize: "inherit" })
 						})
 					})
 				]
 			}),
-			/* @__PURE__ */ x(d, {
+			/* @__PURE__ */ S(f, {
 				sx: {
 					width: 90,
 					flexShrink: 0,
@@ -182,11 +182,11 @@ function D({ task: e, expandedIds: r, toggleExpand: i, hasActionsColumn: a, show
 					alignItems: "center",
 					justifyContent: "center"
 				},
-				children: [/* @__PURE__ */ b(f, {
-					label: E(e.status, F),
+				children: [/* @__PURE__ */ x(p, {
+					label: D(e.status, F),
 					size: "small",
 					variant: "outlined",
-					color: e.color ?? I?.[e.status] ? "default" : n[e.status] ?? "default",
+					color: e.color ?? I?.[e.status] ? "default" : r[e.status] ?? "default",
 					sx: {
 						height: 20,
 						fontSize: 10,
@@ -199,7 +199,7 @@ function D({ task: e, expandedIds: r, toggleExpand: i, hasActionsColumn: a, show
 					onClick: O ? (e) => {
 						e.stopPropagation(), M(e.currentTarget);
 					} : void 0
-				}), O && /* @__PURE__ */ b(m, {
+				}), O && /* @__PURE__ */ x(h, {
 					anchorEl: j,
 					open: !!j,
 					onClose: () => M(null),
@@ -208,65 +208,72 @@ function D({ task: e, expandedIds: r, toggleExpand: i, hasActionsColumn: a, show
 						"in-progress",
 						"done",
 						"blocked"
-					].map((t) => /* @__PURE__ */ b(h, {
+					].map((t) => /* @__PURE__ */ x(g, {
 						selected: e.status === t,
 						onClick: () => {
 							O(e, t), M(null);
 						},
-						children: E(t, F)
+						children: D(t, F)
 					}, t))
 				})]
 			})
 		]
 	});
 }
-function O({ scrollRef: t, onScroll: n, panelWidth: o, onTaskClick: f, onAddTask: p, onEditTask: m, onDeleteTask: h, onStatusChange: g, onTasksChange: _, enableBuiltinDialogs: S, onTaskCreated: w, onTaskUpdated: T, onTaskDeleted: E, inlineEdit: O, virtualizeRows: k = !1, showAssigneeColumn: A = !1 }) {
-	let j = s(), M = c(), N = a((e) => e.taskTree), P = a((e) => e.expandedIds), F = a((e) => e.toggleExpand), I = a((e) => e.timeScale), L = a((e) => e.addTask), R = a((e) => e.updateTask), ee = a((e) => e.deleteTask), z = l(() => e(N, P), [N, P]), B = C({
-		count: z.length,
-		getScrollElement: () => t.current,
+function k({ scrollRef: n, onScroll: r, panelWidth: s, onTaskClick: p, onAddTask: m, onEditTask: h, onDeleteTask: g, onStatusChange: _, onTasksChange: v, enableBuiltinDialogs: C, onTaskCreated: T, onTaskUpdated: E, onTaskDeleted: D, inlineEdit: k, virtualizeRows: A = !1, showAssigneeColumn: j = !1 }) {
+	let M = c(), N = l(), P = o((e) => e.taskTree), F = o((e) => e.expandedIds), I = o((e) => e.toggleExpand), L = o((e) => e.timeScale), ee = o((e) => e.addTask), R = o((e) => e.updateTask), te = o((e) => e.deleteTask), z = o((e) => e.assigneeFilter), B = u(() => {
+		let n = t(P, F);
+		return z ? e(n, z) : n;
+	}, [
+		P,
+		F,
+		z
+	]), V = w({
+		count: B.length,
+		getScrollElement: () => n.current,
 		estimateSize: () => 40,
 		overscan: 5
-	}), [V, H] = u(!1), [U, W] = u(!1), [G, K] = u(!1), [q, J] = u(null), te = (e) => {
+	}), [ne, H] = d(!1), [re, U] = d(!1), [ie, W] = d(!1), [G, K] = d(null), q = (e) => {
 		let t = {
 			...e,
 			id: crypto.randomUUID()
 		};
-		L(t), _?.(M.getState().tasks), w?.(t), H(!1);
-	}, ne = (e) => {
-		if (!q) return;
+		ee(t), v?.(N.getState().tasks), T?.(t), H(!1);
+	}, J = (e) => {
+		if (!G) return;
 		let t = {
 			...e,
-			id: q.id
+			id: G.id
 		};
-		R(t), _?.(M.getState().tasks), T?.(t), W(!1);
-	}, re = () => {
-		q && (ee(q.id), _?.(M.getState().tasks), E?.(q.id), K(!1));
+		R(t), v?.(N.getState().tasks), E?.(t), U(!1);
+	}, ae = () => {
+		G && (te(G.id), v?.(N.getState().tasks), D?.(G.id), W(!1));
 	}, Y = (e, t) => {
 		let n = {
 			...e,
 			name: t
 		};
-		R(n), _?.(M.getState().tasks), T?.(n);
-	}, X = S ? (e) => {
-		J(e), H(!0);
-	} : p, Z = S ? (e) => {
-		J(e), W(!0);
-	} : m, Q = S ? (e) => {
-		J(e), K(!0);
-	} : h, $ = !!(X || Z || Q);
-	return /* @__PURE__ */ x(d, {
-		ref: t,
-		onScroll: n,
+		R(n), v?.(N.getState().tasks), E?.(n);
+	}, X = C ? (e) => {
+		K(e), H(!0);
+	} : m, Z = C ? (e) => {
+		K(e), U(!0);
+	} : h, Q = C ? (e) => {
+		K(e), W(!0);
+	} : g, $ = !!(X || Z || Q);
+	return /* @__PURE__ */ S(f, {
+		ref: n,
+		onScroll: r,
 		sx: {
-			width: o,
+			width: s,
 			flexShrink: 0,
 			overflowY: "auto",
 			overflowX: "hidden"
 		},
 		children: [
-			/* @__PURE__ */ x(d, {
+			/* @__PURE__ */ S(f, {
 				sx: {
-					height: I === "days" ? 80 : 40,
+					height: L === "days" ? 80 : 40,
 					position: "sticky",
 					top: 0,
 					bgcolor: "background.paper",
@@ -277,28 +284,28 @@ function O({ scrollRef: t, onScroll: n, panelWidth: o, onTaskClick: f, onAddTask
 					display: "flex",
 					flexDirection: "column"
 				},
-				children: [/* @__PURE__ */ x(d, {
+				children: [/* @__PURE__ */ S(f, {
 					sx: {
 						height: 40,
 						display: "flex",
 						alignItems: "center",
-						borderBottom: I === "days" ? "1px solid" : void 0,
-						borderColor: I === "days" ? "divider" : void 0
+						borderBottom: L === "days" ? "1px solid" : void 0,
+						borderColor: L === "days" ? "divider" : void 0
 					},
 					children: [
-						/* @__PURE__ */ b(d, {
+						/* @__PURE__ */ x(f, {
 							sx: {
 								flex: 1,
 								minWidth: 0,
 								pl: 2
 							},
-							children: /* @__PURE__ */ b(v, {
+							children: /* @__PURE__ */ x(y, {
 								variant: "caption",
 								color: "text.secondary",
-								children: j.columnName
+								children: M.columnName
 							})
 						}),
-						A && /* @__PURE__ */ b(d, {
+						j && /* @__PURE__ */ x(f, {
 							sx: {
 								width: 110,
 								flexShrink: 0,
@@ -306,13 +313,13 @@ function O({ scrollRef: t, onScroll: n, panelWidth: o, onTaskClick: f, onAddTask
 								alignItems: "center",
 								px: 1
 							},
-							children: /* @__PURE__ */ b(v, {
+							children: /* @__PURE__ */ x(y, {
 								variant: "caption",
 								color: "text.secondary",
-								children: j.columnAssignee
+								children: M.columnAssignee
 							})
 						}),
-						$ && /* @__PURE__ */ b(d, {
+						$ && /* @__PURE__ */ x(f, {
 							sx: {
 								width: 96,
 								flexShrink: 0,
@@ -320,13 +327,13 @@ function O({ scrollRef: t, onScroll: n, panelWidth: o, onTaskClick: f, onAddTask
 								alignItems: "center",
 								justifyContent: "center"
 							},
-							children: /* @__PURE__ */ b(v, {
+							children: /* @__PURE__ */ x(y, {
 								variant: "caption",
 								color: "text.secondary",
-								children: j.columnActions
+								children: M.columnActions
 							})
 						}),
-						/* @__PURE__ */ b(d, {
+						/* @__PURE__ */ x(f, {
 							sx: {
 								width: 90,
 								flexShrink: 0,
@@ -334,21 +341,21 @@ function O({ scrollRef: t, onScroll: n, panelWidth: o, onTaskClick: f, onAddTask
 								alignItems: "center",
 								justifyContent: "center"
 							},
-							children: /* @__PURE__ */ b(v, {
+							children: /* @__PURE__ */ x(y, {
 								variant: "caption",
 								color: "text.secondary",
-								children: j.columnStatus
+								children: M.columnStatus
 							})
 						})
 					]
-				}), I === "days" && /* @__PURE__ */ b(d, { sx: { flex: 1 } })]
+				}), L === "days" && /* @__PURE__ */ x(f, { sx: { flex: 1 } })]
 			}),
-			k ? /* @__PURE__ */ b(d, {
+			A ? /* @__PURE__ */ x(f, {
 				sx: {
 					position: "relative",
-					height: B.getTotalSize()
+					height: V.getTotalSize()
 				},
-				children: B.getVirtualItems().map((e) => /* @__PURE__ */ b(d, {
+				children: V.getVirtualItems().map((e) => /* @__PURE__ */ x(f, {
 					style: {
 						position: "absolute",
 						top: 0,
@@ -357,59 +364,59 @@ function O({ scrollRef: t, onScroll: n, panelWidth: o, onTaskClick: f, onAddTask
 						height: 40,
 						transform: `translateY(${e.start}px)`
 					},
-					children: /* @__PURE__ */ b(D, {
-						task: z[e.index],
-						expandedIds: P,
-						toggleExpand: F,
+					children: /* @__PURE__ */ x(O, {
+						task: B[e.index],
+						expandedIds: F,
+						toggleExpand: I,
 						hasActionsColumn: $,
-						showAssigneeColumn: A,
-						onTaskClick: f,
+						showAssigneeColumn: j,
+						onTaskClick: p,
 						onAddTask: X,
 						onEditTask: Z,
 						onDeleteTask: Q,
-						onStatusChange: g,
-						inlineEdit: O,
-						onInlineRename: O ? Y : void 0
+						onStatusChange: _,
+						inlineEdit: k,
+						onInlineRename: k ? Y : void 0
 					})
 				}, e.key))
-			}) : z.map((e) => /* @__PURE__ */ b(D, {
+			}) : B.map((e) => /* @__PURE__ */ x(O, {
 				task: e,
-				expandedIds: P,
-				toggleExpand: F,
+				expandedIds: F,
+				toggleExpand: I,
 				hasActionsColumn: $,
-				showAssigneeColumn: A,
-				onTaskClick: f,
+				showAssigneeColumn: j,
+				onTaskClick: p,
 				onAddTask: X,
 				onEditTask: Z,
 				onDeleteTask: Q,
-				onStatusChange: g,
-				inlineEdit: O,
-				onInlineRename: O ? Y : void 0
+				onStatusChange: _,
+				inlineEdit: k,
+				onInlineRename: k ? Y : void 0
 			}, e.id)),
-			S && /* @__PURE__ */ x(y, { children: [
-				/* @__PURE__ */ b(r, {
-					open: V,
+			C && /* @__PURE__ */ S(b, { children: [
+				/* @__PURE__ */ x(i, {
+					open: ne,
 					mode: "add",
-					defaultParentId: q?.id,
-					onSave: te,
+					defaultParentId: G?.id,
+					onSave: q,
 					onClose: () => H(!1)
 				}),
-				/* @__PURE__ */ b(r, {
-					open: U,
+				/* @__PURE__ */ x(i, {
+					open: re,
 					mode: "edit",
-					initialTask: q ?? void 0,
-					onSave: ne,
-					onClose: () => W(!1)
+					initialTask: G ?? void 0,
+					onSave: J,
+					onClose: () => U(!1)
 				}),
-				/* @__PURE__ */ b(i, {
-					open: G,
-					task: q,
-					onConfirm: re,
-					onClose: () => K(!1)
+				/* @__PURE__ */ x(a, {
+					open: ie,
+					task: G,
+					onConfirm: ae,
+					onClose: () => W(!1)
 				})
 			] })
 		]
 	});
 }
 //#endregion
-export { O as GanttTaskPanel };
+export { k as GanttTaskPanel };

package/dist/components/gantt-chart/GanttTimeline.d.ts

@@ -10,10 +10,11 @@ type GanttTimelineProps = {
     progressDraggable?: boolean;
     showCriticalPath?: boolean;
     virtualizeRows?: boolean;
+    onDragStart?: (task: GanttTask, type: "move" | "resize") => void;
     onTaskMoved?: (task: GanttTask, newStart: Date, newEnd: Date) => void;
     onTaskResized?: (task: GanttTask, newEnd: Date) => void;
     onTasksChange?: (tasks: GanttTask[]) => void;
     onStatusChange?: (task: GanttTask, status: GanttTaskStatus) => void;
 };
-export declare function GanttTimeline({ scrollRef, onScroll, onTaskClick, onMilestoneClick, draggable, resizable, progressDraggable, showCriticalPath, virtualizeRows, onTaskMoved, onTaskResized, onTasksChange, onStatusChange, }: GanttTimelineProps): import("react/jsx-runtime").JSX.Element;
+export declare function GanttTimeline({ scrollRef, onScroll, onTaskClick, onMilestoneClick, draggable, resizable, progressDraggable, showCriticalPath, virtualizeRows, onDragStart, onTaskMoved, onTaskResized, onTasksChange, onStatusChange, }: GanttTimelineProps): import("react/jsx-runtime").JSX.Element;
 export {};