gantt-task-react-v 1.1.4 → 1.1.6

package/dist/components/context-menu/index.d.ts

@@ -1,4 +1,4 @@
-import type { ReactElement } from "react";
+import type { ReactElement, RefObject } from "react";
 import type { ActionMetaType, ContextMenuOptionType, ContextMenuType, Distances, RenderTask } from "../../types";
 type ContextMenuProps = {
     checkHasCopyTasks: () => boolean;
@@ -8,6 +8,8 @@ type ContextMenuProps = {
     handleAction: (task: RenderTask, action: (meta: ActionMetaType) => void) => void;
     handleCloseContextMenu: () => void;
     options: ContextMenuOptionType[];
+    /** Optional boundary element to contain the context menu (like tooltips) */
+    boundaryElement?: RefObject<HTMLElement>;
 };
 export declare function ContextMenu(props: ContextMenuProps): ReactElement;
 export {};

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

@@ -10021,10 +10021,10 @@ const TaskListTableRowInner = forwardRef(
     const { id, comparisonLevel = 1 } = task;
     const onRootMouseDown = useCallback(
       (event) => {
+        event.preventDefault();
         if (event.button !== 0) {
           return;
         }
-        event.preventDefault();
         if (task.type !== "empty") {
           scrollToTask(task);
         }
@@ -12783,9 +12783,6 @@ const TaskItemInner = (props) => {
   ]);
   const onMouseDown = useCallback(
     (event) => {
-      if (event.button !== 0) {
-        return;
-      }
       event.stopPropagation();
       onSelectTaskOnMouseDown(task.id, event);
     },
@@ -17976,16 +17973,9 @@ const useContextMenu = (wrapperRef, scrollToTask) => {
       }
       const { top, left } = wrapperNode.getBoundingClientRect();
       setContextMenu({
-        task: null,
-        x: 0,
-        y: 0
-      });
-      requestAnimationFrame(() => {
-        setContextMenu({
-          task,
-          x: clientX - left,
-          y: clientY - top
-        });
+        task,
+        x: clientX - left,
+        y: clientY - top
       });
       if (task.type !== "empty") {
         scrollToTask(task);
@@ -18115,7 +18105,13 @@ function ContextMenu(props) {
     },
     strategy: "absolute",
     placement: "bottom-start",
-    middleware: [flip(), shift()],
+    middleware: [
+      flip(),
+      shift({
+        boundary: ((_a = props.boundaryElement) == null ? void 0 : _a.current) || void 0,
+        padding: 8
+      })
+    ],
     whileElementsMounted: autoUpdate
   });
   const { setFloating, setReference } = refs;
@@ -18125,12 +18121,7 @@ function ContextMenu(props) {
     }
   }, [context, task, x, y]);
   const focus = useFocus(context);
-  const dismiss = useDismiss(context, {
-    outsidePress: true,
-    outsidePressEvent: "mousedown",
-    ancestorScroll: true,
-    escapeKey: true
-  });
+  const dismiss = useDismiss(context);
   const role = useRole(context, { role: "tooltip" });
   const { getReferenceProps, getFloatingProps } = useInteractions([
     focus,
@@ -18159,7 +18150,7 @@ function ContextMenu(props) {
         ref: setReference
       }
     ),
-    task && /* @__PURE__ */ jsx(
+    task && /* @__PURE__ */ jsxs(
       "div",
       {
         ref: setFloatingRef,
@@ -18179,24 +18170,29 @@ function ContextMenu(props) {
           zIndex: 10
         },
         ...getFloatingProps(),
-        children: task.type !== "project" ? optionsForRender.map((option, index2) => /* @__PURE__ */ jsx(
-          MenuOption,
-          {
-            onClose: handleCloseContextMenu,
-            distances,
-            handleAction: handleOptionAction,
-            option
-          },
-          index2
-        )) : ((_a = optionsForRender[2]) == null ? void 0 : _a.checkIsAvailable) ? /* @__PURE__ */ jsx(
-          MenuOption,
-          {
-            onClose: handleCloseContextMenu,
-            distances,
-            handleAction: handleOptionAction,
-            option: optionsForRender[2]
-          }
-        ) : null
+        children: [
+          optionsForRender.map((option, index2) => /* @__PURE__ */ jsx(
+            MenuOption,
+            {
+              onClose: handleCloseContextMenu,
+              distances,
+              handleAction: handleOptionAction,
+              option
+            },
+            index2
+          )),
+          optionsForRender.length === 0 && /* @__PURE__ */ jsx(
+            "div",
+            {
+              style: {
+                padding: "6px 12px",
+                color: "var(--gantt-context-menu-empty-color, #666)",
+                fontSize: "var(--gantt-font-size)"
+              },
+              children: "—"
+            }
+          )
+        ]
       }
     )
   ] });
