@uipath/apollo-react 4.5.3 → 4.5.4-pr525.f7c19ae

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

@@ -0,0 +1,50 @@
+import { jsx } from "react/jsx-runtime";
+import { cn } from "@uipath/apollo-wind";
+import { DEFAULT_NODE_SIZE, NODE_CONTAINER_RADIUS_RATIO } from "../../constants.js";
+const getStatusBorder = (status)=>{
+    switch(status){
+        case 'InProgress':
+            return 'border-info animate-glow [--glow-color:var(--info)]';
+        case 'Completed':
+        case 'add':
+            return 'border-success animate-glow [--glow-color:var(--success)]';
+        case 'Paused':
+        case 'Warning':
+        case 'WARNING':
+        case 'update':
+            return 'border-warning animate-glow [--glow-color:var(--warning)]';
+        case 'Cancelled':
+        case 'Failed':
+        case 'Terminated':
+        case 'ERROR':
+        case 'CRITICAL':
+        case 'delete':
+            return 'border-error animate-glow [--glow-color:var(--error)]';
+        default:
+            return '';
+    }
+};
+const BaseContainer = ({ isSelected, isHovered, shape, interactionState, executionStatus, validationStatus, suggestionType, width, height, hasFooter, background, loading, children })=>{
+    const numericWidth = 'number' == typeof width ? width : void 0;
+    const numericHeight = 'number' == typeof height ? height : void 0;
+    const radiusBasis = 'rectangle' === shape ? numericHeight ?? DEFAULT_NODE_SIZE : Math.min(numericWidth ?? DEFAULT_NODE_SIZE, numericHeight ?? DEFAULT_NODE_SIZE);
+    const containerRadius = radiusBasis * NODE_CONTAINER_RADIUS_RATIO;
+    const activeStatus = suggestionType ?? validationStatus ?? executionStatus;
+    return /*#__PURE__*/ jsx("div", {
+        "data-testid": "base-container",
+        "data-execution-status": executionStatus,
+        "data-interaction-state": interactionState,
+        "data-validation-status": validationStatus,
+        "data-suggestion-type": suggestionType,
+        className: cn('relative flex items-center cursor-pointer bg-surface-overlay border-2 border-border', 'circle' === shape ? 'rounded-full' : '', 'rectangle' === shape ? 'flex-row justify-start gap-3 p-2' : 'flex-col justify-center', hasFooter && 'flex-wrap rounded-2xl', getStatusBorder(activeStatus), !isSelected && isHovered && 'border-foreground-muted', isSelected && 'border-brand', isSelected && isHovered && 'border-foreground-accent-muted', 'disabled' === interactionState && 'opacity-50 cursor-not-allowed', 'drag' === interactionState && 'cursor-grabbing opacity-80'),
+        style: {
+            width,
+            height,
+            background,
+            borderRadius: 'circle' === shape || hasFooter ? void 0 : containerRadius
+        },
+        "aria-busy": loading || void 0,
+        children: children
+    });
+};
+export { BaseContainer, getStatusBorder };

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

@@ -0,0 +1,65 @@
+"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__, {
+    BaseInnerShape: ()=>BaseInnerShape
+});
+const jsx_runtime_namespaceObject = require("react/jsx-runtime");
+const apollo_wind_namespaceObject = require("@uipath/apollo-wind");
+const external_constants_cjs_namespaceObject = require("../../constants.cjs");
+const BaseInnerShape = ({ shape, color, background, hasFooter, loading, containerWidth = external_constants_cjs_namespaceObject.DEFAULT_NODE_SIZE, containerHeight = external_constants_cjs_namespaceObject.DEFAULT_NODE_SIZE, children })=>{
+    const effectiveContainerHeight = hasFooter ? external_constants_cjs_namespaceObject.DEFAULT_NODE_SIZE : containerHeight;
+    const effectiveContainerWidth = hasFooter ? external_constants_cjs_namespaceObject.DEFAULT_NODE_SIZE : containerWidth;
+    const basis = 'rectangle' === shape ? effectiveContainerHeight : Math.min(effectiveContainerWidth, effectiveContainerHeight);
+    const innerSize = basis * external_constants_cjs_namespaceObject.NODE_INNER_SHAPE_RATIO;
+    const iconSize = basis * external_constants_cjs_namespaceObject.NODE_INNER_ICON_RATIO;
+    const innerRadius = basis * external_constants_cjs_namespaceObject.NODE_INNER_RADIUS_RATIO;
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+        className: (0, apollo_wind_namespaceObject.cn)('flex items-center justify-center overflow-hidden bg-surface text-foreground', 'circle' === shape ? 'rounded-full' : '', hasFooter ? 'rounded-2xl' : '', '[&>svg]:w-(--canvas-icon-size) [&>svg]:h-(--canvas-icon-size)', '[&>img]:w-(--canvas-icon-size) [&>img]:h-(--canvas-icon-size) [&>img]:object-contain'),
+        style: {
+            width: innerSize,
+            height: innerSize,
+            borderRadius: 'circle' === shape || hasFooter ? void 0 : innerRadius,
+            color,
+            background,
+            '--canvas-icon-size': `${iconSize}px`
+        },
+        children: loading ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(apollo_wind_namespaceObject.Skeleton, {
+            "data-testid": "skeleton-icon",
+            className: "rounded-lg",
+            style: {
+                width: iconSize,
+                height: iconSize
+            }
+        }) : children
+    });
+};
+exports.BaseInnerShape = __webpack_exports__.BaseInnerShape;
+for(var __rspack_i in __webpack_exports__)if (-1 === [
+    "BaseInnerShape"
+].indexOf(__rspack_i)) exports[__rspack_i] = __webpack_exports__[__rspack_i];
+Object.defineProperty(exports, '__esModule', {
+    value: true
+});

