@geotab/zenith 3.1.1-beta.0 → 3.1.1-beta.1

package/esm/dateRange/dateRange.js

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

package/esm/dateRange/dateRangeUtils.d.ts

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

package/esm/dateRange/dateRangeUtils.js

@@ -1,275 +1 @@
-import { addDays, addMinutes, addMonths, getDayOfWeekOffset, getNewEndDate, getNewStartDate } from "../calendar/dateUtils";
-const defaultToLocalDateTime = d => typeof d === "string" ? new Date(d) : d;
-const defaultToReverseOffsetDateTime = d => typeof d === "string" ? new Date(d) : d;
-const defaultTranslate = s => s;
-export const GET_TODAY_OPTION = (toLocalDateTime = defaultToLocalDateTime, translate = defaultTranslate, toReverseOffsetDateTime = defaultToReverseOffsetDateTime) => {
-    const startDate = getNewStartDate(toLocalDateTime);
-    const endDate = getNewEndDate(toLocalDateTime);
-    const from = toReverseOffsetDateTime(startDate);
-    const to = toReverseOffsetDateTime(endDate);
-    return {
-        label: translate("Today"),
-        getRange: () => ({ from, to })
-    };
-};
-export const GET_YESTERDAY_OPTION = (toLocalDateTime = defaultToLocalDateTime, translate = defaultTranslate, toReverseOffsetDateTime = defaultToReverseOffsetDateTime) => {
-    const startDate = addDays(getNewStartDate(toLocalDateTime), -1);
-    const endDate = addDays(getNewEndDate(toLocalDateTime), -1);
-    const from = toReverseOffsetDateTime(startDate);
-    const to = toReverseOffsetDateTime(endDate);
-    return {
-        label: translate("Yesterday"),
-        getRange: () => ({ from, to })
-    };
-};
-export const GET_THIS_WEEK_OPTION = (toLocalDateTime = defaultToLocalDateTime, translate = defaultTranslate, firstDayOfWeek, toReverseOffsetDateTime = defaultToReverseOffsetDateTime) => {
-    const offsetDays = getDayOfWeekOffset(new Date(), firstDayOfWeek);
-    const startDate = addDays(getNewStartDate(toLocalDateTime), -offsetDays);
-    const endDate = addDays(getNewEndDate(toLocalDateTime), 6 - offsetDays);
-    const from = toReverseOffsetDateTime(startDate);
-    const to = toReverseOffsetDateTime(endDate);
-    return {
-        label: translate("This week"),
-        getRange: () => ({
-            from,
-            to
-        })
-    };
-};
-export const GET_NEXT_WEEK_OPTION = (toLocalDateTime = defaultToLocalDateTime, translate = defaultTranslate, firstDayOfWeek, toReverseOffsetDateTime = defaultToReverseOffsetDateTime) => {
-    const offsetDays = getDayOfWeekOffset(new Date(), firstDayOfWeek);
-    const startDate = addDays(getNewStartDate(toLocalDateTime), -offsetDays + 7);
-    const endDate = addDays(getNewEndDate(toLocalDateTime), -offsetDays + 13);
-    const from = toReverseOffsetDateTime(startDate);
-    const to = toReverseOffsetDateTime(endDate);
-    return {
-        label: translate("Next week"),
-        getRange: () => ({
-            from,
-            to
-        })
-    };
-};
-export const GET_LAST_WEEK_OPTION = (toLocalDateTime = defaultToLocalDateTime, translate = defaultTranslate, firstDayOfWeek, toReverseOffsetDateTime = defaultToReverseOffsetDateTime) => {
-    const offsetDays = getDayOfWeekOffset(new Date(), firstDayOfWeek);
-    const startDate = addDays(getNewStartDate(toLocalDateTime), -offsetDays - 7);
-    const endDate = addDays(getNewEndDate(toLocalDateTime), 6 - offsetDays - 7);
-    const from = toReverseOffsetDateTime(startDate);
-    const to = toReverseOffsetDateTime(endDate);
-    return {
-        label: translate("Last week"),
-        getRange: () => ({
-            from,
-            to
-        })
-    };
-};
-export const GET_THIS_MONTH_OPTION = (toLocalDateTime = defaultToLocalDateTime, translate = defaultTranslate, toReverseOffsetDateTime = defaultToReverseOffsetDateTime) => {
-    const startDate = getNewStartDate(toLocalDateTime);
-    startDate.setDate(1);
-    const endDate = getNewEndDate(toLocalDateTime);
-    addMonths(endDate, 1);
-    endDate.setDate(1);
-    endDate.setHours(0);
-    endDate.setMinutes(0);
-    const from = toReverseOffsetDateTime(startDate);
-    const to = toReverseOffsetDateTime(addMinutes(endDate, -1));
-    return {
-        label: translate("This month"),
-        getRange: () => ({
-            from,
-            to
-        })
-    };
-};
-export const GET_NEXT_MONTH_OPTION = (toLocalDateTime = defaultToLocalDateTime, translate = defaultTranslate, toReverseOffsetDateTime = defaultToReverseOffsetDateTime) => {
-    const startDate = addMonths(getNewStartDate(toLocalDateTime), 1);
-    startDate.setDate(1);
-    const endDate = addMonths(getNewStartDate(toLocalDateTime), 2);
-    endDate.setDate(1);
-    endDate.setHours(0);
-    endDate.setMinutes(0);
-    endDate.setSeconds(59);
-    const from = toReverseOffsetDateTime(startDate);
-    const to = toReverseOffsetDateTime(new Date(addMinutes(endDate, -1)));
-    return {
-        label: translate("Next month"),
-        getRange: () => ({
-            from,
-            to
-        })
-    };
-};
-export const GET_LAST_MONTH_OPTION = (toLocalDateTime = defaultToLocalDateTime, translate = defaultTranslate, toReverseOffsetDateTime = defaultToReverseOffsetDateTime) => {
-    const startDate = addMonths(getNewStartDate(toLocalDateTime), -1);
-    startDate.setDate(1);
-    const endDate = getNewEndDate(toLocalDateTime);
-    endDate.setDate(1);
-    endDate.setHours(0);
-    endDate.setMinutes(0);
-    const from = toReverseOffsetDateTime(startDate);
-    const to = toReverseOffsetDateTime(new Date(addMinutes(endDate, -1)));
-    return {
-        label: translate("Last month"),
-        getRange: () => ({
-            from,
-            to
-        })
-    };
-};
-export const GET_LAST_SEVEN_DAYS_OPTION = (toLocalDateTime = defaultToLocalDateTime, translate = defaultTranslate, toReverseOffsetDateTime = defaultToReverseOffsetDateTime) => {
-    const startDate = addDays(getNewStartDate(toLocalDateTime), -6);
-    const endDate = getNewEndDate(toLocalDateTime);
-    const from = toReverseOffsetDateTime(startDate);
-    const to = toReverseOffsetDateTime(endDate);
-    return {
-        label: translate("Last 7 days"),
-        getRange: () => ({
-            from,
-            to
-        })
-    };
-};
-export const GET_LAST_THIRTY_DAYS_OPTION = (toLocalDateTime = defaultToLocalDateTime, translate = defaultTranslate, toReverseOffsetDateTime = defaultToReverseOffsetDateTime) => {
-    const startDate = addDays(getNewStartDate(toLocalDateTime), -29);
-    const endDate = getNewEndDate(toLocalDateTime);
-    const from = toReverseOffsetDateTime(startDate);
-    const to = toReverseOffsetDateTime(endDate);
-    return {
-        label: translate("Last 30 days"),
-        getRange: () => ({
-            from,
-            to
-        })
-    };
-};
-export const GET_LAST_TWELVE_MONTHS_OPTION = (toLocalDateTime = defaultToLocalDateTime, translate = defaultTranslate, toReverseOffsetDateTime = defaultToReverseOffsetDateTime) => {
-    const startDate = addMonths(getNewStartDate(toLocalDateTime), -12);
-    const endDate = getNewEndDate(toLocalDateTime);
-    const from = toReverseOffsetDateTime(startDate);
-    const to = toReverseOffsetDateTime(endDate);
-    return {
-        label: translate("Last 12 months"),
-        getRange: () => ({
-            from,
-            to
-        })
-    };
-};
-export const GET_LAST_THREE_MONTH_OPTION = (toLocalDateTime = defaultToLocalDateTime, translate = defaultTranslate, toReverseOffsetDateTime = defaultToReverseOffsetDateTime) => {
-    const startDate = addMonths(getNewStartDate(toLocalDateTime), -3);
-    startDate.setDate(1);
-    const endDate = getNewEndDate(toLocalDateTime);
-    endDate.setDate(1);
-    endDate.setHours(0);
-    endDate.setMinutes(0);
-    const from = toReverseOffsetDateTime(startDate);
-    const to = toReverseOffsetDateTime(new Date(addMinutes(endDate, -1)));
-    return {
-        label: translate("Last 3 months"),
-        getRange: () => ({
-            from,
-            to
-        })
-    };
-};
-export const GET_LAST_QUARTER_OPTION = (toLocalDateTime = defaultToLocalDateTime, translate = defaultTranslate, toReverseOffsetDateTime = defaultToReverseOffsetDateTime) => {
-    const endDate = getNewEndDate(toLocalDateTime);
-    const currentQuarter = Math.floor((endDate.getMonth() + 3) / 3);
-    const quarterEndMonth = (currentQuarter - 1) * 3;
-    const quarterStartMonth = quarterEndMonth - 3;
-    const startDate = new Date(endDate);
-    startDate.setMonth(quarterStartMonth);
-    startDate.setDate(1);
-    startDate.setHours(0);
-    startDate.setMinutes(0);
-    startDate.setSeconds(0);
-    endDate.setMonth(quarterEndMonth);
-    endDate.setDate(1);
-    endDate.setHours(0);
-    endDate.setMinutes(0);
-    endDate.setMinutes(-1);
-    const from = toReverseOffsetDateTime(startDate);
-    const to = toReverseOffsetDateTime(endDate);
-    return {
-        label: translate("Last quarter"),
-        getRange: () => ({
-            from,
-            to
-        })
-    };
-};
-export const GET_THIS_QUARTER_OPTION = (toLocalDateTime = defaultToLocalDateTime, translate = defaultTranslate, toReverseOffsetDateTime = defaultToReverseOffsetDateTime) => {
-    const startDate = getNewStartDate(toLocalDateTime);
-    const currentQuarter = Math.floor((startDate.getMonth() + 3) / 3);
-    const quarterStartMonth = (currentQuarter - 1) * 3;
-    startDate.setMonth(quarterStartMonth);
-    startDate.setDate(1);
-    startDate.setHours(0);
-    startDate.setMinutes(0);
-    const endDate = new Date(startDate);
-    endDate.setMonth(quarterStartMonth + 3);
-    endDate.setDate(0);
-    endDate.setSeconds(59);
-    const from = toReverseOffsetDateTime(startDate);
-    const to = toReverseOffsetDateTime(new Date(addMinutes(endDate, 23 * 60 + 59)));
-    return {
-        label: translate("This quarter"),
-        getRange: () => ({
-            from,
-            to
-        })
-    };
-};
-export const GET_LAST_YEAR_OPTION = (toLocalDateTime = defaultToLocalDateTime, translate = defaultTranslate, toReverseOffsetDateTime = defaultToReverseOffsetDateTime) => {
-    const startDate = getNewStartDate(toLocalDateTime);
-    startDate.setFullYear(startDate.getFullYear() - 1);
-    startDate.setMonth(0);
-    startDate.setDate(1);
-    startDate.setHours(0);
-    startDate.setMinutes(0);
-    const endDate = new Date(startDate);
-    endDate.setMonth(11);
-    endDate.setDate(31);
-    endDate.setSeconds(59);
-    const from = toReverseOffsetDateTime(startDate);
-    const to = toReverseOffsetDateTime(new Date(addMinutes(endDate, 23 * 60 + 59)));
-    return {
-        label: translate("Last year"),
-        getRange: () => ({
-            from,
-            to
-        })
-    };
-};
-export const GET_THIS_YEAR_OPTION = (toLocalDateTime = defaultToLocalDateTime, translate = defaultTranslate, toReverseOffsetDateTime = defaultToReverseOffsetDateTime) => {
-    const startDate = getNewStartDate(toLocalDateTime);
-    startDate.setMonth(0);
-    startDate.setDate(1);
-    startDate.setHours(0);
-    startDate.setMinutes(0);
-    const endDate = getNewEndDate(toLocalDateTime);
-    endDate.setMonth(11);
-    endDate.setDate(31);
-    endDate.setHours(23);
-    endDate.setMinutes(59);
-    endDate.setSeconds(59);
-    const from = toReverseOffsetDateTime(startDate);
-    const to = toReverseOffsetDateTime(endDate);
-    return {
-        label: translate("This year"),
-        getRange: () => ({
-            from,
-            to
-        })
-    };
-};
-export const GET_DEFAULT_DATE_OPTIONS = (toLocalDateTime, translate, firstDayOfWeek, toReverseOffsetDateTime) => [
-    GET_TODAY_OPTION(toLocalDateTime, translate, toReverseOffsetDateTime),
-    GET_YESTERDAY_OPTION(toLocalDateTime, translate, toReverseOffsetDateTime),
-    GET_THIS_WEEK_OPTION(toLocalDateTime, translate, firstDayOfWeek, toReverseOffsetDateTime),
-    GET_LAST_WEEK_OPTION(toLocalDateTime, translate, firstDayOfWeek, toReverseOffsetDateTime),
-    GET_THIS_MONTH_OPTION(toLocalDateTime, translate, toReverseOffsetDateTime),
-    GET_LAST_MONTH_OPTION(toLocalDateTime, translate, toReverseOffsetDateTime),
-    GET_LAST_THREE_MONTH_OPTION(toLocalDateTime, translate, toReverseOffsetDateTime)
-];
+export * from "../dateRangeRaw/utils/dateRangeUtils";