@insticc/genericform 2.1.2 → 2.1.4

package/build/FormFields/CustomCheckboxGroup.js

@@ -1,13 +1,12 @@
 "use strict";
 
-function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = void 0;
 var _propTypes = _interopRequireDefault(require("prop-types"));
-var _defaults = require("./defaults");
 var _react = require("react");
+var _defaults = require("./defaults");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
 function _toConsumableArray(r) { return _arrayWithoutHoles(r) || _iterableToArray(r) || _unsupportedIterableToArray(r) || _nonIterableSpread(); }
@@ -25,6 +24,7 @@ function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r)
 function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
 function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
 function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
 var IndeterminateCheckbox = function IndeterminateCheckbox(_ref) {
   var id = _ref.id,
     checked = _ref.checked,
@@ -82,6 +82,15 @@ var CustomCheckboxGroup = function CustomCheckboxGroup(_ref2) {
     inputStyle = _ref2$inputStyle === void 0 ? {} : _ref2$inputStyle,
     _ref2$tooltipStyle = _ref2.tooltipStyle,
     tooltipStyle = _ref2$tooltipStyle === void 0 ? {} : _ref2$tooltipStyle;
+  var isObject = (0, _react.useMemo)(function () {
+    return !!options && _typeof(options[0]) === "object";
+  }, [options]);
+  var getValue = (0, _react.useCallback)(function (opt) {
+    return isObject ? opt.id || opt.value || opt.name : opt;
+  }, [isObject]);
+  var getLabel = (0, _react.useCallback)(function (opt) {
+    return isObject ? opt.label || opt.text || opt.name : opt;
+  }, [isObject]);
   var _useState = (0, _react.useState)({}),
     _useState2 = _slicedToArray(_useState, 2),
     collapsed = _useState2[0],
@@ -95,16 +104,16 @@ var CustomCheckboxGroup = function CustomCheckboxGroup(_ref2) {
   var getChildValues = (0, _react.useCallback)(function (opt) {
     var _opt$options$map, _opt$options;
     return (_opt$options$map = (_opt$options = opt.options) === null || _opt$options === void 0 ? void 0 : _opt$options.map(function (s) {
-      return s.name || s.value;
+      return getValue(s);
     })) !== null && _opt$options$map !== void 0 ? _opt$options$map : [];
   }, []);
   var isAllChecked = (0, _react.useCallback)(function (opt) {
-    var parentVal = opt.name || opt.value;
+    var parentVal = getValue(opt);
     var children = getChildValues(opt);
     return children.length > 0 && checked.includes(parentVal) && children.every(function (v) {
       return checked.includes(v);
     });
-  }, [checked, getChildValues]);
+  }, [checked, getValue, getChildValues]);
   var isSomeChecked = (0, _react.useCallback)(function (opt) {
     var children = getChildValues(opt);
     return children.some(function (v) {
@@ -119,14 +128,14 @@ var CustomCheckboxGroup = function CustomCheckboxGroup(_ref2) {
     onOptionChange === null || onOptionChange === void 0 || onOptionChange(data);
   }, [onChange, onOptionChange, name, checked]);
   var handleParentChange = (0, _react.useCallback)(function (opt, state) {
-    var parentVal = opt.name || opt.value;
+    var parentVal = getValue(opt);
     var children = getChildValues(opt);
-    var data = state ? _toConsumableArray(new Set(parentCheckAll ? [].concat(_toConsumableArray(checked), [parentVal, children]) : [].concat(_toConsumableArray(checked), [parentVal]))) : checked.filter(function (v) {
+    var data = state ? _toConsumableArray(new Set(parentCheckAll ? [].concat(_toConsumableArray(checked), [parentVal], _toConsumableArray(children)) : [].concat(_toConsumableArray(checked), [parentVal]))) : checked.filter(function (v) {
       return v !== parentVal && !children.includes(v);
     });
     onChange === null || onChange === void 0 || onChange(name, data);
     onOptionChange === null || onOptionChange === void 0 || onOptionChange(data);
-  }, [onChange, onOptionChange, name, checked, getChildValues]);
+  }, [onChange, onOptionChange, name, checked, parentCheckAll, getValue, getChildValues]);
   var toggleCollapse = (0, _react.useCallback)(function (idx) {
     setCollapsed(function (prev) {
       return _objectSpread(_objectSpread({}, prev), {}, _defineProperty({}, idx, !prev[idx]));
@@ -150,7 +159,7 @@ var CustomCheckboxGroup = function CustomCheckboxGroup(_ref2) {
         var _opt$options2;
         var hasChildren = !!((_opt$options2 = opt.options) !== null && _opt$options2 !== void 0 && _opt$options2.length);
         var isCollapsed = collapsible && !!collapsed[idx];
-        var parentVal = opt.name || opt.value;
+        var parentVal = getValue(opt);
         return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
           children: [idx > 0 && grouped && /*#__PURE__*/(0, _jsxRuntime.jsx)("hr", {
             style: {
@@ -201,7 +210,7 @@ var CustomCheckboxGroup = function CustomCheckboxGroup(_ref2) {
               }), /*#__PURE__*/(0, _jsxRuntime.jsx)("label", {
                 htmlFor: "".concat(name, "-").concat(idx),
                 style: opt.labelStyle,
-                children: opt.label || opt.text
+                children: getLabel(opt)
               })]
             })]
           }), hasChildren && !isCollapsed && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
@@ -210,24 +219,25 @@ var CustomCheckboxGroup = function CustomCheckboxGroup(_ref2) {
               paddingLeft: collapsible ? '2rem' : '1.25rem'
             },
             children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {}), opt.options.map(function (subopt, subidx) {
+              var suboptVal = getValue(subopt);
               return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
                 className: "ufg-checkbox-item",
                 style: inputStyle,
                 children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
                   id: "".concat(name, "-").concat(idx, "-").concat(subidx),
                   type: "checkbox",
-                  checked: checked.includes(subopt.name || subopt.value),
+                  checked: checked.includes(suboptVal),
                   disabled: !!subopt.disabled,
                   style: subopt.inputStyle,
                   onChange: function onChange(e) {
-                    return handleChange(subopt.name || subopt.value, e.target.checked);
+                    return handleChange(suboptVal, e.target.checked);
                   }
                 }), /*#__PURE__*/(0, _jsxRuntime.jsx)("label", {
                   htmlFor: "".concat(name, "-").concat(idx, "-").concat(subidx),
                   style: subopt.labelStyle,
-                  children: subopt.label || subopt.text
+                  children: getLabel(subopt)
                 })]
-              }, subopt.name || subopt.value);
+              }, suboptVal);
             })]
           })]
         }, "".concat(name, "-").concat(idx));

