@geotab/zenith 1.26.6 → 2.0.0-beta.0

package/esm/filtersBar/components/filtersBarPeriodPicker/filtersBarPeriodPicker.js

@@ -0,0 +1,106 @@
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { memo, useCallback, useContext, useEffect, useMemo, useState } from "react";
+import { SidePanelCell } from "../../../sidePanel/sidePanelCell/sidePanelCell";
+import { classNames } from "../../../commonHelpers/classNames/classNames";
+import { CUSTOM_CALENDAR_ID, DateRangeInner } from "../../../dateRangeInner/dateRangeInner";
+import { useUniqueId } from "../../../commonHelpers/useUniqueId";
+import { useLanguage } from "../../../utils/localization/useLanguage";
+import { getOptionsPeriodMap, getRangeOptionsArray, getSelectedRangeFromValue } from "./getRangeOption";
+import { DateRange } from "../../../dateRange/dateRange";
+import { userFormatContext } from "../../../utils/userFormat/userFormatContext";
+import { normalizeDates } from "./normalizeDates";
+const DateRangeInnerMemo = memo(DateRangeInner);
+export const FiltersBarPeriodPicker = ({ props, hasApplyButton, className, useSidePanelView, sidePanelTitle, state, defaultState, onChange, checkError, sidePanelMaxGroupedItemsLength = 5 }) => {
+    const { options: optionsArg, withCalendar, timeSelect, disableFutureDates, disablePastDates, disableDatesBefore, disableDatesAfter, lockStartDate, lockEndDate, classNamePopup } = props;
+    const { translate } = useLanguage();
+    const { toLocalDateTime, toReverseOffsetDateTime, weekStartsOnSunday } = useContext(userFormatContext);
+    const id = useUniqueId();
+    const optionsMap = useMemo(() => getOptionsPeriodMap(optionsArg, translate, toLocalDateTime, weekStartsOnSunday ? "Sunday" : "Monday", toReverseOffsetDateTime), [optionsArg, toLocalDateTime, toReverseOffsetDateTime, translate, weekStartsOnSunday]);
+    const [selectedRange, setSelectedRange] = useState(getSelectedRangeFromValue(optionsMap, state));
+    const filterBarLabelledId = useUniqueId();
+    const [prevSelection, setPrevSelection] = useState(getSelectedRangeFromValue(optionsMap, state));
+    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 hasCustomOption = useMemo(() => options.find(option => option.id === CUSTOM_CALENDAR_ID) !== undefined, [options]);
+    const [customDate, setCustomDate] = useState(normalizeDates(state === null || state === void 0 ? void 0 : state.from.toISOString(), state === null || state === void 0 ? void 0 : state.to.toISOString(), disableFutureDates, disablePastDates, disableDatesBefore, disableDatesAfter));
+    const handleDateRangeSelection = useCallback((val) => {
+        var _a, _b;
+        const selection = options.find(option => option.id === val);
+        if (selection && val !== CUSTOM_CALENDAR_ID && selection.getRange) {
+            const range = selection.getRange();
+            const normalizedDates = normalizeDates(range.from.toISOString(), range.to.toISOString(), disableFutureDates, disablePastDates, disableDatesBefore, disableDatesAfter);
+            const newRange = val === CUSTOM_CALENDAR_ID ?
+                { from: new Date(normalizedDates.from), to: new Date(normalizedDates.to) }
+                : range;
+            setCustomDate({ from: newRange.from.toISOString(), to: newRange.to.toISOString() });
+            // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+            checkError && checkError(!range.from || !range.to);
+            onChange(Object.assign({ label: selection.id }, newRange));
+        }
+        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) !== val ? selection.getRange().from.toISOString() : state === null || state === void 0 ? void 0 : state.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) !== val ? selection.getRange().to.toISOString() : state === null || state === void 0 ? void 0 : state.to.toISOString();
+            const normalizedDates = normalizeDates(startDateForNormalize, endDateForNormalize, disableFutureDates, disablePastDates, disableDatesBefore, disableDatesAfter);
+            const newRange = val === 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: val, from: newValueFrom, to: newValueTo });
+            setCustomDate({ from: newValueFrom.toISOString(), to: newValueTo.toISOString() });
+            onChange({ label: val, from: newValueFrom, to: newValueTo });
+        }
+    }, [options, disableFutureDates, disablePastDates, disableDatesBefore, disableDatesAfter, checkError, onChange, selectedRange === null || selectedRange === void 0 ? void 0 : selectedRange.label, state === null || state === void 0 ? void 0 : state.from, state === null || state === void 0 ? void 0 : state.to]);
+    useEffect(() => {
+        const currentState = getSelectedRangeFromValue(optionsMap, state);
+        if ((prevSelection === null || prevSelection === void 0 ? void 0 : prevSelection.label) !== (currentState === null || currentState === void 0 ? void 0 : currentState.label)) {
+            setSelectedRange(currentState);
+            setPrevSelection(currentState);
+        }
+        if (useSidePanelView && (defaultState === null || defaultState === void 0 ? void 0 : defaultState.label) === CUSTOM_CALENDAR_ID && (currentState === null || currentState === void 0 ? void 0 : currentState.label) === CUSTOM_CALENDAR_ID &&
+            (prevSelection === null || prevSelection === void 0 ? void 0 : prevSelection.label) === CUSTOM_CALENDAR_ID &&
+            defaultState.from.toISOString() === currentState.from.toISOString() && defaultState.to.toISOString() === currentState.to.toISOString()
+            && customDate.from && customDate.to && (customDate.from !== defaultState.from.toISOString() || customDate.to !== defaultState.to.toISOString())) {
+            const normalizedDates = normalizeDates(defaultState.from.toISOString(), defaultState.to.toISOString(), disableFutureDates, disablePastDates, disableDatesBefore, disableDatesAfter);
+            const newRange = { from: new Date(normalizedDates.from), to: new Date(normalizedDates.to) };
+            const updatedState = { label: CUSTOM_CALENDAR_ID, from: newRange.from, to: newRange.to };
+            setSelectedRange(updatedState);
+            setPrevSelection(updatedState);
+            setCustomDate({ from: newRange.from.toISOString(), to: newRange.to.toISOString() });
+        }
+    }, [prevSelection === null || prevSelection === void 0 ? void 0 : prevSelection.label, state, defaultState, useSidePanelView, customDate.from, customDate.to,
+        disableFutureDates, disablePastDates, disableDatesBefore, disableDatesAfter, optionsMap]);
+    const handleCustomDate = useCallback((value) => {
+        const isHasError = !value.from || !value.to;
+        checkError && checkError(isHasError);
+        setSelectedRange({ label: CUSTOM_CALENDAR_ID, from: lockStartDate || value.from, to: lockEndDate || (lockStartDate ? value.to || value.from : value.to) });
+        setCustomDate({ from: lockStartDate || value.from, to: lockEndDate || (lockStartDate ? value.to || value.from : value.to) });
+        !isHasError && onChange({
+            label: CUSTOM_CALENDAR_ID,
+            from: new Date((lockStartDate || value.from)),
+            to: new Date((lockEndDate || (lockStartDate ? value.to || value.from : value.to)))
+        });
+    }, [checkError, lockEndDate, lockStartDate, onChange]);
+    const range = useMemo(() => ({ from: customDate.from, to: customDate.to }), [customDate.from, customDate.to]);
+    const component = useMemo(() => _jsx(_Fragment, { children: _jsx(DateRangeInnerMemo, { id: `${id}-daterange`, options: options, onOptionSelect: handleDateRangeSelection, onCalendarSelect: hasCustomOption ? handleCustomDate : undefined, selection: selectedRange === null || selectedRange === void 0 ? void 0 : selectedRange.label, range: range, timeSelect: timeSelect, disableFutureDates: disableFutureDates, disablePastDates: disablePastDates, disableDatesBefore: disableDatesBefore, disableDatesAfter: disableDatesAfter }) }), [id, options, handleDateRangeSelection, hasCustomOption, handleCustomDate, selectedRange === null || selectedRange === void 0 ? void 0 : selectedRange.label, range, timeSelect, disableFutureDates, disablePastDates, disableDatesBefore, disableDatesAfter]);
+    const popup = useMemo(() => {
+        const commonProps = Object.assign(Object.assign({}, props), { hasApplyButton: useSidePanelView ? false : props.hasApplyButton || hasApplyButton, id: id, className: classNames(["zen-filters-bar-period-picker", useSidePanelView ? "zen-filters-bar-period-picker--full-width" : "", className !== null && className !== void 0 ? className : ""]), classNamePopup: classNames(["zen-filters-bar-period-picker__popup", useSidePanelView ? "zen-filters-bar-period-picker__popup--full-width" : "", classNamePopup || ""]), classNameWrapper: classNames([useSidePanelView ? "zen-filters-bar-period-picker-wrapper" : ""]), options: optionsArg });
+        return props.allowUnsetValue ? _jsx(DateRange, Object.assign({}, commonProps, { value: state, onChange: onChange, defaultValue: defaultState, allowUnsetValue: true })) : _jsx(DateRange, Object.assign({}, commonProps, { value: state, onChange: onChange, defaultValue: defaultState, allowUnsetValue: false }));
+    }, [props, useSidePanelView, id, className, classNamePopup, optionsArg, state, onChange, defaultState, hasApplyButton]);
+    if (!options.length && !hasCustomOption) {
+        return "";
+    }
+    if (!useSidePanelView) {
+        return popup;
+    }
+    const isUsePopup = options.length > sidePanelMaxGroupedItemsLength;
+    return _jsx(SidePanelCell, { role: "group", labelledBy: filterBarLabelledId, titleId: filterBarLabelledId, title: sidePanelTitle, withoutSidePaddings: !isUsePopup, children: isUsePopup ? popup : component });
+};
+export const TRANSLATIONS = [
+    "Clear",
+    "Reset",
+    "Apply",
+    "Date range filter",
+    "The start date cannot be empty.",
+    "The end date cannot be empty."
+];

