@geotab/zenith 1.26.6-beta.3 → 2.0.0-beta.0

package/esm/filters/components/filtersItem.js

@@ -0,0 +1,16 @@
+import React from "react";
+import { FiltersChip } from "./filtersChip";
+import { FiltersDateRange } from "./filtersDateRange";
+import { FiltersDropdown } from "./filtersDropdown";
+import { FiltersGroups } from "./filtersGroups";
+import { FiltersRange } from "./filtersRange";
+export const allowedFiltersComponents = [FiltersChip, FiltersDateRange, FiltersDropdown, FiltersGroups, FiltersRange];
+export const getAllowedFilters = (items) => items.reduce((acc, item) => {
+    if (!item || !React.isValidElement(item)) {
+        return acc;
+    }
+    if (allowedFiltersComponents.includes(item.type)) {
+        acc.push(item);
+    }
+    return acc;
+}, []);

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

@@ -0,0 +1,17 @@
+import { ReactElement } from "react";
+import { IZenComponentProps } from "../../commonHelpers/zenComponent";
+import { ITabElement } from "../../tabs/tabs";
+import { TFiltersComponentsItemState, TFiltersComponentsProps } from "./filtersItem";
+import "./filtersModal.less";
+export interface IFiltersModal extends IZenComponentProps {
+    isOpen: boolean;
+    onClose: () => void;
+    onApply: (state: Record<string, TFiltersComponentsItemState>) => void;
+    onPin?: () => void;
+    isPinned?: boolean;
+    tabItems: ITabElement[];
+    filters: ReactElement<TFiltersComponentsProps>[];
+    externalModalState?: Record<string, TFiltersComponentsItemState>;
+    setExternalModalState?: (newState: Partial<Record<string, TFiltersComponentsItemState>>) => void;
+}
+export declare const FiltersModal: ({ isOpen, onClose, onApply, onPin, tabItems, filters, externalModalState, setExternalModalState, isPinned }: IFiltersModal) => import("react/jsx-runtime").JSX.Element;

package/esm/filters/components/filtersModal.js

