@geotab/zenith 3.0.1 → 3.1.0

package/esm/filters/components/filtersSearchList.js

@@ -1,5 +1,5 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useCallback, useEffect, useMemo, useState } from "react";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { List } from "../../list/list";
 import { useLanguage } from "../../utils/localization/useLanguage";
 import { Button } from "../../button/button";
@@ -11,61 +11,189 @@ import { useMobile } from "../../commonHelpers/hooks/useMobile";
 import { useDrive } from "../../utils/theme/useDrive";
 import { classNames } from "../../commonHelpers/classNames/classNames";
 import { MAX_TOTAL_RESULTS } from "../filtersHelper";
+import { EmptySearchList } from "../../dataGrid/emptySearchList/emptySearchList";
+import { getNewFocusableItem } from "../../utils/keyboardHelpers";
+import { FOCUSABLE_SELECTOR } from "../../utils/focusableSelector";
 export const NO_TYPED_SEARCH_ITEM = "noTypedSearchItem";
 export const KEYWORD_ID = "keywordId";
 export const KEYWORD_TYPE = "keyword";
-export const FiltersSearchList = ({ searchValue, searchData, recentSearches, searchSelection, handleSearchItemClick, onRemoveRecentSearchItem, handleRecentSearchItemClick, getIconByType }) => {
+export const NOT_POPULATED_NAME = "...";
+export const FiltersSearchList = ({ searchValue, searchData, recentSearches, searchSelection, onlyOneType, handleSearchItemClick, onRemoveRecentSearchItem, handleRecentSearchItemClick, getIconByType, handleClearSearchSelection, searchListRef }) => {
     const { translate } = useLanguage();
-    const isSearchMode = Boolean(handleSearchItemClick && searchSelection);
+    const isSearchModeAvailable = Boolean(handleSearchItemClick && searchSelection);
+    const isRecentSearchesModeAvailable = Boolean(recentSearches && handleRecentSearchItemClick && onRemoveRecentSearchItem);
     const isMobile = useMobile();
     const isDrive = useDrive();
     const [removedItems, setRemovedItems] = useState([]);
-    const [historyMode, setHistoryMode] = useState(false);
+    const initialSearchSelectionRef = useRef(searchSelection || []);
+    const hasNotPopulatedName = initialSearchSelectionRef.current.length === 0 ? false : initialSearchSelectionRef.current.some(el => el.name === NOT_POPULATED_NAME);
+    const getCurrentMode = useCallback(() => {
+        if (searchValue) {
+            return "search";
+        }
+        if (isSearchModeAvailable && initialSearchSelectionRef.current.length > 0) {
+            return "selected";
+        }
+        if (isRecentSearchesModeAvailable && (recentSearches === null || recentSearches === void 0 ? void 0 : recentSearches.data) && recentSearches.data.length > 0) {
+            return "recent";
+        }
+        return "";
+    }, [searchValue, isSearchModeAvailable, isRecentSearchesModeAvailable, recentSearches === null || recentSearches === void 0 ? void 0 : recentSearches.data]);
+    const [currentMode, setCurrentMode] = useState(getCurrentMode());
     const waitingItemsLimit = 5;
-    const isRecentSearchesMode = Boolean(recentSearches && handleRecentSearchItemClick && onRemoveRecentSearchItem);
     // Handle React Query errors
     useEffect(() => {
-        if (isSearchMode && (searchData === null || searchData === void 0 ? void 0 : searchData.error)) {
+        if (currentMode === "search" && (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]);
+    }, [currentMode, searchData === null || searchData === void 0 ? void 0 : searchData.error]);
+    useEffect(() => {
+        if (currentMode !== "search" && searchValue) {
+            setCurrentMode("search");
+        }
+    }, [searchValue, currentMode]);
+    useEffect(() => {
+        if (currentMode === "recent" && searchSelection && searchSelection.length === 0) {
+            initialSearchSelectionRef.current = [];
+        }
+    }, [isSearchModeAvailable, isRecentSearchesModeAvailable, currentMode, searchSelection]);
     // Reset history mode when search value changes
     useEffect(() => {
-        if (historyMode && searchValue) {
-            setHistoryMode(false);
-        }
-    }, [historyMode, searchValue]);
-    const searchItems = useMemo(() => isSearchMode ? (searchData === null || searchData === void 0 ? void 0 : searchData.data) || [] : [], [isSearchMode, searchData === null || searchData === void 0 ? void 0 : searchData.data]);
-    const recentItems = 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 = useCallback(() => {
-        setHistoryMode(prev => !prev);
+        if (currentMode === "history" && searchValue) {
+            setCurrentMode(isSearchModeAvailable ? "search" : "");
+        }
+        else if (currentMode === "search" && !searchValue) {
+            setCurrentMode(getCurrentMode());
+        }
+    }, [currentMode, getCurrentMode, isRecentSearchesModeAvailable, isSearchModeAvailable, searchValue]);
+    useEffect(() => {
+        if (searchSelection && searchSelection.length === 0) {
+            return;
+        }
+        searchSelection === null || searchSelection === void 0 ? void 0 : searchSelection.forEach(item => {
+            const existingItem = initialSearchSelectionRef.current.find(el => (onlyOneType ? el.id === item.id : el.id === item.id && el.type === item.type));
+            if (!existingItem) {
+                initialSearchSelectionRef.current = [...initialSearchSelectionRef.current, item];
+            }
+            else if (hasNotPopulatedName) {
+                existingItem.name = item.name;
+                existingItem.description = item.description;
+                existingItem.type = item.type;
+            }
+        });
+    }, [hasNotPopulatedName, onlyOneType, searchSelection]);
+    const searchItems = useMemo(() => currentMode === "search" || currentMode === "" ? (searchData === null || searchData === void 0 ? void 0 : searchData.data) || [] : [], [currentMode, searchData === null || searchData === void 0 ? void 0 : searchData.data]);
+    const recentItems = useMemo(() => currentMode === "recent" || currentMode === "history" ? (recentSearches === null || recentSearches === void 0 ? void 0 : recentSearches.data) || [] : [], [currentMode, recentSearches === null || recentSearches === void 0 ? void 0 : recentSearches.data]);
+    const isLoading = currentMode === "search" && (searchData === null || searchData === void 0 ? void 0 : searchData.isLoading) || (currentMode === "recent" || currentMode === "history" ? recentSearches === null || recentSearches === void 0 ? void 0 : recentSearches.isLoading : false) || false;
+    const changeMode = useCallback((newVal) => {
+        setCurrentMode(newVal);
         setRemovedItems([]);
         // Note: In React Query implementation, the parent component should handle
         // refetching data when switching between modes
     }, []);
     const handleRemove = useCallback((itemId) => () => {
+        var _a;
         setRemovedItems(prev => [...prev, itemId]);
         onRemoveRecentSearchItem && onRemoveRecentSearchItem([itemId]);
-    }, [onRemoveRecentSearchItem]);
+        // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+        const firstItem = (_a = searchListRef.current) === null || _a === void 0 ? void 0 : _a.querySelector(FOCUSABLE_SELECTOR);
+        firstItem === null || firstItem === void 0 ? void 0 : firstItem.focus();
+    }, [onRemoveRecentSearchItem, searchListRef]);
     const handleRemoveAll = useCallback(() => {
         setRemovedItems(recentItems.map(item => item.id));
         onRemoveRecentSearchItem && onRemoveRecentSearchItem(recentItems.map(item => item.id));
-        changeMode();
-    }, [onRemoveRecentSearchItem, recentItems, changeMode]);
+        changeMode(getCurrentMode());
+    }, [recentItems, onRemoveRecentSearchItem, changeMode, getCurrentMode]);
     const memoizedSearchItemClick = useCallback((itemId, itemType) => () => {
-        const currentSearchItem = searchItems.find(item => item.id === itemId && item.type === itemType);
+        const currentSearchItem = onlyOneType && !itemType ? searchItems.find(item => item.id === itemId)
+            : searchItems.find(item => item.id === itemId && item.type === itemType);
         currentSearchItem && handleSearchItemClick && handleSearchItemClick(currentSearchItem);
-    }, [handleSearchItemClick, searchItems]);
+    }, [handleSearchItemClick, onlyOneType, searchItems]);
+    const memoizedSelectedItemClick = useCallback((itemId, itemType) => () => {
+        const currentSelectedItem = onlyOneType && !itemType ? initialSearchSelectionRef.current.find(item => item.id === itemId)
+            : initialSearchSelectionRef.current.find(item => item.id === itemId && item.type === itemType);
+        currentSelectedItem && handleSearchItemClick && handleSearchItemClick(currentSelectedItem);
+    }, [handleSearchItemClick, onlyOneType]);
     const memoizedRecentSearchItemClick = useCallback((itemId, itemType) => () => {
         const currentSearchItem = recentItems.find(item => item.id === itemId && item.type === itemType);
         currentSearchItem && handleRecentSearchItemClick && handleRecentSearchItemClick(currentSearchItem);
     }, [handleRecentSearchItemClick, recentItems]);
