@evervault/react-native 2.0.0 → 2.2.0

package/android/build.gradle

@@ -17,8 +17,13 @@ apply plugin: 'com.facebook.react'
 apply plugin: 'org.jetbrains.kotlin.android'
 
 android {
-  compileSdkVersion safeExtGet('compileSdkVersion', 33)
+  compileSdkVersion safeExtGet('compileSdkVersion', 35)
   namespace "com.nativeevervault"
+
+  defaultConfig {
+    minSdkVersion safeExtGet('minSdkVersion', 24)
+    targetSdkVersion safeExtGet('targetSdkVersion', 35)
+  }
 }
 
 repositories {

package/build/Card/Root.d.ts

@@ -14,6 +14,10 @@ export interface CardProps extends PropsWithChildren, CardConfig {
      * Triggered whenever the component's state is updated.
      */
     onChange?(payload: CardPayload): void;
+    /**
+     * Triggered when a native error occurs.
+     */
+    onError?(error: Error): void;
     /**
      * The validation mode to use for the form.
      *

package/build/Card/Root.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Root.d.ts","sourceRoot":"","sources":["../../src/Card/Root.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,iBAAiB,EAKlB,MAAM,OAAO,CAAC;AACf,OAAO,EAAiB,UAAU,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AASjE,MAAM,WAAW,SAAU,SAAQ,iBAAiB,EAAE,UAAU;IAC9D;;OAEG;IACH,aAAa,CAAC,EAAE;QACd,IAAI,CAAC,EAAE,MAAM,CAAC;QACd,MAAM,CAAC,EAAE,MAAM,CAAC;QAChB,MAAM,CAAC,EAAE,MAAM,CAAC;QAChB,GAAG,CAAC,EAAE,MAAM,CAAC;KACd,CAAC;IAEF;;OAEG;IACH,QAAQ,CAAC,CAAC,OAAO,EAAE,WAAW,GAAG,IAAI,CAAC;IAEtC;;;;;;;;;OASG;IACH,cAAc,CAAC,EAAE,UAAU,GAAG,QAAQ,GAAG,WAAW,GAAG,KAAK,CAAC;CAC9D;AAED,MAAM,WAAW,IAAI;IACnB;;OAEG;IACH,KAAK,IAAI,IAAI,CAAC;CACf;AAED,eAAO,MAAM,IAAI,4FAgEf,CAAC"}
+{"version":3,"file":"Root.d.ts","sourceRoot":"","sources":["../../src/Card/Root.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,iBAAiB,EAMlB,MAAM,OAAO,CAAC;AACf,OAAO,EAAiB,UAAU,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAWjE,MAAM,WAAW,SAAU,SAAQ,iBAAiB,EAAE,UAAU;IAC9D;;OAEG;IACH,aAAa,CAAC,EAAE;QACd,IAAI,CAAC,EAAE,MAAM,CAAC;QACd,MAAM,CAAC,EAAE,MAAM,CAAC;QAChB,MAAM,CAAC,EAAE,MAAM,CAAC;QAChB,GAAG,CAAC,EAAE,MAAM,CAAC;KACd,CAAC;IAEF;;OAEG;IACH,QAAQ,CAAC,CAAC,OAAO,EAAE,WAAW,GAAG,IAAI,CAAC;IAEtC;;OAEG;IACH,OAAO,CAAC,CAAC,KAAK,EAAE,KAAK,GAAG,IAAI,CAAC;IAE7B;;;;;;;;;OASG;IACH,cAAc,CAAC,EAAE,UAAU,GAAG,QAAQ,GAAG,WAAW,GAAG,KAAK,CAAC;CAC9D;AAED,MAAM,WAAW,IAAI;IACnB;;OAEG;IACH,KAAK,IAAI,IAAI,CAAC;CACf;AAED,eAAO,MAAM,IAAI,4FAwFf,CAAC"}

package/build/Input.d.ts

@@ -1,6 +1,10 @@
 import { ReactNode, Ref } from "react";
 import { TextInput, TextInputProps } from "react-native";
 import { Mask, MaskArray } from "react-native-mask-input";
+export interface EvervaultInputContextValue {
+    validationMode: "onChange" | "onBlur" | "onTouched" | "all";
+}
+export declare const EvervaultInputContext: import("react").Context<EvervaultInputContextValue>;
 export type EvervaultInput = Pick<TextInput, "isFocused" | "focus" | "blur" | "clear" | "measure" | "measureInWindow" | "measureLayout">;
 export type BaseEvervaultInputProps = Omit<TextInputProps, "onChange" | "onChangeText" | "value" | "defaultValue">;
 export declare function mask(format: string): MaskArray;

package/build/Input.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Input.d.ts","sourceRoot":"","sources":["../src/Input.tsx"],"names":[],"mappings":"AAAA,OAAO,EAGL,SAAS,EACT,GAAG,EAKJ,MAAM,OAAO,CAAC;AACf,OAAO,EAAE,SAAS,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAGzD,OAAkB,EAAE,IAAI,EAAE,SAAS,EAAE,MAAM,yBAAyB,CAAC;AAErE,MAAM,MAAM,cAAc,GAAG,IAAI,CAC/B,SAAS,EACP,WAAW,GACX,OAAO,GACP,MAAM,GACN,OAAO,GACP,SAAS,GACT,iBAAiB,GACjB,eAAe,CAClB,CAAC;AA4CF,MAAM,MAAM,uBAAuB,GAAG,IAAI,CACxC,cAAc,EACd,UAAU,GAAG,cAAc,GAAG,OAAO,GAAG,cAAc,CACvD,CAAC;AAEF,wBAAgB,IAAI,CAAC,MAAM,EAAE,MAAM,GAAG,SAAS,CAO9C;AAED,MAAM,WAAW,mBAAmB,CAAC,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CACzE,SAAQ,uBAAuB;IAC/B,IAAI,EAAE,MAAM,MAAM,CAAC;IACnB,IAAI,CAAC,EAAE,IAAI,CAAC;CACb;AAED,eAAO,MAAM,cAAc,EA6CrB,CAAC,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAC3C,KAAK,EAAE,mBAAmB,CAAC,MAAM,CAAC,GAAG;IAAE,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAA;CAAE,KAC/D,SAAS,CAAC"}
+{"version":3,"file":"Input.d.ts","sourceRoot":"","sources":["../src/Input.tsx"],"names":[],"mappings":"AAAA,OAAO,EAIL,SAAS,EACT,GAAG,EAMJ,MAAM,OAAO,CAAC;AACf,OAAO,EAAE,SAAS,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAGzD,OAAkB,EAAE,IAAI,EAAE,SAAS,EAAE,MAAM,yBAAyB,CAAC;AAErE,MAAM,WAAW,0BAA0B;IACzC,cAAc,EAAE,UAAU,GAAG,QAAQ,GAAG,WAAW,GAAG,KAAK,CAAC;CAC7D;AAED,eAAO,MAAM,qBAAqB,qDAEhC,CAAC;AAEH,MAAM,MAAM,cAAc,GAAG,IAAI,CAC/B,SAAS,EACP,WAAW,GACX,OAAO,GACP,MAAM,GACN,OAAO,GACP,SAAS,GACT,iBAAiB,GACjB,eAAe,CAClB,CAAC;AA4CF,MAAM,MAAM,uBAAuB,GAAG,IAAI,CACxC,cAAc,EACd,UAAU,GAAG,cAAc,GAAG,OAAO,GAAG,cAAc,CACvD,CAAC;AAEF,wBAAgB,IAAI,CAAC,MAAM,EAAE,MAAM,GAAG,SAAS,CAO9C;AAED,MAAM,WAAW,mBAAmB,CAAC,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CACzE,SAAQ,uBAAuB;IAC/B,IAAI,EAAE,MAAM,MAAM,CAAC;IACnB,IAAI,CAAC,EAAE,IAAI,CAAC;CACb;AAED,eAAO,MAAM,cAAc,EAuDrB,CAAC,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAC3C,KAAK,EAAE,mBAAmB,CAAC,MAAM,CAAC,GAAG;IAAE,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAA;CAAE,KAC/D,SAAS,CAAC"}

package/build/index.cjs.js

@@ -7184,51 +7184,6 @@ const r=(t,r,o)=>{if(t&&"reportValidity"in t){const s=get(o,r);t.setCustomValidi
 
 function n(r,e){for(var n={};r.length;){var s=r[0],t=s.code,i=s.message,a=s.path.join(".");if(!n[a])if("unionErrors"in s){var u=s.unionErrors[0].errors[0];n[a]={message:u.message,type:u.code};}else n[a]={message:i,type:t};if("unionErrors"in s&&s.unionErrors.forEach(function(e){return e.errors.forEach(function(e){return r.push(e)})}),e){var c=n[a].types,f=c&&c[s.code];n[a]=appendErrors(a,e,n,t,f?[].concat(f,s.message):s.message);}r.shift();}return n}function s(o$1,s,t){return void 0===t&&(t={}),function(i,a,u){try{return Promise.resolve(function(e,n){try{var a=Promise.resolve(o$1["sync"===t.mode?"parse":"parseAsync"](i,s)).then(function(e){return u.shouldUseNativeValidation&&o({},u),{errors:{},values:t.raw?Object.assign({},i):e}});}catch(r){return n(r)}return a&&a.then?a.then(void 0,n):a}(0,function(r){if(function(r){return Array.isArray(null==r?void 0:r.errors)}(r))return {values:{},errors:s$1(n(r.errors,!u.shouldUseNativeValidation&&"all"===u.criteriaMode),u)};throw r}))}catch(r){return Promise.reject(r)}}}
 
-const DEFAULT_ACCEPTED_BRANDS = [];
-const Card$1 = React.forwardRef(function Card({ children, defaultValues, onChange, acceptedBrands = DEFAULT_ACCEPTED_BRANDS, validationMode = "all", }, ref) {
-    const evervault = useEvervault();
-    const resolver = React.useMemo(() => {
-        const schema = getCardFormSchema(acceptedBrands);
-        return s(schema);
-    }, [acceptedBrands]);
-    const methods = useForm({
-        defaultValues,
-        resolver,
-        mode: validationMode,
-        shouldUseNativeValidation: false,
-    });
-    React.useEffect(() => {
-        if (!onChange)
-            return;
-        let abortController;
-        function handleChange(values) {
-            if (abortController) {
-                abortController.abort();
-            }
-            abortController = new AbortController();
-            const signal = abortController.signal;
-            requestAnimationFrame(async () => {
-                const payload = await formatPayload(values, {
-                    encrypt: evervault.encrypt,
-                    form: methods,
-                });
-                if (signal.aborted)
-                    return;
-                onChange?.(payload);
-            });
-        }
-        handleChange(methods.getValues());
-        const subscription = methods.watch(handleChange);
-        return () => subscription.unsubscribe();
-    }, [evervault.encrypt, onChange]);
-    React.useImperativeHandle(ref, React.useCallback(() => ({
-        reset() {
-            methods.reset();
-        },
-    }), []));
-    return jsxRuntime.jsx(FormProvider, { ...methods, children: children });
-});
-
 // Taken from https://github.com/gregberge/react-merge-refs
 function mergeRefs(...refs) {
     return (value) => {
@@ -7428,6 +7383,9 @@ var MaskInput = /*#__PURE__*/React__namespace.forwardRef(function (props, ref) {
   }));
 });
 
