@gr4vy/secure-fields-react 0.5.4 → 0.6.0

package/CHANGELOG.md

@@ -1,3 +1,20 @@
+# v0.6.0 (Wed Sep 21 2022)
+
+#### 🚀 Enhancement
+
+- feat: hooks and components [#40](https://github.com/gr4vy/secure-fields/pull/40) ([@luca-gr4vy](https://github.com/luca-gr4vy))
+
+#### 🏠 Internal
+
+- task: add react dev [#51](https://github.com/gr4vy/secure-fields/pull/51) ([@luca-gr4vy](https://github.com/luca-gr4vy))
+- fix: example-react prod build [#50](https://github.com/gr4vy/secure-fields/pull/50) ([@luca-gr4vy](https://github.com/luca-gr4vy))
+
+#### Authors: 1
+
+- Luca Allievi ([@luca-gr4vy](https://github.com/luca-gr4vy))
+
+---
+
 # v0.5.4 (Fri Sep 16 2022)
 
 #### 🏠 Internal

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

@@ -1,3 +1,3 @@
 /// <reference types="react" />
-import type { Field } from '@gr4vy/secure-fields';
-export declare const CardNumber: (props: Field) => JSX.Element;
+import { Field as FieldProps } from '../../types';
+export declare const CardNumber: (props: Omit<FieldProps, 'type'>) => JSX.Element;

package/lib/components/CardNumber/CardNumber.js

@@ -13,8 +13,9 @@ 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 Field_1 = require("../Field");
 var CardNumber = function (props) {
-    return (0, jsx_runtime_1.jsx)("input", __assign({}, props));
+    return (0, jsx_runtime_1.jsx)(Field_1.Field, __assign({ type: "number" }, props));
 };
 exports.CardNumber = 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":";;;;;;;;;;;;;;;AAEO,IAAM,UAAU,GAAG,UAAC,KAAY;IACrC,OAAO,6CAAW,KAAK,EAAI,CAAA;AAC7B,CAAC,CAAA;AAFY,QAAA,UAAU,cAEtB"}
+{"version":3,"file":"CardNumber.js","sourceRoot":"","sources":["../../../src/components/CardNumber/CardNumber.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;AACA,kCAAgC;AAEzB,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"}

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

@@ -1,3 +1,3 @@
 /// <reference types="react" />
-import type { Field } from '@gr4vy/secure-fields';
-export declare const ExpiryDate: (props: Field) => JSX.Element;
+import { Field as FieldProps } from '../../types';
+export declare const ExpiryDate: (props: Omit<FieldProps, 'type'>) => JSX.Element;

package/lib/components/ExpiryDate/ExpiryDate.js

@@ -13,8 +13,9 @@ 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 Field_1 = require("../Field");
 var ExpiryDate = function (props) {
-    return (0, jsx_runtime_1.jsx)("input", __assign({}, props));
+    return (0, jsx_runtime_1.jsx)(Field_1.Field, __assign({ type: "expiryDate" }, props));
 };
 exports.ExpiryDate = 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":";;;;;;;;;;;;;;;AAEO,IAAM,UAAU,GAAG,UAAC,KAAY;IACrC,OAAO,6CAAW,KAAK,EAAI,CAAA;AAC7B,CAAC,CAAA;AAFY,QAAA,UAAU,cAEtB"}
+{"version":3,"file":"ExpiryDate.js","sourceRoot":"","sources":["../../../src/components/ExpiryDate/ExpiryDate.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;AACA,kCAAgC;AAEzB,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"}

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

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { Field as FieldProps } from '../../types';
+export declare const Field: (props: FieldProps) => JSX.Element;

package/lib/components/Field/Field.js

@@ -0,0 +1,24 @@
+"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.Field = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
+var __1 = require("../..");
+var Field = function (props) {
+    var ref = (0, react_1.useRef)();
+    (0, __1.useSecureInput)(__assign(__assign({}, props), { ref: ref }));
+    return (0, jsx_runtime_1.jsx)("input", { ref: ref });
+};
+exports.Field = Field;
+//# sourceMappingURL=Field.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Field.js","sourceRoot":"","sources":["../../../src/components/Field/Field.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;AAAA,+BAA8B;AAC9B,2BAAsC;AAG/B,IAAM,KAAK,GAAG,UAAC,KAAiB;IACrC,IAAM,GAAG,GAAG,IAAA,cAAM,GAAE,CAAA;IACpB,IAAA,kBAAc,wBAAM,KAAK,KAAE,GAAG,KAAA,IAAG,CAAA;IACjC,OAAO,kCAAO,GAAG,EAAE,GAAG,GAAI,CAAA;AAC5B,CAAC,CAAA;AAJY,QAAA,KAAK,SAIjB"}

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

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

package/lib/components/Field/index.js

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Field/index.ts"],"names":[],"mappings":";;;AAAA,iCAA+B;AAAtB,8FAAA,KAAK,OAAA"}

package/lib/components/SecureFields/SecureFields.d.ts

@@ -1,9 +1,6 @@
 import { ReactNode } from 'react';
+import { Config } from '../../types';
 export declare type Props = {
     children?: ReactNode;
-    debug?: boolean;
-    onCardVaultFailure?: (error: any) => void;
-    onCardVaultSuccess?: () => void;
-    ready?: () => void;
-};
-export declare const SecureFields: ({ children }: Props) => JSX.Element;
+} & Config;
+export declare const SecureFields: ({ children, ...config }: Props) => JSX.Element;

package/lib/components/SecureFields/SecureFields.js

@@ -1,10 +1,33 @@
 "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)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.SecureFields = void 0;
 var jsx_runtime_1 = require("react/jsx-runtime");
+var use_secure_fields_1 = require("../../hooks/use-secure-fields");
 var SecureFields = function (_a) {
-    var children = _a.children;
-    return (0, jsx_runtime_1.jsx)("div", { children: children });
+    var children = _a.children, config = __rest(_a, ["children"]);
+    return (0, jsx_runtime_1.jsx)(use_secure_fields_1.SecureFieldsProvider, __assign({}, config, { children: children }));
 };
 exports.SecureFields = SecureFields;
 //# sourceMappingURL=SecureFields.js.map

package/lib/components/SecureFields/SecureFields.js.map

@@ -1 +1 @@
-{"version":3,"file":"SecureFields.js","sourceRoot":"","sources":["../../../src/components/SecureFields/SecureFields.tsx"],"names":[],"mappings":";;;;AAUO,IAAM,YAAY,GAAG,UAAC,EAAmB;QAAjB,QAAQ,cAAA;IACrC,OAAO,0CAAM,QAAQ,GAAO,CAAA;AAC9B,CAAC,CAAA;AAFY,QAAA,YAAY,gBAExB"}
+{"version":3,"file":"SecureFields.js","sourceRoot":"","sources":["../../../src/components/SecureFields/SecureFields.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AACA,mEAAoE;AAO7D,IAAM,YAAY,GAAG,UAAC,EAA8B;IAA5B,IAAA,QAAQ,cAAA,EAAK,MAAM,cAArB,YAAuB,CAAF;IAChD,OAAO,uBAAC,wCAAoB,eAAK,MAAM,cAAG,QAAQ,IAAwB,CAAA;AAC5E,CAAC,CAAA;AAFY,QAAA,YAAY,gBAExB"}

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

@@ -1,3 +1,3 @@
 /// <reference types="react" />
-import type { Field } from '@gr4vy/secure-fields';
-export declare const SecurityCode: (props: Field) => JSX.Element;
+import { Field as FieldProps } from '../../types';
+export declare const SecurityCode: (props: Omit<FieldProps, 'type'>) => JSX.Element;

package/lib/components/SecurityCode/SecurityCode.js

@@ -13,8 +13,9 @@ 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 Field_1 = require("../Field");
 var SecurityCode = function (props) {
-    return (0, jsx_runtime_1.jsx)("input", __assign({}, props));
+    return (0, jsx_runtime_1.jsx)(Field_1.Field, __assign({ type: "securityCode" }, props));
 };
 exports.SecurityCode = 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":";;;;;;;;;;;;;;;AAEO,IAAM,YAAY,GAAG,UAAC,KAAY;IACvC,OAAO,6CAAW,KAAK,EAAI,CAAA;AAC7B,CAAC,CAAA;AAFY,QAAA,YAAY,gBAExB"}
+{"version":3,"file":"SecurityCode.js","sourceRoot":"","sources":["../../../src/components/SecurityCode/SecurityCode.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;AACA,kCAAgC;AAEzB,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"}

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

@@ -0,0 +1,12 @@
+import { SecureFields } from '@gr4vy/secure-fields';
+import { PropsWithChildren } from 'react';
+import { Config } from '../types';
+export declare const SecureFieldsContext: import("react").Context<{
+    secureFields: SecureFields;
+    debug: boolean;
+}>;
+export declare const SecureFieldsProvider: ({ children, ...config }: PropsWithChildren<Config>) => JSX.Element;
+export declare const useSecureFields: () => {
+    secureFields: SecureFields;
+    debug: boolean;
+};

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

@@ -0,0 +1,63 @@
+"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)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useSecureFields = exports.SecureFieldsProvider = exports.SecureFieldsContext = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var secure_fields_1 = require("@gr4vy/secure-fields");
+var react_1 = require("react");
+exports.SecureFieldsContext = (0, react_1.createContext)(null);
+var SecureFieldsProvider = function (_a) {
+    var children = _a.children, config = __rest(_a, ["children"]);
+    var sessionId = config.sessionId, debug = config.debug, onReady = config.onReady, onCardVaultSuccess = config.onCardVaultSuccess, onCardVaultFailure = config.onCardVaultFailure;
+    var _b = (0, react_1.useState)(), secureFields = _b[0], setSecureFields = _b[1];
+    (0, react_1.useEffect)(function () {
+        setSecureFields(new secure_fields_1.SecureFields(config));
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [sessionId]);
+    (0, react_1.useEffect)(function () {
+        secureFields === null || secureFields === void 0 ? void 0 : secureFields.setDebug(debug);
+        onReady &&
+            (secureFields === null || secureFields === void 0 ? void 0 : secureFields.addEventListener(secure_fields_1.SecureFields.Events.READY, onReady));
+        onCardVaultSuccess &&
+            (secureFields === null || secureFields === void 0 ? void 0 : secureFields.addEventListener(secure_fields_1.SecureFields.Events.CARD_VAULT_SUCCESS, onCardVaultSuccess));
+        onCardVaultFailure &&
+            (secureFields === null || secureFields === void 0 ? void 0 : secureFields.addEventListener(secure_fields_1.SecureFields.Events.CARD_VAULT_FAILURE, onCardVaultFailure));
+        return function () {
+            onReady &&
+                (secureFields === null || secureFields === void 0 ? void 0 : secureFields.removeEventListener(secure_fields_1.SecureFields.Events.READY, onReady));
+            onCardVaultSuccess &&
+                (secureFields === null || secureFields === void 0 ? void 0 : secureFields.removeEventListener(secure_fields_1.SecureFields.Events.CARD_VAULT_SUCCESS, onCardVaultSuccess));
+            onCardVaultFailure &&
+                (secureFields === null || secureFields === void 0 ? void 0 : secureFields.removeEventListener(secure_fields_1.SecureFields.Events.CARD_VAULT_FAILURE, onCardVaultFailure));
+        };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [secureFields]);
+    return ((0, jsx_runtime_1.jsx)(exports.SecureFieldsContext.Provider, __assign({ value: { secureFields: secureFields, debug: debug } }, { children: children })));
+};
+exports.SecureFieldsProvider = SecureFieldsProvider;
+var useSecureFields = function () {
+    return (0, react_1.useContext)(exports.SecureFieldsContext);
+};
+exports.useSecureFields = useSecureFields;
+//# sourceMappingURL=use-secure-fields.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"use-secure-fields.js","sourceRoot":"","sources":["../../src/hooks/use-secure-fields.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,sDAAmD;AACnD,+BAMc;AAGD,QAAA,mBAAmB,GAAG,IAAA,qBAAa,EAG7C,IAAI,CAAC,CAAA;AAED,IAAM,oBAAoB,GAAG,UAAC,EAGT;IAF1B,IAAA,QAAQ,cAAA,EACL,MAAM,cAF0B,YAGpC,CADU;IAED,IAAA,SAAS,GACf,MAAM,UADS,EAAE,KAAK,GACtB,MAAM,MADgB,EAAE,OAAO,GAC/B,MAAM,QADyB,EAAE,kBAAkB,GACnD,MAAM,mBAD6C,EAAE,kBAAkB,GACvE,MAAM,mBADiE,CACjE;IACF,IAAA,KAAkC,IAAA,gBAAQ,GAAgB,EAAzD,YAAY,QAAA,EAAE,eAAe,QAA4B,CAAA;IAEhE,IAAA,iBAAS,EAAC;QACR,eAAe,CAAC,IAAI,4BAAY,CAAC,MAAM,CAAC,CAAC,CAAA;QACzC,uDAAuD;IACzD,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC,CAAA;IAEf,IAAA,iBAAS,EAAC;QACR,YAAY,aAAZ,YAAY,uBAAZ,YAAY,CAAE,QAAQ,CAAC,KAAK,CAAC,CAAA;QAC7B,OAAO;aACL,YAAY,aAAZ,YAAY,uBAAZ,YAAY,CAAE,gBAAgB,CAAC,4BAAY,CAAC,MAAM,CAAC,KAAK,EAAE,OAAO,CAAC,CAAA,CAAA;QACpE,kBAAkB;aAChB,YAAY,aAAZ,YAAY,uBAAZ,YAAY,CAAE,gBAAgB,CAC5B,4BAAY,CAAC,MAAM,CAAC,kBAAkB,EACtC,kBAAkB,CACnB,CAAA,CAAA;QACH,kBAAkB;aAChB,YAAY,aAAZ,YAAY,uBAAZ,YAAY,CAAE,gBAAgB,CAC5B,4BAAY,CAAC,MAAM,CAAC,kBAAkB,EACtC,kBAAkB,CACnB,CAAA,CAAA;QAEH,OAAO;YACL,OAAO;iBACL,YAAY,aAAZ,YAAY,uBAAZ,YAAY,CAAE,mBAAmB,CAAC,4BAAY,CAAC,MAAM,CAAC,KAAK,EAAE,OAAO,CAAC,CAAA,CAAA;YACvE,kBAAkB;iBAChB,YAAY,aAAZ,YAAY,uBAAZ,YAAY,CAAE,mBAAmB,CAC/B,4BAAY,CAAC,MAAM,CAAC,kBAAkB,EACtC,kBAAkB,CACnB,CAAA,CAAA;YACH,kBAAkB;iBAChB,YAAY,aAAZ,YAAY,uBAAZ,YAAY,CAAE,mBAAmB,CAC/B,4BAAY,CAAC,MAAM,CAAC,kBAAkB,EACtC,kBAAkB,CACnB,CAAA,CAAA;QACL,CAAC,CAAA;QACD,uDAAuD;IACzD,CAAC,EAAE,CAAC,YAAY,CAAC,CAAC,CAAA;IAElB,OAAO,CACL,uBAAC,2BAAmB,CAAC,QAAQ,aAAC,KAAK,EAAE,EAAE,YAAY,cAAA,EAAE,KAAK,OAAA,EAAE,gBACzD,QAAQ,IACoB,CAChC,CAAA;AACH,CAAC,CAAA;AAlDY,QAAA,oBAAoB,wBAkDhC;AAEM,IAAM,eAAe,GAAG;IAC7B,OAAO,IAAA,kBAAU,EAAC,2BAAmB,CAAC,CAAA;AACxC,CAAC,CAAA;AAFY,QAAA,eAAe,mBAE3B"}

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

@@ -0,0 +1,3 @@
+import { SecureInput } from '@gr4vy/secure-fields';
+import { Field } from '../types';
+export declare const useSecureInput: (options?: Field) => SecureInput;

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

@@ -0,0 +1,63 @@
+"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)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useSecureInput = void 0;
+var react_1 = require("react");
+var use_secure_fields_1 = require("./use-secure-fields");
+var addFieldFns = {
+    number: 'addCardNumberField',
+    expiryDate: 'addExpiryDateField',
+    securityCode: 'addSecurityCodeField',
+};
+var useSecureInput = function (options) {
+    var secureFields = (0, use_secure_fields_1.useSecureFields)().secureFields;
+    var _a = (0, react_1.useState)(), field = _a[0], setField = _a[1];
+    var ref = options.ref, type = options.type, onBlur = options.onBlur, onFocus = options.onFocus, onInput = options.onInput, rest = __rest(options, ["ref", "type", "onBlur", "onFocus", "onInput"]);
+    var addField = function (type) {
+        if (!secureFields || !(options === null || options === void 0 ? void 0 : options.ref) || field) {
+            return;
+        }
+        return secureFields[addFieldFns[type]](ref.current, __assign({}, rest));
+    };
+    (0, react_1.useEffect)(function () {
+        setField(addField(options === null || options === void 0 ? void 0 : options.type));
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [secureFields]);
+    (0, react_1.useEffect)(function () {
+        if (!field)
+            return;
+        onBlur && field.addEventListener('blur', onBlur);
+        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);
+        };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [secureFields, field]);
+    return field;
+};
+exports.useSecureInput = useSecureInput;
+//# sourceMappingURL=use-secure-input.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"use-secure-input.js","sourceRoot":"","sources":["../../src/hooks/use-secure-input.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AACA,+BAA2C;AAE3C,yDAAqD;AAErD,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;QACD,OAAO,YAAY,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC,CAAC,GAAG,CAAC,OAAO,eAAO,IAAI,EAAG,CAAA;IAClE,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;AAjCY,QAAA,cAAc,kBAiC1B"}

package/lib/index.d.ts

@@ -2,3 +2,5 @@ export { CardNumber } from './components/CardNumber';
 export { ExpiryDate } from './components/ExpiryDate';
 export { SecureFields } from './components/SecureFields';
 export { SecurityCode } from './components/SecurityCode';
+export { useSecureFields } from './hooks/use-secure-fields';
+export { useSecureInput } from './hooks/use-secure-input';

package/lib/index.js

@@ -1 +1,16 @@
-!function(e,t){if("object"==typeof exports&&"object"==typeof module)module.exports=t();else if("function"==typeof define&&define.amd)define([],t);else{var r=t();for(var n in r)("object"==typeof exports?exports:e)[n]=r[n]}}(self,(()=>(()=>{"use strict";var e={d:(t,r)=>{for(var n in r)e.o(r,n)&&!e.o(t,n)&&Object.defineProperty(t,n,{enumerable:!0,get:r[n]})},o:(e,t)=>Object.prototype.hasOwnProperty.call(e,t),r:e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})}},t={};function r(){return r=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var n in r)Object.prototype.hasOwnProperty.call(r,n)&&(e[n]=r[n])}return e},r.apply(this,arguments)}e.r(t),e.d(t,{CardNumber:()=>n,ExpiryDate:()=>a,SecureFields:()=>i,SecurityCode:()=>u});var n=function(e){return React.createElement("input",r({},e))};function o(){return o=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var n in r)Object.prototype.hasOwnProperty.call(r,n)&&(e[n]=r[n])}return e},o.apply(this,arguments)}var a=function(e){return React.createElement("input",o({},e))},i=function(e){var t=e.children;return React.createElement("div",null,t)};function c(){return c=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var n in r)Object.prototype.hasOwnProperty.call(r,n)&&(e[n]=r[n])}return e},c.apply(this,arguments)}var u=function(e){return React.createElement("input",c({},e))};return t})()));
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useSecureInput = exports.useSecureFields = exports.SecurityCode = exports.SecureFields = exports.ExpiryDate = exports.CardNumber = void 0;
+var CardNumber_1 = require("./components/CardNumber");
+Object.defineProperty(exports, "CardNumber", { enumerable: true, get: function () { return CardNumber_1.CardNumber; } });
+var ExpiryDate_1 = require("./components/ExpiryDate");
+Object.defineProperty(exports, "ExpiryDate", { enumerable: true, get: function () { return ExpiryDate_1.ExpiryDate; } });
+var SecureFields_1 = require("./components/SecureFields");
+Object.defineProperty(exports, "SecureFields", { enumerable: true, get: function () { return SecureFields_1.SecureFields; } });
+var SecurityCode_1 = require("./components/SecurityCode");
+Object.defineProperty(exports, "SecurityCode", { enumerable: true, get: function () { return SecurityCode_1.SecurityCode; } });
+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");
+Object.defineProperty(exports, "useSecureInput", { enumerable: true, get: function () { return use_secure_input_1.useSecureInput; } });
+//# sourceMappingURL=index.js.map

