@trackunit/react-form-components 1.22.10 → 1.22.11

package/index.cjs.js

@@ -531,19 +531,65 @@ const normalizeDisplayCompare = (value) => value
     .replace(/[\u202f\u00a0]/g, " ")
     .replace(/\s+/g, " ")
     .trim();
+const COMPACT_DATE_REGEX = /^\d{8}$/;
+const localePartOrderCache = new Map();
+/**
+ * Returns the date-part display order (month/day/year) for the given locale by inspecting
+ * `Intl.DateTimeFormat.formatToParts`. Results are cached after the first call per locale.
+ * Falls back to MDY (English/US convention) on any error.
+ */
+function getLocaleDatePartOrder(locale) {
+    const cached = localePartOrderCache.get(locale);
+    if (cached !== undefined)
+        return cached;
+    try {
+        const parts = new Intl.DateTimeFormat(locale, { year: "numeric", month: "2-digit", day: "2-digit" })
+            .formatToParts(new Date(2000, 0, 15))
+            .filter(p => p.type === "month" || p.type === "day" || p.type === "year")
+            .map(p => p.type.charAt(0).toUpperCase())
+            .join("");
+        const order = parts === "DMY" ? "DMY" : parts === "YMD" ? "YMD" : "MDY";
+        localePartOrderCache.set(locale, order);
+        return order;
+    }
+    catch {
+        return "MDY";
+    }
+}
+/**
+ * Converts a locale-ordered 8-digit compact string to `YYYY-MM-DD`.
+ *
+ * The split follows the locale's field order:
+ * - MDY (e.g. `en`):  `MMDDYYYY` → `YYYY-MM-DD`
+ * - DMY (e.g. `de`):  `DDMMYYYY` → `YYYY-MM-DD`
+ * - YMD (e.g. `ja`):  `YYYYMMDD` → `YYYY-MM-DD`
+ *
+ * Returns the original value unchanged for non-8-digit inputs.
+ */
+const normalizeCompactDateInput = (value, locale) => {
+    if (!COMPACT_DATE_REGEX.test(value))
+        return value;
+    const order = getLocaleDatePartOrder(locale ?? "en");
+    if (order === "MDY")
+        return `${value.slice(4, 8)}-${value.slice(0, 2)}-${value.slice(2, 4)}`;
+    if (order === "DMY")
+        return `${value.slice(4, 8)}-${value.slice(2, 4)}-${value.slice(0, 2)}`;
+    return `${value.slice(0, 4)}-${value.slice(4, 6)}-${value.slice(6, 8)}`;
+};
 /**
  * Parses date-field keyboard input to a local-midnight {@link Date}.
  *
- * Strict `YYYY-MM-DD` is accepted first; otherwise the string must round-trip with
- * {@link formatShortDateUtil} for the given `locale` (i.e. equal the canonical localized
- * display the field would render). Arbitrary `new Date(string)`-parseable inputs that don't
- * match the locale's format return `null` to avoid accepting confusable formats like `03/07/2025`.
+ * Strict `YYYY-MM-DD` is accepted first; a locale-ordered compact 8-digit string (e.g. `04132026`
+ * in English for April 13 2026) is normalised to `YYYY-MM-DD` before that check. Otherwise the
+ * string must round-trip with {@link formatShortDateUtil} for the given `locale`. Arbitrary
+ * `new Date(string)`-parseable inputs that don't match the locale's format return `null` to avoid
+ * accepting confusable formats like `03/07/2025`.
  *
  * @param value - Raw text from the input.
  * @param locale - Locale to compare against when the input is not `YYYY-MM-DD`.
  */
 const parseDateFieldInputForChange = (value, locale) => {
-    const fromIso = dateAndTimeUtils.parseYYYYMMDDUtil(value);
+    const fromIso = dateAndTimeUtils.parseYYYYMMDDUtil(normalizeCompactDateInput(value, locale));
     if (fromIso !== null)
         return fromIso;
     const trimmed = value.trim();

package/index.esm.js

@@ -530,19 +530,65 @@ const normalizeDisplayCompare = (value) => value
     .replace(/[\u202f\u00a0]/g, " ")
     .replace(/\s+/g, " ")
     .trim();
+const COMPACT_DATE_REGEX = /^\d{8}$/;
+const localePartOrderCache = new Map();
+/**
+ * Returns the date-part display order (month/day/year) for the given locale by inspecting
+ * `Intl.DateTimeFormat.formatToParts`. Results are cached after the first call per locale.
+ * Falls back to MDY (English/US convention) on any error.
+ */
+function getLocaleDatePartOrder(locale) {
+    const cached = localePartOrderCache.get(locale);
+    if (cached !== undefined)
+        return cached;
+    try {
+        const parts = new Intl.DateTimeFormat(locale, { year: "numeric", month: "2-digit", day: "2-digit" })
+            .formatToParts(new Date(2000, 0, 15))
+            .filter(p => p.type === "month" || p.type === "day" || p.type === "year")
+            .map(p => p.type.charAt(0).toUpperCase())
+            .join("");
+        const order = parts === "DMY" ? "DMY" : parts === "YMD" ? "YMD" : "MDY";
+        localePartOrderCache.set(locale, order);
+        return order;
+    }
+    catch {
+        return "MDY";
+    }
+}
+/**
+ * Converts a locale-ordered 8-digit compact string to `YYYY-MM-DD`.
+ *
+ * The split follows the locale's field order:
+ * - MDY (e.g. `en`):  `MMDDYYYY` → `YYYY-MM-DD`
+ * - DMY (e.g. `de`):  `DDMMYYYY` → `YYYY-MM-DD`
+ * - YMD (e.g. `ja`):  `YYYYMMDD` → `YYYY-MM-DD`
+ *
+ * Returns the original value unchanged for non-8-digit inputs.
+ */
+const normalizeCompactDateInput = (value, locale) => {
+    if (!COMPACT_DATE_REGEX.test(value))
+        return value;
+    const order = getLocaleDatePartOrder(locale ?? "en");
+    if (order === "MDY")
+        return `${value.slice(4, 8)}-${value.slice(0, 2)}-${value.slice(2, 4)}`;
+    if (order === "DMY")
+        return `${value.slice(4, 8)}-${value.slice(2, 4)}-${value.slice(0, 2)}`;
+    return `${value.slice(0, 4)}-${value.slice(4, 6)}-${value.slice(6, 8)}`;
+};
 /**
  * Parses date-field keyboard input to a local-midnight {@link Date}.
  *
- * Strict `YYYY-MM-DD` is accepted first; otherwise the string must round-trip with
- * {@link formatShortDateUtil} for the given `locale` (i.e. equal the canonical localized
- * display the field would render). Arbitrary `new Date(string)`-parseable inputs that don't
- * match the locale's format return `null` to avoid accepting confusable formats like `03/07/2025`.
+ * Strict `YYYY-MM-DD` is accepted first; a locale-ordered compact 8-digit string (e.g. `04132026`
+ * in English for April 13 2026) is normalised to `YYYY-MM-DD` before that check. Otherwise the
+ * string must round-trip with {@link formatShortDateUtil} for the given `locale`. Arbitrary
+ * `new Date(string)`-parseable inputs that don't match the locale's format return `null` to avoid
+ * accepting confusable formats like `03/07/2025`.
  *
  * @param value - Raw text from the input.
  * @param locale - Locale to compare against when the input is not `YYYY-MM-DD`.
  */
 const parseDateFieldInputForChange = (value, locale) => {
-    const fromIso = parseYYYYMMDDUtil(value);
+    const fromIso = parseYYYYMMDDUtil(normalizeCompactDateInput(value, locale));
     if (fromIso !== null)
         return fromIso;
     const trimmed = value.trim();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/react-form-components",
-  "version": "1.22.10",
+  "version": "1.22.11",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {

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

@@ -1,10 +1,11 @@
 /**
  * Parses date-field keyboard input to a local-midnight {@link Date}.
  *
- * Strict `YYYY-MM-DD` is accepted first; otherwise the string must round-trip with
- * {@link formatShortDateUtil} for the given `locale` (i.e. equal the canonical localized
- * display the field would render). Arbitrary `new Date(string)`-parseable inputs that don't
- * match the locale's format return `null` to avoid accepting confusable formats like `03/07/2025`.
+ * Strict `YYYY-MM-DD` is accepted first; a locale-ordered compact 8-digit string (e.g. `04132026`
+ * in English for April 13 2026) is normalised to `YYYY-MM-DD` before that check. Otherwise the
+ * string must round-trip with {@link formatShortDateUtil} for the given `locale`. Arbitrary
+ * `new Date(string)`-parseable inputs that don't match the locale's format return `null` to avoid
+ * accepting confusable formats like `03/07/2025`.
  *
  * @param value - Raw text from the input.
  * @param locale - Locale to compare against when the input is not `YYYY-MM-DD`.