@opengeoweb/taf 4.6.1 → 4.7.1

package/index.umd.js

@@ -1,8 +1,8 @@
 (function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react'), require('@mui/material'), require('react-hook-form'), require('react-redux'), require('react-sortablejs'), require('sortablejs'), require('lodash'), require('@opengeoweb/authentication'), require('@opengeoweb/form-fields'), require('@opengeoweb/shared'), require('@opengeoweb/core'), require('moment'), require('@opengeoweb/theme'), require('react-dom'), require('@opengeoweb/api'), require('@mui/material/LinearProgress'), require('@mui/material/Box')) :
-    typeof define === 'function' && define.amd ? define(['exports', 'react', '@mui/material', 'react-hook-form', 'react-redux', 'react-sortablejs', 'sortablejs', 'lodash', '@opengeoweb/authentication', '@opengeoweb/form-fields', '@opengeoweb/shared', '@opengeoweb/core', 'moment', '@opengeoweb/theme', 'react-dom', '@opengeoweb/api', '@mui/material/LinearProgress', '@mui/material/Box'], factory) :
-    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.Taf = {}, global.React, global.material, global.reactHookForm, global.reactRedux, global.reactSortablejs, global.Sortable, global.lodash, global.authentication, global.formFields, global.shared, global.core, global.moment, global.theme, global.ReactDOM, global.api, global.LinearProgress, global.Box));
-})(this, (function (exports, React, material, reactHookForm, reactRedux, reactSortablejs, Sortable, lodash, authentication, formFields, shared, core, moment, theme, ReactDOM, api, LinearProgress, Box) { 'use strict';
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react'), require('@mui/material'), require('react-hook-form'), require('react-redux'), require('react-sortablejs'), require('sortablejs'), require('@opengeoweb/authentication'), require('@opengeoweb/form-fields'), require('@opengeoweb/shared'), require('@opengeoweb/core'), require('moment'), require('lodash'), require('@opengeoweb/theme'), require('react-dom'), require('@opengeoweb/api'), require('@mui/material/LinearProgress'), require('@mui/material/Box')) :
+    typeof define === 'function' && define.amd ? define(['exports', 'react', '@mui/material', 'react-hook-form', 'react-redux', 'react-sortablejs', 'sortablejs', '@opengeoweb/authentication', '@opengeoweb/form-fields', '@opengeoweb/shared', '@opengeoweb/core', 'moment', 'lodash', '@opengeoweb/theme', 'react-dom', '@opengeoweb/api', '@mui/material/LinearProgress', '@mui/material/Box'], factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.Taf = {}, global.React, global.material, global.reactHookForm, global.reactRedux, global.reactSortablejs, global.Sortable, global.authentication, global.formFields, global.shared, global.core, global.moment, global.lodash, global.theme, global.ReactDOM, global.api, global.LinearProgress, global.Box));
+})(this, (function (exports, React, material, reactHookForm, reactRedux, reactSortablejs, Sortable, authentication, formFields, shared, core, moment, lodash, theme, ReactDOM, api, LinearProgress, Box) { 'use strict';
 
     function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -235,7 +235,7 @@
     var invalidValidityStartTimeMessage = 'Invalid validity start time, change group validity must lie within the TAF validity period';
     var invalidValidityPeriodMessage = 'Invalid validity period, validity end time has to be after validity start time';
     var invalidValidityEndTimeMessage = 'Invalid validity end time, change group validity must lie within the TAF validity period';
-    var invalidChangeValidInterFieldMessage = 'Invalid validity period, expected DDHH/DDHH for BECMG and TEMPO or DDHHmm for FM';
+    var invalidChangeValidInterFieldMessage = 'Invalid validity period, expected DDHH/DDHH for PROB, BECMG and TEMPO or DDHHmm for FM';
     var invalidBECMGDurationValidInterFieldMessage = 'Invalid validity period, for BECMG only validity periods with a duration of 1, 2, 3 or 4 hours are allowed';
     var invalidChangeGroupOverlapsWithFM = 'The valid time of a change group cannot overlap with the valid time of a following FM group. This change group should end before or at the hour of the start of the FM group'; // Validations
     // Ensure all individual sections are correct (DD HH mm etc)
@@ -321,16 +321,29 @@
 
       return true;
     };
-    var validateValidChangeGroupInterField = function validateValidChangeGroupInterField(value, valueChange, tafStart, tafEnd) {
+    var validateValidChangeGroupInterField = function validateValidChangeGroupInterField(value, valueChange, valueProb, tafStart, tafEnd) {
       var trimmedValue = value.trim();
       var trimmedValueChange = valueChange.trim();
+      var trimmedValueProb = valueProb.trim();
 
       if (!trimmedValue.length) {
         return true;
-      } // Ensure format for FM changegroups is correct DDHHmm
+      }
+
+      if (!trimmedValueChange.length && !trimmedValueProb.length) {
+        return true;
+      }
 
+      if (!trimmedValueChange.length && trimmedValueProb.length) {
+        if ( // Ensure format for probability without change is correct DDHH/DDHH
+        trimmedValue.length < 9) {
+          return invalidChangeValidInterFieldMessage;
+        }
+      }
 
-      if (trimmedValue.length > 6 && trimmedValueChange === 'FM' || trimmedValue.length < 9 && trimmedValueChange !== 'FM') {
+      if ( // Ensure format for FM changegroups is correct DDHHmm
+      trimmedValue.length > 6 && trimmedValueChange === 'FM' || // Ensure format for BECMG and TEMPO changegroups is correct DDHH/DDHH
+      trimmedValue.length < 9 && trimmedValueChange !== 'FM') {
         return invalidChangeValidInterFieldMessage;
       } // Ensure BECMG changegroup has duration of 1,2,3,4 hours
 
@@ -2361,7 +2374,7 @@
       }, []);
       return [TAC, retrieveTAC, onSetTac];
     };
-    var useDragOrder = function useDragOrder(trigger, move, onFormBlur) {
+    var useDragOrder = function useDragOrder(trigger, move) {
       var _a = __read(React__default["default"].useState(null), 2),
           activeDraggingIndex = _a[0],
           setIsDragging = _a[1];
@@ -2394,18 +2407,7 @@
           // trigger validation of all fields
           trigger();
         }
-      }, [lastDragOrder, trigger]); // trigger onFormBlur AFTER render of new sorted elements so the TAC gets updated
-
-      React__default["default"].useEffect(function () {
-        var _a = __read(lastDragOrder, 2),
-            oldIndex = _a[0],
-            newIndex = _a[1];
-
-        if (oldIndex !== null && newIndex !== null) {
-          onFormBlur();
-        } // eslint-disable-next-line react-hooks/exhaustive-deps
-
-      }, [lastDragOrder]);
+      }, [lastDragOrder, trigger]);
       return {
         onChangeOrder: onChangeOrder,
         activeDraggingIndex: activeDraggingIndex,
@@ -2474,18 +2476,18 @@
       wind: '',
       visibility: '',
       weather: {
-        weather1: null,
-        weather2: null,
-        weather3: null
+        weather1: '',
+        weather2: '',
+        weather3: ''
       },
       cloud: {
-        cloud1: null,
-        cloud2: null,
-        cloud3: null,
-        cloud4: null
+        cloud1: '',
+        cloud2: '',
+        cloud3: '',
+        cloud4: ''
       },
-      change: null,
-      probability: null
+      change: '',
+      probability: ''
     };
     var getTafStatusLabel = function getTafStatusLabel(status) {
       switch (status) {
@@ -2541,7 +2543,17 @@
         previousValidDateEnd: previousValidDateEnd
       });
     };
