@ukhomeoffice/cop-react-form-renderer 5.13.0 → 5.13.2

package/dist/components/CollectionPage/CollectionPage.test.js

@@ -150,7 +150,7 @@ describe('components.CollectionPage', function () {
       expect(input.tagName).toEqual('INPUT');
       expect(input.classList).toContain('govuk-input');
       expect(input.id).toEqual(fieldId);
-      expect(input.dataset.value).toEqual(val);
+      expect(input.value).toEqual(val);
       return input;
     };
     var checkAutoCompleteField = function checkAutoCompleteField(formGroup, fieldId, lbl, hnt, val) {

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

@@ -84,7 +84,7 @@ describe('components.FormComponent.Collection', function () {
           expect(input.tagName).toEqual('INPUT');
           expect(input.classList).toContain('govuk-input');
           expect(input.id).toEqual("".concat(ID, "[0].").concat(TEXT_ID));
-          expect(input.dataset.value).toEqual(TEXT_VALUE);
+          expect(input.value).toEqual(TEXT_VALUE);
         case 30:
         case "end":
           return _context.stop();
@@ -392,7 +392,7 @@ describe('components.FormComponent.Collection', function () {
           input = formGroup.childNodes[2];
           expect(input.tagName).toEqual('DIV'); // Now readonly, so a DIV.
           expect(input.classList).toContain('hods-readonly'); // Now readonly, so hods-readonly
-          expect(input.dataset.id).toEqual("".concat(ID, "[0].").concat(TEXT_ID));
+          expect(input.id).toEqual("".concat(ID, "[0].").concat(TEXT_ID));
           expect(input.textContent).toEqual(TEXT_VALUE);
         case 30:
         case "end":
@@ -518,7 +518,7 @@ describe('components.FormComponent.Collection', function () {
           expect(input.tagName).toEqual('INPUT');
           expect(input.classList).toContain('govuk-input');
           expect(input.id).toEqual("".concat(ID, "[0].").concat(TEXT_ID));
-          expect(input.dataset.value).toEqual(TEXT_VALUE);
+          expect(input.value).toEqual(TEXT_VALUE);
 
           // First item component 2
           formGroup = itemContainer.childNodes[1];
@@ -537,7 +537,7 @@ describe('components.FormComponent.Collection', function () {
           expect(input.tagName).toEqual('INPUT');
           expect(input.classList).toContain('govuk-input');
           expect(input.id).toEqual("".concat(ID, "[0].textTwo"));
-          expect(input.dataset.value).toEqual('charlie');
+          expect(input.value).toEqual('charlie');
 
           // Check the second item and confirm there is no hint
           itemTwo = c.childNodes[1];
@@ -564,7 +564,7 @@ describe('components.FormComponent.Collection', function () {
           expect(inputTwo.tagName).toEqual('INPUT');
           expect(inputTwo.classList).toContain('govuk-input');
           expect(inputTwo.id).toEqual("".concat(ID, "[1].").concat(TEXT_ID));
-          expect(inputTwo.dataset.value).toEqual('beta');
+          expect(inputTwo.value).toEqual('beta');
 
           // Second item second component
           formGroupTwo = itemContainerTwo.childNodes[1];
@@ -581,7 +581,7 @@ describe('components.FormComponent.Collection', function () {
           expect(inputTwo.tagName).toEqual('INPUT');
           expect(inputTwo.classList).toContain('govuk-input');
           expect(inputTwo.id).toEqual("".concat(ID, "[1].textTwo"));
-          expect(inputTwo.dataset.value).toEqual('delta');
+          expect(inputTwo.value).toEqual('delta');
         case 87:
         case "end":
           return _context11.stop();
@@ -658,7 +658,7 @@ describe('components.FormComponent.Collection', function () {
           expect(input.tagName).toEqual('INPUT');
           expect(input.classList).toContain('govuk-input');
           expect(input.id).toEqual("".concat(ID, "[0].").concat(TEXT_ID));
-          expect(input.dataset.value).toEqual(TEXT_VALUE);
+          expect(input.value).toEqual(TEXT_VALUE);
 
           // First item component 2
           formGroup = itemContainer.childNodes[1];
@@ -677,7 +677,7 @@ describe('components.FormComponent.Collection', function () {
           expect(input.tagName).toEqual('INPUT');
           expect(input.classList).toContain('govuk-input');
           expect(input.id).toEqual("".concat(ID, "[0].textTwo"));
-          expect(input.dataset.value).toEqual('charlie');
+          expect(input.value).toEqual('charlie');
 
           // Check the second item and confirm there is no hint
           itemTwo = c.childNodes[1];
@@ -704,7 +704,7 @@ describe('components.FormComponent.Collection', function () {
           expect(inputTwo.tagName).toEqual('INPUT');
           expect(inputTwo.classList).toContain('govuk-input');
           expect(inputTwo.id).toEqual("".concat(ID, "[1].").concat(TEXT_ID));
-          expect(inputTwo.dataset.value).toEqual('beta');
+          expect(inputTwo.value).toEqual('beta');
 
           // Second item second component
           formGroupTwo = itemContainerTwo.childNodes[1];
@@ -721,7 +721,7 @@ describe('components.FormComponent.Collection', function () {
           expect(inputTwo.tagName).toEqual('INPUT');
           expect(inputTwo.classList).toContain('govuk-input');
           expect(inputTwo.id).toEqual("".concat(ID, "[1].textTwo"));
-          expect(inputTwo.dataset.value).toEqual('delta');
+          expect(inputTwo.value).toEqual('delta');
         case 89:
         case "end":
           return _context12.stop();

package/dist/components/FormComponent/Container.js

@@ -5,11 +5,11 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.DEFAULT_CLASS = void 0;
-var _Utils = require("@ukhomeoffice/cop-react-components/dist/utils/Utils");
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _models = require("../../models");
 var _utils = _interopRequireDefault(require("../../utils"));
+var _cleanAttributes = _interopRequireDefault(require("../../utils/Component/cleanAttributes"));
 var _FormComponent = _interopRequireDefault(require("./FormComponent"));
 var _excluded = ["container", "value", "formData", "onChange", "wrap", "onTopLevelChange"];
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -61,8 +61,8 @@ var Container = function Container(_ref) {
     }), formData);
   };
   var classes = _utils.default.classBuilder(DEFAULT_CLASS, [], container.className);
-  var cleanedAttrs = (0, _Utils.cleanHtmlAttributes)(attrs);
-  return /*#__PURE__*/_react.default.createElement("div", _extends({}, cleanedAttrs, {
+  var htmlAttrs = (0, _cleanAttributes.default)(attrs);
+  return /*#__PURE__*/_react.default.createElement("div", _extends({}, htmlAttrs, {
     className: classes(),
     id: container.id
   }), container.components && container.components.filter(shouldShow).map(function (component, index) {

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

@@ -76,7 +76,7 @@ describe('components.FormComponent.Container', function () {
           expect(input.tagName).toEqual('INPUT');
           expect(input.classList).toContain('govuk-input');
           expect(input.id).toEqual("".concat(ID, ".").concat(TEXT_ID));
-          expect(input.dataset.value).toEqual(TEXT_VALUE);
+          expect(input.value).toEqual(TEXT_VALUE);
         case 22:
         case "end":
           return _context.stop();
@@ -130,7 +130,7 @@ describe('components.FormComponent.Container', function () {
           expect(input.tagName).toEqual('INPUT');
           expect(input.classList).toContain('govuk-input');
           expect(input.id).toEqual("".concat(ID, ".").concat(NESTED_ID, ".").concat(TEXT_ID));
-          expect(input.dataset.value).toEqual(NESTED_TEXT_VALUE);
+          expect(input.value).toEqual(NESTED_TEXT_VALUE);
         case 25:
         case "end":
           return _context2.stop();
@@ -359,7 +359,7 @@ describe('components.FormComponent.Container', function () {
           input = formGroup.childNodes[2];
           expect(input.tagName).toEqual('DIV'); // Now readonly, so a DIV.
           expect(input.classList).toContain('hods-readonly'); // Now readonly, so hods-readonly
-          expect(input.dataset.id).toEqual("".concat(ID, ".").concat(TEXT_ID));
+          expect(input.id).toEqual("".concat(ID, ".").concat(TEXT_ID));
           expect(input.textContent).toEqual(TEXT_VALUE);
         case 22:
         case "end":

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

@@ -47,7 +47,7 @@ describe('components', function () {
             expect(input.tagName).toEqual('INPUT');
             expect(input.classList).toContain('govuk-input');
             expect(input.id).toEqual(ID);
-            expect(input.dataset.value).toEqual(VALUE);
+            expect(input.value).toEqual(VALUE);
           case 22:
           case "end":
             return _context.stop();
@@ -80,7 +80,7 @@ describe('components', function () {
             expect(input.tagName).toEqual('INPUT');
             expect(input.classList).toContain('govuk-input');
             expect(input.id).toEqual(ID);
-            expect(input.dataset.value).toEqual(VALUE);
+            expect(input.value).toEqual(VALUE);
           case 10:
           case "end":
             return _context2.stop();
@@ -215,7 +215,7 @@ describe('components', function () {
             expect(input.tagName).toEqual('INPUT');
             expect(input.classList).toContain('govuk-input');
             expect(input.id).toEqual(ID);
-            expect(input.dataset.value).toEqual(VALUE);
+            expect(input.value).toEqual(VALUE);
           case 23:
           case "end":
             return _context6.stop();

package/dist/components/FormPage/FormPage.test.js

@@ -138,7 +138,7 @@ describe('components.FormPage', function () {
       expect(input.tagName).toEqual('INPUT');
       expect(input.classList).toContain('govuk-input');
       expect(input.id).toEqual(fieldId);
-      expect(input.dataset.value).toEqual(val);
+      expect(input.value).toEqual(val);
       return input;
     };
     var checkAutoCompleteField = function checkAutoCompleteField(formGroup, fieldId, lbl, hnt, val) {

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

@@ -552,9 +552,13 @@ describe('components', function () {
             })));
           case 7:
             taskList = container.childNodes[0].childNodes[1];
+            taskList.childNodes.forEach(function (child) {
+              // eslint-disable-next-line no-console
+              console.log("taskList, child = ".concat(JSON.stringify(child.textContent)));
+            });
             expect(taskList.childNodes[5].textContent).not.toEqual("test text");
             expect(taskList.childNodes[5].classList).not.toContain('govuk-textarea');
-          case 10:
+          case 11:
           case "end":
             return _context22.stop();
         }

package/dist/components/FormRenderer/onCYAAction.js

@@ -101,7 +101,11 @@ var onCYAAction = function onCYAAction(setPagePoint, action, pages, validate, co
     onPageChange(_helpers.default.getNextPageId(type, pages, pageId, action, (_formState$page = formState.page) === null || _formState$page === void 0 ? void 0 : _formState$page.formData));
   }
   if (action.type === _models.PageAction.TYPES.CANCEL) {
-    hooks.onCancel();
+    var formData = _utils.default.Format.form({
+      pages: pages,
+      components: components
+    }, _objectSpread({}, data), _models.EventTypes.CANCEL);
+    hooks.onCancel(formData);
   }
 };
 var _default = onCYAAction;

package/dist/components/FormRenderer/onCYAAction.test.js

@@ -102,15 +102,15 @@ describe('components.FormRenderer.onCYAAction', function () {
     onFormComplete: function onFormComplete() {
       this.onFormCompleteCalls += 1;
     },
-    onCancelCalls: 0,
-    onCancel: function onCancel() {
-      this.onCancelCalls += 1;
+    onCancelArgs: [],
+    onCancel: function onCancel(data) {
+      this.onCancelArgs.push(data);
     },
     reset: function reset() {
       this.onSubmitCalls = 0;
       this.onSubmitArgs = [];
       this.onFormCompleteCalls = 0;
-      this.onCancelCalls = 0;
+      this.onCancelArgs = [];
     }
   };
   var setPagePointCalls = 0;
@@ -578,6 +578,9 @@ describe('components.FormRenderer.onCYAAction', function () {
       }
     });
     _onCYAAction.default.apply(void 0, Object.values(CUSTOM_ARGS));
-    expect(MOCK_HOOKS.onCancelCalls).toEqual(1);
+    expect(MOCK_HOOKS.onCancelArgs.length).toEqual(1);
+    expect(MOCK_HOOKS.onCancelArgs[0]).toMatchObject({
+      id: 'formId'
+    });
   });
 });

package/dist/components/FormRenderer/onPageAction.js

@@ -20,11 +20,6 @@ function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input ==
 // patchLabel captures non-ID values 
 // for display purposes after submission.)
 var onPageAction = function onPageAction(action, patch, patchLabel, hooks, data, formState, validate, onPageChange, type, pages, components, pageId, setPagePoint, currentTask, setData, hubDetails, setSubmitted, addErrors) {
-  if (action.type === _models.PageAction.TYPES.CANCEL) {
-    hooks.onCancel();
-    return;
-  }
-  ;
   // Save a copy of data in case submit errors and we need to revert
   var preSubmitData = _objectSpread({}, data);
   var form = formState;
@@ -36,6 +31,14 @@ var onPageAction = function onPageAction(action, patch, patchLabel, hooks, data,
   // This should normally have no effect but will prevent issues 
   // with validation if formData happens to have been wiped.
   form.page.formData = _objectSpread(_objectSpread({}, form.page.formData), _patch);
+
+  // Exposes form data to consuming application.
+  if (action.type === _models.PageAction.TYPES.CANCEL) {
+    hooks.onCancel(form.page.formData);
+    return;
+  }
+  ;
+
   // 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, form.page, validate.page)) {

package/dist/components/FormRenderer/onPageAction.test.js

@@ -121,15 +121,15 @@ describe('components.FormRenderer.onPageAction', function () {
     onFormComplete: function onFormComplete() {
       this.onFormCompleteCalls += 1;
     },
-    onCancelCalls: 0,
-    onCancel: function onCancel() {
-      this.onCancelCalls += 1;
+    onCancelArgs: [],
+    onCancel: function onCancel(data) {
+      this.onCancelArgs.push(data);
     },
     reset: function reset() {
       this.onSubmitCalls = 0;
       this.onSubmitArgs = [];
       this.onFormCompleteCalls = 0;
-      this.onCancelCalls = 0;
+      this.onCancelArgs = [];
       this.onActionCalls = 0;
     },
     onActionCalls: 0,
@@ -290,7 +290,8 @@ describe('components.FormRenderer.onPageAction', function () {
       action: ACTION
     });
     _onPageAction.default.apply(void 0, Object.values(CUSTOM_ARGS));
-    expect(MOCK_HOOKS.onCancelCalls).toEqual(1);
+    expect(MOCK_HOOKS.onCancelArgs.length).toEqual(1);
+    expect(MOCK_HOOKS.onCancelArgs[0]).toMatchObject({});
     // Shouldn't get to the point of validation if
     // action is a cancel action.
     expect(_helpers.default.canActionProceedCalls).toEqual(0);

package/dist/components/SummaryList/SummaryList.js

@@ -29,7 +29,6 @@ var SummaryList = function SummaryList(_ref) {
     className = _ref.className,
     attrs = _objectWithoutProperties(_ref, _excluded);
   var classes = _copReactComponents.Utils.classBuilder(classBlock, classModifiers, className);
-  var cleanedHtmlAttrs = _copReactComponents.Utils.cleanHtmlAttributes(attrs);
   var groupActionRow = null;
   if (isGroup) {
     var rowActions = rows.filter(function (r) {
@@ -39,7 +38,7 @@ var SummaryList = function SummaryList(_ref) {
   }
   return /*#__PURE__*/_react.default.createElement("div", {
     className: "group-of-rows"
-  }, /*#__PURE__*/_react.default.createElement("dl", _extends({}, cleanedHtmlAttrs, {
+  }, /*#__PURE__*/_react.default.createElement("dl", _extends({}, attrs, {
     className: classes()
   }), rows.map(function (row) {
     var key = "".concat(row.pageId, "_").concat(row.full_path || row.fieldId);

package/dist/components/TaskList/TaskList.js

@@ -45,7 +45,7 @@ var TaskList = function TaskList(_ref) {
     formData = _ref.formData,
     attrs = _objectWithoutProperties(_ref, _excluded);
   var classes = _copReactComponents.Utils.classBuilder(classBlock, classModifiers, className);
-  var cleanedHtmlAttrs = _copReactComponents.Utils.cleanHtmlAttributes(attrs);
+
   // TODO state will be retrieved from a document in S3 rather than given in the component definition, covered under COP-9885
   var _sections$filter$redu = sections.filter(function (section) {
       return !section.skipped;
@@ -71,7 +71,7 @@ var TaskList = function TaskList(_ref) {
   };
   return /*#__PURE__*/_react.default.createElement("div", _extends({
     id: id
-  }, cleanedHtmlAttrs, {
+  }, attrs, {
     className: classes()
   }), refNumber && refTitle && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("p", {
     className: "govuk-body govuk-!-margin-bottom-0"
@@ -103,7 +103,7 @@ var TaskList = function TaskList(_ref) {
       className: classes('section')
     }, sections.length > 1 ? "".concat(index + 1, ". ") : '', section.name), /*#__PURE__*/_react.default.createElement("ol", {
       className: classes('items')
-    }, /*#__PURE__*/_react.default.createElement("li", null, /*#__PURE__*/_react.default.createElement(_dist.Hint, null, section.label ? section.label : '')), section.tasks.filter(function (task) {
+    }, /*#__PURE__*/_react.default.createElement(_dist.Hint, null, section.label ? section.label : ''), section.tasks.filter(function (task) {
       return task.state !== _models.TaskStates.TYPES.SKIPPED;
     }).map(function (task) {
       return /*#__PURE__*/_react.default.createElement(_Task.default, {

package/dist/context/HooksContext/HooksContext.js

@@ -56,7 +56,7 @@ var DEFAULT_HOOKS = {
     return errors;
   },
   // Returns the list of errors already found in FR by default.
-  onCancel: function onCancel() {} // Consuming application must provide function to action, else this does nothing.
+  onCancel: function onCancel(data) {} // Consuming application must provide function to action, else this does nothing.
 };
 
 var ALLOWED_HOOKS = Object.keys(DEFAULT_HOOKS);

package/dist/models/EventTypes.js

@@ -6,9 +6,11 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var TYPE_BLUR = 'blur';
 var TYPE_SUBMIT = 'submit';
+var TYPE_CANCEL = 'cancel';
 var EventTypes = {
   BLUR: TYPE_BLUR,
-  SUBMIT: TYPE_SUBMIT
+  SUBMIT: TYPE_SUBMIT,
+  CANCEL: TYPE_CANCEL
 };
 var _default = EventTypes;
 exports.default = _default;

package/dist/utils/CheckYourAnswers/showComponentCYA.js

@@ -9,6 +9,7 @@ var _Component = _interopRequireDefault(require("../Component"));
 var _Container = _interopRequireDefault(require("../Container"));
 var _getSourceData = _interopRequireDefault(require("../Data/getSourceData"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+/* eslint-disable no-console */
 // Local imports
 
 var EXCLUDE_FROM_CYA = [_models.ComponentTypes.ALERT, _models.ComponentTypes.HEADING, _models.ComponentTypes.HTML, _models.ComponentTypes.INSET_TEXT];

package/dist/utils/Component/getComponentTests/getComponent.calculation.test.js

@@ -148,7 +148,7 @@ describe('utils.Component.get', function () {
             expect(formGroup.classList).toContain('govuk-form-group');
             expect(input.tagName).toEqual('DIV');
             expect(input.classList).toContain('hods-readonly');
-            expect(input.dataset.id).toEqual(ID);
+            expect(input.id).toEqual(ID);
             expect("".concat(COMPONENT.formData[FIELD_ID])).toEqual(test.result);
           case 13:
           case "end":
@@ -258,7 +258,7 @@ describe('utils.Component.get', function () {
       expect(formGroup.classList).toContain('govuk-form-group');
       expect(input.tagName).toEqual('DIV');
       expect(input.classList).toContain('hods-readonly');
-      expect(input.dataset.id).toEqual(ID);
+      expect(input.id).toEqual(ID);
       expect(error).toBeCalledTimes(1);
       expect(error).toBeCalledWith(test.error);
     });

package/dist/utils/Component/getComponentTests/getComponent.nested.test.js

@@ -51,7 +51,7 @@ describe('utils.Component.get', function () {
           expect(input.tagName).toEqual('INPUT');
           expect(input.classList).toContain('govuk-input');
           expect(input.id).toEqual(ID);
-          expect(input.dataset.value).toEqual(VALUE);
+          expect(input.value).toEqual(VALUE);
           child2 = container.childNodes[1];
           expect(child2.childNodes[0].childNodes.length).toEqual(3);
           expect(child2.classList).toContain('govuk-form-group');
@@ -62,9 +62,9 @@ describe('utils.Component.get', function () {
           expect(input2.tagName).toEqual('DIV');
           expect(input2.classList).toContain('govuk-date-input');
           expect(input2.id).toEqual(ID2);
-          expect(input2.childNodes[0].childNodes[1].dataset.value).toEqual('1');
-          expect(input2.childNodes[1].childNodes[1].dataset.value).toEqual('2');
-          expect(input2.childNodes[2].childNodes[1].dataset.value).toEqual('2022');
+          expect(input2.childNodes[0].childNodes[1].value).toEqual('1');
+          expect(input2.childNodes[1].childNodes[1].value).toEqual('2');
+          expect(input2.childNodes[2].childNodes[1].value).toEqual('2022');
         case 35:
         case "end":
           return _context.stop();
@@ -133,7 +133,7 @@ describe('utils.Component.get', function () {
           expect(input.tagName).toEqual('INPUT');
           expect(input.classList).toContain('govuk-input');
           expect(input.id).toEqual("".concat(CONTAINER_ID, ".").concat(FIELD_ID));
-          expect(input.dataset.value).toEqual(VALUE);
+          expect(input.value).toEqual(VALUE);
         case 19:
         case "end":
           return _context3.stop();
@@ -172,7 +172,7 @@ describe('utils.Component.get', function () {
           expect(input.tagName).toEqual('INPUT');
           expect(input.classList).toContain('govuk-input');
           expect(input.id).toEqual("".concat(COLLECTION_ID, "[0].").concat(FIELD_ID));
-          expect(input.dataset.value).toEqual(VALUE);
+          expect(input.value).toEqual(VALUE);
         case 19:
         case "end":
           return _context4.stop();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ukhomeoffice/cop-react-form-renderer",
-  "version": "5.13.0",
+  "version": "5.13.2",
   "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": "^3.4.1",
+    "@ukhomeoffice/cop-react-components": "^3.4.2",
     "axios": "^0.23.0",
     "dayjs": "^1.11.0",
     "govuk-frontend": "^4.3.1",