@digigov/form 0.6.10 → 0.8.0

package/CHANGELOG.md

@@ -1,6 +1,29 @@
 # Change Log - @digigov/form
 
-This log was last generated on Thu, 07 Jul 2022 13:01:18 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
+
+_Version update only_
+
+## 0.7.0
+Tue, 26 Jul 2022 07:39:59 GMT
+
+### Minor changes
+
+- Refactor code and file structure
+
+### Patches
+
+- Integrate @digigov/react-core/Grid in Field component and spec
 
 ## 0.6.10
 Thu, 07 Jul 2022 13:01:18 GMT

package/Field/FieldBase.js

@@ -0,0 +1,102 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.FieldBase = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _FieldContainer = _interopRequireDefault(require("@digigov/form/Field/FieldContainer"));
+
+var _reactHookForm = require("react-hook-form");
+
+var _excluded = ["required", "name", "component", "wrapper", "control", "type", "controlled", "enabled", "editable", "defaultValue", "label", "extra", "layout", "error", "register"];
+
+var FieldBase = function FieldBase(props) {
+  var required = props.required,
+      name = props.name,
+      Component = props.component,
+      wrapper = props.wrapper,
+      control = props.control,
+      type = props.type,
+      _props$controlled = props.controlled,
+      controlled = _props$controlled === void 0 ? false : _props$controlled,
+      _props$enabled = props.enabled,
+      enabled = _props$enabled === void 0 ? true : _props$enabled,
+      editable = props.editable,
+      defaultValue = props.defaultValue,
+      label = props.label,
+      _props$extra = props.extra,
+      extra = _props$extra === void 0 ? {} : _props$extra,
+      layout = props.layout,
+      error = props.error,
+      register = props.register,
+      componentProps = (0, _objectWithoutProperties2["default"])(props, _excluded);
+
+  if (!enabled) {
+    return null;
+  }
+
+  if (controlled) {
+    return /*#__PURE__*/_react["default"].createElement(_FieldContainer["default"], {
+      label: label,
+      layout: layout,
+      error: error,
+      wrapper: wrapper,
+      name: name
+    }, /*#__PURE__*/_react["default"].createElement(_reactHookForm.Controller, {
+      control: control,
+      name: name,
+      render: function render(_ref) {
+        var field = _ref.field;
+        return /*#__PURE__*/_react["default"].createElement(Component, (0, _extends2["default"])({}, field, {
+          defaultValue: defaultValue,
+          extra: extra,
+          error: !!error,
+          type: type,
+          "aria-required": !!required,
+          "aria-describedby": error && "".concat(name, "-error"),
+          required: required,
+          disabled: editable === false
+        }, componentProps));
+      }
+    }));
+  }
+
+  return /*#__PURE__*/_react["default"].createElement(_FieldContainer["default"], {
+    label: label,
+    layout: layout,
+    error: error,
+    wrapper: wrapper,
+    name: name
+  }, Component !== null && Component !== void 0 && Component.render ? /*#__PURE__*/_react["default"].createElement(Component, (0, _extends2["default"])({}, register(name), {
+    control: control,
+    error: !!error,
+    extra: extra,
+    type: type,
+    "aria-required": !!required,
+    "aria-describedby": error && "".concat(name, "-error"),
+    required: required,
+    disabled: editable === false
+  }, componentProps)) : /*#__PURE__*/_react["default"].createElement(Component, (0, _extends2["default"])({
+    name: name,
+    register: register,
+    control: control,
+    error: !!error,
+    extra: extra,
+    type: type,
+    "aria-required": !!required,
+    "aria-describedby": error && "".concat(name, "-error"),
+    required: required,
+    disabled: editable === false
+  }, componentProps)));
+};
+
+exports.FieldBase = FieldBase;

package/Field/FieldConditional.js

