@trackunit/react-form-components 1.22.28 → 1.23.0

package/index.cjs.js

@@ -696,7 +696,7 @@ function parseToDate(v) {
  *
  * 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 DateBaseInput = ({ min, max, defaultValue, value, ref, onChange, suffix: suffixProp, "data-testid": dataTestId, onBlur, ...rest }) => {
     const timeZoneId = Intl.DateTimeFormat().resolvedOptions().timeZone;
     const isControlled = value !== undefined;
     const [internalValue, setInternalValue] = react.useState(() => dateToCalendarDayString({ date: parseToDate(defaultValue), timeZoneId }));
@@ -766,7 +766,27 @@ const DateBaseInput = ({ min, max, defaultValue, value, ref, onChange, suffix: s
             onChange?.(e);
         }
     }, [createInputChangeEvent, 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 handleBlur = react.useCallback((e) => {
+        if (!onBlur)
+            return;
+        const storedValue = isControlled
+            ? typeof value === "string"
+                ? value
+                : dateToCalendarDayString({ date: parseToDate(value), timeZoneId })
+            : internalValue;
+        // When the stored value is a committed calendar day (YYYY-MM-DD) we expose it on blur, even though the
+        // displayed input value is localized.
+        const shouldExposeStoredValue = storedValue === "" || dateAndTimeUtils.parseYYYYMMDDUtil(storedValue) !== null;
+        if (!shouldExposeStoredValue) {
+            onBlur(e);
+            return;
+        }
+        const prev = e.currentTarget.value;
+        e.currentTarget.value = storedValue;
+        onBlur(e);
+        e.currentTarget.value = prev;
+    }, [internalValue, isControlled, onBlur, timeZoneId, value]);
+    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, onBlur: handleBlur, 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 => {
                                     const next = val instanceof Date ? val : Array.isArray(val) ? (val[0] instanceof Date ? val[0] : null) : null;
@@ -2551,10 +2571,9 @@ ColorField.displayName = "ColorField";
 
 /**
  * The date field component is used for entering date values with a calendar picker (same UI as DayPicker).
- * The input shows a localized short date; when the user commits a valid day, `onChange` provides `YYYY-MM-DD`
- * on `event.target.value` (use `parseYYYYMMDDUtil` from `@trackunit/date-and-time-utils` for a local-midnight
- * `Date`). Do not parse `event.target.value` from `onBlur` — the visible string may be localized while
- * `onChange` stays canonical.
+ * The input shows a localized short date; when the user commits a valid day, both `onChange` and `onBlur`
+ * expose `YYYY-MM-DD` on `event.target.value` (use `parseYYYYMMDDUtil` from `@trackunit/date-and-time-utils`
+ * for a local-midnight `Date`).
  *
  * ### When to use
  * Use DateField for selecting calendar dates such as birthdates, deadlines, or scheduling.

package/index.esm.js

@@ -695,7 +695,7 @@ function parseToDate(v) {
  *
  * 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 DateBaseInput = ({ min, max, defaultValue, value, ref, onChange, suffix: suffixProp, "data-testid": dataTestId, onBlur, ...rest }) => {
     const timeZoneId = Intl.DateTimeFormat().resolvedOptions().timeZone;
     const isControlled = value !== undefined;
     const [internalValue, setInternalValue] = useState(() => dateToCalendarDayString({ date: parseToDate(defaultValue), timeZoneId }));
@@ -765,7 +765,27 @@ const DateBaseInput = ({ min, max, defaultValue, value, ref, onChange, suffix: s
             onChange?.(e);
         }
     }, [createInputChangeEvent, 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 handleBlur = useCallback((e) => {
+        if (!onBlur)
+            return;
+        const storedValue = isControlled
+            ? typeof value === "string"
+                ? value
+                : dateToCalendarDayString({ date: parseToDate(value), timeZoneId })
+            : internalValue;
+        // When the stored value is a committed calendar day (YYYY-MM-DD) we expose it on blur, even though the
+        // displayed input value is localized.
+        const shouldExposeStoredValue = storedValue === "" || parseYYYYMMDDUtil(storedValue) !== null;
+        if (!shouldExposeStoredValue) {
+            onBlur(e);
+            return;
+        }
+        const prev = e.currentTarget.value;
+        e.currentTarget.value = storedValue;
+        onBlur(e);
+        e.currentTarget.value = prev;
+    }, [internalValue, isControlled, onBlur, timeZoneId, value]);
+    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, onBlur: handleBlur, 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 => {
                                     const next = val instanceof Date ? val : Array.isArray(val) ? (val[0] instanceof Date ? val[0] : null) : null;
@@ -2550,10 +2570,9 @@ ColorField.displayName = "ColorField";
 
 /**
  * The date field component is used for entering date values with a calendar picker (same UI as DayPicker).
- * The input shows a localized short date; when the user commits a valid day, `onChange` provides `YYYY-MM-DD`
- * on `event.target.value` (use `parseYYYYMMDDUtil` from `@trackunit/date-and-time-utils` for a local-midnight
- * `Date`). Do not parse `event.target.value` from `onBlur` — the visible string may be localized while
- * `onChange` stays canonical.
+ * The input shows a localized short date; when the user commits a valid day, both `onChange` and `onBlur`
+ * expose `YYYY-MM-DD` on `event.target.value` (use `parseYYYYMMDDUtil` from `@trackunit/date-and-time-utils`
+ * for a local-midnight `Date`).
  *
  * ### When to use
  * Use DateField for selecting calendar dates such as birthdates, deadlines, or scheduling.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/react-form-components",
-  "version": "1.22.28",
+  "version": "1.23.0",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {
@@ -19,7 +19,7 @@
     "@trackunit/ui-icons": "1.11.111",
     "@trackunit/shared-utils": "1.13.115",
     "@trackunit/ui-design-tokens": "1.11.112",
-    "@trackunit/i18n-library-translation": "1.18.23",
+    "@trackunit/i18n-library-translation": "1.19.0",
     "string-ts": "^2.0.0",
     "es-toolkit": "^1.39.10"
   },

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

@@ -27,5 +27,5 @@ export interface DateBaseInputProps extends BaseInputExposedProps {
  *
  * NOTE: If shown with a label, please use the `DateField` component instead.
  */
-export declare const DateBaseInput: ({ min, max, defaultValue, value, ref, onChange, suffix: suffixProp, "data-testid": dataTestId, ...rest }: DateBaseInputProps) => ReactElement;
+export declare const DateBaseInput: ({ min, max, defaultValue, value, ref, onChange, suffix: suffixProp, "data-testid": dataTestId, onBlur, ...rest }: DateBaseInputProps) => ReactElement;
 export {};

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

@@ -10,10 +10,9 @@ export interface DateFieldProps extends DateBaseInputProps, FormGroupExposedProp
 }
 /**
  * The date field component is used for entering date values with a calendar picker (same UI as DayPicker).
- * The input shows a localized short date; when the user commits a valid day, `onChange` provides `YYYY-MM-DD`
- * on `event.target.value` (use `parseYYYYMMDDUtil` from `@trackunit/date-and-time-utils` for a local-midnight
- * `Date`). Do not parse `event.target.value` from `onBlur` — the visible string may be localized while
- * `onChange` stays canonical.
+ * The input shows a localized short date; when the user commits a valid day, both `onChange` and `onBlur`
+ * expose `YYYY-MM-DD` on `event.target.value` (use `parseYYYYMMDDUtil` from `@trackunit/date-and-time-utils`
+ * for a local-midnight `Date`).
  *
  * ### When to use
  * Use DateField for selecting calendar dates such as birthdates, deadlines, or scheduling.