@geotab/zenith 3.0.1 → 3.1.0-beta.0

package/dist/filters/filters.js

@@ -7,6 +7,7 @@ exports.Filters = exports.FiltersDisplayName = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 /* eslint-disable @typescript-eslint/no-explicit-any */
 const react_1 = require("react");
+const react_dom_1 = require("react-dom");
 const headerHelpers_1 = require("../header/headerHelpers");
 const react_2 = __importDefault(require("react"));
 const filtersSelect_1 = require("./components/filtersSelect");
@@ -22,7 +23,6 @@ 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");
@@ -31,20 +31,34 @@ 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");
+const filtersSidePanel_1 = require("./components/filtersSidePanel");
+const filtersDateInput_1 = require("./components/filtersDateInput");
+const useMobile_1 = require("../commonHelpers/hooks/useMobile");
+const iconChevronTopSmall_1 = require("../icons/iconChevronTopSmall");
+const focusableSelector_1 = require("../utils/focusableSelector");
 exports.FiltersDisplayName = "Filters";
+/**
+ * @beta This component is currently in beta.
+ */
 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 isMobile = (0, useMobile_1.useMobile)();
+    const [isSidePanelOpen, setIsSidePanelOpen] = (0, react_1.useState)(false);
     const triggerRef = react_2.default.useRef(null);
+    const sidePanelTriggerRef = react_2.default.useRef(null);
+    const searchPopupTriggerRef = react_2.default.useRef(null);
+    const searchListRef = react_2.default.useRef(null);
+    const selectListRef = 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 searchOnlyOneType = (0, react_1.useMemo)(() => searchTypesArray.length === 1 ? searchTypesArray[0].id : undefined, [searchTypesArray]);
     const searchTypesMap = (0, react_1.useMemo)(() => {
         const map = new Map();
         searchTypesArray.forEach(el => {
@@ -88,19 +102,19 @@ const Filters = ({ className, children, isPinned, onPinChange, keyword, setKeywo
         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(", "),
+                .map(el => searchTypesMap.get(el.type) || ""))).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]);
+        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]);
     (0, react_1.useEffect)(() => {
         if (!isOpen && prevIsOpenRef.current) {
             prevIsOpenRef.current = false;
@@ -111,31 +125,53 @@ const Filters = ({ className, children, isPinned, onPinChange, keyword, setKeywo
         }
     }, [isOpen, isRecentSearchesMode, handleSaveRecentSearch]);
     const selectState = (0, react_1.useMemo)(() => Object.keys(searchType), [searchType]);
+    const onClearSearchSelection = (0, react_1.useCallback)(() => {
+        setSearchSelection && setSearchSelection([]);
+    }, [setSearchSelection]);
     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);
+        const currentItem = searchOnlyOneType ? searchSelection.find(el => el.id === item.id)
+            : searchSelection.find(el => el.id === item.id && (el.type || filtersSearchList_1.NO_TYPED_SEARCH_ITEM) === typeKey);
         if (currentItem) {
-            const newValue = searchSelection.filter(el => !(el.id === currentItem.id && (el.type || filtersSearchList_1.NO_TYPED_SEARCH_ITEM) === typeKey));
+            const newValue = searchOnlyOneType ? searchSelection.filter(el => el.id !== currentItem.id)
+                : searchSelection.filter(el => !(el.id === currentItem.id && (el.type || filtersSearchList_1.NO_TYPED_SEARCH_ITEM) === typeKey));
+            currentItem.id === filtersSearchList_1.KEYWORD_ID && setKeyword("");
             setSearchSelection(newValue);
         }
         else {
-            setSearchSelection([...searchSelection, item]);
+            setSearchSelection([...searchSelection, Object.assign(Object.assign({}, item), { type: item.type || searchOnlyOneType || filtersSearchList_1.NO_TYPED_SEARCH_ITEM })]);
         }
-    }, [searchSelection, setSearchSelection]);
+    }, [searchOnlyOneType, searchSelection, setKeyword, setSearchSelection]);
     const handleTriggerClick = (0, react_1.useCallback)(() => {
-        setIsOpen(prevState => !prevState);
+        if (!document.startViewTransition) {
+            setIsOpen(prevState => !prevState);
+            return;
+        }
+        document.startViewTransition(() => {
+            (0, react_dom_1.flushSync)(() => {
+                setIsOpen(prevState => !prevState);
+            });
+        });
     }, []);
