@evervault/react - npm Package Compare versions

Comparing version 2.7.0 to 2.8.0

dist/evervault-react.main.d.ts

@@ -16,3 +16,3 @@ import { events } from 'events';
 
-export declare function Card({ theme, fields, autoFocus, translations, onSwipe, onReady, onError, onChange, onComplete, }: CardProps): React_2.JSX.Element;
+export declare function Card({ theme, fields, autoFocus, translations, onSwipe, onReady, onError, onChange, onComplete, autoComplete, }: CardProps): React_2.JSX.Element;
 
@@ -31,2 +31,8 @@ declare class Card_2 {
             acceptedBrands: CardBrandName[] | undefined;
+            autoComplete: {
+                name?: boolean;
+                number?: boolean;
+                expiry?: boolean;
+                cvc?: boolean;
+            } | undefined;
         };
@@ -95,2 +101,8 @@ };
     translations?: Partial<CardTranslations>;
+    autoComplete?: {
+        name?: boolean;
+        number?: boolean;
+        expiry?: boolean;
+        cvc?: boolean;
+    };
 }
@@ -128,2 +140,3 @@
     onComplete?: (data: CardPayload) => void;
+    autoComplete?: CardOptions["autoComplete"];
 }
@@ -1068,4 +1081,4 @@
 extends EvervaultFrameClientMessages {
-    EV_SUCCESS: undefined;
-    EV_FAILURE: undefined;
+    EV_SUCCESS: string | undefined | null;
+    EV_FAILURE: string | undefined | null;
     EV_CANCEL: undefined;
@@ -1072,0 +1085,0 @@ }

dist/evervault-react.main.js

 "use client";
