gantt-task-react-v 1.4.7 → 1.4.9

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

@@ -4606,7 +4606,7 @@
   const tooltipDefaultContainerParagraph = "_tooltipDefaultContainerParagraph_16o9s_31";
   const tooltipDetailsContainer = "_tooltipDetailsContainer_16o9s_47";
   const tooltipDetailsContainerHidden = "_tooltipDetailsContainerHidden_16o9s_71";
-  const styles$m = {
+  const styles$n = {
     tooltipDefaultContainer,
     tooltipDefaultContainerTexts,
     tooltipDefaultContainerParagraph,
@@ -4649,26 +4649,26 @@
     return /* @__PURE__ */ jsxRuntime.jsxs(
       "div",
       {
-        className: styles$m.tooltipDefaultContainer,
+        className: styles$n.tooltipDefaultContainer,
         style: { fontSize: "var(--gantt-font-size)" },
         children: [
           /* @__PURE__ */ jsxRuntime.jsx("b", { style: { fontSize: "var(--gantt-font-size)" }, children: `${task.name}: ${task.start.getDate()}-${task.start.getMonth() + 1}-${task.start.getFullYear()} - ${task.end.getDate()}-${task.end.getMonth() + 1}-${task.end.getFullYear()}` }),
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles$m.tooltipDefaultContainerTexts, children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles$n.tooltipDefaultContainerTexts, children: [
             task.end.getTime() - task.start.getTime() !== 0 && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("p", { className: styles$m.tooltipDefaultContainerParagraph, children: !!task.progress && `${locale.tooltip.progress}: ${task.progress} %` })
+            !!locale.tooltip.progress && /* @__PURE__ */ jsxRuntime.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 = ({
@@ -4689,7 +4689,7 @@
           marginLeft: rtl ? void 0 : "-1rem",
           pointerEvents: isChangeInProgress ? "none" : void 0
         },
-        className: styles$l.scroll,
+        className: styles$m.scroll,
         onScroll,
         ref: verticalScrollbarRef,
         children: /* @__PURE__ */ jsxRuntime.jsx("div", { style: { height: ganttFullHeight, width: 1 } })
@@ -4767,7 +4767,7 @@
   const taskListExpander = "_taskListExpander_16z6n_23";
   const taskListEmptyExpander = "_taskListEmptyExpander_16z6n_45";
   const taskName = "_taskName_16z6n_55";
-  const styles$k = {
+  const styles$l = {
     taskListNameWrapper,
     dragging,
     taskListExpander,
@@ -4844,7 +4844,7 @@
       "div",
       {
         "data-testid": `title-table-cell-${name}`,
-        className: `${styles$k.taskListNameWrapper}`,
+        className: `${styles$l.taskListNameWrapper}`,
         style: {
           paddingLeft: depth * nestedTaskNameOffset
         },
@@ -4853,7 +4853,7 @@
           /* @__PURE__ */ jsxRuntime.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
               },
@@ -4864,7 +4864,7 @@
           /* @__PURE__ */ jsxRuntime.jsxs(
             "div",
             {
-              className: styles$k.taskName,
+              className: styles$l.taskName,
               style: { fontWeight: isProject ? "bold" : "regular" },
               children: [
                 isShowTaskNumbers && /* @__PURE__ */ jsxRuntime.jsxs("b", { children: [
@@ -4919,7 +4919,7 @@
     return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: dependencies.map(({ name }) => name).join(", ") });
   };
   const button = "_button_l55x0_1";
-  const styles$j = {
+  const styles$k = {
     button
   };
   const DeleteIcon = (props) => /* @__PURE__ */ jsxRuntime.jsxs(
@@ -4953,7 +4953,7 @@
           e.stopPropagation();
         },
         onClick,
-        className: styles$j.button,
+        className: styles$k.button,
         children: (icons == null ? void 0 : icons.renderDeleteIcon) ? icons.renderDeleteIcon() : /* @__PURE__ */ jsxRuntime.jsx(DeleteIcon, {})
       }
     );
@@ -4988,7 +4988,7 @@
           e.stopPropagation();
         },
         onClick,
-        className: styles$j.button,
+        className: styles$k.button,
         children: (icons == null ? void 0 : icons.renderEditIcon) ? icons.renderEditIcon() : /* @__PURE__ */ jsxRuntime.jsx(EditIcon, {})
       }
     );
@@ -5029,7 +5029,7 @@
           e.stopPropagation();
         },
         onClick,
-        className: styles$j.button,
+        className: styles$k.button,
         children: (icons == null ? void 0 : icons.renderAddIcon) ? icons.renderAddIcon() : /* @__PURE__ */ jsxRuntime.jsx(AddIcon, {})
       }
     );
@@ -5532,6 +5532,131 @@
       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__ */ jsxRuntime.jsxs(
+    "svg",
+    {
+      className,
+      width: "16",
+      height: "16",
+      viewBox: "0 0 16 16",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "path",
+          {
+            d: "M2 3.5h12M2 8h12M2 12.5h12",
+            stroke: "currentColor",
+            strokeWidth: "1.5",
+            strokeLinecap: "round"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.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] = React.useState(false);
+    const wrapperRef = React.useRef(null);
+    const toggleDropdown = React.useCallback(() => {
+      setIsOpen((prev) => !prev);
+    }, []);
+    const handleToggle = React.useCallback(
+      (columnId, currentlyHidden) => {
+        if (onColumnVisibilityChange) {
+          onColumnVisibilityChange(columnId, !currentlyHidden);
+        }
+      },
+      [onColumnVisibilityChange]
+    );
+    React.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__ */ jsxRuntime.jsxs("div", { className: styles$j.toggleWrapper, ref: wrapperRef, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          className: styles$j.toggleButton,
+          onClick: toggleDropdown,
+          title: "Toggle column visibility",
+          type: "button",
+          children: /* @__PURE__ */ jsxRuntime.jsx(ColumnsIcon, {})
+        }
+      ),
+      isOpen && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles$j.dropdown, children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles$j.dropdownTitle, children: "Columns" }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles$j.divider }),
+        toggleableColumns.map((column) => {
+          const isVisible = !column.hidden;
+          return /* @__PURE__ */ jsxRuntime.jsxs(
+            "label",
+            {
+              className: styles$j.dropdownItem,
+              onClick: (e) => e.stopPropagation(),
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "input",
+                  {
+                    type: "checkbox",
+                    className: styles$j.checkbox,
+                    checked: isVisible,
+                    onChange: () => handleToggle(column.id, !!column.hidden)
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles$j.columnLabel, children: column.title || column.id })
+              ]
+            },
+            column.id
+          );
+        })
+      ] })
+    ] });
+  };
+  const ColumnVisibilityToggle = React.memo(ColumnVisibilityToggleInner);
   const ganttTable = "_ganttTable_5goa0_3";
   const ganttTable_Header = "_ganttTable_Header_5goa0_15";
   const ganttTable_HeaderMoveTask = "_ganttTable_HeaderMoveTask_5goa0_27";
