@opengeoweb/warnings 20.0.0-nightly-20261001 → 20.0.1

package/dist/index.esm.js

@@ -15,7 +15,7 @@ import React, { useRef, useState, useEffect, useCallback, useMemo } from 'react'
 import { useAuthenticationContext as useAuthenticationContext$1 } from '@opengeoweb/authentication';
 import { styled, Box, Typography, useTheme, Accordion, AccordionSummary, ListItem, ListItemButton, Stack, Grid, AccordionDetails, LinearProgress, Tabs, Tab, Button, MenuItem, Menu, ListSubheader, FormHelperText, Paper, Card, CardContent, FormControl, CircularProgress, Chip, ListItemText, ListItemIcon, Popover, RadioGroup, FormControlLabel, Radio, Tooltip, IconButton, Checkbox, DialogTitle, DialogContent, Switch, Collapse } from '@mui/material';
 import { List, useListRef } from 'react-window';
-import { AirmetPhenomena, SigmetPhenomena, getHeaders, handleResponse, useAuthQuery, useAuthenticationContext, optimisticUpdate, ProductStatus, LevelUnits } from '@opengeoweb/api';
+import { AirmetPhenomena, SigmetPhenomena, getHeaders, handleResponse, throwResponseError, useAuthQuery, useAuthenticationContext, optimisticUpdate, ProductStatus, LevelUnits } from '@opengeoweb/api';
 import { snackbarListener, snackbarReducer, snackbarActions, snackbarTypes } from '@opengeoweb/snackbar';
 import { useQueryClient, useMutation, queryOptions, QueryClient, useQuery } from '@tanstack/react-query';
 import { omitBy, isUndefined, isEqual, cloneDeep, clamp, omit, concat, groupBy, pick } from 'lodash';
