@opengeoweb/shared 4.16.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';
@@ -95,15 +95,16 @@ var CustomDialog = function CustomDialog(_a) {
       _a$actions = _a.actions,
       actions = _a$actions === void 0 ? null : _a$actions,
       children = _a.children,
-      other = __rest(_a, ["title", "onClose", "description", "actions", "children"]);
+      sx = _a.sx,
+      other = __rest(_a, ["title", "onClose", "description", "actions", "children", "sx"]);
 
   return /*#__PURE__*/React.createElement(Dialog, Object.assign({
     "data-testid": "customDialog",
     PaperProps: {
-      sx: {
+      sx: Object.assign({
         width: '560px',
         margin: 2.5
-      }
+      }, sx)
     },
     // fix for briefly showing default options when closing dialog
     transitionDuration: 0,
@@ -122,14 +123,8 @@ var CustomDialog = function CustomDialog(_a) {
     }
   }, /*#__PURE__*/React.createElement(Typography, {
     sx: {
-      fontSize: {
-        xs: '16px',
-        sm: '34px'
-      },
-      fontWeight: {
-        xs: 500,
-        sm: 400
-      }
+      fontSize: '16px',
+      fontWeight: 500
     },
     "data-testid": "customDialog-title",
     component: "span"
@@ -220,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), {
@@ -246,8 +240,7 @@ var ConfirmationDialog = function ConfirmationDialog(_a) {
         });
       },
       onClick: onSubmit,
-      autoFocus: !disableAutoFocus,
-      disableFocusRipple: true
+      autoFocus: !disableAutoFocus
     }, confirmLabel))
   }, rest), content);
 };
@@ -602,49 +595,52 @@ var adjustPosition = function adjustPosition(bbox, containingView, position, set
       x: position.x + diffX,
       y: position.y + diffY
     });
-  } // bottom right
-  else if (bbox.right >= containingView.right && bbox.bottom >= containingView.bottom) {
-      var _diffX = containingView.right - bbox.right;
-
-      var _diffY = containingView.bottom - bbox.bottom;
+  } else if ( // bottom right
+  bbox.right >= containingView.right && bbox.bottom >= containingView.bottom) {
+    var _diffX = containingView.right - bbox.right;
 
-      setPosition({
-        x: position.x + _diffX,
-        y: position.y + _diffY
-      });
-    } // left screen
-    else if (bbox.x < containingView.x || isHorizontallyLarger) {
-        var _diffX2 = containingView.x - bbox.x;
+    var _diffY = containingView.bottom - bbox.bottom;
 
-        setPosition(Object.assign(Object.assign({}, position), {
-          x: position.x + _diffX2
-        }));
-      } // right screen
-      else if (bbox.right >= containingView.right) {
-          var _diffX3 = containingView.right - bbox.right;
-
-          setPosition(Object.assign(Object.assign({}, position), {
-            x: position.x + _diffX3
-          }));
-        } // top screen
-        else if (bbox.y < containingView.y || isVerticallyLarger) {
-            var _diffY2 = containingView.y - bbox.y;
-
-            setPosition(Object.assign(Object.assign({}, position), {
-              y: position.y + _diffY2
-            }));
-          } // bottom screen
-          else if (bbox.bottom >= containingView.bottom) {
-              var _diffY3 = containingView.bottom - bbox.bottom;
-
-              setPosition(Object.assign(Object.assign({}, position), {
-                y: position.y + _diffY3
-              }));
-            }
+    setPosition({
+      x: position.x + _diffX,
+      y: position.y + _diffY
+    });
+  } else if (bbox.x < containingView.x || isHorizontallyLarger) {
+    // left screen
+    var _diffX2 = containingView.x - bbox.x;
+
+    setPosition(Object.assign(Object.assign({}, position), {
+      x: position.x + _diffX2
+    }));
+  } else if (bbox.right >= containingView.right) {
+    // right screen
+    var _diffX3 = containingView.right - bbox.right;
+
+    setPosition(Object.assign(Object.assign({}, position), {
+      x: position.x + _diffX3
+    }));
+  } else if (bbox.y < containingView.y || isVerticallyLarger) {
+    // top screen
+    var _diffY2 = containingView.y - bbox.y;
+
+    setPosition(Object.assign(Object.assign({}, position), {
+      y: position.y + _diffY2
+    }));
+  } else if (bbox.bottom >= containingView.bottom) {
+    // bottom screen
+    var _diffY3 = containingView.bottom - bbox.bottom;
+
+    setPosition(Object.assign(Object.assign({}, position), {
+      y: position.y + _diffY3
+    }));
+  }
 };
 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);
