@geotab/zenith 3.0.1 → 3.1.0

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

@@ -0,0 +1,9 @@
+import React from "react";
+interface IFiltersSidePanelChip {
+    currentState: boolean;
+    handleStateChange: (newState: boolean) => void;
+    children: string;
+    id: string;
+}
+export declare const FiltersSidePanelChip: React.FC<IFiltersSidePanelChip>;
+export {};

package/esm/filters/components/filtersSidePanelChip.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useCallback } from "react";
+import { Checkbox } from "../../checkbox/checkbox";
+export const FiltersSidePanelChip = ({ currentState, handleStateChange, id, children }) => {
+    const handleChange = useCallback((e) => {
+        handleStateChange(e.target.checked);
+    }, [handleStateChange]);
+    return _jsx(Checkbox, { fullWidth: true, id: id, onChange: handleChange, checked: currentState, children: children });
+};

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

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import { TFiltersDropdownAllStates } from "./filtersDropdown";
+import { IFiltersSidePanelComponentProps } from "./filtersSidePanelItem";
+type IFiltersSidePanelDropdown = IFiltersSidePanelComponentProps<TFiltersDropdownAllStates>;
+export declare const FiltersSidePanelDropdown: React.FC<IFiltersSidePanelDropdown>;
+export {};

package/esm/filters/components/filtersSidePanelDropdown.js

@@ -0,0 +1,81 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { classNames } from "../../commonHelpers/classNames/classNames";
+import { Dropdown } from "../../dropdown/dropdown";
+import { getDropdownStateType, prepareDefaultDropdownState } from "../filtersHelper";
+import { FiltersChip } from "./filtersChip";
+import { Skeleton } from "../../skeleton/skeleton";
+import { sortDropdownItemArray } from "../../dropdown/dropdownHelper";
+import { RadioGroup } from "../../radioGroup/radioGroup";
+import { getGroupDescription } from "../../groupsFilter/groupsHelper";
+import { useLanguage } from "../../utils/localization/useLanguage";
+import { SkeletonList } from "../../skeletonList/skeletonList";
+export const FiltersSidePanelDropdown = ({ elemProps, currentState, handleStateChange }) => {
+    const simpleViewLimit = 7;
+    const _a = elemProps, { id, name, state: _globalState, onChange: _globalOnChange, defaultState, fetchState, dataItems, isLoading, classNamePopup } = _a, otherProps = __rest(_a, ["id", "name", "state", "onChange", "defaultState", "fetchState", "dataItems", "isLoading", "classNamePopup"]);
+    const dropdownDataRef = useRef(null);
+    const { translate } = useLanguage();
+    const dropdownStateType = useMemo(() => getDropdownStateType(currentState), [currentState]);
+    const isMultiselect = useMemo(() => dropdownStateType === "fullSelection" || dropdownStateType === "fullSelectionWithCheckbox" ? true
+        : (elemProps.multiselect === undefined ? true : elemProps.multiselect), [dropdownStateType, elemProps]);
+    const [componentType, setComponentType] = useState(dropdownStateType !== "base" ? "popup" : undefined);
+    const sortFn = useMemo(() => otherProps.sortFn, [otherProps]);
+    useEffect(() => {
+        const dropdownData = dataItems && dataItems.length ? dataItems : (fetchState === null || fetchState === void 0 ? void 0 : fetchState.data) || [];
+        if (dataItems && dataItems.length || fetchState && fetchState.data && !fetchState.isLoading && !componentType && dropdownDataRef.current === null) {
+            setComponentType(dropdownData.length > simpleViewLimit ? "popup" : (isMultiselect ? "chip" : "radio"));
+            dropdownDataRef.current = sortDropdownItemArray(dropdownData, sortFn);
+        }
+        else if ((componentType === "chip" || componentType === "radio") && dropdownData.length > simpleViewLimit) {
+            setComponentType("popup");
+        }
+    }, [componentType, fetchState, dataItems, isMultiselect, sortFn]);
+    const prepareValue = (value) => {
+        if (Array.isArray(value)) {
+            return value.map((el) => el.id);
+        }
+        return Object.assign(Object.assign({}, value), { selected: value.selected.map((el) => el.id) });
+    };
+    const preparedDefaultState = defaultState !== undefined ? defaultState : prepareDefaultDropdownState(dropdownStateType);
+    const dropdownProps = Object.assign(Object.assign({}, otherProps), { id: `${id}-side-panel`, fetchState: fetchState, dataItems: dataItems, isLoading: dataItems !== undefined ? isLoading : undefined, classNamePopup: classNames(["zen-side-panel-filters__item-popup", classNamePopup || ""]), multiselect: isMultiselect, selectAllButton: dropdownStateType === "fullSelection" || dropdownStateType === "fullSelectionWithCheckbox" ? true : otherProps.selectAllButton, fullWidthTriggerButton: true, errorHandler: (() => { }), placeholder: otherProps.placeholder || name, showSelection: true, value: currentState, onChange: (newValue) => {
+            const preparedValue = prepareValue(newValue);
+            handleStateChange(preparedValue);
+        }, defaultValue: preparedDefaultState, chip: false });
+    const handleChipChange = useCallback((itemId) => (value) => {
+        const newValue = () => value ? [...currentState, itemId] : currentState.filter(elId => elId !== itemId);
+        handleStateChange(newValue());
+    }, [currentState, handleStateChange]);
+    const handleRadioChange = useCallback((e) => {
+        const value = e.target.checked;
+        const itemId = e.target.value;
+        const newValue = () => value ? [itemId] : currentState.filter(elId => elId !== itemId);
+        handleStateChange(newValue());
+    }, [currentState, handleStateChange]);
+    if (!componentType && (dataItems !== undefined && isLoading || fetchState && fetchState.isLoading)) {
+        return isMultiselect ? _jsx(Skeleton, { width: 328, height: 32 }) : _jsx(SkeletonList, { className: "zen-side-panel-filters__dropdown-skeleton", size: "small" });
+    }
+    if (componentType === "chip" && dropdownDataRef.current) {
+        const dropdownChips = dropdownDataRef.current.map((item) => (_jsx(FiltersChip, { id: `${id}-side-panel-chip-${item.id}`, name: item.name || item.id, state: currentState.includes(item.id), onChange: handleChipChange(item.id), icon: elemProps.chipIcon }, `${id}-side-panel-chip-${item.id}-${item.name || ""}`)));
+        return _jsx("div", { className: classNames(["zen-side-panel-filters__dropdown-item-chips-container"]), children: dropdownChips });
+    }
+    if (componentType === "radio" && dropdownDataRef.current) {
+        const dropdownRadioGroup = _jsx(RadioGroup, { direction: "vertical", size: "small", id: `${id}-side-panel-dropdown-radio-group`, className: "zen-side-panel-radio-group__filter-item", items: dropdownDataRef.current.map((item) => ({
+                id: `${id}_radio-group-item_${item.id}`,
+                value: item.id,
+                children: _jsx("span", { children: getGroupDescription(item, translate) })
+            })), fullWidth: true, name: name, onChange: handleRadioChange, value: currentState[0] });
+        return _jsx("div", { className: classNames(["zen-side-panel-filters__dropdown-item-radio-group-container"]), children: dropdownRadioGroup });
+    }
+    return _jsx(Dropdown, Object.assign({}, dropdownProps));
+};

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

