@geotab/zenith 3.0.1 → 3.1.0-beta.0

package/dist/filters/components/filtersModal.js

@@ -1,107 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.FiltersModal = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const modal_1 = require("../../modal/modal");
-const useLanguage_1 = require("../../utils/localization/useLanguage");
-const tabs_1 = require("../../tabs/tabs");
-const filtersHelper_1 = require("../filtersHelper");
-const filtersModalItem_1 = require("./filtersModalItem");
-const classNames_1 = require("../../commonHelpers/classNames/classNames");
-const filtersSavedItemsProvider_1 = require("./filtersSavedItemsProvider");
-const filtersSelect_1 = require("./filtersSelect");
-const filtersSaveModal_1 = require("./filtersSaveModal");
-const button_1 = require("../../button/button");
-const iconDisk_1 = require("../../icons/iconDisk");
-const useDriveClassName_1 = require("../../utils/theme/useDriveClassName");
-const iconPin2_1 = require("../../icons/iconPin2");
-const FiltersModal = ({ isOpen, onClose, onApply, onPin, tabItems, filters, externalModalState, setExternalModalState, isPinned = false }) => {
-    const { translate } = (0, useLanguage_1.useLanguage)();
-    const { onSave } = (0, filtersSavedItemsProvider_1.useFiltersSavedItems)();
-    const iconDriveClassName = (0, useDriveClassName_1.useDriveClassName)("icon");
-    const [activeTabId, setActiveTabId] = (0, react_1.useState)(filtersSelect_1.ALL_SELECT_OPTION_ID);
-    const [isSaveModalOpen, setIsSaveModalOpen] = (0, react_1.useState)(false);
-    const [filtersInternalModalState, setFiltersInternalModalState] = (0, react_1.useState)((0, filtersHelper_1.createStateObject)(filters, "state"));
-    const [initialExternalModalState] = (0, react_1.useState)(externalModalState);
-    const onTabChange = (newVal) => {
-        setActiveTabId(newVal);
-    };
-    const externalMode = (0, react_1.useMemo)(() => {
-        if (externalModalState === undefined || setExternalModalState === undefined) {
-            return false;
-        }
-        return true;
-    }, [externalModalState, setExternalModalState]);
-    const handleInternalFiltersStateChange = (0, react_1.useCallback)((id) => (newState) => {
-        setFiltersInternalModalState((prevState) => (Object.assign(Object.assign({}, prevState), { [id]: newState })));
-    }, []);
-    const handleExternalFiltersStateChange = (0, react_1.useCallback)((id) => (newState) => {
-        setExternalModalState && setExternalModalState({ [id]: newState });
-    }, [setExternalModalState]);
-    const currentState = (0, react_1.useMemo)(() => externalMode ? externalModalState
-        : filtersInternalModalState, [externalMode, externalModalState, filtersInternalModalState]);
-    const currentFilters = (0, react_1.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 = (0, react_1.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 = (0, react_1.useCallback)(() => {
-        const newState = (0, filtersHelper_1.createStateObject)(filters, "defaultState");
-        externalMode && setExternalModalState ? setExternalModalState(Object.assign({}, newState)) : setFiltersInternalModalState(newState);
-    }, [externalMode, filters, setExternalModalState]);
-    const handleApplyClick = (0, react_1.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 = (0, react_1.useCallback)(() => {
-        const newState = (0, filtersHelper_1.createStateObject)(filters, "state");
-        externalMode && setExternalModalState ? setExternalModalState(Object.assign({}, newState)) : setFiltersInternalModalState(newState);
-        onClose();
-    }, [externalMode, filters, onClose, setExternalModalState]);
-    const handleExternalModeClose = (0, react_1.useCallback)(() => {
-        if (!(externalMode && initialExternalModalState && setExternalModalState)) {
-            return;
-        }
-        setExternalModalState(initialExternalModalState);
-        onClose();
-    }, [externalMode, initialExternalModalState, onClose, setExternalModalState]);
-    const toggleSaveModal = (0, react_1.useCallback)(() => {
-        setIsSaveModalOpen(val => !val);
-    }, []);
-    const handleSaveFilters = (0, react_1.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 = (0, react_1.useCallback)((id) => externalMode ? handleExternalFiltersStateChange(id) : handleInternalFiltersStateChange(id), [externalMode, handleExternalFiltersStateChange, handleInternalFiltersStateChange]);
-    const tabsContent = (0, react_1.useMemo)(() => currentFilters.filter((item) => !inhibitedFilters.has(item.props.id))
-        .map((item) => (0, jsx_runtime_1.jsx)(filtersModalItem_1.FiltersModalItem, { item: item, itemState: currentState[item.props.id], changeHandler: modalItemChangeHandler(item.props.id) }, item.props.id)), [currentFilters, inhibitedFilters, currentState, modalItemChangeHandler]);
-    const memoizedActionButtons = (0, react_1.useCallback)((onSaveFn, onPinFn, isPin) => ((0, jsx_runtime_1.jsxs)("div", { className: "zen-filters-modal__header-buttons", children: [onSaveFn && (0, jsx_runtime_1.jsx)(button_1.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: (0, jsx_runtime_1.jsx)(iconDisk_1.IconDisk, { description: translate("Save"), className: "svgIcon", size: iconDriveClassName ? "huge" : "large" }) }), onPinFn && (0, jsx_runtime_1.jsx)(button_1.Button, { type: "tertiary", "data-focusable": "pin", className: (0, classNames_1.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: (0, jsx_runtime_1.jsx)(iconPin2_1.IconPin2, { description: translate("Pin"), className: "svgIcon", size: iconDriveClassName ? "huge" : "large" }) })] })), [iconDriveClassName, translate]);
-    return (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(modal_1.Modal, { className: (0, classNames_1.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), (0, jsx_runtime_1.jsx)(tabs_1.Tabs, { activeTabId: activeTabId, onTabChange: onTabChange, tabs: tabItems }), (0, jsx_runtime_1.jsx)("div", { className: "zen-filters-modal__content", children: tabsContent }), (0, jsx_runtime_1.jsx)(modal_1.Modal.TertiaryButton, { type: "tertiary", onClick: handleClearClick, children: translate("Clear") }), (0, jsx_runtime_1.jsx)(modal_1.Modal.SecondaryButton, { onClick: handleCancelClick, children: translate("Cancel") }), (0, jsx_runtime_1.jsx)(modal_1.Modal.PrimaryButton, { onClick: handleApplyClick, children: translate("Apply") })] }), (0, jsx_runtime_1.jsx)(filtersSaveModal_1.FiltersSaveModal, { isOpen: isSaveModalOpen, onClose: toggleSaveModal, onSave: handleSaveFilters })] });
-};
-exports.FiltersModal = FiltersModal;

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

@@ -1,9 +0,0 @@
-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/dist/filters/components/filtersModalItem.js

@@ -1,74 +0,0 @@
-"use strict";
-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;
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.FiltersModalItem = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const filtersChip_1 = require("./filtersChip");
-const chip_1 = require("../../chip/chip");
-const filtersRange_1 = require("./filtersRange");
-const classNames_1 = require("../../commonHelpers/classNames/classNames");
-const filtersDropdown_1 = require("./filtersDropdown");
-const dropdown_1 = require("../../dropdown/dropdown");
-const filtersGroups_1 = require("./filtersGroups");
-const groupsFilter_1 = require("../../groupsFilter/groupsFilter");
-const filtersDateRange_1 = require("./filtersDateRange");
-const dateRange_1 = require("../../dateRange/dateRange");
-const range_1 = require("../../range/range");
-const chipStatusProvider_1 = require("../../chip/chipStatusProvider");
-const filtersHelper_1 = require("../filtersHelper");
-const FiltersModalItem = ({ item, itemState, changeHandler }) => {
-    const status = (0, chipStatusProvider_1.useChipStatus)();
-    const getComponent = (0, react_1.useCallback)((elem, currentState, handleStateChange, chipStatus) => {
-        const { type, props } = elem;
-        switch (type) {
-            case filtersChip_1.FiltersChip: {
-                const _a = props, { id, state: _globalState, name, onChange: _globalOnChange, className } = _a, otherProps = __rest(_a, ["id", "state", "name", "onChange", "className"]);
-                return (0, jsx_runtime_1.jsx)(chip_1.Chip, Object.assign({ id: `${id}-modal` }, otherProps, { active: currentState, status: currentState ? chipStatus || undefined : undefined, onChange: handleStateChange, children: name }));
-            }
-            case filtersRange_1.FiltersRange: {
-                const _b = props, { id, state: _globalState, name, onChange: _globalOnChange, defaultState, className } = _b, otherProps = __rest(_b, ["id", "state", "name", "onChange", "defaultState", "className"]);
-                return (0, jsx_runtime_1.jsx)(range_1.Range, Object.assign({}, otherProps, { id: `${id}-modal`, className: (0, classNames_1.classNames)(["zen-filters-modal__item-element", className || ""]), fullWidthTriggerButton: true, label: name, value: currentState, onChange: handleStateChange, defaultValue: defaultState, chip: false }));
-            }
-            case filtersDropdown_1.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 = (0, filtersHelper_1.getDropdownStateType)(currentState);
-                const preparedDefaultState = defaultState ? defaultState : (0, filtersHelper_1.prepareDefaultDropdownState)(dropdownStateType);
-                const dropdownProps = Object.assign(Object.assign({}, otherProps), { id: `${id}-modal`, fetchState: fetchState, classNamePopup: (0, classNames_1.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 (0, jsx_runtime_1.jsx)(dropdown_1.Dropdown, Object.assign({}, dropdownProps));
-            }
-            case filtersGroups_1.FiltersGroups: {
-                const _d = props, { id, state: _globalState, onChange: _globalOnChange } = _d, otherProps = __rest(_d, ["id", "state", "onChange"]);
-                return (0, jsx_runtime_1.jsx)(groupsFilter_1.GroupsFilter, Object.assign({ initialFilterState: currentState, onChange: handleStateChange }, otherProps, { chip: false, fullSize: true }));
-            }
-            case filtersDateRange_1.FiltersDateRange: {
-                const _e = props, { id, state: _globalState, onChange: _globalOnChange, defaultState, allowUnsetValue, className } = _e, otherProps = __rest(_e, ["id", "state", "onChange", "defaultState", "allowUnsetValue", "className"]);
-                return allowUnsetValue ? (0, jsx_runtime_1.jsx)(dateRange_1.DateRange, Object.assign({}, otherProps, { id: `${id}-modal`, className: (0, classNames_1.classNames)(["zen-filters-modal__item-element", "zen-filters-modal__item-element--centred", className || ""]), value: currentState, onChange: handleStateChange, defaultValue: defaultState, allowUnsetValue: true, chip: false })) : (0, jsx_runtime_1.jsx)(dateRange_1.DateRange, Object.assign({}, otherProps, { id: `${id}-modal`, className: (0, classNames_1.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 = (0, react_1.useMemo)(() => getComponent(item, itemState, changeHandler, status), [getComponent, item, itemState, changeHandler, status]);
-    return ((0, jsx_runtime_1.jsxs)("div", { className: "zen-filters-modal__item", children: [(0, jsx_runtime_1.jsx)("div", { className: "zen-filters-modal__item-label", children: item.props.name }), (0, jsx_runtime_1.jsx)("div", { children: memoizedItem })] }));
-};
-exports.FiltersModalItem = FiltersModalItem;

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

@@ -1,17 +0,0 @@
-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

@@ -1,103 +0,0 @@
-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

@@ -1,9 +0,0 @@
-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

@@ -1,70 +0,0 @@
-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 })] }));
-};