@opengeoweb/shared 4.17.0 → 4.19.0

package/index.umd.js

@@ -161,6 +161,115 @@
       }, content));
     };
 
+    /* *
+     * Licensed under the Apache License, Version 2.0 (the "License");
+     * you may not use this file except in compliance with the License.
+     * You may obtain a copy of the License at
+     *
+     *     http://www.apache.org/licenses/LICENSE-2.0
+     *
+     * Unless required by applicable law or agreed to in writing, software
+     * distributed under the License is distributed on an "AS IS" BASIS,
+     * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+     * See the License for the specific language governing permissions and
+     * limitations under the License.
+     *
+     * Copyright 2022 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+     * Copyright 2022 - Finnish Meteorological Institute (FMI)
+     * */
+    var defaultDelay = 1000;
+    var useControlledTooltip = function useControlledTooltip() {
+      var _a = __read(React__namespace.useState(false), 2),
+          tooltipOpen = _a[0],
+          setTooltipOpen = _a[1];
+
+      var _b = __read(React__namespace.useState(false), 2),
+          delayedTooltip = _b[0],
+          setDelayedTooltip = _b[1];
+
+      React__namespace.useEffect(function () {
+        if (tooltipOpen === true) {
+          var timer_1 = setTimeout(function () {
+            return setDelayedTooltip(true);
+          }, defaultDelay);
+          return function () {
+            clearTimeout(timer_1);
+          };
+        }
+
+        setDelayedTooltip(false);
+        return function () {};
+      }, [tooltipOpen]);
+      return [delayedTooltip, setTooltipOpen];
+    };
+    var CustomTooltip = function CustomTooltip(props) {
+      return /*#__PURE__*/React__namespace.createElement(material.Tooltip, __assign({}, props, {
+        enterDelay: defaultDelay,
+        enterNextDelay: defaultDelay,
+        disableInteractive: true
+      }));
+    };
+
+    /* *
+     * Licensed under the Apache License, Version 2.0 (the "License");
+     * you may not use this file except in compliance with the License.
+     * 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 2023 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+     * Copyright 2023 - Finnish Meteorological Institute (FMI)
+     * */
+    var CustomIconButton = /*#__PURE__*/React__namespace.forwardRef(function (_a, ref) {
+      var _b = _a.tooltipTitle,
+          tooltipTitle = _b === void 0 ? '' : _b,
+          _c = _a.variant,
+          variant = _c === void 0 ? 'flat' : _c,
+          _d = _a.isSelected,
+          isSelected = _d === void 0 ? false : _d,
+          _e = _a.shouldShowAsDisabled,
+          shouldShowAsDisabled = _e === void 0 ? false : _e,
+          _f = _a.size,
+          size = _f === void 0 ? 'small' : _f,
+          children = _a.children,
+          className = _a.className,
+          props = __rest(_a, ["tooltipTitle", "variant", "isSelected", "shouldShowAsDisabled", "size", "children", "className"]);
+
+      var classNames = __spreadArray(__spreadArray(__spreadArray([], __read(className ? [className] : [])), __read(isSelected ? ['Mui-selected'] : [])), [variant]).join(' ');
+
+      var renderIconButton = function renderIconButton() {
+        return /*#__PURE__*/React__namespace.createElement(material.IconButton, __assign({
+          "aria-label": tooltipTitle
+        }, props, {
+          size: size,
+          className: classNames,
+          ref: ref,
+          sx: __assign(__assign({}, props.sx), shouldShowAsDisabled && {
+            '&.MuiIconButton-root': {
+              color: "geowebColors.iconButtons." + variant + ".disabled.color"
+            },
+            '&.Mui-focusVisible': {
+              color: "geowebColors.iconButtons." + variant + ".default.color"
+            }
+          })
+        }), children);
+      };
+
+      return tooltipTitle ? /*#__PURE__*/React__namespace.createElement(CustomTooltip, {
+        title: tooltipTitle,
+        placement: "top",
+        sx: {
+          pointerEvents: 'none'
+        }
+      }, renderIconButton()) : renderIconButton();
+    });
+
     var CustomDialog = function CustomDialog(_a) {
       var title = _a.title,
           _onClose = _a.onClose,
@@ -202,13 +311,17 @@
         },
         "data-testid": "customDialog-title",
         component: "span"