package/build/FormFields/CustomFileInput.js

@@ -4,9 +4,11 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = void 0;
+var _propTypes = _interopRequireDefault(require("prop-types"));
 var _react = require("react");
 var _defaults = require("./defaults");
 var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
 function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
@@ -28,6 +30,8 @@ var CustomFileInput = function CustomFileInput(_ref) {
     error = _ref.error,
     _ref$tooltip = _ref.tooltip,
     tooltip = _ref$tooltip === void 0 ? "" : _ref$tooltip,
+    _ref$tooltipInline = _ref.tooltipInline,
+    tooltipInline = _ref$tooltipInline === void 0 ? false : _ref$tooltipInline,
     _ref$showHelp = _ref.showHelp,
     showHelp = _ref$showHelp === void 0 ? false : _ref$showHelp,
     _ref$helpText = _ref.helpText,
@@ -68,7 +72,7 @@ var CustomFileInput = function CustomFileInput(_ref) {
       style: {
         display: 'flex',
         alignItems: 'center',
-        gap: 8
+        gap: 10
       },
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
         type: "button",
@@ -85,7 +89,7 @@ var CustomFileInput = function CustomFileInput(_ref) {
           return (_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.click();
         },
         children: placeholder || "Select"
-      }), value ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+      }), value && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
           style: {
             fontSize: '0.85rem',
@@ -108,13 +112,7 @@ var CustomFileInput = function CustomFileInput(_ref) {
           title: "Remove file",
           children: "\u2715"
         })]
