@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"),
|
|
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
|
|
2
|
-
return e("div",{ref:
|
|
3
|
-
/* @__PURE__ */e("div",{ref
|
|
4
|
-
/* @__PURE__ */e("button",{ref:
|
|
5
|
-
/* @__PURE__ */t("span",{className:E,"data-cy":`${
|
|
6
|
-
/* @__PURE__ */t(
|
|
7
|
-
/* @__PURE__ */t("span",{className:L,"data-cy":`${
|
|
8
|
-
/* @__PURE__ */t("input",{ref:oe,id:
|
|
9
|
-
/* @__PURE__ */t("div",{ref:
|
|
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:
|
|
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,
|
|
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"}
|