@trackunit/react-form-components 0.0.142 → 0.0.144

package/index.cjs.js

@@ -6294,54 +6294,43 @@ const getPhoneNumberWithPlus = (phoneNumber) => {
  * 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 {Function}  getIsCountryCodeInvalid - A function for check if country code is valid
+ * @property {Function} getIsNumberInvalid- A function for check if number part of phone number is valid
+ * @property {Function} getIsPhoneNumberValid- A function for check if phone number is valid
+ *  @property {Function} getPhoneNumber - A function for get formatted phone number with country code and plus sign
  * @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 && ((!countryCode && !phoneNumber) || !combinedValue)) {
-            const safePhoneNumber = getPhoneNumberWithPlus(value);
-            const number = parsePhoneNumber(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()));
+const usePhoneInput = () => {
+    const getIsCountryCodeInvalid = (code) => {
+        if (code) {
+            return false;
         }
-    }, [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()));
+        return true;
+    };
+    const getIsNumberInvalid = (number) => {
+        if (number) {
+            return false;
+        }
+        return true;
+    };
+    const getIsPhoneNumberInvalid = (phone) => {
+        if (phone) {
+            const normalized = getPhoneNumberWithPlus(phone.toString());
+            return isPossiblePhoneNumber(normalized);
+        }
+        return true;
     };
-    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()));
+    const getPhoneNumber = ({ country, phone }) => {
+        if (country) {
+            return getPhoneNumberWithPlus(`${country}${phone || ""}`);
+        }
+        return phone || "";
     };
     return {
-        countryCode,
-        phoneNumber,
-        isCountryCodeInvalid,
-        isPhoneNumberInvalid,
-        handleCountryCodeChange,
-        handlePhoneNumberChange,
-        combinedValue,
-        isCombinedValueInvalid,
+        getIsCountryCodeInvalid,
+        getIsNumberInvalid,
+        getIsPhoneNumberInvalid,
+        getPhoneNumber,
     };
 };
 
