@opengeoweb/taf 4.12.0 → 4.13.1

package/index.umd.js

@@ -1,8 +1,8 @@
 (function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react'), require('@mui/material'), require('react-hook-form'), require('react-redux'), require('react-sortablejs'), require('sortablejs'), require('@opengeoweb/authentication'), require('@opengeoweb/form-fields'), require('@opengeoweb/shared'), require('@opengeoweb/core'), require('moment'), require('lodash'), require('@opengeoweb/theme'), require('react-dom'), require('@opengeoweb/api'), require('@mui/material/LinearProgress'), require('@mui/material/Box')) :
-    typeof define === 'function' && define.amd ? define(['exports', 'react', '@mui/material', 'react-hook-form', 'react-redux', 'react-sortablejs', 'sortablejs', '@opengeoweb/authentication', '@opengeoweb/form-fields', '@opengeoweb/shared', '@opengeoweb/core', 'moment', 'lodash', '@opengeoweb/theme', 'react-dom', '@opengeoweb/api', '@mui/material/LinearProgress', '@mui/material/Box'], factory) :
-    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.Taf = {}, global.React, global.material, global.reactHookForm, global.reactRedux, global.reactSortablejs, global.Sortable, global.authentication, global.formFields, global.shared, global.core, global.moment, global.lodash, global.theme, global.ReactDOM, global.api, global.LinearProgress, global.Box));
-})(this, (function (exports, React, material, reactHookForm, reactRedux, reactSortablejs, Sortable, authentication, formFields, shared, core, moment, lodash, theme, ReactDOM, api, LinearProgress, Box) { 'use strict';
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react'), require('@mui/material'), require('react-hook-form'), require('react-redux'), require('react-sortablejs'), require('sortablejs'), require('@opengeoweb/authentication'), require('@opengeoweb/form-fields'), require('@opengeoweb/shared'), require('@opengeoweb/core'), require('moment'), require('lodash'), require('@opengeoweb/theme'), require('react-dom'), require('@emotion/react'), require('@opengeoweb/api'), require('@mui/material/LinearProgress'), require('@mui/material/Box')) :
+    typeof define === 'function' && define.amd ? define(['exports', 'react', '@mui/material', 'react-hook-form', 'react-redux', 'react-sortablejs', 'sortablejs', '@opengeoweb/authentication', '@opengeoweb/form-fields', '@opengeoweb/shared', '@opengeoweb/core', 'moment', 'lodash', '@opengeoweb/theme', 'react-dom', '@emotion/react', '@opengeoweb/api', '@mui/material/LinearProgress', '@mui/material/Box'], factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.Taf = {}, global.React, global.material, global.reactHookForm, global.reactRedux, global.reactSortablejs, global.Sortable, global.authentication, global.formFields, global.shared, global.core, global.moment, global.lodash, global.theme, global.ReactDOM, global.emotionReact, global.api, global.LinearProgress, global.Box));
+})(this, (function (exports, React, material, reactHookForm, reactRedux, reactSortablejs, Sortable, authentication, formFields, shared, core, moment, lodash, theme, ReactDOM, react, api, LinearProgress, Box) { 'use strict';
 
     function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -316,8 +316,35 @@
      * 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)
+     * Copyright 2023 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+     * Copyright 2023 - Finnish Meteorological Institute (FMI)
+     * */
+
+    var prependZeroes = function prependZeroes(value, totalDigits) {
+      var valueAsString = value.toString();
+      return __spreadArray([], __read(Array(totalDigits - valueAsString.length))).reduce(function (newVal) {
+        return "0" + newVal;
+      }, valueAsString);
+    };
+    var getFieldValue = function getFieldValue(fieldValue) {
+      return fieldValue === null || fieldValue === void 0 ? void 0 : fieldValue.trim().toUpperCase();
+    };
+
+    /* *
+     * 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 2023 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+     * Copyright 2023 - Finnish Meteorological Institute (FMI)
      * */
     var FORMAT_DAYS_HOURS = 'DDHH';
     var FORMAT_DAYS_HOURS_MINUTES = 'DDHHmm'; // formatters
@@ -451,7 +478,7 @@
 
 
     var validateValidField = function validateValidField(value, tafStart, tafEnd) {
-      var trimmedValue = value.trim();
+      var trimmedValue = getFieldValue(value);
 
       if (!trimmedValue.length) {
         return true;
@@ -474,9 +501,9 @@
       return true;
     };
     var validateValidChangeGroupInterField = function validateValidChangeGroupInterField(value, valueChange, valueProb, tafStart, tafEnd) {
-      var trimmedValue = value.trim();
-      var trimmedValueChange = valueChange.trim();
-      var trimmedValueProb = valueProb.trim();
+      var trimmedValue = getFieldValue(value);
+      var trimmedValueChange = getFieldValue(valueChange);
+      var trimmedValueProb = getFieldValue(valueProb);
 
       if (!trimmedValue.length) {
         return true;
@@ -526,16 +553,12 @@
     var invalidPreviousChangeGroupHasSameValue = "When valid times are equal, probability/change can't have the same value as previous row value";
     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 = previousChangeGroup.valid,
-          _c = previousChangeGroup.change,
-          previousChange = _c === void 0 ? '' : _c,
-          _d = previousChangeGroup.probability,
-          previousProbability = _d === void 0 ? '' : _d; // get the parsed values
+      var valid = getFieldValue(currentChangeGroup.valid);
+      var change = getFieldValue(currentChangeGroup.change || '');
+      var probability = getFieldValue(currentChangeGroup.probability || '');
+      var previousValid = getFieldValue(previousChangeGroup.valid);
+      var previousChange = getFieldValue(previousChangeGroup.change || '');
+      var previousProbability = getFieldValue(previousChangeGroup.probability || ''); // get the parsed values
 
       var validValue = parseValidToObject(valid, tafStart, tafEnd);
       var previousValidValue = parseValidToObject(previousValid, tafStart, tafEnd);
@@ -572,12 +595,12 @@
     }; // validate overlapping validity when one of the following changegroups is FM
 
     var validateOverlapWithFM = function validateOverlapWithFM(currentChangeGroup, nextChangeGroups, tafStart, tafEnd) {
-      var valid = currentChangeGroup.valid;
+      var valid = getFieldValue(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';
+        return getFieldValue(nextChangeGroup.change) === 'FM';
       });
 
       if (firstFMChangeGroup && firstFMChangeGroup.valid) {
@@ -592,33 +615,6 @@
       return true;
     };
 
-    /* *
-     * 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 2023 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
-     * Copyright 2023 - Finnish Meteorological Institute (FMI)
-     * */
-
-    var prependZeroes = function prependZeroes(value, totalDigits) {
-      var valueAsString = value.toString();
-      return __spreadArray([], __read(Array(totalDigits - valueAsString.length))).reduce(function (newVal) {
-        return "0" + newVal;
-      }, valueAsString);
-    };
-    var getFieldValue = function getFieldValue(fieldValue) {
-      return fieldValue === null || fieldValue === void 0 ? void 0 : fieldValue.trim().toUpperCase();
-    };
-
     var config$1 = [{
       key: 'range',
       size: 4
@@ -650,7 +646,7 @@
     // returns object with validity if passed numbers - returns object with cavOK: true if passed CAVOK
 
     var parseVisibilityToObject = function parseVisibilityToObject(value) {
-      var trimmedValue = value.trim();
+      var trimmedValue = getFieldValue(value);
 
       if (trimmedValue === 'CAVOK') {
         return {
@@ -698,7 +694,7 @@
 
 
     var validateVisibilityField = function validateVisibilityField(value) {
-      var trimmedValue = value.trim();
+      var trimmedValue = getFieldValue(value);
 
       if (!trimmedValue.length) {
         return true;
@@ -711,7 +707,7 @@
 
 
       if (!trimmedValue.match(/^[0-9]+$/)) {
-        return value === 'CAVOK' || invalidVisibilityMessage;
+        return trimmedValue === 'CAVOK' || invalidVisibilityMessage;
       } // validate range
 
 
@@ -1177,12 +1173,13 @@
     var invalidWeatherFGVisibility = 'Invalid weather input, weather code FG needs to be combined with a visibility below 1000m'; // validations
 
     var WeatherVisibilityBelow5000 = [WeatherPhenomena.FU, WeatherPhenomena.DU, WeatherPhenomena.HZ, WeatherPhenomena.DRDU, WeatherPhenomena.BLDU];
-    var validateWeatherField = function validateWeatherField(value, visibilityValue, NSWAllowed) {
+    var validateWeatherField = function validateWeatherField(value, visibilityFieldValue, NSWAllowed) {
       if (NSWAllowed === void 0) {
         NSWAllowed = true;
       }
 
-      var trimmedValue = value.trim(); // if empty, validate as true
+      var trimmedValue = getFieldValue(value);
+      var visibilityValue = getFieldValue(visibilityFieldValue); // if empty, validate as true
 
       if (trimmedValue === '') {
         return true;
@@ -1221,14 +1218,15 @@
 
       return true;
     };
-    var validateSecondWeatherField = function validateSecondWeatherField(weather1Value, weather2Value, visibilityValue) {
-      var trimmedWeather2Value = weather2Value.trim(); // Field can be left empty
+    var validateSecondWeatherField = function validateSecondWeatherField(weather1Value, weather2Value, visibilityFieldValue) {
+      var trimmedWeather2Value = getFieldValue(weather2Value);
+      var visibilityValue = getFieldValue(visibilityFieldValue); // Field can be left empty
 
       if (!trimmedWeather2Value.length) {
         return true;
       }
 
-      var trimmedWeather1Value = weather1Value.trim(); // If weather1 is NSW weather2 should be empty
+      var trimmedWeather1Value = getFieldValue(weather1Value); // If weather1 is NSW weather2 should be empty
 
       if (trimmedWeather1Value === 'NSW' && trimmedWeather2Value !== '') {
         return invalidWeatherNonEmptyNSWGroups;
@@ -1246,15 +1244,16 @@
 
       return validateWeatherField(weather2Value, visibilityValue, false);
     };
-    var validateThirdWeatherField = function validateThirdWeatherField(weather1Value, weather2Value, weather3Value, visibilityValue) {
-      var trimmedWeather3Value = weather3Value.trim(); // Field can be left empty
+    var validateThirdWeatherField = function validateThirdWeatherField(weather1Value, weather2Value, weather3Value, visibilityFieldValue) {
+      var trimmedWeather3Value = getFieldValue(weather3Value);
+      var visibilityValue = getFieldValue(visibilityFieldValue); // Field can be left empty
 
       if (!trimmedWeather3Value.length) {
         return true;
       }
 
-      var trimmedWeather1Value = weather1Value.trim();
-      var trimmedWeather2Value = weather2Value.trim(); // If weather1 is NSW weather3 should be empty
+      var trimmedWeather1Value = getFieldValue(weather1Value);
+      var trimmedWeather2Value = getFieldValue(weather2Value); // If weather1 is NSW weather3 should be empty
 
       if (trimmedWeather1Value === 'NSW' && trimmedWeather3Value !== '') {
         return invalidWeatherNonEmptyNSWGroups;
@@ -1616,10 +1615,10 @@
 
 
     var validateWindField = function validateWindField(value, weatherfield1, weatherfield2, weatherfield3) {
-      var trimmedWindValue = value.trim();
-      var trimmedWeather1Value = weatherfield1.trim();
-      var trimmedWeather2Value = weatherfield2.trim();
-      var trimmedWeather3Value = weatherfield3.trim();
+      var trimmedWindValue = getFieldValue(value);
+      var trimmedWeather1Value = getFieldValue(weatherfield1);
+      var trimmedWeather2Value = getFieldValue(weatherfield2);
+      var trimmedWeather3Value = getFieldValue(weatherfield3);
 
       if (!trimmedWindValue.length) {
         return true;
@@ -1890,11 +1889,11 @@
     };
 
     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
+      var trimmedValueFirstCloud = getFieldValue(value);
+      var trimmedValueVisibility = getFieldValue(visibilityValue);
+      var trimmedWeather1Value = getFieldValue(weatherfield1);
+      var trimmedWeather2Value = getFieldValue(weatherfield2);
+      var trimmedWeather3Value = getFieldValue(weatherfield3); // Field can be left empty
 
       if (!trimmedValueFirstCloud.length) {
         return true;
@@ -1928,9 +1927,10 @@
 
       return errorMessages.length ? errorMessages[0] : true;
     };
-    var validateSecondCloud = function validateSecondCloud(firstCloudValue, secondCloudValue, visibilityValue) {
-      var trimmedValueFirstCloud = firstCloudValue.trim();
-      var trimmedValueSecondCloud = secondCloudValue.trim(); // Field can be left empty
+    var validateSecondCloud = function validateSecondCloud(firstCloudValue, secondCloudValue, visibilityFieldValue) {
+      var trimmedValueFirstCloud = getFieldValue(firstCloudValue);
+      var trimmedValueSecondCloud = getFieldValue(secondCloudValue);
+      var visibilityValue = getFieldValue(visibilityFieldValue); // Field can be left empty
 
       if (!trimmedValueSecondCloud.length) {
         return true;
@@ -1997,10 +1997,11 @@
 
       return true;
     };
-    var validateThirdCloud = function validateThirdCloud(firstCloudValue, secondCloudValue, thirdCloudValue, visibilityValue) {
-      var trimmedValueFirstCloud = firstCloudValue.trim();
-      var trimmedValueSecondCloud = secondCloudValue.trim();
-      var trimmedValueThirdCloud = thirdCloudValue.trim(); // Field can be left empty
+    var validateThirdCloud = function validateThirdCloud(firstCloudValue, secondCloudValue, thirdCloudValue, visibilityFieldValue) {
+      var trimmedValueFirstCloud = getFieldValue(firstCloudValue);
+      var trimmedValueSecondCloud = getFieldValue(secondCloudValue);
+      var trimmedValueThirdCloud = getFieldValue(thirdCloudValue);
+      var visibilityValue = getFieldValue(visibilityFieldValue); // Field can be left empty
 
       if (!trimmedValueThirdCloud.length) {
         return true;
@@ -2075,11 +2076,12 @@
 
       return true;
     };
-    var validateFourthCloud = function validateFourthCloud(firstCloudValue, secondCloudValue, thirdCloudValue, fourthCloudValue, visibilityValue) {
-      var trimmedValueFirstCloud = firstCloudValue.trim();
-      var trimmedValueSecondCloud = secondCloudValue.trim();
-      var trimmedValueThirdCloud = thirdCloudValue.trim();
-      var trimmedValueFourthCloud = fourthCloudValue.trim(); // Field can be left empty
+    var validateFourthCloud = function validateFourthCloud(firstCloudValue, secondCloudValue, thirdCloudValue, fourthCloudValue, visibilityFieldValue) {
+      var trimmedValueFirstCloud = getFieldValue(firstCloudValue);
+      var trimmedValueSecondCloud = getFieldValue(secondCloudValue);
+      var trimmedValueThirdCloud = getFieldValue(thirdCloudValue);
+      var trimmedValueFourthCloud = getFieldValue(fourthCloudValue);
+      var visibilityValue = getFieldValue(visibilityFieldValue); // Field can be left empty
 
       if (!trimmedValueFourthCloud.length) {
         return true;
@@ -3132,6 +3134,7 @@
         isOpen: isOpen,
         "data-testid": "moveable-issues-pane",
         bounds: "parent",
+        cancel: "",
         onDragEnd: function onDragEnd(event) {
           if (event.x !== 0 && event.y !== 0) {
             onUserHasDragged();
@@ -3265,17 +3268,45 @@
       }, shared.getInitials(editor))));
     };
 
-    var textFieldStyle = function textFieldStyle(theme) {
-      return {
+    /* *
+     * 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 2023 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+     * Copyright 2023 - Finnish Meteorological Institute (FMI)
+     * */
+    var TAF_MODULE_ID = 'tafmodule';
+    var ResponsiveWrapper = function ResponsiveWrapper(_a) {
+      var children = _a.children;
+      return /*#__PURE__*/React__namespace.createElement(material.Box, {
+        sx: {
+          containerType: 'inline-size',
+          containerName: TAF_MODULE_ID
+        }
+      }, children);
+    };
+
+    var textFieldStyle = function textFieldStyle(theme, shouldPreventUppercase) {
+      var _a;
+
+      return __assign(__assign({
         // input
-        marginRight: '2px',
         marginBottom: '4px',
-        width: 56,
+        width: '100%',
         height: 46,
         input: {
           textAlign: 'center',
-          fontSize: 10,
-          fontWeight: 500,
+          textTransform: shouldPreventUppercase ? 'none' : 'uppercase',
+          fontWeight: 'normal',
           paddingLeft: 0,
           paddingRight: 0,
           '&.Mui-disabled': {
@@ -3314,8 +3345,21 @@
           '.Mui-disabled:before': {
             borderColor: 'transparent'
           }
+        },
+        '& .MuiFilledInput-root': {
+          borderTopLeftRadius: '0px',
+          borderTopRightRadius: '0px'
         }
-      };
+      }, !shared.IS_JEST && (_a = {}, // container queries
+      _a["@container " + TAF_MODULE_ID + " (min-width: 1440px)"] = {
+        '&.MuiFormControl-root.MuiTextField-root .inputText': {
+          fontSize: 14
+        }
+      }, _a)), {
+        '.inputText': {
+          fontSize: 12
+        }
+      });
     };
 
     var getTafErrors = function getTafErrors(name, errors) {
@@ -3338,11 +3382,17 @@
     var getDisplayValue = function getDisplayValue(value, disabled) {
       return disabled && !value ? '-' : value;
     };
-    var BaseTextField = /*#__PURE__*/React__default["default"].memo(function (props) {
+    var BaseTextField = /*#__PURE__*/React__default["default"].memo(function (_a) {
+      var _b = _a.shouldPreventUppercase,
+          shouldPreventUppercase = _b === void 0 ? false : _b,
+          props = __rest(_a, ["shouldPreventUppercase"]);
+
+      var theme = react.useTheme();
+      var styling = textFieldStyle(theme, shouldPreventUppercase);
       return /*#__PURE__*/React__default["default"].createElement(material.TextField, __assign({
         type: "text",
         variant: "filled",
-        sx: textFieldStyle
+        sx: styling
       }, props));
     }, function (prevProps, nextProps) {
       return prevProps.value === nextProps.value && prevProps.error === nextProps.error && prevProps.name === nextProps.name && prevProps.disabled === nextProps.disabled;
@@ -3366,18 +3416,20 @@
           _h = _a.autoComplete,
           autoComplete = _h === void 0 ? [] : _h,
           _j = _a.autoFocus,
-          autoFocus = _j === void 0 ? false : _j;
+          autoFocus = _j === void 0 ? false : _j,
+          _k = _a.shouldPreventUppercase,
+          shouldPreventUppercase = _k === void 0 ? false : _k;
 
-      var _k = reactHookForm.useFormContext(),
-          control = _k.control,
-          setValue = _k.setValue,
-          errors = _k.formState.errors;
+      var _l = reactHookForm.useFormContext(),
+          control = _l.control,
+          setValue = _l.setValue,
+          errors = _l.formState.errors;
 
       var fieldErrors = getTafErrors(name, errors);
 
-      var _l = __read(React__default["default"].useState(null), 2),
-          maxLength = _l[0],
-          setMaxLength = _l[1];
+      var _m = __read(React__default["default"].useState(null), 2),
+          maxLength = _m[0],
+          setMaxLength = _m[1];
 
       var onKeyDown = React__default["default"].useCallback(function (event) {
         var target = event.target;
@@ -3394,7 +3446,8 @@
 
           if (foundValue) {
             setValue(name, foundValue.value, {
-              shouldDirty: true
+              shouldDirty: true,
+              shouldValidate: true
             });
             setMaxLength(foundValue.value.length);
             event.preventDefault();
@@ -3402,25 +3455,41 @@
         }
       }, [name, autoComplete, setValue]);
       var onChangeField = React__default["default"].useCallback(function (event, callback) {
-        var valueUppercase = event.currentTarget.value.toUpperCase();
+        var value = event.currentTarget.value;
 
         if (autoComplete) {
+          var valueUppercase_1 = value.toUpperCase();
           var exist = autoComplete.find(function (e) {
-            return e.value === valueUppercase;
+            return e.value === valueUppercase_1;
           });
-          var newMaxLength = exist ? valueUppercase.length : null;
+          var newMaxLength = exist ? valueUppercase_1.length : null;
           setMaxLength(newMaxLength);
         }
 
-        callback(valueUppercase);
-        onChange(valueUppercase);
+        callback(value);
+        onChange(value);
       }, [onChange, autoComplete]);
-      var onBlurField = React__default["default"].useCallback(function (callback) {
+      var onBlurField = React__default["default"].useCallback(function (event, callback) {
+        var value = event.target.value;
+        var valueUppercase = value.toUpperCase();
+
+        if (value !== valueUppercase && !shouldPreventUppercase) {
+          setValue(name, valueUppercase, {
+            shouldValidate: true
+          });
+        }
+
         callback();
         onBlur();
-      }, [onBlur]);
+      }, [onBlur, name, setValue, shouldPreventUppercase]);
       var hasError = !!fieldErrors;
-      return /*#__PURE__*/React__default["default"].createElement(reactHookForm.Controller, {
+      return /*#__PURE__*/React__default["default"].createElement(material.Grid, {
+        item: true,
+        sx: {
+          width: 100 / 13 + "%",
+          minWidth: 60
+        }
+      }, /*#__PURE__*/React__default["default"].createElement(reactHookForm.Controller, {
         render: function render(_a) {
           var field = _a.field;
           var displayValue = formatter ? formatter(field.value) : getDisplayValue(field.value, disabled);
@@ -3430,25 +3499,27 @@
             name: name,
             value: displayValue,
             inputRef: field.ref,
-            onChange: function onChange(e) {
-              return onChangeField(e, field.onChange);
+            onChange: function onChange(event) {
+              return onChangeField(event, field.onChange);
             },
             onKeyDown: onKeyDown,
             error: hasError,
-            onBlur: function onBlur() {
-              return onBlurField(field.onBlur);
+            onBlur: function onBlur(event) {
+              return onBlurField(event, field.onBlur);
             },
             inputProps: {
-              maxLength: maxLength
+              maxLength: maxLength,
+              className: 'inputText'
             },
-            autoFocus: autoFocus
+            autoFocus: autoFocus,
+            shouldPreventUppercase: shouldPreventUppercase
           });
         },
         name: name,
         control: control,
         defaultValue: defaultValue,
         rules: rules
-      });
+      }));
     };
 
     /* *
@@ -3722,6 +3793,14 @@
           marginTop: '8px',
           backgroundColor: 'geowebColors.cards.cardContainer',
           position: 'relative',
+          paddingLeft: {
+            xs: '2px',
+            lg: '10px'
+          },
+          paddingRight: {
+            xs: '2px',
+            lg: '10px'
+          },
           '&.sortable-chosen': {
             boxShadow: 1
           },
@@ -3736,12 +3815,10 @@
       }, props, {
         className: "formRow"
       }), /*#__PURE__*/React__default["default"].createElement(material.Grid, {
-        columns: 24,
         item: true,
         container: true,
         justifyContent: "flex-end",
-        xs: 24,
-        sm: 23
+        xs: true
       }, !isChangeGroup && /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(TafFormTextField, {
         label: "Type",
         name: fieldNames.messageType,
@@ -3754,12 +3831,15 @@
         formatter: formatIssueTime,
         label: "Issue time",
         name: "issueDate",
-        disabled: true
+        disabled: true,
+        shouldPreventUppercase: true
       })), isChangeGroup && /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(material.Box, {
         sx: {
-          width: 56,
-          marginRight: '2px'
-        }
+          marginRight: '2px',
+          minWidth: 60
+        },
+        display: "flex",
+        justifyContent: "center"
       }, !disabled && dragHandle), /*#__PURE__*/React__default["default"].createElement(TafFormTextField, {
         label: "Prob",
         name: fieldNames.probability,
@@ -4003,12 +4083,11 @@
         container: true,
         justifyContent: "flex-end",
         alignItems: "flex-end",
-        xs: 24,
-        sm: 1,
         sx: {
-          marginBottom: '16px'
-        },
-        columns: 24
+          width: '3.5%',
+          marginBottom: '14px',
+          minWidth: 28
+        }
       }, /*#__PURE__*/React__default["default"].createElement(TafFormOptionsButton, {
         isChangeGroup: isChangeGroup,
         addChangeGroupBelow: addChangeGroupBelow,
@@ -5271,7 +5350,12 @@
       }))), /*#__PURE__*/React__default["default"].createElement(material.Box, {
         ref: scrollRef,
         sx: {
-          padding: '10px',
+          padding: {
+            xs: '12px',
+            sm: '6px',
+            md: '16px',
+            lg: '24px'
+          },
           maxHeight: '100%',
           overflow: 'auto'
         }
@@ -6192,7 +6276,6 @@
       }, /*#__PURE__*/React__default["default"].createElement(material.Box, {
         sx: {
           minWidth: 320,
-          maxWidth: 1272,
           margin: 'auto',
           height: '100%',
           display: 'flex',
@@ -6396,7 +6479,7 @@
       }, []);
       shared.usePoller([tafList, getTafListError], fetchNewTafList);
       var hasTafListError = getTafListError !== null;
-      return /*#__PURE__*/React__namespace.createElement(material.Box, {
+      return /*#__PURE__*/React__namespace.createElement(ResponsiveWrapper, null, /*#__PURE__*/React__namespace.createElement(material.Box, {
         component: "div",
         id: "tafmodule",
         sx: {
@@ -6421,7 +6504,7 @@
         tafList: tafList,
         onUpdateTaf: onUpdateTaf,
         lastUpdateTime: lastUpdateTime
-      }));
+      })));
     };
 
     var Wrapper = function Wrapper(props) {