@trackunit/react-date-and-time-components 2.1.5 → 2.1.7-alpha-ecf53e535f3.0

package/index.cjs.js

@@ -96,7 +96,7 @@ const MS_PER_HOUR = 60 * 60 * 1000;
 /**
  * DateTime renders a locale-aware, formatted date and/or time inside a semantic `<time>` element.
  * It supports absolute formatting via `TemporalFormat` presets (e.g., `DateTimeFormat.DATE`, `DateTimeFormat.DATE_LONG_TIME`)
- * and relative "time ago" display via the `fromNow` prop. Timezone-aware formatting is handled automatically via the user's preferred timezone.
+ * and relative "time ago" display via the `fromNow` prop. Timezone-aware formatting is available through the `timezone` prop.
  *
  * ### When to use
  * Use DateTime whenever you need to display a date, time, or relative timestamp in the UI — for example, "Last seen 3 hours ago" or "Feb 17, 2026".
@@ -124,22 +124,20 @@ const MS_PER_HOUR = 60 * 60 * 1000;
  * ```
  * @param {DateTimeProps} props - The props for the DateTime component
  */
-const DateTime = ({ value, format, className, style, fromNow = false, withTitle = false, titleFormat, timezone: timezoneProp, "data-testid": dataTestId, subtle = false, ref, ...rest }) => {
+const DateTime = ({ value, format, className, style, fromNow = false, withTitle = false, titleFormat, timezone, "data-testid": dataTestId, subtle = false, ref, ...rest }) => {
     const { t } = useTranslation();
     const locale = reactDateAndTimeHooks.useLocale();
-    const { preferred: preferredTimezone } = reactDateAndTimeHooks.useTimezone();
-    const timezone = timezoneProp ?? preferredTimezone;
     const nowDate = react.useMemo(() => new Date(), []);
     const date = sharedUtils.truthy(value) ? dateAndTimeUtils.toDateUtil(value) : nowDate;
-    const newDateTime = dateAndTimeUtils.formatDateUtil(date, format, timezone.id, locale);
-    const titleDateTime = withTitle ? dateAndTimeUtils.formatDateUtil(date, titleFormat, timezone.id, locale) : undefined;
+    const newDateTime = dateAndTimeUtils.formatDateUtil(date, format, timezone?.id, locale);
+    const titleDateTime = withTitle ? dateAndTimeUtils.formatDateUtil(date, titleFormat, timezone?.id, locale) : undefined;
     const getTimeSince = react.useCallback((from, to) => {
         const same = dateAndTimeUtils.isEqualUtil(from, to);
         if (same) {
             return t("dateTime.instant.now");
         }
-        return dateAndTimeUtils.timeSinceAuto(from, to, timezone.id, locale);
-    }, [locale, t, timezone.id]);
+        return dateAndTimeUtils.timeSinceAuto(from, to, timezone?.id, locale);
+    }, [locale, t, timezone?.id]);
     const dateValue = react.useMemo(() => {
         return fromNow ? getTimeSince(date, nowDate) : newDateTime;
     }, [date, fromNow, getTimeSince, newDateTime, nowDate]);
