@uipath/apollo-react 4.11.0 → 4.12.1

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

@@ -0,0 +1,211 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Icon, Padding, Spacing } from "@uipath/apollo-core";
+import { Column, Row } from "../../layouts/index.js";
+import { Button, cn } from "@uipath/apollo-wind";
+import { memo, useCallback, useEffect, useRef, useState } from "react";
+import { EntryConditionIcon, ExitConditionIcon, ReturnToOriginIcon } from "../../icons/index.js";
+import { CanvasIcon } from "../../utils/icon-registry.js";
+import { CanvasTooltip } from "../CanvasTooltip.js";
+import { ExecutionStatusIcon } from "../ExecutionStatusIcon/index.js";
+import { StageChip, StageHeader, StageHeaderChipsRow, StageTitleContainer, StageTitleInput } from "./StageNode.styles.js";
+import { StageHeaderChipType } from "./StageNode.types.js";
+const CHIP_ICONS = {
+    [StageHeaderChipType.Entry]: /*#__PURE__*/ jsx(EntryConditionIcon, {
+        w: Icon.IconXs,
+        h: Icon.IconXs
+    }),
+    [StageHeaderChipType.Exit]: /*#__PURE__*/ jsx(ExitConditionIcon, {
+        w: Icon.IconXs,
+        h: Icon.IconXs
+    }),
+    [StageHeaderChipType.ReturnToOrigin]: /*#__PURE__*/ jsx(ReturnToOriginIcon, {
+        w: Icon.IconXs,
+        h: Icon.IconXs
+    }),
+    [StageHeaderChipType.CaseExit]: /*#__PURE__*/ jsx(CanvasIcon, {
+        icon: "x",
+        size: 16
+    }),
+    [StageHeaderChipType.CaseCompletion]: /*#__PURE__*/ jsx(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] = useState(false);
+    const stageTitleRef = useRef(null);
+    const [label, setLabel] = useState(props.stageDetails.label);
+    useEffect(()=>{
+        setLabel(props.stageDetails.label);
+    }, [
+        props.stageDetails.label
+    ]);
+    const handleStageTitleChange = useCallback((e)=>{
+        setIsStageTitleEditing(true);
+        setLabel(e.target.value);
+    }, []);
+    const handleStageTitleClickToSave = useCallback((e)=>{
+        if (isStageTitleEditing && !stageTitleRef.current?.contains(e.target)) {
+            setIsStageTitleEditing(false);
+            if (onStageTitleChange) {
+                if ('' === label.trim()) setLabel('Untitled Stage');
+                onStageTitleChange(label);
+            }
+        }
+    }, [
+        isStageTitleEditing,
+        onStageTitleChange,
+        label
+    ]);
+    useEffect(()=>{
+        if (isStageTitleEditing) document.addEventListener('click', handleStageTitleClickToSave);
+        return ()=>{
+            document.removeEventListener('click', handleStageTitleClickToSave);
+        };
+    }, [
+        handleStageTitleClickToSave,
+        isStageTitleEditing
+    ]);
+    const handleStageTitleBlurToSave = useCallback(()=>{
+        if (isStageTitleEditing) {
+            setIsStageTitleEditing(false);
+            if (onStageTitleChange) {
+                if ('' === label.trim()) setLabel('Untitled Stage');
+                onStageTitleChange(label);
+            }
+        }
+    }, [
+        isStageTitleEditing,
+        onStageTitleChange,
+        label
+    ]);
+    const handleStageTitleKeyDown = useCallback((e)=>{
+        if ('Enter' === e.key) {
+            setIsStageTitleEditing(false);
+            if (onStageTitleChange) onStageTitleChange(label);
+        }
+        if ('Escape' !== e.key) e.stopPropagation();
+    }, [
+        onStageTitleChange,
+        label
+    ]);
+    return /*#__PURE__*/ jsxs(StageHeader, {
+        isException: isException,
+        "data-testid": `stage-header-${id}`,
+        children: [
+            /*#__PURE__*/ jsxs(Row, {
+                gap: Spacing.SpacingMicro,
+                align: "center",
+                flex: 1,
+                minW: 0,
+                children: [
+                    icon,
+                    /*#__PURE__*/ jsxs(Column, {
+                        py: 2,
+                        flex: 1,
+                        minW: 0,
+                        children: [
+                            /*#__PURE__*/ jsx("span", {
+                                className: cn('text-sm', !isStageTitleEditing && 'font-bold'),
+                                children: /*#__PURE__*/ jsx(CanvasTooltip, {
+                                    content: label,
+                                    placement: "top",
+                                    delay: true,
+                                    children: /*#__PURE__*/ jsx(StageTitleContainer, {
+                                        isEditing: isStageTitleEditing,
+                                        children: /*#__PURE__*/ jsx(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__*/ jsx("span", {
+                                className: "text-xs text-foreground-muted",
+                                children: stageDuration
+                            }),
+                            stageDetails.headerChips && stageDetails.headerChips.length > 0 && /*#__PURE__*/ jsx(StageHeaderChipsRow, {
+                                children: stageDetails.headerChips.map((chip)=>{
+                                    const button = /*#__PURE__*/ jsxs(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__*/ jsx("span", {
+                                                className: "text-xs",
+                                                children: chip.count
+                                            })
+                                        ]
+                                    }, chip.type);
+                                    if (chip.tooltip) return /*#__PURE__*/ jsx(CanvasTooltip, {
+                                        placement: "bottom",
+                                        content: chip.tooltip,
+                                        children: button
+                                    }, chip.type);
+                                    return button;
+                                })
+                            })
+                        ]
+                    })
+                ]
+            }),
+            /*#__PURE__*/ jsxs(Row, {
+                gap: Spacing.SpacingMicro,
+                align: "start",
+                py: Padding.PadS,
+                children: [
+                    status && /*#__PURE__*/ jsx(CanvasTooltip, {
+                        content: statusLabel,
+                        placement: "top",
+                        children: /*#__PURE__*/ jsx(Button, {
+                            variant: "ghost",
+                            size: "icon",
+                            className: "h-6 w-6",
+                            "aria-label": statusLabel,
+                            children: /*#__PURE__*/ jsx(ExecutionStatusIcon, {
+                                status: status,
+                                size: 20
+                            })
+                        })
+                    }),
+                    (onTaskAdd || onAddTaskFromToolbox) && !isReadOnly && /*#__PURE__*/ jsx(CanvasTooltip, {
+                        content: addTaskLabel,
+                        placement: "top",
+                        children: /*#__PURE__*/ jsx(Button, {
+                            variant: "ghost",
+                            size: "icon",
+                            className: "h-6 w-6",
+                            onClick: handleTaskAddClick,
+                            "aria-label": addTaskLabel,
+                            children: /*#__PURE__*/ jsx(CanvasIcon, {
+                                icon: "plus",
+                                size: 20
+                            })
+                        })
+                    })
+                ]
+            })
+        ]
+    });
+};
+const StageNodeHeader = /*#__PURE__*/ memo(StageNodeHeaderInner);
+export { StageNodeHeader };

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

@@ -0,0 +1,176 @@
+"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__, {
+    StageNodeSequentialTaskGroups: ()=>StageNodeSequentialTaskGroups
+});
+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 external_react_namespaceObject = require("react");
+const GroupModificationUtils_cjs_namespaceObject = require("../../utils/GroupModificationUtils.cjs");
+const external_DraggableTask_cjs_namespaceObject = require("./DraggableTask.cjs");
+const useStageTaskDragHandler_cjs_namespaceObject = require("./hooks/useStageTaskDragHandler.cjs");
+const external_StageNode_styles_cjs_namespaceObject = require("./StageNode.styles.cjs");
+const external_StageNodeTaskUtilities_cjs_namespaceObject = require("./StageNodeTaskUtilities.cjs");
+const external_StageTaskDragOverlay_cjs_namespaceObject = require("./StageTaskDragOverlay.cjs");
+const StageNodeSequentialTaskGroups = ({ props, sequentialTaskGroups, sequentialTasks, isReadOnly, selectedTaskId, taskWidthStyle, taskStateReference, hasContextMenu, handleTaskClick, setIsReplacingTask, handleReorderSequentialTasks })=>{
+    const { execution, onTaskClick, onTaskGroupModification, onTaskReorder, onReplaceTaskFromToolbox, hideParallelOptions, loadingTaskIds } = props;
+    const sequentialTaskIds = (0, external_react_namespaceObject.useMemo)(()=>sequentialTasks.map(({ task })=>task.id), [
+        sequentialTasks
+    ]);
+    const { activeDragId, activeSequentialTask, isActiveTaskParallel, projected, handleDragStart, handleDragMove, handleDragOver, handleDragEnd, handleDragCancel } = (0, useStageTaskDragHandler_cjs_namespaceObject.useStageTaskDragHandler)({
+        sequentialTaskGroups,
+        sequentialTasks,
+        onTaskReorder: handleReorderSequentialTasks
+    });
+    const handleTaskRegroup = (0, external_react_namespaceObject.useCallback)((groupModificationType, groupIndex, taskIndex)=>{
+        if (onTaskReorder && (groupModificationType === GroupModificationUtils_cjs_namespaceObject.GroupModificationType.TASK_GROUP_UP || groupModificationType === GroupModificationUtils_cjs_namespaceObject.GroupModificationType.TASK_GROUP_DOWN)) {
+            const mover = groupModificationType === GroupModificationUtils_cjs_namespaceObject.GroupModificationType.TASK_GROUP_UP ? GroupModificationUtils_cjs_namespaceObject.moveGroupUp : GroupModificationUtils_cjs_namespaceObject.moveGroupDown;
+            const reordered = mover(sequentialTaskGroups, groupIndex, taskIndex);
+            handleReorderSequentialTasks(reordered);
+            return;
+        }
+        onTaskGroupModification?.(groupModificationType, groupIndex, taskIndex);
+    }, [
+        onTaskReorder,
+        handleReorderSequentialTasks,
+        onTaskGroupModification,
+        sequentialTaskGroups
+    ]);
+    const buildContextMenuItems = (0, external_react_namespaceObject.useCallback)((groupIndex, taskIndex)=>{
+        const taskGroup = sequentialTaskGroups[groupIndex] ?? [];
+        const isParallel = taskGroup.length > 1;
+        const items = [];
+        if (onReplaceTaskFromToolbox) {
+            items.push((0, external_StageNodeTaskUtilities_cjs_namespaceObject.getMenuItem)('replace-task', 'Replace task', ()=>{
+                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, sequentialTaskGroups.length, taskIndex, taskGroup.length, (sequentialTaskGroups[groupIndex - 1]?.length ?? 0) > 1, (sequentialTaskGroups[groupIndex + 1]?.length ?? 0) > 1, handleTaskRegroup, hideParallelOptions);
+            return [
+                ...items,
+                ...reGroupOptions
+            ];
+        }
+        return items;
+    }, [
+        onReplaceTaskFromToolbox,
+        onTaskClick,
+        onTaskGroupModification,
+        sequentialTaskGroups,
+        hideParallelOptions,
+        handleTaskRegroup,
+        setIsReplacingTask,
+        taskStateReference
+    ]);
+    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
+    }));
+    if (0 === sequentialTaskGroups.length) return null;
+    return /*#__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: sequentialTaskIds,
+                strategy: sortable_namespaceObject.verticalListSortingStrategy,
+                children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_StageNode_styles_cjs_namespaceObject.StageTaskList, {
+                    className: "nodrag nopan",
+                    children: sequentialTaskGroups.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.StageTaskGroupContainer, {
+                                    isParallel: isParallel,
+                                    children: [
+                                        isParallel && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_StageNode_styles_cjs_namespaceObject.StageParallelLabel, {
+                                            children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
+                                                className: "text-xs",
+                                                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: selectedTaskId === task.id,
+                                                isParallel: isParallel,
+                                                groupIndex: groupIndex,
+                                                taskIndex: taskIndex,
+                                                onTaskClick: handleTaskClick,
+                                                projectedDepth: task.id === activeDragId && projected ? projected.depth : void 0,
+                                                isDragDisabled: !onTaskReorder || isReadOnly,
+                                                isTaskLoading: loadingTaskIds?.has(task.id),
+                                                ...hasContextMenu && !isReadOnly && {
+                                                    getContextMenuItems: buildContextMenuItems
+                                                }
+                                            }, task.id);
+                                        })
+                                    ]
+                                })
+                            ]
+                        }, `group-${groupIndex}`);
+                    })
+                })
+            }),
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_StageTaskDragOverlay_cjs_namespaceObject.StageTaskDragOverlay, {
+                activeTask: activeSequentialTask?.task,
+                isActiveTaskParallel: isActiveTaskParallel,
+                taskWidthStyle: taskWidthStyle
+            })
+        ]
+    });
+};
+exports.StageNodeSequentialTaskGroups = __webpack_exports__.StageNodeSequentialTaskGroups;
+for(var __rspack_i in __webpack_exports__)if (-1 === [
+    "StageNodeSequentialTaskGroups"
+].indexOf(__rspack_i)) exports[__rspack_i] = __webpack_exports__[__rspack_i];
+Object.defineProperty(exports, '__esModule', {
+    value: true
+});

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"StageNodeSequentialTaskGroups.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/StageNode/StageNodeSequentialTaskGroups.tsx"],"names":[],"mappings":"AAeA,OAAO,EAAE,aAAa,EAAE,SAAS,EAAwB,MAAM,OAAO,CAAC;AAevE,OAAO,KAAK,EACV,cAAc,EACd,cAAc,EACd,aAAa,EACb,kBAAkB,EACnB,MAAM,mBAAmB,CAAC;AAI3B,eAAO,MAAM,6BAA6B,GAAI,sMAY3C;IACD,KAAK,EAAE,cAAc,CAAC;IACtB,oBAAoB,EAAE,aAAa,EAAE,EAAE,CAAC;IACxC,eAAe,EAAE,cAAc,EAAE,CAAC;IAClC,UAAU,EAAE,OAAO,CAAC;IACpB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,cAAc,CAAC,EAAE,aAAa,CAAC;IAC/B,kBAAkB,EAAE,SAAS,CAAC,kBAAkB,CAAC,CAAC;IAClD,cAAc,EAAE,OAAO,CAAC;IACxB,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;IACvD,4BAA4B,EAAE,CAAC,QAAQ,EAAE,aAAa,EAAE,EAAE,KAAK,IAAI,CAAC;CACrE,mDAqLA,CAAC"}

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

@@ -0,0 +1,142 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { DndContext, KeyboardSensor, PointerSensor, closestCenter, useSensor, useSensors } from "@dnd-kit/core";
+import { SortableContext, sortableKeyboardCoordinates, verticalListSortingStrategy } from "@dnd-kit/sortable";
+import { Spacing } from "@uipath/apollo-core";
+import { Row } from "../../layouts/index.js";
+import { useCallback, useMemo } from "react";
+import { GroupModificationType, moveGroupDown, moveGroupUp } from "../../utils/GroupModificationUtils.js";
+import { DraggableTask } from "./DraggableTask.js";
+import { useStageTaskDragHandler } from "./hooks/useStageTaskDragHandler.js";
+import { StageParallelBracket, StageParallelLabel, StageTaskGroupContainer, StageTaskList } from "./StageNode.styles.js";
+import { getContextMenuItems, getDivider, getMenuItem } from "./StageNodeTaskUtilities.js";
+import { StageTaskDragOverlay } from "./StageTaskDragOverlay.js";
+const StageNodeSequentialTaskGroups = ({ props, sequentialTaskGroups, sequentialTasks, isReadOnly, selectedTaskId, taskWidthStyle, taskStateReference, hasContextMenu, handleTaskClick, setIsReplacingTask, handleReorderSequentialTasks })=>{
+    const { execution, onTaskClick, onTaskGroupModification, onTaskReorder, onReplaceTaskFromToolbox, hideParallelOptions, loadingTaskIds } = props;
+    const sequentialTaskIds = useMemo(()=>sequentialTasks.map(({ task })=>task.id), [
+        sequentialTasks
+    ]);
+    const { activeDragId, activeSequentialTask, isActiveTaskParallel, projected, handleDragStart, handleDragMove, handleDragOver, handleDragEnd, handleDragCancel } = useStageTaskDragHandler({
+        sequentialTaskGroups,
+        sequentialTasks,
+        onTaskReorder: handleReorderSequentialTasks
+    });
+    const handleTaskRegroup = useCallback((groupModificationType, groupIndex, taskIndex)=>{
+        if (onTaskReorder && (groupModificationType === GroupModificationType.TASK_GROUP_UP || groupModificationType === GroupModificationType.TASK_GROUP_DOWN)) {
+            const mover = groupModificationType === GroupModificationType.TASK_GROUP_UP ? moveGroupUp : moveGroupDown;
+            const reordered = mover(sequentialTaskGroups, groupIndex, taskIndex);
+            handleReorderSequentialTasks(reordered);
+            return;
+        }
+        onTaskGroupModification?.(groupModificationType, groupIndex, taskIndex);
+    }, [
+        onTaskReorder,
+        handleReorderSequentialTasks,
+        onTaskGroupModification,
+        sequentialTaskGroups
+    ]);
+    const buildContextMenuItems = useCallback((groupIndex, taskIndex)=>{
+        const taskGroup = sequentialTaskGroups[groupIndex] ?? [];
+        const isParallel = taskGroup.length > 1;
+        const items = [];
+        if (onReplaceTaskFromToolbox) {
+            items.push(getMenuItem('replace-task', 'Replace task', ()=>{
+                taskStateReference.current = {
+                    isParallel,
+                    groupIndex,
+                    taskIndex
+                };
+                const taskId = taskGroup[taskIndex]?.id;
+                if (taskId) onTaskClick?.(taskId);
+                setIsReplacingTask(true);
+            }));
+            items.push(getDivider());
+        }
+        if (onTaskGroupModification) {
+            const reGroupOptions = getContextMenuItems(isParallel, groupIndex, sequentialTaskGroups.length, taskIndex, taskGroup.length, (sequentialTaskGroups[groupIndex - 1]?.length ?? 0) > 1, (sequentialTaskGroups[groupIndex + 1]?.length ?? 0) > 1, handleTaskRegroup, hideParallelOptions);
+            return [
+                ...items,
+                ...reGroupOptions
+            ];
+        }
+        return items;
+    }, [
+        onReplaceTaskFromToolbox,
+        onTaskClick,
+        onTaskGroupModification,
+        sequentialTaskGroups,
+        hideParallelOptions,
+        handleTaskRegroup,
+        setIsReplacingTask,
+        taskStateReference
+    ]);
+    const sensors = useSensors(useSensor(PointerSensor, {
+        activationConstraint: {
+            distance: 3
+        }
+    }), useSensor(KeyboardSensor, {
+        coordinateGetter: sortableKeyboardCoordinates
+    }));
+    if (0 === sequentialTaskGroups.length) return null;
+    return /*#__PURE__*/ jsxs(DndContext, {
+        collisionDetection: closestCenter,
+        sensors: sensors,
+        onDragStart: handleDragStart,
+        onDragMove: handleDragMove,
+        onDragOver: handleDragOver,
+        onDragEnd: handleDragEnd,
+        onDragCancel: handleDragCancel,
+        children: [
+            /*#__PURE__*/ jsx(SortableContext, {
+                items: sequentialTaskIds,
+                strategy: verticalListSortingStrategy,
+                children: /*#__PURE__*/ jsx(StageTaskList, {
+                    className: "nodrag nopan",
+                    children: sequentialTaskGroups.map((taskGroup, groupIndex)=>{
+                        const isParallel = taskGroup.length > 1;
+                        return /*#__PURE__*/ jsxs(Row, {
+                            gap: Spacing.SpacingS,
+                            children: [
+                                isParallel && /*#__PURE__*/ jsx(StageParallelBracket, {}),
+                                /*#__PURE__*/ jsxs(StageTaskGroupContainer, {
+                                    isParallel: isParallel,
+                                    children: [
+                                        isParallel && /*#__PURE__*/ jsx(StageParallelLabel, {
+                                            children: /*#__PURE__*/ jsx("span", {
+                                                className: "text-xs",
+                                                children: "Parallel"
+                                            })
+                                        }),
+                                        taskGroup.map((task, taskIndex)=>{
+                                            const taskExecution = execution?.taskStatus?.[task.id];
+                                            return /*#__PURE__*/ jsx(DraggableTask, {
+                                                task: task,
+                                                taskExecution: taskExecution,
+                                                isSelected: selectedTaskId === task.id,
+                                                isParallel: isParallel,
+                                                groupIndex: groupIndex,
+                                                taskIndex: taskIndex,
+                                                onTaskClick: handleTaskClick,
+                                                projectedDepth: task.id === activeDragId && projected ? projected.depth : void 0,
+                                                isDragDisabled: !onTaskReorder || isReadOnly,
+                                                isTaskLoading: loadingTaskIds?.has(task.id),
+                                                ...hasContextMenu && !isReadOnly && {
+                                                    getContextMenuItems: buildContextMenuItems
+                                                }
+                                            }, task.id);
+                                        })
+                                    ]
+                                })
+                            ]
+                        }, `group-${groupIndex}`);
+                    })
+                })
+            }),
+            /*#__PURE__*/ jsx(StageTaskDragOverlay, {
+                activeTask: activeSequentialTask?.task,
+                isActiveTaskParallel: isActiveTaskParallel,
+                taskWidthStyle: taskWidthStyle
+            })
+        ]
+    });
+};
+export { StageNodeSequentialTaskGroups };

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

@@ -0,0 +1,57 @@
+"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__, {
+    StageTaskEntryConditionIcon: ()=>StageTaskEntryConditionIcon
+});
+const jsx_runtime_namespaceObject = require("react/jsx-runtime");
+const index_cjs_namespaceObject = require("../../icons/index.cjs");
+const external_CanvasTooltip_cjs_namespaceObject = require("../CanvasTooltip.cjs");
+const StageTaskEntryConditionIcon = ({ task })=>{
+    if (!task.hasEntryCondition) return null;
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_CanvasTooltip_cjs_namespaceObject.CanvasTooltip, {
+        content: "Entry condition",
+        placement: "top",
+        children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
+            style: {
+                display: 'flex',
+                alignItems: 'center',
+                color: 'var(--color-icon-default)',
+                flexShrink: 0
+            },
+            children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(index_cjs_namespaceObject.EntryConditionIcon, {
+                w: 20,
+                h: 20
+            })
+        })
+    });
+};
+exports.StageTaskEntryConditionIcon = __webpack_exports__.StageTaskEntryConditionIcon;
+for(var __rspack_i in __webpack_exports__)if (-1 === [
+    "StageTaskEntryConditionIcon"
+].indexOf(__rspack_i)) exports[__rspack_i] = __webpack_exports__[__rspack_i];
+Object.defineProperty(exports, '__esModule', {
+    value: true
+});

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

