@trackunit/react-date-and-time-components 2.10.16 → 2.11.0

package/index.cjs.js

@@ -682,7 +682,7 @@ const isTemporalDirection = (direction) => {
  * ```
  * @param {DayRangeSelectProps} props - The props for the DayRangeSelect component
  */
-const DayRangeSelect = ({ className, "data-testid": dataTestId, disabled = false, selectedDateRange, onRangeSelect, allowedDirection = undefined, initialDateRangeOptions, showDateRangeSearch = true, showResetButton = true, showCustomDateRangeOption = true, timezone, maxDaysInRange, disabledDays, size = "medium", fullWidth = false, actionButton, popoverPlacement = "bottom-start", }) => {
+const DayRangeSelect = ({ className, "data-testid": dataTestId, style, ref, disabled = false, selectedDateRange, onRangeSelect, allowedDirection = undefined, initialDateRangeOptions, showDateRangeSearch = true, showResetButton = true, showCustomDateRangeOption = true, timezone, maxDaysInRange, disabledDays, size = "medium", fullWidth = false, actionButton, popoverPlacement = "bottom-start", }) => {
     const [t] = useTranslation();
     const parseTemporalPeriodFromText = useParseTemporalPeriodFromText();
     const filterTemporalPeriodsInRange = useFilterTemporalPeriodsInRange();
@@ -779,7 +779,7 @@ const DayRangeSelect = ({ className, "data-testid": dataTestId, disabled = false
         setSelectedRange(_selectedDateRange);
         onRangeSelect(_selectedDateRange);
     }, [onRangeSelect, handleReset]);
-    return (jsxRuntime.jsxs(reactComponents.Popover, { onOpenStateChange: state => !state && setIsCustomDateRangeOpen(false), placement: popoverPlacement, 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 (jsxRuntime.jsxs(reactComponents.Popover, { onOpenStateChange: state => !state && setIsCustomDateRangeOpen(false), placement: popoverPlacement, children: [jsxRuntime.jsx(reactComponents.PopoverTrigger, { ref: ref, children: !actionButton ? (jsxRuntime.jsx(reactComponents.Button, { className: cvaTriggerButton({ active: !!selectedDateRange, className }), "data-testid": dataTestId, disabled: disabled, fullWidth: fullWidth, prefix: jsxRuntime.jsx(reactComponents.Icon, { ariaLabel: t("input.icon.tooltip.calendar"), color: disabled ? "neutral" : selectedDateRange ? "primary" : undefined, name: "Calendar", size: size === "large" ? "medium" : "small" }), size: size, style: style, variant: "secondary", children: popoverTriggerLabel ?? t("trigger.selectDateRange") })) : (jsxRuntime.jsx("div", { className: className, "data-testid": dataTestId, style: style, children: actionButton })) }), jsxRuntime.jsx(reactComponents.PopoverContent, { "data-testid": dataTestId ? `${dataTestId}-popover-content` : undefined, children: closeMenu => {
                     return !isCustomDateRangeOpen ? (jsxRuntime.jsxs(reactComponents.MenuContent, { className: "min-w-[280px]", children: [showPopoverHeader ? (jsxRuntime.jsxs("div", { children: [jsxRuntime.jsxs("div", { className: "flex flex-col gap-1", children: [showDateRangeSearch ? (jsxRuntime.jsx(reactFormComponents.Search, { className: "w-full", "data-testid": dataTestId ? `${dataTestId}-search-input` : undefined, onChange: event => handleDateRangeSearch(event.target.value), onClear: () => handleDateRangeSearch(""), placeholder: allowedDirection === "last"
                                                     ? t("input.placeholder.customRange.last")
                                                     : t("input.placeholder.customRange.next"), value: dateRangeSearchValue })) : null, showResetButton ? (jsxRuntime.jsx(reactComponents.Button, { className: "ml-auto", "data-testid": dataTestId ? `${dataTestId}-reset-button` : undefined, disabled: !selectedDateRange, onClick: handleReset, size: "small", variant: "ghost", children: t("layout.actions.reset") })) : null] }), jsxRuntime.jsx("hr", { className: "my-1 border-neutral-200", role: "separator" })] })) : null, jsxRuntime.jsx(DayRangeSelectOptions, { "data-testid": dataTestId ? `${dataTestId}-options` : undefined, onSelect: value => handleOptionsSelect(value, closeMenu), selectedDateRange: currentSelectedRange, temporalPeriods: temporalPeriods }), showCustomDateRangeOption ? (jsxRuntime.jsxs("section", { children: [jsxRuntime.jsx(reactComponents.MenuDivider, {}), jsxRuntime.jsx(reactComponents.MenuItem, { "data-testid": dataTestId ? `${dataTestId}-custom-range` : undefined, label: t("trigger.customRange"), onClick: () => setIsCustomDateRangeOpen(true), selected: isCustomDateRangeSelected, suffix: jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [isCustomDateRangeSelected ? jsxRuntime.jsx(reactComponents.Icon, { color: "primary", name: "Check", size: "small" }) : null, jsxRuntime.jsx(reactComponents.Icon, { name: "ChevronRight", size: "small" })] }) })] })) : null] })) : (jsxRuntime.jsx(reactComponents.Card, { children: jsxRuntime.jsx(DayRangePicker, { cancelButtonLabel: t("layout.actions.back"), disabledDays: customDateRangeDisabledDays, language: "en", onClose: () => setIsCustomDateRangeOpen(false), onRangeSelect: dateRange => handleCustomDateRangeSelect(dateRange
@@ -961,7 +961,7 @@ const timeTemporalFormat = { selectFormat: "timeOnly", timeFormat: "short" };
  * @param {TimeLineElementProps} props the props
  * @returns {ReactElement} component
  */
-const TimelineElement = ({ date, children, className, style, "data-testid": dataTestId = "timeline-element", header, onClick, actionButton, selected = false, customDot, lineStyle = "solid", hoverBehavior = false, timestampFormat = "time", }) => {
+const TimelineElement = ({ date, children, className, style, "data-testid": dataTestId = "timeline-element", header, onClick, actionButton, selected = false, customDot, lineStyle = "solid", hoverBehavior = false, timestampFormat = "time", ref, }) => {
     const [isHovered, setIsHovered] = react.useState(false);
     const { formatDate } = reactDateAndTimeHooks.useDateAndTime();
     const locale = reactDateAndTimeHooks.useLocale();
@@ -987,7 +987,7 @@ const TimelineElement = ({ date, children, className, style, "data-testid": data
             setIsHovered(false);
         }
     };
-    return (jsxRuntime.jsxs("div", { className: cvaTimelineElement({ className, selected, hoverBehavior }), "data-date": date, "data-testid": dataTestId, onClick: onClick, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, style: style, children: [renderDate(formattedDate, locale), jsxRuntime.jsxs("div", { className: cvaDotWrapper(), children: [renderDot(customDot, isHovered, selected), jsxRuntime.jsx("div", { className: cvaLine({ lineStyle }), "data-testid": `${dataTestId}-line` })] }), jsxRuntime.jsxs("div", { className: "pb-2 pt-2", children: [renderHeader(header, dataTestId), renderChildren(children), renderActionButton(actionButton)] })] }));
+    return (jsxRuntime.jsxs("div", { className: cvaTimelineElement({ className, selected, hoverBehavior }), "data-date": date, "data-testid": dataTestId, onClick: onClick, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, ref: ref, style: style, children: [renderDate(formattedDate, locale), jsxRuntime.jsxs("div", { className: cvaDotWrapper(), children: [renderDot(customDot, isHovered, selected), jsxRuntime.jsx("div", { className: cvaLine({ lineStyle }), "data-testid": `${dataTestId}-line` })] }), jsxRuntime.jsxs("div", { className: "pb-2 pt-2", children: [renderHeader(header, dataTestId), renderChildren(children), renderActionButton(actionButton)] })] }));
 };
 const renderDate = (formattedDate, locale) => {
     if (!formattedDate) {

package/index.esm.js

@@ -680,7 +680,7 @@ const isTemporalDirection = (direction) => {
  * ```
  * @param {DayRangeSelectProps} props - The props for the DayRangeSelect component
  */
-const DayRangeSelect = ({ className, "data-testid": dataTestId, disabled = false, selectedDateRange, onRangeSelect, allowedDirection = undefined, initialDateRangeOptions, showDateRangeSearch = true, showResetButton = true, showCustomDateRangeOption = true, timezone, maxDaysInRange, disabledDays, size = "medium", fullWidth = false, actionButton, popoverPlacement = "bottom-start", }) => {
+const DayRangeSelect = ({ className, "data-testid": dataTestId, style, ref, disabled = false, selectedDateRange, onRangeSelect, allowedDirection = undefined, initialDateRangeOptions, showDateRangeSearch = true, showResetButton = true, showCustomDateRangeOption = true, timezone, maxDaysInRange, disabledDays, size = "medium", fullWidth = false, actionButton, popoverPlacement = "bottom-start", }) => {
     const [t] = useTranslation();
     const parseTemporalPeriodFromText = useParseTemporalPeriodFromText();
     const filterTemporalPeriodsInRange = useFilterTemporalPeriodsInRange();
@@ -777,7 +777,7 @@ const DayRangeSelect = ({ className, "data-testid": dataTestId, disabled = false
         setSelectedRange(_selectedDateRange);
         onRangeSelect(_selectedDateRange);
     }, [onRangeSelect, handleReset]);
-    return (jsxs(Popover, { onOpenStateChange: state => !state && setIsCustomDateRangeOpen(false), placement: popoverPlacement, 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 (jsxs(Popover, { onOpenStateChange: state => !state && setIsCustomDateRangeOpen(false), placement: popoverPlacement, children: [jsx(PopoverTrigger, { ref: ref, children: !actionButton ? (jsx(Button, { className: cvaTriggerButton({ active: !!selectedDateRange, className }), "data-testid": dataTestId, disabled: disabled, fullWidth: fullWidth, prefix: jsx(Icon, { ariaLabel: t("input.icon.tooltip.calendar"), color: disabled ? "neutral" : selectedDateRange ? "primary" : undefined, name: "Calendar", size: size === "large" ? "medium" : "small" }), size: size, style: style, variant: "secondary", children: popoverTriggerLabel ?? t("trigger.selectDateRange") })) : (jsx("div", { className: className, "data-testid": dataTestId, style: style, children: actionButton })) }), jsx(PopoverContent, { "data-testid": dataTestId ? `${dataTestId}-popover-content` : undefined, children: closeMenu => {
                     return !isCustomDateRangeOpen ? (jsxs(MenuContent, { className: "min-w-[280px]", children: [showPopoverHeader ? (jsxs("div", { children: [jsxs("div", { className: "flex flex-col gap-1", children: [showDateRangeSearch ? (jsx(Search, { className: "w-full", "data-testid": dataTestId ? `${dataTestId}-search-input` : undefined, onChange: event => handleDateRangeSearch(event.target.value), onClear: () => handleDateRangeSearch(""), placeholder: allowedDirection === "last"
                                                     ? t("input.placeholder.customRange.last")
                                                     : t("input.placeholder.customRange.next"), value: dateRangeSearchValue })) : null, showResetButton ? (jsx(Button, { className: "ml-auto", "data-testid": dataTestId ? `${dataTestId}-reset-button` : undefined, disabled: !selectedDateRange, onClick: handleReset, size: "small", variant: "ghost", children: t("layout.actions.reset") })) : null] }), jsx("hr", { className: "my-1 border-neutral-200", role: "separator" })] })) : null, jsx(DayRangeSelectOptions, { "data-testid": dataTestId ? `${dataTestId}-options` : undefined, onSelect: value => handleOptionsSelect(value, closeMenu), selectedDateRange: currentSelectedRange, temporalPeriods: temporalPeriods }), showCustomDateRangeOption ? (jsxs("section", { children: [jsx(MenuDivider, {}), jsx(MenuItem, { "data-testid": dataTestId ? `${dataTestId}-custom-range` : undefined, label: t("trigger.customRange"), onClick: () => setIsCustomDateRangeOpen(true), selected: isCustomDateRangeSelected, suffix: jsxs(Fragment, { children: [isCustomDateRangeSelected ? jsx(Icon, { color: "primary", name: "Check", size: "small" }) : null, jsx(Icon, { name: "ChevronRight", size: "small" })] }) })] })) : null] })) : (jsx(Card, { children: jsx(DayRangePicker, { cancelButtonLabel: t("layout.actions.back"), disabledDays: customDateRangeDisabledDays, language: "en", onClose: () => setIsCustomDateRangeOpen(false), onRangeSelect: dateRange => handleCustomDateRangeSelect(dateRange
@@ -959,7 +959,7 @@ const timeTemporalFormat = { selectFormat: "timeOnly", timeFormat: "short" };
  * @param {TimeLineElementProps} props the props
  * @returns {ReactElement} component
  */
-const TimelineElement = ({ date, children, className, style, "data-testid": dataTestId = "timeline-element", header, onClick, actionButton, selected = false, customDot, lineStyle = "solid", hoverBehavior = false, timestampFormat = "time", }) => {
+const TimelineElement = ({ date, children, className, style, "data-testid": dataTestId = "timeline-element", header, onClick, actionButton, selected = false, customDot, lineStyle = "solid", hoverBehavior = false, timestampFormat = "time", ref, }) => {
     const [isHovered, setIsHovered] = useState(false);
     const { formatDate } = useDateAndTime();
     const locale = useLocale();
@@ -985,7 +985,7 @@ const TimelineElement = ({ date, children, className, style, "data-testid": data
             setIsHovered(false);
         }
     };
-    return (jsxs("div", { className: cvaTimelineElement({ className, selected, hoverBehavior }), "data-date": date, "data-testid": dataTestId, onClick: onClick, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, style: style, children: [renderDate(formattedDate, locale), jsxs("div", { className: cvaDotWrapper(), children: [renderDot(customDot, isHovered, selected), jsx("div", { className: cvaLine({ lineStyle }), "data-testid": `${dataTestId}-line` })] }), jsxs("div", { className: "pb-2 pt-2", children: [renderHeader(header, dataTestId), renderChildren(children), renderActionButton(actionButton)] })] }));
+    return (jsxs("div", { className: cvaTimelineElement({ className, selected, hoverBehavior }), "data-date": date, "data-testid": dataTestId, onClick: onClick, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, ref: ref, style: style, children: [renderDate(formattedDate, locale), jsxs("div", { className: cvaDotWrapper(), children: [renderDot(customDot, isHovered, selected), jsx("div", { className: cvaLine({ lineStyle }), "data-testid": `${dataTestId}-line` })] }), jsxs("div", { className: "pb-2 pt-2", children: [renderHeader(header, dataTestId), renderChildren(children), renderActionButton(actionButton)] })] }));
 };
 const renderDate = (formattedDate, locale) => {
     if (!formattedDate) {

package/package.json

@@ -1,20 +1,20 @@
 {
   "name": "@trackunit/react-date-and-time-components",
-  "version": "2.10.16",
+  "version": "2.11.0",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {
     "node": ">=24.x"
   },
   "dependencies": {
-    "@trackunit/react-components": "3.8.9",
-    "@trackunit/date-and-time-utils": "1.17.9",
-    "@trackunit/react-date-and-time-hooks": "2.10.15",
-    "@trackunit/css-class-variance-utilities": "2.3.9",
-    "@trackunit/ui-icons": "1.17.9",
-    "@trackunit/shared-utils": "1.19.9",
-    "@trackunit/i18n-library-translation": "2.8.10",
-    "@trackunit/react-form-components": "2.10.16",
+    "@trackunit/react-components": "3.9.0",
+    "@trackunit/date-and-time-utils": "1.18.0",
+    "@trackunit/react-date-and-time-hooks": "2.11.0",
+    "@trackunit/css-class-variance-utilities": "2.4.0",
+    "@trackunit/ui-icons": "1.18.0",
+    "@trackunit/shared-utils": "1.20.0",
+    "@trackunit/i18n-library-translation": "2.9.0",
+    "@trackunit/react-form-components": "2.11.0",
     "string-ts": "^2.0.0",
     "tailwind-merge": "^2.0.0",
     "react-calendar": "^6.0.1"

package/src/DayRangeSelect/DayRangeSelect.d.ts

@@ -1,10 +1,10 @@
 import { DateRange } from "@trackunit/date-and-time-utils";
-import { CommonProps, PopoverPlacement } from "@trackunit/react-components";
+import { CommonProps, PopoverPlacement, Refable, type Styleable } from "@trackunit/react-components";
 import { Size } from "@trackunit/shared-utils";
 import { ReactElement } from "react";
 import { DayRangePickerProps } from "../DayPicker/DayRangePicker";
 import { SelectedDateRange, TemporalDirection, TemporalPeriod } from "./types";
-export type DayRangeSelectProps = CommonProps & {
+export type DayRangeSelectProps = CommonProps & Styleable & Refable<HTMLElement> & {
     /**
      * Whether the component is disabled.
      */
@@ -96,4 +96,4 @@ export type DayRangeSelectProps = CommonProps & {
  * ```
  * @param {DayRangeSelectProps} props - The props for the DayRangeSelect component
  */
-export declare const DayRangeSelect: ({ className, "data-testid": dataTestId, disabled, selectedDateRange, onRangeSelect, allowedDirection, initialDateRangeOptions, showDateRangeSearch, showResetButton, showCustomDateRangeOption, timezone, maxDaysInRange, disabledDays, size, fullWidth, actionButton, popoverPlacement, }: DayRangeSelectProps) => import("react").JSX.Element;
+export declare const DayRangeSelect: ({ className, "data-testid": dataTestId, style, ref, disabled, selectedDateRange, onRangeSelect, allowedDirection, initialDateRangeOptions, showDateRangeSearch, showResetButton, showCustomDateRangeOption, timezone, maxDaysInRange, disabledDays, size, fullWidth, actionButton, popoverPlacement, }: DayRangeSelectProps) => import("react").JSX.Element;

package/src/Timeline/TimelineElement.d.ts

@@ -1,8 +1,8 @@
-import { CommonProps, IconColors, type Styleable } from "@trackunit/react-components";
+import { CommonProps, IconColors, Refable, type Styleable } from "@trackunit/react-components";
 import { IconName } from "@trackunit/ui-icons";
 import { MouseEvent, ReactNode } from "react";
 type TimelineElementTimestampFormat = "time" | "date" | "date-time";
-interface TimeLineElementProps extends CommonProps, Styleable {
+interface TimeLineElementProps extends CommonProps, Styleable, Refable<HTMLDivElement> {
     date?: Date;
     timestampFormat?: TimelineElementTimestampFormat;
     header?: ReactNode;
@@ -28,5 +28,5 @@ interface TimeLineElementProps extends CommonProps, Styleable {
  * @param {TimeLineElementProps} props the props
  * @returns {ReactElement} component
  */
-export declare const TimelineElement: ({ date, children, className, style, "data-testid": dataTestId, header, onClick, actionButton, selected, customDot, lineStyle, hoverBehavior, timestampFormat, }: TimeLineElementProps) => import("react").JSX.Element;
+export declare const TimelineElement: ({ date, children, className, style, "data-testid": dataTestId, header, onClick, actionButton, selected, customDot, lineStyle, hoverBehavior, timestampFormat, ref, }: TimeLineElementProps) => import("react").JSX.Element;
 export {};