@@ -0,0 +1,103 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useCallback, useMemo, useState } from "react";
+import { Modal } from "../../modal/modal";
+import { useLanguage } from "../../utils/localization/useLanguage";
+import { Tabs } from "../../tabs/tabs";
+import { createStateObject } from "../filtersHelper";
+import { FiltersModalItem } from "./filtersModalItem";
+import { classNames } from "../../commonHelpers/classNames/classNames";
+import { useFiltersSavedItems } from "./filtersSavedItemsProvider";
+import { ALL_SELECT_OPTION_ID } from "./filtersSelect";
+import { FiltersSaveModal } from "./filtersSaveModal";
+import { Button } from "../../button/button";
+import { IconDisk } from "../../icons/iconDisk";
+import { useDriveClassName } from "../../utils/theme/useDriveClassName";
+import { IconPin2 } from "../../icons/iconPin2";
+export const FiltersModal = ({ isOpen, onClose, onApply, onPin, tabItems, filters, externalModalState, setExternalModalState, isPinned = false }) => {
+    const { translate } = useLanguage();
+    const { onSave } = useFiltersSavedItems();
+    const iconDriveClassName = useDriveClassName("icon");
+    const [activeTabId, setActiveTabId] = useState(ALL_SELECT_OPTION_ID);
+    const [isSaveModalOpen, setIsSaveModalOpen] = useState(false);
+    const [filtersInternalModalState, setFiltersInternalModalState] = useState(createStateObject(filters, "state"));
+    const [initialExternalModalState] = useState(externalModalState);
+    const onTabChange = (newVal) => {
+        setActiveTabId(newVal);
+    };
+    const externalMode = useMemo(() => {
+        if (externalModalState === undefined || setExternalModalState === undefined) {
+            return false;
+        }
+        return true;
+    }, [externalModalState, setExternalModalState]);
+    const handleInternalFiltersStateChange = useCallback((id) => (newState) => {
+        setFiltersInternalModalState((prevState) => (Object.assign(Object.assign({}, prevState), { [id]: newState })));
+    }, []);
+    const handleExternalFiltersStateChange = useCallback((id) => (newState) => {
+        setExternalModalState && setExternalModalState({ [id]: newState });
+    }, [setExternalModalState]);
+    const currentState = useMemo(() => externalMode ? externalModalState
+        : filtersInternalModalState, [externalMode, externalModalState, filtersInternalModalState]);
+    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([activeTabId], currentState))), [activeTabId, currentState, filters]);
+    const inhibitedFilters = useMemo(() => {
+        const inhibited = new Set();
+        if (externalMode) {
+            return inhibited;
+        }
+        currentFilters.forEach((item) => {
+            if (item.props.inhibit && item.props.inhibit.length > 0) {
+                item.props.inhibit.forEach((id) => inhibited.add(id));
+            }
+        });
+        return inhibited;
+    }, [currentFilters, externalMode]);
+    const handleClearClick = useCallback(() => {
+        const newState = createStateObject(filters, "defaultState");
+        externalMode && setExternalModalState ? setExternalModalState(Object.assign({}, newState)) : setFiltersInternalModalState(newState);
+    }, [externalMode, filters, setExternalModalState]);
+    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 && setExternalModalState ? setExternalModalState(Object.assign({}, newState)) : setFiltersInternalModalState(newState);
+        onClose();
+    }, [externalMode, filters, onClose, setExternalModalState]);
+    const handleExternalModeClose = useCallback(() => {
+        if (!(externalMode && initialExternalModalState && setExternalModalState)) {
+            return;
+        }
+        setExternalModalState(initialExternalModalState);
+        onClose();
+    }, [externalMode, initialExternalModalState, onClose, setExternalModalState]);
+    const toggleSaveModal = useCallback(() => {
+        setIsSaveModalOpen(val => !val);
+    }, []);
+    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 modalItemChangeHandler = useCallback((id) => externalMode ? handleExternalFiltersStateChange(id) : handleInternalFiltersStateChange(id), [externalMode, handleExternalFiltersStateChange, handleInternalFiltersStateChange]);
+    const tabsContent = useMemo(() => currentFilters.filter((item) => !inhibitedFilters.has(item.props.id))
+        .map((item) => _jsx(FiltersModalItem, { item: item, itemState: currentState[item.props.id], changeHandler: modalItemChangeHandler(item.props.id) }, item.props.id)), [currentFilters, inhibitedFilters, currentState, modalItemChangeHandler]);
+    const memoizedActionButtons = useCallback((onSaveFn, onPinFn, isPin) => (_jsxs("div", { className: "zen-filters-modal__header-buttons", children: [onSaveFn && _jsx(Button, { type: "tertiary", "data-focusable": "save", className: "zen-filters-modal__save-button zen-filters-modal__header-button", title: translate("Save"), "aria-label": translate("Save"), onClick: onSaveFn, children: _jsx(IconDisk, { description: translate("Save"), className: "svgIcon", size: iconDriveClassName ? "huge" : "large" }) }), onPinFn && _jsx(Button, { type: "tertiary", "data-focusable": "pin", className: classNames(["zen-filters-modal__pin-button", isPin ? "zen-filters-modal__header-button--active" : "", "zen-filters-modal__header-button"]), title: translate("Pin"), "aria-label": translate("Pin"), onClick: onPinFn, children: _jsx(IconPin2, { description: translate("Pin"), className: "svgIcon", size: iconDriveClassName ? "huge" : "large" }) })] })), [iconDriveClassName, translate]);
+    return _jsxs(_Fragment, { children: [_jsxs(Modal, { className: classNames(["zen-filters-modal", isSaveModalOpen ? "zen-filters-modal--secondary" : ""]), isOpen: isOpen, onClose: externalMode ? handleExternalModeClose : onClose, title: translate("All Filters"), children: [memoizedActionButtons(onSave ? toggleSaveModal : undefined, onPin, isPinned), _jsx(Tabs, { activeTabId: activeTabId, onTabChange: onTabChange, tabs: tabItems }), _jsx("div", { className: "zen-filters-modal__content", children: tabsContent }), _jsx(Modal.TertiaryButton, { type: "tertiary", onClick: handleClearClick, children: translate("Clear") }), _jsx(Modal.SecondaryButton, { onClick: handleCancelClick, children: translate("Cancel") }), _jsx(Modal.PrimaryButton, { onClick: handleApplyClick, children: translate("Apply") })] }), _jsx(FiltersSaveModal, { isOpen: isSaveModalOpen, onClose: toggleSaveModal, onSave: handleSaveFilters })] });
+};

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

