@uipath/apollo-react 4.11.0 → 4.12.1

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

@@ -72,6 +72,10 @@ function Toolbox({ onClose, onBack, onItemSelect, onSearch, onItemHover, title,
     const listViewRef = useRef(null);
     const searchInputRef = useRef(null);
     const clearButtonRef = useRef(null);
+    const lastScrollTopRef = useRef(0);
+    const handleListScroll = useCallback((e)=>{
+        lastScrollTopRef.current = e.currentTarget.scrollTop;
+    }, []);
     const isSearching = useMemo(()=>search.length > 0, [
         search
     ]);
@@ -157,31 +161,45 @@ function Toolbox({ onClose, onBack, onItemSelect, onSearch, onItemHover, title,
         setSearchLoading(false);
         setIsSearchingInitialItems(true);
         const restoredIndex = previousState?.data.activeIndex ?? SEARCH_BAR_INDEX;
-        navigateToIndex(restoredIndex);
+        const restoredScrollTop = previousState?.data.scrollTop ?? 0;
+        setActiveIndex(restoredIndex);
+        searchInputRef.current?.focus();
+        requestAnimationFrame(()=>{
+            const element = listRef.current?.element;
+            if (element) element.scrollTop = restoredScrollTop;
+            lastScrollTopRef.current = restoredScrollTop;
+        });
         onBack?.();
     }, [
         navigationStack,
         onBack,
         startTransition,
-        navigateToIndex
+        listRef
     ]);
     const handleItemSelect = useCallback(async (item, index)=>{
         if (!item.children) return void onItemSelect(item);
         setChildrenLoading(true);
         const nestedItems = 'function' == typeof item.children ? await item.children(item.id, item.name) : item.children;
         const savedIndex = isSearching ? SEARCH_BAR_INDEX : index ?? activeIndex;
+        const savedScrollTop = isSearching ? 0 : lastScrollTopRef.current;
         navigationStack.push({
             title: currentParentItem?.name || title,
             data: {
                 items,
                 parentItem: currentParentItem,
-                activeIndex: savedIndex
+                activeIndex: savedIndex,
+                scrollTop: savedScrollTop
             }
         });
         setItems(nestedItems);
         setCurrentParentItem(item);
         clearSearch();
         setActiveIndex(SEARCH_BAR_INDEX);
+        requestAnimationFrame(()=>{
+            const element = listRef.current?.element;
+            if (element) element.scrollTop = 0;
+            lastScrollTopRef.current = 0;
+        });
         startTransition('forward');
         setChildrenLoading(false);
     }, [
@@ -193,7 +211,8 @@ function Toolbox({ onClose, onBack, onItemSelect, onSearch, onItemHover, title,
         isSearching,
         clearSearch,
         startTransition,
-        onItemSelect
+        onItemSelect,
+        listRef
     ]);
     useEffect(()=>()=>{
             if (transitionTimeoutRef.current) clearTimeout(transitionTimeoutRef.current);
@@ -214,7 +233,8 @@ function Toolbox({ onClose, onBack, onItemSelect, onSearch, onItemHover, title,
                 data: {
                     items: newInitialItems,
                     parentItem: null,
-                    activeIndex: stackItem.data.activeIndex
+                    activeIndex: stackItem.data.activeIndex,
+                    scrollTop: stackItem.data.scrollTop
                 }
             };
             const updatedParentItem = findItemById(newInitialItems, stackItem.data.parentItem.id);
@@ -225,7 +245,8 @@ function Toolbox({ onClose, onBack, onItemSelect, onSearch, onItemHover, title,
                 data: {
                     items: updatedItems,
                     parentItem: updatedParentItem,
-                    activeIndex: stackItem.data.activeIndex
+                    activeIndex: stackItem.data.activeIndex,
+                    scrollTop: stackItem.data.scrollTop
                 }
             };
         });
@@ -332,6 +353,13 @@ function Toolbox({ onClose, onBack, onItemSelect, onSearch, onItemHover, title,
         handleItemSelect,
         handleBackTransition
     ]);
+    const handleClose = useCallback(()=>{
+        navigationStack.clear();
+        onClose();
+    }, [
+        navigationStack,
+        onClose
+    ]);
     useEffect(()=>{
         const handleKeyDown = (e)=>{
             if ('Escape' === e.key) if (isSearching) {
@@ -339,10 +367,10 @@ function Toolbox({ onClose, onBack, onItemSelect, onSearch, onItemHover, title,
                 startTransition('back');
                 clearSearch();
             } else if (navigationStack.canGoBack) handleBackTransition();
-            else onClose();
+            else handleClose();
         };
         const handleClickOutside = (e)=>{
-            if (containerRef.current && !containerRef.current.contains(e.target)) onClose();
+            if (containerRef.current && !containerRef.current.contains(e.target)) handleClose();
         };
         document.addEventListener('keydown', handleKeyDown);
         document.addEventListener('mousedown', handleClickOutside);
@@ -353,7 +381,7 @@ function Toolbox({ onClose, onBack, onItemSelect, onSearch, onItemHover, title,
     }, [
         isSearching,
         navigationStack.canGoBack,
-        onClose,
+        handleClose,
         clearSearch,
         startTransition,
         handleBackTransition
@@ -397,6 +425,7 @@ function Toolbox({ onClose, onBack, onItemSelect, onSearch, onItemHover, title,
                             emptyStateMessage: isSearching ? 'No matching nodes found' : 'No nodes found',
                             onItemClick: handleItemSelect,
                             onItemHover: onItemHover,
+                            onScroll: handleListScroll,
                             enableSections: !isSearching
                         })
                     })