npm - @uipath/apollo-react - Versions diffs - 3.68.3 → 3.69.0-pr458.25d2dee - Mend

@uipath/apollo-react 3.68.3 → 3.69.0-pr458.25d2dee

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 (57) hide show

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

@@ -34,7 +34,6 @@ const index_cjs_namespaceObject = require("../../layouts/index.cjs");
 const react_cjs_namespaceObject = require("../../xyflow/react.cjs");
 const external_material_index_cjs_namespaceObject = require("../../../material/index.cjs");
 const external_react_namespaceObject = require("react");
-const external_react_dom_namespaceObject = require("react-dom");
 const external_icons_index_cjs_namespaceObject = require("../../icons/index.cjs");
 const GroupModificationUtils_cjs_namespaceObject = require("../../utils/GroupModificationUtils.cjs");
 const ConnectedHandlesContext_cjs_namespaceObject = require("../BaseCanvas/ConnectedHandlesContext.cjs");
@@ -50,6 +49,7 @@ const external_StageNode_styles_cjs_namespaceObject = require("./StageNode.style
 const external_StageNode_types_cjs_namespaceObject = require("./StageNode.types.cjs");
 const external_StageNode_utils_cjs_namespaceObject = require("./StageNode.utils.cjs");
 const external_StageNodeTaskUtilities_cjs_namespaceObject = require("./StageNodeTaskUtilities.cjs");
+const external_StageTaskDragOverlay_cjs_namespaceObject = require("./StageTaskDragOverlay.cjs");
 const CHIP_ICONS = {
     [external_StageNode_types_cjs_namespaceObject.StageHeaderChipType.Entry]: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_icons_index_cjs_namespaceObject.EntryConditionIcon, {
         w: apollo_core_namespaceObject.Icon.IconXs,
@@ -72,7 +72,7 @@ const CHIP_ICONS = {
         size: apollo_core_namespaceObject.Icon.IconXs
     })
 };
-const StageNodeComponent = (props)=>{
+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, hideParallelOptions } = props;
     const taskWidth = width ? width - external_StageNode_styles_cjs_namespaceObject.STAGE_CONTENT_INSET : void 0;
     const allTasks = (0, external_react_namespaceObject.useMemo)(()=>stageDetails?.tasks || [], [
@@ -102,9 +102,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);
@@ -121,6 +118,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);
@@ -160,7 +158,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);
@@ -243,18 +240,26 @@ 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;
+                taskStateReference.current = {
+                    isParallel,
+                    groupIndex,
+                    taskIndex
+                };
+                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, hideParallelOptions);
+            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, hideParallelOptions);
             return [
                 ...items,
                 ...reGroupOptions
@@ -265,7 +270,6 @@ const StageNodeComponent = (props)=>{
         onReplaceTaskFromToolbox,
         onTaskClick,
         onTaskGroupModification,
-        reGroupTaskFunction,
         tasks,
         hideParallelOptions
     ]);
@@ -282,16 +286,15 @@ const StageNodeComponent = (props)=>{
         }));
         if (onTaskGroupModification) {
             if (items.length > 0) items.push((0, external_StageNodeTaskUtilities_cjs_namespaceObject.getDivider)());
-            items.push((0, external_StageNodeTaskUtilities_cjs_namespaceObject.getMenuItem)('remove-task', 'Delete task', ()=>reGroupTaskFunction(GroupModificationUtils_cjs_namespaceObject.GroupModificationType.REMOVE_TASK, groupIndex, taskIndex)));
+            items.push((0, external_StageNodeTaskUtilities_cjs_namespaceObject.getMenuItem)('remove-task', 'Delete task', ()=>onTaskGroupModification(GroupModificationUtils_cjs_namespaceObject.GroupModificationType.REMOVE_TASK, groupIndex, taskIndex)));
         }
         return items;
     }, [
         onReplaceTaskFromToolbox,
         onTaskClick,
-        onTaskGroupModification,
-        reGroupTaskFunction
+        onTaskGroupModification
     ]);
