gantt-task-react-v 1.2.0 → 1.2.2

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

@@ -7473,11 +7473,11 @@
   function useScrollIntent(_ref2) {
     let {
       delta,
-      disabled
+      disabled: disabled2
     } = _ref2;
     const previousDelta = usePrevious(delta);
     return useLazyMemo((previousIntent) => {
-      if (disabled || !previousDelta || !previousIntent) {
+      if (disabled2 || !previousDelta || !previousIntent) {
         return defaultScrollIntent;
       }
       const direction = {
@@ -7494,7 +7494,7 @@
           [Direction.Forward]: previousIntent.y[Direction.Forward] || direction.y === 1
         }
       };
-    }, [disabled, delta, previousDelta]);
+    }, [disabled2, delta, previousDelta]);
   }
   function useCachedNode(draggableNodes, id) {
     const draggableNode = id !== null ? draggableNodes.get(id) : void 0;
@@ -7543,8 +7543,8 @@
       strategy
     } = config;
     const containersRef = React.useRef(containers);
-    const disabled = isDisabled();
-    const disabledRef = useLatestValue(disabled);
+    const disabled2 = isDisabled();
+    const disabledRef = useLatestValue(disabled2);
     const measureDroppableContainers = React.useCallback(function(ids2) {
       if (ids2 === void 0) {
         ids2 = [];
@@ -7561,7 +7561,7 @@
     }, [disabledRef]);
     const timeoutId = React.useRef(null);
     const droppableRects = useLazyMemo((previousValue) => {
-      if (disabled && !dragging2) {
+      if (disabled2 && !dragging2) {
         return defaultValue;
       }
       if (!previousValue || previousValue === defaultValue || containersRef.current !== containers || queue != null) {
@@ -7584,19 +7584,19 @@
         return map;
       }
       return previousValue;
-    }, [containers, queue, dragging2, disabled, measure]);
+    }, [containers, queue, dragging2, disabled2, measure]);
     React.useEffect(() => {
       containersRef.current = containers;
     }, [containers]);
     React.useEffect(
       () => {
-        if (disabled) {
+        if (disabled2) {
           return;
         }
         measureDroppableContainers();
       },
       // eslint-disable-next-line react-hooks/exhaustive-deps
-      [dragging2, disabled]
+      [dragging2, disabled2]
     );
     React.useEffect(
       () => {
@@ -7609,7 +7609,7 @@
     );
     React.useEffect(
       () => {
-        if (disabled || typeof frequency !== "number" || timeoutId.current !== null) {
+        if (disabled2 || typeof frequency !== "number" || timeoutId.current !== null) {
           return;
         }
         timeoutId.current = setTimeout(() => {
@@ -7618,7 +7618,7 @@
         }, frequency);
       },
       // eslint-disable-next-line react-hooks/exhaustive-deps
-      [frequency, disabled, measureDroppableContainers, ...dependencies]
+      [frequency, disabled2, measureDroppableContainers, ...dependencies]
     );
     return {
       droppableRects,
@@ -7653,18 +7653,18 @@
   function useMutationObserver(_ref) {
     let {
       callback,
-      disabled
+      disabled: disabled2
     } = _ref;
     const handleMutations = useEvent(callback);
     const mutationObserver = React.useMemo(() => {
-      if (disabled || typeof window === "undefined" || typeof window.MutationObserver === "undefined") {
+      if (disabled2 || typeof window === "undefined" || typeof window.MutationObserver === "undefined") {
         return void 0;
       }
       const {
         MutationObserver
       } = window;
       return new MutationObserver(handleMutations);
-    }, [handleMutations, disabled]);
+    }, [handleMutations, disabled2]);
     React.useEffect(() => {
       return () => mutationObserver == null ? void 0 : mutationObserver.disconnect();
     }, [mutationObserver]);
@@ -7673,12 +7673,12 @@
   function useResizeObserver(_ref) {
     let {
       callback,
-      disabled
+      disabled: disabled2
     } = _ref;
     const handleResize = useEvent(callback);
     const resizeObserver = React.useMemo(
       () => {
-        if (disabled || typeof window === "undefined" || typeof window.ResizeObserver === "undefined") {
+        if (disabled2 || typeof window === "undefined" || typeof window.ResizeObserver === "undefined") {
           return void 0;
         }
         const {
@@ -7687,7 +7687,7 @@
         return new ResizeObserver2(handleResize);
       },
       // eslint-disable-next-line react-hooks/exhaustive-deps
-      [disabled]
+      [disabled2]
     );
     React.useEffect(() => {
       return () => resizeObserver == null ? void 0 : resizeObserver.disconnect();
@@ -8005,9 +8005,9 @@
     getEnabled() {
       return this.toArray().filter((_ref) => {
         let {
-          disabled
+          disabled: disabled2
         } = _ref;
-        return !disabled;
+        return !disabled2;
       });
     }
     getNodeFor(id) {
@@ -8137,7 +8137,7 @@
         const {
           id,
           key: key2,
-          disabled
+          disabled: disabled2
         } = action;
         const element = state.droppable.containers.get(id);
         if (!element || key2 !== element.key) {
@@ -8146,7 +8146,7 @@
         const containers = new DroppableContainersMap(state.droppable.containers);
         containers.set(id, {
           ...element,
-          disabled
+          disabled: disabled2
         });
         return {
           ...state,
@@ -8182,7 +8182,7 @@
   }
   function RestoreFocus(_ref) {
     let {
-      disabled
+      disabled: disabled2
     } = _ref;
     const {
       active,
@@ -8192,7 +8192,7 @@
     const previousActivatorEvent = usePrevious(activatorEvent);
     const previousActiveId = usePrevious(active == null ? void 0 : active.id);
     React.useEffect(() => {
-      if (disabled) {
+      if (disabled2) {
         return;
       }
       if (!activatorEvent && previousActivatorEvent && previousActiveId != null) {
@@ -8226,7 +8226,7 @@
           }
         });
       }
-    }, [activatorEvent, disabled, draggableNodes, previousActiveId, previousActivatorEvent]);
+    }, [activatorEvent, disabled2, draggableNodes, previousActiveId, previousActivatorEvent]);
     return null;
   }
   function applyModifiers(modifiers, _ref) {
@@ -8277,8 +8277,8 @@
       y: config
     } : config;
     useIsomorphicLayoutEffect(() => {
-      const disabled = !x && !y;
-      if (disabled || !activeNode) {
+      const disabled2 = !x && !y;
+      if (disabled2 || !activeNode) {
         initialized.current = false;
         return;
       }
@@ -8785,7 +8785,7 @@
     let {
       id,
       data,
-      disabled = false,
+      disabled: disabled2 = false,
       attributes
     } = _ref;
     const key2 = useUniqueId(ID_PREFIX$1);
@@ -8831,18 +8831,18 @@
     const memoizedAttributes = React.useMemo(() => ({
       role,
       tabIndex,
-      "aria-disabled": disabled,
+      "aria-disabled": disabled2,
       "aria-pressed": isDragging && role === defaultRole ? true : void 0,
       "aria-roledescription": roleDescription,
       "aria-describedby": ariaDescribedById.draggable
-    }), [disabled, role, tabIndex, isDragging, roleDescription, ariaDescribedById.draggable]);
+    }), [disabled2, role, tabIndex, isDragging, roleDescription, ariaDescribedById.draggable]);
     return {
       active,
       activatorEvent,
       activeNodeRect,
       attributes: memoizedAttributes,
       isDragging,
-      listeners: disabled ? void 0 : listeners,
+      listeners: disabled2 ? void 0 : listeners,
       node,
       over,
       setNodeRef,
@@ -8860,7 +8860,7 @@
   function useDroppable(_ref) {
     let {
       data,
-      disabled = false,
+      disabled: disabled2 = false,
       id,
       resizeObserverConfig
     } = _ref;
@@ -8872,7 +8872,7 @@
       measureDroppableContainers
     } = React.useContext(InternalContext);
     const previous = React.useRef({
-      disabled
+      disabled: disabled2
     });
     const resizeObserverConnected = React.useRef(false);
     const rect = React.useRef(null);
@@ -8936,7 +8936,7 @@
           element: {
             id,
             key: key2,
-            disabled,
+            disabled: disabled2,
             node: nodeRef,
             rect,
             data: dataRef
@@ -8952,16 +8952,16 @@
       [id]
     );
     React.useEffect(() => {
-      if (disabled !== previous.current.disabled) {
+      if (disabled2 !== previous.current.disabled) {
         dispatch({
           type: Action.SetDroppableDisabled,
           id,
           key: key2,
-          disabled
+          disabled: disabled2
         });
-        previous.current.disabled = disabled;
+        previous.current.disabled = disabled2;
       }
-    }, [id, key2, disabled, dispatch]);
+    }, [id, key2, disabled2, dispatch]);
     return {
       active,
       rect,
@@ -9352,14 +9352,14 @@
     }
     return true;
   }
-  function normalizeDisabled(disabled) {
-    if (typeof disabled === "boolean") {
+  function normalizeDisabled(disabled2) {
+    if (typeof disabled2 === "boolean") {
       return {
-        draggable: disabled,
-        droppable: disabled
+        draggable: disabled2,
+        droppable: disabled2
       };
     }
-    return disabled;
+    return disabled2;
   }
   const rectSortingStrategy = (_ref) => {
     let {
@@ -9481,7 +9481,7 @@
     const previousItemsRef = React.useRef(items);
     const itemsHaveChanged = !itemsEqual(items, previousItemsRef.current);
     const disableTransforms = overIndex !== -1 && activeIndex === -1 || itemsHaveChanged;
-    const disabled = normalizeDisabled(disabledProp);
+    const disabled2 = normalizeDisabled(disabledProp);
     useIsomorphicLayoutEffect(() => {
       if (itemsHaveChanged && isDragging) {
         measureDroppableContainers(items);
@@ -9494,7 +9494,7 @@
       () => ({
         activeIndex,
         containerId,
-        disabled,
+        disabled: disabled2,
         disableTransforms,
         items,
         overIndex,
@@ -9503,7 +9503,7 @@
         strategy
       }),
       // eslint-disable-next-line react-hooks/exhaustive-deps
-      [activeIndex, containerId, disabled.draggable, disabled.droppable, disableTransforms, items, overIndex, droppableRects, useDragOverlay, strategy]
+      [activeIndex, containerId, disabled2.draggable, disabled2.droppable, disableTransforms, items, overIndex, droppableRects, useDragOverlay, strategy]
     );
     return React.createElement(Context.Provider, {
       value: contextValue
@@ -9556,7 +9556,7 @@
   };
   function useDerivedTransform(_ref) {
     let {
-      disabled,
+      disabled: disabled2,
       index: index2,
       node,
       rect
@@ -9564,7 +9564,7 @@
     const [derivedTransform, setDerivedtransform] = React.useState(null);
     const previousIndex = React.useRef(index2);
     useIsomorphicLayoutEffect(() => {
-      if (!disabled && index2 !== previousIndex.current && node.current) {
+      if (!disabled2 && index2 !== previousIndex.current && node.current) {
         const initial = rect.current;
         if (initial) {
           const current = getClientRect(node.current, {
@@ -9584,7 +9584,7 @@
       if (index2 !== previousIndex.current) {
         previousIndex.current = index2;
       }
-    }, [disabled, index2, node, rect]);
+    }, [disabled2, index2, node, rect]);
     React.useEffect(() => {
       if (derivedTransform) {
         setDerivedtransform(null);
@@ -9615,7 +9615,7 @@
       useDragOverlay,
       strategy: globalStrategy
     } = React.useContext(Context);
-    const disabled = normalizeLocalDisabled(localDisabled, globalDisabled);
+    const disabled2 = normalizeLocalDisabled(localDisabled, globalDisabled);
     const index2 = items.indexOf(id);
     const data = React.useMemo(() => ({
       sortable: {
@@ -9634,7 +9634,7 @@
     } = useDroppable({
       id,
       data,
-      disabled: disabled.droppable,
+      disabled: disabled2.droppable,
       resizeObserverConfig: {
         updateMeasurementsFor: itemsAfterCurrentSortable,
         ...resizeObserverConfig
@@ -9658,7 +9658,7 @@
         ...defaultAttributes,
         ...userDefinedAttributes
       },
-      disabled: disabled.draggable
+      disabled: disabled2.draggable
     });
     const setNodeRef = useCombinedRefs(setDroppableNodeRef, setDraggableNodeRef);
     const isSorting = Boolean(active);
@@ -10654,14 +10654,16 @@
     );
   };
   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_cyzwo_1";
+  const taskListHorizontalScroll = "_taskListHorizontalScroll_cyzwo_19";
+  const taskListResizer = "_taskListResizer_cyzwo_81";
+  const horizontalContainer$1 = "_horizontalContainer_cyzwo_145";
+  const tableWrapper = "_tableWrapper_cyzwo_159";
+  const scrollToTop = "_scrollToTop_cyzwo_173";
+  const scrollToBottom = "_scrollToBottom_cyzwo_189";
+  const hidden = "_hidden_cyzwo_205";
+  const disabled$1 = "_disabled_cyzwo_213";
+  const disabledOverlay$1 = "_disabledOverlay_cyzwo_221";
   const styles$d = {
     taskListRoot,
     taskListHorizontalScroll,
@@ -10670,7 +10672,9 @@
     tableWrapper,
     scrollToTop,
     scrollToBottom,
-    hidden
+    hidden,
+    disabled: disabled$1,
+    disabledOverlay: disabledOverlay$1
   };
   const checkHasChildren = (task, childTasksMap) => {
     const { id, comparisonLevel = 1 } = task;
@@ -10719,7 +10723,8 @@
     tasks,
     onResizeColumn,
     canReorderTasks,
-    tableBottom
+    tableBottom,
+    isLoading = false
   }) => {
     const [
       columns,
@@ -10896,7 +10901,8 @@
                 {
                   className: `${styles$d.scrollToBottom} ${!renderedIndexes || renderedIndexes[3] ? styles$d.hidden : ""}`
                 }
-              )
+              ),
+              isLoading && /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles$d.disabledOverlay })
             ] }),
             (tableBottom == null ? void 0 : tableBottom.renderContent) && (tableBottom == null ? void 0 : tableBottom.height) && /* @__PURE__ */ jsxRuntime.jsx("div", { style: { height: tableBottom.height, width: "100%" }, children: tableBottom.renderContent() })
           ]
@@ -13380,15 +13386,19 @@
     ] });
   };
   const TaskGanttContent = React.memo(TaskGanttContentInner);
-  const ganttVerticalContainer = "_ganttVerticalContainer_1wr55_1";
-  const horizontalContainer = "_horizontalContainer_1wr55_73";
-  const wrapper = "_wrapper_1wr55_85";
-  const calendarDragging = "_calendarDragging_1wr55_109";
+  const ganttVerticalContainer = "_ganttVerticalContainer_15ld3_1";
+  const horizontalContainer = "_horizontalContainer_15ld3_73";
+  const wrapper = "_wrapper_15ld3_85";
+  const calendarDragging = "_calendarDragging_15ld3_109";
+  const disabled = "_disabled_15ld3_117";
+  const disabledOverlay = "_disabledOverlay_15ld3_125";
   const styles$2 = {
     ganttVerticalContainer,
     horizontalContainer,
     wrapper,
-    calendarDragging
+    calendarDragging,
+    disabled,
+    disabledOverlay
   };
   const TaskGanttInner = (props) => {
     const {
@@ -13408,7 +13418,8 @@
       onVerticalScrollbarScrollX,
       verticalGanttContainerRef,
       verticalScrollbarRef,
-      onOpenGanttContextMenu
+      onOpenGanttContextMenu,
+      isLoading = false
     } = props;
     const contentRef = React.useRef(null);
     const moveStateVertRef = React.useRef(null);
@@ -13532,41 +13543,44 @@
               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: [
+                /* @__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 })
+                    ]
+                  }
+                ) }),
+                isLoading && /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles$2.disabledOverlay })
+              ]
             }
           )
         ]
@@ -18036,7 +18050,7 @@
       },
       handleAction,
       option,
-      option: { icon: icon2, label: label2, disabled, children }
+      option: { icon: icon2, label: label2, disabled: disabled2, children }
     } = props;
     const [hovered, setHovered] = React.useState(false);
     const [coords, setCoords] = React.useState(null);
@@ -18046,7 +18060,7 @@
     const onClick = React.useCallback(
       (e) => {
         e.preventDefault();
-        if (disabled) {
+        if (disabled2) {
           return;
         }
         if (children && children.length > 0) {
@@ -18056,7 +18070,7 @@
         handleAction(option);
         onClose == null ? void 0 : onClose();
       },
-      [onClose, handleAction, option, disabled, children]
+      [onClose, handleAction, option, disabled2, children]
     );
     React.useEffect(() => {
       if (!hovered || !nestedRef.current)
@@ -18116,8 +18130,8 @@
             "button",
             {
               className: styles$1.menuOption,
-              "aria-disabled": disabled,
-              disabled,
+              "aria-disabled": disabled2,
+              disabled: disabled2,
               style: {
                 height: contextMenuOptionHeight,
                 paddingLeft: contextMenuSidePadding,
@@ -18134,7 +18148,7 @@
                     style: {
                       width: contextMenuIconWidth,
                       color: "var(--gantt-context-menu-text-color)",
-                      opacity: disabled ? 0.3 : 0.5
+                      opacity: disabled2 ? 0.3 : 0.5
                     },
                     children: icon2
                   }
@@ -19001,7 +19015,8 @@
       todayLabel = "Today",
       dataDateLabel = "Data Date",
       showProgress = true,
-      progressColor
+      progressColor,
+      isLoading = false
     } = props;
     const ganttSVGRef = React.useRef(null);
     const wrapperRef = React.useRef(null);
@@ -20364,7 +20379,8 @@
         taskListContainerRef,
         taskListRef,
         tasks: visibleTasks,
-        ganttRef: wrapperRef
+        ganttRef: wrapperRef,
+        isLoading
       }),
       [
         childTasksMap,
@@ -20393,7 +20409,8 @@
         selectedIdsMirror,
         taskList,
         taskListContainerRef,
-        visibleTasks
+        visibleTasks,
+        isLoading
       ]
     );
     return /* @__PURE__ */ jsxRuntime.jsx(GanttThemeProvider, { theme, children: (cssVars) => /* @__PURE__ */ jsxRuntime.jsx(GanttLocaleProvider, { locale, children: /* @__PURE__ */ jsxRuntime.jsxs(
@@ -20431,7 +20448,8 @@
               verticalGanttContainerRef,
               onOpenGanttContextMenu: (clientX, clientY) => {
                 handleOpenGanttContextMenu(null, clientX, clientY);
-              }
+              },
+              isLoading
             }
           ),
           tooltipTaskFromMap && /* @__PURE__ */ jsxRuntime.jsx(