@ukhomeoffice/cop-react-form-renderer 4.13.1-alpha → 4.14.3

package/dist/components/CollectionPage/CollectionPage.js

@@ -120,6 +120,7 @@ var CollectionPage = function CollectionPage(_ref) {
     }),
     onAction: onInnerPageAction,
     onWrapperChange: onInnerPageChange,
+    onTopLevelChange: onPageChange,
     classBlock: classBlock,
     classModifiers: classModifiers,
     className: className

package/dist/components/FormComponent/Collection.js

@@ -57,6 +57,7 @@ var Collection = function Collection(_ref) {
       _value = _ref.value,
       formData = _ref.formData,
       onChange = _ref.onChange,
+      onTopLevelChange = _ref.onTopLevelChange,
       wrap = _ref.wrap;
 
   var _useState = (0, _react.useState)(_value),
@@ -195,6 +196,7 @@ var Collection = function Collection(_ref) {
       value: item,
       formData: formData,
       onChange: onCollectionChange,
+      onTopLevelChange: onTopLevelChange,
       wrap: wrap
     }));
   }), !config.disableAddAndRemove && /*#__PURE__*/_react.default.createElement(_copReactComponents.ButtonGroup, null, /*#__PURE__*/_react.default.createElement(_copReactComponents.Button, {

package/dist/components/FormComponent/Container.js

@@ -15,7 +15,7 @@ var _utils = _interopRequireDefault(require("../../utils"));
 
 var _FormComponent = _interopRequireDefault(require("./FormComponent"));
 
-var _excluded = ["container", "value", "formData", "onChange", "wrap"];
+var _excluded = ["container", "value", "formData", "onChange", "wrap", "onTopLevelChange"];
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -40,6 +40,7 @@ var Container = function Container(_ref) {
       formData = _ref.formData,
       onChange = _ref.onChange,
       wrap = _ref.wrap,
+      onTopLevelChange = _ref.onTopLevelChange,
       attrs = _objectWithoutProperties(_ref, _excluded);
 
   var onComponentChange = function onComponentChange(_ref2) {
@@ -88,7 +89,8 @@ var Container = function Container(_ref) {
       formData: formData,
       value: val || defaultValue,
       wrap: wrap,
-      onChange: onComponentChange
+      onChange: onComponentChange,
+      onTopLevelChange: onTopLevelChange
     }));
   }));
 };

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

@@ -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, _renderWithValidation4, container, c, formGroup, input, FILE_EXTENSION, FILE_NAME, FILE_TYPE, str, blob, FILE, containerChangeValue, metaChangeValue;
+    var FILE_ID, ON_CHANGE_EVENTS, ON_CHANGE, ON_TOP_LEVEL_CHANGE_EVENTS, ON_TOP_LEVEL_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) {
@@ -225,6 +225,12 @@ describe('components.FormComponent.Container', function () {
               ON_CHANGE_EVENTS.push(e);
             };
 
+            ON_TOP_LEVEL_CHANGE_EVENTS = [];
+
+            ON_TOP_LEVEL_CHANGE = function ON_TOP_LEVEL_CHANGE(e) {
+              ON_TOP_LEVEL_CHANGE_EVENTS.push(e);
+            };
+
             CONTAINER = {
               id: ID,
               fieldId: ID,
@@ -241,7 +247,8 @@ describe('components.FormComponent.Container', function () {
               component: CONTAINER,
               value: FORM_DATA[ID],
               formData: FORM_DATA,
-              onChange: ON_CHANGE
+              onChange: ON_CHANGE,
+              onTopLevelChange: ON_TOP_LEVEL_CHANGE
             })), container = _renderWithValidation4.container; // Get hold of the text input.
 
             c = container.childNodes[0];
@@ -258,22 +265,25 @@ describe('components.FormComponent.Container', function () {
               type: FILE_TYPE
             });
 
-            _userEvent.default.upload(input, FILE); // And confirm the formData has been changed.
+            _userEvent.default.upload(input, FILE); // Expect one call for the regular onChange event, this can change
+            // depending on whether the Container is on a normal page or regular page.
 
 
-            expect(ON_CHANGE_EVENTS.length).toEqual(2); // One for the file, another for the meta.
+            expect(ON_CHANGE_EVENTS.length).toEqual(1);
+            expect(ON_CHANGE_EVENTS[0].target.name).toEqual(ID); // Expect one call for changing the meta data at top level formData.
+            // Meta changes should occur at top-level regardless of where the component is.
 
-            expect(ON_CHANGE_EVENTS[0].target.name).toEqual(ID);
-            expect(ON_CHANGE_EVENTS[1].target.name).toEqual(_constants.META_PROPERTY);
+            expect(ON_TOP_LEVEL_CHANGE_EVENTS.length).toEqual(1);
+            expect(ON_TOP_LEVEL_CHANGE_EVENTS[0].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));
+            metaChangeValue = JSON.parse(JSON.stringify(ON_TOP_LEVEL_CHANGE_EVENTS[0].target.value));
             expect(metaChangeValue.documents.length).toEqual(2); // Existing one, plus this new one.
 
             expect(metaChangeValue.documents[1]).toMatchObject(_objectSpread(_objectSpread({}, containerChangeValue[FILE_ID]), {}, {
               field: "".concat(ID, ".").concat(FILE_ID)
             }));
 
-          case 22:
+          case 25:
           case "end":
             return _context4.stop();
         }

