@uipath/apollo-react 3.51.2 → 3.52.0

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

@@ -391,8 +391,14 @@ const BaseNodeComponent = (props)=>{
                 backgroundColor: displayBackground,
                 hasFooter: !!displayFooter,
                 footerVariant: displayFooterVariant,
+                "aria-busy": data.loading || void 0,
                 children: [
-                    Icon && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_BaseNode_styles_cjs_namespaceObject.BaseIconWrapper, {
+                    data.loading ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_BaseNode_styles_cjs_namespaceObject.BaseSkeletonIcon, {
+                        variant: "rectangle",
+                        shape: displayShape,
+                        nodeHeight: displayFooter ? void 0 : height,
+                        nodeWidth: displayFooter ? void 0 : width ?? height
+                    }) : Icon && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_BaseNode_styles_cjs_namespaceObject.BaseIconWrapper, {
                         shape: displayShape,
                         color: displayColor,
                         backgroundColor: displayIconBackground,

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

@@ -1 +1 @@
-{"version":3,"file":"BaseNode.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/BaseNode/BaseNode.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,IAAI,EAAE,SAAS,EAAkB,MAAM,0CAA0C,CAAC;AAkChG,OAAO,KAAK,EACV,YAAY,EAIb,MAAM,kBAAkB,CAAC;AA2gB1B,eAAO,MAAM,QAAQ,8CArgBa,SAAS,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,6CAqgBhB,CAAC"}
+{"version":3,"file":"BaseNode.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/BaseNode/BaseNode.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,IAAI,EAAE,SAAS,EAAkB,MAAM,0CAA0C,CAAC;AAmChG,OAAO,KAAK,EACV,YAAY,EAIb,MAAM,kBAAkB,CAAC;AAuhB1B,eAAO,MAAM,QAAQ,8CAjhBa,SAAS,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,6CAihBhB,CAAC"}

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

@@ -17,7 +17,7 @@ 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, BaseSubHeader, BaseTextContainer } from "./BaseNode.styles.js";
+import { BaseBadgeSlot, BaseContainer, BaseHeader, BaseIconWrapper, BaseSkeletonIcon, BaseSubHeader, BaseTextContainer } from "./BaseNode.styles.js";
 import { useBaseNodeOverrideConfig } from "./BaseNodeConfigContext.js";
 import { NodeLabel } from "./NodeLabel.js";
 const selectIsConnecting = (state)=>!!state.connectionClickStartHandle;
@@ -363,8 +363,14 @@ const BaseNodeComponent = (props)=>{
                 backgroundColor: displayBackground,
                 hasFooter: !!displayFooter,
                 footerVariant: displayFooterVariant,
+                "aria-busy": data.loading || void 0,
                 children: [
-                    Icon && /*#__PURE__*/ jsx(BaseIconWrapper, {
+                    data.loading ? /*#__PURE__*/ jsx(BaseSkeletonIcon, {
+                        variant: "rectangle",
+                        shape: displayShape,
+                        nodeHeight: displayFooter ? void 0 : height,
+                        nodeWidth: displayFooter ? void 0 : width ?? height
+                    }) : Icon && /*#__PURE__*/ jsx(BaseIconWrapper, {
                         shape: displayShape,
                         color: displayColor,
                         backgroundColor: displayIconBackground,

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

@@ -25,6 +25,7 @@ var __webpack_exports__ = {};
 __webpack_require__.r(__webpack_exports__);
 __webpack_require__.d(__webpack_exports__, {
     CustomizedSizes: ()=>CustomizedSizes,
+    Loading: ()=>Loading,
     ValidationStates: ()=>ValidationStates,
     Default: ()=>Default,
     default: ()=>BaseNode_stories,
@@ -267,6 +268,34 @@ const sampleManifest = {
                     ]
                 }
             ]
+        },
+        {
+            nodeType: 'uipath.control-flow.terminate',
+            version: '1.0.0',
+            category: 'control',
+            tags: [
+                'control',
+                'terminate'
+            ],
+            sortOrder: 6,
+            display: {
+                label: 'Terminate',
+                icon: 'git-branch',
+                shape: 'circle'
+            },
+            handleConfiguration: [
+                {
+                    position: 'right',
+                    handles: [
+                        {
+                            id: 'out',
+                            type: 'source',
+                            handleType: 'output',
+                            label: 'Output'
+                        }
+                    ]
+                }
+            ]
         }
     ]
 };
@@ -821,6 +850,65 @@ function DynamicHandlesStory() {
         ]
     });
 }
+function createLoadingGrid() {
+    const shapes = [
+        {
+            type: 'uipath.blank-node',
+            shape: 'square',
+            label: 'Square'
+        },
+        {
+            type: 'uipath.control-flow.terminate',
+            shape: 'circle',
+            label: 'Circle'
+        },
+        {
+            type: 'uipath.agent',
+            shape: 'rectangle',
+            label: 'Rectangle'
+        }
+    ];
+    return shapes.map((config, index)=>(0, external_storybook_utils_index_cjs_namespaceObject.createNode)({
+            id: `loading-${config.shape}`,
+            type: config.type,
+            position: {
+                x: 96 + 192 * index,
+                y: 96
+            },
+            data: {
+                nodeType: config.type,
+                version: '1.0.0',
+                loading: true,
+                display: {
+                    label: config.label,
+                    subLabel: 'Loading...',
+                    shape: config.shape
+                }
+            }
+        }));
+}
+function LoadingStory() {
+    const initialNodes = (0, external_react_namespaceObject.useMemo)(()=>createLoadingGrid(), []);
+    const { canvasProps } = (0, external_storybook_utils_index_cjs_namespaceObject.useCanvasStory)({
+        initialNodes
+    });
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(external_BaseCanvas_index_cjs_namespaceObject.BaseCanvas, {
+        ...canvasProps,
+        mode: "design",
+        children: [
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(react_cjs_namespaceObject.Panel, {
+                position: "bottom-right",
+                children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_CanvasPositionControls_cjs_namespaceObject.CanvasPositionControls, {
+                    translations: external_types_cjs_namespaceObject.DefaultCanvasTranslations
+                })
+            }),
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_storybook_utils_index_cjs_namespaceObject.StoryInfoPanel, {
+                title: "Loading State",
+                description: "Nodes in skeleton loading state for circle, square, and rectangle shapes."
+            })
+        ]
+    });
+}
 const Default = {
     name: 'Default',
     render: ()=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(DefaultStory, {})
@@ -939,15 +1027,21 @@ const ValidationStates = {
     ],
     render: ()=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(ValidationStatesStory, {})
 };
