@opengeoweb/taf 2.1.0 → 2.1.4

package/{taf.umd.js → index.umd.js}

@@ -1,8 +1,8 @@
 (function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react'), require('@material-ui/core'), require('@material-ui/lab'), require('moment'), require('@opengeoweb/shared'), require('@material-ui/icons'), require('@opengeoweb/api'), require('@opengeoweb/form-fields'), require('react-hook-form'), require('react-sortablejs')) :
-    typeof define === 'function' && define.amd ? define(['exports', 'react', '@material-ui/core', '@material-ui/lab', 'moment', '@opengeoweb/shared', '@material-ui/icons', '@opengeoweb/api', '@opengeoweb/form-fields', 'react-hook-form', 'react-sortablejs'], factory) :
-    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.Taf = {}, global.React, global.core, global.lab, global.moment, global.shared, global.icons, global.api, global.formFields, global.reactHookForm, global.reactSortablejs));
-})(this, (function (exports, React, core, lab, moment, shared, icons, api, formFields, reactHookForm, reactSortablejs) { 'use strict';
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react'), require('@mui/material'), require('@mui/styles/makeStyles'), require('moment'), require('@opengeoweb/shared'), require('@mui/icons-material'), require('@opengeoweb/api'), require('@opengeoweb/form-fields'), require('react-hook-form'), require('react-sortablejs')) :
+    typeof define === 'function' && define.amd ? define(['exports', 'react', '@mui/material', '@mui/styles/makeStyles', 'moment', '@opengeoweb/shared', '@mui/icons-material', '@opengeoweb/api', '@opengeoweb/form-fields', 'react-hook-form', 'react-sortablejs'], factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.Taf = {}, global.React, global.material, global.makeStyles, global.moment, global.shared, global.iconsMaterial, global.api, global.formFields, global.reactHookForm, global.reactSortablejs));
+})(this, (function (exports, React, material, makeStyles, moment, shared, iconsMaterial, api, formFields, reactHookForm, reactSortablejs) { 'use strict';
 
     function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -26,6 +26,7 @@
 
     var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
     var React__namespace = /*#__PURE__*/_interopNamespace(React);
+    var makeStyles__default = /*#__PURE__*/_interopDefaultLegacy(makeStyles);
     var moment__default = /*#__PURE__*/_interopDefaultLegacy(moment);
 
     /*! *****************************************************************************
@@ -133,10 +134,14 @@
         return ar;
     }
 
-    function __spreadArray(to, from) {
-        for (var i = 0, il = from.length, j = to.length; i < il; i++, j++)
-            to[j] = from[i];
-        return to;
+    function __spreadArray(to, from, pack) {
+        if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+            if (ar || !(i in from)) {
+                if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+                ar[i] = from[i];
+            }
+        }
+        return to.concat(ar || Array.prototype.slice.call(from));
     }
 
     /* *
@@ -228,20 +233,20 @@
      * Copyright 2021 - Finnish Meteorological Institute (FMI)
      * */
     var FORMAT_DAYS_HOURS = 'DDHH';
-    var FORMAT_DAYS_HOURS_MINUTS = 'DDHHmm'; // formatters
+    var FORMAT_DAYS_HOURS_MINUTES = 'DDHHmm'; // formatters
 
     var formatValidToString = function formatValidToString(valid) {
       // Ensure end of valid period if midnight is shown as 24 and not 00
       var endHours = moment__default["default"].utc(valid.end).format('kk');
       var endDate = endHours === '24' ? moment__default["default"].utc(valid.end).add(-1, 'day').format('DD') : moment__default["default"].utc(valid.end).format('DD');
-      return valid.end ? moment__default["default"].utc(valid.start).format(FORMAT_DAYS_HOURS) + "/" + endDate + endHours : moment__default["default"].utc(valid.start).format(FORMAT_DAYS_HOURS_MINUTS);
+      return valid.end ? moment__default["default"].utc(valid.start).format(FORMAT_DAYS_HOURS) + "/" + endDate + endHours : moment__default["default"].utc(valid.start).format(FORMAT_DAYS_HOURS_MINUTES);
     };
 
     var getSections = function getSections(value, format) {
       return {
         day: parseInt(value.substring(0, 2), 10),
         hour: parseInt(value.substring(2, 4), 10),
-        min: format === FORMAT_DAYS_HOURS_MINUTS ? parseInt(value.substring(4), 10) : 0
+        min: format === FORMAT_DAYS_HOURS_MINUTES ? parseInt(value.substring(4), 10) : 0
       };
     };
 
@@ -271,7 +276,7 @@
       var tafStartMoment = moment__default["default"].utc(tafStart);
       var tafEndMoment = moment__default["default"].utc(tafEnd);
       var startEnd = trimmedValue.split('/');
-      var format = trimmedValue.indexOf('/') === -1 ? FORMAT_DAYS_HOURS_MINUTS : FORMAT_DAYS_HOURS;
+      var format = trimmedValue.indexOf('/') === -1 ? FORMAT_DAYS_HOURS_MINUTES : FORMAT_DAYS_HOURS;
       var startSections = getSections(startEnd[0], format);
       var start = getValidityTimeStamp('start', startSections, tafStartMoment, tafEndMoment).format('YYYY-MM-DDTHH:mm:ss[Z]'); // If we only have start value - return that otherwise, also get end time
 
@@ -296,7 +301,8 @@
     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 invalidBECMGDurationValidInterFieldMessage = 'Invalid validity period, for BECMG only validity periods with a duration of 1, 2, 3 or 4 hours are allowed'; // Validations
+    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)
 
     var validateValidSections = function validateValidSections(sections, isStartEnd) {
@@ -320,7 +326,7 @@
       var tafStartMoment = moment__default["default"].utc(tafStart);
       var tafEndMoment = moment__default["default"].utc(tafEnd);
       var startEnd = value.split('/');
-      var format = value.indexOf('/') === -1 ? FORMAT_DAYS_HOURS_MINUTS : FORMAT_DAYS_HOURS;
+      var format = value.indexOf('/') === -1 ? FORMAT_DAYS_HOURS_MINUTES : FORMAT_DAYS_HOURS;
       var validateMsg = []; // Validate start time
 
       var startSections = getSections(startEnd[0], format); // Validate individual sections for start
@@ -398,7 +404,7 @@
         var tafStartMoment = moment__default["default"].utc(tafStart);
         var tafEndMoment = moment__default["default"].utc(tafEnd);
         var startEnd = trimmedValue.split('/');
-        var format = trimmedValue.indexOf('/') === -1 ? FORMAT_DAYS_HOURS_MINUTS : FORMAT_DAYS_HOURS; // Validate start time
+        var format = trimmedValue.indexOf('/') === -1 ? FORMAT_DAYS_HOURS_MINUTES : FORMAT_DAYS_HOURS; // Validate start time
 
         var startSections = getSections(startEnd[0], format);
         var startTimestamp = getValidityTimeStamp('start', startSections, tafStartMoment, tafEndMoment);
@@ -418,17 +424,17 @@
     var invalidPreviousChangeGroupIsBeforeMessage = 'Valid time should be after previous valid time';
     var invalidPreviousChangeGroupOrderMessage = "When valid times are equal, the change/probability order should be: " + validProbChangeOrder.join(', ');
     var invalidPreviousChangeGroupHasSameValue = "When valid times are equal, probability/change can't have the same value as previous row value";
-    var validatePreviousChangeGroup = function validatePreviousChangeGroup(currentChangeGroup, nextChangeGroup, tafStart, tafEnd) {
+    var validatePreviousChangeGroup = function validatePreviousChangeGroup(currentChangeGroup, previousChangeGroup, tafStart, tafEnd) {
       // extract the needed values from changeGroups
       var valid = currentChangeGroup.valid,
           _a = currentChangeGroup.change,
           change = _a === void 0 ? '' : _a,
           _b = currentChangeGroup.probability,
           probability = _b === void 0 ? '' : _b;
-      var previousValid = nextChangeGroup.valid,
-          _c = nextChangeGroup.change,
+      var previousValid = previousChangeGroup.valid,
+          _c = previousChangeGroup.change,
           previousChange = _c === void 0 ? '' : _c,
-          _d = nextChangeGroup.probability,
+          _d = previousChangeGroup.probability,
           previousProbability = _d === void 0 ? '' : _d; // get the parsed values
 
       var validValue = parseValidToObject(valid, tafStart, tafEnd);
@@ -462,6 +468,27 @@
         }
       }
 
+      return true;
+    }; // validate overlapping validity when one of the following changegroups is FM
+
+    var validateOverlapWithFM = function validateOverlapWithFM(currentChangeGroup, nextChangeGroups, tafStart, tafEnd) {
+      var valid = currentChangeGroup.valid;
+      if (!valid || !nextChangeGroups.length) return true;
+      var validValue = parseValidToObject(valid, tafStart, tafEnd);
+      var currentRowEndTime = moment__default["default"](validValue.end);
+      var firstFMChangeGroup = nextChangeGroups.find(function (nextChangeGroup) {
+        return nextChangeGroup.change.trim() === 'FM';
+      });
+
+      if (firstFMChangeGroup && firstFMChangeGroup.valid) {
+        var FMValidValue = parseValidToObject(firstFMChangeGroup.valid, tafStart, tafEnd);
+        var FMStartTime = moment__default["default"](FMValidValue.start);
+
+        if (currentRowEndTime.isAfter(FMStartTime)) {
+          return invalidChangeGroupOverlapsWithFM;
+        }
+      }
+
       return true;
     };
 
@@ -1395,8 +1422,12 @@
     var invalidWindDirectionStepMessage = 'Invalid wind direction, the direction must be rounded to the nearest step of 10 degrees';
     var invalidWindSpeedMessage = 'Invalid wind speed, expected a speed equal to 2 digits or P99';
     var invalidWindGustsMessage = 'Invalid wind gusts, expected gusts equal to 2 digits or P99';
-    var invalidWindGustSpeedCombinationMessage = 'Invalid wind, wind gusts must at least be 10 knots greater than the wind speed';
-    var invalidGustForWindP99Message = 'Invalid wind speed and gust combination, if wind is P99, gusts can only be empty or P99'; // validations
+    var invalidWindGustSpeedCombinationMessage = 'Invalid wind gusts, gusts must at least be 10 knots greater than the wind speed';
+    var invalidWindGustSpeedBelow15Message = 'Invalid wind gusts, gusts are only allowed for a minimum wind speed of 15 knots';
+    var invalidGustForWindP99Message = 'Invalid wind speed and gust combination, if wind is P99, gusts can only be empty or P99';
+    var invalidWindSpeedForDirectionZeroMessage = 'Invalid wind speed, if direction is 000, speed can only be 00';
+    var invalidWindSpeedForDirectionNonZeroMessage = 'Invalid wind speed, if direction is not 000, speed can not be 00';
+    var invalidWindVRBWindDirectionMessage = 'Invalid wind direction, VRB can only be used in combination with windspeeds smaller than 4 or in combination with gusts and showers'; // validations
 
     var validateDirection = function validateDirection(value) {
       // if not a number
@@ -1444,8 +1475,29 @@
       return value === 'KT' || value === '' || invalidWindMessage;
     };
 
-    var validateWindInterSection = function validateWindInterSection(speed, gust) {
-      if (gust === '' || gust === 'P99') {
+    var validateWindInterSection = function validateWindInterSection(speed, gust, direction, weather1Value, weather2Value, weather3Value) {
+      if (direction === '000' && speed !== '00') {
+        return invalidWindSpeedForDirectionZeroMessage;
+      }
+
+      if (direction !== '000' && speed === '00') {
+        return invalidWindSpeedForDirectionNonZeroMessage;
+      }
+
+      if (direction === 'VRB' && (speed === 'P99' || parseInt(speed, 10) > 3)) {
+        // Only allow VRB for speeds smaller than 4 or in combination with gusts and showers (SH, TS, SQ)
+        var allowedWeatherPhenom = ['SH', 'TS', 'SQ'];
+        if (gust === '' || !allowedWeatherPhenom.some(function (allowedPhenom) {
+          return weather1Value.includes(allowedPhenom);
+        }) && !allowedWeatherPhenom.some(function (allowedPhenom) {
+          return weather2Value.includes(allowedPhenom);
+        }) && !allowedWeatherPhenom.some(function (allowedPhenom) {
+          return weather3Value.includes(allowedPhenom);
+        })) return invalidWindVRBWindDirectionMessage;
+      } // Validate gust
+
+
+      if (gust === '') {
         return true;
       }
 
@@ -1453,24 +1505,35 @@
         return invalidGustForWindP99Message;
       }
 
-      return parseInt(gust, 10) - parseInt(speed, 10) >= 10 || invalidWindGustSpeedCombinationMessage;
+      if (parseInt(speed, 10) < 15) {
+        return invalidWindGustSpeedBelow15Message;
+      }
+
+      if (gust !== 'P99' && parseInt(gust, 10) - parseInt(speed, 10) < 10) {
+        return invalidWindGustSpeedCombinationMessage;
+      }
+
+      return true;
     }; // Main validation function
 
 
-    var validateWindField = function validateWindField(value) {
-      var trimmedValue = value.trim();
+    var validateWindField = function validateWindField(value, weatherfield1, weatherfield2, weatherfield3) {
+      var trimmedWindValue = value.trim();
+      var trimmedWeather1Value = weatherfield1.trim();
+      var trimmedWeather2Value = weatherfield2.trim();
+      var trimmedWeather3Value = weatherfield3.trim();
 
-      if (!trimmedValue.length) {
+      if (!trimmedWindValue.length) {
         return true;
       } // Validate length and ensure it doesn't contain any other characters than numbers and VRB P KT and G
 
 
-      if (trimmedValue.length < 5 || trimmedValue.length > 12 || !trimmedValue.match(/^[0-9VRBPGKT]+$/)) {
+      if (trimmedWindValue.length < 5 || trimmedWindValue.length > 12 || !trimmedWindValue.match(/^[0-9VRBPGKT]+$/)) {
         return invalidWindMessage;
       } // First validate individual sections
 
 
-      var windValidationIndv = extractValidateWindSections(trimmedValue, true);
+      var windValidationIndv = extractValidateWindSections(trimmedWindValue, true);
 
       if (windValidationIndv.validations.length !== 0) {
         return windValidationIndv.validations.find(function (error) {
@@ -1479,7 +1542,7 @@
       } // Then do any intersection validation
 
 
-      return validateWindInterSection(windValidationIndv.speed, windValidationIndv.gust);
+      return validateWindInterSection(windValidationIndv.speed, windValidationIndv.gust, windValidationIndv.direction, trimmedWeather1Value, trimmedWeather2Value, trimmedWeather3Value);
     };
 
     var formatSingleCloud = function formatSingleCloud(value) {
@@ -1528,10 +1591,10 @@
     var parseSingleCloud = function parseSingleCloud(value) {
       if (!value) return null;
       var trimmedCloud = value.trim();
-      var cloudType = trimmedCloud.substr(6, 3);
+      var cloudType = trimmedCloud.substring(6, 9);
       return __assign({
-        coverage: trimmedCloud.substr(0, 3),
-        height: parseInt(trimmedCloud.substr(3, 3), 10)
+        coverage: trimmedCloud.substring(0, 3),
+        height: parseInt(trimmedCloud.substring(3, 6), 10)
       }, cloudType && {
         type: cloudType
       });
@@ -1549,20 +1612,22 @@
           switch (key) {
             case 'cloud1':
               {
-                if (isVerticalVisibility(clouds[key])) {
+                var trimmedValue = clouds[key].trim();
+
+                if (isVerticalVisibility(trimmedValue)) {
                   // Parse Vertical Visibility
                   return __assign(__assign({}, list), (_a = {}, _a[key] = {
-                    verticalVisibility: parseInt(clouds[key].substr(2, 3), 10)
+                    verticalVisibility: parseInt(trimmedValue.substring(2, 5), 10)
                   }, _a));
                 }
 
-                if (clouds[key] === 'NSC') {
+                if (trimmedValue === 'NSC') {
                   // Parse No Significant Clouds
-                  return __assign(__assign({}, list), (_b = {}, _b[key] = clouds[key], _b));
+                  return __assign(__assign({}, list), (_b = {}, _b[key] = trimmedValue, _b));
                 } // Parse Cloud
 
 
-                return __assign(__assign({}, list), (_c = {}, _c[key] = parseSingleCloud(clouds[key]), _c));
+                return __assign(__assign({}, list), (_c = {}, _c[key] = parseSingleCloud(trimmedValue), _c));
               }
 
             default:
@@ -1590,16 +1655,19 @@
     var invalidCloudHeightStepsMessage = 'Invalid cloud height, a height above 050 must be rounded to the nearest 1000ft';
     var invalidCLoudTypeMessage = 'Invalid cloud type, expected CB or TCU';
     var invalidHeightTypeCombinationMessage = 'Invalid cloud input, when cloud height is 050 or higher, CB or TCU is required';
-    var invalidVerticalVisibilityMessage = 'Invalid vertical visibility, expected VV<value> with value consisting of 3 digits between 000 and 010';
+    var invalidVerticalVisibilityMessage = 'Invalid vertical visibility, expected VV<value> with value consisting of 3 digits';
+    var invalidVerticalVisibilityHeightMessage = 'Invalid vertical visibility, visibility should lie between 001 and 010';
+    var invalidVerticalVisibilityHeightFGMessage = 'Invalid vertical visibility, in case of fog visibility should lie between 001 and 005';
     var invalidCloudHeightComparedToPreviousMessage = 'Invalid cloud height, height must be greater than previous cloud group height';
-    var invalidCloud2CoverageTypeCombinationMessage = 'Invalid cloud input, cloud type is required when coverage is FEW';
+    var invalidCloud2CoverageTypeCombinationMessage = 'Invalid cloud input, for the second cloud group (excluding any significant convective cloud groups with CB/TCU) a coverage of FEW is not allowed';
     var invalidCloud2WithVerticalVisibilityMessage = 'Invalid cloud input, cloud type is required when Vertical Visibility is given';
-    var invalidCloud3CoverageTypeCombinationMessage = 'Invalid cloud input, cloud type is required when coverage is FEW or SCT';
+    var invalidCloud3CoverageTypeCombinationMessage = 'Invalid cloud input, for the third cloud group (excluding any significant convective cloud groups with CB/TCU) a coverage of FEW or SCT is not allowed';
     var invalidCloudWithVerticalVisibilityMessage = 'Invalid cloud input, third or fourth cloud group is not allowed when Vertical Visibility is given';
     var invalidCloudWithPreviousEmptyCloud = 'Invalid cloud input, value is not allowed when previous cloud group is empty';
     var invalidCloudWithNSCMessage = 'Invalid cloud input, other cloud groups are not allowed when No Significant Clouds is given';
-    var invalidCloud4WithPreviousType = 'Invalid cloud input, value is not allowed when previous cloud group has a type';
-    var invalidCloudCAVOKMessage = 'Invalid cloud input, when CAVOK is used, cloud groups must be empty'; // validations
+    var invalidCloudWithPreviousType = 'Invalid cloud input, only one significant convective cloud group with CB/TCU is allowed';
+    var invalidCloudCAVOKMessage = 'Invalid cloud input, when CAVOK is used, cloud groups must be empty';
+    var invalidCloud4TypeMissingMessage = 'Invalid cloud input for fourth group, CB or TCU required if no other significant convective cloud group present'; // validations
 
     var isLengthValid = function isLengthValid(value) {
       var onlyDigitsOrSpecificLetters = RegExp(/^[0-9FEWSCTBKNOVU]+$/);
@@ -1646,25 +1714,32 @@
     };
 
     var isVerticalVisibility = function isVerticalVisibility(value) {
-      return value.substr(0, 2) === 'VV';
+      return value.substring(0, 2) === 'VV';
     };
 
-    var isVerticalVisibilityValid = function isVerticalVisibilityValid(value) {
+    var isVerticalVisibilityValid = function isVerticalVisibilityValid(value, weather1, weather2, weather3) {
       // validate if its a number
       if (!value.match(/^[0-9]+$/)) {
-        return false;
+        return invalidVerticalVisibilityMessage;
       } // check if its 3 digits
 
 
       if (value.length !== 3) {
-        return false;
-      } // value should not be above 10
-
+        return invalidVerticalVisibilityMessage;
+      }
 
       var intValue = parseInt(value, 10);
 
-      if (intValue > 10) {
-        return false;
+      if (weather1 !== 'FG' && weather2 !== 'FG' && weather3 !== 'FG') {
+        // value should not be above 10
+        if (intValue < 1 || intValue > 10) {
+          return invalidVerticalVisibilityHeightMessage;
+        }
+      } else if (intValue < 1 || intValue > 5) {
+        // Apply Dutch rule as national exception
+        // In case of fog (FG) the vertical visibility can only be between VV001 up to and including VV005
+        // HEIGHT_VV is: (001-(1)-005). Deze maxima zijn officiële Nederlandse afwijkingen van de WMO/ICAO regelgeving
+        return invalidVerticalVisibilityHeightFGMessage;
       }
 
       return true;
@@ -1681,14 +1756,14 @@
       } // Validate coverage
 
 
-      var coverage = value.substr(0, 3);
+      var coverage = value.substring(0, 3);
 
       if (!isCoverageValid(coverage)) {
         errorMessages.push(invalidCloudCoverageMessage);
       } // Validate height
 
 
-      var height = value.substr(3, 3);
+      var height = value.substring(3, 6);
       var isValidHeight = isHeightValid(height);
 
       if (isValidHeight !== true) {
@@ -1697,7 +1772,7 @@
       } // Validate type
 
 
-      var type = value.substr(6, 3);
+      var type = value.substring(6, 9);
 
       if (!isTypeValid(type)) {
         errorMessages.push(invalidCLoudTypeMessage);
@@ -1716,56 +1791,66 @@
       };
     };
 
-    var validateFirstCloud = function validateFirstCloud(value, visibilityValue) {
-      var trimmedValue = value.trim(); // Field can be left empty
+    var validateFirstCloud = function validateFirstCloud(value, visibilityValue, weatherfield1, weatherfield2, weatherfield3) {
+      var trimmedValueFirstCloud = value.trim();
+      var trimmedValueVisibility = visibilityValue.trim();
+      var trimmedWeather1Value = weatherfield1.trim();
+      var trimmedWeather2Value = weatherfield2.trim();
+      var trimmedWeather3Value = weatherfield3.trim(); // Field can be left empty
 
-      if (!trimmedValue.length) {
+      if (!trimmedValueFirstCloud.length) {
         return true;
       }
 
-      if (trimmedValue && visibilityValue === 'CAVOK') {
+      if (trimmedValueFirstCloud && trimmedValueVisibility === 'CAVOK') {
         return invalidCloudCAVOKMessage;
       } // Check for No Signicant Clouds
 
 
-      if (trimmedValue === 'NSC') {
+      if (trimmedValueFirstCloud === 'NSC') {
         return true;
       } // Validate Vertical Visibility
 
 
-      if (isVerticalVisibility(trimmedValue)) {
+      if (isVerticalVisibility(trimmedValueFirstCloud)) {
         if ( // Validate length of 5
-        trimmedValue.length !== 5 || // Ensure it only contains digits or VV
-        !trimmedValue.match(/^[0-9V]+$/)) {
-          return invalidVerticalVisibilityMessage;
-        }
-
-        var verticalVisibilityValue = trimmedValue.substr(2, 3);
-
-        if (!isVerticalVisibilityValid(verticalVisibilityValue)) {
+        trimmedValueFirstCloud.length !== 5 || // Ensure it only contains digits or VV
+        !trimmedValueFirstCloud.match(/^[0-9V]+$/)) {
           return invalidVerticalVisibilityMessage;
         }
 
-        return true;
+        var verticalVisibilityValue = trimmedValueFirstCloud.substring(2, 5);
+        return isVerticalVisibilityValid(verticalVisibilityValue, trimmedWeather1Value, trimmedWeather2Value, trimmedWeather3Value);
       }
 
       var errorMessages = sharedCloudValidations({
-        value: trimmedValue,
+        value: trimmedValueFirstCloud,
         canBeNSC: true
       }).errorMessages; // Return first error if any
 
       return errorMessages.length ? errorMessages[0] : true;
     };
     var validateSecondCloud = function validateSecondCloud(firstCloudValue, secondCloudValue, visibilityValue) {
-      var trimmedValue = secondCloudValue.trim(); // Field can be left empty
+      var trimmedValueFirstCloud = firstCloudValue.trim();
+      var trimmedValueSecondCloud = secondCloudValue.trim(); // Field can be left empty
 
-      if (!trimmedValue.length) {
+      if (!trimmedValueSecondCloud.length) {
         return true;
+      } // If Cloud1 is NSC, Cloud2 has to be empty
+
+
+      if (trimmedValueFirstCloud === 'NSC' && trimmedValueSecondCloud !== '') {
+        return invalidCloudWithNSCMessage;
+      } // If Cloud1 is empty Cloud2 should be empty
+
+
+      if (trimmedValueFirstCloud === '') {
+        return invalidCloudWithPreviousEmptyCloud;
       } // Generic validations
 
 
       var _a = sharedCloudValidations({
-        value: trimmedValue
+        value: trimmedValueSecondCloud
       }),
           coverage = _a.coverage,
           height = _a.height,
@@ -1775,32 +1860,32 @@
 
       if (errorMessages.length) {
         return errorMessages[0];
-      } // Cloud2 specific validations
-      // Without type, coverage can not be FEW
+      } // Cloud2 specific validations - only to be applied when cloud1 does not contain type CB/TCU
 
 
-      if (type === '' && coverage === 'FEW') {
-        return invalidCloud2CoverageTypeCombinationMessage;
+      var typeCloud1 = trimmedValueFirstCloud.substring(6, 9);
+
+      if (typeCloud1 !== 'CB' && typeCloud1 !== 'TCU') {
+        // Without a type specified in cloud group 1, this group counts as #2 and coverage can not be FEW
+        if (type === '' && coverage === 'FEW') {
+          return invalidCloud2CoverageTypeCombinationMessage;
+        }
       } // If Cloud1 is not valid, skip further validation of Cloud2
+      // No need to pass the weatherfields as their content does not influence what happens below
 
 
-      if (validateFirstCloud(firstCloudValue, visibilityValue) !== true) {
+      if (validateFirstCloud(trimmedValueFirstCloud, visibilityValue, '', '', '') !== true) {
         return true;
-      } // If Cloud1 is NSC, Cloud2 has to be empty
+      } // If Cloud1 contains a type, Cloud2 cannot contain a type
 
 
-      if (firstCloudValue === 'NSC' && trimmedValue !== '') {
-        return invalidCloudWithNSCMessage;
-      } // If Cloud1 is empty Cloud2 should be empty
-
-
-      if (firstCloudValue === '') {
-        return invalidCloudWithPreviousEmptyCloud;
+      if (type !== '' && typeCloud1 !== '') {
+        return invalidCloudWithPreviousType;
       } // Cloud2 height has to be greater than Cloud1 height
 
 
-      if (!isVerticalVisibility(firstCloudValue)) {
-        var cloud1Height = firstCloudValue.substr(3, 3);
+      if (!isVerticalVisibility(trimmedValueFirstCloud)) {
+        var cloud1Height = trimmedValueFirstCloud.substring(3, 6);
 
         if (height <= cloud1Height) {
           return invalidCloudHeightComparedToPreviousMessage;
@@ -1808,22 +1893,34 @@
       } // If Cloud1 contains Vertical Visibility then Cloud2 type is required
 
 
-      if (isVerticalVisibility(firstCloudValue) && type === '') {
+      if (isVerticalVisibility(trimmedValueFirstCloud) && type === '') {
         return invalidCloud2WithVerticalVisibilityMessage;
       }
 
       return true;
     };
     var validateThirdCloud = function validateThirdCloud(firstCloudValue, secondCloudValue, thirdCloudValue, visibilityValue) {
-      var trimmedValue = thirdCloudValue.trim(); // Field can be left empty
+      var trimmedValueFirstCloud = firstCloudValue.trim();
+      var trimmedValueSecondCloud = secondCloudValue.trim();
+      var trimmedValueThirdCloud = thirdCloudValue.trim(); // Field can be left empty
 
-      if (!trimmedValue.length) {
+      if (!trimmedValueThirdCloud.length) {
         return true;
+      } // If Cloud1 is NSC, Cloud3 has to be empty
+
+
+      if (trimmedValueFirstCloud === 'NSC' && trimmedValueThirdCloud !== '') {
+        return invalidCloudWithNSCMessage;
+      } // If Cloud1 or Cloud2 is empty Cloud3 should be empty
+
+
+      if (trimmedValueFirstCloud === '' || trimmedValueSecondCloud === '') {
+        return invalidCloudWithPreviousEmptyCloud;
       } // Generic validations
 
 
       var _a = sharedCloudValidations({
-        value: trimmedValue
+        value: trimmedValueThirdCloud
       }),
           coverage = _a.coverage,
           height = _a.height,
@@ -1834,45 +1931,45 @@
       if (errorMessages.length) {
         return errorMessages[0];
       } // Cloud3 specific validations
-      // Without type, coverage can not be FEW or SCT
+      // Without a type specified in cloud group 1 or 2, this group counts as #3 and coverage can not be FEW or SCT
 
 
-      if (type === '' && (coverage === 'FEW' || coverage === 'SCT')) {
-        return invalidCloud3CoverageTypeCombinationMessage;
+      var typeCloud1 = trimmedValueFirstCloud.substring(6, 9);
+      var typeCloud2 = trimmedValueSecondCloud.substring(6, 9);
+
+      if (typeCloud1 !== 'CB' && typeCloud1 !== 'TCU' && typeCloud2 !== 'CB' && typeCloud2 !== 'TCU') {
+        if (type === '' && (coverage === 'FEW' || coverage === 'SCT')) {
+          return invalidCloud3CoverageTypeCombinationMessage;
+        }
+      } else if (type === '' && coverage === 'FEW') {
+        // In case we do have a CB/TCU group in one of the previous clouf groups. This cloudgroup should be evaluated as if it was the second group
+        return invalidCloud2CoverageTypeCombinationMessage;
       } // If Cloud1 is not valid, skip further validation of Cloud3
+      // No need to pass the weatherfields as their content does not influence what happens below
+      // Since in case of VV the third field should be empty anyways
 
 
-      if (validateFirstCloud(firstCloudValue, visibilityValue) !== true) {
+      if (validateFirstCloud(trimmedValueFirstCloud, visibilityValue, '', '', '') !== true) {
         return true;
-      } // If Cloud1 is empty Cloud3 should be empty
-
-
-      if (firstCloudValue === '') {
-        return invalidCloudWithPreviousEmptyCloud;
       } // If Cloud1 contains Vertical Visibility then Cloud3 should be empty
 
 
-      if (isVerticalVisibility(firstCloudValue)) {
+      if (isVerticalVisibility(trimmedValueFirstCloud)) {
         return invalidCloudWithVerticalVisibilityMessage;
-      } // If Cloud1 is NSC, Cloud3 has to be empty
-
-
-      if (firstCloudValue === 'NSC' && trimmedValue !== '') {
-        return invalidCloudWithNSCMessage;
       } // If Cloud2 is not valid, skip further validation of Cloud3
 
 
-      if (validateSecondCloud(firstCloudValue, secondCloudValue, visibilityValue) !== true) {
+      if (validateSecondCloud(trimmedValueFirstCloud, trimmedValueSecondCloud, visibilityValue) !== true) {
         return true;
-      } // If Cloud2 is empty Cloud3 should be empty
+      } // If one of the previous groups contains a type, Cloud3 cannot contain a type
 
 
-      if (secondCloudValue === '') {
-        return invalidCloudWithPreviousEmptyCloud;
+      if (type !== '' && (typeCloud1 !== '' || typeCloud2 !== '')) {
+        return invalidCloudWithPreviousType;
       } // Cloud3 height has to be greater than Cloud2 height
 
 
-      var cloud2Height = secondCloudValue.substr(3, 3);
+      var cloud2Height = trimmedValueSecondCloud.substring(3, 6);
 
       if (height <= cloud2Height) {
         return invalidCloudHeightComparedToPreviousMessage;
@@ -1881,17 +1978,31 @@
       return true;
     };
     var validateFourthCloud = function validateFourthCloud(firstCloudValue, secondCloudValue, thirdCloudValue, fourthCloudValue, visibilityValue) {
-      var trimmedValue = fourthCloudValue.trim(); // Field can be left empty
+      var trimmedValueFirstCloud = firstCloudValue.trim();
+      var trimmedValueSecondCloud = secondCloudValue.trim();
+      var trimmedValueThirdCloud = thirdCloudValue.trim();
+      var trimmedValueFourthCloud = fourthCloudValue.trim(); // Field can be left empty
 
-      if (!trimmedValue.length) {
+      if (!trimmedValueFourthCloud.length) {
         return true;
+      } // If Cloud1 is NSC, Cloud4 has to be empty
+
+
+      if (trimmedValueFirstCloud === 'NSC' && trimmedValueFourthCloud !== '') {
+        return invalidCloudWithNSCMessage;
+      } // If Cloud 1, 2 or 3 is empty Cloud4 should be empty
+
+
+      if (trimmedValueFirstCloud === '' || trimmedValueSecondCloud === '' || trimmedValueThirdCloud === '') {
+        return invalidCloudWithPreviousEmptyCloud;
       } // Generic validations
 
 
       var _a = sharedCloudValidations({
-        value: trimmedValue
+        value: trimmedValueFourthCloud
       }),
           height = _a.height,
+          coverage = _a.coverage,
           type = _a.type,
           errorMessages = _a.errorMessages; // Return generic errors if any
 
@@ -1899,50 +2010,48 @@
       if (errorMessages.length) {
         return errorMessages[0];
       } // Cloud4 specific validations
-      // Type is required
+      // If none of the previous cloud groups contains a type, the fourth group must contain a type if not empty
+
 
+      var typeCloud1 = trimmedValueFirstCloud.substring(6, 9);
+      var typeCloud2 = trimmedValueSecondCloud.substring(6, 9);
+      var typeCloud3 = trimmedValueThirdCloud.substring(6, 9);
 
-      if (type === '') {
-        return invalidCLoudTypeMessage;
+      if (typeCloud1 !== 'CB' && typeCloud1 !== 'TCU' && typeCloud2 !== 'CB' && typeCloud2 !== 'TCU' && typeCloud3 !== 'CB' && typeCloud3 !== 'TCU') {
+        if (type === '') {
+          return invalidCloud4TypeMissingMessage;
+        }
+      } else if (coverage === 'FEW' || coverage === 'SCT') {
+        // We have a CB/TCU group in one of the previous cloud groups. This group should be evaluated as if it was the third group
+        return invalidCloud3CoverageTypeCombinationMessage;
       } // If Cloud1 is not valid, skip further validation of Cloud4
+      // No need to pass the weatherfields as their content does not influence what happens below
+      // Since in case of VV the fourth field should be empty anyways
 
 
-      if (validateFirstCloud(firstCloudValue, visibilityValue) !== true) {
+      if (validateFirstCloud(trimmedValueFirstCloud, visibilityValue, '', '', '') !== true) {
         return true;
       } // If Cloud1 contains Vertical Visibility then Cloud4 should be empty
 
 
-      if (isVerticalVisibility(firstCloudValue)) {
+      if (isVerticalVisibility(trimmedValueFirstCloud)) {
         return invalidCloudWithVerticalVisibilityMessage;
-      } // If Cloud1 is NSC, Cloud4 has to be empty
-
-
-      if (firstCloudValue === 'NSC' && trimmedValue !== '') {
-        return invalidCloudWithNSCMessage;
-      } // If Cloud 1, 2 or 3 is empty Cloud4 should be empty
-
-
-      if (firstCloudValue === '' || secondCloudValue === '' || thirdCloudValue === '') {
-        return invalidCloudWithPreviousEmptyCloud;
       } // If Cloud3 is not valid, skip further validation of Cloud4
 
 
-      if (validateThirdCloud(firstCloudValue, secondCloudValue, thirdCloudValue, visibilityValue) !== true) {
+      if (validateThirdCloud(trimmedValueFirstCloud, trimmedValueSecondCloud, trimmedValueThirdCloud, visibilityValue) !== true) {
         return true;
-      } // If Cloud3 contains a type, Cloud4 should be empty
-
+      } // If one of the previous groups contains a type, Cloud4 cannot contain a type
 
-      var cloud3Type = thirdCloudValue.substr(6, 3);
 
-      if (cloud3Type !== '') {
-        return invalidCloud4WithPreviousType;
+      if (type !== '' && (typeCloud1 !== '' || typeCloud2 !== '' || typeCloud3 !== '')) {
+        return invalidCloudWithPreviousType;
       } // Cloud4 height has to be greater than Cloud3 height
 
 
-      var cloud3Height = thirdCloudValue.substr(3, 3);
+      var cloud3Height = trimmedValueThirdCloud.substring(3, 6);
 
       if (height <= cloud3Height) {
-        // Because of the type validations this is automatically enforced for Cloud4, so impossible to end up here but leaving the check in just in case
         return invalidCloudHeightComparedToPreviousMessage;
       }
 
@@ -2351,12 +2460,25 @@
       if (action === 'CORRECT') return 'This TAF is a correction';
       return 'Cancel TAF';
     };
-    var getConfirmationDialogContent = function getConfirmationDialogContent(action) {
-      if (action === 'DISCARD') return 'Are you sure you would like to discard this TAF? Any changes made will be lost';
-      if (action === 'PUBLISH') return 'Are you sure you want to publish this TAF?';
-      if (action === 'AMEND') return 'Do you want to publish it?';
-      if (action === 'CORRECT') return 'Do you want to publish it?';
-      return 'Are you sure you want to cancel this TAF?';
+    var getConfirmationDialogContent = function getConfirmationDialogContent(action, isFormDirty) {
+      if (isFormDirty === void 0) {
+        isFormDirty = true;
+      }
+
+      switch (action) {
+        case 'DISCARD':
+          return 'Are you sure you would like to discard this TAF? Any changes made will be lost';
+
+        case 'PUBLISH':
+          return 'Are you sure you want to publish this TAF?';
+
+        case 'AMEND':
+        case 'CORRECT':
+          return isFormDirty ? 'Do you want to publish it?' : 'Are you sure you want to publish the TAF? You did not make any changes!';
+
+        default:
+          return 'Are you sure you want to cancel this TAF?';
+      }
     };
     var getConfirmationDialogButtonLabel = function getConfirmationDialogButtonLabel(action) {
       switch (action) {
@@ -2372,34 +2494,28 @@
       }
     };
 
-    /* *
-     * 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 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
-     * Copyright 2021 - Finnish Meteorological Institute (FMI)
-     * */
-    var useStyles$9 = core.makeStyles(function (theme) {
+    var useStyles$9 = makeStyles__default["default"](function (theme) {
       return {
         textFieldGridItem: {
           marginRight: 4
         },
+        textFieldRoot: {
+          '&.Mui-disabled::before': {
+            borderBottom: 'none'
+          },
+          '&:after': {
+            borderBottomColor: '#3f51b5'
+          }
+        },
         textFieldInput: {
           fontSize: '14px',
           paddingLeft: 1,
           paddingRight: 1,
           color: '#051039',
-          WebkitTextFillColor: '#051039' // safari text color fix
-
+          WebkitTextFillColor: '#051039',
+          '&.Mui-disabled': {
+            backgroundColor: 'white'
+          }
         },
         textFieldLabel: {
           fontSize: '14px'
@@ -2433,7 +2549,7 @@
           borderRadius: '3px'
         },
         addButton: {
-          marginRight: '38px'
+          marginRight: '48px'
         },
         lifecycleButtons: {
           marginTop: '40px',
@@ -2448,6 +2564,9 @@
         backdrop: {
           zIndex: 1500,
           color: '#fff'
+        },
+        emptyButtonContainer: {
+          minWidth: 96
         }
       };
     });
@@ -2474,12 +2593,13 @@
     };
     var BaseTextField = /*#__PURE__*/React__default["default"].memo(function (props) {
       var classes = useStyles$9();
-      return /*#__PURE__*/React__default["default"].createElement(core.TextField, __assign({
+      return /*#__PURE__*/React__default["default"].createElement(material.TextField, __assign({
         type: "text",
         variant: "filled",
         InputProps: {
           classes: {
-            input: classes.textFieldInput
+            input: classes.textFieldInput,
+            root: classes.textFieldRoot
           }
         },
         InputLabelProps: {
@@ -2568,7 +2688,7 @@
         inputRef.current.disabled = false;
         (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
       }, []);
-      return /*#__PURE__*/React__default["default"].createElement(core.Grid, {
+      return /*#__PURE__*/React__default["default"].createElement(material.Grid, {
         item: true,
         xs: true,
         className: classes.textFieldGridItem
@@ -2691,8 +2811,10 @@
           field = _f === void 0 ? null : _f,
           _g = _a.dragHandle,
           dragHandle = _g === void 0 ? null : _g,
-          props = __rest(_a, ["isChangeGroup", "disabled", "index", "lastRow", "onRemoveChangeGroup", "field", "dragHandle"]);
+          onAddChangeGroup = _a.onAddChangeGroup,
+          props = __rest(_a, ["isChangeGroup", "disabled", "index", "lastRow", "onRemoveChangeGroup", "field", "dragHandle", "onAddChangeGroup"]);
 
+      var classes = useStyles$9();
       var namePrefix = !isChangeGroup ? 'baseForecast' : "changeGroups[" + index + "]";
       var fieldNames = getFieldNames(isChangeGroup, index);
 
@@ -2769,17 +2891,44 @@
         return true;
       }, [index, isChangeGroup, getValues]);
 
-      var getFieldFromNextRow = function getFieldFromNextRow(fieldname) {
-        if (fieldname === void 0) {
-          fieldname = 'valid';
+      var getFieldFromRow = function getFieldFromRow(fieldname, rowIndex) {
+        var indexedFieldName = "changeGroups[" + rowIndex + "]." + fieldname;
+        var rowValue = getValues(indexedFieldName);
+        return rowValue ? [indexedFieldName] : [];
+      };
+
+      var getValidFieldFromNextRow = function getValidFieldFromNextRow() {
+        return getFieldFromRow('valid', index + 1);
+      };
+
+      var validateNextRows = React__default["default"].useCallback(function () {
+        if (isChangeGroup) {
+          var _a = getValues(),
+              validDateEnd = _a.validDateEnd,
+              validDateStart = _a.validDateStart,
+              changeGroups = _a.changeGroups;
+
+          var currentChangeGroup = changeGroups[index];
+          var nextChangeGroups = changeGroups.slice(index + 1);
+          return validateOverlapWithFM(currentChangeGroup, nextChangeGroups, validDateStart, validDateEnd);
         }
 
-        var nextValidFieldName = "changeGroups[" + (index + 1) + "]." + fieldname;
-        var nextRowValidValue = getValues(nextValidFieldName);
-        return nextRowValidValue ? [nextValidFieldName] : [];
+        return true;
+      }, [index, isChangeGroup, getValues]);
+
+      var getPreviousValidFields = function getPreviousValidFields(rowIndex) {
+        var changeGroups = getValues().changeGroups;
+        var previousChangeGroups = changeGroups.slice(0, rowIndex);
+        var validFields = previousChangeGroups.map(function (_element, index) {
+          return getFieldFromRow('valid', index)[0];
+        });
+        return validFields;
       };
 
-      return /*#__PURE__*/React__default["default"].createElement(core.Grid, __assign({
+      var addChangeGroup = React__default["default"].useCallback(function () {
+        onAddChangeGroup(index);
+      }, [onAddChangeGroup, index]);
+      return /*#__PURE__*/React__default["default"].createElement(material.Grid, __assign({
         "data-testid": "row-" + namePrefix,
         container: true,
         ref: ref
@@ -2796,7 +2945,7 @@
         label: "Issue time",
         name: "issueDate",
         disabled: true
-      })), isChangeGroup && /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(core.Grid, {
+      })), isChangeGroup && /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(material.Grid, {
         item: true,
         xs: true,
         style: {
@@ -2822,7 +2971,7 @@
         }],
         onBlur: function onBlur() {
           if (isChangeGroup) {
-            var nextValidFieldName = getFieldFromNextRow();
+            var nextValidFieldName = getValidFieldFromNextRow();
             trigger(__spreadArray(__spreadArray(__spreadArray(__spreadArray([], __read(subFields)), __read(mainOptionalFields)), __read(mainFields)), __read(nextValidFieldName)));
           }
         }
@@ -2852,8 +3001,9 @@
         }],
         onBlur: function onBlur() {
           if (isChangeGroup) {
-            var nextValidFieldName = getFieldFromNextRow();
-            trigger(__spreadArray(__spreadArray(__spreadArray(__spreadArray([], __read(subFields)), __read(mainOptionalFields)), __read(mainFields)), __read(nextValidFieldName)));
+            var nextValidFieldName = getValidFieldFromNextRow();
+            var previousValidFieldNames = getPreviousValidFields(index);
+            trigger(__spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray([], __read(subFields)), __read(mainOptionalFields)), __read(mainFields)), __read(nextValidFieldName)), __read(previousValidFieldNames)));
           }
         }
       })), /*#__PURE__*/React__default["default"].createElement(TafFormTextField, {
@@ -2871,13 +3021,15 @@
             validateValidChangeGroupInterField: function validateValidChangeGroupInterField$1(value) {
               return isChangeGroup ? validateValidChangeGroupInterField(value, getValues(fieldNames.change), getValues('validDateStart'), getValues('validDateEnd')) : true;
             },
-            validatePreviousRow: validatePreviousRow
+            validatePreviousRow: validatePreviousRow,
+            validateNextRows: validateNextRows
           }
         },
         onBlur: function onBlur() {
           if (isChangeGroup) {
-            var nextValidFieldName = getFieldFromNextRow();
-            trigger(__spreadArray(__spreadArray(__spreadArray(__spreadArray([], __read(subFields)), __read(mainOptionalFields)), __read(mainFields)), __read(nextValidFieldName)));
+            var nextValidFieldName = getValidFieldFromNextRow();
+            var previousValidFieldNames = getPreviousValidFields(index);
+            trigger(__spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray([], __read(subFields)), __read(mainOptionalFields)), __read(mainFields)), __read(nextValidFieldName)), __read(previousValidFieldNames)));
           }
         }
       }), /*#__PURE__*/React__default["default"].createElement(TafFormTextField, {
@@ -2891,7 +3043,9 @@
               return _validateRequiredMainFields(value, 'Wind');
             },
             validateRequiredSub: validateRequiredSub,
-            validateWindField: validateWindField
+            validateWindField: function validateWindField$1(value) {
+              return validateWindField(value, getValues(fieldNames.weather1), getValues(fieldNames.weather2), getValues(fieldNames.weather3));
+            }
           }
         },
         onBlur: function onBlur() {
@@ -2940,7 +3094,7 @@
         },
         onBlur: function onBlur() {
           var fields = isChangeGroup ? __spreadArray(__spreadArray([], __read(subFields)), __read(mainFields)) : [];
-          return trigger(__spreadArray(__spreadArray([], __read(fields)), [fieldNames.weather2, fieldNames.weather3]));
+          return trigger(__spreadArray(__spreadArray([], __read(fields)), [fieldNames.weather2, fieldNames.weather3, fieldNames.wind, fieldNames.cloud1]));
         }
       }), /*#__PURE__*/React__default["default"].createElement(TafFormTextField, {
         label: "Weather",
@@ -2956,7 +3110,7 @@
         },
         onBlur: function onBlur() {
           var fields = isChangeGroup ? __spreadArray(__spreadArray([], __read(subFields)), __read(mainFields)) : [];
-          return trigger(__spreadArray(__spreadArray([], __read(fields)), [fieldNames.weather3]));
+          return trigger(__spreadArray(__spreadArray([], __read(fields)), [fieldNames.weather3, fieldNames.wind, fieldNames.cloud1]));
         }
       }), /*#__PURE__*/React__default["default"].createElement(TafFormTextField, {
         label: "Weather",
@@ -2969,6 +3123,9 @@
               return validateThirdWeatherField(getValues(fieldNames.weather1), getValues(fieldNames.weather2), value, getValues(fieldNames.visibility));
             }
           }
+        },
+        onBlur: function onBlur() {
+          return trigger([fieldNames.wind, fieldNames.cloud1]);
         }
       }), /*#__PURE__*/React__default["default"].createElement(TafFormTextField, {
         label: "Cloud",
@@ -2982,7 +3139,7 @@
             },
             validateRequiredSub: validateRequiredSub,
             validateFirstCloud: function validateFirstCloud$1(value) {
-              return validateFirstCloud(value, getValues(fieldNames.visibility));
+              return validateFirstCloud(value, getValues(fieldNames.visibility), getValues(fieldNames.weather1), getValues(fieldNames.weather2), getValues(fieldNames.weather3));
             }
           }
         },
@@ -3032,21 +3189,33 @@
             }
           }
         }
-      }), (!isChangeGroup || disabled) && /*#__PURE__*/React__default["default"].createElement(core.Grid, {
-        item: true,
-        xs: true
-      }), isChangeGroup && !disabled && /*#__PURE__*/React__default["default"].createElement(core.Grid, {
+      }), (!isChangeGroup || disabled) && /*#__PURE__*/React__default["default"].createElement(material.Grid, {
+        className: classes.emptyButtonContainer,
         item: true,
         xs: true
-      }, /*#__PURE__*/React__default["default"].createElement(core.IconButton, __assign({
+      }, !disabled && /*#__PURE__*/React__default["default"].createElement(material.IconButton, {
+        "aria-label": "add",
+        "data-testid": "add-changeGroup",
+        onClick: addChangeGroup,
+        size: "large"
+      }, /*#__PURE__*/React__default["default"].createElement(iconsMaterial.Add, null))), isChangeGroup && !disabled && /*#__PURE__*/React__default["default"].createElement(material.Grid, {
+        item: true
+      }, /*#__PURE__*/React__default["default"].createElement(material.IconButton, {
+        "aria-label": "add",
+        "data-testid": "add-changeGroup",
+        onClick: addChangeGroup,
+        size: "large"
+      }, /*#__PURE__*/React__default["default"].createElement(iconsMaterial.Add, null)), /*#__PURE__*/React__default["default"].createElement(material.IconButton, __assign({
         "aria-label": "delete",
         "data-testid": "remove-changeGroup",
         onClick: function onClick() {
           return onRemoveChangeGroup(index);
         }
       }, lastRow ? {
-        tabIndex: '-1'
-      } : {}), /*#__PURE__*/React__default["default"].createElement(icons.Delete, null))));
+        tabIndex: -1
+      } : {}, {
+        size: "large"
+      }), /*#__PURE__*/React__default["default"].createElement(iconsMaterial.Delete, null))));
     });
 
     var getIssuesLabel = function getIssuesLabel(sumOfErrors) {
@@ -3086,9 +3255,9 @@
       var togglePane = _a.togglePane,
           sumOfErrors = _a.sumOfErrors;
       var color = sumOfErrors > 0 ? 'red' : 'green';
-      return /*#__PURE__*/React__namespace.createElement(core.Tooltip, {
+      return /*#__PURE__*/React__namespace.createElement(material.Tooltip, {
         title: "View details"
-      }, /*#__PURE__*/React__namespace.createElement(core.Chip, {
+      }, /*#__PURE__*/React__namespace.createElement(material.Chip, {
         "data-testid": "issuesButton",
         size: "small",
         label: getIssuesLabel(sumOfErrors),
@@ -3098,7 +3267,7 @@
     };
 
     var ThumbsUp = function ThumbsUp(props) {
-      return /*#__PURE__*/React__default["default"].createElement(core.SvgIcon, __assign({
+      return /*#__PURE__*/React__default["default"].createElement(material.SvgIcon, __assign({
         fontSize: "inherit",
         viewBox: "0 0 58 69"
       }, props), /*#__PURE__*/React__default["default"].createElement("title", null, "Thumbs up"), /*#__PURE__*/React__default["default"].createElement("g", {
@@ -3134,7 +3303,7 @@
      * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
      * Copyright 2021 - Finnish Meteorological Institute (FMI)
      * */
-    var useStyles$8 = core.makeStyles({
+    var useStyles$8 = makeStyles__default["default"]({
       paneContent: {
         marginTop: '16px',
         marginLeft: '24px'
@@ -3237,7 +3406,7 @@
         className: classes.image,
         "data-testid": "zeroIssuesImage"
       }, /*#__PURE__*/React__namespace.createElement(ThumbsUp, null)), errorList.length > 0 && errorList.map(function (error, index) {
-        return /*#__PURE__*/React__namespace.createElement(core.Typography // eslint-disable-next-line react/no-array-index-key
+        return /*#__PURE__*/React__namespace.createElement(material.Typography // eslint-disable-next-line react/no-array-index-key
         , {
           // eslint-disable-next-line react/no-array-index-key
           key: "message-" + index,
@@ -3323,19 +3492,19 @@
         return setIsIssuesPaneOpen(!isIssuesPaneOpen);
       };
 
-      return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(core.Grid, {
+      return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(material.Grid, {
         container: true,
-        justify: "space-between",
+        justifyContent: "space-between",
         alignItems: "center",
         className: classes.lifecycleButtons
-      }, /*#__PURE__*/React__default["default"].createElement(core.Grid, {
+      }, /*#__PURE__*/React__default["default"].createElement(material.Grid, {
         item: true
       }, /*#__PURE__*/React__default["default"].createElement(IssuesButton, {
         sumOfErrors: errorList.length,
         togglePane: toggleIssuesPane
-      })), /*#__PURE__*/React__default["default"].createElement(core.Grid, {
+      })), /*#__PURE__*/React__default["default"].createElement(material.Grid, {
         item: true
-      }, /*#__PURE__*/React__default["default"].createElement(core.Button, {
+      }, /*#__PURE__*/React__default["default"].createElement(material.Button, {
         "data-testid": "discardtaf",
         variant: "outlined",
         color: "secondary",
@@ -3345,7 +3514,7 @@
           // Simply discard the changes and close the dialog.
           onTafFormButtonPress('DISCARD');
         }
-      }, "Discard"), /*#__PURE__*/React__default["default"].createElement(core.Button, {
+      }, "Discard"), /*#__PURE__*/React__default["default"].createElement(material.Button, {
         "data-testid": "savedrafttaf",
         variant: "outlined",
         color: "secondary",
@@ -3375,7 +3544,7 @@
               break;
           }
         }
-      }, "Save"), /*#__PURE__*/React__default["default"].createElement(core.Button, {
+      }, "Save"), /*#__PURE__*/React__default["default"].createElement(material.Button, {
         "data-testid": "publishtaf",
         variant: "outlined",
         color: "secondary",
@@ -3428,7 +3597,7 @@
      * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
      * Copyright 2021 - Finnish Meteorological Institute (FMI)
      * */
-    var useStyles$7 = core.makeStyles(function () {
+    var useStyles$7 = makeStyles__default["default"](function () {
       return {
         dragHandle: {
           backgroundColor: 'transparent',
@@ -3449,12 +3618,13 @@
           isDisabled = _c === void 0 ? false : _c,
           index = _a.index;
       var classes = useStyles$7(isSorting);
-      return /*#__PURE__*/React__default["default"].createElement(core.IconButton, {
+      return /*#__PURE__*/React__default["default"].createElement(material.IconButton, {
         className: classes.dragHandle + " handle",
         "data-testid": "dragHandle-" + index,
         disableRipple: true,
-        disabled: isDisabled
-      }, /*#__PURE__*/React__default["default"].createElement(icons.DragIndicator, null));
+        disabled: isDisabled,
+        size: "large"
+      }, /*#__PURE__*/React__default["default"].createElement(iconsMaterial.DragIndicator, null));
     };
 
     var noop = function noop() {};
@@ -3547,7 +3717,7 @@
       var showConfirmDialog = function showConfirmDialog(action) {
         return confirmDialog({
           title: getConfirmationDialogTitle(action),
-          description: getConfirmationDialogContent(action),
+          description: getConfirmationDialogContent(action, isFormDirty),
           confirmLabel: getConfirmationDialogButtonLabel(action)
         });
       };
@@ -3596,38 +3766,67 @@
         name: 'changeGroups'
       }),
           fields = _h.fields,
-          append = _h.append,
+          insert = _h.insert,
           remove = _h.remove,
           move = _h.move;
 
-      var lastTotalFields = shared.usePrevious(fields.length);
-
       var _j = useDragOrder(trigger, move, onFormBlur),
           onChangeOrder = _j.onChangeOrder,
           onStartDrag = _j.onStartDrag,
           activeDraggingIndex = _j.activeDraggingIndex;
 
       var onRemoverow = function onRemoverow(index) {
-        remove(index);
+        confirmDialog({
+          title: 'Delete row',
+          description: 'Are you sure you want to delete this row?',
+          confirmLabel: 'Yes'
+        }).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
+
+
+      var focusFirstInput = function focusFirstInput(rowIndex) {
+        var nextRowFirstInput = document.querySelector("[name=\"changeGroups[" + rowIndex + "].probability\"]");
+
+        if (nextRowFirstInput) {
+          nextRowFirstInput.focus();
+        }
       };
 
-      var onAddRow = function onAddRow() {
-        append(emptyChangegroup, true);
+      var onAddRow = function onAddRow(rowIndex) {
+        if (rowIndex === void 0) {
+          rowIndex = -1;
+        }
+
+        var newRowIndex = rowIndex + 1;
+        insert(newRowIndex, emptyChangegroup, false); // adding rows and validation don't work well combined, with always skipping validation of fields of rows above the one the inserted row. A setTimeout prevents this issue
+
+        setTimeout(function () {
+          focusFirstInput(newRowIndex);
+          trigger(); // trigger all fields validation
+        }, 0);
       };
 
       React__default["default"].useEffect(function () {
-        if (isFormDirty && fields.length !== lastTotalFields) {
-          onFormBlur();
-          trigger(); // trigger all field validation,
+        if (!isDisabled) {
+          // trigger validation on all changegroup validity times after initial load since they could be outside the new validity period
+          var validFields = fields.map(function (_field, index) {
+            return "changeGroups[" + index + "].valid";
+          });
+          trigger(validFields);
         } // eslint-disable-next-line react-hooks/exhaustive-deps
 
-      }, [fields.length, isFormDirty]);
+      }, []);
       return /*#__PURE__*/React__default["default"].createElement("form", {
         onSubmit: handleSubmit(onSubmit),
         onBlur: onFormBlur
-      }, /*#__PURE__*/React__default["default"].createElement(core.Typography, {
+      }, /*#__PURE__*/React__default["default"].createElement(material.Typography, {
         className: classes.tacTitle
-      }, "TAC"), /*#__PURE__*/React__default["default"].createElement(core.Typography, {
+      }, "TAC"), /*#__PURE__*/React__default["default"].createElement(material.Typography, {
         "data-testid": "form-tac-message",
         className: classes.tacText
       }, TAC.split('\n').map(function (line) {
@@ -3637,7 +3836,8 @@
           "data-testid": "tafform-tac-message-line"
         }, line);
       })), /*#__PURE__*/React__default["default"].createElement(TafFormRow, {
-        disabled: isDisabled
+        disabled: isDisabled,
+        onAddChangeGroup: onAddRow
       }), /*#__PURE__*/React__default["default"].createElement(reactSortablejs.ReactSortable, {
         tag: "div",
         list: fields,
@@ -3661,6 +3861,7 @@
           lastRow: fields.length === index + 1,
           disabled: isDisabled,
           onRemoveChangeGroup: onRemoverow,
+          onAddChangeGroup: onAddRow,
           isChangeGroup: true,
           dragHandle: /*#__PURE__*/React__default["default"].createElement(DragHandle, {
             isDisabled: fields.length === 1 || isDisabled,
@@ -3668,20 +3869,10 @@
             index: index
           })
         });
-      })), !isDisabled && /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(core.Grid, {
-        container: true,
-        item: true,
-        xs: 12,
-        justify: "flex-end"
-      }, /*#__PURE__*/React__default["default"].createElement(core.IconButton, {
-        "aria-label": "add",
-        "data-testid": "add-changeGroup",
-        onClick: onAddRow,
-        className: classes.addButton
-      }, /*#__PURE__*/React__default["default"].createElement(icons.Add, null))), /*#__PURE__*/React__default["default"].createElement(TafFormButtons, {
+      })), !isDisabled && /*#__PURE__*/React__default["default"].createElement(TafFormButtons, {
         tafAction: tafAction,
         onTafFormButtonPress: onTafButtonPress
-      })), hiddenInputFields.map(function (field) {
+      }), hiddenInputFields.map(function (field) {
         return /*#__PURE__*/React__default["default"].createElement(formFields.ReactHookFormHiddenInput, {
           name: field,
           key: field
@@ -3771,7 +3962,7 @@
       }));
     };
 
-    var useStyles$6 = core.makeStyles({
+    var useStyles$6 = makeStyles__default["default"]({
       dialogHeader: {
         borderRadius: '3px',
         border: 'solid 1px #f6f5f5',
@@ -3807,39 +3998,37 @@
           other = __rest(_a, ["open", "toggleDialogStatus", "titleComponent", "children", "onClose", "alertBanner", "onFormAction"]);
 
       var classes = useStyles$6();
-      return /*#__PURE__*/React__namespace.createElement(core.Dialog, __assign({
+      return /*#__PURE__*/React__namespace.createElement(material.Dialog, __assign({
         "data-testid": "contentDialog",
         open: open,
         onClose: function onClose() {
           return onFormAction('CLOSE');
         },
         maxWidth: other.maxWidth ? other.maxWidth : 'lg',
-        disableBackdropClick: true,
         PaperProps: {
           style: {
             position: 'inherit'
           }
         }
-      }, other), /*#__PURE__*/React__namespace.createElement(core.DialogTitle, {
-        disableTypography: true,
+      }, other), /*#__PURE__*/React__namespace.createElement(material.DialogTitle, {
         className: classes.dialogHeader
-      }, /*#__PURE__*/React__namespace.createElement(core.Grid, {
+      }, /*#__PURE__*/React__namespace.createElement(material.Grid, {
         container: true
-      }, /*#__PURE__*/React__namespace.createElement(core.Grid, {
+      }, /*#__PURE__*/React__namespace.createElement(material.Grid, {
         item: true,
         xs: 11,
         className: classes.dialogTitle
-      }, titleComponent), /*#__PURE__*/React__namespace.createElement(core.Grid, {
+      }, titleComponent), /*#__PURE__*/React__namespace.createElement(material.Grid, {
         item: true,
         xs: true,
         className: classes.dialogCloseButton
-      }, /*#__PURE__*/React__namespace.createElement(core.IconButton, {
+      }, /*#__PURE__*/React__namespace.createElement(material.IconButton, {
         "data-testid": "closeDialog",
         size: "small",
         onClick: function onClick() {
           return onFormAction('CLOSE');
         }
-      }, /*#__PURE__*/React__namespace.createElement(icons.Close, null))))), alertBanner !== null && alertBanner, /*#__PURE__*/React__namespace.createElement(core.DialogContent, {
+      }, /*#__PURE__*/React__namespace.createElement(iconsMaterial.Close, null))))), alertBanner !== null && alertBanner, /*#__PURE__*/React__namespace.createElement(material.DialogContent, {
         className: classes.dialogChildren
       }, children));
     };
@@ -3862,11 +4051,11 @@
      * */
 
     var getActiveStatus = function getActiveStatus(listType, className) {
-      return listType === 'ACTIVE' ? /*#__PURE__*/React__default["default"].createElement(icons.CheckCircle, {
+      return listType === 'ACTIVE' ? /*#__PURE__*/React__default["default"].createElement(iconsMaterial.CheckCircle, {
         "data-testid": "status-active",
         className: className,
         fontSize: "small"
-      }) : /*#__PURE__*/React__default["default"].createElement(icons.Schedule, {
+      }) : /*#__PURE__*/React__default["default"].createElement(iconsMaterial.Schedule, {
         "data-testid": "status-upcoming",
         className: className,
         fontSize: "small"
@@ -3901,7 +4090,7 @@
 
       return 'Draft';
     };
-    var useStyles$5 = core.makeStyles({
+    var useStyles$5 = makeStyles__default["default"]({
       cardWrapper: {
         width: '100%'
       },
@@ -3930,35 +4119,35 @@
       var classes = useStyles$5();
       var validTimeDate = moment__default["default"].utc(taf.validDateStart).format('DD MMM');
       var baseTime = moment__default["default"].utc(taf.baseTime).format('HH:mm');
-      return /*#__PURE__*/React__default["default"].createElement(core.Card, {
+      return /*#__PURE__*/React__default["default"].createElement(material.Card, {
         elevation: 0,
         className: classes.cardWrapper
-      }, /*#__PURE__*/React__default["default"].createElement(core.Grid, {
+      }, /*#__PURE__*/React__default["default"].createElement(material.Grid, {
         container: true,
         alignItems: "center",
         spacing: 1
-      }, /*#__PURE__*/React__default["default"].createElement(core.Grid, {
+      }, /*#__PURE__*/React__default["default"].createElement(material.Grid, {
         item: true,
         xs: 3,
         sm: 2,
         md: 1
-      }, /*#__PURE__*/React__default["default"].createElement(core.Typography, {
+      }, /*#__PURE__*/React__default["default"].createElement(material.Typography, {
         variant: "subtitle2",
         noWrap: true,
         className: classes.font
-      }, taf.location)), /*#__PURE__*/React__default["default"].createElement(core.Grid, {
+      }, taf.location)), /*#__PURE__*/React__default["default"].createElement(material.Grid, {
         item: true,
         xs: 3,
         sm: 3,
         md: 1,
         container: true
-      }, /*#__PURE__*/React__default["default"].createElement(core.Grid, {
+      }, /*#__PURE__*/React__default["default"].createElement(material.Grid, {
         item: true,
         xs: 3,
         sm: 3,
         md: 3,
         className: classes.alignIcon
-      }, showTac && /*#__PURE__*/React__default["default"].createElement(core.Tooltip, {
+      }, showTac && /*#__PURE__*/React__default["default"].createElement(material.Tooltip, {
         "data-testid": "taflistrow-tactooltip",
         title: /*#__PURE__*/React__default["default"].createElement("div", {
           style: {
@@ -3966,63 +4155,63 @@
           }
         }, TAC),
         placement: "bottom-start"
-      }, /*#__PURE__*/React__default["default"].createElement(icons.InfoOutlined, {
+      }, /*#__PURE__*/React__default["default"].createElement(iconsMaterial.InfoOutlined, {
         "data-testid": "taflistrow-tacicon",
         color: "secondary",
         fontSize: "small"
-      }))), /*#__PURE__*/React__default["default"].createElement(core.Grid, {
+      }))), /*#__PURE__*/React__default["default"].createElement(material.Grid, {
         item: true,
         xs: 9,
         sm: 9,
         md: 9
-      }, /*#__PURE__*/React__default["default"].createElement(core.Typography, {
+      }, /*#__PURE__*/React__default["default"].createElement(material.Typography, {
         variant: "subtitle2",
         className: classes.font,
         "data-testid": "baseTime"
-      }, baseTime))), /*#__PURE__*/React__default["default"].createElement(core.Grid, {
+      }, baseTime))), /*#__PURE__*/React__default["default"].createElement(material.Grid, {
         item: true,
         xs: 3,
         sm: 2,
         md: 1
-      }, /*#__PURE__*/React__default["default"].createElement(core.Typography, {
+      }, /*#__PURE__*/React__default["default"].createElement(material.Typography, {
         variant: "subtitle2",
         className: classes.font,
         "data-testid": "validTimeDate"
-      }, validTimeDate)), /*#__PURE__*/React__default["default"].createElement(core.Grid, {
+      }, validTimeDate)), /*#__PURE__*/React__default["default"].createElement(material.Grid, {
         item: true,
         xs: 3,
         sm: 3,
         md: 6
-      }, /*#__PURE__*/React__default["default"].createElement(core.Typography, {
+      }, /*#__PURE__*/React__default["default"].createElement(material.Typography, {
         variant: "subtitle2",
         className: classes.font,
         "data-testid": "validTimeSlot"
       }, formatValidToString({
         start: taf.validDateStart,
         end: taf.validDateEnd
-      }))), /*#__PURE__*/React__default["default"].createElement(core.Grid, {
+      }))), /*#__PURE__*/React__default["default"].createElement(material.Grid, {
         item: true,
         xs: 12,
         sm: 4,
         md: 3
-      }, /*#__PURE__*/React__default["default"].createElement(core.Grid, {
+      }, /*#__PURE__*/React__default["default"].createElement(material.Grid, {
         container: true,
-        justify: "flex-start",
+        justifyContent: "flex-start",
         spacing: 2
-      }, /*#__PURE__*/React__default["default"].createElement(core.Grid, {
+      }, /*#__PURE__*/React__default["default"].createElement(material.Grid, {
         item: true,
         xs: 8,
         container: true,
-        justify: "flex-end"
-      }, taf.status === 'DRAFT' || taf.status === 'DRAFT_CORRECTED' || taf.status === 'DRAFT_AMENDED' ? /*#__PURE__*/React__default["default"].createElement(core.Button, {
+        justifyContent: "flex-end"
+      }, taf.status === 'DRAFT' || taf.status === 'DRAFT_CORRECTED' || taf.status === 'DRAFT_AMENDED' ? /*#__PURE__*/React__default["default"].createElement(material.Button, {
         color: "secondary",
         size: "small",
         "data-testid": "tafRow-draft",
-        startIcon: /*#__PURE__*/React__default["default"].createElement(icons.Create, {
+        startIcon: /*#__PURE__*/React__default["default"].createElement(iconsMaterial.Create, {
           fontSize: "small",
           color: "secondary"
         })
-      }, getDraftTitle(taf.status)) : getStatusTagList(taf)), /*#__PURE__*/React__default["default"].createElement(core.Grid, {
+      }, getDraftTitle(taf.status)) : getStatusTagList(taf)), /*#__PURE__*/React__default["default"].createElement(material.Grid, {
         item: true,
         className: classes.alignIcon
       }, taf.status !== 'NEW' && taf.status !== 'DRAFT' && taf.status !== 'DRAFT_CORRECTED' && taf.status !== 'DRAFT_AMENDED' && taf.status !== 'CANCELLED' && listType !== 'EXPIRED' && getActiveStatus(listType, classes.activeStatus))))));
@@ -4117,7 +4306,7 @@
      * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
      * Copyright 2021 - Finnish Meteorological Institute (FMI)
      * */
-    var useStyles$4 = core.makeStyles({
+    var useStyles$4 = makeStyles__default["default"]({
       actionButtons: {
         paddingRight: '98px',
         paddingTop: '40px',
@@ -4130,34 +4319,34 @@
           canBe = _a.canBe,
           onClickTafActionButton = _a.onClickTafActionButton;
       var classes = useStyles$4();
-      return !canBe.includes('CANCELLED') && !canBe.includes('CORRECTED') && !canBe.includes('AMENDED') ? null : /*#__PURE__*/React__default["default"].createElement(core.Grid, {
+      return !canBe.includes('CANCELLED') && !canBe.includes('CORRECTED') && !canBe.includes('AMENDED') ? null : /*#__PURE__*/React__default["default"].createElement(material.Grid, {
         container: true,
         alignItems: "center",
-        justify: "flex-end",
+        justifyContent: "flex-end",
         "data-testid": "taflist-canbebuttons",
         spacing: 1,
         className: classes.actionButtons
-      }, /*#__PURE__*/React__default["default"].createElement(core.Grid, {
+      }, /*#__PURE__*/React__default["default"].createElement(material.Grid, {
         item: true
-      }, canBe.includes('CANCELLED') && /*#__PURE__*/React__default["default"].createElement(core.Button, {
+      }, canBe.includes('CANCELLED') && /*#__PURE__*/React__default["default"].createElement(material.Button, {
         "data-testid": "canceltaf",
         variant: "outlined",
         color: "secondary",
         onClick: function onClick() {
           return onClickTafActionButton(uuid, 'CANCEL');
         }
-      }, "Cancel")), /*#__PURE__*/React__default["default"].createElement(core.Grid, {
+      }, "Cancel")), /*#__PURE__*/React__default["default"].createElement(material.Grid, {
         item: true
-      }, canBe.includes('CORRECTED') && /*#__PURE__*/React__default["default"].createElement(core.Button, {
+      }, canBe.includes('CORRECTED') && /*#__PURE__*/React__default["default"].createElement(material.Button, {
         "data-testid": "correctaf",
         variant: "outlined",
         color: "secondary",
         onClick: function onClick() {
           return onClickTafActionButton(uuid, 'CORRECT');
         }
-      }, "Correct")), /*#__PURE__*/React__default["default"].createElement(core.Grid, {
+      }, "Correct")), /*#__PURE__*/React__default["default"].createElement(material.Grid, {
         item: true
-      }, canBe.includes('AMENDED') && /*#__PURE__*/React__default["default"].createElement(core.Button, {
+      }, canBe.includes('AMENDED') && /*#__PURE__*/React__default["default"].createElement(material.Button, {
         "data-testid": "amendtaf",
         variant: "outlined",
         color: "secondary",
@@ -4167,12 +4356,15 @@
       }, "Amend")));
     };
 
-    var useStyles$3 = core.makeStyles({
+    var useStyles$3 = makeStyles__default["default"]({
       accordion: {
         marginBottom: '5px'
       },
       formPadding: {
         padding: '8px'
+      },
+      expandIcon: {
+        color: '#0075a9'
       }
     });
 
@@ -4214,7 +4406,7 @@
 
       }, [tafListItem.taf]);
       var popOut = status === 'NEW' || status === 'DRAFT' || status === 'DRAFT_AMENDED' || status === 'DRAFT_CORRECTED';
-      return /*#__PURE__*/React__default["default"].createElement(core.Accordion, __assign({
+      return /*#__PURE__*/React__default["default"].createElement(material.Accordion, __assign({
         "data-testid": "tafListItem",
         className: classes.accordion
       }, popOut ? {
@@ -4228,14 +4420,16 @@
         TransitionProps: {
           unmountOnExit: true
         }
-      }), /*#__PURE__*/React__default["default"].createElement(core.AccordionSummary, {
+      }), /*#__PURE__*/React__default["default"].createElement(material.AccordionSummary, {
         "data-testid": "tafListSectionAccordionSummary",
-        expandIcon: popOut ? /*#__PURE__*/React__default["default"].createElement(core.Tooltip, {
-          title: "Popout to edit"
-        }, /*#__PURE__*/React__default["default"].createElement(icons.OpenInNew, {
+        expandIcon: popOut ? /*#__PURE__*/React__default["default"].createElement(material.Tooltip, {
+          title: "Popout to edit",
+          className: classes.expandIcon
+        }, /*#__PURE__*/React__default["default"].createElement(iconsMaterial.OpenInNew, {
           "data-testid": "popOutIcon",
           fontSize: "small"
-        })) : /*#__PURE__*/React__default["default"].createElement(icons.ExpandMore, {
+        })) : /*#__PURE__*/React__default["default"].createElement(iconsMaterial.ExpandMore, {
+          className: classes.expandIcon,
           "data-testid": "expandIcon"
         })
       }, /*#__PURE__*/React__default["default"].createElement(TafListRow, {
@@ -4243,7 +4437,7 @@
         listType: listType,
         TAC: TAC,
         showTac: true
-      })), /*#__PURE__*/React__default["default"].createElement(core.AccordionDetails, null, /*#__PURE__*/React__default["default"].createElement(core.Grid, {
+      })), /*#__PURE__*/React__default["default"].createElement(material.AccordionDetails, null, /*#__PURE__*/React__default["default"].createElement(material.Grid, {
         container: true,
         direction: "column"
       }, errorCancelTaf.length > 0 && errorCancelTaf.find(function (uuid) {
@@ -4254,13 +4448,13 @@
         dataTestId: "tafList-cancelAlert"
       }), /*#__PURE__*/React__default["default"].createElement("div", {
         className: classes.formPadding
-      }, /*#__PURE__*/React__default["default"].createElement(core.Grid, {
+      }, /*#__PURE__*/React__default["default"].createElement(material.Grid, {
         item: true
       }, /*#__PURE__*/React__default["default"].createElement(TafFormWrapper, {
         tafFromBackend: tafListItem,
         mode: "view",
         TAC: TAC
-      })), /*#__PURE__*/React__default["default"].createElement(core.Grid, {
+      })), /*#__PURE__*/React__default["default"].createElement(material.Grid, {
         item: true
       }, /*#__PURE__*/React__default["default"].createElement(TafListButtons, {
         canBe: tafListItem.canbe,
@@ -4285,7 +4479,7 @@
      * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
      * Copyright 2021 - Finnish Meteorological Institute (FMI)
      * */
-    var useStyles$2 = core.makeStyles({
+    var useStyles$2 = makeStyles__default["default"]({
       listHeaders: {
         color: '#9d9d9d'
       },
@@ -4305,7 +4499,7 @@
           errorCancelTaf = _b === void 0 ? [] : _b,
           onClickTafActionButton = _a.onClickTafActionButton;
       var classes = useStyles$2();
-      return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(core.Typography, {
+      return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(material.Typography, {
         variant: "subtitle2",
         className: classes.listHeaders
       }, title), /*#__PURE__*/React__default["default"].createElement("div", {
@@ -4321,7 +4515,7 @@
       })));
     };
 
-    var useStyles$1 = core.makeStyles({
+    var useStyles$1 = makeStyles__default["default"]({
       accordion: {
         marginBottom: '5px'
       },
@@ -4379,11 +4573,11 @@
         }
       }
 
-      return /*#__PURE__*/React__default["default"].createElement(core.Grid, {
+      return /*#__PURE__*/React__default["default"].createElement(material.Grid, {
         container: true,
         direction: "column",
         alignItems: "stretch"
-      }, /*#__PURE__*/React__default["default"].createElement(core.Grid, {
+      }, /*#__PURE__*/React__default["default"].createElement(material.Grid, {
         item: true,
         className: classes.listBody
       }, error && /*#__PURE__*/React__default["default"].createElement(shared.AlertBanner, {
@@ -4409,9 +4603,9 @@
         tafList: expiredTafs,
         errorCancelTaf: errorCancelTaf,
         onClickTafActionButton: onClickTafActionButton
-      })), isLoading && /*#__PURE__*/React__default["default"].createElement(lab.Skeleton, {
+      })), isLoading && /*#__PURE__*/React__default["default"].createElement(material.Skeleton, {
         "data-testid": "tafList-skeleton",
-        variant: "rect",
+        variant: "rectangular",
         height: "660px"
       })));
     };
@@ -4432,7 +4626,7 @@
      * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
      * Copyright 2021 - Finnish Meteorological Institute (FMI)
      * */
-    var useStyles = core.makeStyles({
+    var useStyles = makeStyles__default["default"]({
       backdrop: {
         zIndex: 1500,
         color: '#fff'
@@ -4441,10 +4635,10 @@
 
     var Spinner = function Spinner() {
       var classes = useStyles();
-      return /*#__PURE__*/React__default["default"].createElement(core.Backdrop, {
+      return /*#__PURE__*/React__default["default"].createElement(material.Backdrop, {
         open: true,
         className: classes.backdrop
-      }, /*#__PURE__*/React__default["default"].createElement(core.CircularProgress, {
+      }, /*#__PURE__*/React__default["default"].createElement(material.CircularProgress, {
         "data-testid": "spinner",
         color: "inherit"
       }));