package/dist/canvas/components/BaseNode/BaseNodeInnerShape.d.ts

@@ -0,0 +1,14 @@
+import type { NodeShape } from '../../schema';
+interface BaseInnerShapeProps {
+    shape?: NodeShape;
+    color?: string;
+    background?: string;
+    hasFooter?: boolean;
+    loading?: boolean;
+    containerWidth?: number;
+    containerHeight?: number;
+    children: React.ReactNode;
+}
+export declare const BaseInnerShape: ({ shape, color, background, hasFooter, loading, containerWidth, containerHeight, children, }: BaseInnerShapeProps) => import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=BaseNodeInnerShape.d.ts.map

package/dist/canvas/components/BaseNode/BaseNodeInnerShape.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BaseNodeInnerShape.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/BaseNode/BaseNodeInnerShape.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAE9C,UAAU,mBAAmB;IAC3B,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AACD,eAAO,MAAM,cAAc,GAAI,8FAS5B,mBAAmB,4CAgDrB,CAAC"}

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

@@ -0,0 +1,31 @@
+import { jsx } from "react/jsx-runtime";
+import { Skeleton, cn } from "@uipath/apollo-wind";
+import { DEFAULT_NODE_SIZE, NODE_INNER_ICON_RATIO, NODE_INNER_RADIUS_RATIO, NODE_INNER_SHAPE_RATIO } from "../../constants.js";
+const BaseInnerShape = ({ shape, color, background, hasFooter, loading, containerWidth = DEFAULT_NODE_SIZE, containerHeight = DEFAULT_NODE_SIZE, children })=>{
+    const effectiveContainerHeight = hasFooter ? DEFAULT_NODE_SIZE : containerHeight;
+    const effectiveContainerWidth = hasFooter ? DEFAULT_NODE_SIZE : containerWidth;
+    const basis = 'rectangle' === shape ? effectiveContainerHeight : Math.min(effectiveContainerWidth, effectiveContainerHeight);
+    const innerSize = basis * NODE_INNER_SHAPE_RATIO;
+    const iconSize = basis * NODE_INNER_ICON_RATIO;
+    const innerRadius = basis * NODE_INNER_RADIUS_RATIO;
+    return /*#__PURE__*/ jsx("div", {
+        className: cn('flex items-center justify-center overflow-hidden bg-surface text-foreground', 'circle' === shape ? 'rounded-full' : '', hasFooter ? 'rounded-2xl' : '', '[&>svg]:w-(--canvas-icon-size) [&>svg]:h-(--canvas-icon-size)', '[&>img]:w-(--canvas-icon-size) [&>img]:h-(--canvas-icon-size) [&>img]:object-contain'),
+        style: {
+            width: innerSize,
+            height: innerSize,
+            borderRadius: 'circle' === shape || hasFooter ? void 0 : innerRadius,
+            color,
+            background,
+            '--canvas-icon-size': `${iconSize}px`
+        },
+        children: loading ? /*#__PURE__*/ jsx(Skeleton, {
+            "data-testid": "skeleton-icon",
+            className: "rounded-lg",
+            style: {
+                width: iconSize,
+                height: iconSize
+            }
+        }) : children
+    });
+};
+export { BaseInnerShape };

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

