gantt-task-react-v 1.4.5 → 1.4.6

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

@@ -4606,7 +4606,7 @@
   const tooltipDefaultContainerParagraph = "_tooltipDefaultContainerParagraph_16o9s_31";
   const tooltipDetailsContainer = "_tooltipDetailsContainer_16o9s_47";
   const tooltipDetailsContainerHidden = "_tooltipDetailsContainerHidden_16o9s_71";
-  const styles$l = {
+  const styles$m = {
     tooltipDefaultContainer,
     tooltipDefaultContainerTexts,
     tooltipDefaultContainerParagraph,
@@ -4649,26 +4649,26 @@
     return /* @__PURE__ */ jsxRuntime.jsxs(
       "div",
       {
-        className: styles$l.tooltipDefaultContainer,
+        className: styles$m.tooltipDefaultContainer,
         style: { fontSize: "var(--gantt-font-size)" },
         children: [
           /* @__PURE__ */ jsxRuntime.jsx("b", { style: { fontSize: "var(--gantt-font-size)" }, children: `${task.name}: ${task.start.getDate()}-${task.start.getMonth() + 1}-${task.start.getFullYear()} - ${task.end.getDate()}-${task.end.getMonth() + 1}-${task.end.getFullYear()}` }),
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles$l.tooltipDefaultContainerTexts, children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles$m.tooltipDefaultContainerTexts, children: [
             task.end.getTime() - task.start.getTime() !== 0 && /* @__PURE__ */ jsxRuntime.jsx(
               "p",
               {
-                className: styles$l.tooltipDefaultContainerParagraph,
+                className: styles$m.tooltipDefaultContainerParagraph,
                 children: `${locale.tooltip.duration},: ${~~((task.end.getTime() - task.start.getTime()) / (1e3 * 60 * 60 * 24))} ${locale.suffix.days}`
               }
             ),
-            !!locale.tooltip.progress && /* @__PURE__ */ jsxRuntime.jsx("p", { className: styles$l.tooltipDefaultContainerParagraph, children: !!task.progress && `${locale.tooltip.progress}: ${task.progress} %` })
+            !!locale.tooltip.progress && /* @__PURE__ */ jsxRuntime.jsx("p", { className: styles$m.tooltipDefaultContainerParagraph, children: !!task.progress && `${locale.tooltip.progress}: ${task.progress} %` })
           ] })
         ]
       }
     );
   };
   const scroll = "_scroll_hp3qb_1";
