@trackunit/react-date-and-time-components 2.17.33 → 2.17.34

package/index.cjs.js

@@ -231,6 +231,66 @@ const DayPicker = ({ onDaySelect, disabledDays, selectedDay, language, className
             }, value: selectedDay ?? null }) }));
 };
 
+/**
+ * Checks if two date ranges are identical by comparing their start and end timestamps.
+ */
+const sameDateRange = (left, right) => left?.start?.getTime() === right?.start?.getTime() && left?.end?.getTime() === right?.end?.getTime();
+
+const emptyRange = { start: undefined, end: undefined };
+const isSameLocalDay = (left, right) => left === right || (left !== undefined && right !== undefined && left.toDateString() === right.toDateString());
+/** react-calendar picks days in local time, so compare days in local time too. */
+const coversSameDays = (left, right) => isSameLocalDay(left.start, right.start) && isSameLocalDay(left.end, right.end);
+const endOfLocalDay = (date) => {
+    const end = new Date(date);
+    end.setHours(23, 59, 59, 999);
+    return end;
+};
+const remount = (state) => ({
+    ...state,
+    calendarKey: state.calendarKey + 1,
+});
+/** The picker's state when it first renders with the given `selectedDays`. */
+const initDayRangePickerState = (selectedDays) => ({
+    range: selectedDays ?? emptyRange,
+    trackedSelectedDays: selectedDays,
+    viewedMonth: undefined,
+    calendarKey: 0,
+});
+/**
+ * State transitions of `DayRangePicker`. Every transition that resets the range remounts the
+ * calendar, so a half-picked day never survives it.
+ */
+const dayRangePickerReducer = (state, action) => {
+    switch (action.type) {
+        case "daySelected":
+            // A first click selects the whole day, the same range react-calendar returns when it is clicked twice.
+            return { ...state, range: { start: action.start, end: action.end ?? endOfLocalDay(action.start) } };
+        case "cleared":
+            return remount({ ...state, range: emptyRange });
+        case "cancelled":
+            return remount({ ...state, range: state.trackedSelectedDays ?? emptyRange });
+        case "monthViewed":
+            return { ...state, viewedMonth: action.month };
+        case "selectedDaysChanged": {
+            const { selectedDays } = action;
+            if (!selectedDays) {
+                return { ...state, trackedSelectedDays: undefined };
+            }
+            // A caller that keeps the picker open may pass back the applied range rounded to whole days.
+            // That is the same selection, so the range and the month on screen stay.
+            const keepRange = coversSameDays(selectedDays, state.range);
+            return remount({
+                ...state,
+                trackedSelectedDays: selectedDays,
+                range: keepRange ? state.range : selectedDays,
+                viewedMonth: keepRange ? state.viewedMonth : undefined,
+            });
+        }
+        default:
+            return state;
+    }
+};
+
 /**
  * DayRangePicker renders an interactive calendar that allows the user to select a start and end date.
  * It supports disabled days, timezone-aware display, locale configuration, and an optional cancel button.
@@ -259,38 +319,25 @@ const DayPicker = ({ onDaySelect, disabledDays, selectedDay, language, className
  * @returns {ReactElement} DayRangePicker component
  */
 const DayRangePicker = ({ onRangeSelect, selectedDays, disabledDays, "data-testid": dataTestId, language, className, style, classNameCalendar, timezone: _timezone, cancelButtonLabel, onClose, ref, }) => {
-    const [newRange, setNewRange] = react.useState(selectedDays ?? { start: undefined, end: undefined });
+    const [{ range: newRange, trackedSelectedDays, viewedMonth, calendarKey }, dispatch] = react.useReducer(dayRangePickerReducer, selectedDays, initDayRangePickerState);
     const [t] = useTranslation();
     const { subtract } = reactDateAndTimeHooks.useDateAndTime();
     const calculateDateRange = useCalculateDateRange();
-    react.useEffect(() => {
-        if (selectedDays) {
-            setNewRange(selectedDays);
-        }
-    }, [selectedDays]);
-    const handleOnRangeSelect = react.useCallback((range) => {
-        if (range && range.start) {
-            if (range.end === undefined) {
-                setNewRange({ start: range.start, end: range.start });
-            }
-            else {
-                setNewRange({ start: range.start, end: range.end });
-            }
-        }
-        else {
-            setNewRange({ start: undefined, end: undefined });
-        }
-    }, []);
+    if (!sameDateRange(trackedSelectedDays, selectedDays)) {
+        dispatch({ type: "selectedDaysChanged", selectedDays });
+    }
     const handleCancel = react.useCallback(() => {
-        if (selectedDays) {
-            setNewRange(selectedDays);
-        }
+        dispatch({ type: "cancelled" });
         if (onClose) {
             onClose();
         }
-    }, [selectedDays, onClose]);
-    const clearSelectedDays = () => {
-        setNewRange({ start: undefined, end: undefined });
+    }, [onClose]);
+    // The year and decade views start on January 1, which isn't a month the user was looking at.
+    // Picking January from the year view keeps January 1 as the start date, so only the view changes.
+    const trackViewedMonth = ({ activeStartDate, view }) => {
+        if (view === "month") {
+            dispatch({ type: "monthViewed", month: activeStartDate ?? undefined });
+        }
     };
     const handleApply = react.useCallback(() => {
         if (onRangeSelect) {
@@ -300,11 +347,11 @@ const DayRangePicker = ({ onRangeSelect, selectedDays, disabledDays, "data-testi
             onClose();
         }
     }, [onRangeSelect, newRange, onClose]);
-    return (jsxRuntime.jsxs("div", { className: tailwindMerge.twMerge("flex", "w-min", "flex-col", "overflow-hidden", "rounded-md", "border", "border-neutral-300", "bg-white", className), "data-testid": dataTestId, ref: ref, style: style, children: [jsxRuntime.jsx(Calendar, { allowPartialRange: true, className: tailwindMerge.twMerge("custom-day-picker", "range-picker", classNameCalendar), locale: language, onChange: value => {
-                    if (Array.isArray(value) && value[0] && value[1]) {
-                        handleOnRangeSelect({ start: value[0], end: value[1] });
+    return (jsxRuntime.jsxs("div", { className: tailwindMerge.twMerge("flex", "w-min", "flex-col", "overflow-hidden", "rounded-md", "border", "border-neutral-300", "bg-white", className), "data-testid": dataTestId, ref: ref, style: style, children: [jsxRuntime.jsx(Calendar, { allowPartialRange: true, className: tailwindMerge.twMerge("custom-day-picker", "range-picker", classNameCalendar), defaultActiveStartDate: viewedMonth ?? trackedSelectedDays?.start, locale: language, onActiveStartDateChange: trackViewedMonth, onChange: value => {
+                    if (Array.isArray(value) && value[0]) {
+                        dispatch({ type: "daySelected", start: value[0], end: value[1] ?? undefined });
                     }
-                }, selectRange: true, tileDisabled: ({ date, view }) => {
+                }, onViewChange: trackViewedMonth, selectRange: true, tileDisabled: ({ date, view }) => {
                     if (view === "month") {
                         if (typeof disabledDays === "function") {
                             return disabledDays(date);
@@ -334,7 +381,7 @@ const DayRangePicker = ({ onRangeSelect, selectedDays, disabledDays, "data-testi
                 }, value: 
                 // type is wrong here if we add array of 2 elements if end is undefined and set to null it will not highlight the start date
                 // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                newRange.end ? [newRange.start ?? null, newRange.end ?? null] : (newRange.start ?? null) }), jsxRuntime.jsx("hr", {}), jsxRuntime.jsxs("div", { className: "flex w-full justify-between gap-2 px-4 py-3", children: [jsxRuntime.jsx(reactComponents.Button, { className: "mr-auto", "data-testid": "range-popover-clear-button", onClick: clearSelectedDays, size: "small", variant: "secondary", children: t("layout.actions.clear") }), jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx(reactComponents.Button, { "data-testid": "range-popover-cancel-button", onClick: () => handleCancel(), size: "small", variant: "ghost-neutral", children: cancelButtonLabel ? cancelButtonLabel : t("layout.actions.cancel") }), jsxRuntime.jsx(reactComponents.Button, { "data-testid": "range-popover-apply-button", disabled: !newRange.start || !newRange.end, onClick: () => handleApply(), size: "small", children: t("layout.actions.apply") })] })] })] }));
+                newRange.end ? [newRange.start ?? null, newRange.end ?? null] : (newRange.start ?? null) }, calendarKey), jsxRuntime.jsx("hr", {}), jsxRuntime.jsxs("div", { className: "flex w-full justify-between gap-2 px-4 py-3", children: [jsxRuntime.jsx(reactComponents.Button, { className: "mr-auto", "data-testid": "range-popover-clear-button", onClick: () => dispatch({ type: "cleared" }), size: "small", variant: "secondary", children: t("layout.actions.clear") }), jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx(reactComponents.Button, { "data-testid": "range-popover-cancel-button", onClick: () => handleCancel(), size: "small", variant: "ghost-neutral", children: cancelButtonLabel ? cancelButtonLabel : t("layout.actions.cancel") }), jsxRuntime.jsx(reactComponents.Button, { "data-testid": "range-popover-apply-button", disabled: !newRange.start || !newRange.end, onClick: () => handleApply(), size: "small", children: t("layout.actions.apply") })] })] })] }));
 };
 
 /**
@@ -505,6 +552,54 @@ const useFilterTemporalPeriodsInRange = () => {
     }, [getDayCountInRange]);
 };
 
+/**
+ * Format a label representing the provided date range.
+ *
+ * @example
+ * formatCustomDateRangeLabel({ from: new Date("2025-06-16"), to: new Date("2025-06-17") }); // "June 16, 2025 - June 17, 2025"
+ */
+const formatCustomDateRangeLabel = (dateRange) => {
+    return `${dateAndTimeUtils.formatDateUtil(dateRange.start ?? new Date(), {
+        dateFormat: "medium",
+        selectFormat: "dateOnly",
+    })} - ${dateAndTimeUtils.formatDateUtil(dateRange.end ?? new Date(), { dateFormat: "medium", selectFormat: "dateOnly" })}`;
+};
+
+/**
+ * Returns a function that checks if two dates fall on the same calendar day
+ * in the user's current timezone.
+ */
+const useSameCalendarDay = () => {
+    const { startOf } = reactDateAndTimeHooks.useDateAndTime();
+    return react.useCallback((left, right) => {
+        if (left === undefined || right === undefined) {
+            return false;
+        }
+        // Compare the start-of-day timestamps in the user's timezone
+        return startOf(left, "day").getTime() === startOf(right, "day").getTime();
+    }, [startOf]);
+};
+
+/**
+ * Format a label representing a custom date range.
+ * A range that starts and ends on the same calendar day is shown as that one date.
+ * It is never shown as "Today": that label belongs to the Today preset.
+ *
+ * @example
+ * const formatLabel = useFormatCustomDateRangeLabel();
+ * formatLabel({ start: new Date("2025-01-15T08:00Z"), end: new Date("2025-01-15T20:00Z") }); // Jan 15, 2025
+ * formatLabel({ start: new Date("2025-01-01"), end: new Date("2025-01-02") }); // Jan 1, 2025 - Jan 2, 2025
+ */
+const useFormatCustomDateRangeLabel = () => {
+    const isSameCalendarDay = useSameCalendarDay();
+    return react.useCallback((dateRange) => {
+        if (dateRange.start && isSameCalendarDay(dateRange.start, dateRange.end)) {
+            return dateAndTimeUtils.formatDateUtil(dateRange.start, { dateFormat: "medium", selectFormat: "dateOnly" });
+        }
+        return formatCustomDateRangeLabel(dateRange);
+    }, [isSameCalendarDay]);
+};
+
 /**
  * Find the TemporalDirection type matching the value.
  */
@@ -580,21 +675,6 @@ const useParseTemporalPeriodFromText = () => {
     }, [t, findTemporalDirection, findTemporalUnit]);
 };
 
-/**
- * Returns a function that checks if two dates fall on the same calendar day
- * in the user's current timezone.
- */
-const useSameCalendarDay = () => {
-    const { startOf } = reactDateAndTimeHooks.useDateAndTime();
-    return react.useCallback((left, right) => {
-        if (left === undefined || right === undefined) {
-            return false;
-        }
-        // Compare the start-of-day timestamps in the user's timezone
-        return startOf(left, "day").getTime() === startOf(right, "day").getTime();
-    }, [startOf]);
-};
-
 const DEFAULT_DIRECTIONS = ["last", "next"];
 const DEFAULT_COUNT = 7;
 /**
@@ -633,19 +713,6 @@ const createTemporalPeriodCombinations = ({ direction, count, }) => {
     }));
 };
 
-/**
- * Format a label representing the provided date range.
- *
- * @example
- * formatCustomDateRangeLabel({ from: new Date("2025-06-16"), to: new Date("2025-06-17") }); // "June 16, 2025 - June 17, 2025"
- */
-const formatCustomDateRangeLabel = (dateRange) => {
-    return `${dateAndTimeUtils.formatDateUtil(dateRange.start ?? new Date(), {
-        dateFormat: "medium",
-        selectFormat: "dateOnly",
-    })} - ${dateAndTimeUtils.formatDateUtil(dateRange.end ?? new Date(), { dateFormat: "medium", selectFormat: "dateOnly" })}`;
-};
-
 const TEMPORAL_UNITS = ["day", "days", "hour", "hours", "month", "months"];
 const TEMPORAL_DIRECTIONS = ["last", "next"];
 /**
@@ -672,11 +739,6 @@ const isTemporalDirection = (direction) => {
     return typeof direction === "string" && TEMPORAL_DIRECTIONS.includes(direction);
 };
 
-/**
- * Checks if two date ranges are identical by comparing their start and end timestamps.
- */
-const sameDateRange = (left, right) => left?.start?.getTime() === right?.start?.getTime() && left?.end?.getTime() === right?.end?.getTime();
-
 /**
  * DayRangeSelect is a popover-based date range picker with preset temporal options (e.g., "Last 7 days", "Next 30 days")
  * and an optional custom calendar picker. Users can search for presets by typing natural language queries like "last 3 months".
@@ -707,6 +769,7 @@ const DayRangeSelect = ({ className, "data-testid": dataTestId, style, ref, disa
     const parseTemporalPeriodFromText = useParseTemporalPeriodFromText();
     const filterTemporalPeriodsInRange = useFilterTemporalPeriodsInRange();
     const formatTemporalPeriodLabel = useFormatTemporalPeriodLabel();
+    const formatCustomRangeLabel = useFormatCustomDateRangeLabel();
     const calculateDateRange = useCalculateDateRange();
     const sameCalendarDay = useSameCalendarDay();
     const calculateCustomDateRangeDisabledDays = useCalculateCustomDateRangeDisabledDays();
@@ -778,9 +841,9 @@ const DayRangeSelect = ({ className, "data-testid": dataTestId, style, ref, disa
         return currentSelectedRange
             ? currentSelectedRange.temporalPeriod
                 ? formatTemporalPeriodLabel(currentSelectedRange.temporalPeriod)
-                : formatCustomDateRangeLabel(currentSelectedRange.dateRange)
+                : formatCustomRangeLabel(currentSelectedRange.dateRange)
             : undefined;
-    }, [currentSelectedRange, formatTemporalPeriodLabel]);
+    }, [currentSelectedRange, formatTemporalPeriodLabel, formatCustomRangeLabel]);
     const handleDateRangeSearch = react.useCallback((value) => {
         setDateRangeSearchValue(value);
         if (!sharedUtils.nonNullable(value) || value === "") {

package/index.esm.js

@@ -3,7 +3,7 @@ import { registerTranslations, useNamespaceTranslation } from '@trackunit/i18n-l
 import { toDateUtil, formatDateUtil, isEqualUtil, timeSinceAuto, getHourCycle } from '@trackunit/date-and-time-utils';
 import { useLocale, useHourCycle, useTimezone, useDateAndTime } from '@trackunit/react-date-and-time-hooks';
 import { truthy, DateTimeFormat, nonNullable, objectKeys } from '@trackunit/shared-utils';
-import { useMemo, useCallback, useState, useEffect, useRef, Children, isValidElement } from 'react';
+import { useMemo, useCallback, useReducer, useState, useRef, Children, isValidElement, useEffect } from 'react';
 import { twMerge } from 'tailwind-merge';
 import { Tooltip, Button, MenuItem, Icon, Popover, PopoverTrigger, PopoverContent, MenuContent, MenuDivider, Card, Text } from '@trackunit/react-components';
 import Calendar from 'react-calendar';
@@ -229,6 +229,66 @@ const DayPicker = ({ onDaySelect, disabledDays, selectedDay, language, className
             }, value: selectedDay ?? null }) }));
 };
 
+/**
+ * Checks if two date ranges are identical by comparing their start and end timestamps.
+ */
+const sameDateRange = (left, right) => left?.start?.getTime() === right?.start?.getTime() && left?.end?.getTime() === right?.end?.getTime();
+
+const emptyRange = { start: undefined, end: undefined };
+const isSameLocalDay = (left, right) => left === right || (left !== undefined && right !== undefined && left.toDateString() === right.toDateString());
+/** react-calendar picks days in local time, so compare days in local time too. */
+const coversSameDays = (left, right) => isSameLocalDay(left.start, right.start) && isSameLocalDay(left.end, right.end);
+const endOfLocalDay = (date) => {
+    const end = new Date(date);
+    end.setHours(23, 59, 59, 999);
+    return end;
+};
+const remount = (state) => ({
+    ...state,
+    calendarKey: state.calendarKey + 1,
+});
+/** The picker's state when it first renders with the given `selectedDays`. */
+const initDayRangePickerState = (selectedDays) => ({
+    range: selectedDays ?? emptyRange,
+    trackedSelectedDays: selectedDays,
+    viewedMonth: undefined,
+    calendarKey: 0,
+});
+/**
+ * State transitions of `DayRangePicker`. Every transition that resets the range remounts the
+ * calendar, so a half-picked day never survives it.
+ */
+const dayRangePickerReducer = (state, action) => {
+    switch (action.type) {
+        case "daySelected":
+            // A first click selects the whole day, the same range react-calendar returns when it is clicked twice.
+            return { ...state, range: { start: action.start, end: action.end ?? endOfLocalDay(action.start) } };
+        case "cleared":
+            return remount({ ...state, range: emptyRange });
+        case "cancelled":
+            return remount({ ...state, range: state.trackedSelectedDays ?? emptyRange });
+        case "monthViewed":
+            return { ...state, viewedMonth: action.month };
+        case "selectedDaysChanged": {
+            const { selectedDays } = action;
+            if (!selectedDays) {
+                return { ...state, trackedSelectedDays: undefined };
+            }
+            // A caller that keeps the picker open may pass back the applied range rounded to whole days.
+            // That is the same selection, so the range and the month on screen stay.
+            const keepRange = coversSameDays(selectedDays, state.range);
+            return remount({
+                ...state,
+                trackedSelectedDays: selectedDays,
+                range: keepRange ? state.range : selectedDays,
+                viewedMonth: keepRange ? state.viewedMonth : undefined,
+            });
+        }
+        default:
+            return state;
+    }
+};
+
 /**
  * DayRangePicker renders an interactive calendar that allows the user to select a start and end date.
  * It supports disabled days, timezone-aware display, locale configuration, and an optional cancel button.
@@ -257,38 +317,25 @@ const DayPicker = ({ onDaySelect, disabledDays, selectedDay, language, className
  * @returns {ReactElement} DayRangePicker component
  */
 const DayRangePicker = ({ onRangeSelect, selectedDays, disabledDays, "data-testid": dataTestId, language, className, style, classNameCalendar, timezone: _timezone, cancelButtonLabel, onClose, ref, }) => {
-    const [newRange, setNewRange] = useState(selectedDays ?? { start: undefined, end: undefined });
+    const [{ range: newRange, trackedSelectedDays, viewedMonth, calendarKey }, dispatch] = useReducer(dayRangePickerReducer, selectedDays, initDayRangePickerState);
     const [t] = useTranslation();
     const { subtract } = useDateAndTime();
     const calculateDateRange = useCalculateDateRange();
-    useEffect(() => {
-        if (selectedDays) {
-            setNewRange(selectedDays);
-        }
-    }, [selectedDays]);
-    const handleOnRangeSelect = useCallback((range) => {
-        if (range && range.start) {
-            if (range.end === undefined) {
-                setNewRange({ start: range.start, end: range.start });
-            }
-            else {
-                setNewRange({ start: range.start, end: range.end });
-            }
-        }
-        else {
-            setNewRange({ start: undefined, end: undefined });
-        }
-    }, []);
+    if (!sameDateRange(trackedSelectedDays, selectedDays)) {
+        dispatch({ type: "selectedDaysChanged", selectedDays });
+    }
     const handleCancel = useCallback(() => {
-        if (selectedDays) {
-            setNewRange(selectedDays);
-        }
+        dispatch({ type: "cancelled" });
         if (onClose) {
             onClose();
         }
-    }, [selectedDays, onClose]);
-    const clearSelectedDays = () => {
-        setNewRange({ start: undefined, end: undefined });
+    }, [onClose]);
+    // The year and decade views start on January 1, which isn't a month the user was looking at.
+    // Picking January from the year view keeps January 1 as the start date, so only the view changes.
+    const trackViewedMonth = ({ activeStartDate, view }) => {
+        if (view === "month") {
+            dispatch({ type: "monthViewed", month: activeStartDate ?? undefined });
+        }
     };
     const handleApply = useCallback(() => {
         if (onRangeSelect) {
@@ -298,11 +345,11 @@ const DayRangePicker = ({ onRangeSelect, selectedDays, disabledDays, "data-testi
             onClose();
         }
     }, [onRangeSelect, newRange, onClose]);
-    return (jsxs("div", { className: twMerge("flex", "w-min", "flex-col", "overflow-hidden", "rounded-md", "border", "border-neutral-300", "bg-white", className), "data-testid": dataTestId, ref: ref, style: style, children: [jsx(Calendar, { allowPartialRange: true, className: twMerge("custom-day-picker", "range-picker", classNameCalendar), locale: language, onChange: value => {
-                    if (Array.isArray(value) && value[0] && value[1]) {
-                        handleOnRangeSelect({ start: value[0], end: value[1] });
+    return (jsxs("div", { className: twMerge("flex", "w-min", "flex-col", "overflow-hidden", "rounded-md", "border", "border-neutral-300", "bg-white", className), "data-testid": dataTestId, ref: ref, style: style, children: [jsx(Calendar, { allowPartialRange: true, className: twMerge("custom-day-picker", "range-picker", classNameCalendar), defaultActiveStartDate: viewedMonth ?? trackedSelectedDays?.start, locale: language, onActiveStartDateChange: trackViewedMonth, onChange: value => {
+                    if (Array.isArray(value) && value[0]) {
+                        dispatch({ type: "daySelected", start: value[0], end: value[1] ?? undefined });
                     }
-                }, selectRange: true, tileDisabled: ({ date, view }) => {
+                }, onViewChange: trackViewedMonth, selectRange: true, tileDisabled: ({ date, view }) => {
                     if (view === "month") {
                         if (typeof disabledDays === "function") {
                             return disabledDays(date);
@@ -332,7 +379,7 @@ const DayRangePicker = ({ onRangeSelect, selectedDays, disabledDays, "data-testi
                 }, value: 
                 // type is wrong here if we add array of 2 elements if end is undefined and set to null it will not highlight the start date
                 // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                newRange.end ? [newRange.start ?? null, newRange.end ?? null] : (newRange.start ?? null) }), jsx("hr", {}), jsxs("div", { className: "flex w-full justify-between gap-2 px-4 py-3", children: [jsx(Button, { className: "mr-auto", "data-testid": "range-popover-clear-button", onClick: clearSelectedDays, size: "small", variant: "secondary", children: t("layout.actions.clear") }), jsxs("div", { children: [jsx(Button, { "data-testid": "range-popover-cancel-button", onClick: () => handleCancel(), size: "small", variant: "ghost-neutral", children: cancelButtonLabel ? cancelButtonLabel : t("layout.actions.cancel") }), jsx(Button, { "data-testid": "range-popover-apply-button", disabled: !newRange.start || !newRange.end, onClick: () => handleApply(), size: "small", children: t("layout.actions.apply") })] })] })] }));
+                newRange.end ? [newRange.start ?? null, newRange.end ?? null] : (newRange.start ?? null) }, calendarKey), jsx("hr", {}), jsxs("div", { className: "flex w-full justify-between gap-2 px-4 py-3", children: [jsx(Button, { className: "mr-auto", "data-testid": "range-popover-clear-button", onClick: () => dispatch({ type: "cleared" }), size: "small", variant: "secondary", children: t("layout.actions.clear") }), jsxs("div", { children: [jsx(Button, { "data-testid": "range-popover-cancel-button", onClick: () => handleCancel(), size: "small", variant: "ghost-neutral", children: cancelButtonLabel ? cancelButtonLabel : t("layout.actions.cancel") }), jsx(Button, { "data-testid": "range-popover-apply-button", disabled: !newRange.start || !newRange.end, onClick: () => handleApply(), size: "small", children: t("layout.actions.apply") })] })] })] }));
 };
 
 /**
@@ -503,6 +550,54 @@ const useFilterTemporalPeriodsInRange = () => {
     }, [getDayCountInRange]);
 };
 
+/**
+ * Format a label representing the provided date range.
+ *
+ * @example
+ * formatCustomDateRangeLabel({ from: new Date("2025-06-16"), to: new Date("2025-06-17") }); // "June 16, 2025 - June 17, 2025"
+ */
+const formatCustomDateRangeLabel = (dateRange) => {
+    return `${formatDateUtil(dateRange.start ?? new Date(), {
+        dateFormat: "medium",
+        selectFormat: "dateOnly",
+    })} - ${formatDateUtil(dateRange.end ?? new Date(), { dateFormat: "medium", selectFormat: "dateOnly" })}`;
+};
+
+/**
+ * Returns a function that checks if two dates fall on the same calendar day
+ * in the user's current timezone.
+ */
+const useSameCalendarDay = () => {
+    const { startOf } = useDateAndTime();
+    return useCallback((left, right) => {
+        if (left === undefined || right === undefined) {
+            return false;
+        }
+        // Compare the start-of-day timestamps in the user's timezone
+        return startOf(left, "day").getTime() === startOf(right, "day").getTime();
+    }, [startOf]);
+};
+
+/**
+ * Format a label representing a custom date range.
+ * A range that starts and ends on the same calendar day is shown as that one date.
+ * It is never shown as "Today": that label belongs to the Today preset.
+ *
+ * @example
+ * const formatLabel = useFormatCustomDateRangeLabel();
+ * formatLabel({ start: new Date("2025-01-15T08:00Z"), end: new Date("2025-01-15T20:00Z") }); // Jan 15, 2025
+ * formatLabel({ start: new Date("2025-01-01"), end: new Date("2025-01-02") }); // Jan 1, 2025 - Jan 2, 2025
+ */
+const useFormatCustomDateRangeLabel = () => {
+    const isSameCalendarDay = useSameCalendarDay();
+    return useCallback((dateRange) => {
+        if (dateRange.start && isSameCalendarDay(dateRange.start, dateRange.end)) {
+            return formatDateUtil(dateRange.start, { dateFormat: "medium", selectFormat: "dateOnly" });
+        }
+        return formatCustomDateRangeLabel(dateRange);
+    }, [isSameCalendarDay]);
+};
+
 /**
  * Find the TemporalDirection type matching the value.
  */
@@ -578,21 +673,6 @@ const useParseTemporalPeriodFromText = () => {
     }, [t, findTemporalDirection, findTemporalUnit]);
 };
 
-/**
- * Returns a function that checks if two dates fall on the same calendar day
- * in the user's current timezone.
- */
-const useSameCalendarDay = () => {
-    const { startOf } = useDateAndTime();
-    return useCallback((left, right) => {
-        if (left === undefined || right === undefined) {
-            return false;
-        }
-        // Compare the start-of-day timestamps in the user's timezone
-        return startOf(left, "day").getTime() === startOf(right, "day").getTime();
-    }, [startOf]);
-};
-
 const DEFAULT_DIRECTIONS = ["last", "next"];
 const DEFAULT_COUNT = 7;
 /**
@@ -631,19 +711,6 @@ const createTemporalPeriodCombinations = ({ direction, count, }) => {
     }));
 };
 
-/**
- * Format a label representing the provided date range.
- *
- * @example
- * formatCustomDateRangeLabel({ from: new Date("2025-06-16"), to: new Date("2025-06-17") }); // "June 16, 2025 - June 17, 2025"
- */
-const formatCustomDateRangeLabel = (dateRange) => {
-    return `${formatDateUtil(dateRange.start ?? new Date(), {
-        dateFormat: "medium",
-        selectFormat: "dateOnly",
-    })} - ${formatDateUtil(dateRange.end ?? new Date(), { dateFormat: "medium", selectFormat: "dateOnly" })}`;
-};
-
 const TEMPORAL_UNITS = ["day", "days", "hour", "hours", "month", "months"];
 const TEMPORAL_DIRECTIONS = ["last", "next"];
 /**
@@ -670,11 +737,6 @@ const isTemporalDirection = (direction) => {
     return typeof direction === "string" && TEMPORAL_DIRECTIONS.includes(direction);
 };
 
-/**
- * Checks if two date ranges are identical by comparing their start and end timestamps.
- */
-const sameDateRange = (left, right) => left?.start?.getTime() === right?.start?.getTime() && left?.end?.getTime() === right?.end?.getTime();
-
 /**
  * DayRangeSelect is a popover-based date range picker with preset temporal options (e.g., "Last 7 days", "Next 30 days")
  * and an optional custom calendar picker. Users can search for presets by typing natural language queries like "last 3 months".
@@ -705,6 +767,7 @@ const DayRangeSelect = ({ className, "data-testid": dataTestId, style, ref, disa
     const parseTemporalPeriodFromText = useParseTemporalPeriodFromText();
     const filterTemporalPeriodsInRange = useFilterTemporalPeriodsInRange();
     const formatTemporalPeriodLabel = useFormatTemporalPeriodLabel();
+    const formatCustomRangeLabel = useFormatCustomDateRangeLabel();
     const calculateDateRange = useCalculateDateRange();
     const sameCalendarDay = useSameCalendarDay();
     const calculateCustomDateRangeDisabledDays = useCalculateCustomDateRangeDisabledDays();
@@ -776,9 +839,9 @@ const DayRangeSelect = ({ className, "data-testid": dataTestId, style, ref, disa
         return currentSelectedRange
             ? currentSelectedRange.temporalPeriod
                 ? formatTemporalPeriodLabel(currentSelectedRange.temporalPeriod)
-                : formatCustomDateRangeLabel(currentSelectedRange.dateRange)
+                : formatCustomRangeLabel(currentSelectedRange.dateRange)
             : undefined;
-    }, [currentSelectedRange, formatTemporalPeriodLabel]);
+    }, [currentSelectedRange, formatTemporalPeriodLabel, formatCustomRangeLabel]);
     const handleDateRangeSearch = useCallback((value) => {
         setDateRangeSearchValue(value);
         if (!nonNullable(value) || value === "") {

package/package.json

@@ -1,20 +1,20 @@
 {
   "name": "@trackunit/react-date-and-time-components",
-  "version": "2.17.33",
+  "version": "2.17.34",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {
     "node": ">=24.x"
   },
   "dependencies": {
-    "@trackunit/react-components": "6.0.30",
-    "@trackunit/date-and-time-utils": "1.20.37",
-    "@trackunit/react-date-and-time-hooks": "2.17.32",
-    "@trackunit/css-class-variance-utilities": "2.6.36",
-    "@trackunit/ui-icons": "1.20.35",
-    "@trackunit/shared-utils": "1.22.36",
-    "@trackunit/i18n-library-translation": "2.14.28",
-    "@trackunit/react-form-components": "2.17.32",
+    "@trackunit/react-components": "6.0.31",
+    "@trackunit/date-and-time-utils": "1.20.38",
+    "@trackunit/react-date-and-time-hooks": "2.17.33",
+    "@trackunit/css-class-variance-utilities": "2.6.37",
+    "@trackunit/ui-icons": "1.20.36",
+    "@trackunit/shared-utils": "1.22.37",
+    "@trackunit/i18n-library-translation": "2.14.29",
+    "@trackunit/react-form-components": "2.17.33",
     "string-ts": "^2.0.0",
     "tailwind-merge": "^3.7.0",
     "react-calendar": "^6.0.1"

package/src/DayPicker/dayRangePickerReducer.d.ts

@@ -0,0 +1,36 @@
+import { DateRange } from "@trackunit/date-and-time-utils";
+export type DayRangePickerState = {
+    /** The range being picked, which Apply passes to `onRangeSelect`. */
+    range: DateRange;
+    /** The last `selectedDays` seen, so a new object with the same dates isn't treated as a change. */
+    trackedSelectedDays: DateRange | undefined;
+    /** The month on screen, so a remount doesn't jump back to the month of the selection. */
+    viewedMonth: Date | undefined;
+    /**
+     * react-calendar keeps a half-finished range in its own state and ignores `value` until it is
+     * finished, so the only way to drop it is to remount the calendar with a new key.
+     */
+    calendarKey: number;
+};
+export type DayRangePickerAction = {
+    type: "daySelected";
+    start: Date;
+    end: Date | undefined;
+} | {
+    type: "cleared";
+} | {
+    type: "cancelled";
+} | {
+    type: "monthViewed";
+    month: Date | undefined;
+} | {
+    type: "selectedDaysChanged";
+    selectedDays: DateRange | undefined;
+};
+/** The picker's state when it first renders with the given `selectedDays`. */
+export declare const initDayRangePickerState: (selectedDays: DateRange | undefined) => DayRangePickerState;
+/**
+ * State transitions of `DayRangePicker`. Every transition that resets the range remounts the
+ * calendar, so a half-picked day never survives it.
+ */
+export declare const dayRangePickerReducer: (state: DayRangePickerState, action: DayRangePickerAction) => DayRangePickerState;

package/src/DayRangeSelect/hooks/useFormatCustomDateRangeLabel/useFormatCustomDateRangeLabel.d.ts

@@ -0,0 +1,12 @@
+import { DateRange } from "@trackunit/date-and-time-utils";
+/**
+ * Format a label representing a custom date range.
+ * A range that starts and ends on the same calendar day is shown as that one date.
+ * It is never shown as "Today": that label belongs to the Today preset.
+ *
+ * @example
+ * const formatLabel = useFormatCustomDateRangeLabel();
+ * formatLabel({ start: new Date("2025-01-15T08:00Z"), end: new Date("2025-01-15T20:00Z") }); // Jan 15, 2025
+ * formatLabel({ start: new Date("2025-01-01"), end: new Date("2025-01-02") }); // Jan 1, 2025 - Jan 2, 2025
+ */
+export declare const useFormatCustomDateRangeLabel: () => ((dateRange: DateRange) => string);