@thebuoyant-tsdev/mui-ts-library 3.16.0 → 3.17.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.de.md +15 -0
- package/README.md +15 -0
- package/dist/components/gantt-chart/GanttChart.d.ts +1 -1
- package/dist/components/gantt-chart/GanttChart.js +36 -33
- package/dist/components/gantt-chart/GanttChart.store.d.ts +2 -0
- package/dist/components/gantt-chart/GanttChart.store.js +3 -0
- package/dist/components/gantt-chart/GanttChart.types.d.ts +13 -0
- package/dist/components/gantt-chart/GanttChart.types.js +2 -0
- package/dist/components/gantt-chart/GanttTaskPanel.js +131 -124
- package/dist/components/gantt-chart/GanttTimeline.d.ts +2 -1
- package/dist/components/gantt-chart/GanttTimeline.js +99 -91
- package/dist/components/gantt-chart/GanttToolbar.js +155 -131
- package/dist/components/gantt-chart/hooks/useGanttDrag.d.ts +2 -1
- package/dist/components/gantt-chart/hooks/useGanttDrag.js +35 -35
- package/dist/components/gantt-chart/util/gantt-chart.util.d.ts +5 -0
- package/dist/components/gantt-chart/util/gantt-chart.util.js +36 -30
- package/dist/index.cjs +2 -2
- package/package.json +1 -1
package/README.de.md
CHANGED
|
@@ -475,6 +475,21 @@ Dieses Projekt folgt [Semantic Versioning](https://semver.org/). In der Praxis b
|
|
|
475
475
|
|
|
476
476
|
## Changelog
|
|
477
477
|
|
|
478
|
+
### [3.17.1] — 2026-07-05
|
|
479
|
+
|
|
480
|
+
**Behoben**
|
|
481
|
+
- `GanttChart`: Reset-View-Button (`showResetView`) aktiviert sich jetzt wenn ein Assignee-Filter gesetzt ist — bisher blieb der Button inaktiv obwohl ein Klick den Filter korrekt zurückgesetzt hätte. `isViewChanged` berücksichtigt nun korrekt den Assignee-Filter-Zustand.
|
|
482
|
+
|
|
483
|
+
---
|
|
484
|
+
|
|
485
|
+
### [3.17.0] — 2026-07-05
|
|
486
|
+
|
|
487
|
+
**Hinzugefügt**
|
|
488
|
+
- `GanttChart`: Assignee-Filter-Dropdown in der Toolbar — `toolbarConfig={{ showAssigneeFilter: true }}` fügt ein Select hinzu, das sichtbare Tasks nach Assignee filtert. Der Filter ist vorfahren-inklusiv (Parent-Tasks bleiben sichtbar wenn Nachkommen passen). Zwei neue optionale Übersetzungsschlüssel: `filterAssigneeAll`, `filterAssigneeLabel`.
|
|
489
|
+
- `GanttChart`: `onDragStart(task, type)`-Callback — feuert sofort bei mousedown auf einem zieh-/skalierbaren Balken (vor dem ≥ 5 px-Schwellwert). `type` ist `"move"` oder `"resize"`. Gedacht für optimistisches UI, Analytics und Shadow-Elemente. Kein Debounce nötig — feuert höchstens einmal pro Geste. Siehe [Vollständiger Changelog](https://github.com/thebuoyant/mui-ts-library/blob/main/CHANGELOG.md) für Details.
|
|
490
|
+
|
|
491
|
+
---
|
|
492
|
+
|
|
478
493
|
### [3.16.0] — 2026-07-03
|
|
479
494
|
|
|
480
495
|
**Hinzugefügt**
|
package/README.md
CHANGED
|
@@ -475,6 +475,21 @@ This project follows [Semantic Versioning](https://semver.org/). In practice:
|
|
|
475
475
|
|
|
476
476
|
## Changelog
|
|
477
477
|
|
|
478
|
+
### [3.17.1] — 2026-07-05
|
|
479
|
+
|
|
480
|
+
**Fixed**
|
|
481
|
+
- `GanttChart`: Reset View button (`showResetView`) now activates when an assignee filter is set — previously the button stayed disabled even though clicking it would have cleared the filter. `isViewChanged` now correctly includes the assignee filter state.
|
|
482
|
+
|
|
483
|
+
---
|
|
484
|
+
|
|
485
|
+
### [3.17.0] — 2026-07-05
|
|
486
|
+
|
|
487
|
+
**Added**
|
|
488
|
+
- `GanttChart`: assignee filter dropdown in the toolbar — `toolbarConfig={{ showAssigneeFilter: true }}` adds a Select that filters visible tasks by assignee. The filter is ancestor-inclusive (parents are kept when descendants match). Two new optional translation keys: `filterAssigneeAll`, `filterAssigneeLabel`.
|
|
489
|
+
- `GanttChart`: `onDragStart(task, type)` callback — fires immediately on mousedown on a draggable/resizable bar (before the ≥ 5 px movement threshold). `type` is `"move"` or `"resize"`. Intended for optimistic UI, analytics, and shadow elements. No debouncing needed — fires at most once per gesture. See [Full Changelog](https://github.com/thebuoyant/mui-ts-library/blob/main/CHANGELOG.md) for details.
|
|
490
|
+
|
|
491
|
+
---
|
|
492
|
+
|
|
478
493
|
### [3.16.0] — 2026-07-03
|
|
479
494
|
|
|
480
495
|
**Added**
|
|
@@ -4,4 +4,4 @@ export declare function useGanttChartStore<T>(selector: (state: ReturnType<Gantt
|
|
|
4
4
|
export declare function useRawGanttChartStore(): GanttChartStore;
|
|
5
5
|
export declare function useGanttTranslations(): Required<GanttTranslations>;
|
|
6
6
|
export declare function useGanttTheme(): GanttTheme;
|
|
7
|
-
export declare function GanttChart({ tasks, timeScale, initialExpandAll, showToolbar, defaultRangeStart, defaultRangeEnd, translations, enableBuiltinDialogs, toolbarConfig, zoomable, draggable, resizable, inlineEdit, progressDraggable, showCriticalPath, virtualizeRows, showAssigneeColumn, cascadeDependencies, statusColors, ganttTheme, onExportCSV, onTaskClick, onMilestoneClick, onAddTask, onEditTask, onDeleteTask, onStatusChange, onTasksChange, onTaskMoved, onTaskResized, onTaskCreated, onTaskUpdated, onTaskDeleted, height, width, minPanelWidth, maxPanelWidth, }: GanttChartProps): import("react/jsx-runtime").JSX.Element;
|
|
7
|
+
export declare function GanttChart({ tasks, timeScale, initialExpandAll, showToolbar, defaultRangeStart, defaultRangeEnd, translations, enableBuiltinDialogs, toolbarConfig, zoomable, draggable, resizable, inlineEdit, progressDraggable, showCriticalPath, virtualizeRows, showAssigneeColumn, cascadeDependencies, statusColors, ganttTheme, onExportCSV, onDragStart, onTaskClick, onMilestoneClick, onAddTask, onEditTask, onDeleteTask, onStatusChange, onTasksChange, onTaskMoved, onTaskResized, onTaskCreated, onTaskUpdated, onTaskDeleted, height, width, minPanelWidth, maxPanelWidth, }: GanttChartProps): import("react/jsx-runtime").JSX.Element;
|
|
@@ -46,14 +46,15 @@ var E = [
|
|
|
46
46
|
showDateRange: !0,
|
|
47
47
|
showRangeReset: !0,
|
|
48
48
|
showResetView: !0,
|
|
49
|
-
showExportCSV: !1
|
|
49
|
+
showExportCSV: !1,
|
|
50
|
+
showAssigneeFilter: !1
|
|
50
51
|
};
|
|
51
|
-
function O({ tasks: t, onTaskClick: n, onMilestoneClick: r, onAddTask: s, onEditTask: l, onDeleteTask: _, onStatusChange: v, onTasksChange: x, enableBuiltinDialogs: S = !0, onTaskCreated: C, onTaskUpdated: w, onTaskDeleted: O, showToolbar: k = !0, toolbarConfig: A, height: j, width: ee, minPanelWidth: M = 200, maxPanelWidth: N = 600, zoomable: P = !1, draggable: F = !1, resizable: I = !1, inlineEdit:
|
|
52
|
+
function O({ tasks: t, onTaskClick: n, onMilestoneClick: r, onAddTask: s, onEditTask: l, onDeleteTask: _, onStatusChange: v, onTasksChange: x, enableBuiltinDialogs: S = !0, onTaskCreated: C, onTaskUpdated: w, onTaskDeleted: O, showToolbar: k = !0, toolbarConfig: A, height: j, width: ee, minPanelWidth: M = 200, maxPanelWidth: N = 600, zoomable: P = !1, draggable: F = !1, resizable: I = !1, inlineEdit: te = !1, progressDraggable: ne = !1, showCriticalPath: re = !1, virtualizeRows: L = !1, showAssigneeColumn: R = !1, onExportCSV: z, onDragStart: B, onTaskMoved: V, onTaskResized: H }) {
|
|
52
53
|
let U = T(j, 400), W = d(() => ({
|
|
53
54
|
...D,
|
|
54
55
|
...A
|
|
55
|
-
}), [A]), G = T(ee, "100%"), K = y((e) => e.setTasks), q = y((e) => e.timeScale), J = y((e) => e.setTimeScale), Y = y((e) => e.timelineRange), X = f(null), Z = f(null), Q = f(!1), [$,
|
|
56
|
-
let e =
|
|
56
|
+
}), [A]), G = T(ee, "100%"), K = y((e) => e.setTasks), q = y((e) => e.timeScale), J = y((e) => e.setTimeScale), Y = y((e) => e.timelineRange), X = f(null), Z = f(null), Q = f(!1), [$, ie] = p(320), ae = b(), oe = c(() => {
|
|
57
|
+
let e = ae.getState().tasks, t = [[
|
|
57
58
|
"id",
|
|
58
59
|
"name",
|
|
59
60
|
"status",
|
|
@@ -78,20 +79,20 @@ function O({ tasks: t, onTaskClick: n, onMilestoneClick: r, onAddTask: s, onEdit
|
|
|
78
79
|
(e.dependencies ?? []).join(";"),
|
|
79
80
|
e.color ?? ""
|
|
80
81
|
].join(","))].join("\n");
|
|
81
|
-
if (
|
|
82
|
+
if (z) z(t, e);
|
|
82
83
|
else {
|
|
83
84
|
let e = new Blob([t], { type: "text/csv;charset=utf-8;" }), n = URL.createObjectURL(e), r = document.createElement("a");
|
|
84
85
|
r.href = n, r.download = "gantt-tasks.csv", r.click(), URL.revokeObjectURL(n);
|
|
85
86
|
}
|
|
86
|
-
}, [
|
|
87
|
+
}, [ae, z]);
|
|
87
88
|
u(() => {
|
|
88
89
|
K(t);
|
|
89
90
|
}, [t, K]);
|
|
90
|
-
let
|
|
91
|
+
let se = () => {
|
|
91
92
|
Q.current ||= (Q.current = !0, Z.current && X.current && (Z.current.scrollTop = X.current.scrollTop), !1);
|
|
92
|
-
},
|
|
93
|
+
}, ce = () => {
|
|
93
94
|
Q.current ||= (Q.current = !0, X.current && Z.current && (X.current.scrollTop = Z.current.scrollTop), !1);
|
|
94
|
-
},
|
|
95
|
+
}, le = c(() => {
|
|
95
96
|
if (!Z.current) return;
|
|
96
97
|
let t = e(Y, q), n = Date.now(), r = t.start.getTime(), i = t.end.getTime(), a = (n - r) / (i - r) * Z.current.scrollWidth;
|
|
97
98
|
Z.current.scrollLeft = Math.max(0, a - Z.current.clientWidth / 2);
|
|
@@ -110,11 +111,11 @@ function O({ tasks: t, onTaskClick: n, onMilestoneClick: r, onAddTask: s, onEdit
|
|
|
110
111
|
q,
|
|
111
112
|
J
|
|
112
113
|
]);
|
|
113
|
-
let
|
|
114
|
+
let ue = c((e) => {
|
|
114
115
|
e.preventDefault();
|
|
115
116
|
let t = e.clientX, n = $, r = (e) => {
|
|
116
117
|
let r = e.clientX - t;
|
|
117
|
-
|
|
118
|
+
ie(Math.max(M, Math.min(N, n + r)));
|
|
118
119
|
}, i = () => {
|
|
119
120
|
document.removeEventListener("mousemove", r), document.removeEventListener("mouseup", i);
|
|
120
121
|
};
|
|
@@ -136,9 +137,9 @@ function O({ tasks: t, onTaskClick: n, onMilestoneClick: r, onAddTask: s, onEdit
|
|
|
136
137
|
overflow: "hidden"
|
|
137
138
|
},
|
|
138
139
|
children: [k && /* @__PURE__ */ h(o, {
|
|
139
|
-
onScrollToToday:
|
|
140
|
+
onScrollToToday: le,
|
|
140
141
|
config: W,
|
|
141
|
-
onExportCSV: W.showExportCSV ?
|
|
142
|
+
onExportCSV: W.showExportCSV ? oe : void 0
|
|
142
143
|
}), /* @__PURE__ */ g(m, {
|
|
143
144
|
sx: {
|
|
144
145
|
display: "flex",
|
|
@@ -148,7 +149,7 @@ function O({ tasks: t, onTaskClick: n, onMilestoneClick: r, onAddTask: s, onEdit
|
|
|
148
149
|
children: [
|
|
149
150
|
/* @__PURE__ */ h(i, {
|
|
150
151
|
scrollRef: X,
|
|
151
|
-
onScroll:
|
|
152
|
+
onScroll: se,
|
|
152
153
|
panelWidth: $,
|
|
153
154
|
onTaskClick: n,
|
|
154
155
|
onAddTask: s,
|
|
@@ -160,9 +161,9 @@ function O({ tasks: t, onTaskClick: n, onMilestoneClick: r, onAddTask: s, onEdit
|
|
|
160
161
|
onTaskCreated: C,
|
|
161
162
|
onTaskUpdated: w,
|
|
162
163
|
onTaskDeleted: O,
|
|
163
|
-
inlineEdit:
|
|
164
|
-
virtualizeRows:
|
|
165
|
-
showAssigneeColumn:
|
|
164
|
+
inlineEdit: te,
|
|
165
|
+
virtualizeRows: L,
|
|
166
|
+
showAssigneeColumn: R
|
|
166
167
|
}),
|
|
167
168
|
/* @__PURE__ */ h(m, {
|
|
168
169
|
"data-testid": "gantt-panel-divider",
|
|
@@ -173,18 +174,19 @@ function O({ tasks: t, onTaskClick: n, onMilestoneClick: r, onAddTask: s, onEdit
|
|
|
173
174
|
cursor: "col-resize",
|
|
174
175
|
"&:hover": { bgcolor: "action.hover" }
|
|
175
176
|
},
|
|
176
|
-
onMouseDown:
|
|
177
|
+
onMouseDown: ue
|
|
177
178
|
}),
|
|
178
179
|
/* @__PURE__ */ h(a, {
|
|
179
180
|
scrollRef: Z,
|
|
180
|
-
onScroll:
|
|
181
|
+
onScroll: ce,
|
|
181
182
|
onTaskClick: n,
|
|
182
183
|
onMilestoneClick: r,
|
|
183
184
|
draggable: F,
|
|
184
185
|
resizable: I,
|
|
185
|
-
progressDraggable:
|
|
186
|
-
showCriticalPath:
|
|
187
|
-
virtualizeRows:
|
|
186
|
+
progressDraggable: ne,
|
|
187
|
+
showCriticalPath: re,
|
|
188
|
+
virtualizeRows: L,
|
|
189
|
+
onDragStart: B,
|
|
188
190
|
onTaskMoved: V,
|
|
189
191
|
onTaskResized: H,
|
|
190
192
|
onTasksChange: x,
|
|
@@ -194,7 +196,7 @@ function O({ tasks: t, onTaskClick: n, onMilestoneClick: r, onAddTask: s, onEdit
|
|
|
194
196
|
})]
|
|
195
197
|
});
|
|
196
198
|
}
|
|
197
|
-
function k({ tasks: e, timeScale: i = "months", initialExpandAll: a = !1, showToolbar: o = !0, defaultRangeStart: s, defaultRangeEnd: c, translations: l, enableBuiltinDialogs: u = !0, toolbarConfig: f, zoomable: m = !1, draggable: g = !1, resizable: _ = !1, inlineEdit: y = !1, progressDraggable: b = !1, showCriticalPath: S = !1, virtualizeRows: w = !1, showAssigneeColumn: T = !1, cascadeDependencies: E = !1, statusColors: D, ganttTheme: k, onExportCSV: A,
|
|
199
|
+
function k({ tasks: e, timeScale: i = "months", initialExpandAll: a = !1, showToolbar: o = !0, defaultRangeStart: s, defaultRangeEnd: c, translations: l, enableBuiltinDialogs: u = !0, toolbarConfig: f, zoomable: m = !1, draggable: g = !1, resizable: _ = !1, inlineEdit: y = !1, progressDraggable: b = !1, showCriticalPath: S = !1, virtualizeRows: w = !1, showAssigneeColumn: T = !1, cascadeDependencies: E = !1, statusColors: D, ganttTheme: k, onExportCSV: A, onDragStart: j, onTaskClick: ee, onMilestoneClick: M, onAddTask: N, onEditTask: P, onDeleteTask: F, onStatusChange: I, onTasksChange: te, onTaskMoved: ne, onTaskResized: re, onTaskCreated: L, onTaskUpdated: R, onTaskDeleted: z, height: B, width: V, minPanelWidth: H, maxPanelWidth: U }) {
|
|
198
200
|
let W = d(() => ({
|
|
199
201
|
...r,
|
|
200
202
|
...l
|
|
@@ -233,16 +235,17 @@ function k({ tasks: e, timeScale: i = "months", initialExpandAll: a = !1, showTo
|
|
|
233
235
|
virtualizeRows: w,
|
|
234
236
|
showAssigneeColumn: T,
|
|
235
237
|
onExportCSV: A,
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
|
|
238
|
+
onDragStart: j,
|
|
239
|
+
onTaskClick: ee,
|
|
240
|
+
onMilestoneClick: M,
|
|
241
|
+
onAddTask: N,
|
|
242
|
+
onEditTask: P,
|
|
243
|
+
onDeleteTask: F,
|
|
244
|
+
onStatusChange: I,
|
|
245
|
+
onTasksChange: te,
|
|
246
|
+
onTaskMoved: ne,
|
|
247
|
+
onTaskResized: re,
|
|
248
|
+
onTaskCreated: L,
|
|
246
249
|
onTaskUpdated: R,
|
|
247
250
|
onTaskDeleted: z,
|
|
248
251
|
height: B,
|
|
@@ -11,6 +11,8 @@ export type GanttChartStoreState = {
|
|
|
11
11
|
defaultTimeScale: GanttTimeScale;
|
|
12
12
|
initialExpandAll: boolean;
|
|
13
13
|
isExpandedCustomized: boolean;
|
|
14
|
+
assigneeFilter: string;
|
|
15
|
+
setAssigneeFilter: (assignee: string) => void;
|
|
14
16
|
setTasks: (tasks: GanttTask[]) => void;
|
|
15
17
|
addTask: (task: GanttTask) => void;
|
|
16
18
|
updateTask: (task: GanttTask) => void;
|
|
@@ -21,6 +21,8 @@ function l(e, r = "months", o = !1, l, u = !1) {
|
|
|
21
21
|
defaultTimeScale: r,
|
|
22
22
|
initialExpandAll: o,
|
|
23
23
|
isExpandedCustomized: !1,
|
|
24
|
+
assigneeFilter: "",
|
|
25
|
+
setAssigneeFilter: (e) => s({ assigneeFilter: e }),
|
|
24
26
|
setTasks: (e) => {
|
|
25
27
|
s((n) => ({
|
|
26
28
|
tasks: e,
|
|
@@ -106,6 +108,7 @@ function l(e, r = "months", o = !1, l, u = !1) {
|
|
|
106
108
|
timelineRange: i(e.tasks),
|
|
107
109
|
isRangeCustomized: !1,
|
|
108
110
|
isExpandedCustomized: !1,
|
|
111
|
+
assigneeFilter: "",
|
|
109
112
|
expandedIds: e.initialExpandAll ? new Set(e.tasks.map((e) => e.id)) : new Set(e.tasks.filter((e) => !e.parentId).map((e) => e.id))
|
|
110
113
|
}));
|
|
111
114
|
},
|
|
@@ -54,6 +54,10 @@ export type GanttTranslations = {
|
|
|
54
54
|
dialogFieldDependenciesNone: string;
|
|
55
55
|
/** Label for the progress slider in the task dialog (0–100 %) @since 3.16.0 */
|
|
56
56
|
dialogFieldProgress?: string;
|
|
57
|
+
/** "All" option label in the assignee filter dropdown @since 3.17.0 */
|
|
58
|
+
filterAssigneeAll?: string;
|
|
59
|
+
/** Assignee filter Select label in the toolbar @since 3.17.0 */
|
|
60
|
+
filterAssigneeLabel?: string;
|
|
57
61
|
columnActions: string;
|
|
58
62
|
/** Header label for the Assignee column — shown when showAssigneeColumn=true @since 2.7.0 */
|
|
59
63
|
columnAssignee?: string;
|
|
@@ -89,6 +93,8 @@ export type GanttToolbarConfig = {
|
|
|
89
93
|
showResetView?: boolean;
|
|
90
94
|
/** Show CSV export button in the toolbar (default: false) */
|
|
91
95
|
showExportCSV?: boolean;
|
|
96
|
+
/** Show assignee filter dropdown in toolbar (default: false) */
|
|
97
|
+
showAssigneeFilter?: boolean;
|
|
92
98
|
};
|
|
93
99
|
export type GanttChartProps = {
|
|
94
100
|
cascadeDependencies?: boolean;
|
|
@@ -126,6 +132,13 @@ export type GanttChartProps = {
|
|
|
126
132
|
onTaskClick?: (task: GanttTask) => void;
|
|
127
133
|
onTaskCreated?: (task: GanttTask) => void;
|
|
128
134
|
onTaskDeleted?: (taskId: string) => void;
|
|
135
|
+
/**
|
|
136
|
+
* Fired once when the user presses the mouse button on a draggable bar (before any movement).
|
|
137
|
+
* Use this for optimistic UI, analytics, or showing a shadow element during drag.
|
|
138
|
+
* `type` distinguishes between a move gesture and a resize gesture.
|
|
139
|
+
* @since 3.17.0
|
|
140
|
+
*/
|
|
141
|
+
onDragStart?: (task: GanttTask, type: "move" | "resize") => void;
|
|
129
142
|
onTaskMoved?: (task: GanttTask, newStart: Date, newEnd: Date) => void;
|
|
130
143
|
onTaskResized?: (task: GanttTask, newEnd: Date) => void;
|
|
131
144
|
onTasksChange?: (tasks: GanttTask[]) => void;
|
|
@@ -33,6 +33,8 @@ var e = {
|
|
|
33
33
|
dialogFieldDependencies: "Vorgänger",
|
|
34
34
|
dialogFieldDependenciesNone: "— Keine —",
|
|
35
35
|
dialogFieldProgress: "Fortschritt (%)",
|
|
36
|
+
filterAssigneeAll: "Alle",
|
|
37
|
+
filterAssigneeLabel: "Assignee",
|
|
36
38
|
scrollToTodayTooltip: "Zum heutigen Tag",
|
|
37
39
|
expandAllTooltip: "Alle aufklappen",
|
|
38
40
|
collapseAllTooltip: "Alle zuklappen",
|