gantt-task-react-v 1.0.14 → 1.0.16

package/dist/components/task-list/index.d.ts

@@ -1,4 +1,4 @@
-import type { MouseEvent, RefObject } from "react";
+import type { MouseEvent, RefObject, SyntheticEvent } from "react";
 import React from "react";
 import { AllowReorderTask, ChildByLevelMap, Column, DateSetup, DependencyMap, Distances, GanttRenderIconsProps, MapTaskToNestedIndex, OnResizeColumn, Task, RenderTask, TableRenderBottomProps } from "../../types";
 export type TaskListProps = {
@@ -37,5 +37,6 @@ export type TaskListProps = {
     tasks: readonly RenderTask[];
     onResizeColumn?: OnResizeColumn;
     tableBottom?: TableRenderBottomProps;
+    onVerticalScrollbarScrollY?: (event: SyntheticEvent<HTMLDivElement>) => void;
 };
 export declare const TaskList: React.NamedExoticComponent<TaskListProps>;

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

@@ -10657,14 +10657,14 @@ const TaskListTableDefaultInner = ({
   );
 };
 const TaskListTable = memo(TaskListTableDefaultInner);
-const taskListRoot = "_taskListRoot_3vx1x_1";
-const taskListHorizontalScroll = "_taskListHorizontalScroll_3vx1x_19";
-const taskListResizer = "_taskListResizer_3vx1x_81";
-const horizontalContainer$1 = "_horizontalContainer_3vx1x_145";
-const tableWrapper = "_tableWrapper_3vx1x_161";
-const scrollToTop = "_scrollToTop_3vx1x_175";
-const scrollToBottom = "_scrollToBottom_3vx1x_191";
-const hidden = "_hidden_3vx1x_207";
+const taskListRoot = "_taskListRoot_1rzqg_1";
+const taskListHorizontalScroll = "_taskListHorizontalScroll_1rzqg_19";
+const taskListResizer = "_taskListResizer_1rzqg_75";
+const horizontalContainer$1 = "_horizontalContainer_1rzqg_139";
+const tableWrapper = "_tableWrapper_1rzqg_155";
+const scrollToTop = "_scrollToTop_1rzqg_167";
+const scrollToBottom = "_scrollToBottom_1rzqg_183";
+const hidden = "_hidden_1rzqg_199";
 const styles$d = {
   taskListRoot,
   taskListHorizontalScroll,
@@ -10720,7 +10720,8 @@ const TaskListInner = ({
   tasks,
   onResizeColumn,
   canReorderTasks,
-  tableBottom
+  tableBottom,
+  onVerticalScrollbarScrollY
 }) => {
   const [
     columns,
@@ -10828,22 +10829,16 @@ const TaskListInner = ({
                 ref: taskListContainerRef,
                 className: styles$d.horizontalContainer,
                 style: {
-                  height: Math.min(
-                    ganttFullHeight,
-                    distances.minimumRowDisplayed * distances.rowHeight
-                  ),
                   width: taskListWidth
                 },
+                onScroll: onVerticalScrollbarScrollY,
                 children: /* @__PURE__ */ jsx(
                   "div",
                   {
                     style: {
-                      height: Math.max(
-                        ganttFullHeight,
-                        distances.minimumRowDisplayed * distances.rowHeight
-                      ),
                       backgroundSize: `100% ${fullRowHeight * 2}px`,
-                      backgroundImage: `linear-gradient(to bottom, transparent ${fullRowHeight}px, #f5f5f5 ${fullRowHeight}px)`
+                      backgroundImage: `linear-gradient(to bottom, transparent ${fullRowHeight}px, #f5f5f5 ${fullRowHeight}px)`,
+                      height: "100%"
                     },
                     children: /* @__PURE__ */ jsx(
                       RenderTaskListTable,
@@ -19851,7 +19846,8 @@ const Gantt = (props) => {
       taskListContainerRef,
       taskListRef,
       tasks: visibleTasks,
-      ganttRef: wrapperRef
+      ganttRef: wrapperRef,
+      onVerticalScrollbarScrollY
     }),
     [
       childTasksMap,
@@ -19879,7 +19875,8 @@ const Gantt = (props) => {
       selectedIdsMirror,
       taskList,
       taskListContainerRef,
-      visibleTasks
+      visibleTasks,
+      onVerticalScrollbarScrollY
     ]
   );
   return /* @__PURE__ */ jsx(GanttThemeProvider, { theme, children: (cssVars) => /* @__PURE__ */ jsx(GanttLocaleProvider, { locale, children: /* @__PURE__ */ jsxs(

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

@@ -10674,14 +10674,14 @@
     );
   };
   const TaskListTable = React.memo(TaskListTableDefaultInner);
-  const taskListRoot = "_taskListRoot_3vx1x_1";
-  const taskListHorizontalScroll = "_taskListHorizontalScroll_3vx1x_19";
-  const taskListResizer = "_taskListResizer_3vx1x_81";
-  const horizontalContainer$1 = "_horizontalContainer_3vx1x_145";
-  const tableWrapper = "_tableWrapper_3vx1x_161";
-  const scrollToTop = "_scrollToTop_3vx1x_175";
-  const scrollToBottom = "_scrollToBottom_3vx1x_191";
-  const hidden = "_hidden_3vx1x_207";
+  const taskListRoot = "_taskListRoot_1rzqg_1";
+  const taskListHorizontalScroll = "_taskListHorizontalScroll_1rzqg_19";
+  const taskListResizer = "_taskListResizer_1rzqg_75";
+  const horizontalContainer$1 = "_horizontalContainer_1rzqg_139";
+  const tableWrapper = "_tableWrapper_1rzqg_155";
+  const scrollToTop = "_scrollToTop_1rzqg_167";
+  const scrollToBottom = "_scrollToBottom_1rzqg_183";
+  const hidden = "_hidden_1rzqg_199";
   const styles$d = {
     taskListRoot,
     taskListHorizontalScroll,
@@ -10737,7 +10737,8 @@
     tasks,
     onResizeColumn,
     canReorderTasks,
-    tableBottom
+    tableBottom,
+    onVerticalScrollbarScrollY
   }) => {
     const [
       columns,
@@ -10845,22 +10846,16 @@
                   ref: taskListContainerRef,
                   className: styles$d.horizontalContainer,
                   style: {
-                    height: Math.min(
-                      ganttFullHeight,
-                      distances.minimumRowDisplayed * distances.rowHeight
-                    ),
                     width: taskListWidth
                   },
+                  onScroll: onVerticalScrollbarScrollY,
                   children: /* @__PURE__ */ jsxRuntime.jsx(
                     "div",
                     {
                       style: {
-                        height: Math.max(
-                          ganttFullHeight,
-                          distances.minimumRowDisplayed * distances.rowHeight
-                        ),
                         backgroundSize: `100% ${fullRowHeight * 2}px`,
-                        backgroundImage: `linear-gradient(to bottom, transparent ${fullRowHeight}px, #f5f5f5 ${fullRowHeight}px)`
+                        backgroundImage: `linear-gradient(to bottom, transparent ${fullRowHeight}px, #f5f5f5 ${fullRowHeight}px)`,
+                        height: "100%"
                       },
                       children: /* @__PURE__ */ jsxRuntime.jsx(
                         RenderTaskListTable,
@@ -19868,7 +19863,8 @@
         taskListContainerRef,
         taskListRef,
         tasks: visibleTasks,
-        ganttRef: wrapperRef
+        ganttRef: wrapperRef,
+        onVerticalScrollbarScrollY
       }),
       [
         childTasksMap,
@@ -19896,7 +19892,8 @@
         selectedIdsMirror,
         taskList,
         taskListContainerRef,
-        visibleTasks
+        visibleTasks,
+        onVerticalScrollbarScrollY
       ]
     );
     return /* @__PURE__ */ jsxRuntime.jsx(GanttThemeProvider, { theme, children: (cssVars) => /* @__PURE__ */ jsxRuntime.jsx(GanttLocaleProvider, { locale, children: /* @__PURE__ */ jsxRuntime.jsxs(

package/dist/style.css

@@ -282,7 +282,7 @@
   border-bottom: 1px solid var(--gantt-divider-color);
   table-layout: fixed;
 }
-._taskListRoot_3vx1x_1 {
+._taskListRoot_1rzqg_1 {
   position: relative;
   /*noinspection CssUnresolvedCustomProperty*/
   border-left: 1px solid var(--gantt-table-divider-color, var(--gantt-divider-color));
@@ -291,23 +291,20 @@
   flex-direction: column;
 }
 
-._taskListHorizontalScroll_3vx1x_19 {
+._taskListHorizontalScroll_1rzqg_19 {
   overflow-x: scroll;
-  flex: 1 1 auto;
-  display: flex;
-  flex-direction: column;
 }
 
-._taskListHorizontalScroll_3vx1x_19::-webkit-scrollbar {
+._taskListHorizontalScroll_1rzqg_19::-webkit-scrollbar {
   width: 1rem;
   height: 1rem;
 }
 
-._taskListHorizontalScroll_3vx1x_19::-webkit-scrollbar-corner {
+._taskListHorizontalScroll_1rzqg_19::-webkit-scrollbar-corner {
   background: transparent;
 }
 
-._taskListHorizontalScroll_3vx1x_19::-webkit-scrollbar-thumb {
+._taskListHorizontalScroll_1rzqg_19::-webkit-scrollbar-thumb {
   border: 4px solid transparent;
   /*noinspection CssUnresolvedCustomProperty*/
   background: var(--gantt-scrollbar-thumb-color);
@@ -315,14 +312,14 @@
   background-clip: padding-box;
 }
 
-._taskListHorizontalScroll_3vx1x_19::-webkit-scrollbar-thumb:hover {
+._taskListHorizontalScroll_1rzqg_19::-webkit-scrollbar-thumb:hover {
   border: 2px solid transparent;
   /*noinspection CssUnresolvedCustomProperty*/
   background: var(--gantt-scrollbar-thumb-color);
   background-clip: padding-box;
 }
 
-._taskListResizer_3vx1x_81 {
+._taskListResizer_1rzqg_75 {
   position: absolute;
   top: 0;
   right: -3px;
@@ -334,16 +331,16 @@
 }
 
 /*noinspection CssUnresolvedCustomProperty*/
-._taskListResizer_3vx1x_81:hover {
+._taskListResizer_1rzqg_75:hover {
   background-color: var(--gantt-table-hover-action-color);
   filter: var(--gantt-hover-filter);
 }
 
-._taskListResizer_3vx1x_81:hover::before {
+._taskListResizer_1rzqg_75:hover::before {
   display: none;
 }
 
-._taskListResizer_3vx1x_81::before {
+._taskListResizer_1rzqg_75::before {
   content: "";
   position: absolute;
   top: 0;
@@ -354,22 +351,21 @@
   background-color: var(--gantt-table-resize-color, var(--gantt-divider-color));
 }
 
-._horizontalContainer_3vx1x_145 {
+._horizontalContainer_1rzqg_139 {
   margin: 0;
   padding: 0;
-  overflow: hidden;
+  overflow-y: auto;
+  overflow-x: hidden;
   height: 100%;
-  min-height: 0;
 }
 
-._tableWrapper_3vx1x_161 {
+._tableWrapper_1rzqg_155 {
   position: relative;
-  flex: 1 1 auto;
-  display: flex;
-  flex-direction: column;
+  flex: 1;
+  overflow: hidden;
 }
 
-._scrollToTop_3vx1x_175 {
+._scrollToTop_1rzqg_167 {
   position: absolute;
   top: 0;
   left: 0;
@@ -377,7 +373,7 @@
   height: 20px;
 }
 
-._scrollToBottom_3vx1x_191 {
+._scrollToBottom_1rzqg_183 {
   position: absolute;
   bottom: 0;
   left: 0;
@@ -385,7 +381,7 @@
   height: 20px;
 }
 
-._hidden_3vx1x_207 {
+._hidden_1rzqg_199 {
   display: none;
 }
 ._ganttToday_1oyhk_1 {

package/package.json

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