gantt-task-react-v 1.0.1 → 1.0.5

package/README.md

@@ -1,26 +1,20 @@
-# gantt-task-react-v
+# kvandake-gantt-task-react
 
-## Interactive Gantt Chart for React with TypeScript - Enhanced with Flexible Height
+## Interactive Gantt Chart for React with TypeScript.
 
-A fork of webagility-gantt-task-react with improvements including flexible height that adapts to content instead of fixed 600px height.
-
-## Key Features
-
-- **Flexible Height**: No more fixed 600px height limitation - automatically adapts to content
-- **Responsive Design**: Works better with different screen sizes and containers
-- **All Original Features**: Maintains all functionality from the original package
+## [Live Demo In Storybook](https://661071b076b50cb537c16c19-yrsukdfefs.chromatic.com/)
 
 ## 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/style.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,7 +10,6 @@ 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,7 +14,6 @@ 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

@@ -5181,8 +5181,7 @@ const DEFAULT_THEME = {
     expandIconWidth: 20,
     handleWidth: 8,
     headerHeight: 50,
-    ganttHeight: 500,
-    // Flexible height - reasonable default that allows scrolling
+    ganttHeight: 600,
     minimumRowDisplayed: 4,
     nestedTaskNameOffset: 20,
     relationCircleOffset: 10,
@@ -10658,14 +10657,14 @@ const TaskListTableDefaultInner = ({
   );
 };
 const TaskListTable = memo(TaskListTableDefaultInner);
-const taskListRoot = "_taskListRoot_51pue_1";
-const taskListHorizontalScroll = "_taskListHorizontalScroll_51pue_13";
-const taskListResizer = "_taskListResizer_51pue_69";
-const horizontalContainer$1 = "_horizontalContainer_51pue_133";
-const tableWrapper = "_tableWrapper_51pue_147";
-const scrollToTop = "_scrollToTop_51pue_155";
-const scrollToBottom = "_scrollToBottom_51pue_171";
-const hidden = "_hidden_51pue_187";
+const taskListRoot = "_taskListRoot_3y2l5_1";
+const taskListHorizontalScroll = "_taskListHorizontalScroll_3y2l5_13";
+const taskListResizer = "_taskListResizer_3y2l5_69";
+const horizontalContainer$1 = "_horizontalContainer_3y2l5_133";
+const tableWrapper = "_tableWrapper_3y2l5_145";
+const scrollToTop = "_scrollToTop_3y2l5_153";
+const scrollToBottom = "_scrollToBottom_3y2l5_169";
+const hidden = "_hidden_3y2l5_185";
 const styles$d = {
   taskListRoot,
   taskListHorizontalScroll,
@@ -10699,7 +10698,6 @@ const TaskListInner = ({
   distances,
   fullRowHeight,
   ganttFullHeight,
-  ganttHeight,
   getTaskCurrentState,
   handleAddTask,
   handleDeleteTasks,
@@ -10830,8 +10828,8 @@ const TaskListInner = ({
                 ref: taskListContainerRef,
                 className: styles$d.horizontalContainer,
                 style: {
-                  height: Math.max(
-                    ganttHeight - ((tableBottom == null ? void 0 : tableBottom.height) || 0),
+                  height: Math.min(
+                    ganttFullHeight,
                     distances.minimumRowDisplayed * distances.rowHeight
                   ),
                   width: taskListWidth
@@ -13156,10 +13154,10 @@ const TaskGanttContentInner = (props) => {
   ] });
 };
 const TaskGanttContent = memo(TaskGanttContentInner);
-const ganttVerticalContainer = "_ganttVerticalContainer_1rgpy_1";
-const horizontalContainer = "_horizontalContainer_1rgpy_71";
-const wrapper = "_wrapper_1rgpy_85";
-const calendarDragging = "_calendarDragging_1rgpy_107";
+const ganttVerticalContainer = "_ganttVerticalContainer_1unzl_1";
+const horizontalContainer = "_horizontalContainer_1unzl_71";
+const wrapper = "_wrapper_1unzl_83";
+const calendarDragging = "_calendarDragging_1unzl_105";
 const styles$2 = {
   ganttVerticalContainer,
   horizontalContainer,
@@ -13174,7 +13172,6 @@ const TaskGanttInner = (props) => {
     fullRowHeight,
     fullSvgWidth,
     ganttFullHeight,
-    ganttHeight,
     ganttSVGRef,
     ganttTodayProps,
     ganttTodayProps: {
@@ -13191,10 +13188,10 @@ const TaskGanttInner = (props) => {
   const moveStateScrollRef = useRef(null);
   const containerStyle = useMemo(
     () => ({
-      height: Math.max(ganttHeight, minimumRowDisplayed * rowHeight),
+      height: Math.min(ganttFullHeight, minimumRowDisplayed * rowHeight),
       width: fullSvgWidth
     }),
-    [ganttHeight, minimumRowDisplayed, rowHeight, fullSvgWidth]
+    [ganttFullHeight, minimumRowDisplayed, rowHeight, fullSvgWidth]
   );
   const gridStyle = useMemo(
     () => ({
@@ -13324,7 +13321,15 @@ 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 })
                 ]
               }
@@ -18689,10 +18694,13 @@ const Gantt = (props) => {
     },
     [maxLevelLength, fullRowHeight, (_a = taskList == null ? void 0 : taskList.tableBottom) == null ? void 0 : _a.height]
   );
-  const ganttHeight = useMemo(
-    () => distances.ganttHeight ? Math.min(distances.ganttHeight, ganttFullHeight) : ganttFullHeight,
-    [distances, ganttFullHeight]
-  );
+  const ganttHeight = useMemo(() => {
+    const minRowsHeight = distances.minimumRowDisplayed * distances.rowHeight;
+    if (typeof distances.ganttHeight === "number") {
+      return Math.min(distances.ganttHeight, ganttFullHeight, minRowsHeight);
+    }
+    return Math.min(ganttFullHeight, minRowsHeight);
+  }, [distances, ganttFullHeight]);
   const [taskToRowIndexMap, rowIndexToTaskMap, mapGlobalRowIndexToTask] = useMemo(
     () => getMapTaskToRowIndex(visibleTasks, comparisonLevels),
     [visibleTasks, comparisonLevels]
@@ -19334,7 +19342,13 @@ const Gantt = (props) => {
         }
       });
     },
-    [getMetadata, handleCommitInternal, mapTaskToGlobalIndex, onChangeTooltipTask, prepareSuggestions]
+    [
+      getMetadata,
+      handleCommitInternal,
+      mapTaskToGlobalIndex,
+      onChangeTooltipTask,
+      prepareSuggestions
+    ]
   );
   const handleMoveTaskBefore = useCallback(
     (target, taskForMove) => {
@@ -19664,7 +19678,20 @@ const Gantt = (props) => {
       startColumnIndex,
       language
     }),
-    [additionalLeftSpace, dateSetup, distances, endColumnIndex, fullSvgWidth, getDate, isUnknownDates, taskBar.renderBottomHeader, taskBar.renderTopHeader, rtl, startColumnIndex, language]
+    [
+      additionalLeftSpace,
+      dateSetup,
+      distances,
+      endColumnIndex,
+      fullSvgWidth,
+      getDate,
+      isUnknownDates,
+      taskBar.renderBottomHeader,
+      taskBar.renderTopHeader,
+      rtl,
+      startColumnIndex,
+      language
+    ]
   );
   const renderTaskBarProps = useMemo(
     () => ({
@@ -19755,7 +19782,6 @@ const Gantt = (props) => {
       distances,
       fullRowHeight,
       ganttFullHeight,
-      ganttHeight,
       getTaskCurrentState,
       handleAddTask,
       handleDeleteTasks,
@@ -19785,7 +19811,6 @@ const Gantt = (props) => {
       distances,
       fullRowHeight,
       ganttFullHeight,
-      ganttHeight,
       getTaskCurrentState,
       handleAddTask,
       handleDeleteTasks,
@@ -19826,7 +19851,6 @@ const Gantt = (props) => {
             fullRowHeight,
             fullSvgWidth,
             ganttFullHeight,
-            ganttHeight,
             ganttSVGRef,
             ganttTodayProps: gridProps,
             horizontalContainerRef,

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

@@ -5198,8 +5198,7 @@
       expandIconWidth: 20,
       handleWidth: 8,
       headerHeight: 50,
-      ganttHeight: 500,
-      // Flexible height - reasonable default that allows scrolling
+      ganttHeight: 600,
       minimumRowDisplayed: 4,
       nestedTaskNameOffset: 20,
       relationCircleOffset: 10,
@@ -10675,14 +10674,14 @@
     );
   };
   const TaskListTable = React.memo(TaskListTableDefaultInner);
-  const taskListRoot = "_taskListRoot_51pue_1";
-  const taskListHorizontalScroll = "_taskListHorizontalScroll_51pue_13";
-  const taskListResizer = "_taskListResizer_51pue_69";
-  const horizontalContainer$1 = "_horizontalContainer_51pue_133";
-  const tableWrapper = "_tableWrapper_51pue_147";
-  const scrollToTop = "_scrollToTop_51pue_155";
-  const scrollToBottom = "_scrollToBottom_51pue_171";
-  const hidden = "_hidden_51pue_187";
+  const taskListRoot = "_taskListRoot_3y2l5_1";
+  const taskListHorizontalScroll = "_taskListHorizontalScroll_3y2l5_13";
+  const taskListResizer = "_taskListResizer_3y2l5_69";
+  const horizontalContainer$1 = "_horizontalContainer_3y2l5_133";
+  const tableWrapper = "_tableWrapper_3y2l5_145";
+  const scrollToTop = "_scrollToTop_3y2l5_153";
+  const scrollToBottom = "_scrollToBottom_3y2l5_169";
+  const hidden = "_hidden_3y2l5_185";
   const styles$d = {
     taskListRoot,
     taskListHorizontalScroll,
@@ -10716,7 +10715,6 @@
     distances,
     fullRowHeight,
     ganttFullHeight,
-    ganttHeight,
     getTaskCurrentState,
     handleAddTask,
     handleDeleteTasks,
@@ -10847,8 +10845,8 @@
                   ref: taskListContainerRef,
                   className: styles$d.horizontalContainer,
                   style: {
-                    height: Math.max(
-                      ganttHeight - ((tableBottom == null ? void 0 : tableBottom.height) || 0),
+                    height: Math.min(
+                      ganttFullHeight,
                       distances.minimumRowDisplayed * distances.rowHeight
                     ),
                     width: taskListWidth
@@ -13173,10 +13171,10 @@
     ] });
   };
   const TaskGanttContent = React.memo(TaskGanttContentInner);
-  const ganttVerticalContainer = "_ganttVerticalContainer_1rgpy_1";
-  const horizontalContainer = "_horizontalContainer_1rgpy_71";
-  const wrapper = "_wrapper_1rgpy_85";
-  const calendarDragging = "_calendarDragging_1rgpy_107";
+  const ganttVerticalContainer = "_ganttVerticalContainer_1unzl_1";
+  const horizontalContainer = "_horizontalContainer_1unzl_71";
+  const wrapper = "_wrapper_1unzl_83";
+  const calendarDragging = "_calendarDragging_1unzl_105";
   const styles$2 = {
     ganttVerticalContainer,
     horizontalContainer,
@@ -13191,7 +13189,6 @@
       fullRowHeight,
       fullSvgWidth,
       ganttFullHeight,
-      ganttHeight,
       ganttSVGRef,
       ganttTodayProps,
       ganttTodayProps: {
@@ -13208,10 +13205,10 @@
     const moveStateScrollRef = React.useRef(null);
     const containerStyle = React.useMemo(
       () => ({
-        height: Math.max(ganttHeight, minimumRowDisplayed * rowHeight),
+        height: Math.min(ganttFullHeight, minimumRowDisplayed * rowHeight),
         width: fullSvgWidth
       }),
-      [ganttHeight, minimumRowDisplayed, rowHeight, fullSvgWidth]
+      [ganttFullHeight, minimumRowDisplayed, rowHeight, fullSvgWidth]
     );
     const gridStyle = React.useMemo(
       () => ({
@@ -13341,7 +13338,15 @@
                   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 })
                   ]
                 }
@@ -18706,10 +18711,13 @@
       },
       [maxLevelLength, fullRowHeight, (_a = taskList == null ? void 0 : taskList.tableBottom) == null ? void 0 : _a.height]
     );
-    const ganttHeight = React.useMemo(
-      () => distances.ganttHeight ? Math.min(distances.ganttHeight, ganttFullHeight) : ganttFullHeight,
-      [distances, ganttFullHeight]
-    );
+    const ganttHeight = React.useMemo(() => {
+      const minRowsHeight = distances.minimumRowDisplayed * distances.rowHeight;
+      if (typeof distances.ganttHeight === "number") {
+        return Math.min(distances.ganttHeight, ganttFullHeight, minRowsHeight);
+      }
+      return Math.min(ganttFullHeight, minRowsHeight);
+    }, [distances, ganttFullHeight]);
     const [taskToRowIndexMap, rowIndexToTaskMap, mapGlobalRowIndexToTask] = React.useMemo(
       () => getMapTaskToRowIndex(visibleTasks, comparisonLevels),
       [visibleTasks, comparisonLevels]
@@ -19351,7 +19359,13 @@
           }
         });
       },
-      [getMetadata, handleCommitInternal, mapTaskToGlobalIndex, onChangeTooltipTask, prepareSuggestions]
+      [
+        getMetadata,
+        handleCommitInternal,
+        mapTaskToGlobalIndex,
+        onChangeTooltipTask,
+        prepareSuggestions
+      ]
     );
     const handleMoveTaskBefore = React.useCallback(
       (target, taskForMove) => {
@@ -19681,7 +19695,20 @@
         startColumnIndex,
         language
       }),
-      [additionalLeftSpace, dateSetup, distances, endColumnIndex, fullSvgWidth, getDate, isUnknownDates, taskBar.renderBottomHeader, taskBar.renderTopHeader, rtl, startColumnIndex, language]
+      [
+        additionalLeftSpace,
+        dateSetup,
+        distances,
+        endColumnIndex,
+        fullSvgWidth,
+        getDate,
+        isUnknownDates,
+        taskBar.renderBottomHeader,
+        taskBar.renderTopHeader,
+        rtl,
+        startColumnIndex,
+        language
+      ]
     );
     const renderTaskBarProps = React.useMemo(
       () => ({
@@ -19772,7 +19799,6 @@
         distances,
         fullRowHeight,
         ganttFullHeight,
-        ganttHeight,
         getTaskCurrentState,
         handleAddTask,
         handleDeleteTasks,
@@ -19802,7 +19828,6 @@
         distances,
         fullRowHeight,
         ganttFullHeight,
-        ganttHeight,
         getTaskCurrentState,
         handleAddTask,
         handleDeleteTasks,
@@ -19843,7 +19868,6 @@
               fullRowHeight,
               fullSvgWidth,
               ganttFullHeight,
-              ganttHeight,
               ganttSVGRef,
               ganttTodayProps: gridProps,
               horizontalContainerRef,

package/dist/style.css

@@ -282,26 +282,26 @@
   border-bottom: 1px solid var(--gantt-divider-color);
   table-layout: fixed;
 }
-._taskListRoot_51pue_1 {
+._taskListRoot_3y2l5_1 {
   position: relative;
   /*noinspection CssUnresolvedCustomProperty*/
   border-left: 1px solid var(--gantt-table-divider-color, var(--gantt-divider-color));
 }
 
-._taskListHorizontalScroll_51pue_13 {
+._taskListHorizontalScroll_3y2l5_13 {
   overflow-x: scroll;
 }
 
-._taskListHorizontalScroll_51pue_13::-webkit-scrollbar {
+._taskListHorizontalScroll_3y2l5_13::-webkit-scrollbar {
   width: 1rem;
   height: 1rem;
 }
 
-._taskListHorizontalScroll_51pue_13::-webkit-scrollbar-corner {
+._taskListHorizontalScroll_3y2l5_13::-webkit-scrollbar-corner {
   background: transparent;
 }
 
-._taskListHorizontalScroll_51pue_13::-webkit-scrollbar-thumb {
+._taskListHorizontalScroll_3y2l5_13::-webkit-scrollbar-thumb {
   border: 4px solid transparent;
   /*noinspection CssUnresolvedCustomProperty*/
   background: var(--gantt-scrollbar-thumb-color);
@@ -309,14 +309,14 @@
   background-clip: padding-box;
 }
 
-._taskListHorizontalScroll_51pue_13::-webkit-scrollbar-thumb:hover {
+._taskListHorizontalScroll_3y2l5_13::-webkit-scrollbar-thumb:hover {
   border: 2px solid transparent;
   /*noinspection CssUnresolvedCustomProperty*/
   background: var(--gantt-scrollbar-thumb-color);
   background-clip: padding-box;
 }
 
-._taskListResizer_51pue_69 {
+._taskListResizer_3y2l5_69 {
   position: absolute;
   top: 0;
   right: -3px;
@@ -328,16 +328,16 @@
 }
 
 /*noinspection CssUnresolvedCustomProperty*/
-._taskListResizer_51pue_69:hover {
+._taskListResizer_3y2l5_69:hover {
   background-color: var(--gantt-table-hover-action-color);
   filter: var(--gantt-hover-filter);
 }
 
-._taskListResizer_51pue_69:hover::before {
+._taskListResizer_3y2l5_69:hover::before {
   display: none;
 }
 
-._taskListResizer_51pue_69::before {
+._taskListResizer_3y2l5_69::before {
   content: "";
   position: absolute;
   top: 0;
@@ -348,18 +348,17 @@
   background-color: var(--gantt-table-resize-color, var(--gantt-divider-color));
 }
 
-._horizontalContainer_51pue_133 {
+._horizontalContainer_3y2l5_133 {
   margin: 0;
   padding: 0;
-  overflow-y: auto;
-  overflow-x: hidden;
+  overflow: hidden;
 }
 
-._tableWrapper_51pue_147 {
+._tableWrapper_3y2l5_145 {
   position: relative;
 }
 
-._scrollToTop_51pue_155 {
+._scrollToTop_3y2l5_153 {
   position: absolute;
   top: 0;
   left: 0;
@@ -367,7 +366,7 @@
   height: 20px;
 }
 
-._scrollToBottom_51pue_171 {
+._scrollToBottom_3y2l5_169 {
   position: absolute;
   bottom: 0;
   left: 0;
@@ -375,7 +374,7 @@
   height: 20px;
 }
 
-._hidden_51pue_187 {
+._hidden_3y2l5_185 {
   display: none;
 }
 ._ganttToday_1oyhk_1 {
@@ -569,7 +568,7 @@
   user-select: none;
   stroke-width: 0;
 }
-._ganttVerticalContainer_1rgpy_1 {
+._ganttVerticalContainer_1unzl_1 {
   overflow-x: scroll;
   overflow-y: hidden;
   font-size: 0;
@@ -580,16 +579,16 @@
   flex-grow: 1;
 }
 
-._ganttVerticalContainer_1rgpy_1::-webkit-scrollbar {
+._ganttVerticalContainer_1unzl_1::-webkit-scrollbar {
   width: 1rem;
   height: 1rem;
 }
 
-._ganttVerticalContainer_1rgpy_1::-webkit-scrollbar-corner {
+._ganttVerticalContainer_1unzl_1::-webkit-scrollbar-corner {
   background: transparent;
 }
 
-._ganttVerticalContainer_1rgpy_1::-webkit-scrollbar-thumb {
+._ganttVerticalContainer_1unzl_1::-webkit-scrollbar-thumb {
   border: 4px solid transparent;
   /*noinspection CssUnresolvedCustomProperty*/
   background: var(--gantt-scrollbar-thumb-color);
@@ -597,21 +596,20 @@
   background-clip: padding-box;
 }
 
-._ganttVerticalContainer_1rgpy_1::-webkit-scrollbar-thumb:hover {
+._ganttVerticalContainer_1unzl_1::-webkit-scrollbar-thumb:hover {
   border: 2px solid transparent;
   /*noinspection CssUnresolvedCustomProperty*/
   background: var(--gantt-scrollbar-thumb-color);
   background-clip: padding-box;
 }
 
-._horizontalContainer_1rgpy_71 {
+._horizontalContainer_1unzl_71 {
   margin: 0;
   padding: 0;
-  overflow-y: auto;
-  overflow-x: hidden;
+  overflow: hidden;
 }
 
-._wrapper_1rgpy_85 {
+._wrapper_1unzl_83 {
   display: flex;
   padding: 0;
   margin: 0;
@@ -622,7 +620,7 @@
   border-bottom: 1px solid var(--gantt-divider-color);
 }
 
-._calendarDragging_1rgpy_107 {
+._calendarDragging_1unzl_105 {
   cursor: grabbing;
 }
 /*noinspection CssUnresolvedCustomProperty*/

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "gantt-task-react-v",
-  "version": "1.0.1",
+  "version": "1.0.5",
   "description": "Interactive Gantt Chart for React with TypeScript.",
-  "author": "aguilanbon@gmail.com",
+  "author": "aguilanbon",
   "homepage": "https://github.com/aguilanbon/gantt-task-react-v",
   "license": "MIT",
   "repository": "https://github.com/aguilanbon/gantt-task-react-v",