@nexusui/components/core/common/PhoneNumber/PhoneNumber.component.js

These are custom components specially-developed for NexusUI applications. They will make your life easier by giving you out-of-the-box implementations for various high-level UI elements that you can drop directly into your application.

"use client";
import{jsx as e,jsxs as t,Fragment as o}from"react/jsx-runtime";import{useState as r,useRef as n,useMemo as i,useCallback as l,useEffect as a}from"react";import s from"country-flag-icons/react/3x2";import u from"@mui/material/TextField";import d from"@mui/material/InputAdornment";import m from"@mui/material/IconButton";import c from"lodash/some";import p from"lodash/find";import g from"lodash/reduce";import f from"lodash/trim";import C from"lodash/startsWith";import h from"lodash/isString";import y from"clsx";import{allCountries as b}from"./country_data.js";import N from"./PhoneNumber.styles.js";import P from"./CountryMenu.js";import x from"./useFormattedNumber.js";const D="NexusPhoneNumber",v={autoFormat:!0,countryCodeEditable:!0,defaultCountry:"",disabled:!1,disableAreaCodes:!0,disableCountryCode:!1,disableDropdown:!1,enableLongNumbers:!1,error:!1,excludeCountries:[],highPriorityCountries:["us","cn","fr","gb","es"],InputProps:{},inputProps:{"data-testid":"NexusPhoneNumber-input"},inputRef:()=>{},isValid:e=>c(b,(t=>C(e,t.dialCode)||C(t.dialCode,e))),includeCountries:[],placeholder:"+1 (702) 123-4567",regions:"",value:"",variant:"standard",onBlur:()=>{},onChange:()=>{},onClick:()=>{},onEnterKeyPress:()=>{},onKeyDown:()=>{}},S=()=>!!document.createElement&&Boolean(document.createElement("input").setSelectionRange),B=c=>{const{autoFormat:B,countryCodeEditable:R,defaultCountry:w,disableAreaCodes:E,disableCountryCode:A,disableDropdown:F,enableLongNumbers:I,error:j,excludeCountries:K,highPriorityCountries:$,isValid:k,includeCountries:L,placeholder:T,regions:V,value:U,inputProps:M,InputProps:W,inputRef:_,onClick:q,onChange:z,onBlur:G,onKeyDown:H,onEnterKeyPress:J,...O}={...v,...c},[Q,X]=r(null),[Y,Z]=r(w),[ee,te]=r("string"==typeof U?U:""),[oe,re]=r({dialCode:"",format:"",iso2:"",priority:0,regions:[],name:""}),ne=n(),ie=n("string"==typeof U?U:""),le=n(oe),ae=x({autoFormat:B,disableCountryCode:A,enableLongNumbers:I,innerValue:ee,selectedCountryDialCode:oe.dialCode,selectedCountryFormat:oe.format,lastSelectedCountry:le}),se=i((()=>{let e=b;return E&&(e=e.filter((e=>!0!==e.isAreaCode))),V&&(e=((e,t)=>{if("string"==typeof e){const o=e;return t.filter((e=>e.regions.some((e=>e===o))))}return t.filter((t=>e.map((e=>t.regions.some((t=>t===e)))).some((e=>e))))})(V,e)),L&&L?.length>0&&(e=e.filter((e=>L.some((t=>t===e.iso2))))),K&&K?.length>0&&(e=e.filter((e=>!K.some((t=>t===e.iso2))))),e}),[E,L,K,V]),ue=l(((e,t,o)=>{const r=p(t,{iso2:o})||void 0;if(""===f(e))return r;const n=g([...t],((t,o)=>{if(C(e,o.dialCode)){if(o.dialCode.length>t.dialCode.length)return o;if(o.dialCode.length===t.dialCode.length&&o.priority<t.priority)return o}return t}),{name:"",regions:[],iso2:"",dialCode:"",priority:0});return n.name?n:r}),[]),de=l((e=>{const t=p(se,{iso2:e});re((e=>(le.current=e,t||e))),Z(e)}),[se]),me=l((()=>{const{current:e}=ne;if(e&&(e.focus(),S())){const t=e.value.length;e.setSelectionRange(t,t)}}),[]),ce=l((e=>{const{current:t}=ne,o=(t?.value||"").replace(/\D/g,""),r=h(e)?p(se,(t=>t.iso2===e)):p(se,e);r&&re((e=>(le.current=e,r||e))),te((()=>0===o.length?`+${r?.dialCode||""}`:o)),X(null),setTimeout((()=>me()),100)}),[se,me]),pe=l((()=>oe?{name:oe.name||"",dialCode:oe.dialCode||"",countryCode:oe.iso2||""}:{name:"",dialCode:"",countryCode:""}),[oe]),ge=l((e=>{q&&q(e,pe())}),[pe,q]);a((()=>{const e="string"==typeof U?U:"";let t;t=e.length>1?ue(e.replace(/\D/g,"").substring(0,6),se,w)||0:w&&p(se,{iso2:w})||0,0===e.length&&t&&te(t.dialCode||""),re((e=>(le.current=e,t)))}),[ue,w,se,U]);const fe=l((()=>{X(null)}),[]),Ce=l((e=>{X(e.currentTarget)}),[]);a((()=>{Y!==w&&de(w)}),[Y,w,de]),a((()=>{const{current:e}=ne,t=e?.selectionStart||ae.length;if(S()){")"===ae.charAt(ae.length-1)?e?.setSelectionRange(ae.length-1,ae.length-1):t>0&&e?.setSelectionRange(t,t)}z&&z(ae,pe())}),[ae,pe,z]);const he=i((()=>{const r=[...se].sort(((e,t)=>e.name.localeCompare(t.name))),n=s[oe&&oe.iso2.toUpperCase()];return F?{}:{startAdornment:e(d,{sx:N.positionStart,position:"start",children:t(o,{children:[e(m,{"data-testid":"NexusuiPhoneNumber-flag-dropdown-button",sx:N.flagButton,onClick:Ce,"aria-label":"Choose Country",children:Boolean(n)&&e(n,{className:y(`${D}-flag`,"NexusuiPhoneNumber-flag"),"data-testid":`NexusuiPhoneNumber-flag-for-${oe?.iso2.toUpperCase()}`})}),e(P,{anchorEl:Q,defaultCountry:Y,selectedCountry:oe,allCountries:r,onSelect:ce,onClose:fe,highPriorityCountries:$})]})})}}),[Q,Y,F,fe,Ce,ce,$,oe,se]);return e(u,{placeholder:T,value:ae,className:y(`${D}-root`,"NexusuiPhoneNumber-input"),inputRef:e=>{const{inputRef:t,InputProps:o}=c;let r;ne.current=e,t?r=t:o&&o.ref&&(r=o.ref),r&&("function"==typeof r?r(e):r.current=e)},error:j||!k?.(ae.replace(/\D/g,"")),onChange:e=>{const t=e.target.value||"",o=t.replace(/\D/g,"");let r=oe;if(ie.current=ae,!R){const t=`+${r?.dialCode}`;if(e.target.value.length<t.length)return}t.replace(/\D/g,"").length>15||t!==ee&&(e.preventDefault&&e.preventDefault(),e.target.value.length>0&&oe?.dialCode?.length>o.length&&(r=ue(o.substring(0,6),se,Y)),re((e=>(le.current=e,r||e))),te(o))},onClick:ge,onBlur:e=>{G&&G(e,pe())},onKeyDown:e=>{13===e.which&&J&&J(e),H&&H(e)},type:"tel",...O,slotProps:{input:{inputProps:{"data-testid":"NexusPhoneNumber-inputBox","aria-label":"Phone number",...M},...he,...W},htmlInput:M}})};export{B as PhoneNumber,B as default};