@geotab/zenith 3.1.1-beta.0 → 3.1.1-beta.1

package/dist/dateRange/dateRangeUtils.js

@@ -1,295 +1,17 @@
 "use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.GET_DEFAULT_DATE_OPTIONS = exports.GET_THIS_YEAR_OPTION = exports.GET_LAST_YEAR_OPTION = exports.GET_THIS_QUARTER_OPTION = exports.GET_LAST_QUARTER_OPTION = exports.GET_LAST_THREE_MONTH_OPTION = exports.GET_LAST_TWELVE_MONTHS_OPTION = exports.GET_LAST_THIRTY_DAYS_OPTION = exports.GET_LAST_SEVEN_DAYS_OPTION = exports.GET_LAST_MONTH_OPTION = exports.GET_NEXT_MONTH_OPTION = exports.GET_THIS_MONTH_OPTION = exports.GET_LAST_WEEK_OPTION = exports.GET_NEXT_WEEK_OPTION = exports.GET_THIS_WEEK_OPTION = exports.GET_YESTERDAY_OPTION = exports.GET_TODAY_OPTION = void 0;
-const dateUtils_1 = require("../calendar/dateUtils");
-const defaultToLocalDateTime = d => typeof d === "string" ? new Date(d) : d;
-const defaultToReverseOffsetDateTime = d => typeof d === "string" ? new Date(d) : d;
-const defaultTranslate = s => s;
-const GET_TODAY_OPTION = (toLocalDateTime = defaultToLocalDateTime, translate = defaultTranslate, toReverseOffsetDateTime = defaultToReverseOffsetDateTime) => {
-    const startDate = (0, dateUtils_1.getNewStartDate)(toLocalDateTime);
-    const endDate = (0, dateUtils_1.getNewEndDate)(toLocalDateTime);
-    const from = toReverseOffsetDateTime(startDate);
-    const to = toReverseOffsetDateTime(endDate);
-    return {
-        label: translate("Today"),
-        getRange: () => ({ from, to })
-    };
-};
-exports.GET_TODAY_OPTION = GET_TODAY_OPTION;
-const GET_YESTERDAY_OPTION = (toLocalDateTime = defaultToLocalDateTime, translate = defaultTranslate, toReverseOffsetDateTime = defaultToReverseOffsetDateTime) => {
-    const startDate = (0, dateUtils_1.addDays)((0, dateUtils_1.getNewStartDate)(toLocalDateTime), -1);
-    const endDate = (0, dateUtils_1.addDays)((0, dateUtils_1.getNewEndDate)(toLocalDateTime), -1);
-    const from = toReverseOffsetDateTime(startDate);
-    const to = toReverseOffsetDateTime(endDate);
-    return {
-        label: translate("Yesterday"),
-        getRange: () => ({ from, to })
-    };
-};
-exports.GET_YESTERDAY_OPTION = GET_YESTERDAY_OPTION;
-const GET_THIS_WEEK_OPTION = (toLocalDateTime = defaultToLocalDateTime, translate = defaultTranslate, firstDayOfWeek, toReverseOffsetDateTime = defaultToReverseOffsetDateTime) => {
-    const offsetDays = (0, dateUtils_1.getDayOfWeekOffset)(new Date(), firstDayOfWeek);
-    const startDate = (0, dateUtils_1.addDays)((0, dateUtils_1.getNewStartDate)(toLocalDateTime), -offsetDays);
-    const endDate = (0, dateUtils_1.addDays)((0, dateUtils_1.getNewEndDate)(toLocalDateTime), 6 - offsetDays);
-    const from = toReverseOffsetDateTime(startDate);
-    const to = toReverseOffsetDateTime(endDate);
-    return {
-        label: translate("This week"),
-        getRange: () => ({
-            from,
-            to
-        })
-    };
-};
-exports.GET_THIS_WEEK_OPTION = GET_THIS_WEEK_OPTION;
-const GET_NEXT_WEEK_OPTION = (toLocalDateTime = defaultToLocalDateTime, translate = defaultTranslate, firstDayOfWeek, toReverseOffsetDateTime = defaultToReverseOffsetDateTime) => {
-    const offsetDays = (0, dateUtils_1.getDayOfWeekOffset)(new Date(), firstDayOfWeek);
-    const startDate = (0, dateUtils_1.addDays)((0, dateUtils_1.getNewStartDate)(toLocalDateTime), -offsetDays + 7);
-    const endDate = (0, dateUtils_1.addDays)((0, dateUtils_1.getNewEndDate)(toLocalDateTime), -offsetDays + 13);
-    const from = toReverseOffsetDateTime(startDate);
-    const to = toReverseOffsetDateTime(endDate);
-    return {
-        label: translate("Next week"),
-        getRange: () => ({
-            from,
-            to
-        })
-    };
-};
-exports.GET_NEXT_WEEK_OPTION = GET_NEXT_WEEK_OPTION;
-const GET_LAST_WEEK_OPTION = (toLocalDateTime = defaultToLocalDateTime, translate = defaultTranslate, firstDayOfWeek, toReverseOffsetDateTime = defaultToReverseOffsetDateTime) => {
-    const offsetDays = (0, dateUtils_1.getDayOfWeekOffset)(new Date(), firstDayOfWeek);
-    const startDate = (0, dateUtils_1.addDays)((0, dateUtils_1.getNewStartDate)(toLocalDateTime), -offsetDays - 7);
-    const endDate = (0, dateUtils_1.addDays)((0, dateUtils_1.getNewEndDate)(toLocalDateTime), 6 - offsetDays - 7);
-    const from = toReverseOffsetDateTime(startDate);
-    const to = toReverseOffsetDateTime(endDate);
-    return {
-        label: translate("Last week"),
-        getRange: () => ({
-            from,
-            to
-        })
-    };
-};
-exports.GET_LAST_WEEK_OPTION = GET_LAST_WEEK_OPTION;
-const GET_THIS_MONTH_OPTION = (toLocalDateTime = defaultToLocalDateTime, translate = defaultTranslate, toReverseOffsetDateTime = defaultToReverseOffsetDateTime) => {
-    const startDate = (0, dateUtils_1.getNewStartDate)(toLocalDateTime);
-    startDate.setDate(1);
-    const endDate = (0, dateUtils_1.getNewEndDate)(toLocalDateTime);
-    (0, dateUtils_1.addMonths)(endDate, 1);
-    endDate.setDate(1);
-    endDate.setHours(0);
-    endDate.setMinutes(0);
-    const from = toReverseOffsetDateTime(startDate);
-    const to = toReverseOffsetDateTime((0, dateUtils_1.addMinutes)(endDate, -1));
-    return {
-        label: translate("This month"),
-        getRange: () => ({
-            from,
-            to
-        })
-    };
-};
-exports.GET_THIS_MONTH_OPTION = GET_THIS_MONTH_OPTION;
-const GET_NEXT_MONTH_OPTION = (toLocalDateTime = defaultToLocalDateTime, translate = defaultTranslate, toReverseOffsetDateTime = defaultToReverseOffsetDateTime) => {
-    const startDate = (0, dateUtils_1.addMonths)((0, dateUtils_1.getNewStartDate)(toLocalDateTime), 1);
-    startDate.setDate(1);
-    const endDate = (0, dateUtils_1.addMonths)((0, dateUtils_1.getNewStartDate)(toLocalDateTime), 2);
-    endDate.setDate(1);
-    endDate.setHours(0);
-    endDate.setMinutes(0);
-    endDate.setSeconds(59);
-    const from = toReverseOffsetDateTime(startDate);
-    const to = toReverseOffsetDateTime(new Date((0, dateUtils_1.addMinutes)(endDate, -1)));
-    return {
-        label: translate("Next month"),
-        getRange: () => ({
-            from,
-            to
-        })
-    };
-};
-exports.GET_NEXT_MONTH_OPTION = GET_NEXT_MONTH_OPTION;
-const GET_LAST_MONTH_OPTION = (toLocalDateTime = defaultToLocalDateTime, translate = defaultTranslate, toReverseOffsetDateTime = defaultToReverseOffsetDateTime) => {
-    const startDate = (0, dateUtils_1.addMonths)((0, dateUtils_1.getNewStartDate)(toLocalDateTime), -1);
-    startDate.setDate(1);
-    const endDate = (0, dateUtils_1.getNewEndDate)(toLocalDateTime);
-    endDate.setDate(1);
-    endDate.setHours(0);
-    endDate.setMinutes(0);
-    const from = toReverseOffsetDateTime(startDate);
-    const to = toReverseOffsetDateTime(new Date((0, dateUtils_1.addMinutes)(endDate, -1)));
-    return {
-        label: translate("Last month"),
-        getRange: () => ({
-            from,
-            to
-        })
-    };
-};
-exports.GET_LAST_MONTH_OPTION = GET_LAST_MONTH_OPTION;
-const GET_LAST_SEVEN_DAYS_OPTION = (toLocalDateTime = defaultToLocalDateTime, translate = defaultTranslate, toReverseOffsetDateTime = defaultToReverseOffsetDateTime) => {
-    const startDate = (0, dateUtils_1.addDays)((0, dateUtils_1.getNewStartDate)(toLocalDateTime), -6);
-    const endDate = (0, dateUtils_1.getNewEndDate)(toLocalDateTime);
-    const from = toReverseOffsetDateTime(startDate);
-    const to = toReverseOffsetDateTime(endDate);
-    return {
-        label: translate("Last 7 days"),
-        getRange: () => ({
-            from,
-            to
-        })
-    };
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
-exports.GET_LAST_SEVEN_DAYS_OPTION = GET_LAST_SEVEN_DAYS_OPTION;
-const GET_LAST_THIRTY_DAYS_OPTION = (toLocalDateTime = defaultToLocalDateTime, translate = defaultTranslate, toReverseOffsetDateTime = defaultToReverseOffsetDateTime) => {
-    const startDate = (0, dateUtils_1.addDays)((0, dateUtils_1.getNewStartDate)(toLocalDateTime), -29);
-    const endDate = (0, dateUtils_1.getNewEndDate)(toLocalDateTime);
-    const from = toReverseOffsetDateTime(startDate);
-    const to = toReverseOffsetDateTime(endDate);
-    return {
-        label: translate("Last 30 days"),
-        getRange: () => ({
-            from,
-            to
-        })
-    };
-};
-exports.GET_LAST_THIRTY_DAYS_OPTION = GET_LAST_THIRTY_DAYS_OPTION;
-const GET_LAST_TWELVE_MONTHS_OPTION = (toLocalDateTime = defaultToLocalDateTime, translate = defaultTranslate, toReverseOffsetDateTime = defaultToReverseOffsetDateTime) => {
-    const startDate = (0, dateUtils_1.addMonths)((0, dateUtils_1.getNewStartDate)(toLocalDateTime), -12);
-    const endDate = (0, dateUtils_1.getNewEndDate)(toLocalDateTime);
-    const from = toReverseOffsetDateTime(startDate);
-    const to = toReverseOffsetDateTime(endDate);
-    return {
-        label: translate("Last 12 months"),
-        getRange: () => ({
-            from,
-            to
-        })
-    };
-};
-exports.GET_LAST_TWELVE_MONTHS_OPTION = GET_LAST_TWELVE_MONTHS_OPTION;
-const GET_LAST_THREE_MONTH_OPTION = (toLocalDateTime = defaultToLocalDateTime, translate = defaultTranslate, toReverseOffsetDateTime = defaultToReverseOffsetDateTime) => {
-    const startDate = (0, dateUtils_1.addMonths)((0, dateUtils_1.getNewStartDate)(toLocalDateTime), -3);
-    startDate.setDate(1);
-    const endDate = (0, dateUtils_1.getNewEndDate)(toLocalDateTime);
-    endDate.setDate(1);
-    endDate.setHours(0);
-    endDate.setMinutes(0);
-    const from = toReverseOffsetDateTime(startDate);
-    const to = toReverseOffsetDateTime(new Date((0, dateUtils_1.addMinutes)(endDate, -1)));
-    return {
-        label: translate("Last 3 months"),
-        getRange: () => ({
-            from,
-            to
-        })
-    };
-};
-exports.GET_LAST_THREE_MONTH_OPTION = GET_LAST_THREE_MONTH_OPTION;
-const GET_LAST_QUARTER_OPTION = (toLocalDateTime = defaultToLocalDateTime, translate = defaultTranslate, toReverseOffsetDateTime = defaultToReverseOffsetDateTime) => {
-    const endDate = (0, dateUtils_1.getNewEndDate)(toLocalDateTime);
-    const currentQuarter = Math.floor((endDate.getMonth() + 3) / 3);
-    const quarterEndMonth = (currentQuarter - 1) * 3;
-    const quarterStartMonth = quarterEndMonth - 3;
-    const startDate = new Date(endDate);
-    startDate.setMonth(quarterStartMonth);
-    startDate.setDate(1);
-    startDate.setHours(0);
-    startDate.setMinutes(0);
-    startDate.setSeconds(0);
-    endDate.setMonth(quarterEndMonth);
-    endDate.setDate(1);
-    endDate.setHours(0);
-    endDate.setMinutes(0);
-    endDate.setMinutes(-1);
-    const from = toReverseOffsetDateTime(startDate);
-    const to = toReverseOffsetDateTime(endDate);
-    return {
-        label: translate("Last quarter"),
-        getRange: () => ({
-            from,
-            to
-        })
-    };
-};
-exports.GET_LAST_QUARTER_OPTION = GET_LAST_QUARTER_OPTION;
-const GET_THIS_QUARTER_OPTION = (toLocalDateTime = defaultToLocalDateTime, translate = defaultTranslate, toReverseOffsetDateTime = defaultToReverseOffsetDateTime) => {
-    const startDate = (0, dateUtils_1.getNewStartDate)(toLocalDateTime);
-    const currentQuarter = Math.floor((startDate.getMonth() + 3) / 3);
-    const quarterStartMonth = (currentQuarter - 1) * 3;
-    startDate.setMonth(quarterStartMonth);
-    startDate.setDate(1);
-    startDate.setHours(0);
-    startDate.setMinutes(0);
-    const endDate = new Date(startDate);
-    endDate.setMonth(quarterStartMonth + 3);
-    endDate.setDate(0);
-    endDate.setSeconds(59);
-    const from = toReverseOffsetDateTime(startDate);
-    const to = toReverseOffsetDateTime(new Date((0, dateUtils_1.addMinutes)(endDate, 23 * 60 + 59)));
-    return {
-        label: translate("This quarter"),
-        getRange: () => ({
-            from,
-            to
-        })
-    };
-};
-exports.GET_THIS_QUARTER_OPTION = GET_THIS_QUARTER_OPTION;
-const GET_LAST_YEAR_OPTION = (toLocalDateTime = defaultToLocalDateTime, translate = defaultTranslate, toReverseOffsetDateTime = defaultToReverseOffsetDateTime) => {
-    const startDate = (0, dateUtils_1.getNewStartDate)(toLocalDateTime);
-    startDate.setFullYear(startDate.getFullYear() - 1);
-    startDate.setMonth(0);
-    startDate.setDate(1);
-    startDate.setHours(0);
-    startDate.setMinutes(0);
-    const endDate = new Date(startDate);
-    endDate.setMonth(11);
-    endDate.setDate(31);
-    endDate.setSeconds(59);
-    const from = toReverseOffsetDateTime(startDate);
-    const to = toReverseOffsetDateTime(new Date((0, dateUtils_1.addMinutes)(endDate, 23 * 60 + 59)));
-    return {
-        label: translate("Last year"),
-        getRange: () => ({
-            from,
-            to
-        })
-    };
-};
-exports.GET_LAST_YEAR_OPTION = GET_LAST_YEAR_OPTION;
-const GET_THIS_YEAR_OPTION = (toLocalDateTime = defaultToLocalDateTime, translate = defaultTranslate, toReverseOffsetDateTime = defaultToReverseOffsetDateTime) => {
-    const startDate = (0, dateUtils_1.getNewStartDate)(toLocalDateTime);
-    startDate.setMonth(0);
-    startDate.setDate(1);
-    startDate.setHours(0);
-    startDate.setMinutes(0);
-    const endDate = (0, dateUtils_1.getNewEndDate)(toLocalDateTime);
-    endDate.setMonth(11);
-    endDate.setDate(31);
-    endDate.setHours(23);
-    endDate.setMinutes(59);
-    endDate.setSeconds(59);
-    const from = toReverseOffsetDateTime(startDate);
-    const to = toReverseOffsetDateTime(endDate);
-    return {
-        label: translate("This year"),
-        getRange: () => ({
-            from,
-            to
-        })
-    };
-};
-exports.GET_THIS_YEAR_OPTION = GET_THIS_YEAR_OPTION;
-const GET_DEFAULT_DATE_OPTIONS = (toLocalDateTime, translate, firstDayOfWeek, toReverseOffsetDateTime) => [
-    (0, exports.GET_TODAY_OPTION)(toLocalDateTime, translate, toReverseOffsetDateTime),
-    (0, exports.GET_YESTERDAY_OPTION)(toLocalDateTime, translate, toReverseOffsetDateTime),
-    (0, exports.GET_THIS_WEEK_OPTION)(toLocalDateTime, translate, firstDayOfWeek, toReverseOffsetDateTime),
-    (0, exports.GET_LAST_WEEK_OPTION)(toLocalDateTime, translate, firstDayOfWeek, toReverseOffsetDateTime),
-    (0, exports.GET_THIS_MONTH_OPTION)(toLocalDateTime, translate, toReverseOffsetDateTime),
-    (0, exports.GET_LAST_MONTH_OPTION)(toLocalDateTime, translate, toReverseOffsetDateTime),
-    (0, exports.GET_LAST_THREE_MONTH_OPTION)(toLocalDateTime, translate, toReverseOffsetDateTime)
-];
-exports.GET_DEFAULT_DATE_OPTIONS = GET_DEFAULT_DATE_OPTIONS;
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("../dateRangeRaw/utils/dateRangeUtils"), exports);