@@ -268,7 +266,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, style, classNameCalendar, cancelButtonLabel, onClose, ref, }) => {
+const DayRangePicker = ({ onRangeSelect, selectedDays, disabledDays, "data-testid": dataTestId, language, className, style, classNameCalendar, timezone, cancelButtonLabel, onClose, ref, }) => {
     const [newRange, setNewRange] = react.useState(selectedDays ?? { start: undefined, end: undefined });
     const [t] = useTranslation();
     const { subtract } = reactDateAndTimeHooks.useDateAndTime();
@@ -690,7 +688,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, showCustomDateRangeOption = true, maxDaysInRange, disabledDays, size = "medium", fullWidth = false, actionButton, popoverPlacement = "bottom-start", }) => {
+const DayRangeSelect = ({ className, "data-testid": dataTestId, disabled = false, selectedDateRange, onRangeSelect, allowedDirection = undefined, initialDateRangeOptions, showDateRangeSearch = true, showCustomDateRangeOption = true, timezone, maxDaysInRange, disabledDays, size = "medium", fullWidth = false, actionButton, popoverPlacement = "bottom-start", }) => {
     const [t] = useTranslation();
     const parseTemporalPeriodFromText = useParseTemporalPeriodFromText();
     const filterTemporalPeriodsInRange = useFilterTemporalPeriodsInRange();
@@ -792,7 +790,7 @@ const DayRangeSelect = ({ className, "data-testid": dataTestId, disabled = false
                                     start: dateRange.start ?? undefined,
                                     end: dateRange.end ?? undefined,
                                 }
-                                : undefined, closeMenu), selectedDays: currentSelectedRange?.dateRange }) }));
+                                : undefined, closeMenu), selectedDays: currentSelectedRange?.dateRange, timezone: timezone }) }));
                 } })] }));
 };
 

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, useTimezone, 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';
@@ -94,7 +94,7 @@ const MS_PER_HOUR = 60 * 60 * 1000;
 /**
  * DateTime renders a locale-aware, formatted date and/or time inside a semantic `<time>` element.
  * It supports absolute formatting via `TemporalFormat` presets (e.g., `DateTimeFormat.DATE`, `DateTimeFormat.DATE_LONG_TIME`)
- * and relative "time ago" display via the `fromNow` prop. Timezone-aware formatting is handled automatically via the user's preferred timezone.
+ * and relative "time ago" display via the `fromNow` prop. Timezone-aware formatting is available through the `timezone` prop.
  *
  * ### When to use
  * Use DateTime whenever you need to display a date, time, or relative timestamp in the UI — for example, "Last seen 3 hours ago" or "Feb 17, 2026".
@@ -122,22 +122,20 @@ const MS_PER_HOUR = 60 * 60 * 1000;
  * ```
  * @param {DateTimeProps} props - The props for the DateTime component
  */
-const DateTime = ({ value, format, className, style, fromNow = false, withTitle = false, titleFormat, timezone: timezoneProp, "data-testid": dataTestId, subtle = false, ref, ...rest }) => {
+const DateTime = ({ value, format, className, style, fromNow = false, withTitle = false, titleFormat, timezone, "data-testid": dataTestId, subtle = false, ref, ...rest }) => {
     const { t } = useTranslation();
     const locale = useLocale();
-    const { preferred: preferredTimezone } = useTimezone();
-    const timezone = timezoneProp ?? preferredTimezone;
     const nowDate = useMemo(() => new Date(), []);
     const date = truthy(value) ? toDateUtil(value) : nowDate;
-    const newDateTime = formatDateUtil(date, format, timezone.id, locale);
-    const titleDateTime = withTitle ? formatDateUtil(date, titleFormat, timezone.id, locale) : undefined;
+    const newDateTime = formatDateUtil(date, format, timezone?.id, locale);
+    const titleDateTime = withTitle ? formatDateUtil(date, titleFormat, timezone?.id, locale) : undefined;
     const getTimeSince = useCallback((from, to) => {
         const same = isEqualUtil(from, to);
         if (same) {
             return t("dateTime.instant.now");
         }
-        return timeSinceAuto(from, to, timezone.id, locale);
-    }, [locale, t, timezone.id]);
+        return timeSinceAuto(from, to, timezone?.id, locale);
+    }, [locale, t, timezone?.id]);
     const dateValue = useMemo(() => {
         return fromNow ? getTimeSince(date, nowDate) : newDateTime;
     }, [date, fromNow, getTimeSince, newDateTime, nowDate]);
