@uipath/apollo-react 6.26.0 → 6.28.0

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

@@ -0,0 +1,53 @@
+import { useCallback } from "react";
+import { useLatestRef } from "../../hooks/useLatestRef.js";
+import { isConnectionReadOnly } from "./ReadOnlyNodesContext.js";
+const includesReadOnlyConnection = (readOnlyNodeIds, ...connections)=>connections.some(({ source, target })=>isConnectionReadOnly(readOnlyNodeIds, source, target));
+function useReadOnlyConnectionCallbacks({ readOnlyNodeIds, isValidConnection, onConnect, onReconnect, onReconnectEnd }) {
+    const readOnlyNodeIdsRef = useLatestRef(readOnlyNodeIds);
+    const isValidConnectionRef = useLatestRef(isValidConnection);
+    const onConnectRef = useLatestRef(onConnect);
+    const onReconnectRef = useLatestRef(onReconnect);
+    const onReconnectEndRef = useLatestRef(onReconnectEnd);
+    const guardedIsValidConnection = useCallback((connection)=>{
+        const currentReadOnlyNodeIds = readOnlyNodeIdsRef.current;
+        if (includesReadOnlyConnection(currentReadOnlyNodeIds, connection)) return false;
+        return isValidConnectionRef.current?.(connection) ?? true;
+    }, [
+        isValidConnectionRef,
+        readOnlyNodeIdsRef
+    ]);
+    const guardedOnConnect = useCallback((connection)=>{
+        const currentOnConnect = onConnectRef.current;
+        const currentReadOnlyNodeIds = readOnlyNodeIdsRef.current;
+        if (!currentOnConnect || includesReadOnlyConnection(currentReadOnlyNodeIds, connection)) return;
+        currentOnConnect(connection);
+    }, [
+        onConnectRef,
+        readOnlyNodeIdsRef
+    ]);
+    const guardedOnReconnect = useCallback((edgeBeingReconnected, proposedConnection)=>{
+        const currentOnReconnect = onReconnectRef.current;
+        const currentReadOnlyNodeIds = readOnlyNodeIdsRef.current;
+        if (!currentOnReconnect || includesReadOnlyConnection(currentReadOnlyNodeIds, edgeBeingReconnected, proposedConnection)) return;
+        currentOnReconnect(edgeBeingReconnected, proposedConnection);
+    }, [
+        onReconnectRef,
+        readOnlyNodeIdsRef
+    ]);
+    const guardedOnReconnectEnd = useCallback((event, edgeBeingReconnected, handleType, connectionState)=>{
+        const currentOnReconnectEnd = onReconnectEndRef.current;
+        const currentReadOnlyNodeIds = readOnlyNodeIdsRef.current;
+        if (!currentOnReconnectEnd || includesReadOnlyConnection(currentReadOnlyNodeIds, edgeBeingReconnected)) return;
+        currentOnReconnectEnd(event, edgeBeingReconnected, handleType, connectionState);
+    }, [
+        onReconnectEndRef,
+        readOnlyNodeIdsRef
+    ]);
+    return {
+        guardedIsValidConnection,
+        guardedOnConnect: onConnect ? guardedOnConnect : void 0,
+        guardedOnReconnect: onReconnect ? guardedOnReconnect : void 0,
+        guardedOnReconnectEnd: onReconnectEnd ? guardedOnReconnectEnd : void 0
+    };
+}
+export { useReadOnlyConnectionCallbacks };

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