@@ -0,0 +1,72 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.FieldConditional = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _reactHookForm = require("react-hook-form");
+
+var _utils = require("@digigov/form/Field/utils");
+
+var _FieldBase = require("@digigov/form/Field/FieldBase");
+
+var ChildFieldMemo = /*#__PURE__*/_react["default"].memo(function ChildField(_ref) {
+  var dependencies = _ref.dependencies,
+      field = _ref.field,
+      control = _ref.control,
+      register = _ref.register,
+      error = _ref.error;
+  var newField = (0, _utils.evaluateFieldWithConditions)(field, dependencies);
+  return /*#__PURE__*/_react["default"].createElement(_FieldBase.FieldBase, (0, _extends2["default"])({}, newField, {
+    name: newField.key,
+    control: control,
+    register: register,
+    error: error
+  }));
+}, function (prev, next) {
+  if (!prev || !prev.dependencies) {
+    return false;
+  }
+
+  if (prev.error !== next.error) {
+    return false;
+  }
+
+  for (var dep in next.dependencies) {
+    if (next.dependencies[dep] !== prev.dependencies[dep]) {
+      return false;
+    }
+  }
+
+  return true;
+});
+
+var FieldConditional = function FieldConditional(_ref2) {
+  var control = _ref2.control,
+      field = _ref2.field,
+      register = _ref2.register,
+      error = _ref2.error;
+  var dependencyKeys = Object.keys(field.condition);
+  var variables = (0, _reactHookForm.useWatch)({
+    name: dependencyKeys,
+    control: control
+  });
+  return /*#__PURE__*/_react["default"].createElement(ChildFieldMemo, {
+    dependencies: variables,
+    field: field,
+    control: control,
+    register: register,
+    error: error
+  });
+};
+
+exports.FieldConditional = FieldConditional;
+var _default = FieldConditional;
+exports["default"] = _default;

package/Field/FieldContainer.js

@@ -0,0 +1,65 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.FieldContainer = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _Field = _interopRequireDefault(require("@digigov/react-core/Field"));
+
+var _Label = _interopRequireDefault(require("@digigov/react-core/Label"));
+
+var _Fieldset = _interopRequireDefault(require("@digigov/react-core/Fieldset"));
+
+var _Hint = _interopRequireDefault(require("@digigov/react-core/Hint"));
+
+var _FieldsetLegend = _interopRequireDefault(require("@digigov/react-core/FieldsetLegend"));
+
+var _ErrorMessage = _interopRequireDefault(require("@digigov/react-core/ErrorMessage"));
+
+var _i18n = require("@digigov/ui/app/i18n");
+
+var _Label2 = _interopRequireDefault(require("@digigov/form/inputs/Label"));
+
+var FieldContainer = function FieldContainer(_ref) {
+  var name = _ref.name,
+      wrapper = _ref.wrapper,
+      label = _ref.label,
+      children = _ref.children,
+      error = _ref.error,
+      layout = _ref.layout;
+
+  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"], {
+      id: "".concat(name, "-error")
+    }, t(errorMessage, errorContext)), children));
+  } else {
+    return /*#__PURE__*/_react["default"].createElement(_Field["default"], (0, _extends2["default"])({
+      error: !!error
+    }, layout), /*#__PURE__*/_react["default"].createElement(_Label["default"], null, label && /*#__PURE__*/_react["default"].createElement(_Label2["default"], {
+      label: label
+    }), error && /*#__PURE__*/_react["default"].createElement(_ErrorMessage["default"], {
+      id: "".concat(name, "-error")
+    }, t(errorMessage, errorContext)), children));
+  }
+};
+
+exports.FieldContainer = FieldContainer;
+var _default = FieldContainer;
+exports["default"] = _default;

package/Field/index.js

