@geotab/zenith 1.26.6-beta.3 → 2.0.0-beta.0

package/esm/dateInputInner/dateInputInner.js

@@ -0,0 +1,490 @@
+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";
+import { getValidDatesForEnd, getValidDatesForStart, getValidTime, isValidationDateError, isValidDate, toDayStart } from "../calendar/dateUtils";
+import { useLanguage } from "../utils/localization/useLanguage";
+import { useDriveClassName } from "../utils/theme/useDriveClassName";
+import { classNames } from "../commonHelpers/classNames/classNames";
+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;
+        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;
+                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 }) })] });
+};
+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."
+];

package/esm/dateInputInner/dateInputInnerControlBlock.d.ts

@@ -0,0 +1,25 @@
+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 {
+    id: string;
+    requireSelection?: boolean;
+    selectTime?: boolean;
+    title?: string;
+    placeholder?: string;
+    isMobileView?: boolean;
+    dateText: string;
+    timePickerValue?: Date;
+    handleSetDateText: (e: ChangeEvent<HTMLInputElement>) => void;
+    onBlurDateChangeHandler: (e: any) => void;
+    timeChangeHandler: (time: Date) => void;
+    isActiveField: boolean;
+    assistiveText?: string;
+    isSelected?: boolean;
+}
+export declare const DateInputInnerControlBlock: React.ForwardRefExoticComponent<IDateInputInnerControlBlock & React.RefAttributes<HTMLInputElement>>;
+export declare const TRANSLATIONS: string[];
+export {};

package/esm/dateInputInner/dateInputInnerControlBlock.js

@@ -0,0 +1,29 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo } from "react";
+import { TextInputRaw } from "../textInputRaw/textInputRaw";
+import { TimePicker } from "../timePicker/timePicker";
+import { useLanguage } from "../utils/localization/useLanguage";
+import { classNames } from "../commonHelpers/classNames/classNames";
+import { FormFieldError } from "../formFieldError/formFieldError";
+import React from "react";
+import { useDriveClassName } from "../utils/theme/useDriveClassName";
+// eslint-disable-next-line @typescript-eslint/naming-convention
+export const DateInputInnerControlBlock = React.forwardRef(function InnerDateInputControlBlock(props, ref) {
+    const { className, title, id, dateText, timePickerValue, placeholder, handleSetDateText, onBlurDateChangeHandler, requireSelection, selectTime, timeChangeHandler, isMobileView, isActiveField, assistiveText } = props;
+    const { translate } = useLanguage();
+    const driveAssistiveClass = useDriveClassName("zen-form-field__text");
+    const isHasDateError = requireSelection && !dateText;
+    const isHasTimeError = requireSelection && !timePickerValue;
+    const memoizedDateInput = useMemo(() => _jsx(TextInputRaw, { className: classNames(["zen-date-input-inner__text-input", isActiveField ? "zen-date-input-inner__text-input--active" : ""]), id: id, value: dateText, onChange: handleSetDateText, onBlur: onBlurDateChangeHandler, placeholder: placeholder, autocomplete: "off", isError: isHasDateError, ref: ref }), [dateText, handleSetDateText, id, isActiveField, isHasDateError, onBlurDateChangeHandler, placeholder, ref]);
+    const memoizedTimeSelect = useMemo(() => selectTime
+        ? _jsxs("div", { className: "zen-date-input-inner__inputs-block-item", children: [_jsx(TimePicker, { className: classNames(["zen-date-input-inner__text-input", isActiveField ? "zen-date-input-inner__text-input--active" : "",
+                        isHasTimeError ? "zen-date-input-inner__text-input--error" : ""]), value: timePickerValue, onChange: timeChangeHandler, isMobileView: isMobileView, fullWidth: true, dataTimeId: id }), isHasTimeError ? _jsx(FormFieldError, { error: translate("The time must be set") }) : null] })
+        : null, [isActiveField, isHasTimeError, isMobileView, selectTime, timeChangeHandler, timePickerValue, translate, id]);
+    return _jsxs("div", { className: classNames(["zen-date-input-inner__control-block", className || ""]), children: [title
+                ? _jsx("label", { htmlFor: id, className: "zen-date-input-inner__label", children: title })
+                : null, _jsxs("div", { className: "zen-date-input-inner__inputs-block", children: [_jsxs("div", { className: "zen-date-input-inner__inputs-block-item", children: [memoizedDateInput, isHasDateError ? _jsx(FormFieldError, { error: translate("The date must be set") }) : null] }), memoizedTimeSelect] }), assistiveText ? _jsx("div", { className: classNames(["zen-date-input-inner__assistive-text", "zen-form-field__text", driveAssistiveClass || ""]), children: assistiveText }) : null] });
+});
+export const TRANSLATIONS = [
+    "The date must be set",
+    "The time must be set"
+];