@insticc/genericform 2.0.1 → 2.0.2

package/build/Demo2.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports["default"] = void 0;
 var _react = require("react");
 var _index = _interopRequireDefault(require("./index"));
+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 _toConsumableArray(r) { return _arrayWithoutHoles(r) || _iterableToArray(r) || _unsupportedIterableToArray(r) || _nonIterableSpread(); }
@@ -27,8 +28,7 @@ function _arrayWithHoles(r) { if (Array.isArray(r)) return r; } /**
  * GenericForm with full external state management.
  *
  * Mount anywhere:  <Demo2 />
- */
-// ── Option sets ───────────────────────────────────────────────────────────────
+ */ // ── Option sets ───────────────────────────────────────────────────────────────
 var COUNTRIES = [{
   value: 'PT',
   text: 'Portugal'
@@ -271,21 +271,23 @@ var Demo2 = function Demo2() {
     sections: [{
       title: 'Config',
       icon: '⚙️',
-      content: /*#__PURE__*/React.createElement("p", {
+      content: /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
         style: {
           fontSize: '0.85rem',
           color: '#555'
-        }
-      }, "Config fields go here.")
+        },
+        children: "Config fields go here."
+      })
     }, {
       title: 'Danger zone',
       icon: '⚠️',
-      content: /*#__PURE__*/React.createElement("p", {
+      content: /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
         style: {
           fontSize: '0.85rem',
           color: '#db2828'
-        }
-      }, "Destructive actions.")
+        },
+        children: "Destructive actions."
+      })
     }]
   }];
 
