@ukhomeoffice/cop-react-form-renderer 2.9.1 → 2.10.0

package/dist/components/FormComponent/Container.test.js

@@ -1,7 +1,5 @@
 "use strict";
 
-function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
-
 var _react = require("@testing-library/react");
 
 var _userEvent = _interopRequireDefault(require("@testing-library/user-event"));
@@ -10,11 +8,13 @@ var _react2 = _interopRequireDefault(require("react"));
 
 var _models = require("../../models");
 
-var _FormComponent = _interopRequireWildcard(require("./FormComponent"));
+var _setupTests = require("../../setupTests");
+
+var _constants = require("../../utils/Meta/constants");
 
-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); }
+var _Container = require("./Container");
 
-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 _FormComponent = _interopRequireDefault(require("./FormComponent"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -36,7 +36,7 @@ describe('components.FormComponent.Container', function () {
   var TEXT_ID = 'text';
   var TEXT_VALUE = 'alpha';
   var NESTED_TEXT_VALUE = 'charlie';
-  var FORM_DATA = (_FORM_DATA = {}, _defineProperty(_FORM_DATA, ID, (_ID = {}, _defineProperty(_ID, TEXT_ID, TEXT_VALUE), _defineProperty(_ID, NESTED_ID, _defineProperty({}, TEXT_ID, NESTED_TEXT_VALUE)), _ID)), _defineProperty(_FORM_DATA, _FormComponent.META_PROPERTY, _defineProperty({}, _FormComponent.META_DOCUMENTS_PROPERTY, [{
+  var FORM_DATA = (_FORM_DATA = {}, _defineProperty(_FORM_DATA, ID, (_ID = {}, _defineProperty(_ID, TEXT_ID, TEXT_VALUE), _defineProperty(_ID, NESTED_ID, _defineProperty({}, TEXT_ID, NESTED_TEXT_VALUE)), _ID)), _defineProperty(_FORM_DATA, _constants.META_PROPERTY, _defineProperty({}, _constants.META_DOCUMENTS_PROPERTY, [{
     field: 'epsilon.zeta',
     name: 'ez.jpg',
     type: 'image/jpg',
@@ -51,7 +51,7 @@ describe('components.FormComponent.Container', function () {
     hint: 'Text hint'
   };
   it('should render a container component appropriately', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee() {
-    var CONTAINER, _render, container, c, formGroup, label, hint, input;
+    var CONTAINER, _renderWithValidation, container, c, formGroup, label, hint, input;
 
     return regeneratorRuntime.wrap(function _callee$(_context) {
       while (1) {
@@ -63,15 +63,15 @@ describe('components.FormComponent.Container', function () {
               type: _models.ComponentTypes.CONTAINER,
               components: [TEXT_COMPONENT]
             };
-            _render = (0, _react.render)( /*#__PURE__*/_react2.default.createElement(_FormComponent.default, {
+            _renderWithValidation = (0, _setupTests.renderWithValidation)( /*#__PURE__*/_react2.default.createElement(_FormComponent.default, {
               component: CONTAINER,
               value: FORM_DATA[ID],
               formData: FORM_DATA
-            })), container = _render.container; // Check the container itself.
+            })), container = _renderWithValidation.container; // Check the container itself.
 
             c = container.childNodes[0];
             expect(c.tagName).toEqual('DIV');
-            expect(c.classList).toContain(_FormComponent.DEFAULT_CONTAINER_CLASS); // And now check the single text component within it.
+            expect(c.classList).toContain(_Container.DEFAULT_CLASS); // And now check the single text component within it.
 
             formGroup = c.childNodes[0];
             expect(formGroup.tagName).toEqual('DIV');
@@ -99,7 +99,7 @@ describe('components.FormComponent.Container', function () {
     }, _callee);
   })));
   it('should render a nested container component appropriately', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee2() {
-    var CONTAINER, _render2, container, c, nested, formGroup, label, hint, input;
+    var CONTAINER, _renderWithValidation2, container, c, nested, formGroup, label, hint, input;
 
     return regeneratorRuntime.wrap(function _callee2$(_context2) {
       while (1) {
@@ -116,19 +116,19 @@ describe('components.FormComponent.Container', function () {
                 components: [TEXT_COMPONENT]
               }]
             };
-            _render2 = (0, _react.render)( /*#__PURE__*/_react2.default.createElement(_FormComponent.default, {
+            _renderWithValidation2 = (0, _setupTests.renderWithValidation)( /*#__PURE__*/_react2.default.createElement(_FormComponent.default, {
               component: CONTAINER,
               value: FORM_DATA[ID],
               formData: FORM_DATA
-            })), container = _render2.container; // Check the container itself.
+            })), container = _renderWithValidation2.container; // Check the container itself.
 
             c = container.childNodes[0];
             expect(c.tagName).toEqual('DIV');
-            expect(c.classList).toContain(_FormComponent.DEFAULT_CONTAINER_CLASS); // Check the nested container.
+            expect(c.classList).toContain(_Container.DEFAULT_CLASS); // Check the nested container.
 
             nested = c.childNodes[0];
             expect(nested.tagName).toEqual('DIV');
-            expect(nested.classList).toContain(_FormComponent.DEFAULT_CONTAINER_CLASS); // And now check the single text component within the nested container.
+            expect(nested.classList).toContain(_Container.DEFAULT_CLASS); // And now check the single text component within the nested container.
 
             formGroup = nested.childNodes[0];
             expect(formGroup.tagName).toEqual('DIV');
@@ -156,7 +156,7 @@ describe('components.FormComponent.Container', function () {
     }, _callee2);
   })));
   it('should handle a change to a component appropriately', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee3() {
-    var ON_CHANGE_EVENTS, ON_CHANGE, CONTAINER, _render3, container, c, formGroup, input, NEW_TEXT_VALUE, EVENT;
+    var ON_CHANGE_EVENTS, ON_CHANGE, CONTAINER, _renderWithValidation3, container, c, formGroup, input, NEW_TEXT_VALUE, EVENT;
 
     return regeneratorRuntime.wrap(function _callee3$(_context3) {
       while (1) {
@@ -179,12 +179,12 @@ describe('components.FormComponent.Container', function () {
                 label: 'Text component'
               }]
             };
-            _render3 = (0, _react.render)( /*#__PURE__*/_react2.default.createElement(_FormComponent.default, {
+            _renderWithValidation3 = (0, _setupTests.renderWithValidation)( /*#__PURE__*/_react2.default.createElement(_FormComponent.default, {
               component: CONTAINER,
               value: FORM_DATA[ID],
               formData: FORM_DATA,
               onChange: ON_CHANGE
-            })), container = _render3.container; // Get hold of the text input.
+            })), container = _renderWithValidation3.container; // Get hold of the text input.
 
             c = container.childNodes[0];
             formGroup = c.childNodes[0];
@@ -212,7 +212,7 @@ describe('components.FormComponent.Container', function () {
     }, _callee3);
   })));
   it('should handle a change to a file type component appropriately', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee4() {
-    var FILE_ID, ON_CHANGE_EVENTS, ON_CHANGE, CONTAINER, _render4, container, c, formGroup, input, FILE_EXTENSION, FILE_NAME, FILE_TYPE, str, blob, FILE, containerChangeValue, metaChangeValue;
+    var FILE_ID, ON_CHANGE_EVENTS, ON_CHANGE, CONTAINER, _renderWithValidation4, container, c, formGroup, input, FILE_EXTENSION, FILE_NAME, FILE_TYPE, str, blob, FILE, containerChangeValue, metaChangeValue;
 
     return regeneratorRuntime.wrap(function _callee4$(_context4) {
       while (1) {
@@ -237,12 +237,12 @@ describe('components.FormComponent.Container', function () {
                 label: 'File component'
               }]
             };
-            _render4 = (0, _react.render)( /*#__PURE__*/_react2.default.createElement(_FormComponent.default, {
+            _renderWithValidation4 = (0, _setupTests.renderWithValidation)( /*#__PURE__*/_react2.default.createElement(_FormComponent.default, {
               component: CONTAINER,
               value: FORM_DATA[ID],
               formData: FORM_DATA,
               onChange: ON_CHANGE
-            })), container = _render4.container; // Get hold of the text input.
+            })), container = _renderWithValidation4.container; // Get hold of the text input.
 
             c = container.childNodes[0];
             formGroup = c.childNodes[0];
@@ -264,7 +264,7 @@ describe('components.FormComponent.Container', function () {
             expect(ON_CHANGE_EVENTS.length).toEqual(2); // One for the file, another for the meta.
 
             expect(ON_CHANGE_EVENTS[0].target.name).toEqual(ID);
-            expect(ON_CHANGE_EVENTS[1].target.name).toEqual(_FormComponent.META_PROPERTY);
+            expect(ON_CHANGE_EVENTS[1].target.name).toEqual(_constants.META_PROPERTY);
             containerChangeValue = JSON.parse(JSON.stringify(ON_CHANGE_EVENTS[0].target.value));
             metaChangeValue = JSON.parse(JSON.stringify(ON_CHANGE_EVENTS[1].target.value));
             expect(metaChangeValue.documents.length).toEqual(2); // Existing one, plus this new one.
@@ -281,7 +281,7 @@ describe('components.FormComponent.Container', function () {
     }, _callee4);
   })));
   it('should handle a null value appropriately', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee5() {
-    var CONTAINER, _render5, container, c, formGroup, label, hint, input;
+    var CONTAINER, _renderWithValidation5, container, c, formGroup, label, hint, input;
 
     return regeneratorRuntime.wrap(function _callee5$(_context5) {
       while (1) {
@@ -293,13 +293,13 @@ describe('components.FormComponent.Container', function () {
               type: _models.ComponentTypes.CONTAINER,
               components: [TEXT_COMPONENT]
             };
-            _render5 = (0, _react.render)( /*#__PURE__*/_react2.default.createElement(_FormComponent.default, {
+            _renderWithValidation5 = (0, _setupTests.renderWithValidation)( /*#__PURE__*/_react2.default.createElement(_FormComponent.default, {
               component: CONTAINER
-            })), container = _render5.container; // Check the container itself.
+            })), container = _renderWithValidation5.container; // Check the container itself.
 
             c = container.childNodes[0];
             expect(c.tagName).toEqual('DIV');
-            expect(c.classList).toContain(_FormComponent.DEFAULT_CONTAINER_CLASS); // And now check the single text component within it.
+            expect(c.classList).toContain(_Container.DEFAULT_CLASS); // And now check the single text component within it.
 
             formGroup = c.childNodes[0];
             expect(formGroup.tagName).toEqual('DIV');

package/dist/components/FormComponent/FormComponent.js

@@ -5,7 +5,7 @@ function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "functi
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.META_PROPERTY = exports.META_DOCUMENTS_PROPERTY = exports.DEFAULT_CONTAINER_CLASS = void 0;
+exports.default = void 0;
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
@@ -17,8 +17,13 @@ var _models = require("../../models");
 
 var _utils = _interopRequireDefault(require("../../utils"));
 
-var _excluded = ["container", "value", "formData", "onChange", "wrap"],
-    _excluded2 = ["component", "value", "formData", "wrap", "onChange"];
+var _Collection = _interopRequireDefault(require("./Collection"));
+
+var _Container = _interopRequireDefault(require("./Container"));
+
+var _helpers = require("./helpers");
+
+var _excluded = ["component", "value", "formData", "wrap", "onChange"];
 
 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); }
 
@@ -26,6 +31,14 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
 
 function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
@@ -38,108 +51,23 @@ function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Sy
 
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
-
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 
-var META_PROPERTY = 'meta';
-exports.META_PROPERTY = META_PROPERTY;
-var META_DOCUMENTS_PROPERTY = 'documents';
-exports.META_DOCUMENTS_PROPERTY = META_DOCUMENTS_PROPERTY;
-var DEFAULT_CONTAINER_CLASS = 'hods-form-container';
-exports.DEFAULT_CONTAINER_CLASS = DEFAULT_CONTAINER_CLASS;
-
-var Container = function Container(_ref) {
-  var container = _ref.container,
+var FormComponent = function FormComponent(_ref) {
+  var component = _ref.component,
       value = _ref.value,
       formData = _ref.formData,
-      onChange = _ref.onChange,
       wrap = _ref.wrap,
+      onChange = _ref.onChange,
       attrs = _objectWithoutProperties(_ref, _excluded);
 
-  var onComponentChange = function onComponentChange(_ref2) {
-    var target = _ref2.target;
-
-    if (typeof onChange === 'function') {
-      if (target.name === META_PROPERTY) {
-        onChange({
-          target: target
-        });
-      } else {
-        var val = _objectSpread(_objectSpread({}, value), {}, _defineProperty({}, target.name, target.value));
-
-        onChange({
-          target: {
-            name: container.fieldId,
-            value: val
-          }
-        });
-      }
-    }
-  };
-
-  var shouldShow = function shouldShow(options) {
-    if (options.type === _models.ComponentTypes.CONTAINER) {
-      return _utils.default.Container.show(options, formData);
-    }
-
-    return _utils.default.Component.show(options, formData);
-  };
-
-  return /*#__PURE__*/_react.default.createElement("div", _extends({}, attrs, {
-    className: DEFAULT_CONTAINER_CLASS,
-    id: container.id
-  }), container.components && container.components.filter(shouldShow).map(function (component, index) {
-    var defaultValue = component.type === _models.ComponentTypes.FILE ? {} : '';
-    var val = value ? value[component.fieldId] : defaultValue;
-    return /*#__PURE__*/_react.default.createElement(FormComponent, {
-      key: index,
-      component: component,
-      formData: formData,
-      value: val || defaultValue,
-      wrap: wrap,
-      onChange: onComponentChange
-    });
-  }));
-};
-
-Container.propTypes = {
-  container: _propTypes.default.shape({
-    id: _propTypes.default.string.isRequired,
-    fieldId: _propTypes.default.string.isRequired,
-    components: _propTypes.default.arrayOf(_propTypes.default.shape({
-      fieldId: _propTypes.default.string,
-      type: _propTypes.default.string
-    }))
-  }).isRequired,
-  value: _propTypes.default.any,
-  formData: _propTypes.default.any,
-  wrap: _propTypes.default.bool,
-  onChange: _propTypes.default.func
-};
-Container.defaultProps = {
-  wrap: true
-};
-
-var FormComponent = function FormComponent(_ref3) {
-  var component = _ref3.component,
-      value = _ref3.value,
-      formData = _ref3.formData,
-      wrap = _ref3.wrap,
-      onChange = _ref3.onChange,
-      attrs = _objectWithoutProperties(_ref3, _excluded2);
-
   var _useHooks = (0, _hooks.useHooks)(),
       hooks = _useHooks.hooks;
 
+  var validation = (0, _hooks.useValidation)();
+
   var _useRefData = (0, _hooks.useRefData)(component),
       data = _useRefData.data,
       status = _useRefData.status;
@@ -155,60 +83,68 @@ var FormComponent = function FormComponent(_ref3) {
     }
   }, [component, data, status]);
 
-  var changeMetaDocuments = function changeMetaDocuments(document) {
-    var _formData$META_PROPER;
-
-    var documents = (((_formData$META_PROPER = formData[META_PROPERTY]) === null || _formData$META_PROPER === void 0 ? void 0 : _formData$META_PROPER.documents) || []).filter(function (d) {
-      return d.field !== component.full_path;
-    });
+  var onComponentChange = function onComponentChange(_ref2) {
+    var target = _ref2.target;
 
-    if (document) {
-      documents.push(_objectSpread(_objectSpread({}, document), {}, {
-        field: component.full_path
-      }));
+    if (typeof onChange === 'function') {
+      onChange({
+        target: target
+      });
+      return true;
     }
 
+    return false;
+  };
+
+  if (component.type === _models.ComponentTypes.CONTAINER) {
+    return /*#__PURE__*/_react.default.createElement(_Container.default, _extends({}, attrs, {
+      container: component,
+      wrap: wrap,
+      onChange: onComponentChange,
+      value: value || _utils.default.Component.defaultValue(component),
+      formData: formData
+    }));
+  }
+
+  if (component.type === _models.ComponentTypes.COLLECTION) {
+    return /*#__PURE__*/_react.default.createElement(_Collection.default, _extends({}, attrs, {
+      config: component,
+      wrap: wrap,
+      onChange: onComponentChange,
+      value: value || _utils.default.Component.defaultValue(component),
+      formData: formData
+    }));
+  }
+
+  var changeMetaDocuments = function changeMetaDocuments(document) {
     onChange({
       target: {
-        name: META_PROPERTY,
-        value: _objectSpread(_objectSpread({}, formData[META_PROPERTY]), {}, {
-          documents: documents
-        })
+        name: _utils.default.Meta.name,
+        value: _utils.default.Meta.documents.setForField(document, formData, component.full_path)
       }
     });
   };
 
-  var onComponentChange = function onComponentChange(_ref4) {
-    var target = _ref4.target;
-
-    if (typeof onChange === 'function') {
-      onChange({
-        target: target
-      });
+  var onComponentChangeExtended = function onComponentChangeExtended(_ref3) {
+    var target = _ref3.target;
 
+    if (onComponentChange({
+      target: target
+    })) {
       if (component.type === _models.ComponentTypes.FILE) {
         changeMetaDocuments(target.value);
       }
     }
   };
 
-  if (component.type === _models.ComponentTypes.CONTAINER) {
-    return /*#__PURE__*/_react.default.createElement(Container, {
-      container: component,
-      wrap: wrap,
-      onChange: onComponentChange,
-      value: value,
-      formData: formData
-    });
-  }
-
-  var defaultValue = component.type === _models.ComponentTypes.FILE ? {} : '';
-  return _utils.default.Component.get(_objectSpread(_objectSpread(_objectSpread({}, attrs), component), {}, {
+  return _utils.default.Component.get(_objectSpread(_objectSpread(_objectSpread(_objectSpread({}, attrs), component), {}, {
+    id: component.full_path || component.id
+  }, (0, _helpers.getComponentError)(component, validation === null || validation === void 0 ? void 0 : validation.errors)), {}, {
     label: component.label || '',
     hint: component.hint || '',
     options: options,
-    value: value || defaultValue,
-    onChange: onComponentChange,
+    value: value || _utils.default.Component.defaultValue(component),
+    onChange: onComponentChangeExtended,
     formData: formData
   }), wrap, hooks.onGetComponent);
 };

package/dist/components/FormComponent/FormComponent.test.js

@@ -1,11 +1,11 @@
 "use strict";
 
-var _react = require("@testing-library/react");
-
-var _react2 = _interopRequireDefault(require("react"));
+var _react = _interopRequireDefault(require("react"));
 
 var _useHooks = require("../../hooks/useHooks");
 
+var _setupTests = require("../../setupTests");
+
 var _FormComponent = _interopRequireDefault(require("./FormComponent"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -20,7 +20,7 @@ describe('components', function () {
       (0, _useHooks.resetHooks)();
     });
     it('should render a text component appropriately', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee() {
-      var ID, VALUE, COMPONENT, ON_CHANGE, _render, container, formGroup, label, hint, input;
+      var ID, VALUE, COMPONENT, ON_CHANGE, _renderWithValidation, container, formGroup, label, hint, input;
 
       return regeneratorRuntime.wrap(function _callee$(_context) {
         while (1) {
@@ -38,12 +38,12 @@ describe('components', function () {
 
               ON_CHANGE = function ON_CHANGE() {};
 
-              _render = (0, _react.render)( /*#__PURE__*/_react2.default.createElement(_FormComponent.default, {
+              _renderWithValidation = (0, _setupTests.renderWithValidation)( /*#__PURE__*/_react.default.createElement(_FormComponent.default, {
                 "data-testid": ID,
                 component: COMPONENT,
                 value: VALUE,
                 onChange: ON_CHANGE
-              })), container = _render.container; // text components are wrapper in a FormGroup by default.
+              })), container = _renderWithValidation.container; // text components are wrapper in a FormGroup by default.
 
               formGroup = container.childNodes[0];
               expect(formGroup.tagName).toEqual('DIV');
@@ -71,7 +71,7 @@ describe('components', function () {
       }, _callee);
     })));
     it('should render a text component appropriately with wrap turned off', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee2() {
-      var ID, VALUE, COMPONENT, ON_CHANGE, _render2, container, input;
+      var ID, VALUE, COMPONENT, ON_CHANGE, _renderWithValidation2, container, input;
 
       return regeneratorRuntime.wrap(function _callee2$(_context2) {
         while (1) {
@@ -89,13 +89,13 @@ describe('components', function () {
 
               ON_CHANGE = function ON_CHANGE() {};
 
-              _render2 = (0, _react.render)( /*#__PURE__*/_react2.default.createElement(_FormComponent.default, {
+              _renderWithValidation2 = (0, _setupTests.renderWithValidation)( /*#__PURE__*/_react.default.createElement(_FormComponent.default, {
                 "data-testid": ID,
                 component: COMPONENT,
                 wrap: false,
                 value: VALUE,
                 onChange: ON_CHANGE
-              })), container = _render2.container; // With wrap = false, there should be no form group.
+              })), container = _renderWithValidation2.container; // With wrap = false, there should be no form group.
 
               input = container.childNodes[0];
               expect(input.tagName).toEqual('INPUT');
@@ -111,7 +111,7 @@ describe('components', function () {
       }, _callee2);
     })));
     it('should render an html component appropriately', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee3() {
-      var ID, COMPONENT, _render3, container, p;
+      var ID, COMPONENT, _renderWithValidation3, container, p;
 
       return regeneratorRuntime.wrap(function _callee3$(_context3) {
         while (1) {
@@ -123,10 +123,10 @@ describe('components', function () {
                 tagName: 'p',
                 content: 'HTML content'
               };
-              _render3 = (0, _react.render)( /*#__PURE__*/_react2.default.createElement(_FormComponent.default, {
+              _renderWithValidation3 = (0, _setupTests.renderWithValidation)( /*#__PURE__*/_react.default.createElement(_FormComponent.default, {
                 "data-testid": ID,
                 component: COMPONENT
-              })), container = _render3.container;
+              })), container = _renderWithValidation3.container;
               p = container.childNodes[0];
               expect(p.tagName).toEqual('P');
               expect(p.textContent).toEqual(COMPONENT.content);
@@ -139,14 +139,14 @@ describe('components', function () {
       }, _callee3);
     })));
     it('should render an overridden html component appropriately', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee4() {
-      var ID, COMPONENT, _render4, container, div;
+      var ID, COMPONENT, _renderWithValidation4, container, div;
 
       return regeneratorRuntime.wrap(function _callee4$(_context4) {
         while (1) {
           switch (_context4.prev = _context4.next) {
             case 0:
               (0, _useHooks.addHook)('onGetComponent', function (config, wrap) {
-                return /*#__PURE__*/_react2.default.createElement("div", null, "".concat(config.type, " | ").concat(config.tagName, " | ").concat(config.content, " | ").concat(wrap));
+                return /*#__PURE__*/_react.default.createElement("div", null, "".concat(config.type, " | ").concat(config.tagName, " | ").concat(config.content, " | ").concat(wrap));
               });
               ID = 'component';
               COMPONENT = {
@@ -154,10 +154,10 @@ describe('components', function () {
                 tagName: 'p',
                 content: 'HTML content'
               };
-              _render4 = (0, _react.render)( /*#__PURE__*/_react2.default.createElement(_FormComponent.default, {
+              _renderWithValidation4 = (0, _setupTests.renderWithValidation)( /*#__PURE__*/_react.default.createElement(_FormComponent.default, {
                 "data-testid": ID,
                 component: COMPONENT
-              })), container = _render4.container;
+              })), container = _renderWithValidation4.container;
               div = container.childNodes[0];
               expect(div.tagName).toEqual('DIV');
               expect(div.textContent).toEqual("".concat(COMPONENT.type, " | ").concat(COMPONENT.tagName, " | ").concat(COMPONENT.content, " | true"));
@@ -170,7 +170,7 @@ describe('components', function () {
       }, _callee4);
     })));
     it('should render the correct html component when the override returns null', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee5() {
-      var ID, COMPONENT, _render5, container, p;
+      var ID, COMPONENT, _renderWithValidation5, container, p;
 
       return regeneratorRuntime.wrap(function _callee5$(_context5) {
         while (1) {
@@ -185,10 +185,10 @@ describe('components', function () {
                 tagName: 'p',
                 content: 'HTML content'
               };
-              _render5 = (0, _react.render)( /*#__PURE__*/_react2.default.createElement(_FormComponent.default, {
+              _renderWithValidation5 = (0, _setupTests.renderWithValidation)( /*#__PURE__*/_react.default.createElement(_FormComponent.default, {
                 "data-testid": ID,
                 component: COMPONENT
-              })), container = _render5.container;
+              })), container = _renderWithValidation5.container;
               p = container.childNodes[0];
               expect(p.tagName).toEqual('P');
               expect(p.textContent).toEqual(COMPONENT.content);

package/dist/components/FormComponent/helpers/getComponentError.js

@@ -0,0 +1,31 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var getComponentError = function getComponentError(component, errors) {
+  if (Array.isArray(errors)) {
+    var error = errors.find(function (err) {
+      return err.id === (component.full_path || component.id);
+    });
+
+    if (error) {
+      var props = {
+        error: error.error
+      };
+
+      if (error.properties) {
+        props.propsInError = error.properties;
+      }
+
+      return props;
+    }
+  }
+
+  return undefined;
+};
+
+var _default = getComponentError;
+exports.default = _default;

package/dist/components/FormComponent/helpers/getComponentError.test.js

@@ -0,0 +1,52 @@
+"use strict";
+
+var _getComponentError = _interopRequireDefault(require("./getComponentError"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+describe('components.FormComponent.helpers.getComponentError', function () {
+  var ALPHA = {
+    id: 'alpha'
+  };
+  var BETA = {
+    id: 'beta',
+    full_path: 'beta'
+  };
+  var ALPHA_ERROR = {
+    id: ALPHA.id,
+    error: 'Alpha is required'
+  };
+  var BETA_ERROR = {
+    id: BETA.id,
+    error: 'Year is required',
+    properties: {
+      year: true
+    }
+  };
+  it('should return undefined if the errors array is undefined', function () {
+    expect((0, _getComponentError.default)(ALPHA, undefined)).toBeUndefined();
+  });
+  it('should return undefined if the errors array is null', function () {
+    expect((0, _getComponentError.default)(ALPHA, null)).toBeUndefined();
+  });
+  it('should return undefined if the errors array is empty', function () {
+    expect((0, _getComponentError.default)(ALPHA, [])).toBeUndefined();
+  });
+  it('should return undefined if the errors array does not contain an error for the component', function () {
+    var ERRORS = [BETA_ERROR];
+    expect((0, _getComponentError.default)(ALPHA, ERRORS)).toBeUndefined();
+  });
+  it('should return an appropriate response if the errors array contains an error for the component', function () {
+    var ERRORS = [ALPHA_ERROR];
+    expect((0, _getComponentError.default)(ALPHA, ERRORS)).toEqual({
+      error: ALPHA_ERROR.error
+    });
+  });
+  it('should return an appropriate response if the errors array contains an error with properties for the component', function () {
+    var ERRORS = [BETA_ERROR];
+    expect((0, _getComponentError.default)(BETA, ERRORS)).toEqual({
+      error: BETA_ERROR.error,
+      propsInError: BETA_ERROR.properties
+    });
+  });
+});