@opengeoweb/shared 4.17.0 → 4.18.0

package/index.esm.js

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import React__default, { useRef } from 'react';
-import { Box, Typography, Dialog, DialogTitle, IconButton, DialogContent, DialogActions, Button, CircularProgress, Alert, AlertTitle, useTheme, Link, Avatar as Avatar$1, Paper, ClickAwayListener, MenuList, MenuItem, Grid, RadioGroup, FormControlLabel, Radio, Tooltip, List, ListItem, Tabs, Tab, Backdrop, Slider, ToggleButton, Menu, ListSubheader, ListItemIcon, Checkbox, Select, Accordion, AccordionSummary, AccordionDetails } from '@mui/material';
-import { Close, Exclamation, Success, Info, ChevronRight, GeoWebLogo, Resize, useThemeContext, DragHandle, ArrowLeft, ArrowRight, KeyOption, ArrowUp, ArrowDown, KeyCommand, Options, Delete, VisibilityOff, Visibility, ChevronDown } from '@opengeoweb/theme';
+import { Box, Typography, Dialog, DialogTitle, IconButton, DialogContent, DialogActions, Button, CircularProgress, Alert, AlertTitle, useTheme, Link, Avatar as Avatar$1, Paper, ClickAwayListener, MenuList, MenuItem, Grid, RadioGroup, FormControlLabel, Radio, Tooltip, List, ListItem, Tabs, Tab, Backdrop, Slider, ToggleButton, Menu, ListSubheader, ListItemIcon, Select, Accordion, AccordionSummary, AccordionDetails } from '@mui/material';
+import { Close, Exclamation, Success, Info, ChevronRight, GeoWebLogo, Resize, useThemeContext, DragHandle, ArrowLeft, ArrowRight, KeyOption, ArrowUp, ArrowDown, KeyCommand, Options, ChevronDown } from '@opengeoweb/theme';
 import { throttle } from 'lodash';
 import Draggable from 'react-draggable';
 import { Resizable } from 're-resizable';
@@ -215,8 +215,7 @@ var ConfirmationDialog = function ConfirmationDialog(_a) {
       },
       onClick: function onClick() {
         return onClose('CANCELLED');
-      },
-      disableFocusRipple: true
+      }
     }, cancelLabel), isLoading ? /*#__PURE__*/React.createElement(Box, {
       "data-testid": "confirm-dialog-spinner",
       sx: Object.assign(Object.assign({}, confirmStyle), {
@@ -241,8 +240,7 @@ var ConfirmationDialog = function ConfirmationDialog(_a) {
         });
       },
       onClick: onSubmit,
-      autoFocus: !disableAutoFocus,
-      disableFocusRipple: true
+      autoFocus: !disableAutoFocus
     }, confirmLabel))
   }, rest), content);
 };
@@ -639,7 +637,10 @@ var adjustPosition = function adjustPosition(bbox, containingView, position, set
 };
 var useMakeSureContainerStaysInsideWindow = function useMakeSureContainerStaysInsideWindow(nodeRef, position, setPosition) {
   var onResizeWindow = React__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);
