@uipath/apollo-react 3.62.0 → 3.63.0-pr431.16bbfa4

package/dist/canvas/components/CanvasPerformance.stories.js

@@ -0,0 +1,324 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ConnectionMode, Panel, ReactFlowProvider, addEdge, useEdgesState, useNodesState } from "../xyflow/react.js";
+import { useCallback, useMemo, useState } from "react";
+import { DefaultCanvasTranslations } from "../types.js";
+import { BaseCanvas } from "./BaseCanvas/index.js";
+import { CanvasPositionControls } from "./CanvasPositionControls.js";
+import { StageConnectionEdge } from "./StageNode/StageConnectionEdge.js";
+import { StageEdge } from "./StageNode/StageEdge.js";
+import { StageNodeWrapper } from "./StageNode/StageNode.stories.utils.js";
+const meta = {
+    title: 'Canvas/Performance',
+    parameters: {
+        layout: 'fullscreen'
+    }
+};
+const CanvasPerformance_stories = meta;
+const PERFORMANCE_STAGE_NODE_WIDTH = 304;
+const PERFORMANCE_STAGE_SPACING_X = 400;
+const PERFORMANCE_STAGE_SPACING_Y = 384;
+const DEFAULT_STAGE_COUNT = 48;
+const MIN_STAGE_COUNT = 1;
+const MAX_STAGE_COUNT = 200;
+const VerificationIcon = ()=>/*#__PURE__*/ jsxs("svg", {
+        viewBox: "0 0 24 24",
+        fill: "none",
+        stroke: "currentColor",
+        strokeWidth: "1.5",
+        children: [
+            /*#__PURE__*/ jsx("path", {
+                d: "M9 11L12 14L20 6"
+            }),
+            /*#__PURE__*/ jsx("path", {
+                d: "M20 12V18C20 19.1046 19.1046 20 18 20H6C4.89543 20 4 19.1046 4 18V6C4 4.89543 4.89543 4 6 4H13"
+            })
+        ]
+    });
+const DocumentIcon = ()=>/*#__PURE__*/ jsxs("svg", {
+        viewBox: "0 0 24 24",
+        fill: "none",
+        stroke: "currentColor",
+        strokeWidth: "1.5",
+        children: [
+            /*#__PURE__*/ jsx("path", {
+                d: "M14 2H6C4.9 2 4 2.9 4 4V20C4 21.1 4.9 22 6 22H18C19.1 22 20 21.1 20 20V8L14 2Z"
+            }),
+            /*#__PURE__*/ jsx("path", {
+                d: "M14 2V8H20"
+            }),
+            /*#__PURE__*/ jsx("path", {
+                d: "M8 12H16"
+            }),
+            /*#__PURE__*/ jsx("path", {
+                d: "M8 16H16"
+            })
+        ]
+    });
+const ProcessIcon = ()=>/*#__PURE__*/ jsxs("svg", {
+        viewBox: "0 0 24 24",
+        fill: "none",
+        stroke: "currentColor",
+        strokeWidth: "1.5",
+        children: [
+            /*#__PURE__*/ jsx("rect", {
+                x: "3",
+                y: "3",
+                width: "7",
+                height: "7",
+                rx: "1"
+            }),
+            /*#__PURE__*/ jsx("rect", {
+                x: "14",
+                y: "3",
+                width: "7",
+                height: "7",
+                rx: "1"
+            }),
+            /*#__PURE__*/ jsx("rect", {
+                x: "3",
+                y: "14",
+                width: "7",
+                height: "7",
+                rx: "1"
+            }),
+            /*#__PURE__*/ jsx("rect", {
+                x: "14",
+                y: "14",
+                width: "7",
+                height: "7",
+                rx: "1"
+            })
+        ]
+    });
+function createPerformanceStageTasks(index) {
+    return [
+        [
+            {
+                id: `stage-${index}-task-intake`,
+                label: 'Intake Review',
+                icon: /*#__PURE__*/ jsx(VerificationIcon, {})
+            }
+        ],
+        [
+            {
+                id: `stage-${index}-task-documents`,
+                label: 'Document Processing',
+                icon: /*#__PURE__*/ jsx(DocumentIcon, {})
+            }
+        ],
+        [
+            {
+                id: `stage-${index}-task-risk`,
+                label: 'Risk Assessment',
+                icon: /*#__PURE__*/ jsx(VerificationIcon, {})
+            },
+            {
+                id: `stage-${index}-task-policy`,
+                label: 'Policy Validation',
+                icon: /*#__PURE__*/ jsx(VerificationIcon, {})
+            }
+        ],
+        [
+            {
+                id: `stage-${index}-task-review`,
+                label: 'Final Review',
+                icon: /*#__PURE__*/ jsx(ProcessIcon, {})
+            }
+        ]
+    ];
+}
+function createPerformanceStageNodes(stageCount) {
+    const columns = Math.ceil(Math.sqrt(stageCount));
+    return Array.from({
+        length: stageCount
+    }, (_, index)=>{
+        const row = Math.floor(index / columns);
+        const col = index % columns;
+        const stageId = `performance-stage-${index}`;
+        return {
+            id: stageId,
+            type: 'stage',
+            position: {
+                x: col * PERFORMANCE_STAGE_SPACING_X,
+                y: row * PERFORMANCE_STAGE_SPACING_Y
+            },
+            width: PERFORMANCE_STAGE_NODE_WIDTH,
+            data: {
+                stageDetails: {
+                    label: `Performance Stage ${index + 1}`,
+                    tasks: createPerformanceStageTasks(index)
+                },
+                execution: {
+                    stageStatus: {
+                        duration: `SLA: ${30 + index % 5 * 15}m`
+                    }
+                }
+            }
+        };
+    });
+}
+function createPerformanceStageEdges(stageCount) {
+    const columns = Math.ceil(Math.sqrt(stageCount));
+    const edges = [];
+    for(let index = 0; index < stageCount; index++){
+        const col = index % columns;
+        const sourceId = `performance-stage-${index}`;
+        const rightIndex = index + 1;
+        if (col < columns - 1 && rightIndex < stageCount) {
+            const targetId = `performance-stage-${rightIndex}`;
+            edges.push({
+                id: `performance-edge-right-${index}`,
+                type: 'stage',
+                source: sourceId,
+                sourceHandle: `${sourceId}____source____right`,
+                target: targetId,
+                targetHandle: `${targetId}____target____left`
+            });
+        }
+        const downIndex = index + columns;
+        if (downIndex < stageCount) {
+            const targetId = `performance-stage-${downIndex}`;
+            edges.push({
+                id: `performance-edge-down-${index}`,
+                type: 'stage',
+                source: sourceId,
+                sourceHandle: `${sourceId}____source____bottom`,
+                target: targetId,
+                targetHandle: `${targetId}____target____top`
+            });
+        }
+    }
+    return edges;
+}
+const CanvasPerformanceStory = ()=>{
+    const nodeTypes = useMemo(()=>({
+            stage: StageNodeWrapper
+        }), []);
+    const edgeTypes = useMemo(()=>({
+            stage: StageEdge
+        }), []);
+    const defaultEdgeOptions = useMemo(()=>({
+            type: 'stage'
+        }), []);
+    const [stageCount, setStageCount] = useState(DEFAULT_STAGE_COUNT);
+    const [nodes, setNodes, onNodesChange] = useNodesState(createPerformanceStageNodes(DEFAULT_STAGE_COUNT));
+    const [edges, setEdges, onEdgesChange] = useEdgesState(createPerformanceStageEdges(DEFAULT_STAGE_COUNT));
+    const onConnect = useCallback((connection)=>setEdges((eds)=>addEdge(connection, eds)), [
+        setEdges
+    ]);
+    const handleStageCountChange = useCallback((e)=>{
+        const nextCount = Number.parseInt(e.target.value, 10);
+        setStageCount(nextCount);
+        setNodes(createPerformanceStageNodes(nextCount));
+        setEdges(createPerformanceStageEdges(nextCount));
+    }, [
+        setEdges,
+        setNodes
+    ]);
+    return /*#__PURE__*/ jsx("div", {
+        style: {
+            width: '100vw',
+            height: '100vh'
+        },
+        children: /*#__PURE__*/ jsx(ReactFlowProvider, {
+            children: /*#__PURE__*/ jsxs(BaseCanvas, {
+                nodes: nodes,
+                edges: edges,
+                onNodesChange: onNodesChange,
+                onEdgesChange: onEdgesChange,
+                onConnect: onConnect,
+                nodeTypes: nodeTypes,
+                edgeTypes: edgeTypes,
+                mode: "design",
+                connectionMode: ConnectionMode.Strict,
+                defaultEdgeOptions: defaultEdgeOptions,
+                connectionLineComponent: StageConnectionEdge,
+                elevateEdgesOnSelect: true,
+                children: [
+                    /*#__PURE__*/ jsx(Panel, {
+                        position: "top-left",
+                        children: /*#__PURE__*/ jsxs("div", {
+                            className: "nodrag nopan nowheel",
+                            style: {
+                                width: 240,
+                                background: 'var(--uix-canvas-background)',
+                                border: '1px solid var(--uix-canvas-border-de-emp)',
+                                borderRadius: 16,
+                                padding: 16,
+                                boxShadow: '0 8px 32px rgba(15, 23, 42, 0.08)'
+                            },
+                            children: [
+                                /*#__PURE__*/ jsx("div", {
+                                    style: {
+                                        fontWeight: 600,
+                                        fontSize: 14
+                                    },
+                                    children: "Performance Test"
+                                }),
+                                /*#__PURE__*/ jsx("div", {
+                                    style: {
+                                        marginTop: 6,
+                                        color: 'var(--uix-canvas-foreground-de-emp)',
+                                        fontSize: 12,
+                                        lineHeight: 1.4
+                                    },
+                                    children: "Adjust the number of stage nodes to profile drag and pan performance."
+                                }),
+                                /*#__PURE__*/ jsxs("div", {
+                                    style: {
+                                        display: 'flex',
+                                        justifyContent: 'space-between',
+                                        alignItems: 'center',
+                                        marginTop: 12,
+                                        marginBottom: 8,
+                                        fontSize: 12
+                                    },
+                                    children: [
+                                        /*#__PURE__*/ jsx("span", {
+                                            children: "Stage Count"
+                                        }),
+                                        /*#__PURE__*/ jsx("strong", {
+                                            style: {
+                                                fontSize: 14
+                                            },
+                                            children: stageCount
+                                        })
+                                    ]
+                                }),
+                                /*#__PURE__*/ jsx("input", {
+                                    type: "range",
+                                    min: MIN_STAGE_COUNT,
+                                    max: MAX_STAGE_COUNT,
+                                    value: stageCount,
+                                    onChange: handleStageCountChange,
+                                    style: {
+                                        width: '100%',
+                                        cursor: 'pointer'
+                                    }
+                                })
+                            ]
+                        })
+                    }),
+                    /*#__PURE__*/ jsx(Panel, {
+                        position: "bottom-right",
+                        children: /*#__PURE__*/ jsx(CanvasPositionControls, {
+                            translations: DefaultCanvasTranslations
+                        })
+                    })
+                ]
+            })
+        })
+    });
+};
+const StageWorkflow = {
+    name: 'Stage Workflow',
+    parameters: {
+        docs: {
+            description: {
+                story: 'Standalone performance story with adjustable stage count. Use this to profile stage workflow drag and pan behavior under load.'
+            }
+        }
+    },
+    render: ()=>/*#__PURE__*/ jsx(CanvasPerformanceStory, {})
+};
+export { StageWorkflow, CanvasPerformance_stories as default };

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/DraggableTask.cjs