@@ -0,0 +1,67 @@
+"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__, {
+    MissingManifestNode: ()=>MissingManifestNode
+});
+const jsx_runtime_namespaceObject = require("react/jsx-runtime");
+const external_constants_cjs_namespaceObject = require("../../constants.cjs");
+const index_cjs_namespaceObject = require("../../utils/index.cjs");
+const external_BaseNodeContainer_cjs_namespaceObject = require("./BaseNodeContainer.cjs");
+const external_BaseNodeInnerShape_cjs_namespaceObject = require("./BaseNodeInnerShape.cjs");
+const external_NodeLabel_cjs_namespaceObject = require("./NodeLabel.cjs");
+const MissingManifestNode = ({ type, isSelected, isHovered, interactionState })=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(external_BaseNodeContainer_cjs_namespaceObject.BaseContainer, {
+        shape: "square",
+        isSelected: isSelected,
+        isHovered: isHovered,
+        interactionState: interactionState,
+        width: external_constants_cjs_namespaceObject.DEFAULT_NODE_SIZE,
+        height: external_constants_cjs_namespaceObject.DEFAULT_NODE_SIZE,
+        children: [
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_BaseNodeInnerShape_cjs_namespaceObject.BaseInnerShape, {
+                shape: "square",
+                containerWidth: external_constants_cjs_namespaceObject.DEFAULT_NODE_SIZE,
+                containerHeight: external_constants_cjs_namespaceObject.DEFAULT_NODE_SIZE,
+                children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(index_cjs_namespaceObject.CanvasIcon, {
+                    icon: "circle-alert",
+                    size: external_constants_cjs_namespaceObject.NODE_ERROR_ICON_SIZE,
+                    color: "var(--color-error-icon)"
+                })
+            }),
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_NodeLabel_cjs_namespaceObject.NodeLabel, {
+                label: "Manifest Undefined",
+                subLabel: type,
+                shape: "square",
+                readonly: true
+            })
+        ]
+    });
+exports.MissingManifestNode = __webpack_exports__.MissingManifestNode;
+for(var __rspack_i in __webpack_exports__)if (-1 === [
+    "MissingManifestNode"
+].indexOf(__rspack_i)) exports[__rspack_i] = __webpack_exports__[__rspack_i];
+Object.defineProperty(exports, '__esModule', {
+    value: true
+});

package/dist/canvas/components/BaseNode/BaseNodeMissingManifest.d.ts

@@ -0,0 +1,9 @@
+interface MissingManifestNodeProps {
+    type?: string;
+    isSelected?: boolean;
+    isHovered?: boolean;
+    interactionState?: string;
+}
+export declare const MissingManifestNode: ({ type, isSelected, isHovered, interactionState, }: MissingManifestNodeProps) => import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=BaseNodeMissingManifest.d.ts.map

package/dist/canvas/components/BaseNode/BaseNodeMissingManifest.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BaseNodeMissingManifest.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/BaseNode/BaseNodeMissingManifest.tsx"],"names":[],"mappings":"AAMA,UAAU,wBAAwB;IAChC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,gBAAgB,CAAC,EAAE,MAAM,CAAC;CAC3B;AAED,eAAO,MAAM,mBAAmB,GAAI,oDAKjC,wBAAwB,4CAmB1B,CAAC"}

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

@@ -0,0 +1,33 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { DEFAULT_NODE_SIZE, NODE_ERROR_ICON_SIZE } from "../../constants.js";
+import { CanvasIcon } from "../../utils/index.js";
+import { BaseContainer } from "./BaseNodeContainer.js";
+import { BaseInnerShape } from "./BaseNodeInnerShape.js";
+import { NodeLabel } from "./NodeLabel.js";
+const MissingManifestNode = ({ type, isSelected, isHovered, interactionState })=>/*#__PURE__*/ jsxs(BaseContainer, {
+        shape: "square",
+        isSelected: isSelected,
+        isHovered: isHovered,
+        interactionState: interactionState,
+        width: DEFAULT_NODE_SIZE,
+        height: DEFAULT_NODE_SIZE,
+        children: [
+            /*#__PURE__*/ jsx(BaseInnerShape, {
+                shape: "square",
+                containerWidth: DEFAULT_NODE_SIZE,
+                containerHeight: DEFAULT_NODE_SIZE,
+                children: /*#__PURE__*/ jsx(CanvasIcon, {
+                    icon: "circle-alert",
+                    size: NODE_ERROR_ICON_SIZE,
+                    color: "var(--color-error-icon)"
+                })
+            }),
+            /*#__PURE__*/ jsx(NodeLabel, {
+                label: "Manifest Undefined",
+                subLabel: type,
+                shape: "square",
+                readonly: true
+            })
+        ]
+    });
+export { MissingManifestNode };

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

