@geotab/zenith 1.15.4 → 1.17.0-beta.0

package/dist/dateInputInner/dateInputInnerControlBlock.js

@@ -1,23 +1,34 @@
 "use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TRANSLATIONS = exports.DateInputInnerControlBlock = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
 const textInputRaw_1 = require("../textInputRaw/textInputRaw");
 const timePicker_1 = require("../timePicker/timePicker");
 const useLanguage_1 = require("../utils/localization/useLanguage");
 const classNames_1 = require("../commonHelpers/classNames/classNames");
 const formFieldError_1 = require("../formFieldError/formFieldError");
-const DateInputInnerControlBlock = ({ className, title, id, dateText, timePickerValue, placeholder, handleSetDateText, onBlurDateChangeHandler, requireSelection, selectTime, timeChangeHandler, isMobileView }) => {
+const react_2 = __importDefault(require("react"));
+const useDriveClassName_1 = require("../utils/theme/useDriveClassName");
+// eslint-disable-next-line @typescript-eslint/naming-convention
+exports.DateInputInnerControlBlock = react_2.default.forwardRef(function InnerDateInputControlBlock(props, ref) {
+    const { className, title, id, dateText, timePickerValue, placeholder, handleSetDateText, onBlurDateChangeHandler, requireSelection, selectTime, timeChangeHandler, isMobileView, isActiveField, assistiveText } = props;
     const { translate } = (0, useLanguage_1.useLanguage)();
+    const driveAssistiveClass = (0, useDriveClassName_1.useDriveClassName)("zen-form-field__text");
     const isHasDateError = requireSelection && !dateText;
     const isHasTimeError = requireSelection && !timePickerValue;
+    const memoizedDateInput = (0, react_1.useMemo)(() => (0, jsx_runtime_1.jsx)(textInputRaw_1.TextInputRaw, { className: (0, classNames_1.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 = (0, react_1.useMemo)(() => selectTime
+        ? (0, jsx_runtime_1.jsxs)("div", { className: "zen-date-input-inner__inputs-block-item", children: [(0, jsx_runtime_1.jsx)(timePicker_1.TimePicker, { className: (0, classNames_1.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 ? (0, jsx_runtime_1.jsx)(formFieldError_1.FormFieldError, { error: translate("The time must be set") }) : null] })
+        : null, [isActiveField, isHasTimeError, isMobileView, selectTime, timeChangeHandler, timePickerValue, translate, id]);
     return (0, jsx_runtime_1.jsxs)("div", { className: (0, classNames_1.classNames)(["zen-date-input-inner__control-block", className || ""]), children: [title
                 ? (0, jsx_runtime_1.jsx)("label", { htmlFor: id, className: "zen-date-input-inner__label", children: title })
-                : null, (0, jsx_runtime_1.jsxs)("div", { className: "zen-date-input-inner__inputs-block", children: [(0, jsx_runtime_1.jsxs)("div", { className: "zen-date-input-inner__inputs-block-item", children: [(0, jsx_runtime_1.jsx)(textInputRaw_1.TextInputRaw, { className: "zen-date-input-inner__text-input", id: id, value: dateText, onChange: handleSetDateText, onBlur: onBlurDateChangeHandler, placeholder: placeholder, autocomplete: "off", isError: isHasDateError }), isHasDateError ? (0, jsx_runtime_1.jsx)(formFieldError_1.FormFieldError, { error: translate("The date must be set") }) : null] }), selectTime
-                        ? (0, jsx_runtime_1.jsxs)("div", { className: "zen-date-input-inner__inputs-block-item", children: [(0, jsx_runtime_1.jsx)(timePicker_1.TimePicker, { className: (0, classNames_1.classNames)(["zen-date-input-inner__text-input", isHasTimeError ? "zen-date-input-inner__text-input--error" : ""]), value: timePickerValue, onChange: timeChangeHandler, isMobileView: isMobileView, fullWidth: true }), isHasTimeError ? (0, jsx_runtime_1.jsx)(formFieldError_1.FormFieldError, { error: translate("The time must be set") }) : null] })
-                        : null] })] });
-};
-exports.DateInputInnerControlBlock = DateInputInnerControlBlock;
+                : null, (0, jsx_runtime_1.jsxs)("div", { className: "zen-date-input-inner__inputs-block", children: [(0, jsx_runtime_1.jsxs)("div", { className: "zen-date-input-inner__inputs-block-item", children: [memoizedDateInput, isHasDateError ? (0, jsx_runtime_1.jsx)(formFieldError_1.FormFieldError, { error: translate("The date must be set") }) : null] }), memoizedTimeSelect] }), assistiveText ? (0, jsx_runtime_1.jsx)("div", { className: (0, classNames_1.classNames)(["zen-date-input-inner__assistive-text", "zen-form-field__text", driveAssistiveClass || ""]), children: assistiveText }) : null] });
+});
 exports.TRANSLATIONS = [
     "The date must be set",
     "The time must be set"

package/dist/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/dist/dateInputInner/dateInputInnerReducer.js

@@ -0,0 +1,134 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.dateInputInnerReducer = exports.getInitialDateInputInnerState = exports.DateInputInnerStateActionType = exports.AssistiveText = void 0;
+exports.AssistiveText = {
+    DateAdjusted: "date-adjusted",
+    TimeAdjusted: "time-adjusted",
+    None: "none"
+};
+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 || (exports.DateInputInnerStateActionType = DateInputInnerStateActionType = {}));
+const getInitialDateInputInnerState = (id, startText, endText, dateRange) => ({
+    dateRangeMode: dateRange || false,
+    startDateId: `${id}-start`,
+    endDateId: `${id}-end`,
+    startDateText: startText,
+    endDateText: endText,
+    startAssistiveText: exports.AssistiveText.None,
+    endAssistiveText: exports.AssistiveText.None,
+    currentActiveField: "start",
+    inputKeyDownBehavior: "start"
+});
+exports.getInitialDateInputInnerState = getInitialDateInputInnerState;
+// eslint-disable-next-line complexity
+function dateInputInnerReducer(state, action) {
+    if (action.type === DateInputInnerStateActionType.ChangePeriod) {
+        const getEndAssistiveText = () => {
+            if (!state.dateRangeMode) {
+                return exports.AssistiveText.None;
+            }
+            if (action.payload.emittedBy === "end" && state.currentActiveField === "end") {
+                return exports.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 exports.AssistiveText.None;
+            }
+            if (action.payload.emittedBy === "start" && state.currentActiveField === "start") {
+                return exports.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 exports.AssistiveText.None;
+            }
+            if (state.currentActiveField === "start") {
+                return exports.AssistiveText.None;
+            }
+            return state.startDateText !== action.payload.start || action.payload.hasAssistiveText ? exports.AssistiveText.DateAdjusted : exports.AssistiveText.None;
+        };
+        const getNextEndAssistiveText = () => {
+            if (!state.dateRangeMode) {
+                return exports.AssistiveText.None;
+            }
+            if (state.currentActiveField === "end") {
+                return exports.AssistiveText.None;
+            }
+            return state.endDateText !== action.payload.end || action.payload.hasAssistiveText ? exports.AssistiveText.DateAdjusted : exports.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" ? exports.AssistiveText.None : state.startAssistiveText, endAssistiveText: state.currentActiveField === "end" ? exports.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" ? exports.AssistiveText.None : state.startAssistiveText, endAssistiveText: state.currentActiveField === "end" ? exports.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;
+}
+exports.dateInputInnerReducer = dateInputInnerReducer;

package/dist/dateRange/dateRange.d.ts

@@ -34,6 +34,7 @@ export interface IDateRangeUnsetValue extends IDateRangeBase {
     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/dist/dateRange/dateRange.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.TRANSLATIONS = exports.DateRange = void 0;
+exports.TRANSLATIONS = exports.DateRange = exports.parseLabel = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const textIconButton_1 = require("../textIconButton/textIconButton");
 const button_1 = require("../button/button");
@@ -31,10 +31,12 @@ const parseLabel = (option, dateFormat, translate, toLacalFn) => {
     }
     return `${(0, formatDate_1.formatDate)(localeFrom, dateFormat, translate)} - ${(0, formatDate_1.formatDate)(localeTo, dateFormat, translate)}`;
 };
+exports.parseLabel = parseLabel;
 const DateRange = ({ className, classNamePopup, defaultValue, value, onChange, options: optionsArg, type, id, disabled, dropDownTitle, hasApplyButton, disableFutureDates, disablePastDates, disableDatesBefore, disableDatesAfter, withCalendar, lockStartDate, lockEndDate, timeSelect, error, allowUnsetValue = false }) => {
     const { translate } = (0, useLanguage_1.useLanguage)();
     const isMobile = (0, useMobile_1.useMobile)();
     const drivePopupClassName = (0, useDriveClassName_1.useDriveClassName)("zen-date-range-popup");
+    const driveWrapperClassName = (0, useDriveClassName_1.useDriveClassName)("zen-date-range-popup-wrapper");
     const [showMobileCalendar, setShowMobileCalendar] = (0, react_1.useState)(false);
     const { dateFormat, toLocalDateTime, toReverseOffsetDateTime, weekStartsOnSunday } = (0, react_1.useContext)(userFormatContext_1.userFormatContext);
     const [selectedRange, setSelectedRange] = (0, react_1.useState)(value);
@@ -43,17 +45,13 @@ const DateRange = ({ className, classNamePopup, defaultValue, value, onChange, o
     const [isOpen, setIsOpen] = (0, react_1.useState)(false);
     const prevIsOpenRef = (0, react_1.useRef)(false);
     const [customDate, setCustomDate] = (0, react_1.useState)((0, normalizeDates_1.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 isCustomDefaultState = !defaultValue && !selectedRange || (defaultValue === null || defaultValue === void 0 ? void 0 : defaultValue.label) === dateRangeInner_1.CUSTOM_CALENDAR_ID
-        && customDate.from && customDate.to && (defaultValue.from.toISOString() === customDate.from && defaultValue.to.toISOString() === customDate.to) || false;
     const triggerRef = (0, react_1.useRef)(null);
     const [prevSelection, setPrevSelection] = (0, react_1.useState)(value);
     const componentId = (0, useUniqueId_1.useUniqueId)();
     const calendarLabel = translate(dateRangeInner_1.CUSTOM_CALENDAR_ID);
-    const options = (0, react_1.useMemo)(() => optionsArg.map(option => (0, getRangeOption_1.getRangeOption)(option, translate, toLocalDateTime, weekStartsOnSunday ? "Sunday" : "Monday", toReverseOffsetDateTime))
-        .filter(option => !!option), [optionsArg, translate, toLocalDateTime, weekStartsOnSunday, toReverseOffsetDateTime]);
-    const dateRangeOptions = (0, react_1.useMemo)(() => options.map(option => ({ id: option.id, label: option.label })).filter(el => el.id !== dateRangeInner_1.CUSTOM_CALENDAR_ID), [options]);
-    const hasCustomOption = (0, react_1.useMemo)(() => optionsArg.find(option => option === dateRangeInner_1.CUSTOM_CALENDAR_ID) !== undefined
-        || optionsArg.find(option => option.label === dateRangeInner_1.CUSTOM_CALENDAR_ID) !== undefined || withCalendar, [optionsArg, withCalendar]);
+    const getCustomRange = (0, react_1.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 = (0, react_1.useMemo)(() => (0, getRangeOption_1.getRangeOptionsArray)(optionsArg, translate, toLocalDateTime, weekStartsOnSunday ? "Sunday" : "Monday", toReverseOffsetDateTime, withCalendar || false, prevSelection && prevSelection.label === dateRangeInner_1.CUSTOM_CALENDAR_ID, prevSelection ? getCustomRange : undefined), [optionsArg, translate, toLocalDateTime, weekStartsOnSunday, toReverseOffsetDateTime, withCalendar, prevSelection, getCustomRange]);
+    const hasCustomOption = (0, react_1.useMemo)(() => options.find(option => option.id === dateRangeInner_1.CUSTOM_CALENDAR_ID) !== undefined, [options]);
     const cssClass = (0, classNames_1.classNames)([
         "zen-date-range",
         error ? "zen-date-range--error" : "",
@@ -71,7 +69,7 @@ const DateRange = ({ className, classNamePopup, defaultValue, value, onChange, o
         if (selection && val !== dateRangeInner_1.CUSTOM_CALENDAR_ID) {
             return selection.label;
         }
-        return parseLabel(rangeValue, dateFormat, translate, toLocalDateTime);
+        return (0, exports.parseLabel)(rangeValue, dateFormat, translate, toLocalDateTime);
     }, [dateFormat, options, translate, toLocalDateTime]);
     (0, react_1.useEffect)(() => {
         if ((prevSelection === null || prevSelection === void 0 ? void 0 : prevSelection.label) !== (value === null || value === void 0 ? void 0 : value.label)) {
@@ -80,9 +78,10 @@ const DateRange = ({ className, classNamePopup, defaultValue, value, onChange, o
         }
     }, [prevSelection === null || prevSelection === void 0 ? void 0 : prevSelection.label, value]);
     const handleDateRangeSelection = (0, react_1.useCallback)((newVal) => {
+        var _a, _b;
         const selection = options.find(option => option.id === newVal);
         newVal === dateRangeInner_1.CUSTOM_CALENDAR_ID && setShowMobileCalendar(true);
-        if (selection) {
+        if (selection && newVal !== dateRangeInner_1.CUSTOM_CALENDAR_ID && selection.getRange) {
             const range = selection.getRange();
             const normalizedDates = (0, normalizeDates_1.normalizeDates)(range.from.toISOString(), range.to.toISOString(), disableFutureDates, disablePastDates, disableDatesBefore, disableDatesAfter);
             const newRange = newVal === dateRangeInner_1.CUSTOM_CALENDAR_ID ?
@@ -93,7 +92,9 @@ const DateRange = ({ className, classNamePopup, defaultValue, value, onChange, o
             !hasApplyButton && onChange(Object.assign({ label: selection.id }, newRange));
         }
         else {
-            const normalizedDates = (0, normalizeDates_1.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 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 = (0, normalizeDates_1.normalizeDates)(startDateForNormalize, endDateForNormalize, disableFutureDates, disablePastDates, disableDatesBefore, disableDatesAfter);
             const newRange = newVal === dateRangeInner_1.CUSTOM_CALENDAR_ID ?
                 { from: new Date(normalizedDates.from), to: new Date(normalizedDates.to) }
                 : undefined;
@@ -104,7 +105,7 @@ const DateRange = ({ className, classNamePopup, defaultValue, value, onChange, o
             !hasApplyButton && onChange({ label: newVal, from: newValueFrom, to: newValueTo });
         }
         !hasApplyButton && newVal !== dateRangeInner_1.CUSTOM_CALENDAR_ID && setIsOpen(false);
-    }, [options, hasApplyButton, disableFutureDates, disablePastDates, disableDatesBefore, disableDatesAfter, onChange, value === null || value === void 0 ? void 0 : value.from, value === null || value === void 0 ? void 0 : value.to]);
+    }, [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 = (0, react_1.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) };
@@ -143,12 +144,13 @@ const DateRange = ({ className, classNamePopup, defaultValue, value, onChange, o
     }, []);
     (0, react_1.useEffect)(() => {
         setCustomDate({ from: value === null || value === void 0 ? void 0 : value.from.toISOString(), to: value === null || value === void 0 ? void 0 : value.to.toISOString() });
+        setPrevSelection(value);
     }, [value]);
     const range = (0, react_1.useMemo)(() => ({ from: customDate.from, to: customDate.to }), [customDate.from, customDate.to]);
-    const component = (0, react_1.useMemo)(() => (0, jsx_runtime_1.jsx)(dateRangeInner_1.DateRangeInner, { id: id || componentId, options: dateRangeOptions, onOptionSelect: handleDateRangeSelection, onCalendarSelect: hasCustomOption ? (val) => {
+    const component = (0, react_1.useMemo)(() => (0, jsx_runtime_1.jsx)(dateRangeInner_1.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, dateRangeOptions, handleDateRangeSelection, hasCustomOption, selectedRange === null || selectedRange === void 0 ? void 0 : selectedRange.label, range, timeSelect,
-        disableFutureDates, disablePastDates, disableDatesBefore, disableDatesAfter, isMobile, showMobileCalendar, lockStartDate, lockEndDate]);
+        } : 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 = (0, react_1.useCallback)(() => {
         setIsOpen(false);
     }, [setIsOpen]);
@@ -161,18 +163,17 @@ const DateRange = ({ className, classNamePopup, defaultValue, value, onChange, o
         }
         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 = (0, react_1.useMemo)(() => (0, jsx_runtime_1.jsx)(controlledPopup_1.ControlledPopup, { className: (0, classNames_1.classNames)(["zen-date-range-popup-wrapper", classNamePopup !== null && classNamePopup !== void 0 ? classNamePopup : ""]), ariaLabel: translate("Date range"), useTrapFocusWithTrigger: "on", role: "dialog", triggerRef: triggerRef, onOpenChange: setIsOpen, shouldHoldScroll: true, isOpen: isOpen, recalculateOnScroll: true, children: (0, jsx_runtime_1.jsxs)("div", { className: (0, classNames_1.classNames)(["zen-date-range-popup", drivePopupClassName || ""]), children: [(0, jsx_runtime_1.jsx)("div", { className: "zen-date-range-popup__header", children: title }), component, (0, jsx_runtime_1.jsxs)("div", { className: "zen-date-range-popup__footer", children: [isCustomDateOption ? null : (0, jsx_runtime_1.jsx)(button_1.Button, { className: "zen-date-range-popup__button-clear", type: buttonType_1.ButtonType.Tertiary, disabled: isDefaultState, onClick: handleClearClick, children: translate("Clear") }), (!isCustomDateOption && hasApplyButton) &&
-                            (0, jsx_runtime_1.jsx)(button_1.Button, { className: "zen-date-range-popup__button-reset", type: buttonType_1.ButtonType.Secondary, onClick: handleCancelClick, children: translate("Cancel") }), isCustomDateOption ? (0, jsx_runtime_1.jsx)(button_1.Button, { className: "zen-date-range-popup__button-reset", type: buttonType_1.ButtonType.Tertiary, disabled: isCustomDefaultState, onClick: handleClearClick, children: translate("Reset") }) : null, (isCustomDateOption || hasApplyButton) && (0, jsx_runtime_1.jsx)(button_1.Button, { className: "zen-date-range-popup__button-apply", type: buttonType_1.ButtonType.Primary, disabled: (isCustomDateOption && (!customDate.from || !customDate.to)) || isValueNotChanged || !selectedRange, onClick: handleApplyClick, children: translate("Apply") })] })] }) }), [classNamePopup, component, customDate.from, customDate.to, drivePopupClassName, handleApplyClick, handleCancelClick, handleClearClick, hasApplyButton, isCustomDateOption, isCustomDefaultState, isDefaultState, isOpen, isValueNotChanged, selectedRange, title, translate]);
+    const memoizedDesktopView = (0, react_1.useMemo)(() => (0, jsx_runtime_1.jsx)(controlledPopup_1.ControlledPopup, { className: (0, classNames_1.classNames)(["zen-date-range-popup-wrapper", driveWrapperClassName || ""]), ariaLabel: translate("Date range"), useTrapFocusWithTrigger: "on", role: "dialog", triggerRef: triggerRef, onOpenChange: setIsOpen, shouldHoldScroll: true, isOpen: isOpen, recalculateOnScroll: true, children: (0, jsx_runtime_1.jsxs)("div", { className: (0, classNames_1.classNames)(["zen-date-range-popup", drivePopupClassName || "", classNamePopup !== null && classNamePopup !== void 0 ? classNamePopup : ""]), children: [(0, jsx_runtime_1.jsx)("div", { className: "zen-date-range-popup__header", children: title }), component, (0, jsx_runtime_1.jsxs)("div", { className: "zen-date-range-popup__footer", children: [(0, jsx_runtime_1.jsx)(button_1.Button, { className: "zen-date-range-popup__button-clear", type: buttonType_1.ButtonType.Tertiary, disabled: isDefaultState, onClick: handleClearClick, children: translate("Clear") }), (!isCustomDateOption && hasApplyButton) &&
+                            (0, jsx_runtime_1.jsx)(button_1.Button, { className: "zen-date-range-popup__button-reset", type: buttonType_1.ButtonType.Secondary, onClick: handleCancelClick, children: translate("Cancel") }), (isCustomDateOption || hasApplyButton) && (0, jsx_runtime_1.jsx)(button_1.Button, { className: "zen-date-range-popup__button-apply", type: buttonType_1.ButtonType.Primary, disabled: (isCustomDateOption && (!customDate.from || !customDate.to)) || isValueNotChanged || !selectedRange, onClick: handleApplyClick, children: translate("Apply") })] })] }) }), [classNamePopup, component, customDate.from, customDate.to, drivePopupClassName, driveWrapperClassName, handleApplyClick, handleCancelClick, handleClearClick, hasApplyButton, isCustomDateOption, isDefaultState, isOpen, isValueNotChanged, selectedRange, title, translate]);
     const memoizedMobileFooter = (0, react_1.useMemo)(() => {
-        const clearButton = showMobileCalendar ? null : (0, jsx_runtime_1.jsx)(button_1.Button, { type: buttonType_1.ButtonType.Tertiary, disabled: isDefaultState, onClick: handleClearClick, children: translate("Clear") });
+        const clearButton = (0, jsx_runtime_1.jsx)(button_1.Button, { type: buttonType_1.ButtonType.Tertiary, disabled: isDefaultState, onClick: handleClearClick, children: translate("Clear") });
         const cancelButton = hasApplyButton && !showMobileCalendar ? (0, jsx_runtime_1.jsx)(button_1.Button, { type: buttonType_1.ButtonType.Secondary, onClick: handleCancelClick, children: translate("Cancel") }) : null;
-        const resetButton = showMobileCalendar ? (0, jsx_runtime_1.jsx)(button_1.Button, { type: buttonType_1.ButtonType.Secondary, disabled: isCustomDefaultState, onClick: handleClearClick, children: translate("Reset") }) : null;
         const applyButton = showMobileCalendar || hasApplyButton ?
             (0, jsx_runtime_1.jsx)(button_1.Button, { type: buttonType_1.ButtonType.Primary, disabled: (isCustomDateOption && (!customDate.from || !customDate.to)) || isValueNotChanged || !selectedRange, onClick: handleApplyClick, children: translate("Apply") }) : null;
-        return (0, jsx_runtime_1.jsxs)(footerButtons_1.FooterButtons, { children: [clearButton, cancelButton, applyButton, resetButton] });
-    }, [customDate.from, customDate.to, handleApplyClick, handleCancelClick, handleClearClick, hasApplyButton, isCustomDateOption, isCustomDefaultState, isDefaultState, isValueNotChanged,
-        selectedRange, showMobileCalendar, translate]);
-    const memoizedMobileView = (0, react_1.useMemo)(() => (0, jsx_runtime_1.jsxs)(mobileSheet_1.MobileSheet, { className: (0, classNames_1.classNames)(["zen-date-range-mobile-sheet", classNamePopup || ""]), label: translate("Date range"), triggerRef: triggerRef, isOpen: isOpen, onHidePanel: memoizedHandleClose, onCloseClick: memoizedHandleClose, useTrapFocusWithTrigger: true, isBackVisible: showMobileCalendar, onBackClick: handleMobileBackClick, children: [(0, jsx_runtime_1.jsx)(mobileSheet_1.MobileSheet.Title, { children: showMobileCalendar ? calendarLabel : title }), (0, jsx_runtime_1.jsx)(mobileSheet_1.MobileSheet.Content, { children: component }), (0, jsx_runtime_1.jsx)(mobileSheet_1.MobileSheet.Footer, { children: memoizedMobileFooter })] }), [calendarLabel, classNamePopup, component, handleMobileBackClick, isOpen, memoizedHandleClose, memoizedMobileFooter, showMobileCalendar, title, translate]);
+        return (0, jsx_runtime_1.jsxs)(footerButtons_1.FooterButtons, { children: [applyButton, cancelButton, clearButton] });
+    }, [customDate.from, customDate.to, handleApplyClick, handleCancelClick, handleClearClick, hasApplyButton, isCustomDateOption, isDefaultState, isValueNotChanged, selectedRange,
+        showMobileCalendar, translate]);
+    const memoizedMobileView = (0, react_1.useMemo)(() => (0, jsx_runtime_1.jsxs)(mobileSheet_1.MobileSheet, { className: (0, classNames_1.classNames)(["zen-date-range-mobile-sheet", classNamePopup ? `${classNamePopup}--mobile-sheet` : ""]), label: translate("Date range"), triggerRef: triggerRef, isOpen: isOpen, onHidePanel: memoizedHandleClose, onCloseClick: memoizedHandleClose, useTrapFocusWithTrigger: true, isBackVisible: showMobileCalendar, onBackClick: handleMobileBackClick, children: [(0, jsx_runtime_1.jsx)(mobileSheet_1.MobileSheet.Title, { children: showMobileCalendar ? calendarLabel : title }), (0, jsx_runtime_1.jsx)(mobileSheet_1.MobileSheet.Content, { children: component }), (0, jsx_runtime_1.jsx)(mobileSheet_1.MobileSheet.Footer, { children: memoizedMobileFooter })] }), [calendarLabel, classNamePopup, component, handleMobileBackClick, isOpen, memoizedHandleClose, memoizedMobileFooter, showMobileCalendar, title, translate]);
     (0, react_1.useEffect)(() => {
         if (!isOpen && prevIsOpenRef.current) {
             setTimeout(() => {
@@ -191,5 +192,6 @@ exports.TRANSLATIONS = [
     "Clear",
     "Cancel",
     "Apply",
-    "Reset"
+    "Reset",
+    "Today"
 ];

package/dist/dateRange/dateRangeUtils.d.ts

@@ -10,6 +10,7 @@ export interface IDateRangeValue extends IDateRange {
 export interface IDateRangeOption {
     label: string;
     getRange: () => IDateRange;
+    hasSecondaryLabel?: boolean;
 }
 export type TDateRangeOption = IDateRangeOption | TDateRangeName;
 type TToLocalDateTime = (d: Date | string) => Date;

package/dist/dateRangeInner/dateRangeInner.d.ts

@@ -2,10 +2,10 @@
 import "./dateRangeInner.less";
 import { IZenComponentProps } from "../commonHelpers/zenComponent";
 import { ICalendarRange } from "../calendar/calendar";
-import { IDateRangeInnerOption, TDateRangeName } from "../filtersBar/components/filtersBarPeriodPicker/getRangeOption";
+import { IDateRangeOptionsItem } from "../filtersBar/components/filtersBarPeriodPicker/getRangeOption";
 export interface IDateRangeInner extends IZenComponentProps {
     id: string;
-    options: IDateRangeInnerOption[] | TDateRangeName[];
+    options: IDateRangeOptionsItem[];
     onOptionSelect: (selection: string) => void;
     onCalendarSelect?: (range: ICalendarRange) => void;
     selection?: string;

package/dist/dateRangeInner/dateRangeInner.js

@@ -8,41 +8,38 @@ const react_1 = require("react");
 const useLanguage_1 = require("../utils/localization/useLanguage");
 const userFormatContext_1 = require("../utils/userFormat/userFormatContext");
 const formatDate_1 = require("../utils/formatDate");
-const getRangeOption_1 = require("../filtersBar/components/filtersBarPeriodPicker/getRangeOption");
 const iconChevronRight_1 = require("../icons/iconChevronRight");
+const dateRange_1 = require("../dateRange/dateRange");
+const normalizeDates_1 = require("../filtersBar/components/filtersBarPeriodPicker/normalizeDates");
+const classNames_1 = require("../commonHelpers/classNames/classNames");
 exports.CUSTOM_CALENDAR_ID = "Custom";
 const DateRangeInner = ({ id, options: optionsArg, selection, range = { from: undefined, to: undefined }, onOptionSelect, onCalendarSelect, timeSelect, disableFutureDates, disablePastDates, disableDatesAfter, disableDatesBefore, showMobileCalendar, setShowMobileCalendar }) => {
     const { translate } = (0, useLanguage_1.useLanguage)();
     const isMobileView = !!setShowMobileCalendar;
-    const { dateFormat, weekStartsOnSunday, toLocalDateTime, toReverseOffsetDateTime } = (0, react_1.useContext)(userFormatContext_1.userFormatContext);
+    const { dateFormat, weekStartsOnSunday, toLocalDateTime } = (0, react_1.useContext)(userFormatContext_1.userFormatContext);
     const dateFormatter = (d) => (0, formatDate_1.formatDate)(toLocalDateTime(d), dateFormat, translate);
     const dateDeformatter = (d) => (0, formatDate_1.deformatDate)(d, dateFormat, translate) || new Date("");
     const isCalendarVisible = !!onCalendarSelect;
     const calendarLabel = translate(exports.CUSTOM_CALENDAR_ID);
-    const options = (0, react_1.useMemo)(() => optionsArg.map((opt) => (0, getRangeOption_1.getRangeInnerOption)(opt, translate, toLocalDateTime, weekStartsOnSunday ? "Sunday" : "Monday", toReverseOffsetDateTime))
-        .filter(opt => !!opt), [optionsArg, translate, toLocalDateTime, weekStartsOnSunday, toReverseOffsetDateTime]);
+    const normalizedUnknownRange = (0, react_1.useMemo)(() => (0, normalizeDates_1.normalizeDates)(undefined, undefined, disableFutureDates, disablePastDates, disableDatesBefore, disableDatesAfter), [disableDatesAfter, disableDatesBefore, disableFutureDates, disablePastDates]);
+    const options = (0, react_1.useMemo)(() => optionsArg.map((opt) => (Object.assign(Object.assign({}, opt), (opt.hasSecondaryLabel ? { secondaryLabel: opt.getRange ? (0, dateRange_1.parseLabel)(Object.assign({ label: opt.label }, opt.getRange()), dateFormat, translate, toLocalDateTime)
+            : (0, dateRange_1.parseLabel)({ label: "unknown", from: new Date(normalizedUnknownRange.from), to: new Date(normalizedUnknownRange.to) }, dateFormat, translate, toLocalDateTime) } : {})))), [optionsArg, dateFormat, translate, toLocalDateTime, normalizedUnknownRange.from, normalizedUnknownRange.to]);
     const items = (0, react_1.useMemo)(() => {
         const handleButtonClick = () => {
             setShowMobileCalendar && setShowMobileCalendar(true);
             selection !== exports.CUSTOM_CALENDAR_ID && onOptionSelect(exports.CUSTOM_CALENDAR_ID);
         };
-        const mobileCustomLabel = (label) => (0, jsx_runtime_1.jsxs)("button", { type: "button", className: "zen-date-range-inner__mobile-custom-label", onClick: handleButtonClick, children: [(0, jsx_runtime_1.jsx)("div", { children: label }), (0, jsx_runtime_1.jsx)("div", { className: "zen-date-range-inner__mobile-custom-icon-wrapper", children: (0, jsx_runtime_1.jsx)(iconChevronRight_1.IconChevronRight, { size: "large" }) })] });
+        const mobileCustomLabel = (label, secondaryLabel) => (0, jsx_runtime_1.jsxs)("button", { type: "button", onClick: handleButtonClick, className: (0, classNames_1.classNames)(["zen-date-range-inner__mobile-custom-label", secondaryLabel === undefined ? "zen-date-range-inner__mobile-custom-label--no-secondary" : ""]), children: [(0, jsx_runtime_1.jsxs)("div", { className: "zen-date-range-inner__range-label", children: [(0, jsx_runtime_1.jsx)("div", { children: label }), secondaryLabel ? (0, jsx_runtime_1.jsx)("div", { className: "zen-date-range-inner__label-secondary", children: secondaryLabel }) : null] }), (0, jsx_runtime_1.jsx)("div", { className: "zen-date-range-inner__mobile-custom-icon-wrapper", children: (0, jsx_runtime_1.jsx)(iconChevronRight_1.IconChevronRight, { size: "large" }) })] });
+        const getLabel = (mainLabel, secondaryLabel) => (0, jsx_runtime_1.jsxs)("div", { className: "zen-date-range-inner__range-label", children: [(0, jsx_runtime_1.jsx)("div", { children: mainLabel }), secondaryLabel ? (0, jsx_runtime_1.jsx)("div", { className: "zen-date-range-inner__label-secondary", children: secondaryLabel }) : null] });
         const optionsToPass = options.map(option => ({
             id: option.id,
             value: option.id,
-            children: option.label,
+            children: isMobileView && option.id === "Custom" ? mobileCustomLabel(calendarLabel, option.secondaryLabel)
+                : getLabel(option.label, option.secondaryLabel),
             key: option.id
         }));
-        if (isCalendarVisible) {
-            optionsToPass.push({
-                id: exports.CUSTOM_CALENDAR_ID,
-                value: exports.CUSTOM_CALENDAR_ID,
-                children: isMobileView ? mobileCustomLabel(calendarLabel) : calendarLabel,
-                key: exports.CUSTOM_CALENDAR_ID
-            });
-        }
         return optionsToPass;
-    }, [calendarLabel, isCalendarVisible, isMobileView, onOptionSelect, options, selection, setShowMobileCalendar]);
+    }, [calendarLabel, isMobileView, onOptionSelect, options, selection, setShowMobileCalendar]);
     const calendarId = (0, react_1.useMemo)(() => `${id}-calendar`, [id]);
     const optionSelectHandler = (0, react_1.useCallback)(e => {
         let selectedValue = e.target.value;
@@ -66,11 +63,12 @@ const DateRangeInner = ({ id, options: optionsArg, selection, range = { from: un
         return null;
     }, [id, isCalendarVisible, isMobileView, items, optionSelectHandler, selection, showMobileCalendar]);
     return (0, jsx_runtime_1.jsxs)("div", { id: id, className: "zen-date-range-inner", children: [memoizedRadioGroup, isCalendarVisible && selection === exports.CUSTOM_CALENDAR_ID && (!isMobileView || showMobileCalendar)
-                ? (0, jsx_runtime_1.jsx)("div", { className: "zen-date-range-inner__calendar-wrapper", children: (0, jsx_runtime_1.jsx)(dateInputInner_1.DateInputInner, { id: calendarId, value: range, onChange: calendarSelectHandler, dateFormat: dateFormat, dateFormatter: dateFormatter, dateDeformatter: dateDeformatter, startDayOfWeek: weekStartsOnSunday ? 0 : 1, disableFutureDates: disableFutureDates, disablePastDates: disablePastDates, disableDatesBefore: disableDatesBefore, disableDatesAfter: disableDatesAfter, dateRangeMode: true, selectTime: timeSelect, isMobileView: isMobileCalendar, requireSelection: true }) })
+                ? (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)("div", { className: "zen-date-range-inner__calendar-wrapper", children: (0, jsx_runtime_1.jsx)(dateInputInner_1.DateInputInner, { id: calendarId, value: range, onChange: calendarSelectHandler, dateFormat: dateFormat, dateFormatter: dateFormatter, dateDeformatter: dateDeformatter, startDayOfWeek: weekStartsOnSunday ? 0 : 1, disableFutureDates: disableFutureDates, disablePastDates: disablePastDates, disableDatesBefore: disableDatesBefore, disableDatesAfter: disableDatesAfter, dateRangeMode: true, selectTime: timeSelect, isMobileView: isMobileCalendar, requireSelection: true }) }) })
                 : null] });
 };
 exports.DateRangeInner = DateRangeInner;
 exports.TRANSLATIONS = [
     "Custom Date",
-    "Custom Date and Time range"
+    "Custom Date and Time range",
+    "Today"
 ];

package/dist/dropdown/dropdown.js

@@ -17,6 +17,7 @@ const dialogHelpers_1 = require("../dialog/dialogHelpers");
 const useLanguage_1 = require("../utils/localization/useLanguage");
 const dropdownPopup_1 = require("./dropdownPopup");
 const useMobile_1 = require("../commonHelpers/hooks/useMobile");
+const useDebounce_1 = require("../commonHelpers/hooks/useDebounce");
 const Dropdown = ({ className, classNamePopup, getData, errorHandler, dataItems, onChange, value, defaultValue, placeholder, dialogAriaLabel, width, isLoading, title, triggerAriaLabel, disabled, inputId, filterName, showCounterPill = true, showSelection, fullWidthTriggerButton, hasApplyButton, searchField = true, multiselect = true, forceSelection = false, selectAllButton = true, getNamedItems, getSelectedItem, buttonType = "secondary", listLimit = 500, alignment = "bottom-left", error, sortFn }) => {
     var _a;
     const [state, dispatchState] = (0, react_1.useReducer)(stateReducer_1.stateReducer, (0, stateReducer_1.getInitialState)(dataItems || [], value, defaultValue));
@@ -72,6 +73,7 @@ const Dropdown = ({ className, classNamePopup, getData, errorHandler, dataItems,
         return Promise.all(promises).then((items) => {
             const result = items.filter(el => el !== undefined);
             dispatchState({ type: stateActionType_1.StateActionType.UpdateSelectedItems, payload: result });
+            getNamedItemsHasBeenCalled.current = false;
         }).catch(() => {
             dispatchState({ type: stateActionType_1.StateActionType.UpdateSelectedItems, payload: [] });
         });
@@ -164,21 +166,25 @@ const Dropdown = ({ className, classNamePopup, getData, errorHandler, dataItems,
     const customGetData = (0, react_1.useCallback)((str) => (str && dataItems
         ? Promise.resolve(dataItems.filter(el => { var _a; return (((_a = el.name) === null || _a === void 0 ? void 0 : _a.toLocaleLowerCase()) || "").indexOf(str.toLocaleLowerCase()) > -1; }))
         : Promise.resolve(dataItems || [])), [dataItems]);
+    const handleData = (0, react_1.useCallback)((data, searchVal) => {
+        if (data.length && !searchVal && (getData || dataItems)) {
+            dispatchState({ type: stateActionType_1.StateActionType.CreateMap, payload: data });
+            previousMapDataItems.current = [...data];
+        }
+        dispatchState({ type: stateActionType_1.StateActionType.SetListData, payload: data });
+        searchVal && dispatchState({ type: stateActionType_1.StateActionType.SetCurrentId, payload: undefined });
+        data.length ? dispatchState({ type: stateActionType_1.StateActionType.ShowList, payload: undefined }) : dispatchState({ type: stateActionType_1.StateActionType.ShowEmptyList, payload: undefined });
+    }, [getData, dataItems]);
+    const handleError = (0, react_1.useCallback)((e) => {
+        errorHandler(e);
+        dispatchState({ type: stateActionType_1.StateActionType.NothingToShow, payload: undefined });
+    }, [errorHandler]);
+    const debouncedGetData = (0, useDebounce_1.useDebounce)((signal, searchValue) => getData ? getData(signal, searchValue).then((data) => handleData(data, searchValue)).catch(handleError)
+        : customGetData(searchValue).then((data) => handleData(data, searchValue)).catch(handleError), 200);
     const controlData = (0, react_1.useCallback)((signal, searchValue) => {
         dispatchState({ type: stateActionType_1.StateActionType.ShowWaiting, payload: undefined });
-        (getData ? getData(signal, searchValue) : customGetData(searchValue)).then(data => {
-            if (data.length && !searchValue && (getData || dataItems) && !(0, dropdownHelper_1.compareObjectsArrays)(data, previousMapDataItems.current)) {
-                dispatchState({ type: stateActionType_1.StateActionType.CreateMap, payload: data });
-                previousMapDataItems.current = [...data];
-            }
-            dispatchState({ type: stateActionType_1.StateActionType.SetListData, payload: data });
-            searchValue && dispatchState({ type: stateActionType_1.StateActionType.SetCurrentId, payload: undefined });
-            data.length ? dispatchState({ type: stateActionType_1.StateActionType.ShowList, payload: undefined }) : dispatchState({ type: stateActionType_1.StateActionType.ShowEmptyList, payload: undefined });
-        }).catch((e) => {
-            errorHandler(e);
-            dispatchState({ type: stateActionType_1.StateActionType.NothingToShow, payload: undefined });
-        });
-    }, [getData, customGetData, dataItems, errorHandler]);
+        debouncedGetData(signal, searchValue);
+    }, [debouncedGetData]);
     (0, react_1.useEffect)(() => {
         if (hasApplyButton) {
             return;
@@ -257,10 +263,13 @@ const Dropdown = ({ className, classNamePopup, getData, errorHandler, dataItems,
     }, [isMobile, searchField, state.inputValue, inputRef, state.currentId]);
     (0, react_1.useEffect)(() => {
         if ((Object.keys(state.groupsMap).length === 0 && Object.keys(state.groupsMapSelected).length === 0) || !getNamedItems || getNamedItemsHasBeenCalled.current) {
-            return;
+            return undefined;
         }
         getNamedItemsHasBeenCalled.current = true;
-        getNamedItems((items) => (0, dropdownHelper_1.prepareSelectedIdsToItems)(items, state.groupsMap, state.groupsMapSelected));
+        const timeoutId = setTimeout(() => {
+            getNamedItems((items) => (0, dropdownHelper_1.prepareSelectedIdsToItems)(items, state.groupsMap, state.groupsMapSelected));
+        }, 200);
+        return () => clearTimeout(timeoutId);
     }, [getNamedItems, state.groupsMap, state.groupsMapSelected]);
     (0, react_1.useEffect)(() => {
         if (state.hasDataProblem && multiselect) {