@@ -5549,9 +5674,12 @@
   const TaskListTableHeadersDefaultInner = ({
     headerHeight,
     columns,
+    allColumns,
     canResizeColumns,
     canMoveTasks,
-    onColumnResizeStart
+    canToggleColumns,
+    onColumnResizeStart,
+    onColumnVisibilityChange
   }) => {
     const pinnedStyles = React.useMemo(() => {
       const result = {};
@@ -5645,7 +5773,21 @@
                     }
                   )
                 ] }, index2);
-              })
+              }),
+              canToggleColumns && /* @__PURE__ */ jsxRuntime.jsx(
+                "div",
+                {
+                  className: styles$i.ganttTable_HeaderItem,
+                  style: { minWidth: 28, maxWidth: 28 },
+                  children: /* @__PURE__ */ jsxRuntime.jsx(
+                    ColumnVisibilityToggle,
+                    {
+                      allColumns,
+                      onColumnVisibilityChange
+                    }
+                  )
+                }
+              )
             ]
           }
         )
@@ -10804,10 +10946,12 @@
     tasks,
     onResizeColumn,
     canReorderTasks,
+    canToggleColumns,
+    onColumnVisibilityChange,
     tableBottom
   }) => {
     const [
-      columns,
+      allColumns,
       taskListWidth,
       tableWidth,
       onTableResizeStart,
@@ -10818,6 +10962,10 @@
       onResizeColumn,
       ganttRef
     );
+    const columns = React.useMemo(
+      () => allColumns.filter((col) => !col.hidden),
+      [allColumns]
+    );
     const renderedIndexes = useOptimizedList(
       taskListContainerRef,
       "scrollTop",
@@ -10902,7 +11050,10 @@
                 canMoveTasks: canReorderTasks,
                 headerHeight: distances.headerHeight,
                 columns,
+                allColumns,
+                canToggleColumns: !!canToggleColumns,
                 onColumnResizeStart,
+                onColumnVisibilityChange,
                 canResizeColumns
               }
             ),
