@geotab/zenith 1.15.4 → 1.16.1

package/README.md

@@ -40,6 +40,14 @@ Zenith library provides components defined in Zenith Design System. It includes
 
 ## Change log
 
+## 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/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 {};

package/dist/calendar/dateUtils.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getValidTime = exports.getValidDate = exports.isDifferentPeriod = exports.isValidationDateError = exports.isValidDate = exports.getSelectableYears = exports.isDisableDate = exports.isDisableYear = exports.getAvailablePeriod = exports.toDayStart = exports.setYear = exports.getSameDateOrTheLastForMonth = exports.addMonth = exports.getEndOfWeek = exports.getStartOfWeek = exports.getDayOfWeekOffset = exports.addMonths = exports.addDays = exports.addMinutes = exports.getNewEndDate = exports.getNewStartDate = exports.getCalendarMonthDates = exports.getEndOfMonth = exports.getStartOfMonth = exports.dayNames = void 0;
+exports.getValidTime = exports.getValidDatesForEnd = exports.getValidDatesForStart = exports.isDifferentPeriod = exports.isValidationDateError = exports.isValidDate = exports.getSelectableYears = exports.isDisableDate = exports.isDisableYear = exports.getAvailablePeriod = exports.toDayStart = exports.setYear = exports.getSameDateOrTheLastForMonth = exports.addMonth = exports.getEndOfWeek = exports.getStartOfWeek = exports.getDayOfWeekOffset = exports.addMonths = exports.addDays = exports.addMinutes = exports.getNewEndDate = exports.getNewStartDate = exports.getCalendarMonthDates = exports.getEndOfMonth = exports.getStartOfMonth = exports.dayNames = void 0;
 exports.dayNames = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
 const getStartOfMonth = (d) => {
     const date = new Date(Date.parse(d));
@@ -273,85 +273,28 @@ const isDifferentPeriod = (date1, date2, disableFutureDates, disablePastDates, d
     return false;
 };
 exports.isDifferentPeriod = isDifferentPeriod;
-// eslint-disable-next-line complexity
-const getValidDate = (toReverseOffsetDateTime, startToPass, dateToPass, startValidDate, endValidDate, disableFutureDates = false, disablePastDates = false, disableBefore, disableAfter) => {
-    const availablePeriod = (0, exports.getAvailablePeriod)(disableBefore, disableAfter);
-    if ((!startValidDate && !endValidDate) || !dateToPass) {
-        return undefined;
+const getValidDatesForStart = (toReverseOffsetDateTime, dateToPass, endValidDate, disableFutureDates = false, disablePastDates = false, disableBefore, disableAfter) => {
+    if (!endValidDate) {
+        return { start: dateToPass, end: undefined };
     }
-    const reversedStartDate = startValidDate ? toReverseOffsetDateTime(startValidDate) : undefined;
-    const reversedEndDate = endValidDate ? toReverseOffsetDateTime(endValidDate) : undefined;
-    // Find a valid endDate
-    if (!startToPass && reversedStartDate) {
-        if (reversedStartDate >= dateToPass) {
-            const now = new Date();
-            const updateEndDate = (0, exports.addDays)(new Date(startValidDate), 1);
-            updateEndDate.setHours(dateToPass.getHours());
-            updateEndDate.setMinutes(dateToPass.getMinutes());
-            updateEndDate.setSeconds(dateToPass.getSeconds());
-            if (availablePeriod === "all" && disableFutureDates) {
-                return updateEndDate < now ? updateEndDate : now;
-            }
-            if (availablePeriod === "all" && disablePastDates) {
-                return updateEndDate >= now ? updateEndDate : undefined;
-            }
-            if (availablePeriod === "inside" && updateEndDate > new Date(disableAfter)) {
-                return new Date(disableAfter);
-            }
-            if (availablePeriod === "inside" && updateEndDate <= new Date(disableAfter)) {
-                return updateEndDate;
-            }
-            if (availablePeriod === "outside" && reversedStartDate < new Date(disableAfter)) {
-                return updateEndDate < new Date(disableAfter) ? updateEndDate : new Date(disableAfter);
-            }
-            if (availablePeriod === "outside" && reversedStartDate > new Date(disableBefore)) {
-                return updateEndDate;
-            }
-            if (availablePeriod === "before" && updateEndDate > new Date(disableAfter)) {
-                return new Date(disableAfter);
-            }
-            return availablePeriod === "all" ? updateEndDate : undefined;
-        }
-        const isDifferentPeriods = (0, exports.isDifferentPeriod)(reversedStartDate, dateToPass, disableFutureDates, disablePastDates, disableBefore, disableAfter);
-        return isDifferentPeriods ? undefined : dateToPass;
-    }
-    // Find a valid startDate
-    if (startToPass && reversedEndDate) {
-        if (reversedEndDate <= dateToPass) {
-            const now = new Date();
-            const updateStartDate = (0, exports.addDays)(new Date(endValidDate), -1);
-            updateStartDate.setHours(dateToPass.getHours());
-            updateStartDate.setMinutes(dateToPass.getMinutes());
-            updateStartDate.setSeconds(dateToPass.getSeconds());
-            if (availablePeriod === "all" && disableFutureDates) {
-                return updateStartDate > now ? undefined : updateStartDate;
-            }
-            if (availablePeriod === "all" && disablePastDates) {
-                return updateStartDate > now ? updateStartDate : now;
-            }
-            if (availablePeriod === "inside" && updateStartDate <= new Date(disableBefore)) {
-                return new Date(disableBefore);
-            }
-            if (availablePeriod === "inside" && updateStartDate < new Date(disableAfter)) {
-                return updateStartDate;
-            }
-            if (availablePeriod === "outside" && reversedEndDate > new Date(disableBefore)) {
-                return updateStartDate < new Date(disableBefore) ? new Date(disableBefore) : updateStartDate;
-            }
-            if (availablePeriod === "outside" && reversedEndDate < new Date(disableAfter)) {
-                return updateStartDate;
-            }
-            if (availablePeriod === "after" && updateStartDate < new Date(disableBefore)) {
-                return new Date(disableBefore);
-            }
-            return availablePeriod === "all" ? updateStartDate : undefined;
-        }
-        const isDifferentPeriods = (0, exports.isDifferentPeriod)(dateToPass, reversedEndDate, disableFutureDates, disablePastDates, disableBefore, disableAfter);
-        return isDifferentPeriods ? undefined : dateToPass;
+    const isDifferentPeriods = (0, exports.isDifferentPeriod)(toReverseOffsetDateTime(dateToPass), toReverseOffsetDateTime(endValidDate), disableFutureDates, disablePastDates, disableBefore, disableAfter);
+    if (dateToPass <= endValidDate && !isDifferentPeriods) {
+        return { start: dateToPass, end: endValidDate }; // in user timezone
     }
-    return undefined;
+    return { start: dateToPass, end: dateToPass };
 };
-exports.getValidDate = getValidDate;
+exports.getValidDatesForStart = getValidDatesForStart;
+const getValidDatesForEnd = (toReverseOffsetDateTime, dateToPass, startValidDate, disableFutureDates = false, disablePastDates = false, disableBefore, disableAfter) => {
+    if (!startValidDate) {
+        return { start: undefined, end: dateToPass };
+    }
+    const isDifferentPeriods = (0, exports.isDifferentPeriod)(toReverseOffsetDateTime(startValidDate), toReverseOffsetDateTime(dateToPass), disableFutureDates, disablePastDates, disableBefore, disableAfter);
+    if (startValidDate <= dateToPass && !isDifferentPeriods) {
+        return { start: startValidDate, end: dateToPass }; // in user timezone
+    }
+    return { start: dateToPass, end: dateToPass };
+};
+exports.getValidDatesForEnd = getValidDatesForEnd;
 const getValidTime = (notValidDateToPass, previousDate, disableFutureDates = false, disablePastDates = false, disableBefore, disableAfter) => {
     const availablePeriod = (0, exports.getAvailablePeriod)(disableBefore, disableAfter);
     if (!previousDate) {
@@ -359,40 +302,28 @@ const getValidTime = (notValidDateToPass, previousDate, disableFutureDates = fal
     }
     const now = new Date();
     if (availablePeriod === "all" && disableFutureDates) {
-        now.setMinutes(now.getMinutes() - 1);
         return now;
     }
     if (availablePeriod === "all" && disablePastDates) {
-        now.setMinutes(now.getMinutes() + 1);
         return now;
     }
     if (availablePeriod === "inside" && notValidDateToPass > new Date(disableAfter)) {
-        const newValidTime = new Date(disableAfter);
-        newValidTime.setMinutes(newValidTime.getMinutes() - 1);
-        return newValidTime;
+        return new Date(disableAfter);
     }
     if (availablePeriod === "inside" && notValidDateToPass < new Date(disableBefore)) {
         return new Date(disableBefore);
     }
     if (availablePeriod === "outside" && new Date(previousDate) < new Date(disableAfter)) {
-        const newValidTime = new Date(disableAfter);
-        newValidTime.setMinutes(newValidTime.getMinutes() - 1);
-        return newValidTime;
+        return new Date(disableAfter);
     }
     if (availablePeriod === "outside" && new Date(previousDate) > new Date(disableBefore)) {
-        const newValidTime = new Date(disableBefore);
-        newValidTime.setMinutes(newValidTime.getMinutes() + 1);
-        return newValidTime;
+        return new Date(disableBefore);
     }
     if (availablePeriod === "before" && notValidDateToPass > new Date(disableAfter)) {
-        const newValidTime = new Date(disableAfter);
-        newValidTime.setMinutes(newValidTime.getMinutes() - 1);
-        return newValidTime;
+        return new Date(disableAfter);
     }
     if (availablePeriod === "after" && notValidDateToPass < new Date(disableBefore)) {
-        const newValidTime = new Date(disableBefore);
-        newValidTime.setMinutes(newValidTime.getMinutes() + 1);
-        return newValidTime;
+        return new Date(disableBefore);
     }
     return undefined;
 };

package/dist/commonStyles/pillStyles/pillContent.less

@@ -6,8 +6,8 @@
 
 // TODO: update to .zen-pill-content after old pill component removed remove
 .zen-pill-new-content {
-    @pill-height: 24px;
-    @pill-height--drive: 36px;
+    @pill-height: 22px;
+    @pill-height--drive: 34px;
 
     .body-04();
     display: flex;