npm - @uipath/apollo-react - Versions diffs - 3.60.2 → 3.60.3 - Mend

@uipath/apollo-react 3.60.2 → 3.60.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (10) hide show

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

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

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

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

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

	@@ -1 +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"}
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;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 CHANGED Viewed

@@ -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/package.json CHANGED Viewed

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