@xsolla/xui-date-picker 0.225.0 → 0.226.0

package/web/index.js

@@ -663,6 +663,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_react4.forwardRef)(
   ({
     onChange,
@@ -727,6 +728,7 @@ var DatePicker = (0, import_react4.forwardRef)(
     const [activeSegment, setActiveSegment] = (0, import_react4.useState)(null);
     const [internalChip, setInternalChip] = (0, import_react4.useState)(null);
     const [parseError, setParseError] = (0, import_react4.useState)(null);
+    const [rawText, setRawText] = (0, import_react4.useState)(null);
     const [fixedPosition, setFixedPosition] = (0, import_react4.useState)(
       null
     );
@@ -803,7 +805,7 @@ var DatePicker = (0, import_react4.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 = () => {
@@ -872,6 +874,60 @@ var DatePicker = (0, import_react4.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();
@@ -964,10 +1020,12 @@ var DatePicker = (0, import_react4.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);
@@ -1020,30 +1078,33 @@ var DatePicker = (0, import_react4.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;
@@ -1051,34 +1112,20 @@ var DatePicker = (0, import_react4.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);
     };
@@ -1093,6 +1140,7 @@ var DatePicker = (0, import_react4.forwardRef)(
       sessionRef.current.cleared = true;
       setGroups(next);
       setEdit(null);
+      setRawText(null);
       setParseError(null);
       setInternalChip(null);
       onChipSelect?.(null);
@@ -1112,6 +1160,7 @@ var DatePicker = (0, import_react4.forwardRef)(
       sessionRef.current = { dirty: false, cleared: false, propKey };
       setGroups(propGroups());
       setEdit(null);
+      setRawText(null);
       setParseError(null);
     }, [propKey]);
     (0, import_react4.useEffect)(() => {
@@ -1309,6 +1358,7 @@ var DatePicker = (0, import_react4.forwardRef)(
               onKeyDown: handleKeyDown,
               onClick: handleFieldClick,
               onPaste: handlePaste,
+              onChangeText: handleChangeText,
               iconRight,
               iconLeft,
               extraClear: showClear,