@digigov/form 1.0.0-88820b1e → 1.0.0-8b33e4c8

package/cjs/Field/index.js

@@ -0,0 +1,103 @@
+"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.Field = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _FieldBase = require("./FieldBase");
+
+var _FieldConditional = _interopRequireDefault(require("./FieldConditional"));
+
+var _utils = require("./utils");
+
+var _FieldArray = _interopRequireDefault(require("../FieldArray"));
+
+var _MultiplicityField = _interopRequireDefault(require("../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); }
+
+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 Field = function Field(_ref) {
+  var name = _ref.name,
+      children = _ref.children,
+      customField = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
+
+  var _useField = (0, _utils.useField)(name, customField !== null && customField !== void 0 && customField.type ? customField : null),
+      field = _useField.field,
+      control = _useField.control,
+      register = _useField.register,
+      reset = _useField.reset,
+      error = _useField.error,
+      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);
+  }, [field]);
+
+  if (calculatedField.condition) {
+    return /*#__PURE__*/_react["default"].createElement(_FieldConditional["default"], {
+      control: control,
+      reset: reset,
+      register: register,
+      field: calculatedField,
+      error: error
+    });
+  }
+
+  if (calculatedField.type === 'array' && !calculatedField.multiplicity) {
+    calculatedField.name = name;
+    return /*#__PURE__*/_react["default"].createElement(_FieldArray["default"], (0, _extends2["default"])({
+      control: control,
+      register: register,
+      error: error,
+      formState: formState
+    }, calculatedField));
+  }
+
+  if (calculatedField.type === 'array' && calculatedField.multiplicity === true) {
+    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));
+  }
+
+  return /*#__PURE__*/_react["default"].createElement(_FieldBase.FieldBase, (0, _extends2["default"])({}, calculatedField, {
+    name: name,
+    control: control,
+    register: register,
+    reset: reset,
+    error: error
+  }));
+};
+
+exports.Field = Field;
+var _default = Field;
+exports["default"] = _default;

package/cjs/Field/types.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/{es → cjs}/Field/utils.js

