@opengeoweb/warnings 9.0.0 → 9.1.0

package/index.esm.js

@@ -1,14 +1,14 @@
 import * as React from 'react';
-import React__default, { useContext, useRef, useCallback, useDebugValue, createElement, PureComponent, useState, useEffect } from 'react';
+import React__default, { useContext, useRef, useCallback, useDebugValue, createElement, PureComponent, Component, useState, useEffect } from 'react';
 import 'react-dom';
-import { Polygons, Share, ExitDomain, Edit, Delete, DrawPolygon, Visibility, Add, breakpoints, CoastalEvent, Fog, TemperatureHigh, TemperatureLow, Rain, Snow, Lightning, Wind } from '@opengeoweb/theme';
+import { Polygons, Share, ExitDomain, Edit, Delete, DrawPolygon, Visibility, Add, Wind, Fog, Lightning, Snow, Rain, TemperatureHigh, FunnelCloud, TemperatureLow, CoastalEvent, breakpoints } from '@opengeoweb/theme';
 import { uiActions, uiTypes, getSingularDrawtoolDrawLayerId, drawtoolSelectors, layerSelectors, uiSelectors, mapStoreActions, drawtoolActions, layerActions, useSetupDialog } from '@opengeoweb/store';
 import { emptyGeoJSON, MapControlButton, getGeoJSONPropertyValue, getIcon, rewindGeometry, currentlySupportedDrawModes } from '@opengeoweb/webmap-react';
 import { snackbarActions } from '@opengeoweb/snackbar';
-import { dateUtils, ToggleMenu, getHeight, calculateStartSize, ToolContainerDraggable, AlertBanner, ConfirmationDialog, getAxiosErrorMessage, CustomIconButton, SwitchButton, isAxiosError } from '@opengeoweb/shared';
-import { Box, Typography, ListItem, Paper, ListItemButton, Stack, LinearProgress, Button, Grid, FormHelperText, MenuItem, Tabs, Tab, FormControl, Card, CardContent, styled, ListItemIcon, FormControlLabel, Radio } from '@mui/material';
+import { dateUtils, ToggleMenu, calculateStartSize, ToolContainerDraggable, AlertBanner, ConfirmationDialog, getAxiosErrorMessage, CustomIconButton, SwitchButton, isAxiosError } from '@opengeoweb/shared';
+import { styled, Box, Typography, ListItem, Grid, Paper, ListItemButton, Stack, LinearProgress, Button, FormHelperText, MenuItem, Tabs, Tab, FormControl, Card, CardContent, ListItemIcon } from '@mui/material';
 import { getApi, createApiInstance, createNonAuthApiInstance, createFakeApiInstance, ApiProvider } from '@opengeoweb/api';
-import { ReactHookFormProvider, defaultFormOptions, ReactHookFormHiddenInput, isValidGeoJsonCoordinates, ReactHookFormSelect, ReactHookFormTextField, ReactHookFormDateTime, ReactHookFormRadioGroup } from '@opengeoweb/form-fields';
+import { ReactHookFormProvider, defaultFormOptions, ReactHookFormHiddenInput, isValidGeoJsonCoordinates, ReactHookFormSelect, ReactHookFormTextField, useDraftFormHelpers, errorMessages, ReactHookFormDateTime } from '@opengeoweb/form-fields';
 
 var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
 
@@ -4163,6 +4163,381 @@ var VariableSizeList = /*#__PURE__*/createListComponent({
   }
 });
 