@@ -24,12 +24,27 @@ var __webpack_require__ = {};
 var __webpack_exports__ = {};
 __webpack_require__.r(__webpack_exports__);
 __webpack_require__.d(__webpack_exports__, {
+    BaseTextContainer: ()=>BaseTextContainer,
     NodeLabel: ()=>NodeLabel
 });
 const jsx_runtime_namespaceObject = require("react/jsx-runtime");
+const apollo_wind_namespaceObject = require("@uipath/apollo-wind");
 const external_react_namespaceObject = require("react");
+const external_constants_cjs_namespaceObject = require("../../constants.cjs");
 const external_CanvasTooltip_cjs_namespaceObject = require("../CanvasTooltip.cjs");
-const external_BaseNode_styles_cjs_namespaceObject = require("./BaseNode.styles.cjs");
+const BaseTextContainer = ({ hasBottomHandles, shape, children })=>{
+    if ('rectangle' === shape) return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+        className: "flex flex-1 min-w-0 flex-col items-start text-left",
+        children: children
+    });
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+        className: (0, apollo_wind_namespaceObject.cn)('absolute left-1/2 w-[150%] flex flex-col z-10 transition-transform duration-200', hasBottomHandles ? 'items-start text-left translate-x-[20%] translate-y-1/2' : 'items-center text-center -translate-x-1/2 translate-y-full'),
+        style: {
+            bottom: hasBottomHandles ? external_constants_cjs_namespaceObject.NODE_TEXT_BOTTOM_OFFSET_WITH_HANDLES : external_constants_cjs_namespaceObject.NODE_TEXT_BOTTOM_OFFSET
+        },
+        children: children
+    });
+};
 const ConditionalTooltip = ({ content, children })=>{
     if (!content) return children;
     return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_CanvasTooltip_cjs_namespaceObject.CanvasTooltip, {
@@ -40,6 +55,42 @@ const ConditionalTooltip = ({ content, children })=>{
         children: children
     });
 };
