@insticc/genericform 2.0.1 → 2.0.3

package/build/FormFields/CustomCheckboxGroup.js

@@ -7,6 +7,7 @@ exports["default"] = void 0;
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _defaults = require("./defaults");
 var _react = require("react");
+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(); }
 function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
@@ -25,6 +26,8 @@ var CustomCheckboxGroup = function CustomCheckboxGroup(_ref) {
     options = _ref$options === void 0 ? [] : _ref$options,
     _ref$required = _ref.required,
     required = _ref$required === void 0 ? false : _ref$required,
+    _ref$grouped = _ref.grouped,
+    grouped = _ref$grouped === void 0 ? false : _ref$grouped,
     error = _ref.error,
     _ref$tooltip = _ref.tooltip,
     tooltip = _ref$tooltip === void 0 ? "" : _ref$tooltip,
@@ -45,37 +48,75 @@ var CustomCheckboxGroup = function CustomCheckboxGroup(_ref) {
     onChange === null || onChange === void 0 || onChange(name, data);
     onOptionChange === null || onOptionChange === void 0 || onOptionChange(data);
   }, [onChange, onOptionChange, name, checked]);
-  return /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
     className: "ufg-field-group",
     id: name,
-    style: mainDivStyle
-  }, (0, _defaults.labelJsx)(name, labelStyle, displayName, required, spanStyle), /*#__PURE__*/React.createElement("div", {
-    className: "ufg-checkbox-group"
-  }, options.map(function (opt, idx) {
-    return /*#__PURE__*/React.createElement("div", {
-      key: opt.name || opt.value,
-      className: "ufg-checkbox-item"
-    }, /*#__PURE__*/React.createElement("input", {
-      id: "".concat(name, "-").concat(idx),
-      type: "checkbox",
-      checked: checked.includes(opt.name || opt.value),
-      disabled: !!opt.disabled,
-      style: inputStyle,
-      onChange: function onChange(e) {
-        return handleChange(opt.name || opt.value, e.target.checked);
-      }
-    }), /*#__PURE__*/React.createElement("label", {
-      htmlFor: "".concat(name, "-").concat(idx)
-    }, opt.label || opt.text));
-  })), (0, _defaults.errorJsx)(error), (0, _defaults.tooltipJsx)(tooltip, tooltipStyle));
+    style: mainDivStyle,
+    children: [(0, _defaults.labelJsx)(name, labelStyle, displayName, required, spanStyle), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: "ufg-checkbox-group",
+      children: options.map(function (opt, idx) {
+        var _opt$options;
+        return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+          children: [idx > 0 && grouped && /*#__PURE__*/(0, _jsxRuntime.jsx)("hr", {
+            style: {
+              margin: '0.5rem 0 0.75rem',
+              color: '#888888'
+            }
+          }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+            className: "ufg-checkbox-item",
+            style: inputStyle,
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
+              id: "".concat(name, "-").concat(idx),
+              type: "checkbox",
+              checked: checked.includes(opt.name || opt.value),
+              disabled: !!opt.disabled,
+              style: opt.inputStyle,
+              onChange: function onChange(e) {
+                return handleChange(opt.name || opt.value, e.target.checked);
+              }
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)("label", {
+              htmlFor: "".concat(name, "-").concat(idx),
+              style: opt.labelStyle,
+              children: opt.label || opt.text
+            })]
+          }, opt.name || opt.value), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            style: opt.options ? {
+              paddingLeft: '1.25rem'
+            } : undefined,
+            children: (_opt$options = opt.options) === null || _opt$options === void 0 ? void 0 : _opt$options.map(function (subopt, subidx) {
+              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),
+                  disabled: !!subopt.disabled,
+                  style: subopt.inputStyle,
+                  onChange: function onChange(e) {
+                    return handleChange(subopt.name || subopt.value, e.target.checked);
+                  }
+                }), /*#__PURE__*/(0, _jsxRuntime.jsx)("label", {
+                  htmlFor: "".concat(name, "-").concat(idx, "-").concat(subidx),
+                  style: subopt.labelStyle,
+                  children: subopt.label || subopt.text
+                })]
+              }, subopt.name || subopt.value);
+            })
+          })]
+        }, "".concat(name, "-").concat(idx));
+      })
+    }), (0, _defaults.errorJsx)(error), (0, _defaults.tooltipJsx)(tooltip, tooltipStyle)]
+  });
 };
 CustomCheckboxGroup.propTypes = {
   onChange: _propTypes["default"].func.isRequired,
   onOptionChange: _propTypes["default"].func,
   name: _propTypes["default"].string.isRequired,
-  displayName: _propTypes["default"].string,
+  displayName: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].object]),
   options: _propTypes["default"].array.isRequired,
   required: _propTypes["default"].bool,
