gantt-task-react-v 1.0.32 → 1.0.34

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

@@ -10656,14 +10656,14 @@ const TaskListTableDefaultInner = ({
   );
 };
 const TaskListTable = memo(TaskListTableDefaultInner);
-const taskListRoot = "_taskListRoot_1x5nq_1";
-const taskListHorizontalScroll = "_taskListHorizontalScroll_1x5nq_25";
-const taskListResizer = "_taskListResizer_1x5nq_89";
-const horizontalContainer$1 = "_horizontalContainer_1x5nq_153";
-const tableWrapper = "_tableWrapper_1x5nq_171";
-const scrollToTop = "_scrollToTop_1x5nq_183";
-const scrollToBottom = "_scrollToBottom_1x5nq_199";
-const hidden = "_hidden_1x5nq_215";
+const taskListRoot = "_taskListRoot_ycl6i_1";
+const taskListHorizontalScroll = "_taskListHorizontalScroll_ycl6i_27";
+const taskListResizer = "_taskListResizer_ycl6i_91";
+const horizontalContainer$1 = "_horizontalContainer_ycl6i_155";
+const tableWrapper = "_tableWrapper_ycl6i_173";
+const scrollToTop = "_scrollToTop_ycl6i_185";
+const scrollToBottom = "_scrollToBottom_ycl6i_201";
+const hidden = "_hidden_ycl6i_217";
 const styles$d = {
   taskListRoot,
   taskListHorizontalScroll,
@@ -13146,12 +13146,12 @@ const TaskGanttContentInner = (props) => {
   ] });
 };
 const TaskGanttContent = memo(TaskGanttContentInner);
-const ganttVerticalContainer = "_ganttVerticalContainer_68nax_1";
-const horizontalContainer = "_horizontalContainer_68nax_81";
-const ganttHeader = "_ganttHeader_68nax_97";
-const ganttBodyScroll = "_ganttBodyScroll_68nax_107";
-const wrapper = "_wrapper_68nax_121";
-const calendarDragging = "_calendarDragging_68nax_149";
+const ganttVerticalContainer = "_ganttVerticalContainer_ht10f_1";
+const horizontalContainer = "_horizontalContainer_ht10f_81";
+const ganttHeader = "_ganttHeader_ht10f_103";
+const ganttBodyScroll = "_ganttBodyScroll_ht10f_113";
+const wrapper = "_wrapper_ht10f_131";
+const calendarDragging = "_calendarDragging_ht10f_165";
 const styles$2 = {
   ganttVerticalContainer,
   horizontalContainer,
@@ -13184,7 +13184,8 @@ const TaskGanttInner = (props) => {
   const moveStateScrollRef = useRef(null);
   const containerStyle = useMemo(
     () => ({
-      height: "100%"
+      height: "100%",
+      width: "100%"
     }),
     []
   );

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

@@ -10673,14 +10673,14 @@
     );
   };
   const TaskListTable = React.memo(TaskListTableDefaultInner);
-  const taskListRoot = "_taskListRoot_1x5nq_1";
-  const taskListHorizontalScroll = "_taskListHorizontalScroll_1x5nq_25";
-  const taskListResizer = "_taskListResizer_1x5nq_89";
-  const horizontalContainer$1 = "_horizontalContainer_1x5nq_153";
-  const tableWrapper = "_tableWrapper_1x5nq_171";
-  const scrollToTop = "_scrollToTop_1x5nq_183";
-  const scrollToBottom = "_scrollToBottom_1x5nq_199";
-  const hidden = "_hidden_1x5nq_215";
+  const taskListRoot = "_taskListRoot_ycl6i_1";
+  const taskListHorizontalScroll = "_taskListHorizontalScroll_ycl6i_27";
+  const taskListResizer = "_taskListResizer_ycl6i_91";
+  const horizontalContainer$1 = "_horizontalContainer_ycl6i_155";
+  const tableWrapper = "_tableWrapper_ycl6i_173";
+  const scrollToTop = "_scrollToTop_ycl6i_185";
+  const scrollToBottom = "_scrollToBottom_ycl6i_201";
+  const hidden = "_hidden_ycl6i_217";
   const styles$d = {
     taskListRoot,
     taskListHorizontalScroll,
@@ -13163,12 +13163,12 @@
     ] });
   };
   const TaskGanttContent = React.memo(TaskGanttContentInner);
