@uipath/apollo-react 4.47.1 → 4.48.1

package/dist/canvas/components/ButtonHandle/HandleButton.cjs

@@ -109,7 +109,9 @@ const HandleButton = /*#__PURE__*/ (0, external_react_namespaceObject.memo)(({ v
             })
         ]
     });
+    const shouldRenderPortal = Boolean(visible || label && labelVisible);
     if (portal) {
+        if (!shouldRenderPortal) return null;
         const { nodeId, ...anchor } = portal;
         return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_NodeViewportOverlay_cjs_namespaceObject.NodeViewportOverlay, {
             nodeId: nodeId,

package/dist/canvas/components/ButtonHandle/HandleButton.d.ts

@@ -19,7 +19,7 @@ export declare const HandleButton: import("react").MemoExoticComponent<({ visibl
     labelIcon?: React.ReactNode;
     labelBackgroundColor?: string;
     portal?: HandleButtonPortal;
-}) => import("react/jsx-runtime").JSX.Element>;
+}) => import("react/jsx-runtime").JSX.Element | null>;
 export declare const HandleHoverBridge: import("react").MemoExoticComponent<({ position, visible }: {
     position: Position;
     visible?: boolean;

package/dist/canvas/components/ButtonHandle/HandleButton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"HandleButton.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/ButtonHandle/HandleButton.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,QAAQ,EAAE,MAAM,0CAA0C,CAAC;AAepE,MAAM,MAAM,kBAAkB,GAAG;IAC/B,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,MAAM,CAAC;IACb,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,SAAS,EAAE,MAAM,CAAC;CACnB,CAAC;AAUF,eAAO,MAAM,YAAY,8KAapB;IACD,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,QAAQ,EAAE,QAAQ,CAAC;IACnB,QAAQ,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IAC5C,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAC;IACnD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC5B,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,MAAM,CAAC,EAAE,kBAAkB,CAAC;CAC7B,6CA+GF,CAAC;AA0CF,eAAO,MAAM,iBAAiB,8DACJ;IAAE,QAAQ,EAAE,QAAQ,CAAC;IAAC,OAAO,CAAC,EAAE,OAAO,CAAA;CAAE,oDAOlE,CAAC"}
+{"version":3,"file":"HandleButton.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/ButtonHandle/HandleButton.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,QAAQ,EAAE,MAAM,0CAA0C,CAAC;AAepE,MAAM,MAAM,kBAAkB,GAAG;IAC/B,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,MAAM,CAAC;IACb,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,SAAS,EAAE,MAAM,CAAC;CACnB,CAAC;AAUF,eAAO,MAAM,YAAY,8KAapB;IACD,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,QAAQ,EAAE,QAAQ,CAAC;IACnB,QAAQ,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IAC5C,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAC;IACnD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC5B,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,MAAM,CAAC,EAAE,kBAAkB,CAAC;CAC7B,oDAqHF,CAAC;AA0CF,eAAO,MAAM,iBAAiB,8DACJ;IAAE,QAAQ,EAAE,QAAQ,CAAC;IAAC,OAAO,CAAC,EAAE,OAAO,CAAA;CAAE,oDAOlE,CAAC"}

package/dist/canvas/components/ButtonHandle/HandleButton.js

@@ -80,7 +80,9 @@ const HandleButton = /*#__PURE__*/ memo(({ visible, labelVisible, position, onAc
             })
         ]
     });
