gantt-task-react-v 1.1.5 → 1.1.7

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/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
@@ -18054,6 +18056,7 @@ function MenuOption(props) {
   );
 }
 function ContextMenu(props) {
+  var _a;
   const {
     checkHasCopyTasks,
     checkHasCutTasks,
@@ -18104,7 +18107,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;
@@ -18794,6 +18803,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;
@@ -20170,7 +20180,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,
           {
@@ -20225,7 +20241,8 @@ const Gantt = (props) => {
             distances,
             handleAction,
             handleCloseContextMenu,
-            options: contextMenuOptions
+            options: contextMenuOptions,
+            boundaryElement: taskListHorizontalScrollRef
           }
         ),
         ganttContextMenu.task && !waitCommitTasks && /* @__PURE__ */ jsx(
@@ -20237,7 +20254,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

@@ -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
@@ -18071,6 +18073,7 @@
     );
   }
   function ContextMenu(props) {
+    var _a;
     const {
       checkHasCopyTasks,
       checkHasCutTasks,
@@ -18121,7 +18124,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;
@@ -18811,6 +18820,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;
@@ -20187,7 +20197,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,
             {
@@ -20242,7 +20258,8 @@
               distances,
               handleAction,
               handleCloseContextMenu,
-              options: contextMenuOptions
+              options: contextMenuOptions,
+              boundaryElement: taskListHorizontalScrollRef
             }
           ),
           ganttContextMenu.task && !waitCommitTasks && /* @__PURE__ */ jsxRuntime.jsx(
@@ -20254,7 +20271,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.5",
+  "version": "1.1.7",
   "description": "Interactive Gantt Chart for React with TypeScript.",
   "author": "aguilanbon",
   "homepage": "https://github.com/aguilanbon/gantt-task-react-v",