@xsolla/xui-date-picker 0.225.0 → 0.227.0

package/README.md

@@ -197,6 +197,12 @@ While the field is focused or partly filled it shows a mask built from the forma
 
 **Not supported:** textual and localised tokens (`MMM`, `MMMM`, `P`, `PP`), time tokens (`HH:mm`), escaped literals (`'de'`), and formats missing one of the three segments (`MM/yyyy` — the field could never be completed, so `onChange` would never fire). These warn in development and fall back to `MM/dd/yyyy`, so the field stays completable and never renders raw token text as though it were a value. To display a date as `Mar 15, 2026`, format it yourself with `formatDate` outside the picker.
 
+### Typed text
+
+A typed date reaches `onChange` when the field loses focus or the user presses Enter, whichever way the text arrived. On web, key presses edit one segment at a time. Text can also arrive through the input's change event: React Native typing, mobile virtual keyboards, browser autofill, dictation, or `fill()` in end-to-end tests. That text is parsed as a whole in `dateFormat` (range mode: `start - end`).
+
+A typed date outside `minDate`/`maxDate`, or text that does not parse, is **not** sent to `onChange`. The field keeps the text and shows an error (*"Date must be within the allowed range"* or *"Enter a valid date (MM/dd/yyyy)"*), so it never shows a value your form did not receive. Text emptied before blur falls back to the current value.
+
 ### `<Calendar>`
 
 Re-exported from `@xsolla/xui-calendar`. Standalone single-month calendar.

package/native/index.js

@@ -615,6 +615,7 @@ var getFixedPlacementStyle = (side, align, container, panel, viewport, offset) =
   const vertical = align === "center" ? { top: (container.top + container.bottom) / 2 - panel.height / 2 } : align === "end" ? { bottom: viewport.height - container.bottom } : { top: container.top };
   return { position: "fixed", ...horizontal, ...vertical };
 };
