@trackunit/react-form-components 0.0.230 → 0.0.232

package/index.cjs.js

@@ -44,7 +44,14 @@ var ReactCreatableSelect__default = /*#__PURE__*/_interopDefaultLegacy(ReactCrea
 var ReactAsyncSelect__default = /*#__PURE__*/_interopDefaultLegacy(ReactAsyncSelect);
 
 var defaultTranslations = {
-	"phoneField.error": "Invalid phone number"
+	"phoneField.error.INVALID_COUNTRY": "Country code is invalid",
+	"phoneField.error.INVALID_LENGTH": "Phone number is invalid",
+	"phoneField.error.NOT_A_NUMBER": "Phone number must be a number",
+	"phoneField.error.REQUIRED": "Phone number is required",
+	"phoneField.error.REQUIRED_COUNTRY": "Country code is required",
+	"phoneField.error.TOO_LONG": "Phone number is too long",
+	"phoneField.error.TOO_SHORT": "Phone number is too short",
+	"phoneField.error.undefined": "Phone number is valid"
 };
 
 /** The translation namespace for this library */
@@ -1499,45 +1506,6 @@ const PhoneInput = React.forwardRef((_a, ref) => {
                 }, actions: !disableAction && (jsxRuntime.jsx(ActionButton, { disabled: disabled || isInvalid, value: phoneNumber, type: "PHONE_NUMBER", dataTestId: dataTestId && `${dataTestId}-phoneIcon`, iconSize: fieldSize })) }, rest))] }));
 });
 
-/**
- * The PhoneField component is used to enter phone number.
- * It is a wrapper around the PhoneInput component and the FormGroup component.
- * It is used to render a phone number field with a label, a tip, a help text, a help addon and an error message.
- *
- * @param {string} [label] - The label for the component.
- * @param {string} [tip] - The tip for the component.
- * @param {string} [helpText] - The help text for the component.
- * @param {string} [helpAddon] - The help addon for the component.
- * @param {string} [errorMessage] - The error message for the component.
- * @param {string} [defaultValue] - The default value for the component.
- * @param {boolean} [disabled=false] - Whether the component is disabled or not.
- * @param {string} [fieldSize="medium"] - The size of the input field.
- * @param {boolean} [disableAction=false] - Whether the action button is disabled or not.
- * @returns {JSX.Element} - The PhoneField component.
- */
-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 [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)) }));
-});
-
 /**
  * Validates a phone number
  */
