@opengeoweb/shared 2.4.0 → 2.6.0

package/index.esm.js

@@ -1,13 +1,14 @@
 import * as React from 'react';
 import React__default from 'react';
-import { Box, Typography, Dialog, DialogTitle, IconButton, DialogContent, DialogActions, Button, Alert, AlertTitle, SvgIcon, Grid, useTheme, Link, Avatar, Paper, ClickAwayListener, MenuList, MenuItem, RadioGroup, FormControlLabel, Radio, List, ListItem, Tabs, Tab, Backdrop, Slider, ToggleButton, Tooltip, Menu, ListItemIcon, Checkbox } from '@mui/material';
-import makeStyles from '@mui/styles/makeStyles';
-import { Close, DragIndicator, Delete } from '@mui/icons-material';
+import { Box, Typography, Dialog, DialogTitle, IconButton, DialogContent, DialogActions, Button, SvgIcon, Alert, AlertTitle, Grid, useTheme, Link, Avatar, Paper, ClickAwayListener, MenuList, MenuItem, RadioGroup, FormControlLabel, Radio, List, ListItem, Tabs, Tab, Backdrop, Slider, ToggleButton, Tooltip, Menu, ListItemIcon, Checkbox, Select } from '@mui/material';
+import Close from '@mui/icons-material/Close';
 import { useFormContext } from 'react-hook-form';
 import { isEmpty, errorMessages } from '@opengeoweb/form-fields';
+import makeStyles from '@mui/styles/makeStyles';
 import Draggable from 'react-draggable';
 import { Resizable } from 're-resizable';
 import { useThemeContext } from '@opengeoweb/theme';
+import { DragIndicator, Close as Close$1, Delete } from '@mui/icons-material';
 import { throttle } from 'lodash';
 import withStyles from '@mui/styles/withStyles';
 import MoreVertIcon from '@mui/icons-material/MoreVert';
@@ -103,20 +104,6 @@ function __rest(s, e) {
     return t;
 }
 
