@insticc/genericform 2.0.1 → 2.0.3

package/build/FormFields/CustomRadioGroup.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports["default"] = void 0;
 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 }; }
 var CustomRadioGroup = function CustomRadioGroup(_ref) {
   var _onChange = _ref.onChange,
@@ -40,39 +41,42 @@ var CustomRadioGroup = function CustomRadioGroup(_ref) {
     inputStyle = _ref$inputStyle === void 0 ? {} : _ref$inputStyle,
     _ref$tooltipStyle = _ref.tooltipStyle,
     tooltipStyle = _ref$tooltipStyle === void 0 ? {} : _ref$tooltipStyle;
-  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("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));
+    style: mainDivStyle,
+    children: [(0, _defaults.labelJsx)(name, labelStyle, displayName, required, spanStyle, showHelp, helpText), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: inline ? "ufg-radio-group-inline" : "ufg-radio-group",
+      children: options.map(function (opt, idx) {
+        return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+          className: "ufg-radio-item",
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("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__*/(0, _jsxRuntime.jsx)("label", {
+            htmlFor: "".concat(name, "-").concat(idx),
+            children: opt.label || opt.text
+          })]
+        }, idx);
+      })
+    }), (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,
+  displayName: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].object]),
   value: _propTypes["default"].string,
   options: _propTypes["default"].array.isRequired,
   inline: _propTypes["default"].bool,

package/build/FormFields/CustomSearch.js

@@ -7,13 +7,13 @@ exports["default"] = void 0;
 var _propTypes = _interopRequireDefault(require("prop-types"));
 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 }; }
 /**
  * Search-with-results. Semantic UI Search is kept — no native equivalent.
  * onChange / handleResultSelect keep Semantic UI's own signatures because
  * they are passed directly from the parent application's handlers.
- */
-var CustomSearch = function CustomSearch(_ref) {
+ */var CustomSearch = function CustomSearch(_ref) {
   var onChange = _ref.onChange,
     handleResultSelect = _ref.handleResultSelect,
     resultRenderer = _ref.resultRenderer,
@@ -47,30 +47,31 @@ var CustomSearch = function CustomSearch(_ref) {
     inputStyle = _ref$inputStyle === void 0 ? {} : _ref$inputStyle,
     _ref$tooltipStyle = _ref.tooltipStyle,
     tooltipStyle = _ref$tooltipStyle === void 0 ? {} : _ref$tooltipStyle;
-  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.Search, {
-    id: "form-input-".concat(name),
-    style: inputStyle,
-    loading: isLoading,
-    placeholder: placeholder || displayName,
-    value: value,
-    results: options,
-    resultRenderer: resultRenderer,
-    onResultSelect: handleResultSelect,
-    onSearchChange: onChange,
-    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.Search, {
+      id: "form-input-".concat(name),
+      style: inputStyle,
+      loading: isLoading,
+      placeholder: placeholder || displayName,
+      value: value,
+      results: options,
+      resultRenderer: resultRenderer,
+      onResultSelect: handleResultSelect,
+      onSearchChange: onChange,
+      disabled: disabled,
+      className: error ? "error" : undefined
+    }), (0, _defaults.errorJsx)(error), (0, _defaults.tooltipJsx)(tooltip, tooltipStyle)]
+  });
 };
 CustomSearch.propTypes = {
   onChange: _propTypes["default"].func.isRequired,
   handleResultSelect: _propTypes["default"].func.isRequired,
   resultRenderer: _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"].string,
   options: _propTypes["default"].array.isRequired,
   isLoading: _propTypes["default"].bool,

package/build/FormFields/CustomSeparator.js

@@ -6,14 +6,14 @@ Object.defineProperty(exports, "__esModule", {
 exports["default"] = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
+var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
 /**
  * Visual separator — no interaction props.
- */
-var CustomSeparator = function CustomSeparator(_ref) {
+ */var CustomSeparator = function CustomSeparator(_ref) {
   var _ref$mainDivStyle = _ref.mainDivStyle,
     mainDivStyle = _ref$mainDivStyle === void 0 ? {} : _ref$mainDivStyle;
-  return /*#__PURE__*/_react["default"].createElement("hr", {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("hr", {
     className: "ufg-separator",
     style: mainDivStyle
   });

package/build/FormFields/CustomTextArea.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 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; }
@@ -48,29 +49,30 @@ var CustomTextArea = function CustomTextArea(_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("textarea", {
-    id: "form-input-".concat(name),
-    name: name,
-    value: value,
-    placeholder: placeholder !== null && placeholder !== void 0 ? placeholder : displayName,
-    disabled: disabled,
-    required: required,
-    rows: rows,
-    className: "ufg-textarea".concat(error ? " error" : ""),
-    style: _objectSpread(_objectSpread({}, inputStyle), height ? {
-      height: height
-    } : {}),
-    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)("textarea", {
+      id: "form-input-".concat(name),
+      name: name,
+      value: value,
+      placeholder: placeholder !== null && placeholder !== void 0 ? placeholder : displayName,
+      disabled: disabled,
+      required: required,
+      rows: rows,
+      className: "ufg-textarea".concat(error ? " error" : ""),
+      style: _objectSpread(_objectSpread({}, inputStyle), height ? {
+        height: height
+      } : {}),
+      onChange: handleChange
+    }), (0, _defaults.errorJsx)(error), (0, _defaults.tooltipJsx)(tooltip, tooltipStyle)]
+  });
 };
 CustomTextArea.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"].string,
   disabled: _propTypes["default"].bool,
   required: _propTypes["default"].bool,

package/build/FormFields/CustomToggle.js

@@ -7,9 +7,9 @@ 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 }; }
-/** onChange(name, value: bool) */
-var CustomToggle = function CustomToggle(_ref) {
+/** onChange(name, value: bool) */var CustomToggle = function CustomToggle(_ref) {
   var onChange = _ref.onChange,
     name = _ref.name,
     displayName = _ref.displayName,
@@ -39,24 +39,27 @@ var CustomToggle = function CustomToggle(_ref) {
   var handleClick = (0, _react.useCallback)(function () {
     return !disabled && (onChange === null || onChange === void 0 ? void 0 : onChange(name, !value));
   }, [onChange, name, value, disabled]);
-  return /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
     className: "ufg-field-group",
     id: name,
-    style: mainDivStyle
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "ufg-toggle-wrapper"
-  }, (0, _defaults.labelJsx)(name, labelStyle, displayName, required, spanStyle, showHelp, helpText), /*#__PURE__*/React.createElement("div", {
-    className: "ufg-toggle-track".concat(value ? " active" : "").concat(disabled ? " disabled" : ""),
-    style: inputStyle,
-    onClick: handleClick
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "ufg-toggle-thumb"
-  }))), (0, _defaults.errorJsx)(error), (0, _defaults.tooltipJsx)(tooltip, tooltipStyle));
+    style: mainDivStyle,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: "ufg-toggle-wrapper",
+      children: [(0, _defaults.labelJsx)(name, labelStyle, displayName, required, spanStyle, showHelp, helpText), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: "ufg-toggle-track".concat(value ? " active" : "").concat(disabled ? " disabled" : ""),
+        style: inputStyle,
+        onClick: handleClick,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          className: "ufg-toggle-thumb"
+        })
+      })]
+    }), (0, _defaults.errorJsx)(error), (0, _defaults.tooltipJsx)(tooltip, tooltipStyle)]
+  });
 };
 CustomToggle.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"].bool,
   disabled: _propTypes["default"].bool,
   required: _propTypes["default"].bool,