+    var createChangeGroup = function createChangeGroup(changeGroup) {
+      return __assign(__assign(__assign({}, emptyChangegroup), changeGroup), {
+        weather: __assign(__assign({}, emptyChangegroup.weather), changeGroup.weather),
+        cloud: __assign(__assign({}, emptyChangegroup.cloud), changeGroup.cloud)
+      });
+    };
     var prepareTafValues = function prepareTafValues(_taf, tafAction, addEmptyChangeGroup) {
+      var _a;
+
+      var _b;
+
       if (addEmptyChangeGroup === void 0) {
         addEmptyChangeGroup = false;
       } // If action is AMEND/CORRECT/DRAFT_AMEND/DRAFT_CORRECTION - add previous valid start and end
@@ -2556,14 +2568,16 @@
         cloud: __assign(__assign({}, emptyBaseForecast.cloud), formattedBaseForecast.cloud)
       });
 
-      return __assign(__assign(__assign(__assign({}, taf), {
+      var formattedChangeGroups = ((_b = taf.changeGroups) === null || _b === void 0 ? void 0 : _b.map(formatFormValues)) || [];
+      var changeGroups = formattedChangeGroups.map(createChangeGroup);
+      return __assign(__assign(__assign(__assign(__assign({}, taf), {
         messageType: getMessageType(taf, tafAction),
         baseForecast: baseForecast
-      }), taf.changeGroups && {
-        changeGroups: taf.changeGroups.map(formatFormValues)
+      }), changeGroups.length && {
+        changeGroups: changeGroups
       }), addEmptyChangeGroup && {
         changeGroups: [emptyChangegroup]
-      });
+      }), (_a = {}, _a[shared.HIDDEN_INPUT_HELPER_IS_DRAFT] = true, _a));
     };
     var getIsFormDefaultDisabled = function getIsFormDefaultDisabled(status) {
       return !(status === 'NEW' || status === 'DRAFT' || status === 'DRAFT_AMENDED' || status === 'DRAFT_CORRECTED');
@@ -2912,7 +2926,8 @@
     };
 
     var TafFormRow = /*#__PURE__*/React__default["default"].forwardRef(function (_a, ref) {
-      var _b = _a.isChangeGroup,
+      var isNotRequiredForAction = _a.isNotRequiredForAction,
+          _b = _a.isChangeGroup,
           isChangeGroup = _b === void 0 ? false : _b,
           _c = _a.disabled,
           disabled = _c === void 0 ? false : _c,
@@ -2926,16 +2941,15 @@
           onAddChangeGroupBelow = _a.onAddChangeGroupBelow,
           onAddChangeGroupAbove = _a.onAddChangeGroupAbove,
           onClearRow = _a.onClearRow,
-          props = __rest(_a, ["isChangeGroup", "disabled", "index", "onRemoveChangeGroup", "field", "dragHandle", "onAddChangeGroupBelow", "onAddChangeGroupAbove", "onClearRow"]);
+          props = __rest(_a, ["isNotRequiredForAction", "isChangeGroup", "disabled", "index", "onRemoveChangeGroup", "field", "dragHandle", "onAddChangeGroupBelow", "onAddChangeGroupAbove", "onClearRow"]);
 
       var namePrefix = !isChangeGroup ? 'baseForecast' : "changeGroups[" + index + "]";
       var fieldNames = getFieldNames(isChangeGroup, index);
 
       var _g = reactHookForm.useFormContext(),
           getValues = _g.getValues,
-          trigger = _g.trigger;
+          trigger = _g.trigger; // cross-field required validation
 
-      var isNotRequiredForAction = shared.useDraftFormHelpers(true).isRequired; // cross-field required validation
 
       var _h = __read(getRequiredCrossFields(fieldNames), 3),
           mainFields = _h[0],
@@ -3156,7 +3170,7 @@
               return isChangeGroup ? validateValidField(value, getValues('validDateStart'), getValues('validDateEnd')) : true;
             },
             validateValidChangeGroupInterField: function validateValidChangeGroupInterField$1(value) {
-              return isChangeGroup ? validateValidChangeGroupInterField(value, getValues(fieldNames.change), getValues('validDateStart'), getValues('validDateEnd')) : true;
+              return isChangeGroup ? validateValidChangeGroupInterField(value, getValues(fieldNames.change), getValues(fieldNames.probability), getValues('validDateStart'), getValues('validDateEnd')) : true;
             },
             validatePreviousRow: validatePreviousRow,
             validateNextRows: validateNextRows
@@ -3818,20 +3832,34 @@
       }))), rootElement);
     };
 
