@trackunit/react-form-components 0.0.22 → 0.0.23

package/index.cjs

@@ -9,11 +9,11 @@ var tailwindStyledComponents = require('@trackunit/tailwind-styled-components');
 var React = require('react');
 var uuid = require('uuid');
 var dateFns = require('date-fns');
+var libphonenumberJs = require('libphonenumber-js');
 var ReactSelect = require('react-select');
 var ReactAsyncCreatableSelect = require('react-select/async-creatable');
 var ReactCreatableSelect = require('react-select/creatable');
 var ReactAsyncSelect = require('react-select/async');
-var parsePhoneNumberFromString = require('libphonenumber-js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -41,7 +41,6 @@ var ReactSelect__default = /*#__PURE__*/_interopDefaultLegacy(ReactSelect);
 var ReactAsyncCreatableSelect__default = /*#__PURE__*/_interopDefaultLegacy(ReactAsyncCreatableSelect);
 var ReactCreatableSelect__default = /*#__PURE__*/_interopDefaultLegacy(ReactCreatableSelect);
 var ReactAsyncSelect__default = /*#__PURE__*/_interopDefaultLegacy(ReactAsyncSelect);
-var parsePhoneNumberFromString__default = /*#__PURE__*/_interopDefaultLegacy(parsePhoneNumberFromString);
 
 var defaultTranslations = {
 	
@@ -494,6 +493,80 @@ const Content = tailwindStyledComponents.tw.div `
   items-center
 `;
 
+/**
+ * @param phoneNumber - a phone number as a string
+ * @returns {boolean} true if the phone number starts with a plus sign
+ * @example checkIfPhoneNumberHasPlus("123456789") // false
+ * checkIfPhoneNumberHasPlus("+123456789") // true
+ */
+const checkIfPhoneNumberHasPlus = (phoneNumber) => {
+    return phoneNumber.startsWith("+");
+};
+/**
+ * @param phoneNumber - a phone number as a string
+ * @returns {string|number} the phone number with a plus sign in front of it
+ * @example getPhoneNumberWithPlus("123456789") // "+123456789"
+ */
+const getPhoneNumberWithPlus = (phoneNumber) => {
+    const stringPhoneNumber = phoneNumber.toString();
+    return checkIfPhoneNumberHasPlus(stringPhoneNumber) ? stringPhoneNumber : `+${stringPhoneNumber}`;
+};
+
+/**
+ * A custom hook for managing phone number input state and validation.
+ *
+ * @returns {object} - An object containing state values and event handler functions.
+ * @property {string} countryCode - The current country code value.
+ * @property {string} phoneNumber - The current phone number value.
+ * @property {boolean} isCountryCodeInvalid - Whether the country code value is invalid.
+ * @property {boolean} isPhoneNumberInvalid - Whether the phone number value is invalid.
+ * @property {Function} handleCountryCodeChange - A function for handling changes to the country code input.
+ * @property {Function} handlePhoneNumberChange - A function for handling changes to the phone number input.
+ * @property {string} combinedValue - The combined country code and phone number value.
+ */
+const usePhoneInput = (value) => {
+    const [countryCode, setCountryCode] = React.useState("");
+    const [phoneNumber, setPhoneNumber] = React.useState("");
+    const [isCountryCodeInvalid, setIsCountryCodeInvalid] = React.useState(false);
+    const [isPhoneNumberInvalid, setIsPhoneNumberInvalid] = React.useState(false);
+    const [isCombinedValueInvalid, setIsCombinedValueInvalid] = React.useState(false);
+    const [combinedValue, setCombinedValue] = React.useState(value !== null && value !== void 0 ? value : "");
+    React.useEffect(() => {
+        var _a, _b;
+        if (value) {
+            const safePhoneNumber = getPhoneNumberWithPlus(value);
+            const number = libphonenumberJs.parsePhoneNumberFromString(safePhoneNumber);
+            setCountryCode((_a = number === null || number === void 0 ? void 0 : number.countryCallingCode.toString()) !== null && _a !== void 0 ? _a : "");
+            setPhoneNumber((_b = number === null || number === void 0 ? void 0 : number.nationalNumber.toString()) !== null && _b !== void 0 ? _b : "");
+            setCombinedValue(`${countryCode}${phoneNumber}`);
+            combinedValue && setIsCombinedValueInvalid(libphonenumberJs.isPossiblePhoneNumber(combinedValue.toString()));
+        }
+    }, [combinedValue, countryCode, phoneNumber, value]);
+    const handleCountryCodeChange = (option) => {
+        var _a;
+        setCountryCode((_a = option === null || option === void 0 ? void 0 : option.value) !== null && _a !== void 0 ? _a : "");
+        setIsCountryCodeInvalid(!Boolean(option === null || option === void 0 ? void 0 : option.value));
+        setCombinedValue(`${option === null || option === void 0 ? void 0 : option.value}${phoneNumber}`);
+        combinedValue && setIsCombinedValueInvalid(libphonenumberJs.isPossiblePhoneNumber(combinedValue.toString()));
+    };
+    const handlePhoneNumberChange = (event) => {
+        setPhoneNumber(event.target.value);
+        setIsPhoneNumberInvalid(!event.target.value || !Boolean(event.target.value.trim()));
+        setCombinedValue(`${countryCode}${event.target.value}`);
+        combinedValue && setIsCombinedValueInvalid(libphonenumberJs.isPossiblePhoneNumber(combinedValue.toString()));
+    };
+    return {
+        countryCode,
+        phoneNumber,
+        isCountryCodeInvalid,
+        isPhoneNumberInvalid,
+        handleCountryCodeChange,
+        handlePhoneNumberChange,
+        combinedValue,
+        isCombinedValueInvalid,
+    };
+};
+
 /**
  * The SelectContainer component.
  *
@@ -975,7 +1048,7 @@ const ADDITIONAL_COUNTRY_CODES_SUPPORTED_BY_BACKEND = [
     "883",
 ];
 const countryCodesSet = [
-    ...new Set(parsePhoneNumberFromString.getCountries().map(code => parsePhoneNumberFromString.getCountryCallingCode(code))),
+    ...new Set(libphonenumberJs.getCountries().map(code => libphonenumberJs.getCountryCallingCode(code))),
     ...ADDITIONAL_COUNTRY_CODES_SUPPORTED_BY_BACKEND,
 ]
     .filter(code => !COUNTRY_CODES_NOT_SUPPORTED_BY_BACKEND.includes(code))
@@ -999,69 +1072,6 @@ const CountryCodeSelect = ({ excludedCountries, countryCode, isInvalid, onChange
     return (jsxRuntime.jsx(Select, { dataTestId: dataTestId, className: "w-28", "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 }));
 };
 
-/**
- * @param phoneNumber - a phone number as a string
- * @returns {boolean} true if the phone number starts with a plus sign
- * @example checkIfPhoneNumberHasPlus("123456789") // false
- * checkIfPhoneNumberHasPlus("+123456789") // true
- */
-const checkIfPhoneNumberHasPlus = (phoneNumber) => {
-    return phoneNumber.startsWith("+");
-};
-/**
- * @param phoneNumber - a phone number as a string
- * @returns {string|number} the phone number with a plus sign in front of it
- * @example getPhoneNumberWithPlus("123456789") // "+123456789"
- */
-const getPhoneNumberWithPlus = (phoneNumber) => {
-    const stringPhoneNumber = phoneNumber.toString();
-    return checkIfPhoneNumberHasPlus(stringPhoneNumber) ? stringPhoneNumber : `+${stringPhoneNumber}`;
-};
-
-/**
- * A custom hook for managing phone number input state and validation.
- *
- * @returns {object} - An object containing state values and event handler functions.
- * @property {string} countryCode - The current country code value.
- * @property {string} phoneNumber - The current phone number value.
- * @property {boolean} isCountryCodeInvalid - Whether the country code value is invalid.
- * @property {boolean} isPhoneNumberInvalid - Whether the phone number value is invalid.
- * @property {Function} handleCountryCodeChange - A function for handling changes to the country code input.
- * @property {Function} handlePhoneNumberChange - A function for handling changes to the phone number input.
- */
-const usePhoneInput = (initialValue) => {
-    const [countryCode, setCountryCode] = React.useState("");
-    const [phoneNumber, setPhoneNumber] = React.useState("");
-    const [isCountryCodeInvalid, setIsCountryCodeInvalid] = React.useState(false);
-    const [isPhoneNumberInvalid, setIsPhoneNumberInvalid] = React.useState(false);
-    React.useEffect(() => {
-        var _a, _b;
-        if (initialValue) {
-            const safePhoneNumber = getPhoneNumberWithPlus(initialValue);
-            const number = parsePhoneNumberFromString__default["default"](safePhoneNumber);
-            setCountryCode((_a = number === null || number === void 0 ? void 0 : number.countryCallingCode.toString()) !== null && _a !== void 0 ? _a : "");
-            setPhoneNumber((_b = number === null || number === void 0 ? void 0 : number.nationalNumber.toString()) !== null && _b !== void 0 ? _b : "");
-        }
-    }, [initialValue]);
-    const handleCountryCodeChange = (option) => {
-        var _a;
-        setCountryCode((_a = option === null || option === void 0 ? void 0 : option.value) !== null && _a !== void 0 ? _a : "");
-        setIsCountryCodeInvalid(!Boolean(option === null || option === void 0 ? void 0 : option.value));
-    };
-    const handlePhoneNumberChange = (event) => {
-        setPhoneNumber(event.target.value);
-        setIsPhoneNumberInvalid(!event.target.value || !Boolean(event.target.value.trim()));
-    };
-    return {
-        countryCode,
-        phoneNumber,
-        isCountryCodeInvalid,
-        isPhoneNumberInvalid,
-        handleCountryCodeChange,
-        handlePhoneNumberChange,
-    };
-};
-
 /**
  * A component for inputting phone numbers with an optional action button for initiating a phone call.
  *
@@ -1073,9 +1083,21 @@ const usePhoneInput = (initialValue) => {
  * @returns {JSX.Element} - The PhoneInput component.
  */
 const PhoneInput = React.forwardRef((_a, ref) => {
-    var { dataTestId, isInvalid, disabled = false, value, fieldSize = "medium", disableAction = false, onChange, defaultValue } = _a, rest = __rest(_a, ["dataTestId", "isInvalid", "disabled", "value", "fieldSize", "disableAction", "onChange", "defaultValue"]);
-    const { countryCode, phoneNumber, isCountryCodeInvalid, isPhoneNumberInvalid, handleCountryCodeChange, handlePhoneNumberChange, } = usePhoneInput(value !== null && value !== void 0 ? value : defaultValue);
-    return (jsxRuntime.jsxs(Container, Object.assign({ "data-testid": `${dataTestId}-container` }, { children: [jsxRuntime.jsx("input", { hidden: true, id: "phone-input", "data-testid": dataTestId && `${dataTestId}`, value: value, ref: ref, onChange: onChange }), jsxRuntime.jsx(CountryCodeSelect, { dataTestId: dataTestId && `${dataTestId}-countryCodeSelect`, countryCode: countryCode, onChange: handleCountryCodeChange, disabled: disabled, isInvalid: isCountryCodeInvalid || isInvalid, placeholder: "+45" }), jsxRuntime.jsx(BaseInput, Object.assign({ id: "phoneInput-number", dataTestId: dataTestId && `${dataTestId}-phoneNumberInput`, fieldSize: fieldSize, type: "tel", value: phoneNumber, disabled: disabled, onChange: handlePhoneNumberChange, isInvalid: isPhoneNumberInvalid || isInvalid, actions: !disableAction && (jsxRuntime.jsx(ActionButton, { disabled: disabled || isInvalid || isCountryCodeInvalid || isPhoneNumberInvalid, value: `${countryCode}${phoneNumber}`, type: "PHONE_NUMBER", dataTestId: dataTestId && `${dataTestId}-phoneIcon`, iconSize: fieldSize })) }, rest))] })));
+    var { dataTestId, isInvalid, disabled = false, value, defaultValue, fieldSize = "medium", disableAction = false, onChange, onChangeGetSeparateValues } = _a, rest = __rest(_a, ["dataTestId", "isInvalid", "disabled", "value", "defaultValue", "fieldSize", "disableAction", "onChange", "onChangeGetSeparateValues"]);
+    const hiddenInputRef = React.useRef(null);
+    const { countryCode, phoneNumber, isCountryCodeInvalid, isPhoneNumberInvalid, handleCountryCodeChange, handlePhoneNumberChange, combinedValue, isCombinedValueInvalid, } = usePhoneInput(value !== null && value !== void 0 ? value : defaultValue);
+    React.useEffect(() => {
+        const element = hiddenInputRef.current;
+        const event = new Event("change");
+        element === null || element === void 0 ? void 0 : element.dispatchEvent(event);
+        // The event as unknown as ChangeEvent<HTMLInputElement> assertion is needed because
+        // the event's type is inferred as Event, which doesn't have a target property, whereas ChangeEvent does.
+        onChange && onChange(event);
+    }, [combinedValue, onChange]);
+    React.useEffect(() => {
+        onChangeGetSeparateValues && onChangeGetSeparateValues({ countryCode, phoneNumber });
+    }, [countryCode, onChangeGetSeparateValues, phoneNumber]);
+    return (jsxRuntime.jsxs(Container, Object.assign({ "data-testid": dataTestId && `${dataTestId}-container` }, { children: [jsxRuntime.jsx("input", { hidden: true, id: "phone-input", "data-testid": dataTestId && dataTestId, value: combinedValue, ref: hiddenInputRef, onChange: onChange, "aria-invalid": isCombinedValueInvalid || isInvalid }), jsxRuntime.jsx(CountryCodeSelect, { dataTestId: dataTestId && `${dataTestId}-countryCodeSelect`, countryCode: countryCode, onChange: handleCountryCodeChange, disabled: disabled, isInvalid: isCountryCodeInvalid || isInvalid, placeholder: "+45" }), jsxRuntime.jsx(BaseInput, Object.assign({ id: "phoneInput-number", dataTestId: dataTestId && `${dataTestId}-phoneNumberInput`, fieldSize: fieldSize, type: "tel", value: phoneNumber, disabled: disabled, onChange: handlePhoneNumberChange, isInvalid: isPhoneNumberInvalid || isInvalid, actions: !disableAction && (jsxRuntime.jsx(ActionButton, { disabled: disabled || isInvalid || isCountryCodeInvalid || isPhoneNumberInvalid, value: `${countryCode}${phoneNumber}`, type: "PHONE_NUMBER", dataTestId: dataTestId && `${dataTestId}-phoneIcon`, iconSize: fieldSize })) }, rest))] })));
 });
 const Container = tailwindStyledComponents.tw.div `
   grid
@@ -1101,9 +1123,10 @@ const Container = tailwindStyledComponents.tw.div `
  */
 const PhoneField = React.forwardRef((_a, ref) => {
     var { label, id, tip, helpText, isInvalid, errorMessage, value, helpAddon, className, defaultValue, dataTestId } = _a, rest = __rest(_a, ["label", "id", "tip", "helpText", "isInvalid", "errorMessage", "value", "helpAddon", "className", "defaultValue", "dataTestId"]);
-    const renderAsInvalid = isInvalid || Boolean(errorMessage);
+    const { isCombinedValueInvalid, isPhoneNumberInvalid, isCountryCodeInvalid, combinedValue } = usePhoneInput(value);
+    const renderAsInvalid = isCombinedValueInvalid || isPhoneNumberInvalid || isCountryCodeInvalid || isInvalid || Boolean(errorMessage);
     const htmlForId = id ? id : "phoneField-" + uuid.v4();
-    return (jsxRuntime.jsx(FormGroup, Object.assign({ 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 !== null && value !== void 0 ? value : defaultValue, isInvalid: renderAsInvalid }, rest)) })));
+    return (jsxRuntime.jsx(FormGroup, Object.assign({ 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: combinedValue, defaultValue: defaultValue, ref: ref }, rest)) })));
 });
 
 const RadioGroupContext = React__namespace.createContext(null);

