@uipath/apollo-react 3.63.0 → 3.64.0-pr431.76f87cc

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

@@ -40,6 +40,7 @@ const jsx_runtime_namespaceObject = require("react/jsx-runtime");
 const styled_namespaceObject = require("@emotion/styled");
 var styled_default = /*#__PURE__*/ __webpack_require__.n(styled_namespaceObject);
 const react_cjs_namespaceObject = require("../../xyflow/react.cjs");
+const external_react_namespaceObject = require("react");
 const StageEdgeLabel = styled_default().div`
   position: absolute;
   color: var(--uix-canvas-foreground);
@@ -57,6 +58,9 @@ const StageEdgeLabel = styled_default().div`
     border-color: var(--uix-canvas-border-hover);
   }
 `;
+function stageEdgeGeometryEquality(previous, next) {
+    return previous.sourceX === next.sourceX && previous.sourceY === next.sourceY && previous.targetX === next.targetX && previous.targetY === next.targetY;
+}
 function getArrowFromBezier(path, arrowSize) {
     const pathEl = document.createElementNS('http://www.w3.org/2000/svg', 'path');
     pathEl.setAttribute('d', path);
@@ -70,19 +74,13 @@ function getArrowFromBezier(path, arrowSize) {
         angle
     };
 }
-function StageEdge({ sourceX, sourceY, targetX, targetY, sourcePosition, targetPosition, selected, style, stroke = 'var(--uix-canvas-foreground-emp)', strokeWidth = 2, arrowSize = 8, ...rest }) {
-    const sourceNode = (0, react_cjs_namespaceObject.useInternalNode)(rest.source);
-    const targetNode = (0, react_cjs_namespaceObject.useInternalNode)(rest.target);
-    const sourceNodeX = sourceNode ? sourceNode.position.x + (sourceNode.measured?.width ?? 0) : sourceX;
-    const sourceNodeY = sourceNode?.position.y ? sourceNode.position.y + 32 : sourceY;
-    const targetNodeX = targetNode?.position.x ?? targetX;
-    const targetNodeY = targetNode?.position.y ? targetNode.position.y + 32 : targetY;
+function StageEdgeInner({ geometry, sourcePosition, targetPosition, selected, style, stroke = 'var(--uix-canvas-foreground-emp)', strokeWidth = 2, arrowSize = 8, ...rest }) {
     const [pathData, labelX, labelY, _ex, _ey] = (0, react_cjs_namespaceObject.getSmoothStepPath)({
-        sourceX: sourceNodeX,
-        sourceY: sourceNodeY,
+        sourceX: geometry.sourceX,
+        sourceY: geometry.sourceY,
         sourcePosition,
-        targetX: targetNodeX - 1,
-        targetY: targetNodeY,
+        targetX: geometry.targetX - 1,
+        targetY: geometry.targetY,
         targetPosition,
         borderRadius: 40
     });
@@ -141,6 +139,31 @@ function StageEdge({ sourceX, sourceY, targetX, targetY, sourcePosition, targetP
         ]
     });
 }
+const StageEdgeInnerMemo = /*#__PURE__*/ (0, external_react_namespaceObject.memo)(StageEdgeInner);
+function StageEdgeComponent({ sourceX, sourceY, targetX, targetY, sourcePosition, targetPosition, selected, style, stroke, strokeWidth, arrowSize, ...rest }) {
+    const geometry = (0, react_cjs_namespaceObject.useStore)((state)=>{
+        const sourceNode = state.nodeLookup.get(rest.source);
+        const targetNode = state.nodeLookup.get(rest.target);
+        return {
+            sourceX: sourceNode ? sourceNode.position.x + (sourceNode.measured?.width ?? 0) : sourceX,
+            sourceY: sourceNode ? sourceNode.position.y + 32 : sourceY,
+            targetX: targetNode?.position.x ?? targetX,
+            targetY: targetNode ? targetNode.position.y + 32 : targetY
+        };
+    }, stageEdgeGeometryEquality);
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(StageEdgeInnerMemo, {
+        geometry: geometry,
+        sourcePosition: sourcePosition,
+        targetPosition: targetPosition,
+        selected: selected,
+        style: style,
+        stroke: stroke,
+        strokeWidth: strokeWidth,
+        arrowSize: arrowSize,
+        ...rest
+    });
+}
+const StageEdge = /*#__PURE__*/ (0, external_react_namespaceObject.memo)(StageEdgeComponent);
 exports.StageEdge = __webpack_exports__.StageEdge;
 exports.StageEdgeLabel = __webpack_exports__.StageEdgeLabel;
 for(var __rspack_i in __webpack_exports__)if (-1 === [

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

@@ -8,6 +8,7 @@ type Props = EdgeProps & {
     strokeWidth?: number;
     arrowSize?: number;
 };
-export declare function StageEdge({ sourceX, sourceY, targetX, targetY, sourcePosition, targetPosition, selected, style, stroke, strokeWidth, arrowSize, ...rest }: Props): import("react/jsx-runtime").JSX.Element;
+declare function StageEdgeComponent({ sourceX, sourceY, targetX, targetY, sourcePosition, targetPosition, selected, style, stroke, strokeWidth, arrowSize, ...rest }: Props): import("react/jsx-runtime").JSX.Element;
+export declare const StageEdge: import("react").MemoExoticComponent<typeof StageEdgeComponent>;
 export {};
 //# sourceMappingURL=StageEdge.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"StageEdge.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/StageNode/StageEdge.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,0CAA0C,CAAC;AAO1E,eAAO,MAAM,cAAc;;;yGAgB1B,CAAC;AAEF,KAAK,KAAK,GAAG,SAAS,GAAG;IACvB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAkBF,wBAAgB,SAAS,CAAC,EACxB,OAAO,EACP,OAAO,EACP,OAAO,EACP,OAAO,EACP,cAAc,EACd,cAAc,EACd,QAAQ,EACR,KAAK,EACL,MAA2C,EAC3C,WAAe,EACf,SAAa,EACb,GAAG,IAAI,EACR,EAAE,KAAK,2CAiFP"}
+{"version":3,"file":"StageEdge.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/StageNode/StageEdge.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAkB,MAAM,0CAA0C,CAAC;AAQ1F,eAAO,MAAM,cAAc;;;yGAgB1B,CAAC;AAEF,KAAK,KAAK,GAAG,SAAS,GAAG;IACvB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AA4HF,iBAAS,kBAAkB,CAAC,EAC1B,OAAO,EACP,OAAO,EACP,OAAO,EACP,OAAO,EACP,cAAc,EACd,cAAc,EACd,QAAQ,EACR,KAAK,EACL,MAAM,EACN,WAAW,EACX,SAAS,EACT,GAAG,IAAI,EACR,EAAE,KAAK,2CA0BP;AAED,eAAO,MAAM,SAAS,gEAA2B,CAAC"}

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

@@ -1,6 +1,7 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import styled from "@emotion/styled";
-import { EdgeLabelRenderer, getSmoothStepPath, useInternalNode } from "../../xyflow/react.js";
+import { EdgeLabelRenderer, getSmoothStepPath, useStore } from "../../xyflow/react.js";
+import { memo } from "react";
 const StageEdgeLabel = styled.div`
   position: absolute;
   color: var(--uix-canvas-foreground);