@@ -14503,7 +14492,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-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, readOnly: readOnly, onBlur: onBlur, menuIsOpen: readOnly ? false : undefined }));
+    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, readOnly: readOnly, onBlur: onBlur, closeMenuOnSelect: true, menuIsOpen: readOnly ? false : undefined }));
 };
 
 /**
@@ -14517,9 +14506,43 @@ const CountryCodeSelect = ({ excludedCountries, countryCode, isInvalid, onChange
  * @returns {JSX.Element} - The PhoneInput component.
  */
 const PhoneInput = React.forwardRef((_a, ref) => {
-    var { dataTestId, isInvalid, disabled = false, value, defaultValue, fieldSize = "medium", disableAction = false, onChange, onChangeGetSeparateValues, onBlurCountryCode, readOnly, countryCodePlaceholder, onChangeCountryCode } = _a, rest = __rest(_a, ["dataTestId", "isInvalid", "disabled", "value", "defaultValue", "fieldSize", "disableAction", "onChange", "onChangeGetSeparateValues", "onBlurCountryCode", "readOnly", "countryCodePlaceholder", "onChangeCountryCode"]);
+    var _b, _c;
+    var { dataTestId, isInvalid, disabled = false, value, defaultValue, fieldSize = "medium", disableAction = false, onChange, onBlurCountryCode, readOnly, countryCodePlaceholder, onChangeCountryCode, onBlur, onFieldsBlur, onChangeValue } = _a, rest = __rest(_a, ["dataTestId", "isInvalid", "disabled", "value", "defaultValue", "fieldSize", "disableAction", "onChange", "onBlurCountryCode", "readOnly", "countryCodePlaceholder", "onChangeCountryCode", "onBlur", "onFieldsBlur", "onChangeValue"]);
+    const DEFAULT_COUNTRY_CODE = "+45";
+    const { getIsCountryCodeInvalid, getIsPhoneNumberInvalid, getPhoneNumber } = usePhoneInput();
+    const countryCodePlaceholderValue = countryCodePlaceholder || DEFAULT_COUNTRY_CODE;
+    const safePhoneNumber = getPhoneNumberWithPlus(value || "");
+    const number = parsePhoneNumber(safePhoneNumber);
+    const [phone, setPhone] = React.useState((_b = number === null || number === void 0 ? void 0 : number.nationalNumber.toString()) !== null && _b !== void 0 ? _b : "");
+    const [code, setCode] = React.useState((_c = number === null || number === void 0 ? void 0 : number.countryCallingCode.toString()) !== null && _c !== void 0 ? _c : "");
+    const codeRef = React.useRef(code); // synchronus reliable source of truth  (country code is calling onblur just after onchange, useState is too slow for this)
+    const phoneRef = React.useRef(phone); // synchronus reliable source of truth
+    const onChangeHandler = React__default["default"].useCallback(({ newPhone, newCode }) => {
+        onChangeValue &&
+            onChangeValue({
+                phone: getPhoneNumber({ country: newCode, phone: newPhone || "" }),
+                countryCode: newCode,
+                national: newPhone,
+            });
+    }, [onChangeValue, getPhoneNumber]);
+    const onCodeChangeHandler = React__default["default"].useCallback((codeNumber) => {
+        setCode(codeNumber);
+        onChangeHandler({ newPhone: phone, newCode: codeNumber });
+    }, [phone, onChangeHandler]);
+    const onPhoneChangeHandler = React__default["default"].useCallback((phoneNumber) => {
+        setPhone(phoneNumber);
+        onChangeHandler({ newPhone: phoneNumber, newCode: code });
+    }, [onChangeHandler, code]);
+    const onBlurHandler = React__default["default"].useCallback(() => {
+        onFieldsBlur &&
+            onFieldsBlur({
+                phone: getPhoneNumber({ country: codeRef.current, phone: phoneRef.current }),
+                countryCode: codeRef.current,
+                national: phoneRef.current,
+            });
+    }, [onFieldsBlur, getPhoneNumber]);
     const hiddenInputRef = React.useRef(null);
-    const { countryCode, phoneNumber, isCountryCodeInvalid, isPhoneNumberInvalid, handleCountryCodeChange, handlePhoneNumberChange, combinedValue, isCombinedValueInvalid, } = usePhoneInput(!!value ? value : defaultValue);
+    const phoneNumber = getPhoneNumber({ country: code, phone });
     React.useEffect(() => {
         const element = hiddenInputRef.current;
         const event = new Event("change");
@@ -14527,15 +14550,19 @@ const PhoneInput = React.forwardRef((_a, ref) => {
         // 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]);
-    const countryCodePlaceholderValue = countryCodePlaceholder || "+45";
-    return (jsxRuntime.jsxs("div", { className: "grid grid-cols-min-fr gap-2", "data-testid": dataTestId && `${dataTestId}-container`, children: [jsxRuntime.jsx("input", { hidden: true, id: "phone-input", "data-testid": dataTestId, value: combinedValue, ref: hiddenInputRef, onChange: onChange, "aria-invalid": isCombinedValueInvalid || isInvalid }), jsxRuntime.jsx(CountryCodeSelect, { dataTestId: dataTestId && `${dataTestId}-countryCodeSelect`, countryCode: countryCode, onChange: e => {
-                    handleCountryCodeChange(e);
-                    onChangeCountryCode && onChangeCountryCode(e);
-                }, disabled: disabled, readOnly: readOnly, isInvalid: isCountryCodeInvalid || isInvalid, placeholder: countryCodePlaceholderValue, onBlur: onBlurCountryCode }), jsxRuntime.jsx(BaseInput, Object.assign({ id: "phoneInput-number", dataTestId: dataTestId && `${dataTestId}-phoneNumberInput`, fieldSize: fieldSize, type: "tel", value: phoneNumber, disabled: disabled, readOnly: readOnly, 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))] }));
+    }, [phoneNumber, onChange]);
+    return (jsxRuntime.jsxs("div", { className: "grid grid-cols-min-fr gap-2", "data-testid": dataTestId && `${dataTestId}-container`, children: [jsxRuntime.jsx("input", { hidden: true, id: "phone-input", "data-testid": dataTestId, value: phoneNumber, ref: hiddenInputRef, onChange: onChange, "aria-invalid": isInvalid }), jsxRuntime.jsx(CountryCodeSelect, { dataTestId: dataTestId && `${dataTestId}-countryCodeSelect`, countryCode: code, onBlur: e => {
+                    onBlurHandler();
+                }, onChange: e => {
+                    (e === null || e === void 0 ? void 0 : e.value) && onCodeChangeHandler(e === null || e === void 0 ? void 0 : e.value);
+                    codeRef.current = (e === null || e === void 0 ? void 0 : e.value) || "";
+                }, disabled: disabled, readOnly: readOnly, isInvalid: isInvalid, placeholder: countryCodePlaceholderValue }), 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 => {
+                    (e === null || e === void 0 ? void 0 : e.target.value) && setPhone(e.target.value);
+                    onPhoneChangeHandler(e.target.value);
+                    phoneRef.current = e === null || e === void 0 ? void 0 : e.target.value;
+                }, onBlur: () => {
+                    onBlurHandler();
+                }, actions: !disableAction && (jsxRuntime.jsx(ActionButton, { disabled: disabled || isInvalid || getIsCountryCodeInvalid(code || "") || getIsPhoneNumberInvalid(phone || " "), value: phoneNumber, type: "PHONE_NUMBER", dataTestId: dataTestId && `${dataTestId}-phoneIcon`, iconSize: fieldSize })) }, rest))] }));
 });
 
 /**
@@ -14555,11 +14582,9 @@ const PhoneInput = React.forwardRef((_a, ref) => {
  * @returns {JSX.Element} - The PhoneField component.
  */
 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 { isCombinedValueInvalid, isPhoneNumberInvalid, isCountryCodeInvalid, combinedValue } = usePhoneInput(value);
