@geotab/zenith 3.0.0-beta.3 → 3.0.0-beta.4

package/dist/dateRange/dateRange.test.js

@@ -0,0 +1,1125 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const dateRange_1 = require("./dateRange");
+const react_1 = require("@testing-library/react");
+require("./../testHelpers/geotab-axe");
+const dateRangeUtils_1 = require("./dateRangeUtils");
+const userFormatProvider_1 = require("../utils/userFormat/userFormatProvider");
+const languageProvider_1 = require("../utils/localization/languageProvider");
+describe("dateRange", () => {
+    let windowInnerWidth;
+    const scrollIntoViewMock = jest.fn();
+    beforeAll(() => {
+        windowInnerWidth = window.innerWidth;
+    });
+    beforeEach(() => {
+        Element.prototype.scrollIntoView = scrollIntoViewMock;
+    });
+    afterEach(() => {
+        window.innerWidth = windowInnerWidth;
+        (0, react_1.cleanup)();
+        jest.clearAllMocks();
+        jest.restoreAllMocks();
+        jest.useRealTimers();
+    });
+    const today = (0, dateRangeUtils_1.GET_TODAY_OPTION)();
+    const yesterday = (0, dateRangeUtils_1.GET_YESTERDAY_OPTION)();
+    const thisWeek = (0, dateRangeUtils_1.GET_THIS_WEEK_OPTION)();
+    test("Test dateRange with TDateRangeName options", async () => {
+        const { container, getAllByText } = (0, react_1.render)((0, jsx_runtime_1.jsx)(dateRange_1.DateRange, { options: ["Today", "Yesterday", "Custom"], value: { label: today.label, ...today.getRange() }, defaultValue: { label: today.label, ...today.getRange() }, className: "dateRange", onChange: jest.fn() }));
+        expect(container.querySelector(".dateRange")).not.toBeNull();
+        const dateRangeButton = container.querySelector(".zen-date-range");
+        (0, react_1.act)(() => {
+            dateRangeButton.click();
+        });
+        await (0, react_1.waitFor)(() => {
+            expect(document.body.querySelector(".zen-date-range-popup")).not.toBeNull();
+            expect(getAllByText("Today")).not.toBeNull();
+            expect(getAllByText("Yesterday")).not.toBeNull();
+            expect(getAllByText("Custom")).not.toBeNull();
+        });
+    });
+    test("Test dateRange with triggerLabel option", async () => {
+        const mockedOnChange = jest.fn();
+        const { container, getAllByText, rerender } = (0, react_1.render)((0, jsx_runtime_1.jsx)(dateRange_1.DateRange, { options: ["Today", "Yesterday", "Custom"], value: { label: today.label, ...today.getRange() }, defaultValue: { label: today.label, ...today.getRange() }, className: "dateRange", triggerLabel: "Day off", onChange: mockedOnChange }));
+        expect(container.querySelector(".dateRange")).not.toBeNull();
+        let dateRangeButton = container.querySelector(".zen-date-range");
+        expect(dateRangeButton.textContent).toBe("Day off");
+        (0, react_1.act)(() => {
+            dateRangeButton.click();
+        });
+        await (0, react_1.waitFor)(() => {
+            expect(document.body.querySelector(".zen-date-range-popup")).not.toBeNull();
+            expect(getAllByText("Today")).not.toBeNull();
+            expect(getAllByText("Yesterday")).not.toBeNull();
+            expect(getAllByText("Custom")).not.toBeNull();
+        });
+        let yesterdayInput = document.querySelector(".zen-radio__input[value='Yesterday']");
+        expect(yesterdayInput.getAttribute("checked")).toBeNull();
+        const yesterdayLabel = document.querySelector("label.zen-radio__label input[value='Yesterday']");
+        expect(yesterdayLabel).not.toBeNull();
+        (0, react_1.act)(() => {
+            yesterdayLabel.click();
+        });
+        expect(mockedOnChange).toHaveBeenCalledWith({ label: yesterday.label, ...yesterday.getRange() });
+        expect(document.body.querySelector(".zen-date-range-popup")).toBeNull();
+        rerender((0, jsx_runtime_1.jsx)(dateRange_1.DateRange, { options: ["Today", "Yesterday", "Custom"], value: { label: yesterday.label, ...yesterday.getRange() }, defaultValue: { label: today.label, ...today.getRange() }, className: "dateRange", triggerLabel: "Day off", onChange: mockedOnChange }));
+        dateRangeButton = container.querySelector(".zen-date-range");
+        expect(dateRangeButton.textContent).toBe("Day off");
+        (0, react_1.act)(() => {
+            dateRangeButton.click();
+        });
+        expect(document.body.querySelector(".zen-date-range-popup")).not.toBeNull();
+        yesterdayInput = document.querySelector(".zen-radio__input[value='Yesterday']");
+        expect(yesterdayInput.getAttribute("checked")).not.toBeNull();
+        expect(dateRangeButton.textContent).toBe("Day off");
+        (0, react_1.act)(() => {
+            dateRangeButton.click();
+        });
+        expect(document.body.querySelector(".zen-date-range-popup")).toBeNull();
+    });
+    test("Test dateRange with triggerLabel option not supported for component with stepping", async () => {
+        const mockedOnChange = jest.fn();
+        const mockCurrentDate = (year, month, day) => {
+            jest.useFakeTimers();
+            jest.setSystemTime(new Date(year, month - 1, day));
+        };
+        mockCurrentDate(2024, 5, 15);
+        const todayOption = { label: "Today", from: new Date(2024, 5 - 1, 15, 0, 0, 0), to: new Date(2024, 5 - 1, 15, 23, 59, 59) };
+        const yesterdayOption = { label: "Yesterday", from: new Date(2024, 5 - 1, 14, 0, 0, 0), to: new Date(2024, 5 - 1, 14, 23, 59, 59) };
+        const { container, rerender } = (0, react_1.render)((0, jsx_runtime_1.jsx)(dateRange_1.DateRange, { options: ["Today", "Yesterday", "Custom"], value: todayOption, defaultValue: todayOption, className: "dateRange", triggerLabel: "Day off", stepper: true, onChange: mockedOnChange }));
+        expect(container.querySelector(".zen-date-range-wrapper")).not.toBeNull();
+        let dateRangeButton = container.querySelector(".zen-date-range");
+        expect(dateRangeButton.textContent).toBe("Today");
+        const previousButton = document.querySelector(`.zen-date-range__stepper--left`);
+        (0, react_1.act)(() => {
+            previousButton.click();
+        });
+        await (0, react_1.waitFor)(() => {
+            expect(mockedOnChange).toHaveBeenLastCalledWith(yesterdayOption);
+        });
+        rerender((0, jsx_runtime_1.jsx)(dateRange_1.DateRange, { options: ["Today", "Yesterday", "Custom"], value: yesterdayOption, defaultValue: todayOption, className: "dateRange", triggerLabel: "Day off", stepper: true, onChange: mockedOnChange }));
+        dateRangeButton = container.querySelector(".zen-date-range");
+        expect(dateRangeButton.textContent).toBe("Yesterday");
+        expect(yesterdayOption.to.getTime() - yesterdayOption.from.getTime()).toEqual(todayOption.to.getTime() - todayOption.from.getTime());
+    });
+    test("Test dateRange with triggerLabel option not supported for component with stepping with DST", async () => {
+        const mockedOnChange = jest.fn();
+        const mockCurrentDate = (year, month, day) => {
+            jest.useFakeTimers();
+            jest.setSystemTime(new Date(year, month - 1, day));
+        };
+        mockCurrentDate(2025, 11, 3); // Date after DST ends on Nov 3, 2025
+        const todayOption = { label: "Today", from: new Date(2025, 11 - 1, 3, 0, 0, 0), to: new Date(2025, 11 - 1, 3, 23, 59, 59) };
+        const yesterdayOption = { label: "Yesterday", from: new Date(2025, 11 - 1, 2, 0, 0, 0), to: new Date(2025, 11 - 1, 2, 23, 59, 59) };
+        const { container, rerender } = (0, react_1.render)((0, jsx_runtime_1.jsx)(dateRange_1.DateRange, { options: ["Today", "Yesterday", "Custom"], value: todayOption, defaultValue: todayOption, className: "dateRange", triggerLabel: "Day off", stepper: true, onChange: mockedOnChange }));
+        expect(container.querySelector(".zen-date-range-wrapper")).not.toBeNull();
+        let dateRangeButton = container.querySelector(".zen-date-range");
+        expect(dateRangeButton.textContent).toBe("Today");
+        const previousButton = document.querySelector(`.zen-date-range__stepper--left`);
+        (0, react_1.act)(() => {
+            previousButton.click();
+        });
+        await (0, react_1.waitFor)(() => {
+            expect(mockedOnChange).toHaveBeenLastCalledWith({ label: "Yesterday", from: yesterdayOption.from, to: yesterdayOption.to });
+        });
+        rerender((0, jsx_runtime_1.jsx)(dateRange_1.DateRange, { options: ["Today", "Yesterday", "Custom"], value: { label: "Yesterday", from: yesterdayOption.from, to: yesterdayOption.to }, defaultValue: todayOption, className: "dateRange", triggerLabel: "Day off", stepper: true, onChange: mockedOnChange }));
+        dateRangeButton = container.querySelector(".zen-date-range");
+        expect(dateRangeButton.textContent).toBe("Yesterday");
+        expect(yesterdayOption.to.getTime() - yesterdayOption.from.getTime()).not.toEqual(todayOption.to.getTime() - todayOption.from.getTime());
+    });
+    test("Test dateRange with options created with GET_DEFAULT_DATE_OPTIONS", async () => {
+        const options = (0, dateRangeUtils_1.GET_DEFAULT_DATE_OPTIONS)();
+        const { container, getAllByText } = (0, react_1.render)((0, jsx_runtime_1.jsx)(dateRange_1.DateRange, { options: options, value: { label: today.label, ...today.getRange() }, defaultValue: { label: today.label, ...today.getRange() }, className: "dateRange", onChange: jest.fn() }));
+        expect(container.querySelector(".dateRange")).not.toBeNull();
+        const dateRangeButton = container.querySelector(".zen-date-range");
+        (0, react_1.act)(() => {
+            dateRangeButton.click();
+        });
+        const getSecondaryLabelSelector = (val) => document.querySelector(`input[value='${val}']+.zen-radio__label-text .zen-date-range-inner__label-secondary`);
+        await (0, react_1.waitFor)(() => {
+            expect(document.body.querySelector(".zen-date-range-popup")).not.toBeNull();
+            expect(getAllByText("Today")).not.toBeNull();
+            expect(getSecondaryLabelSelector("Today")).toBeNull();
+            expect(getAllByText("Yesterday")).not.toBeNull();
+            expect(getSecondaryLabelSelector("Yesterday")).toBeNull();
+            expect(getAllByText("This week")).not.toBeNull();
+            expect(getSecondaryLabelSelector("This week")).not.toBeNull();
+            expect(getAllByText("Last week")).not.toBeNull();
+            expect(getSecondaryLabelSelector("Last week")).not.toBeNull();
+            expect(getAllByText("This month")).not.toBeNull();
+            expect(getSecondaryLabelSelector("This month")).not.toBeNull();
+            expect(getAllByText("Last month")).not.toBeNull();
+            expect(getSecondaryLabelSelector("Last month")).not.toBeNull();
+            expect(getAllByText("Last 3 months")).not.toBeNull();
+            expect(getSecondaryLabelSelector("Last 3 months")).not.toBeNull();
+        });
+    });
+    test("Test dateRange with allowUnsetValue", async () => {
+        const mockCurrentDate = (year, month, day) => {
+            jest.useFakeTimers();
+            jest.setSystemTime(new Date(year, month - 1, day));
+        };
+        mockCurrentDate(2024, 5, 15);
+        const mockedOnChange = jest.fn();
+        const { container, getAllByText, rerender } = (0, react_1.render)((0, jsx_runtime_1.jsx)(dateRange_1.DateRange, { options: ["Today", "Yesterday", "Custom"], value: undefined, allowUnsetValue: true, className: "dateRange", onChange: mockedOnChange }));
+        expect(container.querySelector(".dateRange")).not.toBeNull();
+        let dateRangeButton = container.querySelector(".zen-date-range");
+        (0, react_1.act)(() => {
+            dateRangeButton.click();
+        });
+        await (0, react_1.waitFor)(() => {
+            expect(document.body.querySelector(".zen-date-range-popup")).not.toBeNull();
+            expect(getAllByText("Today")).not.toBeNull();
+            expect(getAllByText("Yesterday")).not.toBeNull();
+            expect(getAllByText("Custom")).not.toBeNull();
+        });
+        let todayInput = document.querySelector(".zen-radio__input[value='Today']");
+        expect(todayInput.getAttribute("checked")).toBeNull();
+        let yesterdayInput = document.querySelector(".zen-radio__input[value='Yesterday']");
+        expect(yesterdayInput.getAttribute("checked")).toBeNull();
+        let customInput = document.querySelector(".zen-radio__input[value='Custom']");
+        expect(customInput?.getAttribute("checked")).toBeNull();
+        expect(mockedOnChange).toHaveBeenCalledTimes(0);
+        const todayLabel = document.querySelector(`.zen-radio__label[for='${yesterdayInput.id}']`);
+        expect(todayLabel).not.toBeNull();
+        (0, react_1.act)(() => {
+            todayLabel.click();
+        });
+        await (0, react_1.waitFor)(() => {
+            expect(mockedOnChange).toHaveBeenCalledTimes(1);
+            expect(mockedOnChange).toHaveBeenCalledWith({ label: "Yesterday", from: new Date(2024, 5 - 1, 14, 0, 0, 0), to: new Date(2024, 5 - 1, 14, 23, 59, 59) });
+        });
+        rerender((0, jsx_runtime_1.jsx)(dateRange_1.DateRange, { options: ["Today", "Yesterday", "Custom"], value: { label: "Yesterday", from: new Date(2024, 5 - 1, 14, 0, 0, 0), to: new Date(2024, 5 - 1, 14, 23, 59, 59) }, allowUnsetValue: true, className: "dateRange", onChange: mockedOnChange }));
+        dateRangeButton = container.querySelector(".zen-date-range");
+        (0, react_1.act)(() => {
+            dateRangeButton.click();
+        });
+        await (0, react_1.waitFor)(() => {
+            expect(document.body.querySelector(".zen-date-range-popup")).not.toBeNull();
+        });
+        todayInput = document.querySelector(".zen-radio__input[value='Today']");
+        expect(todayInput.getAttribute("checked")).toBeNull();
+        yesterdayInput = document.querySelector(".zen-radio__input[value='Yesterday']");
+        expect(yesterdayInput.getAttribute("checked")).not.toBeNull();
+        customInput = document.querySelector(".zen-radio__input[value='Custom']");
+        expect(customInput?.getAttribute("checked")).toBeNull();
+        const clearButton = document.querySelector(".zen-date-range-popup__button-clear");
+        (0, react_1.act)(() => {
+            clearButton.click();
+        });
+        await (0, react_1.waitFor)(() => {
+            expect(mockedOnChange).toHaveBeenCalledTimes(2);
+            expect(mockedOnChange).toHaveBeenCalledWith(undefined);
+        });
+        jest.clearAllTimers();
+        jest.useRealTimers();
+    });
+    test("Test dateRange Clear button disabled state", async () => {
+        const mockCurrentDate = (year, month, day) => {
+            jest.useFakeTimers();
+            jest.setSystemTime(new Date(year, month - 1, day));
+        };
+        mockCurrentDate(2024, 5, 15);
+        const mockedOnChange = jest.fn();
+        const { container, getAllByText, rerender } = (0, react_1.render)((0, jsx_runtime_1.jsx)(dateRange_1.DateRange, { options: ["Today", "Yesterday", "Custom"], value: { label: "Today", from: new Date(2024, 4, 15, 0, 0, 0), to: new Date(2024, 4, 15, 23, 59, 59) }, defaultValue: { label: "Custom", from: new Date(2024, 4, 20, 0, 0, 0), to: new Date(2024, 4, 20, 23, 59, 59) }, className: "dateRange", onChange: mockedOnChange }));
+        expect(container.querySelector(".dateRange")).not.toBeNull();
+        let dateRangeButton = container.querySelector(".zen-date-range");
+        (0, react_1.act)(() => {
+            dateRangeButton.click();
+        });
+        await (0, react_1.waitFor)(() => {
+            expect(document.body.querySelector(".zen-date-range-popup")).not.toBeNull();
+            expect(getAllByText("Today")).not.toBeNull();
+            expect(getAllByText("Yesterday")).not.toBeNull();
+            expect(getAllByText("Custom")).not.toBeNull();
+        });
+        const todayInput = document.querySelector(".zen-radio__input[value='Today']");
+        expect(todayInput.checked).toBeTruthy();
+        let clearButton = document.querySelector(".zen-date-range-popup__button-clear");
+        expect(clearButton.disabled).toBeFalsy();
+        (0, react_1.act)(() => {
+            clearButton.click();
+        });
+        await (0, react_1.waitFor)(() => {
+            expect(mockedOnChange).toHaveBeenCalledTimes(1);
+            expect(mockedOnChange).toHaveBeenCalledWith({ label: "Custom", from: new Date(2024, 4, 20, 0, 0, 0), to: new Date(2024, 4, 20, 23, 59, 59) });
+        });
+        rerender((0, jsx_runtime_1.jsx)(dateRange_1.DateRange, { options: ["Today", "Yesterday", "Custom"], value: { label: "Custom", from: new Date(2024, 4, 20, 0, 0, 0), to: new Date(2024, 4, 20, 23, 59, 59) }, defaultValue: { label: "Custom", from: new Date(2024, 4, 20, 0, 0, 0), to: new Date(2024, 4, 20, 23, 59, 59) }, className: "dateRange", onChange: mockedOnChange }));
+        dateRangeButton = container.querySelector(".zen-date-range");
+        (0, react_1.act)(() => {
+            dateRangeButton.click();
+        });
+        await (0, react_1.waitFor)(() => {
+            expect(document.body.querySelector(".zen-date-range-popup")).not.toBeNull();
+        });
+        const customInput = document.querySelector(".zen-radio__input[value='Custom']");
+        expect(customInput.checked).toBeTruthy();
+        clearButton = document.querySelector(".zen-date-range-popup__button-clear");
+        expect(clearButton.disabled).toBeTruthy();
+        const inputStartElement = document.querySelector(".zen-date-input-inner__control-start input.zen-date-input-inner__text-input");
+        expect(document.querySelector(".zen-date-input-inner__control-start input.zen-date-input-inner__text-input")?.value).toBe("2024-05-20");
+        (0, react_1.act)(() => {
+            react_1.fireEvent.change(inputStartElement, { target: { value: "2024-05-15" } });
+        });
+        react_1.fireEvent.blur(inputStartElement);
+        expect(document.querySelector(".zen-date-input-inner__control-start input.zen-date-input-inner__text-input")?.value).toBe("2024-05-15");
+        clearButton = document.querySelector(".zen-date-range-popup__button-clear");
+        expect(clearButton.disabled).toBeFalsy();
+        (0, react_1.act)(() => {
+            clearButton.click();
+        });
+        await (0, react_1.waitFor)(() => {
+            expect(mockedOnChange).toHaveBeenCalledTimes(2);
+            expect(mockedOnChange).toHaveBeenCalledWith({ label: "Custom", from: new Date(2024, 4, 20, 0, 0, 0), to: new Date(2024, 4, 20, 23, 59, 59) });
+        });
+        jest.clearAllTimers();
+        jest.useRealTimers();
+    });
+    test("Test custom option available for other languages", async () => {
+        const mockCurrentDate = (year, month, day) => {
+            jest.useFakeTimers();
+            jest.setSystemTime(new Date(year, month - 1, day));
+        };
+        mockCurrentDate(2024, 5, 15);
+        const mockedOnChange = jest.fn();
+        const { container } = (0, react_1.render)((0, jsx_runtime_1.jsx)(languageProvider_1.LanguageProvider, { language: "fr", children: (0, jsx_runtime_1.jsx)(dateRange_1.DateRange, { options: ["Today", "Yesterday", "Custom"], defaultValue: { label: today.label, ...today.getRange() }, value: { label: "Yesterday", from: new Date(2024, 5 - 1, 14, 0, 0, 0), to: new Date(2024, 5 - 1, 14, 23, 59, 59) }, className: "dateRange", onChange: mockedOnChange }) }));
+        expect(container.querySelector(".dateRange")).not.toBeNull();
+        const dateRangeButton = container.querySelector(".zen-date-range");
+        (0, react_1.act)(() => {
+            dateRangeButton.click();
+        });
+        await (0, react_1.waitFor)(() => {
+            expect(document.body.querySelector(".zen-date-range-popup")).not.toBeNull();
+        });
+        const todayInput = document.querySelector(".zen-radio__input[value='Today']");
+        const todayLabel = document.querySelector("label.zen-radio__label input[value='Today']");
+        expect(todayLabel).not.toBeNull();
+        expect(todayInput.getAttribute("checked")).toBeNull();
+        const yesterdayInput = document.querySelector(".zen-radio__input[value='Yesterday']");
+        const yesterdayLabel = document.querySelector("label.zen-radio__label input[value='Yesterday']");
+        expect(yesterdayLabel).not.toBeNull();
+        expect(yesterdayInput.getAttribute("checked")).not.toBeNull();
+        const customInput = document.querySelector(".zen-radio__input[value='Custom']");
+        const customLabel = document.querySelector("label.zen-radio__label input[value='Custom']");
+        expect(customInput?.getAttribute("checked")).toBeNull();
+        expect(mockedOnChange).toHaveBeenCalledTimes(0);
+        (0, react_1.act)(() => {
+            customLabel.click();
+        });
+        await (0, react_1.waitFor)(() => {
+            expect(document.querySelector(".zen-date-input-inner")).not.toBeNull();
+        });
+        expect(mockedOnChange).toHaveBeenCalledTimes(1);
+    });
+    test("Test dateRange mobile view", async () => {
+        window.innerWidth = 639;
+        const mockedOnChange = jest.fn();
+        const { container, getAllByText } = (0, react_1.render)((0, jsx_runtime_1.jsx)(dateRange_1.DateRange, { options: ["Today", "Yesterday", "Custom"], value: { label: today.label, ...today.getRange() }, defaultValue: { label: today.label, ...today.getRange() }, className: "dateRange", onChange: mockedOnChange }));
+        expect(container.querySelector(".dateRange")).not.toBeNull();
+        const dateRangeButton = container.querySelector(".zen-date-range");
+        expect(document.body.querySelector(".zen-mobile-sheet")).toBeNull();
+        (0, react_1.act)(() => {
+            dateRangeButton.click();
+        });
+        await (0, react_1.waitFor)(() => {
+            expect(document.body.querySelector(".zen-mobile-sheet-wrapper")).not.toBeNull();
+        });
+        (0, react_1.act)(() => {
+            react_1.fireEvent.transitionEnd(document.querySelector(".zen-mobile-sheet-wrapper"));
+        });
+        await (0, react_1.waitFor)(() => {
+            expect(document.body.querySelector(".zen-side-panel--shown")).not.toBeNull();
+        });
+        await (0, react_1.waitFor)(() => {
+            expect(document.body.querySelector(".zen-mobile-sheet")).not.toBeNull();
+            expect(getAllByText("Today")).not.toBeNull();
+            expect(getAllByText("Yesterday")).not.toBeNull();
+            expect(getAllByText("Custom")).not.toBeNull();
+        });
+        expect(document.querySelectorAll(".zen-footer-buttons__item").length).toBe(1);
+        expect(document.querySelector(".zen-footer-buttons__item")?.textContent).toBe("Clear");
+        expect(document.querySelector(".zen-date-range-inner__radio-group--with-custom")).not.toBeNull();
+        expect(document.querySelector(".zen-date-input-inner")).toBeNull();
+        expect(document.querySelector(".zen-date-input-inner--mobile-view")).toBeNull();
+        expect(document.querySelector(".zen-date-range-inner__mobile-custom-label")).not.toBeNull();
+        let customInput = document.querySelector(".zen-radio__input[value='Custom']");
+        expect(customInput?.getAttribute("checked")).toBeNull();
+        const customLabel = document.querySelector(".zen-date-range-inner__mobile-custom-label");
+        (0, react_1.act)(() => {
+            customLabel.click();
+        });
+        await (0, react_1.waitFor)(() => {
+            expect(document.querySelector(".zen-date-input-inner")).not.toBeNull();
+            expect(document.querySelector(".zen-date-input-inner--mobile-view")).not.toBeNull();
+        });
+        expect(mockedOnChange).toHaveBeenCalledTimes(1);
+        const footerButtons = document.querySelectorAll(".zen-footer-buttons__item");
+        expect(footerButtons.length).toBe(2);
+        expect(Array.from(footerButtons).some(el => el.textContent === "Apply")).toBeTruthy();
+        expect(Array.from(footerButtons).some(el => el.textContent === "Clear")).toBeTruthy();
+        const backButton = document.querySelector(".zen-mobile-sheet__back-button");
+        expect(backButton).not.toBeNull();
+        expect(backButton.textContent).toBe("Custom");
+        (0, react_1.act)(() => {
+            backButton.click();
+        });
+        await (0, react_1.waitFor)(() => {
+            expect(document.querySelector(".zen-date-input-inner")).toBeNull();
+            expect(document.querySelector(".zen-date-input-inner--mobile-view")).toBeNull();
+        });
+        expect(mockedOnChange).toHaveBeenCalledTimes(1);
+        customInput = document.querySelector(".zen-radio__input[value='Custom']");
+        expect(customInput?.getAttribute("checked")).not.toBeNull();
+    });
+    test("Test dateRange with error fields", async () => {
+        const mockedOnChange = jest.fn();
+        const { container } = (0, react_1.render)((0, jsx_runtime_1.jsx)(dateRange_1.DateRange, { options: ["Today", "Yesterday", "Custom"], value: { label: today.label, ...today.getRange() }, defaultValue: { label: today.label, ...today.getRange() }, className: "dateRange", onChange: mockedOnChange }));
+        expect(container.querySelector(".dateRange")).not.toBeNull();
+        const dateRangeButton = container.querySelector(".zen-date-range");
+        (0, react_1.act)(() => {
+            dateRangeButton.click();
+        });
+        await (0, react_1.waitFor)(() => {
+            expect(document.body.querySelector(".zen-date-range-popup")).not.toBeNull();
+        });
+        expect(document.querySelector(".zen-date-input-inner")).toBeNull();
+        const customInput = document.querySelector(".zen-radio__input[value='Custom']");
+        expect(customInput.getAttribute("checked")).toBeNull();
+        expect(mockedOnChange).toHaveBeenCalledTimes(0);
+        const customLabel = document.querySelector(`.zen-radio__label[for='${customInput.id}']`);
+        expect(customLabel).not.toBeNull();
+        (0, react_1.act)(() => {
+            customLabel.click();
+        });
+        await (0, react_1.waitFor)(() => {
+            expect(document.querySelector(".zen-date-input-inner")).not.toBeNull();
+        });
+        expect(mockedOnChange).toHaveBeenCalledTimes(1);
+        const inputStartElement = document.querySelector(".zen-date-input-inner__control-start .zen-date-input-inner__text-input");
+        const inputEndElement = document.querySelector(".zen-date-input-inner__control-end .zen-date-input-inner__text-input");
+        expect(inputStartElement).not.toBeNull();
+        expect(inputEndElement).not.toBeNull();
+        expect(document.querySelector(".zen-date-input-inner__control-start .zen-form-field-error")).toBeNull();
+        expect(document.querySelector(".zen-date-input-inner__control-end .zen-form-field-error")).toBeNull();
+        react_1.fireEvent.change(inputStartElement, { target: { value: "" } });
+        await (0, react_1.waitFor)(() => {
+            expect(document.querySelector(".zen-date-input-inner__control-start .zen-form-field-error")).not.toBeNull();
+        });
+        react_1.fireEvent.change(inputEndElement, { target: { value: "" } });
+        await (0, react_1.waitFor)(() => {
+            expect(document.querySelector(".zen-date-input-inner__control-end .zen-form-field-error")).not.toBeNull();
+        });
+    });
+    test("Test dateRange with disableDatesAfter and disableDatesBefore pass", async () => {
+        const mockedOnChange = jest.fn();
+        const smallerDate = new Date("2025-01-05T00:00:00.000Z").toISOString();
+        const largerDate = new Date("2025-01-20T00:00:00.000Z").toISOString();
+        const { container } = (0, react_1.render)((0, jsx_runtime_1.jsx)(dateRange_1.DateRange, { options: ["Today", "Yesterday", "Custom"], defaultValue: { label: today.label, ...today.getRange() }, value: { label: "Custom", from: new Date("2025-01-10T05:00:00.000Z"), to: new Date("2025-01-11T04:59:00.000Z") }, className: "dateRange", disableDatesBefore: smallerDate, disableDatesAfter: largerDate, timeSelect: true, onChange: mockedOnChange }));
+        expect(container.querySelector(".dateRange")).not.toBeNull();
+        const dateRangeButton = container.querySelector(".zen-date-range");
+        (0, react_1.act)(() => {
+            dateRangeButton.click();
+        });
+        await (0, react_1.waitFor)(() => {
+            expect(document.body.querySelector(".zen-date-range-popup")).not.toBeNull();
+            expect(document.querySelector(".zen-date-input-inner")).not.toBeNull();
+        });
+        expect(document.querySelector(".zen-date-input-inner__control-start input.zen-date-input-inner__text-input")?.value).toBe("2025-01-10");
+        expect(document.querySelector(".zen-date-input-inner__control-start button.zen-date-input-inner__text-input")?.textContent).toContain("00:00");
+        expect(document.querySelector(".zen-date-input-inner__control-end input.zen-date-input-inner__text-input")?.value).toBe("2025-01-10");
+        expect(document.querySelector(".zen-date-input-inner__control-end button.zen-date-input-inner__text-input")?.textContent).toContain("23:59");
+        const isCurrentActiveField = (selector) => document.querySelector(selector)?.classList.contains("zen-date-input-inner__text-input--active");
+        expect(isCurrentActiveField(".zen-date-input-inner__control-start input.zen-date-input-inner__text-input")).toBeTruthy();
+        const day19 = document.querySelector("[data-id*='calendar-day-19-0-2025']");
+        (0, react_1.act)(() => {
+            react_1.fireEvent.pointerDown(day19);
+        });
+        await (0, react_1.waitFor)(() => {
+            expect(document.querySelector(".zen-date-input-inner__control-start input.zen-date-input-inner__text-input")?.value).toBe("2025-01-19");
+            expect(isCurrentActiveField(".zen-date-input-inner__control-end input.zen-date-input-inner__text-input")).toBeTruthy();
+            expect(document.querySelector(".zen-date-input-inner__control-end input.zen-date-input-inner__text-input")?.value).toBe("2025-01-19");
+        });
+        expect(document.querySelector(".zen-date-input-inner__control-start button.zen-date-input-inner__text-input")?.textContent).toContain("00:00");
+        expect(document.querySelector(".zen-date-input-inner__control-end button.zen-date-input-inner__text-input")?.textContent).toContain("00:00");
+        const endInputElement = document.querySelector(".zen-date-input-inner__control-end input.zen-date-input-inner__text-input");
+        react_1.fireEvent.change(endInputElement, { target: { value: "2025-01-20" } });
+        react_1.fireEvent.blur(endInputElement);
+        expect(document.querySelector(".zen-date-input-inner__control-start input.zen-date-input-inner__text-input")?.value).toBe("2025-01-19");
+        expect(document.querySelector(".zen-date-input-inner__control-start button.zen-date-input-inner__text-input")?.textContent).toContain("00:00");
+        expect(document.querySelector(".zen-date-input-inner__control-end input.zen-date-input-inner__text-input")?.value).toBe("2025-01-19");
+        expect(document.querySelector(".zen-date-input-inner__control-end button.zen-date-input-inner__text-input")?.textContent).toContain("00:00");
+        const endTimeButton = document.querySelector(".zen-date-input-inner__control-end button.zen-date-input-inner__text-input");
+        (0, react_1.act)(() => {
+            react_1.fireEvent.click(endTimeButton);
+        });
+        await (0, react_1.waitFor)(() => {
+            expect(document.querySelector(".zen-time-picker__popup")).not.toBeNull();
+        });
+        const thirtyMinutsOption = document.querySelector(".zen-time-picker-select__wrapper ul[aria-label='Select minutes'] li.zen-select-item[data-id='30']");
+        (0, react_1.act)(() => {
+            react_1.fireEvent.click(thirtyMinutsOption);
+        });
+        const eighteenHoursOption = document.querySelector(".zen-time-picker-select__wrapper ul[aria-label='Select hour'] li.zen-select-item[data-id='18']");
+        (0, react_1.act)(() => {
+            react_1.fireEvent.click(eighteenHoursOption);
+        });
+        const timeApplyButton = document.querySelector(".zen-time-picker-select__footer-button[aria-label='Apply changes']");
+        (0, react_1.act)(() => {
+            react_1.fireEvent.click(timeApplyButton);
+        });
+        await (0, react_1.waitFor)(() => {
+            expect(document.querySelector(".zen-date-input-inner__control-end input.zen-date-input-inner__text-input")?.value).toBe("2025-01-19");
+            expect(document.querySelector(".zen-date-input-inner__control-end button.zen-date-input-inner__text-input")?.textContent).toContain("18:30");
+        });
+        (0, react_1.act)(() => {
+            react_1.fireEvent.click(document.querySelector(".zen-date-range-popup__button-apply"));
+        });
+        await (0, react_1.waitFor)(() => {
+            expect(document.body.querySelector(".zen-date-range-popup")).toBeNull();
+        });
+        expect(mockedOnChange).toHaveBeenCalledTimes(1);
+        expect(mockedOnChange).toHaveBeenCalledWith({ label: "Custom", from: new Date("2025-01-19T05:00:00.000Z"), to: new Date("2025-01-19T23:30:00.000Z") });
+    });
+    test("Test dateRange with custom timeZone", async () => {
+        const mockCurrentDate = (year, month, day) => {
+            jest.useFakeTimers();
+            jest.setSystemTime(new Date(year, month - 1, day));
+        };
+        mockCurrentDate(2024, 5, 15);
+        const mockedOnChange = jest.fn();
+        const offset = 8;
+        const mockedToLocaleDateTime = (d) => {
+            const currentDate = typeof d === "string" ? new Date(d) : d;
+            const utcTimestamp = currentDate.getTime() + (currentDate.getTimezoneOffset() * 60 * 1000);
+            const userTimezoneOffsetMilliseconds = offset * 60 * 60 * 1000;
+            return new Date(utcTimestamp + userTimezoneOffsetMilliseconds);
+        };
+        const mockedToReverseOffsetDateTime = (d) => {
+            const currentDate = typeof d === "string" ? new Date(d) : d;
+            const utcTimestamp = currentDate.getTime() - (offset * 60 * 60 * 1000);
+            const browserTimezoneOffsetMilliseconds = currentDate.getTimezoneOffset() * 60 * 1000;
+            return new Date(utcTimestamp - browserTimezoneOffsetMilliseconds);
+        };
+        const usersToday = (0, dateRangeUtils_1.GET_TODAY_OPTION)(mockedToLocaleDateTime, undefined, mockedToReverseOffsetDateTime);
+        expect(usersToday.getRange().from).toEqual(new Date("2024-05-14T16:00:00.000Z"));
+        expect(usersToday.getRange().to).toEqual(new Date("2024-05-15T15:59:59.000Z"));
+        const { container, rerender } = (0, react_1.render)((0, jsx_runtime_1.jsx)(userFormatProvider_1.UserFormatProvider, { toLocalDateTime: mockedToLocaleDateTime, toReverseOffsetDateTime: mockedToReverseOffsetDateTime, children: (0, jsx_runtime_1.jsx)(dateRange_1.DateRange, { options: ["Today", "Yesterday", "Custom"], value: { label: usersToday.label, ...usersToday.getRange() }, defaultValue: { label: usersToday.label, ...usersToday.getRange() }, className: "dateRange", timeSelect: true, onChange: mockedOnChange }) }));
+        expect(container.querySelector(".dateRange")).not.toBeNull();
+        const dateRangeButton = container.querySelector(".zen-date-range");
+        (0, react_1.act)(() => {
+            dateRangeButton.click();
+        });
+        await (0, react_1.waitFor)(() => {
+            expect(document.body.querySelector(".zen-date-range-popup")).not.toBeNull();
+        });
+        expect(document.querySelector(".zen-date-range-inner__calendar-wrapper")).toBeNull();
+        const customInput = document.querySelector(".zen-radio__input[value='Custom']");
+        expect(customInput.getAttribute("checked")).toBeNull();
+        expect(mockedOnChange).toHaveBeenCalledTimes(0);
+        const customLabel = document.querySelector(`.zen-radio__label[for='${customInput.id}']`);
+        expect(customLabel).not.toBeNull();
+        expect(mockedOnChange).toHaveBeenCalledTimes(0);
+        (0, react_1.act)(() => {
+            customLabel.click();
+        });
+        await (0, react_1.waitFor)(() => {
+            expect(document.querySelector(".zen-date-range-inner__calendar-wrapper")).not.toBeNull();
+            expect(mockedOnChange).toHaveBeenCalledTimes(1);
+            expect(mockedOnChange).toHaveBeenCalledWith({ label: "Custom", from: new Date("2024-05-14T16:00:00.000Z"), to: new Date("2024-05-15T15:59:59.000Z") });
+        });
+        expect(document.querySelector(".zen-date-input-inner__control-start input.zen-date-input-inner__text-input")?.value).toBe("2024-05-15");
+        expect(document.querySelector(".zen-date-input-inner__control-start button.zen-date-input-inner__text-input")?.textContent).toContain("00:00");
+        expect(document.querySelector(".zen-date-input-inner__control-end input.zen-date-input-inner__text-input")?.value).toBe("2024-05-15");
+        expect(document.querySelector(".zen-date-input-inner__control-end button.zen-date-input-inner__text-input")?.textContent).toContain("23:59");
+        rerender((0, jsx_runtime_1.jsx)(userFormatProvider_1.UserFormatProvider, { toLocalDateTime: mockedToLocaleDateTime, toReverseOffsetDateTime: mockedToReverseOffsetDateTime, children: (0, jsx_runtime_1.jsx)(dateRange_1.DateRange, { options: ["Today", "Yesterday", "Custom"], value: { label: "Custom", from: new Date("2024-05-14T16:00:00.000Z"), to: new Date("2024-05-15T15:59:59.000Z") }, defaultValue: { label: usersToday.label, ...usersToday.getRange() }, className: "dateRange", timeSelect: true, onChange: mockedOnChange }) }));
+        const day10 = document.querySelector("[data-id*='calendar-day-10']");
+        (0, react_1.act)(() => {
+            react_1.fireEvent.pointerDown(day10);
+        });
+        await (0, react_1.waitFor)(() => {
+            expect(document.querySelector(".zen-date-input-inner__control-start input.zen-date-input-inner__text-input")?.value).toBe("2024-05-10");
+            expect(document.querySelector(".zen-date-input-inner__control-start button.zen-date-input-inner__text-input")?.textContent).toContain("00:00");
+        });
+        const inputEndElement = document.querySelector(".zen-date-input-inner__control-end input.zen-date-input-inner__text-input");
+        expect(document.querySelector(".zen-date-input-inner__control-end input.zen-date-input-inner__text-input")?.value).toBe("2024-05-15");
+        expect(document.querySelector(".zen-date-input-inner__control-end button.zen-date-input-inner__text-input")?.textContent).toContain("23:59");
+        expect(document.querySelector(".zen-date-input-inner__control-end .zen-form-field-error")).toBeNull();
+        (0, react_1.act)(() => {
+            react_1.fireEvent.change(inputEndElement, { target: { value: "2024-05-21" } });
+        });
+        react_1.fireEvent.blur(inputEndElement);
+        expect(document.querySelector(".zen-date-input-inner__control-end input.zen-date-input-inner__text-input")?.value).toBe("2024-05-21");
+        const timeButton = document.querySelector(".zen-date-input-inner__control-end button.zen-date-input-inner__text-input");
+        (0, react_1.act)(() => {
+            react_1.fireEvent.click(timeButton);
+        });
+        await (0, react_1.waitFor)(() => {
+            expect(document.querySelector(".zen-time-picker__popup")).not.toBeNull();
+        });
+        const thirtyMinutsOption = document.querySelector(".zen-time-picker-select__wrapper li.zen-select-item[data-id='30']");
+        (0, react_1.act)(() => {
+            react_1.fireEvent.click(thirtyMinutsOption);
+        });
+        const timeApplyButton = document.querySelector(".zen-time-picker-select__footer-button[aria-label='Apply changes']");
+        (0, react_1.act)(() => {
+            react_1.fireEvent.click(timeApplyButton);
+        });
+        await (0, react_1.waitFor)(() => {
+            expect(document.querySelector(".zen-time-picker__popup")).toBeNull();
+            expect(document.querySelector(".zen-date-input-inner__control-end button.zen-date-input-inner__text-input")?.textContent).toContain("23:30");
+        });
+        expect(document.querySelector(".zen-date-input-inner__control-end input.zen-date-input-inner__text-input")?.value).toBe("2024-05-21");
+        (0, react_1.act)(() => {
+            react_1.fireEvent.click(document.querySelector(".zen-date-range-popup__button-apply"));
+        });
+        await (0, react_1.waitFor)(() => {
+            expect(document.body.querySelector(".zen-date-range-popup")).toBeNull();
+        });
+        expect(mockedOnChange).toHaveBeenCalledTimes(2);
+        expect(mockedOnChange).toHaveBeenCalledWith({ label: "Custom", from: new Date("2024-05-09T16:00:00.000Z"), to: new Date("2024-05-21T15:30:59.000Z") });
+        jest.clearAllTimers();
+        jest.useRealTimers();
+    });
+    test("Test dateRange with stepper", async () => {
+        const mockCurrentDate = (year, month, day) => {
+            jest.useFakeTimers();
+            jest.setSystemTime(new Date(year, month - 1, day));
+        };
+        mockCurrentDate(2024, 5, 15);
+        const mockedOnChange = jest.fn();
+        const offset = 8;
+        const mockedToLocaleDateTime = (d) => {
+            const currentDate = typeof d === "string" ? new Date(d) : d;
+            const utcTimestamp = currentDate.getTime() + (currentDate.getTimezoneOffset() * 60 * 1000);
+            const userTimezoneOffsetMilliseconds = offset * 60 * 60 * 1000;
+            return new Date(utcTimestamp + userTimezoneOffsetMilliseconds);
+        };
+        const mockedToReverseOffsetDateTime = (d) => {
+            const currentDate = typeof d === "string" ? new Date(d) : d;
+            const utcTimestamp = currentDate.getTime() - (offset * 60 * 60 * 1000);
+            const browserTimezoneOffsetMilliseconds = currentDate.getTimezoneOffset() * 60 * 1000;
+            return new Date(utcTimestamp - browserTimezoneOffsetMilliseconds);
+        };
+        const usersToday = (0, dateRangeUtils_1.GET_TODAY_OPTION)(mockedToLocaleDateTime, undefined, mockedToReverseOffsetDateTime);
+        expect(usersToday.getRange().from).toEqual(new Date("2024-05-14T16:00:00.000Z"));
+        expect(usersToday.getRange().to).toEqual(new Date("2024-05-15T15:59:59.000Z"));
+        const { container, rerender } = (0, react_1.render)((0, jsx_runtime_1.jsx)(userFormatProvider_1.UserFormatProvider, { toLocalDateTime: mockedToLocaleDateTime, toReverseOffsetDateTime: mockedToReverseOffsetDateTime, children: (0, jsx_runtime_1.jsx)(dateRange_1.DateRange, { options: ["Today", "Yesterday", "LastMonth", "ThisMonth", "NextMonth", "Custom"], value: { label: usersToday.label, ...usersToday.getRange() }, defaultValue: { label: usersToday.label, ...usersToday.getRange() }, className: "dateRange", timeSelect: true, stepper: true, onChange: mockedOnChange }) }));
+        expect(container.querySelector(".dateRange")).not.toBeNull();
+        let dateRangeButton = container.querySelector(".zen-date-range");
+        expect(document.body.querySelector(".zen-date-range-wrapper")).not.toBeNull();
+        expect(dateRangeButton.textContent).toContain("Today");
+        const getStepperPreviousButton = () => document.querySelector(`.zen-date-range__stepper--left`);
+        const getStepperNextButton = () => document.querySelector(`.zen-date-range__stepper--right`);
+        let previousButton = getStepperPreviousButton();
+        (0, react_1.act)(() => {
+            previousButton.click();
+        });
+        await (0, react_1.waitFor)(() => {
+            expect(mockedOnChange).toHaveBeenLastCalledWith({ label: "Yesterday", from: new Date("2024-05-13T16:00:00.000Z"), to: new Date("2024-05-14T15:59:59.000Z") });
+        });
+        rerender((0, jsx_runtime_1.jsx)(userFormatProvider_1.UserFormatProvider, { toLocalDateTime: mockedToLocaleDateTime, toReverseOffsetDateTime: mockedToReverseOffsetDateTime, children: (0, jsx_runtime_1.jsx)(dateRange_1.DateRange, { options: ["Today", "Yesterday", "LastMonth", "ThisMonth", "Custom"], value: { label: "Yesterday", from: new Date("2024-05-13T16:00:00.000Z"), to: new Date("2024-05-14T15:59:59.000Z") }, defaultValue: { label: usersToday.label, ...usersToday.getRange() }, className: "dateRange", timeSelect: true, stepper: true, onChange: mockedOnChange }) }));
+        expect(dateRangeButton.textContent).toContain("Yesterday");
+        const nextButton = getStepperNextButton();
+        (0, react_1.act)(() => {
+            nextButton.click();
+        });
+        await (0, react_1.waitFor)(() => {
+            expect(mockedOnChange).toHaveBeenLastCalledWith({ label: "Today", from: new Date("2024-05-14T16:00:00.000Z"), to: new Date("2024-05-15T15:59:59.000Z") });
+        });
+        dateRangeButton = container.querySelector(".zen-date-range");
+        (0, react_1.act)(() => {
+            dateRangeButton.click();
+        });
+        await (0, react_1.waitFor)(() => {
+            expect(document.body.querySelector(".zen-date-range-popup")).not.toBeNull();
+        });
+        const thisMonthLabel = document.querySelector(`.zen-radio-group__item label input[value='ThisMonth']`);
+        expect(thisMonthLabel).not.toBeNull();
+        (0, react_1.act)(() => {
+            thisMonthLabel.click();
+        });
+        await (0, react_1.waitFor)(() => {
+            expect(mockedOnChange).toHaveBeenCalledWith({ label: "ThisMonth", from: new Date("2024-04-30T16:00:00.000Z"), to: new Date("2024-05-31T15:59:59.000Z") });
+        });
+        rerender((0, jsx_runtime_1.jsx)(userFormatProvider_1.UserFormatProvider, { toLocalDateTime: mockedToLocaleDateTime, toReverseOffsetDateTime: mockedToReverseOffsetDateTime, children: (0, jsx_runtime_1.jsx)(dateRange_1.DateRange, { options: ["Today", "Yesterday", "LastMonth", "ThisMonth", "Custom"], value: { label: "ThisMonth", from: new Date("2024-04-30T16:00:00.000Z"), to: new Date("2024-05-31T15:59:59.000Z") }, defaultValue: { label: usersToday.label, ...usersToday.getRange() }, className: "dateRange", timeSelect: true, stepper: true, onChange: mockedOnChange }) }));
+        expect(dateRangeButton.textContent).toContain("This month");
+        previousButton = getStepperPreviousButton();
+        (0, react_1.act)(() => {
+            previousButton.click();
+        });
+        await (0, react_1.waitFor)(() => {
+            expect(mockedOnChange).toHaveBeenLastCalledWith({ label: "LastMonth", from: new Date("2024-03-31T16:00:00.000Z"), to: new Date("2024-04-30T15:59:59.000Z") });
+        });
+        rerender((0, jsx_runtime_1.jsx)(userFormatProvider_1.UserFormatProvider, { toLocalDateTime: mockedToLocaleDateTime, toReverseOffsetDateTime: mockedToReverseOffsetDateTime, children: (0, jsx_runtime_1.jsx)(dateRange_1.DateRange, { options: ["Today", "Yesterday", "LastMonth", "ThisMonth", "Custom"], value: { label: "LastMonth", from: new Date("2024-03-31T16:00:00.000Z"), to: new Date("2024-04-30T15:59:59.000Z") }, defaultValue: { label: usersToday.label, ...usersToday.getRange() }, className: "dateRange", timeSelect: true, stepper: true, onChange: mockedOnChange }) }));
+        expect(dateRangeButton.textContent).toContain("Last month");
+        previousButton = getStepperPreviousButton();
+        (0, react_1.act)(() => {
+            previousButton.click();
+        });
+        await (0, react_1.waitFor)(() => {
+            expect(mockedOnChange).toHaveBeenLastCalledWith({ label: "Custom", from: new Date("2024-02-29T16:00:00.000Z"), to: new Date("2024-03-31T15:59:59.000Z") });
+        });
+        rerender((0, jsx_runtime_1.jsx)(userFormatProvider_1.UserFormatProvider, { toLocalDateTime: mockedToLocaleDateTime, toReverseOffsetDateTime: mockedToReverseOffsetDateTime, children: (0, jsx_runtime_1.jsx)(dateRange_1.DateRange, { options: ["Today", "Yesterday", "LastMonth", "ThisMonth", "Custom"], value: { label: "Custom", from: new Date("2024-02-29T16:00:00.000Z"), to: new Date("2024-03-31T15:59:59.000Z") }, defaultValue: { label: usersToday.label, ...usersToday.getRange() }, className: "dateRange", timeSelect: true, stepper: true, disableDatesBefore: new Date("2024-02-20T16:00:00.000Z").toISOString(), onChange: mockedOnChange }) }));
+        expect(dateRangeButton.textContent).toContain("2024-03-01 - 2024-03-31");
+        expect(document.body.querySelector(".zen-date-range-popup")).toBeNull();
+        previousButton = getStepperPreviousButton();
+        expect(previousButton.disabled).toBeTruthy();
+        jest.clearAllTimers();
+        jest.useRealTimers();
+    });
+    test("Test dateRange with stepper and unset value", () => {
+        const mockCurrentDate = (year, month, day) => {
+            jest.useFakeTimers();
+            jest.setSystemTime(new Date(year, month - 1, day));
+        };
+        mockCurrentDate(2024, 5, 15);
+        const mockedOnChange = jest.fn();
+        const { container } = (0, react_1.render)((0, jsx_runtime_1.jsx)(dateRange_1.DateRange, { options: ["Today", "Yesterday", "LastMonth", "ThisMonth", "NextMonth", "Custom"], value: undefined, defaultValue: undefined, className: "dateRange", timeSelect: true, stepper: true, allowUnsetValue: true, onChange: mockedOnChange }));
+        expect(container.querySelector(".dateRange")).not.toBeNull();
+        const dateRangeButton = container.querySelector(".zen-date-range");
+        expect(document.body.querySelector(".zen-date-range-wrapper")).not.toBeNull();
+        expect(dateRangeButton.textContent).toContain("Date range");
+        const getStepperPreviousButton = () => document.querySelector(`.zen-date-range__stepper--left`);
+        const getStepperNextButton = () => document.querySelector(`.zen-date-range__stepper--right`);
+        const previousButton = getStepperPreviousButton();
+        expect(previousButton.disabled).toBeTruthy();
+        const nextButton = getStepperNextButton();
+        expect(nextButton.disabled).toBeTruthy();
+        (0, react_1.act)(() => {
+            previousButton.click();
+        });
+        expect(mockedOnChange).not.toHaveBeenCalled();
+        jest.clearAllTimers();
+        jest.useRealTimers();
+    });
+    test("Test dateRange with stepper with disabled value", () => {
+        const mockCurrentDate = (year, month, day) => {
+            jest.useFakeTimers();
+            jest.setSystemTime(new Date(year, month - 1, day));
+        };
+        mockCurrentDate(2024, 5, 15);
+        const mockedOnChange = jest.fn();
+        const { container, rerender } = (0, react_1.render)((0, jsx_runtime_1.jsx)(dateRange_1.DateRange, { options: ["Today", "Yesterday", "LastMonth", "Custom"], value: undefined, defaultValue: undefined, disableDatesAfter: new Date(2024, 5, 16, 0, 0, 0).toISOString(), className: "dateRange", timeSelect: true, stepper: true, allowUnsetValue: true, onChange: mockedOnChange }));
+        expect(container.querySelector(".dateRange")).not.toBeNull();
+        const dateRangeButton = container.querySelector(".zen-date-range");
+        expect(document.body.querySelector(".zen-date-range-wrapper")).not.toBeNull();
+        expect(dateRangeButton.textContent).toContain("Date range");
+        const getStepperPreviousButton = () => document.querySelector(`.zen-date-range__stepper--left`);
+        const getStepperNextButton = () => document.querySelector(`.zen-date-range__stepper--right`);
+        let previousButton = getStepperPreviousButton();
+        let nextButton = getStepperNextButton();
+        expect(previousButton.disabled).toBeTruthy();
+        expect(nextButton.disabled).toBeTruthy();
+        rerender((0, jsx_runtime_1.jsx)(dateRange_1.DateRange, { options: ["Today", "Yesterday", "LastMonth", "Custom"], value: { label: "Today", from: new Date(2024, 5, 15, 0, 0, 0), to: new Date(2024, 5, 15, 23, 59, 59) }, defaultValue: undefined, disableDatesAfter: new Date(2024, 5, 16, 0, 0, 0).toISOString(), className: "dateRange", timeSelect: true, stepper: true, allowUnsetValue: true, onChange: mockedOnChange }));
+        previousButton = getStepperPreviousButton();
+        nextButton = getStepperNextButton();
+        expect(previousButton.disabled).toBeFalsy();
+        expect(nextButton.disabled).toBeTruthy();
+        rerender((0, jsx_runtime_1.jsx)(dateRange_1.DateRange, { options: ["Today", "Yesterday", "LastMonth", "Custom"], value: { label: "Today", from: new Date(2024, 5, 15, 0, 0, 0), to: new Date(2024, 5, 15, 23, 59, 59) }, defaultValue: undefined, disableDatesBefore: new Date(2024, 5, 15, 0, 0, 0).toISOString(), className: "dateRange", timeSelect: true, stepper: true, allowUnsetValue: true, onChange: mockedOnChange }));
+        previousButton = getStepperPreviousButton();
+        nextButton = getStepperNextButton();
+        expect(previousButton.disabled).toBeTruthy();
+        expect(nextButton.disabled).toBeFalsy();
+        jest.clearAllTimers();
+        jest.useRealTimers();
+    });
+    test("Test dateRange has correct seconds value", async () => {
+        const mockCurrentDate = (year, month, day) => {
+            jest.useFakeTimers();
+            jest.setSystemTime(new Date(year, month - 1, day));
+        };
+        mockCurrentDate(2024, 12, 19);
+        const mockedOnChange = jest.fn();
+        const usersWeek = (0, dateRangeUtils_1.GET_THIS_WEEK_OPTION)(undefined, undefined, "Monday");
+        expect(usersWeek.getRange().from).toEqual(new Date("2024-12-16T05:00:00.000Z"));
+        expect(usersWeek.getRange().to).toEqual(new Date("2024-12-23T04:59:59.000Z"));
+        const { container, rerender } = (0, react_1.render)((0, jsx_runtime_1.jsx)(dateRange_1.DateRange, { options: ["Today", "ThisWeek", "Custom"], value: { label: usersWeek.label, ...usersWeek.getRange() }, defaultValue: { label: usersWeek.label, ...usersWeek.getRange() }, className: "dateRange", timeSelect: true, onChange: mockedOnChange }));
+        expect(container.querySelector(".dateRange")).not.toBeNull();
+        const dateRangeButton = container.querySelector(".zen-date-range");
+        (0, react_1.act)(() => {
+            dateRangeButton.click();
+        });
+        await (0, react_1.waitFor)(() => {
+            expect(document.body.querySelector(".zen-date-range-popup")).not.toBeNull();
+        });
+        expect(document.querySelector(".zen-date-range-inner__calendar-wrapper")).toBeNull();
+        const customInput = document.querySelector(".zen-radio__input[value='Custom']");
+        expect(customInput.getAttribute("checked")).toBeNull();
+        expect(mockedOnChange).toHaveBeenCalledTimes(0);
+        const customLabel = document.querySelector(`.zen-radio__label[for='${customInput.id}']`);
+        expect(customLabel).not.toBeNull();
+        expect(mockedOnChange).toHaveBeenCalledTimes(0);
+        (0, react_1.act)(() => {
+            customLabel.click();
+        });
+        await (0, react_1.waitFor)(() => {
+            expect(document.querySelector(".zen-date-range-inner__calendar-wrapper")).not.toBeNull();
+            expect(mockedOnChange).toHaveBeenCalledTimes(1);
+            expect(mockedOnChange).toHaveBeenCalledWith({ label: "Custom", from: new Date("2024-12-16T05:00:00.000Z"), to: new Date("2024-12-23T04:59:59.000Z") });
+        });
+        rerender((0, jsx_runtime_1.jsx)(dateRange_1.DateRange, { options: ["Today", "ThisWeek", "Custom"], value: { label: "Custom", from: new Date("2024-12-16T05:00:00.000Z"), to: new Date("2024-12-23T04:59:59.000Z") }, defaultValue: { label: usersWeek.label, ...usersWeek.getRange() }, className: "dateRange", timeSelect: true, onChange: mockedOnChange }));
+        const isCurrentActiveField = (selector) => document.querySelector(selector)?.classList.contains("zen-date-input-inner__text-input--active");
+        expect(isCurrentActiveField(".zen-date-input-inner__control-start input.zen-date-input-inner__text-input")).toBeTruthy();
+        const endInput = document.querySelector(".zen-date-input-inner__control-end input.zen-date-input-inner__text-input");
+        (0, react_1.act)(() => {
+            react_1.fireEvent.click(endInput);
+        });
+        expect(isCurrentActiveField(".zen-date-input-inner__control-end input.zen-date-input-inner__text-input")).toBeTruthy();
+        const day20 = document.querySelector("[data-id*='calendar-day-20']");
+        const day17 = document.querySelector("[data-id*='calendar-day-17']");
+        (0, react_1.act)(() => {
+            react_1.fireEvent.pointerDown(day20);
+        });
+        await (0, react_1.waitFor)(() => {
+            expect(document.querySelector(".zen-date-input-inner__control-end input.zen-date-input-inner__text-input")?.value).toBe("2024-12-20");
+            expect(document.querySelector(".zen-date-input-inner__control-end button.zen-date-input-inner__text-input")?.textContent).toContain("23:59");
+            expect(document.querySelector(".zen-date-input-inner__control-start input.zen-date-input-inner__text-input")?.value).toBe("2024-12-16");
+            expect(document.querySelector(".zen-date-input-inner__control-start button.zen-date-input-inner__text-input")?.textContent).toContain("00:00");
+        });
+        expect(document.querySelector(".zen-date-input-inner__control-end .zen-form-field-error")).toBeNull();
+        (0, react_1.act)(() => {
+            react_1.fireEvent.pointerDown(day17);
+        });
+        await (0, react_1.waitFor)(() => {
+            expect(document.querySelector(".zen-date-input-inner__control-start input.zen-date-input-inner__text-input")?.value).toBe("2024-12-17");
+            expect(document.querySelector(".zen-date-input-inner__control-start button.zen-date-input-inner__text-input")?.textContent).toContain("00:00");
+            expect(document.querySelector(".zen-date-input-inner__control-end input.zen-date-input-inner__text-input")?.value).toBe("2024-12-20");
+            expect(document.querySelector(".zen-date-input-inner__control-end button.zen-date-input-inner__text-input")?.textContent).toContain("23:59");
+        });
+        (0, react_1.act)(() => {
+            react_1.fireEvent.click(document.querySelector(".zen-date-range-popup__button-apply"));
+        });
+        await (0, react_1.waitFor)(() => {
+            expect(document.body.querySelector(".zen-date-range-popup")).toBeNull();
+        });
+        expect(mockedOnChange).toHaveBeenCalledTimes(2);
+        expect(mockedOnChange).toHaveBeenCalledWith({ label: "Custom", from: new Date("2024-12-17T05:00:00.000Z"), to: new Date("2024-12-21T04:59:59.000Z") });
+        jest.clearAllTimers();
+        jest.useRealTimers();
+    });
+    test("Test dateRange mobile view with applyButton", async () => {
+        window.innerWidth = 639;
+        const mockedOnChange = jest.fn();
+        const { container, rerender } = (0, react_1.render)((0, jsx_runtime_1.jsx)(dateRange_1.DateRange, { options: ["Today", "Yesterday", "Custom"], value: { label: today.label, ...today.getRange() }, defaultValue: { label: yesterday.label, ...yesterday.getRange() }, className: "dateRange", hasApplyButton: true, onChange: mockedOnChange }));
+        expect(container.querySelector(".dateRange")).not.toBeNull();
+        const dateRangeButton = container.querySelector(".zen-date-range");
+        expect(document.body.querySelector(".zen-mobile-sheet-wrapper")).toBeNull();
+        expect(document.body.querySelector(".zen-mobile-sheet")).toBeNull();
+        (0, react_1.act)(() => {
+            dateRangeButton.click();
+        });
+        await (0, react_1.waitFor)(() => {
+            expect(document.body.querySelector(".zen-mobile-sheet-wrapper")).not.toBeNull();
+        });
+        (0, react_1.act)(() => {
+            react_1.fireEvent.transitionEnd(document.querySelector(".zen-mobile-sheet-wrapper"));
+        });
+        await (0, react_1.waitFor)(() => {
+            expect(document.body.querySelector(".zen-side-panel--shown")).not.toBeNull();
+        });
+        let footerButtons = document.querySelectorAll(".zen-footer-buttons__item");
+        expect(footerButtons.length).toBe(3);
+        expect(Array.from(footerButtons).some(el => el.textContent === "Apply")).toBeTruthy();
+        expect(Array.from(footerButtons).some(el => el.textContent === "Cancel")).toBeTruthy();
+        expect(Array.from(footerButtons).some(el => el.textContent === "Clear")).toBeTruthy();
+        expect(document.querySelector(".zen-date-range-inner__radio-group--with-custom")).not.toBeNull();
+        expect(document.querySelector(".zen-date-input-inner")).toBeNull();
+        expect(document.querySelector(".zen-date-input-inner--mobile-view")).toBeNull();
+        expect(document.querySelector(".zen-date-range-inner__mobile-custom-label")).not.toBeNull();
+        const customLabel = document.querySelector(".zen-date-range-inner__mobile-custom-label");
+        (0, react_1.act)(() => {
+            customLabel.click();
+        });
+        await (0, react_1.waitFor)(() => {
+            expect(document.querySelector(".zen-date-input-inner")).not.toBeNull();
+            expect(document.querySelector(".zen-date-input-inner--mobile-view")).not.toBeNull();
+        });
+        footerButtons = document.querySelectorAll(".zen-footer-buttons__item");
+        expect(footerButtons.length).toBe(2);
+        expect(Array.from(footerButtons).some(el => el.textContent === "Apply")).toBeTruthy();
+        expect(Array.from(footerButtons).some(el => el.textContent === "Clear")).toBeTruthy();
+        const clearButton = Array.from(footerButtons).find(el => el.textContent === "Clear");
+        expect(clearButton).not.toBeNull();
+        (0, react_1.act)(() => {
+            clearButton.click();
+        });
+        await (0, react_1.waitFor)(() => {
+            expect(document.querySelector(".zen-date-input-inner")).toBeNull();
+            expect(document.querySelector(".zen-date-input-inner--mobile-view")).toBeNull();
+        });
+        let yesterdayInput = document.querySelector(".zen-radio__input[value='Yesterday']");
+        expect(yesterdayInput?.getAttribute("checked")).not.toBeNull();
+        expect(mockedOnChange).not.toHaveBeenCalled();
+        footerButtons = document.querySelectorAll(".zen-footer-buttons__item");
+        const applyButton = Array.from(footerButtons).find(el => el.textContent === "Apply");
+        expect(applyButton).not.toBeNull();
+        (0, react_1.act)(() => {
+            applyButton.click();
+        });
+        expect(mockedOnChange).toHaveBeenCalledTimes(1);
+        expect(mockedOnChange).toHaveBeenCalledWith({ label: yesterday.label, ...yesterday.getRange() });
+        await (0, react_1.waitFor)(() => {
+            expect(document.body.querySelector(".zen-side-panel--shown")).toBeNull();
+        });
+        (0, react_1.act)(() => {
+            react_1.fireEvent.transitionEnd(document.querySelector(".zen-mobile-sheet-wrapper"));
+        });
+        await (0, react_1.waitFor)(() => {
+            expect(document.body.querySelector(".zen-mobile-sheet")).toBeNull();
+        });
+        (0, react_1.act)(() => rerender((0, jsx_runtime_1.jsx)(dateRange_1.DateRange, { options: ["Today", "Yesterday", "Custom"], value: { label: yesterday.label, ...yesterday.getRange() }, defaultValue: { label: yesterday.label, ...yesterday.getRange() }, className: "dateRange", hasApplyButton: true, onChange: mockedOnChange })));
+        expect(document.body.querySelector(".zen-mobile-sheet-wrapper")).toBeNull();
+        (0, react_1.act)(() => {
+            dateRangeButton.click();
+        });
+        await (0, react_1.waitFor)(() => {
+            expect(document.body.querySelector(".zen-mobile-sheet")).not.toBeNull();
+        });
+        (0, react_1.act)(() => {
+            react_1.fireEvent.transitionEnd(document.querySelector(".zen-mobile-sheet-wrapper"));
+        });
+        await (0, react_1.waitFor)(() => {
+            expect(document.body.querySelector(".zen-side-panel--shown")).not.toBeNull();
+        });
+        yesterdayInput = document.querySelector(".zen-radio__input[value='Yesterday']");
+        expect(yesterdayInput?.getAttribute("checked")).not.toBeNull();
+        const todayInput = document.querySelector(".zen-radio__input[value='Today']");
+        expect(todayInput).not.toBeNull();
+        expect(todayInput.getAttribute("checked")).toBeNull();
+        const todayLabel = document.querySelector(`.zen-radio__label[for='${todayInput.id}']`);
+        expect(todayLabel).not.toBeNull();
+        (0, react_1.act)(() => {
+            todayLabel.click();
+        });
+        expect(mockedOnChange).toHaveBeenCalledTimes(1);
+        footerButtons = document.querySelectorAll(".zen-footer-buttons__item");
+        const cancelButton = Array.from(footerButtons).find(el => el.textContent === "Cancel");
+        expect(cancelButton).not.toBeNull();
+        (0, react_1.act)(() => {
+            cancelButton.click();
+        });
+        expect(mockedOnChange).toHaveBeenCalledTimes(1);
+        await (0, react_1.waitFor)(() => {
+            expect(document.body.querySelector(".zen-side-panel--shown")).toBeNull();
+        });
+        (0, react_1.act)(() => {
+            react_1.fireEvent.transitionEnd(document.querySelector(".zen-mobile-sheet-wrapper"));
+        });
+        await (0, react_1.waitFor)(() => {
+            expect(document.body.querySelector(".zen-mobile-sheet")).toBeNull();
+        });
+    });
+    test("Test dateRange error option", () => {
+        const { container, getByText, queryByText, rerender } = (0, react_1.render)((0, jsx_runtime_1.jsx)(dateRange_1.DateRange, { options: ["Today", "Yesterday", "Custom"], value: { label: today.label, ...today.getRange() }, defaultValue: { label: today.label, ...today.getRange() }, className: "dateRange", error: "Test error", onChange: jest.fn() }));
+        expect(container.querySelector(".zen-date-range")).not.toBeNull();
+        expect(container.querySelector(".zen-date-range--error")).not.toBeNull();
+        expect(getByText("Test error")).not.toBeNull();
+        rerender((0, jsx_runtime_1.jsx)(dateRange_1.DateRange, { options: ["Today", "Yesterday", "Custom"], value: { label: today.label, ...today.getRange() }, defaultValue: { label: today.label, ...today.getRange() }, className: "dateRange", error: undefined, onChange: jest.fn() }));
+        expect(container.querySelector(".zen-date-range")).not.toBeNull();
+        expect(container.querySelector(".zen-date-range--error")).toBeNull();
+        expect(queryByText("Test error")).toBeNull();
+    });
+    test("Test dateRange with IDateRangeOption options", async () => {
+        const { container, getAllByText } = (0, react_1.render)((0, jsx_runtime_1.jsx)(dateRange_1.DateRange, { options: [
+                { label: "One", getRange: () => ({ ...today.getRange() }) },
+                { label: "Two", getRange: () => ({ ...yesterday.getRange() }) },
+                { label: "Three", getRange: () => ({ ...thisWeek.getRange() }) }
+            ], value: { label: "One", ...today.getRange() }, defaultValue: { label: "One", ...today.getRange() }, className: "dateRange", onChange: jest.fn() }));
+        expect(container.querySelector(".dateRange")).not.toBeNull();
+        const dateRangeButton = container.querySelector(".zen-date-range");
+        (0, react_1.act)(() => {
+            dateRangeButton.click();
+        });
+        await (0, react_1.waitFor)(() => {
+            expect(document.body.querySelector(".zen-date-range-popup")).not.toBeNull();
+            expect(getAllByText("One")).not.toBeNull();
+            expect(getAllByText("Two")).not.toBeNull();
+            expect(getAllByText("Three")).not.toBeNull();
+        });
+    });
+    test("Test dateRange with IDateRangeValueOptionalLabel value", async () => {
+        const mockCurrentDate = (year, month, day) => {
+            jest.useFakeTimers();
+            jest.setSystemTime(new Date(year, month - 1, day));
+        };
+        mockCurrentDate(2025, 5, 15);
+        const mockedOnChange = jest.fn();
+        const { container, getAllByText, rerender } = (0, react_1.render)((0, jsx_runtime_1.jsx)(dateRange_1.DateRange, { options: [
+                "Today",
+                "Yesterday",
+                { label: "One", getRange: () => ({ from: new Date(2025, 4, 2, 0, 0, 0), to: new Date(2025, 5, 2, 23, 59, 59) }) },
+                { label: "Two", getRange: () => ({ from: new Date(2025, 4, 2, 0, 0, 0), to: new Date(2025, 6, 2, 23, 59, 59) }) },
+                { label: "Three", getRange: () => ({ from: new Date(2025, 4, 2, 0, 0, 0), to: new Date(2025, 7, 2, 23, 59, 59) }) },
+                "Custom"
+            ], value: { from: new Date(2025, 4, 2, 0, 0, 0), to: new Date(2025, 5, 2, 23, 59, 59) }, defaultValue: { label: "One", from: new Date(2025, 4, 2, 0, 0, 0), to: new Date(2025, 5, 2, 23, 59, 59) }, className: "dateRange", onChange: mockedOnChange }));
+        expect(container.querySelector(".dateRange")).not.toBeNull();
+        let dateRangeButton = container.querySelector(".zen-date-range");
+        (0, react_1.act)(() => {
+            dateRangeButton.click();
+        });
+        await (0, react_1.waitFor)(() => {
+            expect(document.body.querySelector(".zen-date-range-popup")).not.toBeNull();
+        });
+        expect(getAllByText("Today")).not.toBeNull();
+        expect(getAllByText("Yesterday")).not.toBeNull();
+        expect(getAllByText("One")).not.toBeNull();
+        expect(getAllByText("Two")).not.toBeNull();
+        expect(getAllByText("Three")).not.toBeNull();
+        expect(getAllByText("Custom")).not.toBeNull();
+        expect(document.querySelector(".zen-radio-group__item label input[value='Today']")?.getAttribute("checked")).toBeNull();
+        expect(document.querySelector(".zen-radio-group__item label input[value='Yesterday']")?.getAttribute("checked")).toBeNull();
+        expect(document.querySelector(".zen-radio-group__item label input[value='Two']")?.getAttribute("checked")).toBeNull();
+        expect(document.querySelector(".zen-radio-group__item label input[value='Three']")?.getAttribute("checked")).toBeNull();
+        expect(document.querySelector(".zen-radio-group__item label input[value='Custom']")?.getAttribute("checked")).toBeNull();
+        expect(document.querySelector(".zen-radio-group__item label input[value='One']")?.getAttribute("checked")).toBe("");
+        const todayLabel = document.querySelector(`.zen-radio-group__item label input[value='Today']`);
+        expect(todayLabel).not.toBeNull();
+        expect(mockedOnChange).toHaveBeenCalledTimes(0);
+        (0, react_1.act)(() => {
+            todayLabel.click();
+        });
+        await (0, react_1.waitFor)(() => {
+            expect(mockedOnChange).toHaveBeenCalledWith({ label: "Today", from: new Date(2025, 4, 15, 0, 0, 0), to: new Date(2025, 4, 15, 23, 59, 59) });
+        });
+        rerender((0, jsx_runtime_1.jsx)(dateRange_1.DateRange, { options: [
+                "Today",
+                "Yesterday",
+                { label: "One", getRange: () => ({ from: new Date(2025, 4, 2, 0, 0, 0), to: new Date(2025, 5, 2, 23, 59, 59) }) },
+                { label: "Two", getRange: () => ({ from: new Date(2025, 4, 2, 0, 0, 0), to: new Date(2025, 6, 2, 23, 59, 59) }) },
+                { label: "Three", getRange: () => ({ from: new Date(2025, 4, 2, 0, 0, 0), to: new Date(2025, 7, 2, 23, 59, 59) }) },
+                "Custom"
+            ], value: { from: new Date(2025, 4, 15, 0, 0, 0), to: new Date(2025, 4, 15, 23, 59, 59) }, defaultValue: { label: "One", from: new Date(2025, 4, 2, 0, 0, 0), to: new Date(2025, 5, 2, 23, 59, 59) }, className: "dateRange", onChange: mockedOnChange }));
+        dateRangeButton = container.querySelector(".zen-date-range");
+        (0, react_1.act)(() => {
+            dateRangeButton.click();
+        });
+        await (0, react_1.waitFor)(() => {
+            expect(document.body.querySelector(".zen-date-range-popup")).not.toBeNull();
+        });
+        expect(getAllByText("Today")).not.toBeNull();
+        expect(document.querySelector(".zen-radio-group__item label input[value='Today']")?.getAttribute("checked")).toBe("");
+        const customLabel = document.querySelector(`.zen-radio-group__item label input[value='Custom']`);
+        expect(customLabel).not.toBeNull();
+        (0, react_1.act)(() => {
+            customLabel.click();
+        });
+        await (0, react_1.waitFor)(() => {
+            expect(mockedOnChange).toHaveBeenCalledWith({ label: "Custom", from: new Date(2025, 4, 15, 0, 0, 0), to: new Date(2025, 4, 15, 23, 59, 59) });
+        });
+        rerender((0, jsx_runtime_1.jsx)(dateRange_1.DateRange, { options: [
+                "Today",
+                "Yesterday",
+                { label: "One", getRange: () => ({ from: new Date(2025, 4, 2, 0, 0, 0), to: new Date(2025, 5, 2, 23, 59, 59) }) },
+                { label: "Two", getRange: () => ({ from: new Date(2025, 4, 2, 0, 0, 0), to: new Date(2025, 6, 2, 23, 59, 59) }) },
+                { label: "Three", getRange: () => ({ from: new Date(2025, 4, 2, 0, 0, 0), to: new Date(2025, 7, 2, 23, 59, 59) }) },
+                "Custom"
+            ], value: { label: "Custom", from: new Date(2025, 4, 15, 0, 0, 0), to: new Date(2025, 4, 15, 23, 59, 59) }, defaultValue: { label: "One", from: new Date(2025, 4, 2, 0, 0, 0), to: new Date(2025, 5, 2, 23, 59, 59) }, className: "dateRange", onChange: mockedOnChange }));
+        await (0, react_1.waitFor)(() => {
+            expect(document.querySelector(".zen-date-input-inner")).not.toBeNull();
+        });
+        const day5 = document.querySelector("[data-id*='calendar-day-5-4-2025']");
+        const isCurrentActiveField = (selector) => document.querySelector(selector)?.classList.contains("zen-date-input-inner__text-input--active");
+        expect(isCurrentActiveField(".zen-date-input-inner__control-start input.zen-date-input-inner__text-input")).toBeTruthy();
+        (0, react_1.act)(() => {
+            react_1.fireEvent.pointerDown(day5);
+        });
+        await (0, react_1.waitFor)(() => {
+            expect(document.querySelector(".zen-date-input-inner__control-start input.zen-date-input-inner__text-input")?.value).toBe("2025-05-05");
+        });
+        (0, react_1.act)(() => {
+            react_1.fireEvent.click(document.querySelector(".zen-date-range-popup__button-apply"));
+        });
+        await (0, react_1.waitFor)(() => {
+            expect(document.body.querySelector(".zen-date-range-popup")).toBeNull();
+        });
+        expect(mockedOnChange).toHaveBeenCalledWith({ label: "Custom", from: new Date(2025, 4, 5, 0, 0, 0), to: new Date(2025, 4, 15, 23, 59, 59) });
+        rerender((0, jsx_runtime_1.jsx)(dateRange_1.DateRange, { options: [
+                "Today",
+                "Yesterday",
+                { label: "One", getRange: () => ({ from: new Date(2025, 4, 2, 0, 0, 0), to: new Date(2025, 5, 2, 23, 59, 59) }) },
+                { label: "Two", getRange: () => ({ from: new Date(2025, 4, 2, 0, 0, 0), to: new Date(2025, 6, 2, 23, 59, 59) }) },
+                { label: "Three", getRange: () => ({ from: new Date(2025, 4, 2, 0, 0, 0), to: new Date(2025, 7, 2, 23, 59, 59) }) },
+                "Custom"
+            ], value: { from: new Date(2025, 4, 5, 0, 0, 0), to: new Date(2025, 4, 15, 23, 59, 59) }, defaultValue: { label: "One", from: new Date(2025, 4, 2, 0, 0, 0), to: new Date(2025, 5, 2, 23, 59, 59) }, className: "dateRange", onChange: mockedOnChange }));
+        dateRangeButton = container.querySelector(".zen-date-range");
+        (0, react_1.act)(() => {
+            dateRangeButton.click();
+        });
+        await (0, react_1.waitFor)(() => {
+            expect(document.body.querySelector(".zen-date-range-popup")).not.toBeNull();
+        });
+        expect(document.querySelector(".zen-radio-group__item label input[value='Custom']")?.getAttribute("checked")).toBe("");
+        expect(document.querySelector(".zen-date-input-inner")).not.toBeNull();
+        jest.clearAllTimers();
+        jest.useRealTimers();
+    });
+});
+const openDatePicker = async (containerElem) => {
+    expect(containerElem.querySelector(".zen-date-range")).not.toBeNull();
+    expect(containerElem.querySelector(".dateRange")).not.toBeNull();
+    const dateRangeButton = containerElem.querySelector(".zen-date-range");
+    (0, react_1.act)(() => {
+        dateRangeButton.click();
+    });
+    await (0, react_1.waitFor)(() => {
+        expect(document.body.querySelector(".zen-date-range-popup")).not.toBeNull();
+    });
+};
+const clickToLabel = (label) => {
+    const input = document.querySelector(`.zen-radio__input[value='${label}']`);
+    const actionLabel = document.querySelector(`.zen-radio__label[for='${input.id}']`);
+    expect(actionLabel).not.toBeNull();
+    (0, react_1.act)(() => {
+        actionLabel.click();
+    });
+};
+const utilsTestCases = [
+    { options: ["ThisMonth", "NextMonth"], utils: [dateRangeUtils_1.GET_THIS_MONTH_OPTION, dateRangeUtils_1.GET_NEXT_MONTH_OPTION] },
+    { options: ["LastMonth", "LastThreeMonths"], utils: [dateRangeUtils_1.GET_LAST_MONTH_OPTION, dateRangeUtils_1.GET_LAST_THREE_MONTH_OPTION] },
+    { options: ["LastQuarter", "ThisQuarter"], utils: [dateRangeUtils_1.GET_LAST_QUARTER_OPTION, dateRangeUtils_1.GET_THIS_QUARTER_OPTION] },
+    { options: ["LastYear", "ThisYear"], utils: [dateRangeUtils_1.GET_LAST_YEAR_OPTION, dateRangeUtils_1.GET_THIS_YEAR_OPTION] }
+];
+describe.each(utilsTestCases)("Test dateRange for option %s", ({ options, utils }) => {
+    test(`Test dateRange for option ${JSON.stringify(options)}`, async () => {
+        const today = (0, dateRangeUtils_1.GET_TODAY_OPTION)();
+        const firstOption = utils[0]();
+        const secondOption = utils[1]();
+        const mockedOnChange = jest.fn();
+        const memoizedOptions = ["Today", ...options];
+        const { container, rerender } = (0, react_1.render)((0, jsx_runtime_1.jsx)(dateRange_1.DateRange, { options: memoizedOptions, value: { label: today.label, ...today.getRange() }, defaultValue: { label: today.label, ...today.getRange() }, className: "dateRange", onChange: mockedOnChange }));
+        await openDatePicker(container);
+        clickToLabel(options[0]);
+        expect(mockedOnChange).toHaveBeenCalledTimes(1);
+        const firstResult = mockedOnChange.mock.calls[0][0];
+        expect(firstResult.label).toBe(options[0]);
+        rerender((0, jsx_runtime_1.jsx)(dateRange_1.DateRange, { options: memoizedOptions, value: firstResult, defaultValue: { label: today.label, ...today.getRange() }, className: "dateRange", onChange: mockedOnChange }));
+        await openDatePicker(container);
+        clickToLabel(options[1]);
+        expect(mockedOnChange).toHaveBeenCalledTimes(2);
+        const secondResult = mockedOnChange.mock.calls[1][0];
+        expect(secondResult.label).toBe(options[1]);
+        rerender((0, jsx_runtime_1.jsx)(dateRange_1.DateRange, { options: memoizedOptions, value: secondResult, defaultValue: { label: today.label, ...today.getRange() }, className: "dateRange", onChange: mockedOnChange }));
+        await openDatePicker(container);
+        clickToLabel(options[0]);
+        expect(mockedOnChange).toHaveBeenCalledTimes(3);
+        const thirdResult = mockedOnChange.mock.calls[2][0];
+        expect(thirdResult.label).toBe(options[0]);
+        rerender((0, jsx_runtime_1.jsx)(dateRange_1.DateRange, { options: memoizedOptions, value: thirdResult, defaultValue: { label: today.label, ...today.getRange() }, className: "dateRange", onChange: mockedOnChange }));
+        await openDatePicker(container);
+        clickToLabel(options[1]);
+        expect(mockedOnChange).toHaveBeenCalledTimes(4);
+        const fourthResult = mockedOnChange.mock.calls[3][0];
+        expect(fourthResult.label).toBe(options[1]);
+        expect(firstResult.from).toStrictEqual(thirdResult.from);
+        expect(firstResult.to).toStrictEqual(thirdResult.to);
+        expect(firstResult.to).toStrictEqual(firstOption.getRange().to);
+        expect(firstResult.from).toStrictEqual(firstOption.getRange().from);
+        expect(secondResult.from).toStrictEqual(fourthResult.from);
+        expect(secondResult.to).toStrictEqual(fourthResult.to);
+        expect(secondResult.from).toStrictEqual(secondOption.getRange().from);
+        expect(secondResult.to).toStrictEqual(secondOption.getRange().to);
+    });
+});
+//# sourceMappingURL=dateRange.test.js.map