gantt-task-react-v 1.4.4 → 1.4.6

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

@@ -4589,7 +4589,7 @@ const tooltipDefaultContainerTexts = "_tooltipDefaultContainerTexts_16o9s_17";
 const tooltipDefaultContainerParagraph = "_tooltipDefaultContainerParagraph_16o9s_31";
 const tooltipDetailsContainer = "_tooltipDetailsContainer_16o9s_47";
 const tooltipDetailsContainerHidden = "_tooltipDetailsContainerHidden_16o9s_71";
-const styles$l = {
+const styles$m = {
   tooltipDefaultContainer,
   tooltipDefaultContainerTexts,
   tooltipDefaultContainerParagraph,
@@ -4632,26 +4632,26 @@ const StandardTooltipContent = ({ task }) => {
   return /* @__PURE__ */ jsxs(
     "div",
     {
-      className: styles$l.tooltipDefaultContainer,
+      className: styles$m.tooltipDefaultContainer,
       style: { fontSize: "var(--gantt-font-size)" },
       children: [
         /* @__PURE__ */ 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__ */ jsxs("div", { className: styles$l.tooltipDefaultContainerTexts, children: [
+        /* @__PURE__ */ jsxs("div", { className: styles$m.tooltipDefaultContainerTexts, children: [
           task.end.getTime() - task.start.getTime() !== 0 && /* @__PURE__ */ 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__ */ jsx("p", { className: styles$l.tooltipDefaultContainerParagraph, children: !!task.progress && `${locale.tooltip.progress}: ${task.progress} %` })
+          !!locale.tooltip.progress && /* @__PURE__ */ 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 = ({
@@ -4672,7 +4672,7 @@ const VerticalScroll = ({
         marginLeft: rtl ? void 0 : "-1rem",
         pointerEvents: isChangeInProgress ? "none" : void 0
       },
-      className: styles$k.scroll,
+      className: styles$l.scroll,
       onScroll,
       ref: verticalScrollbarRef,
       children: /* @__PURE__ */ jsx("div", { style: { height: ganttFullHeight, width: 1 } })
@@ -4750,7 +4750,7 @@ const dragging = "_dragging_16z6n_15";
 const taskListExpander = "_taskListExpander_16z6n_23";
 const taskListEmptyExpander = "_taskListEmptyExpander_16z6n_45";
 const taskName = "_taskName_16z6n_55";
-const styles$j = {
+const styles$k = {
   taskListNameWrapper,
   dragging,
   taskListExpander,
@@ -4827,7 +4827,7 @@ const TitleColumn = ({
     "div",
     {
       "data-testid": `title-table-cell-${name}`,
-      className: `${styles$j.taskListNameWrapper}`,
+      className: `${styles$k.taskListNameWrapper}`,
       style: {
         paddingLeft: depth * nestedTaskNameOffset
       },
@@ -4836,7 +4836,7 @@ const TitleColumn = ({
         /* @__PURE__ */ 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
             },
@@ -4847,7 +4847,7 @@ const TitleColumn = ({
         /* @__PURE__ */ jsxs(
           "div",
           {
-            className: styles$j.taskName,
+            className: styles$k.taskName,
             style: { fontWeight: isProject ? "bold" : "regular" },
             children: [
               isShowTaskNumbers && /* @__PURE__ */ jsxs("b", { children: [
@@ -4902,7 +4902,7 @@ const DependenciesColumn = ({
   return /* @__PURE__ */ jsx(Fragment, { children: dependencies.map(({ name }) => name).join(", ") });
 };
 const button = "_button_l55x0_1";
-const styles$i = {
+const styles$j = {
   button
 };
 const DeleteIcon = (props) => /* @__PURE__ */ jsxs(
@@ -4936,7 +4936,7 @@ const DeleteColumn = ({
         e.stopPropagation();
       },
       onClick,
-      className: styles$i.button,
+      className: styles$j.button,
       children: (icons == null ? void 0 : icons.renderDeleteIcon) ? icons.renderDeleteIcon() : /* @__PURE__ */ jsx(DeleteIcon, {})
     }
   );
@@ -4971,7 +4971,7 @@ const EditColumn = ({
         e.stopPropagation();
       },
       onClick,
-      className: styles$i.button,
+      className: styles$j.button,
       children: (icons == null ? void 0 : icons.renderEditIcon) ? icons.renderEditIcon() : /* @__PURE__ */ jsx(EditIcon, {})
     }
   );
@@ -5012,7 +5012,7 @@ const AddColumn = ({
         e.stopPropagation();
       },
       onClick,
-      className: styles$i.button,
+      className: styles$j.button,
       children: (icons == null ? void 0 : icons.renderAddIcon) ? icons.renderAddIcon() : /* @__PURE__ */ jsx(AddIcon, {})
     }
   );
@@ -5521,7 +5521,7 @@ const ganttTable_HeaderMoveTask = "_ganttTable_HeaderMoveTask_5goa0_27";
 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,
@@ -5570,7 +5570,7 @@ const TaskListTableHeadersDefaultInner = ({
   return /* @__PURE__ */ jsx(
     "div",
     {
-      className: styles$h.ganttTable,
+      className: styles$i.ganttTable,
       style: {
         fontFamily: "var(--gantt-font-family)",
         fontSize: "var(--gantt-font-size)"
@@ -5578,18 +5578,18 @@ const TaskListTableHeadersDefaultInner = ({
       children: /* @__PURE__ */ jsxs(
         "div",
         {
-          className: styles$h.ganttTable_Header,
+          className: styles$i.ganttTable_Header,
           style: {
             height: headerHeight - 2
           },
           children: [
-            canMoveTasks && /* @__PURE__ */ jsx("div", { className: styles$h.ganttTable_HeaderMoveTask }),
+            canMoveTasks && /* @__PURE__ */ jsx("div", { className: styles$i.ganttTable_HeaderMoveTask }),
             columns.map(({ title, width, canResize }, index2) => {
               return /* @__PURE__ */ jsxs(Fragment$1, { children: [
                 index2 > 0 && !!title && /* @__PURE__ */ jsx(
                   "div",
                   {
-                    className: styles$h.ganttTable_HeaderSeparator,
+                    className: styles$i.ganttTable_HeaderSeparator,
                     style: {
                       height: headerHeight * 0.5,
                       marginTop: headerHeight * 0.2
@@ -5600,7 +5600,7 @@ const TaskListTableHeadersDefaultInner = ({
                   "div",
                   {
                     "data-testid": `table-column-header-${title}`,
-                    className: styles$h.ganttTable_HeaderItem,
+                    className: styles$i.ganttTable_HeaderItem,
                     style: {
                       minWidth: width,
                       maxWidth: width,
@@ -5612,7 +5612,7 @@ const TaskListTableHeadersDefaultInner = ({
                         "div",
                         {
                           "data-testid": `table-column-header-resize-handle-${title}`,
-                          className: styles$h.resizer,
+                          className: styles$i.resizer,
                           onMouseDown: (event) => {
                             onColumnResizeStart(index2, event.clientX);
                           },
@@ -9826,7 +9826,7 @@ function normalizeLocalDisabled(localDisabled, globalDisabled) {
 }
 [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) {
@@ -10012,7 +10012,7 @@ const dragIndicator = "_dragIndicator_1yqtr_99";
 const dragIndicatorIcon = "_dragIndicatorIcon_1yqtr_119";
 const isCut = "_isCut_1yqtr_135";
 const taskListCell = "_taskListCell_1yqtr_167";
-const styles$f = {
+const styles$g = {
   taskListTableRow,
   isAfter,
   isBefore,
@@ -10152,18 +10152,18 @@ const TaskListTableRowInner = forwardRef(
       return isSelected ? "var(--gantt-table-selected-task-background-color)" : isEven ? "var(--gantt-table-even-background-color)" : void 0;
     }, [isEven, isOverlay2, isSelected]);
     const rowClassName = 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]);
@@ -10211,12 +10211,12 @@ const TaskListTableRowInner = forwardRef(
         },
         onContextMenu,
         children: [
-          task.type !== "project" && task.id !== "no-project-asigned" && !isOverlay2 && moveHandleProps ? /* @__PURE__ */ jsx("div", { className: `${styles$f.dragIndicator}`, ...moveHandleProps, children: /* @__PURE__ */ jsx(DragIndicatorIcon, { className: styles$f.dragIndicatorIcon }) }) : /* @__PURE__ */ jsx("div", {}),
+          task.type !== "project" && task.id !== "no-project-asigned" && !isOverlay2 && moveHandleProps ? /* @__PURE__ */ jsx("div", { className: `${styles$g.dragIndicator}`, ...moveHandleProps, children: /* @__PURE__ */ jsx(DragIndicatorIcon, { className: styles$g.dragIndicatorIcon }) }) : /* @__PURE__ */ jsx("div", {}),
           columns.map(({ id: id2, component: Component, width }, index2) => {
             return /* @__PURE__ */ jsx(
               "div",
               {
-                className: styles$f.taskListCell,
+                className: styles$g.taskListCell,
                 style: {
                   minWidth: width,
                   maxWidth: width,
@@ -10627,7 +10627,7 @@ const TaskListSortableTableDefaultInner = (props) => {
             children: /* @__PURE__ */ jsx(
               "div",
               {
-                className: styles$g.taskListWrapper,
+                className: styles$h.taskListWrapper,
                 style: {
                   fontFamily: "var(--gantt-font-family)",
                   fontSize: "var(--gantt-font-size)"
@@ -10666,7 +10666,7 @@ const TaskListSortableTableDefaultInner = (props) => {
 };
 const TaskListSortableTable = memo(TaskListSortableTableDefaultInner);
 const taskListWrapper = "_taskListWrapper_196te_3";
-const styles$e = {
+const styles$f = {
   taskListWrapper
 };
 const TaskListTableDefaultInner = ({
@@ -10712,7 +10712,7 @@ const TaskListTableDefaultInner = ({
   return /* @__PURE__ */ jsx(
     "div",
     {
-      className: styles$e.taskListWrapper,
+      className: styles$f.taskListWrapper,
       style: {
         fontFamily: "var(--gantt-font-family)",
         fontSize: "var(--gantt-font-size)"
@@ -10730,7 +10730,7 @@ const tableWrapper = "_tableWrapper_yoz76_159";
 const scrollToTop = "_scrollToTop_yoz76_173";
 const scrollToBottom = "_scrollToBottom_yoz76_189";
 const hidden = "_hidden_yoz76_205";
-const styles$d = {
+const styles$e = {
   taskListRoot,
   taskListHorizontalScroll,
   taskListResizer,
@@ -10869,12 +10869,12 @@ const TaskListInner = ({
     ]
   );
   const RenderTaskListTable = canReorderTasks ? TaskListSortableTable : TaskListTable;
-  return /* @__PURE__ */ jsxs("div", { className: styles$d.taskListRoot, ref: taskListRef, children: [
+  return /* @__PURE__ */ jsxs("div", { className: styles$e.taskListRoot, ref: taskListRef, children: [
     /* @__PURE__ */ jsxs(
       "div",
       {
         ref: taskListHorizontalScrollRef,
-        className: styles$d.taskListHorizontalScroll,
+        className: styles$e.taskListHorizontalScroll,
         style: {
           width: tableWidth
         },
@@ -10889,12 +10889,12 @@ const TaskListInner = ({
               canResizeColumns
             }
           ),
-          /* @__PURE__ */ jsxs("div", { className: styles$d.tableWrapper, children: [
+          /* @__PURE__ */ jsxs("div", { className: styles$e.tableWrapper, children: [
             /* @__PURE__ */ jsx(
               "div",
               {
                 ref: taskListContainerRef,
-                className: styles$d.horizontalContainer,
+                className: styles$e.horizontalContainer,
                 style: {
                   height: Math.max(
                     ganttHeight - ((tableBottom == null ? void 0 : tableBottom.height) || 0),
@@ -10956,13 +10956,13 @@ const TaskListInner = ({
             /* @__PURE__ */ jsx(
               "div",
               {
-                className: `${styles$d.scrollToTop} ${!renderedIndexes || renderedIndexes[2] ? styles$d.hidden : ""}`
+                className: `${styles$e.scrollToTop} ${!renderedIndexes || renderedIndexes[2] ? styles$e.hidden : ""}`
               }
             ),
             /* @__PURE__ */ jsx(
               "div",
               {
-                className: `${styles$d.scrollToBottom} ${!renderedIndexes || renderedIndexes[3] ? styles$d.hidden : ""}`
+                className: `${styles$e.scrollToBottom} ${!renderedIndexes || renderedIndexes[3] ? styles$e.hidden : ""}`
               }
             )
           ] }),
@@ -10973,7 +10973,7 @@ const TaskListInner = ({
     /* @__PURE__ */ jsx(
       "div",
       {
-        className: styles$d.taskListResizer,
+        className: styles$e.taskListResizer,
         onMouseDown: (event) => {
           onTableResizeStart(event.clientX);
         },
@@ -10990,7 +10990,7 @@ const TaskListInner = ({
 const TaskList = memo(TaskListInner);
 const ganttToday = "_ganttToday_1oyhk_1";
 const ganttTodayCircle = "_ganttTodayCircle_1oyhk_9";
-const styles$c = {
+const styles$d = {
   ganttToday,
   ganttTodayCircle
 };
@@ -11056,7 +11056,7 @@ const GanttTodayInner = ({
       /* @__PURE__ */ jsx(
         "circle",
         {
-          className: styles$c.ganttTodayCircle,
+          className: styles$d.ganttTodayCircle,
           cx: x + 1,
           cy: 6,
           r: 6,
@@ -11133,7 +11133,7 @@ const GanttTodayInner = ({
       /* @__PURE__ */ jsx(
         "circle",
         {
-          className: styles$c.ganttTodayCircle,
+          className: styles$d.ganttTodayCircle,
           cx: x + 1,
           cy: 6,
           r: 6,
@@ -11176,7 +11176,7 @@ const calendarTopText = "_calendarTopText_15t8b_35";
 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,
@@ -11207,10 +11207,10 @@ const TopPartOfCalendar = ({
         y1: y1Line,
         x2: x1Line,
         y2: y2Line,
-        className: styles$b.calendarTopTick
+        className: styles$c.calendarTopTick
       }
     ),
-    value !== null && /* @__PURE__ */ 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__ */ 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) => {
@@ -11370,7 +11370,7 @@ const Calendar = ({
     [renderTopHeader, dateSetup]
   );
   const renderBottomText = (x, y, key2, text) => {
-    return /* @__PURE__ */ jsx("g", { className: styles$b.calendarBottomText, children: /* @__PURE__ */ jsx(
+    return /* @__PURE__ */ jsx("g", { className: styles$c.calendarBottomText, children: /* @__PURE__ */ jsx(
       "text",
       {
         y,
@@ -11665,7 +11665,7 @@ const Calendar = ({
         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) {
@@ -11680,7 +11680,7 @@ const Calendar = ({
     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);
@@ -11697,7 +11697,7 @@ const Calendar = ({
     "g",
     {
       ref: calendarRef,
-      className: `${styles$b.calendar} calendar`,
+      className: `${styles$c.calendar} calendar`,
       fontSize: "var(--gantt-font-size)",
       fontFamily: "var(--gantt-font-family)",
       children: [
@@ -11708,7 +11708,7 @@ const Calendar = ({
             y: 0,
             width: fullSvgWidth,
             height: headerHeight,
-            className: styles$b.calendarHeader
+            className: styles$c.calendarHeader
           }
         ),
         topValues,
@@ -11727,10 +11727,10 @@ const generateTrianglePoints = (x, y, width, isLeftDirected) => {
     ${x - width},${y - width} 
     ${x - width},${y + width}`;
 };
-const arrow_clickable = "_arrow_clickable_w0fo0_1";
-const mainPath = "_mainPath_w0fo0_11";
-const clickZone = "_clickZone_w0fo0_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
@@ -11753,6 +11753,7 @@ const ArrowInner = (props) => {
     isCritical,
     rtl,
     onArrowDoubleClick = void 0,
+    onArrowClick = void 0,
     fromConnectionIndex = 0,
     fromTotalConnections = 1,
     toConnectionIndex = 0,
@@ -11771,6 +11772,11 @@ const ArrowInner = (props) => {
       onArrowDoubleClick(taskFrom, taskTo);
     }
   }, [taskFrom, taskTo, onArrowDoubleClick]);
+  const handleClick = useCallback(() => {
+    if (onArrowClick) {
+      onArrowClick(taskFrom, taskTo);
+    }
+  }, [taskFrom, taskTo, onArrowClick]);
   const [path, trianglePoints] = useMemo(
     () => drownPathAndTriangle(
       indexFrom,
@@ -11818,19 +11824,29 @@ const ArrowInner = (props) => {
     }
     return "var(--gantt-arrow-color)";
   }, [isCritical]);
-  return /* @__PURE__ */ jsx("g", { fill: color, stroke: color, children: /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ jsx(
     "g",
     {
-      "data-testid": `task-arrow-${targetFrom}-${taskFrom.name}-${targetTo}-${taskTo.name}`,
-      className: `arrow ${styles$a.arrow_clickable}`,
-      onDoubleClick,
-      children: [
-        onArrowDoubleClick && /* @__PURE__ */ jsx("path", { d: path, className: styles$a.clickZone }),
-        /* @__PURE__ */ jsx("path", { className: styles$a.mainPath, d: path }),
-        /* @__PURE__ */ jsx("polygon", { className: "polygon", points: trianglePoints })
-      ]
+      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 })
+          ]
+        }
+      )
     }
-  ) });
+  );
 };
 const Arrow = memo(ArrowInner);
 const roundedPath = (points, radius) => {
@@ -11922,7 +11938,7 @@ const drownPathAndTriangle = (indexForm, fromX1, fromX2, fromY, isTaskFromLeftSi
   return [path, trianglePoints];
 };
 const relationLine = "_relationLine_wh2qy_1";
-const styles$9 = {
+const styles$a = {
   relationLine
 };
 const RelationLine = ({
@@ -11938,7 +11954,7 @@ const RelationLine = ({
       x2,
       y1,
       y2,
-      className: styles$9.relationLine
+      className: styles$a.relationLine
     }
   );
 };
@@ -12161,7 +12177,7 @@ const barHandle = "_barHandle_5jhkr_11";
 const barHandleImportantVisible = "_barHandleImportantVisible_5jhkr_37";
 const barHandleImportantHidden = "_barHandleImportantHidden_5jhkr_47";
 const barBackground = "_barBackground_5jhkr_57";
-const styles$8 = {
+const styles$9 = {
   barWrapper,
   barHandle,
   barHandleImportantVisible,
@@ -12263,7 +12279,7 @@ const BarDisplay = ({
             ry: barCornerRadius,
             rx: barCornerRadius,
             fill: barColor,
-            className: styles$8.barBackground
+            className: styles$9.barBackground
           }
         ),
         showProgress && /* @__PURE__ */ jsx(
@@ -12320,7 +12336,7 @@ const BarDateHandle = ({
 const projectWrapper = "_projectWrapper_1maxt_1";
 const projectBackground = "_projectBackground_1maxt_11";
 const projectTop = "_projectTop_1maxt_21";
-const styles$7 = {
+const styles$8 = {
   projectWrapper,
   projectBackground,
   projectTop
@@ -12401,7 +12417,7 @@ const ProjectDisplay = ({
           startMoveFullTask(firstTouch.clientX);
         }
       },
-      className: styles$7.projectWrapper,
+      className: styles$8.projectWrapper,
       children: [
         /* @__PURE__ */ jsx(
           "rect",
@@ -12413,7 +12429,7 @@ const ProjectDisplay = ({
             height: taskHeight,
             rx: barCornerRadius,
             ry: barCornerRadius,
-            className: styles$7.projectBackground
+            className: styles$8.projectBackground
           }
         ),
         showProgress && /* @__PURE__ */ jsx(
@@ -12438,13 +12454,13 @@ const ProjectDisplay = ({
             height: taskHalfHeight,
             rx: barCornerRadius,
             ry: barCornerRadius,
-            className: styles$7.projectTop
+            className: styles$8.projectTop
           }
         ),
         /* @__PURE__ */ jsx(
           "polygon",
           {
-            className: styles$7.projectTop,
+            className: styles$8.projectTop,
             points: projectLeftTriangle,
             fill: barColor
           }
@@ -12452,7 +12468,7 @@ const ProjectDisplay = ({
         /* @__PURE__ */ jsx(
           "polygon",
           {
-            className: styles$7.projectTop,
+            className: styles$8.projectTop,
             points: projectRightTriangle,
             fill: barColor
           }
@@ -12464,7 +12480,7 @@ const ProjectDisplay = ({
 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
@@ -12484,7 +12500,7 @@ const BarRelationHandleInner = ({
       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
     }
@@ -12497,7 +12513,7 @@ const BarRelationWrapperInner = forwardRef(({ className, children }, ref) => {
     {
       ref,
       tabIndex: 0,
-      className: `${styles$6.barRelationHandleWrapper} ${className || ""}`,
+      className: `${styles$7.barRelationHandleWrapper} ${className || ""}`,
       children
     }
   );
@@ -12638,12 +12654,12 @@ const Bar = (props) => {
     return () => {
     };
   }, []);
-  return /* @__PURE__ */ jsxs(BarRelationWrapper, { ref: rootRef, className: styles$8.barWrapper, children: [
+  return /* @__PURE__ */ jsxs(BarRelationWrapper, { ref: rootRef, className: styles$9.barWrapper, children: [
     task.id !== "no-project-asigned" && renderBarDisplay(),
     ctrlPressed && isDateChangeable(task) && /* @__PURE__ */ 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,
@@ -12656,7 +12672,7 @@ const Bar = (props) => {
     ctrlPressed && isDateChangeable(task) && /* @__PURE__ */ 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,
@@ -12672,7 +12688,7 @@ const Bar = (props) => {
 };
 const milestoneWrapper = "_milestoneWrapper_vcirf_1";
 const milestoneBackground = "_milestoneBackground_vcirf_11";
-const styles$5 = {
+const styles$6 = {
   milestoneWrapper,
   milestoneBackground
 };
@@ -12702,7 +12718,7 @@ const Milestone = ({
     }
     return "var(--gantt-milestone-background-color)";
   }, [isSelected, isCritical]);
-  return /* @__PURE__ */ jsxs(BarRelationWrapper, { className: styles$5.milestoneWrapper, children: [
+  return /* @__PURE__ */ jsxs(BarRelationWrapper, { className: styles$6.milestoneWrapper, children: [
     /* @__PURE__ */ jsx(
       "rect",
       {
@@ -12715,7 +12731,7 @@ const Milestone = ({
         rx: barCornerRadius,
         ry: barCornerRadius,
         transform,
-        className: styles$5.milestoneBackground,
+        className: styles$6.milestoneBackground,
         onMouseDown: (e) => {
           e.stopPropagation();
           onTaskEventStart("move", e.clientX);
@@ -13041,11 +13057,11 @@ const TaskItemInner = (props) => {
 };
 const TaskItem = 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) => {
@@ -13100,7 +13116,7 @@ const BarComparison = (props) => {
             ry: barCornerRadius,
             rx: barCornerRadius,
             fill: barColor,
-            className: styles$3.barComparison
+            className: styles$4.barComparison
           }
         ),
         /* @__PURE__ */ jsx(
@@ -13170,7 +13186,9 @@ const TaskGanttContentInner = (props) => {
     waitCommitTasks,
     viewMode,
     showProgress = true,
-    progressColor
+    progressColor,
+    onArrowClick,
+    selectedArrow
   } = props;
   const renderedHolidays = useMemo(() => {
     const { columnWidth } = distances;
@@ -13300,7 +13318,7 @@ const TaskGanttContentInner = (props) => {
           "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),
@@ -13452,6 +13470,7 @@ const TaskGanttContentInner = (props) => {
                       isCritical: isCritical2,
                       rtl,
                       onArrowDoubleClick,
+                      onArrowClick,
                       fromConnectionIndex: getConnectionIndex(
                         `${source.id}|${sourceTarget}|out`
                       ),
@@ -13536,6 +13555,7 @@ const TaskGanttContentInner = (props) => {
                       isCritical: isCritical2,
                       rtl,
                       onArrowDoubleClick,
+                      onArrowClick,
                       fromConnectionIndex: getConnectionIndex(
                         `${taskId}|${ownTarget}|out`
                       ),
@@ -13633,6 +13653,7 @@ const TaskGanttContentInner = (props) => {
                       isCritical,
                       rtl,
                       onArrowDoubleClick,
+                      onArrowClick,
                       fromConnectionIndex: getConnectionIndex(
                         `${source.id}|${sourceTarget}|out`
                       ),
@@ -13690,10 +13711,81 @@ const TaskGanttContentInner = (props) => {
     isRelationChangeable,
     visibleTasksMirror,
     onArrowDoubleClick,
+    onArrowClick,
     showProgress,
     progressColor
   ]);
-  return /* @__PURE__ */ jsxs("g", { className: "content", children: [
+  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: [
     renderedSelectedTasks,
     /* @__PURE__ */ jsx("g", { children: renderedHolidays }),
     /* @__PURE__ */ jsx(
@@ -13730,7 +13822,7 @@ const ganttVerticalContainer = "_ganttVerticalContainer_1wr55_1";
 const horizontalContainer = "_horizontalContainer_1wr55_73";
 const wrapper = "_wrapper_1wr55_85";
 const calendarDragging = "_calendarDragging_1wr55_109";
-const styles$2 = {
+const styles$3 = {
   ganttVerticalContainer,
   horizontalContainer,
   wrapper,
@@ -13814,7 +13906,7 @@ const TaskGanttInner = (props) => {
         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) {
@@ -13847,7 +13939,7 @@ const TaskGanttInner = (props) => {
       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);
@@ -13863,7 +13955,7 @@ const TaskGanttInner = (props) => {
   return /* @__PURE__ */ jsxs(
     "div",
     {
-      className: styles$2.ganttVerticalContainer,
+      className: styles$3.ganttVerticalContainer,
       ref: verticalGanttContainerRef,
       onScroll: onVerticalScrollbarScrollX,
       dir: "ltr",
@@ -13882,7 +13974,7 @@ const TaskGanttInner = (props) => {
           "div",
           {
             ref: horizontalContainerRef,
-            className: styles$2.horizontalContainer,
+            className: styles$3.horizontalContainer,
             style: containerStyle,
             children: /* @__PURE__ */ jsx("div", { style: gridStyle, children: /* @__PURE__ */ jsxs(
               "svg",
@@ -18374,7 +18466,7 @@ const useContextMenu = (wrapperRef, scrollToTask) => {
 const menuOption = "_menuOption_1c3e3_3";
 const icon = "_icon_1c3e3_81";
 const label = "_label_1c3e3_89";
-const styles$1 = {
+const styles$2 = {
   menuOption,
   icon,
   label
@@ -18468,7 +18560,7 @@ function MenuOption(props) {
         /* @__PURE__ */ jsxs(
           "button",
           {
-            className: styles$1.menuOption,
+            className: styles$2.menuOption,
             "aria-disabled": disabled,
             disabled,
             style: {
@@ -18483,7 +18575,7 @@ function MenuOption(props) {
               /* @__PURE__ */ jsx(
                 "div",
                 {
-                  className: styles$1.icon,
+                  className: styles$2.icon,
                   style: {
                     width: contextMenuIconWidth,
                     color: "var(--gantt-context-menu-text-color)",
@@ -18492,7 +18584,7 @@ function MenuOption(props) {
                   children: icon2
                 }
               ),
-              /* @__PURE__ */ jsx("div", { className: styles$1.label, children: label2 }),
+              /* @__PURE__ */ jsx("div", { className: styles$2.label, children: label2 }),
               children && children.length > 0 && /* @__PURE__ */ jsx(
                 "div",
                 {
@@ -19301,15 +19393,119 @@ const GANTT_EN_LOCALE = {
 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__ */ jsx("div", { className: `${styles.loader} ${loading ? "" : styles.loaderHidden}` });
+  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 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__ */ 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,
+  data,
+  onClose,
+  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",
+      {
+        className: styles.closeButton,
+        onClick: onClose,
+        "aria-label": "Close drawer",
+        children: "×"
+      }
+    ) }),
+    /* @__PURE__ */ jsx("div", { className: styles.drawerContent, children: renderContent ? renderContent(data) : /* @__PURE__ */ jsx(DefaultDrawerContent, { data }) })
+  ] }) });
+};
 const Gantt = (props) => {
   var _a, _b;
   const {
@@ -19355,7 +19551,11 @@ const Gantt = (props) => {
     dataDateLabel = "Data Date",
     showProgress = true,
     progressColor,
-    scrollToTaskId
+    scrollToTaskId,
+    enableDrawer = false,
+    drawerWidth = 300,
+    renderDrawerContent,
+    onArrowClick: onArrowClickProp
   } = props;
   const ganttSVGRef = useRef(null);
   const wrapperRef = useRef(null);
@@ -19372,6 +19572,36 @@ const Gantt = (props) => {
     [theme, rowHeight]
   );
   const [waitCommitTasks, setWaitCommitTasks] = useState(false);
+  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 taskBar = useMemo(() => {
     return mergeDeepObj(
       {},
@@ -20684,7 +20914,10 @@ const Gantt = (props) => {
       visibleTasksMirror,
       viewMode,
       showProgress,
-      progressColor
+      progressColor,
+      onArrowClick: enableDrawer ? handleArrowClickForDrawer : void 0,
+      onClick: enableDrawer ? handleBarClickForDrawer : taskBar.onClick,
+      selectedArrow
     }),
     [
       viewMode,
@@ -20723,7 +20956,11 @@ const Gantt = (props) => {
       changeInProgress == null ? void 0 : changeInProgress.action,
       handleDeleteTasks,
       showProgress,
-      progressColor
+      progressColor,
+      enableDrawer,
+      handleArrowClickForDrawer,
+      handleBarClickForDrawer,
+      selectedArrow
     ]
   );
   const renderTaskListProps = useMemo(
@@ -20792,7 +21029,7 @@ const Gantt = (props) => {
     "div",
     {
       style: cssVars,
-      className: `${styles$2.wrapper} gantt`,
+      className: `${styles$3.wrapper} gantt`,
       onKeyDown: handleKeyDown,
       tabIndex: 0,
       ref: wrapperRef,
@@ -20876,7 +21113,17 @@ const Gantt = (props) => {
             boundaryElement: verticalGanttContainerRef
           }
         ),
-        /* @__PURE__ */ jsx(GanttLoader, { loading: waitCommitTasks })
+        /* @__PURE__ */ jsx(GanttLoader, { loading: waitCommitTasks }),
+        enableDrawer && /* @__PURE__ */ jsx(
+          GanttDrawer,
+          {
+            open: drawerData !== null,
+            width: drawerWidth,
+            data: drawerData,
+            onClose: handleDrawerClose,
+            renderContent: renderDrawerContent
+          }
+        )
       ]
     }
   ) }) });