@geotab/zenith 3.5.0 → 3.6.0-beta.0

package/esm/filters/filters.js

@@ -3,16 +3,14 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import { useCallback, useEffect, useMemo, useState } from "react";
 import { flushSync } from "react-dom";
-import { getArrayOfChildren } from "../header/headerHelpers";
 import React from "react";
-import { ALL_SELECT_OPTION_ID, FiltersSelect, getAllOption } from "./components/filtersSelect";
+import { ALL_SELECT_OPTION_ID, FiltersSelect, getAllOption, getFiltersSearchTypeAllOption } from "./components/filtersSelect";
 import { classNames } from "../commonHelpers/classNames/classNames";
 import { TextIconButton } from "../textIconButton/textIconButton";
 import { IconChevronDownSmall } from "../icons/iconChevronDownSmall";
 import { useLanguage } from "../utils/localization/useLanguage";
 import { ControlledPopup } from "../controlledPopup/controlledPopup";
 import { FiltersContainer } from "./components/filtersContainer";
-import { getAllowedFilters } from "./components/filtersItem";
 import { FiltersDropdown } from "./components/filtersDropdown";
 import { FiltersGroups } from "./components/filtersGroups";
 import { FiltersRange } from "./components/filtersRange";
@@ -21,7 +19,7 @@ import { FiltersDateRange } from "./components/filtersDateRange";
 import { FiltersSearchList, KEYWORD_ID, KEYWORD_TYPE, NO_TYPED_SEARCH_ITEM } from "./components/filtersSearchList";
 import { ChipStatusProvider } from "../chip/chipStatusProvider";
 import { FiltersSavedItemsProvider } from "./components/filtersSavedItemsProvider";
-import { createStateObject, getArrayOfElements, useCombineData } from "./filtersHelper";
+import { createStateObject, getArrayOfElements, useCombineData, processChildrenWithMetaData } from "./filtersHelper";
 import { FiltersSearch } from "./components/filtersSearch";
 import { useUniqueId } from "../commonHelpers/useUniqueId";
 import { isElementsEqual } from "../utils/compareElementsUtils/isElementsEqual";
@@ -31,6 +29,13 @@ import { FiltersDateInput } from "./components/filtersDateInput";
 import { useMobile } from "../commonHelpers/hooks/useMobile";
 import { IconChevronTopSmall } from "../icons/iconChevronTopSmall";
 import { FOCUSABLE_SELECTOR } from "../utils/focusableSelector";
