@uipath/apollo-react 3.44.2 → 3.45.0

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

@@ -61,7 +61,7 @@ const StageNodeComponent = (props)=>{
     const isException = stageDetails?.isException;
     const isReadOnly = !!stageDetails?.isReadOnly;
     const icon = stageDetails?.icon;
-    const selectedTasks = stageDetails?.selectedTasks;
+    const selectedTaskId = stageDetails?.selectedTaskId;
     const defaultContent = stageDetails?.defaultContent || 'Add first task';
     const status = execution?.stageStatus?.status;
     const statusLabel = execution?.stageStatus?.label;
@@ -89,17 +89,24 @@ const StageNodeComponent = (props)=>{
     const [isAddingTask, setIsAddingTask] = (0, external_react_namespaceObject.useState)(false);
     const [isReplacingTask, setIsReplacingTask] = (0, external_react_namespaceObject.useState)(false);
     (0, external_react_namespaceObject.useEffect)(()=>{
-        if (pendingReplaceTask?.groupIndex != null && pendingReplaceTask?.taskIndex != null) {
-            const taskGroup = tasks[pendingReplaceTask.groupIndex];
-            taskStateReference.current = {
-                isParallel: (taskGroup?.length ?? 0) > 1,
-                groupIndex: pendingReplaceTask.groupIndex,
-                taskIndex: pendingReplaceTask.taskIndex
-            };
-            setIsReplacingTask(true);
-        } else setIsReplacingTask(false);
+        if (pendingReplaceTask) {
+            const match = tasks.flatMap((group, gi)=>group.map((task, ti)=>({
+                        task,
+                        groupIndex: gi,
+                        taskIndex: ti
+                    }))).find(({ task })=>task.id === selectedTaskId);
+            if (match) {
+                taskStateReference.current = {
+                    isParallel: (tasks[match.groupIndex]?.length ?? 0) > 1,
+                    groupIndex: match.groupIndex,
+                    taskIndex: match.taskIndex
+                };
+                setIsReplacingTask(true);
+            }
+        }
     }, [
         pendingReplaceTask,
+        selectedTaskId,
         tasks
     ]);
     const [activeDragId, setActiveDragId] = (0, external_react_namespaceObject.useState)(null);
@@ -202,7 +209,11 @@ const StageNodeComponent = (props)=>{
     const contextMenuItems = (0, external_react_namespaceObject.useCallback)((isParallel, groupIndex, taskIndex, tasksLength, taskGroupLength, isAboveParallel, isBelowParallel)=>{
         const items = [];
         if (onReplaceTaskFromToolbox) {
-            items.push((0, external_StageNodeTaskUtilities_cjs_namespaceObject.getMenuItem)('replace-task', 'Replace task', ()=>setIsReplacingTask(true)));
+            items.push((0, external_StageNodeTaskUtilities_cjs_namespaceObject.getMenuItem)('replace-task', 'Replace task', ()=>{
+                const taskId = tasks[groupIndex]?.[taskIndex]?.id;
+                if (taskId) onTaskClick?.(taskId);
+                setIsReplacingTask(true);
+            }));
             items.push((0, external_StageNodeTaskUtilities_cjs_namespaceObject.getDivider)());
         }
         if (onTaskGroupModification) {
@@ -215,8 +226,10 @@ const StageNodeComponent = (props)=>{
         return items;
     }, [
         onReplaceTaskFromToolbox,
+        onTaskClick,
         onTaskGroupModification,
-        reGroupTaskFunction
+        reGroupTaskFunction,
+        tasks
     ]);
     const { setSelectedNodeId } = (0, hooks_index_cjs_namespaceObject.useNodeSelection)();
     const handleStageClick = (0, external_react_namespaceObject.useCallback)(()=>{
@@ -254,17 +267,10 @@ const StageNodeComponent = (props)=>{
         id
     ]);
     const handleReplaceTaskToolboxItemSelected = (0, external_react_namespaceObject.useCallback)((item)=>{
-        setIsReplacingTask(true);
-        const groupIndex = taskStateReference.current.groupIndex;
-        const taskIndex = taskStateReference.current.taskIndex;
-        const taskId = tasks[groupIndex]?.[taskIndex]?.id;
-        if (taskId) onTaskClick?.(taskId);
         onReplaceTaskFromToolbox?.(item, taskStateReference.current.groupIndex, taskStateReference.current.taskIndex);
         setIsReplacingTask(false);
     }, [
-        onReplaceTaskFromToolbox,
-        onTaskClick,
-        tasks
+        onReplaceTaskFromToolbox
     ]);
     const handleConfigurations = (0, external_react_namespaceObject.useMemo)(()=>isException ? [] : [
             {
@@ -470,17 +476,14 @@ const StageNodeComponent = (props)=>{
                                         })
                                     }),
                                     (onTaskAdd || onAddTaskFromToolbox) && !isReadOnly && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_material_index_cjs_namespaceObject.ApTooltip, {
-                                        content: addTaskLoading ? 'Loading...' : addTaskLabel,
+                                        content: addTaskLabel,
                                         placement: "top",
                                         children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
                                             children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_material_index_cjs_namespaceObject.ApIconButton, {
                                                 onClick: handleTaskAddClick,
                                                 size: "small",
-                                                disabled: addTaskLoading,
                                                 label: addTaskLabel,
-                                                children: addTaskLoading ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_material_index_cjs_namespaceObject.ApCircularProgress, {
-                                                    size: 20
-                                                }) : /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_material_index_cjs_namespaceObject.ApIcon, {
+                                                children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_material_index_cjs_namespaceObject.ApIcon, {
                                                     name: "add",
                                                     size: "20px"
                                                 })
@@ -526,7 +529,7 @@ const StageNodeComponent = (props)=>{
                                                                 return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_DraggableTask_cjs_namespaceObject.DraggableTask, {
                                                                     task: task,
                                                                     taskExecution: taskExecution,
-                                                                    isSelected: !!selectedTasks?.includes(task.id),
+                                                                    isSelected: selectedTaskId === task.id,
                                                                     isParallel: isParallel,
                                                                     contextMenuItems: contextMenuItems(isParallel, groupIndex, taskIndex, tasks.length, taskGroup.length, (tasks[groupIndex - 1]?.length ?? 0) > 1, (tasks[groupIndex + 1]?.length ?? 0) > 1),
                                                                     onTaskClick: handleTaskClick,
@@ -595,6 +598,7 @@ const StageNodeComponent = (props)=>{
                 children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_Toolbox_index_cjs_namespaceObject.Toolbox, {
                     title: addTaskLabel,
                     initialItems: taskOptions,
+                    loading: addTaskLoading,
                     onClose: ()=>setIsAddingTask(false),
                     onItemSelect: handleAddTaskToolboxItemSelected,
                     onSearch: onTaskToolboxSearch

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":"AAsDA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AAkpBxD,eAAO,MAAM,SAAS,8CAxoBa,cAAc,6CAwoBA,CAAC"}
+{"version":3,"file":"StageNode.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/StageNode/StageNode.tsx"],"names":[],"mappings":"AAqDA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AAkpBxD,eAAO,MAAM,SAAS,8CAxoBa,cAAc,6CAwoBA,CAAC"}

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

@@ -4,7 +4,7 @@ import { SortableContext, sortableKeyboardCoordinates, verticalListSortingStrate
 import { FontVariantToken, Padding, Spacing } from "@uipath/apollo-core";
 import { Column, Row } from "../../layouts/index.js";
 import { Position, useStore, useViewport } from "../../xyflow/react.js";
-import { ApCircularProgress, ApIcon, ApIconButton, ApLink, ApTooltip, ApTypography } from "../../../material/index.js";
+import { ApIcon, ApIconButton, ApLink, ApTooltip, ApTypography } from "../../../material/index.js";
 import { memo, useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { createPortal } from "react-dom";
 import { useConnectedHandles } from "../BaseCanvas/ConnectedHandlesContext.js";
@@ -33,7 +33,7 @@ const StageNodeComponent = (props)=>{
     const isException = stageDetails?.isException;
     const isReadOnly = !!stageDetails?.isReadOnly;
     const icon = stageDetails?.icon;
-    const selectedTasks = stageDetails?.selectedTasks;
+    const selectedTaskId = stageDetails?.selectedTaskId;
     const defaultContent = stageDetails?.defaultContent || 'Add first task';
     const status = execution?.stageStatus?.status;
     const statusLabel = execution?.stageStatus?.label;
@@ -61,17 +61,24 @@ const StageNodeComponent = (props)=>{
     const [isAddingTask, setIsAddingTask] = useState(false);
     const [isReplacingTask, setIsReplacingTask] = useState(false);
     useEffect(()=>{
-        if (pendingReplaceTask?.groupIndex != null && pendingReplaceTask?.taskIndex != null) {
-            const taskGroup = tasks[pendingReplaceTask.groupIndex];
-            taskStateReference.current = {
-                isParallel: (taskGroup?.length ?? 0) > 1,
-                groupIndex: pendingReplaceTask.groupIndex,
-                taskIndex: pendingReplaceTask.taskIndex
-            };
-            setIsReplacingTask(true);
-        } else setIsReplacingTask(false);
+        if (pendingReplaceTask) {
+            const match = tasks.flatMap((group, gi)=>group.map((task, ti)=>({
+                        task,
+                        groupIndex: gi,
+                        taskIndex: ti
+                    }))).find(({ task })=>task.id === selectedTaskId);
+            if (match) {
+                taskStateReference.current = {
+                    isParallel: (tasks[match.groupIndex]?.length ?? 0) > 1,
+                    groupIndex: match.groupIndex,
+                    taskIndex: match.taskIndex
+                };
+                setIsReplacingTask(true);
+            }
+        }
     }, [
         pendingReplaceTask,
+        selectedTaskId,
         tasks
     ]);
     const [activeDragId, setActiveDragId] = useState(null);
@@ -174,7 +181,11 @@ const StageNodeComponent = (props)=>{
     const contextMenuItems = useCallback((isParallel, groupIndex, taskIndex, tasksLength, taskGroupLength, isAboveParallel, isBelowParallel)=>{
         const items = [];
         if (onReplaceTaskFromToolbox) {
-            items.push(getMenuItem('replace-task', 'Replace task', ()=>setIsReplacingTask(true)));
+            items.push(getMenuItem('replace-task', 'Replace task', ()=>{
+                const taskId = tasks[groupIndex]?.[taskIndex]?.id;
+                if (taskId) onTaskClick?.(taskId);
+                setIsReplacingTask(true);
+            }));
             items.push(getDivider());
         }
         if (onTaskGroupModification) {
@@ -187,8 +198,10 @@ const StageNodeComponent = (props)=>{
         return items;
     }, [
         onReplaceTaskFromToolbox,
+        onTaskClick,
         onTaskGroupModification,
-        reGroupTaskFunction
+        reGroupTaskFunction,
+        tasks
     ]);
     const { setSelectedNodeId } = useNodeSelection();
     const handleStageClick = useCallback(()=>{
@@ -226,17 +239,10 @@ const StageNodeComponent = (props)=>{
         id
     ]);
     const handleReplaceTaskToolboxItemSelected = useCallback((item)=>{
-        setIsReplacingTask(true);
-        const groupIndex = taskStateReference.current.groupIndex;
-        const taskIndex = taskStateReference.current.taskIndex;
-        const taskId = tasks[groupIndex]?.[taskIndex]?.id;
-        if (taskId) onTaskClick?.(taskId);
         onReplaceTaskFromToolbox?.(item, taskStateReference.current.groupIndex, taskStateReference.current.taskIndex);
         setIsReplacingTask(false);
     }, [
-        onReplaceTaskFromToolbox,
-        onTaskClick,
-        tasks
+        onReplaceTaskFromToolbox
     ]);
     const handleConfigurations = useMemo(()=>isException ? [] : [
             {
@@ -442,17 +448,14 @@ const StageNodeComponent = (props)=>{
                                         })
                                     }),
                                     (onTaskAdd || onAddTaskFromToolbox) && !isReadOnly && /*#__PURE__*/ jsx(ApTooltip, {
-                                        content: addTaskLoading ? 'Loading...' : addTaskLabel,
+                                        content: addTaskLabel,
                                         placement: "top",
                                         children: /*#__PURE__*/ jsx("span", {
                                             children: /*#__PURE__*/ jsx(ApIconButton, {
                                                 onClick: handleTaskAddClick,
                                                 size: "small",
-                                                disabled: addTaskLoading,
                                                 label: addTaskLabel,
-                                                children: addTaskLoading ? /*#__PURE__*/ jsx(ApCircularProgress, {
-                                                    size: 20
-                                                }) : /*#__PURE__*/ jsx(ApIcon, {
+                                                children: /*#__PURE__*/ jsx(ApIcon, {
                                                     name: "add",
                                                     size: "20px"
                                                 })
@@ -498,7 +501,7 @@ const StageNodeComponent = (props)=>{
                                                                 return /*#__PURE__*/ jsx(DraggableTask, {
                                                                     task: task,
                                                                     taskExecution: taskExecution,
-                                                                    isSelected: !!selectedTasks?.includes(task.id),
+                                                                    isSelected: selectedTaskId === task.id,
                                                                     isParallel: isParallel,
                                                                     contextMenuItems: contextMenuItems(isParallel, groupIndex, taskIndex, tasks.length, taskGroup.length, (tasks[groupIndex - 1]?.length ?? 0) > 1, (tasks[groupIndex + 1]?.length ?? 0) > 1),
                                                                     onTaskClick: handleTaskClick,
@@ -567,6 +570,7 @@ const StageNodeComponent = (props)=>{
                 children: /*#__PURE__*/ jsx(Toolbox, {
                     title: addTaskLabel,
                     initialItems: taskOptions,
+                    loading: addTaskLoading,
                     onClose: ()=>setIsAddingTask(false),
                     onItemSelect: handleAddTaskToolboxItemSelected,
                     onSearch: onTaskToolboxSearch

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

@@ -1339,6 +1339,13 @@ const initialTasksForAddReplace = [
             label: 'Document Review',
             icon: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(DocumentIcon, {})
         }
+    ],
+    [
+        {
+            id: 'task-3',
+            label: 'Process Validation',
+            icon: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(ProcessIcon, {})
+        }
     ]
 ];
 const availableTaskOptions = [
@@ -1408,7 +1415,7 @@ const AddAndReplaceTasksStory = ()=>{
     const edgeTypes = (0, external_react_namespaceObject.useMemo)(()=>({
             stage: external_StageEdge_cjs_namespaceObject.StageEdge
         }), []);
-    const [pendingReplaceTask, setPendingReplaceTask] = (0, external_react_namespaceObject.useState)();
+    const [pendingReplaceTask, setPendingReplaceTask] = (0, external_react_namespaceObject.useState)(false);
     const [selectedTaskId, setSelectedTaskId] = (0, external_react_namespaceObject.useState)();
     const [menuAnchorEl, setMenuAnchorEl] = (0, external_react_namespaceObject.useState)(null);
     const [nodesState, setNodes, onNodesChange] = (0, react_cjs_namespaceObject.useNodesState)([
@@ -1482,7 +1489,8 @@ const AddAndReplaceTasksStory = ()=>{
                     }
                 };
             }));
-        setPendingReplaceTask(void 0);
+        setPendingReplaceTask(false);
+        setSelectedTaskId(void 0);
     }, [
         setNodes
     ]);
@@ -1511,17 +1519,28 @@ const AddAndReplaceTasksStory = ()=>{
     const handleTaskClick = (0, external_react_namespaceObject.useCallback)((taskId)=>{
         setSelectedTaskId(taskId);
     }, []);
+    const handlePaneClick = (0, external_react_namespaceObject.useCallback)(()=>{
+        setSelectedTaskId(void 0);
+        setPendingReplaceTask(false);
+    }, []);
+    const handleNodesChange = (0, external_react_namespaceObject.useCallback)((...args)=>{
+        onNodesChange(...args);
+        const deselected = args[0].some((c)=>'select' === c.type && 'add-replace-stage' === c.id && !c.selected);
+        if (deselected) {
+            setPendingReplaceTask(false);
+            setSelectedTaskId(void 0);
+        }
+    }, [
+        onNodesChange
+    ]);
     const currentTasks = nodesState.find((n)=>'add-replace-stage' === n.id)?.data.stageDetails.tasks || [];
-    const taskMenuItems = (0, external_react_namespaceObject.useMemo)(()=>currentTasks.flatMap((group, groupIndex)=>group.map((task, taskIndex)=>({
+    const taskMenuItems = (0, external_react_namespaceObject.useMemo)(()=>currentTasks.flatMap((group)=>group.map((task)=>({
                     title: task.label,
                     variant: 'item',
                     startIcon: task.icon,
                     onClick: ()=>{
                         setSelectedTaskId(task.id);
-                        setPendingReplaceTask({
-                            groupIndex,
-                            taskIndex
-                        });
+                        setPendingReplaceTask(true);
                         setMenuAnchorEl(null);
                     }
                 }))), [
@@ -1531,12 +1550,12 @@ const AddAndReplaceTasksStory = ()=>{
                 ...node,
                 data: {
                     ...node.data,
-                    pendingReplaceTask: pendingReplaceTask,
+                    ...selectedTaskId && {
+                        pendingReplaceTask
+                    },
                     stageDetails: {
                         ...node.data.stageDetails,
-                        selectedTasks: selectedTaskId ? [
-                            selectedTaskId
-                        ] : void 0
+                        selectedTaskId
                     },
                     onAddTaskFromToolbox: handleAddTask,
                     onReplaceTaskFromToolbox: handleReplaceTask,
@@ -1556,13 +1575,14 @@ const AddAndReplaceTasksStory = ()=>{
         setEdges
     ]);
     const replaceButtonLabel = (0, external_react_namespaceObject.useMemo)(()=>{
-        if (pendingReplaceTask) {
-            const taskBeingReplaced = currentTasks[pendingReplaceTask.groupIndex]?.[pendingReplaceTask.taskIndex];
+        if (pendingReplaceTask && selectedTaskId) {
+            const taskBeingReplaced = currentTasks.flat().find((t)=>t.id === selectedTaskId);
             if (taskBeingReplaced) return `Replacing Task: ${taskBeingReplaced.label}`;
         }
         return 'Replace Task';
     }, [
         pendingReplaceTask,
+        selectedTaskId,
         currentTasks
     ]);
     return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
@@ -1574,9 +1594,10 @@ const AddAndReplaceTasksStory = ()=>{
             children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(external_BaseCanvas_index_cjs_namespaceObject.BaseCanvas, {
                 nodes: nodesWithMetadata,
                 edges: edges,
-                onNodesChange: onNodesChange,
+                onNodesChange: handleNodesChange,
                 onEdgesChange: onEdgesChange,
                 onConnect: onConnect,
+                onPaneClick: handlePaneClick,
                 nodeTypes: nodeTypes,
                 edgeTypes: edgeTypes,
                 mode: "design",
@@ -1630,6 +1651,59 @@ const AddAndReplaceTasks = {
     render: ()=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(AddAndReplaceTasksStory, {}),
     args: {}
 };
+const fetchChildren = (id)=>new Promise((resolve)=>{
+        setTimeout(()=>{
+            resolve([
+                {
+                    id: `${id}-sub-1`,
+                    name: `${id} - Subtask A`,
+                    data: {
+                        type: `${id}-a`
+                    }
+                },
+                {
+                    id: `${id}-sub-2`,
+                    name: `${id} - Subtask B`,
+                    data: {
+                        type: `${id}-b`
+                    }
+                },
+                {
+                    id: `${id}-sub-3`,
+                    name: `${id} - Subtask C`,
+                    data: {
+                        type: `${id}-c`
+                    }
+                }
+            ]);
+        }, 2000);
+    });
+const loadedTaskOptionsWithChildren = [
+    {
+        id: 'email',
+        name: 'Email',
+        data: {
+            type: 'email'
+        },
+        children: (id)=>fetchChildren(id)
+    },
+    {
+        id: 'approval',
+        name: 'Approval',
+        data: {
+            type: 'approval'
+        },
+        children: (id)=>fetchChildren(id)
+    },
+    {
+        id: "script",
+        name: 'Script',
+        data: {
+            type: "script"
+        },
+        children: (id)=>fetchChildren(id)
+    }
+];
 const AddTaskLoadingStory = ()=>{
     const StageNodeWrapper = (0, external_react_namespaceObject.useMemo)(()=>function(props) {
             return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_StageNode_cjs_namespaceObject.StageNode, {
@@ -1656,14 +1730,15 @@ const AddTaskLoadingStory = ()=>{
                 width: 304,
                 data: {
                     stageDetails: {
-                        label: 'Empty Stage (click +)',
+                        label: 'Top-level loading (click +)',
                         tasks: []
                     },
-                    addTaskLoading: false
+                    addTaskLoading: true,
+                    taskOptions: []
                 }
             },
             {
-                id: 'loading-stage-with-tasks',
+                id: 'loading-stage-children',
                 type: 'stage',
                 position: {
                     x: 400,
@@ -1672,7 +1747,7 @@ const AddTaskLoadingStory = ()=>{
                 width: 304,
                 data: {
                     stageDetails: {
-                        label: 'With Tasks (click +)',
+                        label: 'Async children (click +)',
                         tasks: [
                             [
                                 {
@@ -1680,50 +1755,41 @@ const AddTaskLoadingStory = ()=>{
                                     label: 'Existing Task',
                                     icon: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(VerificationIcon, {})
                                 }
-                            ],
-                            [
-                                {
-                                    id: 'task-2',
-                                    label: 'Another Task',
-                                    icon: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(DocumentIcon, {})
-                                }
                             ]
                         ]
                     },
-                    addTaskLoading: false
+                    addTaskLoading: false,
+                    taskOptions: loadedTaskOptionsWithChildren
                 }
             }
         ], []);
     const [nodesState, setNodes, onNodesChange] = (0, react_cjs_namespaceObject.useNodesState)(initialNodes);
     const [edges, setEdges, onEdgesChange] = (0, react_cjs_namespaceObject.useEdgesState)([]);
-    const setNodeLoading = (0, external_react_namespaceObject.useCallback)((nodeId, loading)=>{
-        setNodes((nds)=>nds.map((node)=>node.id === nodeId ? {
-                    ...node,
-                    data: {
-                        ...node.data,
-                        addTaskLoading: loading
-                    }
-                } : node));
-    }, [
-        setNodes
-    ]);
-    const handleTaskAddForNode = (0, external_react_namespaceObject.useCallback)((nodeId)=>{
-        setNodeLoading(nodeId, true);
-        setTimeout(()=>{
-            setNodeLoading(nodeId, false);
+    (0, external_react_namespaceObject.useEffect)(()=>{
+        const timeout = setTimeout(()=>{
+            setNodes((nds)=>nds.map((node)=>'loading-stage-empty' === node.id ? {
+                        ...node,
+                        data: {
+                            ...node.data,
+                            addTaskLoading: false,
+                            taskOptions: loadedTaskOptionsWithChildren
+                        }
+                    } : node));
         }, 3000);
+        return ()=>clearTimeout(timeout);
     }, [
-        setNodeLoading
+        setNodes
     ]);
     const nodesWithHandler = (0, external_react_namespaceObject.useMemo)(()=>nodesState.map((node)=>({
                 ...node,
                 data: {
                     ...node.data,
-                    onTaskAdd: ()=>handleTaskAddForNode(node.id)
+                    onAddTaskFromToolbox: (taskItem)=>{
+                        window.alert(`Added task "${taskItem.name}" to ${node.id}`);
+                    }
                 }
             })), [
-        nodesState,
-        handleTaskAddForNode
+        nodesState
     ]);
     const onConnect = (0, external_react_namespaceObject.useCallback)((connection)=>setEdges((eds)=>(0, react_cjs_namespaceObject.addEdge)(connection, eds)), [
         setEdges

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;AAyBvD,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAGxC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,SAAS,CA0FD,CAAC;AAEjC,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AA4CnC,eAAO,MAAM,OAAO,EAAE,KA2DrB,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KAsE3B,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,KA8M7B,CAAC;AAEF,eAAO,MAAM,yBAAyB,EAAE,KA+HvC,CAAC;AAEF,eAAO,MAAM,sBAAsB,EAAE,KAoKpC,CAAC;AA8GF,eAAO,MAAM,uBAAuB,EAAE,KAOrC,CAAC;AA6TF,eAAO,MAAM,kBAAkB,EAAE,KAOhC,CAAC;AAuHF,eAAO,MAAM,cAAc,EAAE,KAO5B,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;AAyBvD,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAGxC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,SAAS,CA0FD,CAAC;AAEjC,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AA4CnC,eAAO,MAAM,OAAO,EAAE,KA2DrB,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KAsE3B,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,KA8M7B,CAAC;AAEF,eAAO,MAAM,yBAAyB,EAAE,KA+HvC,CAAC;AAEF,eAAO,MAAM,sBAAsB,EAAE,KAoKpC,CAAC;AA8GF,eAAO,MAAM,uBAAuB,EAAE,KAOrC,CAAC;AAkVF,eAAO,MAAM,kBAAkB,EAAE,KAOhC,CAAC;AAmJF,eAAO,MAAM,cAAc,EAAE,KAO5B,CAAC"}

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

@@ -1,7 +1,7 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { ConnectionMode, Panel, ReactFlowProvider, addEdge, useEdgesState, useNodesState } from "../../xyflow/react.js";
 import { ApButton, ApMenu } from "../../../material/components/index.js";
-import { useCallback, useMemo, useState } from "react";
+import { useCallback, useEffect, useMemo, useState } from "react";
 import { DefaultCanvasTranslations } from "../../types.js";
 import { createGroupModificationHandlers, getHandlerForModificationType } from "../../utils/GroupModificationUtils.js";
 import { BaseCanvas } from "../BaseCanvas/index.js";
@@ -1303,6 +1303,13 @@ const initialTasksForAddReplace = [
             label: 'Document Review',
             icon: /*#__PURE__*/ jsx(DocumentIcon, {})
         }
+    ],
+    [
+        {
+            id: 'task-3',
+            label: 'Process Validation',
+            icon: /*#__PURE__*/ jsx(ProcessIcon, {})
+        }
     ]
 ];
 const availableTaskOptions = [
@@ -1372,7 +1379,7 @@ const AddAndReplaceTasksStory = ()=>{
     const edgeTypes = useMemo(()=>({
             stage: StageEdge
         }), []);
-    const [pendingReplaceTask, setPendingReplaceTask] = useState();
+    const [pendingReplaceTask, setPendingReplaceTask] = useState(false);
     const [selectedTaskId, setSelectedTaskId] = useState();
     const [menuAnchorEl, setMenuAnchorEl] = useState(null);
     const [nodesState, setNodes, onNodesChange] = useNodesState([
@@ -1446,7 +1453,8 @@ const AddAndReplaceTasksStory = ()=>{
                     }
                 };
             }));
-        setPendingReplaceTask(void 0);
+        setPendingReplaceTask(false);
+        setSelectedTaskId(void 0);
     }, [
         setNodes
     ]);
@@ -1475,17 +1483,28 @@ const AddAndReplaceTasksStory = ()=>{
     const handleTaskClick = useCallback((taskId)=>{
         setSelectedTaskId(taskId);
     }, []);
+    const handlePaneClick = useCallback(()=>{
+        setSelectedTaskId(void 0);
+        setPendingReplaceTask(false);
+    }, []);
+    const handleNodesChange = useCallback((...args)=>{
+        onNodesChange(...args);
+        const deselected = args[0].some((c)=>'select' === c.type && 'add-replace-stage' === c.id && !c.selected);
+        if (deselected) {
+            setPendingReplaceTask(false);
+            setSelectedTaskId(void 0);
+        }
+    }, [
+        onNodesChange
+    ]);
     const currentTasks = nodesState.find((n)=>'add-replace-stage' === n.id)?.data.stageDetails.tasks || [];
-    const taskMenuItems = useMemo(()=>currentTasks.flatMap((group, groupIndex)=>group.map((task, taskIndex)=>({
+    const taskMenuItems = useMemo(()=>currentTasks.flatMap((group)=>group.map((task)=>({
                     title: task.label,
                     variant: 'item',
                     startIcon: task.icon,
                     onClick: ()=>{
                         setSelectedTaskId(task.id);
-                        setPendingReplaceTask({
-                            groupIndex,
-                            taskIndex
-                        });
+                        setPendingReplaceTask(true);
                         setMenuAnchorEl(null);
                     }
                 }))), [
@@ -1495,12 +1514,12 @@ const AddAndReplaceTasksStory = ()=>{
                 ...node,
                 data: {
                     ...node.data,
-                    pendingReplaceTask: pendingReplaceTask,
+                    ...selectedTaskId && {
+                        pendingReplaceTask
+                    },
                     stageDetails: {
                         ...node.data.stageDetails,
-                        selectedTasks: selectedTaskId ? [
-                            selectedTaskId
-                        ] : void 0
+                        selectedTaskId
                     },
                     onAddTaskFromToolbox: handleAddTask,
                     onReplaceTaskFromToolbox: handleReplaceTask,
@@ -1520,13 +1539,14 @@ const AddAndReplaceTasksStory = ()=>{
         setEdges
     ]);
     const replaceButtonLabel = useMemo(()=>{
-        if (pendingReplaceTask) {
-            const taskBeingReplaced = currentTasks[pendingReplaceTask.groupIndex]?.[pendingReplaceTask.taskIndex];
+        if (pendingReplaceTask && selectedTaskId) {
+            const taskBeingReplaced = currentTasks.flat().find((t)=>t.id === selectedTaskId);
             if (taskBeingReplaced) return `Replacing Task: ${taskBeingReplaced.label}`;
         }
         return 'Replace Task';
     }, [
         pendingReplaceTask,
+        selectedTaskId,
         currentTasks
     ]);
     return /*#__PURE__*/ jsx("div", {
@@ -1538,9 +1558,10 @@ const AddAndReplaceTasksStory = ()=>{
             children: /*#__PURE__*/ jsxs(BaseCanvas, {
                 nodes: nodesWithMetadata,
                 edges: edges,
-                onNodesChange: onNodesChange,
+                onNodesChange: handleNodesChange,
                 onEdgesChange: onEdgesChange,
                 onConnect: onConnect,
+                onPaneClick: handlePaneClick,
                 nodeTypes: nodeTypes,
                 edgeTypes: edgeTypes,
                 mode: "design",
@@ -1594,6 +1615,59 @@ const AddAndReplaceTasks = {
     render: ()=>/*#__PURE__*/ jsx(AddAndReplaceTasksStory, {}),
     args: {}
 };
+const fetchChildren = (id)=>new Promise((resolve)=>{
+        setTimeout(()=>{
+            resolve([
+                {
+                    id: `${id}-sub-1`,
+                    name: `${id} - Subtask A`,
+                    data: {
+                        type: `${id}-a`
+                    }
+                },
+                {
+                    id: `${id}-sub-2`,
+                    name: `${id} - Subtask B`,
+                    data: {
+                        type: `${id}-b`
+                    }
+                },
+                {
+                    id: `${id}-sub-3`,
+                    name: `${id} - Subtask C`,
+                    data: {
+                        type: `${id}-c`
+                    }
+                }
+            ]);
+        }, 2000);
+    });
+const loadedTaskOptionsWithChildren = [
+    {
+        id: 'email',
+        name: 'Email',
+        data: {
+            type: 'email'
+        },
+        children: (id)=>fetchChildren(id)
+    },
+    {
+        id: 'approval',
+        name: 'Approval',
+        data: {
+            type: 'approval'
+        },
+        children: (id)=>fetchChildren(id)
+    },
+    {
+        id: "script",
+        name: 'Script',
+        data: {
+            type: "script"
+        },
+        children: (id)=>fetchChildren(id)
+    }
+];
 const AddTaskLoadingStory = ()=>{
     const StageNodeWrapper = useMemo(()=>function(props) {
             return /*#__PURE__*/ jsx(StageNode, {
@@ -1620,14 +1694,15 @@ const AddTaskLoadingStory = ()=>{
                 width: 304,
                 data: {
                     stageDetails: {
-                        label: 'Empty Stage (click +)',
+                        label: 'Top-level loading (click +)',
                         tasks: []
                     },
-                    addTaskLoading: false
+                    addTaskLoading: true,
+                    taskOptions: []
                 }
             },
             {
-                id: 'loading-stage-with-tasks',
+                id: 'loading-stage-children',
                 type: 'stage',
                 position: {
                     x: 400,
@@ -1636,7 +1711,7 @@ const AddTaskLoadingStory = ()=>{
                 width: 304,
                 data: {
                     stageDetails: {
-                        label: 'With Tasks (click +)',
+                        label: 'Async children (click +)',
                         tasks: [
                             [
                                 {
@@ -1644,50 +1719,41 @@ const AddTaskLoadingStory = ()=>{
                                     label: 'Existing Task',
                                     icon: /*#__PURE__*/ jsx(VerificationIcon, {})
                                 }
-                            ],
-                            [
-                                {
-                                    id: 'task-2',
-                                    label: 'Another Task',
-                                    icon: /*#__PURE__*/ jsx(DocumentIcon, {})
-                                }
                             ]
                         ]
                     },
-                    addTaskLoading: false
+                    addTaskLoading: false,
+                    taskOptions: loadedTaskOptionsWithChildren
                 }
             }
         ], []);
     const [nodesState, setNodes, onNodesChange] = useNodesState(initialNodes);
     const [edges, setEdges, onEdgesChange] = useEdgesState([]);
-    const setNodeLoading = useCallback((nodeId, loading)=>{
-        setNodes((nds)=>nds.map((node)=>node.id === nodeId ? {
-                    ...node,
-                    data: {
-                        ...node.data,
-                        addTaskLoading: loading
-                    }
-                } : node));
-    }, [
-        setNodes
-    ]);
-    const handleTaskAddForNode = useCallback((nodeId)=>{
-        setNodeLoading(nodeId, true);
-        setTimeout(()=>{
-            setNodeLoading(nodeId, false);
+    useEffect(()=>{
+        const timeout = setTimeout(()=>{
+            setNodes((nds)=>nds.map((node)=>'loading-stage-empty' === node.id ? {
+                        ...node,
+                        data: {
+                            ...node.data,
+                            addTaskLoading: false,
+                            taskOptions: loadedTaskOptionsWithChildren
+                        }
+                    } : node));
         }, 3000);
+        return ()=>clearTimeout(timeout);
     }, [
-        setNodeLoading
+        setNodes
     ]);
     const nodesWithHandler = useMemo(()=>nodesState.map((node)=>({
                 ...node,
                 data: {
                     ...node.data,
-                    onTaskAdd: ()=>handleTaskAddForNode(node.id)
+                    onAddTaskFromToolbox: (taskItem)=>{
+                        window.alert(`Added task "${taskItem.name}" to ${node.id}`);
+                    }
                 }
             })), [
-        nodesState,
-        handleTaskAddForNode
+        nodesState
     ]);
     const onConnect = useCallback((connection)=>setEdges((eds)=>addEdge(connection, eds)), [
         setEdges

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

@@ -23,10 +23,7 @@ export interface StageNodeProps extends NodeProps {
     dragging: boolean;
     selected: boolean;
     id: string;
-    pendingReplaceTask?: {
-        groupIndex: number;
-        taskIndex: number;
-    };
+    pendingReplaceTask?: boolean;
     stageDetails: {
         label: string;
         defaultContent?: string;
@@ -38,7 +35,7 @@ export interface StageNodeProps extends NodeProps {
         isException?: boolean;
         isReadOnly?: boolean;
         tasks: StageTaskItem[][];
-        selectedTasks?: string[];
+        selectedTaskId?: string;
     };
     addTaskLabel?: string;
     addTaskLoading?: boolean;

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

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

package/dist/canvas/components/Toolbox/Toolbox.cjs

@@ -71,6 +71,7 @@ function Toolbox({ onClose, onBack, onItemSelect, onSearch, onItemHover, title,
     const [isTransitioning, setIsTransitioning] = (0, external_react_namespaceObject.useState)(false);
     const [animationDirection, setAnimationDirection] = (0, external_react_namespaceObject.useState)('forward');
     const navigationStack = (0, index_cjs_namespaceObject.useNavigationStack)();
+    const containerRef = (0, external_react_namespaceObject.useRef)(null);
     const transitionTimeoutRef = (0, external_react_namespaceObject.useRef)(void 0);
     const searchIdRef = (0, external_react_namespaceObject.useRef)(0);
     const initialItemsRef = (0, external_react_namespaceObject.useRef)(initialItems);
@@ -214,8 +215,15 @@ function Toolbox({ onClose, onBack, onItemSelect, onSearch, onItemHover, title,
             } else if (navigationStack.canGoBack) handleBackTransition();
             else onClose();
         };
+        const handleClickOutside = (e)=>{
+            if (containerRef.current && !containerRef.current.contains(e.target)) onClose();
+        };
         document.addEventListener('keydown', handleKeyDown);
-        return ()=>document.removeEventListener('keydown', handleKeyDown);
+        document.addEventListener('mousedown', handleClickOutside);
+        return ()=>{
+            document.removeEventListener('keydown', handleKeyDown);
+            document.removeEventListener('mousedown', handleClickOutside);
+        };
     }, [
         isSearching,
         navigationStack.canGoBack,
@@ -224,39 +232,42 @@ function Toolbox({ onClose, onBack, onItemSelect, onSearch, onItemHover, title,
         startTransition,
         handleBackTransition
     ]);
-    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(external_layouts_index_cjs_namespaceObject.Column, {
-        px: 20,
-        py: 12,
-        gap: 12,
-        w: 320,
-        h: 440,
-        children: [
-            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_Header_cjs_namespaceObject.Header, {
-                title: currentParentItem?.name || title,
-                onBack: handleBackTransition,
-                showBackButton: navigationStack.canGoBack
-            }),
-            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_SearchBox_cjs_namespaceObject.SearchBox, {
-                value: search,
-                onChange: handleSearch,
-                clear: clearSearch,
-                placeholder: "Search"
-            }),
-            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_Toolbox_styles_cjs_namespaceObject.AnimatedContainer, {
-                children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_Toolbox_styles_cjs_namespaceObject.AnimatedContent, {
-                    entering: isTransitioning,
-                    direction: animationDirection,
-                    children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_ListView_cjs_namespaceObject.ListView, {
-                        isLoading: childrenLoading || searchLoading || loading,
-                        items: isSearching && !isSearchingInitialItems ? searchedItems : items,
-                        emptyStateMessage: isSearching ? 'No matching nodes found' : 'No nodes found',
-                        enableSections: !isSearching,
-                        onItemClick: handleItemSelect,
-                        onItemHover: onItemHover
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+        ref: containerRef,
+        children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(external_layouts_index_cjs_namespaceObject.Column, {
+            px: 20,
+            py: 12,
+            gap: 12,
+            w: 320,
+            h: 440,
+            children: [
+                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_Header_cjs_namespaceObject.Header, {
+                    title: currentParentItem?.name || title,
+                    onBack: handleBackTransition,
+                    showBackButton: navigationStack.canGoBack
+                }),
+                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_SearchBox_cjs_namespaceObject.SearchBox, {
+                    value: search,
+                    onChange: handleSearch,
+                    clear: clearSearch,
+                    placeholder: "Search"
+                }),
+                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_Toolbox_styles_cjs_namespaceObject.AnimatedContainer, {
+                    children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_Toolbox_styles_cjs_namespaceObject.AnimatedContent, {
+                        entering: isTransitioning,
+                        direction: animationDirection,
+                        children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_ListView_cjs_namespaceObject.ListView, {
+                            isLoading: childrenLoading || searchLoading || loading,
+                            items: isSearching && !isSearchingInitialItems ? searchedItems : items,
+                            emptyStateMessage: isSearching ? 'No matching nodes found' : 'No nodes found',
+                            enableSections: !isSearching,
+                            onItemClick: handleItemSelect,
+                            onItemHover: onItemHover
+                        })
                     })
                 })
-            })
-        ]
+            ]
+        })
     });
 }
 exports.Toolbox = __webpack_exports__.Toolbox;

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

@@ -1 +1 @@
-{"version":3,"file":"Toolbox.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/Toolbox/Toolbox.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,QAAQ,EAAY,MAAM,YAAY,CAAC;AAuCrD,MAAM,MAAM,oBAAoB,CAAC,CAAC,GAAG,GAAG,IAAI,CAC1C,KAAK,EAAE,MAAM,EACb,gBAAgB,EAAE,OAAO,EACzB,EAAE,YAAY,EAAE,QAAQ,EAAE,EAAE;IAAE,YAAY,CAAC,EAAE,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC;IAAC,QAAQ,CAAC,EAAE,MAAM,CAAA;CAAE,KAC5E,OAAO,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC;AAE5B,MAAM,WAAW,YAAY,CAAC,CAAC;IAC7B,KAAK,EAAE,MAAM,CAAC;IACd,YAAY,EAAE,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC;IAC5B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,YAAY,EAAE,CAAC,IAAI,EAAE,QAAQ,CAAC,CAAC,CAAC,KAAK,OAAO,CAAC,IAAI,CAAC,GAAG,IAAI,CAAC;IAC1D,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,QAAQ,CAAC,CAAC,CAAC,KAAK,IAAI,CAAC;IAC1C,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,QAAQ,CAAC,EAAE,oBAAoB,CAAC,CAAC,CAAC,CAAC;CACpC;AAoBD,wBAAgB,OAAO,CAAC,CAAC,EAAE,EACzB,OAAO,EACP,MAAM,EACN,YAAY,EACZ,QAAQ,EACR,WAAW,EACX,KAAK,EACL,YAAY,EACZ,OAAO,GACR,EAAE,YAAY,CAAC,CAAC,CAAC,2CAuPjB"}
+{"version":3,"file":"Toolbox.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/Toolbox/Toolbox.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,QAAQ,EAAY,MAAM,YAAY,CAAC;AAuCrD,MAAM,MAAM,oBAAoB,CAAC,CAAC,GAAG,GAAG,IAAI,CAC1C,KAAK,EAAE,MAAM,EACb,gBAAgB,EAAE,OAAO,EACzB,EAAE,YAAY,EAAE,QAAQ,EAAE,EAAE;IAAE,YAAY,CAAC,EAAE,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC;IAAC,QAAQ,CAAC,EAAE,MAAM,CAAA;CAAE,KAC5E,OAAO,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC;AAE5B,MAAM,WAAW,YAAY,CAAC,CAAC;IAC7B,KAAK,EAAE,MAAM,CAAC;IACd,YAAY,EAAE,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC;IAC5B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,YAAY,EAAE,CAAC,IAAI,EAAE,QAAQ,CAAC,CAAC,CAAC,KAAK,OAAO,CAAC,IAAI,CAAC,GAAG,IAAI,CAAC;IAC1D,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,QAAQ,CAAC,CAAC,CAAC,KAAK,IAAI,CAAC;IAC1C,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,QAAQ,CAAC,EAAE,oBAAoB,CAAC,CAAC,CAAC,CAAC;CACpC;AAoBD,wBAAgB,OAAO,CAAC,CAAC,EAAE,EACzB,OAAO,EACP,MAAM,EACN,YAAY,EACZ,QAAQ,EACR,WAAW,EACX,KAAK,EACL,YAAY,EACZ,OAAO,GACR,EAAE,YAAY,CAAC,CAAC,CAAC,2CAoQjB"}

package/dist/canvas/components/Toolbox/Toolbox.js

@@ -43,6 +43,7 @@ function Toolbox({ onClose, onBack, onItemSelect, onSearch, onItemHover, title,
     const [isTransitioning, setIsTransitioning] = useState(false);
     const [animationDirection, setAnimationDirection] = useState('forward');
     const navigationStack = useNavigationStack();
+    const containerRef = useRef(null);
     const transitionTimeoutRef = useRef(void 0);
     const searchIdRef = useRef(0);
     const initialItemsRef = useRef(initialItems);
@@ -186,8 +187,15 @@ function Toolbox({ onClose, onBack, onItemSelect, onSearch, onItemHover, title,
             } else if (navigationStack.canGoBack) handleBackTransition();
             else onClose();
         };
+        const handleClickOutside = (e)=>{
+            if (containerRef.current && !containerRef.current.contains(e.target)) onClose();
+        };
         document.addEventListener('keydown', handleKeyDown);
-        return ()=>document.removeEventListener('keydown', handleKeyDown);
+        document.addEventListener('mousedown', handleClickOutside);
+        return ()=>{
+            document.removeEventListener('keydown', handleKeyDown);
+            document.removeEventListener('mousedown', handleClickOutside);
+        };
     }, [
         isSearching,
         navigationStack.canGoBack,
@@ -196,39 +204,42 @@ function Toolbox({ onClose, onBack, onItemSelect, onSearch, onItemHover, title,
         startTransition,
         handleBackTransition
     ]);
-    return /*#__PURE__*/ jsxs(Column, {
-        px: 20,
-        py: 12,
-        gap: 12,
-        w: 320,
-        h: 440,
-        children: [
-            /*#__PURE__*/ jsx(Header, {
-                title: currentParentItem?.name || title,
-                onBack: handleBackTransition,
-                showBackButton: navigationStack.canGoBack
-            }),
-            /*#__PURE__*/ jsx(SearchBox, {
-                value: search,
-                onChange: handleSearch,
-                clear: clearSearch,
-                placeholder: "Search"
-            }),
-            /*#__PURE__*/ jsx(AnimatedContainer, {
-                children: /*#__PURE__*/ jsx(AnimatedContent, {
-                    entering: isTransitioning,
-                    direction: animationDirection,
-                    children: /*#__PURE__*/ jsx(ListView, {
-                        isLoading: childrenLoading || searchLoading || loading,
-                        items: isSearching && !isSearchingInitialItems ? searchedItems : items,
-                        emptyStateMessage: isSearching ? 'No matching nodes found' : 'No nodes found',
-                        enableSections: !isSearching,
-                        onItemClick: handleItemSelect,
-                        onItemHover: onItemHover
+    return /*#__PURE__*/ jsx("div", {
+        ref: containerRef,
+        children: /*#__PURE__*/ jsxs(Column, {
+            px: 20,
+            py: 12,
+            gap: 12,
+            w: 320,
+            h: 440,
+            children: [
+                /*#__PURE__*/ jsx(Header, {
+                    title: currentParentItem?.name || title,
+                    onBack: handleBackTransition,
+                    showBackButton: navigationStack.canGoBack
+                }),
+                /*#__PURE__*/ jsx(SearchBox, {
+                    value: search,
+                    onChange: handleSearch,
+                    clear: clearSearch,
+                    placeholder: "Search"
+                }),
+                /*#__PURE__*/ jsx(AnimatedContainer, {
+                    children: /*#__PURE__*/ jsx(AnimatedContent, {
+                        entering: isTransitioning,
+                        direction: animationDirection,
+                        children: /*#__PURE__*/ jsx(ListView, {
+                            isLoading: childrenLoading || searchLoading || loading,
+                            items: isSearching && !isSearchingInitialItems ? searchedItems : items,
+                            emptyStateMessage: isSearching ? 'No matching nodes found' : 'No nodes found',
+                            enableSections: !isSearching,
+                            onItemClick: handleItemSelect,
+                            onItemHover: onItemHover
+                        })
                     })
                 })
-            })
-        ]
+            ]
+        })
     });
 }
 export { Toolbox };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uipath/apollo-react",
-  "version": "3.44.2",
+  "version": "3.45.0",
   "description": "Apollo Design System - React component library with Material UI theming",
   "repository": {
     "type": "git",