@geotab/zenith 1.26.4 → 1.26.5-beta.0

package/dist/filters/components/filtersSearchList.js

@@ -0,0 +1,75 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FiltersSearchList = exports.KEYWORD_TYPE = exports.KEYWORD_ID = exports.NO_TYPED_SEARCH_ITEM = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const list_1 = require("../../list/list");
+const useLanguage_1 = require("../../utils/localization/useLanguage");
+const button_1 = require("../../button/button");
+const textIconButton_1 = require("../../textIconButton/textIconButton");
+const iconChevronLeft_1 = require("../../icons/iconChevronLeft");
+const textIconButton_2 = require("../../textIconButton/textIconButton");
+const filtersSearchItemData_1 = require("./filtersSearchItemData");
+const useMobile_1 = require("../../commonHelpers/hooks/useMobile");
+const useDrive_1 = require("../../utils/theme/useDrive");
+const classNames_1 = require("../../commonHelpers/classNames/classNames");
+const filtersHelper_1 = require("../filtersHelper");
+exports.NO_TYPED_SEARCH_ITEM = "noTypedSearchItem";
+exports.KEYWORD_ID = "keywordId";
+exports.KEYWORD_TYPE = "keyword";
+const FiltersSearchList = ({ searchValue, searchData, recentSearches, searchSelection, handleSearchItemClick, onRemoveRecentSearchItem, handleRecentSearchItemClick, getIconByType }) => {
+    const { translate } = (0, useLanguage_1.useLanguage)();
+    const isSearchMode = Boolean(handleSearchItemClick && searchSelection);
+    const isMobile = (0, useMobile_1.useMobile)();
+    const isDrive = (0, useDrive_1.useDrive)();
+    const [removedItems, setRemovedItems] = (0, react_1.useState)([]);
+    const [historyMode, setHistoryMode] = (0, react_1.useState)(false);
+    const waitingItemsLimit = 5;
+    const isRecentSearchesMode = Boolean(recentSearches && handleRecentSearchItemClick && onRemoveRecentSearchItem);
+    // Handle React Query errors
+    (0, react_1.useEffect)(() => {
+        if (isSearchMode && (searchData === null || searchData === void 0 ? void 0 : searchData.error)) {
+            console.error("Failed to fetch search results. Error:", searchData.error);
+        }
+    }, [isSearchMode, searchData === null || searchData === void 0 ? void 0 : searchData.error]);
+    // Reset history mode when search value changes
+    (0, react_1.useEffect)(() => {
+        if (historyMode && searchValue) {
+            setHistoryMode(false);
+        }
+    }, [historyMode, searchValue]);
+    const searchItems = (0, react_1.useMemo)(() => isSearchMode ? (searchData === null || searchData === void 0 ? void 0 : searchData.data) || [] : [], [isSearchMode, searchData === null || searchData === void 0 ? void 0 : searchData.data]);
+    const recentItems = (0, react_1.useMemo)(() => isRecentSearchesMode ? (recentSearches === null || recentSearches === void 0 ? void 0 : recentSearches.data) || [] : [], [isRecentSearchesMode, recentSearches === null || recentSearches === void 0 ? void 0 : recentSearches.data]);
+    const isLoading = searchValue && isSearchMode && (searchData === null || searchData === void 0 ? void 0 : searchData.isLoading) || (isRecentSearchesMode ? recentSearches === null || recentSearches === void 0 ? void 0 : recentSearches.isLoading : false) || false;
+    const changeMode = (0, react_1.useCallback)(() => {
+        setHistoryMode(prev => !prev);
+        setRemovedItems([]);
+        // Note: In React Query implementation, the parent component should handle
+        // refetching data when switching between modes
+    }, []);
+    const handleRemove = (0, react_1.useCallback)((itemId) => () => {
+        setRemovedItems(prev => [...prev, itemId]);
+        onRemoveRecentSearchItem && onRemoveRecentSearchItem([itemId]);
+    }, [onRemoveRecentSearchItem]);
+    const handleRemoveAll = (0, react_1.useCallback)(() => {
+        setRemovedItems(recentItems.map(item => item.id));
+        onRemoveRecentSearchItem && onRemoveRecentSearchItem(recentItems.map(item => item.id));
+        changeMode();
+    }, [onRemoveRecentSearchItem, recentItems, changeMode]);
+    const memoizedSearchItemClick = (0, react_1.useCallback)((itemId, itemType) => () => {
+        const currentSearchItem = searchItems.find(item => item.id === itemId && item.type === itemType);
+        currentSearchItem && handleSearchItemClick && handleSearchItemClick(currentSearchItem);
+    }, [handleSearchItemClick, searchItems]);
+    const memoizedRecentSearchItemClick = (0, react_1.useCallback)((itemId, itemType) => () => {
+        const currentSearchItem = recentItems.find(item => item.id === itemId && item.type === itemType);
+        currentSearchItem && handleRecentSearchItemClick && handleRecentSearchItemClick(currentSearchItem);
+    }, [handleRecentSearchItemClick, recentItems]);
+    const memoizedRecentDataArr = (0, react_1.useMemo)(() => recentItems.filter(item => !removedItems.includes(item.id)).reverse(), [recentItems, removedItems]);
+    const memoizedRecentData = (0, react_1.useMemo)(() => (historyMode ? memoizedRecentDataArr : (searchValue && isSearchMode ? [] : memoizedRecentDataArr.slice(0, waitingItemsLimit))).map(item => ((0, jsx_runtime_1.jsx)(filtersSearchItemData_1.FiltersSearchItemData, { id: item.id, name: item.name, isActive: false, secondary: item.description, onClose: handleRemove(item.id), onClick: memoizedRecentSearchItemClick(item.id, item.type || exports.NO_TYPED_SEARCH_ITEM), icon: getIconByType(item.type), isMobile: isMobile, isDrive: isDrive }, `recent-${item.id}`))), [historyMode, memoizedRecentDataArr, searchValue, isSearchMode, handleRemove, memoizedRecentSearchItemClick, getIconByType, isMobile, isDrive]);
+    const memoizedSearchData = (0, react_1.useMemo)(() => historyMode || !searchValue && isRecentSearchesMode ? [] : searchItems.slice(0, filtersHelper_1.MAX_TOTAL_RESULTS).map(item => ((0, jsx_runtime_1.jsx)(filtersSearchItemData_1.FiltersSearchItemData, { id: item.id, name: item.name, isActive: isSearchMode ? searchSelection.filter(el => el.id === item.id).some(el => el.type === (item.type || exports.NO_TYPED_SEARCH_ITEM)) || false : false, secondary: item.description, onClose: undefined, onClick: isSearchMode ? memoizedSearchItemClick(item.id, item.type || exports.NO_TYPED_SEARCH_ITEM) : undefined, icon: getIconByType(item.type), isMobile: isMobile, isDrive: isDrive }, `search-${item.id}-${item.type || exports.NO_TYPED_SEARCH_ITEM}`))), [historyMode, searchValue, isRecentSearchesMode, searchItems, isSearchMode, searchSelection, memoizedSearchItemClick, getIconByType, isMobile, isDrive]);
+    const resultsToShow = (0, react_1.useMemo)(() => isRecentSearchesMode ? [...memoizedRecentData, ...memoizedSearchData]
+        : memoizedSearchData, [isRecentSearchesMode, memoizedRecentData, memoizedSearchData]);
+    return (0, jsx_runtime_1.jsxs)("div", { className: "zen-filters-search-list", children: [searchValue ? null : (0, jsx_runtime_1.jsxs)("div", { className: (0, classNames_1.classNames)(["zen-filters-search-list__header", isDrive ? (isMobile ? "zen-filters-search-list__header--drive" : "zen-filters-search-list__header--drive-tablet") : ""]), children: [historyMode ? (0, jsx_runtime_1.jsx)(textIconButton_1.TextIconButton, { className: "zen-filters-search-list__header-back-button", title: translate("Back"), type: "tertiary", onClick: changeMode, icon: iconChevronLeft_1.IconChevronLeft, iconPosition: textIconButton_2.ButtonIconPosition.Start })
+                        : null, isRecentSearchesMode ? (0, jsx_runtime_1.jsx)("div", { className: "zen-filters-search-list__header-title", children: translate("Recent searches") }) : null, historyMode || !isRecentSearchesMode ? null : (0, jsx_runtime_1.jsx)(button_1.Button, { type: "tertiary", onClick: changeMode, children: translate("View history") }), historyMode && isRecentSearchesMode ? (0, jsx_runtime_1.jsx)(button_1.Button, { type: "tertiary", onClick: handleRemoveAll, children: translate("Clear all") }) : null] }), (0, jsx_runtime_1.jsx)(list_1.List, { className: "zen-filters-search-list__data", isLoading: isLoading, type: "data", waitingItems: waitingItemsLimit, children: resultsToShow })] });
+};
+exports.FiltersSearchList = FiltersSearchList;

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

