@uipath/apollo-react 3.62.1 → 3.63.0-pr431.b5c8666

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, useEffect, useMemo, useRef, useState } from "react";
+import { memo, useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { DefaultCanvasTranslations } from "../../types.js";
 import { createGroupModificationHandlers, getHandlerForModificationType } from "../../utils/GroupModificationUtils.js";
 import { BaseCanvas } from "../BaseCanvas/index.js";
@@ -10,6 +10,56 @@ import { TaskIcon, TaskItemTypeValues } from "../TaskIcon/index.js";
 import { StageConnectionEdge } from "./StageConnectionEdge.js";
 import { StageEdge } from "./StageEdge.js";
 import { StageNode } from "./StageNode.js";
+const StageNodeWrapper = /*#__PURE__*/ memo((props)=>/*#__PURE__*/ jsx(StageNode, {
+        ...props,
+        ...props.data
+    }));
+const DefaultCanvasDecorator = ({ initialNodes, initialEdges = [] })=>{
+    const [nodes, _setNodes, onNodesChange] = useNodesState(initialNodes);
+    const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges);
+    const onConnect = useCallback((connection)=>{
+        setEdges((eds)=>addEdge(connection, eds));
+    }, [
+        setEdges
+    ]);
+    const nodeTypes = useMemo(()=>({
+            stage: StageNodeWrapper
+        }), []);
+    const edgeTypes = useMemo(()=>({
+            stage: StageEdge
+        }), []);
+    const defaultEdgeOptions = useMemo(()=>({
+            type: 'stage'
+        }), []);
+    return /*#__PURE__*/ jsx("div", {
+        style: {
+            width: '100vw',
+            height: '100vh'
+        },
+        children: /*#__PURE__*/ jsx(ReactFlowProvider, {
+            children: /*#__PURE__*/ jsx(BaseCanvas, {
+                nodes: nodes,
+                edges: edges,
+                onNodesChange: onNodesChange,
+                onEdgesChange: onEdgesChange,
+                onConnect: onConnect,
+                nodeTypes: nodeTypes,
+                edgeTypes: edgeTypes,
+                mode: "design",
+                connectionMode: ConnectionMode.Strict,
+                defaultEdgeOptions: defaultEdgeOptions,
+                connectionLineComponent: StageConnectionEdge,
+                elevateEdgesOnSelect: true,
+                children: /*#__PURE__*/ jsx(Panel, {
+                    position: "bottom-right",
+                    children: /*#__PURE__*/ jsx(CanvasPositionControls, {
+                        translations: DefaultCanvasTranslations
+                    })
+                })
+            })
+        })
+    });
+};
 const meta = {
     title: 'Canvas/StageNode',
     component: StageNode,
@@ -19,10 +69,6 @@ const meta = {
     decorators: [
         (Story, context)=>{
             if (context.parameters?.useCustomRender) return /*#__PURE__*/ jsx(Story, {});
-            const StageNodeWrapper = (props)=>/*#__PURE__*/ jsx(StageNode, {
-                    ...props,
-                    ...props.data
-                });
             const initialNodes = context.parameters?.nodes || [
                 {
                     id: '1',
@@ -42,51 +88,9 @@ const meta = {
                 }
             ];
             const initialEdges = context.parameters?.edges || [];
-            const [nodes, _setNodes, onNodesChange] = useNodesState(initialNodes);
-            const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges);
-            const onConnect = useCallback((connection)=>{
-                setEdges((eds)=>addEdge(connection, eds));
-            }, [
-                setEdges
-            ]);
-            const nodeTypes = useMemo(()=>({
-                    stage: StageNodeWrapper
-                }), [
-                StageNodeWrapper
-            ]);
-            const edgeTypes = useMemo(()=>({
-                    stage: StageEdge
-                }), []);
-            const defaultEdgeOptions = useMemo(()=>({
-                    type: 'stage'
-                }), []);
-            return /*#__PURE__*/ jsx("div", {
-                style: {
-                    width: '100vw',
-                    height: '100vh'
-                },
-                children: /*#__PURE__*/ jsx(ReactFlowProvider, {
-                    children: /*#__PURE__*/ jsx(BaseCanvas, {
-                        nodes: nodes,
-                        edges: edges,
-                        onNodesChange: onNodesChange,
-                        onEdgesChange: onEdgesChange,
-                        onConnect: onConnect,
-                        nodeTypes: nodeTypes,
-                        edgeTypes: edgeTypes,
-                        mode: "design",
-                        connectionMode: ConnectionMode.Strict,
-                        defaultEdgeOptions: defaultEdgeOptions,
-                        connectionLineComponent: StageConnectionEdge,
-                        elevateEdgesOnSelect: true,
-                        children: /*#__PURE__*/ jsx(Panel, {
-                            position: "bottom-right",
-                            children: /*#__PURE__*/ jsx(CanvasPositionControls, {
-                                translations: DefaultCanvasTranslations
-                            })
-                        })
-                    })
-                })
+            return /*#__PURE__*/ jsx(DefaultCanvasDecorator, {
+                initialNodes: initialNodes,
+                initialEdges: initialEdges
             });
         }
     ],
@@ -1273,17 +1277,9 @@ const initialTasks = [
     ]
 ];
 const DraggableTaskReorderingStory = ()=>{
-    const StageNodeWrapper = useMemo(()=>function(props) {
-            return /*#__PURE__*/ jsx(StageNode, {
-                ...props,
-                ...props.data
-            });
-        }, []);
     const nodeTypes = useMemo(()=>({
             stage: StageNodeWrapper
-        }), [
-        StageNodeWrapper
-    ]);
+        }), []);
     const edgeTypes = useMemo(()=>({
             stage: StageEdge
         }), []);
@@ -1452,17 +1448,9 @@ const availableTaskOptions = [
     }
 ];
 const AddAndReplaceTasksStory = ()=>{
-    const StageNodeWrapper = useMemo(()=>function(props) {
-            return /*#__PURE__*/ jsx(StageNode, {
-                ...props,
-                ...props.data
-            });
-        }, []);
     const nodeTypes = useMemo(()=>({
             stage: StageNodeWrapper
-        }), [
-        StageNodeWrapper
-    ]);
+        }), []);
     const edgeTypes = useMemo(()=>({
             stage: StageEdge
         }), []);
