@geotab/zenith 3.6.0 → 3.6.1

package/esm/dateRangeRaw/dateRangeRaw.js

@@ -1,681 +0,0 @@
-import { injectString } from "../utils/localization/translationsDictionary";
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { ButtonIconPosition, TextIconButton } from "../textIconButton/textIconButton";
-import { Button } from "../button/button";
-import { IconCalendar } from "../icons/iconCalendar";
-import { useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
-import { classNames } from "../commonHelpers/classNames/classNames";
-import { ButtonType } from "../button/buttonType";
-import { useLanguage } from "../utils/localization/useLanguage";
-import { userFormatContext } from "../utils/userFormat/userFormatContext";
-import { CUSTOM_CALENDAR_ID, DateRangeInner } from "../dateRangeInner/dateRangeInner";
-import { useUniqueId } from "../commonHelpers/useUniqueId";
-import { getOptionsPeriodMap, getRangeOptionsArray, getSelectedRangeFromValue, getDateRangeAdjustedStep, DEFAULT_STEP_OPTION, dateRangeAdjustedFn, isValidDateFn, isDateValid } from "../filtersBar/components/filtersBarPeriodPicker/getRangeOption";
-import { normalizeDates } from "../filtersBar/components/filtersBarPeriodPicker/normalizeDates";
-import { ControlledPopup } from "../controlledPopup/controlledPopup";
-import { useMobile } from "../commonHelpers/hooks/useMobile";
-import { MobileSheet } from "../mobileSheet/mobileSheet";
-import { FooterButtons } from "../footerButtons/footerButtons";
-import { useDriveClassName } from "../utils/theme/useDriveClassName";
-import { areMapsEqual } from "./utils/areMapsEqual";
-import { IconChevronLeftSmall } from "../icons/iconChevronLeftSmall";
-import { useDrive } from "../utils/theme/useDrive";
-import { IconChevronRightSmall } from "../icons/iconChevronRightSmall";
-import { ReviewTextControl } from "../formGroup/components/reviewTextControl";
-import { Chip } from "../chip/chip";
-import { useChipStatus } from "../chip/chipStatusProvider";
-import { FOCUSABLE_SELECTOR } from "../utils/focusableSelector";
-import { parseLabel } from "./utils/parseLabel";
-import { useFormFieldValues } from "../commonHelpers/hooks/useFormFieldValues/useFormFieldValues";
-import { useMobileClassName } from "../utils/theme/useMobileClassName";
-import { zen } from "../utils/zen";
-// eslint-disable-next-line complexity
-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("pt-PT", "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("ro-RO", "Custom", "Personaliza\u021Bi");
-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("pt-PT", "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("ro-RO", "Date range", "Interval de date");
-injectString("en", "Date range filter:", "Date range filter:");
-injectString("pt-PT", "Date range filter:", "Filtro de intervalo de datas:");
-injectString("ro-RO", "Date range filter:", "Filtru interval de date:");
-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("pt-PT", "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("ro-RO", "Clear", "\u0218terge\u021Bi");
-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("pt-PT", "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("ro-RO", "Cancel", "Anula\u021Bi");
-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("pt-PT", "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("ro-RO", "Apply", "Aplica\u021Bi");
-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("pt-PT", "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("ro-RO", "Previous", "\xCEnapoi");
-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("pt-PT", "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");
-injectString("ro-RO", "Next", "\xCEnainte");
-export 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
-  } = useFormFieldValues(props.controller, props);
-  const {
-    translate
-  } = useLanguage();
-  const isMobile = useMobile();
-  const isDrive = useDrive();
-  const chipStatus = useChipStatus();
-  const driveWrapperTriggerClassName = useDriveClassName("zen-date-range-wrapper");
-  const mobileWrapperTriggerClassName = useMobileClassName("zen-date-range-wrapper");
-  const drivePopupClassName = useDriveClassName("zen-date-range-popup");
-  const driveWrapperPopupClassName = useDriveClassName("zen-date-range-popup-wrapper");
-  const [showMobileCalendar, setShowMobileCalendar] = useState(false);
-  const {
-    dateFormat,
-    toLocalDateTime,
-    toReverseOffsetDateTime,
-    weekStartsOnSunday
-  } = useContext(userFormatContext);
-  const optionsMap = useMemo(() => getOptionsPeriodMap(optionsArg, translate, toLocalDateTime, weekStartsOnSunday ? "Sunday" : "Monday", toReverseOffsetDateTime), [optionsArg, toLocalDateTime, toReverseOffsetDateTime, translate, weekStartsOnSunday]);
-  const previousStepOption = useRef("");
-  const [selectedRange, setSelectedRange] = useState(getSelectedRangeFromValue(optionsMap, value));
-  const mobileContentRef = useRef(null);
-  const isCustomDateOption = (selectedRange === null || selectedRange === void 0 ? void 0 : selectedRange.label) === CUSTOM_CALENDAR_ID;
-  const [isOpen, setIsOpen] = useState(false);
-  const prevIsOpenRef = useRef(false);
-  const datesValidation = useMemo(() => isValidDateFn(allowUnsetValue), [allowUnsetValue]);
-  const isDatesValid = useRef(datesValidation(value));
-  const [customDate, setCustomDate] = useState(normalizeDates(isDateValid(value === null || value === void 0 ? void 0 : value.from) ? value.from.toISOString() : undefined, isDateValid(value === null || value === void 0 ? void 0 : value.to) ? value.to.toISOString() : undefined, disableFutureDates, disablePastDates, disableDatesBefore, disableDatesAfter));
-  const isDefaultState = !defaultValue && !selectedRange || defaultValue && selectedRange && defaultValue.label === selectedRange.label && defaultValue.label !== CUSTOM_CALENDAR_ID || defaultValue && selectedRange && defaultValue.label === selectedRange.label && defaultValue.label === 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 = useRef(null);
-  const [prevSelection, setPrevSelection] = useState(getSelectedRangeFromValue(optionsMap, value));
-  const componentId = useUniqueId();
-  const calendarLabel = translate("Custom");
-  const getCustomRange = 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 = useMemo(() => getRangeOptionsArray(optionsArg, translate, toLocalDateTime, weekStartsOnSunday ? "Sunday" : "Monday", toReverseOffsetDateTime, withCalendar || false, prevSelection && prevSelection.label === CUSTOM_CALENDAR_ID, prevSelection ? getCustomRange : undefined), [optionsArg, translate, toLocalDateTime, weekStartsOnSunday, toReverseOffsetDateTime, withCalendar, prevSelection, getCustomRange]);
-  const optionsMapRef = useRef(optionsMap);
-  const isEqualMaps = useMemo(() => areMapsEqual(optionsMapRef.current, optionsMap), [optionsMap]);
-  if (!isEqualMaps) {
-    optionsMapRef.current = optionsMap;
-  }
-  const hasCustomOption = useMemo(() => options.find(option => option.id === CUSTOM_CALENDAR_ID) !== undefined, [options]);
-  const title = useMemo(() => dropDownTitle || translate("Date range"), [dropDownTitle, translate]);
-  const toggleVisibility = useCallback(() => setIsOpen(currentIsOpen => !currentIsOpen), []);
-  const getButtonLabel = useCallback((rangeValue, titleText) => {
-    if (!rangeValue) {
-      return translate("Date range");
-    }
-    const val = rangeValue.label;
-    const selection = options.find(option => option.id === val);
-    if (selection && val !== CUSTOM_CALENDAR_ID) {
-      return titleText ? `${translate("Date range filter:")} ${selection.label}` : selection.label;
-    }
-    return titleText ? `${translate("Date range filter:")} ${parseLabel(rangeValue, dateFormat, translate, toLocalDateTime)}` : parseLabel(rangeValue, dateFormat, translate, toLocalDateTime);
-  }, [dateFormat, options, translate, toLocalDateTime]);
-  useEffect(() => {
-    const currentValue = getSelectedRangeFromValue(optionsMap, value);
-    isDatesValid.current = datesValidation(value);
-    if (!isDatesValid.current) {
-      console.error("Invalid Date objects provided to DateRange", value);
-      return;
-    }
-    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);
-    }
-  }, [datesValidation, 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 = useCallback(
-  // eslint-disable-next-line complexity
-  newVal => {
-    var _a, _b;
-    const selection = options.find(option => option.id === newVal);
-    newVal === CUSTOM_CALENDAR_ID && setShowMobileCalendar(true);
-    if (selection && newVal !== CUSTOM_CALENDAR_ID && selection.getRange) {
-      const range = selection.getRange();
-      const normalizedDates = normalizeDates(range.from.toISOString(), range.to.toISOString(), disableFutureDates, disablePastDates, disableDatesBefore, disableDatesAfter);
-      const newRange = newVal === 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 : value === null || value === void 0 ? void 0 : value.from;
-      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 : value === null || value === void 0 ? void 0 : value.to;
-      if (!datesValidation(startDateForNormalize === undefined && endDateForNormalize === undefined ? undefined : {
-        from: startDateForNormalize,
-        to: endDateForNormalize
-      })) {
-        console.error("Invalid Date objects provided to DateRange", {
-          from: startDateForNormalize,
-          to: endDateForNormalize
-        });
-        return;
-      }
-      const normalizedDates = normalizeDates(startDateForNormalize === null || startDateForNormalize === void 0 ? void 0 : startDateForNormalize.toISOString(), endDateForNormalize === null || endDateForNormalize === void 0 ? void 0 : endDateForNormalize.toISOString(), disableFutureDates, disablePastDates, disableDatesBefore, disableDatesAfter);
-      const newRange = newVal === 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 !== 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, datesValidation]);
-  const handleRangeSelection = 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 = 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 = 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 = 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) === CUSTOM_CALENDAR_ID && !allowUnsetValue && setCustomDate({
-      from: defaultValue.from.toISOString(),
-      to: defaultValue.to.toISOString()
-    });
-    setShowMobileCalendar(false);
-  }, [allowUnsetValue, defaultValue, hasApplyButton, onChange]);
-  const handleMobileBackClick = useCallback(() => {
-    setShowMobileCalendar(false);
-  }, []);
-  const handleStepperClick = useCallback((currentRange, isIncrease) => {
-    let step = previousStepOption.current ? previousStepOption.current : getDateRangeAdjustedStep(translate, currentRange.label);
-    if (previousStepOption.current === "") {
-      previousStepOption.current = step;
-    } else if (previousStepOption.current !== DEFAULT_STEP_OPTION) {
-      step = previousStepOption.current;
-    }
-    const adjustFn = dateRangeAdjustedFn[step];
-    const newValue = adjustFn(currentRange, isIncrease, toLocalDateTime, toReverseOffsetDateTime);
-    const labeledValue = getSelectedRangeFromValue(optionsMap, newValue);
-    labeledValue && (onChange === null || onChange === void 0 ? void 0 : onChange(labeledValue));
-  }, [onChange, optionsMap, toLocalDateTime, toReverseOffsetDateTime, translate]);
-  useEffect(() => {
-    // required to sync custom date in toolbar and sidebar
-    isDatesValid.current = datesValidation(value);
-    if (!isDatesValid.current) {
-      console.error("Invalid Date objects provided to DateRange", value);
-      return;
-    }
-    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 = getSelectedRangeFromValue(optionsMapRef.current, value);
-    setPrevSelection(currentValue);
-  }, [value, isEqualMaps, datesValidation]);
-  const range = useMemo(() => ({
-    from: customDate.from,
-    to: customDate.to
-  }), [customDate.from, customDate.to]);
-  const component = useMemo(() => _jsx(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 = useCallback(() => {
-    setIsOpen(false);
-  }, [setIsOpen]);
-  const onReadyForFocus = useCallback(isCurrentOpen => {
-    var _a;
-    if (!isMobile) {
-      return;
-    }
-    if (isCurrentOpen) {
-      const focusableElement = (_a = mobileContentRef.current) === null || _a === void 0 ? void 0 : _a.querySelector(FOCUSABLE_SELECTOR);
-      focusableElement === null || focusableElement === void 0 ? void 0 : focusableElement.focus();
-      return;
-    }
-    prevIsOpenRef.current = isCurrentOpen;
-  }, [isMobile, mobileContentRef]);
-  const isValueNotChanged = 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 = useMemo(() => _jsx(ControlledPopup, {
-    className: 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: _jsxs("div", {
-      className: classNames(["zen-date-range-popup", drivePopupClassName || "", classNamePopup !== null && classNamePopup !== void 0 ? classNamePopup : ""]),
-      children: [_jsx("div", {
-        className: "zen-date-range-popup__header",
-        children: title
-      }), component, _jsxs("div", {
-        className: "zen-date-range-popup__footer",
-        children: [_jsx(Button, {
-          className: "zen-date-range-popup__button-clear",
-          type: ButtonType.Tertiary,
-          disabled: !!isDefaultState,
-          onClick: handleClearClick,
-          children: translate("Clear")
-        }), !isCustomDateOption && hasApplyButton && _jsx(Button, {
-          className: "zen-date-range-popup__button-reset",
-          type: ButtonType.Secondary,
-          onClick: handleCancelClick,
-          children: translate("Cancel")
-        }), (isCustomDateOption || hasApplyButton) && _jsx(Button, {
-          className: "zen-date-range-popup__button-apply",
-          type: 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 = useMemo(() => {
-    const clearButton = _jsx(Button, {
-      type: ButtonType.Tertiary,
-      disabled: !!isDefaultState,
-      onClick: handleClearClick,
-      children: translate("Clear")
-    });
-    const cancelButton = hasApplyButton && !showMobileCalendar ? _jsx(Button, {
-      type: ButtonType.Secondary,
-      onClick: handleCancelClick,
-      children: translate("Cancel")
-    }) : null;
-    const applyButton = showMobileCalendar || hasApplyButton ? _jsx(Button, {
-      type: ButtonType.Primary,
-      disabled: isCustomDateOption && (!customDate.from || !customDate.to) || isValueNotChanged || !selectedRange,
-      onClick: handleApplyClick,
-      children: translate("Apply")
-    }) : null;
-    return _jsxs(FooterButtons, {
-      children: [applyButton, cancelButton, clearButton]
-    });
-  }, [customDate.from, customDate.to, handleApplyClick, handleCancelClick, handleClearClick, hasApplyButton, isCustomDateOption, isDefaultState, isValueNotChanged, selectedRange, showMobileCalendar, translate]);
-  const memoizedMobileView = useMemo(() => _jsxs(MobileSheet, {
-    className: 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: [_jsx(MobileSheet.Title, {
-      children: showMobileCalendar ? calendarLabel : title
-    }), _jsx(MobileSheet.Content, {
-      children: _jsx("div", {
-        ref: mobileContentRef,
-        children: component
-      })
-    }), _jsx(MobileSheet.Footer, {
-      children: memoizedMobileFooter
-    })]
-  }), [calendarLabel, classNamePopup, component, handleMobileBackClick, isOpen, memoizedHandleClose, memoizedMobileFooter, onReadyForFocus, showMobileCalendar, title, translate, mobileContentRef]);
-  const checkIsRangeDisable = useCallback(isIncrease => {
-    if (!selectedRange || !datesValidation({
-      from: selectedRange.from,
-      to: selectedRange.to
-    })) {
-      return true;
-    }
-    const step = previousStepOption.current ? previousStepOption.current : getDateRangeAdjustedStep(translate, selectedRange.label);
-    const adjustFn = dateRangeAdjustedFn[step];
-    const newValue = adjustFn({
-      from: selectedRange.from,
-      to: selectedRange.to
-    }, isIncrease, toLocalDateTime, toReverseOffsetDateTime);
-    const normalizeNewValue = 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, datesValidation]);
-  const increaseRange = useCallback(() => {
-    selectedRange && handleStepperClick(selectedRange, true);
-  }, [handleStepperClick, selectedRange]);
-  const decreaseRange = useCallback(() => {
-    selectedRange && handleStepperClick(selectedRange, false);
-  }, [handleStepperClick, selectedRange]);
-  useEffect(() => {
-    var _a;
-    if (!isMobile && !isOpen && prevIsOpenRef.current) {
-      (_a = zen.setTimeout) === null || _a === void 0 ? void 0 : _a.call(zen, () => {
-        var _a;
-        (_a = triggerRef.current) === null || _a === void 0 ? void 0 : _a.focus();
-      }, 0);
-    }
-    prevIsOpenRef.current = isOpen;
-  }, [isOpen, isMobile]);
-  const buttonLabel = useMemo(() => triggerLabel && !stepper ? triggerLabel : getButtonLabel(getSelectedRangeFromValue(optionsMap, value)), [getButtonLabel, optionsMap, value, triggerLabel, stepper]);
-  const buttonTitle = useMemo(() => triggerLabel && !stepper ? triggerLabel : getButtonLabel(getSelectedRangeFromValue(optionsMap, value), true), [getButtonLabel, optionsMap, value, triggerLabel, stepper]);
-  const currentLabel = (_a = getSelectedRangeFromValue(optionsMap, value)) === null || _a === void 0 ? void 0 : _a.label;
-  const cssClass = classNames(["zen-date-range", error ? "zen-date-range--error" : "", className !== null && className !== void 0 ? className : "", stepper ? "zen-date-range--with-stepper" : "", stepper && currentLabel === 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.Secondary ? "" : "zen-date-range--active"]);
-  const popupTriggerComponent = useMemo(() => _jsx(TextIconButton, {
-    onBlur: onBlur,
-    name: name,
-    htmlType: "button",
-    title: buttonTitle,
-    icon: IconCalendar,
-    iconPosition: ButtonIconPosition.Start,
-    className: cssClass,
-    type: type,
-    disabled: disabled,
-    onClick: toggleVisibility,
-    ref: triggerRef,
-    "aria-haspopup": "dialog",
-    "data-role": "dialog",
-    children: buttonLabel
-  }), [onBlur, name, buttonTitle, cssClass, type, disabled, toggleVisibility, buttonLabel]);
-  const chipTriggerComponent = useMemo(() => _jsx(Chip, {
-    className: classNames([className || ""]),
-    status: isDefaultState ? undefined : chipStatus || "active",
-    dataRole: "dialog",
-    title: isDefaultState ? chipName : buttonTitle,
-    isOpen: isOpen,
-    disabled: disabled,
-    onClick: toggleVisibility,
-    onClose: isDefaultState ? undefined : handleClearClick,
-    triggerRef: triggerRef,
-    icon: chipIcon || IconCalendar,
-    id: chipId,
-    children: isDefaultState ? chipName : buttonLabel
-  }), [className, isDefaultState, chipStatus, chipName, buttonTitle, isOpen, disabled, toggleVisibility, handleClearClick, chipIcon, chipId, buttonLabel]);
-  if (isReadOnly) {
-    return _jsx(ReviewTextControl, {
-      value: buttonLabel
-    });
-  }
-  return _jsxs(_Fragment, {
-    children: [stepper ? _jsxs("div", {
-      className: classNames(["zen-date-range-wrapper", mobileWrapperTriggerClassName || driveWrapperTriggerClassName || "", classNameWrapper || ""]),
-      children: [_jsx("button", {
-        type: "button",
-        disabled: checkIsRangeDisable(false),
-        onClick: decreaseRange,
-        className: classNames(["zen-date-range__stepper", "zen-date-range__stepper--left"]),
-        title: translate("Previous"),
-        children: _jsx(IconChevronLeftSmall, {
-          size: isDrive || isMobile ? "huge" : "large"
-        })
-      }), popupTriggerComponent, _jsx("button", {
-        type: "button",
-        disabled: checkIsRangeDisable(true),
-        onClick: increaseRange,
-        className: classNames(["zen-date-range__stepper", "zen-date-range__stepper--right"]),
-        title: translate("Next"),
-        children: _jsx(IconChevronRightSmall, {
-          size: isDrive || isMobile ? "huge" : "large"
-        })
-      })]
-    }) : chip ? chipTriggerComponent : popupTriggerComponent, isMobile ? memoizedMobileView : memoizedDesktopView]
-  });
-};
-export const 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."];