@@ -41,6 +41,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_debounce_namespaceObject = require("debounce");
 var external_debounce_default = /*#__PURE__*/ __webpack_require__.n(external_debounce_namespaceObject);
@@ -182,8 +183,9 @@ const TaskContent = /*#__PURE__*/ (0, external_react_namespaceObject.memo)(({ ta
             ]
         })
     }));
-const DraggableTaskComponent = ({ task, taskExecution, isSelected, isParallel, contextMenuItems, onTaskClick, onMenuOpen, onTaskPlay, isDragDisabled, projectedDepth, zoom = 1 })=>{
+const DraggableTaskComponent = ({ task, taskExecution, isSelected, isParallel, groupIndex, taskIndex, getContextMenuItems, onTaskClick, onTaskPlay, 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 [playLoading, setPlayLoading] = (0, external_react_namespaceObject.useState)(false);
@@ -221,6 +223,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 || void 0 === groupIndex || void 0 === taskIndex) return [];
+        return getContextMenuItems(groupIndex, taskIndex);
+    }, [
+        getContextMenuItems,
+        groupIndex,
+        taskIndex
+    ]);
     const { attributes, listeners, setNodeRef, transition, transform, isDragging } = (0, sortable_namespaceObject.useSortable)({
         id: task.id,
         disabled: isDragDisabled
@@ -266,7 +276,7 @@ const DraggableTaskComponent = ({ task, taskExecution, isSelected, isParallel, c
         isParallel: isParallel,
         isDragEnabled: !isDragDisabled,
         onClick: handleClick,
-        ...contextMenuItems.length > 0 && {
+        ...getContextMenuItems && {
             onContextMenu: handleContextMenu
         },
         children: [
@@ -313,12 +323,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, onTaskPlay, 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, onTaskPlay, 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":"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"}
+{"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;AA4LH,eAAO,MAAM,aAAa,8LA9KvB,kBAAkB,6CA8KoC,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, ApCircularProgress, ApIconButton, ApTooltip, ApTypography, BadgeSize } from "../../../material/index.js";
 import debounce from "debounce";
 import { memo, useCallback, useMemo, useRef, useState } from "react";
@@ -143,8 +144,9 @@ const TaskContent = /*#__PURE__*/ memo(({ task, taskExecution, isDragging })=>/*
             ]
         })
     }));
-const DraggableTaskComponent = ({ task, taskExecution, isSelected, isParallel, contextMenuItems, onTaskClick, onMenuOpen, onTaskPlay, isDragDisabled, projectedDepth, zoom = 1 })=>{
+const DraggableTaskComponent = ({ task, taskExecution, isSelected, isParallel, groupIndex, taskIndex, getContextMenuItems, onTaskClick, onTaskPlay, isDragDisabled, projectedDepth })=>{
     const [isMenuOpen, setIsMenuOpen] = useState(false);
+    const zoom = useStore((s)=>s.transform[2]);
     const taskRef = useRef(null);
     const menuRef = useRef(null);
     const [playLoading, setPlayLoading] = useState(false);
@@ -182,6 +184,14 @@ const DraggableTaskComponent = ({ task, taskExecution, isSelected, isParallel, c
     const handleContextMenu = useCallback((e)=>{
         menuRef.current?.handleContextMenu(e);
     }, []);
+    const handleGetContextMenuItems = useCallback(()=>{
+        if (!getContextMenuItems || void 0 === groupIndex || void 0 === taskIndex) return [];
+        return getContextMenuItems(groupIndex, taskIndex);
+    }, [
+        getContextMenuItems,
+        groupIndex,
+        taskIndex
+    ]);
     const { attributes, listeners, setNodeRef, transition, transform, isDragging } = useSortable({
         id: task.id,
         disabled: isDragDisabled
@@ -227,7 +237,7 @@ const DraggableTaskComponent = ({ task, taskExecution, isSelected, isParallel, c
         isParallel: isParallel,
         isDragEnabled: !isDragDisabled,
         onClick: handleClick,
-        ...contextMenuItems.length > 0 && {
+        ...getContextMenuItems && {
             onContextMenu: handleContextMenu
         },
         children: [
@@ -274,12 +284,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,CAAC,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,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"}