@@ -1703,20 +1691,25 @@ const AddAndReplaceTasks = {
     args: {}
 };
 const InlineTitleEditStory = ()=>{
-    const StageNodeWrapper = useMemo(()=>function(props) {
-            return /*#__PURE__*/ jsx(StageNode, {
-                ...props,
-                ...props.data
-            });
-        }, []);
     const nodeTypes = useMemo(()=>({
             stage: StageNodeWrapper
-        }), [
-        StageNodeWrapper
-    ]);
+        }), []);
     const edgeTypes = useMemo(()=>({
             stage: StageEdge
         }), []);
+    const setNodesRef = useRef(null);
+    const createTitleChangeHandler = useCallback((nodeId)=>(newTitle)=>{
+            setNodesRef.current((nds)=>nds.map((node)=>node.id === nodeId ? {
+                        ...node,
+                        data: {
+                            ...node.data,
+                            stageDetails: {
+                                ...node.data.stageDetails,
+                                label: newTitle
+                            }
+                        }
+                    } : node));
+        }, []);
     const initialNodes = useMemo(()=>[
             {
                 id: 'editable-stage',
@@ -1748,7 +1741,8 @@ const InlineTitleEditStory = ()=>{
                     },
                     onTaskAdd: ()=>{
                         window.alert('Add task functionality - this would open a dialog to add a new task');
-                    }
+                    },
+                    onStageTitleChange: createTitleChangeHandler('editable-stage')
                 }
             },
             {
@@ -1774,36 +1768,16 @@ const InlineTitleEditStory = ()=>{
                     },
                     onTaskAdd: ()=>{
                         window.alert('Add task functionality - this would open a dialog to add a new task');
-                    }
+                    },
+                    onStageTitleChange: createTitleChangeHandler('long-title-stage')
                 }
             }
-        ], []);
-    const [nodes, setNodes, onNodesChange] = useNodesState(initialNodes);
-    const [edges, setEdges, onEdgesChange] = useEdgesState([]);
-    const createTitleChangeHandler = useCallback((nodeId)=>(newTitle)=>{
-            setNodes((nds)=>nds.map((node)=>node.id === nodeId ? {
-                        ...node,
-                        data: {
-                            ...node.data,
-                            stageDetails: {
-                                ...node.data.stageDetails,
-                                label: newTitle
-                            }
-                        }
-                    } : node));
-        }, [
-        setNodes
-    ]);
-    const nodesWithHandlers = useMemo(()=>nodes.map((node)=>({
-                ...node,
-                data: {
-                    ...node.data,
-                    onStageTitleChange: createTitleChangeHandler(node.id)
-                }
-            })), [
-        nodes,
+        ], [
         createTitleChangeHandler
     ]);
