gantt-task-react-v 1.0.36 → 1.0.37

package/README.md

@@ -7,14 +7,14 @@
 ## Install
 
 ```
-npm install gantt-task-react-v
+npm install webagility-gantt-task-react
 ```
 
 ## How to use it
 
 ```ts
-import { Gantt, Task, EventOption, StylingOption, ViewMode, DisplayOption } from 'gantt-task-react-v';
-import "gantt-task-react-v/dist/index.css";
+import { Gantt, Task, EventOption, StylingOption, ViewMode, DisplayOption } from 'gantt-task-react';
+import "gantt-task-react/dist/index.css";
 
 let tasks: Task[] = [
     {

package/dist/components/gantt/task-gantt.d.ts

@@ -10,6 +10,7 @@ export interface TaskGanttProps extends GanttTaskBarActions {
     fullRowHeight: number;
     fullSvgWidth: number;
     ganttFullHeight: number;
+    ganttHeight: number;
     ganttSVGRef: RefObject<SVGSVGElement>;
     ganttTodayProps: GanttTodayProps;
     horizontalContainerRef: RefObject<HTMLDivElement>;

package/dist/components/other/vertical-scroll.d.ts

@@ -8,4 +8,5 @@ export declare const VerticalScroll: React.FC<{
     onScroll: (event: SyntheticEvent<HTMLDivElement>) => void;
     rtl: boolean;
     verticalScrollbarRef: RefObject<HTMLDivElement>;
+    containerHeight?: number | null;
 }>;

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

@@ -4655,18 +4655,21 @@ const styles$k = {
   scroll
 };
 const VerticalScroll = ({
+  ganttHeight,
   ganttFullHeight,
   headerHeight,
   isChangeInProgress,
   onScroll,
   rtl,
-  verticalScrollbarRef
+  verticalScrollbarRef,
+  containerHeight
 }) => {
+  const scrollHeight = containerHeight !== null && containerHeight !== void 0 ? Math.max(containerHeight - headerHeight, 100) : ganttHeight;
   return /* @__PURE__ */ jsx(
     "div",
     {
       style: {
-        height: `calc(100% - ${headerHeight}px)`,
+        height: scrollHeight,
         marginTop: headerHeight,
         marginLeft: rtl ? void 0 : "-1rem",
         pointerEvents: isChangeInProgress ? "none" : void 0
@@ -10637,14 +10640,14 @@ const TaskListTableDefaultInner = ({
   );
 };
 const TaskListTable = memo(TaskListTableDefaultInner);
-const taskListRoot = "_taskListRoot_1x5nq_1";
-const taskListHorizontalScroll = "_taskListHorizontalScroll_1x5nq_25";
-const taskListResizer = "_taskListResizer_1x5nq_89";
-const horizontalContainer$1 = "_horizontalContainer_1x5nq_153";
-const tableWrapper = "_tableWrapper_1x5nq_171";
-const scrollToTop = "_scrollToTop_1x5nq_183";
-const scrollToBottom = "_scrollToBottom_1x5nq_199";
-const hidden = "_hidden_1x5nq_215";
+const taskListRoot = "_taskListRoot_apbmu_1";
+const taskListHorizontalScroll = "_taskListHorizontalScroll_apbmu_19";
+const taskListResizer = "_taskListResizer_apbmu_83";
+const horizontalContainer$1 = "_horizontalContainer_apbmu_147";
+const tableWrapper = "_tableWrapper_apbmu_163";
+const scrollToTop = "_scrollToTop_apbmu_177";
+const scrollToBottom = "_scrollToBottom_apbmu_193";
+const hidden = "_hidden_apbmu_209";
 const styles$d = {
   taskListRoot,
   taskListHorizontalScroll,
@@ -10808,15 +10811,21 @@ const TaskListInner = ({
                 ref: taskListContainerRef,
                 className: styles$d.horizontalContainer,
                 style: {
+                  height: "100%",
+                  minHeight: distances.minimumRowDisplayed * distances.rowHeight,
                   width: taskListWidth
                 },
                 children: /* @__PURE__ */ jsx(
                   "div",
                   {
                     style: {
+                      height: "100%",
+                      minHeight: Math.max(
+                        ganttFullHeight,
+                        distances.minimumRowDisplayed * distances.rowHeight
+                      ),
                       backgroundSize: `100% ${fullRowHeight * 2}px`,
-                      backgroundImage: `linear-gradient(to bottom, transparent ${fullRowHeight}px, #f5f5f5 ${fullRowHeight}px)`,
-                      height: "100%"
+                      backgroundImage: `linear-gradient(to bottom, transparent ${fullRowHeight}px, #f5f5f5 ${fullRowHeight}px)`
                     },
                     children: /* @__PURE__ */ jsx(
                       RenderTaskListTable,
@@ -13127,17 +13136,13 @@ const TaskGanttContentInner = (props) => {
   ] });
 };
 const TaskGanttContent = memo(TaskGanttContentInner);
