@opengeoweb/shared 2.4.1 → 2.7.0

package/index.umd.js

@@ -402,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;
       };
@@ -425,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"
         }));
       };
@@ -534,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"
@@ -561,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"
@@ -571,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"
@@ -582,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"
@@ -593,6 +611,12 @@
       }
     };
 
+    var IconChevronRight = /*#__PURE__*/React__namespace.createElement(material.SvgIcon, null, /*#__PURE__*/React__namespace.createElement("path", {
+      d: "M5.427 15.03c-.57.618-.57 1.57 0 2.188.57.603 1.494.603 2.062 0l5.514-5.843 5.512 5.843c.57.603 1.494.603 2.063 0 .285-.303.426-.7.426-1.094a1.59 1.59 0 0 0-.426-1.094L13.003 7l-7.576 8.03z",
+      id: "chrevron-right",
+      transform: "rotate(90 13.002 12.335)"
+    }));
+
     var AlertBanner = function AlertBanner(_a) {
       var title = _a.title,
           _b = _a.severity,
@@ -602,12 +626,31 @@
           _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,
+          _g = _a.actionButtonProps,
+          actionButtonProps = _g === void 0 ? undefined : _g;
+
+      var _h = __read(React__namespace.useState(true), 2),
+          isOpen = _h[0],
+          setIsOpen = _h[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',
@@ -624,12 +667,42 @@
             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
-      }, 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), actionButtonProps && /*#__PURE__*/React__namespace.createElement(material.Button, {
+        variant: "flat",
+        onClick: function onClick(event) {
+          setIsOpen(false);
+          actionButtonProps.onClick(event);
+        },
+        sx: {
+          backgroundColor: 'transparent!important'
+        },
+        startIcon: IconChevronRight
+      }, actionButtonProps.title.toUpperCase()));
     };
 
     /* *
@@ -648,7 +721,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',
@@ -665,7 +738,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", {
@@ -691,7 +764,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 {
@@ -728,7 +801,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, {
@@ -1002,7 +1075,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',
@@ -1050,7 +1123,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,
@@ -1133,7 +1206,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],
@@ -1146,7 +1219,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
       });
@@ -1229,13 +1302,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,
@@ -1251,26 +1328,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
@@ -1286,7 +1364,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, {
@@ -1313,22 +1391,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) {
@@ -1350,20 +1426,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
         }
@@ -1439,30 +1517,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');
@@ -1548,7 +1628,8 @@
         isDraggable: true,
         isResizable: true,
         elevation: elevation,
-        headerClassName: headerClassName
+        headerClassName: headerClassName,
+        leftComponent: leftComponent
       }, children)))) : null;
     };
 
@@ -1828,11 +1909,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"
@@ -2334,10 +2415,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,
@@ -2376,9 +2459,20 @@
               horizontal: 'right'
             }
           };
+
+        case 'right':
+          return {
+            anchorOrigin: {
+              vertical: 'center',
+              horizontal: 'right'
+            },
+            transformOrigin: {
+              vertical: 'center',
+              horizontal: 'left'
+            }
+          };
       }
     };
-
     var ToggleMenu = function ToggleMenu(_a) {
       var _b = _a.buttonTestId,
           buttonTestId = _b === void 0 ? 'toggleMenuButton' : _b,
@@ -2388,31 +2482,43 @@
           children = _a.children,
           buttonSx = _a.buttonSx,
           _d = _a.tooltipTitle,
-          tooltipTitle = _d === void 0 ? '' : _d;
+          tooltipTitle = _d === void 0 ? '' : _d,
+          variant = _a.variant,
+          _e = _a.isDefaultOpen,
+          isDefaultOpen = _e === void 0 ? false : _e;
 
-      var _e = __read(React__namespace.useState(null), 2),
-          anchorEl = _e[0],
-          setAnchorEl = _e[1];
+      var _f = __read(React__namespace.useState(null), 2),
+          anchorEl = _f[0],
+          setAnchorEl = _f[1];
 
       var isOpen = Boolean(anchorEl);
 
-      var _f = getPosition(menuPosition),
-          anchorOrigin = _f.anchorOrigin,
-          transformOrigin = _f.transformOrigin;
+      var _g = getPosition(menuPosition),
+          anchorOrigin = _g.anchorOrigin,
+          transformOrigin = _g.transformOrigin;
 
       var handleClick = function handleClick(event) {
+        event.stopPropagation();
         setAnchorEl(event.currentTarget);
       };
 
-      var handleClose = function handleClose() {
+      var handleClose = function handleClose(event) {
+        event.stopPropagation();
         setAnchorEl(null);
       };
 
+      React__namespace.useEffect(function () {
+        if (isDefaultOpen) {
+          setAnchorEl(document.getElementById(buttonTestId));
+        }
+      }, [isDefaultOpen, buttonTestId]);
       return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement(ToolButton, {
         active: isOpen,
         sx: buttonSx,
         onClick: handleClick,
-        "data-testid": buttonTestId
+        "data-testid": buttonTestId,
+        variant: variant,
+        id: buttonTestId
       }, /*#__PURE__*/React__namespace.createElement(material.Tooltip, {
         placement: "top",
         title: tooltipTitle
@@ -2439,9 +2545,9 @@
             action = menuItem.action;
         return /*#__PURE__*/React__namespace.createElement(material.MenuItem, {
           key: text,
-          onClick: function onClick() {
-            action();
-            handleClose();
+          onClick: function onClick(event) {
+            action(event);
+            handleClose(event);
           }
         }, icon && /*#__PURE__*/React__namespace.createElement(material.ListItemIcon, null, icon), /*#__PURE__*/React__namespace.createElement(material.Typography, null, text));
       }), children));
