@uipath/apollo-react 4.11.0 → 4.12.1-pr556.9394355

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

@@ -0,0 +1,117 @@
+"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__, {
+    useStageTaskDragHandler: ()=>useStageTaskDragHandler
+});
+const react_namespaceObject = require("@xyflow/react");
+const external_react_namespaceObject = require("react");
+const external_StageNode_utils_cjs_namespaceObject = require("../StageNode.utils.cjs");
+const useStageTaskDragHandler = ({ sequentialTaskGroups, sequentialTasks, onTaskReorder })=>{
+    const storeApi = (0, react_namespaceObject.useStoreApi)();
+    const [activeDragId, setActiveDragId] = (0, external_react_namespaceObject.useState)(null);
+    const [offsetLeft, setOffsetLeft] = (0, external_react_namespaceObject.useState)(0);
+    const [overId, setOverId] = (0, external_react_namespaceObject.useState)(null);
+    const activeSequentialTask = (0, external_react_namespaceObject.useMemo)(()=>sequentialTasks.find(({ task })=>task.id === activeDragId), [
+        sequentialTasks,
+        activeDragId
+    ]);
+    const isActiveTaskParallel = (0, external_react_namespaceObject.useMemo)(()=>{
+        if (!activeDragId) return false;
+        const group = sequentialTaskGroups.find((g)=>g.some((t)=>t.id === activeDragId));
+        return group ? group.length > 1 : false;
+    }, [
+        sequentialTaskGroups,
+        activeDragId
+    ]);
+    const projected = (0, external_react_namespaceObject.useMemo)(()=>{
+        if (!activeDragId || !overId) return null;
+        return (0, external_StageNode_utils_cjs_namespaceObject.getProjection)(sequentialTaskGroups, activeDragId, overId, offsetLeft);
+    }, [
+        sequentialTaskGroups,
+        activeDragId,
+        overId,
+        offsetLeft
+    ]);
+    const resetState = (0, external_react_namespaceObject.useCallback)(()=>{
+        setActiveDragId(null);
+        setOffsetLeft(0);
+        setOverId(null);
+    }, []);
+    const handleDragStart = (0, external_react_namespaceObject.useCallback)((event)=>{
+        setActiveDragId(event.active.id);
+    }, []);
+    const handleDragMove = (0, external_react_namespaceObject.useCallback)((event)=>{
+        setOffsetLeft(event.delta.x / storeApi.getState().transform[2]);
+    }, [
+        storeApi
+    ]);
+    const handleDragOver = (0, external_react_namespaceObject.useCallback)((event)=>{
+        setOverId(event.over?.id ?? null);
+    }, []);
+    const handleDragEnd = (0, external_react_namespaceObject.useCallback)((event)=>{
+        const { active, over } = event;
+        const currentOffsetLeft = offsetLeft;
+        resetState();
+        if (!over) return;
+        const projection = (0, external_StageNode_utils_cjs_namespaceObject.getProjection)(sequentialTaskGroups, active.id, over.id, currentOffsetLeft);
+        if (!projection) return;
+        if (active.id === over.id) {
+            const flattened = (0, external_StageNode_utils_cjs_namespaceObject.flattenTasks)(sequentialTaskGroups);
+            const activeTask = flattened.find((t)=>t.id === active.id);
+            if (activeTask && activeTask.depth === projection.depth) return;
+        }
+        const newTasks = (0, external_StageNode_utils_cjs_namespaceObject.reorderTasks)(sequentialTaskGroups, active.id, over.id, projection.depth);
+        onTaskReorder(newTasks);
+    }, [
+        sequentialTaskGroups,
+        onTaskReorder,
+        offsetLeft,
+        resetState
+    ]);
+    const handleDragCancel = (0, external_react_namespaceObject.useCallback)(()=>{
+        resetState();
+    }, [
+        resetState
+    ]);
+    return {
+        activeDragId,
+        activeSequentialTask,
+        isActiveTaskParallel,
+        projected,
+        handleDragMove,
+        handleDragOver,
+        handleDragStart,
+        handleDragEnd,
+        handleDragCancel
+    };
+};
+exports.useStageTaskDragHandler = __webpack_exports__.useStageTaskDragHandler;
+for(var __rspack_i in __webpack_exports__)if (-1 === [
+    "useStageTaskDragHandler"
+].indexOf(__rspack_i)) exports[__rspack_i] = __webpack_exports__[__rspack_i];
+Object.defineProperty(exports, '__esModule', {
+    value: true
+});

package/dist/canvas/components/StageNode/hooks/useStageTaskDragHandler.d.ts