package/esm/filtersBar/components/filtersBarPeriodPicker/getRangeOption.d.ts

@@ -0,0 +1,81 @@
+import { TDayName } from "../../../calendar/dateUtils";
+import { IDateRangeOption, TDateRangeOption, IDateRangeValueOptionalLabel } from "../../../dateRange/dateRangeUtils";
+export interface IDateRangeOptionId extends IDateRangeOption {
+    id: string;
+}
+interface IDateRange {
+    from: Date;
+    to: Date;
+}
+declare const options: {
+    Today: (translate: (s: string) => string, toLocalDateTime?: (date: Date | string) => Date, _firstDayOfWeek?: TDayName, toReverseOffsetDateTime?: (date: Date | string) => Date) => IDateRangeOption;
+    Yesterday: (translate: (s: string) => string, toLocalDateTime?: (date: Date | string) => Date, _firstDayOfWeek?: TDayName, toReverseOffsetDateTime?: (date: Date | string) => Date) => IDateRangeOption;
+    ThisWeek: (translate: (s: string) => string, toLocalDateTime?: (date: Date | string) => Date, firstDayOfWeek?: TDayName, toReverseOffsetDateTime?: (date: Date | string) => Date) => IDateRangeOption;
+    NextWeek: (translate: (s: string) => string, toLocalDateTime: (date: Date | string) => Date, firstDayOfWeek?: TDayName, toReverseOffsetDateTime?: (date: Date | string) => Date) => IDateRangeOption;
+    LastWeek: (translate: (s: string) => string, toLocalDateTime: (date: Date | string) => Date, firstDayOfWeek?: TDayName, toReverseOffsetDateTime?: (date: Date | string) => Date) => IDateRangeOption;
+    ThisMonth: (translate: (s: string) => string, toLocalDateTime: (date: Date | string) => Date, _firstDayOfWeek?: TDayName, toReverseOffsetDateTime?: (date: Date | string) => Date) => IDateRangeOption;
+    NextMonth: (translate: (s: string) => string, toLocalDateTime: (date: Date | string) => Date, _firstDayOfWeek?: TDayName, toReverseOffsetDateTime?: (date: Date | string) => Date) => IDateRangeOption;
+    LastMonth: (translate: (s: string) => string, toLocalDateTime: (date: Date | string) => Date, _firstDayOfWeek?: TDayName, toReverseOffsetDateTime?: (date: Date | string) => Date) => IDateRangeOption;
+    LastSevenDays: (translate: (s: string) => string, toLocalDateTime: (date: Date | string) => Date, _firstDayOfWeek?: TDayName, toReverseOffsetDateTime?: (date: Date | string) => Date) => IDateRangeOption;
+    LastThirtyDays: (translate: (s: string) => string, toLocalDateTime: (date: Date | string) => Date, _firstDayOfWeek?: TDayName, toReverseOffsetDateTime?: (date: Date | string) => Date) => IDateRangeOption;
+    LastTwelveMonths: (translate: (s: string) => string, toLocalDateTime: (date: Date | string) => Date, _firstDayOfWeek?: TDayName, toReverseOffsetDateTime?: (date: Date | string) => Date) => IDateRangeOption;
+    LastThreeMonths: (translate: (s: string) => string, toLocalDateTime: (date: Date | string) => Date, _firstDayOfWeek?: TDayName, toReverseOffsetDateTime?: (date: Date | string) => Date) => IDateRangeOption;
+    ThisQuarter: (translate: (s: string) => string, toLocalDateTime: (date: Date | string) => Date, _firstDayOfWeek?: TDayName, toReverseOffsetDateTime?: (date: Date | string) => Date) => IDateRangeOption;
+    LastQuarter: (translate: (s: string) => string, toLocalDateTime: (date: Date | string) => Date, _firstDayOfWeek?: TDayName, toReverseOffsetDateTime?: (date: Date | string) => Date) => IDateRangeOption;
+    LastYear: (translate: (s: string) => string, toLocalDateTime: (date: Date | string) => Date, _firstDayOfWeek?: TDayName, toReverseOffsetDateTime?: (date: Date | string) => Date) => IDateRangeOption;
+    ThisYear: (translate: (s: string) => string, toLocalDateTime: (date: Date | string) => Date, _firstDayOfWeek?: TDayName, toReverseOffsetDateTime?: (date: Date | string) => Date) => IDateRangeOption;
+};
+export type TDateRangeName = keyof typeof options | "Custom";
+export declare function getRangeOption(option: TDateRangeOption, translate: (s: string) => string, toLocalDateTime?: (date: Date | string) => Date, firstDayOfWeek?: TDayName, toReverseOffsetDateTime?: (date: Date | string) => Date): IDateRangeOptionId | undefined;
+export interface IDateRangeOptionsItem {
+    id: string;
+    label: string;
+    getRange?: () => IDateRange;
+    hasSecondaryLabel: boolean;
+}
+export declare const getRangeOptionsArray: (initialOptions: TDateRangeOption[], translate: (s: string) => string, toLocalDateTime: (date: Date | string) => Date, firstDayOfWeek?: TDayName, toReverseOffsetDateTime?: (date: Date | string) => Date, customLabel?: boolean, isPrevRangeCustom?: boolean, customGetRangeOptions?: () => IDateRange) => IDateRangeOptionsItem[];
+export declare const getOptionsPeriodMap: (initialOptions: TDateRangeOption[], translate: (s: string) => string, toLocalDateTime: (date: Date | string) => Date, firstDayOfWeek?: TDayName, toReverseOffsetDateTime?: (date: Date | string) => Date) => Map<string, IDateRangeOptionId>;
+export declare const getSelectedRangeFromValue: (optionsMap: Map<string, IDateRangeOptionId>, value?: IDateRangeValueOptionalLabel) => {
+    label: string;
+    from: Date;
+    to: Date;
+} | undefined;
+export declare const MONTH_STEP_OPTION = "month_step_option";
+export declare const DEFAULT_STEP_OPTION = "default_step_option";
+export declare const YEAR_STEP_OPTION = "year_step_option";
+export declare const QUARTER_STEP_OPTION = "quarter_step_option";
+export declare const PERIOD_ONE_DAY_STEP_OPTION = "period_one_day_step_option";
+export declare const PERIOD_SEVEN_DAYS_STEP_OPTION = "period_seven_days_step_option";
+export declare const PERIOD_THIRTY_DAYS_STEP_OPTION = "period_thirty_days_step_option";
+export declare const getDateRangeAdjustedStep: (translate: (s: string) => string, label?: string) => "default_step_option" | "month_step_option" | "quarter_step_option" | "year_step_option" | "period_one_day_step_option" | "period_seven_days_step_option" | "period_thirty_days_step_option";
+export declare const dateRangeAdjustedFn: {
+    month_step_option: (dateRange: IDateRange, increase: boolean, toLocalDateTime: (date: Date | string) => Date, toReverseOffsetDateTime: (d: Date | string) => Date) => {
+        from: Date;
+        to: Date;
+    };
+    year_step_option: (dateRange: IDateRange, increase: boolean, _: any, _1: any) => {
+        from: Date;
+        to: Date;
+    };
+    quarter_step_option: (dateRange: IDateRange, increase: boolean, toLocalDateTime: (date: Date | string) => Date, toReverseOffsetDateTime: (d: Date | string) => Date) => {
+        from: Date;
+        to: Date;
+    };
+    period_one_day_step_option: (dateRange: IDateRange, increase: boolean, toLocalDateTime: (date: Date | string) => Date, toReverseOffsetDateTime: (d: Date | string) => Date) => {
+        from: Date;
+        to: Date;
+    };
+    period_seven_days_step_option: (dateRange: IDateRange, increase: boolean, toLocalDateTime: (date: Date | string) => Date, toReverseOffsetDateTime: (d: Date | string) => Date) => {
+        from: Date;
+        to: Date;
+    };
+    period_thirty_days_step_option: (dateRange: IDateRange, increase: boolean, toLocalDateTime: (date: Date | string) => Date, toReverseOffsetDateTime: (d: Date | string) => Date) => {
+        from: Date;
+        to: Date;
+    };
+    default_step_option: (dateRange: IDateRange, increase: boolean, toLocalDateTime: (date: Date | string) => Date, toReverseOffsetDateTime: (d: Date | string) => Date) => {
+        from: Date;
+        to: Date;
+    };
+};
+export {};