@@ -397,6 +397,9 @@ var en = {
 	"warning-event-expire-event-confirm-description": "Are you sure you would like to expire this event? All active warnings will become EXPIRED and all warnings that have not started yet will become WITHDRAWN. Any unpublished changes will be discarded. Publish the event for this change to take effect.",
 	"warning-event-withdraw-event-confirm-title": "Withdraw event",
 	"warning-event-withdraw-event-confirm-description": "Are you sure you would like to withdraw this event? All warnings will become WITHDRAWN. Any unpublished changes will be discarded. Publish the event for this change to take effect.",
+	"warning-event-type-change-confirm-title": "Change warning type",
+	"warning-event-type-change-confirm-description": "Are you sure you want to switch from early warning to warning? Once published, this cannot be undone",
+	"warning-event-type-change-confirm-confirm": "Change type",
 	"warning-event-validation-incident-max-length": "Max chars is {{MAX_CHARS}}",
 	"warning-event-validation-summary-incomplete": "All summary fields must be completed before publishing",
 	"warning-event-validation-translation-incomplete": "All translation fields must be completed before publishing",
@@ -408,11 +411,7 @@ var en = {
 	"warning-event-validation-propbability-collapsed": "A probability is required",
 	"warning-event-validation-area-missing": "An area is required",
 	"warning-event-validation-area-non-polygon": "Area must be a polygon or multi-polygon",
-	"warning-event-validation-no-yellow-fog-early": "Code yellow cannot be used for an early warning for fog",
-	"warning-event-validation-no-probability-yellow-rain": "For a yellow early warning for rain, 10-30 is not allowed",
-	"warning-event-validation-no-probability-yellow-other": "For a yellow early warning, 10-30 and 30-60 are not allowed",
-	"warning-event-validation-no-probability-orange-red-fog": "For an orange/red early warning for fog, 10-30 is not allowed",
-	"warning-event-validation-no-probability-orange-red-other": "For an orange/red early warning, 10-30 and 30-60 are not allowed",
+	"warning-event-validation-no-probability-yellow-other": "For a yellow early warning, 10-30 is not allowed",
 	"warning-event-open-summary-dialog-tooltip": "Open the summary dialog to enter detailed texts for all summary fields",
 	"drawing-tool-form-objects": "Objects",
 	"drawing-tool-form-object-name": "Object name",
@@ -754,6 +753,9 @@ var nl = {
 	"warning-event-expire-event-confirm-description": "Weet je zeker dat je dit event wilt markeren als verlopen? Alle actieve waarschuwingen krijgen de status VERLOPEN en alle nog niet gestarte waarschuwingen krijgen de status TERUGGETROKKEN. Ongepubliceerde veranderingen worden verwijderd. Publiceer het event om deze verandering te activeren.",
 	"warning-event-withdraw-event-confirm-title": "Trek event terug",
 	"warning-event-withdraw-event-confirm-description": "Weet je zeker dat je dit event wilt terugtrekken? Alle waarschuwingen krijgen de status TERUGGETROKKEN. Ongepubliceerde veranderingen worden verwijderd. Publiceer het event om deze verandering te activeren.",
+	"warning-event-type-change-confirm-title": "Waarschuwingstype wijzigen",
+	"warning-event-type-change-confirm-description": "Weet je zeker dat je wilt overschakelen van vroege waarschuwing naar waarschuwing? Na publicatie kan dit niet ongedaan worden gemaakt",
+	"warning-event-type-change-confirm-confirm": "Type wijzigen",
 	"warning-event-editor-remove-editor": "Je bent niet langer de editor voor dit event",
 	"warning-event-take-over-message": "Je bent niet langer de editor voor dit event",
 	"warning-event-validation-incident-max-length": "Max tekens is {{MAX_CHARS}}",
@@ -767,11 +769,7 @@ var nl = {
 	"warning-event-validation-propbability-collapsed": "Een waarschijnlijkheid is verplicht",
 	"warning-event-validation-area-missing": "Een gebied is verplicht",
 	"warning-event-validation-area-non-polygon": "Gebied moet een polygoon of multi-polygoon zijn",
-	"warning-event-validation-no-yellow-fog-early": "Code geel kan niet worden gebruikt voor een vroege waarschuwing voor mist",
-	"warning-event-validation-no-probability-yellow-rain": "Voor een gele vroege waarschuwing voor regen is 10-30 niet toegestaan",
-	"warning-event-validation-no-probability-yellow-other": "Voor een gele vroege waarschuwing, zijn 10-30 en 30-60 niet toegestaan",
-	"warning-event-validation-no-probability-orange-red-fog": "Voor een oranje/rode vroege waarschuwing voor mist is 10-30 niet toegestaan",
-	"warning-event-validation-no-probability-orange-red-other": "Voor een oranje/rode vroege waarschuwing, zijn 10-30 en 30-60 niet toegestaan",
+	"warning-event-validation-no-probability-yellow-other": "Voor een gele vroege waarschuwing, is 10-30 niet toegestaan",
 	"warning-event-open-summary-dialog-tooltip": "Open de samenvatting pop-up om de gedetailleerde samenvattingen in te vullen",
 	"drawing-tool-form-objects": "Objecten",
 	"drawing-tool-form-object-name": "Objectnaam",
@@ -1067,6 +1065,9 @@ var fi = {
 	"warning-event-expire-event-confirm-description": "ei käännetty",
 	"warning-event-withdraw-event-confirm-title": "ei käännetty",
 	"warning-event-withdraw-event-confirm-description": "ei käännetty",
+	"warning-event-type-change-confirm-title": "Vaihda varoituksen tyyppi",
+	"warning-event-type-change-confirm-description": "Haluatko varmasti vaihtaa ennakkovaroituksen varoitukseksi? Julkaisun jälkeen muutosta ei voi perua",
+	"warning-event-type-change-confirm-confirm": "Vaihda tyyppi",
 	"warning-event-validation-incident-max-length": "ei käännetty",
 	"warning-event-validation-summary-incomplete": "ei käännetty",
 	"warning-event-validation-translation-incomplete": "ei käännetty",
@@ -1078,11 +1079,7 @@ var fi = {
 	"warning-event-validation-propbability-collapsed": "ei käännetty",
 	"warning-event-validation-area-missing": "ei käännetty",
 	"warning-event-validation-area-non-polygon": "ei käännetty",
-	"warning-event-validation-no-yellow-fog-early": "ei käännetty",
-	"warning-event-validation-no-probability-yellow-rain": "ei käännetty",
 	"warning-event-validation-no-probability-yellow-other": "ei käännetty",
-	"warning-event-validation-no-probability-orange-red-fog": "ei käännetty",
-	"warning-event-validation-no-probability-orange-red-other": "ei käännetty",
 	"warning-event-open-summary-dialog-tooltip": "ei käännetty",
 	"drawing-tool-form-objects": "ei käännetty",
 	"drawing-tool-form-object-name": "ei käännetty",
@@ -1376,6 +1373,9 @@ var no = {
 	"warning-event-expire-event-confirm-description": "ikke oversatt",
 	"warning-event-withdraw-event-confirm-title": "ikke oversatt",
 	"warning-event-withdraw-event-confirm-description": "ikke oversatt",
+	"warning-event-type-change-confirm-title": "ikke oversatt",
+	"warning-event-type-change-confirm-description": "ikke oversatt",
+	"warning-event-type-change-confirm-confirm": "ikke oversatt",
 	"warning-event-validation-incident-max-length": "ikke oversatt",
 	"warning-event-validation-summary-incomplete": "ikke oversatt",
 	"warning-event-validation-translation-incomplete": "ikke oversatt",
@@ -1388,11 +1388,7 @@ var no = {
 	"warning-event-validation-area-missing": "ikke oversatt",
 	"warning-event-validation-area-non-polygon": "ikke oversatt",
 	"warning-event-open-summary-dialog-tooltip": "ikke oversatt",
-	"warning-event-validation-no-yellow-fog-early": "ikke oversatt",
-	"warning-event-validation-no-probability-yellow-rain": "ikke oversatt",
 	"warning-event-validation-no-probability-yellow-other": "ikke oversatt",
-	"warning-event-validation-no-probability-orange-red-fog": "ikke oversatt",
-	"warning-event-validation-no-probability-orange-red-other": "ikke oversatt",
 	"drawing-tool-form-objects": "ikke oversatt",
 	"drawing-tool-form-object-name": "ikke oversatt",
 	"drawing-tool-form-object-name-required": "ikke oversatt",
@@ -4023,7 +4019,8 @@ var saveDrawingAs = /*#__PURE__*/function () {
             _context10.n = 2;
             break;
           }
-          throw new Error('Failed to save drawing');
+          _context10.n = 2;
+          return throwResponseError(response);
         case 2:
           return _context10.a(2, response.headers);
       }
@@ -17303,25 +17300,15 @@ var WarningEventItem = function WarningEventItem(_ref) {
   var probabilityValidation = React.useCallback(function (value) {
     var eventType = getValues('warningEventType');
     var warningLevel = getValues("warnings." + index + ".level");
-    var phenomenon = getValues('phenomenon');
     // All is allowed for Warning
     if (eventType === WarningEventType.WARNING) {
       return true;
     }
     if (warningLevel === WarningLevel.moderate) {
-      // For a yellow early warning: rain, only allow 30-60, 60-90 and 90-100
-      if (phenomenon === 'rain') {
-        return value === Probability.TEN_TO_THIRTY ? t('warning-event-validation-no-probability-yellow-rain') : true;
-      }
-      // For yellow early warning: all other phenomena, only allow 60-90 and 90-100
-      return value === Probability.TEN_TO_THIRTY || value === Probability.THIRTY_TO_SIXTY ? t('warning-event-validation-no-probability-yellow-other') : true;
-    }
-    // For a orange/red early warning: fog, only allow 30-60, 60-90 and 90-100
-    if (phenomenon === 'fog') {
-      return value === Probability.TEN_TO_THIRTY ? t('warning-event-validation-no-probability-orange-red-fog') : true;
+      // For yellow early warning: all phenomena, only allow 30-60, 60-90 and 90-100
+      return value === Probability.TEN_TO_THIRTY ? t('warning-event-validation-no-probability-yellow-other') : true;
     }
-    // For orange/red early warning: all other phenomena, only allow 60-90 and 90-100
-    return value === Probability.TEN_TO_THIRTY || value === Probability.THIRTY_TO_SIXTY ? t('warning-event-validation-no-probability-orange-red-other') : true;
+    return true;
   }, [getValues, index, t]);
   var editing = React.useMemo(function () {
     return {
@@ -17989,15 +17976,6 @@ var WarningEventItem = function WarningEventItem(_ref) {
           }
         }
       }
-    }), jsx(ReactHookFormHiddenInput, {
-      name: "warnings." + index + ".level",
-      rules: {
-        validate: {
-          noYellowEarlyWarningFog: function noYellowEarlyWarningFog(value) {
-            return getValues('phenomenon') === 'fog' && getValues('warningEventType') === WarningEventType.EARLY_WARNING && value === WarningLevel.moderate ? t('warning-event-validation-no-yellow-fog-early') : true;
-          }
-        }
-      }
     })]
   });
 };
@@ -18038,6 +18016,7 @@ var RemainingChars = function RemainingChars(_ref) {
   });
 };
 var WarningEventSummaryForm = function WarningEventSummaryForm(_ref2) {
+  var _useWatch2;
   var _ref2$isReadOnly = _ref2.isReadOnly,
     isReadOnly = _ref2$isReadOnly === void 0 ? false : _ref2$isReadOnly,
     _ref2$onClickAdd = _ref2.onClickAdd,
@@ -18052,6 +18031,13 @@ var WarningEventSummaryForm = function WarningEventSummaryForm(_ref2) {
     control: control,
     name: 'texts'
   });
+  var warnings = (_useWatch2 = useWatch({
+    control: control,
+    name: 'warnings'
+  })) != null ? _useWatch2 : [];
+  // When the whole event is expired/withdrawn the summary can no longer be edited
+  var isEventFinalised = warnings.length > 0 && warnings.every(isWarningFinalised);
+  var areFieldsDisabled = isReadOnly || isEventFinalised;
   var hasContent = SUMMARY_TEXT_FIELDS.some(function (field) {
     var _texts$field;
     return ((_texts$field = texts == null ? void 0 : texts[field]) != null ? _texts$field : '').trim();
@@ -18155,7 +18141,7 @@ var WarningEventSummaryForm = function WarningEventSummaryForm(_ref2) {
                     xs: 12
                   },
                   children: [jsx(ReactHookFormTextField, {
-                    disabled: isReadOnly,
+                    disabled: areFieldsDisabled,
                     label: t('warning-event-summary-headline-original'),
                     maxRows: 6,
                     minRows: 4,
@@ -18171,7 +18157,7 @@ var WarningEventSummaryForm = function WarningEventSummaryForm(_ref2) {
                     xs: 12
                   },
                   children: [jsx(ReactHookFormTextField, {
-                    disabled: isReadOnly,
+                    disabled: areFieldsDisabled,
                     label: t('warning-event-summary-concise-summary-original'),
                     maxRows: 9,
                     minRows: 7,
@@ -18187,7 +18173,7 @@ var WarningEventSummaryForm = function WarningEventSummaryForm(_ref2) {
                     xs: 12
                   },
                   children: [jsx(ReactHookFormTextField, {
-                    disabled: isReadOnly,
+                    disabled: areFieldsDisabled,
                     label: t('warning-event-summary-description-original'),
                     maxRows: 11,
                     minRows: 9,
@@ -18249,7 +18235,7 @@ var WarningEventSummaryForm = function WarningEventSummaryForm(_ref2) {
                     xs: 12
                   },
                   children: [jsx(ReactHookFormTextField, {
-                    disabled: isReadOnly,
+                    disabled: areFieldsDisabled,
                     label: t('warning-event-summary-headline-translation'),
                     maxRows: 6,
                     minRows: 4,
@@ -18265,7 +18251,7 @@ var WarningEventSummaryForm = function WarningEventSummaryForm(_ref2) {
                     xs: 12
                   },
                   children: [jsx(ReactHookFormTextField, {
-                    disabled: isReadOnly,
+                    disabled: areFieldsDisabled,
                     label: t('warning-event-summary-concise-summary-translation'),
                     maxRows: 9,
                     minRows: 7,
@@ -18281,7 +18267,7 @@ var WarningEventSummaryForm = function WarningEventSummaryForm(_ref2) {
                     xs: 12
                   },
                   children: [jsx(ReactHookFormTextField, {
-                    disabled: isReadOnly,
+                    disabled: areFieldsDisabled,
                     label: t('warning-event-summary-description-translation'),
                     maxRows: 11,
                     minRows: 9,
@@ -18298,7 +18284,7 @@ var WarningEventSummaryForm = function WarningEventSummaryForm(_ref2) {
           })]
         })]
       })
-    }), !isReadOnly && jsx(Box, {
+    }), !areFieldsDisabled && jsx(Box, {
       sx: {
         flex: 0,
         display: 'flex',
@@ -18432,6 +18418,9 @@ var WarningEventFormContent = function WarningEventFormContent(_ref) {
   var _React$useState2 = React.useState(false),
     isUnpublishedExpiredWithdraw = _React$useState2[0],
     setIsUnpublishedExpiredWithdraw = _React$useState2[1];
+  var _React$useState3 = React.useState(null),
+    pendingEventAction = _React$useState3[0],
+    setPendingEventAction = _React$useState3[1];
   var _useDraftFormHelpers = useDraftFormHelpers(),
     toggleIsDraft = _useDraftFormHelpers.toggleIsDraft,
     DraftFieldHelper = _useDraftFormHelpers.DraftFieldHelper;
@@ -18486,10 +18475,15 @@ var WarningEventFormContent = function WarningEventFormContent(_ref) {
     // sync redux with react-hook-form
     reset(getFormData(selectedEvent));
   }, [eventId, reset, selectedEvent]);
+  // When switching event, clear any pending event level expire/withdraw action
+  React.useEffect(function () {
+    setPendingEventAction(null);
+  }, [eventId]);
   // When the editor gets set back to viewer and the form is dirty, reset any changes made
   React.useEffect(function () {
     if (isReadOnly && Object.keys(dirtyFields).length > 0) {
       reset(getFormData(selectedEvent));
+      setPendingEventAction(null);
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [isReadOnly]);
@@ -18521,18 +18515,18 @@ var WarningEventFormContent = function WarningEventFormContent(_ref) {
     control: control,
     name: 'warningEventType'
   });
-  var _React$useState3 = React.useState(function () {
+  var _React$useState4 = React.useState(function () {
       return getDefaultDayRangeForType(getValues('warningEventType'));
     }),
-    selectedDays = _React$useState3[0],
-    setSelectedDays = _React$useState3[1];
-  var _React$useState4 = React.useState(function () {
+    selectedDays = _React$useState4[0],
+    setSelectedDays = _React$useState4[1];
+  var _React$useState5 = React.useState(function () {
       return isDefaultCollapsed ? Object.fromEntries(fields.map(function (field) {
         return [field.id, true];
       })) : {};
     }),
-    compactIds = _React$useState4[0],
-    setCompactIds = _React$useState4[1];
+    compactIds = _React$useState5[0],
+    setCompactIds = _React$useState5[1];
   // Disable warning type field for warnings which have already been published. EARLY_WARNING should be changeable to WARNING still
   var isWarningTypeDisabled = (selectedEvent == null ? void 0 : selectedEvent.warningEventType) === WarningEventType.WARNING && (eventStatus === PublicWarningStatus.DRAFT_PUBLISHED || eventStatus === PublicWarningStatus.PUBLISHED);
   var revalidateProbabilities = React.useCallback(function () {
@@ -18547,6 +18541,24 @@ var WarningEventFormContent = function WarningEventFormContent(_ref) {
     });
   }, [getValues, trigger]);
   var handleWarningTypeChange = function handleWarningTypeChange(nextType) {
+    var isPublishedEvent = eventStatus === PublicWarningStatus.PUBLISHED || eventStatus === PublicWarningStatus.DRAFT_PUBLISHED;
+    var isUpgradeFromEarlyWarning = warningEventType === WarningEventType.EARLY_WARNING && nextType === WarningEventType.WARNING;
+    if (isPublishedEvent && isUpgradeFromEarlyWarning) {
+      void confirmDialog({
+        title: t('warning-event-type-change-confirm-title'),
+        description: t('warning-event-type-change-confirm-description'),
+        confirmLabel: t('warning-event-type-change-confirm-confirm'),
+        cancelLabel: t('warning-dialog-cancel'),
+        catchOnCancel: true
+      }).then(function () {
+        setSelectedDays(getDefaultDayRangeForType(nextType));
+      })["catch"](function () {
+        setValue('warningEventType', WarningEventType.EARLY_WARNING, {
+          shouldDirty: true
+        });
+      });
+      return;
+    }
     setSelectedDays(getDefaultDayRangeForType(nextType));
     revalidateProbabilities();
   };
@@ -18598,9 +18610,9 @@ var WarningEventFormContent = function WarningEventFormContent(_ref) {
   var timelineRange = React.useMemo(function () {
     return getTimelineRange(selectedDays);
   }, [selectedDays]);
-  var _React$useState5 = React.useState(0),
-    deleteCount = _React$useState5[0],
-    setDeleteCount = _React$useState5[1];
+  var _React$useState6 = React.useState(0),
+    deleteCount = _React$useState6[0],
+    setDeleteCount = _React$useState6[1];
   var onAddWarning = function onAddWarning() {
     var _getValues4;
     var newWarning = buildDefaultWarningItem(getValues());
@@ -18722,6 +18734,7 @@ var WarningEventFormContent = function WarningEventFormContent(_ref) {
         }
       });
       setIsUnpublishedExpiredWithdraw(true);
+      setPendingEventAction(status);
     });
   };
   var onChangeMode = function onChangeMode() {
@@ -18731,6 +18744,15 @@ var WarningEventFormContent = function WarningEventFormContent(_ref) {
     _isRequired = _useDraftFormHelpers2.isRequired;
   var disabledWarningDeleteButton = fields.length <= 1;
   var isNewOrDraftEvent = (selectedEvent == null ? void 0 : selectedEvent.status) === undefined || (selectedEvent == null ? void 0 : selectedEvent.status) === PublicWarningStatus.DRAFT;
+  var publishButtonLabel = function () {
+    if (pendingEventAction === PublicWarningStatus.EXPIRED) {
+      return t('warning-dialog-expire-confirm');
+    }
+    if (pendingEventAction === PublicWarningStatus.WITHDRAWN) {
+      return t('warning-dialog-withdraw-confirm');
+    }
+    return t('public-warning-event-button-publish');
+  }();
   return jsxs(Box, {
     "data-testid": "warning-event-form-scroll-container",
     ref: ref,
@@ -18875,11 +18897,14 @@ var WarningEventFormContent = function WarningEventFormContent(_ref) {
                 isDisabled: areEventFieldsDisabled || !isNewOrDraftEvent,
                 isReadOnly: isReadOnly,
                 isWarningEvent: true,
-                onChange: revalidateProbabilities
+                onChange: function onChange() {
+                  void trigger('warningEventType');
+                }
               })
             }), jsx(Box, {
               sx: {
-                flex: '1.3 1 50'
+                flex: '1 1 145px',
+                minWidth: '145px'
               },
               children: jsx(ReactHookFormSelect, {
                 disabled: areEventFieldsDisabled || isWarningTypeDisabled,
@@ -18966,7 +18991,7 @@ var WarningEventFormContent = function WarningEventFormContent(_ref) {
                 position: 'relative'
               },
               children: [jsx(ReactHookFormTextField, {
-                disabled: isReadOnly,
+                disabled: areEventFieldsDisabled,
                 label: t('public-warning-event-summary'),
                 multiline: true,
                 name: "texts.headlineOriginal",
@@ -19005,7 +19030,7 @@ var WarningEventFormContent = function WarningEventFormContent(_ref) {
               sm: 6
             },
             children: [jsx(ReactHookFormTextField, {
-              disabled: isReadOnly,
+              disabled: areEventFieldsDisabled,
               label: t('public-warning-event-translation'),
               multiline: true,
               name: "texts.headlineTranslation",
@@ -19148,7 +19173,10 @@ var WarningEventFormContent = function WarningEventFormContent(_ref) {
         },
         children: [jsx(Button, {
           disabled: isPublishing,
-          onClick: onCancel,
+          onClick: function onClick() {
+            setPendingEventAction(null);
+            onCancel();
+          },
           sx: {
             textTransform: 'none',
             fontSize: '12px'
@@ -19192,7 +19220,7 @@ var WarningEventFormContent = function WarningEventFormContent(_ref) {
             fontSize: '12px'
           },
           variant: "primary",
-          children: t('public-warning-event-button-publish')
+          children: publishButtonLabel
         })]
       })
     })]
@@ -24281,12 +24309,15 @@ var WarningBlock = /*#__PURE__*/React.memo(function (_ref) {
   var warning = _ref.warning,
     _ref$highlighted = _ref.highlighted,
     highlighted = _ref$highlighted === void 0 ? false : _ref$highlighted,
+    _ref$selected = _ref.selected,
+    selected = _ref$selected === void 0 ? false : _ref$selected,
     left = _ref.left,
     onHoverWarning = _ref.onHoverWarning,
     onSelectWarning = _ref.onSelectWarning,
     top = _ref.top,
     warningListItemActions = _ref.warningListItemActions,
     width = _ref.width;
+  var isHighlighted = highlighted || selected;
   var _useWarningsTranslati = useWarningsTranslation(),
     t = _useWarningsTranslati.t;
   var theme = useTheme();
@@ -24309,10 +24340,15 @@ var WarningBlock = /*#__PURE__*/React.memo(function (_ref) {
     border = _getBlockStyle.border,
     iconColor = _getBlockStyle.iconColor,
     letterColor = _getBlockStyle.letterColor;
+  var isCancelledAviation = isAviation && (warning.productStatus === ProductStatus.CANCELLED || (isCancelAirmet(warning.sigmetAirmetDetails) || isCancelSigmet(warning.sigmetAirmetDetails)) && effectiveStatus !== PublicWarningStatus.DRAFT);
+  var isExpired = effectiveStatus === PublicWarningStatus.EXPIRED;
+  var cancellationColors = theme.palette.geowebColors.cancelledWarningTimeline;
+  var cancellationStyle = isExpired ? cancellationColors.expired : cancellationColors.published;
+  var cancellationHoverStyle = isExpired ? cancellationColors.expiredHover : cancellationColors.publishedHover;
   var size = getBlockSize(width);
   var highlightOutlineColor = theme.palette.geowebColors.typographyAndIcons.iconLinkActive;
   var elements = [];
-  if (size === 'l' || width >= MIN_WIDTH_FOR_LETTER) {
+  if (!isCancelledAviation && (size === 'l' || width >= MIN_WIDTH_FOR_LETTER)) {
     elements.push(jsx(Box, {
       sx: {
         fontSize: 16,
@@ -24323,7 +24359,7 @@ var WarningBlock = /*#__PURE__*/React.memo(function (_ref) {
       children: letter
     }, "letter"));
   }
-  if (size === 'l' || size === 's') {
+  if (!isCancelledAviation && (size === 'l' || size === 's')) {
     elements.push(jsx(Box, {
       sx: {
         display: 'flex',
@@ -24335,7 +24371,7 @@ var WarningBlock = /*#__PURE__*/React.memo(function (_ref) {
       children: getPhenomenaIcon(warningDetail.phenomenon) || null
     }, "icon"));
   }
-  if (size === 'l') {
+  if (!isCancelledAviation && size === 'l') {
     elements.push(jsx(Box, {
       sx: {
         border: '0.5px solid white',
@@ -24346,7 +24382,39 @@ var WarningBlock = /*#__PURE__*/React.memo(function (_ref) {
       })
     }, "avatar"));
   }
-  var warningMenu = size !== 'xxs' ? jsx(WarningBlockMenu, {
+  if (isCancelledAviation) {
+    if (size === 'l' || size === 's') {
+      elements.push(jsx(Box, {
+        sx: {
+          fontSize: 16,
+          fontWeight: 600,
+          whiteSpace: 'nowrap'
+        },
+        children: warning.sigmetAirmetDetails.sequence
+      }, "sequence"));
+      if (size === 'l') {
+        elements.push(jsx(Box, {
+          sx: {
+            fontSize: 16,
+            whiteSpace: 'nowrap'
+          },
+          children: isExpired ? 'CNLD' : 'CNL'
+        }, "cancellation-status"));
+      }
+    } else if (size === 'xs') {
+      elements.push(jsx(Box, {
+        "data-testid": "cancelled-warning-icon",
+        sx: {
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          fontSize: 18
+        },
+        children: getPhenomenaIcon(warningDetail.phenomenon) || null
+      }, "cancelled-icon"));
+    }
+  }
+  var warningMenu = !isCancelledAviation && size !== 'xxs' ? jsx(WarningBlockMenu, {
     effectiveStatus: effectiveStatus,
     hasWarningContent: elements.length > 0,
     isAviation: isAviation,
@@ -24382,7 +24450,7 @@ var WarningBlock = /*#__PURE__*/React.memo(function (_ref) {
     title: getTooltipContent(warning, t),
     children: jsxs(Box, {
       "aria-label": "warning timeline block for " + ((_warning$id = warning.id) != null ? _warning$id : ''),
-      "data-highlighted": highlighted ? 'true' : 'false',
+      "data-highlighted": isHighlighted ? 'true' : 'false',
       "data-testid": "warning-block",
       onClick: function onClick() {
         isTooltipSuppressedRef.current = true;
@@ -24408,7 +24476,7 @@ var WarningBlock = /*#__PURE__*/React.memo(function (_ref) {
         onHoverWarning == null || onHoverWarning(undefined);
       },
       role: "button",
-      sx: {
+      sx: Object.assign({
         position: 'absolute',
         left: left,
         top: top,
@@ -24416,20 +24484,21 @@ var WarningBlock = /*#__PURE__*/React.memo(function (_ref) {
         height: 28,
         padding: warningBlockPadding,
         background: background,
-        border: border,
+        border: border
+      }, isCancelledAviation ? cancellationStyle : {}, isCancelledAviation && highlighted ? cancellationHoverStyle : {}, {
         borderRadius: 1,
-        boxShadow: highlighted ? "0 0 0 2px " + highlightOutlineColor : 'none',
+        boxShadow: isHighlighted ? "0 0 0 2px " + highlightOutlineColor : 'none',
         display: 'flex',
         alignItems: 'center',
         justifyContent: elements.length === 1 ? 'center' : 'space-between',
         overflow: 'hidden',
-        zIndex: highlighted ? 11 : 1,
+        zIndex: isHighlighted ? 11 : 1,
         cursor: 'pointer',
-        '&:hover': {
+        '&:hover': Object.assign({}, isCancelledAviation ? cancellationHoverStyle : {}, {
           boxShadow: "0 0 0 2px " + highlightOutlineColor,
           zIndex: 11
-        }
-      },
+        })
+      }),
       tabIndex: 0,
       children: [elements.length ? jsx(Box, {
         sx: {
@@ -24541,10 +24610,11 @@ var WarningBlocksLayer = /*#__PURE__*/React.memo(function (_ref2) {
   return jsx(Fragment, {
     children: warningBlocks.map(function (warningLayout) {
       return jsx(WarningBlock, {
-        highlighted: hoveredWarningId === warningLayout.warning.id || selectedWarningId === warningLayout.warning.id,
+        highlighted: hoveredWarningId === warningLayout.warning.id,
         left: warningLayout.left,
         onHoverWarning: onHoverWarning,
         onSelectWarning: onSelectWarning,
+        selected: selectedWarningId === warningLayout.warning.id,
         top: warningLayout.top,
         warning: warningLayout.warning,
         warningListItemActions: warningListItemActions,

package/dist/src/lib/components/WarningsTimeline/WarningBlock.d.ts

@@ -4,6 +4,7 @@ import type { WarningListItemActions } from '../PublicWarningList/WarningListIte
 interface WarningBlockProps {
     warning: Warning;
     highlighted?: boolean;
+    selected?: boolean;
     left: number;
     onHoverWarning?: (warningId?: string) => void;
     onSelectWarning?: (warning: Warning) => void;
@@ -11,5 +12,5 @@ interface WarningBlockProps {
     top: number;
     width: number;
 }
-export declare const WarningBlock: React.MemoExoticComponent<({ warning, highlighted, left, onHoverWarning, onSelectWarning, top, warningListItemActions, width, }: WarningBlockProps) => React.JSX.Element>;
+export declare const WarningBlock: React.MemoExoticComponent<({ warning, highlighted, selected, left, onHoverWarning, onSelectWarning, top, warningListItemActions, width, }: WarningBlockProps) => React.JSX.Element>;
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@opengeoweb/warnings",
-    "version": "20.0.0-nightly-20261001",
+    "version": "20.0.1",
     "description": "GeoWeb warinings library for the opengeoweb project",
     "license": "Apache-2.0",
     "repository": {
@@ -20,24 +20,24 @@
         }
     },
     "dependencies": {
-        "@opengeoweb/api": "20.0.0-nightly-20261001",
-        "@opengeoweb/shared": "20.0.0-nightly-20261001",
-        "@opengeoweb/store": "20.0.0-nightly-20261001",
-        "@opengeoweb/webmap-react": "20.0.0-nightly-20261001",
+        "@opengeoweb/api": "20.0.1",
+        "@opengeoweb/shared": "20.0.1",
+        "@opengeoweb/store": "20.0.1",
+        "@opengeoweb/webmap-react": "20.0.1",
         "@tanstack/react-query": "^5.85.5",
         "react-redux": "^9.2.0",
-        "@opengeoweb/theme": "20.0.0-nightly-20261001",
-        "@opengeoweb/form-fields": "20.0.0-nightly-20261001",
+        "@opengeoweb/theme": "20.0.1",
+        "@opengeoweb/form-fields": "20.0.1",
         "react-hook-form": "^7.50.1",
         "lodash": "^4.18.1",
         "@reduxjs/toolkit": "^2.6.1",
-        "@opengeoweb/snackbar": "20.0.0-nightly-20261001",
+        "@opengeoweb/snackbar": "20.0.1",
         "react-window": "^2.2.6",
         "axios": "^1.18.0",
-        "@opengeoweb/core": "20.0.0-nightly-20261001",
-        "@opengeoweb/webmap": "20.0.0-nightly-20261001",
-        "@opengeoweb/authentication": "20.0.0-nightly-20261001",
-        "@opengeoweb/sigmet-airmet": "20.0.0-nightly-20261001",
+        "@opengeoweb/core": "20.0.1",
+        "@opengeoweb/webmap": "20.0.1",
+        "@opengeoweb/authentication": "20.0.1",
+        "@opengeoweb/sigmet-airmet": "20.0.1",
         "react-i18next": "^15.1.1",
         "i18next": "^25.0.1",
         "@mui/material": "^9.0.1",