@adam-milo/ui 1.0.59 → 1.0.60

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/index14.cjs CHANGED
@@ -1 +1 @@
1
- "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),t=require("react"),a=require("react-dom"),r=require("./index50.cjs"),o=require("@adam-milo/icons"),n=require("./index51.cjs"),s=require("./index62.cjs"),l=t.forwardRef(({label:l,error:i,helperText:d,fullWidth:c=!0,value:u="",onChange:p,countryCode:h="US",onCountryChange:y,countries:m=n.commonCountries,enableFormatting:f=!0,onValidationChange:g,disabled:x,required:C,placeholder:b,id:w,"data-cy":S,"data-testid":v,className:$,onFocus:k,onBlur:j,...D},N)=>{const[P,E]=t.useState(!1),[L,M]=t.useState(!1),[q,B]=t.useState(0),[I,F]=t.useState({top:0,left:0,width:0}),R=t.useId(),T=w||R,V=`${T}-error`,W=`${T}-helper`,z=`${T}-listbox`,A=t.useRef(null),K=t.useRef(null),U=t.useRef(null),H=t.useRef(null),O=S||"phone-input",G=v||"phone-input",J=m.find(e=>e.code===h)||m[0],Q=n.getPhoneMask(h),X=b||Q.placeholder,Y=l&&C&&!l.includes("*")?`${l}*`:l;t.useLayoutEffect(()=>{if(!P||!K.current)return;const e=()=>{if(K.current){const e=K.current.getBoundingClientRect();F({top:e.bottom+12,left:e.left,width:Math.max(e.width,320)})}};return e(),window.addEventListener("scroll",e,!0),window.addEventListener("resize",e),()=>{window.removeEventListener("scroll",e,!0),window.removeEventListener("resize",e)}},[P]),t.useEffect(()=>{const e=e=>{const t=e.target,a=A.current?.contains(t),r=U.current?.contains(t);a||r||E(!1)};return P&&document.addEventListener("pointerdown",e),()=>{document.removeEventListener("pointerdown",e)}},[P]);const Z=t.useCallback(e=>{y?.(e),E(!1),setTimeout(()=>{const e=A.current?.querySelector("input");e?.focus()},0)},[y]),_=t.useCallback(e=>{switch(e.key){case"ArrowDown":e.preventDefault(),B(e=>Math.min(e+1,m.length-1));break;case"ArrowUp":e.preventDefault(),B(e=>Math.max(e-1,0));break;case"Enter":case" ":e.preventDefault(),Z(m[q]);break;case"Escape":e.preventDefault(),E(!1),H.current?.focus();break;case"Tab":E(!1)}},[m,q,Z]),ee=x?"disabled":i?"error":L||P?"focus":"idle";return e.jsxs("div",{ref:A,className:r.cn(s.wrapperStyles,c&&s.wrapperFullWidthStyles),"data-cy":`${O}-wrapper`,"data-testid":`${G}-wrapper`,children:[l&&e.jsx("label",{htmlFor:T,className:s.labelStyles,"data-cy":`${O}-label`,"data-testid":`${G}-label`,children:Y}),e.jsxs("div",{ref:K,className:r.cn(s.containerBaseStyles,c&&s.containerFullWidthStyles,"focus"===ee&&s.containerFocusStyles,"error"===ee&&s.containerErrorStyles,"disabled"===ee&&s.containerDisabledStyles,"idle"===ee&&s.containerIdleStyles),"data-state":ee,"data-cy":`${O}-container`,"data-testid":`${G}-container`,children:[e.jsxs("button",{ref:H,type:"button",className:s.triggerStyles,onClick:()=>!x&&E(!P),onKeyDown:e=>{if("Enter"===e.key||" "===e.key||"ArrowDown"===e.key){e.preventDefault(),E(!0);const t=m.findIndex(e=>e.code===h);B(-1===t?0:t)}},disabled:x,"aria-haspopup":"listbox","aria-expanded":P,"aria-controls":z,"aria-label":`Select country. Current: ${J.name}`,"data-cy":`${O}-country-trigger`,"data-testid":`${G}-country-trigger`,children:[e.jsx("span",{className:s.flagStyles,"data-cy":`${O}-flag`,"data-testid":`${G}-flag`,children:J.flag}),e.jsx(o.Icon,{name:"ChevronDownIcon",size:"sm",color:L||P?"clickable":"text",decorative:!0,"data-cy":`${O}-chevron`})]}),e.jsx("span",{className:s.dialCodeStyles,"data-cy":`${O}-dial-code`,"data-testid":`${G}-dial-code`,children:J.dialCode}),e.jsx("input",{ref:N,id:T,type:"tel",inputMode:"numeric",value:u,onChange:e=>{const t=e.target.value;if(f){const e=n.getPhoneDigits(t).slice(0,Q.maxLength),a=n.formatPhoneNumber(e,h);p?.(a);const r=e.length===Q.maxLength;g?.(r)}else{const e=t.replace(/[^0-9]/g,"");p?.(e);const a=e.length===Q.maxLength;g?.(a)}},onFocus:e=>{M(!0),k?.(e)},onBlur:e=>{M(!1),j?.(e)},placeholder:X,disabled:x,required:C,className:r.cn(s.inputStyles,$),"aria-invalid":i?"true":"false","aria-required":C?"true":void 0,"aria-describedby":i?V:d?W:void 0,"data-cy":O,"data-testid":G,...D})]}),P&&a.createPortal(e.jsx("div",{ref:U,id:z,role:"listbox","aria-label":"Select country",className:s.dropdownStyles,style:{top:I.top,left:I.left,width:I.width,minWidth:"20rem"},tabIndex:-1,onKeyDown:_,"data-cy":`${O}-dropdown`,"data-testid":`${G}-dropdown`,children:e.jsx("div",{className:s.dropdownViewportStyles,children:m.map((t,a)=>e.jsxs("div",{role:"option","aria-selected":t.code===h,className:r.cn(s.optionBaseStyles,a===q&&s.optionHighlightedStyles,t.code===h&&s.optionSelectedStyles),onClick:()=>Z(t),onKeyDown:e=>{"Enter"!==e.key&&" "!==e.key||(e.preventDefault(),Z(t))},onMouseEnter:()=>B(a),tabIndex:a===q?0:-1,"data-cy":`${O}-option-${t.code.toLowerCase()}`,"data-testid":`${G}-option-${t.code.toLowerCase()}`,children:[e.jsx("span",{className:s.optionFlagStyles,children:t.flag}),e.jsx("span",{className:s.optionNameStyles,children:t.name}),e.jsx("span",{className:s.optionDialCodeStyles,children:t.dialCode})]},t.code))})}),document.body),i&&e.jsx("span",{id:V,className:s.errorStyles,role:"alert","data-cy":`${O}-error`,"data-testid":`${G}-error`,children:i}),d&&!i&&e.jsx("span",{id:W,className:s.helperStyles,"data-cy":`${O}-helper`,"data-testid":`${G}-helper`,children:d})]})});l.displayName="PhoneInput",exports.allCountries=n.allCountries,exports.commonCountries=n.commonCountries,exports.defaultCountries=n.defaultCountries,exports.defaultPhoneMask=n.defaultPhoneMask,exports.formatPhoneNumber=n.formatPhoneNumber,exports.getCountriesByDialCode=n.getCountriesByDialCode,exports.getCountryByCode=n.getCountryByCode,exports.getCountryByDialCode=n.getCountryByDialCode,exports.getPhoneDigits=n.getPhoneDigits,exports.getPhoneMask=n.getPhoneMask,exports.isValidPhoneLength=n.isValidPhoneLength,exports.phoneMasks=n.phoneMasks,exports.searchCountries=n.searchCountries,exports.PhoneInput=l;
1
+ "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),t=require("react"),a=require("react-dom"),o=require("./index50.cjs"),r=require("@adam-milo/icons"),n=require("./index51.cjs"),s=require("./index62.cjs"),i=t.forwardRef(({label:i,error:l,helperText:d,fullWidth:c=!0,value:u="",onChange:p,countryCode:h,onCountryChange:y,countries:m=n.commonCountries,enableFormatting:g=!0,onValidationChange:f,disabled:x,required:C,placeholder:b,id:w,"data-cy":S,"data-testid":$,className:v,onFocus:D,onBlur:k,...j},N)=>{const[P,E]=t.useState(!1),[L,M]=t.useState(!1),[q,B]=t.useState(0),[I,F]=t.useState({top:0,left:0,width:0}),[R,W]=t.useState(h??"US"),T=h??R,V=t.useId(),z=w||V,A=`${z}-error`,K=`${z}-helper`,U=`${z}-listbox`,H=t.useRef(null),O=t.useRef(null),G=t.useRef(null),J=t.useRef(null),Q=S||"phone-input",X=$||"phone-input",Y=m.find(e=>e.code===T)||m[0],Z=n.getPhoneMask(T),_=b||Z.placeholder,ee=i&&C&&!i.includes("*")?`${i}*`:i,te=Y.dialCode.replace(/\D/g,"").length,ae=n.getPhoneDigits(u),oe=u.startsWith("+")?ae.slice(te):ae,re=g?n.formatPhoneNumber(oe,T):oe;t.useLayoutEffect(()=>{if(!P||!O.current)return;const e=()=>{if(O.current){const e=O.current.getBoundingClientRect();F({top:e.bottom+12,left:e.left,width:Math.max(e.width,320)})}};return e(),window.addEventListener("scroll",e,!0),window.addEventListener("resize",e),()=>{window.removeEventListener("scroll",e,!0),window.removeEventListener("resize",e)}},[P]),t.useEffect(()=>{const e=e=>{const t=e.target,a=H.current?.contains(t),o=G.current?.contains(t);a||o||E(!1)};return P&&document.addEventListener("pointerdown",e),()=>{document.removeEventListener("pointerdown",e)}},[P]);const ne=t.useCallback(e=>{void 0===h&&W(e.code),y?.(e);const t=n.getPhoneDigits(u),a=Y.dialCode.replace(/\D/g,"").length,o=u.startsWith("+")?t.slice(a):t;p?.(`${e.dialCode}${o}`),E(!1),setTimeout(()=>{const e=H.current?.querySelector("input");e?.focus()},0)},[h,y,p,u,Y.dialCode]),se=t.useCallback(e=>{switch(e.key){case"ArrowDown":e.preventDefault(),B(e=>Math.min(e+1,m.length-1));break;case"ArrowUp":e.preventDefault(),B(e=>Math.max(e-1,0));break;case"Enter":case" ":e.preventDefault(),ne(m[q]);break;case"Escape":e.preventDefault(),E(!1),J.current?.focus();break;case"Tab":E(!1)}},[m,q,ne]),ie=x?"disabled":l?"error":L||P?"focus":"idle";return e.jsxs("div",{ref:H,className:o.cn(s.wrapperStyles,c&&s.wrapperFullWidthStyles),"data-cy":`${Q}-wrapper`,"data-testid":`${X}-wrapper`,children:[i&&e.jsx("label",{htmlFor:z,className:s.labelStyles,"data-cy":`${Q}-label`,"data-testid":`${X}-label`,children:ee}),e.jsxs("div",{ref:O,className:o.cn(s.containerBaseStyles,c&&s.containerFullWidthStyles,"focus"===ie&&s.containerFocusStyles,"error"===ie&&s.containerErrorStyles,"disabled"===ie&&s.containerDisabledStyles,"idle"===ie&&s.containerIdleStyles),"data-state":ie,"data-cy":`${Q}-container`,"data-testid":`${X}-container`,children:[e.jsxs("button",{ref:J,type:"button",className:s.triggerStyles,onClick:()=>!x&&E(!P),onKeyDown:e=>{if("Enter"===e.key||" "===e.key||"ArrowDown"===e.key){e.preventDefault(),E(!0);const t=m.findIndex(e=>e.code===T);B(-1===t?0:t)}},disabled:x,"aria-haspopup":"listbox","aria-expanded":P,"aria-controls":U,"aria-label":`Select country. Current: ${Y.name}`,"data-cy":`${Q}-country-trigger`,"data-testid":`${X}-country-trigger`,children:[e.jsx("span",{className:s.flagStyles,"data-cy":`${Q}-flag`,"data-testid":`${X}-flag`,children:Y.flag}),e.jsx(r.Icon,{name:"ChevronDownIcon",size:"sm",color:L||P?"clickable":"text",decorative:!0,"data-cy":`${Q}-chevron`})]}),e.jsx("span",{className:s.dialCodeStyles,"data-cy":`${Q}-dial-code`,"data-testid":`${X}-dial-code`,children:Y.dialCode}),e.jsx("input",{ref:N,id:z,type:"tel",inputMode:"numeric",value:re,onChange:e=>{const t=e.target.value;if(g){const e=n.getPhoneDigits(t).slice(0,Z.maxLength);p?.(`${Y.dialCode}${e}`);const a=e.length===Z.maxLength;f?.(a)}else{const e=t.replace(/[^0-9]/g,"");p?.(`${Y.dialCode}${e}`);const a=e.length===Z.maxLength;f?.(a)}},onFocus:e=>{M(!0),D?.(e)},onBlur:e=>{M(!1),k?.(e)},placeholder:_,disabled:x,required:C,className:o.cn(s.inputStyles,v),"aria-invalid":l?"true":"false","aria-required":C?"true":void 0,"aria-describedby":l?A:d?K:void 0,"data-cy":Q,"data-testid":X,...j})]}),P&&a.createPortal(e.jsx("div",{ref:G,id:U,role:"listbox","aria-label":"Select country",className:s.dropdownStyles,style:{top:I.top,left:I.left,width:I.width,minWidth:"20rem"},tabIndex:-1,onKeyDown:se,"data-cy":`${Q}-dropdown`,"data-testid":`${X}-dropdown`,children:e.jsx("div",{className:s.dropdownViewportStyles,children:m.map((t,a)=>e.jsxs("div",{role:"option","aria-selected":t.code===T,className:o.cn(s.optionBaseStyles,a===q&&s.optionHighlightedStyles,t.code===T&&s.optionSelectedStyles),onClick:()=>ne(t),onKeyDown:e=>{"Enter"!==e.key&&" "!==e.key||(e.preventDefault(),ne(t))},onMouseEnter:()=>B(a),tabIndex:a===q?0:-1,"data-cy":`${Q}-option-${t.code.toLowerCase()}`,"data-testid":`${X}-option-${t.code.toLowerCase()}`,children:[e.jsx("span",{className:s.optionFlagStyles,children:t.flag}),e.jsx("span",{className:s.optionNameStyles,children:t.name}),e.jsx("span",{className:s.optionDialCodeStyles,children:t.dialCode})]},t.code))})}),document.body),l&&e.jsx("span",{id:A,className:s.errorStyles,role:"alert","data-cy":`${Q}-error`,"data-testid":`${X}-error`,children:l}),d&&!l&&e.jsx("span",{id:K,className:s.helperStyles,"data-cy":`${Q}-helper`,"data-testid":`${X}-helper`,children:d})]})});i.displayName="PhoneInput",exports.allCountries=n.allCountries,exports.commonCountries=n.commonCountries,exports.defaultCountries=n.defaultCountries,exports.defaultPhoneMask=n.defaultPhoneMask,exports.formatPhoneNumber=n.formatPhoneNumber,exports.getCountriesByDialCode=n.getCountriesByDialCode,exports.getCountryByCode=n.getCountryByCode,exports.getCountryByDialCode=n.getCountryByDialCode,exports.getPhoneDigits=n.getPhoneDigits,exports.getPhoneMask=n.getPhoneMask,exports.isValidPhoneLength=n.isValidPhoneLength,exports.phoneMasks=n.phoneMasks,exports.searchCountries=n.searchCountries,exports.PhoneInput=i;
package/dist/index14.js CHANGED
@@ -1,12 +1,12 @@
1
- import{jsxs as e,jsx as t}from"react/jsx-runtime";import{forwardRef as a,useState as r,useId as n,useRef as o,useLayoutEffect as d,useEffect as i,useCallback as l}from"react";import{createPortal as c}from"react-dom";import{cn as s}from"./index50.js";import{Icon as u}from"@adam-milo/icons";import{commonCountries as p,getPhoneMask as m,getPhoneDigits as h,formatPhoneNumber as f}from"./index51.js";import{allCountries as y,defaultCountries as w,defaultPhoneMask as b,getCountriesByDialCode as v,getCountryByCode as $,getCountryByDialCode as g,isValidPhoneLength as x,phoneMasks as N,searchCountries as C}from"./index51.js";import{labelStyles as k,triggerStyles as D,flagStyles as E,dialCodeStyles as L,dropdownStyles as j,dropdownViewportStyles as I,optionFlagStyles as M,optionNameStyles as q,optionDialCodeStyles as F,optionSelectedStyles as S,optionHighlightedStyles as z,optionBaseStyles as A,errorStyles as B,helperStyles as K,inputStyles as T,containerIdleStyles as U,containerDisabledStyles as W,containerErrorStyles as P,containerFocusStyles as R,containerFullWidthStyles as V,containerBaseStyles as G,wrapperFullWidthStyles as H,wrapperStyles as J}from"./index62.js";const O=a(({label:a,error:y,helperText:w,fullWidth:b=!0,value:v="",onChange:$,countryCode:g="US",onCountryChange:x,countries:N=p,enableFormatting:C=!0,onValidationChange:O,disabled:Q,required:X,placeholder:Y,id:Z,"data-cy":_,"data-testid":ee,className:te,onFocus:ae,onBlur:re,...ne},oe)=>{const[de,ie]=r(!1),[le,ce]=r(!1),[se,ue]=r(0),[pe,me]=r({top:0,left:0,width:0}),he=n(),fe=Z||he,ye=`${fe}-error`,we=`${fe}-helper`,be=`${fe}-listbox`,ve=o(null),$e=o(null),ge=o(null),xe=o(null),Ne=_||"phone-input",Ce=ee||"phone-input",ke=N.find(e=>e.code===g)||N[0],De=m(g),Ee=Y||De.placeholder,Le=a&&X&&!a.includes("*")?`${a}*`:a;d(()=>{if(!de||!$e.current)return;const e=()=>{if($e.current){const e=$e.current.getBoundingClientRect();me({top:e.bottom+12,left:e.left,width:Math.max(e.width,320)})}};return e(),window.addEventListener("scroll",e,!0),window.addEventListener("resize",e),()=>{window.removeEventListener("scroll",e,!0),window.removeEventListener("resize",e)}},[de]),i(()=>{const e=e=>{const t=e.target,a=ve.current?.contains(t),r=ge.current?.contains(t);a||r||ie(!1)};return de&&document.addEventListener("pointerdown",e),()=>{document.removeEventListener("pointerdown",e)}},[de]);const je=l(e=>{x?.(e),ie(!1),setTimeout(()=>{const e=ve.current?.querySelector("input");e?.focus()},0)},[x]),Ie=l(e=>{switch(e.key){case"ArrowDown":e.preventDefault(),ue(e=>Math.min(e+1,N.length-1));break;case"ArrowUp":e.preventDefault(),ue(e=>Math.max(e-1,0));break;case"Enter":case" ":e.preventDefault(),je(N[se]);break;case"Escape":e.preventDefault(),ie(!1),xe.current?.focus();break;case"Tab":ie(!1)}},[N,se,je]),Me=Q?"disabled":y?"error":le||de?"focus":"idle";/* @__PURE__ */
2
- return e("div",{ref:ve,className:s(J,b&&H),"data-cy":`${Ne}-wrapper`,"data-testid":`${Ce}-wrapper`,children:[a&&/* @__PURE__ */t("label",{htmlFor:fe,className:k,"data-cy":`${Ne}-label`,"data-testid":`${Ce}-label`,children:Le}),
3
- /* @__PURE__ */e("div",{ref:$e,className:s(G,b&&V,"focus"===Me&&R,"error"===Me&&P,"disabled"===Me&&W,"idle"===Me&&U),"data-state":Me,"data-cy":`${Ne}-container`,"data-testid":`${Ce}-container`,children:[
4
- /* @__PURE__ */e("button",{ref:xe,type:"button",className:D,onClick:()=>!Q&&ie(!de),onKeyDown:e=>{if("Enter"===e.key||" "===e.key||"ArrowDown"===e.key){e.preventDefault(),ie(!0);const t=N.findIndex(e=>e.code===g);ue(-1===t?0:t)}},disabled:Q,"aria-haspopup":"listbox","aria-expanded":de,"aria-controls":be,"aria-label":`Select country. Current: ${ke.name}`,"data-cy":`${Ne}-country-trigger`,"data-testid":`${Ce}-country-trigger`,children:[
5
- /* @__PURE__ */t("span",{className:E,"data-cy":`${Ne}-flag`,"data-testid":`${Ce}-flag`,children:ke.flag}),
6
- /* @__PURE__ */t(u,{name:"ChevronDownIcon",size:"sm",color:le||de?"clickable":"text",decorative:!0,"data-cy":`${Ne}-chevron`})]}),
7
- /* @__PURE__ */t("span",{className:L,"data-cy":`${Ne}-dial-code`,"data-testid":`${Ce}-dial-code`,children:ke.dialCode}),
8
- /* @__PURE__ */t("input",{ref:oe,id:fe,type:"tel",inputMode:"numeric",value:v,onChange:e=>{const t=e.target.value;if(C){const e=h(t).slice(0,De.maxLength),a=f(e,g);$?.(a);const r=e.length===De.maxLength;O?.(r)}else{const e=t.replace(/[^0-9]/g,"");$?.(e);const a=e.length===De.maxLength;O?.(a)}},onFocus:e=>{ce(!0),ae?.(e)},onBlur:e=>{ce(!1),re?.(e)},placeholder:Ee,disabled:Q,required:X,className:s(T,te),"aria-invalid":y?"true":"false","aria-required":X?"true":void 0,"aria-describedby":y?ye:w?we:void 0,"data-cy":Ne,"data-testid":Ce,...ne})]}),de&&c(
9
- /* @__PURE__ */t("div",{ref:ge,id:be,role:"listbox","aria-label":"Select country",className:j,style:{top:pe.top,left:pe.left,width:pe.width,minWidth:"20rem"},tabIndex:-1,onKeyDown:Ie,"data-cy":`${Ne}-dropdown`,"data-testid":`${Ce}-dropdown`,children:/* @__PURE__ */t("div",{className:I,children:N.map((a,r)=>/* @__PURE__ */e("div",{role:"option","aria-selected":a.code===g,className:s(A,r===se&&z,a.code===g&&S),onClick:()=>je(a),onKeyDown:e=>{"Enter"!==e.key&&" "!==e.key||(e.preventDefault(),je(a))},onMouseEnter:()=>ue(r),tabIndex:r===se?0:-1,"data-cy":`${Ne}-option-${a.code.toLowerCase()}`,"data-testid":`${Ce}-option-${a.code.toLowerCase()}`,children:[
1
+ import{jsxs as e,jsx as t}from"react/jsx-runtime";import{forwardRef as a,useState as r,useId as n,useRef as o,useLayoutEffect as d,useEffect as i,useCallback as l}from"react";import{createPortal as c}from"react-dom";import{cn as s}from"./index50.js";import{Icon as p}from"@adam-milo/icons";import{commonCountries as u,getPhoneMask as m,getPhoneDigits as h,formatPhoneNumber as f}from"./index51.js";import{allCountries as y,defaultCountries as $,defaultPhoneMask as w,getCountriesByDialCode as v,getCountryByCode as b,getCountryByDialCode as g,isValidPhoneLength as C,phoneMasks as x,searchCountries as N}from"./index51.js";import{labelStyles as D,triggerStyles as k,flagStyles as E,dialCodeStyles as L,dropdownStyles as j,dropdownViewportStyles as I,optionFlagStyles as M,optionNameStyles as q,optionDialCodeStyles as F,optionSelectedStyles as S,optionHighlightedStyles as W,optionBaseStyles as z,errorStyles as A,helperStyles as B,inputStyles as K,containerIdleStyles as T,containerDisabledStyles as U,containerErrorStyles as P,containerFocusStyles as R,containerFullWidthStyles as V,containerBaseStyles as G,wrapperFullWidthStyles as H,wrapperStyles as J}from"./index62.js";const O=a(({label:a,error:y,helperText:$,fullWidth:w=!0,value:v="",onChange:b,countryCode:g,onCountryChange:C,countries:x=u,enableFormatting:N=!0,onValidationChange:O,disabled:Q,required:X,placeholder:Y,id:Z,"data-cy":_,"data-testid":ee,className:te,onFocus:ae,onBlur:re,...ne},oe)=>{const[de,ie]=r(!1),[le,ce]=r(!1),[se,pe]=r(0),[ue,me]=r({top:0,left:0,width:0}),[he,fe]=r(g??"US"),ye=g??he,$e=n(),we=Z||$e,ve=`${we}-error`,be=`${we}-helper`,ge=`${we}-listbox`,Ce=o(null),xe=o(null),Ne=o(null),De=o(null),ke=_||"phone-input",Ee=ee||"phone-input",Le=x.find(e=>e.code===ye)||x[0],je=m(ye),Ie=Y||je.placeholder,Me=a&&X&&!a.includes("*")?`${a}*`:a,qe=Le.dialCode.replace(/\D/g,"").length,Fe=h(v),Se=v.startsWith("+")?Fe.slice(qe):Fe,We=N?f(Se,ye):Se;d(()=>{if(!de||!xe.current)return;const e=()=>{if(xe.current){const e=xe.current.getBoundingClientRect();me({top:e.bottom+12,left:e.left,width:Math.max(e.width,320)})}};return e(),window.addEventListener("scroll",e,!0),window.addEventListener("resize",e),()=>{window.removeEventListener("scroll",e,!0),window.removeEventListener("resize",e)}},[de]),i(()=>{const e=e=>{const t=e.target,a=Ce.current?.contains(t),r=Ne.current?.contains(t);a||r||ie(!1)};return de&&document.addEventListener("pointerdown",e),()=>{document.removeEventListener("pointerdown",e)}},[de]);const ze=l(e=>{void 0===g&&fe(e.code),C?.(e);const t=h(v),a=Le.dialCode.replace(/\D/g,"").length,r=v.startsWith("+")?t.slice(a):t;b?.(`${e.dialCode}${r}`),ie(!1),setTimeout(()=>{const e=Ce.current?.querySelector("input");e?.focus()},0)},[g,C,b,v,Le.dialCode]),Ae=l(e=>{switch(e.key){case"ArrowDown":e.preventDefault(),pe(e=>Math.min(e+1,x.length-1));break;case"ArrowUp":e.preventDefault(),pe(e=>Math.max(e-1,0));break;case"Enter":case" ":e.preventDefault(),ze(x[se]);break;case"Escape":e.preventDefault(),ie(!1),De.current?.focus();break;case"Tab":ie(!1)}},[x,se,ze]),Be=Q?"disabled":y?"error":le||de?"focus":"idle";/* @__PURE__ */
2
+ return e("div",{ref:Ce,className:s(J,w&&H),"data-cy":`${ke}-wrapper`,"data-testid":`${Ee}-wrapper`,children:[a&&/* @__PURE__ */t("label",{htmlFor:we,className:D,"data-cy":`${ke}-label`,"data-testid":`${Ee}-label`,children:Me}),
3
+ /* @__PURE__ */e("div",{ref:xe,className:s(G,w&&V,"focus"===Be&&R,"error"===Be&&P,"disabled"===Be&&U,"idle"===Be&&T),"data-state":Be,"data-cy":`${ke}-container`,"data-testid":`${Ee}-container`,children:[
4
+ /* @__PURE__ */e("button",{ref:De,type:"button",className:k,onClick:()=>!Q&&ie(!de),onKeyDown:e=>{if("Enter"===e.key||" "===e.key||"ArrowDown"===e.key){e.preventDefault(),ie(!0);const t=x.findIndex(e=>e.code===ye);pe(-1===t?0:t)}},disabled:Q,"aria-haspopup":"listbox","aria-expanded":de,"aria-controls":ge,"aria-label":`Select country. Current: ${Le.name}`,"data-cy":`${ke}-country-trigger`,"data-testid":`${Ee}-country-trigger`,children:[
5
+ /* @__PURE__ */t("span",{className:E,"data-cy":`${ke}-flag`,"data-testid":`${Ee}-flag`,children:Le.flag}),
6
+ /* @__PURE__ */t(p,{name:"ChevronDownIcon",size:"sm",color:le||de?"clickable":"text",decorative:!0,"data-cy":`${ke}-chevron`})]}),
7
+ /* @__PURE__ */t("span",{className:L,"data-cy":`${ke}-dial-code`,"data-testid":`${Ee}-dial-code`,children:Le.dialCode}),
8
+ /* @__PURE__ */t("input",{ref:oe,id:we,type:"tel",inputMode:"numeric",value:We,onChange:e=>{const t=e.target.value;if(N){const e=h(t).slice(0,je.maxLength);b?.(`${Le.dialCode}${e}`);const a=e.length===je.maxLength;O?.(a)}else{const e=t.replace(/[^0-9]/g,"");b?.(`${Le.dialCode}${e}`);const a=e.length===je.maxLength;O?.(a)}},onFocus:e=>{ce(!0),ae?.(e)},onBlur:e=>{ce(!1),re?.(e)},placeholder:Ie,disabled:Q,required:X,className:s(K,te),"aria-invalid":y?"true":"false","aria-required":X?"true":void 0,"aria-describedby":y?ve:$?be:void 0,"data-cy":ke,"data-testid":Ee,...ne})]}),de&&c(
9
+ /* @__PURE__ */t("div",{ref:Ne,id:ge,role:"listbox","aria-label":"Select country",className:j,style:{top:ue.top,left:ue.left,width:ue.width,minWidth:"20rem"},tabIndex:-1,onKeyDown:Ae,"data-cy":`${ke}-dropdown`,"data-testid":`${Ee}-dropdown`,children:/* @__PURE__ */t("div",{className:I,children:x.map((a,r)=>/* @__PURE__ */e("div",{role:"option","aria-selected":a.code===ye,className:s(z,r===se&&W,a.code===ye&&S),onClick:()=>ze(a),onKeyDown:e=>{"Enter"!==e.key&&" "!==e.key||(e.preventDefault(),ze(a))},onMouseEnter:()=>pe(r),tabIndex:r===se?0:-1,"data-cy":`${ke}-option-${a.code.toLowerCase()}`,"data-testid":`${Ee}-option-${a.code.toLowerCase()}`,children:[
10
10
  /* @__PURE__ */t("span",{className:M,children:a.flag}),
11
11
  /* @__PURE__ */t("span",{className:q,children:a.name}),
12
- /* @__PURE__ */t("span",{className:F,children:a.dialCode})]},a.code))})}),document.body),y&&/* @__PURE__ */t("span",{id:ye,className:B,role:"alert","data-cy":`${Ne}-error`,"data-testid":`${Ce}-error`,children:y}),w&&!y&&/* @__PURE__ */t("span",{id:we,className:K,"data-cy":`${Ne}-helper`,"data-testid":`${Ce}-helper`,children:w})]})});O.displayName="PhoneInput";export{O as PhoneInput,y as allCountries,p as commonCountries,w as defaultCountries,b as defaultPhoneMask,f as formatPhoneNumber,v as getCountriesByDialCode,$ as getCountryByCode,g as getCountryByDialCode,h as getPhoneDigits,m as getPhoneMask,x as isValidPhoneLength,N as phoneMasks,C as searchCountries};
12
+ /* @__PURE__ */t("span",{className:F,children:a.dialCode})]},a.code))})}),document.body),y&&/* @__PURE__ */t("span",{id:ve,className:A,role:"alert","data-cy":`${ke}-error`,"data-testid":`${Ee}-error`,children:y}),$&&!y&&/* @__PURE__ */t("span",{id:be,className:B,"data-cy":`${ke}-helper`,"data-testid":`${Ee}-helper`,children:$})]})});O.displayName="PhoneInput";export{O as PhoneInput,y as allCountries,u as commonCountries,$ as defaultCountries,w as defaultPhoneMask,f as formatPhoneNumber,v as getCountriesByDialCode,b as getCountryByCode,g as getCountryByDialCode,h as getPhoneDigits,m as getPhoneMask,C as isValidPhoneLength,x as phoneMasks,N as searchCountries};
@@ -1 +1 @@
1
- {"version":3,"file":"PhoneInput.component.d.ts","sourceRoot":"","sources":["../../../../../src/components/forms/phone-input/PhoneInput.component.tsx"],"names":[],"mappings":"AAoBA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AA2B1D,YAAY,EAAE,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACtD,OAAO,EACL,YAAY,EACZ,eAAe,EACf,gBAAgB,EAChB,gBAAgB,EAChB,oBAAoB,EACpB,sBAAsB,EACtB,eAAe,EACf,UAAU,EACV,gBAAgB,EAChB,YAAY,EACZ,iBAAiB,EACjB,cAAc,EACd,kBAAkB,GACnB,MAAM,aAAa,CAAC;AAErB,eAAO,MAAM,UAAU,8GAuXtB,CAAC;AAIF,YAAY,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC"}
1
+ {"version":3,"file":"PhoneInput.component.d.ts","sourceRoot":"","sources":["../../../../../src/components/forms/phone-input/PhoneInput.component.tsx"],"names":[],"mappings":"AAoBA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AA2B1D,YAAY,EAAE,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACtD,OAAO,EACL,YAAY,EACZ,eAAe,EACf,gBAAgB,EAChB,gBAAgB,EAChB,oBAAoB,EACpB,sBAAsB,EACtB,eAAe,EACf,UAAU,EACV,gBAAgB,EAChB,YAAY,EACZ,iBAAiB,EACjB,cAAc,EACd,kBAAkB,GACnB,MAAM,aAAa,CAAC;AAErB,eAAO,MAAM,UAAU,8GA4XtB,CAAC;AAIF,YAAY,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@adam-milo/ui",
3
- "version": "1.0.59",
3
+ "version": "1.0.60",
4
4
  "type": "module",
5
5
  "description": "Adam Milo Design System - UI Component Library",
6
6
  "keywords": [