package/esm/filtersBar/components/filtersBarPeriodPicker/getRangeOption.js

@@ -0,0 +1,309 @@
+import { GET_LAST_MONTH_OPTION, GET_LAST_THREE_MONTH_OPTION, GET_LAST_SEVEN_DAYS_OPTION, GET_LAST_THIRTY_DAYS_OPTION, GET_LAST_TWELVE_MONTHS_OPTION, GET_LAST_WEEK_OPTION, GET_NEXT_MONTH_OPTION, GET_NEXT_WEEK_OPTION, GET_THIS_MONTH_OPTION, GET_THIS_WEEK_OPTION, GET_TODAY_OPTION, GET_YESTERDAY_OPTION, GET_LAST_QUARTER_OPTION, GET_THIS_QUARTER_OPTION, GET_THIS_YEAR_OPTION, GET_LAST_YEAR_OPTION } from "../../../dateRange/dateRangeUtils";
+import { CUSTOM_CALENDAR_ID } from "../../../dateRangeInner/dateRangeInner";
+const options = {
+    "Today": (translate, toLocalDateTime, _firstDayOfWeek, toReverseOffsetDateTime) => GET_TODAY_OPTION(toLocalDateTime, translate, toReverseOffsetDateTime),
+    "Yesterday": (translate, toLocalDateTime, _firstDayOfWeek, toReverseOffsetDateTime) => GET_YESTERDAY_OPTION(toLocalDateTime, translate, toReverseOffsetDateTime),
+    "ThisWeek": (translate, toLocalDateTime, firstDayOfWeek, toReverseOffsetDateTime) => GET_THIS_WEEK_OPTION(toLocalDateTime, translate, firstDayOfWeek, toReverseOffsetDateTime),
+    "NextWeek": (translate, toLocalDateTime, firstDayOfWeek, toReverseOffsetDateTime) => GET_NEXT_WEEK_OPTION(toLocalDateTime, translate, firstDayOfWeek, toReverseOffsetDateTime),
+    "LastWeek": (translate, toLocalDateTime, firstDayOfWeek, toReverseOffsetDateTime) => GET_LAST_WEEK_OPTION(toLocalDateTime, translate, firstDayOfWeek, toReverseOffsetDateTime),
+    "ThisMonth": (translate, toLocalDateTime, _firstDayOfWeek, toReverseOffsetDateTime) => GET_THIS_MONTH_OPTION(toLocalDateTime, translate, toReverseOffsetDateTime),
+    "NextMonth": (translate, toLocalDateTime, _firstDayOfWeek, toReverseOffsetDateTime) => GET_NEXT_MONTH_OPTION(toLocalDateTime, translate, toReverseOffsetDateTime),
+    "LastMonth": (translate, toLocalDateTime, _firstDayOfWeek, toReverseOffsetDateTime) => GET_LAST_MONTH_OPTION(toLocalDateTime, translate, toReverseOffsetDateTime),
+    "LastSevenDays": (translate, toLocalDateTime, _firstDayOfWeek, toReverseOffsetDateTime) => GET_LAST_SEVEN_DAYS_OPTION(toLocalDateTime, translate, toReverseOffsetDateTime),
+    "LastThirtyDays": (translate, toLocalDateTime, _firstDayOfWeek, toReverseOffsetDateTime) => GET_LAST_THIRTY_DAYS_OPTION(toLocalDateTime, translate, toReverseOffsetDateTime),
+    "LastTwelveMonths": (translate, toLocalDateTime, _firstDayOfWeek, toReverseOffsetDateTime) => GET_LAST_TWELVE_MONTHS_OPTION(toLocalDateTime, translate, toReverseOffsetDateTime),
+    "LastThreeMonths": (translate, toLocalDateTime, _firstDayOfWeek, toReverseOffsetDateTime) => GET_LAST_THREE_MONTH_OPTION(toLocalDateTime, translate, toReverseOffsetDateTime),
+    "ThisQuarter": (translate, toLocalDateTime, _firstDayOfWeek, toReverseOffsetDateTime) => GET_THIS_QUARTER_OPTION(toLocalDateTime, translate, toReverseOffsetDateTime),
+    "LastQuarter": (translate, toLocalDateTime, _firstDayOfWeek, toReverseOffsetDateTime) => GET_LAST_QUARTER_OPTION(toLocalDateTime, translate, toReverseOffsetDateTime),
+    "LastYear": (translate, toLocalDateTime, _firstDayOfWeek, toReverseOffsetDateTime) => GET_LAST_YEAR_OPTION(toLocalDateTime, translate, toReverseOffsetDateTime),
+    "ThisYear": (translate, toLocalDateTime, _firstDayOfWeek, toReverseOffsetDateTime) => GET_THIS_YEAR_OPTION(toLocalDateTime, translate, toReverseOffsetDateTime)
+};
+export function getRangeOption(option, translate, toLocalDateTime, firstDayOfWeek, toReverseOffsetDateTime) {
+    if (typeof option === "string") {
+        if (options[option]) {
+            return Object.assign({ id: option }, options[option](translate, toLocalDateTime, firstDayOfWeek, toReverseOffsetDateTime));
+        }
+        return undefined;
+    }
+    return Object.assign({ id: option.label }, option);
+}
+const getSecondaryLabelOptions = (translate) => (["ThisWeek", "NextWeek", "LastWeek", "ThisMonth",
+    "LastMonth", "NextMonth", "LastThreeMonths", "LastYear", "ThisYear", "ThisQuarter", "LastQuarter", "LastTwelveMonths",
+    translate("This week"), translate("Next week"), translate("Last week"), translate("This month"),
+    translate("Last month"), translate("Next month"), translate("Last 3 months"), translate("Last year"),
+    translate("This year"), translate("This quarter"), translate("Last quarter"), translate("Last 12 months")]);
+export const getRangeOptionsArray = (initialOptions, translate, toLocalDateTime, firstDayOfWeek, toReverseOffsetDateTime, customLabel, isPrevRangeCustom, customGetRangeOptions) => {
+    const optionsArray = initialOptions.map(opt => getRangeOption(opt, translate, toLocalDateTime, firstDayOfWeek, toReverseOffsetDateTime)).filter(option => !!option);
+    const hasCustomOption = customLabel || initialOptions.includes("Custom");
+    const customOptionIndex = optionsArray.findIndex(el => el.label === "Custom");
+    const secondaryLabelOptions = getSecondaryLabelOptions(translate);
+    let customOption;
+    if (customOptionIndex !== -1) {
+        customOption = optionsArray.splice(customOptionIndex, 1)[0];
+    }
+    const preparedOptions = optionsArray.map(option => { var _a; return (Object.assign(Object.assign({}, option), { hasSecondaryLabel: (_a = option.hasSecondaryLabel) !== null && _a !== void 0 ? _a : secondaryLabelOptions.includes(option.id) })); });
+    if (hasCustomOption && !customOption || customOption && !customOption.getRange) {
+        customOption = Object.assign(Object.assign({ id: "Custom", label: translate("Custom") }, (customGetRangeOptions ? { getRange: customGetRangeOptions } : {})), { hasSecondaryLabel: customOption ? customOption.hasSecondaryLabel || false : false });
+    }
+    if (customOption && isPrevRangeCustom) {
+        customOption.getRange = customGetRangeOptions;
+    }
+    customOption && preparedOptions.push(Object.assign(Object.assign({}, customOption), { label: translate("Custom") }));
+    return preparedOptions;
+};
+export const getOptionsPeriodMap = (initialOptions, translate, toLocalDateTime, firstDayOfWeek, toReverseOffsetDateTime) => {
+    const optionsArray = initialOptions.map(opt => getRangeOption(opt, translate, toLocalDateTime, firstDayOfWeek, toReverseOffsetDateTime))
+        .filter(option => !!option && option.id !== CUSTOM_CALENDAR_ID);
+    const optionsMap = new Map();
+    optionsArray.forEach(opt => {
+        // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+        if (opt.getRange) {
+            const range = opt.getRange();
+            const key = `${range.from.toISOString()}_${range.to.toISOString()}`;
+            if (optionsMap.has(key)) {
+                optionsMap.set(`${key}_${opt.id}`, Object.assign(Object.assign({}, opt), { getRange: () => range }));
+            }
+            else {
+                optionsMap.set(`${key}`, Object.assign(Object.assign({}, opt), { getRange: () => range }));
+            }
+            return;
+        }
+    });
+    return optionsMap;
+};
+export const getSelectedRangeFromValue = (optionsMap, value) => {
+    if (!value) {
+        return undefined;
+    }
+    const currentOption = optionsMap.get(`${value.from.toISOString()}_${value.to.toISOString()}`);
+    if (!currentOption || value.label === CUSTOM_CALENDAR_ID) {
+        return {
+            label: CUSTOM_CALENDAR_ID,
+            from: value.from,
+            to: value.to
+        };
+    }
+    function findValueByLabel(val) {
+        for (const [_, mapVal] of optionsMap.entries()) {
+            if (mapVal.id === val.label) {
+                const mapValRange = mapVal.getRange();
+                return mapValRange.from.getTime() === val.from.getTime() && mapValRange.to.getTime() === val.to.getTime() ? { id: mapVal.id, from: mapValRange.from, to: mapValRange.to } : undefined;
+            }
+        }
+        return undefined;
+    }
+    const optionToReturn = value.label && currentOption.id && value.label !== currentOption.id ? findValueByLabel(value) : undefined;
+    if (optionToReturn) {
+        return {
+            label: optionToReturn.id,
+            from: value.from,
+            to: value.to
+        };
+    }
+    return {
+        label: currentOption.id,
+        from: value.from,
+        to: value.to
+    };
+};
+const adjustDateRange = (dateRange, increase, toLocalDateTime, toReverseOffsetDateTime) => {
+    const { from, to } = dateRange;
+    const interval = to.getTime() - from.getTime();
+    let newFrom;
+    let newTo;
+    const fromToLocalDateTime = toLocalDateTime(from);
+    const toToLocalDateTime = toLocalDateTime(to);
+    if (!increase) {
+        // Decrease logic
+        newTo = new Date(fromToLocalDateTime);
+        newTo.setDate(fromToLocalDateTime.getDate() - 1);
+        newTo.setHours(toToLocalDateTime.getHours());
+        newTo.setMinutes(toToLocalDateTime.getMinutes());
+        newTo.setSeconds(toToLocalDateTime.getSeconds());
+        newTo.setMilliseconds(toToLocalDateTime.getMilliseconds());
+        newFrom = new Date(newTo.getTime() - interval);
+    }
+    else {
+        // Increase logic
+        newFrom = new Date(toToLocalDateTime);
+        newFrom.setDate(toToLocalDateTime.getDate() + 1);
+        newFrom.setHours(fromToLocalDateTime.getHours());
+        newFrom.setMinutes(fromToLocalDateTime.getMinutes());
+        newFrom.setSeconds(fromToLocalDateTime.getSeconds());
+        newFrom.setMilliseconds(fromToLocalDateTime.getMilliseconds());
+        newTo = new Date(newFrom.getTime() + interval);
+    }
+    return { from: toReverseOffsetDateTime(newFrom), to: toReverseOffsetDateTime(newTo) };
+};
+const adjustDateDaysRange = (offset) => (dateRange, increase, toLocalDateTime, toReverseOffsetDateTime) => {
+    const { from, to } = dateRange;
+    const fromLocal = toLocalDateTime(from);
+    const toLocal = toLocalDateTime(to);
+    const dayOffset = increase ? 1 * offset : -1 * offset;
+    const newFromLocal = new Date(fromLocal);
+    const newToLocal = new Date(toLocal);
+    newFromLocal.setDate(fromLocal.getDate() + dayOffset);
+    newToLocal.setDate(toLocal.getDate() + dayOffset);
+    return {
+        from: toReverseOffsetDateTime(newFromLocal),
+        to: toReverseOffsetDateTime(newToLocal)
+    };
+};
+const adjustDateRangeMonth = (dateRange, increase, toLocalDateTime, toReverseOffsetDateTime) => {
+    const { from, to } = dateRange;
+    let newFrom;
+    let newTo;
+    const fromToLocalDateTime = toLocalDateTime(from);
+    const toToLocalDateTime = toLocalDateTime(to);
+    const fromMonth = fromToLocalDateTime.getMonth();
+    const fromYear = fromToLocalDateTime.getFullYear();
+    const toMonth = toToLocalDateTime.getMonth();
+    const toYear = toToLocalDateTime.getFullYear();
+    // Calculate the number of months in the original range
+    const monthsDifference = (toYear - fromYear) * 12 + (toMonth - fromMonth) + 1;
+    if (!increase) {
+        // Decrease
+        let newFromMonth = fromMonth - monthsDifference;
+        let newFromYear = fromYear;
+        while (newFromMonth < 0) {
+            newFromMonth += 12;
+            newFromYear--;
+        }
+        newFrom = new Date(newFromYear, newFromMonth, 1); // First day of the month
+        let newToMonth = toMonth - monthsDifference;
+        let newToYear = toYear;
+        while (newToMonth < 0) {
+            newToMonth += 12;
+            newToYear--;
+        }
+        // Get the last day of the month for newTo
+        const nextMonth = new Date(newToYear, newToMonth + 1, 1);
+        newTo = new Date(nextMonth.getTime() - (24 * 60 * 60 * 1000));
+    }
+    else {
+        // Increase
+        let newFromMonth = fromMonth + monthsDifference;
+        let newFromYear = fromYear;
+        while (newFromMonth >= 12) {
+            newFromMonth -= 12;
+            newFromYear++;
+        }
+        newFrom = new Date(newFromYear, newFromMonth, 1); // First day of the month
+        let newToMonth = toMonth + monthsDifference;
+        let newToYear = toYear;
+        while (newToMonth >= 12) {
+            newToMonth -= 12;
+            newToYear++;
+        }
+        // Get the last day of the month for newTo
+        const nextMonth = new Date(newToYear, newToMonth + 1, 1);
+        newTo = new Date(nextMonth.getTime() - (24 * 60 * 60 * 1000));
+    }
+    // Preserve original time components
+    newFrom.setHours(fromToLocalDateTime.getHours());
+    newFrom.setMinutes(fromToLocalDateTime.getMinutes());
+    newFrom.setSeconds(fromToLocalDateTime.getSeconds());
+    newFrom.setMilliseconds(fromToLocalDateTime.getMilliseconds());
+    newTo.setHours(toToLocalDateTime.getHours());
+    newTo.setMinutes(toToLocalDateTime.getMinutes());
+    newTo.setSeconds(toToLocalDateTime.getSeconds());
+    newTo.setMilliseconds(toToLocalDateTime.getMilliseconds());
+    return { from: toReverseOffsetDateTime(newFrom), to: toReverseOffsetDateTime(newTo) };
+};
+const adjustDateRangeQuarter = (dateRange, increase, toLocalDateTime, toReverseOffsetDateTime) => {
+    const { from, to } = dateRange;
+    const quarterStartMonth = [0, 3, 6, 9]; // January, April, July, October
+    const fromToLocalDateTime = toLocalDateTime(from);
+    const toToLocalDateTime = toLocalDateTime(to);
+    const fromMonth = fromToLocalDateTime.getMonth();
+    const fromYear = fromToLocalDateTime.getFullYear();
+    let newFrom;
+    let newTo;
+    const monthsInQuarter = 3;
+    const currentQuarterIndex = quarterStartMonth.findIndex(month => month === fromMonth);
+    if (!increase) {
+        // Previous Quarter
+        const newFromMonth = currentQuarterIndex === 0 ? 9 : quarterStartMonth[currentQuarterIndex - 1];
+        const newFromYear = currentQuarterIndex === 0 ? fromYear - 1 : fromYear;
+        newFrom = new Date(newFromYear, newFromMonth, fromToLocalDateTime.getDate(), fromToLocalDateTime.getHours(), fromToLocalDateTime.getMinutes(), fromToLocalDateTime.getSeconds(), fromToLocalDateTime.getMilliseconds());
+        newTo = new Date(newFromYear, newFromMonth + monthsInQuarter - 1, newFromMonth === 0 || newFromMonth === 9 ? 31 : 30, toToLocalDateTime.getHours(), toToLocalDateTime.getMinutes(), toToLocalDateTime.getSeconds(), toToLocalDateTime.getMilliseconds());
+    }
+    else {
+        // Next Quarter
+        const newFromMonth = currentQuarterIndex === 3 ? 0 : quarterStartMonth[currentQuarterIndex + 1];
+        const newFromYear = currentQuarterIndex === 3 ? fromYear + 1 : fromYear;
+        newFrom = new Date(newFromYear, newFromMonth, fromToLocalDateTime.getDate(), fromToLocalDateTime.getHours(), fromToLocalDateTime.getMinutes(), fromToLocalDateTime.getSeconds(), fromToLocalDateTime.getMilliseconds());
+        newTo = new Date(newFromYear, newFromMonth + monthsInQuarter - 1, newFromMonth === 0 || newFromMonth === 9 ? 31 : 30, toToLocalDateTime.getHours(), toToLocalDateTime.getMinutes(), toToLocalDateTime.getSeconds(), toToLocalDateTime.getMilliseconds());
+    }
+    return { from: toReverseOffsetDateTime(newFrom), to: toReverseOffsetDateTime(newTo) };
+};
+const adjustDateRangeYear = (dateRange, increase, _, _1) => {
+    const { from, to } = dateRange;
+    let newFrom;
+    let newTo;
+    const fromYear = from.getFullYear();
+    const toYear = to.getFullYear();
+    if (!increase) {
+        const previousFromYear = fromYear - 1;
+        const previousToYear = toYear - 1;
+        newFrom = new Date(from);
+        newFrom.setFullYear(previousFromYear);
+        newTo = new Date(to);
+        newTo.setFullYear(previousToYear);
+    }
+    else {
+        const nextFromYear = fromYear + 1;
+        const nextToYear = toYear + 1;
+        newFrom = new Date(from);
+        newFrom.setFullYear(nextFromYear);
+        newTo = new Date(to);
+        newTo.setFullYear(nextToYear);
+    }
+    return { from: newFrom, to: newTo };
+};
+export const MONTH_STEP_OPTION = "month_step_option";
+export const DEFAULT_STEP_OPTION = "default_step_option";
+export const YEAR_STEP_OPTION = "year_step_option";
+export const QUARTER_STEP_OPTION = "quarter_step_option";
+export const PERIOD_ONE_DAY_STEP_OPTION = "period_one_day_step_option";
+export const PERIOD_SEVEN_DAYS_STEP_OPTION = "period_seven_days_step_option";
+export const PERIOD_THIRTY_DAYS_STEP_OPTION = "period_thirty_days_step_option";
+export const getDateRangeAdjustedStep = (translate, label) => {
+    const monthsAdjusted = ["LastMonth", "ThisMonth", "NextMonth", "LastThreeMonths", translate("This month"), translate("Last month"), translate("Next month"), translate("Last 3 months")];
+    const periodDayAdjusted = ["Today", "Yesterday", translate("Today"), translate("Yesterday")];
+    const periodSevenDaysAdjusted = ["ThisWeek", "NextWeek", "LastWeek", "LastSevenDays", translate("This week"), translate("Next week"), translate("Last week"), translate("Last 7 days")];
+    const periodThirtyDaysAdjusted = ["LastThirtyDays", translate("Last 30 days")];
+    const yearAdjusted = ["LastYear", "ThisYear", "LastTwelveMonths", translate("Last 12 months"), translate("Last year"), translate("This year")];
+    const quarterAdjusted = ["ThisQuarter", "LastQuarter", translate("This quarter"), translate("Last quarter")];
+    if (!label) {
+        return DEFAULT_STEP_OPTION;
+    }
+    if (monthsAdjusted.includes(label)) {
+        return MONTH_STEP_OPTION;
+    }
+    if (quarterAdjusted.includes(label)) {
+        return QUARTER_STEP_OPTION;
+    }
+    if (yearAdjusted.includes(label)) {
+        return YEAR_STEP_OPTION;
+    }
+    if (periodDayAdjusted.includes(label)) {
+        return PERIOD_ONE_DAY_STEP_OPTION;
+    }
+    if (periodSevenDaysAdjusted.includes(label)) {
+        return PERIOD_SEVEN_DAYS_STEP_OPTION;
+    }
+    if (periodThirtyDaysAdjusted.includes(label)) {
+        return PERIOD_THIRTY_DAYS_STEP_OPTION;
+    }
+    return DEFAULT_STEP_OPTION;
+};
+export const dateRangeAdjustedFn = {
+    [MONTH_STEP_OPTION]: adjustDateRangeMonth,
+    [YEAR_STEP_OPTION]: adjustDateRangeYear,
+    [QUARTER_STEP_OPTION]: adjustDateRangeQuarter,
+    [PERIOD_ONE_DAY_STEP_OPTION]: adjustDateDaysRange(1),
+    [PERIOD_SEVEN_DAYS_STEP_OPTION]: adjustDateDaysRange(7),
+    [PERIOD_THIRTY_DAYS_STEP_OPTION]: adjustDateDaysRange(30),
+    [DEFAULT_STEP_OPTION]: adjustDateRange
+};

