@trackunit/react-date-and-time-components 2.0.1 → 2.1.1

package/index.cjs.js

@@ -858,6 +858,7 @@ const cvaTimelineElementTime = cssClassVarianceUtilities.cvaMerge(["min-h-6", "c
     variants: {
         width: {
             large: "min-w-16",
+            medium: "min-w-11",
             small: "min-w-10",
         },
     },
@@ -925,6 +926,11 @@ const Timeline = ({ className, style, "data-testid": dataTestId, children, dateH
             }, 50); // Small delay to ensure DOM has updated
         });
     }, [isLoadingMore, middleChildren.length, visibleCount]);
+    const timestampWidth = childProps.timestampFormat === "date" || childProps.timestampFormat === "date-time"
+        ? "medium"
+        : hourCycle === "h12" || hourCycle === "h11"
+            ? "large"
+            : "small";
     // Reset visible count when toggling open/closed
     react.useEffect(() => {
         if (isOpen) {
@@ -933,7 +939,7 @@ const Timeline = ({ className, style, "data-testid": dataTestId, children, dateH
         }
     }, [isOpen]);
     const renderToggleButton = () => (jsxRuntime.jsxs("div", { className: cvaTimelineElement(), children: [childProps.date !== undefined ? (jsxRuntime.jsx("div", { className: cvaTimelineElementTime({
-                    width: hourCycle === "h12" || hourCycle === "h11" ? "large" : "small",
+                    width: timestampWidth,
                 }) })) : 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();
@@ -956,6 +962,7 @@ const Timeline = ({ className, style, "data-testid": dataTestId, children, dateH
                                 }, 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 }))] }));
 };
 
