@geotab/zenith 1.15.4 → 1.17.0-beta.0

package/dist/dateInputInner/dateInputInner.js

@@ -10,21 +10,53 @@ const useDriveClassName_1 = require("../utils/theme/useDriveClassName");
 const classNames_1 = require("../commonHelpers/classNames/classNames");
 const dateInputInnerControlBlock_1 = require("./dateInputInnerControlBlock");
 const userFormatContext_1 = require("../utils/userFormat/userFormatContext");
+const dateInputInnerReducer_1 = require("./dateInputInnerReducer");
+const useTodayButton_1 = require("../utils/dateInputUtils/useTodayButton");
 const DateInputInner = ({ id, value, dateFormatter, dateDeformatter, dateFormat, onChange, dateRangeMode, selectTime, disableFutureDates, disablePastDates, disableDatesAfter, disableDatesBefore, startDayOfWeek, yearRange, title, isMobileView, requireSelection = false }) => {
+    var _a;
     const { translate } = (0, useLanguage_1.useLanguage)();
     const { toLocalDateTime, toReverseOffsetDateTime } = (0, react_1.useContext)(userFormatContext_1.userFormatContext);
+    const { isTodayDisabled, todayFrom, todayTo } = (0, useTodayButton_1.useTodayButton)(dateRangeMode, disableFutureDates, disablePastDates, disableDatesBefore, disableDatesAfter);
     const driveClassName = (0, useDriveClassName_1.useDriveClassName)("zen-date-input-inner");
-    const startDateId = `${id}-start`;
-    const [startDateText, setStartDateText] = (0, react_1.useState)(value.from ? dateFormatter(value.from) : "");
-    const previousActiveElement = (0, react_1.useRef)(null);
+    const [state, dispatchState] = (0, react_1.useReducer)(dateInputInnerReducer_1.dateInputInnerReducer, (0, dateInputInnerReducer_1.getInitialDateInputInnerState)(id, value.from ? dateFormatter(value.from) : "", value.to ? dateFormatter(value.to) : "", dateRangeMode));
+    const currentDateValuesRef = (0, react_1.useRef)({ from: value.from, to: value.to });
+    const currentSelectedFieldRef = (0, react_1.useRef)(undefined);
+    const startInputRef = (0, react_1.useRef)(null);
+    const endInputRef = (0, react_1.useRef)(null);
     (0, react_1.useEffect)(() => {
-        setStartDateText(value.from ? dateFormatter(value.from) : "");
+        dispatchState({ type: dateInputInnerReducer_1.DateInputInnerStateActionType.ChangeStartDateText, payload: value.from ? dateFormatter(value.from) : "" });
     }, [value.from, dateFormatter]);
-    const endDateId = `${id}-end`;
-    const [endDateText, setEndDateText] = (0, react_1.useState)(value.to ? dateFormatter(value.to) : "");
     (0, react_1.useEffect)(() => {
-        setEndDateText(value.to ? dateFormatter(value.to) : "");
+        dispatchState({ type: dateInputInnerReducer_1.DateInputInnerStateActionType.ChangeEndDateText, payload: value.to ? dateFormatter(value.to) : "" });
     }, [value.to, dateFormatter]);
+    (0, react_1.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: dateInputInnerReducer_1.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]);
+    (0, react_1.useEffect)(() => {
+        dispatchState({ type: dateInputInnerReducer_1.DateInputInnerStateActionType.ChangeDateRangeMode, payload: dateRangeMode || false });
+    }, [dateRangeMode]);
+    (0, react_1.useEffect)(() => {
+        if (startInputRef.current) {
+            startInputRef.current.focus();
+            startInputRef.current.select();
+        }
+    }, [startInputRef]);
+    const getAssistiveText = (0, react_1.useCallback)((txtKey, isStart) => {
+        if (txtKey === dateInputInnerReducer_1.AssistiveText.DateAdjusted) {
+            return translate(isStart ? "Start date has been adjusted." : "End date has been adjusted.");
+        }
+        if (txtKey === dateInputInnerReducer_1.AssistiveText.TimeAdjusted) {
+            return translate(isStart ? "Start time has been adjusted." : "End time has been adjusted.");
+        }
+        return undefined;
+    }, [translate]);
     const calendarValue = (0, react_1.useMemo)(() => ({ from: value.from ? toLocalDateTime(value.from).toISOString() : undefined, to: value.to ? toLocalDateTime(value.to).toISOString() : undefined }), [toLocalDateTime, value.from, value.to]);
     const disableDatesBeforeValue = (0, react_1.useMemo)(() => disableDatesBefore ? toLocalDateTime(disableDatesBefore).toISOString() : undefined, [toLocalDateTime, disableDatesBefore]);
     const disableDatesAfterValue = (0, react_1.useMemo)(() => disableDatesAfter ? toLocalDateTime(disableDatesAfter).toISOString() : undefined, [toLocalDateTime, disableDatesAfter]);