@@ -47,6 +47,7 @@ const SmartHandle_cjs_namespaceObject = require("../ButtonHandle/SmartHandle.cjs
 const useButtonHandles_cjs_namespaceObject = require("../ButtonHandle/useButtonHandles.cjs");
 const InitialsBadge_cjs_namespaceObject = require("../shared/InitialsBadge.cjs");
 const external_Toolbar_index_cjs_namespaceObject = require("../Toolbar/index.cjs");
+const NodeToolbar_utils_cjs_namespaceObject = require("../Toolbar/NodeToolbar/NodeToolbar.utils.cjs");
 const external_BaseNodeBadgeSlot_cjs_namespaceObject = require("./BaseNodeBadgeSlot.cjs");
 const external_BaseNodeConfigContext_cjs_namespaceObject = require("./BaseNodeConfigContext.cjs");
 const external_BaseNodeContainer_cjs_namespaceObject = require("./BaseNodeContainer.cjs");
@@ -54,10 +55,6 @@ const external_BaseNodeInnerShape_cjs_namespaceObject = require("./BaseNodeInner
 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;
@@ -179,16 +176,7 @@ 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)
-            }
-        };
-    }, [
+    const effectiveToolbarConfig = (0, external_react_namespaceObject.useMemo)(()=>toolbarConfig && isNodeReadOnly ? (0, NodeToolbar_utils_cjs_namespaceObject.lockToolbarConfig)(toolbarConfig) : toolbarConfig, [
         toolbarConfig,
         isNodeReadOnly
     ]);

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;AA8ChF,OAAO,KAAK,EACV,YAAY,EAIb,MAAM,kBAAkB,CAAC;AAqtB1B,eAAO,MAAM,QAAQ,8CAzqBa,SAAS,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,6CAyqBmB,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;AA+ChF,OAAO,KAAK,EACV,YAAY,EAIb,MAAM,kBAAkB,CAAC;AAosB1B,eAAO,MAAM,QAAQ,8CA/pBa,SAAS,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,6CA+pBmB,CAAC"}

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

@@ -19,6 +19,7 @@ import { SmartHandle, SmartHandleProvider } from "../ButtonHandle/SmartHandle.js
 import { useButtonHandles } from "../ButtonHandle/useButtonHandles.js";
 import { InitialsBadge } from "../shared/InitialsBadge.js";
 import { NodeToolbar } from "../Toolbar/index.js";
+import { lockToolbarConfig } from "../Toolbar/NodeToolbar/NodeToolbar.utils.js";
 import { BaseBadgeSlot } from "./BaseNodeBadgeSlot.js";
 import { useBaseNodeOverrideConfig } from "./BaseNodeConfigContext.js";
 import { BaseContainer } from "./BaseNodeContainer.js";
@@ -26,10 +27,6 @@ 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;
@@ -151,16 +148,7 @@ 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)
-            }
-        };
-    }, [
+    const effectiveToolbarConfig = useMemo(()=>toolbarConfig && isNodeReadOnly ? lockToolbarConfig(toolbarConfig) : toolbarConfig, [
         toolbarConfig,
         isNodeReadOnly
     ]);

package/dist/canvas/components/HierarchicalCanvas/HierarchicalCanvas.cjs

@@ -66,7 +66,7 @@ function shouldPersistNodeChange(change) {
 function isDefaultViewport(viewport) {
     return 0 === viewport.x && 0 === viewport.y && 1 === viewport.zoom;
 }
-const HierarchicalCanvas = ({ mode = 'design', initialCanvases, initialPath, onCanvasesChange, onPathChange })=>{
+const HierarchicalCanvas = ({ mode = 'design', readOnlyNodeIds, initialCanvases, initialPath, onCanvasesChange, onPathChange })=>{
     const canvasRef = (0, external_react_namespaceObject.useRef)(null);
     const containerRef = (0, external_react_namespaceObject.useRef)(null);
     const [reactFlowInstance, setReactFlowInstance] = (0, external_react_namespaceObject.useState)(null);
@@ -349,6 +349,7 @@ const HierarchicalCanvas = ({ mode = 'design', initialCanvases, initialPath, onC
                 onInit: handleInit,
                 onToolbarAction: handleToolbarAction,
                 mode: mode,
+                readOnlyNodeIds: readOnlyNodeIds,
                 defaultViewport: currentCanvas.viewport,
                 fitView: shouldFitView,
                 fitViewOptions: {

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

@@ -2,6 +2,7 @@ import type React from 'react';
 import type { CanvasLevel } from '../../types/canvas.types';
 interface HierarchicalCanvasProps {
     mode?: 'view' | 'design' | 'readonly';
+    readOnlyNodeIds?: ReadonlySet<string>;
     initialCanvases?: Record<string, CanvasLevel>;
     initialPath?: string[];
     onCanvasesChange?: (canvases: Record<string, CanvasLevel>) => void;

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

@@ -1 +1 @@
-{"version":3,"file":"HierarchicalCanvas.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/HierarchicalCanvas/HierarchicalCanvas.tsx"],"names":[],"mappings":"AAqBA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AA8B/B,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAe5D,UAAU,uBAAuB;IAC/B,IAAI,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,UAAU,CAAC;IAKtC,eAAe,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,WAAW,CAAC,CAAC;IAK9C,WAAW,CAAC,EAAE,MAAM,EAAE,CAAC;IAMvB,gBAAgB,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,CAAC,MAAM,EAAE,WAAW,CAAC,KAAK,IAAI,CAAC;IAInE,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;CACzC;AAyBD,eAAO,MAAM,kBAAkB,EAAE,KAAK,CAAC,EAAE,CAAC,uBAAuB,CAmZhE,CAAC"}
+{"version":3,"file":"HierarchicalCanvas.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/HierarchicalCanvas/HierarchicalCanvas.tsx"],"names":[],"mappings":"AAqBA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AA8B/B,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAe5D,UAAU,uBAAuB;IAC/B,IAAI,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,UAAU,CAAC;IAEtC,eAAe,CAAC,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;IAKtC,eAAe,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,WAAW,CAAC,CAAC;IAK9C,WAAW,CAAC,EAAE,MAAM,EAAE,CAAC;IAMvB,gBAAgB,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,CAAC,MAAM,EAAE,WAAW,CAAC,KAAK,IAAI,CAAC;IAInE,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;CACzC;AAyBD,eAAO,MAAM,kBAAkB,EAAE,KAAK,CAAC,EAAE,CAAC,uBAAuB,CAqZhE,CAAC"}

package/dist/canvas/components/HierarchicalCanvas/HierarchicalCanvas.js

@@ -38,7 +38,7 @@ function shouldPersistNodeChange(change) {
 function isDefaultViewport(viewport) {
     return 0 === viewport.x && 0 === viewport.y && 1 === viewport.zoom;
 }
-const HierarchicalCanvas = ({ mode = 'design', initialCanvases, initialPath, onCanvasesChange, onPathChange })=>{
+const HierarchicalCanvas = ({ mode = 'design', readOnlyNodeIds, initialCanvases, initialPath, onCanvasesChange, onPathChange })=>{
     const canvasRef = useRef(null);
     const containerRef = useRef(null);
     const [reactFlowInstance, setReactFlowInstance] = useState(null);
@@ -321,6 +321,7 @@ const HierarchicalCanvas = ({ mode = 'design', initialCanvases, initialPath, onC
                 onInit: handleInit,
                 onToolbarAction: handleToolbarAction,
                 mode: mode,
+                readOnlyNodeIds: readOnlyNodeIds,
                 defaultViewport: currentCanvas.viewport,
                 fitView: shouldFitView,
                 fitViewOptions: {

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

@@ -44,6 +44,7 @@ const nodePropsEqual_cjs_namespaceObject = require("../../utils/nodePropsEqual.c
 const toolbar_resolver_cjs_namespaceObject = require("../../utils/toolbar-resolver.cjs");
 const BaseCanvasModeProvider_cjs_namespaceObject = require("../BaseCanvas/BaseCanvasModeProvider.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 BaseNodeBadgeSlot_cjs_namespaceObject = require("../BaseNode/BaseNodeBadgeSlot.cjs");
 const BaseNodeContainer_cjs_namespaceObject = require("../BaseNode/BaseNodeContainer.cjs");
@@ -51,6 +52,7 @@ const BaseNodeMissingManifest_cjs_namespaceObject = require("../BaseNode/BaseNod
 const external_ButtonHandle_index_cjs_namespaceObject = require("../ButtonHandle/index.cjs");
 const external_CanvasTooltip_cjs_namespaceObject = require("../CanvasTooltip.cjs");
 const external_Toolbar_index_cjs_namespaceObject = require("../Toolbar/index.cjs");
+const NodeToolbar_utils_cjs_namespaceObject = require("../Toolbar/NodeToolbar/NodeToolbar.utils.cjs");
 const external_LoopNode_helpers_cjs_namespaceObject = require("./LoopNode.helpers.cjs");
 const external_LoopNodeExecutionCount_cjs_namespaceObject = require("./LoopNodeExecutionCount.cjs");
 const DEFAULT_LOOP_ICON = 'repeat';
@@ -173,6 +175,8 @@ function LoopNodeComponent(props) {
     ]);
     const { mode } = (0, BaseCanvasModeProvider_cjs_namespaceObject.useBaseCanvasMode)();
     const isDesignMode = 'design' === mode;
+    const isNodeReadOnly = (0, ReadOnlyNodesContext_cjs_namespaceObject.useIsNodeReadOnly)(id);
+    const canEditNode = isDesignMode && !isNodeReadOnly;
     const connectedHandleIds = (0, ConnectedHandlesContext_cjs_namespaceObject.useConnectedHandles)(id);
     const { multipleNodesSelected } = (0, SelectionStateContext_cjs_namespaceObject.useSelectionState)();
     const isConnecting = (0, react_cjs_namespaceObject.useStore)(NodeUtils_cjs_namespaceObject.selectIsConnecting);
@@ -245,6 +249,10 @@ function LoopNodeComponent(props) {
         statusContext,
         toolbarConfigProp
     ]);
+    const effectiveToolbarConfig = (0, external_react_namespaceObject.useMemo)(()=>toolbarConfig && isNodeReadOnly ? (0, NodeToolbar_utils_cjs_namespaceObject.lockToolbarConfig)(toolbarConfig) : toolbarConfig, [
+        toolbarConfig,
+        isNodeReadOnly
+    ]);
     const adornments = (0, external_react_namespaceObject.useMemo)(()=>({
             ...(0, adornment_resolver_cjs_namespaceObject.resolveAdornments)(statusContext, {
                 hideExecutionStatusAdornment: true
@@ -302,8 +310,8 @@ function LoopNodeComponent(props) {
         setIsHovered(false);
     }, []);
     const shouldShowHandles = (isConnecting || selected || isHovered) && !dragging;
-    const showHandleAddButtons = isDesignMode && !multipleNodesSelected && !isConnecting && !dragging;
-    const showEmptyStateButton = isDesignMode && !hasChildNodes && !!onAddFirstChild;
+    const showHandleAddButtons = canEditNode && !multipleNodesSelected && !isConnecting && !dragging;
+    const showEmptyStateButton = canEditNode && !hasChildNodes && !!onAddFirstChild;
     const interactionState = resolveInteractionState(dragging, selected, isHovered);
     const activeStatus = suggestionType ?? validationState?.validationStatus ?? executionStatus;
     const statusBorder = (0, BaseNodeContainer_cjs_namespaceObject.getStatusBorder)(activeStatus);
@@ -328,7 +336,7 @@ function LoopNodeComponent(props) {
         "data-suggestion-type": suggestionType,
         "data-validation-status": validationState?.validationStatus,
         "aria-busy": resolvedData.loading || void 0,
-        className: (0, apollo_wind_namespaceObject.cn)('group/loop-shell relative box-border flex h-full w-full flex-col overflow-visible rounded-[20px] border bg-transparent', 'transition-[border-color,box-shadow,opacity] shadow-(--canvas-node-shadow-rest)', 'border-border', statusBorder, isHovered && 'shadow-(--canvas-node-shadow-hover)', isHovered && !hasStatusBorder && 'border-border-hover', selected && 'outline outline-2 outline-foreground-accent-muted', isDropTarget && 'bg-surface-hover outline outline-2 outline-brand', 'drag' === interactionState && 'cursor-grabbing shadow-(--canvas-node-shadow-lifted)'),
+        className: (0, apollo_wind_namespaceObject.cn)('group/loop-shell relative box-border flex h-full w-full flex-col overflow-visible rounded-[20px] border bg-transparent', 'transition-[border-color,box-shadow,opacity] shadow-(--canvas-node-shadow-rest)', 'border-border', statusBorder, isHovered && 'shadow-(--canvas-node-shadow-hover)', isHovered && !hasStatusBorder && 'border-border-hover', selected && 'outline-2 outline-foreground-accent-muted', isDropTarget && 'bg-surface-hover outline-2 outline-brand', 'drag' === interactionState && 'cursor-grabbing shadow-(--canvas-node-shadow-lifted)'),
         style: {
             ...nodeSizeStyle,
             ...display.background ? {
@@ -379,9 +387,9 @@ function LoopNodeComponent(props) {
                     onAddFirstChild: handleEmptyClick
                 })
             }) : null,
-            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,
                 portalToNodeOverlay: true

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

@@ -1 +1 @@
-{"version":3,"file":"LoopNode.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/LoopNode/LoopNode.tsx"],"names":[],"mappings":"AA0CA,OAAO,KAAK,EAA+B,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAsInF,iBAAS,iBAAiB,CAAC,KAAK,EAAE,aAAa,2CA4R9C;AAED,eAAO,MAAM,QAAQ,+DAA6D,CAAC"}
+{"version":3,"file":"LoopNode.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/LoopNode/LoopNode.tsx"],"names":[],"mappings":"AA4CA,OAAO,KAAK,EAA+B,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAsInF,iBAAS,iBAAiB,CAAC,KAAK,EAAE,aAAa,2CAqS9C;AAED,eAAO,MAAM,QAAQ,+DAA6D,CAAC"}

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

@@ -16,6 +16,7 @@ import { areNodePropsEqualIgnoringPosition } from "../../utils/nodePropsEqual.js
 import { resolveToolbar } from "../../utils/toolbar-resolver.js";
 import { useBaseCanvasMode } from "../BaseCanvas/BaseCanvasModeProvider.js";
 import { useConnectedHandles } from "../BaseCanvas/ConnectedHandlesContext.js";
+import { useIsNodeReadOnly } from "../BaseCanvas/ReadOnlyNodesContext.js";
 import { useSelectionState } from "../BaseCanvas/SelectionStateContext.js";
 import { BaseBadgeSlot } from "../BaseNode/BaseNodeBadgeSlot.js";
 import { getStatusBorder } from "../BaseNode/BaseNodeContainer.js";
@@ -23,6 +24,7 @@ import { MissingManifestNode } from "../BaseNode/BaseNodeMissingManifest.js";
 import { ButtonHandles } from "../ButtonHandle/index.js";
 import { CanvasTooltip } from "../CanvasTooltip.js";
 import { NodeToolbar } from "../Toolbar/index.js";
+import { lockToolbarConfig } from "../Toolbar/NodeToolbar/NodeToolbar.utils.js";
 import { resolveContainerHandleGroups } from "./LoopNode.helpers.js";
 import { LoopNodeExecutionCount } from "./LoopNodeExecutionCount.js";
 const DEFAULT_LOOP_ICON = 'repeat';
@@ -145,6 +147,8 @@ function LoopNodeComponent(props) {
     ]);
     const { mode } = useBaseCanvasMode();
     const isDesignMode = 'design' === mode;
+    const isNodeReadOnly = useIsNodeReadOnly(id);
+    const canEditNode = isDesignMode && !isNodeReadOnly;
     const connectedHandleIds = useConnectedHandles(id);
     const { multipleNodesSelected } = useSelectionState();
     const isConnecting = useStore(selectIsConnecting);
@@ -217,6 +221,10 @@ function LoopNodeComponent(props) {
         statusContext,
         toolbarConfigProp
     ]);
+    const effectiveToolbarConfig = useMemo(()=>toolbarConfig && isNodeReadOnly ? lockToolbarConfig(toolbarConfig) : toolbarConfig, [
+        toolbarConfig,
+        isNodeReadOnly
+    ]);
     const adornments = useMemo(()=>({
             ...resolveAdornments(statusContext, {
                 hideExecutionStatusAdornment: true
@@ -274,8 +282,8 @@ function LoopNodeComponent(props) {
         setIsHovered(false);
     }, []);
     const shouldShowHandles = (isConnecting || selected || isHovered) && !dragging;
-    const showHandleAddButtons = isDesignMode && !multipleNodesSelected && !isConnecting && !dragging;
-    const showEmptyStateButton = isDesignMode && !hasChildNodes && !!onAddFirstChild;
+    const showHandleAddButtons = canEditNode && !multipleNodesSelected && !isConnecting && !dragging;
+    const showEmptyStateButton = canEditNode && !hasChildNodes && !!onAddFirstChild;
     const interactionState = resolveInteractionState(dragging, selected, isHovered);
     const activeStatus = suggestionType ?? validationState?.validationStatus ?? executionStatus;
     const statusBorder = getStatusBorder(activeStatus);
@@ -300,7 +308,7 @@ function LoopNodeComponent(props) {
         "data-suggestion-type": suggestionType,
         "data-validation-status": validationState?.validationStatus,
         "aria-busy": resolvedData.loading || void 0,
-        className: cn('group/loop-shell relative box-border flex h-full w-full flex-col overflow-visible rounded-[20px] border bg-transparent', 'transition-[border-color,box-shadow,opacity] shadow-(--canvas-node-shadow-rest)', 'border-border', statusBorder, isHovered && 'shadow-(--canvas-node-shadow-hover)', isHovered && !hasStatusBorder && 'border-border-hover', selected && 'outline outline-2 outline-foreground-accent-muted', isDropTarget && 'bg-surface-hover outline outline-2 outline-brand', 'drag' === interactionState && 'cursor-grabbing shadow-(--canvas-node-shadow-lifted)'),
+        className: cn('group/loop-shell relative box-border flex h-full w-full flex-col overflow-visible rounded-[20px] border bg-transparent', 'transition-[border-color,box-shadow,opacity] shadow-(--canvas-node-shadow-rest)', 'border-border', statusBorder, isHovered && 'shadow-(--canvas-node-shadow-hover)', isHovered && !hasStatusBorder && 'border-border-hover', selected && 'outline-2 outline-foreground-accent-muted', isDropTarget && 'bg-surface-hover outline-2 outline-brand', 'drag' === interactionState && 'cursor-grabbing shadow-(--canvas-node-shadow-lifted)'),
         style: {
             ...nodeSizeStyle,
             ...display.background ? {
@@ -351,9 +359,9 @@ function LoopNodeComponent(props) {
                     onAddFirstChild: handleEmptyClick
                 })
             }) : null,
-            toolbarConfig && /*#__PURE__*/ jsx(NodeToolbar, {
+            effectiveToolbarConfig && /*#__PURE__*/ jsx(NodeToolbar, {
                 nodeId: id,
-                config: toolbarConfig,
+                config: effectiveToolbarConfig,
                 expanded: selected || isHovered,
                 hidden: dragging || multipleNodesSelected,
                 portalToNodeOverlay: true

package/dist/canvas/components/StageNode/StageNode.cjs

@@ -31,6 +31,7 @@ const apollo_core_namespaceObject = require("@uipath/apollo-core");
 const index_cjs_namespaceObject = require("../../layouts/index.cjs");
 const external_react_namespaceObject = require("react");
 const nodePropsEqual_cjs_namespaceObject = require("../../utils/nodePropsEqual.cjs");
+const ReadOnlyNodesContext_cjs_namespaceObject = require("../BaseCanvas/ReadOnlyNodesContext.cjs");
 const external_FloatingCanvasPanel_index_cjs_namespaceObject = require("../FloatingCanvasPanel/index.cjs");
 const external_NodeContextMenu_index_cjs_namespaceObject = require("../NodeContextMenu/index.cjs");
 const hooks_index_cjs_namespaceObject = require("../NodePropertiesPanel/hooks/index.cjs");
@@ -51,7 +52,7 @@ const StageNodeInner = (props)=>{
         stageDetails?.tasks
     ]);
     const isException = stageDetails?.isException;
-    const isReadOnly = !!stageDetails?.isReadOnly;
+    const isReadOnly = (0, ReadOnlyNodesContext_cjs_namespaceObject.useIsNodeReadOnly)(id) || !!stageDetails?.isReadOnly;
     const selectedTaskId = stageDetails?.selectedTaskId;
     const status = execution?.stageStatus?.status;
     const [isHovered, setIsHovered] = (0, external_react_namespaceObject.useState)(false);
@@ -65,7 +66,7 @@ const StageNodeInner = (props)=>{
     const [isAddingTask, setIsAddingTask] = (0, external_react_namespaceObject.useState)(false);
     const [isReplacingTask, setIsReplacingTask] = (0, external_react_namespaceObject.useState)(false);
     (0, external_react_namespaceObject.useEffect)(()=>{
-        if (pendingReplaceTask) {
+        if (pendingReplaceTask && !isReadOnly) {
             const match = allTasks.flatMap((group, gi)=>group.map((task, ti)=>({
                         task,
                         groupIndex: gi,
@@ -83,21 +84,22 @@ const StageNodeInner = (props)=>{
     }, [
         pendingReplaceTask,
         selectedTaskId,
-        allTasks
+        allTasks,
+        isReadOnly
     ]);
     (0, external_react_namespaceObject.useEffect)(()=>{
-        if (false === selected) {
+        if (false === selected || isReadOnly) {
             setIsAddingTask(false);
             setIsReplacingTask(false);
         }
     }, [
-        selected
+        selected,
+        isReadOnly
     ]);
-    const shouldShowMenu = (0, external_react_namespaceObject.useMemo)(()=>menuItems && menuItems.length > 0 && (selected || isHovered) && !isReadOnly, [
+    const shouldShowMenu = (0, external_react_namespaceObject.useMemo)(()=>menuItems && menuItems.length > 0 && (selected || isHovered), [
         menuItems,
         selected,
-        isHovered,
-        isReadOnly
+        isHovered
     ]);
     const { setSelectedNodeId } = (0, hooks_index_cjs_namespaceObject.useSetNodeSelection)();
     const handleStageClick = (0, external_react_namespaceObject.useCallback)(()=>{
@@ -107,6 +109,7 @@ const StageNodeInner = (props)=>{
     ]);
     const handleTaskAddClick = (0, external_react_namespaceObject.useCallback)((event)=>{
         event.stopPropagation();
+        if (isReadOnly) return;
         if (onTaskAdd) onTaskAdd();
         else if (onAddTaskFromToolbox) setIsAddingTask(true);
         setSelectedNodeId(id);
@@ -114,7 +117,8 @@ const StageNodeInner = (props)=>{
         onTaskAdd,
         onAddTaskFromToolbox,
         setSelectedNodeId,
-        id
+        id,
+        isReadOnly
     ]);
     const handleAddTaskToolboxItemSelected = (0, external_react_namespaceObject.useCallback)((item)=>{
         onAddTaskFromToolbox?.(item);
@@ -190,7 +194,7 @@ const StageNodeInner = (props)=>{
                     })
                 ]
             }),
-            onAddTaskFromToolbox && isAddingTask && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_FloatingCanvasPanel_index_cjs_namespaceObject.FloatingCanvasPanel, {
+            onAddTaskFromToolbox && isAddingTask && !isReadOnly && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_FloatingCanvasPanel_index_cjs_namespaceObject.FloatingCanvasPanel, {
                 nodeId: id,
                 offset: 15,
                 children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_Toolbox_index_cjs_namespaceObject.Toolbox, {
@@ -201,7 +205,7 @@ const StageNodeInner = (props)=>{
                     onSearch: onTaskToolboxSearch
                 })
             }),
-            onReplaceTaskFromToolbox && isReplacingTask && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_FloatingCanvasPanel_index_cjs_namespaceObject.FloatingCanvasPanel, {
+            onReplaceTaskFromToolbox && isReplacingTask && !isReadOnly && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_FloatingCanvasPanel_index_cjs_namespaceObject.FloatingCanvasPanel, {
                 nodeId: id,
                 offset: 15,
                 children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_Toolbox_index_cjs_namespaceObject.Toolbox, {

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

@@ -1 +1 @@
-{"version":3,"file":"StageNode.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/StageNode/StageNode.tsx"],"names":[],"mappings":"AAiBA,OAAO,KAAK,EAAE,cAAc,EAAsB,MAAM,mBAAmB,CAAC;AA4M5E,eAAO,MAAM,SAAS,8CAtMS,cAAc,6CAsMmC,CAAC"}
+{"version":3,"file":"StageNode.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/StageNode/StageNode.tsx"],"names":[],"mappings":"AAkBA,OAAO,KAAK,EAAE,cAAc,EAAsB,MAAM,mBAAmB,CAAC;AAiN5E,eAAO,MAAM,SAAS,8CA3MS,cAAc,6CA2MmC,CAAC"}

package/dist/canvas/components/StageNode/StageNode.js

@@ -3,6 +3,7 @@ import { Spacing } from "@uipath/apollo-core";
 import { Column } from "../../layouts/index.js";
 import { memo, useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { areNodePropsEqualIgnoringPosition } from "../../utils/nodePropsEqual.js";
+import { useIsNodeReadOnly } from "../BaseCanvas/ReadOnlyNodesContext.js";
 import { FloatingCanvasPanel } from "../FloatingCanvasPanel/index.js";
 import { NodeContextMenu } from "../NodeContextMenu/index.js";
 import { useSetNodeSelection } from "../NodePropertiesPanel/hooks/index.js";
@@ -23,7 +24,7 @@ const StageNodeInner = (props)=>{
         stageDetails?.tasks
     ]);
     const isException = stageDetails?.isException;
-    const isReadOnly = !!stageDetails?.isReadOnly;
+    const isReadOnly = useIsNodeReadOnly(id) || !!stageDetails?.isReadOnly;
     const selectedTaskId = stageDetails?.selectedTaskId;
     const status = execution?.stageStatus?.status;
     const [isHovered, setIsHovered] = useState(false);
@@ -37,7 +38,7 @@ const StageNodeInner = (props)=>{
     const [isAddingTask, setIsAddingTask] = useState(false);
     const [isReplacingTask, setIsReplacingTask] = useState(false);
     useEffect(()=>{
-        if (pendingReplaceTask) {
+        if (pendingReplaceTask && !isReadOnly) {
             const match = allTasks.flatMap((group, gi)=>group.map((task, ti)=>({
                         task,
                         groupIndex: gi,
@@ -55,21 +56,22 @@ const StageNodeInner = (props)=>{
     }, [
         pendingReplaceTask,
         selectedTaskId,
-        allTasks
+        allTasks,
+        isReadOnly
     ]);
     useEffect(()=>{
-        if (false === selected) {
+        if (false === selected || isReadOnly) {
             setIsAddingTask(false);
             setIsReplacingTask(false);
         }
     }, [
-        selected
+        selected,
+        isReadOnly
     ]);
-    const shouldShowMenu = useMemo(()=>menuItems && menuItems.length > 0 && (selected || isHovered) && !isReadOnly, [
+    const shouldShowMenu = useMemo(()=>menuItems && menuItems.length > 0 && (selected || isHovered), [
         menuItems,
         selected,
-        isHovered,
-        isReadOnly
+        isHovered
     ]);
     const { setSelectedNodeId } = useSetNodeSelection();
     const handleStageClick = useCallback(()=>{
@@ -79,6 +81,7 @@ const StageNodeInner = (props)=>{
     ]);
     const handleTaskAddClick = useCallback((event)=>{
         event.stopPropagation();
+        if (isReadOnly) return;
         if (onTaskAdd) onTaskAdd();
         else if (onAddTaskFromToolbox) setIsAddingTask(true);
         setSelectedNodeId(id);
@@ -86,7 +89,8 @@ const StageNodeInner = (props)=>{
         onTaskAdd,
         onAddTaskFromToolbox,
         setSelectedNodeId,
-        id
+        id,
+        isReadOnly
     ]);
     const handleAddTaskToolboxItemSelected = useCallback((item)=>{
         onAddTaskFromToolbox?.(item);
@@ -162,7 +166,7 @@ const StageNodeInner = (props)=>{
                     })
                 ]
             }),
-            onAddTaskFromToolbox && isAddingTask && /*#__PURE__*/ jsx(FloatingCanvasPanel, {
+            onAddTaskFromToolbox && isAddingTask && !isReadOnly && /*#__PURE__*/ jsx(FloatingCanvasPanel, {
                 nodeId: id,
                 offset: 15,
                 children: /*#__PURE__*/ jsx(Toolbox, {
@@ -173,7 +177,7 @@ const StageNodeInner = (props)=>{
                     onSearch: onTaskToolboxSearch
                 })
             }),
-            onReplaceTaskFromToolbox && isReplacingTask && /*#__PURE__*/ jsx(FloatingCanvasPanel, {
+            onReplaceTaskFromToolbox && isReplacingTask && !isReadOnly && /*#__PURE__*/ jsx(FloatingCanvasPanel, {
                 nodeId: id,
                 offset: 15,
                 children: /*#__PURE__*/ jsx(Toolbox, {

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

@@ -52,9 +52,11 @@ const index_cjs_namespaceObject = require("../../../i18n/index.cjs");
 const external_constants_cjs_namespaceObject = require("../../constants.cjs");
 const useLatestRef_cjs_namespaceObject = require("../../hooks/useLatestRef.cjs");
 const nodePropsEqual_cjs_namespaceObject = require("../../utils/nodePropsEqual.cjs");
+const ReadOnlyNodesContext_cjs_namespaceObject = require("../BaseCanvas/ReadOnlyNodesContext.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 NodeToolbar_utils_cjs_namespaceObject = require("../Toolbar/NodeToolbar/NodeToolbar.utils.cjs");
 const external_FormattingToolbar_cjs_namespaceObject = require("./FormattingToolbar.cjs");
 const external_markdown_formatting_index_cjs_namespaceObject = require("./markdown-formatting/index.cjs");
 const external_StickyNoteCanvasOptionsContext_cjs_namespaceObject = require("./StickyNoteCanvasOptionsContext.cjs");
@@ -71,7 +73,9 @@ const minHeight = 8 * external_constants_cjs_namespaceObject.GRID_SPACING;
 const StickyNoteNodeComponent = ({ id, data, selected, dragging, placeholder = 'Add text', renderPlaceholderOnSelect = false, readOnly: readOnlyProp, onContentChange, onColorChange, onResize, onResizeStart, onResizeEnd, enableMediaEmbedding: enableMediaEmbeddingProp, formattingActions, markdownComponents: customMarkdownComponents })=>{
     const { _ } = (0, index_cjs_namespaceObject.useSafeLingui)();
     const canvasOptions = (0, external_StickyNoteCanvasOptionsContext_cjs_namespaceObject.useStickyNoteCanvasOptions)();
-    const readOnly = readOnlyProp ?? canvasOptions.readOnly;
+    const isNodeReadOnly = (0, ReadOnlyNodesContext_cjs_namespaceObject.useIsNodeReadOnly)(id);
+    const stickyNoteReadOnly = readOnlyProp ?? canvasOptions.readOnly;
+    const readOnly = isNodeReadOnly || stickyNoteReadOnly;
     const enableMediaEmbedding = enableMediaEmbeddingProp ?? canvasOptions.enableMediaEmbedding;
     const { updateNodeData, deleteElements } = (0, react_cjs_namespaceObject.useReactFlow)();
     const { multipleNodesSelected } = (0, SelectionStateContext_cjs_namespaceObject.useSelectionState)();
@@ -85,6 +89,7 @@ const StickyNoteNodeComponent = ({ id, data, selected, dragging, placeholder = '
     const formattingToolbarRef = (0, external_react_namespaceObject.useRef)(null);
     const skipBlurRef = (0, external_react_namespaceObject.useRef)(null);
     const resizeActiveRef = (0, external_react_namespaceObject.useRef)(false);
+    const readOnlyRef = (0, useLatestRef_cjs_namespaceObject.useLatestRef)(readOnly);
     const resizeLifecycle = {
         content: data.content,
         id,
@@ -155,6 +160,7 @@ const StickyNoteNodeComponent = ({ id, data, selected, dragging, placeholder = '
     (0, external_react_namespaceObject.useEffect)(()=>{
         if (readOnly) {
             setIsEditing(false);
+            setIsColorPickerOpen(false);
             updateLocalContent(data.content || '');
         }
     }, [
@@ -224,6 +230,7 @@ const StickyNoteNodeComponent = ({ id, data, selected, dragging, placeholder = '
         skipBlurRef.current = selection.value;
         let completed = false;
         const restoreSelection = (next)=>{
+            if (readOnlyRef.current) return;
             setIsEditing(true);
             requestAnimationFrame(()=>{
                 const currentTextarea = textAreaRef.current;
@@ -237,6 +244,10 @@ const StickyNoteNodeComponent = ({ id, data, selected, dragging, placeholder = '
         const complete = (next, shouldPersist)=>{
             if (completed) return;
             completed = true;
+            if (readOnlyRef.current) {
+                skipBlurRef.current = null;
+                return;
+            }
             skipBlurRef.current = shouldPersist ? next.value : null;
             setActiveFormats((0, external_markdown_formatting_index_cjs_namespaceObject.detectActiveFormats)(next));
             if (shouldPersist) {
@@ -273,6 +284,7 @@ const StickyNoteNodeComponent = ({ id, data, selected, dragging, placeholder = '
     }, [
         id,
         onContentChange,
+        readOnlyRef,
         updateLocalContent,
         updateNodeData
     ]);
@@ -437,6 +449,7 @@ const StickyNoteNodeComponent = ({ id, data, selected, dragging, placeholder = '
         resizeLifecycleRef
     ]);
     const handleColorChange = (0, external_react_namespaceObject.useCallback)((newColor)=>{
+        if (readOnly) return;
         onColorChange?.(newColor);
         updateNodeData(id, {
             color: newColor
@@ -445,11 +458,15 @@ const StickyNoteNodeComponent = ({ id, data, selected, dragging, placeholder = '
     }, [
         id,
         updateNodeData,
-        onColorChange
+        onColorChange,
+        readOnly
     ]);
     const handleToggleColorPicker = (0, external_react_namespaceObject.useCallback)(()=>{
+        if (readOnly) return;
         setIsColorPickerOpen((prev)=>!prev);
-    }, []);
+    }, [
+        readOnly
+    ]);
     const handleEditClick = (0, external_react_namespaceObject.useCallback)(()=>{
         if (readOnly) return;
         setIsEditing(true);
@@ -463,6 +480,7 @@ const StickyNoteNodeComponent = ({ id, data, selected, dragging, placeholder = '
         readOnly
     ]);
     const handleDelete = (0, external_react_namespaceObject.useCallback)(()=>{
+        if (readOnly) return;
         deleteElements({
             nodes: [
                 {
@@ -472,7 +490,8 @@ const StickyNoteNodeComponent = ({ id, data, selected, dragging, placeholder = '
         });
     }, [
         id,
-        deleteElements
+        deleteElements,
+        readOnly
     ]);
     const builtInMarkdownComponents = (0, external_react_namespaceObject.useMemo)(()=>({
             a: ({ node: _node, href, children, ...props })=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("a", {
@@ -580,7 +599,11 @@ const StickyNoteNodeComponent = ({ id, data, selected, dragging, placeholder = '
         color,
         handleDelete
     ]);
-    const shouldRenderToolbarOverlay = !readOnly && selected && !dragging && !isResizing && !multipleNodesSelected;
+    const effectiveToolbarConfig = (0, external_react_namespaceObject.useMemo)(()=>isNodeReadOnly ? (0, NodeToolbar_utils_cjs_namespaceObject.lockToolbarConfig)(toolbarConfig) : toolbarConfig, [
+        isNodeReadOnly,
+        toolbarConfig
+    ]);
+    const shouldRenderToolbarOverlay = !stickyNoteReadOnly && selected && !dragging && !isResizing && !multipleNodesSelected;
     const shouldRenderResizeControls = !readOnly || isResizing;
     return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(jsx_runtime_namespaceObject.Fragment, {
         children: [
@@ -727,7 +750,7 @@ const StickyNoteNodeComponent = ({ id, data, selected, dragging, placeholder = '
                     }),
                     shouldRenderToolbarOverlay && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_Toolbar_index_cjs_namespaceObject.NodeToolbar, {
                         nodeId: id,
-                        config: toolbarConfig,
+                        config: effectiveToolbarConfig,
                         expanded: true,
                         portalToNodeOverlay: true
                     }),