@insticc/genericform 1.0.11 → 2.0.0

package/build/FormFields/CustomInput.js

@@ -4,77 +4,82 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = void 0;
-var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
-var _semanticUiReact = require("semantic-ui-react");
+var _react = require("react");
+var _defaults = require("./defaults");
 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 _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 var CustomInput = function CustomInput(_ref) {
   var onChange = _ref.onChange,
     name = _ref.name,
     displayName = _ref.displayName,
-    value = _ref.value,
+    _ref$value = _ref.value,
+    value = _ref$value === void 0 ? "" : _ref$value,
+    _ref$type = _ref.type,
+    type = _ref$type === void 0 ? "text" : _ref$type,
     _ref$disabled = _ref.disabled,
     disabled = _ref$disabled === void 0 ? false : _ref$disabled,
     _ref$required = _ref.required,
     required = _ref$required === void 0 ? false : _ref$required,
+    placeholder = _ref.placeholder,
+    error = _ref.error,
+    _ref$tooltip = _ref.tooltip,
+    tooltip = _ref$tooltip === void 0 ? "" : _ref$tooltip,
+    _ref$showHelp = _ref.showHelp,
+    showHelp = _ref$showHelp === void 0 ? false : _ref$showHelp,
+    _ref$helpText = _ref.helpText,
+    helpText = _ref$helpText === void 0 ? "" : _ref$helpText,
+    className = _ref.className,
     _ref$mainDivStyle = _ref.mainDivStyle,
-    mainDivStyle = _ref$mainDivStyle === void 0 ? {
-      marginBottom: '13px'
-    } : _ref$mainDivStyle,
+    mainDivStyle = _ref$mainDivStyle === void 0 ? {} : _ref$mainDivStyle,
     _ref$labelStyle = _ref.labelStyle,
-    labelStyle = _ref$labelStyle === void 0 ? {
-      width: '161px',
-      fontSize: '10pt',
-      textAlign: 'left'
-    } : _ref$labelStyle,
+    labelStyle = _ref$labelStyle === void 0 ? {} : _ref$labelStyle,
     _ref$spanStyle = _ref.spanStyle,
-    spanStyle = _ref$spanStyle === void 0 ? {
-      color: '#db2828',
-      position: 'relative',
-      top: '-2px'
-    } : _ref$spanStyle,
-    _ref$componentStyle = _ref.componentStyle,
-    componentStyle = _ref$componentStyle === void 0 ? {
-      minWidth: 350,
-      fontSize: '16px !important'
-    } : _ref$componentStyle,
-    tooltipStyle = _ref.tooltipStyle,
-    className = _ref.className;
-  return /*#__PURE__*/_react["default"].createElement("div", {
-    className: "inputDiv",
+    spanStyle = _ref$spanStyle === void 0 ? {} : _ref$spanStyle,
+    _ref$inputStyle = _ref.inputStyle,
+    inputStyle = _ref$inputStyle === void 0 ? {} : _ref$inputStyle,
+    _ref$tooltipStyle = _ref.tooltipStyle,
+    tooltipStyle = _ref$tooltipStyle === void 0 ? {} : _ref$tooltipStyle;
+  var handleChange = (0, _react.useCallback)(function (e) {
+    return onChange === null || onChange === void 0 ? void 0 : onChange(name, e.target.value);
+  }, [onChange, name]);
+  return /*#__PURE__*/React.createElement("div", {
+    className: "ufg-field-group",
     id: name,
-    style: mainDivStyle,
-    key: name
-  }, /*#__PURE__*/_react["default"].createElement("label", {
-    htmlFor: 'form-input-' + name,
-    style: labelStyle
-  }, displayName, " ", required && /*#__PURE__*/_react["default"].createElement("span", {
-    style: spanStyle
-  }, "*")), /*#__PURE__*/_react["default"].createElement(_semanticUiReact.Form.Input, {
-    inline: true,
-    style: componentStyle,
-    id: "form-input-" + name,
-    placeholder: displayName,
+    style: mainDivStyle
+  }, (0, _defaults.labelJsx)(name, labelStyle, displayName, required, spanStyle, showHelp, helpText), /*#__PURE__*/React.createElement("input", {
+    id: "form-input-".concat(name),
+    type: type,
     name: name,
     value: value,
-    onChange: onChange,
+    placeholder: placeholder !== null && placeholder !== void 0 ? placeholder : displayName,
     disabled: disabled,
     required: required,
-    className: className
-  }));
+    className: "ufg-input".concat(error ? " error" : "").concat(className ? " ".concat(className) : ""),
+    style: inputStyle,
+    onChange: handleChange
+  }), (0, _defaults.errorJsx)(error), (0, _defaults.tooltipJsx)(tooltip, tooltipStyle));
 };