-    const renderAsInvalid = isCombinedValueInvalid || isPhoneNumberInvalid || isCountryCodeInvalid || isInvalid || Boolean(errorMessage);
+    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();
-    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: combinedValue, defaultValue: defaultValue, ref: ref, dataTestId: dataTestId }, rest)) }));
+    return (jsxRuntime.jsx(FormGroup, { htmlFor: htmlForId, label: label, tip: tip, isInvalid: isInvalid, helpText: (isInvalid && 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, dataTestId: dataTestId, onChangeValue: onChangeValue, onFieldsBlur: onFieldsBlur }, rest)) }));
 });
 
 const cvaRadioGroup = cssClassVarianceUtilities.cvaMerge(["flex", "gap-2", "flex-col", "items-start"], {

package/index.esm.js

@@ -3,7 +3,7 @@ import { 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, useCallback, useLayoutEffect, useContext, createElement, Fragment, createContext, useRef, Component } from 'react';
+import React__default, { useMemo, forwardRef, useState, cloneElement, useCallback, useLayoutEffect, useContext, createElement, Fragment, createContext, useRef, useEffect, Component } from 'react';
 import { createPortal } from 'react-dom';
 
 var defaultTranslations = {
@@ -6268,54 +6268,43 @@ const getPhoneNumberWithPlus = (phoneNumber) => {
  * 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 {Function}  getIsCountryCodeInvalid - A function for check if country code is valid
+ * @property {Function} getIsNumberInvalid- A function for check if number part of phone number is valid
+ * @property {Function} getIsPhoneNumberValid- A function for check if phone number is valid
+ *  @property {Function} getPhoneNumber - A function for get formatted phone number with country code and plus sign
  * @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 && ((!countryCode && !phoneNumber) || !combinedValue)) {
-            const safePhoneNumber = getPhoneNumberWithPlus(value);
-            const number = parsePhoneNumber(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()));
+const usePhoneInput = () => {
+    const getIsCountryCodeInvalid = (code) => {
+        if (code) {
+            return false;
         }
-    }, [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()));
+        return true;
+    };
+    const getIsNumberInvalid = (number) => {
+        if (number) {
+            return false;
+        }
+        return true;
+    };
+    const getIsPhoneNumberInvalid = (phone) => {
+        if (phone) {
+            const normalized = getPhoneNumberWithPlus(phone.toString());
+            return isPossiblePhoneNumber(normalized);
+        }
+        return true;
     };
-    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()));
+    const getPhoneNumber = ({ country, phone }) => {
+        if (country) {
+            return getPhoneNumberWithPlus(`${country}${phone || ""}`);
+        }
+        return phone || "";
     };
     return {
-        countryCode,
-        phoneNumber,
-        isCountryCodeInvalid,
-        isPhoneNumberInvalid,
-        handleCountryCodeChange,
-        handlePhoneNumberChange,
-        combinedValue,
-        isCombinedValueInvalid,
+        getIsCountryCodeInvalid,
+        getIsNumberInvalid,
+        getIsPhoneNumberInvalid,
+        getPhoneNumber,
     };
 };
 