+const Loading = {
+    name: 'Loading',
+    render: ()=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(LoadingStory, {})
+};
 exports.CustomizedSizes = __webpack_exports__.CustomizedSizes;
 exports.Default = __webpack_exports__.Default;
 exports.DynamicHandles = __webpack_exports__.DynamicHandles;
+exports.Loading = __webpack_exports__.Loading;
 exports.ValidationStates = __webpack_exports__.ValidationStates;
 exports["default"] = __webpack_exports__["default"];
 for(var __rspack_i in __webpack_exports__)if (-1 === [
     "CustomizedSizes",
     "Default",
     "DynamicHandles",
+    "Loading",
     "ValidationStates",
     "default"
 ].indexOf(__rspack_i)) exports[__rspack_i] = __webpack_exports__[__rspack_i];

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

@@ -7,4 +7,5 @@ export declare const Default: Story;
 export declare const CustomizedSizes: Story;
 export declare const DynamicHandles: Story;
 export declare const ValidationStates: Story;
+export declare const Loading: Story;
 //# sourceMappingURL=BaseNode.stories.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"BaseNode.stories.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/BaseNode/BaseNode.stories.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAmBvD,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAuLrD,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,YAAY,CAqB5B,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAmZnC,eAAO,MAAM,OAAO,EAAE,KAGrB,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,KAG7B,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,KAG5B,CAAC;AAmEF,eAAO,MAAM,gBAAgB,EAAE,KAuC9B,CAAC"}