-CustomInput.propTypes = {
+CustomInput.propTypes = _defineProperty(_defineProperty({
   onChange: _propTypes["default"].func.isRequired,
   name: _propTypes["default"].string.isRequired,
   displayName: _propTypes["default"].string,
   value: _propTypes["default"].string,
+  type: _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,
+  inputStyle: _propTypes["default"].object,
   mainDivStyle: _propTypes["default"].object,
   labelStyle: _propTypes["default"].object,
-  spanStyle: _propTypes["default"].object,
-  componentStyle: _propTypes["default"].object,
-  tooltipStyle: _propTypes["default"].object,
-  className: _propTypes["default"].string
-};
+  spanStyle: _propTypes["default"].object
+}, "inputStyle", _propTypes["default"].object), "tooltipStyle", _propTypes["default"].object);
 var _default = exports["default"] = CustomInput;

package/build/FormFields/CustomJson.js

@@ -0,0 +1,148 @@
+"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 _react = require("react");
+var _defaults = require("./defaults");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+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; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+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 PLACEHOLDERS = {
+  single: {
+    string: "string…",
+    number: "42",
+    object: '{"key": "value"}'
+  },
+  multiple: {
+    string: '["s1","s2"]',
+    number: "[1,2,3]",
+    object: '[{"key":"val"}]'
+  }
+};
+
+/**
+ * JSON textarea field with optional single / multiple mode switching.
+ * onChange(name, rawValue, isMultipleMode) — called on every keystroke.
+ * onValidate(name, rawValue, isMultipleMode)  — called on blur.
+ */
+var CustomJson = function CustomJson(_ref) {
+  var _onChange = _ref.onChange,
+    onValidate = _ref.onValidate,
+    name = _ref.name,
+    displayName = _ref.displayName,
+    _ref$value = _ref.value,
+    value = _ref$value === void 0 ? "" : _ref$value,
+    _ref$disabled = _ref.disabled,
+    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+    _ref$required = _ref.required,
+    required = _ref$required === void 0 ? false : _ref$required,
+    datatype = _ref.datatype,
+    _ref$allowModeSwitch = _ref.allowModeSwitch,
+    allowModeSwitch = _ref$allowModeSwitch === void 0 ? false : _ref$allowModeSwitch,
+    _ref$storeAsString = _ref.storeAsString,
+    storeAsString = _ref$storeAsString === void 0 ? false : _ref$storeAsString,
+    rows = _ref.rows,
+    placeholder = _ref.placeholder,
+    error = _ref.error,
+    _ref$tooltip = _ref.tooltip,
+    tooltip = _ref$tooltip === void 0 ? "" : _ref$tooltip,
+    _ref$showHelp = _ref.showHelp,
+    showHelp = _ref$showHelp === void 0 ? false : _ref$showHelp,
+    _ref$helpText = _ref.helpText,
+    helpText = _ref$helpText === void 0 ? "" : _ref$helpText,
+    _ref$mainDivStyle = _ref.mainDivStyle,
+    mainDivStyle = _ref$mainDivStyle === void 0 ? {} : _ref$mainDivStyle,
+    _ref$labelStyle = _ref.labelStyle,
+    labelStyle = _ref$labelStyle === void 0 ? {} : _ref$labelStyle,
+    _ref$spanStyle = _ref.spanStyle,
+    spanStyle = _ref$spanStyle === void 0 ? {} : _ref$spanStyle,
+    _ref$inputStyle = _ref.inputStyle,
+    inputStyle = _ref$inputStyle === void 0 ? {} : _ref$inputStyle,
+    _ref$tooltipStyle = _ref.tooltipStyle,
+    tooltipStyle = _ref$tooltipStyle === void 0 ? {} : _ref$tooltipStyle;
+  var _useState = (0, _react.useState)("single"),
+    _useState2 = _slicedToArray(_useState, 2),
+    mode = _useState2[0],
+    setMode = _useState2[1];
+  var isMulti = mode === "multiple";
+  var ph = placeholder || (isMulti ? PLACEHOLDERS.multiple : PLACEHOLDERS.single)[datatype] || '{"key": "value"}';
+  var displayValue = typeof value === "string" ? value : value !== undefined && value !== "" ? JSON.stringify(value, null, 2) : "";
+  return /*#__PURE__*/React.createElement("div", {
+    className: "ufg-field-group",
+    id: name,
+    style: mainDivStyle
+  }, (0, _defaults.labelJsx)(name, labelStyle, displayName, required, spanStyle, showHelp, helpText), allowModeSwitch && /*#__PURE__*/React.createElement("div", {
+    className: "ufg-json-mode-selector"
+  }, ["single", "multiple"].map(function (m) {
+    return /*#__PURE__*/React.createElement("label", {
+      key: m,
+      style: {
+        marginRight: "1rem"
+      }
+    }, /*#__PURE__*/React.createElement("input", {
+      type: "radio",
+      name: "".concat(name, "_mode"),
+      value: m,
+      checked: mode === m,
+      onChange: function onChange() {
+        return setMode(m);
+      }
+    }), " ", m.charAt(0).toUpperCase() + m.slice(1));
+  })), /*#__PURE__*/React.createElement("textarea", {
+    className: "ufg-textarea ufg-json-textarea".concat(error ? " error" : ""),
+    name: name,
+    value: displayValue,
+    placeholder: ph,
+    disabled: disabled,
+    rows: rows || (isMulti ? 12 : 8),
+    style: _objectSpread({
+      fontFamily: "monospace",
+      fontSize: "0.9em"
+    }, inputStyle),
+    onChange: function onChange(e) {
+      return _onChange === null || _onChange === void 0 ? void 0 : _onChange(name, e.target.value, isMulti);
+    },
+    onBlur: function onBlur(e) {
+      if (e.target.value.trim()) onValidate === null || onValidate === void 0 || onValidate(name, e.target.value, isMulti);
+    }
+  }), isMulti && /*#__PURE__*/React.createElement("div", {
+    className: "ufg-json-hint"
+  }, "Enter a ", datatype, " array: ", ph), (0, _defaults.errorJsx)(error), (0, _defaults.tooltipJsx)(tooltip, tooltipStyle));
+};
+CustomJson.propTypes = {
+  onChange: _propTypes["default"].func.isRequired,
+  onValidate: _propTypes["default"].func,
+  name: _propTypes["default"].string.isRequired,
+  displayName: _propTypes["default"].string,
+  value: _propTypes["default"].any,
+  disabled: _propTypes["default"].bool,
+  required: _propTypes["default"].bool,
+  datatype: _propTypes["default"].oneOf(["string", "number", "object"]),
+  allowModeSwitch: _propTypes["default"].bool,
+  storeAsString: _propTypes["default"].bool,
+  rows: _propTypes["default"].number,
+  placeholder: _propTypes["default"].string,
+  error: _propTypes["default"].string,
+  tooltip: _propTypes["default"].string,
+  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"] = CustomJson;

package/build/FormFields/CustomLabel.js

@@ -6,29 +6,23 @@ Object.defineProperty(exports, "__esModule", {
 exports["default"] = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
+var _defaults = require("./defaults");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+/**
+ * Static label — no onChange / value / validation.
+ */
 var CustomLabel = function CustomLabel(_ref) {
   var name = _ref.name,
     displayName = _ref.displayName,
     _ref$mainDivStyle = _ref.mainDivStyle,
-    mainDivStyle = _ref$mainDivStyle === void 0 ? {
-      marginBottom: '13px'
-    } : _ref$mainDivStyle,
+    mainDivStyle = _ref$mainDivStyle === void 0 ? {} : _ref$mainDivStyle,
     _ref$labelStyle = _ref.labelStyle,
-    labelStyle = _ref$labelStyle === void 0 ? {
-      width: '161px',
-      fontSize: '10pt',
-      textAlign: 'left'
-    } : _ref$labelStyle;
+    labelStyle = _ref$labelStyle === void 0 ? {} : _ref$labelStyle;
   return /*#__PURE__*/_react["default"].createElement("div", {
-    className: "labelDiv",
+    className: "ufg-field-group",
     id: name,
-    key: name,
     style: mainDivStyle
-  }, /*#__PURE__*/_react["default"].createElement("label", {
-    htmlFor: 'form-input-' + name,
-    style: labelStyle
-  }, displayName));
+  }, (0, _defaults.labelJsx)(name, labelStyle, displayName));
 };
 CustomLabel.propTypes = {
   name: _propTypes["default"].string.isRequired,

package/build/FormFields/CustomMultiDropdown.js

@@ -0,0 +1,88 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _react = require("react");
+var _semanticUiReact = require("semantic-ui-react");
+var _defaults = require("./defaults");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+/**
+ * Multi-select dropdown. Semantic UI Dropdown is kept — native <select multiple>
+ * provides significantly inferior UX. onChange is normalised to (name, value[]).
+ */
+var CustomMultiDropdown = function CustomMultiDropdown(_ref) {
+  var onChange = _ref.onChange,
+    name = _ref.name,
+    displayName = _ref.displayName,
+    _ref$value = _ref.value,
+    value = _ref$value === void 0 ? [] : _ref$value,
+    _ref$options = _ref.options,
+    options = _ref$options === void 0 ? [] : _ref$options,
+    placeholder = _ref.placeholder,
+    _ref$disabled = _ref.disabled,
+    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+    _ref$required = _ref.required,
+    required = _ref$required === void 0 ? false : _ref$required,
+    error = _ref.error,
+    _ref$tooltip = _ref.tooltip,
+    tooltip = _ref$tooltip === void 0 ? "" : _ref$tooltip,
+    _ref$showHelp = _ref.showHelp,
+    showHelp = _ref$showHelp === void 0 ? false : _ref$showHelp,
+    _ref$helpText = _ref.helpText,
+    helpText = _ref$helpText === void 0 ? "" : _ref$helpText,
+    _ref$mainDivStyle = _ref.mainDivStyle,
+    mainDivStyle = _ref$mainDivStyle === void 0 ? {} : _ref$mainDivStyle,
+    _ref$labelStyle = _ref.labelStyle,
+    labelStyle = _ref$labelStyle === void 0 ? {} : _ref$labelStyle,
+    _ref$spanStyle = _ref.spanStyle,
+    spanStyle = _ref$spanStyle === void 0 ? {} : _ref$spanStyle,
+    _ref$inputStyle = _ref.inputStyle,
+    inputStyle = _ref$inputStyle === void 0 ? {} : _ref$inputStyle,
+    _ref$tooltipStyle = _ref.tooltipStyle,
+    tooltipStyle = _ref$tooltipStyle === void 0 ? {} : _ref$tooltipStyle;
+  var handleChange = (0, _react.useCallback)(function (_, data) {
+    return onChange === null || onChange === void 0 ? void 0 : onChange(name, data.value);
+  }, [onChange, name]);
+  return /*#__PURE__*/React.createElement("div", {
+    className: "ufg-field-group",
+    id: name,
+    style: mainDivStyle
+  }, (0, _defaults.labelJsx)(name, labelStyle, displayName, required, spanStyle, showHelp, helpText), /*#__PURE__*/React.createElement(_semanticUiReact.Dropdown, {
+    id: "form-input-".concat(name),
+    name: name,
+    style: inputStyle,
+    placeholder: placeholder || "Select ".concat(displayName || name),
+    fluid: true,
+    multiple: true,
+    selection: true,
+    search: true,
+    value: value,
+    options: options,
+    onChange: handleChange,
+    disabled: disabled,
+    className: error ? "error" : undefined
+  }), (0, _defaults.errorJsx)(error), (0, _defaults.tooltipJsx)(tooltip, tooltipStyle));
+};
+CustomMultiDropdown.propTypes = {
+  onChange: _propTypes["default"].func.isRequired,
+  name: _propTypes["default"].string.isRequired,
+  displayName: _propTypes["default"].string,
+  value: _propTypes["default"].array,
+  options: _propTypes["default"].array.isRequired,
+  placeholder: _propTypes["default"].string,
+  disabled: _propTypes["default"].bool,
+  required: _propTypes["default"].bool,
+  error: _propTypes["default"].string,
+  tooltip: _propTypes["default"].string,
+  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"] = CustomMultiDropdown;

package/build/FormFields/CustomNumberInput.js

@@ -4,80 +4,83 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = void 0;
-var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
-var _semanticUiReact = require("semantic-ui-react");
+var _react = require("react");
+var _defaults = require("./defaults");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
 var CustomNumberInput = function CustomNumberInput(_ref) {
   var onChange = _ref.onChange,
     name = _ref.name,
     displayName = _ref.displayName,
-    value = _ref.value,
+    _ref$value = _ref.value,
+    value = _ref$value === void 0 ? "" : _ref$value,
     _ref$disabled = _ref.disabled,
     disabled = _ref$disabled === void 0 ? false : _ref$disabled,
     _ref$required = _ref.required,
     required = _ref$required === void 0 ? false : _ref$required,
+    placeholder = _ref.placeholder,
+    min = _ref.min,
+    max = _ref.max,
+    step = _ref.step,
+    error = _ref.error,
+    _ref$tooltip = _ref.tooltip,
+    tooltip = _ref$tooltip === void 0 ? "" : _ref$tooltip,
     _ref$showHelp = _ref.showHelp,
     showHelp = _ref$showHelp === void 0 ? false : _ref$showHelp,
     _ref$helpText = _ref.helpText,
     helpText = _ref$helpText === void 0 ? "" : _ref$helpText,
-    mainDivStyle = _ref.mainDivStyle,
-    _ref$componentStyle = _ref.componentStyle,
-    componentStyle = _ref$componentStyle === void 0 ? {
-      minWidth: 50,
-      fontSize: '16px !important'
-    } : _ref$componentStyle,
+    _ref$mainDivStyle = _ref.mainDivStyle,
+    mainDivStyle = _ref$mainDivStyle === void 0 ? {} : _ref$mainDivStyle,
     _ref$labelStyle = _ref.labelStyle,
-    labelStyle = _ref$labelStyle === void 0 ? {
-      fontWeight: 'normal !important',
-      marginTop: 10,
-      width: 150,
-      fontSize: '10pt'
-    } : _ref$labelStyle,
+    labelStyle = _ref$labelStyle === void 0 ? {} : _ref$labelStyle,
+    _ref$spanStyle = _ref.spanStyle,
+    spanStyle = _ref$spanStyle === void 0 ? {} : _ref$spanStyle,
+    _ref$inputStyle = _ref.inputStyle,
+    inputStyle = _ref$inputStyle === void 0 ? {} : _ref$inputStyle,
     _ref$tooltipStyle = _ref.tooltipStyle,
-    tooltipStyle = _ref$tooltipStyle === void 0 ? {
-      fontSize: '11px'
-    } : _ref$tooltipStyle,
-    _ref$tooltip = _ref.tooltip,
-    tooltip = _ref$tooltip === void 0 ? "" : _ref$tooltip;
-  return /*#__PURE__*/_react["default"].createElement("div", {
-    className: "inputNumberDiv",
+    tooltipStyle = _ref$tooltipStyle === void 0 ? {} : _ref$tooltipStyle;
+  var handleChange = (0, _react.useCallback)(function (e) {
+    return onChange === null || onChange === void 0 ? void 0 : onChange(name, Number(e.target.value));
+  }, [onChange, name]);
+  return /*#__PURE__*/React.createElement("div", {
+    className: "ufg-field-group",
     id: name,
-    key: name,
     style: mainDivStyle
-  }, /*#__PURE__*/_react["default"].createElement(_semanticUiReact.Form.Input, {
-    inline: true,
-    style: componentStyle,
-    id: "form-input-" + name,
-    placeholder: name,
+  }, (0, _defaults.labelJsx)(name, labelStyle, displayName, required, spanStyle, showHelp, helpText), /*#__PURE__*/React.createElement("input", {
+    id: "form-input-".concat(name),
     type: "number",
-    label: /*#__PURE__*/_react["default"].createElement("label", {
-      "for": "form-input-" + name,
-      style: labelStyle
-    }, displayName, " ", showHelp ? /*#__PURE__*/_react["default"].createElement(_semanticUiReact.Icon, {
-      name: "user circle help",
-      title: helpText,
-      style: tooltipStyle
-    }) : null),
     name: name,
-    defaultValue: value,
-    onChange: onChange,
+    value: value,
+    placeholder: placeholder !== null && placeholder !== void 0 ? placeholder : displayName,
     disabled: disabled,
-    required: required
-  }), tooltip != "" ? /*#__PURE__*/_react["default"].createElement("label", {
-    style: tooltipStyle
-  }, tooltip) : null);
+    required: required,
+    min: min,
+    max: max,
+    step: step,
+    className: "ufg-input".concat(error ? " error" : ""),
+    style: inputStyle,
+    onChange: handleChange
+  }), (0, _defaults.errorJsx)(error), (0, _defaults.tooltipJsx)(tooltip, tooltipStyle));
 };
 CustomNumberInput.propTypes = {
   onChange: _propTypes["default"].func.isRequired,
   name: _propTypes["default"].string.isRequired,
   displayName: _propTypes["default"].string,
-  value: _propTypes["default"].string,
+  value: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number]),
   disabled: _propTypes["default"].bool,
   required: _propTypes["default"].bool,
+  placeholder: _propTypes["default"].string,
+  min: _propTypes["default"].number,
+  max: _propTypes["default"].number,
+  step: _propTypes["default"].number,
+  error: _propTypes["default"].string,
+  tooltip: _propTypes["default"].string,
+  showHelp: _propTypes["default"].bool,
+  helpText: _propTypes["default"].string,
   mainDivStyle: _propTypes["default"].object,
-  componentStyle: _propTypes["default"].object,
   labelStyle: _propTypes["default"].object,
+  spanStyle: _propTypes["default"].object,
+  inputStyle: _propTypes["default"].object,
   tooltipStyle: _propTypes["default"].object
 };
 var _default = exports["default"] = CustomNumberInput;

package/build/FormFields/CustomRadioGroup.js

@@ -0,0 +1,91 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _defaults = require("./defaults");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+var CustomRadioGroup = function CustomRadioGroup(_ref) {
+  var _onChange = _ref.onChange,
+    onOptionChange = _ref.onOptionChange,
+    formData = _ref.formData,
+    name = _ref.name,
+    displayName = _ref.displayName,
+    _ref$value = _ref.value,
+    value = _ref$value === void 0 ? "" : _ref$value,
+    _ref$options = _ref.options,
+    options = _ref$options === void 0 ? [] : _ref$options,
+    _ref$inline = _ref.inline,
+    inline = _ref$inline === void 0 ? false : _ref$inline,
+    _ref$required = _ref.required,
+    required = _ref$required === void 0 ? false : _ref$required,
+    _ref$disabled = _ref.disabled,
+    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+    error = _ref.error,
+    _ref$tooltip = _ref.tooltip,
+    tooltip = _ref$tooltip === void 0 ? "" : _ref$tooltip,
+    _ref$showHelp = _ref.showHelp,
+    showHelp = _ref$showHelp === void 0 ? false : _ref$showHelp,
+    _ref$helpText = _ref.helpText,
+    helpText = _ref$helpText === void 0 ? "" : _ref$helpText,
+    _ref$mainDivStyle = _ref.mainDivStyle,
+    mainDivStyle = _ref$mainDivStyle === void 0 ? {} : _ref$mainDivStyle,
+    _ref$labelStyle = _ref.labelStyle,
+    labelStyle = _ref$labelStyle === void 0 ? {} : _ref$labelStyle,
+    _ref$spanStyle = _ref.spanStyle,
+    spanStyle = _ref$spanStyle === void 0 ? {} : _ref$spanStyle,
+    _ref$inputStyle = _ref.inputStyle,
+    inputStyle = _ref$inputStyle === void 0 ? {} : _ref$inputStyle,
+    _ref$tooltipStyle = _ref.tooltipStyle,
+    tooltipStyle = _ref$tooltipStyle === void 0 ? {} : _ref$tooltipStyle;
+  return /*#__PURE__*/React.createElement("div", {
+    className: "ufg-field-group",
+    id: name,
+    style: mainDivStyle
+  }, (0, _defaults.labelJsx)(name, labelStyle, displayName, required, spanStyle, showHelp, helpText), /*#__PURE__*/React.createElement("div", {
+    className: inline ? "ufg-radio-group-inline" : "ufg-radio-group"
+  }, options.map(function (opt, idx) {
+    return /*#__PURE__*/React.createElement("div", {
+      key: idx,
+      className: "ufg-radio-item"
+    }, /*#__PURE__*/React.createElement("input", {
+      id: "".concat(name, "-").concat(idx),
+      type: "radio",
+      name: name,
+      style: inputStyle,
+      value: opt.value || opt.name,
+      checked: value === (opt.value || opt.name),
+      disabled: !!opt.disabled || disabled,
+      onChange: function onChange(e) {
+        _onChange === null || _onChange === void 0 || _onChange(name, e.target.value);
+        onOptionChange === null || onOptionChange === void 0 || onOptionChange(opt.name || opt.value, formData);
+      }
+    }), /*#__PURE__*/React.createElement("label", {
+      htmlFor: "".concat(name, "-").concat(idx)
+    }, opt.label || opt.text));
+  })), (0, _defaults.errorJsx)(error), (0, _defaults.tooltipJsx)(tooltip, tooltipStyle));
+};
+CustomRadioGroup.propTypes = {
+  onChange: _propTypes["default"].func.isRequired,
+  onOptionChange: _propTypes["default"].func,
+  formData: _propTypes["default"].object,
+  name: _propTypes["default"].string.isRequired,
+  displayName: _propTypes["default"].string,
+  value: _propTypes["default"].string,
+  options: _propTypes["default"].array.isRequired,
+  inline: _propTypes["default"].bool,
+  required: _propTypes["default"].bool,
+  disabled: _propTypes["default"].bool,
+  error: _propTypes["default"].string,
+  tooltip: _propTypes["default"].string,
+  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"] = CustomRadioGroup;