gantt-task-react-v 1.0.11 → 1.0.13

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

@@ -6,6 +6,7 @@ import { TaskGanttContentProps } from "./task-gantt-content";
 import { GanttTaskBarActions } from "../../types";
 export interface TaskGanttProps extends GanttTaskBarActions {
     ganttHeight?: number;
+    useCssHeight?: boolean;
     barProps: TaskGanttContentProps;
     calendarProps: Omit<CalendarProps, "scrollRef">;
     fullRowHeight: number;

package/dist/components/task-list/index.d.ts

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

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

@@ -10721,7 +10721,8 @@ const TaskListInner = ({
   onResizeColumn,
   canReorderTasks,
   tableBottom,
-  ganttHeight
+  ganttHeight,
+  useCssHeight
 }) => {
   const [
     columns,
@@ -10829,9 +10830,9 @@ const TaskListInner = ({
                 ref: taskListContainerRef,
                 className: styles$d.horizontalContainer,
                 style: {
-                  // visible height: clamp between minimum rows height and ganttFullHeight,
-                  // prefer explicit numeric ganttHeight when provided
-                  height: (() => {
+                  // If consumer asked for CSS height (e.g. "100%"), let the
+                  // container fill its parent. Otherwise compute pixel height.
+                  height: ganttHeight == null && ganttHeight !== 0 && (typeof ganttHeight === "undefined" || useCssHeight) ? "100%" : (() => {
                     const minRowsHeight = distances.minimumRowDisplayed * distances.rowHeight;
                     const resolved = typeof ganttHeight === "number" ? ganttHeight : void 0;
                     const visible = Math.max(
@@ -13207,7 +13208,7 @@ const TaskGanttInner = (props) => {
       Math.min(ganttFullHeight, resolved ?? ganttFullHeight)
     );
     return {
-      height: visible,
+      height: props.useCssHeight ? "100%" : visible,
       width: fullSvgWidth
     };
   }, [
@@ -13215,7 +13216,8 @@ const TaskGanttInner = (props) => {
     minimumRowDisplayed,
     rowHeight,
     fullSvgWidth,
-    ganttHeight
+    ganttHeight,
+    props.useCssHeight
   ]);
   const gridStyle = useMemo(
     () => ({
@@ -18744,6 +18746,7 @@ const Gantt = (props) => {
     );
     return chosen;
   }, [distances, ganttFullHeight, clientHeight, measuredHeight]);
+  const isCssHeight = typeof clientHeight === "string";
   const [taskToRowIndexMap, rowIndexToTaskMap, mapGlobalRowIndexToTask] = useMemo(
     () => getMapTaskToRowIndex(visibleTasks, comparisonLevels),
     [visibleTasks, comparisonLevels]
@@ -18937,14 +18940,30 @@ const Gantt = (props) => {
       return () => {
       };
     }
-    setMeasuredHeight(node.getBoundingClientRect().height);
+    const measureWithAncestorFallback = (el) => {
+      const rect = el.getBoundingClientRect();
+      let height = rect.height;
+      try {
+        let p = el.parentElement;
+        while (p) {
+          const pRect = p.getBoundingClientRect();
+          if (pRect.height > height + 1) {
+            height = pRect.height;
+            break;
+          }
+          p = p.parentElement;
+        }
+      } catch (e) {
+      }
+      return height;
+    };
+    setMeasuredHeight(measureWithAncestorFallback(node));
     const ResizeObserverCtor = window.ResizeObserver;
     let ro;
     if (typeof ResizeObserverCtor === "function") {
       const ctor = ResizeObserverCtor;
       ro = new ctor(() => {
-        const rect = node.getBoundingClientRect();
-        setMeasuredHeight(rect.height);
+        setMeasuredHeight(measureWithAncestorFallback(node));
       });
       ro.observe(node);
     }
@@ -19857,6 +19876,7 @@ const Gantt = (props) => {
       fullRowHeight,
       ganttFullHeight,
       ganttHeight,
+      useCssHeight: isCssHeight,
       getTaskCurrentState,
       handleAddTask,
       handleDeleteTasks,
@@ -19887,6 +19907,7 @@ const Gantt = (props) => {
       fullRowHeight,
       ganttFullHeight,
       ganttHeight,
+      isCssHeight,
       getTaskCurrentState,
       handleAddTask,
       handleDeleteTasks,
@@ -19928,6 +19949,7 @@ const Gantt = (props) => {
             fullSvgWidth,
             ganttFullHeight,
             ganttHeight,
+            useCssHeight: typeof clientHeight === "string",
             ganttSVGRef,
             ganttTodayProps: gridProps,
             horizontalContainerRef,

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

@@ -10738,7 +10738,8 @@
     onResizeColumn,
     canReorderTasks,
     tableBottom,
-    ganttHeight
+    ganttHeight,
+    useCssHeight
   }) => {
     const [
       columns,
@@ -10846,9 +10847,9 @@
                   ref: taskListContainerRef,
                   className: styles$d.horizontalContainer,
                   style: {
-                    // visible height: clamp between minimum rows height and ganttFullHeight,
-                    // prefer explicit numeric ganttHeight when provided
-                    height: (() => {
+                    // If consumer asked for CSS height (e.g. "100%"), let the
+                    // container fill its parent. Otherwise compute pixel height.
+                    height: ganttHeight == null && ganttHeight !== 0 && (typeof ganttHeight === "undefined" || useCssHeight) ? "100%" : (() => {
                       const minRowsHeight = distances.minimumRowDisplayed * distances.rowHeight;
                       const resolved = typeof ganttHeight === "number" ? ganttHeight : void 0;
                       const visible = Math.max(
@@ -13224,7 +13225,7 @@
         Math.min(ganttFullHeight, resolved ?? ganttFullHeight)
       );
       return {
-        height: visible,
+        height: props.useCssHeight ? "100%" : visible,
         width: fullSvgWidth
       };
     }, [
@@ -13232,7 +13233,8 @@
       minimumRowDisplayed,
       rowHeight,
       fullSvgWidth,
-      ganttHeight
+      ganttHeight,
+      props.useCssHeight
     ]);
     const gridStyle = React.useMemo(
       () => ({
@@ -18761,6 +18763,7 @@
       );
       return chosen;
     }, [distances, ganttFullHeight, clientHeight, measuredHeight]);
+    const isCssHeight = typeof clientHeight === "string";
     const [taskToRowIndexMap, rowIndexToTaskMap, mapGlobalRowIndexToTask] = React.useMemo(
       () => getMapTaskToRowIndex(visibleTasks, comparisonLevels),
       [visibleTasks, comparisonLevels]
@@ -18954,14 +18957,30 @@
         return () => {
         };
       }
-      setMeasuredHeight(node.getBoundingClientRect().height);
+      const measureWithAncestorFallback = (el) => {
+        const rect = el.getBoundingClientRect();
+        let height = rect.height;
+        try {
+          let p = el.parentElement;
+          while (p) {
+            const pRect = p.getBoundingClientRect();
+            if (pRect.height > height + 1) {
+              height = pRect.height;
+              break;
+            }
+            p = p.parentElement;
+          }
+        } catch (e) {
+        }
+        return height;
+      };
+      setMeasuredHeight(measureWithAncestorFallback(node));
       const ResizeObserverCtor = window.ResizeObserver;
       let ro;
       if (typeof ResizeObserverCtor === "function") {
         const ctor = ResizeObserverCtor;
         ro = new ctor(() => {
-          const rect = node.getBoundingClientRect();
-          setMeasuredHeight(rect.height);
+          setMeasuredHeight(measureWithAncestorFallback(node));
         });
         ro.observe(node);
       }
@@ -19874,6 +19893,7 @@
         fullRowHeight,
         ganttFullHeight,
         ganttHeight,
+        useCssHeight: isCssHeight,
         getTaskCurrentState,
         handleAddTask,
         handleDeleteTasks,
@@ -19904,6 +19924,7 @@
         fullRowHeight,
         ganttFullHeight,
         ganttHeight,
+        isCssHeight,
         getTaskCurrentState,
         handleAddTask,
         handleDeleteTasks,
@@ -19945,6 +19966,7 @@
               fullSvgWidth,
               ganttFullHeight,
               ganttHeight,
+              useCssHeight: typeof clientHeight === "string",
               ganttSVGRef,
               ganttTodayProps: gridProps,
               horizontalContainerRef,

package/package.json

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