gantt-task-react-v 1.0.40 → 1.0.42

package/README.md

@@ -2,12 +2,17 @@
 
 ## Interactive Gantt Chart for React with TypeScript.
 
+## Recent Updates
+
+- Flexible Gantt height now adapts to its parent container, now we always see the horizontal scrolls for both task list and gantt.
+- Fixed sticky gantt header on drag
+
 ## [Live Demo In Storybook](https://661071b076b50cb537c16c19-yrsukdfefs.chromatic.com/)
 
 ## Install
 
 ```
-npm install webagility-gantt-task-react
+npm install https://github.com/aguilanbon/gantt-task-react-v"
 ```
 
 ## How to use it
@@ -96,7 +101,7 @@ yarn storebook
 | Parameter Name             | Type   | Description                                                                                    |
 | :------------------------- | :----- | :--------------------------------------------------------------------------------------------- |
 | headerHeight               | number | Specifies the header height.                                                                   |
-| ganttHeight                | number | Specifies the gantt chart height without header. Default is 0. It`s mean no height limitation. |
+| ganttHeight                | number | Specifies the gantt chart height without header. If not set or 0, adapts to its parent container. |
 | columnWidth                | number | Specifies the time period width.                                                               |
 | listCellWidth              | string | Specifies the task list cell width. Empty string is mean "no display".                         |
 | rowHeight                  | number | Specifies the task row height.                                                                 |

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

@@ -5296,8 +5296,7 @@ const useTableListResize = (clientColumns, canMoveTasks, onResizeColumn, ganttRe
     titleCellWidth,
     dateCellWidth,
     dependenciesCellWidth,
-    actionColumnWidth,
-    tableWidth: defaultTableWidth = 400
+    actionColumnWidth
   } = theme.distances;
   const defaultColumns = useMemo(() => {
     return [
@@ -5333,10 +5332,6 @@ const useTableListResize = (clientColumns, canMoveTasks, onResizeColumn, ganttRe
   const [columnsState, setColumns] = useState(
     clientColumns || defaultColumns
   );
-  const taskListWidth = useMemo(
-    () => columnsState.reduce((res, { width }) => res + width, 0) + extraWidth,
-    [columnsState, extraWidth]
-  );
   useEffect(() => {
     if (clientColumns) {
       setColumns([...clientColumns]);
@@ -5344,23 +5339,19 @@ const useTableListResize = (clientColumns, canMoveTasks, onResizeColumn, ganttRe
       const newColumnIds = clientColumns.map((col) => col.id);
       const widthOfAddedColumns = clientColumns.filter((col) => !currentColumnIds.includes(col.id)).reduce((res, { width }) => res + width, 0);
       const widthOfRemovedColumns = clientColumns.filter((col) => !newColumnIds.includes(col.id)).reduce((res, { width }) => res + width, 0);
-      setTableWidth((prev) => {
-        const newWidth = prev + widthOfAddedColumns - widthOfRemovedColumns;
-        return Math.max(newWidth, 100);
-      });
+      setTableWidth(
+        (prev) => Math.min(
+          prev + widthOfAddedColumns - widthOfRemovedColumns,
+          clientColumns.reduce((res, { width }) => res + width, 0) + extraWidth
+        )
+      );
     }
-  }, [clientColumns, extraWidth, taskListWidth]);
+  }, [clientColumns, extraWidth]);
   const [tableResizeEvent, setTableResizeEvent] = useState(null);
   const [columnResizeEvent, setColumnResizeEvent] = useState(null);
-  const [tableWidthState, setTableWidth] = useState(() => {
-    const calculatedWidth = columnsState.reduce((res, { width }) => res + width, 0) + extraWidth;
-    const MAX_INITIAL_WIDTH = 600;
-    if (calculatedWidth <= MAX_INITIAL_WIDTH) {
-      return calculatedWidth;
-    } else {
-      return defaultTableWidth;
-    }
-  });
+  const [tableWidthState, setTableWidth] = useState(
+    () => columnsState.reduce((res, { width }) => res + width, 0) + extraWidth
+  );
   const onTableResizeStart = (clientX) => {
     const newTableResizeEvent = {
       initialClientX: clientX,
@@ -5379,6 +5370,7 @@ const useTableListResize = (clientColumns, canMoveTasks, onResizeColumn, ganttRe
   };
   const isResizeTableInProgress = Boolean(tableResizeEvent);
   const isResizeColumnInProgress = Boolean(columnResizeEvent);
+  const taskListWidth = columnsState.reduce((res, { width }) => res + width, 0) + extraWidth;
   useEffect(() => {
     if (!isResizeTableInProgress) {
       return void 0;
@@ -5386,15 +5378,9 @@ const useTableListResize = (clientColumns, canMoveTasks, onResizeColumn, ganttRe
     const handleMove = (clientX) => {
       const moveDelta = clientX - tableResizeEvent.initialClientX;
       setTableWidth(() => {
-        const newWidth = tableResizeEvent.initialTableWidth + moveDelta;
-        const ganttContainer = ganttRef.current;
-        const containerWidth = ganttContainer ? ganttContainer.offsetWidth : 1e3;
-        const maxTableWidth = Math.max(containerWidth - 100, taskListWidth);
         return Math.min(
-          Math.max(newWidth, 50),
-          // Minimum width of 50px
-          maxTableWidth
-          // Allow table to expand much more
+          Math.max(tableResizeEvent.initialTableWidth + moveDelta, 50),
+          taskListWidth
         );
       });
     };
@@ -5454,18 +5440,12 @@ const useTableListResize = (clientColumns, canMoveTasks, onResizeColumn, ganttRe
         return newColumns;
       });
       if (previousColumnWidth !== newColumnWidth) {
-        setTableWidth(() => {
-          const newTableWidth = columnResizeEvent.initialTableWidth + moveDelta;
-          const ganttContainer = ganttRef.current;
-          const containerWidth = ganttContainer ? ganttContainer.offsetWidth : 1e3;
-          const maxTableWidth = Math.max(containerWidth - 100, taskListWidth);
-          return Math.min(
-            Math.max(newTableWidth, 50),
-            // Minimum width
-            maxTableWidth
-            // Allow expansion beyond column width
-          );
-        });
+        setTableWidth(
+          () => Math.min(
+            Math.max(columnResizeEvent.initialTableWidth + moveDelta, 50),
+            taskListWidth
+          )
+        );
       }
     };
     const handleMouseMove = (event) => {
@@ -10657,14 +10637,14 @@ const TaskListTableDefaultInner = ({
   );
 };
 const TaskListTable = memo(TaskListTableDefaultInner);
-const taskListRoot = "_taskListRoot_13wkq_1";
-const taskListHorizontalScroll = "_taskListHorizontalScroll_13wkq_23";
-const taskListResizer = "_taskListResizer_13wkq_87";
-const horizontalContainer$1 = "_horizontalContainer_13wkq_151";
-const tableWrapper = "_tableWrapper_13wkq_165";
-const scrollToTop = "_scrollToTop_13wkq_179";
-const scrollToBottom = "_scrollToBottom_13wkq_195";
-const hidden = "_hidden_13wkq_211";
+const taskListRoot = "_taskListRoot_yoz76_1";
+const taskListHorizontalScroll = "_taskListHorizontalScroll_yoz76_19";
+const taskListResizer = "_taskListResizer_yoz76_81";
+const horizontalContainer$1 = "_horizontalContainer_yoz76_145";
+const tableWrapper = "_tableWrapper_yoz76_159";
+const scrollToTop = "_scrollToTop_yoz76_173";
+const scrollToBottom = "_scrollToBottom_yoz76_189";
+const hidden = "_hidden_yoz76_205";
 const styles$d = {
   taskListRoot,
   taskListHorizontalScroll,
@@ -13155,10 +13135,10 @@ const TaskGanttContentInner = (props) => {
   ] });
 };
 const TaskGanttContent = memo(TaskGanttContentInner);
-const ganttVerticalContainer = "_ganttVerticalContainer_5z1c2_1";
-const horizontalContainer = "_horizontalContainer_5z1c2_75";
-const wrapper = "_wrapper_5z1c2_87";
-const calendarDragging = "_calendarDragging_5z1c2_117";
+const ganttVerticalContainer = "_ganttVerticalContainer_1wr55_1";
+const horizontalContainer = "_horizontalContainer_1wr55_73";
+const wrapper = "_wrapper_1wr55_85";
+const calendarDragging = "_calendarDragging_1wr55_109";
 const styles$2 = {
   ganttVerticalContainer,
   horizontalContainer,
@@ -13184,7 +13164,8 @@ const TaskGanttInner = (props) => {
     verticalGanttContainerRef,
     verticalScrollbarRef
   } = props;
-  const ganttBodyRef = React__default.useRef(null);
+  const contentRef = React__default.useRef(null);
+  const moveStateVertRef = useRef(null);
   const moveStateHorRef = useRef(null);
   const moveStateScrollRef = useRef(null);
   const containerStyle = useMemo(
@@ -13216,49 +13197,50 @@ const TaskGanttInner = (props) => {
     ]
   );
   useEffect(() => {
-    if (!ganttBodyRef.current) {
+    if (!contentRef.current) {
       return () => {
       };
     }
-    const ganttBodyContainer = ganttBodyRef.current;
+    const contentContainer = contentRef.current;
     const onScrollStart = (event) => {
-      var _a, _b, _c, _d;
-      const mouseEvent = event;
-      mouseEvent.preventDefault();
+      event.preventDefault();
+      moveStateVertRef.current = {
+        clientX: event.clientX,
+        clientY: event.clientY,
+        scrollLeft: verticalGanttContainerRef.current.scrollLeft,
+        scrollTop: verticalGanttContainerRef.current.scrollTop
+      };
       moveStateHorRef.current = {
-        clientX: mouseEvent.clientX,
-        clientY: mouseEvent.clientY,
-        scrollLeft: ((_a = verticalGanttContainerRef.current) == null ? void 0 : _a.scrollLeft) || 0,
-        scrollTop: ((_b = horizontalContainerRef.current) == null ? void 0 : _b.scrollTop) || 0
+        clientX: event.clientX,
+        clientY: event.clientY,
+        scrollLeft: horizontalContainerRef.current.scrollLeft,
+        scrollTop: horizontalContainerRef.current.scrollTop
       };
       moveStateScrollRef.current = {
-        clientX: mouseEvent.clientX,
-        clientY: mouseEvent.clientY,
-        scrollLeft: ((_c = verticalScrollbarRef.current) == null ? void 0 : _c.scrollLeft) || 0,
-        scrollTop: ((_d = verticalScrollbarRef.current) == null ? void 0 : _d.scrollTop) || 0
+        clientX: event.clientX,
+        clientY: event.clientY,
+        scrollLeft: verticalScrollbarRef.current.scrollLeft,
+        scrollTop: verticalScrollbarRef.current.scrollTop
       };
-      ganttBodyContainer.classList.add(styles$2.calendarDragging);
+      contentContainer.classList.add(styles$2.calendarDragging);
     };
     const onScrollMove = (event) => {
-      if (!moveStateHorRef.current) {
+      if (!moveStateVertRef.current) {
         return;
       }
-      const mouseEvent = event;
-      mouseEvent.preventDefault();
+      event.preventDefault();
+      const { clientX, scrollLeft } = moveStateVertRef.current;
+      const scrollVertContainer = verticalGanttContainerRef.current;
+      scrollVertContainer.scrollLeft = scrollLeft + clientX - event.clientX;
       const {
         clientX: clientXH,
         scrollLeft: scrollLeftH,
         scrollTop: scrollTopH,
         clientY: clientYH
       } = moveStateHorRef.current;
-      const vertContainer = verticalGanttContainerRef.current;
-      if (vertContainer) {
-        vertContainer.scrollLeft = scrollLeftH + clientXH - mouseEvent.clientX;
-      }
       const horContainer = horizontalContainerRef.current;
-      if (horContainer) {
-        horContainer.scrollTop = scrollTopH + clientYH - mouseEvent.clientY;
-      }
+      horContainer.scrollLeft = scrollLeftH + clientXH - event.clientX;
+      horContainer.scrollTop = scrollTopH + clientYH - event.clientY;
       const {
         clientX: clientXS,
         scrollLeft: scrollLeftS,
@@ -13266,27 +13248,24 @@ const TaskGanttInner = (props) => {
         clientY: clientYS
       } = moveStateScrollRef.current;
       const scrollContainer = verticalScrollbarRef.current;
-      if (scrollContainer) {
-        scrollContainer.scrollLeft = scrollLeftS + clientXS - mouseEvent.clientX;
-        scrollContainer.scrollTop = scrollTopS + clientYS - mouseEvent.clientY;
-      }
+      scrollContainer.scrollLeft = scrollLeftS + clientXS - event.clientX;
+      scrollContainer.scrollTop = scrollTopS + clientYS - event.clientY;
     };
     const onScrollEnd = (event) => {
-      const mouseEvent = event;
-      mouseEvent.preventDefault();
+      event.preventDefault();
+      moveStateVertRef.current = null;
       moveStateHorRef.current = null;
-      moveStateScrollRef.current = null;
-      ganttBodyContainer.classList.remove(styles$2.calendarDragging);
+      contentContainer.classList.remove(styles$2.calendarDragging);
     };
-    ganttBodyContainer.addEventListener("mousemove", onScrollMove);
-    ganttBodyContainer.addEventListener("mousedown", onScrollStart);
-    ganttBodyContainer.addEventListener("mouseup", onScrollEnd);
-    ganttBodyContainer.addEventListener("mouseout", onScrollEnd);
+    contentContainer.addEventListener("mousemove", onScrollMove);
+    contentContainer.addEventListener("mousedown", onScrollStart);
+    contentContainer.addEventListener("mouseup", onScrollEnd);
+    contentContainer.addEventListener("mouseout", onScrollEnd);
     return () => {
-      ganttBodyContainer.removeEventListener("mousemove", onScrollMove);
-      ganttBodyContainer.removeEventListener("mousedown", onScrollStart);
-      ganttBodyContainer.removeEventListener("mouseup", onScrollEnd);
-      ganttBodyContainer.removeEventListener("mouseout", onScrollEnd);
+      contentContainer.removeEventListener("mousemove", onScrollMove);
+      contentContainer.removeEventListener("mousedown", onScrollStart);
+      contentContainer.removeEventListener("mouseup", onScrollEnd);
+      contentContainer.removeEventListener("mouseout", onScrollEnd);
     };
   }, [verticalScrollbarRef, horizontalContainerRef, verticalGanttContainerRef]);
   return /* @__PURE__ */ jsxs(
@@ -13313,7 +13292,7 @@ const TaskGanttInner = (props) => {
             ref: horizontalContainerRef,
             className: styles$2.horizontalContainer,
             style: containerStyle,
-            children: /* @__PURE__ */ jsx("div", { style: gridStyle, ref: ganttBodyRef, children: /* @__PURE__ */ jsxs(
+            children: /* @__PURE__ */ jsx("div", { style: gridStyle, children: /* @__PURE__ */ jsxs(
               "svg",
               {
                 xmlns: "http://www.w3.org/2000/svg",
@@ -13323,6 +13302,15 @@ const TaskGanttInner = (props) => {
                 ref: ganttSVGRef,
                 children: [
                   /* @__PURE__ */ jsx(GanttToday, { ...ganttTodayProps }),
+                  /* @__PURE__ */ jsx(
+                    "rect",
+                    {
+                      ref: contentRef,
+                      width: "100%",
+                      height: "100%",
+                      fill: "transparent"
+                    }
+                  ),
                   /* @__PURE__ */ jsx(TaskGanttContent, { ...barProps })
                 ]
               }

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

@@ -5313,8 +5313,7 @@
       titleCellWidth,
       dateCellWidth,
       dependenciesCellWidth,
-      actionColumnWidth,
-      tableWidth: defaultTableWidth = 400
+      actionColumnWidth
     } = theme.distances;
     const defaultColumns = React.useMemo(() => {
       return [
@@ -5350,10 +5349,6 @@
     const [columnsState, setColumns] = React.useState(
       clientColumns || defaultColumns
     );
-    const taskListWidth = React.useMemo(
-      () => columnsState.reduce((res, { width }) => res + width, 0) + extraWidth,
-      [columnsState, extraWidth]
-    );
     React.useEffect(() => {
       if (clientColumns) {
         setColumns([...clientColumns]);
@@ -5361,23 +5356,19 @@
         const newColumnIds = clientColumns.map((col) => col.id);
         const widthOfAddedColumns = clientColumns.filter((col) => !currentColumnIds.includes(col.id)).reduce((res, { width }) => res + width, 0);
         const widthOfRemovedColumns = clientColumns.filter((col) => !newColumnIds.includes(col.id)).reduce((res, { width }) => res + width, 0);
-        setTableWidth((prev) => {
-          const newWidth = prev + widthOfAddedColumns - widthOfRemovedColumns;
-          return Math.max(newWidth, 100);
-        });
+        setTableWidth(
+          (prev) => Math.min(
+            prev + widthOfAddedColumns - widthOfRemovedColumns,
+            clientColumns.reduce((res, { width }) => res + width, 0) + extraWidth
+          )
+        );
       }
-    }, [clientColumns, extraWidth, taskListWidth]);
+    }, [clientColumns, extraWidth]);
     const [tableResizeEvent, setTableResizeEvent] = React.useState(null);
     const [columnResizeEvent, setColumnResizeEvent] = React.useState(null);
-    const [tableWidthState, setTableWidth] = React.useState(() => {
-      const calculatedWidth = columnsState.reduce((res, { width }) => res + width, 0) + extraWidth;
-      const MAX_INITIAL_WIDTH = 600;
-      if (calculatedWidth <= MAX_INITIAL_WIDTH) {
-        return calculatedWidth;
-      } else {
-        return defaultTableWidth;
-      }
-    });
+    const [tableWidthState, setTableWidth] = React.useState(
+      () => columnsState.reduce((res, { width }) => res + width, 0) + extraWidth
+    );
     const onTableResizeStart = (clientX) => {
       const newTableResizeEvent = {
         initialClientX: clientX,
@@ -5396,6 +5387,7 @@
     };
     const isResizeTableInProgress = Boolean(tableResizeEvent);
     const isResizeColumnInProgress = Boolean(columnResizeEvent);
+    const taskListWidth = columnsState.reduce((res, { width }) => res + width, 0) + extraWidth;
     React.useEffect(() => {
       if (!isResizeTableInProgress) {
         return void 0;
@@ -5403,15 +5395,9 @@
       const handleMove = (clientX) => {
         const moveDelta = clientX - tableResizeEvent.initialClientX;
         setTableWidth(() => {
-          const newWidth = tableResizeEvent.initialTableWidth + moveDelta;
-          const ganttContainer = ganttRef.current;
-          const containerWidth = ganttContainer ? ganttContainer.offsetWidth : 1e3;
-          const maxTableWidth = Math.max(containerWidth - 100, taskListWidth);
           return Math.min(
-            Math.max(newWidth, 50),
-            // Minimum width of 50px
-            maxTableWidth
-            // Allow table to expand much more
+            Math.max(tableResizeEvent.initialTableWidth + moveDelta, 50),
+            taskListWidth
           );
         });
       };
@@ -5471,18 +5457,12 @@
           return newColumns;
         });
         if (previousColumnWidth !== newColumnWidth) {
-          setTableWidth(() => {
-            const newTableWidth = columnResizeEvent.initialTableWidth + moveDelta;
-            const ganttContainer = ganttRef.current;
-            const containerWidth = ganttContainer ? ganttContainer.offsetWidth : 1e3;
-            const maxTableWidth = Math.max(containerWidth - 100, taskListWidth);
-            return Math.min(
-              Math.max(newTableWidth, 50),
-              // Minimum width
-              maxTableWidth
-              // Allow expansion beyond column width
-            );
-          });
+          setTableWidth(
+            () => Math.min(
+              Math.max(columnResizeEvent.initialTableWidth + moveDelta, 50),
+              taskListWidth
+            )
+          );
         }
       };
       const handleMouseMove = (event) => {
@@ -10674,14 +10654,14 @@
     );
   };
   const TaskListTable = React.memo(TaskListTableDefaultInner);
-  const taskListRoot = "_taskListRoot_13wkq_1";
-  const taskListHorizontalScroll = "_taskListHorizontalScroll_13wkq_23";
-  const taskListResizer = "_taskListResizer_13wkq_87";
-  const horizontalContainer$1 = "_horizontalContainer_13wkq_151";
-  const tableWrapper = "_tableWrapper_13wkq_165";
-  const scrollToTop = "_scrollToTop_13wkq_179";
-  const scrollToBottom = "_scrollToBottom_13wkq_195";
-  const hidden = "_hidden_13wkq_211";
+  const taskListRoot = "_taskListRoot_yoz76_1";
+  const taskListHorizontalScroll = "_taskListHorizontalScroll_yoz76_19";
+  const taskListResizer = "_taskListResizer_yoz76_81";
+  const horizontalContainer$1 = "_horizontalContainer_yoz76_145";
+  const tableWrapper = "_tableWrapper_yoz76_159";
+  const scrollToTop = "_scrollToTop_yoz76_173";
+  const scrollToBottom = "_scrollToBottom_yoz76_189";
+  const hidden = "_hidden_yoz76_205";
   const styles$d = {
     taskListRoot,
     taskListHorizontalScroll,
@@ -13172,10 +13152,10 @@
     ] });
   };
   const TaskGanttContent = React.memo(TaskGanttContentInner);
-  const ganttVerticalContainer = "_ganttVerticalContainer_5z1c2_1";
-  const horizontalContainer = "_horizontalContainer_5z1c2_75";
-  const wrapper = "_wrapper_5z1c2_87";
-  const calendarDragging = "_calendarDragging_5z1c2_117";
+  const ganttVerticalContainer = "_ganttVerticalContainer_1wr55_1";
+  const horizontalContainer = "_horizontalContainer_1wr55_73";
+  const wrapper = "_wrapper_1wr55_85";
+  const calendarDragging = "_calendarDragging_1wr55_109";
   const styles$2 = {
     ganttVerticalContainer,
     horizontalContainer,
@@ -13201,7 +13181,8 @@
       verticalGanttContainerRef,
       verticalScrollbarRef
     } = props;
-    const ganttBodyRef = React.useRef(null);
+    const contentRef = React.useRef(null);
+    const moveStateVertRef = React.useRef(null);
     const moveStateHorRef = React.useRef(null);
     const moveStateScrollRef = React.useRef(null);
     const containerStyle = React.useMemo(
@@ -13233,49 +13214,50 @@
       ]
     );
     React.useEffect(() => {
-      if (!ganttBodyRef.current) {
+      if (!contentRef.current) {
         return () => {
         };
       }
-      const ganttBodyContainer = ganttBodyRef.current;
+      const contentContainer = contentRef.current;
       const onScrollStart = (event) => {
-        var _a, _b, _c, _d;
-        const mouseEvent = event;
-        mouseEvent.preventDefault();
+        event.preventDefault();
+        moveStateVertRef.current = {
+          clientX: event.clientX,
+          clientY: event.clientY,
+          scrollLeft: verticalGanttContainerRef.current.scrollLeft,
+          scrollTop: verticalGanttContainerRef.current.scrollTop
+        };
         moveStateHorRef.current = {
-          clientX: mouseEvent.clientX,
-          clientY: mouseEvent.clientY,
-          scrollLeft: ((_a = verticalGanttContainerRef.current) == null ? void 0 : _a.scrollLeft) || 0,
-          scrollTop: ((_b = horizontalContainerRef.current) == null ? void 0 : _b.scrollTop) || 0
+          clientX: event.clientX,
+          clientY: event.clientY,
+          scrollLeft: horizontalContainerRef.current.scrollLeft,
+          scrollTop: horizontalContainerRef.current.scrollTop
         };
         moveStateScrollRef.current = {
-          clientX: mouseEvent.clientX,
-          clientY: mouseEvent.clientY,
-          scrollLeft: ((_c = verticalScrollbarRef.current) == null ? void 0 : _c.scrollLeft) || 0,
-          scrollTop: ((_d = verticalScrollbarRef.current) == null ? void 0 : _d.scrollTop) || 0
+          clientX: event.clientX,
+          clientY: event.clientY,
+          scrollLeft: verticalScrollbarRef.current.scrollLeft,
+          scrollTop: verticalScrollbarRef.current.scrollTop
         };
-        ganttBodyContainer.classList.add(styles$2.calendarDragging);
+        contentContainer.classList.add(styles$2.calendarDragging);
       };
       const onScrollMove = (event) => {
-        if (!moveStateHorRef.current) {
+        if (!moveStateVertRef.current) {
           return;
         }
-        const mouseEvent = event;
-        mouseEvent.preventDefault();
+        event.preventDefault();
+        const { clientX, scrollLeft } = moveStateVertRef.current;
+        const scrollVertContainer = verticalGanttContainerRef.current;
+        scrollVertContainer.scrollLeft = scrollLeft + clientX - event.clientX;
         const {
           clientX: clientXH,
           scrollLeft: scrollLeftH,
           scrollTop: scrollTopH,
           clientY: clientYH
         } = moveStateHorRef.current;
-        const vertContainer = verticalGanttContainerRef.current;
-        if (vertContainer) {
-          vertContainer.scrollLeft = scrollLeftH + clientXH - mouseEvent.clientX;
-        }
         const horContainer = horizontalContainerRef.current;
-        if (horContainer) {
-          horContainer.scrollTop = scrollTopH + clientYH - mouseEvent.clientY;
-        }
+        horContainer.scrollLeft = scrollLeftH + clientXH - event.clientX;
+        horContainer.scrollTop = scrollTopH + clientYH - event.clientY;
         const {
           clientX: clientXS,
           scrollLeft: scrollLeftS,
@@ -13283,27 +13265,24 @@
           clientY: clientYS
         } = moveStateScrollRef.current;
         const scrollContainer = verticalScrollbarRef.current;
-        if (scrollContainer) {
-          scrollContainer.scrollLeft = scrollLeftS + clientXS - mouseEvent.clientX;
-          scrollContainer.scrollTop = scrollTopS + clientYS - mouseEvent.clientY;
-        }
+        scrollContainer.scrollLeft = scrollLeftS + clientXS - event.clientX;
+        scrollContainer.scrollTop = scrollTopS + clientYS - event.clientY;
       };
       const onScrollEnd = (event) => {
-        const mouseEvent = event;
-        mouseEvent.preventDefault();
+        event.preventDefault();
+        moveStateVertRef.current = null;
         moveStateHorRef.current = null;
-        moveStateScrollRef.current = null;
-        ganttBodyContainer.classList.remove(styles$2.calendarDragging);
+        contentContainer.classList.remove(styles$2.calendarDragging);
       };
-      ganttBodyContainer.addEventListener("mousemove", onScrollMove);
-      ganttBodyContainer.addEventListener("mousedown", onScrollStart);
-      ganttBodyContainer.addEventListener("mouseup", onScrollEnd);
-      ganttBodyContainer.addEventListener("mouseout", onScrollEnd);
+      contentContainer.addEventListener("mousemove", onScrollMove);
+      contentContainer.addEventListener("mousedown", onScrollStart);
+      contentContainer.addEventListener("mouseup", onScrollEnd);
+      contentContainer.addEventListener("mouseout", onScrollEnd);
       return () => {
-        ganttBodyContainer.removeEventListener("mousemove", onScrollMove);
-        ganttBodyContainer.removeEventListener("mousedown", onScrollStart);
-        ganttBodyContainer.removeEventListener("mouseup", onScrollEnd);
-        ganttBodyContainer.removeEventListener("mouseout", onScrollEnd);
+        contentContainer.removeEventListener("mousemove", onScrollMove);
+        contentContainer.removeEventListener("mousedown", onScrollStart);
+        contentContainer.removeEventListener("mouseup", onScrollEnd);
+        contentContainer.removeEventListener("mouseout", onScrollEnd);
       };
     }, [verticalScrollbarRef, horizontalContainerRef, verticalGanttContainerRef]);
     return /* @__PURE__ */ jsxRuntime.jsxs(
@@ -13330,7 +13309,7 @@
               ref: horizontalContainerRef,
               className: styles$2.horizontalContainer,
               style: containerStyle,
-              children: /* @__PURE__ */ jsxRuntime.jsx("div", { style: gridStyle, ref: ganttBodyRef, children: /* @__PURE__ */ jsxRuntime.jsxs(
+              children: /* @__PURE__ */ jsxRuntime.jsx("div", { style: gridStyle, children: /* @__PURE__ */ jsxRuntime.jsxs(
                 "svg",
                 {
                   xmlns: "http://www.w3.org/2000/svg",
@@ -13340,6 +13319,15 @@
                   ref: ganttSVGRef,
                   children: [
                     /* @__PURE__ */ jsxRuntime.jsx(GanttToday, { ...ganttTodayProps }),
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      "rect",
+                      {
+                        ref: contentRef,
+                        width: "100%",
+                        height: "100%",
+                        fill: "transparent"
+                      }
+                    ),
                     /* @__PURE__ */ jsxRuntime.jsx(TaskGanttContent, { ...barProps })
                   ]
                 }

package/dist/style.css

@@ -282,35 +282,32 @@
   border-bottom: 1px solid var(--gantt-divider-color);
   table-layout: fixed;
 }
-._taskListRoot_13wkq_1 {
+._taskListRoot_yoz76_1 {
   position: relative;
   height: 100%;
   display: flex;
   flex-direction: column;
-  min-width: 0;
-  flex-shrink: 0;
   /*noinspection CssUnresolvedCustomProperty*/
   border-left: 1px solid var(--gantt-table-divider-color, var(--gantt-divider-color));
 }
 
-._taskListHorizontalScroll_13wkq_23 {
+._taskListHorizontalScroll_yoz76_19 {
   overflow-x: scroll;
   height: 100%;
   display: flex;
   flex-direction: column;
-  min-width: 0;
 }
 
-._taskListHorizontalScroll_13wkq_23::-webkit-scrollbar {
+._taskListHorizontalScroll_yoz76_19::-webkit-scrollbar {
   width: 1rem;
   height: 1rem;
 }
 
-._taskListHorizontalScroll_13wkq_23::-webkit-scrollbar-corner {
+._taskListHorizontalScroll_yoz76_19::-webkit-scrollbar-corner {
   background: transparent;
 }
 
-._taskListHorizontalScroll_13wkq_23::-webkit-scrollbar-thumb {
+._taskListHorizontalScroll_yoz76_19::-webkit-scrollbar-thumb {
   border: 4px solid transparent;
   /*noinspection CssUnresolvedCustomProperty*/
   background: var(--gantt-scrollbar-thumb-color);
@@ -318,14 +315,14 @@
   background-clip: padding-box;
 }
 
-._taskListHorizontalScroll_13wkq_23::-webkit-scrollbar-thumb:hover {
+._taskListHorizontalScroll_yoz76_19::-webkit-scrollbar-thumb:hover {
   border: 2px solid transparent;
   /*noinspection CssUnresolvedCustomProperty*/
   background: var(--gantt-scrollbar-thumb-color);
   background-clip: padding-box;
 }
 
-._taskListResizer_13wkq_87 {
+._taskListResizer_yoz76_81 {
   position: absolute;
   top: 0;
   right: -3px;
@@ -337,16 +334,16 @@
 }
 
 /*noinspection CssUnresolvedCustomProperty*/
-._taskListResizer_13wkq_87:hover {
+._taskListResizer_yoz76_81:hover {
   background-color: var(--gantt-table-hover-action-color);
   filter: var(--gantt-hover-filter);
 }
 
-._taskListResizer_13wkq_87:hover::before {
+._taskListResizer_yoz76_81:hover::before {
   display: none;
 }
 
-._taskListResizer_13wkq_87::before {
+._taskListResizer_yoz76_81::before {
   content: "";
   position: absolute;
   top: 0;
@@ -357,21 +354,21 @@
   background-color: var(--gantt-table-resize-color, var(--gantt-divider-color));
 }
 
-._horizontalContainer_13wkq_151 {
+._horizontalContainer_yoz76_145 {
   margin: 0;
   padding: 0;
   overflow: hidden;
   flex-grow: 1;
 }
 
-._tableWrapper_13wkq_165 {
+._tableWrapper_yoz76_159 {
   position: relative;
   flex-grow: 1;
   display: flex;
   flex-direction: column;
 }
 
-._scrollToTop_13wkq_179 {
+._scrollToTop_yoz76_173 {
   position: absolute;
   top: 0;
   left: 0;
@@ -379,7 +376,7 @@
   height: 20px;
 }
 
-._scrollToBottom_13wkq_195 {
+._scrollToBottom_yoz76_189 {
   position: absolute;
   bottom: 0;
   left: 0;
@@ -387,7 +384,7 @@
   height: 20px;
 }
 
-._hidden_13wkq_211 {
+._hidden_yoz76_205 {
   display: none;
 }
 ._ganttToday_1oyhk_1 {
@@ -581,7 +578,7 @@
   user-select: none;
   stroke-width: 0;
 }
-._ganttVerticalContainer_5z1c2_1 {
+._ganttVerticalContainer_1wr55_1 {
   overflow-x: scroll;
   overflow-y: hidden;
   font-size: 0;
@@ -591,19 +588,18 @@
   border-right: 1px solid var(--gantt-calendar-divider-color, var(--gantt-divider-color));
   flex-grow: 1;
   height: 100%;
-  min-width: 0;
 }
 
-._ganttVerticalContainer_5z1c2_1::-webkit-scrollbar {
+._ganttVerticalContainer_1wr55_1::-webkit-scrollbar {
   width: 1rem;
   height: 1rem;
 }
 
-._ganttVerticalContainer_5z1c2_1::-webkit-scrollbar-corner {
+._ganttVerticalContainer_1wr55_1::-webkit-scrollbar-corner {
   background: transparent;
 }
 
-._ganttVerticalContainer_5z1c2_1::-webkit-scrollbar-thumb {
+._ganttVerticalContainer_1wr55_1::-webkit-scrollbar-thumb {
   border: 4px solid transparent;
   /*noinspection CssUnresolvedCustomProperty*/
   background: var(--gantt-scrollbar-thumb-color);
@@ -611,20 +607,20 @@
   background-clip: padding-box;
 }
 
-._ganttVerticalContainer_5z1c2_1::-webkit-scrollbar-thumb:hover {
+._ganttVerticalContainer_1wr55_1::-webkit-scrollbar-thumb:hover {
   border: 2px solid transparent;
   /*noinspection CssUnresolvedCustomProperty*/
   background: var(--gantt-scrollbar-thumb-color);
   background-clip: padding-box;
 }
 
-._horizontalContainer_5z1c2_75 {
+._horizontalContainer_1wr55_73 {
   margin: 0;
   padding: 0;
   overflow: hidden;
 }
 
-._wrapper_5z1c2_87 {
+._wrapper_1wr55_85 {
   display: flex;
   padding: 0;
   margin: 0;
@@ -632,14 +628,11 @@
   outline: none;
   position: relative;
   height: 100%;
-  width: 100%;
-  max-width: 100%;
-  overflow: hidden;
   /*noinspection CssUnresolvedCustomProperty*/
   border-bottom: 1px solid var(--gantt-divider-color);
 }
 
-._calendarDragging_5z1c2_117 {
+._calendarDragging_1wr55_109 {
   cursor: grabbing;
 }
 /*noinspection CssUnresolvedCustomProperty*/

package/package.json

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