@@ -18,6 +19,9 @@ const StageEdgeLabel = styled.div`
     border-color: var(--uix-canvas-border-hover);
   }
 `;
+function stageEdgeGeometryEquality(previous, next) {
+    return previous.sourceX === next.sourceX && previous.sourceY === next.sourceY && previous.targetX === next.targetX && previous.targetY === next.targetY;
+}
 function getArrowFromBezier(path, arrowSize) {
     const pathEl = document.createElementNS('http://www.w3.org/2000/svg', 'path');
     pathEl.setAttribute('d', path);
@@ -31,19 +35,13 @@ function getArrowFromBezier(path, arrowSize) {
         angle
     };
 }
-function StageEdge({ sourceX, sourceY, targetX, targetY, sourcePosition, targetPosition, selected, style, stroke = 'var(--uix-canvas-foreground-emp)', strokeWidth = 2, arrowSize = 8, ...rest }) {
-    const sourceNode = useInternalNode(rest.source);
-    const targetNode = useInternalNode(rest.target);
-    const sourceNodeX = sourceNode ? sourceNode.position.x + (sourceNode.measured?.width ?? 0) : sourceX;
-    const sourceNodeY = sourceNode?.position.y ? sourceNode.position.y + 32 : sourceY;
-    const targetNodeX = targetNode?.position.x ?? targetX;
-    const targetNodeY = targetNode?.position.y ? targetNode.position.y + 32 : targetY;
+function StageEdgeInner({ geometry, sourcePosition, targetPosition, selected, style, stroke = 'var(--uix-canvas-foreground-emp)', strokeWidth = 2, arrowSize = 8, ...rest }) {
     const [pathData, labelX, labelY, _ex, _ey] = getSmoothStepPath({
-        sourceX: sourceNodeX,
-        sourceY: sourceNodeY,
+        sourceX: geometry.sourceX,
+        sourceY: geometry.sourceY,
         sourcePosition,
-        targetX: targetNodeX - 1,
-        targetY: targetNodeY,
+        targetX: geometry.targetX - 1,
+        targetY: geometry.targetY,
         targetPosition,
         borderRadius: 40
     });
@@ -102,4 +100,29 @@ function StageEdge({ sourceX, sourceY, targetX, targetY, sourcePosition, targetP
         ]
     });
 }
