@trackunit/react-form-components 1.22.10 → 1.22.12-alpha-71bd6bc448a.0

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.12-alpha-71bd6bc448a.0",
   "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.105",
+    "@trackunit/date-and-time-utils": "1.11.106-alpha-71bd6bc448a.0",
     "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.102",
-    "@trackunit/react-components": "1.22.7",
-    "@trackunit/ui-icons": "1.11.98",
-    "@trackunit/shared-utils": "1.13.102",
-    "@trackunit/ui-design-tokens": "1.11.99",
-    "@trackunit/i18n-library-translation": "1.18.8",
+    "@trackunit/css-class-variance-utilities": "1.11.103-alpha-71bd6bc448a.0",
+    "@trackunit/react-components": "1.22.8-alpha-71bd6bc448a.0",
+    "@trackunit/ui-icons": "1.11.99-alpha-71bd6bc448a.0",
+    "@trackunit/shared-utils": "1.13.103-alpha-71bd6bc448a.0",
+    "@trackunit/ui-design-tokens": "1.11.100-alpha-71bd6bc448a.0",
+    "@trackunit/i18n-library-translation": "1.18.9-alpha-71bd6bc448a.0",
     "string-ts": "^2.0.0",
     "es-toolkit": "^1.39.10"
   },

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`.