+  grouped: _propTypes["default"].bool,
   error: _propTypes["default"].string,
   tooltip: _propTypes["default"].string,
   mainDivStyle: _propTypes["default"].object,

package/build/FormFields/CustomComponent.js

@@ -4,37 +4,39 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = void 0;
-var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _defaults = require("./defaults");
+var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
 /**
  * Pass-through wrapper for arbitrary React nodes.
  * No onChange / value — purely structural.
- */
-var CustomComponent = function CustomComponent(_ref) {
+ */var CustomComponent = function CustomComponent(_ref) {
   var name = _ref.name,
     displayName = _ref.displayName,
     component = _ref.component,
     _ref$required = _ref.required,
     required = _ref$required === void 0 ? false : _ref$required,
+    error = _ref.error,
     _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;
-  return /*#__PURE__*/_react["default"].createElement("div", {
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
     className: "ufg-component-wrapper",
     id: name,
-    style: mainDivStyle
-  }, displayName && (0, _defaults.labelJsx)(name, labelStyle, displayName, required, spanStyle), component);
+    style: mainDivStyle,
+    children: [displayName && (0, _defaults.labelJsx)(name, labelStyle, displayName, required, spanStyle), component, (0, _defaults.errorJsx)(error)]
+  });
 };
 CustomComponent.propTypes = {
   name: _propTypes["default"].string,
-  displayName: _propTypes["default"].string,
+  displayName: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].object]),
   component: _propTypes["default"].node,
   required: _propTypes["default"].bool,
+  error: _propTypes["default"].string,
   mainDivStyle: _propTypes["default"].object,
   labelStyle: _propTypes["default"].object,
   spanStyle: _propTypes["default"].object

package/build/FormFields/CustomDatePicker.js

@@ -8,9 +8,14 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _react = require("react");
 var _reactDatetime = _interopRequireDefault(require("react-datetime"));
 var _defaults = require("./defaults");
+var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
-function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
-/**
+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; }
+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); } /**
  * Date / datetime / time picker.
  * onChange(date, name) — keeps the existing signature that parent onChangeTime expects.
  * Set dateFormat=false + timeFormat="HH:mm" for time-only mode.
@@ -51,36 +56,37 @@ var CustomDatePicker = function CustomDatePicker(_ref) {
   var handleChange = (0, _react.useCallback)(function (date) {
     return onChange === null || onChange === void 0 ? void 0 : onChange(date, name);
   }, [onChange, name]);
-  return /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
     className: "ufg-field-group",
     id: "form-dateDiv-".concat(name),
-    style: mainDivStyle
-  }, (0, _defaults.labelJsx)(name, labelStyle, displayName, required, spanStyle, showHelp, helpText), /*#__PURE__*/React.createElement(_reactDatetime["default"], {
-    id: "form-date-".concat(name),
-    value: value,
-    dateFormat: dateFormat,
-    timeFormat: timeFormat,
-    input: true,
-    disabled: disabled,
-    required: required,
-    style: inputStyle,
-    renderInput: function renderInput(props, openCalendar) {
-      return /*#__PURE__*/React.createElement("input", _extends({
-        readOnly: true
-      }, props, {
-        placeholder: placeholder,
-        onClick: !disabled ? openCalendar : undefined,
-        disabled: disabled,
-        className: "ufg-input".concat(error ? " error" : "")
-      }));
-    },
-    onChange: handleChange
-  }), (0, _defaults.errorJsx)(error), (0, _defaults.tooltipJsx)(tooltip, tooltipStyle));
+    style: mainDivStyle,
+    children: [(0, _defaults.labelJsx)(name, labelStyle, displayName, required, spanStyle, showHelp, helpText), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactDatetime["default"], {
+      id: "form-date-".concat(name),
+      value: value,
+      dateFormat: dateFormat,
+      timeFormat: timeFormat,
+      input: true,
+      disabled: disabled,
+      required: required,
+      style: inputStyle,
+      renderInput: function renderInput(props, openCalendar) {
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)("input", _objectSpread(_objectSpread({
+          readOnly: true
+        }, props), {}, {
+          placeholder: placeholder,
+          onClick: !disabled ? openCalendar : undefined,
+          disabled: disabled,
+          className: "ufg-input".concat(error ? " error" : "")
+        }));
+      },
+      onChange: handleChange
+    }), (0, _defaults.errorJsx)(error), (0, _defaults.tooltipJsx)(tooltip, tooltipStyle)]
+  });
 };
 CustomDatePicker.propTypes = {
   onChange: _propTypes["default"].func.isRequired,
   name: _propTypes["default"].string.isRequired,
-  displayName: _propTypes["default"].string,
+  displayName: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].object]),
   value: _propTypes["default"].any,
   disabled: _propTypes["default"].bool,
   required: _propTypes["default"].bool,

