@uipath/apollo-react 3.44.0 → 3.44.2-pr255.af80ea0

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

@@ -27,110 +27,87 @@ __webpack_require__.d(__webpack_exports__, {
     StageNode: ()=>StageNode
 });
 const jsx_runtime_namespaceObject = require("react/jsx-runtime");
-const core_namespaceObject = require("@dnd-kit/core");
-const sortable_namespaceObject = require("@dnd-kit/sortable");
 const apollo_core_namespaceObject = require("@uipath/apollo-core");
 const index_cjs_namespaceObject = require("../../layouts/index.cjs");
 const react_cjs_namespaceObject = require("../../xyflow/react.cjs");
 const external_material_index_cjs_namespaceObject = require("../../../material/index.cjs");
 const external_react_namespaceObject = require("react");
-const external_react_dom_namespaceObject = require("react-dom");
+const CrossStageDragContext_cjs_namespaceObject = require("../../hooks/CrossStageDragContext.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");
 const external_FloatingCanvasPanel_index_cjs_namespaceObject = require("../FloatingCanvasPanel/index.cjs");
 const external_NodeContextMenu_index_cjs_namespaceObject = require("../NodeContextMenu/index.cjs");
 const hooks_index_cjs_namespaceObject = require("../NodePropertiesPanel/hooks/index.cjs");
+const TaskNodeContext_cjs_namespaceObject = require("../TaskNode/TaskNodeContext.cjs");
+const useTaskPositions_cjs_namespaceObject = require("../TaskNode/useTaskPositions.cjs");
 const external_Toolbox_index_cjs_namespaceObject = require("../Toolbox/index.cjs");
-const external_DraggableTask_cjs_namespaceObject = require("./DraggableTask.cjs");
 const external_StageNode_styles_cjs_namespaceObject = require("./StageNode.styles.cjs");
-const external_StageNode_utils_cjs_namespaceObject = require("./StageNode.utils.cjs");
-const external_StageNodeTaskUtilities_cjs_namespaceObject = require("./StageNodeTaskUtilities.cjs");
+function calculateExecutionExtraHeight(execution) {
+    if (!execution) return 0;
+    if (execution.duration || execution.retryDuration || execution.badge) if (execution.retryDuration || execution.badge) return 26;
+    else return 18;
+    return 2;
+}
+function calculateParallelGroupY(groupIndex, taskIds, hasStageExecution, taskExecutionData, config = useTaskPositions_cjs_namespaceObject.DEFAULT_TASK_POSITION_CONFIG) {
+    const headerHeight = hasStageExecution ? config.headerHeight + config.headerExecutionDescriptionHeight : config.headerHeight;
+    let y = headerHeight + config.contentPaddingTop;
+    for(let i = 0; i < groupIndex; i++){
+        const group = taskIds[i];
+        if (group) {
+            for(let j = 0; j < group.length; j++){
+                const taskId = group[j];
+                const execution = taskId ? taskExecutionData[taskId]?.execution : void 0;
+                const taskHeight = config.taskHeight + calculateExecutionExtraHeight(execution);
+                y += taskHeight;
+                if (j < group.length - 1) y += config.taskGap;
+            }
+            y += config.taskGap;
+        }
+    }
+    return y;
+}
+function calculateParallelGroupHeight(group, taskExecutionData, config = useTaskPositions_cjs_namespaceObject.DEFAULT_TASK_POSITION_CONFIG) {
+    let height = 0;
+    for(let i = 0; i < group.length; i++){
+        const taskId = group[i];
+        const execution = taskId ? taskExecutionData[taskId]?.execution : void 0;
+        const taskHeight = config.taskHeight + calculateExecutionExtraHeight(execution);
+        height += taskHeight;
+        if (i < group.length - 1) height += config.taskGap;
+    }
+    return height;
+}
 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 } = props;
