@uipath/apollo-react 6.25.0 → 6.26.0

package/dist/canvas/components/BaseCanvas/BaseCanvas.cjs

@@ -39,10 +39,22 @@ const external_ReadOnlyNodesContext_cjs_namespaceObject = require("./ReadOnlyNod
 const BaseCanvasInnerComponent = (props)=>{
     const { innerRef, fitViewOptions: fitViewOptionsProps, ...canvasProps } = props;
     const fitViewOptions = fitViewOptionsProps ?? external_BaseCanvas_constants_cjs_namespaceObject.BASE_CANVAS_DEFAULTS.fitViewOptions;
-    const { nodes = [], edges = [], nodeTypes, edgeTypes, children, mode = 'view', readOnlyNodeIds, showBackground = true, backgroundColor = external_BaseCanvas_constants_cjs_namespaceObject.BASE_CANVAS_DEFAULTS.background.color, backgroundSecondaryColor = external_BaseCanvas_constants_cjs_namespaceObject.BASE_CANVAS_DEFAULTS.background.bgColor, backgroundVariant = external_BaseCanvas_constants_cjs_namespaceObject.BASE_CANVAS_DEFAULTS.background.variant, backgroundGap = external_BaseCanvas_constants_cjs_namespaceObject.BASE_CANVAS_DEFAULTS.background.gap, backgroundSize = external_BaseCanvas_constants_cjs_namespaceObject.BASE_CANVAS_DEFAULTS.background.size, isDarkMode, locale, minZoom = external_BaseCanvas_constants_cjs_namespaceObject.BASE_CANVAS_DEFAULTS.zoom.min, maxZoom = external_BaseCanvas_constants_cjs_namespaceObject.BASE_CANVAS_DEFAULTS.zoom.max, defaultViewport = external_BaseCanvas_constants_cjs_namespaceObject.BASE_CANVAS_DEFAULTS.defaultViewport, defaultEdgeOptions = external_BaseCanvas_constants_cjs_namespaceObject.BASE_CANVAS_DEFAULTS.edge, stickyNoteOptions, onNodesChange, onEdgesChange, onConnect, onConnectStart, onConnectEnd, onNodeClick, onNodeDragStart, onNodeDrag, onNodeDragStop, onPaneClick, onInit, onSelectionChange, proOptions = external_BaseCanvas_constants_cjs_namespaceObject.BASE_CANVAS_DEFAULTS.pro, connectionMode = react_cjs_namespaceObject.ConnectionMode.Loose, connectionLineComponent, connectionLineStyle, deleteKeyCode = null, selectNodesOnDrag = true, nodesDraggable = true, nodesConnectable = true, elementsSelectable = true, onlyRenderVisibleElements = true, zoomOnDoubleClick = true, snapToGrid = external_BaseCanvas_constants_cjs_namespaceObject.BASE_CANVAS_DEFAULTS.snapToGrid, snapGrid = external_BaseCanvas_constants_cjs_namespaceObject.BASE_CANVAS_DEFAULTS.snapGrid, initialAutoLayout, maintainNodesInView, onToolbarAction, breakpoints, panShortcutTeachingUIMessage = 'Hold Space and drag to pan around the canvas!', ...reactFlowProps } = canvasProps;
+    const { nodes = [], edges = [], nodeTypes, edgeTypes, children, mode = 'view', readOnlyNodeIds, showBackground = true, backgroundColor = external_BaseCanvas_constants_cjs_namespaceObject.BASE_CANVAS_DEFAULTS.background.color, backgroundSecondaryColor = external_BaseCanvas_constants_cjs_namespaceObject.BASE_CANVAS_DEFAULTS.background.bgColor, backgroundVariant = external_BaseCanvas_constants_cjs_namespaceObject.BASE_CANVAS_DEFAULTS.background.variant, backgroundGap = external_BaseCanvas_constants_cjs_namespaceObject.BASE_CANVAS_DEFAULTS.background.gap, backgroundSize = external_BaseCanvas_constants_cjs_namespaceObject.BASE_CANVAS_DEFAULTS.background.size, isDarkMode, locale, minZoom = external_BaseCanvas_constants_cjs_namespaceObject.BASE_CANVAS_DEFAULTS.zoom.min, maxZoom = external_BaseCanvas_constants_cjs_namespaceObject.BASE_CANVAS_DEFAULTS.zoom.max, defaultViewport = external_BaseCanvas_constants_cjs_namespaceObject.BASE_CANVAS_DEFAULTS.defaultViewport, defaultEdgeOptions = external_BaseCanvas_constants_cjs_namespaceObject.BASE_CANVAS_DEFAULTS.edge, stickyNoteOptions, onNodesChange, onEdgesChange, onConnect, onConnectStart, onConnectEnd, onNodeClick, onNodeDragStart, onNodeDrag, onNodeDragStop, onPaneClick, onInit, onSelectionChange, onBeforeDelete, proOptions = external_BaseCanvas_constants_cjs_namespaceObject.BASE_CANVAS_DEFAULTS.pro, connectionMode = react_cjs_namespaceObject.ConnectionMode.Loose, connectionLineComponent, connectionLineStyle, deleteKeyCode = null, selectNodesOnDrag = true, nodesDraggable = true, nodesConnectable = true, elementsSelectable = true, onlyRenderVisibleElements = true, zoomOnDoubleClick = true, snapToGrid = external_BaseCanvas_constants_cjs_namespaceObject.BASE_CANVAS_DEFAULTS.snapToGrid, snapGrid = external_BaseCanvas_constants_cjs_namespaceObject.BASE_CANVAS_DEFAULTS.snapGrid, initialAutoLayout, maintainNodesInView, onToolbarAction, breakpoints, panShortcutTeachingUIMessage = 'Hold Space and drag to pan around the canvas!', ...reactFlowProps } = canvasProps;
     const isInteractive = 'readonly' !== mode;
     const isDesignMode = 'design' === mode;
     const stableReadOnlyNodeIds = (0, external_ReadOnlyNodesContext_cjs_namespaceObject.useStableNodeIdSet)(readOnlyNodeIds);
+    const guardedBeforeDelete = (0, external_BaseCanvas_hooks_cjs_namespaceObject.useReadOnlyBeforeDelete)(stableReadOnlyNodeIds, onBeforeDelete);
+    const handleNodesChange = (0, external_react_namespaceObject.useMemo)(()=>{
+        if (!onNodesChange || 0 === stableReadOnlyNodeIds.size) return onNodesChange;
+        const guarded = (changes)=>{
+            const allowed = changes.filter((change)=>!('remove' === change.type && stableReadOnlyNodeIds.has(change.id)));
+            if (allowed.length > 0) onNodesChange(allowed);
+        };
+        return guarded;
+    }, [
+        onNodesChange,
+        stableReadOnlyNodeIds
+    ]);
     const [reactFlowInstance, setReactFlowInstance] = (0, external_react_namespaceObject.useState)();
     const { isReady } = (0, external_BaseCanvas_hooks_cjs_namespaceObject.useAutoLayout)(nodes, initialAutoLayout, fitViewOptions);
     const { ensureNodesInView, ensureAllNodesInView, centerNode } = (0, external_BaseCanvas_hooks_cjs_namespaceObject.useEnsureNodesInView)();
@@ -108,8 +120,9 @@ const BaseCanvasInnerComponent = (props)=>{
             zoomOnDoubleClick: isInteractive && zoomOnDoubleClick,
             panOnDrag: isInteractive ? external_BaseCanvas_constants_cjs_namespaceObject.PAN_ON_DRAG : false,
             onInit: handleInit,
-            onNodesChange: isInteractive ? onNodesChange : void 0,
+            onNodesChange: isInteractive ? handleNodesChange : void 0,
             onEdgesChange: isInteractive ? onEdgesChange : void 0,
+            onBeforeDelete: guardedBeforeDelete,
             onConnect: isDesignMode ? onConnect : void 0,
             onConnectStart: isDesignMode ? onConnectStart : void 0,
             onConnectEnd: isDesignMode ? onConnectEnd : void 0,

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

@@ -1 +1 @@
-{"version":3,"file":"BaseCanvas.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/BaseCanvas/BaseCanvas.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAEV,IAAI,EACJ,IAAI,EAEL,MAAM,0CAA0C,CAAC;AAElD,OAAO,EAIL,KAAK,YAAY,EAKlB,MAAM,OAAO,CAAC;AAIf,OAAO,KAAK,EAAE,eAAe,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AAoNzE,eAAO,MAAM,UAAU,EAKjB,CAAC,QAAQ,SAAS,IAAI,GAAG,IAAI,EAAE,QAAQ,SAAS,IAAI,GAAG,IAAI,EAC/D,KAAK,EAAE,eAAe,CAAC,QAAQ,EAAE,QAAQ,CAAC,GAAG;IAC3C,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,aAAa,CAAC,QAAQ,EAAE,QAAQ,CAAC,CAAC,CAAC;CACpD,KACE,YAAY,CAAC"}
+{"version":3,"file":"BaseCanvas.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/BaseCanvas/BaseCanvas.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAEV,IAAI,EACJ,IAAI,EAEL,MAAM,0CAA0C,CAAC;AAElD,OAAO,EAIL,KAAK,YAAY,EAKlB,MAAM,OAAO,CAAC;AASf,OAAO,KAAK,EAAE,eAAe,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AAqOzE,eAAO,MAAM,UAAU,EAKjB,CAAC,QAAQ,SAAS,IAAI,GAAG,IAAI,EAAE,QAAQ,SAAS,IAAI,GAAG,IAAI,EAC/D,KAAK,EAAE,eAAe,CAAC,QAAQ,EAAE,QAAQ,CAAC,GAAG;IAC3C,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,aAAa,CAAC,QAAQ,EAAE,QAAQ,CAAC,CAAC,CAAC;CACpD,KACE,YAAY,CAAC"}

package/dist/canvas/components/BaseCanvas/BaseCanvas.hooks.cjs

@@ -27,6 +27,7 @@ __webpack_require__.d(__webpack_exports__, {
     useAutoLayout: ()=>useAutoLayout,
     useMaintainNodesInView: ()=>useMaintainNodesInView,
     useEnsureNodesInView: ()=>useEnsureNodesInView,
+    useReadOnlyBeforeDelete: ()=>useReadOnlyBeforeDelete,
     useFitView: ()=>useFitView
 });
 const react_cjs_namespaceObject = require("../../xyflow/react.cjs");
@@ -237,15 +238,46 @@ const useMaintainNodesInView = (nodeIds, fitViewOptions)=>{
         fitViewOptions
     ]);
 };
+function useReadOnlyBeforeDelete(readOnlyNodeIds, onBeforeDelete) {
+    return (0, external_react_namespaceObject.useMemo)(()=>{
+        if (0 === readOnlyNodeIds.size) return onBeforeDelete;
+        return async ({ nodes, edges })=>{
+            const upstream = onBeforeDelete ? await onBeforeDelete({
+                nodes,
+                edges
+            }) : true;
+            if (false === upstream) return false;
+            const candidate = true === upstream ? {
+                nodes,
+                edges
+            } : upstream;
+            const vetoedNodeIds = new Set();
+            const deletedNodeIds = new Set();
+            for (const node of candidate.nodes)(readOnlyNodeIds.has(node.id) ? vetoedNodeIds : deletedNodeIds).add(node.id);
+            if (0 === vetoedNodeIds.size) return candidate;
+            const touchesVetoedNode = (edge)=>vetoedNodeIds.has(edge.source) || vetoedNodeIds.has(edge.target);
+            const touchesDeletedNode = (edge)=>deletedNodeIds.has(edge.source) || deletedNodeIds.has(edge.target);
+            return {
+                nodes: candidate.nodes.filter((node)=>!vetoedNodeIds.has(node.id)),
+                edges: candidate.edges.filter((edge)=>!touchesVetoedNode(edge) || touchesDeletedNode(edge))
+            };
+        };
+    }, [
+        readOnlyNodeIds,
+        onBeforeDelete
+    ]);
+}
 exports.useAutoLayout = __webpack_exports__.useAutoLayout;
 exports.useEnsureNodesInView = __webpack_exports__.useEnsureNodesInView;
 exports.useFitView = __webpack_exports__.useFitView;
 exports.useMaintainNodesInView = __webpack_exports__.useMaintainNodesInView;
+exports.useReadOnlyBeforeDelete = __webpack_exports__.useReadOnlyBeforeDelete;
 for(var __rspack_i in __webpack_exports__)if (-1 === [
     "useAutoLayout",
     "useEnsureNodesInView",
     "useFitView",
-    "useMaintainNodesInView"
+    "useMaintainNodesInView",
+    "useReadOnlyBeforeDelete"
 ].indexOf(__rspack_i)) exports[__rspack_i] = __webpack_exports__[__rspack_i];
 Object.defineProperty(exports, '__esModule', {
     value: true

package/dist/canvas/components/BaseCanvas/BaseCanvas.hooks.d.ts

@@ -1,4 +1,4 @@
-import type { Node } from '../../xyflow/react.ts';
+import type { Edge, Node, OnBeforeDelete } from '../../xyflow/react.ts';
 import type { BaseCanvasFitViewOptions, EnsureNodesInViewOptions } from './BaseCanvas.types';
 export declare const useAutoLayout: (nodes: Node[] | undefined, initialAutoLayout?: () => Promise<void> | void, fitViewOptions?: BaseCanvasFitViewOptions) => {
     isReady: boolean;
@@ -12,4 +12,5 @@ export declare const useEnsureNodesInView: () => {
     centerNode: (nodeId: string, options?: EnsureNodesInViewOptions) => void;
 };
 export declare const useMaintainNodesInView: (nodeIds?: string[], fitViewOptions?: BaseCanvasFitViewOptions) => void;
+export declare function useReadOnlyBeforeDelete<NodeType extends Node, EdgeType extends Edge>(readOnlyNodeIds: ReadonlySet<string>, onBeforeDelete: OnBeforeDelete<NodeType, EdgeType> | undefined): OnBeforeDelete<NodeType, EdgeType> | undefined;
 //# sourceMappingURL=BaseCanvas.hooks.d.ts.map

package/dist/canvas/components/BaseCanvas/BaseCanvas.hooks.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"BaseCanvas.hooks.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/BaseCanvas/BaseCanvas.hooks.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,0CAA0C,CAAC;AAIrE,OAAO,KAAK,EAAE,wBAAwB,EAAE,wBAAwB,EAAE,MAAM,oBAAoB,CAAC;AAqB7F,eAAO,MAAM,aAAa,GACxB,OAAO,IAAI,EAAE,GAAG,SAAS,EACzB,oBAAoB,MAAM,OAAO,CAAC,IAAI,CAAC,GAAG,IAAI,EAC9C,iBAAiB,wBAAwB;;CA+E1C,CAAC;AAEF,eAAO,MAAM,UAAU,GACrB,QAAQ,IAAI,EAAE,EACd,QAAQ,MAAM,EACd,iBAAiB,wBAAwB;;CAgC1C,CAAC;AAEF,eAAO,MAAM,oBAAoB;iCAInB,MAAM,EAAE,YAAY,wBAAwB;qCA4B3C,wBAAwB;yBAqB1B,MAAM,YAAY,wBAAwB;CAgCtD,CAAC;AAqCF,eAAO,MAAM,sBAAsB,GACjC,UAAU,MAAM,EAAE,EAClB,iBAAiB,wBAAwB,SAuE1C,CAAC"}
+{"version":3,"file":"BaseCanvas.hooks.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/BaseCanvas/BaseCanvas.hooks.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,IAAI,EAAE,cAAc,EAAE,MAAM,0CAA0C,CAAC;AAI3F,OAAO,KAAK,EAAE,wBAAwB,EAAE,wBAAwB,EAAE,MAAM,oBAAoB,CAAC;AAqB7F,eAAO,MAAM,aAAa,GACxB,OAAO,IAAI,EAAE,GAAG,SAAS,EACzB,oBAAoB,MAAM,OAAO,CAAC,IAAI,CAAC,GAAG,IAAI,EAC9C,iBAAiB,wBAAwB;;CA+E1C,CAAC;AAEF,eAAO,MAAM,UAAU,GACrB,QAAQ,IAAI,EAAE,EACd,QAAQ,MAAM,EACd,iBAAiB,wBAAwB;;CAgC1C,CAAC;AAEF,eAAO,MAAM,oBAAoB;iCAInB,MAAM,EAAE,YAAY,wBAAwB;qCA4B3C,wBAAwB;yBAqB1B,MAAM,YAAY,wBAAwB;CAgCtD,CAAC;AAqCF,eAAO,MAAM,sBAAsB,GACjC,UAAU,MAAM,EAAE,EAClB,iBAAiB,wBAAwB,SAuE1C,CAAC;AAiBF,wBAAgB,uBAAuB,CAAC,QAAQ,SAAS,IAAI,EAAE,QAAQ,SAAS,IAAI,EAClF,eAAe,EAAE,WAAW,CAAC,MAAM,CAAC,EACpC,cAAc,EAAE,cAAc,CAAC,QAAQ,EAAE,QAAQ,CAAC,GAAG,SAAS,GAC7D,cAAc,CAAC,QAAQ,EAAE,QAAQ,CAAC,GAAG,SAAS,CA+BhD"}

package/dist/canvas/components/BaseCanvas/BaseCanvas.hooks.js

@@ -1,5 +1,5 @@
 import { useReactFlow, useStoreApi } from "../../xyflow/react.js";
-import { useCallback, useEffect, useRef, useState } from "react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { BASE_CANVAS_DEFAULTS, FIT_VIEW_DELAY_MS } from "./BaseCanvas.constants.js";
 const waitForNodeMeasurements = (getNodes)=>new Promise((resolve)=>{
         const startTime = Date.now();
@@ -206,4 +206,33 @@ const useMaintainNodesInView = (nodeIds, fitViewOptions)=>{
         fitViewOptions
     ]);
 };
-export { useAutoLayout, useEnsureNodesInView, useFitView, useMaintainNodesInView };
+function useReadOnlyBeforeDelete(readOnlyNodeIds, onBeforeDelete) {
+    return useMemo(()=>{
+        if (0 === readOnlyNodeIds.size) return onBeforeDelete;
+        return async ({ nodes, edges })=>{
+            const upstream = onBeforeDelete ? await onBeforeDelete({
+                nodes,
+                edges
+            }) : true;
+            if (false === upstream) return false;
+            const candidate = true === upstream ? {
+                nodes,
+                edges
+            } : upstream;
+            const vetoedNodeIds = new Set();
+            const deletedNodeIds = new Set();
+            for (const node of candidate.nodes)(readOnlyNodeIds.has(node.id) ? vetoedNodeIds : deletedNodeIds).add(node.id);
+            if (0 === vetoedNodeIds.size) return candidate;
+            const touchesVetoedNode = (edge)=>vetoedNodeIds.has(edge.source) || vetoedNodeIds.has(edge.target);
+            const touchesDeletedNode = (edge)=>deletedNodeIds.has(edge.source) || deletedNodeIds.has(edge.target);
+            return {
+                nodes: candidate.nodes.filter((node)=>!vetoedNodeIds.has(node.id)),
+                edges: candidate.edges.filter((edge)=>!touchesVetoedNode(edge) || touchesDeletedNode(edge))
+            };
+        };
+    }, [
+        readOnlyNodeIds,
+        onBeforeDelete
+    ]);
+}
+export { useAutoLayout, useEnsureNodesInView, useFitView, useMaintainNodesInView, useReadOnlyBeforeDelete };

package/dist/canvas/components/BaseCanvas/BaseCanvas.js

@@ -3,7 +3,7 @@ import { ConnectionMode, ReactFlow } from "../../xyflow/react.js";
 import { forwardRef, memo, useCallback, useImperativeHandle, useMemo, useState } from "react";
 import { useToolbarActionStore } from "../../hooks/ToolbarActionContext.js";
 import { BASE_CANVAS_DEFAULTS, PAN_ON_DRAG } from "./BaseCanvas.constants.js";
-import { useAutoLayout, useEnsureNodesInView, useMaintainNodesInView } from "./BaseCanvas.hooks.js";
+import { useAutoLayout, useEnsureNodesInView, useMaintainNodesInView, useReadOnlyBeforeDelete } from "./BaseCanvas.hooks.js";
 import { CanvasBackground } from "./CanvasBackground.js";
 import { CanvasProviders } from "./CanvasProviders.js";
 import { PanShortcutTeachingUI } from "./PanShortcutTeachingUI.js";
@@ -11,10 +11,22 @@ import { useStableNodeIdSet } from "./ReadOnlyNodesContext.js";
 const BaseCanvasInnerComponent = (props)=>{
     const { innerRef, fitViewOptions: fitViewOptionsProps, ...canvasProps } = props;
     const fitViewOptions = fitViewOptionsProps ?? BASE_CANVAS_DEFAULTS.fitViewOptions;
-    const { nodes = [], edges = [], nodeTypes, edgeTypes, children, mode = 'view', readOnlyNodeIds, showBackground = true, backgroundColor = BASE_CANVAS_DEFAULTS.background.color, backgroundSecondaryColor = BASE_CANVAS_DEFAULTS.background.bgColor, backgroundVariant = BASE_CANVAS_DEFAULTS.background.variant, backgroundGap = BASE_CANVAS_DEFAULTS.background.gap, backgroundSize = BASE_CANVAS_DEFAULTS.background.size, isDarkMode, locale, minZoom = BASE_CANVAS_DEFAULTS.zoom.min, maxZoom = BASE_CANVAS_DEFAULTS.zoom.max, defaultViewport = BASE_CANVAS_DEFAULTS.defaultViewport, defaultEdgeOptions = BASE_CANVAS_DEFAULTS.edge, stickyNoteOptions, onNodesChange, onEdgesChange, onConnect, onConnectStart, onConnectEnd, onNodeClick, onNodeDragStart, onNodeDrag, onNodeDragStop, onPaneClick, onInit, onSelectionChange, proOptions = BASE_CANVAS_DEFAULTS.pro, connectionMode = ConnectionMode.Loose, connectionLineComponent, connectionLineStyle, deleteKeyCode = null, selectNodesOnDrag = true, nodesDraggable = true, nodesConnectable = true, elementsSelectable = true, onlyRenderVisibleElements = true, zoomOnDoubleClick = true, snapToGrid = BASE_CANVAS_DEFAULTS.snapToGrid, snapGrid = BASE_CANVAS_DEFAULTS.snapGrid, initialAutoLayout, maintainNodesInView, onToolbarAction, breakpoints, panShortcutTeachingUIMessage = 'Hold Space and drag to pan around the canvas!', ...reactFlowProps } = canvasProps;
+    const { nodes = [], edges = [], nodeTypes, edgeTypes, children, mode = 'view', readOnlyNodeIds, showBackground = true, backgroundColor = BASE_CANVAS_DEFAULTS.background.color, backgroundSecondaryColor = BASE_CANVAS_DEFAULTS.background.bgColor, backgroundVariant = BASE_CANVAS_DEFAULTS.background.variant, backgroundGap = BASE_CANVAS_DEFAULTS.background.gap, backgroundSize = BASE_CANVAS_DEFAULTS.background.size, isDarkMode, locale, minZoom = BASE_CANVAS_DEFAULTS.zoom.min, maxZoom = BASE_CANVAS_DEFAULTS.zoom.max, defaultViewport = BASE_CANVAS_DEFAULTS.defaultViewport, defaultEdgeOptions = BASE_CANVAS_DEFAULTS.edge, stickyNoteOptions, onNodesChange, onEdgesChange, onConnect, onConnectStart, onConnectEnd, onNodeClick, onNodeDragStart, onNodeDrag, onNodeDragStop, onPaneClick, onInit, onSelectionChange, onBeforeDelete, proOptions = BASE_CANVAS_DEFAULTS.pro, connectionMode = ConnectionMode.Loose, connectionLineComponent, connectionLineStyle, deleteKeyCode = null, selectNodesOnDrag = true, nodesDraggable = true, nodesConnectable = true, elementsSelectable = true, onlyRenderVisibleElements = true, zoomOnDoubleClick = true, snapToGrid = BASE_CANVAS_DEFAULTS.snapToGrid, snapGrid = BASE_CANVAS_DEFAULTS.snapGrid, initialAutoLayout, maintainNodesInView, onToolbarAction, breakpoints, panShortcutTeachingUIMessage = 'Hold Space and drag to pan around the canvas!', ...reactFlowProps } = canvasProps;
     const isInteractive = 'readonly' !== mode;
     const isDesignMode = 'design' === mode;
     const stableReadOnlyNodeIds = useStableNodeIdSet(readOnlyNodeIds);
+    const guardedBeforeDelete = useReadOnlyBeforeDelete(stableReadOnlyNodeIds, onBeforeDelete);
+    const handleNodesChange = useMemo(()=>{
+        if (!onNodesChange || 0 === stableReadOnlyNodeIds.size) return onNodesChange;
+        const guarded = (changes)=>{
+            const allowed = changes.filter((change)=>!('remove' === change.type && stableReadOnlyNodeIds.has(change.id)));
+            if (allowed.length > 0) onNodesChange(allowed);
+        };
+        return guarded;
+    }, [
+        onNodesChange,
+        stableReadOnlyNodeIds
+    ]);
     const [reactFlowInstance, setReactFlowInstance] = useState();
     const { isReady } = useAutoLayout(nodes, initialAutoLayout, fitViewOptions);
     const { ensureNodesInView, ensureAllNodesInView, centerNode } = useEnsureNodesInView();
@@ -80,8 +92,9 @@ const BaseCanvasInnerComponent = (props)=>{
             zoomOnDoubleClick: isInteractive && zoomOnDoubleClick,
             panOnDrag: isInteractive ? PAN_ON_DRAG : false,
             onInit: handleInit,
-            onNodesChange: isInteractive ? onNodesChange : void 0,
+            onNodesChange: isInteractive ? handleNodesChange : void 0,
             onEdgesChange: isInteractive ? onEdgesChange : void 0,
+            onBeforeDelete: guardedBeforeDelete,
             onConnect: isDesignMode ? onConnect : void 0,
             onConnectStart: isDesignMode ? onConnectStart : void 0,
             onConnectEnd: isDesignMode ? onConnectEnd : void 0,

package/dist/canvas/components/BaseCanvas/BaseCanvas.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"BaseCanvas.types.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/BaseCanvas/BaseCanvas.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,iBAAiB,EACjB,IAAI,EACJ,IAAI,EACJ,iBAAiB,EACjB,cAAc,EACf,MAAM,0CAA0C,CAAC;AAClD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AACrD,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,sBAAsB,CAAC;AACjE,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,wCAAwC,CAAC;AAMtF,MAAM,WAAW,wBAAwB;IAOvC,OAAO,CAAC,EACJ,MAAM,GACN;QACE,GAAG,EAAE,MAAM,CAAC;QACZ,KAAK,EAAE,MAAM,CAAC;QACd,MAAM,EAAE,MAAM,CAAC;QACf,IAAI,EAAE,MAAM,CAAC;KACd,CAAC;IAON,QAAQ,CAAC,EAAE,MAAM,CAAC;IAMlB,OAAO,CAAC,EAAE,MAAM,CAAC;IAMjB,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AASD,MAAM,WAAW,eAAe,CAAC,QAAQ,SAAS,IAAI,GAAG,IAAI,EAAE,QAAQ,SAAS,IAAI,GAAG,IAAI,CACzF,SAAQ,cAAc,CAAC,QAAQ,EAAE,QAAQ,CAAC;IAe1C,IAAI,CAAC,EAAE,QAAQ,GAAG,UAAU,GAAG,MAAM,CAAC;IAgBtC,eAAe,CAAC,EAAE,WAAW,CAAC,MAAM,CAAC,GAAG,SAAS,MAAM,EAAE,CAAC;IAM1D,iBAAiB,CAAC,EAAE,uBAAuB,CAAC;IAO5C,QAAQ,CAAC,EAAE,SAAS,CAAC;IAOrB,cAAc,CAAC,EAAE,OAAO,CAAC;IAKzB,eAAe,CAAC,EAAE,MAAM,CAAC;IAKzB,wBAAwB,CAAC,EAAE,MAAM,CAAC;IAOlC,iBAAiB,CAAC,EAAE,iBAAiB,CAAC;IAOtC,aAAa,CAAC,EAAE,MAAM,CAAC;IAOvB,cAAc,CAAC,EAAE,MAAM,CAAC;IAcxB,iBAAiB,CAAC,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,GAAG,IAAI,CAAC;IAkB/C,mBAAmB,CAAC,EAAE,MAAM,EAAE,CAAC;IAM/B,4BAA4B,CAAC,EAAE,MAAM,CAAC;IAUtC,cAAc,CAAC,EAAE,wBAAwB,CAAC;IAK1C,eAAe,CAAC,EAAE,oBAAoB,CAAC;IAMvC,WAAW,CAAC,EAAE,GAAG,CAAC,MAAM,CAAC,CAAC;IAW1B,UAAU,CAAC,EAAE,OAAO,CAAC;IAOrB,MAAM,CAAC,EAAE,eAAe,CAAC;CAC1B;AAMD,MAAM,WAAW,wBAAwB;IAKvC,OAAO,CAAC,EAAE,MAAM,CAAC;IAMjB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAMlB,OAAO,CAAC,EAAE,MAAM,CAAC;IAMjB,OAAO,CAAC,EAAE,MAAM,CAAC;IAOjB,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB;AASD,MAAM,WAAW,aAAa,CAAC,QAAQ,SAAS,IAAI,GAAG,IAAI,EAAE,QAAQ,SAAS,IAAI,GAAG,IAAI;IAgBvF,iBAAiB,CAAC,OAAO,EAAE,MAAM,EAAE,EAAE,OAAO,CAAC,EAAE,wBAAwB,GAAG,IAAI,CAAC;IAa/E,oBAAoB,CAAC,OAAO,CAAC,EAAE,wBAAwB,GAAG,IAAI,CAAC;IAiB/D,UAAU,CAAC,MAAM,EAAE,MAAM,EAAE,OAAO,CAAC,EAAE,wBAAwB,GAAG,IAAI,CAAC;IAyBrE,SAAS,EAAE,iBAAiB,CAAC,QAAQ,EAAE,QAAQ,CAAC,GAAG,SAAS,CAAC;CAC9D"}
+{"version":3,"file":"BaseCanvas.types.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/BaseCanvas/BaseCanvas.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,iBAAiB,EACjB,IAAI,EACJ,IAAI,EACJ,iBAAiB,EACjB,cAAc,EACf,MAAM,0CAA0C,CAAC;AAClD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AACrD,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,sBAAsB,CAAC;AACjE,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,wCAAwC,CAAC;AAMtF,MAAM,WAAW,wBAAwB;IAOvC,OAAO,CAAC,EACJ,MAAM,GACN;QACE,GAAG,EAAE,MAAM,CAAC;QACZ,KAAK,EAAE,MAAM,CAAC;QACd,MAAM,EAAE,MAAM,CAAC;QACf,IAAI,EAAE,MAAM,CAAC;KACd,CAAC;IAON,QAAQ,CAAC,EAAE,MAAM,CAAC;IAMlB,OAAO,CAAC,EAAE,MAAM,CAAC;IAMjB,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AASD,MAAM,WAAW,eAAe,CAAC,QAAQ,SAAS,IAAI,GAAG,IAAI,EAAE,QAAQ,SAAS,IAAI,GAAG,IAAI,CACzF,SAAQ,cAAc,CAAC,QAAQ,EAAE,QAAQ,CAAC;IAe1C,IAAI,CAAC,EAAE,QAAQ,GAAG,UAAU,GAAG,MAAM,CAAC;IAmBtC,eAAe,CAAC,EAAE,WAAW,CAAC,MAAM,CAAC,GAAG,SAAS,MAAM,EAAE,CAAC;IAM1D,iBAAiB,CAAC,EAAE,uBAAuB,CAAC;IAO5C,QAAQ,CAAC,EAAE,SAAS,CAAC;IAOrB,cAAc,CAAC,EAAE,OAAO,CAAC;IAKzB,eAAe,CAAC,EAAE,MAAM,CAAC;IAKzB,wBAAwB,CAAC,EAAE,MAAM,CAAC;IAOlC,iBAAiB,CAAC,EAAE,iBAAiB,CAAC;IAOtC,aAAa,CAAC,EAAE,MAAM,CAAC;IAOvB,cAAc,CAAC,EAAE,MAAM,CAAC;IAcxB,iBAAiB,CAAC,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,GAAG,IAAI,CAAC;IAkB/C,mBAAmB,CAAC,EAAE,MAAM,EAAE,CAAC;IAM/B,4BAA4B,CAAC,EAAE,MAAM,CAAC;IAUtC,cAAc,CAAC,EAAE,wBAAwB,CAAC;IAK1C,eAAe,CAAC,EAAE,oBAAoB,CAAC;IAMvC,WAAW,CAAC,EAAE,GAAG,CAAC,MAAM,CAAC,CAAC;IAW1B,UAAU,CAAC,EAAE,OAAO,CAAC;IAOrB,MAAM,CAAC,EAAE,eAAe,CAAC;CAC1B;AAMD,MAAM,WAAW,wBAAwB;IAKvC,OAAO,CAAC,EAAE,MAAM,CAAC;IAMjB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAMlB,OAAO,CAAC,EAAE,MAAM,CAAC;IAMjB,OAAO,CAAC,EAAE,MAAM,CAAC;IAOjB,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB;AASD,MAAM,WAAW,aAAa,CAAC,QAAQ,SAAS,IAAI,GAAG,IAAI,EAAE,QAAQ,SAAS,IAAI,GAAG,IAAI;IAgBvF,iBAAiB,CAAC,OAAO,EAAE,MAAM,EAAE,EAAE,OAAO,CAAC,EAAE,wBAAwB,GAAG,IAAI,CAAC;IAa/E,oBAAoB,CAAC,OAAO,CAAC,EAAE,wBAAwB,GAAG,IAAI,CAAC;IAiB/D,UAAU,CAAC,MAAM,EAAE,MAAM,EAAE,OAAO,CAAC,EAAE,wBAAwB,GAAG,IAAI,CAAC;IAyBrE,SAAS,EAAE,iBAAiB,CAAC,QAAQ,EAAE,QAAQ,CAAC,GAAG,SAAS,CAAC;CAC9D"}

package/dist/canvas/components/BaseCanvas/index.cjs

@@ -79,88 +79,125 @@ var __webpack_exports__ = {};
     __webpack_require__.r(__webpack_exports__);
     __webpack_require__.d(__webpack_exports__, {
         BaseCanvas: ()=>_BaseCanvas__rspack_import_0.BaseCanvas,
-        useIsNodeReadOnly: ()=>_ReadOnlyNodesContext__rspack_import_9.useIsNodeReadOnly
+        useAutoLayout: ()=>_BaseCanvas_hooks__rspack_import_2.useAutoLayout,
+        useEnsureNodesInView: ()=>_BaseCanvas_hooks__rspack_import_2.useEnsureNodesInView,
+        useFitView: ()=>_BaseCanvas_hooks__rspack_import_2.useFitView,
+        useIsNodeReadOnly: ()=>_ReadOnlyNodesContext__rspack_import_9.useIsNodeReadOnly,
+        useMaintainNodesInView: ()=>_BaseCanvas_hooks__rspack_import_2.useMaintainNodesInView
     });
     var _BaseCanvas__rspack_import_0 = __webpack_require__("./BaseCanvas?388c");
     var _BaseCanvas_constants__rspack_import_1 = __webpack_require__("./BaseCanvas.constants");
     var __rspack_reexport = {};
     for(const __rspack_import_key in _BaseCanvas_constants__rspack_import_1)if ([
+        "useAutoLayout",
+        "useMaintainNodesInView",
+        "useEnsureNodesInView",
+        "default",
         "useIsNodeReadOnly",
         "BaseCanvas",
-        "default"
+        "useFitView"
     ].indexOf(__rspack_import_key) < 0) __rspack_reexport[__rspack_import_key] = ()=>_BaseCanvas_constants__rspack_import_1[__rspack_import_key];
     __webpack_require__.d(__webpack_exports__, __rspack_reexport);
     var _BaseCanvas_hooks__rspack_import_2 = __webpack_require__("./BaseCanvas.hooks");
-    var __rspack_reexport = {};
-    for(const __rspack_import_key in _BaseCanvas_hooks__rspack_import_2)if ([
-        "useIsNodeReadOnly",
-        "BaseCanvas",
-        "default"
-    ].indexOf(__rspack_import_key) < 0) __rspack_reexport[__rspack_import_key] = ()=>_BaseCanvas_hooks__rspack_import_2[__rspack_import_key];
-    __webpack_require__.d(__webpack_exports__, __rspack_reexport);
     var _BaseCanvas_types__rspack_import_3 = __webpack_require__("./BaseCanvas.types");
     var __rspack_reexport = {};
     for(const __rspack_import_key in _BaseCanvas_types__rspack_import_3)if ([
+        "useAutoLayout",
+        "useMaintainNodesInView",
+        "useEnsureNodesInView",
+        "default",
         "useIsNodeReadOnly",
         "BaseCanvas",
-        "default"
+        "useFitView"
     ].indexOf(__rspack_import_key) < 0) __rspack_reexport[__rspack_import_key] = ()=>_BaseCanvas_types__rspack_import_3[__rspack_import_key];
     __webpack_require__.d(__webpack_exports__, __rspack_reexport);
     var _BaseCanvasModeProvider__rspack_import_4 = __webpack_require__("./BaseCanvasModeProvider");
     var __rspack_reexport = {};
     for(const __rspack_import_key in _BaseCanvasModeProvider__rspack_import_4)if ([
+        "useAutoLayout",
+        "useMaintainNodesInView",
+        "useEnsureNodesInView",
+        "default",
         "useIsNodeReadOnly",
         "BaseCanvas",
-        "default"
+        "useFitView"
     ].indexOf(__rspack_import_key) < 0) __rspack_reexport[__rspack_import_key] = ()=>_BaseCanvasModeProvider__rspack_import_4[__rspack_import_key];
     __webpack_require__.d(__webpack_exports__, __rspack_reexport);
     var _CanvasBackground__rspack_import_5 = __webpack_require__("./CanvasBackground");
     var __rspack_reexport = {};
     for(const __rspack_import_key in _CanvasBackground__rspack_import_5)if ([
+        "useAutoLayout",
+        "useMaintainNodesInView",
+        "useEnsureNodesInView",
+        "default",
         "useIsNodeReadOnly",
         "BaseCanvas",
-        "default"
+        "useFitView"
     ].indexOf(__rspack_import_key) < 0) __rspack_reexport[__rspack_import_key] = ()=>_CanvasBackground__rspack_import_5[__rspack_import_key];
     __webpack_require__.d(__webpack_exports__, __rspack_reexport);
     var _CanvasProviders__rspack_import_6 = __webpack_require__("./CanvasProviders");
     var __rspack_reexport = {};
     for(const __rspack_import_key in _CanvasProviders__rspack_import_6)if ([
+        "useAutoLayout",
+        "useMaintainNodesInView",
+        "useEnsureNodesInView",
+        "default",
         "useIsNodeReadOnly",
         "BaseCanvas",
-        "default"
+        "useFitView"
     ].indexOf(__rspack_import_key) < 0) __rspack_reexport[__rspack_import_key] = ()=>_CanvasProviders__rspack_import_6[__rspack_import_key];
     __webpack_require__.d(__webpack_exports__, __rspack_reexport);
     var _CanvasThemeContext__rspack_import_7 = __webpack_require__("./CanvasThemeContext");
     var __rspack_reexport = {};
     for(const __rspack_import_key in _CanvasThemeContext__rspack_import_7)if ([
+        "useAutoLayout",
+        "useMaintainNodesInView",
+        "useEnsureNodesInView",
+        "default",
         "useIsNodeReadOnly",
         "BaseCanvas",
-        "default"
+        "useFitView"
     ].indexOf(__rspack_import_key) < 0) __rspack_reexport[__rspack_import_key] = ()=>_CanvasThemeContext__rspack_import_7[__rspack_import_key];
     __webpack_require__.d(__webpack_exports__, __rspack_reexport);
     var _ConnectedHandlesContext__rspack_import_8 = __webpack_require__("./ConnectedHandlesContext");
     var __rspack_reexport = {};
     for(const __rspack_import_key in _ConnectedHandlesContext__rspack_import_8)if ([
+        "useAutoLayout",
+        "useMaintainNodesInView",
+        "useEnsureNodesInView",
+        "default",
         "useIsNodeReadOnly",
         "BaseCanvas",
-        "default"
+        "useFitView"
     ].indexOf(__rspack_import_key) < 0) __rspack_reexport[__rspack_import_key] = ()=>_ConnectedHandlesContext__rspack_import_8[__rspack_import_key];
     __webpack_require__.d(__webpack_exports__, __rspack_reexport);
     var _ReadOnlyNodesContext__rspack_import_9 = __webpack_require__("./ReadOnlyNodesContext");
     var _SelectionStateContext__rspack_import_10 = __webpack_require__("./SelectionStateContext");
     var __rspack_reexport = {};
     for(const __rspack_import_key in _SelectionStateContext__rspack_import_10)if ([
+        "useAutoLayout",
+        "useMaintainNodesInView",
+        "useEnsureNodesInView",
+        "default",
         "useIsNodeReadOnly",
         "BaseCanvas",
-        "default"
+        "useFitView"
     ].indexOf(__rspack_import_key) < 0) __rspack_reexport[__rspack_import_key] = ()=>_SelectionStateContext__rspack_import_10[__rspack_import_key];
     __webpack_require__.d(__webpack_exports__, __rspack_reexport);
 })();
 exports.BaseCanvas = __webpack_exports__.BaseCanvas;
+exports.useAutoLayout = __webpack_exports__.useAutoLayout;
+exports.useEnsureNodesInView = __webpack_exports__.useEnsureNodesInView;
+exports.useFitView = __webpack_exports__.useFitView;
 exports.useIsNodeReadOnly = __webpack_exports__.useIsNodeReadOnly;
+exports.useMaintainNodesInView = __webpack_exports__.useMaintainNodesInView;
 for(var __rspack_i in __webpack_exports__)if (-1 === [
     "BaseCanvas",
-    "useIsNodeReadOnly"
+    "useAutoLayout",
+    "useEnsureNodesInView",
+    "useFitView",
+    "useIsNodeReadOnly",
+    "useMaintainNodesInView"
 ].indexOf(__rspack_i)) exports[__rspack_i] = __webpack_exports__[__rspack_i];
 Object.defineProperty(exports, '__esModule', {
     value: true

package/dist/canvas/components/BaseCanvas/index.d.ts

@@ -1,6 +1,6 @@
 export { BaseCanvas } from './BaseCanvas';
 export * from './BaseCanvas.constants';
-export * from './BaseCanvas.hooks';
+export { useAutoLayout, useEnsureNodesInView, useFitView, useMaintainNodesInView, } from './BaseCanvas.hooks';
 export * from './BaseCanvas.types';
 export * from './BaseCanvasModeProvider';
 export * from './CanvasBackground';

package/dist/canvas/components/BaseCanvas/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/BaseCanvas/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,cAAc,wBAAwB,CAAC;AACvC,cAAc,oBAAoB,CAAC;AACnC,cAAc,oBAAoB,CAAC;AACnC,cAAc,0BAA0B,CAAC;AACzC,cAAc,oBAAoB,CAAC;AACnC,cAAc,mBAAmB,CAAC;AAClC,cAAc,sBAAsB,CAAC;AACrC,cAAc,2BAA2B,CAAC;AAG1C,OAAO,EAAE,iBAAiB,EAAE,MAAM,wBAAwB,CAAC;AAC3D,cAAc,yBAAyB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/BaseCanvas/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,cAAc,wBAAwB,CAAC;AACvC,OAAO,EACL,aAAa,EACb,oBAAoB,EACpB,UAAU,EACV,sBAAsB,GACvB,MAAM,oBAAoB,CAAC;AAC5B,cAAc,oBAAoB,CAAC;AACnC,cAAc,0BAA0B,CAAC;AACzC,cAAc,oBAAoB,CAAC;AACnC,cAAc,mBAAmB,CAAC;AAClC,cAAc,sBAAsB,CAAC;AACrC,cAAc,2BAA2B,CAAC;AAG1C,OAAO,EAAE,iBAAiB,EAAE,MAAM,wBAAwB,CAAC;AAC3D,cAAc,yBAAyB,CAAC"}

package/dist/canvas/components/BaseCanvas/index.js

@@ -1,7 +1,7 @@
 import { BaseCanvas } from "./BaseCanvas.js";
+import { useAutoLayout, useEnsureNodesInView, useFitView, useMaintainNodesInView } from "./BaseCanvas.hooks.js";
 import { useIsNodeReadOnly } from "./ReadOnlyNodesContext.js";
 export * from "./BaseCanvas.constants.js";
-export * from "./BaseCanvas.hooks.js";
 export * from "./BaseCanvas.types.js";
 export * from "./BaseCanvasModeProvider.js";
 export * from "./CanvasBackground.js";
@@ -9,4 +9,4 @@ export * from "./CanvasProviders.js";
 export * from "./CanvasThemeContext.js";
 export * from "./ConnectedHandlesContext.js";
 export * from "./SelectionStateContext.js";
-export { BaseCanvas, useIsNodeReadOnly };
+export { BaseCanvas, useAutoLayout, useEnsureNodesInView, useFitView, useIsNodeReadOnly, useMaintainNodesInView };

package/dist/canvas/components/BaseNode/BaseNode.cjs

@@ -41,6 +41,7 @@ const toolbar_resolver_cjs_namespaceObject = require("../../utils/toolbar-resolv
 const BaseCanvasModeProvider_cjs_namespaceObject = require("../BaseCanvas/BaseCanvasModeProvider.cjs");
 const CanvasThemeContext_cjs_namespaceObject = require("../BaseCanvas/CanvasThemeContext.cjs");
 const ConnectedHandlesContext_cjs_namespaceObject = require("../BaseCanvas/ConnectedHandlesContext.cjs");
+const ReadOnlyNodesContext_cjs_namespaceObject = require("../BaseCanvas/ReadOnlyNodesContext.cjs");
 const SelectionStateContext_cjs_namespaceObject = require("../BaseCanvas/SelectionStateContext.cjs");
 const SmartHandle_cjs_namespaceObject = require("../ButtonHandle/SmartHandle.cjs");
 const useButtonHandles_cjs_namespaceObject = require("../ButtonHandle/useButtonHandles.cjs");
@@ -52,6 +53,11 @@ const external_BaseNodeContainer_cjs_namespaceObject = require("./BaseNodeContai
 const external_BaseNodeInnerShape_cjs_namespaceObject = require("./BaseNodeInnerShape.cjs");
 const external_BaseNodeMissingManifest_cjs_namespaceObject = require("./BaseNodeMissingManifest.cjs");
 const external_NodeLabel_cjs_namespaceObject = require("./NodeLabel.cjs");
+const NEVER_SHOW_ADD_BUTTON = ()=>false;
+const disableToolbarActions = (actions)=>actions.map((action)=>'separator' === action.id ? action : {
+            ...action,
+            disabled: true
+        });
 const getContainerWidth = (shape, width)=>{
     const defaultWidth = 'rectangle' === shape ? external_constants_cjs_namespaceObject.DEFAULT_RECTANGLE_NODE_WIDTH : external_constants_cjs_namespaceObject.DEFAULT_NODE_SIZE;
     if (width && width !== external_constants_cjs_namespaceObject.DEFAULT_NODE_SIZE && width !== external_constants_cjs_namespaceObject.DEFAULT_RECTANGLE_NODE_WIDTH) return width;
@@ -80,6 +86,8 @@ const BaseNodeComponent = (props)=>{
     const validationState = (0, external_hooks_index_cjs_namespaceObject.useElementValidationStatus)(id);
     const nodeTypeRegistry = (0, index_cjs_namespaceObject.useNodeTypeRegistry)();
     const { mode } = (0, BaseCanvasModeProvider_cjs_namespaceObject.useBaseCanvasMode)();
+    const isNodeReadOnly = (0, ReadOnlyNodesContext_cjs_namespaceObject.useIsNodeReadOnly)(id);
+    const canEdit = 'design' === mode && !isNodeReadOnly;
     const connectedHandleIds = (0, ConnectedHandlesContext_cjs_namespaceObject.useConnectedHandles)(id);
     const isConnecting = (0, react_cjs_namespaceObject.useStore)(NodeUtils_cjs_namespaceObject.selectIsConnecting);
     const { multipleNodesSelected } = (0, SelectionStateContext_cjs_namespaceObject.useSelectionState)();
@@ -107,7 +115,7 @@ const BaseNodeComponent = (props)=>{
         mode
     ]);
     const onHandleActionCallback = onHandleActionProp;
-    const shouldShowAddButtonFn = shouldShowAddButtonFnProp;
+    const shouldShowAddButtonFn = isNodeReadOnly ? NEVER_SHOW_ADD_BUTTON : shouldShowAddButtonFnProp;
     const shouldShowButtonHandleNotchesFn = shouldShowButtonHandleNotchesFnProp;
     const executionStatus = executionStatusOverride ?? ('string' == typeof executionState ? executionState : executionState?.status);
     const display = (0, external_react_namespaceObject.useMemo)(()=>(0, manifest_resolver_cjs_namespaceObject.resolveDisplay)(manifest?.display, {
@@ -171,6 +179,19 @@ const BaseNodeComponent = (props)=>{
         manifest,
         statusContext
     ]);
+    const effectiveToolbarConfig = (0, external_react_namespaceObject.useMemo)(()=>{
+        if (!toolbarConfig || !isNodeReadOnly) return toolbarConfig;
+        return {
+            ...toolbarConfig,
+            actions: disableToolbarActions(toolbarConfig.actions),
+            ...toolbarConfig.overflowActions && {
+                overflowActions: disableToolbarActions(toolbarConfig.overflowActions)
+            }
+        };
+    }, [
+        toolbarConfig,
+        isNodeReadOnly
+    ]);
     const adornments = (0, external_react_namespaceObject.useMemo)(()=>{
         const adornmentsFromProps = adornmentsProp ?? {};
         const adornmentsFromResolver = (0, adornment_resolver_cjs_namespaceObject.resolveAdornments)(statusContext);
@@ -339,8 +360,8 @@ const BaseNodeComponent = (props)=>{
         if (multipleNodesSelected) return false;
         const { hasButton, hasLabel } = toolbarSideHandleAffordances;
         const isAddButtonShown = ()=>{
-            if (useSmartHandles) return 'design' === mode && !!selected;
-            const showAddButton = 'design' === mode && !isConnecting && !dragging;
+            if (useSmartHandles) return canEdit && !!selected;
+            const showAddButton = canEdit && !isConnecting && !dragging;
             if (shouldShowAddButtonFn) return shouldShowAddButtonFn({
                 showAddButton,
                 selected: !!selected
@@ -352,7 +373,7 @@ const BaseNodeComponent = (props)=>{
         return false;
     }, [
         toolbarSideHandleAffordances,
-        mode,
+        canEdit,
         multipleNodesSelected,
         useSmartHandles,
         selected,
@@ -370,7 +391,7 @@ const BaseNodeComponent = (props)=>{
         nodeId: id,
         selected: selected ?? false,
         hovered: isHovered,
-        showAddButton: 'design' === mode && !multipleNodesSelected && !isConnecting && !dragging,
+        showAddButton: canEdit && !multipleNodesSelected && !isConnecting && !dragging,
         showNotches,
         nodeWidth: containerWidth,
         nodeHeight: computedHeight,
@@ -388,7 +409,7 @@ const BaseNodeComponent = (props)=>{
                 const handleVisualType = handle.handleType ?? ('source' === handle.type ? 'output' : 'input');
                 const hasConnection = connectedHandleIds.has(handle.id);
                 const isVisible = hasConnection || shouldShowHandles && configVisible;
-                const shouldShowButton = 'design' === mode && selected && handle.showButton && !multipleNodesSelected;
+                const shouldShowButton = canEdit && selected && handle.showButton && !multipleNodesSelected;
                 return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(SmartHandle_cjs_namespaceObject.SmartHandle, {
                     type: handle.type,
                     id: handle.id,
@@ -412,7 +433,7 @@ const BaseNodeComponent = (props)=>{
         shouldShowHandles,
         containerWidth,
         computedHeight,
-        mode,
+        canEdit,
         selected,
         showNotches,
         handleAction,
@@ -493,7 +514,8 @@ const BaseNodeComponent = (props)=>{
                         hasBottomHandles: hasVisibleBottomHandles,
                         selected: selected,
                         dragging: dragging,
-                        readonly: 'design' !== mode,
+                        readonly: !canEdit,
+                        discardDraftOnReadonly: isNodeReadOnly,
                         onChange: handleLabelChange
                     }),
                     displayFooter && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
@@ -502,9 +524,9 @@ const BaseNodeComponent = (props)=>{
                     })
                 ]
             }),
-            toolbarConfig && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_Toolbar_index_cjs_namespaceObject.NodeToolbar, {
+            effectiveToolbarConfig && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_Toolbar_index_cjs_namespaceObject.NodeToolbar, {
                 nodeId: id,
-                config: toolbarConfig,
+                config: effectiveToolbarConfig,
                 expanded: selected || isHovered,
                 hidden: dragging || multipleNodesSelected,
                 offsetToolbar: offsetToolbar

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

@@ -1 +1 @@
-{"version":3,"file":"BaseNode.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/BaseNode/BaseNode.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,SAAS,EAAE,MAAM,0CAA0C,CAAC;AA4ChF,OAAO,KAAK,EACV,YAAY,EAIb,MAAM,kBAAkB,CAAC;AAkrB1B,eAAO,MAAM,QAAQ,8CAhpBa,SAAS,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,6CAgpBmB,CAAC"}
+{"version":3,"file":"BaseNode.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/BaseNode/BaseNode.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,SAAS,EAAE,MAAM,0CAA0C,CAAC;AA8ChF,OAAO,KAAK,EACV,YAAY,EAIb,MAAM,kBAAkB,CAAC;AAqtB1B,eAAO,MAAM,QAAQ,8CAzqBa,SAAS,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,6CAyqBmB,CAAC"}

package/dist/canvas/components/BaseNode/BaseNode.js

@@ -13,6 +13,7 @@ import { resolveToolbar } from "../../utils/toolbar-resolver.js";
 import { useBaseCanvasMode } from "../BaseCanvas/BaseCanvasModeProvider.js";
 import { useCanvasTheme } from "../BaseCanvas/CanvasThemeContext.js";
 import { useConnectedHandles } from "../BaseCanvas/ConnectedHandlesContext.js";
+import { useIsNodeReadOnly } from "../BaseCanvas/ReadOnlyNodesContext.js";
 import { useSelectionState } from "../BaseCanvas/SelectionStateContext.js";
 import { SmartHandle, SmartHandleProvider } from "../ButtonHandle/SmartHandle.js";
 import { useButtonHandles } from "../ButtonHandle/useButtonHandles.js";
@@ -24,6 +25,11 @@ import { BaseContainer } from "./BaseNodeContainer.js";
 import { BaseInnerShape } from "./BaseNodeInnerShape.js";
 import { MissingManifestNode } from "./BaseNodeMissingManifest.js";
 import { NodeLabel } from "./NodeLabel.js";
+const NEVER_SHOW_ADD_BUTTON = ()=>false;
+const disableToolbarActions = (actions)=>actions.map((action)=>'separator' === action.id ? action : {
+            ...action,
+            disabled: true
+        });
 const getContainerWidth = (shape, width)=>{
     const defaultWidth = 'rectangle' === shape ? DEFAULT_RECTANGLE_NODE_WIDTH : DEFAULT_NODE_SIZE;
     if (width && width !== DEFAULT_NODE_SIZE && width !== DEFAULT_RECTANGLE_NODE_WIDTH) return width;
@@ -52,6 +58,8 @@ const BaseNodeComponent = (props)=>{
     const validationState = useElementValidationStatus(id);
     const nodeTypeRegistry = useNodeTypeRegistry();
     const { mode } = useBaseCanvasMode();
+    const isNodeReadOnly = useIsNodeReadOnly(id);
+    const canEdit = 'design' === mode && !isNodeReadOnly;
     const connectedHandleIds = useConnectedHandles(id);
     const isConnecting = useStore(selectIsConnecting);
     const { multipleNodesSelected } = useSelectionState();
@@ -79,7 +87,7 @@ const BaseNodeComponent = (props)=>{
         mode
     ]);
     const onHandleActionCallback = onHandleActionProp;
-    const shouldShowAddButtonFn = shouldShowAddButtonFnProp;
+    const shouldShowAddButtonFn = isNodeReadOnly ? NEVER_SHOW_ADD_BUTTON : shouldShowAddButtonFnProp;
     const shouldShowButtonHandleNotchesFn = shouldShowButtonHandleNotchesFnProp;
     const executionStatus = executionStatusOverride ?? ('string' == typeof executionState ? executionState : executionState?.status);
     const display = useMemo(()=>resolveDisplay(manifest?.display, {
@@ -143,6 +151,19 @@ const BaseNodeComponent = (props)=>{
         manifest,
         statusContext
     ]);
+    const effectiveToolbarConfig = useMemo(()=>{
+        if (!toolbarConfig || !isNodeReadOnly) return toolbarConfig;
+        return {
+            ...toolbarConfig,
+            actions: disableToolbarActions(toolbarConfig.actions),
+            ...toolbarConfig.overflowActions && {
+                overflowActions: disableToolbarActions(toolbarConfig.overflowActions)
+            }
+        };
+    }, [
+        toolbarConfig,
+        isNodeReadOnly
+    ]);
     const adornments = useMemo(()=>{
         const adornmentsFromProps = adornmentsProp ?? {};
         const adornmentsFromResolver = resolveAdornments(statusContext);
@@ -311,8 +332,8 @@ const BaseNodeComponent = (props)=>{
         if (multipleNodesSelected) return false;
         const { hasButton, hasLabel } = toolbarSideHandleAffordances;
         const isAddButtonShown = ()=>{
-            if (useSmartHandles) return 'design' === mode && !!selected;
-            const showAddButton = 'design' === mode && !isConnecting && !dragging;
+            if (useSmartHandles) return canEdit && !!selected;
+            const showAddButton = canEdit && !isConnecting && !dragging;
             if (shouldShowAddButtonFn) return shouldShowAddButtonFn({
                 showAddButton,
                 selected: !!selected
@@ -324,7 +345,7 @@ const BaseNodeComponent = (props)=>{
         return false;
     }, [
         toolbarSideHandleAffordances,
-        mode,
+        canEdit,
         multipleNodesSelected,
         useSmartHandles,
         selected,
@@ -342,7 +363,7 @@ const BaseNodeComponent = (props)=>{
         nodeId: id,
         selected: selected ?? false,
         hovered: isHovered,
-        showAddButton: 'design' === mode && !multipleNodesSelected && !isConnecting && !dragging,
+        showAddButton: canEdit && !multipleNodesSelected && !isConnecting && !dragging,
         showNotches,
         nodeWidth: containerWidth,
         nodeHeight: computedHeight,
@@ -360,7 +381,7 @@ const BaseNodeComponent = (props)=>{
                 const handleVisualType = handle.handleType ?? ('source' === handle.type ? 'output' : 'input');
                 const hasConnection = connectedHandleIds.has(handle.id);
                 const isVisible = hasConnection || shouldShowHandles && configVisible;
-                const shouldShowButton = 'design' === mode && selected && handle.showButton && !multipleNodesSelected;
+                const shouldShowButton = canEdit && selected && handle.showButton && !multipleNodesSelected;
                 return /*#__PURE__*/ jsx(SmartHandle, {
                     type: handle.type,
                     id: handle.id,
@@ -384,7 +405,7 @@ const BaseNodeComponent = (props)=>{
         shouldShowHandles,
         containerWidth,
         computedHeight,
-        mode,
+        canEdit,
         selected,
         showNotches,
         handleAction,
@@ -465,7 +486,8 @@ const BaseNodeComponent = (props)=>{
                         hasBottomHandles: hasVisibleBottomHandles,
                         selected: selected,
                         dragging: dragging,
-                        readonly: 'design' !== mode,
+                        readonly: !canEdit,
+                        discardDraftOnReadonly: isNodeReadOnly,
                         onChange: handleLabelChange
                     }),
                     displayFooter && /*#__PURE__*/ jsx("div", {
@@ -474,9 +496,9 @@ const BaseNodeComponent = (props)=>{
                     })
                 ]
             }),
-            toolbarConfig && /*#__PURE__*/ jsx(NodeToolbar, {
+            effectiveToolbarConfig && /*#__PURE__*/ jsx(NodeToolbar, {
                 nodeId: id,
-                config: toolbarConfig,
+                config: effectiveToolbarConfig,
                 expanded: selected || isHovered,
                 hidden: dragging || multipleNodesSelected,
                 offsetToolbar: offsetToolbar

package/dist/canvas/components/BaseNode/NodeLabel.cjs

@@ -95,14 +95,15 @@ const EditableLabel = /*#__PURE__*/ (0, external_react_namespaceObject.forwardRe
         } : void 0
     }));
 EditableLabel.displayName = 'EditableLabel';
-const EmptyLabelPlaceholder = ({ onDoubleClick })=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("button", {
+const EmptyLabelPlaceholder = ({ disabled, onDoubleClick })=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("button", {
         type: "button",
+        disabled: disabled,
         onDoubleClick: onDoubleClick,
         className: "nodrag nowheel text-sm leading-[18px] font-semibold text-foreground-muted bg-transparent border border-dashed border-border-de-emp rounded-sm cursor-pointer opacity-0 transition-opacity duration-200 min-w-5 min-h-5 hover:opacity-100",
         "aria-label": "Add node label",
         "data-testid": "empty-label-placeholder"
     });
-const NodeLabelInternal = ({ label = '', subLabel = '', labelTooltip, labelBackgroundColor, shape, hasBottomHandles, selected, dragging, centerAdornment, readonly, onChange })=>{
+const NodeLabelInternal = ({ label = '', subLabel = '', labelTooltip, labelBackgroundColor, shape, hasBottomHandles, selected, dragging, centerAdornment, readonly, discardDraftOnReadonly, onChange })=>{
     const [isEditing, setIsEditing] = (0, external_react_namespaceObject.useState)(false);
     const [localLabel, setLocalLabel] = (0, external_react_namespaceObject.useState)('');
     const [localSubLabel, setLocalSubLabel] = (0, external_react_namespaceObject.useState)('');
@@ -147,15 +148,6 @@ const NodeLabelInternal = ({ label = '', subLabel = '', labelTooltip, labelBackg
         isEditing,
         focusTarget
     ]);
-    (0, external_react_namespaceObject.useEffect)(()=>{
-        if (isEditing && (!selected || dragging || readonly)) handleSave();
-    }, [
-        selected,
-        dragging,
-        isEditing,
-        readonly,
-        handleSave
-    ]);
     const handleCancel = (0, external_react_namespaceObject.useCallback)(()=>{
         setIsEditing(false);
         setFocusTarget(null);
@@ -165,6 +157,19 @@ const NodeLabelInternal = ({ label = '', subLabel = '', labelTooltip, labelBackg
         label,
         subLabel
     ]);
+    (0, external_react_namespaceObject.useEffect)(()=>{
+        if (!isEditing) return;
+        if (readonly && discardDraftOnReadonly) handleCancel();
+        else if (!selected || dragging || readonly) handleSave();
+    }, [
+        selected,
+        dragging,
+        isEditing,
+        readonly,
+        discardDraftOnReadonly,
+        handleSave,
+        handleCancel
+    ]);
     const handleKeyDown = (0, external_react_namespaceObject.useCallback)((e)=>{
         if ('Enter' === e.key) {
             e.preventDefault();
@@ -191,6 +196,7 @@ const NodeLabelInternal = ({ label = '', subLabel = '', labelTooltip, labelBackg
         shape: shape,
         children: [
             /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(EmptyLabelPlaceholder, {
+                disabled: readonly,
                 onDoubleClick: readonly ? void 0 : handleDoubleClick(labelInputRef)
             }),
             centerAdornment

package/dist/canvas/components/BaseNode/NodeLabel.d.ts

@@ -16,11 +16,12 @@ export interface NodeLabelProps {
     dragging?: boolean;
     centerAdornment?: React.ReactNode;
     readonly?: boolean;
+    discardDraftOnReadonly?: boolean;
     onChange?: (values: {
         label: string;
         subLabel: string;
     }) => void;
 }
-export declare const NodeLabel: import("react").MemoExoticComponent<({ label, subLabel, labelTooltip, labelBackgroundColor, shape, hasBottomHandles, selected, dragging, centerAdornment, readonly, onChange, }: NodeLabelProps) => import("react/jsx-runtime").JSX.Element>;
+export declare const NodeLabel: import("react").MemoExoticComponent<({ label, subLabel, labelTooltip, labelBackgroundColor, shape, hasBottomHandles, selected, dragging, centerAdornment, readonly, discardDraftOnReadonly, onChange, }: NodeLabelProps) => import("react/jsx-runtime").JSX.Element>;
 export {};
 //# sourceMappingURL=NodeLabel.d.ts.map

package/dist/canvas/components/BaseNode/NodeLabel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"NodeLabel.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/BaseNode/NodeLabel.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAI9C,UAAU,sBAAsB;IAC9B,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED,eAAO,MAAM,iBAAiB,GAAI,wCAI/B,sBAAsB,4CAmBxB,CAAC;AAqKF,MAAM,WAAW,cAAc;IAC7B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,eAAe,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAClC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,QAAQ,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;CAClE;AA2LD,eAAO,MAAM,SAAS,mLA7KnB,cAAc,6CA6K+B,CAAC"}
+{"version":3,"file":"NodeLabel.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/BaseNode/NodeLabel.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAI9C,UAAU,sBAAsB;IAC9B,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED,eAAO,MAAM,iBAAiB,GAAI,wCAI/B,sBAAsB,4CAmBxB,CAAC;AAyKF,MAAM,WAAW,cAAc;IAC7B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,eAAe,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAClC,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,sBAAsB,CAAC,EAAE,OAAO,CAAC;IACjC,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,QAAQ,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;CAClE;AAkMD,eAAO,MAAM,SAAS,2MAnLnB,cAAc,6CAmL+B,CAAC"}

package/dist/canvas/components/BaseNode/NodeLabel.js

@@ -66,14 +66,15 @@ const EditableLabel = /*#__PURE__*/ forwardRef(({ shape, backgroundColor, varian
         } : void 0
     }));
 EditableLabel.displayName = 'EditableLabel';
-const EmptyLabelPlaceholder = ({ onDoubleClick })=>/*#__PURE__*/ jsx("button", {
+const EmptyLabelPlaceholder = ({ disabled, onDoubleClick })=>/*#__PURE__*/ jsx("button", {
         type: "button",
+        disabled: disabled,
         onDoubleClick: onDoubleClick,
         className: "nodrag nowheel text-sm leading-[18px] font-semibold text-foreground-muted bg-transparent border border-dashed border-border-de-emp rounded-sm cursor-pointer opacity-0 transition-opacity duration-200 min-w-5 min-h-5 hover:opacity-100",
         "aria-label": "Add node label",
         "data-testid": "empty-label-placeholder"
     });
-const NodeLabelInternal = ({ label = '', subLabel = '', labelTooltip, labelBackgroundColor, shape, hasBottomHandles, selected, dragging, centerAdornment, readonly, onChange })=>{
+const NodeLabelInternal = ({ label = '', subLabel = '', labelTooltip, labelBackgroundColor, shape, hasBottomHandles, selected, dragging, centerAdornment, readonly, discardDraftOnReadonly, onChange })=>{
     const [isEditing, setIsEditing] = useState(false);
     const [localLabel, setLocalLabel] = useState('');
     const [localSubLabel, setLocalSubLabel] = useState('');
@@ -118,15 +119,6 @@ const NodeLabelInternal = ({ label = '', subLabel = '', labelTooltip, labelBackg
         isEditing,
         focusTarget
     ]);
-    useEffect(()=>{
-        if (isEditing && (!selected || dragging || readonly)) handleSave();
-    }, [
-        selected,
-        dragging,
-        isEditing,
-        readonly,
-        handleSave
-    ]);
     const handleCancel = useCallback(()=>{
         setIsEditing(false);
         setFocusTarget(null);
@@ -136,6 +128,19 @@ const NodeLabelInternal = ({ label = '', subLabel = '', labelTooltip, labelBackg
         label,
         subLabel
     ]);
+    useEffect(()=>{
+        if (!isEditing) return;
+        if (readonly && discardDraftOnReadonly) handleCancel();
+        else if (!selected || dragging || readonly) handleSave();
+    }, [
+        selected,
+        dragging,
+        isEditing,
+        readonly,
+        discardDraftOnReadonly,
+        handleSave,
+        handleCancel
+    ]);
     const handleKeyDown = useCallback((e)=>{
         if ('Enter' === e.key) {
             e.preventDefault();
@@ -162,6 +167,7 @@ const NodeLabelInternal = ({ label = '', subLabel = '', labelTooltip, labelBackg
         shape: shape,
         children: [
             /*#__PURE__*/ jsx(EmptyLabelPlaceholder, {
+                disabled: readonly,
                 onDoubleClick: readonly ? void 0 : handleDoubleClick(labelInputRef)
             }),
             centerAdornment

package/dist/canvas/components/Toolbar/shared/ToolbarButton.cjs

@@ -40,32 +40,37 @@ const ToolbarButton = /*#__PURE__*/ (0, external_react_namespaceObject.memo)(({
         e.preventDefault();
         if (isEnabled) action.onClick();
     };
+    const button = /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_ToolbarIconButton_cjs_namespaceObject.ToolbarIconButton, {
+        layout: layoutId ? true : void 0,
+        layoutId: layoutId,
+        transition: {
+            type: 'tween',
+            duration: 0.2,
+            ease: 'easeOut'
+        },
+        type: "button",
+        className: "nodrag nopan",
+        onClick: handleClick,
+        "aria-label": action.label,
+        "aria-disabled": !isEnabled,
+        "aria-pressed": action.isToggled,
+        disabled: !isEnabled,
+        isToggled: action.isToggled,
+        color: action.color,
+        hoverBg: hoverBg,
+        children: action.icon && 'string' == typeof action.icon ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(icon_registry_cjs_namespaceObject.CanvasIcon, {
+            icon: action.icon,
+            size: 16,
+            color: action.color
+        }) : action.icon
+    });
     return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_CanvasTooltip_cjs_namespaceObject.CanvasTooltip, {
         content: action.label,
         placement: "top",
-        children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_ToolbarIconButton_cjs_namespaceObject.ToolbarIconButton, {
-            layout: layoutId ? true : void 0,
-            layoutId: layoutId,
-            transition: {
-                type: 'tween',
-                duration: 0.2,
-                ease: 'easeOut'
-            },
-            type: "button",
-            className: "nodrag nopan",
-            onClick: handleClick,
-            "aria-label": action.label,
-            "aria-disabled": !isEnabled,
-            "aria-pressed": action.isToggled,
-            disabled: !isEnabled,
-            isToggled: action.isToggled,
-            color: action.color,
-            hoverBg: hoverBg,
-            children: action.icon && 'string' == typeof action.icon ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(icon_registry_cjs_namespaceObject.CanvasIcon, {
-                icon: action.icon,
-                size: 16,
-                color: action.color
-            }) : action.icon
+        children: isEnabled ? button : /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
+            className: "inline-flex",
+            "data-testid": "toolbar-action-hover-target",
+            children: button
         })
     });
 });

package/dist/canvas/components/Toolbar/shared/ToolbarButton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ToolbarButton.d.ts","sourceRoot":"","sources":["../../../../../src/canvas/components/Toolbar/shared/ToolbarButton.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,iBAAiB,CAAC;AAEzD,MAAM,WAAW,qBAAsB,SAAQ,iBAAiB;IAC9D,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAED,MAAM,WAAW,kBAAkB;IACjC,MAAM,EAAE,qBAAqB,CAAC;IAK9B,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,eAAO,MAAM,aAAa,6DAA+B,kBAAkB,6CAqCzE,CAAC"}
+{"version":3,"file":"ToolbarButton.d.ts","sourceRoot":"","sources":["../../../../../src/canvas/components/Toolbar/shared/ToolbarButton.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,iBAAiB,CAAC;AAEzD,MAAM,WAAW,qBAAsB,SAAQ,iBAAiB;IAC9D,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAED,MAAM,WAAW,kBAAkB;IACjC,MAAM,EAAE,qBAAqB,CAAC;IAK9B,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,eAAO,MAAM,aAAa,6DAA+B,kBAAkB,6CAkDzE,CAAC"}

package/dist/canvas/components/Toolbar/shared/ToolbarButton.js

@@ -12,32 +12,37 @@ const ToolbarButton = /*#__PURE__*/ memo(({ action, layoutId })=>{
         e.preventDefault();
         if (isEnabled) action.onClick();
     };
+    const button = /*#__PURE__*/ jsx(ToolbarIconButton, {
+        layout: layoutId ? true : void 0,
+        layoutId: layoutId,
+        transition: {
+            type: 'tween',
+            duration: 0.2,
+            ease: 'easeOut'
+        },
+        type: "button",
+        className: "nodrag nopan",
+        onClick: handleClick,
+        "aria-label": action.label,
+        "aria-disabled": !isEnabled,
+        "aria-pressed": action.isToggled,
+        disabled: !isEnabled,
+        isToggled: action.isToggled,
+        color: action.color,
+        hoverBg: hoverBg,
+        children: action.icon && 'string' == typeof action.icon ? /*#__PURE__*/ jsx(CanvasIcon, {
+            icon: action.icon,
+            size: 16,
+            color: action.color
+        }) : action.icon
+    });
     return /*#__PURE__*/ jsx(CanvasTooltip, {
         content: action.label,
         placement: "top",
-        children: /*#__PURE__*/ jsx(ToolbarIconButton, {
-            layout: layoutId ? true : void 0,
-            layoutId: layoutId,
-            transition: {
-                type: 'tween',
-                duration: 0.2,
-                ease: 'easeOut'
-            },
-            type: "button",
-            className: "nodrag nopan",
-            onClick: handleClick,
-            "aria-label": action.label,
-            "aria-disabled": !isEnabled,
-            "aria-pressed": action.isToggled,
-            disabled: !isEnabled,
-            isToggled: action.isToggled,
-            color: action.color,
-            hoverBg: hoverBg,
-            children: action.icon && 'string' == typeof action.icon ? /*#__PURE__*/ jsx(CanvasIcon, {
-                icon: action.icon,
-                size: 16,
-                color: action.color
-            }) : action.icon
+        children: isEnabled ? button : /*#__PURE__*/ jsx("span", {
+            className: "inline-flex",
+            "data-testid": "toolbar-action-hover-target",
+            children: button
         })
     });
 });

package/package.json

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