@snowball-tech/fractal/dist/InputPhone/InputPhone.js

Fractal's (Snowball's design system) React component library based on RadixUI and TailwindCSS

"use client";import{a as e}from"../constants-CW2-utNH.js";import{n as t,r as n}from"../helpers-DBEwVIlX.js";import{Typography as r}from"../Typography/Typography.js";import{r as i}from"../utils-K22C_6qC.js";import{InputText as a}from"../InputText/InputText.js";import{GROUP_NAME as o,countryByCountryCode as s,supportedCountries as c}from"./InputPhone.constants.js";import{Select as ee}from"../Select/Select.js";import{SelectEmpty as te}from"../Select/SelectEmpty.js";import{SelectItem as ne}from"../Select/SelectItem.js";import{forwardRef as l,useCallback as re,useEffect as ie,useId as ae,useImperativeHandle as oe,useRef as u,useState as d}from"react";import f from"lodash/fp/isEmpty.js";import p from"lodash/fp/isFunction.js";import m from"lodash/fp/isString.js";import h from"lodash/fp/omit.js";import se from"lodash/fp/isNil.js";import{Fragment as ce,jsx as g,jsxs as _}from"react/jsx-runtime";import{Label as le}from"@radix-ui/react-label";import v from"lodash/fp/isError.js";import{UilCheckCircle as ue,UilExclamationCircle as de,UilSearchAlt as fe}from"@tooni/iconscout-unicons-react";import y,{getExampleNumber as pe}from"libphonenumber-js/max";import me from"libphonenumber-js/mobile/examples";const b=l(({autoFocus:l=!1,defaultValue:b,description:x,disabled:S=!1,emptyPrefixLabel:he=`-`,error:C,fullWidth:w=!1,id:ge,label:T,labelElement:_e,name:E,onChange:D,placeholder:O,prefixSelect:k={},readOnly:A=!1,required:j=!1,searchPlaceholder:ve,success:M,updateOnInvalid:ye=!0,value:N,withPrefix:P=!0,...F},be)=>{n();let I=ae(),L=(ge??I)||I,[xe,Se]=d(null),R=u(null),Ce=u(null),z=u(null);oe(be,()=>({get phone(){return R?.current??null},get prefix(){return Ce?.current??null},get searchPrefixInput(){return z?.current??null}}));let[B,V]=d(!1),[we,Te]=d(``),[H,Ee]=d(c),[U,De]=d(null),[W,G]=d(``),[K,q]=d(null),[Oe,J]=d(O),Y=re(e=>{if(De(e),f(e.countryCode))return;q(s?.[e.countryCode]??null);let{countryCode:t}=e;f(t)?J(O):J(pe(t,me)?.formatNational()??O)},[O]);ie(()=>{if(!P){G(N?.number??b?.number??``);return}if(f(N)&&f(b)){let{locale:e=`fr-FR`}=Intl.DateTimeFormat().resolvedOptions(),t=new Intl.Locale(e)?.region??`FR`;if(!f(t)){let e=s?.[t]??null;f(e)||(f(e.prefix)||Y({countryCode:t,prefix:e.prefix}),q(e))}return}let e=N?.number??b?.number??``,t=y(e,`FR`);if(f(t)){f(U?.countryCode)&&(Y({countryCode:`FR`,prefix:s?.FR?.prefix??``}),G(e.replace(`+`,``)));return}Y({countryCode:t.country??U?.countryCode,prefix:t.countryCallingCode}),G(t.nationalNumber)},[Y,b,N,U?.countryCode,P]);let ke=v(C)?C.message:C,X=C!==!0&&!!ke,Z=M!==!0&&!!M,Q=X||C===!0||v(C),$=(Z||M===!0)&&!Q,Ae=(e,t)=>{if(!P){p(D)&&D({number:t});return}if(f(e))return;let n=`+${e.prefix}${t.replaceAll(/^\+/g,``)}`,r=y(n),i=r?.isValid()??!1;p(D)&&(i||ye)&&D({countryCode:e.countryCode,number:r?.number??n},i)},je=e=>{Y(e),f(W)||Ae(e,W)},Me=e=>{G(e),(!P||!f(U))&&Ae(U,e)},Ne=(e,t=!0)=>{Te(e),Ee(c.filter(({countryName:t})=>t.search(RegExp(`.*${e}.*`,`gi`))>=0)),t&&V(!0)},Pe=()=>{B&&(z?.current&&z.current.focus(),V(!1))},Fe=!S&&!A,Ie=!se(xe?.closest(`.${e}-dialog__content`)),Le=m(T)?T:i(T);return _(`div`,{ref:e=>Se(e),className:n(`${e}-${o}`,`flex max-w-full flex-col gap-1`,`${e}-${o}--${Fe?``:`not-`}-writable`,S?`${e}-${o}--disabled`:``,A&&!S?`cursor-default`:``,Q?`${e}-${o}--with-error`:``,A?`${e}-${o}--readonly cursor-default`:``,j?`${e}-${o}--required`:``,$?`${e}-${o}--with-success`:``,F.className),children:[T?g(le,{asChild:!0,className:t(`${e}-${o}__label`,S?`${e}-${o}__label--disabled cursor-default`:`cursor-pointer`,j?`${e}-${o}__label--required after:text-feedback-danger-50 after:content-required`:``),htmlFor:`${L}-number`,children:g(r,{element:_e||(m(T)?`label`:`div`),children:T})}):!1,_(`div`,{className:t(`${e}-${o}__fields`,w?`w-full`:`w-fit`,`flex max-w-full gap-1`),children:[P&&g(ee,{id:`${L}-prefix`,ref:Ce,className:n(`fractal-input-phone__fields__phone-prefix`,`w-[110px] min-w-[110px] max-w-[110px]`,k.className),disabled:S||k.disabled,displayedValue:k.displayedValue??_(`span`,{children:[K?.flag,`\xA0\xA0`,K?.countryCode]}),dropdown:{className:n(`fractal-input-phone__fields__phone-prefix__dropdown`,`max-w-full !pt-8 !w-fit`,Ie?`mb-1`:``,k.dropdown?.className),...h([`className`],k.dropdown)},name:`${E||L}-prefix`,readOnly:A||k.readOnly,required:j,value:JSON.stringify(U),onClose:()=>{Ne(``,!1),k.onClose?.()},onSelect:e=>{je(JSON.parse(e)),k.onSelect?.(e)},...h([`id`,`children`,`defaultValue`,`className`,`disabled`,`displayedValue`,`readOnly`,`dropdown`,`required`,`value`,`onClose`,`onSelect`],k),children:_(ce,{children:[g(a,{ref:z,className:t(`fractal-input-phone__fields__phone-prefix__dropdown__search`,`fixed top-2 !w-[calc(100%-theme(spacing.3))]`),fullWidth:!0,...O===void 0?{}:{placeholder:ve},prefix:g(fe,{}),selectOnFocus:!B,type:`search`,value:we,onBlur:Pe,onChange:(e,t)=>Ne(t,!0)}),f(H)&&g(te,{children:he}),!f(H)&&H.map(({countryCode:e,countryName:t,flag:n,prefix:r})=>_(ne,{value:JSON.stringify({countryCode:e,prefix:r}),children:[n,` `,t,` (+`,r,`)`]},e))]})}),g(a,{id:`${L}-number`,ref:R,"aria-label":Le,autoFocus:l&&!P,className:t(`${e}-${o}__fields__phone-number`,`!w-[calc(12rem+theme(spacing.2)+theme(spacing.2)]`,P&&!f(U)?`${e}-${o}__fields__phone-number--with-prefix-helper [&_input]:!pl-6`:``),disabled:S,error:Q,fullWidth:w,name:`${E||L}-number`,placeholder:Oe??``,prefix:P&&!f(U)?_(r,{className:t(`${e}-${o}__fields__phone-number__prefix-helper`,S?`text-disabled`:`text-dark`,`w-[36px] text-right`),element:`span`,children:[`+`,U.prefix]}):void 0,readOnly:A,required:j,success:$,suffix:Q?g(de,{}):$?g(ue,{}):void 0,title:Le,type:`tel`,value:W,onChange:(e,t)=>Me(t),...h([`className`],F)})]}),x&&!X&&!Z?g(r,{className:t(`${e}-${o}__description`,`cursor-default text-dark`),element:`div`,variant:`caption-median`,children:x}):!1,X||Z?g(r,{className:t(`${e}-${o}__message ${e}-${o}__message--${Q?`error`:`success`}`,`cursor-default text-dark`),element:`div`,variant:`caption-median`,children:Q?v(C)?C.message:C:M}):!1]})});b.displayName=`InputPhone`;export{b as InputPhone,b as default};
//# sourceMappingURL=InputPhone.js.map