@uipath/apollo-react 4.12.2 → 4.13.0-pr556.bec268e

package/dist/canvas/utils/{createPreviewNode.cjs → createPreviewGraph.cjs}

@@ -24,13 +24,46 @@ var __webpack_require__ = {};
 var __webpack_exports__ = {};
 __webpack_require__.r(__webpack_exports__);
 __webpack_require__.d(__webpack_exports__, {
-    applyPreviewToReactFlow: ()=>applyPreviewToReactFlow,
     removePreviewFromReactFlow: ()=>removePreviewFromReactFlow,
-    createPreviewNode: ()=>createPreviewNode
+    applyPreviewGraphToReactFlow: ()=>applyPreviewGraphToReactFlow,
+    PREVIEW_EDGE_STYLE: ()=>PREVIEW_EDGE_STYLE,
+    createPreviewGraph: ()=>createPreviewGraph,
+    reparentPreviewNodeToContainer: ()=>reparentPreviewNodeToContainer,
+    showPreviewGraph: ()=>showPreviewGraph,
+    getOppositePosition: ()=>getOppositePosition,
+    inferParentId: ()=>inferParentId
 });
 const react_cjs_namespaceObject = require("../xyflow/react.cjs");
 const external_constants_cjs_namespaceObject = require("../constants.cjs");
 const external_NodeUtils_cjs_namespaceObject = require("./NodeUtils.cjs");
+const PREVIEW_EDGE_STYLE = {
+    strokeDasharray: '5,5',
+    opacity: 0.8,
+    stroke: 'var(--canvas-selection-indicator)',
+    strokeWidth: 2
+};
+function inferParentId(sourceId, targetId, nodes) {
+    const sourceNode = nodes.find((node)=>node.id === sourceId);
+    const targetNode = nodes.find((node)=>node.id === targetId);
+    if (!sourceNode || !targetNode) return;
+    if (sourceNode.parentId && sourceNode.parentId === targetNode.parentId) return sourceNode.parentId;
+    if (targetNode.parentId && targetNode.parentId === sourceNode.id) return sourceNode.id;
+    if (sourceNode.parentId && sourceNode.parentId === targetNode.id) return targetNode.id;
+}
+function reparentPreviewNodeToContainer(previewNode, containerId, reactFlowInstance) {
+    const containerNode = reactFlowInstance.getNode(containerId);
+    if (!containerNode) return null;
+    const containerAbsolutePosition = (0, external_NodeUtils_cjs_namespaceObject.getAbsolutePosition)(containerNode, reactFlowInstance.getNodes());
+    return {
+        ...previewNode,
+        position: {
+            x: previewNode.position.x - containerAbsolutePosition.x,
+            y: previewNode.position.y - containerAbsolutePosition.y
+        },
+        parentId: containerId,
+        extent: 'parent'
+    };
+}
 function getOppositePosition(position) {
     switch(position){
         case react_cjs_namespaceObject.Position.Left:
@@ -74,6 +107,12 @@ function calculatePositionFromDrop(dropPosition, handlePosition, previewNodeSize
             };
     }
 }
+function calculateCenteredPosition(centerPosition, previewNodeSize) {
+    return {
+        x: centerPosition.x - previewNodeSize.width / 2,
+        y: centerPosition.y - previewNodeSize.height / 2
+    };
+}
 function computeSpreadOffset(handle, size) {
     const index = handle?.index ?? null;
     const count = handle?.count ?? 1;
@@ -136,10 +175,10 @@ function calculateAutoPosition(sourceNode, handlePosition, previewNodeSize, exis
     };
     return (0, external_NodeUtils_cjs_namespaceObject.getNonOverlappingPositionForDirection)(nodesWithAbsolutePositions, initialPosition, previewNodeSize, direction, offset, ignoredNodeTypes, overflowDirection);
 }
