@opengeoweb/taf 2.1.2 → 2.2.0

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

@@ -1,10 +1,10 @@
 import * as React from 'react';
 import React__default from 'react';
-import { makeStyles, Grid, TextField, IconButton, Tooltip, Chip, SvgIcon, Typography, Button, Dialog, DialogTitle, DialogContent, Card, Accordion, AccordionSummary, AccordionDetails, Backdrop, CircularProgress } from '@material-ui/core';
-import { Skeleton } from '@material-ui/lab';
+import { Grid, TextField, IconButton, Tooltip, Chip, SvgIcon, Typography, Button, Dialog, DialogTitle, DialogContent, Card, Accordion, AccordionSummary, AccordionDetails, Skeleton, Backdrop, CircularProgress } from '@mui/material';
+import makeStyles from '@mui/styles/makeStyles';
 import moment from 'moment';
 import { useIsMounted, useDraftFormHelpers, ToolContainerDraggable, useConfirmationDialog, usePreventBrowserClose, StatusTag, AlertBanner, ConfirmationServiceProvider, usePoller, isAxiosError, getAxiosErrorMessage } from '@opengeoweb/shared';
-import { Add, Delete, DragIndicator, Close, InfoOutlined, Create, CheckCircle, Schedule, OpenInNew, ExpandMore } from '@material-ui/icons';
+import { Add, Delete, DragIndicator, Close, InfoOutlined, Create, CheckCircle, Schedule, OpenInNew, ExpandMore } from '@mui/icons-material';
 import { useApiContext, useApi, createApiInstance } from '@opengeoweb/api';
 import { getDeepProperty, ReactHookFormHiddenInput, ReactHookFormProvider } from '@opengeoweb/form-fields';
 import { useFormContext, Controller, useFieldArray } from 'react-hook-form';
@@ -284,20 +284,20 @@ function __awaiter(thisArg, _arguments, P, generator) {
  * 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.utc(valid.end).format('kk');
   var endDate = endHours === '24' ? moment.utc(valid.end).add(-1, 'day').format('DD') : moment.utc(valid.end).format('DD');
-  return valid.end ? "".concat(moment.utc(valid.start).format(FORMAT_DAYS_HOURS), "/").concat(endDate).concat(endHours) : moment.utc(valid.start).format(FORMAT_DAYS_HOURS_MINUTS);
+  return valid.end ? "".concat(moment.utc(valid.start).format(FORMAT_DAYS_HOURS), "/").concat(endDate).concat(endHours) : moment.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
   };
 };
 
