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

Comparing version 2.0.1 to 2.0.2

dist/index.d.ts

@@ -9,5 +9,3 @@ import type { BoxProps as BoxProps_2 } from '@mui/material/Box';
     autoFocus?: boolean;
-    TextFieldsProps?: TextFieldProps & {
-        placeholder?: TextFieldProps_2['placeholder'] | ((index: number) => TextFieldProps_2['placeholder']);
-    };
+    TextFieldsProps?: TextFieldProps | ((index: number) => TextFieldProps);
     onComplete?: (value: string) => void;
@@ -25,4 +23,4 @@ validateChar?: (character: string, index: number) => boolean;
 
-declare type TextFieldProps = Omit<TextFieldProps_2, 'onChange' | 'select' | 'multiline' | 'defaultValue' | 'value' | 'autoFocus' | 'placeholder'>;
+declare type TextFieldProps = Omit<TextFieldProps_2, 'onChange' | 'select' | 'multiline' | 'defaultValue' | 'value' | 'autoFocus'>;
 
 export { }

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

@@ -1,13 +0,13 @@
-import { jsx as k } from "react/jsx-runtime";
-import d from "react";
-import { styled as Z } from "@mui/material/styles";
-import v from "@mui/material/TextField";
-import ee from "@mui/material/Box";
-const te = Z(v)`
+import { jsx as E } from "react/jsx-runtime";
+import g from "react";
+import { styled as W } from "@mui/material/styles";
+import q from "@mui/material/TextField";
+import z from "@mui/material/Box";
+const G = W(q)`
   input {
     text-align: center;
   }
-`, ne = {
-  TextFieldStyled: te
-}, re = (n) => /* @__PURE__ */ k(ne.TextFieldStyled, { ...n }), y = {
+`, J = {
+  TextFieldStyled: G
+}, Q = (n) => /* @__PURE__ */ E(J.TextFieldStyled, { ...n }), B = {
   left: "ArrowLeft",
@@ -19,27 +19,27 @@ right: "ArrowRight",
 };
