@trackunit/react-form-components 0.0.226 → 0.0.228

package/index.cjs.js

@@ -44,7 +44,7 @@ var ReactCreatableSelect__default = /*#__PURE__*/_interopDefaultLegacy(ReactCrea
 var ReactAsyncSelect__default = /*#__PURE__*/_interopDefaultLegacy(ReactAsyncSelect);
 
 var defaultTranslations = {
-	
+	"phoneField.error": "Invalid phone number"
 };
 
 /** The translation namespace for this library */
@@ -78,6 +78,10 @@ const translations = {
         th: () => Promise.resolve().then(function () { return require('./translation.cjs17.js'); }),
     },
 };
+/**
+ *  Local useTranslation for this specific library
+ */
+const useTranslation = () => i18nLibraryTranslation.useNamespaceTranslation(namespace);
 /**
  * Registers the translations for this library
  */
@@ -779,6 +783,38 @@ const getPhoneNumberWithPlus = (phoneNumber) => {
     const stringPhoneNumber = phoneNumber.toString();
     return checkIfPhoneNumberHasPlus(stringPhoneNumber) ? stringPhoneNumber : `+${stringPhoneNumber}`;
 };
+/**
+ * Generates a flag emoji based on the given country code.
+ *
+ * @param {string} countryCode - The two-letter country code (ISO 3166-1 alpha-2).
+ * @returns {string} - The corresponding flag emoji for the given country code.
+ * @example getPhoneNumberWithPlus("DK") // "🇩🇰"
+ */
+const countryCodeToFlagEmoji = (countryCode) => {
+    let code = countryCode;
+    if (countryCode.startsWith("+")) {
+        code = getCountryAbbreviation(countryCode.substring(1));
+    }
+    else if (!isNaN(Number(countryCode))) {
+        code = getCountryAbbreviation(countryCode);
+    }
+    return code.toUpperCase().replace(/./g, char => String.fromCodePoint(127397 + char.charCodeAt(0)));
+};
+/**
+ * Retrieves the ISO 3166-1 alpha-2 country code associated with a given international calling code.
+ *
+ * @param {string} callCode - The international calling code for a country.
+ * @returns {string} The abbreviation for a country or an empty string if no matching country is found.
+ * @example getCountryAbbreviation("45") // "DK"
+ * @example getCountryAbbreviation("+45") // "DK"
+ */
+const getCountryAbbreviation = (callCode) => {
+    let code = callCode;
+    if (callCode.startsWith("+")) {
+        code = callCode.substring(1);
+    }
+    return parsePhoneNumberFromString.getCountries().find(c => parsePhoneNumberFromString.getCountryCallingCode(c) === code) || "";
+};
 
 /**
  * A custom hook for managing phone number input state and validation.
@@ -1268,7 +1304,7 @@ const Select = (props) => {
 };
 Select.displayName = "Select";
 
-const COUNTRY_CODES_NOT_SUPPORTED_BY_BACKEND = ["53", "98", "211", "247", "249", "383", "850", "963"];
+const COUNTRY_CODES_NOT_SUPPORTED_BY_BACKEND = ["+53", "+98", "+211", "+247", "+249", "+383", "+850", "+963"];
 const ADDITIONAL_COUNTRY_CODES_SUPPORTED_BY_BACKEND = [
     "1242",
     "1246",
@@ -1298,13 +1334,73 @@ const ADDITIONAL_COUNTRY_CODES_SUPPORTED_BY_BACKEND = [
     "882",
     "883",
 ];
-const countryCodesSet = [
-    ...new Set(parsePhoneNumberFromString.getCountries().map(code => parsePhoneNumberFromString.getCountryCallingCode(code))),
-    ...ADDITIONAL_COUNTRY_CODES_SUPPORTED_BY_BACKEND,
-]
-    .filter(code => !COUNTRY_CODES_NOT_SUPPORTED_BY_BACKEND.includes(code))
-    .sort((a, b) => Number(a) - Number(b));
-const countryCodes = countryCodesSet.map(code => ({ label: `+${code}`, value: `+${code}` })); // We add the + sign to the value so that the google libphonenumber-js can parse it correctly.
+const DUPLICATE_COUNTRY_CODES = [
+    // +1
+    "AG",
+    "AI",
+    "AS",
+    "BB",
+    "BM",
+    "BS",
+    "CA",
+    "DM",
+    "DO",
+    "GD",
+    "GU",
+    "JM",
+    "KN",
+    "KY",
+    "LC",
+    "MP",
+    "MS",
+    "PR",
+    "SX",
+    "TC",
+    "TT",
+    "VC",
+    "VG",
+    "VI",
+    // +7
+    "KZ",
+    // +39
+    "VA",
+    // +44
+    "GG",
+    "IM",
+    "JE",
+    // +47
+    "SJ",
+    // +61
+    "CC",
+    "CX",
+    // 212
+    "EH",
+    // 262
+    "RE",
+    // 290
+    "SH",
+    // 590
+    "BL",
+    "MF",
+    // 599
+    "CW",
+];
+const countries = parsePhoneNumberFromString.getCountries()
+    .filter(code => !DUPLICATE_COUNTRY_CODES.includes(code))
+    .map(code => {
+    const c = parsePhoneNumberFromString.getCountryCallingCode(code);
+    return {
+        label: `+${c} ${countryCodeToFlagEmoji(code)}`,
+        value: `+${c}`,
+    };
+});
+const additionalCountries = ADDITIONAL_COUNTRY_CODES_SUPPORTED_BY_BACKEND.map(code => ({
+    label: `+${code}`,
+    value: `+${code}`,
+}));
+const countryCodes = [...countries, ...additionalCountries]
+    .filter(code => !COUNTRY_CODES_NOT_SUPPORTED_BY_BACKEND.includes(code.value))
+    .sort((a, b) => Number(a.value) - Number(b.value));
 
 /**
  * The CountryCodeSelect component is used to select a country code for a phone number.
@@ -1320,7 +1416,7 @@ const CountryCodeSelect = ({ excludedCountries, countryCode, isInvalid, onChange
     const filteredCodes = countryCodes.filter(code => {
         return !(excludedCountries === null || excludedCountries === void 0 ? void 0 : excludedCountries.some(excludedCode => excludedCode.value === code.value));
     });
-    return (jsxRuntime.jsx(Select, { dataTestId: dataTestId, className: "w-32", "aria-invalid": isCountryCodeMissing, options: filteredCodes.map(code => code), value: filteredCodes.find(({ value }) => value === `+${countryCode}`), placeholder: placeholder, hasError: isCountryCodeMissing || isInvalid, maxMenuHeight: 200, onChange: onChange, disabled: disabled, readOnly: readOnly, onBlur: onBlur, closeMenuOnSelect: true, menuIsOpen: readOnly ? false : undefined, isClearable: isClearable }));
+    return (jsxRuntime.jsx(Select, { dataTestId: dataTestId, className: "w-36", "aria-invalid": isCountryCodeMissing, options: filteredCodes.map(code => code), value: filteredCodes.find(({ value }) => value === `+${countryCode}`), placeholder: placeholder, hasError: isCountryCodeMissing || isInvalid, maxMenuHeight: 200, onChange: onChange, disabled: disabled, readOnly: readOnly, onBlur: onBlur, closeMenuOnSelect: true, menuIsOpen: readOnly ? false : undefined, isClearable: isClearable }));
 };
 
 /**
@@ -1338,7 +1434,16 @@ const PhoneInput = React.forwardRef((_a, ref) => {
     var { dataTestId, isInvalid, disabled = false, value, defaultValue, fieldSize = "medium", disableAction = false, onChange, onBlurCountryCode, readOnly, countryCodePlaceholder, onChangeCountryCode, onBlur, onFieldsBlur, onChangeValue, isCountryCodeClearable } = _a, rest = __rest(_a, ["dataTestId", "isInvalid", "disabled", "value", "defaultValue", "fieldSize", "disableAction", "onChange", "onBlurCountryCode", "readOnly", "countryCodePlaceholder", "onChangeCountryCode", "onBlur", "onFieldsBlur", "onChangeValue", "isCountryCodeClearable"]);
     const DEFAULT_COUNTRY_CODE = "+45";
     const { getPhoneNumber } = usePhoneInput();
-    const countryCodePlaceholderValue = !readOnly ? countryCodePlaceholder || DEFAULT_COUNTRY_CODE : "";
+    const [placeholder, setPlaceholder] = React.useState();
+    React.useEffect(() => {
+        if (readOnly) {
+            setPlaceholder("");
+        }
+        else {
+            const countryCode = countryCodePlaceholder || DEFAULT_COUNTRY_CODE;
+            setPlaceholder(`${countryCode} ${countryCodeToFlagEmoji(countryCode)}`);
+        }
+    }, [countryCodePlaceholder, readOnly]);
     const safePhoneNumber = getPhoneNumberWithPlus(value || "");
     const number = parsePhoneNumberFromString__default["default"](safePhoneNumber, { defaultCountry: "DK" });
     const valueHasOnlyCountryCode = (number === null || number === void 0 ? void 0 : number.isPossible) === undefined && typeof value === "string" && value[0] === "+" && value.length < 5;
@@ -1387,7 +1492,7 @@ const PhoneInput = React.forwardRef((_a, ref) => {
                 }, onChange: e => {
                     var _a;
                     onCodeChangeHandler((_a = e === null || e === void 0 ? void 0 : e.value) !== null && _a !== void 0 ? _a : "");
-                }, disabled: disabled, readOnly: readOnly, isInvalid: isInvalid, placeholder: countryCodePlaceholderValue, isClearable: isCountryCodeClearable }), jsxRuntime.jsx(BaseInput, Object.assign({ id: "phoneInput-number", dataTestId: dataTestId && `${dataTestId}-phoneNumberInput`, fieldSize: fieldSize, type: "tel", value: phone, disabled: disabled, readOnly: readOnly, isInvalid: isInvalid, onChange: e => {
+                }, disabled: disabled, readOnly: readOnly, isInvalid: isInvalid, placeholder: placeholder, isClearable: isCountryCodeClearable }), jsxRuntime.jsx(BaseInput, Object.assign({ id: "phoneInput-number", dataTestId: dataTestId && `${dataTestId}-phoneNumberInput`, fieldSize: fieldSize, type: "tel", value: phone, disabled: disabled, readOnly: readOnly, isInvalid: isInvalid, onChange: e => {
                     onPhoneChangeHandler(e.target.value);
                 }, onBlur: () => {
                     onBlurHandler();
@@ -1413,8 +1518,24 @@ const PhoneInput = React.forwardRef((_a, ref) => {
 const PhoneField = React.forwardRef((_a, ref) => {
     var { label, id, tip, helpText, isInvalid, errorMessage, value, helpAddon, className, defaultValue, dataTestId, onChangeValue, onFieldsBlur } = _a, rest = __rest(_a, ["label", "id", "tip", "helpText", "isInvalid", "errorMessage", "value", "helpAddon", "className", "defaultValue", "dataTestId", "onChangeValue", "onFieldsBlur"]);
     const htmlForId = id ? id : "phoneField-" + uuid.v4();
-    const renderAsInvalid = isInvalid || Boolean(errorMessage);
-    return (jsxRuntime.jsx(FormGroup, { htmlFor: htmlForId, label: label, tip: tip, isInvalid: renderAsInvalid, helpText: (renderAsInvalid && errorMessage) || helpText, helpAddon: helpAddon, disabled: rest.disabled, className: className, dataTestId: dataTestId && `${dataTestId}-FormGroup`, children: jsxRuntime.jsx(PhoneInput, Object.assign({ id: htmlForId, "aria-labelledby": htmlForId + "-label", value: value, defaultValue: defaultValue, ref: ref, isInvalid: renderAsInvalid, dataTestId: dataTestId, onChangeValue: onChangeValue, onFieldsBlur: onFieldsBlur }, rest)) }));
+    const [t] = useTranslation();
+    const [isValid, setIsValid] = React.useState(true);
+    const renderAsInvalid = !isValid || isInvalid || Boolean(errorMessage);
+    const onChangeValueHandler = ({ phone, national, countryCode }) => {
+        if (!isValid && countryCode) {
+            const countryAbbreviation = getCountryAbbreviation(countryCode);
+            setIsValid(phone && national && countryAbbreviation ? parsePhoneNumberFromString.isValidPhoneNumber(phone, countryAbbreviation) : true);
+        }
+        onChangeValue && onChangeValue({ phone, national, countryCode, isValid });
+    };
+    const handleOnFieldBlur = ({ phone, national, countryCode }) => {
+        if (countryCode) {
+            const countryAbbreviation = getCountryAbbreviation(countryCode);
+            setIsValid(phone && national && countryAbbreviation ? parsePhoneNumberFromString.isValidPhoneNumber(phone, countryAbbreviation) : true);
+        }
+        onFieldsBlur && onFieldsBlur({ phone, national, countryCode, isValid });
+    };
+    return (jsxRuntime.jsx(FormGroup, { htmlFor: htmlForId, label: label, tip: tip, isInvalid: renderAsInvalid, helpText: (renderAsInvalid && (errorMessage || t("phoneField.error"))) || helpText, helpAddon: helpAddon, disabled: rest.disabled, className: className, dataTestId: dataTestId && `${dataTestId}-FormGroup`, children: jsxRuntime.jsx(PhoneInput, Object.assign({ id: htmlForId, "aria-labelledby": htmlForId + "-label", value: value, defaultValue: defaultValue, ref: ref, isInvalid: renderAsInvalid, dataTestId: dataTestId, onChangeValue: onChangeValueHandler, onFieldsBlur: handleOnFieldBlur }, rest)) }));
 });
 
 /**
@@ -2069,6 +2190,7 @@ exports.Toggle = Toggle;
 exports.UploadField = UploadField;
 exports.UploadInput = UploadInput;
 exports.checkIfPhoneNumberHasPlus = checkIfPhoneNumberHasPlus;
+exports.countryCodeToFlagEmoji = countryCodeToFlagEmoji;
 exports.cvaInput = cvaInput;
 exports.cvaInputAddon = cvaInputAddon;
 exports.cvaInputAddonAfter = cvaInputAddonAfter;
@@ -2087,6 +2209,7 @@ exports.cvaSelectMenu = cvaSelectMenu;
 exports.cvaSelectMenuList = cvaSelectMenuList;
 exports.cvaSelectPrefix = cvaSelectPrefix;
 exports.cvaSelectXIcon = cvaSelectXIcon;
+exports.getCountryAbbreviation = getCountryAbbreviation;
 exports.getOrderedOptions = getOrderedOptions;
 exports.getPhoneNumberWithPlus = getPhoneNumberWithPlus;
 exports.isInvalidCountryCode = isInvalidCountryCode;

package/index.esm.js

@@ -1,12 +1,12 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { registerTranslations } from '@trackunit/i18n-library-translation';
+import { useNamespaceTranslation, registerTranslations } from '@trackunit/i18n-library-translation';
 import { IconButton, Icon, Tip, Heading, Text, MenuItem, Tag, Spinner } from '@trackunit/react-components';
 import { cvaMerge } from '@trackunit/css-class-variance-utilities';
 import * as React from 'react';
 import React__default, { useMemo, forwardRef, useState, cloneElement, useEffect, useRef } from 'react';
 import { v4 } from 'uuid';
 import { format } from 'date-fns';
-import parsePhoneNumberFromString, { getCountries, getCountryCallingCode, parsePhoneNumberFromString as parsePhoneNumberFromString$1, isValidPhoneNumber, validatePhoneNumberLength } from 'libphonenumber-js';
+import parsePhoneNumberFromString, { getCountries, getCountryCallingCode, isValidPhoneNumber, parsePhoneNumberFromString as parsePhoneNumberFromString$1, validatePhoneNumberLength } from 'libphonenumber-js';
 import ReactSelect, { components } from 'react-select';
 export { default as ValueType } from 'react-select';
 import ReactAsyncCreatableSelect from 'react-select/async-creatable';
@@ -14,7 +14,7 @@ import ReactCreatableSelect from 'react-select/creatable';
 import ReactAsyncSelect from 'react-select/async';
 
 var defaultTranslations = {
-	
+	"phoneField.error": "Invalid phone number"
 };
 
 /** The translation namespace for this library */
