@digigov/form 0.7.1 → 0.8.0

package/CHANGELOG.md

@@ -1,6 +1,13 @@
 # Change Log - @digigov/form
 
-This log was last generated on Wed, 31 Aug 2022 16:10:12 GMT and should not be manually modified.
+This log was last generated on Thu, 01 Sep 2022 17:10:30 GMT and should not be manually modified.
+
+## 0.8.0
+Thu, 01 Sep 2022 17:10:30 GMT
+
+### Minor changes
+
+- Add new MultiplicityField component
 
 ## 0.7.1
 Wed, 31 Aug 2022 16:10:12 GMT

package/Field/FieldBase.js

@@ -55,14 +55,8 @@ var FieldBase = function FieldBase(props) {
       control: control,
       name: name,
       render: function render(_ref) {
-        var onChange = _ref.onChange,
-            onBlur = _ref.onBlur,
-            value = _ref.value;
-        return /*#__PURE__*/_react["default"].createElement(Component, (0, _extends2["default"])({
-          name: name,
-          onChange: onChange,
-          onBlur: onBlur,
-          value: value,
+        var field = _ref.field;
+        return /*#__PURE__*/_react["default"].createElement(Component, (0, _extends2["default"])({}, field, {
           defaultValue: defaultValue,
           extra: extra,
           error: !!error,
@@ -82,9 +76,7 @@ var FieldBase = function FieldBase(props) {
     error: error,
     wrapper: wrapper,
     name: name
-  }, Component !== null && Component !== void 0 && Component.render ? /*#__PURE__*/_react["default"].createElement(Component, (0, _extends2["default"])({
-    name: name,
-    ref: register,
+  }, Component !== null && Component !== void 0 && Component.render ? /*#__PURE__*/_react["default"].createElement(Component, (0, _extends2["default"])({}, register(name), {
     control: control,
     error: !!error,
     extra: extra,

package/Field/FieldContainer.js

@@ -38,14 +38,17 @@ var FieldContainer = function FieldContainer(_ref) {
   var _useTranslation = (0, _i18n.useTranslation)(),
       t = _useTranslation.t;
 
+  var errorMessage = error !== null && error !== void 0 && error.message.key ? error.message.key : (error === null || error === void 0 ? void 0 : error.message) || '';
+  var errorContext = (error === null || error === void 0 ? void 0 : error.message.context) || {};
+
   if (wrapper === 'fieldset') {
     return /*#__PURE__*/_react["default"].createElement(_Field["default"], (0, _extends2["default"])({
       error: !!error
     }, layout), /*#__PURE__*/_react["default"].createElement(_Fieldset["default"], null, /*#__PURE__*/_react["default"].createElement(_FieldsetLegend["default"], {
       size: "s"
-    }, label && label.primary, label && label.secondary && /*#__PURE__*/_react["default"].createElement(_Hint["default"], null, t(label.secondary)), error && /*#__PURE__*/_react["default"].createElement(_ErrorMessage["default"], {
+    }, label && label.primary), label && label.secondary && /*#__PURE__*/_react["default"].createElement(_Hint["default"], null, t(label.secondary)), error && /*#__PURE__*/_react["default"].createElement(_ErrorMessage["default"], {
       id: "".concat(name, "-error")
-    }, t((error === null || error === void 0 ? void 0 : error.message) || ''))), children));
+    }, t(errorMessage, errorContext)), children));
   } else {
     return /*#__PURE__*/_react["default"].createElement(_Field["default"], (0, _extends2["default"])({
       error: !!error
@@ -53,7 +56,7 @@ var FieldContainer = function FieldContainer(_ref) {
       label: label
     }), error && /*#__PURE__*/_react["default"].createElement(_ErrorMessage["default"], {
       id: "".concat(name, "-error")
-    }, t((error === null || error === void 0 ? void 0 : error.message) || '')), children));
+    }, t(errorMessage, errorContext)), children));
   }
 };
 

package/Field/index.js

@@ -21,6 +21,10 @@ var _FieldConditional = _interopRequireDefault(require("@digigov/form/Field/Fiel
 
 var _utils = require("@digigov/form/Field/utils");
 
+var _FieldArray = _interopRequireDefault(require("@digigov/form/FieldArray"));
+
+var _MultiplicityField = _interopRequireDefault(require("@digigov/form/MultiplicityField"));
+
 var _excluded = ["name", "children"];
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -37,7 +41,13 @@ var Field = function Field(_ref) {
       control = _useField.control,
       register = _useField.register,
       error = _useField.error,
-      componentRegistry = _useField.componentRegistry;
+      componentRegistry = _useField.componentRegistry,
+      formState = _useField.formState,
+      setValue = _useField.setValue,
+      getValues = _useField.getValues,
+      unregister = _useField.unregister,
+      trigger = _useField.trigger,
+      clearErrors = _useField.clearErrors;
 
   var calculatedField = (0, _react.useMemo)(function () {
     return (0, _utils.calculateField)(children, field, componentRegistry);
@@ -52,6 +62,32 @@ var Field = function Field(_ref) {
     });
   }
 
+  if (calculatedField.type === 'array' && calculatedField.multiplicity) {
+    // if (error) debugger;
+    calculatedField.name = name;
+    return /*#__PURE__*/_react["default"].createElement(_MultiplicityField["default"], (0, _extends2["default"])({
+      control: control,
+      register: register,
+      trigger: trigger,
+      clearErrors: clearErrors,
+      error: error,
+      formState: formState,
+      setValue: setValue,
+      getValues: getValues,
+      unregister: unregister
+    }, calculatedField));
+  }
+
+  if (calculatedField.type === 'array') {
+    calculatedField.name = name;
+    return /*#__PURE__*/_react["default"].createElement(_FieldArray["default"], (0, _extends2["default"])({
+      control: control,
+      register: register,
+      error: error,
+      formState: formState
+    }, calculatedField));
+  }
+
   return /*#__PURE__*/_react["default"].createElement(_FieldBase.FieldBase, (0, _extends2["default"])({}, calculatedField, {
     name: name,
     control: control,

package/Field/utils.js

@@ -101,9 +101,17 @@ var useField = function useField(name, customField) {
       fieldsMap = _useContext.fieldsMap,
       control = _useContext.control,
       register = _useContext.register,
+      trigger = _useContext.trigger,
+      clearErrors = _useContext.clearErrors,
       errors = _useContext.errors,
       registerField = _useContext.registerField,
-      componentRegistry = _useContext.componentRegistry;
+      watch = _useContext.watch,
+      componentRegistry = _useContext.componentRegistry,
+      getFieldState = _useContext.getFieldState,
+      setValue = _useContext.setValue,
+      getValues = _useContext.getValues,
+      unregister = _useContext.unregister,
+      formState = _useContext.formState;
 
   (0, _react.useMemo)(function () {
     return (customField === null || customField === void 0 ? void 0 : customField.type) && registerField((0, _extends2["default"])({}, customField, {
@@ -114,7 +122,15 @@ var useField = function useField(name, customField) {
     field: customField || fieldsMap[name],
     control: control,
     register: register,
+    trigger: trigger,
+    watch: watch,
     componentRegistry: componentRegistry,
+    getFieldState: getFieldState,
+    setValue: setValue,
+    clearErrors: clearErrors,
+    getValues: getValues,
+    unregister: unregister,
+    formState: formState,
     error: errors[name]
   };
 };

package/FieldArray/FieldArray.stories.js

@@ -0,0 +1,44 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _exportNames = {};
+exports["default"] = void 0;
+
+var _FieldArray = _interopRequireDefault(require("@digigov/form/FieldArray"));
+
+var _Default = require("@digigov/form/FieldArray/__stories__/Default");
+
+Object.keys(_Default).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _Default[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _Default[key];
+    }
+  });
+});
+
+var _WithExactLength = require("@digigov/form/FieldArray/__stories__/WithExactLength");
+
+Object.keys(_WithExactLength).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _WithExactLength[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _WithExactLength[key];
+    }
+  });
+});
+var _default = {
+  title: 'Digigov Form/FieldArray',
+  component: _FieldArray["default"]
+};
+exports["default"] = _default;

package/FieldArray/__stories__/Default.js

@@ -0,0 +1,109 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Default = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _form = _interopRequireWildcard(require("@digigov/form"));
+
+var _core = require("@digigov/ui/core");
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+var fields = [{
+  key: 'string',
+  type: 'string',
+  label: {
+    primary: 'Πεδίο 1',
+    secondary: 'Το multiplicity field είναι ένα πεδίο οπότε φαίνεται και είναι μέρος της φόρμας'
+  }
+}, {
+  key: 'multiplicity',
+  type: 'array',
+  label: {
+    primary: 'Συνυπογράφοντες',
+    secondary: 'Οι συνυπογράφοντες είναι άνθρωποι σαν και εμάς'
+  },
+  extra: {
+    label: {
+      question: {
+        title: 'Θέλετε να προσθέσετε επιπλέον συνυπογράφοντες;',
+        yes: 'Ναι',
+        no: 'Όχι'
+      },
+      edit: 'Επεξεργασία',
+      add: 'Προσθέστε τα στοιχεία του επόμενου συνυπογράφοντα',
+      "delete": 'Αφαίρεση συνυπογράφοντος',
+      save: 'Αποθήκευση'
+    },
+    min: 2,
+    max: 4,
+    of: {
+      type: 'object',
+      extra: {
+        fields: [{
+          key: 'afm',
+          type: 'afm',
+          required: true,
+          label: {
+            primary: 'ΑΦΜ'
+          }
+        }, {
+          key: 'firstName',
+          required: true,
+          type: 'string',
+          label: {
+            primary: 'Όνομα'
+          }
+        }, {
+          key: 'lastName',
+          required: true,
+          type: 'string',
+          label: {
+            primary: 'Επώνυμο'
+          }
+        }]
+      }
+    }
+  }
+}, {
+  key: 'phonenumber',
+  type: 'phone_number',
+  required: true,
+  label: {
+    primary: 'Πεδίο 2',
+    secondary: 'Το multiplicity field είναι ένα πεδίο οπότε φαίνεται και είναι μέρος της φόρμας'
+  }
+}];
+
+var _ref = /*#__PURE__*/_react["default"].createElement(_core.Button, null, "\u03A3\u03C5\u03BD\u03AD\u03C7\u03B5\u03B9\u03B1");
+
+var Default = function Default() {
+  return /*#__PURE__*/_react["default"].createElement(_react.Suspense, {
+    fallback: "loading"
+  }, /*#__PURE__*/_react["default"].createElement(_form["default"], {
+    onSubmit: function onSubmit(data) {
+      debugger;
+      console.log(data);
+    }
+  }, /*#__PURE__*/_react["default"].createElement(_form.Field, (0, _extends2["default"])({
+    name: "string"
+  }, fields[0])), /*#__PURE__*/_react["default"].createElement(_form.Field, (0, _extends2["default"])({
+    name: "multiplicity"
+  }, fields[1])), /*#__PURE__*/_react["default"].createElement(_form.Field, (0, _extends2["default"])({
+    name: "phonenumber"
+  }, fields[2])), _ref));
+};
+
+exports.Default = Default;

package/FieldArray/__stories__/WithExactLength.js

@@ -0,0 +1,108 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.WithExactLength = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _form = _interopRequireWildcard(require("@digigov/form"));
+
+var _core = require("@digigov/ui/core");
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+var fields = [{
+  key: 'string',
+  type: 'string',
+  label: {
+    primary: 'Πεδίο 1',
+    secondary: 'Το multiplicity field είναι ένα πεδίο οπότε φαίνεται και είναι μέρος της φόρμας'
+  }
+}, {
+  key: 'multiplicity',
+  type: 'array',
+  label: {
+    primary: 'Συνυπογράφοντες',
+    secondary: 'Οι συνυπογράφοντες είναι άνθρωποι σαν και εμάς'
+  },
+  extra: {
+    label: {
+      question: {
+        title: 'Θέλετε να προσθέσετε επιπλέον συνυπογράφοντες;',
+        yes: 'Ναι',
+        no: 'Όχι'
+      },
+      edit: 'Επεξεργασία',
+      add: 'Προσθέστε τα στοιχεία του επόμενου συνυπογράφοντα',
+      "delete": 'Αφαίρεση συνυπογράφοντος',
+      save: 'Αποθήκευση'
+    },
+    length: 2,
+    of: {
+      type: 'object',
+      extra: {
+        fields: [{
+          key: 'afm',
+          type: 'afm',
+          required: true,
+          label: {
+            primary: 'ΑΦΜ'
+          }
+        }, {
+          key: 'firstName',
+          required: true,
+          type: 'string',
+          label: {
+            primary: 'Όνομα'
+          }
+        }, {
+          key: 'lastName',
+          required: true,
+          type: 'string',
+          label: {
+            primary: 'Επώνυμο'
+          }
+        }]
+      }
+    }
+  }
+}, {
+  key: 'phonenumber',
+  type: 'phone_number',
+  required: true,
+  label: {
+    primary: 'Πεδίο 2',
+    secondary: 'Το multiplicity field είναι ένα πεδίο οπότε φαίνεται και είναι μέρος της φόρμας'
+  }
+}];
+
+var _ref = /*#__PURE__*/_react["default"].createElement(_core.Button, null, "\u03A3\u03C5\u03BD\u03AD\u03C7\u03B5\u03B9\u03B1");
+
+var WithExactLength = function WithExactLength() {
+  return /*#__PURE__*/_react["default"].createElement(_react.Suspense, {
+    fallback: "loading"
+  }, /*#__PURE__*/_react["default"].createElement(_form["default"], {
+    onSubmit: function onSubmit(data) {
+      debugger;
+      console.log(data);
+    }
+  }, /*#__PURE__*/_react["default"].createElement(_form.Field, (0, _extends2["default"])({
+    name: "string"
+  }, fields[0])), /*#__PURE__*/_react["default"].createElement(_form.Field, (0, _extends2["default"])({
+    name: "multiplicity"
+  }, fields[1])), /*#__PURE__*/_react["default"].createElement(_form.Field, (0, _extends2["default"])({
+    name: "phonenumber"
+  }, fields[2])), _ref));
+};
+
+exports.WithExactLength = WithExactLength;

package/FieldArray/index.js

@@ -0,0 +1,88 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.FieldArray = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _devtools = require("@hookform/devtools");
+
+var _reactHookForm = require("react-hook-form");
+
+var _FieldObject = _interopRequireDefault(require("@digigov/form/FieldObject"));
+
+var _core = require("@digigov/ui/core");
+
+var _Fieldset = require("@digigov/form/Fieldset");
+
+var _Fieldset2 = _interopRequireDefault(require("@digigov/react-core/Fieldset"));
+
+var _FieldContainer = _interopRequireDefault(require("@digigov/form/Field/FieldContainer"));
+
+var _excluded = ["name", "register", "control", "formState", "error", "layout", "label"];
+
+var FieldArray = function FieldArray(_ref) {
+  var name = _ref.name,
+      register = _ref.register,
+      control = _ref.control,
+      formState = _ref.formState,
+      error = _ref.error,
+      layout = _ref.layout,
+      label = _ref.label,
+      customField = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
+
+  var _useFieldArray = (0, _reactHookForm.useFieldArray)({
+    control: control,
+    name: name
+  }),
+      fields = _useFieldArray.fields,
+      append = _useFieldArray.append,
+      remove = _useFieldArray.remove;
+
+  return /*#__PURE__*/_react["default"].createElement(_FieldContainer["default"], {
+    label: label,
+    layout: layout,
+    error: formState.isSubmitted && !formState.isSubmitting && error !== null && error !== void 0 && error.message && error ? error : undefined,
+    wrapper: "fieldset",
+    name: name
+  }, /*#__PURE__*/_react["default"].createElement(_devtools.DevTool, {
+    control: control
+  }), fields.map(function (field, index) {
+    var _customField$extra;
+
+    return /*#__PURE__*/_react["default"].createElement(_core.Card, {
+      variant: "border",
+      key: field.id
+    }, /*#__PURE__*/_react["default"].createElement(_Fieldset2["default"], null, /*#__PURE__*/_react["default"].createElement(_Fieldset.FieldsetLabel, null, "\u03A3\u03C5\u03BD\u03C5\u03C0\u03BF\u03B3\u03C1\u03AC\u03C6\u03BF\u03BD\u03C4\u03B1\u03C2 ", index + 1), /*#__PURE__*/_react["default"].createElement(_FieldObject["default"], (0, _extends2["default"])({
+      name: "".concat(name, ".").concat(index),
+      error: Array.isArray(error) && error[index],
+      register: register,
+      control: control
+    }, (_customField$extra = customField.extra) === null || _customField$extra === void 0 ? void 0 : _customField$extra.of)), /*#__PURE__*/_react["default"].createElement(_core.Button, {
+      type: "button",
+      color: "warning",
+      onClick: function onClick() {
+        return remove(index);
+      }
+    }, "Remove")));
+  }), /*#__PURE__*/_react["default"].createElement(_core.Button, {
+    type: "button",
+    color: "secondary",
+    onClick: function onClick(ev) {
+      ev.preventDefault();
+      append({});
+    }
+  }, "\u03A0\u03C1\u03BF\u03C3\u03B8\u03AE\u03BA\u03B7 \u03C3\u03C5\u03BD\u03C5\u03C0\u03BF\u03B3\u03C1\u03AC\u03C6\u03BF\u03BD\u03C4\u03B1"));
+};
+
+exports.FieldArray = FieldArray;
+var _default = FieldArray;
+exports["default"] = _default;

package/FieldObject/index.js

@@ -0,0 +1,80 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.FieldObject = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _Fieldset = _interopRequireWildcard(require("@digigov/form/Fieldset"));
+
+var _i18n = require("@digigov/ui/app/i18n");
+
+var _FieldBase = require("@digigov/form/Field/FieldBase");
+
+var _utils = require("@digigov/form/Field/utils");
+
+var _reactCore = require("@digigov/react-core");
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+var FieldObject = function FieldObject(_ref) {
+  var name = _ref.name,
+      label = _ref.label,
+      extra = _ref.extra,
+      error = _ref.error,
+      control = _ref.control,
+      register = _ref.register,
+      formState = _ref.formState;
+
+  var _useTranslation = (0, _i18n.useTranslation)(),
+      t = _useTranslation.t;
+
+  return /*#__PURE__*/_react["default"].createElement(_Fieldset["default"], null, (label === null || label === void 0 ? void 0 : label.primary) && /*#__PURE__*/_react["default"].createElement(_reactCore.FieldsetLegend, {
+    size: "s"
+  }, t(label.primary)), (label === null || label === void 0 ? void 0 : label.secondary) && /*#__PURE__*/_react["default"].createElement(_Fieldset.FieldsetCaption, null, t(label.secondary)), extra === null || extra === void 0 ? void 0 : extra.fields.map(function (field) {
+    return /*#__PURE__*/_react["default"].createElement(FieldObjectItem, {
+      key: "".concat(name, ".").concat(field.key),
+      name: "".concat(name, ".").concat(field.key),
+      control: control,
+      register: register,
+      field: field,
+      error: error && error[field.key],
+      formState: formState
+    });
+  }));
+};
+
+exports.FieldObject = FieldObject;
+
+var FieldObjectItem = function FieldObjectItem(_ref2) {
+  var name = _ref2.name,
+      children = _ref2.children,
+      field = _ref2.field,
+      error = _ref2.error,
+      control = _ref2.control,
+      formState = _ref2.formState,
+      register = _ref2.register;
+  var calculatedField = (0, _react.useMemo)(function () {
+    return (0, _utils.calculateField)(children, field);
+  }, [field]);
+  var customError = error ? error : formState === null || formState === void 0 ? void 0 : formState.errors[name];
+  return /*#__PURE__*/_react["default"].createElement(_FieldBase.FieldBase, (0, _extends2["default"])({}, calculatedField, {
+    name: name,
+    control: control,
+    register: register,
+    error: customError
+  }));
+};
+
+var _default = FieldObject;
+exports["default"] = _default;

package/FormBuilder.js

@@ -11,8 +11,6 @@ exports["default"] = exports.FormBuilder = exports.FormBase = void 0;
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
-var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
-
 var _extends4 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
@@ -64,22 +62,24 @@ var FormBase = /*#__PURE__*/_react["default"].forwardRef(function FormBase(_ref,
     criteriaMode: criteriaMode
   });
   var handleSubmit = (0, _react.useCallback)(function (data) {
-    var errors = onSubmit && onSubmit(data);
-
-    if (errors) {
-      for (var key in errors) {
-        form.setError(key, errors[key]);
-      }
-    }
+    onSubmit && onSubmit(data);
   }, [onSubmit]);
   var ctx = {
     fieldsMap: fieldsMap,
     fieldsetsMap: fieldsetsMap,
     control: form.control,
     register: form.register,
+    watch: form.watch,
     registerField: registerField,
-    errors: form.errors,
+    errors: form.formState.errors,
+    formState: form.formState,
     reset: form.reset,
+    trigger: form.trigger,
+    getFieldState: form.getFieldState,
+    setValue: form.setValue,
+    clearErrors: form.clearErrors,
+    getValues: form.getValues,
+    unregister: form.unregister,
     componentRegistry: componentRegistry
   };
   return /*#__PURE__*/_react["default"].createElement(_FormContext.FormContext.Provider, {
@@ -108,7 +108,7 @@ var FormBuilder = /*#__PURE__*/_react["default"].forwardRef(function FormBuilder
       _ref2$shouldFocusErro = _ref2.shouldFocusError,
       shouldFocusError = _ref2$shouldFocusErro === void 0 ? true : _ref2$shouldFocusErro,
       _ref2$criteriaMode = _ref2.criteriaMode,
-      criteriaMode = _ref2$criteriaMode === void 0 ? 'firstError' : _ref2$criteriaMode,
+      criteriaMode = _ref2$criteriaMode === void 0 ? 'all' : _ref2$criteriaMode,
       _ref2$auto = _ref2.auto,
       auto = _ref2$auto === void 0 ? false : _ref2$auto,
       validatorRegistry = _ref2.validatorRegistry,
@@ -122,7 +122,17 @@ var FormBuilder = /*#__PURE__*/_react["default"].forwardRef(function FormBuilder
   }, []);
   var schema = (0, _validators.useValidationSchema)(fieldsState, validatorRegistry);
   var registerField = (0, _react.useCallback)(function (field) {
-    setFieldsState([].concat((0, _toConsumableArray2["default"])(fieldsState.current), [field]));
+    var fieldIndex = fieldsState.current.findIndex(function (f) {
+      return f.key === field.key;
+    });
+
+    if (fieldIndex > -1) {
+      fieldsState.current[fieldIndex] = field;
+    } else {
+      fieldsState.current.push(field);
+    }
+
+    setFieldsState(fieldsState.current);
   }, []);
   var resolver;
   var fieldsMap;