gantt-task-react-v 1.0.8 → 1.0.10

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

@@ -13155,12 +13155,12 @@ const TaskGanttContentInner = (props) => {
   ] });
 };
 const TaskGanttContent = memo(TaskGanttContentInner);
-const ganttVerticalContainer = "_ganttVerticalContainer_1044x_1";
-const horizontalContainer = "_horizontalContainer_1044x_75";
-const ganttHeader = "_ganttHeader_1044x_87";
-const ganttBodyScroll = "_ganttBodyScroll_1044x_97";
-const wrapper = "_wrapper_1044x_109";
-const calendarDragging = "_calendarDragging_1044x_131";
+const ganttVerticalContainer = "_ganttVerticalContainer_1hrwo_1";
+const horizontalContainer = "_horizontalContainer_1hrwo_75";
+const ganttHeader = "_ganttHeader_1hrwo_87";
+const ganttBodyScroll = "_ganttBodyScroll_1hrwo_97";
+const wrapper = "_wrapper_1hrwo_109";
+const calendarDragging = "_calendarDragging_1hrwo_131";
 const styles$2 = {
   ganttVerticalContainer,
   horizontalContainer,
@@ -13185,19 +13185,31 @@ const TaskGanttInner = (props) => {
     horizontalContainerRef,
     onVerticalScrollbarScrollX,
     verticalGanttContainerRef,
-    verticalScrollbarRef
+    verticalScrollbarRef,
+    ganttHeight
   } = props;
   const contentRef = React__default.useRef(null);
   const moveStateVertRef = useRef(null);
   const moveStateHorRef = useRef(null);
   const moveStateScrollRef = useRef(null);
-  const containerStyle = useMemo(
-    () => ({
-      height: Math.min(ganttFullHeight, minimumRowDisplayed * rowHeight),
+  const containerStyle = useMemo(() => {
+    const minRowsHeight = minimumRowDisplayed * rowHeight;
+    const resolved = typeof ganttHeight === "number" ? ganttHeight : void 0;
+    const visible = Math.max(
+      minRowsHeight,
+      Math.min(ganttFullHeight, resolved ?? ganttFullHeight)
+    );
+    return {
+      height: visible,
       width: fullSvgWidth
-    }),
-    [ganttFullHeight, minimumRowDisplayed, rowHeight, fullSvgWidth]
-  );
+    };
+  }, [
+    ganttFullHeight,
+    minimumRowDisplayed,
+    rowHeight,
+    fullSvgWidth,
+    ganttHeight
+  ]);
   const gridStyle = useMemo(
     () => ({
       height: Math.max(ganttFullHeight, minimumRowDisplayed * rowHeight),
@@ -13281,15 +13293,18 @@ const TaskGanttInner = (props) => {
       moveStateHorRef.current = null;
       contentContainer.classList.remove(styles$2.calendarDragging);
     };
-    contentContainer.addEventListener("mousemove", onScrollMove);
-    contentContainer.addEventListener("mousedown", onScrollStart);
-    contentContainer.addEventListener("mouseup", onScrollEnd);
-    contentContainer.addEventListener("mouseout", onScrollEnd);
+    const moveListener = (evt) => onScrollMove(evt);
+    const startListener = (evt) => onScrollStart(evt);
+    const endListener = (evt) => onScrollEnd(evt);
+    contentContainer.addEventListener("mousemove", moveListener);
+    contentContainer.addEventListener("mousedown", startListener);
+    contentContainer.addEventListener("mouseup", endListener);
+    contentContainer.addEventListener("mouseout", endListener);
     return () => {
-      contentContainer.removeEventListener("mousemove", onScrollMove);
-      contentContainer.removeEventListener("mousedown", onScrollStart);
-      contentContainer.removeEventListener("mouseup", onScrollEnd);
-      contentContainer.removeEventListener("mouseout", onScrollEnd);
+      contentContainer.removeEventListener("mousemove", moveListener);
+      contentContainer.removeEventListener("mousedown", startListener);
+      contentContainer.removeEventListener("mouseup", endListener);
+      contentContainer.removeEventListener("mouseout", endListener);
     };
   }, [verticalScrollbarRef, horizontalContainerRef, verticalGanttContainerRef]);
   return /* @__PURE__ */ jsxs(
@@ -19888,7 +19903,7 @@ const Gantt = (props) => {
   return /* @__PURE__ */ jsx(GanttThemeProvider, { theme, children: (cssVars) => /* @__PURE__ */ jsx(GanttLocaleProvider, { locale, children: /* @__PURE__ */ jsxs(
     "div",
     {
-      style: cssVars,
+      style: typeof clientHeight === "string" ? { ...cssVars, height: clientHeight } : cssVars,
       className: `${styles$2.wrapper} gantt`,
       onKeyDown: handleKeyDown,
       tabIndex: 0,

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

@@ -13172,12 +13172,12 @@
     ] });
   };
   const TaskGanttContent = React.memo(TaskGanttContentInner);
-  const ganttVerticalContainer = "_ganttVerticalContainer_1044x_1";
-  const horizontalContainer = "_horizontalContainer_1044x_75";
-  const ganttHeader = "_ganttHeader_1044x_87";
-  const ganttBodyScroll = "_ganttBodyScroll_1044x_97";
-  const wrapper = "_wrapper_1044x_109";
-  const calendarDragging = "_calendarDragging_1044x_131";
+  const ganttVerticalContainer = "_ganttVerticalContainer_1hrwo_1";
+  const horizontalContainer = "_horizontalContainer_1hrwo_75";
+  const ganttHeader = "_ganttHeader_1hrwo_87";
+  const ganttBodyScroll = "_ganttBodyScroll_1hrwo_97";
+  const wrapper = "_wrapper_1hrwo_109";
+  const calendarDragging = "_calendarDragging_1hrwo_131";
   const styles$2 = {
     ganttVerticalContainer,
     horizontalContainer,
@@ -13202,19 +13202,31 @@
       horizontalContainerRef,
       onVerticalScrollbarScrollX,
       verticalGanttContainerRef,
-      verticalScrollbarRef
+      verticalScrollbarRef,
+      ganttHeight
     } = props;
     const contentRef = React.useRef(null);
     const moveStateVertRef = React.useRef(null);
     const moveStateHorRef = React.useRef(null);
     const moveStateScrollRef = React.useRef(null);
-    const containerStyle = React.useMemo(
-      () => ({
-        height: Math.min(ganttFullHeight, minimumRowDisplayed * rowHeight),
+    const containerStyle = React.useMemo(() => {
+      const minRowsHeight = minimumRowDisplayed * rowHeight;
+      const resolved = typeof ganttHeight === "number" ? ganttHeight : void 0;
+      const visible = Math.max(
+        minRowsHeight,
+        Math.min(ganttFullHeight, resolved ?? ganttFullHeight)
+      );
+      return {
+        height: visible,
         width: fullSvgWidth
-      }),
-      [ganttFullHeight, minimumRowDisplayed, rowHeight, fullSvgWidth]
-    );
+      };
+    }, [
+      ganttFullHeight,
+      minimumRowDisplayed,
+      rowHeight,
+      fullSvgWidth,
+      ganttHeight
+    ]);
     const gridStyle = React.useMemo(
       () => ({
         height: Math.max(ganttFullHeight, minimumRowDisplayed * rowHeight),
@@ -13298,15 +13310,18 @@
         moveStateHorRef.current = null;
         contentContainer.classList.remove(styles$2.calendarDragging);
       };
-      contentContainer.addEventListener("mousemove", onScrollMove);
-      contentContainer.addEventListener("mousedown", onScrollStart);
-      contentContainer.addEventListener("mouseup", onScrollEnd);
-      contentContainer.addEventListener("mouseout", onScrollEnd);
+      const moveListener = (evt) => onScrollMove(evt);
+      const startListener = (evt) => onScrollStart(evt);
+      const endListener = (evt) => onScrollEnd(evt);
+      contentContainer.addEventListener("mousemove", moveListener);
+      contentContainer.addEventListener("mousedown", startListener);
+      contentContainer.addEventListener("mouseup", endListener);
+      contentContainer.addEventListener("mouseout", endListener);
       return () => {
-        contentContainer.removeEventListener("mousemove", onScrollMove);
-        contentContainer.removeEventListener("mousedown", onScrollStart);
-        contentContainer.removeEventListener("mouseup", onScrollEnd);
-        contentContainer.removeEventListener("mouseout", onScrollEnd);
+        contentContainer.removeEventListener("mousemove", moveListener);
+        contentContainer.removeEventListener("mousedown", startListener);
+        contentContainer.removeEventListener("mouseup", endListener);
+        contentContainer.removeEventListener("mouseout", endListener);
       };
     }, [verticalScrollbarRef, horizontalContainerRef, verticalGanttContainerRef]);
     return /* @__PURE__ */ jsxRuntime.jsxs(
@@ -19905,7 +19920,7 @@
     return /* @__PURE__ */ jsxRuntime.jsx(GanttThemeProvider, { theme, children: (cssVars) => /* @__PURE__ */ jsxRuntime.jsx(GanttLocaleProvider, { locale, children: /* @__PURE__ */ jsxRuntime.jsxs(
       "div",
       {
-        style: cssVars,
+        style: typeof clientHeight === "string" ? { ...cssVars, height: clientHeight } : cssVars,
         className: `${styles$2.wrapper} gantt`,
         onKeyDown: handleKeyDown,
         tabIndex: 0,

package/dist/style.css

@@ -568,11 +568,11 @@
   user-select: none;
   stroke-width: 0;
 }
-._ganttVerticalContainer_1044x_1 {
+._ganttVerticalContainer_1hrwo_1 {
   display: flex;
   flex-direction: column;
-  overflow-x: hidden;
-  overflow-y: hidden;
+  overflow-x: scroll;
+  overflow-y: scroll;
   font-size: 0;
   margin: 0;
   padding: 0;
@@ -581,16 +581,16 @@
   flex-grow: 1;
 }
 
-._ganttVerticalContainer_1044x_1::-webkit-scrollbar {
+._ganttVerticalContainer_1hrwo_1::-webkit-scrollbar {
   width: 1rem;
   height: 1rem;
 }
 
-._ganttVerticalContainer_1044x_1::-webkit-scrollbar-corner {
+._ganttVerticalContainer_1hrwo_1::-webkit-scrollbar-corner {
   background: transparent;
 }
 
-._ganttVerticalContainer_1044x_1::-webkit-scrollbar-thumb {
+._ganttVerticalContainer_1hrwo_1::-webkit-scrollbar-thumb {
   border: 4px solid transparent;
   /*noinspection CssUnresolvedCustomProperty*/
   background: var(--gantt-scrollbar-thumb-color);
@@ -598,31 +598,31 @@
   background-clip: padding-box;
 }
 
-._ganttVerticalContainer_1044x_1::-webkit-scrollbar-thumb:hover {
+._ganttVerticalContainer_1hrwo_1::-webkit-scrollbar-thumb:hover {
   border: 2px solid transparent;
   /*noinspection CssUnresolvedCustomProperty*/
   background: var(--gantt-scrollbar-thumb-color);
   background-clip: padding-box;
 }
 
-._horizontalContainer_1044x_75 {
+._horizontalContainer_1hrwo_75 {
   margin: 0;
   padding: 0;
   overflow: hidden;
 }
 
-._ganttHeader_1044x_87 {
+._ganttHeader_1hrwo_87 {
   flex: 0 0 auto;
   z-index: 3;
 }
 
-._ganttBodyScroll_1044x_97 {
+._ganttBodyScroll_1hrwo_97 {
   flex: 1 1 auto;
   overflow-y: auto;
   overflow-x: hidden;
 }
 
-._wrapper_1044x_109 {
+._wrapper_1hrwo_109 {
   display: flex;
   padding: 0;
   margin: 0;
@@ -633,7 +633,7 @@
   border-bottom: 1px solid var(--gantt-divider-color);
 }
 
-._calendarDragging_1044x_131 {
+._calendarDragging_1hrwo_131 {
   cursor: grabbing;
 }
 /*noinspection CssUnresolvedCustomProperty*/

package/package.json

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