@uipath/apollo-react 3.69.1 → 3.70.1

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

@@ -81,6 +81,9 @@ const StageNodeInner = (props)=>{
     const tasks = (0, external_react_namespaceObject.useMemo)(()=>allTasks.filter((group)=>group.some((t)=>!t.isAdhoc)), [
         allTasks
     ]);
+    const adhocGroups = (0, external_react_namespaceObject.useMemo)(()=>allTasks.filter((group)=>group.every((t)=>t.isAdhoc)), [
+        allTasks
+    ]);
     const adhocTasks = (0, external_react_namespaceObject.useMemo)(()=>allTasks.flatMap((group, groupIndex)=>group.map((task, taskIndex)=>({
                     task,
                     groupIndex,
@@ -241,6 +244,23 @@ const StageNodeInner = (props)=>{
         isStageTitleEditing
     ]);
     const hasContextMenu = !!(onReplaceTaskFromToolbox || onTaskGroupModification);
+    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(tasks, groupIndex, taskIndex);
+            onTaskReorder([
+                ...reordered,
+                ...adhocGroups
+            ]);
+            return;
+        }
+        onTaskGroupModification?.(groupModificationType, groupIndex, taskIndex);
+    }, [
+        onTaskReorder,
+        onTaskGroupModification,
+        tasks,
+        adhocGroups
+    ]);
     const buildContextMenuItems = (0, external_react_namespaceObject.useCallback)((groupIndex, taskIndex)=>{
         const taskGroup = tasks[groupIndex] ?? [];
         const isParallel = taskGroup.length > 1;
@@ -259,7 +279,7 @@ const StageNodeInner = (props)=>{
             items.push((0, external_StageNodeTaskUtilities_cjs_namespaceObject.getDivider)());
         }
         if (onTaskGroupModification) {
-            const reGroupOptions = (0, external_StageNodeTaskUtilities_cjs_namespaceObject.getContextMenuItems)(isParallel, groupIndex, tasks.length, taskIndex, taskGroup.length, (tasks[groupIndex - 1]?.length ?? 0) > 1, (tasks[groupIndex + 1]?.length ?? 0) > 1, onTaskGroupModification, hideParallelOptions);
+            const reGroupOptions = (0, external_StageNodeTaskUtilities_cjs_namespaceObject.getContextMenuItems)(isParallel, groupIndex, tasks.length, taskIndex, taskGroup.length, (tasks[groupIndex - 1]?.length ?? 0) > 1, (tasks[groupIndex + 1]?.length ?? 0) > 1, handleTaskRegroup, hideParallelOptions);
             return [
                 ...items,
                 ...reGroupOptions
@@ -271,7 +291,8 @@ const StageNodeInner = (props)=>{
         onTaskClick,
         onTaskGroupModification,
         tasks,
-        hideParallelOptions
+        hideParallelOptions,
+        handleTaskRegroup
     ]);
     const getAdhocContextMenuItems = (0, external_react_namespaceObject.useCallback)((groupIndex, taskIndex, taskId)=>{
         const items = [];
@@ -437,12 +458,16 @@ const StageNodeInner = (props)=>{
             if (activeTask && activeTask.depth === projection.depth) return;
         }
         const newTasks = (0, external_StageNode_utils_cjs_namespaceObject.reorderTasks)(tasks, active.id, over.id, projection.depth);
-        onTaskReorder(newTasks);
+        onTaskReorder([
+            ...newTasks,
+            ...adhocGroups
+        ]);
     }, [
         tasks,
         onTaskReorder,
         offsetLeft,
-        resetState
+        resetState,
+        adhocGroups
     ]);
     const handleDragCancel = (0, external_react_namespaceObject.useCallback)(()=>{
         resetState();
@@ -670,7 +695,7 @@ const StageNodeInner = (props)=>{
                                             children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_material_index_cjs_namespaceObject.ApTypography, {
                                                 variant: apollo_core_namespaceObject.FontVariantToken.fontSizeSBold,
                                                 color: "var(--uix-canvas-foreground-de-emp)",
-                                                children: "Adhoc tasks"
+                                                children: "Ad hoc tasks"
                                             })
                                         }),
                                         /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_StageNode_styles_cjs_namespaceObject.StageTaskList, {

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

@@ -1 +1 @@
-{"version":3,"file":"StageNode.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/StageNode/StageNode.tsx"],"names":[],"mappings":"AAyDA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AAsvBxD,eAAO,MAAM,SAAS,8CAluBS,cAAc,6CAkuBA,CAAC"}
+{"version":3,"file":"StageNode.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/StageNode/StageNode.tsx"],"names":[],"mappings":"AA6DA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AAsxBxD,eAAO,MAAM,SAAS,8CAlwBS,cAAc,6CAkwBA,CAAC"}

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

@@ -7,7 +7,7 @@ import { Position, useStore, useStoreApi } from "../../xyflow/react.js";
 import { ApIcon, ApIconButton, ApLink, ApTooltip, ApTypography } from "../../../material/index.js";
 import { memo, useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { EntryConditionIcon, ExitConditionIcon, ReturnToOriginIcon } from "../../icons/index.js";
-import { GroupModificationType } from "../../utils/GroupModificationUtils.js";
+import { GroupModificationType, moveGroupDown, moveGroupUp } from "../../utils/GroupModificationUtils.js";
 import { useConnectedHandles } from "../BaseCanvas/ConnectedHandlesContext.js";
 import { useButtonHandles } from "../ButtonHandle/useButtonHandles.js";
 import { ExecutionStatusIcon } from "../ExecutionStatusIcon/index.js";
@@ -53,6 +53,9 @@ const StageNodeInner = (props)=>{
     const tasks = useMemo(()=>allTasks.filter((group)=>group.some((t)=>!t.isAdhoc)), [
         allTasks
     ]);
+    const adhocGroups = useMemo(()=>allTasks.filter((group)=>group.every((t)=>t.isAdhoc)), [
+        allTasks
+    ]);
     const adhocTasks = useMemo(()=>allTasks.flatMap((group, groupIndex)=>group.map((task, taskIndex)=>({
                     task,
                     groupIndex,
@@ -213,6 +216,23 @@ const StageNodeInner = (props)=>{
         isStageTitleEditing
     ]);
     const hasContextMenu = !!(onReplaceTaskFromToolbox || onTaskGroupModification);
+    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(tasks, groupIndex, taskIndex);
+            onTaskReorder([
+                ...reordered,
+                ...adhocGroups
+            ]);
+            return;
+        }
+        onTaskGroupModification?.(groupModificationType, groupIndex, taskIndex);
+    }, [
+        onTaskReorder,
+        onTaskGroupModification,
+        tasks,
+        adhocGroups
+    ]);
     const buildContextMenuItems = useCallback((groupIndex, taskIndex)=>{
         const taskGroup = tasks[groupIndex] ?? [];
         const isParallel = taskGroup.length > 1;
@@ -231,7 +251,7 @@ const StageNodeInner = (props)=>{
             items.push(getDivider());
         }
         if (onTaskGroupModification) {
-            const reGroupOptions = getContextMenuItems(isParallel, groupIndex, tasks.length, taskIndex, taskGroup.length, (tasks[groupIndex - 1]?.length ?? 0) > 1, (tasks[groupIndex + 1]?.length ?? 0) > 1, onTaskGroupModification, hideParallelOptions);
+            const reGroupOptions = getContextMenuItems(isParallel, groupIndex, tasks.length, taskIndex, taskGroup.length, (tasks[groupIndex - 1]?.length ?? 0) > 1, (tasks[groupIndex + 1]?.length ?? 0) > 1, handleTaskRegroup, hideParallelOptions);
             return [
                 ...items,
                 ...reGroupOptions
@@ -243,7 +263,8 @@ const StageNodeInner = (props)=>{
         onTaskClick,
         onTaskGroupModification,
         tasks,
-        hideParallelOptions
+        hideParallelOptions,
+        handleTaskRegroup
     ]);
     const getAdhocContextMenuItems = useCallback((groupIndex, taskIndex, taskId)=>{
         const items = [];
@@ -409,12 +430,16 @@ const StageNodeInner = (props)=>{
             if (activeTask && activeTask.depth === projection.depth) return;
         }
         const newTasks = reorderTasks(tasks, active.id, over.id, projection.depth);
-        onTaskReorder(newTasks);
+        onTaskReorder([
+            ...newTasks,
+            ...adhocGroups
+        ]);
     }, [
         tasks,
         onTaskReorder,
         offsetLeft,
-        resetState
+        resetState,
+        adhocGroups
     ]);
     const handleDragCancel = useCallback(()=>{
         resetState();
@@ -642,7 +667,7 @@ const StageNodeInner = (props)=>{
                                             children: /*#__PURE__*/ jsx(ApTypography, {
                                                 variant: FontVariantToken.fontSizeSBold,
                                                 color: "var(--uix-canvas-foreground-de-emp)",
-                                                children: "Adhoc tasks"
+                                                children: "Ad hoc tasks"
                                             })
                                         }),
                                         /*#__PURE__*/ jsx(StageTaskList, {

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

@@ -1288,6 +1288,14 @@ const initialTasks = [
             icon: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(VerificationIcon, {})
         }
     ],
+    [
+        {
+            id: 'task-7',
+            label: 'Ad hoc - Manual Review',
+            icon: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(DocumentIcon, {}),
+            isAdhoc: true
+        }
+    ],
     [
         {
             id: 'task-3',
@@ -1300,6 +1308,14 @@ const initialTasks = [
             icon: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(VerificationIcon, {})
         }
     ],
+    [
+        {
+            id: 'task-8',
+            label: 'Ad hoc - Exception Handling',
+            icon: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(ProcessIcon, {}),
+            isAdhoc: true
+        }
+    ],
     [
         {
             id: 'task-5',
@@ -1347,15 +1363,34 @@ const DraggableTaskReorderingStory = ()=>{
     }, [
         setNodes
     ]);
+    const groupModificationHandlers = (0, external_react_namespaceObject.useMemo)(()=>(0, GroupModificationUtils_cjs_namespaceObject.createGroupModificationHandlers)(), []);
+    const handleTaskGroupModification = (0, external_react_namespaceObject.useCallback)((groupModificationType, groupIndex, taskIndex)=>{
+        const handler = (0, GroupModificationUtils_cjs_namespaceObject.getHandlerForModificationType)(groupModificationHandlers, groupModificationType);
+        setNodes((nds)=>nds.map((node)=>'reorder-stage' === node.id ? {
+                    ...node,
+                    data: {
+                        ...node.data,
+                        stageDetails: {
+                            ...node.data.stageDetails,
+                            tasks: handler(node.data.stageDetails.tasks, groupIndex, taskIndex)
+                        }
+                    }
+                } : node));
+    }, [
+        groupModificationHandlers,
+        setNodes
+    ]);
     const nodesWithHandler = (0, external_react_namespaceObject.useMemo)(()=>nodes.map((node)=>({
                 ...node,
                 data: {
                     ...node.data,
-                    onTaskReorder: handleTaskReorder
+                    onTaskReorder: handleTaskReorder,
+                    onTaskGroupModification: handleTaskGroupModification
                 }
             })), [
         nodes,
-        handleTaskReorder
+        handleTaskReorder,
+        handleTaskGroupModification
     ]);
     const onConnect = (0, external_react_namespaceObject.useCallback)((connection)=>setEdges((eds)=>(0, react_cjs_namespaceObject.addEdge)(connection, eds)), [
         setEdges
@@ -1411,6 +1446,14 @@ const initialTasksForAddReplace = [
             icon: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(VerificationIcon, {})
         }
     ],
+    [
+        {
+            id: 'task-adhoc-1',
+            label: 'Ad hoc - Manual Check',
+            icon: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(VerificationIcon, {}),
+            isAdhoc: true
+        }
+    ],
     [
         {
             id: 'task-2',
@@ -1586,6 +1629,20 @@ const AddAndReplaceTasksStory = ()=>{
         groupModificationHandlers,
         setNodes
     ]);
+    const handleTaskReorder = (0, external_react_namespaceObject.useCallback)((reorderedTasks)=>{
+        setNodes((prevNodes)=>prevNodes.map((node)=>'add-replace-stage' === node.id ? {
+                    ...node,
+                    data: {
+                        ...node.data,
+                        stageDetails: {
+                            ...node.data.stageDetails,
+                            tasks: reorderedTasks
+                        }
+                    }
+                } : node));
+    }, [
+        setNodes
+    ]);
     const handleTaskClick = (0, external_react_namespaceObject.useCallback)((taskId)=>{
         setSelectedTaskId(taskId);
     }, []);
@@ -1630,6 +1687,7 @@ const AddAndReplaceTasksStory = ()=>{
                     onAddTaskFromToolbox: handleAddTask,
                     onReplaceTaskFromToolbox: handleReplaceTask,
                     onTaskGroupModification: handleTaskGroupModification,
+                    onTaskReorder: handleTaskReorder,
                     onTaskClick: handleTaskClick
                 }
             } : node), [
@@ -1639,6 +1697,7 @@ const AddAndReplaceTasksStory = ()=>{
         handleAddTask,
         handleReplaceTask,
         handleTaskGroupModification,
+        handleTaskReorder,
         handleTaskClick
     ]);
     const onConnect = (0, external_react_namespaceObject.useCallback)((connection)=>setEdges((eds)=>(0, react_cjs_namespaceObject.addEdge)(connection, eds)), [
@@ -2053,7 +2112,7 @@ const AddTaskLoading = {
     render: ()=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(AddTaskLoadingStory, {})
 };
 const AdhocTasks = {
-    name: 'Adhoc Tasks',
+    name: 'Ad hoc Tasks',
     parameters: {
         nodes: [
             {
@@ -2071,7 +2130,7 @@ const AdhocTasks = {
                             [
                                 {
                                     id: '1',
-                                    label: 'Adhoc - KYC Check',
+                                    label: 'Ad hoc - KYC Check',
                                     icon: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(VerificationIcon, {}),
                                     isAdhoc: true
                                 }
@@ -2079,7 +2138,7 @@ const AdhocTasks = {
                             [
                                 {
                                     id: '2',
-                                    label: 'Adhoc - Document Review',
+                                    label: 'Ad hoc - Document Review',
                                     icon: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(DocumentIcon, {}),
                                     isAdhoc: true
                                 }
@@ -2110,7 +2169,7 @@ const AdhocTasks = {
                             [
                                 {
                                     id: '1',
-                                    label: 'Adhoc - Risk Assessment',
+                                    label: 'Ad hoc - Risk Assessment',
                                     icon: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(VerificationIcon, {}),
                                     isAdhoc: true
                                 }
@@ -2118,7 +2177,7 @@ const AdhocTasks = {
                             [
                                 {
                                     id: '2',
-                                    label: 'Adhoc - Compliance Review',
+                                    label: 'Ad hoc - Compliance Review',
                                     icon: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(DocumentIcon, {}),
                                     isAdhoc: true
                                 }
@@ -2160,13 +2219,13 @@ const AdhocTasks = {
                             [
                                 {
                                     id: '1',
-                                    label: 'Adhoc - Verify Address',
+                                    label: 'Ad hoc - Verify Address',
                                     icon: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(VerificationIcon, {}),
                                     isAdhoc: true
                                 },
                                 {
                                     id: '2',
-                                    label: 'Adhoc - Verify Identity',
+                                    label: 'Ad hoc - Verify Identity',
                                     icon: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(VerificationIcon, {}),
                                     isAdhoc: true
                                 }
@@ -2174,7 +2233,7 @@ const AdhocTasks = {
                             [
                                 {
                                     id: '3',
-                                    label: 'Adhoc - Bkgd Check',
+                                    label: 'Ad hoc - Bkgd Check',
                                     icon: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(VerificationIcon, {}),
                                     isAdhoc: true
                                 }
@@ -2182,7 +2241,7 @@ const AdhocTasks = {
                             [
                                 {
                                     id: '4',
-                                    label: 'Adhoc - Review Docs',
+                                    label: 'Ad hoc - Review Docs',
                                     icon: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(DocumentIcon, {}),
                                     isAdhoc: true
                                 }

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

@@ -1 +1 @@
-{"version":3,"file":"StageNode.stories.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/StageNode/StageNode.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AA2BvD,OAAO,EAAuB,KAAK,cAAc,EAAsB,MAAM,mBAAmB,CAAC;AAiDjG,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,cAAc,CA8C9B,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AA4CnC,eAAO,MAAM,OAAO,EAAE,KAmHrB,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KAqE3B,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,KA6M7B,CAAC;AAEF,eAAO,MAAM,yBAAyB,EAAE,KA8HvC,CAAC;AAEF,eAAO,MAAM,sBAAsB,EAAE,KAmKpC,CAAC;AAsGF,eAAO,MAAM,uBAAuB,EAAE,KAMrC,CAAC;AA0UF,eAAO,MAAM,kBAAkB,EAAE,KAMhC,CAAC;AA4GF,eAAO,MAAM,kBAAkB,EAAE,KAMhC,CAAC;AAqJF,eAAO,MAAM,cAAc,EAAE,KAM5B,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,KA8LxB,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KAiO3B,CAAC"}
+{"version":3,"file":"StageNode.stories.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/StageNode/StageNode.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AA2BvD,OAAO,EAAuB,KAAK,cAAc,EAAsB,MAAM,mBAAmB,CAAC;AAiDjG,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,cAAc,CA8C9B,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AA4CnC,eAAO,MAAM,OAAO,EAAE,KAmHrB,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KAqE3B,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,KA6M7B,CAAC;AAEF,eAAO,MAAM,yBAAyB,EAAE,KA8HvC,CAAC;AAEF,eAAO,MAAM,sBAAsB,EAAE,KAmKpC,CAAC;AAyIF,eAAO,MAAM,uBAAuB,EAAE,KAMrC,CAAC;AA0WF,eAAO,MAAM,kBAAkB,EAAE,KAMhC,CAAC;AA4GF,eAAO,MAAM,kBAAkB,EAAE,KAMhC,CAAC;AAqJF,eAAO,MAAM,cAAc,EAAE,KAM5B,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,KA8LxB,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KAiO3B,CAAC"}

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

@@ -1249,6 +1249,14 @@ const initialTasks = [
             icon: /*#__PURE__*/ jsx(VerificationIcon, {})
         }
     ],
+    [
+        {
+            id: 'task-7',
+            label: 'Ad hoc - Manual Review',
+            icon: /*#__PURE__*/ jsx(DocumentIcon, {}),
+            isAdhoc: true
+        }
+    ],
     [
         {
             id: 'task-3',
@@ -1261,6 +1269,14 @@ const initialTasks = [
             icon: /*#__PURE__*/ jsx(VerificationIcon, {})
         }
     ],
+    [
+        {
+            id: 'task-8',
+            label: 'Ad hoc - Exception Handling',
+            icon: /*#__PURE__*/ jsx(ProcessIcon, {}),
+            isAdhoc: true
+        }
+    ],
     [
         {
             id: 'task-5',
@@ -1308,15 +1324,34 @@ const DraggableTaskReorderingStory = ()=>{
     }, [
         setNodes
     ]);
+    const groupModificationHandlers = useMemo(()=>createGroupModificationHandlers(), []);
+    const handleTaskGroupModification = useCallback((groupModificationType, groupIndex, taskIndex)=>{
+        const handler = getHandlerForModificationType(groupModificationHandlers, groupModificationType);
+        setNodes((nds)=>nds.map((node)=>'reorder-stage' === node.id ? {
+                    ...node,
+                    data: {
+                        ...node.data,
+                        stageDetails: {
+                            ...node.data.stageDetails,
+                            tasks: handler(node.data.stageDetails.tasks, groupIndex, taskIndex)
+                        }
+                    }
+                } : node));
+    }, [
+        groupModificationHandlers,
+        setNodes
+    ]);
     const nodesWithHandler = useMemo(()=>nodes.map((node)=>({
                 ...node,
                 data: {
                     ...node.data,
-                    onTaskReorder: handleTaskReorder
+                    onTaskReorder: handleTaskReorder,
+                    onTaskGroupModification: handleTaskGroupModification
                 }
             })), [
         nodes,
-        handleTaskReorder
+        handleTaskReorder,
+        handleTaskGroupModification
     ]);
     const onConnect = useCallback((connection)=>setEdges((eds)=>addEdge(connection, eds)), [
         setEdges
@@ -1372,6 +1407,14 @@ const initialTasksForAddReplace = [
             icon: /*#__PURE__*/ jsx(VerificationIcon, {})
         }
     ],
+    [
+        {
+            id: 'task-adhoc-1',
+            label: 'Ad hoc - Manual Check',
+            icon: /*#__PURE__*/ jsx(VerificationIcon, {}),
+            isAdhoc: true
+        }
+    ],
     [
         {
             id: 'task-2',
@@ -1547,6 +1590,20 @@ const AddAndReplaceTasksStory = ()=>{
         groupModificationHandlers,
         setNodes
     ]);
+    const handleTaskReorder = useCallback((reorderedTasks)=>{
+        setNodes((prevNodes)=>prevNodes.map((node)=>'add-replace-stage' === node.id ? {
+                    ...node,
+                    data: {
+                        ...node.data,
+                        stageDetails: {
+                            ...node.data.stageDetails,
+                            tasks: reorderedTasks
+                        }
+                    }
+                } : node));
+    }, [
+        setNodes
+    ]);
     const handleTaskClick = useCallback((taskId)=>{
         setSelectedTaskId(taskId);
     }, []);
@@ -1591,6 +1648,7 @@ const AddAndReplaceTasksStory = ()=>{
                     onAddTaskFromToolbox: handleAddTask,
                     onReplaceTaskFromToolbox: handleReplaceTask,
                     onTaskGroupModification: handleTaskGroupModification,
+                    onTaskReorder: handleTaskReorder,
                     onTaskClick: handleTaskClick
                 }
             } : node), [
@@ -1600,6 +1658,7 @@ const AddAndReplaceTasksStory = ()=>{
         handleAddTask,
         handleReplaceTask,
         handleTaskGroupModification,
+        handleTaskReorder,
         handleTaskClick
     ]);
     const onConnect = useCallback((connection)=>setEdges((eds)=>addEdge(connection, eds)), [
@@ -2014,7 +2073,7 @@ const AddTaskLoading = {
     render: ()=>/*#__PURE__*/ jsx(AddTaskLoadingStory, {})
 };
 const AdhocTasks = {
-    name: 'Adhoc Tasks',
+    name: 'Ad hoc Tasks',
     parameters: {
         nodes: [
             {
@@ -2032,7 +2091,7 @@ const AdhocTasks = {
                             [
                                 {
                                     id: '1',
-                                    label: 'Adhoc - KYC Check',
+                                    label: 'Ad hoc - KYC Check',
                                     icon: /*#__PURE__*/ jsx(VerificationIcon, {}),
                                     isAdhoc: true
                                 }
@@ -2040,7 +2099,7 @@ const AdhocTasks = {
                             [
                                 {
                                     id: '2',
-                                    label: 'Adhoc - Document Review',
+                                    label: 'Ad hoc - Document Review',
                                     icon: /*#__PURE__*/ jsx(DocumentIcon, {}),
                                     isAdhoc: true
                                 }
@@ -2071,7 +2130,7 @@ const AdhocTasks = {
                             [
                                 {
                                     id: '1',
-                                    label: 'Adhoc - Risk Assessment',
+                                    label: 'Ad hoc - Risk Assessment',
                                     icon: /*#__PURE__*/ jsx(VerificationIcon, {}),
                                     isAdhoc: true
                                 }
@@ -2079,7 +2138,7 @@ const AdhocTasks = {
                             [
                                 {
                                     id: '2',
-                                    label: 'Adhoc - Compliance Review',
+                                    label: 'Ad hoc - Compliance Review',
                                     icon: /*#__PURE__*/ jsx(DocumentIcon, {}),
                                     isAdhoc: true
                                 }
@@ -2121,13 +2180,13 @@ const AdhocTasks = {
                             [
                                 {
                                     id: '1',
-                                    label: 'Adhoc - Verify Address',
+                                    label: 'Ad hoc - Verify Address',
                                     icon: /*#__PURE__*/ jsx(VerificationIcon, {}),
                                     isAdhoc: true
                                 },
                                 {
                                     id: '2',
-                                    label: 'Adhoc - Verify Identity',
+                                    label: 'Ad hoc - Verify Identity',
                                     icon: /*#__PURE__*/ jsx(VerificationIcon, {}),
                                     isAdhoc: true
                                 }
@@ -2135,7 +2194,7 @@ const AdhocTasks = {
                             [
                                 {
                                     id: '3',
-                                    label: 'Adhoc - Bkgd Check',
+                                    label: 'Ad hoc - Bkgd Check',
                                     icon: /*#__PURE__*/ jsx(VerificationIcon, {}),
                                     isAdhoc: true
                                 }
@@ -2143,7 +2202,7 @@ const AdhocTasks = {
                             [
                                 {
                                     id: '4',
-                                    label: 'Adhoc - Review Docs',
+                                    label: 'Ad hoc - Review Docs',
                                     icon: /*#__PURE__*/ jsx(DocumentIcon, {}),
                                     isAdhoc: true
                                 }

package/dist/canvas/components/StickyNoteNode/StickyNoteNode.cjs

@@ -58,7 +58,7 @@ const external_useMarkdownShortcuts_cjs_namespaceObject = require("./useMarkdown
 const external_useScrollCapture_cjs_namespaceObject = require("./useScrollCapture.cjs");
 const minWidth = 8 * external_constants_cjs_namespaceObject.GRID_SPACING;
 const minHeight = 8 * external_constants_cjs_namespaceObject.GRID_SPACING;
-const StickyNoteNodeComponent = ({ id, data, selected, dragging, placeholder = 'Add text', renderPlaceholderOnSelect = false })=>{
+const StickyNoteNodeComponent = ({ id, data, selected, dragging, placeholder = 'Add text', renderPlaceholderOnSelect = false, onContentChange, onColorChange, onResize })=>{
     const { updateNodeData, deleteElements } = (0, react_cjs_namespaceObject.useReactFlow)();
     const [isEditing, setIsEditing] = (0, external_react_namespaceObject.useState)(data.autoFocus ?? false);
     const [isResizing, setIsResizing] = (0, external_react_namespaceObject.useState)(false);
@@ -116,14 +116,18 @@ const StickyNoteNodeComponent = ({ id, data, selected, dragging, placeholder = '
     ]);
     const handleBlur = (0, external_react_namespaceObject.useCallback)(()=>{
         setIsEditing(false);
-        if (localContent !== data.content) updateNodeData(id, {
-            content: localContent
-        });
+        if (localContent !== data.content) {
+            onContentChange?.(localContent);
+            updateNodeData(id, {
+                content: localContent
+            });
+        }
     }, [
         id,
         localContent,
         data.content,
-        updateNodeData
+        updateNodeData,
+        onContentChange
     ]);
     const handleChange = (0, external_react_namespaceObject.useCallback)((e)=>{
         setLocalContent(e.target.value);
@@ -179,17 +183,22 @@ const StickyNoteNodeComponent = ({ id, data, selected, dragging, placeholder = '
     const handleResizeStart = (0, external_react_namespaceObject.useCallback)(()=>{
         setIsResizing(true);
     }, []);
-    const handleResizeEnd = (0, external_react_namespaceObject.useCallback)(()=>{
+    const handleResizeEnd = (0, external_react_namespaceObject.useCallback)((_event, params)=>{
         setIsResizing(false);
-    }, []);
+        onResize?.(params.width, params.height);
+    }, [
+        onResize
+    ]);
     const handleColorChange = (0, external_react_namespaceObject.useCallback)((newColor)=>{
+        onColorChange?.(newColor);
         updateNodeData(id, {
             color: newColor
         });
         setIsColorPickerOpen(false);
     }, [
         id,
-        updateNodeData
+        updateNodeData,
+        onColorChange
     ]);
     const handleToggleColorPicker = (0, external_react_namespaceObject.useCallback)(()=>{
         setIsColorPickerOpen((prev)=>!prev);

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

@@ -1,9 +1,12 @@
 import type { NodeProps } from '../../xyflow/react.ts';
-import type { StickyNoteData } from './StickyNoteNode.types';
+import type { StickyNoteColor, StickyNoteData } from './StickyNoteNode.types';
 export interface StickyNoteNodeProps extends NodeProps {
     data: StickyNoteData;
     placeholder?: string;
     renderPlaceholderOnSelect?: boolean;
+    onContentChange?: (content: string) => void;
+    onColorChange?: (color: StickyNoteColor) => void;
+    onResize?: (width: number, height: number) => void;
 }
-export declare const StickyNoteNode: import("react").MemoExoticComponent<({ id, data, selected, dragging, placeholder, renderPlaceholderOnSelect, }: StickyNoteNodeProps) => import("react/jsx-runtime").JSX.Element>;
+export declare const StickyNoteNode: import("react").MemoExoticComponent<({ id, data, selected, dragging, placeholder, renderPlaceholderOnSelect, onContentChange, onColorChange, onResize, }: StickyNoteNodeProps) => import("react/jsx-runtime").JSX.Element>;
 //# sourceMappingURL=StickyNoteNode.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"StickyNoteNode.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/StickyNoteNode/StickyNoteNode.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,0CAA0C,CAAC;AA8B1E,OAAO,KAAK,EAAmB,cAAc,EAAiB,MAAM,wBAAwB,CAAC;AAM7F,MAAM,WAAW,mBAAoB,SAAQ,SAAS;IACpD,IAAI,EAAE,cAAc,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,yBAAyB,CAAC,EAAE,OAAO,CAAC;CACrC;AA6XD,eAAO,MAAM,cAAc,kHAjXxB,mBAAmB,6CAiXqC,CAAC"}
+{"version":3,"file":"StickyNoteNode.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/StickyNoteNode/StickyNoteNode.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,0CAA0C,CAAC;AA+B1E,OAAO,KAAK,EAAE,eAAe,EAAE,cAAc,EAAiB,MAAM,wBAAwB,CAAC;AAM7F,MAAM,WAAW,mBAAoB,SAAQ,SAAS;IACpD,IAAI,EAAE,cAAc,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,yBAAyB,CAAC,EAAE,OAAO,CAAC;IACpC,eAAe,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IAC5C,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,eAAe,KAAK,IAAI,CAAC;IACjD,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;CACpD;AAsYD,eAAO,MAAM,cAAc,4JAvXxB,mBAAmB,6CAuXqC,CAAC"}

package/dist/canvas/components/StickyNoteNode/StickyNoteNode.js

@@ -18,7 +18,7 @@ import { useMarkdownShortcuts } from "./useMarkdownShortcuts.js";
 import { useScrollCapture } from "./useScrollCapture.js";
 const minWidth = 8 * GRID_SPACING;
 const minHeight = 8 * GRID_SPACING;
-const StickyNoteNodeComponent = ({ id, data, selected, dragging, placeholder = 'Add text', renderPlaceholderOnSelect = false })=>{
+const StickyNoteNodeComponent = ({ id, data, selected, dragging, placeholder = 'Add text', renderPlaceholderOnSelect = false, onContentChange, onColorChange, onResize })=>{
     const { updateNodeData, deleteElements } = useReactFlow();
     const [isEditing, setIsEditing] = useState(data.autoFocus ?? false);
     const [isResizing, setIsResizing] = useState(false);
@@ -76,14 +76,18 @@ const StickyNoteNodeComponent = ({ id, data, selected, dragging, placeholder = '
     ]);
     const handleBlur = useCallback(()=>{
         setIsEditing(false);
-        if (localContent !== data.content) updateNodeData(id, {
-            content: localContent
-        });
+        if (localContent !== data.content) {
+            onContentChange?.(localContent);
+            updateNodeData(id, {
+                content: localContent
+            });
+        }
     }, [
         id,
         localContent,
         data.content,
-        updateNodeData
+        updateNodeData,
+        onContentChange
     ]);
     const handleChange = useCallback((e)=>{
         setLocalContent(e.target.value);
@@ -139,17 +143,22 @@ const StickyNoteNodeComponent = ({ id, data, selected, dragging, placeholder = '
     const handleResizeStart = useCallback(()=>{
         setIsResizing(true);
     }, []);
-    const handleResizeEnd = useCallback(()=>{
+    const handleResizeEnd = useCallback((_event, params)=>{
         setIsResizing(false);
-    }, []);
+        onResize?.(params.width, params.height);
+    }, [
+        onResize
+    ]);
     const handleColorChange = useCallback((newColor)=>{
+        onColorChange?.(newColor);
         updateNodeData(id, {
             color: newColor
         });
         setIsColorPickerOpen(false);
     }, [
         id,
-        updateNodeData
+        updateNodeData,
+        onColorChange
     ]);
     const handleToggleColorPicker = useCallback(()=>{
         setIsColorPickerOpen((prev)=>!prev);

package/dist/canvas/components/StickyNoteNode/StickyNoteNode.stories.cjs

@@ -24,9 +24,10 @@ var __webpack_require__ = {};
 var __webpack_exports__ = {};
 __webpack_require__.r(__webpack_exports__);
 __webpack_require__.d(__webpack_exports__, {
-    WithBaseNodes: ()=>WithBaseNodes,
+    WithCallbacks: ()=>WithCallbacks,
+    Default: ()=>Default,
     default: ()=>StickyNoteNode_stories,
-    Default: ()=>Default
+    WithBaseNodes: ()=>WithBaseNodes
 });
 const jsx_runtime_namespaceObject = require("react/jsx-runtime");
 const react_cjs_namespaceObject = require("../../xyflow/react.cjs");
@@ -46,9 +47,42 @@ const meta = {
     ]
 };
 const StickyNoteNode_stories = meta;
+const StickyNoteWithCallbacks = (props)=>{
+    const handleContentChange = (content)=>{
+        console.log('📝 Content changed:', {
+            nodeId: props.id,
+            content,
+            timestamp: new Date().toISOString()
+        });
+    };
+    const handleColorChange = (color)=>{
+        console.log('🎨 Color changed:', {
+            nodeId: props.id,
+            color,
+            timestamp: new Date().toISOString()
+        });
+    };
+    const handleResize = (width, height)=>{
+        console.log('📏 Resized:', {
+            nodeId: props.id,
+            width,
+            height,
+            timestamp: new Date().toISOString()
+        });
+    };
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_StickyNoteNode_cjs_namespaceObject.StickyNoteNode, {
+        ...props,
+        onContentChange: handleContentChange,
+        onColorChange: handleColorChange,
+        onResize: handleResize
+    });
+};
 const nodeTypes = {
     stickyNote: external_StickyNoteNode_cjs_namespaceObject.StickyNoteNode
 };
+const nodeTypesWithCallbacks = {
+    stickyNote: StickyNoteWithCallbacks
+};
 function createStickyNote(id, color, content, position, size = {
     width: 250,
     height: 150
@@ -469,18 +503,48 @@ function WithBaseNodesStory() {
         })
     });
 }
+function WithCallbacksStory() {
+    const initialNodes = (0, external_react_namespaceObject.useMemo)(()=>[
+            createStickyNote('sticky-test-1', 'yellow', '**Test Callbacks!**\n\n1. Double-click to edit content\n2. Click the color button to change color\n3. Drag corners to resize\n\nOpen the browser console to see logs! 🔍', {
+                x: 480,
+                y: 480
+            }, {
+                width: 320,
+                height: 320
+            })
+        ], []);
+    const { canvasProps } = (0, index_cjs_namespaceObject.useCanvasStory)({
+        initialNodes,
+        additionalNodeTypes: nodeTypesWithCallbacks
+    });
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_BaseCanvas_index_cjs_namespaceObject.BaseCanvas, {
+        ...canvasProps,
+        mode: "design",
+        children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(react_cjs_namespaceObject.Panel, {
+            position: "bottom-right",
+            children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_CanvasPositionControls_cjs_namespaceObject.CanvasPositionControls, {
+                translations: external_types_cjs_namespaceObject.DefaultCanvasTranslations
+            })
+        })
+    });
+}
 const Default = {
     render: ()=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(DefaultStory, {})
 };
 const WithBaseNodes = {
     render: ()=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(WithBaseNodesStory, {})
 };
+const WithCallbacks = {
+    render: ()=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(WithCallbacksStory, {})
+};
 exports.Default = __webpack_exports__.Default;
 exports.WithBaseNodes = __webpack_exports__.WithBaseNodes;
+exports.WithCallbacks = __webpack_exports__.WithCallbacks;
 exports["default"] = __webpack_exports__["default"];
 for(var __rspack_i in __webpack_exports__)if (-1 === [
     "Default",
     "WithBaseNodes",
+    "WithCallbacks",
     "default"
 ].indexOf(__rspack_i)) exports[__rspack_i] = __webpack_exports__[__rspack_i];
 Object.defineProperty(exports, '__esModule', {

package/dist/canvas/components/StickyNoteNode/StickyNoteNode.stories.d.ts

@@ -4,4 +4,5 @@ export default meta;
 type Story = StoryObj<typeof meta>;
 export declare const Default: Story;
 export declare const WithBaseNodes: Story;
+export declare const WithCallbacks: Story;
 //# sourceMappingURL=StickyNoteNode.stories.d.ts.map

package/dist/canvas/components/StickyNoteNode/StickyNoteNode.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"StickyNoteNode.stories.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/StickyNoteNode/StickyNoteNode.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAe5D,QAAA,MAAM,IAAI,EAAE,IAIX,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAwWnC,eAAO,MAAM,OAAO,EAAE,KAErB,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KAE3B,CAAC"}
+{"version":3,"file":"StickyNoteNode.stories.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/StickyNoteNode/StickyNoteNode.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAe5D,QAAA,MAAM,IAAI,EAAE,IAIX,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AA6anC,eAAO,MAAM,OAAO,EAAE,KAErB,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KAE3B,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KAE3B,CAAC"}

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

@@ -16,9 +16,42 @@ const meta = {
     ]
 };
 const StickyNoteNode_stories = meta;
+const StickyNoteWithCallbacks = (props)=>{
+    const handleContentChange = (content)=>{
+        console.log('📝 Content changed:', {
+            nodeId: props.id,
+            content,
+            timestamp: new Date().toISOString()
+        });
+    };
+    const handleColorChange = (color)=>{
+        console.log('🎨 Color changed:', {
+            nodeId: props.id,
+            color,
+            timestamp: new Date().toISOString()
+        });
+    };
+    const handleResize = (width, height)=>{
+        console.log('📏 Resized:', {
+            nodeId: props.id,
+            width,
+            height,
+            timestamp: new Date().toISOString()
+        });
+    };
+    return /*#__PURE__*/ jsx(StickyNoteNode, {
+        ...props,
+        onContentChange: handleContentChange,
+        onColorChange: handleColorChange,
+        onResize: handleResize
+    });
+};
 const nodeTypes = {
     stickyNote: StickyNoteNode
 };
+const nodeTypesWithCallbacks = {
+    stickyNote: StickyNoteWithCallbacks
+};
 function createStickyNote(id, color, content, position, size = {
     width: 250,
     height: 150
@@ -439,10 +472,38 @@ function WithBaseNodesStory() {
         })
     });
 }
+function WithCallbacksStory() {
+    const initialNodes = useMemo(()=>[
+            createStickyNote('sticky-test-1', 'yellow', '**Test Callbacks!**\n\n1. Double-click to edit content\n2. Click the color button to change color\n3. Drag corners to resize\n\nOpen the browser console to see logs! 🔍', {
+                x: 480,
+                y: 480
+            }, {
+                width: 320,
+                height: 320
+            })
+        ], []);
+    const { canvasProps } = useCanvasStory({
+        initialNodes,
+        additionalNodeTypes: nodeTypesWithCallbacks
+    });
+    return /*#__PURE__*/ jsx(BaseCanvas, {
+        ...canvasProps,
+        mode: "design",
+        children: /*#__PURE__*/ jsx(Panel, {
+            position: "bottom-right",
+            children: /*#__PURE__*/ jsx(CanvasPositionControls, {
+                translations: DefaultCanvasTranslations
+            })
+        })
+    });
+}
 const Default = {
     render: ()=>/*#__PURE__*/ jsx(DefaultStory, {})
 };
 const WithBaseNodes = {
     render: ()=>/*#__PURE__*/ jsx(WithBaseNodesStory, {})
 };
-export { Default, WithBaseNodes, StickyNoteNode_stories as default };
+const WithCallbacks = {
+    render: ()=>/*#__PURE__*/ jsx(WithCallbacksStory, {})
+};
+export { Default, WithBaseNodes, WithCallbacks, StickyNoteNode_stories as default };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uipath/apollo-react",
-  "version": "3.69.1",
+  "version": "3.70.1",
   "description": "Apollo Design System - React component library with Material UI theming",
   "repository": {
     "type": "git",
@@ -201,8 +201,8 @@
     "use-sync-external-store": "^1.2.0",
     "zod": "^4.3.5",
     "zustand": "^5.0.9",
-    "@uipath/apollo-wind": "2.0.0",
-    "@uipath/apollo-core": "5.9.0"
+    "@uipath/apollo-core": "5.9.0",
+    "@uipath/apollo-wind": "2.0.0"
   },
   "devDependencies": {
     "@lingui/cli": "^5.6.1",