+{"version":3,"file":"BaseNode.stories.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/BaseNode/BaseNode.stories.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAmBvD,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAyMrD,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,YAAY,CAqB5B,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAkcnC,eAAO,MAAM,OAAO,EAAE,KAGrB,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,KAG7B,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,KAG5B,CAAC;AAmEF,eAAO,MAAM,gBAAgB,EAAE,KAuC9B,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,KAGrB,CAAC"}

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

@@ -235,6 +235,34 @@ const sampleManifest = {
                     ]
                 }
             ]
+        },
+        {
+            nodeType: 'uipath.control-flow.terminate',
+            version: '1.0.0',
+            category: 'control',
+            tags: [
+                'control',
+                'terminate'
+            ],
+            sortOrder: 6,
+            display: {
+                label: 'Terminate',
+                icon: 'git-branch',
+                shape: 'circle'
+            },
+            handleConfiguration: [
+                {
+                    position: 'right',
+                    handles: [
+                        {
+                            id: 'out',
+                            type: 'source',
+                            handleType: 'output',
+                            label: 'Output'
+                        }
+                    ]
+                }
+            ]
         }
     ]
 };
@@ -789,6 +817,65 @@ function DynamicHandlesStory() {
         ]
     });
 }
+function createLoadingGrid() {
+    const shapes = [
+        {
+            type: 'uipath.blank-node',
+            shape: 'square',
+            label: 'Square'
+        },
+        {
+            type: 'uipath.control-flow.terminate',
+            shape: 'circle',
+            label: 'Circle'
+        },
+        {
+            type: 'uipath.agent',
+            shape: 'rectangle',
+            label: 'Rectangle'
+        }
+    ];
+    return shapes.map((config, index)=>createNode({
+            id: `loading-${config.shape}`,
+            type: config.type,
+            position: {
+                x: 96 + 192 * index,
+                y: 96
+            },
+            data: {
+                nodeType: config.type,
+                version: '1.0.0',
+                loading: true,
+                display: {
+                    label: config.label,
+                    subLabel: 'Loading...',
+                    shape: config.shape
+                }
+            }
+        }));
+}
+function LoadingStory() {
+    const initialNodes = useMemo(()=>createLoadingGrid(), []);
+    const { canvasProps } = useCanvasStory({
+        initialNodes
+    });
+    return /*#__PURE__*/ jsxs(BaseCanvas, {
+        ...canvasProps,
+        mode: "design",
+        children: [
+            /*#__PURE__*/ jsx(Panel, {
+                position: "bottom-right",
+                children: /*#__PURE__*/ jsx(CanvasPositionControls, {
+                    translations: DefaultCanvasTranslations
+                })
+            }),
+            /*#__PURE__*/ jsx(StoryInfoPanel, {
+                title: "Loading State",
+                description: "Nodes in skeleton loading state for circle, square, and rectangle shapes."
+            })
+        ]
+    });
+}
 const Default = {
     name: 'Default',
     render: ()=>/*#__PURE__*/ jsx(DefaultStory, {})
@@ -907,4 +994,8 @@ const ValidationStates = {
     ],
     render: ()=>/*#__PURE__*/ jsx(ValidationStatesStory, {})
 };
-export { CustomizedSizes, Default, DynamicHandles, ValidationStates, BaseNode_stories as default };
+const Loading = {
+    name: 'Loading',
+    render: ()=>/*#__PURE__*/ jsx(LoadingStory, {})
+};
+export { CustomizedSizes, Default, DynamicHandles, Loading, ValidationStates, BaseNode_stories as default };

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

@@ -37,19 +37,35 @@ __webpack_require__.d(__webpack_exports__, {
     BaseContainer: ()=>BaseContainer,
     BaseTextContainer: ()=>BaseTextContainer,
     BaseBadgeSlot: ()=>BaseBadgeSlot,
+    EditableLabel: ()=>EditableLabel,
     BaseSubHeader: ()=>BaseSubHeader,
     EmptyLabelPlaceholder: ()=>EmptyLabelPlaceholder,
-    EditableLabel: ()=>EditableLabel,
-    BaseHeader: ()=>BaseHeader
+    BaseHeader: ()=>BaseHeader,
+    BaseSkeletonIcon: ()=>BaseSkeletonIcon
 });
 const react_namespaceObject = require("@emotion/react");
 const styled_namespaceObject = require("@emotion/styled");
 var styled_default = /*#__PURE__*/ __webpack_require__.n(styled_namespaceObject);