@@ -1179,8 +1180,8 @@ var ErrorBoundary = /*#__PURE__*/function (_React$Component) {
         return /*#__PURE__*/React.createElement(Box, {
           sx: {
             whiteSpace: 'pre-wrap',
-            width: 'inherit',
-            height: 'inherit',
+            width: '100%',
+            height: '100%',
             overflowY: 'scroll'
           }
         }, /*#__PURE__*/React.createElement(AlertBanner, {
@@ -1892,6 +1893,10 @@ var DraggableComponent = function DraggableComponent(_a) {
       onResizeStop = _a$onResizeStop === void 0 ? function () {} : _a$onResizeStop,
       _a$onDragEnd = _a.onDragEnd,
       onDragEnd = _a$onDragEnd === void 0 ? function () {} : _a$onDragEnd,
+      _a$onFocus = _a.onFocus,
+      onFocus = _a$onFocus === void 0 ? function () {} : _a$onFocus,
+      _a$onBlur = _a.onBlur,
+      onBlur = _a$onBlur === void 0 ? function () {} : _a$onBlur,
       _a$order = _a.order,
       order = _a$order === void 0 ? 1 : _a$order,
       _a$source = _a.source,
@@ -1903,7 +1908,7 @@ var DraggableComponent = function DraggableComponent(_a) {
       className = _a.className,
       _a$sx = _a.sx,
       sx = _a$sx === void 0 ? {} : _a$sx,
-      props = __rest(_a, ["title", "bounds", "cancel", "headerSize", "startSize", "startPosition", "children", "isOpen", "onClose", "initialMaxHeight", "onChangeSize", "onMouseDown", "onResizeStop", "onDragEnd", "order", "source", "leftHeaderComponent", "rightHeaderComponent", "className", "sx"]);
+      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;
@@ -1978,6 +1983,9 @@ var DraggableComponent = function DraggableComponent(_a) {
     handle: ".".concat(headerClassName),
     onMouseDown: onMouseDown
   }, /*#__PURE__*/React__default.createElement(Box, {
+    tabIndex: -1,
+    onFocus: onFocus,
+    onBlur: onBlur,
     sx: Object.assign(Object.assign(Object.assign({
       position: 'absolute',
       pointerEvents: 'all',
@@ -2461,7 +2469,10 @@ var useUserMenu = function useUserMenu() {
  * 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('.');
 
@@ -2545,7 +2556,10 @@ var CustomSlider = function CustomSlider(_a) {
         first = _reverse2[0],
         rest = _reverse2.slice(1);
 
-    if (first) first.classList.add('selectedLabel');
+    if (first) {
+      first.classList.add('selectedLabel');
+    }
+
     rest.forEach(function (element) {
       return element.classList.remove('selectedLabel');
     });
@@ -2743,7 +2757,10 @@ var ToggleMenu = function ToggleMenu(_ref) {
     anchorEl: anchorEl,
     open: isOpen,
     onClose: function onClose(event, reason) {
-      if (reason === 'tabKeyDown') return;
+      if (reason === 'tabKeyDown') {
+        return;
+      }
+
       handleClose(event);
     },
     anchorOrigin: anchorOrigin,
@@ -2821,13 +2838,6 @@ var makeButtonStyles = function makeButtonStyles(isActive, isEnabled, isAccessib
     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';
@@ -2846,12 +2856,11 @@ var ManagerButton = function ManagerButton(_a) {
       _a$isEnabled = _a.isEnabled,
       isEnabled = _a$isEnabled === void 0 ? true : _a$isEnabled,
       icon = _a.icon,
-      testId = _a.testId,
       _a$isAccessible = _a.isAccessible,
       isAccessible = _a$isAccessible === void 0 ? false : _a$isAccessible,
       sx = _a.sx,
       children = _a.children,
-      props = __rest(_a, ["tooltipTitle", "onClick", "isActive", "isEnabled", "icon", "testId", "isAccessible", "sx", "children"]);
+      props = __rest(_a, ["tooltipTitle", "onClick", "isActive", "isEnabled", "icon", "isAccessible", "sx", "children"]);
 
   var buttonStyles = makeButtonStyles(isActive, isEnabled, isAccessible);
 
@@ -2868,117 +2877,10 @@ var ManagerButton = function ManagerButton(_a) {
   }, children || /*#__PURE__*/React.createElement(IconButton, Object.assign({
     size: "small",
     onClick: handleClick,
-    "data-testid": testId,
-    sx: Object.assign(Object.assign({}, buttonStyles), sx),
-    disableFocusRipple: true
+    sx: Object.assign(Object.assign({}, buttonStyles), sx)
   }, 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(_ref) {
-  var tooltipTitle = _ref.tooltipTitle,
-      onClickDelete = _ref.onClickDelete,
-      _ref$isEnabled = _ref.isEnabled,
-      isEnabled = _ref$isEnabled === void 0 ? true : _ref$isEnabled,
-      sx = _ref.sx;
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ManagerButton, {
-    tooltipTitle: tooltipTitle,
-    onClick: onClickDelete,
-    testId: "deleteButtonMedium",
-    isEnabled: isEnabled,
-    icon: /*#__PURE__*/React.createElement(Delete, null)
-  }, /*#__PURE__*/React.createElement(Button, {
-    className: "deleteBtnMedium",
-    variant: "tertiary",
-    onClick: onClickDelete,
-    startIcon: /*#__PURE__*/React.createElement(Delete, null),
-    sx: Object.assign({
-      display: 'none'
-    }, sx)
-  }, "Delete")), /*#__PURE__*/React.createElement(ManagerButton, {
-    tooltipTitle: tooltipTitle,
-    onClick: onClickDelete,
-    icon: /*#__PURE__*/React.createElement(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(_ref) {
-  var isEnabled = _ref.isEnabled,
-      title = _ref.title,
-      onChangeEnableLayer = _ref.onChangeEnableLayer,
-      className = _ref.className,
-      _ref$id = _ref.id,
-      id = _ref$id === void 0 ? 'enableButton' : _ref$id;
-
-  var onClick = function onClick(event) {
-    event.stopPropagation();
-    onChangeEnableLayer(!isEnabled);
-  };
-
-  return /*#__PURE__*/React.createElement(ManagerButton, {
-    tooltipTitle: title,
-    onClick: onClick,
-    icon: /*#__PURE__*/React.createElement(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.createElement(VisibilityOff, null),
-      checkedIcon: /*#__PURE__*/React.createElement(Visibility, null),
-      checked: isEnabled,
-      disableFocusRipple: true,
-      tabIndex: -1
-    }),
-    testId: id,
-    isEnabled: isEnabled,
-    className: className
-  });
-};
-
 /* *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -3083,7 +2985,10 @@ var TooltipSelect = function TooltipSelect(_a) {
 
   var onWheel = React.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;
 
@@ -3102,7 +3007,9 @@ var TooltipSelect = function TooltipSelect(_a) {
     setSelectOpen(false);
   }, []);
   var onMouseEnter = React.useCallback(function () {
-    if (!selectOpen) setTooltipOpen(true);
+    if (!selectOpen) {
+      setTooltipOpen(true);
+    }
   }, [selectOpen, setTooltipOpen]);
   var onMouseLeave = React.useCallback(function () {
     setTooltipOpen(false);
@@ -3154,6 +3061,9 @@ var TooltipSelect = function TooltipSelect(_a) {
             },
             '&:focus': {
               backgroundColor: 'geowebColors.buttons.tool.activeMouseOver.fill'
+            },
+            '.MuiListItemIcon-root': {
+              color: 'geowebColors.buttons.tool.active.color'
             }
           },
           '&:after': {
@@ -3537,4 +3447,4 @@ var index = /*#__PURE__*/Object.freeze({
     createDate: createDate
 });
 
-export { AlertBanner, AlertIcon, AppHeader, AppLayout, Avatar, ConfirmationDialog, ConfirmationServiceProvider, CustomAccordion, CustomDialog, CustomSlider, CustomToggleButton, CustomTooltip, DEFAULT_ERROR_MESSAGE, DraggableComponent$1 as Draggable, EnableButton, ErrorBoundary, ManagerButton, ManagerDeleteButton, ResizeComponent as Resizable, StatusTag, ToggleMenu, ToolButton, ToolContainer, DraggableComponent as ToolContainerDraggable, ToolFooter, ToolHeader, TooltipSelect, UserMenu, UserMenuItemCheatSheet, MenuItemTheme as UserMenuItemTheme, adjustPosition, calculateDialogSizeAndPosition, index as dateUtils, defaultDelay, getAxiosErrorMessage, getAxiosWarningMessage, getErrorMessage, getInitials, getPosition, getWarningMessage, isAxiosError, showPrompt, sliderHeaderStyle, tooltipContainerStyles, useConfirmationDialog, useControlledTooltip, useDialogActions, useIsMounted, useMakeSureContainerStaysInsideWindow, usePoller, usePreventBrowserClose, usePrevious, useUserMenu, withEggs };
+export { AlertBanner, AlertIcon, AppHeader, AppLayout, Avatar, ConfirmationDialog, ConfirmationServiceProvider, CustomAccordion, CustomDialog, CustomSlider, CustomToggleButton, CustomTooltip, DEFAULT_ERROR_MESSAGE, DraggableComponent$1 as Draggable, ErrorBoundary, ManagerButton, ResizeComponent as Resizable, StatusTag, ToggleMenu, ToolButton, ToolContainer, DraggableComponent as ToolContainerDraggable, ToolFooter, ToolHeader, TooltipSelect, UserMenu, UserMenuItemCheatSheet, MenuItemTheme as UserMenuItemTheme, adjustPosition, calculateDialogSizeAndPosition, index as dateUtils, defaultDelay, getAxiosErrorMessage, getAxiosWarningMessage, getErrorMessage, getInitials, getPosition, getWarningMessage, isAxiosError, showPrompt, sliderHeaderStyle, tooltipContainerStyles, useConfirmationDialog, useControlledTooltip, useDialogActions, useIsMounted, useMakeSureContainerStaysInsideWindow, usePoller, usePreventBrowserClose, usePrevious, useUserMenu, withEggs };

package/index.umd.js

@@ -289,8 +289,7 @@
           },
           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), {
@@ -315,8 +314,7 @@
             });
           },
           onClick: onSubmit,
-          autoFocus: !disableAutoFocus,
-          disableFocusRipple: true
+          autoFocus: !disableAutoFocus
         }, confirmLabel))
       }, rest), content);
     };
@@ -502,7 +500,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 +1060,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, {
@@ -1689,8 +1690,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 +1767,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 +1805,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 +1854,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 +2326,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 +2428,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 +2628,10 @@
         anchorEl: anchorEl,
         open: isOpen,
         onClose: function onClose(event, reason) {
-          if (reason === 'tabKeyDown') return;
+          if (reason === 'tabKeyDown') {
+            return;
+          }
+
           handleClose(event);
         },
         anchorOrigin: anchorOrigin,
@@ -2692,13 +2709,6 @@
         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';
@@ -2717,12 +2727,11 @@
           _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"]);
+          props = __rest(_a, ["tooltipTitle", "onClick", "isActive", "isEnabled", "icon", "isAccessible", "sx", "children"]);
 
       var buttonStyles = makeButtonStyles(isActive, isEnabled, isAccessible);
 
@@ -2739,117 +2748,10 @@
       }, children || /*#__PURE__*/React__namespace.createElement(material.IconButton, __assign({
         size: "small",
         onClick: handleClick,
-        "data-testid": testId,
-        sx: __assign(__assign({}, buttonStyles), sx),
-        disableFocusRipple: true
+        sx: __assign(__assign({}, buttonStyles), sx)
       }, 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
-      });
-    };
-
     /* *
      * Licensed under the Apache License, Version 2.0 (the "License");
      * you may not use this file except in compliance with the License.
@@ -2971,7 +2873,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 +2895,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 +2949,9 @@
                 },
                 '&:focus': {
                   backgroundColor: 'geowebColors.buttons.tool.activeMouseOver.fill'
+                },
+                '.MuiListItemIcon-root': {
+                  color: 'geowebColors.buttons.tool.active.color'
                 }
               },
               '&:after': {
@@ -3461,10 +3371,8 @@
     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;

package/lib/components/ManagerButton/ManagerButton.d.ts

@@ -2,11 +2,9 @@ import * as React from 'react';
 import { IconButtonProps } from '@mui/material';
 export interface ManagerButtonProps extends IconButtonProps {
     tooltipTitle: string;
-    onClick?: (event: React.MouseEvent) => void;
     isActive?: boolean;
     isEnabled?: boolean;
     icon: React.ReactNode;
-    testId: string;
     isAccessible?: boolean;
     children?: React.ReactElement;
 }

package/lib/components/ToolContainer/ToolContainerDraggable.d.ts

@@ -20,6 +20,8 @@ interface DraggableComponentProps extends Omit<ResizableComponentProps, 'bounds'
     onChangeSize?: (size: Size) => void;
     onDragEnd?: (position: DraggablePosition, size: Size) => void;
     onMouseDown?: (event: MouseEvent) => void;
+    onFocus?: (event: React.FocusEvent<HTMLElement>) => void;
+    onBlur?: (event: React.FocusEvent<HTMLElement>) => void;
     bounds?: 'parent' | string;
     cancel?: string;
     order?: number;

package/lib/components/index.d.ts

@@ -12,8 +12,6 @@ export * from './CustomToggleButton';
 export * from './ToolButton';
 export * from './ToggleMenu';
 export * from './ManagerButton';
-export * from './ManagerDeleteButton';
-export * from './EnableButton';
 export * from './AlertIcon';
 export * from './TooltipSelect';
 export * from './Avatar';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opengeoweb/shared",
-  "version": "4.17.0",
+  "version": "4.18.0",
   "description": "GeoWeb shared library with shared components and utils for the opengeoweb project",
   "license": "Apache-2.0",
   "repository": {
@@ -14,7 +14,7 @@
   "peerDependencies": {
     "react": "^18.2.0",
     "@mui/material": "^5.10.8",
-    "@opengeoweb/theme": "4.17.0",
+    "@opengeoweb/theme": "4.18.0",
     "react-draggable": "^4.4.5",
     "re-resizable": "^6.9.0",
     "@redux-eggs/core": "^2.2.0",

package/lib/components/EnableButton/EnableButton.d.ts

@@ -1,10 +0,0 @@
-import * as React from 'react';
-interface EnableLayerProps {
-    isEnabled?: boolean;
-    title: string;
-    onChangeEnableLayer: (enable: boolean) => void;
-    className?: string;
-    id?: string;
-}
-export declare const EnableButton: React.FC<EnableLayerProps>;
-export {};

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

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

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

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

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

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

package/lib/components/ManagerDeleteButton/ManagerDeleteButton.d.ts

@@ -1,9 +0,0 @@
-import * as React from 'react';
-import { IconButtonProps } from '@mui/material';
-interface DeleteButtonProps extends IconButtonProps {
-    tooltipTitle: string;
-    onClickDelete: (event: React.MouseEvent) => void;
-    isEnabled?: boolean;
-}
-export declare const ManagerDeleteButton: React.FC<DeleteButtonProps>;
-export {};

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

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

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

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

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

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