@insticc/genericform 2.0.8 → 2.1.1

package/build/FormFields/defaults.js

@@ -1,5 +1,6 @@
 "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
 });
@@ -7,12 +8,27 @@ 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__*/(0, _jsxRuntime.jsxs)("label", {
+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 labelJsx(_ref) {
+  var name = _ref.name,
+    labelStyle = _ref.labelStyle,
+    label = _ref.label,
+    required = _ref.required,
+    spanStyle = _ref.spanStyle,
+    showHelp = _ref.showHelp,
+    helpText = _ref.helpText,
+    disableHtmlFor = _ref.disableHtmlFor;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("label", _objectSpread(_objectSpread({
     className: "ufg-label",
-    htmlFor: "form-input-".concat(name),
-    style: labelStyle,
-    children: [displayName, required && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+    style: labelStyle
+  }, disableHtmlFor ? {} : {
+    htmlFor: "form-input-".concat(name)
+  }), {}, {
+    children: [label, required && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
       className: "ufg-required",
       style: spanStyle,
       children: " *"
@@ -21,7 +37,7 @@ function labelJsx(name, labelStyle, displayName, required, spanStyle, showHelp,
       title: helpText,
       children: " \u24D8"
     })]
-  });
+  }));
 }
 function errorJsx(error) {
   return error && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {

package/build/index.css

@@ -85,11 +85,9 @@
    Form layout
    -------------------------------------------------------------------------- */
 .ufg-form-columns {
-	display: flex;
-	flex-direction: row;
+	display: grid;
+	/* grid-template-columns: repeat(2, 1fr); */
 	gap: 2rem;
-	align-items: flex-start;
-	flex-wrap: wrap;
 }
 
 .ufg-form {
@@ -111,7 +109,8 @@
 }
 
 .ufg-field-row {
-	display: grid;
+	display: flex;
+	flex-wrap: wrap;
 	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
 	gap: 16px;
 }
@@ -150,6 +149,7 @@
 	background: var(--ufg-surface);
 	transition: all 0.12s ease;
 	font-family: inherit;
+	line-height: normal;
 }
 
 .ufg-input:hover,
@@ -254,7 +254,7 @@
 .ufg-radio-item {
 	display: flex;
 	align-items: center;
-	gap: 1em;
+	gap: 0.5em;
 	margin: 0;
 }
 
@@ -329,6 +329,10 @@
 	flex-wrap: wrap;
 }
 