@@ -0,0 +1,9 @@
+import { ReactElement } from "react";
+import { TFiltersComponentsItemState, TFiltersComponentsProps } from "./filtersItem";
+interface IFiltersModalItem {
+    item: ReactElement<TFiltersComponentsProps>;
+    itemState: TFiltersComponentsItemState;
+    changeHandler: (newState: TFiltersComponentsItemState) => void;
+}
+export declare const FiltersModalItem: React.FC<IFiltersModalItem>;
+export {};

package/esm/filters/components/filtersModalItem.js

@@ -0,0 +1,70 @@
+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";
+import { useCallback, useMemo } from "react";
+import { FiltersChip } from "./filtersChip";
+import { Chip } from "../../chip/chip";
+import { FiltersRange } from "./filtersRange";
+import { classNames } from "../../commonHelpers/classNames/classNames";
+import { FiltersDropdown } from "./filtersDropdown";
+import { Dropdown } from "../../dropdown/dropdown";
+import { FiltersGroups } from "./filtersGroups";
+import { GroupsFilter } from "../../groupsFilter/groupsFilter";
+import { FiltersDateRange } from "./filtersDateRange";
+import { DateRange } from "../../dateRange/dateRange";
+import { Range } from "../../range/range";
+import { useChipStatus } from "../../chip/chipStatusProvider";
+import { getDropdownStateType, prepareDefaultDropdownState } from "../filtersHelper";
+export const FiltersModalItem = ({ item, itemState, changeHandler }) => {
+    const status = useChipStatus();
+    const getComponent = useCallback((elem, currentState, handleStateChange, chipStatus) => {
+        const { type, props } = elem;
+        switch (type) {
+            case FiltersChip: {
+                const _a = props, { id, state: _globalState, name, onChange: _globalOnChange, className } = _a, otherProps = __rest(_a, ["id", "state", "name", "onChange", "className"]);
+                return _jsx(Chip, Object.assign({ id: `${id}-modal` }, otherProps, { active: currentState, status: currentState ? chipStatus || undefined : undefined, onChange: handleStateChange, children: name }));
+            }
+            case FiltersRange: {
+                const _b = props, { id, state: _globalState, name, onChange: _globalOnChange, defaultState, className } = _b, otherProps = __rest(_b, ["id", "state", "name", "onChange", "defaultState", "className"]);
+                return _jsx(Range, Object.assign({}, otherProps, { id: `${id}-modal`, className: classNames(["zen-filters-modal__item-element", className || ""]), fullWidthTriggerButton: true, label: name, value: currentState, onChange: handleStateChange, defaultValue: defaultState, chip: false }));
+            }
+            case FiltersDropdown: {
+                const _c = props, { id, name, state: _globalState, onChange: _globalOnChange, defaultState, fetchState, classNamePopup } = _c, otherProps = __rest(_c, ["id", "name", "state", "onChange", "defaultState", "fetchState", "classNamePopup"]);
+                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 dropdownStateType = getDropdownStateType(currentState);
+                const preparedDefaultState = defaultState ? defaultState : prepareDefaultDropdownState(dropdownStateType);
+                const dropdownProps = Object.assign(Object.assign({}, otherProps), { id: `${id}-modal`, fetchState: fetchState, classNamePopup: classNames(["zen-filters-modal__item-popup", classNamePopup || ""]), isLoading: undefined, multiselect: dropdownStateType === "fullSelection" || dropdownStateType === "fullSelectionWithCheckbox" ? true : otherProps.multiselect, 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 });
+                return _jsx(Dropdown, Object.assign({}, dropdownProps));
+            }
+            case FiltersGroups: {
+                const _d = props, { id, state: _globalState, onChange: _globalOnChange } = _d, otherProps = __rest(_d, ["id", "state", "onChange"]);
+                return _jsx(GroupsFilter, Object.assign({ initialFilterState: currentState, onChange: handleStateChange }, otherProps, { chip: false, fullSize: true }));
+            }
+            case FiltersDateRange: {
+                const _e = props, { id, state: _globalState, onChange: _globalOnChange, defaultState, allowUnsetValue, className } = _e, otherProps = __rest(_e, ["id", "state", "onChange", "defaultState", "allowUnsetValue", "className"]);
+                return allowUnsetValue ? _jsx(DateRange, Object.assign({}, otherProps, { id: `${id}-modal`, className: classNames(["zen-filters-modal__item-element", "zen-filters-modal__item-element--centred", className || ""]), value: currentState, onChange: handleStateChange, defaultValue: defaultState, allowUnsetValue: true, chip: false })) : _jsx(DateRange, Object.assign({}, otherProps, { id: `${id}-modal`, className: classNames(["zen-filters-modal__item-element", "zen-filters-modal__item-element--centred", className || ""]), value: currentState, onChange: handleStateChange, defaultValue: defaultState, allowUnsetValue: false, chip: false }));
+            }
+            default:
+                return null;
+        }
+    }, []);
+    const memoizedItem = useMemo(() => getComponent(item, itemState, changeHandler, status), [getComponent, item, itemState, changeHandler, status]);
+    return (_jsxs("div", { className: "zen-filters-modal__item", children: [_jsx("div", { className: "zen-filters-modal__item-label", children: item.props.name }), _jsx("div", { children: memoizedItem })] }));
+};

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

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+import { IFiltersItem } from "./filtersItem";
+import { IRange, IRangeValues } from "../../range/range";
+export interface IFiltersRangeProps extends Pick<IRange, "unit" | "labelMin" | "labelMax" | "disabled" | "triggerAriaLabel" | "min" | "max" | "fullBounded" | "allowEqualMinMax" | "chipIcon"> {
+}
+export interface IFiltersRangeState extends IRangeValues {
+}
+export interface IFiltersRange extends IFiltersItem<IFiltersRangeState>, IFiltersRangeProps {
+}
+export declare const FiltersRangeDisplayName = "FiltersRange";
+export declare const FiltersRange: React.FC<IFiltersRange>;

