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

package/esm/dateInputInner/dateInputInner.js

@@ -1,3 +1,4 @@
+import { injectString } from "../utils/localization/translationsDictionary";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCallback, useContext, useEffect, useMemo, useReducer, useRef, useState } from "react";
 import { Calendar } from "../calendar/calendar";
@@ -9,482 +10,791 @@ import { DateInputInnerControlBlock } from "./dateInputInnerControlBlock";
 import { userFormatContext } from "../utils/userFormat/userFormatContext";
 import { AssistiveText, dateInputInnerReducer, DateInputInnerStateActionType, getInitialDateInputInnerState } from "./dateInputInnerReducer";
 import { useTodayButton } from "../utils/dateInputUtils/useTodayButton";
-export const DateInputInner = ({ id, value, dateFormatter, dateDeformatter, dateFormat, onChange, dateRangeMode, selectTime, disableFutureDates, disablePastDates, disableDatesAfter, disableDatesBefore, startDayOfWeek, yearRange, title, isMobileView, requireSelection = false }) => {
-    var _a;
-    const { translate } = useLanguage();
-    const { toLocalDateTime, toReverseOffsetDateTime } = useContext(userFormatContext);
-    const { isTodayDisabled, todayFrom, todayTo } = useTodayButton(dateRangeMode, disableFutureDates, disablePastDates, disableDatesBefore, disableDatesAfter);
-    const driveClassName = useDriveClassName("zen-date-input-inner");
-    const [state, dispatchState] = useReducer(dateInputInnerReducer, getInitialDateInputInnerState(id, value.from ? dateFormatter(value.from) : "", value.to ? dateFormatter(value.to) : "", dateRangeMode));
-    const currentDateValuesRef = useRef({ from: value.from, to: value.to });
-    const currentSelectedFieldRef = useRef(undefined);
-    const startInputRef = useRef(null);
-    const endInputRef = useRef(null);
-    useEffect(() => {
-        dispatchState({ type: DateInputInnerStateActionType.ChangeStartDateText, payload: value.from ? dateFormatter(value.from) : "" });
-    }, [value.from, dateFormatter]);
-    useEffect(() => {
-        dispatchState({ type: DateInputInnerStateActionType.ChangeEndDateText, payload: value.to ? dateFormatter(value.to) : "" });
-    }, [value.to, dateFormatter]);
-    useEffect(() => {
-        var _a, _b;
-        if (value.from !== currentDateValuesRef.current.from || value.to !== currentDateValuesRef.current.to) {
-            currentDateValuesRef.current = { from: value.from, to: value.to };
-            dispatchState({ type: DateInputInnerStateActionType.ChangeActiveField, payload: "start" });
-            currentSelectedFieldRef.current = undefined;
-            (_a = startInputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
-            (_b = startInputRef.current) === null || _b === void 0 ? void 0 : _b.select();
-        }
-    }, [value.from, value.to, currentDateValuesRef]);
-    useEffect(() => {
-        dispatchState({ type: DateInputInnerStateActionType.ChangeDateRangeMode, payload: dateRangeMode || false });
-    }, [dateRangeMode]);
-    useEffect(() => {
-        if (startInputRef.current) {
-            startInputRef.current.focus();
-            startInputRef.current.select();
-        }
-    }, [startInputRef]);
-    const getAssistiveText = useCallback((txtKey, isStart) => {
-        if (txtKey === AssistiveText.DateAdjusted) {
-            return translate(isStart ? "Start date has been adjusted." : "End date has been adjusted.");
-        }
-        if (txtKey === AssistiveText.TimeAdjusted) {
-            return translate(isStart ? "Start time has been adjusted." : "End time has been adjusted.");
-        }
-        return undefined;
-    }, [translate]);
-    const calendarValue = useMemo(() => ({ from: value.from ? toLocalDateTime(value.from).toISOString() : undefined, to: value.to ? toLocalDateTime(value.to).toISOString() : undefined }), [toLocalDateTime, value.from, value.to]);
-    const disableDatesBeforeValue = useMemo(() => disableDatesBefore ? toLocalDateTime(disableDatesBefore).toISOString() : undefined, [toLocalDateTime, disableDatesBefore]);
-    const disableDatesAfterValue = useMemo(() => disableDatesAfter ? toLocalDateTime(disableDatesAfter).toISOString() : undefined, [toLocalDateTime, disableDatesAfter]);
-    const timePickerValueFrom = useMemo(() => value.from ? toLocalDateTime(value.from) : undefined, [toLocalDateTime, value.from]);
-    const [timePickerValueFromPrev, setTimePickerValueFromPrev] = useState(timePickerValueFrom);
-    useEffect(() => {
-        if (timePickerValueFrom) {
-            setTimePickerValueFromPrev(timePickerValueFrom);
-        }
-    }, [timePickerValueFrom]);
-    const timePickerValueTo = useMemo(() => value.to ? toLocalDateTime(value.to) : undefined, [toLocalDateTime, value.to]);
-    const [timePickerValueToPrev, setTimePickerValueToPrev] = useState(timePickerValueTo);
-    useEffect(() => {
-        if (timePickerValueTo) {
-            setTimePickerValueToPrev(timePickerValueTo);
-        }
-    }, [timePickerValueTo]);
-    const resetStartDateChanges = useCallback((resetKeydownBehavior = false) => {
-        dispatchState({ type: DateInputInnerStateActionType.ChangeStartDateText, payload: value.from ? dateFormatter(value.from) : "" });
-        resetKeydownBehavior && dispatchState({ type: DateInputInnerStateActionType.ChangeInputKeydownBehavior, payload: undefined });
-    }, [dateFormatter, value.from]);
-    const adjustTime = useCallback((dDate, dateLike) => {
-        if (!dateLike) {
-            return dDate;
-        }
-        // const dateLike = toLocalDateTime(prevVal);
-        dDate.setHours(dateLike.getHours());
-        dDate.setMinutes(dateLike.getMinutes());
-        dDate.setSeconds(dateLike.getSeconds());
-        return dDate;
-    }, []);
-    const startDateChangeHandler = useCallback((e, isBlur = false) => {
-        const newValue = e.target.value;
+injectString("da-DK", "Start date has been adjusted.", "Startdatoen er blevet justeret.");
+injectString("en", "Start date has been adjusted.", "Start date has been adjusted.");
+injectString("fi-FI", "Start date has been adjusted.", "Aloitusp\xE4iv\xE4\xE4 on mukautettu.");
+injectString("hu-HU", "Start date has been adjusted.", "A kezd\u0151 d\xE1tumot m\xF3dos\xEDtottuk.");
+injectString("ko-KR", "Start date has been adjusted.", "\uC2DC\uC791 \uB0A0\uC9DC\uAC00 \uC870\uC815\uB418\uC5C8\uC2B5\uB2C8\uB2E4.");
+injectString("nb-NO", "Start date has been adjusted.", "Startdatoen er justert.");
+injectString("sk-SK", "Start date has been adjusted.", "D\xE1tum za\u010Diatku bol upraven\xFD.");
+injectString("zh-TW", "Start date has been adjusted.", "\u5DF2\u8ABF\u6574\u958B\u59CB\u65E5\u671F\u3002");
+injectString("da-DK", "End date has been adjusted.", "Slutdatoen er blevet justeret.");
+injectString("en", "End date has been adjusted.", "End date has been adjusted.");
+injectString("fi-FI", "End date has been adjusted.", "Lopetusp\xE4iv\xE4m\xE4\xE4r\xE4 on mukautettu.");
+injectString("hu-HU", "End date has been adjusted.", "A z\xE1r\xF3 d\xE1tumot m\xF3dos\xEDtottuk.");
+injectString("ko-KR", "End date has been adjusted.", "\uC885\uB8CC \uB0A0\uC9DC\uAC00 \uC870\uC815\uB418\uC5C8\uC2B5\uB2C8\uB2E4.");
+injectString("nb-NO", "End date has been adjusted.", "Endedatoen er justert.");
+injectString("sk-SK", "End date has been adjusted.", "D\xE1tum ukon\u010Denia bol upraven\xFD.");
+injectString("zh-TW", "End date has been adjusted.", "\u5DF2\u8ABF\u6574\u7D50\u675F\u65E5\u671F\u3002");
+injectString("da-DK", "Start time has been adjusted.", "Starttidspunktet er blevet justeret.");
+injectString("en", "Start time has been adjusted.", "Start time has been adjusted.");
+injectString("fi-FI", "Start time has been adjusted.", "Aloitusaika on s\xE4\xE4detty.");
+injectString("hu-HU", "Start time has been adjusted.", "A kezd\u0151 id\u0151pontot m\xF3dos\xEDtottuk.");
+injectString("ko-KR", "Start time has been adjusted.", "\uC2DC\uC791 \uC2DC\uAC04\uC774 \uC870\uC815\uB418\uC5C8\uC2B5\uB2C8\uB2E4.");
+injectString("nb-NO", "Start time has been adjusted.", "Starttiden er justert.");
+injectString("sk-SK", "Start time has been adjusted.", "\u010Cas za\u010Datia bol upraven\xFD.");
+injectString("zh-TW", "Start time has been adjusted.", "\u5DF2\u8ABF\u6574\u958B\u59CB\u6642\u9593\u3002");
+injectString("da-DK", "End time has been adjusted.", "Sluttidspunktet er blevet justeret.");
+injectString("en", "End time has been adjusted.", "End time has been adjusted.");
+injectString("fi-FI", "End time has been adjusted.", "Loppuaika on s\xE4\xE4detty.");
+injectString("hu-HU", "End time has been adjusted.", "A z\xE1r\xF3 id\u0151pontot m\xF3dos\xEDtottuk.");
+injectString("ko-KR", "End time has been adjusted.", "\uC885\uB8CC \uC2DC\uAC04\uC774 \uC870\uC815\uB418\uC5C8\uC2B5\uB2C8\uB2E4.");
+injectString("nb-NO", "End time has been adjusted.", "Endetiden er justert.");
+injectString("sk-SK", "End time has been adjusted.", "\u010Cas ukon\u010Denia bol upraven\xFD.");
+injectString("zh-TW", "End time has been adjusted.", "\u5DF2\u8ABF\u6574\u7D50\u675F\u6642\u9593\u3002");
+injectString("cs", "Start date", "Datum za\u010D\xE1tku");
+injectString("da-DK", "Start date", "Startdato");
+injectString("de", "Start date", "Startdatum");
+injectString("en", "Start date", "Start date");
+injectString("es", "Start date", "Fecha de inicio");
+injectString("fi-FI", "Start date", "Aloitusp\xE4iv\xE4m\xE4\xE4r\xE4");
+injectString("fr", "Start date", "Date de d\xE9but");
+injectString("fr-FR", "Start date", "Date de d\xE9but");
+injectString("hu-HU", "Start date", "Kezd\u0151d\xE1tum");
+injectString("id", "Start date", "Tanggal mulai");
+injectString("it", "Start date", "Data di inizio");
+injectString("ja", "Start date", "\u958B\u59CB\u65E5");
+injectString("ko-KR", "Start date", "\uC2DC\uC791 \uB0A0\uC9DC");
+injectString("ms", "Start date", "Tarikh mula");
+injectString("nb-NO", "Start date", "Startdato");
+injectString("nl", "Start date", "Startdatum");
+injectString("pl", "Start date", "Data rozpocz\u0119cia");
+injectString("pt-BR", "Start date", "Data de in\xEDcio");
+injectString("sk-SK", "Start date", "D\xE1tum za\u010Diatku");
+injectString("sv", "Start date", "Startdatum");
+injectString("th", "Start date", "\u0E27\u0E31\u0E19\u0E17\u0E35\u0E48\u0E40\u0E23\u0E34\u0E48\u0E21\u0E15\u0E49\u0E19");
+injectString("tr", "Start date", "Ba\u015Flang\u0131\xE7 tarihi");
+injectString("zh-Hans", "Start date", "\u8D77\u59CB\u65E5\u671F");
+injectString("zh-TW", "Start date", "\u958B\u59CB\u65E5\u671F");
+injectString("cs", "Pick a date", "Vyberte datum");
+injectString("da-DK", "Pick a date", "V\xE6lg en dato");
+injectString("de", "Pick a date", "Datum ausw\xE4hlen");
+injectString("en", "Pick a date", "Pick a date");
+injectString("es", "Pick a date", "Elegir una fecha");
+injectString("fi-FI", "Pick a date", "Valitse p\xE4iv\xE4m\xE4\xE4r\xE4");
+injectString("fr", "Pick a date", "Choisir une date");
+injectString("fr-FR", "Pick a date", "S\xE9lectionner une date");
+injectString("hu-HU", "Pick a date", "V\xE1lassz d\xE1tumot");
+injectString("id", "Pick a date", "Pilih tanggal");
+injectString("it", "Pick a date", "Scegliere una data");
+injectString("ja", "Pick a date", "\u65E5\u4ED8\u3092\u9078\u629E");
+injectString("ko-KR", "Pick a date", "\uB0A0\uC9DC \uC120\uD0DD");
+injectString("ms", "Pick a date", "Pilih tarikh");
+injectString("nb-NO", "Pick a date", "Velg en dato");
+injectString("nl", "Pick a date", "Kies een datum");
+injectString("pl", "Pick a date", "Wybierz dat\u0119");
+injectString("pt-BR", "Pick a date", "Escolha uma data");
+injectString("sk-SK", "Pick a date", "Vyber d\xE1tum");
+injectString("sv", "Pick a date", "V\xE4lj ett datum");
+injectString("th", "Pick a date", "\u0E40\u0E25\u0E37\u0E2D\u0E01\u0E27\u0E31\u0E19\u0E17\u0E35\u0E48");
+injectString("tr", "Pick a date", "Bir tarih se\xE7in");
+injectString("zh-Hans", "Pick a date", "\u9009\u62E9\u65E5\u671F");
+injectString("zh-TW", "Pick a date", "\u9078\u64C7\u65E5\u671F");
+injectString("cs", "End date", "Datum konce");
+injectString("da-DK", "End date", "Slutdato");
+injectString("de", "End date", "Enddatum");
+injectString("en", "End date", "End date");
+injectString("es", "End date", "Fecha de desactivaci\xF3n");
+injectString("fi-FI", "End date", "Lopetusp\xE4iv\xE4m\xE4\xE4r\xE4");
+injectString("fr", "End date", "Date de fin");
+injectString("fr-FR", "End date", "Date de fin");
+injectString("hu-HU", "End date", "Z\xE1r\xF3d\xE1tum");
+injectString("id", "End date", "Tanggal akhir");
+injectString("it", "End date", "Data finale");
+injectString("ja", "End date", "\u7D42\u4E86\u65E5");
+injectString("ko-KR", "End date", "\uC885\uB8CC \uB0A0\uC9DC");
+injectString("ms", "End date", "Tarikh tamat");
+injectString("nb-NO", "End date", "Endedato");
+injectString("nl", "End date", "Einddatum");
+injectString("pl", "End date", "Data zako\u0144czenia");
+injectString("pt-BR", "End date", "Data final");
+injectString("sk-SK", "End date", "D\xE1tum ukon\u010Denia");
+injectString("sv", "End date", "Slutdatum");
+injectString("th", "End date", "\u0E27\u0E31\u0E19\u0E17\u0E35\u0E48\u0E2A\u0E34\u0E49\u0E19\u0E2A\u0E38\u0E14");
+injectString("tr", "End date", "Biti\u015F tarihi");
+injectString("zh-Hans", "End date", "\u7ED3\u675F\u65E5\u671F");
+injectString("zh-TW", "End date", "\u7D50\u675F\u65E5\u671F");
+export const DateInputInner = ({
+  id,
+  value,
+  dateFormatter,
+  dateDeformatter,
+  dateFormat,
+  onChange,
+  dateRangeMode,
+  selectTime,
+  disableFutureDates,
+  disablePastDates,
+  disableDatesAfter,
+  disableDatesBefore,
+  startDayOfWeek,
+  yearRange,
+  title,
+  isMobileView,
+  requireSelection = false
+}) => {
+  var _a;
+  const {
+    translate
+  } = useLanguage();
+  const {
+    toLocalDateTime,
+    toReverseOffsetDateTime
+  } = useContext(userFormatContext);
+  const {
+    isTodayDisabled,
+    todayFrom,
+    todayTo
+  } = useTodayButton(dateRangeMode, disableFutureDates, disablePastDates, disableDatesBefore, disableDatesAfter);
+  const driveClassName = useDriveClassName("zen-date-input-inner");
+  const [state, dispatchState] = useReducer(dateInputInnerReducer, getInitialDateInputInnerState(id, value.from ? dateFormatter(value.from) : "", value.to ? dateFormatter(value.to) : "", dateRangeMode));
+  const currentDateValuesRef = useRef({
+    from: value.from,
+    to: value.to
+  });
+  const currentSelectedFieldRef = useRef(undefined);
+  const startInputRef = useRef(null);
+  const endInputRef = useRef(null);
+  useEffect(() => {
+    dispatchState({
+      type: DateInputInnerStateActionType.ChangeStartDateText,
+      payload: value.from ? dateFormatter(value.from) : ""
+    });
+  }, [value.from, dateFormatter]);
+  useEffect(() => {
+    dispatchState({
+      type: DateInputInnerStateActionType.ChangeEndDateText,
+      payload: value.to ? dateFormatter(value.to) : ""
+    });
+  }, [value.to, dateFormatter]);
+  useEffect(() => {
+    var _a, _b;
+    if (value.from !== currentDateValuesRef.current.from || value.to !== currentDateValuesRef.current.to) {
+      currentDateValuesRef.current = {
+        from: value.from,
+        to: value.to
+      };
+      dispatchState({
+        type: DateInputInnerStateActionType.ChangeActiveField,
+        payload: "start"
+      });
+      currentSelectedFieldRef.current = undefined;
+      (_a = startInputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+      (_b = startInputRef.current) === null || _b === void 0 ? void 0 : _b.select();
+    }
+  }, [value.from, value.to, currentDateValuesRef]);
+  useEffect(() => {
+    dispatchState({
+      type: DateInputInnerStateActionType.ChangeDateRangeMode,
+      payload: dateRangeMode || false
+    });
+  }, [dateRangeMode]);
+  useEffect(() => {
+    if (startInputRef.current) {
+      startInputRef.current.focus();
+      startInputRef.current.select();
+    }
+  }, [startInputRef]);
+  const getAssistiveText = useCallback((txtKey, isStart) => {
+    if (txtKey === AssistiveText.DateAdjusted) {
+      return isStart ? translate("Start date has been adjusted.") : translate("End date has been adjusted.");
+    }
+    if (txtKey === AssistiveText.TimeAdjusted) {
+      return isStart ? translate("Start time has been adjusted.") : translate("End time has been adjusted.");
+    }
+    return undefined;
+  }, [translate]);
+  const calendarValue = useMemo(() => ({
+    from: value.from ? toLocalDateTime(value.from).toISOString() : undefined,
+    to: value.to ? toLocalDateTime(value.to).toISOString() : undefined
+  }), [toLocalDateTime, value.from, value.to]);
+  const disableDatesBeforeValue = useMemo(() => disableDatesBefore ? toLocalDateTime(disableDatesBefore).toISOString() : undefined, [toLocalDateTime, disableDatesBefore]);
+  const disableDatesAfterValue = useMemo(() => disableDatesAfter ? toLocalDateTime(disableDatesAfter).toISOString() : undefined, [toLocalDateTime, disableDatesAfter]);
+  const timePickerValueFrom = useMemo(() => value.from ? toLocalDateTime(value.from) : undefined, [toLocalDateTime, value.from]);
+  const [timePickerValueFromPrev, setTimePickerValueFromPrev] = useState(timePickerValueFrom);
+  useEffect(() => {
+    if (timePickerValueFrom) {
+      setTimePickerValueFromPrev(timePickerValueFrom);
+    }
+  }, [timePickerValueFrom]);
+  const timePickerValueTo = useMemo(() => value.to ? toLocalDateTime(value.to) : undefined, [toLocalDateTime, value.to]);
+  const [timePickerValueToPrev, setTimePickerValueToPrev] = useState(timePickerValueTo);
+  useEffect(() => {
+    if (timePickerValueTo) {
+      setTimePickerValueToPrev(timePickerValueTo);
+    }
+  }, [timePickerValueTo]);
+  const resetStartDateChanges = useCallback((resetKeydownBehavior = false) => {
+    dispatchState({
+      type: DateInputInnerStateActionType.ChangeStartDateText,
+      payload: value.from ? dateFormatter(value.from) : ""
+    });
+    resetKeydownBehavior && dispatchState({
+      type: DateInputInnerStateActionType.ChangeInputKeydownBehavior,
+      payload: undefined
+    });
+  }, [dateFormatter, value.from]);
+  const adjustTime = useCallback((dDate, dateLike) => {
+    if (!dateLike) {
+      return dDate;
+    }
+    // const dateLike = toLocalDateTime(prevVal);
+    dDate.setHours(dateLike.getHours());
+    dDate.setMinutes(dateLike.getMinutes());
+    dDate.setSeconds(dateLike.getSeconds());
+    return dDate;
+  }, []);
+  const startDateChangeHandler = useCallback((e, isBlur = false) => {
+    const newValue = e.target.value;
+    currentSelectedFieldRef.current = undefined;
+    let deformattedDate = dateDeformatter(newValue);
+    if (!isValidDate(deformattedDate)) {
+      resetStartDateChanges(true);
+      return;
+    }
+    deformattedDate = adjustTime(deformattedDate, value.from ? toLocalDateTime(value.from) : undefined);
+    if (isValidationDateError(deformattedDate, toReverseOffsetDateTime, disableFutureDates, disablePastDates, disableDatesBefore, disableDatesAfter)) {
+      // if date is invalid, do not update the state
+      resetStartDateChanges(true);
+      return;
+    }
+    const newValidDates = getValidDatesForStart(toReverseOffsetDateTime, deformattedDate, value.to ? toLocalDateTime(value.to) : undefined, disableFutureDates, disablePastDates, disableDatesBefore, disableDatesAfter);
+    const newStateValue = {
+      start: dateFormatter(toReverseOffsetDateTime(newValidDates.start)),
+      end: dateRangeMode ? newValidDates.end ? dateFormatter(toReverseOffsetDateTime(newValidDates.end)) : "" : value.to || "",
+      startAssistiveText: isBlur && state.currentActiveField === "start" ? AssistiveText.None : undefined,
+      endAssistiveText: isBlur && state.currentActiveField === "start" ? value.to && newValidDates.end && newValidDates.end.getTime() !== new Date(toLocalDateTime(value.to)).getTime() ? AssistiveText.DateAdjusted : AssistiveText.None : undefined
+    };
+    const startDateToPass = toReverseOffsetDateTime(newValidDates.start).toISOString();
+    const endDateToPass = dateRangeMode ? newValidDates.end ? toReverseOffsetDateTime(newValidDates.end).toISOString() : undefined : value.to;
+    currentDateValuesRef.current = {
+      from: startDateToPass,
+      to: endDateToPass
+    };
+    dispatchState({
+      type: DateInputInnerStateActionType.ChangePeriod,
+      payload: newStateValue
+    });
+    const isDateChanged = value.from !== startDateToPass || value.to !== endDateToPass;
+    isDateChanged && onChange({
+      from: startDateToPass,
+      to: endDateToPass
+    });
+  }, [dateDeformatter, adjustTime, value.from, value.to, toReverseOffsetDateTime, disableFutureDates, disablePastDates, disableDatesBefore, disableDatesAfter, toLocalDateTime, dateFormatter, dateRangeMode, state.currentActiveField, onChange, resetStartDateChanges]);
+  const startDateChangeOnArrow = useCallback((oldValue, delta) => {
+    let deformattedDate = dateDeformatter(oldValue);
+    deformattedDate.setDate(deformattedDate.getDate() + delta);
+    if (!isValidDate(deformattedDate)) {
+      resetStartDateChanges();
+      return;
+    }
+    deformattedDate = adjustTime(deformattedDate, value.from ? toLocalDateTime(value.from) : undefined);
+    if (isValidationDateError(deformattedDate, toReverseOffsetDateTime, disableFutureDates, disablePastDates, disableDatesBefore, disableDatesAfter)) {
+      // if date is invalid, do not update the state
+      resetStartDateChanges();
+      return;
+    }
+    const newValidDates = getValidDatesForStart(toReverseOffsetDateTime, deformattedDate, value.to ? toLocalDateTime(value.to) : undefined, disableFutureDates, disablePastDates, disableDatesBefore, disableDatesAfter);
+    const newStateValue = {
+      emittedBy: "start",
+      start: dateFormatter(toReverseOffsetDateTime(newValidDates.start)),
+      end: dateRangeMode ? newValidDates.end ? dateFormatter(toReverseOffsetDateTime(newValidDates.end)) : "" : value.to || "",
+      startAssistiveText: AssistiveText.None,
+      endAssistiveText: value.to && newValidDates.end && newValidDates.end.getTime() !== new Date(toLocalDateTime(value.to)).getTime() ? AssistiveText.DateAdjusted : AssistiveText.None,
+      inputKeyDownBehavior: "start"
+    };
+    const startDateToPass = toReverseOffsetDateTime(newValidDates.start).toISOString();
+    const endDateToPass = dateRangeMode ? newValidDates.end ? toReverseOffsetDateTime(newValidDates.end).toISOString() : undefined : value.to;
+    currentDateValuesRef.current = {
+      from: startDateToPass,
+      to: endDateToPass
+    };
+    dispatchState({
+      type: DateInputInnerStateActionType.ChangePeriod,
+      payload: newStateValue
+    });
+    onChange({
+      from: startDateToPass,
+      to: endDateToPass
+    });
+    currentSelectedFieldRef.current = startInputRef.current || undefined;
+  }, [dateDeformatter, adjustTime, value.from, value.to, toReverseOffsetDateTime, disableFutureDates, disablePastDates, disableDatesBefore, disableDatesAfter, toLocalDateTime, dateFormatter, dateRangeMode, onChange, resetStartDateChanges]);
+  const startTimeChangeHandler = useCallback(time => {
+    currentSelectedFieldRef.current = undefined;
+    const startDateToCopyTime = time;
+    let newValueFrom = value.from ? toLocalDateTime(value.from) : startDateToCopyTime;
+    newValueFrom = adjustTime(newValueFrom, startDateToCopyTime);
+    if (!isValidDate(newValueFrom)) {
+      resetStartDateChanges();
+      return;
+    }
+    if (isValidationDateError(newValueFrom, toReverseOffsetDateTime, disableFutureDates, disablePastDates, disableDatesBefore, disableDatesAfter)) {
+      const newValidDate = getValidTime(newValueFrom, value.from, disableFutureDates, disablePastDates, disableDatesBefore, disableDatesAfter);
+      if (!newValidDate) {
+        resetStartDateChanges();
+        return;
+      }
+      newValueFrom = newValidDate;
+    }
+    const startEndOrderValid = !dateRangeMode || !value.to ? true : toReverseOffsetDateTime(newValueFrom) <= new Date(value.to);
+    const newStateValue = {
+      start: dateFormatter(toReverseOffsetDateTime(newValueFrom)),
+      end: startEndOrderValid ? dateRangeMode ? value.to ? dateFormatter(value.to) : "" : value.to || "" : dateFormatter(toReverseOffsetDateTime(newValueFrom)),
+      startAssistiveText: AssistiveText.None,
+      endAssistiveText: startEndOrderValid ? AssistiveText.None : AssistiveText.TimeAdjusted,
+      nextActiveField: startEndOrderValid ? undefined : "end"
+    };
+    const startDateToPass = toReverseOffsetDateTime(newValueFrom).toISOString();
+    const endDateToPass = startEndOrderValid ? value.to : toReverseOffsetDateTime(newValueFrom).toISOString();
+    currentDateValuesRef.current = {
+      from: startDateToPass,
+      to: endDateToPass
+    };
+    dispatchState({
+      type: DateInputInnerStateActionType.ChangePeriod,
+      payload: newStateValue
+    });
+    dispatchState({
+      type: DateInputInnerStateActionType.ChangeStartAssistiveText,
+      payload: AssistiveText.None
+    });
+    onChange({
+      from: startDateToPass,
+      to: endDateToPass
+    });
+  }, [value.from, value.to, toLocalDateTime, adjustTime, toReverseOffsetDateTime, disableFutureDates, disablePastDates, disableDatesBefore, disableDatesAfter, dateRangeMode, dateFormatter, onChange, resetStartDateChanges]);
+  const resetEndDateChanges = useCallback((resetKeydownBehavior = false) => {
+    dispatchState({
+      type: DateInputInnerStateActionType.ChangeEndDateText,
+      payload: value.to ? dateFormatter(value.to) : ""
+    });
+    resetKeydownBehavior && dispatchState({
+      type: DateInputInnerStateActionType.ChangeInputKeydownBehavior,
+      payload: undefined
+    });
+  }, [dateFormatter, value.to]);
+  const endDateChangeHandler = useCallback((e, isBlur = false) => {
+    const newValue = e.target.value;
+    currentSelectedFieldRef.current = undefined;
+    let deformattedDate = dateDeformatter(newValue);
+    if (!isValidDate(deformattedDate)) {
+      resetEndDateChanges(true);
+      return;
+    }
+    deformattedDate = adjustTime(deformattedDate, value.to ? toLocalDateTime(value.to) : undefined);
+    if (isValidationDateError(deformattedDate, toReverseOffsetDateTime, disableFutureDates, disablePastDates, disableDatesBefore, disableDatesAfter)) {
+      // if date is invalid, do not update the state
+      resetEndDateChanges(true);
+      return;
+    }
+    const newValidDates = getValidDatesForEnd(toReverseOffsetDateTime, deformattedDate, value.from ? toLocalDateTime(value.from) : undefined, disableFutureDates, disablePastDates, disableDatesBefore, disableDatesAfter);
+    const newStateValue = {
+      start: newValidDates.start ? dateFormatter(toReverseOffsetDateTime(newValidDates.start)) : "",
+      end: dateFormatter(toReverseOffsetDateTime(newValidDates.end)),
+      startAssistiveText: isBlur && state.currentActiveField === "end" ? value.from && newValidDates.start && newValidDates.start.getTime() !== new Date(toLocalDateTime(value.from)).getTime() ? AssistiveText.DateAdjusted : AssistiveText.None : undefined,
+      endAssistiveText: isBlur && state.currentActiveField === "end" ? AssistiveText.None : undefined
+    };
+    const startDateToPass = newValidDates.start ? toReverseOffsetDateTime(newValidDates.start).toISOString() : undefined;
+    const endDateToPass = toReverseOffsetDateTime(newValidDates.end).toISOString();
+    currentDateValuesRef.current = {
+      from: startDateToPass,
+      to: endDateToPass
+    };
+    dispatchState({
+      type: DateInputInnerStateActionType.ChangePeriod,
+      payload: newStateValue
+    });
+    const isDateChanged = value.from !== startDateToPass || value.to !== endDateToPass;
+    isDateChanged && onChange({
+      from: startDateToPass,
+      to: endDateToPass
+    });
+  }, [dateDeformatter, adjustTime, value.to, value.from, toReverseOffsetDateTime, disableFutureDates, disablePastDates, disableDatesBefore, disableDatesAfter, toLocalDateTime, dateFormatter, state.currentActiveField, onChange, resetEndDateChanges]);
+  const endDateChangeOnArrow = useCallback((oldValue, delta) => {
+    let deformattedDate = dateDeformatter(oldValue);
+    deformattedDate.setDate(deformattedDate.getDate() + delta);
+    if (!isValidDate(deformattedDate)) {
+      resetEndDateChanges();
+      return;
+    }
+    deformattedDate = adjustTime(deformattedDate, value.to ? toLocalDateTime(value.to) : undefined);
+    if (isValidationDateError(deformattedDate, toReverseOffsetDateTime, disableFutureDates, disablePastDates, disableDatesBefore, disableDatesAfter)) {
+      // if date is invalid, do not update the state
+      resetEndDateChanges();
+      return;
+    }
+    const newValidDates = getValidDatesForEnd(toReverseOffsetDateTime, deformattedDate, value.from ? toLocalDateTime(value.from) : undefined, disableFutureDates, disablePastDates, disableDatesBefore, disableDatesAfter);
+    const newStateValue = {
+      emittedBy: "end",
+      start: newValidDates.start ? dateFormatter(toReverseOffsetDateTime(newValidDates.start)) : "",
+      end: dateFormatter(toReverseOffsetDateTime(newValidDates.end)),
+      startAssistiveText: value.from && newValidDates.start && newValidDates.start.getTime() !== new Date(toLocalDateTime(value.from)).getTime() ? AssistiveText.DateAdjusted : AssistiveText.None,
+      endAssistiveText: AssistiveText.None,
+      inputKeyDownBehavior: "end"
+    };
+    const startDateToPass = newValidDates.start ? toReverseOffsetDateTime(newValidDates.start).toISOString() : undefined;
+    const endDateToPass = toReverseOffsetDateTime(newValidDates.end).toISOString();
+    currentDateValuesRef.current = {
+      from: startDateToPass,
+      to: endDateToPass
+    };
+    dispatchState({
+      type: DateInputInnerStateActionType.ChangePeriod,
+      payload: newStateValue
+    });
+    onChange({
+      from: startDateToPass,
+      to: endDateToPass
+    });
+    currentSelectedFieldRef.current = endInputRef.current || undefined;
+  }, [dateDeformatter, adjustTime, value.to, value.from, toReverseOffsetDateTime, disableFutureDates, disablePastDates, disableDatesBefore, disableDatesAfter, toLocalDateTime, dateFormatter, onChange, resetEndDateChanges]);
+  const endTimeChangeHandler = useCallback(time => {
+    const endDateToCopyTime = time;
+    currentSelectedFieldRef.current = undefined;
+    let newValueTo = value.to ? toLocalDateTime(value.to) : endDateToCopyTime;
+    newValueTo = adjustTime(newValueTo, endDateToCopyTime);
+    if (!isValidDate(newValueTo)) {
+      resetEndDateChanges();
+      return;
+    }
+    if (isValidationDateError(newValueTo, toReverseOffsetDateTime, disableFutureDates, disablePastDates, disableDatesBefore, disableDatesAfter)) {
+      const newValidDate = getValidTime(newValueTo, value.to, disableFutureDates, disablePastDates, disableDatesBefore, disableDatesAfter);
+      if (!newValidDate) {
+        resetEndDateChanges();
+        return;
+      }
+      newValueTo = newValidDate;
+      return;
+    }
+    const startEndOrderValid = !dateRangeMode || !value.from ? true : new Date(value.from) <= toReverseOffsetDateTime(newValueTo);
+    const newStateValue = {
+      start: startEndOrderValid ? value.from ? dateFormatter(toReverseOffsetDateTime(value.from)) : "" : dateFormatter(toReverseOffsetDateTime(newValueTo)),
+      end: dateFormatter(toReverseOffsetDateTime(newValueTo)),
+      startAssistiveText: startEndOrderValid ? AssistiveText.None : AssistiveText.TimeAdjusted,
+      endAssistiveText: AssistiveText.None,
+      nextActiveField: startEndOrderValid ? undefined : "start"
+    };
+    const startDateToPass = startEndOrderValid ? value.from : toReverseOffsetDateTime(newValueTo).toISOString();
+    const endDateToPass = toReverseOffsetDateTime(newValueTo).toISOString();
+    currentDateValuesRef.current = {
+      from: startDateToPass,
+      to: endDateToPass
+    };
+    dispatchState({
+      type: DateInputInnerStateActionType.ChangePeriod,
+      payload: newStateValue
+    });
+    dispatchState({
+      type: DateInputInnerStateActionType.ChangeEndAssistiveText,
+      payload: AssistiveText.None
+    });
+    onChange({
+      from: startDateToPass,
+      to: endDateToPass
+    });
+  }, [value.to, value.from, toLocalDateTime, adjustTime, toReverseOffsetDateTime, disableFutureDates, disablePastDates, disableDatesBefore, disableDatesAfter, dateRangeMode, dateFormatter, onChange, resetEndDateChanges]);
+  const getCurrentActiveField = useCallback(() => state.currentActiveField, [state.currentActiveField]);
+  // eslint-disable-next-line complexity
+  const calendarChangeHandler = useCallback((range, currentActiveField) => {
+    currentSelectedFieldRef.current = dateRangeMode ? undefined : startInputRef.current || undefined;
+    let currentStartDate = range.from && new Date(range.from);
+    const startDateToCopyTime = value.from ? toLocalDateTime(value.from) : timePickerValueFromPrev || new Date(toDayStart(toLocalDateTime(new Date()).toISOString()));
+    let currentEndDate = range.to && new Date(range.to);
+    const endDateToCopyTime = value.to ? toLocalDateTime(value.to) : timePickerValueToPrev || new Date(toDayStart(toLocalDateTime(new Date()).toISOString()));
+    let rangeFrom = range.from;
+    let rangeTo = range.to;
+    if (currentStartDate) {
+      currentStartDate = adjustTime(currentStartDate, startDateToCopyTime);
+      const isValidationError = isValidationDateError(currentStartDate, toReverseOffsetDateTime, disableFutureDates, disablePastDates, disableDatesBefore, disableDatesAfter);
+      rangeFrom = toReverseOffsetDateTime(isValidationError ? new Date(range.from) : currentStartDate).toISOString();
+    }
+    if (currentEndDate) {
+      currentEndDate = adjustTime(currentEndDate, endDateToCopyTime);
+      const isValidationError = isValidationDateError(currentEndDate, toReverseOffsetDateTime, disableFutureDates, disablePastDates, disableDatesBefore, disableDatesAfter);
+      rangeTo = toReverseOffsetDateTime(isValidationError ? new Date(range.to) : currentEndDate).toISOString();
+    }
+    if (rangeFrom && rangeTo && new Date(rangeFrom) > new Date(rangeTo)) {
+      range.from = !currentActiveField || currentActiveField === "start" ? rangeFrom : rangeTo;
+      range.to = currentActiveField && currentActiveField === "end" ? rangeTo : rangeFrom;
+    } else {
+      range.from = rangeFrom || (dateRangeMode ? rangeTo : undefined);
+      range.to = rangeTo || (dateRangeMode ? rangeFrom : undefined);
+    }
+    const newStateValue = {
+      start: range.from ? dateFormatter(range.from) : "",
+      end: range.to ? dateFormatter(range.to) : "",
+      hasAssistiveText: currentActiveField === "start" ? range.to !== value.to : range.from !== value.from
+    };
+    currentDateValuesRef.current = Object.assign({}, range);
+    dispatchState({
+      type: DateInputInnerStateActionType.ChangeCalendarValue,
+      payload: newStateValue
+    });
+    onChange(range);
+  }, [dateRangeMode, value.from, value.to, toLocalDateTime, timePickerValueFromPrev, timePickerValueToPrev, dateFormatter, onChange, adjustTime, toReverseOffsetDateTime, disableFutureDates, disablePastDates, disableDatesBefore, disableDatesAfter]);
+  const handleSetStartDateText = useCallback(e => {
+    dispatchState({
+      type: DateInputInnerStateActionType.ChangeStartDateText,
+      payload: e.target.value
+    });
+  }, []);
+  const handleSetEndDateText = useCallback(e => {
+    dispatchState({
+      type: DateInputInnerStateActionType.ChangeEndDateText,
+      payload: e.target.value
+    });
+  }, []);
+  // eslint-disable-next-line complexity
+  const handleOnClick = useCallback(e => {
+    if (e.target instanceof HTMLElement && e.target.tagName === "INPUT" && e.target.getAttribute("id") === state.startDateId) {
+      state.currentActiveField === "end" && dispatchState({
+        type: DateInputInnerStateActionType.ChangeActiveField,
+        payload: "start"
+      });
+      state.currentActiveField === "start" && dispatchState({
+        type: DateInputInnerStateActionType.ChangeInputKeydownBehavior,
+        payload: undefined
+      });
+    }
+    if (e.target instanceof HTMLElement && e.target.tagName === "INPUT" && e.target.getAttribute("id") === state.endDateId) {
+      state.currentActiveField === "start" && dispatchState({
+        type: DateInputInnerStateActionType.ChangeActiveField,
+        payload: "end"
+      });
+      state.currentActiveField === "end" && dispatchState({
+        type: DateInputInnerStateActionType.ChangeInputKeydownBehavior,
+        payload: undefined
+      });
+    }
+    let targetEl = e.target === e.currentTarget ? undefined : e.target;
+    while (targetEl) {
+      if (targetEl instanceof HTMLElement && targetEl.tagName === "BUTTON" && targetEl.getAttribute("data-time") === state.startDateId) {
+        targetEl = undefined;
+      }
+      if (targetEl instanceof HTMLElement && targetEl.tagName === "BUTTON" && targetEl.getAttribute("data-time") === state.endDateId) {
+        targetEl = undefined;
+      }
+      targetEl = !targetEl || targetEl.parentNode === e.currentTarget ? undefined : targetEl.parentNode;
+    }
+  }, [state.currentActiveField, state.endDateId, state.startDateId]);
+  // eslint-disable-next-line complexity
+  const handleOnKeyDown = useCallback(e => {
+    if (e.key === "Enter") {
+      if (e.target instanceof HTMLElement && e.target.tagName === "INPUT" && e.target.getAttribute("id") === state.startDateId) {
+        state.currentActiveField === "start" && startDateChangeHandler(e, true);
+        dispatchState({
+          type: DateInputInnerStateActionType.ToggleActiveField
+        });
+      }
+      if (e.target instanceof HTMLElement && e.target.tagName === "INPUT" && e.target.getAttribute("id") === state.endDateId) {
+        state.currentActiveField === "end" && endDateChangeHandler(e, true);
+        dispatchState({
+          type: DateInputInnerStateActionType.ToggleActiveField
+        });
+      }
+    }
+    if (e.key === "Tab") {
+      if (e.target instanceof HTMLElement && e.target.tagName === "INPUT" && e.target.getAttribute("id") === state.startDateId) {
         currentSelectedFieldRef.current = undefined;
-        let deformattedDate = dateDeformatter(newValue);
-        if (!isValidDate(deformattedDate)) {
-            resetStartDateChanges(true);
-            return;
-        }
-        deformattedDate = adjustTime(deformattedDate, value.from ? toLocalDateTime(value.from) : undefined);
-        if (isValidationDateError(deformattedDate, toReverseOffsetDateTime, disableFutureDates, disablePastDates, disableDatesBefore, disableDatesAfter)) {
-            // if date is invalid, do not update the state
-            resetStartDateChanges(true);
-            return;
-        }
-        const newValidDates = getValidDatesForStart(toReverseOffsetDateTime, deformattedDate, value.to ? toLocalDateTime(value.to) : undefined, disableFutureDates, disablePastDates, disableDatesBefore, disableDatesAfter);
-        const newStateValue = {
-            start: dateFormatter(toReverseOffsetDateTime(newValidDates.start)),
-            end: dateRangeMode ? (newValidDates.end ? dateFormatter(toReverseOffsetDateTime(newValidDates.end)) : "") : value.to || "",
-            startAssistiveText: isBlur && state.currentActiveField === "start" ? AssistiveText.None : undefined,
-            endAssistiveText: isBlur && state.currentActiveField === "start"
-                ? (value.to && newValidDates.end && (newValidDates.end.getTime() !== new Date(toLocalDateTime(value.to)).getTime()) ? AssistiveText.DateAdjusted : AssistiveText.None)
-                : undefined
-        };
-        const startDateToPass = toReverseOffsetDateTime(newValidDates.start).toISOString();
-        const endDateToPass = dateRangeMode ? (newValidDates.end ? toReverseOffsetDateTime(newValidDates.end).toISOString() : undefined) : value.to;
-        currentDateValuesRef.current = { from: startDateToPass, to: endDateToPass };
-        dispatchState({ type: DateInputInnerStateActionType.ChangePeriod, payload: newStateValue });
-        const isDateChanged = value.from !== startDateToPass || value.to !== endDateToPass;
-        isDateChanged && onChange({ from: startDateToPass, to: endDateToPass });
-    }, [dateDeformatter, adjustTime, value.from, value.to, toReverseOffsetDateTime, disableFutureDates, disablePastDates, disableDatesBefore, disableDatesAfter,
-        toLocalDateTime, dateFormatter, dateRangeMode, state.currentActiveField, onChange, resetStartDateChanges]);
-    const startDateChangeOnArrow = useCallback((oldValue, delta) => {
-        let deformattedDate = dateDeformatter(oldValue);
-        deformattedDate.setDate(deformattedDate.getDate() + delta);
-        if (!isValidDate(deformattedDate)) {
-            resetStartDateChanges();
-            return;
-        }
-        deformattedDate = adjustTime(deformattedDate, value.from ? toLocalDateTime(value.from) : undefined);
-        if (isValidationDateError(deformattedDate, toReverseOffsetDateTime, disableFutureDates, disablePastDates, disableDatesBefore, disableDatesAfter)) {
-            // if date is invalid, do not update the state
-            resetStartDateChanges();
-            return;
-        }
-        const newValidDates = getValidDatesForStart(toReverseOffsetDateTime, deformattedDate, value.to ? toLocalDateTime(value.to) : undefined, disableFutureDates, disablePastDates, disableDatesBefore, disableDatesAfter);
-        const newStateValue = {
-            emittedBy: "start",
-            start: dateFormatter(toReverseOffsetDateTime(newValidDates.start)),
-            end: dateRangeMode ? (newValidDates.end ? dateFormatter(toReverseOffsetDateTime(newValidDates.end)) : "") : value.to || "",
-            startAssistiveText: AssistiveText.None,
-            endAssistiveText: (value.to && newValidDates.end && (newValidDates.end.getTime() !== new Date(toLocalDateTime(value.to)).getTime()) ? AssistiveText.DateAdjusted : AssistiveText.None),
-            inputKeyDownBehavior: "start"
-        };
-        const startDateToPass = toReverseOffsetDateTime(newValidDates.start).toISOString();
-        const endDateToPass = dateRangeMode ? (newValidDates.end ? toReverseOffsetDateTime(newValidDates.end).toISOString() : undefined) : value.to;
-        currentDateValuesRef.current = { from: startDateToPass, to: endDateToPass };
-        dispatchState({ type: DateInputInnerStateActionType.ChangePeriod, payload: newStateValue });
-        onChange({ from: startDateToPass, to: endDateToPass });
-        currentSelectedFieldRef.current = startInputRef.current || undefined;
-    }, [dateDeformatter, adjustTime, value.from, value.to, toReverseOffsetDateTime, disableFutureDates, disablePastDates, disableDatesBefore, disableDatesAfter, toLocalDateTime, dateFormatter,
-        dateRangeMode, onChange, resetStartDateChanges]);
-    const startTimeChangeHandler = useCallback((time) => {
+        state.currentActiveField === "start" && dispatchState({
+          type: DateInputInnerStateActionType.ChangeStartAssistiveText,
+          payload: AssistiveText.None
+        });
+        state.currentActiveField === "start" && dispatchState({
+          type: DateInputInnerStateActionType.ChangeInputKeydownBehavior,
+          payload: undefined
+        });
+      }
+      if (e.target instanceof HTMLElement && e.target.tagName === "INPUT" && e.target.getAttribute("id") === state.endDateId) {
         currentSelectedFieldRef.current = undefined;
-        const startDateToCopyTime = time;
-        let newValueFrom = value.from ? toLocalDateTime(value.from) : startDateToCopyTime;
-        newValueFrom = adjustTime(newValueFrom, startDateToCopyTime);
-        if (!isValidDate(newValueFrom)) {
-            resetStartDateChanges();
-            return;
-        }
-        if (isValidationDateError(newValueFrom, toReverseOffsetDateTime, disableFutureDates, disablePastDates, disableDatesBefore, disableDatesAfter)) {
-            const newValidDate = getValidTime(newValueFrom, value.from, disableFutureDates, disablePastDates, disableDatesBefore, disableDatesAfter);
-            if (!newValidDate) {
-                resetStartDateChanges();
-                return;
-            }
-            newValueFrom = newValidDate;
-        }
-        const startEndOrderValid = !dateRangeMode || !value.to ? true : toReverseOffsetDateTime(newValueFrom) <= new Date(value.to);
-        const newStateValue = {
-            start: dateFormatter(toReverseOffsetDateTime(newValueFrom)),
-            end: startEndOrderValid ? (dateRangeMode ? (value.to ? dateFormatter(value.to) : "") : value.to || "") : dateFormatter(toReverseOffsetDateTime(newValueFrom)),
-            startAssistiveText: AssistiveText.None,
-            endAssistiveText: startEndOrderValid ? AssistiveText.None : AssistiveText.TimeAdjusted,
-            nextActiveField: startEndOrderValid ? undefined : "end"
-        };
-        const startDateToPass = toReverseOffsetDateTime(newValueFrom).toISOString();
-        const endDateToPass = startEndOrderValid ? value.to : toReverseOffsetDateTime(newValueFrom).toISOString();
-        currentDateValuesRef.current = { from: startDateToPass, to: endDateToPass };
-        dispatchState({ type: DateInputInnerStateActionType.ChangePeriod, payload: newStateValue });
-        dispatchState({ type: DateInputInnerStateActionType.ChangeStartAssistiveText, payload: AssistiveText.None });
-        onChange({ from: startDateToPass, to: endDateToPass });
-    }, [value.from, value.to, toLocalDateTime, adjustTime, toReverseOffsetDateTime, disableFutureDates, disablePastDates, disableDatesBefore, disableDatesAfter, dateRangeMode,
-        dateFormatter, onChange, resetStartDateChanges]);
-    const resetEndDateChanges = useCallback((resetKeydownBehavior = false) => {
-        dispatchState({ type: DateInputInnerStateActionType.ChangeEndDateText, payload: value.to ? dateFormatter(value.to) : "" });
-        resetKeydownBehavior && dispatchState({ type: DateInputInnerStateActionType.ChangeInputKeydownBehavior, payload: undefined });
-    }, [dateFormatter, value.to]);
-    const endDateChangeHandler = useCallback((e, isBlur = false) => {
+        state.currentActiveField === "end" && dispatchState({
+          type: DateInputInnerStateActionType.ChangeEndAssistiveText,
+          payload: AssistiveText.None
+        });
+        state.currentActiveField === "end" && dispatchState({
+          type: DateInputInnerStateActionType.ChangeInputKeydownBehavior,
+          payload: undefined
+        });
+      }
+    }
+    if (e.key === "Backspace" && e.target instanceof HTMLElement && e.target.tagName === "INPUT") {
+      currentSelectedFieldRef.current = undefined;
+    }
+    if (e.key === "ArrowDown" && state.inputKeyDownBehavior) {
+      if (e.target instanceof HTMLElement && e.target.tagName === "INPUT" && e.target.getAttribute("id") === state.startDateId) {
         const newValue = e.target.value;
-        currentSelectedFieldRef.current = undefined;
-        let deformattedDate = dateDeformatter(newValue);
-        if (!isValidDate(deformattedDate)) {
-            resetEndDateChanges(true);
-            return;
-        }
-        deformattedDate = adjustTime(deformattedDate, value.to ? toLocalDateTime(value.to) : undefined);
-        if (isValidationDateError(deformattedDate, toReverseOffsetDateTime, disableFutureDates, disablePastDates, disableDatesBefore, disableDatesAfter)) {
-            // if date is invalid, do not update the state
-            resetEndDateChanges(true);
-            return;
-        }
-        const newValidDates = getValidDatesForEnd(toReverseOffsetDateTime, deformattedDate, value.from ? toLocalDateTime(value.from) : undefined, disableFutureDates, disablePastDates, disableDatesBefore, disableDatesAfter);
-        const newStateValue = {
-            start: newValidDates.start ? dateFormatter(toReverseOffsetDateTime(newValidDates.start)) : "",
-            end: dateFormatter(toReverseOffsetDateTime(newValidDates.end)),
-            startAssistiveText: isBlur && state.currentActiveField === "end"
-                ? (value.from && newValidDates.start && (newValidDates.start.getTime() !== new Date(toLocalDateTime(value.from)).getTime()) ? AssistiveText.DateAdjusted : AssistiveText.None)
-                : undefined,
-            endAssistiveText: isBlur && state.currentActiveField === "end" ? AssistiveText.None : undefined
-        };
-        const startDateToPass = newValidDates.start ? toReverseOffsetDateTime(newValidDates.start).toISOString() : undefined;
-        const endDateToPass = toReverseOffsetDateTime(newValidDates.end).toISOString();
-        currentDateValuesRef.current = { from: startDateToPass, to: endDateToPass };
-        dispatchState({ type: DateInputInnerStateActionType.ChangePeriod, payload: newStateValue });
-        const isDateChanged = value.from !== startDateToPass || value.to !== endDateToPass;
-        isDateChanged && onChange({ from: startDateToPass, to: endDateToPass });
-    }, [dateDeformatter, adjustTime, value.to, value.from, toReverseOffsetDateTime, disableFutureDates, disablePastDates, disableDatesBefore, disableDatesAfter, toLocalDateTime, dateFormatter,
-        state.currentActiveField, onChange, resetEndDateChanges]);
-    const endDateChangeOnArrow = useCallback((oldValue, delta) => {
-        let deformattedDate = dateDeformatter(oldValue);
-        deformattedDate.setDate(deformattedDate.getDate() + delta);
-        if (!isValidDate(deformattedDate)) {
-            resetEndDateChanges();
-            return;
-        }
-        deformattedDate = adjustTime(deformattedDate, value.to ? toLocalDateTime(value.to) : undefined);
-        if (isValidationDateError(deformattedDate, toReverseOffsetDateTime, disableFutureDates, disablePastDates, disableDatesBefore, disableDatesAfter)) {
-            // if date is invalid, do not update the state
-            resetEndDateChanges();
-            return;
-        }
-        const newValidDates = getValidDatesForEnd(toReverseOffsetDateTime, deformattedDate, value.from ? toLocalDateTime(value.from) : undefined, disableFutureDates, disablePastDates, disableDatesBefore, disableDatesAfter);
-        const newStateValue = {
-            emittedBy: "end",
-            start: newValidDates.start ? dateFormatter(toReverseOffsetDateTime(newValidDates.start)) : "",
-            end: dateFormatter(toReverseOffsetDateTime(newValidDates.end)),
-            startAssistiveText: value.from && newValidDates.start && (newValidDates.start.getTime() !== new Date(toLocalDateTime(value.from)).getTime())
-                ? AssistiveText.DateAdjusted : AssistiveText.None,
-            endAssistiveText: AssistiveText.None,
-            inputKeyDownBehavior: "end"
-        };
-        const startDateToPass = newValidDates.start ? toReverseOffsetDateTime(newValidDates.start).toISOString() : undefined;
-        const endDateToPass = toReverseOffsetDateTime(newValidDates.end).toISOString();
-        currentDateValuesRef.current = { from: startDateToPass, to: endDateToPass };
-        dispatchState({ type: DateInputInnerStateActionType.ChangePeriod, payload: newStateValue });
-        onChange({ from: startDateToPass, to: endDateToPass });
-        currentSelectedFieldRef.current = endInputRef.current || undefined;
-    }, [dateDeformatter, adjustTime, value.to, value.from, toReverseOffsetDateTime, disableFutureDates, disablePastDates, disableDatesBefore, disableDatesAfter,
-        toLocalDateTime, dateFormatter, onChange, resetEndDateChanges]);
-    const endTimeChangeHandler = useCallback((time) => {
-        const endDateToCopyTime = time;
-        currentSelectedFieldRef.current = undefined;
-        let newValueTo = value.to ? toLocalDateTime(value.to) : endDateToCopyTime;
-        newValueTo = adjustTime(newValueTo, endDateToCopyTime);
-        if (!isValidDate(newValueTo)) {
-            resetEndDateChanges();
-            return;
-        }
-        if (isValidationDateError(newValueTo, toReverseOffsetDateTime, disableFutureDates, disablePastDates, disableDatesBefore, disableDatesAfter)) {
-            const newValidDate = getValidTime(newValueTo, value.to, disableFutureDates, disablePastDates, disableDatesBefore, disableDatesAfter);
-            if (!newValidDate) {
-                resetEndDateChanges();
-                return;
-            }
-            newValueTo = newValidDate;
-            return;
-        }
-        const startEndOrderValid = !dateRangeMode || !value.from ? true : new Date(value.from) <= toReverseOffsetDateTime(newValueTo);
-        const newStateValue = {
-            start: startEndOrderValid ? (value.from ? dateFormatter(toReverseOffsetDateTime(value.from)) : "") : dateFormatter(toReverseOffsetDateTime(newValueTo)),
-            end: dateFormatter(toReverseOffsetDateTime(newValueTo)),
-            startAssistiveText: startEndOrderValid ? AssistiveText.None : AssistiveText.TimeAdjusted,
-            endAssistiveText: AssistiveText.None,
-            nextActiveField: startEndOrderValid ? undefined : "start"
-        };
-        const startDateToPass = startEndOrderValid ? value.from : toReverseOffsetDateTime(newValueTo).toISOString();
-        const endDateToPass = toReverseOffsetDateTime(newValueTo).toISOString();
-        currentDateValuesRef.current = { from: startDateToPass, to: endDateToPass };
-        dispatchState({ type: DateInputInnerStateActionType.ChangePeriod, payload: newStateValue });
-        dispatchState({ type: DateInputInnerStateActionType.ChangeEndAssistiveText, payload: AssistiveText.None });
-        onChange({ from: startDateToPass, to: endDateToPass });
-    }, [value.to, value.from, toLocalDateTime, adjustTime, toReverseOffsetDateTime, disableFutureDates, disablePastDates, disableDatesBefore, disableDatesAfter, dateRangeMode,
-        dateFormatter, onChange, resetEndDateChanges]);
-    const getCurrentActiveField = useCallback(() => state.currentActiveField, [state.currentActiveField]);
-    // eslint-disable-next-line complexity
-    const calendarChangeHandler = useCallback((range, currentActiveField) => {
-        currentSelectedFieldRef.current = dateRangeMode ? undefined : startInputRef.current || undefined;
-        let currentStartDate = range.from && new Date(range.from);
-        const startDateToCopyTime = value.from ? toLocalDateTime(value.from) : (timePickerValueFromPrev || new Date(toDayStart(toLocalDateTime(new Date()).toISOString())));
-        let currentEndDate = range.to && new Date(range.to);
-        const endDateToCopyTime = value.to ? toLocalDateTime(value.to) : (timePickerValueToPrev || new Date(toDayStart(toLocalDateTime(new Date()).toISOString())));
-        let rangeFrom = range.from;
-        let rangeTo = range.to;
-        if (currentStartDate) {
-            currentStartDate = adjustTime(currentStartDate, startDateToCopyTime);
-            const isValidationError = isValidationDateError(currentStartDate, toReverseOffsetDateTime, disableFutureDates, disablePastDates, disableDatesBefore, disableDatesAfter);
-            rangeFrom = toReverseOffsetDateTime(isValidationError ? new Date(range.from) : currentStartDate).toISOString();
-        }
-        if (currentEndDate) {
-            currentEndDate = adjustTime(currentEndDate, endDateToCopyTime);
-            const isValidationError = isValidationDateError(currentEndDate, toReverseOffsetDateTime, disableFutureDates, disablePastDates, disableDatesBefore, disableDatesAfter);
-            rangeTo = toReverseOffsetDateTime(isValidationError ? new Date(range.to) : currentEndDate).toISOString();
-        }
-        if (rangeFrom && rangeTo && new Date(rangeFrom) > new Date(rangeTo)) {
-            range.from = !currentActiveField || currentActiveField === "start" ? rangeFrom : rangeTo;
-            range.to = currentActiveField && currentActiveField === "end" ? rangeTo : rangeFrom;
-        }
-        else {
-            range.from = rangeFrom || (dateRangeMode ? rangeTo : undefined);
-            range.to = rangeTo || (dateRangeMode ? rangeFrom : undefined);
-        }
-        const newStateValue = {
-            start: range.from ? dateFormatter(range.from) : "",
-            end: range.to ? dateFormatter(range.to) : "",
-            hasAssistiveText: currentActiveField === "start" ? range.to !== value.to : range.from !== value.from
-        };
-        currentDateValuesRef.current = Object.assign({}, range);
-        dispatchState({ type: DateInputInnerStateActionType.ChangeCalendarValue, payload: newStateValue });
-        onChange(range);
-    }, [dateRangeMode, value.from, value.to, toLocalDateTime, timePickerValueFromPrev, timePickerValueToPrev, dateFormatter, onChange, adjustTime, toReverseOffsetDateTime,
-        disableFutureDates, disablePastDates, disableDatesBefore, disableDatesAfter]);
-    const handleSetStartDateText = useCallback((e) => {
-        dispatchState({ type: DateInputInnerStateActionType.ChangeStartDateText, payload: e.target.value });
-    }, []);
-    const handleSetEndDateText = useCallback((e) => {
-        dispatchState({ type: DateInputInnerStateActionType.ChangeEndDateText, payload: e.target.value });
-    }, []);
-    // eslint-disable-next-line complexity
-    const handleOnClick = useCallback((e) => {
-        if (e.target instanceof HTMLElement && e.target.tagName === "INPUT" && e.target.getAttribute("id") === state.startDateId) {
-            state.currentActiveField === "end" && dispatchState({ type: DateInputInnerStateActionType.ChangeActiveField, payload: "start" });
-            state.currentActiveField === "start" && dispatchState({ type: DateInputInnerStateActionType.ChangeInputKeydownBehavior, payload: undefined });
-        }
-        if (e.target instanceof HTMLElement && e.target.tagName === "INPUT" && e.target.getAttribute("id") === state.endDateId) {
-            state.currentActiveField === "start" && dispatchState({ type: DateInputInnerStateActionType.ChangeActiveField, payload: "end" });
-            state.currentActiveField === "end" && dispatchState({ type: DateInputInnerStateActionType.ChangeInputKeydownBehavior, payload: undefined });
-        }
-        let targetEl = e.target === e.currentTarget ? undefined : e.target;
-        while (targetEl) {
-            if (targetEl instanceof HTMLElement && targetEl.tagName === "BUTTON" && targetEl.getAttribute("data-time") === state.startDateId) {
-                targetEl = undefined;
-            }
-            if (targetEl instanceof HTMLElement && targetEl.tagName === "BUTTON" && targetEl.getAttribute("data-time") === state.endDateId) {
-                targetEl = undefined;
-            }
-            targetEl = !targetEl || targetEl.parentNode === e.currentTarget ? undefined : targetEl.parentNode;
-        }
-    }, [state.currentActiveField, state.endDateId, state.startDateId]);
-    // eslint-disable-next-line complexity
-    const handleOnKeyDown = useCallback((e) => {
-        if (e.key === "Enter") {
-            if (e.target instanceof HTMLElement && e.target.tagName === "INPUT" && e.target.getAttribute("id") === state.startDateId) {
-                state.currentActiveField === "start" && startDateChangeHandler(e, true);
-                dispatchState({ type: DateInputInnerStateActionType.ToggleActiveField });
-            }
-            if (e.target instanceof HTMLElement && e.target.tagName === "INPUT" && e.target.getAttribute("id") === state.endDateId) {
-                state.currentActiveField === "end" && endDateChangeHandler(e, true);
-                dispatchState({ type: DateInputInnerStateActionType.ToggleActiveField });
-            }
-        }
-        if (e.key === "Tab") {
-            if (e.target instanceof HTMLElement && e.target.tagName === "INPUT" && e.target.getAttribute("id") === state.startDateId) {
-                currentSelectedFieldRef.current = undefined;
-                state.currentActiveField === "start" && dispatchState({ type: DateInputInnerStateActionType.ChangeStartAssistiveText, payload: AssistiveText.None });
-                state.currentActiveField === "start" && dispatchState({ type: DateInputInnerStateActionType.ChangeInputKeydownBehavior, payload: undefined });
-            }
-            if (e.target instanceof HTMLElement && e.target.tagName === "INPUT" && e.target.getAttribute("id") === state.endDateId) {
-                currentSelectedFieldRef.current = undefined;
-                state.currentActiveField === "end" && dispatchState({ type: DateInputInnerStateActionType.ChangeEndAssistiveText, payload: AssistiveText.None });
-                state.currentActiveField === "end" && dispatchState({ type: DateInputInnerStateActionType.ChangeInputKeydownBehavior, payload: undefined });
-            }
-        }
-        if (e.key === "Backspace" && e.target instanceof HTMLElement && e.target.tagName === "INPUT") {
-            currentSelectedFieldRef.current = undefined;
-        }
-        if (e.key === "ArrowDown" && state.inputKeyDownBehavior) {
-            if (e.target instanceof HTMLElement && e.target.tagName === "INPUT" && e.target.getAttribute("id") === state.startDateId) {
-                const newValue = e.target.value;
-                startDateChangeOnArrow(newValue, 7);
-            }
-            if (e.target instanceof HTMLElement && e.target.tagName === "INPUT" && e.target.getAttribute("id") === state.endDateId) {
-                const newValue = e.target.value;
-                endDateChangeOnArrow(newValue, 7);
-            }
-        }
-        if (e.key === "ArrowUp" && state.inputKeyDownBehavior) {
-            if (e.target instanceof HTMLElement && e.target.tagName === "INPUT" && e.target.getAttribute("id") === state.startDateId) {
-                const newValue = e.target.value;
-                startDateChangeOnArrow(newValue, -7);
-            }
-            if (e.target instanceof HTMLElement && e.target.tagName === "INPUT" && e.target.getAttribute("id") === state.endDateId) {
-                const newValue = e.target.value;
-                endDateChangeOnArrow(newValue, -7);
-            }
-        }
-        if (e.key === "ArrowRight" && state.inputKeyDownBehavior) {
-            if (e.target instanceof HTMLElement && e.target.tagName === "INPUT" && e.target.getAttribute("id") === state.startDateId) {
-                const newValue = e.target.value;
-                startDateChangeOnArrow(newValue, 1);
-            }
-            if (e.target instanceof HTMLElement && e.target.tagName === "INPUT" && e.target.getAttribute("id") === state.endDateId) {
-                const newValue = e.target.value;
-                endDateChangeOnArrow(newValue, 1);
-            }
-        }
-        if (e.key === "ArrowLeft" && state.inputKeyDownBehavior) {
-            if (e.target instanceof HTMLElement && e.target.tagName === "INPUT" && e.target.getAttribute("id") === state.startDateId) {
-                const newValue = e.target.value;
-                startDateChangeOnArrow(newValue, -1);
-            }
-            if (e.target instanceof HTMLElement && e.target.tagName === "INPUT" && e.target.getAttribute("id") === state.endDateId) {
-                const newValue = e.target.value;
-                endDateChangeOnArrow(newValue, -1);
-            }
-        }
-    }, [state.startDateId, state.endDateId, state.currentActiveField, state.inputKeyDownBehavior, startDateChangeHandler, endDateChangeHandler, startDateChangeOnArrow, endDateChangeOnArrow]);
-    const rangeArgs = useMemo(() => ({
-        onClick: handleOnClick,
-        onKeyDown: handleOnKeyDown
-    }), [handleOnClick, handleOnKeyDown]);
-    useEffect(() => {
-        var _a, _b, _c, _d;
-        if (state.currentActiveField === "start") {
-            (_a = startInputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
-            state.inputKeyDownBehavior === "start" && ((_b = startInputRef.current) === null || _b === void 0 ? void 0 : _b.select());
-        }
-        if (state.currentActiveField === "end") {
-            (_c = endInputRef.current) === null || _c === void 0 ? void 0 : _c.focus();
-            state.inputKeyDownBehavior === "end" && ((_d = endInputRef.current) === null || _d === void 0 ? void 0 : _d.select());
-        }
-    }, [state.currentActiveField, state.inputKeyDownBehavior]);
-    useEffect(() => {
-        var _a, _b;
-        if (state.inputKeyDownBehavior === "start") {
-            (_a = startInputRef.current) === null || _a === void 0 ? void 0 : _a.select();
-        }
-        if (state.inputKeyDownBehavior === "end") {
-            (_b = endInputRef.current) === null || _b === void 0 ? void 0 : _b.select();
-        }
-    }, [state.inputKeyDownBehavior]);
-    const handleBlurStart = useCallback((e) => {
-        currentSelectedFieldRef.current = undefined;
-        startDateChangeHandler(e, true);
-    }, [startDateChangeHandler]);
-    const handleBlurEnd = useCallback((e) => {
-        currentSelectedFieldRef.current = undefined;
-        endDateChangeHandler(e, true);
-    }, [endDateChangeHandler]);
-    const handleTodayButtonClick = useCallback((e) => {
-        const currentActiveField = getCurrentActiveField();
-        let newValidDates;
-        if (currentActiveField === "start") {
-            const todayFromWithTime = adjustTime(toLocalDateTime(todayFrom), value.from ? toLocalDateTime(value.from) : undefined);
-            newValidDates = getValidDatesForStart(toReverseOffsetDateTime, todayFromWithTime, value.to ? toLocalDateTime(value.to) : undefined, disableFutureDates, disablePastDates, disableDatesBefore, disableDatesAfter);
-        }
-        else {
-            const todayToWithTime = adjustTime(toLocalDateTime(todayTo), value.to ? toLocalDateTime(value.to) : undefined);
-            newValidDates = getValidDatesForEnd(toReverseOffsetDateTime, todayToWithTime, value.from ? toLocalDateTime(value.from) : undefined, disableFutureDates, disablePastDates, disableDatesBefore, disableDatesAfter);
-        }
-        const startDateToPass = newValidDates.start ? toReverseOffsetDateTime(newValidDates.start).toISOString() : undefined;
-        const endDateToPass = newValidDates.end ? toReverseOffsetDateTime(newValidDates.end).toISOString() : undefined;
-        const newStateValue = {
-            start: newValidDates.start ? dateFormatter(toReverseOffsetDateTime(newValidDates.start)) : "",
-            end: newValidDates.end ? dateFormatter(toReverseOffsetDateTime(newValidDates.end)) : "",
-            startAssistiveText: currentActiveField === "end" && startDateToPass !== value.from ? AssistiveText.DateAdjusted : AssistiveText.None,
-            endAssistiveText: currentActiveField === "start" && endDateToPass !== value.to ? AssistiveText.DateAdjusted : AssistiveText.None
-        };
-        currentSelectedFieldRef.current = dateRangeMode ? undefined : startInputRef.current || undefined;
-        e.target.blur();
-        currentDateValuesRef.current = { from: startDateToPass, to: dateRangeMode ? endDateToPass : value.to };
-        dispatchState({ type: DateInputInnerStateActionType.ChangePeriod, payload: newStateValue });
-        dispatchState({ type: DateInputInnerStateActionType.ChangeActiveField, payload: currentActiveField === "start" ? "end" : "start" });
-        onChange({ from: startDateToPass, to: dateRangeMode ? endDateToPass : value.to });
-    }, [adjustTime, dateFormatter, dateRangeMode, disableDatesAfter, disableDatesBefore, disableFutureDates, disablePastDates, getCurrentActiveField, onChange, toLocalDateTime,
-        toReverseOffsetDateTime, todayFrom, todayTo, value.from, value.to]);
-    const memoizedStartInputComponent = useMemo(() => _jsx(DateInputInnerControlBlock, { className: "zen-date-input-inner__control-start", title: title || title === undefined ? title || translate(dateRangeMode ? "Start date" : "Pick a date") : undefined, id: state.startDateId, ref: startInputRef, dateText: state.startDateText, placeholder: dateFormat, handleSetDateText: handleSetStartDateText, onBlurDateChangeHandler: handleBlurStart, requireSelection: requireSelection, selectTime: selectTime, timePickerValue: timePickerValueFrom || timePickerValueFromPrev, isMobileView: isMobileView, timeChangeHandler: startTimeChangeHandler, isActiveField: dateRangeMode ? state.currentActiveField === "start" : false, assistiveText: dateRangeMode ? getAssistiveText(state.startAssistiveText, true) : undefined, isSelected: state.currentActiveField === "start" && state.inputKeyDownBehavior === "start" }), [title, translate, dateRangeMode, state.startDateId, state.startDateText, state.currentActiveField, state.startAssistiveText, state.inputKeyDownBehavior, dateFormat,
-        handleSetStartDateText, handleBlurStart, requireSelection, selectTime, timePickerValueFrom, timePickerValueFromPrev, isMobileView, startTimeChangeHandler, getAssistiveText]);
-    const memoizedEndInputComponent = useMemo(() => dateRangeMode
-        ? _jsxs(_Fragment, { children: [_jsx("div", { className: "zen-date-input-inner__separator" }), _jsx(DateInputInnerControlBlock, { className: "zen-date-input-inner__control-end", title: translate("End date"), id: state.endDateId, ref: endInputRef, dateText: state.endDateText, placeholder: dateFormat, handleSetDateText: handleSetEndDateText, onBlurDateChangeHandler: handleBlurEnd, requireSelection: requireSelection, selectTime: selectTime, timePickerValue: timePickerValueTo || timePickerValueToPrev, isMobileView: isMobileView, timeChangeHandler: endTimeChangeHandler, isActiveField: state.currentActiveField === "end", assistiveText: getAssistiveText(state.endAssistiveText, false), isSelected: state.currentActiveField === "end" && state.inputKeyDownBehavior === "end" })] }) : null, [dateRangeMode, translate, state.endDateId, state.endDateText, state.currentActiveField, state.endAssistiveText, state.inputKeyDownBehavior, dateFormat, handleSetEndDateText, handleBlurEnd,
-        requireSelection, selectTime, timePickerValueTo, timePickerValueToPrev, isMobileView, endTimeChangeHandler, getAssistiveText]);
-    (_a = currentSelectedFieldRef.current) === null || _a === void 0 ? void 0 : _a.select();
-    return _jsxs("div", { className: classNames(["zen-date-input-inner", driveClassName || "", isMobileView ? "zen-date-input-inner--mobile-view" : ""]), children: [_jsxs("div", Object.assign({ className: "zen-date-input-inner__controls-block" }, rangeArgs, { children: [memoizedStartInputComponent, memoizedEndInputComponent] })), _jsx("div", { className: "zen-date-input-inner__calendar", children: _jsx(Calendar, { id: id, value: calendarValue, onChange: calendarChangeHandler, dateRangeMode: dateRangeMode, disableFutureDates: disableFutureDates, disablePastDates: disablePastDates, disableDatesAfter: disableDatesAfterValue, disableDatesBefore: disableDatesBeforeValue, startDayOfWeek: startDayOfWeek, yearRange: yearRange, isMobileView: isMobileView, getCurrentActiveField: dateRangeMode ? getCurrentActiveField : undefined, onTodayButtonClick: isTodayDisabled ? undefined : handleTodayButtonClick }) })] });
+        startDateChangeOnArrow(newValue, 7);
+      }
+      if (e.target instanceof HTMLElement && e.target.tagName === "INPUT" && e.target.getAttribute("id") === state.endDateId) {
+        const newValue = e.target.value;
+        endDateChangeOnArrow(newValue, 7);
+      }
+    }
+    if (e.key === "ArrowUp" && state.inputKeyDownBehavior) {
+      if (e.target instanceof HTMLElement && e.target.tagName === "INPUT" && e.target.getAttribute("id") === state.startDateId) {
+        const newValue = e.target.value;
+        startDateChangeOnArrow(newValue, -7);
+      }
+      if (e.target instanceof HTMLElement && e.target.tagName === "INPUT" && e.target.getAttribute("id") === state.endDateId) {
+        const newValue = e.target.value;
+        endDateChangeOnArrow(newValue, -7);
+      }
+    }
+    if (e.key === "ArrowRight" && state.inputKeyDownBehavior) {
+      if (e.target instanceof HTMLElement && e.target.tagName === "INPUT" && e.target.getAttribute("id") === state.startDateId) {
+        const newValue = e.target.value;
+        startDateChangeOnArrow(newValue, 1);
+      }
+      if (e.target instanceof HTMLElement && e.target.tagName === "INPUT" && e.target.getAttribute("id") === state.endDateId) {
+        const newValue = e.target.value;
+        endDateChangeOnArrow(newValue, 1);
+      }
+    }
+    if (e.key === "ArrowLeft" && state.inputKeyDownBehavior) {
+      if (e.target instanceof HTMLElement && e.target.tagName === "INPUT" && e.target.getAttribute("id") === state.startDateId) {
+        const newValue = e.target.value;
+        startDateChangeOnArrow(newValue, -1);
+      }
+      if (e.target instanceof HTMLElement && e.target.tagName === "INPUT" && e.target.getAttribute("id") === state.endDateId) {
+        const newValue = e.target.value;
+        endDateChangeOnArrow(newValue, -1);
+      }
+    }
+  }, [state.startDateId, state.endDateId, state.currentActiveField, state.inputKeyDownBehavior, startDateChangeHandler, endDateChangeHandler, startDateChangeOnArrow, endDateChangeOnArrow]);
+  const rangeArgs = useMemo(() => ({
+    onClick: handleOnClick,
+    onKeyDown: handleOnKeyDown
+  }), [handleOnClick, handleOnKeyDown]);
+  useEffect(() => {
+    var _a, _b, _c, _d;
+    if (state.currentActiveField === "start") {
+      (_a = startInputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+      state.inputKeyDownBehavior === "start" && ((_b = startInputRef.current) === null || _b === void 0 ? void 0 : _b.select());
+    }
+    if (state.currentActiveField === "end") {
+      (_c = endInputRef.current) === null || _c === void 0 ? void 0 : _c.focus();
+      state.inputKeyDownBehavior === "end" && ((_d = endInputRef.current) === null || _d === void 0 ? void 0 : _d.select());
+    }
+  }, [state.currentActiveField, state.inputKeyDownBehavior]);
+  useEffect(() => {
+    var _a, _b;
+    if (state.inputKeyDownBehavior === "start") {
+      (_a = startInputRef.current) === null || _a === void 0 ? void 0 : _a.select();
+    }
+    if (state.inputKeyDownBehavior === "end") {
+      (_b = endInputRef.current) === null || _b === void 0 ? void 0 : _b.select();
+    }
+  }, [state.inputKeyDownBehavior]);
+  const handleBlurStart = useCallback(e => {
+    currentSelectedFieldRef.current = undefined;
+    startDateChangeHandler(e, true);
+  }, [startDateChangeHandler]);
+  const handleBlurEnd = useCallback(e => {
+    currentSelectedFieldRef.current = undefined;
+    endDateChangeHandler(e, true);
+  }, [endDateChangeHandler]);
+  const handleTodayButtonClick = useCallback(e => {
+    const currentActiveField = getCurrentActiveField();
+    let newValidDates;
+    if (currentActiveField === "start") {
+      const todayFromWithTime = adjustTime(toLocalDateTime(todayFrom), value.from ? toLocalDateTime(value.from) : undefined);
+      newValidDates = getValidDatesForStart(toReverseOffsetDateTime, todayFromWithTime, value.to ? toLocalDateTime(value.to) : undefined, disableFutureDates, disablePastDates, disableDatesBefore, disableDatesAfter);
+    } else {
+      const todayToWithTime = adjustTime(toLocalDateTime(todayTo), value.to ? toLocalDateTime(value.to) : undefined);
+      newValidDates = getValidDatesForEnd(toReverseOffsetDateTime, todayToWithTime, value.from ? toLocalDateTime(value.from) : undefined, disableFutureDates, disablePastDates, disableDatesBefore, disableDatesAfter);
+    }
+    const startDateToPass = newValidDates.start ? toReverseOffsetDateTime(newValidDates.start).toISOString() : undefined;
+    const endDateToPass = newValidDates.end ? toReverseOffsetDateTime(newValidDates.end).toISOString() : undefined;
+    const newStateValue = {
+      start: newValidDates.start ? dateFormatter(toReverseOffsetDateTime(newValidDates.start)) : "",
+      end: newValidDates.end ? dateFormatter(toReverseOffsetDateTime(newValidDates.end)) : "",
+      startAssistiveText: currentActiveField === "end" && startDateToPass !== value.from ? AssistiveText.DateAdjusted : AssistiveText.None,
+      endAssistiveText: currentActiveField === "start" && endDateToPass !== value.to ? AssistiveText.DateAdjusted : AssistiveText.None
+    };
+    currentSelectedFieldRef.current = dateRangeMode ? undefined : startInputRef.current || undefined;
+    e.target.blur();
+    currentDateValuesRef.current = {
+      from: startDateToPass,
+      to: dateRangeMode ? endDateToPass : value.to
+    };
+    dispatchState({
+      type: DateInputInnerStateActionType.ChangePeriod,
+      payload: newStateValue
+    });
+    dispatchState({
+      type: DateInputInnerStateActionType.ChangeActiveField,
+      payload: currentActiveField === "start" ? "end" : "start"
+    });
+    onChange({
+      from: startDateToPass,
+      to: dateRangeMode ? endDateToPass : value.to
+    });
+  }, [adjustTime, dateFormatter, dateRangeMode, disableDatesAfter, disableDatesBefore, disableFutureDates, disablePastDates, getCurrentActiveField, onChange, toLocalDateTime, toReverseOffsetDateTime, todayFrom, todayTo, value.from, value.to]);
+  const memoizedStartInputComponent = useMemo(() => _jsx(DateInputInnerControlBlock, {
+    className: "zen-date-input-inner__control-start",
+    title: title || title === undefined ? title || (dateRangeMode ? translate("Start date") : translate("Pick a date")) : undefined,
+    id: state.startDateId,
+    ref: startInputRef,
+    dateText: state.startDateText,
+    placeholder: dateFormat,
+    handleSetDateText: handleSetStartDateText,
+    onBlurDateChangeHandler: handleBlurStart,
+    requireSelection: requireSelection,
+    selectTime: selectTime,
+    timePickerValue: timePickerValueFrom || timePickerValueFromPrev,
+    isMobileView: isMobileView,
+    timeChangeHandler: startTimeChangeHandler,
+    isActiveField: dateRangeMode ? state.currentActiveField === "start" : false,
+    assistiveText: dateRangeMode ? getAssistiveText(state.startAssistiveText, true) : undefined,
+    isSelected: state.currentActiveField === "start" && state.inputKeyDownBehavior === "start"
+  }), [title, translate, dateRangeMode, state.startDateId, state.startDateText, state.currentActiveField, state.startAssistiveText, state.inputKeyDownBehavior, dateFormat, handleSetStartDateText, handleBlurStart, requireSelection, selectTime, timePickerValueFrom, timePickerValueFromPrev, isMobileView, startTimeChangeHandler, getAssistiveText]);
+  const memoizedEndInputComponent = useMemo(() => dateRangeMode ? _jsxs(_Fragment, {
+    children: [_jsx("div", {
+      className: "zen-date-input-inner__separator"
+    }), _jsx(DateInputInnerControlBlock, {
+      className: "zen-date-input-inner__control-end",
+      title: translate("End date"),
+      id: state.endDateId,
+      ref: endInputRef,
+      dateText: state.endDateText,
+      placeholder: dateFormat,
+      handleSetDateText: handleSetEndDateText,
+      onBlurDateChangeHandler: handleBlurEnd,
+      requireSelection: requireSelection,
+      selectTime: selectTime,
+      timePickerValue: timePickerValueTo || timePickerValueToPrev,
+      isMobileView: isMobileView,
+      timeChangeHandler: endTimeChangeHandler,
+      isActiveField: state.currentActiveField === "end",
+      assistiveText: getAssistiveText(state.endAssistiveText, false),
+      isSelected: state.currentActiveField === "end" && state.inputKeyDownBehavior === "end"
+    })]
+  }) : null, [dateRangeMode, translate, state.endDateId, state.endDateText, state.currentActiveField, state.endAssistiveText, state.inputKeyDownBehavior, dateFormat, handleSetEndDateText, handleBlurEnd, requireSelection, selectTime, timePickerValueTo, timePickerValueToPrev, isMobileView, endTimeChangeHandler, getAssistiveText]);
+  (_a = currentSelectedFieldRef.current) === null || _a === void 0 ? void 0 : _a.select();
+  return _jsxs("div", {
+    className: classNames(["zen-date-input-inner", driveClassName || "", isMobileView ? "zen-date-input-inner--mobile-view" : ""]),
+    children: [_jsxs("div", Object.assign({
+      className: "zen-date-input-inner__controls-block"
+    }, rangeArgs, {
+      children: [memoizedStartInputComponent, memoizedEndInputComponent]
+    })), _jsx("div", {
+      className: "zen-date-input-inner__calendar",
+      children: _jsx(Calendar, {
+        id: id,
+        value: calendarValue,
+        onChange: calendarChangeHandler,
+        dateRangeMode: dateRangeMode,
+        disableFutureDates: disableFutureDates,
+        disablePastDates: disablePastDates,
+        disableDatesAfter: disableDatesAfterValue,
+        disableDatesBefore: disableDatesBeforeValue,
+        startDayOfWeek: startDayOfWeek,
+        yearRange: yearRange,
+        isMobileView: isMobileView,
+        getCurrentActiveField: dateRangeMode ? getCurrentActiveField : undefined,
+        onTodayButtonClick: isTodayDisabled ? undefined : handleTodayButtonClick
+      })
+    })]
+  });
 };
-export const TRANSLATIONS = [
-    "Pick a date",
-    "Start date",
-    "End date",
-    "Start date has been adjusted.",
-    "End date has been adjusted.",
-    "Start time has been adjusted.",
-    "End time has been adjusted."
-];
+export const TRANSLATIONS = ["Pick a date", "Start date", "End date", "Start date has been adjusted.", "End date has been adjusted.", "Start time has been adjusted.", "End time has been adjusted."];