+/**
+ * Detect Element Resize.
+ * https://github.com/sdecima/javascript-detect-element-resize
+ * Sebastian Decima
+ *
+ * Forked from version 0.5.3; includes the following modifications:
+ * 1) Guard against unsafe 'window' and 'document' references (to support SSR).
+ * 2) Defer initialization code via a top-level function wrapper (to support SSR).
+ * 3) Avoid unnecessary reflows by not measuring size for scroll events bubbling from children.
+ * 4) Add nonce for style element.
+ * 5) Use 'export' statement over 'module.exports' assignment
+ **/
+
+// Check `document` and `window` in case of server-side rendering
+let windowObject;
+if (typeof window !== "undefined") {
+  windowObject = window;
+
+  // eslint-disable-next-line no-restricted-globals
+} else if (typeof self !== "undefined") {
+  // eslint-disable-next-line no-restricted-globals
+  windowObject = self;
+} else {
+  windowObject = global;
+}
+let cancelFrame = null;
+let requestFrame = null;
+const TIMEOUT_DURATION = 20;
+const clearTimeoutFn = windowObject.clearTimeout;
+const setTimeoutFn = windowObject.setTimeout;
+const cancelAnimationFrameFn = windowObject.cancelAnimationFrame || windowObject.mozCancelAnimationFrame || windowObject.webkitCancelAnimationFrame;
+const requestAnimationFrameFn = windowObject.requestAnimationFrame || windowObject.mozRequestAnimationFrame || windowObject.webkitRequestAnimationFrame;
+if (cancelAnimationFrameFn == null || requestAnimationFrameFn == null) {
+  // For environments that don't support animation frame,
+  // fallback to a setTimeout based approach.
+  cancelFrame = clearTimeoutFn;
+  requestFrame = function requestAnimationFrameViaSetTimeout(callback) {
+    return setTimeoutFn(callback, TIMEOUT_DURATION);
+  };
+} else {
+  // Counter intuitively, environments that support animation frames can be trickier.
+  // Chrome's "Throttle non-visible cross-origin iframes" flag can prevent rAFs from being called.
+  // In this case, we should fallback to a setTimeout() implementation.
+  cancelFrame = function cancelFrame([animationFrameID, timeoutID]) {
+    cancelAnimationFrameFn(animationFrameID);
+    clearTimeoutFn(timeoutID);
+  };
+  requestFrame = function requestAnimationFrameWithSetTimeoutFallback(callback) {
+    const animationFrameID = requestAnimationFrameFn(function animationFrameCallback() {
+      clearTimeoutFn(timeoutID);
+      callback();
+    });
+    const timeoutID = setTimeoutFn(function timeoutCallback() {
+      cancelAnimationFrameFn(animationFrameID);
+      callback();
+    }, TIMEOUT_DURATION);
+    return [animationFrameID, timeoutID];
+  };
+}
+function createDetectElementResize(nonce) {
+  let animationKeyframes;
+  let animationName;
+  let animationStartEvent;
+  let animationStyle;
+  let checkTriggers;
+  let resetTriggers;
+  let scrollListener;
+  const attachEvent = typeof document !== "undefined" && document.attachEvent;
+  if (!attachEvent) {
+    resetTriggers = function (element) {
+      const triggers = element.__resizeTriggers__,
+        expand = triggers.firstElementChild,
+        contract = triggers.lastElementChild,
+        expandChild = expand.firstElementChild;
+      contract.scrollLeft = contract.scrollWidth;
+      contract.scrollTop = contract.scrollHeight;
+      expandChild.style.width = expand.offsetWidth + 1 + "px";
+      expandChild.style.height = expand.offsetHeight + 1 + "px";
+      expand.scrollLeft = expand.scrollWidth;
+      expand.scrollTop = expand.scrollHeight;
+    };
+    checkTriggers = function (element) {
+      return element.offsetWidth !== element.__resizeLast__.width || element.offsetHeight !== element.__resizeLast__.height;
+    };
+    scrollListener = function (e) {
+      // Don't measure (which forces) reflow for scrolls that happen inside of children!
+      if (e.target.className && typeof e.target.className.indexOf === "function" && e.target.className.indexOf("contract-trigger") < 0 && e.target.className.indexOf("expand-trigger") < 0) {
+        return;
+      }
+      const element = this;
+      resetTriggers(this);
+      if (this.__resizeRAF__) {
+        cancelFrame(this.__resizeRAF__);
+      }
+      this.__resizeRAF__ = requestFrame(function animationFrame() {
+        if (checkTriggers(element)) {
+          element.__resizeLast__.width = element.offsetWidth;
+          element.__resizeLast__.height = element.offsetHeight;
+          element.__resizeListeners__.forEach(function forEachResizeListener(fn) {
+            fn.call(element, e);
+          });
+        }
+      });
+    };
+
+    /* Detect CSS Animations support to detect element display/re-attach */
+    let animation = false;
+    let keyframeprefix = "";
+    animationStartEvent = "animationstart";
+    const domPrefixes = "Webkit Moz O ms".split(" ");
+    let startEvents = "webkitAnimationStart animationstart oAnimationStart MSAnimationStart".split(" ");
+    let pfx = "";
+    {
+      const elm = document.createElement("fakeelement");
+      if (elm.style.animationName !== undefined) {
+        animation = true;
+      }
+      if (animation === false) {
+        for (let i = 0; i < domPrefixes.length; i++) {
+          if (elm.style[domPrefixes[i] + "AnimationName"] !== undefined) {
+            pfx = domPrefixes[i];
+            keyframeprefix = "-" + pfx.toLowerCase() + "-";
+            animationStartEvent = startEvents[i];
+            animation = true;
+            break;
+          }
+        }
+      }
+    }
+    animationName = "resizeanim";
+    animationKeyframes = "@" + keyframeprefix + "keyframes " + animationName + " { from { opacity: 0; } to { opacity: 0; } } ";
+    animationStyle = keyframeprefix + "animation: 1ms " + animationName + "; ";
+  }
+  const createStyles = function (doc) {
+    if (!doc.getElementById("detectElementResize")) {
+      //opacity:0 works around a chrome bug https://code.google.com/p/chromium/issues/detail?id=286360
+      const css = (animationKeyframes ? animationKeyframes : "") + ".resize-triggers { " + (animationStyle ? animationStyle : "") + "visibility: hidden; opacity: 0; } " + '.resize-triggers, .resize-triggers > div, .contract-trigger:before { content: " "; display: block; position: absolute; top: 0; left: 0; height: 100%; width: 100%; overflow: hidden; z-index: -1; } .resize-triggers > div { background: #eee; overflow: auto; } .contract-trigger:before { width: 200%; height: 200%; }',
+        head = doc.head || doc.getElementsByTagName("head")[0],
+        style = doc.createElement("style");
+      style.id = "detectElementResize";
+      style.type = "text/css";
+      if (nonce != null) {
+        style.setAttribute("nonce", nonce);
+      }
+      if (style.styleSheet) {
+        style.styleSheet.cssText = css;
+      } else {
+        style.appendChild(doc.createTextNode(css));
+      }
+      head.appendChild(style);
+    }
+  };
+  const addResizeListener = function (element, fn) {
+    if (attachEvent) {
+      element.attachEvent("onresize", fn);
+    } else {
+      if (!element.__resizeTriggers__) {
+        const doc = element.ownerDocument;
+        const elementStyle = windowObject.getComputedStyle(element);
+        if (elementStyle && elementStyle.position === "static") {
+          element.style.position = "relative";
+        }
+        createStyles(doc);
+        element.__resizeLast__ = {};
+        element.__resizeListeners__ = [];
+        (element.__resizeTriggers__ = doc.createElement("div")).className = "resize-triggers";
+        const expandTrigger = doc.createElement("div");
+        expandTrigger.className = "expand-trigger";
+        expandTrigger.appendChild(doc.createElement("div"));
+        const contractTrigger = doc.createElement("div");
+        contractTrigger.className = "contract-trigger";
+        element.__resizeTriggers__.appendChild(expandTrigger);
+        element.__resizeTriggers__.appendChild(contractTrigger);
+        element.appendChild(element.__resizeTriggers__);
+        resetTriggers(element);
+        element.addEventListener("scroll", scrollListener, true);
+
+        /* Listen for a css animation to detect element display/re-attach */
+        if (animationStartEvent) {
+          element.__resizeTriggers__.__animationListener__ = function animationListener(e) {
+            if (e.animationName === animationName) {
+              resetTriggers(element);
+            }
+          };
+          element.__resizeTriggers__.addEventListener(animationStartEvent, element.__resizeTriggers__.__animationListener__);
+        }
+      }
+      element.__resizeListeners__.push(fn);
+    }
+  };
+  const removeResizeListener = function (element, fn) {
+    if (attachEvent) {
+      element.detachEvent("onresize", fn);
+    } else {
+      element.__resizeListeners__.splice(element.__resizeListeners__.indexOf(fn), 1);
+      if (!element.__resizeListeners__.length) {
+        element.removeEventListener("scroll", scrollListener, true);
+        if (element.__resizeTriggers__.__animationListener__) {
+          element.__resizeTriggers__.removeEventListener(animationStartEvent, element.__resizeTriggers__.__animationListener__);
+          element.__resizeTriggers__.__animationListener__ = null;
+        }
+        try {
+          element.__resizeTriggers__ = !element.removeChild(element.__resizeTriggers__);
+        } catch (e) {
+          // Preact compat; see developit/preact-compat/issues/228
+        }
+      }
+    }
+  };
+  return {
+    addResizeListener,
+    removeResizeListener
+  };
+}
+
+class AutoSizer extends Component {
+  constructor(...args) {
+    super(...args);
+    this.state = {
+      height: this.props.defaultHeight || 0,
+      scaledHeight: this.props.defaultHeight || 0,
+      scaledWidth: this.props.defaultWidth || 0,
+      width: this.props.defaultWidth || 0
+    };
+    this._autoSizer = null;
+    this._detectElementResize = null;
+    this._parentNode = null;
+    this._resizeObserver = null;
+    this._timeoutId = null;
+    this._onResize = () => {
+      this._timeoutId = null;
+      const {
+        disableHeight,
+        disableWidth,
+        onResize
+      } = this.props;
+      if (this._parentNode) {
+        var _style$paddingLeft, _style$paddingRight, _style$paddingTop, _style$paddingBottom;
+        // Guard against AutoSizer component being removed from the DOM immediately after being added.
+        // This can result in invalid style values which can result in NaN values if we don't handle them.
+        // See issue #150 for more context.
+
+        const style = window.getComputedStyle(this._parentNode) || {};
+        const paddingLeft = parseFloat((_style$paddingLeft = style.paddingLeft) !== null && _style$paddingLeft !== void 0 ? _style$paddingLeft : "0");
+        const paddingRight = parseFloat((_style$paddingRight = style.paddingRight) !== null && _style$paddingRight !== void 0 ? _style$paddingRight : "0");
+        const paddingTop = parseFloat((_style$paddingTop = style.paddingTop) !== null && _style$paddingTop !== void 0 ? _style$paddingTop : "0");
+        const paddingBottom = parseFloat((_style$paddingBottom = style.paddingBottom) !== null && _style$paddingBottom !== void 0 ? _style$paddingBottom : "0");
+        const rect = this._parentNode.getBoundingClientRect();
+        const scaledHeight = rect.height - paddingTop - paddingBottom;
+        const scaledWidth = rect.width - paddingLeft - paddingRight;
+        const height = this._parentNode.offsetHeight - paddingTop - paddingBottom;
+        const width = this._parentNode.offsetWidth - paddingLeft - paddingRight;
+        if (!disableHeight && (this.state.height !== height || this.state.scaledHeight !== scaledHeight) || !disableWidth && (this.state.width !== width || this.state.scaledWidth !== scaledWidth)) {
+          this.setState({
+            height,
+            width,
+            scaledHeight,
+            scaledWidth
+          });
+          if (typeof onResize === "function") {
+            onResize({
+              height,
+              scaledHeight,
+              scaledWidth,
+              width
+            });
+          }
+        }
+      }
+    };
+    this._setRef = autoSizer => {
+      this._autoSizer = autoSizer;
+    };
+  }
+  componentDidMount() {
+    const {
+      nonce
+    } = this.props;
+    if (this._autoSizer && this._autoSizer.parentNode && this._autoSizer.parentNode.ownerDocument && this._autoSizer.parentNode.ownerDocument.defaultView && this._autoSizer.parentNode instanceof this._autoSizer.parentNode.ownerDocument.defaultView.HTMLElement) {
+      // Delay access of parentNode until mount.
+      // This handles edge-cases where the component has already been unmounted before its ref has been set,
+      // As well as libraries like react-lite which have a slightly different lifecycle.
+      this._parentNode = this._autoSizer.parentNode;
+
+      // Defer requiring resize handler in order to support server-side rendering.
+      // See issue #41
+      if (this._parentNode != null) {
+        if (typeof ResizeObserver !== "undefined") {
+          this._resizeObserver = new ResizeObserver(() => {
+            // Guard against "ResizeObserver loop limit exceeded" error;
+            // could be triggered if the state update causes the ResizeObserver handler to run long.
+            // See https://github.com/bvaughn/react-virtualized-auto-sizer/issues/55
+            this._timeoutId = setTimeout(this._onResize, 0);
+          });
+          this._resizeObserver.observe(this._parentNode);
+        } else {
+          this._detectElementResize = createDetectElementResize(nonce);
+          this._detectElementResize.addResizeListener(this._parentNode, this._onResize);
+        }
+        this._onResize();
+      }
+    }
+  }
+  componentWillUnmount() {
+    if (this._parentNode) {
+      if (this._detectElementResize) {
+        this._detectElementResize.removeResizeListener(this._parentNode, this._onResize);
+      }
+      if (this._timeoutId !== null) {
+        clearTimeout(this._timeoutId);
+      }
+      if (this._resizeObserver) {
+        this._resizeObserver.observe(this._parentNode);
+        this._resizeObserver.disconnect();
+      }
+    }
+  }
+  render() {
+    const {
+      children,
+      defaultHeight,
+      defaultWidth,
+      disableHeight = false,
+      disableWidth = false,
+      nonce,
+      onResize,
+      style = {},
+      tagName = "div",
+      ...rest
+    } = this.props;
+    const {
+      height,
+      scaledHeight,
+      scaledWidth,
+      width
+    } = this.state;
+
+    // Outer div should not force width/height since that may prevent containers from shrinking.
+    // Inner component should overflow and use calculated width/height.
+    // See issue #68 for more information.
+    const outerStyle = {
+      overflow: "visible"
+    };
+    const childParams = {};
+
+    // Avoid rendering children before the initial measurements have been collected.
+    // At best this would just be wasting cycles.
+    let bailoutOnChildren = false;
+    if (!disableHeight) {
+      if (height === 0) {
+        bailoutOnChildren = true;
+      }
+      outerStyle.height = 0;
+      childParams.height = height;
+      childParams.scaledHeight = scaledHeight;
+    }
+    if (!disableWidth) {
+      if (width === 0) {
+        bailoutOnChildren = true;
+      }
+      outerStyle.width = 0;
+      childParams.width = width;
+      childParams.scaledWidth = scaledWidth;
+    }
+    return createElement(tagName, {
+      ref: this._setRef,
+      style: {
+        ...outerStyle,
+        ...style
+      },
+      ...rest
+    }, !bailoutOnChildren && children(childParams));
+  }
+}
+
 /* *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -4183,52 +4558,11 @@ var DATE_FORMAT = 'dd/MM/yyyy HH:mm';
 var DATE_FORMAT_UTC = "yyyy-MM-dd'T'HH:mm:ss'Z'";
 var DATE_FORMAT_HEADER = 'EEEE, MMMM dd';
 
-var DEFAULT_DIALOG_HEIGHT = 500;
 var DEFAULT_ADD_BUTTON_HEIGHT = 80;
-var DEFAULT_PADDING_TOP = 6;
 var OBJECT_ITEM_SIZE = 50;
-var HEADER_ITEM_SIZE = 23;
-var MIN_HEIGHT_SCROLLABLE_LIST = 90; // Slightly less than 2 rows
-var useGetRequiredHeights = function useGetRequiredHeights() {
-  var listRef = React__default.useRef(null);
-  // Used to store the height of the list dialog content
-  var _React$useState = React__default.useState(DEFAULT_DIALOG_HEIGHT),
-    _React$useState2 = _slicedToArray(_React$useState, 2),
-    dialogHeight = _React$useState2[0],
-    setDialogHeight = _React$useState2[1];
-  // Used to store the height of the "Add new object" button
-  var _React$useState3 = React__default.useState(DEFAULT_ADD_BUTTON_HEIGHT),
-    _React$useState4 = _slicedToArray(_React$useState3, 2),
-    addButtonHeight = _React$useState4[0],
-    setAddButtonHeight = _React$useState4[1];
-  // Obtain the height of of the list dialog content
-  React__default.useLayoutEffect(function () {
-    var _a;
-    var dialogElement = (_a = listRef.current) === null || _a === void 0 ? void 0 : _a.parentElement;
-    (dialogElement === null || dialogElement === void 0 ? void 0 : dialogElement.offsetHeight) && setDialogHeight(dialogElement === null || dialogElement === void 0 ? void 0 : dialogElement.offsetHeight);
-    var observer = new ResizeObserver(function () {
-      var height = getHeight(dialogElement);
-      height && setDialogHeight(height);
-    });
-    observer.observe(dialogElement);
-    return function () {
-      observer.disconnect();
-    };
-  }, [listRef]);
-  // Obtain height of the "Add new object" button
-  React__default.useEffect(function () {
-    var _a, _b;
-    var buttonElement = (_b = (_a = listRef.current) === null || _a === void 0 ? void 0 : _a.parentElement) === null || _b === void 0 ? void 0 : _b.lastChild;
-    var height = getHeight(buttonElement);
-    height && setAddButtonHeight(height);
-  }, []);
-  var availableSpaceForList = dialogHeight - addButtonHeight - DEFAULT_PADDING_TOP;
-  var listHeight = availableSpaceForList && availableSpaceForList < MIN_HEIGHT_SCROLLABLE_LIST ? MIN_HEIGHT_SCROLLABLE_LIST : availableSpaceForList;
-  return {
-    listRef: listRef,
-    listHeight: listHeight
-  };
-};
+var OBJECT_ITEM_SIZE_SMALL_WIDTH = 72;
+var HEADER_ITEM_SIZE = 28;
+var BREAKPOINT = 320;
 var NO_OBJECTS_FOUND = 'No objects found';
 var BUTTON_EDIT$1 = 'Edit';
 var BUTTON_DELETE$1 = 'Delete';
@@ -4264,146 +4598,216 @@ var getListInclHeaders = function getListInclHeaders(objects) {
     headerList: headerList
   };
 };
-var Objects = function Objects(_ref) {
-  var objects = _ref.objects,
-    onClickObject = _ref.onClickObject,
-    onClickEdit = _ref.onClickEdit,
-    onClickDelete = _ref.onClickDelete,
-    onClickShare = _ref.onClickShare,
-    activeObject = _ref.activeObject,
-    _ref$isLoading = _ref.isLoading,
-    isLoading = _ref$isLoading === void 0 ? false : _ref$isLoading;
-  // Used to store the height of the list dialog content
-  var _useGetRequiredHeight = useGetRequiredHeights(),
-    listRef = _useGetRequiredHeight.listRef,
-    listHeight = _useGetRequiredHeight.listHeight;
+var ContainerDiv = styled('div')(function () {
+  return _defineProperty({
+    '.objectActions': {
+      width: '100%',
+      minWidth: '100%'
+    },
+    '& .MuiListItemSecondaryAction-root': {
+      width: '24px',
+      right: '8px'
+    },
+    '& .MuiPaper-root': {
+      height: '100%'
+    },
+    '& .MuiListItemButton-root': {
+      height: '100%'
+    },
+    '& .MuiStack-root': {
+      paddingRight: '32px',
+      width: '100%',
+      overflowWrap: 'anywhere',
+      overflow: 'hidden'
+    }
+  }, "@container objectList (min-width: ".concat(BREAKPOINT, "px)"), {
+    '.objectActions': {
+      width: '50%',
+      minWidth: '50%'
+    },
+    '& .MuiListItemSecondaryAction-root': {
+      width: '56px'
+    },
+    '& .MuiStack-root': {
+      paddingRight: '64px'
+    }
+  });
+});
+var Objects = function Objects(_ref2) {
+  var objects = _ref2.objects,
+    onClickObject = _ref2.onClickObject,
+    onClickEdit = _ref2.onClickEdit,
+    onClickDelete = _ref2.onClickDelete,
+    onClickShare = _ref2.onClickShare,
+    activeObject = _ref2.activeObject,
+    _ref2$isLoading = _ref2.isLoading,
+    isLoading = _ref2$isLoading === void 0 ? false : _ref2$isLoading;
+  var listRef = React__default.useRef(null);
   var _getListInclHeaders = getListInclHeaders(objects),
     listInclHeaders = _getListInclHeaders.listInclHeaders,
     headerList = _getListInclHeaders.headerList;
-  var getItemSize = function getItemSize(index) {
+  var getItemSize = function getItemSize(width, index) {
     var item = listInclHeaders[index];
     if (item.isObject) {
-      return OBJECT_ITEM_SIZE;
+      return width < BREAKPOINT ? OBJECT_ITEM_SIZE_SMALL_WIDTH : OBJECT_ITEM_SIZE;
     }
     return HEADER_ITEM_SIZE;
   };
-  return /*#__PURE__*/React__default.createElement(Box, {
-    ref: listRef,
-    sx: {
-      paddingTop: 0.75
-    }
-  }, !isLoading && objects.length === 0 ? /*#__PURE__*/React__default.createElement(Typography, {
-    sx: {
-      paddingLeft: '16px',
-      paddingTop: '8px'
-    },
-    variant: "body1"
-  }, NO_OBJECTS_FOUND) : /*#__PURE__*/React__default.createElement(VariableSizeList, {
-    height: listHeight,
-    itemCount: listInclHeaders.length,
-    itemSize: getItemSize,
-    width: "100%"
-  }, function (_ref2) {
-    var index = _ref2.index,
-      style = _ref2.style;
-    var listItem = listInclHeaders[index];
-    if (!listItem.isObject) {
-      var header = headerList[listItem.index];
-      return /*#__PURE__*/React__default.createElement(Typography, {
-        style: style,
-        key: listItem.index,
-        sx: {
-          paddingLeft: 2.5,
-          paddingBottom: 0.5,
-          paddingTop: 0.5,
-          opacity: 0.67
-        },
-        variant: "caption"
-      }, header);
-    }
-    var object = objects[listItem.index];
-    var objectDate = dateUtils.isoStringToDate(object.lastUpdatedTime);
-    return /*#__PURE__*/React__default.createElement(ListItem, {
-      style: style,
-      disablePadding: true,
-      key: object.id,
-      sx: {
-        '& .MuiListItemSecondaryAction-root': {
-          right: '8px'
-        }
-      },
-      secondaryAction: /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(ToggleMenu, {
-        buttonSx: {
-          marginRight: object.scope === 'user' ? 1 : 4
-        },
-        buttonIcon: /*#__PURE__*/React__default.createElement(Share, null),
-        menuTitle: MENU_SHARE,
-        tooltipTitle: BUTTON_SHARE,
-        menuPosition: "bottom",
-        "aria-label": BUTTON_SHARE,
-        menuItems: [{
-          text: BUTTON_AIRMET,
-          action: function action() {},
-          icon: /*#__PURE__*/React__default.createElement(ExitDomain, null),
-          isDisabled: true
-        }, {
-          text: BUTTON_SIGMET,
-          action: function action() {},
-          icon: /*#__PURE__*/React__default.createElement(ExitDomain, null),
-          isDisabled: true
-        }, {
-          text: BUTTON_PUBLIC_WARNING,
-          action: function action() {
-            onClickShare(object);
-          },
-          icon: /*#__PURE__*/React__default.createElement(ExitDomain, null)
-        }]
-      }), object.scope === 'user' && /*#__PURE__*/React__default.createElement(ToggleMenu, {
-        menuTitle: "Object options",
-        tooltipTitle: "Object options",
-        menuPosition: "bottom",
-        "aria-label": "Options",
-        menuItems: [{
-          text: BUTTON_EDIT$1,
-          action: function action() {
-            onClickEdit(object.id);
-          },
-          icon: /*#__PURE__*/React__default.createElement(Edit, null)
-        }, {
-          text: BUTTON_DELETE$1,
-          action: function action() {
-            onClickDelete(object.id);
-          },
-          icon: /*#__PURE__*/React__default.createElement(Delete, null)
-        }]
-      }))
-    }, /*#__PURE__*/React__default.createElement(Paper, {
-      elevation: 0,
-      sx: {
-        width: '100%',
-        margin: 0.25,
-        backgroundColor: 'geowebColors.background.surface',
-        border: 'solid 1px',
-        borderColor: 'geowebColors.cards.cardContainerBorder'
-      }
-    }, /*#__PURE__*/React__default.createElement(ListItemButton, {
-      onClick: function onClick() {
-        onClickObject(object);
-      },
-      selected: activeObject === object.id,
+  return /*#__PURE__*/React__default.createElement(AutoSizer, {
+    onResize: function onResize() {
+      if (listRef.current !== null) {
+        listRef.current.resetAfterIndex(0, true);
+      }
+    }
+  }, function (_ref3) {
+    var _ref3$height = _ref3.height,
+      height = _ref3$height === void 0 ? 0 : _ref3$height,
+      _ref3$width = _ref3.width,
+      width = _ref3$width === void 0 ? 0 : _ref3$width;
+    return /*#__PURE__*/React__default.createElement(Box, {
       sx: {
-        padding: 1,
-        height: '44px'
+        width: width
       }
-    }, /*#__PURE__*/React__default.createElement(Stack, null, /*#__PURE__*/React__default.createElement(Typography, {
-      variant: "caption"
-    }, object.objectName), /*#__PURE__*/React__default.createElement(Typography, {
-      variant: "caption",
+    }, !isLoading && objects.length === 0 ? /*#__PURE__*/React__default.createElement(Typography, {
       sx: {
-        opacity: 0.67
+        paddingLeft: '16px',
+        paddingTop: '8px'
+      },
+      variant: "body1"
+    }, NO_OBJECTS_FOUND) : /*#__PURE__*/React__default.createElement(VariableSizeList, {
+      height: height - DEFAULT_ADD_BUTTON_HEIGHT,
+      width: width,
+      itemCount: listInclHeaders.length,
+      itemSize: function itemSize(index) {
+        return getItemSize(width, index);
+      },
+      style: {
+        containerType: 'inline-size',
+        containerName: 'objectList'
+      },
+      ref: listRef
+    }, function (_ref4) {
+      var index = _ref4.index,
+        style = _ref4.style;
+      var listItem = listInclHeaders[index];
+      if (!listItem.isObject) {
+        var header = headerList[listItem.index];
+        return /*#__PURE__*/React__default.createElement(Typography, {
+          style: style,
+          key: listItem.index,
+          sx: {
+            paddingLeft: 2.5,
+            paddingBottom: 0.5,
+            paddingTop: 1,
+            opacity: 0.67,
+            lineHeight: '16px',
+            overflow: 'hidden',
+            whiteSpace: 'nowrap',
+            textOverflow: 'ellipsis'
+          },
+          variant: "caption"
+        }, header);
       }
-    }, object.scope === 'global' && 'Global: ', dateUtils.dateToString(objectDate, DATE_FORMAT, true), ' ', "UTC")))));
-  }));
+      var object = objects[listItem.index];
+      var objectDate = dateUtils.isoStringToDate(object.lastUpdatedTime);
+      return /*#__PURE__*/React__default.createElement(ContainerDiv, null, /*#__PURE__*/React__default.createElement(ListItem, {
+        style: style,
+        disablePadding: true,
+        key: object.id,
+        secondaryAction: /*#__PURE__*/React__default.createElement(Grid, {
+          container: true,
+          rowSpacing: 1
+        }, /*#__PURE__*/React__default.createElement(Grid, {
+          item: true,
+          className: "objectActions"
+        }, /*#__PURE__*/React__default.createElement(ToggleMenu, {
+          buttonSx: _defineProperty({
+            // position the share button for scope global
+            marginBottom: object.scope === 'user' ? 0 : 4
+          }, "@container objectList (min-width: ".concat(BREAKPOINT, "px)"), {
+            marginBottom: 0,
+            marginRight: object.scope === 'user' ? 1 : 4
+          }),
+          buttonIcon: /*#__PURE__*/React__default.createElement(Share, null),
+          menuTitle: MENU_SHARE,
+          tooltipTitle: BUTTON_SHARE,
+          menuPosition: "bottom",
+          "aria-label": BUTTON_SHARE,
+          menuItems: [{
+            text: BUTTON_AIRMET,
+            action: function action() {},
+            icon: /*#__PURE__*/React__default.createElement(ExitDomain, null),
+            isDisabled: true
+          }, {
+            text: BUTTON_SIGMET,
+            action: function action() {},
+            icon: /*#__PURE__*/React__default.createElement(ExitDomain, null),
+            isDisabled: true
+          }, {
+            text: BUTTON_PUBLIC_WARNING,
+            action: function action() {
+              onClickShare(object);
+            },
+            icon: /*#__PURE__*/React__default.createElement(ExitDomain, null)
+          }]
+        })), object.scope === 'user' && /*#__PURE__*/React__default.createElement(Grid, {
+          item: true,
+          className: "objectActions"
+        }, /*#__PURE__*/React__default.createElement(ToggleMenu, {
+          menuTitle: "Object options",
+          tooltipTitle: "Object options",
+          menuPosition: "bottom",
+          "aria-label": "Options",
+          menuItems: [{
+            text: BUTTON_EDIT$1,
+            action: function action() {
+              onClickEdit(object.id);
+            },
+            icon: /*#__PURE__*/React__default.createElement(Edit, null)
+          }, {
+            text: BUTTON_DELETE$1,
+            action: function action() {
+              onClickDelete(object.id);
+            },
+            icon: /*#__PURE__*/React__default.createElement(Delete, null)
+          }]
+        })))
+      }, /*#__PURE__*/React__default.createElement(Paper, {
+        elevation: 0,
+        sx: {
+          width: '100%',
+          margin: 0.25,
+          backgroundColor: 'geowebColors.background.surface',
+          border: 'solid 1px',
+          borderColor: 'geowebColors.cards.cardContainerBorder'
+        }
+      }, /*#__PURE__*/React__default.createElement(ListItemButton, {
+        onClick: function onClick() {
+          onClickObject(object);
+        },
+        selected: activeObject === object.id,
+        sx: {
+          padding: 1,
+          height: '44px'
+        }
+      }, /*#__PURE__*/React__default.createElement(Stack, null, /*#__PURE__*/React__default.createElement(Typography, {
+        variant: "caption",
+        sx: {
+          lineHeight: '16px',
+          maxHeight: '32px',
+          overflow: 'hidden'
+        }
+      }, object.objectName), /*#__PURE__*/React__default.createElement(Typography, {
+        variant: "caption",
+        sx: {
+          opacity: 0.67,
+          lineHeight: '16px',
+          maxHeight: '32px',
+          overflow: 'hidden'
+        }
+      }, object.scope === 'global' && 'Global: ', dateUtils.dateToString(objectDate, DATE_FORMAT, true), ' ', "UTC"))))));
+    }));
+  });
 };
 
 var DEFAULT_OBJECT_MANAGER_SIZE = {
@@ -4415,7 +4819,7 @@ var DEFAULT_OBJECT_MANAGER_POSITION = {
   left: 50
 };
 var DEFAULT_OBJECT_MANAGER_MIN_SIZE = {
-  width: 200,
+  width: 160,
   height: 300
 };
 var BUTTON_ADD_OBJECT$1 = 'Add a new object';
@@ -4937,11 +5341,7 @@ var ObjectManagerConnect = function ObjectManagerConnect(_ref) {
   };
   var onShareObject = function onShareObject(object) {
     dispatch(publicWarningActions.setFormValues({
-      object: {
-        id: object.id,
-        lastUpdatedTime: object.lastUpdatedTime,
-        objectName: object.objectName
-      }
+      object: object
     }));
     dispatch(uiActions.setToggleOpenDialog({
       setOpen: true,
@@ -23766,7 +24166,7 @@ var DEFAULT_WARNING_DIALOG_MIN_SIZE = {
   height: 300
 };
 var DIALOG_TITLE = 'Public Warning';
-var PublicWarnings = function PublicWarnings(_ref) {
+var PublicWarningsFormDialog = function PublicWarningsFormDialog(_ref) {
   var bounds = _ref.bounds,
     onClose = _ref.onClose,
     _ref$title = _ref.title,
@@ -23967,7 +24367,7 @@ var BUTTON_DELETE = 'Delete';
 var BUTTON_VIEW = 'View';
 var BUTTON_EDIT = 'Edit';
 var OBJECTS_MENU = 'Object options';
-var NO_OBJECT = 'No object selected';
+var NO_OBJECT = '(no object selected)';
 var formatDate = function formatDate(lastUpdatedTime) {
   return dateUtils.dateToString(dateUtils.isoStringToDate(lastUpdatedTime), "".concat(DATE_FORMAT, " 'UTC'"));
 };
@@ -23981,24 +24381,34 @@ var AreaField = function AreaField(_ref) {
     _ref$onAddObject = _ref.onAddObject,
     onAddObject = _ref$onAddObject === void 0 ? function () {} : _ref$onAddObject,
     _ref$isDisabled = _ref.isDisabled,
-    isDisabled = _ref$isDisabled === void 0 ? false : _ref$isDisabled,
-    _ref$id = _ref.id,
-    id = _ref$id === void 0 ? '' : _ref$id,
-    _ref$lastUpdatedTime = _ref.lastUpdatedTime,
-    lastUpdatedTime = _ref$lastUpdatedTime === void 0 ? '' : _ref$lastUpdatedTime,
-    _ref$objectName = _ref.objectName,
-    objectName = _ref$objectName === void 0 ? NO_OBJECT : _ref$objectName;
-  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Typography, {
+    isDisabled = _ref$isDisabled === void 0 ? false : _ref$isDisabled;
+  var _useFormContext = useFormContext(),
+    getValues = _useFormContext.getValues,
+    errors = _useFormContext.formState.errors;
+  var _useDraftFormHelpers = useDraftFormHelpers(),
+    isRequired = _useDraftFormHelpers.isRequired;
+  var lastUpdatedTime = getValues('object.lastUpdatedTime');
+  var objectName = getValues('object.objectName') || NO_OBJECT;
+  var hasObject = getValues('object') !== undefined;
+  var hasErrors = (errors === null || errors === void 0 ? void 0 : errors.geoJSON) !== undefined;
+  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Typography, Object.assign({
     variant: "h3",
     color: "text.secondary",
-    sx: {
+    sx: Object.assign({
       fontSize: '0.75rem',
       fontWeight: 'normal',
       lineHeight: 1.83,
       paddingLeft: 1.5
-    }
-  }, LABEL_AREA), /*#__PURE__*/React__default.createElement(Card, {
-    elevation: 0
+    }, hasErrors && {
+      color: 'geowebColors.captions.captionError.color'
+    })
+  }, hasErrors && {
+    'aria-errormessage': errorMessages.required
+  }), LABEL_AREA), /*#__PURE__*/React__default.createElement(Card, {
+    elevation: 0,
+    sx: Object.assign({}, !hasObject && {
+      background: 'none'
+    })
   }, /*#__PURE__*/React__default.createElement(CardContent, {
     sx: {
       position: 'relative',
@@ -24019,7 +24429,7 @@ var AreaField = function AreaField(_ref) {
   }, objectName), /*#__PURE__*/React__default.createElement(Typography, {
     variant: "body2",
     color: "text.secondary"
-  }, lastUpdatedTime ? formatDate(lastUpdatedTime) : ''), id ? /*#__PURE__*/React__default.createElement(ToggleMenu, {
+  }, lastUpdatedTime ? formatDate(lastUpdatedTime) : ''), hasObject ? /*#__PURE__*/React__default.createElement(ToggleMenu, {
     menuTitle: OBJECTS_MENU,
     tooltipTitle: OBJECTS_MENU,
     buttonSx: {
@@ -24046,7 +24456,12 @@ var AreaField = function AreaField(_ref) {
       icon: /*#__PURE__*/React__default.createElement(Delete, null)
     }]
   }) : null)), /*#__PURE__*/React__default.createElement(ReactHookFormHiddenInput, {
-    name: "objectId"
+    rules: {
+      validate: {
+        isRequired: isRequired
+      }
+    },
+    name: "geoJSON"
   }), /*#__PURE__*/React__default.createElement(Button, {
     sx: {
       marginTop: 1
@@ -24059,86 +24474,207 @@ var AreaField = function AreaField(_ref) {
   }, BUTTON_ADD_OBJECT));
 };
 
-var getEmptyPublicWarning = function getEmptyPublicWarning(object) {
+/* *
+ * 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)
+ * */
+var LABEL_PHENOMENON = 'Phenomenon';
+var warningPhenomena = [{
+  title: 'Wind',
+  key: 'wind',
+  icon: /*#__PURE__*/React.createElement(Wind, null)
+}, {
+  title: 'Fog',
+  key: 'fog',
+  icon: /*#__PURE__*/React.createElement(Fog, null)
+}, {
+  title: 'Thunderstorm',
+  key: 'thunderstorm',
+  icon: /*#__PURE__*/React.createElement(Lightning, null)
+}, {
+  title: 'Snow/ice',
+  key: 'snowIce',
+  icon: /*#__PURE__*/React.createElement(Snow, null)
+}, {
+  title: 'Rain',
+  key: 'rain',
+  icon: /*#__PURE__*/React.createElement(Rain, null)
+}, {
+  title: 'High temperature',
+  key: 'highTemp',
+  icon: /*#__PURE__*/React.createElement(TemperatureHigh, null)
+}, {
+  title: 'Funnel cloud',
+  key: 'funnelCloud',
+  icon: /*#__PURE__*/React.createElement(FunnelCloud, null)
+}, {
+  title: 'Low temperature',
+  key: 'lowTemp',
+  icon: /*#__PURE__*/React.createElement(TemperatureLow, null)
+}, {
+  title: 'Coastal event',
+  key: 'coastalEvent',
+  icon: /*#__PURE__*/React.createElement(CoastalEvent, null)
+}];
+var Phenomenon = function Phenomenon() {
+  var _useDraftFormHelpers = useDraftFormHelpers(),
+    isRequired = _useDraftFormHelpers.isRequired;
+  return /*#__PURE__*/React.createElement(ReactHookFormSelect, {
+    name: "phenomenon",
+    label: LABEL_PHENOMENON,
+    rules: {
+      validate: {
+        isRequired: isRequired
+      }
+    }
+  }, warningPhenomena.map(function (phenomenon) {
+    return /*#__PURE__*/React.createElement(MenuItem, {
+      key: phenomenon.key,
+      value: phenomenon.key
+    }, /*#__PURE__*/React.createElement(Grid, {
+      container: true,
+      justifyContent: "space-between"
+    }, /*#__PURE__*/React.createElement(Grid, {
+      item: true
+    }, phenomenon.title), /*#__PURE__*/React.createElement(Grid, {
+      item: true
+    }, /*#__PURE__*/React.createElement(ListItemIcon, null, phenomenon.icon))));
+  }));
+};
+
+/* *
+ * 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)
+ * */
+var LABEL_LEVEL = 'Level';
+var levelOptions = [{
+  title: 'Moderate',
+  key: 'moderate',
+  color: '#FAE21E',
+  textColor: '#051039'
+}, {
+  title: 'Severe',
+  key: 'severe',
+  color: '#E27000',
+  textColor: '#051039'
+}, {
+  title: 'Extreme',
+  key: 'extreme',
+  color: '#D62A20',
+  textColor: '#ffffff'
+}];
+var LevelField = function LevelField() {
+  var _useDraftFormHelpers = useDraftFormHelpers(),
+    isRequired = _useDraftFormHelpers.isRequired;
+  var _useFormContext = useFormContext(),
+    watch = _useFormContext.watch;
+  var selectedLevel = watch('level');
+  var levelDetails = levelOptions.find(function (level) {
+    return level.key === selectedLevel;
+  });
+  return /*#__PURE__*/React.createElement(ReactHookFormSelect, {
+    name: "level",
+    label: LABEL_LEVEL,
+    rules: {
+      validate: {
+        isRequired: 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'
+      }
+    }
+  }, levelOptions.map(function (level) {
+    return /*#__PURE__*/React.createElement(MenuItem, {
+      value: level.key,
+      key: level.key,
+      sx: {
+        '&.MuiMenuItem-root ': {
+          color: level.textColor,
+          background: level.color,
+          backgroundClip: 'content-box',
+          padding: '12px 8px',
+          '&:hover': {
+            backgroundColor: "".concat(level.color),
+            backgroundClip: 'content-box',
+            boxShadow: function boxShadow(theme) {
+              return "inset -8px -12px ".concat(theme.palette.geowebColors.cards.cardContainerMouseOver, ", inset 8px 12px ").concat(theme.palette.geowebColors.cards.cardContainerMouseOver);
+            }
+          },
+          '&.Mui-selected': {
+            backgroundColor: "".concat(level.color),
+            '&:hover': {
+              boxShadow: function boxShadow(theme) {
+                return "inset 4px 0px 0px 0px ".concat(theme.palette.geowebColors.typographyAndIcons.iconLinkActive, ", inset -8px -12px ").concat(theme.palette.geowebColors.cards.cardContainerMouseOver, ", inset 8px 12px ").concat(theme.palette.geowebColors.cards.cardContainerMouseOver);
+              }
+            }
+          }
+        }
+      }
+    }, "\xA0", level.title);
+  }));
+};
+
+var getEmptyPublicWarning = function getEmptyPublicWarning() {
   var currentTime = new Date();
   var validToTime = dateUtils.add(currentTime, {
     hours: 6
   });
   return {
+    id: '',
     phenomenon: '',
     validFrom: dateUtils.dateToString(currentTime, DATE_FORMAT_UTC, true),
     validUntil: dateUtils.dateToString(validToTime, DATE_FORMAT_UTC, true),
-    leadtime: LABEL_CURRENT,
     level: '',
     probability: 30,
     descriptionOriginal: '',
     descriptionTranslation: '',
-    objectId: (object === null || object === void 0 ? void 0 : object.id) || ''
+    geoJSON: null
   };
 };
+var getFormData = function getFormData(publicWarningsDetails, object) {
+  var data = Object.assign(Object.assign({}, publicWarningsDetails ? Object.assign({}, publicWarningsDetails) : getEmptyPublicWarning()), {
+    geoJSON: object === null || object === void 0 ? void 0 : object.geoJSON
+  });
+  return data;
+};
 // tablet breakpoint - 2 padding * 2 for both sides
 var containerQueryBreakpoint = "@container (min-width: ".concat(breakpoints.tablet - 32, "px)");
-var LABEL_PHENOMENON = 'Phenomenon';
 var LABEL_VALID_FROM = 'Valid from';
 var LABEL_VALID_UNTIL = 'Valid until';
-var LABEL_CURRENT = 'Current';
-var LABEL_EARLY = 'Early';
-var LABEL_LEVEL = 'Level';
 var LABEL_PROBABILITY = 'Probability';
 var BUTTON_CLEAR = 'Clear';
 var BUTTON_SAVE = 'Save';
 var BUTTON_PUBLISH = 'Publish';
 var dateFormat = 'DD/MM/YYYY HH:mm';
 var probablityOptions = [100, 90, 80, 70, 60, 50, 40, 30, 20, 10, 0];
-var levelOptions = [{
-  title: 'Moderate',
-  key: 'moderate',
-  color: '#FAE21E',
-  textColor: '#051039'
-}, {
-  title: 'Severe',
-  key: 'severe',
-  color: '#E27000',
-  textColor: '#051039'
-}, {
-  title: 'Extreme',
-  key: 'extreme',
-  color: '#D62A20',
-  textColor: '#ffffff'
-}];
-var warningPhenomena = [{
-  title: 'Coastal event',
-  key: 'coastalEvent',
-  icon: /*#__PURE__*/React.createElement(CoastalEvent, null)
-}, {
-  title: 'Fog',
-  key: 'fog',
-  icon: /*#__PURE__*/React.createElement(Fog, null)
-}, {
-  title: 'High temperature',
-  key: 'highTemp',
-  icon: /*#__PURE__*/React.createElement(TemperatureHigh, null)
-}, {
-  title: 'Low temperature',
-  key: 'lowTemp',
-  icon: /*#__PURE__*/React.createElement(TemperatureLow, null)
-}, {
-  title: 'Rain',
-  key: 'rain',
-  icon: /*#__PURE__*/React.createElement(Rain, null)
-}, {
-  title: 'Snow/ice',
-  key: 'snowIce',
-  icon: /*#__PURE__*/React.createElement(Snow, null)
-}, {
-  title: 'Thunderstorm',
-  key: 'thunderstorm',
-  icon: /*#__PURE__*/React.createElement(Lightning, null)
-}, {
-  title: 'Wind',
-  key: 'wind',
-  icon: /*#__PURE__*/React.createElement(Wind, null)
-}];
 var ContainerWrapper = styled('div')(function () {
   return {
     containerType: 'size',
@@ -24174,39 +24710,70 @@ var ContainerGrid = styled('div')(function (_ref3) {
     }
   });
 });
+var prepareFormValues = function prepareFormValues(data) {
+  data.IS_DRAFT;
+    data.object;
+    data['translation-select'];
+    var productToPost = __rest(data, ["IS_DRAFT", "object", 'translation-select']);
+  return productToPost;
+};
 var Form = function Form(_ref5) {
   var _ref5$isDisabled = _ref5.isDisabled,
     isDisabled = _ref5$isDisabled === void 0 ? false : _ref5$isDisabled,
-    object = _ref5.object;
+    _ref5$onSaveForm = _ref5.onSaveForm,
+    onSaveForm = _ref5$onSaveForm === void 0 ? function () {} : _ref5$onSaveForm,
+    _ref5$onPublishForm = _ref5.onPublishForm,
+    onPublishForm = _ref5$onPublishForm === void 0 ? function () {} : _ref5$onPublishForm;
   var _useFormContext = useFormContext(),
-    watch = _useFormContext.watch;
-  var selectedLevel = watch('level');
-  var levelDetails = levelOptions.find(function (level) {
-    return level.key === selectedLevel;
-  });
+    handleSubmit = _useFormContext.handleSubmit,
+    reset = _useFormContext.reset;
+  var _useDraftFormHelpers = useDraftFormHelpers(),
+    toggleIsDraft = _useDraftFormHelpers.toggleIsDraft,
+    DraftFieldHelper = _useDraftFormHelpers.DraftFieldHelper;
+  var onPressPublish = function onPressPublish() {
+    // TODO: enable publish
+    toggleIsDraft(false);
+    handleSubmit(function (data) {
+      return __awaiter(void 0, void 0, void 0, /*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
+        return _regeneratorRuntime().wrap(function _callee$(_context) {
+          while (1) switch (_context.prev = _context.next) {
+            case 0:
+              onPublishForm(prepareFormValues(data));
+            case 1:
+            case "end":
+              return _context.stop();
+          }
+        }, _callee);
+      }));
+    })();
+  };
+  var onPressSave = function onPressSave() {
+    // TODO: enable save
+    toggleIsDraft(true);
+    handleSubmit(function (data) {
+      return __awaiter(void 0, void 0, void 0, /*#__PURE__*/_regeneratorRuntime().mark(function _callee2() {
+        return _regeneratorRuntime().wrap(function _callee2$(_context2) {
+          while (1) switch (_context2.prev = _context2.next) {
+            case 0:
+              onSaveForm(prepareFormValues(data));
+            case 1:
+            case "end":
+              return _context2.stop();
+          }
+        }, _callee2);
+      }));
+    })();
+  };
+  var onPressClear = function onPressClear() {
+    reset(getEmptyPublicWarning());
+  };
   return /*#__PURE__*/React.createElement(ContainerWrapper, null, /*#__PURE__*/React.createElement(ContainerFormWrapper, null, /*#__PURE__*/React.createElement(ContainerGrid, null, /*#__PURE__*/React.createElement(Grid, {
     container: true,
     rowSpacing: 2
   }, /*#__PURE__*/React.createElement(Grid, {
     item: true,
     xs: 12
-  }, /*#__PURE__*/React.createElement(ReactHookFormSelect, {
-    name: "phenomenon",
-    label: LABEL_PHENOMENON,
-    rules: {}
-  }, warningPhenomena.map(function (phenomenon) {
-    return /*#__PURE__*/React.createElement(MenuItem, {
-      key: phenomenon.key,
-      value: phenomenon.key
-    }, /*#__PURE__*/React.createElement(Grid, {
-      container: true,
-      justifyContent: "space-between"
-    }, /*#__PURE__*/React.createElement(Grid, {
-      item: true
-    }, phenomenon.title), /*#__PURE__*/React.createElement(Grid, {
-      item: true
-    }, /*#__PURE__*/React.createElement(ListItemIcon, null, phenomenon.icon))));
-  }))), /*#__PURE__*/React.createElement(Grid, {
+  }, /*#__PURE__*/React.createElement(Phenomenon, null)), /*#__PURE__*/React.createElement(Grid, {
     item: true,
     xs: 12
   }, /*#__PURE__*/React.createElement(Grid, {
@@ -24217,10 +24784,7 @@ var Form = function Form(_ref5) {
     onEditObject: function onEditObject() {},
     onViewObject: function onViewObject() {},
     onDeleteObject: function onDeleteObject() {},
-    onAddObject: function onAddObject() {},
-    id: object === null || object === void 0 ? void 0 : object.id,
-    objectName: object === null || object === void 0 ? void 0 : object.objectName,
-    lastUpdatedTime: object === null || object === void 0 ? void 0 : object.lastUpdatedTime
+    onAddObject: function onAddObject() {}
   }))), /*#__PURE__*/React.createElement(Grid, {
     item: true,
     xs: 12,
@@ -24244,48 +24808,7 @@ var Form = function Form(_ref5) {
     rules: {},
     label: LABEL_VALID_UNTIL,
     format: dateFormat
-  }))), /*#__PURE__*/React.createElement(ReactHookFormRadioGroup, {
-    name: "leadtime",
-    rules: {},
-    sx: {
-      marginBottom: -1
-    }
-  }, /*#__PURE__*/React.createElement(Grid, {
-    item: true,
-    xs: 12,
-    container: true,
-    spacing: 2
-  }, /*#__PURE__*/React.createElement(Grid, {
-    item: true,
-    xs: 6
-  }, /*#__PURE__*/React.createElement(FormControlLabel, {
-    sx: {
-      padding: 1,
-      paddingBottom: 0
-    },
-    control: /*#__PURE__*/React.createElement(Radio, {
-      style: {
-        pointerEvents: 'auto'
-      }
-    }),
-    label: LABEL_CURRENT,
-    value: LABEL_CURRENT
-  })), /*#__PURE__*/React.createElement(Grid, {
-    item: true,
-    xs: 6
-  }, /*#__PURE__*/React.createElement(FormControlLabel, {
-    sx: {
-      padding: 1,
-      paddingBottom: 0
-    },
-    control: /*#__PURE__*/React.createElement(Radio, {
-      style: {
-        pointerEvents: 'auto'
-      }
-    }),
-    label: LABEL_EARLY,
-    value: LABEL_EARLY
-  })))), /*#__PURE__*/React.createElement(Grid, {
+  }))), /*#__PURE__*/React.createElement(Grid, {
     item: true,
     xs: 12,
     container: true,
@@ -24294,46 +24817,7 @@ var Form = function Form(_ref5) {
     item: true,
     xs: 12,
     sm: 6
-  }, /*#__PURE__*/React.createElement(ReactHookFormSelect, {
-    name: "level",
-    label: LABEL_LEVEL,
-    rules: {},
-    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'
-      }
-    }
-  }, levelOptions.map(function (level) {
-    return /*#__PURE__*/React.createElement(MenuItem, {
-      value: level.key,
-      key: level.key,
-      sx: {
-        '&.MuiMenuItem-root ': {
-          color: level.textColor,
-          background: level.color,
-          backgroundClip: 'content-box',
-          padding: '12px 8px',
-          '&:hover': {
-            backgroundColor: "".concat(level.color),
-            backgroundClip: 'content-box',
-            boxShadow: function boxShadow(theme) {
-              return "inset -8px -12px ".concat(theme.palette.geowebColors.cards.cardContainerMouseOver, ", inset 8px 12px ").concat(theme.palette.geowebColors.cards.cardContainerMouseOver);
-            }
-          },
-          '&.Mui-selected': {
-            backgroundColor: "".concat(level.color),
-            '&:hover': {
-              boxShadow: function boxShadow(theme) {
-                return "inset 4px 0px 0px 0px ".concat(theme.palette.geowebColors.typographyAndIcons.iconLinkActive, ", inset -8px -12px ").concat(theme.palette.geowebColors.cards.cardContainerMouseOver, ", inset 8px 12px ").concat(theme.palette.geowebColors.cards.cardContainerMouseOver);
-              }
-            }
-          }
-        }
-      }
-    }, "\xA0", level.title);
-  }))), /*#__PURE__*/React.createElement(Grid, {
+  }, /*#__PURE__*/React.createElement(LevelField, null)), /*#__PURE__*/React.createElement(Grid, {
     item: true,
     xs: 12,
     sm: 6
@@ -24354,7 +24838,9 @@ var Form = function Form(_ref5) {
   }, /*#__PURE__*/React.createElement(Grid, {
     item: true,
     xs: 12
-  }, /*#__PURE__*/React.createElement(DescriptionField, null)))))), /*#__PURE__*/React.createElement(Box, {
+  }, /*#__PURE__*/React.createElement(DescriptionField, null))))), /*#__PURE__*/React.createElement(DraftFieldHelper, null), /*#__PURE__*/React.createElement(ReactHookFormHiddenInput, {
+    name: "id"
+  })), /*#__PURE__*/React.createElement(Box, {
     sx: {
       padding: '24px 10px 14px 10px',
       position: 'absolute',
@@ -24377,7 +24863,8 @@ var Form = function Form(_ref5) {
       width: '100%',
       marginBottom: 1
     },
-    disabled: isDisabled
+    disabled: isDisabled,
+    onClick: onPressClear
   }, BUTTON_CLEAR)), /*#__PURE__*/React.createElement(Grid, {
     item: true,
     xs: 12,
@@ -24388,7 +24875,8 @@ var Form = function Form(_ref5) {
       width: '100%',
       marginBottom: 1
     },
-    disabled: isDisabled
+    disabled: isDisabled,
+    onClick: onPressSave
   }, BUTTON_SAVE)), /*#__PURE__*/React.createElement(Grid, {
     item: true,
     xs: 12,
@@ -24398,16 +24886,19 @@ var Form = function Form(_ref5) {
     sx: {
       width: '100%'
     },
-    disabled: isDisabled
+    disabled: isDisabled,
+    onClick: onPressPublish
   }, BUTTON_PUBLISH))))));
 };
 var PublicWarningsForm = function PublicWarningsForm(props) {
   var object = props.object,
     publicWarningDetails = props.publicWarningDetails;
-  var publicWarningFormData = publicWarningDetails || getEmptyPublicWarning(object);
+  var publicWarningFormData = getFormData(publicWarningDetails, object);
   return /*#__PURE__*/React.createElement(ReactHookFormProvider, {
     options: Object.assign(Object.assign({}, defaultFormOptions), {
-      defaultValues: publicWarningFormData
+      defaultValues: Object.assign(Object.assign({}, publicWarningFormData), {
+        object: object
+      })
     })
   }, /*#__PURE__*/React.createElement(Form, Object.assign({}, props)));
 };
