gantt-task-react-v 1.2.0 → 1.2.2

package/dist/components/gantt/task-gantt.d.ts

@@ -18,5 +18,6 @@ export interface TaskGanttProps extends GanttTaskBarActions {
     onVerticalScrollbarScrollX: (event: SyntheticEvent<HTMLDivElement>) => void;
     verticalGanttContainerRef: RefObject<HTMLDivElement>;
     onOpenGanttContextMenu?: (clientX: number, clientY: number) => void;
+    isLoading?: boolean;
 }
 export declare const TaskGantt: React.NamedExoticComponent<TaskGanttProps>;

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

@@ -40,5 +40,6 @@ export type TaskListProps = {
     tasks: readonly RenderTask[];
     onResizeColumn?: OnResizeColumn;
     tableBottom?: TableRenderBottomProps;
+    isLoading?: boolean;
 };
 export declare const TaskList: React.NamedExoticComponent<TaskListProps>;

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

@@ -7456,11 +7456,11 @@ const defaultScrollIntent = {
 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 = {
@@ -7477,7 +7477,7 @@ function useScrollIntent(_ref2) {
         [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;
@@ -7526,8 +7526,8 @@ function useDroppableMeasuring(containers, _ref) {
     strategy
   } = config;
   const containersRef = useRef(containers);
-  const disabled = isDisabled();
-  const disabledRef = useLatestValue(disabled);
+  const disabled2 = isDisabled();
+  const disabledRef = useLatestValue(disabled2);
   const measureDroppableContainers = useCallback(function(ids2) {
     if (ids2 === void 0) {
       ids2 = [];
@@ -7544,7 +7544,7 @@ function useDroppableMeasuring(containers, _ref) {
   }, [disabledRef]);
   const timeoutId = useRef(null);
   const droppableRects = useLazyMemo((previousValue) => {
-    if (disabled && !dragging2) {
+    if (disabled2 && !dragging2) {
       return defaultValue;
     }
     if (!previousValue || previousValue === defaultValue || containersRef.current !== containers || queue != null) {
@@ -7567,19 +7567,19 @@ function useDroppableMeasuring(containers, _ref) {
       return map;
     }
     return previousValue;
-  }, [containers, queue, dragging2, disabled, measure]);
+  }, [containers, queue, dragging2, disabled2, measure]);
   useEffect(() => {
     containersRef.current = containers;
   }, [containers]);
   useEffect(
     () => {
-      if (disabled) {
+      if (disabled2) {
         return;
       }
       measureDroppableContainers();
     },
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    [dragging2, disabled]
+    [dragging2, disabled2]
   );
   useEffect(
     () => {
@@ -7592,7 +7592,7 @@ function useDroppableMeasuring(containers, _ref) {
   );
   useEffect(
     () => {
-      if (disabled || typeof frequency !== "number" || timeoutId.current !== null) {
+      if (disabled2 || typeof frequency !== "number" || timeoutId.current !== null) {
         return;
       }
       timeoutId.current = setTimeout(() => {
@@ -7601,7 +7601,7 @@ function useDroppableMeasuring(containers, _ref) {
       }, frequency);
     },
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    [frequency, disabled, measureDroppableContainers, ...dependencies]
+    [frequency, disabled2, measureDroppableContainers, ...dependencies]
   );
   return {
     droppableRects,
@@ -7636,18 +7636,18 @@ function useInitialRect(node, measure) {
 function useMutationObserver(_ref) {
   let {
     callback,
-    disabled
+    disabled: disabled2
   } = _ref;
   const handleMutations = useEvent(callback);
   const mutationObserver = 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]);
   useEffect(() => {
     return () => mutationObserver == null ? void 0 : mutationObserver.disconnect();
   }, [mutationObserver]);
@@ -7656,12 +7656,12 @@ function useMutationObserver(_ref) {
 function useResizeObserver(_ref) {
   let {
     callback,
-    disabled
+    disabled: disabled2
   } = _ref;
   const handleResize = useEvent(callback);
   const resizeObserver = useMemo(
     () => {
-      if (disabled || typeof window === "undefined" || typeof window.ResizeObserver === "undefined") {
+      if (disabled2 || typeof window === "undefined" || typeof window.ResizeObserver === "undefined") {
         return void 0;
       }
       const {
@@ -7670,7 +7670,7 @@ function useResizeObserver(_ref) {
       return new ResizeObserver2(handleResize);
     },
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    [disabled]
+    [disabled2]
   );
   useEffect(() => {
     return () => resizeObserver == null ? void 0 : resizeObserver.disconnect();
@@ -7988,9 +7988,9 @@ class DroppableContainersMap extends Map {
   getEnabled() {
     return this.toArray().filter((_ref) => {
       let {
-        disabled
+        disabled: disabled2
       } = _ref;
-      return !disabled;
+      return !disabled2;
     });
   }
   getNodeFor(id) {
@@ -8120,7 +8120,7 @@ function reducer(state, action) {
       const {
         id,
         key: key2,
-        disabled
+        disabled: disabled2
       } = action;
       const element = state.droppable.containers.get(id);
       if (!element || key2 !== element.key) {
@@ -8129,7 +8129,7 @@ function reducer(state, action) {
       const containers = new DroppableContainersMap(state.droppable.containers);
       containers.set(id, {
         ...element,
-        disabled
+        disabled: disabled2
       });
       return {
         ...state,
@@ -8165,7 +8165,7 @@ function reducer(state, action) {
 }
 function RestoreFocus(_ref) {
   let {
-    disabled
+    disabled: disabled2
   } = _ref;
   const {
     active,
@@ -8175,7 +8175,7 @@ function RestoreFocus(_ref) {
   const previousActivatorEvent = usePrevious(activatorEvent);
   const previousActiveId = usePrevious(active == null ? void 0 : active.id);
   useEffect(() => {
-    if (disabled) {
+    if (disabled2) {
       return;
     }
     if (!activatorEvent && previousActivatorEvent && previousActiveId != null) {
@@ -8209,7 +8209,7 @@ function RestoreFocus(_ref) {
         }
       });
     }
-  }, [activatorEvent, disabled, draggableNodes, previousActiveId, previousActivatorEvent]);
+  }, [activatorEvent, disabled2, draggableNodes, previousActiveId, previousActivatorEvent]);
   return null;
 }
 function applyModifiers(modifiers, _ref) {
@@ -8260,8 +8260,8 @@ function useLayoutShiftScrollCompensation(_ref) {
     y: config
   } : config;
   useIsomorphicLayoutEffect(() => {
-    const disabled = !x && !y;
-    if (disabled || !activeNode) {
+    const disabled2 = !x && !y;
+    if (disabled2 || !activeNode) {
       initialized.current = false;
       return;
     }
@@ -8768,7 +8768,7 @@ function useDraggable(_ref) {
   let {
     id,
     data,
-    disabled = false,
+    disabled: disabled2 = false,
     attributes
   } = _ref;
   const key2 = useUniqueId(ID_PREFIX$1);
@@ -8814,18 +8814,18 @@ function useDraggable(_ref) {
   const memoizedAttributes = 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,
@@ -8843,7 +8843,7 @@ const defaultResizeObserverConfig = {
 function useDroppable(_ref) {
   let {
     data,
-    disabled = false,
+    disabled: disabled2 = false,
     id,
     resizeObserverConfig
   } = _ref;
@@ -8855,7 +8855,7 @@ function useDroppable(_ref) {
     measureDroppableContainers
   } = useContext(InternalContext);
   const previous = useRef({
-    disabled
+    disabled: disabled2
   });
   const resizeObserverConnected = useRef(false);
   const rect = useRef(null);
@@ -8919,7 +8919,7 @@ function useDroppable(_ref) {
         element: {
           id,
           key: key2,
-          disabled,
+          disabled: disabled2,
           node: nodeRef,
           rect,
           data: dataRef
@@ -8935,16 +8935,16 @@ function useDroppable(_ref) {
     [id]
   );
   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,
@@ -9335,14 +9335,14 @@ function itemsEqual(a, b) {
   }
   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 {
@@ -9464,7 +9464,7 @@ function SortableContext(_ref) {
   const previousItemsRef = 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);
@@ -9477,7 +9477,7 @@ function SortableContext(_ref) {
     () => ({
       activeIndex,
       containerId,
-      disabled,
+      disabled: disabled2,
       disableTransforms,
       items,
       overIndex,
@@ -9486,7 +9486,7 @@ function SortableContext(_ref) {
       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__default.createElement(Context.Provider, {
     value: contextValue
@@ -9539,7 +9539,7 @@ const defaultAttributes = {
 };
 function useDerivedTransform(_ref) {
   let {
-    disabled,
+    disabled: disabled2,
     index: index2,
     node,
     rect
@@ -9547,7 +9547,7 @@ function useDerivedTransform(_ref) {
   const [derivedTransform, setDerivedtransform] = useState(null);
   const previousIndex = 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, {
@@ -9567,7 +9567,7 @@ function useDerivedTransform(_ref) {
     if (index2 !== previousIndex.current) {
       previousIndex.current = index2;
     }
-  }, [disabled, index2, node, rect]);
+  }, [disabled2, index2, node, rect]);
   useEffect(() => {
     if (derivedTransform) {
       setDerivedtransform(null);
@@ -9598,7 +9598,7 @@ function useSortable(_ref) {
     useDragOverlay,
     strategy: globalStrategy
   } = useContext(Context);
-  const disabled = normalizeLocalDisabled(localDisabled, globalDisabled);
+  const disabled2 = normalizeLocalDisabled(localDisabled, globalDisabled);
   const index2 = items.indexOf(id);
   const data = useMemo(() => ({
     sortable: {
@@ -9617,7 +9617,7 @@ function useSortable(_ref) {
   } = useDroppable({
     id,
     data,
-    disabled: disabled.droppable,
+    disabled: disabled2.droppable,
     resizeObserverConfig: {
       updateMeasurementsFor: itemsAfterCurrentSortable,
       ...resizeObserverConfig
@@ -9641,7 +9641,7 @@ function useSortable(_ref) {
       ...defaultAttributes,
       ...userDefinedAttributes
     },
-    disabled: disabled.draggable
+    disabled: disabled2.draggable
   });
   const setNodeRef = useCombinedRefs(setDroppableNodeRef, setDraggableNodeRef);
   const isSorting = Boolean(active);
@@ -10637,14 +10637,16 @@ 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_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,
@@ -10653,7 +10655,9 @@ const styles$d = {
   tableWrapper,
   scrollToTop,
   scrollToBottom,
-  hidden
+  hidden,
+  disabled: disabled$1,
+  disabledOverlay: disabledOverlay$1
 };
 const checkHasChildren = (task, childTasksMap) => {
   const { id, comparisonLevel = 1 } = task;
@@ -10702,7 +10706,8 @@ const TaskListInner = ({
   tasks,
   onResizeColumn,
   canReorderTasks,
-  tableBottom
+  tableBottom,
+  isLoading = false
 }) => {
   const [
     columns,
@@ -10879,7 +10884,8 @@ const TaskListInner = ({
               {
                 className: `${styles$d.scrollToBottom} ${!renderedIndexes || renderedIndexes[3] ? styles$d.hidden : ""}`
               }
-            )
+            ),
+            isLoading && /* @__PURE__ */ jsx("div", { className: styles$d.disabledOverlay })
           ] }),
           (tableBottom == null ? void 0 : tableBottom.renderContent) && (tableBottom == null ? void 0 : tableBottom.height) && /* @__PURE__ */ jsx("div", { style: { height: tableBottom.height, width: "100%" }, children: tableBottom.renderContent() })
         ]
@@ -13363,15 +13369,19 @@ const TaskGanttContentInner = (props) => {
   ] });
 };
 const TaskGanttContent = 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 {
@@ -13391,7 +13401,8 @@ const TaskGanttInner = (props) => {
     onVerticalScrollbarScrollX,
     verticalGanttContainerRef,
     verticalScrollbarRef,
-    onOpenGanttContextMenu
+    onOpenGanttContextMenu,
+    isLoading = false
   } = props;
   const contentRef = React__default.useRef(null);
   const moveStateVertRef = useRef(null);
@@ -13515,41 +13526,44 @@ 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: [
+              /* @__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 })
+                  ]
+                }
+              ) }),
+              isLoading && /* @__PURE__ */ jsx("div", { className: styles$2.disabledOverlay })
+            ]
           }
         )
       ]
@@ -18019,7 +18033,7 @@ function MenuOption(props) {
     },
     handleAction,
     option,
-    option: { icon: icon2, label: label2, disabled, children }
+    option: { icon: icon2, label: label2, disabled: disabled2, children }
   } = props;
   const [hovered, setHovered] = useState(false);
   const [coords, setCoords] = useState(null);
@@ -18029,7 +18043,7 @@ function MenuOption(props) {
   const onClick = useCallback(
     (e) => {
       e.preventDefault();
-      if (disabled) {
+      if (disabled2) {
         return;
       }
       if (children && children.length > 0) {
@@ -18039,7 +18053,7 @@ function MenuOption(props) {
       handleAction(option);
       onClose == null ? void 0 : onClose();
     },
-    [onClose, handleAction, option, disabled, children]
+    [onClose, handleAction, option, disabled2, children]
   );
   useEffect(() => {
     if (!hovered || !nestedRef.current)
@@ -18099,8 +18113,8 @@ function MenuOption(props) {
           "button",
           {
             className: styles$1.menuOption,
-            "aria-disabled": disabled,
-            disabled,
+            "aria-disabled": disabled2,
+            disabled: disabled2,
             style: {
               height: contextMenuOptionHeight,
               paddingLeft: contextMenuSidePadding,
@@ -18117,7 +18131,7 @@ function MenuOption(props) {
                   style: {
                     width: contextMenuIconWidth,
                     color: "var(--gantt-context-menu-text-color)",
-                    opacity: disabled ? 0.3 : 0.5
+                    opacity: disabled2 ? 0.3 : 0.5
                   },
                   children: icon2
                 }
@@ -18984,7 +18998,8 @@ const Gantt = (props) => {
     todayLabel = "Today",
     dataDateLabel = "Data Date",
     showProgress = true,
-    progressColor
+    progressColor,
+    isLoading = false
   } = props;
   const ganttSVGRef = useRef(null);
   const wrapperRef = useRef(null);
@@ -20347,7 +20362,8 @@ const Gantt = (props) => {
       taskListContainerRef,
       taskListRef,
       tasks: visibleTasks,
-      ganttRef: wrapperRef
+      ganttRef: wrapperRef,
+      isLoading
     }),
     [
       childTasksMap,
@@ -20376,7 +20392,8 @@ const Gantt = (props) => {
       selectedIdsMirror,
       taskList,
       taskListContainerRef,
-      visibleTasks
+      visibleTasks,
+      isLoading
     ]
   );
   return /* @__PURE__ */ jsx(GanttThemeProvider, { theme, children: (cssVars) => /* @__PURE__ */ jsx(GanttLocaleProvider, { locale, children: /* @__PURE__ */ jsxs(
@@ -20414,7 +20431,8 @@ const Gantt = (props) => {
             verticalGanttContainerRef,
             onOpenGanttContextMenu: (clientX, clientY) => {
               handleOpenGanttContextMenu(null, clientX, clientY);
-            }
+            },
+            isLoading
           }
         ),
         tooltipTaskFromMap && /* @__PURE__ */ jsx(