@trackunit/react-form-components 0.0.258 → 0.0.261

package/index.cjs.js

@@ -46,6 +46,7 @@ var ReactAsyncSelect__default = /*#__PURE__*/_interopDefaultLegacy(ReactAsyncSel
 var defaultTranslations = {
 	"phoneField.error.INVALID_COUNTRY": "The country code is not valid",
 	"phoneField.error.INVALID_LENGTH": "The phone number is not valid",
+	"phoneField.error.INVALID_NUMBER": "The phone number is not valid",
 	"phoneField.error.NOT_A_NUMBER": "The phone number can contain numbers only",
 	"phoneField.error.REQUIRED": "The phone number is required",
 	"phoneField.error.REQUIRED_COUNTRY": "The country code is required",
@@ -477,7 +478,7 @@ const IndeterminateIcon = ({ className }) => (jsxRuntime.jsx("svg", { xmlns: "ht
  * @returns {JSX.Element} Checkbox component
  */
 const Checkbox = React__namespace.forwardRef((_a, ref) => {
-    var { className, dataTestId = "checkbox", onChange, checked = false, disabled = false, isInvalid = false, readOnly, indeterminate = false, suffix, label, tabIndex = 0, onLabelRefChange } = _a, rest = __rest(_a, ["className", "dataTestId", "onChange", "checked", "disabled", "isInvalid", "readOnly", "indeterminate", "suffix", "label", "tabIndex", "onLabelRefChange"]);
+    var { className, dataTestId = "checkbox", onChange, checked = false, disabled = false, isInvalid = false, readOnly, indeterminate = false, suffix, label, tabIndex = 0, onLabelRefChange, stopPropagation } = _a, rest = __rest(_a, ["className", "dataTestId", "onChange", "checked", "disabled", "isInvalid", "readOnly", "indeterminate", "suffix", "label", "tabIndex", "onLabelRefChange", "stopPropagation"]);
     const icon = indeterminate ? (jsxRuntime.jsx(IndeterminateIcon, { className: cvaCheckboxIcon() })) : (checked && jsxRuntime.jsx(CheckIcon, { className: cvaCheckboxIcon() }));
     const internalRef = React__namespace.useRef(null);
     const isReadonly = disabled || readOnly;
@@ -496,7 +497,7 @@ const Checkbox = React__namespace.forwardRef((_a, ref) => {
         onLabelRefChange && labelRef && onLabelRefChange(labelRef);
     }, [labelRef, onLabelRefChange]);
     const uuid = rest.id;
-    return (jsxRuntime.jsxs("label", { "data-testid": dataTestId && `${dataTestId}-container`, htmlFor: uuid, className: cvaCheckboxContainer({ className }), ref: internalRef, onKeyDown: onKeyPress, children: [jsxRuntime.jsx("input", Object.assign({ type: "checkbox", className: cvaCheckboxInput(), checked: !indeterminate && checked, onChange: onChange, disabled: disabled, "data-testid": dataTestId, readOnly: readOnly, "aria-checked": !indeterminate && checked, id: uuid }, rest, { ref: ref })), jsxRuntime.jsx("span", { id: uuid, tabIndex: isReadonly ? -1 : tabIndex, className: cvaCheckbox({
+    return (jsxRuntime.jsxs("label", { "data-testid": dataTestId && `${dataTestId}-container`, htmlFor: uuid, className: cvaCheckboxContainer({ className }), ref: internalRef, onKeyDown: onKeyPress, onClick: e => stopPropagation && e.stopPropagation(), children: [jsxRuntime.jsx("input", Object.assign({ type: "checkbox", className: cvaCheckboxInput(), checked: !indeterminate && checked, onChange: onChange, disabled: disabled, "data-testid": dataTestId, readOnly: readOnly, "aria-checked": !indeterminate && checked, id: uuid }, rest, { ref: ref })), jsxRuntime.jsx("span", { id: uuid, tabIndex: isReadonly ? -1 : tabIndex, className: cvaCheckbox({
                     disabled: isReadonly,
                     invalid: isReadonly ? false : isInvalid,
                     state: indeterminate ? "indeterminate" : checked ? "selected" : "deselected",
@@ -1511,6 +1512,9 @@ const PhoneInput = React.forwardRef((_a, ref) => {
  */
 const validatePhoneNumber = ({ phone, countryCode, national, }) => {
     const phoneNumber = phone ? phone : countryCode || national ? `${countryCode}${national}` : undefined;
+    if (phoneNumber && parsePhoneNumberFromString.isValidPhoneNumber(phoneNumber)) {
+        return undefined;
+    }
     if (!phoneNumber) {
         return "REQUIRED";
     }
@@ -1530,10 +1534,7 @@ const validatePhoneNumber = ({ phone, countryCode, national, }) => {
     if (!number) {
         return "NOT_A_NUMBER";
     }
-    if (!parsePhoneNumberFromString.isValidPhoneNumber(number.number, number.country)) {
-        return parsePhoneNumberFromString.validatePhoneNumberLength(number.number, number.country);
-    }
-    return undefined;
+    return "INVALID_NUMBER";
 };
 /**
  * Checks if the country code is valid and required
@@ -1574,9 +1575,7 @@ const PhoneField = React.forwardRef((_a, ref) => {
         setLocalError(Boolean(phoneValidationResult) ? t(`phoneField.error.${phoneValidationResult}`) : undefined);
     };
     const onChangeValueHandler = (phoneNumberValue) => {
-        if (!isValid) {
-            validate(phoneNumberValue);
-        }
+        validate(phoneNumberValue);
         onChangeValue && onChangeValue(Object.assign(Object.assign({}, phoneNumberValue), { isValid }));
     };
     const handleOnFieldBlur = (phoneNumberValue) => {

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, parsePhoneNumberFromString as parsePhoneNumberFromString$1, isValidPhoneNumber, validatePhoneNumberLength } from 'libphonenumber-js';
+import parsePhoneNumberFromString, { getCountries, getCountryCallingCode, isValidPhoneNumber, parsePhoneNumberFromString as parsePhoneNumberFromString$1 } from 'libphonenumber-js';
 import ReactSelect, { components } from 'react-select';
 export { default as ValueType } from 'react-select';
 import ReactAsyncCreatableSelect from 'react-select/async-creatable';
@@ -16,6 +16,7 @@ import ReactAsyncSelect from 'react-select/async';
 var defaultTranslations = {
 	"phoneField.error.INVALID_COUNTRY": "The country code is not valid",
 	"phoneField.error.INVALID_LENGTH": "The phone number is not valid",
+	"phoneField.error.INVALID_NUMBER": "The phone number is not valid",
 	"phoneField.error.NOT_A_NUMBER": "The phone number can contain numbers only",
 	"phoneField.error.REQUIRED": "The phone number is required",
 	"phoneField.error.REQUIRED_COUNTRY": "The country code is required",
@@ -447,7 +448,7 @@ const IndeterminateIcon = ({ className }) => (jsx("svg", { xmlns: "http://www.w3
  * @returns {JSX.Element} Checkbox component
  */
 const Checkbox = React.forwardRef((_a, ref) => {
-    var { className, dataTestId = "checkbox", onChange, checked = false, disabled = false, isInvalid = false, readOnly, indeterminate = false, suffix, label, tabIndex = 0, onLabelRefChange } = _a, rest = __rest(_a, ["className", "dataTestId", "onChange", "checked", "disabled", "isInvalid", "readOnly", "indeterminate", "suffix", "label", "tabIndex", "onLabelRefChange"]);
+    var { className, dataTestId = "checkbox", onChange, checked = false, disabled = false, isInvalid = false, readOnly, indeterminate = false, suffix, label, tabIndex = 0, onLabelRefChange, stopPropagation } = _a, rest = __rest(_a, ["className", "dataTestId", "onChange", "checked", "disabled", "isInvalid", "readOnly", "indeterminate", "suffix", "label", "tabIndex", "onLabelRefChange", "stopPropagation"]);
     const icon = indeterminate ? (jsx(IndeterminateIcon, { className: cvaCheckboxIcon() })) : (checked && jsx(CheckIcon, { className: cvaCheckboxIcon() }));
     const internalRef = React.useRef(null);
     const isReadonly = disabled || readOnly;
@@ -466,7 +467,7 @@ const Checkbox = React.forwardRef((_a, ref) => {
         onLabelRefChange && labelRef && onLabelRefChange(labelRef);
     }, [labelRef, onLabelRefChange]);
     const uuid = rest.id;
-    return (jsxs("label", { "data-testid": dataTestId && `${dataTestId}-container`, htmlFor: uuid, className: cvaCheckboxContainer({ className }), ref: internalRef, onKeyDown: onKeyPress, children: [jsx("input", Object.assign({ type: "checkbox", className: cvaCheckboxInput(), checked: !indeterminate && checked, onChange: onChange, disabled: disabled, "data-testid": dataTestId, readOnly: readOnly, "aria-checked": !indeterminate && checked, id: uuid }, rest, { ref: ref })), jsx("span", { id: uuid, tabIndex: isReadonly ? -1 : tabIndex, className: cvaCheckbox({
+    return (jsxs("label", { "data-testid": dataTestId && `${dataTestId}-container`, htmlFor: uuid, className: cvaCheckboxContainer({ className }), ref: internalRef, onKeyDown: onKeyPress, onClick: e => stopPropagation && e.stopPropagation(), children: [jsx("input", Object.assign({ type: "checkbox", className: cvaCheckboxInput(), checked: !indeterminate && checked, onChange: onChange, disabled: disabled, "data-testid": dataTestId, readOnly: readOnly, "aria-checked": !indeterminate && checked, id: uuid }, rest, { ref: ref })), jsx("span", { id: uuid, tabIndex: isReadonly ? -1 : tabIndex, className: cvaCheckbox({
                     disabled: isReadonly,
                     invalid: isReadonly ? false : isInvalid,
                     state: indeterminate ? "indeterminate" : checked ? "selected" : "deselected",
@@ -1481,6 +1482,9 @@ const PhoneInput = forwardRef((_a, ref) => {
  */
 const validatePhoneNumber = ({ phone, countryCode, national, }) => {
     const phoneNumber = phone ? phone : countryCode || national ? `${countryCode}${national}` : undefined;
+    if (phoneNumber && isValidPhoneNumber(phoneNumber)) {
+        return undefined;
+    }
     if (!phoneNumber) {
         return "REQUIRED";
     }
@@ -1500,10 +1504,7 @@ const validatePhoneNumber = ({ phone, countryCode, national, }) => {
     if (!number) {
         return "NOT_A_NUMBER";
     }
-    if (!isValidPhoneNumber(number.number, number.country)) {
-        return validatePhoneNumberLength(number.number, number.country);
-    }
-    return undefined;
+    return "INVALID_NUMBER";
 };
 /**
  * Checks if the country code is valid and required
@@ -1544,9 +1545,7 @@ const PhoneField = forwardRef((_a, ref) => {
         setLocalError(Boolean(phoneValidationResult) ? t(`phoneField.error.${phoneValidationResult}`) : undefined);
     };
     const onChangeValueHandler = (phoneNumberValue) => {
-        if (!isValid) {
-            validate(phoneNumberValue);
-        }
+        validate(phoneNumberValue);
         onChangeValue && onChangeValue(Object.assign(Object.assign({}, phoneNumberValue), { isValid }));
     };
     const handleOnFieldBlur = (phoneNumberValue) => {

package/package.json

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

package/src/components/Checkbox/Checkbox.d.ts

@@ -34,6 +34,10 @@ export interface CheckboxProps extends CommonProps, React.InputHTMLAttributes<HT
      * A function returning the label ref
      */
     onLabelRefChange?: (label: HTMLElement) => void;
+    /**
+     * An boolean flag to stop propagation of the click event
+     */
+    stopPropagation?: boolean;
 }
 /**
  * Checkboxes are used when there are multiple items to select in a list. Users can select zero, one, or any number of items.

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

@@ -1,5 +1,5 @@
 import { ValidatePhoneNumberLengthResult } from "libphonenumber-js";
-export type PhoneInputValidationError = "REQUIRED" | "REQUIRED_COUNTRY" | ValidatePhoneNumberLengthResult | undefined;
+export type PhoneInputValidationError = "REQUIRED" | "REQUIRED_COUNTRY" | "INVALID_NUMBER" | ValidatePhoneNumberLengthResult | undefined;
 export interface PhoneNumberValueForValidation {
     phone?: string | undefined | null;
     national?: string | undefined | null;

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.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">;
+export declare const useTranslation: () => [TransForLibs<"phoneField.error.INVALID_COUNTRY" | "phoneField.error.INVALID_LENGTH" | "phoneField.error.INVALID_NUMBER" | "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.INVALID_NUMBER" | "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;
 };

package/translation.cjs7.js

@@ -1,13 +1,13 @@
 'use strict';
 
 var translation = {
-	"phoneField.error.INVALID_COUNTRY": "The country code is not valid",
-	"phoneField.error.INVALID_LENGTH": "The phone number is not valid",
-	"phoneField.error.NOT_A_NUMBER": "The phone number can contain numbers only",
-	"phoneField.error.REQUIRED": "The phone number is required",
-	"phoneField.error.REQUIRED_COUNTRY": "The country code is required",
-	"phoneField.error.TOO_LONG": "The phone number is too long",
-	"phoneField.error.TOO_SHORT": "The phone number is too short",
+	"phoneField.error.INVALID_COUNTRY": "Az országkód érvénytelen",
+	"phoneField.error.INVALID_LENGTH": "A telefonszám érvénytelen",
+	"phoneField.error.NOT_A_NUMBER": "A telefonszám csak számokat tartalmazhat",
+	"phoneField.error.REQUIRED": "A telefonszám megadása kötelező",
+	"phoneField.error.REQUIRED_COUNTRY": "Az országkód megadása kötelező",
+	"phoneField.error.TOO_LONG": "A telefonszám túl hosszú",
+	"phoneField.error.TOO_SHORT": "A telefonszám túl rövid",
 	"phoneField.error.undefined": ""
 };
 

package/translation.esm7.js

@@ -1,11 +1,11 @@
 var translation = {
-	"phoneField.error.INVALID_COUNTRY": "The country code is not valid",
-	"phoneField.error.INVALID_LENGTH": "The phone number is not valid",
-	"phoneField.error.NOT_A_NUMBER": "The phone number can contain numbers only",
-	"phoneField.error.REQUIRED": "The phone number is required",
-	"phoneField.error.REQUIRED_COUNTRY": "The country code is required",
-	"phoneField.error.TOO_LONG": "The phone number is too long",
-	"phoneField.error.TOO_SHORT": "The phone number is too short",
+	"phoneField.error.INVALID_COUNTRY": "Az országkód érvénytelen",
+	"phoneField.error.INVALID_LENGTH": "A telefonszám érvénytelen",
+	"phoneField.error.NOT_A_NUMBER": "A telefonszám csak számokat tartalmazhat",
+	"phoneField.error.REQUIRED": "A telefonszám megadása kötelező",
+	"phoneField.error.REQUIRED_COUNTRY": "Az országkód megadása kötelező",
+	"phoneField.error.TOO_LONG": "A telefonszám túl hosszú",
+	"phoneField.error.TOO_SHORT": "A telefonszám túl rövid",
 	"phoneField.error.undefined": ""
 };