@@ -24459,7 +24950,6 @@ var PublicWarningsFormConnect = function PublicWarningsFormConnect() {
     return getPublicWarningObject(store);
   });
   return /*#__PURE__*/React.createElement(PublicWarningsForm, {
-    isDisabled: true,
     object: publicWarningObject
   });
 };
@@ -24480,7 +24970,7 @@ var PublicWarningsFormConnect = function PublicWarningsFormConnect() {
  * Copyright 2023 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
  * Copyright 2023 - Finnish Meteorological Institute (FMI)
  * */
-var PublicWarningsConnect = function PublicWarningsConnect(_ref) {
+var PublicWarningsFormDialogConnect = function PublicWarningsFormDialogConnect(_ref) {
   var bounds = _ref.bounds,
     _ref$source = _ref.source,
     source = _ref$source === void 0 ? 'app' : _ref$source,
@@ -24494,7 +24984,7 @@ var PublicWarningsConnect = function PublicWarningsConnect(_ref) {
   if (!isDialogOpen) {
     return null;
   }
-  return /*#__PURE__*/React__default.createElement(PublicWarnings, {
+  return /*#__PURE__*/React__default.createElement(PublicWarningsFormDialog, {
     isOpen: isDialogOpen,
     onClose: onCloseDialog,
     order: dialogOrder,
@@ -25078,4 +25568,4 @@ var drawingModuleConfig = {
   sagas: [drawingSaga]
 };
 
-export { DIALOG_TITLE, DrawingToolConnect, Wrapper as DrawingToolForm, DrawingToolFormConnect, DrawingToolMapButtonConnect, ObjectManagerConnect, ObjectManagerMapButtonConnect, PublicWarnings, PublicWarningsConnect, WarningsModuleProvider, drawingModuleConfig, useObjectDrawDialogAction };
+export { DIALOG_TITLE, DrawingToolConnect, Wrapper as DrawingToolForm, DrawingToolFormConnect, DrawingToolMapButtonConnect, ObjectManagerConnect, ObjectManagerMapButtonConnect, PublicWarningsFormDialog, PublicWarningsFormDialogConnect, WarningsModuleProvider, drawingModuleConfig, useObjectDrawDialogAction };