+.ufg-button:hover:not(:disabled) {
+	transform: translateY(-1px);
+}
+
 .ufg-button {
 	padding: 12px 24px;
 	border-radius: var(--ufg-radius);
@@ -451,7 +455,7 @@
    Misc wrappers
    -------------------------------------------------------------------------- */
 .ufg-component-wrapper {
-	margin: 10px 0;
+	margin: 6px 0 0;
 }
 
 /* --------------------------------------------------------------------------

package/build/index.js

@@ -3,6 +3,96 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+Object.defineProperty(exports, "CustomAccordion", {
+  enumerable: true,
+  get: function get() {
+    return _CustomAccordion["default"];
+  }
+});
+Object.defineProperty(exports, "CustomAction", {
+  enumerable: true,
+  get: function get() {
+    return _CustomAction["default"];
+  }
+});
+Object.defineProperty(exports, "CustomCheckbox", {
+  enumerable: true,
+  get: function get() {
+    return _CustomCheckbox["default"];
+  }
+});
+Object.defineProperty(exports, "CustomCheckboxGroup", {
+  enumerable: true,
+  get: function get() {
+    return _CustomCheckboxGroup["default"];
+  }
+});
+Object.defineProperty(exports, "CustomDatePicker", {
+  enumerable: true,
+  get: function get() {
+    return _CustomDatePicker["default"];
+  }
+});
+Object.defineProperty(exports, "CustomDropdown", {
+  enumerable: true,
+  get: function get() {
+    return _CustomDropdown["default"];
+  }
+});
+Object.defineProperty(exports, "CustomFileInput", {
+  enumerable: true,
+  get: function get() {
+    return _CustomFileInput["default"];
+  }
+});
+Object.defineProperty(exports, "CustomInput", {
+  enumerable: true,
+  get: function get() {
+    return _CustomInput["default"];
+  }
+});
+Object.defineProperty(exports, "CustomJson", {
+  enumerable: true,
+  get: function get() {
+    return _CustomJson["default"];
+  }
+});
+Object.defineProperty(exports, "CustomMobilePhone", {
+  enumerable: true,
+  get: function get() {
+    return _CustomMobilePhone["default"];
+  }
+});
+Object.defineProperty(exports, "CustomMultiDropdown", {
+  enumerable: true,
+  get: function get() {
+    return _CustomMultiDropdown["default"];
+  }
+});
+Object.defineProperty(exports, "CustomNumberInput", {
+  enumerable: true,
+  get: function get() {
+    return _CustomNumberInput["default"];
+  }
+});
+Object.defineProperty(exports, "CustomRadioGroup", {
+  enumerable: true,
+  get: function get() {
+    return _CustomRadioGroup["default"];
+  }
+});
+Object.defineProperty(exports, "CustomTextArea", {
+  enumerable: true,
+  get: function get() {
+    return _CustomTextArea["default"];
+  }
+});
+Object.defineProperty(exports, "CustomToggle", {
+  enumerable: true,
+  get: function get() {
+    return _CustomToggle["default"];
+  }
+});
 Object.defineProperty(exports, "Demo", {
   enumerable: true,
   get: function get() {
@@ -19,14 +109,17 @@ exports["default"] = void 0;
 var _react = require("react");
 var _reactBootstrap = require("react-bootstrap");
 var _CustomAccordion = _interopRequireDefault(require("./FormFields/CustomAccordion"));
+var _CustomAction = _interopRequireDefault(require("./FormFields/CustomAction"));
 var _CustomCheckbox = _interopRequireDefault(require("./FormFields/CustomCheckbox"));
 var _CustomCheckboxGroup = _interopRequireDefault(require("./FormFields/CustomCheckboxGroup"));
 var _CustomComponent = _interopRequireDefault(require("./FormFields/CustomComponent"));
 var _CustomDatePicker = _interopRequireDefault(require("./FormFields/CustomDatePicker"));
 var _CustomDropdown = _interopRequireDefault(require("./FormFields/CustomDropdown"));
+var _CustomFileInput = _interopRequireDefault(require("./FormFields/CustomFileInput"));
 var _CustomInput = _interopRequireDefault(require("./FormFields/CustomInput"));
 var _CustomJson = _interopRequireDefault(require("./FormFields/CustomJson"));
 var _CustomLabel = _interopRequireDefault(require("./FormFields/CustomLabel"));
+var _CustomMobilePhone = _interopRequireDefault(require("./FormFields/CustomMobilePhone"));
 var _CustomMultiDropdown = _interopRequireDefault(require("./FormFields/CustomMultiDropdown"));
 var _CustomNumberInput = _interopRequireDefault(require("./FormFields/CustomNumberInput"));
 var _CustomRadioGroup = _interopRequireDefault(require("./FormFields/CustomRadioGroup"));
@@ -116,10 +209,14 @@ var GenericForm = function GenericForm(_ref) {
     fieldsStyle = _ref.fieldsStyle,
     actionsDivStyle = _ref.actionsDivStyle,
     actionsStyle = _ref.actionsStyle,
+    inlineStyle = _ref.inlineStyle,
     _ref$splitForm = _ref.splitForm,
     splitForm = _ref$splitForm === void 0 ? false : _ref$splitForm,
-    splitField = _ref.splitField,
+    _ref$splitFields = _ref.splitFields,
+    splitFields = _ref$splitFields === void 0 ? [] : _ref$splitFields,
     splitGroup = _ref.splitGroup,
+    _ref$splitColumns = _ref.splitColumns,
+    splitColumns = _ref$splitColumns === void 0 ? 2 : _ref$splitColumns,
     _ref$disableDefaultCo = _ref.disableDefaultContainer,
     disableDefaultContainer = _ref$disableDefaultCo === void 0 ? false : _ref$disableDefaultCo,
     handleSubmit = _ref.handleSubmit,
@@ -155,7 +252,9 @@ var GenericForm = function GenericForm(_ref) {
     _ref$modalShow = _ref.modalShow,
     modalShow = _ref$modalShow === void 0 ? false : _ref$modalShow,
     _ref$modalSize = _ref.modalSize,
-    modalSize = _ref$modalSize === void 0 ? 'lg' : _ref$modalSize;
+    modalSize = _ref$modalSize === void 0 ? 'lg' : _ref$modalSize,
+    _ref$disableFormTag = _ref.disableFormTag,
+    disableFormTag = _ref$disableFormTag === void 0 ? false : _ref$disableFormTag;
   var _useState = (0, _react.useState)([]),
     _useState2 = _slicedToArray(_useState, 2),
     sortedFields = _useState2[0],
@@ -224,7 +323,7 @@ var GenericForm = function GenericForm(_ref) {
             var nextErrors = _objectSpread({}, prevErrors);
             Object.keys(patch).forEach(function (name) {
               var field = fields.find(function (f) {
-                return f.name === name;
+                return (f === null || f === void 0 ? void 0 : f.name) === name;
               });
               if (field) nextErrors[name] = validateField(field, patch[name], merged) || undefined;
             });
@@ -243,7 +342,7 @@ var GenericForm = function GenericForm(_ref) {
     var errs = [];
     if (field.required) {
       var empty = value === undefined || value === null || value === '' || Array.isArray(value) && value.length === 0;
-      if (empty) errs.push(field.errorMessage || "".concat(typeof field.label === 'string' && field.label || field.displayName || field.name, " is required"));
+      if (empty) errs.push(field.errorMessage || "".concat(typeof field.label === 'string' && field.label || field.name, " is required"));
     }
     if (field.type === 'email' && value && !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value)) errs.push(field.errorMessage || 'Invalid email format');
     if (field.minLength && value && value.length < field.minLength) errs.push(field.errorMessage || "Minimum ".concat(field.minLength, " characters required"));
@@ -454,9 +553,10 @@ var GenericForm = function GenericForm(_ref) {
     // Props shared by all interactive fields
     var cp = {
       name: field.name,
-      displayName: field.label || field.displayName,
+      label: field.label,
       disabled: field.disabled,
-      required: field.required
+      required: field.required,
+      placeholder: field.placeholder
     };
     var sp = {
       mainDivStyle: field.style,
@@ -500,7 +600,6 @@ var GenericForm = function GenericForm(_ref) {
       case 'number':
         return /*#__PURE__*/(0, _jsxRuntime.jsx)(_CustomNumberInput["default"], _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, cp), sp), fp), {}, {
           value: value,
-          placeholder: field.placeholder,
           min: field.min,
           max: field.max,
           step: field.step,
@@ -509,11 +608,15 @@ var GenericForm = function GenericForm(_ref) {
       case 'textArea':
         return /*#__PURE__*/(0, _jsxRuntime.jsx)(_CustomTextArea["default"], _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, cp), sp), fp), {}, {
           value: value,
-          placeholder: field.placeholder,
           rows: field.rows,
           height: field.height,
           onChange: fieldHandler(field)
         }), field.name);
