@swan-io/shared-business 11.1.2 → 11.1.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@swan-io/shared-business",
-  "version": "11.1.2",
+  "version": "11.1.4",
   "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.4"
   },
   "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.4"
   }
 }

package/src/components/FileTile.js

@@ -44,6 +44,9 @@ const styles = StyleSheet.create({
         borderRadius: 2,
         backgroundColor: colors.current[500],
     },
+    id: {
+        alignSelf: "flex-start",
+    },
 });
 export const FileTile = ({ file: { id, statusInfo, name, url }, showId = false, onRemove, }) => {
     const [isDeleting, setIsDeleting] = useState(false);
@@ -71,14 +74,14 @@ export const FileTile = ({ file: { id, statusInfo, name, url }, showId = false,
         ], children: [_jsx(Box, { alignItems: "center", direction: "row", style: styles.content, children: statusInfo.status === "Uploading" ? (_jsxs(_Fragment, { children: [_jsx(LakeText, { numberOfLines: 1, color: colors.gray[700], children: t("fileTile.uploading") }), _jsx(Space, { width: 20 }), _jsx(View, { role: "progressbar", style: styles.progressBar, children: _jsx(View, { style: [styles.progress, { width: `${statusInfo.progress * 100}%` }] }) })] })) : (_jsxs(_Fragment, { children: [statusInfo.status === "Validated" ? (_jsx(Icon, { size: 24, color: colors.positive[500], name: "checkmark-circle-regular" })) : (_jsx(Tag, { icon: getIconNameFromFilename(name), iconSize: 20, color: match(statusInfo)
                                 .with({ status: P.union("Uploaded", "Pending") }, () => "shakespear")
                                 .with({ status: "Refused" }, () => "negative")
-                                .exhaustive() })), _jsx(Space, { width: 16 }), _jsxs(Box, { grow: 1, children: [_jsx(LakeText, { numberOfLines: 1, color: colors.gray[700], style: commonStyles.fill, children: name }), showId ? (_jsx(LakeTooltip, { describedBy: "copy", onHide: () => setVisibleState("copy"), togglableOnFocus: true, content: visibleState === "copy"
-                                        ? t("copyButton.copyTooltip")
-                                        : t("copyButton.copiedTooltip"), children: _jsx(Pressable, { onPress: event => {
-                                            event.stopPropagation();
-                                            event.preventDefault();
-                                            setClipboardText(id);
-                                            setVisibleState("copied");
-                                        }, children: _jsxs(Box, { direction: "row", alignItems: "center", children: [_jsx(LakeText, { numberOfLines: 1, variant: "smallRegular", children: t("fileTile.id", { id }) }), _jsx(Space, { width: 4 }), _jsx(Icon, { size: 14, name: "copy-regular" })] }) }) })) : null] }), _jsx(Space, { width: 12 }), isNotNullishOrEmpty(url) && (_jsx(LakeButton, { mode: "tertiary", size: "small", icon: "open-filled", onPress: () => {
+                                .exhaustive() })), _jsx(Space, { width: 16 }), _jsxs(Box, { grow: 1, children: [_jsx(LakeText, { numberOfLines: 1, color: colors.gray[700], style: commonStyles.fill, children: name }), showId ? (_jsx(View, { style: styles.id, children: _jsx(LakeTooltip, { describedBy: "copy", onHide: () => setVisibleState("copy"), togglableOnFocus: true, content: visibleState === "copy"
+                                            ? t("copyButton.copyTooltip")
+                                            : t("copyButton.copiedTooltip"), children: _jsx(Pressable, { onPress: event => {
+                                                event.stopPropagation();
+                                                event.preventDefault();
+                                                setClipboardText(id);
+                                                setVisibleState("copied");
+                                            }, children: _jsxs(Box, { direction: "row", alignItems: "center", children: [_jsx(LakeText, { numberOfLines: 1, variant: "smallRegular", children: t("fileTile.id", { id }) }), _jsx(Space, { width: 4 }), _jsx(Icon, { size: 14, name: "copy-regular" })] }) }) }) })) : null] }), _jsx(Space, { width: 12 }), isNotNullishOrEmpty(url) && (_jsx(LakeButton, { mode: "tertiary", size: "small", icon: "open-filled", onPress: () => {
                                 window.open(url, "_blank");
                             }, ariaLabel: t("common.open") })), isNotNullish(onRemove) && (_jsx(LakeButton, { mode: "tertiary", size: "small", icon: "delete-regular", color: "negative", onPress: () => setIsDeleteModalVisible(true), ariaLabel: t("common.remove") })), _jsx(LakeModal, { title: t("fileTile.deleteModal.title"), icon: "subtract-circle-regular", visible: isDeleteModalVisible, onPressClose: () => setIsDeleteModalVisible(false), color: "negative", children: _jsx(LakeButtonGroup, { paddingBottom: 0, children: _jsx(LakeButton, { loading: isDeleting, grow: true, color: "negative", onPress: onPressRemove, children: t("fileTile.deleteModal.delete") }) }) })] })) }), match(statusInfo)
                 .with({ status: "Pending" }, () => (_jsx(LakeAlert, { anchored: true, title: t("fileTile.status.Pending"), variant: "info" })))

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 : "",