@ukhomeoffice/cop-react-form-renderer 2.10.2 → 3.0.2

package/dist/components/CheckYourAnswers/Answer.test.js

@@ -1,10 +1,10 @@
 "use strict";
 
-var _react = require("@testing-library/react");
-
 var _Readonly = require("@ukhomeoffice/cop-react-components/dist/Readonly");
 
-var _react2 = _interopRequireDefault(require("react"));
+var _react = _interopRequireDefault(require("react"));
+
+var _setupTests = require("../../setupTests");
 
 var _Answer = _interopRequireDefault(require("./Answer"));
 
@@ -17,7 +17,7 @@ function _asyncToGenerator(fn) { return function () { var self = this, args = ar
 describe('components', function () {
   describe('CheckYourAnswers.Answer', function () {
     it('should handle a null value', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee() {
-      var VALUE, COMPONENT, _render, container;
+      var VALUE, COMPONENT, _renderWithValidation, container;
 
       return regeneratorRuntime.wrap(function _callee$(_context) {
         while (1) {
@@ -25,10 +25,10 @@ describe('components', function () {
             case 0:
               VALUE = null;
               COMPONENT = null;
-              _render = (0, _react.render)( /*#__PURE__*/_react2.default.createElement(_Answer.default, {
+              _renderWithValidation = (0, _setupTests.renderWithValidation)( /*#__PURE__*/_react.default.createElement(_Answer.default, {
                 value: VALUE,
                 component: COMPONENT
-              })), container = _render.container;
+              })), container = _renderWithValidation.container;
               expect(container.childNodes.length).toEqual(1);
               expect(container.childNodes[0].textContent).toEqual('No answer');
 
@@ -40,7 +40,7 @@ describe('components', function () {
       }, _callee);
     })));
     it('should handle a null component', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee2() {
-      var VALUE, COMPONENT, _render2, container;
+      var VALUE, COMPONENT, _renderWithValidation2, container;
 
       return regeneratorRuntime.wrap(function _callee2$(_context2) {
         while (1) {
@@ -48,10 +48,10 @@ describe('components', function () {
             case 0:
               VALUE = 'Alpha';
               COMPONENT = null;
-              _render2 = (0, _react.render)( /*#__PURE__*/_react2.default.createElement(_Answer.default, {
+              _renderWithValidation2 = (0, _setupTests.renderWithValidation)( /*#__PURE__*/_react.default.createElement(_Answer.default, {
                 value: VALUE,
                 component: COMPONENT
-              })), container = _render2.container;
+              })), container = _renderWithValidation2.container;
               expect(container.textContent).toEqual(VALUE);
 
             case 4:
@@ -62,7 +62,7 @@ describe('components', function () {
       }, _callee2);
     })));
     it('should handle a component', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee3() {
-      var VALUE, COMPONENT, _render3, container, answer;
+      var VALUE, COMPONENT, _renderWithValidation3, container, answer;
 
       return regeneratorRuntime.wrap(function _callee3$(_context3) {
         while (1) {
@@ -75,10 +75,10 @@ describe('components', function () {
                 type: 'text',
                 label: 'Alpha'
               };
-              _render3 = (0, _react.render)( /*#__PURE__*/_react2.default.createElement(_Answer.default, {
+              _renderWithValidation3 = (0, _setupTests.renderWithValidation)( /*#__PURE__*/_react.default.createElement(_Answer.default, {
                 value: VALUE,
                 component: COMPONENT
-              })), container = _render3.container;
+              })), container = _renderWithValidation3.container;
               answer = container.childNodes[0];
               expect(answer.tagName).toEqual('DIV');
               expect(answer.classList).toContain(_Readonly.DEFAULT_CLASS);

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

@@ -2,8 +2,6 @@
 
 var _react = _interopRequireDefault(require("react"));
 
-var _useHooks = require("../../hooks/useHooks");
-
 var _setupTests = require("../../setupTests");
 
 var _FormComponent = _interopRequireDefault(require("./FormComponent"));
@@ -16,9 +14,6 @@ function _asyncToGenerator(fn) { return function () { var self = this, args = ar
 
 describe('components', function () {
   describe('FormComponent', function () {
-    beforeEach(function () {
-      (0, _useHooks.resetHooks)();
-    });
     it('should render a text component appropriately', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee() {
       var ID, VALUE, COMPONENT, ON_CHANGE, _renderWithValidation, container, formGroup, label, hint, input;
 
@@ -139,15 +134,17 @@ describe('components', function () {
       }, _callee3);
     })));
     it('should render an overridden html component appropriately', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee4() {
-      var ID, COMPONENT, _renderWithValidation4, container, div;
+      var hooks, ID, COMPONENT, _renderWithValidation4, container, div;
 
       return regeneratorRuntime.wrap(function _callee4$(_context4) {
         while (1) {
           switch (_context4.prev = _context4.next) {
             case 0:
-              (0, _useHooks.addHook)('onGetComponent', function (config, wrap) {
-                return /*#__PURE__*/_react.default.createElement("div", null, "".concat(config.type, " | ").concat(config.tagName, " | ").concat(config.content, " | ").concat(wrap));
-              });
+              hooks = {
+                onGetComponent: function onGetComponent(config, wrap) {
+                  return /*#__PURE__*/_react.default.createElement("div", null, "".concat(config.type, " | ").concat(config.tagName, " | ").concat(config.content, " | ").concat(wrap));
+                }
+              };
               ID = 'component';
               COMPONENT = {
                 type: 'html',
@@ -157,7 +154,9 @@ describe('components', function () {
               _renderWithValidation4 = (0, _setupTests.renderWithValidation)( /*#__PURE__*/_react.default.createElement(_FormComponent.default, {
                 "data-testid": ID,
                 component: COMPONENT
-              })), container = _renderWithValidation4.container;
+              }), {
+                hooks: hooks
+              }), container = _renderWithValidation4.container;
               div = container.childNodes[0];
               expect(div.tagName).toEqual('DIV');
               expect(div.textContent).toEqual("".concat(COMPONENT.type, " | ").concat(COMPONENT.tagName, " | ").concat(COMPONENT.content, " | true"));
@@ -170,15 +169,17 @@ describe('components', function () {
       }, _callee4);
     })));
     it('should render the correct html component when the override returns null', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee5() {
-      var ID, COMPONENT, _renderWithValidation5, container, p;
+      var hooks, ID, COMPONENT, _renderWithValidation5, container, p;
 
       return regeneratorRuntime.wrap(function _callee5$(_context5) {
         while (1) {
           switch (_context5.prev = _context5.next) {
             case 0:
-              (0, _useHooks.addHook)('onGetComponent', function () {
-                return null;
-              });
+              hooks = {
+                onGetComponent: function onGetComponent() {
+                  return null;
+                }
+              };
               ID = 'component';
               COMPONENT = {
                 type: 'html',
@@ -188,7 +189,9 @@ describe('components', function () {
               _renderWithValidation5 = (0, _setupTests.renderWithValidation)( /*#__PURE__*/_react.default.createElement(_FormComponent.default, {
                 "data-testid": ID,
                 component: COMPONENT
-              })), container = _renderWithValidation5.container;
+              }), {
+                hooks: hooks
+              }), container = _renderWithValidation5.container;
               p = container.childNodes[0];
               expect(p.tagName).toEqual('P');
               expect(p.textContent).toEqual(COMPONENT.content);

package/dist/components/FormRenderer/FormRenderer.js

@@ -15,7 +15,7 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _context = require("../../context");
 
-var _hooks2 = require("../../hooks");
+var _hooks = require("../../hooks");
 
 var _models = require("../../models");
 
@@ -74,7 +74,9 @@ var FormRenderer = function FormRenderer(_ref) {
       hide_title = _ref.hide_title,
       summaryListClassModifiers = _ref.summaryListClassModifiers,
       noChangeAction = _ref.noChangeAction;
-  return /*#__PURE__*/_react.default.createElement(_context.ValidationContextProvider, null, /*#__PURE__*/_react.default.createElement(InternalFormRenderer, {
+  return /*#__PURE__*/_react.default.createElement(_context.HooksContextProvider, {
+    overrides: hooks
+  }, /*#__PURE__*/_react.default.createElement(_context.ValidationContextProvider, null, /*#__PURE__*/_react.default.createElement(InternalFormRenderer, {
     title: title,
     type: type,
     components: components,
@@ -82,14 +84,13 @@ var FormRenderer = function FormRenderer(_ref) {
     hub: hub,
     cya: cya,
     data: data,
-    hooks: hooks,
     classBlock: classBlock,
     classModifiers: classModifiers,
     className: className,
     hide_title: hide_title,
     summaryListClassModifiers: summaryListClassModifiers,
     noChangeAction: noChangeAction
-  }));
+  })));
 };
 
 var DEFAULT_CLASS = 'hods-form';
@@ -103,7 +104,6 @@ var InternalFormRenderer = function InternalFormRenderer(_ref2) {
       _hub = _ref2.hub,
       cya = _ref2.cya,
       _data = _ref2.data,
-      _hooks = _ref2.hooks,
       classBlock = _ref2.classBlock,
       classModifiers = _ref2.classModifiers,
       className = _ref2.className,
@@ -153,19 +153,11 @@ var InternalFormRenderer = function InternalFormRenderer(_ref2) {
       setHubDetails = _useState16[1]; // Set up hooks.
 
 
-  var _useHooks = (0, _hooks2.useHooks)(),
-      hooks = _useHooks.hooks,
-      addHook = _useHooks.addHook;
+  var _useHooks = (0, _hooks.useHooks)(),
+      hooks = _useHooks.hooks; // Set up the useValidation hook.
 
-  (0, _react.useEffect)(function () {
-    if (_hooks) {
-      Object.keys(_hooks).forEach(function (key) {
-        addHook(key, _hooks[key]);
-      });
-    }
-  }, [_hooks, addHook]); // Set up the useValidation hook.
 
-  var _useValidation = (0, _hooks2.useValidation)(),
+  var _useValidation = (0, _hooks.useValidation)(),
       addErrors = _useValidation.addErrors,
       clearErrors = _useValidation.clearErrors,
       validate = _useValidation.validate; // Setup data.
@@ -423,12 +415,7 @@ FormRenderer.propTypes = InternalFormRenderer.propTypes = {
   hub: _propTypes.default.object,
   cya: _propTypes.default.object,
   data: _propTypes.default.object,
-  hooks: _propTypes.default.shape({
-    onFormLoad: _propTypes.default.func,
-    onPageChange: _propTypes.default.func,
-    onRequest: _propTypes.default.func,
-    onSubmit: _propTypes.default.func
-  }),
+  hooks: _propTypes.default.object,
   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.stories.mdx

@@ -12,12 +12,9 @@ import { useState } from 'react';
 import withMock from 'storybook-addon-mock';
 
 <!-- Local imports -->
-
-import { addHook } from '../../hooks/useHooks';
 import FormRenderer from './FormRenderer';
 
 <!-- JSON documents -->
-
 import CIVIL_SERVANT from '../../json/areYouACivilServant.json';
 import FIRST_FORM from '../../json/firstForm.json';
 import GRADE from '../../json/grade.json';
@@ -82,31 +79,6 @@ on the basis of a <Link href="/?path=/docs/f-json-form">JSON</Link> that describ
     {() => {
       const [complete, setComplete] = useState(false);
       const [returnLater, setReturnLater] = useState(false);
-      addHook('onRequest', (req) => {
-        // Do whatever you need to do to the request in here, such as adding an Authorization header.
-        console.log('onRequest hook called');
-        return req;
-      });
-      addHook('onFormLoad', () => {
-        console.log('onFormLoad called');
-      });
-      addHook('onFormComplete', () => {
-        console.log('onFormComplete called');
-        setComplete(true);
-      });
-      addHook('onPageChange', (pageId) => {
-        console.log('onPageChange called', pageId);
-        setReturnLater(!!pageId === false);
-      });
-      addHook('onSubmit', (type, payload, onSuccess, onError) => {
-        console.log(
-          'onSubmit called of type',
-          type,
-          'called, with the payload',
-          payload
-        );
-        onSuccess();
-      });
       const reset = () => {
         setComplete(false);
         setReturnLater(false);
@@ -114,7 +86,37 @@ on the basis of a <Link href="/?path=/docs/f-json-form">JSON</Link> that describ
       return (
         <>
           {!complete && !returnLater && (
-            <FormRenderer {...FIRST_FORM} data={{}} />
+            <FormRenderer
+              {...FIRST_FORM}
+              data={{}}
+              hooks={{
+                onRequest: (req) => {
+                  // Do whatever you need to do to the request in here, such as adding an Authorization header.
+                  console.log('onRequest hook called');
+                  return req;
+                },
+                onFormLoad: () => {
+                  console.log('onFormLoad called');
+                },
+                onFormComplete: () => {
+                  console.log('onFormComplete called');
+                  setComplete(true);
+                },
+                onPageChange: (pageId) => {
+                  console.log('onPageChange called', pageId);
+                  setReturnLater(!!pageId === false);
+                },
+                onSubmit: (type, payload, onSuccess, onError) => {
+                  console.log(
+                    'onSubmit called of type',
+                    type,
+                    'called, with the payload',
+                    payload
+                  );
+                  onSuccess();
+                }
+              }}
+            />
           )}
           {complete && (
             <div>

package/dist/context/HooksContext/HooksContext.js

@@ -0,0 +1,91 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.HooksContext = exports.ALLOWED_HOOKS = void 0;
+
+var _react = require("react");
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
+var DEFAULT_HOOKS = {
+  onFormComplete: function onFormComplete() {},
+  onFormLoad: function onFormLoad() {},
+  onGetComponent: function onGetComponent(config, wrap) {
+    return null;
+  },
+  onPageChange: function onPageChange(pageId) {
+    return pageId;
+  },
+  onRequest: function onRequest(req) {
+    return req;
+  },
+  onSubmit: function onSubmit(type, payload, onSuccess, onError) {
+    if (typeof onSuccess === 'function') onSuccess();
+  }
+};
+var ALLOWED_HOOKS = Object.keys(DEFAULT_HOOKS);
+exports.ALLOWED_HOOKS = ALLOWED_HOOKS;
+var HooksContext = /*#__PURE__*/(0, _react.createContext)();
+exports.HooksContext = HooksContext;
+
+var HooksContextProvider = function HooksContextProvider(_ref) {
+  var overrides = _ref.overrides,
+      children = _ref.children;
+
+  var _useState = (0, _react.useState)({
+    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,
+    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
+  }),
+      _useState2 = _slicedToArray(_useState, 2),
+      hooks = _useState2[0],
+      setHooks = _useState2[1];
+
+  var addHook = function addHook(name, hook) {
+    if (ALLOWED_HOOKS.includes(name)) {
+      setHooks(function (prev) {
+        return _objectSpread(_objectSpread({}, prev), {}, _defineProperty({}, name, hook || DEFAULT_HOOKS[name]));
+      });
+    }
+  };
+
+  var removeHook = function removeHook(name) {
+    if (ALLOWED_HOOKS.includes(name)) {
+      setHooks(function (prev) {
+        return _objectSpread(_objectSpread({}, prev), {}, _defineProperty({}, name, DEFAULT_HOOKS[name]));
+      });
+    }
+  };
+
+  return /*#__PURE__*/React.createElement(HooksContext.Provider, {
+    value: {
+      hooks: hooks,
+      addHook: addHook,
+      removeHook: removeHook
+    }
+  }, children);
+};
+
+var _default = HooksContextProvider;
+exports.default = _default;

package/dist/context/HooksContext/HooksContext.test.js

@@ -0,0 +1,60 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+
+var _react = require("@testing-library/react");
+
+var _react2 = _interopRequireDefault(require("react"));
+
+var _hooks = require("../../hooks");
+
+var _HooksContext = _interopRequireWildcard(require("./HooksContext"));
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { Promise.resolve(value).then(_next, _throw); } }
+
+function _asyncToGenerator(fn) { return function () { var self = this, args = arguments; return new Promise(function (resolve, reject) { var gen = fn.apply(self, args); function _next(value) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value); } function _throw(err) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err); } _next(undefined); }); }; }
+
+var TestComponent = function TestComponent() {
+  var _useHooks = (0, _hooks.useHooks)(),
+      hooks = _useHooks.hooks,
+      addHook = _useHooks.addHook,
+      removeHook = _useHooks.removeHook;
+
+  return /*#__PURE__*/_react2.default.createElement(_react2.default.Fragment, null, typeof addHook === 'function' && /*#__PURE__*/_react2.default.createElement("span", null, "addHook is a function"), typeof removeHook === 'function' && /*#__PURE__*/_react2.default.createElement("span", null, "removeHook is a function"), Object.keys(hooks).map(function (key) {
+    return typeof hooks[key] === 'function' && /*#__PURE__*/_react2.default.createElement("span", {
+      key: key
+    }, key, " is a function");
+  }));
+};
+
+describe('context.ValidationContext', function () {
+  it('should appropriately set up the context', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee() {
+    var _render, container;
+
+    return regeneratorRuntime.wrap(function _callee$(_context) {
+      while (1) {
+        switch (_context.prev = _context.next) {
+          case 0:
+            _render = (0, _react.render)( /*#__PURE__*/_react2.default.createElement(_HooksContext.default, null, /*#__PURE__*/_react2.default.createElement(TestComponent, null))), container = _render.container;
+            expect(container.childNodes.length).toEqual(2 + _HooksContext.ALLOWED_HOOKS.length);
+            expect(container.textContent).toContain('addHook is a function');
+            expect(container.textContent).toContain('removeHook is a function');
+
+            _HooksContext.ALLOWED_HOOKS.forEach(function (hook) {
+              expect(container.textContent).toContain("".concat(hook, " is a function"));
+            });
+
+          case 5:
+          case "end":
+            return _context.stop();
+        }
+      }
+    }, _callee);
+  })));
+});

package/dist/context/HooksContext/index.js

@@ -0,0 +1,23 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "HooksContext", {
+  enumerable: true,
+  get: function get() {
+    return _HooksContext.HooksContext;
+  }
+});
+exports.default = void 0;
+
+var _HooksContext = _interopRequireWildcard(require("./HooksContext"));
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+var _default = _HooksContext.default;
+exports.default = _default;

package/dist/context/index.js

@@ -3,6 +3,12 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+Object.defineProperty(exports, "HooksContextProvider", {
+  enumerable: true,
+  get: function get() {
+    return _HooksContext.default;
+  }
+});
 Object.defineProperty(exports, "ValidationContextProvider", {
   enumerable: true,
   get: function get() {
@@ -10,6 +16,8 @@ Object.defineProperty(exports, "ValidationContextProvider", {
   }
 });
 
+var _HooksContext = _interopRequireDefault(require("./HooksContext"));
+
 var _ValidationContext = _interopRequireDefault(require("./ValidationContext"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package/dist/hooks/useHooks.js

@@ -3,63 +3,16 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.resetHooks = exports.removeHook = exports.default = exports.addHook = exports.ALLOWED_HOOKS = void 0;
-var ALLOWED_HOOKS = ['onFormComplete', 'onFormLoad', 'onGetComponent', 'onPageChange', 'onRequest', 'onSubmit'];
-exports.ALLOWED_HOOKS = ALLOWED_HOOKS;
-var DEFAULT_HOOKS = {
-  onFormComplete: function onFormComplete() {},
-  onFormLoad: function onFormLoad() {},
-  onGetComponent: function onGetComponent(config, wrap) {
-    return null;
-  },
-  onPageChange: function onPageChange(pageId) {
-    return pageId;
-  },
-  onRequest: function onRequest(req) {
-    return req;
-  },
-  onSubmit: function onSubmit(type, payload, onSuccess, onError) {
-    if (typeof onSuccess === 'function') onSuccess();
-  }
-};
-var hooks = {
-  onFormComplete: DEFAULT_HOOKS.onFormComplete,
-  onFormLoad: DEFAULT_HOOKS.onFormLoad,
-  onGetComponent: DEFAULT_HOOKS.onGetComponent,
-  onPageChange: DEFAULT_HOOKS.onPageChange,
-  onRequest: DEFAULT_HOOKS.onRequest,
-  onSubmit: DEFAULT_HOOKS.onSubmit
-};
-
-var addHook = function addHook(name, hook) {
-  if (ALLOWED_HOOKS.includes(name)) {
-    hooks[name] = hook || DEFAULT_HOOKS[name]; // Don't allow it to be undefined.
-  }
-};
-
-exports.addHook = addHook;
+exports.default = void 0;
 
-var removeHook = function removeHook(name) {
-  if (ALLOWED_HOOKS.includes(name)) {
-    hooks[name] = DEFAULT_HOOKS[name];
-  }
-};
-
-exports.removeHook = removeHook;
-
-var resetHooks = function resetHooks() {
-  Object.keys(hooks).forEach(removeHook);
-};
+var _react = require("react");
 
-exports.resetHooks = resetHooks;
+var _HooksContext = require("../context/HooksContext");
 
+// Global imports
+// Local imports
 var useHooks = function useHooks() {
-  return {
-    hooks: hooks,
-    addHook: addHook,
-    removeHook: removeHook,
-    resetHooks: resetHooks
-  };
+  return (0, _react.useContext)(_HooksContext.HooksContext);
 };
 
 var _default = useHooks;

package/dist/index.js

@@ -39,14 +39,12 @@ Object.defineProperty(exports, "ValidationContextProvider", {
     return _context.ValidationContextProvider;
   }
 });
-exports.intercepts = exports.default = void 0;
+exports.default = void 0;
 
 var _components = require("./components");
 
 var _context = require("./context");
 
-var _useHooks = require("./hooks/useHooks");
-
 var _models = require("./models");
 
 var _utils = _interopRequireDefault(require("./utils"));
@@ -54,11 +52,5 @@ var _utils = _interopRequireDefault(require("./utils"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 // Local imports
-var intercepts = {
-  add: _useHooks.addHook,
-  remove: _useHooks.removeHook,
-  reset: _useHooks.resetHooks
-};
-exports.intercepts = intercepts;
 var _default = _components.FormRenderer;
 exports.default = _default;

package/dist/setupTests.js

@@ -3,26 +3,53 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.renderWithValidation = exports.renderDomWithValidation = exports.expectObjectLike = void 0;
+exports.renderWithValidation = exports.renderHookWithProvider = exports.renderDomWithValidation = exports.expectObjectLike = void 0;
 
 var _react = require("@testing-library/react");
 
+var _reactHooks = require("@testing-library/react-hooks");
+
 var _reactDom = require("react-dom");
 
 var _context = require("./context");
 
 var renderWithValidation = function renderWithValidation(ui, options) {
-  return (0, _react.render)( /*#__PURE__*/React.createElement(_context.ValidationContextProvider, null, ui), options);
+  return (0, _react.render)( /*#__PURE__*/React.createElement(_context.HooksContextProvider, {
+    overrides: options === null || options === void 0 ? void 0 : options.hooks
+  }, /*#__PURE__*/React.createElement(_context.ValidationContextProvider, {
+    key: "vcp"
+  }, ui)), options);
 };
 
 exports.renderWithValidation = renderWithValidation;
 
-var renderDomWithValidation = function renderDomWithValidation(ui, container, callback) {
-  return (0, _reactDom.render)( /*#__PURE__*/React.createElement(_context.ValidationContextProvider, null, ui), container, callback);
+var renderDomWithValidation = function renderDomWithValidation(ui, container, options) {
+  return (0, _reactDom.render)( /*#__PURE__*/React.createElement(_context.HooksContextProvider, {
+    overrides: options === null || options === void 0 ? void 0 : options.hooks
+  }, /*#__PURE__*/React.createElement(_context.ValidationContextProvider, {
+    key: "vcp"
+  }, ui)), container);
 };
 
 exports.renderDomWithValidation = renderDomWithValidation;
 
+var renderHookWithProvider = function renderHookWithProvider(hook, options) {
+  var wrapper = function wrapper(_ref) {
+    var children = _ref.children;
+    return /*#__PURE__*/React.createElement(_context.HooksContextProvider, {
+      overrides: options === null || options === void 0 ? void 0 : options.hooks
+    }, children);
+  };
+
+  return (0, _reactHooks.renderHook)(function () {
+    return hook();
+  }, {
+    wrapper: wrapper
+  });
+};
+
+exports.renderHookWithProvider = renderHookWithProvider;
+
 var expectObjectLike = function expectObjectLike(received, expected) {
   Object.keys(expected).forEach(function (key) {
     expect(received[key]).toEqual(expected[key]);

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

@@ -1,6 +1,6 @@
 "use strict";
 
-var _react = require("@testing-library/react");
+var _setupTests = require("../../setupTests");
 
 var _getCYARowForGroup = _interopRequireDefault(require("./getCYARowForGroup"));
 
@@ -8,8 +8,7 @@ var _getCYARow = _interopRequireDefault(require("./getCYARow"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-// Global imports
-//local imports 
+// Local imports 
 describe('utils', function () {
   describe('CheckYourAnswers', function () {
     describe('getCYARowsForGroup', function () {
@@ -63,8 +62,8 @@ describe('utils', function () {
           return (0, _getCYARow.default)(PAGE, component, ON_ACTION);
         });
 
-        var _render = (0, _react.render)((0, _getCYARowForGroup.default)(PAGE, PAGE.groups[0], rows, ON_ACTION).row.value),
-            container = _render.container;
+        var _renderWithValidation = (0, _setupTests.renderWithValidation)((0, _getCYARowForGroup.default)(PAGE, PAGE.groups[0], rows, ON_ACTION).row.value),
+            container = _renderWithValidation.container;
 
         expect(container.childNodes.length).toEqual(4);
         var addressValues = container.childNodes;

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

@@ -1,7 +1,5 @@
 "use strict";
 
-var _react = require("@testing-library/react");
-
 var _setupTests = require("../../setupTests");
 
 var _models = require("../../models");
@@ -222,10 +220,10 @@ describe('utils', function () {
 
         var ON_ACTION = function ON_ACTION() {};
 
-        var _render = (0, _react.render)((0, _getCYARowsForPage.default)(PAGE, ON_ACTION).map(function (row) {
+        var _renderWithValidation = (0, _setupTests.renderWithValidation)((0, _getCYARowsForPage.default)(PAGE, ON_ACTION).map(function (row) {
           return row.value;
         })),
-            container = _render.container;
+            container = _renderWithValidation.container;
 
         expect(container.childNodes.length).toEqual(4);
         var addressValues = container.childNodes;

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

@@ -94,8 +94,8 @@ describe('utils.Component.get', function () {
       }
     });
 
-    expect(ON_CHANGE_CALLS.length).toEqual(2);
-    expect(ON_CHANGE_CALLS[1]).toMatchObject({
+    expect(ON_CHANGE_CALLS.length).toEqual(1);
+    expect(ON_CHANGE_CALLS[0]).toMatchObject({
       name: FIELD_ID,
       value: '5--'
     }); // And now the month...
@@ -107,8 +107,8 @@ describe('utils.Component.get', function () {
       }
     });
 
-    expect(ON_CHANGE_CALLS.length).toEqual(3);
-    expect(ON_CHANGE_CALLS[2]).toMatchObject({
+    expect(ON_CHANGE_CALLS.length).toEqual(2);
+    expect(ON_CHANGE_CALLS[1]).toMatchObject({
       name: FIELD_ID,
       value: '5-11-'
     }); // And finally the year.
@@ -120,8 +120,8 @@ describe('utils.Component.get', function () {
       }
     });
 
-    expect(ON_CHANGE_CALLS.length).toEqual(4);
-    expect(ON_CHANGE_CALLS[3]).toMatchObject({
+    expect(ON_CHANGE_CALLS.length).toEqual(3);
+    expect(ON_CHANGE_CALLS[2]).toMatchObject({
       name: FIELD_ID,
       value: '5-11-2022'
     });

package/dist/utils/Validate/index.js

@@ -13,6 +13,8 @@ var _validateEmail = _interopRequireDefault(require("./validateEmail"));
 
 var _validatePage = _interopRequireDefault(require("./validatePage"));
 
+var _validateRegex = _interopRequireDefault(require("./validateRegex"));
+
 var _validateRequired = _interopRequireDefault(require("./validateRequired"));
 
 var _validateTime = _interopRequireDefault(require("./validateTime"));
@@ -25,6 +27,7 @@ var Validate = {
   email: _validateEmail.default,
   date: _validateDate.default,
   page: _validatePage.default,
+  regex: _validateRegex.default,
   required: _validateRequired.default,
   time: _validateTime.default
 };

package/dist/utils/Validate/validateCollection.js

@@ -15,7 +15,14 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
-var validateCollection = function validateCollection(collection, items) {
+/**
+ * Validates all of the items within a collection.
+ * @param {object} collection The collection to validate.
+ * @param {object} items The data items in the collection.
+ * @param {object} formData The data at the top level of the form.
+ * @returns Errors for all components for all items within the collection.
+ */
+var validateCollection = function validateCollection(collection, items, formData) {
   var errors = [];
 
   if (collection && Array.isArray(collection.item) && Array.isArray(items)) {
@@ -29,7 +36,7 @@ var validateCollection = function validateCollection(collection, items) {
           });
         })
       };
-      errors.push((0, _validateContainer.default)(container, item));
+      errors.push((0, _validateContainer.default)(container, item, formData));
     });
   }
 

package/dist/utils/Validate/validateComponent.js

@@ -19,6 +19,8 @@ var _validateDate = _interopRequireDefault(require("./validateDate"));
 
 var _validateEmail = _interopRequireDefault(require("./validateEmail"));
 
+var _validateRegex = _interopRequireDefault(require("./validateRegex"));
+
 var _validateRequired = _interopRequireDefault(require("./validateRequired"));
 
 var _validateTime = _interopRequireDefault(require("./validateTime"));
@@ -30,25 +32,27 @@ function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "functi
 /**
  * Validates a single component.
  * @param {object} component The component to validate.
- * @param {object} formData The data to use that holds this component's value.
+ * @param {object} outerData The data to use that holds this component's value.
+ * @param {object} formData The data at the top level of the form.
  * @returns The first encountered error with the component.
  */
-var validateComponent = function validateComponent(component, formData) {
+var validateComponent = function validateComponent(component, outerData, formData) {
   var _component$data$optio;
 
-  if (!(0, _showComponent.default)(component, formData)) {
+  var fd = formData || outerData;
+
+  if (!(0, _showComponent.default)(component, fd)) {
     return undefined;
   }
 
-  var error = undefined;
-  var nestedId = undefined;
-  var propertiesInError = undefined;
-  var data = formData && _typeof(formData) === 'object' ? formData : {};
-
   if (component.type === _models.ComponentTypes.CONTAINER) {
-    return (0, _validateContainer.default)(component, formData);
+    return (0, _validateContainer.default)(component, outerData, fd);
   }
 
+  var error = undefined;
+  var nestedId = undefined;
+  var properties = undefined;
+  var data = outerData && _typeof(outerData) === 'object' ? outerData : {};
   var value = data[component.fieldId];
 
   if (component.required) {
@@ -58,7 +62,7 @@ var validateComponent = function validateComponent(component, formData) {
   if (!error) {
     switch (component.type) {
       case _models.ComponentTypes.COLLECTION:
-        return (0, _validateCollection.default)(component, value);
+        return (0, _validateCollection.default)(component, value, fd);
 
       case _models.ComponentTypes.EMAIL:
         error = (0, _validateEmail.default)(value, component.label);
@@ -72,7 +76,7 @@ var validateComponent = function validateComponent(component, formData) {
             message = _validator.message,
             propsInError = _validator.propsInError;
 
-        propertiesInError = propsInError;
+        properties = propsInError;
         error = message;
         break;
 
@@ -81,12 +85,10 @@ var validateComponent = function validateComponent(component, formData) {
           var nestedError;
 
           if (option.nested && option.nested.shown) {
-            var _nestedError;
-
-            nestedError = validateComponent(option.nested, formData);
-            error = (_nestedError = nestedError) === null || _nestedError === void 0 ? void 0 : _nestedError.error;
+            nestedError = validateComponent(option.nested, outerData, fd);
 
             if (nestedError) {
+              error = nestedError.error;
               nestedId = nestedError.id;
             }
           }
@@ -99,11 +101,15 @@ var validateComponent = function validateComponent(component, formData) {
         break;
     }
 
+    if (!error && component.pattern) {
+      error = (0, _validateRegex.default)(value, component.label, component.pattern, component.custom_errors);
+    }
+
     if (!error && component.additionalValidation) {
       error = (0, _additional.default)(component, value);
 
       if (component.type === _models.ComponentTypes.DATE && error) {
-        propertiesInError = {
+        properties = {
           day: true,
           month: true,
           year: true
@@ -116,7 +122,7 @@ var validateComponent = function validateComponent(component, formData) {
     return {
       id: nestedId || component.full_path || component.id,
       error: error,
-      properties: propertiesInError
+      properties: properties
     };
   }
 

package/dist/utils/Validate/validateContainer.js

@@ -10,13 +10,22 @@ var _validateComponent = _interopRequireDefault(require("./validateComponent"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 // Local imports
-var validateContainer = function validateContainer(container, formData) {
+
+/**
+ * Validates all components within a container.
+ * @param {object} container The container to validate.
+ * @param {object} outerData The data to use that holds this component's value.
+ * @param {object} formData The data at the top level of the form.
+ * @returns Errors for all components within the container.
+ */
+var validateContainer = function validateContainer(container, outerData, formData) {
+  var fd = formData || outerData;
   var errors = [];
 
   if (container && Array.isArray(container.components)) {
-    var fd = formData && container.fieldId ? formData[container.fieldId] : formData;
+    var containerData = outerData && container.fieldId ? outerData[container.fieldId] : outerData;
     container.components.forEach(function (component) {
-      errors.push((0, _validateComponent.default)(component, fd));
+      errors.push((0, _validateComponent.default)(component, containerData, fd));
     });
   }
 

package/dist/utils/Validate/validatePage.js

@@ -21,7 +21,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 var validatePage = function validatePage(page) {
   if ((0, _showFormPage.default)(page, page.formData) && Array.isArray(page.components)) {
     return page.components.reduce(function (errors, component) {
-      return errors.concat((0, _validateComponent.default)(component, page.formData));
+      return errors.concat((0, _validateComponent.default)(component, page.formData, page.formData));
     }, []).filter(function (e) {
       return !!e;
     }).flat();

package/dist/utils/Validate/validateRegex.js

@@ -0,0 +1,56 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+/**
+ * Validates an components value against a given regex pattern.
+ * 
+ * An empty string for value is considered valid as not all components
+ * with pattern validation have to be required. 
+ * @param {*} value The value to validate.
+ * @param {string} label The label to use in the default error message.
+ * @param {string} pattern The regex pattern to validate against.
+ * @param {array} customErrors The array of custom errors for the component.
+ * @returns An error if the value doesn't match the regex pattern.
+ */
+var validateRegex = function validateRegex(value) {
+  var label = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
+  var pattern = arguments.length > 2 ? arguments[2] : undefined;
+  var customErrors = arguments.length > 3 ? arguments[3] : undefined;
+
+  if (!value) {
+    return undefined;
+  }
+
+  if (typeof value === 'string') {
+    var regex = new RegExp(pattern);
+
+    if (regex.test(value)) {
+      return undefined;
+    }
+
+    if (Array.isArray(customErrors)) {
+      var _result$;
+
+      var result = customErrors.filter(function (error) {
+        return error.type === 'pattern';
+      });
+
+      if (result !== null && result !== void 0 && (_result$ = result[0]) !== null && _result$ !== void 0 && _result$.message) {
+        return result[0].message;
+      }
+    }
+  }
+
+  if (label === '') {
+    return 'Component failed regex validation';
+  }
+
+  return "".concat(label, " failed regex validation");
+};
+
+var _default = validateRegex;
+exports.default = _default;

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

@@ -0,0 +1,41 @@
+"use strict";
+
+var _validateRegex = _interopRequireDefault(require("./validateRegex"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+// Local imports
+describe('utils', function () {
+  describe('Validate', function () {
+    describe('regex', function () {
+      var GOOD_VALUE = 'hello';
+      var BAD_VALUE = 'h3llo';
+      var LABEL = 'Component';
+      var PATTERN = '^[a-z]*$';
+      var CUSTOM_ERRORS = [{
+        "type": "pattern",
+        "message": "Regex validation failed for ".concat(LABEL)
+      }];
+      var DEFAULT_ERROR = [{
+        "type": "pattern"
+      }]; // Valid values
+
+      it('should return no error when the value matches the regex pattern', function () {
+        expect((0, _validateRegex.default)(GOOD_VALUE, LABEL, PATTERN, CUSTOM_ERRORS)).toBeUndefined();
+      });
+      it('should return no error when the value is an empty string', function () {
+        expect((0, _validateRegex.default)('', LABEL, PATTERN, CUSTOM_ERRORS)).toBeUndefined();
+      }); // Invalid values
+
+      it('should return a custom error when the value does not match the regex pattern and one is specified', function () {
+        expect((0, _validateRegex.default)(BAD_VALUE, LABEL, PATTERN, CUSTOM_ERRORS)).toEqual(CUSTOM_ERRORS[0].message);
+      });
+      it('should return an error using label when the value does not match the regex pattern and a custom error is not specified', function () {
+        expect((0, _validateRegex.default)(BAD_VALUE, LABEL, PATTERN, DEFAULT_ERROR)).toEqual("".concat(LABEL, " failed regex validation"));
+      });
+      it('should return a default error when the value does not match the regex pattern and both a custom error and label are not specified', function () {
+        expect((0, _validateRegex.default)(BAD_VALUE, '', PATTERN, DEFAULT_ERROR)).toEqual('Component failed regex validation');
+      });
+    });
+  });
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ukhomeoffice/cop-react-form-renderer",
-  "version": "2.10.2",
+  "version": "3.0.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": "1.6.0",
+    "@ukhomeoffice/cop-react-components": "1.7.1",
     "axios": "^0.21.1",
     "dayjs": "^1.11.0",
     "govuk-frontend": "^3.13.0",