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

package/esm/filters/filters.js

@@ -1,3 +1,4 @@
+import { injectString } from "../utils/localization/translationsDictionary";
 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";
@@ -30,276 +31,445 @@ import { FiltersDateInput } from "./components/filtersDateInput";
 import { useMobile } from "../commonHelpers/hooks/useMobile";
 import { IconChevronTopSmall } from "../icons/iconChevronTopSmall";
 import { FOCUSABLE_SELECTOR } from "../utils/focusableSelector";
+injectString("en", "Search page", "Search page");
+injectString("en", "Close setting conditions popup", "Close setting conditions popup");
+injectString("en", "Search by", "Search by");
+injectString("en", "Open setting conditions popup", "Open setting conditions popup");
+injectString("en", "Setting conditions", "Setting conditions");
 export const FiltersDisplayName = "Filters";
 /**
  * @beta This component is currently in beta.
  */
-export const Filters = ({ className, children, isPinned, onPinChange, keyword, setKeyword, searchTypes, searchType, setSearchType, allFiltersState, setAllFiltersState, onToggleView, searchSelection, setSearchSelection, recentSearches, onRemoveRecentSearchItem, onSaveRecentSearch, savedFilters, onRemoveSavedFilter, onSaveFilter }) => {
-    const [isOpen, setIsOpen] = useState(false);
-    const isSavedFiltersMode = Boolean(savedFilters && onRemoveSavedFilter && onSaveFilter);
-    const isPinMode = Boolean(typeof isPinned === "boolean" && onPinChange);
-    const isRecentSearchesMode = Boolean(recentSearches && onRemoveRecentSearchItem && onSaveRecentSearch);
-    const uniqueKey = useUniqueId();
-    const isMobile = useMobile();
-    const [isSidePanelOpen, setIsSidePanelOpen] = useState(false);
-    const triggerRef = React.useRef(null);
-    const sidePanelTriggerRef = React.useRef(null);
-    const searchPopupTriggerRef = React.useRef(null);
-    const searchListRef = React.useRef(null);
-    const selectListRef = React.useRef(null);
-    const searchTriggerRef = React.useRef(null);
-    const prevIsOpenRef = React.useRef(isOpen);
-    const [savedFiltersStates, setSavedFiltersStates] = useState(new Map());
-    const { translate } = useLanguage();
-    const searchTypesArray = useMemo(() => getArrayOfElements(searchTypes), [searchTypes]);
-    const searchOnlyOneType = useMemo(() => searchTypesArray.length === 1 ? searchTypesArray[0].id : undefined, [searchTypesArray]);
-    const searchTypesMap = useMemo(() => {
-        const map = new Map();
-        searchTypesArray.forEach(el => {
-            map.set(el.id, el.name);
-        });
-        return map;
-    }, [searchTypesArray]);
-    const searchTypesToSelect = useMemo(() => searchTypesArray.map(el => ({ id: el.id, name: el.name, subItems: el.subItems ? [...el.subItems] : undefined })), [searchTypesArray]);
-    const filters = useMemo(() => {
-        const childrenArray = getArrayOfChildren(children);
-        return getAllowedFilters(childrenArray);
-    }, [children]);
-    useEffect(() => {
-        if (!isSavedFiltersMode) {
-            return;
+export const Filters = ({
+  className,
+  children,
+  isPinned,
+  onPinChange,
+  keyword,
+  setKeyword,
+  searchTypes,
+  searchType,
+  setSearchType,
+  allFiltersState,
+  setAllFiltersState,
+  onToggleView,
+  searchSelection,
+  setSearchSelection,
+  recentSearches,
+  onRemoveRecentSearchItem,
+  onSaveRecentSearch,
+  savedFilters,
+  onRemoveSavedFilter,
+  onSaveFilter
+}) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const isSavedFiltersMode = Boolean(savedFilters && onRemoveSavedFilter && onSaveFilter);
+  const isPinMode = Boolean(typeof isPinned === "boolean" && onPinChange);
+  const isRecentSearchesMode = Boolean(recentSearches && onRemoveRecentSearchItem && onSaveRecentSearch);
+  const uniqueKey = useUniqueId();
+  const isMobile = useMobile();
+  const [isSidePanelOpen, setIsSidePanelOpen] = useState(false);
+  const triggerRef = React.useRef(null);
+  const sidePanelTriggerRef = React.useRef(null);
+  const searchPopupTriggerRef = React.useRef(null);
+  const searchListRef = React.useRef(null);
+  const selectListRef = React.useRef(null);
+  const searchTriggerRef = React.useRef(null);
+  const prevIsOpenRef = React.useRef(isOpen);
+  const [savedFiltersStates, setSavedFiltersStates] = useState(new Map());
+  const {
+    translate
+  } = useLanguage();
+  const searchTypesArray = useMemo(() => getArrayOfElements(searchTypes), [searchTypes]);
+  const searchOnlyOneType = useMemo(() => searchTypesArray.length === 1 ? searchTypesArray[0].id : undefined, [searchTypesArray]);
+  const searchTypesMap = useMemo(() => {
+    const map = new Map();
+    searchTypesArray.forEach(el => {
+      map.set(el.id, el.name);
+    });
+    return map;
+  }, [searchTypesArray]);
+  const searchTypesToSelect = useMemo(() => searchTypesArray.map(el => ({
+    id: el.id,
+    name: el.name,
+    subItems: el.subItems ? [...el.subItems] : undefined
+  })), [searchTypesArray]);
+  const filters = useMemo(() => {
+    const childrenArray = getArrayOfChildren(children);
+    return getAllowedFilters(childrenArray);
+  }, [children]);
+  useEffect(() => {
+    if (!isSavedFiltersMode) {
+      return;
+    }
+    const error = savedFilters.error;
+    if (error) {
+      console.error("Failed to fetch saved filters. Error:", error);
+    } else if (savedFilters && savedFilters.data) {
+      setSavedFiltersStates(new Map(savedFilters.data.map(item => [item.name, {
+        id: item.id,
+        state: item.state
+      }])));
+    }
+  }, [isSavedFiltersMode, savedFilters]);
+  const handleSaveRecentSearch = useCallback(searchValue => {
+    if (!onSaveRecentSearch) {
+      return;
+    }
+    if (!(searchSelection === null || searchSelection === void 0 ? void 0 : searchSelection.length) && !searchValue) {
+      return;
+    }
+    const entries = searchSelection || [];
+    const keywordEntry = searchValue ? {
+      id: KEYWORD_ID,
+      name: searchValue,
+      type: KEYWORD_TYPE
+    } : entries.find(item => item.id === KEYWORD_ID);
+    const preparedItemsArray = [...entries].filter(el => el.id !== KEYWORD_ID).map(el => Object.assign(Object.assign({}, el), {
+      type: el.type || NO_TYPED_SEARCH_ITEM
+    }));
+    const isTyped = preparedItemsArray.length ? preparedItemsArray.every(el => el.type === preparedItemsArray[0].type) : false;
+    if (keywordEntry) {
+      preparedItemsArray.push(Object.assign(Object.assign({}, keywordEntry), {
+        type: KEYWORD_TYPE
+      }));
+    }
+    const newRecentSearchNamesArr = preparedItemsArray.filter(el => el.id !== KEYWORD_ID).map(el => el.name || el.id);
+    keywordEntry && newRecentSearchNamesArr.push(`\%${keywordEntry.name}\%`);
+    const newRecentSearchName = newRecentSearchNamesArr.join(", ");
+    const newRecentSearch = {
+      name: newRecentSearchName,
+      type: isTyped ? preparedItemsArray[0].type : NO_TYPED_SEARCH_ITEM,
+      description: Array.from(new Set(entries.filter(el => el.type && el.type !== NO_TYPED_SEARCH_ITEM && el.type !== KEYWORD_TYPE).map(el => searchTypesMap.get(el.type) || ""))).join(", "),
+      itemsArray: [...preparedItemsArray]
+    };
+    onSaveRecentSearch(Object.assign({}, newRecentSearch));
+  }, [onSaveRecentSearch, searchSelection, searchTypesMap]);
+  useEffect(() => {
+    var _a, _b;
+    if (isOpen) {
+      (_a = searchPopupTriggerRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+    } else {
+      prevIsOpenRef.current && ((_b = searchTriggerRef.current) === null || _b === void 0 ? void 0 : _b.focus());
+    }
+  }, [isOpen, searchPopupTriggerRef, searchTriggerRef]);
+  useEffect(() => {
+    if (!isOpen && prevIsOpenRef.current) {
+      prevIsOpenRef.current = false;
+      isRecentSearchesMode && handleSaveRecentSearch();
+    }
+    if (isOpen) {
+      prevIsOpenRef.current = true;
+    }
+  }, [isOpen, isRecentSearchesMode, handleSaveRecentSearch]);
+  const selectState = useMemo(() => Object.keys(searchType), [searchType]);
+  const onClearSearchSelection = useCallback(() => {
+    setSearchSelection && setSearchSelection([]);
+  }, [setSearchSelection]);
+  const onSearchItemClick = useCallback(item => {
+    if (!(searchSelection && setSearchSelection)) {
+      return;
+    }
+    const typeKey = item.type || NO_TYPED_SEARCH_ITEM;
+    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("");
+      setSearchSelection(newValue);
+    } else {
+      setSearchSelection([...searchSelection, Object.assign(Object.assign({}, item), {
+        type: item.type || searchOnlyOneType || NO_TYPED_SEARCH_ITEM
+      })]);
+    }
+  }, [searchOnlyOneType, searchSelection, setKeyword, setSearchSelection]);
+  const handleTriggerClick = useCallback(() => {
+    if (!document.startViewTransition) {
+      setIsOpen(prevState => !prevState);
+      return;
+    }
+    document.startViewTransition(() => {
+      flushSync(() => {
+        setIsOpen(prevState => !prevState);
+      });
+    });
+  }, []);
+  const handleViewState = useCallback(() => {
+    onToggleView && onToggleView(!isSidePanelOpen);
+    setIsSidePanelOpen(val => !val);
+  }, [isSidePanelOpen, onToggleView]);
+  const handleOpenChange = useCallback(open => {
+    if (!document.startViewTransition) {
+      setIsOpen(open);
+      return;
+    }
+    document.startViewTransition(() => {
+      flushSync(() => {
+        setIsOpen(open);
+      });
+    });
+  }, []);
+  const handleSidePanelApply = useCallback(state => {
+    filters.forEach(filter => {
+      const filterProps = filter.props;
+      const newState = state[filterProps.id];
+      if (filterProps.id && state.hasOwnProperty(filterProps.id) && filterProps.onChange) {
+        filterProps.onChange(newState);
+      }
+    });
+  }, [filters]);
+  const handleSaveFilters = useCallback((filterName, filterState) => {
+    const stateForSave = filterState || createStateObject(filters, "state");
+    onSaveFilter && onSaveFilter({
+      name: filterName,
+      state: stateForSave
+    }).then(id => {
+      setSavedFiltersStates(prevStates => new Map(prevStates).set(filterName, {
+        state: stateForSave,
+        id: id
+      }));
+    }).catch(error => {
+      console.error("Could not save the following filter configuration:", "name", filterName, "state", stateForSave, "Error:", error);
+    });
+  }, [filters, onSaveFilter]);
+  const handleRecentSearchItemClick = useCallback(item => {
+    const newSearchSelection = item.itemsArray;
+    const newItemSearch = item.itemsArray.find(el => el.id === KEYWORD_ID);
+    // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+    if (newSearchSelection) {
+      setSearchSelection === null || setSearchSelection === void 0 ? void 0 : setSearchSelection([...newSearchSelection]);
+    }
+    newItemSearch && setKeyword(newItemSearch.name);
+    handleOpenChange(false);
+  }, [handleOpenChange, setKeyword, setSearchSelection]);
+  const handlePinChange = useCallback(() => {
+    onPinChange && onPinChange(!isPinned);
+  }, [onPinChange, isPinned]);
+  const handleSearchKeyDown = useCallback(event => {
+    var _a, _b;
+    if (event.code === "Enter") {
+      isRecentSearchesMode && handleSaveRecentSearch(event.currentTarget.value);
+      !isOpen && handleTriggerClick();
+    }
+    if (event.code === "ArrowDown" && !isOpen) {
+      handleTriggerClick();
+    }
+    if (event.code === "ArrowDown" && isOpen) {
+      const firstItem = (_a = searchListRef.current) === null || _a === void 0 ? void 0 : _a.querySelector(FOCUSABLE_SELECTOR);
+      firstItem === null || firstItem === void 0 ? void 0 : firstItem.focus();
+    }
+    if (event.code === "ArrowLeft" && isOpen && event.currentTarget.value === "") {
+      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]);
+  const getIconByType = useCallback(type => {
+    if (!type) {
+      return IconFilter;
+    }
+    const foundType = searchTypesArray.find(item => item.id === type);
+    return foundType && foundType.icon ? foundType.icon : IconFilter;
+  }, [searchTypesArray]);
+  const combinedData = useCombineData(searchTypesArray);
+  const memoizedSelect = useMemo(() => _jsx(FiltersSelect, {
+    value: searchType,
+    selectListRef: selectListRef,
+    onChange: setSearchType,
+    items: searchTypesToSelect
+  }), [searchType, searchTypesToSelect, setSearchType]);
+  const handleSearchKeywordChange = useCallback(newKeyword => {
+    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`,
+    ref: searchPopupTriggerRef,
+    name: translate("Search page"),
+    value: keyword,
+    onChange: setKeyword,
+    onSearchKeyDown: handleSearchKeyDown,
+    handleRemove: onSearchItemClick,
+    searchSelection: searchSelection,
+    className: "zen-filters-popup__search-with-pills"
+  }), [uniqueKey, translate, keyword, setKeyword, handleSearchKeyDown, onSearchItemClick, searchSelection]);
+  const memoizedSearchList = useMemo(() => !isOpen ? null : _jsx(FiltersSearchList, {
+    searchValue: keyword,
+    searchListRef: searchListRef,
+    searchData: combinedData,
+    searchSelection: searchSelection,
+    onlyOneType: searchOnlyOneType,
+    getIconByType: getIconByType,
+    handleSearchItemClick: onSearchItemClick,
+    handleClearSearchSelection: 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]);
+  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,
+    icon: IconChevronTopSmall,
+    iconPosition: "end",
+    children: translate("Search by")
+  }), [handleTriggerClick, translate]);
+  // added onMouseDown to prevent focus
+  const selectTrigger = useMemo(() => {
+    var _a;
+    return isMobile ? null : _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,
+      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
+    });
+  }, [translate, handleTriggerClick, selectState, allOption.name, searchTypesArray, isMobile]);
+  const memoizedPopup = useMemo(() => _jsx(ControlledPopup, {
+    paddingY: -34,
+    isOpen: isOpen,
+    className: classNames(["zen-filters-popup"]),
+    onOpenChange: handleOpenChange,
+    useTrapFocusWithTrigger: "on",
+    alignment: "bottom",
+    shouldHoldScroll: true,
+    triggerRef: triggerRef,
+    ariaLabel: translate("Setting conditions"),
+    recalculateOnScroll: true,
+    children: _jsxs("div", {
+      className: "zen-filters-popup__content",
+      children: [_jsxs("div", {
+        className: "zen-filters-popup__left-panel",
+        children: [selectTriggerPopup, memoizedSelect]
+      }), _jsxs("div", {
+        className: "zen-filters-popup__right-panel",
+        children: [memoizedSearchPopup, memoizedSearchList]
+      })]
+    })
+  }), [isOpen, handleOpenChange, translate, selectTriggerPopup, memoizedSelect, memoizedSearchPopup, memoizedSearchList]);
+  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);
+  }), [filters, selectState]);
+  // The sidePanel has a full set of filters, so we need to calculate the number of changed filters based on all filters, not just the visible ones
+  const filtersForCalculation = useMemo(() => {
+    const stateObj = createStateObject(filters, "state");
+    return filters.filter(el => {
+      const elProps = el.props;
+      return typeof elProps.visible === "boolean" ? elProps.visible : elProps.visible === undefined ? true : elProps.visible(Array.from(selectState), stateObj) || elProps.visible(Array.from(selectState));
+    });
+  }, [filters, selectState]);
+  const hasSavedFilters = savedFiltersStates.size > 0;
+  const hasFilters = filtersForCalculation.length > 0;
+  const memoizedFiltersContainer = useMemo(() => hasFilters ? _jsx(FiltersContainer, {
+    filtersChipRef: sidePanelTriggerRef,
+    filtersClickHandler: handleViewState,
+    filtersForCalculation: filtersForCalculation,
+    isPinned: isPinMode ? isPinned : undefined,
+    onPinChange: isPinMode ? onPinChange : undefined,
+    hasSavedFilters: hasSavedFilters,
+    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]);
+  const memoizedStatus = useMemo(() => isPinned && isPinMode ? "accent" : undefined, [isPinned, isPinMode]);
+  const memoizedSavedFiltersItems = useMemo(() => new Set(savedFiltersStates.keys()), [savedFiltersStates]);
+  const memoizedSavedFiltersActive = useMemo(() => {
+    const activeSet = new Set();
+    const currentState = createStateObject(filters, "state");
+    Array.from(savedFiltersStates.keys()).forEach(key => {
+      var _a;
+      const savedState = (_a = savedFiltersStates.get(key)) === null || _a === void 0 ? void 0 : _a.state;
+      if (savedState) {
+        if (isElementsEqual(currentState, savedState)) {
+          activeSet.add(key);
         }
-        const error = savedFilters.error;
-        if (error) {
-            console.error("Failed to fetch saved filters. Error:", error);
+      }
+    });
+    return activeSet;
+  }, [savedFiltersStates, filters]);
+  const removeSavedFiltersState = useCallback(item => {
+    var _a;
+    setSavedFiltersStates(prev => {
+      const newState = new Map(prev);
+      newState.delete(item);
+      return newState;
+    });
+    const filterId = (_a = savedFiltersStates.get(item)) === null || _a === void 0 ? void 0 : _a.id;
+    if (filterId) {
+      onRemoveSavedFilter && onRemoveSavedFilter(filterId);
+    }
+  }, [onRemoveSavedFilter, savedFiltersStates]);
+  const applySavedFiltersState = useCallback(item => {
+    var _a;
+    const newState = (_a = savedFiltersStates.get(item)) === null || _a === void 0 ? void 0 : _a.state;
+    if (newState) {
+      filters.forEach(filter => {
+        const filterProps = filter.props;
+        const stateForFilter = newState[filterProps.id];
+        if (filterProps.id && newState.hasOwnProperty(filterProps.id) && filterProps.onChange) {
+          filterProps.onChange(stateForFilter);
         }
-        else if (savedFilters && savedFilters.data) {
-            setSavedFiltersStates(new Map(savedFilters.data.map(item => [item.name, { id: item.id, state: item.state }])));
-        }
-    }, [isSavedFiltersMode, savedFilters]);
-    const handleSaveRecentSearch = useCallback((searchValue) => {
-        if (!onSaveRecentSearch) {
-            return;
-        }
-        if (!(searchSelection === null || searchSelection === void 0 ? void 0 : searchSelection.length) && !searchValue) {
-            return;
-        }
-        const entries = searchSelection || [];
-        const keywordEntry = searchValue ? { id: KEYWORD_ID, name: searchValue, type: KEYWORD_TYPE } : entries.find((item) => item.id === KEYWORD_ID);
-        const preparedItemsArray = [...entries].filter(el => el.id !== KEYWORD_ID).map(el => (Object.assign(Object.assign({}, el), { type: el.type || NO_TYPED_SEARCH_ITEM })));
-        const isTyped = preparedItemsArray.length ? preparedItemsArray.every(el => el.type === preparedItemsArray[0].type) : false;
-        if (keywordEntry) {
-            preparedItemsArray.push(Object.assign(Object.assign({}, keywordEntry), { type: KEYWORD_TYPE }));
-        }
-        const newRecentSearchNamesArr = preparedItemsArray.filter(el => el.id !== KEYWORD_ID).map(el => el.name || el.id);
-        keywordEntry && newRecentSearchNamesArr.push(`\%${keywordEntry.name}\%`);
-        const newRecentSearchName = newRecentSearchNamesArr.join(", ");
-        const newRecentSearch = { name: newRecentSearchName, type: isTyped ? preparedItemsArray[0].type : NO_TYPED_SEARCH_ITEM,
-            description: Array.from(new Set(entries.filter(el => el.type && el.type !== NO_TYPED_SEARCH_ITEM && el.type !== KEYWORD_TYPE)
-                .map(el => searchTypesMap.get(el.type) || ""))).join(", "),
-            itemsArray: [...preparedItemsArray] };
-        onSaveRecentSearch(Object.assign({}, newRecentSearch));
-    }, [onSaveRecentSearch, searchSelection, searchTypesMap]);
-    useEffect(() => {
-        var _a, _b;
-        if (isOpen) {
-            (_a = searchPopupTriggerRef.current) === null || _a === void 0 ? void 0 : _a.focus();
-        }
-        else {
-            prevIsOpenRef.current && ((_b = searchTriggerRef.current) === null || _b === void 0 ? void 0 : _b.focus());
-        }
-    }, [isOpen, searchPopupTriggerRef, searchTriggerRef]);
-    useEffect(() => {
-        if (!isOpen && prevIsOpenRef.current) {
-            prevIsOpenRef.current = false;
-            isRecentSearchesMode && handleSaveRecentSearch();
-        }
-        if (isOpen) {
-            prevIsOpenRef.current = true;
-        }
-    }, [isOpen, isRecentSearchesMode, handleSaveRecentSearch]);
-    const selectState = useMemo(() => Object.keys(searchType), [searchType]);
-    const onClearSearchSelection = useCallback(() => {
-        setSearchSelection && setSearchSelection([]);
-    }, [setSearchSelection]);
-    const onSearchItemClick = useCallback((item) => {
-        if (!(searchSelection && setSearchSelection)) {
-            return;
-        }
-        const typeKey = item.type || NO_TYPED_SEARCH_ITEM;
-        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("");
-            setSearchSelection(newValue);
-        }
-        else {
-            setSearchSelection([...searchSelection, Object.assign(Object.assign({}, item), { type: item.type || searchOnlyOneType || NO_TYPED_SEARCH_ITEM })]);
-        }
-    }, [searchOnlyOneType, searchSelection, setKeyword, setSearchSelection]);
-    const handleTriggerClick = useCallback(() => {
-        if (!document.startViewTransition) {
-            setIsOpen(prevState => !prevState);
-            return;
-        }
-        document.startViewTransition(() => {
-            flushSync(() => {
-                setIsOpen(prevState => !prevState);
-            });
-        });
-    }, []);
-    const handleViewState = useCallback(() => {
-        onToggleView && onToggleView(!isSidePanelOpen);
-        setIsSidePanelOpen(val => !val);
-    }, [isSidePanelOpen, onToggleView]);
-    const handleOpenChange = useCallback((open) => {
-        if (!document.startViewTransition) {
-            setIsOpen(open);
-            return;
-        }
-        document.startViewTransition(() => {
-            flushSync(() => {
-                setIsOpen(open);
-            });
-        });
-    }, []);
-    const handleSidePanelApply = useCallback((state) => {
-        filters.forEach((filter) => {
-            const filterProps = filter.props;
-            const newState = state[filterProps.id];
-            if (filterProps.id && state.hasOwnProperty(filterProps.id) && filterProps.onChange) {
-                filterProps.onChange(newState);
-            }
-        });
-    }, [filters]);
-    const handleSaveFilters = useCallback((filterName, filterState) => {
-        const stateForSave = filterState || createStateObject(filters, "state");
-        onSaveFilter && onSaveFilter({ name: filterName, state: stateForSave }).then((id) => {
-            setSavedFiltersStates(prevStates => new Map(prevStates).set(filterName, { state: stateForSave, id: id }));
-        }).catch(error => {
-            console.error("Could not save the following filter configuration:", "name", filterName, "state", stateForSave, "Error:", error);
-        });
-    }, [filters, onSaveFilter]);
-    const handleRecentSearchItemClick = useCallback((item) => {
-        const newSearchSelection = item.itemsArray;
-        const newItemSearch = item.itemsArray.find(el => el.id === KEYWORD_ID);
-        // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
-        if (newSearchSelection) {
-            setSearchSelection === null || setSearchSelection === void 0 ? void 0 : setSearchSelection([...newSearchSelection]);
-        }
-        newItemSearch && setKeyword(newItemSearch.name);
-        handleOpenChange(false);
-    }, [handleOpenChange, setKeyword, setSearchSelection]);
-    const handlePinChange = useCallback(() => {
-        onPinChange && onPinChange(!isPinned);
-    }, [onPinChange, isPinned]);
-    const handleSearchKeyDown = useCallback((event) => {
-        var _a, _b;
-        if (event.code === "Enter") {
-            isRecentSearchesMode && handleSaveRecentSearch(event.currentTarget.value);
-            !isOpen && handleTriggerClick();
-        }
-        if (event.code === "ArrowDown" && !isOpen) {
-            handleTriggerClick();
-        }
-        if (event.code === "ArrowDown" && isOpen) {
-            const firstItem = (_a = searchListRef.current) === null || _a === void 0 ? void 0 : _a.querySelector(FOCUSABLE_SELECTOR);
-            firstItem === null || firstItem === void 0 ? void 0 : firstItem.focus();
-        }
-        if (event.code === "ArrowLeft" && isOpen && event.currentTarget.value === "") {
-            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]);
-    const getIconByType = useCallback((type) => {
-        if (!type) {
-            return IconFilter;
-        }
-        const foundType = searchTypesArray.find((item) => item.id === type);
-        return foundType && foundType.icon ? foundType.icon : IconFilter;
-    }, [searchTypesArray]);
-    const combinedData = useCombineData(searchTypesArray);
-    const memoizedSelect = useMemo(() => _jsx(FiltersSelect, { value: searchType, selectListRef: selectListRef, onChange: setSearchType, items: searchTypesToSelect }), [searchType, searchTypesToSelect, setSearchType]);
-    const handleSearchKeywordChange = useCallback((newKeyword) => {
-        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`, ref: searchPopupTriggerRef, name: translate("Search page"), value: keyword, onChange: setKeyword, onSearchKeyDown: handleSearchKeyDown, handleRemove: onSearchItemClick, searchSelection: searchSelection, className: "zen-filters-popup__search-with-pills" }), [uniqueKey, translate, keyword, setKeyword, handleSearchKeyDown, onSearchItemClick, searchSelection]);
-    const memoizedSearchList = useMemo(() => !isOpen ? null :
-        _jsx(FiltersSearchList, { searchValue: keyword, searchListRef: searchListRef, searchData: combinedData, searchSelection: searchSelection, onlyOneType: searchOnlyOneType, getIconByType: getIconByType, handleSearchItemClick: onSearchItemClick, handleClearSearchSelection: 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]);
-    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, icon: IconChevronTopSmall, iconPosition: "end", children: translate("Search by") }), [handleTriggerClick, translate]);
-    // added onMouseDown to prevent focus
-    const selectTrigger = useMemo(() => {
-        var _a;
-        return isMobile ? null : _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, 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 });
-    }, [translate, handleTriggerClick, selectState, allOption.name, searchTypesArray, isMobile]);
-    const memoizedPopup = useMemo(() => _jsx(ControlledPopup, { paddingY: -34, isOpen: isOpen, className: classNames(["zen-filters-popup"]), onOpenChange: handleOpenChange, useTrapFocusWithTrigger: "on", alignment: "bottom", shouldHoldScroll: true, triggerRef: triggerRef, ariaLabel: translate("Setting conditions"), recalculateOnScroll: true, children: _jsxs("div", { className: "zen-filters-popup__content", children: [_jsxs("div", { className: "zen-filters-popup__left-panel", children: [selectTriggerPopup, memoizedSelect] }), _jsxs("div", { className: "zen-filters-popup__right-panel", children: [memoizedSearchPopup, memoizedSearchList] })] }) }), [isOpen, handleOpenChange, translate, selectTriggerPopup, memoizedSelect, memoizedSearchPopup, memoizedSearchList]);
-    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);
-    }), [filters, selectState]);
-    // The sidePanel has a full set of filters, so we need to calculate the number of changed filters based on all filters, not just the visible ones
-    const filtersForCalculation = useMemo(() => {
-        const stateObj = createStateObject(filters, "state");
-        return filters.filter(el => {
-            const elProps = el.props;
-            return typeof elProps.visible === "boolean" ? elProps.visible
-                : elProps.visible === undefined ? true : (elProps.visible(Array.from(selectState), stateObj) || elProps.visible(Array.from(selectState)));
-        });
-    }, [filters, selectState]);
-    const hasSavedFilters = savedFiltersStates.size > 0;
-    const hasFilters = filtersForCalculation.length > 0;
-    const memoizedFiltersContainer = useMemo(() => hasFilters ? _jsx(FiltersContainer, { filtersChipRef: sidePanelTriggerRef, filtersClickHandler: handleViewState, filtersForCalculation: filtersForCalculation, isPinned: isPinMode ? isPinned : undefined, onPinChange: isPinMode ? onPinChange : undefined, hasSavedFilters: hasSavedFilters, 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]);
-    const memoizedStatus = useMemo(() => isPinned && isPinMode ? "accent" : undefined, [isPinned, isPinMode]);
-    const memoizedSavedFiltersItems = useMemo(() => new Set(savedFiltersStates.keys()), [savedFiltersStates]);
-    const memoizedSavedFiltersActive = useMemo(() => {
-        const activeSet = new Set();
-        const currentState = createStateObject(filters, "state");
-        Array.from(savedFiltersStates.keys()).forEach(key => {
-            var _a;
-            const savedState = (_a = savedFiltersStates.get(key)) === null || _a === void 0 ? void 0 : _a.state;
-            if (savedState) {
-                if (isElementsEqual(currentState, savedState)) {
-                    activeSet.add(key);
-                }
-            }
-        });
-        return activeSet;
-    }, [savedFiltersStates, filters]);
-    const removeSavedFiltersState = useCallback((item) => {
-        var _a;
-        setSavedFiltersStates((prev) => {
-            const newState = new Map(prev);
-            newState.delete(item);
-            return newState;
-        });
-        const filterId = (_a = savedFiltersStates.get(item)) === null || _a === void 0 ? void 0 : _a.id;
-        if (filterId) {
-            onRemoveSavedFilter && onRemoveSavedFilter(filterId);
-        }
-    }, [onRemoveSavedFilter, savedFiltersStates]);
-    const applySavedFiltersState = useCallback((item) => {
-        var _a;
-        const newState = (_a = savedFiltersStates.get(item)) === null || _a === void 0 ? void 0 : _a.state;
-        if (newState) {
-            filters.forEach((filter) => {
-                const filterProps = filter.props;
-                const stateForFilter = newState[filterProps.id];
-                if (filterProps.id && newState.hasOwnProperty(filterProps.id) && filterProps.onChange) {
-                    filterProps.onChange(stateForFilter);
-                }
-            });
-        }
-    }, [filters, savedFiltersStates]);
-    return _jsxs("div", { className: classNames(["zen-filters", className || ""]), children: [_jsxs("div", { className: classNames(["zen-filters__main-row", isOpen ? "" : "zen-filters__main-row--initial"]), ref: triggerRef, role: "combobox", "aria-label": translate("Open setting conditions popup"), children: [selectTrigger, memoizedSearch] }), _jsx(FiltersSavedItemsProvider, { items: memoizedSavedFiltersItems, active: memoizedSavedFiltersActive, onRemove: isSavedFiltersMode ? removeSavedFiltersState : undefined, onApply: isSavedFiltersMode ? applySavedFiltersState : undefined, onSave: isSavedFiltersMode ? handleSaveFilters : undefined, children: _jsx(ChipStatusProvider, { status: memoizedStatus, children: memoizedFiltersContainer }) }), memoizedPopup, _jsx(FiltersSavedItemsProvider, { items: memoizedSavedFiltersItems, active: memoizedSavedFiltersActive, onRemove: isSavedFiltersMode ? removeSavedFiltersState : undefined, onApply: isSavedFiltersMode ? applySavedFiltersState : undefined, onSave: isSavedFiltersMode ? handleSaveFilters : undefined, children: _jsx(ChipStatusProvider, { status: memoizedStatus, children: memoizedSidePanel }) })] });
+      });
+    }
+  }, [filters, savedFiltersStates]);
+  return _jsxs("div", {
+    className: classNames(["zen-filters", className || ""]),
+    children: [_jsxs("div", {
+      className: classNames(["zen-filters__main-row", isOpen ? "" : "zen-filters__main-row--initial"]),
+      ref: triggerRef,
+      role: "combobox",
+      "aria-label": translate("Open setting conditions popup"),
+      children: [selectTrigger, memoizedSearch]
+    }), _jsx(FiltersSavedItemsProvider, {
+      items: memoizedSavedFiltersItems,
+      active: memoizedSavedFiltersActive,
+      onRemove: isSavedFiltersMode ? removeSavedFiltersState : undefined,
+      onApply: isSavedFiltersMode ? applySavedFiltersState : undefined,
+      onSave: isSavedFiltersMode ? handleSaveFilters : undefined,
+      children: _jsx(ChipStatusProvider, {
+        status: memoizedStatus,
+        children: memoizedFiltersContainer
+      })
+    }), memoizedPopup, _jsx(FiltersSavedItemsProvider, {
+      items: memoizedSavedFiltersItems,
+      active: memoizedSavedFiltersActive,
+      onRemove: isSavedFiltersMode ? removeSavedFiltersState : undefined,
+      onApply: isSavedFiltersMode ? applySavedFiltersState : undefined,
+      onSave: isSavedFiltersMode ? handleSaveFilters : undefined,
+      children: _jsx(ChipStatusProvider, {
+        status: memoizedStatus,
+        children: memoizedSidePanel
+      })
+    })]
+  });
 };
 Filters.Chip = FiltersChip;
 Filters.DateRange = FiltersDateRange;
@@ -308,4 +478,4 @@ Filters.Dropdown = FiltersDropdown;
 Filters.Groups = FiltersGroups;
 Filters.Range = FiltersRange;
 // Filters.Custom = FiltersCustom;
-Filters.displayName = FiltersDisplayName;
+Filters.displayName = FiltersDisplayName;