@@ -0,0 +1,30 @@
+/// <reference types="react" />
+import { IFiltersSearchTypesSubItem } from "../filters";
+import "./filtersSelect.less";
+export interface IFiltersSelectItems {
+    id: string;
+    name: string;
+    subItems?: IFiltersSearchTypesSubItem[];
+}
+interface IFiltersSelectProps {
+    items?: IFiltersSelectItems[];
+}
+export interface IFiltersSelect extends IFiltersSelectProps {
+    id?: string;
+    name?: string;
+    value: IFiltersSearchType;
+    onChange: (newValue: IFiltersSearchType) => void;
+    className?: string;
+}
+export declare const ALL_SELECT_OPTION_ID: string;
+export interface IFiltersSearchType {
+    [name: string]: string | undefined;
+}
+export declare const FiltersSelectDisplayName = "FiltersSelect";
+export declare const getFiltersSearchTypeAllOption: () => IFiltersSearchType;
+export declare const getAllOption: (translate: (key: string) => string) => {
+    id: string;
+    name: string;
+};
+export declare const FiltersSelect: React.FC<IFiltersSelect>;
+export {};

package/dist/filters/components/filtersSelect.js

@@ -0,0 +1,51 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FiltersSelect = exports.getAllOption = exports.getFiltersSearchTypeAllOption = exports.FiltersSelectDisplayName = exports.ALL_SELECT_OPTION_ID = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const classNames_1 = require("../../commonHelpers/classNames/classNames");
+const useLanguage_1 = require("../../utils/localization/useLanguage");
+const useUniqueId_1 = require("../../commonHelpers/useUniqueId");
+const filtersSelectListItem_1 = require("./filtersSelectListItem");
+exports.ALL_SELECT_OPTION_ID = "All";
+exports.FiltersSelectDisplayName = "FiltersSelect";
+const getFiltersSearchTypeAllOption = () => ({
+    [exports.ALL_SELECT_OPTION_ID]: undefined
+});
+exports.getFiltersSearchTypeAllOption = getFiltersSearchTypeAllOption;
+const getAllOption = (translate) => ({
+    id: exports.ALL_SELECT_OPTION_ID,
+    name: translate("All")
+});
+exports.getAllOption = getAllOption;
+const FiltersSelect = ({ value, name, onChange, id, items, className }) => {
+    const { translate } = (0, useLanguage_1.useLanguage)();
+    const [activeId, setActiveId] = (0, react_1.useState)("");
+    const filtersSelectListId = (0, useUniqueId_1.useUniqueId)();
+    const filteredItems = (0, react_1.useMemo)(() => (items === null || items === void 0 ? void 0 : items.filter(el => el.id !== exports.ALL_SELECT_OPTION_ID)) || [], [items]);
+    const preparedItems = (0, react_1.useMemo)(() => [
+        (0, exports.getAllOption)(translate),
+        ...filteredItems
+    ], [translate, filteredItems]);
+    const handleExpandableItemClick = (0, react_1.useCallback)((clickedId) => () => {
+        if (activeId === clickedId) {
+            setActiveId("");
+            return;
+        }
+        setActiveId(clickedId);
+        onChange({ [clickedId]: undefined });
+    }, [activeId, onChange]);
+    const handleItemClick = (0, react_1.useCallback)((clickedId, parentId) => () => {
+        if (parentId) {
+            onChange({ [parentId]: clickedId });
+            return;
+        }
+        setActiveId("");
+        onChange(Object.keys(value).includes(clickedId) ? (0, exports.getFiltersSearchTypeAllOption)() : { [clickedId]: undefined });
+    }, [onChange, value]);
+    const selectListComponent = (0, react_1.useMemo)(() => preparedItems.map(el => el.subItems ?
+        (0, jsx_runtime_1.jsx)(filtersSelectListItem_1.FiltersSelectListExpandableItem, { id: `${filtersSelectListId}-${el.id}`, name: el.name, isActive: el.id === activeId, className: (0, classNames_1.classNames)([value.hasOwnProperty(el.id) ? "zen-filters-select__list-item--active" : ""]), onClick: handleExpandableItemClick(el.id), content: el.id === activeId ? el.subItems.map(subEl => (0, jsx_runtime_1.jsx)(filtersSelectListItem_1.FiltersSelectListItem, { className: (0, classNames_1.classNames)(["zen-filters-select__sub-item"]), id: `${filtersSelectListId}-${el.id}-${subEl.id}`, name: subEl.name, isActive: value[el.id] === subEl.id, onClick: handleItemClick(subEl.id, el.id) }, `${el.id}-${subEl.id}`)) : (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}) }, el.id) : (0, jsx_runtime_1.jsx)(filtersSelectListItem_1.FiltersSelectListItem, { id: `${filtersSelectListId}-${el.id}`, name: el.name, isActive: Object.keys(value).includes(el.id), onClick: handleItemClick(el.id) }, el.id)), [activeId, filtersSelectListId, handleExpandableItemClick, handleItemClick, preparedItems, value]);
+    return (0, jsx_runtime_1.jsxs)("div", { className: "zen-filters-select", children: [id && name ? (0, jsx_runtime_1.jsx)("div", { className: "zen-filters-select__label", id: id, children: name }) : null, (0, jsx_runtime_1.jsx)("div", { className: (0, classNames_1.classNames)(["zen-filters-select__list", className || ""]), children: selectListComponent })] });
+};
+exports.FiltersSelect = FiltersSelect;
+exports.FiltersSelect.displayName = exports.FiltersSelectDisplayName;

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

