@trackunit/react-date-and-time-components 2.17.7 → 2.17.8

package/index.cjs.js

@@ -580,6 +580,21 @@ 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;
 /**
@@ -657,6 +672,11 @@ 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".
@@ -688,6 +708,7 @@ const DayRangeSelect = ({ className, "data-testid": dataTestId, style, ref, disa
     const filterTemporalPeriodsInRange = useFilterTemporalPeriodsInRange();
     const formatTemporalPeriodLabel = useFormatTemporalPeriodLabel();
     const calculateDateRange = useCalculateDateRange();
+    const sameCalendarDay = useSameCalendarDay();
     const calculateCustomDateRangeDisabledDays = useCalculateCustomDateRangeDisabledDays();
     const customDateRangeDisabledDays = react.useMemo(() => calculateCustomDateRangeDisabledDays({ maxDaysInRange, allowedDirection, disabledDays }), [calculateCustomDateRangeDisabledDays, maxDaysInRange, allowedDirection, disabledDays]);
     const defaultTemporalPeriods = react.useMemo(() => {
@@ -707,6 +728,34 @@ const DayRangeSelect = ({ className, "data-testid": dataTestId, style, ref, disa
     // input from uncontrolled to controlled, which React warns about.
     const [dateRangeSearchValue, setDateRangeSearchValue] = react.useState("");
     const [selectedRange, setSelectedRange] = react.useState();
+    const [emittedDateRange, setEmittedDateRange] = react.useState();
+    const controlledDateRange = react.useMemo(() => {
+        if (!selectedDateRange) {
+            return undefined;
+        }
+        if (isTemporalPeriod(selectedDateRange)) {
+            return calculateDateRange(selectedDateRange);
+        }
+        return selectedDateRange;
+    }, [calculateDateRange, selectedDateRange]);
+    const [trackedDateRange, setTrackedDateRange] = react.useState(controlledDateRange);
+    // Parents often normalize the range we just emitted (start of day, or "now" when the range ends today)
+    // before passing it back. That write-back is still the user's selection.
+    const isEchoOfEmission = emittedDateRange !== undefined &&
+        controlledDateRange !== undefined &&
+        sameCalendarDay(emittedDateRange.start, controlledDateRange.start) &&
+        sameCalendarDay(emittedDateRange.end, controlledDateRange.end);
+    if (!sameDateRange(trackedDateRange, controlledDateRange)) {
+        setTrackedDateRange(controlledDateRange);
+        if (emittedDateRange) {
+            setEmittedDateRange(undefined);
+        }
+        if (!isEchoOfEmission && !sameDateRange(selectedRange?.dateRange, controlledDateRange)) {
+            setDateRangeSearchValue("");
+            setTemporalPeriods(defaultTemporalPeriods);
+            setSelectedRange(undefined);
+        }
+    }
     const currentSelectedRange = react.useMemo(() => {
         // Internal selected range takes precedence
         if (selectedRange) {
@@ -758,12 +807,14 @@ const DayRangeSelect = ({ className, "data-testid": dataTestId, style, ref, disa
     const handleReset = react.useCallback(() => {
         setTemporalPeriods(defaultTemporalPeriods);
         setSelectedRange(undefined);
+        setEmittedDateRange(undefined);
         onRangeSelect(undefined);
         handleDateRangeSearch("");
     }, [handleDateRangeSearch, onRangeSelect, defaultTemporalPeriods]);
     const handleOptionsSelect = react.useCallback((value, closeMenu) => {
         closeMenu();
         setSelectedRange(value);
+        setEmittedDateRange(value.dateRange);
         onRangeSelect(value);
     }, [onRangeSelect]);
     const handleCustomDateRangeSelect = react.useCallback((dateRange, closeMenu) => {
@@ -777,9 +828,20 @@ const DayRangeSelect = ({ className, "data-testid": dataTestId, style, ref, disa
             temporalPeriod: undefined,
         };
         setSelectedRange(_selectedDateRange);
+        setEmittedDateRange(_selectedDateRange.dateRange);
         onRangeSelect(_selectedDateRange);
     }, [onRangeSelect, handleReset]);
-    return (jsxRuntime.jsxs(reactComponents.Popover, { onOpenStateChange: state => !state && setIsCustomDateRangeOpen(false), placement: popoverPlacement, children: [jsxRuntime.jsx(reactComponents.PopoverTrigger, { ref: ref, children: !actionButton ? (jsxRuntime.jsx(reactComponents.Button, { className: cvaTriggerButton({ active: !!selectedDateRange, className }), "data-testid": dataTestId, disabled: disabled, fullWidth: fullWidth, prefix: jsxRuntime.jsx(reactComponents.Icon, { ariaLabel: t("input.icon.tooltip.calendar"), color: disabled ? "neutral" : selectedDateRange ? "primary" : undefined, name: "Calendar", size: size === "large" ? "medium" : "small" }), size: size, style: style, variant: "secondary", children: popoverTriggerLabel ?? t("trigger.selectDateRange") })) : (jsxRuntime.jsx("div", { className: className, "data-testid": dataTestId, style: style, children: actionButton })) }), jsxRuntime.jsx(reactComponents.PopoverContent, { "data-testid": dataTestId ? `${dataTestId}-popover-content` : undefined, children: closeMenu => {
+    return (jsxRuntime.jsxs(reactComponents.Popover, { onOpenStateChange: isOpen => {
+            if (isOpen) {
+                return;
+            }
+            setIsCustomDateRangeOpen(false);
+            // Clear emitted range so a later external change landing on the same
+            // calendar days is not mistakenly treated as an echo of the user's selection.
+            // Note: search and periods are NOT cleared on close (original behavior).
+            // They are only cleared when the controlled range changes externally.
+            setEmittedDateRange(undefined);
+        }, placement: popoverPlacement, children: [jsxRuntime.jsx(reactComponents.PopoverTrigger, { ref: ref, children: !actionButton ? (jsxRuntime.jsx(reactComponents.Button, { className: cvaTriggerButton({ active: !!selectedDateRange, className }), "data-testid": dataTestId, disabled: disabled, fullWidth: fullWidth, prefix: jsxRuntime.jsx(reactComponents.Icon, { ariaLabel: t("input.icon.tooltip.calendar"), color: disabled ? "neutral" : selectedDateRange ? "primary" : undefined, name: "Calendar", size: size === "large" ? "medium" : "small" }), size: size, style: style, variant: "secondary", children: popoverTriggerLabel ?? t("trigger.selectDateRange") })) : (jsxRuntime.jsx("div", { className: className, "data-testid": dataTestId, style: style, children: actionButton })) }), jsxRuntime.jsx(reactComponents.PopoverContent, { "data-testid": dataTestId ? `${dataTestId}-popover-content` : undefined, children: closeMenu => {
                     return !isCustomDateRangeOpen ? (jsxRuntime.jsxs(reactComponents.MenuContent, { className: "min-w-[280px]", children: [showPopoverHeader ? (jsxRuntime.jsxs("div", { children: [jsxRuntime.jsxs("div", { className: "flex flex-col gap-1", children: [showDateRangeSearch ? (jsxRuntime.jsx(reactFormComponents.Search, { className: "w-full", "data-testid": dataTestId ? `${dataTestId}-search-input` : undefined, onChange: event => handleDateRangeSearch(event.target.value), onClear: () => handleDateRangeSearch(""), placeholder: allowedDirection === "last"
                                                     ? t("input.placeholder.customRange.last")
                                                     : t("input.placeholder.customRange.next"), value: dateRangeSearchValue })) : null, showResetButton ? (jsxRuntime.jsx(reactComponents.Button, { className: "ml-auto", "data-testid": dataTestId ? `${dataTestId}-reset-button` : undefined, disabled: !selectedDateRange, onClick: handleReset, size: "small", variant: "ghost", children: t("layout.actions.reset") })) : null] }), jsxRuntime.jsx("hr", { className: "my-1 border-neutral-200", role: "separator" })] })) : null, jsxRuntime.jsx(DayRangeSelectOptions, { "data-testid": dataTestId ? `${dataTestId}-options` : undefined, onSelect: value => handleOptionsSelect(value, closeMenu), selectedDateRange: currentSelectedRange, temporalPeriods: temporalPeriods }), showCustomDateRangeOption ? (jsxRuntime.jsxs("section", { children: [jsxRuntime.jsx(reactComponents.MenuDivider, {}), jsxRuntime.jsx(reactComponents.MenuItem, { "data-testid": dataTestId ? `${dataTestId}-custom-range` : undefined, label: t("trigger.customRange"), onClick: () => setIsCustomDateRangeOpen(true), selected: isCustomDateRangeSelected, suffix: jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [isCustomDateRangeSelected ? jsxRuntime.jsx(reactComponents.Icon, { color: "primary", name: "Check", size: "small" }) : null, jsxRuntime.jsx(reactComponents.Icon, { name: "ChevronRight", size: "small" })] }) })] })) : null] })) : (jsxRuntime.jsx(reactComponents.Card, { children: jsxRuntime.jsx(DayRangePicker, { cancelButtonLabel: t("layout.actions.back"), disabledDays: customDateRangeDisabledDays, language: "en", onClose: () => setIsCustomDateRangeOpen(false), onRangeSelect: dateRange => handleCustomDateRangeSelect(dateRange

package/index.esm.js

@@ -578,6 +578,21 @@ 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;
 /**
@@ -655,6 +670,11 @@ 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".
@@ -686,6 +706,7 @@ const DayRangeSelect = ({ className, "data-testid": dataTestId, style, ref, disa
     const filterTemporalPeriodsInRange = useFilterTemporalPeriodsInRange();
     const formatTemporalPeriodLabel = useFormatTemporalPeriodLabel();
     const calculateDateRange = useCalculateDateRange();
+    const sameCalendarDay = useSameCalendarDay();
     const calculateCustomDateRangeDisabledDays = useCalculateCustomDateRangeDisabledDays();
     const customDateRangeDisabledDays = useMemo(() => calculateCustomDateRangeDisabledDays({ maxDaysInRange, allowedDirection, disabledDays }), [calculateCustomDateRangeDisabledDays, maxDaysInRange, allowedDirection, disabledDays]);
     const defaultTemporalPeriods = useMemo(() => {
@@ -705,6 +726,34 @@ const DayRangeSelect = ({ className, "data-testid": dataTestId, style, ref, disa
     // input from uncontrolled to controlled, which React warns about.
     const [dateRangeSearchValue, setDateRangeSearchValue] = useState("");
     const [selectedRange, setSelectedRange] = useState();
+    const [emittedDateRange, setEmittedDateRange] = useState();
+    const controlledDateRange = useMemo(() => {
+        if (!selectedDateRange) {
+            return undefined;
+        }
+        if (isTemporalPeriod(selectedDateRange)) {
+            return calculateDateRange(selectedDateRange);
+        }
+        return selectedDateRange;
+    }, [calculateDateRange, selectedDateRange]);
+    const [trackedDateRange, setTrackedDateRange] = useState(controlledDateRange);
+    // Parents often normalize the range we just emitted (start of day, or "now" when the range ends today)
+    // before passing it back. That write-back is still the user's selection.
+    const isEchoOfEmission = emittedDateRange !== undefined &&
+        controlledDateRange !== undefined &&
+        sameCalendarDay(emittedDateRange.start, controlledDateRange.start) &&
+        sameCalendarDay(emittedDateRange.end, controlledDateRange.end);
+    if (!sameDateRange(trackedDateRange, controlledDateRange)) {
+        setTrackedDateRange(controlledDateRange);
+        if (emittedDateRange) {
+            setEmittedDateRange(undefined);
+        }
+        if (!isEchoOfEmission && !sameDateRange(selectedRange?.dateRange, controlledDateRange)) {
+            setDateRangeSearchValue("");
+            setTemporalPeriods(defaultTemporalPeriods);
+            setSelectedRange(undefined);
+        }
+    }
     const currentSelectedRange = useMemo(() => {
         // Internal selected range takes precedence
         if (selectedRange) {
@@ -756,12 +805,14 @@ const DayRangeSelect = ({ className, "data-testid": dataTestId, style, ref, disa
     const handleReset = useCallback(() => {
         setTemporalPeriods(defaultTemporalPeriods);
         setSelectedRange(undefined);
+        setEmittedDateRange(undefined);
         onRangeSelect(undefined);
         handleDateRangeSearch("");
     }, [handleDateRangeSearch, onRangeSelect, defaultTemporalPeriods]);
     const handleOptionsSelect = useCallback((value, closeMenu) => {
         closeMenu();
         setSelectedRange(value);
+        setEmittedDateRange(value.dateRange);
         onRangeSelect(value);
     }, [onRangeSelect]);
     const handleCustomDateRangeSelect = useCallback((dateRange, closeMenu) => {
@@ -775,9 +826,20 @@ const DayRangeSelect = ({ className, "data-testid": dataTestId, style, ref, disa
             temporalPeriod: undefined,
         };
         setSelectedRange(_selectedDateRange);
+        setEmittedDateRange(_selectedDateRange.dateRange);
         onRangeSelect(_selectedDateRange);
     }, [onRangeSelect, handleReset]);
-    return (jsxs(Popover, { onOpenStateChange: state => !state && setIsCustomDateRangeOpen(false), placement: popoverPlacement, children: [jsx(PopoverTrigger, { ref: ref, children: !actionButton ? (jsx(Button, { className: cvaTriggerButton({ active: !!selectedDateRange, className }), "data-testid": dataTestId, disabled: disabled, fullWidth: fullWidth, prefix: jsx(Icon, { ariaLabel: t("input.icon.tooltip.calendar"), color: disabled ? "neutral" : selectedDateRange ? "primary" : undefined, name: "Calendar", size: size === "large" ? "medium" : "small" }), size: size, style: style, variant: "secondary", children: popoverTriggerLabel ?? t("trigger.selectDateRange") })) : (jsx("div", { className: className, "data-testid": dataTestId, style: style, children: actionButton })) }), jsx(PopoverContent, { "data-testid": dataTestId ? `${dataTestId}-popover-content` : undefined, children: closeMenu => {
+    return (jsxs(Popover, { onOpenStateChange: isOpen => {
+            if (isOpen) {
+                return;
+            }
+            setIsCustomDateRangeOpen(false);
+            // Clear emitted range so a later external change landing on the same
+            // calendar days is not mistakenly treated as an echo of the user's selection.
+            // Note: search and periods are NOT cleared on close (original behavior).
+            // They are only cleared when the controlled range changes externally.
+            setEmittedDateRange(undefined);
+        }, placement: popoverPlacement, children: [jsx(PopoverTrigger, { ref: ref, children: !actionButton ? (jsx(Button, { className: cvaTriggerButton({ active: !!selectedDateRange, className }), "data-testid": dataTestId, disabled: disabled, fullWidth: fullWidth, prefix: jsx(Icon, { ariaLabel: t("input.icon.tooltip.calendar"), color: disabled ? "neutral" : selectedDateRange ? "primary" : undefined, name: "Calendar", size: size === "large" ? "medium" : "small" }), size: size, style: style, variant: "secondary", children: popoverTriggerLabel ?? t("trigger.selectDateRange") })) : (jsx("div", { className: className, "data-testid": dataTestId, style: style, children: actionButton })) }), jsx(PopoverContent, { "data-testid": dataTestId ? `${dataTestId}-popover-content` : undefined, children: closeMenu => {
                     return !isCustomDateRangeOpen ? (jsxs(MenuContent, { className: "min-w-[280px]", children: [showPopoverHeader ? (jsxs("div", { children: [jsxs("div", { className: "flex flex-col gap-1", children: [showDateRangeSearch ? (jsx(Search, { className: "w-full", "data-testid": dataTestId ? `${dataTestId}-search-input` : undefined, onChange: event => handleDateRangeSearch(event.target.value), onClear: () => handleDateRangeSearch(""), placeholder: allowedDirection === "last"
                                                     ? t("input.placeholder.customRange.last")
                                                     : t("input.placeholder.customRange.next"), value: dateRangeSearchValue })) : null, showResetButton ? (jsx(Button, { className: "ml-auto", "data-testid": dataTestId ? `${dataTestId}-reset-button` : undefined, disabled: !selectedDateRange, onClick: handleReset, size: "small", variant: "ghost", children: t("layout.actions.reset") })) : null] }), jsx("hr", { className: "my-1 border-neutral-200", role: "separator" })] })) : null, jsx(DayRangeSelectOptions, { "data-testid": dataTestId ? `${dataTestId}-options` : undefined, onSelect: value => handleOptionsSelect(value, closeMenu), selectedDateRange: currentSelectedRange, temporalPeriods: temporalPeriods }), showCustomDateRangeOption ? (jsxs("section", { children: [jsx(MenuDivider, {}), jsx(MenuItem, { "data-testid": dataTestId ? `${dataTestId}-custom-range` : undefined, label: t("trigger.customRange"), onClick: () => setIsCustomDateRangeOpen(true), selected: isCustomDateRangeSelected, suffix: jsxs(Fragment, { children: [isCustomDateRangeSelected ? jsx(Icon, { color: "primary", name: "Check", size: "small" }) : null, jsx(Icon, { name: "ChevronRight", size: "small" })] }) })] })) : null] })) : (jsx(Card, { children: jsx(DayRangePicker, { cancelButtonLabel: t("layout.actions.back"), disabledDays: customDateRangeDisabledDays, language: "en", onClose: () => setIsCustomDateRangeOpen(false), onRangeSelect: dateRange => handleCustomDateRangeSelect(dateRange

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/react-date-and-time-components",
-  "version": "2.17.7",
+  "version": "2.17.8",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {

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

@@ -0,0 +1,5 @@
+/**
+ * Returns a function that checks if two dates fall on the same calendar day
+ * in the user's current timezone.
+ */
+export declare const useSameCalendarDay: () => (left: Date | undefined, right: Date | undefined) => boolean;

package/src/DayRangeSelect/utils/sameDateRange/sameDateRange.d.ts

@@ -0,0 +1,5 @@
+import { DateRange } from "@trackunit/date-and-time-utils";
+/**
+ * Checks if two date ranges are identical by comparing their start and end timestamps.
+ */
+export declare const sameDateRange: (left: DateRange | undefined, right: DateRange | undefined) => boolean;