@uipath/apollo-react 4.6.3 → 4.8.0

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

@@ -1,12 +1,11 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import { cx } from "../../utils/index.js";
 import { Position, useReactFlow, useStore, useUpdateNodeInternals } from "../../xyflow/react.js";
 import { memo, useCallback, useEffect, useMemo, useRef, useState } from "react";
-import { DEFAULT_NODE_SIZE } from "../../constants.js";
+import { DEFAULT_NODE_SIZE, DEFAULT_RECTANGLE_NODE_WIDTH, GRID_SPACING, NODE_BORDER_SIZE, NODE_CONTAINER_RADIUS_RATIO, NODE_HEIGHT_DEFAULT, NODE_HEIGHT_FOOTER_BUTTON, NODE_HEIGHT_FOOTER_DOUBLE, NODE_HEIGHT_FOOTER_SINGLE, NODE_INNER_ICON_RATIO, NODE_INNER_RADIUS_RATIO, NODE_INNER_SHAPE_RATIO } from "../../constants.js";
 import { useNodeTypeRegistry } from "../../core/index.js";
 import { useElementValidationStatus, useNodeExecutionState } from "../../hooks/index.js";
 import { resolveAdornments } from "../../utils/adornment-resolver.js";
-import { CanvasIcon, getIcon } from "../../utils/icon-registry.js";
+import { getIcon } from "../../utils/icon-registry.js";
 import { resolveDisplay, resolveHandles } from "../../utils/manifest-resolver.js";
 import { resolveToolbar } from "../../utils/toolbar-resolver.js";
 import { useBaseCanvasMode } from "../BaseCanvas/BaseCanvasModeProvider.js";
@@ -16,10 +15,31 @@ import { useSelectionState } from "../BaseCanvas/SelectionStateContext.js";
 import { SmartHandle, SmartHandleProvider } from "../ButtonHandle/SmartHandle.js";
 import { useButtonHandles } from "../ButtonHandle/useButtonHandles.js";
 import { NodeToolbar } from "../Toolbar/index.js";
-import { BaseBadgeSlot, BaseContainer, BaseHeader, BaseIconWrapper, BaseSkeletonIcon, BaseSubHeader, BaseTextContainer } from "./BaseNode.styles.js";
+import { BaseBadgeSlot } from "./BaseNodeBadgeSlot.js";
 import { useBaseNodeOverrideConfig } from "./BaseNodeConfigContext.js";
+import { BaseContainer } from "./BaseNodeContainer.js";
+import { BaseInnerShape } from "./BaseNodeInnerShape.js";
+import { MissingManifestNode } from "./BaseNodeMissingManifest.js";
 import { NodeLabel } from "./NodeLabel.js";
