@gr4vy/secure-fields-react 2.3.1 → 2.3.3

package/CHANGELOG.md

@@ -1,3 +1,18 @@
+# v2.3.2 (Tue Apr 14 2026)
+
+#### 🐛 Bug Fix
+
+- task: handle 1password toggle overlap [#1178](https://github.com/gr4vy/secure-fields/pull/1178) ([@luca-gr4vy](https://github.com/luca-gr4vy))
+- feat: expose field input mask unmask methods [#1160](https://github.com/gr4vy/secure-fields/pull/1160) ([@luca-gr4vy](https://github.com/luca-gr4vy) [@GiordanoArman](https://github.com/GiordanoArman))
+- task: real time input masking (beforeinput) [#1158](https://github.com/gr4vy/secure-fields/pull/1158) ([@luca-gr4vy](https://github.com/luca-gr4vy) [@GiordanoArman](https://github.com/GiordanoArman))
+
+#### Authors: 2
+
+- GiordanoArman ([@GiordanoArman](https://github.com/GiordanoArman))
+- Luca Allievi ([@luca-gr4vy](https://github.com/luca-gr4vy))
+
+---
+
 # v2.3.1 (Tue Apr 07 2026)
 
 #### 🐛 Bug Fix

package/lib/components/Field/Field.js

@@ -32,6 +32,8 @@ exports.Field = (0, react_1.forwardRef)(function (props, handleRef) {
     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); },
+        redactValue: function () { var _a; return (_a = field === null || field === void 0 ? void 0 : field.redactValue) === null || _a === void 0 ? void 0 : _a.call(field); },
+        unredactValue: function () { var _a; return (_a = field === null || field === void 0 ? void 0 : field.unredactValue) === null || _a === void 0 ? void 0 : _a.call(field); },
     }); }, [field]);
     return (0, jsx_runtime_1.jsx)("input", __assign({ ref: ref }, rest));
 });

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

@@ -1 +1 @@
-{"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;IACP,IAAA,SAAS,GAAc,KAAK,UAAnB,EAAK,IAAI,UAAK,KAAK,EAA9B,aAAsB,CAAF,CAAU;IACpC,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,IAAI,EAAI,CAAA;AACtC,CAAC,CACF,CAAA;AAED,aAAK,CAAC,WAAW,GAAG,OAAO,CAAA"}
+{"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;IACP,IAAA,SAAS,GAAc,KAAK,UAAnB,EAAK,IAAI,UAAK,KAAK,EAA9B,aAAsB,CAAF,CAAU;IACpC,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;QAC7B,WAAW,EAAE,sBAAM,OAAA,MAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,WAAW,qDAAI,CAAA,EAAA;QACzC,aAAa,EAAE,sBAAM,OAAA,MAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,aAAa,qDAAI,CAAA,EAAA;KAC9C,CAAC,EAJI,CAIJ,EACF,CAAC,KAAK,CAAC,CACR,CAAA;IAED,OAAO,2CAAO,GAAG,EAAE,GAAG,IAAM,IAAI,EAAI,CAAA;AACtC,CAAC,CACF,CAAA;AAED,aAAK,CAAC,WAAW,GAAG,OAAO,CAAA"}

package/lib/components/FieldGroup/FieldGroup.d.ts

@@ -0,0 +1,4 @@
+export declare const FieldGroup: ({ children, ...rest }: {
+    [x: string]: any;
+    children: any;
+}) => import("react/jsx-runtime").JSX.Element;

package/lib/components/FieldGroup/FieldGroup.js

@@ -0,0 +1,32 @@
+"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.FieldGroup = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var FieldGroup = function (_a) {
+    var children = _a.children, rest = __rest(_a, ["children"]);
+    return ((0, jsx_runtime_1.jsx)("div", __assign({ "data-secure-fields-input-group": true }, rest, { children: children })));
+};
+exports.FieldGroup = FieldGroup;
+//# sourceMappingURL=FieldGroup.js.map

package/lib/components/FieldGroup/FieldGroup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FieldGroup.js","sourceRoot":"","sources":["../../../src/components/FieldGroup/FieldGroup.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAAO,IAAM,UAAU,GAAG,UAAC,EAAqB;IAAnB,IAAA,QAAQ,cAAA,EAAK,IAAI,cAAnB,YAAqB,CAAF;IAAO,OAAA,CACnD,mFAAwC,IAAI,cACzC,QAAQ,IACL,CACP,CAAA;CAAA,CAAA;AAJY,QAAA,UAAU,cAItB"}

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

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

package/lib/components/FieldGroup/index.js

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/FieldGroup/index.ts"],"names":[],"mappings":";;;AAAA,2CAAyC;AAAhC,wGAAA,UAAU,OAAA"}

package/lib/index.d.ts

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

package/lib/index.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-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;
+exports.useSecureInput = exports.useSecureFields = exports.useThreeDSecure = exports.ThreeDSecure = exports.FieldGroup = 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,8 @@ 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 FieldGroup_1 = require("./components/FieldGroup");
+Object.defineProperty(exports, "FieldGroup", { enumerable: true, get: function () { return FieldGroup_1.FieldGroup; } });
 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");

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,0DAAsD;AAA7C,4GAAA,YAAY,OAAA;AACrB,iEAA0D;AAAjD,qHAAA,eAAe,OAAA;AACxB,+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,sDAAkD;AAAzC,wGAAA,UAAU,OAAA;AACnB,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

@@ -35,6 +35,8 @@ export type Field = BaseField & {
 };
 export type FieldHandle = {
     clear: () => void;
+    redactValue: () => void;
+    unredactValue: () => void;
 };
 export type ClickToPayOptions = BaseClickToPayOptions & {
     ref?: MutableRefObject<HTMLElement>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gr4vy/secure-fields-react",
-  "version": "2.3.1",
+  "version": "2.3.3",
   "description": "Gr4vy-hosted secure fields offering advanced theming, PCI compliance, event handling, and more.",
   "main": "lib/index",
   "types": "lib/index",
@@ -41,7 +41,7 @@
     "react-dom": ">=17.0.0"
   },
   "dependencies": {
-    "@gr4vy/secure-fields": "^2.3.1"
+    "@gr4vy/secure-fields": "^2.3.3"
   },
   "devDependencies": {
     "@testing-library/react": "^12.1.5",
@@ -55,5 +55,5 @@
     "access": "public",
     "registry": "https://registry.npmjs.org"
   },
-  "gitHead": "84785fcb53b065bf2b5740bf7ded23b2214477f4"
+  "gitHead": "9285a6be8e3083834747f01c4a94e9174e946a8d"
 }