@arkyn/components 1.4.54 → 1.4.56

package/dist/components/PhoneInput/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/PhoneInput/index.tsx"],"names":[],"mappings":"AACA,OAAO,EAAe,eAAe,EAAE,MAAM,cAAc,CAAC;AAY5D,iBAAS,UAAU,CAAC,KAAK,EAAE,eAAe,2CAiKzC;AAED,OAAO,EAAE,UAAU,EAAE,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/PhoneInput/index.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAe,eAAe,EAAE,MAAM,cAAc,CAAC;AAY5D,iBAAS,UAAU,CAAC,KAAK,EAAE,eAAe,2CAkKzC;AAED,OAAO,EAAE,UAAU,EAAE,CAAC"}

package/dist/components/PhoneInput/index.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { countries } from "@arkyn/templates";
+import { formatToPhone } from "@arkyn/shared";
 import { useRef, useState } from "react";
 import { useFormController } from "../Form/FormController";
 import { PhoneInputContainer } from "./components/PhoneInputContainer";
@@ -16,6 +17,7 @@ function PhoneInput(props) {
     const [search, setSearch] = useState("");
     const [showCountryOptions, setShowCountryOptions] = useState(false);
     const [value, setValue] = useState(defaultData.formattedNumber || "");
+    const usedValue = formatToPhone(fixedValue) || value;
     const [currentCountry, setCurrentCountry] = useState(() => {
         if (defaultData.country)
             return defaultData.country;
@@ -73,7 +75,7 @@ function PhoneInput(props) {
         if (currentCountry.prefix)
             returnValue += `-${currentCountry.prefix}`;
         returnValue += " ";
-        returnValue += removeNumberMasks(fixedValue || props || value);
+        returnValue += removeNumberMasks(props || usedValue);
         return returnValue;
     }
     return (_jsxs(PhoneInputContainer, { id: id, disabled: disabled, isError: isError, isLoading: isLoading, isFocused: isFocused, readOnly: readOnly, size: size, variant: variant, className: className, onFocus: handleContainerFocus, children: [_jsx(PhoneInputCountrySelector, { currentCountry: currentCountry, onClick: handleOpenCountryOptions, size: size }), _jsxs(PhoneInputCountryOptionsContainer, { isOpen: showCountryOptions, search: search, placeholder: searchCountryPlaceholder, onSearch: setSearch, children: [countries
@@ -83,7 +85,7 @@ function PhoneInput(props) {
                             setShowCountryOptions(false);
                             setValue(country.mask);
                         }, isActive: country.iso === currentCountry.iso, size: size }, country.iso))), countries.filter((country) => filterCountryFunction(country))
-                        .length === 0 && _jsx("p", { children: notFoundCountryText })] }), _jsx(PhoneInputCountriesOverlay, { isOpen: showCountryOptions, onClick: handleCloseCountryOptions }), _jsx(PhoneInputMask, { ref: inputPhoneMaskRef, currentCountry: currentCountry, value: fixedValue || value, onChange: (e) => {
+                        .length === 0 && _jsx("p", { children: notFoundCountryText })] }), _jsx(PhoneInputCountriesOverlay, { isOpen: showCountryOptions, onClick: handleCloseCountryOptions }), _jsx(PhoneInputMask, { ref: inputPhoneMaskRef, currentCountry: currentCountry, value: usedValue, onChange: (e) => {
                     setValue(e);
                     onChange && onChange(inputValue(e));
                 }, disabled: disabled, onBlur: handleInputBlur, onFocus: handleInputFocus, size: size }), _jsx("input", { ref: inputRef, type: "hidden", name: name, value: inputValue() })] }));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arkyn/components",
-  "version": "1.4.54",
+  "version": "1.4.56",
   "main": "./dist/bundle.js",
   "types": "./dist/index.d.ts",
   "author": "Lucas Gonçalves",

package/src/components/PhoneInput/index.tsx

@@ -1,4 +1,5 @@
 import { countries } from "@arkyn/templates";
+import { formatToPhone } from "@arkyn/shared";
 import { CountryType, PhoneInputProps } from "@arkyn/types";
 import { useRef, useState } from "react";
 
@@ -35,6 +36,7 @@ function PhoneInput(props: PhoneInputProps) {
   const [search, setSearch] = useState("");
   const [showCountryOptions, setShowCountryOptions] = useState(false);
   const [value, setValue] = useState(defaultData.formattedNumber || "");
+  const usedValue = formatToPhone(fixedValue) || value;
 
   const [currentCountry, setCurrentCountry] = useState<CountryType>(() => {
     if (defaultData.country) return defaultData.country;
@@ -101,7 +103,7 @@ function PhoneInput(props: PhoneInputProps) {
     let returnValue = currentCountry.code;
     if (currentCountry.prefix) returnValue += `-${currentCountry.prefix}`;
     returnValue += " ";
-    returnValue += removeNumberMasks(fixedValue || props || value);
+    returnValue += removeNumberMasks(props || usedValue);
     return returnValue;
   }
 
@@ -158,7 +160,7 @@ function PhoneInput(props: PhoneInputProps) {
       <PhoneInputMask
         ref={inputPhoneMaskRef}
         currentCountry={currentCountry}
-        value={fixedValue || value}
+        value={usedValue}
         onChange={(e) => {
           setValue(e);
           onChange && onChange(inputValue(e));