@opengeoweb/sigmet-airmet 4.4.0 → 4.6.0

package/index.esm.js

@@ -1,13 +1,13 @@
 import * as React from 'react';
 import React__default from 'react';
-import { FormControlLabel, Radio, Grid, Typography, Tooltip, Box, Button, Checkbox, MenuItem, FormHelperText, useTheme, Dialog, DialogTitle, DialogContent, Card, List, ListItem, Skeleton, Backdrop, CircularProgress } from '@mui/material';
+import { FormControlLabel, Radio, Grid, Typography, Box, Button, Checkbox, MenuItem, FormHelperText, useTheme, Dialog, DialogTitle, DialogContent, Card, List, ListItem, Skeleton, Backdrop, CircularProgress } from '@mui/material';
 import { useFormContext } from 'react-hook-form';
 import { ReactHookFormRadioGroup, ReactHookFormSelect, ReactHookFormNumberField, isInteger, isValidMax, isValidMin, isEmpty, ReactHookFormDateTime, isValidDate, isBefore, isBetween, hasMaxFeaturePoints, hasMulitpleIntersections, ReactHookFormHiddenInput, isMaximumOneDrawing, hasIntersectionWithFIR, isValidGeoJsonCoordinates, isXHoursBefore, isAfter, isXHoursAfter, ReactHookFormTextField, containsNoCommas, isLatitude, isNonOrBothCoordinates, isLongitude, errorMessages, ReactHookFormFormControl, isGeometryDirty, ReactHookFormProvider, defaultFormOptions } from '@opengeoweb/form-fields';
 import { useApiContext, useApi, createApiInstance } from '@opengeoweb/api';
 import produce, { produce as produce$1 } from 'immer';
 import * as turf from '@turf/turf';
 import { polygonToLineString, booleanClockwise, rewind } from '@turf/turf';
-import { useDraftFormHelpers, ToggleMenu, useIsMounted, StatusTag, AlertBanner, usePreventBrowserClose, useConfirmationDialog, isAxiosError, getAxiosErrorMessage, ConfirmationServiceProvider, usePoller } from '@opengeoweb/shared';
+import { useDraftFormHelpers, CustomTooltip, ToggleMenu, useIsMounted, IS_JEST, StatusTag, AlertBanner, usePreventBrowserClose, useConfirmationDialog, isAxiosError, getAxiosErrorMessage, ConfirmationServiceProvider, usePoller } from '@opengeoweb/shared';
 import { Location, DrawRegion, DrawPolygon, DrawFIRLand, Delete, ChevronLeft, Edit, Success, Clock } from '@opengeoweb/theme';
 import moment from 'moment';
 import { debounce } from 'lodash';