+    const [nodes, setNodes, onNodesChange] = useNodesState(initialNodes);
+    setNodesRef.current = setNodes;
+    const [edges, setEdges, onEdgesChange] = useEdgesState([]);
     const onConnect = useCallback((connection)=>setEdges((eds)=>addEdge(connection, eds)), [
         setEdges
     ]);
@@ -1814,7 +1788,7 @@ const InlineTitleEditStory = ()=>{
         },
         children: /*#__PURE__*/ jsx(ReactFlowProvider, {
             children: /*#__PURE__*/ jsx(BaseCanvas, {
-                nodes: nodesWithHandlers,
+                nodes: nodes,
                 edges: edges,
                 onNodesChange: onNodesChange,
                 onEdgesChange: onEdgesChange,
@@ -1905,20 +1879,33 @@ const loadedTaskOptionsWithChildren = [
     }
 ];
 const AddTaskLoadingStory = ()=>{
-    const StageNodeWrapper = useMemo(()=>function(props) {
-            return /*#__PURE__*/ jsx(StageNode, {
-                ...props,
-                ...props.data
-            });
-        }, []);
     const nodeTypes = useMemo(()=>({
             stage: StageNodeWrapper
-        }), [
-        StageNodeWrapper
-    ]);
+        }), []);
     const edgeTypes = useMemo(()=>({
             stage: StageEdge
         }), []);
+    const setNodesRef = useRef(null);
+    const timeoutRef = useRef(void 0);
+    const handleAddTaskFromToolbox = useCallback((nodeId, _taskItem)=>{
+        clearTimeout(timeoutRef.current);
+        setNodesRef.current((nds)=>nds.map((n)=>n.id === nodeId ? {
+                    ...n,
+                    data: {
+                        ...n.data,
+                        addTaskLoading: true
+                    }
+                } : n));
+        timeoutRef.current = setTimeout(()=>{
+            setNodesRef.current((nds)=>nds.map((n)=>n.id === nodeId ? {
+                        ...n,
+                        data: {
+                            ...n.data,
+                            addTaskLoading: false
+                        }
+                    } : n));
+        }, 2000);
+    }, []);
     const initialNodes = useMemo(()=>[
             {
                 id: 'loading-stage-empty',
@@ -1934,7 +1921,10 @@ const AddTaskLoadingStory = ()=>{
                         tasks: []
                     },
                     addTaskLoading: true,
-                    taskOptions: []
+                    taskOptions: [],
+                    onAddTaskFromToolbox: (taskItem)=>{
+                        handleAddTaskFromToolbox('loading-stage-empty', taskItem);
+                    }
                 }
             },
             {
@@ -1959,11 +1949,17 @@ const AddTaskLoadingStory = ()=>{
                         ]
                     },
                     addTaskLoading: false,
-                    taskOptions: loadedTaskOptionsWithChildren
+                    taskOptions: loadedTaskOptionsWithChildren,
+                    onAddTaskFromToolbox: (taskItem)=>{
+                        handleAddTaskFromToolbox('loading-stage-children', taskItem);
+                    }
                 }
             }