@@ -13178,6 +13329,7 @@
       onArrowDoubleClick,
       onArrowClick,
       activeArrowKey,
+      activeTaskId,
       onDoubleClick,
       onClick,
       renderedRowIndexes,
@@ -13482,7 +13634,7 @@
                         rtl,
                         onArrowDoubleClick,
                         onArrowClick,
-                        isActive: activeArrowKey === `${source.id}|${taskId}`,
+                        isActive: activeArrowKey === `${source.id}|${taskId}` || activeTaskId === source.id || activeTaskId === taskId,
                         fromConnectionIndex: getConnectionIndex(
                           `${source.id}|${sourceTarget}|out`
                         ),
@@ -13568,7 +13720,7 @@
                         rtl,
                         onArrowDoubleClick,
                         onArrowClick,
-                        isActive: activeArrowKey === `${taskId}|${dependent.id}`,
+                        isActive: activeArrowKey === `${taskId}|${dependent.id}` || activeTaskId === taskId || activeTaskId === dependent.id,
                         fromConnectionIndex: getConnectionIndex(
                           `${taskId}|${ownTarget}|out`
                         ),
@@ -13667,7 +13819,7 @@
                         rtl,
                         onArrowDoubleClick,
                         onArrowClick,
-                        isActive: activeArrowKey === `${source.id}|${taskId}`,
+                        isActive: activeArrowKey === `${source.id}|${taskId}` || activeTaskId === source.id || activeTaskId === taskId,
                         fromConnectionIndex: getConnectionIndex(
                           `${source.id}|${sourceTarget}|out`
                         ),
@@ -13727,6 +13879,7 @@
       onArrowDoubleClick,
       onArrowClick,
       activeArrowKey,
+      activeTaskId,
       showProgress,
       progressColor
     ]);
@@ -19347,13 +19500,15 @@
     return /* @__PURE__ */ jsxRuntime.jsx("div", { className: `${styles$1.loader} ${loading ? "" : styles$1.loaderHidden}` });
   };
   const GanttLoader = React.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,
@@ -19361,12 +19516,15 @@
     header,
     title,
     closeButton,
-    body
+    body,
+    goToTaskBar,
+    goToTaskButton
   };
   const GanttDrawerInner = ({
     data,
     width,
     onClose,
+    onGoToTask,
     renderContent
   }) => {
     const handleOverlayClick = React.useCallback(
@@ -19377,6 +19535,12 @@
       [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__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
       data && /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.overlay, onClick: handleOverlayClick }),
       /* @__PURE__ */ jsxRuntime.jsxs(
@@ -19406,7 +19570,78 @@
                 }
               )
             ] }),
