@thebuoyant-tsdev/mui-ts-library 3.15.0 → 3.17.0

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

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

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

@@ -1,34 +1,34 @@
 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";
+import { Box as r, FormControl as i, IconButton as a, InputLabel as o, MenuItem as s, Select as c, TextField as l, ToggleButton as u, ToggleButtonGroup as d, Tooltip as f } from "@mui/material";
+import { Fragment as p, jsx as m, jsxs as h } from "react/jsx-runtime";
+import g from "@mui/icons-material/Download";
+import _ from "@mui/icons-material/RestartAlt";
+import v from "@mui/icons-material/Restore";
+import y from "@mui/icons-material/Today";
+import b from "@mui/icons-material/UnfoldLess";
+import x from "@mui/icons-material/UnfoldMore";
 //#region src/components/gantt-chart/GanttToolbar.tsx
-function v(e) {
+function S(e) {
 	return `${e.getFullYear()}-${String(e.getMonth() + 1).padStart(2, "0")}-${String(e.getDate()).padStart(2, "0")}`;
 }
-function y(e) {
+function C(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, {
+function w({ onScrollToToday: w, config: T, onExportCSV: E }) {
+	let D = t(), O = e((e) => e.timeScale), k = e((e) => e.defaultTimeScale), A = e((e) => e.setTimeScale), j = e((e) => e.timelineRange), M = e((e) => e.isRangeCustomized), N = e((e) => e.isExpandedCustomized), P = e((e) => e.setTimelineRange), F = e((e) => e.resetTimelineRange), I = e((e) => e.resetView), L = e((e) => e.tasks), R = e((e) => e.expandedIds), z = e((e) => e.expandAll), B = e((e) => e.collapseAll), V = e((e) => e.assigneeFilter), H = e((e) => e.setAssigneeFilter), U = n(() => [...new Set(L.flatMap((e) => e.assignee ? [e.assignee] : []))].sort(), [L]), W = L.length > 0 && L.every((e) => R.has(e.id)), G = O !== k || M || N, K = n(() => Date.now(), []), q = K >= j.start.getTime() && K <= j.end.getTime(), J = {
+		days: D.scaleDays,
+		weeks: D.scaleWeeks,
+		months: D.scaleMonths,
+		quarters: D.scaleQuarters
+	}, Y = {
+		days: T.showScaleDays,
+		weeks: T.showScaleWeeks,
+		months: T.showScaleMonths,
+		quarters: T.showScaleQuarters
+	}, X = Object.keys(J).filter((e) => Y[e]);
+	return /* @__PURE__ */ h(r, {
 		"data-testid": "gantt-toolbar",
 		sx: {
 			display: "flex",
@@ -41,117 +41,141 @@ function b({ onScrollToToday: b, config: x, onExportCSV: S }) {
 			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, {
+		children: [
+			X.length > 0 && /* @__PURE__ */ m(d, {
+				value: O,
+				exclusive: !0,
+				onChange: (e, t) => {
+					t && A(t);
+				},
+				size: "small",
+				"aria-label": D.scaleMonths,
+				children: X.map((e) => /* @__PURE__ */ m(u, {
+					value: e,
+					"data-testid": `gantt-scale-${e}`,
+					children: J[e]
+				}, e))
+			}),
+			T.showAssigneeFilter && U.length > 0 && /* @__PURE__ */ h(i, {
+				size: "small",
+				sx: { minWidth: 140 },
+				children: [/* @__PURE__ */ m(o, {
+					id: "gantt-assignee-filter-label",
+					children: D.filterAssigneeLabel ?? "Assignee"
+				}), /* @__PURE__ */ h(c, {
+					labelId: "gantt-assignee-filter-label",
+					value: V,
+					label: D.filterAssigneeLabel ?? "Assignee",
+					onChange: (e) => H(e.target.value),
+					inputProps: { "data-testid": "gantt-assignee-filter" },
+					children: [/* @__PURE__ */ m(s, {
+						value: "",
+						children: D.filterAssigneeAll ?? "Alle"
+					}), U.map((e) => /* @__PURE__ */ m(s, {
+						value: e,
+						children: e
+					}, e))]
+				})]
+			}),
+			/* @__PURE__ */ h(r, {
+				sx: {
+					ml: "auto",
+					display: "flex",
+					alignItems: "center",
+					gap: 1
+				},
+				children: [
+					T.showExpandCollapseAll && /* @__PURE__ */ m(f, {
+						title: W ? D.collapseAllTooltip : D.expandAllTooltip,
+						children: /* @__PURE__ */ m(a, {
+							size: "small",
+							onClick: W ? B : z,
+							"aria-label": W ? D.collapseAllTooltip : D.expandAllTooltip,
+							"data-testid": "gantt-expand-collapse-all",
+							children: m(W ? b : x, { fontSize: "small" })
+						})
+					}),
+					T.showScrollToToday && w && /* @__PURE__ */ m(f, {
+						title: D.scrollToTodayTooltip,
+						children: /* @__PURE__ */ m("span", { children: /* @__PURE__ */ m(a, {
+							size: "small",
+							onClick: w,
+							disabled: !q,
+							"aria-label": D.scrollToTodayTooltip,
+							"data-testid": "gantt-scroll-to-today",
+							children: /* @__PURE__ */ m(y, { fontSize: "small" })
+						}) })
+					}),
+					T.showDateRange && /* @__PURE__ */ h(p, { children: [/* @__PURE__ */ m(l, {
+						type: "date",
 						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, {
+						label: D.rangeFrom,
+						value: S(j.start),
+						onChange: (e) => {
+							let t = C(e.target.value);
+							t && P({
+								start: t,
+								end: j.end
+							});
+						},
+						slotProps: {
+							inputLabel: { shrink: !0 },
+							htmlInput: { "data-testid": "gantt-range-start" }
+						},
+						sx: { width: 148 }
+					}), /* @__PURE__ */ m(l, {
+						type: "date",
 						size: "small",
-						onClick: j,
-						"aria-label": C.rangeResetTooltip,
-						"data-testid": "gantt-range-reset",
-						children: /* @__PURE__ */ u(m, { fontSize: "small" })
+						label: D.rangeTo,
+						value: S(j.end),
+						onChange: (e) => {
+							let t = C(e.target.value);
+							t && P({
+								start: j.start,
+								end: t
+							});
+						},
+						slotProps: {
+							inputLabel: { shrink: !0 },
+							htmlInput: { "data-testid": "gantt-range-end" }
+						},
+						sx: { width: 148 }
+					})] }),
+					T.showRangeReset && M && /* @__PURE__ */ m(f, {
+						title: D.rangeResetTooltip,
+						children: /* @__PURE__ */ m(a, {
+							size: "small",
+							onClick: F,
+							"aria-label": D.rangeResetTooltip,
+							"data-testid": "gantt-range-reset",
+							children: /* @__PURE__ */ m(v, { fontSize: "small" })
+						})
+					}),
+					T.showExportCSV && E && /* @__PURE__ */ m(f, {
+						title: D.exportCsvTooltip,
+						children: /* @__PURE__ */ m(a, {
+							size: "small",
+							onClick: E,
+							"aria-label": D.exportCsvTooltip,
+							"data-testid": "gantt-export-csv",
+							children: /* @__PURE__ */ m(g, { fontSize: "small" })
+						})
+					}),
+					T.showResetView && /* @__PURE__ */ m(f, {
+						title: D.resetViewTooltip,
+						children: /* @__PURE__ */ m("span", { children: /* @__PURE__ */ m(a, {
+							size: "small",
+							onClick: I,
+							disabled: !G,
+							"aria-label": D.resetViewTooltip,
+							"data-testid": "gantt-reset-view",
+							children: /* @__PURE__ */ 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 };
+export { w as GanttToolbar };

package/dist/components/gantt-chart/hooks/useGanttDrag.d.ts

@@ -29,6 +29,7 @@ export type ActiveDrag = {
 type UseGanttDragOptions = {
     totalWidth: number;
     displayRange: TimelineRange;
+    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;
@@ -40,5 +41,5 @@ type UseGanttDragReturn = {
     handleProgressMouseDown: (e: React.MouseEvent, task: GanttTaskNode, initialProgress: number, barWidthPx: number) => void;
     formatDragDate: (d: Date) => string;
 };
-export declare function useGanttDrag({ totalWidth, displayRange, onTaskMoved, onTaskResized, onTasksChange, }: UseGanttDragOptions): UseGanttDragReturn;
+export declare function useGanttDrag({ totalWidth, displayRange, onDragStart, onTaskMoved, onTaskResized, onTasksChange, }: UseGanttDragOptions): UseGanttDragReturn;
 export {};