+const index_cjs_namespaceObject = require("../../../material/components/ap-skeleton/index.cjs");
 const GRID_UNIT = 16;
 const NODE_HEIGHT_DEFAULT = 6 * GRID_UNIT;
 const NODE_HEIGHT_FOOTER_BUTTON = 9 * GRID_UNIT;
 const NODE_HEIGHT_FOOTER_SINGLE = 10 * GRID_UNIT;
 const NODE_HEIGHT_FOOTER_DOUBLE = 11 * GRID_UNIT;
+const getIconDimensions = (shape, nodeHeight, nodeWidth)=>{
+    const height = nodeHeight ?? 96;
+    const width = nodeWidth ?? 96;
+    const widthDimension = height !== width && 'rectangle' === shape ? height : width;
+    const widthScaleFactor = widthDimension / 96;
+    const iconWidth = 72 * widthScaleFactor;
+    const heightScaleFactor = height / 96;
+    const isExpandable = height !== width && 'rectangle' !== shape;
+    const iconHeight = isExpandable ? 84 * heightScaleFactor : 72 * heightScaleFactor;
+    return {
+        iconWidth,
+        iconHeight
+    };
+};
 const pulseAnimation = (cssVar)=>(0, react_namespaceObject.keyframes)`
   0% {
     box-shadow: 0 0 0 0 color-mix(in srgb, var(${cssVar}) 20%, transparent);
@@ -230,15 +246,13 @@ const BaseContainer = styled_default().div`
 }}
 `;
 const BaseIconWrapper = styled_default().div`
-  width: ${({ height, width, shape })=>{
-    const dimension = height !== width && 'rectangle' === shape ? height : width;
-    const scaleFactor = dimension ? dimension / 96 : 1;
-    return `${72 * scaleFactor}px`;
-}};
-  height: ${({ height, width, shape })=>{
-    const scaleFactor = height ? height / 96 : 1;
-    return height !== width && 'rectangle' !== shape ? `${84 * scaleFactor}px` : `${72 * scaleFactor}px`;
-}};
+  ${({ height, width, shape })=>{
+    const { iconWidth, iconHeight } = getIconDimensions(shape, height, width);
+    return (0, react_namespaceObject.css)`
+      width: ${iconWidth}px;
+      height: ${iconHeight}px;
+    `;
+}}
   display: flex;
   align-items: center;
   justify-content: center;
@@ -399,10 +413,26 @@ const BaseBadgeSlot = styled_default().div`
     }
 }}
 `;
+const BaseSkeletonIcon = styled_default()(index_cjs_namespaceObject.ApSkeleton, {
+    shouldForwardProp: (prop)=>'shape' !== prop && 'nodeHeight' !== prop && 'nodeWidth' !== prop
+})`
+  flex-grow: 0;
+  flex-shrink: 0;
+  ${({ shape, nodeHeight, nodeWidth })=>{
+    const { iconWidth, iconHeight } = getIconDimensions(shape, nodeHeight, nodeWidth);
+    const isCircle = 'circle' === shape;
+    return (0, react_namespaceObject.css)`
+      width: ${iconWidth}px;
+      height: ${iconHeight}px;
+      border-radius: ${isCircle ? '50%' : '8px'};
+    `;
+}}
+`;
 exports.BaseBadgeSlot = __webpack_exports__.BaseBadgeSlot;
 exports.BaseContainer = __webpack_exports__.BaseContainer;
 exports.BaseHeader = __webpack_exports__.BaseHeader;
 exports.BaseIconWrapper = __webpack_exports__.BaseIconWrapper;