package/esm/filters/components/filtersRange.js

@@ -0,0 +1,23 @@
+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 { useMemo } from "react";
+import { classNames } from "../../commonHelpers/classNames/classNames";
+import { IconFilter } from "../../icons/iconFilter";
+import { Range } from "../../range/range";
+export const FiltersRangeDisplayName = "FiltersRange";
+export const FiltersRange = (_a) => {
+    var { className, state, defaultState, name, onChange: onChangeState, id, chipIcon } = _a, otherRangeProps = __rest(_a, ["className", "state", "defaultState", "name", "onChange", "id", "chipIcon"]);
+    const component = useMemo(() => _jsx(Range, Object.assign({}, otherRangeProps, { label: name, value: state, onChange: onChangeState, defaultValue: defaultState, className: classNames(["zen-filters-range", className || ""]), chip: true, chipId: id, chipName: name, chipIcon: chipIcon || IconFilter })), [otherRangeProps, chipIcon, state, onChangeState, defaultState, className, id, name]);
+    return component;
+};
+FiltersRange.displayName = FiltersRangeDisplayName;

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

@@ -0,0 +1,7 @@
+import "./filtersModal.less";
+export interface IFiltersModal {
+    isOpen: boolean;
+    onClose: (isOpen: boolean) => void;
+    onSave: (filterName: string) => void;
+}
+export declare const FiltersSaveModal: ({ isOpen, onClose, onSave }: IFiltersModal) => import("react/jsx-runtime").JSX.Element;

package/esm/filters/components/filtersSaveModal.js

@@ -0,0 +1,49 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useMemo, useState } from "react";
+import { Modal } from "../../modal/modal";
+import { useLanguage } from "../../utils/localization/useLanguage";
+import { TextInput } from "../../textInput/textInput";
+import { useFiltersSavedItems } from "./filtersSavedItemsProvider";
+import { IconDisk } from "../../icons/iconDisk";
+import { useDriveClassName } from "../../utils/theme/useDriveClassName";
+export const FiltersSaveModal = ({ isOpen, onClose, onSave }) => {
+    const { translate } = useLanguage();
+    const { items } = useFiltersSavedItems();
+    const iconDriveClassName = useDriveClassName("icon");
+    const [filterName, setFilterName] = useState("");
+    const toggleSaveModal = useCallback(() => {
+        onClose(!isOpen);
+    }, [isOpen, onClose]);
+    const handleCancelSaveModal = useCallback(() => {
+        onClose(false);
+        setFilterName("");
+    }, [onClose]);
+    const isValidFilterName = useCallback((name, existingNames) => {
+        if (!name) {
+            return false;
+        }
+        return !existingNames.map((item) => item.toLowerCase().trim()).includes(name.toLowerCase().trim());
+    }, []);
+    const handleApplySaveModal = useCallback(() => {
+        if (!isValidFilterName(filterName, Array.from(items))) {
+            return;
+        }
+        onClose(false);
+        onSave(filterName);
+        setFilterName("");
+    }, [filterName, isValidFilterName, items, onClose, onSave]);
+    const handleSaveModalFieldChange = useCallback((e) => {
+        setFilterName(e.target.value);
+    }, []);
+    const errorText = useMemo(() => {
+        if (!filterName) {
+            return "";
+        }
+        if (!isValidFilterName(filterName, Array.from(items))) {
+            return translate("Title already in use");
+        }
+        return "";
+    }, [filterName, isValidFilterName, items, translate]);
+    const saveIcon = useCallback(() => _jsx(IconDisk, { description: translate("Save"), className: "svgIcon", size: iconDriveClassName ? "huge" : "large" }), [iconDriveClassName, translate]);
+    return _jsxs(Modal, { isOpen: isOpen, onClose: toggleSaveModal, title: translate("Save filters"), children: [_jsx("div", { className: "zen-filters-modal__content", children: _jsx(TextInput, { value: filterName, ariaLabel: translate("Filter title"), placeholder: translate("Filter title"), onChange: handleSaveModalFieldChange, maxLength: 100, error: errorText }) }), _jsx(Modal.SecondaryButton, { onClick: handleCancelSaveModal, title: translate("Cancel"), children: translate("Cancel") }), _jsx(Modal.PrimaryButton, { onClick: handleApplySaveModal, icon: saveIcon, title: translate("Save"), children: translate("Save") })] });
+};

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