+    const memoizedClearSelectedItems = useCallback(() => {
+        var _a;
+        handleClearSearchSelection === null || handleClearSearchSelection === void 0 ? void 0 : handleClearSearchSelection();
+        initialSearchSelectionRef.current = [];
+        setCurrentMode(isRecentSearchesModeAvailable && ((_a = recentSearches === null || recentSearches === void 0 ? void 0 : recentSearches.data) === null || _a === void 0 ? void 0 : _a.length) ? "recent" : "");
+    }, [handleClearSearchSelection, isRecentSearchesModeAvailable, recentSearches]);
+    const handleKeyDown = useCallback((event) => {
+        const isListItem = event.target instanceof HTMLElement && event.target.dataset.listItem === "true";
+        const isButtonItem = event.target instanceof HTMLElement && event.target.dataset.closeButton === "true";
+        const getSelector = () => {
+            if (isListItem) {
+                return `[data-list-item="true"]`;
+            }
+            if (isButtonItem) {
+                return `[data-close-button="true"]`;
+            }
+            return undefined;
+        };
+        if (event.key === "ArrowDown") {
+            const nextItem = getNewFocusableItem(1, searchListRef.current, getSelector());
+            nextItem === null || nextItem === void 0 ? void 0 : nextItem.focus();
+            return;
+        }
+        if (event.key === "ArrowUp") {
+            const prevItem = getNewFocusableItem(-1, searchListRef.current, getSelector());
+            prevItem === null || prevItem === void 0 ? void 0 : prevItem.focus();
+            return;
+        }
+        if (event.key === "ArrowRight" && isListItem) {
+            const nextItem = getNewFocusableItem(1, searchListRef.current, `[data-close-button="true"]`);
+            nextItem === null || nextItem === void 0 ? void 0 : nextItem.focus();
+            return;
+        }
+        if (event.key === "ArrowLeft" && isButtonItem) {
+            const prevItem = getNewFocusableItem(-1, searchListRef.current, `[data-list-item="true"]`);
+            prevItem === null || prevItem === void 0 ? void 0 : prevItem.focus();
+            return;
+        }
+    }, [searchListRef]);
     const memoizedRecentDataArr = useMemo(() => recentItems.filter(item => !removedItems.includes(item.id)).reverse(), [recentItems, removedItems]);
