@uipath/apollo-react 3.68.2 → 3.68.3-pr431.42f9a1c

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

@@ -24,6 +24,7 @@ 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
 });
@@ -31,9 +32,11 @@ 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"
+    "useNodeSelection",
+    "useSetNodeSelection"
 ].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 } from './useNodeSelection';
+export { useNodeSelection, useSetNodeSelection } 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,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,mBAAmB,EAAE,MAAM,oBAAoB,CAAC"}

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

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

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

@@ -24,10 +24,21 @@ var __webpack_require__ = {};
 var __webpack_exports__ = {};
 __webpack_require__.r(__webpack_exports__);
 __webpack_require__.d(__webpack_exports__, {
-    useNodeSelection: ()=>useNodeSelection
+    useNodeSelection: ()=>useNodeSelection,
+    useSetNodeSelection: ()=>useSetNodeSelection
 });
 const react_cjs_namespaceObject = require("../../../xyflow/react.cjs");
 const external_react_namespaceObject = require("react");
+function applySelection(nodes, nodeId) {
+    return nodes.map((node)=>{
+        const shouldBeSelected = node.id === nodeId;
+        if (node.selected === shouldBeSelected) return node;
+        return {
+            ...node,
+            selected: shouldBeSelected
+        };
+    });
+}
 function useNodeSelection(nodeId, maintainSelection = true) {
     const nodes = (0, react_cjs_namespaceObject.useNodes)();
     const { setNodes } = (0, react_cjs_namespaceObject.useReactFlow)();
@@ -40,10 +51,7 @@ function useNodeSelection(nodeId, maintainSelection = true) {
         ])
     });
     (0, external_react_namespaceObject.useEffect)(()=>{
-        if (maintainSelection && selectedNodeId) setNodes((nds)=>nds.map((node)=>({
-                    ...node,
-                    selected: node.id === selectedNodeId
-                })));
+        if (maintainSelection && selectedNodeId) setNodes((nds)=>applySelection(nds, selectedNodeId));
     }, [
         selectedNodeId,
         maintainSelection,
@@ -56,9 +64,22 @@ 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)=>applySelection(nds, nodeId));
+    }, [
+        setNodes
+    ]);
+    return {
+        setSelectedNodeId
+    };
+}
 exports.useNodeSelection = __webpack_exports__.useNodeSelection;