package/esm/filtersBar/components/filtersBarPeriodPicker/normalizeDates.d.ts

@@ -0,0 +1,4 @@
+export declare const normalizeDates: (startDate: string | undefined, endDate: string | undefined, disableFutureDates: boolean | undefined, disablePastDates: boolean | undefined, disableDatesBefore?: string, disableDatesAfter?: string) => {
+    from: string;
+    to: string;
+};

package/esm/filtersBar/components/filtersBarPeriodPicker/normalizeDates.js

@@ -0,0 +1,86 @@
+import { addDays, addMinutes, getAvailablePeriod } from "../../../calendar/dateUtils";
+// eslint-disable-next-line complexity
+const getAvailableRange = (availablePeriod, startDate, endDate, disableDatesBefore, disableDatesAfter) => {
+    const now = new Date().toISOString();
+    let fromDate = startDate;
+    let toDate = endDate;
+    if (availablePeriod === "all") {
+        fromDate = startDate ? startDate : endDate ? addDays(new Date(endDate), -1).toISOString() : now;
+        toDate = endDate ? endDate : startDate ? addDays(new Date(startDate), 1).toISOString() : addDays(new Date(now), 1).toISOString();
+        return { from: fromDate, to: toDate };
+    }
+    if (availablePeriod === "before" && disableDatesAfter) {
+        toDate = endDate && new Date(endDate) <= new Date(disableDatesAfter) ? endDate : disableDatesAfter;
+        fromDate = startDate && new Date(startDate) < new Date(disableDatesAfter) && new Date(startDate) < new Date(toDate) ? startDate : addDays(new Date(toDate), -1).toISOString();
+    }
+    if (availablePeriod === "after" && disableDatesBefore) {
+        fromDate = startDate && new Date(startDate) >= new Date(disableDatesBefore) ? startDate : disableDatesBefore;
+        toDate = endDate && new Date(endDate) > new Date(disableDatesBefore) && new Date(endDate) > new Date(fromDate) ? endDate : addDays(new Date(fromDate), 1).toISOString();
+    }
+    if (availablePeriod === "outside" && disableDatesBefore && disableDatesAfter) {
+        let isAvailableRangeReady = false;
+        if (startDate && new Date(startDate) <= new Date(disableDatesAfter)) {
+            fromDate = startDate;
+            toDate = endDate && new Date(endDate) <= new Date(disableDatesAfter) && new Date(endDate) >= new Date(fromDate) ? endDate : disableDatesAfter;
+            isAvailableRangeReady = true;
+        }
+        if (startDate && new Date(startDate) > new Date(disableDatesBefore)) {
+            fromDate = startDate;
+            toDate = endDate && new Date(endDate) > new Date(fromDate) ? endDate : addDays(new Date(fromDate), 1).toISOString();
+            isAvailableRangeReady = true;
+        }
+        if (endDate && !isAvailableRangeReady && new Date(endDate) <= new Date(disableDatesAfter)) {
+            toDate = endDate;
+            fromDate = startDate && new Date(startDate) < new Date(toDate) ? startDate : addDays(new Date(toDate), -1).toISOString();
+            isAvailableRangeReady = true;
+        }
+        if (endDate && !isAvailableRangeReady && new Date(endDate) > new Date(disableDatesBefore)) {
+            toDate = endDate;
+            fromDate = startDate && new Date(startDate) > new Date(disableDatesBefore) && new Date(startDate) < new Date(toDate) ? startDate
+                : (addDays(new Date(toDate), -1) >= new Date(disableDatesBefore) ? addDays(new Date(toDate), -1).toISOString() : disableDatesBefore);
+            isAvailableRangeReady = true;
+        }
+        if (!isAvailableRangeReady) {
+            fromDate = disableDatesBefore;
+            toDate = addDays(new Date(fromDate), 1).toISOString();
+        }
+    }
+    if (availablePeriod === "inside" && disableDatesBefore && disableDatesAfter) {
+        fromDate = startDate && new Date(startDate) >= new Date(disableDatesBefore) && new Date(startDate) < new Date(disableDatesAfter) ? startDate : disableDatesBefore;
+        const fromDatePlusOne = addDays(new Date(fromDate), 1).toISOString();
+        toDate = endDate && new Date(endDate) > new Date(fromDate) && new Date(endDate) < new Date(disableDatesAfter) ? endDate
+            : new Date(fromDatePlusOne) < new Date(disableDatesAfter) ? fromDatePlusOne : disableDatesAfter;
+    }
+    return { from: fromDate || now, to: toDate || now };
+};
+// eslint-disable-next-line complexity
+export const normalizeDates = (startDate, endDate, disableFutureDates, disablePastDates, disableDatesBefore, disableDatesAfter) => {
+    const minuteReserve = 2;
+    const now = new Date();
+    const moreNow = addMinutes(new Date(now), minuteReserve);
+    const availablePeriod = getAvailablePeriod(disableDatesBefore, disableDatesAfter);
+    if (disableFutureDates && availablePeriod === "all") {
+        const updatedStartDate = addDays(new Date(now), -1);
+        if (startDate && new Date(startDate) > now) {
+            return { from: updatedStartDate.toISOString(), to: now.toISOString() };
+        }
+        if (endDate && new Date(endDate) > now) {
+            return { from: startDate && new Date(startDate) < now ? startDate : updatedStartDate.toISOString(), to: now.toISOString() };
+        }
+        return { from: startDate && new Date(startDate) < now ? startDate : updatedStartDate.toISOString(), to: endDate || now.toISOString() };
+    }
+    if (disablePastDates && availablePeriod === "all") {
+        const updatedEndDate = addDays(new Date(now), 1);
+        if (endDate && new Date(endDate) < moreNow) {
+            return { from: moreNow.toISOString(), to: updatedEndDate.toISOString() };
+        }
+        if (startDate && new Date(startDate) < moreNow) {
+            return { from: moreNow.toISOString(), to: endDate || updatedEndDate.toISOString() };
+        }
+        if (startDate && new Date(startDate) >= moreNow) {
+            return { from: startDate, to: endDate && new Date(endDate) > new Date(startDate) ? endDate : addDays(new Date(startDate), 1).toISOString() };
+        }
+        return { from: moreNow.toISOString(), to: endDate || updatedEndDate.toISOString() };
+    }
+    return getAvailableRange(availablePeriod, startDate, endDate, disableDatesBefore, disableDatesAfter);
+};