@@ -0,0 +1,15 @@
+export declare const FiltersSelectListItem: ({ id, name, isActive, onClick, className }: {
+    id: any;
+    name: any;
+    isActive: any;
+    onClick: any;
+    className?: string | undefined;
+}) => import("react/jsx-runtime").JSX.Element;
+export declare const FiltersSelectListExpandableItem: ({ id, name, content, isActive, onClick, className }: {
+    id: any;
+    name: any;
+    content: any;
+    isActive: any;
+    onClick: any;
+    className?: string | undefined;
+}) => import("react/jsx-runtime").JSX.Element;

package/dist/filters/components/filtersSelectListItem.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FiltersSelectListExpandableItem = exports.FiltersSelectListItem = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const classNames_1 = require("../../commonHelpers/classNames/classNames");
+const useUniqueId_1 = require("../../commonHelpers/useUniqueId");
+const iconChevronBottom_1 = require("../../icons/iconChevronBottom");
+const FiltersSelectListItem = ({ id, name, isActive, onClick, className = "" }) => (0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)("button", { type: "button", className: (0, classNames_1.classNames)(["zen-filters-select__list-item", isActive ? "zen-filters-select__list-item--active" : "", className]), id: id, onClick: onClick, children: name }) });
+exports.FiltersSelectListItem = FiltersSelectListItem;
+const FiltersSelectListExpandableItem = ({ id, name, content, isActive, onClick, className = "" }) => {
+    const ariaControlsId = (0, useUniqueId_1.useUniqueId)();
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("button", { type: "button", "aria-expanded": isActive, "aria-controls": ariaControlsId, className: (0, classNames_1.classNames)(["zen-filters-select__list-item", isActive ? "zen-filters-select__list-item--active" : "", className]), id: id, onClick: onClick, children: [name, (0, jsx_runtime_1.jsx)(iconChevronBottom_1.IconChevronBottom, { size: "large", className: (0, classNames_1.classNames)(["zen-filters-select__item-icon", isActive ? "zen-filters-select__item-icon--rotated" : ""]) })] }), (0, jsx_runtime_1.jsx)("div", { id: ariaControlsId, "aria-labelledby": id, role: "region", className: (0, classNames_1.classNames)(["zen-filters-select__item-content", content ? "" : "zen-filters-select__item-content--hidden"]), children: content })] }));
+};
+exports.FiltersSelectListExpandableItem = FiltersSelectListExpandableItem;