package/build/FormFields/CustomDropdown.js

@@ -7,6 +7,7 @@ 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 }; }
 var CustomDropdown = function CustomDropdown(_ref) {
   var onChange = _ref.onChange,
@@ -68,33 +69,36 @@ var CustomDropdown = function CustomDropdown(_ref) {
     });
     onChange === null || onChange === void 0 || onChange(name, selected, fulls);
   }, [onChange, name, options]);
-  return /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
     className: "ufg-field-group",
     id: name,
-    style: mainDivStyle
-  }, (0, _defaults.labelJsx)(name, labelStyle, displayName, required, spanStyle, showHelp, helpText), /*#__PURE__*/React.createElement("select", {
-    id: "form-input-".concat(name),
-    name: name,
-    value: value,
-    disabled: disabled,
-    multiple: multiple,
-    className: "ufg-select".concat(error ? " error" : ""),
-    style: inputStyle,
-    onChange: multiple ? handleMultiChange : handleChange
-  }, !multiple && /*#__PURE__*/React.createElement("option", {
-    value: ""
-  }, placeholder || "Select..."), (options || []).map(function (opt, idx) {
-    return /*#__PURE__*/React.createElement("option", {
-      key: idx,
-      value: resolveValue(opt)
-    }, resolveLabel(opt));
-  })), (0, _defaults.errorJsx)(error), (0, _defaults.tooltipJsx)(tooltip, tooltipStyle));
+    style: mainDivStyle,
+    children: [(0, _defaults.labelJsx)(name, labelStyle, displayName, required, spanStyle, showHelp, helpText), /*#__PURE__*/(0, _jsxRuntime.jsxs)("select", {
+      id: "form-input-".concat(name),
+      name: name,
+      value: value,
+      disabled: disabled,
+      multiple: multiple,
+      className: "ufg-select".concat(error ? " error" : ""),
+      style: inputStyle,
+      onChange: multiple ? handleMultiChange : handleChange,
+      children: [!multiple && /*#__PURE__*/(0, _jsxRuntime.jsx)("option", {
+        value: "",
+        children: placeholder || "Select..."
+      }), (options || []).map(function (opt, idx) {
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)("option", {
+          value: resolveValue(opt),
+          children: resolveLabel(opt)
+        }, idx);
+      })]
+    }), (0, _defaults.errorJsx)(error), (0, _defaults.tooltipJsx)(tooltip, tooltipStyle)]
+  });
 };
 CustomDropdown.propTypes = {
   onChange: _propTypes["default"].func.isRequired,
   name: _propTypes["default"].string.isRequired,
-  displayName: _propTypes["default"].string,
-  value: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].array]),
+  displayName: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].object]),
+  value: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number, _propTypes["default"].array]),
   options: _propTypes["default"].array,
   placeholder: _propTypes["default"].string,
   disabled: _propTypes["default"].bool,

package/build/FormFields/CustomInput.js

