@opengeoweb/shared 2.2.1 → 2.3.0

package/index.esm.js

@@ -1,6 +1,6 @@
 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 } from '@mui/material';
+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 } from '@mui/material';
 import makeStyles from '@mui/styles/makeStyles';
 import { Close, DragIndicator } from '@mui/icons-material';
 import { useFormContext } from 'react-hook-form';
@@ -11,6 +11,7 @@ import { useThemeContext } from '@opengeoweb/theme';
 import { throttle } from 'lodash';
 import withStyles from '@mui/styles/withStyles';
 import createStyles from '@mui/styles/createStyles';
+import MoreVertIcon from '@mui/icons-material/MoreVert';
 
 /* *
  * Licensed under the Apache License, Version 2.0 (the "License");
@@ -102,7 +103,7 @@ function __rest(s, e) {
     return t;
 }
 
-var useStyles$d = makeStyles(function () {
+var useStyles$b = makeStyles(function () {
   return {
     dialogHeader: {
       zIndex: 1,
@@ -131,7 +132,7 @@ 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$d();
+  var classes = useStyles$b();
 
   other.catchOnCancel;
       var rest = __rest(other, ["catchOnCancel"]); // remove unwanted props
@@ -650,7 +651,7 @@ var ConfirmationServiceProvider = function ConfirmationServiceProvider(_ref) {
  * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
  * Copyright 2021 - Finnish Meteorological Institute (FMI)
  * */