-    const taskWidth = width ? width - external_StageNode_styles_cjs_namespaceObject.STAGE_CONTENT_INSET : void 0;
-    const tasks = (0, external_react_namespaceObject.useMemo)(()=>stageDetails?.tasks || [], [
-        stageDetails?.tasks
-    ]);
-    const flatTasks = (0, external_react_namespaceObject.useMemo)(()=>tasks.flat(), [
-        tasks
-    ]);
-    const taskIds = (0, external_react_namespaceObject.useMemo)(()=>flatTasks.map((task)=>task.id), [
-        flatTasks
+    const { dragging, selected, id, nodeType = 'stage', width, execution, stageDetails, addTaskLabel = 'Add task', addTaskLoading = false, replaceTaskLabel = 'Replace task', taskOptions = [], menuItems, pendingReplaceTask, onStageClick, onTaskAdd, onAddTaskFromToolbox, onTaskToolboxSearch, onReplaceTaskFromToolbox, replaceTaskTarget, onReplaceTaskTargetChange, onTaskClick, onTaskSelect, onStageTitleChange } = props;
+    const taskIds = (0, external_react_namespaceObject.useMemo)(()=>stageDetails?.taskIds || [], [
+        stageDetails?.taskIds
     ]);
     const isException = stageDetails?.isException;
     const isReadOnly = !!stageDetails?.isReadOnly;
     const icon = stageDetails?.icon;
-    const selectedTasks = stageDetails?.selectedTasks;
     const defaultContent = stageDetails?.defaultContent || 'Add first task';
     const status = execution?.stageStatus?.status;
     const statusLabel = execution?.stageStatus?.label;
     const stageDuration = execution?.stageStatus?.duration;
-    const reGroupTaskFunction = (0, external_react_namespaceObject.useMemo)(()=>onTaskGroupModification || (()=>{}), [
-        onTaskGroupModification
-    ]);
     const isStageTitleEditable = !!onStageTitleChange && !isReadOnly;
     const [isHovered, setIsHovered] = (0, external_react_namespaceObject.useState)(false);
     const [label, setLabel] = (0, external_react_namespaceObject.useState)(props.stageDetails.label);
+    const [toolboxMode, setToolboxMode] = (0, external_react_namespaceObject.useState)(null);
+    const replaceTaskRef = (0, external_react_namespaceObject.useRef)(null);
+    const [isStageTitleEditing, setIsStageTitleEditing] = (0, external_react_namespaceObject.useState)(false);
+    const stageTitleRef = (0, external_react_namespaceObject.useRef)(null);
     (0, external_react_namespaceObject.useEffect)(()=>{
         setLabel(props.stageDetails.label);
     }, [
         props.stageDetails.label
     ]);
-    const [isStageTitleEditing, setIsStageTitleEditing] = (0, external_react_namespaceObject.useState)(false);
-    const stageTitleRef = (0, external_react_namespaceObject.useRef)(null);
-    const taskStateReference = (0, external_react_namespaceObject.useRef)({
-        isParallel: false,
-        groupIndex: -1,
-        taskIndex: -1
-    });
     const isConnecting = (0, react_cjs_namespaceObject.useStore)((state)=>!!state.connectionClickStartHandle);
     const connectedHandleIds = (0, ConnectedHandlesContext_cjs_namespaceObject.useConnectedHandles)(id);
-    const [isAddingTask, setIsAddingTask] = (0, external_react_namespaceObject.useState)(false);
-    const [isReplacingTask, setIsReplacingTask] = (0, external_react_namespaceObject.useState)(false);
-    (0, external_react_namespaceObject.useEffect)(()=>{
-        if (pendingReplaceTask?.groupIndex != null && pendingReplaceTask?.taskIndex != null) {
-            const taskGroup = tasks[pendingReplaceTask.groupIndex];
-            taskStateReference.current = {
-                isParallel: (taskGroup?.length ?? 0) > 1,
-                groupIndex: pendingReplaceTask.groupIndex,
-                taskIndex: pendingReplaceTask.taskIndex
-            };
-            setIsReplacingTask(true);
-        }
-    }, [
-        pendingReplaceTask,
-        tasks
-    ]);
-    const [activeDragId, setActiveDragId] = (0, external_react_namespaceObject.useState)(null);
-    const [offsetLeft, setOffsetLeft] = (0, external_react_namespaceObject.useState)(0);
-    const [overId, setOverId] = (0, external_react_namespaceObject.useState)(null);
-    const activeTask = (0, external_react_namespaceObject.useMemo)(()=>flatTasks.find((t)=>t.id === activeDragId), [
-        flatTasks,
-        activeDragId
-    ]);
-    const isActiveTaskParallel = (0, external_react_namespaceObject.useMemo)(()=>{
-        if (!activeDragId) return false;
-        const group = tasks.find((g)=>g.some((t)=>t.id === activeDragId));
-        return group ? group.length > 1 : false;
-    }, [
-        tasks,
-        activeDragId
-    ]);
-    const { zoom } = (0, react_cjs_namespaceObject.useViewport)();
-    const projected = (0, external_react_namespaceObject.useMemo)(()=>{
-        if (!activeDragId || !overId) return null;
-        return (0, external_StageNode_utils_cjs_namespaceObject.getProjection)(tasks, activeDragId, overId, offsetLeft);
-    }, [
-        tasks,
-        activeDragId,
-        overId,
-        offsetLeft
-    ]);
     (0, external_react_namespaceObject.useEffect)(()=>{
         if (false === selected) {
-            setIsAddingTask(false);
-            setIsReplacingTask(false);
+            setToolboxMode(null);
+            replaceTaskRef.current = null;
         }
     }, [
         selected
@@ -155,19 +132,6 @@ const StageNodeComponent = (props)=>{
         setIsStageTitleEditing(true);
         setLabel(e.target.value);
     }, []);
-    const handleStageTitleClickToSave = (0, external_react_namespaceObject.useCallback)((e)=>{
-        if (isStageTitleEditing && !stageTitleRef.current?.contains(e.target)) {
-            setIsStageTitleEditing(false);
-            if (onStageTitleChange) {
-                if ('' === label.trim()) setLabel('Untitled Stage');
-                onStageTitleChange(label);
-            }
-        }
-    }, [
-        isStageTitleEditing,
-        onStageTitleChange,
-        label
-    ]);
     const handleStageTitleBlurToSave = (0, external_react_namespaceObject.useCallback)(()=>{
         if (isStageTitleEditing) {
             setIsStageTitleEditing(false);
@@ -190,50 +154,17 @@ const StageNodeComponent = (props)=>{
         onStageTitleChange,
         label
     ]);
-    (0, external_react_namespaceObject.useEffect)(()=>{
-        if (isStageTitleEditing) document.addEventListener('click', handleStageTitleClickToSave);
-        return ()=>{
-            document.removeEventListener('click', handleStageTitleClickToSave);
-        };
-    }, [
-        handleStageTitleClickToSave,
-        isStageTitleEditing
-    ]);
-    const contextMenuItems = (0, external_react_namespaceObject.useCallback)((isParallel, groupIndex, taskIndex, tasksLength, taskGroupLength, isAboveParallel, isBelowParallel)=>{
-        const items = [];
-        if (onReplaceTaskFromToolbox) items.push((0, external_StageNodeTaskUtilities_cjs_namespaceObject.getMenuItem)('replace-task', 'Replace Task', ()=>setIsReplacingTask(true)));
-        if (onTaskGroupModification) {
-            const reGroupOptions = (0, external_StageNodeTaskUtilities_cjs_namespaceObject.getContextMenuItems)(isParallel, groupIndex, tasksLength, taskIndex, taskGroupLength, isAboveParallel, isBelowParallel, reGroupTaskFunction);
-            return [
-                ...items,
-                ...reGroupOptions
-            ];
-        }
-        return items;
-    }, [
-        onReplaceTaskFromToolbox,
-        onTaskGroupModification,
-        reGroupTaskFunction
-    ]);
     const { setSelectedNodeId } = (0, hooks_index_cjs_namespaceObject.useNodeSelection)();
     const handleStageClick = (0, external_react_namespaceObject.useCallback)(()=>{
         onStageClick?.();
     }, [
         onStageClick
     ]);
-    const handleTaskClick = (0, external_react_namespaceObject.useCallback)((e, taskElementId)=>{
-        e.stopPropagation();
-        onTaskClick?.(taskElementId);
-        setSelectedNodeId(id);
-    }, [
-        onTaskClick,
-        setSelectedNodeId,
-        id
-    ]);
     const handleTaskAddClick = (0, external_react_namespaceObject.useCallback)((event)=>{
         event.stopPropagation();
+        replaceTaskRef.current = null;
         if (onTaskAdd) onTaskAdd();
-        else if (onAddTaskFromToolbox) setIsAddingTask(true);
+        else if (onAddTaskFromToolbox) setToolboxMode('add');
         setSelectedNodeId(id);
     }, [
         onTaskAdd,
@@ -241,25 +172,54 @@ const StageNodeComponent = (props)=>{
         setSelectedNodeId,
         id
     ]);
-    const handleAddTaskToolboxItemSelected = (0, external_react_namespaceObject.useCallback)((item)=>{
-        onAddTaskFromToolbox?.(item);
-        setIsAddingTask(false);
-        setSelectedNodeId(id);
+    (0, external_react_namespaceObject.useEffect)(()=>{
+        if (replaceTaskTarget) {
+            replaceTaskRef.current = replaceTaskTarget;
+            setToolboxMode('replace');
+        }
     }, [
-        onAddTaskFromToolbox,
-        setSelectedNodeId,
-        id
+        replaceTaskTarget
+    ]);
+    (0, external_react_namespaceObject.useEffect)(()=>{
+        if (pendingReplaceTask?.groupIndex != null && pendingReplaceTask?.taskIndex != null) {
+            replaceTaskRef.current = {
+                groupIndex: pendingReplaceTask.groupIndex,
+                taskIndex: pendingReplaceTask.taskIndex
+            };
+            setToolboxMode('replace');
+        }
+    }, [
+        pendingReplaceTask
     ]);
-    const handleReplaceTaskToolboxItemSelected = (0, external_react_namespaceObject.useCallback)((item)=>{
-        setIsReplacingTask(true);
-        onReplaceTaskFromToolbox?.(item, taskStateReference.current.groupIndex, taskStateReference.current.taskIndex);
-        setIsReplacingTask(false);
+    const handleToolboxItemSelected = (0, external_react_namespaceObject.useCallback)((item)=>{
+        if ('replace' === toolboxMode && replaceTaskRef.current && onReplaceTaskFromToolbox) onReplaceTaskFromToolbox(item, replaceTaskRef.current.groupIndex, replaceTaskRef.current.taskIndex);
+        else if ('add' === toolboxMode) onAddTaskFromToolbox?.(item);
+        setToolboxMode(null);
+        replaceTaskRef.current = null;
+        onReplaceTaskTargetChange?.(null);
         setSelectedNodeId(id);
     }, [
+        toolboxMode,
         onReplaceTaskFromToolbox,
+        onAddTaskFromToolbox,
+        onReplaceTaskTargetChange,
         setSelectedNodeId,
         id
     ]);
+    const handleToolboxClose = (0, external_react_namespaceObject.useCallback)(()=>{
+        setToolboxMode(null);
+        replaceTaskRef.current = null;
+        onReplaceTaskTargetChange?.(null);
+    }, [
+        onReplaceTaskTargetChange
+    ]);
+    const taskWidth = width ? width - external_StageNode_styles_cjs_namespaceObject.STAGE_CONTENT_INSET : void 0;
+    const taskWidthStyle = (0, external_react_namespaceObject.useMemo)(()=>taskWidth ? {
+            '--stage-task-width': `${taskWidth}px`,
+            '--stage-task-width-parallel': `${taskWidth - external_StageNode_styles_cjs_namespaceObject.INDENTATION_WIDTH}px`
+        } : void 0, [
+        taskWidth
+    ]);
     const handleConfigurations = (0, external_react_namespaceObject.useMemo)(()=>isException ? [] : [
             {
                 position: react_cjs_namespaceObject.Position.Left,
@@ -326,292 +286,277 @@ const StageNodeComponent = (props)=>{
         nodeId: id,
         selected
     });
-    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 resetState = (0, external_react_namespaceObject.useCallback)(()=>{
-        setActiveDragId(null);
-        setOffsetLeft(0);
-        setOverId(null);
-    }, []);
-    const handleDragStart = (0, external_react_namespaceObject.useCallback)((event)=>{
-        setActiveDragId(event.active.id);
-    }, []);
-    const handleDragMove = (0, external_react_namespaceObject.useCallback)((event)=>{
-        setOffsetLeft(event.delta.x / zoom);
-    }, [
-        zoom
+    const taskNodeContextValue = (0, external_react_namespaceObject.useMemo)(()=>({
+            stageId: id,
+            stageNodeType: nodeType,
+            taskIds,
+            isReadOnly,
+            onTaskClick,
+            onTaskSelect
+        }), [
+        id,
+        nodeType,
+        taskIds,
+        isReadOnly,
+        onTaskClick,
+        onTaskSelect
     ]);
-    const handleDragOver = (0, external_react_namespaceObject.useCallback)((event)=>{
-        setOverId(event.over?.id ?? null);
-    }, []);
-    const handleDragEnd = (0, external_react_namespaceObject.useCallback)((event)=>{
-        const { active, over } = event;
-        const currentOffsetLeft = offsetLeft;
-        resetState();
-        if (!over || !onTaskReorder) return;
-        const projection = (0, external_StageNode_utils_cjs_namespaceObject.getProjection)(tasks, active.id, over.id, currentOffsetLeft);
-        if (!projection) return;
-        if (active.id === over.id) {
-            const flattened = (0, external_StageNode_utils_cjs_namespaceObject.flattenTasks)(tasks);
-            const activeTask = flattened.find((t)=>t.id === active.id);
-            if (activeTask && activeTask.depth === projection.depth) return;
+    const dragState = (0, CrossStageDragContext_cjs_namespaceObject.useCrossStageDragState)();
+    const displayTaskIds = (0, external_react_namespaceObject.useMemo)(()=>{
+        if (dragState?.isDragging && dragState.taskId) {
+            if (dragState.targetStageId === id && dragState.dropPosition) {
+                const { groupIndex, taskIndex, isParallel } = dragState.dropPosition;
+                const tempTaskIds = taskIds.map((g)=>[
+                        ...g
+                    ]);
+                for(let gi = 0; gi < tempTaskIds.length; gi++){
+                    const group = tempTaskIds[gi];
+                    if (!group) continue;
+                    const idx = group.indexOf(dragState.taskId);
+                    if (-1 !== idx) group.splice(idx, 1);
+                }
+                const filtered = tempTaskIds.filter((g)=>g && g.length > 0);
+                if (groupIndex >= filtered.length) filtered.push([
+                    '__placeholder__'
+                ]);
+                else if (isParallel && filtered[groupIndex]) filtered[groupIndex].splice(taskIndex, 0, '__placeholder__');
+                else filtered.splice(groupIndex, 0, [
+                    '__placeholder__'
+                ]);
+                return filtered;
+            }
+            if (dragState.sourceStageId === id && dragState.targetStageId !== id) {
+                const tempTaskIds = taskIds.map((g)=>[
+                        ...g
+                    ]);
+                for(let gi = 0; gi < tempTaskIds.length; gi++){
+                    const group = tempTaskIds[gi];
+                    if (!group) continue;
+                    const idx = group.indexOf(dragState.taskId);
+                    if (-1 !== idx) group.splice(idx, 1);
+                }
+                return tempTaskIds.filter((g)=>g && g.length > 0);
+            }
         }
-        const newTasks = (0, external_StageNode_utils_cjs_namespaceObject.reorderTasks)(tasks, active.id, over.id, projection.depth);
-        onTaskReorder(newTasks);
+        return taskIds;
     }, [
-        tasks,
-        onTaskReorder,
-        offsetLeft,
-        resetState
+        taskIds,
+        dragState,
+        id
     ]);
-    const handleDragCancel = (0, external_react_namespaceObject.useCallback)(()=>{
-        resetState();
+    const taskNodes = (0, react_cjs_namespaceObject.useStore)((state)=>state.nodes.filter((n)=>'task' === n.type && n.parentId === id));
+    const taskExecutionData = (0, external_react_namespaceObject.useMemo)(()=>{
+        const data = {};
+        for (const node of taskNodes)data[node.id] = {
+            execution: node.data?.execution
+        };
+        return data;
     }, [
-        resetState
+        taskNodes
     ]);
-    const taskWidthStyle = (0, external_react_namespaceObject.useMemo)(()=>taskWidth ? {
-            '--stage-task-width': `${taskWidth}px`,
-            '--stage-task-width-parallel': `${taskWidth - external_StageNode_styles_cjs_namespaceObject.INDENTATION_WIDTH}px`
-        } : void 0, [
-        taskWidth
+    const parallelGroups = (0, external_react_namespaceObject.useMemo)(()=>{
+        const hasStageExecution = !!stageDuration;
+        return displayTaskIds.map((group, index)=>{
+            const isParallel = group.length > 1;
+            if (!isParallel) return null;
+            const y = calculateParallelGroupY(index, displayTaskIds, hasStageExecution, taskExecutionData);
+            const height = calculateParallelGroupHeight(group, taskExecutionData);
+            return {
+                index,
+                y,
+                height
+            };
+        }).filter((g)=>null !== g);
+    }, [
+        displayTaskIds,
+        stageDuration,
+        taskExecutionData
     ]);
-    const dragOverlayStyle = (0, external_react_namespaceObject.useMemo)(()=>({
-            transform: `scale(${zoom})`,
-            transformOrigin: 'top left'
-        }), [
-        zoom
+    const contentHeight = (0, external_react_namespaceObject.useMemo)(()=>{
+        if (0 === displayTaskIds.length) return 60;
+        return (0, useTaskPositions_cjs_namespaceObject.calculateStageContentHeight)(displayTaskIds, taskNodes);
+    }, [
+        displayTaskIds,
+        taskNodes,
+        execution
     ]);
-    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
-        "data-testid": `stage-${id}`,
-        style: {
-            position: 'relative'
-        },
-        onClick: handleStageClick,
-        onMouseEnter: handleMouseEnter,
-        onMouseLeave: handleMouseLeave,
-        children: [
-            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(external_StageNode_styles_cjs_namespaceObject.StageContainer, {
-                selected: selected,
-                status: status,
-                width: width,
-                style: taskWidthStyle,
-                children: [
-                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(external_StageNode_styles_cjs_namespaceObject.StageHeader, {
-                        isException: isException,
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(TaskNodeContext_cjs_namespaceObject.TaskNodeProvider, {
+        value: taskNodeContextValue,
+        children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
+            "data-testid": `stage-${id}`,
+            style: {
+                position: 'relative',
+                ...taskWidthStyle
+            },
+            onClick: handleStageClick,
+            onMouseEnter: handleMouseEnter,
+            onMouseLeave: handleMouseLeave,
+            children: [
+                parallelGroups.map(({ index, y, height })=>{
+                    const absoluteY = y;
+                    const absoluteX = useTaskPositions_cjs_namespaceObject.DEFAULT_TASK_POSITION_CONFIG.contentPaddingX + useTaskPositions_cjs_namespaceObject.DEFAULT_TASK_POSITION_CONFIG.parallelIndent;
+                    const bracketX = absoluteX - 12 - 4 - 12;
+                    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(index_cjs_namespaceObject.Row, {
+                        gap: apollo_core_namespaceObject.Spacing.SpacingS,
+                        style: {
+                            position: 'absolute',
+                            top: absoluteY,
+                            left: bracketX,
+                            height: height,
+                            pointerEvents: 'none',
+                            zIndex: 1
+                        },
                         children: [
-                            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(index_cjs_namespaceObject.Row, {
-                                gap: apollo_core_namespaceObject.Spacing.SpacingMicro,
-                                align: "center",
-                                children: [
-                                    icon,
-                                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(index_cjs_namespaceObject.Column, {
-                                        py: 2,
-                                        children: [
-                                            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_material_index_cjs_namespaceObject.ApTypography, {
-                                                variant: isStageTitleEditing ? apollo_core_namespaceObject.FontVariantToken.fontSizeM : apollo_core_namespaceObject.FontVariantToken.fontSizeMBold,
-                                                color: "var(--uix-canvas-foreground)",
-                                                children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_material_index_cjs_namespaceObject.ApTooltip, {
-                                                    content: label,
-                                                    placement: "top",
-                                                    delay: true,
-                                                    children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_StageNode_styles_cjs_namespaceObject.StageTitleContainer, {
-                                                        isEditing: isStageTitleEditing,
-                                                        children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_StageNode_styles_cjs_namespaceObject.StageTitleInput, {
-                                                            name: "Stage Title",
-                                                            isStageTitleEditable: isStageTitleEditable,
-                                                            value: label,
-                                                            ref: stageTitleRef,
+                            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_StageNode_styles_cjs_namespaceObject.StageParallelBracket, {}),
+                            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+                                style: {
+                                    position: 'relative',
+                                    width: 0,
+                                    height: '100%'
+                                },
+                                children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_StageNode_styles_cjs_namespaceObject.StageParallelLabel, {
+                                    children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_material_index_cjs_namespaceObject.ApTypography, {
+                                        variant: apollo_core_namespaceObject.FontVariantToken.fontSizeS,
+                                        children: "Parallel"
+                                    })
+                                })
+                            })
+                        ]
+                    }, `parallel-${index}`);
+                }),
+                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(external_StageNode_styles_cjs_namespaceObject.StageContainer, {
+                    selected: selected,
+                    status: status,
+                    width: width,
+                    style: {
+                        minHeight: contentHeight + (execution?.stageStatus?.duration ? useTaskPositions_cjs_namespaceObject.DEFAULT_TASK_POSITION_CONFIG.headerHeight + useTaskPositions_cjs_namespaceObject.DEFAULT_TASK_POSITION_CONFIG.headerExecutionDescriptionHeight : useTaskPositions_cjs_namespaceObject.DEFAULT_TASK_POSITION_CONFIG.headerHeight) + 2 * useTaskPositions_cjs_namespaceObject.DEFAULT_TASK_POSITION_CONFIG.stageBorderThickness
+                    },
+                    children: [
+                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(external_StageNode_styles_cjs_namespaceObject.StageHeader, {
+                            isException: isException,
+                            children: [
+                                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(index_cjs_namespaceObject.Row, {
+                                    gap: apollo_core_namespaceObject.Spacing.SpacingMicro,
+                                    align: "center",
+                                    children: [
+                                        icon,
+                                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(index_cjs_namespaceObject.Column, {
+                                            py: 2,
+                                            children: [
+                                                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_material_index_cjs_namespaceObject.ApTypography, {
+                                                    variant: isStageTitleEditing ? apollo_core_namespaceObject.FontVariantToken.fontSizeM : apollo_core_namespaceObject.FontVariantToken.fontSizeMBold,
+                                                    color: "var(--uix-canvas-foreground)",
+                                                    children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_material_index_cjs_namespaceObject.ApTooltip, {
+                                                        content: label,
+                                                        placement: "top",
+                                                        delay: true,
+                                                        children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_StageNode_styles_cjs_namespaceObject.StageTitleContainer, {
                                                             isEditing: isStageTitleEditing,
-                                                            ...onStageTitleChange && {
-                                                                onFocus: ()=>setIsStageTitleEditing(true),
-                                                                onInput: handleStageTitleChange,
-                                                                onKeyDown: handleStageTitleKeyDown,
-                                                                onBlur: handleStageTitleBlurToSave
-                                                            },
-                                                            readOnly: !isStageTitleEditable
+                                                            children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_StageNode_styles_cjs_namespaceObject.StageTitleInput, {
+                                                                name: "Stage Title",
+                                                                isStageTitleEditable: isStageTitleEditable,
+                                                                value: label,
+                                                                ref: stageTitleRef,
+                                                                isEditing: isStageTitleEditing,
+                                                                ...onStageTitleChange && {
+                                                                    onFocus: ()=>setIsStageTitleEditing(true),
+                                                                    onInput: handleStageTitleChange,
+                                                                    onKeyDown: handleStageTitleKeyDown,
+                                                                    onBlur: handleStageTitleBlurToSave
+                                                                },
+                                                                readOnly: !isStageTitleEditable
+                                                            })
                                                         })
                                                     })
+                                                }),
+                                                stageDuration && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_material_index_cjs_namespaceObject.ApTypography, {
+                                                    variant: apollo_core_namespaceObject.FontVariantToken.fontSizeS,
+                                                    color: "var(--uix-canvas-foreground-de-emp)",
+                                                    children: stageDuration
                                                 })
-                                            }),
-                                            stageDuration && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_material_index_cjs_namespaceObject.ApTypography, {
-                                                variant: apollo_core_namespaceObject.FontVariantToken.fontSizeS,
-                                                color: "var(--uix-canvas-foreground-de-emp)",
-                                                children: stageDuration
-                                            })
-                                        ]
-                                    })
-                                ]
-                            }),
-                            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(index_cjs_namespaceObject.Row, {
-                                gap: apollo_core_namespaceObject.Spacing.SpacingMicro,
-                                align: isReadOnly ? 'start' : 'center',
-                                py: apollo_core_namespaceObject.Padding.PadS,
-                                children: [
-                                    status && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_material_index_cjs_namespaceObject.ApTooltip, {
-                                        content: statusLabel,
-                                        placement: "top",
-                                        children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_material_index_cjs_namespaceObject.ApIconButton, {
-                                            size: "small",
-                                            children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_ExecutionStatusIcon_index_cjs_namespaceObject.ExecutionStatusIcon, {
-                                                status: status,
-                                                size: 20
-                                            })
+                                            ]
                                         })
-                                    }),
-                                    (onTaskAdd || onAddTaskFromToolbox) && !isReadOnly && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_material_index_cjs_namespaceObject.ApTooltip, {
-                                        content: addTaskLoading ? 'Loading...' : addTaskLabel,
-                                        placement: "top",
-                                        children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
+                                    ]
+                                }),
+                                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(index_cjs_namespaceObject.Row, {
+                                    gap: apollo_core_namespaceObject.Spacing.SpacingMicro,
+                                    align: isReadOnly ? 'start' : 'center',
+                                    py: apollo_core_namespaceObject.Padding.PadS,
+                                    children: [
+                                        status && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_material_index_cjs_namespaceObject.ApTooltip, {
+                                            content: statusLabel,
+                                            placement: "top",
                                             children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_material_index_cjs_namespaceObject.ApIconButton, {
-                                                onClick: handleTaskAddClick,
                                                 size: "small",
-                                                disabled: addTaskLoading,
-                                                label: addTaskLabel,
-                                                children: addTaskLoading ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_material_index_cjs_namespaceObject.ApCircularProgress, {
+                                                children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_ExecutionStatusIcon_index_cjs_namespaceObject.ExecutionStatusIcon, {
+                                                    status: status,
                                                     size: 20
-                                                }) : /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_material_index_cjs_namespaceObject.ApIcon, {
-                                                    name: "add",
-                                                    size: "20px"
                                                 })
                                             })
-                                        })
-                                    })
-                                ]
-                            })
-                        ]
-                    }),
-                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_StageNode_styles_cjs_namespaceObject.StageContent, {
-                        children: tasks && 0 !== tasks.length ? /*#__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: taskIds,
-                                    strategy: sortable_namespaceObject.verticalListSortingStrategy,
-                                    children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_StageNode_styles_cjs_namespaceObject.StageTaskList, {
-                                        className: "nodrag nopan",
-                                        children: tasks.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.StageTaskGroup, {
-                                                        isParallel: isParallel,
-                                                        children: [
-                                                            isParallel && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_StageNode_styles_cjs_namespaceObject.StageParallelLabel, {
-                                                                children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_material_index_cjs_namespaceObject.ApTypography, {
-                                                                    variant: apollo_core_namespaceObject.FontVariantToken.fontSizeS,
-                                                                    children: "Parallel"
-                                                                })
-                                                            }),
-                                                            taskGroup.map((task, taskIndex)=>{
-                                                                const taskExecution = execution?.taskStatus?.[task.id];
-                                                                return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_DraggableTask_cjs_namespaceObject.DraggableTask, {
-                                                                    task: task,
-                                                                    taskExecution: taskExecution,
-                                                                    isSelected: !!selectedTasks?.includes(task.id),
-                                                                    isParallel: isParallel,
-                                                                    contextMenuItems: contextMenuItems(isParallel, groupIndex, taskIndex, tasks.length, taskGroup.length, (tasks[groupIndex - 1]?.length ?? 0) > 1, (tasks[groupIndex + 1]?.length ?? 0) > 1),
-                                                                    onTaskClick: handleTaskClick,
-                                                                    projectedDepth: task.id === activeDragId && projected ? projected.depth : void 0,
-                                                                    isDragDisabled: !onTaskReorder,
-                                                                    zoom: zoom,
-                                                                    ...(onTaskGroupModification || onReplaceTaskFromToolbox) && {
-                                                                        onMenuOpen: ()=>{
-                                                                            taskStateReference.current = {
-                                                                                isParallel,
-                                                                                groupIndex,
-                                                                                taskIndex
-                                                                            };
-                                                                        }
-                                                                    }
-                                                                }, task.id);
-                                                            })
-                                                        ]
+                                        }),
+                                        (onTaskAdd || onAddTaskFromToolbox) && !isReadOnly && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_material_index_cjs_namespaceObject.ApTooltip, {
+                                            content: addTaskLoading ? 'Loading...' : addTaskLabel,
+                                            placement: "top",
+                                            children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
+                                                children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_material_index_cjs_namespaceObject.ApIconButton, {
+                                                    onClick: handleTaskAddClick,
+                                                    size: "small",
+                                                    disabled: addTaskLoading,
+                                                    label: addTaskLabel,
+                                                    children: addTaskLoading ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_material_index_cjs_namespaceObject.ApCircularProgress, {
+                                                        size: 20
+                                                    }) : /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_material_index_cjs_namespaceObject.ApIcon, {
+                                                        name: "add",
+                                                        size: "20px"
                                                     })
-                                                ]
-                                            }, `group-${groupIndex}`);
-                                        })
-                                    })
-                                }),
-                                /*#__PURE__*/ (0, external_react_dom_namespaceObject.createPortal)(/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(core_namespaceObject.DragOverlay, {
-                                    children: activeTask ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
-                                        style: dragOverlayStyle,
-                                        children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_StageNode_styles_cjs_namespaceObject.StageTask, {
-                                            selected: true,
-                                            isParallel: isActiveTaskParallel,
-                                            style: {
-                                                cursor: 'grabbing',
-                                                ...taskWidthStyle
-                                            },
-                                            children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_DraggableTask_cjs_namespaceObject.TaskContent, {
-                                                task: activeTask,
-                                                isDragging: true
+                                                })
                                             })
                                         })
-                                    }) : null
-                                }), document.body)
+                                    ]
+                                })
                             ]
-                        }) : /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(index_cjs_namespaceObject.Column, {
-                            py: 2,
-                            children: (onTaskAdd || onAddTaskFromToolbox) && !isReadOnly ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_material_index_cjs_namespaceObject.ApLink, {
-                                onClick: addTaskLoading ? void 0 : handleTaskAddClick,
-                                variant: apollo_core_namespaceObject.FontVariantToken.fontSizeS,
-                                style: {
-                                    maxWidth: 'fit-content',
-                                    pointerEvents: addTaskLoading ? 'none' : void 0
-                                },
-                                children: defaultContent
-                            }) : /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_material_index_cjs_namespaceObject.ApTypography, {
-                                variant: apollo_core_namespaceObject.FontVariantToken.fontSizeS,
-                                color: "var(--uix-canvas-foreground-de-emp)",
-                                children: defaultContent
+                        }),
+                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_StageNode_styles_cjs_namespaceObject.StageContent, {
+                            children: displayTaskIds && 0 !== displayTaskIds.length ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_StageNode_styles_cjs_namespaceObject.StageTaskList, {
+                                className: "nodrag nopan"
+                            }) : /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(index_cjs_namespaceObject.Column, {
+                                py: 2,
+                                children: (onTaskAdd || onAddTaskFromToolbox) && !isReadOnly ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_material_index_cjs_namespaceObject.ApLink, {
+                                    onClick: addTaskLoading ? void 0 : handleTaskAddClick,
+                                    variant: apollo_core_namespaceObject.FontVariantToken.fontSizeS,
+                                    style: {
+                                        maxWidth: 'fit-content',
+                                        pointerEvents: addTaskLoading ? 'none' : void 0
+                                    },
+                                    children: defaultContent
+                                }) : /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_material_index_cjs_namespaceObject.ApTypography, {
+                                    variant: apollo_core_namespaceObject.FontVariantToken.fontSizeS,
+                                    color: "var(--uix-canvas-foreground-de-emp)",
+                                    children: defaultContent
+                                })
                             })
                         })
+                    ]
+                }),
+                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_FloatingCanvasPanel_index_cjs_namespaceObject.FloatingCanvasPanel, {
+                    open: null !== toolboxMode,
+                    nodeId: id,
+                    offset: 15,
+                    children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_Toolbox_index_cjs_namespaceObject.Toolbox, {
+                        title: 'replace' === toolboxMode ? replaceTaskLabel : addTaskLabel,
+                        initialItems: taskOptions,
+                        onClose: handleToolboxClose,
+                        onItemSelect: handleToolboxItemSelected,
+                        onSearch: onTaskToolboxSearch
                     })
-                ]
-            }),
-            onAddTaskFromToolbox && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_FloatingCanvasPanel_index_cjs_namespaceObject.FloatingCanvasPanel, {
-                open: isAddingTask,
-                nodeId: id,
-                offset: 15,
-                children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_Toolbox_index_cjs_namespaceObject.Toolbox, {
-                    title: addTaskLabel,
-                    initialItems: taskOptions,
-                    onClose: ()=>setIsAddingTask(false),
-                    onItemSelect: handleAddTaskToolboxItemSelected,
-                    onSearch: onTaskToolboxSearch
-                })
-            }),
-            onReplaceTaskFromToolbox && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_FloatingCanvasPanel_index_cjs_namespaceObject.FloatingCanvasPanel, {
-                open: isReplacingTask,
-                nodeId: id,
-                offset: 15,
-                children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_Toolbox_index_cjs_namespaceObject.Toolbox, {
-                    title: replaceTaskLabel,
-                    initialItems: taskOptions,
-                    onClose: ()=>setIsReplacingTask(false),
-                    onItemSelect: handleReplaceTaskToolboxItemSelected,
-                    onSearch: onTaskToolboxSearch
-                })
-            }),
-            menuItems && !dragging && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_NodeContextMenu_index_cjs_namespaceObject.NodeContextMenu, {
-                menuItems: menuItems,
-                isVisible: shouldShowMenu
-            }),
-            handleElements
-        ]
+                }),
+                menuItems && !dragging && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_NodeContextMenu_index_cjs_namespaceObject.NodeContextMenu, {
+                    menuItems: menuItems,
+                    isVisible: shouldShowMenu
+                }),
+                handleElements
+            ]
+        })
     });
 };
 const StageNode = /*#__PURE__*/ (0, external_react_namespaceObject.memo)(StageNodeComponent);