@opengeoweb/taf 4.13.0 → 4.13.1

package/index.esm.js

@@ -7,7 +7,7 @@ import { ReactSortable } from 'react-sortablejs';
 import Sortable from 'sortablejs';
 import { useAuthenticationContext } from '@opengeoweb/authentication';
 import { getDeepProperty, ReactHookFormHiddenInput, ReactHookFormProvider } from '@opengeoweb/form-fields';
-import { HIDDEN_INPUT_HELPER_IS_DRAFT, useIsMounted, CustomTooltip, ToolContainerDraggable, Avatar, getInitials, ToggleMenu, useConfirmationDialog, useDraftFormHelpers, usePreventBrowserClose, ToolButton, ToolHeader, AlertBanner, getErrorMessage as getErrorMessage$1, getWarningMessage, ConfirmationServiceProvider, usePoller, ErrorBoundary } from '@opengeoweb/shared';
+import { HIDDEN_INPUT_HELPER_IS_DRAFT, useIsMounted, CustomTooltip, ToolContainerDraggable, Avatar, getInitials, IS_JEST, ToggleMenu, useConfirmationDialog, useDraftFormHelpers, usePreventBrowserClose, ToolButton, ToolHeader, AlertBanner, getErrorMessage as getErrorMessage$1, getWarningMessage, ConfirmationServiceProvider, usePoller, ErrorBoundary } from '@opengeoweb/shared';
 import { snackbarActions } from '@opengeoweb/core';
 import moment from 'moment';
 import { isEqual } from 'lodash';
@@ -3125,6 +3125,7 @@ var IssuesPane = function IssuesPane(_ref) {
     isOpen: isOpen,
     "data-testid": "moveable-issues-pane",
     bounds: "parent",
+    cancel: "",
     onDragEnd: function onDragEnd(event) {
       if (event.x !== 0 && event.y !== 0) {
         onUserHasDragged();
@@ -3260,18 +3261,43 @@ var TafAvatar = function TafAvatar(_ref) {
   }, getInitials(editor))));
 };
 
