@lifesg/react-design-system 2.0.0-canary.3 → 2.0.0-canary.4

package/otp-input/index.js

@@ -399,7 +399,7 @@ import e,{jsxs as t,jsx as r}from"react/jsx-runtime";import n,{useRef as o,useIm
 `,gr=d(dr)`
     height: 1.25rem;
     width: 1.25rem;
-`,fr=n.forwardRef((({value:e,spacing:n,type:a,error:l,disabled:d,readOnly:c,onChange:s,onClear:u,allowClear:h=!1,className:p,...g},f)=>{const m=o();i(f,(()=>m.current),[]);const b=()=>"tel"===a&&n,y=e=>{const t=e.target,r=t.value,n=t.value.replace(/\s/g,"");t.value=n,s(e),t.value=r},F=e?(e=>e?b()?lr.transformWithSpaces(e,n):e:"")(e):e;return t(ar,{$disabled:d,$error:l,$readOnly:c,className:p,children:[r(hr,{"data-testid":"input",ref:m,disabled:d,value:F,onChange:e=>{s&&(b()?y(e):s(e))},type:a,readOnly:c,...g}),h&&!d&&!c&&!!e&&r(pr,{onClick:()=>{u&&u(),m&&m.current&&m.current.focus()},type:"button",children:r(gr,{})})]})})),mr=d.div`
+`,fr=n.forwardRef((({value:e,spacing:n,type:a,error:l,disabled:d,readOnly:c,onChange:s,onClear:u,allowClear:h=!1,className:p,...g},f)=>{const m=o();i(f,(()=>m.current),[]);const b=()=>"tel"===a&&n,y=e=>{const t=e.target,r=t.value,n=t.value.replace(/\s/g,"");t.value=n,s(e),t.value=r},F=e?(e=>e?b()?lr.transformWithSpaces(e,n):e:"")(e):e;return t(ar,{$disabled:d,$error:l,$readOnly:c,className:p,children:[r(hr,{"data-testid":"input",ref:m,disabled:d,value:F,onChange:e=>{s&&(b()?y(e):s(e))},type:a,readOnly:c,...g}),h&&!d&&!c&&!!e&&r(pr,{onClick:()=>{u&&u(),m&&m.current&&m.current.focus()},type:"button",children:r(gr,{"aria-hidden":!0})})]})})),mr=d.div`
     display: flex;
     flex-direction: column;
 `,br=d.div`
@@ -642,5 +642,5 @@ import e,{jsxs as t,jsx as r}from"react/jsx-runtime";import n,{useRef as o,useIm
     outline: none;
 `;d(Ut.BodySmall)`
     color: ${e=>e.disabled?xt.Neutral[4](e):xt.Neutral[3](e)};
-`;const Er=e=>r(kr,{weight:"semibold",...e}),zr=({id:e,value:n=[],"data-testid":i,className:d,cooldownDuration:c,actionButtonProps:s,errorMessage:u,numOfInput:h,onChange:p,onCooldownStart:g,onCooldownEnd:f,...m})=>{const{disabled:b,onClick:y,styleType:F="secondary",...$}=s??{},v=o([]),S=o(p),[B,w]=a(new Array(h).fill("")),[x,C]=a(c),[H,D]=a(new Date);l((()=>(v?.current[0]?.focus(),document.addEventListener("paste",z),()=>document.removeEventListener("paste",z))),[]),l((()=>{if(0!==c){g&&g();const e=A();return()=>e()}}),[H]),l((()=>{S.current=p}),[p]),l((()=>{n.length===h&&w(n)}),[n]);const k=e=>t=>{const r=t.target.value.replace(/[^0-9]/g,"");if(_(r)){const t=[...B];t[e]=r.substring(r.length-1),v.current[e+1]?.focus(),w(t),p&&p(t)}},E=e=>t=>{const{key:r,code:n}=t;if("Backspace"===r||"Backspace"===n){const t=[...B];""!==t[e]?t[e]="":0!==e&&(t[e-1]="",v.current[e-1]?.focus()),w(t),p&&p(t)}},z=e=>{const t=e.clipboardData.getData("text"),r=t.split("");t&&_(t,h)?(w(r),S.current&&S.current(r)):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},A=()=>{const e=setInterval((()=>{const t=Date.now(),r=1e3*c,n=Math.ceil((H.valueOf()+r-t)/1e3);C(n),n<=0&&(f&&f(),clearInterval(e))}),1e3);return()=>{clearInterval(e)}},T=(e,t,r)=>r?`${r}-${t}-${e+1}`:`${t}-${e+1}`;return t(mr,{id:e,"data-testid":i,className:d,children:[r(br,{children:B.map(((t,n)=>r(yr,{id:T(n,"otp-input",e),"data-testid":T(n,"otp-input",i),ref:e=>v.current[n]=e,type:"text",inputMode:"numeric",value:t,error:!!u,onChange:k(n),onKeyDown:E(n),...m},n)))}),u&&r(Er,{children:u}),r(Fr,{styleType:F,...$,onClick:e=>{w(new Array(h).fill("")),N()||(D(new Date),C(c)),y&&y(e)},disabled:b||N(),children:$.children?$.children:"Resend OTP"+(x?` in ${x} second${x>1?"s":""}`:"")})]})};export{zr as OtpInput};
+`;const Er=e=>r(kr,{weight:"semibold",...e}),zr=({id:e,value:n=[],"data-testid":i,className:d,cooldownDuration:c,actionButtonProps:s,errorMessage:u,numOfInput:h,onChange:p,onCooldownStart:g,onCooldownEnd:f,...m})=>{const{disabled:b,onClick:y,styleType:F="secondary",...$}=s??{},v=o([]),S=o(p),[B,w]=a(new Array(h).fill("")),[x,C]=a(c),[H,D]=a(new Date);l((()=>(v?.current[0]?.focus(),document.addEventListener("paste",z),()=>document.removeEventListener("paste",z))),[]),l((()=>{if(0!==c){g&&g();const e=A();return()=>e()}}),[H]),l((()=>{S.current=p}),[p]),l((()=>{n.length===h&&w(n)}),[n]);const k=e=>t=>{const r=t.target.value.replace(/[^0-9]/g,"");if(_(r)){const t=[...B];t[e]=r.substring(r.length-1),v.current[e+1]?.focus(),w(t),p&&p(t)}},E=e=>t=>{const{key:r,code:n}=t;if("Backspace"===r||"Backspace"===n){const t=[...B];""!==t[e]?t[e]="":0!==e&&(t[e-1]="",v.current[e-1]?.focus()),w(t),p&&p(t)}},z=e=>{const t=e.clipboardData.getData("text"),r=t.split("");t&&_(t,h)?(w(r),S.current&&S.current(r)):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},A=()=>{const e=setInterval((()=>{const t=Date.now(),r=1e3*c,n=Math.ceil((H.valueOf()+r-t)/1e3);C(n),n<=0&&(f&&f(),clearInterval(e))}),1e3);return()=>{clearInterval(e)}},T=(e,t,r)=>r?`${r}-${t}-${e+1}`:`${t}-${e+1}`;return t(mr,{id:e,"data-testid":i,className:d,children:[r(br,{children:B.map(((t,n)=>r(yr,{id:T(n,"otp-input",e),"data-testid":T(n,"otp-input",i),ref:e=>v.current[n]=e,type:"text",inputMode:"numeric",value:t,error:!!u,onChange:k(n),onKeyDown:E(n),...m},n)))}),u&&r(Er,{children:u}),r(Fr,{styleType:F,type:"button",...$,onClick:e=>{w(new Array(h).fill("")),N()||(D(new Date),C(c)),y&&y(e)},disabled:b||N(),children:$.children?$.children:"Resend OTP"+(x?` in ${x} second${x>1?"s":""}`:"")})]})};export{zr as OtpInput};
 //# sourceMappingURL=index.js.map