@lifesg/react-design-system 1.1.1 → 1.1.2

package/otp-input/index.js

@@ -116,7 +116,7 @@ import e,{jsxs as t,jsx as n}from"react/jsx-runtime";import r,{useRef as o,useIm
 `,Gt=c(Et)`
     height: 1.25rem;
     width: 1.25rem;
-`,Ut=r.forwardRef((({value:e,spacing:r,type:a,error:l,disabled:c,readOnly:d,onChange:s,onClear:h,allowClear:u=!1,className:p,...g},f)=>{const m=o();i(f,(()=>m.current),[]);const y=()=>"tel"===a&&r,b=e=>{const t=e.target,n=t.value,r=t.value.replace(/\s/g,"");t.value=r,s(e),t.value=n},$=e?(e=>e?y()?_t.transformWithSpaces(e,r):e:"")(e):e;return t(zt,{disabled:c,$error:l,$readOnly:d,className:p,children:[n(Xt,{"data-testid":"input",ref:m,disabled:c,value:$,onChange:e=>{s&&(y()?b(e):s(e))},type:a,readOnly:d,...g}),u&&!c&&!d&&!!e&&n(Zt,{onClick:()=>{h&&h(),m&&m.current&&m.current.focus()},children:n(Gt,{})})]})})),Kt={mobileS:320,mobileM:375,mobileL:480,tablet:1199,desktopM:1399,desktopL:1999,desktop4k:3840},Yt=e=>Object.keys(Kt).reduce(((t,n)=>{const r=Kt[n];return t[n]=`@media screen and (${e}: ${r}px)`,t}),{}),qt=Yt("max-width"),Jt=(Yt("min-width"),c.div`
+`,Ut=r.forwardRef((({value:e,spacing:r,type:a,error:l,disabled:c,readOnly:d,onChange:s,onClear:h,allowClear:u=!1,className:p,...g},f)=>{const m=o();i(f,(()=>m.current),[]);const y=()=>"tel"===a&&r,b=e=>{const t=e.target,n=t.value,r=t.value.replace(/\s/g,"");t.value=r,s(e),t.value=n},$=e?(e=>e?y()?_t.transformWithSpaces(e,r):e:"")(e):e;return t(zt,{disabled:c,$error:l,$readOnly:d,className:p,children:[n(Xt,{"data-testid":"input",ref:m,disabled:c,value:$,onChange:e=>{s&&(y()?b(e):s(e))},type:a,readOnly:d,...g}),u&&!c&&!d&&!!e&&n(Zt,{onClick:()=>{h&&h(),m&&m.current&&m.current.focus()},type:"button",children:n(Gt,{})})]})})),Kt={mobileS:320,mobileM:375,mobileL:480,tablet:1199,desktopM:1399,desktopL:1999,desktop4k:3840},Yt=e=>Object.keys(Kt).reduce(((t,n)=>{const r=Kt[n];return t[n]=`@media screen and (${e}: ${r}px)`,t}),{}),qt=Yt("max-width"),Jt=(Yt("min-width"),c.div`
     display: inline-block;
     position: relative;
     width: ${e=>e.$size}px;
@@ -466,7 +466,7 @@ import e,{jsxs as t,jsx as n}from"react/jsx-runtime";import r,{useRef as o,useIm
                 background-color: ${Bt.Neutral[7]};
             `}
     }
-`,Bn=r.forwardRef((({children:e,focusHighlight:t=!0,focusOutline:r="none",...o},i)=>n(xn,{ref:i,$outline:r,$highlight:t,...o,children:e}))),Hn=c.div`
+`,Bn=r.forwardRef((({children:e,focusHighlight:t=!0,focusOutline:r="none",type:o="button",...i},a)=>n(xn,{ref:a,$outline:r,$highlight:t,type:o,...i,children:e}))),Hn=c.div`
     position: relative;
     display: flex;
     flex-direction: column;
@@ -598,5 +598,5 @@ import e,{jsxs as t,jsx as n}from"react/jsx-runtime";import r,{useRef as o,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}),En=({id:e,value:r=[],"data-testid":i,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=o([]),w=o(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(E(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&&E(t,u)?(x(n),w.current&&w.current(n)):e.preventDefault()},E=(e,t=1)=>!!e&&RegExp(`^[0-9]{${t}}$`).test(e),N=()=>{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)}},T=(e,t,n)=>n?`${n}-${t}-${e+1}`:`${t}-${e+1}`;return t(yn,{id:e,"data-testid":i,className:c,children:[n(bn,{children:F.map(((t,r)=>n($n,{id:T(r,"otp-input",e),"data-testid":T(r,"otp-input",i),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("")),N()||(D(new Date),H(d)),b&&b(e)},disabled:y||N(),children:v.children?v.children:"Resend OTP"+(B?` in ${B} second${B>1?"s":""}`:"")})]})};export{En as OtpInput};
+`;const _n=e=>n(zn,{weight:"semibold",...e}),En=({id:e,value:r=[],"data-testid":i,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=o([]),w=o(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(E(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&&E(t,u)?(x(n),w.current&&w.current(n)):e.preventDefault()},E=(e,t=1)=>!!e&&RegExp(`^[0-9]{${t}}$`).test(e),N=()=>{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)}},T=(e,t,n)=>n?`${n}-${t}-${e+1}`:`${t}-${e+1}`;return t(yn,{id:e,"data-testid":i,className:c,children:[n(bn,{children:F.map(((t,r)=>n($n,{id:T(r,"otp-input",e),"data-testid":T(r,"otp-input",i),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:$,type:"button",...v,onClick:e=>{x(new Array(u).fill("")),N()||(D(new Date),H(d)),b&&b(e)},disabled:y||N(),children:v.children?v.children:"Resend OTP"+(B?` in ${B} second${B>1?"s":""}`:"")})]})};export{En as OtpInput};
 //# sourceMappingURL=index.js.map