@@ -1,51 +1,80 @@
-import _extends from "@babel/runtime/helpers/extends";
-import { lazy, useContext, useMemo } from 'react';
-import { FormContext } from '@digigov/form/FormContext';
-import Checkboxes from '@digigov/form/inputs/Checkboxes';
-import DateInput from '@digigov/form/inputs/DateInput';
-import FileInput from '@digigov/form/inputs/FileInput';
-import Input from '@digigov/form/inputs/Input';
-import OtpInput from '@digigov/form/inputs/OtpInput';
-import Radio from '@digigov/form/inputs/Radio';
-import Select from '@digigov/form/inputs/Select';
-var AutoComplete = /*#__PURE__*/lazy(function () {
-  return import('@digigov/form/inputs/AutoComplete');
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.calculateField = calculateField;
+exports.evaluateFieldWithConditions = evaluateFieldWithConditions;
+exports.useField = void 0;
+
+var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _react = require("react");
+
+var _FormContext = require("../FormContext");
+
+var _Checkboxes = _interopRequireDefault(require("../inputs/Checkboxes"));
+
+var _DateInput = _interopRequireDefault(require("../inputs/DateInput"));
+
+var _FileInput = _interopRequireDefault(require("../inputs/FileInput"));
+
+var _Input = _interopRequireDefault(require("../inputs/Input"));
+
+var _OtpInput = _interopRequireDefault(require("../inputs/OtpInput"));
+
+var _Radio = _interopRequireDefault(require("../inputs/Radio"));
+
+var _Select = _interopRequireDefault(require("../inputs/Select"));
+
+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 || (0, _typeof2["default"])(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 AutoComplete = /*#__PURE__*/(0, _react.lazy)(function () {
+  return Promise.resolve().then(function () {
+    return _interopRequireWildcard(require("../inputs/AutoComplete"));
+  });
 });
 var FIELD_COMPONENTS = {
   text: {
-    component: Input
+    component: _Input["default"]
   },
   string: {
-    component: Input
+    component: _Input["default"]
   },
   file: {
     wrapper: 'fieldset',
-    component: FileInput
+    component: _FileInput["default"]
   },
   date: {
     wrapper: 'fieldset',
     controlled: true,
-    component: DateInput
+    component: _DateInput["default"]
   },
   otp: {
     wrapper: 'fieldset',
     controlled: true,
-    component: OtpInput
+    component: _OtpInput["default"]
   },
   'choice:multiple': {
     wrapper: 'fieldset',
     controlled: true,
-    component: Checkboxes
+    component: _Checkboxes["default"]
   },
   'choice:single': {
     wrapper: 'fieldset',
     controlled: false,
-    component: Radio
+    component: _Radio["default"]
   }
 };
 var ALTERNATIVE_COMPONENTS = {
   Select: {
-    component: Select,
+    component: _Select["default"],
     controlled: false
   },
   AutoComplete: {
@@ -53,12 +82,12 @@ var ALTERNATIVE_COMPONENTS = {
     controlled: true
   }
 };
-export function calculateField(children, field, componentRegistry) {
-  var _field$extra;
 
-  var calculatedField = _extends({}, field);
+function calculateField(children, field, componentRegistry) {
+  var _field$extra;
 
-  var fieldComponentRegistry = _extends({}, FIELD_COMPONENTS, componentRegistry);
+  var calculatedField = (0, _extends2["default"])({}, field);
+  var fieldComponentRegistry = (0, _extends2["default"])({}, FIELD_COMPONENTS, componentRegistry);
 
   if (children) {
     calculatedField.component = children;
@@ -89,8 +118,9 @@ export function calculateField(children, field, componentRegistry) {
 
   return calculatedField;
 }
-export var useField = function useField(name, customField) {
-  var _useContext = useContext(FormContext),
+
+var useField = function useField(name, customField) {
+  var _useContext = (0, _react.useContext)(_FormContext.FormContext),
       fieldsMap = _useContext.fieldsMap,
       control = _useContext.control,
       register = _useContext.register,
@@ -111,8 +141,8 @@ export var useField = function useField(name, customField) {
     throw new Error("\n      You can't use the Field component without wrapping it in FormBuilder.\n      https://devs.pages.grnet.gr/digigov/digigov-sdk/sdk-docs/forms/create-simple-form/\n    ");
   }
 
-  useMemo(function () {
-    return (customField === null || customField === void 0 ? void 0 : customField.type) && registerField(_extends({}, customField, {
+  (0, _react.useMemo)(function () {
+    return (customField === null || customField === void 0 ? void 0 : customField.type) && registerField((0, _extends2["default"])({}, customField, {
       key: name
     }));
   }, [customField, name, registerField]);
@@ -133,8 +163,11 @@ export var useField = function useField(name, customField) {
     error: errors[name]
   };
 };
-export function evaluateFieldWithConditions(field, variables) {
-  var newField = _extends({}, field);
+
+exports.useField = useField;
+
+function evaluateFieldWithConditions(field, variables) {
+  var newField = (0, _extends2["default"])({}, field);
 
   if (variables) {
     for (var key in variables) {

package/cjs/FieldArray/FieldArray.stories.js

@@ -0,0 +1,45 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _exportNames = {};
+exports["default"] = void 0;
+
+var _ = _interopRequireDefault(require("./"));
+
+var _Default = require("./__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("./__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: _["default"],
+  displayName: 'FieldArray'
+};
+exports["default"] = _default;

package/cjs/FieldArray/__stories__/Default.js

@@ -0,0 +1,111 @@
+"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 = _interopRequireDefault(require("react"));
+
+var _ = _interopRequireWildcard(require("../.."));
+
+var _Button = require("@digigov/ui/form/Button");
+
+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: 'Πεδίο κειμένου',
+    secondary: 'Το multiplicity field είναι ένα πεδίο οπότε φαίνεται και είναι μέρος της φόρμας'
+  }
+}, {
+  key: 'multiplicity',
+  type: 'array',
+  label: {
+    primary: 'Συνυπογράφοντες',
+    secondary: 'Οι συνυπογράφοντες είναι άνθρωποι σαν και εμάς'
+  },
+  extra: {
+    label: {
+      object: {
+        title: 'Συνυπογράφοντας',
+        add: 'Προσθήκη συνυπογράφοντα',
+        "delete": 'Αφαίρεση συνυπογράφοντος'
+      },
+      question: {
+        title: 'Θέλετε να προσθέσετε επιπλέον συνυπογράφοντες;',
+        objectLabel: {
+          primary: 'Προσθήκη νέου συνυπογράφοντα',
+          secondary: 'Συμπληρώστε τα στοιχεία και μετά πατήστε «Προσθήκη»'
+        },
+        yes: 'Ναι',
+        no: 'Όχι'
+      }
+    },
+    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: 'Σταθερό τηλέφωνο',
+    secondary: 'Συμπληρώστε τον αριθμό τηλεφώνου'
+  }
+}];
+
+var _ref = /*#__PURE__*/_react["default"].createElement(_Button.Button, null, "\u03A3\u03C5\u03BD\u03AD\u03C7\u03B5\u03B9\u03B1");
+
+var Default = function Default() {
+  return /*#__PURE__*/_react["default"].createElement(_["default"], {
+    onSubmit: function onSubmit(data) {
+      console.log(data);
+    }
+  }, /*#__PURE__*/_react["default"].createElement(_.Field, (0, _extends2["default"])({
+    name: "string"
+  }, fields[0])), /*#__PURE__*/_react["default"].createElement(_.Field, (0, _extends2["default"])({
+    name: "multiplicity"
+  }, fields[1])), /*#__PURE__*/_react["default"].createElement(_.Field, (0, _extends2["default"])({
+    name: "phonenumber"
+  }, fields[2])), _ref);
+};
+
+exports.Default = Default;

package/cjs/FieldArray/__stories__/WithExactLength.js

@@ -0,0 +1,111 @@
+"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 = _interopRequireDefault(require("react"));
+
+var _ = _interopRequireWildcard(require("../.."));
+
+var _Button = require("@digigov/ui/form/Button");
+
+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: 'Πεδίο κειμένου',
+    secondary: 'Το multiplicity field είναι ένα πεδίο οπότε φαίνεται και είναι μέρος της φόρμας'
+  }
+}, {
+  key: 'multiplicity',
+  type: 'array',
+  label: {
+    primary: 'Συνυπογράφοντες',
+    secondary: 'Οι συνυπογράφοντες είναι άνθρωποι σαν και εμάς'
+  },
+  extra: {
+    label: {
+      object: {
+        title: 'Συνυπογράφοντας',
+        title_added: 'Οι συνυπογράφοντες που έχετε προσθέσει',
+        add: 'Προσθήκη',
+        "delete": 'Αφαίρεση συνυπογράφοντος'
+      },
+      question: {
+        title: 'Θέλετε να προσθέσετε επιπλέον συνυπογράφοντες;',
+        objectLabel: {
+          primary: 'Προσθήκη νέου συνυπογράφοντα',
+          secondary: 'Συμπληρώστε τα στοιχεία και μετά πατήστε «Προσθήκη»'
+        },
+        yes: 'Ναι',
+        no: 'Όχι'
+      }
+    },
+    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: 'Σταθερό τηλέφωνο',
+    secondary: 'Συμπληρώστε τον αριθμό τηλεφώνου σας'
+  }
+}];
+
+var _ref = /*#__PURE__*/_react["default"].createElement(_Button.Button, null, "\u03A3\u03C5\u03BD\u03AD\u03C7\u03B5\u03B9\u03B1");
+
+var WithExactLength = function WithExactLength() {
+  return /*#__PURE__*/_react["default"].createElement(_["default"], {
+    onSubmit: function onSubmit(data) {
+      console.log(data);
+    }
+  }, /*#__PURE__*/_react["default"].createElement(_.Field, (0, _extends2["default"])({
+    name: "string"
+  }, fields[0])), /*#__PURE__*/_react["default"].createElement(_.Field, (0, _extends2["default"])({
+    name: "multiplicity"
+  }, fields[1])), /*#__PURE__*/_react["default"].createElement(_.Field, (0, _extends2["default"])({
+    name: "phonenumber"
+  }, fields[2])), _ref);
+};
+
+exports.WithExactLength = WithExactLength;

package/cjs/FieldArray/index.js

@@ -0,0 +1,87 @@
+"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 _reactHookForm = require("react-hook-form");
+
+var _FieldBaseContainer = _interopRequireDefault(require("../Field/FieldBaseContainer"));
+
+var _FieldObject = _interopRequireDefault(require("../FieldObject"));
+
+var _Fieldset = require("../Fieldset");
+
+var _Fieldset2 = _interopRequireDefault(require("@digigov/react-core/Fieldset"));
+
+var _ui = require("@digigov/ui");
+
+var _excluded = ["name", "register", "control", "formState", "error", "layout", "label"];
+
+var FieldArray = function FieldArray(_ref) {
+  var _customField$extra, _customField$extra$la, _customField$extra4, _customField$extra4$l;
+
+  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(_FieldBaseContainer["default"], {
+    label: label,
+    layout: layout,
+    error: formState.isSubmitted && !formState.isSubmitting && error !== null && error !== void 0 && error.message && error ? error : undefined,
+    wrapper: "fieldset",
+    name: name
+  }, fields.length === 0 && /*#__PURE__*/_react["default"].createElement(_ui.Hint, null, (_customField$extra = customField.extra) === null || _customField$extra === void 0 ? void 0 : (_customField$extra$la = _customField$extra.label.object) === null || _customField$extra$la === void 0 ? void 0 : _customField$extra$la.nothing_added), fields.map(function (field, index) {
+    var _customField$extra2, _customField$extra3;
+
+    return /*#__PURE__*/_react["default"].createElement(_ui.Card, {
+      variant: "border",
+      key: field.id
+    }, /*#__PURE__*/_react["default"].createElement(_Fieldset2["default"], null, /*#__PURE__*/_react["default"].createElement(_Fieldset.FieldsetLabel, null, (_customField$extra2 = customField.extra) === null || _customField$extra2 === void 0 ? void 0 : _customField$extra2.label.object.title, " ", index + 1), /*#__PURE__*/_react["default"].createElement(_FieldObject["default"], (0, _extends2["default"])({
+      name: "".concat(name, ".").concat(index),
+      error: Array.isArray(error) && error[index],
+      formState: formState,
+      register: register,
+      control: control
+    }, (_customField$extra3 = customField.extra) === null || _customField$extra3 === void 0 ? void 0 : _customField$extra3.of)), /*#__PURE__*/_react["default"].createElement(_ui.Button, {
+      type: "button",
+      color: "warning",
+      onClick: function onClick() {
+        return remove(index);
+      }
+    }, "Remove")));
+  }), /*#__PURE__*/_react["default"].createElement(_ui.Button, {
+    type: "button",
+    color: "secondary",
+    onClick: function onClick(ev) {
+      ev.preventDefault();
+      append({});
+    }
+  }, (_customField$extra4 = customField.extra) === null || _customField$extra4 === void 0 ? void 0 : (_customField$extra4$l = _customField$extra4.label.object) === null || _customField$extra4$l === void 0 ? void 0 : _customField$extra4$l.add));
+};
+
+exports.FieldArray = FieldArray;
+var _default = FieldArray;
+exports["default"] = _default;