+/* *
+ * 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(_ref) {
+  var children = _ref.children;
+  return /*#__PURE__*/React.createElement(Box, {
+    sx: {
+      containerType: 'inline-size',
+      containerName: TAF_MODULE_ID
+    }
+  }, children);
+};
+
 var textFieldStyle = function textFieldStyle(theme, shouldPreventUppercase) {
-  return {
+  return Object.assign(Object.assign({
     // input
-    marginRight: '2px',
     marginBottom: '4px',
-    width: 56,
+    width: '100%',
     height: 46,
     input: {
       textAlign: 'center',
       textTransform: shouldPreventUppercase ? 'none' : 'uppercase',
-      fontSize: 10,
-      fontWeight: 500,
+      fontWeight: 'normal',
       paddingLeft: 0,
       paddingRight: 0,
       '&.Mui-disabled': {
@@ -3310,8 +3336,20 @@ var textFieldStyle = function textFieldStyle(theme, shouldPreventUppercase) {
       '.Mui-disabled:before': {
         borderColor: 'transparent'
       }
+    },
+    '& .MuiFilledInput-root': {
+      borderTopLeftRadius: '0px',
+      borderTopRightRadius: '0px'
     }
-  };
+  }, !IS_JEST && _defineProperty({}, "@container ".concat(TAF_MODULE_ID, " (min-width: 1440px)"), {
+    '&.MuiFormControl-root.MuiTextField-root .inputText': {
+      fontSize: 14
+    }
+  })), {
+    '.inputText': {
+      fontSize: 12
+    }
+  });
 };
 
 var getTafErrors = function getTafErrors(name, errors) {
@@ -3350,27 +3388,27 @@ var BaseTextField = /*#__PURE__*/React__default.memo(function (_a) {
   return prevProps.value === nextProps.value && prevProps.error === nextProps.error && prevProps.name === nextProps.name && prevProps.disabled === nextProps.disabled;
 });
 
-var TafFormTextField = function TafFormTextField(_ref) {
-  var label = _ref.label,
-      _ref$disabled = _ref.disabled,
-      disabled = _ref$disabled === void 0 ? false : _ref$disabled,
-      _ref$name = _ref.name,
-      name = _ref$name === void 0 ? '' : _ref$name,
-      _ref$onChange = _ref.onChange,
-      onChange = _ref$onChange === void 0 ? function () {} : _ref$onChange,
-      _ref$onBlur = _ref.onBlur,
-      onBlur = _ref$onBlur === void 0 ? function () {} : _ref$onBlur,
-      _ref$defaultValue = _ref.defaultValue,
-      defaultValue = _ref$defaultValue === void 0 ? '' : _ref$defaultValue,
-      _ref$formatter = _ref.formatter,
-      formatter = _ref$formatter === void 0 ? null : _ref$formatter,
-      rules = _ref.rules,
-      _ref$autoComplete = _ref.autoComplete,
-      autoComplete = _ref$autoComplete === void 0 ? [] : _ref$autoComplete,
-      _ref$autoFocus = _ref.autoFocus,
-      autoFocus = _ref$autoFocus === void 0 ? false : _ref$autoFocus,
-      _ref$shouldPreventUpp = _ref.shouldPreventUppercase,
-      shouldPreventUppercase = _ref$shouldPreventUpp === void 0 ? false : _ref$shouldPreventUpp;
+var TafFormTextField = function TafFormTextField(_ref2) {
+  var label = _ref2.label,
+      _ref2$disabled = _ref2.disabled,
+      disabled = _ref2$disabled === void 0 ? false : _ref2$disabled,
+      _ref2$name = _ref2.name,
+      name = _ref2$name === void 0 ? '' : _ref2$name,
+      _ref2$onChange = _ref2.onChange,
+      onChange = _ref2$onChange === void 0 ? function () {} : _ref2$onChange,
+      _ref2$onBlur = _ref2.onBlur,
+      onBlur = _ref2$onBlur === void 0 ? function () {} : _ref2$onBlur,
+      _ref2$defaultValue = _ref2.defaultValue,
+      defaultValue = _ref2$defaultValue === void 0 ? '' : _ref2$defaultValue,
+      _ref2$formatter = _ref2.formatter,
+      formatter = _ref2$formatter === void 0 ? null : _ref2$formatter,
+      rules = _ref2.rules,
+      _ref2$autoComplete = _ref2.autoComplete,
+      autoComplete = _ref2$autoComplete === void 0 ? [] : _ref2$autoComplete,
+      _ref2$autoFocus = _ref2.autoFocus,
+      autoFocus = _ref2$autoFocus === void 0 ? false : _ref2$autoFocus,
+      _ref2$shouldPreventUp = _ref2.shouldPreventUppercase,
+      shouldPreventUppercase = _ref2$shouldPreventUp === void 0 ? false : _ref2$shouldPreventUp;
 
   var _useFormContext = useFormContext(),
       control = _useFormContext.control,
@@ -3399,7 +3437,8 @@ var TafFormTextField = function TafFormTextField(_ref) {
 
       if (foundValue) {
         setValue(name, foundValue.value, {
-          shouldDirty: true
+          shouldDirty: true,
+          shouldValidate: true
         });
         setMaxLength(foundValue.value.length);
         event.preventDefault();
@@ -3435,9 +3474,15 @@ var TafFormTextField = function TafFormTextField(_ref) {
     onBlur();
   }, [onBlur, name, setValue, shouldPreventUppercase]);
   var hasError = !!fieldErrors;
-  return /*#__PURE__*/React__default.createElement(Controller, {
-    render: function render(_ref2) {
-      var field = _ref2.field;
+  return /*#__PURE__*/React__default.createElement(Grid, {
+    item: true,
+    sx: {
+      width: "".concat(100 / 13, "%"),
+      minWidth: 60
+    }
+  }, /*#__PURE__*/React__default.createElement(Controller, {
+    render: function render(_ref3) {
+      var field = _ref3.field;
       var displayValue = formatter ? formatter(field.value) : getDisplayValue(field.value, disabled);
       return /*#__PURE__*/React__default.createElement(BaseTextField, {
         label: label,
@@ -3454,7 +3499,8 @@ var TafFormTextField = function TafFormTextField(_ref) {
           return onBlurField(event, field.onBlur);
         },
         inputProps: {
-          maxLength: maxLength
+          maxLength: maxLength,
+          className: 'inputText'
         },
         autoFocus: autoFocus,
         shouldPreventUppercase: shouldPreventUppercase
@@ -3464,7 +3510,7 @@ var TafFormTextField = function TafFormTextField(_ref) {
     control: control,
     defaultValue: defaultValue,
     rules: rules
-  });
+  }));
 };
 
 /* *
@@ -3741,6 +3787,14 @@ var TafFormRow = /*#__PURE__*/React__default.forwardRef(function (_a, ref) {
       marginTop: '8px',
       backgroundColor: 'geowebColors.cards.cardContainer',
       position: 'relative',
+      paddingLeft: {
+        xs: '2px',
+        lg: '10px'
+      },
+      paddingRight: {
+        xs: '2px',
+        lg: '10px'
+      },
       '&.sortable-chosen': {
         boxShadow: 1
       },
@@ -3755,12 +3809,10 @@ var TafFormRow = /*#__PURE__*/React__default.forwardRef(function (_a, ref) {
   }, props, {
     className: "formRow"
   }), /*#__PURE__*/React__default.createElement(Grid, {
-    columns: 24,
     item: true,
     container: true,
     justifyContent: "flex-end",
-    xs: 24,
-    sm: 23
+    xs: true
   }, !isChangeGroup && /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(TafFormTextField, {
     label: "Type",
     name: fieldNames.messageType,
@@ -3777,9 +3829,11 @@ var TafFormRow = /*#__PURE__*/React__default.forwardRef(function (_a, ref) {
     shouldPreventUppercase: true
   })), isChangeGroup && /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Box, {
     sx: {
-      width: 56,
-      marginRight: '2px'
-    }
+      marginRight: '2px',
+      minWidth: 60
+    },
+    display: "flex",
+    justifyContent: "center"
   }, !disabled && dragHandle), /*#__PURE__*/React__default.createElement(TafFormTextField, {
     label: "Prob",
     name: fieldNames.probability,
@@ -4023,12 +4077,11 @@ var TafFormRow = /*#__PURE__*/React__default.forwardRef(function (_a, ref) {
     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.createElement(TafFormOptionsButton, {
     isChangeGroup: isChangeGroup,
     addChangeGroupBelow: addChangeGroupBelow,
@@ -5270,7 +5323,12 @@ var TacOverview = function TacOverview(_ref) {
   }))), /*#__PURE__*/React__default.createElement(Box, {
     ref: scrollRef,
     sx: {
-      padding: '10px',
+      padding: {
+        xs: '12px',
+        sm: '6px',
+        md: '16px',
+        lg: '24px'
+      },
       maxHeight: '100%',
       overflow: 'auto'
     }
@@ -6188,7 +6246,6 @@ var TafLayout = function TafLayout(_ref2) {
   }, /*#__PURE__*/React__default.createElement(Box, {
     sx: {
       minWidth: 320,
-      maxWidth: 1272,
       margin: 'auto',
       height: '100%',
       display: 'flex',
@@ -6397,7 +6454,7 @@ var TafModule = function TafModule() {
   }, []);
   usePoller([tafList, getTafListError], fetchNewTafList);
   var hasTafListError = getTafListError !== null;
-  return /*#__PURE__*/React.createElement(Box, {
+  return /*#__PURE__*/React.createElement(ResponsiveWrapper, null, /*#__PURE__*/React.createElement(Box, {
     component: "div",
     id: "tafmodule",
     sx: {
@@ -6422,7 +6479,7 @@ var TafModule = function TafModule() {
     tafList: tafList,
     onUpdateTaf: onUpdateTaf,
     lastUpdateTime: lastUpdateTime
-  }));
+  })));
 };
 
 var Wrapper = function Wrapper(props) {

package/index.umd.js

@@ -3134,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();
@@ -3267,18 +3268,45 @@
       }, shared.getInitials(editor))));
     };
 
+    /* *
+     * 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) {
-      return {
+      var _a;
+
+      return __assign(__assign({
         // input
-        marginRight: '2px',
         marginBottom: '4px',
-        width: 56,
+        width: '100%',
         height: 46,
         input: {
           textAlign: 'center',
           textTransform: shouldPreventUppercase ? 'none' : 'uppercase',
-          fontSize: 10,
-          fontWeight: 500,
+          fontWeight: 'normal',
           paddingLeft: 0,
           paddingRight: 0,
           '&.Mui-disabled': {
@@ -3317,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) {
@@ -3405,7 +3446,8 @@
 
           if (foundValue) {
             setValue(name, foundValue.value, {
-              shouldDirty: true
+              shouldDirty: true,
+              shouldValidate: true
             });
             setMaxLength(foundValue.value.length);
             event.preventDefault();
@@ -3441,7 +3483,13 @@
         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);
@@ -3460,7 +3508,8 @@
               return onBlurField(event, field.onBlur);
             },
             inputProps: {
-              maxLength: maxLength
+              maxLength: maxLength,
+              className: 'inputText'
             },
             autoFocus: autoFocus,
             shouldPreventUppercase: shouldPreventUppercase
@@ -3470,7 +3519,7 @@
         control: control,
         defaultValue: defaultValue,
         rules: rules
-      });
+      }));
     };
 
     /* *
@@ -3744,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
           },
@@ -3758,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,
@@ -3780,9 +3835,11 @@
         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,
@@ -4026,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,
@@ -5294,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'
         }
@@ -6215,7 +6276,6 @@
       }, /*#__PURE__*/React__default["default"].createElement(material.Box, {
         sx: {
           minWidth: 320,
-          maxWidth: 1272,
           margin: 'auto',
           height: '100%',
           display: 'flex',
@@ -6419,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: {
@@ -6444,7 +6504,7 @@
         tafList: tafList,
         onUpdateTaf: onUpdateTaf,
         lastUpdateTime: lastUpdateTime
-      }));
+      })));
     };
 
     var Wrapper = function Wrapper(props) {

package/lib/components/ResponsiveWrapper/ResponsiveWrapper.d.ts

@@ -0,0 +1,4 @@
+import * as React from 'react';
+import { BoxProps } from '@mui/material';
+export declare const TAF_MODULE_ID = "tafmodule";
+export declare const ResponsiveWrapper: React.FC<BoxProps>;

package/lib/components/ResponsiveWrapper/ResponsiveWrapper.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opengeoweb/taf",
-  "version": "4.13.0",
+  "version": "4.13.1",
   "description": "GeoWeb TAF library for the opengeoweb project",
   "license": "Apache-2.0",
   "repository": {
@@ -12,25 +12,25 @@
   "typings": "./index.d.ts",
   "dependencies": {},
   "peerDependencies": {
-    "@opengeoweb/api": "4.13.0",
+    "@opengeoweb/api": "4.13.1",
     "react": "^18.2.0",
     "axios": "^0.25.0",
-    "@opengeoweb/shared": "4.13.0",
+    "@opengeoweb/shared": "4.13.1",
     "@mui/material": "^5.10.8",
-    "@opengeoweb/theme": "4.13.0",
+    "@opengeoweb/theme": "4.13.1",
     "react-draggable": "^4.4.5",
     "re-resizable": "^6.9.0",
     "@redux-eggs/core": "^2.2.0",
     "react-redux": "^8.0.4",
-    "@opengeoweb/form-fields": "4.13.0",
+    "@opengeoweb/form-fields": "4.13.1",
     "react-hook-form": "^7.41.5",
     "moment": "^2.29.0",
     "moment-timezone": "^0.5.31",
     "@mui/x-date-pickers": "^5.0.4",
     "lodash": "^4.17.20",
     "date-fns": "^2.29.3",
-    "@opengeoweb/core": "4.13.0",
-    "@opengeoweb/webmap": "4.13.0",
+    "@opengeoweb/core": "4.13.1",
+    "@opengeoweb/webmap": "4.13.1",
     "throttle-debounce": "^3.0.1",
     "proj4": "^2.6.2",
     "react-intl": "^5.17.5",
@@ -46,7 +46,7 @@
     "@redux-eggs/redux-toolkit": "^2.2.0",
     "@redux-eggs/saga-extension": "^2.2.0",
     "react-dom": "^18.2.0",
-    "@opengeoweb/authentication": "4.13.0",
+    "@opengeoweb/authentication": "4.13.1",
     "react-router-dom": "^6.4.2",
     "query-string": "^6.13.7",
     "@emotion/react": "^11.10.4"