-      }, title), /*#__PURE__*/React__namespace.createElement(material.IconButton, {
+      }, title), /*#__PURE__*/React__namespace.createElement(CustomIconButton, {
         "data-testid": "customDialog-close",
         "aria-label": "close",
         onClick: function onClick() {
           return _onClose('CLOSED');
         },
-        size: "small"
+        sx: {
+          '&.MuiIconButton-root': {
+            color: 'geowebColors.greys.accessible'
+          }
+        }
       }, /*#__PURE__*/React__namespace.createElement(theme.Close, {
         "data-testid": "CloseIcon"
       }))), /*#__PURE__*/React__namespace.createElement(material.DialogContent, {
@@ -282,15 +395,14 @@
                 sm: '150px'
               },
               '&:focus': {
-                outline: theme.palette.geowebColors.buttons.focusDefault.outline,
+                outline: theme.palette.geowebColors.buttons.primary.focus.outline,
                 borderColor: 'transparent'
               }
             };
           },
           onClick: function onClick() {
             return onClose('CANCELLED');
-          },
-          disableFocusRipple: true
+          }
         }, cancelLabel), isLoading ? /*#__PURE__*/React__namespace.createElement(material.Box, {
           "data-testid": "confirm-dialog-spinner",
           sx: __assign(__assign({}, confirmStyle), {
@@ -309,14 +421,13 @@
           sx: function sx(theme) {
             return __assign(__assign({}, confirmStyle), {
               '&:focus': {
-                outline: theme.palette.geowebColors.buttons.focusDefault.outline,
+                outline: theme.palette.geowebColors.buttons.primary.focus.outline,
                 borderColor: 'transparent'
               }
             });
           },
           onClick: onSubmit,
-          autoFocus: !disableAutoFocus,
-          disableFocusRipple: true
+          autoFocus: !disableAutoFocus
         }, confirmLabel))
       }, rest), content);
     };
