npm - @uipath/apollo-react - Versions diffs - 3.64.0-pr431.cb6b0b8 → 3.65.0 - Mend

@uipath/apollo-react 3.64.0-pr431.cb6b0b8 → 3.65.0

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

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

@@ -34,7 +34,7 @@ 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_icons_index_cjs_namespaceObject = require("../../icons/index.cjs");
+const external_react_dom_namespaceObject = require("react-dom");
 const ConnectedHandlesContext_cjs_namespaceObject = require("../BaseCanvas/ConnectedHandlesContext.cjs");
 const useButtonHandles_cjs_namespaceObject = require("../ButtonHandle/useButtonHandles.cjs");
 const external_ExecutionStatusIcon_index_cjs_namespaceObject = require("../ExecutionStatusIcon/index.cjs");
@@ -42,12 +42,12 @@ const external_FloatingCanvasPanel_index_cjs_namespaceObject = require("../Float
 const external_NodeContextMenu_index_cjs_namespaceObject = require("../NodeContextMenu/index.cjs");
 const hooks_index_cjs_namespaceObject = require("../NodePropertiesPanel/hooks/index.cjs");
 const external_Toolbox_index_cjs_namespaceObject = require("../Toolbox/index.cjs");
+const external_icons_index_cjs_namespaceObject = require("../../icons/index.cjs");
 const external_DraggableTask_cjs_namespaceObject = require("./DraggableTask.cjs");
 const external_StageNode_styles_cjs_namespaceObject = require("./StageNode.styles.cjs");
 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,
@@ -70,8 +70,8 @@ const CHIP_ICONS = {
         size: apollo_core_namespaceObject.Icon.IconXs
     })
 };
