@uipath/apollo-react 4.39.0 → 4.39.1

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

@@ -41,6 +41,7 @@ const external_index_cjs_namespaceObject = require("../../index.cjs");
 const react_cjs_namespaceObject = require("../../xyflow/react.cjs");
 const external_motion_react_namespaceObject = require("motion/react");
 const external_react_namespaceObject = require("react");
+const external_react_dom_namespaceObject = require("react-dom");
 const external_react_markdown_namespaceObject = require("react-markdown");
 var external_react_markdown_default = /*#__PURE__*/ __webpack_require__.n(external_react_markdown_namespaceObject);
 const external_remark_breaks_namespaceObject = require("remark-breaks");
@@ -68,6 +69,7 @@ const StickyNoteNodeComponent = ({ id, data, selected, dragging, placeholder = '
     const [isColorPickerOpen, setIsColorPickerOpen] = (0, external_react_namespaceObject.useState)(false);
     const [localContent, setLocalContent] = (0, external_react_namespaceObject.useState)(data.content || '');
     const textAreaRef = (0, external_react_namespaceObject.useRef)(null);
+    const skipBlurRef = (0, external_react_namespaceObject.useRef)(null);
     const { ref: markdownRef, scrollCaptureProps } = (0, external_useScrollCapture_cjs_namespaceObject.useScrollCapture)();
     const colorButtonRef = (0, external_react_namespaceObject.useRef)(null);
     const [activeFormats, setActiveFormats] = (0, external_react_namespaceObject.useState)({
@@ -131,10 +133,15 @@ const StickyNoteNodeComponent = ({ id, data, selected, dragging, placeholder = '
     const handleBlur = (0, external_react_namespaceObject.useCallback)(()=>{
         setIsEditing(false);
         if (readOnly) return;
-        if (localContent !== data.content) {
-            onContentChange?.(localContent);
+        const content = textAreaRef.current?.value ?? localContent;
+        if (skipBlurRef.current === content) {
+            skipBlurRef.current = null;
+            return;
+        }
+        if (content !== data.content) {
+            onContentChange?.(content);
             updateNodeData(id, {
-                content: localContent
+                content
             });
         }
     }, [
@@ -146,6 +153,7 @@ const StickyNoteNodeComponent = ({ id, data, selected, dragging, placeholder = '
         readOnly
     ]);
     const handleChange = (0, external_react_namespaceObject.useCallback)((e)=>{
+        skipBlurRef.current = null;
         setLocalContent(e.target.value);
     }, []);
     const handleFormat = (0, external_react_namespaceObject.useCallback)((result)=>{
@@ -170,6 +178,7 @@ const StickyNoteNodeComponent = ({ id, data, selected, dragging, placeholder = '
     const shortcutKeyDown = (0, external_useMarkdownShortcuts_cjs_namespaceObject.useMarkdownShortcuts)(textAreaRef, handleFormat);
     const handleKeyDown = (0, external_react_namespaceObject.useCallback)((e)=>{
         if ('Escape' === e.key) {
+            skipBlurRef.current = textAreaRef.current?.value ?? localContent;
             setIsEditing(false);
             setLocalContent(data.content || '');
             textAreaRef.current?.blur();
@@ -193,16 +202,35 @@ const StickyNoteNodeComponent = ({ id, data, selected, dragging, placeholder = '
         shortcutKeyDown(e);
     }, [
         data.content,
+        localContent,
         shortcutKeyDown,
         handleFormat
     ]);
     const handleResizeStart = (0, external_react_namespaceObject.useCallback)(()=>{
-        if (isEditing) textAreaRef.current?.blur();
+        if (isEditing) {
+            const content = textAreaRef.current?.value ?? localContent;
+            if (!readOnly && content !== data.content) {
+                skipBlurRef.current = content;
+                (0, external_react_dom_namespaceObject.flushSync)(()=>{
+                    onContentChange?.(content);
+                    updateNodeData(id, {
+                        content
+                    });
+                });
+            }
+            textAreaRef.current?.blur();
+        }
         setIsResizing(true);
         onResizeStart?.();
     }, [
+        data.content,
+        id,
         isEditing,
-        onResizeStart
+        localContent,
+        onContentChange,
+        onResizeStart,
+        readOnly,
+        updateNodeData
     ]);
     const handleResizeEnd = (0, external_react_namespaceObject.useCallback)((_event, params)=>{
         setIsResizing(false);

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;AAiC1E,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;IACnD,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;IAC3B,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;CAC1B;AA2aD,eAAO,MAAM,cAAc,kMAzZxB,mBAAmB,6CAyZqC,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;AAkC1E,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;IACnD,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;IAC3B,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;CAC1B;AAwcD,eAAO,MAAM,cAAc,kMAtbxB,mBAAmB,6CAsbqC,CAAC"}

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

@@ -4,6 +4,7 @@ import { CanvasIcon } from "../../index.js";
 import { NodeResizeControl, useReactFlow } from "../../xyflow/react.js";
 import { AnimatePresence } from "motion/react";
 import { memo, useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { flushSync } from "react-dom";
 import react_markdown from "react-markdown";
 import remark_breaks from "remark-breaks";
 import remark_gfm from "remark-gfm";
@@ -28,6 +29,7 @@ const StickyNoteNodeComponent = ({ id, data, selected, dragging, placeholder = '
     const [isColorPickerOpen, setIsColorPickerOpen] = useState(false);
     const [localContent, setLocalContent] = useState(data.content || '');
     const textAreaRef = useRef(null);
+    const skipBlurRef = useRef(null);
     const { ref: markdownRef, scrollCaptureProps } = useScrollCapture();
     const colorButtonRef = useRef(null);
     const [activeFormats, setActiveFormats] = useState({
@@ -91,10 +93,15 @@ const StickyNoteNodeComponent = ({ id, data, selected, dragging, placeholder = '
     const handleBlur = useCallback(()=>{
         setIsEditing(false);
         if (readOnly) return;
-        if (localContent !== data.content) {
-            onContentChange?.(localContent);
+        const content = textAreaRef.current?.value ?? localContent;
+        if (skipBlurRef.current === content) {
+            skipBlurRef.current = null;
+            return;
+        }
+        if (content !== data.content) {
+            onContentChange?.(content);
             updateNodeData(id, {
-                content: localContent
+                content
             });
         }
     }, [
@@ -106,6 +113,7 @@ const StickyNoteNodeComponent = ({ id, data, selected, dragging, placeholder = '
         readOnly
     ]);
     const handleChange = useCallback((e)=>{
+        skipBlurRef.current = null;
         setLocalContent(e.target.value);
     }, []);
     const handleFormat = useCallback((result)=>{
@@ -130,6 +138,7 @@ const StickyNoteNodeComponent = ({ id, data, selected, dragging, placeholder = '
     const shortcutKeyDown = useMarkdownShortcuts(textAreaRef, handleFormat);
     const handleKeyDown = useCallback((e)=>{
         if ('Escape' === e.key) {
+            skipBlurRef.current = textAreaRef.current?.value ?? localContent;
             setIsEditing(false);
             setLocalContent(data.content || '');
             textAreaRef.current?.blur();
@@ -153,16 +162,35 @@ const StickyNoteNodeComponent = ({ id, data, selected, dragging, placeholder = '
         shortcutKeyDown(e);
     }, [
         data.content,
+        localContent,
         shortcutKeyDown,
         handleFormat
     ]);
     const handleResizeStart = useCallback(()=>{
-        if (isEditing) textAreaRef.current?.blur();
+        if (isEditing) {
+            const content = textAreaRef.current?.value ?? localContent;
+            if (!readOnly && content !== data.content) {
+                skipBlurRef.current = content;
+                flushSync(()=>{
+                    onContentChange?.(content);
+                    updateNodeData(id, {
+                        content
+                    });
+                });
+            }
+            textAreaRef.current?.blur();
+        }
         setIsResizing(true);
         onResizeStart?.();
     }, [
+        data.content,
+        id,
         isEditing,
-        onResizeStart
+        localContent,
+        onContentChange,
+        onResizeStart,
+        readOnly,
+        updateNodeData
     ]);
     const handleResizeEnd = useCallback((_event, params)=>{
         setIsResizing(false);

package/package.json

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