@ukhomeoffice/cop-react-form-renderer 5.67.1 → 5.68.1

package/dist/components/CollectionSummary/CollectionSummary.js

@@ -57,6 +57,7 @@ var CollectionSummary = function CollectionSummary(_ref) {
     formData = _ref.formData,
     onAction = _ref.onAction,
     onChange = _ref.onChange,
+    onTopLevelChange = _ref.onTopLevelChange,
     pages = _ref.pages;
   var _useHooks = (0, _hooks.useHooks)(),
     hooks = _useHooks.hooks;
@@ -121,7 +122,7 @@ var CollectionSummary = function CollectionSummary(_ref) {
       // validating.
       var childPages = masterPage === null || masterPage === void 0 ? void 0 : masterPage.childPages.map(function (page) {
         return _objectSpread(_objectSpread({}, page), {}, {
-          formData: _objectSpread(_objectSpread({}, masterPage.formData), {}, _defineProperty({}, "".concat(config.collectionName, "ActiveId"), entry.id))
+          formData: _objectSpread(_objectSpread({}, formData), {}, _defineProperty({}, "".concat(config.collectionName.split('.').pop(), "ActiveId"), entry.id))
         });
       });
       var allPagesErrors = (childPages === null || childPages === void 0 ? void 0 : childPages.flatMap(function (page) {
@@ -182,14 +183,14 @@ var CollectionSummary = function CollectionSummary(_ref) {
     _utils.default.CollectionPage.duplicateEntry(config.collectionName, formData, entry.id, ((_config$card = config.card) === null || _config$card === void 0 || (_config$card = _config$card.duplicateAction) === null || _config$card === void 0 ? void 0 : _config$card.fieldsToIgnore) || [], {
       isDuplicate: true
     });
-    var parentCollection = config.collectionName.split('.').shift();
+    var topLevelCollectionName = config.collectionName.split('.').shift();
     // Report the whole top-level collection as being changed. We have to do this
     // because of how patch is applied to formData on a page submission.
-    if (typeof onChange === 'function') {
-      onChange({
+    if (typeof onTopLevelChange === 'function') {
+      onTopLevelChange({
         target: {
-          name: parentCollection,
-          value: _utils.default.CollectionPage.getData(parentCollection, formData)
+          name: topLevelCollectionName,
+          value: _utils.default.CollectionPage.getData(topLevelCollectionName, formData)
         }
       });
       validateEntries();
@@ -200,14 +201,14 @@ var CollectionSummary = function CollectionSummary(_ref) {
       return;
     }
     _utils.default.CollectionPage.removeEntry(config.collectionName, formData, entryToDelete.id);
-    var parentCollection = config.collectionName.split('.').shift();
+    var topLevelCollectionName = config.collectionName.split('.').shift();
     // Report the whole top-level collection as being changed. We have to do this
     // because of how patch is applied to formData on a page submission.
-    if (typeof onChange === 'function') {
-      onChange({
+    if (typeof onTopLevelChange === 'function') {
+      onTopLevelChange({
         target: {
-          name: parentCollection,
-          value: _utils.default.CollectionPage.getData(parentCollection, formData)
+          name: topLevelCollectionName,
+          value: _utils.default.CollectionPage.getData(topLevelCollectionName, formData)
         }
       });
     }
@@ -362,12 +363,14 @@ CollectionSummary.propTypes = {
   }).isRequired,
   onAction: _propTypes.default.func,
   onChange: _propTypes.default.func,
+  onTopLevelChange: _propTypes.default.func,
   formData: _propTypes.default.shape({}).isRequired,
   pages: _propTypes.default.arrayOf(_propTypes.default.shape({}))
 };
 CollectionSummary.defaultProps = {
   onAction: null,
   onChange: null,
+  onTopLevelChange: null,
   pages: []
 };
 var _default = exports.default = CollectionSummary;

package/dist/components/CollectionSummary/RenderListView.js

@@ -80,8 +80,11 @@ var RenderListView = function RenderListView(_ref) {
       return _utils.default.Component.elevateNested([component], entryData);
     }).flat().filter(Boolean);
     return (_childPage$summaryLay = childPage.summaryLayout) === null || _childPage$summaryLay === void 0 || (_childPage$summaryLay = _childPage$summaryLay.sections) === null || _childPage$summaryLay === void 0 ? void 0 : _childPage$summaryLay.flatMap(function (section) {
-      if (section.fields) {
-        return section.fields.flatMap(function (fieldId) {
+      var summaryFields = section.columns.flatMap(function (column) {
+        return column.fields || [];
+      });
+      if (summaryFields.length) {
+        return summaryFields.flatMap(function (fieldId) {
           var component = elevatedComponents.find(function (comp) {
             return comp.fieldId === fieldId;
           });

package/dist/components/CollectionSummary/RenderListView.test.js

@@ -25,7 +25,9 @@ describe('components.CollectionSummary.RenderListView', function () {
     childPages: [{
       summaryLayout: {
         sections: [{
-          fields: ['item1', 'item2', 'item3']
+          columns: [{
+            fields: ['item1', 'item2', 'item3']
+          }]
         }]
       },
       components: [{

package/dist/components/CollectionSummary/SummaryCardDetails.js

@@ -42,13 +42,75 @@ var SummaryCardDetails = function SummaryCardDetails(_ref) {
       return !!e;
     });
   }, [masterPage, childCollections]);
+  var getSectionContent = function getSectionContent(section, components, childPage) {
+    var columnIndex = 0;
+    return section.columns.flatMap(function (column, index) {
+      var _column$fields;
+      var rowIndex = 0;
+      var columnContent = (_column$fields = column.fields) === null || _column$fields === void 0 ? void 0 : _column$fields.flatMap(function (fieldId) {
+        var component = components.find(function (comp) {
+          return comp.fieldId === fieldId;
+        });
+        if (!component) {
+          return null;
+        }
+        if (component.type === _models.ComponentTypes.CONTAINER) {
+          var containerRows = (0, _getCYARowsForContainer.default)(childPage, component, entryData);
+          rowIndex += 1;
+          return /*#__PURE__*/_react.default.createElement("div", {
+            key: fieldId,
+            className: classes('field'),
+            style: {
+              '--column': columnIndex + 1,
+              '--row': rowIndex
+            }
+          }, containerRows.map(function (subComponent) {
+            var _entryData$component$;
+            // Put value for current subcomponent at top level
+            var modEntry = _objectSpread(_objectSpread({}, entryData), _defineProperty({}, subComponent.fieldId, (_entryData$component$ = entryData[component.fieldId]) === null || _entryData$component$ === void 0 ? void 0 : _entryData$component$[subComponent.fieldId]));
+            return (0, _getComponentRowForCYA.default)(childPage, _objectSpread(_objectSpread({}, subComponent), {
+              label: subComponent.key
+            }), classes, modEntry);
+          }));
+        }
+        rowIndex += 1;
+        return /*#__PURE__*/_react.default.createElement("div", {
+          key: fieldId,
+          className: classes('field'),
+          style: {
+            '--column': columnIndex + 1,
+            '--row': rowIndex
+          }
+        }, (0, _getComponentRowForCYA.default)(childPage, component, classes, entryData));
+      }).filter(function (e) {
+        return !!e;
+      });
+      // If the column that's just been generated has anything in it
+      // then we stick a divider on it's right side. The divider isn't
+      // passed rowIndex as it spans all rows. columnIndex is incremented
+      // twice to account for the divider column too.
+      var lastColumn = index === section.columns.length - 1;
+      if (!lastColumn && columnContent.length !== 0) {
+        columnIndex += 2;
+        return [].concat(columnContent, [/*#__PURE__*/_react.default.createElement("div", {
+          key: "divider".concat(columnIndex),
+          className: classes('divider'),
+          style: {
+            '--column': columnIndex
+          }
+        })]);
+      }
+      return columnContent;
+    }).filter(function (e) {
+      return !!e;
+    });
+  };
   return (masterPage === null || masterPage === void 0 || (_masterPage$childPage = masterPage.childPages) === null || _masterPage$childPage === void 0 ? void 0 : _masterPage$childPage.filter(function (p) {
     return _utils.default.FormPage.show(p, _objectSpread(_objectSpread({}, formData), entryData));
   }).map(function (childPage) {
     var _childPage$summaryLay;
     var allPageComponents = _utils.default.Component.elevateNested(childPage === null || childPage === void 0 ? void 0 : childPage.components, entryData);
     return (_childPage$summaryLay = childPage.summaryLayout) === null || _childPage$summaryLay === void 0 ? void 0 : _childPage$summaryLay.sections.map(function (section) {
-      var _section$fields;
       if (section.show_when && !_utils.default.Condition.meetsAll(section.show_when, _objectSpread(_objectSpread({}, formData), entryData))) {
         return null;
       }
@@ -78,33 +140,11 @@ var SummaryCardDetails = function SummaryCardDetails(_ref) {
       }, !hideChildSectionTitles && /*#__PURE__*/_react.default.createElement("h3", {
         className: classes('section-title')
       }, section.title), /*#__PURE__*/_react.default.createElement("div", {
-        className: classes('section-content', "columns-".concat(section.columns))
-      }, (_section$fields = section.fields) === null || _section$fields === void 0 ? void 0 : _section$fields.map(function (fieldId) {
-        var component = allPageComponents.find(function (comp) {
-          return comp.fieldId === fieldId;
-        });
-        if (!component) {
-          return null;
+        className: classes('section-content'),
+        style: {
+          '--dividers': section.columns.length - 1
         }
-        if (component.type === _models.ComponentTypes.CONTAINER) {
-          var containerRows = (0, _getCYARowsForContainer.default)(childPage, component, entryData);
-          return /*#__PURE__*/_react.default.createElement("div", {
-            key: fieldId,
-            className: classes('field')
-          }, containerRows.map(function (subComponent) {
-            var _entryData$component$;
-            // Put value for current subcomponent at top level
-            var modEntry = _objectSpread(_objectSpread({}, entryData), _defineProperty({}, subComponent.fieldId, (_entryData$component$ = entryData[component.fieldId]) === null || _entryData$component$ === void 0 ? void 0 : _entryData$component$[subComponent.fieldId]));
-            return (0, _getComponentRowForCYA.default)(childPage, _objectSpread(_objectSpread({}, subComponent), {
-              label: subComponent.key
-            }), classes, modEntry);
-          }));
-        }
-        return /*#__PURE__*/_react.default.createElement("div", {
-          key: fieldId,
-          className: classes('field')
-        }, (0, _getComponentRowForCYA.default)(childPage, component, classes, entryData));
-      })));
+      }, getSectionContent(section, allPageComponents, childPage)));
     });
   }).filter(function (e) {
     return !!e;

package/dist/components/CollectionSummary/SummaryCardDetails.scss

@@ -36,9 +36,12 @@ $govuk-font-family: 'Roboto', arial, sans-serif;
     border-bottom: 2px solid #E9EBED;
 
     &-content {
-      display: flex;
-      flex-wrap: wrap;
+      display: grid;
+      grid-template-columns: repeat(var(--dividers), 1fr 2px) 1fr;
+      grid-auto-rows: minmax(100px, 1fr);
       gap: govuk-spacing(2);
+      position: relative;
+      margin-bottom: govuk-spacing(1);
 
       .hods-form-summary-card__field {
         box-sizing: border-box;
@@ -61,6 +64,7 @@ $govuk-font-family: 'Roboto', arial, sans-serif;
         }
       }
 
+      /*
       &--columns-1,
       &--columns-2,
       &--columns-3 {
@@ -79,6 +83,9 @@ $govuk-font-family: 'Roboto', arial, sans-serif;
       }
 
       &--columns-2 {
+        display: grid;
+        grid-template-columns: repeat(2, 1fr);
+
         &::after {
           content: "";
           position: absolute;
@@ -89,12 +96,13 @@ $govuk-font-family: 'Roboto', arial, sans-serif;
           left: 50%;
         }
 
-        .hods-form-summary-card-details__field {
-          flex: 0 0 calc(50% - 10px);
-        }
+
       }
 
       &--columns-3 {
+        display: grid;
+        grid-template-columns: repeat(2, 1fr);
+
         &::after {
           content: "";
           position: absolute;
@@ -106,7 +114,10 @@ $govuk-font-family: 'Roboto', arial, sans-serif;
         }
 
         .hods-form-summary-card-details__field {
-          flex: 0 0 calc(33.333% - 10px);
+          grid-column-start: var("--column");
+          grid-column-end: var("--column");
+          grid-row-start: var("--row");
+          grid-row-end: var("--row");
 
           &:nth-child(2)::after {
             content: "";
@@ -119,6 +130,23 @@ $govuk-font-family: 'Roboto', arial, sans-serif;
           }
         }
       }
+      */
+
+      .hods-form-summary-card-details__field {
+        grid-column-start: var(--column);
+        grid-column-end: var(--column);
+        grid-row-start: var(--row);
+        grid-row-end: var(--row);
+      }
+
+      .hods-form-summary-card-details__divider {
+        position: absolute;
+        height: 100%;
+        width: 100%;
+        background-color: #E9EBED;
+        grid-column-start: var(--column);
+        grid-column-end: var(--column);
+      }
     }
   }
 }
@@ -137,6 +165,15 @@ $govuk-font-family: 'Roboto', arial, sans-serif;
           display: none;
         }
 
+        .hods-form-summary-card-details__divider {
+          position: absolute;
+          height: 0%;
+          width: 0%;
+          background-color: #E9EBED;
+          grid-column-start: var(--column);
+          grid-column-end: var(--column);
+        }
+
         &--columns-2,
         &--columns-3 {
           position: relative;

package/dist/components/CollectionSummary/SummaryCardDetails.test.js

@@ -38,12 +38,16 @@ describe('components.CollectionSummary.SummaryCardDetails', function () {
       summaryLayout: {
         sections: [{
           title: 'Section 1',
-          columns: 2,
-          fields: ['fieldA', 'fieldB']
+          columns: [{
+            fields: ['fieldA']
+          }, {
+            fields: ['fieldB']
+          }]
         }, {
           title: 'Section 2',
-          columns: 1,
-          fields: ['fieldC']
+          columns: [{
+            fields: ['fieldC']
+          }]
         }]
       },
       components: [{
@@ -87,8 +91,9 @@ describe('components.CollectionSummary.SummaryCardDetails', function () {
       summaryLayout: {
         sections: [{
           title: 'Section 1',
-          columns: 1,
-          fields: ['containerComponent']
+          columns: [{
+            fields: ['containerComponent']
+          }]
         }]
       },
       components: [{
@@ -156,8 +161,11 @@ describe('components.CollectionSummary.SummaryCardDetails', function () {
       summaryLayout: {
         sections: [{
           title: 'Section 1',
-          columns: 2,
-          fields: ['fieldA', 'fieldB'],
+          columns: [{
+            fields: ['fieldA']
+          }, {
+            fields: ['fieldB']
+          }],
           show_when: [{
             field: 'showSection1',
             op: "=",
@@ -165,8 +173,9 @@ describe('components.CollectionSummary.SummaryCardDetails', function () {
           }]
         }, {
           title: 'Section 2',
-          columns: 1,
-          fields: ['fieldC']
+          columns: [{
+            fields: ['fieldC']
+          }]
         }]
       },
       components: [{
@@ -213,8 +222,11 @@ describe('components.CollectionSummary.SummaryCardDetails', function () {
       summaryLayout: {
         sections: [{
           title: 'Section 1',
-          columns: 2,
-          fields: ['fieldA', 'fieldB'],
+          columns: [{
+            fields: ['fieldA']
+          }, {
+            fields: ['fieldB']
+          }],
           show_when: [{
             field: 'showSection1',
             op: "=",
@@ -222,8 +234,9 @@ describe('components.CollectionSummary.SummaryCardDetails', function () {
           }]
         }, {
           title: 'Section 2',
-          columns: 1,
-          fields: ['fieldC']
+          columns: [{
+            fields: ['fieldC']
+          }]
         }]
       },
       components: [{
@@ -273,8 +286,11 @@ describe('components.CollectionSummary.SummaryCardDetails', function () {
       summaryLayout: {
         sections: [{
           title: 'Section 1',
-          columns: 2,
-          fields: ['fieldA', 'fieldB'],
+          columns: [{
+            fields: ['fieldA']
+          }, {
+            fields: ['fieldB']
+          }],
           show_when: [{
             field: 'showSection1',
             op: "=",
@@ -282,8 +298,9 @@ describe('components.CollectionSummary.SummaryCardDetails', function () {
           }]
         }, {
           title: 'Section 2',
-          columns: 1,
-          fields: ['fieldC']
+          columns: [{
+            fields: ['fieldC']
+          }]
         }]
       },
       components: [{
@@ -337,8 +354,11 @@ describe('components.CollectionSummary.SummaryCardDetails', function () {
         summaryLayout: {
           sections: [{
             title: 'Hidden Title',
-            columns: 2,
-            fields: ['childfield1', 'childfield2']
+            columns: [{
+              fields: ['childfield1']
+            }, {
+              fields: ['childfield2']
+            }]
           }]
         }
       }]

package/dist/components/FormComponent/FormComponent.js

@@ -130,6 +130,7 @@ var FormComponent = function FormComponent(_ref) {
       formData: formData,
       onAction: onAction,
       onChange: onChange,
+      onTopLevelChange: onTopLevelChange,
       pages: pages
     })));
   }

package/dist/components/FormRenderer/FormRenderer.js

@@ -302,7 +302,7 @@ var InternalFormRenderer = function InternalFormRenderer(_ref2) {
         setData(newData);
       }
     }
-    if (((_formState$page3 = formState.page) === null || _formState$page3 === void 0 ? void 0 : _formState$page3.type) === _models.FormPages.PARTIAL_CYA) {
+    if (((_formState$page3 = formState.page) === null || _formState$page3 === void 0 ? void 0 : _formState$page3.type) === _models.FormPages.PARTIAL_CYA && !cya.disableTaskSwitch) {
       hubDetails.sections.every(function (section) {
         return section.tasks.every(function (task) {
           if (task.pages.includes(page.pageId) && task.name !== currentTask.name) {
@@ -383,7 +383,8 @@ var propTypes = {
   className: _propTypes.default.string,
   components: _propTypes.default.arrayOf(_propTypes.default.shape({})).isRequired,
   cya: _propTypes.default.shape({
-    actions: _propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.shape({}), _propTypes.default.string]))
+    actions: _propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.shape({}), _propTypes.default.string])),
+    disableTaskSwitch: _propTypes.default.bool
   }),
   data: _propTypes.default.shape({
     formStatus: _propTypes.default.shape({
@@ -412,7 +413,8 @@ var defaultProps = {
   className: '',
   classModifiers: [],
   cya: {
-    actions: []
+    actions: [],
+    disableTaskSwitch: false
   },
   data: null,
   hashLink: false,

package/dist/context/ValidationContext/ValidationContext.js

@@ -112,7 +112,6 @@ var ValidationContextProvider = function ValidationContextProvider(_ref) {
       var pageErrors = _utils.default.Validate.page(_page, queuedErrors);
       var allErrors = hooks.onValidate(_page, pageErrors);
       setErrors(allErrors);
-      setQueuedErrors([]);
       return allErrors;
     },
     pages: function pages(_pages) {
@@ -123,7 +122,6 @@ var ValidationContextProvider = function ValidationContextProvider(_ref) {
         return hooks.onValidate(page, pageErrors[index]);
       });
       setErrors(allErrors);
-      setQueuedErrors([]);
       return allErrors;
     }
   };

package/dist/utils/Validate/validatePage.js

@@ -8,6 +8,7 @@ var _copReactComponents = require("@ukhomeoffice/cop-react-components");
 var _validateComponent = _interopRequireDefault(require("./validateComponent"));
 var _CollectionPage = _interopRequireDefault(require("../CollectionPage"));
 var _showFormPage = _interopRequireDefault(require("../FormPage/showFormPage"));
+var _showComponent = _interopRequireDefault(require("../Component/showComponent"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
@@ -34,6 +35,9 @@ var validatePage = function validatePage(page) {
   }
   if ((0, _showFormPage.default)(page, data) && Array.isArray(page.components)) {
     var errs = page.components.reduce(function (errors, component) {
+      if (!(0, _showComponent.default)(component, data)) {
+        return errors;
+      }
       var queuedComponentErrors = queuedErrors.length > 0 ? queuedErrors.filter(function (e) {
         return e.showFor ? e.showFor === component.id : e.id === component.id;
       }) : [];

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

@@ -762,5 +762,30 @@ describe('utils.Validate.Page', function () {
       expect(RESULT[0]).toEqual(_objectSpread({}, QUEUED_ERRORS[0]));
       expect(RESULT[1]).toEqual(_objectSpread({}, QUEUED_ERRORS[1]));
     });
+    it('should return any queued errors if the component is not shown', function () {
+      var COMPONENTS = [_objectSpread(_objectSpread({}, setup('a', _models.ComponentTypes.TEXT, 'Alpha', true)), {}, {
+        show_when: [{
+          field: 'b',
+          op: '=',
+          value: 'yes'
+        }]
+      })];
+      var PAGE = {
+        components: COMPONENTS,
+        formData: {
+          a: 'Value',
+          b: 'no'
+        }
+      };
+      var QUEUED_ERRORS = [{
+        id: 'a',
+        error: 'Error queued for Alpha 1'
+      }, {
+        id: 'a',
+        error: 'Error queued for Alpha 2'
+      }];
+      var RESULT = (0, _validatePage.default)(PAGE, QUEUED_ERRORS);
+      expect(RESULT.length).toEqual(0);
+    });
   });
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ukhomeoffice/cop-react-form-renderer",
-  "version": "5.67.1",
+  "version": "5.68.1",
   "private": false,
   "scripts": {
     "clean": "rimraf dist",