+exports.useSetNodeSelection = __webpack_exports__.useSetNodeSelection;
 for(var __rspack_i in __webpack_exports__)if (-1 === [
-    "useNodeSelection"
+    "useNodeSelection",
+    "useSetNodeSelection"
 ].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,4 +4,7 @@ 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;;;;EAwCzE"}
+{"version":3,"file":"useNodeSelection.d.ts","sourceRoot":"","sources":["../../../../../src/canvas/components/NodePropertiesPanel/hooks/useNodeSelection.ts"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,8BAA8B,CAAC;AAUrE,wBAAgB,gBAAgB,CAAC,MAAM,CAAC,EAAE,MAAM,EAAE,iBAAiB,UAAO;;;;EAmCzE;AAOD,wBAAgB,mBAAmB;gCAItB,MAAM;EAOlB"}

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

@@ -1,5 +1,15 @@
 import { useNodes, useOnSelectionChange, useReactFlow } from "../../../xyflow/react.js";
 import { useCallback, useEffect, useState } from "react";
+function applySelection(nodes, nodeId) {
+    return nodes.map((node)=>{
+        const shouldBeSelected = node.id === nodeId;
+        if (node.selected === shouldBeSelected) return node;
+        return {
+            ...node,
+            selected: shouldBeSelected
+        };
+    });
+}
 function useNodeSelection(nodeId, maintainSelection = true) {
     const nodes = useNodes();
     const { setNodes } = useReactFlow();
@@ -12,10 +22,7 @@ function useNodeSelection(nodeId, maintainSelection = true) {
         ])
     });
     useEffect(()=>{
-        if (maintainSelection && selectedNodeId) setNodes((nds)=>nds.map((node)=>({
-                    ...node,
-                    selected: node.id === selectedNodeId
-                })));
+        if (maintainSelection && selectedNodeId) setNodes((nds)=>applySelection(nds, selectedNodeId));
     }, [
         selectedNodeId,
         maintainSelection,
@@ -28,4 +35,15 @@ function useNodeSelection(nodeId, maintainSelection = true) {
         selectedNode
     };
 }
-export { useNodeSelection };
+function useSetNodeSelection() {
+    const { setNodes } = useReactFlow();
+    const setSelectedNodeId = useCallback((nodeId)=>{
+        setNodes((nds)=>applySelection(nds, nodeId));
+    }, [
+        setNodes
+    ]);
+    return {
+        setSelectedNodeId
+    };
+}
+export { useNodeSelection, useSetNodeSelection };

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

@@ -0,0 +1,148 @@
+"use strict";
+var __webpack_require__ = {};
+(()=>{
+    __webpack_require__.n = (module)=>{
+        var getter = module && module.__esModule ? ()=>module['default'] : ()=>module;
+        __webpack_require__.d(getter, {
+            a: getter
+        });
+        return getter;
+    };
+})();
+(()=>{
+    __webpack_require__.d = (exports1, definition)=>{
+        for(var key in definition)if (__webpack_require__.o(definition, key) && !__webpack_require__.o(exports1, key)) Object.defineProperty(exports1, key, {
+            enumerable: true,
+            get: definition[key]
+        });
+    };
+})();
+(()=>{
+    __webpack_require__.o = (obj, prop)=>Object.prototype.hasOwnProperty.call(obj, prop);
+})();
+(()=>{
+    __webpack_require__.r = (exports1)=>{
+        if ("u" > typeof Symbol && Symbol.toStringTag) Object.defineProperty(exports1, Symbol.toStringTag, {
+            value: 'Module'
+        });
+        Object.defineProperty(exports1, '__esModule', {
+            value: true
+        });
+    };
+})();
+var __webpack_exports__ = {};
+__webpack_require__.r(__webpack_exports__);
+__webpack_require__.d(__webpack_exports__, {
+    AdhocTaskItem: ()=>AdhocTaskItem
+});
+const jsx_runtime_namespaceObject = require("react/jsx-runtime");
+const apollo_core_namespaceObject = require("@uipath/apollo-core");
+const index_cjs_namespaceObject = require("../../../material/index.cjs");
+const external_debounce_namespaceObject = require("debounce");
+var external_debounce_default = /*#__PURE__*/ __webpack_require__.n(external_debounce_namespaceObject);
+const external_react_namespaceObject = require("react");
+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_TaskMenu_cjs_namespaceObject = require("./TaskMenu.cjs");
+const AdhocTaskPlayButton = /*#__PURE__*/ (0, external_react_namespaceObject.memo)(({ taskId, onTaskPlay })=>{
+    const [playLoading, setPlayLoading] = (0, external_react_namespaceObject.useState)(false);
+    const debouncedTaskPlay = (0, external_react_namespaceObject.useMemo)(()=>external_debounce_default()(async (id)=>{
+            setPlayLoading(true);
+            try {
+                await onTaskPlay(id);
+            } catch  {} finally{
+                setPlayLoading(false);
+            }
+        }, 500, {
+            immediate: true
+        }), [
+        onTaskPlay
+    ]);
+    const handlePlayClick = (0, external_react_namespaceObject.useCallback)((e)=>{
+        e.stopPropagation();
+        e.preventDefault();
+        debouncedTaskPlay(taskId);
+    }, [
+        debouncedTaskPlay,
+        taskId
+    ]);
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(index_cjs_namespaceObject.ApTooltip, {
+        content: "Trigger task",
+        placement: "top",
+        children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(index_cjs_namespaceObject.ApIconButton, {
+            "data-testid": `stage-task-play-${taskId}`,
+            onClick: handlePlayClick,
+            onMouseDown: (e)=>e.stopPropagation(),
+            onKeyDown: (e)=>e.stopPropagation(),
+            className: "task-menu-icon-button",
+            sx: {
+                color: 'var(--uix-canvas-primary) !important',
+                minWidth: 'unset !important',
+                width: `${apollo_core_namespaceObject.Spacing.SpacingL} !important`,
+                height: `${apollo_core_namespaceObject.Spacing.SpacingL} !important`,
+                padding: '0 !important'
+            },
+            children: playLoading ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(index_cjs_namespaceObject.ApCircularProgress, {
+                size: 20
+            }) : /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_icons_index_cjs_namespaceObject.PlayIcon, {
+                w: 20,
+                h: 20
+            })
+        })
+    });
+});
+const AdhocTaskItemComponent = ({ task, taskExecution, isSelected, getContextMenuItems, onTaskClick, onTaskPlay })=>{
+    const [isMenuOpen, setIsMenuOpen] = (0, external_react_namespaceObject.useState)(false);
+    const taskRef = (0, external_react_namespaceObject.useRef)(null);
+    const menuRef = (0, external_react_namespaceObject.useRef)(null);
+    const handleClick = (0, external_react_namespaceObject.useCallback)((e)=>{
+        if (isMenuOpen) return;
+        onTaskClick(e, task.id);
+    }, [
+        isMenuOpen,
+        onTaskClick,
+        task.id
+    ]);
+    const handleMenuOpenChange = (0, external_react_namespaceObject.useCallback)((isOpen)=>{
+        setIsMenuOpen(isOpen);
+    }, []);
+    const handleContextMenu = (0, external_react_namespaceObject.useCallback)((e)=>{
+        menuRef.current?.handleContextMenu(e);
+    }, []);
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(external_StageNode_styles_cjs_namespaceObject.StageTask, {
+        ref: taskRef,
+        "data-testid": `stage-task-${task.id}`,
+        selected: isSelected,
+        status: taskExecution?.status,
+        onClick: handleClick,
+        ...getContextMenuItems && {
+            onContextMenu: handleContextMenu
+        },
+        children: [
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_DraggableTask_cjs_namespaceObject.TaskContent, {
+                task: task,
+                taskExecution: taskExecution
+            }),
+            onTaskPlay && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(AdhocTaskPlayButton, {
+                taskId: task.id,
+                onTaskPlay: onTaskPlay
+            }),
+            getContextMenuItems && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_TaskMenu_cjs_namespaceObject.TaskMenu, {
+                ref: menuRef,
+                taskId: task.id,
+                getContextMenuItems: getContextMenuItems,
+                onMenuOpenChange: handleMenuOpenChange,
+                taskRef: taskRef
+            })
+        ]
+    });
+};
+const AdhocTaskItem = /*#__PURE__*/ (0, external_react_namespaceObject.memo)(AdhocTaskItemComponent);
+exports.AdhocTaskItem = __webpack_exports__.AdhocTaskItem;
+for(var __rspack_i in __webpack_exports__)if (-1 === [
+    "AdhocTaskItem"
+].indexOf(__rspack_i)) exports[__rspack_i] = __webpack_exports__[__rspack_i];
+Object.defineProperty(exports, '__esModule', {
+    value: true
+});

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