package/lib/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":";;;AAAA,sDAAoD;AAA3C,wGAAA,UAAU,OAAA;AACnB,sDAAoD;AAA3C,wGAAA,UAAU,OAAA;AACnB,0DAAwD;AAA/C,4GAAA,YAAY,OAAA;AACrB,0DAAwD;AAA/C,4GAAA,YAAY,OAAA"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":";;;AAAA,sDAAoD;AAA3C,wGAAA,UAAU,OAAA;AACnB,sDAAoD;AAA3C,wGAAA,UAAU,OAAA;AACnB,0DAAwD;AAA/C,4GAAA,YAAY,OAAA;AACrB,0DAAwD;AAA/C,4GAAA,YAAY,OAAA;AACrB,+DAA2D;AAAlD,oHAAA,eAAe,OAAA;AACxB,6DAAyD;AAAhD,kHAAA,cAAc,OAAA"}

package/lib/types.d.ts

@@ -0,0 +1,16 @@
+import { Config as BaseConfig, Field as BaseField } from '@gr4vy/secure-fields';
+import { MutableRefObject } from 'react';
+export declare type Config = BaseConfig & {
+    debug?: boolean;
+    onReady?: (config: {
+        version: string;
+    } & BaseConfig) => void;
+    onCardVaultSuccess?: () => void;
+    onCardVaultFailure?: () => void;
+};
+export declare type Field = BaseField & {
+    ref?: MutableRefObject<HTMLElement>;
+    onBlur?: (data: any) => void;
+    onFocus?: (data: any) => void;
+    onInput?: (data: any) => void;
+};

