@geotab/zenith 3.1.1-beta.6 → 3.2.0-beta.0

package/dist/dateRangeRaw/dateRangeRaw.js

@@ -1,7 +1,182 @@
 "use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
+
+const {
+  injectString
+} = require("../utils/localization/translationsDictionary");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
 exports.TRANSLATIONS = exports.DateRangeRaw = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
+injectString("cs", "Custom", "Vlastn\xED");
+injectString("da-DK", "Custom", "Brugerdefineret");
+injectString("de", "Custom", "Individuell");
+injectString("en", "Custom", "Custom");
+injectString("es", "Custom", "Personalizado");
+injectString("fi-FI", "Custom", "Mukautettu");
+injectString("fr", "Custom", "Personnalis\xE9e");
+injectString("fr-FR", "Custom", "Personnalis\xE9");
+injectString("hu-HU", "Custom", "Egy\xE9ni");
+injectString("id", "Custom", "Kustom");
+injectString("it", "Custom", "Personalizza");
+injectString("ja", "Custom", "\u671F\u9593\u8A2D\u5B9A\u306E\u5909\u66F4");
+injectString("ko-KR", "Custom", "\uC0AC\uC6A9\uC790 \uC9C0\uC815");
+injectString("ms", "Custom", "Tersuai");
+injectString("nb-NO", "Custom", "Egendefinert");
+injectString("nl", "Custom", "Aangepast");
+injectString("pl", "Custom", "Niestandardowy");
+injectString("pt-BR", "Custom", "Personalizado");
+injectString("sk-SK", "Custom", "Vlastn\xE9");
+injectString("sv", "Custom", "Modifierad");
+injectString("th", "Custom", "\u0E01\u0E33\u0E2B\u0E19\u0E14\u0E40\u0E2D\u0E07");
+injectString("tr", "Custom", "\xD6zel");
+injectString("zh-Hans", "Custom", "\u5B9A\u5236");
+injectString("zh-TW", "Custom", "\u81EA\u8A02");
+injectString("cs", "Date range", "Rozmez\xED dat");
+injectString("da-DK", "Date range", "Datointerval");
+injectString("de", "Date range", "Datumsbereich");
+injectString("en", "Date range", "Date range");
+injectString("es", "Date range", "Intervalo de fechas");
+injectString("fi-FI", "Date range", "P\xE4iv\xE4m\xE4\xE4r\xE4alue");
+injectString("fr", "Date range", "Plage de dates");
+injectString("fr-FR", "Date range", "Plage de dates");
+injectString("hu-HU", "Date range", "Id\u0151tartom\xE1ny");
+injectString("id", "Date range", "Rentang tanggal");
+injectString("it", "Date range", "Intervallo di date");
+injectString("ja", "Date range", "\u65E5\u4ED8\u7BC4\u56F2");
+injectString("ko-KR", "Date range", "\uB0A0\uC9DC \uBC94\uC704");
+injectString("ms", "Date range", "Julat tarikh");
+injectString("nb-NO", "Date range", "Datoomr\xE5de");
+injectString("nl", "Date range", "Datumbereik");
+injectString("pl", "Date range", "Zakres dat");
+injectString("pt-BR", "Date range", "Intervalo de datas");
+injectString("sk-SK", "Date range", "Rozsah d\xE1tumov");
+injectString("sv", "Date range", "Datumintervall");
+injectString("th", "Date range", "\u0E0A\u0E48\u0E27\u0E07\u0E27\u0E31\u0E19\u0E17\u0E35\u0E48");
+injectString("tr", "Date range", "Tarih aral\u0131\u011F\u0131");
+injectString("zh-Hans", "Date range", "\u65E5\u671F\u8303\u56F4");
+injectString("zh-TW", "Date range", "\u65E5\u671F\u7BC4\u570D");
+injectString("en", "Date range filter:", "Date range filter:");
+injectString("cs", "Clear", "Vymazat");
+injectString("da-DK", "Clear", "Ryd");
+injectString("de", "Clear", "L\xF6schen");
+injectString("en", "Clear", "Clear");
+injectString("es", "Clear", "Borrar");
+injectString("fi-FI", "Clear", "Tyhjenn\xE4");
+injectString("fr", "Clear", "Effacer");
+injectString("fr-FR", "Clear", "Effacer");
+injectString("hu-HU", "Clear", "T\xF6r\xF6ld.");
+injectString("id", "Clear", "Hapus");
+injectString("it", "Clear", "Cancella");
+injectString("ja", "Clear", "\u30AF\u30EA\u30A2");
+injectString("ko-KR", "Clear", "\uC9C0\uC6B0\uAE30");
+injectString("ms", "Clear", "Kosongkan");
+injectString("nb-NO", "Clear", "T\xF8m");
+injectString("nl", "Clear", "Wissen");
+injectString("pl", "Clear", "Wyczy\u015B\u0107");
+injectString("pt-BR", "Clear", "Limpar");
+injectString("sk-SK", "Clear", "Vyma\u017E");
+injectString("sv", "Clear", "Rensa");
+injectString("th", "Clear", "\u0E25\u0E49\u0E32\u0E07");
+injectString("tr", "Clear", "Temizle");
+injectString("zh-Hans", "Clear", "\u6E05\u9664");
+injectString("zh-TW", "Clear", "\u6E05\u9664");
+injectString("cs", "Cancel", "Zru\u0161it");
+injectString("da-DK", "Cancel", "Annuller");
+injectString("de", "Cancel", "Abbrechen");
+injectString("en", "Cancel", "Cancel");
+injectString("es", "Cancel", "Cancelar");
+injectString("fi-FI", "Cancel", "Peruuta");
+injectString("fr", "Cancel", "Annuler");
+injectString("fr-FR", "Cancel", "Annuler");
+injectString("hu-HU", "Cancel", "M\xE9gse");
+injectString("id", "Cancel", "Batalkan");
+injectString("it", "Cancel", "Annullare");
+injectString("ja", "Cancel", "\u30AD\u30E3\u30F3\u30BB\u30EB");
+injectString("ko-KR", "Cancel", "\uCDE8\uC18C");
+injectString("ms", "Cancel", "Batal");
+injectString("nb-NO", "Cancel", "Avbryt");
+injectString("nl", "Cancel", "Annuleren");
+injectString("pl", "Cancel", "Anuluj");
+injectString("pt-BR", "Cancel", "Cancelar");
+injectString("sk-SK", "Cancel", "Zru\u0161.");
+injectString("sv", "Cancel", "Avbryt");
+injectString("th", "Cancel", "\u0E22\u0E01\u0E40\u0E25\u0E34\u0E01");
+injectString("tr", "Cancel", "\u0130ptal");
+injectString("zh-Hans", "Cancel", "\u53D6\u6D88");
+injectString("zh-TW", "Cancel", "\u53D6\u6D88");
+injectString("cs", "Apply", "Pou\u017E\xEDt");
+injectString("da-DK", "Apply", "Anvend");
+injectString("de", "Apply", "Anwenden");
+injectString("en", "Apply", "Apply");
+injectString("es", "Apply", "Aplicar");
+injectString("fi-FI", "Apply", "K\xE4yt\xE4");
+injectString("fr", "Apply", "Appliquer");
+injectString("fr-FR", "Apply", "Appliquer");
+injectString("hu-HU", "Apply", "Alkalmazd.");
+injectString("id", "Apply", "Terapkan");
+injectString("it", "Apply", "Applicare");
+injectString("ja", "Apply", "\u9069\u7528");
+injectString("ko-KR", "Apply", "\uC801\uC6A9");
+injectString("ms", "Apply", "Gunakan");
+injectString("nb-NO", "Apply", "Bruk");
+injectString("nl", "Apply", "Toepassen");
+injectString("pl", "Apply", "Zastosuj");
+injectString("pt-BR", "Apply", "Aplicar");
+injectString("sk-SK", "Apply", "Pou\u017Ei");
+injectString("sv", "Apply", "Ans\xF6k");
+injectString("th", "Apply", "\u0E43\u0E0A\u0E49");
+injectString("tr", "Apply", "Uygula");
+injectString("zh-Hans", "Apply", "\u5E94\u7528");
+injectString("zh-TW", "Apply", "\u5957\u7528");
+injectString("cs", "Previous", "P\u0159edchoz\xED");
+injectString("da-DK", "Previous", "Forrige");
+injectString("de", "Previous", "Vorherige");
+injectString("en", "Previous", "Previous");
+injectString("es", "Previous", "Anterior");
+injectString("fi-FI", "Previous", "Edellinen");
+injectString("fr", "Previous", "Pr\xE9c\xE9dent");
+injectString("fr-FR", "Previous", "Pr\xE9c\xE9dent");
+injectString("hu-HU", "Previous", "El\u0151z\u0151");
+injectString("id", "Previous", "Sebelumnya");
+injectString("it", "Previous", "Indietro");
+injectString("ja", "Previous", "\u524D");
+injectString("ko-KR", "Previous", "\uC774\uC804\uC758");
+injectString("ms", "Previous", "Sebelumnya");
+injectString("nb-NO", "Previous", "Tidligere");
+injectString("nl", "Previous", "Vorige");
+injectString("pl", "Previous", "Poprzednie");
+injectString("pt-BR", "Previous", "Anterior");
+injectString("sk-SK", "Previous", "Predch\xE1dzaj\xFAci");
+injectString("sv", "Previous", "F\xF6reg\xE5ende");
+injectString("th", "Previous", "\u0E01\u0E48\u0E2D\u0E19\u0E2B\u0E19\u0E49\u0E32");
+injectString("tr", "Previous", "\xD6nceki");
+injectString("zh-Hans", "Previous", "\u524D\u4E00");
+injectString("zh-TW", "Previous", "\u4E0A\u4E00\u500B");
+injectString("cs", "Next", "Dal\u0161\xED");
+injectString("da-DK", "Next", "N\xE6ste");
+injectString("de", "Next", "N\xE4chstes");
+injectString("en", "Next", "Next");
+injectString("es", "Next", "Siguiente");
+injectString("fi-FI", "Next", "Seuraava");
+injectString("fr", "Next", "Suivant");
+injectString("fr-FR", "Next", "Suivant");
+injectString("hu-HU", "Next", "K\xF6vetkez\u0151");
+injectString("id", "Next", "Berikutnya");
+injectString("it", "Next", "Avanti");
+injectString("ja", "Next", "\u6B21\u306E");
+injectString("ko-KR", "Next", "\uB2E4\uC74C");
+injectString("ms", "Next", "Seterusnya");
+injectString("nb-NO", "Next", "Neste");
+injectString("nl", "Next", "Volgende");
+injectString("pl", "Next", "Nast\u0119pne");
+injectString("pt-BR", "Next", "Avan\xE7ar");
+injectString("sk-SK", "Next", "\u010Eal\u0161\xED");
+injectString("sv", "Next", "N\xE4sta");
+injectString("th", "Next", "\u0E16\u0E31\u0E14\u0E44\u0E1B");
+injectString("tr", "Next", "Sonraki");
+injectString("zh-Hans", "Next", "\u4E0B\u4E00\u4E2A");
+injectString("zh-TW", "Next", "\u4E0B\u4E00\u6B65");
 const textIconButton_1 = require("../textIconButton/textIconButton");
 const button_1 = require("../button/button");
 const iconCalendar_1 = require("../icons/iconCalendar");
@@ -30,247 +205,434 @@ 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) => {
+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("Custom");
+  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;
-    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;
+    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 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) => {
+    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;
-        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 });
+        (_a = triggerRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+      }, 0);
     }
-    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] });
+    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."
-];
+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."];