@trackunit/react-date-and-time-components 1.16.22 → 1.16.25

package/index.cjs.js

@@ -106,7 +106,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, "data-testid": dataTestId, subtle = false, }) => {
+const DateTime = ({ value, format, className, fromNow = false, withTitle = false, titleFormat, timezone, "data-testid": dataTestId, subtle = false, ref, }) => {
     const { t } = useTranslation();
     const locale = reactDateAndTimeHooks.useLocale();
     const nowDate = react.useMemo(() => new Date(), []);
@@ -123,7 +123,7 @@ const DateTime = ({ value, format, className, fromNow = false, withTitle = false
     const dateValue = react.useMemo(() => {
         return fromNow ? getTimeSince(date, nowDate) : newDateTime;
     }, [date, fromNow, getTimeSince, newDateTime, nowDate]);
-    return (jsxRuntime.jsx("time", { className: className || subtle ? tailwindMerge.twMerge(subtle ? "text-neutral-600" : undefined, className) : undefined, "data-testid": dataTestId, dateTime: newDateTime, title: titleDateTime, children: dateValue }));
+    return (jsxRuntime.jsx("time", { className: className || subtle ? tailwindMerge.twMerge(subtle ? "text-neutral-600" : undefined, className) : undefined, "data-testid": dataTestId, dateTime: newDateTime, ref: ref, title: titleDateTime, children: dateValue }));
 };
 
 /**
@@ -132,9 +132,9 @@ const DateTime = ({ value, format, className, fromNow = false, withTitle = false
  * @param { RelativeDateTimeProps } props - The properties for the DateTimeHumanized component.
  * @param props.value Date | string | number | null | undefined
  */
-const DateTimeHumanized = ({ value }) => {
+const DateTimeHumanized = ({ value, ref }) => {
     const tooltipFormat = sharedUtils.DateTimeFormat.DATE_LONG_TIME;
-    return (jsxRuntime.jsx(reactComponents.Tooltip, { asChild: false, label: jsxRuntime.jsx(DateTime, { format: tooltipFormat, value: value }), children: jsxRuntime.jsx(DateTime, { className: "underline decoration-neutral-300 decoration-dotted", fromNow: true, value: value }) }));
+    return (jsxRuntime.jsx(reactComponents.Tooltip, { label: jsxRuntime.jsx(DateTime, { format: tooltipFormat, value: value }), children: jsxRuntime.jsx(DateTime, { className: "underline decoration-neutral-300 decoration-dotted", fromNow: true, ref: ref, value: value }) }));
 };
 
 const temporalArithmeticTypeMapping = {
@@ -184,10 +184,10 @@ const useCalculateDateRange = () => {
  * @param {DayPickerProps} props - The props for the DayPicker component
  * @returns {ReactElement} DayPicker component
  */
-const DayPicker = ({ onDaySelect, disabledDays, selectedDay, language, className, "data-testid": dataTestId, }) => {
+const DayPicker = ({ onDaySelect, disabledDays, selectedDay, language, className, "data-testid": dataTestId, ref, }) => {
     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 => {
+    return (jsxRuntime.jsx("div", { "data-testid": dataTestId, ref: ref, children: jsxRuntime.jsx(Calendar, { activeStartDate: selectedDay ?? undefined, allowPartialRange: true, className: tailwindMerge.twMerge("custom-day-picker", "range-picker", className, "p-0"), locale: language, onChange: value => {
                 if (value) {
                     onDaySelect?.(value);
                 }
@@ -227,7 +227,7 @@ const DayPicker = ({ onDaySelect, disabledDays, selectedDay, language, className
  * @param {DayRangePickerProps} props - The props for the DayRangePicker component
  * @returns {ReactElement} DayRangePicker component
  */
-const DayRangePicker = ({ onRangeSelect, selectedDays, disabledDays, "data-testid": dataTestId, language, className, classNameCalendar, timezone, cancelButtonLabel, onClose, }) => {
+const DayRangePicker = ({ onRangeSelect, selectedDays, disabledDays, "data-testid": dataTestId, language, className, classNameCalendar, timezone, cancelButtonLabel, onClose, ref, }) => {
     const [newRange, setNewRange] = react.useState(selectedDays ?? { start: undefined, end: undefined });
     const [t] = useTranslation();
     const { subtract } = reactDateAndTimeHooks.useDateAndTime();
@@ -269,7 +269,7 @@ const DayRangePicker = ({ onRangeSelect, selectedDays, disabledDays, "data-testi
             onClose();
         }
     }, [onRangeSelect, newRange, onClose]);
-    return (jsxRuntime.jsxs("div", { className: tailwindMerge.twMerge("flex", "w-min", "flex-col", "overflow-hidden", "rounded-md", "border", "border-neutral-300", "bg-white", className), "data-testid": dataTestId, children: [jsxRuntime.jsx(Calendar, { allowPartialRange: true, className: tailwindMerge.twMerge("custom-day-picker", "range-picker", classNameCalendar), locale: language, onChange: value => {
+    return (jsxRuntime.jsxs("div", { className: tailwindMerge.twMerge("flex", "w-min", "flex-col", "overflow-hidden", "rounded-md", "border", "border-neutral-300", "bg-white", className), "data-testid": dataTestId, ref: ref, children: [jsxRuntime.jsx(Calendar, { allowPartialRange: true, className: tailwindMerge.twMerge("custom-day-picker", "range-picker", classNameCalendar), locale: language, onChange: value => {
                     if (Array.isArray(value) && value[0] && value[1]) {
                         handleOnRangeSelect({ start: value[0], end: value[1] });
                     }
@@ -776,7 +776,7 @@ const ITEMS_PER_PAGE = 20;
  * @param {TimelineProps} props - The props for the Timeline component
  * @returns {ReactElement} Timeline component
  */
-const Timeline = ({ className, "data-testid": dataTestId, children, dateHeader, customHeader, toggleButton, }) => {
+const Timeline = ({ className, "data-testid": dataTestId, children, dateHeader, customHeader, toggleButton, ref: refProp, }) => {
     const ref = react.useRef(null);
     const [isOpen, setIsOpen] = react.useState(false);
     const [visibleCount, setVisibleCount] = react.useState(ITEMS_PER_PAGE);
@@ -825,7 +825,7 @@ const Timeline = ({ className, "data-testid": dataTestId, children, dateHeader,
     }, [isOpen]);
     const renderToggleButton = () => (jsxRuntime.jsxs("div", { className: cvaTimelineElement(), children: [childProps.date ? (jsxRuntime.jsx("div", { className: cvaTimelineElementTime({
                     width: hourCycle === "h12" || hourCycle === "h11" ? "large" : "small",
-                }) })) : null, jsxRuntime.jsx("div", { className: cvaDotWrapper(), children: jsxRuntime.jsx("div", { className: cvaLine({ lineStyle: childProps.lineStyle }) }) }), jsxRuntime.jsxs("div", { className: "flex min-h-8 cursor-pointer items-center text-sm text-neutral-500 hover:text-neutral-600", "data-testid": "timeline-toggle-btn", onClick: () => {
+                }) })) : null, jsxRuntime.jsx("div", { className: cvaDotWrapper(), children: jsxRuntime.jsx("div", { className: cvaLine({ lineStyle: childProps.lineStyle }) }) }), jsxRuntime.jsxs("div", { className: "min-h-8 flex cursor-pointer items-center text-sm text-neutral-500 hover:text-neutral-600", "data-testid": "timeline-toggle-btn", onClick: () => {
                     if (toggleButton?.onClick) {
                         toggleButton.onClick();
                     }
@@ -841,7 +841,7 @@ const Timeline = ({ className, "data-testid": dataTestId, children, dateHeader,
         const { date, dateRange, showTime } = dateHeader;
         return (jsxRuntime.jsx("div", { className: "pb-4", "data-testid": "timeline-date-header", children: date ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(reactComponents.Text, { size: "medium", type: "span", weight: "thick", children: formatDate(date, { selectFormat: !showTime ? "dateOnly" : undefined }) }), jsxRuntime.jsx(reactComponents.Text, { className: "text-neutral-500", size: "medium", type: "span", weight: "thick", children: ` (${dateAndTimeUtils.timeSinceAuto(date, new Date(), undefined, locale)})` })] })) : (jsxRuntime.jsx(reactComponents.Text, { className: "pr-1", size: "medium", type: "span", weight: "thick", children: formatRange(dateRange, { dateStyle: !showTime ? "medium" : undefined }) })) }));
     }, [dateHeader, formatDate, formatRange, customHeader, locale]);
-    return (jsxRuntime.jsxs("div", { className: className, "data-testid": dataTestId, children: [renderDateHeader(), customHeader ? jsxRuntime.jsx("div", { className: "text-sm font-semibold", children: customHeader }) : null, toggleButton && middleChildren.length > 0 ? (jsxRuntime.jsxs("div", { children: [firstChild, middleChildren.length > 0 ? renderToggleButton() : null, jsxRuntime.jsxs("div", { "aria-hidden": !isOpen, className: "overflow-hidden overflow-y-auto transition-all duration-300", ref: ref, children: [jsxRuntime.jsx("div", {}), visibleMiddleChildren, isOpen && visibleCount < middleChildren.length ? (jsxRuntime.jsx("div", { className: "flex justify-center py-2", onClick: e => {
+    return (jsxRuntime.jsxs("div", { className: className, "data-testid": dataTestId, ref: refProp, children: [renderDateHeader(), customHeader ? jsxRuntime.jsx("div", { className: "text-sm font-semibold", children: customHeader }) : null, toggleButton && middleChildren.length > 0 ? (jsxRuntime.jsxs("div", { children: [firstChild, middleChildren.length > 0 ? renderToggleButton() : null, jsxRuntime.jsxs("div", { "aria-hidden": !isOpen, className: "overflow-hidden overflow-y-auto transition-all duration-300", ref: ref, children: [jsxRuntime.jsx("div", {}), visibleMiddleChildren, isOpen && visibleCount < middleChildren.length ? (jsxRuntime.jsx("div", { className: "flex justify-center py-2", onClick: e => {
                                     e.stopPropagation(); // Prevent parent handlers from firing
                                     loadMoreItems();
                                 }, children: jsxRuntime.jsx(reactComponents.Text, { className: "cursor-pointer text-neutral-500 hover:text-neutral-600", "data-testid": "load-more-text", size: "small", type: "span", children: t("timeline.loadMore") }) })) : null, jsxRuntime.jsx("div", {})] }), lastChild] })) : (jsxRuntime.jsx("div", { children: children }))] }));

package/index.esm.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, "data-testid": dataTestId, subtle = false, }) => {
+const DateTime = ({ value, format, className, fromNow = false, withTitle = false, titleFormat, timezone, "data-testid": dataTestId, subtle = false, ref, }) => {
     const { t } = useTranslation();
     const locale = useLocale();
     const nowDate = useMemo(() => new Date(), []);
@@ -121,7 +121,7 @@ const DateTime = ({ value, format, className, fromNow = false, withTitle = false
     const dateValue = useMemo(() => {
         return fromNow ? getTimeSince(date, nowDate) : newDateTime;
     }, [date, fromNow, getTimeSince, newDateTime, nowDate]);
-    return (jsx("time", { className: className || subtle ? twMerge(subtle ? "text-neutral-600" : undefined, className) : undefined, "data-testid": dataTestId, dateTime: newDateTime, title: titleDateTime, children: dateValue }));
+    return (jsx("time", { className: className || subtle ? twMerge(subtle ? "text-neutral-600" : undefined, className) : undefined, "data-testid": dataTestId, dateTime: newDateTime, ref: ref, title: titleDateTime, children: dateValue }));
 };
 
 /**
@@ -130,9 +130,9 @@ const DateTime = ({ value, format, className, fromNow = false, withTitle = false
  * @param { RelativeDateTimeProps } props - The properties for the DateTimeHumanized component.
  * @param props.value Date | string | number | null | undefined
  */
-const DateTimeHumanized = ({ value }) => {
+const DateTimeHumanized = ({ value, ref }) => {
     const tooltipFormat = DateTimeFormat.DATE_LONG_TIME;
-    return (jsx(Tooltip, { asChild: false, label: jsx(DateTime, { format: tooltipFormat, value: value }), children: jsx(DateTime, { className: "underline decoration-neutral-300 decoration-dotted", fromNow: true, value: value }) }));
+    return (jsx(Tooltip, { label: jsx(DateTime, { format: tooltipFormat, value: value }), children: jsx(DateTime, { className: "underline decoration-neutral-300 decoration-dotted", fromNow: true, ref: ref, value: value }) }));
 };
 
 const temporalArithmeticTypeMapping = {
@@ -182,10 +182,10 @@ const useCalculateDateRange = () => {
  * @param {DayPickerProps} props - The props for the DayPicker component
  * @returns {ReactElement} DayPicker component
  */
-const DayPicker = ({ onDaySelect, disabledDays, selectedDay, language, className, "data-testid": dataTestId, }) => {
+const DayPicker = ({ onDaySelect, disabledDays, selectedDay, language, className, "data-testid": dataTestId, ref, }) => {
     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 => {
+    return (jsx("div", { "data-testid": dataTestId, ref: ref, children: jsx(Calendar, { activeStartDate: selectedDay ?? undefined, allowPartialRange: true, className: twMerge("custom-day-picker", "range-picker", className, "p-0"), locale: language, onChange: value => {
                 if (value) {
                     onDaySelect?.(value);
                 }
@@ -225,7 +225,7 @@ const DayPicker = ({ onDaySelect, disabledDays, selectedDay, language, className
  * @param {DayRangePickerProps} props - The props for the DayRangePicker component
  * @returns {ReactElement} DayRangePicker component
  */
-const DayRangePicker = ({ onRangeSelect, selectedDays, disabledDays, "data-testid": dataTestId, language, className, classNameCalendar, timezone, cancelButtonLabel, onClose, }) => {
+const DayRangePicker = ({ onRangeSelect, selectedDays, disabledDays, "data-testid": dataTestId, language, className, classNameCalendar, timezone, cancelButtonLabel, onClose, ref, }) => {
     const [newRange, setNewRange] = useState(selectedDays ?? { start: undefined, end: undefined });
     const [t] = useTranslation();
     const { subtract } = useDateAndTime();
@@ -267,7 +267,7 @@ const DayRangePicker = ({ onRangeSelect, selectedDays, disabledDays, "data-testi
             onClose();
         }
     }, [onRangeSelect, newRange, onClose]);
-    return (jsxs("div", { className: twMerge("flex", "w-min", "flex-col", "overflow-hidden", "rounded-md", "border", "border-neutral-300", "bg-white", className), "data-testid": dataTestId, children: [jsx(Calendar, { allowPartialRange: true, className: twMerge("custom-day-picker", "range-picker", classNameCalendar), locale: language, onChange: value => {
+    return (jsxs("div", { className: twMerge("flex", "w-min", "flex-col", "overflow-hidden", "rounded-md", "border", "border-neutral-300", "bg-white", className), "data-testid": dataTestId, ref: ref, children: [jsx(Calendar, { allowPartialRange: true, className: twMerge("custom-day-picker", "range-picker", classNameCalendar), locale: language, onChange: value => {
                     if (Array.isArray(value) && value[0] && value[1]) {
                         handleOnRangeSelect({ start: value[0], end: value[1] });
                     }
@@ -774,7 +774,7 @@ const ITEMS_PER_PAGE = 20;
  * @param {TimelineProps} props - The props for the Timeline component
  * @returns {ReactElement} Timeline component
  */
-const Timeline = ({ className, "data-testid": dataTestId, children, dateHeader, customHeader, toggleButton, }) => {
+const Timeline = ({ className, "data-testid": dataTestId, children, dateHeader, customHeader, toggleButton, ref: refProp, }) => {
     const ref = useRef(null);
     const [isOpen, setIsOpen] = useState(false);
     const [visibleCount, setVisibleCount] = useState(ITEMS_PER_PAGE);
@@ -823,7 +823,7 @@ const Timeline = ({ className, "data-testid": dataTestId, children, dateHeader,
     }, [isOpen]);
     const renderToggleButton = () => (jsxs("div", { className: cvaTimelineElement(), children: [childProps.date ? (jsx("div", { className: cvaTimelineElementTime({
                     width: hourCycle === "h12" || hourCycle === "h11" ? "large" : "small",
-                }) })) : null, jsx("div", { className: cvaDotWrapper(), children: jsx("div", { className: cvaLine({ lineStyle: childProps.lineStyle }) }) }), jsxs("div", { className: "flex min-h-8 cursor-pointer items-center text-sm text-neutral-500 hover:text-neutral-600", "data-testid": "timeline-toggle-btn", onClick: () => {
+                }) })) : null, jsx("div", { className: cvaDotWrapper(), children: jsx("div", { className: cvaLine({ lineStyle: childProps.lineStyle }) }) }), jsxs("div", { className: "min-h-8 flex cursor-pointer items-center text-sm text-neutral-500 hover:text-neutral-600", "data-testid": "timeline-toggle-btn", onClick: () => {
                     if (toggleButton?.onClick) {
                         toggleButton.onClick();
                     }
@@ -839,7 +839,7 @@ const Timeline = ({ className, "data-testid": dataTestId, children, dateHeader,
         const { date, dateRange, showTime } = dateHeader;
         return (jsx("div", { className: "pb-4", "data-testid": "timeline-date-header", children: date ? (jsxs(Fragment, { children: [jsx(Text, { size: "medium", type: "span", weight: "thick", children: formatDate(date, { selectFormat: !showTime ? "dateOnly" : undefined }) }), jsx(Text, { className: "text-neutral-500", size: "medium", type: "span", weight: "thick", children: ` (${timeSinceAuto(date, new Date(), undefined, locale)})` })] })) : (jsx(Text, { className: "pr-1", size: "medium", type: "span", weight: "thick", children: formatRange(dateRange, { dateStyle: !showTime ? "medium" : undefined }) })) }));
     }, [dateHeader, formatDate, formatRange, customHeader, locale]);
-    return (jsxs("div", { className: className, "data-testid": dataTestId, children: [renderDateHeader(), customHeader ? jsx("div", { className: "text-sm font-semibold", children: customHeader }) : null, toggleButton && middleChildren.length > 0 ? (jsxs("div", { children: [firstChild, middleChildren.length > 0 ? renderToggleButton() : null, jsxs("div", { "aria-hidden": !isOpen, className: "overflow-hidden overflow-y-auto transition-all duration-300", ref: ref, children: [jsx("div", {}), visibleMiddleChildren, isOpen && visibleCount < middleChildren.length ? (jsx("div", { className: "flex justify-center py-2", onClick: e => {
+    return (jsxs("div", { className: className, "data-testid": dataTestId, ref: refProp, children: [renderDateHeader(), customHeader ? jsx("div", { className: "text-sm font-semibold", children: customHeader }) : null, toggleButton && middleChildren.length > 0 ? (jsxs("div", { children: [firstChild, middleChildren.length > 0 ? renderToggleButton() : null, jsxs("div", { "aria-hidden": !isOpen, className: "overflow-hidden overflow-y-auto transition-all duration-300", ref: ref, children: [jsx("div", {}), visibleMiddleChildren, isOpen && visibleCount < middleChildren.length ? (jsx("div", { className: "flex justify-center py-2", onClick: e => {
                                     e.stopPropagation(); // Prevent parent handlers from firing
                                     loadMoreItems();
                                 }, children: jsx(Text, { className: "cursor-pointer text-neutral-500 hover:text-neutral-600", "data-testid": "load-more-text", size: "small", type: "span", children: t("timeline.loadMore") }) })) : null, jsx("div", {})] }), lastChild] })) : (jsx("div", { children: children }))] }));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/react-date-and-time-components",
-  "version": "1.16.22",
+  "version": "1.16.25",
   "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.17.17",
-    "@trackunit/date-and-time-utils": "1.11.43",
-    "@trackunit/react-date-and-time-hooks": "1.13.22",
-    "@trackunit/css-class-variance-utilities": "1.11.42",
-    "@trackunit/ui-icons": "1.11.41",
-    "@trackunit/shared-utils": "1.13.42",
-    "@trackunit/i18n-library-translation": "1.12.26",
-    "@trackunit/react-form-components": "1.14.19",
+    "@trackunit/react-components": "1.17.20",
+    "@trackunit/date-and-time-utils": "1.11.44",
+    "@trackunit/react-date-and-time-hooks": "1.13.25",
+    "@trackunit/css-class-variance-utilities": "1.11.43",
+    "@trackunit/ui-icons": "1.11.42",
+    "@trackunit/shared-utils": "1.13.43",
+    "@trackunit/i18n-library-translation": "1.12.27",
+    "@trackunit/react-form-components": "1.14.22",
     "string-ts": "^2.0.0",
     "tailwind-merge": "^2.0.0",
     "react-calendar": "^6.0.0"

package/src/DayPicker/DayPicker.d.ts

@@ -1,4 +1,4 @@
-import { CommonProps } from "@trackunit/react-components";
+import { CommonProps, Refable } from "@trackunit/react-components";
 import { ReactElement } from "react";
 export type FurtherBackThanDays = {
     /**
@@ -10,7 +10,7 @@ export type DisabledDaysMatcher = ((date: Date) => boolean) | {
     before?: Date;
     after?: Date;
 } | Array<Date> | FurtherBackThanDays;
-export interface DayPickerProps extends CommonProps {
+export interface DayPickerProps extends CommonProps, Refable<HTMLDivElement> {
     /**
      * A callback function for when a date is selected
      */
@@ -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, "data-testid": dataTestId, }: DayPickerProps) => ReactElement;
+export declare const DayPicker: ({ onDaySelect, disabledDays, selectedDay, language, className, "data-testid": dataTestId, ref, }: DayPickerProps) => ReactElement;

package/src/DayPicker/DayRangePicker.d.ts

@@ -1,9 +1,9 @@
-import { CommonProps } from "@trackunit/react-components";
+import { CommonProps, Refable } from "@trackunit/react-components";
 import { DateRange } from "@trackunit/date-and-time-utils";
 import { ReactElement } from "react";
 import { TimeZone } from "../index";
 import { DisabledDaysMatcher } from "./DayPicker";
-export interface DayRangePickerProps extends CommonProps {
+export interface DayRangePickerProps extends CommonProps, Refable<HTMLDivElement> {
     /**
      * A callback function for when a range is selected
      */
@@ -43,4 +43,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, "data-testid": dataTestId, language, className, classNameCalendar, timezone, cancelButtonLabel, onClose, }: DayRangePickerProps) => ReactElement;
+export declare const DayRangePicker: ({ onRangeSelect, selectedDays, disabledDays, "data-testid": dataTestId, language, className, classNameCalendar, timezone, cancelButtonLabel, onClose, ref, }: DayRangePickerProps) => ReactElement;

package/src/Timeline/Timeline.d.ts

@@ -1,7 +1,7 @@
 import { DateRange } from "@trackunit/date-and-time-utils";
-import { CommonProps } from "@trackunit/react-components";
+import { CommonProps, Refable } from "@trackunit/react-components";
 import { ReactNode } from "react";
-export interface TimelineProps extends CommonProps {
+export interface TimelineProps extends CommonProps, Refable<HTMLDivElement> {
     children: ReactNode;
     toggleButton?: {
         expandedLabel: string;
@@ -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, "data-testid": dataTestId, children, dateHeader, customHeader, toggleButton, }: TimelineProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Timeline: ({ className, "data-testid": dataTestId, children, dateHeader, customHeader, toggleButton, ref: refProp, }: TimelineProps) => import("react/jsx-runtime").JSX.Element;

package/src/dateTime/DateTime.d.ts

@@ -1,7 +1,7 @@
 import { TemporalFormat } from "@trackunit/date-and-time-utils";
-import { CommonProps } from "@trackunit/react-components";
+import { CommonProps, Refable } from "@trackunit/react-components";
 import { TimeZone } from "../index";
-export interface DateTimeProps extends CommonProps {
+export interface DateTimeProps extends CommonProps, Refable<HTMLTimeElement> {
     value: Date | string | number | null | undefined;
     format?: TemporalFormat;
     fromNow?: boolean;
@@ -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, "data-testid": dataTestId, subtle, }: DateTimeProps) => import("react/jsx-runtime").JSX.Element;
+export declare const DateTime: ({ value, format, className, fromNow, withTitle, titleFormat, timezone, "data-testid": dataTestId, subtle, ref, }: DateTimeProps) => import("react/jsx-runtime").JSX.Element;

package/src/dateTime/DateTimeHumanized.d.ts

@@ -1,4 +1,5 @@
-export interface RelativeDateTimeProps {
+import { Refable } from "@trackunit/react-components";
+export interface RelativeDateTimeProps extends Refable<HTMLTimeElement> {
     value: Date | string | number | null | undefined;
 }
 /**
@@ -7,4 +8,4 @@ export interface RelativeDateTimeProps {
  * @param { RelativeDateTimeProps } props - The properties for the DateTimeHumanized component.
  * @param props.value Date | string | number | null | undefined
  */
-export declare const DateTimeHumanized: ({ value }: RelativeDateTimeProps) => import("react/jsx-runtime").JSX.Element;
+export declare const DateTimeHumanized: ({ value, ref }: RelativeDateTimeProps) => import("react/jsx-runtime").JSX.Element;