-            /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.body, children: data && renderContent ? renderContent(data) : null })
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.body, children: [
+              data && onGoToTask && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.goToTaskBar, children: [
+                data.type === "task" && /* @__PURE__ */ jsxRuntime.jsxs(
+                  "button",
+                  {
+                    className: styles.goToTaskButton,
+                    onClick: () => onGoToTask(data.task.id),
+                    type: "button",
+                    children: [
+                      /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                  /* @__PURE__ */ jsxRuntime.jsxs(
+                    "button",
+                    {
+                      className: styles.goToTaskButton,
+                      onClick: () => onGoToTask(data.taskFrom.id),
+                      type: "button",
+                      children: [
+                        /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", children: /* @__PURE__ */ jsxRuntime.jsx(
+                          "path",
+                          {
+                            d: "M2 7h10M8 3l4 4-4 4",
+                            stroke: "currentColor",
+                            strokeWidth: "1.5",
+                            strokeLinecap: "round",
+                            strokeLinejoin: "round"
+                          }
+                        ) }),
+                        "Go to ",
+                        data.taskFrom.name
+                      ]
+                    }
+                  ),
+                  /* @__PURE__ */ jsxRuntime.jsxs(
+                    "button",
+                    {
+                      className: styles.goToTaskButton,
+                      onClick: () => onGoToTask(data.taskTo.id),
+                      type: "button",
+                      children: [
+                        /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", children: /* @__PURE__ */ jsxRuntime.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
+            ] })
           ]
         }
       )
@@ -19481,6 +19716,7 @@
     const renderDrawerContent = drawerProps == null ? void 0 : drawerProps.renderDrawerContent;
     const [drawerData, setDrawerData] = React.useState(null);
     const [activeArrowKey, setActiveArrowKey] = React.useState(null);
+    const [activeTaskId, setActiveTaskId] = React.useState(null);
     const taskBar = React.useMemo(() => {
       return mergeDeepObj(
         {},
@@ -20574,6 +20810,7 @@
       (taskFrom, taskTo) => {
         if (enableDrawer) {
           setActiveArrowKey(`${taskFrom.id}|${taskTo.id}`);
+          setActiveTaskId(null);
           setDrawerData({ type: "arrow", taskFrom, taskTo });
         }
         if (taskBar.onArrowClick) {
@@ -20586,6 +20823,7 @@
       (task, _event) => {
         if (enableDrawer) {
           setActiveArrowKey(null);
+          setActiveTaskId(task.id);
           setDrawerData({ type: "task", task });
         }
         if (taskBar.onClick) {
@@ -20597,7 +20835,51 @@
     const handleDrawerClose = React.useCallback(() => {
       setDrawerData(null);
       setActiveArrowKey(null);
+      setActiveTaskId(null);
     }, []);
+    const handleGoToTask = React.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,
@@ -20813,6 +21095,7 @@
         onArrowDoubleClick,
         onArrowClick: enableDrawer ? onArrowClick : taskBar.onArrowClick,
         activeArrowKey,
+        activeTaskId,
         renderedRowIndexes,
         rtl,
         selectTaskOnMouseDown,
@@ -20852,6 +21135,7 @@
         onArrowDoubleClick,
         onArrowClick,
         activeArrowKey,
+        activeTaskId,
         enableDrawer,
         handleTaskClick,
         renderedRowIndexes,
@@ -21027,6 +21311,7 @@
               data: drawerData,
               width: drawerWidth,
               onClose: handleDrawerClose,
+              onGoToTask: handleGoToTask,
               renderContent: renderDrawerContent
             }
           )
@@ -21035,6 +21320,7 @@
     ) }) });
   };
   exports2.AddColumn = AddColumn;
+  exports2.ColumnVisibilityToggle = ColumnVisibilityToggle;
   exports2.DateEndColumn = DateEndColumn;
   exports2.DateStartColumn = DateStartColumn;
   exports2.DeleteColumn = DeleteColumn;

package/dist/index.d.ts

@@ -7,8 +7,9 @@ export { DateStartColumn } from "./components/task-list/task-list-table-columns/
 export { DeleteColumn } from "./components/task-list/task-list-table-columns/delete-column";
 export { DependenciesColumn } from "./components/task-list/task-list-table-columns/dependencies-column";
 export { TitleColumn } from "./components/task-list/task-list-table-columns/title-column";
-export { TaskResponsiveLabel, TaskCenterLabel, TaskOutlineLabel } from "./components/task-item/task-label";
+export { TaskResponsiveLabel, TaskCenterLabel, TaskOutlineLabel, } from "./components/task-item/task-label";
 export { useTaskListColumnsBuilder } from "./components/task-list/task-list-table-columns/use-task-list-columns-builder";
+export { ColumnVisibilityToggle } from "./components/task-list/column-visibility-toggle";
 export * from "./components/context-menu-options";
 export * from "./constants";
 export * from "./types";