gantt-task-react-v 1.5.16 → 1.5.17

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.
@@ -34,7 +34,6 @@ export type TaskListProps = {
34
34
  scrollToBottomStep: () => void;
35
35
  scrollToTask: (task: Task) => void;
36
36
  scrollToTopStep: () => void;
37
- selectTask: (taskId: string) => void;
38
37
  selectTaskOnMouseDown: (taskId: string, event: MouseEvent) => void;
39
38
  selectedIdsMirror: Readonly<Record<string, true>>;
40
39
  taskListContainerRef: RefObject<HTMLDivElement>;
@@ -10207,7 +10207,6 @@ const TaskListTableRowInner = forwardRef(
10207
10207
  onDoubleClick,
10208
10208
  onExpanderClick,
10209
10209
  scrollToTask,
10210
- selectTask,
10211
10210
  selectTaskOnMouseDown,
10212
10211
  style: style2,
10213
10212
  task,
@@ -10225,15 +10224,22 @@ const TaskListTableRowInner = forwardRef(
10225
10224
  if (task.type !== "empty") {
10226
10225
  scrollToTask(task);
10227
10226
  }
10228
- if (event.detail < 2) {
10229
- selectTaskOnMouseDown(task.id, event);
10230
- if (onClick) {
10231
- onClick(task);
10232
- }
10227
+ selectTaskOnMouseDown(task.id, event);
10228
+ if (onClick) {
10229
+ onClick(task);
10233
10230
  }
10234
10231
  },
10235
10232
  [onClick, scrollToTask, selectTaskOnMouseDown, task]
10236
10233
  );
10234
+ const onRootDoubleClick = useCallback(
10235
+ (event) => {
10236
+ if (onDoubleClick) {
10237
+ event.preventDefault();
10238
+ onDoubleClick(task);
10239
+ }
10240
+ },
10241
+ [onDoubleClick, task]
10242
+ );
10237
10243
  const onContextMenu = useCallback(
10238
10244
  (event) => {
10239
10245
  event.preventDefault();
@@ -10244,14 +10250,6 @@ const TaskListTableRowInner = forwardRef(
10244
10250
  },
10245
10251
  [handleOpenContextMenu, task]
10246
10252
  );
10247
- const onRootDoubleClick = useCallback(() => {
10248
- if (task.type !== "empty") {
10249
- selectTask(task.id);
10250
- if (onDoubleClick) {
10251
- onDoubleClick(task);
10252
- }
10253
- }
10254
- }, [onDoubleClick, selectTask, task]);
10255
10253
  const dependencies = useMemo(() => {
10256
10254
  const dependenciesAtLevel = dependencyMap.get(comparisonLevel);
10257
10255
  if (!dependenciesAtLevel) {
@@ -10933,7 +10931,6 @@ const TaskListInner = ({
10933
10931
  onExpanderClick,
10934
10932
  onClick,
10935
10933
  onDoubleClick,
10936
- selectTask,
10937
10934
  scrollToTask,
10938
10935
  selectTaskOnMouseDown,
10939
10936
  selectedIdsMirror,
@@ -11004,7 +11001,6 @@ const TaskListInner = ({
11004
11001
  onDoubleClick,
11005
11002
  onExpanderClick,
11006
11003
  scrollToTask,
11007
- selectTask,
11008
11004
  selectTaskOnMouseDown,
11009
11005
  task,
11010
11006
  depth
@@ -11028,7 +11024,6 @@ const TaskListInner = ({
11028
11024
  mapTaskToNestedIndex,
11029
11025
  onClick,
11030
11026
  onDoubleClick,
11031
- selectTask,
11032
11027
  onExpanderClick,
11033
11028
  scrollToTask,
11034
11029
  selectTaskOnMouseDown,
@@ -18296,9 +18291,13 @@ const useSelection = (taskToRowIndexMap, rowIndexToTaskMap, checkTaskIdExists, o
18296
18291
  toggleTask(taskId);
18297
18292
  return;
18298
18293
  }
18299
- selectTask(taskId);
18294
+ if (selectedIdsMirror[taskId]) {
18295
+ toggleTask(taskId);
18296
+ } else {
18297
+ selectTask(taskId);
18298
+ }
18300
18299
  },
18301
- [selectTask, selectTasksFromLastSelected, toggleTask]
18300
+ [selectTask, selectTasksFromLastSelected, toggleTask, selectedIdsMirror]
18302
18301
  );
18303
18302
  const cutTask = useCallback((task) => {
18304
18303
  setCutIdsMirror({
@@ -19498,15 +19497,15 @@ const GanttLoaderInner = ({ loading }) => {
19498
19497
  return /* @__PURE__ */ jsx("div", { className: `${styles$1.loader} ${loading ? "" : styles$1.loaderHidden}` });
19499
19498
  };
19500
19499
  const GanttLoader = memo(GanttLoaderInner);
19501
- const overlay = "_overlay_hyem8_1";
19502
- const drawer = "_drawer_hyem8_19";
19503
- const drawer_open = "_drawer_open_hyem8_51";
19504
- const header = "_header_hyem8_59";
19505
- const title = "_title_hyem8_77";
19506
- const closeButton = "_closeButton_hyem8_97";
19507
- const body = "_body_hyem8_131";
19508
- const goToTaskBar = "_goToTaskBar_hyem8_145";
19509
- const goToTaskButton = "_goToTaskButton_hyem8_159";
19500
+ const overlay = "_overlay_1fu4j_1";
19501
+ const drawer = "_drawer_1fu4j_9";
19502
+ const drawer_open = "_drawer_open_1fu4j_43";
19503
+ const header = "_header_1fu4j_51";
19504
+ const title = "_title_1fu4j_69";
19505
+ const closeButton = "_closeButton_1fu4j_89";
19506
+ const body = "_body_1fu4j_123";
19507
+ const goToTaskBar = "_goToTaskBar_1fu4j_137";
19508
+ const goToTaskButton = "_goToTaskButton_1fu4j_151";
19510
19509
  const styles = {
19511
19510
  overlay,
19512
19511
  drawer,
@@ -19525,13 +19524,6 @@ const GanttDrawerInner = ({
19525
19524
  onGoToTask,
19526
19525
  renderContent
19527
19526
  }) => {
19528
- const handleOverlayClick = useCallback(
19529
- (e) => {
19530
- e.stopPropagation();
19531
- onClose();
19532
- },
19533
- [onClose]
19534
- );
19535
19527
  const title2 = (data == null ? void 0 : data.type) === "task" ? data.task.name : (data == null ? void 0 : data.type) === "arrow" ? `${data.taskFrom.name} → ${data.taskTo.name}` : "";
19536
19528
  const goToTaskIds = [];
19537
19529
  if ((data == null ? void 0 : data.type) === "task") {
@@ -19539,42 +19531,62 @@ const GanttDrawerInner = ({
19539
19531
  } else if ((data == null ? void 0 : data.type) === "arrow") {
19540
19532
  goToTaskIds.push(data.taskFrom.id, data.taskTo.id);
19541
19533
  }
19542
- return /* @__PURE__ */ jsxs(Fragment, { children: [
19543
- data && /* @__PURE__ */ jsx("div", { className: styles.overlay, onClick: handleOverlayClick }),
19544
- /* @__PURE__ */ jsxs(
19545
- "div",
19546
- {
19547
- className: `${styles.drawer}${data ? ` ${styles.drawer_open}` : ""}`,
19548
- style: { width },
19549
- children: [
19550
- /* @__PURE__ */ jsxs("div", { className: styles.header, children: [
19551
- /* @__PURE__ */ jsx("span", { className: styles.title, children: title2 }),
19552
- /* @__PURE__ */ jsx(
19534
+ return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs(
19535
+ "div",
19536
+ {
19537
+ className: `${styles.drawer}${data ? ` ${styles.drawer_open}` : ""}`,
19538
+ style: { width },
19539
+ children: [
19540
+ /* @__PURE__ */ jsxs("div", { className: styles.header, children: [
19541
+ /* @__PURE__ */ jsx("span", { className: styles.title, children: title2 }),
19542
+ /* @__PURE__ */ jsx(
19543
+ "button",
19544
+ {
19545
+ className: styles.closeButton,
19546
+ onClick: onClose,
19547
+ "aria-label": "Close drawer",
19548
+ type: "button",
19549
+ children: /* @__PURE__ */ jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", children: /* @__PURE__ */ jsx(
19550
+ "path",
19551
+ {
19552
+ d: "M12 4L4 12M4 4l8 8",
19553
+ stroke: "currentColor",
19554
+ strokeWidth: "1.5",
19555
+ strokeLinecap: "round"
19556
+ }
19557
+ ) })
19558
+ }
19559
+ )
19560
+ ] }),
19561
+ /* @__PURE__ */ jsxs("div", { className: styles.body, children: [
19562
+ data && onGoToTask && /* @__PURE__ */ jsxs("div", { className: styles.goToTaskBar, children: [
19563
+ data.type === "task" && /* @__PURE__ */ jsxs(
19553
19564
  "button",
19554
19565
  {
19555
- className: styles.closeButton,
19556
- onClick: onClose,
19557
- "aria-label": "Close drawer",
19566
+ className: styles.goToTaskButton,
19567
+ onClick: () => onGoToTask(data.task.id),
19558
19568
  type: "button",
19559
- children: /* @__PURE__ */ jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", children: /* @__PURE__ */ jsx(
19560
- "path",
19561
- {
19562
- d: "M12 4L4 12M4 4l8 8",
19563
- stroke: "currentColor",
19564
- strokeWidth: "1.5",
19565
- strokeLinecap: "round"
19566
- }
19567
- ) })
19569
+ children: [
19570
+ /* @__PURE__ */ jsx("svg", { width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", children: /* @__PURE__ */ jsx(
19571
+ "path",
19572
+ {
19573
+ d: "M2 7h10M8 3l4 4-4 4",
19574
+ stroke: "currentColor",
19575
+ strokeWidth: "1.5",
19576
+ strokeLinecap: "round",
19577
+ strokeLinejoin: "round"
19578
+ }
19579
+ ) }),
19580
+ "Go to Task"
19581
+ ]
19568
19582
  }
19569
- )
19570
- ] }),
19571
- /* @__PURE__ */ jsxs("div", { className: styles.body, children: [
19572
- data && onGoToTask && /* @__PURE__ */ jsxs("div", { className: styles.goToTaskBar, children: [
19573
- data.type === "task" && /* @__PURE__ */ jsxs(
19583
+ ),
19584
+ data.type === "arrow" && /* @__PURE__ */ jsxs(Fragment, { children: [
19585
+ /* @__PURE__ */ jsxs(
19574
19586
  "button",
19575
19587
  {
19576
19588
  className: styles.goToTaskButton,
19577
- onClick: () => onGoToTask(data.task.id),
19589
+ onClick: () => onGoToTask(data.taskFrom.id),
19578
19590
  type: "button",
19579
19591
  children: [
19580
19592
  /* @__PURE__ */ jsx("svg", { width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", children: /* @__PURE__ */ jsx(
@@ -19587,63 +19599,40 @@ const GanttDrawerInner = ({
19587
19599
  strokeLinejoin: "round"
19588
19600
  }
19589
19601
  ) }),
19590
- "Go to Task"
19602
+ "Go to ",
19603
+ data.taskFrom.name
19591
19604
  ]
19592
19605
  }
19593
19606
  ),
19594
- data.type === "arrow" && /* @__PURE__ */ jsxs(Fragment, { children: [
19595
- /* @__PURE__ */ jsxs(
19596
- "button",
19597
- {
19598
- className: styles.goToTaskButton,
19599
- onClick: () => onGoToTask(data.taskFrom.id),
19600
- type: "button",
19601
- children: [
19602
- /* @__PURE__ */ jsx("svg", { width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", children: /* @__PURE__ */ jsx(
19603
- "path",
19604
- {
19605
- d: "M2 7h10M8 3l4 4-4 4",
19606
- stroke: "currentColor",
19607
- strokeWidth: "1.5",
19608
- strokeLinecap: "round",
19609
- strokeLinejoin: "round"
19610
- }
19611
- ) }),
19612
- "Go to ",
19613
- data.taskFrom.name
19614
- ]
19615
- }
19616
- ),
19617
- /* @__PURE__ */ jsxs(
19618
- "button",
19619
- {
19620
- className: styles.goToTaskButton,
19621
- onClick: () => onGoToTask(data.taskTo.id),
19622
- type: "button",
19623
- children: [
19624
- /* @__PURE__ */ jsx("svg", { width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", children: /* @__PURE__ */ jsx(
19625
- "path",
19626
- {
19627
- d: "M2 7h10M8 3l4 4-4 4",
19628
- stroke: "currentColor",
19629
- strokeWidth: "1.5",
19630
- strokeLinecap: "round",
19631
- strokeLinejoin: "round"
19632
- }
19633
- ) }),
19634
- "Go to ",
19635
- data.taskTo.name
19636
- ]
19637
- }
19638
- )
19639
- ] })
19640
- ] }),
19641
- data && renderContent ? renderContent(data) : null
19642
- ] })
19643
- ]
19644
- }
19645
- )
19646
- ] });
19607
+ /* @__PURE__ */ jsxs(
19608
+ "button",
19609
+ {
19610
+ className: styles.goToTaskButton,
19611
+ onClick: () => onGoToTask(data.taskTo.id),
19612
+ type: "button",
19613
+ children: [
19614
+ /* @__PURE__ */ jsx("svg", { width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", children: /* @__PURE__ */ jsx(
19615
+ "path",
19616
+ {
19617
+ d: "M2 7h10M8 3l4 4-4 4",
19618
+ stroke: "currentColor",
19619
+ strokeWidth: "1.5",
19620
+ strokeLinecap: "round",
19621
+ strokeLinejoin: "round"
19622
+ }
19623
+ ) }),
19624
+ "Go to ",
19625
+ data.taskTo.name
19626
+ ]
19627
+ }
19628
+ )
19629
+ ] })
19630
+ ] }),
19631
+ data && renderContent ? renderContent(data) : null
19632
+ ] })
19633
+ ]
19634
+ }
19635
+ ) });
19647
19636
  };
19648
19637
  const GanttDrawer = memo(GanttDrawerInner);
19649
19638
  const Gantt = (props) => {
@@ -19672,6 +19661,8 @@ const Gantt = (props) => {
19672
19661
  onSelectTaskIds,
19673
19662
  // Invoked when user right-clicks a row in the task list
19674
19663
  onRowContextMenu,
19664
+ onClickTaskRow,
19665
+ onDoubleClickTaskRow,
19675
19666
  onWheel,
19676
19667
  roundEndDate: clientRoundEndDate = defaultRoundEndDate,
19677
19668
  roundStartDate: clientRoundStartDate = defaultRoundStartDate,
@@ -19692,7 +19683,6 @@ const Gantt = (props) => {
19692
19683
  showProgress = true,
19693
19684
  progressColor,
19694
19685
  scrollToTaskId,
19695
- initialSelectedTaskId,
19696
19686
  drawer: drawerProps
19697
19687
  } = props;
19698
19688
  const ganttSVGRef = useRef(null);
@@ -20008,14 +19998,6 @@ const Gantt = (props) => {
20008
19998
  [mapTaskToCoordinates, setScrollXProgrammatically]
20009
19999
  );
20010
20000
  const prevScrollToTaskIdRef = useRef(void 0);
20011
- const prevInitialSelectedTaskIdRef = useRef(void 0);
20012
- useEffect(() => {
20013
- if (!initialSelectedTaskId || initialSelectedTaskId === prevInitialSelectedTaskIdRef.current) {
20014
- return;
20015
- }
20016
- prevInitialSelectedTaskIdRef.current = initialSelectedTaskId;
20017
- selectTask(initialSelectedTaskId);
20018
- }, [initialSelectedTaskId, selectTask]);
20019
20001
  useEffect(() => {
20020
20002
  if (!scrollToTaskId || scrollToTaskId === prevScrollToTaskIdRef.current) {
20021
20003
  return;
@@ -20852,28 +20834,26 @@ const Gantt = (props) => {
20852
20834
  },
20853
20835
  [enableDrawer, taskBar]
20854
20836
  );
20855
- const handleTaskListRowClick = useCallback(
20837
+ const handleTaskRowClick = useCallback(
20856
20838
  (task) => {
20857
- if (taskList.onClickRow) {
20858
- taskList.onClickRow(task);
20839
+ if (onClickTaskRow) {
20840
+ onClickTaskRow(task);
20859
20841
  }
20860
20842
  },
20861
- [taskList]
20843
+ [onClickTaskRow]
20862
20844
  );
20863
- const handleTaskListRowDoubleClick = useCallback(
20845
+ const handleTaskRowDoubleClick = useCallback(
20864
20846
  (task) => {
20865
- if (task.type !== "empty") {
20866
- if (enableDrawer) {
20867
- setActiveArrowKey(null);
20868
- setActiveTaskId(task.id);
20869
- setDrawerData({ type: "task", task });
20870
- }
20847
+ if (enableDrawer && task.type !== "empty") {
20848
+ setActiveArrowKey(null);
20849
+ setActiveTaskId(task.id);
20850
+ setDrawerData({ type: "task", task });
20871
20851
  }
20872
- if (taskList.onDoubleClickRow) {
20873
- taskList.onDoubleClickRow(task);
20852
+ if (onDoubleClickTaskRow) {
20853
+ onDoubleClickTaskRow(task);
20874
20854
  }
20875
20855
  },
20876
- [enableDrawer, taskList]
20856
+ [enableDrawer, onDoubleClickTaskRow]
20877
20857
  );
20878
20858
  const handleDrawerClose = useCallback(() => {
20879
20859
  setDrawerData(null);
@@ -21219,12 +21199,11 @@ const Gantt = (props) => {
21219
21199
  handleMoveTasksInside,
21220
21200
  handleOpenContextMenu: handleOpenContextMenuForRow,
21221
21201
  mapTaskToNestedIndex,
21222
- onClick: handleTaskListRowClick,
21223
- onDoubleClick: handleTaskListRowDoubleClick,
21202
+ onClick: handleTaskRowClick,
21203
+ onDoubleClick: handleTaskRowDoubleClick,
21224
21204
  onExpanderClick,
21225
21205
  scrollToBottomStep,
21226
21206
  scrollToTopStep,
21227
- selectTask,
21228
21207
  selectTaskOnMouseDown,
21229
21208
  selectedIdsMirror,
21230
21209
  scrollToTask,
@@ -21251,14 +21230,13 @@ const Gantt = (props) => {
21251
21230
  handleMoveTaskBefore,
21252
21231
  handleMoveTasksInside,
21253
21232
  handleOpenContextMenuForRow,
21254
- handleTaskListRowClick,
21255
- handleTaskListRowDoubleClick,
21233
+ handleTaskRowClick,
21234
+ handleTaskRowDoubleClick,
21256
21235
  mapTaskToNestedIndex,
21257
21236
  onExpanderClick,
21258
21237
  scrollToBottomStep,
21259
21238
  scrollToTask,
21260
21239
  scrollToTopStep,
21261
- selectTask,
21262
21240
  selectTaskOnMouseDown,
21263
21241
  selectedIdsMirror,
21264
21242
  taskList,
@@ -10224,7 +10224,6 @@
10224
10224
  onDoubleClick,
10225
10225
  onExpanderClick,
10226
10226
  scrollToTask,
10227
- selectTask,
10228
10227
  selectTaskOnMouseDown,
10229
10228
  style: style2,
10230
10229
  task,
@@ -10242,15 +10241,22 @@
10242
10241
  if (task.type !== "empty") {
10243
10242
  scrollToTask(task);
10244
10243
  }
10245
- if (event.detail < 2) {
10246
- selectTaskOnMouseDown(task.id, event);
10247
- if (onClick) {
10248
- onClick(task);
10249
- }
10244
+ selectTaskOnMouseDown(task.id, event);
10245
+ if (onClick) {
10246
+ onClick(task);
10250
10247
  }
10251
10248
  },
10252
10249
  [onClick, scrollToTask, selectTaskOnMouseDown, task]
10253
10250
  );
10251
+ const onRootDoubleClick = React.useCallback(
10252
+ (event) => {
10253
+ if (onDoubleClick) {
10254
+ event.preventDefault();
10255
+ onDoubleClick(task);
10256
+ }
10257
+ },
10258
+ [onDoubleClick, task]
10259
+ );
10254
10260
  const onContextMenu = React.useCallback(
10255
10261
  (event) => {
10256
10262
  event.preventDefault();
@@ -10261,14 +10267,6 @@
10261
10267
  },
10262
10268
  [handleOpenContextMenu, task]
10263
10269
  );
10264
- const onRootDoubleClick = React.useCallback(() => {
10265
- if (task.type !== "empty") {
10266
- selectTask(task.id);
10267
- if (onDoubleClick) {
10268
- onDoubleClick(task);
10269
- }
10270
- }
10271
- }, [onDoubleClick, selectTask, task]);
10272
10270
  const dependencies = React.useMemo(() => {
10273
10271
  const dependenciesAtLevel = dependencyMap.get(comparisonLevel);
10274
10272
  if (!dependenciesAtLevel) {
@@ -10950,7 +10948,6 @@
10950
10948
  onExpanderClick,
10951
10949
  onClick,
10952
10950
  onDoubleClick,
10953
- selectTask,
10954
10951
  scrollToTask,
10955
10952
  selectTaskOnMouseDown,
10956
10953
  selectedIdsMirror,
@@ -11021,7 +11018,6 @@
11021
11018
  onDoubleClick,
11022
11019
  onExpanderClick,
11023
11020
  scrollToTask,
11024
- selectTask,
11025
11021
  selectTaskOnMouseDown,
11026
11022
  task,
11027
11023
  depth
@@ -11045,7 +11041,6 @@
11045
11041
  mapTaskToNestedIndex,
11046
11042
  onClick,
11047
11043
  onDoubleClick,
11048
- selectTask,
11049
11044
  onExpanderClick,
11050
11045
  scrollToTask,
11051
11046
  selectTaskOnMouseDown,
@@ -18313,9 +18308,13 @@
18313
18308
  toggleTask(taskId);
18314
18309
  return;
18315
18310
  }
18316
- selectTask(taskId);
18311
+ if (selectedIdsMirror[taskId]) {
18312
+ toggleTask(taskId);
18313
+ } else {
18314
+ selectTask(taskId);
18315
+ }
18317
18316
  },
18318
- [selectTask, selectTasksFromLastSelected, toggleTask]
18317
+ [selectTask, selectTasksFromLastSelected, toggleTask, selectedIdsMirror]
18319
18318
  );
18320
18319
  const cutTask = React.useCallback((task) => {
18321
18320
  setCutIdsMirror({
@@ -19515,15 +19514,15 @@
19515
19514
  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: `${styles$1.loader} ${loading ? "" : styles$1.loaderHidden}` });
19516
19515
  };
19517
19516
  const GanttLoader = React.memo(GanttLoaderInner);
19518
- const overlay = "_overlay_hyem8_1";
19519
- const drawer = "_drawer_hyem8_19";
19520
- const drawer_open = "_drawer_open_hyem8_51";
19521
- const header = "_header_hyem8_59";
19522
- const title = "_title_hyem8_77";
19523
- const closeButton = "_closeButton_hyem8_97";
19524
- const body = "_body_hyem8_131";
19525
- const goToTaskBar = "_goToTaskBar_hyem8_145";
19526
- const goToTaskButton = "_goToTaskButton_hyem8_159";
19517
+ const overlay = "_overlay_1fu4j_1";
19518
+ const drawer = "_drawer_1fu4j_9";
19519
+ const drawer_open = "_drawer_open_1fu4j_43";
19520
+ const header = "_header_1fu4j_51";
19521
+ const title = "_title_1fu4j_69";
19522
+ const closeButton = "_closeButton_1fu4j_89";
19523
+ const body = "_body_1fu4j_123";
19524
+ const goToTaskBar = "_goToTaskBar_1fu4j_137";
19525
+ const goToTaskButton = "_goToTaskButton_1fu4j_151";
19527
19526
  const styles = {
19528
19527
  overlay,
19529
19528
  drawer,
@@ -19542,13 +19541,6 @@
19542
19541
  onGoToTask,
19543
19542
  renderContent
19544
19543
  }) => {
19545
- const handleOverlayClick = React.useCallback(
19546
- (e) => {
19547
- e.stopPropagation();
19548
- onClose();
19549
- },
19550
- [onClose]
19551
- );
19552
19544
  const title2 = (data == null ? void 0 : data.type) === "task" ? data.task.name : (data == null ? void 0 : data.type) === "arrow" ? `${data.taskFrom.name} → ${data.taskTo.name}` : "";
19553
19545
  const goToTaskIds = [];
19554
19546
  if ((data == null ? void 0 : data.type) === "task") {
@@ -19556,42 +19548,62 @@
19556
19548
  } else if ((data == null ? void 0 : data.type) === "arrow") {
19557
19549
  goToTaskIds.push(data.taskFrom.id, data.taskTo.id);
19558
19550
  }
19559
- return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
19560
- data && /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.overlay, onClick: handleOverlayClick }),
19561
- /* @__PURE__ */ jsxRuntime.jsxs(
19562
- "div",
19563
- {
19564
- className: `${styles.drawer}${data ? ` ${styles.drawer_open}` : ""}`,
19565
- style: { width },
19566
- children: [
19567
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.header, children: [
19568
- /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles.title, children: title2 }),
19569
- /* @__PURE__ */ jsxRuntime.jsx(
19551
+ return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: /* @__PURE__ */ jsxRuntime.jsxs(
19552
+ "div",
19553
+ {
19554
+ className: `${styles.drawer}${data ? ` ${styles.drawer_open}` : ""}`,
19555
+ style: { width },
19556
+ children: [
19557
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.header, children: [
19558
+ /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles.title, children: title2 }),
19559
+ /* @__PURE__ */ jsxRuntime.jsx(
19560
+ "button",
19561
+ {
19562
+ className: styles.closeButton,
19563
+ onClick: onClose,
19564
+ "aria-label": "Close drawer",
19565
+ type: "button",
19566
+ children: /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", children: /* @__PURE__ */ jsxRuntime.jsx(
19567
+ "path",
19568
+ {
19569
+ d: "M12 4L4 12M4 4l8 8",
19570
+ stroke: "currentColor",
19571
+ strokeWidth: "1.5",
19572
+ strokeLinecap: "round"
19573
+ }
19574
+ ) })
19575
+ }
19576
+ )
19577
+ ] }),
19578
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.body, children: [
19579
+ data && onGoToTask && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.goToTaskBar, children: [
19580
+ data.type === "task" && /* @__PURE__ */ jsxRuntime.jsxs(
19570
19581
  "button",
19571
19582
  {
19572
- className: styles.closeButton,
19573
- onClick: onClose,
19574
- "aria-label": "Close drawer",
19583
+ className: styles.goToTaskButton,
19584
+ onClick: () => onGoToTask(data.task.id),
19575
19585
  type: "button",
19576
- children: /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", children: /* @__PURE__ */ jsxRuntime.jsx(
19577
- "path",
19578
- {
19579
- d: "M12 4L4 12M4 4l8 8",
19580
- stroke: "currentColor",
19581
- strokeWidth: "1.5",
19582
- strokeLinecap: "round"
19583
- }
19584
- ) })
19586
+ children: [
19587
+ /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", children: /* @__PURE__ */ jsxRuntime.jsx(
19588
+ "path",
19589
+ {
19590
+ d: "M2 7h10M8 3l4 4-4 4",
19591
+ stroke: "currentColor",
19592
+ strokeWidth: "1.5",
19593
+ strokeLinecap: "round",
19594
+ strokeLinejoin: "round"
19595
+ }
19596
+ ) }),
19597
+ "Go to Task"
19598
+ ]
19585
19599
  }
19586
- )
19587
- ] }),
19588
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.body, children: [
19589
- data && onGoToTask && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.goToTaskBar, children: [
19590
- data.type === "task" && /* @__PURE__ */ jsxRuntime.jsxs(
19600
+ ),
19601
+ data.type === "arrow" && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
19602
+ /* @__PURE__ */ jsxRuntime.jsxs(
19591
19603
  "button",
19592
19604
  {
19593
19605
  className: styles.goToTaskButton,
19594
- onClick: () => onGoToTask(data.task.id),
19606
+ onClick: () => onGoToTask(data.taskFrom.id),
19595
19607
  type: "button",
19596
19608
  children: [
19597
19609
  /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", children: /* @__PURE__ */ jsxRuntime.jsx(
@@ -19604,63 +19616,40 @@
19604
19616
  strokeLinejoin: "round"
19605
19617
  }
19606
19618
  ) }),
19607
- "Go to Task"
19619
+ "Go to ",
19620
+ data.taskFrom.name
19608
19621
  ]
19609
19622
  }
19610
19623
  ),
19611
- data.type === "arrow" && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
19612
- /* @__PURE__ */ jsxRuntime.jsxs(
19613
- "button",
19614
- {
19615
- className: styles.goToTaskButton,
19616
- onClick: () => onGoToTask(data.taskFrom.id),
19617
- type: "button",
19618
- children: [
19619
- /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", children: /* @__PURE__ */ jsxRuntime.jsx(
19620
- "path",
19621
- {
19622
- d: "M2 7h10M8 3l4 4-4 4",
19623
- stroke: "currentColor",
19624
- strokeWidth: "1.5",
19625
- strokeLinecap: "round",
19626
- strokeLinejoin: "round"
19627
- }
19628
- ) }),
19629
- "Go to ",
19630
- data.taskFrom.name
19631
- ]
19632
- }
19633
- ),
19634
- /* @__PURE__ */ jsxRuntime.jsxs(
19635
- "button",
19636
- {
19637
- className: styles.goToTaskButton,
19638
- onClick: () => onGoToTask(data.taskTo.id),
19639
- type: "button",
19640
- children: [
19641
- /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", children: /* @__PURE__ */ jsxRuntime.jsx(
19642
- "path",
19643
- {
19644
- d: "M2 7h10M8 3l4 4-4 4",
19645
- stroke: "currentColor",
19646
- strokeWidth: "1.5",
19647
- strokeLinecap: "round",
19648
- strokeLinejoin: "round"
19649
- }
19650
- ) }),
19651
- "Go to ",
19652
- data.taskTo.name
19653
- ]
19654
- }
19655
- )
19656
- ] })
19657
- ] }),
19658
- data && renderContent ? renderContent(data) : null
19659
- ] })
19660
- ]
19661
- }
19662
- )
19663
- ] });
19624
+ /* @__PURE__ */ jsxRuntime.jsxs(
19625
+ "button",
19626
+ {
19627
+ className: styles.goToTaskButton,
19628
+ onClick: () => onGoToTask(data.taskTo.id),
19629
+ type: "button",
19630
+ children: [
19631
+ /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", children: /* @__PURE__ */ jsxRuntime.jsx(
19632
+ "path",
19633
+ {
19634
+ d: "M2 7h10M8 3l4 4-4 4",
19635
+ stroke: "currentColor",
19636
+ strokeWidth: "1.5",
19637
+ strokeLinecap: "round",
19638
+ strokeLinejoin: "round"
19639
+ }
19640
+ ) }),
19641
+ "Go to ",
19642
+ data.taskTo.name
19643
+ ]
19644
+ }
19645
+ )
19646
+ ] })
19647
+ ] }),
19648
+ data && renderContent ? renderContent(data) : null
19649
+ ] })
19650
+ ]
19651
+ }
19652
+ ) });
19664
19653
  };
