@uipath/apollo-react 6.22.3 → 6.23.0

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

@@ -1,14 +1,12 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import { useSortable } from "@dnd-kit/sortable";
-import { CSS } from "@dnd-kit/utilities";
-import { useStore } from "../../../xyflow/react.js";
-import { memo, useCallback, useMemo, useRef } from "react";
-import { INDENTATION_WIDTH, StageItemPill, StageTaskDragPlaceholder, StageTaskDragPlaceholderWrapper, StageTaskWrapper } from "../StageNode.styles.js";
+import { memo, useCallback, useRef } from "react";
+import { StageItemPill } from "../StageNode.styles.js";
+import { SortableTaskRow } from "./SortableTaskRow.js";
 import { TaskBreakpointDot } from "./TaskBreakpointDot.js";
 import { TaskContent } from "./TaskContent.js";
 import { TaskMenu } from "./TaskMenu.js";
 import { TaskMockedChip } from "./TaskMockedChip.js";
-const DraggableTaskComponent = ({ task, taskExecution, isSelected, isParallel, getContextMenuItems, onTaskClick, isDragDisabled, projectedDepth, isTaskLoading, isReadOnly, onToggleBreakpoint })=>{
+const DraggableTaskComponent = ({ task, taskExecution, isSelected, isParallel, getContextMenuItems, onTaskClick, isDragDisabled, isTaskLoading, isReadOnly, onToggleBreakpoint })=>{
     const taskRef = useRef(null);
     const menuRef = useRef(null);
     const handleClick = useCallback((e)=>{
@@ -20,44 +18,6 @@ const DraggableTaskComponent = ({ task, taskExecution, isSelected, isParallel, g
     const handleContextMenu = useCallback((e)=>{
         menuRef.current?.handleContextMenu(e);
     }, []);
-    const { attributes, listeners, setNodeRef, transition, transform, isDragging } = useSortable({
-        id: task.id,
-        disabled: isDragDisabled
-    });
-    const zoom = useStore((s)=>transform ? s.transform[2] : 1);
-    const style = useMemo(()=>{
-        const scaledTransform = transform ? {
-            ...transform,
-            x: transform.x / zoom,
-            y: transform.y / zoom
-        } : null;
-        let marginLeft;
-        if (isDragging && void 0 !== projectedDepth) if (1 !== projectedDepth || isParallel) {
-            if (0 === projectedDepth && isParallel) marginLeft = `-${INDENTATION_WIDTH}px`;
-        } else marginLeft = `${INDENTATION_WIDTH}px`;
-        return {
-            transition,
-            transform: CSS.Transform.toString(scaledTransform),
-            marginLeft
-        };
-    }, [
-        transform,
-        zoom,
-        transition,
-        isDragging,
-        projectedDepth,
-        isParallel
-    ]);
-    if (isDragging) {
-        const isTargetParallel = 1 === projectedDepth;
-        return /*#__PURE__*/ jsx(StageTaskDragPlaceholderWrapper, {
-            ref: setNodeRef,
-            style: style,
-            children: /*#__PURE__*/ jsx(StageTaskDragPlaceholder, {
-                isTargetParallel: isTargetParallel
-            })
-        });
-    }
     const taskElement = /*#__PURE__*/ jsxs(StageItemPill, {
         ref: taskRef,
         "data-testid": `stage-task-card-${task.id}`,
@@ -95,12 +55,9 @@ const DraggableTaskComponent = ({ task, taskExecution, isSelected, isParallel, g
         ]
     });
     if (isDragDisabled) return taskElement;
-    return /*#__PURE__*/ jsx(StageTaskWrapper, {
-        ref: setNodeRef,
-        style: style,
+    return /*#__PURE__*/ jsx(SortableTaskRow, {
+        taskId: task.id,
         isParallel: isParallel,
-        ...attributes,
-        ...listeners,
         children: taskElement
     });
 };

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

@@ -9,7 +9,6 @@ export interface DraggableTaskProps {
     onTaskClick: (e: React.MouseEvent, taskId: string) => void;
     onTaskPlay?: (taskId: string) => Promise<void>;
     isDragDisabled?: boolean;
-    projectedDepth?: number;
     isTaskLoading?: boolean;
     isReadOnly?: boolean;
     onToggleBreakpoint?: (taskId: string) => void;

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

@@ -1 +1 @@
-{"version":3,"file":"DraggableTask.types.d.ts","sourceRoot":"","sources":["../../../../../src/canvas/components/StageNode/tasks/DraggableTask.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAC1D,OAAO,KAAK,EAAE,kBAAkB,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AAE5E,MAAM,WAAW,kBAAkB;IACjC,IAAI,EAAE,aAAa,CAAC;IACpB,aAAa,CAAC,EAAE,kBAAkB,CAAC;IACnC,UAAU,EAAE,OAAO,CAAC;IACpB,UAAU,EAAE,OAAO,CAAC;IAGpB,mBAAmB,CAAC,EAAE,CAAC,IAAI,EAAE,aAAa,KAAK,YAAY,EAAE,CAAC;IAC9D,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;IACxB,aAAa,CAAC,EAAE,OAAO,CAAC;IAExB,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB,kBAAkB,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;CAC/C"}
+{"version":3,"file":"DraggableTask.types.d.ts","sourceRoot":"","sources":["../../../../../src/canvas/components/StageNode/tasks/DraggableTask.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAC1D,OAAO,KAAK,EAAE,kBAAkB,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AAE5E,MAAM,WAAW,kBAAkB;IACjC,IAAI,EAAE,aAAa,CAAC;IACpB,aAAa,CAAC,EAAE,kBAAkB,CAAC;IACnC,UAAU,EAAE,OAAO,CAAC;IACpB,UAAU,EAAE,OAAO,CAAC;IAGpB,mBAAmB,CAAC,EAAE,CAAC,IAAI,EAAE,aAAa,KAAK,YAAY,EAAE,CAAC;IAC9D,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,aAAa,CAAC,EAAE,OAAO,CAAC;IAExB,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB,kBAAkB,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;CAC/C"}

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

@@ -0,0 +1,75 @@
+"use strict";
+var __webpack_require__ = {};
+(()=>{
+    __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__, {
+    SortableTaskRow: ()=>SortableTaskRow
+});
+const jsx_runtime_namespaceObject = require("react/jsx-runtime");
+const sortable_namespaceObject = require("@dnd-kit/sortable");
+const utilities_namespaceObject = require("@dnd-kit/utilities");
+const react_cjs_namespaceObject = require("../../../xyflow/react.cjs");
+const external_react_namespaceObject = require("react");
+const external_StageNode_styles_cjs_namespaceObject = require("../StageNode.styles.cjs");
+const SortableTaskRowComponent = ({ taskId, isParallel, children })=>{
+    const { attributes, listeners, setNodeRef, transition, transform, isDragging } = (0, sortable_namespaceObject.useSortable)({
+        id: taskId
+    });
+    const zoom = (0, react_cjs_namespaceObject.useStore)((s)=>transform ? s.transform[2] : 1);
+    const style = (0, external_react_namespaceObject.useMemo)(()=>({
+            transition,
+            transform: utilities_namespaceObject.CSS.Transform.toString(transform ? {
+                ...transform,
+                x: transform.x / zoom,
+                y: transform.y / zoom
+            } : null)
+        }), [
+        transform,
+        zoom,
+        transition
+    ]);
+    if (isDragging) return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_StageNode_styles_cjs_namespaceObject.StageTaskDragPlaceholderWrapper, {
+        ref: setNodeRef,
+        style: style,
+        children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_StageNode_styles_cjs_namespaceObject.StageTaskDragPlaceholder, {
+            isTargetParallel: isParallel
+        })
+    });
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_StageNode_styles_cjs_namespaceObject.StageTaskWrapper, {
+        ref: setNodeRef,
+        style: style,
+        isParallel: isParallel,
+        ...attributes,
+        ...listeners,
+        children: children
+    });
+};
+const SortableTaskRow = /*#__PURE__*/ (0, external_react_namespaceObject.memo)(SortableTaskRowComponent);
+exports.SortableTaskRow = __webpack_exports__.SortableTaskRow;
+for(var __rspack_i in __webpack_exports__)if (-1 === [
+    "SortableTaskRow"
+].indexOf(__rspack_i)) exports[__rspack_i] = __webpack_exports__[__rspack_i];
+Object.defineProperty(exports, '__esModule', {
+    value: true
+});

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

@@ -0,0 +1,7 @@
+import { type ReactNode } from 'react';
+export declare const SortableTaskRow: import("react").MemoExoticComponent<({ taskId, isParallel, children, }: {
+    taskId: string;
+    isParallel?: boolean;
+    children: ReactNode;
+}) => import("react/jsx-runtime").JSX.Element>;
+//# sourceMappingURL=SortableTaskRow.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SortableTaskRow.d.ts","sourceRoot":"","sources":["../../../../../src/canvas/components/StageNode/tasks/SortableTaskRow.tsx"],"names":[],"mappings":"AAGA,OAAO,EAA4B,KAAK,SAAS,EAAW,MAAM,OAAO,CAAC;AAyD1E,eAAO,MAAM,eAAe,0EA5CzB;IACD,MAAM,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,QAAQ,EAAE,SAAS,CAAC;CACrB,6CAwC4D,CAAC"}

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

@@ -0,0 +1,41 @@
+import { jsx } from "react/jsx-runtime";
+import { useSortable } from "@dnd-kit/sortable";
+import { CSS } from "@dnd-kit/utilities";
+import { useStore } from "../../../xyflow/react.js";
+import { memo, useMemo } from "react";
+import { StageTaskDragPlaceholder, StageTaskDragPlaceholderWrapper, StageTaskWrapper } from "../StageNode.styles.js";
+const SortableTaskRowComponent = ({ taskId, isParallel, children })=>{
+    const { attributes, listeners, setNodeRef, transition, transform, isDragging } = useSortable({
+        id: taskId
+    });
+    const zoom = useStore((s)=>transform ? s.transform[2] : 1);
+    const style = useMemo(()=>({
+            transition,
+            transform: CSS.Transform.toString(transform ? {
+                ...transform,
+                x: transform.x / zoom,
+                y: transform.y / zoom
+            } : null)
+        }), [
+        transform,
+        zoom,
+        transition
+    ]);
+    if (isDragging) return /*#__PURE__*/ jsx(StageTaskDragPlaceholderWrapper, {
+        ref: setNodeRef,
+        style: style,
+        children: /*#__PURE__*/ jsx(StageTaskDragPlaceholder, {
+            isTargetParallel: isParallel
+        })
+    });
+    return /*#__PURE__*/ jsx(StageTaskWrapper, {
+        ref: setNodeRef,
+        style: style,
+        isParallel: isParallel,
+        ...attributes,
+        ...listeners,
+        children: children
+    });
+};
+const SortableTaskRow = /*#__PURE__*/ memo(SortableTaskRowComponent);
+export { SortableTaskRow };

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

@@ -27,15 +27,40 @@ __webpack_require__.d(__webpack_exports__, {
     StageNodeAdhocTaskGroups: ()=>StageNodeAdhocTaskGroups
 });
 const jsx_runtime_namespaceObject = require("react/jsx-runtime");
+const core_namespaceObject = require("@dnd-kit/core");
+const sortable_namespaceObject = require("@dnd-kit/sortable");
 const external_react_namespaceObject = require("react");
+const useStageTaskDragHandler_cjs_namespaceObject = require("../hooks/useStageTaskDragHandler.cjs");
 const external_StageNode_styles_cjs_namespaceObject = require("../StageNode.styles.cjs");
 const StageItemsHeaderTitle_cjs_namespaceObject = require("../shared/StageItemsHeaderTitle.cjs");
 const external_useStageNodeLabels_cjs_namespaceObject = require("../useStageNodeLabels.cjs");
 const external_AdhocTask_cjs_namespaceObject = require("./AdhocTask.cjs");
-const StageNodeAdhocTaskGroupsInner = ({ props, adhocTasks, isReadOnly, selectedTaskId, handleTaskClick, generateReplaceTaskMenuItemForTask, generateDeleteTaskMenuItemForTask })=>{
-    const { id, execution, onTaskGroupModification, onReplaceTaskFromToolbox, onTaskPlay, loadingTaskIds, onTaskBreakpointToggle, getTaskContextMenuItems } = props;
+const external_SortableTaskRow_cjs_namespaceObject = require("./SortableTaskRow.cjs");
+const external_StageNodeTaskUtilities_cjs_namespaceObject = require("./StageNodeTaskUtilities.cjs");
+const external_StageTaskDragOverlay_cjs_namespaceObject = require("./StageTaskDragOverlay.cjs");
+const StageNodeAdhocTaskGroupsInner = ({ props, adhocTaskGroups, isReadOnly, selectedTaskId, taskWidthStyle, handleTaskClick, handleReorderAdhocTasks, generateReplaceTaskMenuItemForTask, generateDeleteTaskMenuItemForTask })=>{
+    const { id, execution, onTaskGroupModification, onReplaceTaskFromToolbox, onTaskReorder, onTaskPlay, loadingTaskIds, onTaskBreakpointToggle, getTaskContextMenuItems } = props;
     const hasBuiltInTaskActions = !!(onReplaceTaskFromToolbox || onTaskGroupModification);
     const labels = (0, external_useStageNodeLabels_cjs_namespaceObject.useStageNodeLabels)();
+    const isDragDisabled = !onTaskReorder || isReadOnly;
+    const rows = (0, external_react_namespaceObject.useMemo)(()=>adhocTaskGroups.flat(), [
+        adhocTaskGroups
+    ]);
+    const rowIds = (0, external_react_namespaceObject.useMemo)(()=>rows.map((task)=>task.id), [
+        rows
+    ]);
+    const { activeTask, handleDragStart, handleDragEnd, handleDragCancel } = (0, useStageTaskDragHandler_cjs_namespaceObject.useStageTaskDragHandler)({
+        taskGroups: adhocTaskGroups,
+        onTaskReorder: handleReorderAdhocTasks,
+        allowRegrouping: false
+    });
+    const sensors = (0, core_namespaceObject.useSensors)((0, core_namespaceObject.useSensor)(core_namespaceObject.PointerSensor, {
+        activationConstraint: {
+            distance: 3
+        }
+    }), (0, core_namespaceObject.useSensor)(core_namespaceObject.KeyboardSensor, {
+        coordinateGetter: sortable_namespaceObject.sortableKeyboardCoordinates
+    }));
     const getAdhocContextMenuItems = (0, external_react_namespaceObject.useCallback)((task)=>{
         const items = [];
         const replaceTaskMenuItem = generateReplaceTaskMenuItemForTask(task.id, false);
@@ -47,41 +72,68 @@ const StageNodeAdhocTaskGroupsInner = ({ props, adhocTasks, isReadOnly, selected
         }) ?? [];
         items.push(...additionalMenuItems);
         const deleteTaskMenuItem = generateDeleteTaskMenuItemForTask(task.id);
-        if (deleteTaskMenuItem) items.push(deleteTaskMenuItem);
+        if (deleteTaskMenuItem) {
+            if (items.length) items.push((0, external_StageNodeTaskUtilities_cjs_namespaceObject.getDivider)());
+            items.push(deleteTaskMenuItem);
+        }
         return items;
     }, [
         generateReplaceTaskMenuItemForTask,
         getTaskContextMenuItems,
         generateDeleteTaskMenuItemForTask
     ]);
-    if (0 === adhocTasks.length) return null;
+    const taskList = /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_StageNode_styles_cjs_namespaceObject.StageItemsList, {
+        "data-testid": `adhoc-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: 'adhoc',
+                isParallel: false
+            })?.length ?? 0) > 0;
+            const row = /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_AdhocTask_cjs_namespaceObject.AdhocTaskItem, {
+                task: task,
+                taskExecution: taskExecution,
+                isSelected: selectedTaskId === task.id,
+                onTaskClick: handleTaskClick,
+                onTaskPlay: onTaskPlay,
+                isTaskLoading: loadingTaskIds?.has(task.id),
+                isReadOnly: isReadOnly,
+                onToggleBreakpoint: isReadOnly ? onTaskBreakpointToggle : void 0,
+                getContextMenuItems: hasMenu ? getAdhocContextMenuItems : void 0
+            }, task.id);
+            return isDragDisabled ? row : /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_SortableTaskRow_cjs_namespaceObject.SortableTaskRow, {
+                taskId: task.id,
+                children: row
+            }, task.id);
+        })
+    });
+    if (0 === rows.length) return null;
     return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(external_StageNode_styles_cjs_namespaceObject.StageItemsSection, {
         children: [
             /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(StageItemsHeaderTitle_cjs_namespaceObject.StageItemsHeaderTitle, {
                 title: labels.adhocTasks,
                 testId: `adhoc-tasks-header-${id}`
             }),
-            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_StageNode_styles_cjs_namespaceObject.StageItemsList, {
-                "data-testid": `adhoc-tasks-list-${id}`,
-                children: adhocTasks.map(({ task })=>{
-                    const taskExecution = execution?.taskStatus?.[task.id];
-                    const hasMenu = !isReadOnly && hasBuiltInTaskActions || (getTaskContextMenuItems?.({
-                        task,
-                        taskGroupType: 'adhoc',
-                        isParallel: false
-                    })?.length ?? 0) > 0;
-                    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_AdhocTask_cjs_namespaceObject.AdhocTaskItem, {
-                        task: task,
-                        taskExecution: taskExecution,
-                        isSelected: selectedTaskId === task.id,
-                        onTaskClick: handleTaskClick,
-                        onTaskPlay: onTaskPlay,
-                        isTaskLoading: loadingTaskIds?.has(task.id),
-                        isReadOnly: isReadOnly,
-                        onToggleBreakpoint: isReadOnly ? onTaskBreakpointToggle : void 0,
-                        getContextMenuItems: hasMenu ? getAdhocContextMenuItems : void 0
-                    }, task.id);
-                })
+            isDragDisabled ? taskList : /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(core_namespaceObject.DndContext, {
+                collisionDetection: core_namespaceObject.closestCenter,
+                sensors: sensors,
+                onDragStart: handleDragStart,
+                onDragEnd: handleDragEnd,
+                onDragCancel: handleDragCancel,
+                children: [
+                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(sortable_namespaceObject.SortableContext, {
+                        items: rowIds,
+                        strategy: sortable_namespaceObject.verticalListSortingStrategy,
+                        children: taskList
+                    }),
+                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_StageTaskDragOverlay_cjs_namespaceObject.StageTaskDragOverlay, {
+                        activeTask: activeTask,
+                        isActiveTaskParallel: false,
+                        taskWidthStyle: taskWidthStyle
+                    })
+                ]
             })
         ]
     });

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

@@ -1,11 +1,14 @@
+import { type CSSProperties } from 'react';
 import type { NodeMenuItem } from '../../NodeContextMenu';
-import type { StageNodeProps, StageTaskGroup } from '../StageNode.types';
-export declare const StageNodeAdhocTaskGroups: import("react").MemoExoticComponent<({ props, adhocTasks, isReadOnly, selectedTaskId, handleTaskClick, generateReplaceTaskMenuItemForTask, generateDeleteTaskMenuItemForTask, }: {
+import type { StageNodeProps, StageTaskItem } from '../StageNode.types';
+export declare const StageNodeAdhocTaskGroups: import("react").MemoExoticComponent<({ props, adhocTaskGroups, isReadOnly, selectedTaskId, taskWidthStyle, handleTaskClick, handleReorderAdhocTasks, generateReplaceTaskMenuItemForTask, generateDeleteTaskMenuItemForTask, }: {
     props: StageNodeProps;
-    adhocTasks: StageTaskGroup[];
+    adhocTaskGroups: StageTaskItem[][];
     isReadOnly: boolean;
     selectedTaskId?: string;
+    taskWidthStyle?: CSSProperties;
     handleTaskClick: (e: React.MouseEvent, taskElementId: string) => void;
+    handleReorderAdhocTasks: (newTasks: StageTaskItem[][]) => void;
     generateReplaceTaskMenuItemForTask: (taskId: string, isParallel: boolean) => NodeMenuItem | undefined;
     generateDeleteTaskMenuItemForTask: (taskId: string) => NodeMenuItem | undefined;
 }) => import("react/jsx-runtime").JSX.Element | null>;

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

@@ -1 +1 @@
-{"version":3,"file":"StageNodeAdhocTaskGroups.d.ts","sourceRoot":"","sources":["../../../../../src/canvas/components/StageNode/tasks/StageNodeAdhocTaskGroups.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAE1D,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAiB,MAAM,oBAAoB,CAAC;AAoGxF,eAAO,MAAM,wBAAwB,mLAvFlC;IACD,KAAK,EAAE,cAAc,CAAC;IACtB,UAAU,EAAE,cAAc,EAAE,CAAC;IAC7B,UAAU,EAAE,OAAO,CAAC;IACpB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,eAAe,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,EAAE,aAAa,EAAE,MAAM,KAAK,IAAI,CAAC;IACtE,kCAAkC,EAAE,CAClC,MAAM,EAAE,MAAM,EACd,UAAU,EAAE,OAAO,KAChB,YAAY,GAAG,SAAS,CAAC;IAC9B,iCAAiC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,YAAY,GAAG,SAAS,CAAC;CACjF,oDA4E0E,CAAC"}
+{"version":3,"file":"StageNodeAdhocTaskGroups.d.ts","sourceRoot":"","sources":["../../../../../src/canvas/components/StageNode/tasks/StageNodeAdhocTaskGroups.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAE,KAAK,aAAa,EAA8B,MAAM,OAAO,CAAC;AACvE,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAG1D,OAAO,KAAK,EAAE,cAAc,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AAoKxE,eAAO,MAAM,wBAAwB,iOAlJlC;IACD,KAAK,EAAE,cAAc,CAAC;IACtB,eAAe,EAAE,aAAa,EAAE,EAAE,CAAC;IACnC,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,uBAAuB,EAAE,CAAC,QAAQ,EAAE,aAAa,EAAE,EAAE,KAAK,IAAI,CAAC;IAC/D,kCAAkC,EAAE,CAClC,MAAM,EAAE,MAAM,EACd,UAAU,EAAE,OAAO,KAChB,YAAY,GAAG,SAAS,CAAC;IAC9B,iCAAiC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,YAAY,GAAG,SAAS,CAAC;CACjF,oDAqI0E,CAAC"}

package/dist/canvas/components/StageNode/tasks/StageNodeAdhocTaskGroups.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 { AdhocTaskItem } from "./AdhocTask.js";
-const StageNodeAdhocTaskGroupsInner = ({ props, adhocTasks, isReadOnly, selectedTaskId, handleTaskClick, generateReplaceTaskMenuItemForTask, generateDeleteTaskMenuItemForTask })=>{
-    const { id, execution, onTaskGroupModification, onReplaceTaskFromToolbox, onTaskPlay, loadingTaskIds, onTaskBreakpointToggle, getTaskContextMenuItems } = props;
+import { SortableTaskRow } from "./SortableTaskRow.js";
+import { getDivider } from "./StageNodeTaskUtilities.js";
+import { StageTaskDragOverlay } from "./StageTaskDragOverlay.js";
+const StageNodeAdhocTaskGroupsInner = ({ props, adhocTaskGroups, isReadOnly, selectedTaskId, taskWidthStyle, handleTaskClick, handleReorderAdhocTasks, generateReplaceTaskMenuItemForTask, generateDeleteTaskMenuItemForTask })=>{
+    const { id, execution, onTaskGroupModification, onReplaceTaskFromToolbox, onTaskReorder, onTaskPlay, loadingTaskIds, onTaskBreakpointToggle, getTaskContextMenuItems } = props;
     const hasBuiltInTaskActions = !!(onReplaceTaskFromToolbox || onTaskGroupModification);
     const labels = useStageNodeLabels();
+    const isDragDisabled = !onTaskReorder || isReadOnly;
+    const rows = useMemo(()=>adhocTaskGroups.flat(), [
+        adhocTaskGroups
+    ]);
+    const rowIds = useMemo(()=>rows.map((task)=>task.id), [
+        rows
+    ]);
+    const { activeTask, handleDragStart, handleDragEnd, handleDragCancel } = useStageTaskDragHandler({
+        taskGroups: adhocTaskGroups,
+        onTaskReorder: handleReorderAdhocTasks,
+        allowRegrouping: false
+    });
+    const sensors = useSensors(useSensor(PointerSensor, {
+        activationConstraint: {
+            distance: 3
+        }
+    }), useSensor(KeyboardSensor, {
+        coordinateGetter: sortableKeyboardCoordinates
+    }));
     const getAdhocContextMenuItems = useCallback((task)=>{
         const items = [];
         const replaceTaskMenuItem = generateReplaceTaskMenuItemForTask(task.id, false);
@@ -19,41 +44,68 @@ const StageNodeAdhocTaskGroupsInner = ({ props, adhocTasks, isReadOnly, selected
         }) ?? [];
         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 === adhocTasks.length) return null;
+    const taskList = /*#__PURE__*/ jsx(StageItemsList, {
+        "data-testid": `adhoc-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: 'adhoc',
+                isParallel: false
+            })?.length ?? 0) > 0;
+            const row = /*#__PURE__*/ jsx(AdhocTaskItem, {
+                task: task,
+                taskExecution: taskExecution,
+                isSelected: selectedTaskId === task.id,
+                onTaskClick: handleTaskClick,
+                onTaskPlay: onTaskPlay,
+                isTaskLoading: loadingTaskIds?.has(task.id),
+                isReadOnly: isReadOnly,
+                onToggleBreakpoint: isReadOnly ? onTaskBreakpointToggle : void 0,
+                getContextMenuItems: hasMenu ? getAdhocContextMenuItems : 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.adhocTasks,
                 testId: `adhoc-tasks-header-${id}`
             }),
-            /*#__PURE__*/ jsx(StageItemsList, {
-                "data-testid": `adhoc-tasks-list-${id}`,
-                children: adhocTasks.map(({ task })=>{
-                    const taskExecution = execution?.taskStatus?.[task.id];
-                    const hasMenu = !isReadOnly && hasBuiltInTaskActions || (getTaskContextMenuItems?.({
-                        task,
-                        taskGroupType: 'adhoc',
-                        isParallel: false
-                    })?.length ?? 0) > 0;
-                    return /*#__PURE__*/ jsx(AdhocTaskItem, {
-                        task: task,
-                        taskExecution: taskExecution,
-                        isSelected: selectedTaskId === task.id,
-                        onTaskClick: handleTaskClick,
-                        onTaskPlay: onTaskPlay,
-                        isTaskLoading: loadingTaskIds?.has(task.id),
-                        isReadOnly: isReadOnly,
-                        onToggleBreakpoint: isReadOnly ? onTaskBreakpointToggle : void 0,
-                        getContextMenuItems: hasMenu ? getAdhocContextMenuItems : 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/StageNodeAllTaskGroups.cjs

@@ -43,7 +43,7 @@ const StageNodeAllTaskGroupsInner = ({ props, isReadOnly, taskWidthStyle, taskSt
     const allTasks = (0, external_react_namespaceObject.useMemo)(()=>stageDetails?.tasks || [], [
         stageDetails?.tasks
     ]);
-    const { sequentialTaskGroups, sequentialTasks, adhocTaskGroups, adhocTasks, eventDrivenTaskGroups, eventDrivenTasks } = (0, useStageTasksByGroups_cjs_namespaceObject.useStageTasksByGroups)(allTasks);
+    const { sequentialTaskGroups, adhocTaskGroups, eventDrivenTaskGroups } = (0, useStageTasksByGroups_cjs_namespaceObject.useStageTasksByGroups)(allTasks);
     const selectedTaskId = stageDetails?.selectedTaskId;
     const defaultContent = stageDetails?.defaultContent || (isReadOnly ? labels.noTasks : labels.addFirstTask);
     const handleReorderSequentialTasks = (0, external_react_namespaceObject.useCallback)((newTasks)=>{
@@ -58,6 +58,28 @@ const StageNodeAllTaskGroupsInner = ({ props, isReadOnly, taskWidthStyle, taskSt
         eventDrivenTaskGroups,
         adhocTaskGroups
     ]);
+    const handleReorderEventDrivenTasks = (0, external_react_namespaceObject.useCallback)((newTasks)=>{
+        onTaskReorder?.([
+            ...sequentialTaskGroups,
+            ...newTasks,
+            ...adhocTaskGroups
+        ]);
+    }, [
+        onTaskReorder,
+        sequentialTaskGroups,
+        adhocTaskGroups
+    ]);
+    const handleReorderAdhocTasks = (0, external_react_namespaceObject.useCallback)((newTasks)=>{
+        onTaskReorder?.([
+            ...sequentialTaskGroups,
+            ...eventDrivenTaskGroups,
+            ...newTasks
+        ]);
+    }, [
+        onTaskReorder,
+        sequentialTaskGroups,
+        eventDrivenTaskGroups
+    ]);
     const handleTaskClick = (0, external_react_namespaceObject.useCallback)((e, taskElementId)=>{
         e.stopPropagation();
         onTaskClick?.(taskElementId);
@@ -132,7 +154,6 @@ const StageNodeAllTaskGroupsInner = ({ props, isReadOnly, taskWidthStyle, taskSt
                 /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_StageNodeSequentialTaskGroups_cjs_namespaceObject.StageNodeSequentialTaskGroups, {
                     props: props,
                     sequentialTaskGroups: sequentialTaskGroups,
-                    sequentialTasks: sequentialTasks,
                     isReadOnly: isReadOnly,
                     selectedTaskId: selectedTaskId,
                     taskWidthStyle: taskWidthStyle,
@@ -143,19 +164,23 @@ const StageNodeAllTaskGroupsInner = ({ props, isReadOnly, taskWidthStyle, taskSt
                 }),
                 /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_StageNodeEventDrivenTaskGroups_cjs_namespaceObject.StageNodeEventDrivenTaskGroups, {
                     props: props,
-                    eventDrivenTasks: eventDrivenTasks,
+                    eventDrivenTaskGroups: eventDrivenTaskGroups,
                     isReadOnly: isReadOnly,
                     selectedTaskId: selectedTaskId,
+                    taskWidthStyle: taskWidthStyle,
                     handleTaskClick: handleTaskClick,
+                    handleReorderEventDrivenTasks: handleReorderEventDrivenTasks,
                     generateReplaceTaskMenuItemForTask: generateReplaceTaskMenuItemForTask,
                     generateDeleteTaskMenuItemForTask: generateDeleteTaskMenuItemForTask
                 }),
                 /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_StageNodeAdhocTaskGroups_cjs_namespaceObject.StageNodeAdhocTaskGroups, {
                     props: props,
-                    adhocTasks: adhocTasks,
+                    adhocTaskGroups: adhocTaskGroups,
                     isReadOnly: isReadOnly,
                     selectedTaskId: selectedTaskId,
+                    taskWidthStyle: taskWidthStyle,
                     handleTaskClick: handleTaskClick,
+                    handleReorderAdhocTasks: handleReorderAdhocTasks,
                     generateReplaceTaskMenuItemForTask: generateReplaceTaskMenuItemForTask,
                     generateDeleteTaskMenuItemForTask: generateDeleteTaskMenuItemForTask
                 })

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

@@ -1 +1 @@
-{"version":3,"file":"StageNodeAllTaskGroups.d.ts","sourceRoot":"","sources":["../../../../../src/canvas/components/StageNode/tasks/StageNodeAllTaskGroups.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,aAAa,EAAQ,KAAK,SAAS,EAAwB,MAAM,OAAO,CAAC;AAGvF,OAAO,KAAK,EAAE,cAAc,EAAiB,kBAAkB,EAAE,MAAM,oBAAoB,CAAC;AA4N5F,eAAO,MAAM,sBAAsB,8JA5MhC;IACD,KAAK,EAAE,cAAc,CAAC;IACtB,UAAU,EAAE,OAAO,CAAC;IACpB,cAAc,CAAC,EAAE,aAAa,CAAC;IAC/B,kBAAkB,EAAE,SAAS,CAAC,kBAAkB,CAAC,CAAC;IAClD,iBAAiB,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IAC5C,kBAAkB,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IACtD,kBAAkB,EAAE,CAAC,eAAe,EAAE,OAAO,KAAK,IAAI,CAAC;CACxD,6CAoMsE,CAAC"}
+{"version":3,"file":"StageNodeAllTaskGroups.d.ts","sourceRoot":"","sources":["../../../../../src/canvas/components/StageNode/tasks/StageNodeAllTaskGroups.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,aAAa,EAAQ,KAAK,SAAS,EAAwB,MAAM,OAAO,CAAC;AAGvF,OAAO,KAAK,EAAE,cAAc,EAAiB,kBAAkB,EAAE,MAAM,oBAAoB,CAAC;AAwO5F,eAAO,MAAM,sBAAsB,8JAxNhC;IACD,KAAK,EAAE,cAAc,CAAC;IACtB,UAAU,EAAE,OAAO,CAAC;IACpB,cAAc,CAAC,EAAE,aAAa,CAAC;IAC/B,kBAAkB,EAAE,SAAS,CAAC,kBAAkB,CAAC,CAAC;IAClD,iBAAiB,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IAC5C,kBAAkB,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IACtD,kBAAkB,EAAE,CAAC,eAAe,EAAE,OAAO,KAAK,IAAI,CAAC;CACxD,6CAgNsE,CAAC"}