package/dist/dateRangeRaw/dateRangeRaw.d.ts

@@ -0,0 +1,45 @@
+/// <reference types="react" />
+import "./dateRangeRaw.less";
+import { IZenComponentProps } from "../commonHelpers/zenComponent";
+import { TButton } from "../button/buttonType";
+import { IFormFieldComponent } from "../formField/formField";
+import { IChipsParent } from "../chip/chip";
+import { TDateRangeOption, IDateRangeValue, IDateRangeValueOptionalLabel } from "./utils/dateRangeUtils";
+import { TDateRangeRaw } from "./types";
+interface IDateRangeRawBase extends IZenComponentProps, IChipsParent {
+    options: TDateRangeOption[];
+    triggerLabel?: string;
+    className?: string;
+    classNamePopup?: string;
+    classNameWrapper?: string;
+    hasApplyButton?: boolean;
+    type?: TButton;
+    disabled?: boolean;
+    dropDownTitle?: string;
+    withCalendar?: boolean;
+    timeSelect?: boolean;
+    disableFutureDates?: boolean;
+    disablePastDates?: boolean;
+    disableDatesBefore?: string;
+    disableDatesAfter?: string;
+    lockEndDate?: string;
+    lockStartDate?: string;
+    id?: string;
+    error?: string;
+    stepper?: boolean;
+}
+export interface IDateRangeRaw extends IDateRangeRawBase {
+    defaultValue: IDateRangeValue;
+    value: IDateRangeValueOptionalLabel;
+    onChange: (value: IDateRangeValue) => void;
+    allowUnsetValue?: false;
+}
+export interface IDateRangeRawUnsetValue extends IDateRangeRawBase {
+    defaultValue?: IDateRangeValue;
+    value: IDateRangeValueOptionalLabel | undefined;
+    onChange: (value: IDateRangeValue | undefined) => void;
+    allowUnsetValue: true;
+}
+export declare const DateRangeRaw: React.FC<TDateRangeRaw & IFormFieldComponent>;
+export declare const TRANSLATIONS: string[];
+export {};