package/index.js

@@ -3,15 +3,15 @@ import { registerTranslations } from '@trackunit/i18n-library-translation';
 import { IconButton, Icon, Tip, Heading, Text, MenuItem, Tag, Spinner } from '@trackunit/react-components';
 import { tw, twx, tws } from '@trackunit/tailwind-styled-components';
 import * as React from 'react';
-import React__default, { useMemo, forwardRef, useState, cloneElement, useEffect } from 'react';
+import React__default, { useMemo, forwardRef, useState, cloneElement, useEffect, useRef } from 'react';
 import { v4 } from 'uuid';
 import { format } from 'date-fns';
+import { parsePhoneNumberFromString, isPossiblePhoneNumber, getCountries, getCountryCallingCode } from 'libphonenumber-js';
 import ReactSelect, { components } from 'react-select';
 export { default as ValueType } from 'react-select';
 import ReactAsyncCreatableSelect from 'react-select/async-creatable';
 import ReactCreatableSelect from 'react-select/creatable';
 import ReactAsyncSelect from 'react-select/async';
-import parsePhoneNumberFromString, { getCountries, getCountryCallingCode } from 'libphonenumber-js';
 
 var defaultTranslations = {
 	
@@ -464,6 +464,80 @@ const Content = tw.div `
   items-center
 `;
 
+/**
+ * @param phoneNumber - a phone number as a string
+ * @returns {boolean} true if the phone number starts with a plus sign
+ * @example checkIfPhoneNumberHasPlus("123456789") // false
+ * checkIfPhoneNumberHasPlus("+123456789") // true
+ */
+const checkIfPhoneNumberHasPlus = (phoneNumber) => {
+    return phoneNumber.startsWith("+");
+};
+/**
+ * @param phoneNumber - a phone number as a string
+ * @returns {string|number} the phone number with a plus sign in front of it
+ * @example getPhoneNumberWithPlus("123456789") // "+123456789"
+ */
+const getPhoneNumberWithPlus = (phoneNumber) => {
+    const stringPhoneNumber = phoneNumber.toString();
+    return checkIfPhoneNumberHasPlus(stringPhoneNumber) ? stringPhoneNumber : `+${stringPhoneNumber}`;
+};
+
+/**
+ * A custom hook for managing phone number input state and validation.
+ *
+ * @returns {object} - An object containing state values and event handler functions.
+ * @property {string} countryCode - The current country code value.
+ * @property {string} phoneNumber - The current phone number value.
+ * @property {boolean} isCountryCodeInvalid - Whether the country code value is invalid.
+ * @property {boolean} isPhoneNumberInvalid - Whether the phone number value is invalid.
+ * @property {Function} handleCountryCodeChange - A function for handling changes to the country code input.
+ * @property {Function} handlePhoneNumberChange - A function for handling changes to the phone number input.
+ * @property {string} combinedValue - The combined country code and phone number value.
+ */
+const usePhoneInput = (value) => {
+    const [countryCode, setCountryCode] = useState("");
+    const [phoneNumber, setPhoneNumber] = useState("");
+    const [isCountryCodeInvalid, setIsCountryCodeInvalid] = useState(false);
+    const [isPhoneNumberInvalid, setIsPhoneNumberInvalid] = useState(false);
+    const [isCombinedValueInvalid, setIsCombinedValueInvalid] = useState(false);
+    const [combinedValue, setCombinedValue] = useState(value !== null && value !== void 0 ? value : "");
+    useEffect(() => {
+        var _a, _b;
+        if (value) {
+            const safePhoneNumber = getPhoneNumberWithPlus(value);
+            const number = parsePhoneNumberFromString(safePhoneNumber);
+            setCountryCode((_a = number === null || number === void 0 ? void 0 : number.countryCallingCode.toString()) !== null && _a !== void 0 ? _a : "");
+            setPhoneNumber((_b = number === null || number === void 0 ? void 0 : number.nationalNumber.toString()) !== null && _b !== void 0 ? _b : "");
+            setCombinedValue(`${countryCode}${phoneNumber}`);
+            combinedValue && setIsCombinedValueInvalid(isPossiblePhoneNumber(combinedValue.toString()));
+        }
+    }, [combinedValue, countryCode, phoneNumber, value]);
+    const handleCountryCodeChange = (option) => {
+        var _a;
+        setCountryCode((_a = option === null || option === void 0 ? void 0 : option.value) !== null && _a !== void 0 ? _a : "");
+        setIsCountryCodeInvalid(!Boolean(option === null || option === void 0 ? void 0 : option.value));
+        setCombinedValue(`${option === null || option === void 0 ? void 0 : option.value}${phoneNumber}`);
+        combinedValue && setIsCombinedValueInvalid(isPossiblePhoneNumber(combinedValue.toString()));
+    };
+    const handlePhoneNumberChange = (event) => {
+        setPhoneNumber(event.target.value);
+        setIsPhoneNumberInvalid(!event.target.value || !Boolean(event.target.value.trim()));
+        setCombinedValue(`${countryCode}${event.target.value}`);
+        combinedValue && setIsCombinedValueInvalid(isPossiblePhoneNumber(combinedValue.toString()));
+    };
+    return {
+        countryCode,
+        phoneNumber,
+        isCountryCodeInvalid,
+        isPhoneNumberInvalid,
+        handleCountryCodeChange,
+        handlePhoneNumberChange,
+        combinedValue,
+        isCombinedValueInvalid,
+    };
+};
+
 /**
  * The SelectContainer component.
  *
@@ -969,69 +1043,6 @@ const CountryCodeSelect = ({ excludedCountries, countryCode, isInvalid, onChange
     return (jsx(Select, { dataTestId: dataTestId, className: "w-28", "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 }));
 };
 
-/**
- * @param phoneNumber - a phone number as a string
- * @returns {boolean} true if the phone number starts with a plus sign
- * @example checkIfPhoneNumberHasPlus("123456789") // false
- * checkIfPhoneNumberHasPlus("+123456789") // true
- */
-const checkIfPhoneNumberHasPlus = (phoneNumber) => {
-    return phoneNumber.startsWith("+");
-};
-/**
- * @param phoneNumber - a phone number as a string
- * @returns {string|number} the phone number with a plus sign in front of it
- * @example getPhoneNumberWithPlus("123456789") // "+123456789"
- */
-const getPhoneNumberWithPlus = (phoneNumber) => {
-    const stringPhoneNumber = phoneNumber.toString();
-    return checkIfPhoneNumberHasPlus(stringPhoneNumber) ? stringPhoneNumber : `+${stringPhoneNumber}`;
-};
-
-/**
- * A custom hook for managing phone number input state and validation.
- *
- * @returns {object} - An object containing state values and event handler functions.
- * @property {string} countryCode - The current country code value.
- * @property {string} phoneNumber - The current phone number value.
- * @property {boolean} isCountryCodeInvalid - Whether the country code value is invalid.
- * @property {boolean} isPhoneNumberInvalid - Whether the phone number value is invalid.
- * @property {Function} handleCountryCodeChange - A function for handling changes to the country code input.
- * @property {Function} handlePhoneNumberChange - A function for handling changes to the phone number input.
- */
-const usePhoneInput = (initialValue) => {
-    const [countryCode, setCountryCode] = useState("");
-    const [phoneNumber, setPhoneNumber] = useState("");
-    const [isCountryCodeInvalid, setIsCountryCodeInvalid] = useState(false);
-    const [isPhoneNumberInvalid, setIsPhoneNumberInvalid] = useState(false);
-    useEffect(() => {
-        var _a, _b;
-        if (initialValue) {
-            const safePhoneNumber = getPhoneNumberWithPlus(initialValue);
-            const number = parsePhoneNumberFromString(safePhoneNumber);
-            setCountryCode((_a = number === null || number === void 0 ? void 0 : number.countryCallingCode.toString()) !== null && _a !== void 0 ? _a : "");
-            setPhoneNumber((_b = number === null || number === void 0 ? void 0 : number.nationalNumber.toString()) !== null && _b !== void 0 ? _b : "");
-        }
-    }, [initialValue]);
-    const handleCountryCodeChange = (option) => {
-        var _a;
-        setCountryCode((_a = option === null || option === void 0 ? void 0 : option.value) !== null && _a !== void 0 ? _a : "");
-        setIsCountryCodeInvalid(!Boolean(option === null || option === void 0 ? void 0 : option.value));
-    };
-    const handlePhoneNumberChange = (event) => {
-        setPhoneNumber(event.target.value);
-        setIsPhoneNumberInvalid(!event.target.value || !Boolean(event.target.value.trim()));
-    };
-    return {
-        countryCode,
-        phoneNumber,
-        isCountryCodeInvalid,
-        isPhoneNumberInvalid,
-        handleCountryCodeChange,
-        handlePhoneNumberChange,
-    };
-};
-
 /**
  * A component for inputting phone numbers with an optional action button for initiating a phone call.
  *
@@ -1043,9 +1054,21 @@ const usePhoneInput = (initialValue) => {
  * @returns {JSX.Element} - The PhoneInput component.
  */
 const PhoneInput = forwardRef((_a, ref) => {
-    var { dataTestId, isInvalid, disabled = false, value, fieldSize = "medium", disableAction = false, onChange, defaultValue } = _a, rest = __rest(_a, ["dataTestId", "isInvalid", "disabled", "value", "fieldSize", "disableAction", "onChange", "defaultValue"]);
-    const { countryCode, phoneNumber, isCountryCodeInvalid, isPhoneNumberInvalid, handleCountryCodeChange, handlePhoneNumberChange, } = usePhoneInput(value !== null && value !== void 0 ? value : defaultValue);
-    return (jsxs(Container, Object.assign({ "data-testid": `${dataTestId}-container` }, { children: [jsx("input", { hidden: true, id: "phone-input", "data-testid": dataTestId && `${dataTestId}`, value: value, ref: ref, onChange: onChange }), jsx(CountryCodeSelect, { dataTestId: dataTestId && `${dataTestId}-countryCodeSelect`, countryCode: countryCode, onChange: handleCountryCodeChange, disabled: disabled, isInvalid: isCountryCodeInvalid || isInvalid, placeholder: "+45" }), jsx(BaseInput, Object.assign({ id: "phoneInput-number", dataTestId: dataTestId && `${dataTestId}-phoneNumberInput`, fieldSize: fieldSize, type: "tel", value: phoneNumber, disabled: disabled, onChange: handlePhoneNumberChange, isInvalid: isPhoneNumberInvalid || isInvalid, actions: !disableAction && (jsx(ActionButton, { disabled: disabled || isInvalid || isCountryCodeInvalid || isPhoneNumberInvalid, value: `${countryCode}${phoneNumber}`, type: "PHONE_NUMBER", dataTestId: dataTestId && `${dataTestId}-phoneIcon`, iconSize: fieldSize })) }, rest))] })));
+    var { dataTestId, isInvalid, disabled = false, value, defaultValue, fieldSize = "medium", disableAction = false, onChange, onChangeGetSeparateValues } = _a, rest = __rest(_a, ["dataTestId", "isInvalid", "disabled", "value", "defaultValue", "fieldSize", "disableAction", "onChange", "onChangeGetSeparateValues"]);
+    const hiddenInputRef = useRef(null);
+    const { countryCode, phoneNumber, isCountryCodeInvalid, isPhoneNumberInvalid, handleCountryCodeChange, handlePhoneNumberChange, combinedValue, isCombinedValueInvalid, } = usePhoneInput(value !== null && value !== void 0 ? value : defaultValue);
+    useEffect(() => {
+        const element = hiddenInputRef.current;
+        const event = new Event("change");
+        element === null || element === void 0 ? void 0 : element.dispatchEvent(event);
+        // The event as unknown as ChangeEvent<HTMLInputElement> assertion is needed because
+        // the event's type is inferred as Event, which doesn't have a target property, whereas ChangeEvent does.
+        onChange && onChange(event);
+    }, [combinedValue, onChange]);
+    useEffect(() => {
+        onChangeGetSeparateValues && onChangeGetSeparateValues({ countryCode, phoneNumber });
+    }, [countryCode, onChangeGetSeparateValues, phoneNumber]);
+    return (jsxs(Container, Object.assign({ "data-testid": dataTestId && `${dataTestId}-container` }, { children: [jsx("input", { hidden: true, id: "phone-input", "data-testid": dataTestId && dataTestId, value: combinedValue, ref: hiddenInputRef, onChange: onChange, "aria-invalid": isCombinedValueInvalid || isInvalid }), jsx(CountryCodeSelect, { dataTestId: dataTestId && `${dataTestId}-countryCodeSelect`, countryCode: countryCode, onChange: handleCountryCodeChange, disabled: disabled, isInvalid: isCountryCodeInvalid || isInvalid, placeholder: "+45" }), jsx(BaseInput, Object.assign({ id: "phoneInput-number", dataTestId: dataTestId && `${dataTestId}-phoneNumberInput`, fieldSize: fieldSize, type: "tel", value: phoneNumber, disabled: disabled, onChange: handlePhoneNumberChange, isInvalid: isPhoneNumberInvalid || isInvalid, actions: !disableAction && (jsx(ActionButton, { disabled: disabled || isInvalid || isCountryCodeInvalid || isPhoneNumberInvalid, value: `${countryCode}${phoneNumber}`, type: "PHONE_NUMBER", dataTestId: dataTestId && `${dataTestId}-phoneIcon`, iconSize: fieldSize })) }, rest))] })));
 });
 const Container = tw.div `
   grid
@@ -1071,9 +1094,10 @@ const Container = tw.div `
  */
 const PhoneField = forwardRef((_a, ref) => {
     var { label, id, tip, helpText, isInvalid, errorMessage, value, helpAddon, className, defaultValue, dataTestId } = _a, rest = __rest(_a, ["label", "id", "tip", "helpText", "isInvalid", "errorMessage", "value", "helpAddon", "className", "defaultValue", "dataTestId"]);
-    const renderAsInvalid = isInvalid || Boolean(errorMessage);
+    const { isCombinedValueInvalid, isPhoneNumberInvalid, isCountryCodeInvalid, combinedValue } = usePhoneInput(value);
+    const renderAsInvalid = isCombinedValueInvalid || isPhoneNumberInvalid || isCountryCodeInvalid || isInvalid || Boolean(errorMessage);
     const htmlForId = id ? id : "phoneField-" + v4();
-    return (jsx(FormGroup, Object.assign({ 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 !== null && value !== void 0 ? value : defaultValue, isInvalid: renderAsInvalid }, rest)) })));
+    return (jsx(FormGroup, Object.assign({ 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: combinedValue, defaultValue: defaultValue, ref: ref }, rest)) })));
 });
 
 const RadioGroupContext = React.createContext(null);

