@opengeoweb/warnings 9.16.0 → 9.17.0

package/index.esm.js

@@ -3,23 +3,23 @@ import React__default, { useState, useEffect, useRef } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { Polygons, Share, ExitDomain, Edit, Delete, DrawPolygon, Visibility, Add, Wind, Fog, Lightning, Snow, Rain, TemperatureHigh, TemperatureLow, CoastalEvent, breakpoints, Options, VisibilityOff, Success } from '@opengeoweb/theme';
 import { uiTypes, uiActions, getSingularDrawtoolDrawLayerId, drawtoolSelectors, layerSelectors, uiSelectors, mapStoreActions, drawtoolActions, layerActions, useSetupDialog } from '@opengeoweb/store';
-import { emptyGeoJSON, MapControlButton, getIcon, rewindGeometry, getGeoJSONPropertyValue, currentlySupportedDrawModes, MapView, MapViewLayer, defaultLayers, getFeatureExtent } from '@opengeoweb/webmap-react';
+import { defaultPolygon, emptyGeoJSON, MapControlButton, getIcon, rewindGeometry, getGeoJSONPropertyValue, currentlySupportedDrawModes, MapView, MapViewLayer, defaultLayers, getFeatureExtent } from '@opengeoweb/webmap-react';
 import { handleOutsideComponentTranslations, useConfirmationDialog, ToggleMenu, dateUtils, calculateStartSize, ToolContainerDraggable, AlertBanner, ConfirmationDialog, getAxiosErrorMessage, usePrevious, CustomIconButton, CustomTooltip, Avatar, getInitials, SwitchButton, LastUpdateTime, StatusTag, ErrorBoundary, pollingIntervalTimeout, isAxiosError as isAxiosError$1 } from '@opengeoweb/shared';
-import { useTranslation } from 'react-i18next';
 import { createEntityAdapter, createSlice, createSelector, createListenerMiddleware, isAnyOf } from '@reduxjs/toolkit';
 import 'i18next';
+import { useTranslation } from 'react-i18next';
+import { defaultBbox } from '@opengeoweb/core';
 import { snackbarActions } from '@opengeoweb/snackbar';
 import { styled, Box, Typography, ListItem, Grid, Paper, ListItemButton, Stack, LinearProgress, Button, FormHelperText, MenuItem, Tabs, Tab, FormControl, Card, CardContent, ListItemIcon, CircularProgress, List } from '@mui/material';
 import { VariableSizeList } from 'react-window';
 import AutoSizer from 'react-virtualized-auto-sizer';
-import { DATE_FORMAT_FNS, ReactHookFormHiddenInput, isValidGeoJsonCoordinates, ReactHookFormSelect, ReactHookFormTextField, ReactHookFormProvider, defaultFormOptions, useDraftFormHelpers, errorMessages, ReactHookFormDateTime, isValidDate, isXHoursBefore, isXHoursAfter, isEmpty } from '@opengeoweb/form-fields';
 import { getApi, createApiInstance, createNonAuthApiInstance, createFakeApiInstance, ApiProvider } from '@opengeoweb/api';
+import { ReactHookFormHiddenInput, isValidGeoJsonCoordinates, ReactHookFormSelect, ReactHookFormTextField, ReactHookFormProvider, defaultFormOptions, useDraftFormHelpers, errorMessages, ReactHookFormDateTime, isXHoursBefore, isXHoursAfter, isEmpty } from '@opengeoweb/form-fields';
 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, WMBBOX } from '@opengeoweb/webmap';
