@ukhomeoffice/cop-react-form-renderer 3.0.3 → 3.2.2

package/dist/components/FormComponent/Collection.js

@@ -67,15 +67,11 @@ var Collection = function Collection(_ref) {
       onChange = _ref.onChange,
       wrap = _ref.wrap;
 
-  var _useState = (0, _react.useState)(),
+  var _useState = (0, _react.useState)(_value),
       _useState2 = _slicedToArray(_useState, 2),
       value = _useState2[0],
       setValue = _useState2[1];
 
-  (0, _react.useEffect)(function () {
-    setValue(_value || []);
-  }, [_value, setValue]);
-
   var reportChange = function reportChange(newValue) {
     setValue(newValue);
 

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

@@ -0,0 +1,322 @@
+"use strict";
+
+var _react = require("@testing-library/react");
+
+var _react2 = _interopRequireDefault(require("react"));
+
+var _testUtils = require("react-dom/test-utils");
+
+var _models = require("../../models");
+
+var _setupTests = require("../../setupTests");
+
+var _utils = _interopRequireDefault(require("../../utils"));
+
+var _Collection = require("./Collection");
+
+var _Container = require("./Container");
+
+var _FormComponent = _interopRequireDefault(require("./FormComponent"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+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."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
+function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { Promise.resolve(value).then(_next, _throw); } }
+
+function _asyncToGenerator(fn) { return function () { var self = this, args = arguments; return new Promise(function (resolve, reject) { var gen = fn.apply(self, args); function _next(value) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value); } function _throw(err) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err); } _next(undefined); }); }; }
+
+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; }
+
+describe('components.FormComponent.Collection', function () {
+  var ID = 'collection';
+  var TEXT_ID = 'text';
+  var TEXT_VALUE = 'alpha';
+
+  var FORM_DATA = _defineProperty({}, ID, [_defineProperty({
+    id: '1'
+  }, TEXT_ID, TEXT_VALUE)]);
+
+  var TEXT_COMPONENT = {
+    id: TEXT_ID,
+    fieldId: TEXT_ID,
+    type: _models.ComponentTypes.TEXT,
+    label: 'Text component',
+    hint: 'Text hint'
+  };
+  it('should render a collection component appropriately', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee() {
+    var COLLECTION, _renderWithValidation, container, c, item, _item$childNodes, title, itemContainer, formGroup, label, hint, input;
+
+    return regeneratorRuntime.wrap(function _callee$(_context) {
+      while (1) {
+        switch (_context.prev = _context.next) {
+          case 0:
+            COLLECTION = {
+              id: ID,
+              fieldId: ID,
+              type: _models.ComponentTypes.COLLECTION,
+              item: [TEXT_COMPONENT]
+            };
+            _renderWithValidation = (0, _setupTests.renderWithValidation)( /*#__PURE__*/_react2.default.createElement(_FormComponent.default, {
+              component: COLLECTION,
+              value: FORM_DATA[ID],
+              formData: FORM_DATA
+            })), container = _renderWithValidation.container; // Check the container itself.
+
+            c = container.childNodes[0];
+            expect(c.tagName).toEqual('DIV');
+            expect(c.classList).toContain(_Collection.DEFAULT_CLASS); // And now check the single text component within it.
+
+            item = c.childNodes[0];
+            expect(item.tagName).toEqual('DIV');
+            expect(item.classList).toContain("".concat(_Collection.DEFAULT_CLASS, "__item"));
+            _item$childNodes = _slicedToArray(item.childNodes, 2), title = _item$childNodes[0], itemContainer = _item$childNodes[1];
+            expect(title.tagName).toEqual('LABEL');
+            expect(title.classList).toContain("".concat(_Collection.DEFAULT_CLASS, "__item-title"));
+            expect(itemContainer.tagName).toEqual('DIV');
+            expect(itemContainer.classList).toContain(_Container.DEFAULT_CLASS);
+            formGroup = itemContainer.childNodes[0];
+            expect(formGroup.tagName).toEqual('DIV');
+            expect(formGroup.classList).toContain('govuk-form-group');
+            label = formGroup.childNodes[0];
+            expect(label.tagName).toEqual('LABEL');
+            expect(label.classList).toContain('govuk-label');
+            expect(label.textContent).toEqual("".concat(TEXT_COMPONENT.label, " (optional)"));
+            expect(label.getAttribute('for')).toEqual("".concat(ID, "[0].").concat(TEXT_ID));
+            hint = formGroup.childNodes[1];
+            expect(hint.tagName).toEqual('SPAN');
+            expect(hint.classList).toContain('govuk-hint');
+            expect(hint.textContent).toEqual(TEXT_COMPONENT.hint);
+            input = formGroup.childNodes[2];
+            expect(input.tagName).toEqual('INPUT');
+            expect(input.classList).toContain('govuk-input');
+            expect(input.id).toEqual("".concat(ID, "[0].").concat(TEXT_ID));
+            expect(input.value).toEqual(TEXT_VALUE);
+
+          case 30:
+          case "end":
+            return _context.stop();
+        }
+      }
+    }, _callee);
+  })));
+  it('should handle a change to a component appropriately', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee2() {
+    var ON_CHANGE_EVENTS, ON_CHANGE, COLLECTION, _renderWithValidation2, container, c, item, formGroup, input, NEW_TEXT_VALUE, EVENT;
+
+    return regeneratorRuntime.wrap(function _callee2$(_context2) {
+      while (1) {
+        switch (_context2.prev = _context2.next) {
+          case 0:
+            ON_CHANGE_EVENTS = [];
+
+            ON_CHANGE = function ON_CHANGE(e) {
+              ON_CHANGE_EVENTS.push(e);
+            };
+
+            COLLECTION = {
+              id: ID,
+              fieldId: ID,
+              type: _models.ComponentTypes.COLLECTION,
+              item: [{
+                id: TEXT_ID,
+                fieldId: TEXT_ID,
+                type: _models.ComponentTypes.TEXT,
+                label: 'Text component'
+              }]
+            };
+            _renderWithValidation2 = (0, _setupTests.renderWithValidation)( /*#__PURE__*/_react2.default.createElement(_FormComponent.default, {
+              component: COLLECTION,
+              value: FORM_DATA[ID],
+              formData: FORM_DATA,
+              onChange: ON_CHANGE
+            })), container = _renderWithValidation2.container; // Get hold of the text input.
+
+            c = container.childNodes[0];
+            item = c.childNodes[0];
+            formGroup = item.childNodes[1].childNodes[0];
+            input = formGroup.childNodes[2];
+            NEW_TEXT_VALUE = 'bravo';
+            EVENT = {
+              target: {
+                name: TEXT_ID,
+                value: NEW_TEXT_VALUE
+              }
+            };
+
+            _react.fireEvent.change(input, EVENT); // And confirm the formData has been changed.
+
+
+            expect(ON_CHANGE_EVENTS.length).toEqual(1);
+            expect(ON_CHANGE_EVENTS[0].target.name).toEqual(ID);
+            expect(ON_CHANGE_EVENTS[0].target.value[0][TEXT_ID]).toEqual(NEW_TEXT_VALUE);
+
+          case 14:
+          case "end":
+            return _context2.stop();
+        }
+      }
+    }, _callee2);
+  })));
+  it('should handle a null value appropriately', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee3() {
+    var COLLECTION, _renderWithValidation3, container, c, buttonGroup, button;
+
+    return regeneratorRuntime.wrap(function _callee3$(_context3) {
+      while (1) {
+        switch (_context3.prev = _context3.next) {
+          case 0:
+            COLLECTION = {
+              id: ID,
+              fieldId: ID,
+              type: _models.ComponentTypes.COLLECTION,
+              item: [TEXT_COMPONENT]
+            };
+            _renderWithValidation3 = (0, _setupTests.renderWithValidation)( /*#__PURE__*/_react2.default.createElement(_FormComponent.default, {
+              component: COLLECTION
+            })), container = _renderWithValidation3.container; // Check the container itself.
+
+            c = container.childNodes[0];
+            expect(c.tagName).toEqual('DIV');
+            expect(c.classList).toContain(_Collection.DEFAULT_CLASS); // And now make sure it has no children OTHER than the button to add an item.
+
+            expect(c.childNodes.length).toEqual(1);
+            buttonGroup = c.childNodes[0];
+            expect(buttonGroup.tagName).toEqual('DIV');
+            expect(buttonGroup.classList).toContain('hods-button-group');
+            button = buttonGroup.childNodes[0];
+            expect(button.tagName).toEqual('BUTTON');
+            expect(button.classList).toContain('hods-button');
+            expect(button.classList).toContain('hods-button--secondary');
+            expect(button.textContent).toContain(_models.CollectionLabels.add);
+
+          case 14:
+          case "end":
+            return _context3.stop();
+        }
+      }
+    }, _callee3);
+  })));
+  it('should handle a collection label appropriately', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee4() {
+    var LABEL, COLLECTION, _renderWithValidation4, container, c, _c$childNodes, title, buttonGroup, button;
+
+    return regeneratorRuntime.wrap(function _callee4$(_context4) {
+      while (1) {
+        switch (_context4.prev = _context4.next) {
+          case 0:
+            LABEL = 'Alpha Collection';
+            COLLECTION = {
+              id: ID,
+              fieldId: ID,
+              type: _models.ComponentTypes.COLLECTION,
+              item: [TEXT_COMPONENT],
+              label: LABEL
+            };
+            _renderWithValidation4 = (0, _setupTests.renderWithValidation)( /*#__PURE__*/_react2.default.createElement(_FormComponent.default, {
+              component: COLLECTION
+            })), container = _renderWithValidation4.container; // Check the container itself.
+
+            c = container.childNodes[0];
+            expect(c.tagName).toEqual('DIV');
+            expect(c.classList).toContain(_Collection.DEFAULT_CLASS); // And now make sure it has no children OTHER than the button to add an item.
+
+            expect(c.childNodes.length).toEqual(2);
+            _c$childNodes = _slicedToArray(c.childNodes, 2), title = _c$childNodes[0], buttonGroup = _c$childNodes[1];
+            expect(title.tagName).toEqual('LABEL');
+            expect(title.classList).toContain("".concat(_Collection.DEFAULT_CLASS, "__title"));
+            expect(title.getAttribute('for')).toEqual(ID);
+            expect(title.textContent).toContain(LABEL);
+            expect(buttonGroup.tagName).toEqual('DIV');
+            expect(buttonGroup.classList).toContain('hods-button-group');
+            button = buttonGroup.childNodes[0];
+            expect(button.tagName).toEqual('BUTTON');
+            expect(button.classList).toContain('hods-button');
+            expect(button.classList).toContain('hods-button--secondary');
+            expect(button.textContent).toContain(_models.CollectionLabels.add);
+
+          case 19:
+          case "end":
+            return _context4.stop();
+        }
+      }
+    }, _callee4);
+  })));
+  it('should handle the addition and removal of an item', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee6() {
+    var COLLECTION, container, c, addButton, item, label, removeButton;
+    return regeneratorRuntime.wrap(function _callee6$(_context6) {
+      while (1) {
+        switch (_context6.prev = _context6.next) {
+          case 0:
+            COLLECTION = {
+              id: ID,
+              fieldId: ID,
+              type: _models.ComponentTypes.COLLECTION,
+              item: [TEXT_COMPONENT]
+            };
+            container = document.createElement('div');
+            document.body.appendChild(container);
+            _context6.next = 5;
+            return (0, _testUtils.act)( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee5() {
+              return regeneratorRuntime.wrap(function _callee5$(_context5) {
+                while (1) {
+                  switch (_context5.prev = _context5.next) {
+                    case 0:
+                      (0, _setupTests.renderDomWithValidation)( /*#__PURE__*/_react2.default.createElement(_FormComponent.default, {
+                        component: COLLECTION
+                      }), container);
+
+                    case 1:
+                    case "end":
+                      return _context5.stop();
+                  }
+                }
+              }, _callee5);
+            })));
+
+          case 5:
+            // Check the container itself.
+            c = container.childNodes[0];
+            expect(c.tagName).toEqual('DIV');
+            expect(c.classList).toContain(_Collection.DEFAULT_CLASS); // And now make sure it has no children OTHER than the button to add an item.
+
+            expect(c.childNodes.length).toEqual(1); // Get hold of that "Add another" button and click it.
+
+            addButton = c.childNodes[0].childNodes[0];
+
+            _react.fireEvent.click(addButton, {}); // Make sure an item has been added.
+
+
+            expect(c.childNodes.length).toEqual(2);
+            item = c.childNodes[0];
+            label = item.childNodes[0];
+            expect(label.textContent).toContain(_utils.default.interpolateString(_models.CollectionLabels.item, {
+              index: 1
+            })); // Get hold of the newly-add item's "Remove" button.
+
+            removeButton = label.childNodes[1];
+            expect(removeButton.tagName).toEqual('BUTTON');
+            expect(removeButton.classList).toContain('hods-button--secondary');
+            expect(removeButton.textContent).toContain(_models.CollectionLabels.remove); // Click the "Remove" button
+
+            _react.fireEvent.click(removeButton, {}); // Make sure the item has been removed.
+
+
+            expect(c.childNodes.length).toEqual(1);
+            expect(c.childNodes[0].classList).toContain('hods-button-group');
+
+          case 22:
+          case "end":
+            return _context6.stop();
+        }
+      }
+    }, _callee6);
+  })));
+});