19665
19654
  const GanttDrawer = React.memo(GanttDrawerInner);
19666
19655
  const Gantt = (props) => {
@@ -19689,6 +19678,8 @@
19689
19678
  onSelectTaskIds,
19690
19679
  // Invoked when user right-clicks a row in the task list
19691
19680
  onRowContextMenu,
19681
+ onClickTaskRow,
19682
+ onDoubleClickTaskRow,
19692
19683
  onWheel,
19693
19684
  roundEndDate: clientRoundEndDate = defaultRoundEndDate,
19694
19685
  roundStartDate: clientRoundStartDate = defaultRoundStartDate,
@@ -19709,7 +19700,6 @@
19709
19700
  showProgress = true,
19710
19701
  progressColor,
19711
19702
  scrollToTaskId,
19712
- initialSelectedTaskId,
19713
19703
  drawer: drawerProps
19714
19704
  } = props;
19715
19705
  const ganttSVGRef = React.useRef(null);
@@ -20025,14 +20015,6 @@
20025
20015
  [mapTaskToCoordinates, setScrollXProgrammatically]
20026
20016
  );
20027
20017
  const prevScrollToTaskIdRef = React.useRef(void 0);
20028
- const prevInitialSelectedTaskIdRef = React.useRef(void 0);
20029
- React.useEffect(() => {
20030
- if (!initialSelectedTaskId || initialSelectedTaskId === prevInitialSelectedTaskIdRef.current) {
20031
- return;
20032
- }
20033
- prevInitialSelectedTaskIdRef.current = initialSelectedTaskId;
20034
- selectTask(initialSelectedTaskId);
20035
- }, [initialSelectedTaskId, selectTask]);
20036
20018
  React.useEffect(() => {
20037
20019
  if (!scrollToTaskId || scrollToTaskId === prevScrollToTaskIdRef.current) {
20038
20020
  return;
@@ -20869,28 +20851,26 @@
20869
20851
  },
20870
20852
  [enableDrawer, taskBar]
20871
20853
  );
20872
- const handleTaskListRowClick = React.useCallback(
20854
+ const handleTaskRowClick = React.useCallback(
20873
20855
  (task) => {
20874
- if (taskList.onClickRow) {
20875
- taskList.onClickRow(task);
20856
+ if (onClickTaskRow) {
20857
+ onClickTaskRow(task);
20876
20858
  }
20877
20859
  },
20878
- [taskList]
20860
+ [onClickTaskRow]
20879
20861
  );
20880
- const handleTaskListRowDoubleClick = React.useCallback(
20862
+ const handleTaskRowDoubleClick = React.useCallback(
20881
20863
  (task) => {
20882
- if (task.type !== "empty") {
20883
- if (enableDrawer) {
20884
- setActiveArrowKey(null);
20885
- setActiveTaskId(task.id);
20886
- setDrawerData({ type: "task", task });
20887
- }
20864
+ if (enableDrawer && task.type !== "empty") {
20865
+ setActiveArrowKey(null);
20866
+ setActiveTaskId(task.id);
20867
+ setDrawerData({ type: "task", task });
20888
20868
  }
20889
- if (taskList.onDoubleClickRow) {
20890
- taskList.onDoubleClickRow(task);
20869
+ if (onDoubleClickTaskRow) {
20870
+ onDoubleClickTaskRow(task);
20891
20871
  }
20892
20872
  },
20893
- [enableDrawer, taskList]
20873
+ [enableDrawer, onDoubleClickTaskRow]
20894
20874
  );
20895
20875
  const handleDrawerClose = React.useCallback(() => {
20896
20876
  setDrawerData(null);
@@ -21236,12 +21216,11 @@
21236
21216
  handleMoveTasksInside,
21237
21217
  handleOpenContextMenu: handleOpenContextMenuForRow,
21238
21218
  mapTaskToNestedIndex,
21239
- onClick: handleTaskListRowClick,
21240
- onDoubleClick: handleTaskListRowDoubleClick,
21219
+ onClick: handleTaskRowClick,
21220
+ onDoubleClick: handleTaskRowDoubleClick,
21241
21221
  onExpanderClick,
21242
21222
  scrollToBottomStep,
21243
21223
  scrollToTopStep,
21244
- selectTask,
21245
21224
  selectTaskOnMouseDown,
21246
21225
  selectedIdsMirror,
21247
21226
  scrollToTask,
@@ -21268,14 +21247,13 @@
21268
21247
  handleMoveTaskBefore,
21269
21248
  handleMoveTasksInside,
21270
21249
  handleOpenContextMenuForRow,
21271
- handleTaskListRowClick,
21272
- handleTaskListRowDoubleClick,
21250
+ handleTaskRowClick,
21251
+ handleTaskRowDoubleClick,
21273
21252
  mapTaskToNestedIndex,
21274
21253
  onExpanderClick,
21275
21254
  scrollToBottomStep,
21276
21255
  scrollToTask,
21277
21256
  scrollToTopStep,
21278
- selectTask,
21279
21257
  selectTaskOnMouseDown,
21280
21258
  selectedIdsMirror,
21281
21259
  taskList,
package/dist/style.css CHANGED
@@ -845,16 +845,11 @@
845
845
  ._loaderHidden_covn4_49 {
846
846
  display: none;
847
847
  }
848
- ._overlay_hyem8_1 {
849
- position: absolute;
850
- top: 0;
851
- left: 0;
852
- right: 0;
853
- bottom: 0;
854
- z-index: 998;
848
+ ._overlay_1fu4j_1 {
849
+ display: none;
855
850
  }
856
851
 
857
- ._drawer_hyem8_19 {
852
+ ._drawer_1fu4j_9 {
858
853
  position: absolute;
859
854
  top: 0;
860
855
  right: 0;
@@ -868,13 +863,14 @@
868
863
  overflow: hidden;
869
864
  transform: translateX(100%);
870
865
  transition: transform 0.25s ease;
866
+ pointer-events: auto;
871
867
  }
872
868
 
873
- ._drawer_open_hyem8_51 {
869
+ ._drawer_open_1fu4j_43 {
874
870
  transform: translateX(0);
875
871
  }
876
872
 
877
- ._header_hyem8_59 {
873
+ ._header_1fu4j_51 {
878
874
  display: flex;
879
875
  align-items: center;
880
876
  justify-content: space-between;
@@ -883,7 +879,7 @@
883
879
  flex-shrink: 0;
884
880
  }
885
881
 
886
- ._title_hyem8_77 {
882
+ ._title_1fu4j_69 {
887
883
  font-weight: 600;
888
884
  font-size: 14px;
889
885
  color: var(--gantt-drawer-title-color, #333);
@@ -893,7 +889,7 @@
893
889
  white-space: nowrap;
894
890
  }
895
891
 
896
- ._closeButton_hyem8_97 {
892
+ ._closeButton_1fu4j_89 {
897
893
  background: none;
898
894
  border: none;
899
895
  cursor: pointer;
@@ -906,25 +902,25 @@
906
902
  transition: background 0.15s ease;
907
903
  }
908
904
 
909
- ._closeButton_hyem8_97:hover {
905
+ ._closeButton_1fu4j_89:hover {
910
906
  background: var(--gantt-drawer-close-hover-bg, #f0f0f0);
911
907
  }
912
908
 
913
- ._body_hyem8_131 {
909
+ ._body_1fu4j_123 {
914
910
  flex: 1;
915
911
  overflow-y: auto;
916
912
  overflow-x: hidden;
917
913
  padding: 16px;
918
914
  }
919
915
 
920
- ._goToTaskBar_hyem8_145 {
916
+ ._goToTaskBar_1fu4j_137 {
921
917
  display: flex;
922
918
  flex-wrap: wrap;
923
919
  gap: 8px;
924
920
  margin-bottom: 12px;
925
921
  }
926
922
 
927
- ._goToTaskButton_hyem8_159 {
923
+ ._goToTaskButton_1fu4j_151 {
928
924
  display: inline-flex;
929
925
  align-items: center;
930
926
  gap: 6px;
@@ -943,6 +939,6 @@
943
939
  transition: background 0.15s ease;
944
940
  }
945
941
 
946
- ._goToTaskButton_hyem8_159:hover {
942
+ ._goToTaskButton_1fu4j_151:hover {
947
943
  background: var(--gantt-drawer-go-to-hover-bg, #bbdefb);
948
944
  }
@@ -187,7 +187,6 @@ export type TaskListTableRowProps = {
187
187
  onDoubleClick?: (task: RenderTask) => void;
188
188
  onExpanderClick: (task: Task) => void;
189
189
  scrollToTask: (task: Task) => void;
190
- selectTask: (taskId: string) => void;
191
190
  selectTaskOnMouseDown: (taskId: string, event: MouseEvent) => void;
192
191
  style?: CSSProperties;
193
192
  task: RenderTask;
@@ -184,16 +184,6 @@ export interface GanttTaskListProps {
184
184
  * Render bottom table content
185
185
  */
186
186
  tableBottom?: TableRenderBottomProps;
187
- /**
188
- * Invokes on single click on a task list row.
189
- * Receives the full task data of the clicked row.
190
- */
191
- onClickRow?: (task: RenderTask) => void;
192
- /**
193
- * Invokes on double-click on a task list row.
194
- * Receives the full task data of the double-clicked row.
195
- */
196
- onDoubleClickRow?: (task: RenderTask) => void;
197
187
  }
198
188
  export interface TableRenderBottomProps {
199
189
  height?: number;
@@ -419,10 +409,13 @@ export interface GanttProps {
419
409
  */
420
410
  scrollToTaskId?: TaskId;
421
411
  /**
422
- * When set (or changed), the gantt will select this task's row without scrolling.
423
- * Useful for restoring selection from external state (e.g. localStorage) on load.
412
+ * Invokes on single click on a task list row. Receives the task data.
413
+ */
414
+ onClickTaskRow?: (task: RenderTask) => void;
415
+ /**
416
+ * Invokes on double click on a task list row. Receives the task data.
424
417
  */
425
- initialSelectedTaskId?: TaskId;
418
+ onDoubleClickTaskRow?: (task: RenderTask) => void;
426
419
  /**
427
420
  * Drawer panel options for task/arrow click
428
421
  */
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "gantt-task-react-v",
3
- "version": "1.5.16",
3
+ "version": "1.5.17",
4
4
  "description": "Interactive Gantt Chart for React with TypeScript.",
5
5
  "author": "aguilanbon",
6
6
  "homepage": "https://github.com/aguilanbon/gantt-task-react-v",