@uipath/apollo-react 4.11.0 → 4.12.0

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

@@ -0,0 +1,97 @@
+"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__, {
+    StageNodeEventDrivenTaskGroups: ()=>StageNodeEventDrivenTaskGroups
+});
+const jsx_runtime_namespaceObject = require("react/jsx-runtime");
+const external_react_namespaceObject = require("react");
+const GroupModificationUtils_cjs_namespaceObject = require("../../utils/GroupModificationUtils.cjs");
+const external_EventDrivenTask_cjs_namespaceObject = require("./EventDrivenTask.cjs");
+const external_StageNode_styles_cjs_namespaceObject = require("./StageNode.styles.cjs");
+const external_StageNodeTaskUtilities_cjs_namespaceObject = require("./StageNodeTaskUtilities.cjs");
+const StageNodeEventDrivenTaskGroupsInner = ({ props, eventDrivenTasks, isReadOnly, selectedTaskId, taskStateReference, marginTop, handleTaskClick, setIsReplacingTask })=>{
+    const { execution, onTaskClick, onTaskGroupModification, onReplaceTaskFromToolbox, loadingTaskIds } = props;
+    const getEventDrivenContextMenuItems = (0, external_react_namespaceObject.useCallback)((groupIndex, taskIndex, taskId)=>{
+        const items = [];
+        if (onReplaceTaskFromToolbox) items.push((0, external_StageNodeTaskUtilities_cjs_namespaceObject.getMenuItem)('replace-task', 'Replace task', ()=>{
+            taskStateReference.current = {
+                isParallel: false,
+                groupIndex,
+                taskIndex
+            };
+            onTaskClick?.(taskId);
+            setIsReplacingTask(true);
+        }));
+        if (onTaskGroupModification) {
+            if (items.length > 0) items.push((0, external_StageNodeTaskUtilities_cjs_namespaceObject.getDivider)());
+            items.push((0, external_StageNodeTaskUtilities_cjs_namespaceObject.getMenuItem)('remove-task', 'Delete task', ()=>onTaskGroupModification(GroupModificationUtils_cjs_namespaceObject.GroupModificationType.REMOVE_TASK, groupIndex, taskIndex)));
+        }
+        return items;
+    }, [
+        onReplaceTaskFromToolbox,
+        onTaskClick,
+        onTaskGroupModification,
+        setIsReplacingTask,
+        taskStateReference
+    ]);
+    if (0 === eventDrivenTasks.length) return null;
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(external_StageNode_styles_cjs_namespaceObject.StageAdditionalTasksSection, {
+        style: {
+            marginTop
+        },
+        children: [
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_StageNode_styles_cjs_namespaceObject.StageAdditionalTasksHeaderSection, {
+                children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
+                    className: "text-xs font-bold text-foreground-muted",
+                    children: "Event-driven tasks"
+                })
+            }),
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_StageNode_styles_cjs_namespaceObject.StageTaskList, {
+                children: eventDrivenTasks.map(({ task, groupIndex, taskIndex })=>{
+                    const taskExecution = execution?.taskStatus?.[task.id];
+                    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_EventDrivenTask_cjs_namespaceObject.EventDrivenTaskItem, {
+                        task: task,
+                        taskExecution: taskExecution,
+                        isSelected: selectedTaskId === task.id,
+                        onTaskClick: handleTaskClick,
+                        isTaskLoading: loadingTaskIds?.has(task.id),
+                        ...(onTaskGroupModification || onReplaceTaskFromToolbox) && !isReadOnly && {
+                            getContextMenuItems: ()=>getEventDrivenContextMenuItems(groupIndex, taskIndex, task.id)
+                        }
+                    }, task.id);
+                })
+            })
+        ]
+    });
+};
+const StageNodeEventDrivenTaskGroups = /*#__PURE__*/ (0, external_react_namespaceObject.memo)(StageNodeEventDrivenTaskGroupsInner);
+exports.StageNodeEventDrivenTaskGroups = __webpack_exports__.StageNodeEventDrivenTaskGroups;
+for(var __rspack_i in __webpack_exports__)if (-1 === [
+    "StageNodeEventDrivenTaskGroups"
+].indexOf(__rspack_i)) exports[__rspack_i] = __webpack_exports__[__rspack_i];
+Object.defineProperty(exports, '__esModule', {
+    value: true
+});

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

