@geotab/zenith 1.15.4 → 1.17.0-beta.0

package/README.md

@@ -40,6 +40,27 @@ Zenith library provides components defined in Zenith Design System. It includes
 
 ## Change log
 
+## 1.17.0
+
+ * Add the ability to use customFiltersBar component in the header
+ * Add debouncing for the getData function in the dropdown component
+ * Add property `target` to Button to allow opening links in new tab
+ * Add isLoading property to FiltersBar.Dropdown
+ * Improve skeleton component
+ * Improve data rendering in Dropdown
+ * Improve Card title
+ * Fix SelectField is out of viewport in some cases
+ * Fix Extra symbols on SortControl in mobile view
+ * Fix for Textarea overflow
+
+## 1.16.1
+
+ * Improve dateRange component
+ * Fix unreliable test
+ * Audit: table, pills, text-secondary for placeholder color, specs for the banner component
+ * Improve Header: Make Menu.Item to be bottom-right aligned in Header
+ * Improve FiltersBar: Show selected values as pills in the sidePanel dropdown when getSelectedItem is passed
+
 ## 1.15.4
 
  * Fix unreliable tests

package/dist/betaPill/betaPill.d.ts

@@ -1,12 +1,22 @@
 /// <reference types="react" />
 import "./betaPill.less";
+export interface IBetaPillActions {
+    text?: string;
+    onClick?: () => void;
+    link?: string;
+    linkOptions?: {
+        target?: "_blank" | "_parent" | "_self" | "_top";
+    };
+}
 export interface IBetaPill {
     className?: string;
     /**
-    * @deprecated
-    * @param translate - will be removed in the next major release
-    */
+     * @deprecated
+     * @param translate - will be removed in the next major release
+     */
     translate?: (s: string) => string;
+    feedbackAction?: IBetaPillActions;
+    betaOptionAction?: IBetaPillActions;
 }
 export declare const BetaPill: React.FC<IBetaPill>;
 export declare const TRANSLATIONS: string[];

package/dist/betaPill/betaPill.js

@@ -8,13 +8,26 @@ const useMobile_1 = require("../commonHelpers/hooks/useMobile");
 const iconLab_1 = require("../icons/iconLab");
 const pill_1 = require("../pill/pill");
 const useLanguage_1 = require("../utils/localization/useLanguage");
