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

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

@@ -0,0 +1,90 @@
+import { Box as e, Chip as t, Tooltip as n, Typography as r, useTheme as i } from "@mui/material";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
+//#region src/components/gantt-chart/GanttTimelineHeader.tsx
+function s({ items: t }) {
+	return /* @__PURE__ */ a(e, {
+		sx: { display: "flex" },
+		children: t.map((t) => /* @__PURE__ */ a(e, {
+			sx: {
+				width: t.width,
+				flexShrink: 0,
+				height: 40,
+				display: "flex",
+				alignItems: "center",
+				justifyContent: "center",
+				borderRight: "1px solid",
+				borderColor: "divider",
+				bgcolor: t.isWeekend ? "action.hover" : "transparent"
+			},
+			children: /* @__PURE__ */ a(r, {
+				variant: "caption",
+				color: t.isWeekend ? "text.disabled" : "text.secondary",
+				children: t.label
+			})
+		}, t.key))
+	});
+}
+function c({ columns: r, groups: c, todayX: l, todayLabel: u, todayTooltip: d, todayColor: f }) {
+	let p = i(), m = c ? 80 : 40, h = f || p.palette.primary.main, g = p.palette.getContrastText(h);
+	return /* @__PURE__ */ o(e, {
+		sx: {
+			position: "sticky",
+			top: 0,
+			bgcolor: "background.paper",
+			zIndex: 1,
+			borderBottom: "1px solid",
+			borderColor: "divider",
+			height: m,
+			overflow: "visible"
+		},
+		children: [
+			c && /* @__PURE__ */ a(e, {
+				sx: {
+					height: 40,
+					borderBottom: "1px solid",
+					borderColor: "divider",
+					overflow: "visible"
+				},
+				children: /* @__PURE__ */ a(s, { items: c })
+			}),
+			/* @__PURE__ */ a(s, { items: r }),
+			l != null && u && /* @__PURE__ */ a(n, {
+				title: d ?? "",
+				placement: "top",
+				arrow: !0,
+				children: /* @__PURE__ */ a(t, {
+					"data-testid": "gantt-today-chip",
+					size: "small",
+					label: u,
+					sx: {
+						position: "absolute",
+						bottom: 0,
+						left: l,
+						transform: "translateX(-50%) translateY(50%)",
+						zIndex: 3,
+						height: 20,
+						fontSize: "0.65rem",
+						fontWeight: 700,
+						letterSpacing: "0.03em",
+						backgroundColor: h,
+						color: g,
+						border: `1.5px solid ${h}`,
+						boxShadow: p.shadows[2],
+						cursor: "default",
+						userSelect: "none",
+						"& .MuiChip-label": {
+							px: "6px",
+							py: 0
+						},
+						"&:hover": {
+							backgroundColor: h,
+							opacity: .9
+						}
+					}
+				})
+			})
+		]
+	});
+}
+//#endregion
+export { c as GanttTimelineHeader };

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