package/esm/filtersBar/components/filtersBarRange/filtersBarRange.d.ts

@@ -0,0 +1,16 @@
+/// <reference types="react" />
+import { IFiltersBarItem } from "../interfaces";
+import { IRange, IRangeValues } from "../../../range/range";
+export interface IFiltersBarRangeState {
+    value: IRangeValues;
+}
+interface IFiltersBarRangeProps extends Pick<IRange, "id" | "defaultValue" | "unit" | "labelMin" | "labelMax" | "disabled" | "label" | "triggerAriaLabel" | "min" | "max" | "fullWidthTriggerButton" | "fullBounded" | "className" | "allowEqualMinMax"> {
+}
+export interface IFiltersBarRange extends IFiltersBarItem<IFiltersBarRangeState, IFiltersBarRangeProps> {
+    className?: string;
+    props: IFiltersBarRangeProps;
+    checkError?: (isError: boolean) => void;
+}
+export declare const FiltersBarRange: React.FC<IFiltersBarRange>;
+export declare const TRANSLATIONS: never[];
+export {};

package/esm/filtersBar/components/filtersBarRange/filtersBarRange.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { SidePanelCell } from "../../../sidePanel/sidePanelCell/sidePanelCell";
+import { Range } from "../../../range/range";
+import { FiltersBarSidePanelRange } from "../../filtersBarSidePanel/components/filtersBarSidePanelRange/filtersBarSidePanelRange";
+import { checkErrorType } from "../../../range/rangeHelper";
+import { useUniqueId } from "../../../commonHelpers/useUniqueId";
+export const FiltersBarRange = ({ sidePanelTitle, props, state, useSidePanelView, onChange, checkError }) => {
+    const component = _jsx(Range, Object.assign({}, props, { value: state.value, onChange: newValue => {
+            onChange({ value: newValue });
+        } }));
+    const rangeLabelledId = useUniqueId();
+    if (!useSidePanelView) {
+        return component;
+    }
+    return _jsx(SidePanelCell, { role: "group", labelledBy: rangeLabelledId, titleId: rangeLabelledId, title: sidePanelTitle, children: _jsx(FiltersBarSidePanelRange, Object.assign({}, props, { id: props.id ? `${props.id}-side-panel` : undefined, value: state.value, onChange: newValue => {
+                checkError && checkError(checkErrorType(newValue.min, newValue.max, props.fullBounded, props.allowEqualMinMax, props.min, props.max) !== undefined);
+                onChange({ value: newValue });
+            } })) });
+};
+export const TRANSLATIONS = [];