-const ganttVerticalContainer = "_ganttVerticalContainer_1xboz_1";
-const horizontalContainer = "_horizontalContainer_1xboz_81";
-const ganttHeader = "_ganttHeader_1xboz_97";
-const ganttBodyScroll = "_ganttBodyScroll_1xboz_107";
-const wrapper = "_wrapper_1xboz_123";
-const calendarDragging = "_calendarDragging_1xboz_153";
+const ganttVerticalContainer = "_ganttVerticalContainer_i4cef_1";
+const horizontalContainer = "_horizontalContainer_i4cef_79";
+const wrapper = "_wrapper_i4cef_95";
+const calendarDragging = "_calendarDragging_i4cef_125";
 const styles$2 = {
   ganttVerticalContainer,
   horizontalContainer,
-  ganttHeader,
-  ganttBodyScroll,
   wrapper,
   calendarDragging
 };
@@ -13166,13 +13171,15 @@ const TaskGanttInner = (props) => {
   const containerStyle = useMemo(
     () => ({
       height: "100%",
-      width: "100%"
+      width: fullSvgWidth,
+      minHeight: minimumRowDisplayed * rowHeight
     }),
-    []
+    [minimumRowDisplayed, rowHeight, fullSvgWidth]
   );
   const gridStyle = useMemo(
     () => ({
-      height: Math.max(ganttFullHeight, minimumRowDisplayed * rowHeight),
+      height: "100%",
+      minHeight: Math.max(ganttFullHeight, minimumRowDisplayed * rowHeight),
       width: fullSvgWidth,
       backgroundSize: `${columnWidth}px ${fullRowHeight * 2}px`,
       backgroundPositionX: additionalLeftSpace || void 0,
@@ -13272,7 +13279,7 @@ const TaskGanttInner = (props) => {
       onScroll: onVerticalScrollbarScrollX,
       dir: "ltr",
       children: [
-        /* @__PURE__ */ jsx("div", { className: styles$2.ganttHeader, children: /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsx(
           "svg",
           {
             xmlns: "http://www.w3.org/2000/svg",
@@ -13281,8 +13288,8 @@ const TaskGanttInner = (props) => {
             fontFamily: "var(--gantt-font-family)",
             children: /* @__PURE__ */ jsx(Calendar, { scrollRef: verticalGanttContainerRef, ...calendarProps })
           }
-        ) }),
-        /* @__PURE__ */ jsx("div", { className: styles$2.ganttBodyScroll, children: /* @__PURE__ */ jsx(
+        ),
+        /* @__PURE__ */ jsx(
           "div",
           {
             ref: horizontalContainerRef,
@@ -13312,7 +13319,7 @@ const TaskGanttInner = (props) => {
               }
             ) })
           }
-        ) })
+        )
       ]
     }
   );
@@ -18525,8 +18532,7 @@ const Gantt = (props) => {
     viewDate,
     viewMode = ViewMode.Day,
     locale: clientLocale,
-    language,
-    height: clientHeight
+    language
   } = props;
   const ganttSVGRef = useRef(null);
   const wrapperRef = useRef(null);
