@ukhomeoffice/cop-react-form-renderer 6.15.5-alpha → 6.15.5

package/dist/components/CollectionSummary/BannerStrip.scss

@@ -39,6 +39,10 @@
   }
 }
 
+.hods-form-banner-strip__tag--fit-content{
+  max-width: fit-content;
+}
+
 @mixin banner-tag-colours($colour) {
   .hods-form-banner-strip__tag--#{$colour} {
     @extend .govuk-tag--#{$colour};

package/dist/components/FormComponent/FormComponent.js

@@ -76,6 +76,12 @@ const FormComponent = _ref => {
 
       // eslint-disable-next-line no-param-reassign
       target = (0, _helpers.addLabel)(target, component, data);
+      if (component.type === _models.ComponentTypes.SELECT && target.value === '') {
+        // eslint-disable-next-line no-param-reassign
+        target.value = null;
+        // eslint-disable-next-line no-param-reassign
+        target.label = null;
+      }
       onChange({
         target
       });

package/dist/components/FormComponent/helpers/addLabel.js

@@ -10,13 +10,14 @@ exports.default = void 0;
  * @returns The updated target.
  */
 const addLabel = (paramTarget, component, data) => {
+  var _target$value;
   const target = paramTarget;
   // target.value can be an object in which case use value in object attribute
-  const value = typeof target.value === 'object' ? target.value.value : target.value;
+  const value = typeof target.value === 'object' ? (_target$value = target.value) === null || _target$value === void 0 ? void 0 : _target$value.value : target.value;
   // find the reference data item using the value
   const item = data.find(e => String(e.id) === value);
   // if item is null it means that the target.value can be used as a label otherwise use item.label
-  target.label = item === undefined ? target.value : item.label;
+  target.label = item === undefined ? target.value || '' : item.label;
   target.component = component.cya_label;
   return target;
 };

package/dist/components/FormPage/FormPage.js

@@ -12,19 +12,22 @@ var _utils = _interopRequireDefault(require("../../utils"));
 var _FormComponent = _interopRequireDefault(require("../FormComponent"));
 var _PageActions = _interopRequireDefault(require("../PageActions"));
 require("./FormPage.scss");
+var _validateOnPageLoad = require("../../utils/Validate/validateOnPageLoad");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var s = Object.getOwnPropertySymbols(e); for (r = 0; r < s.length; r++) o = s[r], t.includes(o) || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.includes(n)) continue; t[n] = r[n]; } return t; }
 function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
 function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); } // Global imports
 // Local imports.
 // Styles
 const DEFAULT_CLASS = exports.DEFAULT_CLASS = 'hods-form__page';
 const FormPage = _ref => {
-  var _page$customValidatio, _formPage$actions, _page$actions;
+  var _formPage$actions, _page$actions;
   let {
     page,
     pages,
@@ -37,8 +40,7 @@ const FormPage = _ref => {
     classModifiers,
     className,
     submitting,
-    pageId,
-    fromTarget
+    pageId
   } = _ref;
   const [patch, setPatch] = (0, _react.useState)({});
   const {
@@ -47,12 +49,12 @@ const FormPage = _ref => {
   } = (0, _hooks.useValidation)();
   const [patchLabel, setPatchLabel] = (0, _react.useState)({});
   const [isPageRendered, setIsPageRendered] = (0, _react.useState)(false);
-  const runOnLoad = Array.isArray(page === null || page === void 0 ? void 0 : page.customValidation) && page.customValidation.length > 0 ? ((_page$customValidatio = page.customValidation[0]) === null || _page$customValidatio === void 0 || (_page$customValidatio = _page$customValidatio.runWhen) === null || _page$customValidatio === void 0 ? void 0 : _page$customValidatio.onLoad) === true : false;
+  const runOnLoad = (0, _react.useMemo)(() => (0, _validateOnPageLoad.doValidateOnPageLoad)(page), [page]);
   (0, _react.useEffect)(() => {
     setIsPageRendered(true);
   }, []);
   (0, _react.useEffect)(() => {
-    if (isPageRendered && fromTarget && runOnLoad) {
+    if (isPageRendered && runOnLoad) {
       validate.page(page);
     }
   }, [pageId, isPageRendered]);
@@ -67,20 +69,31 @@ const FormPage = _ref => {
       target
     } = _ref2;
     const formPage = page;
-    if (target.value == null) {
+    const {
+      value
+    } = target;
+    if (!value) {
       delete formPage.formData[target.name];
       setPatch(prev => {
-        const data = prev;
-        return delete data[target.name];
+        const _target$name = target.name,
+          {
+            [_target$name]: removedValue
+          } = prev,
+          newState = _objectWithoutProperties(prev, [_target$name].map(_toPropertyKey));
+        return newState;
       });
       setPatchLabel(prev => {
-        const data = prev;
-        return delete data[target.component];
+        const _target$component = target.component,
+          {
+            [_target$component]: removedValue
+          } = prev,
+          newState = _objectWithoutProperties(prev, [_target$component].map(_toPropertyKey));
+        return newState;
       });
     } else {
-      formPage.formData[target.name] = target.value;
+      formPage.formData[target.name] = value;
       setPatch(prev => _objectSpread(_objectSpread({}, prev), {}, {
-        [target.name]: target.value
+        [target.name]: value
       }));
       setPatchLabel(prev => _objectSpread(_objectSpread({}, prev), {}, {
         [target.component]: target.label
@@ -120,9 +133,9 @@ const FormPage = _ref => {
   }));
   let errorMessages = null;
   if (runOnLoad && (errors === null || errors === void 0 ? void 0 : errors.length) > 0) {
-    var _page$customValidatio2;
+    var _page$customValidatio;
     errorMessages = [{
-      error: page === null || page === void 0 || (_page$customValidatio2 = page.customValidation) === null || _page$customValidatio2 === void 0 || (_page$customValidatio2 = _page$customValidatio2[0]) === null || _page$customValidatio2 === void 0 ? void 0 : _page$customValidatio2.message
+      error: page === null || page === void 0 || (_page$customValidatio = page.customValidation) === null || _page$customValidatio === void 0 || (_page$customValidatio = _page$customValidatio[0]) === null || _page$customValidatio === void 0 ? void 0 : _page$customValidatio.message
     }];
   } else if ((errors === null || errors === void 0 ? void 0 : errors.length) > 0 && !runOnLoad) {
     errorMessages = errors;
@@ -174,7 +187,6 @@ FormPage.propTypes = {
   }).isRequired,
   pages: _propTypes.default.arrayOf(_propTypes.default.shape({})),
   submitting: _propTypes.default.bool,
-  fromTarget: _propTypes.default.bool,
   pageId: _propTypes.default.string.isRequired
 };
 FormPage.defaultProps = {
@@ -186,7 +198,6 @@ FormPage.defaultProps = {
   onTopLevelChange: undefined,
   onWrapperChange: undefined,
   pages: [],
-  submitting: false,
-  fromTarget: false
+  submitting: false
 };
 var _default = exports.default = FormPage;

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

@@ -337,5 +337,58 @@ describe('components.FormPage', () => {
       }));
       expect(ON_ACTION_CALLS.length).toEqual(0);
     });
+    it('removed field from the form data when the value is set to null', () => {
+      const AUTOCOMPLETE = {
+        id: 'autocomplete',
+        fieldId: 'autocomplete',
+        label: 'autocomplete',
+        hint: '',
+        type: 'autocomplete',
+        required: true,
+        source: [{
+          id: 'a',
+          name: 'apple'
+        }, {
+          id: 'b',
+          name: 'banana'
+        }, {
+          id: 'c',
+          name: 'cherry'
+        }, {
+          id: 'd',
+          name: 'DURIAN'
+        }],
+        disabled: false
+      };
+      const page = {
+        id: 'page1',
+        title: 'Page title',
+        label: 'Page label',
+        components: [AUTOCOMPLETE],
+        formData: {
+          autocomplete: 'autocomplete value example'
+        },
+        actions: []
+      };
+      const onChangeMock = jest.fn();
+      const {
+        getByLabelText
+      } = (0, _setupTests.renderWithValidation)(/*#__PURE__*/_react2.default.createElement(_FormPage.default, {
+        page: page,
+        fromTarget: true,
+        onAction: onChangeMock,
+        onChange: onChangeMock
+      }));
+      const input = getByLabelText('autocomplete');
+      _react.fireEvent.change(input, {
+        target: {
+          name: 'autocomplete',
+          value: '',
+          component: 'autocomplete'
+        }
+      });
+      const updatedState = onChangeMock.mock.calls.pop()[0];
+      expect(updatedState.autocomplete).toBeUndefined();
+    });
   });
 });

