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

package/dist/filters/components/filtersSearchList.js

@@ -1,9 +1,115 @@
 "use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
+
+const {
+  injectString
+} = require("../../utils/localization/translationsDictionary");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
 exports.FiltersSearchList = exports.NOT_POPULATED_NAME = exports.KEYWORD_TYPE = exports.KEYWORD_ID = exports.NO_TYPED_SEARCH_ITEM = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const list_1 = require("../../list/list");
+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");
 const useLanguage_1 = require("../../utils/localization/useLanguage");
 const button_1 = require("../../button/button");
 const textIconButton_1 = require("../../textIconButton/textIconButton");
@@ -21,183 +127,279 @@ exports.NO_TYPED_SEARCH_ITEM = "noTypedSearchItem";
 exports.KEYWORD_ID = "keywordId";
 exports.KEYWORD_TYPE = "keyword";
 exports.NOT_POPULATED_NAME = "...";
-const FiltersSearchList = ({ searchValue, searchData, recentSearches, searchSelection, onlyOneType, handleSearchItemClick, onRemoveRecentSearchItem, handleRecentSearchItemClick, getIconByType, handleClearSearchSelection, searchListRef }) => {
-    const { translate } = (0, useLanguage_1.useLanguage)();
-    const isSearchModeAvailable = Boolean(handleSearchItemClick && searchSelection);
-    const isRecentSearchesModeAvailable = Boolean(recentSearches && handleRecentSearchItemClick && onRemoveRecentSearchItem);
-    const isMobile = (0, useMobile_1.useMobile)();
-    const isDrive = (0, useDrive_1.useDrive)();
-    const [removedItems, setRemovedItems] = (0, react_1.useState)([]);
-    const initialSearchSelectionRef = (0, react_1.useRef)(searchSelection || []);
-    const hasNotPopulatedName = initialSearchSelectionRef.current.length === 0 ? false : initialSearchSelectionRef.current.some(el => el.name === exports.NOT_POPULATED_NAME);
-    const getCurrentMode = (0, react_1.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] = (0, react_1.useState)(getCurrentMode());
-    const waitingItemsLimit = 5;
-    // Handle React Query errors
-    (0, react_1.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]);
-    (0, react_1.useEffect)(() => {
-        if (currentMode !== "search" && searchValue) {
-            setCurrentMode("search");
-        }
-    }, [searchValue, currentMode]);
-    (0, react_1.useEffect)(() => {
-        if (currentMode === "recent" && searchSelection && searchSelection.length === 0) {
-            initialSearchSelectionRef.current = [];
-        }
-    }, [isSearchModeAvailable, isRecentSearchesModeAvailable, currentMode, searchSelection]);
-    // Reset history mode when search value changes
-    (0, react_1.useEffect)(() => {
-        if (currentMode === "history" && searchValue) {
-            setCurrentMode(isSearchModeAvailable ? "search" : "");
-        }
-        else if (currentMode === "search" && !searchValue) {
-            setCurrentMode(getCurrentMode());
-        }
-    }, [currentMode, getCurrentMode, isRecentSearchesModeAvailable, isSearchModeAvailable, searchValue]);
-    (0, react_1.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 = (0, react_1.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 = (0, react_1.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 = (0, react_1.useCallback)((newVal) => {
-        setCurrentMode(newVal);
-        setRemovedItems([]);
-        // Note: In React Query implementation, the parent component should handle
-        // refetching data when switching between modes
-    }, []);
-    const handleRemove = (0, react_1.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(focusableSelector_1.FOCUSABLE_SELECTOR);
-        firstItem === null || firstItem === void 0 ? void 0 : firstItem.focus();
-    }, [onRemoveRecentSearchItem, searchListRef]);
-    const handleRemoveAll = (0, react_1.useCallback)(() => {
-        setRemovedItems(recentItems.map(item => item.id));
-        onRemoveRecentSearchItem && onRemoveRecentSearchItem(recentItems.map(item => item.id));
-        changeMode(getCurrentMode());
-    }, [recentItems, onRemoveRecentSearchItem, changeMode, getCurrentMode]);
-    const memoizedSearchItemClick = (0, react_1.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 = (0, react_1.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 = (0, react_1.useCallback)((itemId, itemType) => () => {
-        const currentSearchItem = recentItems.find(item => item.id === itemId && item.type === itemType);
-        currentSearchItem && handleRecentSearchItemClick && handleRecentSearchItemClick(currentSearchItem);
-    }, [handleRecentSearchItemClick, recentItems]);
-    const memoizedClearSelectedItems = (0, react_1.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 = (0, react_1.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 = (0, keyboardHelpers_1.getNewFocusableItem)(1, searchListRef.current, getSelector());
-            nextItem === null || nextItem === void 0 ? void 0 : nextItem.focus();
-            return;
-        }
-        if (event.key === "ArrowUp") {
-            const prevItem = (0, keyboardHelpers_1.getNewFocusableItem)(-1, searchListRef.current, getSelector());
-            prevItem === null || prevItem === void 0 ? void 0 : prevItem.focus();
-            return;
-        }
-        if (event.key === "ArrowRight" && isListItem) {
-            const nextItem = (0, keyboardHelpers_1.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 = (0, keyboardHelpers_1.getNewFocusableItem)(-1, searchListRef.current, `[data-list-item="true"]`);
-            prevItem === null || prevItem === void 0 ? void 0 : prevItem.focus();
-            return;
-        }
-    }, [searchListRef]);
-    const memoizedRecentDataArr = (0, react_1.useMemo)(() => recentItems.filter(item => !removedItems.includes(item.id)).reverse(), [recentItems, removedItems]);
-    const memoizedRecentData = (0, react_1.useMemo)(() => {
-        if (currentMode !== "recent" && currentMode !== "history") {
-            return [];
-        }
-        const recentDataArr = currentMode === "history" ? memoizedRecentDataArr : memoizedRecentDataArr.slice(0, waitingItemsLimit);
-        return recentDataArr.map(item => ((0, jsx_runtime_1.jsx)(filtersSearchItemData_1.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 = (0, react_1.useMemo)(() => currentMode !== "search" && currentMode !== "" ? [] : searchItems.slice(0, filtersHelper_1.MAX_TOTAL_RESULTS).map(item => ((0, jsx_runtime_1.jsx)(filtersSearchItemData_1.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 || exports.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 || exports.NO_TYPED_SEARCH_ITEM}`))), [currentMode, searchItems, isSearchModeAvailable, searchSelection, memoizedSearchItemClick, getIconByType, onlyOneType, isMobile, isDrive]);
-    const memoizedSelectedData = (0, react_1.useMemo)(() => currentMode !== "selected" || initialSearchSelectionRef.current.length === 0 ? [] : initialSearchSelectionRef.current.slice(0, filtersHelper_1.MAX_TOTAL_RESULTS)
-        .map(item => ((0, jsx_runtime_1.jsx)(filtersSearchItemData_1.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 || exports.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 || exports.NO_TYPED_SEARCH_ITEM}-${item.name}-${hasNotPopulatedName ? "notPopulated" : ""}`))), [currentMode, onlyOneType, searchSelection, memoizedSelectedItemClick, getIconByType, isMobile, isDrive, hasNotPopulatedName]);
-    const resultsToShow = (0, react_1.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 (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(textIconButton_1.TextIconButton, { className: "zen-filters-search-list__header-back-button", title: translate("Back"), type: "tertiary", onClick: changeMode.bind(null, "recent"), icon: iconChevronLeft_1.IconChevronLeft, iconPosition: textIconButton_2.ButtonIconPosition.Start }), (0, jsx_runtime_1.jsx)(button_1.Button, { type: "tertiary", onClick: handleRemoveAll, children: translate("Clear all") })] });
-        }
-        if (currentMode === "recent" || currentMode === "selected") {
-            return (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { className: "zen-filters-search-list__header-title", children: [(0, jsx_runtime_1.jsx)(button_1.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") }), (0, jsx_runtime_1.jsx)(button_1.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 && (0, jsx_runtime_1.jsx)(button_1.Button, { type: "tertiary", onClick: changeMode.bind(null, "history"), children: translate("View history") }), currentMode === "selected" && resultsToShow.length > 0 && (0, jsx_runtime_1.jsx)(button_1.Button, { type: "tertiary", onClick: memoizedClearSelectedItems, children: translate("Clear") })] });
-        }
-        if (currentMode === "search" && resultsToShow.length > 0) {
-            return (0, jsx_runtime_1.jsx)("div", { className: "zen-filters-search-list__header-title", children: translate("Top results") });
-        }
-        return undefined;
+const FiltersSearchList = ({
+  searchValue,
+  searchData,
+  recentSearches,
+  searchSelection,
+  onlyOneType,
+  handleSearchItemClick,
+  onRemoveRecentSearchItem,
+  handleRecentSearchItemClick,
+  getIconByType,
+  handleClearSearchSelection,
+  searchListRef
+}) => {
+  const {
+    translate
+  } = (0, useLanguage_1.useLanguage)();
+  const isSearchModeAvailable = Boolean(handleSearchItemClick && searchSelection);
+  const isRecentSearchesModeAvailable = Boolean(recentSearches && handleRecentSearchItemClick && onRemoveRecentSearchItem);
+  const isMobile = (0, useMobile_1.useMobile)();
+  const isDrive = (0, useDrive_1.useDrive)();
+  const [removedItems, setRemovedItems] = (0, react_1.useState)([]);
+  const initialSearchSelectionRef = (0, react_1.useRef)(searchSelection || []);
+  const hasNotPopulatedName = initialSearchSelectionRef.current.length === 0 ? false : initialSearchSelectionRef.current.some(el => el.name === exports.NOT_POPULATED_NAME);
+  const getCurrentMode = (0, react_1.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] = (0, react_1.useState)(getCurrentMode());
+  const waitingItemsLimit = 5;
+  // Handle React Query errors
+  (0, react_1.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]);
+  (0, react_1.useEffect)(() => {
+    if (currentMode !== "search" && searchValue) {
+      setCurrentMode("search");
+    }
+  }, [searchValue, currentMode]);
+  (0, react_1.useEffect)(() => {
+    if (currentMode === "recent" && searchSelection && searchSelection.length === 0) {
+      initialSearchSelectionRef.current = [];
+    }
+  }, [isSearchModeAvailable, isRecentSearchesModeAvailable, currentMode, searchSelection]);
+  // Reset history mode when search value changes
+  (0, react_1.useEffect)(() => {
+    if (currentMode === "history" && searchValue) {
+      setCurrentMode(isSearchModeAvailable ? "search" : "");
+    } else if (currentMode === "search" && !searchValue) {
+      setCurrentMode(getCurrentMode());
+    }
+  }, [currentMode, getCurrentMode, isRecentSearchesModeAvailable, isSearchModeAvailable, searchValue]);
+  (0, react_1.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 = (0, react_1.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 = (0, react_1.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 = (0, react_1.useCallback)(newVal => {
+    setCurrentMode(newVal);
+    setRemovedItems([]);
+    // Note: In React Query implementation, the parent component should handle
+    // refetching data when switching between modes
+  }, []);
+  const handleRemove = (0, react_1.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(focusableSelector_1.FOCUSABLE_SELECTOR);
+    firstItem === null || firstItem === void 0 ? void 0 : firstItem.focus();
+  }, [onRemoveRecentSearchItem, searchListRef]);
+  const handleRemoveAll = (0, react_1.useCallback)(() => {
+    setRemovedItems(recentItems.map(item => item.id));
+    onRemoveRecentSearchItem && onRemoveRecentSearchItem(recentItems.map(item => item.id));
+    changeMode(getCurrentMode());
+  }, [recentItems, onRemoveRecentSearchItem, changeMode, getCurrentMode]);
+  const memoizedSearchItemClick = (0, react_1.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 = (0, react_1.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 = (0, react_1.useCallback)((itemId, itemType) => () => {
+    const currentSearchItem = recentItems.find(item => item.id === itemId && item.type === itemType);
+    currentSearchItem && handleRecentSearchItemClick && handleRecentSearchItemClick(currentSearchItem);
+  }, [handleRecentSearchItemClick, recentItems]);
+  const memoizedClearSelectedItems = (0, react_1.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 = (0, react_1.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 (0, jsx_runtime_1.jsxs)("div", { className: "zen-filters-search-list", children: [searchHeaderContent ? (0, jsx_runtime_1.jsx)("div", { className: (0, classNames_1.classNames)(["zen-filters-search-list__header", isDrive ? (isMobile ? "zen-filters-search-list__header--drive" : "zen-filters-search-list__header--drive-tablet") : ""]), children: searchHeaderContent }) : null, (0, jsx_runtime_1.jsx)("div", { ref: searchListRef, children: (0, jsx_runtime_1.jsx)(list_1.List, { className: "zen-filters-search-list__data", onKeyDown: handleKeyDown, isLoading: currentMode === "selected" ? false : isLoading, type: "data", waitingItems: waitingItemsLimit, children: resultsToShow }) }), !isLoading && resultsToShow.length === 0 ? (0, jsx_runtime_1.jsx)(emptySearchList_1.EmptySearchList, { children: translate("No data available") }) : null] });
+    if (event.key === "ArrowDown") {
+      const nextItem = (0, keyboardHelpers_1.getNewFocusableItem)(1, searchListRef.current, getSelector());
+      nextItem === null || nextItem === void 0 ? void 0 : nextItem.focus();
+      return;
+    }
+    if (event.key === "ArrowUp") {
+      const prevItem = (0, keyboardHelpers_1.getNewFocusableItem)(-1, searchListRef.current, getSelector());
+      prevItem === null || prevItem === void 0 ? void 0 : prevItem.focus();
+      return;
+    }
+    if (event.key === "ArrowRight" && isListItem) {
+      const nextItem = (0, keyboardHelpers_1.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 = (0, keyboardHelpers_1.getNewFocusableItem)(-1, searchListRef.current, `[data-list-item="true"]`);
+      prevItem === null || prevItem === void 0 ? void 0 : prevItem.focus();
+      return;
+    }
+  }, [searchListRef]);
+  const memoizedRecentDataArr = (0, react_1.useMemo)(() => recentItems.filter(item => !removedItems.includes(item.id)).reverse(), [recentItems, removedItems]);
+  const memoizedRecentData = (0, react_1.useMemo)(() => {
+    if (currentMode !== "recent" && currentMode !== "history") {
+      return [];
+    }
+    const recentDataArr = currentMode === "history" ? memoizedRecentDataArr : memoizedRecentDataArr.slice(0, waitingItemsLimit);
+    return recentDataArr.map(item => (0, jsx_runtime_1.jsx)(filtersSearchItemData_1.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 = (0, react_1.useMemo)(() => currentMode !== "search" && currentMode !== "" ? [] : searchItems.slice(0, filtersHelper_1.MAX_TOTAL_RESULTS).map(item => (0, jsx_runtime_1.jsx)(filtersSearchItemData_1.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 || exports.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 || exports.NO_TYPED_SEARCH_ITEM}`)), [currentMode, searchItems, isSearchModeAvailable, searchSelection, memoizedSearchItemClick, getIconByType, onlyOneType, isMobile, isDrive]);
+  const memoizedSelectedData = (0, react_1.useMemo)(() => currentMode !== "selected" || initialSearchSelectionRef.current.length === 0 ? [] : initialSearchSelectionRef.current.slice(0, filtersHelper_1.MAX_TOTAL_RESULTS).map(item => (0, jsx_runtime_1.jsx)(filtersSearchItemData_1.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 || exports.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 || exports.NO_TYPED_SEARCH_ITEM}-${item.name}-${hasNotPopulatedName ? "notPopulated" : ""}`)), [currentMode, onlyOneType, searchSelection, memoizedSelectedItemClick, getIconByType, isMobile, isDrive, hasNotPopulatedName]);
+  const resultsToShow = (0, react_1.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 (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, {
+        children: [(0, jsx_runtime_1.jsx)(textIconButton_1.TextIconButton, {
+          className: "zen-filters-search-list__header-back-button",
+          title: translate("Back"),
+          type: "tertiary",
+          onClick: changeMode.bind(null, "recent"),
+          icon: iconChevronLeft_1.IconChevronLeft,
+          iconPosition: textIconButton_2.ButtonIconPosition.Start
+        }), (0, jsx_runtime_1.jsx)(button_1.Button, {
+          type: "tertiary",
+          onClick: handleRemoveAll,
+          children: translate("Clear all")
+        })]
+      });
+    }
+    if (currentMode === "recent" || currentMode === "selected") {
+      return (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, {
+        children: [(0, jsx_runtime_1.jsxs)("div", {
+          className: "zen-filters-search-list__header-title",
+          children: [(0, jsx_runtime_1.jsx)(button_1.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")
+          }), (0, jsx_runtime_1.jsx)(button_1.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 && (0, jsx_runtime_1.jsx)(button_1.Button, {
+          type: "tertiary",
+          onClick: changeMode.bind(null, "history"),
+          children: translate("View history")
+        }), currentMode === "selected" && resultsToShow.length > 0 && (0, jsx_runtime_1.jsx)(button_1.Button, {
+          type: "tertiary",
+          onClick: memoizedClearSelectedItems,
+          children: translate("Clear")
+        })]
+      });
+    }
+    if (currentMode === "search" && resultsToShow.length > 0) {
+      return (0, jsx_runtime_1.jsx)("div", {
+        className: "zen-filters-search-list__header-title",
+        children: translate("Top results")
+      });
+    }
+    return undefined;
+  };
+  const searchHeaderContent = getSearchHeaderContent();
+  return (0, jsx_runtime_1.jsxs)("div", {
+    className: "zen-filters-search-list",
+    children: [searchHeaderContent ? (0, jsx_runtime_1.jsx)("div", {
+      className: (0, classNames_1.classNames)(["zen-filters-search-list__header", isDrive ? isMobile ? "zen-filters-search-list__header--drive" : "zen-filters-search-list__header--drive-tablet" : ""]),
+      children: searchHeaderContent
+    }) : null, (0, jsx_runtime_1.jsx)("div", {
+      ref: searchListRef,
+      children: (0, jsx_runtime_1.jsx)(list_1.List, {
+        className: "zen-filters-search-list__data",
+        onKeyDown: handleKeyDown,
+        isLoading: currentMode === "selected" ? false : isLoading,
+        type: "data",
+        waitingItems: waitingItemsLimit,
+        children: resultsToShow
+      })
+    }), !isLoading && resultsToShow.length === 0 ? (0, jsx_runtime_1.jsx)(emptySearchList_1.EmptySearchList, {
+      children: translate("No data available")
+    }) : null]
+  });
 };
-exports.FiltersSearchList = FiltersSearchList;
+exports.FiltersSearchList = FiltersSearchList;