@@ -0,0 +1,16 @@
+import { ReactElement } from "react";
+import { TFiltersComponentsItemState, TFiltersComponentsProps } from "./filtersItem";
+import "./filtersSidePanelItem.less";
+interface IFiltersSidePanelItem {
+    item: ReactElement<TFiltersComponentsProps>;
+    itemState: TFiltersComponentsItemState;
+    changeHandler: (newState: TFiltersComponentsItemState) => void;
+    errorCheck: (isError: boolean) => void;
+}
+export interface IFiltersSidePanelComponentProps<T> {
+    elemProps: TFiltersComponentsProps;
+    currentState: T;
+    handleStateChange: (newState: T) => void;
+}
+export declare const FiltersSidePanelItem: React.FC<IFiltersSidePanelItem>;
+export {};

package/esm/filters/components/filtersSidePanelItem.js

@@ -0,0 +1,63 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/* eslint-disable complexity */
+import { useCallback, useMemo } from "react";
+import { FiltersChip } from "./filtersChip";
+import { FiltersRange } from "./filtersRange";
+import { classNames } from "../../commonHelpers/classNames/classNames";
+import { FiltersDropdown } from "./filtersDropdown";
+import { FiltersGroups } from "./filtersGroups";
+import { GroupsFilter } from "../../groupsFilter/groupsFilter";
+import { FiltersDateRange } from "./filtersDateRange";
+import { DateRange } from "../../dateRange/dateRange";
+import { FiltersDateInput } from "./filtersDateInput";
+import { DateInput } from "../../dateInput/dateInput";
+import { FiltersSidePanelDropdown } from "./filtersSidePanelDropdown";
+import { FiltersSidePanelChip } from "./filtersSidePanelChip";
+import { useUniqueId } from "../../commonHelpers/useUniqueId";
+import { FiltersSidePanelRange } from "./filtersSidePanelRange";
+export const FiltersSidePanelItem = ({ item, itemState, changeHandler, errorCheck }) => {
+    const labelledId = useUniqueId();
+    const getComponent = useCallback((elem, currentState, handleStateChange) => {
+        const { type, props } = elem;
+        switch (type) {
+            case FiltersChip: {
+                const { id, state: _globalState, name, onChange: _globalOnChange } = props;
+                return _jsx(FiltersSidePanelChip, { id: `${id}-side-panel`, currentState: currentState, handleStateChange: handleStateChange, children: name });
+            }
+            case FiltersRange: {
+                const _a = props, { id, state: _globalState, name, onChange: _globalOnChange, defaultState, className } = _a, otherProps = __rest(_a, ["id", "state", "name", "onChange", "defaultState", "className"]);
+                return _jsx(FiltersSidePanelRange, Object.assign({}, otherProps, { id: `${id}-side-panel`, onChange: handleStateChange, value: currentState, errorCheck: errorCheck, className: classNames(["zen-side-panel-filters__item-element", className || ""]) }));
+            }
+            case FiltersDropdown: {
+                return _jsx(FiltersSidePanelDropdown, { elemProps: props, currentState: currentState, handleStateChange: handleStateChange });
+            }
+            case FiltersGroups: {
+                const _b = props, { id, state: _globalState, onChange: _globalOnChange } = _b, otherProps = __rest(_b, ["id", "state", "onChange"]);
+                return _jsx(GroupsFilter, Object.assign({ initialFilterState: currentState, onChange: handleStateChange }, otherProps, { chip: false, fullSize: true }));
+            }
+            case FiltersDateRange: {
+                const _c = props, { id, state: _globalState, onChange: _globalOnChange, defaultState, allowUnsetValue, className, classNamePopup } = _c, otherProps = __rest(_c, ["id", "state", "onChange", "defaultState", "allowUnsetValue", "className", "classNamePopup"]);
+                return allowUnsetValue ? _jsx(DateRange, Object.assign({}, otherProps, { id: `${id}-side-panel`, classNamePopup: classNames([classNamePopup || "", "zen-side-panel-filters__date-popup--full-width"]), className: classNames(["zen-side-panel-filters__item-element", "zen-side-panel-filters__item-element--centred", className || ""]), value: currentState, onChange: handleStateChange, defaultValue: defaultState, allowUnsetValue: true, chip: false })) : _jsx(DateRange, Object.assign({}, otherProps, { id: `${id}-side-panel`, classNamePopup: classNames([classNamePopup || "", "zen-side-panel-filters__date-popup--full-width"]), className: classNames(["zen-side-panel-filters__item-element", "zen-side-panel-filters__item-element--centred", className || ""]), value: currentState, onChange: handleStateChange, defaultValue: defaultState, allowUnsetValue: false, chip: false }));
+            }
+            case FiltersDateInput: {
+                const _d = props, { id, state: _globalState, name, onChange: _globalOnChange, defaultState, className, classNamePopup } = _d, otherProps = __rest(_d, ["id", "state", "name", "onChange", "defaultState", "className", "classNamePopup"]);
+                return _jsx(DateInput, Object.assign({}, otherProps, { id: `${id}-side-panel`, classNamePopup: classNames([classNamePopup || "", "zen-side-panel-filters__date-popup--full-width"]), className: classNames(["zen-side-panel-filters__item-element", "zen-side-panel-filters__item-element--centred", className || ""]), buttonLabel: name, value: currentState, onChange: handleStateChange, defaultValue: defaultState, chip: false }));
+            }
+            default:
+                return null;
+        }
+    }, [errorCheck]);
+    const memoizedItem = useMemo(() => getComponent(item, itemState, changeHandler), [getComponent, item, itemState, changeHandler]);
+    return (_jsxs("div", { className: "zen-side-panel-filters__item", role: "group", "aria-labelledby": labelledId, children: [_jsx("div", { className: "zen-side-panel-filters__item-label", id: labelledId, children: item.props.name }), _jsx("div", { children: memoizedItem })] }));
+};

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

