@gr4vy/secure-fields-react 2.2.6 → 2.3.0--canary.1104.02821af.0

package/README.md

@@ -133,6 +133,26 @@ The available secure fields components are `CardNumber`, `ExpiryDate`, `Security
 | `onFocus`     | Attaches an event handler to the input, listening for the focus event. The data available in the passed callback includes an `id` representing the field type (e.g. `expiryDate`).                                                                                                                            |
 | `onInput`     | Attaches an event handler to the input, listening for the input event. The data available in the passed callback includes an `id` representing the field type (e.g. `expiryDate`) and some useful card validation information, such as the current scheme (e.g. `visa`) and security code label (e.g. `CVV`). |
 
+Each field component supports a `ref` that exposes a `clear()` method to reset the value programmatically.
+
+```jsx
+import { useRef } from 'react'
+import { CardNumber } from '@gr4vy/secure-fields-react'
+
+const CardNumberWithClear = () => {
+  const cardNumberRef = useRef(null)
+
+  return (
+    <>
+      <CardNumber ref={cardNumberRef} />
+      <button type="button" onClick={() => cardNumberRef.current?.clear()}>
+        Clear
+      </button>
+    </>
+  )
+}
+```
+
 ## Click to Pay
 
 Click to Pay is the better way to pay online – featuring advanced payment technology built on secure remote commerce industry standards.

package/lib/components/CardNumber/CardNumber.d.ts

@@ -1,2 +1,2 @@
-import { Field as FieldProps } from "../../types";
-export declare const CardNumber: (props: Omit<FieldProps, 'type'>) => import("react/jsx-runtime").JSX.Element;
+import { Field as FieldProps, FieldHandle } from "../../types";
+export declare const CardNumber: import("react").ForwardRefExoticComponent<Omit<FieldProps, "ref" | "type"> & import("react").RefAttributes<FieldHandle>>;

package/lib/components/CardNumber/CardNumber.js

@@ -13,9 +13,10 @@ var __assign = (this && this.__assign) || function () {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.CardNumber = void 0;
 var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
 var Field_1 = require("../Field");
-var CardNumber = function (props) {
-    return (0, jsx_runtime_1.jsx)(Field_1.Field, __assign({ type: "number" }, props));
-};
-exports.CardNumber = CardNumber;
+exports.CardNumber = (0, react_1.forwardRef)(function (props, ref) {
+    return (0, jsx_runtime_1.jsx)(Field_1.Field, __assign({ ref: ref, type: "number" }, props));
+});
+exports.CardNumber.displayName = 'CardNumber';
 //# sourceMappingURL=CardNumber.js.map

package/lib/components/CardNumber/CardNumber.js.map

@@ -1 +1 @@
-{"version":3,"file":"CardNumber.js","sourceRoot":"","sources":["../../../src/components/CardNumber/CardNumber.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;AAAA,kCAAwC;AAGjC,IAAM,UAAU,GAAG,UAAC,KAA+B;IACxD,OAAO,uBAAC,aAAK,aAAC,IAAI,EAAC,QAAQ,IAAK,KAAK,EAAI,CAAA;AAC3C,CAAC,CAAA;AAFY,QAAA,UAAU,cAEtB"}
+{"version":3,"file":"CardNumber.js","sourceRoot":"","sources":["../../../src/components/CardNumber/CardNumber.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;AAAA,+BAAkC;AAClC,kCAAwC;AAG3B,QAAA,UAAU,GAAG,IAAA,kBAAU,EAGlC,UAAC,KAAK,EAAE,GAAG;IACX,OAAO,uBAAC,aAAK,aAAC,GAAG,EAAE,GAAG,EAAE,IAAI,EAAC,QAAQ,IAAK,KAAK,EAAI,CAAA;AACrD,CAAC,CAAC,CAAA;AAEF,kBAAU,CAAC,WAAW,GAAG,YAAY,CAAA"}

package/lib/components/ExpiryDate/ExpiryDate.d.ts

@@ -1,2 +1,2 @@
-import { Field as FieldProps } from "../../types";
-export declare const ExpiryDate: (props: Omit<FieldProps, 'type'>) => import("react/jsx-runtime").JSX.Element;
+import { Field as FieldProps, FieldHandle } from "../../types";
+export declare const ExpiryDate: import("react").ForwardRefExoticComponent<Omit<FieldProps, "ref" | "type"> & import("react").RefAttributes<FieldHandle>>;

package/lib/components/ExpiryDate/ExpiryDate.js

@@ -13,9 +13,10 @@ var __assign = (this && this.__assign) || function () {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ExpiryDate = void 0;
 var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
 var Field_1 = require("../Field");
-var ExpiryDate = function (props) {
-    return (0, jsx_runtime_1.jsx)(Field_1.Field, __assign({ type: "expiryDate" }, props));
-};
-exports.ExpiryDate = ExpiryDate;
+exports.ExpiryDate = (0, react_1.forwardRef)(function (props, ref) {
+    return (0, jsx_runtime_1.jsx)(Field_1.Field, __assign({ ref: ref, type: "expiryDate" }, props));
+});
+exports.ExpiryDate.displayName = 'ExpiryDate';
 //# sourceMappingURL=ExpiryDate.js.map

package/lib/components/ExpiryDate/ExpiryDate.js.map

@@ -1 +1 @@
-{"version":3,"file":"ExpiryDate.js","sourceRoot":"","sources":["../../../src/components/ExpiryDate/ExpiryDate.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;AAAA,kCAAwC;AAGjC,IAAM,UAAU,GAAG,UAAC,KAA+B;IACxD,OAAO,uBAAC,aAAK,aAAC,IAAI,EAAC,YAAY,IAAK,KAAK,EAAI,CAAA;AAC/C,CAAC,CAAA;AAFY,QAAA,UAAU,cAEtB"}
+{"version":3,"file":"ExpiryDate.js","sourceRoot":"","sources":["../../../src/components/ExpiryDate/ExpiryDate.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;AAAA,+BAAkC;AAClC,kCAAwC;AAG3B,QAAA,UAAU,GAAG,IAAA,kBAAU,EAGlC,UAAC,KAAK,EAAE,GAAG;IACX,OAAO,uBAAC,aAAK,aAAC,GAAG,EAAE,GAAG,EAAE,IAAI,EAAC,YAAY,IAAK,KAAK,EAAI,CAAA;AACzD,CAAC,CAAC,CAAA;AAEF,kBAAU,CAAC,WAAW,GAAG,YAAY,CAAA"}

package/lib/components/Field/Field.d.ts

@@ -1,2 +1,2 @@
-import { Field as FieldProps } from "../../types";
-export declare const Field: (props: FieldProps) => import("react/jsx-runtime").JSX.Element;
+import { Field as FieldProps, FieldHandle } from "../../types";
+export declare const Field: import("react").ForwardRefExoticComponent<Omit<FieldProps, "ref"> & import("react").RefAttributes<FieldHandle>>;

package/lib/components/Field/Field.js

@@ -15,10 +15,13 @@ exports.Field = void 0;
 var jsx_runtime_1 = require("react/jsx-runtime");
 var react_1 = require("react");
 var use_secure_input_1 = require("../../hooks/use-secure-input");
-var Field = function (props) {
+exports.Field = (0, react_1.forwardRef)(function (props, handleRef) {
     var ref = (0, react_1.useRef)(null);
-    (0, use_secure_input_1.useSecureInput)(__assign(__assign({}, props), { ref: ref }));
+    var field = (0, use_secure_input_1.useSecureInput)(__assign(__assign({}, props), { ref: ref }));
+    (0, react_1.useImperativeHandle)(handleRef, function () { return ({
+        clear: function () { var _a; return (_a = field === null || field === void 0 ? void 0 : field.clear) === null || _a === void 0 ? void 0 : _a.call(field); },
+    }); }, [field]);
     return (0, jsx_runtime_1.jsx)("input", __assign({ ref: ref }, props));
-};
-exports.Field = Field;
+});
+exports.Field.displayName = 'Field';
 //# sourceMappingURL=Field.js.map

package/lib/components/Field/Field.js.map

@@ -1 +1 @@
-{"version":3,"file":"Field.js","sourceRoot":"","sources":["../../../src/components/Field/Field.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;AAAA,+BAA8B;AAC9B,iEAAuD;AAGhD,IAAM,KAAK,GAAG,UAAC,KAAiB;IACrC,IAAM,GAAG,GAAG,IAAA,cAAM,EAAC,IAAI,CAAC,CAAA;IACxB,IAAA,iCAAc,wBAAM,KAAK,KAAE,GAAG,KAAA,IAAG,CAAA;IACjC,OAAO,2CAAO,GAAG,EAAE,GAAG,IAAM,KAAK,EAAI,CAAA;AACvC,CAAC,CAAA;AAJY,QAAA,KAAK,SAIjB"}
+{"version":3,"file":"Field.js","sourceRoot":"","sources":["../../../src/components/Field/Field.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;AAAA,+BAA+D;AAC/D,iEAAuD;AAG1C,QAAA,KAAK,GAAG,IAAA,kBAAU,EAC7B,UAAC,KAAK,EAAE,SAAS;IACf,IAAM,GAAG,GAAG,IAAA,cAAM,EAAC,IAAI,CAAC,CAAA;IACxB,IAAM,KAAK,GAAG,IAAA,iCAAc,wBAAM,KAAK,KAAE,GAAG,KAAA,IAAG,CAAA;IAE/C,IAAA,2BAAmB,EACjB,SAAS,EACT,cAAM,OAAA,CAAC;QACL,KAAK,EAAE,sBAAM,OAAA,MAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,KAAK,qDAAI,CAAA,EAAA;KAC9B,CAAC,EAFI,CAEJ,EACF,CAAC,KAAK,CAAC,CACR,CAAA;IAED,OAAO,2CAAO,GAAG,EAAE,GAAG,IAAM,KAAK,EAAI,CAAA;AACvC,CAAC,CACF,CAAA;AAED,aAAK,CAAC,WAAW,GAAG,OAAO,CAAA"}

package/lib/components/SecurityCode/SecurityCode.d.ts

@@ -1,2 +1,2 @@
-import { Field as FieldProps } from "../../types";
-export declare const SecurityCode: (props: Omit<FieldProps, 'type'>) => import("react/jsx-runtime").JSX.Element;
+import { Field as FieldProps, FieldHandle } from "../../types";
+export declare const SecurityCode: import("react").ForwardRefExoticComponent<Omit<FieldProps, "ref" | "type"> & import("react").RefAttributes<FieldHandle>>;

package/lib/components/SecurityCode/SecurityCode.js

@@ -13,9 +13,10 @@ var __assign = (this && this.__assign) || function () {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.SecurityCode = void 0;
 var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
 var Field_1 = require("../Field");
-var SecurityCode = function (props) {
-    return (0, jsx_runtime_1.jsx)(Field_1.Field, __assign({ type: "securityCode" }, props));
-};
-exports.SecurityCode = SecurityCode;
+exports.SecurityCode = (0, react_1.forwardRef)(function (props, ref) {
+    return (0, jsx_runtime_1.jsx)(Field_1.Field, __assign({ ref: ref, type: "securityCode" }, props));
+});
+exports.SecurityCode.displayName = 'SecurityCode';
 //# sourceMappingURL=SecurityCode.js.map

package/lib/components/SecurityCode/SecurityCode.js.map

@@ -1 +1 @@
-{"version":3,"file":"SecurityCode.js","sourceRoot":"","sources":["../../../src/components/SecurityCode/SecurityCode.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;AAAA,kCAAwC;AAGjC,IAAM,YAAY,GAAG,UAAC,KAA+B;IAC1D,OAAO,uBAAC,aAAK,aAAC,IAAI,EAAC,cAAc,IAAK,KAAK,EAAI,CAAA;AACjD,CAAC,CAAA;AAFY,QAAA,YAAY,gBAExB"}
+{"version":3,"file":"SecurityCode.js","sourceRoot":"","sources":["../../../src/components/SecurityCode/SecurityCode.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;AAAA,+BAAkC;AAClC,kCAAwC;AAG3B,QAAA,YAAY,GAAG,IAAA,kBAAU,EAGpC,UAAC,KAAK,EAAE,GAAG;IACX,OAAO,uBAAC,aAAK,aAAC,GAAG,EAAE,GAAG,EAAE,IAAI,EAAC,cAAc,IAAK,KAAK,EAAI,CAAA;AAC3D,CAAC,CAAC,CAAA;AAEF,oBAAY,CAAC,WAAW,GAAG,cAAc,CAAA"}

package/lib/components/ThreeDSecure/ThreeDSecure.d.ts

@@ -0,0 +1,2 @@
+import { ThreeDSecureOptions } from "../../types";
+export declare const ThreeDSecure: import("react").ForwardRefExoticComponent<Omit<ThreeDSecureOptions, "ref"> & import("react").RefAttributes<HTMLElement>>;

package/lib/components/ThreeDSecure/ThreeDSecure.js

@@ -0,0 +1,22 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ThreeDSecure = void 0;
+var react_1 = require("react");
+var use_three_d_secure_1 = require("../../hooks/use-three-d-secure");
+exports.ThreeDSecure = (0, react_1.forwardRef)(function (options, ref) {
+    (0, use_three_d_secure_1.useThreeDSecure)(__assign({ ref: ref }, options));
+    return null;
+});
+exports.ThreeDSecure.displayName = 'ThreeDSecure';
+//# sourceMappingURL=ThreeDSecure.js.map

package/lib/components/ThreeDSecure/ThreeDSecure.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ThreeDSecure.js","sourceRoot":"","sources":["../../../src/components/ThreeDSecure/ThreeDSecure.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;AAAA,+BAAoD;AACpD,qEAA0D;AAG7C,QAAA,YAAY,GAAG,IAAA,kBAAU,EACpC,UAAC,OAAO,EAAE,GAAG;IACX,IAAA,oCAAe,aAAG,GAAG,EAAE,GAAoC,IAAK,OAAO,EAAG,CAAA;IAC1E,OAAO,IAAI,CAAA;AACb,CAAC,CACF,CAAA;AAED,oBAAY,CAAC,WAAW,GAAG,cAAc,CAAA"}

package/lib/components/ThreeDSecure/index.d.ts

@@ -0,0 +1 @@
+export { ThreeDSecure } from './ThreeDSecure';

package/lib/components/ThreeDSecure/index.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ThreeDSecure = void 0;
+var ThreeDSecure_1 = require("./ThreeDSecure");
+Object.defineProperty(exports, "ThreeDSecure", { enumerable: true, get: function () { return ThreeDSecure_1.ThreeDSecure; } });
+//# sourceMappingURL=index.js.map

package/lib/components/ThreeDSecure/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/ThreeDSecure/index.ts"],"names":[],"mappings":";;;AAAA,+CAA6C;AAApC,4GAAA,YAAY,OAAA"}

package/lib/hooks/use-click-to-pay.js

@@ -20,8 +20,8 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
     });
 };
 var __generator = (this && this.__generator) || function (thisArg, body) {
-    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
-    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g = Object.create((typeof Iterator === "function" ? Iterator : Object).prototype);
+    return g.next = verb(0), g["throw"] = verb(1), g["return"] = verb(2), typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
     function verb(n) { return function (v) { return step([n, v]); }; }
     function step(op) {
         if (f) throw new TypeError("Generator is already executing.");

package/lib/hooks/use-click-to-pay.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-click-to-pay.js","sourceRoot":"","sources":["../../src/hooks/use-click-to-pay.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+BAAiC;AAEjC,yDAAqD;AAE9C,IAAM,aAAa,GAAG,UAAC,OAA0B;IAChD,IAAA,KAA8C,IAAA,mCAAe,GAAE,EAA7D,YAAY,kBAAA,EAAE,UAAU,gBAAA,EAAE,aAAa,mBAAsB,CAAA;IAC7D,IAAA,GAAG,GAAc,OAAO,IAArB,EAAK,IAAI,UAAK,OAAO,EAA1B,OAAgB,CAAF,CAAY;IAEhC,IAAM,QAAQ,GAAG;;;;;oBACf,IAAI,CAAC,YAAY,IAAI,CAAC,CAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,GAAG,CAAA,IAAI,UAAU,EAAE;wBAChD,sBAAM;qBACP;oBACD,KAAA,aAAa,CAAA;oBACX,qBAAM,YAAY,CAAC,aAAa,CAAC,GAAG,aAAH,GAAG,uBAAH,GAAG,CAAE,OAAO,wBACxC,IAAI,KACP,QAAQ,EAAE,0BAA0B,EACpC,MAAM,EAAE,uBAAuB,IAC/B,EAAA;;oBALJ,kBACE,SAIE,EACH,CAAA;;;;SACF,CAAA;IAED,IAAA,iBAAS,EAAC;QACR,QAAQ,EAAE,CAAA;QACV,uDAAuD;IACzD,CAAC,EAAE,CAAC,YAAY,CAAC,CAAC,CAAA;IAElB,OAAO,UAAU,CAAA;AACnB,CAAC,CAAA;AAvBY,QAAA,aAAa,iBAuBzB"}
+{"version":3,"file":"use-click-to-pay.js","sourceRoot":"","sources":["../../src/hooks/use-click-to-pay.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+BAAiC;AAEjC,yDAAqD;AAE9C,IAAM,aAAa,GAAG,UAAC,OAA0B;IAChD,IAAA,KAA8C,IAAA,mCAAe,GAAE,EAA7D,YAAY,kBAAA,EAAE,UAAU,gBAAA,EAAE,aAAa,mBAAsB,CAAA;IAC7D,IAAA,GAAG,GAAc,OAAO,IAArB,EAAK,IAAI,UAAK,OAAO,EAA1B,OAAgB,CAAF,CAAY;IAEhC,IAAM,QAAQ,GAAG;;;;;oBACf,IAAI,CAAC,YAAY,IAAI,CAAC,CAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,GAAG,CAAA,IAAI,UAAU,EAAE,CAAC;wBACjD,sBAAM;oBACR,CAAC;oBACD,KAAA,aAAa,CAAA;oBACX,qBAAM,YAAY,CAAC,aAAa,CAAC,GAAG,aAAH,GAAG,uBAAH,GAAG,CAAE,OAAO,wBACxC,IAAI,KACP,QAAQ,EAAE,0BAA0B,EACpC,MAAM,EAAE,uBAAuB,IAC/B,EAAA;;oBALJ,kBACE,SAIE,EACH,CAAA;;;;SACF,CAAA;IAED,IAAA,iBAAS,EAAC;QACR,QAAQ,EAAE,CAAA;QACV,uDAAuD;IACzD,CAAC,EAAE,CAAC,YAAY,CAAC,CAAC,CAAA;IAElB,OAAO,UAAU,CAAA;AACnB,CAAC,CAAA;AAvBY,QAAA,aAAa,iBAuBzB"}

package/lib/hooks/use-secure-fields.js

@@ -1,15 +1,4 @@
 "use strict";
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
 var __rest = (this && this.__rest) || function (s, e) {
     var t = {};
     for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
@@ -73,7 +62,7 @@ var SecureFieldsProvider = function (_a) {
         };
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [secureFields, handlersDeps]);
-    return ((0, jsx_runtime_1.jsx)(exports.SecureFieldsContext.Provider, __assign({ value: { secureFields: secureFields, debug: debug, clickToPay: clickToPay, setClickToPay: setClickToPay } }, { children: children })));
+    return ((0, jsx_runtime_1.jsx)(exports.SecureFieldsContext.Provider, { value: { secureFields: secureFields, debug: debug, clickToPay: clickToPay, setClickToPay: setClickToPay }, children: children }));
 };
 exports.SecureFieldsProvider = SecureFieldsProvider;
 var useSecureFields = function () {

package/lib/hooks/use-secure-fields.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-secure-fields.js","sourceRoot":"","sources":["../../src/hooks/use-secure-fields.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"use-secure-fields.js","sourceRoot":"","sources":["../../src/hooks/use-secure-fields.tsx"],"names":[],"mappings":"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"}

package/lib/hooks/use-secure-input.js

@@ -44,9 +44,12 @@ var useSecureInput = function (options) {
         return secureFields.addField(ref.current, __assign({ type: type }, rest));
     };
     (0, react_1.useEffect)(function () {
+        if (!secureFields || !(ref === null || ref === void 0 ? void 0 : ref.current) || !(options === null || options === void 0 ? void 0 : options.type) || field) {
+            return;
+        }
         setField(addField(options === null || options === void 0 ? void 0 : options.type));
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [secureFields]);
+    }, [secureFields, ref === null || ref === void 0 ? void 0 : ref.current, options === null || options === void 0 ? void 0 : options.type, field]);
     (0, react_1.useEffect)(function () {
         if (!field)
             return;
@@ -54,9 +57,9 @@ var useSecureInput = function (options) {
         onFocus && field.addEventListener('focus', onFocus);
         onInput && field.addEventListener('input', onInput);
         return function () {
-            onBlur && field.addEventListener('blur', onBlur);
-            onFocus && field.addEventListener('focus', onFocus);
-            onInput && field.addEventListener('input', onInput);
+            onBlur && field.removeEventListener('blur', onBlur);
+            onFocus && field.removeEventListener('focus', onFocus);
+            onInput && field.removeEventListener('input', onInput);
         };
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [secureFields, field]);

package/lib/hooks/use-secure-input.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-secure-input.js","sourceRoot":"","sources":["../../src/hooks/use-secure-input.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AACA,+BAA2C;AAC3C,yDAAyD;AAGzD,IAAM,WAAW,GAAG;IAClB,MAAM,EAAE,oBAAoB;IAC5B,UAAU,EAAE,oBAAoB;IAChC,YAAY,EAAE,sBAAsB;CACrC,CAAA;AAEM,IAAM,cAAc,GAAG,UAAC,OAAe;IACpC,IAAA,YAAY,GAAK,IAAA,mCAAe,GAAE,aAAtB,CAAsB;IACpC,IAAA,KAAoB,IAAA,gBAAQ,GAAe,EAA1C,KAAK,QAAA,EAAE,QAAQ,QAA2B,CAAA;IACzC,IAAA,GAAG,GAA8C,OAAO,IAArD,EAAE,IAAI,GAAwC,OAAO,KAA/C,EAAE,MAAM,GAAgC,OAAO,OAAvC,EAAE,OAAO,GAAuB,OAAO,QAA9B,EAAE,OAAO,GAAc,OAAO,QAArB,EAAK,IAAI,UAAK,OAAO,EAA1D,+CAAgD,CAAF,CAAY;IAEhE,IAAM,QAAQ,GAAG,UAAC,IAAmB;QACnC,IAAI,CAAC,YAAY,IAAI,CAAC,CAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,GAAG,CAAA,IAAI,KAAK,EAAE;YAC3C,OAAM;SACP;QAED,IAAI,MAAM,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE;YAC3C,OAAO,YAAY,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC,CAAC,GAAG,CAAC,OAAO,eAAO,IAAI,EAAG,CAAA;SACjE;QAED,OAAO,YAAY,CAAC,QAAQ,CAAC,GAAG,CAAC,OAAO,aAAI,IAAI,MAAA,IAAK,IAAI,EAAG,CAAA;IAC9D,CAAC,CAAA;IAED,IAAA,iBAAS,EAAC;QACR,QAAQ,CAAC,QAAQ,CAAC,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,IAAI,CAAC,CAAC,CAAA;QACjC,uDAAuD;IACzD,CAAC,EAAE,CAAC,YAAY,CAAC,CAAC,CAAA;IAElB,IAAA,iBAAS,EAAC;QACR,IAAI,CAAC,KAAK;YAAE,OAAM;QAElB,MAAM,IAAI,KAAK,CAAC,gBAAgB,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;QAChD,OAAO,IAAI,KAAK,CAAC,gBAAgB,CAAC,OAAO,EAAE,OAAO,CAAC,CAAA;QACnD,OAAO,IAAI,KAAK,CAAC,gBAAgB,CAAC,OAAO,EAAE,OAAO,CAAC,CAAA;QAEnD,OAAO;YACL,MAAM,IAAI,KAAK,CAAC,gBAAgB,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;YAChD,OAAO,IAAI,KAAK,CAAC,gBAAgB,CAAC,OAAO,EAAE,OAAO,CAAC,CAAA;YACnD,OAAO,IAAI,KAAK,CAAC,gBAAgB,CAAC,OAAO,EAAE,OAAO,CAAC,CAAA;QACrD,CAAC,CAAA;QACD,uDAAuD;IACzD,CAAC,EAAE,CAAC,YAAY,EAAE,KAAK,CAAC,CAAC,CAAA;IAEzB,OAAO,KAAK,CAAA;AACd,CAAC,CAAA;AAtCY,QAAA,cAAc,kBAsC1B"}
+{"version":3,"file":"use-secure-input.js","sourceRoot":"","sources":["../../src/hooks/use-secure-input.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AACA,+BAA2C;AAC3C,yDAAyD;AAGzD,IAAM,WAAW,GAAG;IAClB,MAAM,EAAE,oBAAoB;IAC5B,UAAU,EAAE,oBAAoB;IAChC,YAAY,EAAE,sBAAsB;CACrC,CAAA;AAEM,IAAM,cAAc,GAAG,UAAC,OAAe;IACpC,IAAA,YAAY,GAAK,IAAA,mCAAe,GAAE,aAAtB,CAAsB;IACpC,IAAA,KAAoB,IAAA,gBAAQ,GAAe,EAA1C,KAAK,QAAA,EAAE,QAAQ,QAA2B,CAAA;IACzC,IAAA,GAAG,GAA8C,OAAO,IAArD,EAAE,IAAI,GAAwC,OAAO,KAA/C,EAAE,MAAM,GAAgC,OAAO,OAAvC,EAAE,OAAO,GAAuB,OAAO,QAA9B,EAAE,OAAO,GAAc,OAAO,QAArB,EAAK,IAAI,UAAK,OAAO,EAA1D,+CAAgD,CAAF,CAAY;IAEhE,IAAM,QAAQ,GAAG,UAAC,IAAmB;QACnC,IAAI,CAAC,YAAY,IAAI,CAAC,CAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,GAAG,CAAA,IAAI,KAAK,EAAE,CAAC;YAC5C,OAAM;QACR,CAAC;QAED,IAAI,MAAM,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC;YAC5C,OAAO,YAAY,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC,CAAC,GAAG,CAAC,OAAO,eAAO,IAAI,EAAG,CAAA;QAClE,CAAC;QAED,OAAO,YAAY,CAAC,QAAQ,CAAC,GAAG,CAAC,OAAO,aAAI,IAAI,MAAA,IAAK,IAAI,EAAG,CAAA;IAC9D,CAAC,CAAA;IAED,IAAA,iBAAS,EAAC;QACR,IAAI,CAAC,YAAY,IAAI,CAAC,CAAA,GAAG,aAAH,GAAG,uBAAH,GAAG,CAAE,OAAO,CAAA,IAAI,CAAC,CAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,IAAI,CAAA,IAAI,KAAK,EAAE,CAAC;YAC9D,OAAM;QACR,CAAC;QAED,QAAQ,CAAC,QAAQ,CAAC,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,IAAI,CAAC,CAAC,CAAA;QACjC,uDAAuD;IACzD,CAAC,EAAE,CAAC,YAAY,EAAE,GAAG,aAAH,GAAG,uBAAH,GAAG,CAAE,OAAO,EAAE,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,IAAI,EAAE,KAAK,CAAC,CAAC,CAAA;IAEtD,IAAA,iBAAS,EAAC;QACR,IAAI,CAAC,KAAK;YAAE,OAAM;QAElB,MAAM,IAAI,KAAK,CAAC,gBAAgB,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;QAChD,OAAO,IAAI,KAAK,CAAC,gBAAgB,CAAC,OAAO,EAAE,OAAO,CAAC,CAAA;QACnD,OAAO,IAAI,KAAK,CAAC,gBAAgB,CAAC,OAAO,EAAE,OAAO,CAAC,CAAA;QAEnD,OAAO;YACL,MAAM,IAAI,KAAK,CAAC,mBAAmB,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;YACnD,OAAO,IAAI,KAAK,CAAC,mBAAmB,CAAC,OAAO,EAAE,OAAO,CAAC,CAAA;YACtD,OAAO,IAAI,KAAK,CAAC,mBAAmB,CAAC,OAAO,EAAE,OAAO,CAAC,CAAA;QACxD,CAAC,CAAA;QACD,uDAAuD;IACzD,CAAC,EAAE,CAAC,YAAY,EAAE,KAAK,CAAC,CAAC,CAAA;IAEzB,OAAO,KAAK,CAAA;AACd,CAAC,CAAA;AA1CY,QAAA,cAAc,kBA0C1B"}

package/lib/hooks/use-three-d-secure.d.ts

@@ -0,0 +1,2 @@
+import { ThreeDSecureOptions } from "../types";
+export declare const useThreeDSecure: (options?: ThreeDSecureOptions) => void;

package/lib/hooks/use-three-d-secure.js

@@ -0,0 +1,33 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useThreeDSecure = void 0;
+var secure_fields_1 = require("@gr4vy/secure-fields");
+var react_1 = require("react");
+var use_secure_fields_1 = require("./use-secure-fields");
+var useThreeDSecure = function (options) {
+    var secureFields = (0, use_secure_fields_1.useSecureFields)().secureFields;
+    var _a = options || {}, ref = _a.ref, challengeWindowSize = _a.challengeWindowSize, onThreeDSFinish = _a.onThreeDSFinish, onThreeDSStart = _a.onThreeDSStart;
+    (0, react_1.useEffect)(function () {
+        if (!secureFields || !(ref === null || ref === void 0 ? void 0 : ref.current)) {
+            return;
+        }
+        secureFields.addThreeDSecure(ref.current, { challengeWindowSize: challengeWindowSize });
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [secureFields]);
+    (0, react_1.useEffect)(function () {
+        if (!secureFields)
+            return;
+        onThreeDSStart &&
+            secureFields.addEventListener(secure_fields_1.SecureFields.Events.THREE_DS_START, onThreeDSStart);
+        onThreeDSFinish &&
+            secureFields.addEventListener(secure_fields_1.SecureFields.Events.THREE_DS_FINISH, onThreeDSFinish);
+        return function () {
+            onThreeDSStart &&
+                secureFields.removeEventListener(secure_fields_1.SecureFields.Events.THREE_DS_START, onThreeDSStart);
+            onThreeDSFinish &&
+                secureFields.removeEventListener(secure_fields_1.SecureFields.Events.THREE_DS_FINISH, onThreeDSFinish);
+        };
+    }, [secureFields, onThreeDSStart, onThreeDSFinish]);
+};
+exports.useThreeDSecure = useThreeDSecure;
+//# sourceMappingURL=use-three-d-secure.js.map

package/lib/hooks/use-three-d-secure.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-three-d-secure.js","sourceRoot":"","sources":["../../src/hooks/use-three-d-secure.tsx"],"names":[],"mappings":";;;AAAA,sDAAmD;AACnD,+BAAiC;AAEjC,yDAAqD;AAE9C,IAAM,eAAe,GAAG,UAAC,OAA6B;IACnD,IAAA,YAAY,GAAK,IAAA,mCAAe,GAAE,aAAtB,CAAsB;IACpC,IAAA,KACJ,OAAO,IAAI,EAAE,EADP,GAAG,SAAA,EAAE,mBAAmB,yBAAA,EAAE,eAAe,qBAAA,EAAE,cAAc,oBAClD,CAAA;IAEf,IAAA,iBAAS,EAAC;QACR,IAAI,CAAC,YAAY,IAAI,CAAC,CAAA,GAAG,aAAH,GAAG,uBAAH,GAAG,CAAE,OAAO,CAAA,EAAE,CAAC;YACnC,OAAM;QACR,CAAC;QAED,YAAY,CAAC,eAAe,CAAC,GAAG,CAAC,OAAO,EAAE,EAAE,mBAAmB,qBAAA,EAAE,CAAC,CAAA;QAClE,uDAAuD;IACzD,CAAC,EAAE,CAAC,YAAY,CAAC,CAAC,CAAA;IAElB,IAAA,iBAAS,EAAC;QACR,IAAI,CAAC,YAAY;YAAE,OAAM;QAEzB,cAAc;YACZ,YAAY,CAAC,gBAAgB,CAC3B,4BAAY,CAAC,MAAM,CAAC,cAAc,EAClC,cAAc,CACf,CAAA;QACH,eAAe;YACb,YAAY,CAAC,gBAAgB,CAC3B,4BAAY,CAAC,MAAM,CAAC,eAAe,EACnC,eAAe,CAChB,CAAA;QAEH,OAAO;YACL,cAAc;gBACZ,YAAY,CAAC,mBAAmB,CAC9B,4BAAY,CAAC,MAAM,CAAC,cAAc,EAClC,cAAc,CACf,CAAA;YACH,eAAe;gBACb,YAAY,CAAC,mBAAmB,CAC9B,4BAAY,CAAC,MAAM,CAAC,eAAe,EACnC,eAAe,CAChB,CAAA;QACL,CAAC,CAAA;IACH,CAAC,EAAE,CAAC,YAAY,EAAE,cAAc,EAAE,eAAe,CAAC,CAAC,CAAA;AACrD,CAAC,CAAA;AAzCY,QAAA,eAAe,mBAyC3B"}

package/lib/index.d.ts

@@ -5,5 +5,7 @@ export { ExpiryDate } from "./components/ExpiryDate";
 export { SecureFields } from "./components/SecureFields";
 export { SecurityCode } from "./components/SecurityCode";
 export { Field } from "./components/Field";
+export { ThreeDSecure } from "./components/ThreeDSecure";
+export { useThreeDSecure } from "./hooks/use-three-d-secure";
 export { useSecureFields } from "./hooks/use-secure-fields";
 export { useSecureInput } from "./hooks/use-secure-input";

package/lib/index.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useSecureInput = exports.useSecureFields = exports.Field = exports.SecurityCode = exports.SecureFields = exports.ExpiryDate = exports.ClickToPaySignIn = exports.ClickToPay = exports.CardNumber = exports.CardForm = void 0;
+exports.useSecureInput = exports.useSecureFields = exports.useThreeDSecure = exports.ThreeDSecure = exports.Field = exports.SecurityCode = exports.SecureFields = exports.ExpiryDate = exports.ClickToPaySignIn = exports.ClickToPay = exports.CardNumber = exports.CardForm = void 0;
 var CardForm_1 = require("./components/CardForm");
 Object.defineProperty(exports, "CardForm", { enumerable: true, get: function () { return CardForm_1.CardForm; } });
 var CardNumber_1 = require("./components/CardNumber");
@@ -16,6 +16,10 @@ var SecurityCode_1 = require("./components/SecurityCode");
 Object.defineProperty(exports, "SecurityCode", { enumerable: true, get: function () { return SecurityCode_1.SecurityCode; } });
 var Field_1 = require("./components/Field");
 Object.defineProperty(exports, "Field", { enumerable: true, get: function () { return Field_1.Field; } });
+var ThreeDSecure_1 = require("./components/ThreeDSecure");
+Object.defineProperty(exports, "ThreeDSecure", { enumerable: true, get: function () { return ThreeDSecure_1.ThreeDSecure; } });
+var use_three_d_secure_1 = require("./hooks/use-three-d-secure");
+Object.defineProperty(exports, "useThreeDSecure", { enumerable: true, get: function () { return use_three_d_secure_1.useThreeDSecure; } });
 var use_secure_fields_1 = require("./hooks/use-secure-fields");
 Object.defineProperty(exports, "useSecureFields", { enumerable: true, get: function () { return use_secure_fields_1.useSecureFields; } });
 var use_secure_input_1 = require("./hooks/use-secure-input");

package/lib/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":";;;AAAA,kDAA8C;AAArC,oGAAA,QAAQ,OAAA;AACjB,sDAAkD;AAAzC,wGAAA,UAAU,OAAA;AACnB,sDAAoE;AAA3D,wGAAA,UAAU,OAAA;AAAE,8GAAA,gBAAgB,OAAA;AACrC,sDAAkD;AAAzC,wGAAA,UAAU,OAAA;AACnB,0DAAsD;AAA7C,4GAAA,YAAY,OAAA;AACrB,0DAAsD;AAA7C,4GAAA,YAAY,OAAA;AACrB,4CAAwC;AAA/B,8FAAA,KAAK,OAAA;AACd,+DAAyD;AAAhD,oHAAA,eAAe,OAAA;AACxB,6DAAuD;AAA9C,kHAAA,cAAc,OAAA"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":";;;AAAA,kDAA8C;AAArC,oGAAA,QAAQ,OAAA;AACjB,sDAAkD;AAAzC,wGAAA,UAAU,OAAA;AACnB,sDAAoE;AAA3D,wGAAA,UAAU,OAAA;AAAE,8GAAA,gBAAgB,OAAA;AACrC,sDAAkD;AAAzC,wGAAA,UAAU,OAAA;AACnB,0DAAsD;AAA7C,4GAAA,YAAY,OAAA;AACrB,0DAAsD;AAA7C,4GAAA,YAAY,OAAA;AACrB,4CAAwC;AAA/B,8FAAA,KAAK,OAAA;AACd,0DAAsD;AAA7C,4GAAA,YAAY,OAAA;AACrB,iEAA0D;AAAjD,qHAAA,eAAe,OAAA;AACxB,+DAAyD;AAAhD,oHAAA,eAAe,OAAA;AACxB,6DAAuD;AAA9C,kHAAA,cAAc,OAAA"}

package/lib/types.d.ts

@@ -1,4 +1,4 @@
-import { ClickToPayOptions as BaseClickToPayOptions, ClickToPayInstance, Config as BaseConfig, Field as BaseField, FormChangeEventData } from '@gr4vy/secure-fields';
+import { ClickToPayOptions as BaseClickToPayOptions, ClickToPayInstance, Config as BaseConfig, Field as BaseField, FormChangeEventData, ThreeDSecureOptions as BaseThreeDSecureOptions } from '@gr4vy/secure-fields';
 import { MutableRefObject } from 'react';
 export type CardVaultFailureData = {
     status: number;
@@ -33,9 +33,21 @@ export type Field = BaseField & {
     onFocus?: (data: any) => void;
     onInput?: (data: any) => void;
 };
+export type FieldHandle = {
+    clear: () => void;
+};
 export type ClickToPayOptions = BaseClickToPayOptions & {
     ref?: MutableRefObject<HTMLElement>;
 };
 export type ClickToPayComponentProps = JSX.IntrinsicElements['div'] & {
     onVisibilityChange?: (visible: boolean) => void;
 };
+export type ThreeDSEventData = {
+    element: HTMLElement;
+    [key: string]: unknown;
+};
+export type ThreeDSecureOptions = BaseThreeDSecureOptions & {
+    ref?: MutableRefObject<HTMLElement>;
+    onThreeDSStart?: (data: ThreeDSEventData) => void;
+    onThreeDSFinish?: (data: ThreeDSEventData) => void;
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gr4vy/secure-fields-react",
-  "version": "2.2.6",
+  "version": "2.3.0--canary.1104.02821af.0",
   "description": "Gr4vy-hosted secure fields offering advanced theming, PCI compliance, event handling, and more.",
   "main": "lib/index",
   "types": "lib/index",
@@ -22,7 +22,7 @@
     "build": "tsc -p tsconfig.prod.json && cp ../secure-fields/src/style.css ./lib/style.css",
     "clean": "rm -rf lib *.tgz",
     "dev": "TOKEN=$(yarn --silent token) webpack serve --config webpack.dev.js",
-    "lint": "eslint src --ext ts,tsx",
+    "lint": "eslint src/**/*.{ts,tsx}",
     "prebuild": "yarn clean",
     "prepack": "yarn build",
     "serve:watch": "yarn run watch",
@@ -41,19 +41,19 @@
     "react-dom": ">=17.0.0"
   },
   "dependencies": {
-    "@gr4vy/secure-fields": "^2.2.6"
+    "@gr4vy/secure-fields": "2.3.0--canary.1104.02821af.0"
   },
   "devDependencies": {
     "@testing-library/react": "^12.1.5",
     "@testing-library/react-hooks": "^8.0.1",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
-    "ts-patch": "^2.1.0",
+    "ts-patch": "^3.3.0",
     "typescript-transform-paths": "^3.5.6"
   },
   "publishConfig": {
     "access": "public",
     "registry": "https://registry.npmjs.org"
   },
-  "gitHead": "1d022b7c6ca0a695fe40d88e951da733392f21da"
+  "gitHead": "02821af8e20266bb75ffe2c1115829213181266b"
 }