-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 StageNodeComponent = (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 tasks = (0, external_react_namespaceObject.useMemo)(()=>stageDetails?.tasks || [], [
         stageDetails?.tasks
@@ -90,6 +90,9 @@ const StageNodeInner = (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);
@@ -106,7 +109,6 @@ const StageNodeInner = (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);
@@ -146,6 +148,7 @@ const StageNodeInner = (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);
@@ -228,26 +231,18 @@ const StageNodeInner = (props)=>{
         handleStageTitleClickToSave,
         isStageTitleEditing
     ]);
-    const hasContextMenu = !!(onReplaceTaskFromToolbox || onTaskGroupModification);
-    const buildContextMenuItems = (0, external_react_namespaceObject.useCallback)((groupIndex, taskIndex)=>{
-        const taskGroup = tasks[groupIndex] ?? [];
-        const isParallel = taskGroup.length > 1;
+    const contextMenuItems = (0, external_react_namespaceObject.useCallback)((isParallel, groupIndex, taskIndex, tasksLength, taskGroupLength, isAboveParallel, isBelowParallel)=>{
         const items = [];
         if (onReplaceTaskFromToolbox) {
             items.push((0, external_StageNodeTaskUtilities_cjs_namespaceObject.getMenuItem)('replace-task', 'Replace task', ()=>{
-                taskStateReference.current = {
-                    isParallel,
-                    groupIndex,
-                    taskIndex
-                };
-                const taskId = taskGroup[taskIndex]?.id;
+                const taskId = tasks[groupIndex]?.[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, tasks.length, taskIndex, taskGroup.length, (tasks[groupIndex - 1]?.length ?? 0) > 1, (tasks[groupIndex + 1]?.length ?? 0) > 1, onTaskGroupModification);
+            const reGroupOptions = (0, external_StageNodeTaskUtilities_cjs_namespaceObject.getContextMenuItems)(isParallel, groupIndex, tasksLength, taskIndex, taskGroupLength, isAboveParallel, isBelowParallel, reGroupTaskFunction, hideParallelOptions);
             return [
                 ...items,
                 ...reGroupOptions
@@ -258,9 +253,11 @@ const StageNodeInner = (props)=>{
         onReplaceTaskFromToolbox,
         onTaskClick,
         onTaskGroupModification,
-        tasks
+        reGroupTaskFunction,
+        tasks,
+        hideParallelOptions
     ]);
-    const { setSelectedNodeId } = (0, hooks_index_cjs_namespaceObject.useSetNodeSelection)();
+    const { setSelectedNodeId } = (0, hooks_index_cjs_namespaceObject.useNodeSelection)();
     const handleStageClick = (0, external_react_namespaceObject.useCallback)(()=>{
         onStageClick?.();
     }, [
@@ -383,9 +380,9 @@ const StageNodeInner = (props)=>{
         setActiveDragId(event.active.id);
     }, []);
     const handleDragMove = (0, external_react_namespaceObject.useCallback)((event)=>{
-        setOffsetLeft(event.delta.x / storeApi.getState().transform[2]);
+        setOffsetLeft(event.delta.x / zoom);
     }, [
-        storeApi
+        zoom
     ]);
     const handleDragOver = (0, external_react_namespaceObject.useCallback)((event)=>{
         setOverId(event.over?.id ?? null);
@@ -421,6 +418,12 @@ const StageNodeInner = (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: {
@@ -585,14 +588,20 @@ const StageNodeInner = (props)=>{
                                                                     taskExecution: taskExecution,
                                                                     isSelected: selectedTaskId === task.id,
                                                                     isParallel: isParallel,
-                                                                    groupIndex: groupIndex,
-                                                                    taskIndex: taskIndex,
+                                                                    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,
-                                                                    ...hasContextMenu && {
-                                                                        getContextMenuItems: buildContextMenuItems
+                                                                    zoom: zoom,
+                                                                    ...(onTaskGroupModification || onReplaceTaskFromToolbox) && {
+                                                                        onMenuOpen: ()=>{
+                                                                            taskStateReference.current = {
+                                                                                isParallel,
+                                                                                groupIndex,
+                                                                                taskIndex
+                                                                            };
+                                                                        }
                                                                     }
                                                                 }, task.id);
                                                             })
@@ -603,11 +612,23 @@ const StageNodeInner = (props)=>{
                                         })
                                     })
                                 }),
-                                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_StageTaskDragOverlay_cjs_namespaceObject.StageTaskDragOverlay, {
-                                    activeTask: activeTask,
-                                    isActiveTaskParallel: isActiveTaskParallel,
-                                    taskWidthStyle: taskWidthStyle
-                                })
+                                /*#__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)(index_cjs_namespaceObject.Column, {
                             py: 2,
@@ -661,31 +682,7 @@ const StageNodeInner = (props)=>{
         ]
     });
 };
-const StageNodeInnerMemo = /*#__PURE__*/ (0, external_react_namespaceObject.memo)(StageNodeInner);
-const StageNode = ({ 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 === [
     "StageNode"

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

@@ -1,3 +1,3 @@
 import type { StageNodeProps } from './StageNode.types';
-export declare const StageNode: ({ 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;
+export declare const StageNode: import("react").MemoExoticComponent<(props: 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,~~EAAuB~~,cAAc,EAAE,MAAM,mBAAmB,CAAC;~~AAyqB7E~~,eAAO,MAAM,SAAS,~~GAAI~~,~~4UAuBvB,~~cAAc,~~4CA2BhB~~,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;AA4sBxD,eAAO,MAAM,SAAS,8CA1rBa,cAAc,6CA0rBA,CAAC"}

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

@@ -1,25 +1,25 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import { DndContext, KeyboardSensor, PointerSensor, closestCenter, useSensor, useSensors } from "@dnd-kit/core";
+import { DndContext, DragOverlay, 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, useStoreApi } from "../../xyflow/react.js";
+import { Position, useStore, 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 { EntryConditionIcon, ExitConditionIcon, ReturnToOriginIcon } from "../../icons/index.js";
+import { createPortal } from "react-dom";
 import { useConnectedHandles } from "../BaseCanvas/ConnectedHandlesContext.js";
 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 { useSetNodeSelection } from "../NodePropertiesPanel/hooks/index.js";
+import { useNodeSelection } from "../NodePropertiesPanel/hooks/index.js";
 import { Toolbox } from "../Toolbox/index.js";
-import { DraggableTask } from "./DraggableTask.js";
-import { INDENTATION_WIDTH, STAGE_CONTENT_INSET, StageChip, StageContainer, StageContent, StageHeader, StageHeaderChipsRow, StageParallelBracket, StageParallelLabel, StageTaskGroup, StageTaskList, StageTitleContainer, StageTitleInput } from "./StageNode.styles.js";
+import { EntryConditionIcon, ExitConditionIcon, ReturnToOriginIcon } from "../../icons/index.js";
+import { DraggableTask, TaskContent } from "./DraggableTask.js";
+import { INDENTATION_WIDTH, STAGE_CONTENT_INSET, StageChip, StageContainer, StageContent, StageHeader, StageHeaderChipsRow, StageParallelBracket, StageParallelLabel, StageTask, 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,
@@ -42,8 +42,8 @@ const CHIP_ICONS = {
         size: Icon.IconXs
     })
 };
-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 StageNodeComponent = (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 tasks = useMemo(()=>stageDetails?.tasks || [], [
         stageDetails?.tasks
@@ -62,6 +62,9 @@ const StageNodeInner = (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);
@@ -78,7 +81,6 @@ const StageNodeInner = (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);
@@ -118,6 +120,7 @@ const StageNodeInner = (props)=>{
         tasks,
         activeDragId
     ]);
+    const { zoom } = useViewport();
     const projected = useMemo(()=>{
         if (!activeDragId || !overId) return null;
         return getProjection(tasks, activeDragId, overId, offsetLeft);
@@ -200,26 +203,18 @@ const StageNodeInner = (props)=>{
         handleStageTitleClickToSave,
         isStageTitleEditing
     ]);
-    const hasContextMenu = !!(onReplaceTaskFromToolbox || onTaskGroupModification);
-    const buildContextMenuItems = useCallback((groupIndex, taskIndex)=>{
-        const taskGroup = tasks[groupIndex] ?? [];
-        const isParallel = taskGroup.length > 1;
+    const contextMenuItems = useCallback((isParallel, groupIndex, taskIndex, tasksLength, taskGroupLength, isAboveParallel, isBelowParallel)=>{
         const items = [];
         if (onReplaceTaskFromToolbox) {
             items.push(getMenuItem('replace-task', 'Replace task', ()=>{
-                taskStateReference.current = {
-                    isParallel,
-                    groupIndex,
-                    taskIndex
-                };
-                const taskId = taskGroup[taskIndex]?.id;
+                const taskId = tasks[groupIndex]?.[taskIndex]?.id;
                 if (taskId) onTaskClick?.(taskId);
                 setIsReplacingTask(true);
             }));
             items.push(getDivider());
         }
         if (onTaskGroupModification) {
-            const reGroupOptions = getContextMenuItems(isParallel, groupIndex, tasks.length, taskIndex, taskGroup.length, (tasks[groupIndex - 1]?.length ?? 0) > 1, (tasks[groupIndex + 1]?.length ?? 0) > 1, onTaskGroupModification);
+            const reGroupOptions = getContextMenuItems(isParallel, groupIndex, tasksLength, taskIndex, taskGroupLength, isAboveParallel, isBelowParallel, reGroupTaskFunction, hideParallelOptions);
             return [
                 ...items,
                 ...reGroupOptions
@@ -230,9 +225,11 @@ const StageNodeInner = (props)=>{
         onReplaceTaskFromToolbox,
         onTaskClick,
         onTaskGroupModification,
-        tasks
+        reGroupTaskFunction,
+        tasks,
+        hideParallelOptions
     ]);
-    const { setSelectedNodeId } = useSetNodeSelection();
+    const { setSelectedNodeId } = useNodeSelection();
     const handleStageClick = useCallback(()=>{
         onStageClick?.();
     }, [
@@ -355,9 +352,9 @@ const StageNodeInner = (props)=>{
         setActiveDragId(event.active.id);
     }, []);
     const handleDragMove = useCallback((event)=>{
-        setOffsetLeft(event.delta.x / storeApi.getState().transform[2]);
+        setOffsetLeft(event.delta.x / zoom);
     }, [
-        storeApi
+        zoom
     ]);
     const handleDragOver = useCallback((event)=>{
         setOverId(event.over?.id ?? null);
@@ -393,6 +390,12 @@ const StageNodeInner = (props)=>{
         } : void 0, [
         taskWidth
     ]);
+    const dragOverlayStyle = useMemo(()=>({
+            transform: `scale(${zoom})`,
+            transformOrigin: 'top left'
+        }), [
+        zoom
+    ]);
     return /*#__PURE__*/ jsxs("div", {
         "data-testid": `stage-${id}`,
         style: {
@@ -557,14 +560,20 @@ const StageNodeInner = (props)=>{
                                                                     taskExecution: taskExecution,
                                                                     isSelected: selectedTaskId === task.id,
                                                                     isParallel: isParallel,
-                                                                    groupIndex: groupIndex,
-                                                                    taskIndex: taskIndex,
+                                                                    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,
-                                                                    ...hasContextMenu && {
-                                                                        getContextMenuItems: buildContextMenuItems
+                                                                    zoom: zoom,
+                                                                    ...(onTaskGroupModification || onReplaceTaskFromToolbox) && {
+                                                                        onMenuOpen: ()=>{
+                                                                            taskStateReference.current = {
+                                                                                isParallel,
+                                                                                groupIndex,
+                                                                                taskIndex
+                                                                            };
+                                                                        }
                                                                     }
                                                                 }, task.id);
                                                             })
@@ -575,11 +584,23 @@ const StageNodeInner = (props)=>{
                                         })
                                     })
                                 }),
-                                /*#__PURE__*/ jsx(StageTaskDragOverlay, {
-                                    activeTask: activeTask,
-                                    isActiveTaskParallel: isActiveTaskParallel,
-                                    taskWidthStyle: taskWidthStyle
-                                })
+                                /*#__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(Column, {
                             py: 2,
@@ -633,29 +654,5 @@ const StageNodeInner = (props)=>{
         ]
     });
 };
-const StageNodeInnerMemo = /*#__PURE__*/ memo(StageNodeInner);
-const StageNode = ({ 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 };