+const EvervaultInputContext = React.createContext({
+    validationMode: "all",
+});
 function useForwardedInputRef(ref) {
     const inputRef = React.useRef(null);
     React.useImperativeHandle(ref, React.useCallback(() => ({
@@ -7464,6 +7422,7 @@ function mask(format) {
     });
 }
 const EvervaultInput = React.forwardRef(function EvervaultInput({ name, mask, ...props }, ref) {
+    const { validationMode } = React.useContext(EvervaultInputContext);
     const inputRef = useForwardedInputRef(ref);
     const methods = useFormContext();
     return (jsxRuntime.jsx(Controller, { control: methods.control, name: name, shouldUnregister: true, render: ({ field, fieldState }) => (jsxRuntime.jsx(MaskInput
@@ -7473,22 +7432,86 @@ const EvervaultInput = React.forwardRef(function EvervaultInput({ name, mask, ..
             id: field.name, ...props, 
             // Strict props
             ref: mergeRefs(inputRef, field.ref), editable: !field.disabled && (props.editable ?? true), onBlur: (evt) => {
+                const shouldValidate = validationMode === "onBlur" ||
+                    validationMode === "onTouched" ||
+                    validationMode === "all";
                 methods.setValue(field.name, field.value, {
                     shouldDirty: true,
                     shouldTouch: true,
-                    shouldValidate: true,
+                    shouldValidate,
                 });
                 props.onBlur?.(evt);
             }, mask: mask, maskAutoComplete: !!mask, value: field.value, onChangeText: (masked, unmasked) => {
+                const shouldValidate = (validationMode === "onTouched" && fieldState.isTouched) ||
+                    ((validationMode === "onChange" || validationMode === "all") &&
+                        (!!fieldState.error || fieldState.isTouched));
                 methods.setValue(field.name, unmasked, {
                     shouldDirty: true,
-                    shouldValidate: !!fieldState.error || fieldState.isTouched,
+                    shouldValidate,
                 });
             }, 
             // Remove unwanted props
             defaultValue: undefined, onChange: undefined })) }));
 });
 
+const DEFAULT_ACCEPTED_BRANDS = [];
+const Card$1 = React.forwardRef(function Card({ children, defaultValues, onChange, onError, acceptedBrands = DEFAULT_ACCEPTED_BRANDS, validationMode = "all", }, ref) {
+    const evervault = useEvervault();
+    const resolver = React.useMemo(() => {
+        const schema = getCardFormSchema(acceptedBrands);
+        return s(schema);
+    }, [acceptedBrands]);
+    const methods = useForm({
+        defaultValues,
+        resolver,
+        mode: validationMode,
+        shouldUseNativeValidation: false,
+    });
+    const inputContext = React.useMemo(() => ({
+        validationMode,
+    }), [validationMode]);
+    // Use refs to prevent closures from being captured
+    const onChangeRef = React.useRef(onChange);
+    onChangeRef.current = onChange;
+    const onErrorRef = React.useRef(onError);
+    onErrorRef.current = onError;
+    React.useEffect(() => {
+        if (!onChange)
+            return;
+        let abortController;
+        function handleChange(values) {
+            if (abortController) {
+                abortController.abort();
+            }
+            abortController = new AbortController();
+            const signal = abortController.signal;
+            requestAnimationFrame(async () => {
+                try {
+                    const payload = await formatPayload(values, {
+                        encrypt: evervault.encrypt,
+                        form: methods,
+                    });
+                    if (signal.aborted)
+                        return;
+                    onChangeRef.current?.(payload);
+                }
+                catch (error) {
+                    onErrorRef.current?.(error);
+                }
+            });
+        }
+        handleChange(methods.getValues());
+        const subscription = methods.watch(handleChange);
+        return () => subscription.unsubscribe();
+    }, [evervault.encrypt]);
+    React.useImperativeHandle(ref, React.useCallback(() => ({
+        reset() {
+            methods.reset();
+        },
+    }), []));
+    return (jsxRuntime.jsx(FormProvider, { ...methods, children: jsxRuntime.jsx(EvervaultInputContext.Provider, { value: inputContext, children: children }) }));
+});
+
 const CardHolder = React.forwardRef(function CardHolder(props, ref) {
     return (jsxRuntime.jsx(EvervaultInput, { placeholder: "Johnny Appleseed", ...props, ref: ref, name: "name", inputMode: "text", autoComplete: reactNative.Platform.select({
             ios: "cc-name",