gantt-task-react-v 1.0.19 → 1.0.20

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

@@ -10657,14 +10657,14 @@ const TaskListTableDefaultInner = ({
   );
 };
 const TaskListTable = memo(TaskListTableDefaultInner);
-const taskListRoot = "_taskListRoot_1jqtj_1";
-const taskListHorizontalScroll = "_taskListHorizontalScroll_1jqtj_21";
-const taskListResizer = "_taskListResizer_1jqtj_85";
-const horizontalContainer$1 = "_horizontalContainer_1jqtj_149";
-const tableWrapper = "_tableWrapper_1jqtj_215";
-const scrollToTop = "_scrollToTop_1jqtj_227";
-const scrollToBottom = "_scrollToBottom_1jqtj_243";
-const hidden = "_hidden_1jqtj_259";
+const taskListRoot = "_taskListRoot_xeaio_1";
+const taskListHorizontalScroll = "_taskListHorizontalScroll_xeaio_21";
+const taskListResizer = "_taskListResizer_xeaio_85";
+const horizontalContainer$1 = "_horizontalContainer_xeaio_149";
+const tableWrapper = "_tableWrapper_xeaio_167";
+const scrollToTop = "_scrollToTop_xeaio_179";
+const scrollToBottom = "_scrollToBottom_xeaio_195";
+const hidden = "_hidden_xeaio_211";
 const styles$d = {
   taskListRoot,
   taskListHorizontalScroll,
@@ -13147,12 +13147,12 @@ const TaskGanttContentInner = (props) => {
   ] });
 };
 const TaskGanttContent = memo(TaskGanttContentInner);
-const ganttVerticalContainer = "_ganttVerticalContainer_1benq_1";
-const horizontalContainer = "_horizontalContainer_1benq_79";
-const ganttHeader = "_ganttHeader_1benq_95";
-const ganttBodyScroll = "_ganttBodyScroll_1benq_105";
-const wrapper = "_wrapper_1benq_169";
-const calendarDragging = "_calendarDragging_1benq_195";
+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

@@ -10674,14 +10674,14 @@
     );
   };
   const TaskListTable = React.memo(TaskListTableDefaultInner);
-  const taskListRoot = "_taskListRoot_1jqtj_1";
-  const taskListHorizontalScroll = "_taskListHorizontalScroll_1jqtj_21";
-  const taskListResizer = "_taskListResizer_1jqtj_85";
-  const horizontalContainer$1 = "_horizontalContainer_1jqtj_149";
-  const tableWrapper = "_tableWrapper_1jqtj_215";
-  const scrollToTop = "_scrollToTop_1jqtj_227";
-  const scrollToBottom = "_scrollToBottom_1jqtj_243";
-  const hidden = "_hidden_1jqtj_259";
+  const taskListRoot = "_taskListRoot_xeaio_1";
+  const taskListHorizontalScroll = "_taskListHorizontalScroll_xeaio_21";
+  const taskListResizer = "_taskListResizer_xeaio_85";
+  const horizontalContainer$1 = "_horizontalContainer_xeaio_149";
+  const tableWrapper = "_tableWrapper_xeaio_167";
+  const scrollToTop = "_scrollToTop_xeaio_179";
+  const scrollToBottom = "_scrollToBottom_xeaio_195";
+  const hidden = "_hidden_xeaio_211";
   const styles$d = {
     taskListRoot,
     taskListHorizontalScroll,
@@ -13164,12 +13164,12 @@
     ] });
   };
   const TaskGanttContent = React.memo(TaskGanttContentInner);
-  const ganttVerticalContainer = "_ganttVerticalContainer_1benq_1";
-  const horizontalContainer = "_horizontalContainer_1benq_79";
-  const ganttHeader = "_ganttHeader_1benq_95";
-  const ganttBodyScroll = "_ganttBodyScroll_1benq_105";
-  const wrapper = "_wrapper_1benq_169";
-  const calendarDragging = "_calendarDragging_1benq_195";
+  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