-  const ganttVerticalContainer = "_ganttVerticalContainer_68nax_1";
-  const horizontalContainer = "_horizontalContainer_68nax_81";
-  const ganttHeader = "_ganttHeader_68nax_97";
-  const ganttBodyScroll = "_ganttBodyScroll_68nax_107";
-  const wrapper = "_wrapper_68nax_121";
-  const calendarDragging = "_calendarDragging_68nax_149";
+  const ganttVerticalContainer = "_ganttVerticalContainer_ht10f_1";
+  const horizontalContainer = "_horizontalContainer_ht10f_81";
+  const ganttHeader = "_ganttHeader_ht10f_103";
+  const ganttBodyScroll = "_ganttBodyScroll_ht10f_113";
+  const wrapper = "_wrapper_ht10f_131";
+  const calendarDragging = "_calendarDragging_ht10f_165";
   const styles$2 = {
     ganttVerticalContainer,
     horizontalContainer,
@@ -13201,7 +13201,8 @@
     const moveStateScrollRef = React.useRef(null);
     const containerStyle = React.useMemo(
       () => ({
-        height: "100%"
+        height: "100%",
+        width: "100%"
       }),
       []
     );

package/dist/style.css

@@ -282,19 +282,20 @@
   border-bottom: 1px solid var(--gantt-divider-color);
   table-layout: fixed;
 }