package/lib/types.js

@@ -0,0 +1,3 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+//# sourceMappingURL=types.js.map

package/lib/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":""}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gr4vy/secure-fields-react",
-  "version": "0.5.4",
+  "version": "0.6.0",
   "description": "Gr4vy-hosted secure fields offering advanced theming, PCI compliance, event handling, and more.",
   "main": "lib/index",
   "types": "lib/index",
@@ -18,12 +18,14 @@
     }
   },
   "scripts": {
-    "build": "tsc && webpack --config webpack.prod.js",
+    "build": "tsc",
     "clean": "rm -rf lib *.tgz",
+    "dev": "TOKEN=$(yarn --silent token) webpack serve --config webpack.dev.js",
     "lint": "eslint src --ext ts,tsx",
     "prebuild": "yarn clean",
     "prepack": "yarn build",
-    "test": "jest --colors"
+    "test": "jest --colors",
+    "token": "node ../secure-fields/generate-token"
   },
   "files": [
     "lib",
@@ -36,14 +38,15 @@
     "react-dom": ">=17.0.0"
   },
   "dependencies": {
-    "@gr4vy/secure-fields": "^0.5.4"
+    "@gr4vy/secure-fields": "^0.6.0"
   },
   "devDependencies": {
+    "@testing-library/react-hooks": "^8.0.1",
     "react": "^17.0.2",
     "react-dom": "^17.0.2"
   },
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "160286f5462c6ee37f5566082aee130ca3710400"
+  "gitHead": "be805ba6434d6c0941a06769d80d3bcddb5cf59e"
 }