@@ -964,14 +960,17 @@ var AppHeader = function AppHeader(_ref2) {
       userMenu = _ref2.userMenu,
       workspaceTopBar = _ref2.workspaceTopBar,
       _ref2$title = _ref2.title,
-      title = _ref2$title === void 0 ? 'GeoWeb' : _ref2$title;
+      title = _ref2$title === void 0 ? 'GeoWeb' : _ref2$title,
+      onClick = _ref2.onClick;
   return /*#__PURE__*/React__default.createElement(Box, {
     component: "header",
     sx: styles$5.header
   }, /*#__PURE__*/React__default.createElement(Box, {
+    onClick: onClick,
     sx: {
       display: 'inherit',
-      alignItems: 'center'
+      alignItems: 'center',
+      cursor: onClick ? 'pointer' : 'auto'
     }
   }, /*#__PURE__*/React__default.createElement(GeoWebLogo, {
     style: {
@@ -1181,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, {
@@ -1894,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,
@@ -1905,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;
@@ -1980,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',
@@ -2463,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('.');
 
@@ -2547,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');
     });
@@ -2745,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,
@@ -2823,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';
@@ -2848,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);
 
@@ -2870,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.
@@ -3085,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;
 
@@ -3104,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);
@@ -3156,6 +3061,9 @@ var TooltipSelect = function TooltipSelect(_a) {
             },
             '&:focus': {
               backgroundColor: 'geowebColors.buttons.tool.activeMouseOver.fill'
+            },
+            '.MuiListItemIcon-root': {
+              color: 'geowebColors.buttons.tool.active.color'
             }
           },
           '&:after': {
@@ -3539,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

@@ -169,15 +169,16 @@
           _c = _a.actions,
           actions = _c === void 0 ? null : _c,
           children = _a.children,
-          other = __rest(_a, ["title", "onClose", "description", "actions", "children"]);
+          sx = _a.sx,
+          other = __rest(_a, ["title", "onClose", "description", "actions", "children", "sx"]);
 
       return /*#__PURE__*/React__namespace.createElement(material.Dialog, __assign({
         "data-testid": "customDialog",
         PaperProps: {
-          sx: {
+          sx: __assign({
             width: '560px',
             margin: 2.5
-          }
+          }, sx)
         },
         // fix for briefly showing default options when closing dialog
         transitionDuration: 0,
@@ -196,14 +197,8 @@
         }
       }, /*#__PURE__*/React__namespace.createElement(material.Typography, {
         sx: {
-          fontSize: {
-            xs: '16px',
-            sm: '34px'
-          },
-          fontWeight: {
-            xs: 500,
-            sm: 400
-          }
+          fontSize: '16px',
+          fontWeight: 500
         },
         "data-testid": "customDialog-title",
         component: "span"
@@ -294,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), {
@@ -320,8 +314,7 @@
             });
           },
           onClick: onSubmit,
-          autoFocus: !disableAutoFocus,
-          disableFocusRipple: true
+          autoFocus: !disableAutoFocus
         }, confirmLabel))
       }, rest), content);
     };
@@ -471,43 +464,46 @@
           x: position.x + diffX,
           y: position.y + diffY
         });