-    const { setSelectedNodeId } = (0, hooks_index_cjs_namespaceObject.useNodeSelection)();
+    const { setSelectedNodeId } = (0, hooks_index_cjs_namespaceObject.useSetNodeSelection)();
     const handleStageClick = (0, external_react_namespaceObject.useCallback)(()=>{
         onStageClick?.();
     }, [
@@ -414,9 +417,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);
@@ -452,12 +455,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: {
@@ -640,19 +637,13 @@ 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),
+                                                                            groupIndex: groupIndex,
+                                                                            taskIndex: taskIndex,
                                                                             onTaskClick: handleTaskClick,
                                                                             projectedDepth: task.id === activeDragId && projected ? projected.depth : void 0,
                                                                             isDragDisabled: !onTaskReorder,
-                                                                            zoom: zoom,
-                                                                            ...(onTaskGroupModification || onReplaceTaskFromToolbox) && {
-                                                                                onMenuOpen: ()=>{
-                                                                                    taskStateReference.current = {
-                                                                                        isParallel,
-                                                                                        groupIndex,
-                                                                                        taskIndex
-                                                                                    };
-                                                                                }
+                                                                            ...hasContextMenu && {
+                                                                                getContextMenuItems: buildContextMenuItems
                                                                             }
                                                                         }, task.id);
                                                                     })
@@ -663,23 +654,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)(external_StageTaskDragOverlay_cjs_namespaceObject.StageTaskDragOverlay, {
+                                            activeTask: activeTask,
+                                            isActiveTaskParallel: isActiveTaskParallel,
+                                            taskWidthStyle: taskWidthStyle
+                                        })
                                     ]
                                 }),
                                 adhocTasks.length > 0 && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(external_StageNode_styles_cjs_namespaceObject.StageAdhocSection, {
@@ -697,22 +676,14 @@ const StageNodeComponent = (props)=>{
                                         /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_StageNode_styles_cjs_namespaceObject.StageTaskList, {
                                             children: adhocTasks.map(({ task, groupIndex, taskIndex })=>{
                                                 const taskExecution = execution?.taskStatus?.[task.id];
-                                                const menuItems = getAdhocContextMenuItems(groupIndex, taskIndex, task.id);
                                                 return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_AdhocTask_cjs_namespaceObject.AdhocTaskItem, {
                                                     task: task,
                                                     taskExecution: taskExecution,
                                                     isSelected: selectedTaskId === task.id,
-                                                    contextMenuItems: menuItems,
                                                     onTaskClick: handleTaskClick,
                                                     onTaskPlay: onTaskPlay,
                                                     ...(onTaskGroupModification || onReplaceTaskFromToolbox) && {
-                                                        onMenuOpen: ()=>{
-                                                            taskStateReference.current = {
-                                                                isParallel: false,
-                                                                groupIndex,
-                                                                taskIndex
-                                                            };
-                                                        }
+                                                        getContextMenuItems: ()=>getAdhocContextMenuItems(groupIndex, taskIndex, task.id)
                                                     }
                                                 }, task.id);
                                             })
@@ -757,7 +728,7 @@ const StageNodeComponent = (props)=>{
         ]
     });
 };
