@verifiedinc-public/shared-ui-elements 9.0.0 → 9.0.1

package/dist/components/form/OTPInput.d.ts

@@ -14,6 +14,11 @@ interface OTPInputProps {
      * ID of the element that labels this component (for accessibility)
      */
     ariaLabelledBy?: string;
+    /**
+     * When true, adds data attributes to prevent password managers and autofill apps from interacting with the inputs.
+     * @default false
+     */
+    disableAutoFillApps?: boolean;
 }
 export type OTPInputInstance = Readonly<{
     focus: () => void;

package/dist/components/form/OTPInput.mjs

@@ -1 +1 @@
-"use strict";import{forwardRef as q,useRef as b,useState as R,useImperativeHandle as H,useMemo as L,useCallback as m}from"react";import{useTheme as O,FormControl as U,InputBase as G,Box as J,TextField as N,Stack as Q,Typography as V}from"@mui/material";import{v4 as X}from"uuid";import{jsx as g,jsxs as $}from"react/jsx-runtime";function Y(t,A){const l=O(),w=b(Array.from({length:6},()=>X())),[f,h]=R([]),c=b(null),o=b([]),x=b(null),[P,k]=R(!1);H(A,()=>({get value(){return f.join("")},set value(e){var n;h(e.split("")),(n=t.onChange)==null||n.call(t,{target:{value:e}})},focus(){var e,n;(e=o.current[0])==null||e.click(),(n=o.current[0])==null||n.focus()},blur(){o.current.forEach(e=>e?.blur())},clear(){h([])}}),[t,f]);const B={borderColor:t.error?l.palette.error.main:l.palette.action.disabled},F={borderColor:t.error?l.palette.error.main:l.palette.text.primary},M={borderColor:t.error?l.palette.error.main:l.palette.primary.main,boxShadow:`inset 0 0 0 1px ${t.error?l.palette.error.main:l.palette.primary.main}`},K={boxSizing:"content-box",direction:"row",alignItems:"center",spacing:1.25,sx:{"& input":{textAlign:"center",fontWeight:500,height:30,[l.breakpoints.down("xs")]:{height:16,fontSize:16,pt:1,pb:1,px:1},[l.breakpoints.up("xs")]:{fontSize:28,px:1},fontSize:32,py:1.75,borderRadius:1,borderStyle:"solid",borderWidth:1,...B},...!t.disabled&&{"&:hover input":{...F}},...P&&{"& input, &:hover input":{...M}}}},y=L(()=>({inputProps:{inputMode:"numeric",pattern:"[0-9]*",autoCorrect:"off",autoCapitalize:"off"}}),[]),S=m(e=>{var n;const r=e.target.value.replace(/[^0-9]/g,"");if(r.length===6&&/^\d{6}$/.test(r)){const p=r.split("");c.current&&(c.current.value=r),(n=t.onChange)==null||n.call(t,{target:{value:r}}),o.current.forEach(v=>v?.blur()),h(p);return}const u=e.currentTarget.ownerDocument,a=o.current.findIndex(p=>p===u.activeElement),i=r.charAt(r.length-1);!i||!/^[0-9]$/.test(i)||h(p=>{var v,D;const d=[...p];if(a!==-1)d[a]=i;else{const s=d.findIndex(W=>!W);s!==-1?d[s]=i:d.length<6&&d.push(i)}const C=d.join("");if(c.current&&(c.current.value=C),C.length===6)o.current.forEach(s=>s?.blur()),(v=t.onChange)==null||v.call(t,{target:{value:C}});else{const s=a!==-1?a+1:0;s<6&&((D=o.current[s])==null||D.focus())}return d})},[t]),E=m(e=>{e.key==="Backspace"&&h(n=>{var r;const u=[...n.slice(0,-1)];c.current&&(c.current.value=u.join(""));const a=u.length;return a>=0&&a<6&&((r=o.current[a])==null||r.focus()),u})},[]),I=m(e=>{var n,r;const u=e.currentTarget.ownerDocument,a=o.current.findIndex(p=>p===u.activeElement);if(a===-1)return;let i=a;switch(e.key){case"ArrowLeft":i=Math.max(0,a-1);break;case"ArrowRight":i=Math.min(5,a+1);break;default:return}i!==a&&(e.preventDefault(),(n=o.current[i])==null||n.focus(),(r=o.current[i])==null||r.select())},[]),T=m(()=>{k(!0)},[]),j=m(()=>{x.current&&clearTimeout(x.current),x.current=setTimeout(()=>{var e;const n=(e=o.current[0])==null?void 0:e.ownerDocument;o.current.some(r=>r&&r===n?.activeElement)||k(!1)},0)},[]),z=m(e=>new Array(3).fill(void 0).map((n,r)=>g(U,{children:g(G,{inputRef:u=>o.current[r+e]=u,id:w.current[r+e],name:`otp-input-${r+e}`,autoComplete:r+e===0?t.autoComplete??"one-time-code":void 0,autoFocus:r+e===0,value:f[r+e]||"",disabled:t.disabled,onChange:S,onKeyUp:E,onKeyDown:I,onFocus:T,onBlur:j,tabIndex:r+e+1,...y,"data-testid":`otp-input-${r+e}`,inputProps:{...y.inputProps,"aria-required":"true","aria-invalid":t.error?"true":"false","aria-label":`Digit ${r+e+1} of 6`}})},w.current[r+e])),[S,T,E,I,j,f,y,t.autoComplete,t.disabled]);return $(J,{width:"100%",sx:t.sx,children:[g("div",{style:{display:"none!important",pointerEvents:"none"},children:g(N,{inputRef:c,name:t.name,type:"text",value:f.join("")||"",sx:{pointerEvents:"none",display:"none"},inputProps:{hidden:!0}})}),$(Q,{"data-testid":"otp-input-container",...K,children:[z(0),g(V,{sx:{fontWeight:"700",fontSize:32},children:"-"}),z(3)]})]})}const _=q(Y);export{_ as OTPInput};
+"use strict";import{forwardRef as q,useRef as b,useState as F,useImperativeHandle as H,useMemo as L,useCallback as m}from"react";import{useTheme as O,FormControl as U,InputBase as G,Box as J,TextField as N,Stack as Q,Typography as V}from"@mui/material";import{v4 as X}from"uuid";import{jsx as g,jsxs as R}from"react/jsx-runtime";function Y(t,$){const i=O(),C=b(Array.from({length:6},()=>X())),[f,h]=F([]),c=b(null),a=b([]),x=b(null),[z,k]=F(!1);H($,()=>({get value(){return f.join("")},set value(e){var n;h(e.split("")),(n=t.onChange)==null||n.call(t,{target:{value:e}})},focus(){var e,n;(e=a.current[0])==null||e.click(),(n=a.current[0])==null||n.focus()},blur(){a.current.forEach(e=>e?.blur())},clear(){h([])}}),[t,f]);const P={borderColor:t.error?i.palette.error.main:i.palette.action.disabled},B={borderColor:t.error?i.palette.error.main:i.palette.text.primary},M={borderColor:t.error?i.palette.error.main:i.palette.primary.main,boxShadow:`inset 0 0 0 1px ${t.error?i.palette.error.main:i.palette.primary.main}`},K={boxSizing:"content-box",direction:"row",alignItems:"center",spacing:1.25,sx:{"& input":{textAlign:"center",fontWeight:500,height:30,[i.breakpoints.down("xs")]:{height:16,fontSize:16,pt:1,pb:1,px:1},[i.breakpoints.up("xs")]:{fontSize:28,px:1},fontSize:32,py:1.75,borderRadius:1,borderStyle:"solid",borderWidth:1,...P},...!t.disabled&&{"&:hover input":{...B}},...z&&{"& input, &:hover input":{...M}}}},y=L(()=>({inputProps:{inputMode:"numeric",pattern:"[0-9]*",autoCorrect:"off",autoCapitalize:"off",...t.disableAutoFillApps&&{"data-op-ignore":!0,"data-lpignore":!0,"data-form-type":"other","data-bwignore":!0,"data-protonpass-ignore":!0}}}),[t.disableAutoFillApps]),A=m(e=>{var n;const r=e.target.value.replace(/[^0-9]/g,"");if(r.length===6&&/^\d{6}$/.test(r)){const p=r.split("");c.current&&(c.current.value=r),(n=t.onChange)==null||n.call(t,{target:{value:r}}),a.current.forEach(v=>v?.blur()),h(p);return}const u=e.currentTarget.ownerDocument,o=a.current.findIndex(p=>p===u.activeElement),l=r.charAt(r.length-1);!l||!/^[0-9]$/.test(l)||h(p=>{var v,D;const d=[...p];if(o!==-1)d[o]=l;else{const s=d.findIndex(W=>!W);s!==-1?d[s]=l:d.length<6&&d.push(l)}const w=d.join("");if(c.current&&(c.current.value=w),w.length===6)a.current.forEach(s=>s?.blur()),(v=t.onChange)==null||v.call(t,{target:{value:w}});else{const s=o!==-1?o+1:0;s<6&&((D=a.current[s])==null||D.focus())}return d})},[t]),S=m(e=>{e.key==="Backspace"&&h(n=>{var r;const u=[...n.slice(0,-1)];c.current&&(c.current.value=u.join(""));const o=u.length;return o>=0&&o<6&&((r=a.current[o])==null||r.focus()),u})},[]),E=m(e=>{var n,r;const u=e.currentTarget.ownerDocument,o=a.current.findIndex(p=>p===u.activeElement);if(o===-1)return;let l=o;switch(e.key){case"ArrowLeft":l=Math.max(0,o-1);break;case"ArrowRight":l=Math.min(5,o+1);break;default:return}l!==o&&(e.preventDefault(),(n=a.current[l])==null||n.focus(),(r=a.current[l])==null||r.select())},[]),I=m(()=>{k(!0)},[]),T=m(()=>{x.current&&clearTimeout(x.current),x.current=setTimeout(()=>{var e;const n=(e=a.current[0])==null?void 0:e.ownerDocument;a.current.some(r=>r&&r===n?.activeElement)||k(!1)},0)},[]),j=m(e=>new Array(3).fill(void 0).map((n,r)=>g(U,{children:g(G,{inputRef:u=>a.current[r+e]=u,id:C.current[r+e],name:`otp-input-${r+e}`,autoComplete:r+e===0?t.autoComplete??"one-time-code":void 0,autoFocus:r+e===0,value:f[r+e]||"",disabled:t.disabled,onChange:A,onKeyUp:S,onKeyDown:E,onFocus:I,onBlur:T,tabIndex:r+e+1,...y,"data-testid":`otp-input-${r+e}`,inputProps:{...y.inputProps,"aria-required":"true","aria-invalid":t.error?"true":"false","aria-label":`Digit ${r+e+1} of 6`}})},C.current[r+e])),[A,I,S,E,T,f,y,t.autoComplete,t.disabled]);return R(J,{width:"100%",sx:t.sx,children:[g("div",{style:{display:"none!important",pointerEvents:"none"},children:g(N,{inputRef:c,name:t.name,type:"text",value:f.join("")||"",sx:{pointerEvents:"none",display:"none"},inputProps:{hidden:!0}})}),R(Q,{"data-testid":"otp-input-container",...K,children:[j(0),g(V,{sx:{fontWeight:"700",fontSize:32},children:"-"}),j(3)]})]})}const _=q(Y);export{_ as OTPInput};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@verifiedinc-public/shared-ui-elements",
-  "version": "9.0.0",
+  "version": "9.0.1",
   "description": "A set of UI components, utilities that is shareable with the core apps.",
   "private": false,
   "sideEffects": false,