@opengeoweb/shared 4.17.0 → 4.19.0

package/index.esm.js

@@ -1,12 +1,12 @@
 import * as React from 'react';
 import React__default, { useRef } from 'react';
-import { Box, Typography, Dialog, DialogTitle, IconButton, DialogContent, DialogActions, Button, CircularProgress, Alert, AlertTitle, useTheme, Link, Avatar as Avatar$1, Paper, ClickAwayListener, MenuList, MenuItem, Grid, RadioGroup, FormControlLabel, Radio, Tooltip, List, ListItem, Tabs, Tab, Backdrop, Slider, ToggleButton, Menu, ListSubheader, ListItemIcon, Checkbox, Select, Accordion, AccordionSummary, AccordionDetails } from '@mui/material';
-import { Close, Exclamation, Success, Info, ChevronRight, GeoWebLogo, Resize, useThemeContext, DragHandle, ArrowLeft, ArrowRight, KeyOption, ArrowUp, ArrowDown, KeyCommand, Options, Delete, VisibilityOff, Visibility, ChevronDown } from '@opengeoweb/theme';
+import { Box, Typography, Tooltip, IconButton, Dialog, DialogTitle, DialogContent, DialogActions, Button, CircularProgress, Alert, AlertTitle, useTheme, Link, Avatar as Avatar$1, Paper, ClickAwayListener, MenuList, MenuItem, Grid, RadioGroup, FormControlLabel, Radio, List, ListItem, Tabs, Tab, Backdrop, Slider, ToggleButton, Menu, ListSubheader, ListItemIcon, Select, Accordion, AccordionSummary, AccordionDetails } from '@mui/material';
+import { Close, Exclamation, Success, Info, ChevronRight, GeoWebLogo, Resize, useThemeContext, DragHandle, ArrowLeft, ArrowRight, KeyOption, ArrowUp, ArrowDown, KeyCommand, Options, ChevronDown } from '@opengeoweb/theme';
 import { throttle } from 'lodash';
 import Draggable from 'react-draggable';
 import { Resizable } from 're-resizable';
 import { useStore } from 'react-redux';