-import * as d from "react";
-import { createContext as C, useContext as j, useState as S, useRef as p, useLayoutEffect as y, useEffect as g, useMemo as B, useCallback as L } from "react";
-function _(o) {
+import * as u from "react";
+import { createContext as C, useContext as _, useState as S, useRef as m, useLayoutEffect as y, useEffect as g, useMemo as P, useCallback as B } from "react";
+function D(o) {
   return (n) => ({
@@ -86,3 +86,3 @@ styles: {
 }
-function D(o) {
+function M(o) {
   return (n) => ({
@@ -173,3 +173,3 @@ styles: {
 }
-function M(o) {
+function O(o) {
   return (n) => ({
@@ -309,16 +309,16 @@ styles: {
 }
-const G = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+const J = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
-  clean: _,
-  material: D,
-  minimal: M
+  clean: D,
+  material: M,
+  minimal: O
 }, Symbol.toStringTag, { value: "Module" })), R = C(null);
-function x() {
+function b() {
   if (typeof window > "u")
     return null;
-  if (typeof d.useContext != "function")
+  if (typeof u.useContext != "function")
     throw new Error(
       "You must use React >= 18.0 in order to use useEvervault()"
     );
-  const o = d.useContext(R);
+  const o = u.useContext(R);
   if (!o)
@@ -330,7 +330,7 @@ throw new Error(
 }
-const P = C(
+const I = C(
   void 0
 );
-function I() {
-  const o = j(P);
+function T() {
+  const o = _(I);
   if (!o)
@@ -340,36 +340,36 @@ throw new Error("Reveal consumers must be used within a Reveal component");
 }
-function O({
+function Y({
   path: o,
   onCopy: n,
-  ...t
+  ...r
 }) {
-  const [i, f] = S(null), l = p(null), { reveal: e } = I();
-  return d.useEffect(() => {
+  const [i, f] = S(null), d = m(null), { reveal: e } = T();
+  return u.useEffect(() => {
     if (!(!i || !n))
       return i == null ? void 0 : i.on("copy", n);
   }, [i, n]), y(() => {
-    if ((!l.current || i) ?? !e)
+    if ((!d.current || i) ?? !e)
       return;
-    const a = e == null ? void 0 : e.copyButton(o, t);
-    a.mount(l.current), f(a);
-  }, [e, o, t, i]), /* @__PURE__ */ d.createElement("div", { ref: l });
+    const a = e == null ? void 0 : e.copyButton(o, r);
+    a.mount(d.current), f(a);
+  }, [e, o, r, i]), /* @__PURE__ */ u.createElement("div", { ref: d });
 }
-function Y({ path: o, theme: n, format: t }) {
-  const [i, f] = S(null), l = p(null), { reveal: e } = I();
+function U({ path: o, theme: n, format: r }) {
+  const [i, f] = S(null), d = m(null), { reveal: e } = T();
   return y(() => {
-    if ((!l.current || i) ?? !e)
+    if ((!d.current || i) ?? !e)
       return;
     const a = e.text(o, {
       theme: n,
-      format: t
+      format: r
     });
-    a.mount(l.current), f(a);
-  }, [e, o, n, t, i]), /* @__PURE__ */ d.createElement("div", { ref: l });
+    a.mount(d.current), f(a);
+  }, [e, o, n, r, i]), /* @__PURE__ */ u.createElement("div", { ref: d });
 }
-function T({ request: o, children: n, onReady: t, onError: i }) {
-  const f = p(!1), l = x(), [e, a] = S(null), c = p(null);
-  return d.useEffect(() => {
-    if (!(!e || !t))
-      return e == null ? void 0 : e.on("ready", t);
-  }, [e, t]), d.useEffect(() => {
+function j({ request: o, children: n, onReady: r, onError: i }) {
+  const f = m(!1), d = b(), [e, a] = S(null), c = m(null);
+  return u.useEffect(() => {
+    if (!(!e || !r))
+      return e == null ? void 0 : e.on("ready", r);
+  }, [e, r]), u.useEffect(() => {
     if (!(!e || !i))
@@ -382,49 +382,51 @@ return e == null ? void 0 : e.on("error", i);
       f.current = !0;
-      const r = await l;
-      if (!r)
+      const t = await d;
+      if (!t)
         return;
-      const v = r.ui.reveal(o);
-      a(v);
+      const p = t.ui.reveal(o);
+      a(p);
     }
     s().catch(console.error);
-  }, [e, o, l]), /* @__PURE__ */ d.createElement(P.Provider, { value: { reveal: e } }, /* @__PURE__ */ d.createElement(d.Fragment, null, /* @__PURE__ */ d.createElement("div", { ref: c }), n));
+  }, [e, o, d]), /* @__PURE__ */ u.createElement(I.Provider, { value: { reveal: e } }, /* @__PURE__ */ u.createElement(u.Fragment, null, /* @__PURE__ */ u.createElement("div", { ref: c }), n));
 }
-T.Text = Y;
-T.CopyButton = O;
-function J({
+j.Text = U;
+j.CopyButton = Y;
+function K({
   theme: o,
   fields: n,
-  autoFocus: t,
+  autoFocus: r,
   translations: i,
   onSwipe: f,
-  onReady: l,
+  onReady: d,
   onError: e,
   onChange: a,
-  onComplete: c
+  onComplete: c,
+  autoComplete: s
 }) {
-  const s = x(), r = p(!1), v = p(null), [u, m] = d.useState(null);
+  const t = b(), p = m(!1), v = m(null), [l, x] = u.useState(null);
   g(() => {
-    if (!(!u || !l))
-      return u == null ? void 0 : u.on("ready", l);
-  }, [u, l]), g(() => {
-    if (!(!u || !e))
-      return u == null ? void 0 : u.on("error", e);
-  }, [u, e]), g(() => {
-    if (!(!u || !f))
-      return u == null ? void 0 : u.on("swipe", f);
-  }, [u, f]), g(() => {
-    if (!(!u || !a))
-      return u == null ? void 0 : u.on("change", a);
-  }, [u, a]), g(() => {
-    if (!(!u || !c))
-      return u == null ? void 0 : u.on("complete", c);
-  }, [u, c]);
-  const h = B(
+    if (!(!l || !d))
+      return l == null ? void 0 : l.on("ready", d);
+  }, [l, d]), g(() => {
+    if (!(!l || !e))
+      return l == null ? void 0 : l.on("error", e);
+  }, [l, e]), g(() => {
+    if (!(!l || !f))
+      return l == null ? void 0 : l.on("swipe", f);
+  }, [l, f]), g(() => {
+    if (!(!l || !a))
+      return l == null ? void 0 : l.on("change", a);
+  }, [l, a]), g(() => {
+    if (!(!l || !c))
+      return l == null ? void 0 : l.on("complete", c);
+  }, [l, c]);
+  const h = P(
     () => ({
       theme: o,
       fields: n,
-      autoFocus: t,
-      translations: i
+      autoFocus: r,
+      translations: i,
+      autoComplete: s
     }),
-    [o, i, n, t]
+    [o, i, n, r, s]
   );
@@ -434,37 +436,37 @@ return y(() => {
       return;
-    async function b() {
-      if (r.current || !v.current)
+    async function E() {
+      if (p.current || !v.current)
         return;
-      r.current = !0;
-      const E = await s;
-      if (!E)
+      p.current = !0;
+      const z = await t;
+      if (!z)
         return;
-      const z = E.ui.card(h);
-      z.mount(v.current), m(z);
+      const L = z.ui.card(h);
+      L.mount(v.current), x(L);
     }
-    u ? u.update(h) : b().catch(console.error);
-  }, [h, u]), /* @__PURE__ */ d.createElement("div", { ref: v });
+    l ? l.update(h) : E().catch(console.error);
+  }, [h, l]), /* @__PURE__ */ u.createElement("div", { ref: v });
 }
-function K({
+function N({
   theme: o,
   autoFocus: n,
-  mode: t,
+  mode: r,
   inputType: i,
   length: f,
-  onReady: l,
+  onReady: d,
   onChange: e,
   onError: a
 }) {
-  const c = x(), s = p(!1), [r, v] = d.useState(null), u = p(null);
-  d.useEffect(() => {
-    if (!(!r || !l))
-      return r == null ? void 0 : r.on("ready", l);
-  }, [r, l]), d.useEffect(() => {
-    if (!(!r || !a))
-      return r == null ? void 0 : r.on("error", a);
-  }, [r, a]), d.useEffect(() => {
-    if (!(!r || !e))
-      return r == null ? void 0 : r.on("change", e);
-  }, [r, e]);
-  const m = B(
+  const c = b(), s = m(!1), [t, p] = u.useState(null), v = m(null);
+  u.useEffect(() => {
+    if (!(!t || !d))
+      return t == null ? void 0 : t.on("ready", d);
+  }, [t, d]), u.useEffect(() => {
+    if (!(!t || !a))
+      return t == null ? void 0 : t.on("error", a);
+  }, [t, a]), u.useEffect(() => {
+    if (!(!t || !e))
+      return t == null ? void 0 : t.on("change", e);
+  }, [t, e]);
+  const l = P(
     () => ({
@@ -474,77 +476,77 @@ theme: o,
       autoFocus: n,
-      mode: t,
+      mode: r,
       inputType: i
     }),
-    [o, f, n, t, i]
+    [o, f, n, r, i]
   );
   return y(() => {
-    if (!u.current)
+    if (!v.current)
       return;
-    async function h() {
-      if (s.current || !u.current)
+    async function x() {
+      if (s.current || !v.current)
         return;
       s.current = !0;
-      const b = await c;
-      if (!b)
+      const h = await c;
+      if (!h)
         return;
-      const E = b.ui.pin(m);
-      E.mount(u.current), v(E);
+      const E = h.ui.pin(l);
+      E.mount(v.current), p(E);
     }
-    r ? r.update(m) : h().catch(console.error);
-  }, [r, m]), /* @__PURE__ */ d.createElement("div", { ref: u });
+    t ? t.update(l) : x().catch(console.error);
+  }, [t, l]), /* @__PURE__ */ u.createElement("div", { ref: v });
 }
-function N({
+function Q({
   session: o,
   theme: n,
-  size: t,
+  size: r,
   onReady: i,
   onError: f,
-  onSuccess: l,
+  onSuccess: d,
   onFailure: e
 }) {
-  const a = x(), c = d.useRef(!1), s = d.useRef(null), [r, v] = d.useState(
+  const a = b(), c = u.useRef(!1), s = u.useRef(null), [t, p] = u.useState(
     null
   );
-  d.useEffect(() => {
-    if (!(!r || !i))
-      return r == null ? void 0 : r.on("ready", i);
-  }, [r, i]), d.useEffect(() => {
-    if (!(!r || !l))
-      return r == null ? void 0 : r.on("success", l);
-  }, [r, l]), d.useEffect(() => {
-    if (!(!r || !e))
-      return r == null ? void 0 : r.on("failure", e);
-  }, [r, e]), d.useEffect(() => {
-    if (!(!r || !f))
-      return r == null ? void 0 : r.on("error", f);
-  }, [r, f]);
-  const u = d.useMemo(
+  u.useEffect(() => {
+    if (!(!t || !i))
+      return t == null ? void 0 : t.on("ready", i);
+  }, [t, i]), u.useEffect(() => {
+    if (!(!t || !d))
+      return t == null ? void 0 : t.on("success", d);
+  }, [t, d]), u.useEffect(() => {
+    if (!(!t || !e))
+      return t == null ? void 0 : t.on("failure", e);
+  }, [t, e]), u.useEffect(() => {
+    if (!(!t || !f))
+      return t == null ? void 0 : t.on("error", f);
+  }, [t, f]);
+  const v = u.useMemo(
     () => ({
       theme: n,
-      size: t
+      size: r
     }),
-    [n, t]
+    [n, r]
   );
-  return d.useLayoutEffect(() => {
-    async function m() {
+  return u.useLayoutEffect(() => {
+    async function l() {
       if (c.current)
         return;
       c.current = !0;
-      const h = await a;
-      if (!h)
+      const x = await a;
+      if (!x)
         return;
-      const b = h.ui.threeDSecure(o, u);
-      b.mount(s.current), v(b);
+      const h = x.ui.threeDSecure(o, v);
+      h.mount(s.current), p(h);
     }
-    r ? r.update(u) : m().catch(console.error);
-  }, [r, o, u]), /* @__PURE__ */ d.createElement("div", { ref: s });
+    t ? t.update(v) : l().catch(console.error);
+  }, [t, o, v]), /* @__PURE__ */ u.createElement("div", { ref: s });
 }
-function Q(o) {
-  const n = x(), t = p(null), i = L(
-    (l, e) => {
-      if (t.current)
+function W(o) {
+  const n = b(), r = m(null), i = B(
+    (d, e) => {
+      if (r.current)
         return;
       async function a() {
         const c = await n;
-        c && (t.current = c.ui.threeDSecure(l, o), e != null && e.onReady && t.current.on("ready", e.onReady), e != null && e.onSuccess && t.current.on("success", e.onSuccess), e != null && e.onFailure && t.current.on("failure", e.onFailure), e != null && e.onError && t.current.on("error", e.onError), t.current.mount());
+        c && (r.current = c.ui.threeDSecure(d, o), e != null && e.onReady && r.current.on("ready", e.onReady), e != null && e.onSuccess && r.current.on("success", e.onSuccess), e != null && e.onFailure && r.current.on("failure", e.onFailure), e != null && e.onError && r.current.on("error", e.onError), r.current.mount());
       }
@@ -554,4 +556,4 @@ a();
     [n, o]
-  ), f = L((l) => {
-    t.current && t.current.update(l);
+  ), f = B((d) => {
+    r.current && r.current.update(d);
   }, []);
@@ -563,24 +565,24 @@ return {
 }
-class U extends Promise {
+class V extends Promise {
   async encrypt(n) {
     return (await this).encrypt(n);
   }
-  async decrypt(n, t) {
-    return (await this).decrypt(n, t);
+  async decrypt(n, r) {
+    return (await this).decrypt(n, r);
   }
 }
-const V = "https://js.evervault.com/v2";
-function A(o) {
+const A = "https://js.evervault.com/v2";
+function H(o) {
   const n = document.createElement("script");
-  o ? n.src = o : n.src = V;
-  const t = document.head || document.body;
-  if (!t)
+  o ? n.src = o : n.src = A;
+  const r = document.head || document.body;
+  if (!r)
     throw new Error(
       "Expected document.body not to be null. Evervault.js requires a <body> element."
     );
-  return t.appendChild(n), n;
+  return r.appendChild(n), n;
 }
 let w = null;
-function H(o) {
-  return w !== null || (w = new Promise((n, t) => {
+function q(o) {
+  return w !== null || (w = new Promise((n, r) => {
     if (typeof window > "u") {
@@ -595,24 +597,24 @@ n(void 0);
     try {
-      const i = A(o);
+      const i = H(o);
       i.addEventListener("load", () => {
-        window.Evervault ? n(window.Evervault) : t(new Error("Evervault.js not available"));
+        window.Evervault ? n(window.Evervault) : r(new Error("Evervault.js not available"));
       }), i.addEventListener("error", () => {
-        t(new Error("Failed to load Evervault.js"));
+        r(new Error("Failed to load Evervault.js"));
       });
     } catch (i) {
-      t(i);
+      r(i);
     }
   })), w;
 }
-function q(o) {
-  const n = Promise.resolve().then(() => H(o));
-  let t = !1;
+function F(o) {
+  const n = Promise.resolve().then(() => q(o));
+  let r = !1;
   return n.catch((i) => {
-    t || console.warn(i);
-  }), t = !0, n.then((i) => typeof window < "u" ? window.Evervault : i ?? void 0);
+    r || console.warn(i);
+  }), r = !0, n.then((i) => typeof window < "u" ? window.Evervault : i ?? void 0);
 }
-const W = ({
+const X = ({
   teamId: o,
   appId: n,
-  customConfig: t,
+  customConfig: r,
   children: i,
@@ -622,7 +624,7 @@ ...f
   if (typeof window > "u")
-    return /* @__PURE__ */ d.createElement(R.Provider, { value: null }, i);
-  const l = d.useMemo(
-    () => new U((e, a) => {
-      q(t == null ? void 0 : t.jsSdkUrl).then((c) => {
-        c !== void 0 ? e(new c(o, n, t)) : (console.error("Evervault.js not available"), a("Evervault.js not available"));
+    return /* @__PURE__ */ u.createElement(R.Provider, { value: null }, i);
+  const d = u.useMemo(
+    () => new V((e, a) => {
+      F(r == null ? void 0 : r.jsSdkUrl).then((c) => {
+        c !== void 0 ? e(new c(o, n, r)) : (console.error("Evervault.js not available"), a("Evervault.js not available"));
       }).catch((c) => a(c));
@@ -632,56 +634,56 @@ }),
   );
-  return /* @__PURE__ */ d.createElement(R.Provider, { ...f, value: l }, i);
+  return /* @__PURE__ */ u.createElement(R.Provider, { ...f, value: d }, i);
 };
-function X({
+function Z({
   onChange: o,
   config: n,
-  onInputsLoad: t
+  onInputsLoad: r
 }) {
-  const i = d.useId();
+  const i = u.useId();
   if (typeof window > "u")
-    return /* @__PURE__ */ d.createElement("div", { id: i });
-  const f = x(), { height: l = "auto", ...e } = n ?? {}, a = e ? { height: l, ...e } : { height: l };
-  return d.useEffect(() => {
+    return /* @__PURE__ */ u.createElement("div", { id: i });
+  const f = b(), { height: d = "auto", ...e } = n ?? {}, a = e ? { height: d, ...e } : { height: d };
+  return u.useEffect(() => {
     f == null || f.then((c) => {
       const s = c.inputs(i, a);
-      s == null || s.on("change", (r) => {
-        typeof o == "function" && o(r);
-      }), t && (s == null ? void 0 : s.isInputsLoaded) != null && s.isInputsLoaded instanceof Promise && s.isInputsLoaded.then(() => t());
+      s == null || s.on("change", (t) => {
+        typeof o == "function" && o(t);
+      }), r && (s == null ? void 0 : s.isInputsLoaded) != null && s.isInputsLoaded instanceof Promise && s.isInputsLoaded.then(() => r());
     });
-  }, [f]), /* @__PURE__ */ d.createElement("div", { id: i });
+  }, [f]), /* @__PURE__ */ u.createElement("div", { id: i });
 }
-function Z({
+function $({
   request: o,
   config: n,
-  onCopy: t,
+  onCopy: r,
   onRevealLoad: i,
   onRevealError: f
 }) {
-  const l = d.useId();
+  const d = u.useId();
   if (typeof window > "u")
-    return /* @__PURE__ */ d.createElement("div", { id: l });
-  const e = x(), { height: a = "auto", ...c } = n ?? {}, s = c ? { height: a, ...c } : { height: a };
-  return d.useEffect(() => {
-    e == null || e.then((r) => {
-      const v = r.reveal(l, o, s, t);
-      (v == null ? void 0 : v.isRevealLoaded) != null && v.isRevealLoaded instanceof Promise && v.isRevealLoaded.then(() => {
+    return /* @__PURE__ */ u.createElement("div", { id: d });
+  const e = b(), { height: a = "auto", ...c } = n ?? {}, s = c ? { height: a, ...c } : { height: a };
+  return u.useEffect(() => {
+    e == null || e.then((t) => {
+      const p = t.reveal(d, o, s, r);
+      (p == null ? void 0 : p.isRevealLoaded) != null && p.isRevealLoaded instanceof Promise && p.isRevealLoaded.then(() => {
         i && i();
-      }).catch((u) => {
-        f && f(u);
+      }).catch((v) => {
+        f && f(v);
       });
     });
-  }, [e]), /* @__PURE__ */ d.createElement("div", { id: l });
+  }, [e]), /* @__PURE__ */ u.createElement("div", { id: d });
 }
 export {
-  J as Card,
-  X as EvervaultInput,
-  W as EvervaultProvider,
-  Z as EvervaultReveal,
-  K as Pin,
-  U as PromisifiedEvervaultClient,
-  T as Reveal,
-  N as ThreeDSecure,
-  G as themes,
-  x as useEvervault,
-  Q as useThreeDSecure
+  K as Card,
+  Z as EvervaultInput,
+  X as EvervaultProvider,
+  $ as EvervaultReveal,
+  N as Pin,
+  V as PromisifiedEvervaultClient,
+  j as Reveal,
+  Q as ThreeDSecure,
+  J as themes,
+  b as useEvervault,
+  W as useThreeDSecure
 };

package.json

 {
   "private": false,
   "name": "@evervault/react",
-  "version": "2.7.0",
+  "version": "2.8.0",
   "description": "React package for the Evervault SDK",
@@ -36,6 +36,6 @@ "license": "MIT",
     "vite-plugin-dts": "^3.6.3",
-    "types": "^0.1.0",
-    "themes": "^0.1.1",
+    "types": "^0.2.0",
+    "themes": "^0.1.2",
     "tsconfig": "^0.0.1",
-    "@evervault/browser": "^2.26.0"
+    "@evervault/browser": "^2.27.0"
   },
@@ -42,0 +42,0 @@ "scripts": {

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

80251

increased by0.62%

Lines of code

1720

increased by0.88%

No dependency changes