-var useStyles$c = makeStyles(function () {
+var useStyles$a = makeStyles(function () {
   return {
     title: {
       fontSize: '14px',
@@ -720,7 +721,7 @@ var AlertBanner = function AlertBanner(_ref) {
       info = _ref$info === void 0 ? '' : _ref$info,
       _ref$dataTestId = _ref.dataTestId,
       dataTestId = _ref$dataTestId === void 0 ? 'alert-banner' : _ref$dataTestId;
-  var classes = useStyles$c();
+  var classes = useStyles$a();
   return /*#__PURE__*/React.createElement(Alert, {
     "data-testid": dataTestId,
     severity: severity,
@@ -748,7 +749,7 @@ var AlertBanner = function AlertBanner(_ref) {
  * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
  * Copyright 2021 - Finnish Meteorological Institute (FMI)
  * */
-var useStyles$b = makeStyles(function () {
+var useStyles$9 = makeStyles(function () {
   return {
     wrapper: {
       height: '100vh',
@@ -765,7 +766,7 @@ var useStyles$b = makeStyles(function () {
 var AppLayout = function AppLayout(_ref) {
   var header = _ref.header,
       children = _ref.children;
-  var classes = useStyles$b();
+  var classes = useStyles$9();
   return /*#__PURE__*/React__default.createElement("div", {
     className: classes.wrapper
   }, header, /*#__PURE__*/React__default.createElement("main", {
@@ -775,7 +776,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$a = makeStyles(function (theme) {
+var useStyles$8 = makeStyles(function (theme) {
   var _header;
 
   return {
@@ -812,7 +813,7 @@ var AppHeader = function AppHeader(_ref) {
       userMenu = _ref.userMenu,
       _ref$title = _ref.title,
       title = _ref$title === void 0 ? 'GeoWeb' : _ref$title;
-  var classes = useStyles$a();
+  var classes = useStyles$8();
   return /*#__PURE__*/React__default.createElement("header", {
     className: classes.header
   }, /*#__PURE__*/React__default.createElement(Grid, {
@@ -896,38 +897,29 @@ var DraggableComponent$1 = function DraggableComponent(_a) {
  * Copyright 2021 - Finnish Meteorological Institute (FMI)
  * */
 
-var useStyles$9 = function useStyles(isRightAligned) {
-  return makeStyles(function () {
-    return {
-      icon: Object.assign(Object.assign({
-        width: 20,
-        height: 20,
-        top: -10,
-        position: 'relative'
-      }, isRightAligned ? {
-        left: -10
-      } : {
-        left: 10,
-        transform: 'rotate(90deg)'
-      }), {
-        zIndex: 1
-      })
-    };
-  });
-};
-
 var ResizeHandle = function ResizeHandle(_ref2) {
   var isRightAligned = _ref2.isRightAligned;
   var theme = useTheme();
-  var styles = useStyles$9(isRightAligned)();
   return /*#__PURE__*/React__default.createElement(SvgIcon, {
-    className: styles.icon,
+    sx: Object.assign(Object.assign({
+      width: 20,
+      height: 20,
+      top: -10,
+      position: 'relative'
+    }, isRightAligned ? {
+      left: -10
+    } : {
+      left: 10,
+      transform: 'rotate(90deg)'
+    }), {
+      zIndex: 1
+    }),
     "data-testid": "resizeHandle"
   }, /*#__PURE__*/React__default.createElement("rect", {
     fill: "#ffffff"
   }), /*#__PURE__*/React__default.createElement("path", {
     d: "M19.687 18.037v1h-6v-1h6zm3.5-3.5v1h-13v-1h13z",
-    fill: "".concat(theme.palette.geowebColors.greys.accessible),
+    fill: "".concat(theme.palette.geowebColors.buttons.flat["default"].color),
     transform: "rotate(-45 16.687 16.787)"
   }));
 };
@@ -1103,7 +1095,7 @@ ErrorBoundary.defaultProps = {
  * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
  * Copyright 2021 - Finnish Meteorological Institute (FMI)
  * */
-var useStyles$8 = makeStyles(function (theme) {
+var useStyles$7 = makeStyles(function (theme) {
   return {
     container: {
       position: 'absolute',
@@ -1151,7 +1143,7 @@ var UserMenu = function UserMenu(_ref) {
   } : _ref$onClose,
       children = _ref.children,
       initials = _ref.initials;
-  var classes = useStyles$8();
+  var classes = useStyles$7();
   return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(IconButton, {
     "data-testid": "userButton",
     onClick: onToggle,
@@ -1193,7 +1185,9 @@ var MenuItemTheme = function MenuItemTheme() {
       isDark = _useThemeContext.isDark,
       toggleTheme = _useThemeContext.toggleTheme;
 
-  return /*#__PURE__*/React__default.createElement(MenuItem, null, /*#__PURE__*/React__default.createElement(Grid, {
+  return /*#__PURE__*/React__default.createElement(MenuItem, {
+    divider: true
+  }, /*#__PURE__*/React__default.createElement(Grid, {
     container: true
   }, /*#__PURE__*/React__default.createElement(Grid, {
     item: true
@@ -1232,7 +1226,7 @@ var MenuItemTheme = function MenuItemTheme() {
  * 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 {
     footer: {
       boxShadow: theme.shadows[1],
@@ -1245,7 +1239,7 @@ var useStyles$7 = makeStyles(function (theme) {
 }); // drag handles will be handled by DraggableResizable/Resizable
 
 var ToolFooter = function ToolFooter() {
-  var classes = useStyles$7();
+  var classes = useStyles$6();
   return /*#__PURE__*/React__default.createElement("footer", {
     className: classes.footer
   });
@@ -1283,7 +1277,7 @@ var getStyle = function getStyle(size) {
         return {
           fontSize: 16,
           fontWeight: 500,
-          padding: 4
+          padding: '4px'
         };
       }
 
@@ -1292,7 +1286,7 @@ var getStyle = function getStyle(size) {
         return {
           fontSize: 20,
           fontWeight: 400,
-          padding: 8
+          padding: '8px'
         };
       }
 
@@ -1301,7 +1295,7 @@ var getStyle = function getStyle(size) {
         return {
           fontSize: 16,
           fontWeight: 500,
-          padding: 12
+          padding: '12px'
         };
       }
 
@@ -1312,45 +1306,13 @@ var getStyle = function getStyle(size) {
   }
 };
 
-var useStyles$6 = makeStyles(function (theme) {
-  return {
-    header: {
-      boxShadow: theme.shadows[1],
-      background: theme.palette.geowebColors.background.surface,
-      padding: function padding(props) {
-        return props.styles.padding;
-      },
-      zIndex: 1,
-      cursor: function cursor(props) {
-        return props.isDraggable ? 'move' : null;
-      }
-    },
-    title: {
-      fontSize: function fontSize(props) {
-        return props.styles.fontSize;
-      },
-      fontWeight: function fontWeight(props) {
-        return props.styles.fontWeight;
-      }
-    },
-    iconClose: {
-      color: theme.palette.geowebColors.greys.accessible,
-      padding: 0
-    },
-    iconDrag: {
-      color: theme.palette.geowebColors.greys.accessible,
-      padding: 0,
-      pointerEvents: 'none'
-    },
-    iconDragHorizontal: {
-      color: theme.palette.geowebColors.greys.accessible,
-      padding: 0,
-      pointerEvents: 'none',
-      transform: 'rotate(90deg)',
-      height: 12
-    }
-  };
-});
+var iconStyle = {
+  color: 'geowebColors.greys.accessible',
+  padding: 0,
+  '&:hover': {
+    background: 'action.hover'
+  }
+};
 
 var ToolHeader = function ToolHeader(_ref) {
   var size = _ref.size,
@@ -1362,17 +1324,21 @@ var ToolHeader = function ToolHeader(_ref) {
       _ref$className = _ref.className,
       className = _ref$className === void 0 ? '' : _ref$className;
   var styles = getStyle(size);
-  var classes = useStyles$6({
-    styles: styles,
-    isDraggable: isDraggable
-  });
 
   var onClickClose = function onClickClose() {
     return onClose();
   };
 
-  return /*#__PURE__*/React__default.createElement("header", {
-    className: "".concat(classes.header, " ").concat(className)
+  return /*#__PURE__*/React__default.createElement(Box, {
+    component: "header",
+    className: className,
+    sx: {
+      boxShadow: 1,
+      backgroundColor: 'geowebColors.background.surface',
+      padding: styles.padding,
+      zIndex: 1,
+      cursor: isDraggable ? 'move' : null
+    }
   }, /*#__PURE__*/React__default.createElement(Grid, {
     container: true,
     alignItems: "center"
@@ -1384,9 +1350,11 @@ var ToolHeader = function ToolHeader(_ref) {
     justifyContent: "flex-start"
   }, isDraggable && size !== 'xxs' && /*#__PURE__*/React__default.createElement(IconButton, {
     "data-testid": "dragBtn",
-    className: classes.iconDrag,
     disableRipple: true,
-    size: "large"
+    size: "large",
+    sx: Object.assign(Object.assign({}, iconStyle), {
+      pointerEvents: 'none'
+    })
   }, /*#__PURE__*/React__default.createElement(DragIndicator, null)))), /*#__PURE__*/React__default.createElement(Grid, {
     item: true,
     xs: 10
@@ -1396,12 +1364,19 @@ var ToolHeader = function ToolHeader(_ref) {
     alignItems: "center"
   }, title && /*#__PURE__*/React__default.createElement(Typography, {
     variant: "h2",
-    className: classes.title
+    sx: {
+      fontSize: styles.fontSize,
+      fontWeight: styles.fontWeight
+    }
   }, title), size === 'xxs' && /*#__PURE__*/React__default.createElement(IconButton, {
     "data-testid": "dragBtn-xxs",
-    className: classes.iconDragHorizontal,
     disableRipple: true,
-    size: "small"
+    size: "small",
+    sx: Object.assign(Object.assign({}, iconStyle), {
+      pointerEvents: 'none',
+      transform: 'rotate(90deg)',
+      height: 12
+    })
   }, /*#__PURE__*/React__default.createElement(DragIndicator, null)))), /*#__PURE__*/React__default.createElement(Grid, {
     item: true,
     xs: 1,
@@ -1409,9 +1384,9 @@ var ToolHeader = function ToolHeader(_ref) {
     justifyContent: "flex-end"
   }, onClose && /*#__PURE__*/React__default.createElement(IconButton, {
     "data-testid": "closeBtn",
-    className: classes.iconClose,
     onClick: onClickClose,
-    size: "large"
+    size: "large",
+    sx: iconStyle
   }, /*#__PURE__*/React__default.createElement(Close, null)))));
 };
 
@@ -2023,6 +1998,14 @@ var shortcuts = [{
   }, "+"), /*#__PURE__*/React__default.createElement(ShortCutSegment, {
     type: "icon"
   }, /*#__PURE__*/React__default.createElement(ArrowLeftIcon, null)))
+}, {
+  title: 'Change layer manager values by scrolling',
+  description: /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(ShortCutSegment, {
+    type: "icon"
+  }, "Ctrl"), /*#__PURE__*/React__default.createElement(ShortCutSegment, null, " + Mouse scroll")),
+  descriptionMac: /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(ShortCutSegment, {
+    type: "icon"
+  }, /*#__PURE__*/React__default.createElement(CommandIcon, null)), /*#__PURE__*/React__default.createElement(ShortCutSegment, null, " + Mouse scroll"))
 }];
 var getShortcutList = function getShortcutList(shortcutList) {
   var platform = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'windows';
@@ -2165,7 +2148,8 @@ var UserMenuItemCheatSheet = function UserMenuItemCheatSheet() {
 
   return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(MenuItem, {
     "data-testid": "cheatsheet-btn",
-    onClick: onOpen
+    onClick: onOpen,
+    divider: true
   }, /*#__PURE__*/React__default.createElement(Grid, {
     container: true
   }, /*#__PURE__*/React__default.createElement(Grid, {
@@ -2387,7 +2371,7 @@ var useStyles = makeStyles(function (theme) {
         alignItems: 'center',
         boxShadow: '0 1px 3px 0 rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.12), 0 0 2px 0 rgba(0, 0, 0, 0.14)',
         width: '100%',
-        backgroundColor: '#ffffff',
+        backgroundColor: theme.palette.geowebColors.background.surface,
         zIndex: props.zIndex + 10
       };
     },
@@ -2436,6 +2420,177 @@ var DraggableDialog = function DraggableDialog(_ref) {
   }, 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 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+ * Copyright 2021 - Finnish Meteorological Institute (FMI)
+ * */
+
+var CustomToggleButton = function CustomToggleButton(_a) {
+  var _a$variant = _a.variant,
+      variant = _a$variant === void 0 ? 'primary' : _a$variant,
+      _a$value = _a.value,
+      value = _a$value === void 0 ? 0 : _a$value,
+      props = __rest(_a, ["variant", "value"]);
+
+  return /*#__PURE__*/React.createElement(ToggleButton, Object.assign({
+    className: variant,
+    value: value
+  }, props));
+};
+
+/* *
+ * 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 ToolButton = function ToolButton(_a) {
+  var active = _a.active,
+      _a$width = _a.width,
+      width = _a$width === void 0 ? '24px' : _a$width,
+      _a$height = _a.height,
+      height = _a$height === void 0 ? '24px' : _a$height,
+      children = _a.children,
+      _a$value = _a.value,
+      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"]);
+
+  return /*#__PURE__*/React.createElement(CustomToggleButton, Object.assign({
+    variant: "tool",
+    disableRipple: true,
+    selected: active,
+    value: value,
+    sx: Object.assign({
+      width: "".concat(width, "!important"),
+      height: "".concat(height, "!important"),
+      textTransform: 'none!important',
+      padding: '11px!important'
+    }, sx)
+  }, props), children);
+};
+
+var getPosition = function getPosition(menuPosition) {
+  switch (menuPosition) {
+    case 'bottom':
+      return {
+        anchorOrigin: {
+          vertical: 'bottom',
+          horizontal: 'center'
+        },
+        transformOrigin: {
+          vertical: 'top',
+          horizontal: 'center'
+        }
+      };
+
+    default:
+    case 'left':
+      return {
+        anchorOrigin: {
+          vertical: 'center',
+          horizontal: 'left'
+        },
+        transformOrigin: {
+          vertical: 'center',
+          horizontal: 'right'
+        }
+      };
+  }
+};
+
+var ToggleMenu = function ToggleMenu(_ref) {
+  var _ref$buttonTestId = _ref.buttonTestId,
+      buttonTestId = _ref$buttonTestId === void 0 ? 'toggleMenuButton' : _ref$buttonTestId,
+      _ref$menuPosition = _ref.menuPosition,
+      menuPosition = _ref$menuPosition === void 0 ? 'left' : _ref$menuPosition,
+      menuItems = _ref.menuItems,
+      children = _ref.children,
+      buttonSx = _ref.buttonSx,
+      _ref$tooltipTitle = _ref.tooltipTitle,
+      tooltipTitle = _ref$tooltipTitle === void 0 ? '' : _ref$tooltipTitle;
+
+  var _React$useState = React.useState(null),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      anchorEl = _React$useState2[0],
+      setAnchorEl = _React$useState2[1];
+
+  var isOpen = Boolean(anchorEl);
+
+  var _getPosition = getPosition(menuPosition),
+      anchorOrigin = _getPosition.anchorOrigin,
+      transformOrigin = _getPosition.transformOrigin;
+
+  var handleClick = function handleClick(event) {
+    setAnchorEl(event.currentTarget);
+  };
+
+  var handleClose = function handleClose() {
+    setAnchorEl(null);
+  };
+
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ToolButton, {
+    active: isOpen,
+    sx: buttonSx,
+    onClick: handleClick,
+    "data-testid": buttonTestId
+  }, /*#__PURE__*/React.createElement(Tooltip, {
+    placement: "top",
+    title: tooltipTitle
+  }, /*#__PURE__*/React.createElement(MoreVertIcon, null))), /*#__PURE__*/React.createElement(Menu, {
+    anchorEl: anchorEl,
+    open: isOpen,
+    onClose: handleClose,
+    anchorOrigin: anchorOrigin,
+    transformOrigin: transformOrigin,
+    BackdropProps: {
+      style: {
+        opacity: 0,
+        transition: 'none'
+      }
+    },
+    MenuListProps: children && {
+      style: {
+        padding: '0px'
+      }
+    }
+  }, menuItems && menuItems.map(function (menuItem) {
+    var text = menuItem.text,
+        icon = menuItem.icon,
+        action = menuItem.action;
+    return /*#__PURE__*/React.createElement(MenuItem, {
+      key: text,
+      onClick: function onClick() {
+        action();
+        handleClose();
+      }
+    }, 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.
@@ -2470,4 +2625,4 @@ var getAxiosErrorMessage = function getAxiosErrorMessage(error) {
   return 'An error has occurred';
 };
 
-export { AlertBanner, AppHeader, AppLayout, ConfirmationDialog, ConfirmationServiceProvider, CustomSlider, DraggableComponent$1 as Draggable, DraggableDialog, ErrorBoundary, HIDDEN_INPUT_HELPER_IS_DRAFT, ResizeComponent as Resizable, StatusTag, ToolContainer, DraggableComponent as ToolContainerDraggable, ToolFooter, ToolHeader, UserMenu, UserMenuItemCheatSheet, MenuItemTheme as UserMenuItemTheme, Z_INDEX_BOTTOM, Z_INDEX_TOP, getAxiosErrorMessage, getInitials, isAxiosError, showPrompt, sliderStyles, useConfirmationDialog, useDialogActions, useDraftFormHelpers, useIsMounted, usePoller, usePreventBrowserClose, usePrevious, useUserMenu };
+export { AlertBanner, AppHeader, AppLayout, ConfirmationDialog, ConfirmationServiceProvider, CustomSlider, CustomToggleButton, DraggableComponent$1 as Draggable, DraggableDialog, ErrorBoundary, HIDDEN_INPUT_HELPER_IS_DRAFT, ResizeComponent as Resizable, StatusTag, ToggleMenu, ToolButton, ToolContainer, DraggableComponent as ToolContainerDraggable, ToolFooter, ToolHeader, UserMenu, UserMenuItemCheatSheet, MenuItemTheme as UserMenuItemTheme, Z_INDEX_BOTTOM, Z_INDEX_TOP, getAxiosErrorMessage, getInitials, isAxiosError, showPrompt, sliderStyles, useConfirmationDialog, useDialogActions, useDraftFormHelpers, useIsMounted, usePoller, usePreventBrowserClose, usePrevious, useUserMenu };

package/index.umd.js

@@ -1,8 +1,8 @@
 (function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react'), require('@mui/material'), require('@mui/styles/makeStyles'), require('@mui/icons-material'), require('react-hook-form'), require('@opengeoweb/form-fields'), require('react-draggable'), require('re-resizable'), require('@opengeoweb/theme'), require('lodash'), require('@mui/styles/withStyles'), require('@mui/styles/createStyles')) :
-    typeof define === 'function' && define.amd ? define(['exports', 'react', '@mui/material', '@mui/styles/makeStyles', '@mui/icons-material', 'react-hook-form', '@opengeoweb/form-fields', 'react-draggable', 're-resizable', '@opengeoweb/theme', 'lodash', '@mui/styles/withStyles', '@mui/styles/createStyles'], factory) :
-    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.Shared = {}, global.React, global.material, global.makeStyles, global.iconsMaterial, global.reactHookForm, global.formFields, global.Draggable, global.reResizable, global.theme, global.lodash, global.withStyles, global.createStyles));
-})(this, (function (exports, React, material, makeStyles, iconsMaterial, reactHookForm, formFields, Draggable, reResizable, theme, lodash, withStyles, createStyles) { 'use strict';
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react'), require('@mui/material'), require('@mui/styles/makeStyles'), require('@mui/icons-material'), require('react-hook-form'), require('@opengeoweb/form-fields'), require('react-draggable'), require('re-resizable'), require('@opengeoweb/theme'), require('lodash'), require('@mui/styles/withStyles'), require('@mui/styles/createStyles'), require('@mui/icons-material/MoreVert')) :
+    typeof define === 'function' && define.amd ? define(['exports', 'react', '@mui/material', '@mui/styles/makeStyles', '@mui/icons-material', 'react-hook-form', '@opengeoweb/form-fields', 'react-draggable', 're-resizable', '@opengeoweb/theme', 'lodash', '@mui/styles/withStyles', '@mui/styles/createStyles', '@mui/icons-material/MoreVert'], factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.Shared = {}, global.React, global.material, global.makeStyles, global.iconsMaterial, global.reactHookForm, global.formFields, global.Draggable, global.reResizable, global.theme, global.lodash, global.withStyles, global.createStyles, global.MoreVertIcon));
+})(this, (function (exports, React, material, makeStyles, iconsMaterial, reactHookForm, formFields, Draggable, reResizable, theme, lodash, withStyles, createStyles, MoreVertIcon) { 'use strict';
 
     function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -30,6 +30,7 @@
     var Draggable__default = /*#__PURE__*/_interopDefaultLegacy(Draggable);
     var withStyles__default = /*#__PURE__*/_interopDefaultLegacy(withStyles);
     var createStyles__default = /*#__PURE__*/_interopDefaultLegacy(createStyles);
+    var MoreVertIcon__default = /*#__PURE__*/_interopDefaultLegacy(MoreVertIcon);
 
     /*! *****************************************************************************
     Copyright (c) Microsoft Corporation.
@@ -159,7 +160,7 @@
       }, content));
     };
 
-    var useStyles$d = makeStyles__default["default"](function () {
+    var useStyles$b = makeStyles__default["default"](function () {
       return {
         dialogHeader: {
           zIndex: 1,
@@ -188,7 +189,7 @@
           content = _e === void 0 ? null : _e,
           other = __rest(_a, ["open", "title", "description", "confirmLabel", "cancelLabel", "onSubmit", "onClose", "content"]);
 
-      var classes = useStyles$d();
+      var classes = useStyles$b();
 
       other.catchOnCancel;
           var rest = __rest(other, ["catchOnCancel"]); // remove unwanted props
@@ -501,7 +502,7 @@
      * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
      * Copyright 2021 - Finnish Meteorological Institute (FMI)
      * */
-    var useStyles$c = makeStyles__default["default"](function () {
+    var useStyles$a = makeStyles__default["default"](function () {
       return {
         title: {
           fontSize: '14px',
@@ -571,7 +572,7 @@
           info = _c === void 0 ? '' : _c,
           _d = _a.dataTestId,
           dataTestId = _d === void 0 ? 'alert-banner' : _d;
-      var classes = useStyles$c();
+      var classes = useStyles$a();
       return /*#__PURE__*/React__namespace.createElement(material.Alert, {
         "data-testid": dataTestId,
         severity: severity,
@@ -599,7 +600,7 @@
      * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
      * Copyright 2021 - Finnish Meteorological Institute (FMI)
      * */
-    var useStyles$b = makeStyles__default["default"](function () {
+    var useStyles$9 = makeStyles__default["default"](function () {
       return {
         wrapper: {
           height: '100vh',
@@ -616,7 +617,7 @@
     var AppLayout = function AppLayout(_a) {
       var header = _a.header,
           children = _a.children;
-      var classes = useStyles$b();
+      var classes = useStyles$9();
       return /*#__PURE__*/React__default["default"].createElement("div", {
         className: classes.wrapper
       }, header, /*#__PURE__*/React__default["default"].createElement("main", {
@@ -642,7 +643,7 @@
      * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
      * Copyright 2021 - Finnish Meteorological Institute (FMI)
      * */
-    var useStyles$a = makeStyles__default["default"](function (theme) {
+    var useStyles$8 = makeStyles__default["default"](function (theme) {
       var _a;
 
       return {
@@ -679,7 +680,7 @@
           userMenu = _a.userMenu,
           _b = _a.title,
           title = _b === void 0 ? 'GeoWeb' : _b;
-      var classes = useStyles$a();
+      var classes = useStyles$8();
       return /*#__PURE__*/React__default["default"].createElement("header", {
         className: classes.header
       }, /*#__PURE__*/React__default["default"].createElement(material.Grid, {
@@ -763,38 +764,29 @@
      * Copyright 2021 - Finnish Meteorological Institute (FMI)
      * */
 
-    var useStyles$9 = function useStyles(isRightAligned) {
-      return makeStyles__default["default"](function () {
-        return {
-          icon: __assign(__assign({
-            width: 20,
-            height: 20,
-            top: -10,
-            position: 'relative'
-          }, isRightAligned ? {
-            left: -10
-          } : {
-            left: 10,
-            transform: 'rotate(90deg)'
-          }), {
-            zIndex: 1
-          })
-        };
-      });
-    };
-
     var ResizeHandle = function ResizeHandle(_a) {
       var isRightAligned = _a.isRightAligned;
       var theme = material.useTheme();
-      var styles = useStyles$9(isRightAligned)();
       return /*#__PURE__*/React__default["default"].createElement(material.SvgIcon, {
-        className: styles.icon,
+        sx: __assign(__assign({
+          width: 20,
+          height: 20,
+          top: -10,
+          position: 'relative'
+        }, isRightAligned ? {
+          left: -10
+        } : {
+          left: 10,
+          transform: 'rotate(90deg)'
+        }), {
+          zIndex: 1
+        }),
         "data-testid": "resizeHandle"
       }, /*#__PURE__*/React__default["default"].createElement("rect", {
         fill: "#ffffff"
       }), /*#__PURE__*/React__default["default"].createElement("path", {
         d: "M19.687 18.037v1h-6v-1h6zm3.5-3.5v1h-13v-1h13z",
-        fill: "" + theme.palette.geowebColors.greys.accessible,
+        fill: "" + theme.palette.geowebColors.buttons.flat["default"].color,
         transform: "rotate(-45 16.687 16.787)"
       }));
     };
@@ -962,7 +954,7 @@
      * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
      * Copyright 2021 - Finnish Meteorological Institute (FMI)
      * */
-    var useStyles$8 = makeStyles__default["default"](function (theme) {
+    var useStyles$7 = makeStyles__default["default"](function (theme) {
       return {
         container: {
           position: 'absolute',
@@ -1010,7 +1002,7 @@
       } : _d,
           children = _a.children,
           initials = _a.initials;
-      var classes = useStyles$8();
+      var classes = useStyles$7();
       return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(material.IconButton, {
         "data-testid": "userButton",
         onClick: onToggle,
@@ -1052,7 +1044,9 @@
           isDark = _a.isDark,
           toggleTheme = _a.toggleTheme;
 
-      return /*#__PURE__*/React__default["default"].createElement(material.MenuItem, null, /*#__PURE__*/React__default["default"].createElement(material.Grid, {
+      return /*#__PURE__*/React__default["default"].createElement(material.MenuItem, {
+        divider: true
+      }, /*#__PURE__*/React__default["default"].createElement(material.Grid, {
         container: true
       }, /*#__PURE__*/React__default["default"].createElement(material.Grid, {
         item: true
@@ -1091,7 +1085,7 @@
      * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
      * Copyright 2021 - Finnish Meteorological Institute (FMI)
      * */
-    var useStyles$7 = makeStyles__default["default"](function (theme) {
+    var useStyles$6 = makeStyles__default["default"](function (theme) {
       return {
         footer: {
           boxShadow: theme.shadows[1],
@@ -1104,7 +1098,7 @@
     }); // drag handles will be handled by DraggableResizable/Resizable
 
     var ToolFooter = function ToolFooter() {
-      var classes = useStyles$7();
+      var classes = useStyles$6();
       return /*#__PURE__*/React__default["default"].createElement("footer", {
         className: classes.footer
       });
@@ -1142,7 +1136,7 @@
             return {
               fontSize: 16,
               fontWeight: 500,
-              padding: 4
+              padding: '4px'
             };
           }
 
@@ -1151,7 +1145,7 @@
             return {
               fontSize: 20,
               fontWeight: 400,
-              padding: 8
+              padding: '8px'
             };
           }
 
@@ -1160,7 +1154,7 @@
             return {
               fontSize: 16,
               fontWeight: 500,
-              padding: 12
+              padding: '12px'
             };
           }
 
@@ -1171,45 +1165,13 @@
       }
     };
 
-    var useStyles$6 = makeStyles__default["default"](function (theme) {
-      return {
-        header: {
-          boxShadow: theme.shadows[1],
-          background: theme.palette.geowebColors.background.surface,
-          padding: function padding(props) {
-            return props.styles.padding;
-          },
-          zIndex: 1,
-          cursor: function cursor(props) {
-            return props.isDraggable ? 'move' : null;
-          }
-        },
-        title: {
-          fontSize: function fontSize(props) {
-            return props.styles.fontSize;
-          },
-          fontWeight: function fontWeight(props) {
-            return props.styles.fontWeight;
-          }
-        },
-        iconClose: {
-          color: theme.palette.geowebColors.greys.accessible,
-          padding: 0
-        },
-        iconDrag: {
-          color: theme.palette.geowebColors.greys.accessible,
-          padding: 0,
-          pointerEvents: 'none'
-        },
-        iconDragHorizontal: {
-          color: theme.palette.geowebColors.greys.accessible,
-          padding: 0,
-          pointerEvents: 'none',
-          transform: 'rotate(90deg)',
-          height: 12
-        }
-      };
-    });
+    var iconStyle = {
+      color: 'geowebColors.greys.accessible',
+      padding: 0,
+      '&:hover': {
+        background: 'action.hover'
+      }
+    };
 
     var ToolHeader = function ToolHeader(_a) {
       var size = _a.size,
@@ -1221,17 +1183,21 @@
           _d = _a.className,
           className = _d === void 0 ? '' : _d;
       var styles = getStyle(size);
-      var classes = useStyles$6({
-        styles: styles,
-        isDraggable: isDraggable
-      });
 
       var onClickClose = function onClickClose() {
         return onClose();
       };
 
-      return /*#__PURE__*/React__default["default"].createElement("header", {
-        className: classes.header + " " + className
+      return /*#__PURE__*/React__default["default"].createElement(material.Box, {
+        component: "header",
+        className: className,
+        sx: {
+          boxShadow: 1,
+          backgroundColor: 'geowebColors.background.surface',
+          padding: styles.padding,
+          zIndex: 1,
+          cursor: isDraggable ? 'move' : null
+        }
       }, /*#__PURE__*/React__default["default"].createElement(material.Grid, {
         container: true,
         alignItems: "center"
@@ -1243,9 +1209,11 @@
         justifyContent: "flex-start"
       }, isDraggable && size !== 'xxs' && /*#__PURE__*/React__default["default"].createElement(material.IconButton, {
         "data-testid": "dragBtn",
-        className: classes.iconDrag,
         disableRipple: true,
-        size: "large"
+        size: "large",
+        sx: __assign(__assign({}, iconStyle), {
+          pointerEvents: 'none'
+        })
       }, /*#__PURE__*/React__default["default"].createElement(iconsMaterial.DragIndicator, null)))), /*#__PURE__*/React__default["default"].createElement(material.Grid, {
         item: true,
         xs: 10
@@ -1255,12 +1223,19 @@
         alignItems: "center"
       }, title && /*#__PURE__*/React__default["default"].createElement(material.Typography, {
         variant: "h2",
-        className: classes.title
+        sx: {
+          fontSize: styles.fontSize,
+          fontWeight: styles.fontWeight
+        }
       }, title), size === 'xxs' && /*#__PURE__*/React__default["default"].createElement(material.IconButton, {
         "data-testid": "dragBtn-xxs",
-        className: classes.iconDragHorizontal,
         disableRipple: true,
-        size: "small"
+        size: "small",
+        sx: __assign(__assign({}, iconStyle), {
+          pointerEvents: 'none',
+          transform: 'rotate(90deg)',
+          height: 12
+        })
       }, /*#__PURE__*/React__default["default"].createElement(iconsMaterial.DragIndicator, null)))), /*#__PURE__*/React__default["default"].createElement(material.Grid, {
         item: true,
         xs: 1,
@@ -1268,9 +1243,9 @@
         justifyContent: "flex-end"
       }, onClose && /*#__PURE__*/React__default["default"].createElement(material.IconButton, {
         "data-testid": "closeBtn",
-        className: classes.iconClose,
         onClick: onClickClose,
-        size: "large"
+        size: "large",
+        sx: iconStyle
       }, /*#__PURE__*/React__default["default"].createElement(iconsMaterial.Close, null)))));
     };
 
@@ -1881,6 +1856,14 @@
       }, "+"), /*#__PURE__*/React__default["default"].createElement(ShortCutSegment, {
         type: "icon"
       }, /*#__PURE__*/React__default["default"].createElement(ArrowLeftIcon, null)))
+    }, {
+      title: 'Change layer manager values by scrolling',
+      description: /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(ShortCutSegment, {
+        type: "icon"
+      }, "Ctrl"), /*#__PURE__*/React__default["default"].createElement(ShortCutSegment, null, " + Mouse scroll")),
+      descriptionMac: /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(ShortCutSegment, {
+        type: "icon"
+      }, /*#__PURE__*/React__default["default"].createElement(CommandIcon, null)), /*#__PURE__*/React__default["default"].createElement(ShortCutSegment, null, " + Mouse scroll"))
     }];
     var getShortcutList = function getShortcutList(shortcutList, platform) {
       if (platform === void 0) {
@@ -2024,7 +2007,8 @@
 
       return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(material.MenuItem, {
         "data-testid": "cheatsheet-btn",
-        onClick: onOpen
+        onClick: onOpen,
+        divider: true
       }, /*#__PURE__*/React__default["default"].createElement(material.Grid, {
         container: true
       }, /*#__PURE__*/React__default["default"].createElement(material.Grid, {
@@ -2262,7 +2246,7 @@
             alignItems: 'center',
             boxShadow: '0 1px 3px 0 rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.12), 0 0 2px 0 rgba(0, 0, 0, 0.14)',
             width: '100%',
-            backgroundColor: '#ffffff',
+            backgroundColor: theme.palette.geowebColors.background.surface,
             zIndex: props.zIndex + 10
           };
         },
@@ -2311,6 +2295,176 @@
       }, 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 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+     * Copyright 2021 - Finnish Meteorological Institute (FMI)
+     * */
+
+    var CustomToggleButton = function CustomToggleButton(_a) {
+      var _b = _a.variant,
+          variant = _b === void 0 ? 'primary' : _b,
+          _c = _a.value,
+          value = _c === void 0 ? 0 : _c,
+          props = __rest(_a, ["variant", "value"]);
+
+      return /*#__PURE__*/React__namespace.createElement(material.ToggleButton, __assign({
+        className: variant,
+        value: value
+      }, props));
+    };
+
+    /* *
+     * 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 ToolButton = function ToolButton(_a) {
+      var active = _a.active,
+          _b = _a.width,
+          width = _b === void 0 ? '24px' : _b,
+          _c = _a.height,
+          height = _c === void 0 ? '24px' : _c,
+          children = _a.children,
+          _d = _a.value,
+          value = _d === void 0 ? 0 : _d,
+          _e = _a.sx,
+          sx = _e === void 0 ? {} : _e,
+          props = __rest(_a, ["active", "width", "height", "children", "value", "sx"]);
+
+      return /*#__PURE__*/React__namespace.createElement(CustomToggleButton, __assign({
+        variant: "tool",
+        disableRipple: true,
+        selected: active,
+        value: value,
+        sx: __assign({
+          width: width + "!important",
+          height: height + "!important",
+          textTransform: 'none!important',
+          padding: '11px!important'
+        }, sx)
+      }, props), children);
+    };
+
+    var getPosition = function getPosition(menuPosition) {
+      switch (menuPosition) {
+        case 'bottom':
+          return {
+            anchorOrigin: {
+              vertical: 'bottom',
+              horizontal: 'center'
+            },
+            transformOrigin: {
+              vertical: 'top',
+              horizontal: 'center'
+            }
+          };
+
+        default:
+        case 'left':
+          return {
+            anchorOrigin: {
+              vertical: 'center',
+              horizontal: 'left'
+            },
+            transformOrigin: {
+              vertical: 'center',
+              horizontal: 'right'
+            }
+          };
+      }
+    };
+
+    var ToggleMenu = function ToggleMenu(_a) {
+      var _b = _a.buttonTestId,
+          buttonTestId = _b === void 0 ? 'toggleMenuButton' : _b,
+          _c = _a.menuPosition,
+          menuPosition = _c === void 0 ? 'left' : _c,
+          menuItems = _a.menuItems,
+          children = _a.children,
+          buttonSx = _a.buttonSx,
+          _d = _a.tooltipTitle,
+          tooltipTitle = _d === void 0 ? '' : _d;
+
+      var _e = __read(React__namespace.useState(null), 2),
+          anchorEl = _e[0],
+          setAnchorEl = _e[1];
+
+      var isOpen = Boolean(anchorEl);
+
+      var _f = getPosition(menuPosition),
+          anchorOrigin = _f.anchorOrigin,
+          transformOrigin = _f.transformOrigin;
+
+      var handleClick = function handleClick(event) {
+        setAnchorEl(event.currentTarget);
+      };
+
+      var handleClose = function handleClose() {
+        setAnchorEl(null);
+      };
+
+      return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement(ToolButton, {
+        active: isOpen,
+        sx: buttonSx,
+        onClick: handleClick,
+        "data-testid": buttonTestId
+      }, /*#__PURE__*/React__namespace.createElement(material.Tooltip, {
+        placement: "top",
+        title: tooltipTitle
+      }, /*#__PURE__*/React__namespace.createElement(MoreVertIcon__default["default"], null))), /*#__PURE__*/React__namespace.createElement(material.Menu, {
+        anchorEl: anchorEl,
+        open: isOpen,
+        onClose: handleClose,
+        anchorOrigin: anchorOrigin,
+        transformOrigin: transformOrigin,
+        BackdropProps: {
+          style: {
+            opacity: 0,
+            transition: 'none'
+          }
+        },
+        MenuListProps: children && {
+          style: {
+            padding: '0px'
+          }
+        }
+      }, menuItems && menuItems.map(function (menuItem) {
+        var text = menuItem.text,
+            icon = menuItem.icon,
+            action = menuItem.action;
+        return /*#__PURE__*/React__namespace.createElement(material.MenuItem, {
+          key: text,
+          onClick: function onClick() {
+            action();
+            handleClose();
+          }
+        }, icon && /*#__PURE__*/React__namespace.createElement(material.ListItemIcon, null, icon), /*#__PURE__*/React__namespace.createElement(material.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.
@@ -2351,12 +2505,15 @@
     exports.ConfirmationDialog = ConfirmationDialog;
     exports.ConfirmationServiceProvider = ConfirmationServiceProvider;
     exports.CustomSlider = CustomSlider;
+    exports.CustomToggleButton = CustomToggleButton;
     exports.Draggable = DraggableComponent$1;
     exports.DraggableDialog = DraggableDialog;
     exports.ErrorBoundary = ErrorBoundary;
     exports.HIDDEN_INPUT_HELPER_IS_DRAFT = HIDDEN_INPUT_HELPER_IS_DRAFT;
     exports.Resizable = ResizeComponent;
     exports.StatusTag = StatusTag;
+    exports.ToggleMenu = ToggleMenu;
+    exports.ToolButton = ToolButton;
     exports.ToolContainer = ToolContainer;
     exports.ToolContainerDraggable = DraggableComponent;
     exports.ToolFooter = ToolFooter;

package/lib/components/CustomToggleButton/CustomToggleButton.d.ts

@@ -0,0 +1,8 @@
+import * as React from 'react';
+import { ToggleButtonProps } from '@mui/material';
+import { ButtonVariant } from '@opengeoweb/theme';
+export interface CustomToggleButtonProps extends Omit<ToggleButtonProps, 'value'> {
+    variant?: ButtonVariant;
+    value?: unknown;
+}
+export declare const CustomToggleButton: React.FC<CustomToggleButtonProps>;

package/lib/components/CustomToggleButton/CustomToggleButton.spec.d.ts

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

package/lib/components/CustomToggleButton/CustomToggleButton.stories.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+declare const _default: {
+    title: string;
+};
+export default _default;
+export declare const CustomToggleButtonLight: {
+    (): React.ReactElement;
+    storyName: string;
+};
+export declare const CustomToggleButtonDark: {
+    (): React.ReactElement;
+    storyName: string;
+};

package/lib/components/CustomToggleButton/index.d.ts

@@ -0,0 +1 @@
+export * from './CustomToggleButton';

package/lib/components/ToggleMenu/ToggleMenu.d.ts

@@ -0,0 +1,17 @@
+import * as React from 'react';
+import { SxProps, Theme } from '@mui/material';
+declare type MenuItemType = {
+    text: string;
+    action: () => void;
+    icon?: React.ReactNode;
+};
+interface ToggleMenuProps {
+    buttonTestId?: string;
+    menuPosition?: 'left' | 'bottom';
+    menuItems?: MenuItemType[];
+    children?: React.ReactNode;
+    buttonSx?: SxProps<Theme>;
+    tooltipTitle?: string;
+}
+export declare const ToggleMenu: React.FC<ToggleMenuProps>;
+export {};

package/lib/components/ToggleMenu/ToggleMenu.spec.d.ts

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

package/lib/components/ToggleMenu/ToggleMenu.stories.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+declare const _default: {
+    title: string;
+};
+export default _default;
+export declare const ToggleMenuLight: () => React.ReactElement;
+export declare const ToggleMenuDark: () => React.ReactElement;

package/lib/components/ToggleMenu/index.d.ts

@@ -0,0 +1 @@
+export * from './ToggleMenu';

package/lib/components/ToolButton/ToolButton.d.ts

@@ -0,0 +1,11 @@
+import * as React from 'react';
+import { Theme, SxProps } from '@mui/material';
+import { CustomToggleButtonProps } from '../CustomToggleButton';
+export interface ToolButtonProps extends CustomToggleButtonProps {
+    active?: boolean;
+    width?: string;
+    height?: string;
+    value?: unknown;
+    sx?: SxProps<Theme>;
+}
+export declare const ToolButton: React.FC<ToolButtonProps>;

package/lib/components/ToolButton/ToolButton.spec.d.ts

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

package/lib/components/ToolButton/ToolButton.stories.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+declare const _default: {
+    title: string;
+};
+export default _default;
+export declare const ToolButtonLight: {
+    (): React.ReactElement;
+    storyName: string;
+};
+export declare const ToolButtonDark: {
+    (): React.ReactElement;
+    storyName: string;
+};

package/lib/components/ToolButton/index.d.ts

@@ -0,0 +1 @@
+export * from './ToolButton';

package/lib/components/index.d.ts

@@ -9,3 +9,6 @@ export * from './UserMenu';
 export * from './ToolContainer';
 export * from './CustomSlider';
 export * from './DraggableDialog';
+export * from './CustomToggleButton';
+export * from './ToolButton';
+export * from './ToggleMenu';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opengeoweb/shared",
-  "version": "2.2.1",
+  "version": "2.3.0",
   "description": "GeoWeb shared library with shared components and utils for the opengeoweb project",
   "license": "Apache-2.0",
   "repository": {
@@ -14,13 +14,13 @@
   "peerDependencies": {
     "react": "^17.0.2",
     "@mui/material": "^5.2.8",
-    "@opengeoweb/theme": "2.2.1",
+    "@opengeoweb/theme": "2.3.0",
     "@mui/styles": "^5.2.3",
     "@mui/icons-material": "^5.2.5",
     "react-draggable": "^4.4.3",
     "re-resizable": "^6.9.0",
     "lodash": "^4.17.20",
-    "@opengeoweb/form-fields": "2.2.1",
+    "@opengeoweb/form-fields": "2.3.0",
     "react-hook-form": "^6.12.1",
     "moment": "^2.29.0",
     "moment-timezone": "^0.5.31",