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

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

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