@@ -2661,6 +2767,216 @@
       });
     };
 
+    /* *
+     * 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, hasBackgroundColor) {
+      if (hasBackgroundColor === void 0) {
+        hasBackgroundColor = true;
+      }
+
+      return __assign({
+        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': {
+          outline: function outline(theme) {
+            return theme.palette.geowebColors.buttons.focusDefault.outline;
+          }
+        },
+        '&.Mui-focused .MuiSelect-select': {
+          outline: function outline(theme) {
+            return theme.palette.geowebColors.buttons.focusDefault.outline;
+          }
+        },
+        '&:focus&.MuiButton-root': {
+          outline: function outline(theme) {
+            return theme.palette.geowebColors.buttons.focusDefault.outline;
+          }
+        },
+        '& .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
+        }
+      }, hasBackgroundColor && backgroundColor);
+    };
+    var backgroundColor = {
+      '&:hover .MuiSelect-select': {
+        outline: function outline(theme) {
+          return theme.palette.geowebColors.buttons.focusDefault.outline;
+        },
+        backgroundColor: 'geowebColors.buttons.tool.mouseOver.fill'
+      },
+      '&.Mui-focused .MuiSelect-select': {
+        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'
+      }
+    };
+
+    /* *
+     * 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,
+          hasBackgroundColor = _a.hasBackgroundColor,
+          props = __rest(_a, ["tooltip", "list", "currentIndex", "onChangeMouseWheel", "requiresCtrlToChange", "isEnabled", "noStyling", "hasBackgroundColor"]);
+
+      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, hasBackgroundColor)
+      }, /*#__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.
@@ -2696,6 +3012,7 @@
     };
 
     exports.AlertBanner = AlertBanner;
+    exports.AlertIcon = AlertIcon;
     exports.AppHeader = AppHeader;
     exports.AppLayout = AppLayout;
     exports.ConfirmationDialog = ConfirmationDialog;
@@ -2716,15 +3033,18 @@
     exports.ToolContainerDraggable = DraggableComponent;
     exports.ToolFooter = ToolFooter;
     exports.ToolHeader = ToolHeader;
+    exports.TooltipSelect = TooltipSelect;
     exports.UserMenu = UserMenu;
     exports.UserMenuItemCheatSheet = UserMenuItemCheatSheet;
     exports.UserMenuItemTheme = MenuItemTheme;
     exports.calculateDialogSizeAndPosition = calculateDialogSizeAndPosition;
     exports.getAxiosErrorMessage = getAxiosErrorMessage;
     exports.getInitials = getInitials;
+    exports.getPosition = getPosition;
     exports.isAxiosError = isAxiosError;
     exports.showPrompt = showPrompt;
     exports.sliderStyles = sliderStyles;
+    exports.tooltipContainerStyles = tooltipContainerStyles;
     exports.useConfirmationDialog = useConfirmationDialog;
     exports.useDialogActions = useDialogActions;
     exports.useDraftFormHelpers = useDraftFormHelpers;