@uipath/apollo-react 3.63.0-pr431.b5c8666 → 3.63.0-pr439.3bc6dce

package/dist/canvas/components/NodePropertiesPanel/hooks/index.cjs

@@ -24,7 +24,6 @@ var __webpack_require__ = {};
 var __webpack_exports__ = {};
 __webpack_require__.r(__webpack_exports__);
 __webpack_require__.d(__webpack_exports__, {
-    useSetNodeSelection: ()=>external_useNodeSelection_cjs_namespaceObject.useSetNodeSelection,
     useNodeSelection: ()=>external_useNodeSelection_cjs_namespaceObject.useNodeSelection,
     useNodeConfiguration: ()=>external_useNodeConfiguration_cjs_namespaceObject.useNodeConfiguration
 });
@@ -32,11 +31,9 @@ const external_useNodeConfiguration_cjs_namespaceObject = require("./useNodeConf
 const external_useNodeSelection_cjs_namespaceObject = require("./useNodeSelection.cjs");
 exports.useNodeConfiguration = __webpack_exports__.useNodeConfiguration;
 exports.useNodeSelection = __webpack_exports__.useNodeSelection;
-exports.useSetNodeSelection = __webpack_exports__.useSetNodeSelection;
 for(var __rspack_i in __webpack_exports__)if (-1 === [
     "useNodeConfiguration",
-    "useNodeSelection",
-    "useSetNodeSelection"
+    "useNodeSelection"
 ].indexOf(__rspack_i)) exports[__rspack_i] = __webpack_exports__[__rspack_i];
 Object.defineProperty(exports, '__esModule', {
     value: true

package/dist/canvas/components/NodePropertiesPanel/hooks/index.d.ts

@@ -1,3 +1,3 @@
 export { useNodeConfiguration } from './useNodeConfiguration';
-export { useNodeSelection, useSetNodeSelection } from './useNodeSelection';
+export { useNodeSelection } from './useNodeSelection';
 //# sourceMappingURL=index.d.ts.map

package/dist/canvas/components/NodePropertiesPanel/hooks/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/canvas/components/NodePropertiesPanel/hooks/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AAC9D,OAAO,EAAE,gBAAgB,EAAE,mBAAmB,EAAE,MAAM,oBAAoB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/canvas/components/NodePropertiesPanel/hooks/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AAC9D,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC"}

package/dist/canvas/components/NodePropertiesPanel/hooks/index.js

@@ -1,3 +1,3 @@
 import { useNodeConfiguration } from "./useNodeConfiguration.js";
-import { useNodeSelection, useSetNodeSelection } from "./useNodeSelection.js";
-export { useNodeConfiguration, useNodeSelection, useSetNodeSelection };
+import { useNodeSelection } from "./useNodeSelection.js";
+export { useNodeConfiguration, useNodeSelection };

package/dist/canvas/components/NodePropertiesPanel/hooks/useNodeSelection.cjs

@@ -24,8 +24,7 @@ var __webpack_require__ = {};
 var __webpack_exports__ = {};
 __webpack_require__.r(__webpack_exports__);
 __webpack_require__.d(__webpack_exports__, {
-    useNodeSelection: ()=>useNodeSelection,
-    useSetNodeSelection: ()=>useSetNodeSelection
+    useNodeSelection: ()=>useNodeSelection
 });
 const react_cjs_namespaceObject = require("../../../xyflow/react.cjs");
 const external_react_namespaceObject = require("react");
@@ -41,14 +40,10 @@ function useNodeSelection(nodeId, maintainSelection = true) {
         ])
     });
     (0, external_react_namespaceObject.useEffect)(()=>{
-        if (maintainSelection && selectedNodeId) setNodes((nds)=>nds.map((node)=>{
-                const shouldBeSelected = node.id === selectedNodeId;
-                if (node.selected === shouldBeSelected) return node;
-                return {
+        if (maintainSelection && selectedNodeId) setNodes((nds)=>nds.map((node)=>({
                     ...node,
-                    selected: shouldBeSelected
-                };
-            }));
+                    selected: node.id === selectedNodeId
+                })));
     }, [
         selectedNodeId,
         maintainSelection,
@@ -61,29 +56,9 @@ function useNodeSelection(nodeId, maintainSelection = true) {
         selectedNode
     };
 }
-function useSetNodeSelection() {
-    const { setNodes } = (0, react_cjs_namespaceObject.useReactFlow)();
-    const setSelectedNodeId = (0, external_react_namespaceObject.useCallback)((nodeId)=>{
-        setNodes((nds)=>nds.map((node)=>{
-                const shouldBeSelected = node.id === nodeId;
-                if (node.selected === shouldBeSelected) return node;
-                return {
-                    ...node,
-                    selected: shouldBeSelected
-                };
-            }));
-    }, [
-        setNodes
-    ]);
-    return {
-        setSelectedNodeId
-    };
-}
 exports.useNodeSelection = __webpack_exports__.useNodeSelection;
-exports.useSetNodeSelection = __webpack_exports__.useSetNodeSelection;
 for(var __rspack_i in __webpack_exports__)if (-1 === [
-    "useNodeSelection",
-    "useSetNodeSelection"
+    "useNodeSelection"
 ].indexOf(__rspack_i)) exports[__rspack_i] = __webpack_exports__[__rspack_i];
 Object.defineProperty(exports, '__esModule', {
     value: true

package/dist/canvas/components/NodePropertiesPanel/hooks/useNodeSelection.d.ts

@@ -4,7 +4,4 @@ export declare function useNodeSelection(nodeId?: string, maintainSelection?: bo
     setSelectedNodeId: import("react").Dispatch<import("react").SetStateAction<string | null>>;
     selectedNode: ConfigurableNode | undefined;
 };
-export declare function useSetNodeSelection(): {
-    setSelectedNodeId: (nodeId: string) => void;
-};
 //# sourceMappingURL=useNodeSelection.d.ts.map

package/dist/canvas/components/NodePropertiesPanel/hooks/useNodeSelection.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useNodeSelection.d.ts","sourceRoot":"","sources":["../../../../../src/canvas/components/NodePropertiesPanel/hooks/useNodeSelection.ts"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,8BAA8B,CAAC;AAErE,wBAAgB,gBAAgB,CAAC,MAAM,CAAC,EAAE,MAAM,EAAE,iBAAiB,UAAO;;;;EAyCzE;AAOD,wBAAgB,mBAAmB;gCAItB,MAAM;EAalB"}
+{"version":3,"file":"useNodeSelection.d.ts","sourceRoot":"","sources":["../../../../../src/canvas/components/NodePropertiesPanel/hooks/useNodeSelection.ts"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,8BAA8B,CAAC;AAErE,wBAAgB,gBAAgB,CAAC,MAAM,CAAC,EAAE,MAAM,EAAE,iBAAiB,UAAO;;;;EAwCzE"}

package/dist/canvas/components/NodePropertiesPanel/hooks/useNodeSelection.js

@@ -12,14 +12,10 @@ function useNodeSelection(nodeId, maintainSelection = true) {
         ])
     });
     useEffect(()=>{
-        if (maintainSelection && selectedNodeId) setNodes((nds)=>nds.map((node)=>{
-                const shouldBeSelected = node.id === selectedNodeId;
-                if (node.selected === shouldBeSelected) return node;
-                return {
+        if (maintainSelection && selectedNodeId) setNodes((nds)=>nds.map((node)=>({
                     ...node,
-                    selected: shouldBeSelected
-                };
-            }));
+                    selected: node.id === selectedNodeId
+                })));
     }, [
         selectedNodeId,
         maintainSelection,
@@ -32,22 +28,4 @@ function useNodeSelection(nodeId, maintainSelection = true) {
         selectedNode
     };
 }
-function useSetNodeSelection() {
-    const { setNodes } = useReactFlow();
-    const setSelectedNodeId = useCallback((nodeId)=>{
-        setNodes((nds)=>nds.map((node)=>{
-                const shouldBeSelected = node.id === nodeId;
-                if (node.selected === shouldBeSelected) return node;
-                return {
-                    ...node,
-                    selected: shouldBeSelected
-                };
-            }));
-    }, [
-        setNodes
-    ]);
-    return {
-        setSelectedNodeId
-    };
-}
-export { useNodeSelection, useSetNodeSelection };
+export { useNodeSelection };

package/dist/canvas/components/StageNode/DraggableTask.cjs

@@ -41,7 +41,6 @@ const sortable_namespaceObject = require("@dnd-kit/sortable");
 const utilities_namespaceObject = require("@dnd-kit/utilities");
 const apollo_core_namespaceObject = require("@uipath/apollo-core");
 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_debounce_namespaceObject = require("debounce");
 var external_debounce_default = /*#__PURE__*/ __webpack_require__.n(external_debounce_namespaceObject);
@@ -183,9 +182,8 @@ const TaskContent = /*#__PURE__*/ (0, external_react_namespaceObject.memo)(({ ta
             ]
         })
     }));
