@geotab/zenith 3.5.0 → 3.6.0-beta.0

package/dist/filters/components/filtersSearchItemData.js

@@ -12,34 +12,138 @@ const react_1 = require("react");
 const useLanguage_1 = require("../../utils/localization/useLanguage");
 const button_1 = require("../../button/button");
 const classNames_1 = require("../../commonHelpers/classNames/classNames");
-const isActiveElement_1 = require("../../list/utils/isActiveElement");
 const iconClose_1 = require("../../icons/iconClose");
-injectString("cs", "Close", "Zav\u0159\xEDt");
-injectString("da-DK", "Close", "Luk");
-injectString("de", "Close", "Schlie\xDFen");
-injectString("en", "Close", "Close");
-injectString("es", "Close", "Cerrar");
-injectString("fi-FI", "Close", "Sulje");
-injectString("fr", "Close", "Fermer");
-injectString("fr-FR", "Close", "Fermer");
-injectString("hu-HU", "Close", "Z\xE1rd be.");
-injectString("id", "Close", "Tutup");
-injectString("it", "Close", "Chiudere");
-injectString("ja", "Close", "\u9589\u3058\u308B");
-injectString("ko-KR", "Close", "\uB2EB\uAE30");
-injectString("ms", "Close", "Tutup");
-injectString("nb-NO", "Close", "Lukk");
-injectString("nl", "Close", "Sluiten");
-injectString("pl", "Close", "Zamknij");
-injectString("pt-BR", "Close", "Fechar");
-injectString("pt-PT", "Close", "Fechar");
-injectString("sk-SK", "Close", "Zatvor");
-injectString("sv", "Close", "St\xE4ng");
-injectString("th", "Close", "\u0E1B\u0E34\u0E14");
-injectString("tr", "Close", "Kapat");
-injectString("zh-Hans", "Close", "\u5173\u95ED");
-injectString("zh-TW", "Close", "\u95DC\u9589");
-injectString("ro-RO", "Close", "\xCEnchide\u021Bi");
+injectString("cs", "Remove", "Odebrat");
+injectString("da-DK", "Remove", "Fjerne");
+injectString("de", "Remove", "Entfernen");
+injectString("en", "Remove", "Remove");
+injectString("es", "Remove", "Eliminar");
+injectString("fi-FI", "Remove", "Poistaa");
+injectString("fr", "Remove", "Supprimer");
+injectString("fr-FR", "Remove", "Supprimer");
+injectString("hu-HU", "Remove", "T\xE1vol\xEDtsa el");
+injectString("id", "Remove", "Hapus");
+injectString("it", "Remove", "Rimuovere");
+injectString("ja", "Remove", "\u524A\u9664");
+injectString("ko-KR", "Remove", "\uC81C\uAC70");
+injectString("ms", "Remove", "Alih Keluar");
+injectString("nb-NO", "Remove", "Fjern");
+injectString("nl", "Remove", "Verwijderen");
+injectString("pl", "Remove", "Usu\u0144");
+injectString("pt-BR", "Remove", "Remover");
+injectString("pt-PT", "Remove", "Remover");
+injectString("sk-SK", "Remove", "Odstr\xE1ni\u0165");
+injectString("sv", "Remove", "Ta bort");
+injectString("th", "Remove", "\u0E25\u0E1A");
+injectString("tr", "Remove", "Kald\u0131r");
+injectString("zh-Hans", "Remove", "\u5220\u9664");
+injectString("zh-TW", "Remove", "\u79FB\u9664");
+injectString("ro-RO", "Remove", "Elimina\u021Bi");
+const SearchItemContent = ({
+  icon,
+  iconClassName,
+  name,
+  secondary,
+  renderIcon
+}) => (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, {
+  children: [icon ? (0, jsx_runtime_1.jsx)("div", {
+    className: (0, classNames_1.classNames)(["zen-search-item-data__icon", iconClassName || ""]),
+    children: renderIcon(icon)
+  }) : null, (0, jsx_runtime_1.jsxs)("div", {
+    className: "zen-search-item-data__identifier",
+    children: [(0, jsx_runtime_1.jsx)("div", {
+      className: "zen-search-item-data__name",
+      children: name
+    }), secondary ? (0, jsx_runtime_1.jsx)("div", {
+      className: "zen-search-item-data__secondary",
+      children: secondary
+    }) : null]
+  })]
+});
+const SearchItemButtonVariant = ({
+  id,
+  isActive,
+  specialClassName,
+  onClick,
+  onClose,
+  handleClick,
+  handleKeyDown,
+  handleClose,
+  name,
+  secondary,
+  icon,
+  iconClassName,
+  renderIcon,
+  isDrive,
+  isMobile,
+  translate
+}) => (0, jsx_runtime_1.jsx)("li", {
+  children: (0, jsx_runtime_1.jsxs)("div", {
+    className: (0, classNames_1.classNames)(["zen-search-item-wrapper", isActive ? "zen-search-item-wrapper--active" : "", onClick ? "zen-search-item-wrapper--clickable" : "", specialClassName || ""]),
+    children: [(0, jsx_runtime_1.jsx)("div", {
+      role: onClick ? "button" : undefined,
+      tabIndex: 0,
+      className: (0, classNames_1.classNames)(["zen-search-item-data", isActive ? "zen-search-item-data--active" : "", onClick ? "zen-search-item-data--clickable" : "", onClose ? "zen-search-item-data--with-close-button" : ""]),
+      onClick: handleClick,
+      onKeyDown: handleKeyDown,
+      "aria-label": onClick ? `${name} ${secondary || ""}` : undefined,
+      "data-list-item-id": id,
+      "data-list-item": true,
+      children: (0, jsx_runtime_1.jsx)(SearchItemContent, {
+        icon: icon,
+        iconClassName: iconClassName,
+        name: name,
+        secondary: secondary,
+        renderIcon: renderIcon
+      })
+    }), onClose ? (0, jsx_runtime_1.jsx)(button_1.Button, {
+      type: "tertiary-black",
+      className: "zen-search-item-data__close",
+      "data-close-button": true,
+      title: translate("Remove"),
+      "aria-label": `${translate("Remove")} ${name} ${secondary || ""}`.trim(),
+      onClick: handleClose,
+      children: (0, jsx_runtime_1.jsx)(iconClose_1.IconClose, {
+        size: isDrive || isMobile ? "huge" : "large",
+        className: "zen-search-item-data__close-icon"
+      })
+    }) : null]
+  })
+}, id);
+const SearchItemCheckboxVariant = ({
+  id,
+  isActive,
+  specialClassName,
+  handleClick,
+  handleKeyDown,
+  name,
+  secondary,
+  icon,
+  iconClassName,
+  renderIcon
+}) => (0, jsx_runtime_1.jsx)("li", {
+  className: (0, classNames_1.classNames)(["zen-search-item-wrapper", isActive ? "zen-search-item-wrapper--active" : "", specialClassName || ""]),
+  children: (0, jsx_runtime_1.jsxs)("label", {
+    className: (0, classNames_1.classNames)(["zen-search-item-data", isActive ? "zen-search-item-data--active" : "", "zen-search-item-data--clickable"]),
+    "data-list-item-id": id,
+    htmlFor: `search-item-${id}`,
+    children: [(0, jsx_runtime_1.jsx)("input", {
+      "data-list-item": true,
+      checked: isActive,
+      onChange: handleClick,
+      onKeyDown: handleKeyDown,
+      id: `search-item-${id}`,
+      className: "zen-search-item-data__input",
+      type: "checkbox"
+    }), (0, jsx_runtime_1.jsx)(SearchItemContent, {
+      icon: icon,
+      iconClassName: iconClassName,
+      name: name,
+      secondary: secondary,
+      renderIcon: renderIcon
+    })]
+  })
+}, id);
 const FiltersSearchItemData = ({
   id,
   icon,
@@ -55,7 +159,12 @@ const FiltersSearchItemData = ({
   const {
     translate
   } = (0, useLanguage_1.useLanguage)();
-  const driveClassName = (0, react_1.useMemo)(() => isDrive ? isMobile ? "zen-search-item-data--drive" : "zen-search-item-data--drive-tablet" : "", [isDrive, isMobile]);
+  const specialClassName = (0, react_1.useMemo)(() => {
+    if (isDrive) {
+      return isMobile ? "zen-search-item-data-wrapper--drive" : "zen-search-item-data-wrapper--drive-tablet";
+    }
+    return isMobile ? "zen-search-item-data-wrapper--mobile" : "";
+  }, [isDrive, isMobile]);
   const renderIcon = (0, react_1.useCallback)((iconComponent, iClassName, className) => {
     if (typeof iconComponent === "function") {
       return (0, react_1.createElement)(iconComponent, {
@@ -65,13 +174,10 @@ const FiltersSearchItemData = ({
     }
     return iconComponent;
   }, []);
-  const handleClick = (0, react_1.useCallback)(e => {
+  const handleClick = (0, react_1.useCallback)(() => {
     if (!onClick) {
       return;
     }
-    if (e.target instanceof HTMLElement && (0, isActiveElement_1.isActiveElement)(e.target)) {
-      return;
-    }
     onClick();
   }, [onClick]);
   const handleKeyDown = (0, react_1.useCallback)(e => {
@@ -79,63 +185,45 @@ const FiltersSearchItemData = ({
       return;
     }
     if (e.key === "Enter" || e.key === " ") {
-      const isCloseButton = e.target instanceof HTMLElement && e.target.dataset.closeButton === "true";
-      if (isCloseButton) {
-        e.preventDefault();
-        e.stopPropagation();
-        onClose === null || onClose === void 0 ? void 0 : onClose();
-        return;
-      }
       e.preventDefault();
       onClick();
     }
-  }, [onClick, onClose]);
-  const handleClose = (0, react_1.useCallback)(e => {
-    if (!onClose) {
-      return;
-    }
-    console.log("handleClose");
-    e.preventDefault();
-    e.stopPropagation();
-    onClose();
+  }, [onClick]);
+  const handleClose = (0, react_1.useCallback)(() => {
+    onClose === null || onClose === void 0 ? void 0 : onClose();
   }, [onClose]);
-  return (0, jsx_runtime_1.jsx)("li", {
-    tabIndex: 0,
-    className: (0, classNames_1.classNames)(["zen-search-item-data", isActive ? "zen-search-item-data--active" : "", onClick ? "zen-search-item-data--clickable" : "", driveClassName || ""]),
-    "data-list-item-id": id,
-    onClick: handleClick,
-    onKeyDown: handleKeyDown,
-    "data-list-item": true,
-    children: (0, jsx_runtime_1.jsxs)("div", {
-      className: "zen-search-item-data__main",
-      children: [icon ? (0, jsx_runtime_1.jsx)("div", {
-        className: (0, classNames_1.classNames)(["zen-search-item-data__icon", iconClassName || ""]),
-        children: renderIcon(icon)
-      }) : null, (0, jsx_runtime_1.jsxs)("div", {
-        className: "zen-search-item-data__main-data",
-        children: [(0, jsx_runtime_1.jsxs)("div", {
-          className: "zen-search-item-data__identifier",
-          children: [(0, jsx_runtime_1.jsx)("div", {
-            className: "zen-search-item-data__name",
-            children: name
-          }), secondary ? (0, jsx_runtime_1.jsx)("div", {
-            className: "zen-search-item-data__secondary",
-            children: secondary
-          }) : null]
-        }), onClose ? (0, jsx_runtime_1.jsx)(button_1.Button, {
-          type: "tertiary-black",
-          className: "zen-search-item-data__close",
-          "data-close-button": true,
-          title: translate("Close"),
-          "aria-label": translate("Close"),
-          onClick: handleClose,
-          children: (0, jsx_runtime_1.jsx)(iconClose_1.IconClose, {
-            size: "large",
-            className: "zen-search-item-data__close-icon"
-          })
-        }) : null]
-      })]
-    })
-  }, id);
+  const shouldUseButtonVariant = onClose || !onClick;
+  if (shouldUseButtonVariant) {
+    return (0, jsx_runtime_1.jsx)(SearchItemButtonVariant, {
+      id: id,
+      isActive: isActive,
+      specialClassName: specialClassName,
+      onClick: onClick,
+      onClose: onClose,
+      handleClick: handleClick,
+      handleKeyDown: handleKeyDown,
+      handleClose: handleClose,
+      name: name,
+      secondary: secondary,
+      icon: icon,
+      iconClassName: iconClassName,
+      renderIcon: renderIcon,
+      isDrive: isDrive,
+      isMobile: isMobile,
+      translate: translate
+    });
+  }
+  return (0, jsx_runtime_1.jsx)(SearchItemCheckboxVariant, {
+    id: id,
+    isActive: isActive,
+    specialClassName: specialClassName,
+    handleClick: handleClick,
+    handleKeyDown: handleKeyDown,
+    name: name,
+    secondary: secondary,
+    icon: icon,
+    iconClassName: iconClassName,
+    renderIcon: renderIcon
+  });
 };
 exports.FiltersSearchItemData = FiltersSearchItemData;

package/dist/filters/components/filtersSearchList.d.ts

@@ -30,5 +30,7 @@ export interface ISearchList {
     getIconByType: (type?: string) => React.FC<IIcon>;
     onlyOneType?: string;
     searchListRef: React.RefObject<HTMLDivElement>;
+    applyButtonHandler?: () => void;
+    isInitialSearchSelectionState?: boolean;
 }
-export declare const FiltersSearchList: ({ searchValue, searchData, recentSearches, searchSelection, onlyOneType, handleSearchItemClick, onRemoveRecentSearchItem, handleRecentSearchItemClick, getIconByType, handleClearSearchSelection, searchListRef }: ISearchList) => import("react/jsx-runtime").JSX.Element;
+export declare const FiltersSearchList: ({ searchValue, searchData, recentSearches, searchSelection, onlyOneType, handleSearchItemClick, onRemoveRecentSearchItem, handleRecentSearchItemClick, getIconByType, handleClearSearchSelection, searchListRef, applyButtonHandler, isInitialSearchSelectionState }: ISearchList) => import("react/jsx-runtime").JSX.Element;

package/dist/filters/components/filtersSearchList.js

@@ -100,6 +100,58 @@ injectString("ro-RO", "Clear", "\u0218terge\u021Bi");
 injectString("en", "Top results", "Top results");
 injectString("pt-PT", "Top results", "Principais resultados");
 injectString("ro-RO", "Top results", "Rezultate relevante");
+injectString("cs", "Apply", "Pou\u017E\xEDt");
+injectString("da-DK", "Apply", "Anvend");
+injectString("de", "Apply", "Anwenden");
+injectString("en", "Apply", "Apply");
+injectString("es", "Apply", "Aplicar");
+injectString("fi-FI", "Apply", "K\xE4yt\xE4");
+injectString("fr", "Apply", "Appliquer");
+injectString("fr-FR", "Apply", "Appliquer");
+injectString("hu-HU", "Apply", "Alkalmazd.");
+injectString("id", "Apply", "Terapkan");
+injectString("it", "Apply", "Applicare");
+injectString("ja", "Apply", "\u9069\u7528");
+injectString("ko-KR", "Apply", "\uC801\uC6A9");
+injectString("ms", "Apply", "Gunakan");
+injectString("nb-NO", "Apply", "Bruk");
+injectString("nl", "Apply", "Toepassen");
+injectString("pl", "Apply", "Zastosuj");
+injectString("pt-BR", "Apply", "Aplicar");
+injectString("pt-PT", "Apply", "Aplicar");
+injectString("sk-SK", "Apply", "Pou\u017Ei");
+injectString("sv", "Apply", "Ans\xF6k");
+injectString("th", "Apply", "\u0E43\u0E0A\u0E49");
+injectString("tr", "Apply", "Uygula");
+injectString("zh-Hans", "Apply", "\u5E94\u7528");
+injectString("zh-TW", "Apply", "\u5957\u7528");
+injectString("ro-RO", "Apply", "Aplica\u021Bi");
+injectString("cs", "Try adjusting your search or filter.", "Zkuste upravit sv\xE9 vyhled\xE1v\xE1n\xED nebo filtr.");
+injectString("da-DK", "Try adjusting your search or filter.", "Pr\xF8v at justere din s\xF8gning eller dit filter.");
+injectString("de", "Try adjusting your search or filter.", "Versuchen Sie, die Suche oder Filter anzupassen.");
+injectString("en", "Try adjusting your search or filter.", "Try adjusting your search or filter.");
+injectString("es", "Try adjusting your search or filter.", "Pruebe ajustar la b\xFAsqueda o el filtro.");
+injectString("fi-FI", "Try adjusting your search or filter.", "Yrit\xE4 s\xE4\xE4t\xE4\xE4 hakua tai suodatinta.");
+injectString("fr", "Try adjusting your search or filter.", "Essayez d\u2019ajuster votre recherche ou votre filtre.");
+injectString("fr-FR", "Try adjusting your search or filter.", "Essayez d\u2019ajuster votre recherche ou votre filtre.");
+injectString("hu-HU", "Try adjusting your search or filter.", "Pr\xF3b\xE1ld meg m\xF3dos\xEDtani a keres\xE9st vagy a sz\u0171r\u0151t.");
+injectString("id", "Try adjusting your search or filter.", "Coba sesuaikan pencarian atau filter Anda.");
+injectString("it", "Try adjusting your search or filter.", "Provare a modificare la ricerca o a regolare i filtri.");
+injectString("ja", "Try adjusting your search or filter.", "\u691C\u7D22\u307E\u305F\u306F\u30D5\u30A3\u30EB\u30BF\u30FC\u3092\u8ABF\u6574\u3057\u3066\u307F\u3066\u304F\u3060\u3055\u3044\u3002");
+injectString("ko-KR", "Try adjusting your search or filter.", "\uAC80\uC0C9 \uB610\uB294 \uD544\uD130\uB97C \uC870\uC815\uD574 \uBCF4\uC2ED\uC2DC\uC624.");
+injectString("ms", "Try adjusting your search or filter.", "Cuba laraskan carian atau penyaring anda.");
+injectString("nb-NO", "Try adjusting your search or filter.", "Pr\xF8v \xE5 justere s\xF8ket eller filteret.");
+injectString("nl", "Try adjusting your search or filter.", "Probeer uw zoekopdracht of filter aan te passen.");
+injectString("pl", "Try adjusting your search or filter.", "Spr\xF3buj dostosowa\u0107 wyszukiwanie lub filtr.");
+injectString("pt-BR", "Try adjusting your search or filter.", "Tente ajustar sua pesquisa ou filtro.");
+injectString("pt-PT", "Try adjusting your search or filter.", "Tente ajustar a sua pesquisa ou o filtro.");
+injectString("sk-SK", "Try adjusting your search or filter.", "Sk\xFAs upravi\u0165 svoje vyh\u013Ead\xE1vanie alebo filter.");
+injectString("sv", "Try adjusting your search or filter.", "Prova att justera s\xF6kningen eller filtret.");
+injectString("th", "Try adjusting your search or filter.", "\u0E25\u0E2D\u0E07\u0E1B\u0E23\u0E31\u0E1A\u0E01\u0E32\u0E23\u0E04\u0E49\u0E19\u0E2B\u0E32\u0E2B\u0E23\u0E37\u0E2D\u0E15\u0E31\u0E27\u0E01\u0E23\u0E2D\u0E07\u0E02\u0E2D\u0E07\u0E04\u0E38\u0E13");
+injectString("tr", "Try adjusting your search or filter.", "Araman\u0131z\u0131 veya filtrenizi ayarlamay\u0131 deneyin.");
+injectString("zh-Hans", "Try adjusting your search or filter.", "\u5C1D\u8BD5\u8C03\u6574\u60A8\u7684\u641C\u7D22\u6216\u7B5B\u9009\u6761\u4EF6\u3002");
+injectString("zh-TW", "Try adjusting your search or filter.", "\u8ACB\u5617\u8A66\u8ABF\u6574\u60A8\u7684\u641C\u5C0B\u6216\u7BE9\u9078\u689D\u4EF6\u3002");
+injectString("ro-RO", "Try adjusting your search or filter.", "\xCEncerca\u021Bi s\u0103 ajusta\u021Bi c\u0103utarea sau filtrul.");
 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");
@@ -136,9 +188,10 @@ const useMobile_1 = require("../../commonHelpers/hooks/useMobile");
 const useDrive_1 = require("../../utils/theme/useDrive");
 const classNames_1 = require("../../commonHelpers/classNames/classNames");
 const filtersHelper_1 = require("../filtersHelper");
-const emptySearchList_1 = require("../../dataGrid/emptySearchList/emptySearchList");
 const keyboardHelpers_1 = require("../../utils/keyboardHelpers");
 const focusableSelector_1 = require("../../utils/focusableSelector");
+const footerButtons_1 = require("../../footerButtons/footerButtons");
+const emptyState_1 = require("../../emptyState/emptyState");
 exports.NO_TYPED_SEARCH_ITEM = "noTypedSearchItem";
 exports.KEYWORD_ID = "keywordId";
 exports.KEYWORD_TYPE = "keyword";
@@ -154,7 +207,9 @@ const FiltersSearchList = ({
   handleRecentSearchItemClick,
   getIconByType,
   handleClearSearchSelection,
-  searchListRef
+  searchListRef,
+  applyButtonHandler,
+  isInitialSearchSelectionState
   // eslint-disable-next-line complexity
 }) => {
   const {
@@ -222,7 +277,7 @@ const FiltersSearchList = ({
   }, [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 isLoading = (currentMode === "search" || currentMode === "") && (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([]);
@@ -260,6 +315,9 @@ const FiltersSearchList = ({
     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 memoizedClearSelectedItemsForApplyMode = (0, react_1.useCallback)(() => {
+    handleClearSearchSelection === null || handleClearSearchSelection === void 0 ? void 0 : handleClearSearchSelection();
+  }, [handleClearSearchSelection]);
   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";
@@ -364,21 +422,9 @@ const FiltersSearchList = ({
     }
     if (currentMode === "recent" || currentMode === "selected") {
       return (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, {
-        children: [(0, jsx_runtime_1.jsxs)("div", {
+        children: [(0, jsx_runtime_1.jsx)("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")
-          })]
+          children: currentMode === "recent" ? translate("Recent searches") : translate("Currently selected")
         }), currentMode === "recent" && recentItems.length > resultsToShow.length && (0, jsx_runtime_1.jsx)(button_1.Button, {
           type: "tertiary",
           onClick: changeMode.bind(null, "history"),
@@ -398,25 +444,68 @@ const FiltersSearchList = ({
     }
     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]
+  const getHeaderTitles = () => {
+    if (currentMode === "recent") {
+      return (0, jsx_runtime_1.jsx)("div", {
+        className: "zen-filters-search-list__header-title",
+        children: translate("Recent searches")
+      });
+    }
+    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 footer = (0, react_1.useMemo)(() => {
+    if (!applyButtonHandler) {
+      return null;
+    }
+    return (0, jsx_runtime_1.jsxs)(footerButtons_1.FooterButtons, {
+      className: "zen-filters-search-list__footer",
+      children: [currentMode === "history" || currentMode === "recent" || currentMode === "selected" && isInitialSearchSelectionState ? null : (0, jsx_runtime_1.jsx)(button_1.Button, {
+        type: "primary",
+        onClick: applyButtonHandler,
+        children: translate("Apply")
+      }, "primary"), currentMode === "history" ? (0, jsx_runtime_1.jsx)(button_1.Button, {
+        type: "tertiary",
+        onClick: handleRemoveAll,
+        children: translate("Clear all")
+      }) : null, 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")
+      }) : null, currentMode === "selected" && resultsToShow.length > 0 && (searchSelection || []).length > 0 ? (0, jsx_runtime_1.jsx)(button_1.Button, {
+        type: "tertiary",
+        onClick: memoizedClearSelectedItemsForApplyMode,
+        children: translate("Clear")
+      }) : null]
+    });
+  }, [changeMode, currentMode, handleRemoveAll, applyButtonHandler, memoizedClearSelectedItemsForApplyMode, recentItems.length, resultsToShow.length, translate, isInitialSearchSelectionState, searchSelection]);
+  const searchHeaderContent = applyButtonHandler ? getHeaderTitles() : getSearchHeaderContent();
+  return (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, {
+    children: [(0, jsx_runtime_1.jsxs)("div", {
+      className: (0, classNames_1.classNames)(["zen-filters-search-list", isMobile ? "zen-filters-search-list--mobile" : ""]),
+      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)(emptyState_1.EmptyState, {
+        description: translate("Try adjusting your search or filter."),
+        children: translate("No data available")
+      }) : null]
+    }), footer]
   });
 };
 exports.FiltersSearchList = FiltersSearchList;

package/dist/filters/components/filtersSelect.d.ts

@@ -13,7 +13,7 @@ export interface IFiltersSelect extends IFiltersSelectProps {
     id?: string;
     name?: string;
     value: IFiltersSearchType;
-    onChange: (newValue: IFiltersSearchType) => void;
+    onChange?: (newValue: IFiltersSearchType) => void;
     className?: string;
     selectListRef: React.RefObject<HTMLDivElement>;
 }

package/dist/filters/components/filtersSelect.js

@@ -73,6 +73,9 @@ const FiltersSelect = ({
     setActiveId(clickedId);
   }, [activeId]);
   const handleItemClick = (0, react_1.useCallback)((clickedId, parentId) => () => {
+    if (onChange === undefined) {
+      return;
+    }
     if (!clickedId) {
       parentId && onChange({
         [parentId]: undefined
@@ -90,25 +93,35 @@ const FiltersSelect = ({
     });
   }, [onChange, value]);
   const handleKeyDown = (0, react_1.useCallback)(event => {
-    var _a, _b, _c, _d;
+    const isListItem = event.target instanceof HTMLElement && event.target.dataset.listItem === "true";
+    const isButtonItem = event.target instanceof HTMLElement && event.target.dataset.expandButton === "true";
+    const getSelector = () => {
+      if (isListItem) {
+        return `[data-list-item="true"]`;
+      }
+      if (isButtonItem) {
+        return `[data-expand-button="true"]`;
+      }
+      return undefined;
+    };
     if (event.key === "ArrowDown") {
-      const nextElement = ((_a = document.activeElement) === null || _a === void 0 ? void 0 : _a.nextElementSibling) ? (_b = document.activeElement) === null || _b === void 0 ? void 0 : _b.nextElementSibling : (0, keyboardHelpers_1.getNewFocusableItem)(1, selectListRef.current);
-      nextElement === null || nextElement === void 0 ? void 0 : nextElement.focus();
+      const nextItem = (0, keyboardHelpers_1.getNewFocusableItem)(1, selectListRef.current, getSelector());
+      nextItem === null || nextItem === void 0 ? void 0 : nextItem.focus();
       return;
     }
     if (event.key === "ArrowUp") {
-      const nextElement = ((_c = document.activeElement) === null || _c === void 0 ? void 0 : _c.previousElementSibling) ? (_d = document.activeElement) === null || _d === void 0 ? void 0 : _d.previousElementSibling : (0, keyboardHelpers_1.getNewFocusableItem)(-1, selectListRef.current);
-      nextElement === null || nextElement === void 0 ? void 0 : nextElement.focus();
+      const prevItem = (0, keyboardHelpers_1.getNewFocusableItem)(-1, selectListRef.current, getSelector());
+      prevItem === null || prevItem === void 0 ? void 0 : prevItem.focus();
       return;
     }
-    if (event.key === "ArrowLeft") {
-      const nextElement = (0, keyboardHelpers_1.getNewFocusableItem)(-1, selectListRef.current);
-      nextElement === null || nextElement === void 0 ? void 0 : nextElement.focus();
+    if (event.key === "ArrowRight" && isListItem) {
+      const nextItem = (0, keyboardHelpers_1.getNewFocusableItem)(1, selectListRef.current, `[data-expand-button="true"]`);
+      nextItem === null || nextItem === void 0 ? void 0 : nextItem.focus();
       return;
     }
-    if (event.key === "ArrowRight") {
-      const nextElement = (0, keyboardHelpers_1.getNewFocusableItem)(1, selectListRef.current);
-      nextElement === null || nextElement === void 0 ? void 0 : nextElement.focus();
+    if (event.key === "ArrowLeft" && isButtonItem) {
+      const prevItem = (0, keyboardHelpers_1.getNewFocusableItem)(-1, selectListRef.current, `[data-list-item="true"]`);
+      prevItem === null || prevItem === void 0 ? void 0 : prevItem.focus();
       return;
     }
   }, [selectListRef]);
@@ -120,13 +133,13 @@ const FiltersSelect = ({
     className: (0, classNames_1.classNames)([value.hasOwnProperty(el.id) ? "zen-filters-select__list-item-wrapper--active" : ""]),
     onExpandItem: handleExpandableItemClick(el.id),
     onClick: handleItemClick(undefined, el.id),
-    content: el.id === activeId ? el.subItems.map(subEl => (0, jsx_runtime_1.jsx)(filtersSelectListItem_1.FiltersSelectListItem, {
+    content: el.subItems.map(subEl => (0, jsx_runtime_1.jsx)(filtersSelectListItem_1.FiltersSelectListItem, {
       className: (0, classNames_1.classNames)(["zen-filters-select__sub-item"]),
       id: `${filtersSelectListId}-${el.id}-${subEl.id}`,
       name: subEl.name,
       isActive: value[el.id] === subEl.id,
       onClick: handleItemClick(subEl.id, el.id)
-    }, `${el.id}-${subEl.id}`)) : (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {})
+    }, `${el.id}-${subEl.id}`))
   }, `${filtersSelectListId}-${el.id}`) : (0, jsx_runtime_1.jsx)(filtersSelectListItem_1.FiltersSelectListItem, {
     id: `${filtersSelectListId}-${el.id}`,
     name: el.name,

package/dist/filters/components/filtersSelectCompact.d.ts

@@ -0,0 +1,17 @@
+/// <reference types="react" />
+import { IFiltersSearchType, IFiltersSelectItems } from "./filtersSelect";
+import "./filtersSelectCompact.less";
+export interface IFiltersSelectCompact extends IFiltersSelectProps {
+    id?: string;
+    name?: string;
+    value: IFiltersSearchType;
+    onChange?: (newValue: IFiltersSearchType) => void;
+    className?: string;
+    selectListRef: React.RefObject<HTMLDivElement>;
+}
+interface IFiltersSelectProps {
+    items?: IFiltersSelectItems[];
+}
+export declare const FiltersSelectCompactDisplayName = "FiltersSelectCompact";
+export declare const FiltersSelectCompact: React.FC<IFiltersSelectCompact>;
+export {};