-    const memoizedRecentData = useMemo(() => (historyMode ? memoizedRecentDataArr : (searchValue && isSearchMode ? [] : memoizedRecentDataArr.slice(0, waitingItemsLimit))).map(item => (_jsx(FiltersSearchItemData, { id: item.id, name: item.name, isActive: false, secondary: item.description, onClose: handleRemove(item.id), onClick: memoizedRecentSearchItemClick(item.id, item.type || 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 = useMemo(() => historyMode || !searchValue && isRecentSearchesMode ? [] : searchItems.slice(0, MAX_TOTAL_RESULTS).map(item => (_jsx(FiltersSearchItemData, { id: item.id, name: item.name, isActive: isSearchMode ? searchSelection.filter(el => el.id === item.id).some(el => el.type === (item.type || NO_TYPED_SEARCH_ITEM)) || false : false, secondary: item.description, onClose: undefined, onClick: isSearchMode ? memoizedSearchItemClick(item.id, item.type || NO_TYPED_SEARCH_ITEM) : undefined, icon: getIconByType(item.type), isMobile: isMobile, isDrive: isDrive }, `search-${item.id}-${item.type || NO_TYPED_SEARCH_ITEM}`))), [historyMode, searchValue, isRecentSearchesMode, searchItems, isSearchMode, searchSelection, memoizedSearchItemClick, getIconByType, isMobile, isDrive]);
-    const resultsToShow = useMemo(() => isRecentSearchesMode ? [...memoizedRecentData, ...memoizedSearchData]
-        : memoizedSearchData, [isRecentSearchesMode, memoizedRecentData, memoizedSearchData]);
-    return _jsxs("div", { className: "zen-filters-search-list", children: [searchValue ? null : _jsxs("div", { className: classNames(["zen-filters-search-list__header", isDrive ? (isMobile ? "zen-filters-search-list__header--drive" : "zen-filters-search-list__header--drive-tablet") : ""]), children: [historyMode ? _jsx(TextIconButton, { className: "zen-filters-search-list__header-back-button", title: translate("Back"), type: "tertiary", onClick: changeMode, icon: IconChevronLeft, iconPosition: ButtonIconPosition.Start })
-                        : null, isRecentSearchesMode ? _jsx("div", { className: "zen-filters-search-list__header-title", children: translate("Recent searches") }) : null, historyMode || !isRecentSearchesMode ? null : _jsx(Button, { type: "tertiary", onClick: changeMode, children: translate("View history") }), historyMode && isRecentSearchesMode ? _jsx(Button, { type: "tertiary", onClick: handleRemoveAll, children: translate("Clear all") }) : null] }), _jsx(List, { className: "zen-filters-search-list__data", isLoading: isLoading, type: "data", waitingItems: waitingItemsLimit, children: resultsToShow })] });
+    const memoizedRecentData = useMemo(() => {
+        if (currentMode !== "recent" && currentMode !== "history") {
+            return [];
+        }
+        const recentDataArr = currentMode === "history" ? memoizedRecentDataArr : memoizedRecentDataArr.slice(0, waitingItemsLimit);
+        return recentDataArr.map(item => (_jsx(FiltersSearchItemData, { id: item.id, name: item.name, isActive: false, secondary: item.description, onClose: handleRemove(item.id), onClick: memoizedRecentSearchItemClick(item.id, item.type), icon: getIconByType(item.type || onlyOneType), isMobile: isMobile, isDrive: isDrive }, `${currentMode}-${item.id}`)));
+    }, [currentMode, memoizedRecentDataArr, handleRemove, memoizedRecentSearchItemClick, getIconByType, onlyOneType, isMobile, isDrive]);
+    const memoizedSearchData = useMemo(() => currentMode !== "search" && currentMode !== "" ? [] : searchItems.slice(0, MAX_TOTAL_RESULTS).map(item => (_jsx(FiltersSearchItemData, { id: item.id, name: item.name, isActive: isSearchModeAvailable ? (onlyOneType ? searchSelection.some(el => el.id === item.id) : searchSelection.filter(el => el.id === item.id)
+            .some(el => el.type === (item.type || NO_TYPED_SEARCH_ITEM)) || false) : false, secondary: item.description, onClose: undefined, onClick: isSearchModeAvailable ? memoizedSearchItemClick(item.id, item.type) : undefined, icon: getIconByType(item.type || onlyOneType), isMobile: isMobile, isDrive: isDrive }, `search-${item.id}-${item.type || NO_TYPED_SEARCH_ITEM}`))), [currentMode, searchItems, isSearchModeAvailable, searchSelection, memoizedSearchItemClick, getIconByType, onlyOneType, isMobile, isDrive]);
+    const memoizedSelectedData = useMemo(() => currentMode !== "selected" || initialSearchSelectionRef.current.length === 0 ? [] : initialSearchSelectionRef.current.slice(0, MAX_TOTAL_RESULTS)
+        .map(item => (_jsx(FiltersSearchItemData, { id: item.id, name: item.name, isActive: onlyOneType ? (searchSelection || []).some(el => el.id === item.id)
+            : (searchSelection || []).filter(el => el.id === item.id).some(el => el.type === (item.type || NO_TYPED_SEARCH_ITEM)) || false, secondary: item.description, onClose: undefined, onClick: memoizedSelectedItemClick(item.id, item.type), icon: getIconByType(item.type || onlyOneType), isMobile: isMobile, isDrive: isDrive }, `selected-${item.id}-${item.type || onlyOneType || NO_TYPED_SEARCH_ITEM}-${item.name}-${hasNotPopulatedName ? "notPopulated" : ""}`))), [currentMode, onlyOneType, searchSelection, memoizedSelectedItemClick, getIconByType, isMobile, isDrive, hasNotPopulatedName]);
+    const resultsToShow = useMemo(() => {
+        if (currentMode === "search") {
+            return memoizedSearchData;
+        }
+        if (currentMode === "recent" || currentMode === "history") {
+            return memoizedRecentData;
+        }
+        if (currentMode === "selected") {
+            return memoizedSelectedData;
+        }
+        return memoizedSearchData;
+    }, [currentMode, memoizedSearchData, memoizedRecentData, memoizedSelectedData]);
+    const getSearchHeaderContent = () => {
+        if (currentMode === "history") {
+            return _jsxs(_Fragment, { children: [_jsx(TextIconButton, { className: "zen-filters-search-list__header-back-button", title: translate("Back"), type: "tertiary", onClick: changeMode.bind(null, "recent"), icon: IconChevronLeft, iconPosition: ButtonIconPosition.Start }), _jsx(Button, { type: "tertiary", onClick: handleRemoveAll, children: translate("Clear all") })] });
+        }
+        if (currentMode === "recent" || currentMode === "selected") {
+            return _jsxs(_Fragment, { children: [_jsxs("div", { className: "zen-filters-search-list__header-title", children: [_jsx(Button, { type: currentMode === "recent" ? "tertiary" : "tertiary-black", className: currentMode === "recent" ? "zen-filters-search-list__header-button--active" : "", title: translate("Recent searches"), onClick: changeMode.bind(null, "recent"), children: translate("Recent searches") }), _jsx(Button, { type: currentMode === "selected" ? "tertiary" : "tertiary-black", className: currentMode === "selected" ? "zen-filters-search-list__header-button--active" : "", title: translate("Currently selected"), onClick: changeMode.bind(null, "selected"), children: translate("Currently selected") })] }), currentMode === "recent" && recentItems.length > resultsToShow.length && _jsx(Button, { type: "tertiary", onClick: changeMode.bind(null, "history"), children: translate("View history") }), currentMode === "selected" && resultsToShow.length > 0 && _jsx(Button, { type: "tertiary", onClick: memoizedClearSelectedItems, children: translate("Clear") })] });
+        }
+        if (currentMode === "search" && resultsToShow.length > 0) {
+            return _jsx("div", { className: "zen-filters-search-list__header-title", children: translate("Top results") });
+        }
+        return undefined;
+    };
+    const searchHeaderContent = getSearchHeaderContent();
+    return _jsxs("div", { className: "zen-filters-search-list", children: [searchHeaderContent ? _jsx("div", { className: classNames(["zen-filters-search-list__header", isDrive ? (isMobile ? "zen-filters-search-list__header--drive" : "zen-filters-search-list__header--drive-tablet") : ""]), children: searchHeaderContent }) : null, _jsx("div", { ref: searchListRef, children: _jsx(List, { className: "zen-filters-search-list__data", onKeyDown: handleKeyDown, isLoading: currentMode === "selected" ? false : isLoading, type: "data", waitingItems: waitingItemsLimit, children: resultsToShow }) }), !isLoading && resultsToShow.length === 0 ? _jsx(EmptySearchList, { children: translate("No data available") }) : null] });
 };

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

@@ -15,6 +15,7 @@ export interface IFiltersSelect extends IFiltersSelectProps {
     value: IFiltersSearchType;
     onChange: (newValue: IFiltersSearchType) => void;
     className?: string;
+    selectListRef: React.RefObject<HTMLDivElement>;
 }
 export declare const ALL_SELECT_OPTION_ID: string;
 export interface IFiltersSearchType {

package/esm/filters/components/filtersSelect.js

@@ -1,9 +1,10 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
 import { useCallback, useMemo, useState } from "react";
 import { classNames } from "../../commonHelpers/classNames/classNames";
 import { useLanguage } from "../../utils/localization/useLanguage";
 import { useUniqueId } from "../../commonHelpers/useUniqueId";
 import { FiltersSelectListExpandableItem, FiltersSelectListItem } from "./filtersSelectListItem";
+import { getNewFocusableItem } from "../../utils/keyboardHelpers";
 export const ALL_SELECT_OPTION_ID = "All";
 export const FiltersSelectDisplayName = "FiltersSelect";
 export const getFiltersSearchTypeAllOption = () => ({
@@ -13,7 +14,7 @@ export const getAllOption = (translate) => ({
     id: ALL_SELECT_OPTION_ID,
     name: translate("All")
 });
-export const FiltersSelect = ({ value, name, onChange, id, items, className }) => {
+export const FiltersSelect = ({ value, onChange, items, className, selectListRef }) => {
     const { translate } = useLanguage();
     const [activeId, setActiveId] = useState("");
     const filtersSelectListId = useUniqueId();
@@ -28,18 +29,45 @@ export const FiltersSelect = ({ value, name, onChange, id, items, className }) =
             return;
         }
         setActiveId(clickedId);
-        onChange({ [clickedId]: undefined });
-    }, [activeId, onChange]);
+    }, [activeId]);
     const handleItemClick = useCallback((clickedId, parentId) => () => {
+        if (!clickedId) {
+            parentId && onChange({ [parentId]: undefined });
+            return;
+        }
         if (parentId) {
             onChange({ [parentId]: clickedId });
             return;
         }
-        setActiveId("");
         onChange(Object.keys(value).includes(clickedId) ? getFiltersSearchTypeAllOption() : { [clickedId]: undefined });
     }, [onChange, value]);
-    const selectListComponent = useMemo(() => preparedItems.map(el => el.subItems ?
-        _jsx(FiltersSelectListExpandableItem, { id: `${filtersSelectListId}-${el.id}`, name: el.name, isActive: el.id === activeId, className: classNames([value.hasOwnProperty(el.id) ? "zen-filters-select__list-item--active" : ""]), onClick: handleExpandableItemClick(el.id), content: el.id === activeId ? el.subItems.map(subEl => _jsx(FiltersSelectListItem, { className: classNames(["zen-filters-select__sub-item"]), id: `${filtersSelectListId}-${el.id}-${subEl.id}`, name: subEl.name, isActive: value[el.id] === subEl.id, onClick: handleItemClick(subEl.id, el.id) }, `${el.id}-${subEl.id}`)) : _jsx(_Fragment, {}) }, el.id) : _jsx(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 _jsxs("div", { className: "zen-filters-select", children: [id && name ? _jsx("div", { className: "zen-filters-select__label", id: id, children: name }) : null, _jsx("div", { className: classNames(["zen-filters-select__list", className || ""]), children: selectListComponent })] });
+    const handleKeyDown = useCallback((event) => {
+        var _a, _b, _c, _d;
+        if (event.key === "ArrowDown") {
+            const nextElement = ((_a = document.activeElement) === null || _a === void 0 ? void 0 : _a.nextElementSibling) ? (_b = document.activeElement) === null || _b === void 0 ? void 0 : _b.nextElementSibling
+                : getNewFocusableItem(1, selectListRef.current);
+            nextElement === null || nextElement === void 0 ? void 0 : nextElement.focus();
+            return;
+        }
+        if (event.key === "ArrowUp") {
+            const nextElement = ((_c = document.activeElement) === null || _c === void 0 ? void 0 : _c.previousElementSibling) ? (_d = document.activeElement) === null || _d === void 0 ? void 0 : _d.previousElementSibling
+                : getNewFocusableItem(-1, selectListRef.current);
+            nextElement === null || nextElement === void 0 ? void 0 : nextElement.focus();
+            return;
+        }
+        if (event.key === "ArrowLeft") {
+            const nextElement = getNewFocusableItem(-1, selectListRef.current);
+            nextElement === null || nextElement === void 0 ? void 0 : nextElement.focus();
+            return;
+        }
+        if (event.key === "ArrowRight") {
+            const nextElement = getNewFocusableItem(1, selectListRef.current);
+            nextElement === null || nextElement === void 0 ? void 0 : nextElement.focus();
+            return;
+        }
+    }, [selectListRef]);
+    const selectListComponent = useMemo(() => preparedItems.map(el => el.subItems && el.subItems.length > 0 ?
+        _jsx(FiltersSelectListExpandableItem, { id: `${filtersSelectListId}-${el.id}`, name: el.name, isExpanded: el.id === activeId, isActive: Object.keys(value).includes(el.id) && Boolean(value[el.id]), className: classNames([value.hasOwnProperty(el.id) ? "zen-filters-select__list-item-wrapper--active" : ""]), onExpandItem: handleExpandableItemClick(el.id), onClick: handleItemClick(undefined, el.id), content: el.id === activeId ? el.subItems.map(subEl => _jsx(FiltersSelectListItem, { className: classNames(["zen-filters-select__sub-item"]), id: `${filtersSelectListId}-${el.id}-${subEl.id}`, name: subEl.name, isActive: value[el.id] === subEl.id, onClick: handleItemClick(subEl.id, el.id) }, `${el.id}-${subEl.id}`)) : _jsx(_Fragment, {}) }, `${filtersSelectListId}-${el.id}`) : _jsx(FiltersSelectListItem, { id: `${filtersSelectListId}-${el.id}`, name: el.name, className: "zen-filters-select__list-item--not-expandable", isActive: Object.keys(value).includes(el.id), onClick: handleItemClick(el.id) }, `${filtersSelectListId}-${el.id}`)), [activeId, filtersSelectListId, handleExpandableItemClick, handleItemClick, preparedItems, value]);
+    return _jsx("div", { className: "zen-filters-select", ref: selectListRef, onKeyDown: handleKeyDown, children: _jsx("div", { className: classNames(["zen-filters-select__list", className || ""]), children: selectListComponent }) });
 };
 FiltersSelect.displayName = FiltersSelectDisplayName;

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

@@ -1,15 +1,21 @@
-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;
+/// <reference types="react" />
+interface IFiltersSelectListItem {
+    id: string;
+    name: string;
+    isActive: boolean;
+    onClick: () => void;
+    className?: string;
+}
+export declare const FiltersSelectListItem: ({ id, name, isActive, onClick, className }: IFiltersSelectListItem) => import("react/jsx-runtime").JSX.Element;
+interface IFiltersSelectListExpandableItem {
+    id: string;
+    name: string;
+    content: React.ReactNode;
+    isActive: boolean;
+    isExpanded: boolean;
+    onClick: () => void;
+    className?: string;
+    onExpandItem?: () => void;
+}
+export declare const FiltersSelectListExpandableItem: ({ id, name, content, isActive, isExpanded, onClick, className, onExpandItem }: IFiltersSelectListExpandableItem) => import("react/jsx-runtime").JSX.Element;
+export {};

package/esm/filters/components/filtersSelectListItem.js

@@ -1,9 +1,19 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useCallback } from "react";
+import { Button } from "../../button/button";
 import { classNames } from "../../commonHelpers/classNames/classNames";
 import { useUniqueId } from "../../commonHelpers/useUniqueId";
-import { IconChevronBottom } from "../../icons/iconChevronBottom";
+import { IconChevronDownSmall } from "../../icons/iconChevronDownSmall";
+import { useLanguage } from "../../utils/localization/useLanguage";
 export const FiltersSelectListItem = ({ id, name, isActive, onClick, className = "" }) => _jsx("div", { children: _jsx("button", { type: "button", className: classNames(["zen-filters-select__list-item", isActive ? "zen-filters-select__list-item--active" : "", className]), id: id, onClick: onClick, children: name }) });
-export const FiltersSelectListExpandableItem = ({ id, name, content, isActive, onClick, className = "" }) => {
+export const FiltersSelectListExpandableItem = ({ id, name, content, isActive, isExpanded, onClick, className = "", onExpandItem }) => {
     const ariaControlsId = useUniqueId();
-    return (_jsxs(_Fragment, { children: [_jsxs("button", { type: "button", "aria-expanded": isActive, "aria-controls": ariaControlsId, className: classNames(["zen-filters-select__list-item", isActive ? "zen-filters-select__list-item--active" : "", className]), id: id, onClick: onClick, children: [name, _jsx(IconChevronBottom, { size: "large", className: classNames(["zen-filters-select__item-icon", isActive ? "zen-filters-select__item-icon--rotated" : ""]) })] }), _jsx("div", { id: ariaControlsId, "aria-labelledby": id, role: "region", className: classNames(["zen-filters-select__item-content", content ? "" : "zen-filters-select__item-content--hidden"]), children: content })] }));
+    const { translate } = useLanguage();
+    const handleExpandItem = useCallback((e) => {
+        e.stopPropagation();
+        if (onExpandItem) {
+            onExpandItem();
+        }
+    }, [onExpandItem]);
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: classNames(["zen-filters-select__list-item-wrapper", isExpanded ? "zen-filters-select__list-item-wrapper--expanded" : "", className]), children: [_jsx("button", { type: "button", className: classNames(["zen-filters-select__list-item"]), id: id, onClick: onClick, children: _jsxs("div", { className: "zen-filters-select__list-item-title", children: [name, isActive ? _jsx("div", { className: "zen-filters-select__item-active-indicator" }) : null] }) }), _jsx(Button, { type: "tertiary-black", onClick: handleExpandItem, className: "zen-filters-select__item-button", "aria-expanded": isExpanded, "aria-controls": ariaControlsId, "aria-label": isExpanded ? `${translate("Collapse")} ${name}` : `${translate("Expand")} ${name}`, children: _jsx(IconChevronDownSmall, { size: "large", className: classNames(["zen-filters-select__item-icon", isExpanded ? "zen-filters-select__item-icon--rotated" : ""]) }) })] }), _jsx("div", { id: ariaControlsId, "aria-labelledby": id, role: "region", className: classNames(["zen-filters-select__item-content", content ? "" : "zen-filters-select__item-content--hidden"]), children: content })] }));
 };

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

@@ -0,0 +1,15 @@
+import { ReactElement } from "react";
+import { TFiltersComponentsItemState, TFiltersComponentsProps } from "./filtersItem";
+import "./filtersSidePanel.less";
+export interface IFiltersSidePanel {
+    isOpen: boolean;
+    onClose: () => void;
+    onApply: (state: Record<string, TFiltersComponentsItemState>) => void;
+    onPin?: () => void;
+    isPinned?: boolean;
+    filters: ReactElement<TFiltersComponentsProps>[];
+    externalState?: Record<string, TFiltersComponentsItemState>;
+    setExternalState?: (newState: Partial<Record<string, TFiltersComponentsItemState>>) => void;
+    triggerRef: React.RefObject<HTMLElement>;
+}
+export declare const FiltersSidePanel: ({ isOpen, onApply, onClose, onPin, isPinned, filters, externalState, setExternalState, triggerRef }: IFiltersSidePanel) => import("react/jsx-runtime").JSX.Element;

package/esm/filters/components/filtersSidePanel.js

@@ -0,0 +1,208 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Fragment, useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
+import { useLanguage } from "../../utils/localization/useLanguage";
+import { useUniqueId } from "../../commonHelpers/useUniqueId";
+import { useMobile } from "../../commonHelpers/hooks/useMobile";
+import { useBodyScroll } from "../../utils/useBodyScroll";
+import { Shield } from "../../shield/shield";
+import { createPortal } from "react-dom";
+import { CUSTOM_POPUP_COMPONENT_CLASSNAME, SidePanel, SidePanelCloseReason } from "../../sidePanel/sidePanel";
+import { classNames } from "../../commonHelpers/classNames/classNames";
+import { themeContext } from "../../utils/theme/themeContext";
+import { ButtonIconPosition, TextIconButton } from "../../textIconButton/textIconButton";
+import { IconClose } from "../../icons/iconClose";
+import { Button } from "../../button/button";
+import { FooterButtons } from "../../footerButtons/footerButtons";
+import { IconDisk } from "../../icons/iconDisk";
+import { IconPin2 } from "../../icons/iconPin2";
+import { useFiltersSavedItems } from "./filtersSavedItemsProvider";
+import { useDriveClassName } from "../../utils/theme/useDriveClassName";
+import { ALL_SELECT_OPTION_ID, getAllOption } from "./filtersSelect";
+import { createStateObject } from "../filtersHelper";
+import { Tabs } from "../../tabs/tabs";
+import { FiltersSidePanelItem } from "./filtersSidePanelItem";
+import { FiltersSaveModal } from "./filtersSaveModal";
+import { isElementsEqual } from "../../utils/compareElementsUtils/isElementsEqual";
+import { FiltersEmptySelectedList } from "./filtersEmptySelectedList";
+const SELECTED_TAB_ID = "Selected";
+const getSelectedOption = (translate) => ({
+    id: SELECTED_TAB_ID,
+    name: translate("Selected")
+});
+export const FiltersSidePanel = ({ isOpen, onApply, onClose, onPin, isPinned, filters, externalState, setExternalState, triggerRef }) => {
+    var _a;
+    const { translate } = useLanguage();
+    const isLongTextLanguages = useMemo(() => `${translate("Reset")}${translate("Cancel")}${translate("Apply")}`.length > 31, [translate]);
+    const dataShieldId = useUniqueId();
+    const iconDriveClassName = useDriveClassName("icon");
+    const { dark } = useContext(themeContext);
+    const isMobile = useMobile();
+    const { setScrollHidden, resetScroll } = useBodyScroll();
+    const { onSave } = useFiltersSavedItems();
+    const [activeTabId, setActiveTabId] = useState(ALL_SELECT_OPTION_ID);
+    const [isSaveModalOpen, setIsSaveModalOpen] = useState(false);
+    const [filtersInternalState, setFiltersInternalState] = useState(createStateObject(filters, "state"));
+    const [initialExternalState, setInitialExternalState] = useState(externalState);
+    const prevIsOpenRef = useRef(false);
+    const [selectedIds, setSelectedIds] = useState([]);
+    const [errorItems, setErrorItems] = useState(new Set());
+    const saveButtonRef = useRef(null);
+    const externalMode = useMemo(() => {
+        if (externalState === undefined || setExternalState === undefined) {
+            return false;
+        }
+        return true;
+    }, [externalState, setExternalState]);
+    const handleInternalFiltersStateChange = useCallback((id) => (newState) => {
+        setFiltersInternalState((prevState) => (Object.assign(Object.assign({}, prevState), { [id]: newState })));
+    }, []);
+    const handleExternalFiltersStateChange = useCallback((id) => (newState) => {
+        setExternalState && setExternalState({ [id]: newState });
+    }, [setExternalState]);
+    const currentState = useMemo(() => externalMode ? externalState
+        : filtersInternalState, [externalMode, externalState, filtersInternalState]);
+    const currentFilters = useMemo(() => filters.filter((item) => currentState.hasOwnProperty(item.props.id)
+        && (typeof item.props.visible === "boolean" ? item.props.visible
+            : item.props.visible === undefined ? true : (item.props.visible([ALL_SELECT_OPTION_ID], currentState) || item.props.visible([ALL_SELECT_OPTION_ID])))), [currentState, filters]);
+    const inhibitedFilters = useMemo(() => {
+        const inhibited = new Set();
+        currentFilters.forEach((item) => {
+            if (item.props.inhibit && item.props.inhibit.length > 0) {
+                item.props.inhibit.forEach((id) => inhibited.add(id));
+            }
+        });
+        return inhibited;
+    }, [currentFilters]);
+    const filteredCurrentFilters = useMemo(() => currentFilters.filter((item) => !externalMode ? !inhibitedFilters.has(item.props.id) : true), [currentFilters, externalMode, inhibitedFilters]);
+    const handleReadyForFocus = useCallback((isCurrentOpen) => {
+        if (!isCurrentOpen) {
+            triggerRef.current.focus();
+            return;
+        }
+    }, [triggerRef]);
+    useEffect(() => {
+        const handleOpen = () => {
+            setScrollHidden();
+        };
+        const handleClose = () => {
+            resetScroll();
+        };
+        if (isOpen) {
+            handleOpen();
+        }
+        else {
+            handleClose();
+        }
+        return () => { handleClose(); };
+    }, [isOpen, setScrollHidden, resetScroll]);
+    const handleClearClick = useCallback(() => {
+        const newState = createStateObject(filters, "defaultState");
+        externalMode && setExternalState ? setExternalState(Object.assign({}, newState)) : setFiltersInternalState(newState);
+    }, [externalMode, filters, setExternalState]);
+    const handleApplyClick = useCallback(() => {
+        const stateForApply = externalMode ? currentState : {};
+        if (!externalMode) {
+            Object.keys(currentState).forEach(key => {
+                if (!inhibitedFilters.has(key)) {
+                    stateForApply[key] = currentState[key];
+                }
+            });
+        }
+        onApply(stateForApply);
+        onClose();
+    }, [currentState, externalMode, inhibitedFilters, onApply, onClose]);
+    const handleCancelClick = useCallback(() => {
+        const newState = createStateObject(filters, "state");
+        externalMode && setExternalState ? setExternalState(Object.assign({}, newState)) : setFiltersInternalState(newState);
+        onClose();
+    }, [externalMode, filters, onClose, setExternalState]);
+    const handleExternalModeClose = useCallback(() => {
+        if (!(externalMode && initialExternalState && setExternalState)) {
+            return;
+        }
+        setExternalState(initialExternalState);
+        onClose();
+    }, [externalMode, initialExternalState, onClose, setExternalState]);
+    const toggleSaveModal = useCallback(() => {
+        var _a;
+        isSaveModalOpen && ((_a = saveButtonRef.current) === null || _a === void 0 ? void 0 : _a.focus());
+        setIsSaveModalOpen(val => !val);
+    }, [isSaveModalOpen]);
+    const handleSaveFilters = useCallback((filterName) => {
+        const stateForApply = externalMode ? currentState : {};
+        if (!externalMode) {
+            Object.keys(currentState).forEach(key => {
+                if (!inhibitedFilters.has(key)) {
+                    stateForApply[key] = currentState[key];
+                }
+            });
+        }
+        onSave && onSave(filterName, stateForApply);
+    }, [externalMode, currentState, onSave, inhibitedFilters]);
+    const sidePanelItemChangeHandler = useCallback((id) => externalMode ? handleExternalFiltersStateChange(id) : handleInternalFiltersStateChange(id), [externalMode, handleExternalFiltersStateChange, handleInternalFiltersStateChange]);
+    const handleErrorCheck = useCallback((id) => (isError) => {
+        if (isError && errorItems.has(id) || !isError && !errorItems.has(id)) {
+            return;
+        }
+        const newErrorItems = new Set(errorItems);
+        newErrorItems[isError ? "add" : "delete"](id);
+        setErrorItems(newErrorItems);
+    }, [errorItems]);
+    const tabsContent = useMemo(() => filteredCurrentFilters
+        .map((item) => (_jsx(FiltersSidePanelItem, { item: item, itemState: currentState[item.props.id], changeHandler: sidePanelItemChangeHandler(item.props.id), errorCheck: handleErrorCheck(item.props.id) }, item.props.id))), [filteredCurrentFilters, currentState, sidePanelItemChangeHandler, handleErrorCheck]);
+    const defaultStateObject = useMemo(() => createStateObject(filteredCurrentFilters, "defaultState"), [filteredCurrentFilters]);
+    const getSelectedIds = useCallback(() => {
+        const selected = [];
+        filteredCurrentFilters.forEach((el) => {
+            const itemState = currentState[el.props.id];
+            const defaultState = defaultStateObject[el.props.id];
+            if (!isElementsEqual(itemState, defaultState) && !inhibitedFilters.has(el.props.id)) {
+                selected.push(el.props.id);
+            }
+        });
+        return selected;
+    }, [currentState, defaultStateObject, filteredCurrentFilters, inhibitedFilters]);
+    const tabOptions = useMemo(() => [
+        getAllOption(translate),
+        Object.assign(Object.assign({}, getSelectedOption(translate)), { quantity: getSelectedIds().length || undefined })
+    ], [getSelectedIds, translate]);
+    const onTabChange = (newVal) => {
+        setActiveTabId(newVal);
+    };
+    const selectedTabsContent = useMemo(() => selectedIds.length ? filteredCurrentFilters.filter((el) => selectedIds.includes(el.props.id))
+        .map((item) => (_jsx(FiltersSidePanelItem, { item: item, itemState: currentState[item.props.id], changeHandler: sidePanelItemChangeHandler(item.props.id), errorCheck: handleErrorCheck(item.props.id) }, item.props.id)))
+        : _jsx(FiltersEmptySelectedList, {}), [selectedIds, filteredCurrentFilters, currentState, sidePanelItemChangeHandler, handleErrorCheck]);
+    useEffect(() => {
+        if (!isOpen) {
+            return;
+        }
+        if (activeTabId === SELECTED_TAB_ID) {
+            return;
+        }
+        setSelectedIds(getSelectedIds());
+    }, [activeTabId, getSelectedIds, isOpen]);
+    const resetInitialComponentState = useCallback(() => {
+        setIsSaveModalOpen(false);
+        setActiveTabId(ALL_SELECT_OPTION_ID);
+        setFiltersInternalState(createStateObject(filters, "state"));
+        setInitialExternalState(externalState);
+        setSelectedIds([]);
+        setSelectedIds(getSelectedIds());
+    }, [externalState, filters, getSelectedIds]);
+    useEffect(() => {
+        if (isOpen !== prevIsOpenRef.current) {
+            prevIsOpenRef.current = isOpen;
+            isOpen && resetInitialComponentState();
+        }
+    }, [isOpen, resetInitialComponentState]);
+    const handleHidePanel = useCallback((reason, shieldId) => {
+        if (isSaveModalOpen) {
+            return;
+        }
+        if (reason === SidePanelCloseReason.ClickOutside && shieldId === dataShieldId || reason === SidePanelCloseReason.Escape) {
+            onClose();
+            return;
+        }
+    }, [isSaveModalOpen, dataShieldId, onClose]);
+    return _jsxs(Fragment, { children: [_jsx(Shield, { className: "zen-high-level-shield", dataShieldId: dataShieldId, isVisible: isOpen }), createPortal(_jsx(SidePanel, { triggerRef: triggerRef, isOpen: isOpen, label: translate("All Filters"), onHidePanel: handleHidePanel, className: classNames(["zen-side-panel-filters", dark ? "zen-dark" : ""]), onTransitionEnd: handleReadyForFocus, children: _jsxs("div", { className: "zen-side-panel-filters-wrapper", children: [_jsxs("div", { className: "zen-side-panel-filters__header", children: [_jsx("div", { className: "zen-side-panel-filters__title-wrapper", children: _jsx("div", { className: "zen-side-panel-filters__title zen-ellipsis", children: translate("All Filters") }) }), _jsxs("div", { className: "zen-side-panel-filters__header-buttons", children: [onSave && _jsx(Button, { type: "tertiary", ref: saveButtonRef, className: "zen-side-panel-filters__save-button zen-side-panel-filters__header-button", title: translate("Save"), "aria-label": translate("Save"), onClick: toggleSaveModal, children: _jsx(IconDisk, { description: translate("Save"), className: "svgIcon", size: iconDriveClassName ? "huge" : "large" }) }), onPin && _jsx(Button, { type: "tertiary", className: classNames(["zen-side-panel-filters__pin-button", isPinned ? "zen-side-panel-filters__header-button--active" : "", "zen-side-panel-filters__header-button"]), title: translate("Pin"), "aria-label": translate("Pin"), onClick: onPin, children: _jsx(IconPin2, { description: translate("Pin"), className: "svgIcon", size: iconDriveClassName ? "huge" : "large" }) }), _jsx(TextIconButton, { type: "tertiary-black", className: "zen-side-panel-filters__close-button", icon: IconClose, iconSize: "large", onClick: externalMode ? handleExternalModeClose : onClose, iconPosition: ButtonIconPosition.Start, title: translate("Close") })] })] }), _jsx(Tabs, { activeTabId: activeTabId, className: "zen-side-panel-filters__tab-header", onTabChange: onTabChange, tabs: tabOptions }), _jsxs("div", { className: "zen-side-panel-filters__content", children: [_jsx("div", { id: `panel-${ALL_SELECT_OPTION_ID}`, className: classNames(["zen-side-panel-filters__tab-content", activeTabId === ALL_SELECT_OPTION_ID ? "zen-side-panel-filters__tab-content--active" : "zen-side-panel-filters__tab-content--hidden"]), role: "tabpanel", "aria-labelledby": ALL_SELECT_OPTION_ID, children: activeTabId === ALL_SELECT_OPTION_ID ? tabsContent : null }), _jsx("div", { id: `panel-${SELECTED_TAB_ID}`, className: classNames(["zen-side-panel-filters__tab-content", activeTabId === SELECTED_TAB_ID ? "zen-side-panel-filters__tab-content--active" : "zen-side-panel-filters__tab-content--hidden"]), role: "tabpanel", "aria-labelledby": SELECTED_TAB_ID, children: activeTabId === SELECTED_TAB_ID ? selectedTabsContent : null })] }), _jsx("div", { className: classNames(["zen-side-panel-filters__footer", isMobile ? "zen-side-panel-filters__footer--mobile" : "", isLongTextLanguages && !isMobile ? "zen-side-panel-filters__footer--long-text" : ""]), children: isMobile ? _jsxs(FooterButtons, { children: [_jsx(Button, { className: "zen-side-panel-filters__apply-button", onClick: handleApplyClick, type: "primary", disabled: errorItems.size > 0, children: translate("Apply") }), _jsx(Button, { className: "zen-side-panel-filters__cancel-button", type: "secondary", onClick: handleCancelClick, children: translate("Cancel") }), _jsx(Button, { className: "zen-side-panel-filters__clear-button", onClick: handleClearClick, type: "tertiary", children: translate("Reset") })] }) : _jsxs(_Fragment, { children: [_jsx("div", { className: "zen-side-panel-filters__footer-section", children: _jsx(Button, { type: "tertiary", className: "zen-side-panel-filters__clear-button", onClick: handleClearClick, children: translate("Reset") }) }), _jsxs("div", { className: "zen-side-panel-filters__footer-section", children: [_jsx(Button, { className: "zen-side-panel-filters__cancel-button", type: "secondary", onClick: handleCancelClick, children: translate("Cancel") }), _jsx(Button, { className: "zen-side-panel-filters__apply-button zen-side-panel-filters__apply-button--desktop", onClick: handleApplyClick, type: "primary", disabled: errorItems.size > 0, children: translate("Apply") })] })] }) })] }) }), (_a = document.fullscreenElement) !== null && _a !== void 0 ? _a : document.body), _jsx(FiltersSaveModal, { className: CUSTOM_POPUP_COMPONENT_CLASSNAME, isOpen: isSaveModalOpen, onClose: toggleSaveModal, onSave: handleSaveFilters })] });
+};