@uipath/apollo-react 3.68.2 → 3.68.3

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

@@ -0,0 +1,149 @@
+"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, contextMenuItems, onTaskClick, onTaskPlay, onMenuOpen })=>{
+    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,
+        ...contextMenuItems.length > 0 && {
+            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
+            }),
+            contextMenuItems.length > 0 && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_TaskMenu_cjs_namespaceObject.TaskMenu, {
+                ref: menuRef,
+                taskId: task.id,
+                contextMenuItems: contextMenuItems,
+                onMenuOpenChange: handleMenuOpenChange,
+                onMenuOpen: onMenuOpen,
+                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,14 @@
+import type { NodeMenuItem } from '../NodeContextMenu';
+import type { StageTaskExecution, StageTaskItem } from './StageNode.types';
+interface AdhocTaskItemProps {
+    task: StageTaskItem;
+    taskExecution?: StageTaskExecution;
+    isSelected: boolean;
+    contextMenuItems: NodeMenuItem[];
+    onTaskClick: (e: React.MouseEvent, taskId: string) => void;
+    onTaskPlay?: (taskId: string) => Promise<void>;
+    onMenuOpen?: () => void;
+}
+export declare const AdhocTaskItem: import("react").MemoExoticComponent<({ task, taskExecution, isSelected, contextMenuItems, onTaskClick, onTaskPlay, onMenuOpen, }: 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,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,CAAC,MAAM,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IAC/C,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;CACzB;AAwDD,eAAO,MAAM,aAAa,oIA9CvB,kBAAkB,6CA8CoC,CAAC"}

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

@@ -0,0 +1,105 @@
+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, contextMenuItems, onTaskClick, onTaskPlay, onMenuOpen })=>{
+    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,
+        ...contextMenuItems.length > 0 && {
+            onContextMenu: handleContextMenu
+        },
+        children: [
+            /*#__PURE__*/ jsx(TaskContent, {
+                task: task,
+                taskExecution: taskExecution
+            }),
+            onTaskPlay && /*#__PURE__*/ jsx(AdhocTaskPlayButton, {
+                taskId: task.id,
+                onTaskPlay: onTaskPlay
+            }),
+            contextMenuItems.length > 0 && /*#__PURE__*/ jsx(TaskMenu, {
+                ref: menuRef,
+                taskId: task.id,
+                contextMenuItems: contextMenuItems,
+                onMenuOpenChange: handleMenuOpenChange,
+                onMenuOpen: onMenuOpen,
+                taskRef: taskRef
+            })
+        ]
+    });
+};
+const AdhocTaskItem = /*#__PURE__*/ memo(AdhocTaskItemComponent);
+export { AdhocTaskItem };

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

@@ -1,14 +1,5 @@
 "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, {
@@ -42,11 +33,10 @@ 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);
 const external_react_namespaceObject = require("react");
 const external_react_dom_namespaceObject = require("react-dom");
 const external_icons_index_cjs_namespaceObject = require("../../icons/index.cjs");
+const GroupModificationUtils_cjs_namespaceObject = require("../../utils/GroupModificationUtils.cjs");
 const ConnectedHandlesContext_cjs_namespaceObject = require("../BaseCanvas/ConnectedHandlesContext.cjs");
 const useButtonHandles_cjs_namespaceObject = require("../ButtonHandle/useButtonHandles.cjs");
 const external_ExecutionStatusIcon_index_cjs_namespaceObject = require("../ExecutionStatusIcon/index.cjs");
