@uipath/apollo-react 6.22.3 → 6.23.1

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

@@ -1,13 +1,38 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import { memo, useCallback } from "react";
+import { DndContext, KeyboardSensor, PointerSensor, closestCenter, useSensor, useSensors } from "@dnd-kit/core";
+import { SortableContext, sortableKeyboardCoordinates, verticalListSortingStrategy } from "@dnd-kit/sortable";
+import { memo, useCallback, useMemo } from "react";
+import { useStageTaskDragHandler } from "../hooks/useStageTaskDragHandler.js";
 import { StageItemsList, StageItemsSection } from "../StageNode.styles.js";
 import { StageItemsHeaderTitle } from "../shared/StageItemsHeaderTitle.js";
 import { useStageNodeLabels } from "../useStageNodeLabels.js";
 import { EventDrivenTaskItem } from "./EventDrivenTask.js";
-const StageNodeEventDrivenTaskGroupsInner = ({ props, eventDrivenTasks, isReadOnly, selectedTaskId, handleTaskClick, generateReplaceTaskMenuItemForTask, generateDeleteTaskMenuItemForTask })=>{
-    const { id, execution, onTaskGroupModification, onReplaceTaskFromToolbox, loadingTaskIds, onTaskBreakpointToggle, getTaskContextMenuItems } = props;
+import { SortableTaskRow } from "./SortableTaskRow.js";
+import { getDivider } from "./StageNodeTaskUtilities.js";
+import { StageTaskDragOverlay } from "./StageTaskDragOverlay.js";
+const StageNodeEventDrivenTaskGroupsInner = ({ props, eventDrivenTaskGroups, isReadOnly, selectedTaskId, taskWidthStyle, handleTaskClick, handleReorderEventDrivenTasks, generateReplaceTaskMenuItemForTask, generateDeleteTaskMenuItemForTask })=>{
+    const { id, execution, onTaskGroupModification, onReplaceTaskFromToolbox, onTaskReorder, loadingTaskIds, onTaskBreakpointToggle, getTaskContextMenuItems } = props;
     const hasBuiltInTaskActions = !!(onReplaceTaskFromToolbox || onTaskGroupModification);
     const labels = useStageNodeLabels();
+    const isDragDisabled = !onTaskReorder || isReadOnly;
+    const rows = useMemo(()=>eventDrivenTaskGroups.flat(), [
+        eventDrivenTaskGroups
+    ]);
+    const rowIds = useMemo(()=>rows.map((task)=>task.id), [
+        rows
+    ]);
+    const { activeTask, handleDragStart, handleDragEnd, handleDragCancel } = useStageTaskDragHandler({
+        taskGroups: eventDrivenTaskGroups,
+        onTaskReorder: handleReorderEventDrivenTasks,
+        allowRegrouping: false
+    });
+    const sensors = useSensors(useSensor(PointerSensor, {
+        activationConstraint: {
+            distance: 3
+        }
+    }), useSensor(KeyboardSensor, {
+        coordinateGetter: sortableKeyboardCoordinates
+    }));
     const getEventDrivenContextMenuItems = useCallback((task)=>{
         const items = [];
         const replaceTaskMenuItem = generateReplaceTaskMenuItemForTask(task.id, false);
@@ -19,40 +44,67 @@ const StageNodeEventDrivenTaskGroupsInner = ({ props, eventDrivenTasks, isReadOn
         }) ?? [];
         items.push(...additionalMenuItems);
         const deleteTaskMenuItem = generateDeleteTaskMenuItemForTask(task.id);
-        if (deleteTaskMenuItem) items.push(deleteTaskMenuItem);
+        if (deleteTaskMenuItem) {
+            if (items.length) items.push(getDivider());
+            items.push(deleteTaskMenuItem);
+        }
         return items;
     }, [
         generateReplaceTaskMenuItemForTask,
         getTaskContextMenuItems,
         generateDeleteTaskMenuItemForTask
     ]);
-    if (0 === eventDrivenTasks.length) return null;
+    const taskList = /*#__PURE__*/ jsx(StageItemsList, {
+        "data-testid": `event-driven-tasks-list-${id}`,
+        className: isDragDisabled ? void 0 : 'nodrag nopan',
+        children: rows.map((task)=>{
+            const taskExecution = execution?.taskStatus?.[task.id];
+            const hasMenu = !isReadOnly && hasBuiltInTaskActions || (getTaskContextMenuItems?.({
+                task,
+                taskGroupType: 'event-driven',
+                isParallel: false
+            })?.length ?? 0) > 0;
+            const row = /*#__PURE__*/ jsx(EventDrivenTaskItem, {
+                task: task,
+                taskExecution: taskExecution,
+                isSelected: selectedTaskId === task.id,
+                onTaskClick: handleTaskClick,
+                isTaskLoading: loadingTaskIds?.has(task.id),
+                isReadOnly: isReadOnly,
+                onToggleBreakpoint: isReadOnly ? onTaskBreakpointToggle : void 0,
+                getContextMenuItems: hasMenu ? getEventDrivenContextMenuItems : void 0
+            }, task.id);
+            return isDragDisabled ? row : /*#__PURE__*/ jsx(SortableTaskRow, {
+                taskId: task.id,
+                children: row
+            }, task.id);
+        })
+    });
+    if (0 === rows.length) return null;
     return /*#__PURE__*/ jsxs(StageItemsSection, {
         children: [
             /*#__PURE__*/ jsx(StageItemsHeaderTitle, {
                 title: labels.eventDrivenTasks,
                 testId: `event-driven-tasks-header-${id}`
             }),
-            /*#__PURE__*/ jsx(StageItemsList, {
-                "data-testid": `event-driven-tasks-list-${id}`,
-                children: eventDrivenTasks.map(({ task })=>{
-                    const taskExecution = execution?.taskStatus?.[task.id];
-                    const hasMenu = !isReadOnly && hasBuiltInTaskActions || (getTaskContextMenuItems?.({
-                        task,
-                        taskGroupType: 'event-driven',
-                        isParallel: false
-                    })?.length ?? 0) > 0;
-                    return /*#__PURE__*/ jsx(EventDrivenTaskItem, {
-                        task: task,
-                        taskExecution: taskExecution,
-                        isSelected: selectedTaskId === task.id,
-                        onTaskClick: handleTaskClick,
-                        isTaskLoading: loadingTaskIds?.has(task.id),
-                        isReadOnly: isReadOnly,
-                        onToggleBreakpoint: isReadOnly ? onTaskBreakpointToggle : void 0,
-                        getContextMenuItems: hasMenu ? getEventDrivenContextMenuItems : void 0
-                    }, task.id);
-                })
+            isDragDisabled ? taskList : /*#__PURE__*/ jsxs(DndContext, {
+                collisionDetection: closestCenter,
+                sensors: sensors,
+                onDragStart: handleDragStart,
+                onDragEnd: handleDragEnd,
+                onDragCancel: handleDragCancel,
+                children: [
+                    /*#__PURE__*/ jsx(SortableContext, {
+                        items: rowIds,
+                        strategy: verticalListSortingStrategy,
+                        children: taskList
+                    }),
+                    /*#__PURE__*/ jsx(StageTaskDragOverlay, {
+                        activeTask: activeTask,
+                        isActiveTaskParallel: false,
+                        taskWidthStyle: taskWidthStyle
+                    })
+                ]
             })
         ]
     });

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

@@ -40,16 +40,16 @@ const external_useStageNodeLabels_cjs_namespaceObject = require("../useStageNode
 const external_DraggableTask_cjs_namespaceObject = require("./DraggableTask.cjs");
 const external_StageNodeTaskUtilities_cjs_namespaceObject = require("./StageNodeTaskUtilities.cjs");
 const external_StageTaskDragOverlay_cjs_namespaceObject = require("./StageTaskDragOverlay.cjs");
-const StageNodeSequentialTaskGroups = ({ props, sequentialTaskGroups, sequentialTasks, allTasks, isReadOnly, selectedTaskId, taskWidthStyle, handleTaskClick, handleReorderSequentialTasks, generateReplaceTaskMenuItemForTask })=>{
+const StageNodeSequentialTaskGroups = ({ props, sequentialTaskGroups, allTasks, isReadOnly, selectedTaskId, taskWidthStyle, handleTaskClick, handleReorderSequentialTasks, generateReplaceTaskMenuItemForTask })=>{
     const { id, execution, onTaskGroupModification, onReplaceTaskFromToolbox, onTaskReorder, hideParallelOptions, loadingTaskIds, onTaskBreakpointToggle, getTaskContextMenuItems } = props;
     const hasBuiltInTaskActions = !!(onReplaceTaskFromToolbox || onTaskGroupModification);
+    const isDragDisabled = !onTaskReorder || isReadOnly;
     const labels = (0, external_useStageNodeLabels_cjs_namespaceObject.useStageNodeLabels)();
-    const sequentialTaskIds = (0, external_react_namespaceObject.useMemo)(()=>sequentialTasks.map(({ task })=>task.id), [
-        sequentialTasks
+    const sequentialTaskIds = (0, external_react_namespaceObject.useMemo)(()=>sequentialTaskGroups.flat().map((task)=>task.id), [
+        sequentialTaskGroups
     ]);
-    const { activeDragId, activeSequentialTask, isActiveTaskParallel, projected, handleDragStart, handleDragMove, handleDragOver, handleDragEnd, handleDragCancel } = (0, useStageTaskDragHandler_cjs_namespaceObject.useStageTaskDragHandler)({
-        sequentialTaskGroups,
-        sequentialTasks,
+    const { activeTask, isActiveTaskParallel, handleDragStart, handleDragMove, handleDragEnd, handleDragCancel } = (0, useStageTaskDragHandler_cjs_namespaceObject.useStageTaskDragHandler)({
+        taskGroups: sequentialTaskGroups,
         onTaskReorder: handleReorderSequentialTasks
     });
     const handleTaskRegroup = (0, external_react_namespaceObject.useCallback)((groupModificationType, groupIndex, taskIndex)=>{
@@ -124,6 +124,50 @@ const StageNodeSequentialTaskGroups = ({ props, sequentialTaskGroups, sequential
     }), (0, core_namespaceObject.useSensor)(core_namespaceObject.KeyboardSensor, {
         coordinateGetter: sortable_namespaceObject.sortableKeyboardCoordinates
     }));
+    const taskList = /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_StageNode_styles_cjs_namespaceObject.StageItemsList, {
+        "data-testid": `sequential-tasks-list-${id}`,
+        className: "nodrag nopan",
+        children: sequentialTaskGroups.map((taskGroup, groupIndex)=>{
+            const isParallel = taskGroup.length > 1;
+            return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(index_cjs_namespaceObject.Row, {
+                gap: apollo_core_namespaceObject.Spacing.SpacingS,
+                children: [
+                    isParallel && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_StageNode_styles_cjs_namespaceObject.StageParallelBracket, {}),
+                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(external_StageNode_styles_cjs_namespaceObject.StageTaskGroupContainer, {
+                        isParallel: isParallel,
+                        children: [
+                            isParallel && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_StageNode_styles_cjs_namespaceObject.StageParallelLabel, {
+                                children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
+                                    className: "text-xs",
+                                    children: labels.parallel
+                                })
+                            }),
+                            taskGroup.map((task)=>{
+                                const taskExecution = execution?.taskStatus?.[task.id];
+                                const hasMenu = !isReadOnly && hasBuiltInTaskActions || (getTaskContextMenuItems?.({
+                                    task,
+                                    taskGroupType: 'sequential',
+                                    isParallel
+                                })?.length ?? 0) > 0;
+                                return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_DraggableTask_cjs_namespaceObject.DraggableTask, {
+                                    task: task,
+                                    taskExecution: taskExecution,
+                                    isSelected: selectedTaskId === task.id,
+                                    isParallel: isParallel,
+                                    onTaskClick: handleTaskClick,
+                                    isDragDisabled: isDragDisabled,
+                                    isTaskLoading: loadingTaskIds?.has(task.id),
+                                    isReadOnly: isReadOnly,
+                                    onToggleBreakpoint: isReadOnly ? onTaskBreakpointToggle : void 0,
+                                    getContextMenuItems: hasMenu ? buildContextMenuItems : void 0
+                                }, task.id);
+                            })
+                        ]
+                    })
+                ]
+            }, `group-${groupIndex}`);
+        })
+    });
     if (0 === sequentialTaskGroups.length) return null;
     return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(external_StageNode_styles_cjs_namespaceObject.StageItemsSection, {
         children: [
@@ -131,66 +175,21 @@ const StageNodeSequentialTaskGroups = ({ props, sequentialTaskGroups, sequential
                 title: labels.sequentialTasks,
                 testId: `sequential-tasks-header-${id}`
             }),
-            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(core_namespaceObject.DndContext, {
+            isDragDisabled ? taskList : /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(core_namespaceObject.DndContext, {
                 collisionDetection: core_namespaceObject.closestCenter,
                 sensors: sensors,
                 onDragStart: handleDragStart,
                 onDragMove: handleDragMove,
-                onDragOver: handleDragOver,
                 onDragEnd: handleDragEnd,
                 onDragCancel: handleDragCancel,
                 children: [
                     /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(sortable_namespaceObject.SortableContext, {
                         items: sequentialTaskIds,
                         strategy: sortable_namespaceObject.verticalListSortingStrategy,
-                        children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_StageNode_styles_cjs_namespaceObject.StageItemsList, {
-                            "data-testid": `sequential-tasks-list-${id}`,
-                            className: "nodrag nopan",
-                            children: sequentialTaskGroups.map((taskGroup, groupIndex)=>{
-                                const isParallel = taskGroup.length > 1;
-                                return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(index_cjs_namespaceObject.Row, {
-                                    gap: apollo_core_namespaceObject.Spacing.SpacingS,
-                                    children: [
-                                        isParallel && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_StageNode_styles_cjs_namespaceObject.StageParallelBracket, {}),
-                                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(external_StageNode_styles_cjs_namespaceObject.StageTaskGroupContainer, {
-                                            isParallel: isParallel,
-                                            children: [
-                                                isParallel && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_StageNode_styles_cjs_namespaceObject.StageParallelLabel, {
-                                                    children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
-                                                        className: "text-xs",
-                                                        children: labels.parallel
-                                                    })
-                                                }),
-                                                taskGroup.map((task)=>{
-                                                    const taskExecution = execution?.taskStatus?.[task.id];
-                                                    const hasMenu = !isReadOnly && hasBuiltInTaskActions || (getTaskContextMenuItems?.({
-                                                        task,
-                                                        taskGroupType: 'sequential',
-                                                        isParallel
-                                                    })?.length ?? 0) > 0;
-                                                    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_DraggableTask_cjs_namespaceObject.DraggableTask, {
-                                                        task: task,
-                                                        taskExecution: taskExecution,
-                                                        isSelected: selectedTaskId === task.id,
-                                                        isParallel: isParallel,
-                                                        onTaskClick: handleTaskClick,
-                                                        projectedDepth: task.id === activeDragId && projected ? projected.depth : void 0,
-                                                        isDragDisabled: !onTaskReorder || isReadOnly,
-                                                        isTaskLoading: loadingTaskIds?.has(task.id),
-                                                        isReadOnly: isReadOnly,
-                                                        onToggleBreakpoint: isReadOnly ? onTaskBreakpointToggle : void 0,
-                                                        getContextMenuItems: hasMenu ? buildContextMenuItems : void 0
-                                                    }, task.id);
-                                                })
-                                            ]
-                                        })
-                                    ]
-                                }, `group-${groupIndex}`);
-                            })
-                        })
+                        children: taskList
                     }),
                     /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_StageTaskDragOverlay_cjs_namespaceObject.StageTaskDragOverlay, {
-                        activeTask: activeSequentialTask?.task,
+                        activeTask: activeTask,
                         isActiveTaskParallel: isActiveTaskParallel,
                         taskWidthStyle: taskWidthStyle
                     })

package/dist/canvas/components/StageNode/tasks/StageNodeSequentialTaskGroups.d.ts

@@ -1,10 +1,9 @@
 import { type CSSProperties } from 'react';
 import type { NodeMenuItem } from '../../NodeContextMenu';
-import type { StageNodeProps, StageTaskGroup, StageTaskItem } from '../StageNode.types';
-export declare const StageNodeSequentialTaskGroups: ({ props, sequentialTaskGroups, sequentialTasks, allTasks, isReadOnly, selectedTaskId, taskWidthStyle, handleTaskClick, handleReorderSequentialTasks, generateReplaceTaskMenuItemForTask, }: {
+import type { StageNodeProps, StageTaskItem } from '../StageNode.types';
+export declare const StageNodeSequentialTaskGroups: ({ props, sequentialTaskGroups, allTasks, isReadOnly, selectedTaskId, taskWidthStyle, handleTaskClick, handleReorderSequentialTasks, generateReplaceTaskMenuItemForTask, }: {
     props: StageNodeProps;
     sequentialTaskGroups: StageTaskItem[][];
-    sequentialTasks: StageTaskGroup[];
     allTasks: StageTaskItem[][];
     isReadOnly: boolean;
     selectedTaskId?: string;

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

@@ -1 +1 @@
-{"version":3,"file":"StageNodeSequentialTaskGroups.d.ts","sourceRoot":"","sources":["../../../../../src/canvas/components/StageNode/tasks/StageNodeSequentialTaskGroups.tsx"],"names":[],"mappings":"AAeA,OAAO,EAAE,KAAK,aAAa,EAAwB,MAAM,OAAO,CAAC;AAMjE,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAS1D,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AAOxF,eAAO,MAAM,6BAA6B,GAAI,4LAW3C;IACD,KAAK,EAAE,cAAc,CAAC;IACtB,oBAAoB,EAAE,aAAa,EAAE,EAAE,CAAC;IACxC,eAAe,EAAE,cAAc,EAAE,CAAC;IAClC,QAAQ,EAAE,aAAa,EAAE,EAAE,CAAC;IAC5B,UAAU,EAAE,OAAO,CAAC;IACpB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,cAAc,CAAC,EAAE,aAAa,CAAC;IAC/B,eAAe,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,EAAE,aAAa,EAAE,MAAM,KAAK,IAAI,CAAC;IACtE,4BAA4B,EAAE,CAAC,QAAQ,EAAE,aAAa,EAAE,EAAE,KAAK,IAAI,CAAC;IACpE,kCAAkC,EAAE,CAClC,MAAM,EAAE,MAAM,EACd,UAAU,EAAE,OAAO,KAChB,YAAY,GAAG,SAAS,CAAC;CAC/B,mDAwNA,CAAC"}
+{"version":3,"file":"StageNodeSequentialTaskGroups.d.ts","sourceRoot":"","sources":["../../../../../src/canvas/components/StageNode/tasks/StageNodeSequentialTaskGroups.tsx"],"names":[],"mappings":"AAeA,OAAO,EAAE,KAAK,aAAa,EAAwB,MAAM,OAAO,CAAC;AAMjE,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAS1D,OAAO,KAAK,EAAE,cAAc,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AAOxE,eAAO,MAAM,6BAA6B,GAAI,2KAU3C;IACD,KAAK,EAAE,cAAc,CAAC;IACtB,oBAAoB,EAAE,aAAa,EAAE,EAAE,CAAC;IACxC,QAAQ,EAAE,aAAa,EAAE,EAAE,CAAC;IAC5B,UAAU,EAAE,OAAO,CAAC;IACpB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,cAAc,CAAC,EAAE,aAAa,CAAC;IAC/B,eAAe,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,EAAE,aAAa,EAAE,MAAM,KAAK,IAAI,CAAC;IACtE,4BAA4B,EAAE,CAAC,QAAQ,EAAE,aAAa,EAAE,EAAE,KAAK,IAAI,CAAC;IACpE,kCAAkC,EAAE,CAClC,MAAM,EAAE,MAAM,EACd,UAAU,EAAE,OAAO,KAChB,YAAY,GAAG,SAAS,CAAC;CAC/B,mDAyNA,CAAC"}

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

@@ -12,16 +12,16 @@ import { useStageNodeLabels } from "../useStageNodeLabels.js";
 import { DraggableTask } from "./DraggableTask.js";
 import { getContextMenuItems, getDivider } from "./StageNodeTaskUtilities.js";
 import { StageTaskDragOverlay } from "./StageTaskDragOverlay.js";
-const StageNodeSequentialTaskGroups = ({ props, sequentialTaskGroups, sequentialTasks, allTasks, isReadOnly, selectedTaskId, taskWidthStyle, handleTaskClick, handleReorderSequentialTasks, generateReplaceTaskMenuItemForTask })=>{
+const StageNodeSequentialTaskGroups = ({ props, sequentialTaskGroups, allTasks, isReadOnly, selectedTaskId, taskWidthStyle, handleTaskClick, handleReorderSequentialTasks, generateReplaceTaskMenuItemForTask })=>{
     const { id, execution, onTaskGroupModification, onReplaceTaskFromToolbox, onTaskReorder, hideParallelOptions, loadingTaskIds, onTaskBreakpointToggle, getTaskContextMenuItems } = props;
     const hasBuiltInTaskActions = !!(onReplaceTaskFromToolbox || onTaskGroupModification);
+    const isDragDisabled = !onTaskReorder || isReadOnly;
     const labels = useStageNodeLabels();
-    const sequentialTaskIds = useMemo(()=>sequentialTasks.map(({ task })=>task.id), [
-        sequentialTasks
+    const sequentialTaskIds = useMemo(()=>sequentialTaskGroups.flat().map((task)=>task.id), [
+        sequentialTaskGroups
     ]);
-    const { activeDragId, activeSequentialTask, isActiveTaskParallel, projected, handleDragStart, handleDragMove, handleDragOver, handleDragEnd, handleDragCancel } = useStageTaskDragHandler({
-        sequentialTaskGroups,
-        sequentialTasks,
+    const { activeTask, isActiveTaskParallel, handleDragStart, handleDragMove, handleDragEnd, handleDragCancel } = useStageTaskDragHandler({
+        taskGroups: sequentialTaskGroups,
         onTaskReorder: handleReorderSequentialTasks
     });
     const handleTaskRegroup = useCallback((groupModificationType, groupIndex, taskIndex)=>{
@@ -96,6 +96,50 @@ const StageNodeSequentialTaskGroups = ({ props, sequentialTaskGroups, sequential
     }), useSensor(KeyboardSensor, {
         coordinateGetter: sortableKeyboardCoordinates
     }));
+    const taskList = /*#__PURE__*/ jsx(StageItemsList, {
+        "data-testid": `sequential-tasks-list-${id}`,
+        className: "nodrag nopan",
+        children: sequentialTaskGroups.map((taskGroup, groupIndex)=>{
+            const isParallel = taskGroup.length > 1;
+            return /*#__PURE__*/ jsxs(Row, {
+                gap: Spacing.SpacingS,
+                children: [
+                    isParallel && /*#__PURE__*/ jsx(StageParallelBracket, {}),
+                    /*#__PURE__*/ jsxs(StageTaskGroupContainer, {
+                        isParallel: isParallel,
+                        children: [
+                            isParallel && /*#__PURE__*/ jsx(StageParallelLabel, {
+                                children: /*#__PURE__*/ jsx("span", {
+                                    className: "text-xs",
+                                    children: labels.parallel
+                                })
+                            }),
+                            taskGroup.map((task)=>{
+                                const taskExecution = execution?.taskStatus?.[task.id];
+                                const hasMenu = !isReadOnly && hasBuiltInTaskActions || (getTaskContextMenuItems?.({
+                                    task,
+                                    taskGroupType: 'sequential',
+                                    isParallel
+                                })?.length ?? 0) > 0;
+                                return /*#__PURE__*/ jsx(DraggableTask, {
+                                    task: task,
+                                    taskExecution: taskExecution,
+                                    isSelected: selectedTaskId === task.id,
+                                    isParallel: isParallel,
+                                    onTaskClick: handleTaskClick,
+                                    isDragDisabled: isDragDisabled,
+                                    isTaskLoading: loadingTaskIds?.has(task.id),
+                                    isReadOnly: isReadOnly,
+                                    onToggleBreakpoint: isReadOnly ? onTaskBreakpointToggle : void 0,
+                                    getContextMenuItems: hasMenu ? buildContextMenuItems : void 0
+                                }, task.id);
+                            })
+                        ]
+                    })
+                ]
+            }, `group-${groupIndex}`);
+        })
+    });
     if (0 === sequentialTaskGroups.length) return null;
     return /*#__PURE__*/ jsxs(StageItemsSection, {
         children: [
@@ -103,66 +147,21 @@ const StageNodeSequentialTaskGroups = ({ props, sequentialTaskGroups, sequential
                 title: labels.sequentialTasks,
                 testId: `sequential-tasks-header-${id}`
             }),
-            /*#__PURE__*/ jsxs(DndContext, {
+            isDragDisabled ? taskList : /*#__PURE__*/ jsxs(DndContext, {
                 collisionDetection: closestCenter,
                 sensors: sensors,
                 onDragStart: handleDragStart,
                 onDragMove: handleDragMove,
-                onDragOver: handleDragOver,
                 onDragEnd: handleDragEnd,
                 onDragCancel: handleDragCancel,
                 children: [
                     /*#__PURE__*/ jsx(SortableContext, {
                         items: sequentialTaskIds,
                         strategy: verticalListSortingStrategy,
-                        children: /*#__PURE__*/ jsx(StageItemsList, {
-                            "data-testid": `sequential-tasks-list-${id}`,
-                            className: "nodrag nopan",
-                            children: sequentialTaskGroups.map((taskGroup, groupIndex)=>{
-                                const isParallel = taskGroup.length > 1;
-                                return /*#__PURE__*/ jsxs(Row, {
-                                    gap: Spacing.SpacingS,
-                                    children: [
-                                        isParallel && /*#__PURE__*/ jsx(StageParallelBracket, {}),
-                                        /*#__PURE__*/ jsxs(StageTaskGroupContainer, {
-                                            isParallel: isParallel,
-                                            children: [
-                                                isParallel && /*#__PURE__*/ jsx(StageParallelLabel, {
-                                                    children: /*#__PURE__*/ jsx("span", {
-                                                        className: "text-xs",
-                                                        children: labels.parallel
-                                                    })
-                                                }),
-                                                taskGroup.map((task)=>{
-                                                    const taskExecution = execution?.taskStatus?.[task.id];
-                                                    const hasMenu = !isReadOnly && hasBuiltInTaskActions || (getTaskContextMenuItems?.({
-                                                        task,
-                                                        taskGroupType: 'sequential',
-                                                        isParallel
-                                                    })?.length ?? 0) > 0;
-                                                    return /*#__PURE__*/ jsx(DraggableTask, {
-                                                        task: task,
-                                                        taskExecution: taskExecution,
-                                                        isSelected: selectedTaskId === task.id,
-                                                        isParallel: isParallel,
-                                                        onTaskClick: handleTaskClick,
-                                                        projectedDepth: task.id === activeDragId && projected ? projected.depth : void 0,
-                                                        isDragDisabled: !onTaskReorder || isReadOnly,
-                                                        isTaskLoading: loadingTaskIds?.has(task.id),
-                                                        isReadOnly: isReadOnly,
-                                                        onToggleBreakpoint: isReadOnly ? onTaskBreakpointToggle : void 0,
-                                                        getContextMenuItems: hasMenu ? buildContextMenuItems : void 0
-                                                    }, task.id);
-                                                })
-                                            ]
-                                        })
-                                    ]
-                                }, `group-${groupIndex}`);
-                            })
-                        })
+                        children: taskList
                     }),
                     /*#__PURE__*/ jsx(StageTaskDragOverlay, {
-                        activeTask: activeSequentialTask?.task,
+                        activeTask: activeTask,
                         isActiveTaskParallel: isActiveTaskParallel,
                         taskWidthStyle: taskWidthStyle
                     })

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

@@ -121,6 +121,7 @@ const TaskPlayButton = /*#__PURE__*/ (0, external_react_namespaceObject.memo)(({
             size: "icon",
             "data-testid": `stage-task-play-${taskId}`,
             onClick: handlePlayClick,
+            onPointerDown: (e)=>e.stopPropagation(),
             onMouseDown: (e)=>e.stopPropagation(),
             onKeyDown: (e)=>e.stopPropagation(),
             "aria-label": triggerTaskLabel,

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

@@ -1 +1 @@
-{"version":3,"file":"TaskContent.d.ts","sourceRoot":"","sources":["../../../../../src/canvas/components/StageNode/tasks/TaskContent.tsx"],"names":[],"mappings":"AAWA,OAAO,KAAK,EAAE,kBAAkB,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AAuE5E,MAAM,WAAW,gBAAgB;IAC/B,IAAI,EAAE,aAAa,CAAC;IACpB,aAAa,CAAC,EAAE,kBAAkB,CAAC;IACnC,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,UAAU,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IAC/C,eAAe,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CACnC;AAED,eAAO,MAAM,WAAW,yGAC6C,gBAAgB,6CAoKpF,CAAC"}
+{"version":3,"file":"TaskContent.d.ts","sourceRoot":"","sources":["../../../../../src/canvas/components/StageNode/tasks/TaskContent.tsx"],"names":[],"mappings":"AAWA,OAAO,KAAK,EAAE,kBAAkB,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AAyE5E,MAAM,WAAW,gBAAgB;IAC/B,IAAI,EAAE,aAAa,CAAC;IACpB,aAAa,CAAC,EAAE,kBAAkB,CAAC;IACnC,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,UAAU,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IAC/C,eAAe,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CACnC;AAED,eAAO,MAAM,WAAW,yGAC6C,gBAAgB,6CAoKpF,CAAC"}

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

@@ -83,6 +83,7 @@ const TaskPlayButton = /*#__PURE__*/ memo(({ taskId, onTaskPlay })=>{
             size: "icon",
             "data-testid": `stage-task-play-${taskId}`,
             onClick: handlePlayClick,
+            onPointerDown: (e)=>e.stopPropagation(),
             onMouseDown: (e)=>e.stopPropagation(),
             onKeyDown: (e)=>e.stopPropagation(),
             "aria-label": triggerTaskLabel,

package/dist/canvas/controls/NodeOutputModeSelect/NodeOutputModeSelect.cjs

@@ -69,18 +69,6 @@ const MODE_DEFS = [
             id: "canvas.node_mode_select.simulated_description",
             message: 'Generate a response dynamically using an LLM'
         }
-    },
-    {
-        value: 'disabled',
-        icon: external_lucide_react_namespaceObject.CircleOff,
-        label: {
-            id: 'canvas.node_mode_select.disabled_label',
-            message: 'Skip node'
-        },
-        description: {
-            id: "canvas.node_mode_select.disabled_description",
-            message: "Don't execute this node"
-        }
     }
 ];
 const DEFAULT_NODE_OUTPUT_MODES = MODE_DEFS.map((mode)=>({
@@ -112,24 +100,24 @@ function NodeOutputModeSelect({ value, onChange, options, disabled = false, clas
             /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(apollo_wind_namespaceObject.DropdownMenuTrigger, {
                 asChild: true,
                 disabled: disabled,
-                children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("button", {
-                    type: "button",
+                children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(apollo_wind_namespaceObject.Button, {
+                    variant: "ghost",
+                    size: "3xs",
                     disabled: disabled,
                     "aria-label": _({
                         id: 'canvas.node_mode_select.node_mode',
-                        message: 'Node mode'
+                        message: 'Node output mode'
                     }),
-                    className: (0, apollo_wind_namespaceObject.cn)('flex cursor-pointer items-center gap-1.5 rounded-full border border-border px-2 py-0.5 text-[11px] font-medium text-foreground-muted transition hover:bg-surface-overlay hover:text-foreground', disabled && 'cursor-default opacity-60 hover:bg-transparent hover:text-foreground-muted', className),
+                    className: (0, apollo_wind_namespaceObject.cn)('min-w-12 gap-1.5 rounded-full border border-border px-2 text-[11px] font-medium text-foreground-muted hover:bg-surface-overlay hover:text-foreground [&_svg]:size-2.5', className),
                     children: [
                         CurrentIcon && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(CurrentIcon, {
-                            size: 10,
                             className: "text-foreground-subtle"
                         }),
                         /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
+                            className: "min-w-0 flex-1 truncate shrink-0",
                             children: current?.label
                         }),
                         /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_lucide_react_namespaceObject.ChevronDown, {
-                            size: 10,
                             className: "text-foreground-subtle"
                         })
                     ]

package/dist/canvas/controls/NodeOutputModeSelect/NodeOutputModeSelect.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"NodeOutputModeSelect.d.ts","sourceRoot":"","sources":["../../../../src/canvas/controls/NodeOutputModeSelect/NodeOutputModeSelect.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAK/C,MAAM,WAAW,oBAAoB;IACnC,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,IAAI,CAAC,EAAE,UAAU,CAAC;CACnB;AAiDD,eAAO,MAAM,yBAAyB,EAAE,oBAAoB,EAKzD,CAAC;AAGJ,wBAAgB,yBAAyB,IAAI,oBAAoB,EAAE,CAYlE;AAED,MAAM,WAAW,yBAAyB;IAExC,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAElC,OAAO,CAAC,EAAE,oBAAoB,EAAE,CAAC;IACjC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAGD,wBAAgB,oBAAoB,CAAC,EACnC,KAAK,EACL,QAAQ,EACR,OAAO,EACP,QAAgB,EAChB,SAAS,GACV,EAAE,yBAAyB,2CAiE3B"}
+{"version":3,"file":"NodeOutputModeSelect.d.ts","sourceRoot":"","sources":["../../../../src/canvas/controls/NodeOutputModeSelect/NodeOutputModeSelect.tsx"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAK/C,MAAM,WAAW,oBAAoB;IACnC,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,IAAI,CAAC,EAAE,UAAU,CAAC;CACnB;AAwCD,eAAO,MAAM,yBAAyB,EAAE,oBAAoB,EAKzD,CAAC;AAGJ,wBAAgB,yBAAyB,IAAI,oBAAoB,EAAE,CAYlE;AAED,MAAM,WAAW,yBAAyB;IAExC,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAElC,OAAO,CAAC,EAAE,oBAAoB,EAAE,CAAC;IACjC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAGD,wBAAgB,oBAAoB,CAAC,EACnC,KAAK,EACL,QAAQ,EACR,OAAO,EACP,QAAgB,EAChB,SAAS,GACV,EAAE,yBAAyB,2CAgE3B"}

package/dist/canvas/controls/NodeOutputModeSelect/NodeOutputModeSelect.js

@@ -1,6 +1,6 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import { DropdownMenu, DropdownMenuContent, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuTrigger, cn } from "@uipath/apollo-wind";
-import { ChevronDown, CircleDot, CircleOff, FileBracesCorner, Sparkles } from "lucide-react";
+import { Button, DropdownMenu, DropdownMenuContent, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuTrigger, cn } from "@uipath/apollo-wind";
+import { ChevronDown, CircleDot, FileBracesCorner, Sparkles } from "lucide-react";
 import { useMemo } from "react";
 import { useSafeLingui } from "../../../i18n/index.js";
 const MODE_DEFS = [
@@ -39,18 +39,6 @@ const MODE_DEFS = [
             id: "canvas.node_mode_select.simulated_description",
             message: 'Generate a response dynamically using an LLM'
         }
-    },
-    {
-        value: 'disabled',
-        icon: CircleOff,
-        label: {
-            id: 'canvas.node_mode_select.disabled_label',
-            message: 'Skip node'
-        },
-        description: {
-            id: "canvas.node_mode_select.disabled_description",
-            message: "Don't execute this node"
-        }
     }
 ];
 const DEFAULT_NODE_OUTPUT_MODES = MODE_DEFS.map((mode)=>({
@@ -82,24 +70,24 @@ function NodeOutputModeSelect({ value, onChange, options, disabled = false, clas
             /*#__PURE__*/ jsx(DropdownMenuTrigger, {
                 asChild: true,
                 disabled: disabled,
-                children: /*#__PURE__*/ jsxs("button", {
-                    type: "button",
+                children: /*#__PURE__*/ jsxs(Button, {
+                    variant: "ghost",
+                    size: "3xs",
                     disabled: disabled,
                     "aria-label": _({
                         id: 'canvas.node_mode_select.node_mode',
-                        message: 'Node mode'
+                        message: 'Node output mode'
                     }),
-                    className: cn('flex cursor-pointer items-center gap-1.5 rounded-full border border-border px-2 py-0.5 text-[11px] font-medium text-foreground-muted transition hover:bg-surface-overlay hover:text-foreground', disabled && 'cursor-default opacity-60 hover:bg-transparent hover:text-foreground-muted', className),
+                    className: cn('min-w-12 gap-1.5 rounded-full border border-border px-2 text-[11px] font-medium text-foreground-muted hover:bg-surface-overlay hover:text-foreground [&_svg]:size-2.5', className),
                     children: [
                         CurrentIcon && /*#__PURE__*/ jsx(CurrentIcon, {
-                            size: 10,
                             className: "text-foreground-subtle"
                         }),
                         /*#__PURE__*/ jsx("span", {
+                            className: "min-w-0 flex-1 truncate shrink-0",
                             children: current?.label
                         }),
                         /*#__PURE__*/ jsx(ChevronDown, {
-                            size: 10,
                             className: "text-foreground-subtle"
                         })
                     ]