@xsolla/xui-date-picker 0.206.0 → 0.206.2

package/web/index.js

@@ -34,18 +34,22 @@ __export(index_exports, {
   CalendarChips: () => import_xui_calendar2.CalendarChips,
   CalendarGrid: () => import_xui_calendar2.CalendarGrid,
   CalendarHeader: () => import_xui_calendar2.CalendarHeader,
+  DEFAULT_DATE_FORMAT: () => DEFAULT_DATE_FORMAT,
   DatePicker: () => DatePicker,
   DualCalendar: () => import_xui_calendar2.DualCalendar,
+  analyzeDateFormat: () => analyzeDateFormat,
   buildSegmentedValue: () => buildSegmentedValue,
   clampDatePart: () => clampDatePart,
   datePartsFromDate: () => datePartsFromDate,
   datePartsToDate: () => datePartsToDate,
   daysInMonth: () => daysInMonth,
-  formatDate: () => formatDate,
+  describeDateFormatIssues: () => describeDateFormatIssues,
+  formatDate: () => import_xui_calendar2.formatDate,
   getDateSegments: () => getDateSegments,
   isDatePartsComplete: () => isDatePartsComplete,
   isSegmentComplete: () => isSegmentComplete,
   parseDateFormat: () => parseDateFormat,
+  resolveDateFormat: () => resolveDateFormat,
   stepDatePart: () => stepDatePart,
   stepDateSegment: () => stepDateSegment
 });
@@ -321,20 +325,11 @@ var isNative = false;
 
 // src/DatePicker.tsx
 var import_xui_input = require("@xsolla/xui-input");
-var import_date_fns2 = require("date-fns");
+var import_date_fns = require("date-fns");
 var import_xui_calendar = require("@xsolla/xui-calendar");
 var import_xui_icons_base = require("@xsolla/xui-icons-base");
 
 // src/utils.ts