+import { Button } from "../button/button";
+import { FiltersSelectCompact } from "./components/filtersSelectCompact";
+import { FiltersSidePanelProvider } from "./components/filtersSidePanelProvider";
+import { zen } from "../utils/zen";
+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");
@@ -40,12 +45,36 @@ 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");
 export const FiltersDisplayName = "Filters";
 /**
  * @beta This component is currently in beta.
@@ -77,6 +106,7 @@ export const Filters = ({
   const isPinMode = Boolean(typeof isPinned === "boolean" && onPinChange);
   const isRecentSearchesMode = Boolean(recentSearches && onRemoveRecentSearchItem && onSaveRecentSearch);
   const uniqueKey = useUniqueId();
+  const popupId = `${uniqueKey}_popup`;
   const isMobile = useMobile();
   const [isSidePanelOpen, setIsSidePanelOpen] = useState(false);
   const triggerRef = React.useRef(null);
@@ -84,12 +114,14 @@ export const Filters = ({
   const searchPopupTriggerRef = React.useRef(null);
   const searchListRef = React.useRef(null);
   const selectListRef = React.useRef(null);
+  const selectListCompactRef = React.useRef(null);
   const searchTriggerRef = React.useRef(null);
   const prevIsOpenRef = React.useRef(isOpen);
   const [savedFiltersStates, setSavedFiltersStates] = useState(new Map());
   const {
     translate
   } = useLanguage();
+  const [internalSearchSelection, setInternalSearchSelection] = useState(searchSelection || []);
   const searchTypesArray = useMemo(() => getArrayOfElements(searchTypes), [searchTypes]);
   const searchOnlyOneType = useMemo(() => searchTypesArray.length === 1 ? searchTypesArray[0].id : undefined, [searchTypesArray]);
   const searchTypesMap = useMemo(() => {
@@ -104,10 +136,9 @@ export const Filters = ({
     name: el.name,
     subItems: el.subItems ? [...el.subItems] : undefined
   })), [searchTypesArray]);
-  const filters = useMemo(() => {
-    const childrenArray = getArrayOfChildren(children);
-    return getAllowedFilters(childrenArray);
-  }, [children]);
+  const filters = useMemo(() => processChildrenWithMetaData(children), [children]);
+  const isEmptySearchBar = useMemo(() => keyword === undefined && setKeyword === undefined, [keyword, setKeyword]);
+  const redundantPopup = useMemo(() => searchSelection === undefined && setSearchSelection === undefined && searchTypes === undefined, [searchSelection, searchTypes, setSearchSelection]);
   useEffect(() => {
     if (!isSavedFiltersMode) {
       return;
@@ -163,6 +194,11 @@ export const Filters = ({
       prevIsOpenRef.current && ((_b = searchTriggerRef.current) === null || _b === void 0 ? void 0 : _b.focus());
     }
   }, [isOpen, searchPopupTriggerRef, searchTriggerRef]);
+  useEffect(() => {
+    if (isOpen && !prevIsOpenRef.current && isMobile) {
+      setInternalSearchSelection(searchSelection || []);
+    }
+  }, [isMobile, isOpen, searchPopupTriggerRef, searchSelection]);
   useEffect(() => {
     if (!isOpen && prevIsOpenRef.current) {
       prevIsOpenRef.current = false;
@@ -172,10 +208,13 @@ export const Filters = ({
       prevIsOpenRef.current = true;
     }
   }, [isOpen, isRecentSearchesMode, handleSaveRecentSearch]);
-  const selectState = useMemo(() => Object.keys(searchType), [searchType]);
+  const selectState = useMemo(() => Object.keys(searchType ? searchType : getFiltersSearchTypeAllOption()), [searchType]);
   const onClearSearchSelection = useCallback(() => {
     setSearchSelection && setSearchSelection([]);
   }, [setSearchSelection]);
+  const onClearInternalSearchSelection = useCallback(() => {
+    setSearchSelection && setInternalSearchSelection([]);
+  }, [setInternalSearchSelection, setSearchSelection]);
   const onSearchItemClick = useCallback(item => {
     if (!(searchSelection && setSearchSelection)) {
       return;
@@ -184,7 +223,7 @@ export const Filters = ({
     const currentItem = searchOnlyOneType ? searchSelection.find(el => el.id === item.id) : searchSelection.find(el => el.id === item.id && (el.type || 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 || NO_TYPED_SEARCH_ITEM) === typeKey));
-      currentItem.id === KEYWORD_ID && setKeyword("");
+      currentItem.id === KEYWORD_ID && (setKeyword === null || setKeyword === void 0 ? void 0 : setKeyword(""));
       setSearchSelection(newValue);
     } else {
       setSearchSelection([...searchSelection, Object.assign(Object.assign({}, item), {
@@ -192,32 +231,48 @@ export const Filters = ({
       })]);
     }
   }, [searchOnlyOneType, searchSelection, setKeyword, setSearchSelection]);
-  const handleTriggerClick = useCallback(() => {
-    if (!document.startViewTransition) {
-      setIsOpen(prevState => !prevState);
+  const onInternalSearchItemClick = useCallback(item => {
+    if (!setSearchSelection) {
       return;
     }
-    document.startViewTransition(() => {
-      flushSync(() => {
-        setIsOpen(prevState => !prevState);
-      });
-    });
-  }, []);
-  const handleViewState = useCallback(() => {
-    onToggleView && onToggleView(!isSidePanelOpen);
-    setIsSidePanelOpen(val => !val);
-  }, [isSidePanelOpen, onToggleView]);
+    const typeKey = item.type || NO_TYPED_SEARCH_ITEM;
+    const currentItem = searchOnlyOneType ? internalSearchSelection.find(el => el.id === item.id) : internalSearchSelection.find(el => el.id === item.id && (el.type || 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 || NO_TYPED_SEARCH_ITEM) === typeKey));
+      currentItem.id === KEYWORD_ID && (setKeyword === null || setKeyword === void 0 ? void 0 : setKeyword(""));
+      setInternalSearchSelection(newValue);
+    } else {
+      setInternalSearchSelection([...internalSearchSelection, Object.assign(Object.assign({}, item), {
+        type: item.type || searchOnlyOneType || NO_TYPED_SEARCH_ITEM
+      })]);
+    }
+  }, [searchOnlyOneType, internalSearchSelection, setKeyword, setInternalSearchSelection, setSearchSelection]);
   const handleOpenChange = useCallback(open => {
-    if (!document.startViewTransition) {
+    const doc = zen.document;
+    if (!(doc === null || doc === void 0 ? void 0 : doc.startViewTransition)) {
+      open && setInternalSearchSelection(searchSelection || []);
       setIsOpen(open);
       return;
     }
-    document.startViewTransition(() => {
+    doc.startViewTransition(() => {
       flushSync(() => {
+        open && setInternalSearchSelection(searchSelection || []);
         setIsOpen(open);
       });
     });
-  }, []);
+  }, [searchSelection]);
+  const handleApplySearchSelection = useCallback(() => {
+    setSearchSelection && setSearchSelection(internalSearchSelection);
+    handleOpenChange(false);
+  }, [internalSearchSelection, setSearchSelection, handleOpenChange]);
+  const handleCancelSearchSelection = useCallback(() => {
+    setInternalSearchSelection(searchSelection || []);
+    handleOpenChange(false);
+  }, [searchSelection, setInternalSearchSelection, handleOpenChange]);
+  const handleViewState = useCallback(() => {
+    onToggleView && onToggleView(!isSidePanelOpen);
+    setIsSidePanelOpen(val => !val);
+  }, [isSidePanelOpen, onToggleView]);
   const handleSidePanelApply = useCallback(state => {
     filters.forEach(filter => {
       const filterProps = filter.props;
@@ -248,7 +303,7 @@ export 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 = useCallback(() => {
@@ -258,10 +313,10 @@ export 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(FOCUSABLE_SELECTOR);
@@ -271,7 +326,7 @@ export const Filters = ({
       const firstItem = (_b = selectListRef.current) === null || _b === void 0 ? void 0 : _b.querySelector(FOCUSABLE_SELECTOR);
       firstItem === null || firstItem === void 0 ? void 0 : firstItem.focus();
     }
-  }, [isOpen, isRecentSearchesMode, handleSaveRecentSearch, handleTriggerClick]);
+  }, [isOpen, isRecentSearchesMode, handleSaveRecentSearch, handleOpenChange]);
   const getIconByType = useCallback(type => {
     if (!type) {
       return IconFilter;
@@ -281,100 +336,141 @@ export const Filters = ({
   }, [searchTypesArray]);
   const combinedData = useCombineData(searchTypesArray);
   const memoizedSelect = useMemo(() => _jsx(FiltersSelect, {
-    value: searchType,
+    value: searchType || getFiltersSearchTypeAllOption(),
     selectListRef: selectListRef,
     onChange: setSearchType,
     items: searchTypesToSelect
   }), [searchType, searchTypesToSelect, setSearchType]);
+  const memoizedSelectCompact = useMemo(() => _jsx(FiltersSelectCompact, {
+    value: searchType || getFiltersSearchTypeAllOption(),
+    selectListRef: selectListCompactRef,
+    onChange: setSearchType,
+    items: searchTypesToSelect
+  }), [searchType, searchTypesToSelect, setSearchType]);
+  const memoizedIsInitialSearchSelectionState = useMemo(() => (searchSelection || []).length === internalSearchSelection.length && internalSearchSelection.every(item => (searchSelection || []).some(selItem => item.id === selItem.id && item.type === selItem.type)), [internalSearchSelection, searchSelection]);
   const handleSearchKeywordChange = useCallback(newKeyword => {
-    setKeyword(newKeyword);
+    setKeyword === null || setKeyword === void 0 ? void 0 : setKeyword(newKeyword);
     !isOpen && handleOpenChange(true);
   }, [setKeyword, isOpen, handleOpenChange]);
-  const memoizedSearch = useMemo(() => _jsx(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 = useMemo(() => _jsx(FiltersSearch, {
-    id: `filtersSearch_${uniqueKey}_popup`,
+  const memoizedSearch = 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 _jsx(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 = useMemo(() => isEmptySearchBar ? null : _jsx(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 = useMemo(() => !isOpen ? null : _jsx(FiltersSearchList, {
+  }), [isEmptySearchBar, uniqueKey, translate, keyword, setKeyword, handleSearchKeyDown, onSearchItemClick, isMobile, internalSearchSelection, searchSelection]);
+  const memoizedSearchList = useMemo(() => !isOpen || isEmptySearchBar ? null : _jsx(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 = useMemo(() => getAllOption(translate), [translate]);
   const selectTriggerPopup = useMemo(() => _jsx(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,
     iconPosition: "end",
     children: translate("Search by")
-  }), [handleTriggerClick, translate]);
+  }), [handleOpenChange, translate]);
   // added onMouseDown to prevent focus
   const selectTrigger = useMemo(() => {
     var _a;
-    return isMobile ? null : _jsx(TextIconButton, {
+    if (isMobile || redundantPopup) {
+      return null;
+    }
+    const currentSelectedType = selectState[0] === ALL_SELECT_OPTION_ID ? allOption.name : (_a = searchTypesArray.find(item => item.id === selectState[0])) === null || _a === void 0 ? void 0 : _a.name;
+    return _jsx(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,
       iconPosition: "end",
-      children: selectState[0] === 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 = useMemo(() => _jsx(ControlledPopup, {
+  }, [isMobile, redundantPopup, translate, handleOpenChange, selectState, allOption.name, searchTypesArray]);
+  const popupChangeHandler = useCallback(val => {
+    (isMobile ? handleCancelSearchSelection : handleOpenChange)(val);
+  }, [isMobile, handleCancelSearchSelection, handleOpenChange]);
+  const memoizedPopup = useMemo(() => isEmptySearchBar || redundantPopup ? null : _jsx(ControlledPopup, {
     paddingY: -34,
     isOpen: isOpen,
-    className: classNames(["zen-filters-popup"]),
-    onOpenChange: handleOpenChange,
-    useTrapFocusWithTrigger: "on",
+    className: 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: _jsxs("div", {
       className: "zen-filters-popup__content",
-      children: [_jsxs("div", {
+      children: [isMobile ? null : _jsxs("div", {
         className: "zen-filters-popup__left-panel",
         children: [selectTriggerPopup, memoizedSelect]
       }), _jsxs("div", {
         className: "zen-filters-popup__right-panel",
-        children: [memoizedSearchPopup, memoizedSearchList]
+        children: [_jsxs("div", {
+          className: classNames(["zen-filters-popup__first-row", isMobile ? "zen-filters-popup__first-row--mobile" : ""]),
+          children: [memoizedSearchPopup, isMobile ? _jsx(Button, {
+            type: "tertiary",
+            onClick: handleCancelSearchSelection,
+            children: translate("Cancel")
+          }) : null]
+        }), _jsxs("div", {
+          className: 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 = 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);
@@ -389,26 +485,30 @@ export const Filters = ({
   }, [filters, selectState]);
   const hasSavedFilters = savedFiltersStates.size > 0;
   const hasFilters = filtersForCalculation.length > 0;
-  const memoizedFiltersContainer = useMemo(() => hasFilters ? _jsx(FiltersContainer, {
+  const memoizedFiltersContainer = useMemo(() => hasFilters || hasSavedFilters ? _jsx(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 = useMemo(() => _jsx(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 = useMemo(() => _jsx(FiltersSidePanelProvider, {
+    isSidePanelView: true,
+    children: _jsx(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 = useMemo(() => isPinned && isPinMode ? "accent" : undefined, [isPinned, isPinMode]);
   const memoizedSavedFiltersItems = useMemo(() => new Set(savedFiltersStates.keys()), [savedFiltersStates]);
   const memoizedSavedFiltersActive = useMemo(() => {
@@ -450,13 +550,13 @@ export const Filters = ({
       });
     }
   }, [filters, savedFiltersStates]);
-  return _jsxs("div", {
+  return _jsxs("section", {
+    role: "search",
+    "aria-label": translate("Filters and search"),
     className: classNames(["zen-filters", className || ""]),
-    children: [_jsxs("div", {
-      className: classNames(["zen-filters__main-row", isOpen ? "" : "zen-filters__main-row--initial"]),
+    children: [isEmptySearchBar ? null : _jsxs("div", {
+      className: 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]
     }), _jsx(FiltersSavedItemsProvider, {
       items: memoizedSavedFiltersItems,
@@ -487,5 +587,4 @@ Filters.DateInput = FiltersDateInput;
 Filters.Dropdown = FiltersDropdown;
 Filters.Groups = FiltersGroups;
 Filters.Range = FiltersRange;
-// Filters.Custom = FiltersCustom;
 Filters.displayName = FiltersDisplayName;

package/esm/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[];

package/esm/filters/filtersHelper.js

@@ -1,3 +1,14 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import { Children, useMemo } from "react";
 import { FiltersGroups } from "./components/filtersGroups";
@@ -8,6 +19,10 @@ import { FiltersChip } from "./components/filtersChip";
 import { FiltersDropdown } from "./components/filtersDropdown";
 import { NO_TYPED_SEARCH_ITEM } from "./components/filtersSearchList";
 import { groupsFilterTotalStateDefault } from "../groupsFilterRaw/types";
+import { getArrayOfChildren } from "../header/headerHelpers";
+import { getAllowedFilters } from "./components/filtersItem";
+import { zen } from "../utils/zen";
+import "../utils/globalThisPolyfill";
 export const createStateHash = (state) => {
     if (state === undefined) {
         return "undefined";
@@ -96,13 +111,13 @@ export const getFiltersState = (children) => {
         const childProps = child.props;
         state[childProps.id] = {};
         state[childProps.id].state = childProps.state;
-        if (child.type === FiltersGroups) {
+        if (child.type === FiltersGroups || childProps.childType === "FiltersGroups") {
             state[childProps.id].defaultState = groupsFilterTotalStateDefault;
         }
-        else if (child.type === FiltersChip) {
+        else if (child.type === FiltersChip || childProps.childType === "FiltersChip") {
             state[childProps.id].defaultState = false;
         }
-        else if (child.type === FiltersDropdown) {
+        else if (child.type === FiltersDropdown || childProps.childType === "FiltersDropdown") {
             state[childProps.id].defaultState = childProps.defaultState || prepareDefaultDropdownState(getDropdownStateType(childProps.state));
         }
         else {
@@ -116,13 +131,13 @@ export const createStateObject = (children, field) => {
     Children.forEach(children, (child) => {
         const childProps = child.props;
         state[childProps.id] = {};
-        if (child.type === FiltersGroups && field === "defaultState") {
+        if ((child.type === FiltersGroups || childProps.childType === "FiltersGroups") && field === "defaultState") {
             state[childProps.id] = groupsFilterTotalStateDefault;
         }
-        else if (child.type === FiltersChip && field === "defaultState") {
+        else if ((child.type === FiltersChip || childProps.childType === "FiltersChip") && field === "defaultState") {
             state[childProps.id] = false;
         }
-        else if (child.type === FiltersDropdown && field === "defaultState") {
+        else if ((child.type === FiltersDropdown || childProps.childType === "FiltersDropdown") && field === "defaultState") {
             state[childProps.id] = childProps.defaultState || prepareDefaultDropdownState(getDropdownStateType(childProps.state));
         }
         else {
@@ -219,7 +234,8 @@ const dateReviver = (_, value) => {
     return value;
 };
 const getParsedFilters = (storageKey) => {
-    const storedData = localStorage.getItem(storageKey);
+    var _a;
+    const storedData = (_a = zen.localStorage) === null || _a === void 0 ? void 0 : _a.getItem(storageKey);
     if (!storedData) {
         return [];
     }
@@ -236,7 +252,8 @@ export async function getSavedFiltersFromStorage(key) {
     return Promise.resolve(result);
 }
 export function getRecentSearchesFromStorage(key) {
-    const storedData = localStorage.getItem(key);
+    var _a;
+    const storedData = (_a = zen.localStorage) === null || _a === void 0 ? void 0 : _a.getItem(key);
     if (!storedData) {
         return [];
     }
@@ -248,3 +265,44 @@ export function getRecentSearchesFromStorage(key) {
         return [];
     }
 }
+const createDefaultStateMetaData = (defaultState, childType, state) => {
+    if (defaultState) {
+        return defaultState;
+    }
+    if (childType === "FiltersGroups") {
+        return groupsFilterTotalStateDefault;
+    }
+    if (childType === "FiltersChip") {
+        return false;
+    }
+    if (childType === "FiltersDropdown") {
+        return prepareDefaultDropdownState(getDropdownStateType(state));
+    }
+    return defaultState;
+};
+/**
+ * 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 const processChildrenWithMetaData = (children) => {
+    const childrenArray = getArrayOfChildren(children);
+    const allowedElements = getAllowedFilters(childrenArray);
+    return allowedElements.map(child => {
+        const componentType = child.type;
+        const metaData = componentType === null || componentType === void 0 ? void 0 : componentType.metaData;
+        if (metaData) {
+            // If component has metaData, merge it with existing props
+            // MetaData provides: id, name, defaultState, visible, childType
+            // Component props provide: state, onChange, and other props
+            const childProps = child.props;
+            const { state, onChange } = childProps, otherProps = __rest(childProps, ["state", "onChange"]);
+            const mergedProps = Object.assign(Object.assign({}, otherProps), { id: metaData.id, defaultState: createDefaultStateMetaData(metaData.defaultState || childProps.defaultState, metaData.childType, state), visible: metaData.visible, state,
+                onChange, childType: metaData.childType });
+            // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
+            return React.cloneElement(child, mergedProps);
+        }
+        return child;
+    });
+};