@opengeoweb/warnings 9.25.2 → 9.26.0

package/index.esm.js

@@ -1,18 +1,18 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { useDispatch, useSelector } from 'react-redux';
-import { Polygons, Share, ExitDomain, Edit, Delete, DrawPolygon, Visibility, Add, Wind, Fog, Lightning, Snow, Rain, TemperatureHigh, TemperatureLow, CoastalEvent, breakpoints, Close, Options, Copy, Success, Expire, Remove } from '@opengeoweb/theme';
+import { Polygons, Share, ExitDomain, Edit, Delete, CoastalEvent, TemperatureLow, TemperatureHigh, Rain, Snow, Lightning, Fog, Wind, DrawPolygon, Visibility, Add, breakpoints, Close, Options, Copy, Success, Expire, Remove } from '@opengeoweb/theme';
 import { uiTypes, uiActions, getSingularDrawtoolDrawLayerId, drawtoolSelectors, layerSelectors, uiSelectors, mapStoreActions, drawtoolActions, layerActions, useSetupDialog } from '@opengeoweb/store';
 import { defaultPolygon, emptyGeoJSON, MapControlButton, getIcon, rewindGeometry, getGeoJSONPropertyValue, currentlySupportedDrawModes, MapView, MapViewLayer, defaultLayers, getFeatureExtent } from '@opengeoweb/webmap-react';
-import { SHARED_NAMESPACE, useConfirmationDialog, ToggleMenu, dateUtils, calculateStartSize, ToolContainerDraggable, AlertBanner, ConfirmationDialog, getAxiosErrorMessage, usePrevious, CustomIconButton, CustomTooltip, Avatar, getInitials, SwitchButton, CustomToggleButton, Filter, getPosition, FilterChip, FilterListItem, LastUpdateTime, StatusTag, ErrorBoundary, pollingIntervalTimeout, isAxiosError as isAxiosError$1 } from '@opengeoweb/shared';
+import { SHARED_NAMESPACE, useConfirmationDialog, ToggleMenu, dateUtils, calculateStartSize, ToolContainerDraggable, AlertBanner, ConfirmationDialog, getAxiosErrorMessage, usePrevious, CustomIconButton, CustomTooltip, Avatar, getInitials, SwitchButton, CustomToggleButton, Filter, getPosition, FilterChip, FilterListItem, FilterLabel, LastUpdateTime, StatusTag, ErrorBoundary, pollingIntervalTimeout, isAxiosError as isAxiosError$1 } from '@opengeoweb/shared';
 import { createEntityAdapter, createSlice, createSelector, createListenerMiddleware, isAnyOf } from '@reduxjs/toolkit';
 import i18n from 'i18next';
 import { useTranslation } from 'react-i18next';
 import '@opengeoweb/core';
-import { FORM_FIELDS_NAMESPACE, ReactHookFormHiddenInput, isValidGeoJsonCoordinates, ReactHookFormSelect, ReactHookFormTextField, ReactHookFormProvider, defaultFormOptions, useDraftFormHelpers, errorMessages, ReactHookFormDateTime, isXHoursBefore, isXHoursAfter, isEmpty } from '@opengeoweb/form-fields';
+import { FORM_FIELDS_NAMESPACE, useDraftFormHelpers, ReactHookFormSelect, ReactHookFormHiddenInput, isValidGeoJsonCoordinates, ReactHookFormTextField, ReactHookFormProvider, defaultFormOptions, errorMessages, ReactHookFormDateTime, isXHoursBefore, isXHoursAfter, isEmpty } from '@opengeoweb/form-fields';
 import { snackbarActions } from '@opengeoweb/snackbar';
 import * as React from 'react';
 import React__default, { useState, useEffect, useRef } from 'react';
-import { styled, Box, Typography, ListItem, Grid, Paper, ListItemButton, Stack, LinearProgress, Button, FormHelperText, MenuItem, Tabs, Tab, Card, CardContent, ListItemIcon, CircularProgress, Menu, DialogTitle, DialogContent, Switch, List } from '@mui/material';
+import { styled, Box, Typography, ListItem, Grid, Paper, ListItemButton, Stack, LinearProgress, Button, MenuItem, ListItemIcon, FormHelperText, Tabs, Tab, Card, CardContent, CircularProgress, Menu, DialogTitle, DialogContent, Switch, List } from '@mui/material';
 import { VariableSizeList } from 'react-window';
 import AutoSizer from 'react-virtualized-auto-sizer';
 import { getApi, createApiInstance, createNonAuthApiInstance, createFakeApiInstance, ApiProvider } from '@opengeoweb/api';