package/dist/filters/filters.d.ts

@@ -0,0 +1,99 @@
+import "./filters.less";
+import { IZenComponentProps } from "./../commonHelpers/zenComponent";
+import React from "react";
+import { IFiltersSearchType } from "./components/filtersSelect";
+import { TFiltersComponentsItemState } from "./components/filtersItem";
+import { IFiltersDropdown, TFiltersDropdownAllStates } from "./components/filtersDropdown";
+import { IFiltersGroups } from "./components/filtersGroups";
+import { IFiltersRange } from "./components/filtersRange";
+import { IFiltersChip } from "./components/filtersChip";
+import { FiltersDateRange } from "./components/filtersDateRange";
+import { IRecentSearchItem, IRecentSearchItemWithoutId, ISearchItem } from "./components/filtersSearchList";
+import { IIcon } from "../icons/icon";
+export interface ISavedFilters {
+    id: string;
+    name: string;
+    state: Record<string, TFiltersComponentsItemState>;
+}
+export interface ISaveFilter {
+    name: string;
+    state: Record<string, TFiltersComponentsItemState>;
+}
+export interface IFetchState<T> {
+    data: T | undefined;
+    isLoading: boolean;
+    error: Error | null;
+}
+export interface IFiltersSearchTypesSubItem {
+    id: string;
+    name: string;
+}
+export interface IFiltersSearchTypesItem {
+    id: string;
+    name: string;
+    subItems?: IFiltersSearchTypesSubItem[];
+    icon?: React.FC<IIcon>;
+    data: IFetchState<ISearchItem[]>;
+    relevance?: number;
+}
+export interface IFiltersBase extends IZenComponentProps {
+    keyword: string;
+    setKeyword: (newKeyword: string) => void;
+    searchTypes?: IFiltersSearchTypesItem[] | IFiltersSearchTypesItem;
+    searchType: IFiltersSearchType;
+    setSearchType: (newType: IFiltersSearchType) => void;
+    onToggleView?: (isOpen: boolean) => void;
+}
+export interface IFiltersWithRecentSearches {
+    recentSearches: IFetchState<IRecentSearchItem[]>;
+    onSaveRecentSearch: (item: IRecentSearchItemWithoutId) => void;
+    onRemoveRecentSearchItem: (itemIds: string[]) => void;
+}
+export interface IFiltersWithSearchSelection {
+    searchSelection: ISearchItem[];
+    setSearchSelection: (items: ISearchItem[]) => void;
+}
+export interface IFiltersWithPin {
+    isPinned: boolean;
+    onPinChange: (isPinned: boolean) => void;
+}
+export interface IFiltersWithSavedFilters {
+    savedFilters: IFetchState<ISavedFilters[]>;
+    onRemoveSavedFilter: (filterId: string) => void;
+    onSaveFilter: (newFilter: ISaveFilter) => Promise<string>;
+}
+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> {
+}
+/** Base filters with only required functionality */
+export type IFiltersBasic = IFiltersBase;
+/** Filters with external modal state management */
+export type IFiltersWithModal = IFiltersBase & IFiltersWithExternalState;
+/** Filters with pin/unpin functionality */
+export type IFiltersWithPinning = IFiltersBase & IFiltersWithPin;
+/** Filters with recent searches history */
+export type IFiltersWithRecent = IFiltersBase & IFiltersWithRecentSearches;
+/** Filters with saved filters functionality */
+export type IFiltersWithSaved = IFiltersBase & IFiltersWithSavedFilters;
+/** Filters with search selection functionality */
+export type TFiltersWithSearchSelection = IFiltersBase & IFiltersWithSearchSelection;
+/** Complex combinations */
+/** Filters with both modal state and pinning */
+export type IFiltersWithModalAndPin = IFiltersBase & IFiltersWithExternalState & IFiltersWithPin;
+/** Filters with both recent searches and saved filters */
+export type IFiltersWithRecentAndSaved = IFiltersBase & IFiltersWithRecentSearches & IFiltersWithSavedFilters;
+/** Complete filters interface with all features enabled */
+export type IFiltersComplete = IFiltersBase & IFiltersWithRecentSearches & TFiltersWithSearchSelection & IFiltersWithPin & IFiltersWithSavedFilters & IFiltersWithExternalState;
+export declare const FiltersDisplayName = "Filters";
+interface IFiltersComponents {
+    Chip: React.FC<IFiltersChip>;
+    DateRange: typeof FiltersDateRange;
+    Dropdown: React.FC<IFiltersDropdown<TFiltersDropdownAllStates>>;
+    Groups: React.FC<IFiltersGroups>;
+    Range: React.FC<IFiltersRange>;
+}
+export declare const Filters: React.FC<IFilters> & IFiltersComponents;
+export {};

