@clicktap/ui 2.1.0 → 2.1.1
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/assets/react-number-format.es-Bf_lGveD.js +1 -0
- package/components/Collection/AttributeDataProvider/AttributeDataProvider.js +1 -1
- package/components/CreditCardExpirationInput/CreditCardExpirationInput.js +1 -1
- package/components/CreditCardExpirationInput/index.js +1 -1
- package/components/CreditCardInput/CreditCardInput.js +1 -1
- package/components/CreditCardInput/index.js +1 -1
- package/components/DobInput/DobInput.js +1 -1
- package/components/DobInput/index.js +1 -1
- package/components/PhoneInput/PhoneInput.js +1 -1
- package/docs/migrations/2026/09/ui-2026-09-09-graphql-field-errors-reported-in-production.md +126 -0
- package/docs/migrations/index.json +10 -0
- package/package.json +11 -11
- package/utils/createAuthAwareGraphqlClient.js +1 -1
- package/assets/react-number-format.es-LSEUnuG5.js +0 -1
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import j,{useRef as R,useState as oe,useEffect as q,useMemo as Ae,useLayoutEffect as xe}from"react";function be(e,t){var n={};for(var u in e)Object.prototype.hasOwnProperty.call(e,u)&&t.indexOf(u)<0&&(n[u]=e[u]);if(e!=null&&typeof Object.getOwnPropertySymbols=="function")for(var i=0,u=Object.getOwnPropertySymbols(e);i<u.length;i++)t.indexOf(u[i])<0&&Object.prototype.propertyIsEnumerable.call(e,u[i])&&(n[u[i]]=e[u[i]]);return n}var k;(function(e){e.event="event",e.props="prop"})(k||(k={}));function _(){}function we(e){var t,n=void 0;return function(){for(var u=[],i=arguments.length;i--;)u[i]=arguments[i];return t&&u.length===t.length&&u.every(function(d,m){return d===t[m]})||(t=u,n=e.apply(void 0,u)),n}}function Y(e){return!!(e||"").match(/\d/)}function D(e){return e==null}function Te(e){return typeof e=="number"&&isNaN(e)}function Ee(e){return D(e)||Te(e)||typeof e=="number"&&!isFinite(e)}function ne(e){var t=R(e);t.current=e;var n=R(function(){for(var u=[],i=arguments.length;i--;)u[i]=arguments[i];return t.current.apply(t,u)});return n.current}function ae(e,t){return Array(t+1).join(e)}function Me(e){var t=e+"",n=t[0]==="-"?"-":"";n&&(t=t.substring(1));var u=t.split(/[eE]/g),i=u[0],d=u[1];if(d=Number(d),!d)return n+i;i=i.replace(".","");var m=1+d,V=i.length;return m<0?i="0."+ae("0",Math.abs(m))+i:m>=V?i=i+ae("0",m-V):i=(i.substring(0,m)||"0")+"."+i.substring(m),n+i}function ue(e,t){if(e.value=e.value,e!==null){if(e.createTextRange){var n=e.createTextRange();return n.move("character",t),n.select(),!0}return e.selectionStart||e.selectionStart===0?(e.focus(),e.setSelectionRange(t,t),!0):(e.focus(),!1)}}var Oe=we(function(e,t){for(var n=0,u=0,i=e.length,d=t.length;e[n]===t[n]&&n<i;)n++;for(;e[i-1-u]===t[d-1-u]&&d-u>n&&i-u>n;)u++;return{from:{start:n,end:i-u},to:{start:n,end:d-u}}}),Ne=function(e,t){var n=Math.min(e.selectionStart,t);return{from:{start:n,end:e.selectionEnd},to:{start:n,end:t}}};function Be(e,t,n){return Math.min(Math.max(e,t),n)}function X(e){return Math.max(e.selectionStart,e.selectionEnd)}function _e(){return typeof navigator<"u"&&!(navigator.platform&&/iPhone|iPod/.test(navigator.platform))}function Re(e){var t=e.currentValue,n=e.formattedValue,u=e.currentValueIndex,i=e.formattedValueIndex;return t[u]===n[i]}function Fe(e,t,n,u,i,d,m){m===void 0&&(m=Re);var V=i.findIndex(function(z){return z}),p=e.slice(0,V);!t&&!n.startsWith(p)&&(t=p,n=p+n,u=u+p.length);for(var I=n.length,O=e.length,T={},h=new Array(I),S=0;S<I;S++){h[S]=-1;for(var l=0,A=O;l<A;l++){var C=m({currentValue:n,lastValue:t,formattedValue:e,currentValueIndex:S,formattedValueIndex:l});if(C&&T[l]!==!0){h[S]=l,T[l]=!0;break}}}for(var s=u;s<I&&(h[s]===-1||!d(n[s]));)s++;var x=s===I||h[s]===-1?O:h[s];for(s=u-1;s>0&&h[s]===-1;)s--;var b=s===-1||h[s]===-1?0:h[s]+1;return b>x?x:u-b<x-u?b:x}function ie(e,t,n,u){var i=e.length;if(t=Be(t,0,i),u==="left"){for(;t>=0&&!n[t];)t--;t===-1&&(t=n.indexOf(!0))}else{for(;t<=i&&!n[t];)t++;t>i&&(t=n.lastIndexOf(!0))}return t===-1&&(t=i),t}function Le(e){for(var t=Array.from({length:e.length+1}).map(function(){return!0}),n=0,u=t.length;n<u;n++)t[n]=!!(Y(e[n])||Y(e[n-1]));return t}function je(e,t,n,u,i,d){d===void 0&&(d=_);var m=ne(function(l,A){var C,s;return Ee(l)?(s="",C=""):typeof l=="number"||A?(s=typeof l=="number"?Me(l):l,C=u(s)):(s=i(l,void 0),C=u(s)),{formattedValue:C,numAsString:s}}),V=oe(function(){return m(D(e)?t:e,n)}),p=V[0],I=V[1],O=ne(function(l,A){l.formattedValue!==p.formattedValue&&I({formattedValue:l.formattedValue,numAsString:l.value}),d(l,A)}),T=e,h=n;D(e)&&(T=p.numAsString,h=!0);var S=m(T,h);return Ae(function(){I(S)},[S.formattedValue]),q(function(){if(!D(t)&&D(e)&&p.formattedValue!==""){var l=parseFloat(p.numAsString);O({formattedValue:p.formattedValue,value:p.numAsString,floatValue:isNaN(l)?void 0:l},{event:void 0,source:k.props})}},[]),[p,O]}function De(e){return e.replace(/[^0-9]/g,"")}function ke(e){return e}function Ke(e){var t=e.type;t===void 0&&(t="text");var n=e.displayType;n===void 0&&(n="input");var u=e.customInput,i=e.renderText,d=e.getInputRef,m=e.format;m===void 0&&(m=ke);var V=e.removeFormatting;V===void 0&&(V=De);var p=e.defaultValue,I=e.valueIsNumericString,O=e.onValueChange,T=e.isAllowed,h=e.onChange;h===void 0&&(h=_);var S=e.onKeyDown;S===void 0&&(S=_);var l=e.onMouseUp;l===void 0&&(l=_);var A=e.onFocus;A===void 0&&(A=_);var C=e.onBlur;C===void 0&&(C=_);var s=e.value,x=e.getCaretBoundary;x===void 0&&(x=Le);var b=e.isValidInputCharacter;b===void 0&&(b=Y);var z=e.isCharacterSame,W=be(e,["type","displayType","customInput","renderText","getInputRef","format","removeFormatting","defaultValue","valueIsNumericString","onValueChange","isAllowed","onChange","onKeyDown","onMouseUp","onFocus","onBlur","value","getCaretBoundary","isValidInputCharacter","isCharacterSame"]),Z=je(s,p,!!I,m,V,O),$=Z[0],g=$.formattedValue,U=$.numAsString,fe=Z[1],K=R(),P=R({formattedValue:g,numAsString:U}),ee=function(r,a){P.current={formattedValue:r.formattedValue,numAsString:r.value},fe(r,a)},te=oe(!1),le=te[0],ve=te[1],F=R(null),N=R({setCaretTimeout:null,focusTimeout:null});q(function(){return ve(!0),function(){clearTimeout(N.current.setCaretTimeout),clearTimeout(N.current.focusTimeout)}},[]);var ce=m,G=function(r,a){var o=parseFloat(a);return{formattedValue:r,value:a,floatValue:isNaN(o)?void 0:o}},B=function(r,a,o){r.selectionStart===0&&r.selectionEnd===r.value.length||(ue(r,a),N.current.setCaretTimeout=setTimeout(function(){r.value===o&&r.selectionStart!==a&&ue(r,a)},0))},L=function(r,a,o){return ie(r,a,x(r),o)},H=function(r,a,o){var v=x(a),y=Fe(a,g,r,o,v,b,z);return y=ie(a,y,v),y},se=function(r){var a=r.formattedValue;a===void 0&&(a="");var o=r.input,v=r.source,y=r.event,c=r.numAsString,f;if(o){var w=r.inputValue||o.value,E=X(o);o.value=a,f=H(w,a,E),f!==void 0&&B(o,f,a)}a!==g&&ee(G(a,c),{event:y,source:v})};q(function(){var r=P.current,a=r.formattedValue,o=r.numAsString;(g!==a||U!==o)&&ee(G(g,U),{event:void 0,source:k.props})},[g,U]);var de=F.current?X(F.current):void 0,me=typeof window<"u"?xe:q;me(function(){var r=F.current;if(g!==P.current.formattedValue&&r){var a=H(P.current.formattedValue,g,de);r.value=g,B(r,a,g)}},[g]);var ge=function(r,a,o){var v=a.target,y=K.current?Ne(K.current,v.selectionEnd):Oe(g,r),c=Object.assign(Object.assign({},y),{lastValue:g}),f=V(r,c),w=ce(f);if(f=V(w,void 0),T&&!T(G(w,f))){var E=a.target,M=X(E),Q=H(r,g,M);return E.value=g,B(E,Q,g),!1}return se({formattedValue:w,numAsString:f,inputValue:r,event:a,source:o,input:a.target}),!0},J=function(r,a){a===void 0&&(a=0);var o=r.selectionStart,v=r.selectionEnd;K.current={selectionStart:o,selectionEnd:v+a}},he=function(r){var a=r.target,o=a.value,v=ge(o,r,k.event);v&&h(r),K.current=void 0},pe=function(r){var a=r.target,o=r.key,v=a.selectionStart,y=a.selectionEnd,c=a.value;c===void 0&&(c="");var f;o==="ArrowLeft"||o==="Backspace"?f=Math.max(v-1,0):o==="ArrowRight"?f=Math.min(v+1,c.length):o==="Delete"&&(f=v);var w=0;o==="Delete"&&v===y&&(w=1);var E=o==="ArrowLeft"||o==="ArrowRight";if(f===void 0||v!==y&&!E){S(r),J(a,w);return}var M=f;if(E){var Q=o==="ArrowLeft"?"left":"right";M=L(c,f,Q),M!==f&&r.preventDefault()}else o==="Delete"&&!b(c[f])?M=L(c,f,"right"):o==="Backspace"&&!b(c[f])&&(M=L(c,f,"left"));M!==f&&B(a,M,c),S(r),J(a,w)},ye=function(r){var a=r.target,o=function(){var v=a.selectionStart,y=a.selectionEnd,c=a.value;if(c===void 0&&(c=""),v===y){var f=L(c,v);f!==v&&B(a,f,c)}};o(),requestAnimationFrame(function(){o()}),l(r),J(a)},Ve=function(r){r.persist&&r.persist();var a=r.target,o=r.currentTarget;F.current=a,N.current.focusTimeout=setTimeout(function(){var v=a.selectionStart,y=a.selectionEnd,c=a.value;c===void 0&&(c="");var f=L(c,v);f!==v&&!(v===0&&y===c.length)&&B(a,f,c),A(Object.assign(Object.assign({},r),{currentTarget:o}))},0)},Se=function(r){F.current=null,clearTimeout(N.current.focusTimeout),clearTimeout(N.current.setCaretTimeout),C(r)},Ce=le&&_e()?"numeric":void 0,re=Object.assign({inputMode:Ce},W,{type:t,value:g,onChange:he,onKeyDown:pe,onMouseUp:ye,onFocus:Ve,onBlur:Se});if(n==="text")return i?j.createElement(j.Fragment,null,i(g,W)||null):j.createElement("span",Object.assign({},W,{ref:d}),g);if(u){var Ie=u;return j.createElement(Ie,Object.assign({},re,{ref:d}))}return j.createElement("input",Object.assign({},re,{ref:d}))}export{Ke as N};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use client";import{jsx as a}from"react/jsx-runtime";import{createContext as s,
|
|
1
|
+
"use client";import{jsx as a}from"react/jsx-runtime";import{createContext as s,useMemo as d,useContext as p}from"react";const n=s(null);function m(){const t=p(n);if(!t)throw new Error("useAttributeData must be used within an AttributeDataProvider");return t}function C({attributes:t,children:u}){const c=d(()=>{const i=new Map(t.map(o=>[o.code,o])),r=new Map;for(const o of t)for(const e of o.options)e.swatch&&r.set(e.id,{...e.swatch,attributeCode:o.code,optionCode:e.code});return{attributes:t,getAttributeByCode:o=>i.get(o),getSwatchLookup:()=>r}},[t]);return a(n.Provider,{value:c,children:u})}export{C as AttributeDataProvider,m as useAttributeData};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use client";import{jsxs as N,jsx as o}from"react/jsx-runtime";import{N as V}from"../../assets/react-number-format.es-
|
|
1
|
+
"use client";import{jsxs as N,jsx as o}from"react/jsx-runtime";import{N as V}from"../../assets/react-number-format.es-Bf_lGveD.js";import{TextField as v,Label as I,Text as C,FieldError as w,Input as F}from"react-aria-components";import{useState as $}from"react";import{cn as t}from"../../utils/cn.js";function j({className:i,...n}){return o(F,{className:t("border-solid border border-border rounded-md","text-sm text-fg placeholder-fg-subtle","h-10 px-2 py-0 m-0 w-full","bg-white","transition-all duration-200 ease-in-out","hover:border-border-emphasis","focus:outline-2 focus:outline focus:outline-border-subtle focus:border-border-emphasis","disabled:border-border-subtle disabled:bg-surface-subtle","invalid:border-danger-soft invalid:bg-danger-surface invalid:text-danger","invalid:hover:border-danger invalid:focus:border-danger invalid:focus:outline-danger-ring",i),...n})}function L({label:i,description:n,errorMessage:a,placeholder:d,value:s,className:u,classNames:l,onChange:f,...m}){const[b,c]=$(""),x=s??b,g=r=>{if(r==="")return"";let e=r.substring(0,2);const h=r.substring(2,4);return e.length===1&&Number(e[0])>1?e=`0${e[0]}`:e.length===2&&(Number(e)===0?e="01":Number(e)>12&&(e="12")),`${e}/${h}`},p=r=>{c(r.formattedValue),f?.(r.formattedValue)};return N(v,{className:t("flex flex-col w-full text-fg",u),...m,children:[o(I,{className:t("flex text-fg-muted text-xs",l?.label),children:i}),o(V,{format:g,customInput:j,className:t(l?.input),placeholder:d,value:x,onValueChange:p}),n&&o(C,{className:t("flex text-fg-muted text-sm",l?.description),slot:"description",children:n}),o(w,{className:t("flex text-danger-soft text-sm",l?.error),children:a})]})}export{L as CreditCardExpirationInput,L as default};
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
import{CreditCardExpirationInput as d}from"./CreditCardExpirationInput.js";import"react/jsx-runtime";import"../../assets/react-number-format.es-
|
|
2
|
+
import{CreditCardExpirationInput as d}from"./CreditCardExpirationInput.js";import"react/jsx-runtime";import"../../assets/react-number-format.es-Bf_lGveD.js";import"react";import"react-aria-components";import"../../utils/cn.js";export{d as CreditCardExpirationInput};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use client";import{jsxs as I,jsx as l}from"react/jsx-runtime";import{useState as N}from"react";import{N as w}from"../../assets/react-number-format.es-
|
|
1
|
+
"use client";import{jsxs as I,jsx as l}from"react/jsx-runtime";import{useState as N}from"react";import{N as w}from"../../assets/react-number-format.es-Bf_lGveD.js";import{TextField as P,Label as j,Text as L,FieldError as T,Input as k}from"react-aria-components";import{cn as t}from"../../utils/cn.js";const m=a=>{const s=[{regex:/^4[0-9]{0,15}/,format:"#### #### #### ####"},{regex:/^5[1-5][0-9]{0,14}/,format:"#### #### #### ####"},{regex:/^3[47][0-9]{0,13}/,format:"#### ###### #####"},{regex:/^6(?:011|5[0-9]{2})[0-9]{0,12}/,format:"#### #### #### ####"},{regex:/^3(?:0[0-5]|[68][0-9])[0-9]{0,11}/,format:"#### ###### ####"},{regex:/^(?:2131|1800|35\d{3})\d{0,11}/,format:"#### #### #### ####"}].find(f=>f.regex.test(a));return s?s.format:"#### #### #### #### ###"};function y({className:a,...o}){return l(k,{className:t("border-solid border border-border rounded-md","text-sm text-fg placeholder-fg-subtle","h-10 px-2 py-0 m-0 w-full","bg-white","transition-all duration-200 ease-in-out","hover:border-border-emphasis","focus:outline-2 focus:outline focus:outline-border-subtle focus:border-border-emphasis","disabled:border-border-subtle disabled:bg-surface-subtle","invalid:border-danger-soft invalid:bg-danger-surface invalid:text-danger","invalid:hover:border-danger invalid:focus:border-danger invalid:focus:outline-danger-ring",a),...o})}function z({label:a,description:o,errorMessage:s,placeholder:f,value:g,onChange:x,className:b,classNames:d,...p}){const[h,v]=N(""),V=g??h,F=i=>{if(i==="")return"";const e=i.replace(/\s+/g,""),u=m(e);let n="",r=0;for(let c=0;c<u.length;c+=1)if(u[c]==="#")if(r<e.length)n+=e[r],r+=1;else break;else n+=u[c];return n},C=i=>{const e=i.value.replace(/\s+/g,""),n=m(e).replace(/[^#]/g,"").length,r=e.slice(0,n);v(r),x?.(r)};return I(P,{className:t("flex flex-col w-full text-fg",b),...p,children:[l(j,{className:t("flex text-fg-muted text-sm",d?.label),children:a}),l(w,{value:V,format:F,customInput:y,className:t(d?.input),placeholder:f,onValueChange:C}),o&&l(L,{className:t("flex text-fg-muted text-sm",d?.description),slot:"description",children:o}),l(T,{className:t("flex text-danger-soft text-sm",d?.error),children:s})]})}export{z as CreditCardInput,z as default};
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
import{CreditCardInput as e}from"./CreditCardInput.js";import"react/jsx-runtime";import"react";import"../../assets/react-number-format.es-
|
|
2
|
+
import{CreditCardInput as e}from"./CreditCardInput.js";import"react/jsx-runtime";import"react";import"../../assets/react-number-format.es-Bf_lGveD.js";import"react-aria-components";import"../../utils/cn.js";export{e as CreditCardInput};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use client";import{jsxs as w,jsx as o}from"react/jsx-runtime";import{useId as j,useState as C}from"react";import{TextField as k,Label as y,FieldError as A,Input as B}from"react-aria-components";import{N as D}from"../../assets/react-number-format.es-
|
|
1
|
+
"use client";import{jsxs as w,jsx as o}from"react/jsx-runtime";import{useId as j,useState as C}from"react";import{TextField as k,Label as y,FieldError as A,Input as B}from"react-aria-components";import{N as D}from"../../assets/react-number-format.es-Bf_lGveD.js";import{cn as r}from"../../utils/cn.js";function E({className:l,...s}){return o(B,{className:r("peer h-11",l),...s})}function z({label:l,description:s,errorMessage:u,type:m,className:p,classNames:n,id:f,value:g,onChange:h,...x}){const c=j(),[V,v]=C(""),I=g??V,F=e=>{if(e==="")return"";const b=e.replace(/\s+/g,""),a="##-##-####";let i="",d=0;for(let t=0;t<a.length;t+=1)if(a[t]==="#")if(d<b.length)i+=b[d],d+=1;else break;else i+=a[t];return i},N=e=>{v(e.formattedValue),h?.(e.formattedValue)};return w(k,{className:r("flex flex-col w-full text-fg",p),type:m,...x,children:[o(y,{className:r("flex text-fg-muted text-xs",n?.label),htmlFor:f||c,children:l}),o(D,{id:f||c,value:I,format:F,customInput:E,className:r("border-solid border border-border rounded-md","text-sm text-fg placeholder-fg-subtle","h-10 px-2 py-0 m-0 w-full","bg-white","transition-all duration-200 ease-in-out","hover:border-border-emphasis","focus:outline-2 focus:outline focus:outline-border-subtle focus:border-border-emphasis","disabled:border-border-subtle disabled:bg-surface-subtle","invalid:border-danger-soft invalid:bg-danger-surface invalid:text-danger","invalid:hover:border-danger invalid:focus:border-danger invalid:focus:outline-danger-ring",n?.input),onValueChange:N}),u&&o(A,{className:r(n?.error),children:u})]})}export{z as DobInput,z as default};
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
import{DobInput as e}from"./DobInput.js";import"react/jsx-runtime";import"react";import"react-aria-components";import"../../assets/react-number-format.es-
|
|
2
|
+
import{DobInput as e}from"./DobInput.js";import"react/jsx-runtime";import"react";import"react-aria-components";import"../../assets/react-number-format.es-Bf_lGveD.js";import"../../utils/cn.js";export{e as DobInput};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use client";import{jsxs as H,jsx as R}from"react/jsx-runtime";import{useFilter as le}from"react-aria";import x,{useState as W,useMemo as Z,useRef as z,forwardRef as oe,useCallback as I,useImperativeHandle as se,useEffect as O}from"react";import{DialogTrigger as ue,Button as de,Input as ce,ListBox as fe,ListBoxItem as pe}from"react-aria-components";import{cn as J}from"../../utils/cn.js";import{Input as me}from"../Input/Input.js";import"../Skeleton/Skeleton.js";import"../../hooks/useIsClient.js";var G=[["Afghanistan","af","93"],["Albania","al","355"],["Algeria","dz","213"],["Andorra","ad","376"],["Angola","ao","244"],["Antigua and Barbuda","ag","1268"],["Argentina","ar","54",{default:"(..) .... ....","/^11/":"(..) .... ....","/^15/":"(..) ... ....","/^(2|3|4|5)/":"(.) .... ....","/^9/":"(.) .... ....."},0],["Armenia","am","374",".. ......"],["Aruba","aw","297"],["Australia","au","61",{default:". .... ....","/^4/":"... ... ...","/^5(?!50)/":"... ... ...","/^1(3|8)00/":".... ... ...","/^13/":".. .. ..","/^180/":"... ...."},0,[]],["Austria","at","43"],["Azerbaijan","az","994","(..) ... .. .."],["Bahamas","bs","1242"],["Bahrain","bh","973",".... ...."],["Bangladesh","bd","880"],["Barbados","bb","1246"],["Belarus","by","375","(..) ... .. .."],["Belgium","be","32","... .. .. .."],["Belize","bz","501"],["Benin","bj","229"],["Bhutan","bt","975"],["Bolivia","bo","591"],["Bosnia and Herzegovina","ba","387"],["Botswana","bw","267"],["Brazil","br","55","(..) .....-...."],["British Indian Ocean Territory","io","246"],["Brunei","bn","673"],["Bulgaria","bg","359"],["Burkina Faso","bf","226"],["Burundi","bi","257"],["Cambodia","kh","855"],["Cameroon","cm","237"],["Canada","ca","1","(...) ...-....",1,["204","226","236","249","250","289","306","343","365","387","403","416","418","431","437","438","450","506","514","519","548","579","581","587","604","613","639","647","672","705","709","742","778","780","782","807","819","825","867","873","902","905"]],["Cape Verde","cv","238"],["Caribbean Netherlands","bq","599","",1],["Cayman Islands","ky","1","... ... ....",4,["345"]],["Central African Republic","cf","236"],["Chad","td","235"],["Chile","cl","56"],["China","cn","86","... .... ...."],["Colombia","co","57","... ... ...."],["Comoros","km","269"],["Congo","cd","243"],["Congo","cg","242"],["Costa Rica","cr","506","....-...."],["Côte d'Ivoire","ci","225",".. .. .. .. .."],["Croatia","hr","385"],["Cuba","cu","53"],["Curaçao","cw","599","",0],["Cyprus","cy","357",".. ......"],["Czech Republic","cz","420","... ... ..."],["Denmark","dk","45",".. .. .. .."],["Djibouti","dj","253",".. .. ...."],["Dominica","dm","1767"],["Dominican Republic","do","1","(...) ...-....",2,["809","829","849"]],["Ecuador","ec","593"],["Egypt","eg","20"],["El Salvador","sv","503","....-...."],["Equatorial Guinea","gq","240"],["Eritrea","er","291"],["Estonia","ee","372",".... ......"],["Ethiopia","et","251",".. ... ...."],["Faroe Islands","fo","298",".. .. .."],["Fiji","fj","679"],["Finland","fi","358",".. ... .. .."],["France","fr","33",". .. .. .. .."],["French Guiana","gf","594","... .. .. .."],["French Polynesia","pf","689",{"/^44/":".. .. ..","/^80[0-5]/":"... .. .. ..",default:".. .. .. .."}],["Gabon","ga","241"],["Gambia","gm","220"],["Georgia","ge","995"],["Germany","de","49","... ........."],["Ghana","gh","233"],["Gibraltar","gi","350"],["Greece","gr","30"],["Greenland","gl","299",".. .. .."],["Grenada","gd","1473"],["Guadeloupe","gp","590","... .. .. ..",0],["Guam","gu","1671"],["Guatemala","gt","502","....-...."],["Guinea","gn","224"],["Guinea-Bissau","gw","245"],["Guyana","gy","592"],["Haiti","ht","509","....-...."],["Honduras","hn","504"],["Hong Kong","hk","852",".... ...."],["Hungary","hu","36"],["Iceland","is","354","... ...."],["India","in","91",".....-....."],["Indonesia","id","62"],["Iran","ir","98","... ... ...."],["Iraq","iq","964"],["Ireland","ie","353",".. ......."],["Israel","il","972","... ... ...."],["Italy","it","39","... .......",0],["Jamaica","jm","1876"],["Japan","jp","81",".. .... ...."],["Jordan","jo","962"],["Kazakhstan","kz","7","... ...-..-..",0],["Kenya","ke","254"],["Kiribati","ki","686"],["Kosovo","xk","383"],["Kuwait","kw","965",".... ...."],["Kyrgyzstan","kg","996","... ... ..."],["Laos","la","856"],["Latvia","lv","371",".. ... ..."],["Lebanon","lb","961"],["Lesotho","ls","266"],["Liberia","lr","231"],["Libya","ly","218"],["Liechtenstein","li","423"],["Lithuania","lt","370"],["Luxembourg","lu","352"],["Macau","mo","853"],["Macedonia","mk","389"],["Madagascar","mg","261"],["Malawi","mw","265"],["Malaysia","my","60","..-....-...."],["Maldives","mv","960"],["Mali","ml","223"],["Malta","mt","356"],["Marshall Islands","mh","692"],["Martinique","mq","596","... .. .. .."],["Mauritania","mr","222"],["Mauritius","mu","230"],["Mayotte","yt","262","... .. .. ..",1,["269","639"]],["Mexico","mx","52","... ... ....",0],["Micronesia","fm","691"],["Moldova","md","373","(..) ..-..-.."],["Monaco","mc","377"],["Mongolia","mn","976"],["Montenegro","me","382"],["Morocco","ma","212"],["Mozambique","mz","258"],["Myanmar","mm","95"],["Namibia","na","264"],["Nauru","nr","674"],["Nepal","np","977"],["Netherlands","nl","31",{"/^06/":"(.). .........","/^6/":". .........","/^0(10|13|14|15|20|23|24|26|30|33|35|36|38|40|43|44|45|46|50|53|55|58|70|71|72|73|74|75|76|77|78|79|82|84|85|87|88|91)/":"(.).. ........","/^(10|13|14|15|20|23|24|26|30|33|35|36|38|40|43|44|45|46|50|53|55|58|70|71|72|73|74|75|76|77|78|79|82|84|85|87|88|91)/":".. ........","/^0/":"(.)... .......",default:"... ......."}],["New Caledonia","nc","687"],["New Zealand","nz","64","...-...-...."],["Nicaragua","ni","505"],["Niger","ne","227"],["Nigeria","ng","234"],["North Korea","kp","850"],["Norway","no","47","... .. ..."],["Oman","om","968",".... ...."],["Pakistan","pk","92","...-......."],["Palau","pw","680"],["Palestine","ps","970"],["Panama","pa","507"],["Papua New Guinea","pg","675"],["Paraguay","py","595"],["Peru","pe","51"],["Philippines","ph","63","... ... ...."],["Poland","pl","48","...-...-..."],["Portugal","pt","351"],["Puerto Rico","pr","1","(...) ...-....",3,["787","939"]],["Qatar","qa","974",".... ...."],["Réunion","re","262","... .. .. ..",0],["Romania","ro","40"],["Russia","ru","7","(...) ...-..-..",1],["Rwanda","rw","250"],["Saint Kitts and Nevis","kn","1869"],["Saint Lucia","lc","1758"],["Saint Pierre & Miquelon","pm","508",{"/^708/":"... ... ...","/^8/":"... .. .. ..",default:".. .. .."}],["Saint Vincent and the Grenadines","vc","1784"],["Samoa","ws","685"],["San Marino","sm","378"],["São Tomé and Príncipe","st","239"],["Saudi Arabia","sa","966",".. ... ...."],["Senegal","sn","221"],["Serbia","rs","381"],["Seychelles","sc","248"],["Sierra Leone","sl","232"],["Singapore","sg","65","....-...."],["Slovakia","sk","421"],["Slovenia","si","386"],["Solomon Islands","sb","677"],["Somalia","so","252"],["South Africa","za","27"],["South Korea","kr","82","... .... ...."],["South Sudan","ss","211"],["Spain","es","34","... ... ..."],["Sri Lanka","lk","94"],["Sudan","sd","249"],["Suriname","sr","597"],["Swaziland","sz","268"],["Sweden","se","46","... ... ..."],["Switzerland","ch","41",".. ... .. .."],["Syria","sy","963"],["Taiwan","tw","886"],["Tajikistan","tj","992"],["Tanzania","tz","255"],["Thailand","th","66"],["Timor-Leste","tl","670"],["Togo","tg","228"],["Tonga","to","676"],["Trinidad and Tobago","tt","1868"],["Tunisia","tn","216"],["Turkey","tr","90","... ... .. .."],["Turkmenistan","tm","993"],["Tuvalu","tv","688"],["Uganda","ug","256"],["Ukraine","ua","380","(..) ... .. .."],["United Arab Emirates","ae","971",{default:".. ... ....","/^5[024568]/":".. ... ....","/^[234679]/":". ... ...."}],["United Kingdom","gb","44",".... ......"],["United States","us","1","(...) ...-....",0],["Uruguay","uy","598"],["Uzbekistan","uz","998",".. ... .. .."],["Vanuatu","vu","678"],["Vatican City","va","39",".. .... ....",1],["Venezuela","ve","58"],["Vietnam","vn","84"],["Wallis & Futuna","wf","681",".. .. .."],["Yemen","ye","967"],["Zambia","zm","260"],["Zimbabwe","zw","263"]],he="react-international-phone-",te=(...t)=>t.filter(e=>!!e).join(" ").trim(),ye=(...t)=>te(...t).split(" ").map(e=>`${he}${e}`).join(" "),P=({addPrefix:t,rawClassNames:e})=>te(ye(...t),...e),Ce=({value:t,mask:e,maskSymbol:n,offset:o=0,trimNonMaskCharsLeftover:r=!1})=>{if(t.length<o)return t;let i=t.slice(0,o),c=t.slice(o),l=i,a=0;for(let s of e.split("")){if(a>=c.length){if(!r&&s!==n){l+=s;continue}break}s===n?(l+=c[a],a+=1):l+=s}return l},T=t=>t?/^\d+$/.test(t):!1,Y=t=>t.replace(/\D/g,""),ge=(t,e)=>{let n=t.style.display;n!=="block"&&(t.style.display="block");let o=t.getBoundingClientRect(),r=e.getBoundingClientRect(),i=r.top-o.top,c=o.bottom-r.bottom;i>=0&&c>=0||(Math.abs(i)<Math.abs(c)?t.scrollTop+=i:t.scrollTop-=c),t.style.display=n},be=()=>typeof window>"u"?!1:window.navigator.userAgent.toLowerCase().includes("macintosh"),ve=(t,e)=>{let n=e.disableDialCodeAndPrefix?!1:e.forceDialCode,o=e.disableDialCodeAndPrefix?!1:e.insertDialCodeOnEmpty,r=t,i=s=>e.trimNonDigitsEnd?s.trim():s;if(!r)return o&&!r.length||n?i(`${e.prefix}${e.dialCode}${e.charAfterDialCode}`):i(r);if(r=Y(r),r===e.dialCode&&!e.disableDialCodeAndPrefix)return i(`${e.prefix}${e.dialCode}${e.charAfterDialCode}`);if(e.dialCode.startsWith(r)&&!e.disableDialCodeAndPrefix)return i(n?`${e.prefix}${e.dialCode}${e.charAfterDialCode}`:`${e.prefix}${r}`);if(!r.startsWith(e.dialCode)&&!e.disableDialCodeAndPrefix){if(n)return i(`${e.prefix}${e.dialCode}${e.charAfterDialCode}`);if(r.length<e.dialCode.length)return i(`${e.prefix}${r}`)}let c=()=>{let s=e.dialCode.length,u=r.slice(0,s),C=r.slice(s);return{phoneLeftSide:u,phoneRightSide:C}},{phoneLeftSide:l,phoneRightSide:a}=c();return l=`${e.prefix}${l}${e.charAfterDialCode}`,a=Ce({value:a,mask:e.mask,maskSymbol:e.maskChar,trimNonMaskCharsLeftover:e.trimNonDigitsEnd||e.disableDialCodeAndPrefix&&a.length===0}),e.disableDialCodeAndPrefix&&(l=""),i(`${l}${a}`)},we=({phoneBeforeInput:t,phoneAfterInput:e,phoneAfterFormatted:n,cursorPositionAfterInput:o,leftOffset:r=0,deletion:i})=>{if(o<r)return r;if(!t)return n.length;let c=null;for(let u=o-1;u>=0;u-=1)if(T(e[u])){c=u;break}if(c===null){for(let u=0;u<e.length;u+=1)if(T(n[u]))return u;return e.length}let l=0;for(let u=0;u<c;u+=1)T(e[u])&&(l+=1);let a=0,s=0;for(let u=0;u<n.length&&(a+=1,T(n[u])&&(s+=1),!(s>=l+1));u+=1);if(i!=="backward")for(;!T(n[a])&&a<n.length;)a+=1;return a},Q=({phone:t,prefix:e})=>t?`${e}${Y(t)}`:"";function X({value:t,country:e,insertDialCodeOnEmpty:n,trimNonDigitsEnd:o,countries:r,prefix:i,charAfterDialCode:c,forceDialCode:l,disableDialCodeAndPrefix:a,defaultMask:s,countryGuessingEnabled:u,disableFormatting:C}){let h=t;a&&(h=h.startsWith(`${i}`)?h:`${i}${e.dialCode}${h}`);let f=u?Ee({phone:h,countries:r,currentCountryIso2:e?.iso2}):void 0,v=f?.country??e,p=ve(h,{prefix:i,mask:Ae({phone:h,country:v,defaultMask:s,disableFormatting:C}),maskChar:re,dialCode:v.dialCode,trimNonDigitsEnd:o,charAfterDialCode:c,forceDialCode:l,insertDialCodeOnEmpty:n,disableDialCodeAndPrefix:a}),y=u&&!f?.fullDialCodeMatch?e:v;return{phone:Q({phone:a?`${y.dialCode}${p}`:p,prefix:i}),inputValue:p,country:y}}var De=t=>{if(t?.toLocaleLowerCase().includes("delete")??!1)return t?.toLocaleLowerCase().includes("forward")?"forward":"backward"},xe=(t,{country:e,insertDialCodeOnEmpty:n,phoneBeforeInput:o,prefix:r,charAfterDialCode:i,forceDialCode:c,disableDialCodeAndPrefix:l,countryGuessingEnabled:a,defaultMask:s,disableFormatting:u,countries:C})=>{let h=t.nativeEvent,f=h.inputType,v=De(f),p=!!f?.startsWith("insertFrom"),y=f==="insertText",N=h?.data||void 0,m=t.target.value,A=t.target.selectionStart??0;if(f?.includes("history"))return{inputValue:o,phone:Q({phone:o,prefix:r}),cursorPosition:o.length,country:e};if(y&&!T(N)&&m!==r)return{inputValue:o,phone:Q({phone:l?`${e.dialCode}${o}`:o,prefix:r}),cursorPosition:A-(N?.length??0),country:e};if(c&&!m.startsWith(`${r}${e.dialCode}`)&&!p){let b=m?o:`${r}${e.dialCode}${i}`;return{inputValue:b,phone:Q({phone:b,prefix:r}),cursorPosition:r.length+e.dialCode.length+i.length,country:e}}let{phone:_,inputValue:M,country:d}=X({value:m,country:e,trimNonDigitsEnd:v==="backward",insertDialCodeOnEmpty:n,countryGuessingEnabled:a,countries:C,prefix:r,charAfterDialCode:i,forceDialCode:c,disableDialCodeAndPrefix:l,disableFormatting:u,defaultMask:s}),g=we({cursorPositionAfterInput:A,phoneBeforeInput:o,phoneAfterInput:m,phoneAfterFormatted:M,leftOffset:c?r.length+e.dialCode.length+i.length:0,deletion:v});return{phone:_,inputValue:M,cursorPosition:g,country:d}},Ne=(t,e)=>{let n=Object.keys(t),o=Object.keys(e);if(n.length!==o.length)return!1;for(let r of n)if(t[r]!==e[r])return!1;return!0},ke=()=>{let t=z(),e=z(Date.now()),n=I(()=>{let o=Date.now(),r=t.current?o-e.current:void 0;return t.current=e.current,e.current=o,r},[]);return Z(()=>({check:n}),[n])},Se={size:20,overrideLastItemDebounceMS:-1};function Pe(t,e){let{size:n,overrideLastItemDebounceMS:o,onChange:r}={...Se,...e},[i,c]=W(t),l=z([i]),a=z(0),s=ke(),u=I((f,v)=>{let p=l.current[a.current];if(f===p||typeof f=="object"&&typeof p=="object"&&Ne(f,p))return;let y=o>0,N=s.check(),m=y&&N!==void 0?N>o:!0;if(v?.overrideLastItem!==void 0?v.overrideLastItem:!m)l.current=[...l.current.slice(0,a.current),f];else{let A=l.current.length>=n;l.current=[...l.current.slice(A?1:0,a.current+1),f],A||(a.current+=1)}c(f),r?.(f)},[r,o,n,s]),C=I(()=>{if(a.current<=0)return{success:!1};let f=l.current[a.current-1];return c(f),a.current-=1,r?.(f),{success:!0,value:f}},[r]),h=I(()=>{if(a.current+1>=l.current.length)return{success:!1};let f=l.current[a.current+1];return c(f),a.current+=1,r?.(f),{success:!0,value:f}},[r]);return[i,u,C,h]}var re=".",E={defaultCountry:"us",value:"",prefix:"+",defaultMask:"............",charAfterDialCode:" ",historySaveDebounceMS:200,disableCountryGuess:!1,disableDialCodePrefill:!1,forceDialCode:!1,disableDialCodeAndPrefix:!1,disableFormatting:!1,countries:G},ae=({defaultCountry:t=E.defaultCountry,value:e=E.value,countries:n=E.countries,prefix:o=E.prefix,defaultMask:r=E.defaultMask,charAfterDialCode:i=E.charAfterDialCode,historySaveDebounceMS:c=E.historySaveDebounceMS,disableCountryGuess:l=E.disableCountryGuess,disableDialCodePrefill:a=E.disableDialCodePrefill,forceDialCode:s=E.forceDialCode,disableDialCodeAndPrefix:u=E.disableDialCodeAndPrefix,disableFormatting:C=E.disableFormatting,onChange:h,inputRef:f})=>{let v={countries:n,prefix:o,charAfterDialCode:i,forceDialCode:u?!1:s,disableDialCodeAndPrefix:u,defaultMask:r,countryGuessingEnabled:!l,disableFormatting:C},p=z(null),y=f||p,N=D=>{Promise.resolve().then(()=>{typeof window>"u"||y.current!==document?.activeElement||y.current?.setSelectionRange(D,D)})},m=I(D=>K({value:D,field:"iso2",countries:n}),[n]),A=I(({inputValue:D,phone:$,country:w})=>{if(!h)return;let B=m(w);h({phone:$,inputValue:D,country:B})},[m,h]),[{phone:_,inputValue:M,country:d},g,b,k]=Pe(()=>{let D=K({value:t,field:"iso2",countries:n});D||console.error(`[react-international-phone]: can not find a country with "${t}" iso2 code`);let $=D||K({value:"us",field:"iso2",countries:n}),{phone:w,inputValue:B,country:U}=X({value:e,country:$,insertDialCodeOnEmpty:!a,...v});return N(B.length),{phone:w,inputValue:B,country:U.iso2}},{overrideLastItemDebounceMS:c,onChange:A}),S=Z(()=>m(d),[d,m]);O(()=>{let D=y.current;if(!D)return;let $=w=>{if(!w.key)return;let B=w.ctrlKey,U=w.metaKey,ie=w.shiftKey;if(w.key.toLowerCase()==="z"){if(be()){if(!U)return}else if(!B)return;ie?k():b()}};return D.addEventListener("keydown",$),()=>{D.removeEventListener("keydown",$)}},[y,b,k]);let F=D=>{D.preventDefault();let{phone:$,inputValue:w,country:B,cursorPosition:U}=xe(D,{country:S,phoneBeforeInput:M,insertDialCodeOnEmpty:!1,...v});return g({inputValue:w,phone:$,country:B.iso2}),N(U),e},V=I((D,$={focusOnInput:!1})=>{let w=K({value:D,field:"iso2",countries:n});if(!w){console.error(`[react-international-phone]: can not find a country with "${D}" iso2 code`);return}let B=u?"":`${o}${w.dialCode}${i}`;g({inputValue:B,phone:`${o}${w.dialCode}`,country:w.iso2}),$.focusOnInput&&Promise.resolve().then(()=>{y.current?.focus()})},[n,u,o,i,g,y]),[j,q]=W(!1);return O(()=>{if(!j){q(!0),e!==_&&h?.({inputValue:M,phone:_,country:S});return}if(e===_)return;let{phone:D,inputValue:$,country:w}=X({value:e,country:S,insertDialCodeOnEmpty:!a,...v});g({phone:D,inputValue:$,country:w.iso2})},[e]),{phone:_,inputValue:M,country:S,setCountry:V,handlePhoneValueChange:F,inputRef:y}},Ae=({phone:t,country:e,defaultMask:n="............",disableFormatting:o=!1})=>{let r=e.format,i=l=>o?l.replace(new RegExp(`[^${re}]`,"g"),""):l;if(!r)return i(n);if(typeof r=="string")return i(r);if(!r.default)return console.error(`[react-international-phone]: default mask for ${e.iso2} is not provided`),i(n);let c=Object.keys(r).find(l=>{if(l==="default")return!1;if(!(l.charAt(0)==="/"&&l.charAt(l.length-1)==="/"))return console.error(`[react-international-phone]: format regex "${l}" for ${e.iso2} is not valid`),!1;let a=new RegExp(l.substring(1,l.length-1)),s=t.replace(e.dialCode,"");return a.test(Y(s))});return i(c?r[c]:r.default)},L=t=>{let[e,n,o,r,i,c]=t;return{name:e,iso2:n,dialCode:o,format:r,priority:i,areaCodes:c}},$e=t=>`Field "${t}" is not supported`,K=({field:t,value:e,countries:n=G})=>{if(["priority"].includes(t))throw new Error($e(t));let o=n.find(r=>{let i=L(r);return e===i[t]});if(o)return L(o)},Ee=({phone:t,countries:e=G,currentCountryIso2:n})=>{let o={country:void 0,fullDialCodeMatch:!1};if(!t)return o;let r=Y(t);if(!r)return o;let i=o,c=({country:l,fullDialCodeMatch:a})=>{let s=l.dialCode===i.country?.dialCode,u=(l.priority??0)<(i.country?.priority??0);(!s||u)&&(i={country:l,fullDialCodeMatch:a})};for(let l of e){let a=L(l),{dialCode:s,areaCodes:u}=a;if(r.startsWith(s)){let C=i.country?Number(s)>=Number(i.country.dialCode):!0;if(u){let h=r.substring(s.length);for(let f of u)if(h.startsWith(f))return{country:a,fullDialCodeMatch:!0}}(C||s===r||!i.fullDialCodeMatch)&&c({country:a,fullDialCodeMatch:!0})}i.fullDialCodeMatch||r.length<s.length&&s.startsWith(r)&&(!i.country||Number(s)<=Number(i.country.dialCode))&&c({country:a,fullDialCodeMatch:!1})}if(n){let l=K({value:n,field:"iso2",countries:e});if(!l)return i;let a=l?(s=>{if(!s?.areaCodes)return!1;let u=r.substring(s.dialCode.length);return s.areaCodes.some(C=>C.startsWith(u))})(l):!1;i&&i.country?.dialCode===l.dialCode&&i.country!==l&&i.fullDialCodeMatch&&(!l.areaCodes||a)&&(i={country:l,fullDialCodeMatch:!0})}return i},Ie=(t,e)=>{let n=parseInt(t,16);return Number(n+e).toString(16)},Me="abcdefghijklmnopqrstuvwxyz",Le="1f1e6",ee=Me.split("").reduce((t,e,n)=>({...t,[e]:Ie(Le,n)}),{}),ze=t=>[ee[t[0]],ee[t[1]]].join("-"),ne=({iso2:t,size:e,src:n,protocol:o="https",disableLazyLoading:r,className:i,style:c,...l})=>{if(!t)return x.createElement("img",{className:P({addPrefix:["flag-emoji"],rawClassNames:[i]}),width:e,height:e,...l});let a=()=>{if(n)return n;let s=ze(t);return`${o}://cdnjs.cloudflare.com/ajax/libs/twemoji/14.0.2/svg/${s}.svg`};return x.createElement("img",{className:P({addPrefix:["flag-emoji"],rawClassNames:[i]}),src:a(),width:e,height:e,draggable:!1,"data-country":t,loading:r?void 0:"lazy",style:{width:e,height:e,...c},alt:"",...l})},_e=1e3,Be=({show:t,dialCodePrefix:e="+",selectedCountry:n,countries:o=G,preferredCountries:r=[],flags:i,onSelect:c,onClose:l,...a})=>{let s=z(null),u=z(),C=Z(()=>{if(!r||!r.length)return o;let d=[],g=[...o];for(let b of r){let k=g.findIndex(S=>L(S).iso2===b);if(k!==-1){let S=g.splice(k,1)[0];d.push(S)}}return d.concat(g)},[o,r]),h=z({updatedAt:void 0,value:""}),f=d=>{let g=h.current.updatedAt&&new Date().getTime()-h.current.updatedAt.getTime()>_e;h.current={value:g?d:`${h.current.value}${d}`,updatedAt:new Date};let b=C.findIndex(k=>L(k).name.toLowerCase().startsWith(h.current.value));b!==-1&&y(b)},v=I(d=>C.findIndex(g=>L(g).iso2===d),[C]),[p,y]=W(v(n)),N=()=>{u.current!==n&&y(v(n))},m=I(d=>{y(v(d.iso2)),c?.(d)},[c,v]),A=d=>{let g=C.length-1,b=k=>d==="prev"?k-1:d==="next"?k+1:d==="last"?g:0;y(k=>{let S=b(k);return S<0?0:S>g?g:S})},_=d=>{if(d.stopPropagation(),d.key==="Enter"){d.preventDefault();let g=L(C[p]);m(g);return}if(d.key==="Escape"){l?.();return}if(d.key==="ArrowUp"){d.preventDefault(),A("prev");return}if(d.key==="ArrowDown"){d.preventDefault(),A("next");return}if(d.key==="PageUp"){d.preventDefault(),A("first");return}if(d.key==="PageDown"){d.preventDefault(),A("last");return}d.key===" "&&d.preventDefault(),d.key.length===1&&!d.altKey&&!d.ctrlKey&&!d.metaKey&&f(d.key.toLocaleLowerCase())},M=I(()=>{if(!s.current||p===void 0)return;let d=L(C[p]).iso2;if(d===u.current)return;let g=s.current.querySelector(`[data-country="${d}"]`);g&&(ge(s.current,g),u.current=d)},[p,C]);return O(()=>{M()},[p,M]),O(()=>{s.current&&(t?s.current.focus():N())},[t]),O(()=>{N()},[n]),x.createElement("ul",{ref:s,role:"listbox",className:P({addPrefix:["country-selector-dropdown"],rawClassNames:[a.className]}),style:{display:t?"block":"none",...a.style},onKeyDown:_,onBlur:l,tabIndex:-1,"aria-activedescendant":`react-international-phone__${L(C[p]).iso2}-option`},C.map((d,g)=>{let b=L(d),k=b.iso2===n,S=g===p,F=r.includes(b.iso2),V=g===r.length-1,j=i?.find(q=>q.iso2===b.iso2);return x.createElement(x.Fragment,{key:b.iso2},x.createElement("li",{"data-country":b.iso2,role:"option","aria-selected":k,"aria-label":`${b.name} ${e}${b.dialCode}`,id:`react-international-phone__${b.iso2}-option`,className:P({addPrefix:["country-selector-dropdown__list-item",F&&"country-selector-dropdown__list-item--preferred",k&&"country-selector-dropdown__list-item--selected",S&&"country-selector-dropdown__list-item--focused"],rawClassNames:[a.listItemClassName,F&&a.listItemPreferredClassName,k&&a.listItemSelectedClassName,S&&a.listItemFocusedClassName]}),onClick:()=>m(b),style:a.listItemStyle,title:b.name},x.createElement(ne,{iso2:b.iso2,src:j?.src,className:P({addPrefix:["country-selector-dropdown__list-item-flag-emoji"],rawClassNames:[a.listItemFlagClassName]}),style:a.listItemFlagStyle}),x.createElement("span",{className:P({addPrefix:["country-selector-dropdown__list-item-country-name"],rawClassNames:[a.listItemCountryNameClassName]}),style:a.listItemCountryNameStyle},b.name),x.createElement("span",{className:P({addPrefix:["country-selector-dropdown__list-item-dial-code"],rawClassNames:[a.listItemDialCodeClassName]}),style:a.listItemDialCodeStyle},e,b.dialCode)),V?x.createElement("hr",{className:P({addPrefix:["country-selector-dropdown__preferred-list-divider"],rawClassNames:[a.preferredListDividerClassName]}),style:a.preferredListDividerStyle}):null)}))},Fe=x.memo(({selectedCountry:t,onSelect:e,disabled:n,hideDropdown:o,countries:r=G,preferredCountries:i=[],flags:c,renderButtonWrapper:l,...a})=>{let[s,u]=W(!1),C=Z(()=>{if(t)return K({value:t,field:"iso2",countries:r})},[r,t]),h=z(null),f=p=>{p.key&&["ArrowUp","ArrowDown"].includes(p.key)&&(p.preventDefault(),u(!0))},v=()=>{let p={title:C?.name,onClick:()=>u(N=>!N),onMouseDown:N=>N.preventDefault(),onKeyDown:f,disabled:o||n,role:"combobox","aria-label":"Country selector","aria-haspopup":"listbox","aria-expanded":s},y=x.createElement("div",{className:P({addPrefix:["country-selector-button__button-content"],rawClassNames:[a.buttonContentWrapperClassName]}),style:a.buttonContentWrapperStyle},x.createElement(ne,{iso2:t,src:c?.find(N=>N.iso2===t)?.src,className:P({addPrefix:["country-selector-button__flag-emoji",n&&"country-selector-button__flag-emoji--disabled"],rawClassNames:[a.flagClassName]}),style:{visibility:t?"visible":"hidden",...a.flagStyle}}),!o&&x.createElement("div",{className:P({addPrefix:["country-selector-button__dropdown-arrow",n&&"country-selector-button__dropdown-arrow--disabled",s&&"country-selector-button__dropdown-arrow--active"],rawClassNames:[a.dropdownArrowClassName]}),style:a.dropdownArrowStyle}));return l?l({children:y,rootProps:p}):x.createElement("button",{...p,type:"button",className:P({addPrefix:["country-selector-button",s&&"country-selector-button--active",n&&"country-selector-button--disabled",o&&"country-selector-button--hide-dropdown"],rawClassNames:[a.buttonClassName]}),"data-country":t,style:a.buttonStyle},y)};return x.createElement("div",{className:P({addPrefix:["country-selector"],rawClassNames:[a.className]}),style:a.style,ref:h},v(),x.createElement(Be,{show:s,countries:r,preferredCountries:i,flags:c,onSelect:p=>{u(!1),e?.(p)},selectedCountry:t,onClose:()=>{u(!1)},...a.dropdownStyleProps}))}),Ve=({dialCode:t,prefix:e,disabled:n,style:o,className:r})=>x.createElement("div",{className:P({addPrefix:["dial-code-preview",n&&"dial-code-preview--disabled"],rawClassNames:[r]}),style:o},`${e}${t}`);oe(({value:t,onChange:e,countries:n=G,preferredCountries:o,hideDropdown:r,showDisabledDialCodeAndPrefix:i,disableFocusAfterCountrySelect:c,flags:l,style:a,className:s,inputStyle:u,inputClassName:C,countrySelectorStyleProps:h,dialCodePreviewStyleProps:f,inputProps:v,placeholder:p,disabled:y,name:N,onFocus:m,onBlur:A,required:_,autoFocus:M,...d},g)=>{let b=I(w=>{e?.(w.phone,{country:w.country,inputValue:w.inputValue})},[e]),{phone:k,inputValue:S,inputRef:F,country:V,setCountry:j,handlePhoneValueChange:q}=ae({value:t,countries:n,...d,onChange:b}),D=d.disableDialCodeAndPrefix&&i&&V?.dialCode,$=I(w=>{j(w.iso2,{focusOnInput:!c})},[j,c]);return se(g,()=>F.current?Object.assign(F.current,{setCountry:j,state:{phone:k,inputValue:S,country:V}}):null,[F,j,k,S,V]),x.createElement("div",{ref:g,className:P({addPrefix:["input-container"],rawClassNames:[s]}),style:a},x.createElement(Fe,{onSelect:$,flags:l,selectedCountry:V?.iso2,countries:n,preferredCountries:o,disabled:y,hideDropdown:r,...h}),D&&x.createElement(Ve,{dialCode:V.dialCode,prefix:d.prefix??"+",disabled:y,...f}),x.createElement("input",{onChange:q,value:S,type:"tel",ref:F,className:P({addPrefix:["input",y&&"input--disabled"],rawClassNames:[C]}),placeholder:p,disabled:y,style:u,name:N,onFocus:m,onBlur:A,autoFocus:M,required:_,...v}))});const je=G.map(L);function He({value:t,onChange:e,defaultCountry:n="us",...o}){const r=z(null),i=z(null),{inputValue:c,handlePhoneValueChange:l,inputRef:a,country:s,setCountry:u}=ae({defaultCountry:n,value:t,countries:G,onChange:m=>{e?.(m.phone)},forceDialCode:!0}),C=`+${s.dialCode}`,{startsWith:h}=le({sensitivity:"base"}),[f,v]=W(""),[p,y]=W(!1),N=Z(()=>je.filter(m=>h(m.name,f)),[f]);return O(()=>{p&&i.current?.focus()},[p]),H("div",{className:J("flex relative",o.label?"pt-4":""),"aria-label":o["aria-label"],children:[H(ue,{isOpen:p,onOpenChange:y,children:[H(de,{"aria-label":"Select Country",className:"flex px-4 h-10 text-sm items-center rounded-l-md bg-surface-subtle gap-2 uppercase [&[aria-expanded=false]_svg]:rotate-180 border border-r-0 border-border",excludeFromTabOrder:!0,children:[s.iso2,R("svg",{width:"15",height:"8",viewBox:"0 0 15 8",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:R("path",{d:"M1 7L7.5 0.999999L14 7",stroke:"currentColor"})})]}),H("div",{className:J("w-full grid absolute left-0 top-[calc(100%+.25rem)] bg-white z-50 rounded-md text-slate-600 border border-border","shadow-inner",p?"block":"hidden"),ref:r,children:[R("svg",{xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16",fill:"none",viewBox:"0 0 17 16",className:"absolute top-4 left-[1.325rem]",children:R("path",{fill:"currentColor",fillRule:"evenodd",d:"M12.3 6.9a4.9 4.9 0 1 1-9.8 0 4.9 4.9 0 0 1 9.8 0Zm-1.1 5.7c-1.1.7-2.4 1.2-3.8 1.2a6.9 6.9 0 1 1 5.3-2.5l3 3-1.4 1.4-3.1-3Z",clipRule:"evenodd"})}),R(ce,{"aria-label":"Search for countries",placeholder:"Search for countries",className:J("pl-12 pr-5 py-4 w-full m-0 border-0 text-fg-strong transition-all duration-[0.25s] ease outline-0 bg-transparent","placeholder:text-fg-strong focus:outline-0","border-b border-border-subtle"),onChange:m=>v(m.target.value),onBlur:()=>{y(!1),a.current?.focus()},value:f,ref:i}),R("div",{className:"p-2.5",children:R(fe,{className:"text-fg-strong max-h-60 overflow-y-auto",selectionMode:"single","aria-label":"Countries List",onSelectionChange:m=>{u(String([...m][0])),v(""),y(!1)},children:(p?N:[]).map(m=>H(pe,{id:m.iso2,value:m,textValue:m.iso2,className:"p-3 text-fg data-[hovered]:bg-surface-subtle rounded-md",children:[m.name," (+",m.dialCode,")"]},m.iso2))})})]})]}),R(me,{...o,value:c,inputProps:{onChange:l},ref:a,classNames:{input:J("rounded-l-none",c.trim()===C?"text-slate-600":""),label:"absolute top-0 left-0"}})]})}export{He as PhoneInput,He as default};
|
|
1
|
+
"use client";import{jsxs as H,jsx as j}from"react/jsx-runtime";import{useFilter as ie}from"react-aria";import k,{useState as W,useMemo as Z,useRef as _,forwardRef as se,useCallback as I,useImperativeHandle as ue,useEffect as K}from"react";import{DialogTrigger as de,Button as ce,Input as fe,ListBox as pe,ListBoxItem as me}from"react-aria-components";import{cn as J}from"../../utils/cn.js";import{Input as he}from"../Input/Input.js";import"../Skeleton/Skeleton.js";import"../../hooks/useIsClient.js";var R=[["Afghanistan","af","93"],["Albania","al","355"],["Algeria","dz","213"],["Andorra","ad","376"],["Angola","ao","244"],["Antigua and Barbuda","ag","1268"],["Argentina","ar","54",{default:"(..) .... ....","/^11/":"(..) .... ....","/^15/":"(..) ... ....","/^(2|3|4|5)/":"(.) .... ....","/^9/":"(.) .... ....."},0],["Armenia","am","374",".. ......"],["Aruba","aw","297"],["Australia","au","61",{default:". .... ....","/^4/":"... ... ...","/^5(?!50)/":"... ... ...","/^1(3|8)00/":".... ... ...","/^13/":".. .. ..","/^180/":"... ...."},0,[]],["Austria","at","43"],["Azerbaijan","az","994","(..) ... .. .."],["Bahamas","bs","1242"],["Bahrain","bh","973",".... ...."],["Bangladesh","bd","880"],["Barbados","bb","1246"],["Belarus","by","375","(..) ... .. .."],["Belgium","be","32","... .. .. .."],["Belize","bz","501"],["Benin","bj","229"],["Bhutan","bt","975"],["Bolivia","bo","591"],["Bosnia and Herzegovina","ba","387"],["Botswana","bw","267"],["Brazil","br","55","(..) .....-...."],["British Indian Ocean Territory","io","246"],["Brunei","bn","673"],["Bulgaria","bg","359"],["Burkina Faso","bf","226"],["Burundi","bi","257"],["Cambodia","kh","855"],["Cameroon","cm","237"],["Canada","ca","1","(...) ...-....",1,["204","226","236","249","250","289","306","343","365","387","403","416","418","431","437","438","450","506","514","519","548","579","581","587","604","613","639","647","672","705","709","742","778","780","782","807","819","825","867","873","902","905"]],["Cape Verde","cv","238"],["Caribbean Netherlands","bq","599","",1],["Cayman Islands","ky","1","... ... ....",4,["345"]],["Central African Republic","cf","236"],["Chad","td","235"],["Chile","cl","56"],["China","cn","86","... .... ...."],["Colombia","co","57","... ... ...."],["Comoros","km","269"],["Congo","cd","243"],["Congo","cg","242"],["Costa Rica","cr","506","....-...."],["Côte d'Ivoire","ci","225",".. .. .. .. .."],["Croatia","hr","385"],["Cuba","cu","53"],["Curaçao","cw","599","",0],["Cyprus","cy","357",".. ......"],["Czech Republic","cz","420","... ... ..."],["Denmark","dk","45",".. .. .. .."],["Djibouti","dj","253",".. .. ...."],["Dominica","dm","1767"],["Dominican Republic","do","1","(...) ...-....",2,["809","829","849"]],["Ecuador","ec","593"],["Egypt","eg","20"],["El Salvador","sv","503","....-...."],["Equatorial Guinea","gq","240"],["Eritrea","er","291"],["Estonia","ee","372",".... ......"],["Ethiopia","et","251",".. ... ...."],["Faroe Islands","fo","298",".. .. .."],["Fiji","fj","679"],["Finland","fi","358",".. ... .. .."],["France","fr","33",". .. .. .. .."],["French Guiana","gf","594","... .. .. .."],["French Polynesia","pf","689",{"/^44/":".. .. ..","/^80[0-5]/":"... .. .. ..",default:".. .. .. .."}],["Gabon","ga","241"],["Gambia","gm","220"],["Georgia","ge","995"],["Germany","de","49","... ........."],["Ghana","gh","233"],["Gibraltar","gi","350"],["Greece","gr","30"],["Greenland","gl","299",".. .. .."],["Grenada","gd","1473"],["Guadeloupe","gp","590","... .. .. ..",0],["Guam","gu","1671"],["Guatemala","gt","502","....-...."],["Guinea","gn","224"],["Guinea-Bissau","gw","245"],["Guyana","gy","592"],["Haiti","ht","509","....-...."],["Honduras","hn","504"],["Hong Kong","hk","852",".... ...."],["Hungary","hu","36"],["Iceland","is","354","... ...."],["India","in","91",".....-....."],["Indonesia","id","62"],["Iran","ir","98","... ... ...."],["Iraq","iq","964"],["Ireland","ie","353",".. ......."],["Israel","il","972","... ... ...."],["Italy","it","39","... .......",0],["Jamaica","jm","1876"],["Japan","jp","81",".. .... ...."],["Jordan","jo","962"],["Kazakhstan","kz","7","... ...-..-..",0],["Kenya","ke","254"],["Kiribati","ki","686"],["Kosovo","xk","383"],["Kuwait","kw","965",".... ...."],["Kyrgyzstan","kg","996","... ... ..."],["Laos","la","856"],["Latvia","lv","371",".. ... ..."],["Lebanon","lb","961"],["Lesotho","ls","266"],["Liberia","lr","231"],["Libya","ly","218"],["Liechtenstein","li","423"],["Lithuania","lt","370"],["Luxembourg","lu","352"],["Macau","mo","853"],["Macedonia","mk","389"],["Madagascar","mg","261"],["Malawi","mw","265"],["Malaysia","my","60","..-....-...."],["Maldives","mv","960"],["Mali","ml","223"],["Malta","mt","356"],["Marshall Islands","mh","692"],["Martinique","mq","596","... .. .. .."],["Mauritania","mr","222"],["Mauritius","mu","230"],["Mayotte","yt","262","... .. .. ..",1,["269","639"]],["Mexico","mx","52","... ... ....",0],["Micronesia","fm","691"],["Moldova","md","373","(..) ..-..-.."],["Monaco","mc","377"],["Mongolia","mn","976"],["Montenegro","me","382"],["Morocco","ma","212"],["Mozambique","mz","258"],["Myanmar","mm","95"],["Namibia","na","264"],["Nauru","nr","674"],["Nepal","np","977"],["Netherlands","nl","31",{"/^06/":"(.). .........","/^6/":". .........","/^0(10|13|14|15|20|23|24|26|30|33|35|36|38|40|43|44|45|46|50|53|55|58|70|71|72|73|74|75|76|77|78|79|82|84|85|87|88|91)/":"(.).. ........","/^(10|13|14|15|20|23|24|26|30|33|35|36|38|40|43|44|45|46|50|53|55|58|70|71|72|73|74|75|76|77|78|79|82|84|85|87|88|91)/":".. ........","/^0/":"(.)... .......",default:"... ......."}],["New Caledonia","nc","687"],["New Zealand","nz","64","...-...-...."],["Nicaragua","ni","505"],["Niger","ne","227"],["Nigeria","ng","234"],["North Korea","kp","850"],["Norway","no","47","... .. ..."],["Oman","om","968",".... ...."],["Pakistan","pk","92","...-......."],["Palau","pw","680"],["Palestine","ps","970"],["Panama","pa","507"],["Papua New Guinea","pg","675"],["Paraguay","py","595"],["Peru","pe","51"],["Philippines","ph","63","... ... ...."],["Poland","pl","48","...-...-..."],["Portugal","pt","351"],["Puerto Rico","pr","1","(...) ...-....",3,["787","939"]],["Qatar","qa","974",".... ...."],["Réunion","re","262","... .. .. ..",0],["Romania","ro","40"],["Russia","ru","7","(...) ...-..-..",1],["Rwanda","rw","250"],["Saint Kitts and Nevis","kn","1869"],["Saint Lucia","lc","1758"],["Saint Pierre & Miquelon","pm","508",{"/^708/":"... ... ...","/^8/":"... .. .. ..",default:".. .. .."}],["Saint Vincent and the Grenadines","vc","1784"],["Samoa","ws","685"],["San Marino","sm","378"],["São Tomé and Príncipe","st","239"],["Saudi Arabia","sa","966",".. ... ...."],["Senegal","sn","221"],["Serbia","rs","381"],["Seychelles","sc","248"],["Sierra Leone","sl","232"],["Singapore","sg","65","....-...."],["Slovakia","sk","421"],["Slovenia","si","386"],["Solomon Islands","sb","677"],["Somalia","so","252"],["South Africa","za","27"],["South Korea","kr","82","... .... ...."],["South Sudan","ss","211"],["Spain","es","34","... ... ..."],["Sri Lanka","lk","94"],["Sudan","sd","249"],["Suriname","sr","597"],["Swaziland","sz","268"],["Sweden","se","46","... ... ..."],["Switzerland","ch","41",".. ... .. .."],["Syria","sy","963"],["Taiwan","tw","886"],["Tajikistan","tj","992"],["Tanzania","tz","255"],["Thailand","th","66"],["Timor-Leste","tl","670"],["Togo","tg","228"],["Tonga","to","676"],["Trinidad and Tobago","tt","1868"],["Tunisia","tn","216"],["Turkey","tr","90","... ... .. .."],["Turkmenistan","tm","993"],["Tuvalu","tv","688"],["Uganda","ug","256"],["Ukraine","ua","380","(..) ... .. .."],["United Arab Emirates","ae","971",{default:".. ... ....","/^5[024568]/":".. ... ....","/^[234679]/":". ... ...."}],["United Kingdom","gb","44",".... ......"],["United States","us","1","(...) ...-....",0],["Uruguay","uy","598"],["Uzbekistan","uz","998",".. ... .. .."],["Vanuatu","vu","678"],["Vatican City","va","39",".. .... ....",1],["Venezuela","ve","58"],["Vietnam","vn","84"],["Wallis & Futuna","wf","681",".. .. .."],["Yemen","ye","967"],["Zambia","zm","260"],["Zimbabwe","zw","263"]],ye="react-international-phone-",ae=(...t)=>t.filter(e=>!!e).join(" ").trim(),Ce=(...t)=>ae(...t).split(" ").map(e=>`${ye}${e}`).join(" "),A=({addPrefix:t,rawClassNames:e})=>ae(Ce(...t),...e),ge=({value:t,mask:e,maskSymbol:n,offset:o=0,trimNonMaskCharsLeftover:a=!1,allowMaskOverflow:l=!1})=>{if(t.length<o)return t;let f=t.slice(0,o),i=t.slice(o),r=e.split("").filter(c=>c===n).length,s=i.slice(0,r),u=l?i.slice(r):"",m=f,v=0;for(let c of e.split("")){if(v>=s.length){if(!a&&c!==n){m+=c;continue}break}c===n?(m+=s[v],v+=1):m+=c}return m+u},G=t=>t?/^\d+$/.test(t):!1,X=t=>t.replace(/\D/g,""),be=(t,e)=>{let n=t.style.display;n!=="block"&&(t.style.display="block");let o=t.getBoundingClientRect(),a=e.getBoundingClientRect(),l=a.top-o.top,f=o.bottom-a.bottom;l>=0&&f>=0||(Math.abs(l)<Math.abs(f)?t.scrollTop+=l:t.scrollTop-=f),t.style.display=n},ve=()=>typeof window>"u"?!1:window.navigator.userAgent.toLowerCase().includes("macintosh"),we=(t,e)=>{let n=e.disableDialCodeAndPrefix?!1:e.forceDialCode,o=e.disableDialCodeAndPrefix?!1:e.insertDialCodeOnEmpty,a=t,l=s=>e.trimNonDigitsEnd?s.trim():s;if(!a)return o&&!a.length||n?l(`${e.prefix}${e.dialCode}${e.charAfterDialCode}`):l(a);if(a=X(a),a===e.dialCode&&!e.disableDialCodeAndPrefix)return l(`${e.prefix}${e.dialCode}${e.charAfterDialCode}`);if(e.dialCode.startsWith(a)&&!e.disableDialCodeAndPrefix)return l(n?`${e.prefix}${e.dialCode}${e.charAfterDialCode}`:`${e.prefix}${a}`);if(!a.startsWith(e.dialCode)&&!e.disableDialCodeAndPrefix){if(n)return l(`${e.prefix}${e.dialCode}${e.charAfterDialCode}`);if(a.length<e.dialCode.length)return l(`${e.prefix}${a}`)}let f=()=>{let s=e.dialCode.length,u=a.slice(0,s),m=a.slice(s);return{phoneLeftSide:u,phoneRightSide:m}},{phoneLeftSide:i,phoneRightSide:r}=f();return i=`${e.prefix}${i}${e.charAfterDialCode}`,r=ge({value:r,mask:e.mask,maskSymbol:e.maskChar,trimNonMaskCharsLeftover:e.trimNonDigitsEnd||e.disableDialCodeAndPrefix&&r.length===0,allowMaskOverflow:e.allowMaskOverflow}),e.disableDialCodeAndPrefix&&(i=""),l(`${i}${r}`)},De=({phoneBeforeInput:t,phoneAfterInput:e,phoneAfterFormatted:n,cursorPositionAfterInput:o,leftOffset:a=0,deletion:l})=>{if(o<a)return a;if(!t)return n.length;let f=null;for(let u=o-1;u>=0;u-=1)if(G(e[u])){f=u;break}if(f===null){for(let u=0;u<e.length;u+=1)if(G(n[u]))return u;return e.length}let i=0;for(let u=0;u<f;u+=1)G(e[u])&&(i+=1);let r=0,s=0;for(let u=0;u<n.length&&(r+=1,G(n[u])&&(s+=1),!(s>=i+1));u+=1);if(l!=="backward")for(;!G(n[r])&&r<n.length;)r+=1;return r},Q=({phone:t,prefix:e})=>t?`${e}${X(t)}`:"";function ee({value:t,country:e,insertDialCodeOnEmpty:n,trimNonDigitsEnd:o,countries:a,prefix:l,charAfterDialCode:f,forceDialCode:i,disableDialCodeAndPrefix:r,defaultMask:s,countryGuessingEnabled:u,disableFormatting:m,allowMaskOverflow:v}){let c=t;r&&(c=c.startsWith(`${l}`)?c:`${l}${e.dialCode}${c}`);let w=u?Ee({phone:c,countries:a,currentCountryIso2:e?.iso2}):void 0,p=w?.country??e,b=we(c,{prefix:l,mask:Ae({phone:c,country:p,defaultMask:s,disableFormatting:m}),maskChar:re,dialCode:p.dialCode,trimNonDigitsEnd:o,charAfterDialCode:f,forceDialCode:i,insertDialCodeOnEmpty:n,disableDialCodeAndPrefix:r,allowMaskOverflow:v}),y=u&&!w?.fullDialCodeMatch?e:p;return{phone:Q({phone:r?`${y.dialCode}${b}`:b,prefix:l}),inputValue:b,country:y}}var xe=t=>{if(t?.toLocaleLowerCase().includes("delete")??!1)return t?.toLocaleLowerCase().includes("forward")?"forward":"backward"},ke=(t,{country:e,insertDialCodeOnEmpty:n,phoneBeforeInput:o,prefix:a,charAfterDialCode:l,forceDialCode:f,disableDialCodeAndPrefix:i,countryGuessingEnabled:r,defaultMask:s,disableFormatting:u,countries:m,allowMaskOverflow:v})=>{let c=t.nativeEvent,w=c.inputType,p=xe(w),b=!!w?.startsWith("insertFrom"),y=w==="insertText",C=c?.data||void 0,N=t.target.value,z=t.target.selectionStart??0;if(w?.includes("history"))return{inputValue:o,phone:Q({phone:o,prefix:a}),cursorPosition:o.length,country:e};if(y&&!G(C)&&N!==a)return{inputValue:o,phone:Q({phone:i?`${e.dialCode}${o}`:o,prefix:a}),cursorPosition:z-(C?.length??0),country:e};if(f&&!N.startsWith(`${a}${e.dialCode}`)&&!b){let x=N?o:`${a}${e.dialCode}${l}`;return{inputValue:x,phone:Q({phone:x,prefix:a}),cursorPosition:a.length+e.dialCode.length+l.length,country:e}}let{phone:L,inputValue:d,country:g}=ee({value:N,country:e,trimNonDigitsEnd:p==="backward",insertDialCodeOnEmpty:n,countryGuessingEnabled:r,countries:m,prefix:a,charAfterDialCode:l,forceDialCode:f,disableDialCodeAndPrefix:i,disableFormatting:u,defaultMask:s,allowMaskOverflow:v}),h=De({cursorPositionAfterInput:z,phoneBeforeInput:o,phoneAfterInput:N,phoneAfterFormatted:d,leftOffset:f?a.length+e.dialCode.length+l.length:0,deletion:p});return{phone:L,inputValue:d,cursorPosition:h,country:g}},Ne=(t,e)=>{let n=Object.keys(t),o=Object.keys(e);if(n.length!==o.length)return!1;for(let a of n)if(t[a]!==e[a])return!1;return!0},Pe=()=>{let t=_(),e=_(Date.now()),n=I(()=>{let o=Date.now(),a=t.current?o-e.current:void 0;return t.current=e.current,e.current=o,a},[]);return Z(()=>({check:n}),[n])},Se={size:20,overrideLastItemDebounceMS:-1};function Me(t,e){let{size:n,overrideLastItemDebounceMS:o,onChange:a}={...Se,...e},[l,f]=W(t),i=_([l]),r=_(0),s=Pe(),u=I((c,w)=>{let p=i.current[r.current];if(c===p||typeof c=="object"&&typeof p=="object"&&Ne(c,p))return;let b=o>0,y=s.check(),C=b&&y!==void 0?y>o:!0;if(w?.overrideLastItem!==void 0?w.overrideLastItem:!C)i.current=[...i.current.slice(0,r.current),c];else{let N=i.current.length>=n;i.current=[...i.current.slice(N?1:0,r.current+1),c],N||(r.current+=1)}f(c),a?.(c)},[a,o,n,s]),m=I(()=>{if(r.current<=0)return{success:!1};let c=i.current[r.current-1];return f(c),r.current-=1,a?.(c),{success:!0,value:c}},[a]),v=I(()=>{if(r.current+1>=i.current.length)return{success:!1};let c=i.current[r.current+1];return f(c),r.current+=1,a?.(c),{success:!0,value:c}},[a]);return[l,u,m,v]}var re=".",$={defaultCountry:"us",value:"",prefix:"+",defaultMask:"............",charAfterDialCode:" ",historySaveDebounceMS:200,disableCountryGuess:!1,disableDialCodePrefill:!1,forceDialCode:!1,disableDialCodeAndPrefix:!1,disableFormatting:!1,allowMaskOverflow:!1,countries:R},ne=({defaultCountry:t=$.defaultCountry,value:e=$.value,countries:n=$.countries,prefix:o=$.prefix,defaultMask:a=$.defaultMask,charAfterDialCode:l=$.charAfterDialCode,historySaveDebounceMS:f=$.historySaveDebounceMS,disableCountryGuess:i=$.disableCountryGuess,disableDialCodePrefill:r=$.disableDialCodePrefill,forceDialCode:s=$.forceDialCode,disableDialCodeAndPrefix:u=$.disableDialCodeAndPrefix,disableFormatting:m=$.disableFormatting,allowMaskOverflow:v=$.allowMaskOverflow,onChange:c,inputRef:w})=>{let p={countries:n,prefix:o,charAfterDialCode:l,forceDialCode:u?!1:s,disableDialCodeAndPrefix:u,defaultMask:a,countryGuessingEnabled:!i,disableFormatting:m,allowMaskOverflow:v},b=_(null),y=w||b,C=D=>{Promise.resolve().then(()=>{typeof window>"u"||y.current!==document?.activeElement||y.current?.setSelectionRange(D,D)})},N=I(D=>T({value:D,field:"iso2",countries:n}),[n]),z=I(({inputValue:D,phone:P,country:S})=>{if(!c)return;let B=N(S);c({phone:P,inputValue:D,country:B})},[N,c]),[{phone:L,inputValue:d,country:g},h,x,M]=Me(()=>{let D=T({value:t,field:"iso2",countries:n});D||console.error(`[react-international-phone]: can not find a country with "${t}" iso2 code`);let P=D||T({value:"us",field:"iso2",countries:n}),{phone:S,inputValue:B,country:U}=ee({value:e,country:P,insertDialCodeOnEmpty:!r,...p});return C(B.length),{phone:S,inputValue:B,country:U.iso2}},{overrideLastItemDebounceMS:f,onChange:z}),E=Z(()=>N(g),[g,N]);K(()=>{let D=y.current;if(!D)return;let P=S=>{if(!S.key)return;let B=S.ctrlKey,U=S.metaKey,oe=S.shiftKey;if(S.key.toLowerCase()==="z"){if(ve()){if(!U)return}else if(!B)return;oe?M():x()}};return D.addEventListener("keydown",P),()=>{D.removeEventListener("keydown",P)}},[y,x,M]);let V=D=>{D.preventDefault();let{phone:P,inputValue:S,country:B,cursorPosition:U}=ke(D,{country:E,phoneBeforeInput:d,insertDialCodeOnEmpty:!1,...p});return h({inputValue:S,phone:P,country:B.iso2}),C(U),e},O=I((D,P={focusOnInput:!1})=>{let S=T({value:D,field:"iso2",countries:n});if(!S){console.error(`[react-international-phone]: can not find a country with "${D}" iso2 code`);return}let B=u?"":`${o}${S.dialCode}${l}`;h({inputValue:B,phone:`${o}${S.dialCode}`,country:S.iso2}),P.focusOnInput&&Promise.resolve().then(()=>{y.current?.focus()})},[n,u,o,l,h,y]),[q,Y]=W(!1);return K(()=>{if(!q){Y(!0),e!==L&&c?.({inputValue:d,phone:L,country:E});return}if(e===L)return;let{phone:D,inputValue:P,country:S}=ee({value:e,country:E,insertDialCodeOnEmpty:!r,...p});h({phone:D,inputValue:P,country:S.iso2})},[e]),{phone:L,inputValue:d,country:E,setCountry:O,handlePhoneValueChange:V,inputRef:y}},Ae=({phone:t,country:e,defaultMask:n="............",disableFormatting:o=!1})=>{let a=e.format,l=i=>o?i.replace(new RegExp(`[^${re}]`,"g"),""):i;if(!a)return l(n);if(typeof a=="string")return l(a);if(!a.default)return console.error(`[react-international-phone]: default mask for ${e.iso2} is not provided`),l(n);let f=Object.keys(a).find(i=>{if(i==="default")return!1;if(!(i.charAt(0)==="/"&&i.charAt(i.length-1)==="/"))return console.error(`[react-international-phone]: format regex "${i}" for ${e.iso2} is not valid`),!1;let r=new RegExp(i.substring(1,i.length-1)),s=t.replace(e.dialCode,"");return r.test(X(s))});return l(f?a[f]:a.default)},F=t=>{let[e,n,o,a,l,f]=t;return{name:e,iso2:n,dialCode:o,format:a,priority:l,areaCodes:f}},$e=t=>`Field "${t}" is not supported`,T=({field:t,value:e,countries:n=R})=>{if(["priority"].includes(t))throw new Error($e(t));let o=n.find(a=>{let l=F(a);return e===l[t]});if(o)return F(o)},Ee=({phone:t,countries:e=R,currentCountryIso2:n})=>{let o={country:void 0,fullDialCodeMatch:!1};if(!t)return o;let a=X(t);if(!a)return o;let l=o,f=({country:i,fullDialCodeMatch:r})=>{let s=i.dialCode===l.country?.dialCode,u=(i.priority??0)<(l.country?.priority??0);(!s||u)&&(l={country:i,fullDialCodeMatch:r})};for(let i of e){let r=F(i),{dialCode:s,areaCodes:u}=r;if(a.startsWith(s)){let m=l.country?Number(s)>=Number(l.country.dialCode):!0;if(u){let v=a.substring(s.length);for(let c of u)if(v.startsWith(c))return{country:r,fullDialCodeMatch:!0}}(m||s===a||!l.fullDialCodeMatch)&&f({country:r,fullDialCodeMatch:!0})}l.fullDialCodeMatch||a.length<s.length&&s.startsWith(a)&&(!l.country||Number(s)<=Number(l.country.dialCode))&&f({country:r,fullDialCodeMatch:!1})}if(n){let i=T({value:n,field:"iso2",countries:e});if(!i)return l;let r=i?(s=>{if(!s?.areaCodes)return!1;let u=a.substring(s.dialCode.length);return s.areaCodes.some(m=>m.startsWith(u))})(i):!1;l&&l.country?.dialCode===i.dialCode&&l.country!==i&&l.fullDialCodeMatch&&(!i.areaCodes||r)&&(l={country:i,fullDialCodeMatch:!0})}return l},Ie=(t,e)=>{let n=parseInt(t,16);return Number(n+e).toString(16)},Le="abcdefghijklmnopqrstuvwxyz",Fe="1f1e6",te=Le.split("").reduce((t,e,n)=>({...t,[e]:Ie(Fe,n)}),{}),_e=t=>[te[t[0]],te[t[1]]].join("-"),le=({iso2:t,size:e,src:n,protocol:o="https",disableLazyLoading:a,className:l,style:f,...i})=>{if(!t)return k.createElement("img",{className:A({addPrefix:["flag-emoji"],rawClassNames:[l]}),width:e,height:e,...i});let r=()=>{if(n)return n;let s=_e(t);return`${o}://cdnjs.cloudflare.com/ajax/libs/twemoji/14.0.2/svg/${s}.svg`};return k.createElement("img",{className:A({addPrefix:["flag-emoji"],rawClassNames:[l]}),src:r(),width:e,height:e,draggable:!1,"data-country":t,loading:a?void 0:"lazy",style:{width:e,height:e,...f},alt:"",...i})},Be=1e3,Ve=({show:t,dialCodePrefix:e="+",selectedCountry:n,countries:o=R,preferredCountries:a=[],flags:l,onSelect:f,onClose:i,...r})=>{let s=_(null),u=_(),m=Z(()=>{if(!a||!a.length)return o;let d=[],g=[...o];for(let h of a){let x=g.findIndex(M=>F(M).iso2===h);if(x!==-1){let M=g.splice(x,1)[0];d.push(M)}}return d.concat(g)},[o,a]),v=_({updatedAt:void 0,value:""}),c=d=>{let g=v.current.updatedAt&&new Date().getTime()-v.current.updatedAt.getTime()>Be;v.current={value:g?d:`${v.current.value}${d}`,updatedAt:new Date};let h=m.findIndex(x=>F(x).name.toLowerCase().startsWith(v.current.value));h!==-1&&b(h)},w=I(d=>m.findIndex(g=>F(g).iso2===d),[m]),[p,b]=W(w(n)),y=()=>{u.current!==n&&b(w(n))},C=I(d=>{b(w(d.iso2)),f?.(d)},[f,w]),N=d=>{let g=m.length-1,h=x=>d==="prev"?x-1:d==="next"?x+1:d==="last"?g:0;b(x=>{let M=h(x);return M<0?0:M>g?g:M})},z=d=>{if(d.stopPropagation(),d.key==="Enter"){d.preventDefault();let g=F(m[p]);C(g);return}if(d.key==="Escape"){i?.();return}if(d.key==="ArrowUp"){d.preventDefault(),N("prev");return}if(d.key==="ArrowDown"){d.preventDefault(),N("next");return}if(d.key==="PageUp"){d.preventDefault(),N("first");return}if(d.key==="PageDown"){d.preventDefault(),N("last");return}d.key===" "&&d.preventDefault(),d.key.length===1&&!d.altKey&&!d.ctrlKey&&!d.metaKey&&c(d.key.toLocaleLowerCase())},L=I(()=>{if(!s.current||p===void 0)return;let d=F(m[p]).iso2;if(d===u.current)return;let g=s.current.querySelector(`[data-country="${d}"]`);g&&(be(s.current,g),u.current=d)},[p,m]);return K(()=>{L()},[p,L]),K(()=>{s.current&&(t?s.current.focus():y())},[t]),K(()=>{y()},[n]),k.createElement("ul",{ref:s,role:"listbox",className:A({addPrefix:["country-selector-dropdown"],rawClassNames:[r.className]}),style:{display:t?"block":"none",...r.style},onKeyDown:z,onBlur:i,tabIndex:-1,"aria-activedescendant":`react-international-phone__${F(m[p]).iso2}-option`},m.map((d,g)=>{let h=F(d),x=h.iso2===n,M=g===p,E=a.includes(h.iso2),V=g===a.length-1,O=l?.find(q=>q.iso2===h.iso2);return k.createElement(k.Fragment,{key:h.iso2},k.createElement("li",{"data-country":h.iso2,role:"option","aria-selected":x,"aria-label":`${h.name} ${e}${h.dialCode}`,id:`react-international-phone__${h.iso2}-option`,className:A({addPrefix:["country-selector-dropdown__list-item",E&&"country-selector-dropdown__list-item--preferred",x&&"country-selector-dropdown__list-item--selected",M&&"country-selector-dropdown__list-item--focused"],rawClassNames:[r.listItemClassName,E&&r.listItemPreferredClassName,x&&r.listItemSelectedClassName,M&&r.listItemFocusedClassName]}),onClick:()=>C(h),style:r.listItemStyle,title:h.name},k.createElement(le,{iso2:h.iso2,src:O?.src,className:A({addPrefix:["country-selector-dropdown__list-item-flag-emoji"],rawClassNames:[r.listItemFlagClassName]}),style:r.listItemFlagStyle}),k.createElement("span",{className:A({addPrefix:["country-selector-dropdown__list-item-country-name"],rawClassNames:[r.listItemCountryNameClassName]}),style:r.listItemCountryNameStyle},h.name),k.createElement("span",{className:A({addPrefix:["country-selector-dropdown__list-item-dial-code"],rawClassNames:[r.listItemDialCodeClassName]}),style:r.listItemDialCodeStyle},e,h.dialCode)),V?k.createElement("hr",{className:A({addPrefix:["country-selector-dropdown__preferred-list-divider"],rawClassNames:[r.preferredListDividerClassName]}),style:r.preferredListDividerStyle}):null)}))},ze=k.memo(({selectedCountry:t,onSelect:e,disabled:n,hideDropdown:o,countries:a=R,preferredCountries:l=[],flags:f,renderButtonWrapper:i,...r})=>{let[s,u]=W(!1),m=Z(()=>{if(t)return T({value:t,field:"iso2",countries:a})},[a,t]),v=_(null),c=p=>{p.key&&["ArrowUp","ArrowDown"].includes(p.key)&&(p.preventDefault(),u(!0))},w=()=>{let p={title:m?.name,onClick:()=>u(y=>!y),onMouseDown:y=>y.preventDefault(),onKeyDown:c,disabled:o||n,role:"combobox","aria-label":"Country selector","aria-haspopup":"listbox","aria-expanded":s},b=k.createElement("div",{className:A({addPrefix:["country-selector-button__button-content"],rawClassNames:[r.buttonContentWrapperClassName]}),style:r.buttonContentWrapperStyle},k.createElement(le,{iso2:t,src:f?.find(y=>y.iso2===t)?.src,className:A({addPrefix:["country-selector-button__flag-emoji",n&&"country-selector-button__flag-emoji--disabled"],rawClassNames:[r.flagClassName]}),style:{visibility:t?"visible":"hidden",...r.flagStyle}}),!o&&k.createElement("div",{className:A({addPrefix:["country-selector-button__dropdown-arrow",n&&"country-selector-button__dropdown-arrow--disabled",s&&"country-selector-button__dropdown-arrow--active"],rawClassNames:[r.dropdownArrowClassName]}),style:r.dropdownArrowStyle}));return i?i({children:b,rootProps:p}):k.createElement("button",{...p,type:"button",className:A({addPrefix:["country-selector-button",s&&"country-selector-button--active",n&&"country-selector-button--disabled",o&&"country-selector-button--hide-dropdown"],rawClassNames:[r.buttonClassName]}),"data-country":t,style:r.buttonStyle},b)};return k.createElement("div",{className:A({addPrefix:["country-selector"],rawClassNames:[r.className]}),style:r.style,ref:v},w(),k.createElement(Ve,{show:s,countries:a,preferredCountries:l,flags:f,onSelect:p=>{u(!1),e?.(p)},selectedCountry:t,onClose:()=>{u(!1)},...r.dropdownStyleProps}))}),Oe=({dialCode:t,prefix:e,disabled:n,style:o,className:a})=>k.createElement("div",{className:A({addPrefix:["dial-code-preview",n&&"dial-code-preview--disabled"],rawClassNames:[a]}),style:o},`${e}${t}`);se(({value:t,onChange:e,countries:n=R,preferredCountries:o,hideDropdown:a,showDisabledDialCodeAndPrefix:l,disableFocusAfterCountrySelect:f,flags:i,style:r,className:s,inputStyle:u,inputClassName:m,countrySelectorStyleProps:v,dialCodePreviewStyleProps:c,inputProps:w,placeholder:p,disabled:b,name:y,onFocus:C,onBlur:N,required:z,autoFocus:L,...d},g)=>{let h=I(P=>{e?.(P.phone,{country:P.country,inputValue:P.inputValue})},[e]),{phone:x,inputValue:M,inputRef:E,country:V,setCountry:O,handlePhoneValueChange:q}=ne({value:t,countries:n,...d,onChange:h}),Y=d.disableDialCodeAndPrefix&&l&&V?.dialCode,D=I(P=>{O(P.iso2,{focusOnInput:!f})},[O,f]);return ue(g,()=>E.current?Object.assign(E.current,{setCountry:O,state:{phone:x,inputValue:M,country:V}}):null,[E,O,x,M,V]),k.createElement("div",{ref:g,className:A({addPrefix:["input-container"],rawClassNames:[s]}),style:r},k.createElement(ze,{onSelect:D,flags:i,selectedCountry:V?.iso2,countries:n,preferredCountries:o,disabled:b,hideDropdown:a,...v}),Y&&k.createElement(Oe,{dialCode:V.dialCode,prefix:d.prefix??"+",disabled:b,...c}),k.createElement("input",{onChange:q,value:M,type:"tel",ref:E,className:A({addPrefix:["input",b&&"input--disabled"],rawClassNames:[m]}),placeholder:p,disabled:b,style:u,name:y,onFocus:C,onBlur:N,autoFocus:L,required:z,...w}))});const je=R.map(F);function Ze({value:t,onChange:e,defaultCountry:n="us",...o}){const a=_(null),l=_(null),{inputValue:f,handlePhoneValueChange:i,inputRef:r,country:s,setCountry:u}=ne({defaultCountry:n,value:t,countries:R,onChange:C=>{e?.(C.phone)},forceDialCode:!0}),m=`+${s.dialCode}`,{startsWith:v}=ie({sensitivity:"base"}),[c,w]=W(""),[p,b]=W(!1),y=Z(()=>je.filter(C=>v(C.name,c)),[c]);return K(()=>{p&&l.current?.focus()},[p]),H("div",{className:J("flex relative",o.label?"pt-4":""),"aria-label":o["aria-label"],children:[H(de,{isOpen:p,onOpenChange:b,children:[H(ce,{"aria-label":"Select Country",className:"flex px-4 h-10 text-sm items-center rounded-l-md bg-surface-subtle gap-2 uppercase [&[aria-expanded=false]_svg]:rotate-180 border border-r-0 border-border",excludeFromTabOrder:!0,children:[s.iso2,j("svg",{width:"15",height:"8",viewBox:"0 0 15 8",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:j("path",{d:"M1 7L7.5 0.999999L14 7",stroke:"currentColor"})})]}),H("div",{className:J("w-full grid absolute left-0 top-[calc(100%+.25rem)] bg-white z-50 rounded-md text-slate-600 border border-border","shadow-inner",p?"block":"hidden"),ref:a,children:[j("svg",{xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16",fill:"none",viewBox:"0 0 17 16",className:"absolute top-4 left-[1.325rem]",children:j("path",{fill:"currentColor",fillRule:"evenodd",d:"M12.3 6.9a4.9 4.9 0 1 1-9.8 0 4.9 4.9 0 0 1 9.8 0Zm-1.1 5.7c-1.1.7-2.4 1.2-3.8 1.2a6.9 6.9 0 1 1 5.3-2.5l3 3-1.4 1.4-3.1-3Z",clipRule:"evenodd"})}),j(fe,{"aria-label":"Search for countries",placeholder:"Search for countries",className:J("pl-12 pr-5 py-4 w-full m-0 border-0 text-fg-strong transition-all duration-[0.25s] ease outline-0 bg-transparent","placeholder:text-fg-strong focus:outline-0","border-b border-border-subtle"),onChange:C=>w(C.target.value),onBlur:()=>{b(!1),r.current?.focus()},value:c,ref:l}),j("div",{className:"p-2.5",children:j(pe,{className:"text-fg-strong max-h-60 overflow-y-auto",selectionMode:"single","aria-label":"Countries List",onSelectionChange:C=>{u(String([...C][0])),w(""),b(!1)},children:(p?y:[]).map(C=>H(me,{id:C.iso2,value:C,textValue:C.iso2,className:"p-3 text-fg data-[hovered]:bg-surface-subtle rounded-md",children:[C.name," (+",C.dialCode,")"]},C.iso2))})})]})]}),j(he,{...o,value:f,inputProps:{onChange:i},ref:r,classNames:{input:J("rounded-l-none",f.trim()===m?"text-slate-600":""),label:"absolute top-0 left-0"}})]})}export{Ze as PhoneInput,Ze as default};
|
|
@@ -0,0 +1,126 @@
|
|
|
1
|
+
# BUGFIX: GraphQL field errors are reported in production, not only in dev
|
|
2
|
+
|
|
3
|
+
**Date:** 2026-09-09
|
|
4
|
+
**Package:** `@clicktap/ui`
|
|
5
|
+
**Affects:** `src/utils/createAuthAwareGraphqlClient.ts` — every consumer using `graphqlRequest()`
|
|
6
|
+
**Classification:** BUGFIX
|
|
7
|
+
**Breaking:** No API change. **Behavioral:** your production logs gain lines that were never emitted before. See Consumer Impact.
|
|
8
|
+
**Ticket:** CTAP-1651
|
|
9
|
+
|
|
10
|
+
## Problem
|
|
11
|
+
|
|
12
|
+
A **partial response** — HTTP 200 carrying both `data` and `errors[]` — returns the
|
|
13
|
+
partial `data` on purpose, so one failed field does not tear down a whole page. The
|
|
14
|
+
`errors[]` beside it were then thrown away:
|
|
15
|
+
|
|
16
|
+
```ts
|
|
17
|
+
function logFieldErrors(query, variables, errors) {
|
|
18
|
+
if (process.env.NODE_ENV !== 'development' || !errors.length) {
|
|
19
|
+
return; // ← production: silent
|
|
20
|
+
}
|
|
21
|
+
```
|
|
22
|
+
|
|
23
|
+
So outside dev, a resolver exception was recorded **nowhere at all**. The caller got
|
|
24
|
+
`data` with a null field, rendered around it, and nothing anywhere said why.
|
|
25
|
+
|
|
26
|
+
The status code is the reason this hides so well. A partial response is **200**, so:
|
|
27
|
+
|
|
28
|
+
- no error rate moves,
|
|
29
|
+
- no alert fires,
|
|
30
|
+
- and whatever the missing field fed renders as an ordinary, plausible page.
|
|
31
|
+
|
|
32
|
+
[CTAP-1650](https://rmgmedia.atlassian.net/browse/CTAP-1650) lived in exactly that gap.
|
|
33
|
+
A `productCollection` resolver threw on every filtered search whose term contained a
|
|
34
|
+
colour word; the storefront rendered "no products found" — a completely normal outcome
|
|
35
|
+
that nobody investigates — and it was caught only because someone read a query string
|
|
36
|
+
and thought the URL looked wrong.
|
|
37
|
+
|
|
38
|
+
## What changed
|
|
39
|
+
|
|
40
|
+
Field errors on a partial response are now logged in **every** environment.
|
|
41
|
+
|
|
42
|
+
**Dev is unchanged.** It still logs the whole request beside the error — operation name,
|
|
43
|
+
variables, raw query — so the call site is findable without chasing a stack trace.
|
|
44
|
+
|
|
45
|
+
**Production logs the fault, not the payload:**
|
|
46
|
+
|
|
47
|
+
```
|
|
48
|
+
[GraphQL] CollectionProductCollection — field error at productCollection: Internal server error
|
|
49
|
+
{ operationName, path, code, debugMessage }
|
|
50
|
+
```
|
|
51
|
+
|
|
52
|
+
`extensions.debugMessage` is the field that matters. The generic `message` is only ever
|
|
53
|
+
`"Internal server error"`; `debugMessage` carried *"Use case where the same field is
|
|
54
|
+
filtered twice"*, which was the entire diagnosis of CTAP-1650.
|
|
55
|
+
|
|
56
|
+
### 🚨 Production deliberately logs less, and the difference is `variables`
|
|
57
|
+
|
|
58
|
+
This is not a verbosity setting — it is what the log is allowed to contain.
|
|
59
|
+
|
|
60
|
+
`variables` carry whatever the operation was given. For a login or password-update
|
|
61
|
+
mutation that is **credentials**. Dev logs them because it is the developer's own machine
|
|
62
|
+
and own data; production logs the operation name, the field path and the backend's own
|
|
63
|
+
message, which is what identifies the fault, and nothing that travelled with the request.
|
|
64
|
+
|
|
65
|
+
⚠️ **If you add fields to this log, keep that line.** Anything derived from the request
|
|
66
|
+
body is a candidate for holding a secret; anything derived from the *response error* is not.
|
|
67
|
+
|
|
68
|
+
## Consumer Impact
|
|
69
|
+
|
|
70
|
+
**Nothing to change.** No API moved, no signature changed, and partial data is still
|
|
71
|
+
returned exactly as before — reporting the error does not start tearing down a UI that was
|
|
72
|
+
deliberately allowed to render around one failed field.
|
|
73
|
+
|
|
74
|
+
What you will notice:
|
|
75
|
+
|
|
76
|
+
- **Your production logs gain `[GraphQL]` lines** where they previously had none. If any of
|
|
77
|
+
your alerting greps stdout, expect new matches. They indicate a real backend fault that
|
|
78
|
+
was already happening and already invisible — the volume is not new, only the reporting.
|
|
79
|
+
- **Investigate them.** Every one of these lines was, until now, a silent 200 with a hole in it.
|
|
80
|
+
|
|
81
|
+
⚠️ **This is not monitoring.** It writes to stdout, which your container captures. Nothing
|
|
82
|
+
alerts on it, and there is no Sentry/Datadog/structured-logger integration in the frontend
|
|
83
|
+
to route it to. Wiring one is still open on CTAP-1651 — treat this as the difference between
|
|
84
|
+
*silence* and *a record*, not as observability.
|
|
85
|
+
|
|
86
|
+
## The related half, in the app rather than the lib
|
|
87
|
+
|
|
88
|
+
`@clicktap/ui` only makes the failure visible in logs. Making it visible **on the page** is
|
|
89
|
+
app-side, and clicktap's storefront does it in `apps/frontend`:
|
|
90
|
+
|
|
91
|
+
`SearchCollectionRoot::fetchSearchProducts` returns `null` **only** when the query did not
|
|
92
|
+
answer — a search that matched nothing still returns a collection whose pagination reports
|
|
93
|
+
0. Those were collapsed into the same `EmptyResults` screen, which is what made a 500 look
|
|
94
|
+
like "no products found".
|
|
95
|
+
|
|
96
|
+
If you fork the storefront, the same distinction is worth making:
|
|
97
|
+
|
|
98
|
+
```tsx
|
|
99
|
+
// null means FAILED. 0 results is data, and a different screen.
|
|
100
|
+
const queryFailed = data === null;
|
|
101
|
+
```
|
|
102
|
+
|
|
103
|
+
⚠️ The failure state should **not** offer "clear filters". That is the empty-state's advice
|
|
104
|
+
and it is wrong here — the filters are not why nothing came back, so clearing them sends the
|
|
105
|
+
shopper to fix something that was never the problem. Retry is the honest action.
|
|
106
|
+
|
|
107
|
+
## Verification
|
|
108
|
+
|
|
109
|
+
Against a genuinely failing query (CTAP-1650's, before its fix landed):
|
|
110
|
+
|
|
111
|
+
```
|
|
112
|
+
[GraphQL] CollectionProductCollection — field error at productCollection: Internal server error
|
|
113
|
+
[search] productCollection came back null — the query failed
|
|
114
|
+
```
|
|
115
|
+
|
|
116
|
+
and the three states stay distinct:
|
|
117
|
+
|
|
118
|
+
| | error state | products |
|
|
119
|
+
| --- | --- | --- |
|
|
120
|
+
| failing query | shown | 0 |
|
|
121
|
+
| genuinely empty | not shown | 0 |
|
|
122
|
+
| normal search | not shown | 4 |
|
|
123
|
+
|
|
124
|
+
`nx test frontend-module-ui --testPathPattern=createAuthAwareGraphqlClient` — 5 tests, of
|
|
125
|
+
which **3 fail if this change is reverted**. The other two are controls that must hold
|
|
126
|
+
either way: dev still logs the request, and partial data is still returned.
|
|
@@ -1,4 +1,14 @@
|
|
|
1
1
|
[
|
|
2
|
+
{
|
|
3
|
+
"path": "2026/09/ui-2026-09-09-graphql-field-errors-reported-in-production.md",
|
|
4
|
+
"module": "libs/frontend-modules/ui",
|
|
5
|
+
"package": "@clicktap/ui",
|
|
6
|
+
"date": "2026-09-09",
|
|
7
|
+
"title": "BUGFIX: GraphQL field errors are reported in production, not only in dev",
|
|
8
|
+
"classification": "BUGFIX",
|
|
9
|
+
"breaking": "No API change. **Behavioral:** your production logs gain lines that were never emitted before. See Consumer Impact.",
|
|
10
|
+
"affects": "`src/utils/createAuthAwareGraphqlClient.ts` — every consumer using `graphqlRequest()`"
|
|
11
|
+
},
|
|
2
12
|
{
|
|
3
13
|
"path": "2026/09/ui-2026-09-01-button-link-variant.md",
|
|
4
14
|
"module": "libs/frontend-modules/ui",
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@clicktap/ui",
|
|
3
|
-
"version": "2.1.
|
|
3
|
+
"version": "2.1.1",
|
|
4
4
|
"private": false,
|
|
5
5
|
"author": "Clicktap",
|
|
6
6
|
"description": "A library of React UI components and low-level hooks.",
|
|
@@ -94,11 +94,11 @@
|
|
|
94
94
|
"./package.json": "./package.json"
|
|
95
95
|
},
|
|
96
96
|
"dependencies": {
|
|
97
|
-
"@react-aria/interactions": "^3.
|
|
98
|
-
"@react-stately/utils": "^3.
|
|
97
|
+
"@react-aria/interactions": "^3.28.1",
|
|
98
|
+
"@react-stately/utils": "^3.12.1",
|
|
99
99
|
"clsx": "^1.2.1",
|
|
100
100
|
"jwt-decode": "^4.0.0",
|
|
101
|
-
"react-number-format": "^5.4.
|
|
101
|
+
"react-number-format": "^5.4.5",
|
|
102
102
|
"tailwind-merge": "^2.6.1"
|
|
103
103
|
},
|
|
104
104
|
"devDependencies": {
|
|
@@ -106,27 +106,27 @@
|
|
|
106
106
|
"@graphql-typed-document-node/core": "^3.2.0",
|
|
107
107
|
"@nx/react": "20.5.0",
|
|
108
108
|
"@nx/vite": "20.5.0",
|
|
109
|
-
"@storybook/addon-actions": "^8.
|
|
109
|
+
"@storybook/addon-actions": "^8.6.18",
|
|
110
110
|
"@storybook/react": "7.4.5",
|
|
111
111
|
"@storybook/react-webpack5": "^8.6.18",
|
|
112
112
|
"@testing-library/react": "15.0.6",
|
|
113
113
|
"@vitejs/plugin-react": "4.5.2",
|
|
114
|
-
"framer-motion": "^11.18.
|
|
115
|
-
"glob": "^
|
|
114
|
+
"framer-motion": "^11.18.2",
|
|
115
|
+
"glob": "^13.0.6",
|
|
116
116
|
"graphql": "16.12.0",
|
|
117
117
|
"next": "14.2.35",
|
|
118
118
|
"react": "18.3.1",
|
|
119
119
|
"react-aria": "3.48.0",
|
|
120
120
|
"react-aria-components": "1.17.0",
|
|
121
121
|
"react-dom": "18.3.1",
|
|
122
|
-
"react-hook-form": "^7.
|
|
123
|
-
"react-international-phone": "^4.
|
|
122
|
+
"react-hook-form": "^7.87.0",
|
|
123
|
+
"react-international-phone": "^4.8.0",
|
|
124
124
|
"react-stately": "3.46.0",
|
|
125
125
|
"rollup-preserve-directives": "^1.1.3",
|
|
126
126
|
"tailwindcss": "^4.3.3",
|
|
127
|
-
"vite": "^7.3.
|
|
127
|
+
"vite": "^7.3.6",
|
|
128
128
|
"vite-plugin-dts": "4.5.4",
|
|
129
|
-
"vite-plugin-static-copy": "^3.
|
|
129
|
+
"vite-plugin-static-copy": "^3.4.0",
|
|
130
130
|
"webpack": "5.105.0"
|
|
131
131
|
},
|
|
132
132
|
"peerDependencies": {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
class l extends Error{constructor(
|
|
1
|
+
class l extends Error{constructor(t,s){const e=t.errors?.[0]?.message;super(`GraphQL request failed: ${e??`HTTP ${t.status}`}`),this.name="ClientError",this.response=t,this.request=s}}class f{constructor(){this.listeners=new Map}subscribe(t,s){return this.listeners.has(t)||this.listeners.set(t,new Set),this.listeners.get(t).add(s),()=>{this.listeners.get(t)?.delete(s)}}dispatch(t,s){this.listeners.get(t)?.forEach(e=>e(s))}}const u=new f;function p(r,t){r===401?u.dispatch("unauthenticated",t):r===403?u.dispatch("permissionDenied",t):r>=500&&u.dispatch("serverError",t)}function w(r,t,s){if(!s.length)return;const e=r.match(/^\s*(?:query|mutation|subscription)\s+([A-Za-z_][A-Za-z0-9_]*)/)?.[1];for(const n of s){const c=n.path?.join(".")??"unknown",a=`[GraphQL] ${e??"operation"} — field error at ${c}: ${n.message}`;if(process.env.NODE_ENV==="development"){console.error(a,{error:n,request:{operationName:e,variables:t,query:r}});continue}console.error(a,{operationName:e,path:n.path,code:n.extensions?.code,debugMessage:n.extensions?.debugMessage})}}async function d(r){const{url:t,query:s,variables:e,requestHeaders:n,signal:c}=r,a=new Headers(n);a.set("Content-Type","application/json"),a.has("Accept")||a.set("Accept","application/json");const i=await fetch(t,{method:"POST",headers:a,body:JSON.stringify({query:s,variables:e}),signal:c});let o;try{o=await i.json()}catch{o=void 0}if(!i.ok){const h=new l({status:i.status,data:o?.data,errors:o?.errors},{query:s,variables:e});throw p(i.status,{status:i.status,error:h}),h}if(o?.data)return o.errors?.length&&w(s,e,o.errors),o.data;throw new l({status:i.status,errors:o?.errors},{query:s,variables:e})}function g(){const r=async(e,n,c,a)=>d({url:e,query:String(n),variables:c,requestHeaders:a}),t=async e=>d({url:e.url,query:String(e.document),variables:e.variables,requestHeaders:e.requestHeaders,signal:e.signal}),s=r;return s.withOptions=t,s}function y(){return async function(t,s){const e=await fetch(t,s);return(e.status===401||e.status===403||e.status>=500)&&p(e.status,{status:e.status,response:e.clone()}),e}}export{l as ClientError,u as authAwareEvents,y as createAuthAwareFetch,g as createAuthAwareGraphqlClient};
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
import j,{useRef as R,useState as ie,useEffect as J,useMemo as Ie,useLayoutEffect as xe}from"react";function Ae(e,t){var n={};for(var u in e)Object.prototype.hasOwnProperty.call(e,u)&&t.indexOf(u)<0&&(n[u]=e[u]);if(e!=null&&typeof Object.getOwnPropertySymbols=="function")for(var i=0,u=Object.getOwnPropertySymbols(e);i<u.length;i++)t.indexOf(u[i])<0&&Object.prototype.propertyIsEnumerable.call(e,u[i])&&(n[u[i]]=e[u[i]]);return n}var K;(function(e){e.event="event",e.props="prop"})(K||(K={}));function N(){}function be(e){var t,n=void 0;return function(){for(var u=[],i=arguments.length;i--;)u[i]=arguments[i];return t&&u.length===t.length&&u.every(function(d,m){return d===t[m]})||(t=u,n=e.apply(void 0,u)),n}}function X(e){return!!(e||"").match(/\d/)}function Y(e){return e==null}function we(e){return typeof e=="number"&&isNaN(e)}function Te(e){return Y(e)||we(e)||typeof e=="number"&&!isFinite(e)}function Ee(e){var t=R(e);t.current=e;var n=R(function(){for(var u=[],i=arguments.length;i--;)u[i]=arguments[i];return t.current.apply(t,u)});return n.current}function ne(e,t){return Array(t+1).join(e)}function Me(e){var t=e+"",n=t[0]==="-"?"-":"";n&&(t=t.substring(1));var u=t.split(/[eE]/g),i=u[0],d=u[1];if(d=Number(d),!d)return n+i;i=i.replace(".","");var m=1+d,y=i.length;return m<0?i="0."+ne("0",Math.abs(m))+i:m>=y?i=i+ne("0",m-y):i=(i.substring(0,m)||"0")+"."+i.substring(m),n+i}function ae(e,t){if(e.value=e.value,e!==null){if(e.createTextRange){var n=e.createTextRange();return n.move("character",t),n.select(),!0}return e.selectionStart||e.selectionStart===0?(e.focus(),e.setSelectionRange(t,t),!0):(e.focus(),!1)}}var Oe=be(function(e,t){for(var n=0,u=0,i=e.length,d=t.length;e[n]===t[n]&&n<i;)n++;for(;e[i-1-u]===t[d-1-u]&&d-u>n&&i-u>n;)u++;return{from:{start:n,end:i-u},to:{start:n,end:d-u}}}),Be=function(e,t){var n=Math.min(e.selectionStart,t);return{from:{start:n,end:e.selectionEnd},to:{start:n,end:t}}};function _e(e,t,n){return Math.min(Math.max(e,t),n)}function Q(e){return Math.max(e.selectionStart,e.selectionEnd)}function Ne(){return typeof navigator<"u"&&!(navigator.platform&&/iPhone|iPod/.test(navigator.platform))}function Re(e){var t=e.currentValue,n=e.formattedValue,u=e.currentValueIndex,i=e.formattedValueIndex;return t[u]===n[i]}function Fe(e,t,n,u,i,d,m){m===void 0&&(m=Re);var y=i.findIndex(function(P){return P}),S=e.slice(0,y);!t&&!n.startsWith(S)&&(t=S,n=S+n,u=u+S.length);for(var I=n.length,O=e.length,T={},h=new Array(I),V=0;V<I;V++){h[V]=-1;for(var s=0,x=O;s<x;s++){var C=m({currentValue:n,lastValue:t,formattedValue:e,currentValueIndex:V,formattedValueIndex:s});if(C&&T[s]!==!0){h[V]=s,T[s]=!0;break}}}for(var c=u;c<I&&(h[c]===-1||!d(n[c]));)c++;var A=c===I||h[c]===-1?O:h[c];for(c=u-1;c>0&&h[c]===-1;)c--;var b=c===-1||h[c]===-1?0:h[c]+1;return b>A?A:u-b<A-u?b:A}function ue(e,t,n,u){var i=e.length;if(t=_e(t,0,i),u==="left"){for(;t>=0&&!n[t];)t--;t===-1&&(t=n.indexOf(!0))}else{for(;t<=i&&!n[t];)t++;t>i&&(t=n.lastIndexOf(!0))}return t===-1&&(t=i),t}function Le(e){for(var t=Array.from({length:e.length+1}).map(function(){return!0}),n=0,u=t.length;n<u;n++)t[n]=!!(X(e[n])||X(e[n-1]));return t}function je(e,t,n,u,i,d){d===void 0&&(d=N);var m=Ee(function(s,x){var C,c;return Te(s)?(c="",C=""):typeof s=="number"||x?(c=typeof s=="number"?Me(s):s,C=u(c)):(c=i(s,void 0),C=u(c)),{formattedValue:C,numAsString:c}}),y=ie(function(){return m(Y(e)?t:e,n)}),S=y[0],I=y[1],O=function(s,x){s.formattedValue!==S.formattedValue&&I({formattedValue:s.formattedValue,numAsString:s.value}),d(s,x)},T=e,h=n;Y(e)&&(T=S.numAsString,h=!0);var V=m(T,h);return Ie(function(){I(V)},[V.formattedValue]),[S,O]}function De(e){return e.replace(/[^0-9]/g,"")}function ke(e){return e}function Ke(e){var t=e.type;t===void 0&&(t="text");var n=e.displayType;n===void 0&&(n="input");var u=e.customInput,i=e.renderText,d=e.getInputRef,m=e.format;m===void 0&&(m=ke);var y=e.removeFormatting;y===void 0&&(y=De);var S=e.defaultValue,I=e.valueIsNumericString,O=e.onValueChange,T=e.isAllowed,h=e.onChange;h===void 0&&(h=N);var V=e.onKeyDown;V===void 0&&(V=N);var s=e.onMouseUp;s===void 0&&(s=N);var x=e.onFocus;x===void 0&&(x=N);var C=e.onBlur;C===void 0&&(C=N);var c=e.value,A=e.getCaretBoundary;A===void 0&&(A=Le);var b=e.isValidInputCharacter;b===void 0&&(b=X);var P=e.isCharacterSame,q=Ae(e,["type","displayType","customInput","renderText","getInputRef","format","removeFormatting","defaultValue","valueIsNumericString","onValueChange","isAllowed","onChange","onKeyDown","onMouseUp","onFocus","onBlur","value","getCaretBoundary","isValidInputCharacter","isCharacterSame"]),Z=je(c,S,!!I,m,y,O),$=Z[0],g=$.formattedValue,D=$.numAsString,oe=Z[1],k=R(),U=R({formattedValue:g,numAsString:D}),ee=function(r,a){U.current={formattedValue:r.formattedValue,numAsString:r.value},oe(r,a)},te=ie(!1),fe=te[0],le=te[1],F=R(null),B=R({setCaretTimeout:null,focusTimeout:null});J(function(){return le(!0),function(){clearTimeout(B.current.setCaretTimeout),clearTimeout(B.current.focusTimeout)}},[]);var ve=m,z=function(r,a){var o=parseFloat(a);return{formattedValue:r,value:a,floatValue:isNaN(o)?void 0:o}},_=function(r,a,o){r.selectionStart===0&&r.selectionEnd===r.value.length||(ae(r,a),B.current.setCaretTimeout=setTimeout(function(){r.value===o&&r.selectionStart!==a&&ae(r,a)},0))},L=function(r,a,o){return ue(r,a,A(r),o)},W=function(r,a,o){var l=A(a),p=Fe(a,g,r,o,l,b,P);return p=ue(a,p,l),p},ce=function(r){var a=r.formattedValue;a===void 0&&(a="");var o=r.input,l=r.source,p=r.event,v=r.numAsString,f;if(o){var w=r.inputValue||o.value,E=Q(o);o.value=a,f=W(w,a,E),f!==void 0&&_(o,f,a)}a!==g&&ee(z(a,v),{event:p,source:l})};J(function(){var r=U.current,a=r.formattedValue,o=r.numAsString;(g!==a||D!==o)&&ee(z(g,D),{event:void 0,source:K.props})},[g,D]);var se=F.current?Q(F.current):void 0,de=typeof window<"u"?xe:J;de(function(){var r=F.current;if(g!==U.current.formattedValue&&r){var a=W(U.current.formattedValue,g,se);r.value=g,_(r,a,g)}},[g]);var me=function(r,a,o){var l=a.target,p=k.current?Be(k.current,l.selectionEnd):Oe(g,r),v=Object.assign(Object.assign({},p),{lastValue:g}),f=y(r,v),w=ve(f);if(f=y(w,void 0),T&&!T(z(w,f))){var E=a.target,M=Q(E),H=W(r,g,M);return E.value=g,_(E,H,g),!1}return ce({formattedValue:w,numAsString:f,inputValue:r,event:a,source:o,input:a.target}),!0},G=function(r,a){a===void 0&&(a=0);var o=r.selectionStart,l=r.selectionEnd;k.current={selectionStart:o,selectionEnd:l+a}},ge=function(r){var a=r.target,o=a.value,l=me(o,r,K.event);l&&h(r),k.current=void 0},he=function(r){var a=r.target,o=r.key,l=a.selectionStart,p=a.selectionEnd,v=a.value;v===void 0&&(v="");var f;o==="ArrowLeft"||o==="Backspace"?f=Math.max(l-1,0):o==="ArrowRight"?f=Math.min(l+1,v.length):o==="Delete"&&(f=l);var w=0;o==="Delete"&&l===p&&(w=1);var E=o==="ArrowLeft"||o==="ArrowRight";if(f===void 0||l!==p&&!E){V(r),G(a,w);return}var M=f;if(E){var H=o==="ArrowLeft"?"left":"right";M=L(v,f,H),M!==f&&r.preventDefault()}else o==="Delete"&&!b(v[f])?M=L(v,f,"right"):o==="Backspace"&&!b(v[f])&&(M=L(v,f,"left"));M!==f&&_(a,M,v),V(r),G(a,w)},pe=function(r){var a=r.target,o=function(){var l=a.selectionStart,p=a.selectionEnd,v=a.value;if(v===void 0&&(v=""),l===p){var f=L(v,l);f!==l&&_(a,f,v)}};o(),requestAnimationFrame(function(){o()}),s(r),G(a)},ye=function(r){r.persist&&r.persist();var a=r.target,o=r.currentTarget;F.current=a,B.current.focusTimeout=setTimeout(function(){var l=a.selectionStart,p=a.selectionEnd,v=a.value;v===void 0&&(v="");var f=L(v,l);f!==l&&!(l===0&&p===v.length)&&_(a,f,v),x(Object.assign(Object.assign({},r),{currentTarget:o}))},0)},Ve=function(r){F.current=null,clearTimeout(B.current.focusTimeout),clearTimeout(B.current.setCaretTimeout),C(r)},Se=fe&&Ne()?"numeric":void 0,re=Object.assign({inputMode:Se},q,{type:t,value:g,onChange:ge,onKeyDown:he,onMouseUp:pe,onFocus:ye,onBlur:Ve});if(n==="text")return i?j.createElement(j.Fragment,null,i(g,q)||null):j.createElement("span",Object.assign({},q,{ref:d}),g);if(u){var Ce=u;return j.createElement(Ce,Object.assign({},re,{ref:d}))}return j.createElement("input",Object.assign({},re,{ref:d}))}export{Ke as N};
|