@@ -20236,7 +20232,8 @@ const Gantt = (props) => {
             distances,
             handleAction,
             handleCloseContextMenu,
-            options: contextMenuOptions
+            options: contextMenuOptions,
+            boundaryElement: taskListContainerRef
           }
         ),
         ganttContextMenu.task && !waitCommitTasks && /* @__PURE__ */ jsx(
@@ -20248,7 +20245,8 @@ const Gantt = (props) => {
             distances,
             handleAction,
             handleCloseContextMenu: handleCloseGanttContextMenu,
-            options: ganttContextMenuOptions
+            options: ganttContextMenuOptions,
+            boundaryElement: verticalGanttContainerRef
           }
         ),
         /* @__PURE__ */ jsx(GanttLoader, { loading: waitCommitTasks })

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

@@ -10038,10 +10038,10 @@
       const { id, comparisonLevel = 1 } = task;
       const onRootMouseDown = React.useCallback(
         (event) => {
+          event.preventDefault();
           if (event.button !== 0) {
             return;
           }
-          event.preventDefault();
           if (task.type !== "empty") {
             scrollToTask(task);
           }
@@ -12800,9 +12800,6 @@
     ]);
     const onMouseDown = React.useCallback(
       (event) => {
-        if (event.button !== 0) {
-          return;
-        }
         event.stopPropagation();
         onSelectTaskOnMouseDown(task.id, event);
       },
@@ -17993,16 +17990,9 @@
         }
         const { top, left } = wrapperNode.getBoundingClientRect();
         setContextMenu({
-          task: null,
-          x: 0,
-          y: 0
-        });
-        requestAnimationFrame(() => {
-          setContextMenu({
-            task,
-            x: clientX - left,
-            y: clientY - top
-          });
+          task,
+          x: clientX - left,
+          y: clientY - top
         });
         if (task.type !== "empty") {
           scrollToTask(task);
@@ -18132,7 +18122,13 @@
       },
       strategy: "absolute",
       placement: "bottom-start",
-      middleware: [flip(), shift()],
+      middleware: [
+        flip(),
+        shift({
+          boundary: ((_a = props.boundaryElement) == null ? void 0 : _a.current) || void 0,
+          padding: 8
+        })
+      ],
       whileElementsMounted: autoUpdate
     });
     const { setFloating, setReference } = refs;
@@ -18142,12 +18138,7 @@
       }
     }, [context, task, x, y]);
     const focus = useFocus(context);
-    const dismiss = useDismiss(context, {
-      outsidePress: true,
-      outsidePressEvent: "mousedown",
-      ancestorScroll: true,
-      escapeKey: true
-    });
+    const dismiss = useDismiss(context);
     const role = useRole(context, { role: "tooltip" });
     const { getReferenceProps, getFloatingProps } = useInteractions([
       focus,
@@ -18176,7 +18167,7 @@
           ref: setReference
         }
       ),
-      task && /* @__PURE__ */ jsxRuntime.jsx(
+      task && /* @__PURE__ */ jsxRuntime.jsxs(
         "div",
         {
           ref: setFloatingRef,
@@ -18196,24 +18187,29 @@
             zIndex: 10
           },
           ...getFloatingProps(),
-          children: task.type !== "project" ? optionsForRender.map((option, index2) => /* @__PURE__ */ jsxRuntime.jsx(
-            MenuOption,
-            {
-              onClose: handleCloseContextMenu,
-              distances,
-              handleAction: handleOptionAction,
-              option
-            },
-            index2
-          )) : ((_a = optionsForRender[2]) == null ? void 0 : _a.checkIsAvailable) ? /* @__PURE__ */ jsxRuntime.jsx(
-            MenuOption,
-            {
-              onClose: handleCloseContextMenu,
-              distances,
-              handleAction: handleOptionAction,
-              option: optionsForRender[2]
-            }
-          ) : null
+          children: [
+            optionsForRender.map((option, index2) => /* @__PURE__ */ jsxRuntime.jsx(
+              MenuOption,
+              {
+                onClose: handleCloseContextMenu,
+                distances,
+                handleAction: handleOptionAction,
+                option
+              },
+              index2
+            )),
+            optionsForRender.length === 0 && /* @__PURE__ */ jsxRuntime.jsx(
+              "div",
+              {
+                style: {
+                  padding: "6px 12px",
+                  color: "var(--gantt-context-menu-empty-color, #666)",
+                  fontSize: "var(--gantt-font-size)"
+                },
+                children: "—"
+              }
+            )
+          ]
         }
       )
     ] });
@@ -20253,7 +20249,8 @@
               distances,
               handleAction,
               handleCloseContextMenu,
-              options: contextMenuOptions
+              options: contextMenuOptions,
+              boundaryElement: taskListContainerRef
             }
           ),
           ganttContextMenu.task && !waitCommitTasks && /* @__PURE__ */ jsxRuntime.jsx(
@@ -20265,7 +20262,8 @@
               distances,
               handleAction,
               handleCloseContextMenu: handleCloseGanttContextMenu,
-              options: ganttContextMenuOptions
+              options: ganttContextMenuOptions,
+              boundaryElement: verticalGanttContainerRef
             }
           ),
           /* @__PURE__ */ jsxRuntime.jsx(GanttLoader, { loading: waitCommitTasks })

package/package.json

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