+exports.BaseSkeletonIcon = __webpack_exports__.BaseSkeletonIcon;
 exports.BaseSubHeader = __webpack_exports__.BaseSubHeader;
 exports.BaseTextContainer = __webpack_exports__.BaseTextContainer;
 exports.EditableLabel = __webpack_exports__.EditableLabel;
@@ -412,6 +442,7 @@ for(var __rspack_i in __webpack_exports__)if (-1 === [
     "BaseContainer",
     "BaseHeader",
     "BaseIconWrapper",
+    "BaseSkeletonIcon",
     "BaseSubHeader",
     "BaseTextContainer",
     "EditableLabel",

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

@@ -65,4 +65,11 @@ export declare const BaseBadgeSlot: import("@emotion/styled").StyledComponent<{
     position: "top-left" | "top-right" | "bottom-left" | "bottom-right";
     shape?: NodeShape;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const BaseSkeletonIcon: import("@emotion/styled").StyledComponent<import("../../..").ApSkeletonProps & import("react").RefAttributes<HTMLDivElement> & {
+    theme?: import("@emotion/react").Theme;
+} & {
+    shape?: NodeShape;
+    nodeHeight?: number;
+    nodeWidth?: number;
+}, {}, {}>;
 //# sourceMappingURL=BaseNode.styles.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"BaseNode.styles.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/BaseNode/BaseNode.styles.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAC9C,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAyItD,eAAO,MAAM,aAAa;;;;eACb,OAAO;sBACA,MAAM;YAChB,SAAS;sBACC,MAAM;uBACL,MAAM;uBACN,MAAM;qBACR,MAAM;YACf,MAAM;aACL,MAAM;gBACH,OAAO;oBACH,aAAa;yGAuE9B,CAAC;AAEF,eAAO,MAAM,eAAe;;;;YAClB,MAAM;sBACI,MAAM;YAChB,SAAS;aACR,MAAM;YACP,MAAM;yGAgDf,CAAC;AAEF,eAAO,MAAM,iBAAiB;;;;uBAAmC,OAAO;YAAU,SAAS;yGAiC1F,CAAC;AAEF,eAAO,MAAM,UAAU;;;;YAAwB,SAAS;sBAAoB,MAAM;yGAwBjF,CAAC;AAEF,eAAO,MAAM,aAAa;;;;YAAwB,SAAS;yGAe1D,CAAC;AAEF,eAAO,MAAM,aAAa;;;;YAChB,SAAS;sBACC,MAAM;aACf,QAAQ,GAAG,SAAS;2HA+B9B,CAAC;AAEF,eAAO,MAAM,qBAAqB;;;yGAkBjC,CAAC;AAEF,eAAO,MAAM,aAAa;;;;cACd,UAAU,GAAG,WAAW,GAAG,aAAa,GAAG,cAAc;YAC3D,SAAS;yGAsBlB,CAAC"}
+{"version":3,"file":"BaseNode.styles.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/BaseNode/BaseNode.styles.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAC9C,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAkKtD,eAAO,MAAM,aAAa;;;;eACb,OAAO;sBACA,MAAM;YAChB,SAAS;sBACC,MAAM;uBACL,MAAM;uBACN,MAAM;qBACR,MAAM;YACf,MAAM;aACL,MAAM;gBACH,OAAO;oBACH,aAAa;yGAuE9B,CAAC;AAEF,eAAO,MAAM,eAAe;;;;YAClB,MAAM;sBACI,MAAM;YAChB,SAAS;aACR,MAAM;YACP,MAAM;yGA0Cf,CAAC;AAEF,eAAO,MAAM,iBAAiB;;;;uBAAmC,OAAO;YAAU,SAAS;yGAiC1F,CAAC;AAEF,eAAO,MAAM,UAAU;;;;YAAwB,SAAS;sBAAoB,MAAM;yGAwBjF,CAAC;AAEF,eAAO,MAAM,aAAa;;;;YAAwB,SAAS;yGAe1D,CAAC;AAEF,eAAO,MAAM,aAAa;;;;YAChB,SAAS;sBACC,MAAM;aACf,QAAQ,GAAG,SAAS;2HA+B9B,CAAC;AAEF,eAAO,MAAM,qBAAqB;;;yGAkBjC,CAAC;AAEF,eAAO,MAAM,aAAa;;;;cACd,UAAU,GAAG,WAAW,GAAG,aAAa,GAAG,cAAc;YAC3D,SAAS;yGAsBlB,CAAC;AAKF,eAAO,MAAM,gBAAgB;;;YAGnB,SAAS;iBACJ,MAAM;gBACP,MAAM;UAcnB,CAAC"}

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

@@ -1,10 +1,25 @@
 import { css, keyframes } from "@emotion/react";
 import styled from "@emotion/styled";
+import { ApSkeleton } from "../../../material/components/ap-skeleton/index.js";
 const GRID_UNIT = 16;
 const NODE_HEIGHT_DEFAULT = 6 * GRID_UNIT;
 const NODE_HEIGHT_FOOTER_BUTTON = 9 * GRID_UNIT;
 const NODE_HEIGHT_FOOTER_SINGLE = 10 * GRID_UNIT;
 const NODE_HEIGHT_FOOTER_DOUBLE = 11 * GRID_UNIT;
+const getIconDimensions = (shape, nodeHeight, nodeWidth)=>{
+    const height = nodeHeight ?? 96;
+    const width = nodeWidth ?? 96;
+    const widthDimension = height !== width && 'rectangle' === shape ? height : width;
+    const widthScaleFactor = widthDimension / 96;
+    const iconWidth = 72 * widthScaleFactor;
+    const heightScaleFactor = height / 96;
+    const isExpandable = height !== width && 'rectangle' !== shape;
+    const iconHeight = isExpandable ? 84 * heightScaleFactor : 72 * heightScaleFactor;
+    return {
+        iconWidth,
+        iconHeight
+    };
+};
 const pulseAnimation = (cssVar)=>keyframes`
   0% {
     box-shadow: 0 0 0 0 color-mix(in srgb, var(${cssVar}) 20%, transparent);
@@ -185,15 +200,13 @@ const BaseContainer = styled.div`
 }}
 `;
 const BaseIconWrapper = styled.div`
-  width: ${({ height, width, shape })=>{
-    const dimension = height !== width && 'rectangle' === shape ? height : width;
-    const scaleFactor = dimension ? dimension / 96 : 1;
-    return `${72 * scaleFactor}px`;
-}};
-  height: ${({ height, width, shape })=>{
-    const scaleFactor = height ? height / 96 : 1;
-    return height !== width && 'rectangle' !== shape ? `${84 * scaleFactor}px` : `${72 * scaleFactor}px`;
-}};
+  ${({ height, width, shape })=>{
+    const { iconWidth, iconHeight } = getIconDimensions(shape, height, width);
+    return css`
+      width: ${iconWidth}px;
+      height: ${iconHeight}px;
+    `;
+}}
   display: flex;
   align-items: center;
   justify-content: center;
@@ -354,4 +367,19 @@ const BaseBadgeSlot = styled.div`
     }
 }}
 `;
-export { BaseBadgeSlot, BaseContainer, BaseHeader, BaseIconWrapper, BaseSubHeader, BaseTextContainer, EditableLabel, EmptyLabelPlaceholder };
+const BaseSkeletonIcon = styled(ApSkeleton, {
+    shouldForwardProp: (prop)=>'shape' !== prop && 'nodeHeight' !== prop && 'nodeWidth' !== prop
+})`
+  flex-grow: 0;
+  flex-shrink: 0;
+  ${({ shape, nodeHeight, nodeWidth })=>{
+    const { iconWidth, iconHeight } = getIconDimensions(shape, nodeHeight, nodeWidth);
+    const isCircle = 'circle' === shape;
+    return css`
+      width: ${iconWidth}px;
+      height: ${iconHeight}px;
+      border-radius: ${isCircle ? '50%' : '8px'};
+    `;
+}}
+`;
+export { BaseBadgeSlot, BaseContainer, BaseHeader, BaseIconWrapper, BaseSkeletonIcon, BaseSubHeader, BaseTextContainer, EditableLabel, EmptyLabelPlaceholder };

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

@@ -16,6 +16,7 @@ export interface BaseNodeData extends Record<string, unknown> {
     };
     useSmartHandles?: boolean;
     isCollapsed?: boolean;
+    loading?: boolean;
 }
 export interface NodeAdornments {
     topLeft?: React.ReactNode;

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

@@ -1 +1 @@
-{"version":3,"file":"BaseNode.types.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/BaseNode/BaseNode.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAC9C,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,wBAAwB,CAAC;AAE9D,MAAM,MAAM,aAAa,GAAG,MAAM,GAAG,QAAQ,GAAG,QAAQ,GAAG,QAAQ,CAAC;AAEpE,MAAM,WAAW,YAAa,SAAQ,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC;IAC3D,OAAO,CAAC,EAAE;QACR,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,QAAQ,CAAC,EAAE,MAAM,CAAC;QAClB,KAAK,CAAC,EAAE,SAAS,CAAC;QAClB,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,UAAU,CAAC,EAAE,MAAM,CAAC;QACpB,IAAI,CAAC,EAAE,MAAM,CAAC;QACd,cAAc,CAAC,EAAE,MAAM,CAAC;QACxB,kBAAkB,CAAC,EAAE,MAAM,CAAC;QAC5B,SAAS,CAAC,EAAE,MAAM,CAAC;KACpB,CAAC;IAOF,eAAe,CAAC,EAAE,OAAO,CAAC;IAM1B,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAED,MAAM,WAAW,cAAc;IAC7B,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC7B,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC/B;AAED,MAAM,WAAW,iBAAiB;IAChC,MAAM,EAAE,MAAM,CAAC;IACf,cAAc,CAAC,EAAE,cAAc,CAAC;IAChC,eAAe,CAAC,EAAE,eAAe,CAAC;IAClC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB"}
+{"version":3,"file":"BaseNode.types.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/BaseNode/BaseNode.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAC9C,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,wBAAwB,CAAC;AAE9D,MAAM,MAAM,aAAa,GAAG,MAAM,GAAG,QAAQ,GAAG,QAAQ,GAAG,QAAQ,CAAC;AAEpE,MAAM,WAAW,YAAa,SAAQ,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC;IAC3D,OAAO,CAAC,EAAE;QACR,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,QAAQ,CAAC,EAAE,MAAM,CAAC;QAClB,KAAK,CAAC,EAAE,SAAS,CAAC;QAClB,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,UAAU,CAAC,EAAE,MAAM,CAAC;QACpB,IAAI,CAAC,EAAE,MAAM,CAAC;QACd,cAAc,CAAC,EAAE,MAAM,CAAC;QACxB,kBAAkB,CAAC,EAAE,MAAM,CAAC;QAC5B,SAAS,CAAC,EAAE,MAAM,CAAC;KACpB,CAAC;IAOF,eAAe,CAAC,EAAE,OAAO,CAAC;IAM1B,WAAW,CAAC,EAAE,OAAO,CAAC;IAOtB,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,MAAM,WAAW,cAAc;IAC7B,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC7B,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC/B;AAED,MAAM,WAAW,iBAAiB;IAChC,MAAM,EAAE,MAAM,CAAC;IACf,cAAc,CAAC,EAAE,cAAc,CAAC;IAChC,eAAe,CAAC,EAAE,eAAe,CAAC;IAClC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uipath/apollo-react",
-  "version": "3.51.2",
+  "version": "3.52.0",
   "description": "Apollo Design System - React component library with Material UI theming",
   "repository": {
     "type": "git",
@@ -201,7 +201,7 @@
     "zod": "^4.3.5",
     "zustand": "^5.0.9",
     "@uipath/apollo-core": "5.7.1",
-    "@uipath/apollo-wind": "0.13.0"
+    "@uipath/apollo-wind": "0.14.0"
   },
   "devDependencies": {
     "@lingui/cli": "^5.6.1",