@@ -1576,6 +1544,48 @@ const isInvalidCountryCode = (error, required) => (!!required && error === "REQU
  */
 const isInvalidPhoneNumber = (error, required) => error !== "REQUIRED_COUNTRY" && ((!!error && error !== "REQUIRED") || (!!required && error === "REQUIRED"));
 
+/**
+ * The PhoneField component is used to enter phone number.
+ * It is a wrapper around the PhoneInput component and the FormGroup component.
+ * It is used to render a phone number field with a label, a tip, a help text, a help addon and an error message.
+ *
+ * @param {string} [label] - The label for the component.
+ * @param {string} [tip] - The tip for the component.
+ * @param {string} [helpText] - The help text for the component.
+ * @param {string} [helpAddon] - The help addon for the component.
+ * @param {string} [errorMessage] - The error message for the component.
+ * @param {string} [defaultValue] - The default value for the component.
+ * @param {boolean} [disabled=false] - Whether the component is disabled or not.
+ * @param {string} [fieldSize="medium"] - The size of the input field.
+ * @param {boolean} [disableAction=false] - Whether the action button is disabled or not.
+ * @returns {JSX.Element} - The PhoneField component.
+ */
+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 [t] = useTranslation();
+    const [isValid, setIsValid] = React.useState(true);
+    const [localError, setLocalError] = React.useState(undefined);
+    const renderAsInvalid = !isValid || isInvalid || Boolean(errorMessage);
+    const validate = ({ phone, national, countryCode }) => {
+        const areFieldsPopulated = Boolean(national && countryCode);
+        const phoneValidationResult = validatePhoneNumber({ phone, national, countryCode });
+        setIsValid(areFieldsPopulated ? !Boolean(phoneValidationResult) : true);
+        setLocalError(Boolean(phoneValidationResult) ? t(`phoneField.error.${phoneValidationResult}`) : undefined);
+    };
+    const onChangeValueHandler = (phoneNumberValue) => {
+        if (!isValid) {
+            validate(phoneNumberValue);
+        }
+        onChangeValue && onChangeValue(Object.assign(Object.assign({}, phoneNumberValue), { isValid }));
+    };
+    const handleOnFieldBlur = (phoneNumberValue) => {
+        validate(phoneNumberValue);
+        onFieldsBlur && onFieldsBlur(Object.assign(Object.assign({}, phoneNumberValue), { isValid }));
+    };
+    return (jsxRuntime.jsx(FormGroup, { htmlFor: htmlForId, label: label, tip: tip, isInvalid: renderAsInvalid, helpText: (renderAsInvalid && (errorMessage || localError)) || 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)) }));
+});
+
 const cvaRadioGroup = cssClassVarianceUtilities.cvaMerge(["flex", "gap-2", "flex-col", "items-start"], {
     variants: {
         layout: {

package/index.esm.js

@@ -6,7 +6,7 @@ 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, isValidPhoneNumber, parsePhoneNumberFromString as parsePhoneNumberFromString$1, validatePhoneNumberLength } from 'libphonenumber-js';
+import parsePhoneNumberFromString, { getCountries, getCountryCallingCode, parsePhoneNumberFromString as parsePhoneNumberFromString$1, isValidPhoneNumber, 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,14 @@ import ReactCreatableSelect from 'react-select/creatable';
 import ReactAsyncSelect from 'react-select/async';
 
 var defaultTranslations = {
-	"phoneField.error": "Invalid phone number"
+	"phoneField.error.INVALID_COUNTRY": "Country code is invalid",
+	"phoneField.error.INVALID_LENGTH": "Phone number is invalid",
+	"phoneField.error.NOT_A_NUMBER": "Phone number must be a number",
+	"phoneField.error.REQUIRED": "Phone number is required",
+	"phoneField.error.REQUIRED_COUNTRY": "Country code is required",
+	"phoneField.error.TOO_LONG": "Phone number is too long",
+	"phoneField.error.TOO_SHORT": "Phone number is too short",
+	"phoneField.error.undefined": "Phone number is valid"
 };
 
 /** The translation namespace for this library */
@@ -1469,45 +1476,6 @@ const PhoneInput = forwardRef((_a, ref) => {
                 }, actions: !disableAction && (jsx(ActionButton, { disabled: disabled || isInvalid, value: phoneNumber, type: "PHONE_NUMBER", dataTestId: dataTestId && `${dataTestId}-phoneIcon`, iconSize: fieldSize })) }, rest))] }));
 });
 
-/**
- * The PhoneField component is used to enter phone number.
- * It is a wrapper around the PhoneInput component and the FormGroup component.
- * It is used to render a phone number field with a label, a tip, a help text, a help addon and an error message.
- *
- * @param {string} [label] - The label for the component.
- * @param {string} [tip] - The tip for the component.
- * @param {string} [helpText] - The help text for the component.
- * @param {string} [helpAddon] - The help addon for the component.
- * @param {string} [errorMessage] - The error message for the component.
- * @param {string} [defaultValue] - The default value for the component.
- * @param {boolean} [disabled=false] - Whether the component is disabled or not.
- * @param {string} [fieldSize="medium"] - The size of the input field.
- * @param {boolean} [disableAction=false] - Whether the action button is disabled or not.
- * @returns {JSX.Element} - The PhoneField component.
- */
-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 [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)) }));
-});
-
 /**
  * Validates a phone number
  */