@@ -42,154 +74,421 @@ const DateInputInner = ({ id, value, dateFormatter, dateDeformatter, dateFormat,
             setTimePickerValueToPrev(timePickerValueTo);
         }
     }, [timePickerValueTo]);
-    const startDateChangeHandler = (0, react_1.useCallback)(e => {
+    const resetStartDateChanges = (0, react_1.useCallback)((resetKeydownBehavior = false) => {
+        dispatchState({ type: dateInputInnerReducer_1.DateInputInnerStateActionType.ChangeStartDateText, payload: value.from ? dateFormatter(value.from) : "" });
+        resetKeydownBehavior && dispatchState({ type: dateInputInnerReducer_1.DateInputInnerStateActionType.ChangeInputKeydownBehavior, payload: undefined });
+    }, [dateFormatter, value.from]);
+    const adjustTime = (0, react_1.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 = (0, react_1.useCallback)((e, isBlur = false) => {
         const newValue = e.target.value;
-        const deformattedDate = dateDeformatter(newValue);
+        currentSelectedFieldRef.current = undefined;
+        let deformattedDate = dateDeformatter(newValue);
         if (!(0, dateUtils_1.isValidDate)(deformattedDate)) {
-            setStartDateText(value.from ? dateFormatter(value.from) : "");
+            resetStartDateChanges(true);
             return;
         }
-        if (value.from) {
-            const dateLike = toLocalDateTime(value.from);
-            deformattedDate.setHours(dateLike.getHours());
-            deformattedDate.setMinutes(dateLike.getMinutes());
-            deformattedDate.setSeconds(dateLike.getSeconds());
-        }
+        deformattedDate = adjustTime(deformattedDate, value.from ? toLocalDateTime(value.from) : undefined);
         if ((0, dateUtils_1.isValidationDateError)(deformattedDate, toReverseOffsetDateTime, disableFutureDates, disablePastDates, disableDatesBefore, disableDatesAfter)) {
             // if date is invalid, do not update the state
-            setStartDateText(value.from ? dateFormatter(value.from) : "");
+            resetStartDateChanges(true);
+            return;
+        }
+        const newValidDates = (0, dateUtils_1.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" ? dateInputInnerReducer_1.AssistiveText.None : undefined,
+            endAssistiveText: isBlur && state.currentActiveField === "start"
+                ? (value.to && newValidDates.end && (newValidDates.end.getTime() !== new Date(toLocalDateTime(value.to)).getTime()) ? dateInputInnerReducer_1.AssistiveText.DateAdjusted : dateInputInnerReducer_1.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: dateInputInnerReducer_1.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 = (0, react_1.useCallback)((oldValue, delta) => {
+        let deformattedDate = dateDeformatter(oldValue);
+        deformattedDate.setDate(deformattedDate.getDate() + delta);
+        if (!(0, dateUtils_1.isValidDate)(deformattedDate)) {
+            resetStartDateChanges();
             return;
         }
-        const endDateToPass = (0, dateUtils_1.getValidDate)(toReverseOffsetDateTime, false, value.to ? toLocalDateTime(value.to) : undefined, deformattedDate, undefined, disableFutureDates, disablePastDates, disableDatesBefore, disableDatesAfter);
-        if (value.to && endDateToPass && (endDateToPass.getTime() !== new Date(toLocalDateTime(value.to)).getTime())) {
-            setEndDateText(dateFormatter(toReverseOffsetDateTime(endDateToPass)));
+        deformattedDate = adjustTime(deformattedDate, value.from ? toLocalDateTime(value.from) : undefined);
+        if ((0, dateUtils_1.isValidationDateError)(deformattedDate, toReverseOffsetDateTime, disableFutureDates, disablePastDates, disableDatesBefore, disableDatesAfter)) {
+            // if date is invalid, do not update the state
+            resetStartDateChanges();
+            return;
         }
-        onChange({ from: toReverseOffsetDateTime(deformattedDate).toISOString(), to: endDateToPass ? toReverseOffsetDateTime(endDateToPass).toISOString() : undefined });
-    }, [dateDeformatter, value.from, value.to, toReverseOffsetDateTime, disableFutureDates, disablePastDates, disableDatesBefore, disableDatesAfter,
-        toLocalDateTime, onChange, dateFormatter]);
+        const newValidDates = (0, dateUtils_1.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: dateInputInnerReducer_1.AssistiveText.None,
+            endAssistiveText: (value.to && newValidDates.end && (newValidDates.end.getTime() !== new Date(toLocalDateTime(value.to)).getTime()) ? dateInputInnerReducer_1.AssistiveText.DateAdjusted : dateInputInnerReducer_1.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: dateInputInnerReducer_1.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 = (0, react_1.useCallback)((time) => {
+        currentSelectedFieldRef.current = undefined;
         const startDateToCopyTime = time;
         let newValueFrom = value.from ? toLocalDateTime(value.from) : startDateToCopyTime;
-        if (value.from) {
-            newValueFrom.setHours(startDateToCopyTime.getHours());
-            newValueFrom.setMinutes(startDateToCopyTime.getMinutes());
-            newValueFrom.setSeconds(startDateToCopyTime.getSeconds());
-        }
+        newValueFrom = adjustTime(newValueFrom, startDateToCopyTime);
         if (!(0, dateUtils_1.isValidDate)(newValueFrom)) {
-            setStartDateText(value.from ? dateFormatter(value.from) : "");
+            resetStartDateChanges();
             return;
         }
         if ((0, dateUtils_1.isValidationDateError)(newValueFrom, toReverseOffsetDateTime, disableFutureDates, disablePastDates, disableDatesBefore, disableDatesAfter)) {
             const newValidDate = (0, dateUtils_1.getValidTime)(newValueFrom, value.from, disableFutureDates, disablePastDates, disableDatesBefore, disableDatesAfter);
             if (!newValidDate) {
-                setStartDateText(value.from ? dateFormatter(value.from) : "");
+                resetStartDateChanges();
                 return;
             }
             newValueFrom = newValidDate;
         }
-        if (dateRangeMode && value.to && (toReverseOffsetDateTime(newValueFrom) > new Date(value.to))) {
-            setStartDateText(value.from ? dateFormatter(value.from) : "");
-            return;
-        }
-        onChange({ from: toReverseOffsetDateTime(newValueFrom).toISOString(), to: value.to });
-    }, [value.from, value.to, toLocalDateTime, toReverseOffsetDateTime, disableFutureDates, disablePastDates, disableDatesBefore, disableDatesAfter, dateRangeMode, onChange, dateFormatter]);
-    const endDateChangeHandler = (0, react_1.useCallback)(e => {
+        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: dateInputInnerReducer_1.AssistiveText.None,
+            endAssistiveText: startEndOrderValid ? dateInputInnerReducer_1.AssistiveText.None : dateInputInnerReducer_1.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: dateInputInnerReducer_1.DateInputInnerStateActionType.ChangePeriod, payload: newStateValue });
+        dispatchState({ type: dateInputInnerReducer_1.DateInputInnerStateActionType.ChangeStartAssistiveText, payload: dateInputInnerReducer_1.AssistiveText.None });
+        onChange({ from: startDateToPass, to: endDateToPass });
+    }, [value.from, value.to, toLocalDateTime, adjustTime, toReverseOffsetDateTime, disableFutureDates, disablePastDates, disableDatesBefore, disableDatesAfter, dateRangeMode,
+        dateFormatter, onChange, resetStartDateChanges]);
+    const resetEndDateChanges = (0, react_1.useCallback)((resetKeydownBehavior = false) => {
+        dispatchState({ type: dateInputInnerReducer_1.DateInputInnerStateActionType.ChangeEndDateText, payload: value.to ? dateFormatter(value.to) : "" });
+        resetKeydownBehavior && dispatchState({ type: dateInputInnerReducer_1.DateInputInnerStateActionType.ChangeInputKeydownBehavior, payload: undefined });
+    }, [dateFormatter, value.to]);
+    const endDateChangeHandler = (0, react_1.useCallback)((e, isBlur = false) => {
         const newValue = e.target.value;
-        const deformattedDate = dateDeformatter(newValue);
+        currentSelectedFieldRef.current = undefined;
+        let deformattedDate = dateDeformatter(newValue);
         if (!(0, dateUtils_1.isValidDate)(deformattedDate)) {
-            setEndDateText(value.to ? dateFormatter(value.to) : "");
+            resetEndDateChanges(true);
             return;
         }
-        if (value.to) {
-            const dateLike = toLocalDateTime(value.to);
-            deformattedDate.setHours(dateLike.getHours());
-            deformattedDate.setMinutes(dateLike.getMinutes());
-            deformattedDate.setSeconds(dateLike.getSeconds());
-        }
+        deformattedDate = adjustTime(deformattedDate, value.to ? toLocalDateTime(value.to) : undefined);
         if ((0, dateUtils_1.isValidationDateError)(deformattedDate, toReverseOffsetDateTime, disableFutureDates, disablePastDates, disableDatesBefore, disableDatesAfter)) {
             // if date is invalid, do not update the state
-            setEndDateText(value.to ? dateFormatter(value.to) : "");
+            resetEndDateChanges(true);
+            return;
+        }
+        const newValidDates = (0, dateUtils_1.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()) ? dateInputInnerReducer_1.AssistiveText.DateAdjusted : dateInputInnerReducer_1.AssistiveText.None)
+                : undefined,
+            endAssistiveText: isBlur && state.currentActiveField === "end" ? dateInputInnerReducer_1.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: dateInputInnerReducer_1.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 = (0, react_1.useCallback)((oldValue, delta) => {
+        let deformattedDate = dateDeformatter(oldValue);
+        deformattedDate.setDate(deformattedDate.getDate() + delta);
+        if (!(0, dateUtils_1.isValidDate)(deformattedDate)) {
+            resetEndDateChanges();
             return;
         }
-        const startDateToPass = (0, dateUtils_1.getValidDate)(toReverseOffsetDateTime, true, value.from ? toLocalDateTime(value.from) : undefined, undefined, deformattedDate, disableFutureDates, disablePastDates, disableDatesBefore, disableDatesAfter);
-        if (value.from && startDateToPass && (startDateToPass.getTime() !== new Date(toLocalDateTime(value.from)).getTime())) {
-            setEndDateText(dateFormatter(toReverseOffsetDateTime(startDateToPass)));
+        deformattedDate = adjustTime(deformattedDate, value.to ? toLocalDateTime(value.to) : undefined);
+        if ((0, dateUtils_1.isValidationDateError)(deformattedDate, toReverseOffsetDateTime, disableFutureDates, disablePastDates, disableDatesBefore, disableDatesAfter)) {
+            // if date is invalid, do not update the state
+            resetEndDateChanges();
+            return;
         }
-        onChange({ from: startDateToPass ? toReverseOffsetDateTime(startDateToPass).toISOString() : undefined, to: toReverseOffsetDateTime(deformattedDate).toISOString() });
-    }, [dateDeformatter, disableFutureDates, toReverseOffsetDateTime, disablePastDates, disableDatesAfter, disableDatesBefore, value.to, value.from, toLocalDateTime, onChange, dateFormatter]);
+        const newValidDates = (0, dateUtils_1.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())
+                ? dateInputInnerReducer_1.AssistiveText.DateAdjusted : dateInputInnerReducer_1.AssistiveText.None,
+            endAssistiveText: dateInputInnerReducer_1.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: dateInputInnerReducer_1.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 = (0, react_1.useCallback)((time) => {
         const endDateToCopyTime = time;
+        currentSelectedFieldRef.current = undefined;
         let newValueTo = value.to ? toLocalDateTime(value.to) : endDateToCopyTime;
-        if (value.to) {
-            newValueTo.setHours(endDateToCopyTime.getHours());
-            newValueTo.setMinutes(endDateToCopyTime.getMinutes());
-            newValueTo.setSeconds(endDateToCopyTime.getSeconds());
-        }
+        newValueTo = adjustTime(newValueTo, endDateToCopyTime);
         if (!(0, dateUtils_1.isValidDate)(newValueTo)) {
-            setEndDateText(value.to ? dateFormatter(value.to) : "");
+            resetEndDateChanges();
             return;
         }
         if ((0, dateUtils_1.isValidationDateError)(newValueTo, toReverseOffsetDateTime, disableFutureDates, disablePastDates, disableDatesBefore, disableDatesAfter)) {
             const newValidDate = (0, dateUtils_1.getValidTime)(newValueTo, value.to, disableFutureDates, disablePastDates, disableDatesBefore, disableDatesAfter);
             if (!newValidDate) {
-                setEndDateText(value.to ? dateFormatter(value.to) : "");
+                resetEndDateChanges();
                 return;
             }
             newValueTo = newValidDate;
             return;
         }
-        if (dateRangeMode && value.from && (toReverseOffsetDateTime(newValueTo) < new Date(value.from)
-            || (0, dateUtils_1.isDifferentPeriod)(new Date(value.from), newValueTo, disableFutureDates, disablePastDates, disableDatesBefore, disableDatesAfter))) {
-            setEndDateText(value.to ? dateFormatter(value.to) : "");
-            return;
-        }
-        onChange({ from: value.from, to: toReverseOffsetDateTime(newValueTo).toISOString() });
-    }, [value.to, value.from, toLocalDateTime, toReverseOffsetDateTime, disableFutureDates, disablePastDates, disableDatesBefore, disableDatesAfter, dateRangeMode, onChange, dateFormatter]);
-    const calendarChangeHandler = (0, react_1.useCallback)((range) => {
-        const currentStartDate = range.from && new Date(range.from);
-        const startDateToCopyTime = value.from ? toLocalDateTime(value.from) : timePickerValueFromPrev;
-        if (currentStartDate && startDateToCopyTime) {
-            currentStartDate.setHours(startDateToCopyTime.getHours());
-            currentStartDate.setMinutes(startDateToCopyTime.getMinutes());
-            currentStartDate.setSeconds(startDateToCopyTime.getSeconds());
+        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 ? dateInputInnerReducer_1.AssistiveText.None : dateInputInnerReducer_1.AssistiveText.TimeAdjusted,
+            endAssistiveText: dateInputInnerReducer_1.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: dateInputInnerReducer_1.DateInputInnerStateActionType.ChangePeriod, payload: newStateValue });
+        dispatchState({ type: dateInputInnerReducer_1.DateInputInnerStateActionType.ChangeEndAssistiveText, payload: dateInputInnerReducer_1.AssistiveText.None });
+        onChange({ from: startDateToPass, to: endDateToPass });
+    }, [value.to, value.from, toLocalDateTime, adjustTime, toReverseOffsetDateTime, disableFutureDates, disablePastDates, disableDatesBefore, disableDatesAfter, dateRangeMode,
+        dateFormatter, onChange, resetEndDateChanges]);
+    const getCurrentActiveField = (0, react_1.useCallback)(() => state.currentActiveField, [state.currentActiveField]);
+    // eslint-disable-next-line complexity
+    const calendarChangeHandler = (0, react_1.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((0, dateUtils_1.toDayStart)(toLocalDateTime(new Date()).toISOString())));
+        let currentEndDate = range.to && new Date(range.to);
+        const endDateToCopyTime = value.to ? toLocalDateTime(value.to) : (timePickerValueToPrev || new Date((0, dateUtils_1.toDayStart)(toLocalDateTime(new Date()).toISOString())));
+        let rangeFrom = range.from;
+        let rangeTo = range.to;
+        if (currentStartDate) {
+            currentStartDate = adjustTime(currentStartDate, startDateToCopyTime);
             const isValidationError = (0, dateUtils_1.isValidationDateError)(currentStartDate, toReverseOffsetDateTime, disableFutureDates, disablePastDates, disableDatesBefore, disableDatesAfter);
-            range.from = toReverseOffsetDateTime(isValidationError ? new Date(range.from) : currentStartDate).toISOString();
-        }
-        const currentEndDate = range.to && new Date(range.to);
-        const endDateToCopyTime = value.to ? toLocalDateTime(value.to) : timePickerValueToPrev;
-        if (currentEndDate && endDateToCopyTime) {
-            currentEndDate.setHours(endDateToCopyTime.getHours());
-            currentEndDate.setMinutes(endDateToCopyTime.getMinutes());
-            currentEndDate.setSeconds(endDateToCopyTime.getSeconds());
+            rangeFrom = toReverseOffsetDateTime(isValidationError ? new Date(range.from) : currentStartDate).toISOString();
+        }
+        if (currentEndDate) {
+            currentEndDate = adjustTime(currentEndDate, endDateToCopyTime);
             const isValidationError = (0, dateUtils_1.isValidationDateError)(currentEndDate, toReverseOffsetDateTime, disableFutureDates, disablePastDates, disableDatesBefore, disableDatesAfter);
-            range.to = toReverseOffsetDateTime(isValidationError ? new Date(range.to) : currentEndDate).toISOString();
+            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;
         }
-        setStartDateText(range.from ? dateFormatter(range.from) : "");
-        setEndDateText(range.to ? dateFormatter(range.to) : "");
+        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: dateInputInnerReducer_1.DateInputInnerStateActionType.ChangeCalendarValue, payload: newStateValue });
         onChange(range);
-    }, [value.from, value.to, toLocalDateTime, timePickerValueFromPrev, timePickerValueToPrev, dateFormatter, onChange, toReverseOffsetDateTime,
+    }, [dateRangeMode, value.from, value.to, toLocalDateTime, timePickerValueFromPrev, timePickerValueToPrev, dateFormatter, onChange, adjustTime, toReverseOffsetDateTime,
         disableFutureDates, disablePastDates, disableDatesBefore, disableDatesAfter]);
     const handleSetStartDateText = (0, react_1.useCallback)((e) => {
-        setStartDateText(e.target.value);
+        dispatchState({ type: dateInputInnerReducer_1.DateInputInnerStateActionType.ChangeStartDateText, payload: e.target.value });
     }, []);
     const handleSetEndDateText = (0, react_1.useCallback)((e) => {
-        setEndDateText(e.target.value);
-    }, []);
-    const handleOnFocus = (0, react_1.useCallback)(() => {
-        previousActiveElement.current = document.activeElement;
+        dispatchState({ type: dateInputInnerReducer_1.DateInputInnerStateActionType.ChangeEndDateText, payload: e.target.value });
     }, []);
-    const handleOnBlur = (0, react_1.useCallback)(() => {
-        if (previousActiveElement.current) {
-            previousActiveElement.current = null;
+    // eslint-disable-next-line complexity
+    const handleOnClick = (0, react_1.useCallback)((e) => {
+        if (e.target instanceof HTMLElement && e.target.tagName === "INPUT" && e.target.getAttribute("id") === state.startDateId) {
+            state.currentActiveField === "end" && dispatchState({ type: dateInputInnerReducer_1.DateInputInnerStateActionType.ChangeActiveField, payload: "start" });
+            state.currentActiveField === "start" && dispatchState({ type: dateInputInnerReducer_1.DateInputInnerStateActionType.ChangeInputKeydownBehavior, payload: undefined });
         }
-    }, []);
-    return (0, jsx_runtime_1.jsxs)("div", { className: (0, classNames_1.classNames)(["zen-date-input-inner", driveClassName || "", isMobileView ? "zen-date-input-inner--mobile-view" : ""]), children: [(0, jsx_runtime_1.jsxs)("div", { className: "zen-date-input-inner__controls-block", onFocus: handleOnFocus, onBlur: handleOnBlur, children: [(0, jsx_runtime_1.jsx)(dateInputInnerControlBlock_1.DateInputInnerControlBlock, { className: "zen-date-input-inner__control-start", title: title || title === undefined ? title || translate(dateRangeMode ? "Start date" : "Pick a date") : undefined, id: startDateId, dateText: startDateText, placeholder: dateFormat, handleSetDateText: handleSetStartDateText, onBlurDateChangeHandler: startDateChangeHandler, requireSelection: requireSelection, selectTime: selectTime, timePickerValue: timePickerValueFrom || timePickerValueFromPrev, isMobileView: isMobileView, timeChangeHandler: startTimeChangeHandler }), dateRangeMode
-                        ? (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: "zen-date-input-inner__separator" }), (0, jsx_runtime_1.jsx)(dateInputInnerControlBlock_1.DateInputInnerControlBlock, { className: "zen-date-input-inner__control-end", title: translate("End date"), id: endDateId, dateText: endDateText, placeholder: dateFormat, handleSetDateText: handleSetEndDateText, onBlurDateChangeHandler: endDateChangeHandler, requireSelection: requireSelection, selectTime: selectTime, timePickerValue: timePickerValueTo || timePickerValueToPrev, isMobileView: isMobileView, timeChangeHandler: endTimeChangeHandler })] })
-                        : null] }), (0, jsx_runtime_1.jsx)("div", { className: "zen-date-input-inner__calendar", children: (0, jsx_runtime_1.jsx)(calendar_1.Calendar, { id: id, value: calendarValue, onChange: calendarChangeHandler, dateRangeMode: dateRangeMode, disableFutureDates: disableFutureDates, disablePastDates: disablePastDates, disableDatesAfter: disableDatesAfterValue, disableDatesBefore: disableDatesBeforeValue, startDayOfWeek: startDayOfWeek, yearRange: yearRange, isMobileView: isMobileView, getPreviousActiveElement: () => previousActiveElement.current }) })] });
+        if (e.target instanceof HTMLElement && e.target.tagName === "INPUT" && e.target.getAttribute("id") === state.endDateId) {
+            state.currentActiveField === "start" && dispatchState({ type: dateInputInnerReducer_1.DateInputInnerStateActionType.ChangeActiveField, payload: "end" });
+            state.currentActiveField === "end" && dispatchState({ type: dateInputInnerReducer_1.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 = (0, react_1.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: dateInputInnerReducer_1.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: dateInputInnerReducer_1.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: dateInputInnerReducer_1.DateInputInnerStateActionType.ChangeStartAssistiveText, payload: dateInputInnerReducer_1.AssistiveText.None });
+                state.currentActiveField === "start" && dispatchState({ type: dateInputInnerReducer_1.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: dateInputInnerReducer_1.DateInputInnerStateActionType.ChangeEndAssistiveText, payload: dateInputInnerReducer_1.AssistiveText.None });
+                state.currentActiveField === "end" && dispatchState({ type: dateInputInnerReducer_1.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 = (0, react_1.useMemo)(() => ({
+        onClick: handleOnClick,
+        onKeyDown: handleOnKeyDown
+    }), [handleOnClick, handleOnKeyDown]);
+    (0, react_1.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]);
+    (0, react_1.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 = (0, react_1.useCallback)((e) => {
+        currentSelectedFieldRef.current = undefined;
+        startDateChangeHandler(e, true);
+    }, [startDateChangeHandler]);
+    const handleBlurEnd = (0, react_1.useCallback)((e) => {
+        currentSelectedFieldRef.current = undefined;
+        endDateChangeHandler(e, true);
+    }, [endDateChangeHandler]);
+    const handleTodayButtonClick = (0, react_1.useCallback)((e) => {
+        const currentActiveField = getCurrentActiveField();
+        let newValidDates;
+        if (currentActiveField === "start") {
+            const todayFromWithTime = adjustTime(toLocalDateTime(todayFrom), value.from ? toLocalDateTime(value.from) : undefined);
+            newValidDates = (0, dateUtils_1.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 = (0, dateUtils_1.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 ? dateInputInnerReducer_1.AssistiveText.DateAdjusted : dateInputInnerReducer_1.AssistiveText.None,
+            endAssistiveText: currentActiveField === "start" && endDateToPass !== value.to ? dateInputInnerReducer_1.AssistiveText.DateAdjusted : dateInputInnerReducer_1.AssistiveText.None
+        };
+        currentSelectedFieldRef.current = dateRangeMode ? undefined : startInputRef.current || undefined;
+        e.target.blur();
+        currentDateValuesRef.current = { from: startDateToPass, to: dateRangeMode ? endDateToPass : value.to };
+        dispatchState({ type: dateInputInnerReducer_1.DateInputInnerStateActionType.ChangePeriod, payload: newStateValue });
+        dispatchState({ type: dateInputInnerReducer_1.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 = (0, react_1.useMemo)(() => (0, jsx_runtime_1.jsx)(dateInputInnerControlBlock_1.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 = (0, react_1.useMemo)(() => dateRangeMode
+        ? (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: "zen-date-input-inner__separator" }), (0, jsx_runtime_1.jsx)(dateInputInnerControlBlock_1.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 (0, jsx_runtime_1.jsxs)("div", { className: (0, classNames_1.classNames)(["zen-date-input-inner", driveClassName || "", isMobileView ? "zen-date-input-inner--mobile-view" : ""]), children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "zen-date-input-inner__controls-block" }, rangeArgs, { children: [memoizedStartInputComponent, memoizedEndInputComponent] })), (0, jsx_runtime_1.jsx)("div", { className: "zen-date-input-inner__calendar", children: (0, jsx_runtime_1.jsx)(calendar_1.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 }) })] });
 };
 exports.DateInputInner = DateInputInner;
 exports.TRANSLATIONS = [
     "Pick a date",
     "Start date",
-    "End date"
+    "End date",
+    "Start date has been adjusted.",
+    "End date has been adjusted.",
+    "Start time has been adjusted.",
+    "End time has been adjusted."
 ];

package/dist/dateInputInner/dateInputInnerControlBlock.d.ts

@@ -1,5 +1,7 @@
 import { ChangeEvent } from "react";
 import { IZenComponentProps } from "../commonHelpers/zenComponent";
+import "../formField/formField.less";
+import React from "react";
 export type TDateFormatter = (date: Date | string) => string;
 export type TDateDeformatter = (date: string) => Date;
 interface IDateInputInnerControlBlock extends IZenComponentProps {
@@ -14,7 +16,10 @@ interface IDateInputInnerControlBlock extends IZenComponentProps {
     handleSetDateText: (e: ChangeEvent<HTMLInputElement>) => void;
     onBlurDateChangeHandler: (e: any) => void;
     timeChangeHandler: (time: Date) => void;
+    isActiveField: boolean;
+    assistiveText?: string;
+    isSelected?: boolean;
 }
-export declare const DateInputInnerControlBlock: React.FC<IDateInputInnerControlBlock>;
+export declare const DateInputInnerControlBlock: React.ForwardRefExoticComponent<IDateInputInnerControlBlock & React.RefAttributes<HTMLInputElement>>;
 export declare const TRANSLATIONS: string[];
 export {};