gantt-task-react-v 1.0.18 → 1.0.20

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

@@ -13147,12 +13147,12 @@ const TaskGanttContentInner = (props) => {
   ] });
 };
 const TaskGanttContent = memo(TaskGanttContentInner);
-const ganttVerticalContainer = "_ganttVerticalContainer_15txg_1";
-const horizontalContainer = "_horizontalContainer_15txg_79";
-const ganttHeader = "_ganttHeader_15txg_143";
-const ganttBodyScroll = "_ganttBodyScroll_15txg_153";
-const wrapper = "_wrapper_15txg_217";
-const calendarDragging = "_calendarDragging_15txg_243";
+const ganttVerticalContainer = "_ganttVerticalContainer_fjhll_1";
+const horizontalContainer = "_horizontalContainer_fjhll_81";
+const ganttHeader = "_ganttHeader_fjhll_99";
+const ganttBodyScroll = "_ganttBodyScroll_fjhll_109";
+const wrapper = "_wrapper_fjhll_127";
+const calendarDragging = "_calendarDragging_fjhll_153";
 const styles$2 = {
   ganttVerticalContainer,
   horizontalContainer,
@@ -13186,10 +13186,35 @@ const TaskGanttInner = (props) => {
   const containerStyle = useMemo(
     () => ({
       height: "100%",
+      // width will be set dynamically below based on measured container width
       width: fullSvgWidth
     }),
     [fullSvgWidth]
   );
+  const [parentClientWidth, setParentClientWidth] = useState(
+    null
+  );
+  useEffect(() => {
+    const el = verticalGanttContainerRef.current;
+    if (!el) {
+      return () => {
+      };
+    }
+    const update = () => setParentClientWidth(el.clientWidth);
+    update();
+    let ro = null;
+    if (typeof ResizeObserver !== "undefined") {
+      ro = new ResizeObserver(() => update());
+      ro.observe(el);
+    }
+    window.addEventListener("resize", update);
+    return () => {
+      if (ro) {
+        ro.disconnect();
+      }
+      window.removeEventListener("resize", update);
+    };
+  }, [verticalGanttContainerRef]);
   const gridStyle = useMemo(
     () => ({
       height: Math.max(ganttFullHeight, minimumRowDisplayed * rowHeight),
@@ -13273,15 +13298,33 @@ const TaskGanttInner = (props) => {
       moveStateHorRef.current = null;
       contentContainer.classList.remove(styles$2.calendarDragging);
     };
-    contentContainer.addEventListener("mousemove", onScrollMove);
-    contentContainer.addEventListener("mousedown", onScrollStart);
+    contentContainer.addEventListener(
+      "mousemove",
+      onScrollMove
+    );
+    contentContainer.addEventListener(
+      "mousedown",
+      onScrollStart
+    );
     contentContainer.addEventListener("mouseup", onScrollEnd);
     contentContainer.addEventListener("mouseout", onScrollEnd);
     return () => {
-      contentContainer.removeEventListener("mousemove", onScrollMove);
-      contentContainer.removeEventListener("mousedown", onScrollStart);
-      contentContainer.removeEventListener("mouseup", onScrollEnd);
-      contentContainer.removeEventListener("mouseout", onScrollEnd);
+      contentContainer.removeEventListener(
+        "mousemove",
+        onScrollMove
+      );
+      contentContainer.removeEventListener(
+        "mousedown",
+        onScrollStart
+      );
+      contentContainer.removeEventListener(
+        "mouseup",
+        onScrollEnd
+      );
+      contentContainer.removeEventListener(
+        "mouseout",
+        onScrollEnd
+      );
     };
   }, [verticalScrollbarRef, horizontalContainerRef, verticalGanttContainerRef]);
   return /* @__PURE__ */ jsxs(
@@ -13307,7 +13350,13 @@ const TaskGanttInner = (props) => {
           {
             ref: horizontalContainerRef,
             className: styles$2.horizontalContainer,
-            style: containerStyle,
+            style: {
+              ...containerStyle,
+              // ensure the horizontal container occupies at least the parent view width
+              // so it's flexible when fullSvgWidth is smaller than the current viewport,
+              // and it overflows when fullSvgWidth is larger.
+              width: parentClientWidth && parentClientWidth > fullSvgWidth ? parentClientWidth : fullSvgWidth
+            },
             children: /* @__PURE__ */ jsx("div", { style: gridStyle, children: /* @__PURE__ */ jsxs(
               "svg",
               {

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

@@ -13164,12 +13164,12 @@
     ] });
   };
   const TaskGanttContent = React.memo(TaskGanttContentInner);
-  const ganttVerticalContainer = "_ganttVerticalContainer_15txg_1";
-  const horizontalContainer = "_horizontalContainer_15txg_79";
-  const ganttHeader = "_ganttHeader_15txg_143";
-  const ganttBodyScroll = "_ganttBodyScroll_15txg_153";
-  const wrapper = "_wrapper_15txg_217";
-  const calendarDragging = "_calendarDragging_15txg_243";
+  const ganttVerticalContainer = "_ganttVerticalContainer_fjhll_1";
+  const horizontalContainer = "_horizontalContainer_fjhll_81";
+  const ganttHeader = "_ganttHeader_fjhll_99";
+  const ganttBodyScroll = "_ganttBodyScroll_fjhll_109";
+  const wrapper = "_wrapper_fjhll_127";
+  const calendarDragging = "_calendarDragging_fjhll_153";
   const styles$2 = {
     ganttVerticalContainer,
     horizontalContainer,
@@ -13203,10 +13203,35 @@
     const containerStyle = React.useMemo(
       () => ({
         height: "100%",
+        // width will be set dynamically below based on measured container width
         width: fullSvgWidth
       }),
       [fullSvgWidth]
     );
+    const [parentClientWidth, setParentClientWidth] = React.useState(
+      null
+    );
+    React.useEffect(() => {
+      const el = verticalGanttContainerRef.current;
+      if (!el) {
+        return () => {
+        };
+      }
+      const update = () => setParentClientWidth(el.clientWidth);
+      update();
+      let ro = null;
+      if (typeof ResizeObserver !== "undefined") {
+        ro = new ResizeObserver(() => update());
+        ro.observe(el);
+      }
+      window.addEventListener("resize", update);
+      return () => {
+        if (ro) {
+          ro.disconnect();
+        }
+        window.removeEventListener("resize", update);
+      };
+    }, [verticalGanttContainerRef]);
     const gridStyle = React.useMemo(
       () => ({
         height: Math.max(ganttFullHeight, minimumRowDisplayed * rowHeight),
@@ -13290,15 +13315,33 @@
         moveStateHorRef.current = null;
         contentContainer.classList.remove(styles$2.calendarDragging);
       };
-      contentContainer.addEventListener("mousemove", onScrollMove);
-      contentContainer.addEventListener("mousedown", onScrollStart);
+      contentContainer.addEventListener(
+        "mousemove",
+        onScrollMove
+      );
+      contentContainer.addEventListener(
+        "mousedown",
+        onScrollStart
+      );
       contentContainer.addEventListener("mouseup", onScrollEnd);
       contentContainer.addEventListener("mouseout", onScrollEnd);
       return () => {
-        contentContainer.removeEventListener("mousemove", onScrollMove);
-        contentContainer.removeEventListener("mousedown", onScrollStart);
-        contentContainer.removeEventListener("mouseup", onScrollEnd);
-        contentContainer.removeEventListener("mouseout", onScrollEnd);
+        contentContainer.removeEventListener(
+          "mousemove",
+          onScrollMove
+        );
+        contentContainer.removeEventListener(
+          "mousedown",
+          onScrollStart
+        );
+        contentContainer.removeEventListener(
+          "mouseup",
+          onScrollEnd
+        );
+        contentContainer.removeEventListener(
+          "mouseout",
+          onScrollEnd
+        );
       };
     }, [verticalScrollbarRef, horizontalContainerRef, verticalGanttContainerRef]);
     return /* @__PURE__ */ jsxRuntime.jsxs(
@@ -13324,7 +13367,13 @@
             {
               ref: horizontalContainerRef,
               className: styles$2.horizontalContainer,
-              style: containerStyle,
+              style: {
+                ...containerStyle,
+                // ensure the horizontal container occupies at least the parent view width
+                // so it's flexible when fullSvgWidth is smaller than the current viewport,
+                // and it overflows when fullSvgWidth is larger.
+                width: parentClientWidth && parentClientWidth > fullSvgWidth ? parentClientWidth : fullSvgWidth
+              },
               children: /* @__PURE__ */ jsxRuntime.jsx("div", { style: gridStyle, children: /* @__PURE__ */ jsxRuntime.jsxs(
                 "svg",
                 {

package/dist/style.css

@@ -581,9 +581,10 @@
   user-select: none;
   stroke-width: 0;
 }
-._ganttVerticalContainer_15txg_1 {
+._ganttVerticalContainer_fjhll_1 {
   display: flex;
   flex-direction: column;
+  /* allow horizontal scrolling so the gantt SVG can overflow and be scrolled */
   overflow-x: auto;
   overflow-y: hidden;
   font-size: 0;
@@ -596,16 +597,16 @@
   min-height: 0;
 }
 
-._ganttVerticalContainer_15txg_1::-webkit-scrollbar {
+._ganttVerticalContainer_fjhll_1::-webkit-scrollbar {
   width: 1rem;
   height: 1rem;
 }
 
-._ganttVerticalContainer_15txg_1::-webkit-scrollbar-corner {
+._ganttVerticalContainer_fjhll_1::-webkit-scrollbar-corner {
   background: transparent;
 }
 
-._ganttVerticalContainer_15txg_1::-webkit-scrollbar-thumb {
+._ganttVerticalContainer_fjhll_1::-webkit-scrollbar-thumb {
   border: 4px solid transparent;
   /*noinspection CssUnresolvedCustomProperty*/
   background: var(--gantt-scrollbar-thumb-color);
@@ -613,83 +614,37 @@
   background-clip: padding-box;
 }
 
-._ganttVerticalContainer_15txg_1::-webkit-scrollbar-thumb:hover {
+._ganttVerticalContainer_fjhll_1::-webkit-scrollbar-thumb:hover {
   border: 2px solid transparent;
   /*noinspection CssUnresolvedCustomProperty*/
   background: var(--gantt-scrollbar-thumb-color);
   background-clip: padding-box;
 }
 
-._horizontalContainer_15txg_79 {
+._horizontalContainer_fjhll_81 {
   margin: 0;
   padding: 0;
-  overflow: auto;
+  /* keep inner container hidden overflow so content width is controlled by outer container */
+  overflow: hidden;
   height: 100%;
   min-height: 0;
 }
 
-._horizontalContainer_15txg_79::-webkit-scrollbar {
-  width: 1rem;
-  height: 1rem;
-}
-
-._horizontalContainer_15txg_79::-webkit-scrollbar-corner {
-  background: transparent;
-}
-
-._horizontalContainer_15txg_79::-webkit-scrollbar-thumb {
-  border: 4px solid transparent;
-  /*noinspection CssUnresolvedCustomProperty*/
-  background: var(--gantt-scrollbar-thumb-color);
-  border-radius: 12px;
-  background-clip: padding-box;
-}
-
-._horizontalContainer_15txg_79::-webkit-scrollbar-thumb:hover {
-  border: 2px solid transparent;
-  /*noinspection CssUnresolvedCustomProperty*/
-  background: var(--gantt-scrollbar-thumb-color);
-  background-clip: padding-box;
-}
-
-._ganttHeader_15txg_143 {
+._ganttHeader_fjhll_99 {
   flex: 0 0 auto;
   z-index: 3;
 }
 
-._ganttBodyScroll_15txg_153 {
+._ganttBodyScroll_fjhll_109 {
   flex: 1 1 auto;
+  /* vertical scrolling only here; horizontal controlled by the parent container */
   overflow-y: auto;
   overflow-x: hidden;
   min-height: 0;
   height: 100%;
 }
 
-._ganttBodyScroll_15txg_153::-webkit-scrollbar {
-  width: 1rem;
-  height: 1rem;
-}
-
-._ganttBodyScroll_15txg_153::-webkit-scrollbar-corner {
-  background: transparent;
-}
-
-._ganttBodyScroll_15txg_153::-webkit-scrollbar-thumb {
-  border: 4px solid transparent;
-  /*noinspection CssUnresolvedCustomProperty*/
-  background: var(--gantt-scrollbar-thumb-color);
-  border-radius: 12px;
-  background-clip: padding-box;
-}
-
-._ganttBodyScroll_15txg_153::-webkit-scrollbar-thumb:hover {
-  border: 2px solid transparent;
-  /*noinspection CssUnresolvedCustomProperty*/
-  background: var(--gantt-scrollbar-thumb-color);
-  background-clip: padding-box;
-}
-
-._wrapper_15txg_217 {
+._wrapper_fjhll_127 {
   display: flex;
   padding: 0;
   margin: 0;
@@ -702,7 +657,7 @@
   min-height: 0;
 }
 
-._calendarDragging_15txg_243 {
+._calendarDragging_fjhll_153 {
   cursor: grabbing;
 }
 /*noinspection CssUnresolvedCustomProperty*/

package/package.json

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