@@ -282,7 +282,7 @@
   border-bottom: 1px solid var(--gantt-divider-color);
   table-layout: fixed;
 }
-._taskListRoot_1jqtj_1 {
+._taskListRoot_xeaio_1 {
   position: relative;
   /*noinspection CssUnresolvedCustomProperty*/
   border-left: 1px solid var(--gantt-table-divider-color, var(--gantt-divider-color));
@@ -292,7 +292,7 @@
   overflow: hidden;
 }
 
-._taskListHorizontalScroll_1jqtj_21 {
+._taskListHorizontalScroll_xeaio_21 {
   overflow-x: auto;
   overflow-y: hidden;
   flex: 1;
@@ -300,16 +300,16 @@
   flex-direction: column;
 }
 
-._taskListHorizontalScroll_1jqtj_21::-webkit-scrollbar {
-  width: 0;
+._taskListHorizontalScroll_xeaio_21::-webkit-scrollbar {
+  width: 1rem;
   height: 1rem;
 }
 
-._taskListHorizontalScroll_1jqtj_21::-webkit-scrollbar-corner {
+._taskListHorizontalScroll_xeaio_21::-webkit-scrollbar-corner {
   background: transparent;
 }
 
-._taskListHorizontalScroll_1jqtj_21::-webkit-scrollbar-thumb {
+._taskListHorizontalScroll_xeaio_21::-webkit-scrollbar-thumb {
   border: 4px solid transparent;
   /*noinspection CssUnresolvedCustomProperty*/
   background: var(--gantt-scrollbar-thumb-color);
@@ -317,14 +317,14 @@
   background-clip: padding-box;
 }
 
-._taskListHorizontalScroll_1jqtj_21::-webkit-scrollbar-thumb:hover {
+._taskListHorizontalScroll_xeaio_21::-webkit-scrollbar-thumb:hover {
   border: 2px solid transparent;
   /*noinspection CssUnresolvedCustomProperty*/
   background: var(--gantt-scrollbar-thumb-color);
   background-clip: padding-box;
 }
 
-._taskListResizer_1jqtj_85 {
+._taskListResizer_xeaio_85 {
   position: absolute;
   top: 0;
   right: -3px;
@@ -336,16 +336,16 @@
 }
 
 /*noinspection CssUnresolvedCustomProperty*/
-._taskListResizer_1jqtj_85:hover {
+._taskListResizer_xeaio_85:hover {
   background-color: var(--gantt-table-hover-action-color);
   filter: var(--gantt-hover-filter);
 }
 
-._taskListResizer_1jqtj_85:hover::before {
+._taskListResizer_xeaio_85:hover::before {
   display: none;
 }
 
-._taskListResizer_1jqtj_85::before {
+._taskListResizer_xeaio_85::before {
   content: "";
   position: absolute;
   top: 0;
@@ -356,7 +356,7 @@
   background-color: var(--gantt-table-resize-color, var(--gantt-divider-color));
 }
 
-._horizontalContainer_1jqtj_149 {
+._horizontalContainer_xeaio_149 {
   margin: 0;
   padding: 0;
   overflow-y: auto;
@@ -365,37 +365,13 @@
   min-height: 0;
 }
 
-._horizontalContainer_1jqtj_149::-webkit-scrollbar {
-  width: 1rem;
-  height: 1rem;
-}
-
-._horizontalContainer_1jqtj_149::-webkit-scrollbar-corner {
-  background: transparent;
-}
-
-._horizontalContainer_1jqtj_149::-webkit-scrollbar-thumb {
-  border: 4px solid transparent;
-  /*noinspection CssUnresolvedCustomProperty*/
-  background: var(--gantt-scrollbar-thumb-color);
-  border-radius: 12px;
-  background-clip: padding-box;
-}
-
-._horizontalContainer_1jqtj_149::-webkit-scrollbar-thumb:hover {
-  border: 2px solid transparent;
-  /*noinspection CssUnresolvedCustomProperty*/
-  background: var(--gantt-scrollbar-thumb-color);
-  background-clip: padding-box;
-}
-
-._tableWrapper_1jqtj_215 {
+._tableWrapper_xeaio_167 {
   position: relative;
   flex: 1;
   min-height: 0;
 }
 
-._scrollToTop_1jqtj_227 {
+._scrollToTop_xeaio_179 {
   position: absolute;
   top: 0;
   left: 0;
@@ -403,7 +379,7 @@
   height: 20px;
 }
 
-._scrollToBottom_1jqtj_243 {
+._scrollToBottom_xeaio_195 {
   position: absolute;
   bottom: 0;
   left: 0;
@@ -411,7 +387,7 @@
   height: 20px;
 }
 
-._hidden_1jqtj_259 {
+._hidden_xeaio_211 {
   display: none;
 }
 ._ganttToday_1oyhk_1 {
@@ -605,9 +581,10 @@
   user-select: none;
   stroke-width: 0;
 }
-._ganttVerticalContainer_1benq_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;
@@ -620,16 +597,16 @@
   min-height: 0;
 }
 
-._ganttVerticalContainer_1benq_1::-webkit-scrollbar {
+._ganttVerticalContainer_fjhll_1::-webkit-scrollbar {
   width: 1rem;
   height: 1rem;
 }
 
-._ganttVerticalContainer_1benq_1::-webkit-scrollbar-corner {
+._ganttVerticalContainer_fjhll_1::-webkit-scrollbar-corner {
   background: transparent;
 }
 
-._ganttVerticalContainer_1benq_1::-webkit-scrollbar-thumb {
+._ganttVerticalContainer_fjhll_1::-webkit-scrollbar-thumb {
   border: 4px solid transparent;
   /*noinspection CssUnresolvedCustomProperty*/
   background: var(--gantt-scrollbar-thumb-color);
@@ -637,59 +614,37 @@
   background-clip: padding-box;
 }
 
-._ganttVerticalContainer_1benq_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_1benq_79 {
+._horizontalContainer_fjhll_81 {
   margin: 0;
   padding: 0;
-  overflow: visible;
+  /* keep inner container hidden overflow so content width is controlled by outer container */
+  overflow: hidden;
   height: 100%;
   min-height: 0;
 }
 
-._ganttHeader_1benq_95 {
+._ganttHeader_fjhll_99 {
   flex: 0 0 auto;
   z-index: 3;
 }
 
-._ganttBodyScroll_1benq_105 {
+._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_1benq_105::-webkit-scrollbar {
-  width: 1rem;
-  height: 1rem;
-}
-
-._ganttBodyScroll_1benq_105::-webkit-scrollbar-corner {
-  background: transparent;
-}
-
-._ganttBodyScroll_1benq_105::-webkit-scrollbar-thumb {
-  border: 4px solid transparent;
-  /*noinspection CssUnresolvedCustomProperty*/
-  background: var(--gantt-scrollbar-thumb-color);
-  border-radius: 12px;
-  background-clip: padding-box;
-}
-
-._ganttBodyScroll_1benq_105::-webkit-scrollbar-thumb:hover {
-  border: 2px solid transparent;
-  /*noinspection CssUnresolvedCustomProperty*/
-  background: var(--gantt-scrollbar-thumb-color);
-  background-clip: padding-box;
-}
-
-._wrapper_1benq_169 {
+._wrapper_fjhll_127 {
   display: flex;
   padding: 0;
   margin: 0;
@@ -702,7 +657,7 @@
   min-height: 0;
 }
 
-._calendarDragging_1benq_195 {
+._calendarDragging_fjhll_153 {
   cursor: grabbing;
 }
 /*noinspection CssUnresolvedCustomProperty*/

package/package.json

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