@geotab/zenith 3.1.1-beta.5 → 3.2.0-beta.0

package/esm/filters/components/filtersSearchList.js

@@ -1,3 +1,4 @@
+import { injectString } from "../../utils/localization/translationsDictionary";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { List } from "../../list/list";
@@ -14,186 +15,382 @@ import { MAX_TOTAL_RESULTS } from "../filtersHelper";
 import { EmptySearchList } from "../../dataGrid/emptySearchList/emptySearchList";
 import { getNewFocusableItem } from "../../utils/keyboardHelpers";
 import { FOCUSABLE_SELECTOR } from "../../utils/focusableSelector";
+injectString("cs", "Back", "Zp\u011Bt");
+injectString("da-DK", "Back", "Tilbage");
+injectString("de", "Back", "Zur\xFCck");
+injectString("en", "Back", "Back");
+injectString("es", "Back", "Regresar");
+injectString("fi-FI", "Back", "Takaisin");
+injectString("fr", "Back", "Retour");
+injectString("fr-FR", "Back", "Retour");
+injectString("hu-HU", "Back", "Vissza");
+injectString("id", "Back", "Kembali");
+injectString("it", "Back", "Indietro");
+injectString("ja", "Back", "\u623B\u308B");
+injectString("ko-KR", "Back", "\uB4A4\uB85C");
+injectString("ms", "Back", "Kembali");
+injectString("nb-NO", "Back", "Tilbake");
+injectString("nl", "Back", "Terug");
+injectString("pl", "Back", "Wstecz");
+injectString("pt-BR", "Back", "Voltar");
+injectString("sk-SK", "Back", "Sp\xE4\u0165");
+injectString("sv", "Back", "Tillbaka");
+injectString("th", "Back", "\u0E01\u0E25\u0E31\u0E1A");
+injectString("tr", "Back", "Geri");
+injectString("zh-Hans", "Back", "\u8FD4\u56DE");
+injectString("zh-TW", "Back", "\u8FD4\u56DE");
+injectString("cs", "Clear all", "Vymazat v\u0161e");
+injectString("da-DK", "Clear all", "Ryd alt");
+injectString("de", "Clear all", "Alle l\xF6schen");
+injectString("en", "Clear all", "Clear all");
+injectString("es", "Clear all", "Borrar todo");
+injectString("fi-FI", "Clear all", "Tyhjenn\xE4 kaikki");
+injectString("fr", "Clear all", "Effacer tout");
+injectString("fr-FR", "Clear all", "Tout effacer");
+injectString("hu-HU", "Clear all", "Mindent t\xF6r\xF6lni");
+injectString("id", "Clear all", "Hapus semua");
+injectString("it", "Clear all", "Cancellare tutto");
+injectString("ja", "Clear all", "\u3059\u3079\u3066\u3092\u30AF\u30EA\u30A2");
+injectString("ko-KR", "Clear all", "\uBAA8\uB450 \uC9C0\uC6B0\uAE30");
+injectString("ms", "Clear all", "Kosongkan semua");
+injectString("nb-NO", "Clear all", "Fjern alt");
+injectString("nl", "Clear all", "Alles wissen");
+injectString("pl", "Clear all", "Wyczy\u015B\u0107 wszystkie");
+injectString("pt-BR", "Clear all", "Limpar tudo");
+injectString("sk-SK", "Clear all", "Vymaza\u0165 v\u0161etko");
+injectString("sv", "Clear all", "Rensa alla");
+injectString("th", "Clear all", "\u0E25\u0E49\u0E32\u0E07\u0E17\u0E31\u0E49\u0E07\u0E2B\u0E21\u0E14");
+injectString("tr", "Clear all", "T\xFCm\xFCn\xFC temizle");
+injectString("zh-Hans", "Clear all", "\u5168\u90E8\u6E05\u9664");
+injectString("zh-TW", "Clear all", "\u6E05\u9664\u5168\u90E8");
+injectString("en", "Recent searches", "Recent searches");
+injectString("en", "Currently selected", "Currently selected");
+injectString("en", "View history", "View history");
+injectString("cs", "Clear", "Vymazat");
+injectString("da-DK", "Clear", "Ryd");
+injectString("de", "Clear", "L\xF6schen");
+injectString("en", "Clear", "Clear");
+injectString("es", "Clear", "Borrar");
+injectString("fi-FI", "Clear", "Tyhjenn\xE4");
+injectString("fr", "Clear", "Effacer");
+injectString("fr-FR", "Clear", "Effacer");
+injectString("hu-HU", "Clear", "T\xF6r\xF6ld.");
+injectString("id", "Clear", "Hapus");
+injectString("it", "Clear", "Cancella");
+injectString("ja", "Clear", "\u30AF\u30EA\u30A2");
+injectString("ko-KR", "Clear", "\uC9C0\uC6B0\uAE30");
+injectString("ms", "Clear", "Kosongkan");
+injectString("nb-NO", "Clear", "T\xF8m");
+injectString("nl", "Clear", "Wissen");
+injectString("pl", "Clear", "Wyczy\u015B\u0107");
+injectString("pt-BR", "Clear", "Limpar");
+injectString("sk-SK", "Clear", "Vyma\u017E");
+injectString("sv", "Clear", "Rensa");
+injectString("th", "Clear", "\u0E25\u0E49\u0E32\u0E07");
+injectString("tr", "Clear", "Temizle");
+injectString("zh-Hans", "Clear", "\u6E05\u9664");
+injectString("zh-TW", "Clear", "\u6E05\u9664");
+injectString("en", "Top results", "Top results");
+injectString("cs", "No data available", "Nejsou k\xA0dispozici \u017E\xE1dn\xE1 data");
+injectString("da-DK", "No data available", "Ingen data tilg\xE6ngelige");
+injectString("de", "No data available", "Keine Daten verf\xFCgbar");
+injectString("en", "No data available", "No data available");
+injectString("es", "No data available", "No hay datos disponibles");
+injectString("fi-FI", "No data available", "Tietoja ei saatavilla");
+injectString("fr", "No data available", "Aucune donn\xE9e disponible");
+injectString("fr-FR", "No data available", "Aucune donn\xE9e disponible");
+injectString("hu-HU", "No data available", "Nincsenek rendelkez\xE9sre \xE1ll\xF3 adatok");
+injectString("id", "No data available", "Tidak ada data tersedia");
+injectString("it", "No data available", "Nessun dato disponibile");
+injectString("ja", "No data available", "\u30C7\u30FC\u30BF\u304C\u3042\u308A\u307E\u305B\u3093");
+injectString("ko-KR", "No data available", "\uC0AC\uC6A9 \uAC00\uB2A5\uD55C \uB370\uC774\uD130\uAC00 \uC5C6\uC2B5\uB2C8\uB2E4");
+injectString("ms", "No data available", "Tiada data tersedia");
+injectString("nb-NO", "No data available", "Ingen data tilgjengelig");
+injectString("nl", "No data available", "Geen gegevens beschikbaar");
+injectString("pl", "No data available", "Brak dost\u0119pnych danych");
+injectString("pt-BR", "No data available", "Nenhum dado dispon\xEDvel");
+injectString("sk-SK", "No data available", "Nie s\xFA k dispoz\xEDcii \u017Eiadne \xFAdaje");
+injectString("sv", "No data available", "Det finns inga tillg\xE4ngliga data");
+injectString("th", "No data available", "\u0E44\u0E21\u0E48\u0E21\u0E35\u0E02\u0E49\u0E2D\u0E21\u0E39\u0E25");
+injectString("tr", "No data available", "Mevcut veri yok");
+injectString("zh-Hans", "No data available", "\u65E0\u53EF\u7528\u6570\u636E");
+injectString("zh-TW", "No data available", "\u6C92\u6709\u53EF\u7528\u8CC7\u6599");
 export const NO_TYPED_SEARCH_ITEM = "noTypedSearchItem";
 export const KEYWORD_ID = "keywordId";
 export const KEYWORD_TYPE = "keyword";
 export const NOT_POPULATED_NAME = "...";