@@ -0,0 +1,13 @@
+import type { NodeMenuItem } from '../NodeContextMenu';
+import type { StageTaskExecution, StageTaskItem } from './StageNode.types';
+interface AdhocTaskItemProps {
+    task: StageTaskItem;
+    taskExecution?: StageTaskExecution;
+    isSelected: boolean;
+    getContextMenuItems?: () => NodeMenuItem[];
+    onTaskClick: (e: React.MouseEvent, taskId: string) => void;
+    onTaskPlay?: (taskId: string) => Promise<void>;
+}
+export declare const AdhocTaskItem: import("react").MemoExoticComponent<({ task, taskExecution, isSelected, getContextMenuItems, onTaskClick, onTaskPlay, }: AdhocTaskItemProps) => import("react/jsx-runtime").JSX.Element>;
+export {};
+//# sourceMappingURL=AdhocTask.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AdhocTask.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/StageNode/AdhocTask.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAGvD,OAAO,KAAK,EAAE,kBAAkB,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AA0D3E,UAAU,kBAAkB;IAC1B,IAAI,EAAE,aAAa,CAAC;IACpB,aAAa,CAAC,EAAE,kBAAkB,CAAC;IACnC,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,CAAC,MAAM,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;CAChD;AAsDD,eAAO,MAAM,aAAa,2HA7CvB,kBAAkB,6CA6CoC,CAAC"}

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

