gantt-task-react-v 1.1.6 → 1.1.8

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

@@ -3,6 +3,8 @@ import React from "react";
 import { AllowReorderTask, ChildByLevelMap, Column, DateSetup, DependencyMap, Distances, GanttRenderIconsProps, MapTaskToNestedIndex, OnResizeColumn, Task, RenderTask, TableRenderBottomProps } from "../../types";
 export type TaskListProps = {
     ganttRef: RefObject<HTMLDivElement>;
+    /** Ref to the horizontal scroll wrapper (used for containing popups) */
+    taskListHorizontalScrollRef?: RefObject<HTMLDivElement>;
     allowReorderTask?: AllowReorderTask;
     canReorderTasks?: boolean;
     canResizeColumns?: boolean;

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

@@ -10697,6 +10697,7 @@ const TaskListInner = ({
   selectedIdsMirror,
   ganttRef,
   taskListContainerRef,
+  taskListHorizontalScrollRef,
   taskListRef,
   tasks,
   onResizeColumn,
@@ -10787,6 +10788,7 @@ const TaskListInner = ({
     /* @__PURE__ */ jsxs(
       "div",
       {
+        ref: taskListHorizontalScrollRef,
         className: styles$d.taskListHorizontalScroll,
         style: {
           width: tableWidth
@@ -17996,9 +17998,9 @@ const useContextMenu = (wrapperRef, scrollToTask) => {
     handleOpenContextMenu
   };
 };
-const menuOption = "_menuOption_1ulvi_3";
-const icon = "_icon_1ulvi_55";
-const label = "_label_1ulvi_63";
+const menuOption = "_menuOption_1frh4_3";
+const icon = "_icon_1frh4_79";
+const label = "_label_1frh4_87";
 const styles$1 = {
   menuOption,
   icon,
@@ -18014,20 +18016,25 @@ function MenuOption(props) {
     },
     handleAction,
     option,
-    option: { icon: icon2, label: label2 }
+    option: { icon: icon2, label: label2, disabled }
   } = props;
   const onClick = useCallback(
     (e) => {
       e.preventDefault();
+      if (disabled) {
+        return;
+      }
       handleAction(option);
-      onClose();
+      onClose == null ? void 0 : onClose();
     },
-    [onClose, handleAction, option]
+    [onClose, handleAction, option, disabled]
   );
   return /* @__PURE__ */ jsxs(
     "button",
     {
       className: styles$1.menuOption,
+      "aria-disabled": disabled,
+      disabled,
       style: {
         height: contextMenuOptionHeight,
         paddingLeft: contextMenuSidePadding,
@@ -18043,7 +18050,7 @@ function MenuOption(props) {
             style: {
               width: contextMenuIconWidth,
               color: "var(--gantt-context-menu-text-color)",
-              opacity: 0.5
+              opacity: disabled ? 0.3 : 0.5
             },
             children: icon2
           }
@@ -18801,6 +18808,7 @@ const Gantt = (props) => {
   const ganttSVGRef = useRef(null);
   const wrapperRef = useRef(null);
   const taskListRef = useRef(null);
+  const taskListHorizontalScrollRef = useRef(null);
   const locale = useMemo(() => clientLocale ?? GANTT_EN_LOCALE, [clientLocale]);
   const theme = useMemo(() => buildGanttTheme(clientTheme), [clientTheme]);
   const { dateFormats: dateFormats2, rtl } = theme;
@@ -20177,7 +20185,13 @@ const Gantt = (props) => {
       ref: wrapperRef,
       "data-testid": "gantt",
       children: [
-        (!columnsProp || columnsProp.length > 0) && /* @__PURE__ */ jsx(TaskList, { ...renderTaskListProps }),
+        (!columnsProp || columnsProp.length > 0) && /* @__PURE__ */ jsx(
+          TaskList,
+          {
+            ...renderTaskListProps,
+            taskListHorizontalScrollRef
+          }
+        ),
         /* @__PURE__ */ jsx(
           TaskGantt,
           {
@@ -20233,7 +20247,7 @@ const Gantt = (props) => {
             handleAction,
             handleCloseContextMenu,
             options: contextMenuOptions,
-            boundaryElement: taskListContainerRef
+            boundaryElement: taskListHorizontalScrollRef
           }
         ),
         ganttContextMenu.task && !waitCommitTasks && /* @__PURE__ */ jsx(

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

@@ -10714,6 +10714,7 @@
     selectedIdsMirror,
     ganttRef,
     taskListContainerRef,
+    taskListHorizontalScrollRef,
     taskListRef,
     tasks,
     onResizeColumn,
@@ -10804,6 +10805,7 @@
       /* @__PURE__ */ jsxRuntime.jsxs(
         "div",
         {
+          ref: taskListHorizontalScrollRef,
           className: styles$d.taskListHorizontalScroll,
           style: {
             width: tableWidth
@@ -18013,9 +18015,9 @@
       handleOpenContextMenu
     };
   };
-  const menuOption = "_menuOption_1ulvi_3";
-  const icon = "_icon_1ulvi_55";
-  const label = "_label_1ulvi_63";
+  const menuOption = "_menuOption_1frh4_3";
+  const icon = "_icon_1frh4_79";
+  const label = "_label_1frh4_87";
   const styles$1 = {
     menuOption,
     icon,
@@ -18031,20 +18033,25 @@
       },
       handleAction,
       option,
-      option: { icon: icon2, label: label2 }
+      option: { icon: icon2, label: label2, disabled }
     } = props;
     const onClick = React.useCallback(
       (e) => {
         e.preventDefault();
+        if (disabled) {
+          return;
+        }
         handleAction(option);
-        onClose();
+        onClose == null ? void 0 : onClose();
       },
-      [onClose, handleAction, option]
+      [onClose, handleAction, option, disabled]
     );
     return /* @__PURE__ */ jsxRuntime.jsxs(
       "button",
       {
         className: styles$1.menuOption,
+        "aria-disabled": disabled,
+        disabled,
         style: {
           height: contextMenuOptionHeight,
           paddingLeft: contextMenuSidePadding,
@@ -18060,7 +18067,7 @@
               style: {
                 width: contextMenuIconWidth,
                 color: "var(--gantt-context-menu-text-color)",
-                opacity: 0.5
+                opacity: disabled ? 0.3 : 0.5
               },
               children: icon2
             }
@@ -18818,6 +18825,7 @@
     const ganttSVGRef = React.useRef(null);
     const wrapperRef = React.useRef(null);
     const taskListRef = React.useRef(null);
+    const taskListHorizontalScrollRef = React.useRef(null);
     const locale = React.useMemo(() => clientLocale ?? GANTT_EN_LOCALE, [clientLocale]);
     const theme = React.useMemo(() => buildGanttTheme(clientTheme), [clientTheme]);
     const { dateFormats: dateFormats2, rtl } = theme;
@@ -20194,7 +20202,13 @@
         ref: wrapperRef,
         "data-testid": "gantt",
         children: [
-          (!columnsProp || columnsProp.length > 0) && /* @__PURE__ */ jsxRuntime.jsx(TaskList, { ...renderTaskListProps }),
+          (!columnsProp || columnsProp.length > 0) && /* @__PURE__ */ jsxRuntime.jsx(
+            TaskList,
+            {
+              ...renderTaskListProps,
+              taskListHorizontalScrollRef
+            }
+          ),
           /* @__PURE__ */ jsxRuntime.jsx(
             TaskGantt,
             {
@@ -20250,7 +20264,7 @@
               handleAction,
               handleCloseContextMenu,
               options: contextMenuOptions,
-              boundaryElement: taskListContainerRef
+              boundaryElement: taskListHorizontalScrollRef
             }
           ),
           ganttContextMenu.task && !waitCommitTasks && /* @__PURE__ */ jsxRuntime.jsx(

package/dist/style.css

@@ -636,7 +636,7 @@
   cursor: grabbing;
 }
 /*noinspection CssUnresolvedCustomProperty*/
-._menuOption_1ulvi_3 {
+._menuOption_1frh4_3 {
   display: flex;
   align-items: center;
   text-align: left;
@@ -653,20 +653,32 @@
   fill: var(--gantt-table-action-color);
 }
 
-._menuOption_1ulvi_3 svg {
+._menuOption_1frh4_3 svg {
   width: 20px;
   height: 20px;
 }
 
-._menuOption_1ulvi_3:hover {
+._menuOption_1frh4_3:hover {
   background-color: #eeeeee;
 }
 
-._icon_1ulvi_55 {
+._menuOption_1frh4_3[aria-disabled="true"],
+._menuOption_1frh4_3:disabled {
+  opacity: 0.6;
+  cursor: default;
+  background-color: transparent;
+}
+
+._menuOption_1frh4_3[aria-disabled="true"]:hover,
+._menuOption_1frh4_3:disabled:hover {
+  background-color: transparent;
+}
+
+._icon_1frh4_79 {
   font-size: inherit;
 }
 
-._label_1ulvi_63 {
+._label_1frh4_87 {
   flex: 1;
 }
 /* HTML: <div class="loader"></div> */

package/dist/types/public-types.d.ts

@@ -570,6 +570,10 @@ export type ContextMenuOptionType = {
      * @param meta Metadata for checking
      */
     checkIsAvailable?: (meta: CheckIsAvailableMetaType) => void;
+    /**
+     * Optional flag to render the option as disabled (not clickable)
+     */
+    disabled?: boolean;
     label: ReactNode;
     icon?: ReactNode;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gantt-task-react-v",
-  "version": "1.1.6",
+  "version": "1.1.8",
   "description": "Interactive Gantt Chart for React with TypeScript.",
   "author": "aguilanbon",
   "homepage": "https://github.com/aguilanbon/gantt-task-react-v",