@start-base/react-form-elements/PhoneInput/index.mjs

Simplify form elements and form management. Selection of user friendly inputs and wide customization abilities to match your design and functionality.

import e,{forwardRef as l,useCallback as a,useMemo as n}from"react";import t from"clsx";import{usePhoneInput as r,FlagImage as o}from"react-international-phone";var u=Object.defineProperty,p=Object.defineProperties,d=Object.getOwnPropertyDescriptors,s=Object.getOwnPropertySymbols,m=Object.prototype.hasOwnProperty,i=Object.prototype.propertyIsEnumerable,c=(e,l,a)=>l in e?u(e,l,{enumerable:!0,configurable:!0,writable:!0,value:a}):e[l]=a,I=(e,l)=>{for(var a in l||(l={}))m.call(l,a)&&c(e,a,l[a]);if(s)for(var a of s(l))i.call(l,a)&&c(e,a,l[a]);return e},h=(e,l)=>p(e,d(l)),b=(e,l)=>{var a={};for(var n in e)m.call(e,n)&&l.indexOf(n)<0&&(a[n]=e[n]);if(null!=e&&s)for(var n of s(e))l.indexOf(n)<0&&i.call(e,n)&&(a[n]=e[n]);return a},f="SUI-Input-module-root-Jh-4e",v="SUI-Input-module-inputRoot-Ug822",S="SUI-Input-module-label-fpxAl",N="SUI-Input-module-disableShrink-VTup6",y="SUI-Input-module-prepend-PTtkE",C="SUI-Input-module-placeholder-RxhY2",U="SUI-Input-module-labelPlaceholder-03rs3",g="SUI-Input-module-input-SMgjS",E="SUI-Input-module-disabledLabel-hKDBK",O="SUI-Input-module-append-TNa8b",P="SUI-Input-module-appendDisabledShrink-ULDV8",x="SUI-Input-module-prependDisabledShrink-5DxUo",j="SUI-Input-module-errorLabel-Qp8cB",k="SUI-Input-module-inputError-EeFMs",D="SUI-Input-module-disabled--Ng0A",w=l(((l,r)=>{var o=l,{name:u,onChange:p,error:d=null,label:s=null,placeholder:m,value:i="",inputClassName:c=null,labelClassName:w=null,errorClassName:R=null,prepend:V=null,prependClassName:A=null,append:B=null,appendClassName:L=null,disableShrink:T=!1,disabled:Y=!1}=o,q=b(o,["name","onChange","error","label","placeholder","value","inputClassName","labelClassName","errorClassName","prepend","prependClassName","append","appendClassName","disableShrink","disabled"]);const F=a((e=>{p(e)}),[p]),K=n((()=>{let e=null;return d&&"string"==typeof d?e=d:d&&"object"==typeof d&&(null==d?void 0:d.message)&&(e=d.message),e}),[d]),M=n((()=>e.createElement("input",I({type:"text",className:t(g,I({[N]:T||!s,[C]:s&&m&&!T,[D]:Y,[k]:"boolean"==typeof d&&d},c?{[c]:!0}:{})),name:u,value:i,ref:r,onChange:F,disabled:Y,placeholder:m},q))),[T,s,m,Y,d,c,u,i,r,F,q]),z=n((()=>e.createElement("label",{htmlFor:u,className:t(S,I({[E]:Y,[N]:T,[U]:s&&m&&!T},w?{[w]:!0}:{})),onClick:()=>{var e;try{const l=document.querySelectorAll(`[name="${u}"]`);if(!l.length)return;let a=l[0];"hidden"===(null==a?void 0:a.type)&&(a=null==(e=null==a?void 0:a.parentNode)?void 0:e.querySelector("input")),null==a||a.focus()}catch(e){throw e}}},s)),[Y,u,T,s,m,w]);return e.createElement("div",{className:t(f)},e.createElement("div",{className:t(v)},V&&e.createElement("div",{className:t(y,h(I({},A?{[A]:!0}:{}),{[x]:T}))},V),B&&e.createElement("div",{className:t(O,I({[P]:T},L?{[L]:!0}:{}))},B),s&&T?z:null,M,s&&!T?z:null),K?e.createElement("span",{className:t(j,I({},R?{[R]:!0}:{}))},K):null)}));w.displayName="Input";var R=w,V="SUI-PhoneInput-module-root-NiOi2",A="SUI-PhoneInput-module-prepend-xYBcY",B=l(((l,a)=>{var n=l,{name:t,onChange:u,value:p="",defaultCountry:d="us"}=n,s=b(n,["name","onChange","value","defaultCountry"]);const m=r({defaultCountry:d,value:p,onChange:({phone:e})=>{u({target:{name:t,value:e}})},inputRef:a});return e.createElement("div",{className:V},e.createElement(R,h(I({ref:m.inputRef,onChange:m.handlePhoneValueChange,name:t,type:"tel",value:m.inputValue},s),{append:e.createElement(o,{iso2:m.country.iso2,size:"24px"}),appendClassName:A})))}));B.displayName="PhoneInput";var L=B;export{L as default};