package/dist/dateRangeRaw/dateRangeRaw.js

@@ -0,0 +1,276 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TRANSLATIONS = exports.DateRangeRaw = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const textIconButton_1 = require("../textIconButton/textIconButton");
+const button_1 = require("../button/button");
+const iconCalendar_1 = require("../icons/iconCalendar");
+const react_1 = require("react");
+const classNames_1 = require("../commonHelpers/classNames/classNames");
+const buttonType_1 = require("../button/buttonType");
+const useLanguage_1 = require("../utils/localization/useLanguage");
+const userFormatContext_1 = require("../utils/userFormat/userFormatContext");
+const dateRangeInner_1 = require("../dateRangeInner/dateRangeInner");
+const useUniqueId_1 = require("../commonHelpers/useUniqueId");
+const getRangeOption_1 = require("../filtersBar/components/filtersBarPeriodPicker/getRangeOption");
+const normalizeDates_1 = require("../filtersBar/components/filtersBarPeriodPicker/normalizeDates");
+const controlledPopup_1 = require("../controlledPopup/controlledPopup");
+const useMobile_1 = require("../commonHelpers/hooks/useMobile");
+const mobileSheet_1 = require("../mobileSheet/mobileSheet");
+const footerButtons_1 = require("../footerButtons/footerButtons");
+const useDriveClassName_1 = require("../utils/theme/useDriveClassName");
+const areMapsEqual_1 = require("./utils/areMapsEqual");
+const iconChevronLeftSmall_1 = require("../icons/iconChevronLeftSmall");
+const useDrive_1 = require("../utils/theme/useDrive");
+const iconChevronRightSmall_1 = require("../icons/iconChevronRightSmall");
+const reviewTextControl_1 = require("../formGroup/components/reviewTextControl");
+const chip_1 = require("../chip/chip");
+const chipStatusProvider_1 = require("../chip/chipStatusProvider");
+const focusableSelector_1 = require("../utils/focusableSelector");
+const parseLabel_1 = require("./utils/parseLabel");
+const useFormFieldValues_1 = require("../commonHelpers/hooks/useFormFieldValues/useFormFieldValues");
+// eslint-disable-next-line complexity
+const DateRangeRaw = (props) => {
+    var _a;
+    const { className, classNamePopup, options: optionsArg, type, id, defaultValue, dropDownTitle, hasApplyButton, disableFutureDates, disablePastDates, disableDatesBefore, triggerLabel, disableDatesAfter, withCalendar, lockStartDate, lockEndDate, timeSelect, allowUnsetValue = false, stepper = false, classNameWrapper, isReadOnly, error, chip, chipId, chipName, chipIcon } = props;
+    const { value, name, disabled, onChange, onBlur } = (0, useFormFieldValues_1.useFormFieldValues)(props.controller, props);
+    const { translate } = (0, useLanguage_1.useLanguage)();
+    const isMobile = (0, useMobile_1.useMobile)();
+    const isDrive = (0, useDrive_1.useDrive)();
+    const chipStatus = (0, chipStatusProvider_1.useChipStatus)();
+    const driveWrapperTriggerClassName = (0, useDriveClassName_1.useDriveClassName)("zen-date-range-wrapper");
+    const drivePopupClassName = (0, useDriveClassName_1.useDriveClassName)("zen-date-range-popup");
+    const driveWrapperPopupClassName = (0, useDriveClassName_1.useDriveClassName)("zen-date-range-popup-wrapper");
+    const [showMobileCalendar, setShowMobileCalendar] = (0, react_1.useState)(false);
+    const { dateFormat, toLocalDateTime, toReverseOffsetDateTime, weekStartsOnSunday } = (0, react_1.useContext)(userFormatContext_1.userFormatContext);
+    const optionsMap = (0, react_1.useMemo)(() => (0, getRangeOption_1.getOptionsPeriodMap)(optionsArg, translate, toLocalDateTime, weekStartsOnSunday ? "Sunday" : "Monday", toReverseOffsetDateTime), [optionsArg, toLocalDateTime, toReverseOffsetDateTime, translate, weekStartsOnSunday]);
+    const previousStepOption = (0, react_1.useRef)("");
+    const [selectedRange, setSelectedRange] = (0, react_1.useState)((0, getRangeOption_1.getSelectedRangeFromValue)(optionsMap, value));
+    const mobileContentRef = (0, react_1.useRef)(null);
+    const isCustomDateOption = (selectedRange === null || selectedRange === void 0 ? void 0 : selectedRange.label) === dateRangeInner_1.CUSTOM_CALENDAR_ID;
+    const [isOpen, setIsOpen] = (0, react_1.useState)(false);
+    const prevIsOpenRef = (0, react_1.useRef)(false);
+    const [customDate, setCustomDate] = (0, react_1.useState)((0, normalizeDates_1.normalizeDates)(value === null || value === void 0 ? void 0 : value.from.toISOString(), value === null || value === void 0 ? void 0 : value.to.toISOString(), disableFutureDates, disablePastDates, disableDatesBefore, disableDatesAfter));
+    const isDefaultState = !defaultValue && !selectedRange
+        || defaultValue && selectedRange && defaultValue.label === selectedRange.label && defaultValue.label !== dateRangeInner_1.CUSTOM_CALENDAR_ID
+        || defaultValue && selectedRange && defaultValue.label === selectedRange.label && defaultValue.label === dateRangeInner_1.CUSTOM_CALENDAR_ID && customDate.from && customDate.to
+            && new Date(customDate.from).toISOString() === defaultValue.from.toISOString() && new Date(customDate.to).toISOString() === defaultValue.to.toISOString();
+    const triggerRef = (0, react_1.useRef)(null);
+    const [prevSelection, setPrevSelection] = (0, react_1.useState)((0, getRangeOption_1.getSelectedRangeFromValue)(optionsMap, value));
+    const componentId = (0, useUniqueId_1.useUniqueId)();
+    const calendarLabel = translate(dateRangeInner_1.CUSTOM_CALENDAR_ID);
+    const getCustomRange = (0, react_1.useCallback)(() => ({ from: (prevSelection === null || prevSelection === void 0 ? void 0 : prevSelection.from) || new Date(), to: (prevSelection === null || prevSelection === void 0 ? void 0 : prevSelection.to) || new Date() }), [prevSelection]);
+    const options = (0, react_1.useMemo)(() => (0, getRangeOption_1.getRangeOptionsArray)(optionsArg, translate, toLocalDateTime, weekStartsOnSunday ? "Sunday" : "Monday", toReverseOffsetDateTime, withCalendar || false, prevSelection && prevSelection.label === dateRangeInner_1.CUSTOM_CALENDAR_ID, prevSelection ? getCustomRange : undefined), [optionsArg, translate, toLocalDateTime, weekStartsOnSunday, toReverseOffsetDateTime, withCalendar, prevSelection, getCustomRange]);
+    const optionsMapRef = (0, react_1.useRef)(optionsMap);
+    const isEqualMaps = (0, react_1.useMemo)(() => (0, areMapsEqual_1.areMapsEqual)(optionsMapRef.current, optionsMap), [optionsMap]);
+    if (!isEqualMaps) {
+        optionsMapRef.current = optionsMap;
+    }
+    const hasCustomOption = (0, react_1.useMemo)(() => options.find(option => option.id === dateRangeInner_1.CUSTOM_CALENDAR_ID) !== undefined, [options]);
+    const title = (0, react_1.useMemo)(() => dropDownTitle || translate("Date range"), [dropDownTitle, translate]);
+    const toggleVisibility = (0, react_1.useCallback)(() => setIsOpen(currentIsOpen => !currentIsOpen), []);
+    const getButtonLabel = (0, react_1.useCallback)((rangeValue, titleText) => {
+        if (!rangeValue) {
+            return translate("Date range");
+        }
+        const val = rangeValue.label;
+        const selection = options.find(option => option.id === val);
+        if (selection && val !== dateRangeInner_1.CUSTOM_CALENDAR_ID) {
+            return titleText ? `${translate("Date range filter:")} ${selection.label}` : selection.label;
+        }
+        return titleText ? `${translate("Date range filter:")} ${(0, parseLabel_1.parseLabel)(rangeValue, dateFormat, translate, toLocalDateTime)}` : (0, parseLabel_1.parseLabel)(rangeValue, dateFormat, translate, toLocalDateTime);
+    }, [dateFormat, options, translate, toLocalDateTime]);
+    (0, react_1.useEffect)(() => {
+        const currentValue = (0, getRangeOption_1.getSelectedRangeFromValue)(optionsMap, value);
+        if ((prevSelection === null || prevSelection === void 0 ? void 0 : prevSelection.label) !== (currentValue === null || currentValue === void 0 ? void 0 : currentValue.label) || ((prevSelection === null || prevSelection === void 0 ? void 0 : prevSelection.from.getTime()) !== (currentValue === null || currentValue === void 0 ? void 0 : currentValue.from.getTime()) || (prevSelection === null || prevSelection === void 0 ? void 0 : prevSelection.to.getTime()) !== (currentValue === null || currentValue === void 0 ? void 0 : currentValue.to.getTime()))) {
+            setSelectedRange(currentValue);
+            setPrevSelection(currentValue);
+        }
+    }, [optionsMap, prevSelection === null || prevSelection === void 0 ? void 0 : prevSelection.from, prevSelection === null || prevSelection === void 0 ? void 0 : prevSelection.label, prevSelection === null || prevSelection === void 0 ? void 0 : prevSelection.to, value]);
+    const handleDateRangeSelection = (0, react_1.useCallback)((newVal) => {
+        var _a, _b;
+        const selection = options.find(option => option.id === newVal);
+        newVal === dateRangeInner_1.CUSTOM_CALENDAR_ID && setShowMobileCalendar(true);
+        if (selection && newVal !== dateRangeInner_1.CUSTOM_CALENDAR_ID && selection.getRange) {
+            const range = selection.getRange();
+            const normalizedDates = (0, normalizeDates_1.normalizeDates)(range.from.toISOString(), range.to.toISOString(), disableFutureDates, disablePastDates, disableDatesBefore, disableDatesAfter);
+            const newRange = newVal === dateRangeInner_1.CUSTOM_CALENDAR_ID ?
+                { from: new Date(normalizedDates.from), to: new Date(normalizedDates.to) }
+                : range;
+            setSelectedRange(Object.assign({ label: selection.id }, newRange));
+            !hasApplyButton && setPrevSelection(Object.assign({ label: selection.id }, newRange));
+            !hasApplyButton && (onChange === null || onChange === void 0 ? void 0 : onChange(Object.assign({ label: selection.id }, newRange)));
+            previousStepOption.current = "";
+        }
+        else {
+            const startDateForNormalize = ((_a = selection === null || selection === void 0 ? void 0 : selection.getRange) === null || _a === void 0 ? void 0 : _a.call(selection)) && (selectedRange === null || selectedRange === void 0 ? void 0 : selectedRange.label) !== newVal ? selection.getRange().from.toISOString() : value === null || value === void 0 ? void 0 : value.from.toISOString();
+            const endDateForNormalize = ((_b = selection === null || selection === void 0 ? void 0 : selection.getRange) === null || _b === void 0 ? void 0 : _b.call(selection)) && (selectedRange === null || selectedRange === void 0 ? void 0 : selectedRange.label) !== newVal ? selection.getRange().to.toISOString() : value === null || value === void 0 ? void 0 : value.to.toISOString();
+            const normalizedDates = (0, normalizeDates_1.normalizeDates)(startDateForNormalize, endDateForNormalize, disableFutureDates, disablePastDates, disableDatesBefore, disableDatesAfter);
+            const newRange = newVal === dateRangeInner_1.CUSTOM_CALENDAR_ID ?
+                { from: new Date(normalizedDates.from), to: new Date(normalizedDates.to) }
+                : undefined;
+            const newValueFrom = (newRange === null || newRange === void 0 ? void 0 : newRange.from) || new Date();
+            const newValueTo = (newRange === null || newRange === void 0 ? void 0 : newRange.to) || new Date();
+            setSelectedRange({ label: newVal, from: newValueFrom, to: newValueTo });
+            setCustomDate(normalizedDates);
+            !hasApplyButton && (onChange === null || onChange === void 0 ? void 0 : onChange({ label: newVal, from: newValueFrom, to: newValueTo }));
+        }
+        !hasApplyButton && newVal !== dateRangeInner_1.CUSTOM_CALENDAR_ID && setIsOpen(false);
+    }, [options, hasApplyButton, disableFutureDates, disablePastDates, disableDatesBefore, disableDatesAfter, onChange, selectedRange === null || selectedRange === void 0 ? void 0 : selectedRange.label, value === null || value === void 0 ? void 0 : value.from, value === null || value === void 0 ? void 0 : value.to]);
+    const handleRangeSelection = (0, react_1.useCallback)(() => {
+        if (selectedRange === null || selectedRange === void 0 ? void 0 : selectedRange.label) {
+            const newState = { label: selectedRange.label, from: new Date(customDate.from), to: new Date(customDate.to) };
+            setPrevSelection(newState);
+            onChange === null || onChange === void 0 ? void 0 : onChange(newState);
+            setSelectedRange(newState);
+            setIsOpen(false);
+        }
+    }, [selectedRange === null || selectedRange === void 0 ? void 0 : selectedRange.label, customDate.from, customDate.to, onChange]);
+    const handleApplyClick = (0, react_1.useCallback)(() => {
+        setIsOpen(false);
+        setShowMobileCalendar(false);
+        if (isCustomDateOption) {
+            handleRangeSelection();
+            previousStepOption.current = "";
+            return;
+        }
+        selectedRange && (onChange === null || onChange === void 0 ? void 0 : onChange(selectedRange));
+        selectedRange && setPrevSelection(selectedRange);
+    }, [handleRangeSelection, isCustomDateOption, onChange, selectedRange]);
+    const handleCancelClick = (0, react_1.useCallback)(() => {
+        hasApplyButton && prevSelection && handleDateRangeSelection(prevSelection.label);
+        setCustomDate({ from: prevSelection === null || prevSelection === void 0 ? void 0 : prevSelection.from.toISOString(), to: prevSelection === null || prevSelection === void 0 ? void 0 : prevSelection.to.toISOString() });
+        setIsOpen(!isOpen);
+        setShowMobileCalendar(false);
+    }, [handleDateRangeSelection, prevSelection, isOpen, hasApplyButton]);
+    const handleClearClick = (0, react_1.useCallback)(() => {
+        //* @ts-expect-error: Let's ignore a compile error. if onChange is triggered, then either a value is passed to the function, or undefined can be passed because the interface is IDateRangeUnsetValue
+        !hasApplyButton && (defaultValue || allowUnsetValue) && (onChange === null || onChange === void 0 ? void 0 : onChange(defaultValue));
+        !hasApplyButton && setIsOpen(false);
+        setSelectedRange(defaultValue);
+        previousStepOption.current = "";
+        (defaultValue === null || defaultValue === void 0 ? void 0 : defaultValue.label) === dateRangeInner_1.CUSTOM_CALENDAR_ID && !allowUnsetValue && setCustomDate({ from: defaultValue.from.toISOString(), to: defaultValue.to.toISOString() });
+        setShowMobileCalendar(false);
+    }, [allowUnsetValue, defaultValue, hasApplyButton, onChange]);
+    const handleMobileBackClick = (0, react_1.useCallback)(() => {
+        setShowMobileCalendar(false);
+    }, []);
+    const handleStepperClick = (0, react_1.useCallback)((currentRange, isIncrease) => {
+        let step = previousStepOption.current ? previousStepOption.current : (0, getRangeOption_1.getDateRangeAdjustedStep)(translate, currentRange.label);
+        if (previousStepOption.current === "") {
+            previousStepOption.current = step;
+        }
+        else if (previousStepOption.current !== getRangeOption_1.DEFAULT_STEP_OPTION) {
+            step = previousStepOption.current;
+        }
+        const adjustFn = getRangeOption_1.dateRangeAdjustedFn[step];
+        const newValue = adjustFn(currentRange, isIncrease, toLocalDateTime, toReverseOffsetDateTime);
+        const labeledValue = (0, getRangeOption_1.getSelectedRangeFromValue)(optionsMap, newValue);
+        labeledValue && (onChange === null || onChange === void 0 ? void 0 : onChange(labeledValue));
+    }, [onChange, optionsMap, toLocalDateTime, toReverseOffsetDateTime, translate]);
+    (0, react_1.useEffect)(() => {
+        setCustomDate({ from: value === null || value === void 0 ? void 0 : value.from.toISOString(), to: value === null || value === void 0 ? void 0 : value.to.toISOString() });
+        const currentValue = (0, getRangeOption_1.getSelectedRangeFromValue)(optionsMapRef.current, value);
+        setPrevSelection(currentValue);
+    }, [value, isEqualMaps]);
+    const range = (0, react_1.useMemo)(() => ({ from: customDate.from, to: customDate.to }), [customDate.from, customDate.to]);
+    const component = (0, react_1.useMemo)(() => (0, jsx_runtime_1.jsx)(dateRangeInner_1.DateRangeInner, { id: id || componentId, options: options, onOptionSelect: handleDateRangeSelection, onCalendarSelect: hasCustomOption ? (val) => {
+            setCustomDate({ from: lockStartDate || val.from, to: lockEndDate || (lockStartDate ? val.to || val.from : val.to) });
+        } : undefined, selection: selectedRange === null || selectedRange === void 0 ? void 0 : selectedRange.label, range: range, timeSelect: timeSelect, disableFutureDates: disableFutureDates, disablePastDates: disablePastDates, disableDatesBefore: disableDatesBefore, disableDatesAfter: disableDatesAfter, showMobileCalendar: isMobile ? showMobileCalendar : undefined, setShowMobileCalendar: isMobile ? setShowMobileCalendar : undefined }), [id, componentId, options, handleDateRangeSelection, hasCustomOption, selectedRange === null || selectedRange === void 0 ? void 0 : selectedRange.label, range, timeSelect, disableFutureDates, disablePastDates,
+        disableDatesBefore, disableDatesAfter, isMobile, showMobileCalendar, lockStartDate, lockEndDate]);
+    const memoizedHandleClose = (0, react_1.useCallback)(() => {
+        setIsOpen(false);
+    }, [setIsOpen]);
+    const onReadyForFocus = (0, react_1.useCallback)((isCurrentOpen) => {
+        var _a;
+        if (!isMobile) {
+            return;
+        }
+        if (isCurrentOpen) {
+            const focusableElement = (_a = mobileContentRef.current) === null || _a === void 0 ? void 0 : _a.querySelector(focusableSelector_1.FOCUSABLE_SELECTOR);
+            focusableElement === null || focusableElement === void 0 ? void 0 : focusableElement.focus();
+            return;
+        }
+        prevIsOpenRef.current = isCurrentOpen;
+    }, [isMobile, mobileContentRef]);
+    const isValueNotChanged = (0, react_1.useMemo)(() => {
+        if (!hasApplyButton) {
+            return false;
+        }
+        if (!isCustomDateOption) {
+            return (selectedRange === null || selectedRange === void 0 ? void 0 : selectedRange.label) === (value === null || value === void 0 ? void 0 : value.label);
+        }
+        return selectedRange.label === (value === null || value === void 0 ? void 0 : value.label) && customDate.from === value.from.toISOString() && customDate.to === value.to.toISOString();
+    }, [customDate.from, customDate.to, hasApplyButton, isCustomDateOption, selectedRange === null || selectedRange === void 0 ? void 0 : selectedRange.label, value === null || value === void 0 ? void 0 : value.from, value === null || value === void 0 ? void 0 : value.label, value === null || value === void 0 ? void 0 : value.to]);
+    const memoizedDesktopView = (0, react_1.useMemo)(() => (0, jsx_runtime_1.jsx)(controlledPopup_1.ControlledPopup, { className: (0, classNames_1.classNames)(["zen-date-range-popup-wrapper", driveWrapperPopupClassName || ""]), ariaLabel: translate("Date range"), useTrapFocusWithTrigger: "on", role: "dialog", triggerRef: triggerRef, onOpenChange: setIsOpen, shouldHoldScroll: true, isOpen: isOpen, recalculateOnScroll: true, children: (0, jsx_runtime_1.jsxs)("div", { className: (0, classNames_1.classNames)(["zen-date-range-popup", drivePopupClassName || "", classNamePopup !== null && classNamePopup !== void 0 ? classNamePopup : ""]), children: [(0, jsx_runtime_1.jsx)("div", { className: "zen-date-range-popup__header", children: title }), component, (0, jsx_runtime_1.jsxs)("div", { className: "zen-date-range-popup__footer", children: [(0, jsx_runtime_1.jsx)(button_1.Button, { className: "zen-date-range-popup__button-clear", type: buttonType_1.ButtonType.Tertiary, disabled: !!isDefaultState, onClick: handleClearClick, children: translate("Clear") }), (!isCustomDateOption && hasApplyButton) &&
+                            (0, jsx_runtime_1.jsx)(button_1.Button, { className: "zen-date-range-popup__button-reset", type: buttonType_1.ButtonType.Secondary, onClick: handleCancelClick, children: translate("Cancel") }), (isCustomDateOption || hasApplyButton) && (0, jsx_runtime_1.jsx)(button_1.Button, { className: "zen-date-range-popup__button-apply", type: buttonType_1.ButtonType.Primary, disabled: (isCustomDateOption && (!customDate.from || !customDate.to)) || isValueNotChanged || !selectedRange, onClick: handleApplyClick, children: translate("Apply") })] })] }) }), [classNamePopup, component, customDate.from, customDate.to, drivePopupClassName, driveWrapperPopupClassName, handleApplyClick, handleCancelClick, handleClearClick, hasApplyButton, isCustomDateOption, isDefaultState, isOpen, isValueNotChanged, selectedRange, title, translate]);
+    const memoizedMobileFooter = (0, react_1.useMemo)(() => {
+        const clearButton = (0, jsx_runtime_1.jsx)(button_1.Button, { type: buttonType_1.ButtonType.Tertiary, disabled: !!isDefaultState, onClick: handleClearClick, children: translate("Clear") });
+        const cancelButton = hasApplyButton && !showMobileCalendar ? (0, jsx_runtime_1.jsx)(button_1.Button, { type: buttonType_1.ButtonType.Secondary, onClick: handleCancelClick, children: translate("Cancel") }) : null;
+        const applyButton = showMobileCalendar || hasApplyButton ?
+            (0, jsx_runtime_1.jsx)(button_1.Button, { type: buttonType_1.ButtonType.Primary, disabled: (isCustomDateOption && (!customDate.from || !customDate.to)) || isValueNotChanged || !selectedRange, onClick: handleApplyClick, children: translate("Apply") }) : null;
+        return (0, jsx_runtime_1.jsxs)(footerButtons_1.FooterButtons, { children: [applyButton, cancelButton, clearButton] });
+    }, [customDate.from, customDate.to, handleApplyClick, handleCancelClick, handleClearClick, hasApplyButton, isCustomDateOption, isDefaultState, isValueNotChanged, selectedRange,
+        showMobileCalendar, translate]);
+    const memoizedMobileView = (0, react_1.useMemo)(() => (0, jsx_runtime_1.jsxs)(mobileSheet_1.MobileSheet, { className: (0, classNames_1.classNames)(["zen-date-range-mobile-sheet", classNamePopup ? `${classNamePopup}--mobile-sheet` : ""]), label: translate("Date range"), triggerRef: triggerRef, isOpen: isOpen, onHidePanel: memoizedHandleClose, onCloseClick: memoizedHandleClose, useTrapFocusWithTrigger: false, preventFirstFocus: true, isBackVisible: showMobileCalendar, onBackClick: handleMobileBackClick, onReadyForFocus: onReadyForFocus, children: [(0, jsx_runtime_1.jsx)(mobileSheet_1.MobileSheet.Title, { children: showMobileCalendar ? calendarLabel : title }), (0, jsx_runtime_1.jsx)(mobileSheet_1.MobileSheet.Content, { children: (0, jsx_runtime_1.jsx)("div", { ref: mobileContentRef, children: component }) }), (0, jsx_runtime_1.jsx)(mobileSheet_1.MobileSheet.Footer, { children: memoizedMobileFooter })] }), [calendarLabel, classNamePopup, component, handleMobileBackClick, isOpen, memoizedHandleClose, memoizedMobileFooter,
+        onReadyForFocus, showMobileCalendar, title, translate, mobileContentRef]);
+    const checkIsRangeDisable = (0, react_1.useCallback)((isIncrease) => {
+        if (!selectedRange) {
+            return true;
+        }
+        const step = previousStepOption.current ? previousStepOption.current : (0, getRangeOption_1.getDateRangeAdjustedStep)(translate, selectedRange.label);
+        const adjustFn = getRangeOption_1.dateRangeAdjustedFn[step];
+        const newValue = adjustFn({ from: selectedRange.from, to: selectedRange.to }, isIncrease, toLocalDateTime, toReverseOffsetDateTime);
+        const normalizeNewValue = (0, normalizeDates_1.normalizeDates)(newValue.from.toISOString(), newValue.to.toISOString(), disableFutureDates, disablePastDates, disableDatesBefore, disableDatesAfter);
+        return newValue.from.getTime() !== new Date(normalizeNewValue.from).getTime() || newValue.to.getTime() !== new Date(normalizeNewValue.to).getTime();
+    }, [disableDatesAfter, disableDatesBefore, disableFutureDates, disablePastDates, selectedRange, toLocalDateTime, toReverseOffsetDateTime, translate]);
+    const increaseRange = (0, react_1.useCallback)(() => {
+        selectedRange && handleStepperClick(selectedRange, true);
+    }, [handleStepperClick, selectedRange]);
+    const decreaseRange = (0, react_1.useCallback)(() => {
+        selectedRange && handleStepperClick(selectedRange, false);
+    }, [handleStepperClick, selectedRange]);
+    (0, react_1.useEffect)(() => {
+        if (!isMobile && !isOpen && prevIsOpenRef.current) {
+            setTimeout(() => {
+                var _a;
+                (_a = triggerRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+            }, 0);
+        }
+        prevIsOpenRef.current = isOpen;
+    }, [isOpen, isMobile]);
+    const buttonLabel = (0, react_1.useMemo)(() => triggerLabel && !stepper ? triggerLabel : getButtonLabel((0, getRangeOption_1.getSelectedRangeFromValue)(optionsMap, value)), [getButtonLabel, optionsMap, value, triggerLabel, stepper]);
+    const buttonTitle = (0, react_1.useMemo)(() => triggerLabel && !stepper ? triggerLabel : getButtonLabel((0, getRangeOption_1.getSelectedRangeFromValue)(optionsMap, value), true), [getButtonLabel, optionsMap, value, triggerLabel, stepper]);
+    const currentLabel = (_a = (0, getRangeOption_1.getSelectedRangeFromValue)(optionsMap, value)) === null || _a === void 0 ? void 0 : _a.label;
+    const cssClass = (0, classNames_1.classNames)([
+        "zen-date-range",
+        error ? "zen-date-range--error" : "",
+        className !== null && className !== void 0 ? className : "",
+        stepper ? "zen-date-range--with-stepper" : "",
+        stepper && currentLabel === dateRangeInner_1.CUSTOM_CALENDAR_ID && buttonLabel.length > 20 ? "zen-date-range--with-stepper-custom" : "",
+        !defaultValue && !value || (defaultValue === null || defaultValue === void 0 ? void 0 : defaultValue.label) === currentLabel || type && type !== buttonType_1.ButtonType.Secondary ? "" : "zen-date-range--active"
+    ]);
+    const popupTriggerComponent = (0, react_1.useMemo)(() => (0, jsx_runtime_1.jsx)(textIconButton_1.TextIconButton, { onBlur: onBlur, name: name, htmlType: "button", title: buttonTitle, icon: iconCalendar_1.IconCalendar, iconPosition: textIconButton_1.ButtonIconPosition.Start, className: cssClass, type: type, disabled: disabled, onClick: toggleVisibility, ref: triggerRef, children: buttonLabel }), [onBlur, name, buttonTitle, cssClass, type, disabled, toggleVisibility, buttonLabel]);
+    const chipTriggerComponent = (0, react_1.useMemo)(() => (0, jsx_runtime_1.jsx)(chip_1.Chip, { status: isDefaultState ? undefined : chipStatus || "active", title: isDefaultState ? chipName : buttonTitle, isOpen: isOpen, disabled: disabled, onClick: toggleVisibility, onClose: isDefaultState ? undefined : handleClearClick, triggerRef: triggerRef, icon: chipIcon || iconCalendar_1.IconCalendar, id: chipId, children: isDefaultState ? chipName : buttonLabel }), [isDefaultState, chipStatus, isOpen, disabled, toggleVisibility, handleClearClick, chipIcon, chipId, chipName, buttonLabel, buttonTitle]);
+    if (isReadOnly) {
+        return (0, jsx_runtime_1.jsx)(reviewTextControl_1.ReviewTextControl, { value: buttonLabel });
+    }
+    return (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [stepper ? (0, jsx_runtime_1.jsxs)("div", { className: (0, classNames_1.classNames)(["zen-date-range-wrapper", driveWrapperTriggerClassName || "", classNameWrapper || ""]), children: [(0, jsx_runtime_1.jsx)("button", { type: "button", disabled: checkIsRangeDisable(false), onClick: decreaseRange, className: (0, classNames_1.classNames)(["zen-date-range__stepper", "zen-date-range__stepper--left"]), title: translate("Previous"), children: (0, jsx_runtime_1.jsx)(iconChevronLeftSmall_1.IconChevronLeftSmall, { size: isDrive ? "huge" : "large" }) }), popupTriggerComponent, (0, jsx_runtime_1.jsx)("button", { type: "button", disabled: checkIsRangeDisable(true), onClick: increaseRange, className: (0, classNames_1.classNames)(["zen-date-range__stepper", "zen-date-range__stepper--right"]), title: translate("Next"), children: (0, jsx_runtime_1.jsx)(iconChevronRightSmall_1.IconChevronRightSmall, { size: isDrive ? "huge" : "large" }) })] }) : (chip ? chipTriggerComponent : popupTriggerComponent), isMobile ? memoizedMobileView : memoizedDesktopView] });
+};
+exports.DateRangeRaw = DateRangeRaw;
+exports.TRANSLATIONS = [
+    "Custom",
+    "Date range",
+    "Clear",
+    "Cancel",
+    "Apply",
+    "Reset",
+    "Today",
+    "Next",
+    "Previous",
+    "Choose dates",
+    "Date range not available",
+    "Choose your date range",
+    "Some of the dates you selected aren’t available. Please try a different range.",
+    "Please select the dates you want to view."
+];