@@ -0,0 +1,6 @@
+import { IFiltersBarSidePanelRange } from "../../filtersBar/filtersBarSidePanel/components/filtersBarSidePanelRange/filtersBarSidePanelRange";
+interface IFiltersSidePanelRangeProps extends IFiltersBarSidePanelRange {
+    errorCheck: (isError: boolean) => void;
+}
+export declare const FiltersSidePanelRange: ({ errorCheck, ...otherProps }: IFiltersSidePanelRangeProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/esm/filters/components/filtersSidePanelRange.js

@@ -0,0 +1,24 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useMemo } from "react";
+import { FiltersBarSidePanelRange } from "../../filtersBar/filtersBarSidePanel/components/filtersBarSidePanelRange/filtersBarSidePanelRange";
+import { checkErrorType } from "../../range/rangeHelper";
+export const FiltersSidePanelRange = (_a) => {
+    var { errorCheck } = _a, otherProps = __rest(_a, ["errorCheck"]);
+    const { value } = otherProps;
+    const hasError = useMemo(() => checkErrorType(value.min, value.max, otherProps.fullBounded, otherProps.allowEqualMinMax, otherProps.min, otherProps.max) !== undefined, [value, otherProps.fullBounded, otherProps.allowEqualMinMax, otherProps.min, otherProps.max]);
+    useEffect(() => {
+        errorCheck(hasError);
+    }, [errorCheck, hasError]);
+    return _jsx(FiltersBarSidePanelRange, Object.assign({}, otherProps));
+};

package/esm/filters/filters.d.ts