-  const styles$k = {
+  const styles$l = {
     scroll
   };
   const VerticalScroll = ({
@@ -4689,7 +4689,7 @@
           marginLeft: rtl ? void 0 : "-1rem",
           pointerEvents: isChangeInProgress ? "none" : void 0
         },
-        className: styles$k.scroll,
+        className: styles$l.scroll,
         onScroll,
         ref: verticalScrollbarRef,
         children: /* @__PURE__ */ jsxRuntime.jsx("div", { style: { height: ganttFullHeight, width: 1 } })
@@ -4767,7 +4767,7 @@
   const taskListExpander = "_taskListExpander_16z6n_23";
   const taskListEmptyExpander = "_taskListEmptyExpander_16z6n_45";
   const taskName = "_taskName_16z6n_55";
-  const styles$j = {
+  const styles$k = {
     taskListNameWrapper,
     dragging,
     taskListExpander,
@@ -4844,7 +4844,7 @@
       "div",
       {
         "data-testid": `title-table-cell-${name}`,
-        className: `${styles$j.taskListNameWrapper}`,
+        className: `${styles$k.taskListNameWrapper}`,
         style: {
           paddingLeft: depth * nestedTaskNameOffset
         },
@@ -4853,7 +4853,7 @@
           /* @__PURE__ */ jsxRuntime.jsx(
             "div",
             {
-              className: `gantt-expander ${styles$j.taskListExpander} ${!hasChildren ? styles$j.taskListEmptyExpander : ""}`,
+              className: `gantt-expander ${styles$k.taskListExpander} ${!hasChildren ? styles$k.taskListEmptyExpander : ""}`,
               style: {
                 left: depth * nestedTaskNameOffset
               },
@@ -4864,7 +4864,7 @@
           /* @__PURE__ */ jsxRuntime.jsxs(
             "div",
             {
-              className: styles$j.taskName,
+              className: styles$k.taskName,
               style: { fontWeight: isProject ? "bold" : "regular" },
               children: [
                 isShowTaskNumbers && /* @__PURE__ */ jsxRuntime.jsxs("b", { children: [
@@ -4919,7 +4919,7 @@
     return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: dependencies.map(({ name }) => name).join(", ") });
   };
   const button = "_button_l55x0_1";
-  const styles$i = {
+  const styles$j = {
     button
   };
   const DeleteIcon = (props) => /* @__PURE__ */ jsxRuntime.jsxs(
@@ -4953,7 +4953,7 @@
           e.stopPropagation();
         },
         onClick,
-        className: styles$i.button,
+        className: styles$j.button,
         children: (icons == null ? void 0 : icons.renderDeleteIcon) ? icons.renderDeleteIcon() : /* @__PURE__ */ jsxRuntime.jsx(DeleteIcon, {})
       }
     );
@@ -4988,7 +4988,7 @@
           e.stopPropagation();
         },
         onClick,
-        className: styles$i.button,
+        className: styles$j.button,
         children: (icons == null ? void 0 : icons.renderEditIcon) ? icons.renderEditIcon() : /* @__PURE__ */ jsxRuntime.jsx(EditIcon, {})
       }
     );
@@ -5029,7 +5029,7 @@
           e.stopPropagation();
         },
         onClick,
-        className: styles$i.button,
+        className: styles$j.button,
         children: (icons == null ? void 0 : icons.renderAddIcon) ? icons.renderAddIcon() : /* @__PURE__ */ jsxRuntime.jsx(AddIcon, {})
       }
     );
@@ -5538,7 +5538,7 @@
   const ganttTable_HeaderSeparator = "_ganttTable_HeaderSeparator_5goa0_39";
   const ganttTable_HeaderItem = "_ganttTable_HeaderItem_5goa0_53";
   const resizer = "_resizer_5goa0_77";
-  const styles$h = {
+  const styles$i = {
     ganttTable,
     ganttTable_Header,
     ganttTable_HeaderMoveTask,
@@ -5587,7 +5587,7 @@
     return /* @__PURE__ */ jsxRuntime.jsx(
       "div",
       {
-        className: styles$h.ganttTable,
+        className: styles$i.ganttTable,
         style: {
           fontFamily: "var(--gantt-font-family)",
           fontSize: "var(--gantt-font-size)"
@@ -5595,18 +5595,18 @@
         children: /* @__PURE__ */ jsxRuntime.jsxs(
           "div",
           {
-            className: styles$h.ganttTable_Header,
+            className: styles$i.ganttTable_Header,
             style: {
               height: headerHeight - 2
             },
             children: [
-              canMoveTasks && /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles$h.ganttTable_HeaderMoveTask }),
+              canMoveTasks && /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles$i.ganttTable_HeaderMoveTask }),
               columns.map(({ title, width, canResize }, index2) => {
                 return /* @__PURE__ */ jsxRuntime.jsxs(React.Fragment, { children: [
                   index2 > 0 && !!title && /* @__PURE__ */ jsxRuntime.jsx(
                     "div",
                     {
-                      className: styles$h.ganttTable_HeaderSeparator,
+                      className: styles$i.ganttTable_HeaderSeparator,
                       style: {
                         height: headerHeight * 0.5,
                         marginTop: headerHeight * 0.2
@@ -5617,7 +5617,7 @@
                     "div",
                     {
                       "data-testid": `table-column-header-${title}`,
-                      className: styles$h.ganttTable_HeaderItem,
+                      className: styles$i.ganttTable_HeaderItem,
                       style: {
                         minWidth: width,
                         maxWidth: width,
@@ -5629,7 +5629,7 @@
                           "div",
                           {
                             "data-testid": `table-column-header-resize-handle-${title}`,
-                            className: styles$h.resizer,
+                            className: styles$i.resizer,
                             onMouseDown: (event) => {
                               onColumnResizeStart(index2, event.clientX);
                             },
@@ -9843,7 +9843,7 @@
   }
   [KeyboardCode.Down, KeyboardCode.Right, KeyboardCode.Up, KeyboardCode.Left];
   const taskListWrapper$1 = "_taskListWrapper_196te_3";
-  const styles$g = {
+  const styles$h = {
     taskListWrapper: taskListWrapper$1
   };
   function getDragDepth(offset2, indentationWidth2) {
@@ -10029,7 +10029,7 @@
   const dragIndicatorIcon = "_dragIndicatorIcon_1yqtr_119";
   const isCut = "_isCut_1yqtr_135";
   const taskListCell = "_taskListCell_1yqtr_167";
-  const styles$f = {
+  const styles$g = {
     taskListTableRow,
     isAfter,
     isBefore,
@@ -10169,18 +10169,18 @@
         return isSelected ? "var(--gantt-table-selected-task-background-color)" : isEven ? "var(--gantt-table-even-background-color)" : void 0;
       }, [isEven, isOverlay2, isSelected]);
       const rowClassName = React.useMemo(() => {
-        const classNames = [styles$f.taskListTableRow];
+        const classNames = [styles$g.taskListTableRow];
         if (moveOverPosition === "after") {
-          classNames.push(styles$f.isAfter);
+          classNames.push(styles$g.isAfter);
         }
         if (moveOverPosition === "before") {
-          classNames.push(styles$f.isBefore);
+          classNames.push(styles$g.isBefore);
         }
         if (isOverlay2 && !isDragging) {
-          classNames.push(styles$f.isOverlay);
+          classNames.push(styles$g.isOverlay);
         }
         if (isCut2) {
-          classNames.push(styles$f.isCut);
+          classNames.push(styles$g.isCut);
         }
         return classNames.join(" ");
       }, [isCut2, moveOverPosition, isOverlay2, isDragging]);
@@ -10228,12 +10228,12 @@
           },
           onContextMenu,
           children: [
-            task.type !== "project" && task.id !== "no-project-asigned" && !isOverlay2 && moveHandleProps ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: `${styles$f.dragIndicator}`, ...moveHandleProps, children: /* @__PURE__ */ jsxRuntime.jsx(DragIndicatorIcon, { className: styles$f.dragIndicatorIcon }) }) : /* @__PURE__ */ jsxRuntime.jsx("div", {}),
+            task.type !== "project" && task.id !== "no-project-asigned" && !isOverlay2 && moveHandleProps ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: `${styles$g.dragIndicator}`, ...moveHandleProps, children: /* @__PURE__ */ jsxRuntime.jsx(DragIndicatorIcon, { className: styles$g.dragIndicatorIcon }) }) : /* @__PURE__ */ jsxRuntime.jsx("div", {}),
             columns.map(({ id: id2, component: Component, width }, index2) => {
               return /* @__PURE__ */ jsxRuntime.jsx(
                 "div",
                 {
-                  className: styles$f.taskListCell,
+                  className: styles$g.taskListCell,
                   style: {
                     minWidth: width,
                     maxWidth: width,
@@ -10644,7 +10644,7 @@
               children: /* @__PURE__ */ jsxRuntime.jsx(
                 "div",
                 {
-                  className: styles$g.taskListWrapper,
+                  className: styles$h.taskListWrapper,
                   style: {
                     fontFamily: "var(--gantt-font-family)",
                     fontSize: "var(--gantt-font-size)"
@@ -10683,7 +10683,7 @@
   };
   const TaskListSortableTable = React.memo(TaskListSortableTableDefaultInner);
   const taskListWrapper = "_taskListWrapper_196te_3";
-  const styles$e = {
+  const styles$f = {
     taskListWrapper
   };
   const TaskListTableDefaultInner = ({
@@ -10729,7 +10729,7 @@
     return /* @__PURE__ */ jsxRuntime.jsx(
       "div",
       {
-        className: styles$e.taskListWrapper,
+        className: styles$f.taskListWrapper,
         style: {
           fontFamily: "var(--gantt-font-family)",
           fontSize: "var(--gantt-font-size)"
@@ -10747,7 +10747,7 @@
   const scrollToTop = "_scrollToTop_yoz76_173";
   const scrollToBottom = "_scrollToBottom_yoz76_189";
   const hidden = "_hidden_yoz76_205";
-  const styles$d = {
+  const styles$e = {
     taskListRoot,
     taskListHorizontalScroll,
     taskListResizer,
@@ -10886,12 +10886,12 @@
       ]
     );
     const RenderTaskListTable = canReorderTasks ? TaskListSortableTable : TaskListTable;
-    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles$d.taskListRoot, ref: taskListRef, children: [
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles$e.taskListRoot, ref: taskListRef, children: [
       /* @__PURE__ */ jsxRuntime.jsxs(
         "div",
         {
           ref: taskListHorizontalScrollRef,
-          className: styles$d.taskListHorizontalScroll,
+          className: styles$e.taskListHorizontalScroll,
           style: {
             width: tableWidth
           },
@@ -10906,12 +10906,12 @@
                 canResizeColumns
               }
             ),
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles$d.tableWrapper, children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles$e.tableWrapper, children: [
               /* @__PURE__ */ jsxRuntime.jsx(
                 "div",
                 {
                   ref: taskListContainerRef,
-                  className: styles$d.horizontalContainer,
+                  className: styles$e.horizontalContainer,
                   style: {
                     height: Math.max(
                       ganttHeight - ((tableBottom == null ? void 0 : tableBottom.height) || 0),
@@ -10973,13 +10973,13 @@
               /* @__PURE__ */ jsxRuntime.jsx(
                 "div",
                 {
-                  className: `${styles$d.scrollToTop} ${!renderedIndexes || renderedIndexes[2] ? styles$d.hidden : ""}`
+                  className: `${styles$e.scrollToTop} ${!renderedIndexes || renderedIndexes[2] ? styles$e.hidden : ""}`
                 }
               ),
               /* @__PURE__ */ jsxRuntime.jsx(
                 "div",
                 {
-                  className: `${styles$d.scrollToBottom} ${!renderedIndexes || renderedIndexes[3] ? styles$d.hidden : ""}`
+                  className: `${styles$e.scrollToBottom} ${!renderedIndexes || renderedIndexes[3] ? styles$e.hidden : ""}`
                 }
               )
             ] }),
@@ -10990,7 +10990,7 @@
       /* @__PURE__ */ jsxRuntime.jsx(
         "div",
         {
-          className: styles$d.taskListResizer,
+          className: styles$e.taskListResizer,
           onMouseDown: (event) => {
             onTableResizeStart(event.clientX);
           },
@@ -11007,7 +11007,7 @@
   const TaskList = React.memo(TaskListInner);
   const ganttToday = "_ganttToday_1oyhk_1";
   const ganttTodayCircle = "_ganttTodayCircle_1oyhk_9";
-  const styles$c = {
+  const styles$d = {
     ganttToday,
     ganttTodayCircle
   };
@@ -11073,7 +11073,7 @@
         /* @__PURE__ */ jsxRuntime.jsx(
           "circle",
           {
-            className: styles$c.ganttTodayCircle,
+            className: styles$d.ganttTodayCircle,
             cx: x + 1,
             cy: 6,
             r: 6,
@@ -11150,7 +11150,7 @@
         /* @__PURE__ */ jsxRuntime.jsx(
           "circle",
           {
-            className: styles$c.ganttTodayCircle,
+            className: styles$d.ganttTodayCircle,
             cx: x + 1,
             cy: 6,
             r: 6,
@@ -11193,7 +11193,7 @@
   const calendarHeader = "_calendarHeader_15t8b_61";
   const calendar = "_calendar_15t8b_1";
   const calendarDragging$1 = "_calendarDragging_15t8b_85";
-  const styles$b = {
+  const styles$c = {
     calendarBottomText,
     calendarTopTick,
     calendarTopText,
@@ -11224,10 +11224,10 @@
           y1: y1Line,
           x2: x1Line,
           y2: y2Line,
-          className: styles$b.calendarTopTick
+          className: styles$c.calendarTopTick
         }
       ),
-      value !== null && /* @__PURE__ */ jsxRuntime.jsx("text", { y: yText - 4, x: xText, className: styles$b.calendarTopText, children: value.toString().split(",")[1] ? t(value.toString().split(",")[0]) + "," + value.toString().split(",")[1] : value.toString().length >= 3 ? t(value.toString()) : value })
+      value !== null && /* @__PURE__ */ jsxRuntime.jsx("text", { y: yText - 4, x: xText, className: styles$c.calendarTopText, children: value.toString().split(",")[1] ? t(value.toString().split(",")[0]) + "," + value.toString().split(",")[1] : value.toString().length >= 3 ? t(value.toString()) : value })
     ] });
   };
   const defaultRenderBottomHeader = (date, viewMode, dateSetup, index2, isUnknownDates) => {
@@ -11387,7 +11387,7 @@
       [renderTopHeader, dateSetup]
     );
     const renderBottomText = (x, y, key2, text) => {
-      return /* @__PURE__ */ jsxRuntime.jsx("g", { className: styles$b.calendarBottomText, children: /* @__PURE__ */ jsxRuntime.jsx(
+      return /* @__PURE__ */ jsxRuntime.jsx("g", { className: styles$c.calendarBottomText, children: /* @__PURE__ */ jsxRuntime.jsx(
         "text",
         {
           y,
@@ -11682,7 +11682,7 @@
           scrollLeft: scrollRef.current.scrollLeft,
           scrollTop: scrollRef.current.scrollTop
         };
-        calendarContainer.classList.add(styles$b.calendarDragging);
+        calendarContainer.classList.add(styles$c.calendarDragging);
       };
       const onScrollMove = (event) => {
         if (!moveStateRef.current) {
@@ -11697,7 +11697,7 @@
       const onScrollEnd = (event) => {
         event.preventDefault();
         moveStateRef.current = null;
-        calendarContainer.classList.remove(styles$b.calendarDragging);
+        calendarContainer.classList.remove(styles$c.calendarDragging);
       };
       calendarContainer.addEventListener("mousemove", onScrollMove);
       calendarContainer.addEventListener("mousedown", onScrollStart);
@@ -11714,7 +11714,7 @@
       "g",
       {
         ref: calendarRef,
-        className: `${styles$b.calendar} calendar`,
+        className: `${styles$c.calendar} calendar`,
         fontSize: "var(--gantt-font-size)",
         fontFamily: "var(--gantt-font-family)",
         children: [
@@ -11725,7 +11725,7 @@
               y: 0,
               width: fullSvgWidth,
               height: headerHeight,
-              className: styles$b.calendarHeader
+              className: styles$c.calendarHeader
             }
           ),
           topValues,
@@ -11744,10 +11744,10 @@
     ${x - width},${y - width} 
     ${x - width},${y + width}`;
   };
-  const arrow_clickable = "_arrow_clickable_1xrbf_1";
-  const mainPath = "_mainPath_1xrbf_11";
-  const clickZone = "_clickZone_1xrbf_57";
-  const styles$a = {
+  const arrow_clickable = "_arrow_clickable_13ifc_1";
+  const mainPath = "_mainPath_13ifc_9";
+  const clickZone = "_clickZone_13ifc_33";
+  const styles$b = {
     arrow_clickable,
     mainPath,
     clickZone
@@ -11770,6 +11770,7 @@
       isCritical,
       rtl,
       onArrowDoubleClick = void 0,
+      onArrowClick = void 0,
       fromConnectionIndex = 0,
       fromTotalConnections = 1,
       toConnectionIndex = 0,
@@ -11788,6 +11789,11 @@
         onArrowDoubleClick(taskFrom, taskTo);
       }
     }, [taskFrom, taskTo, onArrowDoubleClick]);
+    const handleClick = React.useCallback(() => {
+      if (onArrowClick) {
+        onArrowClick(taskFrom, taskTo);
+      }
+    }, [taskFrom, taskTo, onArrowClick]);
     const [path, trianglePoints] = React.useMemo(
       () => drownPathAndTriangle(
         indexFrom,
@@ -11835,19 +11841,29 @@
       }
       return "var(--gantt-arrow-color)";
     }, [isCritical]);
-    return /* @__PURE__ */ jsxRuntime.jsx("g", { fill: color, stroke: color, children: /* @__PURE__ */ jsxRuntime.jsxs(
+    return /* @__PURE__ */ jsxRuntime.jsx(
       "g",
       {
-        "data-testid": `task-arrow-${targetFrom}-${taskFrom.name}-${targetTo}-${taskTo.name}`,
-        className: `arrow ${styles$a.arrow_clickable}`,
-        onDoubleClick,
-        children: [
-          onArrowDoubleClick && /* @__PURE__ */ jsxRuntime.jsx("path", { d: path, className: styles$a.clickZone }),
-          /* @__PURE__ */ jsxRuntime.jsx("path", { className: `${styles$a.mainPath} arrowMainPath`, d: path }),
-          /* @__PURE__ */ jsxRuntime.jsx("polygon", { className: "polygon arrowPolygon", points: trianglePoints })
-        ]
+        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 })
+            ]
+          }
+        )
       }
-    ) });
+    );
   };
   const Arrow = React.memo(ArrowInner);
   const roundedPath = (points, radius) => {
@@ -11939,7 +11955,7 @@
     return [path, trianglePoints];
   };
   const relationLine = "_relationLine_wh2qy_1";
-  const styles$9 = {
+  const styles$a = {
     relationLine
   };
   const RelationLine = ({
@@ -11955,7 +11971,7 @@
         x2,
         y1,
         y2,
-        className: styles$9.relationLine
+        className: styles$a.relationLine
       }
     );
   };
@@ -12178,7 +12194,7 @@
   const barHandleImportantVisible = "_barHandleImportantVisible_5jhkr_37";
   const barHandleImportantHidden = "_barHandleImportantHidden_5jhkr_47";
   const barBackground = "_barBackground_5jhkr_57";
-  const styles$8 = {
+  const styles$9 = {
     barWrapper,
     barHandle,
     barHandleImportantVisible,
@@ -12280,7 +12296,7 @@
               ry: barCornerRadius,
               rx: barCornerRadius,
               fill: barColor,
-              className: styles$8.barBackground
+              className: styles$9.barBackground
             }
           ),
           showProgress && /* @__PURE__ */ jsxRuntime.jsx(
@@ -12337,7 +12353,7 @@
   const projectWrapper = "_projectWrapper_1maxt_1";
   const projectBackground = "_projectBackground_1maxt_11";
   const projectTop = "_projectTop_1maxt_21";
-  const styles$7 = {
+  const styles$8 = {
     projectWrapper,
     projectBackground,
     projectTop
@@ -12418,7 +12434,7 @@
             startMoveFullTask(firstTouch.clientX);
           }
         },
-        className: styles$7.projectWrapper,
+        className: styles$8.projectWrapper,
         children: [
           /* @__PURE__ */ jsxRuntime.jsx(
             "rect",
@@ -12430,7 +12446,7 @@
               height: taskHeight,
               rx: barCornerRadius,
               ry: barCornerRadius,
-              className: styles$7.projectBackground
+              className: styles$8.projectBackground
             }
           ),
           showProgress && /* @__PURE__ */ jsxRuntime.jsx(
@@ -12455,13 +12471,13 @@
               height: taskHalfHeight,
               rx: barCornerRadius,
               ry: barCornerRadius,
-              className: styles$7.projectTop
+              className: styles$8.projectTop
             }
           ),
           /* @__PURE__ */ jsxRuntime.jsx(
             "polygon",
             {
-              className: styles$7.projectTop,
+              className: styles$8.projectTop,
               points: projectLeftTriangle,
               fill: barColor
             }
@@ -12469,7 +12485,7 @@
           /* @__PURE__ */ jsxRuntime.jsx(
             "polygon",
             {
-              className: styles$7.projectTop,
+              className: styles$8.projectTop,
               points: projectRightTriangle,
               fill: barColor
             }
@@ -12481,7 +12497,7 @@
   const barRelationHandleWrapper = "_barRelationHandleWrapper_eluno_1";
   const barRelationHandle = "_barRelationHandle_eluno_1";
   const barRelationHandle_drawMode = "_barRelationHandle_drawMode_eluno_9";
-  const styles$6 = {
+  const styles$7 = {
     barRelationHandleWrapper,
     barRelationHandle,
     barRelationHandle_drawMode
@@ -12501,7 +12517,7 @@
         cx: x,
         cy: y,
         r: radius,
-        className: `${styles$6.barRelationHandle} ${isRelationDrawMode ? styles$6.barRelationHandle_drawMode : ""}`,
+        className: `${styles$7.barRelationHandle} ${isRelationDrawMode ? styles$7.barRelationHandle_drawMode : ""}`,
         onMouseDown: startDrawRelation,
         onTouchStart: startDrawRelation
       }
@@ -12514,7 +12530,7 @@
       {
         ref,
         tabIndex: 0,
-        className: `${styles$6.barRelationHandleWrapper} ${className || ""}`,
+        className: `${styles$7.barRelationHandleWrapper} ${className || ""}`,
         children
       }
     );
@@ -12655,12 +12671,12 @@
       return () => {
       };
     }, []);
-    return /* @__PURE__ */ jsxRuntime.jsxs(BarRelationWrapper, { ref: rootRef, className: styles$8.barWrapper, children: [
+    return /* @__PURE__ */ jsxRuntime.jsxs(BarRelationWrapper, { ref: rootRef, className: styles$9.barWrapper, children: [
       task.id !== "no-project-asigned" && renderBarDisplay(),
       ctrlPressed && isDateChangeable(task) && /* @__PURE__ */ jsxRuntime.jsx(
         BarDateHandle,
         {
-          className: `${styles$8.barHandle} ${isMovingDate ? styles$8.barHandleImportantVisible : ""} ${isMovingProgress || isRelationDrawMode ? styles$8.barHandleImportantHidden : ""}`,
+          className: `${styles$9.barHandle} ${isMovingDate ? styles$9.barHandleImportantVisible : ""} ${isMovingProgress || isRelationDrawMode ? styles$9.barHandleImportantHidden : ""}`,
           dataTestId: `bar-date-handle-left-${task.id}`,
           barCornerRadius,
           height: handleHeight,
@@ -12673,7 +12689,7 @@
       ctrlPressed && isDateChangeable(task) && /* @__PURE__ */ jsxRuntime.jsx(
         BarDateHandle,
         {
-          className: `${styles$8.barHandle} ${isMovingDate ? styles$8.barHandleImportantVisible : ""} ${isMovingProgress || isRelationDrawMode ? styles$8.barHandleImportantHidden : ""}`,
+          className: `${styles$9.barHandle} ${isMovingDate ? styles$9.barHandleImportantVisible : ""} ${isMovingProgress || isRelationDrawMode ? styles$9.barHandleImportantHidden : ""}`,
           dataTestId: `bar-date-handle-right-${task.id}`,
           barCornerRadius,
           height: handleHeight,
@@ -12689,7 +12705,7 @@
   };
   const milestoneWrapper = "_milestoneWrapper_vcirf_1";
   const milestoneBackground = "_milestoneBackground_vcirf_11";
-  const styles$5 = {
+  const styles$6 = {
     milestoneWrapper,
     milestoneBackground
   };
@@ -12719,7 +12735,7 @@
       }
       return "var(--gantt-milestone-background-color)";
     }, [isSelected, isCritical]);
-    return /* @__PURE__ */ jsxRuntime.jsxs(BarRelationWrapper, { className: styles$5.milestoneWrapper, children: [
+    return /* @__PURE__ */ jsxRuntime.jsxs(BarRelationWrapper, { className: styles$6.milestoneWrapper, children: [
       /* @__PURE__ */ jsxRuntime.jsx(
         "rect",
         {
@@ -12732,7 +12748,7 @@
           rx: barCornerRadius,
           ry: barCornerRadius,
           transform,
-          className: styles$5.milestoneBackground,
+          className: styles$6.milestoneBackground,
           onMouseDown: (e) => {
             e.stopPropagation();
             onTaskEventStart("move", e.clientX);
@@ -13058,11 +13074,11 @@
   };
   const TaskItem = React.memo(TaskItemInner);
   const TaskItemWrapper = "_TaskItemWrapper_8x02m_1";
-  const styles$4 = {
+  const styles$5 = {
     TaskItemWrapper
   };
   const barComparison = "_barComparison_14078_1";
-  const styles$3 = {
+  const styles$4 = {
     barComparison
   };
   const BarComparison = (props) => {
@@ -13117,7 +13133,7 @@
               ry: barCornerRadius,
               rx: barCornerRadius,
               fill: barColor,
-              className: styles$3.barComparison
+              className: styles$4.barComparison
             }
           ),
           /* @__PURE__ */ jsxRuntime.jsx(
@@ -13187,7 +13203,9 @@
       waitCommitTasks,
       viewMode,
       showProgress = true,
-      progressColor
+      progressColor,
+      onArrowClick,
+      selectedArrow
     } = props;
     const renderedHolidays = React.useMemo(() => {
       const { columnWidth } = distances;
@@ -13220,13 +13238,6 @@
       getDate,
       startColumnIndex
     ]);
-    const [hoveredTaskId, setHoveredTaskId] = React.useState(null);
-    const handleTaskHover = React.useCallback((taskId) => {
-      setHoveredTaskId(taskId);
-    }, []);
-    const handleTaskLeave = React.useCallback(() => {
-      setHoveredTaskId(null);
-    }, []);
     const [renderedTasks, renderedArrows, renderedSelectedTasks] = React.useMemo(() => {
       if (!renderedRowIndexes) {
         return [null, null, null];
@@ -13324,13 +13335,11 @@
             "svg",
             {
               id: task.id,
-              className: `${styles$4.TaskItemWrapper} TaskItemWrapper`,
+              className: `${styles$5.TaskItemWrapper} TaskItemWrapper`,
               x: Math.max(safeContainerX + (additionalLeftSpace || 0), 0),
               y: safeLevelY,
               width: Math.max(safeContainerWidth, 0),
               height: fullRowHeight,
-              onMouseEnter: () => handleTaskHover(task.id),
-              onMouseLeave: handleTaskLeave,
               children: /* @__PURE__ */ jsxRuntime.jsx(
                 TaskItem,
                 {
@@ -13459,8 +13468,6 @@
                     y: containerY,
                     width: safeArrowContainerWidth,
                     height: containerHeight,
-                    "data-from-id": source.id,
-                    "data-to-id": taskId,
                     children: /* @__PURE__ */ jsxRuntime.jsx(
                       Arrow,
                       {
@@ -13480,6 +13487,7 @@
                         isCritical: isCritical2,
                         rtl,
                         onArrowDoubleClick,
+                        onArrowClick,
                         fromConnectionIndex: getConnectionIndex(
                           `${source.id}|${sourceTarget}|out`
                         ),
@@ -13545,8 +13553,6 @@
                     y: containerY,
                     width: safeArrowContainerWidth,
                     height: containerHeight,
-                    "data-from-id": taskId,
-                    "data-to-id": dependent.id,
                     children: /* @__PURE__ */ jsxRuntime.jsx(
                       Arrow,
                       {
@@ -13566,6 +13572,7 @@
                         isCritical: isCritical2,
                         rtl,
                         onArrowDoubleClick,
+                        onArrowClick,
                         fromConnectionIndex: getConnectionIndex(
                           `${taskId}|${ownTarget}|out`
                         ),
@@ -13644,8 +13651,6 @@
                     y: containerY,
                     width: safeCW,
                     height: containerHeight,
-                    "data-from-id": source.id,
-                    "data-to-id": taskId,
                     children: /* @__PURE__ */ jsxRuntime.jsx(
                       Arrow,
                       {
@@ -13665,6 +13670,7 @@
                         isCritical,
                         rtl,
                         onArrowDoubleClick,
+                        onArrowClick,
                         fromConnectionIndex: getConnectionIndex(
                           `${source.id}|${sourceTarget}|out`
                         ),
@@ -13722,36 +13728,81 @@
       isRelationChangeable,
       visibleTasksMirror,
       onArrowDoubleClick,
+      onArrowClick,
       showProgress,
-      progressColor,
-      handleTaskHover,
-      handleTaskLeave
+      progressColor
     ]);
-    const arrowHighlightStyle = React.useMemo(() => {
-      if (!hoveredTaskId)
-        return null;
-      const safeId = CSS.escape(hoveredTaskId);
-      return /* @__PURE__ */ jsxRuntime.jsx("style", { children: `
-        g.arrows svg { opacity: 0.08 !important; transition: opacity 0.15s; }
-        g.arrows svg[data-from-id="${safeId}"],
-        g.arrows svg[data-to-id="${safeId}"] {
-          opacity: 1 !important;
-        }
-        g.arrows svg[data-from-id="${safeId}"] .arrowMainPath,
-        g.arrows svg[data-to-id="${safeId}"] .arrowMainPath {
-          opacity: 1 !important;
-          stroke-width: 2px !important;
-          stroke: var(--gantt-arrow-hover-color, #1976D2) !important;
-        }
-        g.arrows svg[data-from-id="${safeId}"] .arrowPolygon,
-        g.arrows svg[data-to-id="${safeId}"] .arrowPolygon {
-          fill: var(--gantt-arrow-hover-color, #1976D2) !important;
-          opacity: 1 !important;
-        }
-      ` });
-    }, [hoveredTaskId]);
-    return /* @__PURE__ */ jsxRuntime.jsxs("g", { className: "content", children: [
-      arrowHighlightStyle,
+    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: [
       renderedSelectedTasks,
       /* @__PURE__ */ jsxRuntime.jsx("g", { children: renderedHolidays }),
       /* @__PURE__ */ jsxRuntime.jsx(
@@ -13788,7 +13839,7 @@
   const horizontalContainer = "_horizontalContainer_1wr55_73";
   const wrapper = "_wrapper_1wr55_85";
   const calendarDragging = "_calendarDragging_1wr55_109";
-  const styles$2 = {
+  const styles$3 = {
     ganttVerticalContainer,
     horizontalContainer,
     wrapper,
@@ -13872,7 +13923,7 @@
           scrollLeft: verticalScrollbarRef.current.scrollLeft,
           scrollTop: verticalScrollbarRef.current.scrollTop
         };
-        contentContainer.classList.add(styles$2.calendarDragging);
+        contentContainer.classList.add(styles$3.calendarDragging);
       };
       const onScrollMove = (event) => {
         if (!moveStateVertRef.current) {
@@ -13905,7 +13956,7 @@
         event.preventDefault();
         moveStateVertRef.current = null;
         moveStateHorRef.current = null;
-        contentContainer.classList.remove(styles$2.calendarDragging);
+        contentContainer.classList.remove(styles$3.calendarDragging);
       };
       contentContainer.addEventListener("mousemove", onScrollMove);
       contentContainer.addEventListener("mousedown", onScrollStart);
@@ -13921,7 +13972,7 @@
     return /* @__PURE__ */ jsxRuntime.jsxs(
       "div",
       {
-        className: styles$2.ganttVerticalContainer,
+        className: styles$3.ganttVerticalContainer,
         ref: verticalGanttContainerRef,
         onScroll: onVerticalScrollbarScrollX,
         dir: "ltr",
@@ -13940,7 +13991,7 @@
             "div",
             {
               ref: horizontalContainerRef,
-              className: styles$2.horizontalContainer,
+              className: styles$3.horizontalContainer,
               style: containerStyle,
               children: /* @__PURE__ */ jsxRuntime.jsx("div", { style: gridStyle, children: /* @__PURE__ */ jsxRuntime.jsxs(
                 "svg",
@@ -18432,7 +18483,7 @@
   const menuOption = "_menuOption_1c3e3_3";
   const icon = "_icon_1c3e3_81";
   const label = "_label_1c3e3_89";
-  const styles$1 = {
+  const styles$2 = {
     menuOption,
     icon,
     label
@@ -18526,7 +18577,7 @@
           /* @__PURE__ */ jsxRuntime.jsxs(
             "button",
             {
-              className: styles$1.menuOption,
+              className: styles$2.menuOption,
               "aria-disabled": disabled,
               disabled,
               style: {
@@ -18541,7 +18592,7 @@
                 /* @__PURE__ */ jsxRuntime.jsx(
                   "div",
                   {
-                    className: styles$1.icon,
+                    className: styles$2.icon,
                     style: {
                       width: contextMenuIconWidth,
                       color: "var(--gantt-context-menu-text-color)",
@@ -18550,7 +18601,7 @@
                     children: icon2
                   }
                 ),
-                /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles$1.label, children: label2 }),
+                /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles$2.label, children: label2 }),
                 children && children.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(
                   "div",
                   {
@@ -19359,15 +19410,119 @@
   const loader = "_loader_covn4_5";
   const l16 = "_l16_covn4_1";
   const loaderHidden = "_loaderHidden_covn4_49";
-  const styles = {
+  const styles$1 = {
     loader,
     l16,
     loaderHidden
   };
   const GanttLoaderInner = ({ loading }) => {
-    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: `${styles.loader} ${loading ? "" : styles.loaderHidden}` });
+    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 styles = {
+    drawerOverlay,
+    drawer,
+    slideIn,
+    drawerHeader,
+    closeButton,
+    drawerContent,
+    defaultSection,
+    defaultField,
+    defaultFieldLabel
+  };
+  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,
+    data,
+    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",
+        {
+          className: styles.closeButton,
+          onClick: onClose,
+          "aria-label": "Close drawer",
+          children: "×"
+        }
+      ) }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.drawerContent, children: renderContent ? renderContent(data) : /* @__PURE__ */ jsxRuntime.jsx(DefaultDrawerContent, { data }) })
+    ] }) });
+  };
   const Gantt = (props) => {
     var _a, _b;
     const {
@@ -19413,7 +19568,11 @@
       dataDateLabel = "Data Date",
       showProgress = true,
       progressColor,
-      scrollToTaskId
+      scrollToTaskId,
+      enableDrawer = false,
+      drawerWidth = 300,
+      renderDrawerContent,
+      onArrowClick: onArrowClickProp
     } = props;
     const ganttSVGRef = React.useRef(null);
     const wrapperRef = React.useRef(null);
@@ -19430,6 +19589,36 @@
       [theme, rowHeight]
     );
     const [waitCommitTasks, setWaitCommitTasks] = React.useState(false);
+    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 taskBar = React.useMemo(() => {
       return mergeDeepObj(
         {},
@@ -20742,7 +20931,10 @@
         visibleTasksMirror,
         viewMode,
         showProgress,
-        progressColor
+        progressColor,
+        onArrowClick: enableDrawer ? handleArrowClickForDrawer : void 0,
+        onClick: enableDrawer ? handleBarClickForDrawer : taskBar.onClick,
+        selectedArrow
       }),
       [
         viewMode,
@@ -20781,7 +20973,11 @@
         changeInProgress == null ? void 0 : changeInProgress.action,
         handleDeleteTasks,
         showProgress,
-        progressColor
+        progressColor,
+        enableDrawer,
+        handleArrowClickForDrawer,
+        handleBarClickForDrawer,
+        selectedArrow
       ]
     );
     const renderTaskListProps = React.useMemo(
@@ -20850,7 +21046,7 @@
       "div",
       {
         style: cssVars,
-        className: `${styles$2.wrapper} gantt`,
+        className: `${styles$3.wrapper} gantt`,
         onKeyDown: handleKeyDown,
         tabIndex: 0,
         ref: wrapperRef,
@@ -20934,7 +21130,17 @@
               boundaryElement: verticalGanttContainerRef
             }
           ),
-          /* @__PURE__ */ jsxRuntime.jsx(GanttLoader, { loading: waitCommitTasks })
+          /* @__PURE__ */ jsxRuntime.jsx(GanttLoader, { loading: waitCommitTasks }),
+          enableDrawer && /* @__PURE__ */ jsxRuntime.jsx(
+            GanttDrawer,
+            {
+              open: drawerData !== null,
+              width: drawerWidth,
+              data: drawerData,
+              onClose: handleDrawerClose,
+              renderContent: renderDrawerContent
+            }
+          )
         ]
       }
     ) }) });