@@ -0,0 +1,13 @@
+import { RefObject } from 'react';
+import type { StageNodeProps, StageTaskGroup, TaskStateReference } from './StageNode.types';
+export declare const StageNodeEventDrivenTaskGroups: import("react").MemoExoticComponent<({ props, eventDrivenTasks, isReadOnly, selectedTaskId, taskStateReference, marginTop, handleTaskClick, setIsReplacingTask, }: {
+    props: StageNodeProps;
+    eventDrivenTasks: StageTaskGroup[];
+    isReadOnly: boolean;
+    selectedTaskId?: string;
+    taskStateReference: RefObject<TaskStateReference>;
+    marginTop: string;
+    handleTaskClick: (e: React.MouseEvent, taskElementId: string) => void;
+    setIsReplacingTask: (isReplacingTask: boolean) => void;
+}) => import("react/jsx-runtime").JSX.Element | null>;
+//# sourceMappingURL=StageNodeEventDrivenTaskGroups.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"StageNodeEventDrivenTaskGroups.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/StageNode/StageNodeEventDrivenTaskGroups.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAQ,SAAS,EAAe,MAAM,OAAO,CAAC;AASrD,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,kBAAkB,EAAE,MAAM,mBAAmB,CAAC;AAsG5F,eAAO,MAAM,8BAA8B,qKA1FxC;IACD,KAAK,EAAE,cAAc,CAAC;IACtB,gBAAgB,EAAE,cAAc,EAAE,CAAC;IACnC,UAAU,EAAE,OAAO,CAAC;IACpB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,kBAAkB,EAAE,SAAS,CAAC,kBAAkB,CAAC,CAAC;IAClD,SAAS,EAAE,MAAM,CAAC;IAClB,eAAe,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,EAAE,aAAa,EAAE,MAAM,KAAK,IAAI,CAAC;IACtE,kBAAkB,EAAE,CAAC,eAAe,EAAE,OAAO,KAAK,IAAI,CAAC;CACxD,oDAiFsF,CAAC"}

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

@@ -0,0 +1,63 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { memo, useCallback } from "react";
+import { GroupModificationType } from "../../utils/GroupModificationUtils.js";
+import { EventDrivenTaskItem } from "./EventDrivenTask.js";
+import { StageAdditionalTasksHeaderSection, StageAdditionalTasksSection, StageTaskList } from "./StageNode.styles.js";
+import { getDivider, getMenuItem } from "./StageNodeTaskUtilities.js";
+const StageNodeEventDrivenTaskGroupsInner = ({ props, eventDrivenTasks, isReadOnly, selectedTaskId, taskStateReference, marginTop, handleTaskClick, setIsReplacingTask })=>{
+    const { execution, onTaskClick, onTaskGroupModification, onReplaceTaskFromToolbox, loadingTaskIds } = props;
+    const getEventDrivenContextMenuItems = useCallback((groupIndex, taskIndex, taskId)=>{
+        const items = [];
+        if (onReplaceTaskFromToolbox) items.push(getMenuItem('replace-task', 'Replace task', ()=>{
+            taskStateReference.current = {
+                isParallel: false,
+                groupIndex,
+                taskIndex
+            };
+            onTaskClick?.(taskId);
+            setIsReplacingTask(true);
+        }));
+        if (onTaskGroupModification) {
+            if (items.length > 0) items.push(getDivider());
+            items.push(getMenuItem('remove-task', 'Delete task', ()=>onTaskGroupModification(GroupModificationType.REMOVE_TASK, groupIndex, taskIndex)));
+        }
+        return items;
+    }, [
+        onReplaceTaskFromToolbox,
+        onTaskClick,
+        onTaskGroupModification,
+        setIsReplacingTask,
+        taskStateReference
+    ]);
+    if (0 === eventDrivenTasks.length) return null;
+    return /*#__PURE__*/ jsxs(StageAdditionalTasksSection, {
+        style: {
+            marginTop
+        },
+        children: [
+            /*#__PURE__*/ jsx(StageAdditionalTasksHeaderSection, {
+                children: /*#__PURE__*/ jsx("span", {
+                    className: "text-xs font-bold text-foreground-muted",
+                    children: "Event-driven tasks"
+                })
+            }),
+            /*#__PURE__*/ jsx(StageTaskList, {
+                children: eventDrivenTasks.map(({ task, groupIndex, taskIndex })=>{
+                    const taskExecution = execution?.taskStatus?.[task.id];
+                    return /*#__PURE__*/ jsx(EventDrivenTaskItem, {
+                        task: task,
+                        taskExecution: taskExecution,
+                        isSelected: selectedTaskId === task.id,
+                        onTaskClick: handleTaskClick,
+                        isTaskLoading: loadingTaskIds?.has(task.id),
+                        ...(onTaskGroupModification || onReplaceTaskFromToolbox) && !isReadOnly && {
+                            getContextMenuItems: ()=>getEventDrivenContextMenuItems(groupIndex, taskIndex, task.id)
+                        }
+                    }, task.id);
+                })
+            })
+        ]
+    });
+};
+const StageNodeEventDrivenTaskGroups = /*#__PURE__*/ memo(StageNodeEventDrivenTaskGroupsInner);
+export { StageNodeEventDrivenTaskGroups };

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

