@uipath/apollo-react 3.68.2 → 3.68.3-pr431.8e3b0c3

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

@@ -10,7 +10,54 @@ import { TaskIcon, TaskItemTypeValues } from "../TaskIcon/index.js";
 import { StageConnectionEdge } from "./StageConnectionEdge.js";
 import { StageEdge } from "./StageEdge.js";
 import { StageNode } from "./StageNode.js";
+import { StageNodeWrapper } from "./StageNode.stories.utils.js";
 import { StageHeaderChipType } from "./StageNode.types.js";
+const DefaultCanvasDecorator = ({ initialNodes, initialEdges = [] })=>{
+    const [nodes, _setNodes, onNodesChange] = useNodesState(initialNodes);
+    const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges);
+    const onConnect = useCallback((connection)=>{
+        setEdges((eds)=>addEdge(connection, eds));
+    }, [
+        setEdges
+    ]);
+    const nodeTypes = useMemo(()=>({
+            stage: StageNodeWrapper
+        }), []);
+    const edgeTypes = useMemo(()=>({
+            stage: StageEdge
+        }), []);
+    const defaultEdgeOptions = useMemo(()=>({
+            type: 'stage'
+        }), []);
+    return /*#__PURE__*/ jsx("div", {
+        style: {
+            width: '100vw',
+            height: '100vh'
+        },
+        children: /*#__PURE__*/ jsx(ReactFlowProvider, {
+            children: /*#__PURE__*/ jsx(BaseCanvas, {
+                nodes: nodes,
+                edges: edges,
+                onNodesChange: onNodesChange,
+                onEdgesChange: onEdgesChange,
+                onConnect: onConnect,
+                nodeTypes: nodeTypes,
+                edgeTypes: edgeTypes,
+                mode: "design",
+                connectionMode: ConnectionMode.Strict,
+                defaultEdgeOptions: defaultEdgeOptions,
+                connectionLineComponent: StageConnectionEdge,
+                elevateEdgesOnSelect: true,
+                children: /*#__PURE__*/ jsx(Panel, {
+                    position: "bottom-right",
+                    children: /*#__PURE__*/ jsx(CanvasPositionControls, {
+                        translations: DefaultCanvasTranslations
+                    })
+                })
+            })
+        })
+    });
+};
 const meta = {
     title: 'Canvas/StageNode',
     component: StageNode,
@@ -20,10 +67,6 @@ const meta = {
     decorators: [
         (Story, context)=>{
             if (context.parameters?.useCustomRender) return /*#__PURE__*/ jsx(Story, {});
-            const StageNodeWrapper = (props)=>/*#__PURE__*/ jsx(StageNode, {
-                    ...props,
-                    ...props.data
-                });
             const initialNodes = context.parameters?.nodes || [
                 {
                     id: '1',
@@ -43,51 +86,9 @@ const meta = {
                 }
             ];
             const initialEdges = context.parameters?.edges || [];
-            const [nodes, _setNodes, onNodesChange] = useNodesState(initialNodes);
-            const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges);
-            const onConnect = useCallback((connection)=>{
-                setEdges((eds)=>addEdge(connection, eds));
-            }, [
-                setEdges
-            ]);
-            const nodeTypes = useMemo(()=>({
-                    stage: StageNodeWrapper
-                }), [
-                StageNodeWrapper
-            ]);
-            const edgeTypes = useMemo(()=>({
-                    stage: StageEdge
-                }), []);
-            const defaultEdgeOptions = useMemo(()=>({
-                    type: 'stage'
-                }), []);
-            return /*#__PURE__*/ jsx("div", {
-                style: {
-                    width: '100vw',
-                    height: '100vh'
-                },
-                children: /*#__PURE__*/ jsx(ReactFlowProvider, {
-                    children: /*#__PURE__*/ jsx(BaseCanvas, {
-                        nodes: nodes,
-                        edges: edges,
-                        onNodesChange: onNodesChange,
-                        onEdgesChange: onEdgesChange,
-                        onConnect: onConnect,
-                        nodeTypes: nodeTypes,
-                        edgeTypes: edgeTypes,
-                        mode: "design",
-                        connectionMode: ConnectionMode.Strict,
-                        defaultEdgeOptions: defaultEdgeOptions,
-                        connectionLineComponent: StageConnectionEdge,
-                        elevateEdgesOnSelect: true,
-                        children: /*#__PURE__*/ jsx(Panel, {
-                            position: "bottom-right",
-                            children: /*#__PURE__*/ jsx(CanvasPositionControls, {
-                                translations: DefaultCanvasTranslations
-                            })
-                        })
-                    })
-                })
+            return /*#__PURE__*/ jsx(DefaultCanvasDecorator, {
+                initialNodes: initialNodes,
+                initialEdges: initialEdges
             });
         }
     ],
@@ -163,7 +164,7 @@ const DocumentIcon = ()=>/*#__PURE__*/ jsxs("svg", {
         strokeWidth: "1.5",
         children: [
             /*#__PURE__*/ jsx("path", {
-                d: "M14 2H6C4.9 2 4 2.9 4 4V20C20 21.1 4.9 22 6 22H18C19.1 22 20 21.1 20 20V8L14 2Z"
+                d: "M14 2H6C4.9 2 4 2.9 4 4V20C4 21.1 4.9 22 6 22H18C19.1 22 20 21.1 20 20V8L14 2Z"
             }),
             /*#__PURE__*/ jsx("path", {
                 d: "M14 2V8H20"
@@ -1274,17 +1275,9 @@ const initialTasks = [
     ]
 ];
 const DraggableTaskReorderingStory = ()=>{
-    const StageNodeWrapper = useMemo(()=>function(props) {
-            return /*#__PURE__*/ jsx(StageNode, {
-                ...props,
-                ...props.data
-            });
-        }, []);
     const nodeTypes = useMemo(()=>({
             stage: StageNodeWrapper
-        }), [
-        StageNodeWrapper
-    ]);
+        }), []);
     const edgeTypes = useMemo(()=>({
             stage: StageEdge
         }), []);
@@ -1453,17 +1446,9 @@ const availableTaskOptions = [
     }
 ];
 const AddAndReplaceTasksStory = ()=>{
-    const StageNodeWrapper = useMemo(()=>function(props) {
-            return /*#__PURE__*/ jsx(StageNode, {
-                ...props,
-                ...props.data
-            });
-        }, []);
     const nodeTypes = useMemo(()=>({
             stage: StageNodeWrapper
-        }), [
-        StageNodeWrapper
-    ]);
+        }), []);
     const edgeTypes = useMemo(()=>({
             stage: StageEdge
         }), []);
@@ -1704,20 +1689,25 @@ const AddAndReplaceTasks = {
     args: {}
 };
 const InlineTitleEditStory = ()=>{
-    const StageNodeWrapper = useMemo(()=>function(props) {
-            return /*#__PURE__*/ jsx(StageNode, {
-                ...props,
-                ...props.data
-            });
-        }, []);
     const nodeTypes = useMemo(()=>({
             stage: StageNodeWrapper
-        }), [
-        StageNodeWrapper
-    ]);
+        }), []);
     const edgeTypes = useMemo(()=>({
             stage: StageEdge
         }), []);
+    const setNodesRef = useRef(null);
+    const createTitleChangeHandler = useCallback((nodeId)=>(newTitle)=>{
+            setNodesRef.current((nds)=>nds.map((node)=>node.id === nodeId ? {
+                        ...node,
+                        data: {
+                            ...node.data,
+                            stageDetails: {
+                                ...node.data.stageDetails,
+                                label: newTitle
+                            }
+                        }
+                    } : node));
+        }, []);
     const initialNodes = useMemo(()=>[
             {
                 id: 'editable-stage',
@@ -1749,7 +1739,8 @@ const InlineTitleEditStory = ()=>{
                     },
                     onTaskAdd: ()=>{
                         window.alert('Add task functionality - this would open a dialog to add a new task');
-                    }
+                    },
+                    onStageTitleChange: createTitleChangeHandler('editable-stage')
                 }
             },
             {
@@ -1775,36 +1766,16 @@ const InlineTitleEditStory = ()=>{
                     },
                     onTaskAdd: ()=>{
                         window.alert('Add task functionality - this would open a dialog to add a new task');
-                    }
+                    },
+                    onStageTitleChange: createTitleChangeHandler('long-title-stage')
                 }
             }