+const Header = ({ shape, backgroundColor, onDoubleClick, children, 'data-testid': dataTestId })=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+        "data-testid": dataTestId,
+        onDoubleClick: onDoubleClick,
+        className: (0, apollo_wind_namespaceObject.cn)('text-center text-sm leading-[18px] font-semibold text-foreground overflow-hidden', backgroundColor && 'px-1.5 py-0.5 rounded-sm', 'rectangle' === shape ? 'w-full text-left whitespace-nowrap text-ellipsis' : 'break-all line-clamp-3'),
+        style: backgroundColor ? {
+            backgroundColor
+        } : void 0,
+        children: children
+    });
+const SubHeader = ({ shape, onDoubleClick, children, 'data-testid': dataTestId })=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+        "data-testid": dataTestId,
+        onDoubleClick: onDoubleClick,
+        className: (0, apollo_wind_namespaceObject.cn)('text-center text-xs leading-[18px] text-foreground-muted break-all overflow-hidden', 'rectangle' === shape ? 'w-full text-left line-clamp-2' : 'line-clamp-5'),
+        children: children
+    });
+const EditableLabel = /*#__PURE__*/ (0, external_react_namespaceObject.forwardRef)(({ shape, backgroundColor, variant, value, placeholder, rows, onChange, onKeyDown, onBlur, 'aria-label': ariaLabel }, ref)=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("textarea", {
+        ref: ref,
+        value: value,
+        placeholder: placeholder,
+        rows: rows,
+        "aria-label": ariaLabel,
+        onChange: onChange,
+        onKeyDown: onKeyDown,
+        onBlur: onBlur,
+        className: (0, apollo_wind_namespaceObject.cn)('nodrag nowheel resize-none font-[inherit] text-foreground border-none rounded-sm outline-1 outline-dashed outline-border-de-emp max-w-full', 'subtext' === variant ? 'text-xs leading-[18px] font-normal mb-0' : 'text-sm leading-[18px] font-semibold mb-0.5', 'rectangle' === shape ? 'field-sizing-fixed w-full' : 'field-sizing-content text-center', backgroundColor && 'px-1.5 py-0.5'),
+        style: backgroundColor ? {
+            backgroundColor
+        } : void 0
+    }));
+EditableLabel.displayName = 'EditableLabel';
+const EmptyLabelPlaceholder = ({ onDoubleClick })=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+        onDoubleClick: onDoubleClick,
+        className: "nodrag nowheel text-sm leading-[18px] font-semibold text-foreground-muted bg-transparent border border-dashed border-border-de-emp rounded-sm cursor-pointer opacity-0 transition-opacity duration-200 min-w-5 min-h-5 hover:opacity-100",
+        "aria-description": "Add node label",
+        "data-testid": "empty-label-placeholder"
+    });
 const NodeLabelInternal = ({ label = '', subLabel = '', labelTooltip, labelBackgroundColor, shape, hasBottomHandles, selected, dragging, centerAdornment, readonly, onChange })=>{
     const [isEditing, setIsEditing] = (0, external_react_namespaceObject.useState)(false);
     const [localLabel, setLocalLabel] = (0, external_react_namespaceObject.useState)('');
@@ -50,7 +101,7 @@ const NodeLabelInternal = ({ label = '', subLabel = '', labelTooltip, labelBackg
     const handleSave = (0, external_react_namespaceObject.useCallback)(()=>{
         setIsEditing(false);
         setFocusTarget(null);
-        if (localLabel !== label || localSubLabel !== subLabel) onChange({
+        if (localLabel !== label || localSubLabel !== subLabel) onChange?.({
             label: localLabel,
             subLabel: localSubLabel
         });
@@ -124,27 +175,23 @@ const NodeLabelInternal = ({ label = '', subLabel = '', labelTooltip, labelBackg
     }, [
         handleSave
     ]);
-    if (!label && !subLabel && !isEditing) return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(external_BaseNode_styles_cjs_namespaceObject.BaseTextContainer, {
+    if (!label && !subLabel && !isEditing) return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(BaseTextContainer, {
         hasBottomHandles: hasBottomHandles,
         shape: shape,
         children: [
-            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_BaseNode_styles_cjs_namespaceObject.EmptyLabelPlaceholder, {
-                onDoubleClick: readonly ? void 0 : handleDoubleClick(labelInputRef),
-                className: "nodrag nowheel",
-                role: "button",
-                "aria-label": "Add node label",
-                "data-testid": "empty-label-placeholder"
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(EmptyLabelPlaceholder, {
+                onDoubleClick: readonly ? void 0 : handleDoubleClick(labelInputRef)
             }),
             centerAdornment
         ]
     });
-    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(external_BaseNode_styles_cjs_namespaceObject.BaseTextContainer, {
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(BaseTextContainer, {
         hasBottomHandles: hasBottomHandles,
         shape: shape,
         children: [
             isEditing ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(jsx_runtime_namespaceObject.Fragment, {
                 children: [
-                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_BaseNode_styles_cjs_namespaceObject.EditableLabel, {
+                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(EditableLabel, {
                         ref: labelInputRef,
                         value: localLabel,
                         onChange: (e)=>setLocalLabel(e.target.value),
@@ -153,13 +200,11 @@ const NodeLabelInternal = ({ label = '', subLabel = '', labelTooltip, labelBackg
                         shape: shape,
                         variant: "normal",
                         backgroundColor: labelBackgroundColor,
-                        className: "nodrag nowheel",
                         placeholder: "Name",
                         rows: 'rectangle' === shape ? 1 : void 0,
-                        role: "textbox",
                         "aria-label": "Edit node name"
                     }),
-                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_BaseNode_styles_cjs_namespaceObject.EditableLabel, {
+                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(EditableLabel, {
                         ref: subLabelInputRef,
                         value: localSubLabel,
                         onChange: (e)=>setLocalSubLabel(e.target.value),
@@ -167,24 +212,22 @@ const NodeLabelInternal = ({ label = '', subLabel = '', labelTooltip, labelBackg
                         onBlur: handleBlur,
                         shape: shape,
                         variant: "subtext",
-                        className: "nodrag nowheel",
                         placeholder: "Description",
                         rows: 'rectangle' === shape ? 2 : void 0,
-                        role: "textbox",
                         "aria-label": "Edit node description"
                     })
                 ]
             }) : /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(ConditionalTooltip, {
                 content: labelTooltip,
                 children: [
-                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_BaseNode_styles_cjs_namespaceObject.BaseHeader, {
+                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(Header, {
                         shape: shape,
                         backgroundColor: labelBackgroundColor,
                         onDoubleClick: readonly ? void 0 : handleDoubleClick(labelInputRef),
                         "data-testid": "node-label",
                         children: label
                     }),
-                    subLabel && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_BaseNode_styles_cjs_namespaceObject.BaseSubHeader, {
+                    subLabel && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(SubHeader, {
                         shape: shape,
                         onDoubleClick: readonly ? void 0 : handleDoubleClick(subLabelInputRef),
                         "data-testid": "node-sublabel",
@@ -197,8 +240,10 @@ const NodeLabelInternal = ({ label = '', subLabel = '', labelTooltip, labelBackg
     });
 };
 const NodeLabel = /*#__PURE__*/ (0, external_react_namespaceObject.memo)(NodeLabelInternal);
+exports.BaseTextContainer = __webpack_exports__.BaseTextContainer;
 exports.NodeLabel = __webpack_exports__.NodeLabel;
 for(var __rspack_i in __webpack_exports__)if (-1 === [
+    "BaseTextContainer",
     "NodeLabel"
 ].indexOf(__rspack_i)) exports[__rspack_i] = __webpack_exports__[__rspack_i];
 Object.defineProperty(exports, '__esModule', {

package/dist/canvas/components/BaseNode/NodeLabel.d.ts

@@ -1,4 +1,10 @@
 import type { NodeShape } from '../../schema';
+interface BaseTextContainerProps {
+    hasBottomHandles?: boolean;
+    shape?: NodeShape;
+    children: React.ReactNode;
+}
+export declare const BaseTextContainer: ({ hasBottomHandles, shape, children, }: BaseTextContainerProps) => import("react/jsx-runtime").JSX.Element;
 export interface NodeLabelProps {
     label?: string;
     subLabel?: string;
@@ -10,10 +16,11 @@ export interface NodeLabelProps {
     dragging?: boolean;
     centerAdornment?: React.ReactNode;
     readonly?: boolean;
-    onChange: (values: {
+    onChange?: (values: {
         label: string;
         subLabel: string;
     }) => void;
 }
 export declare const NodeLabel: import("react").MemoExoticComponent<({ label, subLabel, labelTooltip, labelBackgroundColor, shape, hasBottomHandles, selected, dragging, centerAdornment, readonly, onChange, }: NodeLabelProps) => import("react/jsx-runtime").JSX.Element>;
+export {};
 //# sourceMappingURL=NodeLabel.d.ts.map

package/dist/canvas/components/BaseNode/NodeLabel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"NodeLabel.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/BaseNode/NodeLabel.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAU9C,MAAM,WAAW,cAAc;IAC7B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,eAAe,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAClC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,EAAE,CAAC,MAAM,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,QAAQ,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;CACjE;AAwMD,eAAO,MAAM,SAAS,mLAzKnB,cAAc,6CAyK+B,CAAC"}
+{"version":3,"file":"NodeLabel.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/BaseNode/NodeLabel.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAG9C,UAAU,sBAAsB;IAC9B,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED,eAAO,MAAM,iBAAiB,GAAI,wCAI/B,sBAAsB,4CAmBxB,CAAC;AA+IF,MAAM,WAAW,cAAc;IAC7B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,eAAe,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAClC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,QAAQ,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;CAClE;AA+KD,eAAO,MAAM,SAAS,mLAjKnB,cAAc,6CAiK+B,CAAC"}

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

@@ -1,7 +1,21 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { memo, useCallback, useEffect, useRef, useState } from "react";
+import { cn } from "@uipath/apollo-wind";
+import { forwardRef, memo, useCallback, useEffect, useRef, useState } from "react";
+import { NODE_TEXT_BOTTOM_OFFSET, NODE_TEXT_BOTTOM_OFFSET_WITH_HANDLES } from "../../constants.js";
 import { CanvasTooltip } from "../CanvasTooltip.js";
-import { BaseHeader, BaseSubHeader, BaseTextContainer, EditableLabel, EmptyLabelPlaceholder } from "./BaseNode.styles.js";
+const BaseTextContainer = ({ hasBottomHandles, shape, children })=>{
+    if ('rectangle' === shape) return /*#__PURE__*/ jsx("div", {
+        className: "flex flex-1 min-w-0 flex-col items-start text-left",
+        children: children
+    });
+    return /*#__PURE__*/ jsx("div", {
+        className: cn('absolute left-1/2 w-[150%] flex flex-col z-10 transition-transform duration-200', hasBottomHandles ? 'items-start text-left translate-x-[20%] translate-y-1/2' : 'items-center text-center -translate-x-1/2 translate-y-full'),
+        style: {
+            bottom: hasBottomHandles ? NODE_TEXT_BOTTOM_OFFSET_WITH_HANDLES : NODE_TEXT_BOTTOM_OFFSET
+        },
+        children: children
+    });
+};
 const ConditionalTooltip = ({ content, children })=>{
     if (!content) return children;
     return /*#__PURE__*/ jsx(CanvasTooltip, {
@@ -12,6 +26,42 @@ const ConditionalTooltip = ({ content, children })=>{
         children: children
     });
 };
+const Header = ({ shape, backgroundColor, onDoubleClick, children, 'data-testid': dataTestId })=>/*#__PURE__*/ jsx("div", {
+        "data-testid": dataTestId,
+        onDoubleClick: onDoubleClick,
+        className: cn('text-center text-sm leading-[18px] font-semibold text-foreground overflow-hidden', backgroundColor && 'px-1.5 py-0.5 rounded-sm', 'rectangle' === shape ? 'w-full text-left whitespace-nowrap text-ellipsis' : 'break-all line-clamp-3'),
+        style: backgroundColor ? {
+            backgroundColor
+        } : void 0,
+        children: children
+    });
+const SubHeader = ({ shape, onDoubleClick, children, 'data-testid': dataTestId })=>/*#__PURE__*/ jsx("div", {
+        "data-testid": dataTestId,
+        onDoubleClick: onDoubleClick,
+        className: cn('text-center text-xs leading-[18px] text-foreground-muted break-all overflow-hidden', 'rectangle' === shape ? 'w-full text-left line-clamp-2' : 'line-clamp-5'),
+        children: children
+    });
+const EditableLabel = /*#__PURE__*/ forwardRef(({ shape, backgroundColor, variant, value, placeholder, rows, onChange, onKeyDown, onBlur, 'aria-label': ariaLabel }, ref)=>/*#__PURE__*/ jsx("textarea", {
+        ref: ref,
+        value: value,
+        placeholder: placeholder,
+        rows: rows,
+        "aria-label": ariaLabel,
+        onChange: onChange,
+        onKeyDown: onKeyDown,
+        onBlur: onBlur,
+        className: cn('nodrag nowheel resize-none font-[inherit] text-foreground border-none rounded-sm outline-1 outline-dashed outline-border-de-emp max-w-full', 'subtext' === variant ? 'text-xs leading-[18px] font-normal mb-0' : 'text-sm leading-[18px] font-semibold mb-0.5', 'rectangle' === shape ? 'field-sizing-fixed w-full' : 'field-sizing-content text-center', backgroundColor && 'px-1.5 py-0.5'),
+        style: backgroundColor ? {
+            backgroundColor
+        } : void 0
+    }));
+EditableLabel.displayName = 'EditableLabel';
+const EmptyLabelPlaceholder = ({ onDoubleClick })=>/*#__PURE__*/ jsx("div", {
+        onDoubleClick: onDoubleClick,
+        className: "nodrag nowheel text-sm leading-[18px] font-semibold text-foreground-muted bg-transparent border border-dashed border-border-de-emp rounded-sm cursor-pointer opacity-0 transition-opacity duration-200 min-w-5 min-h-5 hover:opacity-100",
+        "aria-description": "Add node label",
+        "data-testid": "empty-label-placeholder"
+    });
 const NodeLabelInternal = ({ label = '', subLabel = '', labelTooltip, labelBackgroundColor, shape, hasBottomHandles, selected, dragging, centerAdornment, readonly, onChange })=>{
     const [isEditing, setIsEditing] = useState(false);
     const [localLabel, setLocalLabel] = useState('');
@@ -22,7 +72,7 @@ const NodeLabelInternal = ({ label = '', subLabel = '', labelTooltip, labelBackg
     const handleSave = useCallback(()=>{
         setIsEditing(false);
         setFocusTarget(null);
-        if (localLabel !== label || localSubLabel !== subLabel) onChange({
+        if (localLabel !== label || localSubLabel !== subLabel) onChange?.({
             label: localLabel,
             subLabel: localSubLabel
         });
@@ -101,11 +151,7 @@ const NodeLabelInternal = ({ label = '', subLabel = '', labelTooltip, labelBackg
         shape: shape,
         children: [
             /*#__PURE__*/ jsx(EmptyLabelPlaceholder, {
-                onDoubleClick: readonly ? void 0 : handleDoubleClick(labelInputRef),
-                className: "nodrag nowheel",
-                role: "button",
-                "aria-label": "Add node label",
-                "data-testid": "empty-label-placeholder"
+                onDoubleClick: readonly ? void 0 : handleDoubleClick(labelInputRef)
             }),
             centerAdornment
         ]
@@ -125,10 +171,8 @@ const NodeLabelInternal = ({ label = '', subLabel = '', labelTooltip, labelBackg
                         shape: shape,
                         variant: "normal",
                         backgroundColor: labelBackgroundColor,
-                        className: "nodrag nowheel",
                         placeholder: "Name",
                         rows: 'rectangle' === shape ? 1 : void 0,
-                        role: "textbox",
                         "aria-label": "Edit node name"
                     }),
                     /*#__PURE__*/ jsx(EditableLabel, {
@@ -139,24 +183,22 @@ const NodeLabelInternal = ({ label = '', subLabel = '', labelTooltip, labelBackg
                         onBlur: handleBlur,
                         shape: shape,
                         variant: "subtext",
-                        className: "nodrag nowheel",
                         placeholder: "Description",
                         rows: 'rectangle' === shape ? 2 : void 0,
-                        role: "textbox",
                         "aria-label": "Edit node description"
                     })
                 ]
             }) : /*#__PURE__*/ jsxs(ConditionalTooltip, {
                 content: labelTooltip,
                 children: [
-                    /*#__PURE__*/ jsx(BaseHeader, {
+                    /*#__PURE__*/ jsx(Header, {
                         shape: shape,
                         backgroundColor: labelBackgroundColor,
                         onDoubleClick: readonly ? void 0 : handleDoubleClick(labelInputRef),
                         "data-testid": "node-label",
                         children: label
                     }),
-                    subLabel && /*#__PURE__*/ jsx(BaseSubHeader, {
+                    subLabel && /*#__PURE__*/ jsx(SubHeader, {
                         shape: shape,
                         onDoubleClick: readonly ? void 0 : handleDoubleClick(subLabelInputRef),
                         "data-testid": "node-sublabel",
@@ -169,4 +211,4 @@ const NodeLabelInternal = ({ label = '', subLabel = '', labelTooltip, labelBackg
     });
 };
 const NodeLabel = /*#__PURE__*/ memo(NodeLabelInternal);
-export { NodeLabel };
+export { BaseTextContainer, NodeLabel };

package/dist/canvas/components/ButtonHandle/ButtonHandleStyleUtils.cjs

@@ -40,19 +40,16 @@ const external_constants_cjs_namespaceObject = require("../../constants.cjs");
 const isHorizontalEdge = (position)=>position === react_cjs_namespaceObject.Position.Top || position === react_cjs_namespaceObject.Position.Bottom;
 const isVerticalEdge = (position)=>position === react_cjs_namespaceObject.Position.Left || position === react_cjs_namespaceObject.Position.Right;
 const snapToGrid = (value, gridSize = external_constants_cjs_namespaceObject.GRID_SPACING)=>Math.round(value / gridSize) * gridSize;
-const calculateGridAlignedHandlePositions = (nodeSize, numHandles, gridSize = external_constants_cjs_namespaceObject.GRID_SPACING)=>{
+const calculateGridAlignedHandlePositions = (nodeSize, numHandles, gridSize = external_constants_cjs_namespaceObject.GRID_SPACING / 2)=>{
     if (0 === numHandles) return [];
     if (nodeSize <= 0) return [];
     const idealSpacing = nodeSize / (numHandles + 1);
-    const gridAlignedSpacing = Math.round(idealSpacing / gridSize) * gridSize;
+    const roundedSpacing = Math.round(idealSpacing / gridSize) * gridSize;
+    const gridAlignedSpacing = Math.max(gridSize, roundedSpacing);
     const totalSpan = (numHandles - 1) * gridAlignedSpacing;
     const startPosition = (nodeSize - totalSpan) / 2;
     const positions = [];
-    for(let i = 0; i < numHandles; i++){
-        const position = startPosition + i * gridAlignedSpacing;
-        const snappedPosition = snapToGrid(position, gridSize);
-        positions.push(snappedPosition);
-    }
+    for(let i = 0; i < numHandles; i++)positions.push(startPosition + i * gridAlignedSpacing);
     return positions;
 };
 const pixelToPercent = (pixelPosition, nodeSize)=>{