@@ -0,0 +1,18 @@
+import { DragEndEvent, DragMoveEvent, DragOverEvent, DragStartEvent } from '@dnd-kit/core';
+import { StageTaskGroup, StageTaskItem } from '../StageNode.types';
+export declare const useStageTaskDragHandler: ({ sequentialTaskGroups, sequentialTasks, onTaskReorder, }: {
+    sequentialTaskGroups: StageTaskItem[][];
+    sequentialTasks: StageTaskGroup[];
+    onTaskReorder: (newTasks: StageTaskItem[][]) => void;
+}) => {
+    activeDragId: string | null;
+    activeSequentialTask: StageTaskGroup | undefined;
+    isActiveTaskParallel: boolean;
+    projected: import("../StageNode.utils").ProjectionResult | null;
+    handleDragMove: (event: DragMoveEvent) => void;
+    handleDragOver: (event: DragOverEvent) => void;
+    handleDragStart: (event: DragStartEvent) => void;
+    handleDragEnd: (event: DragEndEvent) => void;
+    handleDragCancel: () => void;
+};
+//# sourceMappingURL=useStageTaskDragHandler.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useStageTaskDragHandler.d.ts","sourceRoot":"","sources":["../../../../../src/canvas/components/StageNode/hooks/useStageTaskDragHandler.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,aAAa,EAAE,aAAa,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AAG3F,OAAO,EAAE,cAAc,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AAGnE,eAAO,MAAM,uBAAuB,GAAI,2DAIrC;IACD,oBAAoB,EAAE,aAAa,EAAE,EAAE,CAAC;IACxC,eAAe,EAAE,cAAc,EAAE,CAAC;IAClC,aAAa,EAAE,CAAC,QAAQ,EAAE,aAAa,EAAE,EAAE,KAAK,IAAI,CAAC;CACtD;;;;;4BAkCW,aAAa;4BAMoB,aAAa;6BAXZ,cAAc;2BAgBhD,YAAY;;CAsDvB,CAAC"}

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

@@ -0,0 +1,83 @@
+import { useStoreApi } from "@xyflow/react";
+import { useCallback, useMemo, useState } from "react";
+import { flattenTasks, getProjection, reorderTasks } from "../StageNode.utils.js";
+const useStageTaskDragHandler = ({ sequentialTaskGroups, sequentialTasks, onTaskReorder })=>{
+    const storeApi = useStoreApi();
+    const [activeDragId, setActiveDragId] = useState(null);
+    const [offsetLeft, setOffsetLeft] = useState(0);
+    const [overId, setOverId] = useState(null);
+    const activeSequentialTask = useMemo(()=>sequentialTasks.find(({ task })=>task.id === activeDragId), [
+        sequentialTasks,
+        activeDragId
+    ]);
+    const isActiveTaskParallel = useMemo(()=>{
+        if (!activeDragId) return false;
+        const group = sequentialTaskGroups.find((g)=>g.some((t)=>t.id === activeDragId));
+        return group ? group.length > 1 : false;
+    }, [
+        sequentialTaskGroups,
+        activeDragId
+    ]);
+    const projected = useMemo(()=>{
+        if (!activeDragId || !overId) return null;
+        return getProjection(sequentialTaskGroups, activeDragId, overId, offsetLeft);
+    }, [
+        sequentialTaskGroups,
+        activeDragId,
+        overId,
+        offsetLeft
+    ]);
+    const resetState = useCallback(()=>{
+        setActiveDragId(null);
+        setOffsetLeft(0);
+        setOverId(null);
+    }, []);
+    const handleDragStart = useCallback((event)=>{
+        setActiveDragId(event.active.id);
+    }, []);
+    const handleDragMove = useCallback((event)=>{
+        setOffsetLeft(event.delta.x / storeApi.getState().transform[2]);
+    }, [
+        storeApi
+    ]);
+    const handleDragOver = useCallback((event)=>{
+        setOverId(event.over?.id ?? null);
+    }, []);
+    const handleDragEnd = useCallback((event)=>{
+        const { active, over } = event;
+        const currentOffsetLeft = offsetLeft;
+        resetState();
+        if (!over) return;
+        const projection = getProjection(sequentialTaskGroups, active.id, over.id, currentOffsetLeft);
+        if (!projection) return;
+        if (active.id === over.id) {
+            const flattened = flattenTasks(sequentialTaskGroups);
+            const activeTask = flattened.find((t)=>t.id === active.id);
+            if (activeTask && activeTask.depth === projection.depth) return;
+        }
+        const newTasks = reorderTasks(sequentialTaskGroups, active.id, over.id, projection.depth);
+        onTaskReorder(newTasks);
+    }, [
+        sequentialTaskGroups,
+        onTaskReorder,
+        offsetLeft,
+        resetState
+    ]);
+    const handleDragCancel = useCallback(()=>{
+        resetState();
+    }, [
+        resetState
+    ]);
+    return {
+        activeDragId,
+        activeSequentialTask,
+        isActiveTaskParallel,
+        projected,
+        handleDragMove,
+        handleDragOver,
+        handleDragStart,
+        handleDragEnd,
+        handleDragCancel
+    };
+};
+export { useStageTaskDragHandler };

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