+      case 'tel':
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_CustomMobilePhone["default"], _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, cp), sp), fp), {}, {
+          value: value,
+          onChange: fieldHandler(field)
+        }), field.name);
 
       // Date
       case 'date':
@@ -522,7 +625,6 @@ var GenericForm = function GenericForm(_ref) {
       case 'year':
         return /*#__PURE__*/(0, _jsxRuntime.jsx)(_CustomDatePicker["default"], _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, cp), sp), fp), {}, {
           value: value,
-          placeholder: field.placeholder,
           onChange: dateFieldHandler(field),
           isValidDate: field.validate,
           dateFormat: field.type === 'time' ? false : field.type === 'year' ? 'YYYY' : 'DD/MM/YYYY',
@@ -634,12 +736,17 @@ var GenericForm = function GenericForm(_ref) {
             return validateJsonField(name, raw, isMulti, false, field);
           }
         }), field.name);
+      case 'file':
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_CustomFileInput["default"], _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, cp), sp), fp), {}, {
+          value: value,
+          accept: field.accept,
+          onChange: fieldHandler(field)
+        }), field.name);
       default:
         return /*#__PURE__*/(0, _jsxRuntime.jsx)(_CustomInput["default"], _objectSpread(_objectSpread(_objectSpread(_objectSpread({
           type: field.type
         }, cp), sp), fp), {}, {
           value: value,
-          placeholder: field.placeholder,
           onChange: fieldHandler(field),
           className: field.className
         }), field.name);