@@ -54,6 +44,7 @@ const external_FloatingCanvasPanel_index_cjs_namespaceObject = require("../Float
 const external_NodeContextMenu_index_cjs_namespaceObject = require("../NodeContextMenu/index.cjs");
 const hooks_index_cjs_namespaceObject = require("../NodePropertiesPanel/hooks/index.cjs");
 const external_Toolbox_index_cjs_namespaceObject = require("../Toolbox/index.cjs");
+const external_AdhocTask_cjs_namespaceObject = require("./AdhocTask.cjs");
 const external_DraggableTask_cjs_namespaceObject = require("./DraggableTask.cjs");
 const external_StageNode_styles_cjs_namespaceObject = require("./StageNode.styles.cjs");
 const external_StageNode_types_cjs_namespaceObject = require("./StageNode.types.cjs");
@@ -81,53 +72,6 @@ const CHIP_ICONS = {
         size: apollo_core_namespaceObject.Icon.IconXs
     })
 };
-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)(external_material_index_cjs_namespaceObject.ApTooltip, {
-        content: "Trigger task",
-        placement: "top",
-        children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_material_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)(external_material_index_cjs_namespaceObject.ApCircularProgress, {
-                size: 20
-            }) : /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_icons_index_cjs_namespaceObject.PlayIcon, {
-                w: 20,
-                h: 20
-            })
-        })
-    });
-});
 const StageNodeComponent = (props)=>{
     const { dragging, selected, id, width, execution, stageDetails, addTaskLabel = 'Add task', addTaskLoading = false, replaceTaskLabel = 'Replace task', taskOptions = [], menuItems, pendingReplaceTask, onStageClick, onTaskAdd, onAddTaskFromToolbox, onTaskToolboxSearch, onTaskClick, onTaskGroupModification, onStageTitleChange, onTaskReorder, onReplaceTaskFromToolbox, onTaskPlay, hideParallelOptions } = props;
     const taskWidth = width ? width - external_StageNode_styles_cjs_namespaceObject.STAGE_CONTENT_INSET : void 0;
@@ -137,7 +81,11 @@ const StageNodeComponent = (props)=>{
     const tasks = (0, external_react_namespaceObject.useMemo)(()=>allTasks.filter((group)=>group.some((t)=>!t.isAdhoc)), [
         allTasks
     ]);
-    const adhocTasks = (0, external_react_namespaceObject.useMemo)(()=>allTasks.flat().filter((t)=>t.isAdhoc), [
+    const adhocTasks = (0, external_react_namespaceObject.useMemo)(()=>allTasks.flatMap((group, groupIndex)=>group.map((task, taskIndex)=>({
+                    task,
+                    groupIndex,
+                    taskIndex
+                })).filter(({ task })=>task.isAdhoc)), [
         allTasks
     ]);
     const flatTasks = (0, external_react_namespaceObject.useMemo)(()=>tasks.flat(), [
@@ -321,6 +269,28 @@ const StageNodeComponent = (props)=>{
         tasks,
         hideParallelOptions
     ]);
+    const getAdhocContextMenuItems = (0, external_react_namespaceObject.useCallback)((groupIndex, taskIndex, taskId)=>{
+        const items = [];
+        if (onReplaceTaskFromToolbox) items.push((0, external_StageNodeTaskUtilities_cjs_namespaceObject.getMenuItem)('replace-task', 'Replace task', ()=>{
+            taskStateReference.current = {
+                isParallel: false,
+                groupIndex,
+                taskIndex
+            };
+            onTaskClick?.(taskId);
+            setIsReplacingTask(true);
+        }));
+        if (onTaskGroupModification) {
+            if (items.length > 0) items.push((0, external_StageNodeTaskUtilities_cjs_namespaceObject.getDivider)());
+            items.push((0, external_StageNodeTaskUtilities_cjs_namespaceObject.getMenuItem)('remove-task', 'Delete task', ()=>reGroupTaskFunction(GroupModificationUtils_cjs_namespaceObject.GroupModificationType.REMOVE_TASK, groupIndex, taskIndex)));
+        }
+        return items;
+    }, [
+        onReplaceTaskFromToolbox,
+        onTaskClick,
+        onTaskGroupModification,
+        reGroupTaskFunction
+    ]);
     const { setSelectedNodeId } = (0, hooks_index_cjs_namespaceObject.useNodeSelection)();
     const handleStageClick = (0, external_react_namespaceObject.useCallback)(()=>{
         onStageClick?.();
@@ -725,23 +695,25 @@ const StageNodeComponent = (props)=>{
                                             })
                                         }),
                                         /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_StageNode_styles_cjs_namespaceObject.StageTaskList, {
-                                            children: adhocTasks.map((task)=>{
+                                            children: adhocTasks.map(({ task, groupIndex, taskIndex })=>{
                                                 const taskExecution = execution?.taskStatus?.[task.id];
-                                                return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(external_StageNode_styles_cjs_namespaceObject.StageTask, {
-                                                    "data-testid": `stage-task-${task.id}`,
-                                                    selected: selectedTaskId === task.id,
-                                                    status: taskExecution?.status,
-                                                    onClick: (e)=>handleTaskClick(e, task.id),
-                                                    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
-                                                        })
-                                                    ]
+                                                const menuItems = getAdhocContextMenuItems(groupIndex, taskIndex, task.id);
+                                                return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_AdhocTask_cjs_namespaceObject.AdhocTaskItem, {
+                                                    task: task,
+                                                    taskExecution: taskExecution,
+                                                    isSelected: selectedTaskId === task.id,
+                                                    contextMenuItems: menuItems,
+                                                    onTaskClick: handleTaskClick,
+                                                    onTaskPlay: onTaskPlay,
+                                                    ...(onTaskGroupModification || onReplaceTaskFromToolbox) && {
+                                                        onMenuOpen: ()=>{
+                                                            taskStateReference.current = {
+                                                                isParallel: false,
+                                                                groupIndex,
+                                                                taskIndex
+                                                            };
+                                                        }
+                                                    }
                                                 }, task.id);
                                             })
                                         })

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

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

@@ -4,11 +4,11 @@ import { SortableContext, sortableKeyboardCoordinates, verticalListSortingStrate
 import { FontVariantToken, Icon, Padding, Spacing } from "@uipath/apollo-core";
 import { Column, Row } from "../../layouts/index.js";
 import { Position, useStore, useViewport } from "../../xyflow/react.js";
-import { ApCircularProgress, ApIcon, ApIconButton, ApLink, ApTooltip, ApTypography } from "../../../material/index.js";
-import debounce from "debounce";
+import { ApIcon, ApIconButton, ApLink, ApTooltip, ApTypography } from "../../../material/index.js";
 import { memo, useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { createPortal } from "react-dom";
-import { EntryConditionIcon, ExitConditionIcon, PlayIcon, ReturnToOriginIcon } from "../../icons/index.js";
+import { EntryConditionIcon, ExitConditionIcon, ReturnToOriginIcon } from "../../icons/index.js";
+import { GroupModificationType } from "../../utils/GroupModificationUtils.js";
 import { useConnectedHandles } from "../BaseCanvas/ConnectedHandlesContext.js";
 import { useButtonHandles } from "../ButtonHandle/useButtonHandles.js";
 import { ExecutionStatusIcon } from "../ExecutionStatusIcon/index.js";
@@ -16,6 +16,7 @@ import { FloatingCanvasPanel } from "../FloatingCanvasPanel/index.js";
 import { NodeContextMenu } from "../NodeContextMenu/index.js";
 import { useNodeSelection } from "../NodePropertiesPanel/hooks/index.js";
 import { Toolbox } from "../Toolbox/index.js";
+import { AdhocTaskItem } from "./AdhocTask.js";
 import { DraggableTask, TaskContent } from "./DraggableTask.js";
 import { INDENTATION_WIDTH, STAGE_CONTENT_INSET, StageAdhocHeaderSection, StageAdhocSection, StageChip, StageContainer, StageContent, StageHeader, StageHeaderChipsRow, StageParallelBracket, StageParallelLabel, StageTask, StageTaskGroup, StageTaskList, StageTitleContainer, StageTitleInput } from "./StageNode.styles.js";
 import { StageHeaderChipType } from "./StageNode.types.js";
@@ -43,53 +44,6 @@ const CHIP_ICONS = {
         size: Icon.IconXs
     })
 };
-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 StageNodeComponent = (props)=>{
     const { dragging, selected, id, width, execution, stageDetails, addTaskLabel = 'Add task', addTaskLoading = false, replaceTaskLabel = 'Replace task', taskOptions = [], menuItems, pendingReplaceTask, onStageClick, onTaskAdd, onAddTaskFromToolbox, onTaskToolboxSearch, onTaskClick, onTaskGroupModification, onStageTitleChange, onTaskReorder, onReplaceTaskFromToolbox, onTaskPlay, hideParallelOptions } = props;
     const taskWidth = width ? width - STAGE_CONTENT_INSET : void 0;
@@ -99,7 +53,11 @@ const StageNodeComponent = (props)=>{
     const tasks = useMemo(()=>allTasks.filter((group)=>group.some((t)=>!t.isAdhoc)), [
         allTasks
     ]);
-    const adhocTasks = useMemo(()=>allTasks.flat().filter((t)=>t.isAdhoc), [
+    const adhocTasks = useMemo(()=>allTasks.flatMap((group, groupIndex)=>group.map((task, taskIndex)=>({
+                    task,
+                    groupIndex,
+                    taskIndex
+                })).filter(({ task })=>task.isAdhoc)), [
         allTasks
     ]);
     const flatTasks = useMemo(()=>tasks.flat(), [
@@ -283,6 +241,28 @@ const StageNodeComponent = (props)=>{
         tasks,
         hideParallelOptions
     ]);
+    const getAdhocContextMenuItems = useCallback((groupIndex, taskIndex, taskId)=>{
+        const items = [];
+        if (onReplaceTaskFromToolbox) items.push(getMenuItem('replace-task', 'Replace task', ()=>{
+            taskStateReference.current = {
+                isParallel: false,
+                groupIndex,
+                taskIndex
+            };
+            onTaskClick?.(taskId);
+            setIsReplacingTask(true);
+        }));
+        if (onTaskGroupModification) {
+            if (items.length > 0) items.push(getDivider());
+            items.push(getMenuItem('remove-task', 'Delete task', ()=>reGroupTaskFunction(GroupModificationType.REMOVE_TASK, groupIndex, taskIndex)));
+        }
+        return items;
+    }, [
+        onReplaceTaskFromToolbox,
+        onTaskClick,
+        onTaskGroupModification,
+        reGroupTaskFunction
+    ]);
     const { setSelectedNodeId } = useNodeSelection();
     const handleStageClick = useCallback(()=>{
         onStageClick?.();
@@ -687,23 +667,25 @@ const StageNodeComponent = (props)=>{
                                             })
                                         }),
                                         /*#__PURE__*/ jsx(StageTaskList, {
-                                            children: adhocTasks.map((task)=>{
+                                            children: adhocTasks.map(({ task, groupIndex, taskIndex })=>{
                                                 const taskExecution = execution?.taskStatus?.[task.id];
-                                                return /*#__PURE__*/ jsxs(StageTask, {
-                                                    "data-testid": `stage-task-${task.id}`,
-                                                    selected: selectedTaskId === task.id,
-                                                    status: taskExecution?.status,
-                                                    onClick: (e)=>handleTaskClick(e, task.id),
-                                                    children: [
-                                                        /*#__PURE__*/ jsx(TaskContent, {
-                                                            task: task,
-                                                            taskExecution: taskExecution
-                                                        }),
-                                                        onTaskPlay && /*#__PURE__*/ jsx(AdhocTaskPlayButton, {
-                                                            taskId: task.id,
-                                                            onTaskPlay: onTaskPlay
-                                                        })
-                                                    ]
+                                                const menuItems = getAdhocContextMenuItems(groupIndex, taskIndex, task.id);
+                                                return /*#__PURE__*/ jsx(AdhocTaskItem, {
+                                                    task: task,
+                                                    taskExecution: taskExecution,
+                                                    isSelected: selectedTaskId === task.id,
+                                                    contextMenuItems: menuItems,
+                                                    onTaskClick: handleTaskClick,
+                                                    onTaskPlay: onTaskPlay,
+                                                    ...(onTaskGroupModification || onReplaceTaskFromToolbox) && {
+                                                        onMenuOpen: ()=>{
+                                                            taskStateReference.current = {
+                                                                isParallel: false,
+                                                                groupIndex,
+                                                                taskIndex
+                                                            };
+                                                        }
+                                                    }
                                                 }, task.id);
                                             })
                                         })

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

@@ -2155,7 +2155,7 @@ const AdhocTasks = {
                 width: 304,
                 data: {
                     stageDetails: {
-                        label: 'Without onTaskPlay',
+                        label: 'Without onTaskPlay and Menu',
                         tasks: [
                             [
                                 {
@@ -2185,6 +2185,12 @@ const AdhocTasks = {
                     },
                     onTaskClick: (taskId)=>{
                         window.alert(`Task clicked: ${taskId}`);
+                    },
+                    onTaskGroupModification: (type, groupIndex, taskIndex)=>{
+                        console.log(`Task group modification: ${type}, group: ${groupIndex}, task: ${taskIndex}`);
+                    },
+                    onReplaceTaskFromToolbox: (task, groupIndex, taskIndex)=>{
+                        console.log(`Replace task at group: ${groupIndex}, task: ${taskIndex}`, task);
                     }
                 }
             },

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

@@ -1 +1 @@
-{"version":3,"file":"StageNode.stories.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/StageNode/StageNode.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAyBvD,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAGxC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,SAAS,CA0FD,CAAC;AAEjC,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AA4CnC,eAAO,MAAM,OAAO,EAAE,KAoHrB,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KAsE3B,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,KA8M7B,CAAC;AAEF,eAAO,MAAM,yBAAyB,EAAE,KA+HvC,CAAC;AAEF,eAAO,MAAM,sBAAsB,EAAE,KAoKpC,CAAC;AA8GF,eAAO,MAAM,uBAAuB,EAAE,KAOrC,CAAC;AAkVF,eAAO,MAAM,kBAAkB,EAAE,KAOhC,CAAC;AA2HF,eAAO,MAAM,kBAAkB,EAAE,KAOhC,CAAC;AA0KF,eAAO,MAAM,cAAc,EAAE,KAO5B,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,KAuHxB,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KAkO3B,CAAC"}
+{"version":3,"file":"StageNode.stories.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/StageNode/StageNode.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAyBvD,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAGxC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,SAAS,CA0FD,CAAC;AAEjC,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AA4CnC,eAAO,MAAM,OAAO,EAAE,KAoHrB,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KAsE3B,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,KA8M7B,CAAC;AAEF,eAAO,MAAM,yBAAyB,EAAE,KA+HvC,CAAC;AAEF,eAAO,MAAM,sBAAsB,EAAE,KAoKpC,CAAC;AA8GF,eAAO,MAAM,uBAAuB,EAAE,KAOrC,CAAC;AAkVF,eAAO,MAAM,kBAAkB,EAAE,KAOhC,CAAC;AA2HF,eAAO,MAAM,kBAAkB,EAAE,KAOhC,CAAC;AA0KF,eAAO,MAAM,cAAc,EAAE,KAO5B,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,KA+HxB,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KAkO3B,CAAC"}

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

@@ -2116,7 +2116,7 @@ const AdhocTasks = {
                 width: 304,
                 data: {
                     stageDetails: {
-                        label: 'Without onTaskPlay',
+                        label: 'Without onTaskPlay and Menu',
                         tasks: [
                             [
                                 {
@@ -2146,6 +2146,12 @@ const AdhocTasks = {
                     },
                     onTaskClick: (taskId)=>{
                         window.alert(`Task clicked: ${taskId}`);
+                    },
+                    onTaskGroupModification: (type, groupIndex, taskIndex)=>{
+                        console.log(`Task group modification: ${type}, group: ${groupIndex}, task: ${taskIndex}`);
+                    },
+                    onReplaceTaskFromToolbox: (task, groupIndex, taskIndex)=>{
+                        console.log(`Replace task at group: ${groupIndex}, task: ${taskIndex}`, task);
                     }
                 }
             },

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

@@ -134,7 +134,7 @@ const StageTitleInput = styled_default().input`
   border-radius: 2px;
   width: 100%;
   min-width: 100px;
-  padding: ${(props)=>props.isStageTitleEditable ? '0' : `${apollo_core_namespaceObject.Padding.PadS} 0px`};
+  padding: ${apollo_core_namespaceObject.Padding.PadS} 0px;
 
   &:focus {
     outline: none;

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

@@ -74,7 +74,7 @@ const StageTitleInput = styled.input`
   border-radius: 2px;
   width: 100%;
   min-width: 100px;
-  padding: ${(props)=>props.isStageTitleEditable ? '0' : `${Padding.PadS} 0px`};
+  padding: ${Padding.PadS} 0px;
 
   &:focus {
     outline: none;

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

@@ -1 +1 @@
-{"version":3,"file":"TaskMenu.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/StageNode/TaskMenu.tsx"],"names":[],"mappings":"AAWA,OAAO,KAAK,EAAkB,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAIvE,MAAM,WAAW,cAAc;IAC7B,iBAAiB,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;CAC/D;AAED,UAAU,aAAa;IACrB,MAAM,EAAE,MAAM,CAAC;IACf,gBAAgB,EAAE,YAAY,EAAE,CAAC;IACjC,gBAAgB,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IAC7C,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;IACxB,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;CAC/C;AAqHD,eAAO,MAAM,QAAQ,qGAAsC,CAAC"}
+{"version":3,"file":"TaskMenu.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/StageNode/TaskMenu.tsx"],"names":[],"mappings":"AAWA,OAAO,KAAK,EAAkB,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAGvE,MAAM,WAAW,cAAc;IAC7B,iBAAiB,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;CAC/D;AAED,UAAU,aAAa;IACrB,MAAM,EAAE,MAAM,CAAC;IACf,gBAAgB,EAAE,YAAY,EAAE,CAAC;IACjC,gBAAgB,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IAC7C,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;IACxB,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;CAC/C;AAqHD,eAAO,MAAM,QAAQ,qGAAsC,CAAC"}

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

@@ -1,6 +1,6 @@
 export { StageConnectionEdge } from './StageConnectionEdge';
 export { StageEdge } from './StageEdge';
 export { StageNode } from './StageNode';
-export { StageHeaderChipType } from './StageNode.types';
 export type { StageHeaderChip, StageNodeProps, StageStatus, StageTaskItem, StageTaskStatus, } from './StageNode.types';
+export { StageHeaderChipType } from './StageNode.types';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/StageNode/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,OAAO,EAAE,mBAAmB,EAAE,MAAM,mBAAmB,CAAC;AACxD,YAAY,EACV,eAAe,EACf,cAAc,EACd,WAAW,EACX,aAAa,EACb,eAAe,GAChB,MAAM,mBAAmB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/StageNode/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,YAAY,EACV,eAAe,EACf,cAAc,EACd,WAAW,EACX,aAAa,EACb,eAAe,GAChB,MAAM,mBAAmB,CAAC;AAC3B,OAAO,EAAE,mBAAmB,EAAE,MAAM,mBAAmB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uipath/apollo-react",
-  "version": "3.68.2",
+  "version": "3.68.3",
   "description": "Apollo Design System - React component library with Material UI theming",
   "repository": {
     "type": "git",