@uipath/apollo-react 3.60.2 → 3.60.4

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

@@ -420,10 +420,14 @@ const StageNodeComponent = (props)=>{
                             /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(index_cjs_namespaceObject.Row, {
                                 gap: apollo_core_namespaceObject.Spacing.SpacingMicro,
                                 align: "center",
+                                flex: 1,
+                                minW: 0,
                                 children: [
                                     icon,
                                     /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(index_cjs_namespaceObject.Column, {
                                         py: 2,
+                                        flex: 1,
+                                        minW: 0,
                                         children: [
                                             /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_material_index_cjs_namespaceObject.ApTypography, {
                                                 variant: isStageTitleEditing ? apollo_core_namespaceObject.FontVariantToken.fontSizeM : apollo_core_namespaceObject.FontVariantToken.fontSizeMBold,

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

@@ -392,10 +392,14 @@ const StageNodeComponent = (props)=>{
                             /*#__PURE__*/ jsxs(Row, {
                                 gap: Spacing.SpacingMicro,
                                 align: "center",
+                                flex: 1,
+                                minW: 0,
                                 children: [
                                     icon,
                                     /*#__PURE__*/ jsxs(Column, {
                                         py: 2,
+                                        flex: 1,
+                                        minW: 0,
                                         children: [
                                             /*#__PURE__*/ jsx(ApTypography, {
                                                 variant: isStageTitleEditing ? FontVariantToken.fontSizeM : FontVariantToken.fontSizeMBold,

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

@@ -29,6 +29,7 @@ __webpack_require__.d(__webpack_exports__, {
     LoanProcessingWorkflow: ()=>LoanProcessingWorkflow,
     InteractiveTaskManagement: ()=>InteractiveTaskManagement,
     AddTaskLoading: ()=>AddTaskLoading,
+    EditableStageTitle: ()=>EditableStageTitle,
     WithTaskIcons: ()=>WithTaskIcons,
     Default: ()=>Default,
     ExecutionStatus: ()=>ExecutionStatus,
@@ -1738,6 +1739,155 @@ const AddAndReplaceTasks = {
     render: ()=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(AddAndReplaceTasksStory, {}),
     args: {}
 };
+const InlineTitleEditStory = ()=>{
+    const StageNodeWrapper = (0, external_react_namespaceObject.useMemo)(()=>function(props) {
+            return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_StageNode_cjs_namespaceObject.StageNode, {
+                ...props,
+                ...props.data
+            });
+        }, []);
+    const nodeTypes = (0, external_react_namespaceObject.useMemo)(()=>({
+            stage: StageNodeWrapper
+        }), [
+        StageNodeWrapper
+    ]);
+    const edgeTypes = (0, external_react_namespaceObject.useMemo)(()=>({
+            stage: external_StageEdge_cjs_namespaceObject.StageEdge
+        }), []);
+    const initialNodes = (0, external_react_namespaceObject.useMemo)(()=>[
+            {
+                id: 'editable-stage',
+                type: 'stage',
+                position: {
+                    x: 48,
+                    y: 96
+                },
+                width: 304,
+                data: {
+                    stageDetails: {
+                        label: 'Click to Edit Title',
+                        tasks: [
+                            [
+                                {
+                                    id: '1',
+                                    label: 'KYC Verification',
+                                    icon: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(VerificationIcon, {})
+                                }
+                            ],
+                            [
+                                {
+                                    id: '2',
+                                    label: 'Document Review',
+                                    icon: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(DocumentIcon, {})
+                                }
+                            ]
+                        ]
+                    },
+                    onTaskAdd: ()=>{
+                        window.alert('Add task functionality - this would open a dialog to add a new task');
+                    }
+                }
+            },
+            {
+                id: 'long-title-stage',
+                type: 'stage',
+                position: {
+                    x: 400,
+                    y: 96
+                },
+                width: 304,
+                data: {
+                    stageDetails: {
+                        label: 'A Very Long Stage Title That Should Truncate With Ellipsis',
+                        tasks: [
+                            [
+                                {
+                                    id: '1',
+                                    label: 'Processing Task',
+                                    icon: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(ProcessIcon, {})
+                                }
+                            ]
+                        ]
+                    },
+                    onTaskAdd: ()=>{
+                        window.alert('Add task functionality - this would open a dialog to add a new task');
+                    }
+                }
+            }
+        ], []);
+    const [nodes, setNodes, onNodesChange] = (0, react_cjs_namespaceObject.useNodesState)(initialNodes);
+    const [edges, setEdges, onEdgesChange] = (0, react_cjs_namespaceObject.useEdgesState)([]);
+    const createTitleChangeHandler = (0, external_react_namespaceObject.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 = (0, external_react_namespaceObject.useMemo)(()=>nodes.map((node)=>({
+                ...node,
+                data: {
+                    ...node.data,
+                    onStageTitleChange: createTitleChangeHandler(node.id)
+                }
+            })), [
+        nodes,
+        createTitleChangeHandler
+    ]);
+    const onConnect = (0, external_react_namespaceObject.useCallback)((connection)=>setEdges((eds)=>(0, react_cjs_namespaceObject.addEdge)(connection, eds)), [
+        setEdges
+    ]);
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+        style: {
+            width: '100vw',
+            height: '100vh'
+        },
+        children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(react_cjs_namespaceObject.ReactFlowProvider, {
+            children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_BaseCanvas_index_cjs_namespaceObject.BaseCanvas, {
+                nodes: nodesWithHandlers,
+                edges: edges,
+                onNodesChange: onNodesChange,
+                onEdgesChange: onEdgesChange,
+                onConnect: onConnect,
+                nodeTypes: nodeTypes,
+                edgeTypes: edgeTypes,
+                mode: "design",
+                connectionMode: react_cjs_namespaceObject.ConnectionMode.Strict,
+                defaultEdgeOptions: {
+                    type: 'stage'
+                },
+                connectionLineComponent: external_StageConnectionEdge_cjs_namespaceObject.StageConnectionEdge,
+                elevateEdgesOnSelect: true,
+                defaultViewport: {
+                    x: 0,
+                    y: 0,
+                    zoom: 1.5
+                },
+                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 EditableStageTitle = {
+    name: 'Editable Stage Title',
+    parameters: {
+        useCustomRender: true
+    },
+    render: ()=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(InlineTitleEditStory, {}),
+    args: {}
+};
 const fetchChildren = (id)=>new Promise((resolve)=>{
         setTimeout(()=>{
             resolve([
@@ -1929,6 +2079,7 @@ exports.AddAndReplaceTasks = __webpack_exports__.AddAndReplaceTasks;
 exports.AddTaskLoading = __webpack_exports__.AddTaskLoading;
 exports.Default = __webpack_exports__.Default;
 exports.DraggableTaskReordering = __webpack_exports__.DraggableTaskReordering;
+exports.EditableStageTitle = __webpack_exports__.EditableStageTitle;
 exports.ExecutionStatus = __webpack_exports__.ExecutionStatus;
 exports.InteractiveTaskManagement = __webpack_exports__.InteractiveTaskManagement;
 exports.LoanProcessingWorkflow = __webpack_exports__.LoanProcessingWorkflow;
@@ -1939,6 +2090,7 @@ for(var __rspack_i in __webpack_exports__)if (-1 === [
     "AddTaskLoading",
     "Default",
     "DraggableTaskReordering",
+    "EditableStageTitle",
     "ExecutionStatus",
     "InteractiveTaskManagement",
     "LoanProcessingWorkflow",

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

@@ -10,5 +10,6 @@ export declare const InteractiveTaskManagement: Story;
 export declare const LoanProcessingWorkflow: Story;
 export declare const DraggableTaskReordering: Story;
 export declare const AddAndReplaceTasks: Story;
+export declare const EditableStageTitle: Story;
 export declare const AddTaskLoading: Story;
 //# sourceMappingURL=StageNode.stories.d.ts.map

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,KAoHrB,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;AAiJF,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,KAoHrB,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;AA2HF,eAAO,MAAM,kBAAkB,EAAE,KAOhC,CAAC;AAiJF,eAAO,MAAM,cAAc,EAAE,KAO5B,CAAC"}

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

@@ -1702,6 +1702,155 @@ const AddAndReplaceTasks = {
     render: ()=>/*#__PURE__*/ jsx(AddAndReplaceTasksStory, {}),
     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 initialNodes = useMemo(()=>[
+            {
+                id: 'editable-stage',
+                type: 'stage',
+                position: {
+                    x: 48,
+                    y: 96
+                },
+                width: 304,
+                data: {
+                    stageDetails: {
+                        label: 'Click to Edit Title',
+                        tasks: [
+                            [
+                                {
+                                    id: '1',
+                                    label: 'KYC Verification',
+                                    icon: /*#__PURE__*/ jsx(VerificationIcon, {})
+                                }
+                            ],
+                            [
+                                {
+                                    id: '2',
+                                    label: 'Document Review',
+                                    icon: /*#__PURE__*/ jsx(DocumentIcon, {})
+                                }
+                            ]
+                        ]
+                    },
+                    onTaskAdd: ()=>{
+                        window.alert('Add task functionality - this would open a dialog to add a new task');
+                    }
+                }
+            },
+            {
+                id: 'long-title-stage',
+                type: 'stage',
+                position: {
+                    x: 400,
+                    y: 96
+                },
+                width: 304,
+                data: {
+                    stageDetails: {
+                        label: 'A Very Long Stage Title That Should Truncate With Ellipsis',
+                        tasks: [
+                            [
+                                {
+                                    id: '1',
+                                    label: 'Processing Task',
+                                    icon: /*#__PURE__*/ jsx(ProcessIcon, {})
+                                }
+                            ]
+                        ]
+                    },
+                    onTaskAdd: ()=>{
+                        window.alert('Add task functionality - this would open a dialog to add a new task');
+                    }
+                }
+            }
+        ], []);
+    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 onConnect = useCallback((connection)=>setEdges((eds)=>addEdge(connection, eds)), [
+        setEdges
+    ]);
+    return /*#__PURE__*/ jsx("div", {
+        style: {
+            width: '100vw',
+            height: '100vh'
+        },
+        children: /*#__PURE__*/ jsx(ReactFlowProvider, {
+            children: /*#__PURE__*/ jsx(BaseCanvas, {
+                nodes: nodesWithHandlers,
+                edges: edges,
+                onNodesChange: onNodesChange,
+                onEdgesChange: onEdgesChange,
+                onConnect: onConnect,
+                nodeTypes: nodeTypes,
+                edgeTypes: edgeTypes,
+                mode: "design",
+                connectionMode: ConnectionMode.Strict,
+                defaultEdgeOptions: {
+                    type: 'stage'
+                },
+                connectionLineComponent: StageConnectionEdge,
+                elevateEdgesOnSelect: true,
+                defaultViewport: {
+                    x: 0,
+                    y: 0,
+                    zoom: 1.5
+                },
+                children: /*#__PURE__*/ jsx(Panel, {
+                    position: "bottom-right",
+                    children: /*#__PURE__*/ jsx(CanvasPositionControls, {
+                        translations: DefaultCanvasTranslations
+                    })
+                })
+            })
+        })
+    });
+};
+const EditableStageTitle = {
+    name: 'Editable Stage Title',
+    parameters: {
+        useCustomRender: true
+    },
+    render: ()=>/*#__PURE__*/ jsx(InlineTitleEditStory, {}),
+    args: {}
+};
 const fetchChildren = (id)=>new Promise((resolve)=>{
         setTimeout(()=>{
             resolve([
@@ -1889,4 +2038,4 @@ const AddTaskLoading = {
     render: ()=>/*#__PURE__*/ jsx(AddTaskLoadingStory, {}),
     args: {}
 };
-export { AddAndReplaceTasks, AddTaskLoading, Default, DraggableTaskReordering, ExecutionStatus, InteractiveTaskManagement, LoanProcessingWorkflow, WithTaskIcons, StageNode_stories as default };
+export { AddAndReplaceTasks, AddTaskLoading, Default, DraggableTaskReordering, EditableStageTitle, ExecutionStatus, InteractiveTaskManagement, LoanProcessingWorkflow, WithTaskIcons, StageNode_stories as default };

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

@@ -112,9 +112,11 @@ const StageHeader = styled_default().div`
   overflow: hidden;
 `;
 const StageTitleContainer = styled_default().div`
-  display: inline-block;
+  display: block;
   border-radius: 4px;
   height: 100%;
+  width: 100%;
+  box-sizing: border-box;
   border: ${(props)=>props.isEditing ? '1px solid var(--uix-canvas-border-de-emp)' : 'none'};
 `;
 const StageTitleInput = styled_default().input`
@@ -126,9 +128,9 @@ const StageTitleInput = styled_default().input`
   background: transparent;
   text-overflow: ellipsis;
   border-radius: 2px;
+  width: 100%;
   min-width: 100px;
-  max-width: 220px;
-  padding: ${(props)=>props.isStageTitleEditable ? 'none' : `${apollo_core_namespaceObject.Padding.PadS} 0px`};
+  padding: ${(props)=>props.isStageTitleEditable ? '0' : `${apollo_core_namespaceObject.Padding.PadS} 0px`};
 
   &:focus {
     outline: none;

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

@@ -1 +1 @@
-{"version":3,"file":"StageNode.styles.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/StageNode/StageNode.styles.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAErD,eAAO,MAAM,iBAAiB,KAAK,CAAC;AACpC,eAAO,MAAM,uBAAuB,KAAK,CAAC;AAC1C,eAAO,MAAM,kBAAkB,IAAI,CAAC;AACpC,eAAO,MAAM,mBAAmB,QAAuD,CAAC;AAExF,eAAO,MAAM,cAAc;;;;eACd,OAAO;aACT,WAAW;YACZ,MAAM;yGAqDf,CAAC;AAEF,eAAO,MAAM,WAAW;;;;kBAA8B,OAAO;yGAS5D,CAAC;AAEF,eAAO,MAAM,mBAAmB;;;;gBAA4B,OAAO;yGAKlE,CAAC;AAEF,eAAO,MAAM,eAAe;;;;gBACd,OAAO;2BACI,OAAO;YACtB,MAAM;kHAsBf,CAAC;AAEF,eAAO,MAAM,YAAY;;;yGAQxB,CAAC;AAEF,eAAO,MAAM,aAAa;;;yGAKzB,CAAC;AAEF,eAAO,MAAM,cAAc;;;;iBAA6B,OAAO;yGAM9D,CAAC;AAEF,eAAO,MAAM,kBAAkB;;;yGAa9B,CAAC;AAEF,eAAO,MAAM,oBAAoB;;;yGAMhC,CAAC;AAEF,eAAO,MAAM,gBAAgB;;;;iBAA6B,OAAO;yGAKhE,CAAC;AAEF,eAAO,MAAM,SAAS;;;;aACX,WAAW;eACT,OAAO;iBACL,OAAO;oBACJ,OAAO;yGA6DxB,CAAC;AAEF,eAAO,MAAM,aAAa;;;yGAYzB,CAAC;AAEF,eAAO,MAAM,sBAAsB;;;;aAAyB,SAAS,GAAG,MAAM,GAAG,OAAO;yGAoBvF,CAAC;AAEF,eAAO,MAAM,+BAA+B;;;yGAG3C,CAAC;AAEF,eAAO,MAAM,wBAAwB;;;;uBAAmC,OAAO;yGAW9E,CAAC"}
+{"version":3,"file":"StageNode.styles.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/StageNode/StageNode.styles.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAErD,eAAO,MAAM,iBAAiB,KAAK,CAAC;AACpC,eAAO,MAAM,uBAAuB,KAAK,CAAC;AAC1C,eAAO,MAAM,kBAAkB,IAAI,CAAC;AACpC,eAAO,MAAM,mBAAmB,QAAuD,CAAC;AAExF,eAAO,MAAM,cAAc;;;;eACd,OAAO;aACT,WAAW;YACZ,MAAM;yGAqDf,CAAC;AAEF,eAAO,MAAM,WAAW;;;;kBAA8B,OAAO;yGAS5D,CAAC;AAEF,eAAO,MAAM,mBAAmB;;;;gBAA4B,OAAO;yGAOlE,CAAC;AAEF,eAAO,MAAM,eAAe;;;;gBACd,OAAO;2BACI,OAAO;YACtB,MAAM;kHAsBf,CAAC;AAEF,eAAO,MAAM,YAAY;;;yGAQxB,CAAC;AAEF,eAAO,MAAM,aAAa;;;yGAKzB,CAAC;AAEF,eAAO,MAAM,cAAc;;;;iBAA6B,OAAO;yGAM9D,CAAC;AAEF,eAAO,MAAM,kBAAkB;;;yGAa9B,CAAC;AAEF,eAAO,MAAM,oBAAoB;;;yGAMhC,CAAC;AAEF,eAAO,MAAM,gBAAgB;;;;iBAA6B,OAAO;yGAKhE,CAAC;AAEF,eAAO,MAAM,SAAS;;;;aACX,WAAW;eACT,OAAO;iBACL,OAAO;oBACJ,OAAO;yGA6DxB,CAAC;AAEF,eAAO,MAAM,aAAa;;;yGAYzB,CAAC;AAEF,eAAO,MAAM,sBAAsB;;;;aAAyB,SAAS,GAAG,MAAM,GAAG,OAAO;yGAoBvF,CAAC;AAEF,eAAO,MAAM,+BAA+B;;;yGAG3C,CAAC;AAEF,eAAO,MAAM,wBAAwB;;;;uBAAmC,OAAO;yGAW9E,CAAC"}

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

@@ -56,9 +56,11 @@ const StageHeader = styled.div`
   overflow: hidden;
 `;
 const StageTitleContainer = styled.div`
-  display: inline-block;
+  display: block;
   border-radius: 4px;
   height: 100%;
+  width: 100%;
+  box-sizing: border-box;
   border: ${(props)=>props.isEditing ? '1px solid var(--uix-canvas-border-de-emp)' : 'none'};
 `;
 const StageTitleInput = styled.input`
@@ -70,9 +72,9 @@ const StageTitleInput = styled.input`
   background: transparent;
   text-overflow: ellipsis;
   border-radius: 2px;
+  width: 100%;
   min-width: 100px;
-  max-width: 220px;
-  padding: ${(props)=>props.isStageTitleEditable ? 'none' : `${Padding.PadS} 0px`};
+  padding: ${(props)=>props.isStageTitleEditable ? '0' : `${Padding.PadS} 0px`};
 
   &:focus {
     outline: none;

package/dist/icons/UiPathFullLight.cjs

@@ -54,15 +54,15 @@ const UiPathFullLight = /*#__PURE__*/ external_react_default().forwardRef(({ siz
             }),
             /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("path", {
                 d: "M91.1326 55.0989H89.675C84.9685 55.0989 82.0451 58.0021 82.0451 62.6744V108.425C82.0451 113.097 84.9685 116 89.675 116H91.1326C95.8386 116 98.762 113.097 98.762 108.425V62.6744C98.762 58.0021 95.8386 55.0989 91.1326 55.0989Z",
-                fill: "#FA4616"
+                fill: "#000000"
             }),
             /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("path", {
                 d: "M111.321 26.7778C100.684 25.0967 92.2902 16.8376 90.5818 6.37143C90.5496 6.17388 90.2894 6.17388 90.2572 6.37143C88.5488 16.8376 80.1548 25.0967 69.5175 26.7778C69.3166 26.8094 69.3166 27.0656 69.5175 27.0973C80.1548 28.7781 88.5488 37.0375 90.2572 47.5037C90.2894 47.7012 90.5496 47.7012 90.5818 47.5037C92.2902 37.0375 100.684 28.7781 111.321 27.0973C111.522 27.0656 111.522 26.8095 111.321 26.7778ZM100.87 27.0174C95.5518 27.8578 91.3548 31.9875 90.5006 37.2206C90.4845 37.3194 90.3544 37.3194 90.3383 37.2206C89.4841 31.9875 85.2871 27.8578 79.9685 27.0174C79.868 27.0016 79.868 26.8735 79.9685 26.8577C85.2871 26.0171 89.4841 21.8876 90.3383 16.6545C90.3544 16.5557 90.4845 16.5557 90.5006 16.6545C91.3548 21.8876 95.5518 26.0171 100.87 26.8577C100.971 26.8735 100.971 27.0016 100.87 27.0174Z",
-                fill: "#FA4616"
+                fill: "#000000"
             }),
             /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("path", {
                 d: "M117.694 10.4371C112.376 11.2774 108.179 15.4071 107.324 20.6402C107.308 20.739 107.178 20.739 107.162 20.6402C106.308 15.4071 102.111 11.2774 96.7923 10.4371C96.6919 10.4212 96.6919 10.2931 96.7923 10.2773C102.111 9.43674 106.308 5.3072 107.162 0.0740898C107.178 -0.0246966 107.308 -0.0246966 107.324 0.0740898C108.179 5.3072 112.376 9.43672 117.694 10.2773C117.795 10.2931 117.795 10.4212 117.694 10.4371Z",
-                fill: "#FA4616"
+                fill: "#000000"
             }),
             /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("path", {
                 d: "M135.312 33.1428H119.087C114.445 33.1428 111.561 35.9674 111.561 40.5133V108.63C111.561 113.175 114.445 116 119.087 116H120.865C125.507 116 128.391 113.175 128.391 108.63V92.5057H135.423C163.58 92.5057 175.066 83.9066 175.066 62.8243C175.066 41.7419 163.548 33.1428 135.312 33.1428ZM158.014 62.6067C158.014 73.4525 152.762 77.1123 137.201 77.1123H128.391V48.2095H137.201C152.762 48.2095 158.014 51.842 158.014 62.6067Z",

package/dist/icons/UiPathFullLight.js

@@ -15,15 +15,15 @@ const UiPathFullLight = /*#__PURE__*/ react.forwardRef(({ size, ...props }, ref)
             }),
             /*#__PURE__*/ jsx("path", {
                 d: "M91.1326 55.0989H89.675C84.9685 55.0989 82.0451 58.0021 82.0451 62.6744V108.425C82.0451 113.097 84.9685 116 89.675 116H91.1326C95.8386 116 98.762 113.097 98.762 108.425V62.6744C98.762 58.0021 95.8386 55.0989 91.1326 55.0989Z",
-                fill: "#FA4616"
+                fill: "#000000"
             }),
             /*#__PURE__*/ jsx("path", {
                 d: "M111.321 26.7778C100.684 25.0967 92.2902 16.8376 90.5818 6.37143C90.5496 6.17388 90.2894 6.17388 90.2572 6.37143C88.5488 16.8376 80.1548 25.0967 69.5175 26.7778C69.3166 26.8094 69.3166 27.0656 69.5175 27.0973C80.1548 28.7781 88.5488 37.0375 90.2572 47.5037C90.2894 47.7012 90.5496 47.7012 90.5818 47.5037C92.2902 37.0375 100.684 28.7781 111.321 27.0973C111.522 27.0656 111.522 26.8095 111.321 26.7778ZM100.87 27.0174C95.5518 27.8578 91.3548 31.9875 90.5006 37.2206C90.4845 37.3194 90.3544 37.3194 90.3383 37.2206C89.4841 31.9875 85.2871 27.8578 79.9685 27.0174C79.868 27.0016 79.868 26.8735 79.9685 26.8577C85.2871 26.0171 89.4841 21.8876 90.3383 16.6545C90.3544 16.5557 90.4845 16.5557 90.5006 16.6545C91.3548 21.8876 95.5518 26.0171 100.87 26.8577C100.971 26.8735 100.971 27.0016 100.87 27.0174Z",
-                fill: "#FA4616"
+                fill: "#000000"
             }),
             /*#__PURE__*/ jsx("path", {
                 d: "M117.694 10.4371C112.376 11.2774 108.179 15.4071 107.324 20.6402C107.308 20.739 107.178 20.739 107.162 20.6402C106.308 15.4071 102.111 11.2774 96.7923 10.4371C96.6919 10.4212 96.6919 10.2931 96.7923 10.2773C102.111 9.43674 106.308 5.3072 107.162 0.0740898C107.178 -0.0246966 107.308 -0.0246966 107.324 0.0740898C108.179 5.3072 112.376 9.43672 117.694 10.2773C117.795 10.2931 117.795 10.4212 117.694 10.4371Z",
-                fill: "#FA4616"
+                fill: "#000000"
             }),
             /*#__PURE__*/ jsx("path", {
                 d: "M135.312 33.1428H119.087C114.445 33.1428 111.561 35.9674 111.561 40.5133V108.63C111.561 113.175 114.445 116 119.087 116H120.865C125.507 116 128.391 113.175 128.391 108.63V92.5057H135.423C163.58 92.5057 175.066 83.9066 175.066 62.8243C175.066 41.7419 163.548 33.1428 135.312 33.1428ZM158.014 62.6067C158.014 73.4525 152.762 77.1123 137.201 77.1123H128.391V48.2095H137.201C152.762 48.2095 158.014 51.842 158.014 62.6067Z",

package/dist/material/components/ap-chat/components/message/markdown/parsers/citation-parser.cjs

@@ -47,7 +47,8 @@ function citationPlugin() {
                 });
                 const token = match[0];
                 if (token.startsWith('[[cite-start:')) try {
-                    const decoded = atob(match[1]);
+                    const raw = atob(match[1]);
+                    const decoded = raw.startsWith('%5B') ? decodeURIComponent(raw) : raw;
                     const citationsData = JSON.parse(decoded);
                     citationStack.push({
                         citationsData
@@ -113,7 +114,7 @@ function contentPartsToMarkdown(messageId, contentParts) {
                     page_number: 'page_number' in citation ? citation.page_number : void 0,
                     messageId
                 }));
-            const encodedData = btoa(JSON.stringify(citationsData));
+            const encodedData = btoa(encodeURIComponent(JSON.stringify(citationsData)));
             const endsWithUrl = /https?:\/\/\S+$/.test(text);
             text = `[[cite-start:${encodedData}]]${text}${endsWithUrl ? ' ' : ''}[[cite-end]]`;
         }

package/dist/material/components/ap-chat/components/message/markdown/parsers/citation-parser.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"citation-parser.d.ts","sourceRoot":"","sources":["../../../../../../../../src/material/components/ap-chat/components/message/markdown/parsers/citation-parser.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAuB,KAAK,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAK5E,wBAAgB,cAAc,KAIpB,MAAM,GAAG,UAmFlB;AAsCD,wBAAgB,sBAAsB,CAAC,SAAS,EAAE,MAAM,EAAE,YAAY,EAAE,WAAW,EAAE,GAAG,MAAM,CA4B7F"}
+{"version":3,"file":"citation-parser.d.ts","sourceRoot":"","sources":["../../../../../../../../src/material/components/ap-chat/components/message/markdown/parsers/citation-parser.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAuB,KAAK,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAK5E,wBAAgB,cAAc,KAIpB,MAAM,GAAG,UAuFlB;AAsCD,wBAAgB,sBAAsB,CAAC,SAAS,EAAE,MAAM,EAAE,YAAY,EAAE,WAAW,EAAE,GAAG,MAAM,CA4B7F"}

package/dist/material/components/ap-chat/components/message/markdown/parsers/citation-parser.js

@@ -18,7 +18,8 @@ function citationPlugin() {
                 });
                 const token = match[0];
                 if (token.startsWith('[[cite-start:')) try {
-                    const decoded = atob(match[1]);
+                    const raw = atob(match[1]);
+                    const decoded = raw.startsWith('%5B') ? decodeURIComponent(raw) : raw;
                     const citationsData = JSON.parse(decoded);
                     citationStack.push({
                         citationsData
@@ -84,7 +85,7 @@ function contentPartsToMarkdown(messageId, contentParts) {
                     page_number: 'page_number' in citation ? citation.page_number : void 0,
                     messageId
                 }));
-            const encodedData = btoa(JSON.stringify(citationsData));
+            const encodedData = btoa(encodeURIComponent(JSON.stringify(citationsData)));
             const endsWithUrl = /https?:\/\/\S+$/.test(text);
             text = `[[cite-start:${encodedData}]]${text}${endsWithUrl ? ' ' : ''}[[cite-end]]`;
         }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uipath/apollo-react",
-  "version": "3.60.2",
+  "version": "3.60.4",
   "description": "Apollo Design System - React component library with Material UI theming",
   "repository": {
     "type": "git",
@@ -200,7 +200,7 @@
     "use-sync-external-store": "^1.2.0",
     "zod": "^4.3.5",
     "zustand": "^5.0.9",
-    "@uipath/apollo-core": "5.8.0",
+    "@uipath/apollo-core": "5.8.1",
     "@uipath/apollo-wind": "1.4.0"
   },
   "devDependencies": {