@@ -0,0 +1,119 @@
+"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__, {
+    StageNodeHandles: ()=>StageNodeHandles
+});
+const react_cjs_namespaceObject = require("../../xyflow/react.cjs");
+const external_react_namespaceObject = require("react");
+const ConnectedHandlesContext_cjs_namespaceObject = require("../BaseCanvas/ConnectedHandlesContext.cjs");
+const useButtonHandles_cjs_namespaceObject = require("../ButtonHandle/useButtonHandles.cjs");
+const StageNodeHandlesInner = ({ id, isReadOnly, selected, isHovered, isException })=>{
+    const isConnecting = (0, react_cjs_namespaceObject.useStore)((state)=>!!state.connectionClickStartHandle);
+    const connectedHandleIds = (0, ConnectedHandlesContext_cjs_namespaceObject.useConnectedHandles)(id);
+    const hasConnections = connectedHandleIds.size > 0;
+    const shouldShowHandles = (0, external_react_namespaceObject.useMemo)(()=>!isReadOnly && (selected || isHovered || isConnecting || hasConnections), [
+        hasConnections,
+        isConnecting,
+        selected,
+        isHovered,
+        isReadOnly
+    ]);
+    const handleConfigurations = (0, external_react_namespaceObject.useMemo)(()=>isException ? [] : [
+            {
+                position: react_cjs_namespaceObject.Position.Left,
+                handles: [
+                    {
+                        id: `${id}____target____left`,
+                        type: 'target',
+                        handleType: 'input'
+                    }
+                ],
+                visible: selected || isHovered || isConnecting,
+                customPositionAndOffsets: {
+                    top: 0,
+                    height: 64
+                }
+            },
+            {
+                position: react_cjs_namespaceObject.Position.Right,
+                handles: [
+                    {
+                        id: `${id}____source____right`,
+                        type: 'source',
+                        handleType: 'output'
+                    }
+                ],
+                visible: selected || isHovered || isConnecting,
+                customPositionAndOffsets: {
+                    top: 0,
+                    height: 64
+                }
+            },
+            {
+                position: react_cjs_namespaceObject.Position.Bottom,
+                handles: [
+                    {
+                        id: `${id}____target____bottom`,
+                        type: 'target',
+                        handleType: 'input'
+                    }
+                ],
+                visible: selected || isHovered || isConnecting
+            },
+            {
+                position: react_cjs_namespaceObject.Position.Bottom,
+                handles: [
+                    {
+                        id: `${id}____source____bottom`,
+                        type: 'source',
+                        handleType: 'output'
+                    }
+                ],
+                visible: selected || isHovered || isConnecting
+            }
+        ], [
+        isException,
+        id,
+        selected,
+        isHovered,
+        isConnecting
+    ]);
+    const handleElements = (0, useButtonHandles_cjs_namespaceObject.useButtonHandles)({
+        handleConfigurations,
+        shouldShowHandles,
+        nodeId: id,
+        selected
+    });
+    return handleElements;
+};
+const StageNodeHandles = /*#__PURE__*/ (0, external_react_namespaceObject.memo)(StageNodeHandlesInner);
+exports.StageNodeHandles = __webpack_exports__.StageNodeHandles;
+for(var __rspack_i in __webpack_exports__)if (-1 === [
+    "StageNodeHandles"
+].indexOf(__rspack_i)) exports[__rspack_i] = __webpack_exports__[__rspack_i];
+Object.defineProperty(exports, '__esModule', {
+    value: true
+});

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