-._taskListRoot_1x5nq_1 {
+._taskListRoot_ycl6i_1 {
   position: relative;
   /*noinspection CssUnresolvedCustomProperty*/
   border-left: 1px solid var(--gantt-table-divider-color, var(--gantt-divider-color));
   height: 100%;
   display: flex;
   flex-direction: column;
-  overflow: hidden;
-  max-width: 100%;
+  /* allow the gantt area to control horizontal scrolling rather than clipping here */
+  overflow: visible;
+  max-width: none;
   flex-shrink: 0;
 }
 
-._taskListHorizontalScroll_1x5nq_25 {
+._taskListHorizontalScroll_ycl6i_27 {
   overflow-x: auto;
   overflow-y: hidden;
   flex: 1;
@@ -302,16 +303,16 @@
   flex-direction: column;
 }
 
-._taskListHorizontalScroll_1x5nq_25::-webkit-scrollbar {
+._taskListHorizontalScroll_ycl6i_27::-webkit-scrollbar {
   width: 1rem;
   height: 1rem;
 }
 
-._taskListHorizontalScroll_1x5nq_25::-webkit-scrollbar-corner {
+._taskListHorizontalScroll_ycl6i_27::-webkit-scrollbar-corner {
   background: transparent;
 }
 
-._taskListHorizontalScroll_1x5nq_25::-webkit-scrollbar-thumb {
+._taskListHorizontalScroll_ycl6i_27::-webkit-scrollbar-thumb {
   border: 4px solid transparent;
   /*noinspection CssUnresolvedCustomProperty*/
   background: var(--gantt-scrollbar-thumb-color);
@@ -319,14 +320,14 @@
   background-clip: padding-box;
 }
 
-._taskListHorizontalScroll_1x5nq_25::-webkit-scrollbar-thumb:hover {
+._taskListHorizontalScroll_ycl6i_27::-webkit-scrollbar-thumb:hover {
   border: 2px solid transparent;
   /*noinspection CssUnresolvedCustomProperty*/
   background: var(--gantt-scrollbar-thumb-color);
   background-clip: padding-box;
 }
 
-._taskListResizer_1x5nq_89 {
+._taskListResizer_ycl6i_91 {
   position: absolute;
   top: 0;
   right: -3px;
@@ -338,16 +339,16 @@
 }
 
 /*noinspection CssUnresolvedCustomProperty*/
-._taskListResizer_1x5nq_89:hover {
+._taskListResizer_ycl6i_91:hover {
   background-color: var(--gantt-table-hover-action-color);
   filter: var(--gantt-hover-filter);
 }
 
-._taskListResizer_1x5nq_89:hover::before {
+._taskListResizer_ycl6i_91:hover::before {
   display: none;
 }
 
-._taskListResizer_1x5nq_89::before {
+._taskListResizer_ycl6i_91::before {
   content: "";
   position: absolute;
   top: 0;
@@ -358,7 +359,7 @@
   background-color: var(--gantt-table-resize-color, var(--gantt-divider-color));
 }
 
-._horizontalContainer_1x5nq_153 {
+._horizontalContainer_ycl6i_155 {
   margin: 0;
   padding: 0;
   overflow-y: auto;
@@ -367,13 +368,13 @@
   min-height: 0;
 }
 
-._tableWrapper_1x5nq_171 {
+._tableWrapper_ycl6i_173 {
   position: relative;
   flex: 1;
   min-height: 0;
 }
 
-._scrollToTop_1x5nq_183 {
+._scrollToTop_ycl6i_185 {
   position: absolute;
   top: 0;
   left: 0;
@@ -381,7 +382,7 @@
   height: 20px;
 }
 
-._scrollToBottom_1x5nq_199 {
+._scrollToBottom_ycl6i_201 {
   position: absolute;
   bottom: 0;
   left: 0;
@@ -389,7 +390,7 @@
   height: 20px;
 }
 
-._hidden_1x5nq_215 {
+._hidden_ycl6i_217 {
   display: none;
 }
 ._ganttToday_1oyhk_1 {
@@ -583,7 +584,7 @@
   user-select: none;
   stroke-width: 0;
 }
-._ganttVerticalContainer_68nax_1 {
+._ganttVerticalContainer_ht10f_1 {
   display: flex;
   flex-direction: column;
   overflow-x: auto;
@@ -596,19 +597,19 @@
   flex-grow: 1;
   height: 100%;
   min-height: 0;
-  width: 100%;
+  max-width: 100%;
 }
 
-._ganttVerticalContainer_68nax_1::-webkit-scrollbar {
+._ganttVerticalContainer_ht10f_1::-webkit-scrollbar {
   width: 1rem;
   height: 1rem;
 }
 
-._ganttVerticalContainer_68nax_1::-webkit-scrollbar-corner {
+._ganttVerticalContainer_ht10f_1::-webkit-scrollbar-corner {
   background: transparent;
 }
 
-._ganttVerticalContainer_68nax_1::-webkit-scrollbar-thumb {
+._ganttVerticalContainer_ht10f_1::-webkit-scrollbar-thumb {
   border: 4px solid transparent;
   /*noinspection CssUnresolvedCustomProperty*/
   background: var(--gantt-scrollbar-thumb-color);
@@ -616,34 +617,39 @@
   background-clip: padding-box;
 }
 
-._ganttVerticalContainer_68nax_1::-webkit-scrollbar-thumb:hover {
+._ganttVerticalContainer_ht10f_1::-webkit-scrollbar-thumb:hover {
   border: 2px solid transparent;
   /*noinspection CssUnresolvedCustomProperty*/
   background: var(--gantt-scrollbar-thumb-color);
   background-clip: padding-box;
 }
 
-._horizontalContainer_68nax_81 {
+._horizontalContainer_ht10f_81 {
   margin: 0;
   padding: 0;
-  overflow: visible;
+  /* allow the inner grid/svg to overflow horizontally so the outer container can scroll
+    (was clipping the svg when its width exceeded the container) */
+  overflow-x: auto;
+  overflow-y: hidden;
   height: 100%;
   min-height: 0;
 }
 
-._ganttHeader_68nax_97 {
+._ganttHeader_ht10f_103 {
   flex: 0 0 auto;
   z-index: 3;
 }
 
-._ganttBodyScroll_68nax_107 {
+._ganttBodyScroll_ht10f_113 {
   flex: 1 1 auto;
-  overflow: hidden;
+  /* allow horizontal scrolling here so the visible scroll area matches the SVG width */
+  overflow-y: auto;
+  overflow-x: auto;
   min-height: 0;
   height: 100%;
 }
 
-._wrapper_68nax_121 {
+._wrapper_ht10f_131 {
   display: flex;
   padding: 0;
   margin: 0;
@@ -654,10 +660,13 @@
   border-bottom: 1px solid var(--gantt-divider-color);
   height: 100%;
   min-height: 0;
-  width: 100%;
+  /* allow horizontal scrolling on the wrapper so users can navigate the wide gantt */
+  max-width: 100%;
+  overflow-x: auto;
+  overflow-y: hidden;
 }
 
-._calendarDragging_68nax_149 {
+._calendarDragging_ht10f_165 {
   cursor: grabbing;
 }
 /*noinspection CssUnresolvedCustomProperty*/

package/package.json

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