mui-one-time-password-input - npm Package Compare versions

Comparing version 1.0.4 to 1.1.0

dist/index.types.d.ts

 import type { BoxProps as MuiBoxProps } from '@mui/material/Box';
 import type { TextFieldProps as MuiTextFieldProps } from '@mui/material/TextField';
-declare type TextFieldProps = Omit<MuiTextFieldProps, 'onChange' | 'select' | 'multiline' | 'defaultValue' | 'value'>;
+declare type TextFieldProps = Omit<MuiTextFieldProps, 'onChange' | 'select' | 'multiline' | 'defaultValue' | 'value' | 'autoFocus'>;
 declare type BoxProps = Omit<MuiBoxProps, 'onChange'>;
@@ -8,2 +8,3 @@ export interface BaseMuiOtpInputProps {
     length?: number;
+    autoFocus?: boolean;
     TextFieldsProps?: TextFieldProps;
@@ -10,0 +11,0 @@ onComplete?: (value: string) => void;

dist/mui-one-time-password-input.es.js

 import T from "react";
-import v from "@mui/material/Box";
-import { styled as L } from "@mui/material/styles";
-import W from "@mui/material/TextField";
+import L from "@mui/material/Box";
+import { styled as W } from "@mui/material/styles";
+import q from "@mui/material/TextField";
 import { jsx as C } from "react/jsx-runtime";
-const q = L(W)`
+const z = W(q)`
   input {
     text-align: center;
   }
-`, z = {
-  TextFieldStyled: q
-}, G = (n) => /* @__PURE__ */ C(z.TextFieldStyled, {
+`, G = {
+  TextFieldStyled: z
+}, H = (n) => /* @__PURE__ */ C(G.TextFieldStyled, {
   ...n
-}), F = {
+}), I = {
   left: "ArrowLeft",
@@ -19,7 +19,7 @@ right: "ArrowRight",
 };
