gantt-task-react-v 1.0.36 → 1.0.38

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/task-list/index.d.ts

@@ -14,6 +14,7 @@ export type TaskListProps = {
     distances: Distances;
     fullRowHeight: number;
     ganttFullHeight: number;
+    ganttHeight: number;
     getTaskCurrentState: (task: Task) => Task;
     handleAddTask: (task: Task | null) => void;
     handleDeleteTasks: (task: RenderTask[]) => void;

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

@@ -4655,6 +4655,7 @@ const styles$k = {
   scroll
 };
 const VerticalScroll = ({
+  ganttHeight,
   ganttFullHeight,
   headerHeight,
   isChangeInProgress,
@@ -4666,7 +4667,7 @@ const VerticalScroll = ({
     "div",
     {
       style: {
-        height: `calc(100% - ${headerHeight}px)`,
+        height: ganttHeight,
         marginTop: headerHeight,
         marginLeft: rtl ? void 0 : "-1rem",
         pointerEvents: isChangeInProgress ? "none" : void 0
@@ -5161,7 +5162,6 @@ const DEFAULT_THEME = {
     expandIconWidth: 20,
     handleWidth: 8,
     headerHeight: 50,
-    ganttHeight: 600,
     minimumRowDisplayed: 4,
     nestedTaskNameOffset: 20,
     relationCircleOffset: 10,
@@ -10637,14 +10637,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_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,
@@ -10678,6 +10678,7 @@ const TaskListInner = ({
   distances,
   fullRowHeight,
   ganttFullHeight,
+  ganttHeight,
   getTaskCurrentState,
   handleAddTask,
   handleDeleteTasks,
@@ -10808,15 +10809,22 @@ const TaskListInner = ({
                 ref: taskListContainerRef,
                 className: styles$d.horizontalContainer,
                 style: {
+                  height: Math.max(
+                    ganttHeight - ((tableBottom == null ? void 0 : tableBottom.height) || 0),
+                    distances.minimumRowDisplayed * distances.rowHeight
+                  ),
                   width: taskListWidth
                 },
                 children: /* @__PURE__ */ jsx(
                   "div",
                   {
                     style: {
+                      height: 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 +13135,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_1wr55_1";
+const horizontalContainer = "_horizontalContainer_1wr55_73";
+const wrapper = "_wrapper_1wr55_85";
+const calendarDragging = "_calendarDragging_1wr55_109";
 const styles$2 = {
   ganttVerticalContainer,
   horizontalContainer,
-  ganttHeader,
-  ganttBodyScroll,
   wrapper,
   calendarDragging
 };
@@ -13149,6 +13153,7 @@ const TaskGanttInner = (props) => {
     fullRowHeight,
     fullSvgWidth,
     ganttFullHeight,
+    ganttHeight,
     ganttSVGRef,
     ganttTodayProps,
     ganttTodayProps: {
@@ -13165,10 +13170,10 @@ const TaskGanttInner = (props) => {
   const moveStateScrollRef = useRef(null);
   const containerStyle = useMemo(
     () => ({
-      height: "100%",
-      width: "100%"
+      height: Math.max(ganttHeight, minimumRowDisplayed * rowHeight),
+      width: fullSvgWidth
     }),
-    []
+    [ganttHeight, minimumRowDisplayed, rowHeight, fullSvgWidth]
   );
   const gridStyle = useMemo(
     () => ({
@@ -13272,7 +13277,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 +13286,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,
@@ -13298,21 +13303,13 @@ const TaskGanttInner = (props) => {
                 ref: ganttSVGRef,
                 children: [
                   /* @__PURE__ */ jsx(GanttToday, { ...ganttTodayProps }),
-                  /* @__PURE__ */ jsx(
-                    "rect",
-                    {
-                      ref: contentRef,
-                      width: "100%",
-                      height: "100%",
-                      fill: "transparent"
-                    }
-                  ),
+                  /* @__PURE__ */ jsx("rect", { ref: contentRef, width: "100%", height: "100%", fill: "transparent" }),
                   /* @__PURE__ */ jsx(TaskGanttContent, { ...barProps })
                 ]
               }
             ) })
           }
-        ) })
+        )
       ]
     }
   );
@@ -18525,8 +18522,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 +18531,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(
       {},
@@ -18593,9 +18588,28 @@ const Gantt = (props) => {
   const [sortedTasks, setSortedTasks] = useState(
     () => [...clientTasks].sort(sortTasks)
   );
+  const [containerHeight, setContainerHeight] = useState(
+    void 0
+  );
   useEffect(() => {
     setSortedTasks([...clientTasks].sort(sortTasks));
   }, [clientTasks]);
+  useEffect(() => {
+    if (!wrapperRef.current) {
+      return () => {
+      };
+    }
+    const resizeObserver = new ResizeObserver((entries) => {
+      for (const entry of entries) {
+        const { height } = entry.contentRect;
+        setContainerHeight(height);
+      }
+    });
+    resizeObserver.observe(wrapperRef.current);
+    return () => {
+      resizeObserver.disconnect();
+    };
+  }, []);
   const [childTasksMap, rootTasksMap] = useMemo(
     () => getChildsAndRoots(sortedTasks, null),
     [sortedTasks]
@@ -18674,26 +18688,20 @@ const Gantt = (props) => {
     [maxLevelLength, fullRowHeight, (_a = taskList == null ? void 0 : taskList.tableBottom) == null ? void 0 : _a.height]
   );
   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 (distances.ganttHeight) {
+      return Math.min(distances.ganttHeight, ganttFullHeight);
+    }
+    if (containerHeight) {
+      const availableHeight = containerHeight - distances.headerHeight;
+      return Math.min(availableHeight, ganttFullHeight);
+    }
+    return ganttFullHeight;
+  }, [
+    distances.ganttHeight,
+    distances.headerHeight,
+    ganttFullHeight,
+    containerHeight
+  ]);
   const [taskToRowIndexMap, rowIndexToTaskMap, mapGlobalRowIndexToTask] = useMemo(
     () => getMapTaskToRowIndex(visibleTasks, comparisonLevels),
     [visibleTasks, comparisonLevels]
@@ -18750,8 +18758,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 +18884,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);
@@ -19806,6 +19783,7 @@ const Gantt = (props) => {
       distances,
       fullRowHeight,
       ganttFullHeight,
+      ganttHeight,
       getTaskCurrentState,
       handleAddTask,
       handleDeleteTasks,
@@ -19835,6 +19813,7 @@ const Gantt = (props) => {
       distances,
       fullRowHeight,
       ganttFullHeight,
+      ganttHeight,
       getTaskCurrentState,
       handleAddTask,
       handleDeleteTasks,
@@ -19875,6 +19854,7 @@ const Gantt = (props) => {
             fullRowHeight,
             fullSvgWidth,
             ganttFullHeight,
+            ganttHeight,
             ganttSVGRef,
             ganttTodayProps: gridProps,
             horizontalContainerRef,

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

@@ -4672,6 +4672,7 @@
     scroll
   };
   const VerticalScroll = ({
+    ganttHeight,
     ganttFullHeight,
     headerHeight,
     isChangeInProgress,
@@ -4683,7 +4684,7 @@
       "div",
       {
         style: {
-          height: `calc(100% - ${headerHeight}px)`,
+          height: ganttHeight,
           marginTop: headerHeight,
           marginLeft: rtl ? void 0 : "-1rem",
           pointerEvents: isChangeInProgress ? "none" : void 0
@@ -5178,7 +5179,6 @@
       expandIconWidth: 20,
       handleWidth: 8,
       headerHeight: 50,
-      ganttHeight: 600,
       minimumRowDisplayed: 4,
       nestedTaskNameOffset: 20,
       relationCircleOffset: 10,
@@ -10654,14 +10654,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_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,
@@ -10695,6 +10695,7 @@
     distances,
     fullRowHeight,
     ganttFullHeight,
+    ganttHeight,
     getTaskCurrentState,
     handleAddTask,
     handleDeleteTasks,
@@ -10825,15 +10826,22 @@
                   ref: taskListContainerRef,
                   className: styles$d.horizontalContainer,
                   style: {
+                    height: Math.max(
+                      ganttHeight - ((tableBottom == null ? void 0 : tableBottom.height) || 0),
+                      distances.minimumRowDisplayed * distances.rowHeight
+                    ),
                     width: taskListWidth
                   },
                   children: /* @__PURE__ */ jsxRuntime.jsx(
                     "div",
                     {
                       style: {
+                        height: 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 +13152,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_1wr55_1";
+  const horizontalContainer = "_horizontalContainer_1wr55_73";
+  const wrapper = "_wrapper_1wr55_85";
+  const calendarDragging = "_calendarDragging_1wr55_109";
   const styles$2 = {
     ganttVerticalContainer,
     horizontalContainer,
-    ganttHeader,
-    ganttBodyScroll,
     wrapper,
     calendarDragging
   };
@@ -13166,6 +13170,7 @@
       fullRowHeight,
       fullSvgWidth,
       ganttFullHeight,
+      ganttHeight,
       ganttSVGRef,
       ganttTodayProps,
       ganttTodayProps: {
@@ -13182,10 +13187,10 @@
     const moveStateScrollRef = React.useRef(null);
     const containerStyle = React.useMemo(
       () => ({
-        height: "100%",
-        width: "100%"
+        height: Math.max(ganttHeight, minimumRowDisplayed * rowHeight),
+        width: fullSvgWidth
       }),
-      []
+      [ganttHeight, minimumRowDisplayed, rowHeight, fullSvgWidth]
     );
     const gridStyle = React.useMemo(
       () => ({
@@ -13289,7 +13294,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 +13303,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,
@@ -13315,21 +13320,13 @@
                   ref: ganttSVGRef,
                   children: [
                     /* @__PURE__ */ jsxRuntime.jsx(GanttToday, { ...ganttTodayProps }),
-                    /* @__PURE__ */ jsxRuntime.jsx(
-                      "rect",
-                      {
-                        ref: contentRef,
-                        width: "100%",
-                        height: "100%",
-                        fill: "transparent"
-                      }
-                    ),
+                    /* @__PURE__ */ jsxRuntime.jsx("rect", { ref: contentRef, width: "100%", height: "100%", fill: "transparent" }),
                     /* @__PURE__ */ jsxRuntime.jsx(TaskGanttContent, { ...barProps })
                   ]
                 }
               ) })
             }
-          ) })
+          )
         ]
       }
     );
@@ -18542,8 +18539,7 @@
       viewDate,
       viewMode = ViewMode.Day,
       locale: clientLocale,
-      language,
-      height: clientHeight
+      language
     } = props;
     const ganttSVGRef = React.useRef(null);
     const wrapperRef = React.useRef(null);
@@ -18552,7 +18548,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(
         {},
@@ -18610,9 +18605,28 @@
     const [sortedTasks, setSortedTasks] = React.useState(
       () => [...clientTasks].sort(sortTasks)
     );
+    const [containerHeight, setContainerHeight] = React.useState(
+      void 0
+    );
     React.useEffect(() => {
       setSortedTasks([...clientTasks].sort(sortTasks));
     }, [clientTasks]);
+    React.useEffect(() => {
+      if (!wrapperRef.current) {
+        return () => {
+        };
+      }
+      const resizeObserver = new ResizeObserver((entries) => {
+        for (const entry of entries) {
+          const { height } = entry.contentRect;
+          setContainerHeight(height);
+        }
+      });
+      resizeObserver.observe(wrapperRef.current);
+      return () => {
+        resizeObserver.disconnect();
+      };
+    }, []);
     const [childTasksMap, rootTasksMap] = React.useMemo(
       () => getChildsAndRoots(sortedTasks, null),
       [sortedTasks]
@@ -18691,26 +18705,20 @@
       [maxLevelLength, fullRowHeight, (_a = taskList == null ? void 0 : taskList.tableBottom) == null ? void 0 : _a.height]
     );
     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 (distances.ganttHeight) {
+        return Math.min(distances.ganttHeight, ganttFullHeight);
+      }
+      if (containerHeight) {
+        const availableHeight = containerHeight - distances.headerHeight;
+        return Math.min(availableHeight, ganttFullHeight);
+      }
+      return ganttFullHeight;
+    }, [
+      distances.ganttHeight,
+      distances.headerHeight,
+      ganttFullHeight,
+      containerHeight
+    ]);
     const [taskToRowIndexMap, rowIndexToTaskMap, mapGlobalRowIndexToTask] = React.useMemo(
       () => getMapTaskToRowIndex(visibleTasks, comparisonLevels),
       [visibleTasks, comparisonLevels]
@@ -18767,8 +18775,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 +18901,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);
@@ -19823,6 +19800,7 @@
         distances,
         fullRowHeight,
         ganttFullHeight,
+        ganttHeight,
         getTaskCurrentState,
         handleAddTask,
         handleDeleteTasks,
@@ -19852,6 +19830,7 @@
         distances,
         fullRowHeight,
         ganttFullHeight,
+        ganttHeight,
         getTaskCurrentState,
         handleAddTask,
         handleDeleteTasks,
@@ -19892,6 +19871,7 @@
               fullRowHeight,
               fullSvgWidth,
               ganttFullHeight,
+              ganttHeight,
               ganttSVGRef,
               ganttTodayProps: gridProps,
               horizontalContainerRef,

package/dist/style.css

@@ -282,36 +282,32 @@
   border-bottom: 1px solid var(--gantt-divider-color);
   table-layout: fixed;
 }
-._taskListRoot_1x5nq_1 {
+._taskListRoot_yoz76_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;
+  /*noinspection CssUnresolvedCustomProperty*/
+  border-left: 1px solid var(--gantt-table-divider-color, var(--gantt-divider-color));
 }
 
-._taskListHorizontalScroll_1x5nq_25 {
-  overflow-x: auto;
-  overflow-y: hidden;
-  flex: 1;
+._taskListHorizontalScroll_yoz76_19 {
+  overflow-x: scroll;
+  height: 100%;
   display: flex;
   flex-direction: column;
 }
 
-._taskListHorizontalScroll_1x5nq_25::-webkit-scrollbar {
+._taskListHorizontalScroll_yoz76_19::-webkit-scrollbar {
   width: 1rem;
   height: 1rem;
 }
 
-._taskListHorizontalScroll_1x5nq_25::-webkit-scrollbar-corner {
+._taskListHorizontalScroll_yoz76_19::-webkit-scrollbar-corner {
   background: transparent;
 }
 
-._taskListHorizontalScroll_1x5nq_25::-webkit-scrollbar-thumb {
+._taskListHorizontalScroll_yoz76_19::-webkit-scrollbar-thumb {
   border: 4px solid transparent;
   /*noinspection CssUnresolvedCustomProperty*/
   background: var(--gantt-scrollbar-thumb-color);
@@ -319,14 +315,14 @@
   background-clip: padding-box;
 }
 
-._taskListHorizontalScroll_1x5nq_25::-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_1x5nq_89 {
+._taskListResizer_yoz76_81 {
   position: absolute;
   top: 0;
   right: -3px;
@@ -338,16 +334,16 @@
 }
 
 /*noinspection CssUnresolvedCustomProperty*/
-._taskListResizer_1x5nq_89:hover {
+._taskListResizer_yoz76_81:hover {
   background-color: var(--gantt-table-hover-action-color);
   filter: var(--gantt-hover-filter);
 }
 
-._taskListResizer_1x5nq_89:hover::before {
+._taskListResizer_yoz76_81:hover::before {
   display: none;
 }
 
-._taskListResizer_1x5nq_89::before {
+._taskListResizer_yoz76_81::before {
   content: "";
   position: absolute;
   top: 0;
@@ -358,22 +354,21 @@
   background-color: var(--gantt-table-resize-color, var(--gantt-divider-color));
 }
 
-._horizontalContainer_1x5nq_153 {
+._horizontalContainer_yoz76_145 {
   margin: 0;
   padding: 0;
-  overflow-y: auto;
-  overflow-x: hidden;
-  height: 100%;
-  min-height: 0;
+  overflow: hidden;
+  flex-grow: 1;
 }
 
-._tableWrapper_1x5nq_171 {
+._tableWrapper_yoz76_159 {
   position: relative;
-  flex: 1;
-  min-height: 0;
+  flex-grow: 1;
+  display: flex;
+  flex-direction: column;
 }
 
-._scrollToTop_1x5nq_183 {
+._scrollToTop_yoz76_173 {
   position: absolute;
   top: 0;
   left: 0;
@@ -381,7 +376,7 @@
   height: 20px;
 }
 
-._scrollToBottom_1x5nq_199 {
+._scrollToBottom_yoz76_189 {
   position: absolute;
   bottom: 0;
   left: 0;
@@ -389,7 +384,7 @@
   height: 20px;
 }
 
-._hidden_1x5nq_215 {
+._hidden_yoz76_205 {
   display: none;
 }
 ._ganttToday_1oyhk_1 {
@@ -583,10 +578,8 @@
   user-select: none;
   stroke-width: 0;
 }
-._ganttVerticalContainer_1xboz_1 {
-  display: flex;
-  flex-direction: column;
-  overflow-x: auto;
+._ganttVerticalContainer_1wr55_1 {
+  overflow-x: scroll;
   overflow-y: hidden;
   font-size: 0;
   margin: 0;
@@ -595,20 +588,18 @@
   border-right: 1px solid var(--gantt-calendar-divider-color, var(--gantt-divider-color));
   flex-grow: 1;
   height: 100%;
-  min-height: 0;
-  max-width: 100%;
 }
 
-._ganttVerticalContainer_1xboz_1::-webkit-scrollbar {
+._ganttVerticalContainer_1wr55_1::-webkit-scrollbar {
   width: 1rem;
   height: 1rem;
 }
 
-._ganttVerticalContainer_1xboz_1::-webkit-scrollbar-corner {
+._ganttVerticalContainer_1wr55_1::-webkit-scrollbar-corner {
   background: transparent;
 }
 
-._ganttVerticalContainer_1xboz_1::-webkit-scrollbar-thumb {
+._ganttVerticalContainer_1wr55_1::-webkit-scrollbar-thumb {
   border: 4px solid transparent;
   /*noinspection CssUnresolvedCustomProperty*/
   background: var(--gantt-scrollbar-thumb-color);
@@ -616,50 +607,32 @@
   background-clip: padding-box;
 }
 
-._ganttVerticalContainer_1xboz_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_1xboz_81 {
+._horizontalContainer_1wr55_73 {
   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;
-  min-height: 0;
-  height: 100%;
 }
 
-._wrapper_1xboz_123 {
+._wrapper_1wr55_85 {
   display: flex;
   padding: 0;
   margin: 0;
   list-style: none;
   outline: none;
   position: relative;
+  height: 100%;
   /*noinspection CssUnresolvedCustomProperty*/
   border-bottom: 1px solid var(--gantt-divider-color);
-  height: 100%;
-  min-height: 0;
-  max-width: 100%;
-  overflow: hidden;
 }
 
-._calendarDragging_1xboz_153 {
+._calendarDragging_1wr55_109 {
   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.38",
   "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 {};