+    const shouldRenderPortal = Boolean(visible || label && labelVisible);
     if (portal) {
+        if (!shouldRenderPortal) return null;
         const { nodeId, ...anchor } = portal;
         return /*#__PURE__*/ jsx(NodeViewportOverlay, {
             nodeId: nodeId,

package/dist/canvas/components/Edges/shared/hooks/useExecutionEdge.cjs

@@ -28,6 +28,7 @@ __webpack_require__.d(__webpack_exports__, {
 });
 const external_react_namespaceObject = require("react");
 const index_cjs_namespaceObject = require("../../../../hooks/index.cjs");
+const execution_cjs_namespaceObject = require("../../../../types/execution.cjs");
 const external_EdgeUtils_cjs_namespaceObject = require("../../EdgeUtils.cjs");
 function resolveStatus(executionState, validation) {
     if (executionState) return executionState?.status ?? executionState;
@@ -39,9 +40,13 @@ function useExecutionEdge(args) {
     const validation = (0, index_cjs_namespaceObject.useElementValidationStatus)(edgeId);
     const status = enabled ? resolveStatus(executionState, validation) : void 0;
     const statusColor = status ? external_EdgeUtils_cjs_namespaceObject.edgeTargetStatusToEdgeColor[status] : void 0;
-    const animation = (0, external_react_namespaceObject.useMemo)(()=>(0, external_EdgeUtils_cjs_namespaceObject.getStatusAnimation)(status, edgePath), [
+    const animationPath = status === execution_cjs_namespaceObject.ElementStatusValues.InProgress ? edgePath : void 0;
+    const animation = (0, external_react_namespaceObject.useMemo)(()=>{
+        if (null == animationPath) return null;
+        return (0, external_EdgeUtils_cjs_namespaceObject.getStatusAnimation)(status, animationPath);
+    }, [
         status,
-        edgePath
+        animationPath
     ]);
     return {
         statusColor,

package/dist/canvas/components/Edges/shared/hooks/useExecutionEdge.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useExecutionEdge.d.ts","sourceRoot":"","sources":["../../../../../../src/canvas/components/Edges/shared/hooks/useExecutionEdge.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,SAAS,EAAW,MAAM,OAAO,CAAC;AAMhD,MAAM,MAAM,oBAAoB,GAAG;IACjC,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,EAAE,MAAM,CAAC;IAEf,QAAQ,EAAE,MAAM,CAAC;IAEjB,OAAO,EAAE,OAAO,CAAC;CAClB,CAAC;AAEF,MAAM,MAAM,aAAa,GAAG;IAC1B,WAAW,EAAE,MAAM,GAAG,SAAS,CAAC;IAChC,SAAS,EAAE,SAAS,CAAC;CACtB,CAAC;AAeF,wBAAgB,gBAAgB,CAAC,IAAI,EAAE,oBAAoB,GAAG,aAAa,CAW1E"}
+{"version":3,"file":"useExecutionEdge.d.ts","sourceRoot":"","sources":["../../../../../../src/canvas/components/Edges/shared/hooks/useExecutionEdge.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,SAAS,EAAW,MAAM,OAAO,CAAC;AAUhD,MAAM,MAAM,oBAAoB,GAAG;IACjC,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,EAAE,MAAM,CAAC;IAEf,QAAQ,EAAE,MAAM,CAAC;IAEjB,OAAO,EAAE,OAAO,CAAC;CAClB,CAAC;AAEF,MAAM,MAAM,aAAa,GAAG;IAC1B,WAAW,EAAE,MAAM,GAAG,SAAS,CAAC;IAChC,SAAS,EAAE,SAAS,CAAC;CACtB,CAAC;AAeF,wBAAgB,gBAAgB,CAAC,IAAI,EAAE,oBAAoB,GAAG,aAAa,CAmB1E"}

package/dist/canvas/components/Edges/shared/hooks/useExecutionEdge.js

@@ -1,5 +1,6 @@
 import { useMemo } from "react";
 import { useEdgeExecutionState, useElementValidationStatus } from "../../../../hooks/index.js";
+import { ElementStatusValues } from "../../../../types/execution.js";
 import { edgeTargetStatusToEdgeColor, getStatusAnimation } from "../../EdgeUtils.js";
 function resolveStatus(executionState, validation) {
     if (executionState) return executionState?.status ?? executionState;
@@ -11,9 +12,13 @@ function useExecutionEdge(args) {
     const validation = useElementValidationStatus(edgeId);
     const status = enabled ? resolveStatus(executionState, validation) : void 0;
     const statusColor = status ? edgeTargetStatusToEdgeColor[status] : void 0;
-    const animation = useMemo(()=>getStatusAnimation(status, edgePath), [
+    const animationPath = status === ElementStatusValues.InProgress ? edgePath : void 0;
+    const animation = useMemo(()=>{
+        if (null == animationPath) return null;
+        return getStatusAnimation(status, animationPath);
+    }, [
         status,
-        edgePath
+        animationPath
     ]);
     return {
         statusColor,

package/dist/canvas/components/LoopNode/LoopNode.cjs

@@ -117,7 +117,7 @@ function resolveInteractionState(dragging, selected, isHovered) {
     return 'default';
 }
 function useHasChildNodes(id, enabled) {
-    return (0, react_cjs_namespaceObject.useStore)((0, external_react_namespaceObject.useCallback)((state)=>!enabled || state.nodes.some((node)=>node.parentId === id), [
+    return (0, react_cjs_namespaceObject.useStore)((0, external_react_namespaceObject.useCallback)((state)=>!enabled || (state.parentLookup.get(id)?.size ?? 0) > 0, [
         id,
         enabled
     ]));
@@ -352,7 +352,7 @@ function LoopNodeComponent(props) {
                         hasTopLeftAdornment: hasTopLeftAdornment,
                         hasTopRightAdornment: hasTopRightAdornment
                     }),
-                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(BodyFrame, {
+                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(LoopNode_BodyFrame, {
                         isEmpty: showEmptyStateButton,
                         isLoading: isLoading
                     })
@@ -363,10 +363,10 @@ function LoopNodeComponent(props) {
                     shape: "rectangle",
                     children: adornments[slot]
                 }, slot) : null),
-            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(ResizeCornerIndicators, {
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(LoopNode_ResizeCornerIndicators, {
                 visible: resizeControlsVisible
             }),
-            resizeControlsMounted ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(ResizeControls, {
+            resizeControlsMounted ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(LoopNode_ResizeControls, {
                 minimums: resizeMinimums,
                 onResize: handleResize,
                 onResizeStart: handleResizeStart,
@@ -478,7 +478,7 @@ function EmptyState({ label, onAddFirstChild }) {
         })
     });
 }
-function BodyFrame({ isEmpty, isLoading }) {
+const LoopNode_BodyFrame = /*#__PURE__*/ (0, external_react_namespaceObject.memo)(function({ isEmpty, isLoading }) {
     return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
         "data-testid": "loop-body-frame",
         "data-empty": isEmpty ? 'true' : 'false',
@@ -487,8 +487,8 @@ function BodyFrame({ isEmpty, isLoading }) {
             className: "m-6 h-14 w-full animate-pulse rounded-[18px] bg-(--canvas-background-overlay)"
         }) : null
     });
-}
-function ResizeControls({ minimums = DEFAULT_RESIZE_MINIMUMS, onResize, onResizeStart, onResizeEnd }) {
+});
+const LoopNode_ResizeControls = /*#__PURE__*/ (0, external_react_namespaceObject.memo)(function({ minimums = DEFAULT_RESIZE_MINIMUMS, onResize, onResizeStart, onResizeEnd }) {
     return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(jsx_runtime_namespaceObject.Fragment, {
         children: RESIZE_CONTROLS.map(({ position, widthSide, heightSide, cursor })=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(react_cjs_namespaceObject.NodeResizeControl, {
                 style: RESIZE_CONTROL_STYLE,
@@ -506,8 +506,8 @@ function ResizeControls({ minimums = DEFAULT_RESIZE_MINIMUMS, onResize, onResize
                 })
             }, position))
     });
-}
-function ResizeCornerIndicators({ visible }) {
+});
+const LoopNode_ResizeCornerIndicators = /*#__PURE__*/ (0, external_react_namespaceObject.memo)(function({ visible }) {
     return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(jsx_runtime_namespaceObject.Fragment, {
         children: RESIZE_CONTROLS.map(({ position, indicatorClassName })=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
                 "aria-hidden": true,
@@ -515,7 +515,7 @@ function ResizeCornerIndicators({ visible }) {
                 className: (0, apollo_wind_namespaceObject.cn)('pointer-events-none absolute h-2 w-2 rounded-full bg-brand transition-opacity', indicatorClassName, visible ? 'opacity-100' : 'opacity-0')
             }, position))
     });
-}
+});
 function HandleGroups({ groups, ...handleGroupProps }) {
     if (0 === groups.length) return null;
     return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(jsx_runtime_namespaceObject.Fragment, {

package/dist/canvas/components/LoopNode/LoopNode.js

@@ -89,7 +89,7 @@ function resolveInteractionState(dragging, selected, isHovered) {
     return 'default';
 }
 function useHasChildNodes(id, enabled) {
-    return useStore(useCallback((state)=>!enabled || state.nodes.some((node)=>node.parentId === id), [
+    return useStore(useCallback((state)=>!enabled || (state.parentLookup.get(id)?.size ?? 0) > 0, [
         id,
         enabled
     ]));
@@ -324,7 +324,7 @@ function LoopNodeComponent(props) {
                         hasTopLeftAdornment: hasTopLeftAdornment,
                         hasTopRightAdornment: hasTopRightAdornment
                     }),
-                    /*#__PURE__*/ jsx(BodyFrame, {
+                    /*#__PURE__*/ jsx(LoopNode_BodyFrame, {
                         isEmpty: showEmptyStateButton,
                         isLoading: isLoading
                     })
@@ -335,10 +335,10 @@ function LoopNodeComponent(props) {
                     shape: "rectangle",
                     children: adornments[slot]
                 }, slot) : null),
-            /*#__PURE__*/ jsx(ResizeCornerIndicators, {
+            /*#__PURE__*/ jsx(LoopNode_ResizeCornerIndicators, {
                 visible: resizeControlsVisible
             }),
-            resizeControlsMounted ? /*#__PURE__*/ jsx(ResizeControls, {
+            resizeControlsMounted ? /*#__PURE__*/ jsx(LoopNode_ResizeControls, {
                 minimums: resizeMinimums,
                 onResize: handleResize,
                 onResizeStart: handleResizeStart,
@@ -450,7 +450,7 @@ function EmptyState({ label, onAddFirstChild }) {
         })
     });
 }
-function BodyFrame({ isEmpty, isLoading }) {
+const LoopNode_BodyFrame = /*#__PURE__*/ memo(function({ isEmpty, isLoading }) {
     return /*#__PURE__*/ jsx("div", {
         "data-testid": "loop-body-frame",
         "data-empty": isEmpty ? 'true' : 'false',
@@ -459,8 +459,8 @@ function BodyFrame({ isEmpty, isLoading }) {
             className: "m-6 h-14 w-full animate-pulse rounded-[18px] bg-(--canvas-background-overlay)"
         }) : null
     });
-}
-function ResizeControls({ minimums = DEFAULT_RESIZE_MINIMUMS, onResize, onResizeStart, onResizeEnd }) {
+});
+const LoopNode_ResizeControls = /*#__PURE__*/ memo(function({ minimums = DEFAULT_RESIZE_MINIMUMS, onResize, onResizeStart, onResizeEnd }) {
     return /*#__PURE__*/ jsx(Fragment, {
         children: RESIZE_CONTROLS.map(({ position, widthSide, heightSide, cursor })=>/*#__PURE__*/ jsx(NodeResizeControl, {
                 style: RESIZE_CONTROL_STYLE,
@@ -478,8 +478,8 @@ function ResizeControls({ minimums = DEFAULT_RESIZE_MINIMUMS, onResize, onResize
                 })
             }, position))
     });
-}
-function ResizeCornerIndicators({ visible }) {
+});
+const LoopNode_ResizeCornerIndicators = /*#__PURE__*/ memo(function({ visible }) {
     return /*#__PURE__*/ jsx(Fragment, {
         children: RESIZE_CONTROLS.map(({ position, indicatorClassName })=>/*#__PURE__*/ jsx("div", {
                 "aria-hidden": true,
@@ -487,7 +487,7 @@ function ResizeCornerIndicators({ visible }) {
                 className: cn('pointer-events-none absolute h-2 w-2 rounded-full bg-brand transition-opacity', indicatorClassName, visible ? 'opacity-100' : 'opacity-0')
             }, position))
     });
-}
+});
 function HandleGroups({ groups, ...handleGroupProps }) {
     if (0 === groups.length) return null;
     return /*#__PURE__*/ jsx(Fragment, {

package/dist/canvas/components/NodeViewportOverlay.cjs

@@ -28,25 +28,37 @@ __webpack_require__.d(__webpack_exports__, {
 });
 const jsx_runtime_namespaceObject = require("react/jsx-runtime");
 const react_cjs_namespaceObject = require("../xyflow/react.cjs");
+const external_react_namespaceObject = require("react");
+const shallow_namespaceObject = require("zustand/shallow");
 const NODE_VIEWPORT_OVERLAY_Z_INDEX = {
     nodeHandleAffordance: 1002,
     nodeToolbar: 1003
 };
 function NodeViewportOverlay({ nodeId, anchor, layer, children }) {
-    const internalNode = (0, react_cjs_namespaceObject.useInternalNode)(nodeId);
-    const positionAbsolute = internalNode?.internals.positionAbsolute;
-    const width = anchor?.width ?? internalNode?.measured?.width ?? internalNode?.width;
-    const height = anchor?.height ?? internalNode?.measured?.height ?? internalNode?.height;
-    if (!positionAbsolute || null == width || null == height) return children;
+    const geometry = (0, react_cjs_namespaceObject.useStore)((0, external_react_namespaceObject.useCallback)((state)=>{
+        const internalNode = state.nodeLookup.get(nodeId);
+        const positionAbsolute = internalNode?.internals.positionAbsolute;
+        return {
+            x: positionAbsolute?.x,
+            y: positionAbsolute?.y,
+            width: anchor?.width ?? internalNode?.measured?.width ?? internalNode?.width,
+            height: anchor?.height ?? internalNode?.measured?.height ?? internalNode?.height
+        };
+    }, [
+        anchor?.height,
+        anchor?.width,
+        nodeId
+    ]), shallow_namespaceObject.shallow);
+    if (null == geometry.x || null == geometry.y || null == geometry.width || null == geometry.height) return children;
     return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(react_cjs_namespaceObject.ViewportPortal, {
         children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
             className: "absolute pointer-events-none",
             style: {
                 position: 'absolute',
-                left: positionAbsolute.x + (anchor?.left ?? 0),
-                top: positionAbsolute.y + (anchor?.top ?? 0),
-                width,
-                height,
+                left: geometry.x + (anchor?.left ?? 0),
+                top: geometry.y + (anchor?.top ?? 0),
+                width: geometry.width,
+                height: geometry.height,
                 transform: anchor?.transform,
                 zIndex: layer ? NODE_VIEWPORT_OVERLAY_Z_INDEX[layer] : void 0
             },

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

@@ -1 +1 @@
-{"version":3,"file":"NodeViewportOverlay.d.ts","sourceRoot":"","sources":["../../../src/canvas/components/NodeViewportOverlay.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAItD,QAAA,MAAM,6BAA6B;;;CAGzB,CAAC;AAEX,KAAK,wBAAwB,GAAG,MAAM,OAAO,6BAA6B,CAAC;AAE3E,MAAM,MAAM,yBAAyB,GAAG;IACtC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,aAAa,CAAC,WAAW,CAAC,CAAC;CACxC,CAAC;AAEF,MAAM,MAAM,wBAAwB,GAAG;IACrC,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,yBAAyB,CAAC;IACnC,KAAK,CAAC,EAAE,wBAAwB,CAAC;IACjC,QAAQ,EAAE,SAAS,CAAC;CACrB,CAAC;AAEF,wBAAgB,mBAAmB,CAAC,EAAE,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE,wBAAwB,2UA4BhG"}
+{"version":3,"file":"NodeViewportOverlay.d.ts","sourceRoot":"","sources":["../../../src/canvas/components/NodeViewportOverlay.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAMtD,QAAA,MAAM,6BAA6B;;;CAGzB,CAAC;AAEX,KAAK,wBAAwB,GAAG,MAAM,OAAO,6BAA6B,CAAC;AAE3E,MAAM,MAAM,yBAAyB,GAAG;IACtC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,aAAa,CAAC,WAAW,CAAC,CAAC;CACxC,CAAC;AAEF,MAAM,MAAM,wBAAwB,GAAG;IACrC,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,yBAAyB,CAAC;IACnC,KAAK,CAAC,EAAE,wBAAwB,CAAC;IACjC,QAAQ,EAAE,SAAS,CAAC;CACrB,CAAC;AASF,wBAAgB,mBAAmB,CAAC,EAAE,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE,wBAAwB,2UA8ChG"}

package/dist/canvas/components/NodeViewportOverlay.js

@@ -1,24 +1,36 @@
 import { jsx } from "react/jsx-runtime";
-import { ViewportPortal, useInternalNode } from "../xyflow/react.js";
+import { ViewportPortal, useStore } from "../xyflow/react.js";
+import { useCallback } from "react";
+import { shallow } from "zustand/shallow";
 const NODE_VIEWPORT_OVERLAY_Z_INDEX = {
     nodeHandleAffordance: 1002,
     nodeToolbar: 1003
 };
 function NodeViewportOverlay({ nodeId, anchor, layer, children }) {
-    const internalNode = useInternalNode(nodeId);
-    const positionAbsolute = internalNode?.internals.positionAbsolute;
-    const width = anchor?.width ?? internalNode?.measured?.width ?? internalNode?.width;
-    const height = anchor?.height ?? internalNode?.measured?.height ?? internalNode?.height;
-    if (!positionAbsolute || null == width || null == height) return children;
+    const geometry = useStore(useCallback((state)=>{
+        const internalNode = state.nodeLookup.get(nodeId);
+        const positionAbsolute = internalNode?.internals.positionAbsolute;
+        return {
+            x: positionAbsolute?.x,
+            y: positionAbsolute?.y,
+            width: anchor?.width ?? internalNode?.measured?.width ?? internalNode?.width,
+            height: anchor?.height ?? internalNode?.measured?.height ?? internalNode?.height
+        };
+    }, [
+        anchor?.height,
+        anchor?.width,
+        nodeId
+    ]), shallow);
+    if (null == geometry.x || null == geometry.y || null == geometry.width || null == geometry.height) return children;
     return /*#__PURE__*/ jsx(ViewportPortal, {
         children: /*#__PURE__*/ jsx("div", {
             className: "absolute pointer-events-none",
             style: {
                 position: 'absolute',
-                left: positionAbsolute.x + (anchor?.left ?? 0),
-                top: positionAbsolute.y + (anchor?.top ?? 0),
-                width,
-                height,
+                left: geometry.x + (anchor?.left ?? 0),
+                top: geometry.y + (anchor?.top ?? 0),
+                width: geometry.width,
+                height: geometry.height,
                 transform: anchor?.transform,
                 zIndex: layer ? NODE_VIEWPORT_OVERLAY_Z_INDEX[layer] : void 0
             },

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

@@ -50,6 +50,8 @@ const external_remark_gfm_namespaceObject = require("remark-gfm");
 var external_remark_gfm_default = /*#__PURE__*/ __webpack_require__.n(external_remark_gfm_namespaceObject);
 const index_cjs_namespaceObject = require("../../../i18n/index.cjs");
 const external_constants_cjs_namespaceObject = require("../../constants.cjs");
+const nodePropsEqual_cjs_namespaceObject = require("../../utils/nodePropsEqual.cjs");
+const SelectionStateContext_cjs_namespaceObject = require("../BaseCanvas/SelectionStateContext.cjs");
 const external_NodeViewportOverlay_cjs_namespaceObject = require("../NodeViewportOverlay.cjs");
 const external_Toolbar_index_cjs_namespaceObject = require("../Toolbar/index.cjs");
 const external_FormattingToolbar_cjs_namespaceObject = require("./FormattingToolbar.cjs");
@@ -64,6 +66,7 @@ const minHeight = 8 * external_constants_cjs_namespaceObject.GRID_SPACING;
 const StickyNoteNodeComponent = ({ id, data, selected, dragging, placeholder = 'Add text', renderPlaceholderOnSelect = false, readOnly = false, onContentChange, onColorChange, onResize, onResizeStart, onResizeEnd })=>{
     const { _ } = (0, index_cjs_namespaceObject.useSafeLingui)();
     const { updateNodeData, deleteElements } = (0, react_cjs_namespaceObject.useReactFlow)();
+    const { multipleNodesSelected } = (0, SelectionStateContext_cjs_namespaceObject.useSelectionState)();
     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);
@@ -103,10 +106,12 @@ const StickyNoteNodeComponent = ({ id, data, selected, dragging, placeholder = '
         readOnly
     ]);
     (0, external_react_namespaceObject.useEffect)(()=>{
-        if (!selected || isResizing) setIsColorPickerOpen(false);
+        if (!selected || dragging || isResizing || multipleNodesSelected) setIsColorPickerOpen(false);
     }, [
         selected,
-        isResizing
+        dragging,
+        isResizing,
+        multipleNodesSelected
     ]);
     (0, external_react_namespaceObject.useEffect)(()=>{
         if (readOnly) {
@@ -355,6 +360,7 @@ const StickyNoteNodeComponent = ({ id, data, selected, dragging, placeholder = '
         color,
         handleDelete
     ]);
+    const shouldRenderToolbarOverlay = !readOnly && selected && !dragging && !isResizing && !multipleNodesSelected;
     return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(jsx_runtime_namespaceObject.Fragment, {
         children: [
             /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(react_namespaceObject.Global, {
@@ -487,13 +493,13 @@ const StickyNoteNodeComponent = ({ id, data, selected, dragging, placeholder = '
                             })
                         ]
                     }),
-                    !readOnly && selected && !dragging && !isResizing && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_Toolbar_index_cjs_namespaceObject.NodeToolbar, {
+                    shouldRenderToolbarOverlay && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_Toolbar_index_cjs_namespaceObject.NodeToolbar, {
                         nodeId: id,
                         config: toolbarConfig,
                         expanded: true,
                         portalToNodeOverlay: true
                     }),
-                    !readOnly && selected && !dragging && !isResizing && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_NodeViewportOverlay_cjs_namespaceObject.NodeViewportOverlay, {
+                    shouldRenderToolbarOverlay && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_NodeViewportOverlay_cjs_namespaceObject.NodeViewportOverlay, {
                         nodeId: id,
                         layer: "nodeToolbar",
                         children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_motion_react_namespaceObject.AnimatePresence, {
@@ -548,7 +554,7 @@ const StickyNoteNodeComponent = ({ id, data, selected, dragging, placeholder = '
         ]
     });
 };
-const StickyNoteNode = /*#__PURE__*/ (0, external_react_namespaceObject.memo)(StickyNoteNodeComponent);
+const StickyNoteNode = /*#__PURE__*/ (0, external_react_namespaceObject.memo)(StickyNoteNodeComponent, nodePropsEqual_cjs_namespaceObject.areNodePropsEqualIgnoringPosition);
 exports.StickyNoteNode = __webpack_exports__.StickyNoteNode;
 for(var __rspack_i in __webpack_exports__)if (-1 === [
     "StickyNoteNode"

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;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"}
+{"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;AAoC1E,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;AA4cD,eAAO,MAAM,cAAc,kMA1bxB,mBAAmB,6CA0bwE,CAAC"}

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

@@ -10,6 +10,8 @@ import remark_breaks from "remark-breaks";
 import remark_gfm from "remark-gfm";
 import { useSafeLingui } from "../../../i18n/index.js";
 import { GRID_SPACING } from "../../constants.js";
+import { areNodePropsEqualIgnoringPosition } from "../../utils/nodePropsEqual.js";
+import { useSelectionState } from "../BaseCanvas/SelectionStateContext.js";
 import { NodeViewportOverlay } from "../NodeViewportOverlay.js";
 import { NodeToolbar } from "../Toolbar/index.js";
 import { FormattingToolbar } from "./FormattingToolbar.js";
@@ -24,6 +26,7 @@ const minHeight = 8 * GRID_SPACING;
 const StickyNoteNodeComponent = ({ id, data, selected, dragging, placeholder = 'Add text', renderPlaceholderOnSelect = false, readOnly = false, onContentChange, onColorChange, onResize, onResizeStart, onResizeEnd })=>{
     const { _ } = useSafeLingui();
     const { updateNodeData, deleteElements } = useReactFlow();
+    const { multipleNodesSelected } = useSelectionState();
     const [isEditing, setIsEditing] = useState(!readOnly && (data.autoFocus ?? false));
     const [isResizing, setIsResizing] = useState(false);
     const [isColorPickerOpen, setIsColorPickerOpen] = useState(false);
@@ -63,10 +66,12 @@ const StickyNoteNodeComponent = ({ id, data, selected, dragging, placeholder = '
         readOnly
     ]);
     useEffect(()=>{
-        if (!selected || isResizing) setIsColorPickerOpen(false);
+        if (!selected || dragging || isResizing || multipleNodesSelected) setIsColorPickerOpen(false);
     }, [
         selected,
-        isResizing
+        dragging,
+        isResizing,
+        multipleNodesSelected
     ]);
     useEffect(()=>{
         if (readOnly) {
@@ -315,6 +320,7 @@ const StickyNoteNodeComponent = ({ id, data, selected, dragging, placeholder = '
         color,
         handleDelete
     ]);
+    const shouldRenderToolbarOverlay = !readOnly && selected && !dragging && !isResizing && !multipleNodesSelected;
     return /*#__PURE__*/ jsxs(Fragment, {
         children: [
             /*#__PURE__*/ jsx(Global, {
@@ -447,13 +453,13 @@ const StickyNoteNodeComponent = ({ id, data, selected, dragging, placeholder = '
                             })
                         ]
                     }),
-                    !readOnly && selected && !dragging && !isResizing && /*#__PURE__*/ jsx(NodeToolbar, {
+                    shouldRenderToolbarOverlay && /*#__PURE__*/ jsx(NodeToolbar, {
                         nodeId: id,
                         config: toolbarConfig,
                         expanded: true,
                         portalToNodeOverlay: true
                     }),
-                    !readOnly && selected && !dragging && !isResizing && /*#__PURE__*/ jsx(NodeViewportOverlay, {
+                    shouldRenderToolbarOverlay && /*#__PURE__*/ jsx(NodeViewportOverlay, {
                         nodeId: id,
                         layer: "nodeToolbar",
                         children: /*#__PURE__*/ jsx(AnimatePresence, {
@@ -508,5 +514,5 @@ const StickyNoteNodeComponent = ({ id, data, selected, dragging, placeholder = '
         ]
     });
 };
-const StickyNoteNode = /*#__PURE__*/ memo(StickyNoteNodeComponent);
+const StickyNoteNode = /*#__PURE__*/ memo(StickyNoteNodeComponent, areNodePropsEqualIgnoringPosition);
 export { StickyNoteNode };

package/dist/canvas/components/Toolbar/NodeToolbar/NodeToolbar.cjs

@@ -128,6 +128,7 @@ const NodeToolbarComponent = ({ nodeId, config, expanded, hidden, offsetToolbar,
         displayState
     ]);
     if (0 === config.actions.length && (!config.overflowActions || 0 === config.overflowActions.length)) return null;
+    if (portalToNodeOverlay && 'hidden' === displayState) return null;
     const toolbarContent = /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(react_namespaceObject.AnimatePresence, {
         children: 'hidden' !== displayState && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
             className: positionerClassName,

package/dist/canvas/components/Toolbar/NodeToolbar/NodeToolbar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"NodeToolbar.d.ts","sourceRoot":"","sources":["../../../../../src/canvas/components/Toolbar/NodeToolbar/NodeToolbar.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AAwR5D,eAAO,MAAM,WAAW,kHAxMrB,gBAAgB,oDAwMkC,CAAC"}
+{"version":3,"file":"NodeToolbar.d.ts","sourceRoot":"","sources":["../../../../../src/canvas/components/Toolbar/NodeToolbar/NodeToolbar.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AA4R5D,eAAO,MAAM,WAAW,kHA5MrB,gBAAgB,oDA4MkC,CAAC"}

package/dist/canvas/components/Toolbar/NodeToolbar/NodeToolbar.js

@@ -100,6 +100,7 @@ const NodeToolbarComponent = ({ nodeId, config, expanded, hidden, offsetToolbar,
         displayState
     ]);
     if (0 === config.actions.length && (!config.overflowActions || 0 === config.overflowActions.length)) return null;
+    if (portalToNodeOverlay && 'hidden' === displayState) return null;
     const toolbarContent = /*#__PURE__*/ jsx(AnimatePresence, {
         children: 'hidden' !== displayState && /*#__PURE__*/ jsxs("div", {
             className: positionerClassName,

package/dist/canvas/storybook-utils/components/StoryInfoPanel.d.ts

@@ -6,5 +6,5 @@ export interface StoryInfoPanelProps {
     defaultCollapsed?: boolean;
     position?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
 }
-export declare function StoryInfoPanel({ title, description, children, collapsible, defaultCollapsed, position, }: StoryInfoPanelProps): import("react/jsx-runtime").JSX.Element;
+export declare const StoryInfoPanel: import("react").NamedExoticComponent<StoryInfoPanelProps>;
 //# sourceMappingURL=StoryInfoPanel.d.ts.map

package/dist/canvas/storybook-utils/components/StoryInfoPanel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"StoryInfoPanel.d.ts","sourceRoot":"","sources":["../../../../src/canvas/storybook-utils/components/StoryInfoPanel.tsx"],"names":[],"mappings":"AAMA,MAAM,WAAW,mBAAmB;IAElC,KAAK,EAAE,MAAM,CAAC;IAEd,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAE3B,WAAW,CAAC,EAAE,OAAO,CAAC;IAEtB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAE3B,QAAQ,CAAC,EAAE,UAAU,GAAG,WAAW,GAAG,aAAa,GAAG,cAAc,CAAC;CACtE;AAED,wBAAgB,cAAc,CAAC,EAC7B,KAAK,EACL,WAAW,EACX,QAAQ,EACR,WAAmB,EACnB,gBAAwB,EACxB,QAAqB,GACtB,EAAE,mBAAmB,2CAmDrB"}
+{"version":3,"file":"StoryInfoPanel.d.ts","sourceRoot":"","sources":["../../../../src/canvas/storybook-utils/components/StoryInfoPanel.tsx"],"names":[],"mappings":"AAMA,MAAM,WAAW,mBAAmB;IAElC,KAAK,EAAE,MAAM,CAAC;IAEd,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAE3B,WAAW,CAAC,EAAE,OAAO,CAAC;IAEtB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAE3B,QAAQ,CAAC,EAAE,UAAU,GAAG,WAAW,GAAG,aAAa,GAAG,cAAc,CAAC;CACtE;AAED,eAAO,MAAM,cAAc,2DA0DzB,CAAC"}

package/dist/canvas/storybook-utils/manifests/node-definitions.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"node-definitions.d.ts","sourceRoot":"","sources":["../../../../src/canvas/storybook-utils/manifests/node-definitions.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,8BAA8B,CAAC;AAEjE,eAAO,MAAM,gBAAgB,EAAE,YAAY,EA65B1C,CAAC"}
+{"version":3,"file":"node-definitions.d.ts","sourceRoot":"","sources":["../../../../src/canvas/storybook-utils/manifests/node-definitions.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,8BAA8B,CAAC;AAEjE,eAAO,MAAM,gBAAgB,EAAE,YAAY,EA45B1C,CAAC"}