@trackunit/react-date-and-time-components 1.3.221 → 1.4.0

package/index.esm.js

@@ -4,20 +4,36 @@ import { toDateUtil, formatDateUtil, isEqualUtil, timeSinceAuto, getHourCycle }
 import { useLocale as useLocale$1, useDateAndTime } from '@trackunit/react-date-and-time-hooks';
 import { color } from '@trackunit/ui-design-tokens';
 import { useMemo, useCallback, useState, useEffect, useRef, Children, isValidElement } from 'react';
-import { Tooltip, IconButton, Icon, Button, Popover, PopoverTrigger, PopoverContent, Card, Text } from '@trackunit/react-components';
-import { DateTimeFormat } from '@trackunit/shared-utils';
+import { Tooltip, Button, MenuItem, Icon, Popover, PopoverTrigger, PopoverContent, MenuList, MenuDivider, Card, Text } from '@trackunit/react-components';
+import { DateTimeFormat, nonNullable, objectKeys } from '@trackunit/shared-utils';
 import { DayPicker as DayPicker$1 } from 'react-day-picker';
 import { twMerge } from 'tailwind-merge';
 import { enGB, enUS, da, de, cs, nl, fr, fi, hu, it, nb, pl, pt, ru, ro, es, sv, ja, th } from 'date-fns/locale';
-import { useCurrentUserLanguage } from '@trackunit/react-core-hooks';
+import { Search } from '@trackunit/react-form-components';
 import { cvaMerge } from '@trackunit/css-class-variance-utilities';