+var isSegmentKey = (key) => /^[0-9]$/.test(key) || key === "Backspace" || key === "ArrowUp" || key === "ArrowDown" || key === "ArrowLeft" || key === "ArrowRight";
 var DatePicker = (0, import_react.forwardRef)(
   ({
     onChange,
@@ -679,6 +680,7 @@ var DatePicker = (0, import_react.forwardRef)(
     const [activeSegment, setActiveSegment] = (0, import_react.useState)(null);
     const [internalChip, setInternalChip] = (0, import_react.useState)(null);
     const [parseError, setParseError] = (0, import_react.useState)(null);
+    const [rawText, setRawText] = (0, import_react.useState)(null);
     const [fixedPosition, setFixedPosition] = (0, import_react.useState)(
       null
     );
@@ -755,7 +757,7 @@ var DatePicker = (0, import_react.forwardRef)(
       (g) => g.day != null || g.month != null || g.year != null
     );
     const showMask = hasAnyFilled || focused && isWeb;
-    const inputValue = chipLabel ?? (showMask ? composed.text : "");
+    const inputValue = rawText ?? chipLabel ?? (showMask ? composed.text : "");
     const showClear = clearable && editable && (hasAnyFilled || !!chipLabel);
     const orderedSegments = () => composeField().segments;
     const firstSegmentKey = () => {
@@ -824,6 +826,60 @@ var DatePicker = (0, import_react.forwardRef)(
       commitPart(edit.group, edit.type, Number(edit.buffer));
       setEdit(null);
     };
+    const parseOne = (token) => {
+      const trimmed = token.trim();
+      if (!trimmed) return null;
+      const parsed = (0, import_date_fns.parse)(trimmed, resolvedFormat, /* @__PURE__ */ new Date());
+      return (0, import_date_fns.isValid)(parsed) ? parsed : null;
+    };
+    const parseFieldText = (text) => {
+      if (isRange) {
+        const [startText, endText] = text.split(RANGE_SEPARATOR);
+        const start = parseOne(startText ?? "");
+        const end = parseOne(endText ?? "");
+        if (!start || endText?.trim() && !end) {
+          return {
+            error: `Enter a valid date range (${resolvedFormat} - ${resolvedFormat})`
+          };
+        }
+        return { parts: [datePartsFromDate(start), datePartsFromDate(end)] };
+      }
+      const date = parseOne(text);
+      if (!date) return { error: `Enter a valid date (${resolvedFormat})` };
+      return { parts: [datePartsFromDate(date)] };
+    };
+    const isOutOfBounds = (parts) => parts.map(datePartsToDate).some((d) => d instanceof Date && !isWithinBounds(d));
+    const commitRawText = (text) => {
+      setEdit(null);
+      if (!text.trim()) {
+        setRawText(null);
+        setParseError(null);
+        setGroups(propGroups());
+        return;
+      }
+      const result = parseFieldText(text);
+      if ("error" in result) {
+        setParseError(result.error);
+        return;
+      }
+      if (isOutOfBounds(result.parts)) {
+        setParseError("Date must be within the allowed range");
+        return;
+      }
+      setRawText(null);
+      setParseError(null);
+      setGroups(result.parts);
+      emit(result.parts);
+    };
+    const handleChangeText = (text) => {
+      rest.onChangeText?.(text);
+      if (!editable) return;
+      markDirty();
+      setEdit(null);
+      setParseError(null);
+      setActiveSegment(null);
+      setRawText(text);
+    };
     const defaultPart = (type) => {
       const now = /* @__PURE__ */ new Date();
       if (type === "day") return now.getDate();
@@ -916,10 +972,12 @@ var DatePicker = (0, import_react.forwardRef)(
       }
       if (!isWeb || !editable) return;
       if (e.key === "Enter") {
-        commitBuffer();
+        if (rawText !== null) commitRawText(rawText);
+        else commitBuffer();
         setOpen(false);
         return;
       }
+      if (rawText !== null && isSegmentKey(e.key)) setRawText(null);
       if (e.key === "ArrowUp") return handleArrowStep(e, 1);
       if (e.key === "ArrowDown") return handleArrowStep(e, -1);
       if (e.key === "ArrowLeft") return handleArrowMove(e, -1);
@@ -972,30 +1030,33 @@ var DatePicker = (0, import_react.forwardRef)(
         setParseError(null);
         return;
       }
+      if (rawText !== null) {
+        commitRawText(rawText);
+        return;
+      }
       let next = groups;
+      let rejected = false;
       if (edit) {
         const clamped = clampDatePart(
           edit.type,
           Number(edit.buffer),
           groups[edit.group]
         );
-        next = groups.map(
-          (g, i) => i === edit.group ? { ...g, [edit.type]: clamped } : g
-        );
+        const edited = { ...groups[edit.group], [edit.type]: clamped };
+        const assembled = datePartsToDate(edited);
+        if (assembled && !isWithinBounds(assembled)) {
+          rejected = true;
+        } else {
+          next = groups.map((g, i) => i === edit.group ? edited : g);
+        }
       }
       const props = propGroups();
       next = next.map((g, i) => isDatePartsComplete(g) ? g : props[i]);
       setEdit(null);
-      setParseError(null);
+      setParseError(rejected ? "Date must be within the allowed range" : null);
       setGroups(next);
       emit(next);
     };
-    const parseOne = (token) => {
-      const trimmed = token.trim();
-      if (!trimmed) return 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);
       if (e.defaultPrevented) return;
@@ -1003,34 +1064,20 @@ var DatePicker = (0, import_react.forwardRef)(
       const text = e.clipboardData?.getData("text") ?? "";
       if (!text.trim()) return;
       e.preventDefault();
-      let next;
-      if (isRange) {
-        const [startText, endText] = text.split(RANGE_SEPARATOR);
-        const start = parseOne(startText ?? "");
-        const end = parseOne(endText ?? "");
-        if (!start) {
-          setParseError(
-            `Enter a valid date range (${resolvedFormat} - ${resolvedFormat})`
-          );
-          return;
-        }
-        next = [datePartsFromDate(start), datePartsFromDate(end)];
-      } else {
-        const date = parseOne(text);
-        if (!date) {
-          setParseError(`Enter a valid date (${resolvedFormat})`);
-          return;
-        }
-        next = [datePartsFromDate(date)];
+      const result = parseFieldText(text);
+      if ("error" in result) {
+        setParseError(result.error);
+        return;
       }
-      const outOfBounds = next.map(datePartsToDate).some((d) => d instanceof Date && !isWithinBounds(d));
-      if (outOfBounds) {
+      const next = result.parts;
+      if (isOutOfBounds(next)) {
         setParseError("Date must be within the allowed range");
         return;
       }
       markDirty();
       setParseError(null);
       setEdit(null);
+      setRawText(null);
       setGroups(next);
       emit(next);
     };
@@ -1045,6 +1092,7 @@ var DatePicker = (0, import_react.forwardRef)(
       sessionRef.current.cleared = true;
       setGroups(next);
       setEdit(null);
+      setRawText(null);
       setParseError(null);
       setInternalChip(null);
       onChipSelect?.(null);
@@ -1064,6 +1112,7 @@ var DatePicker = (0, import_react.forwardRef)(
       sessionRef.current = { dirty: false, cleared: false, propKey };
       setGroups(propGroups());
       setEdit(null);
+      setRawText(null);
       setParseError(null);
     }, [propKey]);
     (0, import_react.useEffect)(() => {
@@ -1261,6 +1310,7 @@ var DatePicker = (0, import_react.forwardRef)(
               onKeyDown: handleKeyDown,
               onClick: handleFieldClick,
               onPaste: handlePaste,
+              onChangeText: handleChangeText,
               iconRight,
               iconLeft,
               extraClear: showClear,