@uipath/apollo-react 3.69.1 → 3.70.0

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

@@ -58,7 +58,7 @@ 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 })=>{
+const StickyNoteNodeComponent = ({ id, data, selected, dragging, placeholder = 'Add text', renderPlaceholderOnSelect = false, onContentChange, onColorChange, onResize })=>{
     const { updateNodeData, deleteElements } = (0, react_cjs_namespaceObject.useReactFlow)();
     const [isEditing, setIsEditing] = (0, external_react_namespaceObject.useState)(data.autoFocus ?? false);
     const [isResizing, setIsResizing] = (0, external_react_namespaceObject.useState)(false);
@@ -116,14 +116,18 @@ const StickyNoteNodeComponent = ({ id, data, selected, dragging, placeholder = '
     ]);
     const handleBlur = (0, external_react_namespaceObject.useCallback)(()=>{
         setIsEditing(false);
-        if (localContent !== data.content) updateNodeData(id, {
-            content: localContent
-        });
+        if (localContent !== data.content) {
+            onContentChange?.(localContent);
+            updateNodeData(id, {
+                content: localContent
+            });
+        }
     }, [
         id,
         localContent,
         data.content,
-        updateNodeData
+        updateNodeData,
+        onContentChange
     ]);
     const handleChange = (0, external_react_namespaceObject.useCallback)((e)=>{
         setLocalContent(e.target.value);
@@ -179,17 +183,22 @@ const StickyNoteNodeComponent = ({ id, data, selected, dragging, placeholder = '
     const handleResizeStart = (0, external_react_namespaceObject.useCallback)(()=>{
         setIsResizing(true);
     }, []);
-    const handleResizeEnd = (0, external_react_namespaceObject.useCallback)(()=>{
+    const handleResizeEnd = (0, external_react_namespaceObject.useCallback)((_event, params)=>{
         setIsResizing(false);
-    }, []);
+        onResize?.(params.width, params.height);
+    }, [
+        onResize
+    ]);
     const handleColorChange = (0, external_react_namespaceObject.useCallback)((newColor)=>{
+        onColorChange?.(newColor);
         updateNodeData(id, {
             color: newColor
         });
         setIsColorPickerOpen(false);
     }, [
         id,
-        updateNodeData
+        updateNodeData,
+        onColorChange
     ]);
     const handleToggleColorPicker = (0, external_react_namespaceObject.useCallback)(()=>{
         setIsColorPickerOpen((prev)=>!prev);

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

@@ -1,9 +1,12 @@
 import type { NodeProps } from '../../xyflow/react.ts';
-import type { StickyNoteData } from './StickyNoteNode.types';
+import type { StickyNoteColor, StickyNoteData } from './StickyNoteNode.types';
 export interface StickyNoteNodeProps extends NodeProps {
     data: StickyNoteData;
     placeholder?: string;
     renderPlaceholderOnSelect?: 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, }: StickyNoteNodeProps) => import("react/jsx-runtime").JSX.Element>;
+export declare const StickyNoteNode: import("react").MemoExoticComponent<({ id, data, selected, dragging, placeholder, renderPlaceholderOnSelect, onContentChange, onColorChange, onResize, }: StickyNoteNodeProps) => import("react/jsx-runtime").JSX.Element>;
 //# sourceMappingURL=StickyNoteNode.d.ts.map

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

@@ -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;AA8B1E,OAAO,KAAK,EAAmB,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;CACrC;AA6XD,eAAO,MAAM,cAAc,kHAjXxB,mBAAmB,6CAiXqC,CAAC"}
+{"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;AA+B1E,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"}

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

@@ -18,7 +18,7 @@ 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 })=>{
+const StickyNoteNodeComponent = ({ id, data, selected, dragging, placeholder = 'Add text', renderPlaceholderOnSelect = false, onContentChange, onColorChange, onResize })=>{
     const { updateNodeData, deleteElements } = useReactFlow();
     const [isEditing, setIsEditing] = useState(data.autoFocus ?? false);
     const [isResizing, setIsResizing] = useState(false);
@@ -76,14 +76,18 @@ const StickyNoteNodeComponent = ({ id, data, selected, dragging, placeholder = '
     ]);
     const handleBlur = useCallback(()=>{
         setIsEditing(false);
-        if (localContent !== data.content) updateNodeData(id, {
-            content: localContent
-        });
+        if (localContent !== data.content) {
+            onContentChange?.(localContent);
+            updateNodeData(id, {
+                content: localContent
+            });
+        }
     }, [
         id,
         localContent,
         data.content,
-        updateNodeData
+        updateNodeData,
+        onContentChange
     ]);
     const handleChange = useCallback((e)=>{
         setLocalContent(e.target.value);
@@ -139,17 +143,22 @@ const StickyNoteNodeComponent = ({ id, data, selected, dragging, placeholder = '
     const handleResizeStart = useCallback(()=>{
         setIsResizing(true);
     }, []);
-    const handleResizeEnd = useCallback(()=>{
+    const handleResizeEnd = useCallback((_event, params)=>{
         setIsResizing(false);
-    }, []);
+        onResize?.(params.width, params.height);
+    }, [
+        onResize
+    ]);
     const handleColorChange = useCallback((newColor)=>{
+        onColorChange?.(newColor);
         updateNodeData(id, {
             color: newColor
         });
         setIsColorPickerOpen(false);
     }, [
         id,
-        updateNodeData
+        updateNodeData,
+        onColorChange
     ]);
     const handleToggleColorPicker = useCallback(()=>{
         setIsColorPickerOpen((prev)=>!prev);

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

@@ -24,9 +24,10 @@ var __webpack_require__ = {};
 var __webpack_exports__ = {};
 __webpack_require__.r(__webpack_exports__);
 __webpack_require__.d(__webpack_exports__, {
-    WithBaseNodes: ()=>WithBaseNodes,
+    WithCallbacks: ()=>WithCallbacks,
+    Default: ()=>Default,
     default: ()=>StickyNoteNode_stories,
-    Default: ()=>Default
+    WithBaseNodes: ()=>WithBaseNodes
 });
 const jsx_runtime_namespaceObject = require("react/jsx-runtime");
 const react_cjs_namespaceObject = require("../../xyflow/react.cjs");
@@ -46,9 +47,42 @@ const meta = {
     ]
 };
 const StickyNoteNode_stories = meta;
+const StickyNoteWithCallbacks = (props)=>{
+    const handleContentChange = (content)=>{
+        console.log('📝 Content changed:', {
+            nodeId: props.id,
+            content,
+            timestamp: new Date().toISOString()
+        });
+    };
+    const handleColorChange = (color)=>{
+        console.log('🎨 Color changed:', {
+            nodeId: props.id,
+            color,
+            timestamp: new Date().toISOString()
+        });
+    };
+    const handleResize = (width, height)=>{
+        console.log('📏 Resized:', {
+            nodeId: props.id,
+            width,
+            height,
+            timestamp: new Date().toISOString()
+        });
+    };
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_StickyNoteNode_cjs_namespaceObject.StickyNoteNode, {
+        ...props,
+        onContentChange: handleContentChange,
+        onColorChange: handleColorChange,
+        onResize: handleResize
+    });
+};
 const nodeTypes = {
     stickyNote: external_StickyNoteNode_cjs_namespaceObject.StickyNoteNode
 };
+const nodeTypesWithCallbacks = {
+    stickyNote: StickyNoteWithCallbacks
+};
 function createStickyNote(id, color, content, position, size = {
     width: 250,
     height: 150
@@ -469,18 +503,48 @@ function WithBaseNodesStory() {
         })
     });
 }
+function WithCallbacksStory() {
+    const initialNodes = (0, external_react_namespaceObject.useMemo)(()=>[
+            createStickyNote('sticky-test-1', 'yellow', '**Test Callbacks!**\n\n1. Double-click to edit content\n2. Click the color button to change color\n3. Drag corners to resize\n\nOpen the browser console to see logs! 🔍', {
+                x: 480,
+                y: 480
+            }, {
+                width: 320,
+                height: 320
+            })
+        ], []);
+    const { canvasProps } = (0, index_cjs_namespaceObject.useCanvasStory)({
+        initialNodes,
+        additionalNodeTypes: nodeTypesWithCallbacks
+    });
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_BaseCanvas_index_cjs_namespaceObject.BaseCanvas, {
+        ...canvasProps,
+        mode: "design",
+        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 Default = {
     render: ()=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(DefaultStory, {})
 };
 const WithBaseNodes = {
     render: ()=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(WithBaseNodesStory, {})
 };
+const WithCallbacks = {
+    render: ()=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(WithCallbacksStory, {})
+};
 exports.Default = __webpack_exports__.Default;
 exports.WithBaseNodes = __webpack_exports__.WithBaseNodes;
+exports.WithCallbacks = __webpack_exports__.WithCallbacks;
 exports["default"] = __webpack_exports__["default"];
 for(var __rspack_i in __webpack_exports__)if (-1 === [
     "Default",
     "WithBaseNodes",
+    "WithCallbacks",
     "default"
 ].indexOf(__rspack_i)) exports[__rspack_i] = __webpack_exports__[__rspack_i];
 Object.defineProperty(exports, '__esModule', {

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

@@ -4,4 +4,5 @@ export default meta;
 type Story = StoryObj<typeof meta>;
 export declare const Default: Story;
 export declare const WithBaseNodes: Story;
+export declare const WithCallbacks: Story;
 //# sourceMappingURL=StickyNoteNode.stories.d.ts.map

package/dist/canvas/components/StickyNoteNode/StickyNoteNode.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"StickyNoteNode.stories.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/StickyNoteNode/StickyNoteNode.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAe5D,QAAA,MAAM,IAAI,EAAE,IAIX,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAwWnC,eAAO,MAAM,OAAO,EAAE,KAErB,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KAE3B,CAAC"}
+{"version":3,"file":"StickyNoteNode.stories.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/StickyNoteNode/StickyNoteNode.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAe5D,QAAA,MAAM,IAAI,EAAE,IAIX,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AA6anC,eAAO,MAAM,OAAO,EAAE,KAErB,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KAE3B,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KAE3B,CAAC"}

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

@@ -16,9 +16,42 @@ const meta = {
     ]
 };
 const StickyNoteNode_stories = meta;
+const StickyNoteWithCallbacks = (props)=>{
+    const handleContentChange = (content)=>{
+        console.log('📝 Content changed:', {
+            nodeId: props.id,
+            content,
+            timestamp: new Date().toISOString()
+        });
+    };
+    const handleColorChange = (color)=>{
+        console.log('🎨 Color changed:', {
+            nodeId: props.id,
+            color,
+            timestamp: new Date().toISOString()
+        });
+    };
+    const handleResize = (width, height)=>{
+        console.log('📏 Resized:', {
+            nodeId: props.id,
+            width,
+            height,
+            timestamp: new Date().toISOString()
+        });
+    };
+    return /*#__PURE__*/ jsx(StickyNoteNode, {
+        ...props,
+        onContentChange: handleContentChange,
+        onColorChange: handleColorChange,
+        onResize: handleResize
+    });
+};
 const nodeTypes = {
     stickyNote: StickyNoteNode
 };
+const nodeTypesWithCallbacks = {
+    stickyNote: StickyNoteWithCallbacks
+};
 function createStickyNote(id, color, content, position, size = {
     width: 250,
     height: 150
@@ -439,10 +472,38 @@ function WithBaseNodesStory() {
         })
     });
 }
+function WithCallbacksStory() {
+    const initialNodes = useMemo(()=>[
+            createStickyNote('sticky-test-1', 'yellow', '**Test Callbacks!**\n\n1. Double-click to edit content\n2. Click the color button to change color\n3. Drag corners to resize\n\nOpen the browser console to see logs! 🔍', {
+                x: 480,
+                y: 480
+            }, {
+                width: 320,
+                height: 320
+            })
+        ], []);
+    const { canvasProps } = useCanvasStory({
+        initialNodes,
+        additionalNodeTypes: nodeTypesWithCallbacks
+    });
+    return /*#__PURE__*/ jsx(BaseCanvas, {
+        ...canvasProps,
+        mode: "design",
+        children: /*#__PURE__*/ jsx(Panel, {
+            position: "bottom-right",
+            children: /*#__PURE__*/ jsx(CanvasPositionControls, {
+                translations: DefaultCanvasTranslations
+            })
+        })
+    });
+}
 const Default = {
     render: ()=>/*#__PURE__*/ jsx(DefaultStory, {})
 };
 const WithBaseNodes = {
     render: ()=>/*#__PURE__*/ jsx(WithBaseNodesStory, {})
 };
-export { Default, WithBaseNodes, StickyNoteNode_stories as default };
+const WithCallbacks = {
+    render: ()=>/*#__PURE__*/ jsx(WithCallbacksStory, {})
+};
+export { Default, WithBaseNodes, WithCallbacks, StickyNoteNode_stories as default };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uipath/apollo-react",
-  "version": "3.69.1",
+  "version": "3.70.0",
   "description": "Apollo Design System - React component library with Material UI theming",
   "repository": {
     "type": "git",
@@ -201,8 +201,8 @@
     "use-sync-external-store": "^1.2.0",
     "zod": "^4.3.5",
     "zustand": "^5.0.9",
-    "@uipath/apollo-wind": "2.0.0",
-    "@uipath/apollo-core": "5.9.0"
+    "@uipath/apollo-core": "5.9.0",
+    "@uipath/apollo-wind": "2.0.0"
   },
   "devDependencies": {
     "@lingui/cli": "^5.6.1",