@ukhomeoffice/cop-react-form-renderer 4.54.0 → 4.55.1-alpha

package/dist/components/FormPage/FormPage.js

@@ -57,6 +57,7 @@ var FormPage = function FormPage(_ref) {
       _onAction = _ref.onAction,
       onWrapperChange = _ref.onWrapperChange,
       onTopLevelChange = _ref.onTopLevelChange,
+      onChange = _ref.onChange,
       classBlock = _ref.classBlock,
       classModifiers = _ref.classModifiers,
       className = _ref.className;
@@ -89,6 +90,12 @@ var FormPage = function FormPage(_ref) {
     setPatchLabel(function (prev) {
       return _objectSpread(_objectSpread({}, prev), {}, _defineProperty({}, target.component, target.label));
     });
+
+    if (typeof onChange === 'function') {
+      onChange(page.formData);
+    }
+
+    ;
   };
 
   (0, _react.useEffect)(function () {
@@ -143,6 +150,7 @@ FormPage.propTypes = {
   // onPageChange functionality. Useful for anything that
   // wants to wrap FormPage.
   onWrapperChange: _propTypes.default.func,
+  onChange: _propTypes.default.func,
   classBlock: _propTypes.default.string,
   classModifiers: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.arrayOf(_propTypes.default.string)]),
   className: _propTypes.default.string

package/dist/components/FormRenderer/FormRenderer.js

@@ -183,13 +183,23 @@ var InternalFormRenderer = function InternalFormRenderer(_ref2) {
       validate = _useValidation.validate; // Need to set submission data when going back
 
 
-  window.onpopstate = function () {
+  window.onpopstate = function (e) {
     var _formState$page;
 
     if (document.location.hash) {
       return;
     }
 
+    if (e.state && e.state.fullPages !== undefined) {
+      setCurrentTask(function (prev) {
+        var _e$state;
+
+        return _objectSpread(_objectSpread({}, prev), {}, {
+          fullPages: (_e$state = e.state) === null || _e$state === void 0 ? void 0 : _e$state.fullPages
+        });
+      });
+    }
+
     setGoingBack(true);
     hooks.onGoingBack();
     clearErrors();
@@ -302,11 +312,16 @@ var InternalFormRenderer = function InternalFormRenderer(_ref2) {
 
   (0, _react.useEffect)(function () {
     if (newPageId !== undefined) setPageId(newPageId);
-  }, [newPageId]); // Handle actions from pages.
+  }, [newPageId]); // Handle change to form data in pages.
+
+  var onChange = function onChange(data) {
+    hooks.onChange(data);
+  }; // Handle actions from pages.
   // (patch captures payload-ready field name and value, 
   // patchLabel captures non-ID values 
   // for display purposes after submission.)
 
+
   var onPageAction = function onPageAction(action, patch, patchLabel) {
     if (action.type === _models.PageAction.TYPES.CANCEL) {
       hooks.onCancel();
@@ -342,8 +357,12 @@ var InternalFormRenderer = function InternalFormRenderer(_ref2) {
             break;
 
           case _models.PageAction.TYPES.SAVE_AND_NAVIGATE:
+            var state = {
+              'fullPages': currentTask.fullPages
+            };
+
             pageUpdate = function pageUpdate() {
-              return _handlers.default.navigate(action, pageId, onPageChange);
+              return _handlers.default.navigate(action, pageId, onPageChange, state);
             };
 
             break;
@@ -482,7 +501,10 @@ var InternalFormRenderer = function InternalFormRenderer(_ref2) {
         }
       } else if (currentTask.state === _models.TaskStates.TYPES.IN_PROGRESS) {
         var _currentPage = data.formStatus.tasks[currentTask.name].currentPage;
-        onPageChange(_currentPage || currentTask.pages[0]);
+        var state = {
+          'fullPages': currentTask.fullPages
+        };
+        onPageChange(_currentPage || currentTask.pages[0], state);
       } else if (currentTask.firstPage) {
         var _currentPage2 = currentTask.firstPage;
         onPageChange(_currentPage2 || currentTask.pages[0]);
@@ -623,7 +645,8 @@ var InternalFormRenderer = function InternalFormRenderer(_ref2) {
     formData: data
   })), formState.page && !formState.cya && !formState.page.collection && /*#__PURE__*/_react.default.createElement(_FormPage.default, {
     page: formState.page,
-    onAction: onPageAction
+    onAction: onPageAction,
+    onChange: onChange
   }), formState.page && !formState.cya && formState.page.collection && /*#__PURE__*/_react.default.createElement(_CollectionPage.default, {
     page: formState.page,
     onAction: onPageAction

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

@@ -931,11 +931,70 @@ describe('components', function () {
         }
       }, _callee26);
     })));
-    it('should go to the last page of a complete task if noTaskCYAs specified', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee28() {
-      var ON_SUBMIT, HOOKS, TASK_LIST_WITH_NO_TASK_CYAS, taskList, newPage;
+    it('should go to incomplete page when selecting in-progress task', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee28() {
+      var ON_SUBMIT, HOOKS, DATA, taskList;
       return regeneratorRuntime.wrap(function _callee28$(_context28) {
         while (1) {
           switch (_context28.prev = _context28.next) {
+            case 0:
+              ON_SUBMIT = function ON_SUBMIT(type, payload, onSuccess, onError) {
+                onSuccess();
+              };
+
+              HOOKS = {
+                onSubmit: ON_SUBMIT
+              };
+              DATA = {
+                "date": "7-7-2022",
+                "formStatus": {
+                  "tasks": {
+                    "Date, location and mode details": {
+                      "complete": false,
+                      "currentPage": "eventMode"
+                    }
+                  },
+                  "taskPage": "eventMode"
+                }
+              };
+              _context28.next = 5;
+              return (0, _testUtils.act)( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee27() {
+                return regeneratorRuntime.wrap(function _callee27$(_context27) {
+                  while (1) {
+                    switch (_context27.prev = _context27.next) {
+                      case 0:
+                        (0, _reactDom.render)( /*#__PURE__*/_react2.default.createElement(_FormRenderer.default, _extends({}, _taskList.default, {
+                          hooks: HOOKS,
+                          data: DATA
+                        })), container);
+
+                      case 1:
+                      case "end":
+                        return _context27.stop();
+                    }
+                  }
+                }, _callee27);
+              })));
+
+            case 5:
+              taskList = container.childNodes[0].childNodes[1]; //Launch first task
+
+              _react.fireEvent.click(taskList.childNodes[3].childNodes[1].childNodes[0].childNodes[0], {}); //Should be at Event Mode page
+
+
+              expect(container.childNodes[0].childNodes[0].childNodes[0].textContent).toEqual('Event Mode');
+
+            case 8:
+            case "end":
+              return _context28.stop();
+          }
+        }
+      }, _callee28);
+    })));
+    it('should go to the last page of a complete task if noTaskCYAs specified', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee30() {
+      var ON_SUBMIT, HOOKS, TASK_LIST_WITH_NO_TASK_CYAS, taskList, newPage;
+      return regeneratorRuntime.wrap(function _callee30$(_context30) {
+        while (1) {
+          switch (_context30.prev = _context30.next) {
             case 0:
               ON_SUBMIT = function ON_SUBMIT(type, payload, onSuccess, onError) {
                 onSuccess();
@@ -950,11 +1009,11 @@ describe('components', function () {
                 type: 'save',
                 complete: true
               };
-              _context28.next = 7;
-              return (0, _testUtils.act)( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee27() {
-                return regeneratorRuntime.wrap(function _callee27$(_context27) {
+              _context30.next = 7;
+              return (0, _testUtils.act)( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee29() {
+                return regeneratorRuntime.wrap(function _callee29$(_context29) {
                   while (1) {
-                    switch (_context27.prev = _context27.next) {
+                    switch (_context29.prev = _context29.next) {
                       case 0:
                         (0, _reactDom.render)( /*#__PURE__*/_react2.default.createElement(_FormRenderer.default, _extends({}, TASK_LIST_WITH_NO_TASK_CYAS, {
                           hooks: HOOKS
@@ -962,10 +1021,10 @@ describe('components', function () {
 
                       case 1:
                       case "end":
-                        return _context27.stop();
+                        return _context29.stop();
                     }
                   }
-                }, _callee27);
+                }, _callee29);
               })));
 
             case 7:
@@ -1014,17 +1073,17 @@ describe('components', function () {
 
             case 19:
             case "end":
-              return _context28.stop();
+              return _context30.stop();
           }
         }
-      }, _callee28);
+      }, _callee30);
     })));
-    it('should handle cancellation from a page', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee30() {
+    it('should handle cancellation from a page', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee32() {
       var ON_CANCEL_CALLS, ON_CANCEL, HOOKS, form, hub, _hub$childNodes5, civilServantList, link, page, cancel;
 
-      return regeneratorRuntime.wrap(function _callee30$(_context30) {
+      return regeneratorRuntime.wrap(function _callee32$(_context32) {
         while (1) {
-          switch (_context30.prev = _context30.next) {
+          switch (_context32.prev = _context32.next) {
             case 0:
               ON_CANCEL_CALLS = [];
 
@@ -1035,11 +1094,11 @@ describe('components', function () {
               HOOKS = {
                 onCancel: ON_CANCEL
               };
-              _context30.next = 5;
-              return (0, _testUtils.act)( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee29() {
-                return regeneratorRuntime.wrap(function _callee29$(_context29) {
+              _context32.next = 5;
+              return (0, _testUtils.act)( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee31() {
+                return regeneratorRuntime.wrap(function _callee31$(_context31) {
                   while (1) {
-                    switch (_context29.prev = _context29.next) {
+                    switch (_context31.prev = _context31.next) {
                       case 0:
                         (0, _reactDom.render)( /*#__PURE__*/_react2.default.createElement(_FormRenderer.default, _extends({}, _userProfile.default, {
                           data: _userProfileData.default,
@@ -1048,10 +1107,10 @@ describe('components', function () {
 
                       case 1:
                       case "end":
-                        return _context29.stop();
+                        return _context31.stop();
                     }
                   }
-                }, _callee29);
+                }, _callee31);
               })));
 
             case 5:
@@ -1075,16 +1134,16 @@ describe('components', function () {
 
             case 15:
             case "end":
-              return _context30.stop();
+              return _context32.stop();
           }
         }
-      }, _callee30);
+      }, _callee32);
     })));
-    it('should navigate to a specific page at the beginning of a task if it is set as the firstPage of a task', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee32() {
+    it('should navigate to a specific page at the beginning of a task if it is set as the firstPage of a task', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee34() {
       var ON_SUBMIT_CALLS, ON_SUBMIT, HOOKS, TASK_LIST_NON_SEQUENTIAL, taskList, firstTask, newPage;
-      return regeneratorRuntime.wrap(function _callee32$(_context32) {
+      return regeneratorRuntime.wrap(function _callee34$(_context34) {
         while (1) {
-          switch (_context32.prev = _context32.next) {
+          switch (_context34.prev = _context34.next) {
             case 0:
               ON_SUBMIT_CALLS = [];
 
@@ -1098,11 +1157,11 @@ describe('components', function () {
               };
               TASK_LIST_NON_SEQUENTIAL = JSON.parse(JSON.stringify(_taskList.default));
               TASK_LIST_NON_SEQUENTIAL.hub.nonSequential = true;
-              _context32.next = 7;
-              return (0, _testUtils.act)( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee31() {
-                return regeneratorRuntime.wrap(function _callee31$(_context31) {
+              _context34.next = 7;
+              return (0, _testUtils.act)( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee33() {
+                return regeneratorRuntime.wrap(function _callee33$(_context33) {
                   while (1) {
-                    switch (_context31.prev = _context31.next) {
+                    switch (_context33.prev = _context33.next) {
                       case 0:
                         (0, _reactDom.render)( /*#__PURE__*/_react2.default.createElement(_FormRenderer.default, _extends({}, TASK_LIST_NON_SEQUENTIAL, {
                           hooks: HOOKS
@@ -1110,10 +1169,10 @@ describe('components', function () {
 
                       case 1:
                       case "end":
-                        return _context31.stop();
+                        return _context33.stop();
                     }
                   }
-                }, _callee31);
+                }, _callee33);
               })));
 
             case 7:
@@ -1130,10 +1189,10 @@ describe('components', function () {
 
             case 13:
             case "end":
-              return _context32.stop();
+              return _context34.stop();
           }
         }
-      }, _callee32);
+      }, _callee34);
     })));
   });
 });

package/dist/components/FormRenderer/handlers/navigate.js

@@ -16,11 +16,11 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
  * @param {string} currentPageId The current pageId.
  * @param {Function} onNavigate The handler to call if the pageId is different to the currentPageId.
  */
-var navigate = function navigate(action, currentPageId, onNavigate) {
+var navigate = function navigate(action, currentPageId, onNavigate, state) {
   var pageId = (0, _getPageId.default)(action, currentPageId);
 
   if (pageId !== currentPageId) {
-    onNavigate(pageId);
+    onNavigate(pageId, state);
   }
 };
 

package/dist/context/HooksContext/HooksContext.js

@@ -32,12 +32,15 @@ function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Sy
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
 var DEFAULT_HOOKS = {
-  onGoingBack: function onGoingBack() {},
+  onChange: function onChange(data) {
+    return data;
+  },
   onFormComplete: function onFormComplete() {},
   onFormLoad: function onFormLoad() {},
   onGetComponent: function onGetComponent(config, wrap) {
     return null;
   },
+  onGoingBack: function onGoingBack() {},
   onPageChange: function onPageChange(pageId) {
     return pageId;
   },
@@ -60,10 +63,11 @@ var HooksContextProvider = function HooksContextProvider(_ref) {
       children = _ref.children;
 
   var _useState = (0, _react.useState)({
-    onGoingBack: (overrides === null || overrides === void 0 ? void 0 : overrides.onGoingBack) || DEFAULT_HOOKS.onGoingBack,
+    onChange: (overrides === null || overrides === void 0 ? void 0 : overrides.onChange) || DEFAULT_HOOKS.onChange,
     onFormComplete: (overrides === null || overrides === void 0 ? void 0 : overrides.onFormComplete) || DEFAULT_HOOKS.onFormComplete,
     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,
+    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,
     onSubmit: (overrides === null || overrides === void 0 ? void 0 : overrides.onSubmit) || DEFAULT_HOOKS.onSubmit,

package/dist/utils/Data/getAutocompleteSource.js

@@ -7,6 +7,8 @@ exports.default = void 0;
 
 var _getOptions = _interopRequireDefault(require("./getOptions"));
 
+var _copReactComponents = require("@ukhomeoffice/cop-react-components");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 // Local imports
@@ -15,11 +17,12 @@ var getAutocompleteSource = function getAutocompleteSource(config) {
   (0, _getOptions.default)(config, function (val) {
     options = val;
   });
+  var labelMaker = config !== null && config !== void 0 && config.item ? _copReactComponents.Utils.itemLabel(config.item) : null;
   return function (query, populateResults) {
     var lcQuery = query ? query.toLowerCase() : '';
     populateResults(options.filter(function (opt) {
-      var lcLabel = opt.label ? opt.label.toLowerCase() : '';
-      return lcLabel.includes(lcQuery);
+      var label = labelMaker ? labelMaker(opt) : opt.label || '';
+      return label.toLowerCase().includes(lcQuery);
     }));
   };
 };

package/dist/utils/Data/getAutocompleteSource.test.js

@@ -16,129 +16,331 @@ describe('utils', function () {
           expect(results.length).toEqual(0);
         });
       });
-      it('should get any specified options from the config', function () {
-        var CONFIG = {
-          data: {
-            options: [{
+      describe('without custom item labels', function () {
+        it('should get any specified options from the config', function () {
+          var CONFIG = {
+            data: {
+              options: [{
+                value: 'a',
+                label: 'Alpha'
+              }, {
+                value: 'b',
+                label: 'Bravo'
+              }]
+            }
+          };
+          var SOURCE = (0, _getAutocompleteSource.default)(CONFIG);
+          expect(typeof SOURCE === 'function').toBeTruthy();
+          SOURCE('a', function (results) {
+            expect(results.length).toEqual(2);
+            expect(results).toEqual([{
               value: 'a',
               label: 'Alpha'
             }, {
               value: 'b',
               label: 'Bravo'
-            }]
-          }
-        };
-        var SOURCE = (0, _getAutocompleteSource.default)(CONFIG);
-        expect(typeof SOURCE === 'function').toBeTruthy();
-        SOURCE('a', function (results) {
-          expect(results.length).toEqual(2);
-          expect(results).toEqual([{
-            value: 'a',
-            label: 'Alpha'
-          }, {
-            value: 'b',
-            label: 'Bravo'
-          }]);
-        });
-        SOURCE('al', function (results) {
-          expect(results.length).toEqual(1);
-          expect(results).toEqual([{
-            value: 'a',
-            label: 'Alpha'
-          }]);
+            }]);
+          });
+          SOURCE('al', function (results) {
+            expect(results.length).toEqual(1);
+            expect(results).toEqual([{
+              value: 'a',
+              label: 'Alpha'
+            }]);
+          });
         });
-      });
-      it('should handle an empty query', function () {
-        var CONFIG = {
-          data: {
-            options: [{
+        it('should handle an empty query', function () {
+          var CONFIG = {
+            data: {
+              options: [{
+                value: 'a',
+                label: 'Alpha'
+              }, {
+                value: 'b',
+                label: 'Bravo'
+              }]
+            }
+          };
+          var SOURCE = (0, _getAutocompleteSource.default)(CONFIG);
+          SOURCE('', function (results) {
+            expect(results.length).toEqual(2);
+            expect(results).toEqual([{
               value: 'a',
               label: 'Alpha'
             }, {
               value: 'b',
               label: 'Bravo'
-            }]
-          }
-        };
-        var SOURCE = (0, _getAutocompleteSource.default)(CONFIG);
-        SOURCE('', function (results) {
-          expect(results.length).toEqual(2);
-          expect(results).toEqual([{
-            value: 'a',
-            label: 'Alpha'
-          }, {
-            value: 'b',
-            label: 'Bravo'
-          }]);
+            }]);
+          });
         });
-      });
-      it('should handle an undefined query', function () {
-        var CONFIG = {
-          data: {
-            options: [{
+        it('should handle an undefined query', function () {
+          var CONFIG = {
+            data: {
+              options: [{
+                value: 'a',
+                label: 'Alpha'
+              }, {
+                value: 'b',
+                label: 'Bravo'
+              }]
+            }
+          };
+          var SOURCE = (0, _getAutocompleteSource.default)(CONFIG);
+          SOURCE(undefined, function (results) {
+            expect(results.length).toEqual(2);
+            expect(results).toEqual([{
               value: 'a',
               label: 'Alpha'
             }, {
               value: 'b',
               label: 'Bravo'
-            }]
-          }
-        };
-        var SOURCE = (0, _getAutocompleteSource.default)(CONFIG);
-        SOURCE(undefined, function (results) {
-          expect(results.length).toEqual(2);
-          expect(results).toEqual([{
-            value: 'a',
-            label: 'Alpha'
-          }, {
-            value: 'b',
-            label: 'Bravo'
-          }]);
+            }]);
+          });
         });
-      });
-      it('should handle a null query', function () {
-        var CONFIG = {
-          data: {
-            options: [{
+        it('should handle a null query', function () {
+          var CONFIG = {
+            data: {
+              options: [{
+                value: 'a',
+                label: 'Alpha'
+              }, {
+                value: 'b',
+                label: 'Bravo'
+              }]
+            }
+          };
+          var SOURCE = (0, _getAutocompleteSource.default)(CONFIG);
+          SOURCE(null, function (results) {
+            expect(results.length).toEqual(2);
+            expect(results).toEqual([{
               value: 'a',
               label: 'Alpha'
             }, {
               value: 'b',
               label: 'Bravo'
-            }]
-          }
-        };
-        var SOURCE = (0, _getAutocompleteSource.default)(CONFIG);
-        SOURCE(null, function (results) {
-          expect(results.length).toEqual(2);
-          expect(results).toEqual([{
-            value: 'a',
-            label: 'Alpha'
-          }, {
-            value: 'b',
-            label: 'Bravo'
-          }]);
+            }]);
+          });
         });
-      });
-      it('should handle a missing label on an option', function () {
-        var CONFIG = {
-          data: {
-            options: [{
+        it('should handle a missing label on an option', function () {
+          var CONFIG = {
+            data: {
+              options: [{
+                value: 'a',
+                label: 'Alpha'
+              }, {
+                value: 'b'
+              }]
+            }
+          };
+          var SOURCE = (0, _getAutocompleteSource.default)(CONFIG);
+          expect(typeof SOURCE === 'function').toBeTruthy();
+          SOURCE('a', function (results) {
+            expect(results.length).toEqual(1);
+            expect(results).toEqual([{
               value: 'a',
               label: 'Alpha'
+            }]);
+          });
+        });
+      });
+      describe('with custom item labels', function () {
+        it('should get any specified options from the config', function () {
+          var CONFIG = {
+            item: {
+              value: 'currencyCode',
+              label: 'currencyCode',
+              format: '${currencyName} (${currencyCode})'
+            },
+            data: {
+              options: [{
+                currencyName: 'Great British Pounds',
+                currencyCode: 'GBP',
+                value: 'GBP',
+                label: 'GBP'
+              }, {
+                currencyName: 'United States Dollars',
+                currencyCode: 'USD',
+                value: 'USD',
+                label: 'USD'
+              }]
+            }
+          };
+          var SOURCE = (0, _getAutocompleteSource.default)(CONFIG);
+          expect(typeof SOURCE === 'function').toBeTruthy();
+          SOURCE('GB', function (results) {
+            expect(results.length).toEqual(1);
+            expect(results).toEqual([{
+              currencyName: 'Great British Pounds',
+              currencyCode: 'GBP',
+              value: 'GBP',
+              label: 'GBP'
+            }]);
+          });
+          SOURCE(' (', function (results) {
+            expect(results.length).toEqual(2);
+            expect(results).toEqual([{
+              currencyName: 'Great British Pounds',
+              currencyCode: 'GBP',
+              value: 'GBP',
+              label: 'GBP'
             }, {
-              value: 'b'
-            }]
-          }
-        };
-        var SOURCE = (0, _getAutocompleteSource.default)(CONFIG);
-        expect(typeof SOURCE === 'function').toBeTruthy();
-        SOURCE('a', function (results) {
-          expect(results.length).toEqual(1);
-          expect(results).toEqual([{
-            value: 'a',
-            label: 'Alpha'
-          }]);
+              currencyName: 'United States Dollars',
+              currencyCode: 'USD',
+              value: 'USD',
+              label: 'USD'
+            }]);
+          });
+        });
+        it('should handle an empty query', function () {
+          var CONFIG = {
+            item: {
+              value: 'currencyCode',
+              label: 'currencyCode',
+              format: '${currencyName} (${currencyCode})'
+            },
+            data: {
+              options: [{
+                currencyName: 'Great British Pounds',
+                currencyCode: 'GBP',
+                value: 'GBP',
+                label: 'GBP'
+              }, {
+                currencyName: 'United States Dollars',
+                currencyCode: 'USD',
+                value: 'USD',
+                label: 'USD'
+              }]
+            }
+          };
+          var SOURCE = (0, _getAutocompleteSource.default)(CONFIG);
+          SOURCE('', function (results) {
+            expect(results.length).toEqual(2);
+            expect(results).toEqual([{
+              currencyName: 'Great British Pounds',
+              currencyCode: 'GBP',
+              value: 'GBP',
+              label: 'GBP'
+            }, {
+              currencyName: 'United States Dollars',
+              currencyCode: 'USD',
+              value: 'USD',
+              label: 'USD'
+            }]);
+          });
+        });
+        it('should handle an undefined query', function () {
+          var CONFIG = {
+            item: {
+              value: 'currencyCode',
+              label: 'currencyCode',
+              format: '${currencyName} (${currencyCode})'
+            },
+            data: {
+              options: [{
+                currencyName: 'Great British Pounds',
+                currencyCode: 'GBP',
+                value: 'GBP',
+                label: 'GBP'
+              }, {
+                currencyName: 'United States Dollars',
+                currencyCode: 'USD',
+                value: 'USD',
+                label: 'USD'
+              }]
+            }
+          };
+          var SOURCE = (0, _getAutocompleteSource.default)(CONFIG);
+          SOURCE(undefined, function (results) {
+            expect(results.length).toEqual(2);
+            expect(results).toEqual([{
+              currencyName: 'Great British Pounds',
+              currencyCode: 'GBP',
+              value: 'GBP',
+              label: 'GBP'
+            }, {
+              currencyName: 'United States Dollars',
+              currencyCode: 'USD',
+              value: 'USD',
+              label: 'USD'
+            }]);
+          });
+        });
+        it('should handle a null query', function () {
+          var CONFIG = {
+            item: {
+              value: 'currencyCode',
+              label: 'currencyCode',
+              format: '${currencyName} (${currencyCode})'
+            },
+            data: {
+              options: [{
+                currencyName: 'Great British Pounds',
+                currencyCode: 'GBP',
+                value: 'GBP',
+                label: 'GBP'
+              }, {
+                currencyName: 'United States Dollars',
+                currencyCode: 'USD',
+                value: 'USD',
+                label: 'USD'
+              }]
+            }
+          };
+          var SOURCE = (0, _getAutocompleteSource.default)(CONFIG);
+          SOURCE(null, function (results) {
+            expect(results.length).toEqual(2);
+            expect(results).toEqual([{
+              currencyName: 'Great British Pounds',
+              currencyCode: 'GBP',
+              value: 'GBP',
+              label: 'GBP'
+            }, {
+              currencyName: 'United States Dollars',
+              currencyCode: 'USD',
+              value: 'USD',
+              label: 'USD'
+            }]);
+          });
+        });
+        it('should handle a missing label on an option', function () {
+          var CONFIG = {
+            item: {
+              value: 'currencyCode',
+              label: 'currencyCode',
+              format: '${currencyName} (${currencyCode})'
+            },
+            data: {
+              options: [{
+                currencyName: 'Great British Pounds',
+                currencyCode: 'GBP',
+                value: 'GBP',
+                label: 'GBP'
+              }, {
+                currencyName: 'United States Dollars',
+                currencyCode: 'USD',
+                value: 'USD'
+              }]
+            }
+          };
+          var SOURCE = (0, _getAutocompleteSource.default)(CONFIG);
+          expect(typeof SOURCE === 'function').toBeTruthy();
+          SOURCE('a', function (results) {
+            // We expect 2 results here instead of 1 because defining a custom
+            // format for item labels means the label is constructed upon processing
+            // a query - we're not relying on the 'label' field of the option.
+            expect(results.length).toEqual(2);
+            expect(results).toEqual([{
+              currencyName: 'Great British Pounds',
+              currencyCode: 'GBP',
+              value: 'GBP',
+              label: 'GBP'
+            }, {
+              currencyName: 'United States Dollars',
+              currencyCode: 'USD',
+              value: 'USD',
+              label: ''
+            }]);
+          });
         });
       });
     });

package/dist/utils/FormPage/useComponent.js

@@ -14,11 +14,9 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope
 var getComponentToUse = function getComponentToUse(toUse, formComponents) {
   var path = toUse.use.split('.');
   var firstId = path.shift();
-
-  var wrapper = _objectSpread({}, formComponents.find(function (fc) {
+  var wrapper = JSON.parse(JSON.stringify(_objectSpread({}, formComponents.find(function (fc) {
     return fc.id === firstId;
-  }));
-
+  }))));
   var component = wrapper;
   var parent = wrapper;
 

package/package.json

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