@lifesg/react-design-system 1.0.0-alpha.21 → 1.0.0-alpha.22

package/otp-input/index.js

@@ -596,5 +596,5 @@ import e,{jsxs as t,jsx as n}from"react/jsx-runtime";import r,{useRef as i,useIm
     outline: none;
 `;c(dn.BodySmall)`
     color: ${e=>e.disabled?Bt.Neutral[4](e):Bt.Neutral[3](e)};
-`;const _n=e=>n(zn,{weight:"semibold",...e}),Nn=({id:e,"data-testid":r,className:o,cooldownDuration:c,actionButtonProps:d,errorMessage:s,numOfInput:h,onChange:u,onCooldownStart:p,onCooldownEnd:g,...f})=>{const{disabled:m,onClick:y,styleType:b="secondary",...$}=d??{},v=i([]),S=i(u),[w,F]=a(new Array(h).fill("")),[x,B]=a(c),[H,C]=a(new Date);l((()=>(v?.current[0]?.focus(),document.addEventListener("paste",z),()=>document.removeEventListener("paste",z))),[]),l((()=>{if(0!==c){p&&p();const e=E();return()=>e()}}),[H]),l((()=>{S.current=u}),[u]);const D=e=>t=>{const n=t.target.value.replace(/[^0-9]/g,"");if(_(n)){const t=[...w];t[e]=n.substring(n.length-1),v.current[e+1]?.focus(),F(t),u&&u(t.join(""))}},k=e=>t=>{const{key:n,code:r}=t;if("Backspace"!==r||"Backspace"!==n)return;const i=[...w];""!==i[e]?i[e]="":(i[e-1]="",v.current[e-1]?.focus()),F(i),u&&u(i.join(""))},z=e=>{const t=e.clipboardData.getData("text");t&&_(t,h)?(F(t.split("")),S.current&&S.current(t)):e.preventDefault()},_=(e,t=1)=>!!e&&RegExp(`^[0-9]{${t}}$`).test(e),N=()=>{const e=Date.now(),t=1e3*c;return e<H.valueOf()+t},E=()=>{const e=setInterval((()=>{const t=Date.now(),n=1e3*c,r=Math.ceil((H.valueOf()+n-t)/1e3);B(r),r<=0&&(g&&g(),clearInterval(e))}),1e3);return()=>{clearInterval(e)}},O=(e,t,n)=>n?`${n}-${t}-${e+1}`:`${t}-${e+1}`;return t(yn,{id:e,"data-testid":r,className:o,children:[n(bn,{children:w.map(((t,i)=>n($n,{id:O(i,"otp-input",e),"data-testid":O(i,"otp-input",r),ref:e=>v.current[i]=e,type:"text",inputMode:"numeric",value:t,error:!!s,onChange:D(i),onKeyDown:k(i),...f},i)))}),s&&n(_n,{children:s}),n(vn,{styleType:b,...$,onClick:e=>{F(new Array(h).fill("")),N()||(C(new Date),B(c)),y&&y(e)},disabled:m||N(),children:$.children?$.children:"Resend OTP"+(x?` in ${x} second${x>1?"s":""}`:"")})]})};export{Nn as OtpInput};
+`;const _n=e=>n(zn,{weight:"semibold",...e}),Nn=({id:e,value:r=[],"data-testid":o,className:c,cooldownDuration:d,actionButtonProps:s,errorMessage:h,numOfInput:u,onChange:p,onCooldownStart:g,onCooldownEnd:f,...m})=>{const{disabled:y,onClick:b,styleType:$="secondary",...v}=s??{},S=i([]),w=i(p),[F,x]=a(new Array(u).fill("")),[B,H]=a(d),[C,D]=a(new Date);l((()=>(S?.current[0]?.focus(),document.addEventListener("paste",_),()=>document.removeEventListener("paste",_))),[]),l((()=>{if(0!==d){g&&g();const e=O();return()=>e()}}),[C]),l((()=>{w.current=p}),[p]),l((()=>{r.length===u&&x(r)}),[r]);const k=e=>t=>{const n=t.target.value.replace(/[^0-9]/g,"");if(N(n)){const t=[...F];t[e]=n.substring(n.length-1),S.current[e+1]?.focus(),x(t),p&&p(t)}},z=e=>t=>{const{key:n,code:r}=t;if("Backspace"===n||"Backspace"===r){const t=[...F];""!==t[e]?t[e]="":0!==e&&(t[e-1]="",S.current[e-1]?.focus()),x(t),p&&p(t)}},_=e=>{const t=e.clipboardData.getData("text"),n=t.split("");t&&N(t,u)?(x(n),w.current&&w.current(n)):e.preventDefault()},N=(e,t=1)=>!!e&&RegExp(`^[0-9]{${t}}$`).test(e),E=()=>{const e=Date.now(),t=1e3*d;return e<C.valueOf()+t},O=()=>{const e=setInterval((()=>{const t=Date.now(),n=1e3*d,r=Math.ceil((C.valueOf()+n-t)/1e3);H(r),r<=0&&(f&&f(),clearInterval(e))}),1e3);return()=>{clearInterval(e)}},W=(e,t,n)=>n?`${n}-${t}-${e+1}`:`${t}-${e+1}`;return t(yn,{id:e,"data-testid":o,className:c,children:[n(bn,{children:F.map(((t,r)=>n($n,{id:W(r,"otp-input",e),"data-testid":W(r,"otp-input",o),ref:e=>S.current[r]=e,type:"text",inputMode:"numeric",value:t,error:!!h,onChange:k(r),onKeyDown:z(r),...m},r)))}),h&&n(_n,{children:h}),n(vn,{styleType:$,...v,onClick:e=>{x(new Array(u).fill("")),E()||(D(new Date),H(d)),b&&b(e)},disabled:y||E(),children:v.children?v.children:"Resend OTP"+(B?` in ${B} second${B>1?"s":""}`:"")})]})};export{Nn as OtpInput};
 //# sourceMappingURL=index.js.map