@thebuoyant-tsdev/mui-ts-library 3.2.0 → 3.4.0

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

@@ -0,0 +1,415 @@
+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";
+//#region src/components/gantt-chart/GanttTaskPanel.tsx
+function E(e, t) {
+	return {
+		planned: t.statusPlanned,
+		"in-progress": t.statusInProgress,
+		done: t.statusDone,
+		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 = () => {
+		N !== null && N.trim() && A?.(e, N.trim()), P(null);
+	};
+	return /* @__PURE__ */ x(d, {
+		className: "gantt-task-row",
+		"data-testid": `gantt-task-row-${e.id}`,
+		sx: {
+			height: 40,
+			display: "flex",
+			alignItems: "center",
+			borderBottom: "1px solid",
+			borderRight: "1px solid",
+			borderColor: "divider",
+			cursor: l ? "pointer" : "default",
+			"&:hover": l ? { bgcolor: "action.hover" } : void 0
+		},
+		onClick: () => l?.(e),
+		children: [
+			/* @__PURE__ */ x(d, {
+				sx: {
+					flex: 1,
+					minWidth: 0,
+					display: "flex",
+					alignItems: "center",
+					gap: .75,
+					pl: 1 + e.depth * 2,
+					pr: .5,
+					height: "100%"
+				},
+				children: [
+					/* @__PURE__ */ b(d, {
+						sx: {
+							width: 16,
+							flexShrink: 0,
+							display: "flex",
+							justifyContent: "center"
+						},
+						children: e.children.length > 0 && /* @__PURE__ */ b(d, {
+							component: "span",
+							sx: {
+								fontSize: 9,
+								userSelect: "none",
+								cursor: "pointer"
+							},
+							onClick: (t) => {
+								t.stopPropagation(), i(e.id);
+							},
+							children: r.has(e.id) ? "▼" : "▶"
+						})
+					}),
+					/* @__PURE__ */ b(d, { 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"
+					} }),
+					N === null ? /* @__PURE__ */ b(v, {
+						variant: "body2",
+						noWrap: !0,
+						sx: {
+							flex: 1,
+							minWidth: 0,
+							cursor: k ? "text" : "inherit"
+						},
+						onDoubleClick: k ? (t) => {
+							t.stopPropagation(), P(e.name);
+						} : void 0,
+						children: e.name
+					}) : /* @__PURE__ */ b(g, {
+						size: "small",
+						variant: "standard",
+						value: N,
+						autoFocus: !0,
+						onChange: (e) => P(e.target.value),
+						onBlur: L,
+						onKeyDown: (e) => {
+							e.key === "Enter" && (e.preventDefault(), L()), e.key === "Escape" && (e.stopPropagation(), P(null));
+						},
+						onClick: (e) => e.stopPropagation(),
+						sx: {
+							flex: 1,
+							minWidth: 0
+						},
+						slotProps: { htmlInput: { "data-testid": `gantt-inline-edit-${e.id}` } }
+					})
+				]
+			}),
+			c && /* @__PURE__ */ b(d, {
+				sx: {
+					width: 110,
+					flexShrink: 0,
+					display: "flex",
+					alignItems: "center",
+					px: 1,
+					overflow: "hidden"
+				},
+				children: /* @__PURE__ */ b(v, {
+					variant: "caption",
+					noWrap: !0,
+					color: e.assignee ? "text.primary" : "text.disabled",
+					children: e.assignee ?? "—"
+				})
+			}),
+			a && /* @__PURE__ */ x(d, {
+				className: "gantt-row-actions",
+				sx: {
+					width: 96,
+					flexShrink: 0,
+					display: "flex",
+					alignItems: "center",
+					justifyContent: "flex-end",
+					pr: .5
+				},
+				children: [
+					C && /* @__PURE__ */ b(_, {
+						title: F.editTaskTooltip,
+						children: /* @__PURE__ */ b(p, {
+							size: "small",
+							"aria-label": F.editTaskTooltip,
+							"data-testid": `gantt-edit-task-${e.id}`,
+							onClick: (t) => {
+								t.stopPropagation(), C(e);
+							},
+							children: /* @__PURE__ */ b(T, { fontSize: "inherit" })
+						})
+					}),
+					y && /* @__PURE__ */ b(_, {
+						title: F.addTaskTooltip,
+						children: /* @__PURE__ */ b(p, {
+							size: "small",
+							"aria-label": F.addTaskTooltip,
+							"data-testid": `gantt-add-task-${e.id}`,
+							onClick: (t) => {
+								t.stopPropagation(), y(e);
+							},
+							children: /* @__PURE__ */ b(w, { fontSize: "inherit" })
+						})
+					}),
+					D && /* @__PURE__ */ b(_, {
+						title: F.deleteTaskTooltip,
+						children: /* @__PURE__ */ b(p, {
+							size: "small",
+							"aria-label": F.deleteTaskTooltip,
+							"data-testid": `gantt-delete-task-${e.id}`,
+							onClick: (t) => {
+								t.stopPropagation(), D(e);
+							},
+							children: /* @__PURE__ */ b(S, { fontSize: "inherit" })
+						})
+					})
+				]
+			}),
+			/* @__PURE__ */ x(d, {
+				sx: {
+					width: 90,
+					flexShrink: 0,
+					display: "flex",
+					alignItems: "center",
+					justifyContent: "center"
+				},
+				children: [/* @__PURE__ */ b(f, {
+					label: E(e.status, F),
+					size: "small",
+					variant: "outlined",
+					color: e.color ?? I?.[e.status] ? "default" : n[e.status] ?? "default",
+					sx: {
+						height: 20,
+						fontSize: 10,
+						cursor: O ? "pointer" : "default",
+						...(e.color ?? I?.[e.status]) && {
+							borderColor: e.color ?? I?.[e.status],
+							color: e.color ?? I?.[e.status]
+						}
+					},
+					onClick: O ? (e) => {
+						e.stopPropagation(), M(e.currentTarget);
+					} : void 0
+				}), O && /* @__PURE__ */ b(m, {
+					anchorEl: j,
+					open: !!j,
+					onClose: () => M(null),
+					children: [
+						"planned",
+						"in-progress",
+						"done",
+						"blocked"
+					].map((t) => /* @__PURE__ */ b(h, {
+						selected: e.status === t,
+						onClick: () => {
+							O(e, t), M(null);
+						},
+						children: E(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,
+		estimateSize: () => 40,
+		overscan: 5
+	}), [V, H] = u(!1), [U, W] = u(!1), [G, K] = u(!1), [q, J] = u(null), te = (e) => {
+		let t = {
+			...e,
+			id: crypto.randomUUID()
+		};
+		L(t), _?.(M.getState().tasks), w?.(t), H(!1);
+	}, ne = (e) => {
+		if (!q) return;
+		let t = {
+			...e,
+			id: q.id
+		};
+		R(t), _?.(M.getState().tasks), T?.(t), W(!1);
+	}, re = () => {
+		q && (ee(q.id), _?.(M.getState().tasks), E?.(q.id), K(!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,
+		sx: {
+			width: o,
+			flexShrink: 0,
+			overflowY: "auto",
+			overflowX: "hidden"
+		},
+		children: [
+			/* @__PURE__ */ x(d, {
+				sx: {
+					height: I === "days" ? 80 : 40,
+					position: "sticky",
+					top: 0,
+					bgcolor: "background.paper",
+					zIndex: 1,
+					borderBottom: "1px solid",
+					borderRight: "1px solid",
+					borderColor: "divider",
+					display: "flex",
+					flexDirection: "column"
+				},
+				children: [/* @__PURE__ */ x(d, {
+					sx: {
+						height: 40,
+						display: "flex",
+						alignItems: "center",
+						borderBottom: I === "days" ? "1px solid" : void 0,
+						borderColor: I === "days" ? "divider" : void 0
+					},
+					children: [
+						/* @__PURE__ */ b(d, {
+							sx: {
+								flex: 1,
+								minWidth: 0,
+								pl: 2
+							},
+							children: /* @__PURE__ */ b(v, {
+								variant: "caption",
+								color: "text.secondary",
+								children: j.columnName
+							})
+						}),
+						A && /* @__PURE__ */ b(d, {
+							sx: {
+								width: 110,
+								flexShrink: 0,
+								display: "flex",
+								alignItems: "center",
+								px: 1
+							},
+							children: /* @__PURE__ */ b(v, {
+								variant: "caption",
+								color: "text.secondary",
+								children: j.columnAssignee
+							})
+						}),
+						$ && /* @__PURE__ */ b(d, {
+							sx: {
+								width: 96,
+								flexShrink: 0,
+								display: "flex",
+								alignItems: "center",
+								justifyContent: "center"
+							},
+							children: /* @__PURE__ */ b(v, {
+								variant: "caption",
+								color: "text.secondary",
+								children: j.columnActions
+							})
+						}),
+						/* @__PURE__ */ b(d, {
+							sx: {
+								width: 90,
+								flexShrink: 0,
+								display: "flex",
+								alignItems: "center",
+								justifyContent: "center"
+							},
+							children: /* @__PURE__ */ b(v, {
+								variant: "caption",
+								color: "text.secondary",
+								children: j.columnStatus
+							})
+						})
+					]
+				}), I === "days" && /* @__PURE__ */ b(d, { sx: { flex: 1 } })]
+			}),
+			k ? /* @__PURE__ */ b(d, {
+				sx: {
+					position: "relative",
+					height: B.getTotalSize()
+				},
+				children: B.getVirtualItems().map((e) => /* @__PURE__ */ b(d, {
+					style: {
+						position: "absolute",
+						top: 0,
+						left: 0,
+						width: "100%",
+						height: 40,
+						transform: `translateY(${e.start}px)`
+					},
+					children: /* @__PURE__ */ b(D, {
+						task: z[e.index],
+						expandedIds: P,
+						toggleExpand: F,
+						hasActionsColumn: $,
+						showAssigneeColumn: A,
+						onTaskClick: f,
+						onAddTask: X,
+						onEditTask: Z,
+						onDeleteTask: Q,
+						onStatusChange: g,
+						inlineEdit: O,
+						onInlineRename: O ? Y : void 0
+					})
+				}, e.key))
+			}) : z.map((e) => /* @__PURE__ */ b(D, {
+				task: e,
+				expandedIds: P,
+				toggleExpand: F,
+				hasActionsColumn: $,
+				showAssigneeColumn: A,
+				onTaskClick: f,
+				onAddTask: X,
+				onEditTask: Z,
+				onDeleteTask: Q,
+				onStatusChange: g,
+				inlineEdit: O,
+				onInlineRename: O ? Y : void 0
+			}, e.id)),
+			S && /* @__PURE__ */ x(y, { children: [
+				/* @__PURE__ */ b(r, {
+					open: V,
+					mode: "add",
+					defaultParentId: q?.id,
+					onSave: te,
+					onClose: () => H(!1)
+				}),
+				/* @__PURE__ */ b(r, {
+					open: U,
+					mode: "edit",
+					initialTask: q ?? void 0,
+					onSave: ne,
+					onClose: () => W(!1)
+				}),
+				/* @__PURE__ */ b(i, {
+					open: G,
+					task: q,
+					onConfirm: re,
+					onClose: () => K(!1)
+				})
+			] })
+		]
+	});
+}
+//#endregion
+export { O as GanttTaskPanel };

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

@@ -0,0 +1,223 @@
+import { calculateTaskPosition as e, computeCriticalPath as t, getDaysInRange as n, getDisplayRange as r, getISOWeekNumber as i, getMonthsInRange as a, getQuartersInRange as o, getVisibleTasks as s, getWeeksInRange as c } from "./util/gantt-chart.util.js";
+import { useGanttDrag as l } from "./hooks/useGanttDrag.js";
+import { GanttTimelineHeader as u } from "./GanttTimelineHeader.js";
+import { GanttBarRow as d } from "./GanttBarRow.js";
+import { GanttWeekendStrips as f } from "./GanttWeekendStrips.js";
+import { GanttStatusContextMenu as p } from "./GanttStatusContextMenu.js";
+import { GanttDependencyArrows as m } from "./GanttDependencyArrows.js";
+import { useGanttChartStore as h, useGanttTheme as ee, useGanttTranslations as te, useRawGanttChartStore as ne } from "./GanttChart.js";
+import { useEffect as re, useId as ie, useMemo as g, useRef as _, useState as ae } from "react";
+import { Box as v, useTheme as oe } from "@mui/material";
+import { Fragment as se, jsx as y, jsxs as ce } from "react/jsx-runtime";
+import { useVirtualizer as le } from "@tanstack/react-virtual";
+//#region src/components/gantt-chart/GanttTimeline.tsx
+function ue(t, n, r) {
+	if (r === 0) return [];
+	let i = [], a = new Map(t.map((e, t) => [e.id, t]));
+	for (let o of t) {
+		if (!o.dependencies?.length) continue;
+		let s = a.get(o.id), c = e(o, n).left / 100 * r, l = s * 40 + 40 / 2;
+		for (let s of o.dependencies) {
+			let u = a.get(s);
+			if (u === void 0) continue;
+			let d = t[u], f = e(d, n), p = (f.left + f.width) / 100 * r, m = u * 40 + 40 / 2, h;
+			h = c >= p + 48 ? (p + c) / 2 : p + 24 <= r - 8 ? p + 24 : Math.max(c - 24, 8), i.push({
+				key: `${s}-${o.id}`,
+				d: `M ${p} ${m} H ${h} V ${l} H ${c}`
+			});
+		}
+	}
+	return i;
+}
+function b({ scrollRef: e, onScroll: b, onTaskClick: x, onMilestoneClick: S, draggable: C = !1, resizable: w = !1, progressDraggable: T = !1, showCriticalPath: E = !1, virtualizeRows: de = !1, onTaskMoved: fe, onTaskResized: pe, onTasksChange: D, onStatusChange: O }) {
+	let k = h((e) => e.taskTree), A = h((e) => e.tasks), j = h((e) => e.expandedIds), M = h((e) => e.timelineRange), N = h((e) => e.timeScale), me = h((e) => e.updateTask), P = ne(), F = te(), he = oe(), { todayLineColor: ge } = ee(), _e = `gantt-arrow-${ie().replace(/:/g, "")}`, I = g(() => s(k, j), [k, j]), L = g(() => r(M, N), [M, N]), R = g(() => N === "days" ? n(L).map((e) => ({
+		key: e.toISOString(),
+		label: String(e.getDate()),
+		width: 20,
+		isWeekend: e.getDay() === 0 || e.getDay() === 6
+	})) : N === "weeks" ? c(L).map((e) => ({
+		key: e.toISOString(),
+		label: `${F.weekColumnPrefix}${i(e)}`,
+		width: 40
+	})) : N === "quarters" ? o(L).map((e) => ({
+		key: e.key,
+		label: e.label,
+		width: 360
+	})) : a(L).map((e) => ({
+		key: e.toISOString(),
+		label: e.toLocaleString(F.dateLocale, {
+			month: "short",
+			year: "2-digit"
+		}),
+		width: 120
+	})), [
+		N,
+		L,
+		F.weekColumnPrefix,
+		F.dateLocale
+	]), z = g(() => R.reduce((e, t) => e + t.width, 0), [R]), B = g(() => {
+		if (N !== "days") return;
+		let e = /* @__PURE__ */ new Map();
+		for (let t of R) {
+			let n = new Date(t.key), r = `${n.getFullYear()}-${n.getMonth()}`;
+			e.has(r) || e.set(r, {
+				label: n.toLocaleString(F.dateLocale, {
+					month: "short",
+					year: "2-digit"
+				}),
+				width: 0
+			}), e.get(r).width += 20;
+		}
+		return Array.from(e.entries()).map(([e, t]) => ({
+			key: e,
+			...t
+		}));
+	}, [
+		N,
+		R,
+		F.dateLocale
+	]), ve = g(() => ue(I, L, z), [
+		I,
+		L,
+		z
+	]), V = g(() => E ? t(A) : /* @__PURE__ */ new Set(), [E, A]), H = le({
+		count: I.length,
+		getScrollElement: () => e.current,
+		estimateSize: () => 40,
+		overscan: 5
+	}), ye = g(() => {
+		if (N !== "days") return [];
+		let e = 0;
+		return R.flatMap((t) => {
+			let n = t.isWeekend ? [{
+				key: t.key,
+				left: e
+			}] : [];
+			return e += t.width, n;
+		});
+	}, [N, R]), U = g(() => {
+		let e = Date.now(), t = L.start.getTime(), n = L.end.getTime();
+		return e < t || e > n ? null : (e - t) / (n - t) * z;
+	}, [L, z]), be = g(() => (/* @__PURE__ */ new Date()).toLocaleDateString(F.dateLocale, {
+		weekday: "long",
+		day: "numeric",
+		month: "long",
+		year: "numeric"
+	}), [F.dateLocale]), xe = ge || he.palette.primary.main;
+	re(() => {
+		if (U === null || !e.current) return;
+		let t = e.current.clientWidth;
+		e.current.scrollLeft = Math.max(0, U - t / 2);
+	}, []);
+	let W = N === "days" ? 20 : N === "weeks" ? 40 : N === "quarters" ? 360 : 120, G = B ? 80 : 40, { activeDrag: K, suppressClickRef: q, handleBarMouseDown: J, handleProgressMouseDown: Y, formatDragDate: X } = l({
+		totalWidth: z,
+		displayRange: L,
+		onTaskMoved: fe,
+		onTaskResized: pe,
+		onTasksChange: D
+	}), [Se, Z] = ae(null), Q = _(O);
+	Q.current = O;
+	let $ = _(D);
+	return $.current = D, /* @__PURE__ */ y(v, {
+		ref: e,
+		onScroll: b,
+		"data-testid": "gantt-timeline-scroll",
+		sx: {
+			flex: 1,
+			overflow: "auto"
+		},
+		children: /* @__PURE__ */ ce(v, {
+			sx: {
+				minWidth: z,
+				position: "relative"
+			},
+			children: [
+				/* @__PURE__ */ y(u, {
+					columns: R,
+					groups: B,
+					todayX: U,
+					todayLabel: F.todayLabel,
+					todayTooltip: be,
+					todayColor: xe
+				}),
+				/* @__PURE__ */ y(f, {
+					strips: ye,
+					totalWidth: z,
+					height: I.length * 40,
+					top: G
+				}),
+				de ? /* @__PURE__ */ y(v, {
+					sx: {
+						position: "relative",
+						height: H.getTotalSize()
+					},
+					children: H.getVirtualItems().map((e) => /* @__PURE__ */ y(d, {
+						task: I[e.index],
+						virtualTop: e.start,
+						activeDrag: K,
+						displayRange: L,
+						totalWidth: z,
+						gridColumnWidth: W,
+						criticalTaskIds: V,
+						draggable: C,
+						resizable: w,
+						progressDraggable: T,
+						onTaskClick: x,
+						onMilestoneClick: S,
+						onContextMenu: (e, t, n) => Z({
+							task: e,
+							mouseX: t,
+							mouseY: n
+						}),
+						suppressClickRef: q,
+						handleBarMouseDown: J,
+						handleProgressMouseDown: Y,
+						formatDragDate: X
+					}, e.key))
+				}) : /* @__PURE__ */ y(se, { children: I.map((e) => /* @__PURE__ */ y(d, {
+					task: e,
+					activeDrag: K,
+					displayRange: L,
+					totalWidth: z,
+					gridColumnWidth: W,
+					criticalTaskIds: V,
+					draggable: C,
+					resizable: w,
+					progressDraggable: T,
+					onTaskClick: x,
+					onMilestoneClick: S,
+					onContextMenu: (e, t, n) => Z({
+						task: e,
+						mouseX: t,
+						mouseY: n
+					}),
+					suppressClickRef: q,
+					handleBarMouseDown: J,
+					handleProgressMouseDown: Y,
+					formatDragDate: X
+				}, e.id)) }),
+				/* @__PURE__ */ y(p, {
+					contextMenu: Se,
+					onClose: () => Z(null),
+					onSelect: (e, t) => {
+						let n = P.getState().tasks.find((t) => t.id === e.id) ?? e;
+						me({
+							...n,
+							status: t
+						}), Q.current?.(n, t), $.current?.(P.getState().tasks), Z(null);
+					}
+				}),
+				/* @__PURE__ */ y(m, {
+					dependencyLines: ve,
+					todayX: U,
+					totalWidth: z,
+					height: I.length * 40,
+					top: G,
+					arrowMarkerId: _e
+				})
+			]
+		})
+	});
+}
+//#endregion
+export { b as GanttTimeline };