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