npm - @uipath/apollo-react - Versions diffs - 4.19.0 → 4.20.0-pr644.f72be25 - Mend

@uipath/apollo-react 4.19.0 → 4.20.0-pr644.f72be25

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 (50) hide show

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

@@ -59,9 +59,9 @@ const external_useMarkdownShortcuts_cjs_namespaceObject = require("./useMarkdown
 const external_useScrollCapture_cjs_namespaceObject = require("./useScrollCapture.cjs");
 const minWidth = 8 * external_constants_cjs_namespaceObject.GRID_SPACING;
 const minHeight = 8 * external_constants_cjs_namespaceObject.GRID_SPACING;
-const StickyNoteNodeComponent = ({ id, data, selected, dragging, placeholder = 'Add text', renderPlaceholderOnSelect = false, onContentChange, onColorChange, onResize })=>{
+const StickyNoteNodeComponent = ({ id, data, selected, dragging, placeholder = 'Add text', renderPlaceholderOnSelect = false, readOnly = false, onContentChange, onColorChange, onResize })=>{
     const { updateNodeData, deleteElements } = (0, react_cjs_namespaceObject.useReactFlow)();
-    const [isEditing, setIsEditing] = (0, external_react_namespaceObject.useState)(data.autoFocus ?? false);
+    const [isEditing, setIsEditing] = (0, external_react_namespaceObject.useState)(!readOnly && (data.autoFocus ?? false));
     const [isResizing, setIsResizing] = (0, external_react_namespaceObject.useState)(false);
     const [isColorPickerOpen, setIsColorPickerOpen] = (0, external_react_namespaceObject.useState)(false);
     const [localContent, setLocalContent] = (0, external_react_namespaceObject.useState)(data.content || '');
@@ -88,14 +88,15 @@ const StickyNoteNodeComponent = ({ id, data, selected, dragging, placeholder = '
             textAreaRef.current.focus();
             textAreaRef.current.select();
         }
-        if (data.autoFocus) updateNodeData(id, {
+        if (!readOnly && data.autoFocus) updateNodeData(id, {
             autoFocus: false
         });
     }, [
         isEditing,
         data.autoFocus,
         id,
-        updateNodeData
+        updateNodeData,
+        readOnly
     ]);
     (0, external_react_namespaceObject.useEffect)(()=>{
         if (!selected || isResizing) setIsColorPickerOpen(false);
@@ -103,8 +104,17 @@ const StickyNoteNodeComponent = ({ id, data, selected, dragging, placeholder = '
         selected,
         isResizing
     ]);
+    (0, external_react_namespaceObject.useEffect)(()=>{
+        if (readOnly) {
+            setIsEditing(false);
+            setLocalContent(data.content || '');
+        }
+    }, [
+        readOnly,
+        data.content
+    ]);
     const handleDoubleClick = (0, external_react_namespaceObject.useCallback)(()=>{
-        if (isEditing) return;
+        if (readOnly || isEditing) return;
         setIsEditing(true);
         setTimeout(()=>{
             if (textAreaRef.current) {
@@ -113,10 +123,12 @@ const StickyNoteNodeComponent = ({ id, data, selected, dragging, placeholder = '
             }
         }, 0);
     }, [
-        isEditing
+        isEditing,
+        readOnly
     ]);
     const handleBlur = (0, external_react_namespaceObject.useCallback)(()=>{
         setIsEditing(false);
+        if (readOnly) return;
         if (localContent !== data.content) {
             onContentChange?.(localContent);
             updateNodeData(id, {
@@ -128,7 +140,8 @@ const StickyNoteNodeComponent = ({ id, data, selected, dragging, placeholder = '
         localContent,
         data.content,
         updateNodeData,
-        onContentChange
+        onContentChange,
+        readOnly
     ]);
     const handleChange = (0, external_react_namespaceObject.useCallback)((e)=>{
         setLocalContent(e.target.value);
@@ -205,6 +218,7 @@ const StickyNoteNodeComponent = ({ id, data, selected, dragging, placeholder = '
         setIsColorPickerOpen((prev)=>!prev);
     }, []);
     const handleEditClick = (0, external_react_namespaceObject.useCallback)(()=>{
+        if (readOnly) return;
         setIsEditing(true);
         setTimeout(()=>{
             if (textAreaRef.current) {
@@ -212,7 +226,9 @@ const StickyNoteNodeComponent = ({ id, data, selected, dragging, placeholder = '
                 textAreaRef.current.select();
             }
         }, 0);
-    }, []);
+    }, [
+        readOnly
+    ]);
     const handleDelete = (0, external_react_namespaceObject.useCallback)(()=>{
         deleteElements({
             nodes: [
@@ -299,69 +315,73 @@ const StickyNoteNodeComponent = ({ id, data, selected, dragging, placeholder = '
             }),
             /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(external_StickyNoteNode_styles_cjs_namespaceObject.StickyNoteWrapper, {
                 children: [
-                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(react_cjs_namespaceObject.NodeResizeControl, {
-                        style: {
-                            background: 'transparent',
-                            border: 'none',
-                            zIndex: external_StickyNoteNode_styles_cjs_namespaceObject.RESIZE_CONTROL_Z_INDEX
-                        },
-                        position: "top-left",
-                        minWidth: minWidth,
-                        minHeight: minHeight,
-                        onResizeStart: handleResizeStart,
-                        onResizeEnd: handleResizeEnd,
-                        children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_StickyNoteNode_styles_cjs_namespaceObject.ResizeHandle, {
-                            selected: selected,
-                            cursor: "nwse-resize"
-                        })
-                    }),
-                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(react_cjs_namespaceObject.NodeResizeControl, {
-                        style: {
-                            background: 'transparent',
-                            border: 'none',
-                            zIndex: external_StickyNoteNode_styles_cjs_namespaceObject.RESIZE_CONTROL_Z_INDEX
-                        },
-                        position: "top-right",
-                        minWidth: minWidth,
-                        minHeight: minHeight,
-                        onResizeStart: handleResizeStart,
-                        onResizeEnd: handleResizeEnd,
-                        children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_StickyNoteNode_styles_cjs_namespaceObject.ResizeHandle, {
-                            selected: selected,
-                            cursor: "nesw-resize"
-                        })
-                    }),
-                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(react_cjs_namespaceObject.NodeResizeControl, {
-                        style: {
-                            background: 'transparent',
-                            border: 'none',
-                            zIndex: external_StickyNoteNode_styles_cjs_namespaceObject.RESIZE_CONTROL_Z_INDEX
-                        },
-                        position: "bottom-left",
-                        minWidth: minWidth,
-                        minHeight: minHeight,
-                        onResizeStart: handleResizeStart,
-                        onResizeEnd: handleResizeEnd,
-                        children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_StickyNoteNode_styles_cjs_namespaceObject.ResizeHandle, {
-                            selected: selected,
-                            cursor: "nesw-resize"
-                        })
-                    }),
-                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(react_cjs_namespaceObject.NodeResizeControl, {
-                        style: {
-                            background: 'transparent',
-                            border: 'none',
-                            zIndex: external_StickyNoteNode_styles_cjs_namespaceObject.RESIZE_CONTROL_Z_INDEX
-                        },
-                        position: "bottom-right",
-                        minWidth: minWidth,
-                        minHeight: minHeight,
-                        onResizeStart: handleResizeStart,
-                        onResizeEnd: handleResizeEnd,
-                        children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_StickyNoteNode_styles_cjs_namespaceObject.ResizeHandle, {
-                            selected: selected,
-                            cursor: "nwse-resize"
-                        })
+                    !readOnly && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(jsx_runtime_namespaceObject.Fragment, {
+                        children: [
+                            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(react_cjs_namespaceObject.NodeResizeControl, {
+                                style: {
+                                    background: 'transparent',
+                                    border: 'none',
+                                    zIndex: external_StickyNoteNode_styles_cjs_namespaceObject.RESIZE_CONTROL_Z_INDEX
+                                },
+                                position: "top-left",
+                                minWidth: minWidth,
+                                minHeight: minHeight,
+                                onResizeStart: handleResizeStart,
+                                onResizeEnd: handleResizeEnd,
+                                children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_StickyNoteNode_styles_cjs_namespaceObject.ResizeHandle, {
+                                    selected: selected,
+                                    cursor: "nwse-resize"
+                                })
+                            }),
+                            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(react_cjs_namespaceObject.NodeResizeControl, {
+                                style: {
+                                    background: 'transparent',
+                                    border: 'none',
+                                    zIndex: external_StickyNoteNode_styles_cjs_namespaceObject.RESIZE_CONTROL_Z_INDEX
+                                },
+                                position: "top-right",
+                                minWidth: minWidth,
+                                minHeight: minHeight,
+                                onResizeStart: handleResizeStart,
+                                onResizeEnd: handleResizeEnd,
+                                children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_StickyNoteNode_styles_cjs_namespaceObject.ResizeHandle, {
+                                    selected: selected,
+                                    cursor: "nesw-resize"
+                                })
+                            }),
+                            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(react_cjs_namespaceObject.NodeResizeControl, {
+                                style: {
+                                    background: 'transparent',
+                                    border: 'none',
+                                    zIndex: external_StickyNoteNode_styles_cjs_namespaceObject.RESIZE_CONTROL_Z_INDEX
+                                },
+                                position: "bottom-left",
+                                minWidth: minWidth,
+                                minHeight: minHeight,
+                                onResizeStart: handleResizeStart,
+                                onResizeEnd: handleResizeEnd,
+                                children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_StickyNoteNode_styles_cjs_namespaceObject.ResizeHandle, {
+                                    selected: selected,
+                                    cursor: "nesw-resize"
+                                })
+                            }),
+                            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(react_cjs_namespaceObject.NodeResizeControl, {
+                                style: {
+                                    background: 'transparent',
+                                    border: 'none',
+                                    zIndex: external_StickyNoteNode_styles_cjs_namespaceObject.RESIZE_CONTROL_Z_INDEX
+                                },
+                                position: "bottom-right",
+                                minWidth: minWidth,
+                                minHeight: minHeight,
+                                onResizeStart: handleResizeStart,
+                                onResizeEnd: handleResizeEnd,
+                                children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_StickyNoteNode_styles_cjs_namespaceObject.ResizeHandle, {
+                                    selected: selected,
+                                    cursor: "nwse-resize"
+                                })
+                            })
+                        ]
                     }),
                     /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(external_StickyNoteNode_styles_cjs_namespaceObject.StickyNoteContainer, {
                         backgroundColor: colorWithAlpha,
@@ -371,10 +391,10 @@ const StickyNoteNodeComponent = ({ id, data, selected, dragging, placeholder = '
                         onDoubleClick: handleDoubleClick,
                         children: [
                             /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_StickyNoteNode_styles_cjs_namespaceObject.TopCornerIndicators, {
-                                selected: selected
+                                visible: selected && !readOnly
                             }),
                             /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_StickyNoteNode_styles_cjs_namespaceObject.BottomCornerIndicators, {
-                                selected: selected
+                                visible: selected && !readOnly
                             }),
                             isEditing ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(index_cjs_namespaceObject.ApI18nProvider, {
                                 component: "canvas",
@@ -419,13 +439,13 @@ const StickyNoteNodeComponent = ({ id, data, selected, dragging, placeholder = '
                             })
                         ]
                     }),
-                    selected && !dragging && !isResizing && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_Toolbar_index_cjs_namespaceObject.NodeToolbar, {
+                    !readOnly && selected && !dragging && !isResizing && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_Toolbar_index_cjs_namespaceObject.NodeToolbar, {
                         nodeId: id,
                         config: toolbarConfig,
                         expanded: true
                     }),
                     /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_motion_react_namespaceObject.AnimatePresence, {
-                        children: selected && !dragging && !isResizing && isColorPickerOpen && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+                        children: !readOnly && selected && !dragging && !isResizing && isColorPickerOpen && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
                             style: {
                                 position: 'absolute',
                                 top: -40,

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

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

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

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

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

@@ -19,9 +19,9 @@ import { useMarkdownShortcuts } from "./useMarkdownShortcuts.js";
 import { useScrollCapture } from "./useScrollCapture.js";
 const minWidth = 8 * GRID_SPACING;
 const minHeight = 8 * GRID_SPACING;
-const StickyNoteNodeComponent = ({ id, data, selected, dragging, placeholder = 'Add text', renderPlaceholderOnSelect = false, onContentChange, onColorChange, onResize })=>{
+const StickyNoteNodeComponent = ({ id, data, selected, dragging, placeholder = 'Add text', renderPlaceholderOnSelect = false, readOnly = false, onContentChange, onColorChange, onResize })=>{
     const { updateNodeData, deleteElements } = useReactFlow();
-    const [isEditing, setIsEditing] = useState(data.autoFocus ?? false);
+    const [isEditing, setIsEditing] = useState(!readOnly && (data.autoFocus ?? false));
     const [isResizing, setIsResizing] = useState(false);
     const [isColorPickerOpen, setIsColorPickerOpen] = useState(false);
     const [localContent, setLocalContent] = useState(data.content || '');
@@ -48,14 +48,15 @@ const StickyNoteNodeComponent = ({ id, data, selected, dragging, placeholder = '
             textAreaRef.current.focus();
             textAreaRef.current.select();
         }
-        if (data.autoFocus) updateNodeData(id, {
+        if (!readOnly && data.autoFocus) updateNodeData(id, {
             autoFocus: false
         });
     }, [
         isEditing,
         data.autoFocus,
         id,
-        updateNodeData
+        updateNodeData,
+        readOnly
     ]);
     useEffect(()=>{
         if (!selected || isResizing) setIsColorPickerOpen(false);
@@ -63,8 +64,17 @@ const StickyNoteNodeComponent = ({ id, data, selected, dragging, placeholder = '
         selected,
         isResizing
     ]);
+    useEffect(()=>{
+        if (readOnly) {
+            setIsEditing(false);
+            setLocalContent(data.content || '');
+        }
+    }, [
+        readOnly,
+        data.content
+    ]);
     const handleDoubleClick = useCallback(()=>{
-        if (isEditing) return;
+        if (readOnly || isEditing) return;
         setIsEditing(true);
         setTimeout(()=>{
             if (textAreaRef.current) {
@@ -73,10 +83,12 @@ const StickyNoteNodeComponent = ({ id, data, selected, dragging, placeholder = '
             }
         }, 0);
     }, [
-        isEditing
+        isEditing,
+        readOnly
     ]);
     const handleBlur = useCallback(()=>{
         setIsEditing(false);
+        if (readOnly) return;
         if (localContent !== data.content) {
             onContentChange?.(localContent);
             updateNodeData(id, {
@@ -88,7 +100,8 @@ const StickyNoteNodeComponent = ({ id, data, selected, dragging, placeholder = '
         localContent,
         data.content,
         updateNodeData,
-        onContentChange
+        onContentChange,
+        readOnly
     ]);
     const handleChange = useCallback((e)=>{
         setLocalContent(e.target.value);
@@ -165,6 +178,7 @@ const StickyNoteNodeComponent = ({ id, data, selected, dragging, placeholder = '
         setIsColorPickerOpen((prev)=>!prev);
     }, []);
     const handleEditClick = useCallback(()=>{
+        if (readOnly) return;
         setIsEditing(true);
         setTimeout(()=>{
             if (textAreaRef.current) {
@@ -172,7 +186,9 @@ const StickyNoteNodeComponent = ({ id, data, selected, dragging, placeholder = '
                 textAreaRef.current.select();
             }
         }, 0);
-    }, []);
+    }, [
+        readOnly
+    ]);
     const handleDelete = useCallback(()=>{
         deleteElements({
             nodes: [
@@ -259,69 +275,73 @@ const StickyNoteNodeComponent = ({ id, data, selected, dragging, placeholder = '
             }),
             /*#__PURE__*/ jsxs(StickyNoteWrapper, {
                 children: [
-                    /*#__PURE__*/ jsx(NodeResizeControl, {
-                        style: {
-                            background: 'transparent',
-                            border: 'none',
-                            zIndex: RESIZE_CONTROL_Z_INDEX
-                        },
-                        position: "top-left",
-                        minWidth: minWidth,
-                        minHeight: minHeight,
-                        onResizeStart: handleResizeStart,
-                        onResizeEnd: handleResizeEnd,
-                        children: /*#__PURE__*/ jsx(ResizeHandle, {
-                            selected: selected,
-                            cursor: "nwse-resize"
-                        })
-                    }),
-                    /*#__PURE__*/ jsx(NodeResizeControl, {
-                        style: {
-                            background: 'transparent',
-                            border: 'none',
-                            zIndex: RESIZE_CONTROL_Z_INDEX
-                        },
-                        position: "top-right",
-                        minWidth: minWidth,
-                        minHeight: minHeight,
-                        onResizeStart: handleResizeStart,
-                        onResizeEnd: handleResizeEnd,
-                        children: /*#__PURE__*/ jsx(ResizeHandle, {
-                            selected: selected,
-                            cursor: "nesw-resize"
-                        })
-                    }),
-                    /*#__PURE__*/ jsx(NodeResizeControl, {
-                        style: {
-                            background: 'transparent',
-                            border: 'none',
-                            zIndex: RESIZE_CONTROL_Z_INDEX
-                        },
-                        position: "bottom-left",
-                        minWidth: minWidth,
-                        minHeight: minHeight,
-                        onResizeStart: handleResizeStart,
-                        onResizeEnd: handleResizeEnd,
-                        children: /*#__PURE__*/ jsx(ResizeHandle, {
-                            selected: selected,
-                            cursor: "nesw-resize"
-                        })
-                    }),
-                    /*#__PURE__*/ jsx(NodeResizeControl, {
-                        style: {
-                            background: 'transparent',
-                            border: 'none',
-                            zIndex: RESIZE_CONTROL_Z_INDEX
-                        },
-                        position: "bottom-right",
-                        minWidth: minWidth,
-                        minHeight: minHeight,
-                        onResizeStart: handleResizeStart,
-                        onResizeEnd: handleResizeEnd,
-                        children: /*#__PURE__*/ jsx(ResizeHandle, {
-                            selected: selected,
-                            cursor: "nwse-resize"
-                        })
+                    !readOnly && /*#__PURE__*/ jsxs(Fragment, {
+                        children: [
+                            /*#__PURE__*/ jsx(NodeResizeControl, {
+                                style: {
+                                    background: 'transparent',
+                                    border: 'none',
+                                    zIndex: RESIZE_CONTROL_Z_INDEX
+                                },
+                                position: "top-left",
+                                minWidth: minWidth,
+                                minHeight: minHeight,
+                                onResizeStart: handleResizeStart,
+                                onResizeEnd: handleResizeEnd,
+                                children: /*#__PURE__*/ jsx(ResizeHandle, {
+                                    selected: selected,
+                                    cursor: "nwse-resize"
+                                })
+                            }),
+                            /*#__PURE__*/ jsx(NodeResizeControl, {
+                                style: {
+                                    background: 'transparent',
+                                    border: 'none',
+                                    zIndex: RESIZE_CONTROL_Z_INDEX
+                                },
+                                position: "top-right",
+                                minWidth: minWidth,
+                                minHeight: minHeight,
+                                onResizeStart: handleResizeStart,
+                                onResizeEnd: handleResizeEnd,
+                                children: /*#__PURE__*/ jsx(ResizeHandle, {
+                                    selected: selected,
+                                    cursor: "nesw-resize"
+                                })
+                            }),
+                            /*#__PURE__*/ jsx(NodeResizeControl, {
+                                style: {
+                                    background: 'transparent',
+                                    border: 'none',
+                                    zIndex: RESIZE_CONTROL_Z_INDEX
+                                },
+                                position: "bottom-left",
+                                minWidth: minWidth,
+                                minHeight: minHeight,
+                                onResizeStart: handleResizeStart,
+                                onResizeEnd: handleResizeEnd,
+                                children: /*#__PURE__*/ jsx(ResizeHandle, {
+                                    selected: selected,
+                                    cursor: "nesw-resize"
+                                })
+                            }),
+                            /*#__PURE__*/ jsx(NodeResizeControl, {
+                                style: {
+                                    background: 'transparent',
+                                    border: 'none',
+                                    zIndex: RESIZE_CONTROL_Z_INDEX
+                                },
+                                position: "bottom-right",
+                                minWidth: minWidth,
+                                minHeight: minHeight,
+                                onResizeStart: handleResizeStart,
+                                onResizeEnd: handleResizeEnd,
+                                children: /*#__PURE__*/ jsx(ResizeHandle, {
+                                    selected: selected,
+                                    cursor: "nwse-resize"
+                                })
+                            })
+                        ]
                     }),
                     /*#__PURE__*/ jsxs(StickyNoteContainer, {
                         backgroundColor: colorWithAlpha,
@@ -331,10 +351,10 @@ const StickyNoteNodeComponent = ({ id, data, selected, dragging, placeholder = '
                         onDoubleClick: handleDoubleClick,
                         children: [
                             /*#__PURE__*/ jsx(TopCornerIndicators, {
-                                selected: selected
+                                visible: selected && !readOnly
                             }),
                             /*#__PURE__*/ jsx(BottomCornerIndicators, {
-                                selected: selected
+                                visible: selected && !readOnly
                             }),
                             isEditing ? /*#__PURE__*/ jsxs(ApI18nProvider, {
                                 component: "canvas",
@@ -379,13 +399,13 @@ const StickyNoteNodeComponent = ({ id, data, selected, dragging, placeholder = '
                             })
                         ]
                     }),
-                    selected && !dragging && !isResizing && /*#__PURE__*/ jsx(NodeToolbar, {
+                    !readOnly && selected && !dragging && !isResizing && /*#__PURE__*/ jsx(NodeToolbar, {
                         nodeId: id,
                         config: toolbarConfig,
                         expanded: true
                     }),
                     /*#__PURE__*/ jsx(AnimatePresence, {
-                        children: selected && !dragging && !isResizing && isColorPickerOpen && /*#__PURE__*/ jsx("div", {
+                        children: !readOnly && selected && !dragging && !isResizing && isColorPickerOpen && /*#__PURE__*/ jsx("div", {
                             style: {
                                 position: 'absolute',
                                 top: -40,

package/dist/canvas/components/StickyNoteNode/StickyNoteNode.styles.cjs CHANGED Viewed

@@ -281,7 +281,7 @@ const TopCornerIndicators = styled_default().div`
   position: absolute;
   inset: 0;
   pointer-events: none;
-  opacity: ${(props)=>props.selected ? 1 : 0};
+  opacity: ${(props)=>props.visible ? 1 : 0};
   /* Top-left corner */
   &::before {
@@ -313,7 +313,7 @@ const BottomCornerIndicators = styled_default().div`
   position: absolute;
   inset: 0;
   pointer-events: none;
-  opacity: ${(props)=>props.selected ? 1 : 0};
+  opacity: ${(props)=>props.visible ? 1 : 0};
   /* Bottom-left corner */
   &::before {

package/dist/canvas/components/StickyNoteNode/StickyNoteNode.styles.d.ts CHANGED Viewed

@@ -35,13 +35,13 @@ export declare const TopCornerIndicators: import("@emotion/styled").StyledCompon
     theme?: import("@emotion/react").Theme;
     as?: React.ElementType;
 } & {
-    selected?: boolean;
+    visible?: boolean;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const BottomCornerIndicators: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme;
     as?: React.ElementType;
 } & {
-    selected?: boolean;
+    visible?: boolean;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const ColorPickerPanel: import("@emotion/styled").StyledComponent<Omit<import("motion/react").HTMLMotionProps<"div">, "ref"> & import("react").RefAttributes<HTMLDivElement> & {
     theme?: import("@emotion/react").Theme;

package/dist/canvas/components/StickyNoteNode/StickyNoteNode.styles.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"StickyNoteNode.styles.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/StickyNoteNode/StickyNoteNode.styles.ts"],"names":[],"mappings":"AAKA,eAAO,MAAM,8BAA8B,MAAM,CAAC;AA4BlD,eAAO,MAAM,sBAAsB,MAAM,CAAC;AAE1C,eAAO,MAAM,sBAAsB,2CAUlC,CAAC;AAEF,eAAO,MAAM,iBAAiB;;;yGAI7B,CAAC;AAEF,eAAO,MAAM,mBAAmB;;;;iBACjB,MAAM;qBACF,MAAM;eACZ,OAAO;eACP,OAAO;yGAuBnB,CAAC;AAEF,eAAO,MAAM,kBAAkB;;;;eAAgC,OAAO;2HAsBrE,CAAC;AAEF,eAAO,MAAM,kBAAkB;;;yGA8H9B,CAAC;AAEF,eAAO,MAAM,YAAY;;;;eAA2B,OAAO;aAAW,MAAM;yGAW3E,CAAC;AAEF,eAAO,MAAM,mBAAmB;;;;~~eAA2B~~,OAAO;yGA+~~BjE~~,CAAC;AAEF,eAAO,MAAM,sBAAsB;;;;~~eAA2B~~,OAAO;yGA+~~BpE~~,CAAC;AAEF,eAAO,MAAM,gBAAgB;;UAa5B,CAAC;AAEF,eAAO,MAAM,WAAW;;;;WAA0B,MAAM;gBAAc,OAAO;qHAkB5E,CAAC;AAEF,eAAO,MAAM,0BAA0B;;;;iBAA6B,MAAM;yGAQzE,CAAC;AAEF,eAAO,MAAM,gBAAgB;;;;cAA6B,OAAO;qHAoBhE,CAAC;AAEF,eAAO,MAAM,gBAAgB;;;yGAK5B,CAAC"}
1	+ {"version":3,"file":"StickyNoteNode.styles.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/StickyNoteNode/StickyNoteNode.styles.ts"],"names":[],"mappings":"AAKA,eAAO,MAAM,8BAA8B,MAAM,CAAC;AA4BlD,eAAO,MAAM,sBAAsB,MAAM,CAAC;AAE1C,eAAO,MAAM,sBAAsB,2CAUlC,CAAC;AAEF,eAAO,MAAM,iBAAiB;;;yGAI7B,CAAC;AAEF,eAAO,MAAM,mBAAmB;;;;iBACjB,MAAM;qBACF,MAAM;eACZ,OAAO;eACP,OAAO;yGAuBnB,CAAC;AAEF,eAAO,MAAM,kBAAkB;;;;eAAgC,OAAO;2HAsBrE,CAAC;AAEF,eAAO,MAAM,kBAAkB;;;yGA8H9B,CAAC;AAEF,eAAO,MAAM,YAAY;;;;eAA2B,OAAO;aAAW,MAAM;yGAW3E,CAAC;AAEF,eAAO,MAAM,mBAAmB;;;;cAA0B,OAAO;yGA+BhE,CAAC;AAEF,eAAO,MAAM,sBAAsB;;;;cAA0B,OAAO;yGA+BnE,CAAC;AAEF,eAAO,MAAM,gBAAgB;;UAa5B,CAAC;AAEF,eAAO,MAAM,WAAW;;;;WAA0B,MAAM;gBAAc,OAAO;qHAkB5E,CAAC;AAEF,eAAO,MAAM,0BAA0B;;;;iBAA6B,MAAM;yGAQzE,CAAC;AAEF,eAAO,MAAM,gBAAgB;;;;cAA6B,OAAO;qHAoBhE,CAAC;AAEF,eAAO,MAAM,gBAAgB;;;yGAK5B,CAAC"}

package/dist/canvas/components/StickyNoteNode/StickyNoteNode.styles.js CHANGED Viewed

@@ -229,7 +229,7 @@ const TopCornerIndicators = styled.div`
   position: absolute;
   inset: 0;
   pointer-events: none;
-  opacity: ${(props)=>props.selected ? 1 : 0};
+  opacity: ${(props)=>props.visible ? 1 : 0};
   /* Top-left corner */
   &::before {
@@ -261,7 +261,7 @@ const BottomCornerIndicators = styled.div`
   position: absolute;
   inset: 0;
   pointer-events: none;
-  opacity: ${(props)=>props.selected ? 1 : 0};
+  opacity: ${(props)=>props.visible ? 1 : 0};
   /* Bottom-left corner */
   &::before {

package/dist/canvas/components/Toolbox/ListView.cjs CHANGED Viewed

@@ -36,6 +36,13 @@ const CanvasThemeContext_cjs_namespaceObject = require("../BaseCanvas/CanvasThem
 const external_CanvasTooltip_cjs_namespaceObject = require("../CanvasTooltip.cjs");
 const external_ListView_styles_cjs_namespaceObject = require("./ListView.styles.cjs");
 const DEFAULT_SKELETON_COUNT = 3;
+function getInitial(name) {
+    const trimmed = name.trim();
+    if (!trimmed) return '?';
+    return [
+        ...trimmed
+    ][0] ?? '?';
+}
 function buildRenderedItems(items, enableSections, loadingSkeleton) {
     const result = [];
     const skeletonConfig = 'object' == typeof loadingSkeleton ? loadingSkeleton : loadingSkeleton ? {} : void 0;
@@ -162,7 +169,12 @@ const ListViewRow = /*#__PURE__*/ (0, external_react_namespaceObject.memo)(({ in
                         icon: item.icon.name,
                         size: 24
                     }),
-                    item.icon?.Component && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(item.icon.Component, {})
+                    item.icon?.Component && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(item.icon.Component, {}),
+                    !item.icon?.url && !item.icon?.name && !item.icon?.Component && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_ListView_styles_cjs_namespaceObject.InitialsBadge, {
+                        "aria-hidden": "true",
+                        "data-testid": "list-item-initials-badge",
+                        children: getInitial(item.name)
+                    })
                 ]
             }),
             /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(index_cjs_namespaceObject.Column, {