@maif/react-forms 1.0.8 → 1.0.12

package/lib/style.js

@@ -4,7 +4,29 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.style = void 0;
-var style = {
+
+var _style;
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+var buttonOutline = function buttonOutline(color, darker) {
+  return {
+    color: color,
+    borderColor: color,
+    "&:hover": {
+      color: '#fff',
+      backgroundColor: color,
+      borderColor: darker
+    },
+    "&.active": {
+      color: '#fff',
+      backgroundColor: color,
+      borderColor: darker
+    }
+  };
+};
+
+var style = (_style = {
   input: {
     display: "block",
     width: "100%",
@@ -23,7 +45,8 @@ var style = {
     padding: 10,
     fontSize: "1rem",
     cursor: "pointer",
-    border: 0
+    borderWidth: '1px',
+    backgroundColor: '#fff'
   },
   btn_sm: {
     fontSize: "0.875rem",
@@ -39,42 +62,10 @@ var style = {
       borderBottomLeftRadius: 0
     }
   },
-  btn_red: {
-    color: "#fff",
-    backgroundColor: "#dc3545",
-    borderColor: "#dc3545",
-    "&:hover": {
-      backgroundColor: "#c82333",
-      borderColor: "#bd2130"
-    }
-  },
-  btn_green: {
-    color: "#fff",
-    backgroundColor: "#28a745",
-    borderColor: "#28a745",
-    "&:hover": {
-      backgroundColor: "#218838",
-      borderColor: "#1e7e34"
-    }
-  },
-  btn_blue: {
-    color: "#fff",
-    backgroundColor: "#007bff",
-    borderColor: "#007bff",
-    "&:hover": {
-      backgroundColor: "#0069d9",
-      borderColor: "#0062cc"
-    }
-  },
-  btn_grey: {
-    color: "#fff",
-    backgroundColor: "#6c757d",
-    borderColor: "#6c757d",
-    "&:hover": {
-      backgroundColor: "#5c636a",
-      borderColor: "#5c636a"
-    }
-  },
+  btn_red: buttonOutline("#dc3545", "#bd2130"),
+  btn_green: buttonOutline("#28a745", "#1e7e34"),
+  btn_blue: buttonOutline("#007bff", "#0069d9"),
+  btn_grey: buttonOutline("#6c757d", "#5c636a"),
   txt_red: {
     color: "#dc3545"
   },
@@ -134,18 +125,26 @@ var style = {
   collapse_label: {
     fontWeight: "bold",
     marginTop: 7
-  },
-  datepicker: {
-    "& input": {
-      borderRadius: "4px"
-    }
-  },
-  code: {},
-  input__boolean__on: {
-    color: "MediumSeaGreen"
-  },
-  input__boolean__off: {
-    color: "tomato"
   }
-};
+}, _defineProperty(_style, "collapse_label", {
+  fontWeight: "bold",
+  marginTop: 7
+}), _defineProperty(_style, "collapse_error", {
+  color: '#dc3545'
+}), _defineProperty(_style, "datepicker", {
+  "& input": {
+    borderRadius: "4px"
+  }
+}), _defineProperty(_style, "code", {}), _defineProperty(_style, "input__boolean__on", {
+  color: "MediumSeaGreen"
+}), _defineProperty(_style, "input__boolean__off", {
+  color: "tomato"
+}), _defineProperty(_style, "input__invalid", {
+  borderColor: '#dc3545 !important'
+}), _defineProperty(_style, "invalid_feedback", {
+  width: "100%",
+  marginTop: ".25rem",
+  fontSize: "80%",
+  color: "#dc3545"
+}), _style);
 exports.style = style;

package/lib/styleContext.d.ts

@@ -1 +1 @@
-export function useCustomStyle(overrideStyle?: {}): import("jss").Classes<"code" | "flex" | "input" | "btn" | "btn_sm" | "btn_group" | "btn_red" | "btn_green" | "btn_blue" | "btn_grey" | "txt_red" | "ml_5" | "ml_10" | "mt_5" | "mt_10" | "mt_20" | "mb_5" | "p_15" | "pr_15" | "d_none" | "flexColumn" | "justifyContentBetween" | "jc_end" | "ac_center" | "ai_center" | "cursor_pointer" | "collapse" | "collapse_label" | "datepicker" | "input__boolean__on" | "input__boolean__off">;
+export function useCustomStyle(overrideStyle?: {}): import("jss").Classes<"code" | "flex" | "input" | "btn" | "btn_sm" | "btn_group" | "btn_red" | "btn_green" | "btn_blue" | "btn_grey" | "txt_red" | "ml_5" | "ml_10" | "mt_5" | "mt_10" | "mt_20" | "mb_5" | "p_15" | "pr_15" | "d_none" | "flexColumn" | "justifyContentBetween" | "jc_end" | "ac_center" | "ai_center" | "cursor_pointer" | "collapse" | "collapse_label" | "collapse_error" | "datepicker" | "input__boolean__on" | "input__boolean__off" | "input__invalid" | "invalid_feedback">;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@maif/react-forms",
   "description": "Build react safe forms as fast as possible",
-  "version": "1.0.8",
+  "version": "1.0.12",
   "main": "lib/index.js",
   "author": "MAIF team",
   "keywords": [
@@ -97,6 +97,7 @@
   "dependencies": {
     "@fortawesome/fontawesome-free": "^5.15.3",
     "@hookform/resolvers": "2.4.0",
+    "@popperjs/core": "^2.11.2",
     "@testing-library/jest-dom": "^5.11.4",
     "@testing-library/react": "^11.1.0",
     "@testing-library/user-event": "^12.1.10",