-var useStyles$b = makeStyles(function () {
-  return {
-    dialogHeader: {
-      zIndex: 1,
-      padding: '8px 20px',
-      display: 'flex',
-      justifyContent: 'space-between',
-      alignItems: 'center'
-    },
-    dialogContent: {
-      padding: '40px 20px 0px 20px !important'
-    }
-  };
-});
 var ConfirmationDialog = function ConfirmationDialog(_a) {
   var open = _a.open,
       title = _a.title,
@@ -132,8 +119,6 @@ var ConfirmationDialog = function ConfirmationDialog(_a) {
       content = _a$content === void 0 ? null : _a$content,
       other = __rest(_a, ["open", "title", "description", "confirmLabel", "cancelLabel", "onSubmit", "onClose", "content"]);
 
-  var classes = useStyles$b();
-
   other.catchOnCancel;
       var rest = __rest(other, ["catchOnCancel"]); // remove unwanted props
 
@@ -141,14 +126,33 @@ var ConfirmationDialog = function ConfirmationDialog(_a) {
   return /*#__PURE__*/React.createElement(Dialog, Object.assign({
     "data-testid": "confirmationDialog",
     open: open,
-    maxWidth: "sm",
-    fullWidth: true,
+    PaperProps: {
+      sx: {
+        width: '560px',
+        margin: 2.5
+      }
+    },
     // fix for briefly showing default options when closing dialog
     transitionDuration: 0
   }, rest), /*#__PURE__*/React.createElement(DialogTitle, {
-    className: classes.dialogHeader
+    sx: {
+      zIndex: 1,
+      padding: 2,
+      display: 'flex',
+      justifyContent: 'space-between',
+      alignItems: 'center'
+    }
   }, /*#__PURE__*/React.createElement(Typography, {
-    variant: "h5",
+    sx: {
+      fontSize: {
+        xs: '16px',
+        sm: '34px'
+      },
+      fontWeight: {
+        xs: 500,
+        sm: 400
+      }
+    },
     "data-testid": "confirmationDialog-title",
     component: "span"
   }, title), /*#__PURE__*/React.createElement(IconButton, {
@@ -159,22 +163,50 @@ var ConfirmationDialog = function ConfirmationDialog(_a) {
     },
     size: "small"
   }, /*#__PURE__*/React.createElement(Close, null))), /*#__PURE__*/React.createElement(DialogContent, {
-    className: classes.dialogContent
+    sx: {
+      padding: '8px 16px'
+    }
   }, /*#__PURE__*/React.createElement(Typography, {
     variant: "body1"
-  }, description), content), /*#__PURE__*/React.createElement(DialogActions, null, /*#__PURE__*/React.createElement(Button, {
-    "data-testid": "conformationDialog-cancel",
-    color: "secondary",
-    variant: "outlined",
+  }, description), content), /*#__PURE__*/React.createElement(DialogActions, {
+    sx: {
+      padding: 2,
+      flexDirection: {
+        xs: 'column',
+        sm: 'row'
+      }
+    }
+  }, /*#__PURE__*/React.createElement(Button, {
+    "data-testid": "confirmationDialog-cancel",
+    variant: "tertiary",
+    sx: {
+      width: {
+        xs: '100%',
+        sm: '150px'
+      }
+    },
     onClick: function onClick() {
       return onClose('CANCELLED');
     },
     autoFocus: true,
     disableRipple: true
   }, cancelLabel), /*#__PURE__*/React.createElement(Button, {
-    "data-testid": "conformationDialog-confirm",
-    color: "secondary",
-    variant: "contained",
+    "data-testid": "confirmationDialog-confirm",
+    variant: "primary",
+    sx: {
+      width: {
+        xs: '100%',
+        sm: '150px'
+      },
+      marginLeft: {
+        xs: '0px!important',
+        sm: '8px!important'
+      },
+      marginTop: {
+        xs: 2,
+        sm: 0
+      }
+    },
     onClick: onSubmit
   }, confirmLabel)));
 };
@@ -520,11 +552,17 @@ var useIsMounted = function useIsMounted() {
 
 var HIDDEN_INPUT_HELPER_IS_DRAFT = 'IS_DRAFT';
 var useDraftFormHelpers = function useDraftFormHelpers() {
+  var isDefaultDraft = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
+
   var _useFormContext = useFormContext(),
       getValues = _useFormContext.getValues,
       setValue = _useFormContext.setValue,
       register = _useFormContext.register;
 
+  React.useEffect(function () {
+    setValue(HIDDEN_INPUT_HELPER_IS_DRAFT, isDefaultDraft); // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
   var isDraft = function isDraft() {
     return getValues(HIDDEN_INPUT_HELPER_IS_DRAFT) === true;
   };
@@ -542,9 +580,7 @@ var useDraftFormHelpers = function useDraftFormHelpers() {
   };
 
   var DraftFieldHelper = function DraftFieldHelper() {
-    return /*#__PURE__*/React.createElement("input", Object.assign({
-      defaultValue: "false"
-    }, register(HIDDEN_INPUT_HELPER_IS_DRAFT), {
+    return /*#__PURE__*/React.createElement("input", Object.assign({}, register(HIDDEN_INPUT_HELPER_IS_DRAFT), {
       type: "hidden"
     }));
   };
@@ -651,24 +687,21 @@ var ConfirmationServiceProvider = function ConfirmationServiceProvider(_ref) {
  * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
  * Copyright 2021 - Finnish Meteorological Institute (FMI)
  * */
-var useStyles$a = makeStyles(function () {
-  return {
-    title: {
-      fontSize: '14px',
-      fontWeight: 'normal',
-      marginTop: '0px!important',
-      paddingTop: '0px!important'
-    },
-    info: {
-      fontSize: '16px'
-    }
-  };
-});
 
-var getIcon = function getIcon(severity) {
+var AlertIcon = function AlertIcon(_ref) {
+  var _ref$severity = _ref.severity,
+      severity = _ref$severity === void 0 ? 'error' : _ref$severity,
+      _ref$dataTestId = _ref.dataTestId,
+      dataTestId = _ref$dataTestId === void 0 ? 'alert-icon' : _ref$dataTestId;
+
   switch (severity) {
     case 'info':
-      return /*#__PURE__*/React.createElement(SvgIcon, null, /*#__PURE__*/React.createElement("rect", {
+      return /*#__PURE__*/React.createElement(SvgIcon, {
+        sx: {
+          color: 'geowebColors.functional.notification'
+        },
+        "data-testid": dataTestId
+      }, /*#__PURE__*/React.createElement("rect", {
         width: 24,
         height: 24,
         fill: "transparent"
@@ -678,7 +711,12 @@ var getIcon = function getIcon(severity) {
       }));
 
     case 'success':
-      return /*#__PURE__*/React.createElement(SvgIcon, null, /*#__PURE__*/React.createElement("rect", {
+      return /*#__PURE__*/React.createElement(SvgIcon, {
+        sx: {
+          color: 'geowebColors.functional.success'
+        },
+        "data-testid": dataTestId
+      }, /*#__PURE__*/React.createElement("rect", {
         width: 24,
         height: 24,
         fill: "transparent"
@@ -688,7 +726,12 @@ var getIcon = function getIcon(severity) {
       }));
 
     case 'warning':
-      return /*#__PURE__*/React.createElement(SvgIcon, null, /*#__PURE__*/React.createElement("rect", {
+      return /*#__PURE__*/React.createElement(SvgIcon, {
+        sx: {
+          color: 'geowebColors.functional.warning'
+        },
+        "data-testid": dataTestId
+      }, /*#__PURE__*/React.createElement("rect", {
         width: 24,
         height: 24,
         fill: "transparent"
@@ -699,7 +742,12 @@ var getIcon = function getIcon(severity) {
 
     case 'error':
     default:
-      return /*#__PURE__*/React.createElement(SvgIcon, null, /*#__PURE__*/React.createElement("rect", {
+      return /*#__PURE__*/React.createElement(SvgIcon, {
+        sx: {
+          color: 'geowebColors.functional.error'
+        },
+        "data-testid": dataTestId
+      }, /*#__PURE__*/React.createElement("rect", {
         width: 24,
         height: 24,
         fill: "transparent"
@@ -719,12 +767,30 @@ var AlertBanner = function AlertBanner(_ref) {
       _ref$dataTestId = _ref.dataTestId,
       dataTestId = _ref$dataTestId === void 0 ? 'alert-banner' : _ref$dataTestId,
       _ref$isCompact = _ref.isCompact,
-      isCompact = _ref$isCompact === void 0 ? false : _ref$isCompact;
-  var classes = useStyles$a();
-  return /*#__PURE__*/React.createElement(Alert, {
+      isCompact = _ref$isCompact === void 0 ? false : _ref$isCompact,
+      _ref$shouldClose = _ref.shouldClose,
+      shouldClose = _ref$shouldClose === void 0 ? false : _ref$shouldClose;
+
+  var _React$useState = React.useState(true),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      isOpen = _React$useState2[0],
+      setIsOpen = _React$useState2[1];
+
+  return isOpen && /*#__PURE__*/React.createElement(Alert, {
     "data-testid": dataTestId,
     severity: severity,
-    icon: getIcon(severity),
+    icon: /*#__PURE__*/React.createElement(AlertIcon, {
+      severity: severity
+    }),
+    action: shouldClose ? /*#__PURE__*/React.createElement(Button, {
+      variant: "flat",
+      onClick: function onClick() {
+        return setIsOpen(false);
+      },
+      sx: {
+        backgroundColor: 'transparent!important'
+      }
+    }, "CLOSE") : undefined,
     sx: isCompact ? {
       height: '32px',
       boxSizing: 'border-box',
@@ -741,11 +807,31 @@ var AlertBanner = function AlertBanner(_ref) {
         margin: '-3px 10px 0px 0px',
         padding: '0px'
       }
-    } : {}
+    } : {
+      padding: '3px 16px',
+      '& .MuiAlert-message': {
+        padding: '8px 0'
+      },
+      '& .MuiAlert-icon': {
+        padding: '8px 0'
+      },
+      '& .MuiAlert-action': {
+        padding: 0
+      }
+    }
   }, /*#__PURE__*/React.createElement(AlertTitle, {
-    className: classes.title
-  }, title), info && /*#__PURE__*/React.createElement("div", {
-    className: classes.info
+    sx: {
+      fontSize: '14px',
+      fontWeight: 'normal',
+      marginTop: '0px!important',
+      paddingTop: '0px!important',
+      marginBottom: '0px!important'
+    }
+  }, title), info && /*#__PURE__*/React.createElement(Box, {
+    sx: {
+      fontSize: '16px',
+      marginTop: 1
+    }
   }, info));
 };
 
@@ -765,7 +851,7 @@ var AlertBanner = function AlertBanner(_ref) {
  * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
  * Copyright 2021 - Finnish Meteorological Institute (FMI)
  * */
-var useStyles$9 = makeStyles(function () {
+var useStyles$8 = makeStyles(function () {
   return {
     wrapper: {
       height: '100vh',
@@ -782,7 +868,7 @@ var useStyles$9 = makeStyles(function () {
 var AppLayout = function AppLayout(_ref) {
   var header = _ref.header,
       children = _ref.children;
-  var classes = useStyles$9();
+  var classes = useStyles$8();
   return /*#__PURE__*/React__default.createElement("div", {
     className: classes.wrapper
   }, header, /*#__PURE__*/React__default.createElement("main", {
@@ -792,7 +878,7 @@ var AppLayout = function AppLayout(_ref) {
 
 var img = "data:image/svg+xml,%3c!--Licensed under the Apache License%2c Version 2.0 (the 'License')%3byou 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.0Unless required by applicable law or agreed to in writing%2c softwaredistributed under the License is distributed on an 'AS IS' BASIS%2cWITHOUT WARRANTIES OR CONDITIONS OF ANY KIND%2c either express or implied.See the License for the specific language governing permissions andlimitations under the License.Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)Copyright 2021 - Finnish Meteorological Institute (FMI)--%3e%3csvg id='svg4550' xmlnsRdf='http://www.w3.org/1999/02/22-rdf-syntax-ns%23' xmlns='http://www.w3.org/2000/svg' height='55.156mm' viewBox='0 0 289.84072 195.43326' width='81.799mm' version='1.1' xmlnsCc='http://creativecommons.org/ns%23' xmlnsXlink='http://www.w3.org/1999/xlink' xmlnsDc='http://purl.org/dc/elements/1.1/'%3e %3cdefs id='defs14'%3e %3clinearGradient id='linearGradient4263' y2='113.1' gradientUnits='userSpaceOnUse' y1='76.066' gradientTransform='translate(0 -.0012816)' x2='199.26' x1='160.9'%3e %3cstop id='stop4259' stop-color='white' stop-opacity='.33333' offset='0'/%3e %3cstop id='stop4261' stop-color='white' stop-opacity='0' offset='1'/%3e %3c/linearGradient%3e %3clinearGradient id='linearGradient4240' y2='79.833' gradientUnits='userSpaceOnUse' x2='120.82' y1='120.77' x1='128.56'%3e %3cstop id='stop4236' stop-color='white' stop-opacity='0' offset='0'/%3e %3cstop id='stop4238' stop-color='white' stop-opacity='.33333' offset='1'/%3e %3c/linearGradient%3e %3c/defs%3e %3cg id='layer1' transform='translate(353.49 -626.07)'%3e %3cg id='g4'%3e %3cpath id='path4220' d='m-207 679.86c-7.6546-3.9726-16.149-6.0541-24.773-6.0703-24.585 0.0315-46.045 16.665-52.207 40.465-2.23-0.35755-4.4838-0.54689-6.7422-0.56642-24.881-0.00043-45.051 20.17-45.051 45.051-0.00043 24.881 20.17 45.051 45.051 45.051 36.152-0.20272 72.845-0.0898 109.18-0.0898 8.9834 0 22.962 0.009 36.879 0.0165 9.7409 0.38215 35.645-0.43398 53.537-23.548 17.892-23.115 7.1203-72.79-0.31513-94.017s-30.566-42.361-53.247-42.361c-26.664 0-50.367 14.562-62.311 36.07z' style='color-rendering:auto%3bcolor:black%3bisolation:auto%3bmix-blend-mode:normal%3bshape-rendering:auto%3bsolid-color:black%3bimage-rendering:auto' fill='%230b9ee5'/%3e %3cpath id='path4220-7' opacity='.98' d='m-335.78 758.74c-0.00043 24.881 20.17 45.051 45.051 45.051 36.152-0.20272 72.845-0.0898 109.18-0.0898 10.101 0 27.126 0.009 42.523 0.0156 11.975-0.4199 32.775-4.017 47.893-23.547 4.439-5.7347 7.1108-13.107 8.5098-21.271-35.448-0.0105-239.67-0.15823-253.16-0.15823z' fill='%2360bce9'/%3e %3c/g%3e %3cpath id='path4220-2' d='m-144.69 643.79c-19.529 0-37.464 7.8167-50.359 20.447-4.6476 4.6419-8.6513 9.9041-11.953 15.623 0 40.944 0.0195 77.914 0.0195 123.83 8.4824 0.007 16.983 0.0137 25.438 0.0137 10.101 0 27.126 0.009 42.523 0.0156 11.975-0.4199 32.775-4.017 47.893-23.547 17.892-23.115 7.1209-72.791-0.31446-94.018s-30.565-42.361-53.246-42.361z' style='color-rendering:auto%3bcolor:black%3bisolation:auto%3bmix-blend-mode:normal%3bshape-rendering:auto%3bsolid-color:black%3bimage-rendering:auto' fill='white' fill-opacity='.31373'/%3e %3c/g%3e %3cg id='g4244' transform='translate(2.926 -1.3827)'%3e %3cpath id='path4329' style='color-rendering:auto%3bcolor:black%3bisolation:auto%3bmix-blend-mode:normal%3bshape-rendering:auto%3bsolid-color:black%3bimage-rendering:auto' fill='%23003232' d='m211.54 98.88c11.484 8.7901 14.857 8.43 22.486 19.238 3.6519 5.1733 5.5602 11.69 5.5645 18.164-0.00018 17.949-14.551 32.499-32.5 32.498-17.948-0.00018-32.498-14.55-32.498-32.498 0.006-0.50098 0.0236-1.0018 0.0527-1.502-3.4629-1.1175-6.9173-1.9297-9.6543-1.9297-2.7565 0-6.2409 0.82134-9.7285 1.9512 0.036 0.49286 0.0607 0.98649 0.0742 1.4805-0.00018 17.948-14.55 32.498-32.498 32.498-17.948-0.00019-32.498-14.55-32.498-32.498 0.006-3.5239 0.71774-6.9687 1.8781-10.26 5.474-20.521 8.7944-44.229 27.665-46.855 8.2552-1.1488 15.952 8.848 25.107 8.848 9.1558-0.00028 9.318-14.58 23.088-14.836 16.828-0.3123 31.185 16.304 43.462 25.701zm-4.7539 13.92c-13.255 0-24 10.745-24 24s10.745 24 24 24 24-10.745 24-24-10.745-24-24-24zm-84.125 0c-13.255 0-24 10.745-24 24s10.745 24 24 24 24-10.745 24-24-10.745-24-24-24z'/%3e %3cpath id='path4329-2' style='color-rendering:auto%3bcolor:black%3bisolation:auto%3bmix-blend-mode:normal%3bshape-rendering:auto%3bsolid-color:black%3bimage-rendering:auto' fill='url(%23linearGradient4263)' d='m157.24 77.869c-2.1199 2.1753-3.6401 4.4832-5.4018 6.5241-0.53185 0.61614-1.2448 1.3191-1.8477 1.7949-1.2058 0.9517-2.5477 1.6107-4.168 1.7793-0.27005 0.0281-0.54787 0.04296-0.83398 0.04297 5.0928 13.298 11.821 26.014 20 44.834 2.737 0 6.1914 0.8122 9.6543 1.9297-0.0291 0.5002-0.0467 1.001-0.0527 1.502 0 8.4131 3.196 16.08 8.4414 21.852 0.34969 0.38474 0.70861 0.75939 1.0762 1.127 5.881 5.8809 14.007 9.5194 22.98 9.5195 0.5609 0.00004 1.118-0.0149 1.6719-0.043 3.3236-0.16829 6.5154-0.83435 9.502-1.9277 0.99554-0.36446 1.9688-0.77802 2.916-1.2344 1.4208-0.68453 2.7833-1.4677 4.0801-2.3438 8.645-5.84 14.33-15.731 14.33-26.949-0.004-6.474-2.0849-12.873-5.5645-18.164-7.0668-10.745-14.684-12.763-22.486-19.238-11.815-9.8048-26.968-25.716-42.627-25.716-6.2104 0-9.3385 2.3185-11.67 4.7112zm49.543 34.924c4.9706 0 9.5876 1.5119 13.418 4.0996 0.6384 0.43129 1.255 0.89176 1.8476 1.3809 0.59266 0.4891 1.1622 1.0059 1.7051 1.5488 4.3431 4.3431 7.0293 10.343 7.0293 16.971 0 12.841-10.085 23.326-22.766 23.969-0.40906 0.0207-0.82015 0.0312-1.2344 0.0312-4.97 0-9.5878-1.5105-13.418-4.0976-0.00044-0.0003-0.002 0.00029-0.002 0-6.384-4.3129-10.58-11.618-10.58-19.902 0-6.6275 2.6862-12.628 7.0293-16.971 0.54288-0.54289 1.1124-1.0597 1.7051-1.5488 0.59266-0.4891 1.2073-0.94957 1.8457-1.3809 3.8304-2.5878 8.4493-4.0996 13.42-4.0996z'/%3e %3cpath id='path4329-7' style='color-rendering:auto%3bcolor:black%3bisolation:auto%3bmix-blend-mode:normal%3bshape-rendering:auto%3bsolid-color:black%3bimage-rendering:auto' d='m121.43 79.077c-0.51208-0.01011-1.027 0.01805-1.543 0.08985-18.871 2.626-22.19 26.335-27.664 46.856-1.1604 3.2913-1.8729 6.7359-1.8789 10.26 0 17.948 14.55 32.498 32.498 32.498s32.498-14.55 32.498-32.498c-0.0135-0.49402-0.0382-0.98762-0.0742-1.4805 3.5012-1.0071 5.7853-1.8693 9.6893-1.9248-4.8944-11.377-14.29-31.914-19.961-44.863-8.5828 0.000001-15.883-8.7859-23.565-8.9376zm1.2344 33.723c13.255 0 24 10.745 24 24s-10.745 24-24 24-24-10.745-24-24 10.745-24 24-24z' fill='url(%23linearGradient4240)'/%3e %3c/g%3e%3c/svg%3e";
 
-var useStyles$8 = makeStyles(function (theme) {
+var useStyles$7 = makeStyles(function (theme) {
   var _header;
 
   return {
@@ -829,7 +915,7 @@ var AppHeader = function AppHeader(_ref) {
       userMenu = _ref.userMenu,
       _ref$title = _ref.title,
       title = _ref$title === void 0 ? 'GeoWeb' : _ref$title;
-  var classes = useStyles$8();
+  var classes = useStyles$7();
   return /*#__PURE__*/React__default.createElement("header", {
     className: classes.header
   }, /*#__PURE__*/React__default.createElement(Grid, {
@@ -1111,7 +1197,7 @@ ErrorBoundary.defaultProps = {
  * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
  * Copyright 2021 - Finnish Meteorological Institute (FMI)
  * */
-var useStyles$7 = makeStyles(function (theme) {
+var useStyles$6 = makeStyles(function (theme) {
   return {
     container: {
       position: 'absolute',
@@ -1159,7 +1245,7 @@ var UserMenu = function UserMenu(_ref) {
   } : _ref$onClose,
       children = _ref.children,
       initials = _ref.initials;
-  var classes = useStyles$7();
+  var classes = useStyles$6();
   return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(IconButton, {
     "data-testid": "userButton",
     onClick: onToggle,
@@ -1242,7 +1328,7 @@ var MenuItemTheme = function MenuItemTheme() {
  * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
  * Copyright 2021 - Finnish Meteorological Institute (FMI)
  * */
-var useStyles$6 = makeStyles(function (theme) {
+var useStyles$5 = makeStyles(function (theme) {
   return {
     footer: {
       boxShadow: theme.shadows[1],
@@ -1255,7 +1341,7 @@ var useStyles$6 = makeStyles(function (theme) {
 }); // drag handles will be handled by DraggableResizable/Resizable
 
 var ToolFooter = function ToolFooter() {
-  var classes = useStyles$6();
+  var classes = useStyles$5();
   return /*#__PURE__*/React__default.createElement("footer", {
     className: classes.footer
   });
@@ -1338,13 +1424,17 @@ var ToolHeader = function ToolHeader(_ref) {
       _ref$isDraggable = _ref.isDraggable,
       isDraggable = _ref$isDraggable === void 0 ? false : _ref$isDraggable,
       _ref$className = _ref.className,
-      className = _ref$className === void 0 ? '' : _ref$className;
+      className = _ref$className === void 0 ? '' : _ref$className,
+      _ref$leftComponent = _ref.leftComponent,
+      leftComponent = _ref$leftComponent === void 0 ? null : _ref$leftComponent;
   var styles = getStyle(size);
 
   var onClickClose = function onClickClose() {
     return onClose();
   };
 
+  var columnSizeIcon = leftComponent ? 3 : 1;
+  var columnSizeTitle = leftComponent ? 6 : 10;
   return /*#__PURE__*/React__default.createElement(Box, {
     component: "header",
     className: className,
@@ -1360,26 +1450,27 @@ var ToolHeader = function ToolHeader(_ref) {
     alignItems: "center"
   }, /*#__PURE__*/React__default.createElement(Grid, {
     item: true,
-    xs: 1
-  }, /*#__PURE__*/React__default.createElement(Grid, {
+    xs: columnSizeIcon
+  }, isDraggable && size !== 'xxs' && !leftComponent && /*#__PURE__*/React__default.createElement(Grid, {
     container: true,
     justifyContent: "flex-start"
-  }, isDraggable && size !== 'xxs' && /*#__PURE__*/React__default.createElement(IconButton, {
+  }, /*#__PURE__*/React__default.createElement(IconButton, {
     "data-testid": "dragBtn",
     disableRipple: true,
     size: "large",
     sx: Object.assign(Object.assign({}, iconStyle), {
       pointerEvents: 'none'
     })
-  }, /*#__PURE__*/React__default.createElement(DragIndicator, null)))), /*#__PURE__*/React__default.createElement(Grid, {
+  }, /*#__PURE__*/React__default.createElement(DragIndicator, null))), leftComponent && leftComponent), /*#__PURE__*/React__default.createElement(Grid, {
     item: true,
-    xs: 10
+    xs: columnSizeTitle
   }, /*#__PURE__*/React__default.createElement(Grid, {
     container: true,
     justifyContent: "center",
     alignItems: "center"
   }, title && /*#__PURE__*/React__default.createElement(Typography, {
     variant: "h2",
+    noWrap: true,
     sx: {
       fontSize: styles.fontSize,
       fontWeight: styles.fontWeight
@@ -1395,7 +1486,7 @@ var ToolHeader = function ToolHeader(_ref) {
     })
   }, /*#__PURE__*/React__default.createElement(DragIndicator, null)))), /*#__PURE__*/React__default.createElement(Grid, {
     item: true,
-    xs: 1,
+    xs: columnSizeIcon,
     container: true,
     justifyContent: "flex-end"
   }, onClose && /*#__PURE__*/React__default.createElement(IconButton, {
@@ -1403,7 +1494,7 @@ var ToolHeader = function ToolHeader(_ref) {
     onClick: onClickClose,
     size: "large",
     sx: iconStyle
-  }, /*#__PURE__*/React__default.createElement(Close, null)))));
+  }, /*#__PURE__*/React__default.createElement(Close$1, null)))));
 };
 
 /* *
@@ -1422,22 +1513,20 @@ var ToolHeader = function ToolHeader(_ref) {
  * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
  * Copyright 2021 - Finnish Meteorological Institute (FMI)
  * */
-var useStyles$5 = makeStyles(function () {
-  return {
-    container: {
-      overflow: 'hidden',
-      borderRadius: 0,
-      display: 'flex',
-      flexDirection: 'column',
-      height: '100%'
-    },
-    content: {
-      flex: 1,
-      overflowY: 'auto',
-      position: 'relative'
-    }
-  };
-});
+var styles$1 = {
+  container: {
+    overflow: 'hidden',
+    borderRadius: 0,
+    display: 'flex',
+    flexDirection: 'column',
+    height: '100%'
+  },
+  content: {
+    flex: 1,
+    overflowY: 'auto',
+    position: 'relative'
+  }
+};
 var BASE_ELEVATION = 5;
 
 var ToolContainer = function ToolContainer(_a) {
@@ -1457,20 +1546,22 @@ var ToolContainer = function ToolContainer(_a) {
       elevation = _a$elevation === void 0 ? BASE_ELEVATION : _a$elevation,
       _a$headerClassName = _a.headerClassName,
       headerClassName = _a$headerClassName === void 0 ? '' : _a$headerClassName,
-      props = __rest(_a, ["title", "size", "children", "onClose", "isResizable", "isDraggable", "maxHeight", "elevation", "headerClassName"]);
+      _a$leftComponent = _a.leftComponent,
+      leftComponent = _a$leftComponent === void 0 ? null : _a$leftComponent,
+      props = __rest(_a, ["title", "size", "children", "onClose", "isResizable", "isDraggable", "maxHeight", "elevation", "headerClassName", "leftComponent"]);
 
-  var classes = useStyles$5();
   return /*#__PURE__*/React__default.createElement(Paper, Object.assign({
     elevation: elevation,
-    className: classes.container
+    sx: styles$1.container
   }, props), /*#__PURE__*/React__default.createElement(ToolHeader, {
     title: title,
     size: size,
     isDraggable: isDraggable,
     onClose: onClose,
-    className: headerClassName
-  }), /*#__PURE__*/React__default.createElement("div", {
-    className: classes.content,
+    className: headerClassName,
+    leftComponent: leftComponent
+  }), /*#__PURE__*/React__default.createElement(Box, {
+    sx: styles$1.content,
     style: {
       maxHeight: maxHeight
     }
@@ -1529,7 +1620,9 @@ var DraggableComponent = function DraggableComponent(_a) {
       order = _a$order === void 0 ? 1 : _a$order,
       _a$source = _a.source,
       source = _a$source === void 0 ? 'app' : _a$source,
-      props = __rest(_a, ["title", "bounds", "headerSize", "startSize", "startPosition", "children", "isOpen", "onClose", "initialMaxHeight", "onChangeSize", "onMouseDown", "order", "source"]);
+      _a$leftComponent = _a.leftComponent,
+      leftComponent = _a$leftComponent === void 0 ? null : _a$leftComponent,
+      props = __rest(_a, ["title", "bounds", "headerSize", "startSize", "startPosition", "children", "isOpen", "onClose", "initialMaxHeight", "onChangeSize", "onMouseDown", "order", "source", "leftComponent"]);
 
   var zIndex = (source === 'app' ? BASE_Z_INDEX : 1000) + order;
   var elevation = BASE_ELEVATION + order;
@@ -1641,7 +1734,8 @@ var DraggableComponent = function DraggableComponent(_a) {
     isDraggable: true,
     isResizable: true,
     elevation: elevation,
-    headerClassName: headerClassName
+    headerClassName: headerClassName,
+    leftComponent: leftComponent
   }, children)))) : null;
 };
 
@@ -1937,11 +2031,11 @@ var shortcuts = [{
   }, /*#__PURE__*/React__default.createElement(ArrowRightIcon, null))),
   descriptionMac: /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(ShortCutSegment, {
     type: "icon"
-  }, /*#__PURE__*/React__default.createElement(OptionIcon, null)), /*#__PURE__*/React__default.createElement(ShortCutSegment, {
+  }, "Ctrl"), /*#__PURE__*/React__default.createElement(ShortCutSegment, {
     type: "connect"
   }, "+"), /*#__PURE__*/React__default.createElement(ShortCutSegment, {
     type: "icon"
-  }, /*#__PURE__*/React__default.createElement(CommandIcon, null)), /*#__PURE__*/React__default.createElement(ShortCutSegment, {
+  }, /*#__PURE__*/React__default.createElement(OptionIcon, null)), /*#__PURE__*/React__default.createElement(ShortCutSegment, {
     type: "connect"
   }, "+"), /*#__PURE__*/React__default.createElement(ShortCutSegment, {
     type: "icon"
@@ -2410,10 +2504,12 @@ var ToolButton = function ToolButton(_a) {
       value = _a$value === void 0 ? 0 : _a$value,
       _a$sx = _a.sx,
       sx = _a$sx === void 0 ? {} : _a$sx,
-      props = __rest(_a, ["active", "width", "height", "children", "value", "sx"]);
+      _a$variant = _a.variant,
+      variant = _a$variant === void 0 ? 'tool' : _a$variant,
+      props = __rest(_a, ["active", "width", "height", "children", "value", "sx", "variant"]);
 
   return /*#__PURE__*/React.createElement(CustomToggleButton, Object.assign({
-    variant: "tool",
+    variant: variant,
     disableRipple: true,
     selected: active,
     value: value,
@@ -2733,11 +2829,185 @@ var EnableButton = function EnableButton(_ref) {
       disableFocusRipple: true,
       tabIndex: -1
     }),
-    testId: "enableLayer",
+    testId: "enableButton",
     isEnabled: isEnabled
   });
 };
 
+/* *
+ * 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 tooltipContainerStyles = function tooltipContainerStyles(isEnabled) {
+  return {
+    width: '100%',
+    height: 32,
+    fontWeight: 500,
+    fontSize: function fontSize(theme) {
+      return theme.palette.geowebColors.layerManager.tableRowDefaultText.fontSize;
+    },
+    color: isEnabled ? 'geowebColors.layerManager.tableRowDefaultText.rgba' : 'geowebColors.layerManager.tableRowDisabledText.rgba',
+    '& .MuiOutlinedInput-input': {
+      padding: '6px 24px 6px 8px'
+    },
+    '& .MuiOutlinedInput-notchedOutline': {
+      borderColor: 'transparent!important'
+    },
+    '&:hover .MuiSelect-select': {
+      backgroundColor: 'geowebColors.buttons.tool.mouseOver.fill'
+    },
+    '&.Mui-focused .MuiSelect-select': {
+      outline: function outline(theme) {
+        return theme.palette.geowebColors.buttons.focusDefault.outline;
+      },
+      backgroundColor: 'geowebColors.buttons.tool.mouseOver.fill'
+    },
+    '&:hover&.MuiButton-root': {
+      backgroundColor: 'geowebColors.buttons.tool.mouseOver.fill'
+    },
+    '&:focus&.MuiButton-root': {
+      outline: function outline(theme) {
+        return theme.palette.geowebColors.buttons.focusDefault.outline;
+      },
+      backgroundColor: 'geowebColors.buttons.tool.mouseOver.fill'
+    },
+    '& .MuiSvgIcon-root': {
+      transition: 'none',
+      fill: function fill(theme) {
+        return isEnabled ? theme.palette.geowebColors.buttons.flat["default"].color : theme.palette.geowebColors.buttons.flat.disabled.color;
+      }
+    },
+    '&>div': {
+      paddingLeft: 1
+    }
+  };
+};
+
+var TooltipSelect = function TooltipSelect(_a) {
+  var tooltip = _a.tooltip,
+      _a$list = _a.list,
+      list = _a$list === void 0 ? [] : _a$list,
+      _a$currentIndex = _a.currentIndex,
+      currentIndex = _a$currentIndex === void 0 ? -1 : _a$currentIndex,
+      _a$onChangeMouseWheel = _a.onChangeMouseWheel,
+      onChangeMouseWheel = _a$onChangeMouseWheel === void 0 ? function () {} : _a$onChangeMouseWheel,
+      _a$requiresCtrlToChan = _a.requiresCtrlToChange,
+      requiresCtrlToChange = _a$requiresCtrlToChan === void 0 ? false : _a$requiresCtrlToChan,
+      isEnabled = _a.isEnabled,
+      noStyling = _a.noStyling,
+      props = __rest(_a, ["tooltip", "list", "currentIndex", "onChangeMouseWheel", "requiresCtrlToChange", "isEnabled", "noStyling"]);
+
+  props.disableUnderline;
+      var otherProps = __rest(props, ["disableUnderline"]);
+
+  var _React$useState = React.useState(false),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      selectOpen = _React$useState2[0],
+      setSelectOpen = _React$useState2[1];
+
+  var _React$useState3 = React.useState(false),
+      _React$useState4 = _slicedToArray(_React$useState3, 2),
+      tooltipOpen = _React$useState4[0],
+      setTooltipOpen = _React$useState4[1];
+
+  var onWheel = React.useCallback(function (event) {
+    if (requiresCtrlToChange && (event.ctrlKey || event.metaKey) || !requiresCtrlToChange) {
+      if (selectOpen) return;
+      var direction = event.deltaY < 0 ? 1 : -1;
+      var newValue = list[Math.min(Math.max(currentIndex - direction, 0), list.length - 1)];
+      onChangeMouseWheel(newValue);
+    }
+  }, [selectOpen, currentIndex, list, onChangeMouseWheel, requiresCtrlToChange]);
+  var onOpen = React.useCallback(function () {
+    setSelectOpen(true);
+    setTooltipOpen(false);
+  }, []);
+  var onClose = React.useCallback(function () {
+    setSelectOpen(false);
+  }, []);
+  var onMouseEnter = React.useCallback(function () {
+    if (!selectOpen) setTooltipOpen(true);
+  }, [selectOpen]);
+  var onMouseLeave = React.useCallback(function () {
+    setTooltipOpen(false);
+  }, []);
+  var onFocus = React.useCallback(function () {
+    setTooltipOpen(true);
+  }, []);
+  var onBlur = React.useCallback(function () {
+    setTooltipOpen(false);
+  }, []);
+  return /*#__PURE__*/React.createElement(Tooltip, {
+    title: tooltip,
+    placement: "top",
+    open: tooltipOpen,
+    sx: noStyling ? undefined : tooltipContainerStyles(isEnabled)
+  }, /*#__PURE__*/React.createElement(Select, Object.assign({
+    onOpen: onOpen,
+    onClose: onClose,
+    onMouseEnter: onMouseEnter,
+    onMouseLeave: onMouseLeave,
+    onFocus: onFocus,
+    onBlur: onBlur,
+    onWheel: onWheel,
+    MenuProps: {
+      BackdropProps: {
+        sx: {
+          '&.MuiBackdrop-root': {
+            backgroundColor: 'transparent'
+          }
+        }
+      },
+      sx: {
+        '& ul': {
+          backgroundColor: 'geowebColors.background.surface'
+        },
+        '& li': {
+          fontSize: '16px',
+          padding: '12px',
+          '&:hover': {
+            backgroundColor: 'geowebColors.buttons.tool.mouseOver.fill'
+          },
+          '&.Mui-selected': {
+            color: 'geowebColors.buttons.tool.active.color',
+            backgroundColor: 'geowebColors.buttons.tool.active.fill',
+            boxShadow: "none",
+            '&:hover': {
+              backgroundColor: 'geowebColors.buttons.tool.activeMouseOver.fill'
+            },
+            '&:focus': {
+              backgroundColor: 'geowebColors.buttons.tool.activeMouseOver.fill'
+            }
+          },
+          '&:after': {
+            background: 'none!important'
+          },
+          '&.Mui-disabled': {
+            fontSize: '12px',
+            opacity: 0.67,
+            padding: '0px 12px',
+            '&.MuiMenuItem-root': {
+              minHeight: '30px!important'
+            }
+          }
+        }
+      }
+    }
+  }, otherProps)));
+};
+
 /* *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -2772,4 +3042,4 @@ var getAxiosErrorMessage = function getAxiosErrorMessage(error) {
   return 'An error has occurred';
 };
 
-export { AlertBanner, AppHeader, AppLayout, ConfirmationDialog, ConfirmationServiceProvider, CustomSlider, CustomToggleButton, DraggableComponent$1 as Draggable, EnableButton, ErrorBoundary, HIDDEN_INPUT_HELPER_IS_DRAFT, ManagerButton, ManagerDeleteButton, ResizeComponent as Resizable, StatusTag, ToggleMenu, ToolButton, ToolContainer, DraggableComponent as ToolContainerDraggable, ToolFooter, ToolHeader, UserMenu, UserMenuItemCheatSheet, MenuItemTheme as UserMenuItemTheme, calculateDialogSizeAndPosition, getAxiosErrorMessage, getInitials, isAxiosError, showPrompt, sliderStyles, useConfirmationDialog, useDialogActions, useDraftFormHelpers, useIsMounted, usePoller, usePreventBrowserClose, usePrevious, useUserMenu };
+export { AlertBanner, AlertIcon, AppHeader, AppLayout, ConfirmationDialog, ConfirmationServiceProvider, CustomSlider, CustomToggleButton, DraggableComponent$1 as Draggable, EnableButton, ErrorBoundary, HIDDEN_INPUT_HELPER_IS_DRAFT, ManagerButton, ManagerDeleteButton, ResizeComponent as Resizable, StatusTag, ToggleMenu, ToolButton, ToolContainer, DraggableComponent as ToolContainerDraggable, ToolFooter, ToolHeader, TooltipSelect, UserMenu, UserMenuItemCheatSheet, MenuItemTheme as UserMenuItemTheme, calculateDialogSizeAndPosition, getAxiosErrorMessage, getInitials, isAxiosError, showPrompt, sliderStyles, tooltipContainerStyles, useConfirmationDialog, useDialogActions, useDraftFormHelpers, useIsMounted, usePoller, usePreventBrowserClose, usePrevious, useUserMenu };