@@ -0,0 +1,104 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Spacing } from "@uipath/apollo-core";
+import { ApCircularProgress, ApIconButton, ApTooltip } from "../../../material/index.js";
+import debounce from "debounce";
+import { memo, useCallback, useMemo, useRef, useState } from "react";
+import { PlayIcon } from "../../icons/index.js";
+import { TaskContent } from "./DraggableTask.js";
+import { StageTask } from "./StageNode.styles.js";
+import { TaskMenu } from "./TaskMenu.js";
+const AdhocTaskPlayButton = /*#__PURE__*/ memo(({ taskId, onTaskPlay })=>{
+    const [playLoading, setPlayLoading] = useState(false);
+    const debouncedTaskPlay = useMemo(()=>debounce(async (id)=>{
+            setPlayLoading(true);
+            try {
+                await onTaskPlay(id);
+            } catch  {} finally{
+                setPlayLoading(false);
+            }
+        }, 500, {
+            immediate: true
+        }), [
+        onTaskPlay
+    ]);
+    const handlePlayClick = useCallback((e)=>{
+        e.stopPropagation();
+        e.preventDefault();
+        debouncedTaskPlay(taskId);
+    }, [
+        debouncedTaskPlay,
+        taskId
+    ]);
+    return /*#__PURE__*/ jsx(ApTooltip, {
+        content: "Trigger task",
+        placement: "top",
+        children: /*#__PURE__*/ jsx(ApIconButton, {
+            "data-testid": `stage-task-play-${taskId}`,
+            onClick: handlePlayClick,
+            onMouseDown: (e)=>e.stopPropagation(),
+            onKeyDown: (e)=>e.stopPropagation(),
+            className: "task-menu-icon-button",
+            sx: {
+                color: 'var(--uix-canvas-primary) !important',
+                minWidth: 'unset !important',
+                width: `${Spacing.SpacingL} !important`,
+                height: `${Spacing.SpacingL} !important`,
+                padding: '0 !important'
+            },
+            children: playLoading ? /*#__PURE__*/ jsx(ApCircularProgress, {
+                size: 20
+            }) : /*#__PURE__*/ jsx(PlayIcon, {
+                w: 20,
+                h: 20
+            })
+        })
+    });
+});
+const AdhocTaskItemComponent = ({ task, taskExecution, isSelected, getContextMenuItems, onTaskClick, onTaskPlay })=>{
+    const [isMenuOpen, setIsMenuOpen] = useState(false);
+    const taskRef = useRef(null);
+    const menuRef = useRef(null);
+    const handleClick = useCallback((e)=>{
+        if (isMenuOpen) return;
+        onTaskClick(e, task.id);
+    }, [
+        isMenuOpen,
+        onTaskClick,
+        task.id
+    ]);
+    const handleMenuOpenChange = useCallback((isOpen)=>{
+        setIsMenuOpen(isOpen);
+    }, []);
+    const handleContextMenu = useCallback((e)=>{
+        menuRef.current?.handleContextMenu(e);
+    }, []);
+    return /*#__PURE__*/ jsxs(StageTask, {
+        ref: taskRef,
+        "data-testid": `stage-task-${task.id}`,
+        selected: isSelected,
+        status: taskExecution?.status,
+        onClick: handleClick,
+        ...getContextMenuItems && {
+            onContextMenu: handleContextMenu
+        },
+        children: [
+            /*#__PURE__*/ jsx(TaskContent, {
+                task: task,
+                taskExecution: taskExecution
+            }),
+            onTaskPlay && /*#__PURE__*/ jsx(AdhocTaskPlayButton, {
+                taskId: task.id,
+                onTaskPlay: onTaskPlay
+            }),
+            getContextMenuItems && /*#__PURE__*/ jsx(TaskMenu, {
+                ref: menuRef,
+                taskId: task.id,
+                getContextMenuItems: getContextMenuItems,
+                onMenuOpenChange: handleMenuOpenChange,
+                taskRef: taskRef
+            })
+        ]
+    });
+};
+const AdhocTaskItem = /*#__PURE__*/ memo(AdhocTaskItemComponent);
+export { AdhocTaskItem };

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

