@opengeoweb/shared 2.4.0 → 2.6.0

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/icons-material/MoreVert'), 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/icons-material/MoreVert', '@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.MoreVertIcon, global.createStyles));
-})(this, (function (exports, React, material, makeStyles, iconsMaterial, reactHookForm, formFields, Draggable, reResizable, theme, lodash, withStyles, MoreVertIcon, createStyles) { 'use strict';
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react'), require('@mui/material'), require('@mui/icons-material/Close'), require('react-hook-form'), require('@opengeoweb/form-fields'), require('@mui/styles/makeStyles'), require('react-draggable'), require('re-resizable'), require('@opengeoweb/theme'), require('@mui/icons-material'), require('lodash'), require('@mui/styles/withStyles'), require('@mui/icons-material/MoreVert'), require('@mui/styles/createStyles')) :
+    typeof define === 'function' && define.amd ? define(['exports', 'react', '@mui/material', '@mui/icons-material/Close', 'react-hook-form', '@opengeoweb/form-fields', '@mui/styles/makeStyles', 'react-draggable', 're-resizable', '@opengeoweb/theme', '@mui/icons-material', 'lodash', '@mui/styles/withStyles', '@mui/icons-material/MoreVert', '@mui/styles/createStyles'], factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.Shared = {}, global.React, global.material, global.Close, global.reactHookForm, global.formFields, global.makeStyles, global.Draggable, global.reResizable, global.theme, global.iconsMaterial, global.lodash, global.withStyles, global.MoreVertIcon, global.createStyles));
+})(this, (function (exports, React, material, Close, reactHookForm, formFields, makeStyles, Draggable, reResizable, theme, iconsMaterial, lodash, withStyles, MoreVertIcon, createStyles) { 'use strict';
 
     function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -26,6 +26,7 @@
 
     var React__namespace = /*#__PURE__*/_interopNamespace(React);
     var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+    var Close__default = /*#__PURE__*/_interopDefaultLegacy(Close);
     var makeStyles__default = /*#__PURE__*/_interopDefaultLegacy(makeStyles);
     var Draggable__default = /*#__PURE__*/_interopDefaultLegacy(Draggable);
     var withStyles__default = /*#__PURE__*/_interopDefaultLegacy(withStyles);
@@ -160,20 +161,6 @@
       }, content));
     };
 
-    var useStyles$b = makeStyles__default["default"](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,
@@ -189,8 +176,6 @@
           content = _e === void 0 ? null : _e,
           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
 
@@ -198,14 +183,33 @@
       return /*#__PURE__*/React__namespace.createElement(material.Dialog, __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__namespace.createElement(material.DialogTitle, {
-        className: classes.dialogHeader
+        sx: {
+          zIndex: 1,
+          padding: 2,
+          display: 'flex',
+          justifyContent: 'space-between',
+          alignItems: 'center'
+        }
       }, /*#__PURE__*/React__namespace.createElement(material.Typography, {
-        variant: "h5",
+        sx: {
+          fontSize: {
+            xs: '16px',
+            sm: '34px'
+          },
+          fontWeight: {
+            xs: 500,
+            sm: 400
+          }
+        },
         "data-testid": "confirmationDialog-title",
         component: "span"
       }, title), /*#__PURE__*/React__namespace.createElement(material.IconButton, {
@@ -215,23 +219,51 @@
           return onClose('CLOSED');
         },
         size: "small"
-      }, /*#__PURE__*/React__namespace.createElement(iconsMaterial.Close, null))), /*#__PURE__*/React__namespace.createElement(material.DialogContent, {
-        className: classes.dialogContent
+      }, /*#__PURE__*/React__namespace.createElement(Close__default["default"], null))), /*#__PURE__*/React__namespace.createElement(material.DialogContent, {
+        sx: {
+          padding: '8px 16px'
+        }
       }, /*#__PURE__*/React__namespace.createElement(material.Typography, {
         variant: "body1"
-      }, description), content), /*#__PURE__*/React__namespace.createElement(material.DialogActions, null, /*#__PURE__*/React__namespace.createElement(material.Button, {
-        "data-testid": "conformationDialog-cancel",
-        color: "secondary",
-        variant: "outlined",
+      }, description), content), /*#__PURE__*/React__namespace.createElement(material.DialogActions, {
+        sx: {
+          padding: 2,
+          flexDirection: {
+            xs: 'column',
+            sm: 'row'
+          }
+        }
+      }, /*#__PURE__*/React__namespace.createElement(material.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__namespace.createElement(material.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)));
     };