+    /* *
+     * Licensed under the Apache License, Version 2.0 (the "License");
+     * you may not use this file except in compliance with the License.
+     * You may obtain a copy of the License at
+     *
+     *     http://www.apache.org/licenses/LICENSE-2.0
+     *
+     * Unless required by applicable law or agreed to in writing, software
+     * distributed under the License is distributed on an "AS IS" BASIS,
+     * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+     * See the License for the specific language governing permissions and
+     * limitations under the License.
+     *
+     * Copyright 2022 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+     * Copyright 2022 - Finnish Meteorological Institute (FMI)
+     * */
     var TafModuleContext = /*#__PURE__*/React__namespace.createContext({
       onValidateForm: null,
       registerValidateForm: null,
       tafAction: null,
       setTafAction: null,
-      isFormDirty: null,
-      setIsFormDirty: null
+      onPreventCloseView: null
     });
     var useTafModuleContext = function useTafModuleContext() {
       return React__namespace.useContext(TafModuleContext);
     };
     var useTafModuleState = function useTafModuleState(_a) {
       var onPreventCloseView = _a.onPreventCloseView;
-      var api$1 = api.useApiContext().api;
 
       var _b = __read(React__namespace.useState(function () {
         return new Promise(function () {
@@ -3845,38 +3873,18 @@
           tafAction = _c[0],
           setTafAction = _c[1];
 
-      var _d = __read(React__namespace.useState(false), 2),
-          isFormDirty = _d[0],
-          setIsFormDirty = _d[1];
-
-      var _e = __read(useTACGenerator(undefined, api$1.getTAC), 3),
-          TAC = _e[0],
-          updateTAC = _e[1],
-          setTAC = _e[2];
-
       var onRegisterValidateForm = function onRegisterValidateForm(promiseToRegister) {
         registerValidateForm(function () {
           return promiseToRegister;
         });
       };
 
-      var onChangeFormDirty = function onChangeFormDirty(isDirty) {
-        if (isDirty !== isFormDirty) {
-          setIsFormDirty(isDirty);
-          onPreventCloseView(isDirty);
-        }
-      };
-
       return {
         onValidateForm: onValidateForm,
         registerValidateForm: onRegisterValidateForm,
         tafAction: tafAction,
         setTafAction: setTafAction,
-        TAC: TAC,
-        updateTAC: updateTAC,
-        setTAC: setTAC,
-        isFormDirty: isFormDirty,
-        setIsFormDirty: onChangeFormDirty
+        onPreventCloseView: onPreventCloseView
       };
     };
     var TafModuleProvider = function TafModuleProvider(_a) {
@@ -3963,20 +3971,15 @@
       var isDefaultDisabled = getIsFormDefaultDisabled(originalTaf.status);
       var confirmDialog = shared.useConfirmationDialog();
 
-      var _j = shared.useDraftFormHelpers(true),
+      var _j = shared.useDraftFormHelpers(),
           toggleIsDraft = _j.toggleIsDraft,
-          DraftFieldHelper = _j.DraftFieldHelper;
+          isNotRequiredForAction = _j.isRequired;
 
       var _k = useTafModuleContext(),
           registerValidateForm = _k.registerValidateForm,
           tafAction = _k.tafAction,
-          setIsFormDirty = _k.setIsFormDirty,
           setTafAction = _k.setTafAction,
-          TAC = _k.TAC,
-          updateTAC = _k.updateTAC,
-          setTAC = _k.setTAC;
-
-      var isMounted = shared.useIsMounted().isMounted;
+          onPreventCloseView = _k.onPreventCloseView;
 
       var _l = reactHookForm.useFormContext(),
           control = _l.control,
@@ -3989,47 +3992,12 @@
 
       var isFormDirty = formState.isDirty,
           errors = formState.errors;
-      shared.usePreventBrowserClose(isFormDirty && !isDisabled);
-      var hiddenInputFields = ['baseTime', 'issueDate', 'uuid', 'validDateStart', 'validDateEnd', 'status', 'previousId', 'previousValidDateStart', 'previousValidDateEnd'];
-
-      var _m = __read(React__default["default"].useState(getValues()), 2),
-          delayedFormValues = _m[0],
-          setDelayedFormValues = _m[1];
-
-      var hasErrors = Object.keys(errors).length;
-
-      var onFormBlur = function onFormBlur() {
-        if (!lodash.isEqual(getValues(), delayedFormValues)) {
-          setDelayedFormValues(getValues());
-        }
-      };
-
-      var resetTAC = function resetTAC() {
-        if (originalTaf.status !== 'NEW') {
-          updateTAC(originalTaf);
-        } else {
-          setTAC(TAC_NOT_AVAILABLE);
-        }
-      };
-
-      React__default["default"].useEffect(function () {
-        if (isMounted.current && isFormDirty) {
-          var newTAC = hasErrors ? null : convertTafValuesToObject(delayedFormValues);
-          updateTAC(newTAC);
-        } // eslint-disable-next-line react-hooks/exhaustive-deps
-
-      }, [delayedFormValues]);
-      React__default["default"].useEffect(function () {
-        // prevent updating an error while typing
-        if (!hasErrors && isFormDirty && document.activeElement.tagName !== 'INPUT') {
-          updateTAC(convertTafValuesToObject(delayedFormValues));
-        } // eslint-disable-next-line react-hooks/exhaustive-deps
-
-      }, [hasErrors]); // Needed to be able to show a confirmation dialog on switching tabs when form is edited and not saved
+      shared.usePreventBrowserClose(isFormDirty && !isDisabled); // Needed to be able to show a confirmation dialog on closing parent view
 
       React__default["default"].useEffect(function () {
-        setIsFormDirty(isFormDirty);
-      }, [isFormDirty, setIsFormDirty]);
+        onPreventCloseView(isFormDirty); // eslint-disable-next-line react-hooks/exhaustive-deps
+      }, [isFormDirty]);
+      var hiddenInputFields = ['baseTime', 'issueDate', 'uuid', 'validDateStart', 'validDateEnd', 'status', 'previousId', 'previousValidDateStart', 'previousValidDateEnd', shared.HIDDEN_INPUT_HELPER_IS_DRAFT];
 
       var onSubmit = function onSubmit(data) {
         // eslint-disable-next-line no-console
@@ -4046,22 +4014,22 @@
         });
       };
 
-      var resetFormValues = function resetFormValues(action, shouldAddEmptyChangGroup) {
-        if (action === void 0) {
-          action = undefined;
-        }
-
-        var newTaf = prepareTafValues(originalTaf, action, shouldAddEmptyChangGroup);
-        reset(newTaf);
+      var resetFormValues = function resetFormValues(formData) {
+        return reset(formData);
       };
 
-      var resetForm = function resetForm(action, resetDisabled) {
+      var resetFormState = function resetFormState(action, resetDisabled, tafToReset) {
         if (action === void 0) {
           action = undefined;
         }
 
-        var shouldAddEmptyChangGroup = !(originalTaf && originalTaf.changeGroups) && !resetDisabled;
-        resetFormValues(action, shouldAddEmptyChangGroup);
+        if (tafToReset === void 0) {
+          tafToReset = originalTaf;
+        }
+
+        var shouldAddEmptyChangGroup = !(tafToReset && tafToReset.changeGroups) && !resetDisabled;
+        var newTaf = prepareTafValues(tafToReset, action, shouldAddEmptyChangGroup);
+        resetFormValues(newTaf);
         setIsDisabled(resetDisabled);
         setTafAction(action);
       };
@@ -4167,8 +4135,7 @@
                     didSucceed = _a.sent();
 
                     if (didSucceed) {
-                      resetForm(undefined, isDefaultDisabled);
-                      resetTAC();
+                      resetFormState(undefined, isDefaultDisabled);
                     }
 
                     return [2
@@ -4191,18 +4158,17 @@
             toggleIsDraft(true);
             handleSubmit(function (data) {
               onFormAction(action, convertTafValuesToObject(data));
-              reset(getValues());
+              resetFormValues(getValues());
             })();
             break;
 
           case 'DISCARD':
             if (isFormDirty) {
               showConfirmDialog(action).then(function () {
-                resetForm(undefined, isDefaultDisabled);
-                resetTAC();
+                resetFormState(undefined, isDefaultDisabled);
               });
             } else {
-              resetForm(undefined, isDefaultDisabled);
+              resetFormState(undefined, isDefaultDisabled);
             }
 
             break;
@@ -4232,9 +4198,7 @@
                       didSucceed = _a.sent();
 
                       if (didSucceed) {
-                        setIsDisabled(true);
-                        reset(prepareTafValues(convertTafValuesToObject(data), action, false));
-                        setTafAction(null);
+                        resetFormState(null, true, convertTafValuesToObject(data));
                       }
 
                       return [2
@@ -4277,24 +4241,24 @@
             break;
 
           default:
-            resetForm(action, false);
+            resetFormState(action, false);
             break;
         }
       };
 
-      var _o = reactHookForm.useFieldArray({
+      var _m = reactHookForm.useFieldArray({
         control: control,
         name: 'changeGroups'
       }),
-          fields = _o.fields,
-          insert = _o.insert,
-          remove = _o.remove,
-          move = _o.move;
+          fields = _m.fields,
+          insert = _m.insert,
+          remove = _m.remove,
+          move = _m.move;
 
-      var _p = useDragOrder(trigger, move, onFormBlur),
-          onChangeOrder = _p.onChangeOrder,
-          onStartDrag = _p.onStartDrag,
-          activeDraggingIndex = _p.activeDraggingIndex;
+      var _o = useDragOrder(trigger, move),
+          onChangeOrder = _o.onChangeOrder,
+          onStartDrag = _o.onStartDrag,
+          activeDraggingIndex = _o.activeDraggingIndex;
 
       var onRemoverow = function onRemoverow(index) {
         confirmDialog({
@@ -4304,8 +4268,6 @@
         }).then(function () {
           remove(index);
           trigger(); // trigger all fields validation
-
-          onFormBlur();
         });
       }; // TODO: https://gitlab.com/opengeoweb/opengeoweb/-/issues/726 insert (react-hook-form) does not work well with focus (only last row will get focus), so added this dirty solution. This can be fixed in a better way in react-hook-form v7
 
@@ -4375,15 +4337,12 @@
         });
       };
 
-      var _q = __read(React__default["default"].useState(false), 2),
-          shouldValidate = _q[0],
-          setShouldValidate = _q[1];
+      var _p = __read(React__default["default"].useState(false), 2),
+          shouldValidate = _p[0],
+          setShouldValidate = _p[1];
 
       React__default["default"].useEffect(function () {
-        setIsDisabled(!isEditor || isDefaultDisabled);
-        var defaultValues = prepareTafValues(originalTaf, undefined, !isDefaultDisabled && !originalTaf.changeGroups); // set initial form values
-
-        reset(defaultValues); // set validate flag to validate after the values have been set
+        setIsDisabled(!isEditor || isDefaultDisabled); // set validate flag to validate after the values have been set
 
         setShouldValidate(true); // register validate method to use in parent components
 
@@ -4405,17 +4364,14 @@
         registerValidateForm(onValidateFormPromise); // set default taf action
 
         setTafAction(fromStatusToAction(originalTaf.status));
-        resetTAC();
         return function () {
-          reset({});
+          resetFormValues({});
         }; // eslint-disable-next-line react-hooks/exhaustive-deps
       }, []);
       React__default["default"].useEffect(function () {
         var newValues = prepareTafValues(originalTaf, undefined, !isDefaultDisabled && !originalTaf.changeGroups); // set new form values when taf values changed
 
-        reset(newValues); // reset TAC when taf values changed
-
-        resetTAC(); // eslint-disable-next-line react-hooks/exhaustive-deps
+        resetFormValues(newValues); // eslint-disable-next-line react-hooks/exhaustive-deps
       }, [originalTaf]);
       React__default["default"].useEffect(function () {
         // update disabled state when editor changed
@@ -4460,39 +4416,12 @@
         editor: editor
       }))), /*#__PURE__*/React__default["default"].createElement("form", {
         "data-testid": "taf-form",
-        onSubmit: handleSubmit(onSubmit),
-        onBlur: onFormBlur
-      }, /*#__PURE__*/React__default["default"].createElement(material.Typography, {
-        sx: {
-          fontSize: '20px',
-          fontWeight: 500,
-          height: '24px',
-          display: 'flex',
-          alignItems: 'center'
-        }
-      }, "TAC"), /*#__PURE__*/React__default["default"].createElement(material.Typography, {
-        sx: {
-          fontSize: '12px',
-          lineHeight: 1.67,
-          letterSpacing: '0.21px',
-          margin: '8px 0px'
-        },
-        "data-testid": "form-tac-message"
-      }, TAC.split('\n').map(function (line) {
-        return /*#__PURE__*/React__default["default"].createElement(material.Box, {
-          component: "span",
-          key: line,
-          "data-testid": "tafform-tac-message-line",
-          sx: {
-            textIndent: '-0.7em',
-            borderRadius: '3px',
-            paddingRight: '0.7em'
-          }
-        }, line);
-      })), /*#__PURE__*/React__default["default"].createElement(TafFormRow, {
+        onSubmit: handleSubmit(onSubmit)
+      }, /*#__PURE__*/React__default["default"].createElement(TafFormRow, {
         disabled: isDisabled,
         onAddChangeGroupBelow: onAddRow,
-        onClearRow: _onClearRow
+        onClearRow: _onClearRow,
+        isNotRequiredForAction: isNotRequiredForAction
       }), /*#__PURE__*/React__default["default"].createElement(reactSortablejs.ReactSortable, {
         tag: "div",
         list: fields,
@@ -4526,7 +4455,8 @@
             isDisabled: fields.length === 1 || isDisabled,
             isSorting: activeDraggingIndex === index,
             index: index
-          })
+          }),
+          isNotRequiredForAction: isNotRequiredForAction
         });
       })), !isDisabled && isEditor && /*#__PURE__*/React__default["default"].createElement(material.Grid, {
         container: true,
@@ -4553,7 +4483,7 @@
           name: field,
           key: field
         });
