@geotab/zenith 1.26.6 → 2.0.0-beta.0

package/esm/dateInputInner/dateInputInnerReducer.d.ts

@@ -0,0 +1,109 @@
+import { Reducer } from "react";
+export type TActiveField = "start" | "end";
+export declare const AssistiveText: {
+    readonly DateAdjusted: "date-adjusted";
+    readonly TimeAdjusted: "time-adjusted";
+    readonly None: "none";
+};
+export type TAssistiveText = typeof AssistiveText[keyof typeof AssistiveText];
+export interface IDateInputInnerState {
+    dateRangeMode: boolean;
+    startDateId: string;
+    endDateId: string;
+    startDateText: string;
+    endDateText: string;
+    startAssistiveText: TAssistiveText;
+    endAssistiveText: TAssistiveText;
+    currentActiveField: TActiveField;
+    inputKeyDownBehavior: TActiveField | undefined;
+}
+export declare enum DateInputInnerStateActionType {
+    ChangeCalendarValue = "CHANGE_CALENDAR_VALUE",
+    ChangeStartDateText = "CHANGE_START_DATE_TEXT",
+    ChangeEndDateText = "CHANGE_END_DATE_TEXT",
+    ChangePeriod = "CHANGE_PERIOD",
+    ChangeStartAssistiveText = "CHANGE_START_ASSISTIVE_TEXT",
+    ChangeEndAssistiveText = "CHANGE_END_ASSISTIVE_TEXT",
+    ChangeActiveField = "CHANGE_ACTIVE_FIELD",
+    ToggleActiveField = "TOGGLE_ACTIVE_FIELD",
+    ChangeDateRangeMode = "CHANGE_DATE_RANGE_MODE",
+    UpdateDateText = "UPDATE_DATE_TEXT",
+    ChangeInputKeydownBehavior = "CHANGE_INPUT_KEYDOWN_BEHAVIOR"
+}
+interface IChangePeriodValuePayload {
+    start: string;
+    end: string;
+    startAssistiveText?: TAssistiveText;
+    endAssistiveText?: TAssistiveText;
+    nextActiveField?: TActiveField;
+    emittedBy?: TActiveField;
+    inputKeyDownBehavior?: TActiveField | undefined;
+}
+interface IChangeCalendarValuePayload {
+    start: string;
+    end: string;
+    hasAssistiveText: boolean;
+}
+interface IUpdateDateTextPayload {
+    start: string;
+    end: string;
+}
+interface IChangeCalendarValueAction {
+    type: DateInputInnerStateActionType.ChangeCalendarValue;
+    payload: IChangeCalendarValuePayload;
+}
+interface IChangePeriodAction {
+    type: DateInputInnerStateActionType.ChangePeriod;
+    payload: IChangePeriodValuePayload;
+}
+interface IChangeStartDateTextAction {
+    type: DateInputInnerStateActionType.ChangeStartDateText;
+    payload: string;
+}
+interface IChangeEndDateTextAction {
+    type: DateInputInnerStateActionType.ChangeEndDateText;
+    payload: string;
+}
+interface IChangeStartAssistiveTextAction {
+    type: DateInputInnerStateActionType.ChangeStartAssistiveText;
+    payload: TAssistiveText;
+}
+interface IChangeEndAssistiveTextAction {
+    type: DateInputInnerStateActionType.ChangeEndAssistiveText;
+    payload: TAssistiveText;
+}
+interface IChangeActiveFieldAction {
+    type: DateInputInnerStateActionType.ChangeActiveField;
+    payload: TActiveField;
+}
+interface IToggleActiveFieldAction {
+    type: DateInputInnerStateActionType.ToggleActiveField;
+}
+interface IChangeDateRangeModeAction {
+    type: DateInputInnerStateActionType.ChangeDateRangeMode;
+    payload: boolean;
+}
+interface IUpdateDateTextAction {
+    type: DateInputInnerStateActionType.UpdateDateText;
+    payload: IUpdateDateTextPayload;
+}
+interface IChangeInputKeydownBehaviorAction {
+    type: DateInputInnerStateActionType.ChangeInputKeydownBehavior;
+    payload: TActiveField | undefined;
+}
+export type TDateInputInnerStateAction = IChangeCalendarValueAction | IChangeStartDateTextAction | IChangeEndDateTextAction | IChangeStartAssistiveTextAction | IChangeEndAssistiveTextAction | IChangeActiveFieldAction | IToggleActiveFieldAction | IChangeDateRangeModeAction | IChangePeriodAction | IUpdateDateTextAction | IChangeInputKeydownBehaviorAction;
+export interface IDateInputInnerReducer<T extends IDateInputInnerState = IDateInputInnerState> extends Reducer<T, TDateInputInnerStateAction> {
+}
+export declare const getInitialDateInputInnerState: (id: string, startText: string, endText: string, dateRange?: boolean) => {
+    dateRangeMode: boolean;
+    startDateId: string;
+    endDateId: string;
+    startDateText: string;
+    endDateText: string;
+    startAssistiveText: "none";
+    endAssistiveText: "none";
+    currentActiveField: TActiveField;
+    inputKeyDownBehavior: TActiveField;
+};
+export declare function dateInputInnerReducer<T>(state: IDateInputInnerState, action: TDateInputInnerStateAction): IDateInputInnerState | T;
+export {};

package/esm/dateInputInner/dateInputInnerReducer.js