-        ], []);
-    const [nodes, setNodes, onNodesChange] = useNodesState(initialNodes);
-    const [edges, setEdges, onEdgesChange] = useEdgesState([]);
-    const createTitleChangeHandler = useCallback((nodeId)=>(newTitle)=>{
-            setNodes((nds)=>nds.map((node)=>node.id === nodeId ? {
-                        ...node,
-                        data: {
-                            ...node.data,
-                            stageDetails: {
-                                ...node.data.stageDetails,
-                                label: newTitle
-                            }
-                        }
-                    } : node));
-        }, [
-        setNodes
-    ]);
-    const nodesWithHandlers = useMemo(()=>nodes.map((node)=>({
-                ...node,
-                data: {
-                    ...node.data,
-                    onStageTitleChange: createTitleChangeHandler(node.id)
-                }
-            })), [
-        nodes,
+        ], [
         createTitleChangeHandler
     ]);
+    const [nodes, setNodes, onNodesChange] = useNodesState(initialNodes);
+    setNodesRef.current = setNodes;
+    const [edges, setEdges, onEdgesChange] = useEdgesState([]);
     const onConnect = useCallback((connection)=>setEdges((eds)=>addEdge(connection, eds)), [
         setEdges
     ]);
@@ -1815,7 +1786,7 @@ const InlineTitleEditStory = ()=>{
         },
         children: /*#__PURE__*/ jsx(ReactFlowProvider, {
             children: /*#__PURE__*/ jsx(BaseCanvas, {
-                nodes: nodesWithHandlers,
+                nodes: nodes,
                 edges: edges,
                 onNodesChange: onNodesChange,
                 onEdgesChange: onEdgesChange,
@@ -1906,20 +1877,33 @@ const loadedTaskOptionsWithChildren = [
     }
 ];
 const AddTaskLoadingStory = ()=>{
-    const StageNodeWrapper = useMemo(()=>function(props) {
-            return /*#__PURE__*/ jsx(StageNode, {
-                ...props,
-                ...props.data
-            });
-        }, []);
     const nodeTypes = useMemo(()=>({
             stage: StageNodeWrapper
-        }), [
-        StageNodeWrapper
-    ]);
+        }), []);
     const edgeTypes = useMemo(()=>({
             stage: StageEdge
         }), []);
+    const setNodesRef = useRef(null);
+    const timeoutRef = useRef(void 0);
+    const handleAddTaskFromToolbox = useCallback((nodeId, _taskItem)=>{
+        clearTimeout(timeoutRef.current);
+        setNodesRef.current((nds)=>nds.map((n)=>n.id === nodeId ? {
+                    ...n,
+                    data: {
+                        ...n.data,
+                        addTaskLoading: true
+                    }
+                } : n));
+        timeoutRef.current = setTimeout(()=>{
+            setNodesRef.current((nds)=>nds.map((n)=>n.id === nodeId ? {
+                        ...n,
+                        data: {
+                            ...n.data,
+                            addTaskLoading: false
+                        }
+                    } : n));
+        }, 2000);
+    }, []);
     const initialNodes = useMemo(()=>[
             {
                 id: 'loading-stage-empty',
@@ -1935,7 +1919,10 @@ const AddTaskLoadingStory = ()=>{
                         tasks: []
                     },
                     addTaskLoading: true,
-                    taskOptions: []
+                    taskOptions: [],
+                    onAddTaskFromToolbox: (taskItem)=>{
+                        handleAddTaskFromToolbox('loading-stage-empty', taskItem);
+                    }
                 }
             },
             {
@@ -1960,11 +1947,17 @@ const AddTaskLoadingStory = ()=>{
                         ]
                     },
                     addTaskLoading: false,
-                    taskOptions: loadedTaskOptionsWithChildren
+                    taskOptions: loadedTaskOptionsWithChildren,
+                    onAddTaskFromToolbox: (taskItem)=>{
+                        handleAddTaskFromToolbox('loading-stage-children', taskItem);
+                    }
                 }
             }
