npm - @geotab/zenith - Versions diffs - 3.0.0 → 3.0.1-beta.1 - Mend

@geotab/zenith 3.0.0 → 3.0.1-beta.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (2506) hide show

package/dist/filtersBar/filtersBar.test.js DELETED Viewed

@@ -1,930 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const jsx_runtime_1 = require("react/jsx-runtime");
-const filtersBar_1 = require("./filtersBar");
-const react_1 = require("@testing-library/react");
-require("../testHelpers/geotab-axe");
-const button_1 = require("../button/button");
-const filtersBarSearch_1 = require("./components/filtersBarSearch/filtersBarSearch");
-const sidePanelCell_1 = require("../sidePanel/sidePanelCell/sidePanelCell");
-const toggleButton_1 = require("../toggleButton/toggleButton");
-const filtersBarGroupButton_1 = require("./components/filtersBarGroupButton/filtersBarGroupButton");
-const filtersBarDropdownWithCheckbox_1 = require("./components/filtersBarDropdownWithCheckbox/filtersBarDropdownWithCheckbox");
-jest.mock("./../utils/localization/useLanguage", () => ({
-    useLanguage: () => ({
-        translate: jest.fn((phrase) => phrase)
-    })
-}));
-describe("filtersBar", () => {
-    let mock;
-    const debounceTimeout = 300;
-    beforeEach(() => {
-        window.innerWidth = 1000;
-        mock = jest.spyOn(window, "requestAnimationFrame").mockImplementation((callback) => {
-            callback(100);
-            callback(200);
-            return 1;
-        });
-    });
-    afterEach(() => {
-        mock.mockRestore();
-    });
-    test("renders correctly", () => {
-        const { container } = (0, react_1.render)((0, jsx_runtime_1.jsx)(filtersBar_1.FiltersBar, { toggleAllFilters: () => { }, onClearAllFilters: () => { }, getDefaultFiltersState: () => ({}), isAllFiltersVisible: false, className: "filtersBar", children: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}) }));
-        expect(container).toBeDefined();
-    });
-    test("renders only one component", () => {
-        const { container } = (0, react_1.render)((0, jsx_runtime_1.jsx)(filtersBar_1.FiltersBar, { toggleAllFilters: () => { }, onClearAllFilters: () => { }, getDefaultFiltersState: () => ({}), isAllFiltersVisible: false, children: (0, jsx_runtime_1.jsx)(filtersBarSearch_1.FiltersBarSearch, { onChange: () => { }, state: { value: "" }, sidePanelTitle: "asdasd", id: "search" }) }));
-        expect(container).toBeDefined();
-        expect(document.body.querySelector(".zen-side-panel-filters-bar")).toBeNull();
-    });
-    test("handle event when click on cross icon in Side panel", () => {
-        const handleToggleAllFilters = jest.fn();
-        const { container } = (0, react_1.render)((0, jsx_runtime_1.jsx)(filtersBar_1.FiltersBar, { toggleAllFilters: handleToggleAllFilters, onClearAllFilters: () => { }, getDefaultFiltersState: () => ({}), isAllFiltersVisible: true, children: (0, jsx_runtime_1.jsx)(filtersBarSearch_1.FiltersBarSearch, { onChange: () => { }, state: { value: "" }, sidePanelTitle: "asdasd", id: "search" }) }));
-        expect(container).toBeDefined();
-        (0, react_1.act)(() => {
-            react_1.fireEvent.click(document.querySelector(".zen-side-panel-filters-bar__close-button"));
-        });
-        expect(handleToggleAllFilters).toHaveBeenCalledTimes(1);
-    });
-    test("handle event when click on Filters", () => {
-        const handleToggleAllFilters = jest.fn();
-        const { container } = (0, react_1.render)((0, jsx_runtime_1.jsx)(filtersBar_1.FiltersBar, { toggleAllFilters: handleToggleAllFilters, onClearAllFilters: () => { }, getDefaultFiltersState: () => ({}), isAllFiltersVisible: true, children: (0, jsx_runtime_1.jsx)(filtersBarSearch_1.FiltersBarSearch, { onChange: () => { }, state: { value: "" }, sidePanelTitle: "asdasd", id: "search" }) }));
-        expect(container).toBeDefined();
-        (0, react_1.act)(() => {
-            const filters = container.querySelector(".zen-filters-toolbar__all-filters");
-            react_1.fireEvent.click(filters);
-        });
-        expect(handleToggleAllFilters).toHaveBeenCalledTimes(1);
-    });
-    test("hideAllFiltersButton changes SidePanel and 'Filters' button visibility", () => {
-        const handleToggleAllFilters = jest.fn();
-        const { container, getByText } = (0, react_1.render)((0, jsx_runtime_1.jsx)(filtersBar_1.FiltersBar, { toggleAllFilters: handleToggleAllFilters, onClearAllFilters: () => { }, getDefaultFiltersState: () => ({}), isAllFiltersVisible: true, hideAllFiltersButton: true, children: (0, jsx_runtime_1.jsx)(filtersBarSearch_1.FiltersBarSearch, { onChange: () => { }, state: { value: "" }, sidePanelTitle: "asdasd", id: "search" }) }));
-        expect(container).toBeDefined();
-        expect(() => getByText("Filters")).toThrow();
-        expect(document.body.querySelector(".zen-side-panel-filters-bar")).toBeNull();
-    });
-    test("renders side panel", () => {
-        const { container } = (0, react_1.render)((0, jsx_runtime_1.jsx)(filtersBar_1.FiltersBar, { toggleAllFilters: () => { }, onClearAllFilters: () => { }, getDefaultFiltersState: () => ({}), isAllFiltersVisible: true, children: (0, jsx_runtime_1.jsx)(filtersBarSearch_1.FiltersBarSearch, { onChange: () => { }, state: { value: "" }, showInSidePanel: true, sidePanelTitle: "asdasd", id: "search" }) }));
-        expect(container).toBeDefined();
-        expect(document.body.querySelector(".zen-side-panel-filters-bar")).not.toBeNull();
-    });
-    test("renders only allowed components", () => {
-        const { container, getByText } = (0, react_1.render)((0, jsx_runtime_1.jsxs)(filtersBar_1.FiltersBar, { toggleAllFilters: () => { }, onClearAllFilters: () => { }, getDefaultFiltersState: () => ({}), isAllFiltersVisible: false, className: "filtersBar", children: [(0, jsx_runtime_1.jsx)(button_1.Button, { id: "button", children: "Button text" }), (0, jsx_runtime_1.jsx)(filtersBarSearch_1.FiltersBarSearch, { onChange: () => { }, state: { value: "" }, sidePanelTitle: "asdasd", id: "search" })] }));
-        expect(container).toBeDefined();
-        expect(() => getByText("Button text")).toThrow();
-    });
-    test("should 'Apply' button be visible when onApplyAllFilters pass", async () => {
-        const handleToggleAllFilters = jest.fn();
-        const mockedOnApplyAllFilters = jest.fn();
-        const searchChangeHandler = jest.fn();
-        const { container, rerender } = (0, react_1.render)((0, jsx_runtime_1.jsx)(filtersBar_1.FiltersBar, { toggleAllFilters: handleToggleAllFilters, onApplyAllFilters: mockedOnApplyAllFilters, onClearAllFilters: () => { }, getDefaultFiltersState: () => ({ search: { state: { value: "" } } }), isAllFiltersVisible: false, children: (0, jsx_runtime_1.jsx)(filtersBarSearch_1.FiltersBarSearch, { onChange: searchChangeHandler, state: { value: "" }, sidePanelTitle: "asdasd", id: "search" }) }));
-        expect(container).toBeDefined();
-        const getApplyButton = () => container.querySelector(".zen-filters-toolbar__actions .zen-filters-toolbar__apply");
-        expect(getApplyButton()).toBeNull();
-        const inputElement = container.querySelector("input.zen-text-input");
-        expect(inputElement).not.toBeNull();
-        react_1.fireEvent.change(inputElement, { target: { value: "new value" } });
-        await (0, react_1.waitFor)(() => {
-            expect(searchChangeHandler).toHaveBeenCalledTimes(1);
-            expect(searchChangeHandler).toHaveBeenCalledWith({ value: "new value" });
-            expect(mockedOnApplyAllFilters).toHaveBeenCalledTimes(0);
-        });
-        expect(getApplyButton()).toBeNull();
-        rerender((0, jsx_runtime_1.jsx)(filtersBar_1.FiltersBar, { toggleAllFilters: handleToggleAllFilters, onApplyAllFilters: mockedOnApplyAllFilters, onClearAllFilters: () => { }, getDefaultFiltersState: () => ({ search: { state: { value: "" } } }), isAllFiltersVisible: false, children: (0, jsx_runtime_1.jsx)(filtersBarSearch_1.FiltersBarSearch, { onChange: searchChangeHandler, state: { value: "new value" }, sidePanelTitle: "asdasd", id: "search" }) }));
-        expect(getApplyButton()).not.toBeNull();
-        react_1.fireEvent.click(getApplyButton());
-        await (0, react_1.waitFor)(() => {
-            expect(mockedOnApplyAllFilters).toHaveBeenCalledTimes(1);
-        });
-    });
-    test("should 'clear' button apply changes without 'Apply' click", async () => {
-        const handleToggleAllFilters = jest.fn();
-        const mockedOnApplyAllFilters = jest.fn();
-        const searchChangeHandler = jest.fn();
-        const groupButtonChangeHandler = jest.fn();
-        const filterButtonProps = {
-            groupData: [{
-                    value: "test1",
-                    name: "test1"
-                }, {
-                    value: "test2",
-                    name: "test2"
-                }],
-            className: "test"
-        };
-        const { container, rerender } = (0, react_1.render)((0, jsx_runtime_1.jsxs)(filtersBar_1.FiltersBar, { toggleAllFilters: handleToggleAllFilters, onApplyAllFilters: mockedOnApplyAllFilters, getDefaultFiltersState: () => ({ search: { state: { value: "" } }, groupButton: { state: { selectedValue: "test1" } } }), isAllFiltersVisible: false, children: [(0, jsx_runtime_1.jsx)(filtersBarSearch_1.FiltersBarSearch, { onChange: searchChangeHandler, state: { value: "" }, sidePanelTitle: "asdasd", id: "search" }), (0, jsx_runtime_1.jsx)(filtersBarGroupButton_1.FiltersBarGroupButton, { id: "groupButton", onChange: groupButtonChangeHandler, state: { selectedValue: "test1" }, props: filterButtonProps, sidePanelTitle: "test" })] }));
-        expect(container).toBeDefined();
-        const getApplyButton = () => container.querySelector(".zen-filters-toolbar__actions .zen-filters-toolbar__apply");
-        const getClearButton = () => container.querySelector(".zen-filters-toolbar__actions .zen-filters-toolbar__clear");
-        const getActionQuantity = () => container.querySelector(".zen-filters-toolbar__all-filters .zen-filters-toolbar__action-quantity");
-        expect(getApplyButton()).toBeDefined();
-        expect(getClearButton()).toBeNull();
-        expect(getActionQuantity()).toBeNull();
-        let inputElement = container.querySelector("input.zen-text-input");
-        expect(inputElement).not.toBeNull();
-        react_1.fireEvent.change(inputElement, { target: { value: "new value" } });
-        await (0, react_1.waitFor)(() => {
-            expect(searchChangeHandler).toHaveBeenCalledTimes(1);
-            expect(searchChangeHandler).toHaveBeenCalledWith({ value: "new value" });
-            expect(mockedOnApplyAllFilters).toHaveBeenCalledTimes(0);
-        });
-        rerender((0, jsx_runtime_1.jsxs)(filtersBar_1.FiltersBar, { toggleAllFilters: handleToggleAllFilters, onApplyAllFilters: mockedOnApplyAllFilters, getDefaultFiltersState: () => ({ search: { state: { value: "" } }, groupButton: { state: { selectedValue: "test1" } } }), isAllFiltersVisible: false, children: [(0, jsx_runtime_1.jsx)(filtersBarSearch_1.FiltersBarSearch, { onChange: searchChangeHandler, state: { value: "new value" }, sidePanelTitle: "asdasd", id: "search" }), (0, jsx_runtime_1.jsx)(filtersBarGroupButton_1.FiltersBarGroupButton, { id: "groupButton", onChange: groupButtonChangeHandler, state: { selectedValue: "test1" }, props: filterButtonProps, sidePanelTitle: "test" })] }));
-        expect(getActionQuantity()).toBeNull();
-        expect(getClearButton()).toBeDefined();
-        expect(mockedOnApplyAllFilters).toHaveBeenCalledTimes(0);
-        expect(groupButtonChangeHandler).toHaveBeenCalledTimes(0);
-        react_1.fireEvent.click(getApplyButton());
-        await (0, react_1.waitFor)(() => {
-            expect(mockedOnApplyAllFilters).toHaveBeenCalledTimes(1);
-            expect(mockedOnApplyAllFilters).toHaveBeenCalledWith({ search: { state: { value: "new value" } }, groupButton: { state: { selectedValue: "test1" } } });
-        });
-        expect(searchChangeHandler).toHaveBeenCalledTimes(1);
-        expect(getClearButton()).toBeDefined();
-        expect(getActionQuantity().textContent).toBe("1");
-        react_1.fireEvent.click(getClearButton());
-        await (0, react_1.waitFor)(() => {
-            expect(searchChangeHandler).toHaveBeenCalledTimes(2);
-            expect(searchChangeHandler).toHaveBeenCalledWith({ value: "" });
-            expect(groupButtonChangeHandler).toHaveBeenCalledTimes(1);
-            expect(mockedOnApplyAllFilters).toHaveBeenCalledTimes(2);
-            expect(mockedOnApplyAllFilters).toHaveBeenCalledWith({ search: { state: { value: "" } }, groupButton: { state: { selectedValue: "test1" } } });
-        });
-        rerender((0, jsx_runtime_1.jsxs)(filtersBar_1.FiltersBar, { toggleAllFilters: handleToggleAllFilters, onApplyAllFilters: mockedOnApplyAllFilters, getDefaultFiltersState: () => ({ search: { state: { value: "" } }, groupButton: { state: { selectedValue: "test1" } } }), isAllFiltersVisible: false, children: [(0, jsx_runtime_1.jsx)(filtersBarSearch_1.FiltersBarSearch, { onChange: searchChangeHandler, state: { value: "" }, sidePanelTitle: "asdasd", id: "search" }), (0, jsx_runtime_1.jsx)(filtersBarGroupButton_1.FiltersBarGroupButton, { id: "groupButton", onChange: groupButtonChangeHandler, state: { selectedValue: "test1" }, props: filterButtonProps, sidePanelTitle: "test" })] }));
-        expect(getApplyButton()).toBeDefined();
-        expect(getClearButton()).toBeNull();
-        expect(getActionQuantity()).toBeNull();
-        inputElement = container.querySelector("input.zen-text-input");
-        expect(inputElement).not.toBeNull();
-        expect(mockedOnApplyAllFilters).toHaveBeenCalledTimes(2);
-        react_1.fireEvent.change(inputElement, { target: { value: "some value" } });
-        await (0, react_1.waitFor)(() => {
-            expect(searchChangeHandler).toHaveBeenCalledTimes(3);
-            expect(searchChangeHandler).toHaveBeenCalledWith({ value: "some value" });
-            expect(mockedOnApplyAllFilters).toHaveBeenCalledTimes(2);
-        });
-        const getGroupButton = (value, label) => container.querySelector(`.zen-group-button input[value='${value}'] ${label ? "~label" : ""}`);
-        expect((getGroupButton("test1")).getAttribute("checked")).toBeDefined();
-        expect((getGroupButton("test2")).getAttribute("checked")).toBeNull();
-        expect(groupButtonChangeHandler).toHaveBeenCalledTimes(1);
-        react_1.fireEvent.click(getGroupButton("test2", true));
-        await (0, react_1.waitFor)(() => {
-            expect(groupButtonChangeHandler).toHaveBeenCalledTimes(2);
-            expect(groupButtonChangeHandler).toHaveBeenCalledWith({ selectedValue: "test2" });
-        });
-        rerender((0, jsx_runtime_1.jsxs)(filtersBar_1.FiltersBar, { toggleAllFilters: handleToggleAllFilters, onApplyAllFilters: mockedOnApplyAllFilters, getDefaultFiltersState: () => ({ search: { state: { value: "" } }, groupButton: { state: { selectedValue: "test1" } } }), isAllFiltersVisible: false, children: [(0, jsx_runtime_1.jsx)(filtersBarSearch_1.FiltersBarSearch, { onChange: searchChangeHandler, state: { value: "some value" }, sidePanelTitle: "asdasd", id: "search" }), (0, jsx_runtime_1.jsx)(filtersBarGroupButton_1.FiltersBarGroupButton, { id: "groupButton", onChange: groupButtonChangeHandler, state: { selectedValue: "test2" }, props: filterButtonProps, sidePanelTitle: "test" })] }));
-        expect((getGroupButton("test1")).getAttribute("checked")).toBe("");
-        expect((getGroupButton("test2")).getAttribute("checked")).toBeDefined();
-        expect(getClearButton()).toBeDefined();
-        expect(getActionQuantity()).toBeNull();
-        react_1.fireEvent.click(getClearButton());
-        await (0, react_1.waitFor)(() => {
-            expect(searchChangeHandler).toHaveBeenCalledTimes(4);
-            expect(searchChangeHandler).toHaveBeenCalledWith({ value: "" });
-            expect(groupButtonChangeHandler).toHaveBeenCalledTimes(3);
-            expect(groupButtonChangeHandler).toHaveBeenCalledWith({ selectedValue: "test1" });
-            expect(mockedOnApplyAllFilters).toHaveBeenCalledTimes(3);
-            expect(mockedOnApplyAllFilters).toHaveBeenCalledWith({ search: { state: { value: "" } }, groupButton: { state: { selectedValue: "test1" } } });
-        });
-    });
-    test("shouldn't 'clear' button apply changes without 'Apply' click in sidePanel", async () => {
-        const handleToggleAllFilters = jest.fn();
-        const mockedOnApplyAllFilters = jest.fn();
-        const searchChangeHandler = jest.fn();
-        const groupButtonChangeHandler = jest.fn();
-        const filterButtonProps = {
-            groupData: [{
-                    value: "test1",
-                    name: "test1"
-                }, {
-                    value: "test2",
-                    name: "test2"
-                }],
-            className: "test"
-        };
-        const { container, rerender } = (0, react_1.render)((0, jsx_runtime_1.jsxs)(filtersBar_1.FiltersBar, { toggleAllFilters: handleToggleAllFilters, onApplyAllFilters: mockedOnApplyAllFilters, getDefaultFiltersState: () => ({ search: { state: { value: "" } }, groupButton: { state: { selectedValue: "test1" } } }), isAllFiltersVisible: false, children: [(0, jsx_runtime_1.jsx)(filtersBarSearch_1.FiltersBarSearch, { showInSidePanel: true, onChange: searchChangeHandler, state: { value: "some value" }, sidePanelTitle: "asdasd", id: "search" }), (0, jsx_runtime_1.jsx)(filtersBarGroupButton_1.FiltersBarGroupButton, { showInSidePanel: true, id: "groupButton", onChange: groupButtonChangeHandler, state: { selectedValue: "test1" }, props: filterButtonProps, sidePanelTitle: "test" })] }));
-        const getActionQuantity = () => container.querySelector(".zen-filters-toolbar__all-filters .zen-filters-toolbar__action-quantity");
-        expect(getActionQuantity().textContent).toBe("1");
-        expect(document.body.querySelector(".zen-side-panel-filters-bar")).toBeNull();
-        rerender((0, jsx_runtime_1.jsxs)(filtersBar_1.FiltersBar, { toggleAllFilters: handleToggleAllFilters, onApplyAllFilters: mockedOnApplyAllFilters, getDefaultFiltersState: () => ({ search: { state: { value: "" } }, groupButton: { state: { selectedValue: "test1" } } }), isAllFiltersVisible: true, children: [(0, jsx_runtime_1.jsx)(filtersBarSearch_1.FiltersBarSearch, { showInSidePanel: true, onChange: searchChangeHandler, state: { value: "some value" }, sidePanelTitle: "asdasd", id: "search" }), (0, jsx_runtime_1.jsx)(filtersBarGroupButton_1.FiltersBarGroupButton, { showInSidePanel: true, id: "groupButton", onChange: groupButtonChangeHandler, state: { selectedValue: "test1" }, props: filterButtonProps, sidePanelTitle: "test" })] }));
-        expect(document.body.querySelector(".zen-side-panel-filters-bar")).not.toBeNull();
-        expect(document.body.querySelector(".zen-side-panel-filters-bar")?.childElementCount).toBe(1);
-        const getApplyButton = () => document.body.querySelector(".zen-side-panel-filters-bar__apply-button");
-        const getResetButton = () => document.body.querySelector(".zen-side-panel-filters-bar__clear-button");
-        expect(getApplyButton()).toBeDefined();
-        expect(getResetButton()).toBeDefined();
-        const getGroupButton = (value, label) => document.body.querySelector(`.zen-side-panel-cell__content .zen-group-button input[value='${value}'] ${label ? "~label" : ""}`);
-        let inputElement = document.body.querySelector(".zen-side-panel-cell__content input.zen-text-input");
-        expect(inputElement).not.toBeNull();
-        react_1.fireEvent.change(inputElement, { target: { value: "new value" } });
-        await (0, react_1.waitFor)(() => {
-            inputElement = document.body.querySelector(".zen-side-panel-cell__content input.zen-text-input");
-            expect(inputElement.value).toBe("new value");
-        });
-        expect((getGroupButton("test1")).getAttribute("checked")).toBeDefined();
-        expect((getGroupButton("test2")).getAttribute("checked")).toBeNull();
-        react_1.fireEvent.click(getGroupButton("test2", true));
-        await (0, react_1.waitFor)(() => {
-            expect((getGroupButton("test1")).getAttribute("checked")).toBe("");
-            expect((getGroupButton("test2")).getAttribute("checked")).toBeDefined();
-        });
-        react_1.fireEvent.click(getResetButton());
-        expect(mockedOnApplyAllFilters).toHaveBeenCalledTimes(0);
-        expect(searchChangeHandler).toHaveBeenCalledTimes(0);
-        expect(groupButtonChangeHandler).toHaveBeenCalledTimes(0);
-        expect(handleToggleAllFilters).toHaveBeenCalledTimes(0);
-        react_1.fireEvent.click(getApplyButton());
-        await (0, react_1.waitFor)(() => {
-            expect(searchChangeHandler).toHaveBeenCalledTimes(1);
-            expect(searchChangeHandler).toHaveBeenCalledWith({ value: "" });
-            expect(groupButtonChangeHandler).toHaveBeenCalledTimes(1);
-            expect(groupButtonChangeHandler).toHaveBeenCalledWith({ selectedValue: "test1" });
-            expect(mockedOnApplyAllFilters).toHaveBeenCalledTimes(1);
-            expect(mockedOnApplyAllFilters).toHaveBeenCalledWith({ search: { state: { value: "" } }, groupButton: { state: { selectedValue: "test1" } } });
-            expect(handleToggleAllFilters).toHaveBeenCalledTimes(1);
-            expect(handleToggleAllFilters).toHaveBeenCalledWith(false);
-        });
-    });
-    test("should 'clear' button click without 'Apply' button", async () => {
-        const handleToggleAllFilters = jest.fn();
-        const searchChangeHandler = jest.fn();
-        const groupButtonChangeHandler = jest.fn();
-        const filterButtonProps = {
-            groupData: [{
-                    value: "test1",
-                    name: "test1"
-                }, {
-                    value: "test2",
-                    name: "test2"
-                }],
-            className: "test"
-        };
-        const { container, rerender } = (0, react_1.render)((0, jsx_runtime_1.jsxs)(filtersBar_1.FiltersBar, { toggleAllFilters: handleToggleAllFilters, getDefaultFiltersState: () => ({ search: { state: { value: "" } }, groupButton: { state: { selectedValue: "test1" } } }), isAllFiltersVisible: false, children: [(0, jsx_runtime_1.jsx)(filtersBarSearch_1.FiltersBarSearch, { onChange: searchChangeHandler, state: { value: "" }, sidePanelTitle: "asdasd", id: "search" }), (0, jsx_runtime_1.jsx)(filtersBarGroupButton_1.FiltersBarGroupButton, { id: "groupButton", onChange: groupButtonChangeHandler, state: { selectedValue: "test1" }, props: filterButtonProps, sidePanelTitle: "test" })] }));
-        expect(container).toBeDefined();
-        const getApplyButton = () => container.querySelector(".zen-filters-toolbar__actions .zen-filters-toolbar__apply");
-        const getClearButton = () => container.querySelector(".zen-filters-toolbar__actions .zen-filters-toolbar__clear");
-        const getActionQuantity = () => container.querySelector(".zen-filters-toolbar__all-filters .zen-filters-toolbar__action-quantity");
-        expect(getApplyButton()).toBeNull();
-        expect(getClearButton()).toBeNull();
-        expect(getActionQuantity()).toBeNull();
-        const inputElement = container.querySelector("input.zen-text-input");
-        expect(inputElement).not.toBeNull();
-        react_1.fireEvent.change(inputElement, { target: { value: "new value" } });
-        await (0, react_1.waitFor)(() => {
-            expect(searchChangeHandler).toHaveBeenCalledTimes(1);
-            expect(searchChangeHandler).toHaveBeenCalledWith({ value: "new value" });
-        });
-        rerender((0, jsx_runtime_1.jsxs)(filtersBar_1.FiltersBar, { toggleAllFilters: handleToggleAllFilters, getDefaultFiltersState: () => ({ search: { state: { value: "" } }, groupButton: { state: { selectedValue: "test1" } } }), isAllFiltersVisible: false, children: [(0, jsx_runtime_1.jsx)(filtersBarSearch_1.FiltersBarSearch, { onChange: searchChangeHandler, state: { value: "new value" }, sidePanelTitle: "asdasd", id: "search" }), (0, jsx_runtime_1.jsx)(filtersBarGroupButton_1.FiltersBarGroupButton, { id: "groupButton", onChange: groupButtonChangeHandler, state: { selectedValue: "test1" }, props: filterButtonProps, sidePanelTitle: "test" })] }));
-        expect(getActionQuantity().textContent).toBe("1");
-        expect(getClearButton()).toBeDefined();
-        const getGroupButton = (value, label) => container.querySelector(`.zen-group-button input[value='${value}'] ${label ? "~label" : ""}`);
-        expect((getGroupButton("test1")).getAttribute("checked")).toBeDefined();
-        expect((getGroupButton("test2")).getAttribute("checked")).toBeNull();
-        expect(groupButtonChangeHandler).toHaveBeenCalledTimes(0);
-        react_1.fireEvent.click(getGroupButton("test2", true));
-        await (0, react_1.waitFor)(() => {
-            expect(groupButtonChangeHandler).toHaveBeenCalledTimes(1);
-            expect(groupButtonChangeHandler).toHaveBeenCalledWith({ selectedValue: "test2" });
-        });
-        rerender((0, jsx_runtime_1.jsxs)(filtersBar_1.FiltersBar, { toggleAllFilters: handleToggleAllFilters, getDefaultFiltersState: () => ({ search: { state: { value: "" } }, groupButton: { state: { selectedValue: "test1" } } }), isAllFiltersVisible: false, children: [(0, jsx_runtime_1.jsx)(filtersBarSearch_1.FiltersBarSearch, { onChange: searchChangeHandler, state: { value: "new value" }, sidePanelTitle: "asdasd", id: "search" }), (0, jsx_runtime_1.jsx)(filtersBarGroupButton_1.FiltersBarGroupButton, { id: "groupButton", onChange: groupButtonChangeHandler, state: { selectedValue: "test2" }, props: filterButtonProps, sidePanelTitle: "test" })] }));
-        expect(getActionQuantity().textContent).toBe("2");
-        expect(getClearButton()).toBeDefined();
-        expect((getGroupButton("test1")).getAttribute("checked")).toBe("");
-        expect((getGroupButton("test2")).getAttribute("checked")).toBeDefined();
-        react_1.fireEvent.click(getClearButton());
-        await (0, react_1.waitFor)(() => {
-            expect(searchChangeHandler).toHaveBeenCalledTimes(2);
-            expect(searchChangeHandler).toHaveBeenCalledWith({ value: "" });
-            expect(groupButtonChangeHandler).toHaveBeenCalledTimes(2);
-            expect(groupButtonChangeHandler).toHaveBeenCalledWith({ selectedValue: "test1" });
-        });
-    });
-    test("should allow filtersBarDropdownWithCheckbox component", async () => {
-        const handleToggleAllFilters = jest.fn();
-        const searchChangeHandler = jest.fn();
-        const dropdownChangeHandler = jest.fn();
-        const mockedDataArr = [
-            { id: "b1", name: "Car" },
-            { id: "b2", name: "Bus" },
-            { id: "b3", name: "Truck" },
-            { id: "b5", name: "Motorcycle" },
-            { id: "b8", name: "Bus" }
-        ];
-        const mockedAllDataArr = [
-            ...mockedDataArr,
-            { id: "c1", name: "Steam engine" }
-        ];
-        const mockedGetData = jest.fn().mockImplementation((_, _str, isChecked) => isChecked ? Promise.resolve(mockedAllDataArr) : Promise.resolve(mockedDataArr));
-        const dropdownWithCheckboxProps = {
-            title: "Type",
-            checkboxLabel: "Show historical data",
-            placeholder: "Type",
-            defaultValue: { selected: [], isChecked: false },
-            searchField: false,
-            getData: mockedGetData,
-            errorHandler: (e) => { throw e; }
-        };
-        const { container, rerender, getByText } = (0, react_1.render)((0, jsx_runtime_1.jsxs)(filtersBar_1.FiltersBar, { toggleAllFilters: handleToggleAllFilters, getDefaultFiltersState: () => ({ search: { state: { value: "" } }, dropdownWithCheckbox: { state: { selected: [], isChecked: false } } }), isAllFiltersVisible: false, children: [(0, jsx_runtime_1.jsx)(filtersBarSearch_1.FiltersBarSearch, { onChange: searchChangeHandler, state: { value: "" }, sidePanelTitle: "asdasd", id: "search" }), (0, jsx_runtime_1.jsx)(filtersBarDropdownWithCheckbox_1.FiltersBarDropdownWithCheckbox, { id: "dropdownWithCheckbox", onChange: dropdownChangeHandler, state: { selected: [], isChecked: false }, props: dropdownWithCheckboxProps, sidePanelTitle: "Test" })] }));
-        expect(container).toBeDefined();
-        const getApplyButton = () => container.querySelector(".zen-filters-toolbar__actions .zen-filters-toolbar__apply");
-        const getClearButton = () => container.querySelector(".zen-filters-toolbar__actions .zen-filters-toolbar__clear");
-        const getActionQuantity = () => container.querySelector(".zen-filters-toolbar__all-filters .zen-filters-toolbar__action-quantity");
-        expect(getApplyButton()).toBeNull();
-        expect(getClearButton()).toBeNull();
-        expect(getActionQuantity()).toBeNull();
-        const inputElement = container.querySelector("input.zen-text-input");
-        expect(inputElement).not.toBeNull();
-        react_1.fireEvent.change(inputElement, { target: { value: "new value" } });
-        await (0, react_1.waitFor)(() => {
-            expect(searchChangeHandler).toHaveBeenCalledTimes(1);
-            expect(searchChangeHandler).toHaveBeenCalledWith({ value: "new value" });
-        });
-        rerender((0, jsx_runtime_1.jsxs)(filtersBar_1.FiltersBar, { toggleAllFilters: handleToggleAllFilters, getDefaultFiltersState: () => ({ search: { state: { value: "" } }, dropdownWithCheckbox: { state: { selected: [], isChecked: false } } }), isAllFiltersVisible: false, children: [(0, jsx_runtime_1.jsx)(filtersBarSearch_1.FiltersBarSearch, { onChange: searchChangeHandler, state: { value: "new value" }, sidePanelTitle: "asdasd", id: "search" }), (0, jsx_runtime_1.jsx)(filtersBarDropdownWithCheckbox_1.FiltersBarDropdownWithCheckbox, { showInSidePanel: true, id: "dropdownWithCheckbox", onChange: dropdownChangeHandler, state: { selected: [], isChecked: false }, props: dropdownWithCheckboxProps, sidePanelTitle: "Test" })] }));
-        expect(getActionQuantity().textContent).toBe("1");
-        expect(getClearButton()).not.toBeNull();
-        const getDropdownTrigger = () => container.querySelector(".zen-filters-bar-dropdown-with-checkbox--toolbar .zen-dropdown__trigger-button");
-        expect(getDropdownTrigger()).not.toBeNull();
-        (0, react_1.act)(() => {
-            react_1.fireEvent.click(getDropdownTrigger());
-        });
-        await (0, react_1.waitFor)(() => {
-            expect(document.body.querySelector(".zen-filters-bar-dropdown-with-checkbox-popup")).not.toBeNull();
-            expect(document.body.querySelector(".zen-filters-bar-dropdown-with-checkbox-popup .zen-dropdown-list__checkbox-container")).not.toBeNull();
-            expect(document.body.querySelector(".zen-dropdown-list")).not.toBeNull();
-            expect(getByText("Show historical data")).not.toBeNull();
-        }, { timeout: debounceTimeout });
-        const getCheckboxInput = () => document.body.querySelector(".zen-dropdown-list__checkbox-container .zen-checkbox__input");
-        const checkboxInput = getCheckboxInput();
-        expect(checkboxInput).not.toBeNull();
-        expect(checkboxInput.checked).toBe(false);
-        const getItem = (id) => document.body.querySelector(`.zen-filters-bar-dropdown-with-checkbox-popup .zen-checkbox-list-with-action__action-item[data-item='${id}']`);
-        const selectItem = (id) => document.body.querySelector(`.zen-filters-bar-dropdown-with-checkbox-popup .zen-checkbox-list-with-action__action-item[data-item='${id}'] .zen-checkbox-list-with-action__label`);
-        expect(getItem("b1")).not.toBeNull();
-        expect(getItem("b2")).not.toBeNull();
-        expect(getItem("b3")).not.toBeNull();
-        expect(getItem("b5")).not.toBeNull();
-        expect(getItem("b8")).not.toBeNull();
-        expect(getItem("c1")).toBeNull();
-        (0, react_1.act)(() => {
-            react_1.fireEvent.click(getByText("Show historical data"));
-        });
-        expect(dropdownChangeHandler).toHaveBeenCalledWith({ selected: [], isChecked: true });
-        rerender((0, jsx_runtime_1.jsxs)(filtersBar_1.FiltersBar, { toggleAllFilters: handleToggleAllFilters, getDefaultFiltersState: () => ({ search: { state: { value: "" } }, dropdownWithCheckbox: { state: { selected: [], isChecked: false } } }), isAllFiltersVisible: false, children: [(0, jsx_runtime_1.jsx)(filtersBarSearch_1.FiltersBarSearch, { onChange: searchChangeHandler, state: { value: "new value" }, sidePanelTitle: "asdasd", id: "search" }), (0, jsx_runtime_1.jsx)(filtersBarDropdownWithCheckbox_1.FiltersBarDropdownWithCheckbox, { showInSidePanel: true, id: "dropdownWithCheckbox", onChange: dropdownChangeHandler, state: { selected: [], isChecked: true }, props: dropdownWithCheckboxProps, sidePanelTitle: "Test" })] }));
-        await (0, react_1.waitFor)(() => {
-            expect(document.body.querySelector(".zen-filters-bar-dropdown-with-checkbox-popup .zen-checkbox-list-with-action__action-item")).not.toBeNull();
-        }, { timeout: debounceTimeout });
-        expect(getActionQuantity().textContent).toBe("2");
-        expect(getClearButton()).not.toBeNull();
-        expect(getItem("b1")).not.toBeNull();
-        expect(getItem("b2")).not.toBeNull();
-        expect(getItem("b3")).not.toBeNull();
-        expect(getItem("b5")).not.toBeNull();
-        expect(getItem("b8")).not.toBeNull();
-        expect(getItem("c1")).not.toBeNull();
-        (0, react_1.act)(() => {
-            react_1.fireEvent.click(selectItem("b1"));
-        });
-        await (0, react_1.waitFor)(() => {
-            expect(dropdownChangeHandler).toHaveBeenCalledWith({ selected: ["b1"], isChecked: true });
-        });
-        rerender((0, jsx_runtime_1.jsxs)(filtersBar_1.FiltersBar, { toggleAllFilters: handleToggleAllFilters, getDefaultFiltersState: () => ({ search: { state: { value: "" } }, dropdownWithCheckbox: { state: { selected: [], isChecked: false } } }), isAllFiltersVisible: false, children: [(0, jsx_runtime_1.jsx)(filtersBarSearch_1.FiltersBarSearch, { onChange: searchChangeHandler, state: { value: "new value" }, sidePanelTitle: "asdasd", id: "search" }), (0, jsx_runtime_1.jsx)(filtersBarDropdownWithCheckbox_1.FiltersBarDropdownWithCheckbox, { showInSidePanel: true, id: "dropdownWithCheckbox", onChange: dropdownChangeHandler, state: { selected: ["b1"], isChecked: true }, props: dropdownWithCheckboxProps, sidePanelTitle: "Test" })] }));
-        expect(getActionQuantity().textContent).toBe("2");
-        expect(getClearButton()).not.toBeNull();
-        (0, react_1.act)(() => {
-            react_1.fireEvent.click(getClearButton());
-        });
-        await (0, react_1.waitFor)(() => {
-            expect(searchChangeHandler).toHaveBeenCalledTimes(2);
-            expect(searchChangeHandler).toHaveBeenCalledWith({ value: "" });
-            expect(dropdownChangeHandler).toHaveBeenCalledWith({ selected: [], isChecked: false });
-        });
-        (0, react_1.act)(() => {
-            react_1.fireEvent.click(getDropdownTrigger());
-        });
-        await (0, react_1.waitFor)(() => {
-            expect(document.body.querySelector(".zen-filters-bar-dropdown-with-checkbox-popup")).not.toBeNull();
-            expect(document.body.querySelector(".zen-filters-bar-dropdown-with-checkbox-popup .zen-dropdown-list__checkbox-container")).not.toBeNull();
-            expect(document.body.querySelector(".zen-dropdown-list")).not.toBeNull();
-            expect(getByText("Show historical data")).not.toBeNull();
-        }, { timeout: debounceTimeout });
-        (0, react_1.act)(() => {
-            react_1.fireEvent.click(getByText("Show historical data"));
-        });
-        (0, react_1.act)(() => {
-            react_1.fireEvent.click(getDropdownTrigger());
-        });
-        expect(dropdownChangeHandler).toHaveBeenCalledWith({ selected: [], isChecked: true });
-        rerender((0, jsx_runtime_1.jsxs)(filtersBar_1.FiltersBar, { toggleAllFilters: handleToggleAllFilters, getDefaultFiltersState: () => ({ search: { state: { value: "" } }, dropdownWithCheckbox: { state: { selected: [], isChecked: false } } }), isAllFiltersVisible: false, children: [(0, jsx_runtime_1.jsx)(filtersBarSearch_1.FiltersBarSearch, { onChange: searchChangeHandler, state: { value: "" }, sidePanelTitle: "asdasd", id: "search" }), (0, jsx_runtime_1.jsx)(filtersBarDropdownWithCheckbox_1.FiltersBarDropdownWithCheckbox, { showInSidePanel: true, id: "dropdownWithCheckbox", onChange: dropdownChangeHandler, state: { selected: [], isChecked: true }, props: dropdownWithCheckboxProps, sidePanelTitle: "Test" })] }));
-        (0, react_1.act)(() => {
-            react_1.fireEvent.click(container.querySelector(".zen-filters-toolbar__all-filters"));
-        });
-        await (0, react_1.waitFor)(() => {
-            expect(handleToggleAllFilters).toHaveBeenCalledTimes(1);
-            expect(handleToggleAllFilters).toHaveBeenCalledWith(true);
-        });
-        rerender((0, jsx_runtime_1.jsxs)(filtersBar_1.FiltersBar, { toggleAllFilters: handleToggleAllFilters, getDefaultFiltersState: () => ({ search: { state: { value: "" } }, dropdownWithCheckbox: { state: { selected: [], isChecked: false } } }), isAllFiltersVisible: true, children: [(0, jsx_runtime_1.jsx)(filtersBarSearch_1.FiltersBarSearch, { onChange: searchChangeHandler, state: { value: "" }, sidePanelTitle: "asdasd", id: "search" }), (0, jsx_runtime_1.jsx)(filtersBarDropdownWithCheckbox_1.FiltersBarDropdownWithCheckbox, { showInSidePanel: true, id: "dropdownWithCheckbox", onChange: dropdownChangeHandler, state: { selected: [], isChecked: true }, props: dropdownWithCheckboxProps, sidePanelTitle: "Test" })] }));
-        await (0, react_1.waitFor)(() => {
-            expect(document.body.querySelector(".zen-side-panel--shown")).not.toBeNull();
-        });
-        const sidePanelCheckbox = document.body.querySelector(".zen-filters-bar-dropdown-with-checkbox__side-panel-checkbox .zen-checkbox__input");
-        expect(sidePanelCheckbox).not.toBeNull();
-        expect(sidePanelCheckbox.checked).toBe(true);
-        const getDropdownSidePanelTrigger = () => document.body.querySelector(".zen-filters-bar-dropdown-with-checkbox--side-panel .zen-dropdown__trigger-button");
-        (0, react_1.act)(() => {
-            react_1.fireEvent.click(getDropdownSidePanelTrigger());
-        });
-        await (0, react_1.waitFor)(() => {
-            expect(document.body.querySelector(".zen-filters-bar-dropdown-with-checkbox-popup")).not.toBeNull();
-            expect(document.body.querySelector(".zen-dropdown-list")).not.toBeNull();
-        }, { timeout: debounceTimeout });
-        expect(getItem("b1")).not.toBeNull();
-        expect(getItem("b2")).not.toBeNull();
-        expect(getItem("b3")).not.toBeNull();
-        expect(getItem("b5")).not.toBeNull();
-        expect(getItem("b8")).not.toBeNull();
-        expect(getItem("c1")).not.toBeNull();
-        (0, react_1.act)(() => {
-            react_1.fireEvent.click(selectItem("b2"));
-        });
-        (0, react_1.act)(() => {
-            react_1.fireEvent.click(getDropdownSidePanelTrigger());
-        });
-        (0, react_1.act)(() => {
-            react_1.fireEvent.click(document.body.querySelector(".zen-side-panel-filters-bar__apply-button--desktop"));
-        });
-        await (0, react_1.waitFor)(() => {
-            expect(dropdownChangeHandler).toHaveBeenCalledWith({ selected: ["b2"], isChecked: true });
-        });
-        rerender((0, jsx_runtime_1.jsxs)(filtersBar_1.FiltersBar, { toggleAllFilters: handleToggleAllFilters, getDefaultFiltersState: () => ({ search: { state: { value: "" } }, dropdownWithCheckbox: { state: { selected: [], isChecked: false } } }), isAllFiltersVisible: false, children: [(0, jsx_runtime_1.jsx)(filtersBarSearch_1.FiltersBarSearch, { onChange: searchChangeHandler, state: { value: "" }, sidePanelTitle: "asdasd", id: "search" }), (0, jsx_runtime_1.jsx)(filtersBarDropdownWithCheckbox_1.FiltersBarDropdownWithCheckbox, { showInSidePanel: true, id: "dropdownWithCheckbox", onChange: dropdownChangeHandler, state: { selected: ["b2"], isChecked: true }, props: dropdownWithCheckboxProps, sidePanelTitle: "Test" })] }));
-        expect(getActionQuantity().textContent).toBe("1");
-        expect(getClearButton()).not.toBeNull();
-        (0, react_1.act)(() => {
-            global.innerWidth = 500;
-            global.dispatchEvent(new Event("resize"));
-        });
-        rerender((0, jsx_runtime_1.jsxs)(filtersBar_1.FiltersBar, { toggleAllFilters: handleToggleAllFilters, getDefaultFiltersState: () => ({ search: { state: { value: "" } }, dropdownWithCheckbox: { state: { selected: [], isChecked: false } } }), isAllFiltersVisible: true, children: [(0, jsx_runtime_1.jsx)(filtersBarSearch_1.FiltersBarSearch, { onChange: searchChangeHandler, state: { value: "" }, sidePanelTitle: "asdasd", id: "search" }), (0, jsx_runtime_1.jsx)(filtersBarDropdownWithCheckbox_1.FiltersBarDropdownWithCheckbox, { showInSidePanel: true, id: "dropdownWithCheckbox", onChange: dropdownChangeHandler, state: { selected: ["b2"], isChecked: true }, props: dropdownWithCheckboxProps, sidePanelTitle: "Test" })] }));
-        expect(dropdownChangeHandler).toHaveBeenCalledTimes(5);
-        expect(document.body.querySelector(".zen-side-panel--shown")).not.toBeNull();
-        expect(getDropdownSidePanelTrigger()).not.toBeNull();
-        (0, react_1.act)(() => {
-            react_1.fireEvent.click(getDropdownSidePanelTrigger());
-        });
-        await (0, react_1.waitFor)(() => {
-            expect(document.body.querySelector(".zen-filters-bar-dropdown-with-checkbox-popup")).not.toBeNull();
-            expect(document.body.querySelector(".zen-dropdown-list")).not.toBeNull();
-        }, { timeout: debounceTimeout });
-        expect(getItem("b1")).not.toBeNull();
-        expect(getItem("b2")).not.toBeNull();
-        expect(getItem("b3")).not.toBeNull();
-        expect(getItem("b5")).not.toBeNull();
-        expect(getItem("b8")).not.toBeNull();
-        expect(getItem("c1")).not.toBeNull();
-        const getMobileCheckboxInput = () => document.body.querySelector(".zen-dropdown-mobile-sheet__checkbox-container .zen-checkbox__input");
-        expect(getMobileCheckboxInput()).not.toBeNull();
-        expect(getMobileCheckboxInput().checked).toBe(true);
-        (0, react_1.act)(() => {
-            react_1.fireEvent.click(selectItem("c1"));
-        });
-        (0, react_1.act)(() => {
-            react_1.fireEvent.click(getByText("Show historical data"));
-        });
-        await (0, react_1.waitFor)(() => {
-            expect(document.body.querySelector(".zen-dropdown-list")).not.toBeNull();
-        }, { timeout: debounceTimeout });
-        expect(getItem("b1")).not.toBeNull();
-        expect(getItem("b2")).not.toBeNull();
-        expect(getItem("b3")).not.toBeNull();
-        expect(getItem("b5")).not.toBeNull();
-        expect(getItem("b8")).not.toBeNull();
-        expect(getItem("c1")).toBeNull();
-        (0, react_1.act)(() => {
-            react_1.fireEvent.click(document.body.querySelector(".zen-dropdown--mobile .zen-mobile-sheet__close-button"));
-        });
-        expect(document.body.querySelector(".zen-side-panel-filters-bar .zen-side-panel-filters-bar__apply-button")).not.toBeNull();
-        (0, react_1.act)(() => {
-            react_1.fireEvent.click(document.body.querySelector(".zen-side-panel-filters-bar .zen-side-panel-filters-bar__apply-button"));
-        });
-        await (0, react_1.waitFor)(() => {
-            expect(handleToggleAllFilters).toHaveBeenCalledWith(false);
-            expect(dropdownChangeHandler).toHaveBeenCalledTimes(6);
-        });
-        expect(dropdownChangeHandler).toHaveBeenLastCalledWith({ selected: ["b2", "c1"], isChecked: false });
-    });
-    test("should 'clear' button apply changes after 'Apply' click in sidePanel when onApplyAllFilters not passed", async () => {
-        const handleToggleAllFilters = jest.fn();
-        const searchChangeHandler = jest.fn();
-        const groupButtonChangeHandler = jest.fn();
-        const filterButtonProps = {
-            groupData: [{
-                    value: "test1",
-                    name: "test1"
-                }, {
-                    value: "test2",
-                    name: "test2"
-                }],
-            className: "test"
-        };
-        const { container, rerender } = (0, react_1.render)((0, jsx_runtime_1.jsxs)(filtersBar_1.FiltersBar, { toggleAllFilters: handleToggleAllFilters, getDefaultFiltersState: () => ({ search: { state: { value: "" } }, groupButton: { state: { selectedValue: "test1" } } }), isAllFiltersVisible: false, children: [(0, jsx_runtime_1.jsx)(filtersBarSearch_1.FiltersBarSearch, { showInSidePanel: true, onChange: searchChangeHandler, state: { value: "some value" }, sidePanelTitle: "asdasd", id: "search" }), (0, jsx_runtime_1.jsx)(filtersBarGroupButton_1.FiltersBarGroupButton, { showInSidePanel: true, id: "groupButton", onChange: groupButtonChangeHandler, state: { selectedValue: "test1" }, props: filterButtonProps, sidePanelTitle: "test" })] }));
-        const getActionQuantity = () => container.querySelector(".zen-filters-toolbar__all-filters .zen-filters-toolbar__action-quantity");
-        expect(getActionQuantity().textContent).toBe("1");
-        expect(document.body.querySelector(".zen-side-panel-filters-bar")).toBeNull();
-        rerender((0, jsx_runtime_1.jsxs)(filtersBar_1.FiltersBar, { toggleAllFilters: handleToggleAllFilters, getDefaultFiltersState: () => ({ search: { state: { value: "" } }, groupButton: { state: { selectedValue: "test1" } } }), isAllFiltersVisible: true, children: [(0, jsx_runtime_1.jsx)(filtersBarSearch_1.FiltersBarSearch, { showInSidePanel: true, onChange: searchChangeHandler, state: { value: "some value" }, sidePanelTitle: "asdasd", id: "search" }), (0, jsx_runtime_1.jsx)(filtersBarGroupButton_1.FiltersBarGroupButton, { showInSidePanel: true, id: "groupButton", onChange: groupButtonChangeHandler, state: { selectedValue: "test1" }, props: filterButtonProps, sidePanelTitle: "test" })] }));
-        expect(document.body.querySelector(".zen-side-panel-filters-bar")).not.toBeNull();
-        expect(document.body.querySelector(".zen-side-panel-filters-bar")?.childElementCount).toBe(1);
-        const getApplyButton = () => document.body.querySelector(".zen-side-panel-filters-bar__apply-button");
-        const getResetButton = () => document.body.querySelector(".zen-side-panel-filters-bar__clear-button");
-        expect(getApplyButton()).toBeDefined();
-        expect(getResetButton()).toBeDefined();
-        const getGroupButton = (value, label) => document.body.querySelector(`.zen-side-panel-cell__content .zen-group-button input[value='${value}'] ${label ? "~label" : ""}`);
-        let inputElement = document.body.querySelector(".zen-side-panel-cell__content input.zen-text-input");
-        expect(inputElement).not.toBeNull();
-        react_1.fireEvent.change(inputElement, { target: { value: "new value" } });
-        await (0, react_1.waitFor)(() => {
-            inputElement = document.body.querySelector(".zen-side-panel-cell__content input.zen-text-input");
-            expect(inputElement.value).toBe("new value");
-        });
-        expect((getGroupButton("test1")).getAttribute("checked")).toBeDefined();
-        expect((getGroupButton("test2")).getAttribute("checked")).toBeNull();
-        react_1.fireEvent.click(getGroupButton("test2", true));
-        await (0, react_1.waitFor)(() => {
-            expect((getGroupButton("test1")).getAttribute("checked")).toBe("");
-            expect((getGroupButton("test2")).getAttribute("checked")).toBeDefined();
-        });
-        react_1.fireEvent.click(getResetButton());
-        expect(searchChangeHandler).toHaveBeenCalledTimes(0);
-        expect(groupButtonChangeHandler).toHaveBeenCalledTimes(0);
-        expect(handleToggleAllFilters).toHaveBeenCalledTimes(0);
-        react_1.fireEvent.click(getApplyButton());
-        await (0, react_1.waitFor)(() => {
-            expect(searchChangeHandler).toHaveBeenCalledTimes(1);
-            expect(searchChangeHandler).toHaveBeenCalledWith({ value: "" });
-            expect(groupButtonChangeHandler).toHaveBeenCalledTimes(1);
-            expect(groupButtonChangeHandler).toHaveBeenCalledWith({ selectedValue: "test1" });
-            expect(handleToggleAllFilters).toHaveBeenCalledTimes(1);
-            expect(handleToggleAllFilters).toHaveBeenCalledWith(false);
-        });
-    });
-    test("should onApplyAllFilters call on click Apply in sidePanel", async () => {
-        const handleToggleAllFilters = jest.fn();
-        const mockedOnApplyAllFilters = jest.fn();
-        const searchChangeHandler = jest.fn();
-        const { container, rerender } = (0, react_1.render)((0, jsx_runtime_1.jsx)(filtersBar_1.FiltersBar, { toggleAllFilters: handleToggleAllFilters, onApplyAllFilters: mockedOnApplyAllFilters, onClearAllFilters: () => { }, getDefaultFiltersState: () => ({ search: { state: { value: "" } } }), isAllFiltersVisible: false, children: (0, jsx_runtime_1.jsx)(filtersBarSearch_1.FiltersBarSearch, { onChange: searchChangeHandler, state: { value: "" }, sidePanelTitle: "asdasd", id: "search", showInSidePanel: true }) }));
-        expect(container).toBeDefined();
-        const getApplyButton = () => container.querySelector(".zen-filters-toolbar__actions .zen-filters-toolbar__apply");
-        expect(getApplyButton()).toBeDefined();
-        const inputElement = container.querySelector("input.zen-text-input");
-        expect(inputElement).not.toBeNull();
-        react_1.fireEvent.change(inputElement, { target: { value: "new value" } });
-        await (0, react_1.waitFor)(() => {
-            expect(searchChangeHandler).toHaveBeenCalledTimes(1);
-            expect(searchChangeHandler).toHaveBeenCalledWith({ value: "new value" });
-            expect(mockedOnApplyAllFilters).toHaveBeenCalledTimes(0);
-        });
-        const allFiltersButton = container.querySelector(".zen-filters-toolbar__all-filters");
-        expect(allFiltersButton).not.toBeNull();
-        react_1.fireEvent.click(allFiltersButton);
-        await (0, react_1.waitFor)(() => {
-            expect(handleToggleAllFilters).toHaveBeenCalledTimes(1);
-            expect(handleToggleAllFilters).toHaveBeenCalledWith(true);
-        });
-        rerender((0, jsx_runtime_1.jsx)(filtersBar_1.FiltersBar, { toggleAllFilters: handleToggleAllFilters, onApplyAllFilters: mockedOnApplyAllFilters, onClearAllFilters: () => { }, getDefaultFiltersState: () => ({ search: { state: { value: "" } } }), isAllFiltersVisible: true, children: (0, jsx_runtime_1.jsx)(filtersBarSearch_1.FiltersBarSearch, { onChange: searchChangeHandler, state: { value: "" }, sidePanelTitle: "asdasd", id: "search", showInSidePanel: true }) }));
-        expect(document.body.querySelector(".zen-side-panel-filters-bar")).toBeTruthy();
-        const sidePanelInputElement = document.body.querySelector(".zen-side-panel-filters-bar input.zen-text-input");
-        expect(sidePanelInputElement).not.toBeNull();
-        react_1.fireEvent.change(sidePanelInputElement, { target: { value: "value" } });
-        await (0, react_1.waitFor)(() => {
-            expect(searchChangeHandler).toHaveBeenCalledTimes(1);
-            expect(mockedOnApplyAllFilters).toHaveBeenCalledTimes(0);
-        });
-        react_1.fireEvent.click(document.body.querySelector(".zen-side-panel-filters-bar__apply-button"));
-        await (0, react_1.waitFor)(() => {
-            expect(mockedOnApplyAllFilters).toHaveBeenCalledTimes(1);
-            expect(handleToggleAllFilters).toHaveBeenCalledTimes(2);
-            expect(handleToggleAllFilters).toHaveBeenCalledWith(false);
-            expect(searchChangeHandler).toHaveBeenCalledTimes(2);
-            expect(searchChangeHandler).toHaveBeenCalledWith({ value: "value" });
-        });
-    });
-    test("Filters state updated in mobile", async () => {
-        const handleToggleAllFilters = jest.fn();
-        const searchChangeHandler = jest.fn();
-        const { container, rerender } = (0, react_1.render)((0, jsx_runtime_1.jsxs)(filtersBar_1.FiltersBar, { toggleAllFilters: handleToggleAllFilters, onClearAllFilters: () => { }, getDefaultFiltersState: () => ({ search: { state: { value: "" } }, groupButton: { state: { selectedValue: "test1" } } }), isAllFiltersVisible: false, children: [(0, jsx_runtime_1.jsx)(filtersBarSearch_1.FiltersBarSearch, { onChange: searchChangeHandler, state: { value: "" }, sidePanelTitle: "asdasd", id: "search" }), (0, jsx_runtime_1.jsx)(filtersBarGroupButton_1.FiltersBarGroupButton, { id: "groupButton", onChange: (jest.fn()), state: { selectedValue: "test1" }, props: {
-                        groupData: [{
-                                value: "test1",
-                                name: "test1"
-                            }, {
-                                value: "test2",
-                                name: "test2"
-                            }],
-                        className: "test"
-                    }, hideInBar: true, sidePanelTitle: "test" })] }));
-        expect(container).toBeDefined();
-        const inputElement = container.querySelector("input.zen-text-input");
-        expect(inputElement).not.toBeNull();
-        react_1.fireEvent.change(inputElement, { target: { value: "new value" } });
-        await (0, react_1.waitFor)(() => {
-            expect(searchChangeHandler).toHaveBeenCalledTimes(1);
-            expect(searchChangeHandler).toHaveBeenCalledWith({ value: "new value" });
-        });
-        const groupButton = container.querySelector(".zen-group-button");
-        expect(groupButton).toBeNull();
-        (0, react_1.act)(() => {
-            global.innerWidth = 500;
-            global.dispatchEvent(new Event("resize"));
-        });
-        rerender((0, jsx_runtime_1.jsxs)(filtersBar_1.FiltersBar, { toggleAllFilters: handleToggleAllFilters, onClearAllFilters: () => { }, getDefaultFiltersState: () => ({ search: { state: { value: "" } }, groupButton: { state: { selectedValue: "test1" } } }), isAllFiltersVisible: true, children: [(0, jsx_runtime_1.jsx)(filtersBarSearch_1.FiltersBarSearch, { onChange: searchChangeHandler, state: { value: "new value" }, sidePanelTitle: "asdasd", id: "search" }), (0, jsx_runtime_1.jsx)(filtersBarGroupButton_1.FiltersBarGroupButton, { id: "groupButton", onChange: (jest.fn()), state: { selectedValue: "test1" }, props: {
-                        groupData: [{
-                                value: "test1",
-                                name: "test1"
-                            }, {
-                                value: "test2",
-                                name: "test2"
-                            }],
-                        className: "test"
-                    }, hideInBar: true, sidePanelTitle: "test" })] }));
-        await (0, react_1.waitFor)(() => {
-            const groupButtonMobile = document.body.querySelector(".zen-side-panel-filters-bar .zen-group-button");
-            expect(groupButtonMobile).not.toBeNull();
-            const inputElementMobile = document.body.querySelector(".zen-side-panel-filters-bar input.zen-text-input");
-            expect(inputElementMobile).not.toBeNull();
-            expect(inputElementMobile.value).toBe("new value");
-        });
-    });
-    test("check trigger accessibility", () => {
-        const { container, rerender } = (0, react_1.render)((0, jsx_runtime_1.jsxs)(filtersBar_1.FiltersBar, { toggleAllFilters: () => { }, onClearAllFilters: () => { }, getDefaultFiltersState: () => ({}), isAllFiltersVisible: true, className: "filtersBar", children: [(0, jsx_runtime_1.jsx)(button_1.Button, { id: "button", children: "Button text" }), (0, jsx_runtime_1.jsx)(filtersBarSearch_1.FiltersBarSearch, { onChange: () => { }, state: { value: "" }, sidePanelTitle: "asdasd", id: "search" })] }));
-        expect(container).toBeDefined();
-        const trigger = container.querySelector(".zen-filters-toolbar__all-filters");
-        expect(trigger).not.toBeNull();
-        trigger?.setAttribute("aria-expanded", "true");
-        rerender((0, jsx_runtime_1.jsx)(filtersBar_1.FiltersBar, { toggleAllFilters: () => { }, onClearAllFilters: () => { }, getDefaultFiltersState: () => ({}), isAllFiltersVisible: false, children: (0, jsx_runtime_1.jsx)(filtersBarSearch_1.FiltersBarSearch, { onChange: () => { }, state: { value: "" }, sidePanelTitle: "asdasd", id: "search" }) }));
-        expect(trigger?.getAttribute("aria-expanded")).toBe("false");
-    });
-    test("Test filtersBar accessibility", async () => {
-        const originalSetTimeout = global.setTimeout;
-        Object.defineProperty(global, "setTimeout", {
-            value: (callback) => callback(),
-            writable: true
-        });
-        const { container } = await (0, react_1.act)(async () => {
-            const res = (0, react_1.render)((0, jsx_runtime_1.jsxs)(filtersBar_1.FiltersBar, { toggleAllFilters: () => { }, onClearAllFilters: () => { }, getDefaultFiltersState: () => ({}), isAllFiltersVisible: false, children: [(0, jsx_runtime_1.jsx)(filtersBarSearch_1.FiltersBarSearch, { onChange: () => { }, state: { value: "" }, showInSidePanel: true, sidePanelTitle: "asdasd", id: "search" }), (0, jsx_runtime_1.jsx)(filtersBar_1.FiltersBar.GroupButton, { id: "groupButton", state: { selectedValue: "1" }, onChange: () => { }, sidePanelTitle: "Select value", props: {
-                            groupData: [
-                                { value: "1", name: "1" },
-                                { value: "2", name: "2" },
-                                { value: "3", name: "3" }
-                            ]
-                        } })] }));
-            await Promise.resolve();
-            return res;
-        });
-        Object.defineProperty(global, "setTimeout", {
-            value: originalSetTimeout,
-            writable: true
-        });
-        await expect(container).toBeAccessible();
-    }, 10000);
-    test("should 'Filters' button be visible with hideAllFiltersButton === true in Mobile view", () => {
-        // set to mobile width size
-        window.innerWidth = 500;
-        const handleToggleAllFilters = jest.fn();
-        const { container, getByText } = (0, react_1.render)((0, jsx_runtime_1.jsx)(filtersBar_1.FiltersBar, { toggleAllFilters: handleToggleAllFilters, onClearAllFilters: () => { }, getDefaultFiltersState: () => ({}), isAllFiltersVisible: true, hideAllFiltersButton: true, children: (0, jsx_runtime_1.jsx)(filtersBarSearch_1.FiltersBarSearch, { onChange: () => { }, state: { value: "" }, sidePanelTitle: "asdasd", id: "search" }) }));
-        expect(container).toBeDefined();
-        expect(() => getByText("Filters")).toBeDefined();
-        expect(document.body.querySelector(".zen-side-panel-filters-bar")).toBeTruthy();
-    });
-    /**
-     * @deprecated
-     * @param selectedQuantity - will be removed in the next major release; tests should be updated after removing this property
-    */
-    describe("should number of active filters be rendered correctly", () => {
-        it("should render 0 active filters if property 'selectedQuantity' not set and default state not changed", () => {
-            const { container } = (0, react_1.render)((0, jsx_runtime_1.jsx)(filtersBar_1.FiltersBar, { toggleAllFilters: () => { }, onClearAllFilters: () => { }, getDefaultFiltersState: () => ({ "search": { state: { value: "" } } }), isAllFiltersVisible: false, children: (0, jsx_runtime_1.jsx)(filtersBarSearch_1.FiltersBarSearch, { onChange: () => { }, state: { value: "" }, sidePanelTitle: "asdasd", id: "search" }) }));
-            expect(container.querySelector(".zen-filters-toolbar__action-quantity")).toBeNull();
-        });
-        it("should render 2 active filter if property 'selectedQuantity' set to 2", () => {
-            const { container } = (0, react_1.render)((0, jsx_runtime_1.jsx)(filtersBar_1.FiltersBar, { toggleAllFilters: () => { }, onClearAllFilters: () => { }, getDefaultFiltersState: () => ({ "search": { state: { value: "" } } }), isAllFiltersVisible: false, selectedQuantity: 2, children: (0, jsx_runtime_1.jsx)(filtersBarSearch_1.FiltersBarSearch, { onChange: () => { }, state: { value: "" }, sidePanelTitle: "asdasd", id: "search" }) }));
-            expect(container.querySelector(".zen-filters-toolbar__action-quantity")?.textContent).toBe("2");
-        });
-        it("should render 1 active filters if property default state is changed", () => {
-            const getDefaultFiltersState = () => ({ "search": { state: { value: "" } } });
-            const searchState = { value: "New Value" };
-            const { container } = (0, react_1.render)((0, jsx_runtime_1.jsx)(filtersBar_1.FiltersBar, { toggleAllFilters: () => { }, onClearAllFilters: () => { }, getDefaultFiltersState: getDefaultFiltersState, isAllFiltersVisible: false, children: (0, jsx_runtime_1.jsx)(filtersBarSearch_1.FiltersBarSearch, { onChange: () => { }, state: searchState, sidePanelTitle: "asdasd", id: "search" }) }));
-            expect(container.querySelector(".zen-filters-toolbar__action-quantity")?.textContent).toBe("1");
-        });
-        it("should render 2 active filters if property default state is changed and 'selectedQuantity' is set", () => {
-            const getDefaultFiltersState = () => ({ "search": { state: { value: "" } } });
-            const searchState = { value: "New Value" };
-            const { container } = (0, react_1.render)((0, jsx_runtime_1.jsx)(filtersBar_1.FiltersBar, { toggleAllFilters: () => { }, onClearAllFilters: () => { }, getDefaultFiltersState: getDefaultFiltersState, isAllFiltersVisible: false, selectedQuantity: 2, children: (0, jsx_runtime_1.jsx)(filtersBarSearch_1.FiltersBarSearch, { onChange: () => { }, state: searchState, sidePanelTitle: "asdasd", id: "search" }) }));
-            expect(container.querySelector(".zen-filters-toolbar__action-quantity")?.textContent).toBe("2");
-        });
-    });
-    it("should render custom component", () => {
-        const getDefaultFiltersState = () => ({ "search": { state: { value: "" } } });
-        const searchState = { value: "New Value" };
-        const CustomToggler = ({ id, state, useSidePanelView, onChange }) => {
-            const component = (0, jsx_runtime_1.jsx)(toggleButton_1.ToggleButton, { className: "custom-toggle", id: id, checked: state.value, onChange: checked => onChange({ value: checked }) });
-            if (useSidePanelView) {
-                return (0, jsx_runtime_1.jsx)(sidePanelCell_1.SidePanelCell, { className: "custom-cell", title: "Side Panel title", children: component });
-            }
-            return component;
-        };
-        const onCustomToggleChange = jest.fn();
-        const { container, rerender } = (0, react_1.render)((0, jsx_runtime_1.jsx)(filtersBar_1.FiltersBar, { toggleAllFilters: () => { }, onClearAllFilters: () => { }, getDefaultFiltersState: getDefaultFiltersState, isAllFiltersVisible: false, children: (0, jsx_runtime_1.jsx)(CustomToggler, { id: "testCustomToggleValue", showInSidePanel: true, onChange: onCustomToggleChange, state: { value: false } }, "customTogglerKey") }));
-        expect(container.querySelector(".custom-toggle")).not.toBeNull();
-        expect(document.body.querySelector(".custom-cell")).toBeNull();
-        rerender((0, jsx_runtime_1.jsxs)(filtersBar_1.FiltersBar, { toggleAllFilters: () => { }, onClearAllFilters: () => { }, getDefaultFiltersState: getDefaultFiltersState, isAllFiltersVisible: true, children: [(0, jsx_runtime_1.jsx)(filtersBarSearch_1.FiltersBarSearch, { onChange: () => { }, state: searchState, sidePanelTitle: "asdasd", id: "search" }), (0, jsx_runtime_1.jsx)(CustomToggler, { id: "testCustomToggleValue", showInSidePanel: true, onChange: onCustomToggleChange, state: { value: false } }, "customTogglerKey")] }));
-        expect(container.querySelector(".custom-toggle")).not.toBeNull();
-        expect(document.body.querySelector(".custom-cell")).not.toBeNull();
-    });
-    it("should render cascading filters", () => {
-        const getDefaultFilters = () => ({ "search": { state: { value: "" } } });
-        const state = getDefaultFilters();
-        const dispatch = jest.fn();
-        (0, react_1.render)((0, jsx_runtime_1.jsxs)(filtersBar_1.FiltersBar, { toggleAllFilters: () => { }, onClearAllFilters: () => { }, getDefaultFiltersState: getDefaultFilters, isAllFiltersVisible: true, children: [(0, jsx_runtime_1.jsx)(filtersBar_1.FiltersBar.Search, { onChange: () => { }, state: { value: "" }, sidePanelTitle: "asdasd", id: "search" }), (0, jsx_runtime_1.jsx)(filtersBar_1.FiltersBar.SidePanel, { state: state, dispatch: dispatch, children: (0, jsx_runtime_1.jsx)(filtersBar_1.FiltersBar.Search, { showInSidePanel: true, onChange: () => { }, state: { value: "" }, sidePanelTitle: "asdasd", id: "search" }) })] }));
-        expect(document.body.querySelector(".zen-side-panel-filters-bar")).not.toBeNull();
-        (0, react_1.act)(() => {
-            react_1.fireEvent.change(document.body.querySelector(".zen-side-panel-filters-bar .zen-search-input__input input"), { target: { value: "new value" } });
-        });
-        expect(dispatch).toHaveBeenCalledTimes(1);
-        expect(dispatch).toHaveBeenCalledWith({ type: "CHANGE", payload: { id: "search", value: { state: { value: "new value" } } } });
-    });
-    it("should works correctly with dynamic items", async () => {
-        const getDefaultFilters = () => ({ "search1": { state: { value: "" } }, "search2": { state: { value: "" } } });
-        const { rerender } = (0, react_1.render)((0, jsx_runtime_1.jsx)(filtersBar_1.FiltersBar, { toggleAllFilters: () => { }, onClearAllFilters: () => { }, getDefaultFiltersState: getDefaultFilters, isAllFiltersVisible: true, children: (0, jsx_runtime_1.jsx)(filtersBar_1.FiltersBar.Search, { showInSidePanel: true, onChange: () => { }, state: { value: "" }, sidePanelTitle: "Search", id: "search1", className: "custom-search1" }) }));
-        let sidePanel = document.body.querySelector(".zen-side-panel-filters-bar");
-        await (0, react_1.waitFor)(() => {
-            expect(sidePanel.querySelector(".custom-search1")).not.toBeNull();
-        });
-        rerender((0, jsx_runtime_1.jsxs)(filtersBar_1.FiltersBar, { toggleAllFilters: () => { }, onClearAllFilters: () => { }, getDefaultFiltersState: getDefaultFilters, isAllFiltersVisible: true, children: [(0, jsx_runtime_1.jsx)(filtersBar_1.FiltersBar.Search, { showInSidePanel: true, onChange: () => { }, state: { value: "" }, sidePanelTitle: "Search", id: "search1", className: "custom-search1" }), (0, jsx_runtime_1.jsx)(filtersBar_1.FiltersBar.Search, { showInSidePanel: true, onChange: () => { }, state: { value: "" }, sidePanelTitle: "Search", id: "search2", className: "custom-search2" })] }));
-        sidePanel = document.body.querySelector(".zen-side-panel-filters-bar");
-        await (0, react_1.waitFor)(() => {
-            expect(sidePanel.querySelector(".custom-search1")).not.toBeNull();
-            expect(sidePanel.querySelector(".custom-search2")).not.toBeNull();
-        });
-    });
-    test("sidePanel state should not reset during rerender on mobile devices", async () => {
-        // Set mobile viewport
-        window.innerWidth = 500;
-        global.dispatchEvent(new Event("resize"));
-        const searchChangeHandler = jest.fn();
-        const groupButtonChangeHandler = jest.fn();
-        const handleToggleAllFilters = jest.fn();
-        const { rerender } = (0, react_1.render)((0, jsx_runtime_1.jsxs)(filtersBar_1.FiltersBar, { toggleAllFilters: handleToggleAllFilters, onClearAllFilters: () => { }, getDefaultFiltersState: () => ({
-                search: { state: { value: "" } },
-                groupButton: { state: { selectedValue: "test1" } }
-            }), isAllFiltersVisible: true, children: [(0, jsx_runtime_1.jsx)(filtersBarSearch_1.FiltersBarSearch, { onChange: searchChangeHandler, state: { value: "" }, sidePanelTitle: "Search", id: "search", showInSidePanel: true }), (0, jsx_runtime_1.jsx)(filtersBarGroupButton_1.FiltersBarGroupButton, { id: "groupButton", onChange: groupButtonChangeHandler, state: { selectedValue: "test1" }, props: {
-                        groupData: [{
-                                value: "test1",
-                                name: "test1"
-                            }, {
-                                value: "test2",
-                                name: "test2"
-                            }],
-                        className: "test"
-                    }, hideInBar: true, sidePanelTitle: "Group Button", showInSidePanel: true })] }));
-        // Wait for side panel to be rendered
-        await (0, react_1.waitFor)(() => {
-            expect(document.body.querySelector(".zen-side-panel-filters-bar")).not.toBeNull();
-        });
-        // Change input value in side panel
-        const inputElementMobile = document.body.querySelector(".zen-side-panel-filters-bar input.zen-text-input");
-        expect(inputElementMobile).not.toBeNull();
-        react_1.fireEvent.change(inputElementMobile, { target: { value: "test search value" } });
-        await (0, react_1.waitFor)(() => {
-            expect(searchChangeHandler).not.toHaveBeenCalled(); // will be called on Apply click
-            expect(inputElementMobile.value).toBe("test search value");
-        });
-        // Change group button selection in side panel
-        const groupButtonMobile = document.body.querySelector(".zen-side-panel-filters-bar .zen-group-button");
-        expect(groupButtonMobile).not.toBeNull();
-        const optionTest2 = document.body.querySelector(".zen-side-panel-filters-bar .zen-group-button input[value='test2']~label");
-        const groupButtonTest2 = document.body.querySelector(".zen-side-panel-filters-bar .zen-group-button input[value='test2']");
-        react_1.fireEvent.click(optionTest2);
-        await (0, react_1.waitFor)(() => {
-            expect(groupButtonChangeHandler).not.toHaveBeenCalled(); // will be called on Apply click
-            expect(groupButtonTest2.checked).toBeTruthy();
-        });
-        // Trigger rerender with state change (simulating external state update)
-        rerender((0, jsx_runtime_1.jsxs)(filtersBar_1.FiltersBar, { toggleAllFilters: handleToggleAllFilters, onClearAllFilters: () => { }, getDefaultFiltersState: () => ({
-                search: { state: { value: "" } },
-                groupButton: { state: { selectedValue: "test1" } }
-            }), isAllFiltersVisible: true, children: [(0, jsx_runtime_1.jsx)(filtersBarSearch_1.FiltersBarSearch, { onChange: searchChangeHandler, state: { value: "" }, sidePanelTitle: "Search", id: "search", showInSidePanel: true }), (0, jsx_runtime_1.jsx)(filtersBarGroupButton_1.FiltersBarGroupButton, { id: "groupButton", onChange: groupButtonChangeHandler, state: { selectedValue: "test1" }, props: {
-                        groupData: [{
-                                value: "test1",
-                                name: "test1"
-                            }, {
-                                value: "test2",
-                                name: "test2"
-                            }],
-                        className: "test"
-                    }, hideInBar: true, sidePanelTitle: "Group Button", showInSidePanel: true })] }));
-        // Verify that side panel state is preserved after rerender
-        await (0, react_1.waitFor)(() => {
-            const inputElementAfterRerender = document.body.querySelector(".zen-side-panel-filters-bar input.zen-text-input");
-            expect(inputElementAfterRerender).not.toBeNull();
-            expect(inputElementAfterRerender.value).toBe("test search value");
-            const groupButtonTest2AfterRerender = document.body.querySelector(".zen-side-panel-filters-bar .zen-group-button input[value='test2']");
-            expect(groupButtonTest2AfterRerender.checked).toBeTruthy();
-            expect(document.body.querySelector(".zen-side-panel-filters-bar")).not.toBeNull();
-        });
-        const getApplyButton = () => document.body.querySelector(".zen-side-panel-filters-bar__apply-button");
-        react_1.fireEvent.click(getApplyButton());
-        await (0, react_1.waitFor)(() => {
-            expect(searchChangeHandler).toHaveBeenCalledTimes(1);
-            expect(searchChangeHandler).toHaveBeenCalledWith({ value: "test search value" });
-            expect(groupButtonChangeHandler).toHaveBeenCalledTimes(1);
-            expect(groupButtonChangeHandler).toHaveBeenCalledWith({ selectedValue: "test2" });
-        });
-    });
-    test("sidePanel filters should persist when switching from desktop to mobile view", async () => {
-        // Start with desktop viewport
-        window.innerWidth = 1200;
-        global.dispatchEvent(new Event("resize"));
-        const searchChangeHandler = jest.fn();
-        const groupButtonChangeHandler = jest.fn();
-        const handleToggleAllFilters = jest.fn();
-        const { rerender } = (0, react_1.render)((0, jsx_runtime_1.jsxs)(filtersBar_1.FiltersBar, { toggleAllFilters: handleToggleAllFilters, getDefaultFiltersState: () => ({
-                search: { state: { value: "" } },
-                groupButton: { state: { selectedValue: "test1" } }
-            }), isAllFiltersVisible: false, children: [(0, jsx_runtime_1.jsx)(filtersBarSearch_1.FiltersBarSearch, { onChange: searchChangeHandler, state: { value: "" }, sidePanelTitle: "Search", id: "search", showInSidePanel: true }), (0, jsx_runtime_1.jsx)(filtersBarGroupButton_1.FiltersBarGroupButton, { id: "groupButton", onChange: groupButtonChangeHandler, state: { selectedValue: "test1" }, props: {
-                        groupData: [{
-                                value: "test1",
-                                name: "test1"
-                            }, {
-                                value: "test2",
-                                name: "test2"
-                            }],
-                        className: "test"
-                    }, hideInBar: true, sidePanelTitle: "Group Button", showInSidePanel: true })] }));
-        // Open side panel on desktop
-        const filtersButton = document.querySelector(".zen-filters-toolbar__all-filters");
-        expect(filtersButton).not.toBeNull();
-        react_1.fireEvent.click(filtersButton);
-        // Wait for side panel to open
-        await (0, react_1.waitFor)(() => {
-            expect(handleToggleAllFilters).toHaveBeenCalledWith(true);
-        });
-        // Rerender with side panel open
-        rerender((0, jsx_runtime_1.jsxs)(filtersBar_1.FiltersBar, { toggleAllFilters: handleToggleAllFilters, getDefaultFiltersState: () => ({
-                search: { state: { value: "" } },
-                groupButton: { state: { selectedValue: "test1" } }
-            }), isAllFiltersVisible: true, children: [(0, jsx_runtime_1.jsx)(filtersBarSearch_1.FiltersBarSearch, { onChange: searchChangeHandler, state: { value: "" }, sidePanelTitle: "Search", id: "search", showInSidePanel: true }), (0, jsx_runtime_1.jsx)(filtersBarGroupButton_1.FiltersBarGroupButton, { id: "groupButton", onChange: groupButtonChangeHandler, state: { selectedValue: "test1" }, props: {
-                        groupData: [{
-                                value: "test1",
-                                name: "test1"
-                            }, {
-                                value: "test2",
-                                name: "test2"
-                            }],
-                        className: "test"
-                    }, hideInBar: true, sidePanelTitle: "Group Button", showInSidePanel: true })] }));
-        await (0, react_1.waitFor)(() => {
-            expect(document.body.querySelector(".zen-side-panel-filters-bar")).not.toBeNull();
-        });
-        // Make changes in desktop side panel
-        const inputElementDesktop = document.body.querySelector(".zen-side-panel-filters-bar input.zen-text-input");
-        expect(inputElementDesktop).not.toBeNull();
-        react_1.fireEvent.change(inputElementDesktop, { target: { value: "desktop search value" } });
-        await (0, react_1.waitFor)(() => {
-            expect(inputElementDesktop.value).toBe("desktop search value");
-        });
-        // Change group button selection in desktop side panel
-        const optionTest2Desktop = document.body.querySelector(".zen-side-panel-filters-bar .zen-group-button input[value='test2']~label");
-        const groupButtonTest2Desktop = document.body.querySelector(".zen-side-panel-filters-bar .zen-group-button input[value='test2']");
-        react_1.fireEvent.click(optionTest2Desktop);
-        await (0, react_1.waitFor)(() => {
-            expect(groupButtonTest2Desktop.checked).toBeTruthy();
-        });
-        // Switch to mobile viewport while side panel is open
-        (0, react_1.act)(() => {
-            window.innerWidth = 500;
-            global.dispatchEvent(new Event("resize"));
-        });
-        // Rerender to mobile view with side panel still open
-        rerender((0, jsx_runtime_1.jsxs)(filtersBar_1.FiltersBar, { toggleAllFilters: handleToggleAllFilters, onClearAllFilters: () => { }, getDefaultFiltersState: () => ({
-                search: { state: { value: "" } },
-                groupButton: { state: { selectedValue: "test1" } }
-            }), isAllFiltersVisible: true, children: [(0, jsx_runtime_1.jsx)(filtersBarSearch_1.FiltersBarSearch, { onChange: searchChangeHandler, state: { value: "" }, sidePanelTitle: "Search", id: "search", showInSidePanel: true }), (0, jsx_runtime_1.jsx)(filtersBarGroupButton_1.FiltersBarGroupButton, { id: "groupButton", onChange: groupButtonChangeHandler, state: { selectedValue: "test1" }, props: {
-                        groupData: [{
-                                value: "test1",
-                                name: "test1"
-                            }, {
-                                value: "test2",
-                                name: "test2"
-                            }],
-                        className: "test"
-                    }, hideInBar: true, sidePanelTitle: "Group Button", showInSidePanel: true })] }));
-        // Verify that filters set in desktop side panel are preserved in mobile view
-        await (0, react_1.waitFor)(() => {
-            const inputElementMobile = document.body.querySelector(".zen-side-panel-filters-bar input.zen-text-input");
-            expect(inputElementMobile).not.toBeNull();
-            expect(inputElementMobile.value).toBe("desktop search value");
-            const groupButtonTest2Mobile = document.body.querySelector(".zen-side-panel-filters-bar .zen-group-button input[value='test2']");
-            expect(groupButtonTest2Mobile.checked).toBeTruthy();
-            const groupButtonTest1Mobile = document.body.querySelector(".zen-side-panel-filters-bar .zen-group-button input[value='test1']");
-            expect(groupButtonTest1Mobile.checked).toBeFalsy();
-            // Side panel should still be visible
-            expect(document.body.querySelector(".zen-side-panel-filters-bar")).not.toBeNull();
-        });
-    });
-});
-//# sourceMappingURL=filtersBar.test.js.map