@@ -0,0 +1,129 @@
+export const AssistiveText = {
+    DateAdjusted: "date-adjusted",
+    TimeAdjusted: "time-adjusted",
+    None: "none"
+};
+export var DateInputInnerStateActionType;
+(function (DateInputInnerStateActionType) {
+    DateInputInnerStateActionType["ChangeCalendarValue"] = "CHANGE_CALENDAR_VALUE";
+    DateInputInnerStateActionType["ChangeStartDateText"] = "CHANGE_START_DATE_TEXT";
+    DateInputInnerStateActionType["ChangeEndDateText"] = "CHANGE_END_DATE_TEXT";
+    DateInputInnerStateActionType["ChangePeriod"] = "CHANGE_PERIOD";
+    DateInputInnerStateActionType["ChangeStartAssistiveText"] = "CHANGE_START_ASSISTIVE_TEXT";
+    DateInputInnerStateActionType["ChangeEndAssistiveText"] = "CHANGE_END_ASSISTIVE_TEXT";
+    DateInputInnerStateActionType["ChangeActiveField"] = "CHANGE_ACTIVE_FIELD";
+    DateInputInnerStateActionType["ToggleActiveField"] = "TOGGLE_ACTIVE_FIELD";
+    DateInputInnerStateActionType["ChangeDateRangeMode"] = "CHANGE_DATE_RANGE_MODE";
+    DateInputInnerStateActionType["UpdateDateText"] = "UPDATE_DATE_TEXT";
+    DateInputInnerStateActionType["ChangeInputKeydownBehavior"] = "CHANGE_INPUT_KEYDOWN_BEHAVIOR";
+})(DateInputInnerStateActionType || (DateInputInnerStateActionType = {}));
+export const getInitialDateInputInnerState = (id, startText, endText, dateRange) => ({
+    dateRangeMode: dateRange || false,
+    startDateId: `${id}-start`,
+    endDateId: `${id}-end`,
+    startDateText: startText,
+    endDateText: endText,
+    startAssistiveText: AssistiveText.None,
+    endAssistiveText: AssistiveText.None,
+    currentActiveField: "start",
+    inputKeyDownBehavior: "start"
+});
+// eslint-disable-next-line complexity
+export function dateInputInnerReducer(state, action) {
+    if (action.type === DateInputInnerStateActionType.ChangePeriod) {
+        const getEndAssistiveText = () => {
+            if (!state.dateRangeMode) {
+                return AssistiveText.None;
+            }
+            if (action.payload.emittedBy === "end" && state.currentActiveField === "end") {
+                return AssistiveText.None;
+            }
+            if (action.payload.emittedBy === "start" && state.currentActiveField === "start") {
+                return action.payload.endAssistiveText;
+            }
+            return action.payload.endAssistiveText || state.endAssistiveText;
+        };
+        const getStartAssistiveText = () => {
+            if (!state.dateRangeMode) {
+                return AssistiveText.None;
+            }
+            if (action.payload.emittedBy === "start" && state.currentActiveField === "start") {
+                return AssistiveText.None;
+            }
+            if (action.payload.emittedBy === "end" && state.currentActiveField === "end") {
+                return action.payload.startAssistiveText;
+            }
+            return action.payload.startAssistiveText || state.startAssistiveText;
+        };
+        return Object.assign(Object.assign({}, state), { currentActiveField: action.payload.emittedBy || action.payload.nextActiveField || state.currentActiveField, inputKeyDownBehavior: action.payload.emittedBy || action.payload.nextActiveField || state.inputKeyDownBehavior, startDateText: action.payload.start, endDateText: state.dateRangeMode ? action.payload.end : state.endDateText, startAssistiveText: getStartAssistiveText(), endAssistiveText: getEndAssistiveText() });
+    }
+    if (action.type === DateInputInnerStateActionType.ChangeCalendarValue) {
+        const nextActiveField = state.currentActiveField === "start" ? "end" : "start";
+        const getNextStartAssistiveText = () => {
+            if (!state.dateRangeMode) {
+                return AssistiveText.None;
+            }
+            if (state.currentActiveField === "start") {
+                return AssistiveText.None;
+            }
+            return state.startDateText !== action.payload.start || action.payload.hasAssistiveText ? AssistiveText.DateAdjusted : AssistiveText.None;
+        };
+        const getNextEndAssistiveText = () => {
+            if (!state.dateRangeMode) {
+                return AssistiveText.None;
+            }
+            if (state.currentActiveField === "end") {
+                return AssistiveText.None;
+            }
+            return state.endDateText !== action.payload.end || action.payload.hasAssistiveText ? AssistiveText.DateAdjusted : AssistiveText.None;
+        };
+        return Object.assign(Object.assign({}, state), { startDateText: action.payload.start, endDateText: state.dateRangeMode ? action.payload.end : state.endDateText, startAssistiveText: getNextStartAssistiveText(), endAssistiveText: getNextEndAssistiveText(), currentActiveField: state.dateRangeMode ? nextActiveField : "start", inputKeyDownBehavior: state.dateRangeMode ? nextActiveField : "start" });
+    }
+    if (action.type === DateInputInnerStateActionType.ChangeStartDateText) {
+        if (action.payload === state.startDateText) {
+            return state;
+        }
+        return Object.assign(Object.assign({}, state), { startDateText: action.payload });
+    }
+    if (action.type === DateInputInnerStateActionType.ChangeEndDateText) {
+        if (action.payload === state.endDateText || !state.dateRangeMode) {
+            return state;
+        }
+        return Object.assign(Object.assign({}, state), { endDateText: action.payload });
+    }
+    if (action.type === DateInputInnerStateActionType.UpdateDateText) {
+        if (action.payload.end === state.endDateText && action.payload.start === state.startDateText) {
+            return state;
+        }
+        return Object.assign(Object.assign({}, state), { startDateText: action.payload.start, endDateText: action.payload.end });
+    }
+    if (action.type === DateInputInnerStateActionType.ChangeStartAssistiveText) {
+        if (!state.dateRangeMode) {
+            return state;
+        }
+        return Object.assign(Object.assign({}, state), { startAssistiveText: action.payload });
+    }
+    if (action.type === DateInputInnerStateActionType.ChangeEndAssistiveText) {
+        return Object.assign(Object.assign({}, state), { endAssistiveText: action.payload });
+    }
+    if (action.type === DateInputInnerStateActionType.ChangeActiveField) {
+        return Object.assign(Object.assign({}, state), { currentActiveField: action.payload, inputKeyDownBehavior: action.payload, startAssistiveText: state.currentActiveField === "start" ? AssistiveText.None : state.startAssistiveText, endAssistiveText: state.currentActiveField === "end" ? AssistiveText.None : state.endAssistiveText });
+    }
+    if (action.type === DateInputInnerStateActionType.ChangeInputKeydownBehavior) {
+        return Object.assign(Object.assign({}, state), { inputKeyDownBehavior: action.payload });
+    }
+    if (action.type === DateInputInnerStateActionType.ToggleActiveField) {
+        if (!state.dateRangeMode) {
+            return state;
+        }
+        return Object.assign(Object.assign({}, state), { currentActiveField: state.currentActiveField === "start" ? "end" : "start", inputKeyDownBehavior: state.currentActiveField === "start" ? "end" : "start", startAssistiveText: state.currentActiveField === "start" ? AssistiveText.None : state.startAssistiveText, endAssistiveText: state.currentActiveField === "end" ? AssistiveText.None : state.endAssistiveText });
+    }
+    // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+    if (action.type === DateInputInnerStateActionType.ChangeDateRangeMode) {
+        if (state.dateRangeMode === action.payload) {
+            return state;
+        }
+        return Object.assign(Object.assign({}, state), { dateRangeMode: action.payload });
+    }
+    return state;
+}

