gantt-task-react-v 1.1.19 → 1.1.20

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

@@ -10637,20 +10637,22 @@ const TaskListTableDefaultInner = ({
   );
 };
 const TaskListTable = memo(TaskListTableDefaultInner);
-const taskListRoot = "_taskListRoot_yoz76_1";
-const taskListHorizontalScroll = "_taskListHorizontalScroll_yoz76_19";
-const taskListResizer = "_taskListResizer_yoz76_81";
-const horizontalContainer$1 = "_horizontalContainer_yoz76_145";
-const tableWrapper = "_tableWrapper_yoz76_159";
-const scrollToTop = "_scrollToTop_yoz76_173";
-const scrollToBottom = "_scrollToBottom_yoz76_189";
-const hidden = "_hidden_yoz76_205";
+const taskListRoot = "_taskListRoot_6kpxi_1";
+const taskListHorizontalScroll = "_taskListHorizontalScroll_6kpxi_19";
+const taskListResizer = "_taskListResizer_6kpxi_81";
+const horizontalContainer$1 = "_horizontalContainer_6kpxi_145";
+const tableWrapper = "_tableWrapper_6kpxi_159";
+const loadingOverlayBody$1 = "_loadingOverlayBody_6kpxi_173";
+const scrollToTop = "_scrollToTop_6kpxi_195";
+const scrollToBottom = "_scrollToBottom_6kpxi_211";
+const hidden = "_hidden_6kpxi_227";
 const styles$d = {
   taskListRoot,
   taskListHorizontalScroll,
   taskListResizer,
   horizontalContainer: horizontalContainer$1,
   tableWrapper,
+  loadingOverlayBody: loadingOverlayBody$1,
   scrollToTop,
   scrollToBottom,
   hidden
@@ -10808,6 +10810,13 @@ const TaskListInner = ({
             }
           ),
           /* @__PURE__ */ jsxs("div", { className: styles$d.tableWrapper, children: [
+            (isLoading || false) && /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: styles$d.loadingOverlayBody,
+                "data-testid": "tasklist-loading-overlay"
+              }
+            ),
             /* @__PURE__ */ jsx(
               "div",
               {
@@ -13369,17 +13378,19 @@ const TaskGanttContentInner = (props) => {
   ] });
 };
 const TaskGanttContent = memo(TaskGanttContentInner);
-const ganttVerticalContainer = "_ganttVerticalContainer_te0hs_1";
-const horizontalContainer = "_horizontalContainer_te0hs_73";
-const wrapper = "_wrapper_te0hs_85";
-const calendarDragging = "_calendarDragging_te0hs_109";
-const loadingOverlay = "_loadingOverlay_te0hs_117";
+const ganttVerticalContainer = "_ganttVerticalContainer_19ply_1";
+const horizontalContainer = "_horizontalContainer_19ply_73";
+const wrapper = "_wrapper_19ply_93";
+const calendarDragging = "_calendarDragging_19ply_117";
+const loadingOverlay = "_loadingOverlay_19ply_125";
+const loadingOverlayBody = "_loadingOverlayBody_19ply_141";
 const styles$2 = {
   ganttVerticalContainer,
   horizontalContainer,
   wrapper,
   calendarDragging,
-  loadingOverlay
+  loadingOverlay,
+  loadingOverlayBody
 };
 const TaskGanttInner = (props) => {
   const {
@@ -13528,41 +13539,50 @@ const TaskGanttInner = (props) => {
             children: /* @__PURE__ */ jsx(Calendar, { scrollRef: verticalGanttContainerRef, ...calendarProps })
           }
         ),
-        /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsxs(
           "div",
           {
             ref: horizontalContainerRef,
             className: styles$2.horizontalContainer,
             style: containerStyle,
-            children: /* @__PURE__ */ jsx("div", { style: gridStyle, children: /* @__PURE__ */ jsxs(
-              "svg",
-              {
-                xmlns: "http://www.w3.org/2000/svg",
-                width: fullSvgWidth,
-                height: ganttFullHeight,
-                fontFamily: "var(--gantt-font-family)",
-                ref: ganttSVGRef,
-                onContextMenu: (event) => {
-                  event.preventDefault();
-                  if (onOpenGanttContextMenu) {
-                    onOpenGanttContextMenu(event.clientX, event.clientY);
-                  }
-                },
-                children: [
-                  /* @__PURE__ */ jsx(GanttToday, { ...ganttTodayProps }),
-                  /* @__PURE__ */ jsx(
-                    "rect",
-                    {
-                      ref: contentRef,
-                      width: "100%",
-                      height: "100%",
-                      fill: "transparent"
+            children: [
+              barProps.isLoading && /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: styles$2.loadingOverlayBody,
+                  "data-testid": "gantt-loading-overlay-body"
+                }
+              ),
+              /* @__PURE__ */ jsx("div", { style: gridStyle, children: /* @__PURE__ */ jsxs(
+                "svg",
+                {
+                  xmlns: "http://www.w3.org/2000/svg",
+                  width: fullSvgWidth,
+                  height: ganttFullHeight,
+                  fontFamily: "var(--gantt-font-family)",
+                  ref: ganttSVGRef,
+                  onContextMenu: (event) => {
+                    event.preventDefault();
+                    if (onOpenGanttContextMenu) {
+                      onOpenGanttContextMenu(event.clientX, event.clientY);
                     }
-                  ),
-                  /* @__PURE__ */ jsx(TaskGanttContent, { ...barProps })
-                ]
-              }
-            ) })
+                  },
+                  children: [
+                    /* @__PURE__ */ jsx(GanttToday, { ...ganttTodayProps }),
+                    /* @__PURE__ */ jsx(
+                      "rect",
+                      {
+                        ref: contentRef,
+                        width: "100%",
+                        height: "100%",
+                        fill: "transparent"
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(TaskGanttContent, { ...barProps })
+                  ]
+                }
+              ) })
+            ]
           }
         )
       ]
@@ -20418,22 +20438,13 @@ const Gantt = (props) => {
       ref: wrapperRef,
       "data-testid": "gantt",
       children: [
-        (!columnsProp || columnsProp.length > 0) && /* @__PURE__ */ jsxs(Fragment, { children: [
-          (isLoading || waitCommitTasks) && /* @__PURE__ */ jsx(
-            "div",
-            {
-              className: styles$2.loadingOverlay,
-              "data-testid": "gantt-loading-overlay"
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            TaskList,
-            {
-              ...renderTaskListProps,
-              taskListHorizontalScrollRef
-            }
-          )
-        ] }),
+        (!columnsProp || columnsProp.length > 0) && /* @__PURE__ */ jsx(
+          TaskList,
+          {
+            ...renderTaskListProps,
+            taskListHorizontalScrollRef
+          }
+        ),
         /* @__PURE__ */ jsx(
           TaskGantt,
           {

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

@@ -10654,20 +10654,22 @@
     );
   };
   const TaskListTable = React.memo(TaskListTableDefaultInner);
-  const taskListRoot = "_taskListRoot_yoz76_1";
-  const taskListHorizontalScroll = "_taskListHorizontalScroll_yoz76_19";
-  const taskListResizer = "_taskListResizer_yoz76_81";
-  const horizontalContainer$1 = "_horizontalContainer_yoz76_145";
-  const tableWrapper = "_tableWrapper_yoz76_159";
-  const scrollToTop = "_scrollToTop_yoz76_173";
-  const scrollToBottom = "_scrollToBottom_yoz76_189";
-  const hidden = "_hidden_yoz76_205";
+  const taskListRoot = "_taskListRoot_6kpxi_1";
+  const taskListHorizontalScroll = "_taskListHorizontalScroll_6kpxi_19";
+  const taskListResizer = "_taskListResizer_6kpxi_81";
+  const horizontalContainer$1 = "_horizontalContainer_6kpxi_145";
+  const tableWrapper = "_tableWrapper_6kpxi_159";
+  const loadingOverlayBody$1 = "_loadingOverlayBody_6kpxi_173";
+  const scrollToTop = "_scrollToTop_6kpxi_195";
+  const scrollToBottom = "_scrollToBottom_6kpxi_211";
+  const hidden = "_hidden_6kpxi_227";
   const styles$d = {
     taskListRoot,
     taskListHorizontalScroll,
     taskListResizer,
     horizontalContainer: horizontalContainer$1,
     tableWrapper,
+    loadingOverlayBody: loadingOverlayBody$1,
     scrollToTop,
     scrollToBottom,
     hidden
@@ -10825,6 +10827,13 @@
               }
             ),
             /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles$d.tableWrapper, children: [
+              (isLoading || false) && /* @__PURE__ */ jsxRuntime.jsx(
+                "div",
+                {
+                  className: styles$d.loadingOverlayBody,
+                  "data-testid": "tasklist-loading-overlay"
+                }
+              ),
               /* @__PURE__ */ jsxRuntime.jsx(
                 "div",
                 {
@@ -13386,17 +13395,19 @@
     ] });
   };
   const TaskGanttContent = React.memo(TaskGanttContentInner);
-  const ganttVerticalContainer = "_ganttVerticalContainer_te0hs_1";
-  const horizontalContainer = "_horizontalContainer_te0hs_73";
-  const wrapper = "_wrapper_te0hs_85";
-  const calendarDragging = "_calendarDragging_te0hs_109";
-  const loadingOverlay = "_loadingOverlay_te0hs_117";
+  const ganttVerticalContainer = "_ganttVerticalContainer_19ply_1";
+  const horizontalContainer = "_horizontalContainer_19ply_73";
+  const wrapper = "_wrapper_19ply_93";
+  const calendarDragging = "_calendarDragging_19ply_117";
+  const loadingOverlay = "_loadingOverlay_19ply_125";
+  const loadingOverlayBody = "_loadingOverlayBody_19ply_141";
   const styles$2 = {
     ganttVerticalContainer,
     horizontalContainer,
     wrapper,
     calendarDragging,
-    loadingOverlay
+    loadingOverlay,
+    loadingOverlayBody
   };
   const TaskGanttInner = (props) => {
     const {
@@ -13545,41 +13556,50 @@
               children: /* @__PURE__ */ jsxRuntime.jsx(Calendar, { scrollRef: verticalGanttContainerRef, ...calendarProps })
             }
           ),
-          /* @__PURE__ */ jsxRuntime.jsx(
+          /* @__PURE__ */ jsxRuntime.jsxs(
             "div",
             {
               ref: horizontalContainerRef,
               className: styles$2.horizontalContainer,
               style: containerStyle,
-              children: /* @__PURE__ */ jsxRuntime.jsx("div", { style: gridStyle, children: /* @__PURE__ */ jsxRuntime.jsxs(
-                "svg",
-                {
-                  xmlns: "http://www.w3.org/2000/svg",
-                  width: fullSvgWidth,
-                  height: ganttFullHeight,
-                  fontFamily: "var(--gantt-font-family)",
-                  ref: ganttSVGRef,
-                  onContextMenu: (event) => {
-                    event.preventDefault();
-                    if (onOpenGanttContextMenu) {
-                      onOpenGanttContextMenu(event.clientX, event.clientY);
-                    }
-                  },
-                  children: [
-                    /* @__PURE__ */ jsxRuntime.jsx(GanttToday, { ...ganttTodayProps }),
-                    /* @__PURE__ */ jsxRuntime.jsx(
-                      "rect",
-                      {
-                        ref: contentRef,
-                        width: "100%",
-                        height: "100%",
-                        fill: "transparent"
+              children: [
+                barProps.isLoading && /* @__PURE__ */ jsxRuntime.jsx(
+                  "div",
+                  {
+                    className: styles$2.loadingOverlayBody,
+                    "data-testid": "gantt-loading-overlay-body"
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx("div", { style: gridStyle, children: /* @__PURE__ */ jsxRuntime.jsxs(
+                  "svg",
+                  {
+                    xmlns: "http://www.w3.org/2000/svg",
+                    width: fullSvgWidth,
+                    height: ganttFullHeight,
+                    fontFamily: "var(--gantt-font-family)",
+                    ref: ganttSVGRef,
+                    onContextMenu: (event) => {
+                      event.preventDefault();
+                      if (onOpenGanttContextMenu) {
+                        onOpenGanttContextMenu(event.clientX, event.clientY);
                       }
-                    ),
-                    /* @__PURE__ */ jsxRuntime.jsx(TaskGanttContent, { ...barProps })
-                  ]
-                }
-              ) })
+                    },
+                    children: [
+                      /* @__PURE__ */ jsxRuntime.jsx(GanttToday, { ...ganttTodayProps }),
+                      /* @__PURE__ */ jsxRuntime.jsx(
+                        "rect",
+                        {
+                          ref: contentRef,
+                          width: "100%",
+                          height: "100%",
+                          fill: "transparent"
+                        }
+                      ),
+                      /* @__PURE__ */ jsxRuntime.jsx(TaskGanttContent, { ...barProps })
+                    ]
+                  }
+                ) })
+              ]
             }
           )
         ]
@@ -20435,22 +20455,13 @@
         ref: wrapperRef,
         "data-testid": "gantt",
         children: [
-          (!columnsProp || columnsProp.length > 0) && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-            (isLoading || waitCommitTasks) && /* @__PURE__ */ jsxRuntime.jsx(
-              "div",
-              {
-                className: styles$2.loadingOverlay,
-                "data-testid": "gantt-loading-overlay"
-              }
-            ),
-            /* @__PURE__ */ jsxRuntime.jsx(
-              TaskList,
-              {
-                ...renderTaskListProps,
-                taskListHorizontalScrollRef
-              }
-            )
-          ] }),
+          (!columnsProp || columnsProp.length > 0) && /* @__PURE__ */ jsxRuntime.jsx(
+            TaskList,
+            {
+              ...renderTaskListProps,
+              taskListHorizontalScrollRef
+            }
+          ),
           /* @__PURE__ */ jsxRuntime.jsx(
             TaskGantt,
             {

package/dist/style.css

@@ -282,7 +282,7 @@
   border-bottom: 1px solid var(--gantt-divider-color);
   table-layout: fixed;
 }
-._taskListRoot_yoz76_1 {
+._taskListRoot_6kpxi_1 {
   position: relative;
   height: 100%;
   display: flex;
@@ -291,23 +291,23 @@
   border-left: 1px solid var(--gantt-table-divider-color, var(--gantt-divider-color));
 }
 
-._taskListHorizontalScroll_yoz76_19 {
+._taskListHorizontalScroll_6kpxi_19 {
   overflow-x: scroll;
   height: 100%;
   display: flex;
   flex-direction: column;
 }
 
-._taskListHorizontalScroll_yoz76_19::-webkit-scrollbar {
+._taskListHorizontalScroll_6kpxi_19::-webkit-scrollbar {
   width: 1rem;
   height: 1rem;
 }
 
-._taskListHorizontalScroll_yoz76_19::-webkit-scrollbar-corner {
+._taskListHorizontalScroll_6kpxi_19::-webkit-scrollbar-corner {
   background: transparent;
 }
 
-._taskListHorizontalScroll_yoz76_19::-webkit-scrollbar-thumb {
+._taskListHorizontalScroll_6kpxi_19::-webkit-scrollbar-thumb {
   border: 4px solid transparent;
   /*noinspection CssUnresolvedCustomProperty*/
   background: var(--gantt-scrollbar-thumb-color);
@@ -315,14 +315,14 @@
   background-clip: padding-box;
 }
 
-._taskListHorizontalScroll_yoz76_19::-webkit-scrollbar-thumb:hover {
+._taskListHorizontalScroll_6kpxi_19::-webkit-scrollbar-thumb:hover {
   border: 2px solid transparent;
   /*noinspection CssUnresolvedCustomProperty*/
   background: var(--gantt-scrollbar-thumb-color);
   background-clip: padding-box;
 }
 
-._taskListResizer_yoz76_81 {
+._taskListResizer_6kpxi_81 {
   position: absolute;
   top: 0;
   right: -3px;
@@ -334,16 +334,16 @@
 }
 
 /*noinspection CssUnresolvedCustomProperty*/
-._taskListResizer_yoz76_81:hover {
+._taskListResizer_6kpxi_81:hover {
   background-color: var(--gantt-table-hover-action-color);
   filter: var(--gantt-hover-filter);
 }
 
-._taskListResizer_yoz76_81:hover::before {
+._taskListResizer_6kpxi_81:hover::before {
   display: none;
 }
 
-._taskListResizer_yoz76_81::before {
+._taskListResizer_6kpxi_81::before {
   content: "";
   position: absolute;
   top: 0;
@@ -354,21 +354,32 @@
   background-color: var(--gantt-table-resize-color, var(--gantt-divider-color));
 }
 
-._horizontalContainer_yoz76_145 {
+._horizontalContainer_6kpxi_145 {
   margin: 0;
   padding: 0;
   overflow: hidden;
   flex-grow: 1;
 }
 
-._tableWrapper_yoz76_159 {
+._tableWrapper_6kpxi_159 {
   position: relative;
   flex-grow: 1;
   display: flex;
   flex-direction: column;
 }
 
-._scrollToTop_yoz76_173 {
+._loadingOverlayBody_6kpxi_173 {
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0; /* We'll position overlay inside body wrapper so header remains visible */
+  bottom: 0;
+  background: rgba(255,255,255,0.6);
+  z-index: 2;
+  pointer-events: auto;
+}
+
+._scrollToTop_6kpxi_195 {
   position: absolute;
   top: 0;
   left: 0;
@@ -376,7 +387,7 @@
   height: 20px;
 }
 
-._scrollToBottom_yoz76_189 {
+._scrollToBottom_6kpxi_211 {
   position: absolute;
   bottom: 0;
   left: 0;
@@ -384,7 +395,7 @@
   height: 20px;
 }
 
-._hidden_yoz76_205 {
+._hidden_6kpxi_227 {
   display: none;
 }
 ._ganttToday_1oyhk_1 {
@@ -578,7 +589,7 @@
   user-select: none;
   stroke-width: 0;
 }
-._ganttVerticalContainer_te0hs_1 {
+._ganttVerticalContainer_19ply_1 {
   overflow-x: scroll;
   overflow-y: hidden;
   font-size: 0;
@@ -590,16 +601,16 @@
   height: 100%;
 }
 
-._ganttVerticalContainer_te0hs_1::-webkit-scrollbar {
+._ganttVerticalContainer_19ply_1::-webkit-scrollbar {
   width: 1rem;
   height: 1rem;
 }
 
-._ganttVerticalContainer_te0hs_1::-webkit-scrollbar-corner {
+._ganttVerticalContainer_19ply_1::-webkit-scrollbar-corner {
   background: transparent;
 }
 
-._ganttVerticalContainer_te0hs_1::-webkit-scrollbar-thumb {
+._ganttVerticalContainer_19ply_1::-webkit-scrollbar-thumb {
   border: 4px solid transparent;
   /*noinspection CssUnresolvedCustomProperty*/
   background: var(--gantt-scrollbar-thumb-color);
@@ -607,20 +618,24 @@
   background-clip: padding-box;
 }
 
-._ganttVerticalContainer_te0hs_1::-webkit-scrollbar-thumb:hover {
+._ganttVerticalContainer_19ply_1::-webkit-scrollbar-thumb:hover {
   border: 2px solid transparent;
   /*noinspection CssUnresolvedCustomProperty*/
   background: var(--gantt-scrollbar-thumb-color);
   background-clip: padding-box;
 }
 
-._horizontalContainer_te0hs_73 {
+._horizontalContainer_19ply_73 {
   margin: 0;
   padding: 0;
   overflow: hidden;
 }
 
-._wrapper_te0hs_85 {
+._horizontalContainer_19ply_73 {
+  position: relative;
+}
+
+._wrapper_19ply_93 {
   display: flex;
   padding: 0;
   margin: 0;
@@ -632,17 +647,28 @@
   border-bottom: 1px solid var(--gantt-divider-color);
 }
 
-._calendarDragging_te0hs_109 {
+._calendarDragging_19ply_117 {
   cursor: grabbing;
 }
 
-._loadingOverlay_te0hs_117 {
+._loadingOverlay_19ply_125 {
   position: absolute;
   inset: 0;
   background: rgba(255, 255, 255, 0.6);
   z-index: 9999;
   pointer-events: auto;
 }
+
+._loadingOverlayBody_19ply_141 {
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  background: rgba(255, 255, 255, 0.6);
+  z-index: 3;
+  pointer-events: auto;
+}
 /*noinspection CssUnresolvedCustomProperty*/
 ._menuOption_1c3e3_3 {
   display: flex;

package/package.json

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