-function H(n, o) {
+function J(n, o) {
   return n <= 0 ? [] : Array.from({ length: n }, o);
 }
-function J(n, o, i) {
-  return n.map((a, s) => o === s ? i : a);
+function Q(n, o, l) {
+  return n.map((a, i) => o === i ? l : a);
 }
@@ -32,15 +32,15 @@ function w(n) {
 }
-function Q(n, o, i) {
+function U(n, o, l) {
   return n.reduce(
-    (a, s, d) => {
-      const { characters: p, restArrayMerged: f } = a;
-      if (d < i)
+    (a, i, f) => {
+      const { characters: d, restArrayMerged: p } = a;
+      if (f < l)
         return {
-          restArrayMerged: f,
-          characters: B(p, s)
+          restArrayMerged: p,
+          characters: B(d, i)
         };
-      const [h, ...g] = f;
+      const [h, ...g] = p;
       return {
         restArrayMerged: g,
-        characters: B(p, h || "")
+        characters: B(d, h || "")
       };
@@ -54,60 +54,61 @@ },
 }
-function U(n) {
+function X(n) {
   return n.split("");
 }
-const X = T.forwardRef((n, o) => {
+const Z = T.forwardRef((n, o) => {
   const {
-    value: i,
+    value: l,
     length: a,
-    onChange: s,
+    autoFocus: i,
+    onChange: f,
     TextFieldsProps: d,
     onComplete: p,
-    validateChar: f,
-    className: h,
-    ...g
+    validateChar: h,
+    className: g,
+    ...P
   } = n, {
-    onPaste: P,
-    onFocus: R,
-    onKeyDown: S,
-    className: k,
-    ...M
-  } = d || {}, u = H(a, (e, r) => ({
-    character: i[r] || "",
+    onPaste: R,
+    onFocus: S,
+    onKeyDown: k,
+    className: M,
+    ...E
+  } = d || {}, c = J(a, (e, r) => ({
+    character: l[r] || "",
     inputRef: T.createRef()
-  })), m = (e) => u.findIndex(({
+  })), m = (e) => c.findIndex(({
     inputRef: r
-  }) => r.current === e), D = () => u.map(({
+  }) => r.current === e), D = () => c.map(({
     character: e
-  }) => e), E = (e, r) => {
-    const t = J(D(), e, r);
+  }) => e), N = (e, r) => {
+    const t = Q(D(), e, r);
     return w(t);
   }, x = (e) => {
-    u[e]?.inputRef.current?.focus();
-  }, l = (e) => {
-    u[e]?.inputRef.current?.select();
+    c[e]?.inputRef.current?.focus();
+  }, u = (e) => {
+    c[e]?.inputRef.current?.select();
   }, y = (e) => {
-    e + 1 !== a && (u[e + 1].character ? l(e + 1) : x(e + 1));
-  }, N = (e) => {
-    e > 0 && l(e - 1);
+    e + 1 !== a && (c[e + 1].character ? u(e + 1) : x(e + 1));
   }, K = (e) => {
+    e > 0 && u(e - 1);
+  }, V = (e) => {
     const r = e.target.value[0] || "", t = m(e.target);
-    if (typeof f == "function" && !f(r, t))
+    if (typeof h == "function" && !h(r, t))
       return;
-    const c = E(t, r);
-    s?.(c), c.length === a && p?.(c), r !== "" ? c.length < a ? y(c.length - 1) : y(t) : c[t] ? l(t) : N(t);
-  }, V = (e) => {
-    e.preventDefault(), e.target.select(), R?.(e);
+    const s = N(t, r);
+    f?.(s), s.length === a && p?.(s), r !== "" ? s.length < a ? y(s.length - 1) : y(t) : s[t] ? u(t) : K(t);
   }, b = (e) => {
+    e.preventDefault(), e.target.select(), S?.(e);
+  }, j = (e) => {
     const r = e.target, t = m(r);
-    r.value === e.key ? (e.preventDefault(), y(t)) : !r.value && F.backspace === e.key || F.left === e.key ? (e.preventDefault(), l(t - 1)) : F.right === e.key && (e.preventDefault(), l(t + 1)), S?.(e);
-  }, j = (e) => {
+    r.value === e.key ? (e.preventDefault(), y(t)) : !r.value && I.backspace === e.key || I.left === e.key ? (e.preventDefault(), u(t - 1)) : I.right === e.key && (e.preventDefault(), u(t + 1)), k?.(e);
+  }, $ = (e) => {
     e.preventDefault();
-    const r = e.target, t = e.clipboardData.getData("text/plain"), c = m(r), $ = D(), A = Q($, U(t), c), O = A.findIndex((Y, _) => _ > c && Y === ""), I = w(A);
-    if (s?.(I), I.length === a) {
-      p?.(I), x(a - 1);
+    const r = e.target, t = e.clipboardData.getData("text/plain"), s = m(r), Y = D(), A = U(Y, X(t), s), O = A.findIndex((_, v) => v > s && _ === ""), F = w(A);
+    if (f?.(F), F.length === a) {
+      p?.(F), x(a - 1);
       return;
     }
-    O !== -1 && x(O), P?.(e);
+    O !== -1 && x(O), R?.(e);
   };
-  return /* @__PURE__ */ C(v, {
+  return /* @__PURE__ */ C(L, {
     display: "flex",
@@ -117,23 +118,25 @@ gap: "20px",
     ref: o,
-    className: `MuiOtpInput-Box ${h || ""}`,
-    ...g,
-    children: u.map(({
+    className: `MuiOtpInput-Box ${g || ""}`,
+    ...P,
+    children: c.map(({
       character: e,
       inputRef: r
-    }, t) => /* @__PURE__ */ C(G, {
+    }, t) => /* @__PURE__ */ C(H, {
+      autoFocus: i ? t === 0 : !1,
       autoComplete: "one-time-code",
       value: e,
       inputRef: r,
-      className: `MuiOtpInput-TextField MuiOtpInput-TextField-${t + 1} ${k || ""}`,
-      onPaste: j,
-      onFocus: V,
-      onChange: K,
-      onKeyDown: b,
-      ...M
+      className: `MuiOtpInput-TextField MuiOtpInput-TextField-${t + 1} ${M || ""}`,
+      onPaste: $,
+      onFocus: b,
+      onChange: V,
+      onKeyDown: j,
+      ...E
     }, t))
   });
 });
-X.defaultProps = {
+Z.defaultProps = {
   value: "",
   length: 4,
+  autoFocus: !1,
   validateChar: () => !0,
@@ -147,3 +150,3 @@ onChange: () => {
 export {
-  X as MuiOtpInput
+  Z as MuiOtpInput
 };

dist/mui-one-time-password-input.umd.js

@@ -1,5 +0,5 @@
-(function(a,d){typeof exports=="object"&&typeof module<"u"?d(exports,require("react"),require("@mui/material/Box"),require("@mui/material/styles"),require("@mui/material/TextField"),require("react/jsx-runtime")):typeof define=="function"&&define.amd?define(["exports","react","@mui/material/Box","@mui/material/styles","@mui/material/TextField","react/jsx-runtime"],d):(a=typeof globalThis<"u"?globalThis:a||self,d(a["mui-one-time-password-input"]={},a.React,a.Box,a.styles,a.TextField,a.jsxRuntime))})(this,function(a,d,j,R,k,m){"use strict";const x=t=>t&&typeof t=="object"&&"default"in t?t:{default:t},O=x(d),E=x(j),N=x(k),q={TextFieldStyled:R.styled(N.default)`
+(function(a,l){typeof exports=="object"&&typeof module<"u"?l(exports,require("react"),require("@mui/material/Box"),require("@mui/material/styles"),require("@mui/material/TextField"),require("react/jsx-runtime")):typeof define=="function"&&define.amd?define(["exports","react","@mui/material/Box","@mui/material/styles","@mui/material/TextField","react/jsx-runtime"],l):(a=typeof globalThis<"u"?globalThis:a||self,l(a["mui-one-time-password-input"]={},a.React,a.Box,a.styles,a.TextField,a.jsxRuntime))})(this,function(a,l,j,R,k,y){"use strict";const g=t=>t&&typeof t=="object"&&"default"in t?t:{default:t},O=g(l),E=g(j),N=g(k),q={TextFieldStyled:R.styled(N.default)`
   input {
     text-align: center;
   }
-`},K=t=>m.jsx(q.TextFieldStyled,{...t}),y={left:"ArrowLeft",right:"ArrowRight",backspace:"Backspace"};function V(t,s){return t<=0?[]:Array.from({length:t},s)}function v(t,s,f){return t.map((u,c)=>s===c?f:u)}function A(t){return t.join("")}function S(t,s){return[...t,s]}function $(t,s,f){return t.reduce((u,c,g)=>{const{characters:p,restArrayMerged:h}=u;if(g<f)return{restArrayMerged:h,characters:S(p,c)};const[F,...I]=h;return{restArrayMerged:I,characters:S(p,F||"")}},{restArrayMerged:s,characters:[]}).characters}function b(t){return t.split("")}const _=O.default.forwardRef((t,s)=>{const{value:f,length:u,onChange:c,TextFieldsProps:g,onComplete:p,validateChar:h,className:F,...I}=t,{onPaste:L,onFocus:Y,onKeyDown:W,className:z,...G}=g||{},o=V(u,(e,n)=>({character:f[n]||"",inputRef:O.default.createRef()})),C=e=>o.findIndex(({inputRef:n})=>n.current===e),w=()=>o.map(({character:e})=>e),H=(e,n)=>{const r=v(w(),e,n);return A(r)},T=e=>{o[e]?.inputRef.current?.focus()},l=e=>{o[e]?.inputRef.current?.select()},D=e=>{e+1!==u&&(o[e+1].character?l(e+1):T(e+1))},J=e=>{e>0&&l(e-1)},Q=e=>{const n=e.target.value[0]||"",r=C(e.target);if(typeof h=="function"&&!h(n,r))return;const i=H(r,n);c?.(i),i.length===u&&p?.(i),n!==""?i.length<u?D(i.length-1):D(r):i[r]?l(r):J(r)},U=e=>{e.preventDefault(),e.target.select(),Y?.(e)},X=e=>{const n=e.target,r=C(n);n.value===e.key?(e.preventDefault(),D(r)):!n.value&&y.backspace===e.key||y.left===e.key?(e.preventDefault(),l(r-1)):y.right===e.key&&(e.preventDefault(),l(r+1)),W?.(e)},Z=e=>{e.preventDefault();const n=e.target,r=e.clipboardData.getData("text/plain"),i=C(n),ee=w(),M=$(ee,b(r),i),P=M.findIndex((te,re)=>re>i&&te===""),B=A(M);if(c?.(B),B.length===u){p?.(B),T(u-1);return}P!==-1&&T(P),L?.(e)};return m.jsx(E.default,{display:"flex",gap:"20px",alignItems:"center",ref:s,className:`MuiOtpInput-Box ${F||""}`,...I,children:o.map(({character:e,inputRef:n},r)=>m.jsx(K,{autoComplete:"one-time-code",value:e,inputRef:n,className:`MuiOtpInput-TextField MuiOtpInput-TextField-${r+1} ${z||""}`,onPaste:Z,onFocus:U,onChange:Q,onKeyDown:X,...G},r))})});_.defaultProps={value:"",length:4,validateChar:()=>!0,onChange:()=>{},onComplete:()=>{},TextFieldsProps:{}},a.MuiOtpInput=_,Object.defineProperties(a,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});
+`},K=t=>y.jsx(q.TextFieldStyled,{...t}),F={left:"ArrowLeft",right:"ArrowRight",backspace:"Backspace"};function V(t,s){return t<=0?[]:Array.from({length:t},s)}function v(t,s,f){return t.map((u,p)=>s===p?f:u)}function A(t){return t.join("")}function S(t,s){return[...t,s]}function $(t,s,f){return t.reduce((u,p,h)=>{const{characters:m,restArrayMerged:d}=u;if(h<f)return{restArrayMerged:d,characters:S(m,p)};const[x,...I]=d;return{restArrayMerged:I,characters:S(m,x||"")}},{restArrayMerged:s,characters:[]}).characters}function b(t){return t.split("")}const _=O.default.forwardRef((t,s)=>{const{value:f,length:u,autoFocus:p,onChange:h,TextFieldsProps:m,onComplete:d,validateChar:x,className:I,...L}=t,{onPaste:Y,onFocus:W,onKeyDown:z,className:G,...H}=m||{},c=V(u,(e,n)=>({character:f[n]||"",inputRef:O.default.createRef()})),C=e=>c.findIndex(({inputRef:n})=>n.current===e),w=()=>c.map(({character:e})=>e),J=(e,n)=>{const r=v(w(),e,n);return A(r)},T=e=>{c[e]?.inputRef.current?.focus()},i=e=>{c[e]?.inputRef.current?.select()},D=e=>{e+1!==u&&(c[e+1].character?i(e+1):T(e+1))},Q=e=>{e>0&&i(e-1)},U=e=>{const n=e.target.value[0]||"",r=C(e.target);if(typeof x=="function"&&!x(n,r))return;const o=J(r,n);h?.(o),o.length===u&&d?.(o),n!==""?o.length<u?D(o.length-1):D(r):o[r]?i(r):Q(r)},X=e=>{e.preventDefault(),e.target.select(),W?.(e)},Z=e=>{const n=e.target,r=C(n);n.value===e.key?(e.preventDefault(),D(r)):!n.value&&F.backspace===e.key||F.left===e.key?(e.preventDefault(),i(r-1)):F.right===e.key&&(e.preventDefault(),i(r+1)),z?.(e)},ee=e=>{e.preventDefault();const n=e.target,r=e.clipboardData.getData("text/plain"),o=C(n),te=w(),M=$(te,b(r),o),P=M.findIndex((re,ne)=>ne>o&&re===""),B=A(M);if(h?.(B),B.length===u){d?.(B),T(u-1);return}P!==-1&&T(P),Y?.(e)};return y.jsx(E.default,{display:"flex",gap:"20px",alignItems:"center",ref:s,className:`MuiOtpInput-Box ${I||""}`,...L,children:c.map(({character:e,inputRef:n},r)=>y.jsx(K,{autoFocus:p?r===0:!1,autoComplete:"one-time-code",value:e,inputRef:n,className:`MuiOtpInput-TextField MuiOtpInput-TextField-${r+1} ${G||""}`,onPaste:ee,onFocus:X,onChange:U,onKeyDown:Z,...H},r))})});_.defaultProps={value:"",length:4,autoFocus:!1,validateChar:()=>!0,onChange:()=>{},onComplete:()=>{},TextFieldsProps:{}},a.MuiOtpInput=_,Object.defineProperties(a,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});

package.json

@@ -10,3 +10,3 @@ {
   "homepage": "https://viclafouch.github.io/mui-otp-input",
-  "version": "1.0.4",
+  "version": "1.1.0",
   "files": [
@@ -13,0 +13,0 @@ "dist"

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

19417

increased by0.82%

Lines of code

215

increased by2.38%

No dependency changes