@@ -297,7 +299,7 @@ var Demo2 = function Demo2() {
   var pct = Math.round(filled.length / required.length * 100);
 
   // ── JSX ─────────────────────────────────────────────────────────────────────
-  return /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
     style: {
       maxWidth: 960,
       margin: '2rem auto',
@@ -306,190 +308,226 @@ var Demo2 = function Demo2() {
       gridTemplateColumns: '1fr 320px',
       gap: 24,
       alignItems: 'start'
-    }
-  }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("h1", {
-    style: {
-      fontSize: '1.3rem',
-      marginBottom: '0.25rem'
-    }
-  }, "Demo 2 \u2014 formState as field values"), /*#__PURE__*/React.createElement("p", {
-    style: {
-      color: '#666',
-      fontSize: '0.85rem',
-      marginBottom: '1rem'
-    }
-  }, "Every ", /*#__PURE__*/React.createElement("code", null, "field.value"), " reads from ", /*#__PURE__*/React.createElement("code", null, "formState"), ".", /*#__PURE__*/React.createElement("code", null, "onDataChange"), " keeps it in sync. Parent actions write directly to ", /*#__PURE__*/React.createElement("code", null, "formState"), "."), /*#__PURE__*/React.createElement("div", {
-    style: {
-      display: 'flex',
-      gap: 8,
-      marginBottom: '1.25rem',
-      flexWrap: 'wrap'
-    }
-  }, /*#__PURE__*/React.createElement("button", {
-    onClick: loadProfile,
-    style: {
-      padding: '6px 12px',
-      fontSize: '0.8rem',
-      cursor: 'pointer',
-      borderRadius: 5,
-      background: '#2185d0',
-      color: '#fff',
-      border: 'none'
-    }
-  }, "Load profile"), /*#__PURE__*/React.createElement("button", {
-    onClick: function onClick() {
-      return clearField('email');
-    },
-    style: {
-      padding: '6px 12px',
-      fontSize: '0.8rem',
-      cursor: 'pointer',
-      borderRadius: 5,
-      background: '#fff',
-      border: '1px solid #ccc'
-    }
-  }, "Clear email"), /*#__PURE__*/React.createElement("button", {
-    onClick: resetForm,
-    style: {
-      padding: '6px 12px',
-      fontSize: '0.8rem',
-      cursor: 'pointer',
-      borderRadius: 5,
-      background: '#fff',
-      border: '1px solid #ccc'
-    }
-  }, "Reset all")), /*#__PURE__*/React.createElement(_index["default"], {
-    title: "User profile",
-    fields: fields,
-    submitText: "Save profile",
-    cancelText: "Reset all",
-    validateOnChange: true,
-    validateOnSubmit: true,
-    onDataChange: handleDataChange,
-    onFieldChange: handleFieldChange,
-    onSubmit: function onSubmit(data) {
-      return setSubmitted(data);
     },
-    onCancel: resetForm
-  })), /*#__PURE__*/React.createElement("div", {
-    style: {
-      position: 'sticky',
-      top: 16,
-      display: 'flex',
-      flexDirection: 'column',
-      gap: 14
-    }
-  }, /*#__PURE__*/React.createElement("div", {
-    style: {
-      background: '#f9f9f9',
-      border: '1px solid #e0e0e0',
-      borderRadius: 8,
-      padding: '12px 14px'
-    }
-  }, /*#__PURE__*/React.createElement("div", {
-    style: {
-      fontSize: '0.78rem',
-      fontWeight: 600,
-      marginBottom: 6,
-      color: '#444'
-    }
-  }, "Required \u2014 ", pct, "%"), /*#__PURE__*/React.createElement("div", {
-    style: {
-      background: '#e0e0e0',
-      borderRadius: 4,
-      height: 8,
-      overflow: 'hidden'
-    }
-  }, /*#__PURE__*/React.createElement("div", {
-    style: {
-      width: "".concat(pct, "%"),
-      height: '100%',
-      transition: 'width .3s',
-      background: pct === 100 ? '#21ba45' : '#2185d0'
-    }
-  }))), /*#__PURE__*/React.createElement("div", {
-    style: {
-      background: '#f9f9f9',
-      border: '1px solid #e0e0e0',
-      borderRadius: 8,
-      padding: '12px 14px'
-    }
-  }, /*#__PURE__*/React.createElement("div", {
-    style: {
-      fontSize: '0.78rem',
-      fontWeight: 600,
-      marginBottom: 6,
-      color: '#444'
-    }
-  }, "formState (parent)"), /*#__PURE__*/React.createElement("pre", {
-    style: {
-      fontSize: '0.7rem',
-      maxHeight: 240,
-      overflow: 'auto',
-      margin: 0,
-      color: '#222'
-    }
-  }, JSON.stringify(formState, null, 2))), /*#__PURE__*/React.createElement("div", {
-    style: {
-      background: '#f9f9f9',
-      border: '1px solid #e0e0e0',
-      borderRadius: 8,
-      padding: '12px 14px'
-    }
-  }, /*#__PURE__*/React.createElement("div", {
-    style: {
-      fontSize: '0.78rem',
-      fontWeight: 600,
-      marginBottom: 6,
-      color: '#444'
-    }
-  }, "onFieldChange log"), fieldLog.length === 0 ? /*#__PURE__*/React.createElement("p", {
-    style: {
-      fontSize: '0.75rem',
-      color: '#888',
-      margin: 0
-    }
-  }, "No changes yet.") : fieldLog.map(function (e, i) {
-    return /*#__PURE__*/React.createElement("div", {
-      key: i,
-      style: {
-        fontSize: '0.7rem',
-        borderBottom: '0.5px solid #eee',
-        paddingBottom: 3,
-        marginBottom: 3
-      }
-    }, /*#__PURE__*/React.createElement("span", {
-      style: {
-        color: '#aaa'
-      }
-    }, e.time), ' ', /*#__PURE__*/React.createElement("strong", null, e.name), " \u2192 ", /*#__PURE__*/React.createElement("code", null, e.value), e.option && /*#__PURE__*/React.createElement("div", {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("h1", {
+        style: {
+          fontSize: '1.3rem',
+          marginBottom: '0.25rem'
+        },
+        children: "Demo 2 \u2014 formState as field values"
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("p", {
+        style: {
+          color: '#666',
+          fontSize: '0.85rem',
+          marginBottom: '1rem'
+        },
+        children: ["Every ", /*#__PURE__*/(0, _jsxRuntime.jsx)("code", {
+          children: "field.value"
+        }), " reads from ", /*#__PURE__*/(0, _jsxRuntime.jsx)("code", {
+          children: "formState"
+        }), ".", /*#__PURE__*/(0, _jsxRuntime.jsx)("code", {
+          children: "onDataChange"
+        }), " keeps it in sync. Parent actions write directly to ", /*#__PURE__*/(0, _jsxRuntime.jsx)("code", {
+          children: "formState"
+        }), "."]
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        style: {
+          display: 'flex',
+          gap: 8,
+          marginBottom: '1.25rem',
+          flexWrap: 'wrap'
+        },
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
+          onClick: loadProfile,
+          style: {
+            padding: '6px 12px',
+            fontSize: '0.8rem',
+            cursor: 'pointer',
+            borderRadius: 5,
+            background: '#2185d0',
+            color: '#fff',
+            border: 'none'
+          },
+          children: "Load profile"
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
+          onClick: function onClick() {
+            return clearField('email');
+          },
+          style: {
+            padding: '6px 12px',
+            fontSize: '0.8rem',
+            cursor: 'pointer',
+            borderRadius: 5,
+            background: '#fff',
+            border: '1px solid #ccc'
+          },
+          children: "Clear email"
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
+          onClick: resetForm,
+          style: {
+            padding: '6px 12px',
+            fontSize: '0.8rem',
+            cursor: 'pointer',
+            borderRadius: 5,
+            background: '#fff',
+            border: '1px solid #ccc'
+          },
+          children: "Reset all"
+        })]
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_index["default"], {
+        title: "User profile",
+        fields: fields,
+        submitText: "Save profile",
+        cancelText: "Reset all",
+        validateOnChange: true,
+        validateOnSubmit: true,
+        onDataChange: handleDataChange,
+        onFieldChange: handleFieldChange,
+        onSubmit: function onSubmit(data) {
+          return setSubmitted(data);
+        },
+        onCancel: resetForm
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
       style: {
-        color: '#888',
-        fontSize: '0.65rem'
-      }
-    }, "option: ", e.option));
-  })), submitted && /*#__PURE__*/React.createElement("div", {
-    style: {
-      background: '#f0f8f0',
-      border: '1px solid #b2dfb2',
-      borderRadius: 8,
-      padding: '12px 14px'
-    }
-  }, /*#__PURE__*/React.createElement("div", {
-    style: {
-      fontSize: '0.78rem',
-      fontWeight: 600,
-      marginBottom: 6,
-      color: '#2d6a2d'
-    }
-  }, "\u2713 Submitted"), /*#__PURE__*/React.createElement("pre", {
-    style: {
-      fontSize: '0.7rem',
-      maxHeight: 200,
-      overflow: 'auto',
-      margin: 0,
-      color: '#222'
-    }
-  }, JSON.stringify(submitted, null, 2)))));
+        position: 'sticky',
+        top: 16,
+        display: 'flex',
+        flexDirection: 'column',
+        gap: 14
+      },
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        style: {
+          background: '#f9f9f9',
+          border: '1px solid #e0e0e0',
+          borderRadius: 8,
+          padding: '12px 14px'
+        },
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+          style: {
+            fontSize: '0.78rem',
+            fontWeight: 600,
+            marginBottom: 6,
+            color: '#444'
+          },
+          children: ["Required \u2014 ", pct, "%"]
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          style: {
+            background: '#e0e0e0',
+            borderRadius: 4,
+            height: 8,
+            overflow: 'hidden'
+          },
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            style: {
+              width: "".concat(pct, "%"),
+              height: '100%',
+              transition: 'width .3s',
+              background: pct === 100 ? '#21ba45' : '#2185d0'
+            }
+          })
+        })]
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        style: {
+          background: '#f9f9f9',
+          border: '1px solid #e0e0e0',
+          borderRadius: 8,
+          padding: '12px 14px'
+        },
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          style: {
+            fontSize: '0.78rem',
+            fontWeight: 600,
+            marginBottom: 6,
+            color: '#444'
+          },
+          children: "formState (parent)"
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("pre", {
+          style: {
+            fontSize: '0.7rem',
+            maxHeight: 240,
+            overflow: 'auto',
+            margin: 0,
+            color: '#222'
+          },
+          children: JSON.stringify(formState, null, 2)
+        })]
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        style: {
+          background: '#f9f9f9',
+          border: '1px solid #e0e0e0',
+          borderRadius: 8,
+          padding: '12px 14px'
+        },
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          style: {
+            fontSize: '0.78rem',
+            fontWeight: 600,
+            marginBottom: 6,
+            color: '#444'
+          },
+          children: "onFieldChange log"
+        }), fieldLog.length === 0 ? /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
+          style: {
+            fontSize: '0.75rem',
+            color: '#888',
+            margin: 0
+          },
+          children: "No changes yet."
+        }) : fieldLog.map(function (e, i) {
+          return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+            style: {
+              fontSize: '0.7rem',
+              borderBottom: '0.5px solid #eee',
+              paddingBottom: 3,
+              marginBottom: 3
+            },
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+              style: {
+                color: '#aaa'
+              },
+              children: e.time
+            }), ' ', /*#__PURE__*/(0, _jsxRuntime.jsx)("strong", {
+              children: e.name
+            }), " \u2192 ", /*#__PURE__*/(0, _jsxRuntime.jsx)("code", {
+              children: e.value
+            }), e.option && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+              style: {
+                color: '#888',
+                fontSize: '0.65rem'
+              },
+              children: ["option: ", e.option]
+            })]
+          }, i);
+        })]
+      }), submitted && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        style: {
+          background: '#f0f8f0',
+          border: '1px solid #b2dfb2',
+          borderRadius: 8,
+          padding: '12px 14px'
+        },
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          style: {
+            fontSize: '0.78rem',
+            fontWeight: 600,
+            marginBottom: 6,
+            color: '#2d6a2d'
+          },
+          children: "\u2713 Submitted"
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("pre", {
+          style: {
+            fontSize: '0.7rem',
+            maxHeight: 200,
+            overflow: 'auto',
+            margin: 0,
+            color: '#222'
+          },
+          children: JSON.stringify(submitted, null, 2)
+        })]
+      })]
+    })]
+  });
 };
 var _default = exports["default"] = Demo2;