-var import_date_fns = require("date-fns");
-var locales = __toESM(require("date-fns/locale"));
-var defaultLocale = "enUS";
-function formatDate(date, formatStr, locale = defaultLocale) {
-  const localeObj = locales[locale] || locales[defaultLocale];
-  return (0, import_date_fns.format)(date, formatStr, {
-    locale: localeObj
-  });
-}
 var SEGMENT_WIDTH = {
   day: 2,
   month: 2,
@@ -345,21 +340,109 @@ var SEGMENT_TOKEN = {
   month: "mm",
   year: "yyyy"
 };
-function parseDateFormat(format2) {
+var DEFAULT_DATE_FORMAT = "MM/dd/yyyy";
+var SEGMENT_LETTER = {
+  d: "day",
+  M: "month",
+  y: "year"
+};
+var CASING_REPAIRS = { D: "d", Y: "y", m: "M" };
+var SUPPORTED_TOKENS_HINT = "supported tokens are `d`/`dd` (day), `M`/`MM` (month) and `y`/`yyyy` (year); any other character is a literal separator. Textual and localised tokens (`MMM`, `MMMM`, `P`, `PP`) are not supported \u2014 the field renders numeric segments only.";
+var ALL_SEGMENTS = ["day", "month", "year"];
+var isLetter = (c) => /[A-Za-z]/.test(c);
+var isSupportedRun = (letter, length) => {
+  if (letter === "y") return true;
+  if (letter === "d" || letter === "M") return length <= 2;
+  return false;
+};
+function analyzeDateFormat(format, fallback = DEFAULT_DATE_FORMAT) {
+  const issues = [];
+  const used = /* @__PURE__ */ new Set();
+  for (let i2 = 0; i2 < format.length; i2++) {
+    if (isLetter(format[i2])) used.add(format[i2]);
+  }
+  let repaired = "";
+  let hasUnsupported = false;
+  let i = 0;
+  while (i < format.length) {
+    const c = format[i];
+    if (!isLetter(c)) {
+      repaired += c;
+      i++;
+      continue;
+    }
+    let end = i;
+    while (end < format.length && format[end] === c) end++;
+    const run = format.slice(i, end);
+    i = end;
+    if (isSupportedRun(c, run.length)) {
+      repaired += run;
+      continue;
+    }
+    const repair = CASING_REPAIRS[c];
+    if (repair && !used.has(repair) && isSupportedRun(repair, run.length)) {
+      const fixed = repair.repeat(run.length);
+      issues.push({ token: run, kind: "casing", suggestion: fixed });
+      repaired += fixed;
+      continue;
+    }
+    issues.push({ token: run, kind: "unsupported" });
+    hasUnsupported = true;
+    repaired += run;
+  }
+  const present = new Set(
+    parseDateFormat(repaired).filter(
+      (t) => t.kind === "segment"
+    ).map((t) => t.type)
+  );
+  const missing = ALL_SEGMENTS.filter((type) => !present.has(type));
+  for (const type of missing) issues.push({ token: type, kind: "missing" });
+  const usable = !hasUnsupported && missing.length === 0;
+  return {
+    format: usable ? repaired : fallback,
+    usedFallback: !usable,
+    issues
+  };
+}
+function describeDateFormatIssues(format, analysis) {
+  const clauses = analysis.issues.map((issue) => {
+    if (issue.kind === "missing") {
+      return `it has no ${issue.token} segment, so the field can never be completed`;
+    }
+    if (issue.kind === "casing") {
+      return `\`${issue.token}\` is not a \`date-fns\` date token \u2014 use \`${issue.suggestion}\``;
+    }
+    return `\`${issue.token}\` is not a supported token`;
+  });
+  const resolution = analysis.usedFallback ? `Falling back to \`${analysis.format}\`.` : `Reading it as \`${analysis.format}\`.`;
+  return `[DatePicker] Invalid \`dateFormat\` \`${format}\`: ${clauses.join("; ")}. ${resolution} Note ${SUPPORTED_TOKENS_HINT}`;
+}
+var warnedFormats = /* @__PURE__ */ new Set();
+function resolveDateFormat(format, fallback = DEFAULT_DATE_FORMAT) {
+  const analysis = analyzeDateFormat(format, fallback);
+  if (analysis.issues.length > 0) {
+    const key = `${format}|${fallback}`;
+    const isProduction = globalThis.process?.env?.NODE_ENV === "production";
+    if (!isProduction && !warnedFormats.has(key)) {
+      warnedFormats.add(key);
+      console.warn(describeDateFormatIssues(format, analysis));
+    }
+  }
+  return analysis.format;
+}
+function parseDateFormat(format) {
   const tokens = [];
   let i = 0;
-  while (i < format2.length) {
-    const c = format2[i];
-    if (c === "d" || c === "M" || c === "y") {
-      while (i < format2.length && format2[i] === c) i++;
-      tokens.push({
-        kind: "segment",
-        type: c === "d" ? "day" : c === "M" ? "month" : "year"
-      });
+  while (i < format.length) {
+    const c = format[i];
+    const type = SEGMENT_LETTER[c];
+    if (type) {
+      while (i < format.length && format[i] === c) i++;
+      tokens.push({ kind: "segment", type });
     } else {
       let text = "";
-      while (i < format2.length && !"dMy".includes(format2[i])) {
-        text += format2[i];
+      while (i < format.length && !SEGMENT_LETTER[format[i]]) {
+        text += format[i];
         i++;
       }
       tokens.push({ kind: "literal", text });
@@ -403,8 +486,8 @@ function stepDatePart(type, current, delta, parts) {
   const dim = daysInMonth(year, monthIndex);
   return ((current - 1 + delta) % dim + dim) % dim + 1;
 }
-function buildSegmentedValue(format2, parts, active) {
-  const tokens = parseDateFormat(format2);
+function buildSegmentedValue(format, parts, active) {
+  const tokens = parseDateFormat(format);
   let text = "";
   const ranges = [];
   for (const token of tokens) {
@@ -445,14 +528,14 @@ function isSegmentComplete(type, buffer) {
 function daysInMonth(year, monthIndex) {
   return new Date(year, monthIndex + 1, 0).getDate();
 }
-function getDateSegments(format2, value) {
+function getDateSegments(format, value) {
   const segments = [];
   let fi = 0;
   let vi = 0;
-  while (fi < format2.length && vi < value.length) {
-    const fc = format2[fi];
+  while (fi < format.length && vi < value.length) {
+    const fc = format[fi];
     if (fc === "d" || fc === "M" || fc === "y") {
-      while (fi < format2.length && format2[fi] === fc) fi++;
+      while (fi < format.length && format[fi] === fc) fi++;
       const start = vi;
       while (vi < value.length && value[vi] >= "0" && value[vi] <= "9") vi++;
       if (vi > start) {
@@ -497,7 +580,6 @@ function stepDateSegment(date, type, delta) {
 // src/DatePicker.tsx
 var import_jsx_runtime2 = require("react/jsx-runtime");
 var PLACEMENT_OFFSET = 4;
-var DEFAULT_DATE_FORMAT = "MM/dd/yyyy";
 var RANGE_SEPARATOR = /\s*[-–—]\s*/;
 var RANGE_DISPLAY_SEP = " - ";
 var CalendarFieldIcon = () => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_xui_icons_base.Calendar, { size: "100%" });
@@ -599,6 +681,10 @@ var DatePicker = (0, import_react3.forwardRef)(
     const editable = !readOnly && !rest.disabled;
     const isDual = variant === "dual";
     const isRange = isDual || selectsRange;
+    const resolvedFormat = (0, import_react3.useMemo)(
+      () => resolveDateFormat(dateFormat),
+      [dateFormat]
+    );
     const propGroups = (0, import_react3.useCallback)(
       () => isRange ? [datePartsFromDate(startDate), datePartsFromDate(endDate)] : [datePartsFromDate(selectedDate)],
       [isRange, startDate, endDate, selectedDate]
@@ -646,7 +732,7 @@ var DatePicker = (0, import_react3.forwardRef)(
     };
     const composeField = () => {
       const build = (group) => buildSegmentedValue(
-        dateFormat,
+        resolvedFormat,
         groups[group] ?? { day: null, month: null, year: null },
         edit && edit.group === group ? { type: edit.type, buffer: edit.buffer } : void 0
       );
@@ -893,8 +979,8 @@ var DatePicker = (0, import_react3.forwardRef)(
     const parseOne = (token) => {
       const trimmed = token.trim();
       if (!trimmed) return null;
-      const parsed = (0, import_date_fns2.parse)(trimmed, dateFormat, /* @__PURE__ */ new Date());
-      return (0, import_date_fns2.isValid)(parsed) ? parsed : null;
+      const parsed = (0, import_date_fns.parse)(trimmed, resolvedFormat, /* @__PURE__ */ new Date());
+      return (0, import_date_fns.isValid)(parsed) ? parsed : null;
     };
     const handlePaste = (e) => {
       onPasteProp?.(e);
@@ -910,7 +996,7 @@ var DatePicker = (0, import_react3.forwardRef)(
         const end = parseOne(endText ?? "");
         if (!start) {
           setParseError(
-            `Enter a valid date range (${dateFormat} - ${dateFormat})`
+            `Enter a valid date range (${resolvedFormat} - ${resolvedFormat})`
           );
           return;
         }
@@ -918,7 +1004,7 @@ var DatePicker = (0, import_react3.forwardRef)(
       } else {
         const date = parseOne(text);
         if (!date) {
-          setParseError(`Enter a valid date (${dateFormat})`);
+          setParseError(`Enter a valid date (${resolvedFormat})`);
           return;
         }
         next = [datePartsFromDate(date)];
@@ -1114,7 +1200,7 @@ var DatePicker = (0, import_react3.forwardRef)(
               ...rest,
               ref: inputRef,
               size,
-              placeholder: placeholder || (isRange ? "Enter a date range" : "Choose a date"),
+              placeholder: placeholder || (isRange ? "Choose a date range" : "Choose a date"),
               value: inputValue,
               readOnly,
               onFocus: handleFieldFocus,
@@ -1162,18 +1248,22 @@ DatePicker.displayName = "DatePicker";
   CalendarChips,
   CalendarGrid,
   CalendarHeader,
+  DEFAULT_DATE_FORMAT,
   DatePicker,
   DualCalendar,
+  analyzeDateFormat,
   buildSegmentedValue,
   clampDatePart,
   datePartsFromDate,
   datePartsToDate,
   daysInMonth,
+  describeDateFormatIssues,
   formatDate,
   getDateSegments,
   isDatePartsComplete,
   isSegmentComplete,
   parseDateFormat,
+  resolveDateFormat,
   stepDatePart,
   stepDateSegment
 });