-        ], []);
-    const [nodesState, setNodes, onNodesChange] = useNodesState(initialNodes);
+        ], [
+        handleAddTaskFromToolbox
+    ]);
+    const [nodes, setNodes, onNodesChange] = useNodesState(initialNodes);
+    setNodesRef.current = setNodes;
     const [edges, setEdges, onEdgesChange] = useEdgesState([]);
     useEffect(()=>{
         const timeout = setTimeout(()=>{
@@ -1980,41 +1976,7 @@ const AddTaskLoadingStory = ()=>{
     }, [
         setNodes
     ]);
-    const timeoutRef = useRef(void 0);
     useEffect(()=>()=>clearTimeout(timeoutRef.current), []);
-    const handleAddTaskFromToolbox = useCallback((nodeId, _taskItem)=>{
-        clearTimeout(timeoutRef.current);
-        setNodes((nds)=>nds.map((n)=>n.id === nodeId ? {
-                    ...n,
-                    data: {
-                        ...n.data,
-                        addTaskLoading: true
-                    }
-                } : n));
-        timeoutRef.current = setTimeout(()=>{
-            setNodes((nds)=>nds.map((n)=>n.id === nodeId ? {
-                        ...n,
-                        data: {
-                            ...n.data,
-                            addTaskLoading: false
-                        }
-                    } : n));
-        }, 2000);
-    }, [
-        setNodes
-    ]);
-    const nodesWithHandler = useMemo(()=>nodesState.map((node)=>({
-                ...node,
-                data: {
-                    ...node.data,
-                    onAddTaskFromToolbox: (taskItem)=>{
-                        handleAddTaskFromToolbox(node.id, taskItem);
-                    }
-                }
-            })), [
-        nodesState,
-        handleAddTaskFromToolbox
-    ]);
     const onConnect = useCallback((connection)=>setEdges((eds)=>addEdge(connection, eds)), [
         setEdges
     ]);
@@ -2025,7 +1987,7 @@ const AddTaskLoadingStory = ()=>{
         },
         children: /*#__PURE__*/ jsx(ReactFlowProvider, {
             children: /*#__PURE__*/ jsx(BaseCanvas, {
-                nodes: nodesWithHandler,
+                nodes: nodes,
                 edges: edges,
                 onNodesChange: onNodesChange,
                 onEdgesChange: onEdgesChange,

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

@@ -41,10 +41,11 @@ var apollo_core_default = /*#__PURE__*/ __webpack_require__.n(apollo_core_namesp
 const index_cjs_namespaceObject = require("../../../material/index.cjs");
 const external_react_namespaceObject = require("react");
 const external_StageNodeTaskUtilities_cjs_namespaceObject = require("./StageNodeTaskUtilities.cjs");
-const TaskMenuComponent = ({ taskId, contextMenuItems, onMenuOpenChange, onMenuOpen, taskRef }, ref)=>{
+const TaskMenuComponent = ({ taskId, getContextMenuItems, onMenuOpenChange, onMenuOpen, taskRef }, ref)=>{
     const [isMenuOpen, setIsMenuOpen] = (0, external_react_namespaceObject.useState)(false);
     const [anchorElement, setAnchorElement] = (0, external_react_namespaceObject.useState)(null);
     const menuAnchorRef = (0, external_react_namespaceObject.useRef)(null);
+    const [menuItems, setMenuItems] = (0, external_react_namespaceObject.useState)([]);
     const handleMenuClose = (0, external_react_namespaceObject.useCallback)(()=>{
         setIsMenuOpen(false);
         setAnchorElement(null);
@@ -52,12 +53,21 @@ const TaskMenuComponent = ({ taskId, contextMenuItems, onMenuOpenChange, onMenuO
     }, [
         onMenuOpenChange
     ]);
+    const handleMenuItemClick = (0, external_react_namespaceObject.useCallback)((item)=>{
+        item.onClick();
+        handleMenuClose();
+    }, [
+        handleMenuClose
+    ]);
     const openMenu = (0, external_react_namespaceObject.useCallback)((anchor)=>{
         setAnchorElement(anchor);
         setIsMenuOpen(true);
+        setMenuItems((0, external_StageNodeTaskUtilities_cjs_namespaceObject.transformMenuItems)(getContextMenuItems(), handleMenuItemClick));
         onMenuOpen?.();
         onMenuOpenChange?.(true);
     }, [
+        getContextMenuItems,
+        handleMenuItemClick,
         onMenuOpen,
         onMenuOpenChange
     ]);
@@ -86,16 +96,6 @@ const TaskMenuComponent = ({ taskId, contextMenuItems, onMenuOpenChange, onMenuO
     const handleMenuMouseDown = (0, external_react_namespaceObject.useCallback)((e)=>{
         e.stopPropagation();
     }, []);
-    const handleMenuItemClick = (0, external_react_namespaceObject.useCallback)((item)=>{
-        item.onClick();
-        handleMenuClose();
-    }, [
-        handleMenuClose
-    ]);
-    const transformedMenuItems = (0, external_react_namespaceObject.useMemo)(()=>(0, external_StageNodeTaskUtilities_cjs_namespaceObject.transformMenuItems)(contextMenuItems, handleMenuItemClick), [
-        contextMenuItems,
-        handleMenuItemClick
-    ]);
     return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(jsx_runtime_namespaceObject.Fragment, {
         children: [
             /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(index_cjs_namespaceObject.ApIconButton, {
@@ -118,7 +118,7 @@ const TaskMenuComponent = ({ taskId, contextMenuItems, onMenuOpenChange, onMenuO
             }),
             /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(index_cjs_namespaceObject.ApMenu, {
                 isOpen: isMenuOpen,
-                menuItems: transformedMenuItems,
+                menuItems: menuItems,
                 anchorEl: anchorElement,
                 onClose: handleMenuClose,
                 anchorOrigin: {

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

@@ -4,7 +4,7 @@ export interface TaskMenuHandle {
 }
 interface TaskMenuProps {
     taskId: string;
-    contextMenuItems: NodeMenuItem[];
+    getContextMenuItems: () => NodeMenuItem[];
     onMenuOpenChange?: (isOpen: boolean) => void;
     onMenuOpen?: () => void;
     taskRef?: React.RefObject<HTMLElement | null>;

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

@@ -1 +1 @@
-{"version":3,"file":"TaskMenu.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/StageNode/TaskMenu.tsx"],"names":[],"mappings":"AAWA,OAAO,KAAK,EAAkB,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAIvE,MAAM,WAAW,cAAc;IAC7B,iBAAiB,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;CAC/D;AAED,UAAU,aAAa;IACrB,MAAM,EAAE,MAAM,CAAC;IACf,gBAAgB,EAAE,YAAY,EAAE,CAAC;IACjC,gBAAgB,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IAC7C,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;IACxB,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;CAC/C;AAqHD,eAAO,MAAM,QAAQ,qGAAsC,CAAC"}
+{"version":3,"file":"TaskMenu.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/StageNode/TaskMenu.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAkB,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAGvE,MAAM,WAAW,cAAc;IAC7B,iBAAiB,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;CAC/D;AAED,UAAU,aAAa;IACrB,MAAM,EAAE,MAAM,CAAC;IACf,mBAAmB,EAAE,MAAM,YAAY,EAAE,CAAC;IAC1C,gBAAgB,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IAC7C,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;IACxB,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;CAC/C;AAoHD,eAAO,MAAM,QAAQ,qGAAsC,CAAC"}

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

@@ -1,12 +1,13 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import apollo_core, { Spacing } from "@uipath/apollo-core";
 import { ApIcon, ApIconButton, ApMenu } from "../../../material/index.js";
-import { forwardRef, memo, useCallback, useImperativeHandle, useMemo, useRef, useState } from "react";
+import { forwardRef, memo, useCallback, useImperativeHandle, useRef, useState } from "react";
 import { transformMenuItems } from "./StageNodeTaskUtilities.js";
-const TaskMenuComponent = ({ taskId, contextMenuItems, onMenuOpenChange, onMenuOpen, taskRef }, ref)=>{
+const TaskMenuComponent = ({ taskId, getContextMenuItems, onMenuOpenChange, onMenuOpen, taskRef }, ref)=>{
     const [isMenuOpen, setIsMenuOpen] = useState(false);
     const [anchorElement, setAnchorElement] = useState(null);
     const menuAnchorRef = useRef(null);
+    const [menuItems, setMenuItems] = useState([]);
     const handleMenuClose = useCallback(()=>{
         setIsMenuOpen(false);
         setAnchorElement(null);
@@ -14,12 +15,21 @@ const TaskMenuComponent = ({ taskId, contextMenuItems, onMenuOpenChange, onMenuO
     }, [
         onMenuOpenChange
     ]);
+    const handleMenuItemClick = useCallback((item)=>{
+        item.onClick();
+        handleMenuClose();
+    }, [
+        handleMenuClose
+    ]);
     const openMenu = useCallback((anchor)=>{
         setAnchorElement(anchor);
         setIsMenuOpen(true);
+        setMenuItems(transformMenuItems(getContextMenuItems(), handleMenuItemClick));
         onMenuOpen?.();
         onMenuOpenChange?.(true);
     }, [
+        getContextMenuItems,
+        handleMenuItemClick,
         onMenuOpen,
         onMenuOpenChange
     ]);
@@ -48,16 +58,6 @@ const TaskMenuComponent = ({ taskId, contextMenuItems, onMenuOpenChange, onMenuO
     const handleMenuMouseDown = useCallback((e)=>{
         e.stopPropagation();
     }, []);
-    const handleMenuItemClick = useCallback((item)=>{
-        item.onClick();
-        handleMenuClose();
-    }, [
-        handleMenuClose
-    ]);
-    const transformedMenuItems = useMemo(()=>transformMenuItems(contextMenuItems, handleMenuItemClick), [
-        contextMenuItems,
-        handleMenuItemClick
-    ]);
     return /*#__PURE__*/ jsxs(Fragment, {
         children: [
             /*#__PURE__*/ jsx(ApIconButton, {
@@ -80,7 +80,7 @@ const TaskMenuComponent = ({ taskId, contextMenuItems, onMenuOpenChange, onMenuO
             }),
             /*#__PURE__*/ jsx(ApMenu, {
                 isOpen: isMenuOpen,
-                menuItems: transformedMenuItems,
+                menuItems: menuItems,
                 anchorEl: anchorElement,
                 onClose: handleMenuClose,
                 anchorOrigin: {

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

@@ -56,7 +56,7 @@ const TASK_ICON_GRADIENTS = {
     [external_TaskIcon_types_cjs_namespaceObject.TaskItemTypeValues.Connector]: TaskIcon_styles_CategoryColor.Grey,
     [external_TaskIcon_types_cjs_namespaceObject.TaskItemTypeValues.ExternalAgent]: TaskIcon_styles_CategoryColor.Purple,
     [external_TaskIcon_types_cjs_namespaceObject.TaskItemTypeValues.Timer]: TaskIcon_styles_CategoryColor.Grey,
-    [external_TaskIcon_types_cjs_namespaceObject.TaskItemTypeValues.CaseManagement]: TaskIcon_styles_CategoryColor.Grey
+    [external_TaskIcon_types_cjs_namespaceObject.TaskItemTypeValues.CaseManagement]: TaskIcon_styles_CategoryColor.Purple
 };
 const TaskIconContainer = styled_default().div`
   display: flex;

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

@@ -16,7 +16,7 @@ const TASK_ICON_GRADIENTS = {
     [TaskItemTypeValues.Connector]: TaskIcon_styles_CategoryColor.Grey,
     [TaskItemTypeValues.ExternalAgent]: TaskIcon_styles_CategoryColor.Purple,
     [TaskItemTypeValues.Timer]: TaskIcon_styles_CategoryColor.Grey,
-    [TaskItemTypeValues.CaseManagement]: TaskIcon_styles_CategoryColor.Grey
+    [TaskItemTypeValues.CaseManagement]: TaskIcon_styles_CategoryColor.Purple
 };
 const TaskIconContainer = styled.div`
   display: flex;

package/dist/canvas/icons/CaseManagementProject.cjs

@@ -33,31 +33,22 @@ const CaseManagementProject = ({ w = 22, h = 22 })=>/*#__PURE__*/ (0, jsx_runtim
         width: w,
         height: h,
         fill: "none",
-        viewBox: "0 0 16 16",
+        viewBox: "0 0 24 24",
         children: [
             /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("path", {
-                fill: "currentColor",
-                fillRule: "evenodd",
-                clipRule: "evenodd",
-                d: "M1.09 3.818 3.075 1.53c.242-.279.593-.44.962-.44h7.928c.37 0 .72.161.962.44l1.983 2.288v9.818c0 .703-.57 1.273-1.273 1.273H2.364c-.703 0-1.273-.57-1.273-1.273zm2.946-1.636h7.928c.053 0 .103.023.138.063l.89 1.028H3.008l.891-1.028a.18.18 0 0 1 .138-.063m9.782 2.182H2.182v9.272c0 .1.081.182.182.182h11.272c.1 0 .182-.081.182-.182z"
-            }),
-            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("path", {
-                fill: "currentColor",
-                d: "M4.833 12.45a.83.83 0 0 1-.588-.23.73.73 0 0 1-.245-.554V7.353q0-.324.245-.554a.83.83 0 0 1 .588-.23H6.5v-.785q0-.323.245-.554A.83.83 0 0 1 7.333 5H9q.344 0 .589.23a.73.73 0 0 1 .244.554v.784H11.5q.344 0 .588.23a.73.73 0 0 1 .245.555v4.313q0 .323-.245.554a.83.83 0 0 1-.588.23zm0-.784H11.5V7.353H4.833zm2.5-5.098H9v-.784H7.333z"
+                d: "M16.466 7.5C15.643 4.237 13.952 2 12 2C9.239 2 7 6.477 7 12C7 17.523 9.239 22 12 22C12.342 22 12.677 21.931 13 21.8",
+                stroke: "currentColor",
+                "stroke-width": "2",
+                "stroke-linecap": "round",
+                "stroke-linejoin": "round"
             }),
             /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("path", {
                 fill: "currentColor",
-                d: "M4.417 8.529h7.5v.784h-7.5z"
+                d: "M12 6C14.5294 6 16.8808 6.44759 18.749 7.21973C20.5787 7.976 22.115 9.11858 22.7266 10.624C22.9341 11.1355 22.6881 11.7189 22.1768 11.9268C21.6651 12.1346 21.0809 11.8877 20.873 11.376C20.5574 10.5996 19.6129 9.74145 17.9844 9.06836C16.3939 8.41106 14.3085 8 12 8C9.36011 8 7.01949 8.53756 5.37598 9.35938C3.67279 10.2111 3 11.2024 3 12C3 12.7976 3.67279 13.7889 5.37598 14.6406C7.01949 15.4624 9.36011 16 12 16C12.6959 16 13.3706 15.9607 14.0176 15.8906C14.0783 16.5962 14.3009 17.2553 14.6494 17.8301C13.7983 17.9406 12.9105 18 12 18C9.11689 18 6.45718 17.4176 4.48145 16.4297C2.56565 15.4717 1 13.9633 1 12C1 10.0367 2.56565 8.52833 4.48145 7.57031C6.45718 6.58238 9.11689 6 12 6Z"
             }),
             /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("path", {
-                stroke: "currentColor",
-                strokeWidth: ".15",
-                d: "M4.833 12.45a.83.83 0 0 1-.588-.23.73.73 0 0 1-.245-.554V7.353q0-.324.245-.554a.83.83 0 0 1 .588-.23H6.5v-.785q0-.323.245-.554A.83.83 0 0 1 7.333 5H9q.344 0 .589.23a.73.73 0 0 1 .244.554v.784H11.5q.344 0 .588.23a.73.73 0 0 1 .245.555v4.313q0 .323-.245.554a.83.83 0 0 1-.588.23zm0-.784H11.5V7.353H4.833zm2.5-5.098H9v-.784H7.333z"
-            }),
-            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("path", {
-                stroke: "currentColor",
-                strokeWidth: ".15",
-                d: "M4.417 8.529h7.5v.784h-7.5z"
+                fill: "var(--color-primary)",
+                d: "M17.8761 12.4344C18.0904 11.8552 18.9096 11.8552 19.1239 12.4344L19.7834 14.2166L21.5656 14.8761C22.1448 15.0904 22.1448 15.9096 21.5656 16.1239L19.7834 16.7834L19.1239 18.5656C18.9096 19.1448 18.0904 19.1448 17.8761 18.5656L17.2166 16.7834L15.4344 16.1239C14.8552 15.9096 14.8552 15.0904 15.4344 14.8761L17.2166 14.2166L17.8761 12.4344Z"
             })
         ]
     });

package/dist/canvas/icons/CaseManagementProject.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CaseManagementProject.d.ts","sourceRoot":"","sources":["../../../src/canvas/icons/CaseManagementProject.tsx"],"names":[],"mappings":"AAAA,eAAO,MAAM,qBAAqB,GAAI,WAGnC;IACD,CAAC,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACpB,CAAC,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CACrB,4CA2BA,CAAC"}
+{"version":3,"file":"CaseManagementProject.d.ts","sourceRoot":"","sources":["../../../src/canvas/icons/CaseManagementProject.tsx"],"names":[],"mappings":"AAAA,eAAO,MAAM,qBAAqB,GAAI,WAGnC;IACD,CAAC,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACpB,CAAC,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CACrB,4CAyBA,CAAC"}

package/dist/canvas/icons/CaseManagementProject.js

@@ -5,31 +5,22 @@ const CaseManagementProject = ({ w = 22, h = 22 })=>/*#__PURE__*/ jsxs("svg", {
         width: w,
         height: h,
         fill: "none",
-        viewBox: "0 0 16 16",
+        viewBox: "0 0 24 24",
         children: [
             /*#__PURE__*/ jsx("path", {
-                fill: "currentColor",
-                fillRule: "evenodd",
-                clipRule: "evenodd",
-                d: "M1.09 3.818 3.075 1.53c.242-.279.593-.44.962-.44h7.928c.37 0 .72.161.962.44l1.983 2.288v9.818c0 .703-.57 1.273-1.273 1.273H2.364c-.703 0-1.273-.57-1.273-1.273zm2.946-1.636h7.928c.053 0 .103.023.138.063l.89 1.028H3.008l.891-1.028a.18.18 0 0 1 .138-.063m9.782 2.182H2.182v9.272c0 .1.081.182.182.182h11.272c.1 0 .182-.081.182-.182z"
-            }),
-            /*#__PURE__*/ jsx("path", {
-                fill: "currentColor",
-                d: "M4.833 12.45a.83.83 0 0 1-.588-.23.73.73 0 0 1-.245-.554V7.353q0-.324.245-.554a.83.83 0 0 1 .588-.23H6.5v-.785q0-.323.245-.554A.83.83 0 0 1 7.333 5H9q.344 0 .589.23a.73.73 0 0 1 .244.554v.784H11.5q.344 0 .588.23a.73.73 0 0 1 .245.555v4.313q0 .323-.245.554a.83.83 0 0 1-.588.23zm0-.784H11.5V7.353H4.833zm2.5-5.098H9v-.784H7.333z"
+                d: "M16.466 7.5C15.643 4.237 13.952 2 12 2C9.239 2 7 6.477 7 12C7 17.523 9.239 22 12 22C12.342 22 12.677 21.931 13 21.8",
+                stroke: "currentColor",
+                "stroke-width": "2",
+                "stroke-linecap": "round",
+                "stroke-linejoin": "round"
             }),
             /*#__PURE__*/ jsx("path", {
                 fill: "currentColor",
-                d: "M4.417 8.529h7.5v.784h-7.5z"
+                d: "M12 6C14.5294 6 16.8808 6.44759 18.749 7.21973C20.5787 7.976 22.115 9.11858 22.7266 10.624C22.9341 11.1355 22.6881 11.7189 22.1768 11.9268C21.6651 12.1346 21.0809 11.8877 20.873 11.376C20.5574 10.5996 19.6129 9.74145 17.9844 9.06836C16.3939 8.41106 14.3085 8 12 8C9.36011 8 7.01949 8.53756 5.37598 9.35938C3.67279 10.2111 3 11.2024 3 12C3 12.7976 3.67279 13.7889 5.37598 14.6406C7.01949 15.4624 9.36011 16 12 16C12.6959 16 13.3706 15.9607 14.0176 15.8906C14.0783 16.5962 14.3009 17.2553 14.6494 17.8301C13.7983 17.9406 12.9105 18 12 18C9.11689 18 6.45718 17.4176 4.48145 16.4297C2.56565 15.4717 1 13.9633 1 12C1 10.0367 2.56565 8.52833 4.48145 7.57031C6.45718 6.58238 9.11689 6 12 6Z"
             }),
             /*#__PURE__*/ jsx("path", {
-                stroke: "currentColor",
-                strokeWidth: ".15",
-                d: "M4.833 12.45a.83.83 0 0 1-.588-.23.73.73 0 0 1-.245-.554V7.353q0-.324.245-.554a.83.83 0 0 1 .588-.23H6.5v-.785q0-.323.245-.554A.83.83 0 0 1 7.333 5H9q.344 0 .589.23a.73.73 0 0 1 .244.554v.784H11.5q.344 0 .588.23a.73.73 0 0 1 .245.555v4.313q0 .323-.245.554a.83.83 0 0 1-.588.23zm0-.784H11.5V7.353H4.833zm2.5-5.098H9v-.784H7.333z"
-            }),
-            /*#__PURE__*/ jsx("path", {
-                stroke: "currentColor",
-                strokeWidth: ".15",
-                d: "M4.417 8.529h7.5v.784h-7.5z"
+                fill: "var(--color-primary)",
+                d: "M17.8761 12.4344C18.0904 11.8552 18.9096 11.8552 19.1239 12.4344L19.7834 14.2166L21.5656 14.8761C22.1448 15.0904 22.1448 15.9096 21.5656 16.1239L19.7834 16.7834L19.1239 18.5656C18.9096 19.1448 18.0904 19.1448 17.8761 18.5656L17.2166 16.7834L15.4344 16.1239C14.8552 15.9096 14.8552 15.0904 15.4344 14.8761L17.2166 14.2166L17.8761 12.4344Z"
             })
         ]
     });

package/package.json

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