gantt-task-react-v 1.4.7 → 1.4.9

package/dist/components/gantt/task-gantt-content.d.ts

@@ -24,6 +24,7 @@ export interface TaskGanttContentProps extends GanttTaskBarActions {
     onArrowDoubleClick: (taskFrom: Task, taskTo: Task) => void;
     onArrowClick?: (taskFrom: Task, taskTo: Task) => void;
     activeArrowKey?: string | null;
+    activeTaskId?: string | null;
     onClick?: (task: Task, event: React.MouseEvent<SVGElement>) => void;
     onDoubleClick?: (task: Task) => void;
     renderedRowIndexes: OptimizedListParams | null;

package/dist/components/other/gantt-drawer.d.ts

@@ -4,6 +4,7 @@ interface GanttDrawerInternalProps {
     data: GanttDrawerData | null;
     width: number;
     onClose: () => void;
+    onGoToTask?: (taskId: string) => void;
     renderContent?: RenderDrawerContent;
 }
 export declare const GanttDrawer: React.NamedExoticComponent<GanttDrawerInternalProps>;

package/dist/components/task-list/column-visibility-toggle/index.d.ts

@@ -0,0 +1,8 @@
+import React from "react";
+import { Column } from "../../../types";
+interface ColumnVisibilityToggleProps {
+    allColumns: readonly Column[];
+    onColumnVisibilityChange?: (columnId: string, hidden: boolean) => void;
+}
+export declare const ColumnVisibilityToggle: React.NamedExoticComponent<ColumnVisibilityToggleProps>;
+export {};

package/dist/components/task-list/index.d.ts

@@ -1,6 +1,6 @@
 import type { MouseEvent, RefObject } from "react";
 import React from "react";
-import { AllowReorderTask, ChildByLevelMap, Column, DateSetup, DependencyMap, Distances, GanttRenderIconsProps, MapTaskToNestedIndex, OnResizeColumn, Task, RenderTask, TableRenderBottomProps } from "../../types";
+import { AllowReorderTask, ChildByLevelMap, Column, DateSetup, DependencyMap, Distances, GanttRenderIconsProps, MapTaskToNestedIndex, OnColumnVisibilityChange, OnResizeColumn, Task, RenderTask, TableRenderBottomProps } from "../../types";
 export type TaskListProps = {
     ganttRef: RefObject<HTMLDivElement>;
     /** Ref to the horizontal scroll wrapper (used for containing popups) */
@@ -39,6 +39,8 @@ export type TaskListProps = {
     taskListRef: RefObject<HTMLDivElement>;
     tasks: readonly RenderTask[];
     onResizeColumn?: OnResizeColumn;
+    canToggleColumns?: boolean;
+    onColumnVisibilityChange?: OnColumnVisibilityChange;
     tableBottom?: TableRenderBottomProps;
 };
 export declare const TaskList: React.NamedExoticComponent<TaskListProps>;

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$m = {
+const styles$n = {
   tooltipDefaultContainer,
   tooltipDefaultContainerTexts,
   tooltipDefaultContainerParagraph,
@@ -4632,26 +4632,26 @@ const StandardTooltipContent = ({ task }) => {
   return /* @__PURE__ */ jsxs(
     "div",
     {
-      className: styles$m.tooltipDefaultContainer,
+      className: styles$n.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$m.tooltipDefaultContainerTexts, children: [
+        /* @__PURE__ */ jsxs("div", { className: styles$n.tooltipDefaultContainerTexts, children: [
           task.end.getTime() - task.start.getTime() !== 0 && /* @__PURE__ */ jsx(
             "p",
             {
-              className: styles$m.tooltipDefaultContainerParagraph,
+              className: styles$n.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$m.tooltipDefaultContainerParagraph, children: !!task.progress && `${locale.tooltip.progress}: ${task.progress} %` })
+          !!locale.tooltip.progress && /* @__PURE__ */ jsx("p", { className: styles$n.tooltipDefaultContainerParagraph, children: !!task.progress && `${locale.tooltip.progress}: ${task.progress} %` })
         ] })
       ]
     }
   );
 };
 const scroll = "_scroll_hp3qb_1";
-const styles$l = {
+const styles$m = {
   scroll
 };
 const VerticalScroll = ({
@@ -4672,7 +4672,7 @@ const VerticalScroll = ({
         marginLeft: rtl ? void 0 : "-1rem",
         pointerEvents: isChangeInProgress ? "none" : void 0
       },
-      className: styles$l.scroll,
+      className: styles$m.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$k = {
+const styles$l = {
   taskListNameWrapper,
   dragging,
   taskListExpander,
@@ -4827,7 +4827,7 @@ const TitleColumn = ({
     "div",
     {
       "data-testid": `title-table-cell-${name}`,
-      className: `${styles$k.taskListNameWrapper}`,
+      className: `${styles$l.taskListNameWrapper}`,
       style: {
         paddingLeft: depth * nestedTaskNameOffset
       },
@@ -4836,7 +4836,7 @@ const TitleColumn = ({
         /* @__PURE__ */ jsx(
           "div",
           {
-            className: `gantt-expander ${styles$k.taskListExpander} ${!hasChildren ? styles$k.taskListEmptyExpander : ""}`,
+            className: `gantt-expander ${styles$l.taskListExpander} ${!hasChildren ? styles$l.taskListEmptyExpander : ""}`,
             style: {
               left: depth * nestedTaskNameOffset
             },
@@ -4847,7 +4847,7 @@ const TitleColumn = ({
         /* @__PURE__ */ jsxs(
           "div",
           {
-            className: styles$k.taskName,
+            className: styles$l.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$j = {
+const styles$k = {
   button
 };
 const DeleteIcon = (props) => /* @__PURE__ */ jsxs(
@@ -4936,7 +4936,7 @@ const DeleteColumn = ({
         e.stopPropagation();
       },
       onClick,
-      className: styles$j.button,
+      className: styles$k.button,
       children: (icons == null ? void 0 : icons.renderDeleteIcon) ? icons.renderDeleteIcon() : /* @__PURE__ */ jsx(DeleteIcon, {})
     }
   );
@@ -4971,7 +4971,7 @@ const EditColumn = ({
         e.stopPropagation();
       },
       onClick,
-      className: styles$j.button,
+      className: styles$k.button,
       children: (icons == null ? void 0 : icons.renderEditIcon) ? icons.renderEditIcon() : /* @__PURE__ */ jsx(EditIcon, {})
     }
   );
@@ -5012,7 +5012,7 @@ const AddColumn = ({
         e.stopPropagation();
       },
       onClick,
-      className: styles$j.button,
+      className: styles$k.button,
       children: (icons == null ? void 0 : icons.renderAddIcon) ? icons.renderAddIcon() : /* @__PURE__ */ jsx(AddIcon, {})
     }
   );
@@ -5515,6 +5515,131 @@ const useTableListResize = (clientColumns, canMoveTasks, onResizeColumn, ganttRe
     onColumnResizeStart
   ];
 };
+const toggleWrapper = "_toggleWrapper_rjfhl_1";
+const toggleButton = "_toggleButton_rjfhl_15";
+const dropdown = "_dropdown_rjfhl_51";
+const dropdownItem = "_dropdownItem_rjfhl_85";
+const checkbox = "_checkbox_rjfhl_141";
+const columnLabel = "_columnLabel_rjfhl_157";
+const dropdownTitle = "_dropdownTitle_rjfhl_169";
+const divider = "_divider_rjfhl_211";
+const styles$j = {
+  toggleWrapper,
+  toggleButton,
+  dropdown,
+  dropdownItem,
+  checkbox,
+  columnLabel,
+  dropdownTitle,
+  divider
+};
+const ColumnsIcon = ({ className }) => /* @__PURE__ */ jsxs(
+  "svg",
+  {
+    className,
+    width: "16",
+    height: "16",
+    viewBox: "0 0 16 16",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    children: [
+      /* @__PURE__ */ jsx(
+        "path",
+        {
+          d: "M2 3.5h12M2 8h12M2 12.5h12",
+          stroke: "currentColor",
+          strokeWidth: "1.5",
+          strokeLinecap: "round"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "path",
+        {
+          d: "M5 3.5v9M11 3.5v9",
+          stroke: "currentColor",
+          strokeWidth: "1.5",
+          strokeLinecap: "round",
+          strokeDasharray: "1 2"
+        }
+      )
+    ]
+  }
+);
+const ColumnVisibilityToggleInner = ({
+  allColumns,
+  onColumnVisibilityChange
+}) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const wrapperRef = useRef(null);
+  const toggleDropdown = useCallback(() => {
+    setIsOpen((prev) => !prev);
+  }, []);
+  const handleToggle = useCallback(
+    (columnId, currentlyHidden) => {
+      if (onColumnVisibilityChange) {
+        onColumnVisibilityChange(columnId, !currentlyHidden);
+      }
+    },
+    [onColumnVisibilityChange]
+  );
+  useEffect(() => {
+    if (!isOpen)
+      return void 0;
+    const handleClickOutside = (event) => {
+      if (wrapperRef.current && !wrapperRef.current.contains(event.target)) {
+        setIsOpen(false);
+      }
+    };
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+    };
+  }, [isOpen]);
+  const toggleableColumns = allColumns.filter((col) => col.title);
+  if (toggleableColumns.length === 0) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxs("div", { className: styles$j.toggleWrapper, ref: wrapperRef, children: [
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        className: styles$j.toggleButton,
+        onClick: toggleDropdown,
+        title: "Toggle column visibility",
+        type: "button",
+        children: /* @__PURE__ */ jsx(ColumnsIcon, {})
+      }
+    ),
+    isOpen && /* @__PURE__ */ jsxs("div", { className: styles$j.dropdown, children: [
+      /* @__PURE__ */ jsx("div", { className: styles$j.dropdownTitle, children: "Columns" }),
+      /* @__PURE__ */ jsx("div", { className: styles$j.divider }),
+      toggleableColumns.map((column) => {
+        const isVisible = !column.hidden;
+        return /* @__PURE__ */ jsxs(
+          "label",
+          {
+            className: styles$j.dropdownItem,
+            onClick: (e) => e.stopPropagation(),
+            children: [
+              /* @__PURE__ */ jsx(
+                "input",
+                {
+                  type: "checkbox",
+                  className: styles$j.checkbox,
+                  checked: isVisible,
+                  onChange: () => handleToggle(column.id, !!column.hidden)
+                }
+              ),
+              /* @__PURE__ */ jsx("span", { className: styles$j.columnLabel, children: column.title || column.id })
+            ]
+          },
+          column.id
+        );
+      })
+    ] })
+  ] });
+};
+const ColumnVisibilityToggle = memo(ColumnVisibilityToggleInner);
 const ganttTable = "_ganttTable_5goa0_3";
 const ganttTable_Header = "_ganttTable_Header_5goa0_15";
 const ganttTable_HeaderMoveTask = "_ganttTable_HeaderMoveTask_5goa0_27";
@@ -5532,9 +5657,12 @@ const styles$i = {
 const TaskListTableHeadersDefaultInner = ({
   headerHeight,
   columns,
+  allColumns,
   canResizeColumns,
   canMoveTasks,
-  onColumnResizeStart
+  canToggleColumns,
+  onColumnResizeStart,
+  onColumnVisibilityChange
 }) => {
   const pinnedStyles = useMemo(() => {
     const result = {};
@@ -5628,7 +5756,21 @@ const TaskListTableHeadersDefaultInner = ({
                   }
                 )
               ] }, index2);
-            })
+            }),
+            canToggleColumns && /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: styles$i.ganttTable_HeaderItem,
+                style: { minWidth: 28, maxWidth: 28 },
+                children: /* @__PURE__ */ jsx(
+                  ColumnVisibilityToggle,
+                  {
+                    allColumns,
+                    onColumnVisibilityChange
+                  }
+                )
+              }
+            )
           ]
         }
       )
@@ -10787,10 +10929,12 @@ const TaskListInner = ({
   tasks,
   onResizeColumn,
   canReorderTasks,
+  canToggleColumns,
+  onColumnVisibilityChange,
   tableBottom
 }) => {
   const [
-    columns,
+    allColumns,
     taskListWidth,
     tableWidth,
     onTableResizeStart,
@@ -10801,6 +10945,10 @@ const TaskListInner = ({
     onResizeColumn,
     ganttRef
   );
+  const columns = useMemo(
+    () => allColumns.filter((col) => !col.hidden),
+    [allColumns]
+  );
   const renderedIndexes = useOptimizedList(
     taskListContainerRef,
     "scrollTop",
@@ -10885,7 +11033,10 @@ const TaskListInner = ({
               canMoveTasks: canReorderTasks,
               headerHeight: distances.headerHeight,
               columns,
+              allColumns,
+              canToggleColumns: !!canToggleColumns,
               onColumnResizeStart,
+              onColumnVisibilityChange,
               canResizeColumns
             }
           ),
@@ -13161,6 +13312,7 @@ const TaskGanttContentInner = (props) => {
     onArrowDoubleClick,
     onArrowClick,
     activeArrowKey,
+    activeTaskId,
     onDoubleClick,
     onClick,
     renderedRowIndexes,
@@ -13465,7 +13617,7 @@ const TaskGanttContentInner = (props) => {
                       rtl,
                       onArrowDoubleClick,
                       onArrowClick,
-                      isActive: activeArrowKey === `${source.id}|${taskId}`,
+                      isActive: activeArrowKey === `${source.id}|${taskId}` || activeTaskId === source.id || activeTaskId === taskId,
                       fromConnectionIndex: getConnectionIndex(
                         `${source.id}|${sourceTarget}|out`
                       ),
@@ -13551,7 +13703,7 @@ const TaskGanttContentInner = (props) => {
                       rtl,
                       onArrowDoubleClick,
                       onArrowClick,
-                      isActive: activeArrowKey === `${taskId}|${dependent.id}`,
+                      isActive: activeArrowKey === `${taskId}|${dependent.id}` || activeTaskId === taskId || activeTaskId === dependent.id,
                       fromConnectionIndex: getConnectionIndex(
                         `${taskId}|${ownTarget}|out`
                       ),
@@ -13650,7 +13802,7 @@ const TaskGanttContentInner = (props) => {
                       rtl,
                       onArrowDoubleClick,
                       onArrowClick,
-                      isActive: activeArrowKey === `${source.id}|${taskId}`,
+                      isActive: activeArrowKey === `${source.id}|${taskId}` || activeTaskId === source.id || activeTaskId === taskId,
                       fromConnectionIndex: getConnectionIndex(
                         `${source.id}|${sourceTarget}|out`
                       ),
@@ -13710,6 +13862,7 @@ const TaskGanttContentInner = (props) => {
     onArrowDoubleClick,
     onArrowClick,
     activeArrowKey,
+    activeTaskId,
     showProgress,
     progressColor
   ]);
@@ -19330,13 +19483,15 @@ const GanttLoaderInner = ({ loading }) => {
   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 overlay = "_overlay_hyem8_1";
+const drawer = "_drawer_hyem8_19";
+const drawer_open = "_drawer_open_hyem8_51";
+const header = "_header_hyem8_59";
+const title = "_title_hyem8_77";
+const closeButton = "_closeButton_hyem8_97";
+const body = "_body_hyem8_131";
+const goToTaskBar = "_goToTaskBar_hyem8_145";
+const goToTaskButton = "_goToTaskButton_hyem8_159";
 const styles = {
   overlay,
   drawer,
@@ -19344,12 +19499,15 @@ const styles = {
   header,
   title,
   closeButton,
-  body
+  body,
+  goToTaskBar,
+  goToTaskButton
 };
 const GanttDrawerInner = ({
   data,
   width,
   onClose,
+  onGoToTask,
   renderContent
 }) => {
   const handleOverlayClick = useCallback(
@@ -19360,6 +19518,12 @@ const GanttDrawerInner = ({
     [onClose]
   );
   const title2 = (data == null ? void 0 : data.type) === "task" ? data.task.name : (data == null ? void 0 : data.type) === "arrow" ? `${data.taskFrom.name} → ${data.taskTo.name}` : "";
+  const goToTaskIds = [];
+  if ((data == null ? void 0 : data.type) === "task") {
+    goToTaskIds.push(data.task.id);
+  } else if ((data == null ? void 0 : data.type) === "arrow") {
+    goToTaskIds.push(data.taskFrom.id, data.taskTo.id);
+  }
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     data && /* @__PURE__ */ jsx("div", { className: styles.overlay, onClick: handleOverlayClick }),
     /* @__PURE__ */ jsxs(
@@ -19389,7 +19553,78 @@ const GanttDrawerInner = ({
               }
             )
           ] }),
-          /* @__PURE__ */ jsx("div", { className: styles.body, children: data && renderContent ? renderContent(data) : null })
+          /* @__PURE__ */ jsxs("div", { className: styles.body, children: [
+            data && onGoToTask && /* @__PURE__ */ jsxs("div", { className: styles.goToTaskBar, children: [
+              data.type === "task" && /* @__PURE__ */ jsxs(
+                "button",
+                {
+                  className: styles.goToTaskButton,
+                  onClick: () => onGoToTask(data.task.id),
+                  type: "button",
+                  children: [
+                    /* @__PURE__ */ jsx("svg", { width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", children: /* @__PURE__ */ jsx(
+                      "path",
+                      {
+                        d: "M2 7h10M8 3l4 4-4 4",
+                        stroke: "currentColor",
+                        strokeWidth: "1.5",
+                        strokeLinecap: "round",
+                        strokeLinejoin: "round"
+                      }
+                    ) }),
+                    "Go to Task"
+                  ]
+                }
+              ),
+              data.type === "arrow" && /* @__PURE__ */ jsxs(Fragment, { children: [
+                /* @__PURE__ */ jsxs(
+                  "button",
+                  {
+                    className: styles.goToTaskButton,
+                    onClick: () => onGoToTask(data.taskFrom.id),
+                    type: "button",
+                    children: [
+                      /* @__PURE__ */ jsx("svg", { width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", children: /* @__PURE__ */ jsx(
+                        "path",
+                        {
+                          d: "M2 7h10M8 3l4 4-4 4",
+                          stroke: "currentColor",
+                          strokeWidth: "1.5",
+                          strokeLinecap: "round",
+                          strokeLinejoin: "round"
+                        }
+                      ) }),
+                      "Go to ",
+                      data.taskFrom.name
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ jsxs(
+                  "button",
+                  {
+                    className: styles.goToTaskButton,
+                    onClick: () => onGoToTask(data.taskTo.id),
+                    type: "button",
+                    children: [
+                      /* @__PURE__ */ jsx("svg", { width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", children: /* @__PURE__ */ jsx(
+                        "path",
+                        {
+                          d: "M2 7h10M8 3l4 4-4 4",
+                          stroke: "currentColor",
+                          strokeWidth: "1.5",
+                          strokeLinecap: "round",
+                          strokeLinejoin: "round"
+                        }
+                      ) }),
+                      "Go to ",
+                      data.taskTo.name
+                    ]
+                  }
+                )
+              ] })
+            ] }),
+            data && renderContent ? renderContent(data) : null
+          ] })
         ]
       }
     )
@@ -19464,6 +19699,7 @@ const Gantt = (props) => {
   const renderDrawerContent = drawerProps == null ? void 0 : drawerProps.renderDrawerContent;
   const [drawerData, setDrawerData] = useState(null);
   const [activeArrowKey, setActiveArrowKey] = useState(null);
+  const [activeTaskId, setActiveTaskId] = useState(null);
   const taskBar = useMemo(() => {
     return mergeDeepObj(
       {},
@@ -20557,6 +20793,7 @@ const Gantt = (props) => {
     (taskFrom, taskTo) => {
       if (enableDrawer) {
         setActiveArrowKey(`${taskFrom.id}|${taskTo.id}`);
+        setActiveTaskId(null);
         setDrawerData({ type: "arrow", taskFrom, taskTo });
       }
       if (taskBar.onArrowClick) {
@@ -20569,6 +20806,7 @@ const Gantt = (props) => {
     (task, _event) => {
       if (enableDrawer) {
         setActiveArrowKey(null);
+        setActiveTaskId(task.id);
         setDrawerData({ type: "task", task });
       }
       if (taskBar.onClick) {
@@ -20580,7 +20818,51 @@ const Gantt = (props) => {
   const handleDrawerClose = useCallback(() => {
     setDrawerData(null);
     setActiveArrowKey(null);
+    setActiveTaskId(null);
   }, []);
+  const handleGoToTask = useCallback(
+    (taskId) => {
+      for (const [comparisonLevel, levelMap] of tasksMap) {
+        const task = levelMap.get(taskId);
+        if (!task || task.type === "empty")
+          continue;
+        const { x1 } = getTaskCoordinates(task, mapTaskToCoordinates);
+        setScrollXProgrammatically(Math.max(0, x1 - 100));
+        const rowIndexMap = taskToRowIndexMap.get(comparisonLevel);
+        if (rowIndexMap) {
+          const rowIndex = rowIndexMap.get(taskId);
+          if (typeof rowIndex === "number") {
+            const targetScrollY = rowIndex * fullRowHeight - ganttHeight / 2 + fullRowHeight / 2;
+            setScrollYProgrammatically(
+              Math.max(
+                0,
+                Math.min(targetScrollY, ganttFullHeight - ganttHeight)
+              )
+            );
+          }
+        }
+        selectTask(taskId);
+        if (onSelectTaskIds) {
+          onSelectTaskIds([taskId]);
+        }
+        break;
+      }
+      handleDrawerClose();
+    },
+    [
+      tasksMap,
+      mapTaskToCoordinates,
+      taskToRowIndexMap,
+      fullRowHeight,
+      ganttHeight,
+      ganttFullHeight,
+      setScrollXProgrammatically,
+      setScrollYProgrammatically,
+      selectTask,
+      onSelectTaskIds,
+      handleDrawerClose
+    ]
+  );
   const handleAction = useHandleAction({
     checkTaskIdExists,
     childTasksMap,
@@ -20796,6 +21078,7 @@ const Gantt = (props) => {
       onArrowDoubleClick,
       onArrowClick: enableDrawer ? onArrowClick : taskBar.onArrowClick,
       activeArrowKey,
+      activeTaskId,
       renderedRowIndexes,
       rtl,
       selectTaskOnMouseDown,
@@ -20835,6 +21118,7 @@ const Gantt = (props) => {
       onArrowDoubleClick,
       onArrowClick,
       activeArrowKey,
+      activeTaskId,
       enableDrawer,
       handleTaskClick,
       renderedRowIndexes,
@@ -21010,6 +21294,7 @@ const Gantt = (props) => {
             data: drawerData,
             width: drawerWidth,
             onClose: handleDrawerClose,
+            onGoToTask: handleGoToTask,
             renderContent: renderDrawerContent
           }
         )
@@ -21019,6 +21304,7 @@ const Gantt = (props) => {
 };
 export {
   AddColumn,
+  ColumnVisibilityToggle,
   DateEndColumn,
   DateStartColumn,
   DeleteColumn,