+const timeTemporalFormat = { selectFormat: "timeOnly", timeFormat: "short" };
 /**
  * TimelineElement - entry on a timeline - rendered with an icon on the timeline
  * - a date as the header and the children provided as body.
@@ -963,11 +970,22 @@ const Timeline = ({ className, style, "data-testid": dataTestId, children, dateH
  * @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, }) => {
+const TimelineElement = ({ date, children, className, style, "data-testid": dataTestId = "timeline-element", header, onClick, actionButton, selected = false, customDot, lineStyle = "solid", hoverBehavior = false, timestampFormat = "time", }) => {
     const [isHovered, setIsHovered] = react.useState(false);
     const { formatDate } = reactDateAndTimeHooks.useDateAndTime();
     const locale = reactDateAndTimeHooks.useLocale();
-    const formattedDate = date ? formatDate(date, { selectFormat: "timeOnly", timeFormat: "short" }) : null;
+    const { current } = reactDateAndTimeHooks.useTimezone();
+    const dateFormatter = react.useMemo(() => new Intl.DateTimeFormat(locale, {
+        day: "numeric",
+        month: "short",
+        timeZone: current.id,
+    }), [current.id, locale]);
+    const formattedDate = date
+        ? {
+            date: timestampFormat === "date" || timestampFormat === "date-time" ? dateFormatter.format(date) : null,
+            time: timestampFormat === "time" || timestampFormat === "date-time" ? formatDate(date, timeTemporalFormat) : null,
+        }
+        : null;
     const handleMouseEnter = () => {
         if (hoverBehavior) {
             setIsHovered(true);
@@ -978,13 +996,13 @@ 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 }) })] }), 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, style: style, children: [renderDate(formattedDate, locale, timestampFormat), jsxRuntime.jsxs("div", { className: cvaDotWrapper(), children: [renderDot(customDot, isHovered, selected), jsxRuntime.jsx("div", { className: cvaLine({ lineStyle }) })] }), jsxRuntime.jsxs("div", { className: "pb-2 pt-2", children: [renderHeader(header, dataTestId), renderChildren(children), renderActionButton(actionButton)] })] }));
 };
-const renderDate = (formattedDate, locale) => {
+const renderDate = (formattedDate, locale, timestampFormat) => {
     if (!formattedDate) {
         return null;
     }
-    return jsxRuntime.jsx("div", { className: "items-center pt-2", children: timelineElementTime(formattedDate, locale) });
+    return jsxRuntime.jsx("div", { className: "items-center pt-2", children: timelineElementTime(formattedDate, locale, timestampFormat) });
 };
 const renderDot = (customDot, isHovered, selected) => {
     return customDot?.name
@@ -1012,11 +1030,14 @@ const renderActionButton = (actionButton) => {
     }
     return (jsxRuntime.jsx("div", { className: "pt-2", children: jsxRuntime.jsx(reactComponents.Button, { prefix: jsxRuntime.jsx(reactComponents.Icon, { name: actionButton.iconName, size: "small" }), size: "small", variant: "secondary", children: actionButton.label }) }));
 };
-const timelineElementTime = (formattedDate, locale) => {
+const timelineElementTime = (formattedDate, locale, timestampFormat) => {
     const hourCycle = dateAndTimeUtils.getHourCycle(locale);
-    return (jsxRuntime.jsx(reactComponents.Text, { align: "right", className: cvaTimelineElementTime({
-            width: hourCycle === "h12" || hourCycle === "h11" ? "large" : "small",
-        }), size: "small", subtle: true, children: formattedDate }));
+    const width = timestampFormat === "time" ? (hourCycle === "h12" || hourCycle === "h11" ? "large" : "small") : "medium";
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [formattedDate.date ? (jsxRuntime.jsx(reactComponents.Text, { align: "right", className: cvaTimelineElementTime({
+                    width,
+                }), size: "small", subtle: true, children: formattedDate.date })) : null, formattedDate.time ? (jsxRuntime.jsx(reactComponents.Text, { align: "right", className: cvaTimelineElementTime({
+                    width,
+                }), size: "small", subtle: true, children: formattedDate.time })) : null] }));
 };
 const CircleIcon = ({ selected = false, 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" })] }));

package/index.esm.js

@@ -1,7 +1,7 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { registerTranslations, useNamespaceTranslation } from '@trackunit/i18n-library-translation';
 import { toDateUtil, formatDateUtil, isEqualUtil, timeSinceAuto, getHourCycle } from '@trackunit/date-and-time-utils';
-import { useLocale, useDateAndTime } from '@trackunit/react-date-and-time-hooks';
+import { useLocale, useDateAndTime, useTimezone } from '@trackunit/react-date-and-time-hooks';
 import { truthy, DateTimeFormat, nonNullable, objectKeys } from '@trackunit/shared-utils';
 import { useMemo, useCallback, useState, useEffect, useRef, Children, isValidElement } from 'react';
 import { twMerge } from 'tailwind-merge';
@@ -856,6 +856,7 @@ const cvaTimelineElementTime = cvaMerge(["min-h-6", "content-center"], {
     variants: {
         width: {
             large: "min-w-16",
+            medium: "min-w-11",
             small: "min-w-10",
         },
     },
@@ -923,6 +924,11 @@ const Timeline = ({ className, style, "data-testid": dataTestId, children, dateH
             }, 50); // Small delay to ensure DOM has updated
         });
     }, [isLoadingMore, middleChildren.length, visibleCount]);
+    const timestampWidth = childProps.timestampFormat === "date" || childProps.timestampFormat === "date-time"
+        ? "medium"
+        : hourCycle === "h12" || hourCycle === "h11"
+            ? "large"
+            : "small";
     // Reset visible count when toggling open/closed
     useEffect(() => {
         if (isOpen) {
@@ -931,7 +937,7 @@ const Timeline = ({ className, style, "data-testid": dataTestId, children, dateH
         }
     }, [isOpen]);
     const renderToggleButton = () => (jsxs("div", { className: cvaTimelineElement(), children: [childProps.date !== undefined ? (jsx("div", { className: cvaTimelineElementTime({
-                    width: hourCycle === "h12" || hourCycle === "h11" ? "large" : "small",
+                    width: timestampWidth,
                 }) })) : 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();
@@ -954,6 +960,7 @@ const Timeline = ({ className, style, "data-testid": dataTestId, children, dateH
                                 }, 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 }))] }));
 };
 
+const timeTemporalFormat = { selectFormat: "timeOnly", timeFormat: "short" };
 /**
  * TimelineElement - entry on a timeline - rendered with an icon on the timeline
  * - a date as the header and the children provided as body.
@@ -961,11 +968,22 @@ const Timeline = ({ className, style, "data-testid": dataTestId, children, dateH
  * @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, }) => {
+const TimelineElement = ({ date, children, className, style, "data-testid": dataTestId = "timeline-element", header, onClick, actionButton, selected = false, customDot, lineStyle = "solid", hoverBehavior = false, timestampFormat = "time", }) => {
     const [isHovered, setIsHovered] = useState(false);
     const { formatDate } = useDateAndTime();
     const locale = useLocale();
-    const formattedDate = date ? formatDate(date, { selectFormat: "timeOnly", timeFormat: "short" }) : null;
+    const { current } = useTimezone();
+    const dateFormatter = useMemo(() => new Intl.DateTimeFormat(locale, {
+        day: "numeric",
+        month: "short",
+        timeZone: current.id,
+    }), [current.id, locale]);
+    const formattedDate = date
+        ? {
+            date: timestampFormat === "date" || timestampFormat === "date-time" ? dateFormatter.format(date) : null,
+            time: timestampFormat === "time" || timestampFormat === "date-time" ? formatDate(date, timeTemporalFormat) : null,
+        }
+        : null;
     const handleMouseEnter = () => {
         if (hoverBehavior) {
             setIsHovered(true);
@@ -976,13 +994,13 @@ 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 }) })] }), 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, style: style, children: [renderDate(formattedDate, locale, timestampFormat), jsxs("div", { className: cvaDotWrapper(), children: [renderDot(customDot, isHovered, selected), jsx("div", { className: cvaLine({ lineStyle }) })] }), jsxs("div", { className: "pb-2 pt-2", children: [renderHeader(header, dataTestId), renderChildren(children), renderActionButton(actionButton)] })] }));
 };
-const renderDate = (formattedDate, locale) => {
+const renderDate = (formattedDate, locale, timestampFormat) => {
     if (!formattedDate) {
         return null;
     }
-    return jsx("div", { className: "items-center pt-2", children: timelineElementTime(formattedDate, locale) });
+    return jsx("div", { className: "items-center pt-2", children: timelineElementTime(formattedDate, locale, timestampFormat) });
 };
 const renderDot = (customDot, isHovered, selected) => {
     return customDot?.name
@@ -1010,11 +1028,14 @@ const renderActionButton = (actionButton) => {
     }
     return (jsx("div", { className: "pt-2", children: jsx(Button, { prefix: jsx(Icon, { name: actionButton.iconName, size: "small" }), size: "small", variant: "secondary", children: actionButton.label }) }));
 };
-const timelineElementTime = (formattedDate, locale) => {
+const timelineElementTime = (formattedDate, locale, timestampFormat) => {
     const hourCycle = getHourCycle(locale);
-    return (jsx(Text, { align: "right", className: cvaTimelineElementTime({
-            width: hourCycle === "h12" || hourCycle === "h11" ? "large" : "small",
-        }), size: "small", subtle: true, children: formattedDate }));
+    const width = timestampFormat === "time" ? (hourCycle === "h12" || hourCycle === "h11" ? "large" : "small") : "medium";
+    return (jsxs(Fragment, { children: [formattedDate.date ? (jsx(Text, { align: "right", className: cvaTimelineElementTime({
+                    width,
+                }), size: "small", subtle: true, children: formattedDate.date })) : null, formattedDate.time ? (jsx(Text, { align: "right", className: cvaTimelineElementTime({
+                    width,
+                }), size: "small", subtle: true, children: formattedDate.time })) : null] }));
 };
 const CircleIcon = ({ selected = false, 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" })] }));

package/package.json

@@ -1,20 +1,20 @@
 {
   "name": "@trackunit/react-date-and-time-components",
-  "version": "2.0.1",
+  "version": "2.1.1",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {
     "node": ">=24.x"
   },
   "dependencies": {
-    "@trackunit/react-components": "2.0.1",
-    "@trackunit/date-and-time-utils": "1.13.10",
-    "@trackunit/react-date-and-time-hooks": "2.0.1",
-    "@trackunit/css-class-variance-utilities": "1.13.10",
-    "@trackunit/ui-icons": "1.13.10",
-    "@trackunit/shared-utils": "1.15.10",
-    "@trackunit/i18n-library-translation": "2.0.1",
-    "@trackunit/react-form-components": "2.0.1",
+    "@trackunit/react-components": "2.1.0",
+    "@trackunit/date-and-time-utils": "1.13.12",
+    "@trackunit/react-date-and-time-hooks": "2.1.1",
+    "@trackunit/css-class-variance-utilities": "1.13.11",
+    "@trackunit/ui-icons": "1.13.11",
+    "@trackunit/shared-utils": "1.15.11",
+    "@trackunit/i18n-library-translation": "2.0.2",
+    "@trackunit/react-form-components": "2.1.1",
     "string-ts": "^2.0.0",
     "tailwind-merge": "^2.0.0",
     "react-calendar": "^6.0.0"

package/src/Timeline/Timeline.variants.d.ts

@@ -11,5 +11,5 @@ export declare const cvaToggleBtnIcon: (props?: ({
     rotated?: boolean | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export declare const cvaTimelineElementTime: (props?: ({
-    width?: "small" | "large" | null | undefined;
+    width?: "small" | "medium" | "large" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;

package/src/Timeline/TimelineElement.d.ts

@@ -1,8 +1,10 @@
 import { CommonProps, IconColors, 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 {
     date?: Date;
+    timestampFormat?: TimelineElementTimestampFormat;
     header?: ReactNode;
     children?: ReactNode;
     customDot?: {
@@ -26,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, }: TimeLineElementProps) => import("react/jsx-runtime").JSX.Element;
+export declare const TimelineElement: ({ date, children, className, style, "data-testid": dataTestId, header, onClick, actionButton, selected, customDot, lineStyle, hoverBehavior, timestampFormat, }: TimeLineElementProps) => import("react/jsx-runtime").JSX.Element;
 export {};