@geotab/zenith 3.5.0 → 3.6.0-beta.0

package/dist/filters/components/filtersSidePanelRange.js

@@ -17,12 +17,12 @@ const react_1 = require("react");
 const filtersBarSidePanelRange_1 = require("../../filtersBar/filtersBarSidePanel/components/filtersBarSidePanelRange/filtersBarSidePanelRange");
 const rangeHelper_1 = require("../../rangeRaw/utils/rangeHelper");
 const FiltersSidePanelRange = (_a) => {
-    var { errorCheck } = _a, otherProps = __rest(_a, ["errorCheck"]);
-    const { value } = otherProps;
-    const hasError = (0, react_1.useMemo)(() => (0, rangeHelper_1.checkErrorType)(value.min, value.max, otherProps.fullBounded, otherProps.allowEqualMinMax, otherProps.min, otherProps.max) !== undefined, [value, otherProps.fullBounded, otherProps.allowEqualMinMax, otherProps.min, otherProps.max]);
+    var { id, state } = _a, otherProps = __rest(_a, ["id", "state"]);
+    const { errorCheck } = otherProps;
+    const hasError = (0, react_1.useMemo)(() => (0, rangeHelper_1.checkErrorType)(state.min, state.max, otherProps.fullBounded, otherProps.allowEqualMinMax, otherProps.min, otherProps.max) !== undefined, [state, otherProps.fullBounded, otherProps.allowEqualMinMax, otherProps.min, otherProps.max]);
     (0, react_1.useEffect)(() => {
-        errorCheck(hasError);
+        errorCheck === null || errorCheck === void 0 ? void 0 : errorCheck(hasError);
     }, [errorCheck, hasError]);
-    return (0, jsx_runtime_1.jsx)(filtersBarSidePanelRange_1.FiltersBarSidePanelRange, Object.assign({}, otherProps));
+    return (0, jsx_runtime_1.jsx)(filtersBarSidePanelRange_1.FiltersBarSidePanelRange, Object.assign({ id: `${id}-side-panel` }, otherProps, { value: state }));
 };
 exports.FiltersSidePanelRange = FiltersSidePanelRange;

package/dist/filters/filters.d.ts