@@ -370,12 +402,20 @@
     };
 
     var HIDDEN_INPUT_HELPER_IS_DRAFT = 'IS_DRAFT';
-    var useDraftFormHelpers = function useDraftFormHelpers() {
+    var useDraftFormHelpers = function useDraftFormHelpers(isDefaultDraft) {
+      if (isDefaultDraft === void 0) {
+        isDefaultDraft = false;
+      }
+
       var _a = reactHookForm.useFormContext(),
           getValues = _a.getValues,
           setValue = _a.setValue,
           register = _a.register;
 
+      React__namespace.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;
       };
@@ -393,9 +433,7 @@
       };
 
       var DraftFieldHelper = function DraftFieldHelper() {
-        return /*#__PURE__*/React__namespace.createElement("input", __assign({
-          defaultValue: "false"
-        }, register(HIDDEN_INPUT_HELPER_IS_DRAFT), {
+        return /*#__PURE__*/React__namespace.createElement("input", __assign({}, register(HIDDEN_INPUT_HELPER_IS_DRAFT), {
           type: "hidden"
         }));
       };
@@ -502,24 +540,21 @@
      * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
      * Copyright 2021 - Finnish Meteorological Institute (FMI)
      * */
-    var useStyles$a = makeStyles__default["default"](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(_a) {
+      var _b = _a.severity,
+          severity = _b === void 0 ? 'error' : _b,
+          _c = _a.dataTestId,
+          dataTestId = _c === void 0 ? 'alert-icon' : _c;
+
       switch (severity) {
         case 'info':
-          return /*#__PURE__*/React__namespace.createElement(material.SvgIcon, null, /*#__PURE__*/React__namespace.createElement("rect", {
+          return /*#__PURE__*/React__namespace.createElement(material.SvgIcon, {
+            sx: {
+              color: 'geowebColors.functional.notification'
+            },
+            "data-testid": dataTestId
+          }, /*#__PURE__*/React__namespace.createElement("rect", {
             width: 24,
             height: 24,
             fill: "transparent"
@@ -529,7 +564,12 @@
           }));
 
         case 'success':
-          return /*#__PURE__*/React__namespace.createElement(material.SvgIcon, null, /*#__PURE__*/React__namespace.createElement("rect", {
+          return /*#__PURE__*/React__namespace.createElement(material.SvgIcon, {
+            sx: {
+              color: 'geowebColors.functional.success'
+            },
+            "data-testid": dataTestId
+          }, /*#__PURE__*/React__namespace.createElement("rect", {
             width: 24,
             height: 24,
             fill: "transparent"
@@ -539,7 +579,12 @@
           }));
 
         case 'warning':
-          return /*#__PURE__*/React__namespace.createElement(material.SvgIcon, null, /*#__PURE__*/React__namespace.createElement("rect", {
+          return /*#__PURE__*/React__namespace.createElement(material.SvgIcon, {
+            sx: {
+              color: 'geowebColors.functional.warning'
+            },
+            "data-testid": dataTestId
+          }, /*#__PURE__*/React__namespace.createElement("rect", {
             width: 24,
             height: 24,
             fill: "transparent"
@@ -550,7 +595,12 @@
 
         case 'error':
         default:
-          return /*#__PURE__*/React__namespace.createElement(material.SvgIcon, null, /*#__PURE__*/React__namespace.createElement("rect", {
+          return /*#__PURE__*/React__namespace.createElement(material.SvgIcon, {
+            sx: {
+              color: 'geowebColors.functional.error'
+            },
+            "data-testid": dataTestId
+          }, /*#__PURE__*/React__namespace.createElement("rect", {
             width: 24,
             height: 24,
             fill: "transparent"
@@ -570,12 +620,29 @@
           _d = _a.dataTestId,
           dataTestId = _d === void 0 ? 'alert-banner' : _d,
           _e = _a.isCompact,
-          isCompact = _e === void 0 ? false : _e;
-      var classes = useStyles$a();
-      return /*#__PURE__*/React__namespace.createElement(material.Alert, {
+          isCompact = _e === void 0 ? false : _e,
+          _f = _a.shouldClose,
+          shouldClose = _f === void 0 ? false : _f;
+
+      var _g = __read(React__namespace.useState(true), 2),
+          isOpen = _g[0],
+          setIsOpen = _g[1];
+
+      return isOpen && /*#__PURE__*/React__namespace.createElement(material.Alert, {
         "data-testid": dataTestId,
         severity: severity,
-        icon: getIcon(severity),
+        icon: /*#__PURE__*/React__namespace.createElement(AlertIcon, {
+          severity: severity
+        }),
+        action: shouldClose ? /*#__PURE__*/React__namespace.createElement(material.Button, {
+          variant: "flat",
+          onClick: function onClick() {
+            return setIsOpen(false);
+          },
+          sx: {
+            backgroundColor: 'transparent!important'
+          }
+        }, "CLOSE") : undefined,
         sx: isCompact ? {
           height: '32px',
           boxSizing: 'border-box',
@@ -592,11 +659,31 @@
             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__namespace.createElement(material.AlertTitle, {
-        className: classes.title
-      }, title), info && /*#__PURE__*/React__namespace.createElement("div", {
-        className: classes.info
+        sx: {
+          fontSize: '14px',
+          fontWeight: 'normal',
+          marginTop: '0px!important',
+          paddingTop: '0px!important',
+          marginBottom: '0px!important'
+        }
+      }, title), info && /*#__PURE__*/React__namespace.createElement(material.Box, {
+        sx: {
+          fontSize: '16px',
+          marginTop: 1
+        }
       }, info));
     };
 
@@ -616,7 +703,7 @@
      * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
      * Copyright 2021 - Finnish Meteorological Institute (FMI)
      * */
-    var useStyles$9 = makeStyles__default["default"](function () {
+    var useStyles$8 = makeStyles__default["default"](function () {
       return {
         wrapper: {
           height: '100vh',
@@ -633,7 +720,7 @@
     var AppLayout = function AppLayout(_a) {
       var header = _a.header,
           children = _a.children;
-      var classes = useStyles$9();
+      var classes = useStyles$8();
       return /*#__PURE__*/React__default["default"].createElement("div", {
         className: classes.wrapper
       }, header, /*#__PURE__*/React__default["default"].createElement("main", {
@@ -659,7 +746,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) {
       var _a;
 
       return {
@@ -696,7 +783,7 @@
           userMenu = _a.userMenu,
           _b = _a.title,
           title = _b === void 0 ? 'GeoWeb' : _b;
-      var classes = useStyles$8();
+      var classes = useStyles$7();
       return /*#__PURE__*/React__default["default"].createElement("header", {
         className: classes.header
       }, /*#__PURE__*/React__default["default"].createElement(material.Grid, {
@@ -970,7 +1057,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 {
         container: {
           position: 'absolute',
@@ -1018,7 +1105,7 @@
       } : _d,
           children = _a.children,
           initials = _a.initials;
-      var classes = useStyles$7();
+      var classes = useStyles$6();
       return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(material.IconButton, {
         "data-testid": "userButton",
         onClick: onToggle,
@@ -1101,7 +1188,7 @@
      * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
      * Copyright 2021 - Finnish Meteorological Institute (FMI)
      * */
-    var useStyles$6 = makeStyles__default["default"](function (theme) {
+    var useStyles$5 = makeStyles__default["default"](function (theme) {
       return {
         footer: {
           boxShadow: theme.shadows[1],
@@ -1114,7 +1201,7 @@
     }); // drag handles will be handled by DraggableResizable/Resizable
 
     var ToolFooter = function ToolFooter() {
-      var classes = useStyles$6();
+      var classes = useStyles$5();
       return /*#__PURE__*/React__default["default"].createElement("footer", {
         className: classes.footer
       });
@@ -1197,13 +1284,17 @@
           _c = _a.isDraggable,
           isDraggable = _c === void 0 ? false : _c,
           _d = _a.className,
-          className = _d === void 0 ? '' : _d;
+          className = _d === void 0 ? '' : _d,
+          _e = _a.leftComponent,
+          leftComponent = _e === void 0 ? null : _e;
       var styles = getStyle(size);
 
       var onClickClose = function onClickClose() {
         return onClose();
       };
 
+      var columnSizeIcon = leftComponent ? 3 : 1;
+      var columnSizeTitle = leftComponent ? 6 : 10;
       return /*#__PURE__*/React__default["default"].createElement(material.Box, {
         component: "header",
         className: className,
@@ -1219,26 +1310,27 @@
         alignItems: "center"
       }, /*#__PURE__*/React__default["default"].createElement(material.Grid, {
         item: true,
-        xs: 1
-      }, /*#__PURE__*/React__default["default"].createElement(material.Grid, {
+        xs: columnSizeIcon
+      }, isDraggable && size !== 'xxs' && !leftComponent && /*#__PURE__*/React__default["default"].createElement(material.Grid, {
         container: true,
         justifyContent: "flex-start"
-      }, isDraggable && size !== 'xxs' && /*#__PURE__*/React__default["default"].createElement(material.IconButton, {
+      }, /*#__PURE__*/React__default["default"].createElement(material.IconButton, {
         "data-testid": "dragBtn",
         disableRipple: true,
         size: "large",
         sx: __assign(__assign({}, iconStyle), {
           pointerEvents: 'none'
         })
-      }, /*#__PURE__*/React__default["default"].createElement(iconsMaterial.DragIndicator, null)))), /*#__PURE__*/React__default["default"].createElement(material.Grid, {
+      }, /*#__PURE__*/React__default["default"].createElement(iconsMaterial.DragIndicator, null))), leftComponent && leftComponent), /*#__PURE__*/React__default["default"].createElement(material.Grid, {
         item: true,
-        xs: 10
+        xs: columnSizeTitle
       }, /*#__PURE__*/React__default["default"].createElement(material.Grid, {
         container: true,
         justifyContent: "center",
         alignItems: "center"
       }, title && /*#__PURE__*/React__default["default"].createElement(material.Typography, {
         variant: "h2",
+        noWrap: true,
         sx: {
           fontSize: styles.fontSize,
           fontWeight: styles.fontWeight
@@ -1254,7 +1346,7 @@
         })
       }, /*#__PURE__*/React__default["default"].createElement(iconsMaterial.DragIndicator, null)))), /*#__PURE__*/React__default["default"].createElement(material.Grid, {
         item: true,
-        xs: 1,
+        xs: columnSizeIcon,
         container: true,
         justifyContent: "flex-end"
       }, onClose && /*#__PURE__*/React__default["default"].createElement(material.IconButton, {
@@ -1281,22 +1373,20 @@
      * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
      * Copyright 2021 - Finnish Meteorological Institute (FMI)
      * */
-    var useStyles$5 = makeStyles__default["default"](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) {
@@ -1318,20 +1408,22 @@
       _h = _a.headerClassName,
           // elevation_06
       headerClassName = _h === void 0 ? '' : _h,
-          props = __rest(_a, ["title", "size", "children", "onClose", "isResizable", "isDraggable", "maxHeight", "elevation", "headerClassName"]);
+          _j = _a.leftComponent,
+          leftComponent = _j === void 0 ? null : _j,
+          props = __rest(_a, ["title", "size", "children", "onClose", "isResizable", "isDraggable", "maxHeight", "elevation", "headerClassName", "leftComponent"]);
 
-      var classes = useStyles$5();
       return /*#__PURE__*/React__default["default"].createElement(material.Paper, __assign({
         elevation: elevation,
-        className: classes.container
+        sx: styles$1.container
       }, props), /*#__PURE__*/React__default["default"].createElement(ToolHeader, {
         title: title,
         size: size,
         isDraggable: isDraggable,
         onClose: onClose,
-        className: headerClassName
-      }), /*#__PURE__*/React__default["default"].createElement("div", {
-        className: classes.content,
+        className: headerClassName,
+        leftComponent: leftComponent
+      }), /*#__PURE__*/React__default["default"].createElement(material.Box, {
+        sx: styles$1.content,
         style: {
           maxHeight: maxHeight
         }
@@ -1407,30 +1499,32 @@
           order = _l === void 0 ? 1 : _l,
           _m = _a.source,
           source = _m === void 0 ? 'app' : _m,
-          props = __rest(_a, ["title", "bounds", "headerSize", "startSize", "startPosition", "children", "isOpen", "onClose", "initialMaxHeight", "onChangeSize", "onMouseDown", "order", "source"]);
+          _o = _a.leftComponent,
+          leftComponent = _o === void 0 ? null : _o,
+          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;
       var nodeRef = React__default["default"].useRef(null);
 
-      var _o = __read(React__default["default"].useState({
+      var _p = __read(React__default["default"].useState({
         x: 0,
         y: 0
       }), 2),
-          position = _o[0],
-          setPosition = _o[1];
+          position = _p[0],
+          setPosition = _p[1];
 
-      var _p = __read(React__default["default"].useState(startSize), 2),
-          size = _p[0],
-          setSize = _p[1];
+      var _q = __read(React__default["default"].useState(startSize), 2),
+          size = _q[0],
+          setSize = _q[1];
 
       var onStopDrag = React__default["default"].useCallback(function (_event, position) {
         setPosition(position);
       }, [setPosition]);
 
-      var _q = __read(React__default["default"].useState(defaultInitialMaxHeight), 2),
-          initialMaxHeight = _q[0],
-          setInitialMaxHeight = _q[1];
+      var _r = __read(React__default["default"].useState(defaultInitialMaxHeight), 2),
+          initialMaxHeight = _r[0],
+          setInitialMaxHeight = _r[1];
 
       var onStartResize = function onStartResize() {
         setInitialMaxHeight('initial');
@@ -1516,7 +1610,8 @@
         isDraggable: true,
         isResizable: true,
         elevation: elevation,
-        headerClassName: headerClassName
+        headerClassName: headerClassName,
+        leftComponent: leftComponent
       }, children)))) : null;
     };
 
@@ -1796,11 +1891,11 @@
       }, /*#__PURE__*/React__default["default"].createElement(ArrowRightIcon, null))),
       descriptionMac: /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(ShortCutSegment, {
         type: "icon"
-      }, /*#__PURE__*/React__default["default"].createElement(OptionIcon, null)), /*#__PURE__*/React__default["default"].createElement(ShortCutSegment, {
+      }, "Ctrl"), /*#__PURE__*/React__default["default"].createElement(ShortCutSegment, {
         type: "connect"
       }, "+"), /*#__PURE__*/React__default["default"].createElement(ShortCutSegment, {
         type: "icon"
-      }, /*#__PURE__*/React__default["default"].createElement(CommandIcon, null)), /*#__PURE__*/React__default["default"].createElement(ShortCutSegment, {
+      }, /*#__PURE__*/React__default["default"].createElement(OptionIcon, null)), /*#__PURE__*/React__default["default"].createElement(ShortCutSegment, {
         type: "connect"
       }, "+"), /*#__PURE__*/React__default["default"].createElement(ShortCutSegment, {
         type: "icon"
@@ -2302,10 +2397,12 @@
           value = _d === void 0 ? 0 : _d,
           _e = _a.sx,
           sx = _e === void 0 ? {} : _e,
-          props = __rest(_a, ["active", "width", "height", "children", "value", "sx"]);
+          _f = _a.variant,
+          variant = _f === void 0 ? 'tool' : _f,
+          props = __rest(_a, ["active", "width", "height", "children", "value", "sx", "variant"]);
 
       return /*#__PURE__*/React__namespace.createElement(CustomToggleButton, __assign({
-        variant: "tool",
+        variant: variant,
         disableRipple: true,
         selected: active,
         value: value,
@@ -2624,11 +2721,199 @@
           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
+        }
+      };
+    };
+
+    /* *
+     * 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 2020 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+     * Copyright 2020 - Finnish Meteorological Institute (FMI)
+     * */
+    var TooltipSelect = function TooltipSelect(_a) {
+      var tooltip = _a.tooltip,
+          _b = _a.list,
+          list = _b === void 0 ? [] : _b,
+          _c = _a.currentIndex,
+          currentIndex = _c === void 0 ? -1 : _c,
+          _d = _a.onChangeMouseWheel,
+          onChangeMouseWheel = _d === void 0 ? function () {} : _d,
+          _e = _a.requiresCtrlToChange,
+          requiresCtrlToChange = _e === void 0 ? false : _e,
+          isEnabled = _a.isEnabled,
+          noStyling = _a.noStyling,
+          props = __rest(_a, ["tooltip", "list", "currentIndex", "onChangeMouseWheel", "requiresCtrlToChange", "isEnabled", "noStyling"]);
+
+      props.disableUnderline;
+          var otherProps = __rest(props, ["disableUnderline"]);
+
+      var _f = __read(React__namespace.useState(false), 2),
+          selectOpen = _f[0],
+          setSelectOpen = _f[1];
+
+      var _g = __read(React__namespace.useState(false), 2),
+          tooltipOpen = _g[0],
+          setTooltipOpen = _g[1];
+
+      var onWheel = React__namespace.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__namespace.useCallback(function () {
+        setSelectOpen(true);
+        setTooltipOpen(false);
+      }, []);
+      var onClose = React__namespace.useCallback(function () {
+        setSelectOpen(false);
+      }, []);
+      var onMouseEnter = React__namespace.useCallback(function () {
+        if (!selectOpen) setTooltipOpen(true);
+      }, [selectOpen]);
+      var onMouseLeave = React__namespace.useCallback(function () {
+        setTooltipOpen(false);
+      }, []);
+      var onFocus = React__namespace.useCallback(function () {
+        setTooltipOpen(true);
+      }, []);
+      var onBlur = React__namespace.useCallback(function () {
+        setTooltipOpen(false);
+      }, []);
+      return /*#__PURE__*/React__namespace.createElement(material.Tooltip, {
+        title: tooltip,
+        placement: "top",
+        open: tooltipOpen,
+        sx: noStyling ? undefined : tooltipContainerStyles(isEnabled)
+      }, /*#__PURE__*/React__namespace.createElement(material.Select, __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.
@@ -2664,6 +2949,7 @@
     };
 
     exports.AlertBanner = AlertBanner;
+    exports.AlertIcon = AlertIcon;
     exports.AppHeader = AppHeader;
     exports.AppLayout = AppLayout;
     exports.ConfirmationDialog = ConfirmationDialog;
@@ -2684,6 +2970,7 @@
     exports.ToolContainerDraggable = DraggableComponent;
     exports.ToolFooter = ToolFooter;
     exports.ToolHeader = ToolHeader;
+    exports.TooltipSelect = TooltipSelect;
     exports.UserMenu = UserMenu;
     exports.UserMenuItemCheatSheet = UserMenuItemCheatSheet;
     exports.UserMenuItemTheme = MenuItemTheme;
@@ -2693,6 +2980,7 @@
     exports.isAxiosError = isAxiosError;
     exports.showPrompt = showPrompt;
     exports.sliderStyles = sliderStyles;
+    exports.tooltipContainerStyles = tooltipContainerStyles;
     exports.useConfirmationDialog = useConfirmationDialog;
     exports.useDialogActions = useDialogActions;
     exports.useDraftFormHelpers = useDraftFormHelpers;