@@ -502,7 +613,10 @@
     };
     var useMakeSureContainerStaysInsideWindow = function useMakeSureContainerStaysInsideWindow(nodeRef, position, setPosition) {
       var onResizeWindow = React__default["default"].useCallback(function () {
-        if (!nodeRef.current) return;
+        if (!nodeRef.current) {
+          return;
+        }
+
         var bbox = nodeRef.current.firstChild.getBoundingClientRect();
         var containingView = nodeRef.current.parentElement.getBoundingClientRect();
         adjustPosition(bbox, containingView, position, setPosition);
@@ -1059,8 +1173,8 @@
           return /*#__PURE__*/React__namespace.createElement(material.Box, {
             sx: {
               whiteSpace: 'pre-wrap',
-              width: 'inherit',
-              height: 'inherit',
+              width: '100%',
+              height: '100%',
               overflowY: 'scroll'
             }
           }, /*#__PURE__*/React__namespace.createElement(AlertBanner, {
@@ -1119,8 +1233,8 @@
      * See the License for the specific language governing permissions and
      * limitations under the License.
      *
-     * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
-     * Copyright 2021 - Finnish Meteorological Institute (FMI)
+     * Copyright 2023 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+     * Copyright 2023 - Finnish Meteorological Institute (FMI)
      * */
     var styles$3 = {
       container: {
@@ -1140,15 +1254,6 @@
           paddingLeft: 2,
           paddingRight: 2
         }
-      },
-      button: {
-        padding: 0,
-        border: 'none',
-        background: 'transparent',
-        '&:hover': {
-          border: 'none',
-          background: 'transparent'
-        }
       }
     };
 
@@ -1161,11 +1266,19 @@
           onClose = _d === void 0 ? function () {} : _d,
           children = _a.children,
           initials = _a.initials;
-      return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(material.IconButton, {
+      return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(CustomIconButton, {
         "data-testid": "userButton",
         onClick: onToggle,
-        sx: styles$3.button,
-        size: "large"
+        sx: {
+          '&.MuiButtonBase-root': {
+            background: 'transparent',
+            '&:hover': {
+              border: 'none',
+              background: 'transparent'
+            }
+          }
+        },
+        size: "medium"
       }, /*#__PURE__*/React__default["default"].createElement(Avatar, null, initials)), isOpen && /*#__PURE__*/React__default["default"].createElement(material.Paper, {
         sx: styles$3.container,
         "data-testid": "userMenu"
@@ -1268,57 +1381,8 @@
      * See the License for the specific language governing permissions and
      * limitations under the License.
      *
-     * Copyright 2022 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
-     * Copyright 2022 - Finnish Meteorological Institute (FMI)
-     * */
-    var defaultDelay = 1000;
-    var useControlledTooltip = function useControlledTooltip() {
-      var _a = __read(React__namespace.useState(false), 2),
-          tooltipOpen = _a[0],
-          setTooltipOpen = _a[1];
-
-      var _b = __read(React__namespace.useState(false), 2),
-          delayedTooltip = _b[0],
-          setDelayedTooltip = _b[1];
-
-      React__namespace.useEffect(function () {
-        if (tooltipOpen === true) {
-          var timer_1 = setTimeout(function () {
-            return setDelayedTooltip(true);
-          }, defaultDelay);
-          return function () {
-            clearTimeout(timer_1);
-          };
-        }
-
-        setDelayedTooltip(false);
-        return function () {};
-      }, [tooltipOpen]);
-      return [delayedTooltip, setTooltipOpen];
-    };
-    var CustomTooltip = function CustomTooltip(props) {
-      return /*#__PURE__*/React__namespace.createElement(material.Tooltip, __assign({}, props, {
-        enterDelay: defaultDelay,
-        enterNextDelay: defaultDelay,
-        disableInteractive: true
-      }));
-    };
-
-    /* *
-     * Licensed under the Apache License, Version 2.0 (the "License");
-     * you may not use this file except in compliance with the License.
-     * You may obtain a copy of the License at
-     *
-     *     http://www.apache.org/licenses/LICENSE-2.0
-     *
-     * Unless required by applicable law or agreed to in writing, software
-     * distributed under the License is distributed on an "AS IS" BASIS,
-     * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-     * See the License for the specific language governing permissions and
-     * limitations under the License.
-     *
-     * Copyright 2022 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
-     * Copyright 2022 - Finnish Meteorological Institute (FMI)
+     * Copyright 2023 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+     * Copyright 2023 - Finnish Meteorological Institute (FMI)
      * */
 
     var getStyle = function getStyle(size) {
@@ -1416,13 +1480,13 @@
       }, isDraggable && size !== 'xxs' && !leftHeaderComponent && /*#__PURE__*/React__default["default"].createElement(material.Grid, {
         container: true,
         justifyContent: "flex-start"
-      }, /*#__PURE__*/React__default["default"].createElement(material.IconButton, {
+      }, /*#__PURE__*/React__default["default"].createElement(CustomIconButton, {
         "data-testid": "dragBtn",
         disableRipple: true,
-        size: "large",
-        sx: __assign(__assign({}, iconStyle), {
-          pointerEvents: 'none'
-        })
+        sx: {
+          pointerEvents: 'none',
+          '&.MuiIconButton-root': iconStyle
+        }
       }, /*#__PURE__*/React__default["default"].createElement(theme.DragHandle, null))), leftHeaderComponent && leftHeaderComponent), /*#__PURE__*/React__default["default"].createElement(material.Grid, {
         className: "header-title",
         item: true,
@@ -1438,15 +1502,16 @@
           fontSize: styles.fontSize,
           fontWeight: styles.fontWeight
         }
-      }, title), size === 'xxs' && /*#__PURE__*/React__default["default"].createElement(material.IconButton, {
+      }, title), size === 'xxs' && /*#__PURE__*/React__default["default"].createElement(CustomIconButton, {
         "data-testid": "dragBtn-xxs",
         disableRipple: true,
-        size: "small",
-        sx: __assign(__assign({}, iconStyle), {
+        sx: {
           pointerEvents: 'none',
           transform: 'rotate(90deg)',
-          height: 12
-        })
+          '&.MuiButtonBase-root.MuiIconButton-root': __assign(__assign({}, iconStyle), {
+            height: 12
+          })
+        }
       }, /*#__PURE__*/React__default["default"].createElement(theme.DragHandle, null)))), /*#__PURE__*/React__default["default"].createElement(material.Grid, {
         className: "header-right",
         item: true,
@@ -1459,12 +1524,13 @@
         sx: {
           pointerEvents: 'none'
         }
-      }, /*#__PURE__*/React__default["default"].createElement(material.IconButton, {
+      }, /*#__PURE__*/React__default["default"].createElement(CustomIconButton, {
         "data-testid": "closeBtn",
         onClick: onClose,
         onTouchEnd: onClose,
-        size: "large",
-        sx: iconStyle
+        sx: {
+          '&.MuiButtonBase-root.MuiIconButton-root': iconStyle
+        }
       }, /*#__PURE__*/React__default["default"].createElement(theme.Close, {
         "data-testid": "CloseIcon"
       }))))));
@@ -1689,8 +1755,8 @@
      * See the License for the specific language governing permissions and
      * limitations under the License.
      *
-     * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
-     * Copyright 2021 - Finnish Meteorological Institute (FMI)
+     * Copyright 2023 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+     * Copyright 2023 - Finnish Meteorological Institute (FMI)
      * */
 
     var calculateDialogSizeAndPosition = function calculateDialogSizeAndPosition() {
@@ -1766,33 +1832,37 @@
           onResizeStop = _m === void 0 ? function () {} : _m,
           _o = _a.onDragEnd,
           onDragEnd = _o === void 0 ? function () {} : _o,
-          _p = _a.order,
-          order = _p === void 0 ? 1 : _p,
-          _q = _a.source,
-          source = _q === void 0 ? 'app' : _q,
-          _r = _a.leftHeaderComponent,
-          leftHeaderComponent = _r === void 0 ? null : _r,
-          _s = _a.rightHeaderComponent,
-          rightHeaderComponent = _s === void 0 ? null : _s,
+          _p = _a.onFocus,
+          onFocus = _p === void 0 ? function () {} : _p,
+          _q = _a.onBlur,
+          onBlur = _q === void 0 ? function () {} : _q,
+          _r = _a.order,
+          order = _r === void 0 ? 1 : _r,
+          _s = _a.source,
+          source = _s === void 0 ? 'app' : _s,
+          _t = _a.leftHeaderComponent,
+          leftHeaderComponent = _t === void 0 ? null : _t,
+          _u = _a.rightHeaderComponent,
+          rightHeaderComponent = _u === void 0 ? null : _u,
           className = _a.className,
-          _t = _a.sx,
-          sx = _t === void 0 ? {} : _t,
-          props = __rest(_a, ["title", "bounds", "cancel", "headerSize", "startSize", "startPosition", "children", "isOpen", "onClose", "initialMaxHeight", "onChangeSize", "onMouseDown", "onResizeStop", "onDragEnd", "order", "source", "leftHeaderComponent", "rightHeaderComponent", "className", "sx"]);
+          _v = _a.sx,
+          sx = _v === void 0 ? {} : _v,
+          props = __rest(_a, ["title", "bounds", "cancel", "headerSize", "startSize", "startPosition", "children", "isOpen", "onClose", "initialMaxHeight", "onChangeSize", "onMouseDown", "onResizeStop", "onDragEnd", "onFocus", "onBlur", "order", "source", "leftHeaderComponent", "rightHeaderComponent", "className", "sx"]);
 
       var zIndex = (source === 'app' ? BASE_Z_INDEX : 1000) + order;
       var elevation = BASE_ELEVATION + order;
       var nodeRef = React__default["default"].useRef(null);
 
-      var _u = __read(React__default["default"].useState({
+      var _w = __read(React__default["default"].useState({
         x: 0,
         y: 0
       }), 2),
-          position = _u[0],
-          setPosition = _u[1];
+          position = _w[0],
+          setPosition = _w[1];
 
-      var _v = __read(React__default["default"].useState(startSize), 2),
-          size = _v[0],
-          setSize = _v[1];
+      var _x = __read(React__default["default"].useState(startSize), 2),
+          size = _x[0],
+          setSize = _x[1];
 
       var isRightAligned = startPosition && startPosition.right !== null && startPosition.right !== undefined;
       var onStopDrag = React__default["default"].useCallback(function (_event, position) {
@@ -1800,9 +1870,9 @@
         onDragEnd(position, size);
       }, [setPosition, onDragEnd, size]);
 
-      var _w = __read(React__default["default"].useState(defaultInitialMaxHeight), 2),
-          initialMaxHeight = _w[0],
-          setInitialMaxHeight = _w[1];
+      var _y = __read(React__default["default"].useState(defaultInitialMaxHeight), 2),
+          initialMaxHeight = _y[0],
+          setInitialMaxHeight = _y[1];
 
       var onStartResize = function onStartResize() {
         setInitialMaxHeight('initial');
@@ -1849,6 +1919,9 @@
         handle: "." + headerClassName,
         onMouseDown: onMouseDown
       }, /*#__PURE__*/React__default["default"].createElement(material.Box, {
+        tabIndex: -1,
+        onFocus: onFocus,
+        onBlur: onBlur,
         sx: __assign(__assign(__assign({
           position: 'absolute',
           pointerEvents: 'all',
@@ -2318,7 +2391,10 @@
      * Copyright 2021 - Finnish Meteorological Institute (FMI)
      * */
     var getInitials = function getInitials(name) {
-      if (!name) return '';
+      if (!name) {
+        return '';
+      }
+
       var nameWithoutEmail = name.split('@')[0];
       var array = nameWithoutEmail.split('.');
 
@@ -2417,7 +2493,10 @@
             first = _a[0],
             rest = _a.slice(1);
 
-        if (first) first.classList.add('selectedLabel');
+        if (first) {
+          first.classList.add('selectedLabel');
+        }
+
         rest.forEach(function (element) {
           return element.classList.remove('selectedLabel');
         });
@@ -2614,7 +2693,10 @@
         anchorEl: anchorEl,
         open: isOpen,
         onClose: function onClose(event, reason) {
-          if (reason === 'tabKeyDown') return;
+          if (reason === 'tabKeyDown') {
+            return;
+          }
+
           handleClose(event);
         },
         anchorOrigin: anchorOrigin,
@@ -2636,7 +2718,7 @@
         sx: {
           fontSize: '12px'
         }
-      }, menuTitle)), menuItems && menuItems.map(function (menuItem) {
+      }, menuTitle)), menuItems && menuItems.length ? menuItems.map(function (menuItem) {
         var text = menuItem.text,
             icon = menuItem.icon,
             action = menuItem.action;
@@ -2647,207 +2729,8 @@
             handleClose(event);
           }
         }, 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.
-     * You may obtain a copy of the License at
-     *
-     *     http://www.apache.org/licenses/LICENSE-2.0
-     *
-     * Unless required by applicable law or agreed to in writing, software
-     * distributed under the License is distributed on an "AS IS" BASIS,
-     * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-     * See the License for the specific language governing permissions and
-     * limitations under the License.
-     *
-     * Copyright 2022 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
-     * Copyright 2022 - Finnish Meteorological Institute (FMI)
-     * */
-
-    var makeButtonStyles = function makeButtonStyles(isActive, isEnabled, isAccessible) {
-      return {
-        height: '24px',
-        width: '24px',
-        borderRadius: '5px',
-        marginTop: 'auto',
-        marginBottom: 'auto',
-        color: function color() {
-          if (!isEnabled) {
-            return 'geowebColors.buttons.flat.disabled.color';
-          }
-
-          if (isAccessible) {
-            return 'geowebColors.greys.accessible';
-          }
-
-          if (isActive) {
-            return 'common.white';
-          }
-
-          return 'geowebColors.buttons.flat.default.color';
-        },
-        backgroundColor: function backgroundColor() {
-          return isActive ? 'geowebColors.buttons.primary.active.fill' : 'inherit';
-        },
-        '&:focus': {
-          backgroundColor: function backgroundColor() {
-            return isActive ? 'geowebColors.buttons.primary.mouseOver.fill' : 'geowebColors.buttons.flat.mouseOver.fill';
-          },
-          outline: 'geowebColors.buttons.focusDefault.outline',
-          borderRadius: 0
-        },
-        '&:hover': {
-          backgroundColor: function backgroundColor() {
-            return isActive ? 'geowebColors.buttons.primary.mouseOver.fill' : 'geowebColors.buttons.flat.mouseOver.fill';
-          }
-        }
-      };
-    };
-
-    var ManagerButton = function ManagerButton(_a) {
-      var _b = _a.tooltipTitle,
-          tooltipTitle = _b === void 0 ? '' : _b,
-          _c = _a.onClick,
-          onClick = _c === void 0 ? function () {} : _c,
-          _d = _a.isActive,
-          isActive = _d === void 0 ? false : _d,
-          _e = _a.isEnabled,
-          isEnabled = _e === void 0 ? true : _e,
-          icon = _a.icon,
-          testId = _a.testId,
-          _f = _a.isAccessible,
-          isAccessible = _f === void 0 ? false : _f,
-          sx = _a.sx,
-          children = _a.children,
-          props = __rest(_a, ["tooltipTitle", "onClick", "isActive", "isEnabled", "icon", "testId", "isAccessible", "sx", "children"]);
-
-      var buttonStyles = makeButtonStyles(isActive, isEnabled, isAccessible);
-
-      var handleClick = function handleClick(event) {
-        onClick(event);
-      };
-
-      return /*#__PURE__*/React__namespace.createElement(CustomTooltip, {
-        title: tooltipTitle,
-        placement: "top",
-        sx: {
-          pointerEvents: 'none'
-        }
-      }, children || /*#__PURE__*/React__namespace.createElement(material.IconButton, __assign({
-        size: "small",
-        onClick: handleClick,
-        "data-testid": testId,
-        sx: __assign(__assign({}, buttonStyles), sx),
-        disableFocusRipple: true
-      }, props), icon));
-    };
-
-    /* *
-     * Licensed under the Apache License, Version 2.0 (the "License");
-     * you may not use this file except in compliance with the License.
-     * You may obtain a copy of the License at
-     *
-     *     http://www.apache.org/licenses/LICENSE-2.0
-     *
-     * Unless required by applicable law or agreed to in writing, software
-     * distributed under the License is distributed on an "AS IS" BASIS,
-     * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-     * See the License for the specific language governing permissions and
-     * limitations under the License.
-     *
-     * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
-     * Copyright 2021 - Finnish Meteorological Institute (FMI)
-     * */
-    var ManagerDeleteButton = function ManagerDeleteButton(_a) {
-      var tooltipTitle = _a.tooltipTitle,
-          onClickDelete = _a.onClickDelete,
-          _b = _a.isEnabled,
-          isEnabled = _b === void 0 ? true : _b,
-          sx = _a.sx;
-      return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement(ManagerButton, {
-        tooltipTitle: tooltipTitle,
-        onClick: onClickDelete,
-        testId: "deleteButtonMedium",
-        isEnabled: isEnabled,
-        icon: /*#__PURE__*/React__namespace.createElement(theme.Delete, null)
-      }, /*#__PURE__*/React__namespace.createElement(material.Button, {
-        className: "deleteBtnMedium",
-        variant: "tertiary",
-        onClick: onClickDelete,
-        startIcon: /*#__PURE__*/React__namespace.createElement(theme.Delete, null),
-        sx: __assign({
-          display: 'none'
-        }, sx)
-      }, "Delete")), /*#__PURE__*/React__namespace.createElement(ManagerButton, {
-        tooltipTitle: tooltipTitle,
-        onClick: onClickDelete,
-        icon: /*#__PURE__*/React__namespace.createElement(theme.Delete, null),
-        testId: "deleteButton",
-        isEnabled: isEnabled,
-        sx: sx
-      }));
-    };
-
-    /* *
-     * Licensed under the Apache License, Version 2.0 (the "License");
-     * you may not use this file except in compliance with the License.
-     * You may obtain a copy of the License at
-     *
-     *     http://www.apache.org/licenses/LICENSE-2.0
-     *
-     * Unless required by applicable law or agreed to in writing, software
-     * distributed under the License is distributed on an "AS IS" BASIS,
-     * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-     * See the License for the specific language governing permissions and
-     * limitations under the License.
-     *
-     * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
-     * Copyright 2021 - Finnish Meteorological Institute (FMI)
-     * */
-    var EnableButton = function EnableButton(_a) {
-      var isEnabled = _a.isEnabled,
-          title = _a.title,
-          onChangeEnableLayer = _a.onChangeEnableLayer,
-          className = _a.className,
-          _b = _a.id,
-          id = _b === void 0 ? 'enableButton' : _b;
-
-      var onClick = function onClick(event) {
-        event.stopPropagation();
-        onChangeEnableLayer(!isEnabled);
-      };
-
-      return /*#__PURE__*/React__namespace.createElement(ManagerButton, {
-        tooltipTitle: title,
-        onClick: onClick,
-        icon: /*#__PURE__*/React__namespace.createElement(material.Checkbox, {
-          sx: {
-            color: 'inherit',
-            padding: 0.5,
-            borderRadius: 1.25,
-            '&.Mui-focusVisible': {
-              backgroundColor: 'geowebColors.buttons.tool.mouseOver.fill'
-            },
-            '&:hover': {
-              backgroundColor: 'transparent!important'
-            },
-            '&.Mui-checked': {
-              color: 'inherit'
-            }
-          },
-          icon: /*#__PURE__*/React__namespace.createElement(theme.VisibilityOff, null),
-          checkedIcon: /*#__PURE__*/React__namespace.createElement(theme.Visibility, null),
-          checked: isEnabled,
-          disableFocusRipple: true,
-          tabIndex: -1
-        }),
-        testId: id,
-        isEnabled: isEnabled,
-        className: className
-      });
+      }) : /*#__PURE__*/React__namespace.createElement("div", null) // Needed to make the menu work without any menuItems
+      , children));
     };
 
     /* *
@@ -2891,7 +2774,7 @@
         },
         '&.Mui-focused .MuiSelect-select': {
           outline: function outline(theme) {
-            return theme.palette.geowebColors.buttons.focusDefault.outline;
+            return theme.palette.geowebColors.buttons.tool.focus.outline;
           },
           borderRadius: 0
         },
@@ -2913,7 +2796,7 @@
       },
       '&.Mui-focused .MuiSelect-select': {
         outline: function outline(theme) {
-          return theme.palette.geowebColors.buttons.focusDefault.outline;
+          return theme.palette.geowebColors.buttons.tool.focus.outline;
         },
         borderRadius: 0,
         backgroundColor: 'geowebColors.buttons.tool.mouseOver.fill'
@@ -2923,7 +2806,7 @@
       },
       '&:focus&.MuiButton-root': {
         border: function border(theme) {
-          return theme.palette.geowebColors.buttons.focusDefault.outline;
+          return theme.palette.geowebColors.buttons.tool.focus.outline;
         },
         backgroundColor: 'geowebColors.buttons.tool.mouseOver.fill',
         transition: 'border'
@@ -2971,7 +2854,10 @@
 
       var onWheel = React__namespace.useCallback(function (event) {
         if (requiresCtrlToChange && (event.ctrlKey || event.metaKey) || !requiresCtrlToChange) {
-          if (selectOpen) return;
+          if (selectOpen) {
+            return;
+          }
+
           var direction = event.deltaY < 0 ? 1 : -1;
           var newIndex = currentIndex - direction;
 
@@ -2990,7 +2876,9 @@
         setSelectOpen(false);
       }, []);
       var onMouseEnter = React__namespace.useCallback(function () {
-        if (!selectOpen) setTooltipOpen(true);
+        if (!selectOpen) {
+          setTooltipOpen(true);
+        }
       }, [selectOpen, setTooltipOpen]);
       var onMouseLeave = React__namespace.useCallback(function () {
         setTooltipOpen(false);
@@ -3042,6 +2930,9 @@
                 },
                 '&:focus': {
                   backgroundColor: 'geowebColors.buttons.tool.activeMouseOver.fill'
+                },
+                '.MuiListItemIcon-root': {
+                  color: 'geowebColors.buttons.tool.active.color'
                 }
               },
               '&:after': {
@@ -3419,6 +3310,48 @@
 
       return new Date(yearOrIsoString, month, day, hours, minutes, seconds, milliseconds);
     };
+    /**
+     *
+     * @param date
+     * @param duration
+     * @returns {Date} the new Date
+     */
+
+    var add = function add(date, duration) {
+      return dateFns.add(date, duration);
+    };
+    /**
+     *
+     * @param date
+     * @param duration
+     * @returns {Date} the new Date
+     */
+
+    var sub = function sub(date, duration) {
+      return dateFns.sub(date, duration);
+    };
+    /**
+     * Finds the number of minuts between to dates
+     *
+     * @param dateLeft - the later date
+     * @param dateRight - the earlier date
+     * @returns {number} the number of minutes
+     */
+
+    var differenceInMinutes = function differenceInMinutes(dateLeft, dateRight) {
+      return dateFns.differenceInMinutes(dateLeft, dateRight);
+    };
+    /**
+     * Finds the number of hours between to dates
+     *
+     * @param dateLeft - the later date
+     * @param dateRight - the earlier date
+     * @returns {number} the number of hours
+     */
+
+    var differenceInHours = function differenceInHours(dateLeft, dateRight) {
+      return dateFns.differenceInHours(dateLeft, dateRight);
+    };
 
     /* *
      * Licensed under the Apache License, Version 2.0 (the "License");
@@ -3444,7 +3377,11 @@
         setUTCDate: setUTCDate,
         dateToString: dateToString,
         isBetween: isBetween,
-        createDate: createDate
+        createDate: createDate,
+        add: add,
+        sub: sub,
+        differenceInMinutes: differenceInMinutes,
+        differenceInHours: differenceInHours
     });
 
     exports.AlertBanner = AlertBanner;
@@ -3456,15 +3393,13 @@
     exports.ConfirmationServiceProvider = ConfirmationServiceProvider;
     exports.CustomAccordion = CustomAccordion;
     exports.CustomDialog = CustomDialog;
+    exports.CustomIconButton = CustomIconButton;
     exports.CustomSlider = CustomSlider;
     exports.CustomToggleButton = CustomToggleButton;
     exports.CustomTooltip = CustomTooltip;
     exports.DEFAULT_ERROR_MESSAGE = DEFAULT_ERROR_MESSAGE;
     exports.Draggable = DraggableComponent$1;
-    exports.EnableButton = EnableButton;
     exports.ErrorBoundary = ErrorBoundary;
-    exports.ManagerButton = ManagerButton;
-    exports.ManagerDeleteButton = ManagerDeleteButton;
     exports.Resizable = ResizeComponent;
     exports.StatusTag = StatusTag;
     exports.ToggleMenu = ToggleMenu;