package/dist/components/FormRenderer/FormRenderer.js

@@ -54,8 +54,7 @@ const FormRenderer = _ref => {
     noChangeAction,
     newPageId,
     viewOnly,
-    hideBlankRows,
-    fromTarget
+    hideBlankRows
   } = _ref;
   return /*#__PURE__*/_react.default.createElement(_context.HooksContextProvider, {
     overrides: hooks
@@ -76,8 +75,7 @@ const FormRenderer = _ref => {
     noChangeAction: noChangeAction,
     newPageId: newPageId,
     viewOnly: viewOnly,
-    hideBlankRows: hideBlankRows,
-    fromTarget: fromTarget
+    hideBlankRows: hideBlankRows
   })));
 };
 const DEFAULT_CLASS = exports.DEFAULT_CLASS = 'hods-form';
@@ -100,8 +98,7 @@ const InternalFormRenderer = _ref2 => {
     noChangeAction,
     newPageId,
     viewOnly,
-    hideBlankRows,
-    fromTarget
+    hideBlankRows
   } = _ref2;
   // Set up the initial states.
   const [data, setData] = (0, _react.useState)({});
@@ -326,8 +323,7 @@ const InternalFormRenderer = _ref2 => {
     classModifiers: formState.page.classModifiers,
     className: formState.page.className,
     submitting: submitting,
-    pageId: pageId,
-    fromTarget: fromTarget
+    pageId: pageId
   }), formState.page && !formState.cya && formState.page.collection && /*#__PURE__*/_react.default.createElement(_CollectionPage.default, {
     page: formState.page,
     pages: pages,
@@ -370,8 +366,7 @@ const propTypes = {
   /** See <a href="/?path=/docs/f-json--page#formtypes">FormTypes</a>. */
   type: _propTypes.default.oneOf([_models.FormTypes.CYA, _models.FormTypes.FORM, _models.FormTypes.HUB, _models.FormTypes.TASK, _models.FormTypes.WIZARD, _models.FormTypes.TASK_CYA, _models.FormTypes.FORM_WITH_TASK]).isRequired,
   viewOnly: _propTypes.default.bool,
-  hideBlankRows: _propTypes.default.bool,
-  fromTarget: _propTypes.default.bool.isRequired
+  hideBlankRows: _propTypes.default.bool
 };
 const defaultProps = {
   classBlock: DEFAULT_CLASS,