@trackunit/react-date-and-time-components 1.10.118 → 1.10.121

package/index.cjs.js

@@ -104,7 +104,7 @@ const MS_PER_HOUR = 60 * 60 * 1000;
  * @param props.timezone TimeZone
  * @param props.subtle boolean
  */
-const DateTime = ({ value, format, className, fromNow = false, withTitle = false, titleFormat, timezone, dataTestId, subtle = false, }) => {
+const DateTime = ({ value, format, className, fromNow = false, withTitle = false, titleFormat, timezone, "data-testid": dataTestId, subtle = false, }) => {
     const { t } = useTranslation();
     const locale = reactDateAndTimeHooks.useLocale();
     const nowDate = react.useMemo(() => new Date(), []);
@@ -141,7 +141,7 @@ const DateTimeHumanized = ({ value }) => {
  * @param {DayRangePickerProps} props - The props for the DayRangePicker component
  * @returns {ReactElement} DayRangePicker component
  */
-const DayRangePicker = ({ onRangeSelect, selectedDays, disabledDays, dataTestId, language, className, timezone, cancelButtonLabel, onClose, }) => {
+const DayRangePicker = ({ onRangeSelect, selectedDays, disabledDays, "data-testid": dataTestId, language, className, timezone, cancelButtonLabel, onClose, }) => {
     const [newRange, setNewRange] = react.useState(selectedDays ?? { start: undefined, end: undefined });
     const [t] = useTranslation();
     const { subtract } = reactDateAndTimeHooks.useDateAndTime();
@@ -211,7 +211,7 @@ const DayRangePicker = ({ onRangeSelect, selectedDays, disabledDays, dataTestId,
                 }, 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 gap-2", children: [jsxRuntime.jsx(reactComponents.Button, { className: "mr-auto", dataTestId: "range-popover-clear-button", onClick: clearSelectedDays, size: "small", variant: "secondary", children: t("layout.actions.clear") }), jsxRuntime.jsx(reactComponents.Button, { dataTestId: "range-popover-cancel-button", onClick: () => handleCancel(), size: "small", variant: "ghost-neutral", children: cancelButtonLabel ? cancelButtonLabel : t("layout.actions.cancel") }), jsxRuntime.jsx(reactComponents.Button, { dataTestId: "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) }), jsxRuntime.jsx("hr", {}), jsxRuntime.jsxs("div", { className: "flex w-full gap-2", 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.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") })] })] }));
 };
 
 const temporalArithmeticTypeMapping = {
@@ -276,7 +276,7 @@ const useFormatTemporalPeriodLabel = () => {
 /**
  * Renders a list of options for the DayRangeSelect component.
  */
-const DayRangeSelectOptions = ({ dataTestId, temporalPeriods, selectedDateRange, onSelect, }) => {
+const DayRangeSelectOptions = ({ "data-testid": dataTestId, temporalPeriods, selectedDateRange, onSelect, }) => {
     const [t] = useTranslation();
     const formatTemporalPeriodLabel = useFormatTemporalPeriodLabel();
     const calculateDateRange = useCalculateDateRange();
@@ -292,14 +292,14 @@ const DayRangeSelectOptions = ({ dataTestId, temporalPeriods, selectedDateRange,
     }, [calculateDateRange, onSelect, temporalPeriods]);
     const options = react.useMemo(() => {
         if (!temporalPeriods.length) {
-            return (jsxRuntime.jsx(reactComponents.MenuItem, { dataTestId: dataTestId ? `${dataTestId}-no-options` : undefined, disabled: true, label: t("input.noOptions") }));
+            return (jsxRuntime.jsx(reactComponents.MenuItem, { "data-testid": dataTestId ? `${dataTestId}-no-options` : undefined, disabled: true, label: t("input.noOptions") }));
         }
         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 (jsxRuntime.jsx(reactComponents.MenuItem, { dataTestId: dataTestId ? `${dataTestId}-${index.toString()}` : undefined, label: formatTemporalPeriodLabel(temporalPeriod), onClick: () => handleSelect(index), selected: isSelected, suffix: isSelected ? jsxRuntime.jsx(reactComponents.Icon, { color: "primary", name: "Check", size: "small" }) : null }, index));
+            return (jsxRuntime.jsx(reactComponents.MenuItem, { "data-testid": dataTestId ? `${dataTestId}-${index.toString()}` : undefined, label: formatTemporalPeriodLabel(temporalPeriod), onClick: () => handleSelect(index), selected: isSelected, suffix: isSelected ? jsxRuntime.jsx(reactComponents.Icon, { color: "primary", name: "Check", size: "small" }) : null }, index));
         });
     }, [temporalPeriods, selectedDateRange, formatTemporalPeriodLabel, handleSelect, dataTestId, t]);
     return options;
@@ -534,7 +534,7 @@ const isTemporalDirection = (direction) => {
 /**
  * Day range select component.
  */
-const DayRangeSelect = ({ className, dataTestId, disabled, selectedDateRange, onRangeSelect, allowedDirection = undefined, initialDateRangeOptions, showDateRangeSearch = true, showCustomDateRangeOption = true, timezone, maxDaysInRange, size = "medium", fullWidth = false, actionButton, }) => {
+const DayRangeSelect = ({ className, "data-testid": dataTestId, disabled, selectedDateRange, onRangeSelect, allowedDirection = undefined, initialDateRangeOptions, showDateRangeSearch = true, showCustomDateRangeOption = true, timezone, maxDaysInRange, size = "medium", fullWidth = false, actionButton, }) => {
     const [t] = useTranslation();
     const parseTemporalPeriodFromText = useParseTemporalPeriodFromText();
     const filterTemporalPeriodsInRange = useFilterTemporalPeriodsInRange();
@@ -628,10 +628,10 @@ const DayRangeSelect = ({ className, dataTestId, disabled, selectedDateRange, on
         setSelectedRange(_selectedDateRange);
         onRangeSelect(_selectedDateRange);
     }, [onRangeSelect, handleReset]);
-    return (jsxRuntime.jsxs(reactComponents.Popover, { onOpenStateChange: state => !state && setIsCustomDateRangeOpen(false), placement: "bottom-start", children: [jsxRuntime.jsx(reactComponents.PopoverTrigger, { children: !actionButton ? (jsxRuntime.jsx(reactComponents.Button, { className: cvaTriggerButton({ active: !!selectedDateRange, className }), dataTestId: 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, variant: "secondary", children: popoverTriggerLabel ?? t("trigger.selectDateRange") })) : (jsxRuntime.jsx("div", { children: actionButton })) }), jsxRuntime.jsx(reactComponents.PopoverContent, { dataTestId: dataTestId ? `${dataTestId}-popover-content` : undefined, children: closeMenu => {
-                    return !isCustomDateRangeOpen ? (jsxRuntime.jsxs(reactComponents.MenuList, { className: "min-w-[280px]", children: [jsxRuntime.jsxs("div", { className: "flex flex-col gap-1", children: [showDateRangeSearch ? (jsxRuntime.jsx(reactFormComponents.Search, { className: "w-full", dataTestId: dataTestId ? `${dataTestId}-search-input` : undefined, onChange: event => handleDateRangeSearch(event.target.value), onClear: () => handleDateRangeSearch(""), placeholder: allowedDirection === "last"
+    return (jsxRuntime.jsxs(reactComponents.Popover, { onOpenStateChange: state => !state && setIsCustomDateRangeOpen(false), placement: "bottom-start", children: [jsxRuntime.jsx(reactComponents.PopoverTrigger, { 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, variant: "secondary", children: popoverTriggerLabel ?? t("trigger.selectDateRange") })) : (jsxRuntime.jsx("div", { children: actionButton })) }), jsxRuntime.jsx(reactComponents.PopoverContent, { "data-testid": dataTestId ? `${dataTestId}-popover-content` : undefined, children: closeMenu => {
+                    return !isCustomDateRangeOpen ? (jsxRuntime.jsxs(reactComponents.MenuList, { className: "min-w-[280px]", 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, jsxRuntime.jsx(reactComponents.Button, { className: "ml-auto", dataTestId: dataTestId ? `${dataTestId}-reset-button` : undefined, disabled: !selectedDateRange, onClick: handleReset, size: "small", variant: "ghost", children: t("layout.actions.reset") })] }), jsxRuntime.jsx("hr", { className: "my-1 border-neutral-200", role: "separator" }), jsxRuntime.jsx(DayRangeSelectOptions, { dataTestId: 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, { dataTestId: 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
+                                            : t("input.placeholder.customRange.next"), value: dateRangeSearchValue })) : null, 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") })] }), jsxRuntime.jsx("hr", { className: "my-1 border-neutral-200", role: "separator" }), 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
                                 ? {
                                     start: dateRange.start ?? undefined,
                                     end: dateRange.end ?? undefined,
@@ -646,7 +646,7 @@ const DayRangeSelect = ({ className, dataTestId, disabled, selectedDateRange, on
  * @param {DayPickerProps} props - The props for the DayPicker component
  * @returns {ReactElement} DayPicker component
  */
-const DayPicker = ({ onDaySelect, disabledDays, selectedDay, language, className, dataTestId, }) => {
+const DayPicker = ({ onDaySelect, disabledDays, selectedDay, language, className, "data-testid": dataTestId, }) => {
     const { subtract } = reactDateAndTimeHooks.useDateAndTime();
     const calculateDateRange = useCalculateDateRange();
     return (jsxRuntime.jsx("div", { "data-testid": dataTestId, children: jsxRuntime.jsx(Calendar, { activeStartDate: selectedDay ?? undefined, allowPartialRange: true, className: tailwindMerge.twMerge("custom-day-picker", "range-picker", className, "p-0"), locale: language, onChange: value => {
@@ -760,7 +760,7 @@ const ITEMS_PER_PAGE = 20;
  * @param {TimelineProps} props - The props for the Timeline component
  * @returns {ReactElement} Timeline component
  */
-const Timeline = ({ className, dataTestId, children, dateHeader, customHeader, toggleButton, }) => {
+const Timeline = ({ className, "data-testid": dataTestId, children, dateHeader, customHeader, toggleButton, }) => {
     const ref = react.useRef(null);
     const [isOpen, setIsOpen] = react.useState(false);
     const [visibleCount, setVisibleCount] = react.useState(ITEMS_PER_PAGE);
@@ -836,7 +836,7 @@ const Timeline = ({ className, dataTestId, children, dateHeader, customHeader, t
  * @param {TimeLineElementProps} props the props
  * @returns {ReactElement} component
  */
-const TimelineElement = ({ date, children, className, dataTestId = "timeline-element", header, onClick, actionButton, selected, customDot, lineStyle = "solid", hoverBehavior = false, }) => {
+const TimelineElement = ({ date, children, className, "data-testid": dataTestId = "timeline-element", header, onClick, actionButton, selected, customDot, lineStyle = "solid", hoverBehavior = false, }) => {
     const [isHovered, setIsHovered] = react.useState(false);
     const { formatDate } = reactDateAndTimeHooks.useDateAndTime();
     const locale = reactDateAndTimeHooks.useLocale();
@@ -894,7 +894,7 @@ const timelineElementTime = (formattedDate, locale) => {
 const CircleIcon = ({ selected, hovered }) => (jsxRuntime.jsxs("svg", { className: "relative z-[2]", "data-testid": "timeline-circle-icon", height: "24", viewBox: "0 0 24 24", width: "24", children: [jsxRuntime.jsx("circle", { cx: "12", cy: "12", fill: selected ? "#EFF6FF" : hovered ? "#F9FAFB" : "white", r: "10" }), jsxRuntime.jsx("circle", { cx: "12", cy: "12", fill: "#2563EB", r: "8" }), jsxRuntime.jsx("circle", { cx: "12", cy: "12", fill: "white", r: "3" })] }));
 const DotIcon = () => (jsxRuntime.jsxs("svg", { className: "relative z-[2]", "data-testid": "timeline-dot-icon", height: "24", viewBox: "0 0 24 24", width: "24", children: [jsxRuntime.jsx("circle", { cx: "12", cy: "12", fill: "white", r: "6" }), jsxRuntime.jsx("circle", { cx: "12", cy: "12", fill: "#2563EB", r: "4" })] }));
 const defaultDot = (hovered, selected) => hovered || selected ? jsxRuntime.jsx(CircleIcon, { hovered: hovered, selected: selected }) : jsxRuntime.jsx(DotIcon, {});
-const customDotElement = (name, hovered, selected, color, keepOnSelection) => (hovered || selected) && !keepOnSelection ? (jsxRuntime.jsx(CircleIcon, { hovered: hovered, selected: selected })) : (jsxRuntime.jsx("div", { className: "flex h-6 w-6 items-center justify-center", children: jsxRuntime.jsx("div", { className: cvaCustomDot(), children: jsxRuntime.jsx(reactComponents.Icon, { className: "block", color: color, dataTestId: "timeline-custom-dot", name: name, size: "small" }) }) }));
+const customDotElement = (name, hovered, selected, color, keepOnSelection) => (hovered || selected) && !keepOnSelection ? (jsxRuntime.jsx(CircleIcon, { hovered: hovered, selected: selected })) : (jsxRuntime.jsx("div", { className: "flex h-6 w-6 items-center justify-center", children: jsxRuntime.jsx("div", { className: cvaCustomDot(), children: jsxRuntime.jsx(reactComponents.Icon, { className: "block", color: color, "data-testid": "timeline-custom-dot", name: name, size: "small" }) }) }));
 
 /*
  * ----------------------------

package/index.esm.js

@@ -102,7 +102,7 @@ const MS_PER_HOUR = 60 * 60 * 1000;
  * @param props.timezone TimeZone
  * @param props.subtle boolean
  */
-const DateTime = ({ value, format, className, fromNow = false, withTitle = false, titleFormat, timezone, dataTestId, subtle = false, }) => {
+const DateTime = ({ value, format, className, fromNow = false, withTitle = false, titleFormat, timezone, "data-testid": dataTestId, subtle = false, }) => {
     const { t } = useTranslation();
     const locale = useLocale();
     const nowDate = useMemo(() => new Date(), []);
@@ -139,7 +139,7 @@ const DateTimeHumanized = ({ value }) => {
  * @param {DayRangePickerProps} props - The props for the DayRangePicker component
  * @returns {ReactElement} DayRangePicker component
  */
-const DayRangePicker = ({ onRangeSelect, selectedDays, disabledDays, dataTestId, language, className, timezone, cancelButtonLabel, onClose, }) => {
+const DayRangePicker = ({ onRangeSelect, selectedDays, disabledDays, "data-testid": dataTestId, language, className, timezone, cancelButtonLabel, onClose, }) => {
     const [newRange, setNewRange] = useState(selectedDays ?? { start: undefined, end: undefined });
     const [t] = useTranslation();
     const { subtract } = useDateAndTime();
@@ -209,7 +209,7 @@ const DayRangePicker = ({ onRangeSelect, selectedDays, disabledDays, dataTestId,
                 }, 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 gap-2", children: [jsx(Button, { className: "mr-auto", dataTestId: "range-popover-clear-button", onClick: clearSelectedDays, size: "small", variant: "secondary", children: t("layout.actions.clear") }), jsx(Button, { dataTestId: "range-popover-cancel-button", onClick: () => handleCancel(), size: "small", variant: "ghost-neutral", children: cancelButtonLabel ? cancelButtonLabel : t("layout.actions.cancel") }), jsx(Button, { dataTestId: "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) }), jsx("hr", {}), jsxs("div", { className: "flex w-full gap-2", children: [jsx(Button, { className: "mr-auto", "data-testid": "range-popover-clear-button", onClick: clearSelectedDays, size: "small", variant: "secondary", children: t("layout.actions.clear") }), 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") })] })] }));
 };
 
 const temporalArithmeticTypeMapping = {
@@ -274,7 +274,7 @@ const useFormatTemporalPeriodLabel = () => {
 /**
  * Renders a list of options for the DayRangeSelect component.
  */
-const DayRangeSelectOptions = ({ dataTestId, temporalPeriods, selectedDateRange, onSelect, }) => {
+const DayRangeSelectOptions = ({ "data-testid": dataTestId, temporalPeriods, selectedDateRange, onSelect, }) => {
     const [t] = useTranslation();
     const formatTemporalPeriodLabel = useFormatTemporalPeriodLabel();
     const calculateDateRange = useCalculateDateRange();
@@ -290,14 +290,14 @@ const DayRangeSelectOptions = ({ dataTestId, temporalPeriods, selectedDateRange,
     }, [calculateDateRange, onSelect, temporalPeriods]);
     const options = useMemo(() => {
         if (!temporalPeriods.length) {
-            return (jsx(MenuItem, { dataTestId: dataTestId ? `${dataTestId}-no-options` : undefined, disabled: true, label: t("input.noOptions") }));
+            return (jsx(MenuItem, { "data-testid": dataTestId ? `${dataTestId}-no-options` : undefined, disabled: true, label: t("input.noOptions") }));
         }
         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));
+            return (jsx(MenuItem, { "data-testid": 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;
@@ -532,7 +532,7 @@ const isTemporalDirection = (direction) => {
 /**
  * Day range select component.
  */
-const DayRangeSelect = ({ className, dataTestId, disabled, selectedDateRange, onRangeSelect, allowedDirection = undefined, initialDateRangeOptions, showDateRangeSearch = true, showCustomDateRangeOption = true, timezone, maxDaysInRange, size = "medium", fullWidth = false, actionButton, }) => {
+const DayRangeSelect = ({ className, "data-testid": dataTestId, disabled, selectedDateRange, onRangeSelect, allowedDirection = undefined, initialDateRangeOptions, showDateRangeSearch = true, showCustomDateRangeOption = true, timezone, maxDaysInRange, size = "medium", fullWidth = false, actionButton, }) => {
     const [t] = useTranslation();
     const parseTemporalPeriodFromText = useParseTemporalPeriodFromText();
     const filterTemporalPeriodsInRange = useFilterTemporalPeriodsInRange();
@@ -626,10 +626,10 @@ const DayRangeSelect = ({ className, dataTestId, disabled, selectedDateRange, on
         setSelectedRange(_selectedDateRange);
         onRangeSelect(_selectedDateRange);
     }, [onRangeSelect, handleReset]);
-    return (jsxs(Popover, { onOpenStateChange: state => !state && setIsCustomDateRangeOpen(false), placement: "bottom-start", children: [jsx(PopoverTrigger, { children: !actionButton ? (jsx(Button, { className: cvaTriggerButton({ active: !!selectedDateRange, className }), dataTestId: 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, variant: "secondary", children: popoverTriggerLabel ?? t("trigger.selectDateRange") })) : (jsx("div", { children: actionButton })) }), 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"
+    return (jsxs(Popover, { onOpenStateChange: state => !state && setIsCustomDateRangeOpen(false), placement: "bottom-start", children: [jsx(PopoverTrigger, { 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, variant: "secondary", children: popoverTriggerLabel ?? t("trigger.selectDateRange") })) : (jsx("div", { children: actionButton })) }), jsx(PopoverContent, { "data-testid": 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", "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, 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: "my-1 border-neutral-200", 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", onClose: () => setIsCustomDateRangeOpen(false), onRangeSelect: dateRange => handleCustomDateRangeSelect(dateRange
+                                            : t("input.placeholder.customRange.next"), value: dateRangeSearchValue })) : null, 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") })] }), jsx("hr", { className: "my-1 border-neutral-200", role: "separator" }), 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
                                 ? {
                                     start: dateRange.start ?? undefined,
                                     end: dateRange.end ?? undefined,
@@ -644,7 +644,7 @@ const DayRangeSelect = ({ className, dataTestId, disabled, selectedDateRange, on
  * @param {DayPickerProps} props - The props for the DayPicker component
  * @returns {ReactElement} DayPicker component
  */
-const DayPicker = ({ onDaySelect, disabledDays, selectedDay, language, className, dataTestId, }) => {
+const DayPicker = ({ onDaySelect, disabledDays, selectedDay, language, className, "data-testid": dataTestId, }) => {
     const { subtract } = useDateAndTime();
     const calculateDateRange = useCalculateDateRange();
     return (jsx("div", { "data-testid": dataTestId, children: jsx(Calendar, { activeStartDate: selectedDay ?? undefined, allowPartialRange: true, className: twMerge("custom-day-picker", "range-picker", className, "p-0"), locale: language, onChange: value => {
@@ -758,7 +758,7 @@ const ITEMS_PER_PAGE = 20;
  * @param {TimelineProps} props - The props for the Timeline component
  * @returns {ReactElement} Timeline component
  */
-const Timeline = ({ className, dataTestId, children, dateHeader, customHeader, toggleButton, }) => {
+const Timeline = ({ className, "data-testid": dataTestId, children, dateHeader, customHeader, toggleButton, }) => {
     const ref = useRef(null);
     const [isOpen, setIsOpen] = useState(false);
     const [visibleCount, setVisibleCount] = useState(ITEMS_PER_PAGE);
@@ -834,7 +834,7 @@ const Timeline = ({ className, dataTestId, children, dateHeader, customHeader, t
  * @param {TimeLineElementProps} props the props
  * @returns {ReactElement} component
  */
-const TimelineElement = ({ date, children, className, dataTestId = "timeline-element", header, onClick, actionButton, selected, customDot, lineStyle = "solid", hoverBehavior = false, }) => {
+const TimelineElement = ({ date, children, className, "data-testid": dataTestId = "timeline-element", header, onClick, actionButton, selected, customDot, lineStyle = "solid", hoverBehavior = false, }) => {
     const [isHovered, setIsHovered] = useState(false);
     const { formatDate } = useDateAndTime();
     const locale = useLocale();
@@ -892,7 +892,7 @@ const timelineElementTime = (formattedDate, locale) => {
 const CircleIcon = ({ selected, hovered }) => (jsxs("svg", { className: "relative z-[2]", "data-testid": "timeline-circle-icon", height: "24", viewBox: "0 0 24 24", width: "24", children: [jsx("circle", { cx: "12", cy: "12", fill: selected ? "#EFF6FF" : hovered ? "#F9FAFB" : "white", r: "10" }), jsx("circle", { cx: "12", cy: "12", fill: "#2563EB", r: "8" }), jsx("circle", { cx: "12", cy: "12", fill: "white", r: "3" })] }));
 const DotIcon = () => (jsxs("svg", { className: "relative z-[2]", "data-testid": "timeline-dot-icon", height: "24", viewBox: "0 0 24 24", width: "24", children: [jsx("circle", { cx: "12", cy: "12", fill: "white", r: "6" }), jsx("circle", { cx: "12", cy: "12", fill: "#2563EB", r: "4" })] }));
 const defaultDot = (hovered, selected) => hovered || selected ? jsx(CircleIcon, { hovered: hovered, selected: selected }) : jsx(DotIcon, {});
-const customDotElement = (name, hovered, selected, color, keepOnSelection) => (hovered || selected) && !keepOnSelection ? (jsx(CircleIcon, { hovered: hovered, selected: selected })) : (jsx("div", { className: "flex h-6 w-6 items-center justify-center", children: jsx("div", { className: cvaCustomDot(), children: jsx(Icon, { className: "block", color: color, dataTestId: "timeline-custom-dot", name: name, size: "small" }) }) }));
+const customDotElement = (name, hovered, selected, color, keepOnSelection) => (hovered || selected) && !keepOnSelection ? (jsx(CircleIcon, { hovered: hovered, selected: selected })) : (jsx("div", { className: "flex h-6 w-6 items-center justify-center", children: jsx("div", { className: cvaCustomDot(), children: jsx(Icon, { className: "block", color: color, "data-testid": "timeline-custom-dot", name: name, size: "small" }) }) }));
 
 /*
  * ----------------------------

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/react-date-and-time-components",
-  "version": "1.10.118",
+  "version": "1.10.121",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {
@@ -8,14 +8,14 @@
   },
   "dependencies": {
     "react": "19.0.0",
-    "@trackunit/react-components": "1.10.48",
-    "@trackunit/date-and-time-utils": "1.7.74",
-    "@trackunit/react-date-and-time-hooks": "1.7.104",
-    "@trackunit/css-class-variance-utilities": "1.7.74",
-    "@trackunit/ui-icons": "1.7.75",
-    "@trackunit/shared-utils": "1.9.74",
-    "@trackunit/i18n-library-translation": "1.7.91",
-    "@trackunit/react-form-components": "1.8.115",
+    "@trackunit/react-components": "1.10.51",
+    "@trackunit/date-and-time-utils": "1.7.77",
+    "@trackunit/react-date-and-time-hooks": "1.7.107",
+    "@trackunit/css-class-variance-utilities": "1.7.77",
+    "@trackunit/ui-icons": "1.7.78",
+    "@trackunit/shared-utils": "1.9.77",
+    "@trackunit/i18n-library-translation": "1.7.94",
+    "@trackunit/react-form-components": "1.8.118",
     "string-ts": "^2.0.0",
     "tailwind-merge": "^2.0.0",
     "react-calendar": "^6.0.0"

package/src/DayPicker/DayPicker.d.ts

@@ -34,4 +34,4 @@ export interface DayPickerProps extends CommonProps {
  * @param {DayPickerProps} props - The props for the DayPicker component
  * @returns {ReactElement} DayPicker component
  */
-export declare const DayPicker: ({ onDaySelect, disabledDays, selectedDay, language, className, dataTestId, }: DayPickerProps) => ReactElement;
+export declare const DayPicker: ({ onDaySelect, disabledDays, selectedDay, language, className, "data-testid": dataTestId, }: DayPickerProps) => ReactElement;

package/src/DayPicker/DayRangePicker.d.ts

@@ -38,4 +38,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, timezone, cancelButtonLabel, onClose, }: DayRangePickerProps) => ReactElement;
+export declare const DayRangePicker: ({ onRangeSelect, selectedDays, disabledDays, "data-testid": dataTestId, language, className, timezone, cancelButtonLabel, onClose, }: DayRangePickerProps) => ReactElement;

package/src/DayPicker/DayRangePicker.stories.d.ts

@@ -4,7 +4,7 @@ import { DayRangePickerProps } from "./DayRangePicker";
 type Story = StoryObj<typeof meta>;
 declare const meta: {
     title: string;
-    component: ({ onRangeSelect, selectedDays, disabledDays, dataTestId, language, className, timezone, cancelButtonLabel, onClose, }: DayRangePickerProps) => ReactElement;
+    component: ({ onRangeSelect, selectedDays, disabledDays, "data-testid": dataTestId, language, className, timezone, cancelButtonLabel, onClose, }: DayRangePickerProps) => ReactElement;
     tags: string[];
     parameters: {
         docs: {
@@ -23,7 +23,7 @@ declare const meta: {
         cancelButtonLabel?: string | undefined;
         onClose?: (() => void) | undefined;
         className?: string | undefined;
-        dataTestId?: string | undefined;
+        "data-testid"?: string | undefined;
     }>) => import("react/jsx-runtime").JSX.Element)[];
 };
 export default meta;

package/src/DayRangeSelect/DayRangeSelect.d.ts

@@ -60,4 +60,4 @@ export type DayRangeSelectProps = CommonProps & {
 /**
  * Day range select component.
  */
-export declare const DayRangeSelect: ({ className, dataTestId, disabled, selectedDateRange, onRangeSelect, allowedDirection, initialDateRangeOptions, showDateRangeSearch, showCustomDateRangeOption, timezone, maxDaysInRange, size, fullWidth, actionButton, }: DayRangeSelectProps) => import("react/jsx-runtime").JSX.Element;
+export declare const DayRangeSelect: ({ className, "data-testid": dataTestId, disabled, selectedDateRange, onRangeSelect, allowedDirection, initialDateRangeOptions, showDateRangeSearch, showCustomDateRangeOption, timezone, maxDaysInRange, size, fullWidth, actionButton, }: DayRangeSelectProps) => import("react/jsx-runtime").JSX.Element;

package/src/DayRangeSelect/DayRangeSelect.stories.d.ts

@@ -5,7 +5,7 @@ import { DayRangeSelectProps } from "./DayRangeSelect";
 type Story = StoryObj<typeof meta>;
 declare const meta: {
     title: string;
-    component: ({ className, dataTestId, disabled, selectedDateRange, onRangeSelect, allowedDirection, initialDateRangeOptions, showDateRangeSearch, showCustomDateRangeOption, timezone, maxDaysInRange, size, fullWidth, actionButton, }: DayRangeSelectProps) => import("react/jsx-runtime").JSX.Element;
+    component: ({ className, "data-testid": dataTestId, disabled, selectedDateRange, onRangeSelect, allowedDirection, initialDateRangeOptions, showDateRangeSearch, showCustomDateRangeOption, timezone, maxDaysInRange, size, fullWidth, actionButton, }: DayRangeSelectProps) => import("react/jsx-runtime").JSX.Element;
     tags: string[];
     parameters: {
         docs: {
@@ -17,7 +17,7 @@ declare const meta: {
     };
     decorators: ((Story: import("storybook/internal/csf").PartialStoryFn<import("@storybook/react-webpack5").ReactRenderer, {
         className?: string | undefined;
-        dataTestId?: string | undefined;
+        "data-testid"?: string | undefined;
         disabled?: boolean | undefined;
         selectedDateRange?: (DateRange | import("./types").TemporalPeriod) | undefined;
         initialDateRangeOptions?: Array<import("./types").TemporalPeriod> | undefined;

package/src/DayRangeSelect/components/DayRangeSelectOptions.d.ts

@@ -8,4 +8,4 @@ export type DayRangeSelectOptionsProps = CommonProps & {
 /**
  * Renders a list of options for the DayRangeSelect component.
  */
-export declare const DayRangeSelectOptions: ({ dataTestId, temporalPeriods, selectedDateRange, onSelect, }: DayRangeSelectOptionsProps) => import("react/jsx-runtime").JSX.Element | import("react/jsx-runtime").JSX.Element[];
+export declare const DayRangeSelectOptions: ({ "data-testid": dataTestId, temporalPeriods, selectedDateRange, onSelect, }: DayRangeSelectOptionsProps) => import("react/jsx-runtime").JSX.Element | import("react/jsx-runtime").JSX.Element[];

package/src/Timeline/Timeline.d.ts

@@ -25,4 +25,4 @@ export interface TimelineProps extends CommonProps {
  * @param {TimelineProps} props - The props for the Timeline component
  * @returns {ReactElement} Timeline component
  */
-export declare const Timeline: ({ className, dataTestId, children, dateHeader, customHeader, toggleButton, }: TimelineProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Timeline: ({ className, "data-testid": dataTestId, children, dateHeader, customHeader, toggleButton, }: TimelineProps) => import("react/jsx-runtime").JSX.Element;

package/src/Timeline/Timeline.stories.d.ts

@@ -4,7 +4,7 @@ import { TimelineProps } from "./Timeline";
 type Story = StoryObjWithOptionalArgs<typeof meta, "children">;
 declare const meta: {
     title: string;
-    component: ({ className, dataTestId, children, dateHeader, customHeader, toggleButton, }: TimelineProps) => import("react/jsx-runtime").JSX.Element;
+    component: ({ className, "data-testid": dataTestId, children, dateHeader, customHeader, toggleButton, }: TimelineProps) => import("react/jsx-runtime").JSX.Element;
     tags: string[];
     parameters: {
         docs: {

package/src/Timeline/TimelineElement.d.ts

@@ -26,5 +26,5 @@ interface TimeLineElementProps extends CommonProps {
  * @param {TimeLineElementProps} props the props
  * @returns {ReactElement} component
  */
-export declare const TimelineElement: ({ date, children, className, dataTestId, header, onClick, actionButton, selected, customDot, lineStyle, hoverBehavior, }: TimeLineElementProps) => import("react/jsx-runtime").JSX.Element;
+export declare const TimelineElement: ({ date, children, className, "data-testid": dataTestId, header, onClick, actionButton, selected, customDot, lineStyle, hoverBehavior, }: TimeLineElementProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/src/dateTime/DateTime.d.ts

@@ -24,4 +24,4 @@ export declare const MS_PER_HOUR: number;
  * @param props.timezone TimeZone
  * @param props.subtle boolean
  */
-export declare const DateTime: ({ value, format, className, fromNow, withTitle, titleFormat, timezone, dataTestId, subtle, }: DateTimeProps) => import("react/jsx-runtime").JSX.Element;
+export declare const DateTime: ({ value, format, className, fromNow, withTitle, titleFormat, timezone, "data-testid": dataTestId, subtle, }: DateTimeProps) => import("react/jsx-runtime").JSX.Element;

package/src/dateTime/DateTime.stories.d.ts

@@ -5,7 +5,7 @@ type Story = StoryObj<typeof meta>;
 declare const meta: {
     title: string;
     tags: string[];
-    component: ({ value, format, className, fromNow, withTitle, titleFormat, timezone, dataTestId, subtle, }: DateTimeProps) => import("react/jsx-runtime").JSX.Element;
+    component: ({ value, format, className, fromNow, withTitle, titleFormat, timezone, "data-testid": dataTestId, subtle, }: DateTimeProps) => import("react/jsx-runtime").JSX.Element;
     decorators: ((Story: import("storybook/internal/csf").PartialStoryFn<import("@storybook/react-webpack5").ReactRenderer, {
         value: Date | string | number | null | undefined;
         format?: import("@trackunit/date-and-time-utils").TemporalFormat | undefined;
@@ -15,7 +15,7 @@ declare const meta: {
         timezone?: import("..").TimeZone | undefined;
         subtle?: boolean | undefined;
         className?: string | undefined;
-        dataTestId?: string | undefined;
+        "data-testid"?: string | undefined;
     }>) => import("react/jsx-runtime").JSX.Element)[];
 };
 export default meta;