@geotab/zenith 3.5.0 → 3.6.0-beta.1

package/esm/filters/components/filtersSearchList.js

@@ -12,9 +12,10 @@ import { useMobile } from "../../commonHelpers/hooks/useMobile";
 import { useDrive } from "../../utils/theme/useDrive";
 import { classNames } from "../../commonHelpers/classNames/classNames";
 import { MAX_TOTAL_RESULTS } from "../filtersHelper";
-import { EmptySearchList } from "../../dataGrid/emptySearchList/emptySearchList";
 import { getNewFocusableItem } from "../../utils/keyboardHelpers";
 import { FOCUSABLE_SELECTOR } from "../../utils/focusableSelector";
+import { FooterButtons } from "../../footerButtons/footerButtons";
+import { EmptyState } from "../../emptyState/emptyState";
 injectString("cs", "Back", "Zp\u011Bt");
 injectString("da-DK", "Back", "Tilbage");
 injectString("de", "Back", "Zur\xFCck");
@@ -105,6 +106,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");
@@ -146,7 +199,9 @@ export const FiltersSearchList = ({
   handleRecentSearchItemClick,
   getIconByType,
   handleClearSearchSelection,
-  searchListRef
+  searchListRef,
+  applyButtonHandler,
+  isInitialSearchSelectionState
   // eslint-disable-next-line complexity
 }) => {
   const {
@@ -214,7 +269,7 @@ export const FiltersSearchList = ({
   }, [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 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 = useCallback(newVal => {
     setCurrentMode(newVal);
     setRemovedItems([]);
@@ -252,6 +307,9 @@ export 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 = useCallback(() => {
+    handleClearSearchSelection === null || handleClearSearchSelection === void 0 ? void 0 : handleClearSearchSelection();
+  }, [handleClearSearchSelection]);
   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";
@@ -356,21 +414,9 @@ export const FiltersSearchList = ({
     }
     if (currentMode === "recent" || currentMode === "selected") {
       return _jsxs(_Fragment, {
-        children: [_jsxs("div", {
+        children: [_jsx("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")
-          })]
+          children: currentMode === "recent" ? translate("Recent searches") : translate("Currently selected")
         }), currentMode === "recent" && recentItems.length > resultsToShow.length && _jsx(Button, {
           type: "tertiary",
           onClick: changeMode.bind(null, "history"),
@@ -390,24 +436,67 @@ export const FiltersSearchList = ({
     }
     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]
+  const getHeaderTitles = () => {
+    if (currentMode === "recent") {
+      return _jsx("div", {
+        className: "zen-filters-search-list__header-title",
+        children: translate("Recent searches")
+      });
+    }
+    if (currentMode === "search" && resultsToShow.length > 0) {
+      return _jsx("div", {
+        className: "zen-filters-search-list__header-title",
+        children: translate("Top results")
+      });
+    }
+    return undefined;
+  };
+  const footer = useMemo(() => {
+    if (!applyButtonHandler) {
+      return null;
+    }
+    return _jsxs(FooterButtons, {
+      className: "zen-filters-search-list__footer",
+      children: [currentMode === "history" || currentMode === "recent" || currentMode === "selected" && isInitialSearchSelectionState ? null : _jsx(Button, {
+        type: "primary",
+        onClick: applyButtonHandler,
+        children: translate("Apply")
+      }, "primary"), currentMode === "history" ? _jsx(Button, {
+        type: "tertiary",
+        onClick: handleRemoveAll,
+        children: translate("Clear all")
+      }) : null, currentMode === "recent" && recentItems.length > resultsToShow.length ? _jsx(Button, {
+        type: "tertiary",
+        onClick: changeMode.bind(null, "history"),
+        children: translate("View history")
+      }) : null, currentMode === "selected" && resultsToShow.length > 0 && (searchSelection || []).length > 0 ? _jsx(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 _jsxs(_Fragment, {
+    children: [_jsxs("div", {
+      className: classNames(["zen-filters-search-list", isMobile ? "zen-filters-search-list--mobile" : ""]),
+      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(EmptyState, {
+        description: translate("Try adjusting your search or filter."),
+        children: translate("No data available")
+      }) : null]
+    }), footer]
   });
 };

package/esm/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/esm/filters/components/filtersSelect.js

@@ -1,5 +1,5 @@
 import { injectString } from "../../utils/localization/translationsDictionary";
-import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
 import { useCallback, useMemo, useState } from "react";
 import { classNames } from "../../commonHelpers/classNames/classNames";
 import { useLanguage } from "../../utils/localization/useLanguage";
@@ -63,6 +63,9 @@ export const FiltersSelect = ({
     setActiveId(clickedId);
   }, [activeId]);
   const handleItemClick = useCallback((clickedId, parentId) => () => {
+    if (onChange === undefined) {
+      return;
+    }
     if (!clickedId) {
       parentId && onChange({
         [parentId]: undefined
@@ -80,25 +83,35 @@ export const FiltersSelect = ({
     });
   }, [onChange, value]);
   const handleKeyDown = 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 : getNewFocusableItem(1, selectListRef.current);
-      nextElement === null || nextElement === void 0 ? void 0 : nextElement.focus();
+      const nextItem = 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 : getNewFocusableItem(-1, selectListRef.current);
-      nextElement === null || nextElement === void 0 ? void 0 : nextElement.focus();
+      const prevItem = getNewFocusableItem(-1, selectListRef.current, getSelector());
+      prevItem === null || prevItem === void 0 ? void 0 : prevItem.focus();
       return;
     }
-    if (event.key === "ArrowLeft") {
-      const nextElement = getNewFocusableItem(-1, selectListRef.current);
-      nextElement === null || nextElement === void 0 ? void 0 : nextElement.focus();
+    if (event.key === "ArrowRight" && isListItem) {
+      const nextItem = getNewFocusableItem(1, selectListRef.current, `[data-expand-button="true"]`);
+      nextItem === null || nextItem === void 0 ? void 0 : nextItem.focus();
       return;
     }
-    if (event.key === "ArrowRight") {
-      const nextElement = getNewFocusableItem(1, selectListRef.current);
-      nextElement === null || nextElement === void 0 ? void 0 : nextElement.focus();
+    if (event.key === "ArrowLeft" && isButtonItem) {
+      const prevItem = getNewFocusableItem(-1, selectListRef.current, `[data-list-item="true"]`);
+      prevItem === null || prevItem === void 0 ? void 0 : prevItem.focus();
       return;
     }
   }, [selectListRef]);
@@ -110,13 +123,13 @@ export const FiltersSelect = ({
     className: 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 => _jsx(FiltersSelectListItem, {
+    content: el.subItems.map(subEl => _jsx(FiltersSelectListItem, {
       className: 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}`)) : _jsx(_Fragment, {})
+    }, `${el.id}-${subEl.id}`))
   }, `${filtersSelectListId}-${el.id}`) : _jsx(FiltersSelectListItem, {
     id: `${filtersSelectListId}-${el.id}`,
     name: el.name,

package/esm/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 {};

package/esm/filters/components/filtersSelectCompact.js

@@ -0,0 +1,57 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useCallback, useMemo, useState } from "react";
+import { classNames } from "../../commonHelpers/classNames/classNames";
+import { useLanguage } from "../../utils/localization/useLanguage";
+import { useUniqueId } from "../../commonHelpers/useUniqueId";
+import { FiltersSelectPillItem, FiltersSelectUnfoldingPill } from "./filtersSelectUnfoldingPill";
+import { ALL_SELECT_OPTION_ID, getAllOption, getFiltersSearchTypeAllOption } from "./filtersSelect";
+import { getNewFocusableItem } from "../../utils/keyboardHelpers";
+export const FiltersSelectCompactDisplayName = "FiltersSelectCompact";
+export const FiltersSelectCompact = ({ value, onChange, items, selectListRef, className }) => {
+    const { translate } = useLanguage();
+    const [activeId, setActiveId] = useState(Object.keys(value)[0] || "");
+    const filtersSelectListId = useUniqueId();
+    const filteredItems = useMemo(() => (items === null || items === void 0 ? void 0 : items.filter(el => el.id !== ALL_SELECT_OPTION_ID)) || [], [items]);
+    const preparedItems = useMemo(() => [
+        getAllOption(translate),
+        ...filteredItems
+    ], [translate, filteredItems]);
+    const handleExpandableItemClick = useCallback((clickedId) => () => {
+        if (activeId === clickedId) {
+            setActiveId("");
+            return;
+        }
+        setActiveId(clickedId);
+    }, [activeId]);
+    const handleItemClick = useCallback((clickedId, parentId) => () => {
+        if (onChange === undefined) {
+            return;
+        }
+        if (!clickedId) {
+            parentId && onChange({ [parentId]: undefined });
+            return;
+        }
+        if (parentId) {
+            onChange({ [parentId]: clickedId });
+            return;
+        }
+        setActiveId("");
+        onChange(Object.keys(value).includes(clickedId) ? getFiltersSearchTypeAllOption() : { [clickedId]: undefined });
+    }, [onChange, value]);
+    const handleKeyDown = useCallback((event) => {
+        if (event.key === "ArrowLeft") {
+            const nextElement = getNewFocusableItem(-1, selectListRef.current, "label.zen-pill-actionable");
+            nextElement === null || nextElement === void 0 ? void 0 : nextElement.focus();
+            return;
+        }
+        if (event.key === "ArrowRight") {
+            const nextElement = getNewFocusableItem(1, selectListRef.current, "label.zen-pill-actionable");
+            nextElement === null || nextElement === void 0 ? void 0 : nextElement.focus();
+            return;
+        }
+    }, [selectListRef]);
+    const selectPillsComponent = useMemo(() => preparedItems.map(el => el.subItems && el.subItems.length > 0 ?
+        _jsx(FiltersSelectUnfoldingPill, { id: `${filtersSelectListId}-${el.id}`, name: el.name, isExpanded: el.id === activeId, isActive: Object.keys(value).includes(el.id) && value[el.id] === undefined, grouped: el.id === activeId, onExpandItem: handleExpandableItemClick(el.id), onClick: handleItemClick(undefined, el.id), content: el.subItems.map(subEl => _jsx(FiltersSelectPillItem, { className: classNames(["zen-filters-select-compact__sub-item"]), id: `${filtersSelectListId}-${el.id}-${subEl.id}`, name: subEl.name, isActive: value[el.id] === subEl.id, grouped: true, onClick: handleItemClick(subEl.id, el.id) }, `${el.id}-${subEl.id}`)) }, `${filtersSelectListId}-${el.id}`) : _jsx(FiltersSelectPillItem, { id: `${filtersSelectListId}-${el.id}`, name: el.name, className: "zen-filters-select-compact__list-item--not-expandable", isActive: Object.keys(value).includes(el.id), onClick: handleItemClick(el.id) }, `${filtersSelectListId}-${el.id}`)), [activeId, filtersSelectListId, handleExpandableItemClick, handleItemClick, preparedItems, value]);
+    return _jsx("div", { className: "zen-filters-select-compact", ref: selectListRef, onKeyDown: handleKeyDown, children: _jsx("div", { className: classNames(["zen-filters-select-compact__list", className || ""]), children: selectPillsComponent }) });
+};
+FiltersSelectCompact.displayName = FiltersSelectCompactDisplayName;

package/esm/filters/components/filtersSelectListItem.js

@@ -1,11 +1,12 @@
 import { injectString } from "../../utils/localization/translationsDictionary";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useCallback } from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
 import { Button } from "../../button/button";
 import { classNames } from "../../commonHelpers/classNames/classNames";
 import { useUniqueId } from "../../commonHelpers/useUniqueId";
 import { IconChevronDownSmall } from "../../icons/iconChevronDownSmall";
 import { useLanguage } from "../../utils/localization/useLanguage";
+import { zen } from "../../utils/zen";
 injectString("cs", "Collapse", "Sbalit");
 injectString("da-DK", "Collapse", "Fold sammen");
 injectString("de", "Collapse", "Ausblenden");
@@ -66,6 +67,7 @@ export const FiltersSelectListItem = ({
   className = ""
 }) => _jsx("div", {
   children: _jsx("button", {
+    "data-list-item": true,
     type: "button",
     className: classNames(["zen-filters-select__list-item", isActive ? "zen-filters-select__list-item--active" : "", className]),
     id: id,
@@ -87,16 +89,46 @@ export const FiltersSelectListExpandableItem = ({
   const {
     translate
   } = useLanguage();
+  const [shouldRender, setShouldRender] = useState(isExpanded);
+  const [isAnimating, setIsAnimating] = useState(false);
+  const expandableButtonRef = useRef(null);
+  const frameRef = useRef(null);
+  useEffect(() => {
+    var _a;
+    if (isExpanded) {
+      setShouldRender(true);
+      frameRef.current = (_a = zen.requestAnimationFrame) === null || _a === void 0 ? void 0 : _a.call(zen, () => {
+        var _a;
+        frameRef.current = (_a = zen.requestAnimationFrame) === null || _a === void 0 ? void 0 : _a.call(zen, () => {
+          setIsAnimating(true);
+        });
+      });
+    } else {
+      setIsAnimating(false);
+    }
+    return () => {
+      var _a;
+      return (_a = zen.cancelAnimationFrame) === null || _a === void 0 ? void 0 : _a.call(zen, frameRef.current);
+    };
+  }, [isExpanded]);
+  const handleTransitionEnd = e => {
+    if (e.propertyName === "grid-template-rows" && !isExpanded) {
+      setShouldRender(false);
+    }
+  };
   const handleExpandItem = useCallback(e => {
+    var _a;
     e.stopPropagation();
     if (onExpandItem) {
       onExpandItem();
+      (_a = expandableButtonRef.current) === null || _a === void 0 ? void 0 : _a.focus();
     }
   }, [onExpandItem]);
   return _jsxs(_Fragment, {
     children: [_jsxs("div", {
       className: classNames(["zen-filters-select__list-item-wrapper", isExpanded ? "zen-filters-select__list-item-wrapper--expanded" : "", className]),
       children: [_jsx("button", {
+        "data-list-item": true,
         type: "button",
         className: classNames(["zen-filters-select__list-item"]),
         id: id,
@@ -109,22 +141,28 @@ export const FiltersSelectListExpandableItem = ({
         })
       }), _jsx(Button, {
         type: "tertiary-black",
+        "data-expand-button": true,
+        ref: expandableButtonRef,
         onClick: handleExpandItem,
         className: "zen-filters-select__item-button",
-        "aria-expanded": isExpanded,
+        "aria-expanded": shouldRender,
         "aria-controls": ariaControlsId,
-        "aria-label": isExpanded ? `${translate("Collapse")} ${name}` : `${translate("Expand")} ${name}`,
+        "aria-label": shouldRender ? `${translate("Collapse")} ${name}` : `${translate("Expand")} ${name}`,
         children: _jsx(IconChevronDownSmall, {
           size: "large",
-          className: classNames(["zen-filters-select__item-icon", isExpanded ? "zen-filters-select__item-icon--rotated" : ""])
+          className: classNames(["zen-filters-select__item-icon", isAnimating ? "zen-filters-select__item-icon--rotated" : ""])
         })
       })]
-    }), _jsx("div", {
+    }), shouldRender && _jsx("div", {
       id: ariaControlsId,
       "aria-labelledby": id,
       role: "region",
-      className: classNames(["zen-filters-select__item-content", content ? "" : "zen-filters-select__item-content--hidden"]),
-      children: content
+      className: classNames(["zen-filters-select__item-content", isAnimating ? "zen-filters-select__item-content--expanded" : ""]),
+      onTransitionEnd: handleTransitionEnd,
+      children: _jsx("div", {
+        className: "zen-filters-select__item-content-inner",
+        children: content
+      })
     })]
   });
 };

package/esm/filters/components/filtersSelectUnfoldingPill.d.ts

@@ -0,0 +1,23 @@
+/// <reference types="react" />
+interface IFiltersSelectPillItem {
+    id: string;
+    name: string;
+    isActive: boolean;
+    onClick: () => void;
+    grouped?: boolean;
+    className?: string;
+}
+export declare const FiltersSelectPillItem: ({ id, name, isActive, onClick, grouped, className }: IFiltersSelectPillItem) => import("react/jsx-runtime").JSX.Element;
+interface IFiltersSelectUnfoldingPillItem {
+    id: string;
+    name: string;
+    content: React.ReactNode;
+    isActive: boolean;
+    isExpanded: boolean;
+    onClick: () => void;
+    grouped?: boolean;
+    className?: string;
+    onExpandItem?: () => void;
+}
+export declare const FiltersSelectUnfoldingPill: ({ id, name, content, isActive, isExpanded, onClick, grouped, className, onExpandItem }: IFiltersSelectUnfoldingPillItem) => import("react/jsx-runtime").JSX.Element;
+export {};

package/esm/filters/components/filtersSelectUnfoldingPill.js

@@ -0,0 +1,41 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { classNames } from "../../commonHelpers/classNames/classNames";
+import { useUniqueId } from "../../commonHelpers/useUniqueId";
+import { Pill } from "../../pill/pill";
+import { zen } from "../../utils/zen";
+export const FiltersSelectPillItem = ({ id, name, isActive, onClick, grouped, className = "" }) => _jsx("div", { className: classNames(["zen-filters-select-compact__pill-item", className]), "data-pill-id": id, children: _jsx(Pill, { active: isActive, onChange: onClick, className: classNames([grouped && !isActive ? "zen-filters-select-compact__list-item-grouped" : ""]), children: name }) });
+export const FiltersSelectUnfoldingPill = ({ id, name, content, isActive, isExpanded, onClick, grouped, className = "", onExpandItem }) => {
+    const ariaControlsId = useUniqueId();
+    const [shouldRender, setShouldRender] = useState(isExpanded);
+    const [isAnimating, setIsAnimating] = useState(false);
+    const frameRef = useRef(null);
+    useEffect(() => {
+        var _a;
+        if (isExpanded) {
+            setShouldRender(true);
+            frameRef.current = (_a = zen.requestAnimationFrame) === null || _a === void 0 ? void 0 : _a.call(zen, () => {
+                var _a;
+                frameRef.current = (_a = zen.requestAnimationFrame) === null || _a === void 0 ? void 0 : _a.call(zen, () => {
+                    setIsAnimating(true);
+                });
+            });
+        }
+        else {
+            setIsAnimating(false);
+        }
+        return () => { var _a; return (_a = zen.cancelAnimationFrame) === null || _a === void 0 ? void 0 : _a.call(zen, frameRef.current); };
+    }, [isExpanded]);
+    const handleTransitionEnd = () => {
+        if (!isExpanded) {
+            setShouldRender(false);
+        }
+    };
+    const handleExpandItem = useCallback(() => {
+        if (onExpandItem) {
+            onExpandItem();
+            onClick();
+        }
+    }, [onExpandItem, onClick]);
+    return (_jsxs("div", { onTransitionEnd: handleTransitionEnd, className: classNames(["zen-filters-select-compact__unfolding-pill-item", isAnimating ? "zen-filters-select-compact__unfolding-pill-item--expanded" : ""]), "data-pill-id": id, children: [_jsx("div", { id: id, className: classNames(["zen-filters-select-compact__list-item-wrapper", className]), children: _jsx(Pill, { active: isActive, onChange: handleExpandItem, className: classNames([grouped && !isActive ? "zen-filters-select-compact__list-item-grouped" : ""]), children: name }) }), shouldRender && _jsx("div", { id: ariaControlsId, "aria-labelledby": id, role: "region", className: classNames(["zen-filters-select-compact__item-content", isExpanded ? "zen-filters-select-compact__item-content--expanded" : ""]), children: _jsx("div", { className: "zen-filters-select-compact__item-content-inner", children: content }) })] }));
+};

package/esm/filters/components/filtersSidePanel.js

@@ -24,7 +24,9 @@ import { Tabs } from "../../tabs/tabs";
 import { FiltersSidePanelItem } from "./filtersSidePanelItem";
 import { FiltersSaveModal } from "./filtersSaveModal";
 import { isElementsEqual } from "../../utils/compareElementsUtils/isElementsEqual";
-import { FiltersEmptySelectedList } from "./filtersEmptySelectedList";
+import { FiltersEmptyState } from "./filtersEmptyState";
+import { useMobileClassName } from "../../utils/theme/useMobileClassName";
+import { zen } from "../../utils/zen";
 injectString("cs", "Selected", "Vybr\xE1no");
 injectString("da-DK", "Selected", "Valgt");
 injectString("de", "Selected", "Ausgew\xE4hlt");
@@ -225,14 +227,18 @@ export const FiltersSidePanel = ({
   externalState,
   setExternalState,
   triggerRef
+  // eslint-disable-next-line complexity
 }) => {
-  var _a;
+  var _a, _b, _c;
   const {
     translate
   } = useLanguage();
   const isLongTextLanguages = useMemo(() => `${translate("Reset")}${translate("Cancel")}${translate("Apply")}`.length > 31, [translate]);
   const dataShieldId = useUniqueId();
   const iconDriveClassName = useDriveClassName("icon");
+  const iconMobileClassName = useMobileClassName("icon");
+  const headerButtonsMobileClassName = useMobileClassName("zen-side-panel-filters__header-buttons");
+  const titleMobileClassName = useMobileClassName("zen-side-panel-filters__title");
   const {
     dark
   } = useContext(themeContext);
@@ -384,7 +390,7 @@ export const FiltersSidePanel = ({
     itemState: currentState[item.props.id],
     changeHandler: sidePanelItemChangeHandler(item.props.id),
     errorCheck: handleErrorCheck(item.props.id)
-  }, item.props.id)) : _jsx(FiltersEmptySelectedList, {}), [selectedIds, filteredCurrentFilters, currentState, sidePanelItemChangeHandler, handleErrorCheck]);
+  }, item.props.id)) : _jsx(FiltersEmptyState, {}), [selectedIds, filteredCurrentFilters, currentState, sidePanelItemChangeHandler, handleErrorCheck]);
   useEffect(() => {
     if (!isOpen) {
       return;
@@ -417,6 +423,7 @@ export const FiltersSidePanel = ({
       return;
     }
   }, [isSaveModalOpen, dataShieldId, onClose]);
+  const memoizedBigSizeIcon = useMemo(() => (iconMobileClassName || iconDriveClassName) !== undefined, [iconMobileClassName, iconDriveClassName]);
   return _jsxs(Fragment, {
     children: [_jsx(Shield, {
       className: "zen-high-level-shield",
@@ -436,11 +443,11 @@ export const FiltersSidePanel = ({
           children: [_jsx("div", {
             className: "zen-side-panel-filters__title-wrapper",
             children: _jsx("div", {
-              className: "zen-side-panel-filters__title zen-ellipsis",
+              className: classNames(["zen-side-panel-filters__title", "zen-ellipsis", titleMobileClassName || ""]),
               children: translate("All Filters")
             })
           }), _jsxs("div", {
-            className: "zen-side-panel-filters__header-buttons",
+            className: classNames(["zen-side-panel-filters__header-buttons", headerButtonsMobileClassName || ""]),
             children: [onSave && _jsx(Button, {
               type: "tertiary",
               ref: saveButtonRef,
@@ -451,7 +458,7 @@ export const FiltersSidePanel = ({
               children: _jsx(IconDisk, {
                 description: translate("Save"),
                 className: "svgIcon",
-                size: iconDriveClassName ? "huge" : "large"
+                size: memoizedBigSizeIcon ? "huge" : "large"
               })
             }), onPin && _jsx(Button, {
               type: "tertiary",
@@ -462,13 +469,13 @@ export const FiltersSidePanel = ({
               children: _jsx(IconPin2, {
                 description: translate("Pin"),
                 className: "svgIcon",
-                size: iconDriveClassName ? "huge" : "large"
+                size: memoizedBigSizeIcon ? "huge" : "large"
               })
             }), _jsx(TextIconButton, {
               type: "tertiary-black",
               className: "zen-side-panel-filters__close-button",
               icon: IconClose,
-              iconSize: "large",
+              iconSize: memoizedBigSizeIcon ? "huge" : "large",
               onClick: externalMode ? handleExternalModeClose : onClose,
               iconPosition: ButtonIconPosition.Start,
               title: translate("Close")
@@ -541,7 +548,7 @@ export const FiltersSidePanel = ({
           })
         })]
       })
-    }), (_a = document.fullscreenElement) !== null && _a !== void 0 ? _a : document.body), _jsx(FiltersSaveModal, {
+    }), (_b = (_a = zen.document) === null || _a === void 0 ? void 0 : _a.fullscreenElement) !== null && _b !== void 0 ? _b : (_c = zen.document) === null || _c === void 0 ? void 0 : _c.body), _jsx(FiltersSaveModal, {
       className: CUSTOM_POPUP_COMPONENT_CLASSNAME,
       isOpen: isSaveModalOpen,
       onClose: toggleSaveModal,