-        ], []);
-    const [nodesState, setNodes, onNodesChange] = useNodesState(initialNodes);
+        ], [
+        handleAddTaskFromToolbox
+    ]);
+    const [nodes, setNodes, onNodesChange] = useNodesState(initialNodes);
+    setNodesRef.current = setNodes;
     const [edges, setEdges, onEdgesChange] = useEdgesState([]);
     useEffect(()=>{
         const timeout = setTimeout(()=>{
@@ -1981,41 +1974,7 @@ const AddTaskLoadingStory = ()=>{
     }, [
         setNodes
     ]);
-    const timeoutRef = useRef(void 0);
     useEffect(()=>()=>clearTimeout(timeoutRef.current), []);
-    const handleAddTaskFromToolbox = useCallback((nodeId, _taskItem)=>{
-        clearTimeout(timeoutRef.current);
-        setNodes((nds)=>nds.map((n)=>n.id === nodeId ? {
-                    ...n,
-                    data: {
-                        ...n.data,
-                        addTaskLoading: true
-                    }
-                } : n));
-        timeoutRef.current = setTimeout(()=>{
-            setNodes((nds)=>nds.map((n)=>n.id === nodeId ? {
-                        ...n,
-                        data: {
-                            ...n.data,
-                            addTaskLoading: false
-                        }
-                    } : n));
-        }, 2000);
-    }, [
-        setNodes
-    ]);
-    const nodesWithHandler = useMemo(()=>nodesState.map((node)=>({
-                ...node,
-                data: {
-                    ...node.data,
-                    onAddTaskFromToolbox: (taskItem)=>{
-                        handleAddTaskFromToolbox(node.id, taskItem);
-                    }
-                }
-            })), [
-        nodesState,
-        handleAddTaskFromToolbox
-    ]);
     const onConnect = useCallback((connection)=>setEdges((eds)=>addEdge(connection, eds)), [
         setEdges
     ]);
@@ -2026,7 +1985,7 @@ const AddTaskLoadingStory = ()=>{
         },
         children: /*#__PURE__*/ jsx(ReactFlowProvider, {
             children: /*#__PURE__*/ jsx(BaseCanvas, {
-                nodes: nodesWithHandler,
+                nodes: nodes,
                 edges: edges,
                 onNodesChange: onNodesChange,
                 onEdgesChange: onEdgesChange,
@@ -2116,7 +2075,7 @@ const AdhocTasks = {
                 width: 304,
                 data: {
                     stageDetails: {
-                        label: 'Without onTaskPlay',
+                        label: 'Without onTaskPlay and Menu',
                         tasks: [
                             [
                                 {
@@ -2146,6 +2105,12 @@ const AdhocTasks = {
                     },
                     onTaskClick: (taskId)=>{
                         window.alert(`Task clicked: ${taskId}`);
+                    },
+                    onTaskGroupModification: (type, groupIndex, taskIndex)=>{
+                        console.log(`Task group modification: ${type}, group: ${groupIndex}, task: ${taskIndex}`);
+                    },
+                    onReplaceTaskFromToolbox: (task, groupIndex, taskIndex)=>{
+                        console.log(`Replace task at group: ${groupIndex}, task: ${taskIndex}`, task);
                     }
                 }
             },

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

@@ -0,0 +1,42 @@
+"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__, {
+    StageNodeWrapper: ()=>StageNodeWrapper
+});
+const jsx_runtime_namespaceObject = require("react/jsx-runtime");
+const external_react_namespaceObject = require("react");
+const external_StageNode_cjs_namespaceObject = require("./StageNode.cjs");
+const StageNodeWrapper = /*#__PURE__*/ (0, external_react_namespaceObject.memo)((props)=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_StageNode_cjs_namespaceObject.StageNode, {
+        ...props,
+        ...props.data
+    }));
+exports.StageNodeWrapper = __webpack_exports__.StageNodeWrapper;
+for(var __rspack_i in __webpack_exports__)if (-1 === [
+    "StageNodeWrapper"
+].indexOf(__rspack_i)) exports[__rspack_i] = __webpack_exports__[__rspack_i];
+Object.defineProperty(exports, '__esModule', {
+    value: true
+});

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

@@ -0,0 +1,3 @@
+import type { NodeProps } from '../../xyflow/react.ts';
+export declare const StageNodeWrapper: import("react").MemoExoticComponent<(props: NodeProps) => import("react/jsx-runtime").JSX.Element>;
+//# sourceMappingURL=StageNode.stories.utils.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"StageNode.stories.utils.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/StageNode/StageNode.stories.utils.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,0CAA0C,CAAC;AAK1E,eAAO,MAAM,gBAAgB,8CAAgB,SAAS,6CAEpD,CAAC"}

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

@@ -0,0 +1,8 @@
+import { jsx } from "react/jsx-runtime";
+import { memo } from "react";
+import { StageNode } from "./StageNode.js";
+const StageNodeWrapper = /*#__PURE__*/ memo((props)=>/*#__PURE__*/ jsx(StageNode, {
+        ...props,
+        ...props.data
+    }));
+export { StageNodeWrapper };

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

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

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

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

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

@@ -35,7 +35,7 @@ export interface StageHeaderChip {
     tooltip?: React.ReactNode;
     onClick?: () => void;
 }
-export interface StageNodeProps extends NodeProps {
+export interface StageNodeBaseProps {
     dragging: boolean;
     selected: boolean;
     id: string;
@@ -79,6 +79,9 @@ export interface StageNodeProps extends NodeProps {
     onTaskPlay?: (taskId: string) => Promise<void>;
     hideParallelOptions?: boolean;
 }
+export interface StageNodeProps extends NodeProps, StageNodeBaseProps {
+}
+export type StageNodeInnerProps = StageNodeBaseProps & Pick<NodeProps, 'width'>;
 export interface StageTaskExecution {
     status?: StageTaskStatus;
     message?: string;
@@ -89,5 +92,10 @@ export interface StageTaskExecution {
     badgeStatus?: 'warning' | 'info' | 'error';
     retryCount?: number;
 }
+export interface StageTaskDragOverlayProps {
+    activeTask: StageTaskItem | undefined;
+    isActiveTaskParallel: boolean;
+    taskWidthStyle: React.CSSProperties | undefined;
+}
 export {};
 //# sourceMappingURL=StageNode.types.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"StageNode.types.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/StageNode/StageNode.types.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"StageNode.types.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/StageNode/StageNode.types.ts"],"names":[],"mappings":"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"}

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

@@ -0,0 +1,68 @@
+"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__, {
+    StageTaskDragOverlay: ()=>StageTaskDragOverlay
+});
+const jsx_runtime_namespaceObject = require("react/jsx-runtime");
+const core_namespaceObject = require("@dnd-kit/core");
+const react_cjs_namespaceObject = require("../../xyflow/react.cjs");
+const external_react_namespaceObject = require("react");
+const external_react_dom_namespaceObject = require("react-dom");
+const external_DraggableTask_cjs_namespaceObject = require("./DraggableTask.cjs");
+const external_StageNode_styles_cjs_namespaceObject = require("./StageNode.styles.cjs");
+const StageTaskDragOverlay = ({ 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);
+};
+exports.StageTaskDragOverlay = __webpack_exports__.StageTaskDragOverlay;
+for(var __rspack_i in __webpack_exports__)if (-1 === [
+    "StageTaskDragOverlay"
+].indexOf(__rspack_i)) exports[__rspack_i] = __webpack_exports__[__rspack_i];
+Object.defineProperty(exports, '__esModule', {
+    value: true
+});

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

@@ -0,0 +1,3 @@
+import type { StageTaskDragOverlayProps } from './StageNode.types';
+export declare const StageTaskDragOverlay: ({ activeTask, isActiveTaskParallel, taskWidthStyle, }: StageTaskDragOverlayProps) => import("react").ReactPortal;
+//# sourceMappingURL=StageTaskDragOverlay.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"StageTaskDragOverlay.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/StageNode/StageTaskDragOverlay.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,mBAAmB,CAAC;AAEnE,eAAO,MAAM,oBAAoB,GAAI,uDAIlC,yBAAyB,gCA0B3B,CAAC"}

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

@@ -0,0 +1,34 @@
+import { jsx } from "react/jsx-runtime";
+import { DragOverlay } from "@dnd-kit/core";
+import { useViewport } from "../../xyflow/react.js";
+import { useMemo } from "react";
+import { createPortal } from "react-dom";
+import { TaskContent } from "./DraggableTask.js";
+import { StageTask } from "./StageNode.styles.js";
+const StageTaskDragOverlay = ({ activeTask, isActiveTaskParallel, taskWidthStyle })=>{
+    const { zoom } = useViewport();
+    const dragOverlayStyle = useMemo(()=>({
+            transform: `scale(${zoom})`,
+            transformOrigin: 'top left'
+        }), [
+        zoom
+    ]);
+    return /*#__PURE__*/ createPortal(/*#__PURE__*/ jsx(DragOverlay, {
+        children: activeTask ? /*#__PURE__*/ jsx("div", {
+            style: dragOverlayStyle,
+            children: /*#__PURE__*/ jsx(StageTask, {
+                selected: true,
+                isParallel: isActiveTaskParallel,
+                style: {
+                    cursor: 'grabbing',
+                    ...taskWidthStyle
+                },
+                children: /*#__PURE__*/ jsx(TaskContent, {
+                    task: activeTask,
+                    isDragging: true
+                })
+            })
+        }) : null
+    }), document.body);
+};
+export { StageTaskDragOverlay };