package/esm/dateRange/dateRange.d.ts

@@ -0,0 +1,44 @@
+/// <reference types="react" />
+import "./dateRange.less";
+import { IZenComponentProps } from "./../commonHelpers/zenComponent";
+import { IDateRangeValue, IDateRangeValueOptionalLabel, TDateRangeOption } from "./dateRangeUtils";
+import { TButton } from "../button/buttonType";
+import { IChipsParent } from "../chip/chip";
+interface IDateRangeBase extends IZenComponentProps, IChipsParent {
+    options: TDateRangeOption[];
+    triggerLabel?: string;
+    className?: string;
+    classNamePopup?: string;
+    classNameWrapper?: string;
+    hasApplyButton?: boolean;
+    type?: TButton;
+    disabled?: boolean;
+    dropDownTitle?: string;
+    withCalendar?: boolean;
+    timeSelect?: boolean;
+    disableFutureDates?: boolean;
+    disablePastDates?: boolean;
+    disableDatesBefore?: string;
+    disableDatesAfter?: string;
+    lockEndDate?: string;
+    lockStartDate?: string;
+    id?: string;
+    error?: string;
+    stepper?: boolean;
+}
+export interface IDateRange extends IDateRangeBase {
+    defaultValue: IDateRangeValue;
+    value: IDateRangeValueOptionalLabel;
+    onChange: (value: IDateRangeValue) => void;
+    allowUnsetValue?: false;
+}
+export interface IDateRangeUnsetValue extends IDateRangeBase {
+    defaultValue?: IDateRangeValue;
+    value: IDateRangeValueOptionalLabel | undefined;
+    onChange: (value: IDateRangeValue | undefined) => void;
+    allowUnsetValue: true;
+}
+export declare const parseLabel: (option: IDateRangeValue, dateFormat: string, translate: (str: string) => string, toLacalFn: (date: Date | string) => Date) => string;
+export declare const DateRange: React.FC<IDateRange | IDateRangeUnsetValue>;
+export declare const TRANSLATIONS: string[];
+export {};

package/esm/dateRange/dateRange.js