-const StageNode = /*#__PURE__*/ (0, external_react_namespaceObject.memo)(StageNodeComponent);
+const StageNode = /*#__PURE__*/ (0, external_react_namespaceObject.memo)(StageNodeInner);
 exports.StageNode = __webpack_exports__.StageNode;
 for(var __rspack_i in __webpack_exports__)if (-1 === [
     "StageNode"

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":"~~AA4DA~~,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;~~AAsyBxD~~,eAAO,MAAM,SAAS,~~8CAnxBa~~,cAAc,~~6CAmxBA~~,CAAC"}
1	+ {"version":3,"file":"StageNode.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/StageNode/StageNode.tsx"],"names":[],"mappings":"AAyDA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AAsvBxD,eAAO,MAAM,SAAS,8CAluBS,cAAc,6CAkuBA,CAAC"}

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

@@ -1,12 +1,11 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { DndContext, DragOverlay, KeyboardSensor, PointerSensor, closestCenter, useSensor, useSensors } from "@dnd-kit/core";
+import { DndContext, KeyboardSensor, PointerSensor, closestCenter, useSensor, useSensors } from "@dnd-kit/core";
 import { SortableContext, sortableKeyboardCoordinates, verticalListSortingStrategy } from "@dnd-kit/sortable";
 import { FontVariantToken, Icon, 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 } 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";
 import { EntryConditionIcon, ExitConditionIcon, ReturnToOriginIcon } from "../../icons/index.js";
 import { GroupModificationType } from "../../utils/GroupModificationUtils.js";
 import { useConnectedHandles } from "../BaseCanvas/ConnectedHandlesContext.js";
@@ -14,14 +13,15 @@ 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 { AdhocTaskItem } from "./AdhocTask.js";
-import { DraggableTask, TaskContent } from "./DraggableTask.js";
-import { INDENTATION_WIDTH, STAGE_CONTENT_INSET, StageAdhocHeaderSection, StageAdhocSection, StageChip, StageContainer, StageContent, StageHeader, StageHeaderChipsRow, StageParallelBracket, StageParallelLabel, StageTask, StageTaskGroup, StageTaskList, StageTitleContainer, StageTitleInput } from "./StageNode.styles.js";
+import { DraggableTask } from "./DraggableTask.js";
+import { INDENTATION_WIDTH, STAGE_CONTENT_INSET, StageAdhocHeaderSection, StageAdhocSection, StageChip, StageContainer, StageContent, StageHeader, StageHeaderChipsRow, StageParallelBracket, StageParallelLabel, StageTaskGroup, StageTaskList, StageTitleContainer, StageTitleInput } from "./StageNode.styles.js";
 import { StageHeaderChipType } from "./StageNode.types.js";
 import { flattenTasks, getProjection, reorderTasks } from "./StageNode.utils.js";
 import { getContextMenuItems, getDivider, getMenuItem } from "./StageNodeTaskUtilities.js";
+import { StageTaskDragOverlay } from "./StageTaskDragOverlay.js";
 const CHIP_ICONS = {
     [StageHeaderChipType.Entry]: /*#__PURE__*/ jsx(EntryConditionIcon, {
         w: Icon.IconXs,
@@ -44,7 +44,7 @@ const CHIP_ICONS = {
         size: Icon.IconXs
     })
 };
-const StageNodeComponent = (props)=>{
+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, hideParallelOptions } = props;
     const taskWidth = width ? width - STAGE_CONTENT_INSET : void 0;
     const allTasks = useMemo(()=>stageDetails?.tasks || [], [
@@ -74,9 +74,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);
@@ -93,6 +90,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);
@@ -132,7 +130,6 @@ const StageNodeComponent = (props)=>{
         tasks,
         activeDragId
     ]);
-    const { zoom } = useViewport();
     const projected = useMemo(()=>{
         if (!activeDragId || !overId) return null;
         return getProjection(tasks, activeDragId, overId, offsetLeft);
@@ -215,18 +212,26 @@ 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;
+                taskStateReference.current = {
+                    isParallel,
+                    groupIndex,
+                    taskIndex
+                };
+                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, hideParallelOptions);
+            const reGroupOptions = getContextMenuItems(isParallel, groupIndex, tasks.length, taskIndex, taskGroup.length, (tasks[groupIndex - 1]?.length ?? 0) > 1, (tasks[groupIndex + 1]?.length ?? 0) > 1, onTaskGroupModification, hideParallelOptions);
             return [
                 ...items,
                 ...reGroupOptions
@@ -237,7 +242,6 @@ const StageNodeComponent = (props)=>{
         onReplaceTaskFromToolbox,
         onTaskClick,
         onTaskGroupModification,
-        reGroupTaskFunction,
         tasks,
         hideParallelOptions
     ]);
@@ -254,16 +258,15 @@ const StageNodeComponent = (props)=>{
         }));
         if (onTaskGroupModification) {
             if (items.length > 0) items.push(getDivider());
-            items.push(getMenuItem('remove-task', 'Delete task', ()=>reGroupTaskFunction(GroupModificationType.REMOVE_TASK, groupIndex, taskIndex)));
+            items.push(getMenuItem('remove-task', 'Delete task', ()=>onTaskGroupModification(GroupModificationType.REMOVE_TASK, groupIndex, taskIndex)));
         }
         return items;
     }, [
         onReplaceTaskFromToolbox,
         onTaskClick,
-        onTaskGroupModification,
-        reGroupTaskFunction
+        onTaskGroupModification
     ]);
