gantt-task-react-v 1.4.6 → 1.4.8

package/dist/gantt-task-react.es.js

@@ -4817,7 +4817,7 @@ const TitleColumn = ({
     () => getExpanderSymbol(hasChildren, isClosed, expandIconWidth, icons),
     [hasChildren, isClosed, expandIconWidth, icons]
   );
-  const title = isShowTaskNumbers ? `${indexStr} ${name}` : name;
+  const title2 = isShowTaskNumbers ? `${indexStr} ${name}` : name;
   const onClick = useCallback(() => {
     if (task.type !== "empty") {
       onExpanderClick(task);
@@ -4831,7 +4831,7 @@ const TitleColumn = ({
       style: {
         paddingLeft: depth * nestedTaskNameOffset
       },
-      title,
+      title: title2,
       children: [
         /* @__PURE__ */ jsx(
           "div",
@@ -5019,45 +5019,45 @@ const AddColumn = ({
 };
 function useTaskListColumnsBuilder() {
   const createNameColumn = useCallback(
-    (title, width) => {
+    (title2, width) => {
       return {
         id: "TitleColumn",
         component: TitleColumn,
         width: width || 120,
-        title
+        title: title2
       };
     },
     []
   );
   const createStartDateColumn = useCallback(
-    (title, width) => {
+    (title2, width) => {
       return {
         id: "DateStartColumn",
         component: DateStartColumn,
         width: width || 60,
-        title
+        title: title2
       };
     },
     []
   );
   const createEndDateColumn = useCallback(
-    (title, width) => {
+    (title2, width) => {
       return {
         id: "DateEndColumn",
         component: DateEndColumn,
         width: width || 60,
-        title
+        title: title2
       };
     },
     []
   );
   const createDependenciesColumn = useCallback(
-    (title, width) => {
+    (title2, width) => {
       return {
         id: "DependenciesColumn",
         component: DependenciesColumn,
         width: width || 90,
-        title
+        title: title2
       };
     },
     []
@@ -5584,9 +5584,9 @@ const TaskListTableHeadersDefaultInner = ({
           },
           children: [
             canMoveTasks && /* @__PURE__ */ jsx("div", { className: styles$i.ganttTable_HeaderMoveTask }),
-            columns.map(({ title, width, canResize }, index2) => {
+            columns.map(({ title: title2, width, canResize }, index2) => {
               return /* @__PURE__ */ jsxs(Fragment$1, { children: [
-                index2 > 0 && !!title && /* @__PURE__ */ jsx(
+                index2 > 0 && !!title2 && /* @__PURE__ */ jsx(
                   "div",
                   {
                     className: styles$i.ganttTable_HeaderSeparator,
@@ -5599,7 +5599,7 @@ const TaskListTableHeadersDefaultInner = ({
                 /* @__PURE__ */ jsxs(
                   "div",
                   {
-                    "data-testid": `table-column-header-${title}`,
+                    "data-testid": `table-column-header-${title2}`,
                     className: styles$i.ganttTable_HeaderItem,
                     style: {
                       minWidth: width,
@@ -5607,11 +5607,11 @@ const TaskListTableHeadersDefaultInner = ({
                       ...pinnedStyles[index2]
                     },
                     children: [
-                      title,
-                      canResizeColumns && canResize !== false && !!title && /* @__PURE__ */ jsx(
+                      title2,
+                      canResizeColumns && canResize !== false && !!title2 && /* @__PURE__ */ jsx(
                         "div",
                         {
-                          "data-testid": `table-column-header-resize-handle-${title}`,
+                          "data-testid": `table-column-header-resize-handle-${title2}`,
                           className: styles$i.resizer,
                           onMouseDown: (event) => {
                             onColumnResizeStart(index2, event.clientX);
@@ -11727,12 +11727,14 @@ const generateTrianglePoints = (x, y, width, isLeftDirected) => {
     ${x - width},${y - width} 
     ${x - width},${y + width}`;
 };
-const arrow_clickable = "_arrow_clickable_13ifc_1";
-const mainPath = "_mainPath_13ifc_9";
-const clickZone = "_clickZone_13ifc_33";
+const arrow_clickable = "_arrow_clickable_3u3q2_1";
+const mainPath = "_mainPath_3u3q2_11";
+const arrow_active = "_arrow_active_3u3q2_37";
+const clickZone = "_clickZone_3u3q2_81";
 const styles$b = {
   arrow_clickable,
   mainPath,
+  arrow_active,
   clickZone
 };
 const ArrowInner = (props) => {
@@ -11754,6 +11756,7 @@ const ArrowInner = (props) => {
     rtl,
     onArrowDoubleClick = void 0,
     onArrowClick = void 0,
+    isActive = false,
     fromConnectionIndex = 0,
     fromTotalConnections = 1,
     toConnectionIndex = 0,
@@ -11824,29 +11827,20 @@ const ArrowInner = (props) => {
     }
     return "var(--gantt-arrow-color)";
   }, [isCritical]);
-  return /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx("g", { fill: color, stroke: color, children: /* @__PURE__ */ jsxs(
     "g",
     {
-      fill: color,
-      stroke: color,
-      "data-arrow-from": taskFrom.id,
-      "data-arrow-to": taskTo.id,
-      children: /* @__PURE__ */ jsxs(
-        "g",
-        {
-          "data-testid": `task-arrow-${targetFrom}-${taskFrom.name}-${targetTo}-${taskTo.name}`,
-          className: `arrow ${styles$b.arrow_clickable}`,
-          onDoubleClick,
-          onClick: handleClick,
-          children: [
-            onArrowDoubleClick && /* @__PURE__ */ jsx("path", { d: path, className: styles$b.clickZone }),
-            /* @__PURE__ */ jsx("path", { className: styles$b.mainPath, d: path }),
-            /* @__PURE__ */ jsx("polygon", { className: "polygon", points: trianglePoints })
-          ]
-        }
-      )
+      "data-testid": `task-arrow-${targetFrom}-${taskFrom.name}-${targetTo}-${taskTo.name}`,
+      className: `arrow ${styles$b.arrow_clickable}${isActive ? ` ${styles$b.arrow_active}` : ""}`,
+      onDoubleClick,
+      onClick: handleClick,
+      children: [
+        (onArrowDoubleClick || onArrowClick) && /* @__PURE__ */ jsx("path", { d: path, className: styles$b.clickZone }),
+        /* @__PURE__ */ jsx("path", { className: styles$b.mainPath, d: path }),
+        /* @__PURE__ */ jsx("polygon", { className: "polygon", points: trianglePoints })
+      ]
     }
-  );
+  ) });
 };
 const Arrow = memo(ArrowInner);
 const roundedPath = (points, radius) => {
@@ -13165,6 +13159,9 @@ const TaskGanttContentInner = (props) => {
     onTaskBarDragStart,
     mapGlobalRowIndexToTask,
     onArrowDoubleClick,
+    onArrowClick,
+    activeArrowKey,
+    activeTaskId,
     onDoubleClick,
     onClick,
     renderedRowIndexes,
@@ -13186,9 +13183,7 @@ const TaskGanttContentInner = (props) => {
     waitCommitTasks,
     viewMode,
     showProgress = true,
-    progressColor,
-    onArrowClick,
-    selectedArrow
+    progressColor
   } = props;
   const renderedHolidays = useMemo(() => {
     const { columnWidth } = distances;
@@ -13471,6 +13466,7 @@ const TaskGanttContentInner = (props) => {
                       rtl,
                       onArrowDoubleClick,
                       onArrowClick,
+                      isActive: activeArrowKey === `${source.id}|${taskId}` || activeTaskId === source.id || activeTaskId === taskId,
                       fromConnectionIndex: getConnectionIndex(
                         `${source.id}|${sourceTarget}|out`
                       ),
@@ -13556,6 +13552,7 @@ const TaskGanttContentInner = (props) => {
                       rtl,
                       onArrowDoubleClick,
                       onArrowClick,
+                      isActive: activeArrowKey === `${taskId}|${dependent.id}` || activeTaskId === taskId || activeTaskId === dependent.id,
                       fromConnectionIndex: getConnectionIndex(
                         `${taskId}|${ownTarget}|out`
                       ),
@@ -13654,6 +13651,7 @@ const TaskGanttContentInner = (props) => {
                       rtl,
                       onArrowDoubleClick,
                       onArrowClick,
+                      isActive: activeArrowKey === `${source.id}|${taskId}` || activeTaskId === source.id || activeTaskId === taskId,
                       fromConnectionIndex: getConnectionIndex(
                         `${source.id}|${sourceTarget}|out`
                       ),
@@ -13712,80 +13710,12 @@ const TaskGanttContentInner = (props) => {
     visibleTasksMirror,
     onArrowDoubleClick,
     onArrowClick,
+    activeArrowKey,
+    activeTaskId,
     showProgress,
     progressColor
   ]);
-  const contentRef = useRef(null);
-  useEffect(() => {
-    const contentEl = contentRef.current;
-    if (!contentEl)
-      return void 0;
-    const svgRoot = contentEl.ownerSVGElement;
-    if (!svgRoot)
-      return void 0;
-    let currentHighlightedTask = null;
-    const highlightArrows = (taskId) => {
-      if (currentHighlightedTask === taskId)
-        return;
-      clearHighlights();
-      currentHighlightedTask = taskId;
-      const arrows = svgRoot.querySelectorAll(
-        `[data-arrow-from="${taskId}"], [data-arrow-to="${taskId}"]`
-      );
-      arrows.forEach((el) => el.classList.add("gantt-arrow-highlighted"));
-    };
-    const clearHighlights = () => {
-      if (!currentHighlightedTask)
-        return;
-      svgRoot.querySelectorAll(".gantt-arrow-highlighted").forEach((el) => el.classList.remove("gantt-arrow-highlighted"));
-      currentHighlightedTask = null;
-    };
-    const onMouseOver = (e) => {
-      const target = e.target;
-      const taskWrapper = target.closest(".TaskItemWrapper");
-      if (taskWrapper && taskWrapper.id) {
-        highlightArrows(taskWrapper.id);
-      }
-    };
-    const onMouseOut = (e) => {
-      const target = e.target;
-      const taskWrapper = target.closest(".TaskItemWrapper");
-      if (taskWrapper) {
-        const relatedTarget = e.relatedTarget;
-        if (!relatedTarget || !taskWrapper.contains(relatedTarget)) {
-          clearHighlights();
-        }
-      }
-    };
-    contentEl.addEventListener("mouseover", onMouseOver);
-    contentEl.addEventListener("mouseout", onMouseOut);
-    return () => {
-      contentEl.removeEventListener("mouseover", onMouseOver);
-      contentEl.removeEventListener("mouseout", onMouseOut);
-    };
-  }, []);
-  useLayoutEffect(() => {
-    const contentEl = contentRef.current;
-    if (!contentEl)
-      return;
-    const svgRoot = contentEl.ownerSVGElement;
-    if (!svgRoot)
-      return;
-    svgRoot.querySelectorAll(".gantt-arrow-selected").forEach((el) => el.classList.remove("gantt-arrow-selected"));
-    if (!selectedArrow)
-      return;
-    if (selectedArrow.taskId) {
-      svgRoot.querySelectorAll(
-        `[data-arrow-from="${selectedArrow.taskId}"], [data-arrow-to="${selectedArrow.taskId}"]`
-      ).forEach((el) => el.classList.add("gantt-arrow-selected"));
-    }
-    if (selectedArrow.fromId && selectedArrow.toId) {
-      svgRoot.querySelectorAll(
-        `[data-arrow-from="${selectedArrow.fromId}"][data-arrow-to="${selectedArrow.toId}"]`
-      ).forEach((el) => el.classList.add("gantt-arrow-selected"));
-    }
-  }, [selectedArrow, renderedArrows]);
-  return /* @__PURE__ */ jsxs("g", { className: "content", ref: contentRef, children: [
+  return /* @__PURE__ */ jsxs("g", { className: "content", children: [
     renderedSelectedTasks,
     /* @__PURE__ */ jsx("g", { children: renderedHolidays }),
     /* @__PURE__ */ jsx(
@@ -16341,13 +16271,13 @@ function getWindowScrollBarX(element) {
 function getDocumentRect(element) {
   const html = getDocumentElement(element);
   const scroll2 = getNodeScroll(element);
-  const body = element.ownerDocument.body;
-  const width = max(html.scrollWidth, html.clientWidth, body.scrollWidth, body.clientWidth);
-  const height = max(html.scrollHeight, html.clientHeight, body.scrollHeight, body.clientHeight);
+  const body2 = element.ownerDocument.body;
+  const width = max(html.scrollWidth, html.clientWidth, body2.scrollWidth, body2.clientWidth);
+  const height = max(html.scrollHeight, html.clientHeight, body2.scrollHeight, body2.clientHeight);
   let x = -scroll2.scrollLeft + getWindowScrollBarX(element);
   const y = -scroll2.scrollTop;
-  if (getComputedStyle$1(body).direction === "rtl") {
-    x += max(html.clientWidth, body.clientWidth) - width;
+  if (getComputedStyle$1(body2).direction === "rtl") {
+    x += max(html.clientWidth, body2.clientWidth) - width;
   }
   return {
     width,
@@ -19402,110 +19332,154 @@ const GanttLoaderInner = ({ loading }) => {
   return /* @__PURE__ */ jsx("div", { className: `${styles$1.loader} ${loading ? "" : styles$1.loaderHidden}` });
 };
 const GanttLoader = memo(GanttLoaderInner);
-const drawerOverlay = "_drawerOverlay_3p2w6_1";
-const drawer = "_drawer_3p2w6_1";
-const slideIn = "_slideIn_3p2w6_1";
-const drawerHeader = "_drawerHeader_3p2w6_71";
-const closeButton = "_closeButton_3p2w6_89";
-const drawerContent = "_drawerContent_3p2w6_127";
-const defaultSection = "_defaultSection_3p2w6_139";
-const defaultField = "_defaultField_3p2w6_175";
-const defaultFieldLabel = "_defaultFieldLabel_3p2w6_191";
+const overlay = "_overlay_hyem8_1";
+const drawer = "_drawer_hyem8_19";
+const drawer_open = "_drawer_open_hyem8_51";
+const header = "_header_hyem8_59";
+const title = "_title_hyem8_77";
+const closeButton = "_closeButton_hyem8_97";
+const body = "_body_hyem8_131";
+const goToTaskBar = "_goToTaskBar_hyem8_145";
+const goToTaskButton = "_goToTaskButton_hyem8_159";
 const styles = {
-  drawerOverlay,
+  overlay,
   drawer,
-  slideIn,
-  drawerHeader,
+  drawer_open,
+  header,
+  title,
   closeButton,
-  drawerContent,
-  defaultSection,
-  defaultField,
-  defaultFieldLabel
+  body,
+  goToTaskBar,
+  goToTaskButton
 };
-const DefaultDrawerContent = ({
-  data
-}) => {
-  var _a, _b, _c, _d, _e, _f;
-  if (data.type === "task" && data.task) {
-    const { task } = data;
-    return /* @__PURE__ */ jsxs("div", { className: styles.defaultSection, children: [
-      /* @__PURE__ */ jsx("h3", { children: "Task Details" }),
-      /* @__PURE__ */ jsxs("div", { className: styles.defaultField, children: [
-        /* @__PURE__ */ jsx("span", { className: styles.defaultFieldLabel, children: "Name:" }),
-        /* @__PURE__ */ jsx("span", { children: task.name })
-      ] }),
-      /* @__PURE__ */ jsxs("div", { className: styles.defaultField, children: [
-        /* @__PURE__ */ jsx("span", { className: styles.defaultFieldLabel, children: "Start:" }),
-        /* @__PURE__ */ jsx("span", { children: (_a = task.start) == null ? void 0 : _a.toLocaleDateString() })
-      ] }),
-      /* @__PURE__ */ jsxs("div", { className: styles.defaultField, children: [
-        /* @__PURE__ */ jsx("span", { className: styles.defaultFieldLabel, children: "End:" }),
-        /* @__PURE__ */ jsx("span", { children: (_b = task.end) == null ? void 0 : _b.toLocaleDateString() })
-      ] }),
-      /* @__PURE__ */ jsxs("div", { className: styles.defaultField, children: [
-        /* @__PURE__ */ jsx("span", { className: styles.defaultFieldLabel, children: "Progress:" }),
-        /* @__PURE__ */ jsxs("span", { children: [
-          Math.round(task.progress || 0),
-          "%"
-        ] })
-      ] })
-    ] });
-  }
-  if (data.type === "connection" && data.taskFrom && data.taskTo) {
-    return /* @__PURE__ */ jsxs("div", { className: styles.defaultSection, children: [
-      /* @__PURE__ */ jsx("h3", { children: "Connection Details" }),
-      /* @__PURE__ */ jsx("h4", { children: "From" }),
-      /* @__PURE__ */ jsxs("div", { className: styles.defaultField, children: [
-        /* @__PURE__ */ jsx("span", { className: styles.defaultFieldLabel, children: "Name:" }),
-        /* @__PURE__ */ jsx("span", { children: data.taskFrom.name })
-      ] }),
-      /* @__PURE__ */ jsxs("div", { className: styles.defaultField, children: [
-        /* @__PURE__ */ jsx("span", { className: styles.defaultFieldLabel, children: "Start:" }),
-        /* @__PURE__ */ jsx("span", { children: (_c = data.taskFrom.start) == null ? void 0 : _c.toLocaleDateString() })
-      ] }),
-      /* @__PURE__ */ jsxs("div", { className: styles.defaultField, children: [
-        /* @__PURE__ */ jsx("span", { className: styles.defaultFieldLabel, children: "End:" }),
-        /* @__PURE__ */ jsx("span", { children: (_d = data.taskFrom.end) == null ? void 0 : _d.toLocaleDateString() })
-      ] }),
-      /* @__PURE__ */ jsx("h4", { children: "To" }),
-      /* @__PURE__ */ jsxs("div", { className: styles.defaultField, children: [
-        /* @__PURE__ */ jsx("span", { className: styles.defaultFieldLabel, children: "Name:" }),
-        /* @__PURE__ */ jsx("span", { children: data.taskTo.name })
-      ] }),
-      /* @__PURE__ */ jsxs("div", { className: styles.defaultField, children: [
-        /* @__PURE__ */ jsx("span", { className: styles.defaultFieldLabel, children: "Start:" }),
-        /* @__PURE__ */ jsx("span", { children: (_e = data.taskTo.start) == null ? void 0 : _e.toLocaleDateString() })
-      ] }),
-      /* @__PURE__ */ jsxs("div", { className: styles.defaultField, children: [
-        /* @__PURE__ */ jsx("span", { className: styles.defaultFieldLabel, children: "End:" }),
-        /* @__PURE__ */ jsx("span", { children: (_f = data.taskTo.end) == null ? void 0 : _f.toLocaleDateString() })
-      ] })
-    ] });
-  }
-  return null;
-};
-const GanttDrawer = ({
-  open,
-  width,
+const GanttDrawerInner = ({
   data,
+  width,
   onClose,
+  onGoToTask,
   renderContent
 }) => {
-  if (!open || !data)
-    return null;
-  return /* @__PURE__ */ jsx("div", { className: styles.drawerOverlay, children: /* @__PURE__ */ jsxs("div", { className: styles.drawer, style: { width }, children: [
-    /* @__PURE__ */ jsx("div", { className: styles.drawerHeader, children: /* @__PURE__ */ jsx(
-      "button",
+  const handleOverlayClick = useCallback(
+    (e) => {
+      e.stopPropagation();
+      onClose();
+    },
+    [onClose]
+  );
+  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}` : "";
+  const goToTaskIds = [];
+  if ((data == null ? void 0 : data.type) === "task") {
+    goToTaskIds.push(data.task.id);
+  } else if ((data == null ? void 0 : data.type) === "arrow") {
+    goToTaskIds.push(data.taskFrom.id, data.taskTo.id);
+  }
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    data && /* @__PURE__ */ jsx("div", { className: styles.overlay, onClick: handleOverlayClick }),
+    /* @__PURE__ */ jsxs(
+      "div",
       {
-        className: styles.closeButton,
-        onClick: onClose,
-        "aria-label": "Close drawer",
-        children: "×"
+        className: `${styles.drawer}${data ? ` ${styles.drawer_open}` : ""}`,
+        style: { width },
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: styles.header, children: [
+            /* @__PURE__ */ jsx("span", { className: styles.title, children: title2 }),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                className: styles.closeButton,
+                onClick: onClose,
+                "aria-label": "Close drawer",
+                type: "button",
+                children: /* @__PURE__ */ jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", children: /* @__PURE__ */ jsx(
+                  "path",
+                  {
+                    d: "M12 4L4 12M4 4l8 8",
+                    stroke: "currentColor",
+                    strokeWidth: "1.5",
+                    strokeLinecap: "round"
+                  }
+                ) })
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: styles.body, children: [
+            data && onGoToTask && /* @__PURE__ */ jsxs("div", { className: styles.goToTaskBar, children: [
+              data.type === "task" && /* @__PURE__ */ jsxs(
+                "button",
+                {
+                  className: styles.goToTaskButton,
+                  onClick: () => onGoToTask(data.task.id),
+                  type: "button",
+                  children: [
+                    /* @__PURE__ */ jsx("svg", { width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", children: /* @__PURE__ */ jsx(
+                      "path",
+                      {
+                        d: "M2 7h10M8 3l4 4-4 4",
+                        stroke: "currentColor",
+                        strokeWidth: "1.5",
+                        strokeLinecap: "round",
+                        strokeLinejoin: "round"
+                      }
+                    ) }),
+                    "Go to Task"
+                  ]
+                }
+              ),
+              data.type === "arrow" && /* @__PURE__ */ jsxs(Fragment, { children: [
+                /* @__PURE__ */ jsxs(
+                  "button",
+                  {
+                    className: styles.goToTaskButton,
+                    onClick: () => onGoToTask(data.taskFrom.id),
+                    type: "button",
+                    children: [
+                      /* @__PURE__ */ jsx("svg", { width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", children: /* @__PURE__ */ jsx(
+                        "path",
+                        {
+                          d: "M2 7h10M8 3l4 4-4 4",
+                          stroke: "currentColor",
+                          strokeWidth: "1.5",
+                          strokeLinecap: "round",
+                          strokeLinejoin: "round"
+                        }
+                      ) }),
+                      "Go to ",
+                      data.taskFrom.name
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ jsxs(
+                  "button",
+                  {
+                    className: styles.goToTaskButton,
+                    onClick: () => onGoToTask(data.taskTo.id),
+                    type: "button",
+                    children: [
+                      /* @__PURE__ */ jsx("svg", { width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", children: /* @__PURE__ */ jsx(
+                        "path",
+                        {
+                          d: "M2 7h10M8 3l4 4-4 4",
+                          stroke: "currentColor",
+                          strokeWidth: "1.5",
+                          strokeLinecap: "round",
+                          strokeLinejoin: "round"
+                        }
+                      ) }),
+                      "Go to ",
+                      data.taskTo.name
+                    ]
+                  }
+                )
+              ] })
+            ] }),
+            data && renderContent ? renderContent(data) : null
+          ] })
+        ]
       }
-    ) }),
-    /* @__PURE__ */ jsx("div", { className: styles.drawerContent, children: renderContent ? renderContent(data) : /* @__PURE__ */ jsx(DefaultDrawerContent, { data }) })
-  ] }) });
+    )
+  ] });
 };
+const GanttDrawer = memo(GanttDrawerInner);
 const Gantt = (props) => {
   var _a, _b;
   const {
@@ -19552,10 +19526,7 @@ const Gantt = (props) => {
     showProgress = true,
     progressColor,
     scrollToTaskId,
-    enableDrawer = false,
-    drawerWidth = 300,
-    renderDrawerContent,
-    onArrowClick: onArrowClickProp
+    drawer: drawerProps
   } = props;
   const ganttSVGRef = useRef(null);
   const wrapperRef = useRef(null);
@@ -19572,36 +19543,12 @@ const Gantt = (props) => {
     [theme, rowHeight]
   );
   const [waitCommitTasks, setWaitCommitTasks] = useState(false);
+  const enableDrawer = (drawerProps == null ? void 0 : drawerProps.enableDrawer) ?? false;
+  const drawerWidth = (drawerProps == null ? void 0 : drawerProps.drawerWidth) ?? 360;
+  const renderDrawerContent = drawerProps == null ? void 0 : drawerProps.renderDrawerContent;
   const [drawerData, setDrawerData] = useState(null);
-  const [selectedArrow, setSelectedArrow] = useState(null);
-  const handleDrawerClose = useCallback(() => {
-    setDrawerData(null);
-    setSelectedArrow(null);
-  }, []);
-  const handleBarClickForDrawer = useCallback(
-    (task, _event) => {
-      if (clientTaskBar == null ? void 0 : clientTaskBar.onClick) {
-        clientTaskBar.onClick(task);
-      }
-      if (enableDrawer) {
-        setDrawerData({ type: "task", task });
-        setSelectedArrow({ taskId: task.id });
-      }
-    },
-    [clientTaskBar == null ? void 0 : clientTaskBar.onClick, enableDrawer]
-  );
-  const handleArrowClickForDrawer = useCallback(
-    (taskFrom, taskTo) => {
-      if (onArrowClickProp) {
-        onArrowClickProp(taskFrom, taskTo);
-      }
-      if (enableDrawer) {
-        setDrawerData({ type: "connection", taskFrom, taskTo });
-        setSelectedArrow({ fromId: taskFrom.id, toId: taskTo.id });
-      }
-    },
-    [onArrowClickProp, enableDrawer]
-  );
+  const [activeArrowKey, setActiveArrowKey] = useState(null);
+  const [activeTaskId, setActiveTaskId] = useState(null);
   const taskBar = useMemo(() => {
     return mergeDeepObj(
       {},
@@ -20691,6 +20638,80 @@ const Gantt = (props) => {
     },
     [mapTaskToGlobalIndex, taskBar, handleCommitInternal, sortedTasks]
   );
+  const onArrowClick = useCallback(
+    (taskFrom, taskTo) => {
+      if (enableDrawer) {
+        setActiveArrowKey(`${taskFrom.id}|${taskTo.id}`);
+        setActiveTaskId(null);
+        setDrawerData({ type: "arrow", taskFrom, taskTo });
+      }
+      if (taskBar.onArrowClick) {
+        taskBar.onArrowClick(taskFrom, taskTo);
+      }
+    },
+    [enableDrawer, taskBar]
+  );
+  const handleTaskClick = useCallback(
+    (task, _event) => {
+      if (enableDrawer) {
+        setActiveArrowKey(null);
+        setActiveTaskId(task.id);
+        setDrawerData({ type: "task", task });
+      }
+      if (taskBar.onClick) {
+        taskBar.onClick(task);
+      }
+    },
+    [enableDrawer, taskBar]
+  );
+  const handleDrawerClose = useCallback(() => {
+    setDrawerData(null);
+    setActiveArrowKey(null);
+    setActiveTaskId(null);
+  }, []);
+  const handleGoToTask = useCallback(
+    (taskId) => {
+      for (const [comparisonLevel, levelMap] of tasksMap) {
+        const task = levelMap.get(taskId);
+        if (!task || task.type === "empty")
+          continue;
+        const { x1 } = getTaskCoordinates(task, mapTaskToCoordinates);
+        setScrollXProgrammatically(Math.max(0, x1 - 100));
+        const rowIndexMap = taskToRowIndexMap.get(comparisonLevel);
+        if (rowIndexMap) {
+          const rowIndex = rowIndexMap.get(taskId);
+          if (typeof rowIndex === "number") {
+            const targetScrollY = rowIndex * fullRowHeight - ganttHeight / 2 + fullRowHeight / 2;
+            setScrollYProgrammatically(
+              Math.max(
+                0,
+                Math.min(targetScrollY, ganttFullHeight - ganttHeight)
+              )
+            );
+          }
+        }
+        selectTask(taskId);
+        if (onSelectTaskIds) {
+          onSelectTaskIds([taskId]);
+        }
+        break;
+      }
+      handleDrawerClose();
+    },
+    [
+      tasksMap,
+      mapTaskToCoordinates,
+      taskToRowIndexMap,
+      fullRowHeight,
+      ganttHeight,
+      ganttFullHeight,
+      setScrollXProgrammatically,
+      setScrollYProgrammatically,
+      selectTask,
+      onSelectTaskIds,
+      handleDrawerClose
+    ]
+  );
   const handleAction = useHandleAction({
     checkTaskIdExists,
     childTasksMap,
@@ -20877,6 +20898,7 @@ const Gantt = (props) => {
   const renderTaskBarProps = useMemo(
     () => ({
       ...taskBar,
+      onClick: enableDrawer ? handleTaskClick : taskBar.onClick,
       taskBarMovingAction: (task) => {
         var _a2;
         return task.id === ((_a2 = changeInProgress == null ? void 0 : changeInProgress.changedTask) == null ? void 0 : _a2.id) ? changeInProgress.action : null;
@@ -20903,6 +20925,9 @@ const Gantt = (props) => {
       onTooltipTask: onChangeTooltipTask,
       mapGlobalRowIndexToTask,
       onArrowDoubleClick,
+      onArrowClick: enableDrawer ? onArrowClick : taskBar.onArrowClick,
+      activeArrowKey,
+      activeTaskId,
       renderedRowIndexes,
       rtl,
       selectTaskOnMouseDown,
@@ -20914,10 +20939,7 @@ const Gantt = (props) => {
       visibleTasksMirror,
       viewMode,
       showProgress,
-      progressColor,
-      onArrowClick: enableDrawer ? handleArrowClickForDrawer : void 0,
-      onClick: enableDrawer ? handleBarClickForDrawer : taskBar.onClick,
-      selectedArrow
+      progressColor
     }),
     [
       viewMode,
@@ -20943,6 +20965,11 @@ const Gantt = (props) => {
       onChangeTooltipTask,
       mapGlobalRowIndexToTask,
       onArrowDoubleClick,
+      onArrowClick,
+      activeArrowKey,
+      activeTaskId,
+      enableDrawer,
+      handleTaskClick,
       renderedRowIndexes,
       rtl,
       selectTaskOnMouseDown,
@@ -20956,11 +20983,7 @@ const Gantt = (props) => {
       changeInProgress == null ? void 0 : changeInProgress.action,
       handleDeleteTasks,
       showProgress,
-      progressColor,
-      enableDrawer,
-      handleArrowClickForDrawer,
-      handleBarClickForDrawer,
-      selectedArrow
+      progressColor
     ]
   );
   const renderTaskListProps = useMemo(
@@ -21117,10 +21140,10 @@ const Gantt = (props) => {
         enableDrawer && /* @__PURE__ */ jsx(
           GanttDrawer,
           {
-            open: drawerData !== null,
-            width: drawerWidth,
             data: drawerData,
+            width: drawerWidth,
             onClose: handleDrawerClose,
+            onGoToTask: handleGoToTask,
             renderContent: renderDrawerContent
           }
         )