-      } // bottom right
-      else if (bbox.right >= containingView.right && bbox.bottom >= containingView.bottom) {
-          var diffX = containingView.right - bbox.right;
-          var diffY = containingView.bottom - bbox.bottom;
-          setPosition({
-            x: position.x + diffX,
-            y: position.y + diffY
-          });
-        } // left screen
-        else if (bbox.x < containingView.x || isHorizontallyLarger) {
-            var diffX = containingView.x - bbox.x;
-            setPosition(__assign(__assign({}, position), {
-              x: position.x + diffX
-            }));
-          } // right screen
-          else if (bbox.right >= containingView.right) {
-              var diffX = containingView.right - bbox.right;
-              setPosition(__assign(__assign({}, position), {
-                x: position.x + diffX
-              }));
-            } // top screen
-            else if (bbox.y < containingView.y || isVerticallyLarger) {
-                var diffY = containingView.y - bbox.y;
-                setPosition(__assign(__assign({}, position), {
-                  y: position.y + diffY
-                }));
-              } // bottom screen
-              else if (bbox.bottom >= containingView.bottom) {
-                  var diffY = containingView.bottom - bbox.bottom;
-                  setPosition(__assign(__assign({}, position), {
-                    y: position.y + diffY
-                  }));
-                }
+      } else if ( // bottom right
+      bbox.right >= containingView.right && bbox.bottom >= containingView.bottom) {
+        var diffX = containingView.right - bbox.right;
+        var diffY = containingView.bottom - bbox.bottom;
+        setPosition({
+          x: position.x + diffX,
+          y: position.y + diffY
+        });
+      } else if (bbox.x < containingView.x || isHorizontallyLarger) {
+        // left screen
+        var diffX = containingView.x - bbox.x;
+        setPosition(__assign(__assign({}, position), {
+          x: position.x + diffX
+        }));
+      } else if (bbox.right >= containingView.right) {
+        // right screen
+        var diffX = containingView.right - bbox.right;
+        setPosition(__assign(__assign({}, position), {
+          x: position.x + diffX
+        }));
+      } else if (bbox.y < containingView.y || isVerticallyLarger) {
+        // top screen
+        var diffY = containingView.y - bbox.y;
+        setPosition(__assign(__assign({}, position), {
+          y: position.y + diffY
+        }));
+      } else if (bbox.bottom >= containingView.bottom) {
+        // bottom screen
+        var diffY = containingView.bottom - bbox.bottom;
+        setPosition(__assign(__assign({}, position), {
+          y: position.y + diffY
+        }));
+      }
     };
     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);
@@ -844,14 +840,17 @@
           userMenu = _a.userMenu,
           workspaceTopBar = _a.workspaceTopBar,
           _b = _a.title,
-          title = _b === void 0 ? 'GeoWeb' : _b;
+          title = _b === void 0 ? 'GeoWeb' : _b,
+          onClick = _a.onClick;
       return /*#__PURE__*/React__default["default"].createElement(material.Box, {
         component: "header",
         sx: styles$5.header
       }, /*#__PURE__*/React__default["default"].createElement(material.Box, {
+        onClick: onClick,
         sx: {
           display: 'inherit',
-          alignItems: 'center'
+          alignItems: 'center',
+          cursor: onClick ? 'pointer' : 'auto'
         }
       }, /*#__PURE__*/React__default["default"].createElement(theme.GeoWebLogo, {
         style: {
@@ -1061,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, {
@@ -1691,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() {
@@ -1768,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) {
@@ -1802,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');
@@ -1851,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',
@@ -2320,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('.');
 
@@ -2419,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');
         });
@@ -2616,7 +2628,10 @@
         anchorEl: anchorEl,
         open: isOpen,
         onClose: function onClose(event, reason) {
-          if (reason === 'tabKeyDown') return;
+          if (reason === 'tabKeyDown') {
+            return;
+          }
+
           handleClose(event);
         },
         anchorOrigin: anchorOrigin,
@@ -2694,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';
@@ -2719,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);
 
@@ -2741,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.
@@ -2973,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;
 
@@ -2992,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);
@@ -3044,6 +2949,9 @@
                 },
                 '&:focus': {
                   backgroundColor: 'geowebColors.buttons.tool.activeMouseOver.fill'
+                },
+                '.MuiListItemIcon-root': {
+                  color: 'geowebColors.buttons.tool.active.color'
                 }
               },
               '&:after': {
@@ -3463,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/AppHeader/AppHeader.d.ts

@@ -4,6 +4,7 @@ interface AppHeaderProps {
     userMenu?: React.ReactNode;
     workspaceTopBar?: React.ReactNode;
     title?: string;
+    onClick?: () => void;
 }
 declare const AppHeader: React.FC<AppHeaderProps>;
 export default AppHeader;

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.16.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.16.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: () => 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';