-import { defaultBbox } from '@opengeoweb/core';
 import { isAxiosError } from 'axios';
 
 var en = {
@@ -124,6 +124,7 @@ var en = {
 	"warning-list-header-domain": "Domain",
 	"warning-list-header-phenomenon": "Phenomenon",
 	"warning-list-header-level": "Level",
+	"warning-list-header-status": "Status",
 	"warning-list-header-draft": "DRAFT"
 };
 var nl = {
@@ -228,6 +229,7 @@ var nl = {
 	"warning-list-header-domain": "Domein",
 	"warning-list-header-phenomenon": "Fenomeen",
 	"warning-list-header-level": "Hoogte",
+	"warning-list-header-status": "Status",
 	"warning-list-header-draft": "CONCEPT"
 };
 var fi = {
@@ -332,111 +334,113 @@ var fi = {
 	"warning-list-header-domain": "ei käännetty",
 	"warning-list-header-phenomenon": "ei käännetty",
 	"warning-list-header-level": "ei käännetty",
+	"warning-list-header-status": "ei käännetty",
 	"warning-list-header-draft": "ei käännetty"
 };
 var no = {
-	"drawing-tool-form-tools": "ikke oversatt",
-	"drawing-tool-form-opacity": "ikke oversatt",
-	"drawing-tool-form-object-name": "ikke oversatt",
-	"drawing-tool-form-save": "ikke oversatt",
-	"drawing-tool-form-update": "ikke oversatt",
-	"drawing-tool-form-exit-draw-mode": "ikke oversatt",
-	"drawing-tool-form-drawing-required": "ikke oversatt",
-	"close-dialog-cancel": "ikke oversatt",
-	"close-dialog-confirm": "ikke oversatt",
-	"close-draw-dialog-title": "ikke oversatt",
-	"close-dialog-description": "ikke oversatt",
-	"drawing-tool-title": "ikke oversatt",
-	"object-manager-title": "ikke oversatt",
-	"object-manager-add": "ikke oversatt",
-	"delete-dialog-cancel": "ikke oversatt",
-	"delete-dialog-confirm": "ikke oversatt",
-	"delete-dialog-title": "ikke oversatt",
-	"delete-dialog-description": "ikke oversatt",
-	"delete-succes": "ikke oversatt",
-	"update-succes": "ikke oversatt",
-	"save-succes": "ikke oversatt",
-	"object-manager-no-objects": "ikke oversatt",
-	"object-manager-options-menu": "ikke oversatt",
-	"object-manager-button-edit": "ikke oversatt",
-	"object-manager-button-share": "ikke oversatt",
-	"object-manager-button-delete": "ikke oversatt",
-	"object-manager-button-view": "ikke oversatt",
-	"object-manager-no-object-selected": "ikke oversatt",
-	"object-manager-object-selected": "ikke oversatt",
-	"object-manager-share-menu": "ikke oversatt",
-	"public-warning-title": "ikke oversatt",
-	"close-warning-dialog-title": "ikke oversatt",
-	"warning-edit-mode-title": "ikke oversatt",
-	"warning-edit-mode-description": "ikke oversatt",
-	"warning-dialog-cancel": "ikke oversatt",
-	"warning-edit-mode-confirm": "ikke oversatt",
-	"warning-view-mode-title": "ikke oversatt",
-	"warning-view-mode-description": "ikke oversatt",
-	"warning-view-mode-confirm": "ikke oversatt",
-	"warning-probability": "ikke oversatt",
-	"warning-button-clear": "ikke oversatt",
-	"warning-button-save": "ikke oversatt",
-	"warning-button-saving": "ikke oversatt",
-	"warning-button-publish": "ikke oversatt",
-	"warning-button-publishing": "ikke oversatt",
-	"warning-area": "ikke oversatt",
-	"warning-button-add-object": "ikke oversatt",
-	"warning-description-original": "ikke oversatt",
-	"warning-description-translation": "ikke oversatt",
-	"warning-description-NL": "ikke oversatt",
-	"warning-level": "ikke oversatt",
-	"warning-level-moderate": "ikke oversatt",
-	"warning-level-severe": "ikke oversatt",
-	"warning-level-extreme": "ikke oversatt",
-	"warning-phenomenon": "ikke oversatt",
-	"warning-phenomenon-wind": "ikke oversatt",
-	"warning-phenomenon-fog": "ikke oversatt",
-	"warning-phenomenon-thunderstorm": "ikke oversatt",
-	"warning-phenomenon-snow-ice": "ikke oversatt",
-	"warning-phenomenon-rain": "ikke oversatt",
-	"warning-phenomenon-high-temp": "ikke oversatt",
-	"warning-phenomenon-low-temp": "ikke oversatt",
-	"warning-phenomenon-funnel-cloud": "ikke oversatt",
-	"warning-phenomenon-coastal-event": "ikke oversatt",
-	"warning-probability-moderate-level-invalid": "ikke oversatt",
-	"warning-valid-from": "ikke oversatt",
-	"warning-valid-until": "ikke oversatt",
-	"warning-valid-from-error-before-current": "ikke oversatt",
-	"warning-valid-from-error-max-hours": "ikke oversatt",
-	"warning-valid-until-error-before-current": "ikke oversatt",
-	"warning-valid-until-error-max-hours": "ikke oversatt",
-	"warning-valid-until-error-min-hours": "ikke oversatt",
-	"warning-dialog-delete-succes": "ikke oversatt",
-	"warning-dialog-delete-title": "ikke oversatt",
-	"warning-dialog-delete-confirm": "ikke oversatt",
-	"warning-dialog-delete-description": "ikke oversatt",
-	"warning-dialog-ignore-succes": "ikke oversatt",
-	"warning-dialog-ignore-title": "ikke oversatt",
-	"warning-dialog-ignore-confirm": "ikke oversatt",
-	"warning-dialog-ignore-description": "ikke oversatt",
-	"warning-save-succes": "ikke oversatt",
-	"warning-publish-succes": "ikke oversatt",
-	"warning-editor-user-viewer": "ikke oversatt",
-	"warning-editor-user-editor": "ikke oversatt",
-	"warning-editor-add-editor": "ikke oversatt",
-	"warning-editor-remove-editor": "ikke oversatt",
-	"warning-list-button_create": "ikke oversatt",
-	"warning-list-button-use": "ikke oversatt",
-	"warning-list-button-ignore": "ikke oversatt",
-	"warning-list-button-options": "ikke oversatt",
-	"warning-list-status-draft": "ikke oversatt",
-	"warning-list-status-published": "ikke oversatt",
-	"warning-list-status-todo": "ikke oversatt",
-	"warning-list-status-expired": "ikke oversatt",
-	"warning-list-header-incident": "ikke oversatt",
-	"warning-list-header-last-update": "ikke oversatt",
-	"warning-list-header-start-time": "ikke oversatt",
-	"warning-list-header-end-time": "ikke oversatt",
-	"warning-list-header-domain": "ikke oversatt",
-	"warning-list-header-phenomenon": "ikke oversatt",
-	"warning-list-header-level": "ikke oversatt",
-	"warning-list-header-draft": "ikke oversatt"
+	"drawing-tool-form-tools": "Verktøy",
+	"drawing-tool-form-opacity": "Gjennomsiktighet",
+	"drawing-tool-form-object-name": "Objektnavn",
+	"drawing-tool-form-save": "Lagre nytt objekt",
+	"drawing-tool-form-update": "Oppdater objekt",
+	"drawing-tool-form-exit-draw-mode": "Trykk ESC for å avslutte tegnemodus",
+	"drawing-tool-form-drawing-required": "Objekttegning kreves",
+	"close-dialog-cancel": "Avbryt",
+	"close-dialog-confirm": "Lukk",
+	"close-draw-dialog-title": "Lukk tegneverktøy",
+	"close-dialog-description": "Du har gjort endringer, er du sikker på at du vil lukke?",
+	"drawing-tool-title": "Tegneverktøy",
+	"object-manager-title": "Objektmanager for",
+	"object-manager-add": "Legg til nytt objekt",
+	"delete-dialog-cancel": "Avbryt",
+	"delete-dialog-confirm": "Slett",
+	"delete-dialog-title": "Slett objekt",
+	"delete-dialog-description": "Er du sikker på at du vil slette?",
+	"delete-succes": "er slettet",
+	"update-succes": "er oppdatert",
+	"save-succes": "er lagret",
+	"object-manager-no-objects": "Fant ingen objekter",
+	"object-manager-options-menu": "Objektvalg",
+	"object-manager-button-edit": "Endre",
+	"object-manager-button-share": "Del",
+	"object-manager-button-delete": "Slett",
+	"object-manager-button-view": "Vis",
+	"object-manager-no-object-selected": "(ingen objekt er valgt)",
+	"object-manager-object-selected": "objekt er valgt",
+	"object-manager-share-menu": "Del objekt med",
+	"public-warning-title": "Farevarsel",
+	"close-warning-dialog-title": "Lukk farevarsel",
+	"warning-edit-mode-title": "Bytt til editeringsmodus",
+	"warning-edit-mode-description": "Dette varselet er allerede under endring av en annen bruker. Viktig informasjon kan gå tapt ved å bytte",
+	"warning-dialog-cancel": "Gå tilbake",
+	"warning-edit-mode-confirm": "Editeringsmodus",
+	"warning-view-mode-title": "Whoops",
+	"warning-view-mode-description": "Er du sikker på at du vil endre til visningsmodus? Ulagret endringer vil gå tapt.",
+	"warning-view-mode-confirm": "Bytt modus",
+	"warning-probability": "Sannsynlighet",
+	"warning-button-clear": "Slett",
+	"warning-button-save": "Lagre",
+	"warning-button-saving": "Lagrer",
+	"warning-button-publish": "Publiser",
+	"warning-button-publishing": "Publiserer",
+	"warning-area": "Område",
+	"warning-button-add-object": "Legg til objekt",
+	"warning-description-original": "Original beskrivelse",
+	"warning-description-translation": "Oversatt beskrivelse",
+	"warning-description-NL": "Nederlandsk (valgt)",
+	"warning-level": "Grad",
+	"warning-level-moderate": "Moderat",
+	"warning-level-severe": "Stor",
+	"warning-level-extreme": "Ekstrem",
+	"warning-phenomenon": "Fenomen",
+	"warning-phenomenon-wind": "Vind",
+	"warning-phenomenon-fog": "Tåke",
+	"warning-phenomenon-thunderstorm": "Tordenvær",
+	"warning-phenomenon-snow-ice": "Snø/is",
+	"warning-phenomenon-rain": "Regn",
+	"warning-phenomenon-high-temp": "Høy temperatur",
+	"warning-phenomenon-low-temp": "Lav temperatur",
+	"warning-phenomenon-funnel-cloud": "Tornado",
+	"warning-phenomenon-coastal-event": "Kysthendelse",
+	"warning-probability-moderate-level-invalid": "Sannsynlighet bør være minst 30% når level er moderat",
+	"warning-valid-from": "Gyldig fra",
+	"warning-valid-until": "Gyldig til",
+	"warning-valid-from-error-before-current": "Gyldig fra kan ikke være før nåtid",
+	"warning-valid-from-error-max-hours": "Gyldig fra kan ikke være mer enn {{MAX_HOURS}} timer etter nåtid",
+	"warning-valid-until-error-before-current": "Gyldig til kan ikke være før nåtid",
+	"warning-valid-until-error-max-hours": "Gyldig til kan ikke være mer enn {{MAX_HOURS}} timer etter nåtid",
+	"warning-valid-until-error-min-hours": "Gyldig til må være minst {{MIN_HOURS}} timer etter Gyldig fra",
+	"warning-dialog-delete-succes": "Varselet er slettet",
+	"warning-dialog-delete-title": "Slett varsel",
+	"warning-dialog-delete-confirm": "Slett",
+	"warning-dialog-delete-description": "Er du sikker på at du vil slette varselet?",
+	"warning-dialog-ignore-succes": "Varselet er blitt ignorert",
+	"warning-dialog-ignore-title": "Ignorer varselet",
+	"warning-dialog-ignore-confirm": "Ignorer",
+	"warning-dialog-ignore-description": "Er du sikker på at du vil ignorere dette varselet?",
+	"warning-save-succes": "Farevarselet er lagret!",
+	"warning-publish-succes": "Farevarselet er publisert!",
+	"warning-editor-user-viewer": "Visningsmodus",
+	"warning-editor-user-editor": "Editeringsmodus",
+	"warning-editor-add-editor": "Du editerer nå dette varselet",
+	"warning-editor-remove-editor": "Du editerer ikke lenger dette varselet",
+	"warning-list-button_create": "Lag et farevarsel",
+	"warning-list-button-use": "Bruk",
+	"warning-list-button-ignore": "Ignorer",
+	"warning-list-button-options": "Valg",
+	"warning-list-status-draft": "Utkast",
+	"warning-list-status-published": "Publisert",
+	"warning-list-status-todo": "Til sjekk",
+	"warning-list-status-expired": "Utgått (siste 24 timer)",
+	"warning-list-header-incident": "Hendelse",
+	"warning-list-header-last-update": "Sist oppdatert",
+	"warning-list-header-start-time": "Starttid",
+	"warning-list-header-end-time": "Sluttid",
+	"warning-list-header-domain": "Domene",
+	"warning-list-header-phenomenon": "Fenomen",
+	"warning-list-header-level": "Level",
+	"warning-list-header-status": "Status",
+	"warning-list-header-draft": "UTKAST"
 };
 var warningsTranslations = {
 	en: en,
@@ -647,6 +651,7 @@ const getWarningFormDirty = createSelector(selectDrawByInstanceId, drawing => (d
  * */
 const WARN_NAMESPACE = 'warn';
 const outsideComponentTranslations = handleOutsideComponentTranslations(warningsTranslations, WARN_NAMESPACE);
+const useWarningsTranslation = () => useTranslation(WARN_NAMESPACE);
 
 /* *
  * Licensed under the Apache License, Version 2.0 (the "License");
@@ -679,7 +684,7 @@ const useCloseDrawDialog = ({
 }) => {
   const {
     t
-  } = useTranslation(WARN_NAMESPACE);
+  } = useWarningsTranslation();
   const dispatch = useDispatch();
   const drawLayerId = getSingularDrawtoolDrawLayerId(mapId);
   const drawDialogActiveDrawModeId = useSelector(store => drawtoolSelectors.getActiveDrawModeId(store, drawingDialogType));
@@ -793,7 +798,7 @@ const useObjectDrawDialogAction = ({
 }) => {
   const {
     t
-  } = useTranslation(WARN_NAMESPACE);
+  } = useWarningsTranslation();
   const dispatch = useDispatch();
   const confirmDialog = useConfirmationDialog();
   const currentDrawLayerId = getSingularDrawtoolDrawLayerId(mapId);
@@ -872,6 +877,13 @@ const useObjectDrawDialogAction = ({
       drawToolId: drawingDialogType,
       geoJSONLayerId: currentDrawLayerId
     }));
+    // activate default draw mode
+    if (!drawDialogActiveDrawModeId && !isDrawDialogOpen) {
+      dispatch(drawtoolActions.changeDrawToolMode({
+        drawToolId: drawingDialogType,
+        drawModeId: defaultPolygon.drawModeId
+      }));
+    }
     // move shape to screen
     if (isDrawDialogOpen && drawDialogLayerHasGeoJSON) {
       // update new shape
@@ -2682,7 +2694,6 @@ $$5({ target: 'Array', proto: true, arity: 1, forced: FORCED$3 }, {
  * Copyright 2023 - Finnish Meteorological Institute (FMI)
  * */
 const DATE_FORMAT_HEADER = 'EEEE, MMMM dd';
-const DATE_FORMAT_LASTUPDATEDTIME = 'HH:mm';
 
 const DEFAULT_ADD_BUTTON_HEIGHT = 80;
 const OBJECT_ITEM_SIZE = 50;
@@ -2760,7 +2771,7 @@ const Objects = ({
 }) => {
   const {
     t
-  } = useTranslation(WARN_NAMESPACE);
+  } = useWarningsTranslation();
   const listRef = React__default.useRef(null);
   const {
     listInclHeaders,
@@ -2927,7 +2938,7 @@ const Objects = ({
         maxHeight: '32px',
         overflow: 'hidden'
       }
-    }, object.scope === 'global' && 'Global: ', `${dateUtils.dateToString(dateUtils.utc(object.lastUpdatedTime), DATE_FORMAT_FNS)} UTC`))))));
+    }, object.scope === 'global' && 'Global: ', `${dateUtils.dateToString(dateUtils.utc(object.lastUpdatedTime), dateUtils.DATE_FORMAT_DATEPICKER)} UTC`))))));
   })))));
 };
 
