@swan-io/shared-business 13.9.2 → 13.10.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@swan-io/shared-business",
-  "version": "13.9.2",
+  "version": "13.10.0",
   "engines": {
     "node": ">22.12.0"
   },
@@ -25,7 +25,7 @@
   ],
   "license": "MIT",
   "peerDependencies": {
-    "@swan-io/lake": "13.9.2"
+    "@swan-io/lake": "13.10.0"
   },
   "dependencies": {
     "@formatjs/intl": "^4.1.2",
@@ -50,6 +50,6 @@
     "@types/react-dom": "^19.2.3",
     "@types/react-native": "^0.72.8",
     "type-fest": "^5.4.3",
-    "@swan-io/lake": "13.9.2"
+    "@swan-io/lake": "13.10.0"
   }
 }

package/src/components/InputPhoneNumber.d.ts

@@ -0,0 +1,27 @@
+import { Ref } from "react";
+import { Country, CountryCCA3 } from "../constants/countries";
+export type InputPhoneNumberRef = {
+    focus: () => void;
+    blur: () => void;
+};
+type Props = {
+    ref?: Ref<InputPhoneNumberRef>;
+    id?: string;
+    country: Country;
+    value: string;
+    countries?: CountryCCA3[];
+    error?: string;
+    help?: string;
+    valid?: boolean;
+    autofocus?: boolean;
+    disabled?: boolean;
+    readOnly?: boolean;
+    countryAriaLabel?: string;
+    hideErrors?: boolean;
+    onCountryChange: (country: Country) => void;
+    onChangeText: (text: string) => void;
+    onSubmitEditing?: () => void;
+    onBlur?: () => void;
+};
+export declare const InputPhoneNumber: ({ ref, id, country, value, countries, error, help, valid, autofocus, disabled, readOnly, countryAriaLabel, hideErrors, onCountryChange, onChangeText, onSubmitEditing, onBlur, }: Props) => import("react/jsx-runtime").JSX.Element;
+export {};

package/src/components/InputPhoneNumber.js