-      }) : /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-        style: {
-          fontSize: '0.82rem',
-          color: '#aaa'
-        },
-        children: "No file selected"
-      })]
+      }), tooltipInline && (0, _defaults.tooltipJsx)(tooltip, tooltipStyle)]
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
       id: "form-input-".concat(name),
       ref: ref,
@@ -125,7 +123,27 @@ var CustomFileInput = function CustomFileInput(_ref) {
       },
       disabled: disabled,
       onChange: handleChange
-    }), (0, _defaults.errorJsx)(error), (0, _defaults.tooltipJsx)(tooltip, tooltipStyle)]
+    }), (0, _defaults.errorJsx)(error), !tooltipInline && (0, _defaults.tooltipJsx)(tooltip, tooltipStyle)]
   });
 };
+CustomFileInput.propType = {
+  onChange: _propTypes["default"].func.isRequired,
+  name: _propTypes["default"].string.isRequired,
+  label: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].object]),
+  value: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number, _propTypes["default"].array, _propTypes["default"].object]),
+  accept: _propTypes["default"].string,
+  placeholder: _propTypes["default"].string,
+  disabled: _propTypes["default"].bool,
+  required: _propTypes["default"].bool,
+  error: _propTypes["default"].string,
+  tooltip: _propTypes["default"].string,
+  tooltipInline: _propTypes["default"].bool,
+  showHelp: _propTypes["default"].bool,
+  helpText: _propTypes["default"].string,
+  mainDivStyle: _propTypes["default"].object,
+  labelStyle: _propTypes["default"].object,
+  spanStyle: _propTypes["default"].object,
+  inputStyle: _propTypes["default"].object,
+  tooltipStyle: _propTypes["default"].object
+};
 var _default = exports["default"] = CustomFileInput;

package/build/FormFields/CustomPasswordInput.js