@@ -0,0 +1,157 @@
+import { useGanttChartStore as e, useGanttTranslations as t } from "./GanttChart.js";
+import { useMemo as n } from "react";
+import { Box as r, IconButton as i, TextField as a, ToggleButton as o, ToggleButtonGroup as s, Tooltip as c } from "@mui/material";
+import { Fragment as l, jsx as u, jsxs as d } from "react/jsx-runtime";
+import f from "@mui/icons-material/Download";
+import p from "@mui/icons-material/RestartAlt";
+import m from "@mui/icons-material/Restore";
+import h from "@mui/icons-material/Today";
+import g from "@mui/icons-material/UnfoldLess";
+import _ from "@mui/icons-material/UnfoldMore";
+//#region src/components/gantt-chart/GanttToolbar.tsx
+function v(e) {
+	return `${e.getFullYear()}-${String(e.getMonth() + 1).padStart(2, "0")}-${String(e.getDate()).padStart(2, "0")}`;
+}
+function y(e) {
+	let [t, n, r] = e.split("-").map(Number);
+	return !t || !n || !r ? null : new Date(t, n - 1, r, 0, 0, 0, 0);
+}
+function b({ onScrollToToday: b, config: x, onExportCSV: S }) {
+	let C = t(), w = e((e) => e.timeScale), T = e((e) => e.defaultTimeScale), E = e((e) => e.setTimeScale), D = e((e) => e.timelineRange), O = e((e) => e.isRangeCustomized), k = e((e) => e.isExpandedCustomized), A = e((e) => e.setTimelineRange), j = e((e) => e.resetTimelineRange), M = e((e) => e.resetView), N = e((e) => e.tasks), P = e((e) => e.expandedIds), F = e((e) => e.expandAll), I = e((e) => e.collapseAll), L = N.length > 0 && N.every((e) => P.has(e.id)), R = w !== T || O || k, z = n(() => Date.now(), []), B = z >= D.start.getTime() && z <= D.end.getTime(), V = {
+		days: C.scaleDays,
+		weeks: C.scaleWeeks,
+		months: C.scaleMonths,
+		quarters: C.scaleQuarters
+	}, H = {
+		days: x.showScaleDays,
+		weeks: x.showScaleWeeks,
+		months: x.showScaleMonths,
+		quarters: x.showScaleQuarters
+	}, U = Object.keys(V).filter((e) => H[e]);
+	return /* @__PURE__ */ d(r, {
+		"data-testid": "gantt-toolbar",
+		sx: {
+			display: "flex",
+			alignItems: "center",
+			flexWrap: "wrap",
+			gap: 1,
+			px: 1.5,
+			py: .75,
+			borderBottom: "1px solid",
+			borderColor: "divider",
+			bgcolor: "background.paper"
+		},
+		children: [U.length > 0 && /* @__PURE__ */ u(s, {
+			value: w,
+			exclusive: !0,
+			onChange: (e, t) => {
+				t && E(t);
+			},
+			size: "small",
+			"aria-label": C.scaleMonths,
+			children: U.map((e) => /* @__PURE__ */ u(o, {
+				value: e,
+				"data-testid": `gantt-scale-${e}`,
+				children: V[e]
+			}, e))
+		}), /* @__PURE__ */ d(r, {
+			sx: {
+				ml: "auto",
+				display: "flex",
+				alignItems: "center",
+				gap: 1
+			},
+			children: [
+				x.showExpandCollapseAll && /* @__PURE__ */ u(c, {
+					title: L ? C.collapseAllTooltip : C.expandAllTooltip,
+					children: /* @__PURE__ */ u(i, {
+						size: "small",
+						onClick: L ? I : F,
+						"aria-label": L ? C.collapseAllTooltip : C.expandAllTooltip,
+						"data-testid": "gantt-expand-collapse-all",
+						children: u(L ? g : _, { fontSize: "small" })
+					})
+				}),
+				x.showScrollToToday && b && /* @__PURE__ */ u(c, {
+					title: C.scrollToTodayTooltip,
+					children: /* @__PURE__ */ u("span", { children: /* @__PURE__ */ u(i, {
+						size: "small",
+						onClick: b,
+						disabled: !B,
+						"aria-label": C.scrollToTodayTooltip,
+						"data-testid": "gantt-scroll-to-today",
+						children: /* @__PURE__ */ u(h, { fontSize: "small" })
+					}) })
+				}),
+				x.showDateRange && /* @__PURE__ */ d(l, { children: [/* @__PURE__ */ u(a, {
+					type: "date",
+					size: "small",
+					label: C.rangeFrom,
+					value: v(D.start),
+					onChange: (e) => {
+						let t = y(e.target.value);
+						t && A({
+							start: t,
+							end: D.end
+						});
+					},
+					slotProps: {
+						inputLabel: { shrink: !0 },
+						htmlInput: { "data-testid": "gantt-range-start" }
+					},
+					sx: { width: 148 }
+				}), /* @__PURE__ */ u(a, {
+					type: "date",
+					size: "small",
+					label: C.rangeTo,
+					value: v(D.end),
+					onChange: (e) => {
+						let t = y(e.target.value);
+						t && A({
+							start: D.start,
+							end: t
+						});
+					},
+					slotProps: {
+						inputLabel: { shrink: !0 },
+						htmlInput: { "data-testid": "gantt-range-end" }
+					},
+					sx: { width: 148 }
+				})] }),
+				x.showRangeReset && O && /* @__PURE__ */ u(c, {
+					title: C.rangeResetTooltip,
+					children: /* @__PURE__ */ u(i, {
+						size: "small",
+						onClick: j,
+						"aria-label": C.rangeResetTooltip,
+						"data-testid": "gantt-range-reset",
+						children: /* @__PURE__ */ u(m, { fontSize: "small" })
+					})
+				}),
+				x.showExportCSV && S && /* @__PURE__ */ u(c, {
+					title: C.exportCsvTooltip,
+					children: /* @__PURE__ */ u(i, {
+						size: "small",
+						onClick: S,
+						"aria-label": C.exportCsvTooltip,
+						"data-testid": "gantt-export-csv",
+						children: /* @__PURE__ */ u(f, { fontSize: "small" })
+					})
+				}),
+				x.showResetView && /* @__PURE__ */ u(c, {
+					title: C.resetViewTooltip,
+					children: /* @__PURE__ */ u("span", { children: /* @__PURE__ */ u(i, {
+						size: "small",
+						onClick: M,
+						disabled: !R,
+						"aria-label": C.resetViewTooltip,
+						"data-testid": "gantt-reset-view",
+						children: /* @__PURE__ */ u(p, { fontSize: "small" })
+					}) })
+				})
+			]
+		})]
+	});
+}
+//#endregion
+export { b as GanttToolbar };

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