@@ -7,6 +7,7 @@ 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 _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; }
@@ -46,27 +47,28 @@ var CustomInput = function CustomInput(_ref) {
   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", {
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
     className: "ufg-field-group",
     id: name,
-    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,
-    placeholder: placeholder !== null && placeholder !== void 0 ? placeholder : displayName,
-    disabled: disabled,
-    required: required,
-    className: "ufg-input".concat(error ? " error" : "").concat(className ? " ".concat(className) : ""),
-    style: inputStyle,
-    onChange: handleChange
-  }), (0, _defaults.errorJsx)(error), (0, _defaults.tooltipJsx)(tooltip, tooltipStyle));
+    style: mainDivStyle,
+    children: [(0, _defaults.labelJsx)(name, labelStyle, displayName, required, spanStyle, showHelp, helpText), /*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
+      id: "form-input-".concat(name),
+      type: type,
+      name: name,
+      value: value,
+      placeholder: placeholder !== null && placeholder !== void 0 ? placeholder : displayName,
+      disabled: disabled,
+      required: required,
+      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 = _defineProperty(_defineProperty({
   onChange: _propTypes["default"].func.isRequired,
   name: _propTypes["default"].string.isRequired,
-  displayName: _propTypes["default"].string,
+  displayName: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].object]),
   value: _propTypes["default"].string,
   type: _propTypes["default"].string,
   disabled: _propTypes["default"].bool,

package/build/FormFields/CustomJson.js

@@ -8,6 +8,7 @@ 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 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; }
@@ -80,53 +81,56 @@ var CustomJson = function CustomJson(_ref) {
   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", {
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("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"
+    style: mainDivStyle,
+    children: [(0, _defaults.labelJsx)(name, labelStyle, displayName, required, spanStyle, showHelp, helpText), allowModeSwitch && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: "ufg-json-mode-selector",
+      children: ["single", "multiple"].map(function (m) {
+        return /*#__PURE__*/(0, _jsxRuntime.jsxs)("label", {
+          style: {
+            marginRight: "1rem"
+          },
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("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)]
+        }, m);
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("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);
       }
-    }, /*#__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));
+    }), isMulti && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: "ufg-json-hint",
+      children: ["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,
+  displayName: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].object]),
   value: _propTypes["default"].any,
   disabled: _propTypes["default"].bool,
   required: _propTypes["default"].bool,

package/build/FormFields/CustomLabel.js

@@ -7,26 +7,27 @@ exports["default"] = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _defaults = require("./defaults");
+var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
 /**
  * Static label — no onChange / value / validation.
- */
-var CustomLabel = function CustomLabel(_ref) {
+ */var CustomLabel = function CustomLabel(_ref) {
   var name = _ref.name,
     displayName = _ref.displayName,
     _ref$mainDivStyle = _ref.mainDivStyle,
     mainDivStyle = _ref$mainDivStyle === void 0 ? {} : _ref$mainDivStyle,
     _ref$labelStyle = _ref.labelStyle,
     labelStyle = _ref$labelStyle === void 0 ? {} : _ref$labelStyle;
-  return /*#__PURE__*/_react["default"].createElement("div", {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
     className: "ufg-field-group",
     id: name,
-    style: mainDivStyle
-  }, (0, _defaults.labelJsx)(name, labelStyle, displayName));
+    style: mainDivStyle,
+    children: (0, _defaults.labelJsx)(name, labelStyle, displayName)
+  });
 };
 CustomLabel.propTypes = {
   name: _propTypes["default"].string.isRequired,
-  displayName: _propTypes["default"].string,
+  displayName: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].object]),
   mainDivStyle: _propTypes["default"].object,
   labelStyle: _propTypes["default"].object
 };

package/build/FormFields/CustomMultiDropdown.js

@@ -8,12 +8,12 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _react = require("react");
 var _semanticUiReact = require("semantic-ui-react");
 var _defaults = require("./defaults");
+var _jsxRuntime = require("react/jsx-runtime");
 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 CustomMultiDropdown = function CustomMultiDropdown(_ref) {
   var onChange = _ref.onChange,
     name = _ref.name,
     displayName = _ref.displayName,
@@ -46,30 +46,31 @@ var CustomMultiDropdown = function CustomMultiDropdown(_ref) {
   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", {
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("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));
+    style: mainDivStyle,
+    children: [(0, _defaults.labelJsx)(name, labelStyle, displayName, required, spanStyle, showHelp, helpText), /*#__PURE__*/(0, _jsxRuntime.jsx)(_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,
+  displayName: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].object]),
   value: _propTypes["default"].array,
   options: _propTypes["default"].array.isRequired,
   placeholder: _propTypes["default"].string,

package/build/FormFields/CustomNumberInput.js

@@ -7,6 +7,7 @@ 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 }; }
 var CustomNumberInput = function CustomNumberInput(_ref) {
   var onChange = _ref.onChange,
@@ -42,30 +43,31 @@ var CustomNumberInput = function CustomNumberInput(_ref) {
   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", {
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
     className: "ufg-field-group",
     id: name,
-    style: mainDivStyle
-  }, (0, _defaults.labelJsx)(name, labelStyle, displayName, required, spanStyle, showHelp, helpText), /*#__PURE__*/React.createElement("input", {
-    id: "form-input-".concat(name),
-    type: "number",
-    name: name,
-    value: value,
-    placeholder: placeholder !== null && placeholder !== void 0 ? placeholder : displayName,
-    disabled: disabled,
-    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));
+    style: mainDivStyle,
+    children: [(0, _defaults.labelJsx)(name, labelStyle, displayName, required, spanStyle, showHelp, helpText), /*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
+      id: "form-input-".concat(name),
+      type: "number",
+      name: name,
+      value: value,
+      placeholder: placeholder !== null && placeholder !== void 0 ? placeholder : displayName,
+      disabled: disabled,
+      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,
+  displayName: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].object]),
   value: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number]),
   disabled: _propTypes["default"].bool,
   required: _propTypes["default"].bool,