gantt-task-react-v 1.0.16 → 1.0.18

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

@@ -1,4 +1,4 @@
-import type { MouseEvent, RefObject, SyntheticEvent } from "react";
+import type { MouseEvent, RefObject } 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,6 +37,5 @@ 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_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 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,
@@ -10720,8 +10720,7 @@ const TaskListInner = ({
   tasks,
   onResizeColumn,
   canReorderTasks,
-  tableBottom,
-  onVerticalScrollbarScrollY
+  tableBottom
 }) => {
   const [
     columns,
@@ -10831,7 +10830,6 @@ const TaskListInner = ({
                 style: {
                   width: taskListWidth
                 },
-                onScroll: onVerticalScrollbarScrollY,
                 children: /* @__PURE__ */ jsx(
                   "div",
                   {
@@ -13149,12 +13147,12 @@ const TaskGanttContentInner = (props) => {
   ] });
 };
 const TaskGanttContent = memo(TaskGanttContentInner);
-const ganttVerticalContainer = "_ganttVerticalContainer_7rmhe_1";
-const horizontalContainer = "_horizontalContainer_7rmhe_79";
-const ganttHeader = "_ganttHeader_7rmhe_95";
-const ganttBodyScroll = "_ganttBodyScroll_7rmhe_105";
-const wrapper = "_wrapper_7rmhe_121";
-const calendarDragging = "_calendarDragging_7rmhe_147";
+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 styles$2 = {
   ganttVerticalContainer,
   horizontalContainer,
@@ -19846,8 +19844,7 @@ const Gantt = (props) => {
       taskListContainerRef,
       taskListRef,
       tasks: visibleTasks,
-      ganttRef: wrapperRef,
-      onVerticalScrollbarScrollY
+      ganttRef: wrapperRef
     }),
     [
       childTasksMap,
@@ -19875,8 +19872,7 @@ const Gantt = (props) => {
       selectedIdsMirror,
       taskList,
       taskListContainerRef,
-      visibleTasks,
-      onVerticalScrollbarScrollY
+      visibleTasks
     ]
   );
   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_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 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,
@@ -10737,8 +10737,7 @@
     tasks,
     onResizeColumn,
     canReorderTasks,
-    tableBottom,
-    onVerticalScrollbarScrollY
+    tableBottom
   }) => {
     const [
       columns,
@@ -10848,7 +10847,6 @@
                   style: {
                     width: taskListWidth
                   },
-                  onScroll: onVerticalScrollbarScrollY,
                   children: /* @__PURE__ */ jsxRuntime.jsx(
                     "div",
                     {
@@ -13166,12 +13164,12 @@
     ] });
   };
   const TaskGanttContent = React.memo(TaskGanttContentInner);
-  const ganttVerticalContainer = "_ganttVerticalContainer_7rmhe_1";
-  const horizontalContainer = "_horizontalContainer_7rmhe_79";
-  const ganttHeader = "_ganttHeader_7rmhe_95";
-  const ganttBodyScroll = "_ganttBodyScroll_7rmhe_105";
-  const wrapper = "_wrapper_7rmhe_121";
-  const calendarDragging = "_calendarDragging_7rmhe_147";
+  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 styles$2 = {
     ganttVerticalContainer,
     horizontalContainer,
@@ -19863,8 +19861,7 @@
         taskListContainerRef,
         taskListRef,
         tasks: visibleTasks,
-        ganttRef: wrapperRef,
-        onVerticalScrollbarScrollY
+        ganttRef: wrapperRef
       }),
       [
         childTasksMap,
@@ -19892,8 +19889,7 @@
         selectedIdsMirror,
         taskList,
         taskListContainerRef,
-        visibleTasks,
-        onVerticalScrollbarScrollY
+        visibleTasks
       ]
     );
     return /* @__PURE__ */ jsxRuntime.jsx(GanttThemeProvider, { theme, children: (cssVars) => /* @__PURE__ */ jsxRuntime.jsx(GanttLocaleProvider, { locale, children: /* @__PURE__ */ jsxRuntime.jsxs(

package/dist/style.css

@@ -282,29 +282,34 @@
   border-bottom: 1px solid var(--gantt-divider-color);
   table-layout: fixed;
 }
-._taskListRoot_1rzqg_1 {
+._taskListRoot_xeaio_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;
 }
 
-._taskListHorizontalScroll_1rzqg_19 {
-  overflow-x: scroll;
+._taskListHorizontalScroll_xeaio_21 {
+  overflow-x: auto;
+  overflow-y: hidden;
+  flex: 1;
+  display: flex;
+  flex-direction: column;
 }
 
-._taskListHorizontalScroll_1rzqg_19::-webkit-scrollbar {
+._taskListHorizontalScroll_xeaio_21::-webkit-scrollbar {
   width: 1rem;
   height: 1rem;
 }
 
-._taskListHorizontalScroll_1rzqg_19::-webkit-scrollbar-corner {
+._taskListHorizontalScroll_xeaio_21::-webkit-scrollbar-corner {
   background: transparent;
 }
 
-._taskListHorizontalScroll_1rzqg_19::-webkit-scrollbar-thumb {
+._taskListHorizontalScroll_xeaio_21::-webkit-scrollbar-thumb {
   border: 4px solid transparent;
   /*noinspection CssUnresolvedCustomProperty*/
   background: var(--gantt-scrollbar-thumb-color);
@@ -312,14 +317,14 @@
   background-clip: padding-box;
 }
 
-._taskListHorizontalScroll_1rzqg_19::-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_1rzqg_75 {
+._taskListResizer_xeaio_85 {
   position: absolute;
   top: 0;
   right: -3px;
@@ -331,16 +336,16 @@
 }
 
 /*noinspection CssUnresolvedCustomProperty*/
-._taskListResizer_1rzqg_75:hover {
+._taskListResizer_xeaio_85:hover {
   background-color: var(--gantt-table-hover-action-color);
   filter: var(--gantt-hover-filter);
 }
 
-._taskListResizer_1rzqg_75:hover::before {
+._taskListResizer_xeaio_85:hover::before {
   display: none;
 }
 
-._taskListResizer_1rzqg_75::before {
+._taskListResizer_xeaio_85::before {
   content: "";
   position: absolute;
   top: 0;
@@ -351,21 +356,22 @@
   background-color: var(--gantt-table-resize-color, var(--gantt-divider-color));
 }
 
-._horizontalContainer_1rzqg_139 {
+._horizontalContainer_xeaio_149 {
   margin: 0;
   padding: 0;
   overflow-y: auto;
   overflow-x: hidden;
   height: 100%;
+  min-height: 0;
 }
 
-._tableWrapper_1rzqg_155 {
+._tableWrapper_xeaio_167 {
   position: relative;
   flex: 1;
-  overflow: hidden;
+  min-height: 0;
 }
 
-._scrollToTop_1rzqg_167 {
+._scrollToTop_xeaio_179 {
   position: absolute;
   top: 0;
   left: 0;
@@ -373,7 +379,7 @@
   height: 20px;
 }
 
-._scrollToBottom_1rzqg_183 {
+._scrollToBottom_xeaio_195 {
   position: absolute;
   bottom: 0;
   left: 0;
@@ -381,7 +387,7 @@
   height: 20px;
 }
 
-._hidden_1rzqg_199 {
+._hidden_xeaio_211 {
   display: none;
 }
 ._ganttToday_1oyhk_1 {
@@ -575,10 +581,10 @@
   user-select: none;
   stroke-width: 0;
 }
-._ganttVerticalContainer_7rmhe_1 {
+._ganttVerticalContainer_15txg_1 {
   display: flex;
   flex-direction: column;
-  overflow-x: hidden;
+  overflow-x: auto;
   overflow-y: hidden;
   font-size: 0;
   margin: 0;
@@ -590,16 +596,16 @@
   min-height: 0;
 }
 
-._ganttVerticalContainer_7rmhe_1::-webkit-scrollbar {
+._ganttVerticalContainer_15txg_1::-webkit-scrollbar {
   width: 1rem;
   height: 1rem;
 }
 
-._ganttVerticalContainer_7rmhe_1::-webkit-scrollbar-corner {
+._ganttVerticalContainer_15txg_1::-webkit-scrollbar-corner {
   background: transparent;
 }
 
-._ganttVerticalContainer_7rmhe_1::-webkit-scrollbar-thumb {
+._ganttVerticalContainer_15txg_1::-webkit-scrollbar-thumb {
   border: 4px solid transparent;
   /*noinspection CssUnresolvedCustomProperty*/
   background: var(--gantt-scrollbar-thumb-color);
@@ -607,27 +613,51 @@
   background-clip: padding-box;
 }
 
-._ganttVerticalContainer_7rmhe_1::-webkit-scrollbar-thumb:hover {
+._ganttVerticalContainer_15txg_1::-webkit-scrollbar-thumb:hover {
   border: 2px solid transparent;
   /*noinspection CssUnresolvedCustomProperty*/
   background: var(--gantt-scrollbar-thumb-color);
   background-clip: padding-box;
 }
 
-._horizontalContainer_7rmhe_79 {
+._horizontalContainer_15txg_79 {
   margin: 0;
   padding: 0;
-  overflow: hidden;
+  overflow: auto;
   height: 100%;
   min-height: 0;
 }
 
-._ganttHeader_7rmhe_95 {
+._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 {
   flex: 0 0 auto;
   z-index: 3;
 }
 
-._ganttBodyScroll_7rmhe_105 {
+._ganttBodyScroll_15txg_153 {
   flex: 1 1 auto;
   overflow-y: auto;
   overflow-x: hidden;
@@ -635,7 +665,31 @@
   height: 100%;
 }
 
-._wrapper_7rmhe_121 {
+._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 {
   display: flex;
   padding: 0;
   margin: 0;
@@ -648,7 +702,7 @@
   min-height: 0;
 }
 
-._calendarDragging_7rmhe_147 {
+._calendarDragging_15txg_243 {
   cursor: grabbing;
 }
 /*noinspection CssUnresolvedCustomProperty*/

package/package.json

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