@@ -266,7 +264,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, style, classNameCalendar, cancelButtonLabel, onClose, ref, }) => {
+const DayRangePicker = ({ onRangeSelect, selectedDays, disabledDays, "data-testid": dataTestId, language, className, style, classNameCalendar, timezone, cancelButtonLabel, onClose, ref, }) => {
     const [newRange, setNewRange] = useState(selectedDays ?? { start: undefined, end: undefined });
     const [t] = useTranslation();
     const { subtract } = useDateAndTime();
@@ -688,7 +686,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, showCustomDateRangeOption = true, maxDaysInRange, disabledDays, size = "medium", fullWidth = false, actionButton, popoverPlacement = "bottom-start", }) => {
+const DayRangeSelect = ({ className, "data-testid": dataTestId, disabled = false, selectedDateRange, onRangeSelect, allowedDirection = undefined, initialDateRangeOptions, showDateRangeSearch = true, showCustomDateRangeOption = true, timezone, maxDaysInRange, disabledDays, size = "medium", fullWidth = false, actionButton, popoverPlacement = "bottom-start", }) => {
     const [t] = useTranslation();
     const parseTemporalPeriodFromText = useParseTemporalPeriodFromText();
     const filterTemporalPeriodsInRange = useFilterTemporalPeriodsInRange();
@@ -790,7 +788,7 @@ const DayRangeSelect = ({ className, "data-testid": dataTestId, disabled = false
                                     start: dateRange.start ?? undefined,
                                     end: dateRange.end ?? undefined,
                                 }
-                                : undefined, closeMenu), selectedDays: currentSelectedRange?.dateRange }) }));
+                                : undefined, closeMenu), selectedDays: currentSelectedRange?.dateRange, timezone: timezone }) }));
                 } })] }));
 };
 

package/package.json

@@ -1,20 +1,20 @@
 {
   "name": "@trackunit/react-date-and-time-components",
-  "version": "2.1.5",
+  "version": "2.1.7-alpha-ecf53e535f3.0",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {
     "node": ">=24.x"
   },
   "dependencies": {
-    "@trackunit/react-components": "2.1.3",
-    "@trackunit/date-and-time-utils": "1.13.14",
-    "@trackunit/react-date-and-time-hooks": "2.1.4",
-    "@trackunit/css-class-variance-utilities": "1.13.13",
-    "@trackunit/ui-icons": "1.13.14",
-    "@trackunit/shared-utils": "1.15.13",
-    "@trackunit/i18n-library-translation": "2.0.5",
-    "@trackunit/react-form-components": "2.1.4",
+    "@trackunit/react-components": "2.1.5-alpha-ecf53e535f3.0",
+    "@trackunit/date-and-time-utils": "1.13.16-alpha-ecf53e535f3.0",
+    "@trackunit/react-date-and-time-hooks": "2.1.6-alpha-ecf53e535f3.0",
+    "@trackunit/css-class-variance-utilities": "1.13.15-alpha-ecf53e535f3.0",
+    "@trackunit/ui-icons": "1.13.16-alpha-ecf53e535f3.0",
+    "@trackunit/shared-utils": "1.15.15-alpha-ecf53e535f3.0",
+    "@trackunit/i18n-library-translation": "2.0.7-alpha-ecf53e535f3.0",
+    "@trackunit/react-form-components": "2.1.6-alpha-ecf53e535f3.0",
     "string-ts": "^2.0.0",
     "tailwind-merge": "^2.0.0",
     "react-calendar": "^6.0.0"

package/src/DayPicker/DayRangePicker.d.ts

@@ -1,6 +1,7 @@
 import { CommonProps, Refable, type Styleable } from "@trackunit/react-components";
 import { DateRange } from "@trackunit/date-and-time-utils";
 import { ReactElement } from "react";
+import { TimeZone } from "../TimeZone";
 import { DisabledDaysMatcher } from "./DayPicker";
 export interface DayRangePickerProps extends CommonProps, Refable<HTMLDivElement>, Styleable {
     /**
@@ -19,6 +20,10 @@ export interface DayRangePickerProps extends CommonProps, Refable<HTMLDivElement
      * Set the language
      */
     language: string;
+    /**
+     * Shown time ranges will take timezone into consideration
+     */
+    timezone?: TimeZone;
     /**
      * The label for the cancel button
      */
@@ -59,4 +64,4 @@ export interface DayRangePickerProps extends CommonProps, Refable<HTMLDivElement
  * @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, style, classNameCalendar, cancelButtonLabel, onClose, ref, }: DayRangePickerProps) => ReactElement;
+export declare const DayRangePicker: ({ onRangeSelect, selectedDays, disabledDays, "data-testid": dataTestId, language, className, style, classNameCalendar, timezone, cancelButtonLabel, onClose, ref, }: DayRangePickerProps) => ReactElement;

package/src/DayRangeSelect/DayRangeSelect.d.ts

@@ -35,6 +35,10 @@ export type DayRangeSelectProps = CommonProps & {
      * Whether to show the custom date range option with a calendar picker.
      */
     showCustomDateRangeOption?: boolean;
+    /**
+     * The timezone for the date range picker.
+     */
+    timezone?: DayRangePickerProps["timezone"];
     /**
      * The maximum amount of days that can be selected
      */
@@ -88,4 +92,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, showCustomDateRangeOption, maxDaysInRange, disabledDays, size, fullWidth, actionButton, popoverPlacement, }: DayRangeSelectProps) => import("react/jsx-runtime").JSX.Element;
+export declare const DayRangeSelect: ({ className, "data-testid": dataTestId, disabled, selectedDateRange, onRangeSelect, allowedDirection, initialDateRangeOptions, showDateRangeSearch, showCustomDateRangeOption, timezone, maxDaysInRange, disabledDays, size, fullWidth, actionButton, popoverPlacement, }: DayRangeSelectProps) => import("react/jsx-runtime").JSX.Element;

