@uipath/apollo-react 3.53.0 → 3.54.0-pr354.17cbb75

package/dist/canvas/components/Toolbox/Toolbox.cjs

@@ -30,6 +30,7 @@ const jsx_runtime_namespaceObject = require("react/jsx-runtime");
 const index_cjs_namespaceObject = require("../../hooks/index.cjs");
 const external_layouts_index_cjs_namespaceObject = require("../../layouts/index.cjs");
 const external_react_namespaceObject = require("react");
+const external_react_window_namespaceObject = require("react-window");
 const external_Header_cjs_namespaceObject = require("./Header.cjs");
 const external_ListView_cjs_namespaceObject = require("./ListView.cjs");
 const external_SearchBox_cjs_namespaceObject = require("./SearchBox.cjs");
@@ -71,13 +72,48 @@ function Toolbox({ onClose, onBack, onItemSelect, onSearch, onItemHover, title,
     const [isTransitioning, setIsTransitioning] = (0, external_react_namespaceObject.useState)(false);
     const [animationDirection, setAnimationDirection] = (0, external_react_namespaceObject.useState)('forward');
     const navigationStack = (0, index_cjs_namespaceObject.useNavigationStack)();
+    const [activeIndex, setActiveIndex] = (0, external_react_namespaceObject.useState)(-1);
     const containerRef = (0, external_react_namespaceObject.useRef)(null);
     const transitionTimeoutRef = (0, external_react_namespaceObject.useRef)(void 0);
     const searchIdRef = (0, external_react_namespaceObject.useRef)(0);
     const initialItemsRef = (0, external_react_namespaceObject.useRef)(initialItems);
+    const listRef = (0, external_react_window_namespaceObject.useListRef)(null);
+    const searchInputRef = (0, external_react_namespaceObject.useRef)(null);
     const isSearching = (0, external_react_namespaceObject.useMemo)(()=>search.length > 0, [
         search
     ]);
+    const displayedItems = (0, external_react_namespaceObject.useMemo)(()=>isSearching && !isSearchingInitialItems ? searchedItems : items, [
+        isSearching,
+        isSearchingInitialItems,
+        searchedItems,
+        items
+    ]);
+    const renderedItems = (0, external_react_namespaceObject.useMemo)(()=>(0, external_ListView_cjs_namespaceObject.buildRenderedItems)(displayedItems, !isSearching), [
+        displayedItems,
+        isSearching
+    ]);
+    const getNextSelectableIndex = (0, external_react_namespaceObject.useCallback)((currentIndex, direction)=>{
+        let next = currentIndex + direction;
+        while(next >= 0 && next < renderedItems.length){
+            if (renderedItems[next]?.type === 'item') return next;
+            next += direction;
+        }
+        return -1;
+    }, [
+        renderedItems
+    ]);
+    const getFirstSelectableIndex = (0, external_react_namespaceObject.useCallback)(()=>{
+        for(let i = 0; i < renderedItems.length; i++)if (renderedItems[i]?.type === 'item') return i;
+        return -1;
+    }, [
+        renderedItems
+    ]);
+    const getLastSelectableIndex = (0, external_react_namespaceObject.useCallback)(()=>{
+        for(let i = renderedItems.length - 1; i >= 0; i--)if (renderedItems[i]?.type === 'item') return i;
+        return -1;
+    }, [
+        renderedItems
+    ]);
     const startTransition = (0, external_react_namespaceObject.useCallback)((direction)=>{
         if (transitionTimeoutRef.current) clearTimeout(transitionTimeoutRef.current);
         setIsTransitioning(true);
@@ -86,11 +122,21 @@ function Toolbox({ onClose, onBack, onItemSelect, onSearch, onItemHover, title,
             setIsTransitioning(false);
         }, TRANSITION_DURATION);
     }, []);
+    const navigateToIndex = (0, external_react_namespaceObject.useCallback)((index)=>{
+        setActiveIndex(index);
+        if (index >= 0) listRef.current?.scrollToRow({
+            index,
+            align: 'auto'
+        });
+    }, [
+        listRef
+    ]);
     const clearSearch = (0, external_react_namespaceObject.useCallback)(()=>{
         setSearch('');
         setSearchedItems([]);
         setSearchLoading(false);
         setIsSearchingInitialItems(true);
+        setActiveIndex(-1);
     }, []);
     const handleSearch = (0, external_react_namespaceObject.useCallback)(async (query)=>{
         if (!query.trim()) {
@@ -101,6 +147,7 @@ function Toolbox({ onClose, onBack, onItemSelect, onSearch, onItemHover, title,
             return;
         }
         setSearch(query);
+        setActiveIndex(-1);
         searchIdRef.current += 1;
         const currentRequestId = searchIdRef.current;
         setSearchLoading(true);
@@ -121,6 +168,7 @@ function Toolbox({ onClose, onBack, onItemSelect, onSearch, onItemHover, title,
     ]);
     const handleBackTransition = (0, external_react_namespaceObject.useCallback)(()=>{
         startTransition('back');
+        setActiveIndex(-1);
         const previousState = navigationStack.pop();
         if (previousState) {
             setItems(previousState.data.items);
@@ -149,6 +197,7 @@ function Toolbox({ onClose, onBack, onItemSelect, onSearch, onItemHover, title,
         setItems(nestedItems);
         setCurrentParentItem(item);
         clearSearch();
+        setActiveIndex(-1);
         startTransition('forward');
         setChildrenLoading(false);
     }, [
@@ -206,6 +255,65 @@ function Toolbox({ onClose, onBack, onItemSelect, onSearch, onItemHover, title,
     }, [
         items
     ]);
+    const activeDescendantId = (0, external_react_namespaceObject.useMemo)(()=>{
+        if (activeIndex < 0) return;
+        const renderItem = renderedItems[activeIndex];
+        if (renderItem?.type === 'item') return `toolbox-item-${renderItem.item.id}`;
+    }, [
+        activeIndex,
+        renderedItems
+    ]);
+    const handleNavigationKeyDown = (0, external_react_namespaceObject.useCallback)((e)=>{
+        if (isTransitioning) return;
+        switch(e.key){
+            case 'ArrowDown':
+                e.preventDefault();
+                if (-1 === activeIndex) {
+                    const firstIndex = getFirstSelectableIndex();
+                    if (-1 !== firstIndex) navigateToIndex(firstIndex);
+                } else {
+                    const nextIndex = getNextSelectableIndex(activeIndex, 1);
+                    if (-1 !== nextIndex) navigateToIndex(nextIndex);
+                }
+                break;
+            case 'ArrowUp':
+                e.preventDefault();
+                activeIndex <= 0 || -1 === getNextSelectableIndex(activeIndex, -1) ? navigateToIndex(-1) : navigateToIndex(getNextSelectableIndex(activeIndex, -1));
+                break;
+            case 'Enter':
+                if (activeIndex >= 0) {
+                    const renderItem = renderedItems[activeIndex];
+                    if (renderItem?.type === 'item') {
+                        e.preventDefault();
+                        handleItemSelect(renderItem.item);
+                    }
+                }
+                break;
+            case 'Home':
+                {
+                    e.preventDefault();
+                    const firstIndex = getFirstSelectableIndex();
+                    if (-1 !== firstIndex) navigateToIndex(firstIndex);
+                    break;
+                }
+            case 'End':
+                {
+                    e.preventDefault();
+                    const lastIndex = getLastSelectableIndex();
+                    if (-1 !== lastIndex) navigateToIndex(lastIndex);
+                    break;
+                }
+        }
+    }, [
+        isTransitioning,
+        activeIndex,
+        renderedItems,
+        navigateToIndex,
+        handleItemSelect,
+        getNextSelectableIndex,
+        getFirstSelectableIndex,
+        getLastSelectableIndex
+    ]);
     (0, external_react_namespaceObject.useEffect)(()=>{
         const handleKeyDown = (e)=>{
             if ('Escape' === e.key) if (isSearching) {
@@ -251,7 +359,10 @@ function Toolbox({ onClose, onBack, onItemSelect, onSearch, onItemHover, title,
                     value: search,
                     onChange: handleSearch,
                     clear: clearSearch,
-                    placeholder: "Search"
+                    placeholder: "Search",
+                    inputRef: searchInputRef,
+                    onNavigationKeyDown: handleNavigationKeyDown,
+                    activeDescendantId: activeDescendantId
                 }),
                 /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_Toolbox_styles_cjs_namespaceObject.AnimatedContainer, {
                     children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_Toolbox_styles_cjs_namespaceObject.AnimatedContent, {
@@ -259,7 +370,9 @@ function Toolbox({ onClose, onBack, onItemSelect, onSearch, onItemHover, title,
                         direction: animationDirection,
                         children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_ListView_cjs_namespaceObject.ListView, {
                             isLoading: childrenLoading || searchLoading || loading,
-                            items: isSearching && !isSearchingInitialItems ? searchedItems : items,
+                            items: displayedItems,
+                            activeIndex: activeIndex,
+                            listRef: listRef,
                             emptyStateMessage: isSearching ? 'No matching nodes found' : 'No nodes found',
                             enableSections: !isSearching,
                             onItemClick: handleItemSelect,

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

@@ -1 +1 @@
-{"version":3,"file":"Toolbox.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/Toolbox/Toolbox.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,QAAQ,EAAY,MAAM,YAAY,CAAC;AAuCrD,MAAM,MAAM,oBAAoB,CAAC,CAAC,GAAG,GAAG,IAAI,CAC1C,KAAK,EAAE,MAAM,EACb,gBAAgB,EAAE,OAAO,EACzB,EAAE,YAAY,EAAE,QAAQ,EAAE,EAAE;IAAE,YAAY,CAAC,EAAE,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC;IAAC,QAAQ,CAAC,EAAE,MAAM,CAAA;CAAE,KAC5E,OAAO,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC;AAE5B,MAAM,WAAW,YAAY,CAAC,CAAC;IAC7B,KAAK,EAAE,MAAM,CAAC;IACd,YAAY,EAAE,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC;IAC5B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,YAAY,EAAE,CAAC,IAAI,EAAE,QAAQ,CAAC,CAAC,CAAC,KAAK,OAAO,CAAC,IAAI,CAAC,GAAG,IAAI,CAAC;IAC1D,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,QAAQ,CAAC,CAAC,CAAC,KAAK,IAAI,CAAC;IAC1C,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,QAAQ,CAAC,EAAE,oBAAoB,CAAC,CAAC,CAAC,CAAC;CACpC;AAoBD,wBAAgB,OAAO,CAAC,CAAC,EAAE,EACzB,OAAO,EACP,MAAM,EACN,YAAY,EACZ,QAAQ,EACR,WAAW,EACX,KAAK,EACL,YAAY,EACZ,OAAO,GACR,EAAE,YAAY,CAAC,CAAC,CAAC,2CAoQjB"}
+{"version":3,"file":"Toolbox.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/Toolbox/Toolbox.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAsB,KAAK,QAAQ,EAAY,MAAM,YAAY,CAAC;AAuCzE,MAAM,MAAM,oBAAoB,CAAC,CAAC,GAAG,GAAG,IAAI,CAC1C,KAAK,EAAE,MAAM,EACb,gBAAgB,EAAE,OAAO,EACzB,EAAE,YAAY,EAAE,QAAQ,EAAE,EAAE;IAAE,YAAY,CAAC,EAAE,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC;IAAC,QAAQ,CAAC,EAAE,MAAM,CAAA;CAAE,KAC5E,OAAO,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC;AAE5B,MAAM,WAAW,YAAY,CAAC,CAAC;IAC7B,KAAK,EAAE,MAAM,CAAC;IACd,YAAY,EAAE,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC;IAC5B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,YAAY,EAAE,CAAC,IAAI,EAAE,QAAQ,CAAC,CAAC,CAAC,KAAK,OAAO,CAAC,IAAI,CAAC,GAAG,IAAI,CAAC;IAC1D,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,QAAQ,CAAC,CAAC,CAAC,KAAK,IAAI,CAAC;IAC1C,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,QAAQ,CAAC,EAAE,oBAAoB,CAAC,CAAC,CAAC,CAAC;CACpC;AAoBD,wBAAgB,OAAO,CAAC,CAAC,EAAE,EACzB,OAAO,EACP,MAAM,EACN,YAAY,EACZ,QAAQ,EACR,WAAW,EACX,KAAK,EACL,YAAY,EACZ,OAAO,GACR,EAAE,YAAY,CAAC,CAAC,CAAC,2CAwYjB"}

package/dist/canvas/components/Toolbox/Toolbox.js

@@ -2,8 +2,9 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { useNavigationStack } from "../../hooks/index.js";
 import { Column } from "../../layouts/index.js";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { useListRef } from "react-window";
 import { Header } from "./Header.js";
-import { ListView } from "./ListView.js";
+import { ListView, buildRenderedItems } from "./ListView.js";
 import { SearchBox } from "./SearchBox.js";
 import { AnimatedContainer, AnimatedContent } from "./Toolbox.styles.js";
 const TRANSITION_DURATION = 150;
@@ -43,13 +44,48 @@ function Toolbox({ onClose, onBack, onItemSelect, onSearch, onItemHover, title,
     const [isTransitioning, setIsTransitioning] = useState(false);
     const [animationDirection, setAnimationDirection] = useState('forward');
     const navigationStack = useNavigationStack();
+    const [activeIndex, setActiveIndex] = useState(-1);
     const containerRef = useRef(null);
     const transitionTimeoutRef = useRef(void 0);
     const searchIdRef = useRef(0);
     const initialItemsRef = useRef(initialItems);
+    const listRef = useListRef(null);
+    const searchInputRef = useRef(null);
     const isSearching = useMemo(()=>search.length > 0, [
         search
     ]);
+    const displayedItems = useMemo(()=>isSearching && !isSearchingInitialItems ? searchedItems : items, [
+        isSearching,
+        isSearchingInitialItems,
+        searchedItems,
+        items
+    ]);
+    const renderedItems = useMemo(()=>buildRenderedItems(displayedItems, !isSearching), [
+        displayedItems,
+        isSearching
+    ]);
+    const getNextSelectableIndex = useCallback((currentIndex, direction)=>{
+        let next = currentIndex + direction;
+        while(next >= 0 && next < renderedItems.length){
+            if (renderedItems[next]?.type === 'item') return next;
+            next += direction;
+        }
+        return -1;
+    }, [
+        renderedItems
+    ]);
+    const getFirstSelectableIndex = useCallback(()=>{
+        for(let i = 0; i < renderedItems.length; i++)if (renderedItems[i]?.type === 'item') return i;
+        return -1;
+    }, [
+        renderedItems
+    ]);
+    const getLastSelectableIndex = useCallback(()=>{
+        for(let i = renderedItems.length - 1; i >= 0; i--)if (renderedItems[i]?.type === 'item') return i;
+        return -1;
+    }, [
+        renderedItems
+    ]);
     const startTransition = useCallback((direction)=>{
         if (transitionTimeoutRef.current) clearTimeout(transitionTimeoutRef.current);
         setIsTransitioning(true);
@@ -58,11 +94,21 @@ function Toolbox({ onClose, onBack, onItemSelect, onSearch, onItemHover, title,
             setIsTransitioning(false);
         }, TRANSITION_DURATION);
     }, []);
+    const navigateToIndex = useCallback((index)=>{
+        setActiveIndex(index);
+        if (index >= 0) listRef.current?.scrollToRow({
+            index,
+            align: 'auto'
+        });
+    }, [
+        listRef
+    ]);
     const clearSearch = useCallback(()=>{
         setSearch('');
         setSearchedItems([]);
         setSearchLoading(false);
         setIsSearchingInitialItems(true);
+        setActiveIndex(-1);
     }, []);
     const handleSearch = useCallback(async (query)=>{
         if (!query.trim()) {
@@ -73,6 +119,7 @@ function Toolbox({ onClose, onBack, onItemSelect, onSearch, onItemHover, title,
             return;
         }
         setSearch(query);
+        setActiveIndex(-1);
         searchIdRef.current += 1;
         const currentRequestId = searchIdRef.current;
         setSearchLoading(true);
@@ -93,6 +140,7 @@ function Toolbox({ onClose, onBack, onItemSelect, onSearch, onItemHover, title,
     ]);
     const handleBackTransition = useCallback(()=>{
         startTransition('back');
+        setActiveIndex(-1);
         const previousState = navigationStack.pop();
         if (previousState) {
             setItems(previousState.data.items);
@@ -121,6 +169,7 @@ function Toolbox({ onClose, onBack, onItemSelect, onSearch, onItemHover, title,
         setItems(nestedItems);
         setCurrentParentItem(item);
         clearSearch();
+        setActiveIndex(-1);
         startTransition('forward');
         setChildrenLoading(false);
     }, [
@@ -178,6 +227,65 @@ function Toolbox({ onClose, onBack, onItemSelect, onSearch, onItemHover, title,
     }, [
         items
     ]);
+    const activeDescendantId = useMemo(()=>{
+        if (activeIndex < 0) return;
+        const renderItem = renderedItems[activeIndex];
+        if (renderItem?.type === 'item') return `toolbox-item-${renderItem.item.id}`;
+    }, [
+        activeIndex,
+        renderedItems
+    ]);
+    const handleNavigationKeyDown = useCallback((e)=>{
+        if (isTransitioning) return;
+        switch(e.key){
+            case 'ArrowDown':
+                e.preventDefault();
+                if (-1 === activeIndex) {
+                    const firstIndex = getFirstSelectableIndex();
+                    if (-1 !== firstIndex) navigateToIndex(firstIndex);
+                } else {
+                    const nextIndex = getNextSelectableIndex(activeIndex, 1);
+                    if (-1 !== nextIndex) navigateToIndex(nextIndex);
+                }
+                break;
+            case 'ArrowUp':
+                e.preventDefault();
+                activeIndex <= 0 || -1 === getNextSelectableIndex(activeIndex, -1) ? navigateToIndex(-1) : navigateToIndex(getNextSelectableIndex(activeIndex, -1));
+                break;
+            case 'Enter':
+                if (activeIndex >= 0) {
+                    const renderItem = renderedItems[activeIndex];
+                    if (renderItem?.type === 'item') {
+                        e.preventDefault();
+                        handleItemSelect(renderItem.item);
+                    }
+                }
+                break;
+            case 'Home':
+                {
+                    e.preventDefault();
+                    const firstIndex = getFirstSelectableIndex();
+                    if (-1 !== firstIndex) navigateToIndex(firstIndex);
+                    break;
+                }
+            case 'End':
+                {
+                    e.preventDefault();
+                    const lastIndex = getLastSelectableIndex();
+                    if (-1 !== lastIndex) navigateToIndex(lastIndex);
+                    break;
+                }
+        }
+    }, [
+        isTransitioning,
+        activeIndex,
+        renderedItems,
+        navigateToIndex,
+        handleItemSelect,
+        getNextSelectableIndex,
+        getFirstSelectableIndex,
+        getLastSelectableIndex
+    ]);
     useEffect(()=>{
         const handleKeyDown = (e)=>{
             if ('Escape' === e.key) if (isSearching) {
@@ -223,7 +331,10 @@ function Toolbox({ onClose, onBack, onItemSelect, onSearch, onItemHover, title,
                     value: search,
                     onChange: handleSearch,
                     clear: clearSearch,
-                    placeholder: "Search"
+                    placeholder: "Search",
+                    inputRef: searchInputRef,
+                    onNavigationKeyDown: handleNavigationKeyDown,
+                    activeDescendantId: activeDescendantId
                 }),
                 /*#__PURE__*/ jsx(AnimatedContainer, {
                     children: /*#__PURE__*/ jsx(AnimatedContent, {
@@ -231,7 +342,9 @@ function Toolbox({ onClose, onBack, onItemSelect, onSearch, onItemHover, title,
                         direction: animationDirection,
                         children: /*#__PURE__*/ jsx(ListView, {
                             isLoading: childrenLoading || searchLoading || loading,
-                            items: isSearching && !isSearchingInitialItems ? searchedItems : items,
+                            items: displayedItems,
+                            activeIndex: activeIndex,
+                            listRef: listRef,
                             emptyStateMessage: isSearching ? 'No matching nodes found' : 'No nodes found',
                             enableSections: !isSearching,
                             onItemClick: handleItemSelect,

package/dist/canvas/styles/execution-status.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__, {
+    getExecutionStatusBorder: ()=>getExecutionStatusBorder,
+    pulseAnimation: ()=>pulseAnimation
+});
+const react_namespaceObject = require("@emotion/react");
+const pulseAnimation = (cssVar)=>(0, react_namespaceObject.keyframes)`
+  0% {
+    box-shadow: 0 0 0 0 color-mix(in srgb, var(${cssVar}) 20%, transparent);
+  }
+  70% {
+    box-shadow: 0 0 0 10px color-mix(in srgb, var(${cssVar}) 0%, transparent);
+  }
+  100% {
+    box-shadow: 0 0 0 0 color-mix(in srgb, var(${cssVar}) 0%, transparent);
+  }
+`;
+const getExecutionStatusBorder = (executionStatus)=>{
+    switch(executionStatus){
+        case 'NotExecuted':
+        case 'INFO':
+            return (0, react_namespaceObject.css)`
+        border-color: var(--uix-canvas-border-de-emp);
+      `;
+        case 'InProgress':
+            return (0, react_namespaceObject.css)`
+        border-color: var(--uix-canvas-info-icon);
+        animation: ${pulseAnimation('--uix-canvas-info-icon')} 2s infinite;
+      `;
+        case 'Completed':
+            return (0, react_namespaceObject.css)`
+        border-color: var(--uix-canvas-success-icon);
+      `;
+        case 'Paused':
+        case 'WARNING':
+            return (0, react_namespaceObject.css)`
+        border-color: var(--uix-canvas-warning-icon);
+        animation: ${pulseAnimation('--uix-canvas-warning-icon')} 2s infinite;
+      `;
+        case 'Cancelled':
+        case 'Failed':
+        case 'Terminated':
+        case 'ERROR':
+        case 'CRITICAL':
+            return (0, react_namespaceObject.css)`
+        border-color: var(--uix-canvas-error-icon);
+        background: var(--uix-canvas-error-background);
+        animation: ${pulseAnimation('--uix-canvas-error-icon')} 2s infinite;
+      `;
+        default:
+            return (0, react_namespaceObject.css)`
+        border-color: var(--uix-canvas-border-de-emp);
+      `;
+    }
+};
+exports.getExecutionStatusBorder = __webpack_exports__.getExecutionStatusBorder;
+exports.pulseAnimation = __webpack_exports__.pulseAnimation;
+for(var __rspack_i in __webpack_exports__)if (-1 === [
+    "getExecutionStatusBorder",
+    "pulseAnimation"
+].indexOf(__rspack_i)) exports[__rspack_i] = __webpack_exports__[__rspack_i];
+Object.defineProperty(exports, '__esModule', {
+    value: true
+});

package/dist/canvas/styles/execution-status.d.ts

@@ -0,0 +1,8 @@
+export declare const pulseAnimation: (cssVar: string) => {
+    name: string;
+    styles: string;
+    anim: 1;
+    toString: () => string;
+} & string;
+export declare const getExecutionStatusBorder: (executionStatus?: string) => import("@emotion/react").SerializedStyles;
+//# sourceMappingURL=execution-status.d.ts.map

package/dist/canvas/styles/execution-status.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"execution-status.d.ts","sourceRoot":"","sources":["../../../src/canvas/styles/execution-status.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,cAAc,GAAI,QAAQ,MAAM;;;;;UAU5C,CAAC;AAEF,eAAO,MAAM,wBAAwB,GAAI,kBAAkB,MAAM,8CAwChE,CAAC"}

package/dist/canvas/styles/execution-status.js

@@ -0,0 +1,51 @@
+import { css, keyframes } from "@emotion/react";
+const pulseAnimation = (cssVar)=>keyframes`
+  0% {
+    box-shadow: 0 0 0 0 color-mix(in srgb, var(${cssVar}) 20%, transparent);
+  }
+  70% {
+    box-shadow: 0 0 0 10px color-mix(in srgb, var(${cssVar}) 0%, transparent);
+  }
+  100% {
+    box-shadow: 0 0 0 0 color-mix(in srgb, var(${cssVar}) 0%, transparent);
+  }
+`;
+const getExecutionStatusBorder = (executionStatus)=>{
+    switch(executionStatus){
+        case 'NotExecuted':
+        case 'INFO':
+            return css`
+        border-color: var(--uix-canvas-border-de-emp);
+      `;
+        case 'InProgress':
+            return css`
+        border-color: var(--uix-canvas-info-icon);
+        animation: ${pulseAnimation('--uix-canvas-info-icon')} 2s infinite;
+      `;
+        case 'Completed':
+            return css`
+        border-color: var(--uix-canvas-success-icon);
+      `;
+        case 'Paused':
+        case 'WARNING':
+            return css`
+        border-color: var(--uix-canvas-warning-icon);
+        animation: ${pulseAnimation('--uix-canvas-warning-icon')} 2s infinite;
+      `;
+        case 'Cancelled':
+        case 'Failed':
+        case 'Terminated':
+        case 'ERROR':
+        case 'CRITICAL':
+            return css`
+        border-color: var(--uix-canvas-error-icon);
+        background: var(--uix-canvas-error-background);
+        animation: ${pulseAnimation('--uix-canvas-error-icon')} 2s infinite;
+      `;
+        default:
+            return css`
+        border-color: var(--uix-canvas-border-de-emp);
+      `;
+    }
+};
+export { getExecutionStatusBorder, pulseAnimation };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uipath/apollo-react",
-  "version": "3.53.0",
+  "version": "3.54.0-pr354.17cbb75",
   "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.14.0"
+    "@uipath/apollo-wind": "0.15.0"
   },
   "devDependencies": {
     "@lingui/cli": "^5.6.1",