-const BetaPill = ({ className }) => {
+const pillExpandable_1 = require("../pillExpandable/pillExpandable");
+const betaPillContext_1 = require("./betaPillContext");
+const BetaPill = ({ className, feedbackAction, betaOptionAction }) => {
     const { translate } = (0, useLanguage_1.useLanguage)();
     const isMobile = (0, useMobile_1.useMobile)();
-    const pillClasses = (0, react_1.useMemo)(() => (0, classNames_1.classNames)(["zen-caption", "zen-beta-pill", isMobile ? "zen-beta-pill--mobile" : "", className !== null && className !== void 0 ? className : ""]), [isMobile, className]);
-    return (0, jsx_runtime_1.jsx)(pill_1.Pill, { icon: iconLab_1.IconLab, className: pillClasses, type: "info", children: !isMobile && (0, jsx_runtime_1.jsx)("span", { className: "zen-caption__content", children: translate("Beta") }) });
+    const pillClasses = (0, react_1.useMemo)(() => (0, classNames_1.classNames)([
+        "zen-caption",
+        "zen-beta-pill",
+        isMobile ? "zen-beta-pill--mobile" : "",
+        className !== null && className !== void 0 ? className : ""
+    ]), [isMobile, className]);
+    const contextActions = (0, betaPillContext_1.useBetaPillActions)();
+    let resolvedMainAction = feedbackAction || (contextActions === null || contextActions === void 0 ? void 0 : contextActions.feedbackAction);
+    let resolvedSecondaryAction = betaOptionAction || (contextActions === null || contextActions === void 0 ? void 0 : contextActions.betaOptionAction);
+    if (resolvedMainAction || resolvedSecondaryAction) {
+        resolvedMainAction = Object.assign(Object.assign({}, resolvedMainAction), { text: (resolvedMainAction === null || resolvedMainAction === void 0 ? void 0 : resolvedMainAction.text) || translate("Send feedback") });
+        resolvedSecondaryAction = Object.assign(Object.assign({}, resolvedSecondaryAction), { text: (resolvedSecondaryAction === null || resolvedSecondaryAction === void 0 ? void 0 : resolvedSecondaryAction.text) || translate("Manage beta option") });
+        return ((0, jsx_runtime_1.jsx)(pillExpandable_1.PillExpandable, { isBeta: true, icon: iconLab_1.IconLab, description: translate("This feature is still in testing, and is not fully supported yet. Your feedback is valuable to help guide future enhancements."), text: translate("Beta"), type: "info", className: pillClasses, mainAction: resolvedMainAction, secondaryAction: resolvedSecondaryAction }));
+    }
+    return ((0, jsx_runtime_1.jsx)(pill_1.Pill, { icon: iconLab_1.IconLab, className: pillClasses, type: "info", children: !isMobile && ((0, jsx_runtime_1.jsx)("span", { className: "zen-caption__content", children: translate("Beta") })) }));
 };
 exports.BetaPill = BetaPill;
-exports.TRANSLATIONS = [
-    "Beta"
-];
+exports.TRANSLATIONS = ["Beta"];

package/dist/betaPill/betaPillContext.d.ts

@@ -0,0 +1,20 @@
+import React, { ReactNode } from "react";
+interface IBetaPillActions {
+    text?: string;
+    onClick?: () => void;
+    link?: string;
+    linkOptions?: {
+        target?: "_blank" | "_parent" | "_self" | "_top";
+    };
+}
+interface IBetaPillActions {
+    feedbackAction?: IBetaPillActions;
+    betaOptionAction?: IBetaPillActions;
+}
+interface IBetaPillProviderProps {
+    actions?: IBetaPillActions;
+    children: ReactNode;
+}
+export declare const BetaPillProvider: React.FC<IBetaPillProviderProps>;
+export declare const useBetaPillActions: () => IBetaPillActions | undefined;
+export {};

package/dist/betaPill/betaPillContext.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useBetaPillActions = exports.BetaPillProvider = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const BetaPillContext = (0, react_1.createContext)(undefined);
+const BetaPillProvider = ({ actions, children }) => (0, jsx_runtime_1.jsx)(BetaPillContext.Provider, { value: actions, children: children });
+exports.BetaPillProvider = BetaPillProvider;
+// internal usage
+const useBetaPillActions = () => (0, react_1.useContext)(BetaPillContext);
+exports.useBetaPillActions = useBetaPillActions;

package/dist/button/button.d.ts

@@ -16,5 +16,7 @@ export interface IButton extends IZenComponentProps {
     onKeyUp?: React.KeyboardEventHandler<HTMLElement>;
     link?: string;
     htmlType?: THTMLButtonType;
+    target?: string;
+    rel?: string;
 }
 export declare const Button: React.ForwardRefExoticComponent<IButton & React.RefAttributes<HTMLButtonElement>>;

package/dist/button/button.js

@@ -42,7 +42,7 @@ const classNames_1 = require("../commonHelpers/classNames/classNames");
 const useDriveClassName_1 = require("../utils/theme/useDriveClassName");
 // eslint-disable-next-line @typescript-eslint/naming-convention
 exports.Button = React.forwardRef(function Button(_a, ref) {
-    var { className, type, disabled, id, title, onClick, onMouseOver, onMouseOut, onMouseDown, onMouseUp, onKeyDown, onKeyUp, children, link, htmlType } = _a, other = __rest(_a, ["className", "type", "disabled", "id", "title", "onClick", "onMouseOver", "onMouseOut", "onMouseDown", "onMouseUp", "onKeyDown", "onKeyUp", "children", "link", "htmlType"]);
+    var { className, type, disabled, id, title, onClick, onMouseOver, onMouseOut, onMouseDown, onMouseUp, onKeyDown, onKeyUp, children, link, target, htmlType, rel } = _a, other = __rest(_a, ["className", "type", "disabled", "id", "title", "onClick", "onMouseOver", "onMouseOut", "onMouseDown", "onMouseUp", "onKeyDown", "onKeyUp", "children", "link", "target", "htmlType", "rel"]);
     const modifierClassName = type && type !== buttonType_1.ButtonType.Secondary ? `zen-button--${type}` : "";
     const disabledClassName = disabled ? "zen-button--disabled" : "";
     const driveClasses = (0, useDriveClassName_1.useDriveClassName)("zen-button");
@@ -59,7 +59,7 @@ exports.Button = React.forwardRef(function Button(_a, ref) {
         ])
     };
     if (link) {
-        return (0, jsx_runtime_1.jsx)("a", Object.assign({ role: "link", href: disabled ? undefined : link, "aria-disabled": disabled, onKeyDown: onKeyDown, onKeyUp: onKeyUp, onClick: onClick }, commonArgs, other, { children: children }));
+        return (0, jsx_runtime_1.jsx)("a", Object.assign({ role: "link", rel: rel, target: target, href: disabled ? undefined : link, "aria-disabled": disabled, onKeyDown: onKeyDown, onKeyUp: onKeyUp, onClick: onClick }, commonArgs, other, { children: children }));
     }
     return (0, jsx_runtime_1.jsx)("button", Object.assign({ onClick: onClick, onMouseOver: onMouseOver, onMouseOut: onMouseOut, onMouseDown: onMouseDown, onMouseUp: onMouseUp, onKeyDown: onKeyDown, onKeyUp: onKeyUp, ref: ref, type: htmlType, disabled: disabled }, commonArgs, other, { children: children }));
 });

package/dist/calendar/calendar.d.ts

@@ -1,6 +1,7 @@
 /// <reference types="react" />
 import "./calendar.less";
 import { IZenComponentProps } from "../commonHelpers/zenComponent";