package/dist/filters/filters.js

@@ -0,0 +1,246 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Filters = exports.FiltersDisplayName = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+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");
+const textIconButton_1 = require("../textIconButton/textIconButton");
+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");
+const filtersChip_1 = require("./components/filtersChip");
+const filtersDateRange_1 = require("./components/filtersDateRange");
+const filtersModal_1 = require("./components/filtersModal");
+const filtersSearchList_1 = require("./components/filtersSearchList");
+const chipStatusProvider_1 = require("../chip/chipStatusProvider");
+const filtersSavedItemsProvider_1 = require("./components/filtersSavedItemsProvider");
+const filtersHelper_1 = require("./filtersHelper");
+const filtersSearch_1 = require("./components/filtersSearch");
+const useUniqueId_1 = require("../commonHelpers/useUniqueId");
+const isElementsEqual_1 = require("../utils/compareElementsUtils/isElementsEqual");
+const iconFilter_1 = require("../icons/iconFilter");
+exports.FiltersDisplayName = "Filters";
+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] = (0, react_1.useState)(false);
+    const isSavedFiltersMode = Boolean(savedFilters && onRemoveSavedFilter && onSaveFilter);
+    const isPinMode = Boolean(typeof isPinned === "boolean" && onPinChange);
+    const isRecentSearchesMode = Boolean(recentSearches && onRemoveRecentSearchItem && onSaveRecentSearch);
+    const uniqueKey = (0, useUniqueId_1.useUniqueId)();
+    const [isModalOpen, setIsModalOpen] = (0, react_1.useState)(false);
+    const triggerRef = 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 searchTypesArray = (0, react_1.useMemo)(() => (0, filtersHelper_1.getArrayOfElements)(searchTypes), [searchTypes]);
+    const searchTypesMap = (0, react_1.useMemo)(() => {
+        const map = new Map();
+        searchTypesArray.forEach(el => {
+            map.set(el.id, el.name);
+        });
+        return map;
+    }, [searchTypesArray]);
+    const searchTypesToSelect = (0, react_1.useMemo)(() => searchTypesArray.map(el => ({ id: el.id, 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]);
+    (0, react_1.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 = (0, react_1.useCallback)((searchValue) => {
+        if (!onSaveRecentSearch) {
+            return;
+        }
+        if (!(searchSelection === null || searchSelection === void 0 ? void 0 : searchSelection.length) && !searchValue) {
+            return;
+        }
+        const entries = searchSelection || [];
+        const keywordEntry = searchValue ? { id: filtersSearchList_1.KEYWORD_ID, name: searchValue, type: filtersSearchList_1.KEYWORD_TYPE } : entries.find((item) => item.id === filtersSearchList_1.KEYWORD_ID);
+        const preparedItemsArray = [...entries].filter(el => el.id !== filtersSearchList_1.KEYWORD_ID).map(el => (Object.assign(Object.assign({}, el), { type: el.type || filtersSearchList_1.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: filtersSearchList_1.KEYWORD_TYPE }));
+        }
+        const newRecentSearchNamesArr = preparedItemsArray.filter(el => el.id !== filtersSearchList_1.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 : filtersSearchList_1.NO_TYPED_SEARCH_ITEM,
+            description: Array.from(new Set(entries.filter(el => el.type && el.type !== filtersSearchList_1.NO_TYPED_SEARCH_ITEM && el.type !== filtersSearchList_1.KEYWORD_TYPE)
+                .map(el => searchTypesMap.get(el.type) || el))).join(", "),
+            itemsArray: [...preparedItemsArray] };
+        onSaveRecentSearch(Object.assign({}, newRecentSearch));
+    }, [onSaveRecentSearch, searchSelection, searchTypesMap]);
+    const handleSearchFocus = (0, react_1.useCallback)(() => {
+        if (!isOpen) {
+            setIsOpen(true);
+        }
+    }, [isOpen]);
+    (0, react_1.useEffect)(() => {
+        var _a;
+        isOpen && ((_a = searchTriggerRef.current) === null || _a === void 0 ? void 0 : _a.focus());
+    }, [isOpen, searchTriggerRef]);
+    (0, react_1.useEffect)(() => {
+        if (!isOpen && prevIsOpenRef.current) {
+            prevIsOpenRef.current = false;
+            isRecentSearchesMode && handleSaveRecentSearch();
+        }
+        if (isOpen) {
+            prevIsOpenRef.current = true;
+        }
+    }, [isOpen, isRecentSearchesMode, handleSaveRecentSearch]);
+    const selectState = (0, react_1.useMemo)(() => Object.keys(searchType), [searchType]);
+    const onSearchItemClick = (0, react_1.useCallback)((item) => {
+        if (!(searchSelection && setSearchSelection)) {
+            return;
+        }
+        const typeKey = item.type || filtersSearchList_1.NO_TYPED_SEARCH_ITEM;
+        const currentItem = searchSelection.find(el => el.id === item.id && (el.type || filtersSearchList_1.NO_TYPED_SEARCH_ITEM) === typeKey);
+        if (currentItem) {
+            const newValue = searchSelection.filter(el => !(el.id === currentItem.id && (el.type || filtersSearchList_1.NO_TYPED_SEARCH_ITEM) === typeKey));
+            setSearchSelection(newValue);
+        }
+        else {
+            setSearchSelection([...searchSelection, item]);
+        }
+    }, [searchSelection, setSearchSelection]);
+    const handleTriggerClick = (0, react_1.useCallback)(() => {
+        setIsOpen(prevState => !prevState);
+    }, []);
+    const handleModalState = (0, react_1.useCallback)(() => {
+        onToggleView && onToggleView(!isModalOpen);
+        setIsModalOpen(val => !val);
+    }, [isModalOpen, onToggleView]);
+    const handleOpenChange = (0, react_1.useCallback)((open) => {
+        setIsOpen(open);
+    }, []);
+    const handleModalApply = (0, react_1.useCallback)((state) => {
+        filters.forEach((filter) => {
+            const newState = state[filter.props.id];
+            if (filter.props.id && state.hasOwnProperty(filter.props.id) && filter.props.onChange) {
+                filter.props.onChange(newState);
+            }
+        });
+    }, [filters]);
+    const handleSaveFilters = (0, react_1.useCallback)((filterName, filterState) => {
+        const stateForSave = filterState || (0, filtersHelper_1.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 = (0, react_1.useCallback)((item) => {
+        const newSearchSelection = item.itemsArray;
+        const newItemSearch = item.itemsArray.find(el => el.id === filtersSearchList_1.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);
+        setIsOpen(false);
+    }, [setKeyword, setSearchSelection]);
+    const handlePinChange = (0, react_1.useCallback)(() => {
+        onPinChange && onPinChange(!isPinned);
+    }, [onPinChange, isPinned]);
+    const getIconByType = (0, react_1.useCallback)((type) => {
+        if (!type) {
+            return iconFilter_1.IconFilter;
+        }
+        const foundType = searchTypesArray.find((item) => item.id === type);
+        return foundType && foundType.icon ? foundType.icon : iconFilter_1.IconFilter;
+    }, [searchTypesArray]);
+    const memoizedSelect = (0, react_1.useMemo)(() => (0, jsx_runtime_1.jsx)(filtersSelect_1.FiltersSelect, { id: `filtersSelect_${uniqueKey}`, 
+        // name={translate("Search by")}
+        value: searchType, onChange: setSearchType, items: searchTypesToSelect }), [searchType, searchTypesToSelect, setSearchType, uniqueKey]);
+    const memoizedSearch = (0, react_1.useMemo)(() => (0, jsx_runtime_1.jsx)(filtersSearch_1.FiltersSearch, { id: `filtersSearch_${uniqueKey}`, ref: isOpen ? searchTriggerRef : null, name: translate("Search page"), value: keyword, onChange: setKeyword, onSearchKeyDown: isRecentSearchesMode ? handleSaveRecentSearch : undefined, handleSearchFocus: handleSearchFocus, handleRemove: onSearchItemClick, searchSelection: searchSelection, className: "zen-filters-popup__search-with-pills" }), [uniqueKey, isOpen, translate, keyword, setKeyword, isRecentSearchesMode, handleSaveRecentSearch, handleSearchFocus, onSearchItemClick, searchSelection]);
+    const allOption = (0, react_1.useMemo)(() => (0, filtersSelect_1.getAllOption)(translate), [translate]);
+    const selectTrigger = (0, react_1.useMemo)(() => {
+        var _a;
+        return (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", onClick: handleTriggerClick, icon: iconChevronDownSmall_1.IconChevronDownSmall, iconPosition: "end", children: !isOpen ? 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 : translate("Search by") });
+    }, [handleTriggerClick, selectState, isOpen, allOption.name, translate, searchTypesArray]);
+    const combinedData = (0, filtersHelper_1.useCombineData)(searchTypesArray);
+    const memoizedPopup = (0, react_1.useMemo)(() => (0, jsx_runtime_1.jsx)(controlledPopup_1.ControlledPopup, { paddingY: -28, isOpen: isOpen, className: (0, classNames_1.classNames)(["zen-filters-popup"]), onOpenChange: handleOpenChange, useTrapFocusWithTrigger: "withTrigger", alignment: "bottom", shouldHoldScroll: true, triggerRef: triggerRef, ariaLabel: translate("Setting conditions"), recalculateOnScroll: true, children: (0, jsx_runtime_1.jsxs)("div", { className: "zen-filters-popup__content", children: [(0, jsx_runtime_1.jsxs)("div", { className: "zen-filters-popup__left-panel", children: [selectTrigger, memoizedSelect] }), (0, jsx_runtime_1.jsxs)("div", { className: "zen-filters-popup__right-panel", children: [memoizedSearch, (0, jsx_runtime_1.jsx)(filtersSearchList_1.FiltersSearchList, { searchValue: keyword, searchData: combinedData, searchSelection: searchSelection, getIconByType: getIconByType, handleSearchItemClick: onSearchItemClick, recentSearches: isRecentSearchesMode ? recentSearches : undefined, onRemoveRecentSearchItem: isRecentSearchesMode ? onRemoveRecentSearchItem : undefined, handleRecentSearchItemClick: isRecentSearchesMode ? handleRecentSearchItemClick : undefined })] })] }) }), [isOpen, handleOpenChange, selectTrigger, memoizedSelect, memoizedSearch, keyword, combinedData, searchSelection, getIconByType, onSearchItemClick, isRecentSearchesMode, recentSearches, translate, onRemoveRecentSearchItem, handleRecentSearchItemClick]);
+    const filtersForRender = (0, react_1.useMemo)(() => filters.filter(el => typeof el.props.visible === "boolean" ? el.props.visible
+        : el.props.visible === undefined ? false : el.props.visible(Array.from(selectState), undefined)), [filters, selectState]);
+    // The modal 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 = (0, react_1.useMemo)(() => {
+        const stateObj = (0, filtersHelper_1.createStateObject)(filters, "state");
+        return filters.filter(el => typeof el.props.visible === "boolean" ? el.props.visible
+            : el.props.visible === undefined ? true : (el.props.visible(Array.from(selectState), stateObj) || el.props.visible(Array.from(selectState))));
+    }, [filters, selectState]);
+    const hasSavedFilters = savedFiltersStates.size > 0;
+    const memoizedFiltersContainer = (0, react_1.useMemo)(() => (0, jsx_runtime_1.jsx)(filtersContainer_1.FiltersContainer, { filtersClickHandler: handleModalState, filtersForCalculation: filtersForCalculation, isPinned: isPinMode ? isPinned : undefined, onPinChange: isPinMode ? onPinChange : undefined, hasSavedFilters: hasSavedFilters, children: filtersForRender }), [handleModalState, filtersForCalculation, isPinMode, isPinned, onPinChange, hasSavedFilters, filtersForRender]);
+    const tabItems = (0, react_1.useMemo)(() => searchTypesArray.map((item) => ({ id: item.id, name: item.name })), [searchTypesArray]);
+    const memoizedModal = (0, react_1.useMemo)(() => (0, jsx_runtime_1.jsx)(filtersModal_1.FiltersModal, { isOpen: isModalOpen, onApply: handleModalApply, onClose: handleModalState, onPin: isPinMode ? handlePinChange : undefined, isPinned: isPinMode ? isPinned : undefined, filters: filters, tabItems: tabItems, externalModalState: allFiltersState, setExternalModalState: setAllFiltersState }), [isModalOpen, handleModalApply, handleModalState, handlePinChange, isPinned, isPinMode, filters, tabItems, 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)(() => {
+        const activeSet = new Set();
+        const currentState = (0, filtersHelper_1.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 ((0, isElementsEqual_1.isElementsEqual)(currentState, savedState)) {
+                    activeSet.add(key);
+                }
+            }
+        });
+        return activeSet;
+    }, [savedFiltersStates, filters]);
+    const removeSavedFiltersState = (0, react_1.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 = (0, react_1.useCallback)((item) => {
+        var _a;
+        const newState = (_a = savedFiltersStates.get(item)) === null || _a === void 0 ? void 0 : _a.state;
+        if (newState) {
+            filters.forEach((filter) => {
+                const stateForFilter = newState[filter.props.id];
+                if (filter.props.id && newState.hasOwnProperty(filter.props.id) && filter.props.onChange) {
+                    filter.props.onChange(stateForFilter);
+                }
+            });
+        }
+    }, [filters, savedFiltersStates]);
+    return (0, jsx_runtime_1.jsxs)("div", { className: (0, classNames_1.classNames)(["zen-filters", className || ""]), children: [isOpen ? null : (0, jsx_runtime_1.jsxs)("div", { className: "zen-filters__main-row", children: [selectTrigger, memoizedSearch] }), (0, jsx_runtime_1.jsx)("div", { className: "zen-filters__trigger", ref: triggerRef, role: "button", tabIndex: 0, "aria-label": translate("Open search") }), (0, jsx_runtime_1.jsx)(filtersSavedItemsProvider_1.FiltersSavedItemsProvider, { items: memoizedSavedFiltersItems, active: memoizedSavedFiltersActive, onRemove: isSavedFiltersMode ? removeSavedFiltersState : undefined, onApply: isSavedFiltersMode ? applySavedFiltersState : undefined, onSave: isSavedFiltersMode ? handleSaveFilters : undefined, children: (0, jsx_runtime_1.jsx)(chipStatusProvider_1.ChipStatusProvider, { status: memoizedStatus, children: memoizedFiltersContainer }) }), memoizedPopup, isModalOpen ? (0, jsx_runtime_1.jsx)(filtersSavedItemsProvider_1.FiltersSavedItemsProvider, { items: memoizedSavedFiltersItems, active: memoizedSavedFiltersActive, onRemove: isSavedFiltersMode ? removeSavedFiltersState : undefined, onApply: isSavedFiltersMode ? applySavedFiltersState : undefined, onSave: isSavedFiltersMode ? handleSaveFilters : undefined, children: (0, jsx_runtime_1.jsx)(chipStatusProvider_1.ChipStatusProvider, { status: memoizedStatus, children: memoizedModal }) }) : null] });
+};
+exports.Filters = Filters;
+exports.Filters.Chip = filtersChip_1.FiltersChip;
+exports.Filters.DateRange = filtersDateRange_1.FiltersDateRange;
+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

@@ -0,0 +1,40 @@
+import { ReactElement } from "react";
+import React from "react";
+import { TFiltersDropdownAllStates } from "./components/filtersDropdown";
+import { IFiltersSearchTypesItem } from "./filters";
+import { ISearchItem } from "./components/filtersSearchList";
+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 prepareDefaultDropdownState: (type: TDropdownState) => never[] | {
+    selected: never[];
+    isAllSelected: boolean;
+    isChecked: boolean;
+} | {
+    selected: never[];
+    isChecked: boolean;
+    isAllSelected?: undefined;
+} | {
+    selected: never[];
+    isAllSelected: boolean;
+    isChecked?: undefined;
+};
+export declare const getChildren: (children?: ReactElement | (null | ReactElement)[]) => (ReactElement<any, string | React.JSXElementConstructor<any>> | null)[];
+export declare const getFiltersState: (children: ReactElement | ReactElement[]) => {};
+export declare const createStateObject: (children: ReactElement | ReactElement[], field: "state" | "defaultState") => {};
+export declare function getNumberOfChangedFilters(state: object): number;
+export declare const getTotalChangedNumber: (selectState: string[], filters: ReactElement[], isModalCondition: boolean) => number;
+export declare const serializeEntriesToId: (entries: {
+    id: string;
+    name: string;
+    type?: string;
+}[]) => string;
+export declare const MAX_TOTAL_RESULTS = 500;
+export declare const useCombineData: (searchTypes: IFiltersSearchTypesItem[]) => {
+    data: ISearchItem[];
+    isLoading: boolean;
+    error: Error | null;
+};
+export declare function getArrayOfElements<T>(elem: T | T[] | undefined): T[];