@@ -14477,7 +14466,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$1(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, readOnly: readOnly, onBlur: onBlur, menuIsOpen: readOnly ? false : undefined }));
+    return (jsx$1(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, readOnly: readOnly, onBlur: onBlur, closeMenuOnSelect: true, menuIsOpen: readOnly ? false : undefined }));
 };
 
 /**
@@ -14491,9 +14480,43 @@ const CountryCodeSelect = ({ excludedCountries, countryCode, isInvalid, onChange
  * @returns {JSX.Element} - The PhoneInput component.
  */
 const PhoneInput = forwardRef((_a, ref) => {
-    var { dataTestId, isInvalid, disabled = false, value, defaultValue, fieldSize = "medium", disableAction = false, onChange, onChangeGetSeparateValues, onBlurCountryCode, readOnly, countryCodePlaceholder, onChangeCountryCode } = _a, rest = __rest(_a, ["dataTestId", "isInvalid", "disabled", "value", "defaultValue", "fieldSize", "disableAction", "onChange", "onChangeGetSeparateValues", "onBlurCountryCode", "readOnly", "countryCodePlaceholder", "onChangeCountryCode"]);
+    var _b, _c;
+    var { dataTestId, isInvalid, disabled = false, value, defaultValue, fieldSize = "medium", disableAction = false, onChange, onBlurCountryCode, readOnly, countryCodePlaceholder, onChangeCountryCode, onBlur, onFieldsBlur, onChangeValue } = _a, rest = __rest(_a, ["dataTestId", "isInvalid", "disabled", "value", "defaultValue", "fieldSize", "disableAction", "onChange", "onBlurCountryCode", "readOnly", "countryCodePlaceholder", "onChangeCountryCode", "onBlur", "onFieldsBlur", "onChangeValue"]);
+    const DEFAULT_COUNTRY_CODE = "+45";
+    const { getIsCountryCodeInvalid, getIsPhoneNumberInvalid, getPhoneNumber } = usePhoneInput();
+    const countryCodePlaceholderValue = countryCodePlaceholder || DEFAULT_COUNTRY_CODE;
+    const safePhoneNumber = getPhoneNumberWithPlus(value || "");
+    const number = parsePhoneNumber(safePhoneNumber);
+    const [phone, setPhone] = useState((_b = number === null || number === void 0 ? void 0 : number.nationalNumber.toString()) !== null && _b !== void 0 ? _b : "");
+    const [code, setCode] = useState((_c = number === null || number === void 0 ? void 0 : number.countryCallingCode.toString()) !== null && _c !== void 0 ? _c : "");
+    const codeRef = useRef(code); // synchronus reliable source of truth  (country code is calling onblur just after onchange, useState is too slow for this)
+    const phoneRef = useRef(phone); // synchronus reliable source of truth
+    const onChangeHandler = React__default.useCallback(({ newPhone, newCode }) => {
+        onChangeValue &&
+            onChangeValue({
+                phone: getPhoneNumber({ country: newCode, phone: newPhone || "" }),
+                countryCode: newCode,
+                national: newPhone,
+            });
+    }, [onChangeValue, getPhoneNumber]);
+    const onCodeChangeHandler = React__default.useCallback((codeNumber) => {
+        setCode(codeNumber);
+        onChangeHandler({ newPhone: phone, newCode: codeNumber });
+    }, [phone, onChangeHandler]);
+    const onPhoneChangeHandler = React__default.useCallback((phoneNumber) => {
+        setPhone(phoneNumber);
+        onChangeHandler({ newPhone: phoneNumber, newCode: code });
+    }, [onChangeHandler, code]);
+    const onBlurHandler = React__default.useCallback(() => {
+        onFieldsBlur &&
+            onFieldsBlur({
+                phone: getPhoneNumber({ country: codeRef.current, phone: phoneRef.current }),
+                countryCode: codeRef.current,
+                national: phoneRef.current,
+            });
+    }, [onFieldsBlur, getPhoneNumber]);
     const hiddenInputRef = useRef(null);
-    const { countryCode, phoneNumber, isCountryCodeInvalid, isPhoneNumberInvalid, handleCountryCodeChange, handlePhoneNumberChange, combinedValue, isCombinedValueInvalid, } = usePhoneInput(!!value ? value : defaultValue);
+    const phoneNumber = getPhoneNumber({ country: code, phone });
     useEffect(() => {
         const element = hiddenInputRef.current;
         const event = new Event("change");
@@ -14501,15 +14524,19 @@ const PhoneInput = forwardRef((_a, ref) => {
         // 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]);
-    const countryCodePlaceholderValue = countryCodePlaceholder || "+45";
-    return (jsxs("div", { className: "grid grid-cols-min-fr gap-2", "data-testid": dataTestId && `${dataTestId}-container`, children: [jsx$1("input", { hidden: true, id: "phone-input", "data-testid": dataTestId, value: combinedValue, ref: hiddenInputRef, onChange: onChange, "aria-invalid": isCombinedValueInvalid || isInvalid }), jsx$1(CountryCodeSelect, { dataTestId: dataTestId && `${dataTestId}-countryCodeSelect`, countryCode: countryCode, onChange: e => {
-                    handleCountryCodeChange(e);
-                    onChangeCountryCode && onChangeCountryCode(e);
-                }, disabled: disabled, readOnly: readOnly, isInvalid: isCountryCodeInvalid || isInvalid, placeholder: countryCodePlaceholderValue, onBlur: onBlurCountryCode }), jsx$1(BaseInput, Object.assign({ id: "phoneInput-number", dataTestId: dataTestId && `${dataTestId}-phoneNumberInput`, fieldSize: fieldSize, type: "tel", value: phoneNumber, disabled: disabled, readOnly: readOnly, onChange: handlePhoneNumberChange, isInvalid: isPhoneNumberInvalid || isInvalid, actions: !disableAction && (jsx$1(ActionButton, { disabled: disabled || isInvalid || isCountryCodeInvalid || isPhoneNumberInvalid, value: `${countryCode}${phoneNumber}`, type: "PHONE_NUMBER", dataTestId: dataTestId && `${dataTestId}-phoneIcon`, iconSize: fieldSize })) }, rest))] }));
+    }, [phoneNumber, onChange]);
+    return (jsxs("div", { className: "grid grid-cols-min-fr gap-2", "data-testid": dataTestId && `${dataTestId}-container`, children: [jsx$1("input", { hidden: true, id: "phone-input", "data-testid": dataTestId, value: phoneNumber, ref: hiddenInputRef, onChange: onChange, "aria-invalid": isInvalid }), jsx$1(CountryCodeSelect, { dataTestId: dataTestId && `${dataTestId}-countryCodeSelect`, countryCode: code, onBlur: e => {
+                    onBlurHandler();
+                }, onChange: e => {
+                    (e === null || e === void 0 ? void 0 : e.value) && onCodeChangeHandler(e === null || e === void 0 ? void 0 : e.value);
+                    codeRef.current = (e === null || e === void 0 ? void 0 : e.value) || "";
+                }, disabled: disabled, readOnly: readOnly, isInvalid: isInvalid, placeholder: countryCodePlaceholderValue }), jsx$1(BaseInput, Object.assign({ id: "phoneInput-number", dataTestId: dataTestId && `${dataTestId}-phoneNumberInput`, fieldSize: fieldSize, type: "tel", value: phone, disabled: disabled, readOnly: readOnly, isInvalid: isInvalid, onChange: e => {
+                    (e === null || e === void 0 ? void 0 : e.target.value) && setPhone(e.target.value);
+                    onPhoneChangeHandler(e.target.value);
+                    phoneRef.current = e === null || e === void 0 ? void 0 : e.target.value;
+                }, onBlur: () => {
+                    onBlurHandler();
+                }, actions: !disableAction && (jsx$1(ActionButton, { disabled: disabled || isInvalid || getIsCountryCodeInvalid(code || "") || getIsPhoneNumberInvalid(phone || " "), value: phoneNumber, type: "PHONE_NUMBER", dataTestId: dataTestId && `${dataTestId}-phoneIcon`, iconSize: fieldSize })) }, rest))] }));
 });
 
 /**
@@ -14529,11 +14556,9 @@ const PhoneInput = forwardRef((_a, ref) => {
  * @returns {JSX.Element} - The PhoneField component.
  */
 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 { isCombinedValueInvalid, isPhoneNumberInvalid, isCountryCodeInvalid, combinedValue } = usePhoneInput(value);
-    const renderAsInvalid = isCombinedValueInvalid || isPhoneNumberInvalid || isCountryCodeInvalid || isInvalid || Boolean(errorMessage);
+    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();
-    return (jsx$1(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$1(PhoneInput, Object.assign({ id: htmlForId, "aria-labelledby": htmlForId + "-label", value: combinedValue, defaultValue: defaultValue, ref: ref, dataTestId: dataTestId }, rest)) }));
+    return (jsx$1(FormGroup, { htmlFor: htmlForId, label: label, tip: tip, isInvalid: isInvalid, helpText: (isInvalid && errorMessage) || helpText, helpAddon: helpAddon, disabled: rest.disabled, className: className, dataTestId: dataTestId && `${dataTestId}-FormGroup`, children: jsx$1(PhoneInput, Object.assign({ id: htmlForId, "aria-labelledby": htmlForId + "-label", value: value, defaultValue: defaultValue, ref: ref, dataTestId: dataTestId, onChangeValue: onChangeValue, onFieldsBlur: onFieldsBlur }, rest)) }));
 });
 
 const cvaRadioGroup = cvaMerge(["flex", "gap-2", "flex-col", "items-start"], {

package/package.json

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

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

@@ -1,11 +1,16 @@
-import { FocusEventHandler } from "react";
-import { BaseInputProps } from "../BaseInput";
+import React, { FocusEventHandler } from "react";
 import { SingleValue } from "react-select";
+import { BaseInputProps } from "../BaseInput";
 type BaseInputExposedProps = Omit<BaseInputProps, "actions">;
 export interface PhoneNumberProps {
     countryCode: string;
     phoneNumber: string;
 }
+interface PhoneNumberValue {
+    phone: string;
+    national?: string;
+    countryCode?: string;
+}
 export interface PhoneInputProps extends BaseInputExposedProps {
     /**
      * To disable the action button.
@@ -16,10 +21,6 @@ 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;
     /**
      * On blur handler for country code component.
      */
@@ -35,6 +36,14 @@ export interface PhoneInputProps extends BaseInputExposedProps {
      * A placeholder value for country code.
      */
     countryCodePlaceholder?: string;
+    /**
+     * An custom handler will be called when country code select or phone number input lost focus
+     */
+    onFieldsBlur?: ({ phone, national, countryCode }: PhoneNumberValue) => void;
+    /**
+     * An custom handler will be called when country code select or phone number input were changed
+     */
+    onChangeValue?: ({ phone, national, countryCode }: PhoneNumberValue) => void;
 }
 /**
  * A component for inputting phone numbers with an optional action button for initiating a phone call.
@@ -46,5 +55,5 @@ export interface PhoneInputProps extends BaseInputExposedProps {
  * @param {boolean} [disableAction=false] - Whether the action button is disabled or not.
  * @returns {JSX.Element} - The PhoneInput component.
  */
-export declare const PhoneInput: import("react").ForwardRefExoticComponent<PhoneInputProps & import("react").RefAttributes<HTMLInputElement>>;
+export declare const PhoneInput: React.ForwardRefExoticComponent<PhoneInputProps & React.RefAttributes<HTMLInputElement>>;
 export {};

package/src/utilities/usePhoneInput.d.ts

@@ -1,56 +1,20 @@
-/// <reference types="react" />
-export interface usePhoneInputProps {
-    /**
-     * The current country code value.
-     */
-    countryCode: string;
-    /**
-     * The current phone number value.
-     */
-    phoneNumber: string;
-    /**
-     * Whether the country code value is invalid.
-     */
-    isCountryCodeInvalid: boolean;
-    /**
-     * 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.
-     */
-    handleCountryCodeChange: (option: {
-        label: string;
-        value: string;
-    } | null) => void;
-    /**
-     * 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;
+export interface UsePhoneInput {
+    getIsCountryCodeInvalid: (phone?: string) => boolean;
+    getIsNumberInvalid: (phone: string) => boolean;
+    getIsPhoneNumberInvalid: (phone: string | number | readonly string[] | undefined) => boolean;
+    getPhoneNumber: ({ country, phone }: {
+        country?: string;
+        phone?: string;
+    }) => string;
 }
 /**
  * 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 {Function}  getIsCountryCodeInvalid - A function for check if country code is valid
+ * @property {Function} getIsNumberInvalid- A function for check if number part of phone number is valid
+ * @property {Function} getIsPhoneNumberValid- A function for check if phone number is valid
+ *  @property {Function} getPhoneNumber - A function for get formatted phone number with country code and plus sign
  * @property {string} combinedValue - The combined country code and phone number value.
  */
-export declare const usePhoneInput: (value: string | number | readonly string[] | undefined) => usePhoneInputProps;
+export declare const usePhoneInput: () => UsePhoneInput;