+import { lowerCase } from 'string-ts';
 
 var defaultTranslations = {
 	"dateTime.instant.now": "Now",
-	"dayRangePickerPopover.icon.tooltip.calendar": "Calendar",
+	"input.combined": "{{direction}} {{count}} {{unit}}",
+	"input.direction.last": "Last",
+	"input.direction.next": "Next",
+	"input.icon.tooltip.calendar": "Calendar",
+	"input.noOptions": "No options available",
+	"input.placeholder.customRange.last": "Type a date range (e.g., “Last 4 days”)",
+	"input.placeholder.customRange.next": "Type a date range (e.g., “Next 4 days”)",
+	"input.today": "Today",
+	"input.unit.day": "day",
+	"input.unit.days": "days",
+	"input.unit.month": "month",
+	"input.unit.months": "months",
+	"input.unit.week": "week",
+	"input.unit.weeks": "weeks",
 	"layout.actions.apply": "Apply",
+	"layout.actions.back": "Back",
 	"layout.actions.cancel": "Cancel",
 	"layout.actions.clear": "Clear",
+	"layout.actions.reset": "Reset",
 	"shared.timePeriods.days": "{{count}} day",
 	"shared.timePeriods.days_plural": "{{count}} days",
 	"shared.timePeriods.hours": "{{count}} hour",
@@ -27,7 +43,9 @@ var defaultTranslations = {
 	"shared.timePeriods.today": "Today",
 	"shared.timePeriods.weeks": "{{count}} week",
 	"shared.timePeriods.weeks_plural": "{{count}} weeks",
-	"timeline.loadMore": "Click for more..."
+	"timeline.loadMore": "Click for more...",
+	"trigger.customRange": "Custom date range",
+	"trigger.selectDateRange": "Select date range"
 };
 
 /** The translation namespace for this library */
@@ -167,7 +185,7 @@ const DayPicker = ({ onDaySelect, disabledDays, selectedDays, language, classNam
  * @param {DayRangePickerProps} props - The props for the DayRangePicker component
  * @returns {ReactElement} DayRangePicker component
  */
-const DayRangePicker = ({ onRangeSelect, selectedDays, disabledDays, dataTestId, language, className, max, showQuickOptions, timezone, onClose, }) => {
+const DayRangePicker = ({ onRangeSelect, selectedDays, disabledDays, dataTestId, language, className, max, timezone, cancelButtonLabel, onClose, }) => {
     const [newRange, setNewRange] = useState(selectedDays ?? { from: undefined, to: undefined });
     const [t] = useTranslation();
     const locale = useLocale(language);
@@ -202,91 +220,415 @@ const DayRangePicker = ({ onRangeSelect, selectedDays, disabledDays, dataTestId,
         onRangeSelect && onRangeSelect(newRange);
         onClose && onClose();
     }, [onRangeSelect, newRange, onClose]);
-    return (jsxs("div", { className: "z-popover flex w-min flex-col gap-4", children: [jsxs("div", { className: "flex gap-2", children: [jsx("div", { className: "flex flex-wrap gap-2", children: !!showQuickOptions &&
-                            calcQuickOptions(showQuickOptions.dataRetention).map(option => (jsx(QuickOptionButton, { onClick: handleOnRangeSelect, option: option, timezone: timezone }, `${option.unit}${option.last}${option.includeExtraDay ? "-include-extra-day" : ""}`))) }), !!onClose && (jsx("div", { className: "flex-grow text-right", children: jsx(IconButton, { dataTestId: "close-button", icon: jsx(Icon, { name: "XMark", size: "small" }), onClick: () => handleApply(), variant: "ghost-neutral" }) }))] }), jsx(DayPicker$1, { className: twMerge("custom-day-picker", "range-picker", className), defaultMonth: selectedDays ? selectedDays.from : undefined, disabled: disabledDays, footer: jsx("div", { "data-testid": dataTestId }), locale: locale, max: max, mode: "range", onSelect: handleOnRangeSelect, selected: newRange }), jsxs("div", { className: "flex w-full gap-2", children: [jsx(Button, { className: "mr-auto", dataTestId: "range-popover-clear-button", onClick: clearSelectedDays, variant: "secondary", children: t("layout.actions.clear") }), jsx(Button, { dataTestId: "range-popover-cancel-button", onClick: () => handleCancel(), variant: "secondary", children: t("layout.actions.cancel") }), jsx(Button, { dataTestId: "range-popover-apply-button", disabled: !newRange.from || !newRange.to, onClick: () => handleApply(), children: t("layout.actions.apply") })] })] }));
+    return (jsxs("div", { className: "flex w-min flex-col gap-4 p-2", children: [jsx(DayPicker$1, { className: twMerge("custom-day-picker", "range-picker", className, "p-0"), defaultMonth: selectedDays ? selectedDays.from : undefined, disabled: disabledDays, footer: jsx("div", { "data-testid": dataTestId }), locale: locale, max: max, mode: "range", onSelect: handleOnRangeSelect, selected: newRange }), jsxs("div", { className: "flex w-full gap-2", children: [jsx(Button, { className: "mr-auto", dataTestId: "range-popover-clear-button", onClick: clearSelectedDays, variant: "secondary", children: t("layout.actions.clear") }), jsx(Button, { dataTestId: "range-popover-cancel-button", onClick: () => handleCancel(), variant: "ghost-neutral", children: cancelButtonLabel ? cancelButtonLabel : t("layout.actions.cancel") }), jsx(Button, { dataTestId: "range-popover-apply-button", disabled: !newRange.from || !newRange.to, onClick: () => handleApply(), children: t("layout.actions.apply") })] })] }));
 };
-const calcQuickOptions = (numberOfDays) => {
-    const quickOptions = [];
-    if (numberOfDays > 7 && numberOfDays < 35) {
-        quickOptions.push({ last: 1, unit: "days" }, { last: numberOfDays, unit: "days", includeExtraDay: true });
-    }
-    else if (numberOfDays >= 35 && numberOfDays < 185) {
-        quickOptions.push({ last: 1, unit: "days" }, { last: 7, unit: "days", includeExtraDay: false }, { last: 30, unit: "days", includeExtraDay: false }, { last: numberOfDays, unit: "days", includeExtraDay: false });
-    }
-    else if (numberOfDays >= 185) {
-        quickOptions.push({ last: 1, unit: "days" }, { last: 14, unit: "days", includeExtraDay: false }, { last: 30, unit: "days", includeExtraDay: false }, { last: numberOfDays, unit: "days", includeExtraDay: false });
-    }
-    return quickOptions;
+
+const temporalArithmeticTypeMapping = {
+    day: "days",
+    days: "days",
+    week: "weeks",
+    weeks: "weeks",
+    month: "months",
+    months: "months",
+};
+
+/**
+ * Calculate a date range based on a temporal period.
+ *
+ * @example
+ * getDataRange({ direction: "next", count: 1, unit: "month" }); // { from: 2025-06-01, to: 2025-07-01 }
+ * getDataRange({ direction: "last", count: 2, unit: "weeks" }); // { from: 2025-05-24, to: 2025-06-01 }
+ */
+const useCalculateDateRange = () => {
+    const { nowDate, startOf, endOf, subtract, add } = useDateAndTime();
+    return useCallback(({ direction, count, unit }) => {
+        const unitType = temporalArithmeticTypeMapping[unit];
+        if (direction === "next") {
+            // To get the right number of days, calculate the end date and subtract 1 day
+            const endDate = add(nowDate, count, unitType);
+            const adjustedEndDate = subtract(endDate, 1, "days");
+            return {
+                from: startOf(nowDate, "day"),
+                to: endOf(adjustedEndDate, "day"),
+            };
+        }
+        else {
+            // To get the right number of days, calculate the start date and add 1 day
+            const startDate = subtract(nowDate, count, unitType);
+            const adjustedStartDate = add(startDate, 1, "days");
+            return {
+                from: startOf(adjustedStartDate, "day"),
+                to: endOf(nowDate, "day"),
+            };
+        }
+    }, [nowDate, startOf, endOf, subtract, add]);
 };
-const QuickOptionButton = ({ option, onClick, timezone }) => {
+
+/**
+ * Format a temporal period into a label.
+ *
+ * @example
+ * formatTemporalPeriodLabel({ direction: "last", count: 2, unit: "days" }); // Last 2 days
+ * formatTemporalPeriodLabel({ direction: "next", count: 1, unit: "week" }); // Next week
+ */
+const useFormatTemporalPeriodLabel = () => {
+    const [t] = useTranslation();
+    return useCallback((option) => {
+        // Return "Today" for "1 day" no matter the direction as in the current implementation it's the same day.
+        if (option.count === 1 && option.unit === "day") {
+            return t("input.today");
+        }
+        return t("input.combined", {
+            direction: t(`input.direction.${option.direction === "next" ? "next" : "last"}`),
+            count: option.count > 1 ? option.count : undefined,
+            unit: t(`input.unit.${option.unit}`),
+        });
+    }, [t]);
+};
+
+/**
+ * Renders a list of options for the DayRangeSelect component.
+ */
+const DayRangeSelectOptions = ({ dataTestId, temporalPeriods, selectedDateRange, onSelect, }) => {
     const [t] = useTranslation();
-    const { nowDate, startOf, endOf, subtract } = useDateAndTime();
-    const handleClick = useCallback(() => {
-        const from = subtract(startOf(nowDate, "day"), option.includeExtraDay ? option.last : option.last - 1, option.unit);
-        onClick({
-            from,
-            to: endOf(nowDate, "day"),
+    const formatTemporalPeriodLabel = useFormatTemporalPeriodLabel();
+    const calculateDateRange = useCalculateDateRange();
+    const handleSelect = useCallback((index) => {
+        const temporalPeriod = temporalPeriods[index];
+        if (!temporalPeriod) {
+            return;
+        }
+        onSelect({
+            dateRange: calculateDateRange(temporalPeriod),
+            temporalPeriod: temporalPeriod,
         });
-    }, [subtract, startOf, endOf, nowDate, option.last, option.unit, option.includeExtraDay, onClick]);
-    const translatedUnits = (unit) => {
-        switch (unit) {
-            case "hours":
-            case "days":
-            case "months":
-            case "weeks":
-                return `shared.timePeriods.${unit}`;
-            default:
-                return null;
+    }, [calculateDateRange, onSelect, temporalPeriods]);
+    const options = useMemo(() => {
+        if (!temporalPeriods.length) {
+            return (jsx(MenuItem, { dataTestId: dataTestId ? `${dataTestId}-no-options` : undefined, disabled: true, label: t("input.noOptions") }));
         }
-    };
-    const getLabel = () => {
-        if (option.label) {
-            return option.label;
+        return temporalPeriods.map((temporalPeriod, index) => {
+            // NOTE: Check for temporalPeriod as well to make sure not to select an options when it's a custom date range selection
+            const isSelected = selectedDateRange &&
+                selectedDateRange.temporalPeriod &&
+                stringifyTemporalPeriod(selectedDateRange.temporalPeriod) === stringifyTemporalPeriod(temporalPeriod);
+            return (jsx(MenuItem, { dataTestId: dataTestId ? `${dataTestId}-${index.toString()}` : undefined, label: formatTemporalPeriodLabel(temporalPeriod), onClick: () => handleSelect(index), selected: isSelected, suffix: isSelected ? jsx(Icon, { color: "primary", name: "Check", size: "small" }) : null }, index));
+        });
+    }, [temporalPeriods, selectedDateRange, formatTemporalPeriodLabel, handleSelect, dataTestId, t]);
+    return options;
+};
+const stringifyTemporalPeriod = (temporalPeriod) => `${temporalPeriod.direction}-${temporalPeriod.count}-${temporalPeriod.unit}`;
+
+const cvaTriggerButton = cvaMerge(["justify-start"], {
+    variants: {
+        active: {
+            true: "text-primary-600 hover:text-primary-700 active:text-primary-800 focus:text-primary-800",
+            false: "",
+        },
+    },
+});
+
+/**
+ * Calculate the disabled days for the custom date range picker based on the maxDaysInRange and allowedDirection.
+ * The range is inclusive of both start and end dates, so we subtract 1 from maxDaysInRange to get the correct number of days.
+ */
+const useCalculateCustomDateRangeDisabledDays = () => {
+    const { subtract, add, nowDate } = useDateAndTime();
+    return useCallback(({ maxDaysInRange, allowedDirection, }) => {
+        if (!allowedDirection) {
+            return undefined;
+        }
+        if (!nonNullable(maxDaysInRange)) {
+            if (allowedDirection === "last") {
+                return {
+                    after: nowDate,
+                };
+            }
+            else {
+                return {
+                    before: nowDate,
+                };
+            }
         }
-        else if (option.last === 1 && option.unit === "days") {
-            return t("shared.timePeriods.today");
+        // Subtract 1 from maxDaysInRange since the range is inclusive of both start and end dates
+        const adjustedMaxDaysInRangeCount = maxDaysInRange - 1;
+        if (allowedDirection === "last") {
+            return {
+                before: subtract(nowDate, adjustedMaxDaysInRangeCount, "days"),
+                after: nowDate,
+            };
         }
         else {
-            const tKey = translatedUnits(option.unit);
-            return tKey
-                ? t(tKey, {
-                    count: option.last,
-                })
-                : null;
+            return {
+                before: nowDate,
+                after: add(nowDate, adjustedMaxDaysInRangeCount, "days"),
+            };
         }
-    };
-    return (jsx(Button, { dataTestId: `${option.unit}${option.last}${option.includeExtraDay ? "-include-extra-day" : ""}`, onClick: handleClick, size: "small", variant: "secondary", children: getLabel() }));
+    }, [nowDate, subtract, add]);
+};
+
+/**
+ * Filter temporal periods to only include those within a max day count.
+ *
+ * @example
+ * getTemporalPeriodsInRange({
+ *   temporalPeriods: [
+ *     { direction: "next", count: 1, unit: "week" },
+ *     { direction: "next", count: 1, unit: "month" },
+ *   ],
+ *   maxDaysInRange: 7,
+ * });
+ * ); // [{ direction: "next", count: 1, unit: "week" }]
+ */
+const useFilterTemporalPeriodsInRange = () => {
+    const { difference } = useDateAndTime();
+    const calculateDateRange = useCalculateDateRange();
+    const getDayCountInRange = useCallback((temporalPeriod) => {
+        const { from, to } = calculateDateRange(temporalPeriod);
+        return difference(from, to, "day");
+    }, [calculateDateRange, difference]);
+    return useCallback(({ temporalPeriods, maxDaysInRange, }) => {
+        if (!maxDaysInRange) {
+            return temporalPeriods;
+        }
+        return temporalPeriods.filter(period => {
+            const daysInRange = getDayCountInRange(period);
+            return nonNullable(daysInRange) && daysInRange <= maxDaysInRange;
+        });
+    }, [getDayCountInRange]);
+};
+
+/**
+ * Find the TemporalDirection type matching the value.
+ */
+const useFindTemporalDirection = () => {
+    const [t] = useTranslation();
+    const temporalDirectionsMap = useMemo(() => ({
+        last: t("input.direction.last"),
+        next: t("input.direction.next"),
+    }), [t]);
+    return useCallback((value) => {
+        if (!value) {
+            return undefined;
+        }
+        return objectKeys(temporalDirectionsMap).find(direction => lowerCase(temporalDirectionsMap[direction]) === lowerCase(value));
+    }, [temporalDirectionsMap]);
 };
 
 /**
- * A popover to select a range of dates. Consider providing quick options.
- * quickOptions takes optional "includeExtraDay". This is because customers often want to see 8 days when selecting "week" so they can compare this monday to last weeks monday. Same goes for months. This option will not impact the label of the button.
+ * Find the TemporalUnit type matching the value.
+ */
+const useFindTemporalUnit = () => {
+    const [t] = useTranslation();
+    const temporalUnitsMap = useMemo(() => ({
+        day: t("input.unit.day"),
+        days: t("input.unit.days"),
+        week: t("input.unit.week"),
+        weeks: t("input.unit.weeks"),
+        month: t("input.unit.month"),
+        months: t("input.unit.months"),
+    }), [t]);
+    return useCallback((value) => {
+        if (!value) {
+            return undefined;
+        }
+        return objectKeys(temporalUnitsMap).find(unit => lowerCase(temporalUnitsMap[unit]) === lowerCase(value));
+    }, [temporalUnitsMap]);
+};
+
+/**
+ * Parse a text string into a temporal period object.
  *
- * @param { DayRangePickerPopoverProps} props - The properties for the DayRangePickerPopover component.
- * @param props.interval initial date range
- * @param props.showQuickOptions display additional buttons for quick date range selection
- * @param props.disabledDays disable days from selecting possibility
- * @param props.className custom className to be added to the component
- * @param props.dataTestId id used for tests
- * @param props.onRangeSelect hook function to handle applied date range
- * @param props.variant popover button variant
- * @param props.size popover button size
- * @param props.placement popover button placement
- * @param props.timezone timezone for DayRangePicker
- * @param props.fullwidth popover button fill width
- * @param props.buttonContent popover button content
- * @param props.max The maximum amount of days that can be selected
- * @param props.disabled disabling popover button
+ * @example
+ * parseTemporalPeriodFromText("Last 2 days"); // { direction: "last", count: 2, unit: "days" }
+ * parseTemporalPeriodFromText("next 3"); // { direction: "next", count: 3 }
+ * parseTemporalPeriodFromText("1 month"); // {count: 1, unit: "month" }
  */
-const DayRangePickerPopover = ({ interval = { from: undefined, to: undefined }, showQuickOptions, disabledDays, className, dataTestId, onRangeSelect, variant = "secondary", size = "small", placement, timezone, fullwidth, bindTo, buttonContent, max, disabled, }) => {
-    const { language } = useCurrentUserLanguage();
+const useParseTemporalPeriodFromText = () => {
     const [t] = useTranslation();
-    const handleOnRangeSelect = useCallback((range) => {
-        if (range) {
-            onRangeSelect(range);
+    const findTemporalDirection = useFindTemporalDirection();
+    const findTemporalUnit = useFindTemporalUnit();
+    return useCallback((value) => {
+        const directionMatch = value.match(
+        // Matches any of the translated direction strings (next, last)
+        new RegExp(`${t("input.direction.next")}|${t("input.direction.last")}`, "i"))?.[0];
+        const countMatch = value.match(/\d+/)?.[0];
+        const unitMatch = value.match(
+        // Matches any of the translated time unit strings both plural and singular (days, day, weeks, week, months, month)
+        new RegExp(`${t("input.unit.days")}|${t("input.unit.day")}|${t("input.unit.weeks")}|${t("input.unit.week")}|${t("input.unit.months")}|${t("input.unit.month")}`, "i"))?.[0];
+        return {
+            direction: findTemporalDirection(directionMatch),
+            count: nonNullable(countMatch) ? parseInt(countMatch) : undefined,
+            unit: findTemporalUnit(unitMatch),
+        };
+    }, [t, findTemporalDirection, findTemporalUnit]);
+};
+
+const DEFAULT_DIRECTIONS = ["last", "next"];
+const DEFAULT_COUNT = 1;
+/**
+ * Generate all possible temporal period combinations for a given temporal period.
+ * If direction is not provided, both "last" and "next" directions are used.
+ * If count is not provided, the count defaults to 1.
+ * If unit is not provided, both "day", "week", and "month" are used in plural or singular form depending on the count.
+ *
+ * @example
+ * createTemporalPeriodCombinations({ direction: "last", count: 2, unit: "days" }); // [{ direction: "last", count: 2, unit: "days" }]
+ * createTemporalPeriodCombinations({ direction: "next", count: 1 }); // [{ direction: "next", count: 1, unit: "day" }, { direction: "next", count: 1, unit: "week" }, { direction: "next", count: 1, unit: "month" }]
+ */
+const createTemporalPeriodCombinations = ({ direction, count, unit, }) => {
+    const directions = direction ? [direction] : DEFAULT_DIRECTIONS;
+    const isCountPlural = nonNullable(count) ? count > 1 : false;
+    const units = unit
+        ? [unit]
+        : isCountPlural
+            ? ["days", "weeks", "months"]
+            : ["day", "week", "month"];
+    return (directions
+        .flatMap(_direction => {
+        return units.map((_unit) => {
+            return {
+                direction: _direction,
+                count: count ?? DEFAULT_COUNT,
+                unit: _unit,
+            };
+        });
+    })
+        // If temporal direction isn't provided, filter out either of the 1 day options as they are both rendered as "Today"
+        .filter((period, index, array) => {
+        const isOneDayPeriod = period.count === 1 && period.unit === "day";
+        if (!isOneDayPeriod) {
+            return true;
+        }
+        const hasEarlierOneDayPeriod = array
+            .slice(0, index)
+            .some(_period => _period.count === 1 && _period.unit === "day");
+        return !hasEarlierOneDayPeriod;
+    }));
+};
+
+/**
+ * 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.from, { dateFormat: "medium", selectFormat: "dateOnly" }) +
+        " - " +
+        formatDateUtil(dateRange.to, { dateFormat: "medium", selectFormat: "dateOnly" }));
+};
+
+/**
+ * Check if a value is a temporal period.
+ *
+ * @param value - The value to check.
+ * @returns {boolean} - Whether the value is a temporal period.
+ */
+const isTemporalPeriod = (value) => !!value && typeof value === "object" && "direction" in value && "count" in value && "unit" in value;
+
+/**
+ * Day range select component.
+ */
+const DayRangeSelect = ({ className, dataTestId, disabled, selectedDateRange, onRangeSelect, allowedDirection = undefined, initialDateRangeOptions, showDateRangeSearch = true, showCustomDateRangeOption = true, timezone, maxDaysInRange, size = "medium", fullWidth = false, }) => {
+    const [t] = useTranslation();
+    const parseTemporalPeriodFromText = useParseTemporalPeriodFromText();
+    const filterTemporalPeriodsInRange = useFilterTemporalPeriodsInRange();
+    const formatTemporalPeriodLabel = useFormatTemporalPeriodLabel();
+    const calculateDateRange = useCalculateDateRange();
+    const calculateCustomDateRangeDisabledDays = useCalculateCustomDateRangeDisabledDays();
+    const customDateRangeDisabledDays = useMemo(() => calculateCustomDateRangeDisabledDays({ maxDaysInRange, allowedDirection }), [calculateCustomDateRangeDisabledDays, maxDaysInRange, allowedDirection]);
+    const defaultTemporalPeriods = useMemo(() => {
+        if (initialDateRangeOptions) {
+            return filterTemporalPeriodsInRange({ temporalPeriods: initialDateRangeOptions, maxDaysInRange });
+        }
+        const defaultCombinations = [
+            { direction: allowedDirection ?? "last", count: 1, unit: "day" },
+            { direction: allowedDirection ?? "last", count: 1, unit: "week" },
+            { direction: allowedDirection ?? "last", count: 1, unit: "month" },
+            { direction: allowedDirection ?? "last", count: 12, unit: "months" },
+        ];
+        return filterTemporalPeriodsInRange({ temporalPeriods: defaultCombinations, maxDaysInRange });
+    }, [initialDateRangeOptions, filterTemporalPeriodsInRange, allowedDirection, maxDaysInRange]);
+    const [temporalPeriods, setTemporalPeriods] = useState(defaultTemporalPeriods);
+    const [dateRangeSearchValue, setDateRangeSearchValue] = useState();
+    const [selectedRange, setSelectedRange] = useState();
+    const currentSelectedRange = useMemo(() => {
+        // Internal selected range takes precedence
+        if (selectedRange) {
+            return selectedRange;
         }
+        if (!selectedDateRange) {
+            return undefined;
+        }
+        // Renders the selected date range as a selected option
+        if (isTemporalPeriod(selectedDateRange)) {
+            return { dateRange: calculateDateRange(selectedDateRange), temporalPeriod: selectedDateRange };
+        }
+        // Renders the selected date range as a custom date range
+        return { dateRange: selectedDateRange, temporalPeriod: undefined };
+    }, [selectedRange, selectedDateRange, calculateDateRange]);
+    const isCustomDateRangeSelected = useMemo(() => currentSelectedRange && !currentSelectedRange.temporalPeriod, [currentSelectedRange]);
+    const [isCustomDateRangeOpen, setIsCustomDateRangeOpen] = useState(false);
+    const popoverTriggerLabel = useMemo(() => {
+        return currentSelectedRange
+            ? currentSelectedRange.temporalPeriod
+                ? formatTemporalPeriodLabel(currentSelectedRange.temporalPeriod)
+                : formatCustomDateRangeLabel(currentSelectedRange.dateRange)
+            : undefined;
+    }, [currentSelectedRange, formatTemporalPeriodLabel]);
+    const handleDateRangeSearch = useCallback((value) => {
+        setDateRangeSearchValue(value);
+        if (!nonNullable(value) || value === "") {
+            setTemporalPeriods(defaultTemporalPeriods);
+            return;
+        }
+        const temporalPeriod = parseTemporalPeriodFromText(value);
+        const uniqueCombinations = createTemporalPeriodCombinations({
+            ...temporalPeriod,
+            direction: allowedDirection ?? temporalPeriod.direction,
+        });
+        const combinationsInRange = filterTemporalPeriodsInRange({
+            temporalPeriods: uniqueCombinations,
+            maxDaysInRange,
+        });
+        setTemporalPeriods(combinationsInRange);
+    }, [
+        parseTemporalPeriodFromText,
+        allowedDirection,
+        filterTemporalPeriodsInRange,
+        defaultTemporalPeriods,
+        maxDaysInRange,
+    ]);
+    const handleReset = useCallback(() => {
+        setTemporalPeriods(defaultTemporalPeriods);
+        setSelectedRange(undefined);
+        onRangeSelect(undefined);
+        handleDateRangeSearch("");
+    }, [handleDateRangeSearch, onRangeSelect, defaultTemporalPeriods]);
+    const handleOptionsSelect = useCallback((value, closeMenu) => {
+        closeMenu();
+        setSelectedRange(value);
+        onRangeSelect(value);
     }, [onRangeSelect]);
-    return (jsxs(Popover, { placement: placement, children: [jsx(PopoverTrigger, { children: jsx(Button, { className: className, dataTestId: dataTestId ?? "show-date-range", disabled: disabled, fullWidth: fullwidth, prefix: jsx(Icon, { ariaLabel: t("dayRangePickerPopover.icon.tooltip.calendar"), name: "Calendar", size: "small" }), size: size, variant: variant, children: buttonContent }) }), jsx(PopoverContent, { children: close => (jsx(Card, { className: "min-w-min p-4", dataTestId: "range-popover-list", children: jsx(DayRangePicker, { disabledDays: disabledDays, language: language || "en", max: max, onClose: close, onRangeSelect: handleOnRangeSelect, selectedDays: interval, showQuickOptions: showQuickOptions, timezone: timezone }) })) })] }));
+    const handleCustomDateRangeSelect = useCallback((dateRange, closeMenu) => {
+        if (!dateRange || !dateRange.from || !dateRange.to) {
+            handleReset();
+            return;
+        }
+        closeMenu();
+        const _selectedDateRange = {
+            dateRange: { from: dateRange.from, to: dateRange.to },
+            temporalPeriod: undefined,
+        };
+        setSelectedRange(_selectedDateRange);
+        onRangeSelect(_selectedDateRange);
+    }, [onRangeSelect, handleReset]);
+    return (jsxs(Popover, { onOpenStateChange: state => !state && setIsCustomDateRangeOpen(false), placement: "bottom-start", children: [jsx(PopoverTrigger, { children: jsx(Button, { className: cvaTriggerButton({ active: !!selectedDateRange, className }), dataTestId: dataTestId, disabled: disabled, fullWidth: fullWidth, prefix: jsx(Icon, { ariaLabel: t("input.icon.tooltip.calendar"), color: disabled ? "secondary" : selectedDateRange ? "primary" : undefined, name: "Calendar", size: size === "large" ? "medium" : "small" }), size: size, variant: "secondary", children: popoverTriggerLabel ?? t("trigger.selectDateRange") }) }), jsx(PopoverContent, { dataTestId: dataTestId ? `${dataTestId}-popover-content` : undefined, children: closeMenu => {
+                    return !isCustomDateRangeOpen ? (jsxs(MenuList, { className: "min-w-[280px]", children: [jsxs("div", { className: "flex flex-col gap-1", children: [showDateRangeSearch ? (jsx(Search, { className: "w-full", dataTestId: 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, jsx(Button, { className: "ml-auto", dataTestId: dataTestId ? `${dataTestId}-reset-button` : undefined, disabled: !selectedDateRange, onClick: handleReset, size: "small", variant: "ghost", children: t("layout.actions.reset") })] }), jsx("hr", { className: "border-secondary-200 my-1", role: "separator" }), jsx(DayRangeSelectOptions, { dataTestId: dataTestId ? `${dataTestId}-options` : undefined, onSelect: value => handleOptionsSelect(value, closeMenu), selectedDateRange: currentSelectedRange, temporalPeriods: temporalPeriods }), showCustomDateRangeOption ? (jsxs("section", { children: [jsx(MenuDivider, {}), jsx(MenuItem, { dataTestId: 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", max: maxDaysInRange, onClose: () => setIsCustomDateRangeOpen(false), onRangeSelect: dateRange => handleCustomDateRangeSelect(dateRange, closeMenu), selectedDays: currentSelectedRange?.dateRange, timezone: timezone }) }));
+                } })] }));
 };
 
 const cvaTimelineElement = cvaMerge([
@@ -520,4 +862,4 @@ const customDotElement = (name, hovered, selected, color, keepOnSelection) => (h
  */
 setupLibraryTranslations();
 
-export { DateTime, DateTimeHumanized, DayPicker, DayRangePicker, DayRangePickerPopover, MS_PER_HOUR, Timeline, TimelineElement };
+export { DateTime, DateTimeHumanized, DayPicker, DayRangePicker, DayRangeSelect, MS_PER_HOUR, Timeline, TimelineElement, formatCustomDateRangeLabel, isTemporalPeriod, useCalculateDateRange, useFormatTemporalPeriodLabel };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/react-date-and-time-components",
-  "version": "1.3.221",
+  "version": "1.4.0",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {
@@ -8,19 +8,20 @@
   },
   "dependencies": {
     "date-fns": "^2.30.0",
-    "tailwind-merge": "^2.0.0",
     "react-day-picker": "9.5.1",
     "react": "19.0.0",
-    "@trackunit/react-components": "1.4.192",
-    "@trackunit/react-date-and-time-hooks": "1.3.186",
-    "@trackunit/react-core-hooks": "1.3.172",
-    "@trackunit/date-and-time-utils": "1.3.157",
-    "@trackunit/css-class-variance-utilities": "1.3.157",
-    "@trackunit/ui-icons": "1.3.157",
-    "@trackunit/ui-design-tokens": "1.3.155",
-    "@trackunit/shared-utils": "1.5.157",
-    "@trackunit/i18n-library-translation": "1.3.180",
-    "@trackunit/react-test-setup": "1.0.47"
+    "@trackunit/react-components": "1.4.194",
+    "@trackunit/react-date-and-time-hooks": "1.3.188",
+    "@trackunit/date-and-time-utils": "1.3.159",
+    "@trackunit/css-class-variance-utilities": "1.3.159",
+    "@trackunit/ui-icons": "1.3.159",
+    "@trackunit/ui-design-tokens": "1.3.157",
+    "@trackunit/shared-utils": "1.5.159",
+    "@trackunit/i18n-library-translation": "1.3.182",
+    "@trackunit/react-test-setup": "1.0.49",
+    "@trackunit/react-form-components": "1.3.220",
+    "string-ts": "^2.0.0",
+    "tailwind-merge": "^2.0.0"
   },
   "module": "./index.esm.js",
   "main": "./index.cjs.js",

package/src/DayPicker/DayRangePicker.d.ts

@@ -2,18 +2,11 @@ import { CommonProps } from "@trackunit/react-components";
 import { ReactElement } from "react";
 import { DateRange, Matcher } from "react-day-picker";
 import { TimeZone } from "./index";
-export interface ShowQuickOption {
-    /**
-     * Number of days of historical data that customer can view - info should come from useUserSubscription hook
-     */
-    dataRetention: number;
-}
-export type IDateRange = DateRange;
 export interface DayRangePickerProps extends CommonProps {
     /**
      * A callback function for when a range is selected
      */
-    onRangeSelect?: (range: IDateRange | undefined) => void;
+    onRangeSelect?: (range: DateRange | undefined) => void;
     /**
      * Define any days which may not be selected
      */
@@ -21,7 +14,7 @@ export interface DayRangePickerProps extends CommonProps {
     /**
      * Set any days which are selected
      */
-    selectedDays?: IDateRange;
+    selectedDays?: DateRange;
     /**
      * Set the language
      */
@@ -30,14 +23,14 @@ export interface DayRangePickerProps extends CommonProps {
      * The maximum amount of days that can be selected
      */
     max?: number;
-    /**
-     * Display quick options buttons above calendar which will preselect date range
-     */
-    showQuickOptions?: ShowQuickOption;
     /**
      * Shown time ranges will take timezone into consideration
      */
     timezone?: TimeZone;
+    /**
+     * The label for the cancel button
+     */
+    cancelButtonLabel?: string;
     /**
      * Callback for closing component view
      */
@@ -49,4 +42,4 @@ export interface DayRangePickerProps extends CommonProps {
  * @param {DayRangePickerProps} props - The props for the DayRangePicker component
  * @returns {ReactElement} DayRangePicker component
  */
-export declare const DayRangePicker: ({ onRangeSelect, selectedDays, disabledDays, dataTestId, language, className, max, showQuickOptions, timezone, onClose, }: DayRangePickerProps) => ReactElement;
+export declare const DayRangePicker: ({ onRangeSelect, selectedDays, disabledDays, dataTestId, language, className, max, timezone, cancelButtonLabel, onClose, }: DayRangePickerProps) => ReactElement;