@@ -0,0 +1,87 @@
+"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__, {
+    useStageTasksByGroups: ()=>useStageTasksByGroups
+});
+const external_react_namespaceObject = require("react");
+const useStageTasksByGroups = (allTasks)=>{
+    const sequentialTaskGroups = (0, external_react_namespaceObject.useMemo)(()=>allTasks.filter((group)=>group.some((t)=>{
+                if (null != t.taskGroupType) return 'sequential' === t.taskGroupType;
+                if (null != t.isAdhoc) return !t.isAdhoc;
+                return true;
+            })), [
+        allTasks
+    ]);
+    const sequentialTasks = (0, external_react_namespaceObject.useMemo)(()=>sequentialTaskGroups.flatMap((group, groupIndex)=>group.map((task, taskIndex)=>({
+                    task,
+                    groupIndex,
+                    taskIndex
+                }))), [
+        sequentialTaskGroups
+    ]);
+    const adhocTaskGroups = (0, external_react_namespaceObject.useMemo)(()=>allTasks.filter((group)=>group.every((t)=>{
+                if (null != t.taskGroupType) return 'adhoc' === t.taskGroupType;
+                if (null != t.isAdhoc) return t.isAdhoc;
+                return false;
+            })), [
+        allTasks
+    ]);
+    const adhocTasks = (0, external_react_namespaceObject.useMemo)(()=>adhocTaskGroups.flatMap((group, groupIndex)=>group.map((task, taskIndex)=>({
+                    task,
+                    groupIndex,
+                    taskIndex
+                }))), [
+        adhocTaskGroups
+    ]);
+    const eventDrivenTaskGroups = (0, external_react_namespaceObject.useMemo)(()=>allTasks.filter((group)=>group.every((t)=>{
+                if (null != t.taskGroupType) return 'event-driven' === t.taskGroupType;
+                return false;
+            })), [
+        allTasks
+    ]);
+    const eventDrivenTasks = (0, external_react_namespaceObject.useMemo)(()=>eventDrivenTaskGroups.flatMap((group, groupIndex)=>group.map((task, taskIndex)=>({
+                    task,
+                    groupIndex,
+                    taskIndex
+                }))), [
+        eventDrivenTaskGroups
+    ]);
+    return {
+        sequentialTaskGroups,
+        sequentialTasks,
+        adhocTaskGroups,
+        adhocTasks,
+        eventDrivenTaskGroups,
+        eventDrivenTasks
+    };
+};
+exports.useStageTasksByGroups = __webpack_exports__.useStageTasksByGroups;
+for(var __rspack_i in __webpack_exports__)if (-1 === [
+    "useStageTasksByGroups"
+].indexOf(__rspack_i)) exports[__rspack_i] = __webpack_exports__[__rspack_i];
+Object.defineProperty(exports, '__esModule', {
+    value: true
+});

package/dist/canvas/components/StageNode/hooks/useStageTasksByGroups.d.ts

@@ -0,0 +1,22 @@
+import { StageTaskItem } from '../StageNode.types';
+export declare const useStageTasksByGroups: (allTasks: StageTaskItem[][]) => {
+    sequentialTaskGroups: StageTaskItem[][];
+    sequentialTasks: {
+        task: StageTaskItem;
+        groupIndex: number;
+        taskIndex: number;
+    }[];
+    adhocTaskGroups: StageTaskItem[][];
+    adhocTasks: {
+        task: StageTaskItem;
+        groupIndex: number;
+        taskIndex: number;
+    }[];
+    eventDrivenTaskGroups: StageTaskItem[][];
+    eventDrivenTasks: {
+        task: StageTaskItem;
+        groupIndex: number;
+        taskIndex: number;
+    }[];
+};
+//# sourceMappingURL=useStageTasksByGroups.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useStageTasksByGroups.d.ts","sourceRoot":"","sources":["../../../../../src/canvas/components/StageNode/hooks/useStageTasksByGroups.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AAEnD,eAAO,MAAM,qBAAqB,GAAI,UAAU,aAAa,EAAE,EAAE;;;;;;;;;;;;;;;;;;;CA2EhE,CAAC"}

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