@@ -0,0 +1,217 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _react = require("react");
+var _defaults = require("./defaults");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
+var EyeIcon = function EyeIcon(_ref) {
+  var visible = _ref.visible;
+  return visible ? /*#__PURE__*/(0, _jsxRuntime.jsxs)("svg", {
+    viewBox: "0 0 20 20",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "18",
+    height: "18",
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
+      d: "M2 10s3-6 8-6 8 6 8 6-3 6-8 6-8-6-8-6z",
+      stroke: "#9CA3AF",
+      strokeWidth: "1.5"
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("circle", {
+      cx: "10",
+      cy: "10",
+      r: "2.5",
+      stroke: "#9CA3AF",
+      strokeWidth: "1.5"
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
+      d: "M3 3l14 14",
+      stroke: "#9CA3AF",
+      strokeWidth: "1.5",
+      strokeLinecap: "round"
+    })]
+  }) : /*#__PURE__*/(0, _jsxRuntime.jsxs)("svg", {
+    viewBox: "0 0 20 20",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "18",
+    height: "18",
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
+      d: "M2 10s3-6 8-6 8 6 8 6-3 6-8 6-8-6-8-6z",
+      stroke: "#9CA3AF",
+      strokeWidth: "1.5"
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("circle", {
+      cx: "10",
+      cy: "10",
+      r: "2.5",
+      stroke: "#9CA3AF",
+      strokeWidth: "1.5"
+    })]
+  });
+};
+var getStrength = function getStrength(password) {
+  if (!password) return null;
+  var score = 0;
+  if (password.length >= 8) score++;
+  if (password.length >= 12) score++;
+  if (/[A-Z]/.test(password)) score++;
+  if (/[0-9]/.test(password)) score++;
+  if (/[^A-Za-z0-9]/.test(password)) score++;
+  if (score <= 1) return {
+    level: 1,
+    label: "Weak",
+    color: "#ef4444"
+  };
+  if (score <= 3) return {
+    level: 2,
+    label: "Fair",
+    color: "#f59e0b"
+  };
+  if (score === 4) return {
+    level: 3,
+    label: "Good",
+    color: "#3b82f6"
+  };
+  return {
+    level: 4,
+    label: "Strong",
+    color: "#22c55e"
+  };
+};
+var CustomPasswordInput = function CustomPasswordInput(_ref2) {
+  var _ref3;
+  var onChange = _ref2.onChange,
+    name = _ref2.name,
+    label = _ref2.label,
+    _ref2$value = _ref2.value,
+    value = _ref2$value === void 0 ? "" : _ref2$value,
+    _ref2$disabled = _ref2.disabled,
+    disabled = _ref2$disabled === void 0 ? false : _ref2$disabled,
+    _ref2$required = _ref2.required,
+    required = _ref2$required === void 0 ? false : _ref2$required,
+    placeholder = _ref2.placeholder,
+    error = _ref2.error,
+    _ref2$tooltip = _ref2.tooltip,
+    tooltip = _ref2$tooltip === void 0 ? "" : _ref2$tooltip,
+    _ref2$showHelp = _ref2.showHelp,
+    showHelp = _ref2$showHelp === void 0 ? false : _ref2$showHelp,
+    _ref2$helpText = _ref2.helpText,
+    helpText = _ref2$helpText === void 0 ? "" : _ref2$helpText,
+    className = _ref2.className,
+    _ref2$showStrength = _ref2.showStrength,
+    showStrength = _ref2$showStrength === void 0 ? false : _ref2$showStrength,
+    matchValue = _ref2.matchValue,
+    _ref2$mainDivStyle = _ref2.mainDivStyle,
+    mainDivStyle = _ref2$mainDivStyle === void 0 ? {} : _ref2$mainDivStyle,
+    _ref2$labelStyle = _ref2.labelStyle,
+    labelStyle = _ref2$labelStyle === void 0 ? {} : _ref2$labelStyle,
+    _ref2$spanStyle = _ref2.spanStyle,
+    spanStyle = _ref2$spanStyle === void 0 ? {} : _ref2$spanStyle,
+    _ref2$inputStyle = _ref2.inputStyle,
+    inputStyle = _ref2$inputStyle === void 0 ? {} : _ref2$inputStyle,
+    _ref2$tooltipStyle = _ref2.tooltipStyle,
+    tooltipStyle = _ref2$tooltipStyle === void 0 ? {} : _ref2$tooltipStyle;
+  var _useState = (0, _react.useState)(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    visible = _useState2[0],
+    setVisible = _useState2[1];
+  var handleChange = (0, _react.useCallback)(function (e) {
+    return onChange === null || onChange === void 0 ? void 0 : onChange(name, e.target.value);
+  }, [onChange, name]);
+  var strength = showStrength ? getStrength(value) : null;
+  var showMatch = matchValue !== undefined && value.length > 0 && matchValue.length > 0;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    className: "ufg-field-group",
+    id: name,
+    style: mainDivStyle,
+    children: [(0, _defaults.labelJsx)({
+      name: name,
+      labelStyle: labelStyle,
+      label: label,
+      required: required,
+      spanStyle: spanStyle,
+      showHelp: showHelp,
+      helpText: helpText
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: "ufg-input-wrapper",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
+        id: "form-input-".concat(name),
+        type: visible ? "text" : "password",
+        name: name,
+        value: value,
+        placeholder: (_ref3 = placeholder !== null && placeholder !== void 0 ? placeholder : label) !== null && _ref3 !== void 0 ? _ref3 : "••••••••••",
+        disabled: disabled,
+        required: required,
+        autoComplete: "current-password",
+        className: "ufg-input ufg-input--padded".concat(error ? " error" : "").concat(className ? " ".concat(className) : ""),
+        style: inputStyle,
+        onChange: handleChange
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
+        type: "button",
+        className: "ufg-eye-btn",
+        onClick: function onClick() {
+          return setVisible(function (v) {
+            return !v;
+          });
+        },
+        "aria-label": visible ? "Hide password" : "Show password",
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(EyeIcon, {
+          visible: visible
+        })
+      })]
+    }), showStrength && value.length > 0 && strength && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: "ufg-strength",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: "ufg-strength-bar",
+        children: [1, 2, 3, 4].map(function (i) {
+          return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            className: "ufg-strength-segment",
+            style: {
+              background: i <= strength.level ? strength.color : "#e5e7eb"
+            }
+          }, i);
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+        className: "ufg-strength-label",
+        style: {
+          color: strength.color
+        },
+        children: strength.label
+      })]
+    }), showMatch && /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
+      className: "ufg-match ".concat(value === matchValue ? "ufg-match--ok" : "ufg-match--no"),
+      children: value === matchValue ? "✓ Passwords match" : "✗ Passwords do not match"
+    }), (0, _defaults.errorJsx)(error), (0, _defaults.tooltipJsx)(tooltip, tooltipStyle)]
+  });
+};
+CustomPasswordInput.propTypes = {
+  onChange: _propTypes["default"].func.isRequired,
+  name: _propTypes["default"].string.isRequired,
+  label: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].object]),
+  value: _propTypes["default"].string,
+  disabled: _propTypes["default"].bool,
+  required: _propTypes["default"].bool,
+  placeholder: _propTypes["default"].string,
+  error: _propTypes["default"].string,
+  tooltip: _propTypes["default"].string,
+  showHelp: _propTypes["default"].bool,
+  helpText: _propTypes["default"].string,
+  className: _propTypes["default"].string,
+  showStrength: _propTypes["default"].bool,
+  matchValue: _propTypes["default"].string,
+  inputStyle: _propTypes["default"].object,
+  mainDivStyle: _propTypes["default"].object,
+  labelStyle: _propTypes["default"].object,
+  spanStyle: _propTypes["default"].object,
+  tooltipStyle: _propTypes["default"].object
+};
+var _default = exports["default"] = CustomPasswordInput;