@@ -0,0 +1,275 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { ButtonIconPosition, TextIconButton } from "../textIconButton/textIconButton";
+import { Button } from "../button/button";
+import { IconCalendar } from "../icons/iconCalendar";
+import { useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
+import { classNames } from "../commonHelpers/classNames/classNames";
+import { ButtonType } from "../button/buttonType";
+import { useLanguage } from "../utils/localization/useLanguage";
+import { userFormatContext } from "../utils/userFormat/userFormatContext";
+import { CUSTOM_CALENDAR_ID, DateRangeInner } from "../dateRangeInner/dateRangeInner";
+import { useUniqueId } from "../commonHelpers/useUniqueId";
+import { getOptionsPeriodMap, getRangeOptionsArray, getSelectedRangeFromValue, getDateRangeAdjustedStep, DEFAULT_STEP_OPTION, dateRangeAdjustedFn } from "../filtersBar/components/filtersBarPeriodPicker/getRangeOption";
+import { formatDate } from "../utils/formatDate";
+import { normalizeDates } from "../filtersBar/components/filtersBarPeriodPicker/normalizeDates";
+import { ControlledPopup } from "../controlledPopup/controlledPopup";
+import { FormFieldError } from "../formFieldError/formFieldError";
+import { useMobile } from "../commonHelpers/hooks/useMobile";
+import { MobileSheet } from "../mobileSheet/mobileSheet";
+import { FooterButtons } from "../footerButtons/footerButtons";
+import { useDriveClassName } from "../utils/theme/useDriveClassName";
+import { areMapsEqual } from "./utils/areMapsEqual";
+import { IconChevronLeftSmall } from "../icons/iconChevronLeftSmall";
+import { useDrive } from "../utils/theme/useDrive";
+import { IconChevronRightSmall } from "../icons/iconChevronRightSmall";
+import { Chip } from "../chip/chip";
+import { useChipStatus } from "../chip/chipStatusProvider";
+export const parseLabel = (option, dateFormat, translate, toLacalFn) => {
+    const localeFrom = toLacalFn(option.from);
+    const localeTo = toLacalFn(option.to);
+    if (localeFrom.getDate() === localeTo.getDate() &&
+        localeFrom.getMonth() === localeTo.getMonth() &&
+        localeFrom.getFullYear() === localeTo.getFullYear()) {
+        return formatDate(localeFrom, dateFormat, translate);
+    }
+    return `${formatDate(localeFrom, dateFormat, translate)} - ${formatDate(localeTo, dateFormat, translate)}`;
+};
+// eslint-disable-next-line complexity
+export const DateRange = ({ className, classNamePopup, defaultValue, value, onChange, options: optionsArg, type, id, disabled, dropDownTitle, hasApplyButton, disableFutureDates, disablePastDates, disableDatesBefore, triggerLabel, disableDatesAfter, withCalendar, lockStartDate, lockEndDate, timeSelect, error, allowUnsetValue = false, stepper = false, classNameWrapper, chip, chipId, chipName, chipIcon }) => {
+    var _a;
+    const { translate } = useLanguage();
+    const isMobile = useMobile();
+    const isDrive = useDrive();
+    const chipStatus = useChipStatus();
+    const driveWrapperTriggerClassName = useDriveClassName("zen-date-range-wrapper");
+    const drivePopupClassName = useDriveClassName("zen-date-range-popup");
+    const driveWrapperPopupClassName = useDriveClassName("zen-date-range-popup-wrapper");
+    const [showMobileCalendar, setShowMobileCalendar] = useState(false);
+    const { dateFormat, toLocalDateTime, toReverseOffsetDateTime, weekStartsOnSunday } = useContext(userFormatContext);
+    const optionsMap = useMemo(() => getOptionsPeriodMap(optionsArg, translate, toLocalDateTime, weekStartsOnSunday ? "Sunday" : "Monday", toReverseOffsetDateTime), [optionsArg, toLocalDateTime, toReverseOffsetDateTime, translate, weekStartsOnSunday]);
+    const previousStepOption = useRef("");
+    const [selectedRange, setSelectedRange] = useState(getSelectedRangeFromValue(optionsMap, value));
+    const [renderContent, setRenderContent] = useState(false);
+    const isCustomDateOption = (selectedRange === null || selectedRange === void 0 ? void 0 : selectedRange.label) === CUSTOM_CALENDAR_ID;
+    const [isOpen, setIsOpen] = useState(false);
+    const prevIsOpenRef = useRef(false);
+    const [customDate, setCustomDate] = useState(normalizeDates(value === null || value === void 0 ? void 0 : value.from.toISOString(), value === null || value === void 0 ? void 0 : value.to.toISOString(), disableFutureDates, disablePastDates, disableDatesBefore, disableDatesAfter));
+    const isDefaultState = !defaultValue && !selectedRange
+        || defaultValue && selectedRange && defaultValue.label === selectedRange.label && defaultValue.label !== CUSTOM_CALENDAR_ID
+        || defaultValue && selectedRange && defaultValue.label === selectedRange.label && defaultValue.label === CUSTOM_CALENDAR_ID && customDate.from && customDate.to
+            && new Date(customDate.from).toISOString() === defaultValue.from.toISOString() && new Date(customDate.to).toISOString() === defaultValue.to.toISOString();
+    const triggerRef = useRef(null);
+    const [prevSelection, setPrevSelection] = useState(getSelectedRangeFromValue(optionsMap, value));
+    const componentId = useUniqueId();
+    const calendarLabel = translate(CUSTOM_CALENDAR_ID);
+    const getCustomRange = useCallback(() => ({ from: (prevSelection === null || prevSelection === void 0 ? void 0 : prevSelection.from) || new Date(), to: (prevSelection === null || prevSelection === void 0 ? void 0 : prevSelection.to) || new Date() }), [prevSelection]);
+    const options = useMemo(() => getRangeOptionsArray(optionsArg, translate, toLocalDateTime, weekStartsOnSunday ? "Sunday" : "Monday", toReverseOffsetDateTime, withCalendar || false, prevSelection && prevSelection.label === CUSTOM_CALENDAR_ID, prevSelection ? getCustomRange : undefined), [optionsArg, translate, toLocalDateTime, weekStartsOnSunday, toReverseOffsetDateTime, withCalendar, prevSelection, getCustomRange]);
+    const optionsMapRef = useRef(optionsMap);
+    const isEqualMaps = useMemo(() => areMapsEqual(optionsMapRef.current, optionsMap), [optionsMap]);
+    if (!isEqualMaps) {
+        optionsMapRef.current = optionsMap;
+    }
+    const hasCustomOption = useMemo(() => options.find(option => option.id === CUSTOM_CALENDAR_ID) !== undefined, [options]);
+    const title = useMemo(() => dropDownTitle || translate("Date range"), [dropDownTitle, translate]);
+    const toggleVisibility = useCallback(() => setIsOpen(currentIsOpen => !currentIsOpen), []);
+    const getButtonLabel = useCallback((rangeValue, titleText) => {
+        if (!rangeValue) {
+            return translate("Date range");
+        }
+        const val = rangeValue.label;
+        const selection = options.find(option => option.id === val);
+        if (selection && val !== CUSTOM_CALENDAR_ID) {
+            return titleText ? `${translate("Date range filter:")} ${selection.label}` : selection.label;
+        }
+        return titleText ? `${translate("Date range filter:")} ${parseLabel(rangeValue, dateFormat, translate, toLocalDateTime)}` : parseLabel(rangeValue, dateFormat, translate, toLocalDateTime);
+    }, [dateFormat, options, translate, toLocalDateTime]);
+    useEffect(() => {
+        const currentValue = getSelectedRangeFromValue(optionsMap, value);
+        if ((prevSelection === null || prevSelection === void 0 ? void 0 : prevSelection.label) !== (currentValue === null || currentValue === void 0 ? void 0 : currentValue.label) || ((prevSelection === null || prevSelection === void 0 ? void 0 : prevSelection.from.getTime()) !== (currentValue === null || currentValue === void 0 ? void 0 : currentValue.from.getTime()) || (prevSelection === null || prevSelection === void 0 ? void 0 : prevSelection.to.getTime()) !== (currentValue === null || currentValue === void 0 ? void 0 : currentValue.to.getTime()))) {
+            setSelectedRange(currentValue);
+            setPrevSelection(currentValue);
+        }
+    }, [optionsMap, prevSelection === null || prevSelection === void 0 ? void 0 : prevSelection.from, prevSelection === null || prevSelection === void 0 ? void 0 : prevSelection.label, prevSelection === null || prevSelection === void 0 ? void 0 : prevSelection.to, value]);
+    const handleDateRangeSelection = useCallback((newVal) => {
+        var _a, _b;
+        const selection = options.find(option => option.id === newVal);
+        newVal === CUSTOM_CALENDAR_ID && setShowMobileCalendar(true);
+        if (selection && newVal !== CUSTOM_CALENDAR_ID && selection.getRange) {
+            const range = selection.getRange();
+            const normalizedDates = normalizeDates(range.from.toISOString(), range.to.toISOString(), disableFutureDates, disablePastDates, disableDatesBefore, disableDatesAfter);
+            const newRange = newVal === CUSTOM_CALENDAR_ID ?
+                { from: new Date(normalizedDates.from), to: new Date(normalizedDates.to) }
+                : range;
+            setSelectedRange(Object.assign({ label: selection.id }, newRange));
+            !hasApplyButton && setPrevSelection(Object.assign({ label: selection.id }, newRange));
+            !hasApplyButton && onChange(Object.assign({ label: selection.id }, newRange));
+            previousStepOption.current = "";
+        }
+        else {
+            const startDateForNormalize = ((_a = selection === null || selection === void 0 ? void 0 : selection.getRange) === null || _a === void 0 ? void 0 : _a.call(selection)) && (selectedRange === null || selectedRange === void 0 ? void 0 : selectedRange.label) !== newVal ? selection.getRange().from.toISOString() : value === null || value === void 0 ? void 0 : value.from.toISOString();
+            const endDateForNormalize = ((_b = selection === null || selection === void 0 ? void 0 : selection.getRange) === null || _b === void 0 ? void 0 : _b.call(selection)) && (selectedRange === null || selectedRange === void 0 ? void 0 : selectedRange.label) !== newVal ? selection.getRange().to.toISOString() : value === null || value === void 0 ? void 0 : value.to.toISOString();
+            const normalizedDates = normalizeDates(startDateForNormalize, endDateForNormalize, disableFutureDates, disablePastDates, disableDatesBefore, disableDatesAfter);
+            const newRange = newVal === CUSTOM_CALENDAR_ID ?
+                { from: new Date(normalizedDates.from), to: new Date(normalizedDates.to) }
+                : undefined;
+            const newValueFrom = (newRange === null || newRange === void 0 ? void 0 : newRange.from) || new Date();
+            const newValueTo = (newRange === null || newRange === void 0 ? void 0 : newRange.to) || new Date();
+            setSelectedRange({ label: newVal, from: newValueFrom, to: newValueTo });
+            setCustomDate(normalizedDates);
+            !hasApplyButton && onChange({ label: newVal, from: newValueFrom, to: newValueTo });
+        }
+        !hasApplyButton && newVal !== CUSTOM_CALENDAR_ID && setIsOpen(false);
+    }, [options, hasApplyButton, disableFutureDates, disablePastDates, disableDatesBefore, disableDatesAfter, onChange, selectedRange === null || selectedRange === void 0 ? void 0 : selectedRange.label, value === null || value === void 0 ? void 0 : value.from, value === null || value === void 0 ? void 0 : value.to]);
+    const handleRangeSelection = useCallback(() => {
+        if (selectedRange === null || selectedRange === void 0 ? void 0 : selectedRange.label) {
+            const newState = { label: selectedRange.label, from: new Date(customDate.from), to: new Date(customDate.to) };
+            setPrevSelection(newState);
+            onChange(newState);
+            setSelectedRange(newState);
+            setIsOpen(false);
+        }
+    }, [selectedRange === null || selectedRange === void 0 ? void 0 : selectedRange.label, customDate.from, customDate.to, onChange]);
+    const handleApplyClick = useCallback(() => {
+        setIsOpen(false);
+        setShowMobileCalendar(false);
+        if (isCustomDateOption) {
+            handleRangeSelection();
+            previousStepOption.current = "";
+            return;
+        }
+        selectedRange && onChange(selectedRange);
+        selectedRange && setPrevSelection(selectedRange);
+    }, [handleRangeSelection, isCustomDateOption, onChange, selectedRange]);
+    const handleCancelClick = useCallback(() => {
+        hasApplyButton && prevSelection && handleDateRangeSelection(prevSelection.label);
+        setCustomDate({ from: prevSelection === null || prevSelection === void 0 ? void 0 : prevSelection.from.toISOString(), to: prevSelection === null || prevSelection === void 0 ? void 0 : prevSelection.to.toISOString() });
+        setIsOpen(!isOpen);
+        setShowMobileCalendar(false);
+    }, [handleDateRangeSelection, prevSelection, isOpen, hasApplyButton]);
+    const handleClearClick = useCallback(() => {
+        // @ts-expect-error: Let's ignore a compile error. if onChange is triggered, then either a value is passed to the function, or undefined can be passed because the interface is IDateRangeUnsetValue
+        !hasApplyButton && (defaultValue || allowUnsetValue) && onChange(defaultValue);
+        !hasApplyButton && setIsOpen(false);
+        setSelectedRange(defaultValue);
+        previousStepOption.current = "";
+        (defaultValue === null || defaultValue === void 0 ? void 0 : defaultValue.label) === CUSTOM_CALENDAR_ID && !allowUnsetValue && setCustomDate({ from: defaultValue.from.toISOString(), to: defaultValue.to.toISOString() });
+        setShowMobileCalendar(false);
+    }, [allowUnsetValue, defaultValue, hasApplyButton, onChange]);
+    const handleMobileBackClick = useCallback(() => {
+        setShowMobileCalendar(false);
+    }, []);
+    const handleStepperClick = useCallback((currentRange, isIncrease) => {
+        let step = previousStepOption.current ? previousStepOption.current : getDateRangeAdjustedStep(translate, currentRange.label);
+        if (previousStepOption.current === "") {
+            previousStepOption.current = step;
+        }
+        else if (previousStepOption.current !== DEFAULT_STEP_OPTION) {
+            step = previousStepOption.current;
+        }
+        const adjustFn = dateRangeAdjustedFn[step];
+        const newValue = adjustFn(currentRange, isIncrease, toLocalDateTime, toReverseOffsetDateTime);
+        const labeledValue = getSelectedRangeFromValue(optionsMap, newValue);
+        labeledValue && onChange(labeledValue);
+    }, [onChange, optionsMap, toLocalDateTime, toReverseOffsetDateTime, translate]);
+    useEffect(() => {
+        setCustomDate({ from: value === null || value === void 0 ? void 0 : value.from.toISOString(), to: value === null || value === void 0 ? void 0 : value.to.toISOString() });
+        const currentValue = getSelectedRangeFromValue(optionsMapRef.current, value);
+        setPrevSelection(currentValue);
+    }, [value, isEqualMaps]);
+    const range = useMemo(() => ({ from: customDate.from, to: customDate.to }), [customDate.from, customDate.to]);
+    const component = useMemo(() => _jsx(DateRangeInner, { id: id || componentId, options: options, onOptionSelect: handleDateRangeSelection, onCalendarSelect: hasCustomOption ? (val) => {
+            setCustomDate({ from: lockStartDate || val.from, to: lockEndDate || (lockStartDate ? val.to || val.from : val.to) });
+        } : undefined, selection: selectedRange === null || selectedRange === void 0 ? void 0 : selectedRange.label, range: range, timeSelect: timeSelect, disableFutureDates: disableFutureDates, disablePastDates: disablePastDates, disableDatesBefore: disableDatesBefore, disableDatesAfter: disableDatesAfter, showMobileCalendar: isMobile ? showMobileCalendar : undefined, setShowMobileCalendar: isMobile ? setShowMobileCalendar : undefined }), [id, componentId, options, handleDateRangeSelection, hasCustomOption, selectedRange === null || selectedRange === void 0 ? void 0 : selectedRange.label, range, timeSelect, disableFutureDates, disablePastDates,
+        disableDatesBefore, disableDatesAfter, isMobile, showMobileCalendar, lockStartDate, lockEndDate]);
+    const memoizedHandleClose = useCallback(() => {
+        setIsOpen(false);
+    }, [setIsOpen]);
+    const onReadyForFocus = useCallback((isCurrentOpen) => {
+        if (!isMobile) {
+            return;
+        }
+        if (isCurrentOpen) {
+            setRenderContent(true);
+            return;
+        }
+        setRenderContent(false);
+        prevIsOpenRef.current = isCurrentOpen;
+    }, [isMobile]);
+    const isValueNotChanged = useMemo(() => {
+        if (!hasApplyButton) {
+            return false;
+        }
+        if (!isCustomDateOption) {
+            return (selectedRange === null || selectedRange === void 0 ? void 0 : selectedRange.label) === (value === null || value === void 0 ? void 0 : value.label);
+        }
+        return selectedRange.label === (value === null || value === void 0 ? void 0 : value.label) && customDate.from === value.from.toISOString() && customDate.to === value.to.toISOString();
+    }, [customDate.from, customDate.to, hasApplyButton, isCustomDateOption, selectedRange === null || selectedRange === void 0 ? void 0 : selectedRange.label, value === null || value === void 0 ? void 0 : value.from, value === null || value === void 0 ? void 0 : value.label, value === null || value === void 0 ? void 0 : value.to]);
+    const memoizedDesktopView = useMemo(() => _jsx(ControlledPopup, { className: classNames(["zen-date-range-popup-wrapper", driveWrapperPopupClassName || ""]), ariaLabel: translate("Date range"), useTrapFocusWithTrigger: "on", role: "dialog", triggerRef: triggerRef, onOpenChange: setIsOpen, shouldHoldScroll: true, isOpen: isOpen, recalculateOnScroll: true, children: _jsxs("div", { className: classNames(["zen-date-range-popup", drivePopupClassName || "", classNamePopup !== null && classNamePopup !== void 0 ? classNamePopup : ""]), children: [_jsx("div", { className: "zen-date-range-popup__header", children: title }), component, _jsxs("div", { className: "zen-date-range-popup__footer", children: [_jsx(Button, { className: "zen-date-range-popup__button-clear", type: ButtonType.Tertiary, disabled: !!isDefaultState, onClick: handleClearClick, children: translate("Clear") }), (!isCustomDateOption && hasApplyButton) &&
+                            _jsx(Button, { className: "zen-date-range-popup__button-reset", type: ButtonType.Secondary, onClick: handleCancelClick, children: translate("Cancel") }), (isCustomDateOption || hasApplyButton) && _jsx(Button, { className: "zen-date-range-popup__button-apply", type: ButtonType.Primary, disabled: (isCustomDateOption && (!customDate.from || !customDate.to)) || isValueNotChanged || !selectedRange, onClick: handleApplyClick, children: translate("Apply") })] })] }) }), [classNamePopup, component, customDate.from, customDate.to, drivePopupClassName, driveWrapperPopupClassName, handleApplyClick, handleCancelClick, handleClearClick, hasApplyButton, isCustomDateOption, isDefaultState, isOpen, isValueNotChanged, selectedRange, title, translate]);
+    const notFocusedComponent = useMemo(() => !range.from && !range.to, [range.from, range.to]);
+    const memoizedMobileFooter = useMemo(() => {
+        const clearButton = _jsx(Button, { type: ButtonType.Tertiary, disabled: !!isDefaultState, onClick: handleClearClick, children: translate("Clear") });
+        const cancelButton = hasApplyButton && !showMobileCalendar ? _jsx(Button, { type: ButtonType.Secondary, onClick: handleCancelClick, children: translate("Cancel") }) : null;
+        const applyButton = showMobileCalendar || hasApplyButton ?
+            _jsx(Button, { type: ButtonType.Primary, disabled: (isCustomDateOption && (!customDate.from || !customDate.to)) || isValueNotChanged || !selectedRange, onClick: handleApplyClick, children: translate("Apply") }) : null;
+        return _jsxs(FooterButtons, { children: [applyButton, cancelButton, clearButton] });
+    }, [customDate.from, customDate.to, handleApplyClick, handleCancelClick, handleClearClick, hasApplyButton, isCustomDateOption, isDefaultState, isValueNotChanged, selectedRange,
+        showMobileCalendar, translate]);
+    const memoizedMobileView = useMemo(() => _jsxs(MobileSheet, { className: classNames(["zen-date-range-mobile-sheet", classNamePopup ? `${classNamePopup}--mobile-sheet` : ""]), label: translate("Date range"), triggerRef: triggerRef, isOpen: isOpen, onHidePanel: memoizedHandleClose, onCloseClick: memoizedHandleClose, useTrapFocusWithTrigger: notFocusedComponent ? false : true, isBackVisible: showMobileCalendar, onBackClick: handleMobileBackClick, onReadyForFocus: onReadyForFocus, children: [_jsx(MobileSheet.Title, { children: showMobileCalendar ? calendarLabel : title }), _jsx(MobileSheet.Content, { children: renderContent ? component : null }), _jsx(MobileSheet.Footer, { children: memoizedMobileFooter })] }), [calendarLabel, classNamePopup, component, handleMobileBackClick, isOpen, memoizedHandleClose, memoizedMobileFooter, notFocusedComponent,
+        onReadyForFocus, renderContent, showMobileCalendar, title, translate]);
+    const checkIsRangeDisable = useCallback((isIncrease) => {
+        if (!selectedRange) {
+            return true;
+        }
+        const step = previousStepOption.current ? previousStepOption.current : getDateRangeAdjustedStep(translate, selectedRange.label);
+        const adjustFn = dateRangeAdjustedFn[step];
+        const newValue = adjustFn({ from: selectedRange.from, to: selectedRange.to }, isIncrease, toLocalDateTime, toReverseOffsetDateTime);
+        const normalizeNewValue = normalizeDates(newValue.from.toISOString(), newValue.to.toISOString(), disableFutureDates, disablePastDates, disableDatesBefore, disableDatesAfter);
+        return newValue.from.getTime() !== new Date(normalizeNewValue.from).getTime() || newValue.to.getTime() !== new Date(normalizeNewValue.to).getTime();
+    }, [disableDatesAfter, disableDatesBefore, disableFutureDates, disablePastDates, selectedRange, toLocalDateTime, toReverseOffsetDateTime, translate]);
+    const increaseRange = useCallback(() => {
+        selectedRange && handleStepperClick(selectedRange, true);
+    }, [handleStepperClick, selectedRange]);
+    const decreaseRange = useCallback(() => {
+        selectedRange && handleStepperClick(selectedRange, false);
+    }, [handleStepperClick, selectedRange]);
+    useEffect(() => {
+        if (!isMobile && !isOpen && prevIsOpenRef.current) {
+            setTimeout(() => {
+                var _a;
+                (_a = triggerRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+            }, 0);
+        }
+        prevIsOpenRef.current = isOpen;
+    }, [isOpen, isMobile]);
+    const buttonLabel = useMemo(() => triggerLabel && !stepper ? triggerLabel : getButtonLabel(getSelectedRangeFromValue(optionsMap, value)), [getButtonLabel, optionsMap, value, triggerLabel, stepper]);
+    const buttonTitle = useMemo(() => triggerLabel && !stepper ? triggerLabel : getButtonLabel(getSelectedRangeFromValue(optionsMap, value), true), [getButtonLabel, optionsMap, value, triggerLabel, stepper]);
+    const currentLabel = (_a = getSelectedRangeFromValue(optionsMap, value)) === null || _a === void 0 ? void 0 : _a.label;
+    const cssClass = classNames([
+        "zen-date-range",
+        error ? "zen-date-range--error" : "",
+        className !== null && className !== void 0 ? className : "",
+        stepper ? "zen-date-range--with-stepper" : "",
+        stepper && currentLabel === CUSTOM_CALENDAR_ID && buttonLabel.length > 20 ? "zen-date-range--with-stepper-custom" : "",
+        !defaultValue && !value || (defaultValue === null || defaultValue === void 0 ? void 0 : defaultValue.label) === currentLabel || type && type !== ButtonType.Secondary ? "" : "zen-date-range--active"
+    ]);
+    const popupTriggerComponent = useMemo(() => _jsx(TextIconButton, { htmlType: "button", title: buttonTitle, icon: IconCalendar, iconPosition: ButtonIconPosition.Start, className: cssClass, type: type, disabled: disabled, onClick: toggleVisibility, ref: triggerRef, children: buttonLabel }), [cssClass, type, disabled, toggleVisibility, buttonLabel, buttonTitle]);
+    const chipTriggerComponent = useMemo(() => _jsx(Chip, { status: isDefaultState ? undefined : chipStatus || "active", isOpen: isOpen, disabled: disabled, onClick: toggleVisibility, onClose: isDefaultState ? undefined : handleClearClick, triggerRef: triggerRef, icon: chipIcon || IconCalendar, id: chipId, children: isDefaultState ? chipName : buttonLabel }), [isDefaultState, chipStatus, isOpen, disabled, toggleVisibility, handleClearClick, chipIcon, chipId, chipName, buttonLabel]);
+    return _jsxs(_Fragment, { children: [stepper ? _jsxs("div", { className: classNames(["zen-date-range-wrapper", driveWrapperTriggerClassName || "", classNameWrapper || ""]), children: [_jsx("button", { type: "button", disabled: checkIsRangeDisable(false), onClick: decreaseRange, className: classNames(["zen-date-range__stepper", "zen-date-range__stepper--left"]), title: translate("Previous"), children: _jsx(IconChevronLeftSmall, { size: isDrive ? "huge" : "large" }) }), popupTriggerComponent, _jsx("button", { type: "button", disabled: checkIsRangeDisable(true), onClick: increaseRange, className: classNames(["zen-date-range__stepper", "zen-date-range__stepper--right"]), title: translate("Next"), children: _jsx(IconChevronRightSmall, { size: isDrive ? "huge" : "large" }) })] }) : (chip ? chipTriggerComponent : popupTriggerComponent), isMobile ? memoizedMobileView : memoizedDesktopView, _jsx(FormFieldError, { error: error })] });
+};
+export const TRANSLATIONS = [
+    "Custom",
+    "Date range",
+    "Clear",
+    "Cancel",
+    "Apply",
+    "Reset",
+    "Today",
+    "Next",
+    "Previous",
+    "Choose dates",
+    "Date range not available",
+    "Choose your date range",
+    "Some of the dates you selected aren’t available. Please try a different range.",
+    "Please select the dates you want to view."
+];

package/esm/dateRange/dateRangeUtils.d.ts

@@ -0,0 +1,38 @@
+import { TDayName } from "../calendar/dateUtils";
+import { TDateRangeName } from "../filtersBar/components/filtersBarPeriodPicker/getRangeOption";
+interface IDateRange {
+    from: Date;
+    to: Date;
+}
+export interface IDateRangeValue extends IDateRange {
+    label: string;
+}
+export interface IDateRangeValueOptionalLabel extends IDateRange {
+    label?: string;
+}
+export interface IDateRangeOption {
+    label: string;
+    getRange: () => IDateRange;
+    hasSecondaryLabel?: boolean;
+}
+export type TDateRangeOption = IDateRangeOption | TDateRangeName;
+type TToLocalDateTime = (d: Date | string) => Date;
+type TTranslate = (s: string) => string;
+export declare const GET_TODAY_OPTION: (toLocalDateTime?: TToLocalDateTime, translate?: TTranslate, toReverseOffsetDateTime?: TToLocalDateTime) => IDateRangeOption;
+export declare const GET_YESTERDAY_OPTION: (toLocalDateTime?: TToLocalDateTime, translate?: TTranslate, toReverseOffsetDateTime?: TToLocalDateTime) => IDateRangeOption;
+export declare const GET_THIS_WEEK_OPTION: (toLocalDateTime?: TToLocalDateTime, translate?: TTranslate, firstDayOfWeek?: TDayName, toReverseOffsetDateTime?: TToLocalDateTime) => IDateRangeOption;
+export declare const GET_NEXT_WEEK_OPTION: (toLocalDateTime?: TToLocalDateTime, translate?: TTranslate, firstDayOfWeek?: TDayName, toReverseOffsetDateTime?: TToLocalDateTime) => IDateRangeOption;
+export declare const GET_LAST_WEEK_OPTION: (toLocalDateTime?: TToLocalDateTime, translate?: TTranslate, firstDayOfWeek?: TDayName, toReverseOffsetDateTime?: TToLocalDateTime) => IDateRangeOption;
+export declare const GET_THIS_MONTH_OPTION: (toLocalDateTime?: TToLocalDateTime, translate?: TTranslate, toReverseOffsetDateTime?: TToLocalDateTime) => IDateRangeOption;
+export declare const GET_NEXT_MONTH_OPTION: (toLocalDateTime?: TToLocalDateTime, translate?: TTranslate, toReverseOffsetDateTime?: TToLocalDateTime) => IDateRangeOption;
+export declare const GET_LAST_MONTH_OPTION: (toLocalDateTime?: TToLocalDateTime, translate?: TTranslate, toReverseOffsetDateTime?: TToLocalDateTime) => IDateRangeOption;
+export declare const GET_LAST_SEVEN_DAYS_OPTION: (toLocalDateTime?: TToLocalDateTime, translate?: TTranslate, toReverseOffsetDateTime?: TToLocalDateTime) => IDateRangeOption;
+export declare const GET_LAST_THIRTY_DAYS_OPTION: (toLocalDateTime?: TToLocalDateTime, translate?: TTranslate, toReverseOffsetDateTime?: TToLocalDateTime) => IDateRangeOption;
+export declare const GET_LAST_TWELVE_MONTHS_OPTION: (toLocalDateTime?: TToLocalDateTime, translate?: TTranslate, toReverseOffsetDateTime?: TToLocalDateTime) => IDateRangeOption;
+export declare const GET_LAST_THREE_MONTH_OPTION: (toLocalDateTime?: TToLocalDateTime, translate?: TTranslate, toReverseOffsetDateTime?: TToLocalDateTime) => IDateRangeOption;
+export declare const GET_LAST_QUARTER_OPTION: (toLocalDateTime?: TToLocalDateTime, translate?: TTranslate, toReverseOffsetDateTime?: TToLocalDateTime) => IDateRangeOption;
+export declare const GET_THIS_QUARTER_OPTION: (toLocalDateTime?: TToLocalDateTime, translate?: TTranslate, toReverseOffsetDateTime?: TToLocalDateTime) => IDateRangeOption;
+export declare const GET_LAST_YEAR_OPTION: (toLocalDateTime?: TToLocalDateTime, translate?: TTranslate, toReverseOffsetDateTime?: TToLocalDateTime) => IDateRangeOption;
+export declare const GET_THIS_YEAR_OPTION: (toLocalDateTime?: TToLocalDateTime, translate?: TTranslate, toReverseOffsetDateTime?: TToLocalDateTime) => IDateRangeOption;
+export declare const GET_DEFAULT_DATE_OPTIONS: (toLocalDateTime?: TToLocalDateTime, translate?: TTranslate, firstDayOfWeek?: TDayName, toReverseOffsetDateTime?: TToLocalDateTime) => IDateRangeOption[];
+export {};