@uipath/apollo-react 6.11.0 → 6.11.1

package/dist/canvas/components/Edges/CanvasEdge.cjs

@@ -44,6 +44,28 @@ const CanvasEdge_CanvasEdge = /*#__PURE__*/ (0, external_react_namespaceObject.m
     const onMouseEnter = (0, external_react_namespaceObject.useCallback)(()=>setIsHovered(true), []);
     const onMouseLeave = (0, external_react_namespaceObject.useCallback)(()=>setIsHovered(false), []);
     const pathRef = (0, external_react_namespaceObject.useRef)(null);
+    const store = (0, react_cjs_namespaceObject.useStoreApi)();
+    const onLabelClick = (0, external_react_namespaceObject.useCallback)((event)=>{
+        event.stopPropagation();
+        const { addSelectedEdges, edgeLookup, elementsSelectable, multiSelectionActive, unselectNodesAndEdges } = store.getState();
+        const edge = edgeLookup.get(id);
+        if (!edge || !(edge.selectable ?? elementsSelectable)) return;
+        store.setState({
+            nodesSelectionActive: false
+        });
+        if (edge.selected && multiSelectionActive) unselectNodesAndEdges({
+            nodes: [],
+            edges: [
+                edge
+            ]
+        });
+        else addSelectedEdges([
+            id
+        ]);
+    }, [
+        id,
+        store
+    ]);
     const routing = data?.routing ?? 'waypoint';
     const storedWaypoints = data?.waypoints ?? constants_cjs_namespaceObject.EMPTY_WAYPOINTS;
     const strokeStyle = data?.strokeStyle ?? 'solid';
@@ -129,6 +151,7 @@ const CanvasEdge_CanvasEdge = /*#__PURE__*/ (0, external_react_namespaceObject.m
     return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(jsx_runtime_namespaceObject.Fragment, {
         children: [
             /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("g", {
+                "data-edge-hovered": isHovered || void 0,
                 onMouseEnter: onMouseEnter,
                 onMouseLeave: onMouseLeave,
                 onMouseMove: toolbarEnabled ? toolbar.handleMouseMoveOnPath : void 0,
@@ -174,7 +197,10 @@ const CanvasEdge_CanvasEdge = /*#__PURE__*/ (0, external_react_namespaceObject.m
                         x: geometry.labelPoint.x,
                         y: geometry.labelPoint.y,
                         text: label,
-                        selected: selected
+                        borderColor: color,
+                        onClick: isReadOnly ? void 0 : onLabelClick,
+                        onMouseEnter: onMouseEnter,
+                        onMouseLeave: onMouseLeave
                     })
                 ]
             }),

package/dist/canvas/components/Edges/CanvasEdge.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CanvasEdge.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/Edges/CanvasEdge.tsx"],"names":[],"mappings":"AAsBA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,gBAAgB,CAAC;AAWtD,eAAO,MAAM,UAAU,uDAkMF,CAAC"}
+{"version":3,"file":"CanvasEdge.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/Edges/CanvasEdge.tsx"],"names":[],"mappings":"AAsBA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,gBAAgB,CAAC;AAWtD,eAAO,MAAM,UAAU,uDA+NF,CAAC"}

package/dist/canvas/components/Edges/CanvasEdge.js

@@ -1,5 +1,5 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { Position } from "../../xyflow/react.js";
+import { Position, useStoreApi } from "../../xyflow/react.js";
 import { memo, useCallback, useRef, useState } from "react";
 import { isPreviewEdge } from "../../utils/createPreviewNode.js";
 import { useBaseCanvasMode } from "../BaseCanvas/BaseCanvasModeProvider.js";
@@ -16,6 +16,28 @@ const CanvasEdge_CanvasEdge = /*#__PURE__*/ memo(function({ id, selected, animat
     const onMouseEnter = useCallback(()=>setIsHovered(true), []);
     const onMouseLeave = useCallback(()=>setIsHovered(false), []);
     const pathRef = useRef(null);
+    const store = useStoreApi();
+    const onLabelClick = useCallback((event)=>{
+        event.stopPropagation();
+        const { addSelectedEdges, edgeLookup, elementsSelectable, multiSelectionActive, unselectNodesAndEdges } = store.getState();
+        const edge = edgeLookup.get(id);
+        if (!edge || !(edge.selectable ?? elementsSelectable)) return;
+        store.setState({
+            nodesSelectionActive: false
+        });
+        if (edge.selected && multiSelectionActive) unselectNodesAndEdges({
+            nodes: [],
+            edges: [
+                edge
+            ]
+        });
+        else addSelectedEdges([
+            id
+        ]);
+    }, [
+        id,
+        store
+    ]);
     const routing = data?.routing ?? 'waypoint';
     const storedWaypoints = data?.waypoints ?? EMPTY_WAYPOINTS;
     const strokeStyle = data?.strokeStyle ?? 'solid';
@@ -101,6 +123,7 @@ const CanvasEdge_CanvasEdge = /*#__PURE__*/ memo(function({ id, selected, animat
     return /*#__PURE__*/ jsxs(Fragment, {
         children: [
             /*#__PURE__*/ jsxs("g", {
+                "data-edge-hovered": isHovered || void 0,
                 onMouseEnter: onMouseEnter,
                 onMouseLeave: onMouseLeave,
                 onMouseMove: toolbarEnabled ? toolbar.handleMouseMoveOnPath : void 0,
@@ -146,7 +169,10 @@ const CanvasEdge_CanvasEdge = /*#__PURE__*/ memo(function({ id, selected, animat
                         x: geometry.labelPoint.x,
                         y: geometry.labelPoint.y,
                         text: label,
-                        selected: selected
+                        borderColor: color,
+                        onClick: isReadOnly ? void 0 : onLabelClick,
+                        onMouseEnter: onMouseEnter,
+                        onMouseLeave: onMouseLeave
                     })
                 ]
             }),

package/dist/canvas/components/Edges/shared/constants.cjs

@@ -55,12 +55,12 @@ const EDGE_DASHARRAY = {
     dashed: '5,5'
 };
 const EDGE_COLORS = {
-    default: 'var(--canvas-border)',
-    hover: 'var(--canvas-primary-hover)',
-    selected: 'var(--canvas-primary)',
-    invalid: 'var(--canvas-error-icon)',
-    diffAdded: 'var(--canvas-success-icon)',
-    diffRemoved: 'var(--canvas-error-icon)'
+    default: 'var(--canvas-border, var(--color-border))',
+    hover: 'var(--canvas-primary-hover, var(--color-primary-hover))',
+    selected: 'var(--canvas-primary, var(--color-primary))',
+    invalid: 'var(--canvas-error-icon, var(--color-error-icon))',
+    diffAdded: 'var(--canvas-success-icon, var(--color-success-icon))',
+    diffRemoved: 'var(--canvas-error-icon, var(--color-error-icon))'
 };
 const ARROW_ANGLE_MAP = {
     [react_cjs_namespaceObject.Position.Left]: 0,

package/dist/canvas/components/Edges/shared/constants.d.ts

@@ -21,12 +21,12 @@ export declare const EDGE_DASHARRAY: {
     readonly dashed: "5,5";
 };
 export declare const EDGE_COLORS: {
-    readonly default: "var(--canvas-border)";
-    readonly hover: "var(--canvas-primary-hover)";
-    readonly selected: "var(--canvas-primary)";
-    readonly invalid: "var(--canvas-error-icon)";
-    readonly diffAdded: "var(--canvas-success-icon)";
-    readonly diffRemoved: "var(--canvas-error-icon)";
+    readonly default: "var(--canvas-border, var(--color-border))";
+    readonly hover: "var(--canvas-primary-hover, var(--color-primary-hover))";
+    readonly selected: "var(--canvas-primary, var(--color-primary))";
+    readonly invalid: "var(--canvas-error-icon, var(--color-error-icon))";
+    readonly diffAdded: "var(--canvas-success-icon, var(--color-success-icon))";
+    readonly diffRemoved: "var(--canvas-error-icon, var(--color-error-icon))";
 };
 export declare const ARROW_ANGLE_MAP: Record<Position, number>;
 export declare const ARROW_OFFSETS: Record<Position, Point>;

package/dist/canvas/components/Edges/shared/constants.js

@@ -21,12 +21,12 @@ const EDGE_DASHARRAY = {
     dashed: '5,5'
 };
 const EDGE_COLORS = {
-    default: 'var(--canvas-border)',
-    hover: 'var(--canvas-primary-hover)',
-    selected: 'var(--canvas-primary)',
-    invalid: 'var(--canvas-error-icon)',
-    diffAdded: 'var(--canvas-success-icon)',
-    diffRemoved: 'var(--canvas-error-icon)'
+    default: 'var(--canvas-border, var(--color-border))',
+    hover: 'var(--canvas-primary-hover, var(--color-primary-hover))',
+    selected: 'var(--canvas-primary, var(--color-primary))',
+    invalid: 'var(--canvas-error-icon, var(--color-error-icon))',
+    diffAdded: 'var(--canvas-success-icon, var(--color-success-icon))',
+    diffRemoved: 'var(--canvas-error-icon, var(--color-error-icon))'
 };
 const ARROW_ANGLE_MAP = {
     [Position.Left]: 0,

package/dist/canvas/components/Edges/shared/primitives/EdgeLabel.cjs

@@ -24,41 +24,44 @@ var __webpack_require__ = {};
 var __webpack_exports__ = {};
 __webpack_require__.r(__webpack_exports__);
 __webpack_require__.d(__webpack_exports__, {
-    EdgeLabel: ()=>EdgeLabel
+    EdgeLabel: ()=>EdgeLabel,
+    EDGE_LABEL_DEFAULT_BORDER_COLOR: ()=>EDGE_LABEL_DEFAULT_BORDER_COLOR
 });
 const jsx_runtime_namespaceObject = require("react/jsx-runtime");
-function EdgeLabel({ x, y, text, selected }) {
-    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("foreignObject", {
-        x: x,
-        y: y,
-        width: 1,
-        height: 1,
-        overflow: "visible",
-        style: {
-            pointerEvents: 'none'
-        },
-        children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
-            className: "react-flow__edge-label nodrag nopan",
-            style: {
-                position: 'absolute',
-                transform: 'translate(-50%, -50%)',
-                whiteSpace: 'nowrap',
-                pointerEvents: 'none',
-                color: 'var(--canvas-foreground)',
-                background: 'var(--canvas-background)',
-                padding: '4px 8px',
-                borderRadius: '4px',
-                fontSize: '12px',
-                fontWeight: 500,
-                border: `1px solid ${selected ? 'var(--canvas-primary)' : 'var(--canvas-border)'}`,
-                boxShadow: '0 1px 3px 0 rgba(0, 0, 0, 0.1)'
-            },
-            children: text
+const react_cjs_namespaceObject = require("../../../../xyflow/react.cjs");
+const external_react_namespaceObject = require("react");
+const external_CanvasTooltip_cjs_namespaceObject = require("../../../CanvasTooltip.cjs");
+const EDGE_LABEL_BASE_CLASS = "react-flow__edge-label nodrag nopan absolute top-0 left-0 max-w-48 overflow-hidden text-ellipsis whitespace-nowrap pointer-events-auto cursor-default px-2 py-1 rounded text-xs font-medium border shadow-[0_1px_3px_0_rgba(0,0,0,0.1)] text-[var(--canvas-foreground,var(--color-foreground))] bg-[var(--canvas-background,var(--color-background))]";
+const EDGE_LABEL_DEFAULT_BORDER_COLOR = 'var(--canvas-border,var(--color-border))';
+function EdgeLabel({ x, y, text, borderColor = EDGE_LABEL_DEFAULT_BORDER_COLOR, onClick, onMouseEnter, onMouseLeave }) {
+    const transform = (0, external_react_namespaceObject.useMemo)(()=>`translate(-50%, -50%) translate(${x}px, ${y}px)`, [
+        x,
+        y
+    ]);
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(react_cjs_namespaceObject.EdgeLabelRenderer, {
+        children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_CanvasTooltip_cjs_namespaceObject.CanvasTooltip, {
+            content: text,
+            smartTooltip: true,
+            delay: true,
+            disableHoverableContent: true,
+            children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+                className: EDGE_LABEL_BASE_CLASS,
+                style: {
+                    transform,
+                    borderColor
+                },
+                onClick: onClick,
+                onMouseEnter: onMouseEnter,
+                onMouseLeave: onMouseLeave,
+                children: text
+            })
         })
     });
 }
+exports.EDGE_LABEL_DEFAULT_BORDER_COLOR = __webpack_exports__.EDGE_LABEL_DEFAULT_BORDER_COLOR;
 exports.EdgeLabel = __webpack_exports__.EdgeLabel;
 for(var __rspack_i in __webpack_exports__)if (-1 === [
+    "EDGE_LABEL_DEFAULT_BORDER_COLOR",
     "EdgeLabel"
 ].indexOf(__rspack_i)) exports[__rspack_i] = __webpack_exports__[__rspack_i];
 Object.defineProperty(exports, '__esModule', {

package/dist/canvas/components/Edges/shared/primitives/EdgeLabel.d.ts

@@ -1,8 +1,13 @@
+import type { MouseEventHandler } from 'react';
 export type EdgeLabelProps = {
     x: number;
     y: number;
     text: string;
-    selected?: boolean;
+    borderColor?: string;
+    onClick?: MouseEventHandler<HTMLDivElement>;
+    onMouseEnter?: () => void;
+    onMouseLeave?: () => void;
 };
-export declare function EdgeLabel({ x, y, text, selected }: EdgeLabelProps): import("react/jsx-runtime").JSX.Element;
+export declare const EDGE_LABEL_DEFAULT_BORDER_COLOR = "var(--canvas-border,var(--color-border))";
+export declare function EdgeLabel({ x, y, text, borderColor, onClick, onMouseEnter, onMouseLeave, }: EdgeLabelProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=EdgeLabel.d.ts.map

package/dist/canvas/components/Edges/shared/primitives/EdgeLabel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"EdgeLabel.d.ts","sourceRoot":"","sources":["../../../../../../src/canvas/components/Edges/shared/primitives/EdgeLabel.tsx"],"names":[],"mappings":"AAAA,MAAM,MAAM,cAAc,GAAG;IAC3B,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAEF,wBAAgB,SAAS,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE,cAAc,2CA+BjE"}
+{"version":3,"file":"EdgeLabel.d.ts","sourceRoot":"","sources":["../../../../../../src/canvas/components/Edges/shared/primitives/EdgeLabel.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAI/C,MAAM,MAAM,cAAc,GAAG;IAC3B,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,IAAI,EAAE,MAAM,CAAC;IACb,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,OAAO,CAAC,EAAE,iBAAiB,CAAC,cAAc,CAAC,CAAC;IAC5C,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;CAC3B,CAAC;AAWF,eAAO,MAAM,+BAA+B,6CAA6C,CAAC;AAS1F,wBAAgB,SAAS,CAAC,EACxB,CAAC,EACD,CAAC,EACD,IAAI,EACJ,WAA6C,EAC7C,OAAO,EACP,YAAY,EACZ,YAAY,GACb,EAAE,cAAc,2CAkBhB"}

package/dist/canvas/components/Edges/shared/primitives/EdgeLabel.js

@@ -1,32 +1,32 @@
 import { jsx } from "react/jsx-runtime";
-function EdgeLabel({ x, y, text, selected }) {
-    return /*#__PURE__*/ jsx("foreignObject", {
-        x: x,
-        y: y,
-        width: 1,
-        height: 1,
-        overflow: "visible",
-        style: {
-            pointerEvents: 'none'
-        },
-        children: /*#__PURE__*/ jsx("div", {
-            className: "react-flow__edge-label nodrag nopan",
-            style: {
-                position: 'absolute',
-                transform: 'translate(-50%, -50%)',
-                whiteSpace: 'nowrap',
-                pointerEvents: 'none',
-                color: 'var(--canvas-foreground)',
-                background: 'var(--canvas-background)',
-                padding: '4px 8px',
-                borderRadius: '4px',
-                fontSize: '12px',
-                fontWeight: 500,
-                border: `1px solid ${selected ? 'var(--canvas-primary)' : 'var(--canvas-border)'}`,
-                boxShadow: '0 1px 3px 0 rgba(0, 0, 0, 0.1)'
-            },
-            children: text
+import { EdgeLabelRenderer } from "../../../../xyflow/react.js";
+import { useMemo } from "react";
+import { CanvasTooltip } from "../../../CanvasTooltip.js";
+const EDGE_LABEL_BASE_CLASS = "react-flow__edge-label nodrag nopan absolute top-0 left-0 max-w-48 overflow-hidden text-ellipsis whitespace-nowrap pointer-events-auto cursor-default px-2 py-1 rounded text-xs font-medium border shadow-[0_1px_3px_0_rgba(0,0,0,0.1)] text-[var(--canvas-foreground,var(--color-foreground))] bg-[var(--canvas-background,var(--color-background))]";
+const EDGE_LABEL_DEFAULT_BORDER_COLOR = 'var(--canvas-border,var(--color-border))';
+function EdgeLabel({ x, y, text, borderColor = EDGE_LABEL_DEFAULT_BORDER_COLOR, onClick, onMouseEnter, onMouseLeave }) {
+    const transform = useMemo(()=>`translate(-50%, -50%) translate(${x}px, ${y}px)`, [
+        x,
+        y
+    ]);
+    return /*#__PURE__*/ jsx(EdgeLabelRenderer, {
+        children: /*#__PURE__*/ jsx(CanvasTooltip, {
+            content: text,
+            smartTooltip: true,
+            delay: true,
+            disableHoverableContent: true,
+            children: /*#__PURE__*/ jsx("div", {
+                className: EDGE_LABEL_BASE_CLASS,
+                style: {
+                    transform,
+                    borderColor
+                },
+                onClick: onClick,
+                onMouseEnter: onMouseEnter,
+                onMouseLeave: onMouseLeave,
+                children: text
+            })
         })
     });
 }
-export { EdgeLabel };
+export { EDGE_LABEL_DEFAULT_BORDER_COLOR, EdgeLabel };

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

@@ -43,19 +43,19 @@ const react_cjs_namespaceObject = require("../../xyflow/react.cjs");
 const external_react_namespaceObject = require("react");
 const StageEdgeLabel = styled_default().div`
   position: absolute;
-  color: var(--canvas-foreground);
-  background: var(--canvas-background);
+  color: var(--canvas-foreground, var(--color-foreground));
+  background: var(--canvas-background, var(--color-background));
   padding: 4px 8px;
   border-radius: 4px;
   font-size: 12px;
   font-weight: 500;
-  border: 1px solid var(--canvas-border);
+  border: 1px solid var(--canvas-border, var(--color-border));
   box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
   pointer-events: all;
 
   &:hover {
-    background: var(--canvas-background-hover);
-    border-color: var(--canvas-border-hover);
+    background: var(--canvas-background-hover, var(--color-background-hover));
+    border-color: var(--canvas-border-hover, var(--color-border-hover));
   }
 `;
 function stageEdgeGeometryEquality(previous, next) {

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

@@ -4,19 +4,19 @@ import { EdgeLabelRenderer, getSmoothStepPath, useStore } from "../../xyflow/rea
 import { memo, useMemo } from "react";
 const StageEdgeLabel = styled.div`
   position: absolute;
-  color: var(--canvas-foreground);
-  background: var(--canvas-background);
+  color: var(--canvas-foreground, var(--color-foreground));
+  background: var(--canvas-background, var(--color-background));
   padding: 4px 8px;
   border-radius: 4px;
   font-size: 12px;
   font-weight: 500;
-  border: 1px solid var(--canvas-border);
+  border: 1px solid var(--canvas-border, var(--color-border));
   box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
   pointer-events: all;
 
   &:hover {
-    background: var(--canvas-background-hover);
-    border-color: var(--canvas-border-hover);
+    background: var(--canvas-background-hover, var(--color-background-hover));
+    border-color: var(--canvas-border-hover, var(--color-border-hover));
   }
 `;
 function stageEdgeGeometryEquality(previous, next) {

package/dist/canvas/styles/reactflow-reset.css

@@ -14,6 +14,14 @@
   z-index: 1002 !important;
 }
 
+.react-flow__edges > svg:has([data-edge-hovered="true"]) {
+  z-index: 1001 !important;
+}
+
+.react-flow__edgelabel-renderer {
+  z-index: 1002 !important;
+}
+
 .react-flow__node:has([data-loop-container]) {
   z-index: -20 !important;
 }