@@ -18535,7 +18541,6 @@ const Gantt = (props) => {
   const theme = useMemo(() => buildGanttTheme(clientTheme), [clientTheme]);
   const { distances, dateFormats: dateFormats2, rtl } = theme;
   const [waitCommitTasks, setWaitCommitTasks] = useState(false);
-  const [measuredHeight, setMeasuredHeight] = useState();
   const taskBar = useMemo(() => {
     return mergeDeepObj(
       {},
@@ -18673,27 +18678,34 @@ const Gantt = (props) => {
     },
     [maxLevelLength, fullRowHeight, (_a = taskList == null ? void 0 : taskList.tableBottom) == null ? void 0 : _a.height]
   );
+  const [containerHeight, setContainerHeight] = useState(null);
+  useEffect(() => {
+    const wrapperElement = wrapperRef.current;
+    if (!wrapperElement) {
+      return void 0;
+    }
+    const resizeObserver = new ResizeObserver((entries) => {
+      for (const entry of entries) {
+        const { height } = entry.contentRect;
+        if (height > 0) {
+          setContainerHeight(height);
+        }
+      }
+    });
+    resizeObserver.observe(wrapperElement);
+    return () => {
+      resizeObserver.disconnect();
+    };
+  }, []);
   const ganttHeight = useMemo(() => {
-    const minRowsHeight = distances.minimumRowDisplayed * distances.rowHeight;
-    const resolvedHeightFromProp = typeof clientHeight === "number" ? clientHeight : void 0;
-    const resolvedHeightFromMeasured = measuredHeight;
-    const resolvedThemeHeight = typeof distances.ganttHeight === "number" ? distances.ganttHeight : void 0;
-    const candidateHeights = [
-      resolvedHeightFromProp,
-      resolvedHeightFromMeasured,
-      resolvedThemeHeight,
-      ganttFullHeight
-    ].filter((v) => typeof v === "number");
-    if (candidateHeights.length === 0) {
-      return Math.min(ganttFullHeight, minRowsHeight);
-    }
-    const chosen = Math.min(
-      ...candidateHeights,
-      ganttFullHeight,
-      minRowsHeight
-    );
-    return chosen;
-  }, [distances, ganttFullHeight, clientHeight, measuredHeight]);
+    if (containerHeight !== null) {
+      return Math.min(
+        containerHeight - distances.headerHeight,
+        ganttFullHeight
+      );
+    }
+    return distances.ganttHeight ? Math.min(distances.ganttHeight, ganttFullHeight) : ganttFullHeight;
+  }, [distances, ganttFullHeight, containerHeight]);
   const [taskToRowIndexMap, rowIndexToTaskMap, mapGlobalRowIndexToTask] = useMemo(
     () => getMapTaskToRowIndex(visibleTasks, comparisonLevels),
     [visibleTasks, comparisonLevels]
@@ -18750,8 +18762,8 @@ const Gantt = (props) => {
     [renderedColumnIndexes]
   );
   const svgWidth = useMemo(
-    () => datesLength * distances.columnWidth,
-    [datesLength, distances]
+    () => Math.max(datesLength * distances.columnWidth, svgClientWidth),
+    [datesLength, distances, svgClientWidth]
   );
   const countTaskCoordinates$1 = useCallback(
     (task) => countTaskCoordinates(
@@ -18876,37 +18888,6 @@ const Gantt = (props) => {
       setScrollXProgrammatically(datesLength * distances.columnWidth);
     }
   }, [datesLength, distances, rtl, setScrollXProgrammatically, scrollX]);
-  useEffect(() => {
-    if (typeof clientHeight === "number") {
-      setMeasuredHeight(clientHeight);
-      return () => {
-      };
-    }
-    const node = wrapperRef.current;
-    if (!node) {
-      return () => {
-      };
-    }
-    setMeasuredHeight(node.getBoundingClientRect().height);
-    const ResizeObserverCtor = window.ResizeObserver;
-    let ro;
-    if (typeof ResizeObserverCtor === "function") {
-      const ctor = ResizeObserverCtor;
-      ro = new ctor(() => {
-        const rect = node.getBoundingClientRect();
-        setMeasuredHeight(rect.height);
-      });
-      ro.observe(node);
-    }
-    return () => {
-      if (ro) {
-        try {
-          ro.disconnect();
-        } catch (e) {
-        }
-      }
-    };
-  }, [clientHeight, wrapperRef]);
   useEffect(() => {
     if (viewDate && !currentViewDate || viewDate && (currentViewDate == null ? void 0 : currentViewDate.valueOf()) !== viewDate.valueOf()) {
       const index2 = getDatesDiff(viewDate, startDate, viewMode);
@@ -19875,6 +19856,7 @@ const Gantt = (props) => {
             fullRowHeight,
             fullSvgWidth,
             ganttFullHeight,
+            ganttHeight,
             ganttSVGRef,
             ganttTodayProps: gridProps,
             horizontalContainerRef,
@@ -19904,7 +19886,8 @@ const Gantt = (props) => {
             isChangeInProgress: Boolean(changeInProgress),
             onScroll: onVerticalScrollbarScrollY,
             rtl,
-            verticalScrollbarRef
+            verticalScrollbarRef,
+            containerHeight
           }
         ),
         taskList.enableTableListContextMenu && !waitCommitTasks && /* @__PURE__ */ jsx(

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

@@ -4672,18 +4672,21 @@
     scroll
   };
   const VerticalScroll = ({
+    ganttHeight,
     ganttFullHeight,
     headerHeight,
     isChangeInProgress,
     onScroll,
     rtl,
-    verticalScrollbarRef
+    verticalScrollbarRef,
+    containerHeight
   }) => {
+    const scrollHeight = containerHeight !== null && containerHeight !== void 0 ? Math.max(containerHeight - headerHeight, 100) : ganttHeight;
     return /* @__PURE__ */ jsxRuntime.jsx(
       "div",
       {
         style: {
-          height: `calc(100% - ${headerHeight}px)`,
+          height: scrollHeight,
           marginTop: headerHeight,
           marginLeft: rtl ? void 0 : "-1rem",
           pointerEvents: isChangeInProgress ? "none" : void 0
@@ -10654,14 +10657,14 @@
     );
   };
   const TaskListTable = React.memo(TaskListTableDefaultInner);
-  const taskListRoot = "_taskListRoot_1x5nq_1";
-  const taskListHorizontalScroll = "_taskListHorizontalScroll_1x5nq_25";
-  const taskListResizer = "_taskListResizer_1x5nq_89";
-  const horizontalContainer$1 = "_horizontalContainer_1x5nq_153";
-  const tableWrapper = "_tableWrapper_1x5nq_171";
-  const scrollToTop = "_scrollToTop_1x5nq_183";
-  const scrollToBottom = "_scrollToBottom_1x5nq_199";
-  const hidden = "_hidden_1x5nq_215";
+  const taskListRoot = "_taskListRoot_apbmu_1";
+  const taskListHorizontalScroll = "_taskListHorizontalScroll_apbmu_19";
+  const taskListResizer = "_taskListResizer_apbmu_83";
+  const horizontalContainer$1 = "_horizontalContainer_apbmu_147";
+  const tableWrapper = "_tableWrapper_apbmu_163";
+  const scrollToTop = "_scrollToTop_apbmu_177";
+  const scrollToBottom = "_scrollToBottom_apbmu_193";
+  const hidden = "_hidden_apbmu_209";
   const styles$d = {
     taskListRoot,
     taskListHorizontalScroll,
@@ -10825,15 +10828,21 @@
                   ref: taskListContainerRef,
                   className: styles$d.horizontalContainer,
                   style: {
+                    height: "100%",
+                    minHeight: distances.minimumRowDisplayed * distances.rowHeight,
                     width: taskListWidth
                   },
                   children: /* @__PURE__ */ jsxRuntime.jsx(
                     "div",
                     {
                       style: {
+                        height: "100%",
+                        minHeight: Math.max(
+                          ganttFullHeight,
+                          distances.minimumRowDisplayed * distances.rowHeight
+                        ),
                         backgroundSize: `100% ${fullRowHeight * 2}px`,
-                        backgroundImage: `linear-gradient(to bottom, transparent ${fullRowHeight}px, #f5f5f5 ${fullRowHeight}px)`,
-                        height: "100%"
+                        backgroundImage: `linear-gradient(to bottom, transparent ${fullRowHeight}px, #f5f5f5 ${fullRowHeight}px)`
                       },
                       children: /* @__PURE__ */ jsxRuntime.jsx(
                         RenderTaskListTable,
@@ -13144,17 +13153,13 @@
     ] });
   };
   const TaskGanttContent = React.memo(TaskGanttContentInner);
-  const ganttVerticalContainer = "_ganttVerticalContainer_1xboz_1";
-  const horizontalContainer = "_horizontalContainer_1xboz_81";
-  const ganttHeader = "_ganttHeader_1xboz_97";
-  const ganttBodyScroll = "_ganttBodyScroll_1xboz_107";
-  const wrapper = "_wrapper_1xboz_123";
-  const calendarDragging = "_calendarDragging_1xboz_153";
+  const ganttVerticalContainer = "_ganttVerticalContainer_i4cef_1";
+  const horizontalContainer = "_horizontalContainer_i4cef_79";
+  const wrapper = "_wrapper_i4cef_95";
+  const calendarDragging = "_calendarDragging_i4cef_125";
   const styles$2 = {
     ganttVerticalContainer,
     horizontalContainer,
-    ganttHeader,
-    ganttBodyScroll,
     wrapper,
     calendarDragging
   };
@@ -13183,13 +13188,15 @@
     const containerStyle = React.useMemo(
       () => ({
         height: "100%",
-        width: "100%"
+        width: fullSvgWidth,
+        minHeight: minimumRowDisplayed * rowHeight
       }),
-      []
+      [minimumRowDisplayed, rowHeight, fullSvgWidth]
     );
     const gridStyle = React.useMemo(
       () => ({
-        height: Math.max(ganttFullHeight, minimumRowDisplayed * rowHeight),
+        height: "100%",
+        minHeight: Math.max(ganttFullHeight, minimumRowDisplayed * rowHeight),
         width: fullSvgWidth,
         backgroundSize: `${columnWidth}px ${fullRowHeight * 2}px`,
         backgroundPositionX: additionalLeftSpace || void 0,
@@ -13289,7 +13296,7 @@
         onScroll: onVerticalScrollbarScrollX,
         dir: "ltr",
         children: [
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles$2.ganttHeader, children: /* @__PURE__ */ jsxRuntime.jsx(
+          /* @__PURE__ */ jsxRuntime.jsx(
             "svg",
             {
               xmlns: "http://www.w3.org/2000/svg",
@@ -13298,8 +13305,8 @@
               fontFamily: "var(--gantt-font-family)",
               children: /* @__PURE__ */ jsxRuntime.jsx(Calendar, { scrollRef: verticalGanttContainerRef, ...calendarProps })
             }
-          ) }),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles$2.ganttBodyScroll, children: /* @__PURE__ */ jsxRuntime.jsx(
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
             "div",
             {
               ref: horizontalContainerRef,
@@ -13329,7 +13336,7 @@
                 }
               ) })
             }
-          ) })
+          )
         ]
       }
     );