-    const handleModalState = (0, react_1.useCallback)(() => {
-        onToggleView && onToggleView(!isModalOpen);
-        setIsModalOpen(val => !val);
-    }, [isModalOpen, onToggleView]);
+    const handleViewState = (0, react_1.useCallback)(() => {
+        onToggleView && onToggleView(!isSidePanelOpen);
+        setIsSidePanelOpen(val => !val);
+    }, [isSidePanelOpen, onToggleView]);
     const handleOpenChange = (0, react_1.useCallback)((open) => {
-        setIsOpen(open);
+        if (!document.startViewTransition) {
+            setIsOpen(open);
+            return;
+        }
+        document.startViewTransition(() => {
+            (0, react_dom_1.flushSync)(() => {
+                setIsOpen(open);
+            });
+        });
     }, []);
-    const handleModalApply = (0, react_1.useCallback)((state) => {
+    const handleSidePanelApply = (0, react_1.useCallback)((state) => {
         filters.forEach((filter) => {
             const filterProps = filter.props;
             const newState = state[filterProps.id];
@@ -160,11 +196,29 @@ const Filters = ({ className, children, isPinned, onPinChange, keyword, setKeywo
             setSearchSelection === null || setSearchSelection === void 0 ? void 0 : setSearchSelection([...newSearchSelection]);
         }
         newItemSearch && setKeyword(newItemSearch.name);
-        setIsOpen(false);
-    }, [setKeyword, setSearchSelection]);
+        handleOpenChange(false);
+    }, [handleOpenChange, setKeyword, setSearchSelection]);
     const handlePinChange = (0, react_1.useCallback)(() => {
         onPinChange && onPinChange(!isPinned);
     }, [onPinChange, isPinned]);
+    const handleSearchKeyDown = (0, react_1.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(focusableSelector_1.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(focusableSelector_1.FOCUSABLE_SELECTOR);
+            firstItem === null || firstItem === void 0 ? void 0 : firstItem.focus();
+        }
+    }, [isOpen, isRecentSearchesMode, handleSaveRecentSearch, handleTriggerClick]);
     const getIconByType = (0, react_1.useCallback)((type) => {
         if (!type) {
             return iconFilter_1.IconFilter;
@@ -172,24 +226,32 @@ const Filters = ({ className, children, isPinned, onPinChange, keyword, setKeywo
         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 : undefined, 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 combinedData = (0, filtersHelper_1.useCombineData)(searchTypesArray);
+    const memoizedSelect = (0, react_1.useMemo)(() => (0, jsx_runtime_1.jsx)(filtersSelect_1.FiltersSelect, { value: searchType, selectListRef: selectListRef, onChange: setSearchType, items: searchTypesToSelect }), [searchType, searchTypesToSelect, setSearchType]);
+    const handleSearchKeywordChange = (0, react_1.useCallback)((newKeyword) => {
+        setKeyword(newKeyword);
+        !isOpen && handleOpenChange(true);
+    }, [setKeyword, isOpen, handleOpenChange]);
+    const memoizedSearch = (0, react_1.useMemo)(() => (0, jsx_runtime_1.jsx)(filtersSearch_1.FiltersSearch, { id: `filtersSearch_${uniqueKey}`, ref: searchTriggerRef, name: translate("Search page"), value: keyword, onSearchKeyDown: handleSearchKeyDown, onOpenPopup: isOpen ? undefined : handleTriggerClick, onChange: handleSearchKeywordChange, handleRemove: onSearchItemClick, searchSelection: searchSelection, className: "zen-filters__search-with-pills" }), [uniqueKey, translate, keyword, handleSearchKeyDown, isOpen, handleTriggerClick, handleSearchKeywordChange, onSearchItemClick, searchSelection]);
+    const memoizedSearchPopup = (0, react_1.useMemo)(() => (0, jsx_runtime_1.jsx)(filtersSearch_1.FiltersSearch, { id: `filtersSearch_${uniqueKey}_popup`, 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 = (0, react_1.useMemo)(() => !isOpen ? null :
+        (0, jsx_runtime_1.jsx)(filtersSearchList_1.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 = (0, react_1.useMemo)(() => (0, filtersSelect_1.getAllOption)(translate), [translate]);
+    const selectTriggerPopup = (0, react_1.useMemo)(() => (0, jsx_runtime_1.jsx)(textIconButton_1.TextIconButton, { className: "zen-filters__select-trigger", iconClasses: "zen-filters__select-trigger-icon", contentClasses: "zen-filters__select-trigger-content", title: translate("Close setting conditions popup"), onClick: handleTriggerClick, icon: iconChevronTopSmall_1.IconChevronTopSmall, iconPosition: "end", children: translate("Search by") }), [handleTriggerClick, translate]);
+    // added onMouseDown to prevent focus
     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]);
+        return isMobile ? null : (0, jsx_runtime_1.jsx)(textIconButton_1.TextIconButton, { tabIndex: -1, onMouseDown: e => e.preventDefault(), className: "zen-filters__select-trigger", iconClasses: "zen-filters__select-trigger-icon", contentClasses: "zen-filters__select-trigger-content", title: translate("Open setting conditions popup"), onClick: handleTriggerClick, icon: iconChevronDownSmall_1.IconChevronDownSmall, iconPosition: "end", children: selectState[0] === filtersSelect_1.ALL_SELECT_OPTION_ID ? allOption.name :
+                (_a = searchTypesArray.find((item) => item.id === selectState[0])) === null || _a === void 0 ? void 0 : _a.name });
+    }, [translate, handleTriggerClick, selectState, allOption.name, searchTypesArray, isMobile]);
+    const memoizedPopup = (0, react_1.useMemo)(() => (0, jsx_runtime_1.jsx)(controlledPopup_1.ControlledPopup, { paddingY: -34, isOpen: isOpen, className: (0, classNames_1.classNames)(["zen-filters-popup"]), onOpenChange: handleOpenChange, useTrapFocusWithTrigger: "on", 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: [selectTriggerPopup, memoizedSelect] }), (0, jsx_runtime_1.jsxs)("div", { className: "zen-filters-popup__right-panel", children: [memoizedSearchPopup, memoizedSearchList] })] }) }), [isOpen, handleOpenChange, translate, selectTriggerPopup, memoizedSelect, memoizedSearchPopup, memoizedSearchList]);
     const filtersForRender = (0, react_1.useMemo)(() => filters.filter(el => {
         const elProps = el.props;
         return typeof elProps.visible === "boolean" ? elProps.visible
             : elProps.visible === undefined ? false : elProps.visible(Array.from(selectState), undefined);
     }), [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
+    // 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 = (0, react_1.useMemo)(() => {
         const stateObj = (0, filtersHelper_1.createStateObject)(filters, "state");
         return filters.filter(el => {
@@ -199,9 +261,9 @@ const Filters = ({ className, children, isPinned, onPinChange, keyword, setKeywo
         });
     }, [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 hasFilters = filtersForCalculation.length > 0;
+    const memoizedFiltersContainer = (0, react_1.useMemo)(() => hasFilters ? (0, jsx_runtime_1.jsx)(filtersContainer_1.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 = (0, react_1.useMemo)(() => (0, jsx_runtime_1.jsx)(filtersSidePanel_1.FiltersSidePanel, { isOpen: isSidePanelOpen, onApply: handleSidePanelApply, onClose: handleViewState, onPin: isPinMode ? handlePinChange : undefined, isPinned: isPinMode ? isPinned : undefined, filters: filters, externalState: allFiltersState, setExternalState: setAllFiltersState, triggerRef: sidePanelTriggerRef }), [isSidePanelOpen, handleSidePanelApply, handleViewState, handlePinChange, isPinned, isPinMode, filters, allFiltersState, setAllFiltersState, sidePanelTriggerRef]);
     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)(() => {
@@ -243,11 +305,12 @@ const Filters = ({ className, children, isPinned, onPinChange, keyword, setKeywo
             });
         }
     }, [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] });
+    return (0, jsx_runtime_1.jsxs)("div", { className: (0, classNames_1.classNames)(["zen-filters", className || ""]), children: [(0, jsx_runtime_1.jsxs)("div", { className: (0, classNames_1.classNames)(["zen-filters__main-row", isOpen ? "" : "zen-filters__main-row--initial"]), ref: triggerRef, role: "combobox", "aria-label": translate("Open setting conditions popup"), children: [selectTrigger, memoizedSearch] }), (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, (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: memoizedSidePanel }) })] });
 };
 exports.Filters = Filters;
 exports.Filters.Chip = filtersChip_1.FiltersChip;
 exports.Filters.DateRange = filtersDateRange_1.FiltersDateRange;
+exports.Filters.DateInput = filtersDateInput_1.FiltersDateInput;
 exports.Filters.Dropdown = filtersDropdown_1.FiltersDropdown;
 exports.Filters.Groups = filtersGroups_1.FiltersGroups;
 exports.Filters.Range = filtersRange_1.FiltersRange;

package/dist/filters/filtersHelper.d.ts

@@ -1,8 +1,8 @@
 import { ReactElement } from "react";
 import React from "react";
 import { TFiltersDropdownAllStates } from "./components/filtersDropdown";
-import { IFiltersSearchTypesItem } from "./filters";
-import { ISearchItem } from "./components/filtersSearchList";
+import { IFiltersSearchTypesItem, ISavedFilters } from "./filters";
+import { IRecentSearchItem, 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)[];
@@ -38,3 +38,5 @@ export declare const useCombineData: (searchTypes: IFiltersSearchTypesItem[]) =>
     error: Error | null;
 };
 export declare function getArrayOfElements<T>(elem: T | T[] | undefined): T[];
+export declare function getSavedFiltersFromStorage(key: string): Promise<ISavedFilters[]>;
+export declare function getRecentSearchesFromStorage(key: string): IRecentSearchItem[];

package/dist/filters/filtersHelper.js

@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getArrayOfElements = exports.useCombineData = exports.MAX_TOTAL_RESULTS = exports.serializeEntriesToId = exports.getTotalChangedNumber = exports.getNumberOfChangedFilters = exports.createStateObject = exports.getFiltersState = exports.getChildren = exports.prepareDefaultDropdownState = exports.getDropdownStateType = exports.stabilizeChildrenWithId = exports.createPropsHash = exports.createStateHash = void 0;
+exports.getRecentSearchesFromStorage = exports.getSavedFiltersFromStorage = exports.getArrayOfElements = exports.useCombineData = exports.MAX_TOTAL_RESULTS = exports.serializeEntriesToId = exports.getTotalChangedNumber = exports.getNumberOfChangedFilters = exports.createStateObject = exports.getFiltersState = exports.getChildren = exports.prepareDefaultDropdownState = exports.getDropdownStateType = exports.stabilizeChildrenWithId = exports.createPropsHash = exports.createStateHash = void 0;
 /* eslint-disable @typescript-eslint/no-explicit-any */
 const react_1 = require("react");
 const filtersGroups_1 = require("./components/filtersGroups");
@@ -230,3 +230,42 @@ function getArrayOfElements(elem) {
     return Array.isArray(elem) ? elem : [elem];
 }
 exports.getArrayOfElements = getArrayOfElements;
+const dateReviver = (_, value) => {
+    const isIsoDateString = typeof value === "string" && /^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}/.test(value);
+    if (isIsoDateString) {
+        return new Date(value);
+    }
+    return value;
+};
+const getParsedFilters = (storageKey) => {
+    const storedData = localStorage.getItem(storageKey);
+    if (!storedData) {
+        return [];
+    }
+    try {
+        return JSON.parse(storedData, dateReviver);
+    }
+    catch (e) {
+        console.error(`Error parsing saved filters for key "${storageKey}"`, e);
+        return [];
+    }
+};
+async function getSavedFiltersFromStorage(key) {
+    const result = getParsedFilters(key);
+    return Promise.resolve(result);
+}
+exports.getSavedFiltersFromStorage = getSavedFiltersFromStorage;
+function getRecentSearchesFromStorage(key) {
+    const storedData = localStorage.getItem(key);
+    if (!storedData) {
+        return [];
+    }
+    try {
+        return JSON.parse(storedData);
+    }
+    catch (e) {
+        console.error(`Error parsing recent searches for key "${key}"`, e);
+        return [];
+    }
+}
+exports.getRecentSearchesFromStorage = getRecentSearchesFromStorage;

package/dist/filters/filtersHooks.d.ts

@@ -1,6 +1,8 @@
 /// <reference types="react" />
 import { IFiltersSearchType } from "./components/filtersSelect";
 import { ISearchItem } from "./components/filtersSearchList";
+import { IFetchState, IFiltersSearchTypesSubItem } from "./filters";
+import { IIcon } from "../icons/icon";
 export declare const useFiltersSearch: (keywordDebounceTime?: number) => {
     keyword: string;
     setKeyword: import("react").Dispatch<import("react").SetStateAction<string>>;
@@ -13,7 +15,15 @@ export declare const usePinnedFilters: () => {
     isPinned: boolean;
     onPinChange: import("react").Dispatch<import("react").SetStateAction<boolean>>;
 };
-export declare const useFiltersSelection: () => {
+export declare const useFiltersSelection: (setArgs?: (selection: ISearchItem[]) => void) => {
     searchSelection: ISearchItem[];
-    setSearchSelection: import("react").Dispatch<import("react").SetStateAction<ISearchItem[]>>;
+    setSearchSelection: (selection: ISearchItem[]) => void;
+};
+export declare const useSearchData: <T>(id: string, name: string, data: IFetchState<T>, icon?: React.FC<IIcon>, subItems?: IFiltersSearchTypesSubItem[], relevance?: number) => {
+    id: string;
+    name: string;
+    data: IFetchState<T>;
+    icon: import("react").FC<IIcon> | undefined;
+    subItems: IFiltersSearchTypesSubItem[] | undefined;
+    relevance: number | undefined;
 };

package/dist/filters/filtersHooks.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useFiltersSelection = exports.usePinnedFilters = exports.useFiltersSearch = void 0;
+exports.useSearchData = exports.useFiltersSelection = exports.usePinnedFilters = exports.useFiltersSearch = void 0;
 const react_1 = require("react");
 const filtersSelect_1 = require("./components/filtersSelect");
 const useDebouncedMemo_1 = require("../commonHelpers/hooks/useDebouncedMemo");
@@ -18,8 +18,26 @@ const usePinnedFilters = () => {
     return pinnedFilters;
 };
 exports.usePinnedFilters = usePinnedFilters;
-const useFiltersSelection = () => {
+const useFiltersSelection = (setArgs) => {
     const [searchSelection, setSearchSelection] = (0, react_1.useState)([]);
-    return { searchSelection, setSearchSelection };
+    const handleSelectionChange = (0, react_1.useCallback)((selection) => {
+        setSearchSelection(selection);
+        if (setArgs) {
+            setArgs(selection);
+        }
+    }, [setArgs]);
+    return { searchSelection, setSearchSelection: handleSelectionChange };
 };
 exports.useFiltersSelection = useFiltersSelection;
+const useSearchData = (id, name, data, icon, subItems, relevance) => {
+    const memoizedData = (0, react_1.useMemo)(() => ({
+        id,
+        name,
+        data,
+        icon,
+        subItems,
+        relevance
+    }), [id, name, data, subItems, icon, relevance]);
+    return memoizedData;
+};
+exports.useSearchData = useSearchData;

package/dist/formStepper/formStepper.d.ts

@@ -8,7 +8,7 @@ export interface IFormStepper {
     current: string;
     setCurrent: React.Dispatch<React.SetStateAction<string>>;
     errors?: string[];
-    onStepClicked?: ((id: string) => void) | false;
+    onStepClicked?: ((id: string) => void | boolean) | false;
     className?: string;
     mode?: TFormStepperMode;
 }

package/dist/formStepper/formStepper.js

@@ -26,10 +26,13 @@ const FormStepper = ({ steps, onStepClicked, className = "", current, errors, se
         return steps;
     }, [steps]);
     const onStepClickedHandler = (0, react_1.useCallback)((id) => {
-        setCurrent(id);
         if (!isStepperNonClickable) {
-            onStepClicked === null || onStepClicked === void 0 ? void 0 : onStepClicked(id);
+            const res = onStepClicked === null || onStepClicked === void 0 ? void 0 : onStepClicked(id);
+            if (res === false) {
+                return;
+            }
         }
+        setCurrent(id);
     }, [setCurrent, isStepperNonClickable, onStepClicked]);
     const isCompactMode = mode === "compact" || isMobile;
     const isOptionalStep = isCompactMode && ((_a = adjustedSteps[activeStepIndex]) === null || _a === void 0 ? void 0 : _a.optional);