@@ -0,0 +1,53 @@
+import { useMemo } from "react";
+const useStageTasksByGroups = (allTasks)=>{
+    const sequentialTaskGroups = useMemo(()=>allTasks.filter((group)=>group.some((t)=>{
+                if (null != t.taskGroupType) return 'sequential' === t.taskGroupType;
+                if (null != t.isAdhoc) return !t.isAdhoc;
+                return true;
+            })), [
+        allTasks
+    ]);
+    const sequentialTasks = useMemo(()=>sequentialTaskGroups.flatMap((group, groupIndex)=>group.map((task, taskIndex)=>({
+                    task,
+                    groupIndex,
+                    taskIndex
+                }))), [
+        sequentialTaskGroups
+    ]);
+    const adhocTaskGroups = useMemo(()=>allTasks.filter((group)=>group.every((t)=>{
+                if (null != t.taskGroupType) return 'adhoc' === t.taskGroupType;
+                if (null != t.isAdhoc) return t.isAdhoc;
+                return false;
+            })), [
+        allTasks
+    ]);
+    const adhocTasks = useMemo(()=>adhocTaskGroups.flatMap((group, groupIndex)=>group.map((task, taskIndex)=>({
+                    task,
+                    groupIndex,
+                    taskIndex
+                }))), [
+        adhocTaskGroups
+    ]);
+    const eventDrivenTaskGroups = useMemo(()=>allTasks.filter((group)=>group.every((t)=>{
+                if (null != t.taskGroupType) return 'event-driven' === t.taskGroupType;
+                return false;
+            })), [
+        allTasks
+    ]);
+    const eventDrivenTasks = useMemo(()=>eventDrivenTaskGroups.flatMap((group, groupIndex)=>group.map((task, taskIndex)=>({
+                    task,
+                    groupIndex,
+                    taskIndex
+                }))), [
+        eventDrivenTaskGroups
+    ]);
+    return {
+        sequentialTaskGroups,
+        sequentialTasks,
+        adhocTaskGroups,
+        adhocTasks,
+        eventDrivenTaskGroups,
+        eventDrivenTasks
+    };
+};
+export { useStageTasksByGroups };

package/dist/canvas/components/Toolbar/EdgeToolbar/useEdgeToolbarState.cjs