package/build/FormFields/CustomRadioGroup.js

@@ -4,11 +4,11 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = void 0;
-var _propTypes = _interopRequireWildcard(require("prop-types"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _react = require("react");
 var _defaults = require("./defaults");
 var _jsxRuntime = require("react/jsx-runtime");
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
 function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
 var CustomRadioGroup = function CustomRadioGroup(_ref) {
   var _onChange = _ref.onChange,
@@ -43,7 +43,9 @@ var CustomRadioGroup = function CustomRadioGroup(_ref) {
     inputStyle = _ref$inputStyle === void 0 ? {} : _ref$inputStyle,
     _ref$tooltipStyle = _ref.tooltipStyle,
     tooltipStyle = _ref$tooltipStyle === void 0 ? {} : _ref$tooltipStyle;
-  var isObject = _typeof(options[0]) === "object";
+  var isObject = (0, _react.useMemo)(function () {
+    return !!options && _typeof(options[0]) === "object";
+  }, [options]);
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
     className: "ufg-field-group",
     id: name,

package/build/index.js

@@ -51,12 +51,6 @@ Object.defineProperty(exports, "CustomInput", {
     return _CustomInput["default"];
   }
 });
-Object.defineProperty(exports, "CustomInputAdd", {
-  enumerable: true,
-  get: function get() {
-    return _CustomInputAdd["default"];
-  }
-});
 Object.defineProperty(exports, "CustomJson", {
   enumerable: true,
   get: function get() {
@@ -81,6 +75,12 @@ Object.defineProperty(exports, "CustomNumberInput", {
     return _CustomNumberInput["default"];
   }
 });
+Object.defineProperty(exports, "CustomPasswordInput", {
+  enumerable: true,
+  get: function get() {
+    return _CustomPasswordInput["default"];
+  }
+});
 Object.defineProperty(exports, "CustomRadioGroup", {
   enumerable: true,
   get: function get() {
@@ -129,6 +129,7 @@ var _CustomLabel = _interopRequireDefault(require("./FormFields/CustomLabel"));
 var _CustomMobilePhone = _interopRequireDefault(require("./FormFields/CustomMobilePhone"));
 var _CustomMultiDropdown = _interopRequireDefault(require("./FormFields/CustomMultiDropdown"));
 var _CustomNumberInput = _interopRequireDefault(require("./FormFields/CustomNumberInput"));
+var _CustomPasswordInput = _interopRequireDefault(require("./FormFields/CustomPasswordInput"));
 var _CustomRadioGroup = _interopRequireDefault(require("./FormFields/CustomRadioGroup"));
 var _CustomSearch = _interopRequireDefault(require("./FormFields/CustomSearch"));
 var _CustomSeparator = _interopRequireDefault(require("./FormFields/CustomSeparator"));
@@ -261,7 +262,10 @@ var GenericForm = function GenericForm(_ref) {
     _ref$modalSize = _ref.modalSize,
     modalSize = _ref$modalSize === void 0 ? 'lg' : _ref$modalSize,
     _ref$disableFormTag = _ref.disableFormTag,
-    disableFormTag = _ref$disableFormTag === void 0 ? false : _ref$disableFormTag;
+    disableFormTag = _ref$disableFormTag === void 0 ? false : _ref$disableFormTag,
+    _ref$isSubmitting = _ref.isSubmitting,
+    isSubmitting = _ref$isSubmitting === void 0 ? false : _ref$isSubmitting,
+    handleErrors = _ref.handleErrors;
   var _useState = (0, _react.useState)([]),
     _useState2 = _slicedToArray(_useState, 2),
     sortedFields = _useState2[0],
@@ -277,9 +281,15 @@ var GenericForm = function GenericForm(_ref) {
     setErrors = _useState6[1];
   var _useState7 = (0, _react.useState)(false),
     _useState8 = _slicedToArray(_useState7, 2),
-    isSubmitting = _useState8[0],
+    isSubmittingInternal = _useState8[0],
     setIsSubmitting = _useState8[1];
   var prevFieldValuesRef = (0, _react.useRef)({});
+  (0, _react.useEffect)(function () {
+    setIsSubmitting(isSubmitting);
+  }, [isSubmitting]);
+  (0, _react.useEffect)(function () {
+    handleErrors && handleErrors(errors);
+  }, [errors]);
 
   // ── Sync fields ─────────────────────────────────────────────────────────────
   (0, _react.useEffect)(function () {
@@ -551,7 +561,7 @@ var GenericForm = function GenericForm(_ref) {
 
   // #region RenderField
   var renderField = (0, _react.useCallback)(function (field) {
-    var _internalFormData$fie2;
+    var _internalFormData$fie2, _field$showStrength;
     var isHidden = typeof field.hide === 'function' ? field.hide(internalFormData, field) : field.hide;
     if (isHidden) return null;
     var error = errors[field.name];
@@ -594,15 +604,20 @@ var GenericForm = function GenericForm(_ref) {
       case 'string':
       case 'text':
       case 'email':
-      case 'password':
         return /*#__PURE__*/(0, _jsxRuntime.jsx)(_CustomInput["default"], _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, cp), sp), fp), {}, {
           value: value,
           type: field.type === 'email' ? 'email' : field.type === 'password' ? 'password' : 'text',
-          placeholder: field.placeholder,
           onChange: fieldHandler(field),
-          inputStyle: field.inputStyle,
           className: field.className
         }), field.name);
+      case 'password':
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_CustomPasswordInput["default"], _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, cp), sp), fp), {}, {
+          value: value,
+          onChange: fieldHandler(field),
+          className: field.className,
+          showStrength: (_field$showStrength = field.showStrength) !== null && _field$showStrength !== void 0 ? _field$showStrength : false,
+          matchValue: field.matchField ? internalFormData[field.matchField] : undefined
+        }), field.name);
       case 'int':
       case 'number':
         return /*#__PURE__*/(0, _jsxRuntime.jsx)(_CustomNumberInput["default"], _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, cp), sp), fp), {}, {
@@ -705,7 +720,8 @@ var GenericForm = function GenericForm(_ref) {
           grouped: field.grouped,
           collapsible: field.collapsible,
           defaultCollapsed: field.defaultCollapsed,
-          enableParent: field.enableParent
+          enableParent: field.enableParent,
+          parentCheckAll: field.parentCheckAll
         }), field.name);
       case 'radioGroup':
       case 'radioGroupInline':
@@ -747,6 +763,7 @@ var GenericForm = function GenericForm(_ref) {
         return /*#__PURE__*/(0, _jsxRuntime.jsx)(_CustomFileInput["default"], _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, cp), sp), fp), {}, {
           value: value,
           accept: field.accept,
+          tooltipInline: field.tooltipInline,
           onChange: fieldHandler(field)
         }), field.name);
       case 'inputAdd':
@@ -794,7 +811,9 @@ var GenericForm = function GenericForm(_ref) {
   var renderGroupSection = function renderGroupSection(g, fieldList) {
     return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
       className: "ufg-fields",
-      style: fieldsStyle,
+      style: enableModal ? _objectSpread({
+        gap: "1em"
+      }, fieldsStyle) : fieldsStyle,
       children: [g !== 'ungrouped' && /*#__PURE__*/(0, _jsxRuntime.jsx)("h2", {
         children: g
       }), renderFields(fieldList)]
@@ -891,7 +910,9 @@ var GenericForm = function GenericForm(_ref) {
   var hasErrors = Object.values(errors).some(Boolean);
   var actionsBar = /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
     className: "ufg-actions",
-    style: actionsDivStyle,
+    style: enableModal ? _objectSpread({
+      justifyContent: "center"
+    }, actionsDivStyle) : actionsDivStyle,
     children: [customActions.map(function (action, idx) {
       return (0, _CustomAction["default"])(_objectSpread(_objectSpread({}, action), {}, {
         name: "".concat(action.name, " ").concat(idx),
@@ -901,9 +922,9 @@ var GenericForm = function GenericForm(_ref) {
     }), showSubmit && haveSaveButton && /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
       type: "submit",
       className: "ufg-button ".concat(submitButton.className || 'ufg-button-primary'),
-      disabled: isSubmitting || hasErrors,
+      disabled: isSubmittingInternal || hasErrors,
       style: _objectSpread(_objectSpread({}, actionsStyle), submitButton.style),
-      children: isSubmitting ? /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
+      children: isSubmittingInternal ? /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_semanticUiReact.Icon, {
           name: "spinner",
           loading: true
@@ -924,14 +945,20 @@ var GenericForm = function GenericForm(_ref) {
   // #region Form JSX
   var formJSX = disableFormTag ? /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
     className: "ufg-form",
-    style: formStyle || {
+    style: enableModal ? _objectSpread({
+      padding: "2em",
+      gap: "3em"
+    }, formStyle) : formStyle || {
       margin: 'auto'
     },
     onSubmit: onFormSubmit,
     children: [buildContent(), actionsBar]
   }) : /*#__PURE__*/(0, _jsxRuntime.jsxs)("form", {
     className: "ufg-form",
-    style: formStyle || {
+    style: enableModal ? _objectSpread({
+      padding: "2em",
+      gap: "3em"
+    }, formStyle) : formStyle || {
       margin: 'auto'
     },
     onSubmit: onFormSubmit,
@@ -944,7 +971,7 @@ var GenericForm = function GenericForm(_ref) {
       size: modalSize,
       style: containerStyle,
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Modal.Header, {
-        closeButton: true,
+        closeButton: !!onCancel,
         children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactBootstrap.Modal.Title, {
           style: titleStyle,
           children: [titleIcon, " ", title, " "]

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@insticc/genericform",
-  "version": "2.1.2",
+  "version": "2.1.4",
   "description": "A generic form with a comprehensive set of field types, validation, and external state management",
   "main": "build/index.js",
   "scripts": {