@@ -327,7 +327,7 @@ var parseValidToObject = function parseValidToObject(value, tafStart, tafEnd) {
   var tafStartMoment = moment.utc(tafStart);
   var tafEndMoment = moment.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
 
@@ -352,7 +352,8 @@ var invalidValidityStartTimeMessage = 'Invalid validity start time, change group
 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) {
@@ -376,7 +377,7 @@ var validateIsValidDates = function validateIsValidDates(value, tafStart, tafEnd
   var tafStartMoment = moment.utc(tafStart);
   var tafEndMoment = moment.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
@@ -454,7 +455,7 @@ var validateValidChangeGroupInterField = function validateValidChangeGroupInterF
     var tafStartMoment = moment.utc(tafStart);
     var tafEndMoment = moment.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);
@@ -474,18 +475,18 @@ var validProbChangeOrder = ['FM', 'BECMG', 'TEMPO', 'PROB40', 'PROB30', 'PROB40
 var invalidPreviousChangeGroupIsBeforeMessage = 'Valid time should be after previous valid time';
 var invalidPreviousChangeGroupOrderMessage = "When valid times are equal, the change/probability order should be: ".concat(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,
       _currentChangeGroup$c = currentChangeGroup.change,
       change = _currentChangeGroup$c === void 0 ? '' : _currentChangeGroup$c,
       _currentChangeGroup$p = currentChangeGroup.probability,
       probability = _currentChangeGroup$p === void 0 ? '' : _currentChangeGroup$p;
-  var previousValid = nextChangeGroup.valid,
-      _nextChangeGroup$chan = nextChangeGroup.change,
-      previousChange = _nextChangeGroup$chan === void 0 ? '' : _nextChangeGroup$chan,
-      _nextChangeGroup$prob = nextChangeGroup.probability,
-      previousProbability = _nextChangeGroup$prob === void 0 ? '' : _nextChangeGroup$prob; // get the parsed values
+  var previousValid = previousChangeGroup.valid,
+      _previousChangeGroup$ = previousChangeGroup.change,
+      previousChange = _previousChangeGroup$ === void 0 ? '' : _previousChangeGroup$,
+      _previousChangeGroup$2 = previousChangeGroup.probability,
+      previousProbability = _previousChangeGroup$2 === void 0 ? '' : _previousChangeGroup$2; // get the parsed values
 
   var validValue = parseValidToObject(valid, tafStart, tafEnd);
   var previousValidValue = parseValidToObject(previousValid, tafStart, tafEnd);
@@ -518,6 +519,27 @@ var validatePreviousChangeGroup = function validatePreviousChangeGroup(currentCh
     }
   }
 
+  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(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(FMValidValue.start);
+
+    if (currentRowEndTime.isAfter(FMStartTime)) {
+      return invalidChangeGroupOverlapsWithFM;
+    }
+  }
+
   return true;
 };
 
@@ -1450,7 +1472,8 @@ var invalidWindGustSpeedCombinationMessage = 'Invalid wind gusts, gusts must at
 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'; // validations
+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
@@ -1498,7 +1521,7 @@ var validateUnit = function validateUnit(value) {
   return value === 'KT' || value === '' || invalidWindMessage;
 };
 
-var validateWindInterSection = function validateWindInterSection(speed, gust, direction) {
+var validateWindInterSection = function validateWindInterSection(speed, gust, direction, weather1Value, weather2Value, weather3Value) {
   if (direction === '000' && speed !== '00') {
     return invalidWindSpeedForDirectionZeroMessage;
   }
@@ -1507,6 +1530,19 @@ var validateWindInterSection = function validateWindInterSection(speed, gust, di
     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;
   }
@@ -1527,20 +1563,23 @@ var validateWindInterSection = function validateWindInterSection(speed, gust, di
 }; // 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) {
@@ -1549,7 +1588,7 @@ var validateWindField = function validateWindField(value) {
   } // Then do any intersection validation
 
 
-  return validateWindInterSection(windValidationIndv.speed, windValidationIndv.gust, windValidationIndv.direction);
+  return validateWindInterSection(windValidationIndv.speed, windValidationIndv.gust, windValidationIndv.direction, trimmedWeather1Value, trimmedWeather2Value, trimmedWeather3Value);
 };
 
 var formatSingleCloud = function formatSingleCloud(value) {
@@ -1596,10 +1635,10 @@ var formatCloudsToString = function formatCloudsToString(clouds) {
 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 Object.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
   });
@@ -1615,20 +1654,22 @@ var parseCloudsToObject = function parseCloudsToObject(clouds) {
       switch (key) {
         case 'cloud1':
           {
-            if (isVerticalVisibility(clouds[key])) {
+            var trimmedValue = clouds[key].trim();
+
+            if (isVerticalVisibility(trimmedValue)) {
               // Parse Vertical Visibility
               return Object.assign(Object.assign({}, list), _defineProperty({}, key, {
-                verticalVisibility: parseInt(clouds[key].substr(2, 3), 10)
+                verticalVisibility: parseInt(trimmedValue.substring(2, 5), 10)
               }));
             }
 
-            if (clouds[key] === 'NSC') {
+            if (trimmedValue === 'NSC') {
               // Parse No Significant Clouds
-              return Object.assign(Object.assign({}, list), _defineProperty({}, key, clouds[key]));
+              return Object.assign(Object.assign({}, list), _defineProperty({}, key, trimmedValue));
             } // Parse Cloud
 
 
-            return Object.assign(Object.assign({}, list), _defineProperty({}, key, parseSingleCloud(clouds[key])));
+            return Object.assign(Object.assign({}, list), _defineProperty({}, key, parseSingleCloud(trimmedValue)));
           }
 
         default:
@@ -1656,16 +1697,19 @@ var invalidCloudHeightMessage = 'Invalid cloud height, expected a height consist
 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]+$/);
@@ -1712,25 +1756,32 @@ var isHeightAllowedWithType = function isHeightAllowedWithType(height, type) {
 };
 
 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;
@@ -1747,14 +1798,14 @@ var sharedCloudValidations = function sharedCloudValidations(_ref) {
   } // 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) {
@@ -1763,7 +1814,7 @@ var sharedCloudValidations = function sharedCloudValidations(_ref) {
   } // Validate type
 
 
-  var type = value.substr(6, 3);
+  var type = value.substring(6, 9);
 
   if (!isTypeValid(type)) {
     errorMessages.push(invalidCLoudTypeMessage);
@@ -1782,41 +1833,40 @@ var sharedCloudValidations = function sharedCloudValidations(_ref) {
   };
 };
 
-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 _sharedCloudValidatio = sharedCloudValidations({
-    value: trimmedValue,
+    value: trimmedValueFirstCloud,
     canBeNSC: true
   }),
       errorMessages = _sharedCloudValidatio.errorMessages; // Return first error if any
@@ -1825,15 +1875,26 @@ var validateFirstCloud = function validateFirstCloud(value, visibilityValue) {
   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 _sharedCloudValidatio2 = sharedCloudValidations({
-    value: trimmedValue
+    value: trimmedValueSecondCloud
   }),
       coverage = _sharedCloudValidatio2.coverage,
       height = _sharedCloudValidatio2.height,
@@ -1843,32 +1904,32 @@ var validateSecondCloud = function validateSecondCloud(firstCloudValue, secondCl
 
   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 (firstCloudValue === 'NSC' && trimmedValue !== '') {
-    return invalidCloudWithNSCMessage;
-  } // If Cloud1 is empty Cloud2 should be empty
+  } // If Cloud1 contains a type, Cloud2 cannot contain a type
 
 
-  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;
@@ -1876,22 +1937,34 @@ var validateSecondCloud = function validateSecondCloud(firstCloudValue, secondCl
   } // 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 _sharedCloudValidatio3 = sharedCloudValidations({
-    value: trimmedValue
+    value: trimmedValueThirdCloud
   }),
       coverage = _sharedCloudValidatio3.coverage,
       height = _sharedCloudValidatio3.height,
@@ -1902,45 +1975,45 @@ var validateThirdCloud = function validateThirdCloud(firstCloudValue, secondClou
   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;
@@ -1949,17 +2022,31 @@ var validateThirdCloud = function validateThirdCloud(firstCloudValue, secondClou
   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 _sharedCloudValidatio4 = sharedCloudValidations({
-    value: trimmedValue
+    value: trimmedValueFourthCloud
   }),
       height = _sharedCloudValidatio4.height,
+      coverage = _sharedCloudValidatio4.coverage,
       type = _sharedCloudValidatio4.type,
       errorMessages = _sharedCloudValidatio4.errorMessages; // Return generic errors if any
 
@@ -1967,50 +2054,48 @@ var validateFourthCloud = function validateFourthCloud(firstCloudValue, secondCl
   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;
   }
 
@@ -2449,34 +2534,28 @@ var getConfirmationDialogButtonLabel = function getConfirmationDialogButtonLabel
   }
 };
 
-/* *
- * 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 = makeStyles(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'
@@ -2559,7 +2638,8 @@ var BaseTextField = /*#__PURE__*/React__default.memo(function (props) {
     variant: "filled",
     InputProps: {
       classes: {
-        input: classes.textFieldInput
+        input: classes.textFieldInput,
+        root: classes.textFieldRoot
       }
     },
     InputLabelProps: {
@@ -2855,11 +2935,40 @@ var TafFormRow = /*#__PURE__*/React__default.forwardRef(function (_a, ref) {
     return true;
   }, [index, isChangeGroup, getValues]);
 
-  var getFieldFromNextRow = function getFieldFromNextRow() {
-    var fieldname = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'valid';
-    var nextValidFieldName = "changeGroups[".concat(index + 1, "].").concat(fieldname);
-    var nextRowValidValue = getValues(nextValidFieldName);
-    return nextRowValidValue ? [nextValidFieldName] : [];
+  var getFieldFromRow = function getFieldFromRow(fieldname, rowIndex) {
+    var indexedFieldName = "changeGroups[".concat(rowIndex, "].").concat(fieldname);
+    var rowValue = getValues(indexedFieldName);
+    return rowValue ? [indexedFieldName] : [];
+  };
+
+  var getValidFieldFromNextRow = function getValidFieldFromNextRow() {
+    return getFieldFromRow('valid', index + 1);
+  };
+
+  var validateNextRows = React__default.useCallback(function () {
+    if (isChangeGroup) {
+      var _getValues2 = getValues(),
+          validDateEnd = _getValues2.validDateEnd,
+          validDateStart = _getValues2.validDateStart,
+          changeGroups = _getValues2.changeGroups;
+
+      var currentChangeGroup = changeGroups[index];
+      var nextChangeGroups = changeGroups.slice(index + 1);
+      return validateOverlapWithFM(currentChangeGroup, nextChangeGroups, validDateStart, validDateEnd);
+    }
+
+    return true;
+  }, [index, isChangeGroup, getValues]);
+
+  var getPreviousValidFields = function getPreviousValidFields(rowIndex) {
+    var _getValues3 = getValues(),
+        changeGroups = _getValues3.changeGroups;
+
+    var previousChangeGroups = changeGroups.slice(0, rowIndex);
+    var validFields = previousChangeGroups.map(function (_element, index) {
+      return getFieldFromRow('valid', index)[0];
+    });
+    return validFields;
   };
 
   var addChangeGroup = React__default.useCallback(function () {
@@ -2908,7 +3017,7 @@ var TafFormRow = /*#__PURE__*/React__default.forwardRef(function (_a, ref) {
     }],
     onBlur: function onBlur() {
       if (isChangeGroup) {
-        var nextValidFieldName = getFieldFromNextRow();
+        var nextValidFieldName = getValidFieldFromNextRow();
         trigger([].concat(_toConsumableArray(subFields), _toConsumableArray(mainOptionalFields), _toConsumableArray(mainFields), _toConsumableArray(nextValidFieldName)));
       }
     }
@@ -2938,8 +3047,9 @@ var TafFormRow = /*#__PURE__*/React__default.forwardRef(function (_a, ref) {
     }],
     onBlur: function onBlur() {
       if (isChangeGroup) {
-        var nextValidFieldName = getFieldFromNextRow();
-        trigger([].concat(_toConsumableArray(subFields), _toConsumableArray(mainOptionalFields), _toConsumableArray(mainFields), _toConsumableArray(nextValidFieldName)));
+        var nextValidFieldName = getValidFieldFromNextRow();
+        var previousValidFieldNames = getPreviousValidFields(index);
+        trigger([].concat(_toConsumableArray(subFields), _toConsumableArray(mainOptionalFields), _toConsumableArray(mainFields), _toConsumableArray(nextValidFieldName), _toConsumableArray(previousValidFieldNames)));
       }
     }
   })), /*#__PURE__*/React__default.createElement(TafFormTextField, {
@@ -2957,13 +3067,15 @@ var TafFormRow = /*#__PURE__*/React__default.forwardRef(function (_a, ref) {
         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([].concat(_toConsumableArray(subFields), _toConsumableArray(mainOptionalFields), _toConsumableArray(mainFields), _toConsumableArray(nextValidFieldName)));
+        var nextValidFieldName = getValidFieldFromNextRow();
+        var previousValidFieldNames = getPreviousValidFields(index);
+        trigger([].concat(_toConsumableArray(subFields), _toConsumableArray(mainOptionalFields), _toConsumableArray(mainFields), _toConsumableArray(nextValidFieldName), _toConsumableArray(previousValidFieldNames)));
       }
     }
   }), /*#__PURE__*/React__default.createElement(TafFormTextField, {
@@ -2977,7 +3089,9 @@ var TafFormRow = /*#__PURE__*/React__default.forwardRef(function (_a, ref) {
           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() {
@@ -3026,7 +3140,7 @@ var TafFormRow = /*#__PURE__*/React__default.forwardRef(function (_a, ref) {
     },
     onBlur: function onBlur() {
       var fields = isChangeGroup ? [].concat(_toConsumableArray(subFields), _toConsumableArray(mainFields)) : [];
-      return trigger([].concat(_toConsumableArray(fields), [fieldNames.weather2, fieldNames.weather3]));
+      return trigger([].concat(_toConsumableArray(fields), [fieldNames.weather2, fieldNames.weather3, fieldNames.wind, fieldNames.cloud1]));
     }
   }), /*#__PURE__*/React__default.createElement(TafFormTextField, {
     label: "Weather",
@@ -3042,7 +3156,7 @@ var TafFormRow = /*#__PURE__*/React__default.forwardRef(function (_a, ref) {
     },
     onBlur: function onBlur() {
       var fields = isChangeGroup ? [].concat(_toConsumableArray(subFields), _toConsumableArray(mainFields)) : [];
-      return trigger([].concat(_toConsumableArray(fields), [fieldNames.weather3]));
+      return trigger([].concat(_toConsumableArray(fields), [fieldNames.weather3, fieldNames.wind, fieldNames.cloud1]));
     }
   }), /*#__PURE__*/React__default.createElement(TafFormTextField, {
     label: "Weather",
@@ -3055,6 +3169,9 @@ var TafFormRow = /*#__PURE__*/React__default.forwardRef(function (_a, ref) {
           return validateThirdWeatherField(getValues(fieldNames.weather1), getValues(fieldNames.weather2), value, getValues(fieldNames.visibility));
         }
       }
+    },
+    onBlur: function onBlur() {
+      return trigger([fieldNames.wind, fieldNames.cloud1]);
     }
   }), /*#__PURE__*/React__default.createElement(TafFormTextField, {
     label: "Cloud",
@@ -3068,7 +3185,7 @@ var TafFormRow = /*#__PURE__*/React__default.forwardRef(function (_a, ref) {
         },
         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));
         }
       }
     },
@@ -3125,13 +3242,15 @@ var TafFormRow = /*#__PURE__*/React__default.forwardRef(function (_a, ref) {
   }, !disabled && /*#__PURE__*/React__default.createElement(IconButton, {
     "aria-label": "add",
     "data-testid": "add-changeGroup",
-    onClick: addChangeGroup
+    onClick: addChangeGroup,
+    size: "large"
   }, /*#__PURE__*/React__default.createElement(Add, null))), isChangeGroup && !disabled && /*#__PURE__*/React__default.createElement(Grid, {
     item: true
   }, /*#__PURE__*/React__default.createElement(IconButton, {
     "aria-label": "add",
     "data-testid": "add-changeGroup",
-    onClick: addChangeGroup
+    onClick: addChangeGroup,
+    size: "large"
   }, /*#__PURE__*/React__default.createElement(Add, null)), /*#__PURE__*/React__default.createElement(IconButton, Object.assign({
     "aria-label": "delete",
     "data-testid": "remove-changeGroup",
@@ -3139,8 +3258,10 @@ var TafFormRow = /*#__PURE__*/React__default.forwardRef(function (_a, ref) {
       return onRemoveChangeGroup(index);
     }
   }, lastRow ? {
-    tabIndex: '-1'
-  } : {}), /*#__PURE__*/React__default.createElement(Delete, null))));
+    tabIndex: -1
+  } : {}, {
+    size: "large"
+  }), /*#__PURE__*/React__default.createElement(Delete, null))));
 });
 
 /* *
@@ -3459,7 +3580,7 @@ var TafFormButtons = function TafFormButtons(_ref) {
 
   return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Grid, {
     container: true,
-    justify: "space-between",
+    justifyContent: "space-between",
     alignItems: "center",
     className: classes.lifecycleButtons
   }, /*#__PURE__*/React__default.createElement(Grid, {
@@ -3587,7 +3708,8 @@ var DragHandle = function DragHandle(_ref) {
     className: "".concat(classes.dragHandle, " handle"),
     "data-testid": "dragHandle-".concat(index),
     disableRipple: true,
-    disabled: isDisabled
+    disabled: isDisabled,
+    size: "large"
   }, /*#__PURE__*/React__default.createElement(DragIndicator, null));
 };
 
@@ -3984,14 +4106,12 @@ var ContentDialog = function ContentDialog(_a) {
       return onFormAction('CLOSE');
     },
     maxWidth: other.maxWidth ? other.maxWidth : 'lg',
-    disableBackdropClick: true,
     PaperProps: {
       style: {
         position: 'inherit'
       }
     }
   }, other), /*#__PURE__*/React.createElement(DialogTitle, {
-    disableTypography: true,
     className: classes.dialogHeader
   }, /*#__PURE__*/React.createElement(Grid, {
     container: true
@@ -4177,13 +4297,13 @@ var TafListRow = function TafListRow(_ref) {
     md: 3
   }, /*#__PURE__*/React__default.createElement(Grid, {
     container: true,
-    justify: "flex-start",
+    justifyContent: "flex-start",
     spacing: 2
   }, /*#__PURE__*/React__default.createElement(Grid, {
     item: true,
     xs: 8,
     container: true,
-    justify: "flex-end"
+    justifyContent: "flex-end"
   }, taf.status === 'DRAFT' || taf.status === 'DRAFT_CORRECTED' || taf.status === 'DRAFT_AMENDED' ? /*#__PURE__*/React__default.createElement(Button, {
     color: "secondary",
     size: "small",
@@ -4306,7 +4426,7 @@ var TafListButtons = function TafListButtons(_ref) {
   return !canBe.includes('CANCELLED') && !canBe.includes('CORRECTED') && !canBe.includes('AMENDED') ? null : /*#__PURE__*/React__default.createElement(Grid, {
     container: true,
     alignItems: "center",
-    justify: "flex-end",
+    justifyContent: "flex-end",
     "data-testid": "taflist-canbebuttons",
     spacing: 1,
     className: classes.actionButtons
@@ -4346,6 +4466,9 @@ var useStyles$3 = makeStyles({
   },
   formPadding: {
     padding: '8px'
+  },
+  expandIcon: {
+    color: '#0075a9'
   }
 });
 
@@ -4407,11 +4530,13 @@ var TafListAccordion = function TafListAccordion(_ref) {
   }), /*#__PURE__*/React__default.createElement(AccordionSummary, {
     "data-testid": "tafListSectionAccordionSummary",
     expandIcon: popOut ? /*#__PURE__*/React__default.createElement(Tooltip, {
-      title: "Popout to edit"
+      title: "Popout to edit",
+      className: classes.expandIcon
     }, /*#__PURE__*/React__default.createElement(OpenInNew, {
       "data-testid": "popOutIcon",
       fontSize: "small"
     })) : /*#__PURE__*/React__default.createElement(ExpandMore, {
+      className: classes.expandIcon,
       "data-testid": "expandIcon"
     })
   }, /*#__PURE__*/React__default.createElement(TafListRow, {
@@ -4585,7 +4710,7 @@ var TafList = function TafList(_ref) {
     onClickTafActionButton: onClickTafActionButton
   })), isLoading && /*#__PURE__*/React__default.createElement(Skeleton, {
     "data-testid": "tafList-skeleton",
-    variant: "rect",
+    variant: "rectangular",
     height: "660px"
   })));
 };