@evervault/react-native 2.3.0 → 2.4.0

package/build/Card/Cvc.d.ts

@@ -1,5 +1,12 @@
 import { BaseEvervaultInputProps, EvervaultInput } from "../Input";
-export type CardCvcProps = BaseEvervaultInputProps;
+export interface CardCvcProps extends BaseEvervaultInputProps {
+    /**
+     * Whether to obfuscate the entire CVC value.
+     *
+     * If a string is provided, it will be used to obfuscate the value.
+     */
+    obfuscateValue?: boolean | string;
+}
 export type CardCvc = EvervaultInput;
-export declare const CardCvc: import("react").ForwardRefExoticComponent<BaseEvervaultInputProps & import("react").RefAttributes<EvervaultInput>>;
+export declare const CardCvc: import("react").ForwardRefExoticComponent<CardCvcProps & import("react").RefAttributes<EvervaultInput>>;
 //# sourceMappingURL=Cvc.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Cvc.d.ts","sourceRoot":"","sources":["../../src/Card/Cvc.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,uBAAuB,EAAE,cAAc,EAAQ,MAAM,UAAU,CAAC;AAazE,MAAM,MAAM,YAAY,GAAG,uBAAuB,CAAC;AAEnD,MAAM,MAAM,OAAO,GAAG,cAAc,CAAC;AAErC,eAAO,MAAM,OAAO,oHAgClB,CAAC"}
+{"version":3,"file":"Cvc.d.ts","sourceRoot":"","sources":["../../src/Card/Cvc.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,uBAAuB,EAAE,cAAc,EAAQ,MAAM,UAAU,CAAC;AAazE,MAAM,WAAW,YAAa,SAAQ,uBAAuB;IAC3D;;;;OAIG;IACH,cAAc,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;CACnC;AAED,MAAM,MAAM,OAAO,GAAG,cAAc,CAAC;AAErC,eAAO,MAAM,OAAO,yGAgClB,CAAC"}

package/build/Card/Number.d.ts

@@ -1,5 +1,12 @@
 import { BaseEvervaultInputProps, EvervaultInput } from "../Input";
-export type CardNumberProps = BaseEvervaultInputProps;
+export interface CardNumberProps extends BaseEvervaultInputProps {
+    /**
+     * Whether to obfuscate the card number value (excluding the last 4 digits).
+     *
+     * If a string is provided, it will be used to obfuscate the value.
+     */
+    obfuscateValue?: boolean | string;
+}
 export type CardNumber = EvervaultInput;
-export declare const CardNumber: import("react").ForwardRefExoticComponent<BaseEvervaultInputProps & import("react").RefAttributes<EvervaultInput>>;
+export declare const CardNumber: import("react").ForwardRefExoticComponent<CardNumberProps & import("react").RefAttributes<EvervaultInput>>;
 //# sourceMappingURL=Number.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Number.d.ts","sourceRoot":"","sources":["../../src/Card/Number.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,uBAAuB,EAAE,cAAc,EAAQ,MAAM,UAAU,CAAC;AAazE,MAAM,MAAM,eAAe,GAAG,uBAAuB,CAAC;AAEtD,MAAM,MAAM,UAAU,GAAG,cAAc,CAAC;AAExC,eAAO,MAAM,UAAU,oHA4BtB,CAAC"}
+{"version":3,"file":"Number.d.ts","sourceRoot":"","sources":["../../src/Card/Number.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,uBAAuB,EAAE,cAAc,EAAQ,MAAM,UAAU,CAAC;AAazE,MAAM,WAAW,eAAgB,SAAQ,uBAAuB;IAC9D;;;;OAIG;IACH,cAAc,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;CACnC;AAED,MAAM,MAAM,UAAU,GAAG,cAAc,CAAC;AAExC,eAAO,MAAM,UAAU,4GA4BtB,CAAC"}

package/build/Card/index.d.ts

@@ -8,8 +8,8 @@ export type Card = CardRef;
 export declare const Card: import("react").ForwardRefExoticComponent<import("./Root").CardProps & import("react").RefAttributes<CardRoot>> & {
     Holder: import("react").ForwardRefExoticComponent<import("..").EvervaultInputProps & import("react").RefAttributes<import("..").EvervaultInput>>;
     Expiry: import("react").ForwardRefExoticComponent<import("..").EvervaultInputProps & import("react").RefAttributes<import("..").EvervaultInput>>;
-    Cvc: import("react").ForwardRefExoticComponent<import("..").EvervaultInputProps & import("react").RefAttributes<import("..").EvervaultInput>>;
-    Number: import("react").ForwardRefExoticComponent<import("..").EvervaultInputProps & import("react").RefAttributes<import("..").EvervaultInput>>;
+    Cvc: import("react").ForwardRefExoticComponent<import("./Cvc").CardCvcProps & import("react").RefAttributes<import("..").EvervaultInput>>;
+    Number: import("react").ForwardRefExoticComponent<import("./Number").CardNumberProps & import("react").RefAttributes<import("..").EvervaultInput>>;
 };
 export type { CardHolderProps } from "./Holder";
 export { CardHolder };

package/build/Input.d.ts

@@ -11,6 +11,7 @@ export declare function mask(format: string): MaskArray;
 export interface EvervaultInputProps<Values extends Record<string, unknown>> extends BaseEvervaultInputProps {
     name: keyof Values;
     mask?: Mask;
+    obfuscateValue?: boolean | string;
 }
 export declare const EvervaultInput: <Values extends Record<string, unknown>>(props: EvervaultInputProps<Values> & {
     ref?: Ref<EvervaultInput>;

package/build/Input.d.ts.map

@@ -1 +1 @@
-{"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"}
+{"version":3,"file":"Input.d.ts","sourceRoot":"","sources":["../src/Input.tsx"],"names":[],"mappings":"AAAA,OAAO,EAIL,SAAS,EACT,GAAG,EAQJ,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,CAqB9C;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;IACZ,cAAc,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;CACnC;AAED,eAAO,MAAM,cAAc,EAgErB,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

@@ -608,50 +608,6 @@ function useController(props) {
     }), [field, formState, fieldState]);
 }
 
-/**
- * Component based on `useController` hook to work with controlled component.
- *
- * @remarks
- * [API](https://react-hook-form.com/docs/usecontroller/controller) • [Demo](https://codesandbox.io/s/react-hook-form-v6-controller-ts-jwyzw) • [Video](https://www.youtube.com/watch?v=N2UNk_UCVyA)
- *
- * @param props - the path name to the form field value, and validation rules.
- *
- * @returns provide field handler functions, field and form state.
- *
- * @example
- * ```tsx
- * function App() {
- *   const { control } = useForm<FormValues>({
- *     defaultValues: {
- *       test: ""
- *     }
- *   });
- *
- *   return (
- *     <form>
- *       <Controller
- *         control={control}
- *         name="test"
- *         render={({ field: { onChange, onBlur, value, ref }, formState, fieldState }) => (
- *           <>
- *             <input
- *               onChange={onChange} // send value to hook form
- *               onBlur={onBlur} // notify when input is touched
- *               value={value} // return updated value
- *               ref={ref} // set ref for focus management
- *             />
- *             <p>{formState.isSubmitted ? "submitted" : ""}</p>
- *             <p>{fieldState.isTouched ? "touched" : ""}</p>
- *           </>
- *         )}
- *       />
- *     </form>
- *   );
- * }
- * ```
- */
-const Controller = (props) => props.render(useController(props));
-
 var appendErrors = (name, validateAllFieldCriteria, errors, type, message) => validateAllFieldCriteria
     ? {
         ...errors[name],
@@ -7428,44 +7384,69 @@ function useForwardedInputRef(ref) {
     return inputRef;
 }
 function mask(format) {
-    return format.split("").map((char) => {
+    const maskArray = [];
+    let isObfuscated = false;
+    format.split("").forEach((char) => {
+        if (char === "[") {
+            isObfuscated = true;
+            return;
+        }
+        else if (char === "]") {
+            isObfuscated = false;
+            return;
+        }
+        let value = char;
         if (char === "9") {
-            return /\d/;
+            value = isObfuscated ? [/\d/] : /\d/;
         }
-        return char;
+        maskArray.push(value);
     });
+    return maskArray;
 }
-const EvervaultInput = React.forwardRef(function EvervaultInput({ name, mask, ...props }, ref) {
+const EvervaultInput = React.forwardRef(function EvervaultInput({ name, mask, obfuscateValue, ...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
+    const { field, fieldState } = useController({
+        control: methods.control,
+        name,
+        shouldUnregister: true,
+    });
+    const obfuscationCharacter = React.useMemo(() => {
+        if (typeof obfuscateValue === "string") {
+            return obfuscateValue;
+        }
+        else {
+            return "•";
+        }
+    }, [obfuscateValue]);
+    return (jsxRuntime.jsx(MaskInput
+    // Overridable props
+    , { 
         // Overridable props
-        , { 
-            // Overridable props
-            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,
-                });
-                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,
-                });
-            }, 
-            // Remove unwanted props
-            defaultValue: undefined, onChange: undefined })) }));
+        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,
+            });
+            props.onBlur?.(evt);
+        }, mask: mask, maskAutoComplete: !!mask, obfuscationCharacter: obfuscationCharacter, showObfuscatedValue: !!obfuscateValue, 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,
+            });
+        }, 
+        // Remove unwanted props
+        defaultValue: undefined, onChange: undefined }));
 });
 
 const DEFAULT_ACCEPTED_BRANDS = [];