package/dist/components/FormComponent/FormComponent.js

@@ -25,7 +25,7 @@ var _Container = _interopRequireDefault(require("./Container"));
 
 var _helpers = require("./helpers");
 
-var _excluded = ["component", "value", "formData", "wrap", "onChange"];
+var _excluded = ["component", "value", "formData", "wrap", "onChange", "onTopLevelChange"];
 
 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); }
 
@@ -63,6 +63,7 @@ var FormComponent = function FormComponent(_ref) {
       formData = _ref.formData,
       wrap = _ref.wrap,
       onChange = _ref.onChange,
+      onTopLevelChange = _ref.onTopLevelChange,
       attrs = _objectWithoutProperties(_ref, _excluded);
 
   var _useHooks = (0, _hooks.useHooks)(),
@@ -103,6 +104,7 @@ var FormComponent = function FormComponent(_ref) {
       container: component,
       wrap: wrap,
       onChange: onComponentChange,
+      onTopLevelChange: onTopLevelChange,
       value: value || _utils.default.Component.defaultValue(component),
       formData: formData
     }));
@@ -119,13 +121,14 @@ var FormComponent = function FormComponent(_ref) {
       config: component,
       wrap: wrap,
       onChange: onComponentChange,
+      onTopLevelChange: onTopLevelChange,
       value: value || _utils.default.Component.defaultValue(component),
       formData: formData
     }));
   }
 
   var changeMetaDocuments = function changeMetaDocuments(document) {
-    onChange({
+    onTopLevelChange({
       target: {
         name: _utils.default.Meta.name,
         value: _utils.default.Meta.documents.setForField(document, formData, component.full_path)
@@ -174,7 +177,8 @@ FormComponent.propTypes = {
   value: _propTypes.default.any,
   formData: _propTypes.default.any,
   wrap: _propTypes.default.bool,
-  onChange: _propTypes.default.func
+  onChange: _propTypes.default.func,
+  onTopLevelChange: _propTypes.default.func
 };
 FormComponent.defaultProps = {
   wrap: true

package/dist/components/FormPage/FormPage.js

@@ -56,6 +56,7 @@ var FormPage = function FormPage(_ref) {
   var page = _ref.page,
       _onAction = _ref.onAction,
       onWrapperChange = _ref.onWrapperChange,
+      onTopLevelChange = _ref.onTopLevelChange,
       classBlock = _ref.classBlock,
       classModifiers = _ref.classModifiers,
       className = _ref.className;
@@ -102,6 +103,7 @@ var FormPage = function FormPage(_ref) {
       key: index,
       component: component,
       onChange: onWrapperChange || onPageChange,
+      onTopLevelChange: onTopLevelChange || onPageChange,
       value: page.formData[component.fieldId] || patch[component.fieldId],
       formData: page.formData
     });

package/dist/utils/CheckYourAnswers/getCYARowsForCollectionPage.js

@@ -7,6 +7,8 @@ exports.default = void 0;
 
 var _copReactComponents = require("@ukhomeoffice/cop-react-components");
 
+var _elevateNestedComponents = _interopRequireDefault(require("../Component/elevateNestedComponents"));
+
 var _models = require("../../models");
 
 var _getCYARowsForContainer = _interopRequireDefault(require("./getCYARowsForContainer"));
@@ -24,13 +26,14 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 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; }
 
 var getContainerForPage = function getContainerForPage(page, item, labelCount, full_path) {
+  var allComponents = (0, _elevateNestedComponents.default)(page.components, item);
   return {
     id: item.id,
     fieldId: item.id,
     type: _models.ComponentTypes.CONTAINER,
     required: true,
     full_path: full_path,
-    components: page.components.map(function (component) {
+    components: allComponents.map(function (component) {
       return _objectSpread(_objectSpread({}, component), {}, {
         label: _copReactComponents.Utils.interpolateString(component.label, _objectSpread(_objectSpread({}, item), {}, {
           index: labelCount

package/dist/utils/CheckYourAnswers/getCYARowsForPage.js

@@ -5,6 +5,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
+var _elevateNestedComponents = _interopRequireDefault(require("../Component/elevateNestedComponents"));
+
 var _models = require("../../models");
 
 var _FormPage = _interopRequireDefault(require("../FormPage"));
@@ -41,7 +43,8 @@ var getCYARowsForPage = function getCYARowsForPage(page, onAction) {
       return (0, _getCYARowsForCollectionPage.default)(page, onAction);
     }
 
-    var rows = page.components.filter(function (c) {
+    var allComponents = (0, _elevateNestedComponents.default)(page.components, page.formData);
+    var rows = allComponents.filter(function (c) {
       return (0, _showComponentCYA.default)(c, page.formData);
     }).flatMap(function (component) {
       switch (component.type) {

package/dist/utils/Component/elevateNestedComponents.js

@@ -0,0 +1,52 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+/**
+ * Iterates over an array of components and brings any nested 
+ * components that should be visible into the top level array.
+ * The values provided in data are used to determine if any
+ * nested components should be visible.
+ * 
+ * Given this structure in the components array:
+ *  - Radios
+ *    - Radio Option 1 (Not selected)
+ *      - Nested 1
+ *      - Nested 2
+ *    - Radio Option 2 (Selected)
+ *      - Nested 3
+ *  - Text Input
+ * 
+ * The result will be the following array:
+ *  - Radios
+ *  - Nested 3
+ *  - Text Input
+ * 
+ * @param {*} components An array of components.
+ * @param {*} data A chunk of form data used to determine if 
+ *                 any nested components are visible or not.
+ * @returns A new array consisting of components interspersed
+ *          with any visible nested components.
+ */
+var elevateNestedComponents = function elevateNestedComponents(components, data) {
+  var allComponents = [];
+  components === null || components === void 0 ? void 0 : components.forEach(function (component) {
+    var _component$data, _component$data$optio;
+
+    allComponents.push(component);
+    (_component$data = component.data) === null || _component$data === void 0 ? void 0 : (_component$data$optio = _component$data.options) === null || _component$data$optio === void 0 ? void 0 : _component$data$optio.forEach(function (option) {
+      // If this option has nested components and is
+      // selected, then add its nested components to the array.
+      if (Array.isArray(option.nested) && data[component.id] === option.value) {
+        allComponents = allComponents.concat(option.nested);
+      }
+    });
+  });
+  return allComponents;
+};
+
+var _default = elevateNestedComponents;
+exports.default = _default;

package/dist/utils/Component/elevateNestedComponents.test.js

@@ -0,0 +1,92 @@
+"use strict";
+
+var _elevateNestedComponents = _interopRequireDefault(require("./elevateNestedComponents"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+describe('utils.Component.elevateNestedComponents', function () {
+  it('should return an empty array if components is undefined', function () {
+    var DATA = {
+      alpha: 'abc'
+    };
+    expect((0, _elevateNestedComponents.default)(undefined, DATA)).toEqual([]);
+  });
+  it('should return an empty array if components is null', function () {
+    var DATA = {
+      alpha: 'abc'
+    };
+    expect((0, _elevateNestedComponents.default)(null, DATA)).toEqual([]);
+  });
+  it('should return an empty array if components is empty', function () {
+    var DATA = {
+      alpha: 'abc'
+    };
+    expect((0, _elevateNestedComponents.default)([], DATA)).toEqual([]);
+  });
+  it('should return the original components if none have nested components', function () {
+    var COMPONENTS = [{
+      id: 'textComp'
+    }, {
+      id: 'radiosComp',
+      data: {
+        options: [{
+          label: 'Yes',
+          value: 'yes'
+        }, {
+          label: 'No',
+          value: 'no'
+        }]
+      }
+    }];
+    var DATA = {
+      alpha: 'abc'
+    };
+    expect((0, _elevateNestedComponents.default)(COMPONENTS, DATA)).toEqual(COMPONENTS);
+  });
+  it('should return the original components if data is null', function () {
+    var COMPONENTS = [{
+      id: 'textComp'
+    }, {
+      id: 'radiosComp',
+      data: {
+        options: [{
+          label: 'Yes',
+          value: 'yes'
+        }, {
+          label: 'No',
+          value: 'no'
+        }]
+      }
+    }];
+    expect((0, _elevateNestedComponents.default)(COMPONENTS, null)).toEqual(COMPONENTS);
+  });
+  it('should return the original array with elevated nested components when they are visible', function () {
+    var COMPONENTS = [{
+      id: 'textComp'
+    }, {
+      id: 'radiosComp',
+      data: {
+        options: [{
+          label: 'Yes',
+          value: 'yes',
+          nested: [{
+            id: 'nestedOne'
+          }, {
+            id: 'nestedTwo'
+          }]
+        }, {
+          label: 'No',
+          value: 'no'
+        }]
+      }
+    }];
+    var DATA = {
+      radiosComp: 'yes'
+    };
+    expect((0, _elevateNestedComponents.default)(COMPONENTS, DATA)).toEqual([].concat(COMPONENTS, [{
+      id: 'nestedOne'
+    }, {
+      id: 'nestedTwo'
+    }]));
+  });
+});

package/dist/utils/Component/getComponent.js

@@ -25,23 +25,12 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 
 function _extends() { _extends = Object.assign ? Object.assign.bind() : 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); }
 
-var setupChildrenJSX = function setupChildrenJSX(options, config) {
-  options.forEach(function (option) {
-    if (!Array.isArray(option.nested)) {
-      return;
-    }
-
-    option.children = getChildrenJsx(config, option.nested);
-  });
-};
 /** 
  * Separate function for each component type for the sake of
  * code clarity - having the additional bits and pieces in the
  * switch statement increases the cyclomatic complexity and
  * makes it much harder to follow what's going on.
  */
-
-
 var getAutocomplete = function getAutocomplete(config) {
   var attrs = (0, _cleanAttributes.default)(config);
 
@@ -59,7 +48,6 @@ var getCheckboxes = function getCheckboxes(config) {
     options = val;
   });
 
-  setupChildrenJSX(options, config);
   var attrs = (0, _cleanAttributes.default)(config);
   return /*#__PURE__*/_react.default.createElement(_copReactComponents.Checkboxes, _extends({}, attrs, {
     options: options
@@ -118,7 +106,13 @@ var getRadios = function getRadios(config) {
     options = val;
   });
 
-  setupChildrenJSX(options, config);
+  options.forEach(function (option) {
+    if (!Array.isArray(option.nested)) {
+      return;
+    }
+
+    option.children = getChildrenJsx(config, option.nested);
+  });
   var attrs = (0, _cleanAttributes.default)(config);
   return /*#__PURE__*/_react.default.createElement(_copReactComponents.Radios, _extends({}, attrs, {
     options: options

package/dist/utils/Component/index.js

@@ -7,6 +7,8 @@ exports.default = void 0;
 
 var _cleanAttributes = _interopRequireDefault(require("./cleanAttributes"));
 
+var _elevateNestedComponents = _interopRequireDefault(require("./elevateNestedComponents"));
+
 var _getComponent = _interopRequireDefault(require("./getComponent"));
 
 var _getDefaultValue = _interopRequireDefault(require("./getDefaultValue"));
@@ -23,6 +25,7 @@ var Component = {
   clean: _cleanAttributes.default,
   defaultValue: _getDefaultValue.default,
   editable: _isEditable.default,
+  elevateNested: _elevateNestedComponents.default,
   get: _getComponent.default,
   show: _showComponent.default,
   wrap: _wrapInFormGroup.default

package/dist/utils/FormPage/useComponent.js

@@ -11,6 +11,47 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 
 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; }
 
+var getComponentToUse = function getComponentToUse(toUse, formComponents) {
+  var path = toUse.use.split('.');
+  var firstId = path.shift();
+
+  var wrapper = _objectSpread({}, formComponents.find(function (fc) {
+    return fc.id === firstId;
+  }));
+
+  var parent = wrapper;
+
+  var _loop = function _loop() {
+    var id = path.shift();
+
+    if (Array.isArray(parent.components)) {
+      // Filter the parent components down to just the one referenced
+      // by the current id.
+      parent.components = parent.components.filter(function (c) {
+        return c.id === id;
+      });
+
+      if (parent.components.length > 0) {
+        // Make the found child the parent so we can iterate.
+        parent = parent.components[0];
+      } else {
+        // If no child was found, there can be no parent.
+        parent = undefined;
+      }
+    } else {
+      // We cannot find the child with this id if there are no child
+      // components on this parent.
+      parent = undefined;
+    }
+  };
+
+  while (parent && path.length > 0) {
+    _loop();
+  } // If we missed a nested reference along the way, don't return the wrapper.
+
+
+  return parent ? wrapper : undefined;
+};
 /**
  * Use an existing component from the formComponents, overriding any properties
  * where appropriate.
@@ -18,17 +59,19 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope
  * @param {Array} formComponents An array of existing components on the form.
  * @returns A component configuration object.
  */
+
+
 var useComponent = function useComponent(toUse, formComponents) {
-  var formComponent = toUse ? formComponents.find(function (fc) {
-    return fc.id === toUse.use;
-  }) : undefined;
-
-  if (formComponent) {
-    var fieldId = toUse.fieldId || formComponent.fieldId;
-    return _objectSpread(_objectSpread(_objectSpread({}, formComponent), toUse), {}, {
-      cya_label: formComponent.label || formComponent.cya_label,
-      fieldId: fieldId
-    });
+  if (toUse) {
+    var component = getComponentToUse(toUse, formComponents);
+
+    if (component) {
+      var fieldId = toUse.fieldId || component.fieldId;
+      return _objectSpread(_objectSpread(_objectSpread({}, component), toUse), {}, {
+        cya_label: component.label || component.cya_label,
+        fieldId: fieldId
+      });
+    }
   }
 
   return _objectSpread({}, toUse);

package/dist/utils/FormPage/useComponent.test.js

@@ -1,5 +1,7 @@
 "use strict";
 
+var _models = require("../../models");
+
 var _useComponent = _interopRequireDefault(require("./useComponent"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -13,27 +15,45 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope
 describe('utils', function () {
   describe('FormPage', function () {
     describe('useComponent', function () {
+      var ZULU = {
+        id: 'z',
+        fieldId: 'z',
+        label: 'Zulu',
+        type: _models.ComponentTypes.TEXT
+      };
+      var CONTAINER = {
+        id: 'container',
+        fieldId: 'container',
+        label: 'Container',
+        type: _models.ComponentTypes.CONTAINER,
+        components: [{
+          id: 'f',
+          fieldId: 'f',
+          label: 'Foxtrot',
+          type: _models.ComponentTypes.TEXT
+        }, ZULU]
+      };
       var FORM_COMPONENTS = [{
         id: 'a',
         fieldId: 'a',
         label: 'Alpha',
-        type: 'text'
+        type: _models.ComponentTypes.TEXT
       }, {
         id: 'b',
         fieldId: 'b',
         label: 'Bravo',
-        type: 'text'
+        type: _models.ComponentTypes.TEXT
       }, {
         id: 'c',
         fieldId: 'c',
         label: 'Charlie',
-        type: 'text'
+        type: _models.ComponentTypes.TEXT
       }, {
         id: 'd',
         fieldId: 'd',
         cya_label: 'Delta',
-        type: 'text'
-      }];
+        type: _models.ComponentTypes.TEXT
+      }, CONTAINER];
       it('should handle a null toUse configuration', function () {
         var TO_USE = null;
         expect((0, _useComponent.default)(TO_USE, FORM_COMPONENTS)).toEqual({});
@@ -107,6 +127,43 @@ describe('utils', function () {
           label: TO_USE.label
         }));
       });
+      it('should handle a container', function () {
+        var TO_USE = {
+          use: CONTAINER.id
+        };
+        expect((0, _useComponent.default)(TO_USE, FORM_COMPONENTS)).toEqual(_objectSpread(_objectSpread({
+          use: CONTAINER.id
+        }, CONTAINER), {}, {
+          cya_label: CONTAINER.label
+        }));
+      });
+      it('should handle a component nested inside a container', function () {
+        var ID = "".concat(CONTAINER.id, ".").concat(ZULU.id);
+        var TO_USE = {
+          use: ID
+        };
+        expect((0, _useComponent.default)(TO_USE, FORM_COMPONENTS)).toEqual(_objectSpread(_objectSpread({
+          use: ID
+        }, CONTAINER), {}, {
+          cya_label: CONTAINER.label,
+          components: [ZULU // Foxtrot is not included
+          ]
+        }));
+      });
+      it('should handle an unrecognised container reference', function () {
+        var ID = "unrecognised.".concat(ZULU.id);
+        var TO_USE = {
+          use: ID
+        };
+        expect((0, _useComponent.default)(TO_USE, FORM_COMPONENTS)).toEqual(TO_USE);
+      });
+      it('should handle an unrecognised component within a container', function () {
+        var ID = "".concat(CONTAINER.id, ".unrecognised");
+        var TO_USE = {
+          use: ID
+        };
+        expect((0, _useComponent.default)(TO_USE, FORM_COMPONENTS)).toEqual(TO_USE);
+      });
     });
   });
 });

package/dist/utils/Validate/validateComponent.js

@@ -79,7 +79,6 @@ var validateComponent = function validateComponent(component, outerData, formDat
         error = message;
         break;
 
-      case _models.ComponentTypes.CHECKBOXES:
       case _models.ComponentTypes.RADIOS:
         var nestedErrors = [];
         (_component$data$optio = component.data.options) === null || _component$data$optio === void 0 ? void 0 : _component$data$optio.forEach(function (option) {

package/dist/utils/Validate/validateComponent.test.js

@@ -200,19 +200,19 @@ describe('utils.Validate.Component', function () {
     });
   });
   describe('when the component has a nested component', function () {
-    it.each([['radios', 'text'], ['checkboxes', 'text']])('should return no error when the radio component contains nested components without errors', function (parentType, nestedType) {
+    it('should return no error when the radio component contains nested components without errors', function () {
       var NESTED_ID = 'nestedId';
       var NESTED_VALUE = 'nestedValue';
 
       var FORMDATA = _defineProperty({}, NESTED_ID, NESTED_VALUE);
 
       var COMPONENT = {
-        type: parentType,
+        type: 'radios',
         id: 'a',
         data: {
           options: [{
             nested: [{
-              type: nestedType,
+              type: 'text',
               fieldId: NESTED_ID,
               id: NESTED_ID,
               required: true
@@ -222,16 +222,16 @@ describe('utils.Validate.Component', function () {
       };
       expect((0, _validateComponent.default)(COMPONENT, undefined, FORMDATA)).toBeUndefined();
     });
-    it.each([['radios', 'text'], ['checkboxes', 'text']])('should return an error when the radio component contains nested components with errors', function (parentType, nestedType) {
+    it('should return an error when the radio component contains nested components with errors', function () {
       var NESTED_ID = 'nestedId';
       var FORMDATA = {};
       var COMPONENT = {
-        type: parentType,
+        type: 'radios',
         id: 'a',
         data: {
           options: [{
             nested: [{
-              type: nestedType,
+              type: 'text',
               fieldId: NESTED_ID,
               id: NESTED_ID,
               required: true
@@ -244,10 +244,10 @@ describe('utils.Validate.Component', function () {
         error: "Field is required"
       }]);
     });
-    it.each([['radios'], ['checkboxes']])('should return no error when a non selected radio component contains nested components with errors', function (type) {
+    it('should return no error when a non selected radio component contains nested components with errors', function () {
       var NESTED_ID = 'nestedId';
       var COMPONENT = {
-        type: type,
+        type: 'radios',
         id: 'a',
         data: {
           options: [{

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ukhomeoffice/cop-react-form-renderer",
-  "version": "4.13.1-alpha",
+  "version": "4.14.3",
   "private": false,
   "scripts": {
     "clean": "rimraf dist",
@@ -16,7 +16,7 @@
     "post-compile": "rimraf dist/*.test.* dist/**/*.test.* dist/**/*.stories.* dist/docs dist/assets"
   },
   "dependencies": {
-    "@ukhomeoffice/cop-react-components": "2.2.3-alpha",
+    "@ukhomeoffice/cop-react-components": "2.2.3",
     "axios": "^0.23.0",
     "dayjs": "^1.11.0",
     "govuk-frontend": "^4.3.1",