@@ -0,0 +1,2 @@
+import "./filtersSavedChipComponent.less";
+export declare const FiltersSavedChipComponent: () => import("react/jsx-runtime").JSX.Element;

package/esm/filters/components/filtersSavedChipComponent.js

@@ -0,0 +1,62 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useCallback, useMemo, useRef, useState } from "react";
+import { Chip } from "../../chip/chip";
+import { IconDisk } from "../../icons/iconDisk";
+import { ControlledPopup } from "../../controlledPopup/controlledPopup";
+import { classNames } from "../../commonHelpers/classNames/classNames";
+import { Button } from "../../button/button";
+import { IconClose } from "../../icons/iconClose";
+import { useLanguage } from "../../utils/localization/useLanguage";
+import { Modal } from "../../modal/modal";
+import { useFiltersSavedItems } from "./filtersSavedItemsProvider";
+import { FiltersSaveModal } from "./filtersSaveModal";
+import { useDriveClassName } from "../../utils/theme/useDriveClassName";
+export const FiltersSavedChipComponent = () => {
+    const { translate } = useLanguage();
+    const iconDriveClassName = useDriveClassName("icon");
+    const contentDriveClassName = useDriveClassName("zen-filters-saved-popup__content");
+    const { items, active, onRemove, onApply, onSave } = useFiltersSavedItems();
+    const [savedChipOpen, setSavedChipOpen] = useState(false);
+    const [removeModalOpen, setRemoveModalOpen] = useState(false);
+    const [saveModalOpen, setSaveModalOpen] = useState(false);
+    const savedChipRef = useRef(null);
+    const removeChipRef = useRef("");
+    const handleRemove = useCallback((itemKey) => () => {
+        removeChipRef.current = itemKey;
+        setRemoveModalOpen(true);
+    }, []);
+    const toggleSavedChipOpen = useCallback(() => {
+        setSavedChipOpen((prev) => !prev);
+    }, []);
+    const toggleRemoveModal = useCallback(() => {
+        setRemoveModalOpen((prev) => !prev);
+    }, []);
+    const toggleSaveModal = useCallback(() => {
+        setSaveModalOpen((prev) => !prev);
+    }, []);
+    const handleCancelRemoveModal = useCallback(() => {
+        setRemoveModalOpen(false);
+        removeChipRef.current = "";
+    }, []);
+    const handleRemoveItem = useCallback((e) => {
+        e.stopPropagation();
+        setRemoveModalOpen(false);
+        onRemove && onRemove(removeChipRef.current);
+        removeChipRef.current = "";
+    }, [onRemove]);
+    const handleFilterSelect = useCallback((e) => {
+        const filterName = e.target.dataset.filterName;
+        filterName && onApply && onApply(filterName);
+    }, [onApply]);
+    const handleItemKeyDown = useCallback((e) => {
+        if (e.key === "Enter" || e.key === " ") {
+            const filterName = e.currentTarget.dataset.filterName;
+            filterName && onApply && onApply(filterName);
+        }
+    }, [onApply]);
+    const saveButton = useMemo(() => _jsxs("button", { type: "button", onClick: toggleSaveModal, className: "zen-filters-saved-popup__action-button", title: translate("Save new filters"), children: [_jsx(IconDisk, { description: translate("Save"), className: "svgIcon", size: iconDriveClassName ? "huge" : "large" }), _jsx("div", { className: classNames(["", "zen-ellipsis"]), children: translate("Save new") })] }), [iconDriveClassName, toggleSaveModal, translate]);
+    const memoizedItems = useMemo(() => Array.from(items), [items]);
+    const popupContent = useMemo(() => _jsxs("div", { className: classNames(["zen-filters-saved-popup__content", contentDriveClassName || ""]), children: [onSave ? saveButton : null, _jsx("div", { onClick: handleFilterSelect, children: memoizedItems.map((filterName) => (_jsxs("div", { tabIndex: 0, onKeyDown: handleItemKeyDown, "data-filter-name": filterName, className: classNames(["zen-filters-saved-popup__item", active.has(filterName) ? "zen-filters-saved-popup__item--active" : ""]), children: [_jsx("div", { className: "zen-filters-saved-popup__name", "data-filter-name": filterName, children: filterName }), onRemove ? _jsx(Button, { type: "tertiary-black", className: "zen-filters-saved-popup__action", onClick: handleRemove(filterName), title: translate("Remove"), "aria-label": translate("Remove"), children: _jsx(IconClose, { size: iconDriveClassName ? "huge" : "large", className: "zen-filters-saved-popup__close-icon" }) }) : null] }, filterName))) })] }), [active, contentDriveClassName, handleFilterSelect, handleItemKeyDown, handleRemove, iconDriveClassName, memoizedItems, onRemove, onSave, saveButton, translate]);
+    const memoizedStatus = useMemo(() => (active.size > 0 && Array.from(items).some(item => active.has(item)) ? "active" : undefined), [active, items]);
+    return (_jsxs(_Fragment, { children: [_jsx(Chip, { className: "zen-filters-saved-chip", isOpen: savedChipOpen, status: memoizedStatus, onClick: toggleSavedChipOpen, title: translate("Saved filters"), icon: IconDisk, triggerRef: savedChipRef }), _jsx(ControlledPopup, { isOpen: savedChipOpen, className: classNames(["zen-filters-saved-popup"]), onOpenChange: toggleSavedChipOpen, useTrapFocusWithTrigger: "on", shouldHoldScroll: true, triggerRef: savedChipRef, ariaLabel: translate("Saved filters"), recalculateOnScroll: true, children: popupContent }), _jsxs(Modal, { isOpen: removeModalOpen, onClose: toggleRemoveModal, title: translate("Remove saved {name} filter?").replace("{name}", removeChipRef.current), children: [_jsx(Modal.SecondaryButton, { onClick: handleCancelRemoveModal, children: translate("Cancel") }), _jsx(Modal.PrimaryButton, { onClick: handleRemoveItem, type: "destructive", children: translate("Confirm") })] }), onSave ? _jsx(FiltersSaveModal, { isOpen: saveModalOpen, onClose: setSaveModalOpen, onSave: onSave }) : null] }));
+};

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