@@ -7,357 +7,54 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = exports.FieldBase = exports.Field = exports.ConditionalField = void 0;
-
-var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+exports["default"] = exports.Field = void 0;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
-var _react = _interopRequireWildcard(require("react"));
-
-var _reactHookForm = require("react-hook-form");
-
-var _FormContext = require("@digigov/form/FormContext");
-
-var _Field = _interopRequireDefault(require("@digigov/react-core/Field"));
-
-var _Label = _interopRequireDefault(require("@digigov/react-core/Label"));
-
-var _Fieldset = _interopRequireDefault(require("@digigov/react-core/Fieldset"));
-
-var _Hint = _interopRequireDefault(require("@digigov/react-core/Hint"));
-
-var _FieldsetLegend = _interopRequireDefault(require("@digigov/react-core/FieldsetLegend"));
-
-var _ErrorMessage = _interopRequireDefault(require("@digigov/react-core/ErrorMessage"));
-
-var _Input = _interopRequireDefault(require("@digigov/form/inputs/Input"));
-
-var _Checkboxes = _interopRequireDefault(require("@digigov/form/inputs/Checkboxes"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 
-var _Radio = _interopRequireDefault(require("@digigov/form/inputs/Radio"));
+var _react = _interopRequireWildcard(require("react"));
 
-var _Select = _interopRequireDefault(require("@digigov/form/inputs/Select"));
+var _FieldBase = require("@digigov/form/Field/FieldBase");
 
-var _FileInput = _interopRequireDefault(require("@digigov/form/inputs/FileInput"));
+var _FieldConditional = _interopRequireDefault(require("@digigov/form/Field/FieldConditional"));
 
-var _DateInput = _interopRequireDefault(require("@digigov/form/inputs/DateInput"));
+var _utils = require("@digigov/form/Field/utils");
 
-var _Label2 = _interopRequireDefault(require("@digigov/form/inputs/Label"));
+var _FieldArray = _interopRequireDefault(require("@digigov/form/FieldArray"));
 
-var _i18n = require("@digigov/ui/app/i18n");
+var _MultiplicityField = _interopRequireDefault(require("@digigov/form/MultiplicityField"));
 
-var _excluded = ["required", "name", "component", "wrapper", "control", "type", "controlled", "enabled", "editable", "defaultValue", "label", "extra", "layout", "error", "register"],
-    _excluded2 = ["name", "children"];
+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; }
 
-function evaluateFieldWithConditions(field, variables) {
-  var newField = (0, _extends2["default"])({}, field);
-
-  if (variables) {
-    for (var key in variables) {
-      if (field.condition[key] && field.condition[key].is === variables[key]) {
-        var then = field.condition[key].then || {};
-
-        for (var attr in then) {
-          newField[attr] = then[attr];
-        }
-      } else if (field.condition[key]) {
-        var otherwise = field.condition[key]["else"] || {};
-
-        for (var _attr in otherwise) {
-          newField[_attr] = otherwise[_attr];
-        }
-      }
-    }
-  }
-
-  return newField;
-}
-
-var ChildFieldMemo = /*#__PURE__*/_react["default"].memo(function ChildField(_ref) {
-  var dependencies = _ref.dependencies,
-      field = _ref.field,
-      control = _ref.control,
-      register = _ref.register,
-      error = _ref.error;
-  var newField = evaluateFieldWithConditions(field, dependencies);
-  return /*#__PURE__*/_react["default"].createElement(FieldBase, (0, _extends2["default"])({}, newField, {
-    name: newField.key,
-    control: control,
-    register: register,
-    error: error
-  }));
-}, function (prev, next) {
-  if (!prev || !prev.dependencies) {
-    return false;
-  }
-
-  if (prev.error !== next.error) {
-    return false;
-  }
-
-  for (var dep in next.dependencies) {
-    if (next.dependencies[dep] !== prev.dependencies[dep]) {
-      return false;
-    }
-  }
-
-  return true;
-});
-
-var ConditionalField = function ConditionalField(_ref2) {
-  var control = _ref2.control,
-      field = _ref2.field,
-      register = _ref2.register,
-      error = _ref2.error;
-  var dependencyKeys = Object.keys(field.condition);
-  var variables = (0, _reactHookForm.useWatch)({
-    name: dependencyKeys,
-    control: control
-  });
-  return /*#__PURE__*/_react["default"].createElement(ChildFieldMemo, {
-    dependencies: variables,
-    field: field,
-    control: control,
-    register: register,
-    error: error
-  });
-};
-
-exports.ConditionalField = ConditionalField;
-var FIELD_COMPONENTS = {
-  text: {
-    component: _Input["default"]
-  },
-  string: {
-    component: _Input["default"]
-  },
-  file: {
-    wrapper: 'fieldset',
-    component: _FileInput["default"]
-  },
-  date: {
-    wrapper: 'fieldset',
-    controlled: true,
-    component: _DateInput["default"]
-  },
-  'choice:multiple': {
-    wrapper: 'fieldset',
-    controlled: true,
-    component: _Checkboxes["default"]
-  },
-  'choice:single': {
-    wrapper: 'fieldset',
-    controlled: false,
-    component: _Radio["default"]
-  }
-};
-var ALTERNATIVE_COMPONENTS = {
-  Select: {
-    component: _Select["default"],
-    controlled: false
-  }
-};
-
-var FieldContainer = function FieldContainer(_ref3) {
-  var name = _ref3.name,
-      wrapper = _ref3.wrapper,
-      label = _ref3.label,
-      children = _ref3.children,
-      error = _ref3.error;
-
-  var _useTranslation = (0, _i18n.useTranslation)(),
-      t = _useTranslation.t;
+var Field = function Field(_ref) {
+  var name = _ref.name,
+      children = _ref.children,
+      customField = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
 
-  if (wrapper === 'fieldset') {
-    return /*#__PURE__*/_react["default"].createElement(_Field["default"], {
-      error: !!error
-    }, /*#__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"], {
-      id: "".concat(name, "-error")
-    }, t((error === null || error === void 0 ? void 0 : error.message) || ''))), children));
-  } else {
-    return /*#__PURE__*/_react["default"].createElement(_Field["default"], {
-      error: !!error
-    }, /*#__PURE__*/_react["default"].createElement(_Label["default"], null, label && /*#__PURE__*/_react["default"].createElement(_Label2["default"], {
-      label: label
-    }), error && /*#__PURE__*/_react["default"].createElement(_ErrorMessage["default"], {
-      id: "".concat(name, "-error")
-    }, t((error === null || error === void 0 ? void 0 : error.message) || '')), children));
-  }
-};
-
-var FieldBase = function FieldBase(props) {
-  var required = props.required,
-      name = props.name,
-      Component = props.component,
-      wrapper = props.wrapper,
-      control = props.control,
-      type = props.type,
-      _props$controlled = props.controlled,
-      controlled = _props$controlled === void 0 ? false : _props$controlled,
-      _props$enabled = props.enabled,
-      enabled = _props$enabled === void 0 ? true : _props$enabled,
-      editable = props.editable,
-      defaultValue = props.defaultValue,
-      label = props.label,
-      _props$extra = props.extra,
-      extra = _props$extra === void 0 ? {} : _props$extra,
-      layout = props.layout,
-      error = props.error,
-      register = props.register,
-      componentProps = (0, _objectWithoutProperties2["default"])(props, _excluded);
-
-  if (!enabled) {
-    return null;
-  }
-
-  if (controlled) {
-    return /*#__PURE__*/_react["default"].createElement(FieldContainer, {
-      label: label,
-      layout: layout,
-      error: error,
-      wrapper: wrapper,
-      name: name
-    }, /*#__PURE__*/_react["default"].createElement(_reactHookForm.Controller, {
-      control: control,
-      name: name,
-      render: function render(_ref4) {
-        var onChange = _ref4.onChange,
-            onBlur = _ref4.onBlur,
-            value = _ref4.value;
-        return /*#__PURE__*/_react["default"].createElement(Component, (0, _extends2["default"])({
-          name: name,
-          onChange: onChange,
-          onBlur: onBlur,
-          value: value,
-          defaultValue: defaultValue,
-          extra: extra,
-          error: !!error,
-          type: type,
-          "aria-required": !!required,
-          "aria-describedby": error && "".concat(name, "-error"),
-          required: required,
-          disabled: editable === false
-        }, componentProps));
-      }
-    }));
-  }
-
-  return /*#__PURE__*/_react["default"].createElement(FieldContainer, {
-    label: label,
-    layout: layout,
-    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,
-    control: control,
-    error: !!error,
-    extra: extra,
-    type: type,
-    "aria-required": !!required,
-    "aria-describedby": error && "".concat(name, "-error"),
-    required: required,
-    disabled: editable === false
-  }, componentProps)) : /*#__PURE__*/_react["default"].createElement(Component, (0, _extends2["default"])({
-    name: name,
-    register: register,
-    control: control,
-    error: !!error,
-    extra: extra,
-    type: type,
-    "aria-required": !!required,
-    "aria-describedby": error && "".concat(name, "-error"),
-    required: required,
-    disabled: editable === false
-  }, componentProps)));
-};
-
-exports.FieldBase = FieldBase;
-
-var useField = function useField(name, customField) {
-  var _useContext = (0, _react.useContext)(_FormContext.FormContext),
-      fieldsMap = _useContext.fieldsMap,
-      control = _useContext.control,
-      register = _useContext.register,
-      errors = _useContext.errors,
-      registerField = _useContext.registerField,
-      componentRegistry = _useContext.componentRegistry;
-
-  (0, _react.useMemo)(function () {
-    return (customField === null || customField === void 0 ? void 0 : customField.type) && registerField((0, _extends2["default"])({}, customField, {
-      key: name
-    }));
-  }, [customField, name, registerField]);
-  return {
-    field: customField || fieldsMap[name],
-    control: control,
-    register: register,
-    componentRegistry: componentRegistry,
-    error: errors[name]
-  };
-};
-
-function calculateField(children, field, componentRegistry) {
-  var _field$extra;
-
-  var calculatedField = (0, _extends2["default"])({}, field);
-  var fieldComponentRegistry = (0, _extends2["default"])({}, FIELD_COMPONENTS, componentRegistry);
-
-  if (children) {
-    calculatedField.component = children;
-  } else if (typeof field.component === 'function') {// leave as is
-  } else if (!field.component && !field.type) {
-    var _fieldComponentRegist;
-
-    calculatedField.component = fieldComponentRegistry.string.component;
-    calculatedField.controlled = ((_fieldComponentRegist = fieldComponentRegistry.string) === null || _fieldComponentRegist === void 0 ? void 0 : _fieldComponentRegist.controlled) || false;
-  } else if (typeof (field === null || field === void 0 ? void 0 : (_field$extra = field.extra) === null || _field$extra === void 0 ? void 0 : _field$extra.component) === 'string' && ALTERNATIVE_COMPONENTS[field.extra.component]) {
-    var _ALTERNATIVE_COMPONEN;
-
-    calculatedField.controlled = ((_ALTERNATIVE_COMPONEN = ALTERNATIVE_COMPONENTS[field.extra.component]) === null || _ALTERNATIVE_COMPONEN === void 0 ? void 0 : _ALTERNATIVE_COMPONEN.controlled) || false;
-    calculatedField.component = ALTERNATIVE_COMPONENTS[field.extra.component].component;
-  } else if (!field.component && field.type && fieldComponentRegistry[field.type]) {
-    var _fieldComponentRegist2;
-
-    calculatedField.component = fieldComponentRegistry[field.type].component;
-    calculatedField.wrapper = fieldComponentRegistry[field.type].wrapper;
-    calculatedField.controlled = ((_fieldComponentRegist2 = fieldComponentRegistry[field.type]) === null || _fieldComponentRegist2 === void 0 ? void 0 : _fieldComponentRegist2.controlled) || false;
-  } else {
-    var _fieldComponentRegist3;
-
-    calculatedField.component = fieldComponentRegistry.string.component;
-    calculatedField.controlled = ((_fieldComponentRegist3 = fieldComponentRegistry.string) === null || _fieldComponentRegist3 === void 0 ? void 0 : _fieldComponentRegist3.controlled) || false;
-  }
-
-  return calculatedField;
-}
-
-var Field = function Field(_ref5) {
-  var name = _ref5.name,
-      children = _ref5.children,
-      customField = (0, _objectWithoutProperties2["default"])(_ref5, _excluded2);
-
-  var _useField = useField(name, customField !== null && customField !== void 0 && customField.type ? customField : null),
+  var _useField = (0, _utils.useField)(name, customField !== null && customField !== void 0 && customField.type ? customField : null),
       field = _useField.field,
       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 calculateField(children, field, componentRegistry);
+    return (0, _utils.calculateField)(children, field, componentRegistry);
   }, [field]);
 
   if (calculatedField.condition) {
-    return /*#__PURE__*/_react["default"].createElement(ConditionalField, {
+    return /*#__PURE__*/_react["default"].createElement(_FieldConditional["default"], {
       control: control,
       register: register,
       field: calculatedField,
@@ -365,7 +62,33 @@ var Field = function Field(_ref5) {
     });
   }
 
-  return /*#__PURE__*/_react["default"].createElement(FieldBase, (0, _extends2["default"])({}, calculatedField, {
+  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,
     register: register,