@@ -1117,7 +1117,7 @@ var DrawTools = function DrawTools(_ref) {
     spacing: 1
   }, /*#__PURE__*/React__default.createElement(Grid, {
     item: true
-  }, /*#__PURE__*/React__default.createElement(Tooltip, {
+  }, /*#__PURE__*/React__default.createElement(CustomTooltip, {
     title: "Drop a point as ".concat(type, " position")
   }, /*#__PURE__*/React__default.createElement(Radio, {
     icon: /*#__PURE__*/React__default.createElement(Location, null),
@@ -1131,7 +1131,7 @@ var DrawTools = function DrawTools(_ref) {
     sx: styles$1.radioInput
   }))), /*#__PURE__*/React__default.createElement(Grid, {
     item: true
-  }, /*#__PURE__*/React__default.createElement(Tooltip, {
+  }, /*#__PURE__*/React__default.createElement(CustomTooltip, {
     title: "Draw a box as ".concat(type, " position")
   }, /*#__PURE__*/React__default.createElement(Radio, {
     icon: /*#__PURE__*/React__default.createElement(DrawRegion, null),
@@ -1144,7 +1144,7 @@ var DrawTools = function DrawTools(_ref) {
     sx: styles$1.radioInput
   }))), /*#__PURE__*/React__default.createElement(Grid, {
     item: true
-  }, /*#__PURE__*/React__default.createElement(Tooltip, {
+  }, /*#__PURE__*/React__default.createElement(CustomTooltip, {
     title: "Draw a shape as ".concat(type, " position")
   }, /*#__PURE__*/React__default.createElement(Radio, {
     icon: /*#__PURE__*/React__default.createElement(DrawPolygon, null),
@@ -1157,7 +1157,7 @@ var DrawTools = function DrawTools(_ref) {
     sx: styles$1.radioInput
   }))), /*#__PURE__*/React__default.createElement(Grid, {
     item: true
-  }, /*#__PURE__*/React__default.createElement(Tooltip, {
+  }, /*#__PURE__*/React__default.createElement(CustomTooltip, {
     title: "Set FIR as ".concat(type, " position")
   }, /*#__PURE__*/React__default.createElement(Radio, {
     icon: /*#__PURE__*/React__default.createElement(DrawFIRLand, null),
@@ -1170,7 +1170,7 @@ var DrawTools = function DrawTools(_ref) {
     sx: styles$1.radioInput
   }))), /*#__PURE__*/React__default.createElement(Grid, {
     item: true
-  }, /*#__PURE__*/React__default.createElement(Tooltip, {
+  }, /*#__PURE__*/React__default.createElement(CustomTooltip, {
     title: "Remove geometry"
   }, /*#__PURE__*/React__default.createElement(Radio, {
     icon: /*#__PURE__*/React__default.createElement(Delete, null),
@@ -4604,8 +4604,7 @@ var ContentDialog = function ContentDialog(_a) {
 var styles = {
   activeStatus: {
     color: '#72bb23',
-    paddingLeft: '6px',
-    paddingTop: '2px'
+    paddingLeft: '6px'
   },
   font: {
     fontWeight: 'normal'
@@ -4745,36 +4744,67 @@ var ProductListRow = function ProductListRow(_ref2) {
     variant: "outlined",
     // eslint-disable-next-line @typescript-eslint/explicit-function-return-type
     sx: function sx(theme) {
-      return _defineProperty({
+      return Object.assign({
         width: '100%',
-        paddingLeft: 1,
-        paddingRight: 1,
-        paddingTop: 1.5,
-        paddingBottom: 1.5,
-        '&:last-child': {
-          paddingBottom: 1.5
-        }
-      }, theme.breakpoints.up('sm'), {
-        paddingLeft: 4,
-        paddingRight: 4,
-        paddingTop: 2,
-        paddingBottom: 2,
-        '&:last-child': {
-          paddingBottom: 2
+        '.wrapper-container': _defineProperty({
+          paddingLeft: 1,
+          paddingRight: 1,
+          paddingTop: 1.5,
+          paddingBottom: 1.5,
+          '&:last-child': {
+            paddingBottom: 1.5
+          }
+        }, theme.breakpoints.up('sm'), {
+          paddingLeft: 4,
+          paddingRight: 4,
+          paddingTop: 2,
+          paddingBottom: 2,
+          '&:last-child': {
+            paddingBottom: 2
+          }
+        })
+      }, !IS_JEST && {
+        '@container (max-width: 768px)': {
+          '.wrapper-container:not(.container-query-polyfill)': {
+            paddingLeft: 1,
+            paddingRight: 1,
+            paddingTop: 1.5,
+            paddingBottom: 1.5
+          },
+          '.col-1:not(.container-query-polyfill)': {
+            maxWidth: '25%',
+            flexBasis: '25%'
+          },
+          '.col-2:not(.container-query-polyfill)': {
+            maxWidth: '75%',
+            flexBasis: '75%'
+          },
+          '.col-3:not(.container-query-polyfill)': {
+            maxWidth: '100%',
+            flexBasis: '100%'
+          },
+          '.col-4:not(.container-query-polyfill)': {
+            maxWidth: '100%',
+            flexBasis: '100%',
+            justifyContent: 'center'
+          }
         }
       });
     }
+  }, /*#__PURE__*/React__default.createElement(Box, {
+    className: "wrapper-container"
   }, /*#__PURE__*/React__default.createElement(Grid, {
     container: true,
     alignItems: "center",
     spacing: 2
   }, /*#__PURE__*/React__default.createElement(Grid, {
+    className: "col-1",
     item: true,
     xs: 3,
     sm: 1
   }, phenomenon !== null && /*#__PURE__*/React__default.createElement(ProductListRowHeader, {
     title: productType.toUpperCase()
-  }), /*#__PURE__*/React__default.createElement(Tooltip, {
+  }), /*#__PURE__*/React__default.createElement(CustomTooltip, {
     title: phenomenon !== null ? getPhenomenon(productType, phenomenon) : '',
     placement: "bottom-start"
   }, /*#__PURE__*/React__default.createElement(Typography, {
@@ -4782,12 +4812,13 @@ var ProductListRow = function ProductListRow(_ref2) {
     noWrap: true,
     sx: styles.font
   }, phenomenon !== null ? phenomenon : 'Cancel'))), /*#__PURE__*/React__default.createElement(Grid, {
+    className: "col-2",
     item: true,
     xs: 9,
     sm: 3
   }, /*#__PURE__*/React__default.createElement(ProductListRowHeader, {
     title: "Issue time"
-  }), /*#__PURE__*/React__default.createElement(Tooltip, {
+  }), /*#__PURE__*/React__default.createElement(CustomTooltip, {
     title: /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(ProductListRowHeader, {
       title: "TAC"
     }), /*#__PURE__*/React__default.createElement(Typography, {
@@ -4822,9 +4853,10 @@ var ProductListRow = function ProductListRow(_ref2) {
     sx: styles.font,
     "data-testid": "issueTime"
   }, product.issueDate ? "".concat(moment.utc(product.issueDate).format('DD MMM YYYY, HH:mm'), " UTC") : '(Not published)'))), /*#__PURE__*/React__default.createElement(Grid, {
+    className: "col-3",
     item: true,
     xs: 12,
-    sm: 6
+    sm: 5
   }, /*#__PURE__*/React__default.createElement(ProductListRowHeader, {
     title: "Valid time"
   }), /*#__PURE__*/React__default.createElement(Typography, {
@@ -4833,10 +4865,12 @@ var ProductListRow = function ProductListRow(_ref2) {
     "data-testid": "validTime"
   }, validTime)), /*#__PURE__*/React__default.createElement(Grid, {
     item: true,
+    className: "col-4",
     xs: 12,
-    sm: 2,
+    sm: 3,
     container: true,
     justifyContent: "center",
+    alignItems: "center",
     // eslint-disable-next-line @typescript-eslint/explicit-function-return-type
     sx: function sx(theme) {
       return _defineProperty({}, theme.breakpoints.up('sm'), {
@@ -4855,7 +4889,7 @@ var ProductListRow = function ProductListRow(_ref2) {
     },
     variant: "flat",
     startIcon: /*#__PURE__*/React__default.createElement(Edit, null)
-  }, "DRAFT") : getStatusTagList(product, cancelsSeqId), product.status === 'PUBLISHED' && cancelsSeqId === null && getActiveStatus(product))));
+  }, "DRAFT") : getStatusTagList(product, cancelsSeqId), product.status === 'PUBLISHED' && cancelsSeqId === null && getActiveStatus(product)))));
 };
 
 /* *
@@ -4910,7 +4944,8 @@ var ProductList = function ProductList(_ref) {
     dataTestId: "productList-alert"
   }), productList && /*#__PURE__*/React__default.createElement(List, {
     sx: {
-      paddingTop: 4
+      paddingTop: 4,
+      containerType: 'inline-size'
     }
   }, productList.map(function (productListItem, index) {
     var product = productListItem[productType];
@@ -4922,7 +4957,7 @@ var ProductList = function ProductList(_ref) {
       },
       key: product.sequence && product.issueDate ? "".concat(product.sequence, "-").concat(product.issueDate) : "draft-".concat(index),
       sx: {
-        padding: '2px'
+        padding: 0.25
       }
     }, /*#__PURE__*/React__default.createElement(ProductListRow, {
       product: product,

package/index.umd.js

@@ -1088,7 +1088,7 @@
         spacing: 1
       }, /*#__PURE__*/React__default["default"].createElement(material.Grid, {
         item: true
-      }, /*#__PURE__*/React__default["default"].createElement(material.Tooltip, {
+      }, /*#__PURE__*/React__default["default"].createElement(shared.CustomTooltip, {
         title: "Drop a point as " + type + " position"
       }, /*#__PURE__*/React__default["default"].createElement(material.Radio, {
         icon: /*#__PURE__*/React__default["default"].createElement(theme.Location, null),
@@ -1102,7 +1102,7 @@
         sx: styles$1.radioInput
       }))), /*#__PURE__*/React__default["default"].createElement(material.Grid, {
         item: true
-      }, /*#__PURE__*/React__default["default"].createElement(material.Tooltip, {
+      }, /*#__PURE__*/React__default["default"].createElement(shared.CustomTooltip, {
         title: "Draw a box as " + type + " position"
       }, /*#__PURE__*/React__default["default"].createElement(material.Radio, {
         icon: /*#__PURE__*/React__default["default"].createElement(theme.DrawRegion, null),
@@ -1115,7 +1115,7 @@
         sx: styles$1.radioInput
       }))), /*#__PURE__*/React__default["default"].createElement(material.Grid, {
         item: true
-      }, /*#__PURE__*/React__default["default"].createElement(material.Tooltip, {
+      }, /*#__PURE__*/React__default["default"].createElement(shared.CustomTooltip, {
         title: "Draw a shape as " + type + " position"
       }, /*#__PURE__*/React__default["default"].createElement(material.Radio, {
         icon: /*#__PURE__*/React__default["default"].createElement(theme.DrawPolygon, null),
@@ -1128,7 +1128,7 @@
         sx: styles$1.radioInput
       }))), /*#__PURE__*/React__default["default"].createElement(material.Grid, {
         item: true
-      }, /*#__PURE__*/React__default["default"].createElement(material.Tooltip, {
+      }, /*#__PURE__*/React__default["default"].createElement(shared.CustomTooltip, {
         title: "Set FIR as " + type + " position"
       }, /*#__PURE__*/React__default["default"].createElement(material.Radio, {
         icon: /*#__PURE__*/React__default["default"].createElement(theme.DrawFIRLand, null),
@@ -1141,7 +1141,7 @@
         sx: styles$1.radioInput
       }))), /*#__PURE__*/React__default["default"].createElement(material.Grid, {
         item: true
-      }, /*#__PURE__*/React__default["default"].createElement(material.Tooltip, {
+      }, /*#__PURE__*/React__default["default"].createElement(shared.CustomTooltip, {
         title: "Remove geometry"
       }, /*#__PURE__*/React__default["default"].createElement(material.Radio, {
         icon: /*#__PURE__*/React__default["default"].createElement(theme.Delete, null),
@@ -4488,11 +4488,26 @@
       }, children));
     };
 
+    /* *
+     * Licensed under the Apache License, Version 2.0 (the "License");
+     * you may not use this file except in compliance with the License.
+     * You may obtain a copy of the License at
+     *
+     *     http://www.apache.org/licenses/LICENSE-2.0
+     *
+     * Unless required by applicable law or agreed to in writing, software
+     * distributed under the License is distributed on an "AS IS" BASIS,
+     * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+     * See the License for the specific language governing permissions and
+     * limitations under the License.
+     *
+     * Copyright 2022 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+     * Copyright 2022 - Finnish Meteorological Institute (FMI)
+     * */
     var styles = {
       activeStatus: {
         color: '#72bb23',
-        paddingLeft: '6px',
-        paddingTop: '2px'
+        paddingLeft: '6px'
       },
       font: {
         fontWeight: 'normal'
@@ -4631,36 +4646,67 @@
         sx: function sx(theme) {
           var _a;
 
-          return _a = {
+          return __assign({
             width: '100%',
-            paddingLeft: 1,
-            paddingRight: 1,
-            paddingTop: 1.5,
-            paddingBottom: 1.5,
-            '&:last-child': {
-              paddingBottom: 1.5
-            }
-          }, _a[theme.breakpoints.up('sm')] = {
-            paddingLeft: 4,
-            paddingRight: 4,
-            paddingTop: 2,
-            paddingBottom: 2,
-            '&:last-child': {
-              paddingBottom: 2
+            '.wrapper-container': (_a = {
+              paddingLeft: 1,
+              paddingRight: 1,
+              paddingTop: 1.5,
+              paddingBottom: 1.5,
+              '&:last-child': {
+                paddingBottom: 1.5
+              }
+            }, _a[theme.breakpoints.up('sm')] = {
+              paddingLeft: 4,
+              paddingRight: 4,
+              paddingTop: 2,
+              paddingBottom: 2,
+              '&:last-child': {
+                paddingBottom: 2
+              }
+            }, _a)
+          }, !shared.IS_JEST && {
+            '@container (max-width: 768px)': {
+              '.wrapper-container:not(.container-query-polyfill)': {
+                paddingLeft: 1,
+                paddingRight: 1,
+                paddingTop: 1.5,
+                paddingBottom: 1.5
+              },
+              '.col-1:not(.container-query-polyfill)': {
+                maxWidth: '25%',
+                flexBasis: '25%'
+              },
+              '.col-2:not(.container-query-polyfill)': {
+                maxWidth: '75%',
+                flexBasis: '75%'
+              },
+              '.col-3:not(.container-query-polyfill)': {
+                maxWidth: '100%',
+                flexBasis: '100%'
+              },
+              '.col-4:not(.container-query-polyfill)': {
+                maxWidth: '100%',
+                flexBasis: '100%',
+                justifyContent: 'center'
+              }
             }
-          }, _a;
+          });
         }
+      }, /*#__PURE__*/React__default["default"].createElement(material.Box, {
+        className: "wrapper-container"
       }, /*#__PURE__*/React__default["default"].createElement(material.Grid, {
         container: true,
         alignItems: "center",
         spacing: 2
       }, /*#__PURE__*/React__default["default"].createElement(material.Grid, {
+        className: "col-1",
         item: true,
         xs: 3,
         sm: 1
       }, phenomenon !== null && /*#__PURE__*/React__default["default"].createElement(ProductListRowHeader, {
         title: productType.toUpperCase()
-      }), /*#__PURE__*/React__default["default"].createElement(material.Tooltip, {
+      }), /*#__PURE__*/React__default["default"].createElement(shared.CustomTooltip, {
         title: phenomenon !== null ? getPhenomenon(productType, phenomenon) : '',
         placement: "bottom-start"
       }, /*#__PURE__*/React__default["default"].createElement(material.Typography, {
@@ -4668,12 +4714,13 @@
         noWrap: true,
         sx: styles.font
       }, phenomenon !== null ? phenomenon : 'Cancel'))), /*#__PURE__*/React__default["default"].createElement(material.Grid, {
+        className: "col-2",
         item: true,
         xs: 9,
         sm: 3
       }, /*#__PURE__*/React__default["default"].createElement(ProductListRowHeader, {
         title: "Issue time"
-      }), /*#__PURE__*/React__default["default"].createElement(material.Tooltip, {
+      }), /*#__PURE__*/React__default["default"].createElement(shared.CustomTooltip, {
         title: /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(ProductListRowHeader, {
           title: "TAC"
         }), /*#__PURE__*/React__default["default"].createElement(material.Typography, {
@@ -4708,9 +4755,10 @@
         sx: styles.font,
         "data-testid": "issueTime"
       }, product.issueDate ? moment__default["default"].utc(product.issueDate).format('DD MMM YYYY, HH:mm') + " UTC" : '(Not published)'))), /*#__PURE__*/React__default["default"].createElement(material.Grid, {
+        className: "col-3",
         item: true,
         xs: 12,
-        sm: 6
+        sm: 5
       }, /*#__PURE__*/React__default["default"].createElement(ProductListRowHeader, {
         title: "Valid time"
       }), /*#__PURE__*/React__default["default"].createElement(material.Typography, {
@@ -4719,10 +4767,12 @@
         "data-testid": "validTime"
       }, validTime)), /*#__PURE__*/React__default["default"].createElement(material.Grid, {
         item: true,
+        className: "col-4",
         xs: 12,
-        sm: 2,
+        sm: 3,
         container: true,
         justifyContent: "center",
+        alignItems: "center",
         // eslint-disable-next-line @typescript-eslint/explicit-function-return-type
         sx: function sx(theme) {
           var _a;
@@ -4743,7 +4793,7 @@
         },
         variant: "flat",
         startIcon: /*#__PURE__*/React__default["default"].createElement(theme.Edit, null)
-      }, "DRAFT") : getStatusTagList(product, cancelsSeqId), product.status === 'PUBLISHED' && cancelsSeqId === null && getActiveStatus(product))));
+      }, "DRAFT") : getStatusTagList(product, cancelsSeqId), product.status === 'PUBLISHED' && cancelsSeqId === null && getActiveStatus(product)))));
     };
 
     /* *
@@ -4798,7 +4848,8 @@
         dataTestId: "productList-alert"
       }), productList && /*#__PURE__*/React__default["default"].createElement(material.List, {
         sx: {
-          paddingTop: 4
+          paddingTop: 4,
+          containerType: 'inline-size'
         }
       }, productList.map(function (productListItem, index) {
         var product = productListItem[productType];
@@ -4810,7 +4861,7 @@
           },
           key: product.sequence && product.issueDate ? product.sequence + "-" + product.issueDate : "draft-" + index,
           sx: {
-            padding: '2px'
+            padding: 0.25
           }
         }, /*#__PURE__*/React__default["default"].createElement(ProductListRow, {
           product: product,

package/lib/components/ProductList/ProductList.stories.d.ts

@@ -24,6 +24,7 @@ export declare const SigmetListDemoSnapshotDarkTheme: {
         }[];
     };
 };
+export declare const SigmetListDemoSnapshotSmall: () => React.ReactElement;
 export declare const AirmetListDemo: () => React.ReactElement;
 export declare const AirmetListDemoSnapshot: {
     (): React.ReactElement;
@@ -45,3 +46,4 @@ export declare const AirmetListDemoSnapshotDarkTheme: {
         }[];
     };
 };
+export declare const AirmetListDemoSnapshotSmall: () => React.ReactElement;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opengeoweb/sigmet-airmet",
-  "version": "4.4.0",
+  "version": "4.6.0",
   "description": "GeoWeb Sigmet/Airmet library for the opengeoweb project",
   "license": "Apache-2.0",
   "repository": {
@@ -14,21 +14,21 @@
     "react": "^17.0.2",
     "react-redux": "^8.0.4",
     "@mui/material": "^5.10.8",
-    "@opengeoweb/shared": "4.4.0",
-    "@opengeoweb/theme": "4.4.0",
+    "@opengeoweb/shared": "4.6.0",
+    "@opengeoweb/theme": "4.6.0",
     "react-draggable": "^4.4.5",
     "re-resizable": "^6.9.0",
     "@redux-eggs/core": "^2.2.0",
-    "@opengeoweb/form-fields": "4.4.0",
+    "@opengeoweb/form-fields": "4.6.0",
     "react-hook-form": "^6.12.1",
     "moment": "^2.29.0",
     "moment-timezone": "^0.5.31",
     "@mui/x-date-pickers": "^5.0.4",
     "lodash": "^4.17.20",
     "axios": "^0.25.0",
-    "@opengeoweb/core": "4.4.0",
+    "@opengeoweb/core": "4.6.0",
     "react-intl": "^5.17.5",
-    "@opengeoweb/webmap": "4.4.0",
+    "@opengeoweb/webmap": "4.6.0",
     "throttle-debounce": "^3.0.1",
     "proj4": "^2.6.2",
     "react-sortablejs": "^6.1.4",
@@ -42,7 +42,7 @@
     "redux-saga": "^1.2.1",
     "@redux-eggs/redux-toolkit": "^2.2.0",
     "@redux-eggs/saga-extension": "^2.2.0",
-    "@opengeoweb/api": "4.4.0"
+    "@opengeoweb/api": "4.6.0"
   },
   "peerDependencies": {}
 }