package/build/FormFields/CustomAccordion.js

@@ -7,6 +7,7 @@ exports["default"] = void 0;
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _react = require("react");
 var _semanticUiReact = require("semantic-ui-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."); }
@@ -50,45 +51,53 @@ var CustomAccordion = function CustomAccordion(_ref) {
     if (!Array.isArray(content)) return content;
     // Legacy {label, value} row format
     if (content.length > 0 && ((_content$ = content[0]) === null || _content$ === void 0 ? void 0 : _content$.label) !== undefined) {
-      return /*#__PURE__*/React.createElement("div", {
-        className: "ef-accordion-content"
-      }, content.map(function (item, idx) {
-        var _item$value;
-        return item.label === '---' ? /*#__PURE__*/React.createElement("hr", {
-          key: idx
-        }) : /*#__PURE__*/React.createElement("div", {
-          className: "ef-info-row",
-          key: idx
-        }, /*#__PURE__*/React.createElement("strong", null, item.label), /*#__PURE__*/React.createElement("span", null, (_item$value = item.value) !== null && _item$value !== void 0 ? _item$value : 'N/A'));
-      }));
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: "ef-accordion-content",
+        children: content.map(function (item, idx) {
+          var _item$value;
+          return item.label === '---' ? /*#__PURE__*/(0, _jsxRuntime.jsx)("hr", {}, idx) : /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+            className: "ef-info-row",
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("strong", {
+              children: item.label
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+              children: (_item$value = item.value) !== null && _item$value !== void 0 ? _item$value : 'N/A'
+            })]
+          }, idx);
+        })
+      });
     }
     return content;
   };