@@ -18542,8 +18549,7 @@
       viewDate,
       viewMode = ViewMode.Day,
       locale: clientLocale,
-      language,
-      height: clientHeight
+      language
     } = props;
     const ganttSVGRef = React.useRef(null);
     const wrapperRef = React.useRef(null);
@@ -18552,7 +18558,6 @@
     const theme = React.useMemo(() => buildGanttTheme(clientTheme), [clientTheme]);
     const { distances, dateFormats: dateFormats2, rtl } = theme;
     const [waitCommitTasks, setWaitCommitTasks] = React.useState(false);
-    const [measuredHeight, setMeasuredHeight] = React.useState();
     const taskBar = React.useMemo(() => {
       return mergeDeepObj(
         {},
@@ -18690,27 +18695,34 @@
       },
       [maxLevelLength, fullRowHeight, (_a = taskList == null ? void 0 : taskList.tableBottom) == null ? void 0 : _a.height]
     );
+    const [containerHeight, setContainerHeight] = React.useState(null);
+    React.useEffect(() => {
+      const wrapperElement = wrapperRef.current;
+      if (!wrapperElement) {
+        return void 0;
+      }
+      const resizeObserver = new ResizeObserver((entries) => {
+        for (const entry of entries) {
+          const { height } = entry.contentRect;
+          if (height > 0) {
+            setContainerHeight(height);
+          }
+        }
+      });
+      resizeObserver.observe(wrapperElement);
+      return () => {
+        resizeObserver.disconnect();
+      };
+    }, []);
     const ganttHeight = React.useMemo(() => {
-      const minRowsHeight = distances.minimumRowDisplayed * distances.rowHeight;
-      const resolvedHeightFromProp = typeof clientHeight === "number" ? clientHeight : void 0;
-      const resolvedHeightFromMeasured = measuredHeight;
-      const resolvedThemeHeight = typeof distances.ganttHeight === "number" ? distances.ganttHeight : void 0;
-      const candidateHeights = [
-        resolvedHeightFromProp,
-        resolvedHeightFromMeasured,
-        resolvedThemeHeight,
-        ganttFullHeight
-      ].filter((v) => typeof v === "number");
-      if (candidateHeights.length === 0) {
-        return Math.min(ganttFullHeight, minRowsHeight);
-      }
-      const chosen = Math.min(
-        ...candidateHeights,
-        ganttFullHeight,
-        minRowsHeight
-      );
-      return chosen;
-    }, [distances, ganttFullHeight, clientHeight, measuredHeight]);
+      if (containerHeight !== null) {
+        return Math.min(
+          containerHeight - distances.headerHeight,
+          ganttFullHeight
+        );
+      }
+      return distances.ganttHeight ? Math.min(distances.ganttHeight, ganttFullHeight) : ganttFullHeight;
+    }, [distances, ganttFullHeight, containerHeight]);
     const [taskToRowIndexMap, rowIndexToTaskMap, mapGlobalRowIndexToTask] = React.useMemo(
       () => getMapTaskToRowIndex(visibleTasks, comparisonLevels),
       [visibleTasks, comparisonLevels]
@@ -18767,8 +18779,8 @@
       [renderedColumnIndexes]
     );
     const svgWidth = React.useMemo(
-      () => datesLength * distances.columnWidth,
-      [datesLength, distances]
+      () => Math.max(datesLength * distances.columnWidth, svgClientWidth),
+      [datesLength, distances, svgClientWidth]
     );
     const countTaskCoordinates$1 = React.useCallback(
       (task) => countTaskCoordinates(
@@ -18893,37 +18905,6 @@
         setScrollXProgrammatically(datesLength * distances.columnWidth);
       }
     }, [datesLength, distances, rtl, setScrollXProgrammatically, scrollX]);