@@ -662,6 +769,7 @@ var GenericForm = function GenericForm(_ref) {
     return groupByInline(fieldList).map(function (group, idx) {
       return group.type === 'inline' ? /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
         className: "ufg-field-row",
+        style: inlineStyle,
         children: group.fields.map(function (_ref9) {
           var field = _ref9.field;
           return renderField(field);
@@ -678,63 +786,91 @@ var GenericForm = function GenericForm(_ref) {
       }), renderFields(fieldList)]
     }, g);
   };
-  var splitByField = function splitByField(fieldList) {
-    var idx = fieldList.findIndex(function (f) {
-      return f.name === splitField;
+
+  // ── Replace splitByField + buildContent entirely ─────────────────────────────
+
+  var splitFieldsSet = (0, _react.useMemo)(function () {
+    return new Set(splitFields);
+  }, [splitFields]);
+
+  /**
+   * Returns the index of the last field (in `list`) whose name is in splitFields.
+   * Returns -1 when none match.
+   */
+  var lastSplitIdx = (0, _react.useCallback)(function (list) {
+    var idx = -1;
+    list.forEach(function (f, i) {
+      if (splitFieldsSet.has(f.name)) idx = i;
     });
-    if (idx === -1) return {
-      left: fieldList,
-      right: []
-    };
-    return {
-      left: fieldList.slice(0, idx + 1),
-      right: fieldList.slice(idx + 1)
-    };
-  };
-  var buildContent = function buildContent() {
+    return idx;
+  }, [splitFieldsSet]);
+  var buildContent = (0, _react.useCallback)(function () {
     var groups = Object.keys(groupedFields);
-    if (splitForm && splitField && splitGroup) {
-      var splitIdx = groups.findIndex(function (g) {
-        return groupedFields[g].some(function (f) {
-          return f.name === splitField;
-        });
+    if (!splitForm || splitFields.length === 0) return groups.map(function (g) {
+      return renderGroupSection(g, groupedFields[g]);
+    });
+
+    // ── Group-level split ────────────────────────────────────────────────────
+    if (splitGroup) {
+      // Find the rightmost group that contains any splitField
+      var pivotGroupIdx = -1;
+      groups.forEach(function (g, gi) {
+        if (groupedFields[g].some(function (f) {
+          return splitFieldsSet.has(f.name);
+        })) pivotGroupIdx = gi;
       });
-      if (splitIdx === -1) return groups.map(function (g) {
+      if (pivotGroupIdx === -1) return groups.map(function (g) {
         return renderGroupSection(g, groupedFields[g]);
       });
       return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
         className: "ufg-form-columns",
+        style: {
+          gridTemplateColumns: "repeat(".concat(splitColumns, ", 1fr)")
+        },
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-          children: groups.slice(0, splitIdx + 1).map(function (g) {
+          children: groups.slice(0, pivotGroupIdx + 1).map(function (g) {
             return renderGroupSection(g, groupedFields[g]);
           })
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-          children: groups.slice(splitIdx + 1).map(function (g) {
+          children: groups.slice(pivotGroupIdx + 1).map(function (g) {
             return renderGroupSection(g, groupedFields[g]);
           })
         })]
       });
     }
-    if (splitForm && splitField) {
-      return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-        className: "ufg-form-columns",
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-          children: groups.map(function (g) {
-            return renderGroupSection(g, splitByField(groupedFields[g]).left);
-          })
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-          children: groups.map(function (g) {
-            var _splitByField = splitByField(groupedFields[g]),
-              right = _splitByField.right;
-            return right.length ? renderGroupSection(g, right) : null;
-          })
-        })]
-      });
-    }
-    return groups.map(function (g) {
+
+    // ── Field-level split (cross-group aware) ────────────────────────────────
+    // Flatten preserving order, find pivot, then re-group each side.
+    var allFields = groups.flatMap(function (g) {
+      return groupedFields[g];
+    });
+    var pivot = lastSplitIdx(allFields);
+    if (pivot === -1) return groups.map(function (g) {
       return renderGroupSection(g, groupedFields[g]);
     });
-  };
+    var regroup = function regroup(slice) {
+      var map = {};
+      slice.forEach(function (f) {
+        var g = f.group || 'ungrouped';
+        if (!map[g]) map[g] = [];
+        map[g].push(f);
+      });
+      return Object.keys(map).map(function (g) {
+        return renderGroupSection(g, map[g]);
+      });
+    };
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: "ufg-form-columns",
+      style: {
+        gridTemplateColumns: "repeat(".concat(splitColumns, ", 1fr)")
+      },
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        children: regroup(allFields.slice(0, pivot + 1))
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        children: regroup(allFields.slice(pivot + 1))
+      })]
+    });
+  }, [groupedFields, splitForm, splitFields, splitGroup, splitFieldsSet, lastSplitIdx, renderGroupSection]); // eslint-disable-line react-hooks/exhaustive-deps
 
   // #endregion
   // #region Actions bar
