npm - @uipath/apollo-react - Versions diffs - 3.62.0 → 3.63.0-pr431.329c320 - Mend

@uipath/apollo-react 3.62.0 → 3.63.0-pr431.329c320

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (45) hide show

package/dist/canvas/components/StageNode/StageNode.cjs CHANGED Viewed

@@ -46,7 +46,33 @@ const external_DraggableTask_cjs_namespaceObject = require("./DraggableTask.cjs"
 const external_StageNode_styles_cjs_namespaceObject = require("./StageNode.styles.cjs");
 const external_StageNode_utils_cjs_namespaceObject = require("./StageNode.utils.cjs");
 const external_StageNodeTaskUtilities_cjs_namespaceObject = require("./StageNodeTaskUtilities.cjs");
-const StageNodeComponent = (props)=>{
+const StageNode_StageTaskDragOverlay = /*#__PURE__*/ (0, external_react_namespaceObject.memo)(function({ activeTask, isActiveTaskParallel, taskWidthStyle }) {
+    const { zoom } = (0, react_cjs_namespaceObject.useViewport)();
+    const dragOverlayStyle = (0, external_react_namespaceObject.useMemo)(()=>({
+            transform: `scale(${zoom})`,
+            transformOrigin: 'top left'
+        }), [
+        zoom
+    ]);
+    return /*#__PURE__*/ (0, external_react_dom_namespaceObject.createPortal)(/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(core_namespaceObject.DragOverlay, {
+        children: activeTask ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+            style: dragOverlayStyle,
+            children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_StageNode_styles_cjs_namespaceObject.StageTask, {
+                selected: true,
+                isParallel: isActiveTaskParallel,
+                style: {
+                    cursor: 'grabbing',
+                    ...taskWidthStyle
+                },
+                children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_DraggableTask_cjs_namespaceObject.TaskContent, {
+                    task: activeTask,
+                    isDragging: true
+                })
+            })
+        }) : null
+    }), document.body);
+});
+const StageNodeInner = (props)=>{
     const { dragging, selected, id, width, execution, stageDetails, addTaskLabel = 'Add task', addTaskLoading = false, replaceTaskLabel = 'Replace task', taskOptions = [], menuItems, pendingReplaceTask, onStageClick, onTaskAdd, onAddTaskFromToolbox, onTaskToolboxSearch, onTaskClick, onTaskGroupModification, onStageTitleChange, onTaskReorder, onReplaceTaskFromToolbox, onTaskPlay } = props;
     const taskWidth = width ? width - external_StageNode_styles_cjs_namespaceObject.STAGE_CONTENT_INSET : void 0;
     const tasks = (0, external_react_namespaceObject.useMemo)(()=>stageDetails?.tasks || [], [
@@ -66,9 +92,6 @@ const StageNodeComponent = (props)=>{
     const status = execution?.stageStatus?.status;
     const statusLabel = execution?.stageStatus?.label;
     const stageDuration = execution?.stageStatus?.duration;
-    const reGroupTaskFunction = (0, external_react_namespaceObject.useMemo)(()=>onTaskGroupModification || (()=>{}), [
-        onTaskGroupModification
-    ]);
     const isStageTitleEditable = !!onStageTitleChange && !isReadOnly;
     const [isHovered, setIsHovered] = (0, external_react_namespaceObject.useState)(false);
     const [label, setLabel] = (0, external_react_namespaceObject.useState)(props.stageDetails.label);
@@ -85,6 +108,7 @@ const StageNodeComponent = (props)=>{
         taskIndex: -1
     });
     const isConnecting = (0, react_cjs_namespaceObject.useStore)((state)=>!!state.connectionClickStartHandle);
+    const storeApi = (0, react_cjs_namespaceObject.useStoreApi)();
     const connectedHandleIds = (0, ConnectedHandlesContext_cjs_namespaceObject.useConnectedHandles)(id);
     const [isAddingTask, setIsAddingTask] = (0, external_react_namespaceObject.useState)(false);
     const [isReplacingTask, setIsReplacingTask] = (0, external_react_namespaceObject.useState)(false);
@@ -124,7 +148,6 @@ const StageNodeComponent = (props)=>{
         tasks,
         activeDragId
     ]);
-    const { zoom } = (0, react_cjs_namespaceObject.useViewport)();
     const projected = (0, external_react_namespaceObject.useMemo)(()=>{
         if (!activeDragId || !overId) return null;
         return (0, external_StageNode_utils_cjs_namespaceObject.getProjection)(tasks, activeDragId, overId, offsetLeft);
@@ -207,18 +230,21 @@ const StageNodeComponent = (props)=>{
         handleStageTitleClickToSave,
         isStageTitleEditing
     ]);
-    const contextMenuItems = (0, external_react_namespaceObject.useCallback)((isParallel, groupIndex, taskIndex, tasksLength, taskGroupLength, isAboveParallel, isBelowParallel)=>{
+    const hasContextMenu = !!(onReplaceTaskFromToolbox || onTaskGroupModification);
+    const buildContextMenuItems = (0, external_react_namespaceObject.useCallback)((groupIndex, taskIndex)=>{
+        const taskGroup = tasks[groupIndex] ?? [];
+        const isParallel = taskGroup.length > 1;
         const items = [];
         if (onReplaceTaskFromToolbox) {
             items.push((0, external_StageNodeTaskUtilities_cjs_namespaceObject.getMenuItem)('replace-task', 'Replace task', ()=>{
-                const taskId = tasks[groupIndex]?.[taskIndex]?.id;
+                const taskId = taskGroup[taskIndex]?.id;
                 if (taskId) onTaskClick?.(taskId);
                 setIsReplacingTask(true);
             }));
             items.push((0, external_StageNodeTaskUtilities_cjs_namespaceObject.getDivider)());
         }
         if (onTaskGroupModification) {
-            const reGroupOptions = (0, external_StageNodeTaskUtilities_cjs_namespaceObject.getContextMenuItems)(isParallel, groupIndex, tasksLength, taskIndex, taskGroupLength, isAboveParallel, isBelowParallel, reGroupTaskFunction);
+            const reGroupOptions = (0, external_StageNodeTaskUtilities_cjs_namespaceObject.getContextMenuItems)(isParallel, groupIndex, tasks.length, taskIndex, taskGroup.length, (tasks[groupIndex - 1]?.length ?? 0) > 1, (tasks[groupIndex + 1]?.length ?? 0) > 1, onTaskGroupModification);
             return [
                 ...items,
                 ...reGroupOptions
@@ -229,10 +255,9 @@ const StageNodeComponent = (props)=>{
         onReplaceTaskFromToolbox,
         onTaskClick,
         onTaskGroupModification,
-        reGroupTaskFunction,
         tasks
     ]);
-    const { setSelectedNodeId } = (0, hooks_index_cjs_namespaceObject.useNodeSelection)();
+    const { setSelectedNodeId } = (0, hooks_index_cjs_namespaceObject.useSetNodeSelection)();
     const handleStageClick = (0, external_react_namespaceObject.useCallback)(()=>{
         onStageClick?.();
     }, [
@@ -355,9 +380,9 @@ const StageNodeComponent = (props)=>{
         setActiveDragId(event.active.id);
     }, []);
     const handleDragMove = (0, external_react_namespaceObject.useCallback)((event)=>{
-        setOffsetLeft(event.delta.x / zoom);
+        setOffsetLeft(event.delta.x / storeApi.getState().transform[2]);
     }, [
-        zoom
+        storeApi
     ]);
     const handleDragOver = (0, external_react_namespaceObject.useCallback)((event)=>{
         setOverId(event.over?.id ?? null);
@@ -393,12 +418,6 @@ const StageNodeComponent = (props)=>{
         } : void 0, [
         taskWidth
     ]);
-    const dragOverlayStyle = (0, external_react_namespaceObject.useMemo)(()=>({
-            transform: `scale(${zoom})`,
-            transformOrigin: 'top left'
-        }), [
-        zoom
-    ]);
     return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
         "data-testid": `stage-${id}`,
         style: {
@@ -483,11 +502,13 @@ const StageNodeComponent = (props)=>{
                                     (onTaskAdd || onAddTaskFromToolbox) && !isReadOnly && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_material_index_cjs_namespaceObject.ApTooltip, {
                                         content: addTaskLabel,
                                         placement: "top",
+                                        hide: addTaskLoading,
                                         children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
                                             children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_material_index_cjs_namespaceObject.ApIconButton, {
                                                 onClick: handleTaskAddClick,
                                                 size: "small",
                                                 label: addTaskLabel,
+                                                disabled: addTaskLoading,
                                                 children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_material_index_cjs_namespaceObject.ApIcon, {
                                                     name: "add",
                                                     size: "20px"
@@ -536,13 +557,12 @@ const StageNodeComponent = (props)=>{
                                                                     taskExecution: taskExecution,
                                                                     isSelected: selectedTaskId === task.id,
                                                                     isParallel: isParallel,
-                                                                    contextMenuItems: contextMenuItems(isParallel, groupIndex, taskIndex, tasks.length, taskGroup.length, (tasks[groupIndex - 1]?.length ?? 0) > 1, (tasks[groupIndex + 1]?.length ?? 0) > 1),
                                                                     onTaskClick: handleTaskClick,
                                                                     projectedDepth: task.id === activeDragId && projected ? projected.depth : void 0,
                                                                     onTaskPlay: onTaskPlay,
                                                                     isDragDisabled: !onTaskReorder,
-                                                                    zoom: zoom,
-                                                                    ...(onTaskGroupModification || onReplaceTaskFromToolbox) && {
+                                                                    ...hasContextMenu && {
+                                                                        getContextMenuItems: ()=>buildContextMenuItems(groupIndex, taskIndex),
                                                                         onMenuOpen: ()=>{
                                                                             taskStateReference.current = {
                                                                                 isParallel,
@@ -560,23 +580,11 @@ const StageNodeComponent = (props)=>{
                                         })
                                     })
                                 }),
-                                /*#__PURE__*/ (0, external_react_dom_namespaceObject.createPortal)(/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(core_namespaceObject.DragOverlay, {
-                                    children: activeTask ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
-                                        style: dragOverlayStyle,
-                                        children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_StageNode_styles_cjs_namespaceObject.StageTask, {
-                                            selected: true,
-                                            isParallel: isActiveTaskParallel,
-                                            style: {
-                                                cursor: 'grabbing',
-                                                ...taskWidthStyle
-                                            },
-                                            children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_DraggableTask_cjs_namespaceObject.TaskContent, {
-                                                task: activeTask,
-                                                isDragging: true
-                                            })
-                                        })
-                                    }) : null
-                                }), document.body)
+                                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(StageNode_StageTaskDragOverlay, {
+                                    activeTask: activeTask,
+                                    isActiveTaskParallel: isActiveTaskParallel,
+                                    taskWidthStyle: taskWidthStyle
+                                })
                             ]
                         }) : /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(index_cjs_namespaceObject.Column, {
                             py: 2,
@@ -630,6 +638,31 @@ const StageNodeComponent = (props)=>{
         ]
     });
 };
+const StageNodeInnerMemo = /*#__PURE__*/ (0, external_react_namespaceObject.memo)(StageNodeInner);
+const StageNodeComponent = ({ dragging, selected, id, width, execution, stageDetails, addTaskLabel, addTaskLoading, replaceTaskLabel, taskOptions, menuItems, pendingReplaceTask, onStageClick, onTaskAdd, onAddTaskFromToolbox, onTaskToolboxSearch, onTaskClick, onTaskGroupModification, onStageTitleChange, onTaskReorder, onReplaceTaskFromToolbox, onTaskPlay })=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(StageNodeInnerMemo, {
+        dragging: dragging,
+        selected: selected,
+        id: id,
+        width: width,
+        execution: execution,
+        stageDetails: stageDetails,
+        addTaskLabel: addTaskLabel,
+        addTaskLoading: addTaskLoading,
+        replaceTaskLabel: replaceTaskLabel,
+        taskOptions: taskOptions,
+        menuItems: menuItems,
+        pendingReplaceTask: pendingReplaceTask,
+        onStageClick: onStageClick,
+        onTaskAdd: onTaskAdd,
+        onAddTaskFromToolbox: onAddTaskFromToolbox,
+        onTaskToolboxSearch: onTaskToolboxSearch,
+        onTaskClick: onTaskClick,
+        onTaskGroupModification: onTaskGroupModification,
+        onStageTitleChange: onStageTitleChange,
+        onTaskReorder: onTaskReorder,
+        onReplaceTaskFromToolbox: onReplaceTaskFromToolbox,
+        onTaskPlay: onTaskPlay
+    });
 const StageNode = /*#__PURE__*/ (0, external_react_namespaceObject.memo)(StageNodeComponent);
 exports.StageNode = __webpack_exports__.StageNode;
 for(var __rspack_i in __webpack_exports__)if (-1 === [

package/dist/canvas/components/StageNode/StageNode.d.ts CHANGED Viewed

@@ -1,3 +1,3 @@
 import type { StageNodeProps } from './StageNode.types';
-export declare const StageNode: import("react").MemoExoticComponent<(props: StageNodeProps) => import("react/jsx-runtime").JSX.Element>;
+export declare const StageNode: import("react").MemoExoticComponent<({ dragging, selected, id, width, execution, stageDetails, addTaskLabel, addTaskLoading, replaceTaskLabel, taskOptions, menuItems, pendingReplaceTask, onStageClick, onTaskAdd, onAddTaskFromToolbox, onTaskToolboxSearch, onTaskClick, onTaskGroupModification, onStageTitleChange, onTaskReorder, onReplaceTaskFromToolbox, onTaskPlay, }: StageNodeProps) => import("react/jsx-runtime").JSX.Element>;
 //# sourceMappingURL=StageNode.d.ts.map

package/dist/canvas/components/StageNode/StageNode.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"StageNode.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/StageNode/StageNode.tsx"],"names":[],"mappings":"~~AAqDA~~,OAAO,KAAK,~~EAAE~~,cAAc,~~EAAE~~,MAAM,mBAAmB,CAAC;~~AAspBxD~~,eAAO,MAAM,SAAS,~~8CA5oBa~~,cAAc,~~6CA4oBA~~,CAAC"}
1	+ {"version":3,"file":"StageNode.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/StageNode/StageNode.tsx"],"names":[],"mappings":"AA0DA,OAAO,KAAK,EAEV,cAAc,EAEf,MAAM,mBAAmB,CAAC;AAotB3B,eAAO,MAAM,SAAS,mXA7BnB,cAAc,6CA6BgC,CAAC"}

package/dist/canvas/components/StageNode/StageNode.js CHANGED Viewed

@@ -3,7 +3,7 @@ import { DndContext, DragOverlay, KeyboardSensor, PointerSensor, closestCenter,
 import { SortableContext, sortableKeyboardCoordinates, verticalListSortingStrategy } from "@dnd-kit/sortable";
 import { FontVariantToken, Padding, Spacing } from "@uipath/apollo-core";
 import { Column, Row } from "../../layouts/index.js";
-import { Position, useStore, useViewport } from "../../xyflow/react.js";
+import { Position, useStore, useStoreApi, useViewport } from "../../xyflow/react.js";
 import { ApIcon, ApIconButton, ApLink, ApTooltip, ApTypography } from "../../../material/index.js";
 import { memo, useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { createPortal } from "react-dom";
@@ -12,13 +12,39 @@ import { useButtonHandles } from "../ButtonHandle/useButtonHandles.js";
 import { ExecutionStatusIcon } from "../ExecutionStatusIcon/index.js";
 import { FloatingCanvasPanel } from "../FloatingCanvasPanel/index.js";
 import { NodeContextMenu } from "../NodeContextMenu/index.js";
-import { useNodeSelection } from "../NodePropertiesPanel/hooks/index.js";
+import { useSetNodeSelection } from "../NodePropertiesPanel/hooks/index.js";
 import { Toolbox } from "../Toolbox/index.js";
 import { DraggableTask, TaskContent } from "./DraggableTask.js";
 import { INDENTATION_WIDTH, STAGE_CONTENT_INSET, StageContainer, StageContent, StageHeader, StageParallelBracket, StageParallelLabel, StageTask, StageTaskGroup, StageTaskList, StageTitleContainer, StageTitleInput } from "./StageNode.styles.js";
 import { flattenTasks, getProjection, reorderTasks } from "./StageNode.utils.js";
 import { getContextMenuItems, getDivider, getMenuItem } from "./StageNodeTaskUtilities.js";
-const StageNodeComponent = (props)=>{
+const StageNode_StageTaskDragOverlay = /*#__PURE__*/ memo(function({ activeTask, isActiveTaskParallel, taskWidthStyle }) {
+    const { zoom } = useViewport();
+    const dragOverlayStyle = useMemo(()=>({
+            transform: `scale(${zoom})`,
+            transformOrigin: 'top left'
+        }), [
+        zoom
+    ]);
+    return /*#__PURE__*/ createPortal(/*#__PURE__*/ jsx(DragOverlay, {
+        children: activeTask ? /*#__PURE__*/ jsx("div", {
+            style: dragOverlayStyle,
+            children: /*#__PURE__*/ jsx(StageTask, {
+                selected: true,
+                isParallel: isActiveTaskParallel,
+                style: {
+                    cursor: 'grabbing',
+                    ...taskWidthStyle
+                },
+                children: /*#__PURE__*/ jsx(TaskContent, {
+                    task: activeTask,
+                    isDragging: true
+                })
+            })
+        }) : null
+    }), document.body);
+});
+const StageNodeInner = (props)=>{
     const { dragging, selected, id, width, execution, stageDetails, addTaskLabel = 'Add task', addTaskLoading = false, replaceTaskLabel = 'Replace task', taskOptions = [], menuItems, pendingReplaceTask, onStageClick, onTaskAdd, onAddTaskFromToolbox, onTaskToolboxSearch, onTaskClick, onTaskGroupModification, onStageTitleChange, onTaskReorder, onReplaceTaskFromToolbox, onTaskPlay } = props;
     const taskWidth = width ? width - STAGE_CONTENT_INSET : void 0;
     const tasks = useMemo(()=>stageDetails?.tasks || [], [
@@ -38,9 +64,6 @@ const StageNodeComponent = (props)=>{
     const status = execution?.stageStatus?.status;
     const statusLabel = execution?.stageStatus?.label;
     const stageDuration = execution?.stageStatus?.duration;
-    const reGroupTaskFunction = useMemo(()=>onTaskGroupModification || (()=>{}), [
-        onTaskGroupModification
-    ]);
     const isStageTitleEditable = !!onStageTitleChange && !isReadOnly;
     const [isHovered, setIsHovered] = useState(false);
     const [label, setLabel] = useState(props.stageDetails.label);
@@ -57,6 +80,7 @@ const StageNodeComponent = (props)=>{
         taskIndex: -1
     });
     const isConnecting = useStore((state)=>!!state.connectionClickStartHandle);
+    const storeApi = useStoreApi();
     const connectedHandleIds = useConnectedHandles(id);
     const [isAddingTask, setIsAddingTask] = useState(false);
     const [isReplacingTask, setIsReplacingTask] = useState(false);
@@ -96,7 +120,6 @@ const StageNodeComponent = (props)=>{
         tasks,
         activeDragId
     ]);
-    const { zoom } = useViewport();
     const projected = useMemo(()=>{
         if (!activeDragId || !overId) return null;
         return getProjection(tasks, activeDragId, overId, offsetLeft);
@@ -179,18 +202,21 @@ const StageNodeComponent = (props)=>{
         handleStageTitleClickToSave,
         isStageTitleEditing
     ]);
-    const contextMenuItems = useCallback((isParallel, groupIndex, taskIndex, tasksLength, taskGroupLength, isAboveParallel, isBelowParallel)=>{
+    const hasContextMenu = !!(onReplaceTaskFromToolbox || onTaskGroupModification);
+    const buildContextMenuItems = useCallback((groupIndex, taskIndex)=>{
+        const taskGroup = tasks[groupIndex] ?? [];
+        const isParallel = taskGroup.length > 1;
         const items = [];
         if (onReplaceTaskFromToolbox) {
             items.push(getMenuItem('replace-task', 'Replace task', ()=>{
-                const taskId = tasks[groupIndex]?.[taskIndex]?.id;
+                const taskId = taskGroup[taskIndex]?.id;
                 if (taskId) onTaskClick?.(taskId);
                 setIsReplacingTask(true);
             }));
             items.push(getDivider());
         }
         if (onTaskGroupModification) {
-            const reGroupOptions = getContextMenuItems(isParallel, groupIndex, tasksLength, taskIndex, taskGroupLength, isAboveParallel, isBelowParallel, reGroupTaskFunction);
+            const reGroupOptions = getContextMenuItems(isParallel, groupIndex, tasks.length, taskIndex, taskGroup.length, (tasks[groupIndex - 1]?.length ?? 0) > 1, (tasks[groupIndex + 1]?.length ?? 0) > 1, onTaskGroupModification);
             return [
                 ...items,
                 ...reGroupOptions
@@ -201,10 +227,9 @@ const StageNodeComponent = (props)=>{
         onReplaceTaskFromToolbox,
         onTaskClick,
         onTaskGroupModification,
-        reGroupTaskFunction,
         tasks
     ]);
-    const { setSelectedNodeId } = useNodeSelection();
+    const { setSelectedNodeId } = useSetNodeSelection();
     const handleStageClick = useCallback(()=>{
         onStageClick?.();
     }, [
@@ -327,9 +352,9 @@ const StageNodeComponent = (props)=>{
         setActiveDragId(event.active.id);
     }, []);
     const handleDragMove = useCallback((event)=>{
-        setOffsetLeft(event.delta.x / zoom);
+        setOffsetLeft(event.delta.x / storeApi.getState().transform[2]);
     }, [
-        zoom
+        storeApi
     ]);
     const handleDragOver = useCallback((event)=>{
         setOverId(event.over?.id ?? null);
@@ -365,12 +390,6 @@ const StageNodeComponent = (props)=>{
         } : void 0, [
         taskWidth
     ]);
-    const dragOverlayStyle = useMemo(()=>({
-            transform: `scale(${zoom})`,
-            transformOrigin: 'top left'
-        }), [
-        zoom
-    ]);
     return /*#__PURE__*/ jsxs("div", {
         "data-testid": `stage-${id}`,
         style: {
@@ -455,11 +474,13 @@ const StageNodeComponent = (props)=>{
                                     (onTaskAdd || onAddTaskFromToolbox) && !isReadOnly && /*#__PURE__*/ jsx(ApTooltip, {
                                         content: addTaskLabel,
                                         placement: "top",
+                                        hide: addTaskLoading,
                                         children: /*#__PURE__*/ jsx("span", {
                                             children: /*#__PURE__*/ jsx(ApIconButton, {
                                                 onClick: handleTaskAddClick,
                                                 size: "small",
                                                 label: addTaskLabel,
+                                                disabled: addTaskLoading,
                                                 children: /*#__PURE__*/ jsx(ApIcon, {
                                                     name: "add",
                                                     size: "20px"
@@ -508,13 +529,12 @@ const StageNodeComponent = (props)=>{
                                                                     taskExecution: taskExecution,
                                                                     isSelected: selectedTaskId === task.id,
                                                                     isParallel: isParallel,
-                                                                    contextMenuItems: contextMenuItems(isParallel, groupIndex, taskIndex, tasks.length, taskGroup.length, (tasks[groupIndex - 1]?.length ?? 0) > 1, (tasks[groupIndex + 1]?.length ?? 0) > 1),
                                                                     onTaskClick: handleTaskClick,
                                                                     projectedDepth: task.id === activeDragId && projected ? projected.depth : void 0,
                                                                     onTaskPlay: onTaskPlay,
                                                                     isDragDisabled: !onTaskReorder,
-                                                                    zoom: zoom,
-                                                                    ...(onTaskGroupModification || onReplaceTaskFromToolbox) && {
+                                                                    ...hasContextMenu && {
+                                                                        getContextMenuItems: ()=>buildContextMenuItems(groupIndex, taskIndex),
                                                                         onMenuOpen: ()=>{
                                                                             taskStateReference.current = {
                                                                                 isParallel,
@@ -532,23 +552,11 @@ const StageNodeComponent = (props)=>{
                                         })
                                     })
                                 }),
-                                /*#__PURE__*/ createPortal(/*#__PURE__*/ jsx(DragOverlay, {
-                                    children: activeTask ? /*#__PURE__*/ jsx("div", {
-                                        style: dragOverlayStyle,
-                                        children: /*#__PURE__*/ jsx(StageTask, {
-                                            selected: true,
-                                            isParallel: isActiveTaskParallel,
-                                            style: {
-                                                cursor: 'grabbing',
-                                                ...taskWidthStyle
-                                            },
-                                            children: /*#__PURE__*/ jsx(TaskContent, {
-                                                task: activeTask,
-                                                isDragging: true
-                                            })
-                                        })
-                                    }) : null
-                                }), document.body)
+                                /*#__PURE__*/ jsx(StageNode_StageTaskDragOverlay, {
+                                    activeTask: activeTask,
+                                    isActiveTaskParallel: isActiveTaskParallel,
+                                    taskWidthStyle: taskWidthStyle
+                                })
                             ]
                         }) : /*#__PURE__*/ jsx(Column, {
                             py: 2,
@@ -602,5 +610,30 @@ const StageNodeComponent = (props)=>{
         ]
     });
 };
+const StageNodeInnerMemo = /*#__PURE__*/ memo(StageNodeInner);
+const StageNodeComponent = ({ dragging, selected, id, width, execution, stageDetails, addTaskLabel, addTaskLoading, replaceTaskLabel, taskOptions, menuItems, pendingReplaceTask, onStageClick, onTaskAdd, onAddTaskFromToolbox, onTaskToolboxSearch, onTaskClick, onTaskGroupModification, onStageTitleChange, onTaskReorder, onReplaceTaskFromToolbox, onTaskPlay })=>/*#__PURE__*/ jsx(StageNodeInnerMemo, {
+        dragging: dragging,
+        selected: selected,
+        id: id,
+        width: width,
+        execution: execution,
+        stageDetails: stageDetails,
+        addTaskLabel: addTaskLabel,
+        addTaskLoading: addTaskLoading,
+        replaceTaskLabel: replaceTaskLabel,
+        taskOptions: taskOptions,
+        menuItems: menuItems,
+        pendingReplaceTask: pendingReplaceTask,
+        onStageClick: onStageClick,
+        onTaskAdd: onTaskAdd,
+        onAddTaskFromToolbox: onAddTaskFromToolbox,
+        onTaskToolboxSearch: onTaskToolboxSearch,
+        onTaskClick: onTaskClick,
+        onTaskGroupModification: onTaskGroupModification,
+        onStageTitleChange: onStageTitleChange,
+        onTaskReorder: onTaskReorder,
+        onReplaceTaskFromToolbox: onReplaceTaskFromToolbox,
+        onTaskPlay: onTaskPlay
+    });
 const StageNode = /*#__PURE__*/ memo(StageNodeComponent);
 export { StageNode };