@trackunit/react-form-components 1.22.16 → 1.22.18

package/index.cjs.js

@@ -623,6 +623,50 @@ const dateFieldStoredValueToDisplayString = (stored, locale) => {
     return stored;
 };
 
+/**
+ * Converts a Date instant to the canonical YYYY-MM-DD for a specific IANA time zone.
+ * This preserves the calendar day the user selected in their local zone.
+ */
+const dateToCalendarDayString = ({ date, timeZoneId }) => {
+    if (!date || Number.isNaN(date.getTime()))
+        return "";
+    const resolvedTimeZoneId = timeZoneId ?? Intl.DateTimeFormat().resolvedOptions().timeZone;
+    return dateAndTimeUtils.toZonedDateTimeUtil(date, resolvedTimeZoneId).toPlainDate().toString();
+};
+/**
+ * Clamps a date to [minDate, maxDate] by comparing calendar days in a specific timezone.
+ * Returns the original `date` when it's in range, or the relevant boundary date when out of range.
+ */
+const clampDateToCalendarDayRange = ({ date, minDate, maxDate, timeZoneId, }) => {
+    if (date === null || date === undefined)
+        return null;
+    const day = dateToCalendarDayString({ date, timeZoneId });
+    if (day === "")
+        return null;
+    if (minDate !== undefined) {
+        const minDay = dateToCalendarDayString({ date: minDate, timeZoneId });
+        if (minDay !== "" && day < minDay)
+            return minDate;
+    }
+    if (maxDate !== undefined) {
+        const maxDay = dateToCalendarDayString({ date: maxDate, timeZoneId });
+        if (maxDay !== "" && day > maxDay)
+            return maxDate;
+    }
+    return date;
+};
+/**
+ * Returns true when a date falls outside [minDate, maxDate] by calendar day in a specific timezone.
+ */
+const isCalendarDayOutOfRange = ({ date, minDate, maxDate, timeZoneId, }) => {
+    if (!date)
+        return false;
+    const clamped = clampDateToCalendarDayRange({ date, minDate, maxDate, timeZoneId });
+    if (!clamped)
+        return false;
+    return clamped.getTime() !== date.getTime();
+};
+
 function parseToDate(v) {
     if (v === undefined || v === "")
         return undefined;
@@ -639,20 +683,6 @@ function parseToDate(v) {
     const fallback = new Date(str);
     return Number.isNaN(fallback.getTime()) ? undefined : fallback;
 }
-function startOfDayMs(d) {
-    return dateAndTimeUtils.toDateUtil(dateAndTimeUtils.startOfDayUtil(d)).getTime();
-}
-/** Clamp a date to [minDate, maxDate]; returns the same date if in range or no bounds. */
-function clampToRange(date, minDate, maxDate) {
-    if (date === null || date === undefined)
-        return null;
-    const dayStart = startOfDayMs(date);
-    if (minDate !== undefined && dayStart < startOfDayMs(minDate))
-        return minDate;
-    if (maxDate !== undefined && dayStart > startOfDayMs(maxDate))
-        return maxDate;
-    return date;
-}
 /**
  * A wrapper around BaseInput with a pop-up day picker using the same calendar UI as DayPicker.
  *
@@ -662,8 +692,9 @@ function clampToRange(date, minDate, maxDate) {
  * NOTE: If shown with a label, please use the `DateField` component instead.
  */
 const DateBaseInput = ({ min, max, defaultValue, value, ref, onChange, suffix: suffixProp, "data-testid": dataTestId, ...rest }) => {
+    const timeZoneId = Intl.DateTimeFormat().resolvedOptions().timeZone;
     const isControlled = value !== undefined;
-    const [internalValue, setInternalValue] = react.useState(() => dateAndTimeUtils.dateToYYYYMMDDUtil(parseToDate(defaultValue)));
+    const [internalValue, setInternalValue] = react.useState(() => dateToCalendarDayString({ date: parseToDate(defaultValue), timeZoneId }));
     const [pendingDate, setPendingDate] = react.useState(null);
     const [t, i18n] = useTranslation();
     const locale = i18n.resolvedLanguage ?? i18n.language;
@@ -671,7 +702,7 @@ const DateBaseInput = ({ min, max, defaultValue, value, ref, onChange, suffix: s
     const resolvedValue = isControlled
         ? typeof value === "string"
             ? dateFieldStoredValueToDisplayString(value, locale)
-            : dateFieldStoredValueToDisplayString(dateAndTimeUtils.dateToYYYYMMDDUtil(parseToDate(value)), locale)
+            : dateFieldStoredValueToDisplayString(dateToCalendarDayString({ date: parseToDate(value), timeZoneId }), locale)
         : dateFieldStoredValueToDisplayString(internalValue, locale);
     const selectedDate = isControlled && typeof value === "string"
         ? (dateAndTimeUtils.parseYYYYMMDDUtil(value) ?? undefined)
@@ -686,13 +717,8 @@ const DateBaseInput = ({ min, max, defaultValue, value, ref, onChange, suffix: s
             return false;
         const minDate = parseToDate(min);
         const maxDate = parseToDate(max);
-        const dayStart = startOfDayMs(date);
-        if (minDate !== undefined && dayStart < startOfDayMs(minDate))
-            return true;
-        if (maxDate !== undefined && dayStart > startOfDayMs(maxDate))
-            return true;
-        return false;
-    }, [min, max]);
+        return isCalendarDayOutOfRange({ date, minDate, maxDate, timeZoneId });
+    }, [min, max, timeZoneId]);
     const handleCalendarChange = react.useCallback((next) => {
         setPendingDate(next);
     }, []);
@@ -709,21 +735,21 @@ const DateBaseInput = ({ min, max, defaultValue, value, ref, onChange, suffix: s
     const handleApply = react.useCallback((closePopover) => {
         const minDate = parseToDate(min);
         const maxDate = parseToDate(max);
-        const clamped = clampToRange(pendingDate, minDate, maxDate);
-        const str = clamped ? dateAndTimeUtils.dateToYYYYMMDDUtil(clamped) : "";
+        const clamped = clampDateToCalendarDayRange({ date: pendingDate, minDate, maxDate, timeZoneId });
+        const str = clamped ? dateToCalendarDayString({ date: clamped, timeZoneId }) : "";
         if (!isControlled)
             setInternalValue(str);
         onChange?.(createInputChangeEvent(str, inputRef.current));
         closePopover();
-    }, [isControlled, min, max, onChange, pendingDate]);
+    }, [isControlled, min, max, onChange, pendingDate, timeZoneId]);
     const handleInputChange = react.useCallback((e) => {
         const raw = e.target.value;
         const parsed = parseDateFieldInputForChange(raw, locale);
         const minDate = parseToDate(min);
         const maxDate = parseToDate(max);
         if (parsed !== null) {
-            const clamped = clampToRange(parsed, minDate, maxDate);
-            const str = clamped ? dateAndTimeUtils.dateToYYYYMMDDUtil(clamped) : "";
+            const clamped = clampDateToCalendarDayRange({ date: parsed, minDate, maxDate, timeZoneId });
+            const str = clamped ? dateToCalendarDayString({ date: clamped, timeZoneId }) : "";
             if (!isControlled)
                 setInternalValue(str);
             onChange?.(createInputChangeEvent(str, inputRef.current));
@@ -733,7 +759,7 @@ const DateBaseInput = ({ min, max, defaultValue, value, ref, onChange, suffix: s
                 setInternalValue(raw);
             onChange?.(e);
         }
-    }, [isControlled, locale, min, max, onChange]);
+    }, [isControlled, locale, min, max, onChange, timeZoneId]);
     return (jsxRuntime.jsxs(reactComponents.Popover, { onOpenStateChange: open => open && syncPendingFromValue(), placement: "bottom-start", children: [jsxRuntime.jsx(reactComponents.PopoverTrigger, { children: jsxRuntime.jsx("div", { className: tailwindMerge.twMerge("flex w-full min-w-0 cursor-pointer items-center", (Boolean(rest.disabled) || Boolean(rest.readOnly)) && "pointer-events-none"), children: jsxRuntime.jsx(BaseInput, { ...rest, "aria-readonly": true, className: tailwindMerge.twMerge("w-full min-w-0", rest.className), "data-testid": dataTestId ? `${dataTestId}-input` : undefined, onChange: handleInputChange, placeholder: rest.placeholder ?? t("dateField.placeholder"), ref: inputRef, suffix: suffixProp ?? (jsxRuntime.jsx(reactComponents.Icon, { "aria-label": undefined, className: Boolean(rest.disabled) || Boolean(rest.readOnly) ? "text-neutral-500" : undefined, "data-testid": dataTestId ? `${dataTestId}-calendar` : "calendar", name: "Calendar", size: "medium", type: "solid" })), type: "text", value: resolvedValue }) }) }), jsxRuntime.jsx(reactComponents.PopoverContent, { children: closePopover => {
                     const displayDate = pendingDate ?? selectedDate ?? null;
                     return (jsxRuntime.jsxs("div", { className: tailwindMerge.twMerge("flex w-min flex-col overflow-hidden rounded-md border border-neutral-300 bg-white p-0"), children: [jsxRuntime.jsx(ReactCalendar, { allowPartialRange: true, className: tailwindMerge.twMerge("custom-day-picker", "range-picker", "p-0"), defaultActiveStartDate: displayDate ?? undefined, defaultView: "month", locale: locale, onChange: val => {

package/index.esm.js

@@ -1,6 +1,6 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { registerTranslations, useNamespaceTranslation, NamespaceTrans } from '@trackunit/i18n-library-translation';
-import { parseYYYYMMDDUtil, formatShortDateUtil, parseValidDate, toDateUtil, startOfDayUtil, dateToYYYYMMDDUtil } from '@trackunit/date-and-time-utils';
+import { parseYYYYMMDDUtil, formatShortDateUtil, parseValidDate, toDateUtil, startOfDayUtil, toZonedDateTimeUtil } from '@trackunit/date-and-time-utils';
 import { IconButton, Icon, Tooltip, Popover, PopoverTrigger, PopoverContent, Button, cvaMenu, cvaMenuList, Tag, useIsTextTruncated, ZStack, MenuItem, useMeasure, useDebounce, useMergeRefs, Spinner, useScrollBlock, Text, Heading, useIsFirstRender } from '@trackunit/react-components';
 import { useRef, useEffect, useImperativeHandle, useState, useCallback, cloneElement, isValidElement, useLayoutEffect, useMemo, useReducer, createContext, useContext, useId } from 'react';
 import ReactCalendar from 'react-calendar';
@@ -622,6 +622,50 @@ const dateFieldStoredValueToDisplayString = (stored, locale) => {
     return stored;
 };
 
+/**
+ * Converts a Date instant to the canonical YYYY-MM-DD for a specific IANA time zone.
+ * This preserves the calendar day the user selected in their local zone.
+ */
+const dateToCalendarDayString = ({ date, timeZoneId }) => {
+    if (!date || Number.isNaN(date.getTime()))
+        return "";
+    const resolvedTimeZoneId = timeZoneId ?? Intl.DateTimeFormat().resolvedOptions().timeZone;
+    return toZonedDateTimeUtil(date, resolvedTimeZoneId).toPlainDate().toString();
+};
+/**
+ * Clamps a date to [minDate, maxDate] by comparing calendar days in a specific timezone.
+ * Returns the original `date` when it's in range, or the relevant boundary date when out of range.
+ */
+const clampDateToCalendarDayRange = ({ date, minDate, maxDate, timeZoneId, }) => {
+    if (date === null || date === undefined)
+        return null;
+    const day = dateToCalendarDayString({ date, timeZoneId });
+    if (day === "")
+        return null;
+    if (minDate !== undefined) {
+        const minDay = dateToCalendarDayString({ date: minDate, timeZoneId });
+        if (minDay !== "" && day < minDay)
+            return minDate;
+    }
+    if (maxDate !== undefined) {
+        const maxDay = dateToCalendarDayString({ date: maxDate, timeZoneId });
+        if (maxDay !== "" && day > maxDay)
+            return maxDate;
+    }
+    return date;
+};
+/**
+ * Returns true when a date falls outside [minDate, maxDate] by calendar day in a specific timezone.
+ */
+const isCalendarDayOutOfRange = ({ date, minDate, maxDate, timeZoneId, }) => {
+    if (!date)
+        return false;
+    const clamped = clampDateToCalendarDayRange({ date, minDate, maxDate, timeZoneId });
+    if (!clamped)
+        return false;
+    return clamped.getTime() !== date.getTime();
+};
+
 function parseToDate(v) {
     if (v === undefined || v === "")
         return undefined;
@@ -638,20 +682,6 @@ function parseToDate(v) {
     const fallback = new Date(str);
     return Number.isNaN(fallback.getTime()) ? undefined : fallback;
 }
-function startOfDayMs(d) {
-    return toDateUtil(startOfDayUtil(d)).getTime();
-}
-/** Clamp a date to [minDate, maxDate]; returns the same date if in range or no bounds. */
-function clampToRange(date, minDate, maxDate) {
-    if (date === null || date === undefined)
-        return null;
-    const dayStart = startOfDayMs(date);
-    if (minDate !== undefined && dayStart < startOfDayMs(minDate))
-        return minDate;
-    if (maxDate !== undefined && dayStart > startOfDayMs(maxDate))
-        return maxDate;
-    return date;
-}
 /**
  * A wrapper around BaseInput with a pop-up day picker using the same calendar UI as DayPicker.
  *
@@ -661,8 +691,9 @@ function clampToRange(date, minDate, maxDate) {
  * NOTE: If shown with a label, please use the `DateField` component instead.
  */
 const DateBaseInput = ({ min, max, defaultValue, value, ref, onChange, suffix: suffixProp, "data-testid": dataTestId, ...rest }) => {
+    const timeZoneId = Intl.DateTimeFormat().resolvedOptions().timeZone;
     const isControlled = value !== undefined;
-    const [internalValue, setInternalValue] = useState(() => dateToYYYYMMDDUtil(parseToDate(defaultValue)));
+    const [internalValue, setInternalValue] = useState(() => dateToCalendarDayString({ date: parseToDate(defaultValue), timeZoneId }));
     const [pendingDate, setPendingDate] = useState(null);
     const [t, i18n] = useTranslation();
     const locale = i18n.resolvedLanguage ?? i18n.language;
@@ -670,7 +701,7 @@ const DateBaseInput = ({ min, max, defaultValue, value, ref, onChange, suffix: s
     const resolvedValue = isControlled
         ? typeof value === "string"
             ? dateFieldStoredValueToDisplayString(value, locale)
-            : dateFieldStoredValueToDisplayString(dateToYYYYMMDDUtil(parseToDate(value)), locale)
+            : dateFieldStoredValueToDisplayString(dateToCalendarDayString({ date: parseToDate(value), timeZoneId }), locale)
         : dateFieldStoredValueToDisplayString(internalValue, locale);
     const selectedDate = isControlled && typeof value === "string"
         ? (parseYYYYMMDDUtil(value) ?? undefined)
@@ -685,13 +716,8 @@ const DateBaseInput = ({ min, max, defaultValue, value, ref, onChange, suffix: s
             return false;
         const minDate = parseToDate(min);
         const maxDate = parseToDate(max);
-        const dayStart = startOfDayMs(date);
-        if (minDate !== undefined && dayStart < startOfDayMs(minDate))
-            return true;
-        if (maxDate !== undefined && dayStart > startOfDayMs(maxDate))
-            return true;
-        return false;
-    }, [min, max]);
+        return isCalendarDayOutOfRange({ date, minDate, maxDate, timeZoneId });
+    }, [min, max, timeZoneId]);
     const handleCalendarChange = useCallback((next) => {
         setPendingDate(next);
     }, []);
@@ -708,21 +734,21 @@ const DateBaseInput = ({ min, max, defaultValue, value, ref, onChange, suffix: s
     const handleApply = useCallback((closePopover) => {
         const minDate = parseToDate(min);
         const maxDate = parseToDate(max);
-        const clamped = clampToRange(pendingDate, minDate, maxDate);
-        const str = clamped ? dateToYYYYMMDDUtil(clamped) : "";
+        const clamped = clampDateToCalendarDayRange({ date: pendingDate, minDate, maxDate, timeZoneId });
+        const str = clamped ? dateToCalendarDayString({ date: clamped, timeZoneId }) : "";
         if (!isControlled)
             setInternalValue(str);
         onChange?.(createInputChangeEvent(str, inputRef.current));
         closePopover();
-    }, [isControlled, min, max, onChange, pendingDate]);
+    }, [isControlled, min, max, onChange, pendingDate, timeZoneId]);
     const handleInputChange = useCallback((e) => {
         const raw = e.target.value;
         const parsed = parseDateFieldInputForChange(raw, locale);
         const minDate = parseToDate(min);
         const maxDate = parseToDate(max);
         if (parsed !== null) {
-            const clamped = clampToRange(parsed, minDate, maxDate);
-            const str = clamped ? dateToYYYYMMDDUtil(clamped) : "";
+            const clamped = clampDateToCalendarDayRange({ date: parsed, minDate, maxDate, timeZoneId });
+            const str = clamped ? dateToCalendarDayString({ date: clamped, timeZoneId }) : "";
             if (!isControlled)
                 setInternalValue(str);
             onChange?.(createInputChangeEvent(str, inputRef.current));
@@ -732,7 +758,7 @@ const DateBaseInput = ({ min, max, defaultValue, value, ref, onChange, suffix: s
                 setInternalValue(raw);
             onChange?.(e);
         }
-    }, [isControlled, locale, min, max, onChange]);
+    }, [isControlled, locale, min, max, onChange, timeZoneId]);
     return (jsxs(Popover, { onOpenStateChange: open => open && syncPendingFromValue(), placement: "bottom-start", children: [jsx(PopoverTrigger, { children: jsx("div", { className: twMerge("flex w-full min-w-0 cursor-pointer items-center", (Boolean(rest.disabled) || Boolean(rest.readOnly)) && "pointer-events-none"), children: jsx(BaseInput, { ...rest, "aria-readonly": true, className: twMerge("w-full min-w-0", rest.className), "data-testid": dataTestId ? `${dataTestId}-input` : undefined, onChange: handleInputChange, placeholder: rest.placeholder ?? t("dateField.placeholder"), ref: inputRef, suffix: suffixProp ?? (jsx(Icon, { "aria-label": undefined, className: Boolean(rest.disabled) || Boolean(rest.readOnly) ? "text-neutral-500" : undefined, "data-testid": dataTestId ? `${dataTestId}-calendar` : "calendar", name: "Calendar", size: "medium", type: "solid" })), type: "text", value: resolvedValue }) }) }), jsx(PopoverContent, { children: closePopover => {
                     const displayDate = pendingDate ?? selectedDate ?? null;
                     return (jsxs("div", { className: twMerge("flex w-min flex-col overflow-hidden rounded-md border border-neutral-300 bg-white p-0"), children: [jsx(ReactCalendar, { allowPartialRange: true, className: twMerge("custom-day-picker", "range-picker", "p-0"), defaultActiveStartDate: displayDate ?? undefined, defaultView: "month", locale: locale, onChange: val => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/react-form-components",
-  "version": "1.22.16",
+  "version": "1.22.18",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {
@@ -9,17 +9,17 @@
   "dependencies": {
     "react-calendar": "^6.0.0",
     "react-select": "^5.10.2",
-    "@trackunit/date-and-time-utils": "1.11.109",
+    "@trackunit/date-and-time-utils": "1.11.111",
     "usehooks-ts": "^3.1.0",
     "libphonenumber-js": "^1.12.22",
     "zod": "^3.25.76",
     "tailwind-merge": "^2.0.0",
-    "@trackunit/css-class-variance-utilities": "1.11.106",
-    "@trackunit/react-components": "1.22.12",
-    "@trackunit/ui-icons": "1.11.102",
-    "@trackunit/shared-utils": "1.13.106",
-    "@trackunit/ui-design-tokens": "1.11.103",
-    "@trackunit/i18n-library-translation": "1.18.12",
+    "@trackunit/css-class-variance-utilities": "1.11.108",
+    "@trackunit/react-components": "1.22.14",
+    "@trackunit/ui-icons": "1.11.104",
+    "@trackunit/shared-utils": "1.13.108",
+    "@trackunit/ui-design-tokens": "1.11.105",
+    "@trackunit/i18n-library-translation": "1.18.14",
     "string-ts": "^2.0.0",
     "es-toolkit": "^1.39.10"
   },

package/src/components/DateField/DateBaseInput/dateToCalendarDayString.d.ts

@@ -0,0 +1,25 @@
+interface DateToCalendarDayStringParams {
+    readonly date: Date | undefined;
+    readonly timeZoneId: string | undefined;
+}
+/**
+ * Converts a Date instant to the canonical YYYY-MM-DD for a specific IANA time zone.
+ * This preserves the calendar day the user selected in their local zone.
+ */
+export declare const dateToCalendarDayString: ({ date, timeZoneId }: DateToCalendarDayStringParams) => string;
+interface DateRangeByCalendarDayParams {
+    readonly date: Date | null | undefined;
+    readonly minDate: Date | undefined;
+    readonly maxDate: Date | undefined;
+    readonly timeZoneId: string | undefined;
+}
+/**
+ * Clamps a date to [minDate, maxDate] by comparing calendar days in a specific timezone.
+ * Returns the original `date` when it's in range, or the relevant boundary date when out of range.
+ */
+export declare const clampDateToCalendarDayRange: ({ date, minDate, maxDate, timeZoneId, }: DateRangeByCalendarDayParams) => Date | null;
+/**
+ * Returns true when a date falls outside [minDate, maxDate] by calendar day in a specific timezone.
+ */
+export declare const isCalendarDayOutOfRange: ({ date, minDate, maxDate, timeZoneId, }: DateRangeByCalendarDayParams) => boolean;
+export {};