@@ -743,14 +879,11 @@ var GenericForm = function GenericForm(_ref) {
     className: "ufg-actions",
     style: actionsDivStyle,
     children: [customActions.map(function (action, idx) {
-      return /*#__PURE__*/(0, _jsxRuntime.jsxs)("button", {
-        type: "button",
-        className: "ufg-button ".concat(action.className || 'ufg-button-secondary'),
-        onClick: action.onClick,
-        disabled: !!action.disabled,
-        style: _objectSpread(_objectSpread({}, actionsStyle), action.style),
-        children: [action.icon, action.label || action.name]
-      }, idx);
+      return (0, _CustomAction["default"])(_objectSpread(_objectSpread({}, action), {}, {
+        name: "".concat(action.name, " ").concat(idx),
+        className: action.className || "ufg-button-secondary",
+        style: _objectSpread(_objectSpread({}, actionsStyle), action.style)
+      }));
     }), showSubmit && haveSaveButton && /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
       type: "submit",
       className: "ufg-button ".concat(submitButton.className || 'ufg-button-primary'),
@@ -775,7 +908,14 @@ var GenericForm = function GenericForm(_ref) {
 
   // #endregion
   // #region Form JSX
-  var formJSX = /*#__PURE__*/(0, _jsxRuntime.jsxs)("form", {
+  var formJSX = disableFormTag ? /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    className: "ufg-form",
+    style: formStyle || {
+      margin: 'auto'
+    },
+    onSubmit: onFormSubmit,
+    children: [buildContent(), actionsBar]
+  }) : /*#__PURE__*/(0, _jsxRuntime.jsxs)("form", {
     className: "ufg-form",
     style: formStyle || {
       margin: 'auto'

package/package.json

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