@@ -0,0 +1,19 @@
+import { FC, PropsWithChildren } from "react";
+import { TFiltersComponentsItemState } from "./filtersItem";
+export declare const filtersSavedItemsContext: import("react").Context<IFiltersSavedItemsProviderProps>;
+interface IFiltersSavedItemsProviderProps extends PropsWithChildren {
+    items: Set<string>;
+    active: Set<string>;
+    onRemove?: (item: string) => void;
+    onApply?: (item: string) => void;
+    onSave?: (filterName: string, filterState?: Record<string, TFiltersComponentsItemState>) => void;
+}
+export declare const FiltersSavedItemsProvider: FC<IFiltersSavedItemsProviderProps>;
+export declare const useFiltersSavedItems: () => {
+    items: Set<string>;
+    active: Set<string>;
+    onRemove: ((item: string) => void) | undefined;
+    onApply: ((item: string) => void) | undefined;
+    onSave: ((filterName: string, filterState?: Record<string, TFiltersComponentsItemState>) => void) | undefined;
+};
+export {};

package/esm/filters/components/filtersSavedItemsProvider.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useContext } from "react";
+export const filtersSavedItemsContext = createContext({ items: new Set(), active: new Set(), onRemove: undefined, onApply: undefined, onSave: undefined });
+export const FiltersSavedItemsProvider = ({ items, active, onRemove, onApply, onSave, children }) => (_jsx(filtersSavedItemsContext.Provider, { value: { items, active, onRemove, onApply, onSave }, children: children }));
+export const useFiltersSavedItems = () => {
+    const { items, active, onRemove, onApply, onSave } = useContext(filtersSavedItemsContext);
+    return { items, active, onRemove, onApply, onSave };
+};

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