@@ -0,0 +1,29 @@
+import { useGanttTheme as e } from "./GanttChart.js";
+import { Box as t } from "@mui/material";
+import { jsx as n } from "react/jsx-runtime";
+//#region src/components/gantt-chart/GanttWeekendStrips.tsx
+function r({ strips: r, totalWidth: i, height: a, top: o }) {
+	let { weekendColor: s } = e();
+	return r.length === 0 ? null : /* @__PURE__ */ n(t, {
+		"aria-hidden": !0,
+		"data-testid": "gantt-weekend-strips",
+		sx: {
+			position: "absolute",
+			top: o,
+			left: 0,
+			width: i,
+			height: a,
+			pointerEvents: "none"
+		},
+		children: r.map((e) => /* @__PURE__ */ n(t, { sx: {
+			position: "absolute",
+			left: e.left,
+			width: 20,
+			top: 0,
+			height: "100%",
+			bgcolor: s || "action.hover"
+		} }, e.key))
+	});
+}
+//#endregion
+export { r as GanttWeekendStrips };

package/dist/components/gantt-chart/hooks/useGanttDrag.js

@@ -0,0 +1,104 @@
+import { addDays as e } from "../util/gantt-chart.util.js";
+import { useGanttChartStore as t, useGanttTranslations as n, useRawGanttChartStore as r } from "../GanttChart.js";
+import { useLayoutEffect as i, useRef as a, useState as o } from "react";
+//#region src/components/gantt-chart/hooks/useGanttDrag.ts
+var s = 864e5;
+function c({ totalWidth: c, displayRange: l, onTaskMoved: u, onTaskResized: d, onTasksChange: f }) {
+	let p = t((e) => e.updateTask), m = r(), h = n(), g = a(1), _ = a(u), v = a(d), y = a(f);
+	i(() => {
+		g.current = c > 0 ? c / ((l.end.getTime() - l.start.getTime()) / s) : 1, _.current = u, v.current = d, y.current = f;
+	});
+	let b = a(null), x = a(null), [S, C] = o(null), w = a(!1);
+	return {
+		activeDrag: S,
+		suppressClickRef: w,
+		handleBarMouseDown: (t, n, r) => {
+			t.stopPropagation(), w.current = !1, b.current = {
+				type: r,
+				taskId: n.id,
+				startX: t.clientX,
+				originalStart: n.startDate,
+				originalEnd: n.endDate
+			}, document.body.style.cursor = r === "resize" ? "ew-resize" : "grabbing";
+			let i = (e) => {
+				let t = b.current;
+				if (!t || t.type === "progress") return;
+				let n = e.clientX - t.startX, r = Math.round(n / g.current);
+				Math.abs(n) >= 5 && (w.current = !0);
+				let i = {
+					taskId: t.taskId,
+					type: t.type,
+					deltaDays: r
+				};
+				x.current = i, C(i);
+			}, a = () => {
+				document.body.style.cursor = "";
+				let t = b.current, n = x.current;
+				if (t && n && w.current && n.deltaDays !== 0) {
+					let r = m.getState().tasks.find((e) => e.id === t.taskId);
+					if (r) {
+						if (n.type === "move") {
+							let i = e(t.originalStart, n.deltaDays), a = e(t.originalEnd, n.deltaDays);
+							p({
+								...r,
+								startDate: i,
+								endDate: a
+							}), _.current?.(r, i, a);
+						} else {
+							let i = e(t.originalEnd, n.deltaDays), a = i > t.originalStart ? i : e(t.originalStart, 1);
+							p({
+								...r,
+								endDate: a
+							}), v.current?.(r, a);
+						}
+						y.current?.(m.getState().tasks);
+					}
+				}
+				b.current = null, x.current = null, C(null), document.removeEventListener("mousemove", i), document.removeEventListener("mouseup", a);
+			};
+			document.addEventListener("mousemove", i), document.addEventListener("mouseup", a);
+		},
+		handleProgressMouseDown: (e, t, n, r) => {
+			e.stopPropagation(), w.current = !1, b.current = {
+				type: "progress",
+				taskId: t.id,
+				startX: e.clientX,
+				originalStart: t.startDate,
+				originalEnd: t.endDate,
+				initialProgress: n,
+				barWidthPx: r
+			}, document.body.style.cursor = "ew-resize";
+			let i = (e) => {
+				let t = b.current;
+				if (!t || t.type !== "progress") return;
+				let n = e.clientX - t.startX;
+				Math.abs(n) >= 5 && (w.current = !0);
+				let r = n / (t.barWidthPx ?? 1) * 100, i = Math.round(Math.max(0, Math.min(100, (t.initialProgress ?? 0) + r))), a = {
+					taskId: t.taskId,
+					type: "progress",
+					deltaDays: 0,
+					newProgress: i
+				};
+				x.current = a, C(a);
+			}, a = () => {
+				document.body.style.cursor = "";
+				let e = b.current, t = x.current;
+				if (e && t && t.type === "progress" && t.newProgress !== void 0 && w.current) {
+					let n = m.getState().tasks.find((t) => t.id === e.taskId);
+					n && (p({
+						...n,
+						progress: t.newProgress
+					}), y.current?.(m.getState().tasks));
+				}
+				b.current = null, x.current = null, C(null), document.removeEventListener("mousemove", i), document.removeEventListener("mouseup", a);
+			};
+			document.addEventListener("mousemove", i), document.addEventListener("mouseup", a);
+		},
+		formatDragDate: (e) => e.toLocaleDateString(h.dateLocale, {
+			day: "2-digit",
+			month: "short"
+		})
+	};
+}
+//#endregion
+export { c as useGanttDrag };

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