@@ -29,10 +29,11 @@ __webpack_require__.d(__webpack_exports__, {
 const react_cjs_namespaceObject = require("../../../xyflow/react.cjs");
 const external_react_namespaceObject = require("react");
 const external_constants_cjs_namespaceObject = require("../../../constants.cjs");
+const createPreviewGraph_cjs_namespaceObject = require("../../../utils/createPreviewGraph.cjs");
 const createPreviewNode_cjs_namespaceObject = require("../../../utils/createPreviewNode.cjs");
 const BaseCanvasModeProvider_cjs_namespaceObject = require("../../BaseCanvas/BaseCanvasModeProvider.cjs");
 const external_useEdgeToolbarPositioning_cjs_namespaceObject = require("./useEdgeToolbarPositioning.cjs");
-function useEdgeToolbarState({ edgeId, pathElementRef, isHovered, source, target, sourceHandleId, targetHandleId, sourcePosition, targetPosition, ignoredNodeTypes }) {
+function useEdgeToolbarState({ edgeId, pathElementRef, isHovered, source, target, sourceHandleId, targetHandleId, sourcePosition, targetPosition, ignoredNodeTypes, parentId }) {
     const reactFlow = (0, react_cjs_namespaceObject.useReactFlow)();
     const { mode } = (0, BaseCanvasModeProvider_cjs_namespaceObject.useBaseCanvasMode)();
     const isDesignMode = 'design' === mode;
@@ -43,34 +44,34 @@ function useEdgeToolbarState({ edgeId, pathElementRef, isHovered, source, target
         targetPosition
     });
     const handleAddNodeOnEdge = (0, external_react_namespaceObject.useCallback)((position)=>{
+        const previewEdgeData = parentId ? {
+            parentId
+        } : void 0;
         const originalEdge = {
             id: edgeId,
             source,
             sourceHandle: sourceHandleId,
             target,
             targetHandle: targetHandleId,
-            type: 'default'
+            type: 'default',
+            data: previewEdgeData
         };
         const preview = (0, createPreviewNode_cjs_namespaceObject.createPreviewNode)(source, sourceHandleId || 'output', reactFlow, position, {
             originalEdge
         }, 'source', void 0, sourcePosition, ignoredNodeTypes);
         if (!preview) return;
-        const secondEdge = {
-            id: `${external_constants_cjs_namespaceObject.PREVIEW_NODE_ID}-${target}`,
-            source: external_constants_cjs_namespaceObject.PREVIEW_NODE_ID,
-            sourceHandle: 'output',
+        const previewGraph = (0, createPreviewGraph_cjs_namespaceObject.createPreviewGraph)({
+            preview,
             target,
-            targetHandle: targetHandleId,
-            type: 'default'
-        };
-        (0, createPreviewNode_cjs_namespaceObject.applyPreviewToReactFlow)(preview, reactFlow);
-        reactFlow.setEdges((edges)=>[
-                ...edges.filter((e)=>e.id !== edgeId).map((e)=>({
-                        ...e,
-                        selected: false
-                    })),
-                secondEdge
-            ]);
+            targetHandleId,
+            reactFlowInstance: reactFlow,
+            containerId: parentId,
+            removedEdgeIds: [
+                edgeId
+            ]
+        });
+        if (!previewGraph) return;
+        (0, createPreviewNode_cjs_namespaceObject.applyPreviewGraphToReactFlow)(previewGraph, reactFlow);
     }, [
         sourcePosition,
         source,
@@ -79,7 +80,8 @@ function useEdgeToolbarState({ edgeId, pathElementRef, isHovered, source, target
         target,
         targetHandleId,
         edgeId,
-        ignoredNodeTypes
+        ignoredNodeTypes,
+        parentId
     ]);
     const config = (0, external_react_namespaceObject.useMemo)(()=>({
             actions: [

package/dist/canvas/components/Toolbar/EdgeToolbar/useEdgeToolbarState.d.ts

@@ -11,6 +11,7 @@ export interface UseEdgeToolbarStateProps {
     sourcePosition: Position;
     targetPosition: Position;
     ignoredNodeTypes?: string[];
+    parentId?: string;
 }
 export interface EdgeToolbarState {
     showToolbar: boolean;
@@ -18,5 +19,5 @@ export interface EdgeToolbarState {
     config: EdgeToolbarConfig;
     handleMouseMoveOnPath?: (event: React.MouseEvent) => void;
 }
-export declare function useEdgeToolbarState({ edgeId, pathElementRef, isHovered, source, target, sourceHandleId, targetHandleId, sourcePosition, targetPosition, ignoredNodeTypes, }: UseEdgeToolbarStateProps): EdgeToolbarState;
+export declare function useEdgeToolbarState({ edgeId, pathElementRef, isHovered, source, target, sourceHandleId, targetHandleId, sourcePosition, targetPosition, ignoredNodeTypes, parentId, }: UseEdgeToolbarStateProps): EdgeToolbarState;
 //# sourceMappingURL=useEdgeToolbarState.d.ts.map

package/dist/canvas/components/Toolbar/EdgeToolbar/useEdgeToolbarState.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useEdgeToolbarState.d.ts","sourceRoot":"","sources":["../../../../../src/canvas/components/Toolbar/EdgeToolbar/useEdgeToolbarState.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,KAAK,QAAQ,EAAgB,MAAM,0CAA0C,CAAC;AAKlG,OAAO,KAAK,EAAE,iBAAiB,EAAE,uBAAuB,EAAE,MAAM,qBAAqB,CAAC;AAGtF,MAAM,WAAW,wBAAwB;IACvC,MAAM,EAAE,MAAM,CAAC;IACf,cAAc,EAAE,KAAK,CAAC,gBAAgB,CAAC,cAAc,GAAG,IAAI,CAAC,CAAC;IAC9D,SAAS,EAAE,OAAO,CAAC;IACnB,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,EAAE,MAAM,CAAC;IACf,cAAc,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC/B,cAAc,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC/B,cAAc,EAAE,QAAQ,CAAC;IACzB,cAAc,EAAE,QAAQ,CAAC;IACzB,gBAAgB,CAAC,EAAE,MAAM,EAAE,CAAC;CAC7B;AAED,MAAM,WAAW,gBAAgB;IAC/B,WAAW,EAAE,OAAO,CAAC;IACrB,kBAAkB,EAAE,uBAAuB,GAAG,IAAI,CAAC;IACnD,MAAM,EAAE,iBAAiB,CAAC;IAC1B,qBAAqB,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;CAC3D;AAED,wBAAgB,mBAAmB,CAAC,EAClC,MAAM,EACN,cAAc,EACd,SAAS,EACT,MAAM,EACN,MAAM,EACN,cAAc,EACd,cAAc,EACd,cAAc,EACd,cAAc,EACd,gBAAgB,GACjB,EAAE,wBAAwB,GAAG,gBAAgB,CAoG7C"}
+{"version":3,"file":"useEdgeToolbarState.d.ts","sourceRoot":"","sources":["../../../../../src/canvas/components/Toolbar/EdgeToolbar/useEdgeToolbarState.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,KAAK,QAAQ,EAAgB,MAAM,0CAA0C,CAAC;AAMlG,OAAO,KAAK,EAAE,iBAAiB,EAAE,uBAAuB,EAAE,MAAM,qBAAqB,CAAC;AAGtF,MAAM,WAAW,wBAAwB;IACvC,MAAM,EAAE,MAAM,CAAC;IACf,cAAc,EAAE,KAAK,CAAC,gBAAgB,CAAC,cAAc,GAAG,IAAI,CAAC,CAAC;IAC9D,SAAS,EAAE,OAAO,CAAC;IACnB,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,EAAE,MAAM,CAAC;IACf,cAAc,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC/B,cAAc,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC/B,cAAc,EAAE,QAAQ,CAAC;IACzB,cAAc,EAAE,QAAQ,CAAC;IACzB,gBAAgB,CAAC,EAAE,MAAM,EAAE,CAAC;IAC5B,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,MAAM,WAAW,gBAAgB;IAC/B,WAAW,EAAE,OAAO,CAAC;IACrB,kBAAkB,EAAE,uBAAuB,GAAG,IAAI,CAAC;IACnD,MAAM,EAAE,iBAAiB,CAAC;IAC1B,qBAAqB,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;CAC3D;AAED,wBAAgB,mBAAmB,CAAC,EAClC,MAAM,EACN,cAAc,EACd,SAAS,EACT,MAAM,EACN,MAAM,EACN,cAAc,EACd,cAAc,EACd,cAAc,EACd,cAAc,EACd,gBAAgB,EAChB,QAAQ,GACT,EAAE,wBAAwB,GAAG,gBAAgB,CAiG7C"}

package/dist/canvas/components/Toolbar/EdgeToolbar/useEdgeToolbarState.js

@@ -1,10 +1,11 @@
 import { useReactFlow } from "../../../xyflow/react.js";
 import { useCallback, useMemo } from "react";
 import { PREVIEW_NODE_ID } from "../../../constants.js";
-import { applyPreviewToReactFlow, createPreviewNode } from "../../../utils/createPreviewNode.js";
+import { createPreviewGraph } from "../../../utils/createPreviewGraph.js";
+import { applyPreviewGraphToReactFlow, createPreviewNode } from "../../../utils/createPreviewNode.js";
 import { useBaseCanvasMode } from "../../BaseCanvas/BaseCanvasModeProvider.js";
 import { useEdgeToolbarPositioning } from "./useEdgeToolbarPositioning.js";
-function useEdgeToolbarState({ edgeId, pathElementRef, isHovered, source, target, sourceHandleId, targetHandleId, sourcePosition, targetPosition, ignoredNodeTypes }) {
+function useEdgeToolbarState({ edgeId, pathElementRef, isHovered, source, target, sourceHandleId, targetHandleId, sourcePosition, targetPosition, ignoredNodeTypes, parentId }) {
     const reactFlow = useReactFlow();
     const { mode } = useBaseCanvasMode();
     const isDesignMode = 'design' === mode;
@@ -15,34 +16,34 @@ function useEdgeToolbarState({ edgeId, pathElementRef, isHovered, source, target
         targetPosition
     });
     const handleAddNodeOnEdge = useCallback((position)=>{
+        const previewEdgeData = parentId ? {
+            parentId
+        } : void 0;
         const originalEdge = {
             id: edgeId,
             source,
             sourceHandle: sourceHandleId,
             target,
             targetHandle: targetHandleId,
-            type: 'default'
+            type: 'default',
+            data: previewEdgeData
         };
         const preview = createPreviewNode(source, sourceHandleId || 'output', reactFlow, position, {
             originalEdge
         }, 'source', void 0, sourcePosition, ignoredNodeTypes);
         if (!preview) return;
-        const secondEdge = {
-            id: `${PREVIEW_NODE_ID}-${target}`,
-            source: PREVIEW_NODE_ID,
-            sourceHandle: 'output',
+        const previewGraph = createPreviewGraph({
+            preview,
             target,
-            targetHandle: targetHandleId,
-            type: 'default'
-        };
-        applyPreviewToReactFlow(preview, reactFlow);
-        reactFlow.setEdges((edges)=>[
-                ...edges.filter((e)=>e.id !== edgeId).map((e)=>({
-                        ...e,
-                        selected: false
-                    })),
-                secondEdge
-            ]);
+            targetHandleId,
+            reactFlowInstance: reactFlow,
+            containerId: parentId,
+            removedEdgeIds: [
+                edgeId
+            ]
+        });
+        if (!previewGraph) return;
+        applyPreviewGraphToReactFlow(previewGraph, reactFlow);
     }, [
         sourcePosition,
         source,
@@ -51,7 +52,8 @@ function useEdgeToolbarState({ edgeId, pathElementRef, isHovered, source, target
         target,
         targetHandleId,
         edgeId,
-        ignoredNodeTypes
+        ignoredNodeTypes,
+        parentId
     ]);
     const config = useMemo(()=>({
             actions: [

package/dist/canvas/components/Toolbox/ListView.cjs

@@ -167,7 +167,7 @@ const ListViewRow = /*#__PURE__*/ (0, external_react_namespaceObject.memo)(({ in
         ]
     });
 });
-const ListViewInner = /*#__PURE__*/ (0, external_react_namespaceObject.forwardRef)(function({ items, activeIndex = -1, listRef, onItemClick, onItemHover, emptyStateMessage = 'No items found', emptyStateIcon = 'search-x', isLoading = false, enableSections = true }, ref) {
+const ListViewInner = /*#__PURE__*/ (0, external_react_namespaceObject.forwardRef)(function({ items, activeIndex = -1, listRef, onItemClick, onItemHover, onScroll, emptyStateMessage = 'No items found', emptyStateIcon = 'search-x', isLoading = false, enableSections = true }, ref) {
     const { isDarkMode } = (0, CanvasThemeContext_cjs_namespaceObject.useCanvasTheme)();
     const renderedItems = (0, external_react_namespaceObject.useMemo)(()=>buildRenderedItems(items, enableSections), [
         items,
@@ -229,7 +229,8 @@ const ListViewInner = /*#__PURE__*/ (0, external_react_namespaceObject.forwardRe
         rowComponent: ListViewRow,
         rowCount: renderedItems.length,
         rowHeight: 40,
-        overscanCount: 20
+        overscanCount: 20,
+        onScroll: onScroll
     });
 });
 const ListView_ListView = /*#__PURE__*/ (0, external_react_namespaceObject.memo)(ListViewInner);

package/dist/canvas/components/Toolbox/ListView.d.ts

@@ -40,6 +40,7 @@ interface ListViewProps<T extends ListItem> {
     listRef?: React.RefObject<ListImperativeAPI | null>;
     onItemClick: (item: T, index: number) => void;
     onItemHover?: (item: T) => void;
+    onScroll?: React.UIEventHandler<HTMLDivElement>;
     emptyStateMessage?: string;
     emptyStateIcon?: string;
     isLoading?: boolean;

package/dist/canvas/components/Toolbox/ListView.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ListView.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/Toolbox/ListView.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,iBAAiB,EAAqB,MAAM,cAAc,CAAC;AAKzE,MAAM,WAAW,YAAY;IAI3B,IAAI,CAAC,EAAE,MAAM,CAAC;IAId,GAAG,CAAC,EAAE,MAAM,CAAC;IAIb,SAAS,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CACjC;AAED,MAAM,MAAM,QAAQ,CAAC,CAAC,GAAG,GAAG,IAAI;IAC9B,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,CAAC,CAAC;IACR,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,IAAI,CAAC,EAAE,YAAY,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,QAAQ,CAAC,CAAC,CAAC,EAAE,GAAG,CAAC,CAAC,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,KAAK,OAAO,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;CACnF,CAAC;AAEF,MAAM,MAAM,UAAU,CAAC,CAAC,SAAS,QAAQ,IACrC;IAAE,IAAI,EAAE,SAAS,CAAC;IAAC,WAAW,EAAE,MAAM,CAAA;CAAE,GACxC;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,CAAC,CAAA;CAAE,CAAC;AAE9B,wBAAgB,kBAAkB,CAAC,CAAC,SAAS,QAAQ,EACnD,KAAK,EAAE,CAAC,EAAE,EACV,cAAc,EAAE,OAAO,GACtB,UAAU,CAAC,CAAC,CAAC,EAAE,CAqCjB;AAED,MAAM,WAAW,gBAAgB,CAAC,CAAC,SAAS,QAAQ;IAClD,aAAa,EAAE,UAAU,CAAC,CAAC,CAAC,EAAE,CAAC;IAC/B,WAAW,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,WAAW,EAAE,CAAC,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC9C,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,IAAI,CAAC;CACjC;AA8FD,MAAM,WAAW,cAAc,CAAC,CAAC,SAAS,QAAQ,GAAG,QAAQ;IAC3D,aAAa,EAAE,UAAU,CAAC,CAAC,CAAC,EAAE,CAAC;CAChC;AAED,UAAU,aAAa,CAAC,CAAC,SAAS,QAAQ;IACxC,KAAK,EAAE,CAAC,EAAE,CAAC;IACX,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,iBAAiB,GAAG,IAAI,CAAC,CAAC;IACpD,WAAW,EAAE,CAAC,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC9C,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,IAAI,CAAC;IAChC,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,cAAc,CAAC,EAAE,OAAO,CAAC;CAC1B;AAiED,eAAO,MAAM,QAAQ,EAA0B,CAAC,CAAC,SAAS,QAAQ,EAChE,KAAK,EAAE,aAAa,CAAC,CAAC,CAAC,GAAG;IAAE,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC,CAAC,CAAC,CAAA;CAAE,KAC7D,KAAK,CAAC,YAAY,GAAG,IAAI,CAAC"}
+{"version":3,"file":"ListView.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/Toolbox/ListView.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,iBAAiB,EAAqB,MAAM,cAAc,CAAC;AAKzE,MAAM,WAAW,YAAY;IAI3B,IAAI,CAAC,EAAE,MAAM,CAAC;IAId,GAAG,CAAC,EAAE,MAAM,CAAC;IAIb,SAAS,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CACjC;AAED,MAAM,MAAM,QAAQ,CAAC,CAAC,GAAG,GAAG,IAAI;IAC9B,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,CAAC,CAAC;IACR,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,IAAI,CAAC,EAAE,YAAY,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,QAAQ,CAAC,CAAC,CAAC,EAAE,GAAG,CAAC,CAAC,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,KAAK,OAAO,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;CACnF,CAAC;AAEF,MAAM,MAAM,UAAU,CAAC,CAAC,SAAS,QAAQ,IACrC;IAAE,IAAI,EAAE,SAAS,CAAC;IAAC,WAAW,EAAE,MAAM,CAAA;CAAE,GACxC;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,CAAC,CAAA;CAAE,CAAC;AAE9B,wBAAgB,kBAAkB,CAAC,CAAC,SAAS,QAAQ,EACnD,KAAK,EAAE,CAAC,EAAE,EACV,cAAc,EAAE,OAAO,GACtB,UAAU,CAAC,CAAC,CAAC,EAAE,CAqCjB;AAED,MAAM,WAAW,gBAAgB,CAAC,CAAC,SAAS,QAAQ;IAClD,aAAa,EAAE,UAAU,CAAC,CAAC,CAAC,EAAE,CAAC;IAC/B,WAAW,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,WAAW,EAAE,CAAC,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC9C,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,IAAI,CAAC;CACjC;AA8FD,MAAM,WAAW,cAAc,CAAC,CAAC,SAAS,QAAQ,GAAG,QAAQ;IAC3D,aAAa,EAAE,UAAU,CAAC,CAAC,CAAC,EAAE,CAAC;CAChC;AAED,UAAU,aAAa,CAAC,CAAC,SAAS,QAAQ;IACxC,KAAK,EAAE,CAAC,EAAE,CAAC;IACX,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,iBAAiB,GAAG,IAAI,CAAC,CAAC;IACpD,WAAW,EAAE,CAAC,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC9C,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,IAAI,CAAC;IAChC,QAAQ,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,CAAC;IAChD,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,cAAc,CAAC,EAAE,OAAO,CAAC;CAC1B;AAmED,eAAO,MAAM,QAAQ,EAA0B,CAAC,CAAC,SAAS,QAAQ,EAChE,KAAK,EAAE,aAAa,CAAC,CAAC,CAAC,GAAG;IAAE,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC,CAAC,CAAC,CAAA;CAAE,KAC7D,KAAK,CAAC,YAAY,GAAG,IAAI,CAAC"}

package/dist/canvas/components/Toolbox/ListView.js

@@ -138,7 +138,7 @@ const ListViewRow = /*#__PURE__*/ memo(({ index, style, ariaAttributes, rendered
         ]
     });
 });
-const ListViewInner = /*#__PURE__*/ forwardRef(function({ items, activeIndex = -1, listRef, onItemClick, onItemHover, emptyStateMessage = 'No items found', emptyStateIcon = 'search-x', isLoading = false, enableSections = true }, ref) {
+const ListViewInner = /*#__PURE__*/ forwardRef(function({ items, activeIndex = -1, listRef, onItemClick, onItemHover, onScroll, emptyStateMessage = 'No items found', emptyStateIcon = 'search-x', isLoading = false, enableSections = true }, ref) {
     const { isDarkMode } = useCanvasTheme();
     const renderedItems = useMemo(()=>buildRenderedItems(items, enableSections), [
         items,
@@ -200,7 +200,8 @@ const ListViewInner = /*#__PURE__*/ forwardRef(function({ items, activeIndex = -
         rowComponent: ListViewRow,
         rowCount: renderedItems.length,
         rowHeight: 40,
-        overscanCount: 20
+        overscanCount: 20,
+        onScroll: onScroll
     });
 });
 const ListView_ListView = /*#__PURE__*/ memo(ListViewInner);