@@ -48,6 +48,10 @@ const translations = {
         th: () => import('./translation.esm17.js'),
     },
 };
+/**
+ *  Local useTranslation for this specific library
+ */
+const useTranslation = () => useNamespaceTranslation(namespace);
 /**
  * Registers the translations for this library
  */
@@ -749,6 +753,38 @@ const getPhoneNumberWithPlus = (phoneNumber) => {
     const stringPhoneNumber = phoneNumber.toString();
     return checkIfPhoneNumberHasPlus(stringPhoneNumber) ? stringPhoneNumber : `+${stringPhoneNumber}`;
 };
+/**
+ * Generates a flag emoji based on the given country code.
+ *
+ * @param {string} countryCode - The two-letter country code (ISO 3166-1 alpha-2).
+ * @returns {string} - The corresponding flag emoji for the given country code.
+ * @example getPhoneNumberWithPlus("DK") // "🇩🇰"
+ */
+const countryCodeToFlagEmoji = (countryCode) => {
+    let code = countryCode;
+    if (countryCode.startsWith("+")) {
+        code = getCountryAbbreviation(countryCode.substring(1));
+    }
+    else if (!isNaN(Number(countryCode))) {
+        code = getCountryAbbreviation(countryCode);
+    }
+    return code.toUpperCase().replace(/./g, char => String.fromCodePoint(127397 + char.charCodeAt(0)));
+};
+/**
+ * Retrieves the ISO 3166-1 alpha-2 country code associated with a given international calling code.
+ *
+ * @param {string} callCode - The international calling code for a country.
+ * @returns {string} The abbreviation for a country or an empty string if no matching country is found.
+ * @example getCountryAbbreviation("45") // "DK"
+ * @example getCountryAbbreviation("+45") // "DK"
+ */
+const getCountryAbbreviation = (callCode) => {
+    let code = callCode;
+    if (callCode.startsWith("+")) {
+        code = callCode.substring(1);
+    }
+    return getCountries().find(c => getCountryCallingCode(c) === code) || "";
+};
 
 /**
  * A custom hook for managing phone number input state and validation.
@@ -1238,7 +1274,7 @@ const Select = (props) => {
 };
 Select.displayName = "Select";
 
-const COUNTRY_CODES_NOT_SUPPORTED_BY_BACKEND = ["53", "98", "211", "247", "249", "383", "850", "963"];
+const COUNTRY_CODES_NOT_SUPPORTED_BY_BACKEND = ["+53", "+98", "+211", "+247", "+249", "+383", "+850", "+963"];
 const ADDITIONAL_COUNTRY_CODES_SUPPORTED_BY_BACKEND = [
     "1242",
     "1246",
@@ -1268,13 +1304,73 @@ const ADDITIONAL_COUNTRY_CODES_SUPPORTED_BY_BACKEND = [
     "882",
     "883",
 ];
-const countryCodesSet = [
-    ...new Set(getCountries().map(code => getCountryCallingCode(code))),
-    ...ADDITIONAL_COUNTRY_CODES_SUPPORTED_BY_BACKEND,
-]
-    .filter(code => !COUNTRY_CODES_NOT_SUPPORTED_BY_BACKEND.includes(code))
-    .sort((a, b) => Number(a) - Number(b));
-const countryCodes = countryCodesSet.map(code => ({ label: `+${code}`, value: `+${code}` })); // We add the + sign to the value so that the google libphonenumber-js can parse it correctly.
+const DUPLICATE_COUNTRY_CODES = [
+    // +1
+    "AG",
+    "AI",
+    "AS",
+    "BB",
+    "BM",
+    "BS",
+    "CA",
+    "DM",
+    "DO",
+    "GD",
+    "GU",
+    "JM",
+    "KN",
+    "KY",
+    "LC",
+    "MP",
+    "MS",
+    "PR",
+    "SX",
+    "TC",
+    "TT",
+    "VC",
+    "VG",
+    "VI",
+    // +7
+    "KZ",
+    // +39
+    "VA",
+    // +44
+    "GG",
+    "IM",
+    "JE",
+    // +47
+    "SJ",
+    // +61
+    "CC",
+    "CX",
+    // 212
+    "EH",
+    // 262
+    "RE",
+    // 290
+    "SH",
+    // 590
+    "BL",
+    "MF",
+    // 599
+    "CW",
+];
+const countries = getCountries()
+    .filter(code => !DUPLICATE_COUNTRY_CODES.includes(code))
+    .map(code => {
+    const c = getCountryCallingCode(code);
+    return {
+        label: `+${c} ${countryCodeToFlagEmoji(code)}`,
+        value: `+${c}`,
+    };
+});
+const additionalCountries = ADDITIONAL_COUNTRY_CODES_SUPPORTED_BY_BACKEND.map(code => ({
+    label: `+${code}`,
+    value: `+${code}`,
+}));
+const countryCodes = [...countries, ...additionalCountries]
+    .filter(code => !COUNTRY_CODES_NOT_SUPPORTED_BY_BACKEND.includes(code.value))
+    .sort((a, b) => Number(a.value) - Number(b.value));
 
 /**
  * The CountryCodeSelect component is used to select a country code for a phone number.
@@ -1290,7 +1386,7 @@ const CountryCodeSelect = ({ excludedCountries, countryCode, isInvalid, onChange
     const filteredCodes = countryCodes.filter(code => {
         return !(excludedCountries === null || excludedCountries === void 0 ? void 0 : excludedCountries.some(excludedCode => excludedCode.value === code.value));
     });
-    return (jsx(Select, { dataTestId: dataTestId, className: "w-32", "aria-invalid": isCountryCodeMissing, options: filteredCodes.map(code => code), value: filteredCodes.find(({ value }) => value === `+${countryCode}`), placeholder: placeholder, hasError: isCountryCodeMissing || isInvalid, maxMenuHeight: 200, onChange: onChange, disabled: disabled, readOnly: readOnly, onBlur: onBlur, closeMenuOnSelect: true, menuIsOpen: readOnly ? false : undefined, isClearable: isClearable }));
+    return (jsx(Select, { dataTestId: dataTestId, className: "w-36", "aria-invalid": isCountryCodeMissing, options: filteredCodes.map(code => code), value: filteredCodes.find(({ value }) => value === `+${countryCode}`), placeholder: placeholder, hasError: isCountryCodeMissing || isInvalid, maxMenuHeight: 200, onChange: onChange, disabled: disabled, readOnly: readOnly, onBlur: onBlur, closeMenuOnSelect: true, menuIsOpen: readOnly ? false : undefined, isClearable: isClearable }));
 };
 
 /**
@@ -1308,7 +1404,16 @@ const PhoneInput = forwardRef((_a, ref) => {
     var { dataTestId, isInvalid, disabled = false, value, defaultValue, fieldSize = "medium", disableAction = false, onChange, onBlurCountryCode, readOnly, countryCodePlaceholder, onChangeCountryCode, onBlur, onFieldsBlur, onChangeValue, isCountryCodeClearable } = _a, rest = __rest(_a, ["dataTestId", "isInvalid", "disabled", "value", "defaultValue", "fieldSize", "disableAction", "onChange", "onBlurCountryCode", "readOnly", "countryCodePlaceholder", "onChangeCountryCode", "onBlur", "onFieldsBlur", "onChangeValue", "isCountryCodeClearable"]);
     const DEFAULT_COUNTRY_CODE = "+45";
     const { getPhoneNumber } = usePhoneInput();
-    const countryCodePlaceholderValue = !readOnly ? countryCodePlaceholder || DEFAULT_COUNTRY_CODE : "";
+    const [placeholder, setPlaceholder] = useState();
+    useEffect(() => {
+        if (readOnly) {
+            setPlaceholder("");
+        }
+        else {
+            const countryCode = countryCodePlaceholder || DEFAULT_COUNTRY_CODE;
+            setPlaceholder(`${countryCode} ${countryCodeToFlagEmoji(countryCode)}`);
+        }
+    }, [countryCodePlaceholder, readOnly]);
     const safePhoneNumber = getPhoneNumberWithPlus(value || "");
     const number = parsePhoneNumberFromString(safePhoneNumber, { defaultCountry: "DK" });
     const valueHasOnlyCountryCode = (number === null || number === void 0 ? void 0 : number.isPossible) === undefined && typeof value === "string" && value[0] === "+" && value.length < 5;
@@ -1357,7 +1462,7 @@ const PhoneInput = forwardRef((_a, ref) => {
                 }, onChange: e => {
                     var _a;
                     onCodeChangeHandler((_a = e === null || e === void 0 ? void 0 : e.value) !== null && _a !== void 0 ? _a : "");
-                }, disabled: disabled, readOnly: readOnly, isInvalid: isInvalid, placeholder: countryCodePlaceholderValue, isClearable: isCountryCodeClearable }), jsx(BaseInput, Object.assign({ id: "phoneInput-number", dataTestId: dataTestId && `${dataTestId}-phoneNumberInput`, fieldSize: fieldSize, type: "tel", value: phone, disabled: disabled, readOnly: readOnly, isInvalid: isInvalid, onChange: e => {
+                }, disabled: disabled, readOnly: readOnly, isInvalid: isInvalid, placeholder: placeholder, isClearable: isCountryCodeClearable }), jsx(BaseInput, Object.assign({ id: "phoneInput-number", dataTestId: dataTestId && `${dataTestId}-phoneNumberInput`, fieldSize: fieldSize, type: "tel", value: phone, disabled: disabled, readOnly: readOnly, isInvalid: isInvalid, onChange: e => {
                     onPhoneChangeHandler(e.target.value);
                 }, onBlur: () => {
                     onBlurHandler();
@@ -1383,8 +1488,24 @@ const PhoneInput = forwardRef((_a, ref) => {
 const PhoneField = forwardRef((_a, ref) => {
     var { label, id, tip, helpText, isInvalid, errorMessage, value, helpAddon, className, defaultValue, dataTestId, onChangeValue, onFieldsBlur } = _a, rest = __rest(_a, ["label", "id", "tip", "helpText", "isInvalid", "errorMessage", "value", "helpAddon", "className", "defaultValue", "dataTestId", "onChangeValue", "onFieldsBlur"]);
     const htmlForId = id ? id : "phoneField-" + v4();
-    const renderAsInvalid = isInvalid || Boolean(errorMessage);
-    return (jsx(FormGroup, { htmlFor: htmlForId, label: label, tip: tip, isInvalid: renderAsInvalid, helpText: (renderAsInvalid && errorMessage) || helpText, helpAddon: helpAddon, disabled: rest.disabled, className: className, dataTestId: dataTestId && `${dataTestId}-FormGroup`, children: jsx(PhoneInput, Object.assign({ id: htmlForId, "aria-labelledby": htmlForId + "-label", value: value, defaultValue: defaultValue, ref: ref, isInvalid: renderAsInvalid, dataTestId: dataTestId, onChangeValue: onChangeValue, onFieldsBlur: onFieldsBlur }, rest)) }));
+    const [t] = useTranslation();
+    const [isValid, setIsValid] = useState(true);
+    const renderAsInvalid = !isValid || isInvalid || Boolean(errorMessage);
+    const onChangeValueHandler = ({ phone, national, countryCode }) => {
+        if (!isValid && countryCode) {
+            const countryAbbreviation = getCountryAbbreviation(countryCode);
+            setIsValid(phone && national && countryAbbreviation ? isValidPhoneNumber(phone, countryAbbreviation) : true);
+        }
+        onChangeValue && onChangeValue({ phone, national, countryCode, isValid });
+    };
+    const handleOnFieldBlur = ({ phone, national, countryCode }) => {
+        if (countryCode) {
+            const countryAbbreviation = getCountryAbbreviation(countryCode);
+            setIsValid(phone && national && countryAbbreviation ? isValidPhoneNumber(phone, countryAbbreviation) : true);
+        }
+        onFieldsBlur && onFieldsBlur({ phone, national, countryCode, isValid });
+    };
+    return (jsx(FormGroup, { htmlFor: htmlForId, label: label, tip: tip, isInvalid: renderAsInvalid, helpText: (renderAsInvalid && (errorMessage || t("phoneField.error"))) || helpText, helpAddon: helpAddon, disabled: rest.disabled, className: className, dataTestId: dataTestId && `${dataTestId}-FormGroup`, children: jsx(PhoneInput, Object.assign({ id: htmlForId, "aria-labelledby": htmlForId + "-label", value: value, defaultValue: defaultValue, ref: ref, isInvalid: renderAsInvalid, dataTestId: dataTestId, onChangeValue: onChangeValueHandler, onFieldsBlur: handleOnFieldBlur }, rest)) }));
 });
 
 /**
@@ -2002,4 +2123,4 @@ const UploadField = forwardRef((_a, ref) => {
  */
 setupLibraryTranslations();
 