package/build/FormFields/defaults.js

@@ -6,27 +6,33 @@ Object.defineProperty(exports, "__esModule", {
 exports.errorJsx = errorJsx;
 exports.labelJsx = labelJsx;
 exports.tooltipJsx = tooltipJsx;
+var _jsxRuntime = require("react/jsx-runtime");
 function labelJsx(name, labelStyle, displayName, required, spanStyle, showHelp, helpText) {
-  return /*#__PURE__*/React.createElement("label", {
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("label", {
     className: "ufg-label",
     htmlFor: "form-input-".concat(name),
-    style: labelStyle
-  }, displayName, required && /*#__PURE__*/React.createElement("span", {
-    className: "ufg-required",
-    style: spanStyle
-  }, " *"), showHelp && helpText && /*#__PURE__*/React.createElement("span", {
-    className: "ufg-help-icon",
-    title: helpText
-  }, " \u24D8"));
+    style: labelStyle,
+    children: [displayName, required && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+      className: "ufg-required",
+      style: spanStyle,
+      children: " *"
+    }), showHelp && helpText && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+      className: "ufg-help-icon",
+      title: helpText,
+      children: " \u24D8"
+    })]
+  });
 }
 function errorJsx(error) {
-  return error && /*#__PURE__*/React.createElement("span", {
-    className: "ufg-error-message"
-  }, error);
+  return error && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+    className: "ufg-error-message",
+    children: error
+  });
 }
 function tooltipJsx(tooltip, tooltipStyle) {
-  return tooltip && /*#__PURE__*/React.createElement("span", {
+  return tooltip && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
     className: "ufg-tooltip",
-    style: tooltipStyle
-  }, tooltip);
+    style: tooltipStyle,
+    children: tooltip
+  });
 }

package/build/index.css

@@ -75,7 +75,6 @@
 	font-size: 24px;
 	font-weight: 700;
 	color: var(--ufg-text);
-	margin-bottom: 24px;
 	display: flex;
 	align-items: center;
 	gap: 12px;
@@ -224,7 +223,7 @@
 .ufg-radio-group {
 	display: flex;
 	flex-direction: column;
-	gap: 10px;
+	gap: 0.5em;
 }
 
 .ufg-radio-group-inline {
@@ -238,7 +237,7 @@
 .ufg-radio-item {
 	display: flex;
 	align-items: center;
-	gap: 8px;
+	gap: 1em;
 	margin: 0;
 }
 
@@ -308,11 +307,7 @@
    -------------------------------------------------------------------------- */
 .ufg-actions {
 	display: flex;
-	flex-direction: row;
-	align-items: center;
-	justify-content: center;
-	gap: 2rem;
-	margin-top: 24px;
+	gap: 1em;
 	flex-wrap: wrap;
 }