+const StageEdgeInnerMemo = /*#__PURE__*/ memo(StageEdgeInner);
+function StageEdgeComponent({ sourceX, sourceY, targetX, targetY, sourcePosition, targetPosition, selected, style, stroke, strokeWidth, arrowSize, ...rest }) {
+    const geometry = useStore((state)=>{
+        const sourceNode = state.nodeLookup.get(rest.source);
+        const targetNode = state.nodeLookup.get(rest.target);
+        return {
+            sourceX: sourceNode ? sourceNode.position.x + (sourceNode.measured?.width ?? 0) : sourceX,
+            sourceY: sourceNode ? sourceNode.position.y + 32 : sourceY,
+            targetX: targetNode?.position.x ?? targetX,
+            targetY: targetNode ? targetNode.position.y + 32 : targetY
+        };
+    }, stageEdgeGeometryEquality);
+    return /*#__PURE__*/ jsx(StageEdgeInnerMemo, {
+        geometry: geometry,
+        sourcePosition: sourcePosition,
+        targetPosition: targetPosition,
+        selected: selected,
+        style: style,
+        stroke: stroke,
+        strokeWidth: strokeWidth,
+        arrowSize: arrowSize,
+        ...rest
+    });
+}
+const StageEdge = /*#__PURE__*/ memo(StageEdgeComponent);
 export { StageEdge, StageEdgeLabel };

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