-  return /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
     id: name,
-    style: mainDivStyle
-  }, /*#__PURE__*/React.createElement(_semanticUiReact.Accordion, {
-    fluid: true,
-    styled: true,
-    className: "ef-accordion",
-    style: inputStyle
-  }, sections.map(function (section, index) {
-    return /*#__PURE__*/React.createElement("div", {
-      key: index
-    }, /*#__PURE__*/React.createElement(_semanticUiReact.Accordion.Title, {
-      active: activeIndex.includes(index),
-      index: index,
-      onClick: handleClick
-    }, /*#__PURE__*/React.createElement(_semanticUiReact.Icon, {
-      name: "dropdown"
-    }), section.icon && /*#__PURE__*/React.createElement("span", {
-      style: {
-        marginRight: 8
-      }
-    }, section.icon), section.title), /*#__PURE__*/React.createElement(_semanticUiReact.Accordion.Content, {
-      active: activeIndex.includes(index)
-    }, renderContent(section.content)));
-  })));
+    style: mainDivStyle,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_semanticUiReact.Accordion, {
+      fluid: true,
+      styled: true,
+      className: "ef-accordion",
+      style: inputStyle,
+      children: sections.map(function (section, index) {
+        return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_semanticUiReact.Accordion.Title, {
+            active: activeIndex.includes(index),
+            index: index,
+            onClick: handleClick,
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_semanticUiReact.Icon, {
+              name: "dropdown"
+            }), section.icon && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+              style: {
+                marginRight: 8
+              },
+              children: section.icon
+            }), section.title]
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_semanticUiReact.Accordion.Content, {
+            active: activeIndex.includes(index),
+            children: renderContent(section.content)
+          })]
+        }, index);
+      })
+    })
+  });
 };
 CustomAccordion.propTypes = {
   name: _propTypes["default"].string.isRequired,

package/build/FormFields/CustomCheckbox.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; }
@@ -44,22 +45,23 @@ var CustomCheckbox = function CustomCheckbox(_ref) {
   var handleChange = (0, _react.useCallback)(function (e) {
     return onChange === null || onChange === void 0 ? void 0 : onChange(name, e.target.checked);
   }, [onChange, name]);
-  return /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
     className: "ufg-checkbox-item",
     id: name,
     style: _objectSpread({
       margin: "0 0 5px"
-    }, mainDivStyle)
-  }, /*#__PURE__*/React.createElement("input", {
-    id: "form-input-".concat(name),
-    type: "checkbox",
-    name: name,
-    checked: checked,
-    disabled: disabled,
-    required: required,
-    style: inputStyle,
-    onChange: handleChange
-  }), (0, _defaults.labelJsx)(name, labelStyle, displayName, required, spanStyle, showHelp, helpText), (0, _defaults.errorJsx)(error), (0, _defaults.tooltipJsx)(tooltip, tooltipStyle));
+    }, mainDivStyle),
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
+      id: "form-input-".concat(name),
+      type: "checkbox",
+      name: name,
+      checked: checked,
+      disabled: disabled,
+      required: required,
+      style: inputStyle,
+      onChange: handleChange
+    }), (0, _defaults.labelJsx)(name, labelStyle, displayName, required, spanStyle, showHelp, helpText), (0, _defaults.errorJsx)(error), (0, _defaults.tooltipJsx)(tooltip, tooltipStyle)]
+  });
 };
 CustomCheckbox.propTypes = {
   onChange: _propTypes["default"].func.isRequired,