-const DraggableTaskComponent = ({ task, taskExecution, isSelected, isParallel, getContextMenuItems, onTaskClick, onMenuOpen, onTaskPlay, isDragDisabled, projectedDepth })=>{
+const DraggableTaskComponent = ({ task, taskExecution, isSelected, isParallel, contextMenuItems, onTaskClick, onMenuOpen, onTaskPlay, isDragDisabled, projectedDepth, zoom = 1 })=>{
     const [isMenuOpen, setIsMenuOpen] = (0, external_react_namespaceObject.useState)(false);
-    const storeApi = (0, react_cjs_namespaceObject.useStoreApi)();
     const taskRef = (0, external_react_namespaceObject.useRef)(null);
     const menuRef = (0, external_react_namespaceObject.useRef)(null);
     const [playLoading, setPlayLoading] = (0, external_react_namespaceObject.useState)(false);
@@ -230,8 +228,8 @@ const DraggableTaskComponent = ({ task, taskExecution, isSelected, isParallel, g
     const style = (0, external_react_namespaceObject.useMemo)(()=>{
         const scaledTransform = transform ? {
             ...transform,
-            x: transform.x / storeApi.getState().transform[2],
-            y: transform.y / storeApi.getState().transform[2]
+            x: transform.x / zoom,
+            y: transform.y / zoom
         } : null;
         let marginLeft;
         if (isDragging && void 0 !== projectedDepth) if (1 !== projectedDepth || isParallel) {
@@ -244,7 +242,7 @@ const DraggableTaskComponent = ({ task, taskExecution, isSelected, isParallel, g
         };
     }, [
         transform,
-        storeApi,
+        zoom,
         transition,
         isDragging,
         projectedDepth,
@@ -268,7 +266,7 @@ const DraggableTaskComponent = ({ task, taskExecution, isSelected, isParallel, g
         isParallel: isParallel,
         isDragEnabled: !isDragDisabled,
         onClick: handleClick,
-        ...getContextMenuItems && {
+        ...contextMenuItems.length > 0 && {
             onContextMenu: handleContextMenu
         },
         children: [
@@ -315,10 +313,10 @@ const DraggableTaskComponent = ({ task, taskExecution, isSelected, isParallel, g
                     })
                 })
             }),
-            getContextMenuItems && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_TaskMenu_cjs_namespaceObject.TaskMenu, {
+            contextMenuItems.length > 0 && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_TaskMenu_cjs_namespaceObject.TaskMenu, {
                 ref: menuRef,
                 taskId: task.id,
-                getContextMenuItems: getContextMenuItems,
+                contextMenuItems: contextMenuItems,
                 onMenuOpenChange: handleMenuOpenChange,
                 onMenuOpen: onMenuOpen,
                 taskRef: taskRef

package/dist/canvas/components/StageNode/DraggableTask.d.ts

@@ -1,4 +1,4 @@
 import type { DraggableTaskProps, TaskContentProps } from './DraggableTask.types';
 export declare const TaskContent: import("react").MemoExoticComponent<({ task, taskExecution, isDragging }: TaskContentProps) => import("react/jsx-runtime").JSX.Element>;
-export declare const DraggableTask: import("react").MemoExoticComponent<({ task, taskExecution, isSelected, isParallel, getContextMenuItems, onTaskClick, onMenuOpen, onTaskPlay, isDragDisabled, projectedDepth, }: DraggableTaskProps) => import("react/jsx-runtime").JSX.Element>;
+export declare const DraggableTask: import("react").MemoExoticComponent<({ task, taskExecution, isSelected, isParallel, contextMenuItems, onTaskClick, onMenuOpen, onTaskPlay, isDragDisabled, projectedDepth, zoom, }: DraggableTaskProps) => import("react/jsx-runtime").JSX.Element>;
 //# sourceMappingURL=DraggableTask.d.ts.map

package/dist/canvas/components/StageNode/DraggableTask.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DraggableTask.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/StageNode/DraggableTask.tsx"],"names":[],"mappings":"AAkBA,OAAO,KAAK,EAAE,kBAAkB,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AAgClF,eAAO,MAAM,WAAW,4EAA8C,gBAAgB,6CAwEpF,CAAC;AAqLH,eAAO,MAAM,aAAa,mLAxKvB,kBAAkB,6CAwKoC,CAAC"}
+{"version":3,"file":"DraggableTask.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/StageNode/DraggableTask.tsx"],"names":[],"mappings":"AAiBA,OAAO,KAAK,EAAE,kBAAkB,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AAgClF,eAAO,MAAM,WAAW,4EAA8C,gBAAgB,6CAwEpF,CAAC;AAqLH,eAAO,MAAM,aAAa,sLAvKvB,kBAAkB,6CAuKoC,CAAC"}

package/dist/canvas/components/StageNode/DraggableTask.js

@@ -3,7 +3,6 @@ import { useSortable } from "@dnd-kit/sortable";
 import { CSS } from "@dnd-kit/utilities";
 import { FontVariantToken, Padding, Spacing } from "@uipath/apollo-core";
 import { Column, Row } from "../../layouts/index.js";
-import { useStoreApi } from "../../xyflow/react.js";
 import { ApBadge, ApCircularProgress, ApIconButton, ApTooltip, ApTypography, BadgeSize } from "../../../material/index.js";
 import debounce from "debounce";
 import { memo, useCallback, useMemo, useRef, useState } from "react";
@@ -144,9 +143,8 @@ const TaskContent = /*#__PURE__*/ memo(({ task, taskExecution, isDragging })=>/*
             ]
         })
     }));
-const DraggableTaskComponent = ({ task, taskExecution, isSelected, isParallel, getContextMenuItems, onTaskClick, onMenuOpen, onTaskPlay, isDragDisabled, projectedDepth })=>{
+const DraggableTaskComponent = ({ task, taskExecution, isSelected, isParallel, contextMenuItems, onTaskClick, onMenuOpen, onTaskPlay, isDragDisabled, projectedDepth, zoom = 1 })=>{
     const [isMenuOpen, setIsMenuOpen] = useState(false);
-    const storeApi = useStoreApi();
     const taskRef = useRef(null);
     const menuRef = useRef(null);
     const [playLoading, setPlayLoading] = useState(false);
@@ -191,8 +189,8 @@ const DraggableTaskComponent = ({ task, taskExecution, isSelected, isParallel, g
     const style = useMemo(()=>{
         const scaledTransform = transform ? {
             ...transform,
-            x: transform.x / storeApi.getState().transform[2],
-            y: transform.y / storeApi.getState().transform[2]
+            x: transform.x / zoom,
+            y: transform.y / zoom
         } : null;
         let marginLeft;
         if (isDragging && void 0 !== projectedDepth) if (1 !== projectedDepth || isParallel) {
@@ -205,7 +203,7 @@ const DraggableTaskComponent = ({ task, taskExecution, isSelected, isParallel, g
         };
     }, [
         transform,
-        storeApi,
+        zoom,
         transition,
         isDragging,
         projectedDepth,
@@ -229,7 +227,7 @@ const DraggableTaskComponent = ({ task, taskExecution, isSelected, isParallel, g
         isParallel: isParallel,
         isDragEnabled: !isDragDisabled,
         onClick: handleClick,
-        ...getContextMenuItems && {
+        ...contextMenuItems.length > 0 && {
             onContextMenu: handleContextMenu
         },
         children: [
@@ -276,10 +274,10 @@ const DraggableTaskComponent = ({ task, taskExecution, isSelected, isParallel, g
                     })
                 })
             }),
-            getContextMenuItems && /*#__PURE__*/ jsx(TaskMenu, {
+            contextMenuItems.length > 0 && /*#__PURE__*/ jsx(TaskMenu, {
                 ref: menuRef,
                 taskId: task.id,
-                getContextMenuItems: getContextMenuItems,
+                contextMenuItems: contextMenuItems,
                 onMenuOpenChange: handleMenuOpenChange,
                 onMenuOpen: onMenuOpen,
                 taskRef: taskRef

package/dist/canvas/components/StageNode/DraggableTask.types.d.ts

@@ -10,11 +10,12 @@ export interface DraggableTaskProps {
     taskExecution?: StageTaskExecution;
     isSelected: boolean;
     isParallel: boolean;
-    getContextMenuItems?: () => NodeMenuItem[];
+    contextMenuItems: NodeMenuItem[];
     onTaskClick: (e: React.MouseEvent, taskId: string) => void;
     onMenuOpen?: () => void;
     onTaskPlay?: (taskId: string) => Promise<void>;
     isDragDisabled?: boolean;
     projectedDepth?: number;
+    zoom?: number;
 }
 //# sourceMappingURL=DraggableTask.types.d.ts.map

package/dist/canvas/components/StageNode/DraggableTask.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DraggableTask.types.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/StageNode/DraggableTask.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AACvD,OAAO,KAAK,EAAE,kBAAkB,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAE3E,MAAM,WAAW,gBAAgB;IAC/B,IAAI,EAAE,aAAa,CAAC;IACpB,aAAa,CAAC,EAAE,kBAAkB,CAAC;IACnC,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,MAAM,WAAW,kBAAkB;IACjC,IAAI,EAAE,aAAa,CAAC;IACpB,aAAa,CAAC,EAAE,kBAAkB,CAAC;IACnC,UAAU,EAAE,OAAO,CAAC;IACpB,UAAU,EAAE,OAAO,CAAC;IACpB,mBAAmB,CAAC,EAAE,MAAM,YAAY,EAAE,CAAC;IAC3C,WAAW,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,EAAE,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IAC3D,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;IACxB,UAAU,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IAC/C,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB"}
+{"version":3,"file":"DraggableTask.types.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/StageNode/DraggableTask.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AACvD,OAAO,KAAK,EAAE,kBAAkB,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAE3E,MAAM,WAAW,gBAAgB;IAC/B,IAAI,EAAE,aAAa,CAAC;IACpB,aAAa,CAAC,EAAE,kBAAkB,CAAC;IACnC,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,MAAM,WAAW,kBAAkB;IACjC,IAAI,EAAE,aAAa,CAAC;IACpB,aAAa,CAAC,EAAE,kBAAkB,CAAC;IACnC,UAAU,EAAE,OAAO,CAAC;IACpB,UAAU,EAAE,OAAO,CAAC;IACpB,gBAAgB,EAAE,YAAY,EAAE,CAAC;IACjC,WAAW,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,EAAE,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IAC3D,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;IACxB,UAAU,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IAC/C,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,IAAI,CAAC,EAAE,MAAM,CAAC;CACf"}

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

@@ -85,7 +85,6 @@ 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);
@@ -125,6 +124,7 @@ 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,8 +207,7 @@ const StageNodeComponent = (props)=>{
         handleStageTitleClickToSave,
         isStageTitleEditing
     ]);
-    const hasContextMenu = !!(onReplaceTaskFromToolbox || onTaskGroupModification);
-    const buildContextMenuItems = (0, external_react_namespaceObject.useCallback)((isParallel, groupIndex, taskIndex)=>{
+    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', ()=>{
@@ -219,8 +218,7 @@ const StageNodeComponent = (props)=>{
             items.push((0, external_StageNodeTaskUtilities_cjs_namespaceObject.getDivider)());
         }
         if (onTaskGroupModification) {
-            const taskGroup = tasks[groupIndex] ?? [];
-            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, reGroupTaskFunction);
+            const reGroupOptions = (0, external_StageNodeTaskUtilities_cjs_namespaceObject.getContextMenuItems)(isParallel, groupIndex, tasksLength, taskIndex, taskGroupLength, isAboveParallel, isBelowParallel, reGroupTaskFunction);
             return [
                 ...items,
                 ...reGroupOptions
@@ -234,7 +232,7 @@ const StageNodeComponent = (props)=>{
         reGroupTaskFunction,
         tasks
     ]);
-    const { setSelectedNodeId } = (0, hooks_index_cjs_namespaceObject.useSetNodeSelection)();
+    const { setSelectedNodeId } = (0, hooks_index_cjs_namespaceObject.useNodeSelection)();
     const handleStageClick = (0, external_react_namespaceObject.useCallback)(()=>{
         onStageClick?.();
     }, [
@@ -357,9 +355,9 @@ const StageNodeComponent = (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);
@@ -396,10 +394,10 @@ const StageNodeComponent = (props)=>{
         taskWidth
     ]);
     const dragOverlayStyle = (0, external_react_namespaceObject.useMemo)(()=>({
-            transform: `scale(${storeApi.getState().transform[2]})`,
+            transform: `scale(${zoom})`,
             transformOrigin: 'top left'
         }), [
-        storeApi.getState
+        zoom
     ]);
     return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
         "data-testid": `stage-${id}`,
@@ -540,12 +538,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),
                                                                     onTaskClick: handleTaskClick,
                                                                     projectedDepth: task.id === activeDragId && projected ? projected.depth : void 0,
                                                                     onTaskPlay: onTaskPlay,
                                                                     isDragDisabled: !onTaskReorder,
-                                                                    ...hasContextMenu && {
-                                                                        getContextMenuItems: ()=>buildContextMenuItems(isParallel, groupIndex, taskIndex),
+                                                                    zoom: zoom,
+                                                                    ...(onTaskGroupModification || onReplaceTaskFromToolbox) && {
                                                                         onMenuOpen: ()=>{
                                                                             taskStateReference.current = {
                                                                                 isParallel,

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

@@ -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;AA6oBxD,eAAO,MAAM,SAAS,8CAnoBa,cAAc,6CAmoBA,CAAC"}
+{"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;AA2pBxD,eAAO,MAAM,SAAS,8CAjpBa,cAAc,6CAipBA,CAAC"}

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

@@ -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, 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 { createPortal } from "react-dom";
@@ -12,7 +12,7 @@ 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, TaskContent } from "./DraggableTask.js";
 import { INDENTATION_WIDTH, STAGE_CONTENT_INSET, StageContainer, StageContent, StageHeader, StageParallelBracket, StageParallelLabel, StageTask, StageTaskGroup, StageTaskList, StageTitleContainer, StageTitleInput } from "./StageNode.styles.js";
@@ -57,7 +57,6 @@ 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);
@@ -97,6 +96,7 @@ const StageNodeComponent = (props)=>{
         tasks,
         activeDragId
     ]);
+    const { zoom } = useViewport();
     const projected = useMemo(()=>{
         if (!activeDragId || !overId) return null;
         return getProjection(tasks, activeDragId, overId, offsetLeft);
@@ -179,8 +179,7 @@ const StageNodeComponent = (props)=>{
         handleStageTitleClickToSave,
         isStageTitleEditing
     ]);
-    const hasContextMenu = !!(onReplaceTaskFromToolbox || onTaskGroupModification);
-    const buildContextMenuItems = useCallback((isParallel, groupIndex, taskIndex)=>{
+    const contextMenuItems = useCallback((isParallel, groupIndex, taskIndex, tasksLength, taskGroupLength, isAboveParallel, isBelowParallel)=>{
         const items = [];
         if (onReplaceTaskFromToolbox) {
             items.push(getMenuItem('replace-task', 'Replace task', ()=>{
@@ -191,8 +190,7 @@ const StageNodeComponent = (props)=>{
             items.push(getDivider());
         }
         if (onTaskGroupModification) {
-            const taskGroup = tasks[groupIndex] ?? [];
-            const reGroupOptions = getContextMenuItems(isParallel, groupIndex, tasks.length, taskIndex, taskGroup.length, (tasks[groupIndex - 1]?.length ?? 0) > 1, (tasks[groupIndex + 1]?.length ?? 0) > 1, reGroupTaskFunction);
+            const reGroupOptions = getContextMenuItems(isParallel, groupIndex, tasksLength, taskIndex, taskGroupLength, isAboveParallel, isBelowParallel, reGroupTaskFunction);
             return [
                 ...items,
                 ...reGroupOptions
@@ -206,7 +204,7 @@ const StageNodeComponent = (props)=>{
         reGroupTaskFunction,
         tasks
     ]);
-    const { setSelectedNodeId } = useSetNodeSelection();
+    const { setSelectedNodeId } = useNodeSelection();
     const handleStageClick = useCallback(()=>{
         onStageClick?.();
     }, [
@@ -329,9 +327,9 @@ const StageNodeComponent = (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);
@@ -368,10 +366,10 @@ const StageNodeComponent = (props)=>{
         taskWidth
     ]);
     const dragOverlayStyle = useMemo(()=>({
-            transform: `scale(${storeApi.getState().transform[2]})`,
+            transform: `scale(${zoom})`,
             transformOrigin: 'top left'
         }), [
-        storeApi.getState
+        zoom
     ]);
     return /*#__PURE__*/ jsxs("div", {
         "data-testid": `stage-${id}`,
@@ -512,12 +510,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),
                                                                     onTaskClick: handleTaskClick,
                                                                     projectedDepth: task.id === activeDragId && projected ? projected.depth : void 0,
                                                                     onTaskPlay: onTaskPlay,
                                                                     isDragDisabled: !onTaskReorder,
-                                                                    ...hasContextMenu && {
-                                                                        getContextMenuItems: ()=>buildContextMenuItems(isParallel, groupIndex, taskIndex),
+                                                                    zoom: zoom,
+                                                                    ...(onTaskGroupModification || onReplaceTaskFromToolbox) && {
                                                                         onMenuOpen: ()=>{
                                                                             taskStateReference.current = {
                                                                                 isParallel,