@@ -0,0 +1,16 @@
+import React from "react";
+import "./filtersSearch.less";
+import { ISearchItem } from "./filtersSearchList";
+interface IFiltersSearch {
+    id: string;
+    name: string;
+    value: string;
+    onChange: (newValue: string) => void;
+    onSearchKeyDown?: (searchValue?: string) => void;
+    handleSearchFocus: () => void;
+    searchSelection?: ISearchItem[];
+    handleRemove?: (id: ISearchItem) => void;
+    className?: string;
+}
+export declare const FiltersSearch: React.ForwardRefExoticComponent<IFiltersSearch & React.RefAttributes<HTMLInputElement>>;
+export {};

package/esm/filters/components/filtersSearch.js

@@ -0,0 +1,38 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useCallback, useMemo } from "react";
+import { classNames } from "../../commonHelpers/classNames/classNames";
+import { PillBox } from "../../pillBox/pillBox";
+import { NO_TYPED_SEARCH_ITEM } from "./filtersSearchList";
+import { SearchInputRaw } from "../../searchInputRaw/searchInputRaw";
+export const FiltersSearch = React.forwardRef(({ id, name, value, onChange, onSearchKeyDown, handleSearchFocus, searchSelection, handleRemove, className }, ref) => {
+    const isWithPills = Boolean(searchSelection && handleRemove);
+    const divider = "_divider_";
+    const handleSearchKeyDown = useCallback((event) => {
+        if (event.code === "Enter") {
+            onSearchKeyDown === null || onSearchKeyDown === void 0 ? void 0 : onSearchKeyDown(event.currentTarget.value || undefined);
+        }
+    }, [onSearchKeyDown]);
+    const memoizedPillsArray = React.useMemo(() => {
+        if (!isWithPills || !searchSelection || searchSelection.length === 0) {
+            return [];
+        }
+        const pillsArray = [];
+        searchSelection.forEach(item => {
+            pillsArray.push({
+                id: `${item.type || NO_TYPED_SEARCH_ITEM}${divider}${item.id}`,
+                name: item.name
+            });
+        });
+        return pillsArray;
+    }, [isWithPills, searchSelection]);
+    const onRemove = useCallback((removedId) => {
+        const [type, itemId] = removedId.split(divider);
+        const item = searchSelection === null || searchSelection === void 0 ? void 0 : searchSelection.find(el => el.id === itemId);
+        if (item) {
+            handleRemove === null || handleRemove === void 0 ? void 0 : handleRemove(Object.assign(Object.assign({}, item), { type: type === NO_TYPED_SEARCH_ITEM ? undefined : type }));
+        }
+    }, [handleRemove, searchSelection]);
+    const searchComponent = useMemo(() => _jsx(SearchInputRaw, { id: id, ref: ref, placeholder: name, onChange: onChange, onKeyDown: handleSearchKeyDown, onFocus: handleSearchFocus, value: value, className: classNames(["zen-filters-search__search-input", "zen-filters__search", className || ""]) }), [id, ref, name, onChange, handleSearchKeyDown, handleSearchFocus, value, className]);
+    return _jsxs("div", { className: classNames(["zen-filters-search", className || ""]), children: [searchComponent, isWithPills && _jsx("div", { className: "zen-filters-search__selected", children: _jsx(PillBox, { hideSelectedLabel: true, maxPills: 3, selectedPills: memoizedPillsArray, onRemove: onRemove }) })] });
+});
+FiltersSearch.displayName = "FiltersSearch";

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

@@ -0,0 +1,16 @@
+import { FunctionComponent, ReactNode } from "react";
+import { IIcon } from "../../icons/icon";
+import "./filtersSearchItemData.less";
+export interface ISearchItemData {
+    id: string;
+    icon?: FunctionComponent<IIcon> | ReactNode;
+    iconClassName?: string;
+    isActive: boolean;
+    name: string;
+    secondary?: string;
+    onClick?: () => void;
+    onClose?: () => void;
+    isMobile?: boolean;
+    isDrive?: boolean;
+}
+export declare const FiltersSearchItemData: ({ id, icon, isActive, iconClassName, name, secondary, onClick, onClose, isDrive, isMobile }: ISearchItemData) => import("react/jsx-runtime").JSX.Element;