-const selectIsConnecting = (state)=>!!state.connectionClickStartHandle;
+const selectIsConnecting = (state)=>!!state.connection.inProgress;
+const getContainerWidth = (shape, width)=>{
+    const defaultWidth = 'rectangle' === shape ? DEFAULT_RECTANGLE_NODE_WIDTH : DEFAULT_NODE_SIZE;
+    if (width && width !== DEFAULT_NODE_SIZE && width !== DEFAULT_RECTANGLE_NODE_WIDTH) return width;
+    return defaultWidth;
+};
+const getContainerHeight = (height, hasFooter, footerVariant)=>{
+    if (hasFooter) switch(footerVariant){
+        case 'button':
+            return NODE_HEIGHT_FOOTER_BUTTON;
+        case 'single':
+            return NODE_HEIGHT_FOOTER_SINGLE;
+        case 'double':
+            return NODE_HEIGHT_FOOTER_DOUBLE;
+        default:
+            return 'auto';
+    }
+    return height || NODE_HEIGHT_DEFAULT;
+};
 const BaseNodeComponent = (props)=>{
     const { type, data, selected, id, dragging, width, height } = props;
     const { onHandleAction: onHandleActionProp, shouldShowAddButtonFn: shouldShowAddButtonFnProp, shouldShowButtonHandleNotchesFn: shouldShowButtonHandleNotchesFnProp, toolbarConfig: toolbarConfigProp, handleConfigurations: handleConfigurationsProp, adornments: adornmentsProp, suggestionType, disabled, executionStatusOverride, labelTooltip, labelBackgroundColor, footerVariant, footerComponent, subLabelComponent, iconComponent } = useBaseNodeOverrideConfig();
@@ -28,7 +48,9 @@ const BaseNodeComponent = (props)=>{
     const containerRef = useRef(null);
     const [isHovered, setIsHovered] = useState(false);
     const [isFocused, setIsFocused] = useState(false);
-    const originalHeightRef = useRef(void 0);
+    const syncedHeightRef = useRef(void 0);
+    const baseHeightRef = useRef(DEFAULT_NODE_SIZE);
+    if (height && height !== syncedHeightRef.current) baseHeightRef.current = height;
     const executionState = useNodeExecutionState(id);
     const validationState = useElementValidationStatus(id);
     const nodeTypeRegistry = useNodeTypeRegistry();
@@ -127,13 +149,14 @@ const BaseNodeComponent = (props)=>{
         statusContext
     ]);
     const computedHeight = useMemo(()=>{
-        const handleSpacing = 32;
-        const leftHandles = handleConfigurations.filter((config)=>config.position === Position.Left && false !== config.visible).reduce((count, config)=>count + config.handles.length, 0);
-        const rightHandles = handleConfigurations.filter((config)=>config.position === Position.Right && false !== config.visible).reduce((count, config)=>count + config.handles.length, 0);
+        const handleSpacing = 2.5 * GRID_SPACING;
+        const leftHandles = handleConfigurations.filter((config)=>config.position === Position.Left && false !== config.visible).reduce((count, config)=>count + config.handles.filter((h)=>false !== h.visible).length, 0);
+        const rightHandles = handleConfigurations.filter((config)=>config.position === Position.Right && false !== config.visible).reduce((count, config)=>count + config.handles.filter((h)=>false !== h.visible).length, 0);
         const leftRightHandles = Math.max(leftHandles, rightHandles);
-        return Math.max(originalHeightRef.current ?? DEFAULT_NODE_SIZE, leftRightHandles * handleSpacing);
+        return Math.max(baseHeightRef.current, leftRightHandles * handleSpacing);
     }, [
-        handleConfigurations
+        handleConfigurations,
+        height
     ]);
     useEffect(()=>{
         updateNodeInternals(id);
@@ -143,11 +166,8 @@ const BaseNodeComponent = (props)=>{
         updateNodeInternals
     ]);
     useEffect(()=>{
-        if (!originalHeightRef.current && height) {
-            originalHeightRef.current = height;
-            return;
-        }
         if (void 0 !== computedHeight && computedHeight !== height) {
+            syncedHeightRef.current = computedHeight;
             const frameId = requestAnimationFrame(()=>{
                 updateNode(id, {
                     height: computedHeight
@@ -181,6 +201,38 @@ const BaseNodeComponent = (props)=>{
         display.subLabel
     ]);
     const displayFooter = footerComponent;
+    const hasFooter = !!displayFooter;
+    const containerWidth = getContainerWidth(displayShape, width);
+    const containerHeight = getContainerHeight(height, hasFooter, displayFooterVariant);
+    const nodeVars = useMemo(()=>{
+        const numH = 'number' == typeof containerHeight ? containerHeight : DEFAULT_NODE_SIZE;
+        const getRadius = (basis, ratio)=>'circle' === displayShape ? '50%' : hasFooter ? `${GRID_SPACING}px` : `${basis * ratio}px`;
+        const radiusBasis = Math.min(containerWidth, numH);
+        const nodeRadius = getRadius(radiusBasis, NODE_CONTAINER_RADIUS_RATIO);
+        const effectiveH = hasFooter ? DEFAULT_NODE_SIZE : numH;
+        const effectiveW = hasFooter ? DEFAULT_NODE_SIZE : containerWidth;
+        const innerBasis = Math.min(effectiveH, effectiveW);
+        const innerRadius = getRadius(innerBasis, NODE_INNER_RADIUS_RATIO);
+        const gap = innerBasis * (1 - NODE_INNER_SHAPE_RATIO);
+        const keepSquare = 'circle' === displayShape || 'rectangle' === displayShape;
+        const innerW = keepSquare ? innerBasis - gap : effectiveW - gap;
+        const innerH = keepSquare ? innerBasis - gap : effectiveH - gap;
+        return {
+            '--node-w': `${containerWidth}px`,
+            '--node-h': 'number' == typeof containerHeight ? `${containerHeight}px` : 'auto',
+            '--node-radius': nodeRadius,
+            '--node-gap': `${(gap - 2 * NODE_BORDER_SIZE) / 2}px`,
+            '--inner-w': `${innerW}px`,
+            '--inner-h': `${innerH}px`,
+            '--inner-radius': innerRadius,
+            '--icon-size': `${innerBasis * NODE_INNER_ICON_RATIO}px`
+        };
+    }, [
+        containerWidth,
+        containerHeight,
+        displayShape,
+        hasFooter
+    ]);
     const interactionState = useMemo(()=>{
         if (disabled) return 'disabled';
         if (dragging) return 'drag';
@@ -245,7 +297,8 @@ const BaseNodeComponent = (props)=>{
         handleAction,
         nodeId: id,
         selected: selected ?? false,
-        showAddButton: 'design' === mode && !multipleNodesSelected,
+        hovered: isHovered,
+        showAddButton: 'design' === mode && !multipleNodesSelected && !isConnecting,
         showNotches,
         nodeWidth: width,
         nodeHeight: height,
@@ -296,86 +349,45 @@ const BaseNodeComponent = (props)=>{
     const handleElements = useSmartHandles ? smartHandleElements : buttonHandleElements;
     if (!manifest) return /*#__PURE__*/ jsx("div", {
         ref: containerRef,
-        style: {
-            position: 'relative'
-        },
+        className: "relative",
+        style: nodeVars,
         onMouseEnter: handleMouseEnter,
         onMouseLeave: handleMouseLeave,
         onFocus: handleFocus,
         onBlur: handleBlur,
-        children: /*#__PURE__*/ jsxs(BaseContainer, {
-            selected: selected,
-            shape: "square",
-            className: interactionState,
-            interactionState: interactionState,
-            children: [
-                /*#__PURE__*/ jsx(BaseIconWrapper, {
-                    backgroundColor: "var(--canvas-error-background)",
-                    shape: "square",
-                    height: height,
-                    width: width ?? height,
-                    children: /*#__PURE__*/ jsx(CanvasIcon, {
-                        icon: "circle-alert",
-                        size: 32,
-                        color: "var(--canvas-error-icon)"
-                    })
-                }),
-                /*#__PURE__*/ jsxs(BaseTextContainer, {
-                    shape: "square",
-                    children: [
-                        /*#__PURE__*/ jsx(BaseHeader, {
-                            shape: "square",
-                            children: "Manifest not found"
-                        }),
-                        /*#__PURE__*/ jsxs(BaseSubHeader, {
-                            children: [
-                                'Node type "',
-                                type,
-                                '" is not registered'
-                            ]
-                        })
-                    ]
-                })
-            ]
+        children: /*#__PURE__*/ jsx(MissingManifestNode, {
+            type: data.nodeType,
+            isSelected: selected,
+            isHovered: isHovered,
+            interactionState: interactionState
         })
     });
     const nodeContent = /*#__PURE__*/ jsxs("div", {
         ref: containerRef,
-        style: {
-            position: 'relative'
-        },
+        className: "relative",
+        style: nodeVars,
         onMouseEnter: handleMouseEnter,
         onMouseLeave: handleMouseLeave,
         onFocus: handleFocus,
         onBlur: handleBlur,
         children: [
             /*#__PURE__*/ jsxs(BaseContainer, {
-                selected: selected,
                 shape: displayShape,
-                className: cx(executionStatus, interactionState),
+                isSelected: selected,
+                isHovered: isHovered,
                 interactionState: interactionState,
                 executionStatus: executionStatus,
                 validationStatus: validationState?.validationStatus,
                 suggestionType: suggestionType,
-                width: width,
-                height: height,
-                backgroundColor: displayBackground,
-                hasFooter: !!displayFooter,
-                footerVariant: displayFooterVariant,
-                "aria-busy": data.loading || void 0,
+                hasFooter: hasFooter,
+                background: displayBackground,
+                loading: data.loading,
                 children: [
-                    data.loading ? /*#__PURE__*/ jsx(BaseSkeletonIcon, {
-                        "data-testid": "skeleton-icon",
-                        shape: displayShape,
-                        nodeHeight: displayFooter ? void 0 : height,
-                        nodeWidth: displayFooter ? void 0 : width ?? height
-                    }) : Icon && /*#__PURE__*/ jsx(BaseIconWrapper, {
-                        shape: displayShape,
+                    (Icon || data.loading) && /*#__PURE__*/ jsx(BaseInnerShape, {
                         color: displayColor,
-                        backgroundColor: displayIconBackground,
-                        height: displayFooter ? void 0 : height,
-                        width: displayFooter ? void 0 : width ?? height,
-                        children: Icon
+                        background: displayIconBackground,
+                        loading: data.loading,
+                        children: data.loading ? null : Icon
                     }),
                     adornments?.topLeft && /*#__PURE__*/ jsx(BaseBadgeSlot, {
                         position: "top-left",
@@ -410,12 +422,7 @@ const BaseNodeComponent = (props)=>{
                         onChange: handleLabelChange
                     }),
                     displayFooter && /*#__PURE__*/ jsx("div", {
-                        style: {
-                            flexBasis: '100%',
-                            paddingTop: '2px',
-                            minWidth: 0,
-                            overflow: 'hidden'
-                        },
+                        className: "basis-full pt-0.5 min-w-0 overflow-hidden",
                         children: displayFooter
                     })
                 ]

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

@@ -0,0 +1,68 @@
+"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__, {
+    BaseBadgeSlot: ()=>BaseBadgeSlot
+});
+const jsx_runtime_namespaceObject = require("react/jsx-runtime");
+const external_react_namespaceObject = require("react");
+const external_constants_cjs_namespaceObject = require("../../constants.cjs");
+const BaseBadgeSlot = /*#__PURE__*/ (0, external_react_namespaceObject.memo)(({ position, shape, children })=>{
+    const offset = 'circle' === shape ? external_constants_cjs_namespaceObject.NODE_BADGE_INSET_CIRCLE : external_constants_cjs_namespaceObject.NODE_BADGE_INSET_SQUARE;
+    const style = {
+        width: external_constants_cjs_namespaceObject.NODE_BADGE_SIZE,
+        height: external_constants_cjs_namespaceObject.NODE_BADGE_SIZE
+    };
+    switch(position){
+        case 'top-left':
+            style.top = offset;
+            style.left = offset;
+            break;
+        case 'top-right':
+            style.top = offset;
+            style.right = offset;
+            break;
+        case 'bottom-left':
+            style.bottom = offset;
+            style.left = offset;
+            break;
+        case 'bottom-right':
+            style.bottom = offset;
+            style.right = offset;
+            break;
+    }
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+        className: "absolute flex items-center justify-center bg-transparent",
+        style: style,
+        children: children
+    });
+});
+exports.BaseBadgeSlot = __webpack_exports__.BaseBadgeSlot;
+for(var __rspack_i in __webpack_exports__)if (-1 === [
+    "BaseBadgeSlot"
+].indexOf(__rspack_i)) exports[__rspack_i] = __webpack_exports__[__rspack_i];
+Object.defineProperty(exports, '__esModule', {
+    value: true
+});

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

@@ -0,0 +1,9 @@
+import type { NodeShape } from '../../schema';
+interface BaseBadgeSlotProps {
+    position: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
+    shape?: NodeShape;
+    children: React.ReactNode;
+}
+export declare const BaseBadgeSlot: import("react").MemoExoticComponent<({ position, shape, children }: BaseBadgeSlotProps) => import("react/jsx-runtime").JSX.Element>;
+export {};
+//# sourceMappingURL=BaseNodeBadgeSlot.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"BaseNodeBadgeSlot.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/BaseNode/BaseNodeBadgeSlot.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAE9C,UAAU,kBAAkB;IAC1B,QAAQ,EAAE,UAAU,GAAG,WAAW,GAAG,aAAa,GAAG,cAAc,CAAC;IACpE,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED,eAAO,MAAM,aAAa,sEAAwC,kBAAkB,6CA0BlF,CAAC"}

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

@@ -0,0 +1,34 @@
+import { jsx } from "react/jsx-runtime";
+import { memo } from "react";
+import { NODE_BADGE_INSET_CIRCLE, NODE_BADGE_INSET_SQUARE, NODE_BADGE_SIZE } from "../../constants.js";
+const BaseBadgeSlot = /*#__PURE__*/ memo(({ position, shape, children })=>{
+    const offset = 'circle' === shape ? NODE_BADGE_INSET_CIRCLE : NODE_BADGE_INSET_SQUARE;
+    const style = {
+        width: NODE_BADGE_SIZE,
+        height: NODE_BADGE_SIZE
+    };
+    switch(position){
+        case 'top-left':
+            style.top = offset;
+            style.left = offset;
+            break;
+        case 'top-right':
+            style.top = offset;
+            style.right = offset;
+            break;
+        case 'bottom-left':
+            style.bottom = offset;
+            style.left = offset;
+            break;
+        case 'bottom-right':
+            style.bottom = offset;
+            style.right = offset;
+            break;
+    }
+    return /*#__PURE__*/ jsx("div", {
+        className: "absolute flex items-center justify-center bg-transparent",
+        style: style,
+        children: children
+    });
+});
+export { BaseBadgeSlot };

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

@@ -1,4 +1,5 @@
 import type { HandleGroupManifest } from '../../schema/node-definition';
+import type { ElementStatusValues } from '../../types/execution';
 import type { HandleActionEvent } from '../ButtonHandle/ButtonHandle';
 import type { NodeToolbarConfig } from '../Toolbar';
 import type { FooterVariant, NodeAdornments } from './BaseNode.types';
@@ -18,7 +19,7 @@ export interface BaseNodeOverrideConfig {
     adornments?: NodeAdornments;
     suggestionType?: 'add' | 'update' | 'delete';
     disabled?: boolean;
-    executionStatusOverride?: string;
+    executionStatusOverride?: ElementStatusValues;
     labelTooltip?: string;
     labelBackgroundColor?: string;
     footerVariant?: FooterVariant;

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

@@ -1 +1 @@
-{"version":3,"file":"BaseNodeConfigContext.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/BaseNode/BaseNodeConfigContext.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,8BAA8B,CAAC;AACxE,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,8BAA8B,CAAC;AACtE,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,YAAY,CAAC;AACpD,OAAO,KAAK,EAAE,aAAa,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AActE,MAAM,WAAW,sBAAsB;IAErC,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,iBAAiB,KAAK,IAAI,CAAC;IACpD,qBAAqB,CAAC,EAAE,CAAC,IAAI,EAAE;QAAE,aAAa,EAAE,OAAO,CAAC;QAAC,QAAQ,EAAE,OAAO,CAAA;KAAE,KAAK,OAAO,CAAC;IACzF,+BAA+B,CAAC,EAAE,CAAC,IAAI,EAAE;QACvC,YAAY,EAAE,OAAO,CAAC;QACtB,UAAU,EAAE,OAAO,CAAC;QACpB,SAAS,EAAE,OAAO,CAAC;KACpB,KAAK,OAAO,CAAC;IAGd,aAAa,CAAC,EAAE,iBAAiB,GAAG,IAAI,CAAC;IACzC,oBAAoB,CAAC,EAAE,mBAAmB,EAAE,CAAC;IAC7C,UAAU,CAAC,EAAE,cAAc,CAAC;IAG5B,cAAc,CAAC,EAAE,KAAK,GAAG,QAAQ,GAAG,QAAQ,CAAC;IAC7C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,uBAAuB,CAAC,EAAE,MAAM,CAAC;IAGjC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,aAAa,CAAC,EAAE,aAAa,CAAC;IAC9B,eAAe,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAClC,iBAAiB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACpC,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CACjC;AAMD,eAAO,MAAM,8BAA8B,kDAAyC,CAAC;AAMrF,wBAAgB,yBAAyB,IAAI,sBAAsB,CAElE"}
+{"version":3,"file":"BaseNodeConfigContext.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/BaseNode/BaseNodeConfigContext.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,8BAA8B,CAAC;AACxE,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AACjE,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,8BAA8B,CAAC;AACtE,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,YAAY,CAAC;AACpD,OAAO,KAAK,EAAE,aAAa,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AActE,MAAM,WAAW,sBAAsB;IAErC,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,iBAAiB,KAAK,IAAI,CAAC;IACpD,qBAAqB,CAAC,EAAE,CAAC,IAAI,EAAE;QAAE,aAAa,EAAE,OAAO,CAAC;QAAC,QAAQ,EAAE,OAAO,CAAA;KAAE,KAAK,OAAO,CAAC;IACzF,+BAA+B,CAAC,EAAE,CAAC,IAAI,EAAE;QACvC,YAAY,EAAE,OAAO,CAAC;QACtB,UAAU,EAAE,OAAO,CAAC;QACpB,SAAS,EAAE,OAAO,CAAC;KACpB,KAAK,OAAO,CAAC;IAGd,aAAa,CAAC,EAAE,iBAAiB,GAAG,IAAI,CAAC;IACzC,oBAAoB,CAAC,EAAE,mBAAmB,EAAE,CAAC;IAC7C,UAAU,CAAC,EAAE,cAAc,CAAC;IAG5B,cAAc,CAAC,EAAE,KAAK,GAAG,QAAQ,GAAG,QAAQ,CAAC;IAC7C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,uBAAuB,CAAC,EAAE,mBAAmB,CAAC;IAG9C,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,aAAa,CAAC,EAAE,aAAa,CAAC;IAC9B,eAAe,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAClC,iBAAiB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACpC,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CACjC;AAMD,eAAO,MAAM,8BAA8B,kDAAyC,CAAC;AAMrF,wBAAgB,yBAAyB,IAAI,sBAAsB,CAElE"}

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

@@ -0,0 +1,88 @@
+"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__, {
+    BaseContainer: ()=>BaseContainer,
+    getStatusBorder: ()=>getStatusBorder
+});
+const jsx_runtime_namespaceObject = require("react/jsx-runtime");
+const apollo_wind_namespaceObject = require("@uipath/apollo-wind");
+const external_react_namespaceObject = require("react");
+const getStatusBorder = (status)=>{
+    switch(status){
+        case 'InProgress':
+            return 'border-info animate-glow [--glow-color:var(--info)]';
+        case 'Completed':
+        case 'add':
+            return 'border-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, hasFooter, background, loading, children })=>{
+    const activeStatus = suggestionType ?? validationStatus ?? executionStatus;
+    const className = (0, external_react_namespaceObject.useMemo)(()=>(0, apollo_wind_namespaceObject.cn)('relative flex items-center cursor-pointer bg-surface-overlay border-2 border-border', 'w-(--node-w) h-(--node-h) rounded-(--node-radius)', 'rectangle' === shape ? 'flex-row justify-start gap-3 p-(--node-gap)' : 'flex-col justify-center', hasFooter && 'flex-wrap', 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'), [
+        shape,
+        hasFooter,
+        activeStatus,
+        isSelected,
+        isHovered,
+        interactionState
+    ]);
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+        "data-testid": "base-container",
+        "data-execution-status": executionStatus,
+        "data-interaction-state": interactionState,
+        "data-validation-status": validationStatus,
+        "data-suggestion-type": suggestionType,
+        className: className,
+        style: background ? {
+            background
+        } : void 0,
+        "aria-busy": loading || void 0,
+        children: children
+    });
+};
+exports.BaseContainer = __webpack_exports__.BaseContainer;
+exports.getStatusBorder = __webpack_exports__.getStatusBorder;
+for(var __rspack_i in __webpack_exports__)if (-1 === [
+    "BaseContainer",
+    "getStatusBorder"
+].indexOf(__rspack_i)) exports[__rspack_i] = __webpack_exports__[__rspack_i];
+Object.defineProperty(exports, '__esModule', {
+    value: true
+});

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

@@ -0,0 +1,21 @@
+import type { NodeShape } from '../../schema';
+import type { SuggestionType } from '../../types';
+import type { ElementStatusValues } from '../../types/execution';
+import { ValidationErrorSeverity } from '../../types/validation';
+export declare const getStatusBorder: (status?: ElementStatusValues | ValidationErrorSeverity | SuggestionType) => string;
+interface BaseContainerProps {
+    isSelected?: boolean;
+    isHovered?: boolean;
+    shape?: NodeShape;
+    interactionState?: string;
+    executionStatus?: ElementStatusValues;
+    validationStatus?: ValidationErrorSeverity;
+    suggestionType?: SuggestionType;
+    hasFooter?: boolean;
+    background?: string;
+    loading?: boolean;
+    children: React.ReactNode;
+}
+export declare const BaseContainer: ({ isSelected, isHovered, shape, interactionState, executionStatus, validationStatus, suggestionType, hasFooter, background, loading, children, }: BaseContainerProps) => import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=BaseNodeContainer.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"BaseNodeContainer.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/BaseNode/BaseNodeContainer.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAC9C,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAClD,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AACjE,OAAO,EAAE,uBAAuB,EAAE,MAAM,wBAAwB,CAAC;AAEjE,eAAO,MAAM,eAAe,GAC1B,SAAS,mBAAmB,GAAG,uBAAuB,GAAG,cAAc,KACtE,MAsBF,CAAC;AAEF,UAAU,kBAAkB;IAC1B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,eAAe,CAAC,EAAE,mBAAmB,CAAC;IACtC,gBAAgB,CAAC,EAAE,uBAAuB,CAAC;IAC3C,cAAc,CAAC,EAAE,cAAc,CAAC;IAChC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED,eAAO,MAAM,aAAa,GAAI,kJAY3B,kBAAkB,4CAsCpB,CAAC"}

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

@@ -0,0 +1,51 @@
+import { jsx } from "react/jsx-runtime";
+import { cn } from "@uipath/apollo-wind";
+import { useMemo } from "react";
+const getStatusBorder = (status)=>{
+    switch(status){
+        case 'InProgress':
+            return 'border-info animate-glow [--glow-color:var(--info)]';
+        case 'Completed':
+        case 'add':
+            return 'border-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, hasFooter, background, loading, children })=>{
+    const activeStatus = suggestionType ?? validationStatus ?? executionStatus;
+    const className = useMemo(()=>cn('relative flex items-center cursor-pointer bg-surface-overlay border-2 border-border', 'w-(--node-w) h-(--node-h) rounded-(--node-radius)', 'rectangle' === shape ? 'flex-row justify-start gap-3 p-(--node-gap)' : 'flex-col justify-center', hasFooter && 'flex-wrap', 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'), [
+        shape,
+        hasFooter,
+        activeStatus,
+        isSelected,
+        isHovered,
+        interactionState
+    ]);
+    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: className,
+        style: background ? {
+            background
+        } : void 0,
+        "aria-busy": loading || void 0,
+        children: children
+    });
+};
+export { BaseContainer, getStatusBorder };

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

@@ -0,0 +1,49 @@
+"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_react_namespaceObject = require("react");
+const BaseInnerShape = /*#__PURE__*/ (0, external_react_namespaceObject.memo)(({ loading, color, background, children })=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+        className: " flex items-center justify-center overflow-hidden bg-surface text-foreground  w-(--inner-w) h-(--inner-h) rounded-(--inner-radius)  [&>svg]:w-(--icon-size) [&>svg]:h-(--icon-size)  [&>img]:w-(--icon-size) [&>img]:h-(--icon-size) [&>img]:object-contain ",
+        style: color || background ? {
+            color,
+            background
+        } : void 0,
+        children: loading ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(apollo_wind_namespaceObject.Skeleton, {
+            "data-testid": "skeleton-icon",
+            className: "rounded-lg w-(--icon-size) h-(--icon-size)"
+        }) : 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,9 @@
+interface BaseInnerShapeProps {
+    loading?: boolean;
+    color?: string;
+    background?: string;
+    children: React.ReactNode;
+}
+export declare const BaseInnerShape: import("react").MemoExoticComponent<({ loading, color, background, 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":"AAGA,UAAU,mBAAmB;IAC3B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED,eAAO,MAAM,cAAc,iFACkB,mBAAmB,6CAoB/D,CAAC"}

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

@@ -0,0 +1,15 @@
+import { jsx } from "react/jsx-runtime";
+import { Skeleton } from "@uipath/apollo-wind";
+import { memo } from "react";
+const BaseInnerShape = /*#__PURE__*/ memo(({ loading, color, background, children })=>/*#__PURE__*/ jsx("div", {
+        className: " flex items-center justify-center overflow-hidden bg-surface text-foreground  w-(--inner-w) h-(--inner-h) rounded-(--inner-radius)  [&>svg]:w-(--icon-size) [&>svg]:h-(--icon-size)  [&>img]:w-(--icon-size) [&>img]:h-(--icon-size) [&>img]:object-contain ",
+        style: color || background ? {
+            color,
+            background
+        } : void 0,
+        children: loading ? /*#__PURE__*/ jsx(Skeleton, {
+            "data-testid": "skeleton-icon",
+            className: "rounded-lg w-(--icon-size) h-(--icon-size)"
+        }) : children
+    }));
+export { BaseInnerShape };