-function createPreviewNode(sourceNodeId, sourceHandleId, reactFlowInstance, position, data, sourceHandleType = 'source', previewNodeSize = {
+function createPreviewNode({ sourceNodeId, sourceHandleId, reactFlowInstance, position, data, sourceHandleType = 'source', previewNodeSize = {
     width: external_constants_cjs_namespaceObject.DEFAULT_NODE_SIZE,
     height: external_constants_cjs_namespaceObject.DEFAULT_NODE_SIZE
-}, handlePosition = react_cjs_namespaceObject.Position.Right, ignoredNodeTypes = []) {
+}, handlePosition = react_cjs_namespaceObject.Position.Right, ignoredNodeTypes = [], positionMode = 'drop' }) {
     const sourceNode = reactFlowInstance.getNode(sourceNodeId);
     if (!sourceNode) {
         console.warn(`Source node ${sourceNodeId} not found`);
@@ -149,49 +188,74 @@ function createPreviewNode(sourceNodeId, sourceHandleId, reactFlowInstance, posi
     const existingNodes = reactFlowInstance.getNodes().filter((n)=>n.id !== external_constants_cjs_namespaceObject.PREVIEW_NODE_ID);
     const internalNode = void 0 === position ? reactFlowInstance.getInternalNode(sourceNodeId) : void 0;
     const handle = internalNode ? (0, external_NodeUtils_cjs_namespaceObject.resolveHandleContext)(internalNode, sourceHandleId, handlePosition) : void 0;
-    const nodePosition = position ? calculatePositionFromDrop(position, handlePosition, previewNodeSize) : calculateAutoPosition(sourceNode, handlePosition, previewNodeSize, existingNodes, void 0, ignoredNodeTypes, handle);
+    const previewPosition = position ? 'center' === positionMode ? calculateCenteredPosition(position, previewNodeSize) : calculatePositionFromDrop(position, handlePosition, previewNodeSize) : calculateAutoPosition(sourceNode, handlePosition, previewNodeSize, existingNodes, void 0, ignoredNodeTypes, handle);
     const handleFacingSource = getOppositePosition(handlePosition);
-    const finalData = {
+    const previewData = {
         ...data ?? {}
     };
-    finalData.inputHandlePosition = treatPreviewAsSource ? handlePosition : handleFacingSource;
-    finalData.outputHandlePosition = treatPreviewAsSource ? handleFacingSource : handlePosition;
-    const previewNode = {
+    previewData.inputHandlePosition = treatPreviewAsSource ? handlePosition : handleFacingSource;
+    previewData.outputHandlePosition = treatPreviewAsSource ? handleFacingSource : handlePosition;
+    const node = {
         id: external_constants_cjs_namespaceObject.PREVIEW_NODE_ID,
         type: 'preview',
-        position: nodePosition,
+        position: previewPosition,
         ...previewNodeSize,
         selected: true,
-        data: finalData
+        data: previewData
     };
-    const previewSourceAndTargetData = treatPreviewAsSource ? {
-        source: external_constants_cjs_namespaceObject.PREVIEW_NODE_ID,
-        sourceHandle: 'output',
-        target: sourceNodeId,
-        targetHandle: sourceHandleId
-    } : {
-        source: sourceNodeId,
-        sourceHandle: sourceHandleId,
-        target: external_constants_cjs_namespaceObject.PREVIEW_NODE_ID,
-        targetHandle: 'input'
-    };
-    const previewEdge = {
+    const edge = {
         id: external_constants_cjs_namespaceObject.PREVIEW_EDGE_ID,
-        ...previewSourceAndTargetData,
+        ...treatPreviewAsSource ? {
+            source: external_constants_cjs_namespaceObject.PREVIEW_NODE_ID,
+            sourceHandle: external_constants_cjs_namespaceObject.DEFAULT_SOURCE_HANDLE_ID,
+            target: sourceNodeId,
+            targetHandle: sourceHandleId
+        } : {
+            source: sourceNodeId,
+            sourceHandle: sourceHandleId,
+            target: external_constants_cjs_namespaceObject.PREVIEW_NODE_ID,
+            targetHandle: external_constants_cjs_namespaceObject.DEFAULT_TARGET_HANDLE_ID
+        },
         type: 'default',
-        style: {
-            strokeDasharray: '5,5',
-            opacity: 0.8,
-            stroke: 'var(--canvas-selection-indicator)',
-            strokeWidth: 2
-        }
+        style: PREVIEW_EDGE_STYLE
     };
     return {
-        node: previewNode,
-        edge: previewEdge
+        sourceNode,
+        node,
+        edge
     };
 }
-function applyPreviewToReactFlow(preview, reactFlowInstance) {
+function createPreviewGraph(options) {
+    const { reactFlowInstance, targetNodeId, targetHandleId, containerId, removedEdgeIds, trailingEdgeId, trailingEdgeStyle = PREVIEW_EDGE_STYLE } = options;
+    const preview = createPreviewNode(options);
+    if (!preview) return null;
+    const resolvedContainerId = containerId ?? preview.sourceNode.parentId;
+    const finalPreviewNode = resolvedContainerId ? reparentPreviewNodeToContainer(preview.node, resolvedContainerId, reactFlowInstance) : preview.node;
+    if (!finalPreviewNode) return null;
+    const edges = [
+        preview.edge
+    ];
+    if (targetNodeId) edges.push({
+        id: trailingEdgeId ?? `${external_constants_cjs_namespaceObject.PREVIEW_NODE_ID}-${targetNodeId}`,
+        source: external_constants_cjs_namespaceObject.PREVIEW_NODE_ID,
+        sourceHandle: external_constants_cjs_namespaceObject.DEFAULT_SOURCE_HANDLE_ID,
+        target: targetNodeId,
+        targetHandle: targetHandleId,
+        type: 'default',
+        style: trailingEdgeStyle
+    });
+    return {
+        node: finalPreviewNode,
+        edges,
+        removedEdgeIds
+    };
+}
+function showPreviewGraph(options) {
+    const preview = createPreviewGraph(options);
+    if (preview) applyPreviewGraphToReactFlow(preview, options.reactFlowInstance);
+    return preview;
+}
+function applyPreviewGraphToReactFlow(preview, reactFlowInstance) {
     setTimeout(()=>{
         reactFlowInstance.setNodes((nodes)=>[
                 ...nodes.filter((n)=>n.id !== external_constants_cjs_namespaceObject.PREVIEW_NODE_ID).map((n)=>({
@@ -201,22 +265,32 @@ function applyPreviewToReactFlow(preview, reactFlowInstance) {
                 preview.node
             ]);
         reactFlowInstance.setEdges((edges)=>[
-                ...edges.filter((e)=>e.id !== external_constants_cjs_namespaceObject.PREVIEW_EDGE_ID),
-                preview.edge
+                ...edges.filter((edge)=>edge.source !== external_constants_cjs_namespaceObject.PREVIEW_NODE_ID && edge.target !== external_constants_cjs_namespaceObject.PREVIEW_NODE_ID && !preview.removedEdgeIds?.includes(edge.id)),
+                ...preview.edges
             ]);
     }, 0);
 }
 function removePreviewFromReactFlow(reactFlowInstance) {
     reactFlowInstance.setNodes((nodes)=>nodes.filter((n)=>n.id !== external_constants_cjs_namespaceObject.PREVIEW_NODE_ID));
-    reactFlowInstance.setEdges((edges)=>edges.filter((e)=>e.id !== external_constants_cjs_namespaceObject.PREVIEW_EDGE_ID));
+    reactFlowInstance.setEdges((edges)=>edges.filter((edge)=>edge.source !== external_constants_cjs_namespaceObject.PREVIEW_NODE_ID && edge.target !== external_constants_cjs_namespaceObject.PREVIEW_NODE_ID));
 }
-exports.applyPreviewToReactFlow = __webpack_exports__.applyPreviewToReactFlow;
-exports.createPreviewNode = __webpack_exports__.createPreviewNode;
+exports.PREVIEW_EDGE_STYLE = __webpack_exports__.PREVIEW_EDGE_STYLE;
+exports.applyPreviewGraphToReactFlow = __webpack_exports__.applyPreviewGraphToReactFlow;
+exports.createPreviewGraph = __webpack_exports__.createPreviewGraph;
+exports.getOppositePosition = __webpack_exports__.getOppositePosition;
+exports.inferParentId = __webpack_exports__.inferParentId;
 exports.removePreviewFromReactFlow = __webpack_exports__.removePreviewFromReactFlow;
+exports.reparentPreviewNodeToContainer = __webpack_exports__.reparentPreviewNodeToContainer;
+exports.showPreviewGraph = __webpack_exports__.showPreviewGraph;
 for(var __rspack_i in __webpack_exports__)if (-1 === [
-    "applyPreviewToReactFlow",
-    "createPreviewNode",
-    "removePreviewFromReactFlow"
+    "PREVIEW_EDGE_STYLE",
+    "applyPreviewGraphToReactFlow",
+    "createPreviewGraph",
+    "getOppositePosition",
+    "inferParentId",
+    "removePreviewFromReactFlow",
+    "reparentPreviewNodeToContainer",
+    "showPreviewGraph"
 ].indexOf(__rspack_i)) exports[__rspack_i] = __webpack_exports__[__rspack_i];
 Object.defineProperty(exports, '__esModule', {
     value: true

package/dist/canvas/utils/createPreviewGraph.d.ts

@@ -0,0 +1,43 @@
+import { type Edge, type Node, Position, type ReactFlowInstance } from '../xyflow/react.ts';
+export interface PreviewGraph {
+    node: Node;
+    edges: Edge[];
+    removedEdgeIds?: string[];
+}
+export declare const PREVIEW_EDGE_STYLE: Edge['style'];
+export type PreviewNodePositionMode = 'drop' | 'center';
+interface CreatePreviewNodeOptions {
+    sourceNodeId: string;
+    sourceHandleId: string;
+    reactFlowInstance: ReactFlowInstance;
+    position?: {
+        x: number;
+        y: number;
+    };
+    data?: Record<string, unknown>;
+    sourceHandleType?: 'source' | 'target';
+    previewNodeSize?: {
+        width: number;
+        height: number;
+    };
+    handlePosition?: Position;
+    ignoredNodeTypes?: string[];
+    positionMode?: PreviewNodePositionMode;
+}
+export interface CreatePreviewGraphOptions extends CreatePreviewNodeOptions {
+    targetNodeId?: string;
+    targetHandleId?: string | null;
+    containerId?: string;
+    removedEdgeIds?: string[];
+    trailingEdgeId?: string;
+    trailingEdgeStyle?: Edge['style'];
+}
+export declare function inferParentId(sourceId: string, targetId: string, nodes: Node[]): string | undefined;
+export declare function reparentPreviewNodeToContainer(previewNode: Node, containerId: string, reactFlowInstance: ReactFlowInstance): Node | null;
+export declare function getOppositePosition(position: Position): Position;
+export declare function createPreviewGraph(options: CreatePreviewGraphOptions): PreviewGraph | null;
+export declare function showPreviewGraph(options: CreatePreviewGraphOptions): PreviewGraph | null;
+export declare function applyPreviewGraphToReactFlow(preview: PreviewGraph, reactFlowInstance: ReactFlowInstance): void;
+export declare function removePreviewFromReactFlow(reactFlowInstance: ReactFlowInstance): void;
+export {};
+//# sourceMappingURL=createPreviewGraph.d.ts.map

package/dist/canvas/utils/createPreviewGraph.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"createPreviewGraph.d.ts","sourceRoot":"","sources":["../../../src/canvas/utils/createPreviewGraph.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,IAAI,EACT,KAAK,IAAI,EACT,QAAQ,EACR,KAAK,iBAAiB,EACvB,MAAM,0CAA0C,CAAC;AAgBlD,MAAM,WAAW,YAAY;IAC3B,IAAI,EAAE,IAAI,CAAC;IACX,KAAK,EAAE,IAAI,EAAE,CAAC;IACd,cAAc,CAAC,EAAE,MAAM,EAAE,CAAC;CAC3B;AAED,eAAO,MAAM,kBAAkB,EAAE,IAAI,CAAC,OAAO,CAK5C,CAAC;AAEF,MAAM,MAAM,uBAAuB,GAAG,MAAM,GAAG,QAAQ,CAAC;AAExD,UAAU,wBAAwB;IAChC,YAAY,EAAE,MAAM,CAAC;IACrB,cAAc,EAAE,MAAM,CAAC;IACvB,iBAAiB,EAAE,iBAAiB,CAAC;IACrC,QAAQ,CAAC,EAAE;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IACpC,IAAI,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IAC/B,gBAAgB,CAAC,EAAE,QAAQ,GAAG,QAAQ,CAAC;IACvC,eAAe,CAAC,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAE,CAAC;IACpD,cAAc,CAAC,EAAE,QAAQ,CAAC;IAC1B,gBAAgB,CAAC,EAAE,MAAM,EAAE,CAAC;IAC5B,YAAY,CAAC,EAAE,uBAAuB,CAAC;CACxC;AAED,MAAM,WAAW,yBAA0B,SAAQ,wBAAwB;IACzE,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,cAAc,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC/B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,cAAc,CAAC,EAAE,MAAM,EAAE,CAAC;IAC1B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,iBAAiB,CAAC,EAAE,IAAI,CAAC,OAAO,CAAC,CAAC;CACnC;AAQD,wBAAgB,aAAa,CAC3B,QAAQ,EAAE,MAAM,EAChB,QAAQ,EAAE,MAAM,EAChB,KAAK,EAAE,IAAI,EAAE,GACZ,MAAM,GAAG,SAAS,CAkBpB;AAED,wBAAgB,8BAA8B,CAC5C,WAAW,EAAE,IAAI,EACjB,WAAW,EAAE,MAAM,EACnB,iBAAiB,EAAE,iBAAiB,GACnC,IAAI,GAAG,IAAI,CAoBb;AAMD,wBAAgB,mBAAmB,CAAC,QAAQ,EAAE,QAAQ,GAAG,QAAQ,CAahE;AAwRD,wBAAgB,kBAAkB,CAAC,OAAO,EAAE,yBAAyB,GAAG,YAAY,GAAG,IAAI,CAwC1F;AAOD,wBAAgB,gBAAgB,CAAC,OAAO,EAAE,yBAAyB,GAAG,YAAY,GAAG,IAAI,CAMxF;AAOD,wBAAgB,4BAA4B,CAC1C,OAAO,EAAE,YAAY,EACrB,iBAAiB,EAAE,iBAAiB,GACnC,IAAI,CAmBN;AAKD,wBAAgB,0BAA0B,CAAC,iBAAiB,EAAE,iBAAiB,GAAG,IAAI,CAKrF"}

package/dist/canvas/utils/{createPreviewNode.js → createPreviewGraph.js}

@@ -1,6 +1,34 @@
 import { Position } from "../xyflow/react.js";
-import { DEFAULT_NODE_SIZE, GRID_SPACING, PREVIEW_EDGE_ID, PREVIEW_NODE_ID } from "../constants.js";
+import { DEFAULT_NODE_SIZE, DEFAULT_SOURCE_HANDLE_ID, DEFAULT_TARGET_HANDLE_ID, GRID_SPACING, PREVIEW_EDGE_ID, PREVIEW_NODE_ID } from "../constants.js";
 import { getAbsolutePosition, getNonOverlappingPositionForDirection, resolveHandleContext } from "./NodeUtils.js";
+const PREVIEW_EDGE_STYLE = {
+    strokeDasharray: '5,5',
+    opacity: 0.8,
+    stroke: 'var(--canvas-selection-indicator)',
+    strokeWidth: 2
+};
+function inferParentId(sourceId, targetId, nodes) {
+    const sourceNode = nodes.find((node)=>node.id === sourceId);
+    const targetNode = nodes.find((node)=>node.id === targetId);
+    if (!sourceNode || !targetNode) return;
+    if (sourceNode.parentId && sourceNode.parentId === targetNode.parentId) return sourceNode.parentId;
+    if (targetNode.parentId && targetNode.parentId === sourceNode.id) return sourceNode.id;
+    if (sourceNode.parentId && sourceNode.parentId === targetNode.id) return targetNode.id;
+}
+function reparentPreviewNodeToContainer(previewNode, containerId, reactFlowInstance) {
+    const containerNode = reactFlowInstance.getNode(containerId);
+    if (!containerNode) return null;
+    const containerAbsolutePosition = getAbsolutePosition(containerNode, reactFlowInstance.getNodes());
+    return {
+        ...previewNode,
+        position: {
+            x: previewNode.position.x - containerAbsolutePosition.x,
+            y: previewNode.position.y - containerAbsolutePosition.y
+        },
+        parentId: containerId,
+        extent: 'parent'
+    };
+}
 function getOppositePosition(position) {
     switch(position){
         case Position.Left:
@@ -44,6 +72,12 @@ function calculatePositionFromDrop(dropPosition, handlePosition, previewNodeSize
             };
     }
 }
+function calculateCenteredPosition(centerPosition, previewNodeSize) {
+    return {
+        x: centerPosition.x - previewNodeSize.width / 2,
+        y: centerPosition.y - previewNodeSize.height / 2
+    };
+}
 function computeSpreadOffset(handle, size) {
     const index = handle?.index ?? null;
     const count = handle?.count ?? 1;
@@ -106,10 +140,10 @@ function calculateAutoPosition(sourceNode, handlePosition, previewNodeSize, exis
     };
     return getNonOverlappingPositionForDirection(nodesWithAbsolutePositions, initialPosition, previewNodeSize, direction, offset, ignoredNodeTypes, overflowDirection);
 }
-function createPreviewNode(sourceNodeId, sourceHandleId, reactFlowInstance, position, data, sourceHandleType = 'source', previewNodeSize = {
+function createPreviewNode({ sourceNodeId, sourceHandleId, reactFlowInstance, position, data, sourceHandleType = 'source', previewNodeSize = {
     width: DEFAULT_NODE_SIZE,
     height: DEFAULT_NODE_SIZE
-}, handlePosition = Position.Right, ignoredNodeTypes = []) {
+}, handlePosition = Position.Right, ignoredNodeTypes = [], positionMode = 'drop' }) {
     const sourceNode = reactFlowInstance.getNode(sourceNodeId);
     if (!sourceNode) {
         console.warn(`Source node ${sourceNodeId} not found`);
@@ -119,49 +153,74 @@ function createPreviewNode(sourceNodeId, sourceHandleId, reactFlowInstance, posi
     const existingNodes = reactFlowInstance.getNodes().filter((n)=>n.id !== PREVIEW_NODE_ID);
     const internalNode = void 0 === position ? reactFlowInstance.getInternalNode(sourceNodeId) : void 0;
     const handle = internalNode ? resolveHandleContext(internalNode, sourceHandleId, handlePosition) : void 0;
-    const nodePosition = position ? calculatePositionFromDrop(position, handlePosition, previewNodeSize) : calculateAutoPosition(sourceNode, handlePosition, previewNodeSize, existingNodes, void 0, ignoredNodeTypes, handle);
+    const previewPosition = position ? 'center' === positionMode ? calculateCenteredPosition(position, previewNodeSize) : calculatePositionFromDrop(position, handlePosition, previewNodeSize) : calculateAutoPosition(sourceNode, handlePosition, previewNodeSize, existingNodes, void 0, ignoredNodeTypes, handle);
     const handleFacingSource = getOppositePosition(handlePosition);
-    const finalData = {
+    const previewData = {
         ...data ?? {}
     };
-    finalData.inputHandlePosition = treatPreviewAsSource ? handlePosition : handleFacingSource;
-    finalData.outputHandlePosition = treatPreviewAsSource ? handleFacingSource : handlePosition;
-    const previewNode = {
+    previewData.inputHandlePosition = treatPreviewAsSource ? handlePosition : handleFacingSource;
+    previewData.outputHandlePosition = treatPreviewAsSource ? handleFacingSource : handlePosition;
+    const node = {
         id: PREVIEW_NODE_ID,
         type: 'preview',
-        position: nodePosition,
+        position: previewPosition,
         ...previewNodeSize,
         selected: true,
-        data: finalData
+        data: previewData
     };
-    const previewSourceAndTargetData = treatPreviewAsSource ? {
-        source: PREVIEW_NODE_ID,
-        sourceHandle: 'output',
-        target: sourceNodeId,
-        targetHandle: sourceHandleId
-    } : {
-        source: sourceNodeId,
-        sourceHandle: sourceHandleId,
-        target: PREVIEW_NODE_ID,
-        targetHandle: 'input'
-    };
-    const previewEdge = {
+    const edge = {
         id: PREVIEW_EDGE_ID,
-        ...previewSourceAndTargetData,
+        ...treatPreviewAsSource ? {
+            source: PREVIEW_NODE_ID,
+            sourceHandle: DEFAULT_SOURCE_HANDLE_ID,
+            target: sourceNodeId,
+            targetHandle: sourceHandleId
+        } : {
+            source: sourceNodeId,
+            sourceHandle: sourceHandleId,
+            target: PREVIEW_NODE_ID,
+            targetHandle: DEFAULT_TARGET_HANDLE_ID
+        },
         type: 'default',
-        style: {
-            strokeDasharray: '5,5',
-            opacity: 0.8,
-            stroke: 'var(--canvas-selection-indicator)',
-            strokeWidth: 2
-        }
+        style: PREVIEW_EDGE_STYLE
     };
     return {
-        node: previewNode,
-        edge: previewEdge
+        sourceNode,
+        node,
+        edge
     };
 }
-function applyPreviewToReactFlow(preview, reactFlowInstance) {
+function createPreviewGraph(options) {
+    const { reactFlowInstance, targetNodeId, targetHandleId, containerId, removedEdgeIds, trailingEdgeId, trailingEdgeStyle = PREVIEW_EDGE_STYLE } = options;
+    const preview = createPreviewNode(options);
+    if (!preview) return null;
+    const resolvedContainerId = containerId ?? preview.sourceNode.parentId;
+    const finalPreviewNode = resolvedContainerId ? reparentPreviewNodeToContainer(preview.node, resolvedContainerId, reactFlowInstance) : preview.node;
+    if (!finalPreviewNode) return null;
+    const edges = [
+        preview.edge
+    ];
+    if (targetNodeId) edges.push({
+        id: trailingEdgeId ?? `${PREVIEW_NODE_ID}-${targetNodeId}`,
+        source: PREVIEW_NODE_ID,
+        sourceHandle: DEFAULT_SOURCE_HANDLE_ID,
+        target: targetNodeId,
+        targetHandle: targetHandleId,
+        type: 'default',
+        style: trailingEdgeStyle
+    });
+    return {
+        node: finalPreviewNode,
+        edges,
+        removedEdgeIds
+    };
+}
+function showPreviewGraph(options) {
+    const preview = createPreviewGraph(options);
+    if (preview) applyPreviewGraphToReactFlow(preview, options.reactFlowInstance);
+    return preview;
+}
+function applyPreviewGraphToReactFlow(preview, reactFlowInstance) {
     setTimeout(()=>{
         reactFlowInstance.setNodes((nodes)=>[
                 ...nodes.filter((n)=>n.id !== PREVIEW_NODE_ID).map((n)=>({
@@ -171,13 +230,13 @@ function applyPreviewToReactFlow(preview, reactFlowInstance) {
                 preview.node
             ]);
         reactFlowInstance.setEdges((edges)=>[
-                ...edges.filter((e)=>e.id !== PREVIEW_EDGE_ID),
-                preview.edge
+                ...edges.filter((edge)=>edge.source !== PREVIEW_NODE_ID && edge.target !== PREVIEW_NODE_ID && !preview.removedEdgeIds?.includes(edge.id)),
+                ...preview.edges
             ]);
     }, 0);
 }
 function removePreviewFromReactFlow(reactFlowInstance) {
     reactFlowInstance.setNodes((nodes)=>nodes.filter((n)=>n.id !== PREVIEW_NODE_ID));
-    reactFlowInstance.setEdges((edges)=>edges.filter((e)=>e.id !== PREVIEW_EDGE_ID));
+    reactFlowInstance.setEdges((edges)=>edges.filter((edge)=>edge.source !== PREVIEW_NODE_ID && edge.target !== PREVIEW_NODE_ID));
 }
-export { applyPreviewToReactFlow, createPreviewNode, removePreviewFromReactFlow };
+export { PREVIEW_EDGE_STYLE, applyPreviewGraphToReactFlow, createPreviewGraph, getOppositePosition, inferParentId, removePreviewFromReactFlow, reparentPreviewNodeToContainer, showPreviewGraph };

package/dist/canvas/utils/index.cjs

@@ -36,8 +36,8 @@ var __webpack_modules__ = {
     "./constraint-validator" (module) {
         module.exports = require("./constraint-validator.cjs");
     },
-    "./createPreviewNode" (module) {
-        module.exports = require("./createPreviewNode.cjs");
+    "./createPreviewGraph" (module) {
+        module.exports = require("./createPreviewGraph.cjs");
     },
     "./export-canvas" (module) {
         module.exports = require("./export-canvas.cjs");
@@ -114,25 +114,25 @@ var __webpack_exports__ = {};
     var __rspack_reexport = {};
     for(const __rspack_import_key in _CssUtil__rspack_import_3)if ("default" !== __rspack_import_key) __rspack_reexport[__rspack_import_key] = ()=>_CssUtil__rspack_import_3[__rspack_import_key];
     __webpack_require__.d(__webpack_exports__, __rspack_reexport);
-    var _collapse__rspack_import_4 = __webpack_require__("./collapse");
+    var _coded_agents_d3_layout__rspack_import_4 = __webpack_require__("./coded-agents/d3-layout");
     var __rspack_reexport = {};
-    for(const __rspack_import_key in _collapse__rspack_import_4)if ("default" !== __rspack_import_key) __rspack_reexport[__rspack_import_key] = ()=>_collapse__rspack_import_4[__rspack_import_key];
+    for(const __rspack_import_key in _coded_agents_d3_layout__rspack_import_4)if ("default" !== __rspack_import_key) __rspack_reexport[__rspack_import_key] = ()=>_coded_agents_d3_layout__rspack_import_4[__rspack_import_key];
     __webpack_require__.d(__webpack_exports__, __rspack_reexport);
-    var _coded_agents_d3_layout__rspack_import_5 = __webpack_require__("./coded-agents/d3-layout");
+    var _coded_agents_mermaid_parser__rspack_import_5 = __webpack_require__("./coded-agents/mermaid-parser");
     var __rspack_reexport = {};
-    for(const __rspack_import_key in _coded_agents_d3_layout__rspack_import_5)if ("default" !== __rspack_import_key) __rspack_reexport[__rspack_import_key] = ()=>_coded_agents_d3_layout__rspack_import_5[__rspack_import_key];
+    for(const __rspack_import_key in _coded_agents_mermaid_parser__rspack_import_5)if ("default" !== __rspack_import_key) __rspack_reexport[__rspack_import_key] = ()=>_coded_agents_mermaid_parser__rspack_import_5[__rspack_import_key];
     __webpack_require__.d(__webpack_exports__, __rspack_reexport);
-    var _coded_agents_mermaid_parser__rspack_import_6 = __webpack_require__("./coded-agents/mermaid-parser");
+    var _collapse__rspack_import_6 = __webpack_require__("./collapse");
     var __rspack_reexport = {};
-    for(const __rspack_import_key in _coded_agents_mermaid_parser__rspack_import_6)if ("default" !== __rspack_import_key) __rspack_reexport[__rspack_import_key] = ()=>_coded_agents_mermaid_parser__rspack_import_6[__rspack_import_key];
+    for(const __rspack_import_key in _collapse__rspack_import_6)if ("default" !== __rspack_import_key) __rspack_reexport[__rspack_import_key] = ()=>_collapse__rspack_import_6[__rspack_import_key];
     __webpack_require__.d(__webpack_exports__, __rspack_reexport);
     var _constraint_validator__rspack_import_7 = __webpack_require__("./constraint-validator");
     var __rspack_reexport = {};
     for(const __rspack_import_key in _constraint_validator__rspack_import_7)if ("default" !== __rspack_import_key) __rspack_reexport[__rspack_import_key] = ()=>_constraint_validator__rspack_import_7[__rspack_import_key];
     __webpack_require__.d(__webpack_exports__, __rspack_reexport);
-    var _createPreviewNode__rspack_import_8 = __webpack_require__("./createPreviewNode");
+    var _createPreviewGraph__rspack_import_8 = __webpack_require__("./createPreviewGraph");
     var __rspack_reexport = {};
-    for(const __rspack_import_key in _createPreviewNode__rspack_import_8)if ("default" !== __rspack_import_key) __rspack_reexport[__rspack_import_key] = ()=>_createPreviewNode__rspack_import_8[__rspack_import_key];
+    for(const __rspack_import_key in _createPreviewGraph__rspack_import_8)if ("default" !== __rspack_import_key) __rspack_reexport[__rspack_import_key] = ()=>_createPreviewGraph__rspack_import_8[__rspack_import_key];
     __webpack_require__.d(__webpack_exports__, __rspack_reexport);
     var _export_canvas__rspack_import_9 = __webpack_require__("./export-canvas");
     var __rspack_reexport = {};

package/dist/canvas/utils/index.d.ts

@@ -2,11 +2,11 @@ export * from './ArrayUtil';
 export * from './auto-layout';
 export * from './CanvasEventBus';
 export * from './CssUtil';
-export * from './collapse';
 export * from './coded-agents/d3-layout';
 export * from './coded-agents/mermaid-parser';
+export * from './collapse';
 export * from './constraint-validator';
-export * from './createPreviewNode';
+export * from './createPreviewGraph';
 export * from './export-canvas';
 export * from './GroupModificationUtils';
 export * from './icon-registry';

package/dist/canvas/utils/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/canvas/utils/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC;AAC5B,cAAc,eAAe,CAAC;AAC9B,cAAc,kBAAkB,CAAC;AACjC,cAAc,WAAW,CAAC;AAC1B,cAAc,YAAY,CAAC;AAC3B,cAAc,0BAA0B,CAAC;AACzC,cAAc,+BAA+B,CAAC;AAC9C,cAAc,wBAAwB,CAAC;AACvC,cAAc,qBAAqB,CAAC;AACpC,cAAc,iBAAiB,CAAC;AAChC,cAAc,0BAA0B,CAAC;AACzC,cAAc,iBAAiB,CAAC;AAChC,cAAc,qBAAqB,CAAC;AACpC,cAAc,aAAa,CAAC;AAC5B,cAAc,iBAAiB,CAAC;AAChC,cAAc,uBAAuB,CAAC;AACtC,cAAc,WAAW,CAAC;AAC1B,cAAc,aAAa,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/canvas/utils/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC;AAC5B,cAAc,eAAe,CAAC;AAC9B,cAAc,kBAAkB,CAAC;AACjC,cAAc,WAAW,CAAC;AAC1B,cAAc,0BAA0B,CAAC;AACzC,cAAc,+BAA+B,CAAC;AAC9C,cAAc,YAAY,CAAC;AAC3B,cAAc,wBAAwB,CAAC;AACvC,cAAc,sBAAsB,CAAC;AACrC,cAAc,iBAAiB,CAAC;AAChC,cAAc,0BAA0B,CAAC;AACzC,cAAc,iBAAiB,CAAC;AAChC,cAAc,qBAAqB,CAAC;AACpC,cAAc,aAAa,CAAC;AAC5B,cAAc,iBAAiB,CAAC;AAChC,cAAc,uBAAuB,CAAC;AACtC,cAAc,WAAW,CAAC;AAC1B,cAAc,aAAa,CAAC"}

package/dist/canvas/utils/index.js

@@ -2,11 +2,11 @@ export * from "./ArrayUtil.js";
 export * from "./auto-layout.js";
 export * from "./CanvasEventBus.js";
 export * from "./CssUtil.js";
-export * from "./collapse.js";
 export * from "./coded-agents/d3-layout.js";
 export * from "./coded-agents/mermaid-parser.js";
+export * from "./collapse.js";
 export * from "./constraint-validator.js";
-export * from "./createPreviewNode.js";
+export * from "./createPreviewGraph.js";
 export * from "./export-canvas.js";
 export * from "./GroupModificationUtils.js";
 export * from "./icon-registry.js";

package/package.json

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

package/dist/canvas/components/AddNodePanel/createAddNodePreview.cjs

@@ -1,41 +0,0 @@
-"use strict";
-var __webpack_require__ = {};
-(()=>{
-    __webpack_require__.d = (exports1, definition)=>{
-        for(var key in definition)if (__webpack_require__.o(definition, key) && !__webpack_require__.o(exports1, key)) Object.defineProperty(exports1, key, {
-            enumerable: true,
-            get: definition[key]
-        });
-    };
-})();
-(()=>{
-    __webpack_require__.o = (obj, prop)=>Object.prototype.hasOwnProperty.call(obj, prop);
-})();
-(()=>{
-    __webpack_require__.r = (exports1)=>{
-        if ("u" > typeof Symbol && Symbol.toStringTag) Object.defineProperty(exports1, Symbol.toStringTag, {
-            value: 'Module'
-        });
-        Object.defineProperty(exports1, '__esModule', {
-            value: true
-        });
-    };
-})();
-var __webpack_exports__ = {};
-__webpack_require__.r(__webpack_exports__);
-__webpack_require__.d(__webpack_exports__, {
-    createAddNodePreview: ()=>createAddNodePreview
-});
-const react_cjs_namespaceObject = require("../../xyflow/react.cjs");
-const createPreviewNode_cjs_namespaceObject = require("../../utils/createPreviewNode.cjs");
-function createAddNodePreview(sourceNodeId, sourceHandleId, reactFlowInstance, handlePosition = react_cjs_namespaceObject.Position.Right, sourceHandleType = 'source', ignoredNodeTypes = []) {
-    const preview = (0, createPreviewNode_cjs_namespaceObject.createPreviewNode)(sourceNodeId, sourceHandleId, reactFlowInstance, void 0, void 0, sourceHandleType, void 0, handlePosition, ignoredNodeTypes);
-    if (preview) (0, createPreviewNode_cjs_namespaceObject.applyPreviewToReactFlow)(preview, reactFlowInstance);
-}
-exports.createAddNodePreview = __webpack_exports__.createAddNodePreview;
-for(var __rspack_i in __webpack_exports__)if (-1 === [
-    "createAddNodePreview"
-].indexOf(__rspack_i)) exports[__rspack_i] = __webpack_exports__[__rspack_i];
-Object.defineProperty(exports, '__esModule', {
-    value: true
-});

package/dist/canvas/components/AddNodePanel/createAddNodePreview.d.ts

@@ -1,3 +0,0 @@
-import { Position, type ReactFlowInstance } from '../../xyflow/react.ts';
-export declare function createAddNodePreview(sourceNodeId: string, sourceHandleId: string, reactFlowInstance: ReactFlowInstance, handlePosition?: Position, sourceHandleType?: 'source' | 'target', ignoredNodeTypes?: string[]): void;
-//# sourceMappingURL=createAddNodePreview.d.ts.map

package/dist/canvas/components/AddNodePanel/createAddNodePreview.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"createAddNodePreview.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/AddNodePanel/createAddNodePreview.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,KAAK,iBAAiB,EAAE,MAAM,0CAA0C,CAAC;AAa5F,wBAAgB,oBAAoB,CAClC,YAAY,EAAE,MAAM,EACpB,cAAc,EAAE,MAAM,EACtB,iBAAiB,EAAE,iBAAiB,EACpC,cAAc,GAAE,QAAyB,EACzC,gBAAgB,GAAE,QAAQ,GAAG,QAAmB,EAChD,gBAAgB,GAAE,MAAM,EAAO,GAC9B,IAAI,CAiBN"}

package/dist/canvas/components/AddNodePanel/createAddNodePreview.js

@@ -1,7 +0,0 @@
-import { Position } from "../../xyflow/react.js";
-import { applyPreviewToReactFlow, createPreviewNode } from "../../utils/createPreviewNode.js";
-function createAddNodePreview(sourceNodeId, sourceHandleId, reactFlowInstance, handlePosition = Position.Right, sourceHandleType = 'source', ignoredNodeTypes = []) {
-    const preview = createPreviewNode(sourceNodeId, sourceHandleId, reactFlowInstance, void 0, void 0, sourceHandleType, void 0, handlePosition, ignoredNodeTypes);
-    if (preview) applyPreviewToReactFlow(preview, reactFlowInstance);
-}
-export { createAddNodePreview };

package/dist/canvas/utils/createPreviewNode.d.ts

@@ -1,17 +0,0 @@
-import { type Edge, type Node, Position, type ReactFlowInstance } from '../xyflow/react.ts';
-export declare function createPreviewNode(sourceNodeId: string, sourceHandleId: string, reactFlowInstance: ReactFlowInstance, position?: {
-    x: number;
-    y: number;
-}, data?: Record<string, any>, sourceHandleType?: 'source' | 'target', previewNodeSize?: {
-    width: number;
-    height: number;
-}, handlePosition?: Position, ignoredNodeTypes?: string[]): {
-    node: Node;
-    edge: Edge;
-} | null;
-export declare function applyPreviewToReactFlow(preview: {
-    node: Node;
-    edge: Edge;
-}, reactFlowInstance: ReactFlowInstance): void;
-export declare function removePreviewFromReactFlow(reactFlowInstance: ReactFlowInstance): void;
-//# sourceMappingURL=createPreviewNode.d.ts.map

package/dist/canvas/utils/createPreviewNode.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"createPreviewNode.d.ts","sourceRoot":"","sources":["../../../src/canvas/utils/createPreviewNode.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,IAAI,EACT,KAAK,IAAI,EACT,QAAQ,EACR,KAAK,iBAAiB,EACvB,MAAM,0CAA0C,CAAC;AAiMlD,wBAAgB,iBAAiB,CAC/B,YAAY,EAAE,MAAM,EACpB,cAAc,EAAE,MAAM,EACtB,iBAAiB,EAAE,iBAAiB,EACpC,QAAQ,CAAC,EAAE;IAAE,CAAC,EAAE,MAAM,CAAC;IAAC,CAAC,EAAE,MAAM,CAAA;CAAE,EACnC,IAAI,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,EAC1B,gBAAgB,GAAE,QAAQ,GAAG,QAAmB,EAChD,eAAe,GAAE;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,MAAM,CAAA;CAG/C,EACD,cAAc,GAAE,QAAyB,EACzC,gBAAgB,GAAE,MAAM,EAAO,GAC9B;IAAE,IAAI,EAAE,IAAI,CAAC;IAAC,IAAI,EAAE,IAAI,CAAA;CAAE,GAAG,IAAI,CA2FnC;AAMD,wBAAgB,uBAAuB,CACrC,OAAO,EAAE;IAAE,IAAI,EAAE,IAAI,CAAC;IAAC,IAAI,EAAE,IAAI,CAAA;CAAE,EACnC,iBAAiB,EAAE,iBAAiB,GACnC,IAAI,CAcN;AAKD,wBAAgB,0BAA0B,CAAC,iBAAiB,EAAE,iBAAiB,GAAG,IAAI,CAGrF"}