package/src/dateTime/DateTime.d.ts

@@ -28,27 +28,22 @@ export interface DateTimeProps extends CommonProps, Refable<HTMLTimeElement>, St
      * Custom `TemporalFormat` for the hover `title` attribute. Only used when `withTitle` is true.
      */
     titleFormat?: TemporalFormat;
+    /**
+     * A `TimeZone` object to format the date in a specific timezone rather than the user's local timezone.
+     */
+    timezone?: TimeZone;
     /**
      * When true, renders the text in a muted neutral color for less visual emphasis.
      *
      * @default false
      */
     subtle?: boolean;
-    /**
-     * Explicit timezone override. When provided, this takes precedence over the automatically resolved
-     * timezone from the user's preference context. Useful for showing a date in a fixed timezone
-     * regardless of user settings (e.g. a contract's original timezone).
-     *
-     * In most cases you do not need this — the component resolves the correct timezone automatically
-     * via `AssetTimezoneProvider` and user preference context.
-     */
-    timezone?: TimeZone;
 }
 export declare const MS_PER_HOUR: number;
 /**
  * DateTime renders a locale-aware, formatted date and/or time inside a semantic `<time>` element.
  * It supports absolute formatting via `TemporalFormat` presets (e.g., `DateTimeFormat.DATE`, `DateTimeFormat.DATE_LONG_TIME`)
- * and relative "time ago" display via the `fromNow` prop. Timezone-aware formatting is handled automatically via the user's preferred timezone.
+ * and relative "time ago" display via the `fromNow` prop. Timezone-aware formatting is available through the `timezone` prop.
  *
  * ### When to use
  * Use DateTime whenever you need to display a date, time, or relative timestamp in the UI — for example, "Last seen 3 hours ago" or "Feb 17, 2026".
@@ -76,4 +71,4 @@ export declare const MS_PER_HOUR: number;
  * ```
  * @param {DateTimeProps} props - The props for the DateTime component
  */
-export declare const DateTime: ({ value, format, className, style, fromNow, withTitle, titleFormat, timezone: timezoneProp, "data-testid": dataTestId, subtle, ref, ...rest }: DateTimeProps) => import("react/jsx-runtime").JSX.Element;
+export declare const DateTime: ({ value, format, className, style, fromNow, withTitle, titleFormat, timezone, "data-testid": dataTestId, subtle, ref, ...rest }: DateTimeProps) => import("react/jsx-runtime").JSX.Element;