@uipath/apollo-react 4.10.0 → 4.12.0

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/EdgeToolbar.cjs

@@ -30,23 +30,15 @@ const jsx_runtime_namespaceObject = require("react/jsx-runtime");
 const react_cjs_namespaceObject = require("../../../xyflow/react.cjs");
 const react_namespaceObject = require("motion/react");
 const external_react_namespaceObject = require("react");
-const index_cjs_namespaceObject = require("../shared/index.cjs");
-const external_EdgeToolbar_styles_cjs_namespaceObject = require("./EdgeToolbar.styles.cjs");
+const CanvasInlineButton_cjs_namespaceObject = require("../../ButtonHandle/CanvasInlineButton.cjs");
 const EdgeToolbarComponent = ({ edgeId, visible, positioning, config, onMouseEnter, onMouseLeave })=>{
-    const actionsWithHandlers = (0, external_react_namespaceObject.useMemo)(()=>config.actions.map((action)=>({
-                ...action,
-                onClick: ()=>action.onAction(edgeId, positioning.pathPosition)
-            })), [
-        config.actions,
-        edgeId,
-        positioning.pathPosition
-    ]);
     const transform = (0, external_react_namespaceObject.useMemo)(()=>`translate(-50%, -50%) translate(${positioning.offsetPosition.x}px, ${positioning.offsetPosition.y}px)`, [
         positioning.offsetPosition
     ]);
     return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(react_cjs_namespaceObject.EdgeLabelRenderer, {
         children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(react_namespaceObject.AnimatePresence, {
-            children: visible && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_EdgeToolbar_styles_cjs_namespaceObject.StyledEdgeToolbarContainer, {
+            children: visible && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(react_namespaceObject.motion.div, {
+                className: "nodrag nopan absolute top-0 left-0 pointer-events-auto z-[1000] flex flex-row items-center gap-1",
                 initial: {
                     opacity: 0
                 },
@@ -63,14 +55,18 @@ const EdgeToolbarComponent = ({ edgeId, visible, positioning, config, onMouseEnt
                 style: {
                     transform
                 },
-                className: "nodrag nopan",
                 onMouseEnter: onMouseEnter,
                 onMouseLeave: onMouseLeave,
-                children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_EdgeToolbar_styles_cjs_namespaceObject.StyledEdgeToolbarContent, {
-                    children: actionsWithHandlers.map((action)=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(index_cjs_namespaceObject.ToolbarButton, {
-                            action: action
-                        }, action.id))
-                })
+                children: config.actions.map((action)=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(CanvasInlineButton_cjs_namespaceObject.CanvasInlineButton, {
+                        "aria-label": action.label ?? action.id,
+                        disabled: action.disabled,
+                        icon: action.icon ?? 'plus',
+                        onClick: (e)=>{
+                            e.stopPropagation();
+                            e.preventDefault();
+                            if (!action.disabled) action.onAction(edgeId, positioning.pathPosition);
+                        }
+                    }, action.id))
             }, `edge-toolbar-${edgeId}`)
         })
     });

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

@@ -1 +1 @@
-{"version":3,"file":"EdgeToolbar.d.ts","sourceRoot":"","sources":["../../../../../src/canvas/components/Toolbar/EdgeToolbar/EdgeToolbar.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AAuD5D,eAAO,MAAM,WAAW;4EA9CrB,gBAAgB;;EA8CkC,CAAC"}
+{"version":3,"file":"EdgeToolbar.d.ts","sourceRoot":"","sources":["../../../../../src/canvas/components/Toolbar/EdgeToolbar/EdgeToolbar.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AAuD5D,eAAO,MAAM,WAAW;4EA9CrB,gBAAgB;;EA8CkC,CAAC"}

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

@@ -1,24 +1,16 @@
 import { jsx } from "react/jsx-runtime";
 import { EdgeLabelRenderer } from "../../../xyflow/react.js";
-import { AnimatePresence } from "motion/react";
+import { AnimatePresence, motion } from "motion/react";
 import { memo, useMemo } from "react";
-import { ToolbarButton } from "../shared/index.js";
-import { StyledEdgeToolbarContainer, StyledEdgeToolbarContent } from "./EdgeToolbar.styles.js";
+import { CanvasInlineButton } from "../../ButtonHandle/CanvasInlineButton.js";
 const EdgeToolbarComponent = ({ edgeId, visible, positioning, config, onMouseEnter, onMouseLeave })=>{
-    const actionsWithHandlers = useMemo(()=>config.actions.map((action)=>({
-                ...action,
-                onClick: ()=>action.onAction(edgeId, positioning.pathPosition)
-            })), [
-        config.actions,
-        edgeId,
-        positioning.pathPosition
-    ]);
     const transform = useMemo(()=>`translate(-50%, -50%) translate(${positioning.offsetPosition.x}px, ${positioning.offsetPosition.y}px)`, [
         positioning.offsetPosition
     ]);
     return /*#__PURE__*/ jsx(EdgeLabelRenderer, {
         children: /*#__PURE__*/ jsx(AnimatePresence, {
-            children: visible && /*#__PURE__*/ jsx(StyledEdgeToolbarContainer, {
+            children: visible && /*#__PURE__*/ jsx(motion.div, {
+                className: "nodrag nopan absolute top-0 left-0 pointer-events-auto z-[1000] flex flex-row items-center gap-1",
                 initial: {
                     opacity: 0
                 },
@@ -35,14 +27,18 @@ const EdgeToolbarComponent = ({ edgeId, visible, positioning, config, onMouseEnt
                 style: {
                     transform
                 },
-                className: "nodrag nopan",
                 onMouseEnter: onMouseEnter,
                 onMouseLeave: onMouseLeave,
-                children: /*#__PURE__*/ jsx(StyledEdgeToolbarContent, {
-                    children: actionsWithHandlers.map((action)=>/*#__PURE__*/ jsx(ToolbarButton, {
-                            action: action
-                        }, action.id))
-                })
+                children: config.actions.map((action)=>/*#__PURE__*/ jsx(CanvasInlineButton, {
+                        "aria-label": action.label ?? action.id,
+                        disabled: action.disabled,
+                        icon: action.icon ?? 'plus',
+                        onClick: (e)=>{
+                            e.stopPropagation();
+                            e.preventDefault();
+                            if (!action.disabled) action.onAction(edgeId, positioning.pathPosition);
+                        }
+                    }, action.id))
             }, `edge-toolbar-${edgeId}`)
         })
     });

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

@@ -1,6 +1,6 @@
 import type { XYPosition } from '../../../xyflow/system.ts';
 import type { ToolbarActionItem } from '../shared/toolbar.types';
-export interface EdgeToolbarActionItem extends Omit<ToolbarActionItem, 'onAction'> {
+export interface EdgeToolbarActionItem extends Omit<ToolbarActionItem, 'onAction' | 'color' | 'isToggled'> {
     onAction: (edgeId: string, position: {
         x: number;
         y: number;

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

@@ -1 +1 @@
-{"version":3,"file":"EdgeToolbar.types.d.ts","sourceRoot":"","sources":["../../../../../src/canvas/components/Toolbar/EdgeToolbar/EdgeToolbar.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,2CAA2C,CAAC;AAC5E,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,yBAAyB,CAAC;AAMjE,MAAM,WAAW,qBAAsB,SAAQ,IAAI,CAAC,iBAAiB,EAAE,UAAU,CAAC;IAChF,QAAQ,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;CACxE;AAKD,MAAM,WAAW,iBAAiB;IAChC,OAAO,EAAE,qBAAqB,EAAE,CAAC;CAClC;AAED,MAAM,WAAW,uBAAuB;IACtC,cAAc,EAAE,UAAU,CAAC;IAC3B,YAAY,EAAE,UAAU,CAAC;CAC1B;AAKD,MAAM,WAAW,gBAAgB;IAC/B,MAAM,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,OAAO,CAAC;IACjB,WAAW,EAAE,uBAAuB,CAAC;IACrC,MAAM,EAAE,iBAAiB,CAAC;IAC1B,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;CAC3B"}
+{"version":3,"file":"EdgeToolbar.types.d.ts","sourceRoot":"","sources":["../../../../../src/canvas/components/Toolbar/EdgeToolbar/EdgeToolbar.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,2CAA2C,CAAC;AAC5E,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,yBAAyB,CAAC;AAUjE,MAAM,WAAW,qBACf,SAAQ,IAAI,CAAC,iBAAiB,EAAE,UAAU,GAAG,OAAO,GAAG,WAAW,CAAC;IACnE,QAAQ,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;CACxE;AAKD,MAAM,WAAW,iBAAiB;IAChC,OAAO,EAAE,qBAAqB,EAAE,CAAC;CAClC;AAED,MAAM,WAAW,uBAAuB;IACtC,cAAc,EAAE,UAAU,CAAC;IAC3B,YAAY,EAAE,UAAU,CAAC;CAC1B;AAKD,MAAM,WAAW,gBAAgB;IAC/B,MAAM,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,OAAO,CAAC;IACjB,WAAW,EAAE,uBAAuB,CAAC;IACrC,MAAM,EAAE,iBAAiB,CAAC;IAC1B,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;CAC3B"}