package/dist/components/FormRenderer/FormRenderer.js

@@ -246,20 +246,43 @@ var InternalFormRenderer = function InternalFormRenderer(_ref2) {
   var onPageAction = function onPageAction(action, patch) {
     // Check to see whether the action is able to proceed, which in
     // in the case of a submission will validate the fields in the page.
+    if (action.type === _models.PageAction.TYPES.SUBMIT) {
+      if (_helpers.default.canCYASubmit(pages, validate.pages)) {
+        // Submit.
+        var submissionData = _utils.default.Format.form({
+          pages: pages,
+          components: components
+        }, _objectSpread({}, data), _models.EventTypes.SUBMIT);
+
+        submissionData.formStatus = _helpers.default.getSubmissionStatus(type, pages, pageId, action, submissionData, currentTask, true);
+        setData(submissionData); // Now submit the data to the backend...
+
+        hooks.onSubmit(action.type, submissionData, function () {
+          return hooks.onFormComplete();
+        }, function (errors) {
+          return _handlers.default.submissionError(errors, addErrors);
+        });
+      }
+    } // Check to see whether the action is able to proceed, which in
+    // in the case of a submission will validate the fields in the page.
+
+
     if (_helpers.default.canActionProceed(action, formState.page, validate.page)) {
+      patch = _helpers.default.cleanHiddenNestedData(patch, formState.page);
+
       if (action.type === _models.PageAction.TYPES.NAVIGATE) {
         _handlers.default.navigate(action, pageId, onPageChange);
       } else {
         // Save draft or submit.
-        var submissionData = _utils.default.Format.form({
+        var _submissionData = _utils.default.Format.form({
           pages: pages,
           components: components
         }, _objectSpread(_objectSpread({}, data), patch), _models.EventTypes.SUBMIT);
 
-        submissionData.formStatus = _helpers.default.getSubmissionStatus(type, pages, pageId, action, submissionData, currentTask, true);
+        _submissionData.formStatus = _helpers.default.getSubmissionStatus(type, pages, pageId, action, _submissionData, currentTask, true);
 
         if (patch) {
-          setData(submissionData);
+          setData(_submissionData);
         }
 
         var pageUpdate = function pageUpdate(next) {
@@ -275,10 +298,10 @@ var InternalFormRenderer = function InternalFormRenderer(_ref2) {
         } // Now submit the data to the backend...
 
 
-        hooks.onSubmit(action.type, submissionData, function (response) {
+        hooks.onSubmit(action.type, _submissionData, function (response) {
           // The backend response may well contain data we need so apply it...
           // ... but this needs to happen in a useEffect, not right away.
-          var sData = _objectSpread(_objectSpread({}, submissionData), response);
+          var sData = _objectSpread(_objectSpread({}, _submissionData), response);
 
           setSubmitted({
             data: sData
@@ -341,14 +364,14 @@ var InternalFormRenderer = function InternalFormRenderer(_ref2) {
 
     if (action.type === _models.PageAction.TYPES.SAVE_AND_CONTINUE && hub === _models.HubFormats.TASK) {
       if (_helpers.default.canCYASubmit(currentTask.fullPages, validate.pages)) {
-        var _submissionData = _utils.default.Format.form({
+        var _submissionData2 = _utils.default.Format.form({
           pages: pages,
           components: components
         }, _objectSpread({}, data), _models.EventTypes.SUBMIT);
 
-        _submissionData.formStatus = _helpers.default.getSubmissionStatus(type, pages, pageId, action, _submissionData, currentTask, true);
-        setData(_submissionData);
-        hooks.onSubmit(action.type, _submissionData, function () {
+        _submissionData2.formStatus = _helpers.default.getSubmissionStatus(type, pages, pageId, action, _submissionData2, currentTask, true);
+        setData(_submissionData2);
+        hooks.onSubmit(action.type, _submissionData2, function () {
           return onPageChange(_models.FormPages.HUB);
         }, function (errors) {
           return _handlers.default.submissionError(errors, addErrors);
@@ -358,14 +381,14 @@ var InternalFormRenderer = function InternalFormRenderer(_ref2) {
 
     if (action.type === _models.PageAction.TYPES.SAVE_AND_RETURN) {
       if (_helpers.default.canCYASubmit(currentTask.fullPages, validate.pages)) {
-        var _submissionData2 = _utils.default.Format.form({
+        var _submissionData3 = _utils.default.Format.form({
           pages: pages,
           components: components
         }, _objectSpread({}, data), _models.EventTypes.SUBMIT);
 
-        _submissionData2.formStatus = _helpers.default.getSubmissionStatus(type, pages, pageId, action, _submissionData2, currentTask);
-        setData(_submissionData2);
-        hooks.onSubmit(action.type, _submissionData2, function () {
+        _submissionData3.formStatus = _helpers.default.getSubmissionStatus(type, pages, pageId, action, _submissionData3, currentTask);
+        setData(_submissionData3);
+        hooks.onSubmit(action.type, _submissionData3, function () {
           if (type === _models.FormTypes.TASK) {
             onPageChange(undefined);
           } else {

package/dist/components/FormRenderer/helpers/cleanHiddenNestedData.js

@@ -0,0 +1,38 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var parentComponents = ['radios'];
+
+var cleanHiddenNestedData = function cleanHiddenNestedData(patch, page) {
+  page.components.forEach(function (component) {
+    if (!parentComponents.includes(component.type)) {
+      return;
+    }
+
+    var idsToDelete = getIdsToDelete(component, patch[component.id]);
+    idsToDelete.forEach(function (id) {
+      delete patch[id];
+    });
+  });
+  return patch;
+};
+
+function getIdsToDelete(component, selectedValue) {
+  var _component$data, _component$data$optio;
+
+  var idsToDelete = [];
+  component === null || component === void 0 ? void 0 : (_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 (option.value !== selectedValue && option.nested) {
+      option.nested.forEach(function (nested) {
+        idsToDelete.push(nested.id);
+      });
+    }
+  });
+  return idsToDelete;
+}
+
+var _default = cleanHiddenNestedData;
+exports.default = _default;

package/dist/components/FormRenderer/helpers/cleanHiddenNestedData.test.js

@@ -0,0 +1,50 @@
+"use strict";
+
+var _cleanHiddenNestedData = _interopRequireDefault(require("./cleanHiddenNestedData"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+// Local imports
+describe('components', function () {
+  describe('FormRenderer', function () {
+    describe('helpers', function () {
+      describe('cleanHiddenNestedData', function () {
+        it('remove data corresponding to hidden nested components', function () {
+          var patch = {
+            parent: 'option2',
+            nested1: 'should not be included',
+            nested2: 'should be included'
+          };
+          var page = {
+            id: 'page',
+            name: 'page',
+            title: 'Page',
+            components: [{
+              id: 'parent',
+              fieldId: 'parent',
+              type: 'radios',
+              data: {
+                options: [{
+                  value: 'option1',
+                  nested: [{
+                    id: 'nested1',
+                    fieldId: 'nested1'
+                  }]
+                }, {
+                  value: 'option2',
+                  nested: [{
+                    id: 'nested2',
+                    fieldId: 'nested2'
+                  }]
+                }]
+              }
+            }]
+          };
+          var updatedPatch = (0, _cleanHiddenNestedData.default)(patch, page);
+          expect(updatedPatch['nested1']).toBeFalsy();
+          expect(updatedPatch['nested2']).toBeTruthy();
+        });
+      });
+    });
+  });
+});

package/dist/components/FormRenderer/helpers/index.js

@@ -9,6 +9,8 @@ var _canActionProceed = _interopRequireDefault(require("./canActionProceed"));
 
 var _canCYASubmit = _interopRequireDefault(require("./canCYASubmit"));
 
+var _cleanHiddenNestedData = _interopRequireDefault(require("./cleanHiddenNestedData"));
+
 var _getFormState = _interopRequireDefault(require("./getFormState"));
 
 var _getNextPageId = _interopRequireDefault(require("./getNextPageId"));
@@ -25,6 +27,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 var helpers = {
   canActionProceed: _canActionProceed.default,
   canCYASubmit: _canCYASubmit.default,
+  cleanHiddenNestedData: _cleanHiddenNestedData.default,
   getFormState: _getFormState.default,
   getNextPageId: _getNextPageId.default,
   getPage: _getPage.default,

package/dist/context/HooksContext/HooksContext.js

@@ -1,11 +1,17 @@
 "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); }
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.HooksContext = exports.ALLOWED_HOOKS = void 0;
 
-var _react = require("react");
+var _react = _interopRequireWildcard(require("react"));
+
+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 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; }
 
@@ -78,7 +84,7 @@ var HooksContextProvider = function HooksContextProvider(_ref) {
     }
   };
 
-  return /*#__PURE__*/React.createElement(HooksContext.Provider, {
+  return /*#__PURE__*/_react.default.createElement(HooksContext.Provider, {
     value: {
       hooks: hooks,
       addHook: addHook,

package/dist/utils/CheckYourAnswers/getCYARow.js

@@ -49,7 +49,9 @@ var setNestedValue = function setNestedValue(component, page) {
   (_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, index) {
     //check if option is selected and has nested component
     if (page.formData[component.id] === option.value && option.nested) {
-      component.data.options[index].nested.value = page.formData[option.nested.id];
+      option.nested.forEach(function (child) {
+        child.value = page.formData[child.id];
+      });
     }
   });
 };

package/dist/utils/CheckYourAnswers/getCYARow.test.js

@@ -162,14 +162,14 @@ describe('utils', function () {
           data: {
             options: [{
               value: SELECTED_VALUE,
-              nested: {
+              nested: [{
                 id: NESTED_ID
-              }
+              }]
             }]
           }
         };
         var ROW = (0, _getCYARow.default)(PAGE, COMPONENT, function () {});
-        expect(ROW.component.data.options[0].nested.value).toEqual(NESTED_VALUE);
+        expect(ROW.component.data.options[0].nested[0].value).toEqual(NESTED_VALUE);
       });
     });
   });

package/dist/utils/Component/cleanAttributes.js

@@ -19,7 +19,7 @@ function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToAr
 
 function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
 
-var JSON_ONLY_PROPERTIES = ['source', 'use', 'show_when', 'options', 'additionalValidation', 'full_path', 'shown', 'formData'];
+var JSON_ONLY_PROPERTIES = ['source', 'use', 'show_when', 'options', 'additionalValidation', 'full_path', 'formData'];
 /**
  * This method removes and properties that are entirely specific to the JSON
  * configuration and that should not be used as HTML attributes.