-    const { setSelectedNodeId } = useNodeSelection();
+    const { setSelectedNodeId } = useSetNodeSelection();
     const handleStageClick = useCallback(()=>{
         onStageClick?.();
     }, [
@@ -386,9 +389,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);
@@ -424,12 +427,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: {
@@ -612,19 +609,13 @@ 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),
+                                                                            groupIndex: groupIndex,
+                                                                            taskIndex: taskIndex,
                                                                             onTaskClick: handleTaskClick,
                                                                             projectedDepth: task.id === activeDragId && projected ? projected.depth : void 0,
                                                                             isDragDisabled: !onTaskReorder,
-                                                                            zoom: zoom,
-                                                                            ...(onTaskGroupModification || onReplaceTaskFromToolbox) && {
-                                                                                onMenuOpen: ()=>{
-                                                                                    taskStateReference.current = {
-                                                                                        isParallel,
-                                                                                        groupIndex,
-                                                                                        taskIndex
-                                                                                    };
-                                                                                }
+                                                                            ...hasContextMenu && {
+                                                                                getContextMenuItems: buildContextMenuItems
                                                                             }
                                                                         }, task.id);
                                                                     })
@@ -635,23 +626,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(StageTaskDragOverlay, {
+                                            activeTask: activeTask,
+                                            isActiveTaskParallel: isActiveTaskParallel,
+                                            taskWidthStyle: taskWidthStyle
+                                        })
                                     ]
                                 }),
                                 adhocTasks.length > 0 && /*#__PURE__*/ jsxs(StageAdhocSection, {
@@ -669,22 +648,14 @@ const StageNodeComponent = (props)=>{
                                         /*#__PURE__*/ jsx(StageTaskList, {
                                             children: adhocTasks.map(({ task, groupIndex, taskIndex })=>{
                                                 const taskExecution = execution?.taskStatus?.[task.id];
-                                                const menuItems = getAdhocContextMenuItems(groupIndex, taskIndex, task.id);
                                                 return /*#__PURE__*/ jsx(AdhocTaskItem, {
                                                     task: task,
                                                     taskExecution: taskExecution,
                                                     isSelected: selectedTaskId === task.id,
-                                                    contextMenuItems: menuItems,
                                                     onTaskClick: handleTaskClick,
                                                     onTaskPlay: onTaskPlay,
                                                     ...(onTaskGroupModification || onReplaceTaskFromToolbox) && {
-                                                        onMenuOpen: ()=>{
-                                                            taskStateReference.current = {
-                                                                isParallel: false,
-                                                                groupIndex,
-                                                                taskIndex
-                                                            };
-                                                        }
+                                                        getContextMenuItems: ()=>getAdhocContextMenuItems(groupIndex, taskIndex, task.id)
                                                     }
                                                 }, task.id);
                                             })
@@ -729,5 +700,5 @@ const StageNodeComponent = (props)=>{
         ]
     });
 };
-const StageNode = /*#__PURE__*/ memo(StageNodeComponent);
+const StageNode = /*#__PURE__*/ memo(StageNodeInner);
 export { StageNode };