gantt-task-react-v 1.4.5 → 1.4.7

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,
@@ -4817,7 +4817,7 @@ const TitleColumn = ({
     () => getExpanderSymbol(hasChildren, isClosed, expandIconWidth, icons),
     [hasChildren, isClosed, expandIconWidth, icons]
   );
-  const title = isShowTaskNumbers ? `${indexStr} ${name}` : name;
+  const title2 = isShowTaskNumbers ? `${indexStr} ${name}` : name;
   const onClick = useCallback(() => {
     if (task.type !== "empty") {
       onExpanderClick(task);
@@ -4827,16 +4827,16 @@ const TitleColumn = ({
     "div",
     {
       "data-testid": `title-table-cell-${name}`,
-      className: `${styles$j.taskListNameWrapper}`,
+      className: `${styles$k.taskListNameWrapper}`,
       style: {
         paddingLeft: depth * nestedTaskNameOffset
       },
-      title,
+      title: title2,
       children: [
         /* @__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,52 +5012,52 @@ 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, {})
     }
   );
 };
 function useTaskListColumnsBuilder() {
   const createNameColumn = useCallback(
-    (title, width) => {
+    (title2, width) => {
       return {
         id: "TitleColumn",
         component: TitleColumn,
         width: width || 120,
-        title
+        title: title2
       };
     },
     []
   );
   const createStartDateColumn = useCallback(
-    (title, width) => {
+    (title2, width) => {
       return {
         id: "DateStartColumn",
         component: DateStartColumn,
         width: width || 60,
-        title
+        title: title2
       };
     },
     []
   );
   const createEndDateColumn = useCallback(
-    (title, width) => {
+    (title2, width) => {
       return {
         id: "DateEndColumn",
         component: DateEndColumn,
         width: width || 60,
-        title
+        title: title2
       };
     },
     []
   );
   const createDependenciesColumn = useCallback(
-    (title, width) => {
+    (title2, width) => {
       return {
         id: "DependenciesColumn",
         component: DependenciesColumn,
         width: width || 90,
-        title
+        title: title2
       };
     },
     []
@@ -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 }),
-            columns.map(({ title, width, canResize }, index2) => {
+            canMoveTasks && /* @__PURE__ */ jsx("div", { className: styles$i.ganttTable_HeaderMoveTask }),
+            columns.map(({ title: title2, width, canResize }, index2) => {
               return /* @__PURE__ */ jsxs(Fragment$1, { children: [
-                index2 > 0 && !!title && /* @__PURE__ */ jsx(
+                index2 > 0 && !!title2 && /* @__PURE__ */ jsx(
                   "div",
                   {
-                    className: styles$h.ganttTable_HeaderSeparator,
+                    className: styles$i.ganttTable_HeaderSeparator,
                     style: {
                       height: headerHeight * 0.5,
                       marginTop: headerHeight * 0.2
@@ -5599,20 +5599,20 @@ const TaskListTableHeadersDefaultInner = ({
                 /* @__PURE__ */ jsxs(
                   "div",
                   {
-                    "data-testid": `table-column-header-${title}`,
-                    className: styles$h.ganttTable_HeaderItem,
+                    "data-testid": `table-column-header-${title2}`,
+                    className: styles$i.ganttTable_HeaderItem,
                     style: {
                       minWidth: width,
                       maxWidth: width,
                       ...pinnedStyles[index2]
                     },
                     children: [
-                      title,
-                      canResizeColumns && canResize !== false && !!title && /* @__PURE__ */ jsx(
+                      title2,
+                      canResizeColumns && canResize !== false && !!title2 && /* @__PURE__ */ jsx(
                         "div",
                         {
-                          "data-testid": `table-column-header-resize-handle-${title}`,
-                          className: styles$h.resizer,
+                          "data-testid": `table-column-header-resize-handle-${title2}`,
+                          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,12 +11727,14 @@ const generateTrianglePoints = (x, y, width, isLeftDirected) => {
     ${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_3u3q2_1";
+const mainPath = "_mainPath_3u3q2_11";
+const arrow_active = "_arrow_active_3u3q2_37";
+const clickZone = "_clickZone_3u3q2_81";
+const styles$b = {
   arrow_clickable,
   mainPath,
+  arrow_active,
   clickZone
 };
 const ArrowInner = (props) => {
@@ -11753,6 +11755,8 @@ const ArrowInner = (props) => {
     isCritical,
     rtl,
     onArrowDoubleClick = void 0,
+    onArrowClick = void 0,
+    isActive = false,
     fromConnectionIndex = 0,
     fromTotalConnections = 1,
     toConnectionIndex = 0,
@@ -11771,6 +11775,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,
@@ -11822,12 +11831,13 @@ const ArrowInner = (props) => {
     "g",
     {
       "data-testid": `task-arrow-${targetFrom}-${taskFrom.name}-${targetTo}-${taskTo.name}`,
-      className: `arrow ${styles$a.arrow_clickable}`,
+      className: `arrow ${styles$b.arrow_clickable}${isActive ? ` ${styles$b.arrow_active}` : ""}`,
       onDoubleClick,
+      onClick: handleClick,
       children: [
-        onArrowDoubleClick && /* @__PURE__ */ jsx("path", { d: path, className: styles$a.clickZone }),
-        /* @__PURE__ */ jsx("path", { className: `${styles$a.mainPath} arrowMainPath`, d: path }),
-        /* @__PURE__ */ jsx("polygon", { className: "polygon arrowPolygon", points: trianglePoints })
+        (onArrowDoubleClick || onArrowClick) && /* @__PURE__ */ jsx("path", { d: path, className: styles$b.clickZone }),
+        /* @__PURE__ */ jsx("path", { className: styles$b.mainPath, d: path }),
+        /* @__PURE__ */ jsx("polygon", { className: "polygon", points: trianglePoints })
       ]
     }
   ) });
@@ -11922,7 +11932,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 +11948,7 @@ const RelationLine = ({
       x2,
       y1,
       y2,
-      className: styles$9.relationLine
+      className: styles$a.relationLine
     }
   );
 };
@@ -12161,7 +12171,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 +12273,7 @@ const BarDisplay = ({
             ry: barCornerRadius,
             rx: barCornerRadius,
             fill: barColor,
-            className: styles$8.barBackground
+            className: styles$9.barBackground
           }
         ),
         showProgress && /* @__PURE__ */ jsx(
@@ -12320,7 +12330,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 +12411,7 @@ const ProjectDisplay = ({
           startMoveFullTask(firstTouch.clientX);
         }
       },
-      className: styles$7.projectWrapper,
+      className: styles$8.projectWrapper,
       children: [
         /* @__PURE__ */ jsx(
           "rect",
@@ -12413,7 +12423,7 @@ const ProjectDisplay = ({
             height: taskHeight,
             rx: barCornerRadius,
             ry: barCornerRadius,
-            className: styles$7.projectBackground
+            className: styles$8.projectBackground
           }
         ),
         showProgress && /* @__PURE__ */ jsx(
@@ -12438,13 +12448,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 +12462,7 @@ const ProjectDisplay = ({
         /* @__PURE__ */ jsx(
           "polygon",
           {
-            className: styles$7.projectTop,
+            className: styles$8.projectTop,
             points: projectRightTriangle,
             fill: barColor
           }
@@ -12464,7 +12474,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 +12494,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 +12507,7 @@ const BarRelationWrapperInner = forwardRef(({ className, children }, ref) => {
     {
       ref,
       tabIndex: 0,
-      className: `${styles$6.barRelationHandleWrapper} ${className || ""}`,
+      className: `${styles$7.barRelationHandleWrapper} ${className || ""}`,
       children
     }
   );
@@ -12638,12 +12648,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 +12666,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 +12682,7 @@ const Bar = (props) => {
 };
 const milestoneWrapper = "_milestoneWrapper_vcirf_1";
 const milestoneBackground = "_milestoneBackground_vcirf_11";
-const styles$5 = {
+const styles$6 = {
   milestoneWrapper,
   milestoneBackground
 };
@@ -12702,7 +12712,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 +12725,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 +13051,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 +13110,7 @@ const BarComparison = (props) => {
             ry: barCornerRadius,
             rx: barCornerRadius,
             fill: barColor,
-            className: styles$3.barComparison
+            className: styles$4.barComparison
           }
         ),
         /* @__PURE__ */ jsx(
@@ -13149,6 +13159,8 @@ const TaskGanttContentInner = (props) => {
     onTaskBarDragStart,
     mapGlobalRowIndexToTask,
     onArrowDoubleClick,
+    onArrowClick,
+    activeArrowKey,
     onDoubleClick,
     onClick,
     renderedRowIndexes,
@@ -13203,13 +13215,6 @@ const TaskGanttContentInner = (props) => {
     getDate,
     startColumnIndex
   ]);
-  const [hoveredTaskId, setHoveredTaskId] = useState(null);
-  const handleTaskHover = useCallback((taskId) => {
-    setHoveredTaskId(taskId);
-  }, []);
-  const handleTaskLeave = useCallback(() => {
-    setHoveredTaskId(null);
-  }, []);
   const [renderedTasks, renderedArrows, renderedSelectedTasks] = useMemo(() => {
     if (!renderedRowIndexes) {
       return [null, null, null];
@@ -13307,13 +13312,11 @@ 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),
             height: fullRowHeight,
-            onMouseEnter: () => handleTaskHover(task.id),
-            onMouseLeave: handleTaskLeave,
             children: /* @__PURE__ */ jsx(
               TaskItem,
               {
@@ -13442,8 +13445,6 @@ const TaskGanttContentInner = (props) => {
                   y: containerY,
                   width: safeArrowContainerWidth,
                   height: containerHeight,
-                  "data-from-id": source.id,
-                  "data-to-id": taskId,
                   children: /* @__PURE__ */ jsx(
                     Arrow,
                     {
@@ -13463,6 +13464,8 @@ const TaskGanttContentInner = (props) => {
                       isCritical: isCritical2,
                       rtl,
                       onArrowDoubleClick,
+                      onArrowClick,
+                      isActive: activeArrowKey === `${source.id}|${taskId}`,
                       fromConnectionIndex: getConnectionIndex(
                         `${source.id}|${sourceTarget}|out`
                       ),
@@ -13528,8 +13531,6 @@ const TaskGanttContentInner = (props) => {
                   y: containerY,
                   width: safeArrowContainerWidth,
                   height: containerHeight,
-                  "data-from-id": taskId,
-                  "data-to-id": dependent.id,
                   children: /* @__PURE__ */ jsx(
                     Arrow,
                     {
@@ -13549,6 +13550,8 @@ const TaskGanttContentInner = (props) => {
                       isCritical: isCritical2,
                       rtl,
                       onArrowDoubleClick,
+                      onArrowClick,
+                      isActive: activeArrowKey === `${taskId}|${dependent.id}`,
                       fromConnectionIndex: getConnectionIndex(
                         `${taskId}|${ownTarget}|out`
                       ),
@@ -13627,8 +13630,6 @@ const TaskGanttContentInner = (props) => {
                   y: containerY,
                   width: safeCW,
                   height: containerHeight,
-                  "data-from-id": source.id,
-                  "data-to-id": taskId,
                   children: /* @__PURE__ */ jsx(
                     Arrow,
                     {
@@ -13648,6 +13649,8 @@ const TaskGanttContentInner = (props) => {
                       isCritical,
                       rtl,
                       onArrowDoubleClick,
+                      onArrowClick,
+                      isActive: activeArrowKey === `${source.id}|${taskId}`,
                       fromConnectionIndex: getConnectionIndex(
                         `${source.id}|${sourceTarget}|out`
                       ),
@@ -13705,36 +13708,12 @@ const TaskGanttContentInner = (props) => {
     isRelationChangeable,
     visibleTasksMirror,
     onArrowDoubleClick,
+    onArrowClick,
+    activeArrowKey,
     showProgress,
-    progressColor,
-    handleTaskHover,
-    handleTaskLeave
+    progressColor
   ]);
-  const arrowHighlightStyle = useMemo(() => {
-    if (!hoveredTaskId)
-      return null;
-    const safeId = CSS.escape(hoveredTaskId);
-    return /* @__PURE__ */ 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__ */ jsxs("g", { className: "content", children: [
-    arrowHighlightStyle,
     renderedSelectedTasks,
     /* @__PURE__ */ jsx("g", { children: renderedHolidays }),
     /* @__PURE__ */ jsx(
@@ -13771,7 +13750,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,
@@ -13855,7 +13834,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) {
@@ -13888,7 +13867,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);
@@ -13904,7 +13883,7 @@ const TaskGanttInner = (props) => {
   return /* @__PURE__ */ jsxs(
     "div",
     {
-      className: styles$2.ganttVerticalContainer,
+      className: styles$3.ganttVerticalContainer,
       ref: verticalGanttContainerRef,
       onScroll: onVerticalScrollbarScrollX,
       dir: "ltr",
@@ -13923,7 +13902,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",
@@ -16290,13 +16269,13 @@ function getWindowScrollBarX(element) {
 function getDocumentRect(element) {
   const html = getDocumentElement(element);
   const scroll2 = getNodeScroll(element);
-  const body = element.ownerDocument.body;
-  const width = max(html.scrollWidth, html.clientWidth, body.scrollWidth, body.clientWidth);
-  const height = max(html.scrollHeight, html.clientHeight, body.scrollHeight, body.clientHeight);
+  const body2 = element.ownerDocument.body;
+  const width = max(html.scrollWidth, html.clientWidth, body2.scrollWidth, body2.clientWidth);
+  const height = max(html.scrollHeight, html.clientHeight, body2.scrollHeight, body2.clientHeight);
   let x = -scroll2.scrollLeft + getWindowScrollBarX(element);
   const y = -scroll2.scrollTop;
-  if (getComputedStyle$1(body).direction === "rtl") {
-    x += max(html.clientWidth, body.clientWidth) - width;
+  if (getComputedStyle$1(body2).direction === "rtl") {
+    x += max(html.clientWidth, body2.clientWidth) - width;
   }
   return {
     width,
@@ -18415,7 +18394,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
@@ -18509,7 +18488,7 @@ function MenuOption(props) {
         /* @__PURE__ */ jsxs(
           "button",
           {
-            className: styles$1.menuOption,
+            className: styles$2.menuOption,
             "aria-disabled": disabled,
             disabled,
             style: {
@@ -18524,7 +18503,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)",
@@ -18533,7 +18512,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",
                 {
@@ -19342,15 +19321,81 @@ 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 overlay = "_overlay_1rnqn_1";
+const drawer = "_drawer_1rnqn_19";
+const drawer_open = "_drawer_open_1rnqn_51";
+const header = "_header_1rnqn_59";
+const title = "_title_1rnqn_77";
+const closeButton = "_closeButton_1rnqn_97";
+const body = "_body_1rnqn_131";
+const styles = {
+  overlay,
+  drawer,
+  drawer_open,
+  header,
+  title,
+  closeButton,
+  body
+};
+const GanttDrawerInner = ({
+  data,
+  width,
+  onClose,
+  renderContent
+}) => {
+  const handleOverlayClick = useCallback(
+    (e) => {
+      e.stopPropagation();
+      onClose();
+    },
+    [onClose]
+  );
+  const title2 = (data == null ? void 0 : data.type) === "task" ? data.task.name : (data == null ? void 0 : data.type) === "arrow" ? `${data.taskFrom.name} → ${data.taskTo.name}` : "";
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    data && /* @__PURE__ */ jsx("div", { className: styles.overlay, onClick: handleOverlayClick }),
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: `${styles.drawer}${data ? ` ${styles.drawer_open}` : ""}`,
+        style: { width },
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: styles.header, children: [
+            /* @__PURE__ */ jsx("span", { className: styles.title, children: title2 }),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                className: styles.closeButton,
+                onClick: onClose,
+                "aria-label": "Close drawer",
+                type: "button",
+                children: /* @__PURE__ */ jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", children: /* @__PURE__ */ jsx(
+                  "path",
+                  {
+                    d: "M12 4L4 12M4 4l8 8",
+                    stroke: "currentColor",
+                    strokeWidth: "1.5",
+                    strokeLinecap: "round"
+                  }
+                ) })
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: styles.body, children: data && renderContent ? renderContent(data) : null })
+        ]
+      }
+    )
+  ] });
+};
+const GanttDrawer = memo(GanttDrawerInner);
 const Gantt = (props) => {
   var _a, _b;
   const {
@@ -19396,7 +19441,8 @@ const Gantt = (props) => {
     dataDateLabel = "Data Date",
     showProgress = true,
     progressColor,
-    scrollToTaskId
+    scrollToTaskId,
+    drawer: drawerProps
   } = props;
   const ganttSVGRef = useRef(null);
   const wrapperRef = useRef(null);
@@ -19413,6 +19459,11 @@ const Gantt = (props) => {
     [theme, rowHeight]
   );
   const [waitCommitTasks, setWaitCommitTasks] = useState(false);
+  const enableDrawer = (drawerProps == null ? void 0 : drawerProps.enableDrawer) ?? false;
+  const drawerWidth = (drawerProps == null ? void 0 : drawerProps.drawerWidth) ?? 360;
+  const renderDrawerContent = drawerProps == null ? void 0 : drawerProps.renderDrawerContent;
+  const [drawerData, setDrawerData] = useState(null);
+  const [activeArrowKey, setActiveArrowKey] = useState(null);
   const taskBar = useMemo(() => {
     return mergeDeepObj(
       {},
@@ -20502,6 +20553,34 @@ const Gantt = (props) => {
     },
     [mapTaskToGlobalIndex, taskBar, handleCommitInternal, sortedTasks]
   );
+  const onArrowClick = useCallback(
+    (taskFrom, taskTo) => {
+      if (enableDrawer) {
+        setActiveArrowKey(`${taskFrom.id}|${taskTo.id}`);
+        setDrawerData({ type: "arrow", taskFrom, taskTo });
+      }
+      if (taskBar.onArrowClick) {
+        taskBar.onArrowClick(taskFrom, taskTo);
+      }
+    },
+    [enableDrawer, taskBar]
+  );
+  const handleTaskClick = useCallback(
+    (task, _event) => {
+      if (enableDrawer) {
+        setActiveArrowKey(null);
+        setDrawerData({ type: "task", task });
+      }
+      if (taskBar.onClick) {
+        taskBar.onClick(task);
+      }
+    },
+    [enableDrawer, taskBar]
+  );
+  const handleDrawerClose = useCallback(() => {
+    setDrawerData(null);
+    setActiveArrowKey(null);
+  }, []);
   const handleAction = useHandleAction({
     checkTaskIdExists,
     childTasksMap,
@@ -20688,6 +20767,7 @@ const Gantt = (props) => {
   const renderTaskBarProps = useMemo(
     () => ({
       ...taskBar,
+      onClick: enableDrawer ? handleTaskClick : taskBar.onClick,
       taskBarMovingAction: (task) => {
         var _a2;
         return task.id === ((_a2 = changeInProgress == null ? void 0 : changeInProgress.changedTask) == null ? void 0 : _a2.id) ? changeInProgress.action : null;
@@ -20714,6 +20794,8 @@ const Gantt = (props) => {
       onTooltipTask: onChangeTooltipTask,
       mapGlobalRowIndexToTask,
       onArrowDoubleClick,
+      onArrowClick: enableDrawer ? onArrowClick : taskBar.onArrowClick,
+      activeArrowKey,
       renderedRowIndexes,
       rtl,
       selectTaskOnMouseDown,
@@ -20751,6 +20833,10 @@ const Gantt = (props) => {
       onChangeTooltipTask,
       mapGlobalRowIndexToTask,
       onArrowDoubleClick,
+      onArrowClick,
+      activeArrowKey,
+      enableDrawer,
+      handleTaskClick,
       renderedRowIndexes,
       rtl,
       selectTaskOnMouseDown,
@@ -20833,7 +20919,7 @@ const Gantt = (props) => {
     "div",
     {
       style: cssVars,
-      className: `${styles$2.wrapper} gantt`,
+      className: `${styles$3.wrapper} gantt`,
       onKeyDown: handleKeyDown,
       tabIndex: 0,
       ref: wrapperRef,
@@ -20917,7 +21003,16 @@ const Gantt = (props) => {
             boundaryElement: verticalGanttContainerRef
           }
         ),
-        /* @__PURE__ */ jsx(GanttLoader, { loading: waitCommitTasks })
+        /* @__PURE__ */ jsx(GanttLoader, { loading: waitCommitTasks }),
+        enableDrawer && /* @__PURE__ */ jsx(
+          GanttDrawer,
+          {
+            data: drawerData,
+            width: drawerWidth,
+            onClose: handleDrawerClose,
+            renderContent: renderDrawerContent
+          }
+        )
       ]
     }
   ) }) });