@@ -0,0 +1,47 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Box } from "@swan-io/lake/src/components/Box";
+import { LakeText } from "@swan-io/lake/src/components/LakeText";
+import { LakeTextInput } from "@swan-io/lake/src/components/LakeTextInput";
+import { Space } from "@swan-io/lake/src/components/Space";
+import { colors } from "@swan-io/lake/src/constants/design";
+import { isNotNullishOrEmpty } from "@swan-io/lake/src/utils/nullish";
+import { useEffect, useImperativeHandle, useRef } from "react";
+import { StyleSheet } from "react-native";
+import { phoneCountries } from "../constants/countries";
+import { PhoneCountryPicker } from "./PhoneCountryPicker";
+const styles = StyleSheet.create({
+    picker: {
+        borderTopRightRadius: 0,
+        borderBottomRightRadius: 0,
+        borderRightWidth: 0,
+    },
+    pickerDisabled: {
+        borderRightWidth: 1,
+        borderRightColor: colors.gray[100],
+    },
+    input: {
+        borderTopLeftRadius: 0,
+        borderBottomLeftRadius: 0,
+    },
+});
+export const InputPhoneNumber = ({ ref, id, country, value, countries, error, help, valid = false, autofocus = false, disabled = false, readOnly = false, countryAriaLabel, hideErrors = false, onCountryChange, onChangeText, onSubmitEditing, onBlur, }) => {
+    var _a;
+    const inputRef = useRef(null);
+    const handleChangeText = (text) => {
+        const clean = text.replace(/[^ +0-9-()]/g, "");
+        if (text === clean) {
+            onChangeText(text);
+        }
+    };
+    useEffect(() => {
+        if (autofocus && inputRef.current) {
+            setTimeout(() => { var _a; return (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus(); }, 250);
+        }
+    }, [autofocus]);
+    useImperativeHandle(ref, () => ({
+        focus: () => { var _a; return (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus(); },
+        blur: () => { var _a; return (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.blur(); },
+    }), []);
+    const pickerStyle = [styles.picker, (disabled || readOnly) && styles.pickerDisabled];
+    return (_jsxs(_Fragment, { children: [_jsxs(Box, { direction: "row", children: [_jsx(PhoneCountryPicker, { value: country, countries: countries !== null && countries !== void 0 ? countries : phoneCountries, onValueChange: onCountryChange, disabled: disabled, readOnly: readOnly, error: error, ariaLabel: countryAriaLabel, style: pickerStyle }), _jsx(LakeTextInput, { id: id, ref: inputRef, autoComplete: "tel", inputMode: "tel", rows: 1, hideErrors: true, value: value, valid: valid, error: error, disabled: disabled, readOnly: readOnly, onChangeText: handleChangeText, onSubmitEditing: onSubmitEditing, onBlur: onBlur, style: styles.input })] }), !hideErrors && (_jsxs(_Fragment, { children: [_jsx(Space, { height: 4 }), _jsx(LakeText, { variant: "smallRegular", color: isNotNullishOrEmpty(error) ? colors.negative[500] : colors.gray[500], children: (_a = error !== null && error !== void 0 ? error : help) !== null && _a !== void 0 ? _a : " " })] }))] }));
+};

package/src/components/PhoneCountryPicker.d.ts

@@ -0,0 +1,14 @@
+import { StyleProp, ViewStyle } from "react-native";
+import { Country, CountryCCA3 } from "../constants/countries";
+type Props = {
+    value: Country;
+    onValueChange: (country: Country) => void;
+    countries: CountryCCA3[];
+    style?: StyleProp<ViewStyle>;
+    disabled?: boolean;
+    readOnly?: boolean;
+    error?: string;
+    ariaLabel?: string;
+};
+export declare const PhoneCountryPicker: ({ value, onValueChange, countries, style, disabled, readOnly, error, ariaLabel, }: Props) => import("react/jsx-runtime").JSX.Element;
+export {};

package/src/components/PhoneCountryPicker.js

@@ -0,0 +1,110 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Box } from "@swan-io/lake/src/components/Box";
+import { FlatList } from "@swan-io/lake/src/components/FlatList";
+import { Icon } from "@swan-io/lake/src/components/Icon";
+import { LakeText } from "@swan-io/lake/src/components/LakeText";
+import { Popover } from "@swan-io/lake/src/components/Popover";
+import { Pressable } from "@swan-io/lake/src/components/Pressable";
+import { Separator } from "@swan-io/lake/src/components/Separator";
+import { Space } from "@swan-io/lake/src/components/Space";
+import { colors, radii, spacings, texts } from "@swan-io/lake/src/constants/design";
+import { useDebounce } from "@swan-io/lake/src/hooks/useDebounce";
+import { useDisclosure } from "@swan-io/lake/src/hooks/useDisclosure";
+import { isNotNullish, isNotNullishOrEmpty } from "@swan-io/lake/src/utils/nullish";
+import { deburr } from "@swan-io/lake/src/utils/string";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { StyleSheet, TextInput, View } from "react-native";
+import { getCountryByCCA3 } from "../constants/countries";
+import { Flag } from "./Flag";
+const ROW_HEIGHT = 48;
+const styles = StyleSheet.create({
+    trigger: {
+        alignItems: "center",
+        backgroundColor: colors.gray[50],
+        borderColor: colors.gray[100],
+        borderTopLeftRadius: radii[4],
+        borderTopRightRadius: radii[4],
+        borderBottomLeftRadius: radii[4],
+        borderBottomRightRadius: radii[4],
+        borderWidth: 1,
+        flexDirection: "row",
+        height: 40,
+        justifyContent: "center",
+        outlineStyle: "none",
+        paddingLeft: spacings[16],
+        paddingRight: spacings[12],
+        transitionDuration: "150ms",
+        transitionProperty: "background-color",
+    },
+    triggerPressed: { backgroundColor: colors.gray[100] },
+    triggerErrored: { borderColor: colors.negative[500] },
+    triggerDisabled: { borderColor: colors.gray[50] },
+    list: { height: 230 },
+    searchIcon: { position: "absolute", left: 16 },
+    searchInput: {
+        ...texts.regular,
+        color: colors.gray[700],
+        flexGrow: 1,
+        height: ROW_HEIGHT,
+        outlineStyle: "none",
+        paddingLeft: 44,
+    },
+    row: {
+        flexDirection: "row",
+        alignItems: "center",
+        height: ROW_HEIGHT,
+        paddingHorizontal: 16,
+        transitionProperty: "background-color",
+        transitionDuration: "150ms",
+    },
+    rowHovered: { backgroundColor: colors.gray[50] },
+    rowPressed: { backgroundColor: colors.gray[100] },
+    rowName: { flexGrow: 1 },
+});
+export const PhoneCountryPicker = ({ value, onValueChange, countries, style, disabled = false, readOnly = false, error, ariaLabel = "Select country", }) => {
+    const referenceRef = useRef(null);
+    const inputRef = useRef(null);
+    const [visible, { open, close }] = useDisclosure(false);
+    const allowedCountries = useMemo(() => countries
+        .filter((cca3, index, array) => array.indexOf(cca3) === index)
+        .map(cca3 => getCountryByCCA3(cca3)), [countries]);
+    const [filteredCountries, setFilteredCountries] = useState(allowedCountries);
+    useEffect(() => {
+        setFilteredCountries(allowedCountries);
+    }, [allowedCountries]);
+    useEffect(() => {
+        if (visible) {
+            setTimeout(() => { var _a; return (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus(); }, 250);
+        }
+    }, [visible]);
+    const handleOnChangeText = useDebounce(useCallback((text) => {
+        const cleaned = deburr(text.trim().toLowerCase());
+        if (cleaned === "") {
+            setFilteredCountries(allowedCountries);
+            return;
+        }
+        const filtered = allowedCountries.filter(country => country.deburr.includes(cleaned) ||
+            country.idd.includes(cleaned) ||
+            `+${country.idd}`.includes(cleaned));
+        setFilteredCountries(filtered);
+    }, [allowedCountries]), 200);
+    return (_jsxs(_Fragment, { children: [_jsxs(Pressable, { ref: referenceRef, role: "button", "aria-label": ariaLabel, disabled: visible || disabled || readOnly, onPress: open, style: ({ pressed }) => [
+                    styles.trigger,
+                    style,
+                    !visible && pressed && styles.triggerPressed,
+                    (disabled || readOnly) && styles.triggerDisabled,
+                    isNotNullishOrEmpty(error) && styles.triggerErrored,
+                ], children: [_jsx(Flag, { code: value.cca2, width: 16 }), _jsx(Space, { width: 8 }), _jsxs(LakeText, { color: colors.gray[600], numberOfLines: 1, userSelect: "none", variant: "smallSemibold", children: ["+", value.idd] }), _jsx(Space, { width: 8 }), _jsx(Icon, { name: "chevron-down-filled", color: colors.gray[600], size: 16 })] }), _jsx(Popover, { referenceRef: referenceRef, visible: visible, onDismiss: close, matchReferenceWidth: false, children: _jsxs(View, { style: styles.list, children: [_jsxs(Box, { direction: "row", alignItems: "center", children: [_jsx(Icon, { name: "search-filled", color: colors.gray[300], size: 18, style: styles.searchIcon }), _jsx(TextInput, { ref: inputRef, inputMode: "search", style: styles.searchInput, onChangeText: handleOnChangeText, onSubmitEditing: () => {
+                                        if (isNotNullish(filteredCountries[0])) {
+                                            onValueChange(filteredCountries[0]);
+                                            close();
+                                        }
+                                    } })] }), _jsx(Separator, {}), _jsx(FlatList, { data: filteredCountries, ItemSeparatorComponent: _jsx(Separator, {}), keyExtractor: item => item.uid, renderItem: ({ item }) => (_jsxs(Pressable, { role: "button", "aria-label": item.name, style: ({ hovered, pressed }) => [
+                                    styles.row,
+                                    hovered && styles.rowHovered,
+                                    pressed && styles.rowPressed,
+                                ], onPress: () => {
+                                    onValueChange(item);
+                                    close();
+                                }, children: [_jsx(Flag, { code: item.cca2, width: 16 }), _jsx(Space, { width: 12 }), _jsx(LakeText, { numberOfLines: 1, style: styles.rowName, userSelect: "none", variant: "smallRegular", children: item.name }), item.uid === value.uid && (_jsxs(_Fragment, { children: [_jsx(Space, { width: 12 }), _jsx(Icon, { name: "checkmark-filled", color: colors.positive[500], size: 16 })] })), _jsx(Space, { width: 12 }), _jsxs(LakeText, { userSelect: "none", variant: "smallRegular", children: ["+", item.idd] })] })) })] }) })] }));
+};

package/src/constants/countries.d.ts

@@ -1502,6 +1502,7 @@ export declare const france: {
     uid: string;
     flag: string;
 };
+export declare const phoneCountries: ("ALA" | "ASM" | "AND" | "AGO" | "AIA" | "ATA" | "ATG" | "ARG" | "ABW" | "AUS" | "AZE" | "BHS" | "BGD" | "BRB" | "BEL" | "BLZ" | "BEN" | "BMU" | "BOL" | "BES" | "BIH" | "BWA" | "BVT" | "BRA" | "VGB" | "BFA" | "BDI" | "CPV" | "CMR" | "CAN" | "CYM" | "CZE" | "CHL" | "CXR" | "CCK" | "COL" | "COK" | "CRI" | "CIV" | "CUB" | "CUW" | "DNK" | "DEU" | "DJI" | "DMA" | "ECU" | "EST" | "IRL" | "SLV" | "ESP" | "FLK" | "FJI" | "FRO" | "FRA" | "GAB" | "GMB" | "GHA" | "GIB" | "GRD" | "GLP" | "GUM" | "GTM" | "GGY" | "GNB" | "GNQ" | "GIN" | "GUY" | "GUF" | "HTI" | "HMD" | "HND" | "HRV" | "IDN" | "ISL" | "IMN" | "ITA" | "JAM" | "JEY" | "GRL" | "KHM" | "KAZ" | "KEN" | "KIR" | "CAF" | "COM" | "REU" | "LVA" | "LSO" | "LBR" | "LIE" | "LTU" | "LUX" | "MDG" | "HUN" | "MHL" | "MWI" | "MYS" | "MDV" | "MLI" | "MLT" | "MTQ" | "MUS" | "MYT" | "MEX" | "FSM" | "MOZ" | "MDA" | "MCO" | "MSR" | "NAM" | "NLD" | "BRN" | "NZL" | "NIC" | "NER" | "NGA" | "NIU" | "NFK" | "NOR" | "MNP" | "NCL" | "AUT" | "UZB" | "PAK" | "PLW" | "PAN" | "PNG" | "PRY" | "PER" | "PHL" | "PCN" | "POL" | "PYF" | "PRT" | "PRI" | "DOM" | "XKX" | "COD" | "COG" | "ROU" | "RWA" | "KNA" | "LCA" | "VCT" | "BLM" | "MAF" | "SPM" | "WSM" | "SMR" | "STP" | "CHE" | "SEN" | "SYC" | "ALB" | "SLE" | "SGP" | "SVN" | "SVK" | "SLB" | "SOM" | "ZAF" | "SGS" | "SSD" | "LKA" | "FIN" | "SUR" | "SWE" | "SWZ" | "TZA" | "TCD" | "ATF" | "TLS" | "TGO" | "TON" | "TTO" | "TUR" | "TKM" | "TCA" | "TUV" | "UGA" | "GBR" | "USA" | "UMI" | "VIR" | "URY" | "VUT" | "VAT" | "VEN" | "VNM" | "WLF" | "ZMB" | "ZWE" | "BTN" | "GRC" | "CYP" | "BLR" | "BGR" | "KGZ" | "MKD" | "MNG" | "RUS" | "SRB" | "TJK" | "UKR" | "MNE" | "ARM" | "ISR" | "AFG" | "JOR" | "DZA" | "SDN" | "ESH" | "IRQ" | "SAU" | "KWT" | "MAR" | "YEM" | "IRN" | "TUN" | "ARE" | "SYR" | "OMN" | "PSE" | "QAT" | "LBN" | "EGY" | "MRT" | "NPL" | "IND" | "THA" | "LAO" | "MMR" | "GEO" | "ETH" | "ERI" | "BHR" | "LBY" | "CHN" | "JPN" | "MAC" | "TWN" | "HKG" | "KOR" | "PRK")[];
 export declare const individualCountries: ("BEL" | "CZE" | "DNK" | "DEU" | "EST" | "IRL" | "ESP" | "FRA" | "HRV" | "ISL" | "ITA" | "LVA" | "LIE" | "LTU" | "LUX" | "HUN" | "MLT" | "NLD" | "NOR" | "AUT" | "POL" | "PRT" | "ROU" | "SVN" | "SVK" | "FIN" | "SWE" | "GRC" | "CYP" | "BGR")[];
 export type IndividualCountryCCA3 = (typeof individualCountries)[number];
 export declare const companyCountries: ("BEL" | "CZE" | "DNK" | "DEU" | "EST" | "IRL" | "ESP" | "FRA" | "HRV" | "ISL" | "ITA" | "LVA" | "LIE" | "LTU" | "LUX" | "HUN" | "MLT" | "NLD" | "NOR" | "AUT" | "POL" | "PRT" | "ROU" | "SVN" | "SVK" | "FIN" | "SWE" | "GRC" | "CYP" | "BGR")[];

package/src/constants/countries.js

@@ -1768,6 +1768,8 @@ export const getCCA3forCCA2 = (cca2) => countriesByCCA2[cca2].cca3;
 export const companyWithUboCountries = ["BEL", "DEU", "FRA", "ITA", "LTU", "LUX", "NLD"];
 export const allCountries = countries.map(country => country.cca3);
 export const france = countriesByCCA3["FRA"];
+const blockedPhoneCountries = ["CUB", "SYR", "IRN", "PRK", "RUS"];
+export const phoneCountries = allCountries.filter(cca3 => !blockedPhoneCountries.includes(cca3));
 export const individualCountries = [
     "AUT",
     "BEL",