@@ -32,6 +32,7 @@ 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_react_namespaceObject = require("react");
 const external_icons_index_cjs_namespaceObject = require("../../icons/index.cjs");
@@ -171,8 +172,9 @@ const TaskContent = /*#__PURE__*/ (0, external_react_namespaceObject.memo)(({ ta
             ]
         })
     }));
-const DraggableTaskComponent = ({ task, taskExecution, isSelected, isParallel, contextMenuItems, onTaskClick, onMenuOpen, isDragDisabled, projectedDepth, zoom = 1 })=>{
+const DraggableTaskComponent = ({ task, taskExecution, isSelected, isParallel, groupIndex, taskIndex, getContextMenuItems, onTaskClick, isDragDisabled, projectedDepth })=>{
     const [isMenuOpen, setIsMenuOpen] = (0, external_react_namespaceObject.useState)(false);
+    const zoom = (0, react_cjs_namespaceObject.useStore)((s)=>s.transform[2]);
     const taskRef = (0, external_react_namespaceObject.useRef)(null);
     const menuRef = (0, external_react_namespaceObject.useRef)(null);
     const handleClick = (0, external_react_namespaceObject.useCallback)((e)=>{
@@ -189,6 +191,14 @@ const DraggableTaskComponent = ({ task, taskExecution, isSelected, isParallel, c
     const handleContextMenu = (0, external_react_namespaceObject.useCallback)((e)=>{
         menuRef.current?.handleContextMenu(e);
     }, []);
+    const handleGetContextMenuItems = (0, external_react_namespaceObject.useCallback)(()=>{
+        if (!getContextMenuItems) return [];
+        return getContextMenuItems(groupIndex, taskIndex);
+    }, [
+        getContextMenuItems,
+        groupIndex,
+        taskIndex
+    ]);
     const { attributes, listeners, setNodeRef, transition, transform, isDragging } = (0, sortable_namespaceObject.useSortable)({
         id: task.id,
         disabled: isDragDisabled
@@ -234,7 +244,7 @@ const DraggableTaskComponent = ({ task, taskExecution, isSelected, isParallel, c
         isParallel: isParallel,
         isDragEnabled: !isDragDisabled,
         onClick: handleClick,
-        ...contextMenuItems.length > 0 && {
+        ...getContextMenuItems && {
             onContextMenu: handleContextMenu
         },
         children: [
@@ -258,12 +268,11 @@ const DraggableTaskComponent = ({ task, taskExecution, isSelected, isParallel, c
                     })
                 })
             }),
-            contextMenuItems.length > 0 && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_TaskMenu_cjs_namespaceObject.TaskMenu, {
+            getContextMenuItems && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_TaskMenu_cjs_namespaceObject.TaskMenu, {
                 ref: menuRef,
                 taskId: task.id,
-                contextMenuItems: contextMenuItems,
+                getContextMenuItems: handleGetContextMenuItems,
                 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, contextMenuItems, onTaskClick, onMenuOpen, isDragDisabled, projectedDepth, zoom, }: DraggableTaskProps) => import("react/jsx-runtime").JSX.Element>;
+export declare const DraggableTask: import("react").MemoExoticComponent<({ task, taskExecution, isSelected, isParallel, groupIndex, taskIndex, getContextMenuItems, onTaskClick, isDragDisabled, projectedDepth, }: 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":"AAeA,OAAO,KAAK,EAAE,kBAAkB,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AAgClF,eAAO,MAAM,WAAW,4EAA8C,gBAAgB,6CAwEpF,CAAC;AAkIH,eAAO,MAAM,aAAa,0KArHvB,kBAAkB,6CAqHoC,CAAC"}
+{"version":3,"file":"DraggableTask.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/StageNode/DraggableTask.tsx"],"names":[],"mappings":"AAgBA,OAAO,KAAK,EAAE,kBAAkB,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AAgClF,eAAO,MAAM,WAAW,4EAA8C,gBAAgB,6CAwEpF,CAAC;AAyIH,eAAO,MAAM,aAAa,kLA5HvB,kBAAkB,6CA4HoC,CAAC"}

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

@@ -3,6 +3,7 @@ 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 { useStore } from "../../xyflow/react.js";
 import { ApBadge, ApIconButton, ApTooltip, ApTypography, BadgeSize } from "../../../material/index.js";
 import { memo, useCallback, useMemo, useRef, useState } from "react";
 import { EntryConditionIcon } from "../../icons/index.js";
@@ -142,8 +143,9 @@ const TaskContent = /*#__PURE__*/ memo(({ task, taskExecution, isDragging })=>/*
             ]
         })
     }));
-const DraggableTaskComponent = ({ task, taskExecution, isSelected, isParallel, contextMenuItems, onTaskClick, onMenuOpen, isDragDisabled, projectedDepth, zoom = 1 })=>{
+const DraggableTaskComponent = ({ task, taskExecution, isSelected, isParallel, groupIndex, taskIndex, getContextMenuItems, onTaskClick, isDragDisabled, projectedDepth })=>{
     const [isMenuOpen, setIsMenuOpen] = useState(false);
+    const zoom = useStore((s)=>s.transform[2]);
     const taskRef = useRef(null);
     const menuRef = useRef(null);
     const handleClick = useCallback((e)=>{
@@ -160,6 +162,14 @@ const DraggableTaskComponent = ({ task, taskExecution, isSelected, isParallel, c
     const handleContextMenu = useCallback((e)=>{
         menuRef.current?.handleContextMenu(e);
     }, []);
+    const handleGetContextMenuItems = useCallback(()=>{
+        if (!getContextMenuItems) return [];
+        return getContextMenuItems(groupIndex, taskIndex);
+    }, [
+        getContextMenuItems,
+        groupIndex,
+        taskIndex
+    ]);
     const { attributes, listeners, setNodeRef, transition, transform, isDragging } = useSortable({
         id: task.id,
         disabled: isDragDisabled
@@ -205,7 +215,7 @@ const DraggableTaskComponent = ({ task, taskExecution, isSelected, isParallel, c
         isParallel: isParallel,
         isDragEnabled: !isDragDisabled,
         onClick: handleClick,
-        ...contextMenuItems.length > 0 && {
+        ...getContextMenuItems && {
             onContextMenu: handleContextMenu
         },
         children: [
@@ -229,12 +239,11 @@ const DraggableTaskComponent = ({ task, taskExecution, isSelected, isParallel, c
                     })
                 })
             }),
-            contextMenuItems.length > 0 && /*#__PURE__*/ jsx(TaskMenu, {
+            getContextMenuItems && /*#__PURE__*/ jsx(TaskMenu, {
                 ref: menuRef,
                 taskId: task.id,
-                contextMenuItems: contextMenuItems,
+                getContextMenuItems: handleGetContextMenuItems,
                 onMenuOpenChange: handleMenuOpenChange,
-                onMenuOpen: onMenuOpen,
                 taskRef: taskRef
             })
         ]

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

@@ -10,12 +10,12 @@ export interface DraggableTaskProps {
     taskExecution?: StageTaskExecution;
     isSelected: boolean;
     isParallel: boolean;
-    contextMenuItems: NodeMenuItem[];
+    groupIndex: number;
+    taskIndex: number;
+    getContextMenuItems?: (groupIndex: number, taskIndex: number) => 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,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"}
+{"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,UAAU,EAAE,MAAM,CAAC;IACnB,SAAS,EAAE,MAAM,CAAC;IAClB,mBAAmB,CAAC,EAAE,CAAC,UAAU,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,KAAK,YAAY,EAAE,CAAC;IAChF,WAAW,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,EAAE,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IAC3D,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"}

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

@@ -40,6 +40,7 @@ const jsx_runtime_namespaceObject = require("react/jsx-runtime");
 const styled_namespaceObject = require("@emotion/styled");
 var styled_default = /*#__PURE__*/ __webpack_require__.n(styled_namespaceObject);
 const react_cjs_namespaceObject = require("../../xyflow/react.cjs");
+const external_react_namespaceObject = require("react");
 const StageEdgeLabel = styled_default().div`
   position: absolute;
   color: var(--uix-canvas-foreground);
@@ -57,6 +58,9 @@ const StageEdgeLabel = styled_default().div`
     border-color: var(--uix-canvas-border-hover);
   }
 `;
+function stageEdgeGeometryEquality(previous, next) {
+    return previous.sourceX === next.sourceX && previous.sourceY === next.sourceY && previous.targetX === next.targetX && previous.targetY === next.targetY;
+}
 function getArrowFromBezier(path, arrowSize) {
     const pathEl = document.createElementNS('http://www.w3.org/2000/svg', 'path');
     pathEl.setAttribute('d', path);
@@ -70,19 +74,13 @@ function getArrowFromBezier(path, arrowSize) {
         angle
     };
 }
-function StageEdge({ sourceX, sourceY, targetX, targetY, sourcePosition, targetPosition, selected, style, stroke = 'var(--uix-canvas-foreground-emp)', strokeWidth = 2, arrowSize = 8, ...rest }) {
-    const sourceNode = (0, react_cjs_namespaceObject.useInternalNode)(rest.source);
-    const targetNode = (0, react_cjs_namespaceObject.useInternalNode)(rest.target);
-    const sourceNodeX = sourceNode ? sourceNode.position.x + (sourceNode.measured?.width ?? 0) : sourceX;
-    const sourceNodeY = sourceNode?.position.y ? sourceNode.position.y + 32 : sourceY;
-    const targetNodeX = targetNode?.position.x ?? targetX;
-    const targetNodeY = targetNode?.position.y ? targetNode.position.y + 32 : targetY;
+function StageEdgeInner({ geometry, sourcePosition, targetPosition, selected, style, stroke = 'var(--uix-canvas-foreground-emp)', strokeWidth = 2, arrowSize = 8, ...rest }) {
     const [pathData, labelX, labelY, _ex, _ey] = (0, react_cjs_namespaceObject.getSmoothStepPath)({
-        sourceX: sourceNodeX,
-        sourceY: sourceNodeY,
+        sourceX: geometry.sourceX,
+        sourceY: geometry.sourceY,
         sourcePosition,
-        targetX: targetNodeX - 1,
-        targetY: targetNodeY,
+        targetX: geometry.targetX - 1,
+        targetY: geometry.targetY,
         targetPosition,
         borderRadius: 40
     });
@@ -141,6 +139,31 @@ function StageEdge({ sourceX, sourceY, targetX, targetY, sourcePosition, targetP
         ]
     });
 }
+const StageEdgeInnerMemo = /*#__PURE__*/ (0, external_react_namespaceObject.memo)(StageEdgeInner);
+function StageEdgeComponent({ sourceX, sourceY, targetX, targetY, sourcePosition, targetPosition, selected, style, stroke, strokeWidth, arrowSize, ...rest }) {
+    const geometry = (0, react_cjs_namespaceObject.useStore)((state)=>{
+        const sourceNode = state.nodeLookup.get(rest.source);
+        const targetNode = state.nodeLookup.get(rest.target);
+        return {
+            sourceX: sourceNode ? sourceNode.position.x + (sourceNode.measured?.width ?? 0) : sourceX,
+            sourceY: sourceNode ? sourceNode.position.y + 32 : sourceY,
+            targetX: targetNode?.position.x ?? targetX,
+            targetY: targetNode ? targetNode.position.y + 32 : targetY
+        };
+    }, stageEdgeGeometryEquality);
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(StageEdgeInnerMemo, {
+        geometry: geometry,
+        sourcePosition: sourcePosition,
+        targetPosition: targetPosition,
+        selected: selected,
+        style: style,
+        stroke: stroke,
+        strokeWidth: strokeWidth,
+        arrowSize: arrowSize,
+        ...rest
+    });
+}
+const StageEdge = /*#__PURE__*/ (0, external_react_namespaceObject.memo)(StageEdgeComponent);
 exports.StageEdge = __webpack_exports__.StageEdge;
 exports.StageEdgeLabel = __webpack_exports__.StageEdgeLabel;
 for(var __rspack_i in __webpack_exports__)if (-1 === [