gantt-task-react-v 1.0.20 → 1.0.22

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

@@ -13147,12 +13147,12 @@ const TaskGanttContentInner = (props) => {
   ] });
 };
 const TaskGanttContent = memo(TaskGanttContentInner);
-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 ganttVerticalContainer = "_ganttVerticalContainer_z1ydk_1";
+const horizontalContainer = "_horizontalContainer_z1ydk_81";
+const ganttHeader = "_ganttHeader_z1ydk_99";
+const ganttBodyScroll = "_ganttBodyScroll_z1ydk_109";
+const wrapper = "_wrapper_z1ydk_125";
+const calendarDragging = "_calendarDragging_z1ydk_155";
 const styles$2 = {
   ganttVerticalContainer,
   horizontalContainer,
@@ -13186,39 +13186,16 @@ const TaskGanttInner = (props) => {
   const containerStyle = useMemo(
     () => ({
       height: "100%",
-      // width will be set dynamically below based on measured container width
-      width: fullSvgWidth
+      minWidth: fullSvgWidth,
+      width: "max-content"
     }),
     [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),
-      width: fullSvgWidth,
+      minWidth: fullSvgWidth,
+      width: "max-content",
       backgroundSize: `${columnWidth}px ${fullRowHeight * 2}px`,
       backgroundPositionX: additionalLeftSpace || void 0,
       backgroundImage: [
@@ -13298,33 +13275,15 @@ 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(
@@ -13350,13 +13309,7 @@ const TaskGanttInner = (props) => {
           {
             ref: horizontalContainerRef,
             className: styles$2.horizontalContainer,
-            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
-            },
+            style: containerStyle,
             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_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 ganttVerticalContainer = "_ganttVerticalContainer_z1ydk_1";
+  const horizontalContainer = "_horizontalContainer_z1ydk_81";
+  const ganttHeader = "_ganttHeader_z1ydk_99";
+  const ganttBodyScroll = "_ganttBodyScroll_z1ydk_109";
+  const wrapper = "_wrapper_z1ydk_125";
+  const calendarDragging = "_calendarDragging_z1ydk_155";
   const styles$2 = {
     ganttVerticalContainer,
     horizontalContainer,
@@ -13203,39 +13203,16 @@
     const containerStyle = React.useMemo(
       () => ({
         height: "100%",
-        // width will be set dynamically below based on measured container width
-        width: fullSvgWidth
+        minWidth: fullSvgWidth,
+        width: "max-content"
       }),
       [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),
-        width: fullSvgWidth,
+        minWidth: fullSvgWidth,
+        width: "max-content",
         backgroundSize: `${columnWidth}px ${fullRowHeight * 2}px`,
         backgroundPositionX: additionalLeftSpace || void 0,
         backgroundImage: [
@@ -13315,33 +13292,15 @@
         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(
@@ -13367,13 +13326,7 @@
             {
               ref: horizontalContainerRef,
               className: styles$2.horizontalContainer,
-              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
-              },
+              style: containerStyle,
               children: /* @__PURE__ */ jsxRuntime.jsx("div", { style: gridStyle, children: /* @__PURE__ */ jsxRuntime.jsxs(
                 "svg",
                 {

package/dist/style.css

@@ -581,10 +581,9 @@
   user-select: none;
   stroke-width: 0;
 }
-._ganttVerticalContainer_fjhll_1 {
+._ganttVerticalContainer_z1ydk_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;
@@ -595,18 +594,19 @@
   flex-grow: 1;
   height: 100%;
   min-height: 0;
+  max-width: 100%;
 }
 
-._ganttVerticalContainer_fjhll_1::-webkit-scrollbar {
+._ganttVerticalContainer_z1ydk_1::-webkit-scrollbar {
   width: 1rem;
   height: 1rem;
 }
 
-._ganttVerticalContainer_fjhll_1::-webkit-scrollbar-corner {
+._ganttVerticalContainer_z1ydk_1::-webkit-scrollbar-corner {
   background: transparent;
 }
 
-._ganttVerticalContainer_fjhll_1::-webkit-scrollbar-thumb {
+._ganttVerticalContainer_z1ydk_1::-webkit-scrollbar-thumb {
   border: 4px solid transparent;
   /*noinspection CssUnresolvedCustomProperty*/
   background: var(--gantt-scrollbar-thumb-color);
@@ -614,37 +614,36 @@
   background-clip: padding-box;
 }
 
-._ganttVerticalContainer_fjhll_1::-webkit-scrollbar-thumb:hover {
+._ganttVerticalContainer_z1ydk_1::-webkit-scrollbar-thumb:hover {
   border: 2px solid transparent;
   /*noinspection CssUnresolvedCustomProperty*/
   background: var(--gantt-scrollbar-thumb-color);
   background-clip: padding-box;
 }
 
-._horizontalContainer_fjhll_81 {
+._horizontalContainer_z1ydk_81 {
   margin: 0;
   padding: 0;
-  /* keep inner container hidden overflow so content width is controlled by outer container */
   overflow: hidden;
   height: 100%;
   min-height: 0;
+  min-width: 0;
 }
 
-._ganttHeader_fjhll_99 {
+._ganttHeader_z1ydk_99 {
   flex: 0 0 auto;
   z-index: 3;
 }
 
-._ganttBodyScroll_fjhll_109 {
+._ganttBodyScroll_z1ydk_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%;
 }
 
-._wrapper_fjhll_127 {
+._wrapper_z1ydk_125 {
   display: flex;
   padding: 0;
   margin: 0;
@@ -655,9 +654,11 @@
   border-bottom: 1px solid var(--gantt-divider-color);
   height: 100%;
   min-height: 0;
+  max-width: 100%;
+  overflow: hidden;
 }
 
-._calendarDragging_fjhll_153 {
+._calendarDragging_z1ydk_155 {
   cursor: grabbing;
 }
 /*noinspection CssUnresolvedCustomProperty*/

package/package.json

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