@@ -0,0 +1,150 @@
+//#region src/components/gantt-chart/util/gantt-chart.util.ts
+function e(e) {
+	let t = /* @__PURE__ */ new Date(), n = g(t), r = _(t);
+	if (e.length === 0) return {
+		start: n,
+		end: r
+	};
+	let i = e.map((e) => e.startDate.getTime()), a = e.map((e) => e.endDate.getTime()), l = o(c(new Date(Math.min(...i)), -1)), u = s(c(new Date(Math.max(...a)), 1));
+	return {
+		start: l < n ? l : n,
+		end: u > r ? u : r
+	};
+}
+function t(e, t) {
+	return t === "weeks" ? {
+		start: f(e.start),
+		end: e.end
+	} : t === "quarters" ? {
+		start: g(e.start),
+		end: _(e.end)
+	} : e;
+}
+function n(e, t) {
+	let n = t.end.getTime() - t.start.getTime();
+	if (n <= 0) return {
+		left: 0,
+		width: 0
+	};
+	let r = (e.startDate.getTime() - t.start.getTime()) / n * 100, i = (e.endDate.getTime() - e.startDate.getTime()) / n * 100;
+	return {
+		left: Math.max(0, r),
+		width: Math.max(0, i)
+	};
+}
+function r(e) {
+	let t = /* @__PURE__ */ new Map();
+	for (let n of e) t.set(n.id, {
+		...n,
+		children: [],
+		depth: 0
+	});
+	let n = [];
+	for (let e of t.values()) e.parentId && t.has(e.parentId) ? t.get(e.parentId).children.push(e) : n.push(e);
+	return i(n, 0), n;
+}
+function i(e, t) {
+	for (let n of e) n.depth = t, i(n.children, t + 1);
+}
+function a(e, t) {
+	let n = [];
+	function r(e) {
+		for (let i of e) n.push(i), i.children.length > 0 && t.has(i.id) && r(i.children);
+	}
+	return r(e), n;
+}
+function o(e) {
+	return new Date(e.getFullYear(), e.getMonth(), 1, 0, 0, 0, 0);
+}
+function s(e) {
+	return new Date(e.getFullYear(), e.getMonth() + 1, 0, 23, 59, 59, 999);
+}
+function c(e, t) {
+	return new Date(e.getFullYear(), e.getMonth() + t, e.getDate());
+}
+function l(e, t) {
+	return new Date(e.getFullYear(), e.getMonth(), e.getDate() + t, 0, 0, 0, 0);
+}
+function u(e, t, n) {
+	if (n === 0) return e;
+	let r = /* @__PURE__ */ new Map();
+	for (let t of e) for (let e of t.dependencies ?? []) r.has(e) || r.set(e, []), r.get(e).push(t.id);
+	let i = new Map(e.map((e) => [e.id, e])), a = [...r.get(t) ?? []], o = /* @__PURE__ */ new Set();
+	for (; a.length > 0;) {
+		let e = a.shift();
+		if (o.has(e)) continue;
+		o.add(e);
+		let t = i.get(e);
+		i.set(e, {
+			...t,
+			startDate: new Date(t.startDate.getTime() + n),
+			endDate: new Date(t.endDate.getTime() + n)
+		}), a.push(...r.get(e) ?? []);
+	}
+	return e.map((e) => i.get(e.id));
+}
+function d(e) {
+	let t = [], n = o(e.start);
+	for (; n <= e.end;) t.push(n), n = c(n, 1);
+	return t;
+}
+function f(e) {
+	let t = new Date(e), n = t.getDay(), r = n === 0 ? -6 : 1 - n;
+	return t.setDate(t.getDate() + r), t.setHours(0, 0, 0, 0), t;
+}
+function p(e) {
+	let t = new Date(Date.UTC(e.getFullYear(), e.getMonth(), e.getDate())), n = t.getUTCDay() || 7;
+	t.setUTCDate(t.getUTCDate() + 4 - n);
+	let r = new Date(Date.UTC(t.getUTCFullYear(), 0, 1));
+	return Math.ceil(((t.getTime() - r.getTime()) / 864e5 + 1) / 7);
+}
+function m(e) {
+	let t = [], n = f(e.start);
+	for (; n <= e.end;) t.push(new Date(n)), n = new Date(n.getFullYear(), n.getMonth(), n.getDate() + 7);
+	return t;
+}
+function h(e) {
+	let t = [], n = new Date(e.start.getFullYear(), e.start.getMonth(), e.start.getDate(), 0, 0, 0, 0), r = new Date(e.end.getFullYear(), e.end.getMonth(), e.end.getDate(), 0, 0, 0, 0).getTime();
+	for (; n.getTime() <= r;) t.push(new Date(n)), n = new Date(n.getFullYear(), n.getMonth(), n.getDate() + 1, 0, 0, 0, 0);
+	return t;
+}
+function g(e) {
+	let t = Math.floor(e.getMonth() / 3) * 3;
+	return new Date(e.getFullYear(), t, 1, 0, 0, 0, 0);
+}
+function _(e) {
+	let t = Math.floor(e.getMonth() / 3) * 3 + 2;
+	return s(new Date(e.getFullYear(), t, 1));
+}
+function v(e) {
+	let t = [], n = g(e.start);
+	for (; n <= e.end;) {
+		let e = Math.floor(n.getMonth() / 3) + 1;
+		t.push({
+			key: `${n.getFullYear()}-Q${e}`,
+			label: `Q${e} ${n.getFullYear()}`,
+			start: new Date(n)
+		}), n = new Date(n.getFullYear(), n.getMonth() + 3, 1);
+	}
+	return t;
+}
+function y(e) {
+	if (e.length === 0) return /* @__PURE__ */ new Set();
+	let t = /* @__PURE__ */ new Map();
+	for (let n of e) for (let e of n.dependencies ?? []) t.has(e) || t.set(e, []), t.get(e).push(n.id);
+	let n = new Map(e.map((e) => [e.id, e])), r = /* @__PURE__ */ new Map(), i = /* @__PURE__ */ new Set();
+	function a(e) {
+		if (r.has(e)) return r.get(e);
+		if (i.has(e)) return n.get(e)?.endDate.getTime() ?? 0;
+		i.add(e);
+		let o = n.get(e)?.endDate.getTime() ?? 0;
+		for (let n of t.get(e) ?? []) o = Math.max(o, a(n));
+		return i.delete(e), r.set(e, o), o;
+	}
+	for (let t of e) a(t.id);
+	let o = Math.max(...r.values()), s = /* @__PURE__ */ new Set();
+	for (let t of e) a(t.id) === o && s.add(t.id);
+	return s;
+}
+//#endregion
+export { l as addDays, c as addMonths, r as buildTaskTree, n as calculateTaskPosition, u as cascadeDateUpdate, y as computeCriticalPath, s as endOfMonth, h as getDaysInRange, t as getDisplayRange, p as getISOWeekNumber, d as getMonthsInRange, v as getQuartersInRange, e as getTimelineRange, a as getVisibleTasks, m as getWeeksInRange, o as startOfMonth };