@gr4vy/secure-fields-react 1.9.0 → 1.10.1

package/CHANGELOG.md

@@ -1,3 +1,27 @@
+# v1.10.1 (Thu Jun 15 2023)
+
+#### 🐛 Bug Fix
+
+- feat: pass html attributes to field wrapper [#346](https://github.com/gr4vy/secure-fields/pull/346) ([@luca-gr4vy](https://github.com/luca-gr4vy))
+
+#### Authors: 1
+
+- Luca Allievi ([@luca-gr4vy](https://github.com/luca-gr4vy))
+
+---
+
+# v1.10.0 (Wed Jun 14 2023)
+
+#### 🚀 Enhancement
+
+- feat: secure input default styles [#353](https://github.com/gr4vy/secure-fields/pull/353) ([@luca-gr4vy](https://github.com/luca-gr4vy))
+
+#### Authors: 1
+
+- Luca Allievi ([@luca-gr4vy](https://github.com/luca-gr4vy))
+
+---
+
 # v1.8.0 (Mon Jun 12 2023)
 
 #### 🚀 Enhancement

package/README.md

@@ -21,6 +21,9 @@ npm install @gr4vy/secure-fields-react --save-prod
 To use Secure Fields, import the `SecureFields` Provider component and wrap your app with it, making sure you pass the necessary configuration props and any event handlers.
 
 ```jsx
+require('@gr4vy/secure-fields-react/lib/style.css') // default styles
+// import '@gr4vy/secure-fields-react/lib/style.css'
+
 const { SecureFields } = require(`@gr4vy/secure-fields-react`)
 // import { SecureFields } from (`@gr4vy/secure-fields-react)
 

package/lib/components/Field/Field.js

@@ -16,9 +16,9 @@ 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) {
-    var ref = (0, react_1.useRef)();
+    var ref = (0, react_1.useRef)(null);
     (0, use_secure_input_1.useSecureInput)(__assign(__assign({}, props), { ref: ref }));
-    return (0, jsx_runtime_1.jsx)("input", { ref: ref });
+    return (0, jsx_runtime_1.jsx)("input", __assign({ ref: ref }, props));
 };
 exports.Field = 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,GAAE,CAAA;IACpB,IAAA,iCAAc,wBAAM,KAAK,KAAE,GAAG,KAAA,IAAG,CAAA;IACjC,OAAO,kCAAO,GAAG,EAAE,GAAG,GAAI,CAAA;AAC5B,CAAC,CAAA;AAJY,QAAA,KAAK,SAIjB"}
+{"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"}

package/lib/style.css

@@ -0,0 +1,10 @@
+.secure-fields__input {
+  display: inline-block;
+  border: 1px solid;
+  width: 200px;
+  height: 30px;
+}
+
+.secure-fields__input[data-secure-fields-invalid] {
+  border-color: #eb4c4b;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gr4vy/secure-fields-react",
-  "version": "1.9.0",
+  "version": "1.10.1",
   "description": "Gr4vy-hosted secure fields offering advanced theming, PCI compliance, event handling, and more.",
   "main": "lib/index",
   "types": "lib/index",
@@ -19,7 +19,7 @@
   },
   "scripts": {
     "prepare": "ts-patch install -s",
-    "build": "tsc -p tsconfig.prod.json",
+    "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",
@@ -39,7 +39,7 @@
     "react-dom": ">=17.0.0"
   },
   "dependencies": {
-    "@gr4vy/secure-fields": "^1.9.0"
+    "@gr4vy/secure-fields": "^1.10.1"
   },
   "devDependencies": {
     "@testing-library/react-hooks": "^8.0.1",
@@ -51,5 +51,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "48fe152199250a322989cf9b2fd58915aee1c488"
+  "gitHead": "73d52d8c6c31581d6dc22d0c8841c528b1d58b99"
 }