-    React.useEffect(() => {
-      if (typeof clientHeight === "number") {
-        setMeasuredHeight(clientHeight);
-        return () => {
-        };
-      }
-      const node = wrapperRef.current;
-      if (!node) {
-        return () => {
-        };
-      }
-      setMeasuredHeight(node.getBoundingClientRect().height);
-      const ResizeObserverCtor = window.ResizeObserver;
-      let ro;
-      if (typeof ResizeObserverCtor === "function") {
-        const ctor = ResizeObserverCtor;
-        ro = new ctor(() => {
-          const rect = node.getBoundingClientRect();
-          setMeasuredHeight(rect.height);
-        });
-        ro.observe(node);
-      }
-      return () => {
-        if (ro) {
-          try {
-            ro.disconnect();
-          } catch (e) {
-          }
-        }
-      };
-    }, [clientHeight, wrapperRef]);
     React.useEffect(() => {
       if (viewDate && !currentViewDate || viewDate && (currentViewDate == null ? void 0 : currentViewDate.valueOf()) !== viewDate.valueOf()) {
         const index2 = getDatesDiff(viewDate, startDate, viewMode);
@@ -19892,6 +19873,7 @@
               fullRowHeight,
               fullSvgWidth,
               ganttFullHeight,
+              ganttHeight,
               ganttSVGRef,
               ganttTodayProps: gridProps,
               horizontalContainerRef,
@@ -19921,7 +19903,8 @@
               isChangeInProgress: Boolean(changeInProgress),
               onScroll: onVerticalScrollbarScrollY,
               rtl,
-              verticalScrollbarRef
+              verticalScrollbarRef,
+              containerHeight
             }
           ),
           taskList.enableTableListContextMenu && !waitCommitTasks && /* @__PURE__ */ jsxRuntime.jsx(

package/dist/style.css

@@ -282,36 +282,33 @@
   border-bottom: 1px solid var(--gantt-divider-color);
   table-layout: fixed;
 }
-._taskListRoot_1x5nq_1 {
+._taskListRoot_apbmu_1 {
   position: relative;
   /*noinspection CssUnresolvedCustomProperty*/
   border-left: 1px solid var(--gantt-table-divider-color, var(--gantt-divider-color));
   height: 100%;
   display: flex;
   flex-direction: column;
-  overflow: hidden;
-  max-width: 100%;
-  flex-shrink: 0;
 }
 
-._taskListHorizontalScroll_1x5nq_25 {
-  overflow-x: auto;
-  overflow-y: hidden;
+._taskListHorizontalScroll_apbmu_19 {
+  overflow-x: scroll;
   flex: 1;
+  min-height: 0;
   display: flex;
   flex-direction: column;
 }
 
-._taskListHorizontalScroll_1x5nq_25::-webkit-scrollbar {
+._taskListHorizontalScroll_apbmu_19::-webkit-scrollbar {
   width: 1rem;
   height: 1rem;
 }
 
-._taskListHorizontalScroll_1x5nq_25::-webkit-scrollbar-corner {
+._taskListHorizontalScroll_apbmu_19::-webkit-scrollbar-corner {
   background: transparent;
 }
 
-._taskListHorizontalScroll_1x5nq_25::-webkit-scrollbar-thumb {
+._taskListHorizontalScroll_apbmu_19::-webkit-scrollbar-thumb {
   border: 4px solid transparent;
   /*noinspection CssUnresolvedCustomProperty*/
   background: var(--gantt-scrollbar-thumb-color);
@@ -319,14 +316,14 @@
   background-clip: padding-box;
 }
 
-._taskListHorizontalScroll_1x5nq_25::-webkit-scrollbar-thumb:hover {
+._taskListHorizontalScroll_apbmu_19::-webkit-scrollbar-thumb:hover {
   border: 2px solid transparent;
   /*noinspection CssUnresolvedCustomProperty*/
   background: var(--gantt-scrollbar-thumb-color);
   background-clip: padding-box;
 }
 
-._taskListResizer_1x5nq_89 {
+._taskListResizer_apbmu_83 {
   position: absolute;
   top: 0;
   right: -3px;
@@ -338,16 +335,16 @@
 }
 
 /*noinspection CssUnresolvedCustomProperty*/
-._taskListResizer_1x5nq_89:hover {
+._taskListResizer_apbmu_83:hover {
   background-color: var(--gantt-table-hover-action-color);
   filter: var(--gantt-hover-filter);
 }
 
-._taskListResizer_1x5nq_89:hover::before {
+._taskListResizer_apbmu_83:hover::before {
   display: none;
 }
 
-._taskListResizer_1x5nq_89::before {
+._taskListResizer_apbmu_83::before {
   content: "";
   position: absolute;
   top: 0;
@@ -358,22 +355,22 @@
   background-color: var(--gantt-table-resize-color, var(--gantt-divider-color));
 }
 
-._horizontalContainer_1x5nq_153 {
+._horizontalContainer_apbmu_147 {
   margin: 0;
   padding: 0;
-  overflow-y: auto;
-  overflow-x: hidden;
-  height: 100%;
+  overflow: hidden;
+  flex: 1;
   min-height: 0;
 }
 
-._tableWrapper_1x5nq_171 {
+._tableWrapper_apbmu_163 {
   position: relative;
   flex: 1;
   min-height: 0;
+  overflow: hidden;
 }
 
-._scrollToTop_1x5nq_183 {
+._scrollToTop_apbmu_177 {
   position: absolute;
   top: 0;
   left: 0;
@@ -381,7 +378,7 @@
   height: 20px;
 }
 
-._scrollToBottom_1x5nq_199 {
+._scrollToBottom_apbmu_193 {
   position: absolute;
   bottom: 0;
   left: 0;
@@ -389,7 +386,7 @@
   height: 20px;
 }
 
-._hidden_1x5nq_215 {
+._hidden_apbmu_209 {
   display: none;
 }
 ._ganttToday_1oyhk_1 {
@@ -583,10 +580,8 @@
   user-select: none;
   stroke-width: 0;
 }
-._ganttVerticalContainer_1xboz_1 {
-  display: flex;
-  flex-direction: column;
-  overflow-x: auto;
+._ganttVerticalContainer_i4cef_1 {
+  overflow-x: scroll;
   overflow-y: hidden;
   font-size: 0;
   margin: 0;
@@ -594,21 +589,22 @@
   /*noinspection CssUnresolvedCustomProperty*/
   border-right: 1px solid var(--gantt-calendar-divider-color, var(--gantt-divider-color));
   flex-grow: 1;
+  min-width: 0;
   height: 100%;
-  min-height: 0;
-  max-width: 100%;
+  display: flex;
+  flex-direction: column;
 }
 
-._ganttVerticalContainer_1xboz_1::-webkit-scrollbar {
+._ganttVerticalContainer_i4cef_1::-webkit-scrollbar {
   width: 1rem;
   height: 1rem;
 }
 
-._ganttVerticalContainer_1xboz_1::-webkit-scrollbar-corner {
+._ganttVerticalContainer_i4cef_1::-webkit-scrollbar-corner {
   background: transparent;
 }
 
-._ganttVerticalContainer_1xboz_1::-webkit-scrollbar-thumb {
+._ganttVerticalContainer_i4cef_1::-webkit-scrollbar-thumb {
   border: 4px solid transparent;
   /*noinspection CssUnresolvedCustomProperty*/
   background: var(--gantt-scrollbar-thumb-color);
@@ -616,35 +612,22 @@
   background-clip: padding-box;
 }
 
-._ganttVerticalContainer_1xboz_1::-webkit-scrollbar-thumb:hover {
+._ganttVerticalContainer_i4cef_1::-webkit-scrollbar-thumb:hover {
   border: 2px solid transparent;
   /*noinspection CssUnresolvedCustomProperty*/
   background: var(--gantt-scrollbar-thumb-color);
   background-clip: padding-box;
 }
 
-._horizontalContainer_1xboz_81 {
+._horizontalContainer_i4cef_79 {
   margin: 0;
   padding: 0;
   overflow: hidden;
-  height: 100%;
-  min-height: 0;
-}
-
-._ganttHeader_1xboz_97 {
-  flex: 0 0 auto;
-  z-index: 3;
-}
-
-._ganttBodyScroll_1xboz_107 {
-  flex: 1 1 auto;
-  overflow-y: auto;
-  overflow-x: hidden;
+  flex: 1;
   min-height: 0;
-  height: 100%;
 }
 
-._wrapper_1xboz_123 {
+._wrapper_i4cef_95 {
   display: flex;
   padding: 0;
   margin: 0;
@@ -655,11 +638,11 @@
   border-bottom: 1px solid var(--gantt-divider-color);
   height: 100%;
   min-height: 0;
-  max-width: 100%;
+  flex: 1;
   overflow: hidden;
 }
 
-._calendarDragging_1xboz_153 {
+._calendarDragging_i4cef_125 {
   cursor: grabbing;
 }
 /*noinspection CssUnresolvedCustomProperty*/

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

@@ -320,13 +320,6 @@ export interface GanttProps {
      * Move dates of tasks to working days during change
      */
     isAdjustToWorkingDates?: boolean;
-    /**
-     * Height of the Gantt component. Can be a number (pixels) or a CSS height string
-     * (for example "100%" to fill a parent container). When a CSS string is
-     * provided the component will measure its rendered height and use it for
-     * internal scroll calculations.
-     */
-    height?: number | string;
 }
 export interface GanttTaskBarActions {
     allowMoveTaskBar?: (action: TaskBarMoveAction, task: RenderTask) => boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gantt-task-react-v",
-  "version": "1.0.36",
+  "version": "1.0.37",
   "description": "Interactive Gantt Chart for React with TypeScript.",
   "author": "aguilanbon",
   "homepage": "https://github.com/aguilanbon/gantt-task-react-v",
@@ -23,7 +23,7 @@
   ],
   "scripts": {
     "storybook": "start-storybook -p 6006",
-    "build": "vite build && node -e \"require('child_process').execSync('tsc', {stdio:'inherit'})\"",
+    "build": "vite build && tsc",
     "start": "vite --host",
     "prepare": "npm run build",
     "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
@@ -42,10 +42,9 @@
     "@dnd-kit/sortable": "^8.0.0",
     "@floating-ui/dom": "1.6.3",
     "@floating-ui/react": "0.26.11",
-    "@rollup/rollup-win32-x64-msvc": "^4.48.1",
     "date-fns": "3.6.0",
-    "i18next": "^25.4.1",
-    "react-i18next": "^15.7.2"
+    "i18next": "^24.0.5",
+    "react-i18next": "^15.1.3"
   },
   "peerDependencies": {
     "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc",
@@ -57,14 +56,14 @@
     "@chromatic-com/storybook": "^1.3.1",
     "@rollup/plugin-image": "3.0.3",
     "@storybook/addon-essentials": "^8.0.6",
-    "@storybook/addon-interactions": "^8.6.14",
+    "@storybook/addon-interactions": "^8.0.6",
     "@storybook/addon-links": "^8.0.6",
     "@storybook/addon-onboarding": "^8.0.6",
     "@storybook/blocks": "^8.0.6",
     "@storybook/cli": "^8.4.4",
-    "@storybook/react": "^8.6.14",
+    "@storybook/react": "^8.4.4",
     "@storybook/react-vite": "^8.0.6",
-    "@storybook/test": "^8.6.14",
+    "@storybook/test": "^8.0.6",
     "@testing-library/jest-dom": "^6.4.2",
     "@testing-library/react": "^14.2.2",
     "@testing-library/user-event": "^14.2.1",

package/dist/helpers/use-element-width.d.ts

@@ -1 +0,0 @@
-export {};