@geotab/zenith 3.0.1-beta.4 → 3.1.0-beta.0

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

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

package/dist/filters/components/filtersSelectListItem.js

@@ -2,13 +2,23 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.FiltersSelectListExpandableItem = exports.FiltersSelectListItem = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const button_1 = require("../../button/button");
 const classNames_1 = require("../../commonHelpers/classNames/classNames");
 const useUniqueId_1 = require("../../commonHelpers/useUniqueId");
-const iconChevronBottom_1 = require("../../icons/iconChevronBottom");
+const iconChevronDownSmall_1 = require("../../icons/iconChevronDownSmall");
+const useLanguage_1 = require("../../utils/localization/useLanguage");
 const FiltersSelectListItem = ({ id, name, isActive, onClick, className = "" }) => (0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)("button", { type: "button", className: (0, classNames_1.classNames)(["zen-filters-select__list-item", isActive ? "zen-filters-select__list-item--active" : "", className]), id: id, onClick: onClick, children: name }) });
 exports.FiltersSelectListItem = FiltersSelectListItem;
-const FiltersSelectListExpandableItem = ({ id, name, content, isActive, onClick, className = "" }) => {
+const FiltersSelectListExpandableItem = ({ id, name, content, isActive, isExpanded, onClick, className = "", onExpandItem }) => {
     const ariaControlsId = (0, useUniqueId_1.useUniqueId)();
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("button", { type: "button", "aria-expanded": isActive, "aria-controls": ariaControlsId, className: (0, classNames_1.classNames)(["zen-filters-select__list-item", isActive ? "zen-filters-select__list-item--active" : "", className]), id: id, onClick: onClick, children: [name, (0, jsx_runtime_1.jsx)(iconChevronBottom_1.IconChevronBottom, { size: "large", className: (0, classNames_1.classNames)(["zen-filters-select__item-icon", isActive ? "zen-filters-select__item-icon--rotated" : ""]) })] }), (0, jsx_runtime_1.jsx)("div", { id: ariaControlsId, "aria-labelledby": id, role: "region", className: (0, classNames_1.classNames)(["zen-filters-select__item-content", content ? "" : "zen-filters-select__item-content--hidden"]), children: content })] }));
+    const { translate } = (0, useLanguage_1.useLanguage)();
+    const handleExpandItem = (0, react_1.useCallback)((e) => {
+        e.stopPropagation();
+        if (onExpandItem) {
+            onExpandItem();
+        }
+    }, [onExpandItem]);
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { className: (0, classNames_1.classNames)(["zen-filters-select__list-item-wrapper", isExpanded ? "zen-filters-select__list-item-wrapper--expanded" : "", className]), children: [(0, jsx_runtime_1.jsx)("button", { type: "button", className: (0, classNames_1.classNames)(["zen-filters-select__list-item"]), id: id, onClick: onClick, children: (0, jsx_runtime_1.jsxs)("div", { className: "zen-filters-select__list-item-title", children: [name, isActive ? (0, jsx_runtime_1.jsx)("div", { className: "zen-filters-select__item-active-indicator" }) : null] }) }), (0, jsx_runtime_1.jsx)(button_1.Button, { type: "tertiary-black", onClick: handleExpandItem, className: "zen-filters-select__item-button", "aria-expanded": isExpanded, "aria-controls": ariaControlsId, "aria-label": isExpanded ? `${translate("Collapse")} ${name}` : `${translate("Expand")} ${name}`, children: (0, jsx_runtime_1.jsx)(iconChevronDownSmall_1.IconChevronDownSmall, { size: "large", className: (0, classNames_1.classNames)(["zen-filters-select__item-icon", isExpanded ? "zen-filters-select__item-icon--rotated" : ""]) }) })] }), (0, jsx_runtime_1.jsx)("div", { id: ariaControlsId, "aria-labelledby": id, role: "region", className: (0, classNames_1.classNames)(["zen-filters-select__item-content", content ? "" : "zen-filters-select__item-content--hidden"]), children: content })] }));
 };
 exports.FiltersSelectListExpandableItem = FiltersSelectListExpandableItem;

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

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

package/dist/filters/components/filtersSidePanel.js

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

package/dist/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/dist/filters/components/filtersSidePanelChip.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FiltersSidePanelChip = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const checkbox_1 = require("../../checkbox/checkbox");
+const FiltersSidePanelChip = ({ currentState, handleStateChange, id, children }) => {
+    const handleChange = (0, react_1.useCallback)((e) => {
+        handleStateChange(e.target.checked);
+    }, [handleStateChange]);
+    return (0, jsx_runtime_1.jsx)(checkbox_1.Checkbox, { fullWidth: true, id: id, onChange: handleChange, checked: currentState, children: children });
+};
+exports.FiltersSidePanelChip = FiltersSidePanelChip;

package/dist/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/dist/filters/components/filtersSidePanelDropdown.js