@@ -1546,6 +1514,48 @@ const isInvalidCountryCode = (error, required) => (!!required && error === "REQU
  */
 const isInvalidPhoneNumber = (error, required) => error !== "REQUIRED_COUNTRY" && ((!!error && error !== "REQUIRED") || (!!required && error === "REQUIRED"));
 
+/**
+ * The PhoneField component is used to enter phone number.
+ * It is a wrapper around the PhoneInput component and the FormGroup component.
+ * It is used to render a phone number field with a label, a tip, a help text, a help addon and an error message.
+ *
+ * @param {string} [label] - The label for the component.
+ * @param {string} [tip] - The tip for the component.
+ * @param {string} [helpText] - The help text for the component.
+ * @param {string} [helpAddon] - The help addon for the component.
+ * @param {string} [errorMessage] - The error message for the component.
+ * @param {string} [defaultValue] - The default value for the component.
+ * @param {boolean} [disabled=false] - Whether the component is disabled or not.
+ * @param {string} [fieldSize="medium"] - The size of the input field.
+ * @param {boolean} [disableAction=false] - Whether the action button is disabled or not.
+ * @returns {JSX.Element} - The PhoneField component.
+ */
+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 [t] = useTranslation();
+    const [isValid, setIsValid] = useState(true);
+    const [localError, setLocalError] = useState(undefined);
+    const renderAsInvalid = !isValid || isInvalid || Boolean(errorMessage);
+    const validate = ({ phone, national, countryCode }) => {
+        const areFieldsPopulated = Boolean(national && countryCode);
+        const phoneValidationResult = validatePhoneNumber({ phone, national, countryCode });
+        setIsValid(areFieldsPopulated ? !Boolean(phoneValidationResult) : true);
+        setLocalError(Boolean(phoneValidationResult) ? t(`phoneField.error.${phoneValidationResult}`) : undefined);
+    };
+    const onChangeValueHandler = (phoneNumberValue) => {
+        if (!isValid) {
+            validate(phoneNumberValue);
+        }
+        onChangeValue && onChangeValue(Object.assign(Object.assign({}, phoneNumberValue), { isValid }));
+    };
+    const handleOnFieldBlur = (phoneNumberValue) => {
+        validate(phoneNumberValue);
+        onFieldsBlur && onFieldsBlur(Object.assign(Object.assign({}, phoneNumberValue), { isValid }));
+    };
+    return (jsx(FormGroup, { htmlFor: htmlForId, label: label, tip: tip, isInvalid: renderAsInvalid, helpText: (renderAsInvalid && (errorMessage || localError)) || 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)) }));
+});
+
 const cvaRadioGroup = cvaMerge(["flex", "gap-2", "flex-col", "items-start"], {
     variants: {
         layout: {

package/package.json

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

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<"phoneField.error">, import("i18next").i18n, boolean] & {
-    t: TransForLibs<"phoneField.error">;
+export declare const useTranslation: () => [TransForLibs<"phoneField.error.INVALID_COUNTRY" | "phoneField.error.INVALID_LENGTH" | "phoneField.error.NOT_A_NUMBER" | "phoneField.error.REQUIRED" | "phoneField.error.REQUIRED_COUNTRY" | "phoneField.error.TOO_LONG" | "phoneField.error.TOO_SHORT" | "phoneField.error.undefined">, import("i18next").i18n, boolean] & {
+    t: TransForLibs<"phoneField.error.INVALID_COUNTRY" | "phoneField.error.INVALID_LENGTH" | "phoneField.error.NOT_A_NUMBER" | "phoneField.error.REQUIRED" | "phoneField.error.REQUIRED_COUNTRY" | "phoneField.error.TOO_LONG" | "phoneField.error.TOO_SHORT" | "phoneField.error.undefined">;
     i18n: import("i18next").i18n;
     ready: boolean;
 };