@@ -2967,7 +2978,7 @@ const ObjectManager = ({
 }) => {
   const {
     t
-  } = useTranslation(WARN_NAMESPACE);
+  } = useWarningsTranslation();
   const minSize = DEFAULT_OBJECT_MANAGER_MIN_SIZE;
   const startSizeCalc = calculateStartSize(minSize, _size, _startPosition);
   const [sizeInState, setSizeInState] = React.useState(startSizeCalc);
@@ -3125,7 +3136,7 @@ const ConfirmDeleteDialog = ({
 }) => {
   const {
     t
-  } = useTranslation(WARN_NAMESPACE);
+  } = useWarningsTranslation();
   const warningsApi = getWarningsApi();
   const [isLoading, setIsLoading] = React__default.useState(false);
   const [error, setError] = React__default.useState(undefined);
@@ -3404,7 +3415,7 @@ const ObjectManagerConnect = ({
 }) => {
   const {
     t
-  } = useTranslation(WARN_NAMESPACE);
+  } = useWarningsTranslation();
   const {
     dialogOrder,
     setDialogOrder,
@@ -5895,7 +5906,7 @@ const DrawingToolMapButtonConnect = ({
 }) => {
   const {
     t
-  } = useTranslation(WARN_NAMESPACE);
+  } = useWarningsTranslation();
   // const drawingDialogType = isMultiMap
   //   ? `${uiTypes.DialogTypes.DrawingTool}-${mapId}`
   //   : uiTypes.DialogTypes.DrawingTool;
@@ -5950,7 +5961,7 @@ const DrawingTool = ({
 }) => {
   const {
     t
-  } = useTranslation(WARN_NAMESPACE);
+  } = useWarningsTranslation();
   const minSize = DEFAULT_DRAW_TOOL_MIN_SIZE;
   const startSizeCalc = calculateStartSize(minSize, _size, _startPosition);
   const [sizeInState, setSizeInState] = React.useState(startSizeCalc);
@@ -6151,7 +6162,7 @@ const DrawingToolFormContentsNoMemo = ({
 }) => {
   const {
     t
-  } = useTranslation(WARN_NAMESPACE);
+  } = useWarningsTranslation();
   const hasErrors = Object.keys(errors).length > 0;
   return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Box, {
     sx: {
@@ -6273,7 +6284,7 @@ const DrawingToolFormContentsNoMemo = ({
 };
 const DrawingToolFormContents = /*#__PURE__*/React__default.memo(DrawingToolFormContentsNoMemo, isEqual);
 
-const getObjectName$1 = objectName => objectName || `${dateUtils.dateToString(new Date(), DATE_FORMAT_FNS, true)} UTC`;
+const getObjectName$1 = objectName => objectName || `${dateUtils.dateToString(new Date(), dateUtils.DATE_FORMAT_DATEPICKER, true)} UTC`;
 const DrawingToolForm = ({
   onSubmitForm,
   isLoading: _isLoading = false,
@@ -6313,7 +6324,7 @@ const DrawingToolForm = ({
     }
   });
   React.useEffect(() => {
-    if (_activeDrawModeId) {
+    if (_activeDrawModeId || _activeDrawModeId === '') {
       setValue('geoJSON', geoJSON, {
         shouldDirty: true
       });
@@ -6525,7 +6536,7 @@ const DrawingToolConnect = ({
 }) => {
   const {
     t
-  } = useTranslation(WARN_NAMESPACE);
+  } = useWarningsTranslation();
   const dialogType = getDialogType(initialMapId, _isMultiMap);
   const activeMapId = useSelector(store => uiSelectors.getDialogMapId(store, dialogType));
   // In case of a multimap, use the map id that is passed
@@ -6629,7 +6640,7 @@ const PublicWarningsFormDialog = ({
 }) => {
   const {
     t
-  } = useTranslation(WARN_NAMESPACE);
+  } = useWarningsTranslation();
   const minSize = DEFAULT_WARNING_DIALOG_MIN_SIZE;
   const startSizeCalc = calculateStartSize(minSize, _size, _startPosition);
   const [sizeInState, setSizeInState] = React.useState(startSizeCalc);
@@ -7366,7 +7377,7 @@ const tabStyle = {
 const CustomTabPanel = props => {
   const {
     t
-  } = useTranslation(WARN_NAMESPACE);
+  } = useWarningsTranslation();
   const {
       children,
       value,
@@ -7417,7 +7428,7 @@ const DescriptionField = ({
 }) => {
   const {
     t
-  } = useTranslation(WARN_NAMESPACE);
+  } = useWarningsTranslation();
   const {
     isRequired
   } = useDraftFormHelpers();
@@ -7497,7 +7508,7 @@ const DescriptionField = ({
   })));
 };
 
-const formatDate = lastUpdatedTime => dateUtils.dateToString(dateUtils.isoStringToDate(lastUpdatedTime), `${DATE_FORMAT_FNS} 'UTC'`);
+const formatDate = lastUpdatedTime => dateUtils.dateToString(dateUtils.isoStringToDate(lastUpdatedTime, false), `${dateUtils.DATE_FORMAT_DATEPICKER} 'UTC'`);
 const getObjectName = (geoJSON, objectName, t) => {
   if (geoJSON) {
     return objectName || t('object-manager-object-selected');
@@ -7513,7 +7524,7 @@ const AreaField = ({
 }) => {
   const {
     t
-  } = useTranslation(WARN_NAMESPACE);
+  } = useWarningsTranslation();
   const {
     getValues,
     formState: {
@@ -7671,7 +7682,7 @@ const Phenomenon = ({
 }) => {
   const {
     t
-  } = useTranslation(WARN_NAMESPACE);
+  } = useWarningsTranslation();
   const {
     isRequired
   } = useDraftFormHelpers();
@@ -7736,7 +7747,7 @@ const LevelField = ({
 }) => {
   const {
     t
-  } = useTranslation(WARN_NAMESPACE);
+  } = useWarningsTranslation();
   const {
     isRequired
   } = useDraftFormHelpers();
@@ -7809,7 +7820,9 @@ const LevelField = ({
  * Copyright 2023 - Finnish Meteorological Institute (FMI)
  * */
 const VALID_FROM_MAX_HOURS_AFTER_CURRENT = 168;
-const isValueBeforeCurrentTime$1 = (value, t) => isXHoursBefore(value, dateUtils.getCurrentTimeAsString(), 0) || t('warning-valid-from-error-before-current');
+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
@@ -7820,7 +7833,7 @@ const ValidFrom = ({
 }) => {
   const {
     t
-  } = useTranslation(WARN_NAMESPACE);
+  } = useWarningsTranslation();
   const {
     isRequired
   } = useDraftFormHelpers();
@@ -7835,7 +7848,7 @@ const ValidFrom = ({
     rules: {
       validate: {
         isRequired,
-        isValidDate,
+        isValidDate: dateUtils.isValidIsoDateString,
         // The valid from time cannot be before the current time
         isValueBeforeCurrentTime: value => isValueBeforeCurrentTime$1(value, t),
         // Valid from can be no more than X hours after current time
@@ -7874,7 +7887,7 @@ const isMaxHoursAfterCurrentTime = (value, t) => isXHoursAfter(value, dateUtils.
   MAX_HOURS: VALID_UNTIL_MAX_HOURS_AFTER_CURRENT
 });
 const isMinHoursAfterValidFrom = (value, validFromValue, t) => {
-  if (isEmpty(value) || isEmpty(validFromValue) || !isValidDate(validFromValue)) {
+  if (isEmpty(value) || isEmpty(validFromValue) || !dateUtils.isValidIsoDateString(validFromValue)) {
     return true;
   }
   const duration = dateUtils.differenceInHours(new Date(value), new Date(validFromValue));
@@ -7889,7 +7902,7 @@ const ValidUntil = ({
 }) => {
   const {
     t
-  } = useTranslation(WARN_NAMESPACE);
+  } = useWarningsTranslation();
   const {
     isRequired
   } = useDraftFormHelpers();
@@ -7905,7 +7918,7 @@ const ValidUntil = ({
     rules: {
       validate: {
         isRequired,
-        isValidDate,
+        isValidDate: dateUtils.isValidIsoDateString,
         // The valid until time cannot be before the current time
         isValueBeforeCurrentTime: value => isValueBeforeCurrentTime(value, t),
         // Valid until time can be no more than X hours after current time
@@ -8011,7 +8024,7 @@ const ProbabilityField = ({
 }) => {
   const {
     t
-  } = useTranslation(WARN_NAMESPACE);
+  } = useWarningsTranslation();
   const {
     trigger,
     getValues
@@ -8187,7 +8200,7 @@ const Form = ({
 }) => {
   const {
     t
-  } = useTranslation(WARN_NAMESPACE);
+  } = useWarningsTranslation();
   const {
     handleSubmit,
     reset,
@@ -8565,7 +8578,7 @@ const PublicWarningsFormDialogConnect = ({
   } = useSetupDialog(publicWarningDialogType, _source);
   const {
     t
-  } = useTranslation(WARN_NAMESPACE);
+  } = useWarningsTranslation();
   const dispatch = useDispatch();
   const confirmDialog = useConfirmationDialog();
   const formAction = useSelector(store => getPublicWarningFormState(store));
@@ -8713,6 +8726,30 @@ const getWarningWithoutId = warning => {
     warningDetail: cleanWarningDetail
   });
 };
+const WarningListHeaderContent = _a => {
+  var {
+      title,
+      width = 76
+    } = _a,
+    props = __rest(_a, ["title", "width"]);
+  return /*#__PURE__*/React__default.createElement(Grid, Object.assign({
+    item: true
+  }, props, {
+    sx: Object.assign(Object.assign({}, props.sx), {
+      width
+    })
+  }), /*#__PURE__*/React__default.createElement(Box, {
+    sx: {
+      overflow: 'hidden',
+      fontWeight: 'normal',
+      textOverflow: 'ellipsis',
+      fontSize: 12,
+      lineHeight: 1.33,
+      height: 16,
+      color: 'geowebColors.captions.captionStatus.rgba'
+    }
+  }, title));
+};
 const WarningListColumnContent = _a => {
   var {
       title,
@@ -8735,7 +8772,11 @@ const WarningListColumnContent = _a => {
       fontSize: 10,
       lineHeight: 1.6,
       height: 12,
-      color: status === 'EXPIRED' ? 'geowebColors.typographyAndIcons.inactiveText' : 'geowebColors.captions.captionStatus.rgba'
+      color: status === 'EXPIRED' ? 'geowebColors.typographyAndIcons.inactiveText' : 'geowebColors.captions.captionStatus.rgba',
+      display: 'block',
+      [`@container publicWarningList (min-width: ${breakpoints.desktop}px)`]: {
+        display: 'none'
+      }
     }
   }, title)), /*#__PURE__*/React__default.createElement(Box, {
     sx: {
@@ -8757,7 +8798,7 @@ const WarningsOnStatus = ({
 }) => {
   const {
     t
-  } = useTranslation(WARN_NAMESPACE);
+  } = useWarningsTranslation();
   const headerText = `${warnings.length} ${getStatus(status)}`;
   const onClickWarning = warning => () => _onSelectWarning(warning);
   const onClickEditWarning = warning => () => _onEditWarning(warning);
@@ -8809,15 +8850,14 @@ const WarningsOnStatus = ({
     return /*#__PURE__*/React__default.createElement(ListItem, {
       key: warning.id,
       sx: {
-        marginBottom: 0.5,
+        marginBottom: 0.25,
+        minHeight: '32px',
         padding: '0 0',
-        minHeight: '48px',
         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',
-        containerType: 'inline-size'
+        borderStyle: 'solid'
       },
       secondaryAction: status !== 'EXPIRED' ? ( /*#__PURE__*/React__default.createElement(ToggleMenu, {
         menuTitle: t('warning-list-button-options'),
@@ -8834,12 +8874,11 @@ const WarningsOnStatus = ({
     }, /*#__PURE__*/React__default.createElement(ListItemButton, {
       sx: {
         height: '100%',
-        minHeight: '48px',
         padding: 1,
         '.warning-list': {
           justifyContent: 'left'
         },
-        [`@container (min-width: ${breakpoints.desktop}px)`]: {
+        [`@container publicWarningList (min-width: ${breakpoints.desktop}px)`]: {
           '.warning-list': {
             justifyContent: 'space-between'
           }
@@ -8861,18 +8900,18 @@ const WarningsOnStatus = ({
       status: status,
       width: 142
     }), /*#__PURE__*/React__default.createElement(WarningListColumnContent, {
-      title: t('warning-list-header-last-update'),
+      title: `${t('warning-list-header-last-update')} UTC`,
       status: status,
       width: 142
-    }, warning.lastUpdatedTime && `${dateUtils.dateToString(dateUtils.utc(warning.lastUpdatedTime), DATE_FORMAT_FNS)} UTC`), /*#__PURE__*/React__default.createElement(WarningListColumnContent, {
-      title: t('warning-list-header-start-time'),
+    }, warning.lastUpdatedTime && dateUtils.dateToString(dateUtils.utc(warning.lastUpdatedTime), dateUtils.DATE_FORMAT_NAME_OF_DAY_MONTH)), /*#__PURE__*/React__default.createElement(WarningListColumnContent, {
+      title: `${t('warning-list-header-start-time')} UTC`,
       status: status,
       width: 142
-    }, warning.warningDetail.validFrom && `${dateUtils.dateToString(dateUtils.utc(warning.warningDetail.validFrom), DATE_FORMAT_FNS)} UTC`), /*#__PURE__*/React__default.createElement(WarningListColumnContent, {
-      title: t('warning-list-header-end-time'),
+    }, warning.warningDetail.validFrom && dateUtils.dateToString(dateUtils.utc(warning.warningDetail.validFrom), dateUtils.DATE_FORMAT_NAME_OF_DAY_MONTH)), /*#__PURE__*/React__default.createElement(WarningListColumnContent, {
+      title: `${t('warning-list-header-end-time')} UTC`,
       status: status,
       width: 142
-    }, warning.warningDetail.validUntil && `${dateUtils.dateToString(dateUtils.utc(warning.warningDetail.validUntil), DATE_FORMAT_FNS)} UTC`), /*#__PURE__*/React__default.createElement(WarningListColumnContent, {
+    }, warning.warningDetail.validUntil && dateUtils.dateToString(dateUtils.utc(warning.warningDetail.validUntil), dateUtils.DATE_FORMAT_NAME_OF_DAY_MONTH)), /*#__PURE__*/React__default.createElement(WarningListColumnContent, {
       title: t('warning-list-header-domain'),
       status: status
     }, warning.warningDetail.domain), /*#__PURE__*/React__default.createElement(WarningListColumnContent, {
@@ -8902,6 +8941,7 @@ const WarningsOnStatus = ({
         marginLeft: -0.5
       }
     }, ((_a = warning.warningDetail) === null || _a === void 0 ? void 0 : _a.level) && (levelDetails === null || levelDetails === void 0 ? void 0 : levelDetails.title) || '-')), /*#__PURE__*/React__default.createElement(WarningListColumnContent, {
+      title: t('warning-list-header-status'),
       status: status,
       width: 96
     }, status === 'DRAFT' ? ( /*#__PURE__*/React__default.createElement(Box, {
@@ -8920,7 +8960,7 @@ const WarningsOnStatus = ({
       editor: warning.editor
     }))), /*#__PURE__*/React__default.createElement(Button, {
       sx: {
-        height: '20px',
+        height: '16px',
         padding: '0px',
         '& .MuiSvgIcon-root': {
           marginRight: '-2px'
@@ -8932,7 +8972,8 @@ const WarningsOnStatus = ({
       content: status.toLowerCase(),
       color: status === 'EXPIRED' ? 'grey' : 'green',
       sx: {
-        width: 66
+        width: 66,
+        height: '16px'
       }
     }))))));
   }))));
@@ -8952,13 +8993,15 @@ const PublicWarningList = ({
 }) => {
   const {
     t
-  } = useTranslation(WARN_NAMESPACE);
+  } = useWarningsTranslation();
   const sortedWarnings = warnings ? sortWarningsOnStatus(warnings) : null;
   return /*#__PURE__*/React__default.createElement(Box, {
     sx: {
       padding: 3,
       height: '100%',
-      overflowY: 'auto'
+      overflowY: 'auto',
+      containerName: 'publicWarningList',
+      containerType: 'inline-size'
     },
     "data-testid": "publicWarningList"
   }, /*#__PURE__*/React__default.createElement(Grid, {
@@ -8976,10 +9019,55 @@ const PublicWarningList = ({
   }, t('warning-list-button_create'))), error && /*#__PURE__*/React__default.createElement(AlertBanner, {
     title: error.message,
     shouldClose: true
-  }), _isLoading && ( /*#__PURE__*/React__default.createElement(LinearProgress, {
+  }), _isLoading ? ( /*#__PURE__*/React__default.createElement(LinearProgress, {
     "data-testid": "loading-bar",
     color: "secondary"
-  })), lastUpdatedTime && ( /*#__PURE__*/React__default.createElement(Box, {
+  })) : ( /*#__PURE__*/React__default.createElement(Box, {
+    sx: {
+      height: '4px'
+    }
+  })), !error && ( /*#__PURE__*/React__default.createElement(Grid, {
+    container: true,
+    rowSpacing: 0,
+    columnSpacing: 2,
+    alignItems: "center",
+    justifyContent: "space-between",
+    sx: {
+      maxWidth: '100%',
+      display: 'none',
+      [`@container publicWarningList (min-width: ${breakpoints.desktop}px)`]: {
+        display: 'flex'
+      }
+    }
+  }, /*#__PURE__*/React__default.createElement(WarningListHeaderContent, {
+    title: t('warning-list-header-incident'),
+    width: 142,
+    sx: {
+      marginLeft: 1
+    }
+  }), /*#__PURE__*/React__default.createElement(WarningListHeaderContent, {
+    title: `${t('warning-list-header-last-update')} UTC`,
+    width: 142
+  }), /*#__PURE__*/React__default.createElement(WarningListHeaderContent, {
+    title: `${t('warning-list-header-start-time')} UTC`,
+    width: 142
+  }), /*#__PURE__*/React__default.createElement(WarningListHeaderContent, {
+    title: `${t('warning-list-header-end-time')} UTC`,
+    width: 142
+  }), /*#__PURE__*/React__default.createElement(WarningListHeaderContent, {
+    title: t('warning-list-header-domain')
+  }), /*#__PURE__*/React__default.createElement(WarningListHeaderContent, {
+    title: t('warning-list-header-phenomenon'),
+    width: 140
+  }), /*#__PURE__*/React__default.createElement(WarningListHeaderContent, {
+    title: t('warning-list-header-level')
+  }), /*#__PURE__*/React__default.createElement(WarningListHeaderContent, {
+    title: t('warning-list-header-status'),
+    width: 96,
+    sx: {
+      marginRight: '48px'
+    }
+  }))), lastUpdatedTime && ( /*#__PURE__*/React__default.createElement(Box, {
     sx: {
       marginBottom: -3.25,
       button: {
@@ -9135,7 +9223,7 @@ const ConfirmDeleteWarningDialog = ({
 }) => {
   const {
     t
-  } = useTranslation(WARN_NAMESPACE);
+  } = useWarningsTranslation();
   const [isLoading, setIsLoading] = React__default.useState(false);
   const [error, setError] = React__default.useState(undefined);
   const onSubmit = () => __awaiter(void 0, void 0, void 0, function* () {
@@ -9180,7 +9268,7 @@ const ConfirmDeleteWarningDialog = ({
 const PublicWarningListConnect = () => {
   const {
     t
-  } = useTranslation(WARN_NAMESPACE);
+  } = useWarningsTranslation();
   const dispatch = useDispatch();
   const confirmDialog = useConfirmationDialog();
   const [confirmDialogOptions, setConfirmDialogOptions] = React__default.useState(undefined);
@@ -9478,7 +9566,7 @@ const errorEffect = (dispatch, message, isDialogOpen) => {
  * Copyright 2023 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
  * Copyright 2023 - Finnish Meteorological Institute (FMI)
  * */
-const getLastUpdatedTimeFormatted = () => dateUtils.dateToString(dateUtils.utc(), DATE_FORMAT_LASTUPDATEDTIME);
+const getLastUpdatedTimeFormatted = () => dateUtils.dateToString(dateUtils.utc(), dateUtils.DATE_FORMAT_HOURS);
 const publicWarningsListener = createListenerMiddleware();
 publicWarningsListener.startListening({
   actionCreator: publicWarningActions.fetchWarnings,

package/package.json

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

package/src/lib/components/DrawingTool/DrawingTool.stories.d.ts

@@ -11,7 +11,7 @@ export declare const DrawingToolLight: {
             link: string;
         }[];
     };
-    storyName: string;
+    tags: string[];
 };
 export declare const DrawingToolDark: {
     (): React.ReactElement;
@@ -21,7 +21,7 @@ export declare const DrawingToolDark: {
             link: string;
         }[];
     };
-    storyName: string;
+    tags: string[];
 };
 export declare const DrawingToolErrorLight: {
     (): React.ReactElement;

package/src/lib/components/ObjectManager/ObjectManager.stories.d.ts

@@ -5,7 +5,7 @@ declare const _default: {
 export default _default;
 export declare const ObjectManagerSmall: {
     (): React.ReactElement;
-    storyName: string;
+    tags: string[];
 };
 export declare const ObjectManagerLight: {
     (): React.ReactElement;
@@ -15,7 +15,7 @@ export declare const ObjectManagerLight: {
             link: string;
         }[];
     };
-    storyName: string;
+    tags: string[];
 };
 export declare const ObjectManagerDark: {
     (): React.ReactElement;
@@ -25,22 +25,22 @@ export declare const ObjectManagerDark: {
             link: string;
         }[];
     };
-    storyName: string;
+    tags: string[];
 };
 export declare const ObjectManagerLightNoResults: {
     (): React.ReactElement;
-    storyName: string;
+    tags: string[];
 };
 export declare const ObjectManagerDarkNoResults: {
     (): React.ReactElement;
-    storyName: string;
+    tags: string[];
 };
 export declare const ObjectManagerLoading: () => React.ReactElement;
 export declare const ObjectManagerErrorLight: {
     (): React.ReactElement;
-    storyName: string;
+    tags: string[];
 };
 export declare const ObjectManagerErrorDark: {
     (): React.ReactElement;
-    storyName: string;
+    tags: string[];
 };

package/src/lib/components/PublicWarningList/PublicWarningList.stories.d.ts

@@ -5,7 +5,7 @@ declare const _default: {
 export default _default;
 export declare const PublicWarningListLight: {
     (): React.ReactElement;
-    storyName: string;
+    tags: string[];
     parameters: {
         zeplinLink: {
             name: string;
@@ -15,7 +15,7 @@ export declare const PublicWarningListLight: {
 };
 export declare const PublicWarningListDark: {
     (): React.ReactElement;
-    storyName: string;
+    tags: string[];
     parameters: {
         zeplinLink: {
             name: string;
@@ -25,3 +25,11 @@ export declare const PublicWarningListDark: {
 };
 export declare const PublicWarningListError: () => React.ReactElement;
 export declare const PublicWarningListLoading: () => React.ReactElement;
+export declare const PublicWarningListSmallLight: {
+    (): React.ReactElement;
+    tags: string[];
+};
+export declare const PublicWarningListSmallDark: {
+    (): React.ReactElement;
+    tags: string[];
+};

package/src/lib/components/PublicWarningsFormDialog/PublicWarningsFormDialog.stories.d.ts

@@ -11,7 +11,7 @@ export declare const PublicWarningsFormDialogLight: {
             link: string;
         }[];
     };
-    storyName: string;
+    tags: string[];
 };
 export declare const PublicWarningsFormDialogDark: {
     (): React.ReactElement;
@@ -21,37 +21,37 @@ export declare const PublicWarningsFormDialogDark: {
             link: string;
         }[];
     };
-    storyName: string;
+    tags: string[];
 };
-export declare const PublicWarningsFormDialogLightBig: {
+export declare const PublicWarningsFormDialogBigLight: {
     (): React.ReactElement;
-    storyName: string;
+    tags: string[];
 };
-export declare const PublicWarningsDarkBig: {
+export declare const PublicWarningsFormDialogBigDark: {
     (): React.ReactElement;
-    storyName: string;
+    tags: string[];
 };
-export declare const PublicWarningsFormDialogLightBigError: {
+export declare const PublicWarningsFormDialogBigErrorLight: {
     (): React.ReactElement;
-    storyName: string;
+    tags: string[];
 };
-export declare const PublicWarningsFormDialogDarkBigError: {
+export declare const PublicWarningsFormDialogBigErrorDark: {
     (): React.ReactElement;
-    storyName: string;
+    tags: string[];
 };
-export declare const PublicWarningsFormDialogLightReadOnly: {
+export declare const PublicWarningsFormDialogReadOnlyLight: {
     (): React.ReactElement;
-    storyName: string;
+    tags: string[];
 };
-export declare const PublicWarningsFormDialogDarkReadOnly: {
+export declare const PublicWarningsFormDialogReadOnlyDark: {
     (): React.ReactElement;
-    storyName: string;
+    tags: string[];
 };
-export declare const PublicWarningsFormDialogLightTakeoverWarning: {
+export declare const PublicWarningsFormDialogTakeoverWarningLight: {
     (): React.ReactElement;
-    storyName: string;
+    tags: string[];
 };
-export declare const PublicWarningsFormDialogDarkTakeoverWarning: {
+export declare const PublicWarningsFormDialogTakeoverWarningDark: {
     (): React.ReactElement;
-    storyName: string;
+    tags: string[];
 };

package/src/lib/utils/constants.d.ts

@@ -1,2 +1 @@
 export declare const DATE_FORMAT_HEADER = "EEEE, MMMM dd";
-export declare const DATE_FORMAT_LASTUPDATEDTIME = "HH:mm";

package/src/lib/utils/i18n.d.ts

@@ -1,3 +1,5 @@
+import i18n from 'i18next';
+import { UseTranslationResponse } from 'react-i18next';
 export declare const WARN_NAMESPACE = "warn";
 export declare const initWarnI18n: () => void;
 export declare const outsideComponentTranslations: {
@@ -102,6 +104,7 @@ export declare const outsideComponentTranslations: {
     "warning-list-header-domain": string;
     "warning-list-header-phenomenon": string;
     "warning-list-header-level": string;
+    "warning-list-header-status": string;
     "warning-list-header-draft": string;
 } | {
     "drawing-tool-form-tools": string;
@@ -205,6 +208,7 @@ export declare const outsideComponentTranslations: {
     "warning-list-header-domain": string;
     "warning-list-header-phenomenon": string;
     "warning-list-header-level": string;
+    "warning-list-header-status": string;
     "warning-list-header-draft": string;
 } | {
     "drawing-tool-form-tools": string;
@@ -308,6 +312,7 @@ export declare const outsideComponentTranslations: {
     "warning-list-header-domain": string;
     "warning-list-header-phenomenon": string;
     "warning-list-header-level": string;
+    "warning-list-header-status": string;
     "warning-list-header-draft": string;
 } | {
     "drawing-tool-form-tools": string;
@@ -411,5 +416,7 @@ export declare const outsideComponentTranslations: {
     "warning-list-header-domain": string;
     "warning-list-header-phenomenon": string;
     "warning-list-header-level": string;
+    "warning-list-header-status": string;
     "warning-list-header-draft": string;
 };
+export declare const useWarningsTranslation: () => UseTranslationResponse<typeof WARN_NAMESPACE, typeof i18n>;

package/src/lib/storyshots/Storyshots.spec.d.ts

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