@@ -38,12 +38,16 @@ export interface IFiltersSearchTypesItem {
     relevance?: number;
 }
 export interface IFiltersBase extends IZenComponentProps {
+    searchTypes?: IFiltersSearchTypesItem[] | IFiltersSearchTypesItem;
+    onToggleView?: (isOpen: boolean) => void;
+}
+export interface IFiltersWithKeyword {
     keyword: string;
     setKeyword: (newKeyword: string) => void;
-    searchTypes?: IFiltersSearchTypesItem[] | IFiltersSearchTypesItem;
+}
+export interface IFiltersWithSearchType {
     searchType: IFiltersSearchType;
     setSearchType: (newType: IFiltersSearchType) => void;
-    onToggleView?: (isOpen: boolean) => void;
 }
 export interface IFiltersWithRecentSearches {
     recentSearches: IFetchState<IRecentSearchItem[]>;
@@ -67,7 +71,7 @@ export interface IFiltersWithExternalState {
     allFiltersState: Record<string, TFiltersComponentsItemState>;
     setAllFiltersState: (newState: Partial<Record<string, TFiltersComponentsItemState>>) => void;
 }
-export interface IFilters extends IFiltersBase, Partial<IFiltersWithRecentSearches>, Partial<IFiltersWithSearchSelection>, Partial<IFiltersWithPin>, Partial<IFiltersWithSavedFilters>, Partial<IFiltersWithExternalState> {
+export interface IFilters extends IFiltersBase, Partial<IFiltersWithKeyword>, Partial<IFiltersWithSearchType>, Partial<IFiltersWithRecentSearches>, Partial<IFiltersWithSearchSelection>, Partial<IFiltersWithPin>, Partial<IFiltersWithSavedFilters>, Partial<IFiltersWithExternalState> {
 }
 /** Base filters with only required functionality */
 export type IFiltersBasic = IFiltersBase;

package/dist/filters/filters.js

@@ -14,6 +14,9 @@ Object.defineProperty(exports, "__esModule", {
 exports.Filters = exports.FiltersDisplayName = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 /* eslint-disable @typescript-eslint/no-explicit-any */
+injectString("en", "Open setting conditions popup", "Open setting conditions popup");
+injectString("pt-PT", "Open setting conditions popup", "Abrir pop-up de condi\xE7\xF5es de configura\xE7\xE3o");
+injectString("ro-RO", "Open setting conditions popup", "Deschide\u021Bi pop-up-ul cu condi\u021Bii de setare");
 injectString("en", "Search page", "Search page");
 injectString("pt-PT", "Search page", "Pesquisar p\xE1gina");
 injectString("ro-RO", "Search page", "C\u0103uta\u021Bi pagina");
@@ -23,15 +26,38 @@ injectString("ro-RO", "Close setting conditions popup", "\xCEnchide\u021Bi pop-u
 injectString("en", "Search by", "Search by");
 injectString("pt-PT", "Search by", "Pesquisar por");
 injectString("ro-RO", "Search by", "C\u0103uta\u021Bi dup\u0103");
-injectString("en", "Open setting conditions popup", "Open setting conditions popup");
-injectString("pt-PT", "Open setting conditions popup", "Abrir pop-up de condi\xE7\xF5es de configura\xE7\xE3o");
-injectString("ro-RO", "Open setting conditions popup", "Deschide\u021Bi pop-up-ul cu condi\u021Bii de setare");
 injectString("en", "Setting conditions", "Setting conditions");
 injectString("pt-PT", "Setting conditions", "Definindo condi\xE7\xF5es");
 injectString("ro-RO", "Setting conditions", "Condi\u021Bii de setare");
+injectString("cs", "Cancel", "Zru\u0161it");
+injectString("da-DK", "Cancel", "Annuller");
+injectString("de", "Cancel", "Abbrechen");
+injectString("en", "Cancel", "Cancel");
+injectString("es", "Cancel", "Cancelar");
+injectString("fi-FI", "Cancel", "Peruuta");
+injectString("fr", "Cancel", "Annuler");
+injectString("fr-FR", "Cancel", "Annuler");
+injectString("hu-HU", "Cancel", "M\xE9gse");
+injectString("id", "Cancel", "Batalkan");
+injectString("it", "Cancel", "Annullare");
+injectString("ja", "Cancel", "\u30AD\u30E3\u30F3\u30BB\u30EB");
+injectString("ko-KR", "Cancel", "\uCDE8\uC18C");
+injectString("ms", "Cancel", "Batal");
+injectString("nb-NO", "Cancel", "Avbryt");
+injectString("nl", "Cancel", "Annuleren");
+injectString("pl", "Cancel", "Anuluj");
+injectString("pt-BR", "Cancel", "Cancelar");
+injectString("pt-PT", "Cancel", "Cancelar");
+injectString("sk-SK", "Cancel", "Zru\u0161.");
+injectString("sv", "Cancel", "Avbryt");
+injectString("th", "Cancel", "\u0E22\u0E01\u0E40\u0E25\u0E34\u0E01");
+injectString("tr", "Cancel", "\u0130ptal");
+injectString("zh-Hans", "Cancel", "\u53D6\u6D88");
+injectString("zh-TW", "Cancel", "\u53D6\u6D88");
+injectString("ro-RO", "Cancel", "Anula\u021Bi");
+injectString("en", "Filters and search", "Filters and search");
 const react_1 = require("react");
 const react_dom_1 = require("react-dom");
-const headerHelpers_1 = require("../header/headerHelpers");
 const react_2 = __importDefault(require("react"));
 const filtersSelect_1 = require("./components/filtersSelect");
 const classNames_1 = require("../commonHelpers/classNames/classNames");
@@ -40,7 +66,6 @@ const iconChevronDownSmall_1 = require("../icons/iconChevronDownSmall");
 const useLanguage_1 = require("../utils/localization/useLanguage");
 const controlledPopup_1 = require("../controlledPopup/controlledPopup");
 const filtersContainer_1 = require("./components/filtersContainer");
-const filtersItem_1 = require("./components/filtersItem");
 const filtersDropdown_1 = require("./components/filtersDropdown");
 const filtersGroups_1 = require("./components/filtersGroups");
 const filtersRange_1 = require("./components/filtersRange");
@@ -59,6 +84,10 @@ const filtersDateInput_1 = require("./components/filtersDateInput");
 const useMobile_1 = require("../commonHelpers/hooks/useMobile");
 const iconChevronTopSmall_1 = require("../icons/iconChevronTopSmall");
 const focusableSelector_1 = require("../utils/focusableSelector");
+const button_1 = require("../button/button");
+const filtersSelectCompact_1 = require("./components/filtersSelectCompact");
+const filtersSidePanelProvider_1 = require("./components/filtersSidePanelProvider");
+const zen_1 = require("../utils/zen");
 exports.FiltersDisplayName = "Filters";
 /**
  * @beta This component is currently in beta.
@@ -90,6 +119,7 @@ const Filters = ({
   const isPinMode = Boolean(typeof isPinned === "boolean" && onPinChange);
   const isRecentSearchesMode = Boolean(recentSearches && onRemoveRecentSearchItem && onSaveRecentSearch);
   const uniqueKey = (0, useUniqueId_1.useUniqueId)();
+  const popupId = `${uniqueKey}_popup`;
   const isMobile = (0, useMobile_1.useMobile)();
   const [isSidePanelOpen, setIsSidePanelOpen] = (0, react_1.useState)(false);
   const triggerRef = react_2.default.useRef(null);
@@ -97,12 +127,14 @@ const Filters = ({
   const searchPopupTriggerRef = react_2.default.useRef(null);
   const searchListRef = react_2.default.useRef(null);
   const selectListRef = react_2.default.useRef(null);
+  const selectListCompactRef = react_2.default.useRef(null);
   const searchTriggerRef = react_2.default.useRef(null);
   const prevIsOpenRef = react_2.default.useRef(isOpen);
   const [savedFiltersStates, setSavedFiltersStates] = (0, react_1.useState)(new Map());
   const {
     translate
   } = (0, useLanguage_1.useLanguage)();
+  const [internalSearchSelection, setInternalSearchSelection] = (0, react_1.useState)(searchSelection || []);
   const searchTypesArray = (0, react_1.useMemo)(() => (0, filtersHelper_1.getArrayOfElements)(searchTypes), [searchTypes]);
   const searchOnlyOneType = (0, react_1.useMemo)(() => searchTypesArray.length === 1 ? searchTypesArray[0].id : undefined, [searchTypesArray]);
   const searchTypesMap = (0, react_1.useMemo)(() => {
@@ -117,10 +149,9 @@ const Filters = ({
     name: el.name,
     subItems: el.subItems ? [...el.subItems] : undefined
   })), [searchTypesArray]);
-  const filters = (0, react_1.useMemo)(() => {
-    const childrenArray = (0, headerHelpers_1.getArrayOfChildren)(children);
-    return (0, filtersItem_1.getAllowedFilters)(childrenArray);
-  }, [children]);
+  const filters = (0, react_1.useMemo)(() => (0, filtersHelper_1.processChildrenWithMetaData)(children), [children]);
+  const isEmptySearchBar = (0, react_1.useMemo)(() => keyword === undefined && setKeyword === undefined, [keyword, setKeyword]);
+  const redundantPopup = (0, react_1.useMemo)(() => searchSelection === undefined && setSearchSelection === undefined && searchTypes === undefined, [searchSelection, searchTypes, setSearchSelection]);
   (0, react_1.useEffect)(() => {
     if (!isSavedFiltersMode) {
       return;
@@ -176,6 +207,11 @@ const Filters = ({
       prevIsOpenRef.current && ((_b = searchTriggerRef.current) === null || _b === void 0 ? void 0 : _b.focus());
     }
   }, [isOpen, searchPopupTriggerRef, searchTriggerRef]);
+  (0, react_1.useEffect)(() => {
+    if (isOpen && !prevIsOpenRef.current && isMobile) {
+      setInternalSearchSelection(searchSelection || []);
+    }
+  }, [isMobile, isOpen, searchPopupTriggerRef, searchSelection]);
   (0, react_1.useEffect)(() => {
     if (!isOpen && prevIsOpenRef.current) {
       prevIsOpenRef.current = false;
@@ -185,10 +221,13 @@ const Filters = ({
       prevIsOpenRef.current = true;
     }
   }, [isOpen, isRecentSearchesMode, handleSaveRecentSearch]);
-  const selectState = (0, react_1.useMemo)(() => Object.keys(searchType), [searchType]);
+  const selectState = (0, react_1.useMemo)(() => Object.keys(searchType ? searchType : (0, filtersSelect_1.getFiltersSearchTypeAllOption)()), [searchType]);
   const onClearSearchSelection = (0, react_1.useCallback)(() => {
     setSearchSelection && setSearchSelection([]);
   }, [setSearchSelection]);
+  const onClearInternalSearchSelection = (0, react_1.useCallback)(() => {
+    setSearchSelection && setInternalSearchSelection([]);
+  }, [setInternalSearchSelection, setSearchSelection]);
   const onSearchItemClick = (0, react_1.useCallback)(item => {
     if (!(searchSelection && setSearchSelection)) {
       return;
@@ -197,7 +236,7 @@ const Filters = ({
     const currentItem = searchOnlyOneType ? searchSelection.find(el => el.id === item.id) : searchSelection.find(el => el.id === item.id && (el.type || filtersSearchList_1.NO_TYPED_SEARCH_ITEM) === typeKey);
     if (currentItem) {
       const newValue = searchOnlyOneType ? searchSelection.filter(el => el.id !== currentItem.id) : searchSelection.filter(el => !(el.id === currentItem.id && (el.type || filtersSearchList_1.NO_TYPED_SEARCH_ITEM) === typeKey));
-      currentItem.id === filtersSearchList_1.KEYWORD_ID && setKeyword("");
+      currentItem.id === filtersSearchList_1.KEYWORD_ID && (setKeyword === null || setKeyword === void 0 ? void 0 : setKeyword(""));
       setSearchSelection(newValue);
     } else {
       setSearchSelection([...searchSelection, Object.assign(Object.assign({}, item), {
@@ -205,32 +244,48 @@ const Filters = ({
       })]);
     }
   }, [searchOnlyOneType, searchSelection, setKeyword, setSearchSelection]);
-  const handleTriggerClick = (0, react_1.useCallback)(() => {
-    if (!document.startViewTransition) {
-      setIsOpen(prevState => !prevState);
+  const onInternalSearchItemClick = (0, react_1.useCallback)(item => {
+    if (!setSearchSelection) {
       return;
     }
-    document.startViewTransition(() => {
-      (0, react_dom_1.flushSync)(() => {
-        setIsOpen(prevState => !prevState);
-      });
-    });
-  }, []);
-  const handleViewState = (0, react_1.useCallback)(() => {
-    onToggleView && onToggleView(!isSidePanelOpen);
-    setIsSidePanelOpen(val => !val);
-  }, [isSidePanelOpen, onToggleView]);
+    const typeKey = item.type || filtersSearchList_1.NO_TYPED_SEARCH_ITEM;
+    const currentItem = searchOnlyOneType ? internalSearchSelection.find(el => el.id === item.id) : internalSearchSelection.find(el => el.id === item.id && (el.type || filtersSearchList_1.NO_TYPED_SEARCH_ITEM) === typeKey);
+    if (currentItem) {
+      const newValue = searchOnlyOneType ? internalSearchSelection.filter(el => el.id !== currentItem.id) : internalSearchSelection.filter(el => !(el.id === currentItem.id && (el.type || filtersSearchList_1.NO_TYPED_SEARCH_ITEM) === typeKey));
+      currentItem.id === filtersSearchList_1.KEYWORD_ID && (setKeyword === null || setKeyword === void 0 ? void 0 : setKeyword(""));
+      setInternalSearchSelection(newValue);
+    } else {
+      setInternalSearchSelection([...internalSearchSelection, Object.assign(Object.assign({}, item), {
+        type: item.type || searchOnlyOneType || filtersSearchList_1.NO_TYPED_SEARCH_ITEM
+      })]);
+    }
+  }, [searchOnlyOneType, internalSearchSelection, setKeyword, setInternalSearchSelection, setSearchSelection]);
   const handleOpenChange = (0, react_1.useCallback)(open => {
-    if (!document.startViewTransition) {
+    const doc = zen_1.zen.document;
+    if (!(doc === null || doc === void 0 ? void 0 : doc.startViewTransition)) {
+      open && setInternalSearchSelection(searchSelection || []);
       setIsOpen(open);
       return;
     }
-    document.startViewTransition(() => {
+    doc.startViewTransition(() => {
       (0, react_dom_1.flushSync)(() => {
+        open && setInternalSearchSelection(searchSelection || []);
         setIsOpen(open);
       });
     });
-  }, []);
+  }, [searchSelection]);
+  const handleApplySearchSelection = (0, react_1.useCallback)(() => {
+    setSearchSelection && setSearchSelection(internalSearchSelection);
+    handleOpenChange(false);
+  }, [internalSearchSelection, setSearchSelection, handleOpenChange]);
+  const handleCancelSearchSelection = (0, react_1.useCallback)(() => {
+    setInternalSearchSelection(searchSelection || []);
+    handleOpenChange(false);
+  }, [searchSelection, setInternalSearchSelection, handleOpenChange]);
+  const handleViewState = (0, react_1.useCallback)(() => {
+    onToggleView && onToggleView(!isSidePanelOpen);
+    setIsSidePanelOpen(val => !val);
+  }, [isSidePanelOpen, onToggleView]);
   const handleSidePanelApply = (0, react_1.useCallback)(state => {
     filters.forEach(filter => {
       const filterProps = filter.props;
@@ -261,7 +316,7 @@ const Filters = ({
     if (newSearchSelection) {
       setSearchSelection === null || setSearchSelection === void 0 ? void 0 : setSearchSelection([...newSearchSelection]);
     }
-    newItemSearch && setKeyword(newItemSearch.name);
+    newItemSearch && (setKeyword === null || setKeyword === void 0 ? void 0 : setKeyword(newItemSearch.name));
     handleOpenChange(false);
   }, [handleOpenChange, setKeyword, setSearchSelection]);
   const handlePinChange = (0, react_1.useCallback)(() => {
@@ -271,10 +326,10 @@ const Filters = ({
     var _a, _b;
     if (event.code === "Enter") {
       isRecentSearchesMode && handleSaveRecentSearch(event.currentTarget.value);
-      !isOpen && handleTriggerClick();
+      !isOpen && handleOpenChange(true);
     }
     if (event.code === "ArrowDown" && !isOpen) {
-      handleTriggerClick();
+      handleOpenChange(true);
     }
     if (event.code === "ArrowDown" && isOpen) {
       const firstItem = (_a = searchListRef.current) === null || _a === void 0 ? void 0 : _a.querySelector(focusableSelector_1.FOCUSABLE_SELECTOR);
@@ -284,7 +339,7 @@ const Filters = ({
       const firstItem = (_b = selectListRef.current) === null || _b === void 0 ? void 0 : _b.querySelector(focusableSelector_1.FOCUSABLE_SELECTOR);
       firstItem === null || firstItem === void 0 ? void 0 : firstItem.focus();
     }
-  }, [isOpen, isRecentSearchesMode, handleSaveRecentSearch, handleTriggerClick]);
+  }, [isOpen, isRecentSearchesMode, handleSaveRecentSearch, handleOpenChange]);
   const getIconByType = (0, react_1.useCallback)(type => {
     if (!type) {
       return iconFilter_1.IconFilter;
@@ -294,100 +349,141 @@ const Filters = ({
   }, [searchTypesArray]);
   const combinedData = (0, filtersHelper_1.useCombineData)(searchTypesArray);
   const memoizedSelect = (0, react_1.useMemo)(() => (0, jsx_runtime_1.jsx)(filtersSelect_1.FiltersSelect, {
-    value: searchType,
+    value: searchType || (0, filtersSelect_1.getFiltersSearchTypeAllOption)(),
     selectListRef: selectListRef,
     onChange: setSearchType,
     items: searchTypesToSelect
   }), [searchType, searchTypesToSelect, setSearchType]);
+  const memoizedSelectCompact = (0, react_1.useMemo)(() => (0, jsx_runtime_1.jsx)(filtersSelectCompact_1.FiltersSelectCompact, {
+    value: searchType || (0, filtersSelect_1.getFiltersSearchTypeAllOption)(),
+    selectListRef: selectListCompactRef,
+    onChange: setSearchType,
+    items: searchTypesToSelect
+  }), [searchType, searchTypesToSelect, setSearchType]);
+  const memoizedIsInitialSearchSelectionState = (0, react_1.useMemo)(() => (searchSelection || []).length === internalSearchSelection.length && internalSearchSelection.every(item => (searchSelection || []).some(selItem => item.id === selItem.id && item.type === selItem.type)), [internalSearchSelection, searchSelection]);
   const handleSearchKeywordChange = (0, react_1.useCallback)(newKeyword => {
-    setKeyword(newKeyword);
+    setKeyword === null || setKeyword === void 0 ? void 0 : setKeyword(newKeyword);
     !isOpen && handleOpenChange(true);
   }, [setKeyword, isOpen, handleOpenChange]);
-  const memoizedSearch = (0, react_1.useMemo)(() => (0, jsx_runtime_1.jsx)(filtersSearch_1.FiltersSearch, {
-    id: `filtersSearch_${uniqueKey}`,
-    ref: searchTriggerRef,
-    name: translate("Search page"),
-    value: keyword,
-    onSearchKeyDown: handleSearchKeyDown,
-    onOpenPopup: isOpen ? undefined : handleTriggerClick,
-    onChange: handleSearchKeywordChange,
-    handleRemove: onSearchItemClick,
-    searchSelection: searchSelection,
-    className: "zen-filters__search-with-pills"
-  }), [uniqueKey, translate, keyword, handleSearchKeyDown, isOpen, handleTriggerClick, handleSearchKeywordChange, onSearchItemClick, searchSelection]);
-  const memoizedSearchPopup = (0, react_1.useMemo)(() => (0, jsx_runtime_1.jsx)(filtersSearch_1.FiltersSearch, {
-    id: `filtersSearch_${uniqueKey}_popup`,
+  const memoizedSearch = (0, react_1.useMemo)(() => {
+    if (isEmptySearchBar) {
+      return null;
+    }
+    const popupAttributes = redundantPopup ? {} : {
+      ariaControls: popupId,
+      ariaHaspopup: "dialog",
+      ariaExpanded: isOpen ? "true" : "false",
+      ariaAutocomplete: "list",
+      role: "combobox",
+      ariaLabel: translate("Open setting conditions popup")
+    };
+    return (0, jsx_runtime_1.jsx)(filtersSearch_1.FiltersSearch, Object.assign({
+      id: `filtersSearch_${uniqueKey}`,
+      ref: searchTriggerRef,
+      name: translate("Search page"),
+      value: keyword,
+      onSearchKeyDown: handleSearchKeyDown,
+      onOpenPopup: isOpen ? undefined : handleOpenChange.bind(null, true),
+      onChange: handleSearchKeywordChange,
+      handleRemove: onSearchItemClick,
+      searchSelection: searchSelection,
+      className: "zen-filters__search-with-pills"
+    }, popupAttributes));
+  }, [isEmptySearchBar, uniqueKey, translate, keyword, handleSearchKeyDown, isOpen, handleOpenChange, handleSearchKeywordChange, onSearchItemClick, searchSelection, popupId, redundantPopup]);
+  const memoizedSearchPopup = (0, react_1.useMemo)(() => isEmptySearchBar ? null : (0, jsx_runtime_1.jsx)(filtersSearch_1.FiltersSearch, {
+    id: `filtersSearchPopup_${uniqueKey}`,
     ref: searchPopupTriggerRef,
     name: translate("Search page"),
     value: keyword,
     onChange: setKeyword,
     onSearchKeyDown: handleSearchKeyDown,
     handleRemove: onSearchItemClick,
-    searchSelection: searchSelection,
+    searchSelection: isMobile ? internalSearchSelection : searchSelection,
     className: "zen-filters-popup__search-with-pills"
-  }), [uniqueKey, translate, keyword, setKeyword, handleSearchKeyDown, onSearchItemClick, searchSelection]);
-  const memoizedSearchList = (0, react_1.useMemo)(() => !isOpen ? null : (0, jsx_runtime_1.jsx)(filtersSearchList_1.FiltersSearchList, {
+  }), [isEmptySearchBar, uniqueKey, translate, keyword, setKeyword, handleSearchKeyDown, onSearchItemClick, isMobile, internalSearchSelection, searchSelection]);
+  const memoizedSearchList = (0, react_1.useMemo)(() => !isOpen || isEmptySearchBar ? null : (0, jsx_runtime_1.jsx)(filtersSearchList_1.FiltersSearchList, {
     searchValue: keyword,
     searchListRef: searchListRef,
     searchData: combinedData,
-    searchSelection: searchSelection,
+    searchSelection: isMobile ? internalSearchSelection : searchSelection,
     onlyOneType: searchOnlyOneType,
     getIconByType: getIconByType,
-    handleSearchItemClick: onSearchItemClick,
-    handleClearSearchSelection: onClearSearchSelection,
+    handleSearchItemClick: isMobile ? onInternalSearchItemClick : onSearchItemClick,
+    handleClearSearchSelection: isMobile ? onClearInternalSearchSelection : onClearSearchSelection,
     recentSearches: isRecentSearchesMode ? recentSearches : undefined,
     onRemoveRecentSearchItem: isRecentSearchesMode ? onRemoveRecentSearchItem : undefined,
-    handleRecentSearchItemClick: isRecentSearchesMode ? handleRecentSearchItemClick : undefined
-  }), [isOpen, keyword, combinedData, searchSelection, getIconByType, onSearchItemClick, onClearSearchSelection, isRecentSearchesMode, recentSearches, onRemoveRecentSearchItem, handleRecentSearchItemClick, searchOnlyOneType, searchListRef]);
+    handleRecentSearchItemClick: isRecentSearchesMode ? handleRecentSearchItemClick : undefined,
+    applyButtonHandler: isMobile ? handleApplySearchSelection : undefined,
+    isInitialSearchSelectionState: isMobile ? memoizedIsInitialSearchSelectionState : undefined
+  }), [isOpen, keyword, combinedData, isMobile, internalSearchSelection, searchSelection, searchOnlyOneType, getIconByType, onInternalSearchItemClick, onSearchItemClick, onClearInternalSearchSelection, onClearSearchSelection, isRecentSearchesMode, recentSearches, onRemoveRecentSearchItem, handleRecentSearchItemClick, handleApplySearchSelection, memoizedIsInitialSearchSelectionState, isEmptySearchBar]);
   const allOption = (0, react_1.useMemo)(() => (0, filtersSelect_1.getAllOption)(translate), [translate]);
   const selectTriggerPopup = (0, react_1.useMemo)(() => (0, jsx_runtime_1.jsx)(textIconButton_1.TextIconButton, {
     className: "zen-filters__select-trigger",
     iconClasses: "zen-filters__select-trigger-icon",
     contentClasses: "zen-filters__select-trigger-content",
     title: translate("Close setting conditions popup"),
-    onClick: handleTriggerClick,
+    onClick: handleOpenChange.bind(null, false),
     icon: iconChevronTopSmall_1.IconChevronTopSmall,
     iconPosition: "end",
     children: translate("Search by")
-  }), [handleTriggerClick, translate]);
+  }), [handleOpenChange, translate]);
   // added onMouseDown to prevent focus
   const selectTrigger = (0, react_1.useMemo)(() => {
     var _a;
-    return isMobile ? null : (0, jsx_runtime_1.jsx)(textIconButton_1.TextIconButton, {
+    if (isMobile || redundantPopup) {
+      return null;
+    }
+    const currentSelectedType = selectState[0] === filtersSelect_1.ALL_SELECT_OPTION_ID ? allOption.name : (_a = searchTypesArray.find(item => item.id === selectState[0])) === null || _a === void 0 ? void 0 : _a.name;
+    return (0, jsx_runtime_1.jsx)(textIconButton_1.TextIconButton, {
       tabIndex: -1,
       onMouseDown: e => e.preventDefault(),
       className: "zen-filters__select-trigger",
       iconClasses: "zen-filters__select-trigger-icon",
       contentClasses: "zen-filters__select-trigger-content",
       title: translate("Open setting conditions popup"),
-      onClick: handleTriggerClick,
+      onClick: handleOpenChange.bind(null, true),
       icon: iconChevronDownSmall_1.IconChevronDownSmall,
       iconPosition: "end",
-      children: selectState[0] === filtersSelect_1.ALL_SELECT_OPTION_ID ? allOption.name : (_a = searchTypesArray.find(item => item.id === selectState[0])) === null || _a === void 0 ? void 0 : _a.name
+      children: currentSelectedType
     });
-  }, [translate, handleTriggerClick, selectState, allOption.name, searchTypesArray, isMobile]);
-  const memoizedPopup = (0, react_1.useMemo)(() => (0, jsx_runtime_1.jsx)(controlledPopup_1.ControlledPopup, {
+  }, [isMobile, redundantPopup, translate, handleOpenChange, selectState, allOption.name, searchTypesArray]);
+  const popupChangeHandler = (0, react_1.useCallback)(val => {
+    (isMobile ? handleCancelSearchSelection : handleOpenChange)(val);
+  }, [isMobile, handleCancelSearchSelection, handleOpenChange]);
+  const memoizedPopup = (0, react_1.useMemo)(() => isEmptySearchBar || redundantPopup ? null : (0, jsx_runtime_1.jsx)(controlledPopup_1.ControlledPopup, {
     paddingY: -34,
     isOpen: isOpen,
-    className: (0, classNames_1.classNames)(["zen-filters-popup"]),
-    onOpenChange: handleOpenChange,
-    useTrapFocusWithTrigger: "on",
+    className: (0, classNames_1.classNames)(["zen-filters-popup", isMobile ? "zen-filters-popup--mobile" : ""]),
+    onOpenChange: popupChangeHandler,
+    useTrapFocusWithTrigger: "none",
     alignment: "bottom",
     shouldHoldScroll: true,
+    preventAttributesAutoSet: true,
     triggerRef: triggerRef,
     ariaLabel: translate("Setting conditions"),
     recalculateOnScroll: true,
+    id: popupId,
     children: (0, jsx_runtime_1.jsxs)("div", {
       className: "zen-filters-popup__content",
-      children: [(0, jsx_runtime_1.jsxs)("div", {
+      children: [isMobile ? null : (0, jsx_runtime_1.jsxs)("div", {
         className: "zen-filters-popup__left-panel",
         children: [selectTriggerPopup, memoizedSelect]
       }), (0, jsx_runtime_1.jsxs)("div", {
         className: "zen-filters-popup__right-panel",
-        children: [memoizedSearchPopup, memoizedSearchList]
+        children: [(0, jsx_runtime_1.jsxs)("div", {
+          className: (0, classNames_1.classNames)(["zen-filters-popup__first-row", isMobile ? "zen-filters-popup__first-row--mobile" : ""]),
+          children: [memoizedSearchPopup, isMobile ? (0, jsx_runtime_1.jsx)(button_1.Button, {
+            type: "tertiary",
+            onClick: handleCancelSearchSelection,
+            children: translate("Cancel")
+          }) : null]
+        }), (0, jsx_runtime_1.jsxs)("div", {
+          className: (0, classNames_1.classNames)(["zen-filters-popup__second-row", isMobile ? "zen-filters-popup__second-row--mobile" : ""]),
+          children: [isMobile ? memoizedSelectCompact : null, memoizedSearchList]
+        })]
       })]
     })
-  }), [isOpen, handleOpenChange, translate, selectTriggerPopup, memoizedSelect, memoizedSearchPopup, memoizedSearchList]);
+  }), [isEmptySearchBar, redundantPopup, isOpen, isMobile, popupChangeHandler, handleCancelSearchSelection, translate, selectTriggerPopup, memoizedSelect, memoizedSearchPopup, memoizedSelectCompact, memoizedSearchList, popupId]);
   const filtersForRender = (0, react_1.useMemo)(() => filters.filter(el => {
     const elProps = el.props;
     return typeof elProps.visible === "boolean" ? elProps.visible : elProps.visible === undefined ? false : elProps.visible(Array.from(selectState), undefined);
@@ -402,26 +498,30 @@ const Filters = ({
   }, [filters, selectState]);
   const hasSavedFilters = savedFiltersStates.size > 0;
   const hasFilters = filtersForCalculation.length > 0;
-  const memoizedFiltersContainer = (0, react_1.useMemo)(() => hasFilters ? (0, jsx_runtime_1.jsx)(filtersContainer_1.FiltersContainer, {
+  const memoizedFiltersContainer = (0, react_1.useMemo)(() => hasFilters || hasSavedFilters ? (0, jsx_runtime_1.jsx)(filtersContainer_1.FiltersContainer, {
     filtersChipRef: sidePanelTriggerRef,
     filtersClickHandler: handleViewState,
     filtersForCalculation: filtersForCalculation,
     isPinned: isPinMode ? isPinned : undefined,
     onPinChange: isPinMode ? onPinChange : undefined,
     hasSavedFilters: hasSavedFilters,
+    className: isEmptySearchBar ? "zen-filters__container--no-search" : "",
     children: filtersForRender
-  }) : null, [handleViewState, filtersForCalculation, isPinMode, isPinned, onPinChange, hasSavedFilters, filtersForRender, hasFilters]);
-  const memoizedSidePanel = (0, react_1.useMemo)(() => (0, jsx_runtime_1.jsx)(filtersSidePanel_1.FiltersSidePanel, {
-    isOpen: isSidePanelOpen,
-    onApply: handleSidePanelApply,
-    onClose: handleViewState,
-    onPin: isPinMode ? handlePinChange : undefined,
-    isPinned: isPinMode ? isPinned : undefined,
-    filters: filters,
-    externalState: allFiltersState,
-    setExternalState: setAllFiltersState,
-    triggerRef: sidePanelTriggerRef
-  }), [isSidePanelOpen, handleSidePanelApply, handleViewState, handlePinChange, isPinned, isPinMode, filters, allFiltersState, setAllFiltersState, sidePanelTriggerRef]);
+  }) : null, [handleViewState, filtersForCalculation, isPinMode, isPinned, onPinChange, hasSavedFilters, filtersForRender, hasFilters, isEmptySearchBar]);
+  const memoizedSidePanel = (0, react_1.useMemo)(() => (0, jsx_runtime_1.jsx)(filtersSidePanelProvider_1.FiltersSidePanelProvider, {
+    isSidePanelView: true,
+    children: (0, jsx_runtime_1.jsx)(filtersSidePanel_1.FiltersSidePanel, {
+      isOpen: isSidePanelOpen,
+      onApply: handleSidePanelApply,
+      onClose: handleViewState,
+      onPin: isPinMode ? handlePinChange : undefined,
+      isPinned: isPinMode ? isPinned : undefined,
+      filters: filters,
+      externalState: allFiltersState,
+      setExternalState: setAllFiltersState,
+      triggerRef: sidePanelTriggerRef
+    })
+  }), [isSidePanelOpen, handleSidePanelApply, handleViewState, isPinMode, handlePinChange, isPinned, filters, allFiltersState, setAllFiltersState]);
   const memoizedStatus = (0, react_1.useMemo)(() => isPinned && isPinMode ? "accent" : undefined, [isPinned, isPinMode]);
   const memoizedSavedFiltersItems = (0, react_1.useMemo)(() => new Set(savedFiltersStates.keys()), [savedFiltersStates]);
   const memoizedSavedFiltersActive = (0, react_1.useMemo)(() => {
@@ -463,13 +563,13 @@ const Filters = ({
       });
     }
   }, [filters, savedFiltersStates]);
-  return (0, jsx_runtime_1.jsxs)("div", {
+  return (0, jsx_runtime_1.jsxs)("section", {
+    role: "search",
+    "aria-label": translate("Filters and search"),
     className: (0, classNames_1.classNames)(["zen-filters", className || ""]),
-    children: [(0, jsx_runtime_1.jsxs)("div", {
-      className: (0, classNames_1.classNames)(["zen-filters__main-row", isOpen ? "" : "zen-filters__main-row--initial"]),
+    children: [isEmptySearchBar ? null : (0, jsx_runtime_1.jsxs)("div", {
+      className: (0, classNames_1.classNames)(["zen-filters__main-row", isOpen ? "" : "zen-filters__main-row--initial", isMobile ? "zen-filters__main-row--mobile" : ""]),
       ref: triggerRef,
-      role: "combobox",
-      "aria-label": translate("Open setting conditions popup"),
       children: [selectTrigger, memoizedSearch]
     }), (0, jsx_runtime_1.jsx)(filtersSavedItemsProvider_1.FiltersSavedItemsProvider, {
       items: memoizedSavedFiltersItems,
@@ -501,5 +601,4 @@ exports.Filters.DateInput = filtersDateInput_1.FiltersDateInput;
 exports.Filters.Dropdown = filtersDropdown_1.FiltersDropdown;
 exports.Filters.Groups = filtersGroups_1.FiltersGroups;
 exports.Filters.Range = filtersRange_1.FiltersRange;
-// Filters.Custom = FiltersCustom;
 exports.Filters.displayName = exports.FiltersDisplayName;

package/dist/filters/filtersHelper.d.ts

@@ -3,11 +3,12 @@ import React from "react";
 import { TFiltersDropdownAllStates } from "./components/filtersDropdown";
 import { IFiltersSearchTypesItem, ISavedFilters } from "./filters";
 import { IRecentSearchItem, ISearchItem } from "./components/filtersSearchList";
+import "../utils/globalThisPolyfill";
 export declare const createStateHash: (state: unknown) => string;
 export declare const createPropsHash: (props: Record<string, unknown>) => string;
 export declare const stabilizeChildrenWithId: (children: React.ReactNode) => (React.ReactElement | null)[];
 export type TDropdownState = "base" | "withCheckbox" | "fullSelection" | "fullSelectionWithCheckbox";
-export declare const getDropdownStateType: (dropdownState: TFiltersDropdownAllStates) => "base" | "fullSelectionWithCheckbox" | "fullSelection" | "withCheckbox";
+export declare const getDropdownStateType: (dropdownState: TFiltersDropdownAllStates) => "base" | "withCheckbox" | "fullSelection" | "fullSelectionWithCheckbox";
 export declare const prepareDefaultDropdownState: (type: TDropdownState) => never[] | {
     selected: never[];
     isAllSelected: boolean;
@@ -40,3 +41,10 @@ export declare const useCombineData: (searchTypes: IFiltersSearchTypesItem[]) =>
 export declare function getArrayOfElements<T>(elem: T | T[] | undefined): T[];
 export declare function getSavedFiltersFromStorage(key: string): Promise<ISavedFilters[]>;
 export declare function getRecentSearchesFromStorage(key: string): IRecentSearchItem[];
+/**
+ * Processes children to apply Static Metadata pattern
+ * If a component has metaData, it merges the metaData with component props
+ * @param children - React children to process
+ * @returns Processed ReactElement array
+ */
+export declare const processChildrenWithMetaData: (children: React.ReactNode) => ReactElement[];