@@ -35,6 +35,7 @@ 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 external_icons_index_cjs_namespaceObject = require("../../icons/index.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");
@@ -44,9 +45,58 @@ const hooks_index_cjs_namespaceObject = require("../NodePropertiesPanel/hooks/in
 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_types_cjs_namespaceObject = require("./StageNode.types.cjs");
 const external_StageNode_utils_cjs_namespaceObject = require("./StageNode.utils.cjs");
 const external_StageNodeTaskUtilities_cjs_namespaceObject = require("./StageNodeTaskUtilities.cjs");
-const StageNodeComponent = (props)=>{
+const CHIP_ICONS = {
+    [external_StageNode_types_cjs_namespaceObject.StageHeaderChipType.Entry]: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_icons_index_cjs_namespaceObject.EntryConditionIcon, {
+        w: apollo_core_namespaceObject.Icon.IconXs,
+        h: apollo_core_namespaceObject.Icon.IconXs
+    }),
+    [external_StageNode_types_cjs_namespaceObject.StageHeaderChipType.Exit]: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_icons_index_cjs_namespaceObject.ExitConditionIcon, {
+        w: apollo_core_namespaceObject.Icon.IconXs,
+        h: apollo_core_namespaceObject.Icon.IconXs
+    }),
+    [external_StageNode_types_cjs_namespaceObject.StageHeaderChipType.ReturnToOrigin]: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_icons_index_cjs_namespaceObject.ReturnToOriginIcon, {
+        w: apollo_core_namespaceObject.Icon.IconXs,
+        h: apollo_core_namespaceObject.Icon.IconXs
+    }),
+    [external_StageNode_types_cjs_namespaceObject.StageHeaderChipType.CaseExit]: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_material_index_cjs_namespaceObject.ApIcon, {
+        name: "close",
+        size: apollo_core_namespaceObject.Icon.IconXs
+    }),
+    [external_StageNode_types_cjs_namespaceObject.StageHeaderChipType.CaseCompletion]: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_material_index_cjs_namespaceObject.ApIcon, {
+        name: "check-mark",
+        size: apollo_core_namespaceObject.Icon.IconXs
+    })
+};
+const StageNode_StageTaskDragOverlay = /*#__PURE__*/ (0, external_react_namespaceObject.memo)(function({ activeTask, isActiveTaskParallel, taskWidthStyle }) {
+    const { zoom } = (0, react_cjs_namespaceObject.useViewport)();
+    const dragOverlayStyle = (0, external_react_namespaceObject.useMemo)(()=>({
+            transform: `scale(${zoom})`,
+            transformOrigin: 'top left'
+        }), [
+        zoom
+    ]);
+    return /*#__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);
+});
+const StageNodeInner = (props)=>{
     const { dragging, selected, id, width, execution, stageDetails, addTaskLabel = 'Add task', addTaskLoading = false, replaceTaskLabel = 'Replace task', taskOptions = [], menuItems, pendingReplaceTask, onStageClick, onTaskAdd, onAddTaskFromToolbox, onTaskToolboxSearch, onTaskClick, onTaskGroupModification, onStageTitleChange, onTaskReorder, onReplaceTaskFromToolbox, onTaskPlay } = props;
     const taskWidth = width ? width - external_StageNode_styles_cjs_namespaceObject.STAGE_CONTENT_INSET : void 0;
     const tasks = (0, external_react_namespaceObject.useMemo)(()=>stageDetails?.tasks || [], [
@@ -66,9 +116,6 @@ const StageNodeComponent = (props)=>{
     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);
@@ -85,6 +132,7 @@ const StageNodeComponent = (props)=>{
         taskIndex: -1
     });
     const isConnecting = (0, react_cjs_namespaceObject.useStore)((state)=>!!state.connectionClickStartHandle);
+    const storeApi = (0, react_cjs_namespaceObject.useStoreApi)();
     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);
@@ -124,7 +172,6 @@ const StageNodeComponent = (props)=>{
         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);
@@ -207,18 +254,26 @@ const StageNodeComponent = (props)=>{
         handleStageTitleClickToSave,
         isStageTitleEditing
     ]);
-    const contextMenuItems = (0, external_react_namespaceObject.useCallback)((isParallel, groupIndex, taskIndex, tasksLength, taskGroupLength, isAboveParallel, isBelowParallel)=>{
+    const hasContextMenu = !!(onReplaceTaskFromToolbox || onTaskGroupModification);
+    const buildContextMenuItems = (0, external_react_namespaceObject.useCallback)((groupIndex, taskIndex)=>{
+        const taskGroup = tasks[groupIndex] ?? [];
+        const isParallel = taskGroup.length > 1;
         const items = [];
         if (onReplaceTaskFromToolbox) {
             items.push((0, external_StageNodeTaskUtilities_cjs_namespaceObject.getMenuItem)('replace-task', 'Replace task', ()=>{
-                const taskId = tasks[groupIndex]?.[taskIndex]?.id;
+                taskStateReference.current = {
+                    isParallel,
+                    groupIndex,
+                    taskIndex
+                };
+                const taskId = taskGroup[taskIndex]?.id;
                 if (taskId) onTaskClick?.(taskId);
                 setIsReplacingTask(true);
             }));
             items.push((0, external_StageNodeTaskUtilities_cjs_namespaceObject.getDivider)());
         }
         if (onTaskGroupModification) {
-            const reGroupOptions = (0, external_StageNodeTaskUtilities_cjs_namespaceObject.getContextMenuItems)(isParallel, groupIndex, tasksLength, taskIndex, taskGroupLength, isAboveParallel, isBelowParallel, reGroupTaskFunction);
+            const reGroupOptions = (0, external_StageNodeTaskUtilities_cjs_namespaceObject.getContextMenuItems)(isParallel, groupIndex, tasks.length, taskIndex, taskGroup.length, (tasks[groupIndex - 1]?.length ?? 0) > 1, (tasks[groupIndex + 1]?.length ?? 0) > 1, onTaskGroupModification);
             return [
                 ...items,
                 ...reGroupOptions
@@ -229,10 +284,9 @@ const StageNodeComponent = (props)=>{
         onReplaceTaskFromToolbox,
         onTaskClick,
         onTaskGroupModification,
-        reGroupTaskFunction,
         tasks
     ]);
-    const { setSelectedNodeId } = (0, hooks_index_cjs_namespaceObject.useNodeSelection)();
+    const { setSelectedNodeId } = (0, hooks_index_cjs_namespaceObject.useSetNodeSelection)();
     const handleStageClick = (0, external_react_namespaceObject.useCallback)(()=>{
         onStageClick?.();
     }, [
@@ -355,9 +409,9 @@ const StageNodeComponent = (props)=>{
         setActiveDragId(event.active.id);
     }, []);
     const handleDragMove = (0, external_react_namespaceObject.useCallback)((event)=>{
-        setOffsetLeft(event.delta.x / zoom);
+        setOffsetLeft(event.delta.x / storeApi.getState().transform[2]);
     }, [
-        zoom
+        storeApi
     ]);
     const handleDragOver = (0, external_react_namespaceObject.useCallback)((event)=>{
         setOverId(event.over?.id ?? null);
@@ -393,12 +447,6 @@ const StageNodeComponent = (props)=>{
         } : void 0, [
         taskWidth
     ]);
-    const dragOverlayStyle = (0, external_react_namespaceObject.useMemo)(()=>({
-            transform: `scale(${zoom})`,
-            transformOrigin: 'top left'
-        }), [
-        zoom
-    ]);
     return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
         "data-testid": `stage-${id}`,
         style: {
@@ -459,6 +507,31 @@ const StageNodeComponent = (props)=>{
                                                 variant: apollo_core_namespaceObject.FontVariantToken.fontSizeS,
                                                 color: "var(--uix-canvas-foreground-de-emp)",
                                                 children: stageDuration
+                                            }),
+                                            stageDetails.headerChips && stageDetails.headerChips.length > 0 && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_StageNode_styles_cjs_namespaceObject.StageHeaderChipsRow, {
+                                                children: stageDetails.headerChips.map((chip)=>{
+                                                    const button = /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(external_StageNode_styles_cjs_namespaceObject.StageChip, {
+                                                        type: "button",
+                                                        "aria-label": 'string' == typeof chip.tooltip ? chip.tooltip : chip.type,
+                                                        onClick: (e)=>{
+                                                            e.stopPropagation();
+                                                            chip.onClick?.();
+                                                        },
+                                                        children: [
+                                                            CHIP_ICONS[chip.type],
+                                                            void 0 !== chip.count && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_material_index_cjs_namespaceObject.ApTypography, {
+                                                                variant: apollo_core_namespaceObject.FontVariantToken.fontSizeS,
+                                                                children: chip.count
+                                                            })
+                                                        ]
+                                                    }, chip.type);
+                                                    if (chip.tooltip) return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_material_index_cjs_namespaceObject.ApTooltip, {
+                                                        placement: "bottom",
+                                                        content: chip.tooltip,
+                                                        children: button
+                                                    }, chip.type);
+                                                    return button;
+                                                })
                                             })
                                         ]
                                     })
@@ -538,20 +611,14 @@ const StageNodeComponent = (props)=>{
                                                                     taskExecution: taskExecution,
                                                                     isSelected: selectedTaskId === 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),
+                                                                    groupIndex: groupIndex,
+                                                                    taskIndex: taskIndex,
                                                                     onTaskClick: handleTaskClick,
                                                                     projectedDepth: task.id === activeDragId && projected ? projected.depth : void 0,
                                                                     onTaskPlay: onTaskPlay,
                                                                     isDragDisabled: !onTaskReorder,
-                                                                    zoom: zoom,
-                                                                    ...(onTaskGroupModification || onReplaceTaskFromToolbox) && {
-                                                                        onMenuOpen: ()=>{
-                                                                            taskStateReference.current = {
-                                                                                isParallel,
-                                                                                groupIndex,
-                                                                                taskIndex
-                                                                            };
-                                                                        }
+                                                                    ...hasContextMenu && {
+                                                                        getContextMenuItems: buildContextMenuItems
                                                                     }
                                                                 }, task.id);
                                                             })
@@ -562,23 +629,11 @@ const StageNodeComponent = (props)=>{
                                         })
                                     })
                                 }),
-                                /*#__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)(StageNode_StageTaskDragOverlay, {
+                                    activeTask: activeTask,
+                                    isActiveTaskParallel: isActiveTaskParallel,
+                                    taskWidthStyle: taskWidthStyle
+                                })
                             ]
                         }) : /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(index_cjs_namespaceObject.Column, {
                             py: 2,
@@ -632,6 +687,31 @@ const StageNodeComponent = (props)=>{
         ]
     });
 };
+const StageNodeInnerMemo = /*#__PURE__*/ (0, external_react_namespaceObject.memo)(StageNodeInner);
+const StageNodeComponent = ({ dragging, selected, id, width, execution, stageDetails, addTaskLabel, addTaskLoading, replaceTaskLabel, taskOptions, menuItems, pendingReplaceTask, onStageClick, onTaskAdd, onAddTaskFromToolbox, onTaskToolboxSearch, onTaskClick, onTaskGroupModification, onStageTitleChange, onTaskReorder, onReplaceTaskFromToolbox, onTaskPlay })=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(StageNodeInnerMemo, {
+        dragging: dragging,
+        selected: selected,
+        id: id,
+        width: width,
+        execution: execution,
+        stageDetails: stageDetails,
+        addTaskLabel: addTaskLabel,
+        addTaskLoading: addTaskLoading,
+        replaceTaskLabel: replaceTaskLabel,
+        taskOptions: taskOptions,
+        menuItems: menuItems,
+        pendingReplaceTask: pendingReplaceTask,
+        onStageClick: onStageClick,
+        onTaskAdd: onTaskAdd,
+        onAddTaskFromToolbox: onAddTaskFromToolbox,
+        onTaskToolboxSearch: onTaskToolboxSearch,
+        onTaskClick: onTaskClick,
+        onTaskGroupModification: onTaskGroupModification,
+        onStageTitleChange: onStageTitleChange,
+        onTaskReorder: onTaskReorder,
+        onReplaceTaskFromToolbox: onReplaceTaskFromToolbox,
+        onTaskPlay: onTaskPlay
+    });
 const StageNode = /*#__PURE__*/ (0, external_react_namespaceObject.memo)(StageNodeComponent);
 exports.StageNode = __webpack_exports__.StageNode;
 for(var __rspack_i in __webpack_exports__)if (-1 === [

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

@@ -1,3 +1,3 @@
 import type { StageNodeProps } from './StageNode.types';
-export declare const StageNode: import("react").MemoExoticComponent<(props: StageNodeProps) => import("react/jsx-runtime").JSX.Element>;
+export declare const StageNode: import("react").MemoExoticComponent<({ dragging, selected, id, width, execution, stageDetails, addTaskLabel, addTaskLoading, replaceTaskLabel, taskOptions, menuItems, pendingReplaceTask, onStageClick, onTaskAdd, onAddTaskFromToolbox, onTaskToolboxSearch, onTaskClick, onTaskGroupModification, onStageTitleChange, onTaskReorder, onReplaceTaskFromToolbox, onTaskPlay, }: StageNodeProps) => import("react/jsx-runtime").JSX.Element>;
 //# sourceMappingURL=StageNode.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"StageNode.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/StageNode/StageNode.tsx"],"names":[],"mappings":"AAqDA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AA2pBxD,eAAO,MAAM,SAAS,8CAjpBa,cAAc,6CAipBA,CAAC"}
+{"version":3,"file":"StageNode.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/StageNode/StageNode.tsx"],"names":[],"mappings":"AA6DA,OAAO,KAAK,EAEV,cAAc,EAEf,MAAM,mBAAmB,CAAC;AA4vB3B,eAAO,MAAM,SAAS,mXA7BnB,cAAc,6CA6BgC,CAAC"}