@@ -0,0 +1,8 @@
+export declare const StageNodeHandles: import("react").MemoExoticComponent<({ id, isReadOnly, selected, isHovered, isException, }: {
+    id: string;
+    isReadOnly: boolean;
+    selected: boolean;
+    isHovered: boolean;
+    isException?: boolean;
+}) => import("react/jsx-runtime").JSX.Element | import("react/jsx-runtime").JSX.Element[]>;
+//# sourceMappingURL=StageNodeHandles.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"StageNodeHandles.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/StageNode/StageNodeHandles.tsx"],"names":[],"mappings":"AAiGA,eAAO,MAAM,gBAAgB,8FArF1B;IACD,EAAE,EAAE,MAAM,CAAC;IACX,UAAU,EAAE,OAAO,CAAC;IACpB,QAAQ,EAAE,OAAO,CAAC;IAClB,SAAS,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB,yFA+E0D,CAAC"}

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

@@ -0,0 +1,85 @@
+import { Position, useStore } from "../../xyflow/react.js";
+import { memo, useMemo } from "react";
+import { useConnectedHandles } from "../BaseCanvas/ConnectedHandlesContext.js";
+import { useButtonHandles } from "../ButtonHandle/useButtonHandles.js";
+const StageNodeHandlesInner = ({ id, isReadOnly, selected, isHovered, isException })=>{
+    const isConnecting = useStore((state)=>!!state.connectionClickStartHandle);
+    const connectedHandleIds = useConnectedHandles(id);
+    const hasConnections = connectedHandleIds.size > 0;
+    const shouldShowHandles = useMemo(()=>!isReadOnly && (selected || isHovered || isConnecting || hasConnections), [
+        hasConnections,
+        isConnecting,
+        selected,
+        isHovered,
+        isReadOnly
+    ]);
+    const handleConfigurations = useMemo(()=>isException ? [] : [
+            {
+                position: Position.Left,
+                handles: [
+                    {
+                        id: `${id}____target____left`,
+                        type: 'target',
+                        handleType: 'input'
+                    }
+                ],
+                visible: selected || isHovered || isConnecting,
+                customPositionAndOffsets: {
+                    top: 0,
+                    height: 64
+                }
+            },
+            {
+                position: Position.Right,
+                handles: [
+                    {
+                        id: `${id}____source____right`,
+                        type: 'source',
+                        handleType: 'output'
+                    }
+                ],
+                visible: selected || isHovered || isConnecting,
+                customPositionAndOffsets: {
+                    top: 0,
+                    height: 64
+                }
+            },
+            {
+                position: Position.Bottom,
+                handles: [
+                    {
+                        id: `${id}____target____bottom`,
+                        type: 'target',
+                        handleType: 'input'
+                    }
+                ],
+                visible: selected || isHovered || isConnecting
+            },
+            {
+                position: Position.Bottom,
+                handles: [
+                    {
+                        id: `${id}____source____bottom`,
+                        type: 'source',
+                        handleType: 'output'
+                    }
+                ],
+                visible: selected || isHovered || isConnecting
+            }
+        ], [
+        isException,
+        id,
+        selected,
+        isHovered,
+        isConnecting
+    ]);
+    const handleElements = useButtonHandles({
+        handleConfigurations,
+        shouldShowHandles,
+        nodeId: id,
+        selected
+    });
+    return handleElements;
+};
+const StageNodeHandles = /*#__PURE__*/ memo(StageNodeHandlesInner);
+export { StageNodeHandles };

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