-function ae(n, l) {
+function U(n, l) {
   return n <= 0 ? [] : Array.from({ length: n }, l);
 }
-function le(n, l, u) {
-  return n.map((c, g) => l === g ? u : c);
+function X(n, l, f) {
+  return n.map((u, x) => l === x ? f : u);
 }
-function M(n) {
+function P(n) {
   return n.join("");
 }
-function N(n, l) {
+function M(n, l) {
   return [...n, l];
 }
-function oe(n, l, u) {
+function Z(n, l, f) {
   return n.reduce(
-    (c, g, h) => {
-      const { characters: x, restArrayMerged: p } = c;
-      if (h < u)
+    (u, x, C) => {
+      const { characters: y, restArrayMerged: d } = u;
+      if (C < f)
         return {
-          restArrayMerged: p,
-          characters: N(x, g)
+          restArrayMerged: d,
+          characters: M(y, x)
         };
-      const [F, ...D] = p;
+      const [D, ...V] = d;
       return {
-        restArrayMerged: D,
-        characters: N(x, F || "")
+        restArrayMerged: V,
+        characters: M(y, D || "")
       };
@@ -53,55 +53,47 @@ },
 }
-function se(n) {
+function v(n) {
   return n.split("");
 }
-function b(n) {
-  const l = d.useRef(() => {
+function N(n) {
+  const l = g.useRef(() => {
     throw new Error("Cannot call an event handler while rendering.");
   });
-  return d.useInsertionEffect(() => {
+  return g.useInsertionEffect(() => {
     l.current = n;
-  }), d.useCallback((...u) => l.current?.(...u), []);
+  }), g.useCallback((...f) => l.current?.(...f), []);
 }
-const ce = () => !0, he = d.forwardRef(
+const ee = () => !0, oe = g.forwardRef(
   (n, l) => {
     const {
-      value: u = "",
-      length: c = 4,
-      autoFocus: g = !1,
-      onChange: h,
-      TextFieldsProps: x,
-      onComplete: p,
-      validateChar: F = ce,
-      className: D,
-      onBlur: K,
-      ...j
-    } = n, $ = d.useRef(u), A = b(p), m = b((e) => {
-      const t = e.slice(0, c);
+      value: f = "",
+      length: u = 4,
+      autoFocus: x = !1,
+      onChange: C,
+      TextFieldsProps: y,
+      onComplete: d,
+      validateChar: D = ee,
+      className: V,
+      onBlur: b,
+      ...K
+    } = n, j = g.useRef(f), k = N(d), I = N((e) => {
+      const t = e.slice(0, u);
       return {
-        isCompleted: t.length === c,
+        isCompleted: t.length === u,
         finalValue: t
       };
-    }), {
-      onPaste: Y,
-      onFocus: _,
-      onKeyDown: H,
-      className: L,
-      placeholder: V,
-      onBlur: W,
-      ...q
-    } = x || {};
-    d.useEffect(() => {
-      const { isCompleted: e, finalValue: t } = m(
-        $.current
+    });
+    g.useEffect(() => {
+      const { isCompleted: e, finalValue: t } = I(
+        j.current
       );
-      e && A(t);
-    }, [c, A, m]);
-    const i = ae(
-      c,
+      e && k(t);
+    }, [u, k, I]);
+    const p = U(
+      u,
       (e, t) => ({
-        character: u[t] || "",
-        inputRef: d.createRef()
+        character: f[t] || "",
+        inputRef: g.createRef()
       })
-    ), O = (e) => i.findIndex(({ inputRef: t }) => t.current === e), T = () => i.map(({ character: e }) => e), R = (e, t) => {
-      const r = le(
+    ), A = (e) => p.findIndex(({ inputRef: t }) => t.current === e), T = () => p.map(({ character: e }) => e), O = (e, t) => {
+      const a = X(
         T(),
@@ -111,62 +103,58 @@ e,
       );
-      return M(r);
-    }, z = (e) => {
-      i[e]?.inputRef.current?.focus();
-    }, o = (e) => {
-      i[e]?.inputRef.current?.select();
-    }, S = (e) => {
-      e + 1 !== c && (i[e + 1].character ? o(e + 1) : z(e + 1));
-    }, P = (e, t) => typeof F != "function" ? !0 : F(e, t), G = (e) => {
-      const t = O(e.target);
+      return P(a);
+    }, $ = (e) => {
+      p[e]?.inputRef.current?.focus();
+    }, c = (e) => {
+      p[e]?.inputRef.current?.select();
+    }, R = (e) => {
+      e + 1 !== u && (p[e + 1].character ? c(e + 1) : $(e + 1));
+    }, S = (e, t) => typeof D != "function" ? !0 : D(e, t), Y = (e) => {
+      const t = A(e.target);
       if (t === 0 && e.target.value.length > 1) {
-        const { finalValue: I, isCompleted: w } = m(
+        const { finalValue: m, isCompleted: F } = I(
           e.target.value
         );
-        h?.(I), w && p?.(I), o(I.length - 1);
+        C?.(m), F && d?.(m), c(m.length - 1);
         return;
       }
-      const r = e.target.value[0] || "";
-      let s = r;
-      s && !P(s, t) && (s = "");
-      const a = R(t, s);
-      h?.(a);
-      const { isCompleted: C, finalValue: f } = m(a);
-      C && p?.(f), s !== "" ? a.length - 1 < t ? o(a.length) : S(t) : r === "" && a.length <= t && o(t - 1);
-    }, J = (e) => {
-      e.preventDefault(), e.target.select(), _?.(e);
-    }, Q = (e) => {
-      const t = e.target, r = t.selectionStart, s = t.selectionEnd, a = O(t), C = r === 0 && s === 0;
+      const a = e.target.value[0] || "";
+      let o = a;
+      o && !S(o, t) && (o = "");
+      const s = O(t, o);
+      C?.(s);
+      const { isCompleted: h, finalValue: i } = I(s);
+      h && d?.(i), o !== "" ? s.length - 1 < t ? c(s.length) : R(t) : a === "" && s.length <= t && c(t - 1);
+    }, _ = (e) => {
+      const t = e.target, a = t.selectionStart, o = t.selectionEnd, s = A(t), h = a === 0 && o === 0;
       if (t.value === e.key)
-        e.preventDefault(), S(a);
-      else if (y.backspace === e.key) {
+        e.preventDefault(), R(s);
+      else if (B.backspace === e.key) {
         if (!t.value)
-          e.preventDefault(), o(a - 1);
-        else if (C) {
+          e.preventDefault(), c(s - 1);
+        else if (h) {
           e.preventDefault();
-          const f = R(a, "");
-          h?.(f), f.length <= a && o(a - 1);
+          const i = O(s, "");
+          C?.(i), i.length <= s && c(s - 1);
         }
       } else
-        y.left === e.key ? (e.preventDefault(), o(a - 1)) : y.right === e.key ? (e.preventDefault(), o(a + 1)) : y.home === e.key ? (e.preventDefault(), o(0)) : y.end === e.key && (e.preventDefault(), o(i.length - 1));
-      H?.(e);
-    }, U = (e) => {
-      e.preventDefault();
-      const t = e.clipboardData.getData("text/plain"), r = e.target, s = i.findIndex(
-        ({ character: B, inputRef: E }) => B === "" || E.current === r
-      ), a = T(), C = oe(
-        a,
-        se(t),
-        s
-      ).map((B, E) => P(B, E) ? B : ""), f = M(C);
-      h?.(f);
-      const { isCompleted: I, finalValue: w } = m(f);
-      I ? (p?.(w), o(c - 1)) : o(f.length), Y?.(e);
-    }, X = (e) => {
-      if (W?.(e), !i.some(({ inputRef: r }) => r.current === e.relatedTarget)) {
-        const { isCompleted: r, finalValue: s } = m(u);
-        K?.(s, r);
+        B.left === e.key ? (e.preventDefault(), c(s - 1)) : B.right === e.key ? (e.preventDefault(), c(s + 1)) : B.home === e.key ? (e.preventDefault(), c(0)) : B.end === e.key && (e.preventDefault(), c(p.length - 1));
+    }, H = (e) => {
+      const t = e.clipboardData.getData("text/plain"), a = e.target, o = p.findIndex(
+        ({ character: r, inputRef: w }) => r === "" || w.current === a
+      ), s = T(), h = Z(
+        s,
+        v(t),
+        o
+      ).map((r, w) => S(r, w) ? r : ""), i = P(h);
+      C?.(i);
+      const { isCompleted: m, finalValue: F } = I(i);
+      m ? (d?.(F), c(u - 1)) : c(i.length);
+    }, L = (e) => {
+      if (!p.some(({ inputRef: a }) => a.current === e.relatedTarget)) {
+        const { isCompleted: a, finalValue: o } = I(f);
+        b?.(o, a);
       }
     };
-    return /* @__PURE__ */ k(
-      ee,
+    return /* @__PURE__ */ E(
+      z,
       {
@@ -177,22 +165,39 @@ display: "flex",
         ref: l,
-        className: `MuiOtpInput-Box ${D || ""}`,
-        ...j,
-        children: i.map(({ character: e, inputRef: t }, r) => /* @__PURE__ */ k(
-          re,
-          {
-            autoFocus: g ? r === 0 : !1,
-            autoComplete: "one-time-code",
-            value: e,
-            inputRef: t,
-            className: `MuiOtpInput-TextField MuiOtpInput-TextField-${r + 1} ${L || ""}`,
-            onPaste: U,
-            onFocus: J,
-            onChange: G,
-            onKeyDown: Q,
-            onBlur: X,
-            placeholder: typeof V == "function" ? V(r) : V,
-            ...q
-          },
-          r
-        ))
+        className: `MuiOtpInput-Box ${V || ""}`,
+        ...K,
+        children: p.map(({ character: e, inputRef: t }, a) => {
+          const {
+            onPaste: o,
+            onFocus: s,
+            onKeyDown: h,
+            className: i,
+            onBlur: m,
+            ...F
+          } = typeof y == "function" ? y(a) || {} : y || {};
+          return /* @__PURE__ */ E(
+            Q,
+            {
+              autoFocus: x ? a === 0 : !1,
+              autoComplete: "one-time-code",
+              value: e,
+              inputRef: t,
+              className: `MuiOtpInput-TextField MuiOtpInput-TextField-${a + 1} ${i || ""}`,
+              onPaste: (r) => {
+                r.preventDefault(), H(r), o?.(r);
+              },
+              onFocus: (r) => {
+                r.preventDefault(), r.target.select(), s?.(r);
+              },
+              onChange: Y,
+              onKeyDown: (r) => {
+                _(r), h?.(r);
+              },
+              onBlur: (r) => {
+                m?.(r), L(r);
+              },
+              ...F
+            },
+            a
+          );
+        })
       }
@@ -203,3 +208,3 @@ );
 export {
-  he as MuiOtpInput
+  oe as MuiOtpInput
 };

package.json

@@ -10,3 +10,3 @@ {
   "homepage": "https://viclafouch.github.io/mui-otp-input",
-  "version": "2.0.1",
+  "version": "2.0.2",
   "files": [
@@ -72,38 +72,36 @@ "dist"
   "dependencies": {
-    "@emotion/react": "^11.5.0",
-    "@emotion/styled": "^11.3.0",
-    "@mui/material": "^5.0.0",
-    "@types/react": "^18.0.0",
-    "react": "^18.0.0",
-    "react-dom": "^18.0.0"
+    "@emotion/react": "^11.11.3",
+    "@emotion/styled": "^11.11.0",
+    "@mui/material": "^5.15.10",
+    "@types/react": "^18.2.55",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
   },
   "devDependencies": {
-    "@storybook/addon-actions": "^7.1.1",
-    "@storybook/addon-essentials": "^7.1.1",
-    "@storybook/addon-interactions": "^7.1.1",
-    "@storybook/addon-links": "^7.1.1",
-    "@storybook/react": "^7.1.1",
-    "@storybook/react-vite": "^7.1.1",
-    "@storybook/testing-library": "^0.2.0",
-    "@testing-library/jest-dom": "^5.17.0",
-    "@testing-library/react": "^14.0.0",
-    "@testing-library/user-event": "^14.4.3",
-    "@types/node": "^20.4.4",
-    "@types/testing-library__jest-dom": "^5.14.9",
-    "@viclafouch/eslint-config-viclafouch": "^4.1.1",
-    "@vitejs/plugin-react": "^4.0.3",
-    "@vitest/coverage-c8": "^0.33.0",
-    "eslint": "^8.45.0",
-    "husky": "^8.0.3",
-    "jsdom": "^22.1.0",
-    "prettier": "^3.0.0",
+    "@storybook/addon-actions": "^7.6.15",
+    "@storybook/addon-essentials": "^7.6.15",
+    "@storybook/addon-interactions": "^7.6.15",
+    "@storybook/addon-links": "^7.6.15",
+    "@storybook/react": "^7.6.15",
+    "@storybook/react-vite": "^7.6.15",
+    "@storybook/testing-library": "^0.2.2",
+    "@testing-library/jest-dom": "^6.4.2",
+    "@testing-library/react": "^14.2.1",
+    "@testing-library/user-event": "^14.5.2",
+    "@types/node": "^20.11.17",
+    "@viclafouch/eslint-config-viclafouch": "^4.6.0",
+    "@vitejs/plugin-react": "^4.2.1",
+    "eslint": "^8.56.0",
+    "husky": "^9.0.10",
+    "jsdom": "^24.0.0",
+    "prettier": "^3.2.5",
     "rollup-plugin-peer-deps-external": "^2.2.4",
     "standard-version": "^9.5.0",
-    "storybook": "^7.1.1",
-    "typescript": "^5.1.6",
-    "vite": "^4.4.7",
-    "vite-aliases": "^0.11.2",
-    "vite-plugin-dts": "^3.3.1",
-    "vitest": "^0.33.0"
+    "storybook": "^7.6.15",
+    "typescript": "^5.3.3",
+    "vite": "^5.1.1",
+    "vite-aliases": "^0.11.5",
+    "vite-plugin-dts": "^3.7.2",
+    "vitest": "^1.2.2"
   }
 }

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

11210

increased by0.18%

Dev dependency count

25

decreased by-7.41%

Lines of code

223

increased by1.36%

Worsened metrics

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• Updated@emotion/react@^11.11.3

• Updated@emotion/styled@^11.11.0

• Updated@mui/material@^5.15.10

• Updated@types/react@^18.2.55

• Updatedreact@^18.2.0

• Updatedreact-dom@^18.2.0