@@ -1652,6 +1652,7 @@ typeof SuppressedError === "function" ? SuppressedError : function (error, suppr
  *
  * Copyright 2023 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
  * Copyright 2023 - Finnish Meteorological Institute (FMI)
+ * Copyright 2024 - The Norwegian Meteorological Institute (MET Norway)
  * */
 const objectDialogType = uiTypes.DialogTypes.ObjectManager;
 const drawingDialogType = uiTypes.DialogTypes.DrawingTool;
@@ -1672,6 +1673,7 @@ const areaObjectLoaderType = uiTypes.DialogTypes.AreaObjectLoader;
  *
  * Copyright 2023 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
  * Copyright 2023 - Finnish Meteorological Institute (FMI)
+ * Copyright 2024 - The Norwegian Meteorological Institute (MET Norway)
  * */
 const drawAdapter = createEntityAdapter({
   selectId: draw => draw.drawingInstanceId
@@ -1768,6 +1770,7 @@ const drawActions = slice$2.actions;
  *
  * Copyright 2023 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
  * Copyright 2023 - Finnish Meteorological Institute (FMI)
+ * Copyright 2024 - The Norwegian Meteorological Institute (MET Norway)
  * */
 const {
   selectById: selectDrawByInstanceId
@@ -1802,6 +1805,7 @@ const useWarningsTranslation = () => useTranslation(ns);
  *
  * Copyright 2023 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
  * Copyright 2023 - Finnish Meteorological Institute (FMI)
+ * Copyright 2024 - The Norwegian Meteorological Institute (MET Norway)
  * */
 const confirmationDialogOptions = t => {
   return {
@@ -2741,6 +2745,7 @@ $$g({ target: 'Array', proto: true, arity: 1, forced: FORCED$4 }, {
  *
  * Copyright 2023 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
  * Copyright 2023 - Finnish Meteorological Institute (FMI)
+ * Copyright 2024 - The Norwegian Meteorological Institute (MET Norway)
  * */
 const DATE_FORMAT_HEADER = 'EEEE, MMMM dd';
 
@@ -3155,6 +3160,7 @@ const ObjectManager = ({
  *
  * Copyright 2023 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
  * Copyright 2023 - Finnish Meteorological Institute (FMI)
+ * Copyright 2024 - The Norwegian Meteorological Institute (MET Norway)
  * */
 const API_NAME = 'warnings';
 const getIdFromUrl = url => {
@@ -3286,6 +3292,7 @@ const ConfirmDeleteDialog = ({
  *
  * Copyright 2023 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
  * Copyright 2023 - Finnish Meteorological Institute (FMI)
+ * Copyright 2024 - The Norwegian Meteorological Institute (MET Norway)
  * */
 const publicWarningDialogType = uiTypes.DialogTypes.PublicWarnings;
 
@@ -3676,27 +3683,218 @@ $$c({ target: 'Array', proto: true, forced: FORCED$2 }, {
   }
 });
 
-/* *
- * 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 2024 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
- * Copyright 2024 - Finnish Meteorological Institute (FMI)
- * */
+const getWarningPhenomenaIcon = key => {
+  switch (key) {
+    case 'wind':
+      return jsx(Wind, {});
+    case 'fog':
+      return jsx(Fog, {});
+    case 'thunderstorm':
+      return jsx(Lightning, {});
+    case 'snowIce':
+      return jsx(Snow, {});
+    case 'rain':
+      return jsx(Rain, {});
+    case 'highTemp':
+      return jsx(TemperatureHigh, {});
+    case 'lowTemp':
+      return jsx(TemperatureLow, {});
+    case 'coastalEvent':
+      return jsx(CoastalEvent, {});
+    default:
+      return undefined;
+  }
+};
+const warningPhenomena = [{
+  translationKey: 'warning-phenomenon-wind',
+  key: 'wind'
+}, {
+  translationKey: 'warning-phenomenon-fog',
+  key: 'fog'
+}, {
+  translationKey: 'warning-phenomenon-thunderstorm',
+  key: 'thunderstorm'
+}, {
+  translationKey: 'warning-phenomenon-snow-ice',
+  key: 'snowIce'
+}, {
+  translationKey: 'warning-phenomenon-rain',
+  key: 'rain'
+}, {
+  translationKey: 'warning-phenomenon-high-temp',
+  key: 'highTemp'
+},
+// {
+//   title: 'warning-phenomenon-funnel-cloud',
+//   key: 'funnelCloud',
+// },
+{
+  translationKey: 'warning-phenomenon-low-temp',
+  key: 'lowTemp'
+}, {
+  translationKey: 'warning-phenomenon-coastal-event',
+  key: 'coastalEvent'
+}];
+const Phenomenon = ({
+  isDisabled,
+  isReadOnly
+}) => {
+  const {
+    t
+  } = useWarningsTranslation();
+  const {
+    isRequired
+  } = useDraftFormHelpers();
+  return jsx(ReactHookFormSelect, Object.assign({
+    name: "phenomenon",
+    label: t('warning-phenomenon'),
+    rules: {
+      validate: {
+        isRequired
+      }
+    },
+    disabled: isDisabled || isReadOnly,
+    isReadOnly: isReadOnly
+  }, {
+    children: warningPhenomena.map(phenomenon => {
+      return jsx(MenuItem, Object.assign({
+        value: phenomenon.key
+      }, {
+        children: jsxs(Grid, Object.assign({
+          container: true,
+          justifyContent: "space-between"
+        }, {
+          children: [jsx(Grid, Object.assign({
+            item: true
+          }, {
+            children: t(phenomenon.translationKey)
+          })), jsx(Grid, Object.assign({
+            item: true
+          }, {
+            children: jsx(ListItemIcon, {
+              children: getWarningPhenomenaIcon(phenomenon.key)
+            })
+          }))]
+        }))
+      }), phenomenon.key);
+    })
+  }));
+};
+
+var WarningLevel;
+(function (WarningLevel) {
+  WarningLevel["moderate"] = "moderate";
+  WarningLevel["severe"] = "severe";
+  WarningLevel["extreme"] = "extreme";
+})(WarningLevel || (WarningLevel = {}));
+const LevelColors = {
+  moderate: {
+    color: '#FAE21E',
+    textColor: '#051039'
+  },
+  severe: {
+    color: '#E27000',
+    textColor: '#051039'
+  },
+  extreme: {
+    color: '#D62A20',
+    textColor: '#ffffff'
+  }
+};
+const getLevelStyle = levelColor => ({
+  color: levelColor && levelColor.textColor,
+  backgroundColor: levelColor && levelColor.color,
+  paddingLeft: 0.5,
+  paddingRight: 0.5,
+  paddingBottom: '1px',
+  marginLeft: -0.5
+});
+const levelOptions = [Object.assign({
+  translationKey: 'warning-level-moderate',
+  key: WarningLevel.moderate
+}, LevelColors[WarningLevel.moderate]), Object.assign({
+  translationKey: 'warning-level-severe',
+  key: WarningLevel.severe
+}, LevelColors[WarningLevel.severe]), Object.assign({
+  translationKey: 'warning-level-extreme',
+  key: WarningLevel.extreme
+}, LevelColors[WarningLevel.extreme])];
+const LevelField = ({
+  isDisabled: _isDisabled = false,
+  isReadOnly: _isReadOnly = false
+}) => {
+  const {
+    t
+  } = useWarningsTranslation();
+  const {
+    isRequired
+  } = useDraftFormHelpers();
+  const {
+    watch,
+    trigger
+  } = useFormContext();
+  const selectedLevel = watch('level');
+  const levelDetails = levelOptions.find(level => level.key === selectedLevel);
+  const onChangeLevel = () => {
+    trigger(['level', 'probability']);
+  };
+  return jsx(ReactHookFormSelect, Object.assign({
+    name: "level",
+    label: t('warning-level'),
+    rules: {
+      validate: {
+        isRequired
+      }
+    },
+    sx: {
+      '& .MuiSelect-select.MuiSelect-filled': {
+        color: (levelDetails === null || levelDetails === void 0 ? void 0 : levelDetails.textColor) || 'none',
+        backgroundColor: (levelDetails === null || levelDetails === void 0 ? void 0 : levelDetails.color) || 'none',
+        backgroundClip: 'content-box'
+      }
+    },
+    disabled: _isDisabled || _isReadOnly,
+    isReadOnly: _isReadOnly,
+    onChange: onChangeLevel
+  }, {
+    children: levelOptions.map(level => jsxs(MenuItem, Object.assign({
+      value: level.key,
+      sx: {
+        '&.MuiMenuItem-root ': {
+          color: level.textColor,
+          background: level.color,
+          backgroundClip: 'content-box',
+          padding: '12px 8px',
+          '&:hover': {
+            backgroundColor: `${level.color}`,
+            backgroundClip: 'content-box',
+            boxShadow: theme => `inset -8px -12px ${theme.palette.geowebColors.cards.cardContainerMouseOver}, inset 8px 12px ${theme.palette.geowebColors.cards.cardContainerMouseOver}`
+          },
+          '&.Mui-selected': {
+            backgroundColor: `${level.color}`,
+            '&:hover': {
+              boxShadow: theme => `inset 4px 0px 0px 0px ${theme.palette.geowebColors.typographyAndIcons.iconLinkActive}, inset -8px -12px ${theme.palette.geowebColors.cards.cardContainerMouseOver}, inset 8px 12px ${theme.palette.geowebColors.cards.cardContainerMouseOver}`
+            }
+          }
+        }
+      }
+    }, {
+      children: ["\u00A0", t(level.translationKey)]
+    }), level.key))
+  }));
+};
+
 const emptyFilter = {
   id: 'empty',
   name: '(not specified)',
   checked: true
 };
+const getFilterlistWithTranslationKeys = filterList => filterList.reduce((fiterList, {
+  key,
+  translationKey
+}) => Object.assign(Object.assign({}, fiterList), {
+  [key]: translationKey
+}), {});
 const defaultFilters = [{
   key: 'incident',
   translationKey: 'filter-incident'
@@ -3705,10 +3903,12 @@ const defaultFilters = [{
   translationKey: 'filter-domain'
 }, {
   key: 'phenomenon',
-  translationKey: 'filter-phenomenon'
+  translationKey: 'filter-phenomenon',
+  translations: getFilterlistWithTranslationKeys(warningPhenomena)
 }, {
   key: 'level',
-  translationKey: 'filter-level'
+  translationKey: 'filter-level',
+  translations: getFilterlistWithTranslationKeys(levelOptions)
 }, {
   key: 'warningProposalSource',
   translationKey: 'filter-source'
@@ -3729,15 +3929,18 @@ const getFiltersFromWarnings = warnings => {
   }
   const filledFilters = defaultFilters.map(({
     key,
-    translationKey
+    translationKey,
+    translations
   }) => {
     const filterOptions = [];
     warnings.forEach(warning => {
-      const name = warning.warningDetail[key];
-      if (name && filterOptions.findIndex(option => option.filter.name === name) === -1) {
+      const id = warning.warningDetail[key];
+      if (id && filterOptions.findIndex(option => option.filter.id === id) === -1) {
+        const translationKey = translations && translations[id];
+        const label = translationKey ? translateKeyOutsideComponents(translationKey) : id;
         const filter = {
-          id: name,
-          name,
+          id,
+          name: label,
           checked: true
         };
         filterOptions.push({
@@ -3916,6 +4119,7 @@ const publicWarningActions = slice$1.actions;
  *
  * Copyright 2023 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
  * Copyright 2023 - Finnish Meteorological Institute (FMI)
+ * Copyright 2024 - The Norwegian Meteorological Institute (MET Norway)
  * */
 const TAKEOVER_MESSAGE = 'You are no longer the editor of this warning';
 const initialState = {};
@@ -8217,7 +8421,7 @@ var warningListJSON = [
 			phenomenon: "wind",
 			areas: [
 				{
-					objectName: "test name",
+					objectName: "wind test name",
 					geoJSON: {
 						type: "FeatureCollection",
 						features: [
@@ -8321,7 +8525,7 @@ var warningListJSON = [
 			phenomenon: "highTemp",
 			areas: [
 				{
-					objectName: "test name",
+					objectName: "high temp test name",
 					geoJSON: {
 						type: "FeatureCollection",
 						features: [
@@ -9471,6 +9675,7 @@ var warningListJSON = [
  *
  * Copyright 2023 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
  * Copyright 2023 - Finnish Meteorological Institute (FMI)
+ * Copyright 2024 - The Norwegian Meteorological Institute (MET Norway)
  * */
 const drawingList = drawingListJSON;
 const drawingsListFullContent = drawingsListFullContentJSON;
@@ -9766,6 +9971,7 @@ $$8({ global: true, forced: parseInt !== $parseInt }, {
  *
  * Copyright 2023 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
  * Copyright 2023 - Finnish Meteorological Institute (FMI)
+ * Copyright 2024 - The Norwegian Meteorological Institute (MET Norway)
  * */
 const useFormDirty = ({
   isDirty,
@@ -10474,6 +10680,28 @@ const DescriptionField = ({
       setActiveTab(1);
     }
   }, [formState.errors, formState.submitCount]);
+  const focusForwards = fieldName => {
+    if (fieldName === 'descriptionOriginal') {
+      setActiveTab(1);
+    }
+  };
+  const focusBackwards = fieldName => {
+    if (fieldName === 'descriptionTranslation') {
+      setActiveTab(0);
+    }
+  };
+  const onKeyDown = event => {
+    const target = event.target;
+    const {
+      name
+    } = target;
+    event.stopPropagation();
+    if (event.code === 'Tab' && event.shiftKey) {
+      focusBackwards(name);
+    } else if (event.code === 'Tab') {
+      focusForwards(name);
+    }
+  };
   return jsxs(Fragment, {
     children: [jsxs(Tabs, Object.assign({
       value: activeTab,
@@ -10490,11 +10718,13 @@ const DescriptionField = ({
       children: [jsx(Tab, Object.assign({
         sx: tabStyle,
         label: t('warning-description-original'),
-        disabled: _isDisabled
+        disabled: _isDisabled,
+        tabIndex: -1
       }, a11yProps(0))), jsx(Tab, Object.assign({
         sx: tabStyle,
         label: t('warning-description-translation'),
-        disabled: _isDisabled
+        disabled: _isDisabled,
+        tabIndex: -1
       }, a11yProps(1)))]
     })), jsx(CustomTabPanel, Object.assign({
       value: activeTab,
@@ -10511,7 +10741,7 @@ const DescriptionField = ({
         multiline: true,
         disabled: _isDisabled,
         isReadOnly: _isReadOnly,
-        onKeyDown: event => event.stopPropagation()
+        onKeyDown: onKeyDown
       })
     })), jsx(CustomTabPanel, Object.assign({
       value: activeTab,
@@ -10528,7 +10758,7 @@ const DescriptionField = ({
         multiline: true,
         disabled: _isDisabled,
         isReadOnly: _isReadOnly,
-        onKeyDown: event => event.stopPropagation()
+        onKeyDown: onKeyDown
       })
     }))]
   });
@@ -10661,186 +10891,6 @@ const AreaField = ({
   });
 };
 
-const warningPhenomena = t => [{
-  title: t('warning-phenomenon-wind'),
-  key: 'wind',
-  icon: jsx(Wind, {})
-}, {
-  title: t('warning-phenomenon-fog'),
-  key: 'fog',
-  icon: jsx(Fog, {})
-}, {
-  title: t('warning-phenomenon-thunderstorm'),
-  key: 'thunderstorm',
-  icon: jsx(Lightning, {})
-}, {
-  title: t('warning-phenomenon-snow-ice'),
-  key: 'snowIce',
-  icon: jsx(Snow, {})
-}, {
-  title: t('warning-phenomenon-rain'),
-  key: 'rain',
-  icon: jsx(Rain, {})
-}, {
-  title: t('warning-phenomenon-high-temp'),
-  key: 'highTemp',
-  icon: jsx(TemperatureHigh, {})
-},
-// {
-//   title: t('warning-phenomenon-funnel-cloud'),
-//   key: 'funnelCloud',
-//   icon: <FunnelCloud />,
-// },
-{
-  title: t('warning-phenomenon-low-temp'),
-  key: 'lowTemp',
-  icon: jsx(TemperatureLow, {})
-}, {
-  title: t('warning-phenomenon-coastal-event'),
-  key: 'coastalEvent',
-  icon: jsx(CoastalEvent, {})
-}];
-const Phenomenon = ({
-  isDisabled,
-  isReadOnly
-}) => {
-  const {
-    t
-  } = useWarningsTranslation();
-  const {
-    isRequired
-  } = useDraftFormHelpers();
-  return jsx(ReactHookFormSelect, Object.assign({
-    name: "phenomenon",
-    label: t('warning-phenomenon'),
-    rules: {
-      validate: {
-        isRequired
-      }
-    },
-    disabled: isDisabled || isReadOnly,
-    isReadOnly: isReadOnly
-  }, {
-    children: warningPhenomena(t).map(phenomenon => {
-      return jsx(MenuItem, Object.assign({
-        value: phenomenon.key
-      }, {
-        children: jsxs(Grid, Object.assign({
-          container: true,
-          justifyContent: "space-between"
-        }, {
-          children: [jsx(Grid, Object.assign({
-            item: true
-          }, {
-            children: phenomenon.title
-          })), jsx(Grid, Object.assign({
-            item: true
-          }, {
-            children: jsx(ListItemIcon, {
-              children: phenomenon.icon
-            })
-          }))]
-        }))
-      }), phenomenon.key);
-    })
-  }));
-};
-
-var WarningLevel;
-(function (WarningLevel) {
-  WarningLevel["moderate"] = "moderate";
-  WarningLevel["severe"] = "severe";
-  WarningLevel["extreme"] = "extreme";
-})(WarningLevel || (WarningLevel = {}));
-const LevelColors = {
-  moderate: {
-    color: '#FAE21E',
-    textColor: '#051039'
-  },
-  severe: {
-    color: '#E27000',
-    textColor: '#051039'
-  },
-  extreme: {
-    color: '#D62A20',
-    textColor: '#ffffff'
-  }
-};
-const levelOptions = t => [Object.assign({
-  title: t('warning-level-moderate'),
-  key: WarningLevel.moderate
-}, LevelColors[WarningLevel.moderate]), Object.assign({
-  title: t('warning-level-severe'),
-  key: WarningLevel.severe
-}, LevelColors[WarningLevel.severe]), Object.assign({
-  title: t('warning-level-extreme'),
-  key: WarningLevel.extreme
-}, LevelColors[WarningLevel.extreme])];
-const LevelField = ({
-  isDisabled: _isDisabled = false,
-  isReadOnly: _isReadOnly = false
-}) => {
-  const {
-    t
-  } = useWarningsTranslation();
-  const {
-    isRequired
-  } = useDraftFormHelpers();
-  const {
-    watch,
-    trigger
-  } = useFormContext();
-  const selectedLevel = watch('level');
-  const levelDetails = levelOptions(t).find(level => level.key === selectedLevel);
-  const onChangeLevel = () => {
-    trigger(['level', 'probability']);
-  };
-  return jsx(ReactHookFormSelect, Object.assign({
-    name: "level",
-    label: t('warning-level'),
-    rules: {
-      validate: {
-        isRequired
-      }
-    },
-    sx: {
-      '& .MuiSelect-select.MuiSelect-filled': {
-        color: (levelDetails === null || levelDetails === void 0 ? void 0 : levelDetails.textColor) || 'none',
-        backgroundColor: (levelDetails === null || levelDetails === void 0 ? void 0 : levelDetails.color) || 'none',
-        backgroundClip: 'content-box'
-      }
-    },
-    disabled: _isDisabled || _isReadOnly,
-    isReadOnly: _isReadOnly,
-    onChange: onChangeLevel
-  }, {
-    children: levelOptions(t).map(level => jsxs(MenuItem, Object.assign({
-      value: level.key,
-      sx: {
-        '&.MuiMenuItem-root ': {
-          color: level.textColor,
-          background: level.color,
-          backgroundClip: 'content-box',
-          padding: '12px 8px',
-          '&:hover': {
-            backgroundColor: `${level.color}`,
-            backgroundClip: 'content-box',
-            boxShadow: theme => `inset -8px -12px ${theme.palette.geowebColors.cards.cardContainerMouseOver}, inset 8px 12px ${theme.palette.geowebColors.cards.cardContainerMouseOver}`
-          },
-          '&.Mui-selected': {
-            backgroundColor: `${level.color}`,
-            '&:hover': {
-              boxShadow: theme => `inset 4px 0px 0px 0px ${theme.palette.geowebColors.typographyAndIcons.iconLinkActive}, inset -8px -12px ${theme.palette.geowebColors.cards.cardContainerMouseOver}, inset 8px 12px ${theme.palette.geowebColors.cards.cardContainerMouseOver}`
-            }
-          }
-        }
-      }
-    }, {
-      children: ["\u00A0", level.title]
-    }), level.key))
-  }));
-};
-
 const VALID_FROM_MAX_HOURS_AFTER_CURRENT = 168;
 const isValueBeforeCurrentTime$1 = (value, t) => {
   return isXHoursBefore(value, dateUtils.getCurrentTimeAsString(), 0) || t('warning-valid-from-error-before-current');
@@ -11245,7 +11295,8 @@ const Form = ({
     formState: {
       dirtyFields
     },
-    getValues
+    getValues,
+    setValue
   } = useFormContext();
   const {
     toggleIsDraft,
@@ -11284,10 +11335,19 @@ const Form = ({
     reset(getEmptyPublicWarning());
     setWarningGeoJSONFeature(undefined);
   };
+  const publicWarningId = publicWarningDetails === null || publicWarningDetails === void 0 ? void 0 : publicWarningDetails.id;
   React.useEffect(() => {
     // sync redux with react-hook-form
     reset(getFormData(publicWarningDetails, object));
-  }, [object, reset, publicWarningDetails]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [publicWarningId]);
+  const areas = publicWarningDetails === null || publicWarningDetails === void 0 ? void 0 : publicWarningDetails.areas;
+  React.useEffect(() => {
+    // sync redux with react-hook-form
+    if (areas) {
+      setValue('areas', areas);
+    }
+  }, [areas, setValue]);
   React.useEffect(() => {
     // sync drawing on map with selected warning
     setWarningGeoJSONFeature(initialPublicWarningArea);
@@ -11547,6 +11607,7 @@ const PublicWarningsForm = props => {
  *
  * Copyright 2023 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
  * Copyright 2023 - Finnish Meteorological Institute (FMI)
+ * Copyright 2024 - The Norwegian Meteorological Institute (MET Norway)
  * */
 const getPublicWarningStore = store => {
   if (store && store.publicWarningForm) {
@@ -13581,7 +13642,47 @@ const FilterChipWithOptions = ({
             marginLeft: '-12px'
           }
         }, {
-          children: _filterList.map(filterItem => jsx(FilterListItem, Object.assign({}, filterItem), filterItem.filter.id))
+          children: _filterList.map(filterItem => {
+            switch (id) {
+              case 'level':
+                {
+                  const warningColor = LevelColors[filterItem.filter.id];
+                  return jsx(FilterListItem, Object.assign({}, filterItem, {
+                    children: warningColor ? jsx(Box, Object.assign({
+                      component: "span",
+                      sx: Object.assign(Object.assign({}, getLevelStyle(warningColor)), {
+                        fontSize: '16px'
+                      }),
+                      "data-testid": `icon-${filterItem.filter.id}`
+                    }, {
+                      children: filterItem.filter.name
+                    })) : jsx(FilterLabel, {
+                      name: filterItem.filter.name
+                    })
+                  }), filterItem.filter.id);
+                }
+              case 'phenomenon':
+                {
+                  const icon = getWarningPhenomenaIcon(filterItem.filter.id);
+                  return jsxs(FilterListItem, Object.assign({}, filterItem, {
+                    children: [icon && jsx(Box, Object.assign({
+                      "data-testid": `icon-${filterItem.filter.id}`,
+                      sx: {
+                        marginRight: 1
+                      }
+                    }, {
+                      children: icon
+                    })), jsx(FilterLabel, {
+                      name: filterItem.filter.name
+                    })]
+                  }), filterItem.filter.id);
+                }
+              default:
+                {
+                  return jsx(FilterListItem, Object.assign({}, filterItem), filterItem.filter.id);
+                }
+            }
+          })
         }))]
       }))]
     }))]
@@ -13941,8 +14042,8 @@ const WarningsOnStatus = ({
     }, {
       children: warnings.map(warning => {
         var _a;
-        const phenomenonDetails = warningPhenomena(t).find(phenomenon => phenomenon.key === warning.warningDetail.phenomenon);
-        const levelDetails = levelOptions(t).find(level => level.key === warning.warningDetail.level);
+        const phenomenonDetails = warningPhenomena.find(phenomenon => phenomenon.key === warning.warningDetail.phenomenon);
+        const levelDetails = levelOptions.find(level => level.key === warning.warningDetail.level);
         return jsx(ListItem, Object.assign({
           sx: {
             marginBottom: 0.25,
@@ -14024,14 +14125,14 @@ const WarningsOnStatus = ({
                   position: 'relative'
                 }
               }, {
-                children: [(phenomenonDetails === null || phenomenonDetails === void 0 ? void 0 : phenomenonDetails.title) || '-', jsx(Box, Object.assign({
+                children: [(phenomenonDetails === null || phenomenonDetails === void 0 ? void 0 : phenomenonDetails.translationKey) ? t(phenomenonDetails === null || phenomenonDetails === void 0 ? void 0 : phenomenonDetails.translationKey) : '-', jsx(Box, Object.assign({
                   sx: {
                     position: 'absolute',
                     right: 0,
                     bottom: -6
                   }
                 }, {
-                  children: phenomenonDetails === null || phenomenonDetails === void 0 ? void 0 : phenomenonDetails.icon
+                  children: getWarningPhenomenaIcon(phenomenonDetails === null || phenomenonDetails === void 0 ? void 0 : phenomenonDetails.key)
                 }))]
               })), jsx(WarningListColumnContent, Object.assign({
                 title: t('warning-list-header-level'),
@@ -14039,16 +14140,9 @@ const WarningsOnStatus = ({
               }, {
                 children: jsx(Box, Object.assign({
                   component: "span",
-                  sx: {
-                    color: levelDetails === null || levelDetails === void 0 ? void 0 : levelDetails.textColor,
-                    backgroundColor: levelDetails === null || levelDetails === void 0 ? void 0 : levelDetails.color,
-                    paddingLeft: 0.5,
-                    paddingRight: 0.5,
-                    paddingBottom: '1px',
-                    marginLeft: -0.5
-                  }
+                  sx: getLevelStyle(levelDetails)
                 }, {
-                  children: ((_a = warning.warningDetail) === null || _a === void 0 ? void 0 : _a.level) && (levelDetails === null || levelDetails === void 0 ? void 0 : levelDetails.title) || '-'
+                  children: ((_a = warning.warningDetail) === null || _a === void 0 ? void 0 : _a.level) && (levelDetails === null || levelDetails === void 0 ? void 0 : levelDetails.translationKey) ? t(levelDetails === null || levelDetails === void 0 ? void 0 : levelDetails.translationKey) : '-'
                 }))
               })), jsx(WarningListColumnContent, Object.assign({
                 title: t('warning-list-header-status'),
@@ -14784,6 +14878,7 @@ publicWarningFormListener.startListening({
  *
  * Copyright 2023 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
  * Copyright 2023 - Finnish Meteorological Institute (FMI)
+ * Copyright 2024 - The Norwegian Meteorological Institute (MET Norway)
  * */
 const getLastUpdatedTimeFormatted = () => dateUtils.dateToString(dateUtils.utc(), dateUtils.DATE_FORMAT_HOURS);
 const publicWarningsListener = createListenerMiddleware();
@@ -14839,6 +14934,7 @@ publicWarningsListener.startListening({
  *
  * Copyright 2024 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
  * Copyright 2024 - Finnish Meteorological Institute (FMI)
+ * Copyright 2024 - The Norwegian Meteorological Institute (MET Norway)
  * */
 const getSnackbarMessage = (objectName, id) => id ? `Object "${objectName}" ${translateKeyOutsideComponents('update-succes')}!` : `Object "${objectName}" ${translateKeyOutsideComponents('save-succes')}!`;
 const drawingsListener = createListenerMiddleware();
@@ -14911,6 +15007,7 @@ drawingsListener.startListening({
  *
  * Copyright 2023 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
  * Copyright 2023 - Finnish Meteorological Institute (FMI)
+ * Copyright 2024 - The Norwegian Meteorological Institute (MET Norway)
  * */
 const drawingModuleConfig = {
   id: 'drawing-module',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opengeoweb/warnings",
-  "version": "9.25.2",
+  "version": "9.26.0",
   "description": "GeoWeb warinings library for the opengeoweb project",
   "license": "Apache-2.0",
   "repository": {

package/src/lib/components/PublicWarningsForm/LevelField/LevelField.d.ts

@@ -1,11 +1,10 @@
 import * as React from 'react';
-import { TFunction } from 'i18next';
 export interface LevelColor {
     color: string;
     textColor: string;
 }
-interface LevelDetails extends LevelColor {
-    title: string;
+export interface LevelDetails extends LevelColor {
+    translationKey: string;
     key: string;
 }
 export declare enum WarningLevel {
@@ -14,9 +13,9 @@ export declare enum WarningLevel {
     extreme = "extreme"
 }
 export declare const LevelColors: Record<WarningLevel, LevelColor>;
-export declare const levelOptions: (t: TFunction) => LevelDetails[];
+export declare const getLevelStyle: (levelColor?: LevelColor) => React.CSSProperties;
+export declare const levelOptions: LevelDetails[];
 export declare const LevelField: React.FC<{
     isDisabled?: boolean;
     isReadOnly?: boolean;
 }>;
-export {};

package/src/lib/components/PublicWarningsForm/PhenomenonField/PhenomenonField.d.ts

@@ -1,13 +1,11 @@
 import * as React from 'react';
-import { TFunction } from 'i18next';
-interface PhenomenonDetails {
-    title: string;
+export declare const getWarningPhenomenaIcon: (key: string) => JSX.Element | undefined;
+export interface PhenomenonDetails {
+    translationKey: string;
     key: string;
-    icon: JSX.Element;
 }
-export declare const warningPhenomena: (t: TFunction) => PhenomenonDetails[];
+export declare const warningPhenomena: PhenomenonDetails[];
 export declare const Phenomenon: React.FC<{
     isDisabled?: boolean;
     isReadOnly?: boolean;
 }>;
-export {};

package/src/lib/components/PublicWarningsForm/PhenomenonField/PhenomenonField.spec.d.ts

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

package/src/lib/store/publicWarnings/utils.d.ts

@@ -7,9 +7,11 @@ export declare const emptyFilter: {
     name: string;
     checked: boolean;
 };
+type TranslateListDict = Record<string, string>;
 export declare const defaultFilters: {
     key: string;
     translationKey: string;
+    translations?: TranslateListDict;
 }[];
 export declare const getFiltersFromWarnings: (warnings: PublicWarning[]) => WarningListFilter[];
 export declare const isWarningMatchingFilter: (filters: OptionListItem[], filterId: EntityId, warningDetailValue: string) => boolean;
@@ -18,3 +20,4 @@ export declare const getUpdatedFilters: (filters: EntityState<WarningListFilter>
     changes: WarningListFilter;
 }[];
 export declare const getUpdatedFilterList: (oldList: FilterListItemProps[], newList: FilterListItemProps[]) => FilterListItemProps[];
+export {};

package/src/lib/storybookUtils/defaultStorySettings.d.ts

@@ -1,6 +1,6 @@
 import { layerTypes, mapTypes } from '@opengeoweb/store';
 export declare const initialBbox: {
-    srs: string;
+    srs: "EPSG:3857";
     bbox: {
         left: number;
         bottom: number;