@opengeoweb/warnings 9.25.3 → 9.27.0

package/index.esm.js

@@ -1,26 +1,26 @@
 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, Thunderstorm, VulcanicEruption, Haze, FreezingPrecipitation, ModerateAircraftIcing, SevereAircraftIcing, ModerateTurbulence, SevereTurbulence, SandStorm, RadioactiveMaterials, 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, StatusTag, LastUpdateTime, 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 { generateMapId, LayerType, getWMJSMapById, getGeoCoordFromLatLong, WMBBOX } from '@opengeoweb/webmap';
 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 } from '@mui/material';
 import { VariableSizeList } from 'react-window';
 import AutoSizer from 'react-virtualized-auto-sizer';
-import { getApi, createApiInstance, createNonAuthApiInstance, createFakeApiInstance, ApiProvider } from '@opengeoweb/api';
+import { getApi, createApiInstance, createNonAuthApiInstance, createFakeApiInstance, ApiProvider, ProductStatus, useAirmetList, useSigmetList } from '@opengeoweb/api';
 import { useFormContext } from 'react-hook-form';
 import { isEqual, cloneDeep, clamp } from 'lodash';
 import { useAuthenticationContext } from '@opengeoweb/authentication';
 import { produce } from 'immer';
-import { generateMapId, LayerType, getWMJSMapById, getGeoCoordFromLatLong, WMBBOX } from '@opengeoweb/webmap';
 import { isAxiosError } from 'axios';
 
 var en = {
@@ -143,7 +143,44 @@ var en = {
 	"filter-phenomenon": "Phenomena",
 	"filter-level": "Levels",
 	"filter-source": "Sources",
-	"error-title-retry": "Try again"
+	"filter-hide": "Hide {{subject}}",
+	"filter-show": "Show {{subject}}",
+	airmet: "Airmet",
+	sigmet: "Sigmet",
+	"error-title-retry": "Try again",
+	"aviation-phenomenon-radioactive-cloud": "Radioactive cloud",
+	"aviation-phenomenon-heavy-sandstorm": "Heavy sandstorm",
+	"aviation-phenomenon-severe-turbulence": "Severe turbulence",
+	"aviation-phenomenon-moderate-turbulence": "Moderate turbulence",
+	"aviation-phenomenon-severe-ice": "Severe icing",
+	"aviation-phenomenon-moderate-ice": "Moderate icing",
+	"aviation-phenomenon-severe-ice-freezing-rain": "Severe icing due to freezing rain",
+	"aviation-phenomenon-heavy-dust-storm": "Heavy duststorm",
+	"aviation-phenomenon-volcanic-cloud": "Volcanic ash cloud",
+	"aviation-phenomenon-embedded-thunderstorm": "Embedded thunderstorm(s)",
+	"aviation-phenomenon-embedded-thunderstorm-with-hail": "Emb. thunderstorm(s) with hail",
+	"aviation-phenomenon-frequent-thunderstorm": "Frequent thunderstorm(s)",
+	"aviation-phenomenon-frequent-thunderstorm-with-hail": "Freq. thunderstorm(s) with hail",
+	"aviation-phenomenon-obscured-thunderstorm": "Obscured thunderstorm(s)",
+	"aviation-phenomenon-obscured-thunderstorm-with-hail": "Obsc. thunderstorm(s) with hail",
+	"aviation-phenomenon-squall-thunderstorm-with-hail": "Squall thunderstorm(s) with hail",
+	"aviation-phenomenon-isolated-thunderstorm": "Isolated thunderstorm(s)",
+	"aviation-phenomenon-isolated-thunderstorm-with-hail": "Isol. thunderstorm(s) with hail",
+	"aviation-phenomenon-occasional-thunderstorm": "Occasional thunderstorm(s)",
+	"aviation-phenomenon-occasional-thunderstorm-with-hail": "Ocn. thunderstorm(s) with hail",
+	"aviation-phenomenon-severe-mountain-waves": "Severe mountain waves",
+	"aviation-phenomenon-surface-visibility": "Surface visibility",
+	"aviation-phenomenon-surface-wind": "Surface wind",
+	"aviation-phenomenon-overcast-cloud": "Overcast cloud",
+	"aviation-phenomenon-broken-cloud": "Broken cloud",
+	"aviation-phenomenon-isolated-cumulonimbus-cloud": "Isolated cumulonimbus cloud",
+	"aviation-phenomenon-occasional-cumulonimbus-cloud": "Occasional cumulonimbus cloud",
+	"aviation-phenomenon-frequent-cumulonimbus-cloud": "Frequent cumulonimbus cloud",
+	"aviation-phenomenon-isolated-towering-cumulus-cloud": "Isolated towering cumulus cloud",
+	"aviation-phenomenon-occasional-towering-cumulus-cloud": "Occasional towering cumulus cloud",
+	"aviation-phenomenon-frequent-towering-cumulus-cloud": "Frequent towering cumulus cloud",
+	"aviation-phenomenon-moderate-mountain-wave": "Moderate mountain wave",
+	"aviation-phenomenon-mountains-obscured": "Mountains obscured"
 };
 var nl = {
 	"drawing-tool-form-tools": "Gereedschap",
@@ -501,14 +538,14 @@ var no = {
 	"filter-select-all": "Velg alle",
 	"filter-no-results": "Ingen resultat",
 	"filter-all": "Alle",
-	"filter-options": "ikke oversatt",
-	"filter-show-all": "ikke oversatt",
-	"filter-hide-all": "ikke oversatt",
-	"filter-incident": "ikke oversatt",
-	"filter-domain": "ikke oversatt",
-	"filter-phenomenon": "ikke oversatt",
-	"filter-level": "ikke oversatt",
-	"filter-source": "ikke oversatt",
+	"filter-options": "Filtervalg",
+	"filter-show-all": "Vis alle",
+	"filter-hide-all": "Skjel alle",
+	"filter-incident": "Hendelse",
+	"filter-domain": "Domene",
+	"filter-phenomenon": "Fenomen",
+	"filter-level": "Grad",
+	"filter-source": "Kilder",
 	"error-title-retry": "Prøv igjen"
 };
 var warningsTranslations = {
@@ -3683,28 +3720,399 @@ $$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)
- * Copyright 2024 - The Norwegian Meteorological Institute (MET Norway)
- * */
+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 getAviationPhenomenaIcon = key => {
+  switch (key) {
+    case 'RDOACT_CLD':
+      return jsx(RadioactiveMaterials, {});
+    case 'HVY_SS':
+      return jsx(SandStorm, {});
+    case 'SEV_TURB':
+      return jsx(SevereTurbulence, {});
+    case 'MOD_TURB':
+      return jsx(ModerateTurbulence, {});
+    case 'SEV_ICE':
+      return jsx(SevereAircraftIcing, {});
+    case 'MOD_ICE':
+      return jsx(ModerateAircraftIcing, {});
+    case 'SEV_ICE_FRZ_RN':
+      return jsx(FreezingPrecipitation, {});
+    case 'HVY_DS':
+      return jsx(Haze, {});
+    case 'VA_CLD':
+      return jsx(VulcanicEruption, {});
+    case 'EMBD_TS':
+    case 'EMBD_TSGR':
+    case 'FRQ_TS':
+    case 'FRQ_TSGR':
+    case 'OBSC_TS':
+    case 'OBSC_TSGR':
+    case 'SQL_TSGR':
+    case 'ISOL_TS':
+    case 'ISOL_TSGR':
+    case 'OCNL_TS':
+    case 'OCNL_TSGR':
+      return jsx(Thunderstorm, {});
+    default:
+      return undefined;
+  }
+};
+const warningPhenomena = [{
+  translationKey: 'warning-phenomenon-wind',
+  key: 'wind',
+  isAviation: false
+}, {
+  translationKey: 'warning-phenomenon-fog',
+  key: 'fog',
+  isAviation: false
+}, {
+  translationKey: 'warning-phenomenon-thunderstorm',
+  key: 'thunderstorm',
+  isAviation: false
+}, {
+  translationKey: 'warning-phenomenon-snow-ice',
+  key: 'snowIce',
+  isAviation: false
+}, {
+  translationKey: 'warning-phenomenon-rain',
+  key: 'rain',
+  isAviation: false
+}, {
+  translationKey: 'warning-phenomenon-high-temp',
+  key: 'highTemp',
+  isAviation: false
+},
+// {
+//   title: 'warning-phenomenon-funnel-cloud',
+//   key: 'funnelCloud',
+// },
+{
+  translationKey: 'warning-phenomenon-low-temp',
+  key: 'lowTemp',
+  isAviation: false
+}, {
+  translationKey: 'warning-phenomenon-coastal-event',
+  key: 'coastalEvent',
+  isAviation: false
+}, {
+  translationKey: 'aviation-phenomenon-radioactive-cloud',
+  key: 'RDOACT_CLD',
+  isAviation: true
+}, {
+  translationKey: 'aviation-phenomenon-heavy-sandstorm',
+  key: 'HVY_SS',
+  isAviation: true
+}, {
+  translationKey: 'aviation-phenomenon-severe-turbulence',
+  key: 'SEV_TURB',
+  isAviation: true
+}, {
+  translationKey: 'aviation-phenomenon-moderate-turbulence',
+  key: 'MOD_TURB',
+  isAviation: true
+}, {
+  translationKey: 'aviation-phenomenon-severe-ice',
+  key: 'SEV_ICE',
+  isAviation: true
+}, {
+  translationKey: 'aviation-phenomenon-moderate-ice',
+  key: 'MOD_ICE',
+  isAviation: true
+}, {
+  translationKey: 'aviation-phenomenon-severe-ice-freezing-rain',
+  key: 'SEV_ICE_FRZ_RN',
+  isAviation: true
+}, {
+  translationKey: 'aviation-phenomenon-heavy-dust-storm',
+  key: 'HVY_DS',
+  isAviation: true
+}, {
+  translationKey: 'aviation-phenomenon-volcanic-cloud',
+  key: 'VA_CLD',
+  isAviation: true
+}, {
+  translationKey: 'aviation-phenomenon-embedded-thunderstorm',
+  key: 'EMBD_TS',
+  isAviation: true
+}, {
+  translationKey: 'aviation-phenomenon-embedded-thunderstorm-with-hail',
+  key: 'EMBD_TSGR',
+  isAviation: true
+}, {
+  translationKey: 'aviation-phenomenon-obscured-thunderstorm-with-hail',
+  key: 'OBSC_TSGR',
+  isAviation: true
+}, {
+  translationKey: 'aviation-phenomenon-squall-thunderstorm-with-hail',
+  key: 'SQL_TSGR',
+  isAviation: true
+}, {
+  translationKey: 'aviation-phenomenon-isolated-thunderstorm',
+  key: 'ISOL_TS',
+  isAviation: true
+}, {
+  translationKey: 'aviation-phenomenon-isolated-thunderstorm-with-hail',
+  key: 'ISOL_TSGR',
+  isAviation: true
+}, {
+  translationKey: 'aviation-phenomenon-occasional-thunderstorm',
+  key: 'OCNL_TS',
+  isAviation: true
+}, {
+  translationKey: 'aviation-phenomenon-occasional-thunderstorm-with-hail',
+  key: 'OCNL_TSGR',
+  isAviation: true
+}, {
+  translationKey: 'aviation-phenomenon-frequent-thunderstorm',
+  key: 'FRQ_TS',
+  isAviation: true
+}, {
+  translationKey: 'aviation-phenomenon-frequent-thunderstorm-with-hail',
+  key: 'FRQ_TSGR',
+  isAviation: true
+}, {
+  translationKey: 'aviation-phenomenon-severe-mountain-waves',
+  key: 'SEV_MTW',
+  isAviation: true
+}, {
+  translationKey: 'aviation-phenomenon-surface-visibility',
+  key: 'SFC_VIS',
+  isAviation: true
+}, {
+  translationKey: 'aviation-phenomenon-surface-wind',
+  key: 'SFC_WIND',
+  isAviation: true
+}, {
+  translationKey: 'aviation-phenomenon-overcast-cloud',
+  key: 'OVC_CLD',
+  isAviation: true
+}, {
+  translationKey: 'aviation-phenomenon-broken-cloud',
+  key: 'BKN_CLD',
+  isAviation: true
+}, {
+  translationKey: 'aviation-phenomenon-isolated-cumulonimbus-cloud',
+  key: 'ISOL_CB',
+  isAviation: true
+}, {
+  translationKey: 'aviation-phenomenon-occasional-cumulonimbus-cloud',
+  key: 'OCNL_CB',
+  isAviation: true
+}, {
+  translationKey: 'aviation-phenomenon-frequent-cumulonimbus-cloud',
+  key: 'FRQ_CB',
+  isAviation: true
+}, {
+  translationKey: 'aviation-phenomenon-isolated-towering-cumulus-cloud',
+  key: 'ISOL_TCU',
+  isAviation: true
+}, {
+  translationKey: 'aviation-phenomenon-occasional-towering-cumulus-cloud',
+  key: 'OCNL_TCU',
+  isAviation: true
+}, {
+  translationKey: 'aviation-phenomenon-frequent-towering-cumulus-cloud',
+  key: 'FRQ_TCU',
+  isAviation: true
+}, {
+  translationKey: 'aviation-phenomenon-moderate-mountain-wave',
+  key: 'MOD_MTW',
+  isAviation: true
+}, {
+  translationKey: 'aviation-phenomenon-mountains-obscured',
+  key: 'MT_OBSC',
+  isAviation: true
+}];
+const allPhenomenaDict = warningPhenomena.reduce((list, item) => Object.assign(Object.assign({}, list), {
+  [item.key]: item
+}), {});
+const getPhenomenaIcon = key => {
+  return getWarningPhenomenaIcon(key) || getAviationPhenomenaIcon(key);
+};
+const Phenomenon = ({
+  isDisabled,
+  isReadOnly
+}) => {
+  const {
+    t
+  } = useWarningsTranslation();
+  const {
+    isRequired
+  } = useDraftFormHelpers();
+  // These phenomena are sent to Public Warning Form
+  const warningFormPhenomena = warningPhenomena.filter(phenomenon => !phenomenon.isAviation);
+  return jsx(ReactHookFormSelect, Object.assign({
+    name: "phenomenon",
+    label: t('warning-phenomenon'),
+    rules: {
+      validate: {
+        isRequired
+      }
+    },
+    disabled: isDisabled || isReadOnly,
+    isReadOnly: isReadOnly
+  }, {
+    children: warningFormPhenomena.map(phenomenon => 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: getPhenomenaIcon(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 levelOptionsDict = levelOptions.reduce((list, item) => Object.assign(Object.assign({}, list), {
+  [item.key]: item
+}), {});
+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'
@@ -3713,10 +4121,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'
@@ -3737,15 +4147,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({
@@ -10485,6 +10898,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,
@@ -10501,11 +10936,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,
@@ -10522,7 +10959,7 @@ const DescriptionField = ({
         multiline: true,
         disabled: _isDisabled,
         isReadOnly: _isReadOnly,
-        onKeyDown: event => event.stopPropagation()
+        onKeyDown: onKeyDown
       })
     })), jsx(CustomTabPanel, Object.assign({
       value: activeTab,
@@ -10539,7 +10976,7 @@ const DescriptionField = ({
         multiline: true,
         disabled: _isDisabled,
         isReadOnly: _isReadOnly,
-        onKeyDown: event => event.stopPropagation()
+        onKeyDown: onKeyDown
       })
     }))]
   });
@@ -10672,46 +11109,15 @@ 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 = ({
+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');
+};
+const isMaxHoursAfterCurrentTime$1 = (value, t) => isXHoursAfter(value, dateUtils.getCurrentTimeAsString(), VALID_FROM_MAX_HOURS_AFTER_CURRENT) || t('warning-valid-from-error-max-hours', {
+  ns: WARN_NAMESPACE,
+  MAX_HOURS: VALID_FROM_MAX_HOURS_AFTER_CURRENT
+});
+const ValidFrom = ({
   isDisabled,
   isReadOnly
 }) => {
@@ -10721,163 +11127,14 @@ const Phenomenon = ({
   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');
-};
-const isMaxHoursAfterCurrentTime$1 = (value, t) => isXHoursAfter(value, dateUtils.getCurrentTimeAsString(), VALID_FROM_MAX_HOURS_AFTER_CURRENT) || t('warning-valid-from-error-max-hours', {
-  ns: WARN_NAMESPACE,
-  MAX_HOURS: VALID_FROM_MAX_HOURS_AFTER_CURRENT
-});
-const ValidFrom = ({
-  isDisabled,
-  isReadOnly
-}) => {
-  const {
-    t
-  } = useWarningsTranslation();
-  const {
-    isRequired
-  } = useDraftFormHelpers();
-  const {
-    trigger
-  } = useFormContext();
-  const onChangeValidFrom = () => {
-    trigger(['validFrom', 'validUntil']);
-  };
-  return jsx(ReactHookFormDateTime, {
-    name: "validFrom",
+  const {
+    trigger
+  } = useFormContext();
+  const onChangeValidFrom = () => {
+    trigger(['validFrom', 'validUntil']);
+  };
+  return jsx(ReactHookFormDateTime, {
+    name: "validFrom",
     rules: {
       validate: {
         isRequired,
@@ -11599,6 +11856,33 @@ const getPublicWarningFormError = createSelector(getPublicWarningStore, publicWa
 const getSelectedPublicWarningId = createSelector(getPublicWarningStore, publicWarningStore => (publicWarningStore === null || publicWarningStore === void 0 ? void 0 : publicWarningStore.selectedPublicWarningId) || '');
 const getSelectedPublicIsFormDirty = createSelector(getPublicWarningStore, publicWarningStore => (publicWarningStore === null || publicWarningStore === void 0 ? void 0 : publicWarningStore.isFormDirty) || false);
 
+/* *
+ * 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)
+ * Copyright 2024 - The Norwegian Meteorological Institute (MET Norway)
+ * */
+var PublicWarningStatus;
+(function (PublicWarningStatus) {
+  PublicWarningStatus["DRAFT"] = "DRAFT";
+  PublicWarningStatus["DRAFT_PUBLISHED"] = "DRAFT_PUBLISHED";
+  PublicWarningStatus["PUBLISHED"] = "PUBLISHED";
+  PublicWarningStatus["TODO"] = "TODO";
+  PublicWarningStatus["EXPIRED"] = "EXPIRED";
+  PublicWarningStatus["IGNORED"] = "IGNORED";
+})(PublicWarningStatus || (PublicWarningStatus = {}));
+
 const PublicWarningsFormConnect = ({
   defaultBbox
 }) => {
@@ -11616,12 +11900,12 @@ const PublicWarningsFormConnect = ({
     dispatch(publicWarningFormActions.publishWarning({
       publicWarning: {
         warningDetail: newFormValues,
-        status: 'PUBLISHED'
+        status: PublicWarningStatus.PUBLISHED
       }
     }));
   };
   const saveForm = newFormValues => {
-    const status = newFormValues.linked_to_id ? 'DRAFT_PUBLISHED' : 'DRAFT';
+    const status = newFormValues.linked_to_id ? PublicWarningStatus.DRAFT_PUBLISHED : PublicWarningStatus.DRAFT;
     dispatch(publicWarningFormActions.saveWarning({
       publicWarning: {
         warningDetail: newFormValues,
@@ -13603,7 +13887,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);
+                }
+            }
+          })
         }))]
       }))]
     }))]
@@ -13647,7 +13971,11 @@ const FilterChipWithOptionsConnect = ({
 const FilterList = ({
   filters: _filters = [],
   onClickAll: _onClickAll = () => {},
-  isAllSelected: _isAllSelected = true
+  isAllSelected: _isAllSelected = true,
+  showSigmet: _showSigmet = false,
+  showAirmet: _showAirmet = false,
+  setShowSigmet,
+  setShowAirmet
 }) => {
   const {
     t
@@ -13685,65 +14013,174 @@ const FilterList = ({
       return jsx(FilterChipWithOptionsConnect, {
         filter: filter
       }, filter.id);
-    })]
+    }), setShowSigmet && jsx(CustomTooltip, Object.assign({
+      title: _showSigmet ? t('filter-hide', {
+        subject: t('sigmet')
+      }) : t('filter-show', {
+        subject: t('sigmet')
+      }),
+      placement: "bottom"
+    }, {
+      children: jsx("span", Object.assign({
+        style: {
+          margin: 0
+        }
+      }, {
+        children: jsx(FilterChip, {
+          id: "sigmet",
+          label: t('sigmet'),
+          isSelected: _showSigmet,
+          handleClick: () => setShowSigmet(!_showSigmet),
+          size: "medium"
+        })
+      }))
+    })), setShowAirmet && jsx(CustomTooltip, Object.assign({
+      title: _showAirmet ? t('filter-hide', {
+        subject: t('airmet')
+      }) : t('filter-show', {
+        subject: t('airmet')
+      }),
+      placement: "bottom"
+    }, {
+      children: jsx("span", Object.assign({
+        style: {
+          margin: 0
+        }
+      }, {
+        children: jsx(FilterChip, {
+          id: "airmet",
+          label: t('airmet'),
+          isSelected: _showAirmet,
+          handleClick: () => setShowAirmet(!_showAirmet),
+          size: "medium"
+        })
+      }))
+    }))]
   }));
 };
 
-const sortWarningsOnStatus = warnings => {
-  return warnings.reduce((allWarnings, warning) => {
-    if (warning.status === 'DRAFT' || warning.status === 'DRAFT_PUBLISHED') {
-      return Object.assign(Object.assign({}, allWarnings), {
-        draft: allWarnings === null || allWarnings === void 0 ? void 0 : allWarnings.draft.concat(warning)
-      });
-    }
-    if (warning.status === 'PUBLISHED') {
-      return Object.assign(Object.assign({}, allWarnings), {
-        published: allWarnings === null || allWarnings === void 0 ? void 0 : allWarnings.published.concat(warning)
-      });
-    }
-    if (warning.status === 'TODO') {
-      return Object.assign(Object.assign({}, allWarnings), {
-        todo: allWarnings === null || allWarnings === void 0 ? void 0 : allWarnings.todo.concat(warning)
-      });
-    }
-    if (warning.status === 'EXPIRED') {
-      return Object.assign(Object.assign({}, allWarnings), {
-        expired: allWarnings === null || allWarnings === void 0 ? void 0 : allWarnings.expired.concat(warning)
-      });
+const WarningListItemSeperator = _a => {
+  var {
+      totalWarnings,
+      status
+    } = _a,
+    props = __rest(_a, ["totalWarnings", "status"]);
+  const {
+    t
+  } = useWarningsTranslation();
+  const getStatus = status => {
+    switch (status) {
+      case 'DRAFT':
+        return t('warning-list-status-draft');
+      case 'PUBLISHED':
+        return t('warning-list-status-published');
+      case 'TODO':
+        return t('warning-list-status-todo');
+      default:
+        return t('warning-list-status-expired');
     }
-    return allWarnings;
+  };
+  const headerText = `${totalWarnings} ${getStatus(status)}`;
+  return jsx(ListItem, Object.assign({}, props, {
+    "aria-label": `warninglist ${status}`
   }, {
-    todo: [],
-    draft: [],
-    published: [],
-    expired: []
-  });
-};
-const getWarningWithLinkedToId = warning => {
-  const {
-    id,
-    warningDetail
-  } = warning;
-  const cleanWarningDetail = __rest(warningDetail, ["id"]);
-  return Object.assign(Object.assign({}, warning), {
-    warningDetail: Object.assign(Object.assign({}, cleanWarningDetail), {
-      linked_to_id: id
-    }),
-    status: 'DRAFT_PUBLISHED'
-  });
+    children: jsx(Typography, Object.assign({
+      variant: "caption",
+      sx: {
+        opacity: 0.67
+      }
+    }, {
+      children: headerText
+    }))
+  }));
 };
-const getWarningWithProposalId = warning => {
-  const {
-      id,
-      warningDetail
-    } = warning,
-    fullWarning = __rest(warning, ["id", "warningDetail"]);
-  const cleanWarningDetail = __rest(warningDetail, ["id"]);
-  return Object.assign(Object.assign({}, fullWarning), {
-    warningDetail: Object.assign(Object.assign({}, cleanWarningDetail), {
-      proposal_id: id
-    })
-  });
+
+/* *
+ * 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)
+ * Copyright 2024 - The Norwegian Meteorological Institute (MET Norway)
+ * */
+const transformAirmetToWarningFormat = apiAirmet => {
+  const airmet = apiAirmet.airmet;
+  return {
+    id: apiAirmet.uuid,
+    lastUpdatedTime: apiAirmet.lastUpdateDate,
+    productStatus: airmet.status,
+    warningDetail: {
+      descriptionOriginal: '',
+      descriptionTranslation: '',
+      areas: [{
+        geoJSON: airmet.startGeometry,
+        objectName: ''
+      }],
+      phenomenon: airmet.phenomenon,
+      validFrom: airmet.validDateStart,
+      validUntil: airmet.validDateEnd,
+      level: 'AIR',
+      probability: 0,
+      incident: airmet.sequence
+    }
+  };
+};
+const transformSigmetToWarningFormat = apiSigmet => {
+  const sigmet = apiSigmet.sigmet;
+  return {
+    id: apiSigmet.uuid,
+    lastUpdatedTime: apiSigmet.lastUpdateDate,
+    productStatus: sigmet.status,
+    warningDetail: {
+      descriptionOriginal: '',
+      descriptionTranslation: '',
+      areas: [{
+        geoJSON: sigmet.startGeometry,
+        objectName: ''
+      }],
+      phenomenon: sigmet.phenomenon,
+      validFrom: sigmet.validDateStart,
+      validUntil: sigmet.validDateEnd,
+      level: 'SIG',
+      probability: 0,
+      incident: sigmet.sequence
+    }
+  };
+};
+const mapProductStatusToWarningStatus = productStatus => {
+  switch (productStatus) {
+    case ProductStatus.PUBLISHED:
+      return PublicWarningStatus.PUBLISHED;
+    case ProductStatus.DRAFT:
+      return PublicWarningStatus.DRAFT;
+    case ProductStatus.CANCELLED:
+    case ProductStatus.EXPIRED:
+    case ProductStatus.DISCARDED:
+    default:
+      return PublicWarningStatus.EXPIRED;
+  }
+};
+
+const getSortedStatus = status => {
+  switch (status) {
+    case 'DRAFT_PUBLISHED':
+      {
+        return PublicWarningStatus.DRAFT;
+      }
+    default:
+      {
+        return status;
+      }
+  }
 };
 const getWarningWithoutIdStatusEditor = warning => {
   const {
@@ -13758,6 +14195,32 @@ const getWarningWithoutIdStatusEditor = warning => {
     warningDetail: cleanWarningDetail
   });
 };
+const getWarningWithLinkedToId = warning => {
+  const {
+    id,
+    warningDetail
+  } = warning;
+  const cleanWarningDetail = __rest(warningDetail, ["id"]);
+  return Object.assign(Object.assign({}, warning), {
+    warningDetail: Object.assign(Object.assign({}, cleanWarningDetail), {
+      linked_to_id: id
+    }),
+    status: PublicWarningStatus.DRAFT_PUBLISHED
+  });
+};
+const getWarningWithProposalId = warning => {
+  const {
+      id,
+      warningDetail
+    } = warning,
+    fullWarning = __rest(warning, ["id", "warningDetail"]);
+  const cleanWarningDetail = __rest(warningDetail, ["id"]);
+  return Object.assign(Object.assign({}, fullWarning), {
+    warningDetail: Object.assign(Object.assign({}, cleanWarningDetail), {
+      proposal_id: id
+    })
+  });
+};
 const getStatusIcon = warning => {
   const getStatusTag = (content, color, icon = null) => jsx(StatusTag, {
     content: content,
@@ -13769,7 +14232,8 @@ const getStatusIcon = warning => {
     },
     icon: icon
   });
-  switch (warning.status) {
+  const status = warning.status || mapProductStatusToWarningStatus(warning.productStatus);
+  switch (status) {
     case 'TODO':
       return null;
     case 'DRAFT':
@@ -13800,34 +14264,6 @@ const getStatusIcon = warning => {
       return getStatusTag('Exp', 'grey');
   }
 };
-const WarningListHeaderContent = _a => {
-  var {
-      title,
-      width = 76
-    } = _a,
-    props = __rest(_a, ["title", "width"]);
-  return jsx(Grid, Object.assign({
-    item: true
-  }, props, {
-    sx: Object.assign(Object.assign({}, props.sx), {
-      width
-    })
-  }, {
-    children: jsx(Box, Object.assign({
-      sx: {
-        overflow: 'hidden',
-        fontWeight: 'normal',
-        textOverflow: 'ellipsis',
-        fontSize: 12,
-        lineHeight: 1.33,
-        height: 16,
-        color: 'geowebColors.captions.captionStatus.rgba'
-      }
-    }, {
-      children: title
-    }))
-  }));
-};
 const WarningListColumnContent = _a => {
   var {
       title,
@@ -13871,286 +14307,513 @@ const WarningListColumnContent = _a => {
     }))]
   }));
 };
-const WarningsOnStatus = ({
-  warnings,
-  status,
-  activeWarningId,
-  onSelectWarning: _onSelectWarning = () => {},
+const getMenuItems = ({
+  warning,
   onEditWarning: _onEditWarning = () => {},
   onDeleteWarning: _onDeleteWarning = () => {},
-  onDeleteReviewWarning: _onDeleteReviewWarning = () => {}
+  onDeleteReviewWarning: _onDeleteReviewWarning = () => {},
+  t
 }) => {
+  const duplicate = {
+    text: t('warning-list-button-duplicate'),
+    action: () => _onEditWarning(getWarningWithoutIdStatusEditor(warning)),
+    icon: jsx(Copy, {})
+  };
+  switch (warning.status) {
+    case 'PUBLISHED':
+      return [{
+        text: t('warning-list-button-update'),
+        action: () => _onEditWarning(getWarningWithLinkedToId(warning)),
+        icon: jsx(Edit, {})
+      }, duplicate, {
+        text: t('warning-list-button-expire'),
+        action: () => null,
+        icon: jsx(Expire, {}),
+        isDisabled: true
+      }, {
+        text: t('warning-list-button-withdraw'),
+        action: () => null,
+        icon: jsx(Remove, {}),
+        isDisabled: true
+      }];
+    case 'EXPIRED':
+      return [duplicate];
+    case 'DRAFT':
+    case 'DRAFT_PUBLISHED':
+      return [{
+        text: t('object-manager-button-edit'),
+        action: () => _onEditWarning(warning),
+        icon: jsx(Edit, {})
+      }, duplicate, {
+        text: t('object-manager-button-delete'),
+        action: () => _onDeleteWarning(warning.id, warning.editor),
+        icon: jsx(Delete, {})
+      }];
+    case 'TODO':
+      return [{
+        text: t('warning-list-button-use'),
+        action: () => _onEditWarning(getWarningWithProposalId(warning)),
+        icon: jsx(Success, {})
+      }, {
+        text: t('object-manager-button-delete'),
+        action: () => _onDeleteReviewWarning(warning),
+        icon: jsx(Delete, {})
+      }];
+    default:
+      return [];
+  }
+};
+const WarningListItem = _a => {
+  var {
+      warning,
+      status,
+      activeWarningId,
+      onSelectWarning = () => {},
+      onEditWarning = () => {},
+      onDeleteWarning = () => {},
+      onDeleteReviewWarning = () => {}
+    } = _a,
+    props = __rest(_a, ["warning", "status", "activeWarningId", "onSelectWarning", "onEditWarning", "onDeleteWarning", "onDeleteReviewWarning"]);
   const {
     t
   } = useWarningsTranslation();
-  const getStatus = status => {
-    switch (status) {
-      case 'DRAFT':
-        return t('warning-list-status-draft');
-      case 'PUBLISHED':
-        return t('warning-list-status-published');
-      case 'TODO':
-        return t('warning-list-status-todo');
-      default:
-        return t('warning-list-status-expired');
-    }
-  };
-  const headerText = `${warnings.length} ${getStatus(status)}`;
-  const getMenuItems = warning => {
-    const duplicate = {
-      text: t('warning-list-button-duplicate'),
-      action: () => _onEditWarning(getWarningWithoutIdStatusEditor(warning)),
-      icon: jsx(Copy, {})
+  const phenomenonDetails = allPhenomenaDict[warning.warningDetail.phenomenon];
+  const levelDetails = levelOptionsDict[warning.warningDetail.level];
+  // State and effect to track if the phenomena text is overflowing
+  const textRef = useRef(null);
+  const [isOverflowing, setIsOverflowing] = useState(false);
+  useEffect(() => {
+    // eslint-disable-next-line @typescript-eslint/explicit-function-return-type
+    const checkOverflow = () => {
+      if (textRef.current) {
+        setIsOverflowing(textRef.current.scrollWidth > textRef.current.clientWidth);
+      }
     };
-    switch (status) {
-      case 'PUBLISHED':
-        return [{
-          text: t('warning-list-button-update'),
-          action: () => _onEditWarning(getWarningWithLinkedToId(warning)),
-          icon: jsx(Edit, {})
-        }, duplicate, {
-          text: t('warning-list-button-expire'),
-          action: () => null,
-          icon: jsx(Expire, {}),
-          isDisabled: true
-        }, {
-          text: t('warning-list-button-withdraw'),
-          action: () => null,
-          icon: jsx(Remove, {}),
-          isDisabled: true
-        }];
-      case 'EXPIRED':
-        return [duplicate];
-      case 'DRAFT':
-      case 'DRAFT_PUBLISHED':
-        return [{
-          text: t('object-manager-button-edit'),
-          action: () => _onEditWarning(warning),
-          icon: jsx(Edit, {})
-        }, duplicate, {
-          text: t('object-manager-button-delete'),
-          action: () => _onDeleteWarning(warning.id, warning.editor),
-          icon: jsx(Delete, {})
-        }];
-      case 'TODO':
-        return [{
-          text: t('warning-list-button-use'),
-          action: () => _onEditWarning(getWarningWithProposalId(warning)),
-          icon: jsx(Success, {})
-        }, {
-          text: t('object-manager-button-delete'),
-          action: () => _onDeleteReviewWarning(warning),
-          icon: jsx(Delete, {})
-        }];
-      default:
-        return [];
-    }
-  };
-  return jsxs(Box, Object.assign({
+    checkOverflow();
+  }, [phenomenonDetails]);
+  return jsx(ListItem, Object.assign({
     sx: {
-      paddingBottom: 2
-    }
-  }, {
-    children: [jsx(Typography, Object.assign({
-      variant: "caption",
+      marginBottom: 0.25,
+      minHeight: '32px',
+      padding: '0 0',
+      backgroundColor: status === 'EXPIRED' ? 'geowebColors.cards.cardContainerDisabled' : 'geowebColors.cards.cardContainer',
+      borderColor: status === 'EXPIRED' ? 'geowebColors.cards.cardContainerDisabledBorder' : 'geowebColors.cards.cardContainerBorder',
+      borderRadius: 1,
+      borderWidth: activeWarningId === warning.id ? '1px' : '1px',
+      borderStyle: 'solid'
+    },
+    secondaryAction: jsx(ToggleMenu, {
+      menuTitle: t('warning-list-button-options'),
+      tooltipTitle: t('warning-list-button-options'),
+      menuPosition: "bottom",
+      "aria-label": t('warning-list-button-options'),
+      menuItems: getMenuItems({
+        warning,
+        t,
+        onEditWarning,
+        onDeleteReviewWarning,
+        onDeleteWarning
+      }),
+      buttonIcon: jsx(Options, {})
+    }),
+    "data-testid": `warning-${getSortedStatus(status)}`
+  }, props, {
+    children: jsx(ListItemButton, Object.assign({
       sx: {
-        opacity: 0.67
-      }
-    }, {
-      children: headerText
-    })), warnings.length > 0 && jsx(List, Object.assign({
-      "aria-label": `warninglist ${status}`
+        height: '100%',
+        padding: 1,
+        '.warning-list': {
+          justifyContent: 'left'
+        },
+        [`@container publicWarningList (min-width: ${breakpoints.desktop}px)`]: {
+          '.warning-list': {
+            justifyContent: 'space-between'
+          }
+        }
+      },
+      onClick: () => onSelectWarning(warning),
+      "aria-label": `warning item for ${warning.id}`,
+      selected: activeWarningId === warning.id
     }, {
-      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);
-        return jsx(ListItem, Object.assign({
+      children: jsxs(Grid, Object.assign({
+        className: "warning-list",
+        container: true,
+        item: true,
+        xs: true,
+        rowSpacing: 0,
+        columnSpacing: 2,
+        alignItems: "center"
+      }, {
+        children: [jsx(WarningListColumnContent, Object.assign({
+          title: t('warning-list-header-incident'),
+          status: status,
+          width: 142
+        }, {
+          children: warning.productStatus !== 'DRAFT' ? warning.warningDetail.incident : ''
+        })), jsx(WarningListColumnContent, Object.assign({
+          title: `${t('warning-list-header-last-update')} UTC`,
+          status: status,
+          width: 142
+        }, {
+          children: warning.lastUpdatedTime && dateUtils.dateToString(dateUtils.utc(warning.lastUpdatedTime), dateUtils.DATE_FORMAT_NAME_OF_DAY_MONTH)
+        })), jsx(WarningListColumnContent, Object.assign({
+          title: `${t('warning-list-header-start-time')} UTC`,
+          status: status,
+          width: 142
+        }, {
+          children: warning.warningDetail.validFrom && dateUtils.dateToString(dateUtils.utc(warning.warningDetail.validFrom), dateUtils.DATE_FORMAT_NAME_OF_DAY_MONTH)
+        })), jsx(WarningListColumnContent, Object.assign({
+          title: `${t('warning-list-header-end-time')} UTC`,
+          status: status,
+          width: 142
+        }, {
+          children: warning.warningDetail.validUntil && dateUtils.dateToString(dateUtils.utc(warning.warningDetail.validUntil), dateUtils.DATE_FORMAT_NAME_OF_DAY_MONTH)
+        })), jsx(WarningListColumnContent, Object.assign({
+          title: t('warning-list-header-domain'),
+          status: status
+        }, {
+          children: warning.warningDetail.domain
+        })), jsx(WarningListColumnContent, Object.assign({
+          title: t('warning-list-header-phenomenon'),
+          status: status,
+          width: 140,
           sx: {
-            marginBottom: 0.25,
-            minHeight: '32px',
-            padding: '0 0',
-            backgroundColor: status === 'EXPIRED' ? 'geowebColors.cards.cardContainerDisabled' : 'geowebColors.cards.cardContainer',
-            borderColor: status === 'EXPIRED' ? 'geowebColors.cards.cardContainerDisabledBorder' : 'geowebColors.cards.cardContainerBorder',
-            borderRadius: 1,
-            borderWidth: activeWarningId === warning.id ? '1px' : '1px',
-            borderStyle: 'solid'
-          },
-          secondaryAction: jsx(ToggleMenu, {
-            menuTitle: t('warning-list-button-options'),
-            tooltipTitle: t('warning-list-button-options'),
-            menuPosition: "bottom",
-            "aria-label": t('warning-list-button-options'),
-            menuItems: getMenuItems(warning),
-            buttonIcon: jsx(Options, {})
-          })
+            position: 'relative'
+          }
         }, {
-          children: jsx(ListItemButton, Object.assign({
+          children: jsxs(Box, Object.assign({
+            display: "flex",
+            justifyContent: "space-between",
             sx: {
-              height: '100%',
-              padding: 1,
-              '.warning-list': {
-                justifyContent: 'left'
-              },
-              [`@container publicWarningList (min-width: ${breakpoints.desktop}px)`]: {
-                '.warning-list': {
-                  justifyContent: 'space-between'
-                }
-              }
-            },
-            onClick: () => _onSelectWarning(warning),
-            "aria-label": `warning item for ${warning.id}`,
-            selected: activeWarningId === warning.id
+              flexGrow: 1
+            }
           }, {
-            children: jsxs(Grid, Object.assign({
-              className: "warning-list",
-              container: true,
-              item: true,
-              xs: true,
-              rowSpacing: 0,
-              columnSpacing: 2,
-              alignItems: "center"
+            children: [jsx(Box, Object.assign({
+              display: "inline-block",
+              component: "div",
+              ref: textRef,
+              sx: {
+                textOverflow: 'ellipsis',
+                overflow: 'hidden',
+                width: 90,
+                whiteSpace: 'nowrap'
+              }
             }, {
-              children: [jsx(WarningListColumnContent, {
-                title: t('warning-list-header-incident'),
-                status: status,
-                width: 142
-              }), jsx(WarningListColumnContent, Object.assign({
-                title: `${t('warning-list-header-last-update')} UTC`,
-                status: status,
-                width: 142
-              }, {
-                children: warning.lastUpdatedTime && dateUtils.dateToString(dateUtils.utc(warning.lastUpdatedTime), dateUtils.DATE_FORMAT_NAME_OF_DAY_MONTH)
-              })), jsx(WarningListColumnContent, Object.assign({
-                title: `${t('warning-list-header-start-time')} UTC`,
-                status: status,
-                width: 142
-              }, {
-                children: warning.warningDetail.validFrom && dateUtils.dateToString(dateUtils.utc(warning.warningDetail.validFrom), dateUtils.DATE_FORMAT_NAME_OF_DAY_MONTH)
-              })), jsx(WarningListColumnContent, Object.assign({
-                title: `${t('warning-list-header-end-time')} UTC`,
-                status: status,
-                width: 142
-              }, {
-                children: warning.warningDetail.validUntil && dateUtils.dateToString(dateUtils.utc(warning.warningDetail.validUntil), dateUtils.DATE_FORMAT_NAME_OF_DAY_MONTH)
-              })), jsx(WarningListColumnContent, Object.assign({
-                title: t('warning-list-header-domain'),
-                status: status
-              }, {
-                children: warning.warningDetail.domain
-              })), jsxs(WarningListColumnContent, Object.assign({
-                title: t('warning-list-header-phenomenon'),
-                status: status,
-                width: 140,
-                sx: {
-                  position: 'relative'
-                }
-              }, {
-                children: [(phenomenonDetails === null || phenomenonDetails === void 0 ? void 0 : phenomenonDetails.title) || '-', jsx(Box, Object.assign({
-                  sx: {
-                    position: 'absolute',
-                    right: 0,
-                    bottom: -6
-                  }
-                }, {
-                  children: phenomenonDetails === null || phenomenonDetails === void 0 ? void 0 : phenomenonDetails.icon
-                }))]
-              })), jsx(WarningListColumnContent, Object.assign({
-                title: t('warning-list-header-level'),
-                status: status
-              }, {
-                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
-                  }
-                }, {
-                  children: ((_a = warning.warningDetail) === null || _a === void 0 ? void 0 : _a.level) && (levelDetails === null || levelDetails === void 0 ? void 0 : levelDetails.title) || '-'
-                }))
-              })), jsx(WarningListColumnContent, Object.assign({
-                title: t('warning-list-header-status'),
-                status: status,
-                width: 96
-              }, {
-                children: jsxs(Box, Object.assign({
-                  sx: {
-                    position: 'relative'
-                  }
-                }, {
-                  children: [getStatusIcon(warning), warning.editor && jsx(Box, Object.assign({
+              children: (() => {
+                if (isOverflowing) {
+                  return jsx(CustomTooltip, Object.assign({
+                    title: (phenomenonDetails === null || phenomenonDetails === void 0 ? void 0 : phenomenonDetails.translationKey) ? t(phenomenonDetails.translationKey) : '-',
+                    placement: "top",
                     sx: {
-                      width: '16px',
-                      position: 'absolute',
-                      top: '1px',
-                      right: '-12px'
+                      zIndex: 1000
                     }
                   }, {
-                    children: jsx(WarningAvatar, {
-                      editor: warning.editor
+                    children: jsx("span", {
+                      children: (phenomenonDetails === null || phenomenonDetails === void 0 ? void 0 : phenomenonDetails.translationKey) ? t(phenomenonDetails.translationKey) : '-'
                     })
-                  }))]
-                }))
-              }))]
-            }))
+                  }));
+                }
+                return (phenomenonDetails === null || phenomenonDetails === void 0 ? void 0 : phenomenonDetails.translationKey) ? t(phenomenonDetails.translationKey) : '-';
+              })()
+            })), jsx(Box, Object.assign({
+              sx: {
+                position: 'absolute',
+                right: 0,
+                bottom: -6
+              }
+            }, {
+              children: getPhenomenaIcon(phenomenonDetails === null || phenomenonDetails === void 0 ? void 0 : phenomenonDetails.key)
+            }))]
           }))
-        }), warning.id);
-      })
-    }))]
+        })), jsx(WarningListColumnContent, Object.assign({
+          title: t('warning-list-header-level'),
+          status: status
+        }, {
+          children: jsx(Box, Object.assign({
+            component: "span",
+            sx: getLevelStyle(levelDetails)
+          }, {
+            children: (() => {
+              var _a, _b;
+              if ((_a = warning.warningDetail) === null || _a === void 0 ? void 0 : _a.level) {
+                if (levelDetails === null || levelDetails === void 0 ? void 0 : levelDetails.translationKey) {
+                  // Public warning level
+                  return t(levelDetails.translationKey);
+                }
+                if ((_b = warning.warningDetail) === null || _b === void 0 ? void 0 : _b.level) {
+                  // Aviation level
+                  return jsx("span", Object.assign({
+                    style: {
+                      fontWeight: 'bold'
+                    }
+                  }, {
+                    children: warning.warningDetail.level
+                  }));
+                }
+              }
+              return '-';
+            })()
+          }))
+        })), jsx(WarningListColumnContent, Object.assign({
+          title: t('warning-list-header-status'),
+          status: status,
+          width: 96
+        }, {
+          children: jsxs(Box, Object.assign({
+            sx: {
+              position: 'relative'
+            }
+          }, {
+            children: [getStatusIcon(warning), warning.editor && jsx(Box, Object.assign({
+              sx: {
+                width: '16px',
+                position: 'absolute',
+                top: '1px',
+                right: '-12px'
+              }
+            }, {
+              children: jsx(WarningAvatar, {
+                editor: warning.editor
+              })
+            }))]
+          }))
+        }))]
+      }))
+    }))
+  }), warning.id);
+};
+
+const useHasScrollbar = (containerRef, scrollRef) => {
+  const [hasScrollbar, setHasScrollbar] = React__default.useState(false);
+  React__default.useEffect(() => {
+    let resizeObserver;
+    if (containerRef && containerRef.current && scrollRef) {
+      resizeObserver = new ResizeObserver(entry => {
+        var _a;
+        const containerHeight = entry[0].target.clientHeight;
+        const scrollHeight = (_a = scrollRef.current) === null || _a === void 0 ? void 0 : _a.scrollHeight;
+        if (scrollHeight !== undefined) {
+          setHasScrollbar(scrollHeight > containerHeight);
+        }
+      });
+      resizeObserver.observe(containerRef.current);
+    }
+    return () => {
+      if (resizeObserver) {
+        resizeObserver.disconnect();
+      }
+    };
+  }, [containerRef, scrollRef]);
+  return hasScrollbar;
+};
+const sortWarningsOnStatus = warnings => {
+  return warnings.reduce((allWarnings, warning) => {
+    const status = warning.status || mapProductStatusToWarningStatus(warning.productStatus);
+    if (status === PublicWarningStatus.DRAFT || status === PublicWarningStatus.DRAFT_PUBLISHED) {
+      return Object.assign(Object.assign({}, allWarnings), {
+        draft: allWarnings === null || allWarnings === void 0 ? void 0 : allWarnings.draft.concat(warning)
+      });
+    }
+    if (status === PublicWarningStatus.PUBLISHED) {
+      return Object.assign(Object.assign({}, allWarnings), {
+        published: allWarnings === null || allWarnings === void 0 ? void 0 : allWarnings.published.concat(warning)
+      });
+    }
+    if (status === PublicWarningStatus.TODO) {
+      return Object.assign(Object.assign({}, allWarnings), {
+        todo: allWarnings === null || allWarnings === void 0 ? void 0 : allWarnings.todo.concat(warning)
+      });
+    }
+    if (status === PublicWarningStatus.EXPIRED) {
+      return Object.assign(Object.assign({}, allWarnings), {
+        expired: allWarnings === null || allWarnings === void 0 ? void 0 : allWarnings.expired.concat(warning)
+      });
+    }
+    return allWarnings;
+  }, {
+    todo: [],
+    draft: [],
+    published: [],
+    expired: []
+  });
+};
+const WarningListHeaderContent = _a => {
+  var {
+      title,
+      width = 76
+    } = _a,
+    props = __rest(_a, ["title", "width"]);
+  return jsx(Grid, Object.assign({
+    item: true
+  }, props, {
+    sx: Object.assign(Object.assign({}, props.sx), {
+      width
+    })
+  }, {
+    children: jsx(Box, Object.assign({
+      sx: {
+        overflow: 'hidden',
+        fontWeight: 'normal',
+        textOverflow: 'ellipsis',
+        fontSize: 12,
+        lineHeight: 1.33,
+        height: 16,
+        color: 'geowebColors.captions.captionStatus.rgba'
+      }
+    }, {
+      children: title
+    }))
   }));
 };
 const PublicWarningList = ({
-  warnings,
+  warnings: _warnings = [],
   filters,
   isLoading: _isLoading = false,
   error,
   selectedPublicWarningId: _selectedPublicWarningId = '',
   lastUpdatedTime,
-  onSelectWarning: _onSelectWarning2 = () => {},
-  onEditWarning: _onEditWarning2 = () => {},
+  showSigmet,
+  showAirmet,
+  setShowSigmet,
+  setShowAirmet,
+  onSelectWarning: _onSelectWarning = () => {},
+  onEditWarning: _onEditWarning = () => {},
   onCreateWarning: _onCreateWarning = () => {},
-  onDeleteWarning: _onDeleteWarning2 = () => {},
+  onDeleteWarning: _onDeleteWarning = () => {},
   onRefetchWarnings: _onRefetchWarnings = () => {},
-  onDeleteReviewWarning: _onDeleteReviewWarning2 = () => {},
+  onDeleteReviewWarning: _onDeleteReviewWarning = () => {},
   onClickAllChip: _onClickAllChip = () => {},
   isAllChipSelected: _isAllChipSelected = true
 }) => {
   const {
     t
   } = useWarningsTranslation();
-  const sortedWarnings = warnings ? sortWarningsOnStatus(warnings) : null;
+  const sortedWarnings = sortWarningsOnStatus(_warnings);
+  const items = [{
+    status: PublicWarningStatus.TODO,
+    totalWarnings: sortedWarnings.todo.length
+  }, ...sortedWarnings.todo, {
+    status: PublicWarningStatus.DRAFT,
+    totalWarnings: sortedWarnings.draft.length
+  }, ...sortedWarnings.draft, {
+    status: PublicWarningStatus.PUBLISHED,
+    totalWarnings: sortedWarnings.published.length
+  }, ...sortedWarnings.published, {
+    status: PublicWarningStatus.EXPIRED,
+    totalWarnings: sortedWarnings.expired.length
+  }, ...sortedWarnings.expired];
+  const getItemSize = (index, width) => {
+    const item = items[index];
+    if (item.totalWarnings !== undefined) {
+      return 36;
+    }
+    if (width <= 400) {
+      return 201;
+    }
+    if (width <= 500) {
+      return 101;
+    }
+    if (width <= breakpoints.tablet) {
+      return 81;
+    }
+    if (width <= breakpoints.desktop) {
+      return 71;
+    }
+    return 34;
+  };
+  const filterRef = React__default.useRef(null);
+  const scrollContainerRef = React__default.useRef(null);
+  const listRef = React__default.useRef(null);
+  const listInnerRef = React__default.useRef(null);
+  const resetListIndex = () => {
+    if (listRef.current) {
+      listRef.current.resetAfterIndex(0, true);
+    }
+  };
+  React__default.useEffect(() => {
+    if (listRef.current) {
+      resetListIndex();
+    }
+  }, [_warnings]);
+  const filterHeight = useGetFilterHeight(filterRef);
+  const hasScrollbar = useHasScrollbar(scrollContainerRef, listInnerRef);
   return jsxs(Box, Object.assign({
     sx: {
       padding: 3,
       height: '100%',
-      overflowY: 'auto',
+      overflowY: 'hidden',
       containerName: 'publicWarningList',
       containerType: 'inline-size'
     },
     "data-testid": "publicWarningList"
   }, {
     children: [jsxs(Grid, Object.assign({
-      container: true
+      container: true,
+      justifyItems: "flex-end",
+      ref: filterRef,
+      sx: {
+        [`@container publicWarningList (max-width: ${breakpoints.tablet}px)`]: {
+          ' .MuiGrid-grid-sm-12': {
+            maxWidth: '100%',
+            flexBasis: '100%'
+          },
+          ' .warning-filter': {
+            order: 2
+          },
+          ' .create-warning': {
+            order: 1
+          }
+        }
+      }
     }, {
       children: [jsx(Grid, Object.assign({
+        className: "warning-filter",
         item: true,
         xs: 12,
-        sm: true
+        sm: 12,
+        md: 8,
+        order: {
+          xs: 2,
+          md: 1
+        }
       }, {
         children: jsx(FilterList, {
           filters: filters,
           isAllSelected: _isAllChipSelected,
-          onClickAll: _onClickAllChip
+          onClickAll: _onClickAllChip,
+          showSigmet: showSigmet,
+          showAirmet: showAirmet,
+          setShowSigmet: setShowSigmet,
+          setShowAirmet: setShowAirmet
         })
-      })), jsx(Grid, Object.assign({
+      })), jsxs(Grid, Object.assign({
+        className: "create-warning",
         item: true,
-        xs: "auto"
+        xs: 12,
+        sm: 12,
+        md: 4,
+        order: {
+          xs: 1,
+          md: 2
+        },
+        sx: {
+          display: 'flex'
+        },
+        justifyContent: "flex-end",
+        alignItems: "self-start"
       }, {
-        children: jsx(Button, Object.assign({
+        children: [lastUpdatedTime && jsx(Box, Object.assign({
+          sx: {
+            float: 'left',
+            minWidth: 140,
+            paddingTop: 0.5
+          }
+        }, {
+          children: jsx(LastUpdateTime, {
+            onPressRefresh: _onRefetchWarnings,
+            lastUpdateTime: lastUpdatedTime
+          })
+        })), jsx(Button, Object.assign({
           variant: "primary",
           onClick: _onCreateWarning,
           sx: {
@@ -14158,22 +14821,19 @@ const PublicWarningList = ({
             marginBottom: '8px',
             fontSize: '12px',
             height: '32px',
-            whiteSpace: 'nowrap'
+            whiteSpace: 'nowrap',
+            minWidth: 'auto'
           }
         }, {
           children: t('warning-list-button_create')
-        }))
+        }))]
       }))]
     })), error && jsx(AlertBanner, {
       title: error.message,
       shouldClose: true
-    }), _isLoading ? jsx(LinearProgress, {
+    }), _isLoading && jsx(LinearProgress, {
       "data-testid": "loading-bar",
       color: "secondary"
-    }) : jsx(Box, {
-      sx: {
-        height: '4px'
-      }
     }), !error && jsxs(Grid, Object.assign({
       container: true,
       rowSpacing: 0,
@@ -14183,9 +14843,12 @@ const PublicWarningList = ({
       sx: {
         maxWidth: '100%',
         display: 'none',
-        [`@container publicWarningList (min-width: ${breakpoints.desktop}px)`]: {
+        marginTop: '4px',
+        [`@container publicWarningList (min-width: ${breakpoints.desktop}px)`]: Object.assign({
           display: 'flex'
-        }
+        }, hasScrollbar && {
+          paddingRight: 2
+        })
       }
     }, {
       children: [jsx(WarningListHeaderContent, {
@@ -14217,53 +14880,57 @@ const PublicWarningList = ({
           marginRight: '48px'
         }
       })]
-    })), lastUpdatedTime && jsx(Box, Object.assign({
+    })), sortedWarnings && !error && jsx(Box, Object.assign({
+      "data-testid": "warnings-list",
       sx: {
-        marginBottom: -3.25,
-        button: {
-          marginRight: 0
-        }
-      }
+        height: `calc(100% - ${filterHeight}px)`,
+        minHeight: '206px'
+      },
+      ref: scrollContainerRef
     }, {
-      children: jsx(LastUpdateTime, {
-        onPressRefresh: _onRefetchWarnings,
-        lastUpdateTime: lastUpdatedTime
-      })
-    })), sortedWarnings && !error && jsxs(Fragment, {
-      children: [jsx(WarningsOnStatus, {
-        status: "TODO",
-        warnings: sortedWarnings.todo,
-        onSelectWarning: _onSelectWarning2,
-        onEditWarning: _onEditWarning2,
-        onDeleteWarning: _onDeleteWarning2,
-        onDeleteReviewWarning: _onDeleteReviewWarning2,
-        activeWarningId: _selectedPublicWarningId
-      }), jsx(WarningsOnStatus, {
-        status: "DRAFT",
-        warnings: sortedWarnings.draft,
-        onSelectWarning: _onSelectWarning2,
-        onEditWarning: _onEditWarning2,
-        onDeleteWarning: _onDeleteWarning2,
-        onDeleteReviewWarning: _onDeleteReviewWarning2,
-        activeWarningId: _selectedPublicWarningId
-      }), jsx(WarningsOnStatus, {
-        status: "PUBLISHED",
-        warnings: sortedWarnings.published,
-        onSelectWarning: _onSelectWarning2,
-        onEditWarning: _onEditWarning2,
-        onDeleteWarning: _onDeleteWarning2,
-        onDeleteReviewWarning: _onDeleteReviewWarning2,
-        activeWarningId: _selectedPublicWarningId
-      }), jsx(WarningsOnStatus, {
-        status: "EXPIRED",
-        warnings: sortedWarnings.expired,
-        onSelectWarning: _onSelectWarning2,
-        onEditWarning: _onEditWarning2,
-        onDeleteWarning: _onDeleteWarning2,
-        onDeleteReviewWarning: _onDeleteReviewWarning2,
-        activeWarningId: _selectedPublicWarningId
-      })]
-    })]
+      children: jsx(AutoSizer, Object.assign({
+        onResize: resetListIndex
+      }, {
+        children: ({
+          height: _height = 0,
+          width: _width = 0
+        }) => jsx(VariableSizeList, Object.assign({
+          height: _height,
+          width: _width,
+          itemCount: items.length,
+          itemSize: index => getItemSize(index, _width),
+          ref: listRef,
+          innerRef: listInnerRef
+        }, {
+          children: ({
+            index,
+            style
+          }) => {
+            const warning = items[index];
+            const key = `warning-${warning.status}-${index}`;
+            if (warning.totalWarnings !== undefined) {
+              const header = warning;
+              return jsx(WarningListItemSeperator, {
+                status: header.status,
+                totalWarnings: header.totalWarnings,
+                style: style
+              }, key);
+            }
+            const publicWarning = warning;
+            return jsx(WarningListItem, {
+              style: style,
+              status: publicWarning.status,
+              warning: publicWarning,
+              onSelectWarning: _onSelectWarning,
+              onEditWarning: _onEditWarning,
+              onDeleteWarning: _onDeleteWarning,
+              onDeleteReviewWarning: _onDeleteReviewWarning,
+              activeWarningId: _selectedPublicWarningId
+            }, key);
+          }
+        }))
+      }))
+    }))]
   }));
 };
 
@@ -14448,13 +15115,25 @@ const PublicWarningListConnect = () => {
   const {
     auth
   } = useAuthenticationContext();
+  const {
+    data: airmetList,
+    refetch: refetchAirmetList,
+    isFetching: isFetchingAirmet
+  } = useAirmetList();
+  const {
+    data: sigmetList,
+    refetch: refetchSigmetList,
+    isFetching: isFetchingSigmet
+  } = useSigmetList();
+  const [showAirmet, setShowAirmet] = React__default.useState(false);
+  const [showSigmet, setShowSigmet] = React__default.useState(false);
   const [confirmDialogOptions, setConfirmDialogOptions] = React__default.useState(undefined);
   const filters = useSelector(selectAllFilters);
   const isAllChipSelected = useSelector(getIsAllSelected);
   const filteredWarnings = useSelector(getFilteredWarnings);
   const warnings = useSelector(selectAllPublicWarnings);
   const selectedPublicWarningId = useSelector(getSelectedPublicWarningId);
-  const isLoading = useSelector(isPublicWarningsLoading);
+  const isLoading = useSelector(isPublicWarningsLoading || isFetchingAirmet || isFetchingSigmet);
   const error = useSelector(getPublicWarningsError);
   const isFormDirty = useSelector(getSelectedPublicIsFormDirty);
   const lastUpdatedTime = useSelector(getPublicWarningsLastUpdatedTime);
@@ -14510,7 +15189,7 @@ const PublicWarningListConnect = () => {
   };
   const deleteReviewWarning = warning => {
     const ignoredWarning = Object.assign(Object.assign({}, warning), {
-      status: 'IGNORED'
+      status: PublicWarningStatus.IGNORED
     });
     setConfirmDialogOptions({
       confirmLabel: t('warning-dialog-delete-confirm'),
@@ -14534,8 +15213,10 @@ const PublicWarningListConnect = () => {
     fetchWarnings();
   };
   const fetchWarnings = React__default.useCallback(() => {
+    refetchAirmetList();
+    refetchSigmetList();
     dispatch(publicWarningActions.fetchWarnings());
-  }, [dispatch]);
+  }, [dispatch, refetchAirmetList, refetchSigmetList]);
   const onClickAllChip = React__default.useCallback(isChecked => {
     dispatch(publicWarningActions.toggleAllFilters({
       isChecked
@@ -14551,9 +15232,15 @@ const PublicWarningListConnect = () => {
       warnings
     }));
   }, [dispatch, warnings]);
+  const transformedSigmets = (sigmetList === null || sigmetList === void 0 ? void 0 : sigmetList.map(transformSigmetToWarningFormat)) || [];
+  const transformedAirmets = (airmetList === null || airmetList === void 0 ? void 0 : airmetList.map(transformAirmetToWarningFormat)) || [];
+  const combinedWarnings = filteredWarnings.concat(showSigmet ? transformedSigmets : []).concat(showAirmet ? transformedAirmets : []).sort((w1, w2) => {
+    var _a;
+    return ((_a = w2.lastUpdatedTime) === null || _a === void 0 ? void 0 : _a.localeCompare(w1.lastUpdatedTime || '')) || 0;
+  });
   return jsxs(Fragment, {
     children: [jsx(PublicWarningList, {
-      warnings: filteredWarnings,
+      warnings: combinedWarnings,
       isLoading: isLoading,
       error: error,
       onSelectWarning: selectWarning,
@@ -14566,7 +15253,11 @@ const PublicWarningListConnect = () => {
       onRefetchWarnings: fetchWarnings,
       filters: filters,
       isAllChipSelected: isAllChipSelected,
-      onClickAllChip: onClickAllChip
+      onClickAllChip: onClickAllChip,
+      showSigmet: showSigmet,
+      showAirmet: showAirmet,
+      setShowSigmet: setShowSigmet,
+      setShowAirmet: setShowAirmet
     }), confirmDialogOptions && jsx(ConfirmDeleteWarningDialog, {
       onClose: () => setConfirmDialogOptions(undefined),
       title: confirmDialogOptions.title,