gantt-task-react-v 1.4.6 → 1.4.7

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

@@ -4834,7 +4834,7 @@
       () => getExpanderSymbol(hasChildren, isClosed, expandIconWidth, icons),
       [hasChildren, isClosed, expandIconWidth, icons]
     );
-    const title = isShowTaskNumbers ? `${indexStr} ${name}` : name;
+    const title2 = isShowTaskNumbers ? `${indexStr} ${name}` : name;
     const onClick = React.useCallback(() => {
       if (task.type !== "empty") {
         onExpanderClick(task);
@@ -4848,7 +4848,7 @@
         style: {
           paddingLeft: depth * nestedTaskNameOffset
         },
-        title,
+        title: title2,
         children: [
           /* @__PURE__ */ jsxRuntime.jsx(
             "div",
@@ -5036,45 +5036,45 @@
   };
   function useTaskListColumnsBuilder() {
     const createNameColumn = React.useCallback(
-      (title, width) => {
+      (title2, width) => {
         return {
           id: "TitleColumn",
           component: TitleColumn,
           width: width || 120,
-          title
+          title: title2
         };
       },
       []
     );
     const createStartDateColumn = React.useCallback(
-      (title, width) => {
+      (title2, width) => {
         return {
           id: "DateStartColumn",
           component: DateStartColumn,
           width: width || 60,
-          title
+          title: title2
         };
       },
       []
     );
     const createEndDateColumn = React.useCallback(
-      (title, width) => {
+      (title2, width) => {
         return {
           id: "DateEndColumn",
           component: DateEndColumn,
           width: width || 60,
-          title
+          title: title2
         };
       },
       []
     );
     const createDependenciesColumn = React.useCallback(
-      (title, width) => {
+      (title2, width) => {
         return {
           id: "DependenciesColumn",
           component: DependenciesColumn,
           width: width || 90,
-          title
+          title: title2
         };
       },
       []
@@ -5601,9 +5601,9 @@
             },
             children: [
               canMoveTasks && /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles$i.ganttTable_HeaderMoveTask }),
-              columns.map(({ title, width, canResize }, index2) => {
+              columns.map(({ title: title2, width, canResize }, index2) => {
                 return /* @__PURE__ */ jsxRuntime.jsxs(React.Fragment, { children: [
-                  index2 > 0 && !!title && /* @__PURE__ */ jsxRuntime.jsx(
+                  index2 > 0 && !!title2 && /* @__PURE__ */ jsxRuntime.jsx(
                     "div",
                     {
                       className: styles$i.ganttTable_HeaderSeparator,
@@ -5616,7 +5616,7 @@
                   /* @__PURE__ */ jsxRuntime.jsxs(
                     "div",
                     {
-                      "data-testid": `table-column-header-${title}`,
+                      "data-testid": `table-column-header-${title2}`,
                       className: styles$i.ganttTable_HeaderItem,
                       style: {
                         minWidth: width,
@@ -5624,11 +5624,11 @@
                         ...pinnedStyles[index2]
                       },
                       children: [
-                        title,
-                        canResizeColumns && canResize !== false && !!title && /* @__PURE__ */ jsxRuntime.jsx(
+                        title2,
+                        canResizeColumns && canResize !== false && !!title2 && /* @__PURE__ */ jsxRuntime.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);
@@ -11744,12 +11744,14 @@
     ${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) => {
@@ -11771,6 +11773,7 @@
       rtl,
       onArrowDoubleClick = void 0,
       onArrowClick = void 0,
+      isActive = false,
       fromConnectionIndex = 0,
       fromTotalConnections = 1,
       toConnectionIndex = 0,
@@ -11841,29 +11844,20 @@
       }
       return "var(--gantt-arrow-color)";
     }, [isCritical]);
-    return /* @__PURE__ */ jsxRuntime.jsx(
+    return /* @__PURE__ */ jsxRuntime.jsx("g", { fill: color, stroke: color, children: /* @__PURE__ */ jsxRuntime.jsxs(
       "g",
       {
-        fill: color,
-        stroke: color,
-        "data-arrow-from": taskFrom.id,
-        "data-arrow-to": taskTo.id,
-        children: /* @__PURE__ */ jsxRuntime.jsxs(
-          "g",
-          {
-            "data-testid": `task-arrow-${targetFrom}-${taskFrom.name}-${targetTo}-${taskTo.name}`,
-            className: `arrow ${styles$b.arrow_clickable}`,
-            onDoubleClick,
-            onClick: handleClick,
-            children: [
-              onArrowDoubleClick && /* @__PURE__ */ jsxRuntime.jsx("path", { d: path, className: styles$b.clickZone }),
-              /* @__PURE__ */ jsxRuntime.jsx("path", { className: styles$b.mainPath, d: path }),
-              /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("path", { d: path, className: styles$b.clickZone }),
+          /* @__PURE__ */ jsxRuntime.jsx("path", { className: styles$b.mainPath, d: path }),
+          /* @__PURE__ */ jsxRuntime.jsx("polygon", { className: "polygon", points: trianglePoints })
+        ]
       }
-    );
+    ) });
   };
   const Arrow = React.memo(ArrowInner);
   const roundedPath = (points, radius) => {
@@ -13182,6 +13176,8 @@
       onTaskBarDragStart,
       mapGlobalRowIndexToTask,
       onArrowDoubleClick,
+      onArrowClick,
+      activeArrowKey,
       onDoubleClick,
       onClick,
       renderedRowIndexes,
@@ -13203,9 +13199,7 @@
       waitCommitTasks,
       viewMode,
       showProgress = true,
-      progressColor,
-      onArrowClick,
-      selectedArrow
+      progressColor
     } = props;
     const renderedHolidays = React.useMemo(() => {
       const { columnWidth } = distances;
@@ -13488,6 +13482,7 @@
                         rtl,
                         onArrowDoubleClick,
                         onArrowClick,
+                        isActive: activeArrowKey === `${source.id}|${taskId}`,
                         fromConnectionIndex: getConnectionIndex(
                           `${source.id}|${sourceTarget}|out`
                         ),
@@ -13573,6 +13568,7 @@
                         rtl,
                         onArrowDoubleClick,
                         onArrowClick,
+                        isActive: activeArrowKey === `${taskId}|${dependent.id}`,
                         fromConnectionIndex: getConnectionIndex(
                           `${taskId}|${ownTarget}|out`
                         ),
@@ -13671,6 +13667,7 @@
                         rtl,
                         onArrowDoubleClick,
                         onArrowClick,
+                        isActive: activeArrowKey === `${source.id}|${taskId}`,
                         fromConnectionIndex: getConnectionIndex(
                           `${source.id}|${sourceTarget}|out`
                         ),
@@ -13729,80 +13726,11 @@
       visibleTasksMirror,
       onArrowDoubleClick,
       onArrowClick,
+      activeArrowKey,
       showProgress,
       progressColor
     ]);
-    const contentRef = React.useRef(null);
-    React.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);
-      };
-    }, []);
-    React.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__ */ jsxRuntime.jsxs("g", { className: "content", ref: contentRef, children: [
+    return /* @__PURE__ */ jsxRuntime.jsxs("g", { className: "content", children: [
       renderedSelectedTasks,
       /* @__PURE__ */ jsxRuntime.jsx("g", { children: renderedHolidays }),
       /* @__PURE__ */ jsxRuntime.jsx(
@@ -16358,13 +16286,13 @@
   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,
@@ -19419,110 +19347,72 @@
     return /* @__PURE__ */ jsxRuntime.jsx("div", { className: `${styles$1.loader} ${loading ? "" : styles$1.loaderHidden}` });
   };
   const GanttLoader = React.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_1rnqn_1";
+  const drawer = "_drawer_1rnqn_19";
+  const drawer_open = "_drawer_open_1rnqn_51";
+  const header = "_header_1rnqn_59";
+  const title = "_title_1rnqn_77";
+  const closeButton = "_closeButton_1rnqn_97";
+  const body = "_body_1rnqn_131";
   const styles = {
-    drawerOverlay,
+    overlay,
     drawer,
-    slideIn,
-    drawerHeader,
+    drawer_open,
+    header,
+    title,
     closeButton,
-    drawerContent,
-    defaultSection,
-    defaultField,
-    defaultFieldLabel
+    body
   };
-  const DefaultDrawerContent = ({
-    data
-  }) => {
-    var _a, _b, _c, _d, _e, _f;
-    if (data.type === "task" && data.task) {
-      const { task } = data;
-      return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.defaultSection, children: [
-        /* @__PURE__ */ jsxRuntime.jsx("h3", { children: "Task Details" }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.defaultField, children: [
-          /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles.defaultFieldLabel, children: "Name:" }),
-          /* @__PURE__ */ jsxRuntime.jsx("span", { children: task.name })
-        ] }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.defaultField, children: [
-          /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles.defaultFieldLabel, children: "Start:" }),
-          /* @__PURE__ */ jsxRuntime.jsx("span", { children: (_a = task.start) == null ? void 0 : _a.toLocaleDateString() })
-        ] }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.defaultField, children: [
-          /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles.defaultFieldLabel, children: "End:" }),
-          /* @__PURE__ */ jsxRuntime.jsx("span", { children: (_b = task.end) == null ? void 0 : _b.toLocaleDateString() })
-        ] }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.defaultField, children: [
-          /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles.defaultFieldLabel, children: "Progress:" }),
-          /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
-            Math.round(task.progress || 0),
-            "%"
-          ] })
-        ] })
-      ] });
-    }
-    if (data.type === "connection" && data.taskFrom && data.taskTo) {
-      return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.defaultSection, children: [
-        /* @__PURE__ */ jsxRuntime.jsx("h3", { children: "Connection Details" }),
-        /* @__PURE__ */ jsxRuntime.jsx("h4", { children: "From" }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.defaultField, children: [
-          /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles.defaultFieldLabel, children: "Name:" }),
-          /* @__PURE__ */ jsxRuntime.jsx("span", { children: data.taskFrom.name })
-        ] }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.defaultField, children: [
-          /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles.defaultFieldLabel, children: "Start:" }),
-          /* @__PURE__ */ jsxRuntime.jsx("span", { children: (_c = data.taskFrom.start) == null ? void 0 : _c.toLocaleDateString() })
-        ] }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.defaultField, children: [
-          /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles.defaultFieldLabel, children: "End:" }),
-          /* @__PURE__ */ jsxRuntime.jsx("span", { children: (_d = data.taskFrom.end) == null ? void 0 : _d.toLocaleDateString() })
-        ] }),
-        /* @__PURE__ */ jsxRuntime.jsx("h4", { children: "To" }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.defaultField, children: [
-          /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles.defaultFieldLabel, children: "Name:" }),
-          /* @__PURE__ */ jsxRuntime.jsx("span", { children: data.taskTo.name })
-        ] }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.defaultField, children: [
-          /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles.defaultFieldLabel, children: "Start:" }),
-          /* @__PURE__ */ jsxRuntime.jsx("span", { children: (_e = data.taskTo.start) == null ? void 0 : _e.toLocaleDateString() })
-        ] }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.defaultField, children: [
-          /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles.defaultFieldLabel, children: "End:" }),
-          /* @__PURE__ */ jsxRuntime.jsx("span", { children: (_f = data.taskTo.end) == null ? void 0 : _f.toLocaleDateString() })
-        ] })
-      ] });
-    }
-    return null;
-  };
-  const GanttDrawer = ({
-    open,
-    width,
+  const GanttDrawerInner = ({
     data,
+    width,
     onClose,
     renderContent
   }) => {
-    if (!open || !data)
-      return null;
-    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.drawerOverlay, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.drawer, style: { width }, children: [
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.drawerHeader, children: /* @__PURE__ */ jsxRuntime.jsx(
-        "button",
+    const handleOverlayClick = React.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}` : "";
+    return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      data && /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.overlay, onClick: handleOverlayClick }),
+      /* @__PURE__ */ jsxRuntime.jsxs(
+        "div",
         {
-          className: styles.closeButton,
-          onClick: onClose,
-          "aria-label": "Close drawer",
-          children: "×"
+          className: `${styles.drawer}${data ? ` ${styles.drawer_open}` : ""}`,
+          style: { width },
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.header, children: [
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles.title, children: title2 }),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "button",
+                {
+                  className: styles.closeButton,
+                  onClick: onClose,
+                  "aria-label": "Close drawer",
+                  type: "button",
+                  children: /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", children: /* @__PURE__ */ jsxRuntime.jsx(
+                    "path",
+                    {
+                      d: "M12 4L4 12M4 4l8 8",
+                      stroke: "currentColor",
+                      strokeWidth: "1.5",
+                      strokeLinecap: "round"
+                    }
+                  ) })
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.body, children: data && renderContent ? renderContent(data) : null })
+          ]
         }
-      ) }),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.drawerContent, children: renderContent ? renderContent(data) : /* @__PURE__ */ jsxRuntime.jsx(DefaultDrawerContent, { data }) })
-    ] }) });
+      )
+    ] });
   };
+  const GanttDrawer = React.memo(GanttDrawerInner);
   const Gantt = (props) => {
     var _a, _b;
     const {
@@ -19569,10 +19459,7 @@
       showProgress = true,
       progressColor,
       scrollToTaskId,
-      enableDrawer = false,
-      drawerWidth = 300,
-      renderDrawerContent,
-      onArrowClick: onArrowClickProp
+      drawer: drawerProps
     } = props;
     const ganttSVGRef = React.useRef(null);
     const wrapperRef = React.useRef(null);
@@ -19589,36 +19476,11 @@
       [theme, rowHeight]
     );
     const [waitCommitTasks, setWaitCommitTasks] = React.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] = React.useState(null);
-    const [selectedArrow, setSelectedArrow] = React.useState(null);
-    const handleDrawerClose = React.useCallback(() => {
-      setDrawerData(null);
-      setSelectedArrow(null);
-    }, []);
-    const handleBarClickForDrawer = React.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 = React.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] = React.useState(null);
     const taskBar = React.useMemo(() => {
       return mergeDeepObj(
         {},
@@ -20708,6 +20570,34 @@
       },
       [mapTaskToGlobalIndex, taskBar, handleCommitInternal, sortedTasks]
     );
+    const onArrowClick = React.useCallback(
+      (taskFrom, taskTo) => {
+        if (enableDrawer) {
+          setActiveArrowKey(`${taskFrom.id}|${taskTo.id}`);
+          setDrawerData({ type: "arrow", taskFrom, taskTo });
+        }
+        if (taskBar.onArrowClick) {
+          taskBar.onArrowClick(taskFrom, taskTo);
+        }
+      },
+      [enableDrawer, taskBar]
+    );
+    const handleTaskClick = React.useCallback(
+      (task, _event) => {
+        if (enableDrawer) {
+          setActiveArrowKey(null);
+          setDrawerData({ type: "task", task });
+        }
+        if (taskBar.onClick) {
+          taskBar.onClick(task);
+        }
+      },
+      [enableDrawer, taskBar]
+    );
+    const handleDrawerClose = React.useCallback(() => {
+      setDrawerData(null);
+      setActiveArrowKey(null);
+    }, []);
     const handleAction = useHandleAction({
       checkTaskIdExists,
       childTasksMap,
@@ -20894,6 +20784,7 @@
     const renderTaskBarProps = React.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;
@@ -20920,6 +20811,8 @@
         onTooltipTask: onChangeTooltipTask,
         mapGlobalRowIndexToTask,
         onArrowDoubleClick,
+        onArrowClick: enableDrawer ? onArrowClick : taskBar.onArrowClick,
+        activeArrowKey,
         renderedRowIndexes,
         rtl,
         selectTaskOnMouseDown,
@@ -20931,10 +20824,7 @@
         visibleTasksMirror,
         viewMode,
         showProgress,
-        progressColor,
-        onArrowClick: enableDrawer ? handleArrowClickForDrawer : void 0,
-        onClick: enableDrawer ? handleBarClickForDrawer : taskBar.onClick,
-        selectedArrow
+        progressColor
       }),
       [
         viewMode,
@@ -20960,6 +20850,10 @@
         onChangeTooltipTask,
         mapGlobalRowIndexToTask,
         onArrowDoubleClick,
+        onArrowClick,
+        activeArrowKey,
+        enableDrawer,
+        handleTaskClick,
         renderedRowIndexes,
         rtl,
         selectTaskOnMouseDown,
@@ -20973,11 +20867,7 @@
         changeInProgress == null ? void 0 : changeInProgress.action,
         handleDeleteTasks,
         showProgress,
-        progressColor,
-        enableDrawer,
-        handleArrowClickForDrawer,
-        handleBarClickForDrawer,
-        selectedArrow
+        progressColor
       ]
     );
     const renderTaskListProps = React.useMemo(
@@ -21134,9 +21024,8 @@
           enableDrawer && /* @__PURE__ */ jsxRuntime.jsx(
             GanttDrawer,
             {
-              open: drawerData !== null,
-              width: drawerWidth,
               data: drawerData,
+              width: drawerWidth,
               onClose: handleDrawerClose,
               renderContent: renderDrawerContent
             }