-import { parseISO, parse, format, isEqual, isBefore, isAfter } from 'date-fns';
+import { parseISO, parse, format, isEqual, isBefore, isAfter, add as add$1, sub as sub$1, differenceInMinutes as differenceInMinutes$1, differenceInHours as differenceInHours$1 } from 'date-fns';
 
 /*! *****************************************************************************
 Copyright (c) Microsoft Corporation.
@@ -87,166 +87,6 @@ var StatusTag = function StatusTag(_a) {
   }, content));
 };
 
-var CustomDialog = function CustomDialog(_a) {
-  var title = _a.title,
-      _onClose = _a.onClose,
-      _a$description = _a.description,
-      description = _a$description === void 0 ? '' : _a$description,
-      _a$actions = _a.actions,
-      actions = _a$actions === void 0 ? null : _a$actions,
-      children = _a.children,
-      sx = _a.sx,
-      other = __rest(_a, ["title", "onClose", "description", "actions", "children", "sx"]);
-
-  return /*#__PURE__*/React.createElement(Dialog, Object.assign({
-    "data-testid": "customDialog",
-    PaperProps: {
-      sx: Object.assign({
-        width: '560px',
-        margin: 2.5
-      }, sx)
-    },
-    // fix for briefly showing default options when closing dialog
-    transitionDuration: 0,
-    onClose: function onClose() {
-      _onClose('CLOSED');
-    },
-    "aria-labelledby": "dialog-title"
-  }, other), /*#__PURE__*/React.createElement(DialogTitle, {
-    id: "dialog-title",
-    sx: {
-      zIndex: 1,
-      padding: 2,
-      display: 'flex',
-      justifyContent: 'space-between',
-      alignItems: 'center'
-    }
-  }, /*#__PURE__*/React.createElement(Typography, {
-    sx: {
-      fontSize: '16px',
-      fontWeight: 500
-    },
-    "data-testid": "customDialog-title",
-    component: "span"
-  }, title), /*#__PURE__*/React.createElement(IconButton, {
-    "data-testid": "customDialog-close",
-    "aria-label": "close",
-    onClick: function onClick() {
-      return _onClose('CLOSED');
-    },
-    size: "small"
-  }, /*#__PURE__*/React.createElement(Close, {
-    "data-testid": "CloseIcon"
-  }))), /*#__PURE__*/React.createElement(DialogContent, {
-    sx: {
-      padding: '8px 16px'
-    }
-  }, description && /*#__PURE__*/React.createElement(Typography, {
-    variant: "body1"
-  }, description), children), /*#__PURE__*/React.createElement(DialogActions, {
-    sx: {
-      padding: 2,
-      flexDirection: {
-        xs: 'column',
-        sm: 'row'
-      }
-    }
-  }, actions));
-};
-
-var confirmStyle = {
-  width: {
-    xs: '100%',
-    sm: '150px'
-  },
-  marginLeft: {
-    xs: '0px!important',
-    sm: '8px!important'
-  },
-  marginTop: {
-    xs: 2,
-    sm: 0
-  }
-};
-var ConfirmationDialog = function ConfirmationDialog(_a) {
-  var open = _a.open,
-      title = _a.title,
-      _a$description = _a.description,
-      description = _a$description === void 0 ? 'Are you sure?' : _a$description,
-      _a$confirmLabel = _a.confirmLabel,
-      confirmLabel = _a$confirmLabel === void 0 ? 'Submit' : _a$confirmLabel,
-      _a$cancelLabel = _a.cancelLabel,
-      cancelLabel = _a$cancelLabel === void 0 ? 'Go back' : _a$cancelLabel,
-      onSubmit = _a.onSubmit,
-      onClose = _a.onClose,
-      _a$content = _a.content,
-      content = _a$content === void 0 ? null : _a$content,
-      _a$disableAutoFocus = _a.disableAutoFocus,
-      disableAutoFocus = _a$disableAutoFocus === void 0 ? false : _a$disableAutoFocus,
-      _a$isLoading = _a.isLoading,
-      isLoading = _a$isLoading === void 0 ? false : _a$isLoading,
-      other = __rest(_a, ["open", "title", "description", "confirmLabel", "cancelLabel", "onSubmit", "onClose", "content", "disableAutoFocus", "isLoading"]);
-
-  other.catchOnCancel;
-      var rest = __rest(other, ["catchOnCancel"]); // remove unwanted props
-
-
-  return /*#__PURE__*/React.createElement(CustomDialog, Object.assign({
-    "data-testid": "confirmationDialog",
-    open: open,
-    title: title,
-    description: description,
-    onClose: onClose,
-    actions: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Button, {
-      "data-testid": "confirmationDialog-cancel",
-      variant: "tertiary",
-      // eslint-disable-next-line @typescript-eslint/explicit-function-return-type
-      sx: function sx(theme) {
-        return {
-          width: {
-            xs: '100%',
-            sm: '150px'
-          },
-          '&:focus': {
-            outline: theme.palette.geowebColors.buttons.focusDefault.outline,
-            borderColor: 'transparent'
-          }
-        };
-      },
-      onClick: function onClick() {
-        return onClose('CANCELLED');
-      },
-      disableFocusRipple: true
-    }, cancelLabel), isLoading ? /*#__PURE__*/React.createElement(Box, {
-      "data-testid": "confirm-dialog-spinner",
-      sx: Object.assign(Object.assign({}, confirmStyle), {
-        height: '40px',
-        display: 'flex',
-        justifyContent: 'center',
-        alignItems: 'center'
-      })
-    }, /*#__PURE__*/React.createElement(CircularProgress, {
-      size: 40,
-      color: "secondary"
-    })) : /*#__PURE__*/React.createElement(Button, {
-      "data-testid": "confirmationDialog-confirm",
-      variant: "primary",
-      // eslint-disable-next-line @typescript-eslint/explicit-function-return-type
-      sx: function sx(theme) {
-        return Object.assign(Object.assign({}, confirmStyle), {
-          '&:focus': {
-            outline: theme.palette.geowebColors.buttons.focusDefault.outline,
-            borderColor: 'transparent'
-          }
-        });
-      },
-      onClick: onSubmit,
-      autoFocus: !disableAutoFocus,
-      disableFocusRipple: true
-    }, confirmLabel))
-  }, rest), content);
-};
-
 function _classCallCheck(instance, Constructor) {
   if (!(instance instanceof Constructor)) {
     throw new TypeError("Cannot call a class as a function");
@@ -439,6 +279,247 @@ function _nonIterableRest() {
   throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
 }
 
+var defaultDelay = 1000;
+var useControlledTooltip = function useControlledTooltip() {
+  var _React$useState = React.useState(false),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      tooltipOpen = _React$useState2[0],
+      setTooltipOpen = _React$useState2[1];
+
+  var _React$useState3 = React.useState(false),
+      _React$useState4 = _slicedToArray(_React$useState3, 2),
+      delayedTooltip = _React$useState4[0],
+      setDelayedTooltip = _React$useState4[1];
+
+  React.useEffect(function () {
+    if (tooltipOpen === true) {
+      var timer = setTimeout(function () {
+        return setDelayedTooltip(true);
+      }, defaultDelay);
+      return function () {
+        clearTimeout(timer);
+      };
+    }
+
+    setDelayedTooltip(false);
+    return function () {};
+  }, [tooltipOpen]);
+  return [delayedTooltip, setTooltipOpen];
+};
+var CustomTooltip = function CustomTooltip(props) {
+  return /*#__PURE__*/React.createElement(Tooltip, Object.assign({}, props, {
+    enterDelay: defaultDelay,
+    enterNextDelay: defaultDelay,
+    disableInteractive: true
+  }));
+};
+
+var CustomIconButton = /*#__PURE__*/React.forwardRef(function (_a, ref) {
+  var _a$tooltipTitle = _a.tooltipTitle,
+      tooltipTitle = _a$tooltipTitle === void 0 ? '' : _a$tooltipTitle,
+      _a$variant = _a.variant,
+      variant = _a$variant === void 0 ? 'flat' : _a$variant,
+      _a$isSelected = _a.isSelected,
+      isSelected = _a$isSelected === void 0 ? false : _a$isSelected,
+      _a$shouldShowAsDisabl = _a.shouldShowAsDisabled,
+      shouldShowAsDisabled = _a$shouldShowAsDisabl === void 0 ? false : _a$shouldShowAsDisabl,
+      _a$size = _a.size,
+      size = _a$size === void 0 ? 'small' : _a$size,
+      children = _a.children,
+      className = _a.className,
+      props = __rest(_a, ["tooltipTitle", "variant", "isSelected", "shouldShowAsDisabled", "size", "children", "className"]);
+
+  var classNames = [].concat(_toConsumableArray(className ? [className] : []), _toConsumableArray(isSelected ? ['Mui-selected'] : []), [variant]).join(' ');
+
+  var renderIconButton = function renderIconButton() {
+    return /*#__PURE__*/React.createElement(IconButton, Object.assign({
+      "aria-label": tooltipTitle
+    }, props, {
+      size: size,
+      className: classNames,
+      ref: ref,
+      sx: Object.assign(Object.assign({}, props.sx), shouldShowAsDisabled && {
+        '&.MuiIconButton-root': {
+          color: "geowebColors.iconButtons.".concat(variant, ".disabled.color")
+        },
+        '&.Mui-focusVisible': {
+          color: "geowebColors.iconButtons.".concat(variant, ".default.color")
+        }
+      })
+    }), children);
+  };
+
+  return tooltipTitle ? /*#__PURE__*/React.createElement(CustomTooltip, {
+    title: tooltipTitle,
+    placement: "top",
+    sx: {
+      pointerEvents: 'none'
+    }
+  }, renderIconButton()) : renderIconButton();
+});
+
+var CustomDialog = function CustomDialog(_a) {
+  var title = _a.title,
+      _onClose = _a.onClose,
+      _a$description = _a.description,
+      description = _a$description === void 0 ? '' : _a$description,
+      _a$actions = _a.actions,
+      actions = _a$actions === void 0 ? null : _a$actions,
+      children = _a.children,
+      sx = _a.sx,
+      other = __rest(_a, ["title", "onClose", "description", "actions", "children", "sx"]);
+
+  return /*#__PURE__*/React.createElement(Dialog, Object.assign({
+    "data-testid": "customDialog",
+    PaperProps: {
+      sx: Object.assign({
+        width: '560px',
+        margin: 2.5
+      }, sx)
+    },
+    // fix for briefly showing default options when closing dialog
+    transitionDuration: 0,
+    onClose: function onClose() {
+      _onClose('CLOSED');
+    },
+    "aria-labelledby": "dialog-title"
+  }, other), /*#__PURE__*/React.createElement(DialogTitle, {
+    id: "dialog-title",
+    sx: {
+      zIndex: 1,
+      padding: 2,
+      display: 'flex',
+      justifyContent: 'space-between',
+      alignItems: 'center'
+    }
+  }, /*#__PURE__*/React.createElement(Typography, {
+    sx: {
+      fontSize: '16px',
+      fontWeight: 500
+    },
+    "data-testid": "customDialog-title",
+    component: "span"
+  }, title), /*#__PURE__*/React.createElement(CustomIconButton, {
+    "data-testid": "customDialog-close",
+    "aria-label": "close",
+    onClick: function onClick() {
+      return _onClose('CLOSED');
+    },
+    sx: {
+      '&.MuiIconButton-root': {
+        color: 'geowebColors.greys.accessible'
+      }
+    }
+  }, /*#__PURE__*/React.createElement(Close, {
+    "data-testid": "CloseIcon"
+  }))), /*#__PURE__*/React.createElement(DialogContent, {
+    sx: {
+      padding: '8px 16px'
+    }
+  }, description && /*#__PURE__*/React.createElement(Typography, {
+    variant: "body1"
+  }, description), children), /*#__PURE__*/React.createElement(DialogActions, {
+    sx: {
+      padding: 2,
+      flexDirection: {
+        xs: 'column',
+        sm: 'row'
+      }
+    }
+  }, actions));
+};
+
+var confirmStyle = {
+  width: {
+    xs: '100%',
+    sm: '150px'
+  },
+  marginLeft: {
+    xs: '0px!important',
+    sm: '8px!important'
+  },
+  marginTop: {
+    xs: 2,
+    sm: 0
+  }
+};
+var ConfirmationDialog = function ConfirmationDialog(_a) {
+  var open = _a.open,
+      title = _a.title,
+      _a$description = _a.description,
+      description = _a$description === void 0 ? 'Are you sure?' : _a$description,
+      _a$confirmLabel = _a.confirmLabel,
+      confirmLabel = _a$confirmLabel === void 0 ? 'Submit' : _a$confirmLabel,
+      _a$cancelLabel = _a.cancelLabel,
+      cancelLabel = _a$cancelLabel === void 0 ? 'Go back' : _a$cancelLabel,
+      onSubmit = _a.onSubmit,
+      onClose = _a.onClose,
+      _a$content = _a.content,
+      content = _a$content === void 0 ? null : _a$content,
+      _a$disableAutoFocus = _a.disableAutoFocus,
+      disableAutoFocus = _a$disableAutoFocus === void 0 ? false : _a$disableAutoFocus,
+      _a$isLoading = _a.isLoading,
+      isLoading = _a$isLoading === void 0 ? false : _a$isLoading,
+      other = __rest(_a, ["open", "title", "description", "confirmLabel", "cancelLabel", "onSubmit", "onClose", "content", "disableAutoFocus", "isLoading"]);
+
+  other.catchOnCancel;
+      var rest = __rest(other, ["catchOnCancel"]); // remove unwanted props
+
+
+  return /*#__PURE__*/React.createElement(CustomDialog, Object.assign({
+    "data-testid": "confirmationDialog",
+    open: open,
+    title: title,
+    description: description,
+    onClose: onClose,
+    actions: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Button, {
+      "data-testid": "confirmationDialog-cancel",
+      variant: "tertiary",
+      // eslint-disable-next-line @typescript-eslint/explicit-function-return-type
+      sx: function sx(theme) {
+        return {
+          width: {
+            xs: '100%',
+            sm: '150px'
+          },
+          '&:focus': {
+            outline: theme.palette.geowebColors.buttons.primary.focus.outline,
+            borderColor: 'transparent'
+          }
+        };
+      },
+      onClick: function onClick() {
+        return onClose('CANCELLED');
+      }
+    }, cancelLabel), isLoading ? /*#__PURE__*/React.createElement(Box, {
+      "data-testid": "confirm-dialog-spinner",
+      sx: Object.assign(Object.assign({}, confirmStyle), {
+        height: '40px',
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center'
+      })
+    }, /*#__PURE__*/React.createElement(CircularProgress, {
+      size: 40,
+      color: "secondary"
+    })) : /*#__PURE__*/React.createElement(Button, {
+      "data-testid": "confirmationDialog-confirm",
+      variant: "primary",
+      // eslint-disable-next-line @typescript-eslint/explicit-function-return-type
+      sx: function sx(theme) {
+        return Object.assign(Object.assign({}, confirmStyle), {
+          '&:focus': {
+            outline: theme.palette.geowebColors.buttons.primary.focus.outline,
+            borderColor: 'transparent'
+          }
+        });
+      },
+      onClick: onSubmit,
+      autoFocus: !disableAutoFocus
+    }, confirmLabel))
+  }, rest), content);
+};
+
 /* *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -639,7 +720,10 @@ var adjustPosition = function adjustPosition(bbox, containingView, position, set
 };
 var useMakeSureContainerStaysInsideWindow = function useMakeSureContainerStaysInsideWindow(nodeRef, position, setPosition) {
   var onResizeWindow = React__default.useCallback(function () {
-    if (!nodeRef.current) return;
+    if (!nodeRef.current) {
+      return;
+    }
+
     var bbox = nodeRef.current.firstChild.getBoundingClientRect();
     var containingView = nodeRef.current.parentElement.getBoundingClientRect();
     adjustPosition(bbox, containingView, position, setPosition);
@@ -1179,8 +1263,8 @@ var ErrorBoundary = /*#__PURE__*/function (_React$Component) {
         return /*#__PURE__*/React.createElement(Box, {
           sx: {
             whiteSpace: 'pre-wrap',
-            width: 'inherit',
-            height: 'inherit',
+            width: '100%',
+            height: '100%',
             overflowY: 'scroll'
           }
         }, /*#__PURE__*/React.createElement(AlertBanner, {
@@ -1263,8 +1347,8 @@ var Avatar = function Avatar(_ref) {
  * See the License for the specific language governing permissions and
  * limitations under the License.
  *
- * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
- * Copyright 2021 - Finnish Meteorological Institute (FMI)
+ * Copyright 2023 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+ * Copyright 2023 - Finnish Meteorological Institute (FMI)
  * */
 var styles$3 = {
   container: {
@@ -1284,15 +1368,6 @@ var styles$3 = {
       paddingLeft: 2,
       paddingRight: 2
     }
-  },
-  button: {
-    padding: 0,
-    border: 'none',
-    background: 'transparent',
-    '&:hover': {
-      border: 'none',
-      background: 'transparent'
-    }
   }
 };
 
@@ -1305,11 +1380,19 @@ var UserMenu = function UserMenu(_ref) {
       onClose = _ref$onClose === void 0 ? function () {} : _ref$onClose,
       children = _ref.children,
       initials = _ref.initials;
-  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(IconButton, {
+  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(CustomIconButton, {
     "data-testid": "userButton",
     onClick: onToggle,
-    sx: styles$3.button,
-    size: "large"
+    sx: {
+      '&.MuiButtonBase-root': {
+        background: 'transparent',
+        '&:hover': {
+          border: 'none',
+          background: 'transparent'
+        }
+      }
+    },
+    size: "medium"
   }, /*#__PURE__*/React__default.createElement(Avatar, null, initials)), isOpen && /*#__PURE__*/React__default.createElement(Paper, {
     sx: styles$3.container,
     "data-testid": "userMenu"
@@ -1399,41 +1482,6 @@ var ToolFooter = function ToolFooter() {
   });
 };
 
-var defaultDelay = 1000;
-var useControlledTooltip = function useControlledTooltip() {
-  var _React$useState = React.useState(false),
-      _React$useState2 = _slicedToArray(_React$useState, 2),
-      tooltipOpen = _React$useState2[0],
-      setTooltipOpen = _React$useState2[1];
-
-  var _React$useState3 = React.useState(false),
-      _React$useState4 = _slicedToArray(_React$useState3, 2),
-      delayedTooltip = _React$useState4[0],
-      setDelayedTooltip = _React$useState4[1];
-
-  React.useEffect(function () {
-    if (tooltipOpen === true) {
-      var timer = setTimeout(function () {
-        return setDelayedTooltip(true);
-      }, defaultDelay);
-      return function () {
-        clearTimeout(timer);
-      };
-    }
-
-    setDelayedTooltip(false);
-    return function () {};
-  }, [tooltipOpen]);
-  return [delayedTooltip, setTooltipOpen];
-};
-var CustomTooltip = function CustomTooltip(props) {
-  return /*#__PURE__*/React.createElement(Tooltip, Object.assign({}, props, {
-    enterDelay: defaultDelay,
-    enterNextDelay: defaultDelay,
-    disableInteractive: true
-  }));
-};
-
 /* *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -1447,8 +1495,8 @@ var CustomTooltip = function CustomTooltip(props) {
  * See the License for the specific language governing permissions and
  * limitations under the License.
  *
- * Copyright 2022 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
- * Copyright 2022 - Finnish Meteorological Institute (FMI)
+ * Copyright 2023 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+ * Copyright 2023 - Finnish Meteorological Institute (FMI)
  * */
 
 var getStyle = function getStyle(size) {
@@ -1546,13 +1594,13 @@ var ToolHeader = function ToolHeader(_ref) {
   }, isDraggable && size !== 'xxs' && !leftHeaderComponent && /*#__PURE__*/React__default.createElement(Grid, {
     container: true,
     justifyContent: "flex-start"
-  }, /*#__PURE__*/React__default.createElement(IconButton, {
+  }, /*#__PURE__*/React__default.createElement(CustomIconButton, {
     "data-testid": "dragBtn",
     disableRipple: true,
-    size: "large",
-    sx: Object.assign(Object.assign({}, iconStyle), {
-      pointerEvents: 'none'
-    })
+    sx: {
+      pointerEvents: 'none',
+      '&.MuiIconButton-root': iconStyle
+    }
   }, /*#__PURE__*/React__default.createElement(DragHandle, null))), leftHeaderComponent && leftHeaderComponent), /*#__PURE__*/React__default.createElement(Grid, {
     className: "header-title",
     item: true,
@@ -1568,15 +1616,16 @@ var ToolHeader = function ToolHeader(_ref) {
       fontSize: styles.fontSize,
       fontWeight: styles.fontWeight
     }
-  }, title), size === 'xxs' && /*#__PURE__*/React__default.createElement(IconButton, {
+  }, title), size === 'xxs' && /*#__PURE__*/React__default.createElement(CustomIconButton, {
     "data-testid": "dragBtn-xxs",
     disableRipple: true,
-    size: "small",
-    sx: Object.assign(Object.assign({}, iconStyle), {
+    sx: {
       pointerEvents: 'none',
       transform: 'rotate(90deg)',
-      height: 12
-    })
+      '&.MuiButtonBase-root.MuiIconButton-root': Object.assign(Object.assign({}, iconStyle), {
+        height: 12
+      })
+    }
   }, /*#__PURE__*/React__default.createElement(DragHandle, null)))), /*#__PURE__*/React__default.createElement(Grid, {
     className: "header-right",
     item: true,
@@ -1589,12 +1638,13 @@ var ToolHeader = function ToolHeader(_ref) {
     sx: {
       pointerEvents: 'none'
     }
-  }, /*#__PURE__*/React__default.createElement(IconButton, {
+  }, /*#__PURE__*/React__default.createElement(CustomIconButton, {
     "data-testid": "closeBtn",
     onClick: onClose,
     onTouchEnd: onClose,
-    size: "large",
-    sx: iconStyle
+    sx: {
+      '&.MuiButtonBase-root.MuiIconButton-root': iconStyle
+    }
   }, /*#__PURE__*/React__default.createElement(Close, {
     "data-testid": "CloseIcon"
   }))))));
@@ -1892,6 +1942,10 @@ var DraggableComponent = function DraggableComponent(_a) {
       onResizeStop = _a$onResizeStop === void 0 ? function () {} : _a$onResizeStop,
       _a$onDragEnd = _a.onDragEnd,
       onDragEnd = _a$onDragEnd === void 0 ? function () {} : _a$onDragEnd,
+      _a$onFocus = _a.onFocus,
+      onFocus = _a$onFocus === void 0 ? function () {} : _a$onFocus,
+      _a$onBlur = _a.onBlur,
+      onBlur = _a$onBlur === void 0 ? function () {} : _a$onBlur,
       _a$order = _a.order,
       order = _a$order === void 0 ? 1 : _a$order,
       _a$source = _a.source,
@@ -1903,7 +1957,7 @@ var DraggableComponent = function DraggableComponent(_a) {
       className = _a.className,
       _a$sx = _a.sx,
       sx = _a$sx === void 0 ? {} : _a$sx,
-      props = __rest(_a, ["title", "bounds", "cancel", "headerSize", "startSize", "startPosition", "children", "isOpen", "onClose", "initialMaxHeight", "onChangeSize", "onMouseDown", "onResizeStop", "onDragEnd", "order", "source", "leftHeaderComponent", "rightHeaderComponent", "className", "sx"]);
+      props = __rest(_a, ["title", "bounds", "cancel", "headerSize", "startSize", "startPosition", "children", "isOpen", "onClose", "initialMaxHeight", "onChangeSize", "onMouseDown", "onResizeStop", "onDragEnd", "onFocus", "onBlur", "order", "source", "leftHeaderComponent", "rightHeaderComponent", "className", "sx"]);
 
   var zIndex = (source === 'app' ? BASE_Z_INDEX : 1000) + order;
   var elevation = BASE_ELEVATION + order;
@@ -1978,6 +2032,9 @@ var DraggableComponent = function DraggableComponent(_a) {
     handle: ".".concat(headerClassName),
     onMouseDown: onMouseDown
   }, /*#__PURE__*/React__default.createElement(Box, {
+    tabIndex: -1,
+    onFocus: onFocus,
+    onBlur: onBlur,
     sx: Object.assign(Object.assign(Object.assign({
       position: 'absolute',
       pointerEvents: 'all',
@@ -2461,7 +2518,10 @@ var useUserMenu = function useUserMenu() {
  * Copyright 2021 - Finnish Meteorological Institute (FMI)
  * */
 var getInitials = function getInitials(name) {
-  if (!name) return '';
+  if (!name) {
+    return '';
+  }
+
   var nameWithoutEmail = name.split('@')[0];
   var array = nameWithoutEmail.split('.');
 
@@ -2545,7 +2605,10 @@ var CustomSlider = function CustomSlider(_a) {
         first = _reverse2[0],
         rest = _reverse2.slice(1);
 
-    if (first) first.classList.add('selectedLabel');
+    if (first) {
+      first.classList.add('selectedLabel');
+    }
+
     rest.forEach(function (element) {
       return element.classList.remove('selectedLabel');
     });
@@ -2743,7 +2806,10 @@ var ToggleMenu = function ToggleMenu(_ref) {
     anchorEl: anchorEl,
     open: isOpen,
     onClose: function onClose(event, reason) {
-      if (reason === 'tabKeyDown') return;
+      if (reason === 'tabKeyDown') {
+        return;
+      }
+
       handleClose(event);
     },
     anchorOrigin: anchorOrigin,
@@ -2765,7 +2831,7 @@ var ToggleMenu = function ToggleMenu(_ref) {
     sx: {
       fontSize: '12px'
     }
-  }, menuTitle)), menuItems && menuItems.map(function (menuItem) {
+  }, menuTitle)), menuItems && menuItems.length ? menuItems.map(function (menuItem) {
     var text = menuItem.text,
         icon = menuItem.icon,
         action = menuItem.action;
@@ -2776,207 +2842,8 @@ var ToggleMenu = function ToggleMenu(_ref) {
         handleClose(event);
       }
     }, icon && /*#__PURE__*/React.createElement(ListItemIcon, null, icon), /*#__PURE__*/React.createElement(Typography, null, text));
-  }), children));
-};
-
-/* *
- * 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 2022 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
- * Copyright 2022 - Finnish Meteorological Institute (FMI)
- * */
-
-var makeButtonStyles = function makeButtonStyles(isActive, isEnabled, isAccessible) {
-  return {
-    height: '24px',
-    width: '24px',
-    borderRadius: '5px',
-    marginTop: 'auto',
-    marginBottom: 'auto',
-    color: function color() {
-      if (!isEnabled) {
-        return 'geowebColors.buttons.flat.disabled.color';
-      }
-
-      if (isAccessible) {
-        return 'geowebColors.greys.accessible';
-      }
-
-      if (isActive) {
-        return 'common.white';
-      }
-
-      return 'geowebColors.buttons.flat.default.color';
-    },
-    backgroundColor: function backgroundColor() {
-      return isActive ? 'geowebColors.buttons.primary.active.fill' : 'inherit';
-    },
-    '&:focus': {
-      backgroundColor: function backgroundColor() {
-        return isActive ? 'geowebColors.buttons.primary.mouseOver.fill' : 'geowebColors.buttons.flat.mouseOver.fill';
-      },
-      outline: 'geowebColors.buttons.focusDefault.outline',
-      borderRadius: 0
-    },
-    '&:hover': {
-      backgroundColor: function backgroundColor() {
-        return isActive ? 'geowebColors.buttons.primary.mouseOver.fill' : 'geowebColors.buttons.flat.mouseOver.fill';
-      }
-    }
-  };
-};
-
-var ManagerButton = function ManagerButton(_a) {
-  var _a$tooltipTitle = _a.tooltipTitle,
-      tooltipTitle = _a$tooltipTitle === void 0 ? '' : _a$tooltipTitle,
-      _a$onClick = _a.onClick,
-      onClick = _a$onClick === void 0 ? function () {} : _a$onClick,
-      _a$isActive = _a.isActive,
-      isActive = _a$isActive === void 0 ? false : _a$isActive,
-      _a$isEnabled = _a.isEnabled,
-      isEnabled = _a$isEnabled === void 0 ? true : _a$isEnabled,
-      icon = _a.icon,
-      testId = _a.testId,
-      _a$isAccessible = _a.isAccessible,
-      isAccessible = _a$isAccessible === void 0 ? false : _a$isAccessible,
-      sx = _a.sx,
-      children = _a.children,
-      props = __rest(_a, ["tooltipTitle", "onClick", "isActive", "isEnabled", "icon", "testId", "isAccessible", "sx", "children"]);
-
-  var buttonStyles = makeButtonStyles(isActive, isEnabled, isAccessible);
-
-  var handleClick = function handleClick(event) {
-    onClick(event);
-  };
-
-  return /*#__PURE__*/React.createElement(CustomTooltip, {
-    title: tooltipTitle,
-    placement: "top",
-    sx: {
-      pointerEvents: 'none'
-    }
-  }, children || /*#__PURE__*/React.createElement(IconButton, Object.assign({
-    size: "small",
-    onClick: handleClick,
-    "data-testid": testId,
-    sx: Object.assign(Object.assign({}, buttonStyles), sx),
-    disableFocusRipple: true
-  }, props), 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 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
- * Copyright 2021 - Finnish Meteorological Institute (FMI)
- * */
-var ManagerDeleteButton = function ManagerDeleteButton(_ref) {
-  var tooltipTitle = _ref.tooltipTitle,
-      onClickDelete = _ref.onClickDelete,
-      _ref$isEnabled = _ref.isEnabled,
-      isEnabled = _ref$isEnabled === void 0 ? true : _ref$isEnabled,
-      sx = _ref.sx;
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ManagerButton, {
-    tooltipTitle: tooltipTitle,
-    onClick: onClickDelete,
-    testId: "deleteButtonMedium",
-    isEnabled: isEnabled,
-    icon: /*#__PURE__*/React.createElement(Delete, null)
-  }, /*#__PURE__*/React.createElement(Button, {
-    className: "deleteBtnMedium",
-    variant: "tertiary",
-    onClick: onClickDelete,
-    startIcon: /*#__PURE__*/React.createElement(Delete, null),
-    sx: Object.assign({
-      display: 'none'
-    }, sx)
-  }, "Delete")), /*#__PURE__*/React.createElement(ManagerButton, {
-    tooltipTitle: tooltipTitle,
-    onClick: onClickDelete,
-    icon: /*#__PURE__*/React.createElement(Delete, null),
-    testId: "deleteButton",
-    isEnabled: isEnabled,
-    sx: sx
-  }));
-};
-
-/* *
- * 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 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
- * Copyright 2021 - Finnish Meteorological Institute (FMI)
- * */
-var EnableButton = function EnableButton(_ref) {
-  var isEnabled = _ref.isEnabled,
-      title = _ref.title,
-      onChangeEnableLayer = _ref.onChangeEnableLayer,
-      className = _ref.className,
-      _ref$id = _ref.id,
-      id = _ref$id === void 0 ? 'enableButton' : _ref$id;
-
-  var onClick = function onClick(event) {
-    event.stopPropagation();
-    onChangeEnableLayer(!isEnabled);
-  };
-
-  return /*#__PURE__*/React.createElement(ManagerButton, {
-    tooltipTitle: title,
-    onClick: onClick,
-    icon: /*#__PURE__*/React.createElement(Checkbox, {
-      sx: {
-        color: 'inherit',
-        padding: 0.5,
-        borderRadius: 1.25,
-        '&.Mui-focusVisible': {
-          backgroundColor: 'geowebColors.buttons.tool.mouseOver.fill'
-        },
-        '&:hover': {
-          backgroundColor: 'transparent!important'
-        },
-        '&.Mui-checked': {
-          color: 'inherit'
-        }
-      },
-      icon: /*#__PURE__*/React.createElement(VisibilityOff, null),
-      checkedIcon: /*#__PURE__*/React.createElement(Visibility, null),
-      checked: isEnabled,
-      disableFocusRipple: true,
-      tabIndex: -1
-    }),
-    testId: id,
-    isEnabled: isEnabled,
-    className: className
-  });
+  }) : /*#__PURE__*/React.createElement("div", null) // Needed to make the menu work without any menuItems
+  , children));
 };
 
 /* *
@@ -3017,7 +2884,7 @@ var tooltipContainerStyles = function tooltipContainerStyles(isEnabled) {
     },
     '&.Mui-focused .MuiSelect-select': {
       outline: function outline(theme) {
-        return theme.palette.geowebColors.buttons.focusDefault.outline;
+        return theme.palette.geowebColors.buttons.tool.focus.outline;
       },
       borderRadius: 0
     },
@@ -3039,7 +2906,7 @@ var backgroundColor = {
   },
   '&.Mui-focused .MuiSelect-select': {
     outline: function outline(theme) {
-      return theme.palette.geowebColors.buttons.focusDefault.outline;
+      return theme.palette.geowebColors.buttons.tool.focus.outline;
     },
     borderRadius: 0,
     backgroundColor: 'geowebColors.buttons.tool.mouseOver.fill'
@@ -3049,7 +2916,7 @@ var backgroundColor = {
   },
   '&:focus&.MuiButton-root': {
     border: function border(theme) {
-      return theme.palette.geowebColors.buttons.focusDefault.outline;
+      return theme.palette.geowebColors.buttons.tool.focus.outline;
     },
     backgroundColor: 'geowebColors.buttons.tool.mouseOver.fill',
     transition: 'border'
@@ -3083,7 +2950,10 @@ var TooltipSelect = function TooltipSelect(_a) {
 
   var onWheel = React.useCallback(function (event) {
     if (requiresCtrlToChange && (event.ctrlKey || event.metaKey) || !requiresCtrlToChange) {
-      if (selectOpen) return;
+      if (selectOpen) {
+        return;
+      }
+
       var direction = event.deltaY < 0 ? 1 : -1;
       var newIndex = currentIndex - direction;
 
@@ -3102,7 +2972,9 @@ var TooltipSelect = function TooltipSelect(_a) {
     setSelectOpen(false);
   }, []);
   var onMouseEnter = React.useCallback(function () {
-    if (!selectOpen) setTooltipOpen(true);
+    if (!selectOpen) {
+      setTooltipOpen(true);
+    }
   }, [selectOpen, setTooltipOpen]);
   var onMouseLeave = React.useCallback(function () {
     setTooltipOpen(false);
@@ -3154,6 +3026,9 @@ var TooltipSelect = function TooltipSelect(_a) {
             },
             '&:focus': {
               backgroundColor: 'geowebColors.buttons.tool.activeMouseOver.fill'
+            },
+            '.MuiListItemIcon-root': {
+              color: 'geowebColors.buttons.tool.active.color'
             }
           },
           '&:after': {
@@ -3509,6 +3384,48 @@ var createDate = function createDate(yearOrIsoString, month, day) {
 
   return new Date(yearOrIsoString, month, day, hours, minutes, seconds, milliseconds);
 };
+/**
+ *
+ * @param date
+ * @param duration
+ * @returns {Date} the new Date
+ */
+
+var add = function add(date, duration) {
+  return add$1(date, duration);
+};
+/**
+ *
+ * @param date
+ * @param duration
+ * @returns {Date} the new Date
+ */
+
+var sub = function sub(date, duration) {
+  return sub$1(date, duration);
+};
+/**
+ * Finds the number of minuts between to dates
+ *
+ * @param dateLeft - the later date
+ * @param dateRight - the earlier date
+ * @returns {number} the number of minutes
+ */
+
+var differenceInMinutes = function differenceInMinutes(dateLeft, dateRight) {
+  return differenceInMinutes$1(dateLeft, dateRight);
+};
+/**
+ * Finds the number of hours between to dates
+ *
+ * @param dateLeft - the later date
+ * @param dateRight - the earlier date
+ * @returns {number} the number of hours
+ */
+
+var differenceInHours = function differenceInHours(dateLeft, dateRight) {
+  return differenceInHours$1(dateLeft, dateRight);
+};
 
 /* *
  * Licensed under the Apache License, Version 2.0 (the "License");
@@ -3534,7 +3451,11 @@ var index = /*#__PURE__*/Object.freeze({
     setUTCDate: setUTCDate,
     dateToString: dateToString,
     isBetween: isBetween,
-    createDate: createDate
+    createDate: createDate,
+    add: add,
+    sub: sub,
+    differenceInMinutes: differenceInMinutes,
+    differenceInHours: differenceInHours
 });
 
-export { AlertBanner, AlertIcon, AppHeader, AppLayout, Avatar, ConfirmationDialog, ConfirmationServiceProvider, CustomAccordion, CustomDialog, CustomSlider, CustomToggleButton, CustomTooltip, DEFAULT_ERROR_MESSAGE, DraggableComponent$1 as Draggable, EnableButton, ErrorBoundary, ManagerButton, ManagerDeleteButton, ResizeComponent as Resizable, StatusTag, ToggleMenu, ToolButton, ToolContainer, DraggableComponent as ToolContainerDraggable, ToolFooter, ToolHeader, TooltipSelect, UserMenu, UserMenuItemCheatSheet, MenuItemTheme as UserMenuItemTheme, adjustPosition, calculateDialogSizeAndPosition, index as dateUtils, defaultDelay, getAxiosErrorMessage, getAxiosWarningMessage, getErrorMessage, getInitials, getPosition, getWarningMessage, isAxiosError, showPrompt, sliderHeaderStyle, tooltipContainerStyles, useConfirmationDialog, useControlledTooltip, useDialogActions, useIsMounted, useMakeSureContainerStaysInsideWindow, usePoller, usePreventBrowserClose, usePrevious, useUserMenu, withEggs };
+export { AlertBanner, AlertIcon, AppHeader, AppLayout, Avatar, ConfirmationDialog, ConfirmationServiceProvider, CustomAccordion, CustomDialog, CustomIconButton, CustomSlider, CustomToggleButton, CustomTooltip, DEFAULT_ERROR_MESSAGE, DraggableComponent$1 as Draggable, ErrorBoundary, ResizeComponent as Resizable, StatusTag, ToggleMenu, ToolButton, ToolContainer, DraggableComponent as ToolContainerDraggable, ToolFooter, ToolHeader, TooltipSelect, UserMenu, UserMenuItemCheatSheet, MenuItemTheme as UserMenuItemTheme, adjustPosition, calculateDialogSizeAndPosition, index as dateUtils, defaultDelay, getAxiosErrorMessage, getAxiosWarningMessage, getErrorMessage, getInitials, getPosition, getWarningMessage, isAxiosError, showPrompt, sliderHeaderStyle, tooltipContainerStyles, useConfirmationDialog, useControlledTooltip, useDialogActions, useIsMounted, useMakeSureContainerStaysInsideWindow, usePoller, usePreventBrowserClose, usePrevious, useUserMenu, withEggs };