+export declare const monthLabelsArray: string[];
 export interface ICalendarRange {
     from?: string;
     to?: string;
@@ -8,7 +9,7 @@ export interface ICalendarRange {
 export interface ICalendar extends IZenComponentProps {
     id: string;
     value: ICalendarRange;
-    onChange: (value: ICalendarRange) => void;
+    onChange: (value: ICalendarRange, active?: "start" | "end") => void;
     /**
     * @deprecated
     * @param translate - will be removed in the next major release
@@ -22,7 +23,8 @@ export interface ICalendar extends IZenComponentProps {
     startDayOfWeek?: number;
     yearRange?: number;
     isMobileView?: boolean;
-    getPreviousActiveElement?: () => Element | SVGAElement | null;
+    onTodayButtonClick?: (e: any) => void;
+    getCurrentActiveField?: () => "start" | "end";
 }
 export declare const Calendar: React.FC<ICalendar>;
 export declare const TRANSLATIONS: string[];

package/dist/calendar/calendar.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.TRANSLATIONS = exports.Calendar = void 0;
+exports.TRANSLATIONS = exports.Calendar = exports.monthLabelsArray = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const dateUtils_1 = require("./dateUtils");
@@ -13,9 +13,12 @@ const useLanguage_1 = require("../utils/localization/useLanguage");
 const useDriveClassName_1 = require("../utils/theme/useDriveClassName");
 const textIconButton_1 = require("../textIconButton/textIconButton");
 const textIconButton_2 = require("../textIconButton/textIconButton");
+const button_1 = require("../button/button");
+const buttonType_1 = require("../button/buttonType");
 const DEFAULT_START_DAY_OF_WEEK = 0;
 const DEFAULT_YEAR_RANGE = 20;
-const Calendar = ({ id, value, onChange, disableFutureDates = false, disablePastDates = false, disableDatesAfter, disableDatesBefore, dateRangeMode = false, startDayOfWeek, yearRange, isMobileView, getPreviousActiveElement }) => {
+exports.monthLabelsArray = ["Jan", "Feb", "Mar", "Apr", "Ma", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
+const Calendar = ({ id, value, onChange, disableFutureDates = false, disablePastDates = false, disableDatesAfter, disableDatesBefore, dateRangeMode = false, startDayOfWeek, yearRange, isMobileView, getCurrentActiveField, onTodayButtonClick }) => {
     const { translate } = (0, useLanguage_1.useLanguage)();
     const fromDate = (0, react_1.useMemo)(() => value.from ? (0, dateUtils_1.toDayStart)(value.from) : undefined, [value.from]);
     const toDate = (0, react_1.useMemo)(() => value.to ? (0, dateUtils_1.toDayStart)(value.to) : undefined, [value.to]);
@@ -36,10 +39,16 @@ const Calendar = ({ id, value, onChange, disableFutureDates = false, disablePast
         }
         setViewDate(dateLike.toISOString());
     }, [setViewDate]);
-    const handleFocusDateChange = (0, react_1.useCallback)((date) => {
+    const handleFocusDateChange = (0, react_1.useCallback)((focusing = false) => (date) => {
+        var _a;
+        if (date && focusing) {
+            const dateLike = new Date(date);
+            const button = (_a = parentRef.current) === null || _a === void 0 ? void 0 : _a.querySelector(`[data-id="${id}-day-${dateLike.getDate()}-${dateLike.getMonth()}-${dateLike.getFullYear()}"]`);
+            button === null || button === void 0 ? void 0 : button.focus();
+        }
         changeView(date);
         setFocusDate(date);
-    }, [changeView, setFocusDate]);
+    }, [changeView, setFocusDate, id]);
     const dayLabels = (0, react_1.useMemo)(() => ({
         0: translate("ShortSunday"),
         1: translate("ShortMonday"),
@@ -54,18 +63,18 @@ const Calendar = ({ id, value, onChange, disableFutureDates = false, disablePast
         return dayLabels[dayOfWeek];
     }, [dayLabels]);
     const monthLabels = (0, react_1.useMemo)(() => ({
-        0: translate("January"),
-        1: translate("February"),
-        2: translate("March"),
-        3: translate("April"),
-        4: translate("May"),
-        5: translate("June"),
-        6: translate("July"),
-        7: translate("August"),
-        8: translate("September"),
-        9: translate("October"),
-        10: translate("November"),
-        11: translate("December")
+        0: translate(exports.monthLabelsArray[0]),
+        1: translate(exports.monthLabelsArray[1]),
+        2: translate(exports.monthLabelsArray[2]),
+        3: translate(exports.monthLabelsArray[3]),
+        4: translate(exports.monthLabelsArray[4]),
+        5: translate(exports.monthLabelsArray[5]),
+        6: translate(exports.monthLabelsArray[6]),
+        7: translate(exports.monthLabelsArray[7]),
+        8: translate(exports.monthLabelsArray[8]),
+        9: translate(exports.monthLabelsArray[9]),
+        10: translate(exports.monthLabelsArray[10]),
+        11: translate(exports.monthLabelsArray[11])
     }), [translate]);
     const getMonthYear = (0, react_1.useCallback)((date) => {
         const month = new Date(date).getMonth();
@@ -80,13 +89,12 @@ const Calendar = ({ id, value, onChange, disableFutureDates = false, disablePast
     const selectionHandler = (0, react_1.useCallback)(
     // eslint-disable-next-line complexity
     (selectedDate, isOtherMonth) => {
-        var _a;
         setHoverDate(undefined);
         if (isOtherMonth) {
-            handleFocusDateChange(selectedDate);
+            handleFocusDateChange()(selectedDate);
         }
         // single date mode
-        if (!dateRangeMode) {
+        if (!dateRangeMode || !getCurrentActiveField) {
             if (fromDate && fromDate === selectedDate) {
                 onChange({ from: undefined, to: undefined });
             }
@@ -95,47 +103,34 @@ const Calendar = ({ id, value, onChange, disableFutureDates = false, disablePast
             }
             return;
         }
+        const currentActiveField = getCurrentActiveField();
         // no selection yet
         if (!fromDate && !toDate) {
-            onChange({ from: selectedDate, to: undefined });
+            onChange({ from: currentActiveField === "start" ? selectedDate : undefined, to: currentActiveField === "end" ? selectedDate : undefined }, currentActiveField);
             return;
         }
-        // unclick start date
-        if (fromDate && selectedDate === fromDate) {
-            onChange({ from: toDate, to: undefined });
+        if (currentActiveField === "start" && toDate && selectedDate > toDate) {
+            onChange({ from: selectedDate, to: undefined }, "start");
             return;
         }
-        // unclick end date
-        if (toDate && selectedDate === toDate) {
-            onChange({ from: fromDate, to: undefined });
+        if (currentActiveField === "end" && fromDate && selectedDate < fromDate) {
+            onChange({ from: undefined, to: selectedDate }, "end");
             return;
         }
-        // fromDate is set, toDate is not set
-        if (fromDate && !toDate) {
-            const newFrom = selectedDate <= fromDate ? selectedDate : fromDate;
-            const newTo = selectedDate <= fromDate ? fromDate : selectedDate;
-            const isWrongPeriod = (0, dateUtils_1.isDifferentPeriod)(new Date(newFrom), new Date(newTo), disableFutureDates, disablePastDates, disableDatesBefore, disableDatesAfter);
-            if (isWrongPeriod) {
-                return;
-            }
-            if (selectedDate < fromDate) {
-                onChange({ from: selectedDate, to: fromDate });
-                return;
-            }
-            onChange({ from: fromDate, to: selectedDate });
+        if (fromDate && selectedDate === fromDate && currentActiveField === "end") {
+            onChange({ from: selectedDate, to: selectedDate }, "end");
             return;
         }
-        if (getPreviousActiveElement) {
-            const previousActiveElementId = (_a = getPreviousActiveElement()) === null || _a === void 0 ? void 0 : _a.getAttribute("id");
-            const startDateId = `${id}-start`;
-            const endDateId = `${id}-end`;
-            const isWrongPeriodFn = (start, end) => (0, dateUtils_1.isDifferentPeriod)(start, end, disableFutureDates, disablePastDates, disableDatesBefore, disableDatesAfter);
-            const newRangeOptions = (0, calendarUtils_1.getCalendarRange)(selectedDate, isWrongPeriodFn, fromDate, toDate, previousActiveElementId === startDateId, previousActiveElementId === endDateId);
-            onChange(newRangeOptions);
+        if (toDate && selectedDate === toDate && currentActiveField === "start") {
+            onChange({ from: selectedDate, to: selectedDate }, "start");
             return;
         }
-        onChange({ from: selectedDate, to: undefined });
-    }, [dateRangeMode, fromDate, toDate, getPreviousActiveElement, onChange, handleFocusDateChange, disableFutureDates, disablePastDates, disableDatesBefore, disableDatesAfter, id]);
+        const isWrongPeriodFn = (start, end) => (0, dateUtils_1.isDifferentPeriod)(start, end, disableFutureDates, disablePastDates, disableDatesBefore, disableDatesAfter);
+        const newRangeOptions = (0, calendarUtils_1.getCalendarRange)(selectedDate, currentActiveField, isWrongPeriodFn, fromDate, toDate);
+        onChange(newRangeOptions, currentActiveField);
+        return;
+    }, [dateRangeMode, getCurrentActiveField, fromDate, toDate, onChange, handleFocusDateChange,
+        disableFutureDates, disablePastDates, disableDatesBefore, disableDatesAfter]);
     const handleDateKeyDown = (0, react_1.useCallback)((e, isDisabled, date, isOtherMonth) => {
         if (e.code === "Enter" || e.code === "Space") {
             e.preventDefault();
@@ -143,43 +138,43 @@ const Calendar = ({ id, value, onChange, disableFutureDates = false, disablePast
             return;
         }
         if (e.code === "ArrowLeft") {
-            (0, calendarUtils_1.setFocusTo)(e, (0, dateUtils_1.addDays)(new Date(date), -1).toISOString(), handleFocusDateChange);
+            (0, calendarUtils_1.setFocusTo)(e, (0, dateUtils_1.addDays)(new Date(date), -1).toISOString(), handleFocusDateChange(true));
             return;
         }
         if (e.code === "ArrowRight") {
-            (0, calendarUtils_1.setFocusTo)(e, (0, dateUtils_1.addDays)(new Date(date), 1).toISOString(), handleFocusDateChange);
+            (0, calendarUtils_1.setFocusTo)(e, (0, dateUtils_1.addDays)(new Date(date), 1).toISOString(), handleFocusDateChange(true));
             return;
         }
         if (e.code === "ArrowUp") {
-            (0, calendarUtils_1.setFocusTo)(e, (0, dateUtils_1.addDays)(new Date(date), -7).toISOString(), handleFocusDateChange);
+            (0, calendarUtils_1.setFocusTo)(e, (0, dateUtils_1.addDays)(new Date(date), -7).toISOString(), handleFocusDateChange(true));
             return;
         }
         if (e.code === "ArrowDown") {
-            (0, calendarUtils_1.setFocusTo)(e, (0, dateUtils_1.addDays)(new Date(date), 7).toISOString(), handleFocusDateChange);
+            (0, calendarUtils_1.setFocusTo)(e, (0, dateUtils_1.addDays)(new Date(date), 7).toISOString(), handleFocusDateChange(true));
             return;
         }
         if (e.code === "Home") {
-            (0, calendarUtils_1.setFocusTo)(e, (0, dateUtils_1.getStartOfWeek)(date), handleFocusDateChange);
+            (0, calendarUtils_1.setFocusTo)(e, (0, dateUtils_1.getStartOfWeek)(date), handleFocusDateChange(true));
             return;
         }
         if (e.code === "End") {
-            (0, calendarUtils_1.setFocusTo)(e, (0, dateUtils_1.getEndOfWeek)(date), handleFocusDateChange);
+            (0, calendarUtils_1.setFocusTo)(e, (0, dateUtils_1.getEndOfWeek)(date), handleFocusDateChange(true));
             return;
         }
         if (e.code === "PageUp" && e.shiftKey) {
-            (0, calendarUtils_1.setFocusTo)(e, (0, dateUtils_1.getSameDateOrTheLastForMonth)(date, -12), handleFocusDateChange);
+            (0, calendarUtils_1.setFocusTo)(e, (0, dateUtils_1.getSameDateOrTheLastForMonth)(date, -12), handleFocusDateChange(true));
             return;
         }
         if (e.code === "PageDown" && e.shiftKey) {
-            (0, calendarUtils_1.setFocusTo)(e, (0, dateUtils_1.getSameDateOrTheLastForMonth)(date, 12), handleFocusDateChange);
+            (0, calendarUtils_1.setFocusTo)(e, (0, dateUtils_1.getSameDateOrTheLastForMonth)(date, 12), handleFocusDateChange(true));
             return;
         }
         if (e.code === "PageUp") {
-            (0, calendarUtils_1.setFocusTo)(e, (0, dateUtils_1.getSameDateOrTheLastForMonth)(date, -1), handleFocusDateChange);
+            (0, calendarUtils_1.setFocusTo)(e, (0, dateUtils_1.getSameDateOrTheLastForMonth)(date, -1), handleFocusDateChange(true));
             return;
         }
         if (e.code === "PageDown") {
-            (0, calendarUtils_1.setFocusTo)(e, (0, dateUtils_1.getSameDateOrTheLastForMonth)(date, 1), handleFocusDateChange);
+            (0, calendarUtils_1.setFocusTo)(e, (0, dateUtils_1.getSameDateOrTheLastForMonth)(date, 1), handleFocusDateChange(true));
             return;
         }
     }, [selectionHandler, handleFocusDateChange]);
@@ -194,23 +189,10 @@ const Calendar = ({ id, value, onChange, disableFutureDates = false, disablePast
         setFocusDate(undefined);
     }, [selectionHandler]);
     (0, react_1.useEffect)(() => {
-        var _a, _b, _c;
-        // changing focused element only if focus is already in calendar
-        if ((((_a = focusRef.current) === null || _a === void 0 ? void 0 : _a.className.baseVal) || ((_b = focusRef.current) === null || _b === void 0 ? void 0 : _b.className) || "").indexOf("zen-calendar") === -1) {
-            return;
-        }
-        if (!focusDate) {
-            return;
-        }
-        const dateLike = new Date(focusDate);
-        const button = (_c = parentRef.current) === null || _c === void 0 ? void 0 : _c.querySelector(`[data-id="${id}-day-${dateLike.getDate()}-${dateLike.getMonth()}-${dateLike.getFullYear()}"]`);
-        button === null || button === void 0 ? void 0 : button.focus();
-    }, [id, viewDate, parentRef, focusDate]);
-    (0, react_1.useEffect)(() => {
-        value.to && handleFocusDateChange(value.to);
+        value.to && handleFocusDateChange()(value.to);
     }, [value.to, handleFocusDateChange]);
     (0, react_1.useEffect)(() => {
-        value.from && handleFocusDateChange(value.from);
+        value.from && handleFocusDateChange()(value.from);
     }, [value.from, handleFocusDateChange]);
     const getBeforeDecorator = (0, react_1.useCallback)((date, isFirstDayOfMonth, isFirstDayOfWeek) => {
         if (!dateRangeMode) {
@@ -242,12 +224,21 @@ const Calendar = ({ id, value, onChange, disableFutureDates = false, disablePast
         }
         return null;
     }, [dateRangeMode, hoverDate, focusDate, fromDate, toDate]);
+    const handleTodayButtonClick = (0, react_1.useCallback)((e) => {
+        if (!onTodayButtonClick) {
+            return;
+        }
+        setViewDate(new Date().toISOString());
+        onTodayButtonClick(e);
+    }, [onTodayButtonClick]);
     const memoizedVisibleFocus = (0, react_1.useMemo)(() => focusDate ? dates.some(arr => arr.some(el => el === focusDate)) : true, [dates, focusDate]);
-    return ((0, jsx_runtime_1.jsxs)("div", { ref: parentRef, onBlur: () => setFocusDate(fromDate || viewDate), className: (0, classNames_1.classNames)(["zen-calendar", driveClassName || ""]), children: [(0, jsx_runtime_1.jsxs)("div", { className: "zen-calendar__header", children: [(0, jsx_runtime_1.jsx)(textIconButton_1.TextIconButton, { className: "zen-calendar__btn", type: "tertiary-black", icon: iconChevronLeftSmall_1.IconChevronLeftSmall, title: translate("Previous month"), onClick: () => changeView((0, dateUtils_1.addMonth)(viewDate, -1)), iconPosition: textIconButton_2.ButtonIconPosition.Start }), (0, jsx_runtime_1.jsxs)("div", { className: "zen-calendar__year", children: [(0, jsx_runtime_1.jsx)("div", { className: "zen-calendar__year-name zen-ellipsis", "aria-live": "polite", children: getMonthYear(viewDate) }), (0, jsx_runtime_1.jsx)(parallelSelection_1.ParallelSelectionTrigger, { className: "zen-calendar__year-trigger zen-calendar__btn", title: translate("Select year"), ref: parallelSelectionTriggerRef }), (0, jsx_runtime_1.jsx)(parallelSelection_1.ParallelSelection, { selected: new Date(viewDate).getFullYear().toString(), items: years, triggerRef: parallelSelectionTriggerRef, title: translate("Select year"), onSelect: year => changeView((0, dateUtils_1.setYear)(viewDate, year)), isMobileView: isMobileView })] }), (0, jsx_runtime_1.jsx)(textIconButton_1.TextIconButton, { className: "zen-calendar__btn", type: "tertiary-black", icon: iconChevronRightSmall_1.IconChevronRightSmall, title: translate("Next month"), onClick: () => changeView((0, dateUtils_1.addMonth)(viewDate, 1)), iconPosition: textIconButton_2.ButtonIconPosition.Start })] }), (0, jsx_runtime_1.jsxs)("table", { className: "zen-calendar__table", children: [(0, jsx_runtime_1.jsx)("thead", { children: (0, jsx_runtime_1.jsx)("tr", { className: "zen-calendar__columns", children: dates[0].map(date => (0, jsx_runtime_1.jsx)("th", { className: "zen-calendar__column", children: getDayOfWeek(date) }, `cal-h-${date}`)) }) }), (0, jsx_runtime_1.jsx)("tbody", { className: (0, classNames_1.classNames)(["zen-calendar__body", isMobileView ? "zen-calendar__body--mobile-view" : ""]), children: dates.map((week, weekIndex) => (0, jsx_runtime_1.jsx)("tr", { className: "zen-calendar__row", children: week.map((date, index) => {
+    const currentActiveField = getCurrentActiveField ? getCurrentActiveField() : undefined;
+    return ((0, jsx_runtime_1.jsxs)("div", { ref: parentRef, onBlur: () => setFocusDate(fromDate || viewDate), className: (0, classNames_1.classNames)(["zen-calendar", driveClassName || ""]), children: [(0, jsx_runtime_1.jsxs)("div", { className: "zen-calendar__header", children: [isMobileView ? null : (0, jsx_runtime_1.jsx)(textIconButton_1.TextIconButton, { className: "zen-calendar__btn", type: "tertiary-black", icon: iconChevronLeftSmall_1.IconChevronLeftSmall, title: translate("Previous month"), onClick: () => changeView((0, dateUtils_1.addMonth)(viewDate, -1)), iconPosition: textIconButton_2.ButtonIconPosition.Start }), (0, jsx_runtime_1.jsxs)("div", { className: (0, classNames_1.classNames)(["zen-calendar__year", onTodayButtonClick ? "zen-calendar__year--limited" : ""]), children: [(0, jsx_runtime_1.jsx)("div", { className: (0, classNames_1.classNames)(["zen-calendar__year-name", onTodayButtonClick ? "zen-calendar__year-name--left" : "", "zen-ellipsis"]), "aria-live": "polite", children: getMonthYear(viewDate) }), (0, jsx_runtime_1.jsx)(parallelSelection_1.ParallelSelectionTrigger, { className: "zen-calendar__year-trigger zen-calendar__btn", title: translate("Select year"), ref: parallelSelectionTriggerRef }), (0, jsx_runtime_1.jsx)(parallelSelection_1.ParallelSelection, { selected: new Date(viewDate).getFullYear().toString(), items: years, triggerRef: parallelSelectionTriggerRef, title: translate("Select year"), onSelect: year => changeView((0, dateUtils_1.setYear)(viewDate, year)), isMobileView: isMobileView, alignment: onTodayButtonClick ? "bottom" : "bottom-right" })] }), onTodayButtonClick ? (0, jsx_runtime_1.jsx)(button_1.Button, { type: buttonType_1.ButtonType.Tertiary, className: "zen-calendar__today-button", disabled: false, onClick: handleTodayButtonClick, children: translate("Today") }) : null, isMobileView ? (0, jsx_runtime_1.jsxs)("div", { className: "zen-calendar__months", children: [(0, jsx_runtime_1.jsx)(textIconButton_1.TextIconButton, { className: "zen-calendar__btn", type: "tertiary-black", icon: iconChevronLeftSmall_1.IconChevronLeftSmall, title: translate("Previous month"), onClick: () => changeView((0, dateUtils_1.addMonth)(viewDate, -1)), iconPosition: textIconButton_2.ButtonIconPosition.Start }), (0, jsx_runtime_1.jsx)(textIconButton_1.TextIconButton, { className: "zen-calendar__btn", type: "tertiary-black", icon: iconChevronRightSmall_1.IconChevronRightSmall, title: translate("Next month"), onClick: () => changeView((0, dateUtils_1.addMonth)(viewDate, 1)), iconPosition: textIconButton_2.ButtonIconPosition.Start })] }) : null, isMobileView ? null : (0, jsx_runtime_1.jsx)(textIconButton_1.TextIconButton, { className: "zen-calendar__btn", type: "tertiary-black", icon: iconChevronRightSmall_1.IconChevronRightSmall, title: translate("Next month"), onClick: () => changeView((0, dateUtils_1.addMonth)(viewDate, 1)), iconPosition: textIconButton_2.ButtonIconPosition.Start })] }), (0, jsx_runtime_1.jsxs)("table", { className: "zen-calendar__table", children: [(0, jsx_runtime_1.jsx)("thead", { children: (0, jsx_runtime_1.jsx)("tr", { className: "zen-calendar__columns", children: dates[0].map(date => (0, jsx_runtime_1.jsx)("th", { className: "zen-calendar__column", children: getDayOfWeek(date) }, `cal-h-${date}`)) }) }), (0, jsx_runtime_1.jsx)("tbody", { className: (0, classNames_1.classNames)(["zen-calendar__body", isMobileView ? "zen-calendar__body--mobile-view" : ""]), children: dates.map((week, weekIndex) => (0, jsx_runtime_1.jsx)("tr", { className: "zen-calendar__row", children: week.map((date, index) => {
                                 const isOtherMonth = date < monthStart || date > monthEnd;
                                 const isDisabled = isDisabledDay(date);
                                 const dateLike = new Date(date);
                                 const isActive = date === fromDate || date === toDate;
+                                const isReadyToChange = date === fromDate && currentActiveField === "start" || date === toDate && currentActiveField === "end";
                                 const isFocusable = memoizedVisibleFocus ? date === (fromDate || viewDate) : date.split("T")[0] === viewDate.split("T")[0];
                                 const isFirstDayOfWeek = index === 0;
                                 const isLastDayOfWeek = index === 6;
@@ -256,8 +247,14 @@ const Calendar = ({ id, value, onChange, disableFutureDates = false, disablePast
                                 const isInRange = dateRangeMode && !isFirstDayOfWeek && !isLastDayOfWeek && (0, calendarUtils_1.isDateInRange)(date, hoverDate || focusDate, fromDate, toDate);
                                 return (0, jsx_runtime_1.jsx)("td", { className: "zen-calendar__cell", children: (0, jsx_runtime_1.jsxs)("button", { className: (0, classNames_1.classNames)([
                                             "zen-calendar__day-wrapper",
-                                            isActive ? "zen-calendar__day-wrapper--active" : ""
-                                        ]), onPointerDown: evt => { !isDisabled && evt.button !== 2 && onPointerDown(date, isOtherMonth); }, onPointerEnter: () => { !isDisabled && setHoverDate(date); }, onPointerLeave: () => { setHoverDate(undefined); }, tabIndex: isFocusable ? 0 : -1, type: "button", "data-id": `${id}-day-${dateLike.getDate()}-${dateLike.getMonth()}-${dateLike.getFullYear()}`, "aria-label": (0, calendarUtils_1.getButtonLabel)(translate, date, dateRangeMode, fromDate, toDate), onKeyDown: evt => handleDateKeyDown(evt, isDisabled, date, isOtherMonth), onFocus: () => { !isDisabled && !isOtherMonth && handleFocusDateChange(date); }, disabled: isDisabled, children: [getBeforeDecorator(date, isFirstDayOfMonth, isFirstDayOfWeek), (0, jsx_runtime_1.jsx)("div", { className: (0, classNames_1.classNames)([
+                                            isActive ? "zen-calendar__day-wrapper--active" : "",
+                                            isReadyToChange ? "zen-calendar__day-wrapper--ready-to-change" : ""
+                                        ]), onPointerDown: evt => {
+                                            evt.preventDefault();
+                                            !isDisabled && evt.button !== 2 && onPointerDown(date, isOtherMonth);
+                                        }, onPointerEnter: () => { !isDisabled && setHoverDate(date); }, onPointerLeave: () => { setHoverDate(undefined); }, tabIndex: isFocusable ? 0 : -1, type: "button", "data-id": `${id}-day-${dateLike.getDate()}-${dateLike.getMonth()}-${dateLike.getFullYear()}`, "aria-label": (0, calendarUtils_1.getButtonLabel)(translate, date, dateRangeMode, fromDate, toDate), onKeyDown: evt => handleDateKeyDown(evt, isDisabled, date, isOtherMonth), onFocus: () => {
+                                            !isDisabled && !isOtherMonth && handleFocusDateChange(true)(date);
+                                        }, disabled: isDisabled, children: [getBeforeDecorator(date, isFirstDayOfMonth, isFirstDayOfWeek), (0, jsx_runtime_1.jsx)("div", { className: (0, classNames_1.classNames)([
                                                     "zen-calendar__day",
                                                     isInRange ? "zen-calendar__day--in-range" : "",
                                                     isOtherMonth ? "zen-calendar__day--other-month" : "",

package/dist/calendar/calendarUtils.d.ts

@@ -4,7 +4,10 @@ export declare const isRightBorderVisible: (date: string, hoverDate: string | un
 export declare const isDateInRange: (date: string, hoverDate: string | undefined, startDate?: string, endDate?: string) => boolean;
 export declare const getButtonLabel: (translate: (key: string) => string, date: string, isRangeMode: boolean, startDate?: string, endDate?: string) => string;
 export declare const setFocusTo: (e: KeyboardEvent, date: string, selectionHandler: (d: string) => void) => void;
-export declare const getCalendarRange: (selectedDate: string, isWrongPeriodFn: (dateStart?: Date, dateEnd?: Date) => boolean, dateFrom?: string, dateTo?: string, isPrevStart?: boolean, isPrevEnd?: boolean) => {
-    from: string | undefined;
+export declare const getCalendarRange: (selectedDate: string, currentActiveField: "start" | "end", isWrongPeriodFn: (dateStart?: Date, dateEnd?: Date) => boolean, dateFrom?: string, dateTo?: string) => {
+    from: string;
     to: string | undefined;
+} | {
+    from: string | undefined;
+    to: string;
 };

package/dist/calendar/calendarUtils.js

@@ -88,11 +88,11 @@ const setFocusTo = (e, date, selectionHandler) => {
 };
 exports.setFocusTo = setFocusTo;
 // eslint-disable-next-line complexity
-const getCalendarRange = (selectedDate, isWrongPeriodFn, dateFrom, dateTo, isPrevStart, isPrevEnd) => {
+const getCalendarRange = (selectedDate, currentActiveField, isWrongPeriodFn, dateFrom, dateTo) => {
     const selectedDateObj = new Date(selectedDate);
     const dateFromObj = dateFrom && (0, dateUtils_1.isValidDate)(dateFrom) ? new Date(dateFrom) : undefined;
     const dateToObj = dateTo && (0, dateUtils_1.isValidDate)(dateTo) ? new Date(dateTo) : undefined;
-    if (isPrevStart) {
+    if (currentActiveField === "start") {
         // Cursor on Start Date
         if (dateToObj && selectedDateObj.getTime() < dateToObj.getTime()) {
             const isWrongPeriod = isWrongPeriodFn(selectedDateObj, dateToObj);
@@ -101,38 +101,12 @@ const getCalendarRange = (selectedDate, isWrongPeriodFn, dateFrom, dateTo, isPre
         // Overlapping dates: selectedDate later than dateTo
         return { from: selectedDate, to: undefined };
     }
-    if (isPrevEnd) {
-        // Cursor on End Date
-        if (dateFromObj && dateFromObj.getTime() < selectedDateObj.getTime()) {
-            const isWrongPeriod = isWrongPeriodFn(selectedDateObj, dateToObj);
-            return isWrongPeriod ? { from: undefined, to: selectedDate } : { from: dateFrom, to: selectedDate };
-        }
-        // Overlapping dates: selectedDate earlier than dateFrom
-        return { from: undefined, to: selectedDate };
-    }
-    // Cursor not on either field
-    if (!dateFromObj && (!dateToObj || selectedDateObj.getTime() > dateToObj.getTime())) {
-        // No existing range, or no existing dateFromObj, and selectedDateObject bigger then dateToObj, set selectedDate as "from"set selectedDate as "from"
-        return { from: selectedDate, to: undefined };
-    }
-    if (!dateFromObj || !dateToObj) {
-        // No existing range, set selectedDate as "from"
-        return { from: !dateFromObj ? selectedDate : dateFrom, to: !dateToObj ? selectedDate : dateTo };
-    }
-    const isWrongPeriodFrom = isWrongPeriodFn(selectedDateObj, dateToObj);
-    if (isWrongPeriodFrom) {
-        return { from: selectedDate, to: undefined };
-    }
-    const startDate = new Date(dateFromObj);
-    startDate.setHours(0, 0, 0, 0);
-    const endDate = new Date(dateToObj);
-    endDate.setHours(0, 0, 0, 0);
-    const middleDate = new Date((startDate.getTime() + endDate.getTime()) / 2);
-    if (selectedDateObj.getTime() <= middleDate.getTime()) {
-        // Closer to start date
-        return { from: selectedDate, to: dateTo };
+    // Cursor on End Date
+    if (dateFromObj && dateFromObj.getTime() < selectedDateObj.getTime()) {
+        const isWrongPeriod = isWrongPeriodFn(dateFromObj, selectedDateObj);
+        return isWrongPeriod ? { from: undefined, to: selectedDate } : { from: dateFrom, to: selectedDate };
     }
-    // Closer to end date or exactly in the middle
-    return { from: dateFrom, to: selectedDate };
+    // Overlapping dates: selectedDate earlier than dateFrom
+    return { from: undefined, to: selectedDate };
 };
 exports.getCalendarRange = getCalendarRange;

package/dist/calendar/dateUtils.d.ts

@@ -28,6 +28,11 @@ export declare const getSelectableYears: (date: string, yearsRange: number, disa
 export declare const isValidDate: (d?: string | Date) => boolean;
 export declare const isValidationDateError: (date: Date, toReverseOffsetDateTime: (date: Date | string) => Date, disableFutureDates?: boolean, disablePastDates?: boolean, disableBefore?: string, disableAfter?: string) => boolean;
 export declare const isDifferentPeriod: (date1?: Date, date2?: Date, disableFutureDates?: boolean, disablePastDates?: boolean, disableBefore?: string, disableAfter?: string) => boolean;
-export declare const getValidDate: (toReverseOffsetDateTime: (date: Date | string) => Date, startToPass?: boolean, dateToPass?: Date, startValidDate?: Date, endValidDate?: Date, disableFutureDates?: boolean, disablePastDates?: boolean, disableBefore?: string, disableAfter?: string) => Date | undefined;
+export interface IValidRange {
+    start?: Date;
+    end?: Date;
+}
+export declare const getValidDatesForStart: (toReverseOffsetDateTime: (date: Date | string) => Date, dateToPass: Date, endValidDate?: Date, disableFutureDates?: boolean, disablePastDates?: boolean, disableBefore?: string, disableAfter?: string) => IValidRange;
+export declare const getValidDatesForEnd: (toReverseOffsetDateTime: (date: Date | string) => Date, dateToPass: Date, startValidDate?: Date, disableFutureDates?: boolean, disablePastDates?: boolean, disableBefore?: string, disableAfter?: string) => IValidRange;
 export declare const getValidTime: (notValidDateToPass: Date, previousDate?: string, disableFutureDates?: boolean, disablePastDates?: boolean, disableBefore?: string, disableAfter?: string) => Date | undefined;
 export {};