@@ -10,6 +10,7 @@ import { IFiltersChip } from "./components/filtersChip";
 import { FiltersDateRange } from "./components/filtersDateRange";
 import { IRecentSearchItem, IRecentSearchItemWithoutId, ISearchItem } from "./components/filtersSearchList";
 import { IIcon } from "../icons/icon";
+import { IFiltersDateInput } from "./components/filtersDateInput";
 export interface ISavedFilters {
     id: string;
     name: string;
@@ -91,9 +92,13 @@ export declare const FiltersDisplayName = "Filters";
 interface IFiltersComponents {
     Chip: React.FC<IFiltersChip>;
     DateRange: typeof FiltersDateRange;
+    DateInput: React.FC<IFiltersDateInput>;
     Dropdown: React.FC<IFiltersDropdown<TFiltersDropdownAllStates>>;
     Groups: React.FC<IFiltersGroups>;
     Range: React.FC<IFiltersRange>;
 }
+/**
+ * @beta This component is currently in beta.
+ */
 export declare const Filters: React.FC<IFilters> & IFiltersComponents;
 export {};

package/esm/filters/filters.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import { useCallback, useEffect, useMemo, useState } from "react";
+import { flushSync } from "react-dom";
 import { getArrayOfChildren } from "../header/headerHelpers";
 import React from "react";
 import { ALL_SELECT_OPTION_ID, FiltersSelect, getAllOption } from "./components/filtersSelect";
@@ -16,7 +17,6 @@ import { FiltersGroups } from "./components/filtersGroups";
 import { FiltersRange } from "./components/filtersRange";
 import { FiltersChip } from "./components/filtersChip";
 import { FiltersDateRange } from "./components/filtersDateRange";
-import { FiltersModal } from "./components/filtersModal";
 import { FiltersSearchList, KEYWORD_ID, KEYWORD_TYPE, NO_TYPED_SEARCH_ITEM } from "./components/filtersSearchList";
 import { ChipStatusProvider } from "../chip/chipStatusProvider";
 import { FiltersSavedItemsProvider } from "./components/filtersSavedItemsProvider";
@@ -25,20 +25,34 @@ import { FiltersSearch } from "./components/filtersSearch";
 import { useUniqueId } from "../commonHelpers/useUniqueId";
 import { isElementsEqual } from "../utils/compareElementsUtils/isElementsEqual";
 import { IconFilter } from "../icons/iconFilter";
+import { FiltersSidePanel } from "./components/filtersSidePanel";
+import { FiltersDateInput } from "./components/filtersDateInput";
+import { useMobile } from "../commonHelpers/hooks/useMobile";
+import { IconChevronTopSmall } from "../icons/iconChevronTopSmall";
+import { FOCUSABLE_SELECTOR } from "../utils/focusableSelector";
 export const FiltersDisplayName = "Filters";
+/**
+ * @beta This component is currently in beta.
+ */
 export const Filters = ({ className, children, isPinned, onPinChange, keyword, setKeyword, searchTypes, searchType, setSearchType, allFiltersState, setAllFiltersState, onToggleView, searchSelection, setSearchSelection, recentSearches, onRemoveRecentSearchItem, onSaveRecentSearch, savedFilters, onRemoveSavedFilter, onSaveFilter }) => {
     const [isOpen, setIsOpen] = useState(false);
     const isSavedFiltersMode = Boolean(savedFilters && onRemoveSavedFilter && onSaveFilter);
     const isPinMode = Boolean(typeof isPinned === "boolean" && onPinChange);
     const isRecentSearchesMode = Boolean(recentSearches && onRemoveRecentSearchItem && onSaveRecentSearch);
     const uniqueKey = useUniqueId();
-    const [isModalOpen, setIsModalOpen] = useState(false);
+    const isMobile = useMobile();
+    const [isSidePanelOpen, setIsSidePanelOpen] = useState(false);
     const triggerRef = React.useRef(null);
+    const sidePanelTriggerRef = React.useRef(null);
+    const searchPopupTriggerRef = React.useRef(null);
+    const searchListRef = React.useRef(null);
+    const selectListRef = React.useRef(null);
     const searchTriggerRef = React.useRef(null);
     const prevIsOpenRef = React.useRef(isOpen);
     const [savedFiltersStates, setSavedFiltersStates] = useState(new Map());
     const { translate } = useLanguage();
     const searchTypesArray = useMemo(() => getArrayOfElements(searchTypes), [searchTypes]);
+    const searchOnlyOneType = useMemo(() => searchTypesArray.length === 1 ? searchTypesArray[0].id : undefined, [searchTypesArray]);
     const searchTypesMap = useMemo(() => {
         const map = new Map();
         searchTypesArray.forEach(el => {
@@ -82,19 +96,19 @@ export const Filters = ({ className, children, isPinned, onPinChange, keyword, s
         const newRecentSearchName = newRecentSearchNamesArr.join(", ");
         const newRecentSearch = { name: newRecentSearchName, type: isTyped ? preparedItemsArray[0].type : NO_TYPED_SEARCH_ITEM,
             description: Array.from(new Set(entries.filter(el => el.type && el.type !== NO_TYPED_SEARCH_ITEM && el.type !== KEYWORD_TYPE)
-                .map(el => searchTypesMap.get(el.type) || el))).join(", "),
+                .map(el => searchTypesMap.get(el.type) || ""))).join(", "),
             itemsArray: [...preparedItemsArray] };
         onSaveRecentSearch(Object.assign({}, newRecentSearch));
     }, [onSaveRecentSearch, searchSelection, searchTypesMap]);
-    const handleSearchFocus = useCallback(() => {
-        if (!isOpen) {
-            setIsOpen(true);
-        }
-    }, [isOpen]);
     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]);
     useEffect(() => {
         if (!isOpen && prevIsOpenRef.current) {
             prevIsOpenRef.current = false;
@@ -105,31 +119,53 @@ export const Filters = ({ className, children, isPinned, onPinChange, keyword, s
         }
     }, [isOpen, isRecentSearchesMode, handleSaveRecentSearch]);
     const selectState = useMemo(() => Object.keys(searchType), [searchType]);
+    const onClearSearchSelection = useCallback(() => {
+        setSearchSelection && setSearchSelection([]);
+    }, [setSearchSelection]);
     const onSearchItemClick = useCallback((item) => {
         if (!(searchSelection && setSearchSelection)) {
             return;
         }
         const typeKey = item.type || NO_TYPED_SEARCH_ITEM;
-        const currentItem = searchSelection.find(el => el.id === item.id && (el.type || NO_TYPED_SEARCH_ITEM) === typeKey);
+        const currentItem = searchOnlyOneType ? searchSelection.find(el => el.id === item.id)
+            : searchSelection.find(el => el.id === item.id && (el.type || NO_TYPED_SEARCH_ITEM) === typeKey);
         if (currentItem) {
-            const newValue = searchSelection.filter(el => !(el.id === currentItem.id && (el.type || NO_TYPED_SEARCH_ITEM) === typeKey));
+            const newValue = searchOnlyOneType ? searchSelection.filter(el => el.id !== currentItem.id)
+                : searchSelection.filter(el => !(el.id === currentItem.id && (el.type || NO_TYPED_SEARCH_ITEM) === typeKey));
+            currentItem.id === KEYWORD_ID && setKeyword("");
             setSearchSelection(newValue);
         }
         else {
-            setSearchSelection([...searchSelection, item]);
+            setSearchSelection([...searchSelection, Object.assign(Object.assign({}, item), { type: item.type || searchOnlyOneType || NO_TYPED_SEARCH_ITEM })]);
         }
-    }, [searchSelection, setSearchSelection]);
+    }, [searchOnlyOneType, searchSelection, setKeyword, setSearchSelection]);
     const handleTriggerClick = useCallback(() => {
-        setIsOpen(prevState => !prevState);
+        if (!document.startViewTransition) {
+            setIsOpen(prevState => !prevState);
+            return;
+        }
+        document.startViewTransition(() => {
+            flushSync(() => {
+                setIsOpen(prevState => !prevState);
+            });
+        });
     }, []);
-    const handleModalState = useCallback(() => {
-        onToggleView && onToggleView(!isModalOpen);
-        setIsModalOpen(val => !val);
-    }, [isModalOpen, onToggleView]);
+    const handleViewState = useCallback(() => {
+        onToggleView && onToggleView(!isSidePanelOpen);
+        setIsSidePanelOpen(val => !val);
+    }, [isSidePanelOpen, onToggleView]);
     const handleOpenChange = useCallback((open) => {
-        setIsOpen(open);
+        if (!document.startViewTransition) {
+            setIsOpen(open);
+            return;
+        }
+        document.startViewTransition(() => {
+            flushSync(() => {
+                setIsOpen(open);
+            });
+        });
     }, []);
-    const handleModalApply = useCallback((state) => {
+    const handleSidePanelApply = useCallback((state) => {
         filters.forEach((filter) => {
             const filterProps = filter.props;
             const newState = state[filterProps.id];
@@ -154,11 +190,29 @@ export const Filters = ({ className, children, isPinned, onPinChange, keyword, s
             setSearchSelection === null || setSearchSelection === void 0 ? void 0 : setSearchSelection([...newSearchSelection]);
         }
         newItemSearch && setKeyword(newItemSearch.name);
-        setIsOpen(false);
-    }, [setKeyword, setSearchSelection]);
+        handleOpenChange(false);
+    }, [handleOpenChange, setKeyword, setSearchSelection]);
     const handlePinChange = useCallback(() => {
         onPinChange && onPinChange(!isPinned);
     }, [onPinChange, isPinned]);
+    const handleSearchKeyDown = useCallback((event) => {
+        var _a, _b;
+        if (event.code === "Enter") {
+            isRecentSearchesMode && handleSaveRecentSearch(event.currentTarget.value);
+            !isOpen && handleTriggerClick();
+        }
+        if (event.code === "ArrowDown" && !isOpen) {
+            handleTriggerClick();
+        }
+        if (event.code === "ArrowDown" && isOpen) {
+            const firstItem = (_a = searchListRef.current) === null || _a === void 0 ? void 0 : _a.querySelector(FOCUSABLE_SELECTOR);
+            firstItem === null || firstItem === void 0 ? void 0 : firstItem.focus();
+        }
+        if (event.code === "ArrowLeft" && isOpen && event.currentTarget.value === "") {
+            const firstItem = (_b = selectListRef.current) === null || _b === void 0 ? void 0 : _b.querySelector(FOCUSABLE_SELECTOR);
+            firstItem === null || firstItem === void 0 ? void 0 : firstItem.focus();
+        }
+    }, [isOpen, isRecentSearchesMode, handleSaveRecentSearch, handleTriggerClick]);
     const getIconByType = useCallback((type) => {
         if (!type) {
             return IconFilter;
@@ -166,24 +220,32 @@ export const Filters = ({ className, children, isPinned, onPinChange, keyword, s
         const foundType = searchTypesArray.find((item) => item.id === type);
         return foundType && foundType.icon ? foundType.icon : IconFilter;
     }, [searchTypesArray]);
-    const memoizedSelect = useMemo(() => _jsx(FiltersSelect, { id: `filtersSelect_${uniqueKey}`, 
-        // name={translate("Search by")}
-        value: searchType, onChange: setSearchType, items: searchTypesToSelect }), [searchType, searchTypesToSelect, setSearchType, uniqueKey]);
-    const memoizedSearch = useMemo(() => _jsx(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 = useCombineData(searchTypesArray);
+    const memoizedSelect = useMemo(() => _jsx(FiltersSelect, { value: searchType, selectListRef: selectListRef, onChange: setSearchType, items: searchTypesToSelect }), [searchType, searchTypesToSelect, setSearchType]);
+    const handleSearchKeywordChange = useCallback((newKeyword) => {
+        setKeyword(newKeyword);
+        !isOpen && handleOpenChange(true);
+    }, [setKeyword, isOpen, handleOpenChange]);
+    const memoizedSearch = useMemo(() => _jsx(FiltersSearch, { id: `filtersSearch_${uniqueKey}`, ref: searchTriggerRef, name: translate("Search page"), value: keyword, onSearchKeyDown: handleSearchKeyDown, onOpenPopup: isOpen ? undefined : handleTriggerClick, onChange: handleSearchKeywordChange, handleRemove: onSearchItemClick, searchSelection: searchSelection, className: "zen-filters__search-with-pills" }), [uniqueKey, translate, keyword, handleSearchKeyDown, isOpen, handleTriggerClick, handleSearchKeywordChange, onSearchItemClick, searchSelection]);
+    const memoizedSearchPopup = useMemo(() => _jsx(FiltersSearch, { id: `filtersSearch_${uniqueKey}_popup`, ref: searchPopupTriggerRef, name: translate("Search page"), value: keyword, onChange: setKeyword, onSearchKeyDown: handleSearchKeyDown, handleRemove: onSearchItemClick, searchSelection: searchSelection, className: "zen-filters-popup__search-with-pills" }), [uniqueKey, translate, keyword, setKeyword, handleSearchKeyDown, onSearchItemClick, searchSelection]);
+    const memoizedSearchList = useMemo(() => !isOpen ? null :
+        _jsx(FiltersSearchList, { searchValue: keyword, searchListRef: searchListRef, searchData: combinedData, searchSelection: searchSelection, onlyOneType: searchOnlyOneType, getIconByType: getIconByType, handleSearchItemClick: onSearchItemClick, handleClearSearchSelection: onClearSearchSelection, recentSearches: isRecentSearchesMode ? recentSearches : undefined, onRemoveRecentSearchItem: isRecentSearchesMode ? onRemoveRecentSearchItem : undefined, handleRecentSearchItemClick: isRecentSearchesMode ? handleRecentSearchItemClick : undefined }), [isOpen, keyword, combinedData, searchSelection, getIconByType, onSearchItemClick, onClearSearchSelection, isRecentSearchesMode, recentSearches,
+        onRemoveRecentSearchItem, handleRecentSearchItemClick, searchOnlyOneType, searchListRef]);
     const allOption = useMemo(() => getAllOption(translate), [translate]);
+    const selectTriggerPopup = useMemo(() => _jsx(TextIconButton, { className: "zen-filters__select-trigger", iconClasses: "zen-filters__select-trigger-icon", contentClasses: "zen-filters__select-trigger-content", title: translate("Close setting conditions popup"), onClick: handleTriggerClick, icon: IconChevronTopSmall, iconPosition: "end", children: translate("Search by") }), [handleTriggerClick, translate]);
+    // added onMouseDown to prevent focus
     const selectTrigger = useMemo(() => {
         var _a;
-        return _jsx(TextIconButton, { className: "zen-filters__select-trigger", iconClasses: "zen-filters__select-trigger-icon", contentClasses: "zen-filters__select-trigger-content", onClick: handleTriggerClick, icon: IconChevronDownSmall, iconPosition: "end", children: !isOpen ? selectState[0] === ALL_SELECT_OPTION_ID ? allOption.name :
-                (_a = searchTypesArray.find((item) => item.id === selectState[0])) === null || _a === void 0 ? void 0 : _a.name : translate("Search by") });
-    }, [handleTriggerClick, selectState, isOpen, allOption.name, translate, searchTypesArray]);
-    const combinedData = useCombineData(searchTypesArray);
-    const memoizedPopup = useMemo(() => _jsx(ControlledPopup, { paddingY: -28, isOpen: isOpen, className: classNames(["zen-filters-popup"]), onOpenChange: handleOpenChange, useTrapFocusWithTrigger: "withTrigger", alignment: "bottom", shouldHoldScroll: true, triggerRef: triggerRef, ariaLabel: translate("Setting conditions"), recalculateOnScroll: true, children: _jsxs("div", { className: "zen-filters-popup__content", children: [_jsxs("div", { className: "zen-filters-popup__left-panel", children: [selectTrigger, memoizedSelect] }), _jsxs("div", { className: "zen-filters-popup__right-panel", children: [memoizedSearch, _jsx(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 : _jsx(TextIconButton, { tabIndex: -1, onMouseDown: e => e.preventDefault(), className: "zen-filters__select-trigger", iconClasses: "zen-filters__select-trigger-icon", contentClasses: "zen-filters__select-trigger-content", title: translate("Open setting conditions popup"), onClick: handleTriggerClick, icon: IconChevronDownSmall, iconPosition: "end", children: selectState[0] === ALL_SELECT_OPTION_ID ? allOption.name :
+                (_a = searchTypesArray.find((item) => item.id === selectState[0])) === null || _a === void 0 ? void 0 : _a.name });
+    }, [translate, handleTriggerClick, selectState, allOption.name, searchTypesArray, isMobile]);
+    const memoizedPopup = useMemo(() => _jsx(ControlledPopup, { paddingY: -34, isOpen: isOpen, className: classNames(["zen-filters-popup"]), onOpenChange: handleOpenChange, useTrapFocusWithTrigger: "on", alignment: "bottom", shouldHoldScroll: true, triggerRef: triggerRef, ariaLabel: translate("Setting conditions"), recalculateOnScroll: true, children: _jsxs("div", { className: "zen-filters-popup__content", children: [_jsxs("div", { className: "zen-filters-popup__left-panel", children: [selectTriggerPopup, memoizedSelect] }), _jsxs("div", { className: "zen-filters-popup__right-panel", children: [memoizedSearchPopup, memoizedSearchList] })] }) }), [isOpen, handleOpenChange, translate, selectTriggerPopup, memoizedSelect, memoizedSearchPopup, memoizedSearchList]);
     const filtersForRender = useMemo(() => filters.filter(el => {
         const elProps = el.props;
         return typeof elProps.visible === "boolean" ? elProps.visible
             : elProps.visible === undefined ? false : elProps.visible(Array.from(selectState), undefined);
     }), [filters, selectState]);
-    // The 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 = useMemo(() => {
         const stateObj = createStateObject(filters, "state");
         return filters.filter(el => {
@@ -193,9 +255,9 @@ export const Filters = ({ className, children, isPinned, onPinChange, keyword, s
         });
     }, [filters, selectState]);
     const hasSavedFilters = savedFiltersStates.size > 0;
-    const memoizedFiltersContainer = useMemo(() => _jsx(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 = useMemo(() => searchTypesArray.map((item) => ({ id: item.id, name: item.name })), [searchTypesArray]);
-    const memoizedModal = useMemo(() => _jsx(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 = useMemo(() => hasFilters ? _jsx(FiltersContainer, { filtersChipRef: sidePanelTriggerRef, filtersClickHandler: handleViewState, filtersForCalculation: filtersForCalculation, isPinned: isPinMode ? isPinned : undefined, onPinChange: isPinMode ? onPinChange : undefined, hasSavedFilters: hasSavedFilters, children: filtersForRender }) : null, [handleViewState, filtersForCalculation, isPinMode, isPinned, onPinChange, hasSavedFilters, filtersForRender, hasFilters]);
+    const memoizedSidePanel = useMemo(() => _jsx(FiltersSidePanel, { isOpen: isSidePanelOpen, onApply: handleSidePanelApply, onClose: handleViewState, onPin: isPinMode ? handlePinChange : undefined, isPinned: isPinMode ? isPinned : undefined, filters: filters, externalState: allFiltersState, setExternalState: setAllFiltersState, triggerRef: sidePanelTriggerRef }), [isSidePanelOpen, handleSidePanelApply, handleViewState, handlePinChange, isPinned, isPinMode, filters, allFiltersState, setAllFiltersState, sidePanelTriggerRef]);
     const memoizedStatus = useMemo(() => isPinned && isPinMode ? "accent" : undefined, [isPinned, isPinMode]);
     const memoizedSavedFiltersItems = useMemo(() => new Set(savedFiltersStates.keys()), [savedFiltersStates]);
     const memoizedSavedFiltersActive = useMemo(() => {
@@ -237,10 +299,11 @@ export const Filters = ({ className, children, isPinned, onPinChange, keyword, s
             });
         }
     }, [filters, savedFiltersStates]);
-    return _jsxs("div", { className: classNames(["zen-filters", className || ""]), children: [isOpen ? null : _jsxs("div", { className: "zen-filters__main-row", children: [selectTrigger, memoizedSearch] }), _jsx("div", { className: "zen-filters__trigger", ref: triggerRef, role: "button", tabIndex: 0, "aria-label": translate("Open search") }), _jsx(FiltersSavedItemsProvider, { items: memoizedSavedFiltersItems, active: memoizedSavedFiltersActive, onRemove: isSavedFiltersMode ? removeSavedFiltersState : undefined, onApply: isSavedFiltersMode ? applySavedFiltersState : undefined, onSave: isSavedFiltersMode ? handleSaveFilters : undefined, children: _jsx(ChipStatusProvider, { status: memoizedStatus, children: memoizedFiltersContainer }) }), memoizedPopup, isModalOpen ? _jsx(FiltersSavedItemsProvider, { items: memoizedSavedFiltersItems, active: memoizedSavedFiltersActive, onRemove: isSavedFiltersMode ? removeSavedFiltersState : undefined, onApply: isSavedFiltersMode ? applySavedFiltersState : undefined, onSave: isSavedFiltersMode ? handleSaveFilters : undefined, children: _jsx(ChipStatusProvider, { status: memoizedStatus, children: memoizedModal }) }) : null] });
+    return _jsxs("div", { className: classNames(["zen-filters", className || ""]), children: [_jsxs("div", { className: classNames(["zen-filters__main-row", isOpen ? "" : "zen-filters__main-row--initial"]), ref: triggerRef, role: "combobox", "aria-label": translate("Open setting conditions popup"), children: [selectTrigger, memoizedSearch] }), _jsx(FiltersSavedItemsProvider, { items: memoizedSavedFiltersItems, active: memoizedSavedFiltersActive, onRemove: isSavedFiltersMode ? removeSavedFiltersState : undefined, onApply: isSavedFiltersMode ? applySavedFiltersState : undefined, onSave: isSavedFiltersMode ? handleSaveFilters : undefined, children: _jsx(ChipStatusProvider, { status: memoizedStatus, children: memoizedFiltersContainer }) }), memoizedPopup, _jsx(FiltersSavedItemsProvider, { items: memoizedSavedFiltersItems, active: memoizedSavedFiltersActive, onRemove: isSavedFiltersMode ? removeSavedFiltersState : undefined, onApply: isSavedFiltersMode ? applySavedFiltersState : undefined, onSave: isSavedFiltersMode ? handleSaveFilters : undefined, children: _jsx(ChipStatusProvider, { status: memoizedStatus, children: memoizedSidePanel }) })] });
 };
 Filters.Chip = FiltersChip;
 Filters.DateRange = FiltersDateRange;
+Filters.DateInput = FiltersDateInput;
 Filters.Dropdown = FiltersDropdown;
 Filters.Groups = FiltersGroups;
 Filters.Range = FiltersRange;

package/esm/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/esm/filters/filtersHelper.js

@@ -211,3 +211,40 @@ export function getArrayOfElements(elem) {
     }
     return Array.isArray(elem) ? elem : [elem];
 }
+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 [];
+    }
+};
+export async function getSavedFiltersFromStorage(key) {
+    const result = getParsedFilters(key);
+    return Promise.resolve(result);
+}
+export 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 [];
+    }
+}

package/esm/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/esm/filters/filtersHooks.js

@@ -13,7 +13,24 @@ export const usePinnedFilters = () => {
     const pinnedFilters = useMemo(() => ({ isPinned, onPinChange: setIsPinned }), [isPinned, setIsPinned]);
     return pinnedFilters;
 };
-export const useFiltersSelection = () => {
+export const useFiltersSelection = (setArgs) => {
     const [searchSelection, setSearchSelection] = useState([]);
-    return { searchSelection, setSearchSelection };
+    const handleSelectionChange = useCallback((selection) => {
+        setSearchSelection(selection);
+        if (setArgs) {
+            setArgs(selection);
+        }
+    }, [setArgs]);
+    return { searchSelection, setSearchSelection: handleSelectionChange };
+};
+export const useSearchData = (id, name, data, icon, subItems, relevance) => {
+    const memoizedData = useMemo(() => ({
+        id,
+        name,
+        data,
+        icon,
+        subItems,
+        relevance
+    }), [id, name, data, subItems, icon, relevance]);
+    return memoizedData;
 };