-      }), /*#__PURE__*/React__default["default"].createElement(DraftFieldHelper, null)));
+      })));
     }, function (prevProps, nextProps) {
       // prevent re-render
       return !nextProps.isDisabled && prevProps.tafFromBackend !== nextProps.tafFromBackend && // if editor changed it should rerender
@@ -4997,7 +4927,6 @@
           trigger = _e.trigger,
           setValue = _e.setValue;
 
-      var updateTAC = useTafModuleContext().updateTAC;
       var showSnackbar = React__default["default"].useCallback(function (message) {
         dispatch(core.snackbarActions.openSnackbar({
           message: message
@@ -5016,7 +4945,6 @@
         setTimeout(function () {
           trigger(); // trigger all fields validation
         }, 0);
-        updateTAC(convertTafValuesToObject(newTaf));
         showSnackbar(getSnackbarMessage$1(location, locationLabel));
       };
 
@@ -5246,7 +5174,7 @@
           },
           position: 'absolute',
           right: '4px',
-          top: '82px'
+          top: '42px'
         }
       }, /*#__PURE__*/React__namespace.createElement(theme.ListItem, null)), /*#__PURE__*/React__namespace.createElement(material.Dialog, {
         open: isOpen,
@@ -5288,6 +5216,7 @@
           location: 'EHAM'
         }
       } : _c;
+      var isDirty = reactHookForm.useFormContext().formState.isDirty;
 
       if (!tafFromBackend) {
         return null;
@@ -5308,7 +5237,7 @@
       }];
 
       var onChangeTab = function onChangeTab(_event, newValue) {
-        onChangeTimeSlot(tabs[newValue].timeSlot);
+        onChangeTimeSlot(tabs[newValue].timeSlot, isDirty);
       };
 
       return /*#__PURE__*/React__default["default"].createElement(material.Tabs, {
@@ -5353,6 +5282,7 @@
           _c = _a.onChangeTab,
           onChangeTab = _c === void 0 ? function () {} : _c,
           timeSlot = _a.timeSlot;
+      var isDirty = reactHookForm.useFormContext().formState.isDirty;
       return /*#__PURE__*/React__namespace.createElement(material.MenuList, {
         "data-testid": "location-tabs",
         sx: {
@@ -5383,7 +5313,7 @@
             }
           },
           onClick: function onClick() {
-            return onChangeTab(index);
+            return onChangeTab(index, isDirty);
           }
         }, editor && /*#__PURE__*/React__namespace.createElement(Box__default["default"], {
           sx: {
@@ -5861,8 +5791,7 @@
 
       var _g = useTafModuleContext(),
           onValidateForm = _g.onValidateForm,
-          tafAction = _g.tafAction,
-          isFormDirty = _g.isFormDirty;
+          tafAction = _g.tafAction;
 
       var _h = __read(React__default["default"].useState(sortTafTimeSlots(tafList)), 2),
           _j = _h[0],
@@ -5981,7 +5910,7 @@
         });
       };
 
-      function onChangeTab(action, value) {
+      function onChangeTab(action, value, isFormDirty) {
         return __awaiter(this, void 0, void 0, function () {
           var taf;
           return __generator(this, function (_a) {
@@ -6045,12 +5974,12 @@
         });
       }
 
-      var onChangeLocationTab = function onChangeLocationTab(index) {
-        onChangeTab(setActiveTafIndex, index);
+      var onChangeLocationTab = function onChangeLocationTab(index, isFormDirty) {
+        onChangeTab(setActiveTafIndex, index, isFormDirty);
       };
 
-      var onChangeTimeSlot = function onChangeTimeSlot(newTimeSlot) {
-        onChangeTab(changeTimeSlot, newTimeSlot);
+      var onChangeTimeSlot = function onChangeTimeSlot(newTimeSlot, isFormDirty) {
+        onChangeTab(changeTimeSlot, newTimeSlot, isFormDirty);
       };
 
       var changeTimeSlot = function changeTimeSlot(newTimeSlot) {

package/lib/components/TafForm/TafFormRow/types.d.ts

@@ -2,6 +2,7 @@
 import { GridProps } from '@mui/material';
 import { ArrayField } from 'react-hook-form';
 export interface TafFormRowProps extends GridProps {
+    isNotRequiredForAction: (value: string) => boolean | string;
     isChangeGroup?: boolean;
     disabled?: boolean;
     index?: number;