@@ -0,0 +1,85 @@
+"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.FiltersSidePanelDropdown = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const classNames_1 = require("../../commonHelpers/classNames/classNames");
+const dropdown_1 = require("../../dropdown/dropdown");
+const filtersHelper_1 = require("../filtersHelper");
+const filtersChip_1 = require("./filtersChip");
+const skeleton_1 = require("../../skeleton/skeleton");
+const dropdownHelper_1 = require("../../dropdown/dropdownHelper");
+const radioGroup_1 = require("../../radioGroup/radioGroup");
+const groupsHelper_1 = require("../../groupsFilter/groupsHelper");
+const useLanguage_1 = require("../../utils/localization/useLanguage");
+const skeletonList_1 = require("../../skeletonList/skeletonList");
+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 = (0, react_1.useRef)(null);
+    const { translate } = (0, useLanguage_1.useLanguage)();
+    const dropdownStateType = (0, react_1.useMemo)(() => (0, filtersHelper_1.getDropdownStateType)(currentState), [currentState]);
+    const isMultiselect = (0, react_1.useMemo)(() => dropdownStateType === "fullSelection" || dropdownStateType === "fullSelectionWithCheckbox" ? true
+        : (elemProps.multiselect === undefined ? true : elemProps.multiselect), [dropdownStateType, elemProps]);
+    const [componentType, setComponentType] = (0, react_1.useState)(dropdownStateType !== "base" ? "popup" : undefined);
+    const sortFn = (0, react_1.useMemo)(() => otherProps.sortFn, [otherProps]);
+    (0, react_1.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 = (0, dropdownHelper_1.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 : (0, filtersHelper_1.prepareDefaultDropdownState)(dropdownStateType);
+    const dropdownProps = Object.assign(Object.assign({}, otherProps), { id: `${id}-side-panel`, fetchState: fetchState, dataItems: dataItems, isLoading: dataItems !== undefined ? isLoading : undefined, classNamePopup: (0, classNames_1.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 = (0, react_1.useCallback)((itemId) => (value) => {
+        const newValue = () => value ? [...currentState, itemId] : currentState.filter(elId => elId !== itemId);
+        handleStateChange(newValue());
+    }, [currentState, handleStateChange]);
+    const handleRadioChange = (0, react_1.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 ? (0, jsx_runtime_1.jsx)(skeleton_1.Skeleton, { width: 328, height: 32 }) : (0, jsx_runtime_1.jsx)(skeletonList_1.SkeletonList, { className: "zen-side-panel-filters__dropdown-skeleton", size: "small" });
+    }
+    if (componentType === "chip" && dropdownDataRef.current) {
+        const dropdownChips = dropdownDataRef.current.map((item) => ((0, jsx_runtime_1.jsx)(filtersChip_1.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 (0, jsx_runtime_1.jsx)("div", { className: (0, classNames_1.classNames)(["zen-side-panel-filters__dropdown-item-chips-container"]), children: dropdownChips });
+    }
+    if (componentType === "radio" && dropdownDataRef.current) {
+        const dropdownRadioGroup = (0, jsx_runtime_1.jsx)(radioGroup_1.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: (0, jsx_runtime_1.jsx)("span", { children: (0, groupsHelper_1.getGroupDescription)(item, translate) })
+            })), fullWidth: true, name: name, onChange: handleRadioChange, value: currentState[0] });
+        return (0, jsx_runtime_1.jsx)("div", { className: (0, classNames_1.classNames)(["zen-side-panel-filters__dropdown-item-radio-group-container"]), children: dropdownRadioGroup });
+    }
+    return (0, jsx_runtime_1.jsx)(dropdown_1.Dropdown, Object.assign({}, dropdownProps));
+};
+exports.FiltersSidePanelDropdown = FiltersSidePanelDropdown;

package/dist/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/dist/filters/components/filtersSidePanelItem.js

@@ -0,0 +1,67 @@
+"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.FiltersSidePanelItem = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+/* eslint-disable complexity */
+const react_1 = require("react");
+const filtersChip_1 = require("./filtersChip");
+const filtersRange_1 = require("./filtersRange");
+const classNames_1 = require("../../commonHelpers/classNames/classNames");
+const filtersDropdown_1 = require("./filtersDropdown");
+const filtersGroups_1 = require("./filtersGroups");
+const groupsFilter_1 = require("../../groupsFilter/groupsFilter");
+const filtersDateRange_1 = require("./filtersDateRange");
+const dateRange_1 = require("../../dateRange/dateRange");
+const filtersDateInput_1 = require("./filtersDateInput");
+const dateInput_1 = require("../../dateInput/dateInput");
+const filtersSidePanelDropdown_1 = require("./filtersSidePanelDropdown");
+const filtersSidePanelChip_1 = require("./filtersSidePanelChip");
+const useUniqueId_1 = require("../../commonHelpers/useUniqueId");
+const filtersSidePanelRange_1 = require("./filtersSidePanelRange");
+const FiltersSidePanelItem = ({ item, itemState, changeHandler, errorCheck }) => {
+    const labelledId = (0, useUniqueId_1.useUniqueId)();
+    const getComponent = (0, react_1.useCallback)((elem, currentState, handleStateChange) => {
+        const { type, props } = elem;
+        switch (type) {
+            case filtersChip_1.FiltersChip: {
+                const { id, state: _globalState, name, onChange: _globalOnChange } = props;
+                return (0, jsx_runtime_1.jsx)(filtersSidePanelChip_1.FiltersSidePanelChip, { id: `${id}-side-panel`, currentState: currentState, handleStateChange: handleStateChange, children: name });
+            }
+            case filtersRange_1.FiltersRange: {
+                const _a = props, { id, state: _globalState, name, onChange: _globalOnChange, defaultState, className } = _a, otherProps = __rest(_a, ["id", "state", "name", "onChange", "defaultState", "className"]);
+                return (0, jsx_runtime_1.jsx)(filtersSidePanelRange_1.FiltersSidePanelRange, Object.assign({}, otherProps, { id: `${id}-side-panel`, onChange: handleStateChange, value: currentState, errorCheck: errorCheck, className: (0, classNames_1.classNames)(["zen-side-panel-filters__item-element", className || ""]) }));
+            }
+            case filtersDropdown_1.FiltersDropdown: {
+                return (0, jsx_runtime_1.jsx)(filtersSidePanelDropdown_1.FiltersSidePanelDropdown, { elemProps: props, currentState: currentState, handleStateChange: handleStateChange });
+            }
+            case filtersGroups_1.FiltersGroups: {
+                const _b = props, { id, state: _globalState, onChange: _globalOnChange } = _b, otherProps = __rest(_b, ["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 _c = props, { id, state: _globalState, onChange: _globalOnChange, defaultState, allowUnsetValue, className, classNamePopup } = _c, otherProps = __rest(_c, ["id", "state", "onChange", "defaultState", "allowUnsetValue", "className", "classNamePopup"]);
+                return allowUnsetValue ? (0, jsx_runtime_1.jsx)(dateRange_1.DateRange, Object.assign({}, otherProps, { id: `${id}-side-panel`, classNamePopup: (0, classNames_1.classNames)([classNamePopup || "", "zen-side-panel-filters__date-popup--full-width"]), className: (0, classNames_1.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 })) : (0, jsx_runtime_1.jsx)(dateRange_1.DateRange, Object.assign({}, otherProps, { id: `${id}-side-panel`, classNamePopup: (0, classNames_1.classNames)([classNamePopup || "", "zen-side-panel-filters__date-popup--full-width"]), className: (0, classNames_1.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_1.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 (0, jsx_runtime_1.jsx)(dateInput_1.DateInput, Object.assign({}, otherProps, { id: `${id}-side-panel`, classNamePopup: (0, classNames_1.classNames)([classNamePopup || "", "zen-side-panel-filters__date-popup--full-width"]), className: (0, classNames_1.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 = (0, react_1.useMemo)(() => getComponent(item, itemState, changeHandler), [getComponent, item, itemState, changeHandler]);
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "zen-side-panel-filters__item", role: "group", "aria-labelledby": labelledId, children: [(0, jsx_runtime_1.jsx)("div", { className: "zen-side-panel-filters__item-label", id: labelledId, children: item.props.name }), (0, jsx_runtime_1.jsx)("div", { children: memoizedItem })] }));
+};
+exports.FiltersSidePanelItem = FiltersSidePanelItem;

package/dist/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/dist/filters/components/filtersSidePanelRange.js

@@ -0,0 +1,28 @@
+"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.FiltersSidePanelRange = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const filtersBarSidePanelRange_1 = require("../../filtersBar/filtersBarSidePanel/components/filtersBarSidePanelRange/filtersBarSidePanelRange");
+const rangeHelper_1 = require("../../range/rangeHelper");
+const FiltersSidePanelRange = (_a) => {
+    var { errorCheck } = _a, otherProps = __rest(_a, ["errorCheck"]);
+    const { value } = otherProps;
+    const hasError = (0, react_1.useMemo)(() => (0, rangeHelper_1.checkErrorType)(value.min, value.max, otherProps.fullBounded, otherProps.allowEqualMinMax, otherProps.min, otherProps.max) !== undefined, [value, otherProps.fullBounded, otherProps.allowEqualMinMax, otherProps.min, otherProps.max]);
+    (0, react_1.useEffect)(() => {
+        errorCheck(hasError);
+    }, [errorCheck, hasError]);
+    return (0, jsx_runtime_1.jsx)(filtersBarSidePanelRange_1.FiltersBarSidePanelRange, Object.assign({}, otherProps));
+};
+exports.FiltersSidePanelRange = FiltersSidePanelRange;

package/dist/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 {};