@@ -0,0 +1,245 @@
+"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__, {
+    StageNodeHeader: ()=>StageNodeHeader
+});
+const jsx_runtime_namespaceObject = require("react/jsx-runtime");
+const apollo_core_namespaceObject = require("@uipath/apollo-core");
+const index_cjs_namespaceObject = require("../../layouts/index.cjs");
+const apollo_wind_namespaceObject = require("@uipath/apollo-wind");
+const external_react_namespaceObject = require("react");
+const external_icons_index_cjs_namespaceObject = require("../../icons/index.cjs");
+const icon_registry_cjs_namespaceObject = require("../../utils/icon-registry.cjs");
+const external_CanvasTooltip_cjs_namespaceObject = require("../CanvasTooltip.cjs");
+const external_ExecutionStatusIcon_index_cjs_namespaceObject = require("../ExecutionStatusIcon/index.cjs");
+const external_StageNode_styles_cjs_namespaceObject = require("./StageNode.styles.cjs");
+const external_StageNode_types_cjs_namespaceObject = require("./StageNode.types.cjs");
+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)(icon_registry_cjs_namespaceObject.CanvasIcon, {
+        icon: "x",
+        size: 16
+    }),
+    [external_StageNode_types_cjs_namespaceObject.StageHeaderChipType.CaseCompletion]: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(icon_registry_cjs_namespaceObject.CanvasIcon, {
+        icon: "check",
+        size: 16
+    })
+};
+const StageNodeHeaderInner = ({ props, isReadOnly, isException, status, handleTaskAddClick })=>{
+    const { id, stageDetails, execution, addTaskLabel = 'Add task', onTaskAdd, onAddTaskFromToolbox, onStageTitleChange } = props;
+    const icon = stageDetails?.icon;
+    const statusLabel = execution?.stageStatus?.label;
+    const stageDuration = execution?.stageStatus?.duration;
+    const isStageTitleEditable = !!onStageTitleChange && !isReadOnly;
+    const [isStageTitleEditing, setIsStageTitleEditing] = (0, external_react_namespaceObject.useState)(false);
+    const stageTitleRef = (0, external_react_namespaceObject.useRef)(null);
+    const [label, setLabel] = (0, external_react_namespaceObject.useState)(props.stageDetails.label);
+    (0, external_react_namespaceObject.useEffect)(()=>{
+        setLabel(props.stageDetails.label);
+    }, [
+        props.stageDetails.label
+    ]);
+    const handleStageTitleChange = (0, external_react_namespaceObject.useCallback)((e)=>{
+        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
+    ]);
+    (0, external_react_namespaceObject.useEffect)(()=>{
+        if (isStageTitleEditing) document.addEventListener('click', handleStageTitleClickToSave);
+        return ()=>{
+            document.removeEventListener('click', handleStageTitleClickToSave);
+        };
+    }, [
+        handleStageTitleClickToSave,
+        isStageTitleEditing
+    ]);
+    const handleStageTitleBlurToSave = (0, external_react_namespaceObject.useCallback)(()=>{
+        if (isStageTitleEditing) {
+            setIsStageTitleEditing(false);
+            if (onStageTitleChange) {
+                if ('' === label.trim()) setLabel('Untitled Stage');
+                onStageTitleChange(label);
+            }
+        }
+    }, [
+        isStageTitleEditing,
+        onStageTitleChange,
+        label
+    ]);
+    const handleStageTitleKeyDown = (0, external_react_namespaceObject.useCallback)((e)=>{
+        if ('Enter' === e.key) {
+            setIsStageTitleEditing(false);
+            if (onStageTitleChange) onStageTitleChange(label);
+        }
+        if ('Escape' !== e.key) e.stopPropagation();
+    }, [
+        onStageTitleChange,
+        label
+    ]);
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(external_StageNode_styles_cjs_namespaceObject.StageHeader, {
+        isException: isException,
+        "data-testid": `stage-header-${id}`,
+        children: [
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(index_cjs_namespaceObject.Row, {
+                gap: apollo_core_namespaceObject.Spacing.SpacingMicro,
+                align: "center",
+                flex: 1,
+                minW: 0,
+                children: [
+                    icon,
+                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(index_cjs_namespaceObject.Column, {
+                        py: 2,
+                        flex: 1,
+                        minW: 0,
+                        children: [
+                            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
+                                className: (0, apollo_wind_namespaceObject.cn)('text-sm', !isStageTitleEditing && 'font-bold'),
+                                children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_CanvasTooltip_cjs_namespaceObject.CanvasTooltip, {
+                                    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,
+                                            isEditing: isStageTitleEditing,
+                                            ...onStageTitleChange && {
+                                                onFocus: ()=>setIsStageTitleEditing(true),
+                                                onInput: handleStageTitleChange,
+                                                onKeyDown: handleStageTitleKeyDown,
+                                                onBlur: handleStageTitleBlurToSave
+                                            },
+                                            readOnly: !isStageTitleEditable
+                                        })
+                                    })
+                                })
+                            }),
+                            stageDuration && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
+                                className: "text-xs text-foreground-muted",
+                                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)("span", {
+                                                className: "text-xs",
+                                                children: chip.count
+                                            })
+                                        ]
+                                    }, chip.type);
+                                    if (chip.tooltip) return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_CanvasTooltip_cjs_namespaceObject.CanvasTooltip, {
+                                        placement: "bottom",
+                                        content: chip.tooltip,
+                                        children: button
+                                    }, chip.type);
+                                    return button;
+                                })
+                            })
+                        ]
+                    })
+                ]
+            }),
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(index_cjs_namespaceObject.Row, {
+                gap: apollo_core_namespaceObject.Spacing.SpacingMicro,
+                align: "start",
+                py: apollo_core_namespaceObject.Padding.PadS,
+                children: [
+                    status && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_CanvasTooltip_cjs_namespaceObject.CanvasTooltip, {
+                        content: statusLabel,
+                        placement: "top",
+                        children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(apollo_wind_namespaceObject.Button, {
+                            variant: "ghost",
+                            size: "icon",
+                            className: "h-6 w-6",
+                            "aria-label": statusLabel,
+                            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_CanvasTooltip_cjs_namespaceObject.CanvasTooltip, {
+                        content: addTaskLabel,
+                        placement: "top",
+                        children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(apollo_wind_namespaceObject.Button, {
+                            variant: "ghost",
+                            size: "icon",
+                            className: "h-6 w-6",
+                            onClick: handleTaskAddClick,
+                            "aria-label": addTaskLabel,
+                            children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(icon_registry_cjs_namespaceObject.CanvasIcon, {
+                                icon: "plus",
+                                size: 20
+                            })
+                        })
+                    })
+                ]
+            })
+        ]
+    });
+};
+const StageNodeHeader = /*#__PURE__*/ (0, external_react_namespaceObject.memo)(StageNodeHeaderInner);
+exports.StageNodeHeader = __webpack_exports__.StageNodeHeader;
+for(var __rspack_i in __webpack_exports__)if (-1 === [
+    "StageNodeHeader"
+].indexOf(__rspack_i)) exports[__rspack_i] = __webpack_exports__[__rspack_i];
+Object.defineProperty(exports, '__esModule', {
+    value: true
+});

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

@@ -0,0 +1,9 @@
+import type { StageNodeProps, StageStatus } from './StageNode.types';
+export declare const StageNodeHeader: import("react").MemoExoticComponent<({ props, isReadOnly, isException, status, handleTaskAddClick, }: {
+    props: StageNodeProps;
+    isReadOnly: boolean;
+    isException?: boolean;
+    status?: StageStatus;
+    handleTaskAddClick: (event: React.MouseEvent) => void;
+}) => import("react/jsx-runtime").JSX.Element>;
+//# sourceMappingURL=StageNodeHeader.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"StageNodeHeader.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/StageNode/StageNodeHeader.tsx"],"names":[],"mappings":"AAeA,OAAO,KAAK,EAAE,cAAc,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAwLrE,eAAO,MAAM,eAAe,wGAvKzB;IACD,KAAK,EAAE,cAAc,CAAC;IACtB,UAAU,EAAE,OAAO,CAAC;IACpB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB,kBAAkB,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;CACvD,6CAiKwD,CAAC"}