@ukhomeoffice/cop-react-form-renderer 4.86.0 → 4.88.0

package/dist/components/CheckYourAnswers/CheckYourAnswers.js

@@ -64,7 +64,7 @@ var CheckYourAnswers = function CheckYourAnswers(_ref) {
     hooks = _useHooks.hooks;
   (0, _react.useEffect)(function () {
     var getRows = function getRows(page, pageIndex) {
-      var rows = _utils.default.CheckYourAnswers.getRows(page, onRowAction);
+      var rows = _utils.default.CheckYourAnswers.getRows(page, onRowAction, hooks.onGetCYARows);
       return rows.map(function (row, index) {
         return _objectSpread(_objectSpread({}, row), {}, {
           value: /*#__PURE__*/_react.default.createElement(_Answer.default, {

package/dist/context/HooksContext/HooksContext.js

@@ -31,8 +31,13 @@ var DEFAULT_HOOKS = {
   onGetCYA: function onGetCYA(config) {
     return null;
   },
+  // onGetCYARows should return either a single row, or an array of rows for the given component.
+  // If it returns null then Form Renderer will attempt to get the default rows for the component.
+  onGetCYARows: function onGetCYARows(page, component, onAction) {
+    return null;
+  },
   onGoingBack: function onGoingBack() {},
-  onPageChange: function onPageChange(pageId) {
+  onPageChange: function onPageChange(pageId, state) {
     return pageId;
   },
   onRequest: function onRequest(req) {
@@ -61,6 +66,7 @@ var HooksContextProvider = function HooksContextProvider(_ref) {
       onFormLoad: (overrides === null || overrides === void 0 ? void 0 : overrides.onFormLoad) || DEFAULT_HOOKS.onFormLoad,
       onGetComponent: (overrides === null || overrides === void 0 ? void 0 : overrides.onGetComponent) || DEFAULT_HOOKS.onGetComponent,
       onGetCYA: (overrides === null || overrides === void 0 ? void 0 : overrides.onGetCYA) || DEFAULT_HOOKS.onGetCYA,
+      onGetCYARows: (overrides === null || overrides === void 0 ? void 0 : overrides.onGetCYARows) || DEFAULT_HOOKS.onGetCYARows,
       onGoingBack: (overrides === null || overrides === void 0 ? void 0 : overrides.onGoingBack) || DEFAULT_HOOKS.onGoingBack,
       onPageChange: (overrides === null || overrides === void 0 ? void 0 : overrides.onPageChange) || DEFAULT_HOOKS.onPageChange,
       onRequest: (overrides === null || overrides === void 0 ? void 0 : overrides.onRequest) || DEFAULT_HOOKS.onRequest,
@@ -104,6 +110,7 @@ HooksContextProvider.propTypes = {
     onFormLoad: _propTypes.default.func,
     onGetComponent: _propTypes.default.func,
     onGetCYA: _propTypes.default.func,
+    onGetCYARows: _propTypes.default.func,
     onGoingBack: _propTypes.default.func,
     onPageChange: _propTypes.default.func,
     onRequest: _propTypes.default.func,
@@ -120,6 +127,7 @@ HooksContextProvider.defaultProps = {
     onFormLoad: undefined,
     onGetComponent: undefined,
     onGetCYA: undefined,
+    onGetCYARows: undefined,
     onGoingBack: undefined,
     onPageChange: undefined,
     onRequest: undefined,

package/dist/utils/CheckYourAnswers/getCYARowsForCollection.js

@@ -59,14 +59,14 @@ var getTitleRowForItem = function getTitleRowForItem(collection, item, pageId, l
   }
   return null;
 };
-var getCYARowsForCollection = function getCYARowsForCollection(page, collection, items, onAction) {
+var getCYARowsForCollection = function getCYARowsForCollection(page, collection, items, onAction, fnOverride) {
   if (Array.isArray(items) && items.length && (0, _showComponentCYA.default)(collection, page.formData)) {
     return items.flatMap(function (item, index) {
       var labelCount = (collection.countOffset || 0) + index + 1;
       var fullPath = "".concat(collection.full_path || collection.fieldId, "[").concat(index, "]");
       var container = getContainerForItem(collection, item, labelCount, fullPath);
       container = (0, _setupContainerComponentsPath.default)(container);
-      return [getTitleRowForItem(collection, item, page.id, labelCount, fullPath)].concat((0, _getCYARowsForContainer.default)(page, container, item, onAction));
+      return [getTitleRowForItem(collection, item, page.id, labelCount, fullPath)].concat((0, _getCYARowsForContainer.default)(page, container, item, onAction, fnOverride));
     }).filter(function (r) {
       return !!r;
     });

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

@@ -181,4 +181,108 @@ describe('utils.CheckYourAnswers.getCYARowsForCollection', function () {
       value: 'Bravo'
     });
   });
+  it('should ignore the result of the override function if it returns nullish', function () {
+    var FORM_DATA = {
+      collection: [{
+        a: 'Bravo'
+      }]
+    };
+    var PAGE = {
+      id: 'page',
+      formData: FORM_DATA,
+      cya_link: {}
+    };
+    var COMPONENT = {
+      type: 'text',
+      readonly: true,
+      id: 'a',
+      fieldId: 'a',
+      label: 'Alpha'
+    };
+    var COLLECTION = {
+      id: 'collection',
+      fieldId: 'collection',
+      type: _models.ComponentTypes.COLLECTION,
+      countOffset: 22,
+      item: [COMPONENT],
+      value: FORM_DATA.collection,
+      formData: FORM_DATA
+    };
+    var ON_ACTION = function ON_ACTION() {};
+    var ROWS = (0, _getCYARowsForCollection.default)(PAGE, COLLECTION, FORM_DATA.collection, ON_ACTION, function () {
+      return null;
+    });
+    expect(ROWS.length).toEqual(2); // Item title row + component row
+    (0, _setupTests.expectObjectLike)(ROWS[0], {
+      pageId: PAGE.id,
+      fieldId: COLLECTION.fieldId,
+      full_path: "".concat(COLLECTION.fieldId, "[0]"),
+      key: 'Item 23',
+      // includes countOffset
+      type: 'title',
+      action: null
+    });
+    (0, _setupTests.expectObjectLike)(ROWS[1], {
+      pageId: PAGE.id,
+      fieldId: COMPONENT.fieldId,
+      full_path: "".concat(COLLECTION.fieldId, "[0].").concat(COMPONENT.fieldId),
+      key: COMPONENT.label,
+      action: null,
+      component: _objectSpread(_objectSpread({}, COMPONENT), {}, {
+        full_path: "".concat(COLLECTION.fieldId, "[0].").concat(COMPONENT.fieldId)
+      }),
+      value: 'Bravo'
+    });
+  });
+  it('should use rows produced by the override function if provided', function () {
+    var FORM_DATA = {
+      collection: [{
+        a: 'Bravo'
+      }]
+    };
+    var PAGE = {
+      id: 'page',
+      formData: FORM_DATA,
+      cya_link: {}
+    };
+    var COMPONENT = {
+      type: 'text',
+      readonly: true,
+      id: 'a',
+      fieldId: 'a',
+      label: 'Alpha'
+    };
+    var COLLECTION = {
+      id: 'collection',
+      fieldId: 'collection',
+      type: _models.ComponentTypes.COLLECTION,
+      countOffset: 22,
+      item: [COMPONENT],
+      value: FORM_DATA.collection,
+      formData: FORM_DATA
+    };
+    var ON_ACTION = function ON_ACTION() {};
+    // eslint-disable-next-line arrow-body-style
+    var OVERRIDE = function OVERRIDE(page, comp) {
+      // This will be called for each component in the collection,
+      // returning a custom row object.
+      return {
+        key: "CustomRowFor".concat(comp.label)
+      };
+    };
+    var ROWS = (0, _getCYARowsForCollection.default)(PAGE, COLLECTION, FORM_DATA.collection, ON_ACTION, OVERRIDE);
+    expect(ROWS.length).toEqual(2); // Item title row + component row
+    (0, _setupTests.expectObjectLike)(ROWS[0], {
+      pageId: PAGE.id,
+      fieldId: COLLECTION.fieldId,
+      full_path: "".concat(COLLECTION.fieldId, "[0]"),
+      key: 'Item 23',
+      // includes countOffset
+      type: 'title',
+      action: null
+    });
+    (0, _setupTests.expectObjectLike)(ROWS[1], {
+      key: "CustomRowFor".concat(COMPONENT.label)
+    });
+  });
 });

package/dist/utils/CheckYourAnswers/getCYARowsForCollectionPage.js

@@ -89,7 +89,7 @@ var getChangeActionForPage = function getChangeActionForPage(page, item, onActio
     }, changeCallback);
   };
 };
-var getCYARowsForCollectionPage = function getCYARowsForCollectionPage(page, onAction) {
+var getCYARowsForCollectionPage = function getCYARowsForCollectionPage(page, onAction, fnOverride) {
   var _page$formData, _page$formData$page$c, _page$formData2, _page$formData2$page$;
   if (!((_page$formData = page.formData) !== null && _page$formData !== void 0 && (_page$formData$page$c = _page$formData[page.collection.name]) !== null && _page$formData$page$c !== void 0 && _page$formData$page$c.length)) {
     return [];
@@ -129,7 +129,7 @@ var getCYARowsForCollectionPage = function getCYARowsForCollectionPage(page, onA
         }
         var container = getContainerForPage(collectionPage, item, labelCount, fullPath);
         var rowChangeAction = getChangeActionForPage(collectionPage, item, onAction);
-        var containerRows = (0, _getCYARowsForContainer.default)(collectionPage, container, item, rowChangeAction);
+        var containerRows = (0, _getCYARowsForContainer.default)(collectionPage, container, item, rowChangeAction, fnOverride);
         rows = rows.concat(containerRows);
       }
     });

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

@@ -372,4 +372,43 @@ describe('utils.CheckYourAnswers.getCYARowsForCollectionPage', function () {
     expect(ROWS[ROWS.length - 2].action.label).toEqual('custom remove label');
     expect(ROWS[ROWS.length - 1].action.label).toEqual('custom change label');
   });
+  it('should ignore the result of the override function if it returns nullish', function () {
+    var FORM_DATA = {
+      collection: [{
+        id: '01',
+        testText: 'value'
+      }]
+    };
+    var PAGE = _objectSpread(_objectSpread({}, MASTER_PAGE), {}, {
+      formData: FORM_DATA
+    });
+    var ROWS = (0, _getCYARowsForCollectionPage.default)(PAGE, null, function () {
+      return null;
+    });
+    expect(ROWS.length).toEqual(7); // Collection title, item title, action rows & component rows
+    expect(ROWS[5].key).toEqual("Test text");
+  });
+  it('should use the rows produced by the override function if provided', function () {
+    var FORM_DATA = {
+      collection: [{
+        id: '01',
+        testText: 'value'
+      }]
+    };
+
+    // eslint-disable-next-line arrow-body-style
+    var OVERRIDE = function OVERRIDE(page, comp) {
+      // This will be called for each component on the page,
+      // returning a custom row object.
+      return {
+        key: "CustomRowFor".concat(comp.label)
+      };
+    };
+    var PAGE = _objectSpread(_objectSpread({}, MASTER_PAGE), {}, {
+      formData: FORM_DATA
+    });
+    var ROWS = (0, _getCYARowsForCollectionPage.default)(PAGE, null, OVERRIDE);
+    expect(ROWS.length).toEqual(7); // Collection title, item title, action rows & component rows
+    expect(ROWS[5].key).toEqual("CustomRowFor".concat(TEXT_COMP.label));
+  });
 });

package/dist/utils/CheckYourAnswers/getCYARowsForContainer.js

@@ -16,18 +16,26 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
 function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
-var getCYARowsForContainer = function getCYARowsForContainer(page, container, formData, onAction) {
+var getCYARowsForContainer = function getCYARowsForContainer(page, container, formData, onAction, fnOverride) {
   if ((0, _showComponentCYA.default)(container, _objectSpread(_objectSpread({}, page.formData), formData))) {
     var allComponents = (0, _elevateNestedComponents.default)(container.components, formData);
     return allComponents.filter(function (c) {
       return (0, _showComponentCYA.default)(c, _objectSpread(_objectSpread({}, page.formData), formData));
     }).flatMap(function (component) {
       var fd = formData ? formData[component.fieldId] : undefined;
+      if (typeof fnOverride === 'function') {
+        var overrideRows = fnOverride(_objectSpread(_objectSpread({}, page), {}, {
+          formData: formData
+        }), component, onAction);
+        if (overrideRows) {
+          return overrideRows;
+        }
+      }
       if (component.type === _models.ComponentTypes.CONTAINER) {
-        return getCYARowsForContainer(page, component, _objectSpread(_objectSpread({}, fd), formData), onAction);
+        return getCYARowsForContainer(page, component, _objectSpread(_objectSpread({}, fd), formData), onAction, fnOverride);
       }
       if (component.type === _models.ComponentTypes.COLLECTION) {
-        return (0, _getCYARowsForCollection.default)(page, component, fd, onAction);
+        return (0, _getCYARowsForCollection.default)(page, component, fd, onAction, fnOverride);
       }
       return (0, _getCYARow.default)(_objectSpread(_objectSpread({}, page), {}, {
         formData: formData

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

@@ -384,4 +384,103 @@ describe('utils.CheckYourAnswers.getCYARowsForContainer', function () {
     var ROWS = (0, _getCYARowsForContainer.default)(PAGE, CONTAINER, FORM_DATA.container, ON_ACTION);
     expect(ROWS.length).toEqual(2);
   });
+  it('should ignore the result of the override function if it returns nullish', function () {
+    var FORM_DATA = {
+      container: {
+        a: 'Alpha Charlie',
+        b: 'Bravo Charlie'
+      }
+    };
+    var PAGE = {
+      id: 'page',
+      formData: FORM_DATA,
+      cya_link: {}
+    };
+    var COMPONENT_A = {
+      type: 'text',
+      id: 'a',
+      fieldId: 'a',
+      label: 'Alpha'
+    };
+    var COMPONENT_B = {
+      type: 'text',
+      id: 'b',
+      fieldId: 'b',
+      label: 'Bravo'
+    };
+    var CONTAINER = {
+      id: 'container',
+      fieldId: 'container',
+      type: _models.ComponentTypes.CONTAINER,
+      components: [COMPONENT_A, COMPONENT_B],
+      value: FORM_DATA.container,
+      formData: FORM_DATA
+    };
+    var ON_ACTION = function ON_ACTION() {};
+    var ROWS = (0, _getCYARowsForContainer.default)(PAGE, CONTAINER, FORM_DATA.container, ON_ACTION, function () {
+      return null;
+    });
+    expect(ROWS.length).toEqual(2);
+    ROWS.forEach(function (row, index) {
+      (0, _setupTests.expectObjectLike)(row, {
+        pageId: PAGE.id,
+        fieldId: CONTAINER.components[index].fieldId,
+        key: CONTAINER.components[index].label,
+        component: CONTAINER.components[index],
+        value: "".concat(CONTAINER.components[index].label, " Charlie")
+      });
+      (0, _setupTests.expectObjectLike)(row.action, {
+        onAction: ON_ACTION
+      });
+    });
+  });
+  it('should use rows produced by the override function if provided', function () {
+    var FORM_DATA = {
+      container: {
+        a: 'Alpha Charlie',
+        b: 'Bravo Charlie'
+      }
+    };
+    var PAGE = {
+      id: 'page',
+      formData: FORM_DATA,
+      cya_link: {}
+    };
+    var COMPONENT_A = {
+      type: 'text',
+      id: 'a',
+      fieldId: 'a',
+      label: 'Alpha'
+    };
+    var COMPONENT_B = {
+      type: 'text',
+      id: 'b',
+      fieldId: 'b',
+      label: 'Bravo'
+    };
+    var CONTAINER = {
+      id: 'container',
+      fieldId: 'container',
+      type: _models.ComponentTypes.CONTAINER,
+      components: [COMPONENT_A, COMPONENT_B],
+      value: FORM_DATA.container,
+      formData: FORM_DATA
+    };
+    var ON_ACTION = function ON_ACTION() {};
+    // eslint-disable-next-line arrow-body-style
+    var OVERRIDE = function OVERRIDE(page, comp) {
+      // This will be called for each component in the container,
+      // returning a custom row object.
+      return {
+        key: "CustomRowFor".concat(comp.label)
+      };
+    };
+    var ROWS = (0, _getCYARowsForContainer.default)(PAGE, CONTAINER, FORM_DATA.container, ON_ACTION, OVERRIDE);
+    expect(ROWS.length).toEqual(2);
+    expect(ROWS).toEqual([{
+      key: 'CustomRowForAlpha'
+    }, {
+      key: 'CustomRowForBravo'
+    }]);
+  });
 });

package/dist/utils/CheckYourAnswers/getCYARowsForPage.js

@@ -21,24 +21,32 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
  *
  * @param {object} page The page to show components for.
  * @param {Function} onAction A function to invoke if the change link on any row is clicked.
+ * @param {Function} fnOverride An optional override for getting the CYA rows for each component.
  *
  * @returns An array of configuration objects for Check your answers rows.
  */
 var getCYARowsForPage = function getCYARowsForPage(page, onAction) {
+  var fnOverride = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : null;
   if (_FormPage.default.showCYA(page, page.formData)) {
     var _page$groups;
     if (page.collection) {
-      return (0, _getCYARowsForCollectionPage.default)(page, onAction);
+      return (0, _getCYARowsForCollectionPage.default)(page, onAction, fnOverride);
     }
     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) {
+      if (typeof fnOverride === 'function') {
+        var overrideRows = fnOverride(page, component, onAction);
+        if (overrideRows) {
+          return overrideRows;
+        }
+      }
       switch (component.type) {
         case _models.ComponentTypes.CONTAINER:
-          return (0, _getCYARowsForContainer.default)(page, component, page.formData[component.fieldId], onAction);
+          return (0, _getCYARowsForContainer.default)(page, component, page.formData[component.fieldId], onAction, fnOverride);
         case _models.ComponentTypes.COLLECTION:
-          return (0, _getCYARowsForCollection.default)(page, component, page.formData[component.fieldId], onAction);
+          return (0, _getCYARowsForCollection.default)(page, component, page.formData[component.fieldId], onAction, fnOverride);
         default:
           return (0, _getCYARow.default)(page, component, onAction);
       }

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

@@ -262,6 +262,85 @@ describe('utils', function () {
           value: 'Bravo'
         });
       });
+      it('should ignore the result of the override function if it returns nullish', function () {
+        var COMPONENT_A = {
+          type: 'text',
+          id: 'a',
+          fieldId: 'a',
+          label: 'Alpha'
+        };
+        var COMPONENT_B = {
+          type: 'text',
+          id: 'b',
+          fieldId: 'b',
+          label: 'Bravo'
+        };
+        var PAGE = {
+          id: 'page',
+          components: [COMPONENT_A, COMPONENT_B],
+          formData: {
+            a: 'Alpha Charlie',
+            b: 'Bravo Charlie'
+          },
+          cya_link: {}
+        };
+        var ON_ACTION = function ON_ACTION() {};
+        var ROWS = (0, _getCYARowsForPage.default)(PAGE, ON_ACTION, function () {
+          return null;
+        });
+        expect(ROWS.length).toEqual(2);
+        ROWS.forEach(function (row, index) {
+          (0, _setupTests.expectObjectLike)(row, {
+            pageId: PAGE.id,
+            fieldId: PAGE.components[index].fieldId,
+            key: PAGE.components[index].label,
+            component: PAGE.components[index],
+            value: "".concat(PAGE.components[index].label, " Charlie")
+          });
+          (0, _setupTests.expectObjectLike)(row.action, {
+            onAction: ON_ACTION
+          });
+        });
+      });
+      it('should use rows produced by the override function if provided', function () {
+        var COMPONENT_A = {
+          type: 'text',
+          id: 'a',
+          fieldId: 'a',
+          label: 'Alpha'
+        };
+        var COMPONENT_B = {
+          type: 'text',
+          id: 'b',
+          fieldId: 'b',
+          label: 'Bravo'
+        };
+        var PAGE = {
+          id: 'page',
+          components: [COMPONENT_A, COMPONENT_B],
+          formData: {
+            a: 'Alpha Charlie',
+            b: 'Bravo Charlie'
+          },
+          cya_link: {}
+        };
+        var ON_ACTION = function ON_ACTION() {};
+        // eslint-disable-next-line arrow-body-style
+        var OVERRIDE = function OVERRIDE(page, comp) {
+          // This will be called for each component on the page,
+          // returning a custom row object.
+          return {
+            key: "CustomRowFor".concat(comp.label)
+          };
+        };
+        var ROWS = (0, _getCYARowsForPage.default)(PAGE, ON_ACTION, OVERRIDE);
+        expect(ROWS.length).toEqual(2);
+        expect(ROWS).toEqual([{
+          key: 'CustomRowForAlpha'
+        }, {
+          key: 'CustomRowForBravo'
+        }]);
+      });
     });
   });
 });

package/dist/utils/Component/getComponent.js

@@ -22,7 +22,6 @@ function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input ==
 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 LIST_CLASS = 'govuk-list';
 var BODY_CLASS = 'govuk-body';
-var INPUT_CLASS = 'govuk-input';
 
 /**
  * Separate function for each component type for the sake of
@@ -159,13 +158,7 @@ var getTextArea = function getTextArea(config) {
 };
 var getTextInput = function getTextInput(config) {
   var attrs = (0, _cleanAttributes.default)(config);
-  var classModifiers = attrs.fixedWidth ? [attrs.fixedWidth] : [];
-  var className = attrs.fluidWidth ? [attrs.fluidWidth] : undefined;
-  return /*#__PURE__*/_react.default.createElement(_copReactComponents.TextInput, _extends({}, attrs, {
-    classBlock: INPUT_CLASS,
-    classModifiers: classModifiers,
-    className: className
-  }));
+  return /*#__PURE__*/_react.default.createElement(_copReactComponents.TextInput, attrs);
 };
 var getTime = function getTime(config) {
   var attrs = (0, _cleanAttributes.default)(config);

package/dist/utils/Validate/validateCollection.js

@@ -32,10 +32,10 @@ var validateCollection = function validateCollection(collection, items, formData
           var newComponent = _objectSpread(_objectSpread({}, component), {}, {
             full_path: "".concat(fullPath, ".").concat(component.fieldId)
           });
-          if (Array.isArray(component.custom_errors)) {
+          if (component.custom_errors && Array.isArray(component.custom_errors)) {
             newComponent.custom_errors = component.custom_errors.map(function (error) {
               return _objectSpread(_objectSpread({}, error), {}, {
-                message: _copReactComponents.Utils.interpolateString(error.message, {
+                message: _copReactComponents.Utils.interpolateString(index === 0 && error.firstOnlyMessage ? error.firstOnlyMessage : error.message, {
                   index: labelCount
                 })
               });

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

@@ -86,4 +86,40 @@ describe('utils.Validate.Collection', function () {
       id: "".concat(ID, "[0].").concat(COLLECTION.type)
     }]);
   });
+  it('should correctly display firstOnlyMessage error message', function () {
+    var ID = 'container';
+    var LABEL = 'field';
+    var TYPE = 'autocomplete';
+    var ITEM = setup(ID, TYPE, LABEL, true, []);
+    ITEM.custom_errors = [{
+      "type": "required",
+      // eslint-disable-next-line no-template-curly-in-string
+      "message": "Test to check that ${index} is 1",
+      "firstOnlyMessage": "Test for first message"
+    }];
+    var COLLECTION = setup(ID, _models.ComponentTypes.CONTAINER, LABEL, false, [ITEM]);
+    COLLECTION.countOffset = 0;
+    expect((0, _validateCollection.default)(COLLECTION, ITEM.custom_errors)).toEqual([{
+      error: "Test for first message",
+      id: "".concat(ID, "[0].").concat(COLLECTION.type)
+    }]);
+  });
+  it('should correctly display message if firstOnlyMessage is undefined', function () {
+    var ID = 'container';
+    var LABEL = 'field';
+    var TYPE = 'autocomplete';
+    var ITEM = setup(ID, TYPE, LABEL, true, []);
+    ITEM.custom_errors = [{
+      "type": "required",
+      // eslint-disable-next-line no-template-curly-in-string
+      "message": "Test to check that ${index} is 1",
+      "firstOnlyMessage": undefined
+    }];
+    var COLLECTION = setup(ID, _models.ComponentTypes.CONTAINER, LABEL, false, [ITEM]);
+    COLLECTION.countOffset = 0;
+    expect((0, _validateCollection.default)(COLLECTION, ITEM.custom_errors)).toEqual([{
+      error: "Test to check that 1 is 1",
+      id: "".concat(ID, "[0].").concat(COLLECTION.type)
+    }]);
+  });
 });

package/package.json

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