@@ -0,0 +1,5 @@
+import { StageTaskItem } from './StageNode.types';
+export declare const StageTaskEntryConditionIcon: ({ task }: {
+    task: StageTaskItem;
+}) => import("react/jsx-runtime").JSX.Element | null;
+//# sourceMappingURL=StageTaskEntryConditionIcon.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"StageTaskEntryConditionIcon.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/StageNode/StageTaskEntryConditionIcon.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAElD,eAAO,MAAM,2BAA2B,GAAI,UAAU;IAAE,IAAI,EAAE,aAAa,CAAA;CAAE,mDAkB5E,CAAC"}

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

@@ -0,0 +1,23 @@
+import { jsx } from "react/jsx-runtime";
+import { EntryConditionIcon } from "../../icons/index.js";
+import { CanvasTooltip } from "../CanvasTooltip.js";
+const StageTaskEntryConditionIcon = ({ task })=>{
+    if (!task.hasEntryCondition) return null;
+    return /*#__PURE__*/ jsx(CanvasTooltip, {
+        content: "Entry condition",
+        placement: "top",
+        children: /*#__PURE__*/ jsx("span", {
+            style: {
+                display: 'flex',
+                alignItems: 'center',
+                color: 'var(--color-icon-default)',
+                flexShrink: 0
+            },
+            children: /*#__PURE__*/ jsx(EntryConditionIcon, {
+                w: 20,
+                h: 20
+            })
+        })
+    });
+};
+export { StageTaskEntryConditionIcon };