@swan-io/shared-business 11.1.2 → 11.1.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@swan-io/shared-business",
-  "version": "11.1.2",
+  "version": "11.1.3",
   "engines": {
     "node": ">=20.9.0",
     "pnpm": "9.9.0"
@@ -26,7 +26,7 @@
   ],
   "license": "MIT",
   "peerDependencies": {
-    "@swan-io/lake": "11.1.2"
+    "@swan-io/lake": "11.1.3"
   },
   "dependencies": {
     "@formatjs/intl": "^2.10.9",
@@ -53,6 +53,6 @@
     "@types/uuid": "^10.0.0",
     "jsdom": "^25.0.1",
     "vitest": "^2.1.3",
-    "@swan-io/lake": "11.1.2"
+    "@swan-io/lake": "11.1.3"
   }
 }

package/src/components/InlineDatePicker.js

@@ -9,6 +9,7 @@ import { breakpoints, colors } from "@swan-io/lake/src/constants/design";
 import { useResponsive } from "@swan-io/lake/src/hooks/useResponsive";
 import { isNotNullish, isNullish } from "@swan-io/lake/src/utils/nullish";
 import { useForm } from "@swan-io/use-form";
+import { useRef } from "react";
 import { StyleSheet, View } from "react-native";
 import { match } from "ts-pattern";
 import { extractDate, formatExtractedDate } from "../utils/date";
@@ -58,7 +59,13 @@ const order = match(getMostLikelyUserCountry().cca2)
     .otherwise(() => "DMY");
 export const InlineDatePicker = ({ value, label, readOnly = false, onValueChange, validate = () => undefined, error: externalError, style, }) => {
     const { desktop } = useResponsive(breakpoints.small);
-    const { Field } = useForm({
+    // We can't rely on blurred, since 3 inputs / select are mapped on
+    // 1 field. The first onBlur update the field internal state from
+    // not blurred -> blurred, then when the second input is blurred,
+    // validate will not be triggered again since the field has already
+    // blurred = true
+    const touched = useRef(new Set());
+    const { Field, validateField } = useForm({
         date: {
             initialValue: isNotNullish(value) ? extractDate(value) : undefined,
             sanitize: date => isNotNullish(date)
@@ -68,7 +75,7 @@ export const InlineDatePicker = ({ value, label, readOnly = false, onValueChange
                     year: date.year.trim(),
                 }
                 : undefined,
-            strategy: "onBlur",
+            strategy: "onSubmit",
             validate: date => {
                 const errorMessage = validate(date);
                 if (isNullish(errorMessage) && isNotNullish(date)) {
@@ -81,9 +88,17 @@ export const InlineDatePicker = ({ value, label, readOnly = false, onValueChange
             },
         },
     });
-    return (_jsx(View, { style: [styles.container, style], children: _jsx(Field, { name: "date", children: ({ error, onBlur, onChange, value }) => (_jsx(LakeLabel, { label: label, render: id => {
+    const validateDate = () => {
+        if (touched.current.has("day") && touched.current.has("month") && touched.current.has("year")) {
+            validateField("date");
+        }
+    };
+    return (_jsx(View, { style: [styles.container, style], children: _jsx(Field, { name: "date", children: ({ error, onChange, value }) => (_jsx(LakeLabel, { label: label, render: id => {
                     var _a;
-                    const day = (_jsx(View, { style: desktop ? styles.day : styles.dayMobile, children: _jsx(LakeTextInput, { id: id, readOnly: readOnly, style: (isNotNullish(error) || isNotNullish(externalError)) && styles.error, placeholder: t("datePicker.day"), value: (_a = value === null || value === void 0 ? void 0 : value.day) !== null && _a !== void 0 ? _a : undefined, onBlur: onBlur, hideErrors: true, onChangeText: day => {
+                    const day = (_jsx(View, { style: desktop ? styles.day : styles.dayMobile, children: _jsx(LakeTextInput, { id: id, readOnly: readOnly, style: (isNotNullish(error) || isNotNullish(externalError)) && styles.error, placeholder: t("datePicker.day"), value: (_a = value === null || value === void 0 ? void 0 : value.day) !== null && _a !== void 0 ? _a : undefined, onBlur: () => {
+                                touched.current.add("day");
+                                validateDate();
+                            }, hideErrors: true, onChangeText: day => {
                                 var _a, _b;
                                 onChange({
                                     day,
@@ -93,13 +108,18 @@ export const InlineDatePicker = ({ value, label, readOnly = false, onValueChange
                             }, pattern: "[0-9]", maxLength: 2, autoComplete: "bday-day" }) }));
                     const month = (_jsx(LakeSelect, { value: (value === null || value === void 0 ? void 0 : value.month) === "" ? undefined : value === null || value === void 0 ? void 0 : value.month, style: (isNotNullish(error) || isNotNullish(externalError)) && styles.error, readOnly: readOnly, placeholder: t("datePicker.month"), hideErrors: true, items: months, onValueChange: month => {
                             var _a, _b;
+                            touched.current.add("month");
+                            validateDate();
                             onChange({
                                 day: (_a = value === null || value === void 0 ? void 0 : value.day) !== null && _a !== void 0 ? _a : "",
                                 month,
                                 year: (_b = value === null || value === void 0 ? void 0 : value.year) !== null && _b !== void 0 ? _b : "",
                             });
                         } }));
-                    const year = (_jsx(View, { style: desktop ? styles.year : styles.yearMobile, children: _jsx(LakeTextInput, { value: value === null || value === void 0 ? void 0 : value.year, style: (isNotNullish(error) || isNotNullish(externalError)) && styles.error, readOnly: readOnly, placeholder: t("datePicker.year"), onBlur: onBlur, hideErrors: true, onChangeText: year => {
+                    const year = (_jsx(View, { style: desktop ? styles.year : styles.yearMobile, children: _jsx(LakeTextInput, { value: value === null || value === void 0 ? void 0 : value.year, style: (isNotNullish(error) || isNotNullish(externalError)) && styles.error, readOnly: readOnly, placeholder: t("datePicker.year"), onBlur: () => {
+                                touched.current.add("year");
+                                validateDate();
+                            }, hideErrors: true, onChangeText: year => {
                                 var _a, _b;
                                 return onChange({
                                     day: (_a = value === null || value === void 0 ? void 0 : value.day) !== null && _a !== void 0 ? _a : "",