-export { ActionButton, BaseInput, Checkbox, CreatableSelect, DateField, DateInput, DropZone, EmailField, EmailInput, FormGroup, Label, MultiSelectMenuItem, NumberField, NumberInput, OptionCard, PhoneField, PhoneInput, RadioGroup, RadioItem, Schedule, ScheduleVariant, Search, Select, SingleSelectMenuItem, TextArea, TextAreaField, TextField, TextInput, TimeRange, TimeRangeField, Toggle, UploadField, UploadInput, checkIfPhoneNumberHasPlus, cvaInput, cvaInputAddon, cvaInputAddonAfter, cvaInputAddonBefore, cvaInputBase, cvaInputBaseDisabled, cvaInputBaseInvalid, cvaInputField, cvaInputPrefix, cvaInputSuffix, cvaSelect, cvaSelectCounter, cvaSelectDynamicTagContainer, cvaSelectIcon, cvaSelectMenu, cvaSelectMenuList, cvaSelectPrefix, cvaSelectXIcon, getOrderedOptions, getPhoneNumberWithPlus, isInvalidCountryCode, isInvalidPhoneNumber, isMultiValue, parseSchedule, serializeSchedule, useCustomComponents, usePhoneInput, validateEmailAddress, validatePhoneNumber, weekDay };
+export { ActionButton, BaseInput, Checkbox, CreatableSelect, DateField, DateInput, DropZone, EmailField, EmailInput, FormGroup, Label, MultiSelectMenuItem, NumberField, NumberInput, OptionCard, PhoneField, PhoneInput, RadioGroup, RadioItem, Schedule, ScheduleVariant, Search, Select, SingleSelectMenuItem, TextArea, TextAreaField, TextField, TextInput, TimeRange, TimeRangeField, Toggle, UploadField, UploadInput, checkIfPhoneNumberHasPlus, countryCodeToFlagEmoji, cvaInput, cvaInputAddon, cvaInputAddonAfter, cvaInputAddonBefore, cvaInputBase, cvaInputBaseDisabled, cvaInputBaseInvalid, cvaInputField, cvaInputPrefix, cvaInputSuffix, cvaSelect, cvaSelectCounter, cvaSelectDynamicTagContainer, cvaSelectIcon, cvaSelectMenu, cvaSelectMenuList, cvaSelectPrefix, cvaSelectXIcon, getCountryAbbreviation, getOrderedOptions, getPhoneNumberWithPlus, isInvalidCountryCode, isInvalidPhoneNumber, isMultiValue, parseSchedule, serializeSchedule, useCustomComponents, usePhoneInput, validateEmailAddress, validatePhoneNumber, weekDay };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/react-form-components",
-  "version": "0.0.226",
+  "version": "0.0.228",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {

package/src/components/PhoneInput/PhoneInput.d.ts

@@ -6,6 +6,7 @@ export interface PhoneNumberValue {
     phone?: string;
     national?: string;
     countryCode?: string;
+    isValid?: boolean;
 }
 export interface PhoneInputProps extends BaseInputExposedProps {
     /**

package/src/components/PhoneInput/PhoneNumberUtilities.d.ts

@@ -1,3 +1,4 @@
+import { CountryCode } from "libphonenumber-js";
 /**
  * @param phoneNumber - a phone number as a string
  * @returns {boolean} true if the phone number starts with a plus sign
@@ -11,3 +12,20 @@ export declare const checkIfPhoneNumberHasPlus: (phoneNumber: string) => boolean
  * @example getPhoneNumberWithPlus("123456789") // "+123456789"
  */
 export declare const getPhoneNumberWithPlus: (phoneNumber: string | number | readonly string[]) => string;
+/**
+ * Generates a flag emoji based on the given country code.
+ *
+ * @param {string} countryCode - The two-letter country code (ISO 3166-1 alpha-2).
+ * @returns {string} - The corresponding flag emoji for the given country code.
+ * @example getPhoneNumberWithPlus("DK") // "🇩🇰"
+ */
+export declare const countryCodeToFlagEmoji: (countryCode: string) => string;
+/**
+ * Retrieves the ISO 3166-1 alpha-2 country code associated with a given international calling code.
+ *
+ * @param {string} callCode - The international calling code for a country.
+ * @returns {string} The abbreviation for a country or an empty string if no matching country is found.
+ * @example getCountryAbbreviation("45") // "DK"
+ * @example getCountryAbbreviation("+45") // "DK"
+ */
+export declare const getCountryAbbreviation: (callCode: string) => CountryCode | "";

package/src/translation.d.ts

@@ -15,8 +15,8 @@ export declare const translations: TranslationResource<TranslationKeys>;
 /**
  *  Local useTranslation for this specific library
  */
-export declare const useTranslation: () => [TransForLibs<never>, import("i18next").i18n, boolean] & {
-    t: TransForLibs<never>;
+export declare const useTranslation: () => [TransForLibs<"phoneField.error">, import("i18next").i18n, boolean] & {
+    t: TransForLibs<"phoneField.error">;
     i18n: import("i18next").i18n;
     ready: boolean;
 };