@@ -7538,9 +7519,9 @@ const CardExpiry = React.forwardRef(function CardExpiry(props, ref) {
     return (jsxRuntime.jsx(EvervaultInput, { placeholder: "MM / YY", ...props, ref: ref, name: "expiry", mask: CARD_EXPIRY_MASK, inputMode: "numeric", autoComplete: "cc-exp", keyboardType: "number-pad" }));
 });
 
-const DEFAULT_CARD_CVC_MASK = mask("999");
+const DEFAULT_CARD_CVC_MASK = mask("[999]");
 const CARD_CVC_MASKS = {
-    "american-express": mask("9999"),
+    "american-express": mask("[9999]"),
 };
 const CardCvc = React.forwardRef(function CardCvc(props, ref) {
     const methods = useFormContext();
@@ -7558,10 +7539,10 @@ const CardCvc = React.forwardRef(function CardCvc(props, ref) {
     return (jsxRuntime.jsx(EvervaultInput, { placeholder: "CVC", ...props, ref: ref, name: "cvc", mask: mask, inputMode: "numeric", autoComplete: "cc-csc", keyboardType: "number-pad" }));
 });
 
-const DEFAULT_CARD_NUMBER_MASK = mask("9999 9999 9999 9999");
+const DEFAULT_CARD_NUMBER_MASK = mask("9999 99[99 9999 9999]");
 const CARD_NUMBER_MASKS = {
-    unionpay: mask("9999 9999 9999 9999 999"),
-    "american-express": mask("9999 999999 99999"),
+    unionpay: mask("9999 99[99 9999 9999 999]"),
+    "american-express": mask("9999 99[9999 99999]"),
 };
 const CardNumber = React.forwardRef(function CardNumber(props, ref) {
     const mask = React.useCallback((text) => {