package/esm/filters/components/filtersSearchItemData.js

@@ -0,0 +1,38 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { createElement, useCallback, useMemo } from "react";
+import { useLanguage } from "../../utils/localization/useLanguage";
+import { Button } from "../../button/button";
+import { classNames } from "../../commonHelpers/classNames/classNames";
+import { isActiveElement } from "../../list/utils/isActiveElement";
+import { IconClose } from "../../icons/iconClose";
+export const FiltersSearchItemData = ({ id, icon, isActive, iconClassName, name, secondary, onClick, onClose, isDrive, isMobile }) => {
+    const { translate } = useLanguage();
+    const driveClassName = useMemo(() => isDrive
+        ? isMobile ? "zen-search-item-data--drive" : "zen-search-item-data--drive-tablet"
+        : "", [isDrive, isMobile]);
+    const renderIcon = useCallback((iconComponent, iClassName, className) => {
+        if (typeof iconComponent === "function") {
+            return createElement(iconComponent, { size: "large", className: classNames([className || "", iClassName || ""]) });
+        }
+        return iconComponent;
+    }, []);
+    const handleClick = useCallback((e) => {
+        if (!onClick) {
+            return;
+        }
+        if (e.target instanceof HTMLElement && isActiveElement(e.target)) {
+            return;
+        }
+        onClick();
+    }, [onClick]);
+    const handleClose = useCallback((e) => {
+        if (!onClose) {
+            return;
+        }
+        e.preventDefault();
+        e.stopPropagation();
+        onClose();
+    }, [onClose]);
+    return _jsx("li", { tabIndex: 0, className: classNames(["zen-search-item-data", isActive ? "zen-search-item-data--active" : "",
+            onClick ? "zen-search-item-data--clickable" : "", driveClassName || ""]), "data-list-item-id": id, onClick: handleClick, children: _jsxs("div", { className: "zen-search-item-data__main", children: [icon ? _jsx("div", { className: classNames(["zen-search-item-data__icon", iconClassName || ""]), children: renderIcon(icon) }) : null, _jsxs("div", { className: "zen-search-item-data__main-data", children: [_jsxs("div", { className: "zen-search-item-data__identifier", children: [_jsx("div", { className: "zen-search-item-data__name", children: name }), secondary ? _jsx("div", { className: "zen-search-item-data__secondary", children: secondary }) : null] }), onClose ? _jsx(Button, { type: "tertiary-black", className: "zen-search-item-data__close", onClick: handleClose, title: translate("Close"), "aria-label": translate("Close"), children: _jsx(IconClose, { size: "large", className: "zen-search-item-data__close-icon" }) }) : null] })] }) }, id);
+};

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

@@ -0,0 +1,30 @@
+/// <reference types="react" />
+import "./filtersSearchList.less";
+import { IFetchState } from "../filters";
+import { IIcon } from "../../icons/icon";
+export declare const NO_TYPED_SEARCH_ITEM = "noTypedSearchItem";
+export declare const KEYWORD_ID = "keywordId";
+export declare const KEYWORD_TYPE = "keyword";
+export interface ISearchItem {
+    id: string;
+    name: string;
+    description?: string;
+    type?: string;
+}
+export interface IRecentSearchItem extends Omit<ISearchItem, "type"> {
+    type: string;
+    itemsArray: Omit<IRecentSearchItem, "itemsArray">[];
+}
+export interface IRecentSearchItemWithoutId extends Omit<IRecentSearchItem, "id"> {
+}
+export interface ISearchList {
+    searchData?: IFetchState<ISearchItem[]>;
+    recentSearches?: IFetchState<IRecentSearchItem[]>;
+    searchSelection?: ISearchItem[];
+    handleSearchItemClick?: (searchItem: ISearchItem) => void;
+    handleRecentSearchItemClick?: (recentSearchItem: IRecentSearchItem) => void;
+    onRemoveRecentSearchItem?: (itemIds: string[]) => void;
+    searchValue: string;
+    getIconByType: (type?: string) => React.FC<IIcon>;
+}
+export declare const FiltersSearchList: ({ searchValue, searchData, recentSearches, searchSelection, handleSearchItemClick, onRemoveRecentSearchItem, handleRecentSearchItemClick, getIconByType }: ISearchList) => import("react/jsx-runtime").JSX.Element;