package/package.json

@@ -1,14 +1,14 @@
 {
   "name": "@trackunit/react-form-components",
-  "version": "0.0.22",
+  "version": "0.0.23",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "dependencies": {
-    "@trackunit/i18n-library-translation": "0.0.45",
-    "@trackunit/react-components": "0.1.84",
+    "@trackunit/i18n-library-translation": "0.0.46",
+    "@trackunit/react-components": "0.1.85",
     "@trackunit/tailwind-styled-components": "0.0.56",
     "date-fns": "2.29.3",
-    "libphonenumber-js": "1.10.26",
+    "libphonenumber-js": "1.10.30",
     "react": "18.2.0",
     "react-select": "5.7.3",
     "uuid": "8.3.2"

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

@@ -1,6 +1,10 @@
 /// <reference types="react" />
 import { BaseInputProps } from "../BaseInput";
 type BaseInputExposedProps = Omit<BaseInputProps, "actions">;
+interface PhoneNumberProps {
+    countryCode: string;
+    phoneNumber: string;
+}
 export interface PhoneInputProps extends BaseInputExposedProps {
     /**
      * To disable the action button.
@@ -11,6 +15,10 @@ export interface PhoneInputProps extends BaseInputExposedProps {
      * <PhoneInput disableAction />
      */
     disableAction?: boolean;
+    /**
+     * A callback function that gives you the country code and phone number as separate values.
+     */
+    onChangeGetSeparateValues?: (params: PhoneNumberProps) => void;
 }
 /**
  * A component for inputting phone numbers with an optional action button for initiating a phone call.

package/src/{components/PhoneInput → utilities}/usePhoneInput.d.ts

@@ -16,6 +16,12 @@ export interface usePhoneInputProps {
      * Whether the phone number value is invalid.
      */
     isPhoneNumberInvalid: boolean;
+    /**
+     * Whether the full phone number value is valid.
+     *
+     * @returns {boolean} Whether the full phone number value is valid.
+     */
+    isCombinedValueInvalid: boolean;
     /**
      * A function for handling changes to the country code input.
      */
@@ -27,6 +33,13 @@ export interface usePhoneInputProps {
      * A function for handling changes to the phone number input.
      */
     handlePhoneNumberChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
+    /**
+     * The combined country code and phone number value.
+     *
+     * @example "+123456789"
+     * @returns {string} Combined phone number
+     */
+    combinedValue: string | number | readonly string[] | undefined;
 }
 /**
  * A custom hook for managing phone number input state and validation.
@@ -38,5 +51,6 @@ export interface usePhoneInputProps {
  * @property {boolean} isPhoneNumberInvalid - Whether the phone number value is invalid.
  * @property {Function} handleCountryCodeChange - A function for handling changes to the country code input.
  * @property {Function} handlePhoneNumberChange - A function for handling changes to the phone number input.
+ * @property {string} combinedValue - The combined country code and phone number value.
  */
-export declare const usePhoneInput: (initialValue: string | number | readonly string[] | undefined) => usePhoneInputProps;
+export declare const usePhoneInput: (value: string | number | readonly string[] | undefined) => usePhoneInputProps;