-export const FiltersSearchList = ({ searchValue, searchData, recentSearches, searchSelection, onlyOneType, handleSearchItemClick, onRemoveRecentSearchItem, handleRecentSearchItemClick, getIconByType, handleClearSearchSelection, searchListRef }) => {
-    const { translate } = useLanguage();
-    const isSearchModeAvailable = Boolean(handleSearchItemClick && searchSelection);
-    const isRecentSearchesModeAvailable = Boolean(recentSearches && handleRecentSearchItemClick && onRemoveRecentSearchItem);
-    const isMobile = useMobile();
-    const isDrive = useDrive();
-    const [removedItems, setRemovedItems] = useState([]);
-    const initialSearchSelectionRef = useRef(searchSelection || []);
-    const hasNotPopulatedName = initialSearchSelectionRef.current.length === 0 ? false : initialSearchSelectionRef.current.some(el => el.name === NOT_POPULATED_NAME);
-    const getCurrentMode = useCallback(() => {
-        if (searchValue) {
-            return "search";
-        }
-        if (isSearchModeAvailable && initialSearchSelectionRef.current.length > 0) {
-            return "selected";
-        }
-        if (isRecentSearchesModeAvailable && (recentSearches === null || recentSearches === void 0 ? void 0 : recentSearches.data) && recentSearches.data.length > 0) {
-            return "recent";
-        }
-        return "";
-    }, [searchValue, isSearchModeAvailable, isRecentSearchesModeAvailable, recentSearches === null || recentSearches === void 0 ? void 0 : recentSearches.data]);
-    const [currentMode, setCurrentMode] = useState(getCurrentMode());
-    const waitingItemsLimit = 5;
-    // Handle React Query errors
-    useEffect(() => {
-        if (currentMode === "search" && (searchData === null || searchData === void 0 ? void 0 : searchData.error)) {
-            console.error("Failed to fetch search results. Error:", searchData.error);
-        }
-    }, [currentMode, searchData === null || searchData === void 0 ? void 0 : searchData.error]);
-    useEffect(() => {
-        if (currentMode !== "search" && searchValue) {
-            setCurrentMode("search");
-        }
-    }, [searchValue, currentMode]);
-    useEffect(() => {
-        if (currentMode === "recent" && searchSelection && searchSelection.length === 0) {
-            initialSearchSelectionRef.current = [];
-        }
-    }, [isSearchModeAvailable, isRecentSearchesModeAvailable, currentMode, searchSelection]);
-    // Reset history mode when search value changes
-    useEffect(() => {
-        if (currentMode === "history" && searchValue) {
-            setCurrentMode(isSearchModeAvailable ? "search" : "");
-        }
-        else if (currentMode === "search" && !searchValue) {
-            setCurrentMode(getCurrentMode());
-        }
-    }, [currentMode, getCurrentMode, isRecentSearchesModeAvailable, isSearchModeAvailable, searchValue]);
-    useEffect(() => {
-        if (searchSelection && searchSelection.length === 0) {
-            return;
-        }
-        searchSelection === null || searchSelection === void 0 ? void 0 : searchSelection.forEach(item => {
-            const existingItem = initialSearchSelectionRef.current.find(el => (onlyOneType ? el.id === item.id : el.id === item.id && el.type === item.type));
-            if (!existingItem) {
-                initialSearchSelectionRef.current = [...initialSearchSelectionRef.current, item];
-            }
-            else if (hasNotPopulatedName) {
-                existingItem.name = item.name;
-                existingItem.description = item.description;
-                existingItem.type = item.type;
-            }
-        });
-    }, [hasNotPopulatedName, onlyOneType, searchSelection]);
-    const searchItems = useMemo(() => currentMode === "search" || currentMode === "" ? (searchData === null || searchData === void 0 ? void 0 : searchData.data) || [] : [], [currentMode, searchData === null || searchData === void 0 ? void 0 : searchData.data]);
-    const recentItems = useMemo(() => currentMode === "recent" || currentMode === "history" ? (recentSearches === null || recentSearches === void 0 ? void 0 : recentSearches.data) || [] : [], [currentMode, recentSearches === null || recentSearches === void 0 ? void 0 : recentSearches.data]);
-    const isLoading = currentMode === "search" && (searchData === null || searchData === void 0 ? void 0 : searchData.isLoading) || (currentMode === "recent" || currentMode === "history" ? recentSearches === null || recentSearches === void 0 ? void 0 : recentSearches.isLoading : false) || false;
-    const changeMode = useCallback((newVal) => {
-        setCurrentMode(newVal);
-        setRemovedItems([]);
-        // Note: In React Query implementation, the parent component should handle
-        // refetching data when switching between modes
-    }, []);
-    const handleRemove = useCallback((itemId) => () => {
-        var _a;
-        setRemovedItems(prev => [...prev, itemId]);
-        onRemoveRecentSearchItem && onRemoveRecentSearchItem([itemId]);
-        // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
-        const firstItem = (_a = searchListRef.current) === null || _a === void 0 ? void 0 : _a.querySelector(FOCUSABLE_SELECTOR);
-        firstItem === null || firstItem === void 0 ? void 0 : firstItem.focus();
-    }, [onRemoveRecentSearchItem, searchListRef]);
-    const handleRemoveAll = useCallback(() => {
-        setRemovedItems(recentItems.map(item => item.id));
-        onRemoveRecentSearchItem && onRemoveRecentSearchItem(recentItems.map(item => item.id));
-        changeMode(getCurrentMode());
-    }, [recentItems, onRemoveRecentSearchItem, changeMode, getCurrentMode]);
-    const memoizedSearchItemClick = useCallback((itemId, itemType) => () => {
-        const currentSearchItem = onlyOneType && !itemType ? searchItems.find(item => item.id === itemId)
-            : searchItems.find(item => item.id === itemId && item.type === itemType);
-        currentSearchItem && handleSearchItemClick && handleSearchItemClick(currentSearchItem);
-    }, [handleSearchItemClick, onlyOneType, searchItems]);
-    const memoizedSelectedItemClick = useCallback((itemId, itemType) => () => {
-        const currentSelectedItem = onlyOneType && !itemType ? initialSearchSelectionRef.current.find(item => item.id === itemId)
-            : initialSearchSelectionRef.current.find(item => item.id === itemId && item.type === itemType);
-        currentSelectedItem && handleSearchItemClick && handleSearchItemClick(currentSelectedItem);
-    }, [handleSearchItemClick, onlyOneType]);
-    const memoizedRecentSearchItemClick = useCallback((itemId, itemType) => () => {
-        const currentSearchItem = recentItems.find(item => item.id === itemId && item.type === itemType);
-        currentSearchItem && handleRecentSearchItemClick && handleRecentSearchItemClick(currentSearchItem);
-    }, [handleRecentSearchItemClick, recentItems]);
-    const memoizedClearSelectedItems = useCallback(() => {
-        var _a;
-        handleClearSearchSelection === null || handleClearSearchSelection === void 0 ? void 0 : handleClearSearchSelection();
-        initialSearchSelectionRef.current = [];
-        setCurrentMode(isRecentSearchesModeAvailable && ((_a = recentSearches === null || recentSearches === void 0 ? void 0 : recentSearches.data) === null || _a === void 0 ? void 0 : _a.length) ? "recent" : "");
-    }, [handleClearSearchSelection, isRecentSearchesModeAvailable, recentSearches]);
-    const handleKeyDown = useCallback((event) => {
-        const isListItem = event.target instanceof HTMLElement && event.target.dataset.listItem === "true";
-        const isButtonItem = event.target instanceof HTMLElement && event.target.dataset.closeButton === "true";
-        const getSelector = () => {
-            if (isListItem) {
-                return `[data-list-item="true"]`;
-            }
-            if (isButtonItem) {
-                return `[data-close-button="true"]`;
-            }
-            return undefined;
-        };
-        if (event.key === "ArrowDown") {
-            const nextItem = getNewFocusableItem(1, searchListRef.current, getSelector());
-            nextItem === null || nextItem === void 0 ? void 0 : nextItem.focus();
-            return;
-        }
-        if (event.key === "ArrowUp") {
-            const prevItem = getNewFocusableItem(-1, searchListRef.current, getSelector());
-            prevItem === null || prevItem === void 0 ? void 0 : prevItem.focus();
-            return;
-        }
-        if (event.key === "ArrowRight" && isListItem) {
-            const nextItem = getNewFocusableItem(1, searchListRef.current, `[data-close-button="true"]`);
-            nextItem === null || nextItem === void 0 ? void 0 : nextItem.focus();
-            return;
-        }
-        if (event.key === "ArrowLeft" && isButtonItem) {
-            const prevItem = getNewFocusableItem(-1, searchListRef.current, `[data-list-item="true"]`);
-            prevItem === null || prevItem === void 0 ? void 0 : prevItem.focus();
-            return;
-        }
-    }, [searchListRef]);
-    const memoizedRecentDataArr = useMemo(() => recentItems.filter(item => !removedItems.includes(item.id)).reverse(), [recentItems, removedItems]);
-    const memoizedRecentData = useMemo(() => {
-        if (currentMode !== "recent" && currentMode !== "history") {
-            return [];
-        }
-        const recentDataArr = currentMode === "history" ? memoizedRecentDataArr : memoizedRecentDataArr.slice(0, waitingItemsLimit);
-        return recentDataArr.map(item => (_jsx(FiltersSearchItemData, { id: item.id, name: item.name, isActive: false, secondary: item.description, onClose: handleRemove(item.id), onClick: memoizedRecentSearchItemClick(item.id, item.type), icon: getIconByType(item.type || onlyOneType), isMobile: isMobile, isDrive: isDrive }, `${currentMode}-${item.id}`)));
-    }, [currentMode, memoizedRecentDataArr, handleRemove, memoizedRecentSearchItemClick, getIconByType, onlyOneType, isMobile, isDrive]);
-    const memoizedSearchData = useMemo(() => currentMode !== "search" && currentMode !== "" ? [] : searchItems.slice(0, MAX_TOTAL_RESULTS).map(item => (_jsx(FiltersSearchItemData, { id: item.id, name: item.name, isActive: isSearchModeAvailable ? (onlyOneType ? searchSelection.some(el => el.id === item.id) : searchSelection.filter(el => el.id === item.id)
-            .some(el => el.type === (item.type || NO_TYPED_SEARCH_ITEM)) || false) : false, secondary: item.description, onClose: undefined, onClick: isSearchModeAvailable ? memoizedSearchItemClick(item.id, item.type) : undefined, icon: getIconByType(item.type || onlyOneType), isMobile: isMobile, isDrive: isDrive }, `search-${item.id}-${item.type || NO_TYPED_SEARCH_ITEM}`))), [currentMode, searchItems, isSearchModeAvailable, searchSelection, memoizedSearchItemClick, getIconByType, onlyOneType, isMobile, isDrive]);
-    const memoizedSelectedData = useMemo(() => currentMode !== "selected" || initialSearchSelectionRef.current.length === 0 ? [] : initialSearchSelectionRef.current.slice(0, MAX_TOTAL_RESULTS)
-        .map(item => (_jsx(FiltersSearchItemData, { id: item.id, name: item.name, isActive: onlyOneType ? (searchSelection || []).some(el => el.id === item.id)
-            : (searchSelection || []).filter(el => el.id === item.id).some(el => el.type === (item.type || NO_TYPED_SEARCH_ITEM)) || false, secondary: item.description, onClose: undefined, onClick: memoizedSelectedItemClick(item.id, item.type), icon: getIconByType(item.type || onlyOneType), isMobile: isMobile, isDrive: isDrive }, `selected-${item.id}-${item.type || onlyOneType || NO_TYPED_SEARCH_ITEM}-${item.name}-${hasNotPopulatedName ? "notPopulated" : ""}`))), [currentMode, onlyOneType, searchSelection, memoizedSelectedItemClick, getIconByType, isMobile, isDrive, hasNotPopulatedName]);
-    const resultsToShow = useMemo(() => {
-        if (currentMode === "search") {
-            return memoizedSearchData;
-        }
-        if (currentMode === "recent" || currentMode === "history") {
-            return memoizedRecentData;
-        }
-        if (currentMode === "selected") {
-            return memoizedSelectedData;
-        }
-        return memoizedSearchData;
-    }, [currentMode, memoizedSearchData, memoizedRecentData, memoizedSelectedData]);
-    const getSearchHeaderContent = () => {
-        if (currentMode === "history") {
-            return _jsxs(_Fragment, { children: [_jsx(TextIconButton, { className: "zen-filters-search-list__header-back-button", title: translate("Back"), type: "tertiary", onClick: changeMode.bind(null, "recent"), icon: IconChevronLeft, iconPosition: ButtonIconPosition.Start }), _jsx(Button, { type: "tertiary", onClick: handleRemoveAll, children: translate("Clear all") })] });
-        }
-        if (currentMode === "recent" || currentMode === "selected") {
-            return _jsxs(_Fragment, { children: [_jsxs("div", { className: "zen-filters-search-list__header-title", children: [_jsx(Button, { type: currentMode === "recent" ? "tertiary" : "tertiary-black", className: currentMode === "recent" ? "zen-filters-search-list__header-button--active" : "", title: translate("Recent searches"), onClick: changeMode.bind(null, "recent"), children: translate("Recent searches") }), _jsx(Button, { type: currentMode === "selected" ? "tertiary" : "tertiary-black", className: currentMode === "selected" ? "zen-filters-search-list__header-button--active" : "", title: translate("Currently selected"), onClick: changeMode.bind(null, "selected"), children: translate("Currently selected") })] }), currentMode === "recent" && recentItems.length > resultsToShow.length && _jsx(Button, { type: "tertiary", onClick: changeMode.bind(null, "history"), children: translate("View history") }), currentMode === "selected" && resultsToShow.length > 0 && _jsx(Button, { type: "tertiary", onClick: memoizedClearSelectedItems, children: translate("Clear") })] });
-        }
-        if (currentMode === "search" && resultsToShow.length > 0) {
-            return _jsx("div", { className: "zen-filters-search-list__header-title", children: translate("Top results") });
-        }
-        return undefined;
+export const FiltersSearchList = ({
+  searchValue,
+  searchData,
+  recentSearches,
+  searchSelection,
+  onlyOneType,
+  handleSearchItemClick,
+  onRemoveRecentSearchItem,
+  handleRecentSearchItemClick,
+  getIconByType,
+  handleClearSearchSelection,
+  searchListRef
+}) => {
+  const {
+    translate
+  } = useLanguage();
+  const isSearchModeAvailable = Boolean(handleSearchItemClick && searchSelection);
+  const isRecentSearchesModeAvailable = Boolean(recentSearches && handleRecentSearchItemClick && onRemoveRecentSearchItem);
+  const isMobile = useMobile();
+  const isDrive = useDrive();
+  const [removedItems, setRemovedItems] = useState([]);
+  const initialSearchSelectionRef = useRef(searchSelection || []);
+  const hasNotPopulatedName = initialSearchSelectionRef.current.length === 0 ? false : initialSearchSelectionRef.current.some(el => el.name === NOT_POPULATED_NAME);
+  const getCurrentMode = useCallback(() => {
+    if (searchValue) {
+      return "search";
+    }
+    if (isSearchModeAvailable && initialSearchSelectionRef.current.length > 0) {
+      return "selected";
+    }
+    if (isRecentSearchesModeAvailable && (recentSearches === null || recentSearches === void 0 ? void 0 : recentSearches.data) && recentSearches.data.length > 0) {
+      return "recent";
+    }
+    return "";
+  }, [searchValue, isSearchModeAvailable, isRecentSearchesModeAvailable, recentSearches === null || recentSearches === void 0 ? void 0 : recentSearches.data]);
+  const [currentMode, setCurrentMode] = useState(getCurrentMode());
+  const waitingItemsLimit = 5;
+  // Handle React Query errors
+  useEffect(() => {
+    if (currentMode === "search" && (searchData === null || searchData === void 0 ? void 0 : searchData.error)) {
+      console.error("Failed to fetch search results. Error:", searchData.error);
+    }
+  }, [currentMode, searchData === null || searchData === void 0 ? void 0 : searchData.error]);
+  useEffect(() => {
+    if (currentMode !== "search" && searchValue) {
+      setCurrentMode("search");
+    }
+  }, [searchValue, currentMode]);
+  useEffect(() => {
+    if (currentMode === "recent" && searchSelection && searchSelection.length === 0) {
+      initialSearchSelectionRef.current = [];
+    }
+  }, [isSearchModeAvailable, isRecentSearchesModeAvailable, currentMode, searchSelection]);
+  // Reset history mode when search value changes
+  useEffect(() => {
+    if (currentMode === "history" && searchValue) {
+      setCurrentMode(isSearchModeAvailable ? "search" : "");
+    } else if (currentMode === "search" && !searchValue) {
+      setCurrentMode(getCurrentMode());
+    }
+  }, [currentMode, getCurrentMode, isRecentSearchesModeAvailable, isSearchModeAvailable, searchValue]);
+  useEffect(() => {
+    if (searchSelection && searchSelection.length === 0) {
+      return;
+    }
+    searchSelection === null || searchSelection === void 0 ? void 0 : searchSelection.forEach(item => {
+      const existingItem = initialSearchSelectionRef.current.find(el => onlyOneType ? el.id === item.id : el.id === item.id && el.type === item.type);
+      if (!existingItem) {
+        initialSearchSelectionRef.current = [...initialSearchSelectionRef.current, item];
+      } else if (hasNotPopulatedName) {
+        existingItem.name = item.name;
+        existingItem.description = item.description;
+        existingItem.type = item.type;
+      }
+    });
+  }, [hasNotPopulatedName, onlyOneType, searchSelection]);
+  const searchItems = useMemo(() => currentMode === "search" || currentMode === "" ? (searchData === null || searchData === void 0 ? void 0 : searchData.data) || [] : [], [currentMode, searchData === null || searchData === void 0 ? void 0 : searchData.data]);
+  const recentItems = useMemo(() => currentMode === "recent" || currentMode === "history" ? (recentSearches === null || recentSearches === void 0 ? void 0 : recentSearches.data) || [] : [], [currentMode, recentSearches === null || recentSearches === void 0 ? void 0 : recentSearches.data]);
+  const isLoading = currentMode === "search" && (searchData === null || searchData === void 0 ? void 0 : searchData.isLoading) || (currentMode === "recent" || currentMode === "history" ? recentSearches === null || recentSearches === void 0 ? void 0 : recentSearches.isLoading : false) || false;
+  const changeMode = useCallback(newVal => {
+    setCurrentMode(newVal);
+    setRemovedItems([]);
+    // Note: In React Query implementation, the parent component should handle
+    // refetching data when switching between modes
+  }, []);
+  const handleRemove = useCallback(itemId => () => {
+    var _a;
+    setRemovedItems(prev => [...prev, itemId]);
+    onRemoveRecentSearchItem && onRemoveRecentSearchItem([itemId]);
+    // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+    const firstItem = (_a = searchListRef.current) === null || _a === void 0 ? void 0 : _a.querySelector(FOCUSABLE_SELECTOR);
+    firstItem === null || firstItem === void 0 ? void 0 : firstItem.focus();
+  }, [onRemoveRecentSearchItem, searchListRef]);
+  const handleRemoveAll = useCallback(() => {
+    setRemovedItems(recentItems.map(item => item.id));
+    onRemoveRecentSearchItem && onRemoveRecentSearchItem(recentItems.map(item => item.id));
+    changeMode(getCurrentMode());
+  }, [recentItems, onRemoveRecentSearchItem, changeMode, getCurrentMode]);
+  const memoizedSearchItemClick = useCallback((itemId, itemType) => () => {
+    const currentSearchItem = onlyOneType && !itemType ? searchItems.find(item => item.id === itemId) : searchItems.find(item => item.id === itemId && item.type === itemType);
+    currentSearchItem && handleSearchItemClick && handleSearchItemClick(currentSearchItem);
+  }, [handleSearchItemClick, onlyOneType, searchItems]);
+  const memoizedSelectedItemClick = useCallback((itemId, itemType) => () => {
+    const currentSelectedItem = onlyOneType && !itemType ? initialSearchSelectionRef.current.find(item => item.id === itemId) : initialSearchSelectionRef.current.find(item => item.id === itemId && item.type === itemType);
+    currentSelectedItem && handleSearchItemClick && handleSearchItemClick(currentSelectedItem);
+  }, [handleSearchItemClick, onlyOneType]);
+  const memoizedRecentSearchItemClick = useCallback((itemId, itemType) => () => {
+    const currentSearchItem = recentItems.find(item => item.id === itemId && item.type === itemType);
+    currentSearchItem && handleRecentSearchItemClick && handleRecentSearchItemClick(currentSearchItem);
+  }, [handleRecentSearchItemClick, recentItems]);
+  const memoizedClearSelectedItems = useCallback(() => {
+    var _a;
+    handleClearSearchSelection === null || handleClearSearchSelection === void 0 ? void 0 : handleClearSearchSelection();
+    initialSearchSelectionRef.current = [];
+    setCurrentMode(isRecentSearchesModeAvailable && ((_a = recentSearches === null || recentSearches === void 0 ? void 0 : recentSearches.data) === null || _a === void 0 ? void 0 : _a.length) ? "recent" : "");
+  }, [handleClearSearchSelection, isRecentSearchesModeAvailable, recentSearches]);
+  const handleKeyDown = useCallback(event => {
+    const isListItem = event.target instanceof HTMLElement && event.target.dataset.listItem === "true";
+    const isButtonItem = event.target instanceof HTMLElement && event.target.dataset.closeButton === "true";
+    const getSelector = () => {
+      if (isListItem) {
+        return `[data-list-item="true"]`;
+      }
+      if (isButtonItem) {
+        return `[data-close-button="true"]`;
+      }
+      return undefined;
     };
-    const searchHeaderContent = getSearchHeaderContent();
-    return _jsxs("div", { className: "zen-filters-search-list", children: [searchHeaderContent ? _jsx("div", { className: classNames(["zen-filters-search-list__header", isDrive ? (isMobile ? "zen-filters-search-list__header--drive" : "zen-filters-search-list__header--drive-tablet") : ""]), children: searchHeaderContent }) : null, _jsx("div", { ref: searchListRef, children: _jsx(List, { className: "zen-filters-search-list__data", onKeyDown: handleKeyDown, isLoading: currentMode === "selected" ? false : isLoading, type: "data", waitingItems: waitingItemsLimit, children: resultsToShow }) }), !isLoading && resultsToShow.length === 0 ? _jsx(EmptySearchList, { children: translate("No data available") }) : null] });
-};
+    if (event.key === "ArrowDown") {
+      const nextItem = getNewFocusableItem(1, searchListRef.current, getSelector());
+      nextItem === null || nextItem === void 0 ? void 0 : nextItem.focus();
+      return;
+    }
+    if (event.key === "ArrowUp") {
+      const prevItem = getNewFocusableItem(-1, searchListRef.current, getSelector());
+      prevItem === null || prevItem === void 0 ? void 0 : prevItem.focus();
+      return;
+    }
+    if (event.key === "ArrowRight" && isListItem) {
+      const nextItem = getNewFocusableItem(1, searchListRef.current, `[data-close-button="true"]`);
+      nextItem === null || nextItem === void 0 ? void 0 : nextItem.focus();
+      return;
+    }
+    if (event.key === "ArrowLeft" && isButtonItem) {
+      const prevItem = getNewFocusableItem(-1, searchListRef.current, `[data-list-item="true"]`);
+      prevItem === null || prevItem === void 0 ? void 0 : prevItem.focus();
+      return;
+    }
+  }, [searchListRef]);
+  const memoizedRecentDataArr = useMemo(() => recentItems.filter(item => !removedItems.includes(item.id)).reverse(), [recentItems, removedItems]);
+  const memoizedRecentData = useMemo(() => {
+    if (currentMode !== "recent" && currentMode !== "history") {
+      return [];
+    }
+    const recentDataArr = currentMode === "history" ? memoizedRecentDataArr : memoizedRecentDataArr.slice(0, waitingItemsLimit);
+    return recentDataArr.map(item => _jsx(FiltersSearchItemData, {
+      id: item.id,
+      name: item.name,
+      isActive: false,
+      secondary: item.description,
+      onClose: handleRemove(item.id),
+      onClick: memoizedRecentSearchItemClick(item.id, item.type),
+      icon: getIconByType(item.type || onlyOneType),
+      isMobile: isMobile,
+      isDrive: isDrive
+    }, `${currentMode}-${item.id}`));
+  }, [currentMode, memoizedRecentDataArr, handleRemove, memoizedRecentSearchItemClick, getIconByType, onlyOneType, isMobile, isDrive]);
+  const memoizedSearchData = useMemo(() => currentMode !== "search" && currentMode !== "" ? [] : searchItems.slice(0, MAX_TOTAL_RESULTS).map(item => _jsx(FiltersSearchItemData, {
+    id: item.id,
+    name: item.name,
+    isActive: isSearchModeAvailable ? onlyOneType ? searchSelection.some(el => el.id === item.id) : searchSelection.filter(el => el.id === item.id).some(el => el.type === (item.type || NO_TYPED_SEARCH_ITEM)) || false : false,
+    secondary: item.description,
+    onClose: undefined,
+    onClick: isSearchModeAvailable ? memoizedSearchItemClick(item.id, item.type) : undefined,
+    icon: getIconByType(item.type || onlyOneType),
+    isMobile: isMobile,
+    isDrive: isDrive
+  }, `search-${item.id}-${item.type || NO_TYPED_SEARCH_ITEM}`)), [currentMode, searchItems, isSearchModeAvailable, searchSelection, memoizedSearchItemClick, getIconByType, onlyOneType, isMobile, isDrive]);
+  const memoizedSelectedData = useMemo(() => currentMode !== "selected" || initialSearchSelectionRef.current.length === 0 ? [] : initialSearchSelectionRef.current.slice(0, MAX_TOTAL_RESULTS).map(item => _jsx(FiltersSearchItemData, {
+    id: item.id,
+    name: item.name,
+    isActive: onlyOneType ? (searchSelection || []).some(el => el.id === item.id) : (searchSelection || []).filter(el => el.id === item.id).some(el => el.type === (item.type || NO_TYPED_SEARCH_ITEM)) || false,
+    secondary: item.description,
+    onClose: undefined,
+    onClick: memoizedSelectedItemClick(item.id, item.type),
+    icon: getIconByType(item.type || onlyOneType),
+    isMobile: isMobile,
+    isDrive: isDrive
+  }, `selected-${item.id}-${item.type || onlyOneType || NO_TYPED_SEARCH_ITEM}-${item.name}-${hasNotPopulatedName ? "notPopulated" : ""}`)), [currentMode, onlyOneType, searchSelection, memoizedSelectedItemClick, getIconByType, isMobile, isDrive, hasNotPopulatedName]);
+  const resultsToShow = useMemo(() => {
+    if (currentMode === "search") {
+      return memoizedSearchData;
+    }
+    if (currentMode === "recent" || currentMode === "history") {
+      return memoizedRecentData;
+    }
+    if (currentMode === "selected") {
+      return memoizedSelectedData;
+    }
+    return memoizedSearchData;
+  }, [currentMode, memoizedSearchData, memoizedRecentData, memoizedSelectedData]);
+  const getSearchHeaderContent = () => {
+    if (currentMode === "history") {
+      return _jsxs(_Fragment, {
+        children: [_jsx(TextIconButton, {
+          className: "zen-filters-search-list__header-back-button",
+          title: translate("Back"),
+          type: "tertiary",
+          onClick: changeMode.bind(null, "recent"),
+          icon: IconChevronLeft,
+          iconPosition: ButtonIconPosition.Start
+        }), _jsx(Button, {
+          type: "tertiary",
+          onClick: handleRemoveAll,
+          children: translate("Clear all")
+        })]
+      });
+    }
+    if (currentMode === "recent" || currentMode === "selected") {
+      return _jsxs(_Fragment, {
+        children: [_jsxs("div", {
+          className: "zen-filters-search-list__header-title",
+          children: [_jsx(Button, {
+            type: currentMode === "recent" ? "tertiary" : "tertiary-black",
+            className: currentMode === "recent" ? "zen-filters-search-list__header-button--active" : "",
+            title: translate("Recent searches"),
+            onClick: changeMode.bind(null, "recent"),
+            children: translate("Recent searches")
+          }), _jsx(Button, {
+            type: currentMode === "selected" ? "tertiary" : "tertiary-black",
+            className: currentMode === "selected" ? "zen-filters-search-list__header-button--active" : "",
+            title: translate("Currently selected"),
+            onClick: changeMode.bind(null, "selected"),
+            children: translate("Currently selected")
+          })]
+        }), currentMode === "recent" && recentItems.length > resultsToShow.length && _jsx(Button, {
+          type: "tertiary",
+          onClick: changeMode.bind(null, "history"),
+          children: translate("View history")
+        }), currentMode === "selected" && resultsToShow.length > 0 && _jsx(Button, {
+          type: "tertiary",
+          onClick: memoizedClearSelectedItems,
+          children: translate("Clear")
+        })]
+      });
+    }
+    if (currentMode === "search" && resultsToShow.length > 0) {
+      return _jsx("div", {
+        className: "zen-filters-search-list__header-title",
+        children: translate("Top results")
+      });
+    }
+    return undefined;
+  };
+  const searchHeaderContent = getSearchHeaderContent();
+  return _jsxs("div", {
+    className: "zen-filters-search-list",
+    children: [searchHeaderContent ? _jsx("div", {
+      className: classNames(["zen-filters-search-list__header", isDrive ? isMobile ? "zen-filters-search-list__header--drive" : "zen-filters-search-list__header--drive-tablet" : ""]),
+      children: searchHeaderContent
+    }) : null, _jsx("div", {
+      ref: searchListRef,
+      children: _jsx(List, {
+        className: "zen-filters-search-list__data",
+        onKeyDown: handleKeyDown,
+        isLoading: currentMode === "selected" ? false : isLoading,
+        type: "data",
+        waitingItems: waitingItemsLimit,
+        children: resultsToShow
+      })
+    }), !isLoading && resultsToShow.length === 0 ? _jsx(EmptySearchList, {
+      children: translate("No data available")
+    }) : null]
+  });
+};