@uipath/apollo-react 3.54.1 → 3.55.0-pr354.db46463

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

@@ -30,11 +30,13 @@ 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");
 const external_Toolbox_styles_cjs_namespaceObject = require("./Toolbox.styles.cjs");
 const TRANSITION_DURATION = 150;
+const SEARCH_BAR_INDEX = -1;
 function findItemById(items, id) {
     const queue = [
         ...items
@@ -52,6 +54,23 @@ function findItemById(items, id) {
     }
     return null;
 }
+function getNextSelectableIndex(renderedItems, currentIndex, direction) {
+    const numericDirection = 'up' === direction ? -1 : 1;
+    let next = currentIndex + numericDirection;
+    while(next >= 0 && next < renderedItems.length){
+        if (renderedItems[next]?.type === 'item') return next;
+        next += numericDirection;
+    }
+    return SEARCH_BAR_INDEX;
+}
+function getFirstSelectableIndex(renderedItems) {
+    for(let i = 0; i < renderedItems.length; i++)if (renderedItems[i]?.type === 'item') return i;
+    return SEARCH_BAR_INDEX;
+}
+function getLastSelectableIndex(renderedItems) {
+    for(let i = renderedItems.length - 1; i >= 0; i--)if (renderedItems[i]?.type === 'item') return i;
+    return SEARCH_BAR_INDEX;
+}
 function searchLeafItems(items, query) {
     const results = [];
     for (const item of items)if ('function' != typeof item.children) {
@@ -71,13 +90,23 @@ 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)(SEARCH_BAR_INDEX);
     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 listViewRef = (0, external_react_namespaceObject.useRef)(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 startTransition = (0, external_react_namespaceObject.useCallback)((direction)=>{
         if (transitionTimeoutRef.current) clearTimeout(transitionTimeoutRef.current);
         setIsTransitioning(true);
@@ -86,11 +115,22 @@ function Toolbox({ onClose, onBack, onItemSelect, onSearch, onItemHover, title,
             setIsTransitioning(false);
         }, TRANSITION_DURATION);
     }, []);
+    const navigateToIndex = (0, external_react_namespaceObject.useCallback)((index)=>{
+        setActiveIndex(index);
+        if (index === SEARCH_BAR_INDEX) return void searchInputRef.current?.focus();
+        listRef.current?.scrollToRow({
+            index,
+            align: 'auto'
+        });
+    }, [
+        listRef
+    ]);
     const clearSearch = (0, external_react_namespaceObject.useCallback)(()=>{
         setSearch('');
         setSearchedItems([]);
         setSearchLoading(false);
         setIsSearchingInitialItems(true);
+        setActiveIndex(SEARCH_BAR_INDEX);
     }, []);
     const handleSearch = (0, external_react_namespaceObject.useCallback)(async (query)=>{
         if (!query.trim()) {
@@ -101,6 +141,7 @@ function Toolbox({ onClose, onBack, onItemSelect, onSearch, onItemHover, title,
             return;
         }
         setSearch(query);
+        setActiveIndex(SEARCH_BAR_INDEX);
         searchIdRef.current += 1;
         const currentRequestId = searchIdRef.current;
         setSearchLoading(true);
@@ -121,6 +162,7 @@ function Toolbox({ onClose, onBack, onItemSelect, onSearch, onItemHover, title,
     ]);
     const handleBackTransition = (0, external_react_namespaceObject.useCallback)(()=>{
         startTransition('back');
+        setActiveIndex(SEARCH_BAR_INDEX);
         const previousState = navigationStack.pop();
         if (previousState) {
             setItems(previousState.data.items);
@@ -149,6 +191,7 @@ function Toolbox({ onClose, onBack, onItemSelect, onSearch, onItemHover, title,
         setItems(nestedItems);
         setCurrentParentItem(item);
         clearSearch();
+        setActiveIndex(SEARCH_BAR_INDEX);
         startTransition('forward');
         setChildrenLoading(false);
     }, [
@@ -206,6 +249,96 @@ function Toolbox({ onClose, onBack, onItemSelect, onSearch, onItemHover, title,
     }, [
         items
     ]);
+    const activeDescendantId = (0, external_react_namespaceObject.useMemo)(()=>{
+        if (activeIndex < 0) return;
+        const renderItem = listViewRef.current?.renderedItems[activeIndex];
+        if (renderItem?.type === 'item') return `toolbox-item-${renderItem.item.id}`;
+    }, [
+        activeIndex
+    ]);
+    const handleNavigationKeyDown = (0, external_react_namespaceObject.useCallback)((e)=>{
+        if (isTransitioning) return;
+        const renderedItems = listViewRef.current?.renderedItems ?? [];
+        const navigateDown = ()=>{
+            if (activeIndex === SEARCH_BAR_INDEX) {
+                const firstIndex = getFirstSelectableIndex(renderedItems);
+                if (firstIndex !== SEARCH_BAR_INDEX) navigateToIndex(firstIndex);
+            } else {
+                const nextIndex = getNextSelectableIndex(renderedItems, activeIndex, 'down');
+                if (nextIndex !== SEARCH_BAR_INDEX) navigateToIndex(nextIndex);
+                else {
+                    const firstIndex = getFirstSelectableIndex(renderedItems);
+                    if (firstIndex !== SEARCH_BAR_INDEX) navigateToIndex(firstIndex);
+                }
+            }
+        };
+        const navigateUp = ()=>{
+            navigateToIndex(getNextSelectableIndex(renderedItems, activeIndex, 'up'));
+        };
+        switch(e.key){
+            case 'ArrowDown':
+                e.preventDefault();
+                navigateDown();
+                break;
+            case 'ArrowUp':
+                e.preventDefault();
+                navigateUp();
+                break;
+            case 'Enter':
+                {
+                    if (activeIndex === SEARCH_BAR_INDEX) break;
+                    const renderItem = renderedItems[activeIndex];
+                    if (renderItem?.type === 'item') {
+                        e.preventDefault();
+                        handleItemSelect(renderItem.item);
+                    }
+                    break;
+                }
+            case 'ArrowRight':
+                {
+                    const renderItem = renderedItems[activeIndex];
+                    if (renderItem?.type === 'item' && renderItem.item.children) {
+                        e.preventDefault();
+                        handleItemSelect(renderItem.item);
+                    }
+                    break;
+                }
+            case 'ArrowLeft':
+                if (!navigationStack.canGoBack || activeIndex === SEARCH_BAR_INDEX && search.length > 0) return;
+                e.preventDefault();
+                handleBackTransition();
+                break;
+            case 'Tab':
+                e.preventDefault();
+                if (e.shiftKey) navigateUp();
+                else navigateDown();
+                break;
+            case 'Home':
+                {
+                    if (activeIndex === SEARCH_BAR_INDEX) break;
+                    e.preventDefault();
+                    const firstIndex = getFirstSelectableIndex(renderedItems);
+                    if (firstIndex !== SEARCH_BAR_INDEX) navigateToIndex(firstIndex);
+                    break;
+                }
+            case 'End':
+                {
+                    if (activeIndex === SEARCH_BAR_INDEX) break;
+                    e.preventDefault();
+                    const lastIndex = getLastSelectableIndex(renderedItems);
+                    if (lastIndex !== SEARCH_BAR_INDEX) navigateToIndex(lastIndex);
+                    break;
+                }
+        }
+    }, [
+        search,
+        isTransitioning,
+        activeIndex,
+        navigationStack.canGoBack,
+        navigateToIndex,
+        handleItemSelect,
+        handleBackTransition
+    ]);
     (0, external_react_namespaceObject.useEffect)(()=>{
         const handleKeyDown = (e)=>{
             if ('Escape' === e.key) if (isSearching) {
@@ -251,19 +384,25 @@ 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, {
                         entering: isTransitioning,
                         direction: animationDirection,
                         children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_ListView_cjs_namespaceObject.ListView, {
+                            ref: listViewRef,
                             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,
-                            onItemHover: onItemHover
+                            onItemHover: onItemHover,
+                            enableSections: !isSearching
                         })
                     })
                 })

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,EAAE,KAAK,QAAQ,EAAkD,MAAM,YAAY,CAAC;AAwC3F,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;AAgDD,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,2CAsZjB"}

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

@@ -2,11 +2,13 @@ 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 { SearchBox } from "./SearchBox.js";
 import { AnimatedContainer, AnimatedContent } from "./Toolbox.styles.js";
 const TRANSITION_DURATION = 150;
+const SEARCH_BAR_INDEX = -1;
 function findItemById(items, id) {
     const queue = [
         ...items
@@ -24,6 +26,23 @@ function findItemById(items, id) {
     }
     return null;
 }
+function getNextSelectableIndex(renderedItems, currentIndex, direction) {
+    const numericDirection = 'up' === direction ? -1 : 1;
+    let next = currentIndex + numericDirection;
+    while(next >= 0 && next < renderedItems.length){
+        if (renderedItems[next]?.type === 'item') return next;
+        next += numericDirection;
+    }
+    return SEARCH_BAR_INDEX;
+}
+function getFirstSelectableIndex(renderedItems) {
+    for(let i = 0; i < renderedItems.length; i++)if (renderedItems[i]?.type === 'item') return i;
+    return SEARCH_BAR_INDEX;
+}
+function getLastSelectableIndex(renderedItems) {
+    for(let i = renderedItems.length - 1; i >= 0; i--)if (renderedItems[i]?.type === 'item') return i;
+    return SEARCH_BAR_INDEX;
+}
 function searchLeafItems(items, query) {
     const results = [];
     for (const item of items)if ('function' != typeof item.children) {
@@ -43,13 +62,23 @@ 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(SEARCH_BAR_INDEX);
     const containerRef = useRef(null);
     const transitionTimeoutRef = useRef(void 0);
     const searchIdRef = useRef(0);
     const initialItemsRef = useRef(initialItems);
+    const listRef = useListRef(null);
+    const listViewRef = useRef(null);
+    const searchInputRef = useRef(null);
     const isSearching = useMemo(()=>search.length > 0, [
         search
     ]);
+    const displayedItems = useMemo(()=>isSearching && !isSearchingInitialItems ? searchedItems : items, [
+        isSearching,
+        isSearchingInitialItems,
+        searchedItems,
+        items
+    ]);
     const startTransition = useCallback((direction)=>{
         if (transitionTimeoutRef.current) clearTimeout(transitionTimeoutRef.current);
         setIsTransitioning(true);
@@ -58,11 +87,22 @@ function Toolbox({ onClose, onBack, onItemSelect, onSearch, onItemHover, title,
             setIsTransitioning(false);
         }, TRANSITION_DURATION);
     }, []);
+    const navigateToIndex = useCallback((index)=>{
+        setActiveIndex(index);
+        if (index === SEARCH_BAR_INDEX) return void searchInputRef.current?.focus();
+        listRef.current?.scrollToRow({
+            index,
+            align: 'auto'
+        });
+    }, [
+        listRef
+    ]);
     const clearSearch = useCallback(()=>{
         setSearch('');
         setSearchedItems([]);
         setSearchLoading(false);
         setIsSearchingInitialItems(true);
+        setActiveIndex(SEARCH_BAR_INDEX);
     }, []);
     const handleSearch = useCallback(async (query)=>{
         if (!query.trim()) {
@@ -73,6 +113,7 @@ function Toolbox({ onClose, onBack, onItemSelect, onSearch, onItemHover, title,
             return;
         }
         setSearch(query);
+        setActiveIndex(SEARCH_BAR_INDEX);
         searchIdRef.current += 1;
         const currentRequestId = searchIdRef.current;
         setSearchLoading(true);
@@ -93,6 +134,7 @@ function Toolbox({ onClose, onBack, onItemSelect, onSearch, onItemHover, title,
     ]);
     const handleBackTransition = useCallback(()=>{
         startTransition('back');
+        setActiveIndex(SEARCH_BAR_INDEX);
         const previousState = navigationStack.pop();
         if (previousState) {
             setItems(previousState.data.items);
@@ -121,6 +163,7 @@ function Toolbox({ onClose, onBack, onItemSelect, onSearch, onItemHover, title,
         setItems(nestedItems);
         setCurrentParentItem(item);
         clearSearch();
+        setActiveIndex(SEARCH_BAR_INDEX);
         startTransition('forward');
         setChildrenLoading(false);
     }, [
@@ -178,6 +221,96 @@ function Toolbox({ onClose, onBack, onItemSelect, onSearch, onItemHover, title,
     }, [
         items
     ]);
+    const activeDescendantId = useMemo(()=>{
+        if (activeIndex < 0) return;
+        const renderItem = listViewRef.current?.renderedItems[activeIndex];
+        if (renderItem?.type === 'item') return `toolbox-item-${renderItem.item.id}`;
+    }, [
+        activeIndex
+    ]);
+    const handleNavigationKeyDown = useCallback((e)=>{
+        if (isTransitioning) return;
+        const renderedItems = listViewRef.current?.renderedItems ?? [];
+        const navigateDown = ()=>{
+            if (activeIndex === SEARCH_BAR_INDEX) {
+                const firstIndex = getFirstSelectableIndex(renderedItems);
+                if (firstIndex !== SEARCH_BAR_INDEX) navigateToIndex(firstIndex);
+            } else {
+                const nextIndex = getNextSelectableIndex(renderedItems, activeIndex, 'down');
+                if (nextIndex !== SEARCH_BAR_INDEX) navigateToIndex(nextIndex);
+                else {
+                    const firstIndex = getFirstSelectableIndex(renderedItems);
+                    if (firstIndex !== SEARCH_BAR_INDEX) navigateToIndex(firstIndex);
+                }
+            }
+        };
+        const navigateUp = ()=>{
+            navigateToIndex(getNextSelectableIndex(renderedItems, activeIndex, 'up'));
+        };
+        switch(e.key){
+            case 'ArrowDown':
+                e.preventDefault();
+                navigateDown();
+                break;
+            case 'ArrowUp':
+                e.preventDefault();
+                navigateUp();
+                break;
+            case 'Enter':
+                {
+                    if (activeIndex === SEARCH_BAR_INDEX) break;
+                    const renderItem = renderedItems[activeIndex];
+                    if (renderItem?.type === 'item') {
+                        e.preventDefault();
+                        handleItemSelect(renderItem.item);
+                    }
+                    break;
+                }
+            case 'ArrowRight':
+                {
+                    const renderItem = renderedItems[activeIndex];
+                    if (renderItem?.type === 'item' && renderItem.item.children) {
+                        e.preventDefault();
+                        handleItemSelect(renderItem.item);
+                    }
+                    break;
+                }
+            case 'ArrowLeft':
+                if (!navigationStack.canGoBack || activeIndex === SEARCH_BAR_INDEX && search.length > 0) return;
+                e.preventDefault();
+                handleBackTransition();
+                break;
+            case 'Tab':
+                e.preventDefault();
+                if (e.shiftKey) navigateUp();
+                else navigateDown();
+                break;
+            case 'Home':
+                {
+                    if (activeIndex === SEARCH_BAR_INDEX) break;
+                    e.preventDefault();
+                    const firstIndex = getFirstSelectableIndex(renderedItems);
+                    if (firstIndex !== SEARCH_BAR_INDEX) navigateToIndex(firstIndex);
+                    break;
+                }
+            case 'End':
+                {
+                    if (activeIndex === SEARCH_BAR_INDEX) break;
+                    e.preventDefault();
+                    const lastIndex = getLastSelectableIndex(renderedItems);
+                    if (lastIndex !== SEARCH_BAR_INDEX) navigateToIndex(lastIndex);
+                    break;
+                }
+        }
+    }, [
+        search,
+        isTransitioning,
+        activeIndex,
+        navigationStack.canGoBack,
+        navigateToIndex,
+        handleItemSelect,
+        handleBackTransition
+    ]);
     useEffect(()=>{
         const handleKeyDown = (e)=>{
             if ('Escape' === e.key) if (isSearching) {
@@ -223,19 +356,25 @@ 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, {
                         entering: isTransitioning,
                         direction: animationDirection,
                         children: /*#__PURE__*/ jsx(ListView, {
+                            ref: listViewRef,
                             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,
-                            onItemHover: onItemHover
+                            onItemHover: onItemHover,
+                            enableSections: !isSearching
                         })
                     })
                 })

package/dist/canvas/icons/A2aIcon.cjs

@@ -0,0 +1,83 @@
+"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__, {
+    A2aIcon: ()=>A2aIcon
+});
+const jsx_runtime_namespaceObject = require("react/jsx-runtime");
+const A2aIcon = ({ w = 24, h = 24 })=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("svg", {
+        fill: "none",
+        width: w,
+        height: h,
+        viewBox: "0 0 860 860",
+        xmlns: "http://www.w3.org/2000/svg",
+        children: [
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("circle", {
+                cx: "544",
+                cy: "307",
+                r: "27",
+                fill: "currentColor"
+            }),
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("circle", {
+                cx: "154",
+                cy: "307",
+                r: "27",
+                fill: "currentColor"
+            }),
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("circle", {
+                cx: "706",
+                cy: "307",
+                r: "27",
+                fill: "currentColor"
+            }),
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("circle", {
+                cx: "316",
+                cy: "307",
+                r: "27",
+                fill: "currentColor"
+            }),
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("path", {
+                d: "M336.5 191.003H162C97.6588 191.003 45.5 243.162 45.5 307.503C45.5 371.844 97.6442 424.003 161.985 424.003C206.551 424.003 256.288 424.003 296.5 424.003C487.5 424.003 374 191.005 569 191.001C613.886 191 658.966 191 698.025 191C762.366 191.001 814.5 243.16 814.5 307.501C814.5 371.843 762.34 424.003 697.998 424.003H523.5",
+                stroke: "currentColor",
+                strokeWidth: "48",
+                strokeLinecap: "round"
+            }),
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("path", {
+                d: "M256 510.002C270.359 510.002 282 521.643 282 536.002C282 550.361 270.359 562.002 256 562.002H148C133.641 562.002 122 550.361 122 536.002C122 521.643 133.641 510.002 148 510.002H256ZM712 510.002C726.359 510.002 738 521.643 738 536.002C738 550.361 726.359 562.002 712 562.002H360C345.641 562.002 334 550.361 334 536.002C334 521.643 345.641 510.002 360 510.002H712Z",
+                fill: "currentColor"
+            }),
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("path", {
+                d: "M444 628.002C458.359 628.002 470 639.643 470 654.002C470 668.361 458.359 680.002 444 680.002H100C85.6406 680.002 74 668.361 74 654.002C74 639.643 85.6406 628.002 100 628.002H444ZM548 628.002C562.359 628.002 574 639.643 574 654.002C574 668.361 562.359 680.002 548 680.002C533.641 680.002 522 668.361 522 654.002C522 639.643 533.641 628.002 548 628.002ZM760 628.002C774.359 628.002 786 639.643 786 654.002C786 668.361 774.359 680.002 760 680.002H652C637.641 680.002 626 668.361 626 654.002C626 639.643 637.641 628.002 652 628.002H760Z",
+                fill: "currentColor"
+            })
+        ]
+    });
+exports.A2aIcon = __webpack_exports__.A2aIcon;
+for(var __rspack_i in __webpack_exports__)if (-1 === [
+    "A2aIcon"
+].indexOf(__rspack_i)) exports[__rspack_i] = __webpack_exports__[__rspack_i];
+Object.defineProperty(exports, '__esModule', {
+    value: true
+});

package/dist/canvas/icons/A2aIcon.d.ts

@@ -0,0 +1,5 @@
+export declare const A2aIcon: ({ w, h }: {
+    w?: number | string;
+    h?: number | string;
+}) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=A2aIcon.d.ts.map

package/dist/canvas/icons/A2aIcon.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"A2aIcon.d.ts","sourceRoot":"","sources":["../../../src/canvas/icons/A2aIcon.tsx"],"names":[],"mappings":"AAAA,eAAO,MAAM,OAAO,GAAI,UAAoB;IAAE,CAAC,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAAC,CAAC,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;CAAE,4CAuBvF,CAAC"}

package/dist/canvas/icons/A2aIcon.js

@@ -0,0 +1,49 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+const A2aIcon = ({ w = 24, h = 24 })=>/*#__PURE__*/ jsxs("svg", {
+        fill: "none",
+        width: w,
+        height: h,
+        viewBox: "0 0 860 860",
+        xmlns: "http://www.w3.org/2000/svg",
+        children: [
+            /*#__PURE__*/ jsx("circle", {
+                cx: "544",
+                cy: "307",
+                r: "27",
+                fill: "currentColor"
+            }),
+            /*#__PURE__*/ jsx("circle", {
+                cx: "154",
+                cy: "307",
+                r: "27",
+                fill: "currentColor"
+            }),
+            /*#__PURE__*/ jsx("circle", {
+                cx: "706",
+                cy: "307",
+                r: "27",
+                fill: "currentColor"
+            }),
+            /*#__PURE__*/ jsx("circle", {
+                cx: "316",
+                cy: "307",
+                r: "27",
+                fill: "currentColor"
+            }),
+            /*#__PURE__*/ jsx("path", {
+                d: "M336.5 191.003H162C97.6588 191.003 45.5 243.162 45.5 307.503C45.5 371.844 97.6442 424.003 161.985 424.003C206.551 424.003 256.288 424.003 296.5 424.003C487.5 424.003 374 191.005 569 191.001C613.886 191 658.966 191 698.025 191C762.366 191.001 814.5 243.16 814.5 307.501C814.5 371.843 762.34 424.003 697.998 424.003H523.5",
+                stroke: "currentColor",
+                strokeWidth: "48",
+                strokeLinecap: "round"
+            }),
+            /*#__PURE__*/ jsx("path", {
+                d: "M256 510.002C270.359 510.002 282 521.643 282 536.002C282 550.361 270.359 562.002 256 562.002H148C133.641 562.002 122 550.361 122 536.002C122 521.643 133.641 510.002 148 510.002H256ZM712 510.002C726.359 510.002 738 521.643 738 536.002C738 550.361 726.359 562.002 712 562.002H360C345.641 562.002 334 550.361 334 536.002C334 521.643 345.641 510.002 360 510.002H712Z",
+                fill: "currentColor"
+            }),
+            /*#__PURE__*/ jsx("path", {
+                d: "M444 628.002C458.359 628.002 470 639.643 470 654.002C470 668.361 458.359 680.002 444 680.002H100C85.6406 680.002 74 668.361 74 654.002C74 639.643 85.6406 628.002 100 628.002H444ZM548 628.002C562.359 628.002 574 639.643 574 654.002C574 668.361 562.359 680.002 548 680.002C533.641 680.002 522 668.361 522 654.002C522 639.643 533.641 628.002 548 628.002ZM760 628.002C774.359 628.002 786 639.643 786 654.002C786 668.361 774.359 680.002 760 680.002H652C637.641 680.002 626 668.361 626 654.002C626 639.643 637.641 628.002 652 628.002H760Z",
+                fill: "currentColor"
+            })
+        ]
+    });
+export { A2aIcon };

package/dist/canvas/icons/index.cjs

@@ -25,6 +25,7 @@ var __webpack_exports__ = {};
 __webpack_require__.r(__webpack_exports__);
 __webpack_require__.d(__webpack_exports__, {
     AgentDiagramIcon: ()=>external_AgentDiagramIcon_cjs_namespaceObject.AgentDiagramIcon,
+    A2aIcon: ()=>external_A2aIcon_cjs_namespaceObject.A2aIcon,
     SwitchIcon: ()=>external_SwitchIcon_cjs_namespaceObject.SwitchIcon,
     AnthropicIcon: ()=>external_AnthropicIcon_cjs_namespaceObject.AnthropicIcon,
     DataTransformMapIcon: ()=>external_DataTransformMapIcon_cjs_namespaceObject.DataTransformMapIcon,
@@ -36,13 +37,13 @@ __webpack_require__.d(__webpack_exports__, {
     DataTransformExtractIcon: ()=>external_DataTransformExtractIcon_cjs_namespaceObject.DataTransformExtractIcon,
     DataTransformGroupIcon: ()=>external_DataTransformGroupIcon_cjs_namespaceObject.DataTransformGroupIcon,
     OrganizeIcon: ()=>external_OrganizeIcon_cjs_namespaceObject.OrganizeIcon,
-    OpenAIIcon: ()=>external_OpenAIIcon_cjs_namespaceObject.OpenAIIcon,
     BusinessProcessProject: ()=>external_BusinessProcessProject_cjs_namespaceObject.BusinessProcessProject,
     ControlFlowIcon: ()=>external_ControlFlowIcon_cjs_namespaceObject.ControlFlowIcon,
     LoopIcon: ()=>external_LoopIcon_cjs_namespaceObject.LoopIcon,
-    MemoryIcon: ()=>external_MemoryIcon_cjs_namespaceObject.MemoryIcon,
     DecisionIcon: ()=>external_DecisionIcon_cjs_namespaceObject.DecisionIcon,
+    MemoryIcon: ()=>external_MemoryIcon_cjs_namespaceObject.MemoryIcon,
     ConnectorBuilderProject: ()=>external_ConnectorBuilderProject_cjs_namespaceObject.ConnectorBuilderProject,
+    OpenAIIcon: ()=>external_OpenAIIcon_cjs_namespaceObject.OpenAIIcon,
     DataTransformFilterIcon: ()=>external_DataTransformFilterIcon_cjs_namespaceObject.DataTransformFilterIcon,
     RpaProject: ()=>external_RpaProject_cjs_namespaceObject.RpaProject,
     TimelinePauseIcon: ()=>external_TimelinePauseIcon_cjs_namespaceObject.TimelinePauseIcon,
@@ -65,6 +66,7 @@ __webpack_require__.d(__webpack_exports__, {
     CodedAgentIcon: ()=>external_CodedAgentIcon_cjs_namespaceObject.CodedAgentIcon,
     TimelineProgressIcon: ()=>external_TimelineProgressIcon_cjs_namespaceObject.TimelineProgressIcon
 });
+const external_A2aIcon_cjs_namespaceObject = require("./A2aIcon.cjs");
 const external_AgentDiagramIcon_cjs_namespaceObject = require("./AgentDiagramIcon.cjs");
 const external_AgentIcon_cjs_namespaceObject = require("./AgentIcon.cjs");
 const external_AgentProject_cjs_namespaceObject = require("./AgentProject.cjs");
@@ -105,6 +107,7 @@ const external_WebAppProject_cjs_namespaceObject = require("./WebAppProject.cjs"
 const external_ZoomInIcon_cjs_namespaceObject = require("./ZoomInIcon.cjs");
 const external_ZoomOutIcon_cjs_namespaceObject = require("./ZoomOutIcon.cjs");
 const external_ZoomToFitIcon_cjs_namespaceObject = require("./ZoomToFitIcon.cjs");
+exports.A2aIcon = __webpack_exports__.A2aIcon;
 exports.AgentDiagramIcon = __webpack_exports__.AgentDiagramIcon;
 exports.AgentIcon = __webpack_exports__.AgentIcon;
 exports.AgentProject = __webpack_exports__.AgentProject;
@@ -146,6 +149,7 @@ exports.ZoomInIcon = __webpack_exports__.ZoomInIcon;
 exports.ZoomOutIcon = __webpack_exports__.ZoomOutIcon;
 exports.ZoomToFitIcon = __webpack_exports__.ZoomToFitIcon;
 for(var __rspack_i in __webpack_exports__)if (-1 === [
+    "A2aIcon",
     "AgentDiagramIcon",
     "AgentIcon",
     "AgentProject",

package/dist/canvas/icons/index.d.ts

@@ -1,3 +1,4 @@
+export { A2aIcon } from './A2aIcon';
 export { AgentDiagramIcon } from './AgentDiagramIcon';
 export { AgentIcon } from './AgentIcon';
 export { AgentProject } from './AgentProject';