@opengeoweb/shared 4.4.0 → 4.5.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, Grid, useTheme, Link, Avatar as Avatar$1, Paper, ClickAwayListener, MenuList, MenuItem, RadioGroup, FormControlLabel, Radio, Tooltip, List, ListItem, Tabs, Tab, Backdrop, Slider, ToggleButton, Menu, ListItemIcon, Checkbox, Select } from '@mui/material';
-import { Close, Exclamation, Success, Info, ChevronRight, GeoWebLogo, Resize, useThemeContext, DragHandle, ArrowLeft, ArrowRight, KeyOption, ArrowUp, ArrowDown, KeyCommand, Options, Delete, VisibilityOff, Visibility } from '@opengeoweb/theme';
+import { Box, Typography, Dialog, DialogTitle, IconButton, DialogContent, DialogActions, Button, CircularProgress, Alert, AlertTitle, Grid, useTheme, Link, Avatar as Avatar$1, Paper, ClickAwayListener, MenuList, MenuItem, RadioGroup, FormControlLabel, Radio, Tooltip, List, ListItem, Tabs, Tab, Backdrop, Slider, ToggleButton, Menu, 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 { useFormContext } from 'react-hook-form';
 import { isEmpty, errorMessages } from '@opengeoweb/form-fields';
 import { throttle } from 'lodash';
@@ -630,39 +630,43 @@ var useDraftFormHelpers = function useDraftFormHelpers() {
  * Copyright 2022 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
  * Copyright 2022 - Finnish Meteorological Institute (FMI)
  * */
-var useMakeSureContainerStaysInsideWindow = function useMakeSureContainerStaysInsideWindow(nodeRef, position, setPosition) {
-  var onResizeWindow = React__default.useCallback(function (event) {
-    if (!nodeRef.current) return;
-    var bbox = nodeRef.current.firstChild.getBoundingClientRect();
-    var windowTarget = event.currentTarget;
-    if (!windowTarget) return;
-    var innerHeight = windowTarget.innerHeight,
-        innerWidth = windowTarget.innerWidth;
-    var isHorizontallyLarger = bbox.width > innerWidth;
-    var isVerticallyLarger = bbox.height > innerHeight; // left screen
-
-    if (bbox.x < 0 || isHorizontallyLarger) {
+var adjustPosition = function adjustPosition(bbox, containingView, position, setPosition) {
+  var isHorizontallyLarger = bbox.width > containingView.width;
+  var isVerticallyLarger = bbox.height > containingView.height; // left screen
+
+  if (bbox.x < containingView.x || isHorizontallyLarger) {
+    var diffX = containingView.x - bbox.x;
+    setPosition(Object.assign(Object.assign({}, position), {
+      x: position.x + diffX
+    }));
+  } // right screen
+  else if (bbox.right >= containingView.right) {
+      var _diffX = containingView.right - bbox.right;
+
       setPosition(Object.assign(Object.assign({}, position), {
-        x: position.x - bbox.x
+        x: position.x + _diffX
       }));
-    } // right screen
-    else if (bbox.x + bbox.width >= innerWidth) {
-        var diffX = innerWidth - bbox.x - bbox.width;
+    } // top screen
+    else if (bbox.y < containingView.y || isVerticallyLarger) {
+        var diffY = containingView.y - bbox.y;
         setPosition(Object.assign(Object.assign({}, position), {
-          x: position.x + diffX
+          y: position.y + diffY
         }));
-      } // top screen
-      else if (bbox.y < 0 || isVerticallyLarger) {
+      } // bottom screen
+      else if (bbox.bottom >= containingView.bottom) {
+          var _diffY = containingView.bottom - bbox.bottom;
+
           setPosition(Object.assign(Object.assign({}, position), {
-            y: position.y - bbox.y
+            y: position.y + _diffY
           }));
-        } // bottom screen
-        else if (bbox.y + bbox.height >= innerHeight) {
-            var diffY = innerHeight - bbox.y - bbox.height;
-            setPosition(Object.assign(Object.assign({}, position), {
-              y: position.y + diffY
-            }));
-          }
+        }
+};
+var useMakeSureContainerStaysInsideWindow = function useMakeSureContainerStaysInsideWindow(nodeRef, position, setPosition) {
+  var onResizeWindow = React__default.useCallback(function () {
+    if (!nodeRef.current) return;
+    var bbox = nodeRef.current.firstChild.getBoundingClientRect();
+    var containingView = nodeRef.current.parentElement.getBoundingClientRect();
+    adjustPosition(bbox, containingView, position, setPosition);
   }, [nodeRef, position, setPosition]);
   React__default.useEffect(function () {
     var throttledResize = throttle(onResizeWindow, 100);
@@ -1065,29 +1069,26 @@ var DraggableComponent$1 = function DraggableComponent(_a) {
  * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
  * Copyright 2021 - Finnish Meteorological Institute (FMI)
  * */
+var isDraggingClassName = 'is-dragging';
 
 var ResizeComponent = function ResizeComponent(_a) {
-  var _a$startPosition = _a.startPosition,
-      startPosition = _a$startPosition === void 0 ? {
-    left: undefined,
-    right: undefined,
-    top: undefined
-  } : _a$startPosition,
-      children = _a.children,
+  var children = _a.children,
       _a$onResizeStart = _a.onResizeStart,
       onResizeStart = _a$onResizeStart === void 0 ? function () {} : _a$onResizeStart,
+      _a$onResizeStop = _a.onResizeStop,
+      onResizeStop = _a$onResizeStop === void 0 ? function () {} : _a$onResizeStop,
       size = _a.size,
       setSize = _a.setSize,
       _a$minHeight = _a.minHeight,
       minHeight = _a$minHeight === void 0 ? 50 : _a$minHeight,
       _a$minWidth = _a.minWidth,
       minWidth = _a$minWidth === void 0 ? 50 : _a$minWidth,
-      props = __rest(_a, ["startPosition", "children", "onResizeStart", "size", "setSize", "minHeight", "minWidth"]);
+      props = __rest(_a, ["children", "onResizeStart", "onResizeStop", "size", "setSize", "minHeight", "minWidth"]);
 
   var theme = useTheme();
-  var isRightAligned = startPosition && startPosition.right !== null && startPosition.right !== undefined;
   var onStartResize = React__default.useCallback(function (event, _direction, node) {
     event.stopPropagation();
+    node.classList.add(isDraggingClassName);
 
     var _node$getBoundingClie = node.getBoundingClientRect(),
         width = _node$getBoundingClie.width,
@@ -1102,32 +1103,42 @@ var ResizeComponent = function ResizeComponent(_a) {
     node.style.height = "".concat(height, "px");
     onResizeStart();
   }, [onResizeStart, setSize]);
-  var onResizeStop = React__default.useCallback(function (_event, _direction, _ref, delta) {
+  var onStopResize = React__default.useCallback(function (event, direction, node, delta) {
+    node.classList.remove(isDraggingClassName);
     var width = parseInt(size.width, 10) + delta.width;
     var height = parseInt(size.height, 10) + delta.height;
     setSize({
       width: width,
       height: height
     });
-  }, [setSize, size]);
+    onResizeStop(event, direction, node, delta);
+  }, [setSize, onResizeStop, size]);
   return /*#__PURE__*/React__default.createElement(Resizable // TODO: implement bounds https://gitlab.com/opengeoweb/opengeoweb/-/issues/1035
   , Object.assign({
     // TODO: implement bounds https://gitlab.com/opengeoweb/opengeoweb/-/issues/1035
     minHeight: minHeight,
     minWidth: minWidth,
     size: size,
-    onResizeStop: onResizeStop,
+    onResizeStop: onStopResize,
     handleComponent: {
       bottomRight: /*#__PURE__*/React__default.createElement(Resize, {
         style: {
           fill: "".concat(theme.palette.geowebColors.buttons.flat["default"].color)
-        }
+        },
+        sx: {
+          display: 'none'
+        },
+        className: "resizableHandle"
       }),
       bottomLeft: /*#__PURE__*/React__default.createElement(Resize, {
         isRightAligned: true,
         style: {
           fill: "".concat(theme.palette.geowebColors.buttons.flat["default"].color)
-        }
+        },
+        sx: {
+          display: 'none'
+        },
+        className: "resizableHandle"
       })
     },
     enable: {
@@ -1136,8 +1147,8 @@ var ResizeComponent = function ResizeComponent(_a) {
       bottom: false,
       left: false,
       topRight: false,
-      bottomRight: !isRightAligned,
-      bottomLeft: isRightAligned,
+      bottomRight: true,
+      bottomLeft: true,
       topLeft: false
     },
     onResizeStart: onStartResize
@@ -1412,6 +1423,41 @@ var ToolFooter = function ToolFooter() {
   });
 };
 
+var defaultDelay = 1000;
+var useControlledTooltip = function useControlledTooltip() {
+  var _React$useState = React.useState(false),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      tooltipOpen = _React$useState2[0],
+      setTooltipOpen = _React$useState2[1];
+
+  var _React$useState3 = React.useState(false),
+      _React$useState4 = _slicedToArray(_React$useState3, 2),
+      delayedTooltip = _React$useState4[0],
+      setDelayedTooltip = _React$useState4[1];
+
+  React.useEffect(function () {
+    if (tooltipOpen === true) {
+      var timer = setTimeout(function () {
+        return setDelayedTooltip(true);
+      }, defaultDelay);
+      return function () {
+        clearTimeout(timer);
+      };
+    }
+
+    setDelayedTooltip(false);
+    return function () {};
+  }, [tooltipOpen]);
+  return [delayedTooltip, setTooltipOpen];
+};
+var CustomTooltip = function CustomTooltip(props) {
+  return /*#__PURE__*/React.createElement(Tooltip, Object.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.
@@ -1453,7 +1499,8 @@ var getStyle = function getStyle(size) {
         return {
           fontSize: 20,
           fontWeight: 400,
-          padding: '8px'
+          padding: '4px 8px',
+          height: 40
         };
       }
 
@@ -1490,31 +1537,37 @@ var ToolHeader = function ToolHeader(_ref) {
       isDraggable = _ref$isDraggable === void 0 ? false : _ref$isDraggable,
       _ref$className = _ref.className,
       className = _ref$className === void 0 ? '' : _ref$className,
-      _ref$leftComponent = _ref.leftComponent,
-      leftComponent = _ref$leftComponent === void 0 ? null : _ref$leftComponent;
+      _ref$leftHeaderCompon = _ref.leftHeaderComponent,
+      leftHeaderComponent = _ref$leftHeaderCompon === void 0 ? null : _ref$leftHeaderCompon,
+      _ref$rightHeaderCompo = _ref.rightHeaderComponent,
+      rightHeaderComponent = _ref$rightHeaderCompo === void 0 ? null : _ref$rightHeaderCompo;
   var styles = getStyle(size);
-  var columnSizeIcon = leftComponent ? 3 : 1;
-  var columnSizeTitle = leftComponent ? 6 : 10;
+  var columnSizeIcon = leftHeaderComponent || rightHeaderComponent ? 4 : 1;
+  var columnSizeTitle = leftHeaderComponent || rightHeaderComponent ? 4 : 10;
   return /*#__PURE__*/React__default.createElement(Box, {
     component: "header",
     className: className,
     sx: {
       boxShadow: 1,
       backgroundColor: 'geowebColors.background.surface',
-      padding: styles.padding,
       zIndex: 2,
       cursor: isDraggable ? 'move' : null
     }
   }, /*#__PURE__*/React__default.createElement(Grid, {
     container: true,
-    alignItems: "center"
+    alignItems: "center",
+    sx: {
+      padding: styles.padding,
+      height: styles.height
+    }
   }, /*#__PURE__*/React__default.createElement(Grid, {
+    className: "header-left",
     item: true,
     xs: columnSizeIcon,
     sx: {
       paddingRight: 1
     }
-  }, isDraggable && size !== 'xxs' && !leftComponent && /*#__PURE__*/React__default.createElement(Grid, {
+  }, isDraggable && size !== 'xxs' && !leftHeaderComponent && /*#__PURE__*/React__default.createElement(Grid, {
     container: true,
     justifyContent: "flex-start"
   }, /*#__PURE__*/React__default.createElement(IconButton, {
@@ -1524,7 +1577,8 @@ var ToolHeader = function ToolHeader(_ref) {
     sx: Object.assign(Object.assign({}, iconStyle), {
       pointerEvents: 'none'
     })
-  }, /*#__PURE__*/React__default.createElement(DragHandle, null))), leftComponent && leftComponent), /*#__PURE__*/React__default.createElement(Grid, {
+  }, /*#__PURE__*/React__default.createElement(DragHandle, null))), leftHeaderComponent && leftHeaderComponent), /*#__PURE__*/React__default.createElement(Grid, {
+    className: "header-title",
     item: true,
     xs: columnSizeTitle
   }, /*#__PURE__*/React__default.createElement(Grid, {
@@ -1548,11 +1602,12 @@ var ToolHeader = function ToolHeader(_ref) {
       height: 12
     })
   }, /*#__PURE__*/React__default.createElement(DragHandle, null)))), /*#__PURE__*/React__default.createElement(Grid, {
+    className: "header-right",
     item: true,
     xs: columnSizeIcon,
     container: true,
     justifyContent: "flex-end"
-  }, onClose && /*#__PURE__*/React__default.createElement(Tooltip, {
+  }, rightHeaderComponent && rightHeaderComponent, onClose && /*#__PURE__*/React__default.createElement(CustomTooltip, {
     title: "Close",
     placement: "bottom",
     sx: {
@@ -1618,9 +1673,11 @@ var ToolContainer = function ToolContainer(_a) {
       elevation = _a$elevation === void 0 ? BASE_ELEVATION : _a$elevation,
       _a$headerClassName = _a.headerClassName,
       headerClassName = _a$headerClassName === void 0 ? '' : _a$headerClassName,
-      _a$leftComponent = _a.leftComponent,
-      leftComponent = _a$leftComponent === void 0 ? null : _a$leftComponent,
-      props = __rest(_a, ["title", "size", "children", "onClose", "isResizable", "isDraggable", "maxHeight", "elevation", "headerClassName", "leftComponent"]);
+      _a$leftHeaderComponen = _a.leftHeaderComponent,
+      leftHeaderComponent = _a$leftHeaderComponen === void 0 ? null : _a$leftHeaderComponen,
+      _a$rightHeaderCompone = _a.rightHeaderComponent,
+      rightHeaderComponent = _a$rightHeaderCompone === void 0 ? null : _a$rightHeaderCompone,
+      props = __rest(_a, ["title", "size", "children", "onClose", "isResizable", "isDraggable", "maxHeight", "elevation", "headerClassName", "leftHeaderComponent", "rightHeaderComponent"]);
 
   return /*#__PURE__*/React__default.createElement(Paper, Object.assign({
     elevation: elevation,
@@ -1631,7 +1688,8 @@ var ToolContainer = function ToolContainer(_a) {
     isDraggable: isDraggable,
     onClose: onClose,
     className: headerClassName,
-    leftComponent: leftComponent
+    leftHeaderComponent: leftHeaderComponent,
+    rightHeaderComponent: rightHeaderComponent
   })), /*#__PURE__*/React__default.createElement(Box, {
     sx: styles$2.content,
     style: {
@@ -1682,16 +1740,27 @@ var DraggableComponent = function DraggableComponent(_a) {
       onChangeSize = _a$onChangeSize === void 0 ? function () {} : _a$onChangeSize,
       _a$onMouseDown = _a.onMouseDown,
       onMouseDown = _a$onMouseDown === void 0 ? function () {} : _a$onMouseDown,
+      _a$onResizeStop = _a.onResizeStop,
+      onResizeStop = _a$onResizeStop === void 0 ? function () {} : _a$onResizeStop,
+      _a$onDragEnd = _a.onDragEnd,
+      onDragEnd = _a$onDragEnd === void 0 ? function () {} : _a$onDragEnd,
       _a$order = _a.order,
       order = _a$order === void 0 ? 1 : _a$order,
       _a$source = _a.source,
       source = _a$source === void 0 ? 'app' : _a$source,
-      _a$leftComponent = _a.leftComponent,
-      leftComponent = _a$leftComponent === void 0 ? null : _a$leftComponent,
-      props = __rest(_a, ["title", "bounds", "headerSize", "startSize", "startPosition", "children", "isOpen", "onClose", "initialMaxHeight", "onChangeSize", "onMouseDown", "order", "source", "leftComponent"]);
+      _a$leftHeaderComponen = _a.leftHeaderComponent,
+      leftHeaderComponent = _a$leftHeaderComponen === void 0 ? null : _a$leftHeaderComponen,
+      _a$rightHeaderCompone = _a.rightHeaderComponent,
+      rightHeaderComponent = _a$rightHeaderCompone === void 0 ? null : _a$rightHeaderCompone,
+      _a$hasElevation = _a.hasElevation,
+      hasElevation = _a$hasElevation === void 0 ? true : _a$hasElevation,
+      className = _a.className,
+      _a$sx = _a.sx,
+      sx = _a$sx === void 0 ? {} : _a$sx,
+      props = __rest(_a, ["title", "bounds", "headerSize", "startSize", "startPosition", "children", "isOpen", "onClose", "initialMaxHeight", "onChangeSize", "onMouseDown", "onResizeStop", "onDragEnd", "order", "source", "leftHeaderComponent", "rightHeaderComponent", "hasElevation", "className", "sx"]);
 
   var zIndex = (source === 'app' ? BASE_Z_INDEX : 1000) + order;
-  var elevation = BASE_ELEVATION + order;
+  var elevation = hasElevation ? BASE_ELEVATION + order : 0;
   var nodeRef = React__default.useRef(null);
 
   var _React$useState = React__default.useState({
@@ -1707,20 +1776,28 @@ var DraggableComponent = function DraggableComponent(_a) {
       size = _React$useState4[0],
       setSize = _React$useState4[1];
 
+  var isRightAligned = startPosition && startPosition.right !== null && startPosition.right !== undefined;
   var onStopDrag = React__default.useCallback(function (_event, position) {
     setPosition(position);
-  }, [setPosition]);
+    onDragEnd(position, size);
+  }, [setPosition, onDragEnd, size]);
 
   var _React$useState5 = React__default.useState(defaultInitialMaxHeight),
       _React$useState6 = _slicedToArray(_React$useState5, 2),
       initialMaxHeight = _React$useState6[0],
       setInitialMaxHeight = _React$useState6[1];
 
+  var _React$useState7 = React__default.useState(0),
+      _React$useState8 = _slicedToArray(_React$useState7, 2),
+      initialDragPositionX = _React$useState8[0],
+      setInitialDragPositionX = _React$useState8[1];
+
   var onStartResize = function onStartResize() {
     setInitialMaxHeight('initial');
+    setInitialDragPositionX(position.x);
   };
 
-  var onResize = React__default.useCallback(function (_event, _handle, node) {
+  var onResize = React__default.useCallback(function (_event, _handle, node, delta) {
     var _node$getBoundingClie = node.getBoundingClientRect(),
         width = _node$getBoundingClie.width,
         height = _node$getBoundingClie.height;
@@ -1728,11 +1805,74 @@ var DraggableComponent = function DraggableComponent(_a) {
     onChangeSize({
       width: width,
       height: height
-    });
-  }, [onChangeSize]);
+    }); // If dragging the same side as alignment, adjust position
+
+    if (isRightAligned && _handle === 'bottomRight') {
+      var newX = initialDragPositionX + delta.width; // eslint-disable-next-line no-param-reassign
+
+      node.parentNode.style.transform = "translate(".concat(newX, "px, ").concat(position.y, "px)");
+    } else if (!isRightAligned && _handle === 'bottomLeft') {
+      var _newX = initialDragPositionX - delta.width; // eslint-disable-next-line no-param-reassign
+
+
+      node.parentNode.style.transform = "translate(".concat(_newX, "px, ").concat(position.y, "px)");
+    }
+  }, [onChangeSize, initialDragPositionX, isRightAligned, position]);
+
+  var onStopResize = function onStopResize(_event, direction, node, delta) {
+    if (isRightAligned && direction === 'bottomRight') {
+      setPosition({
+        x: initialDragPositionX + delta.width,
+        y: position.y
+      });
+    } else if (!isRightAligned && direction === 'bottomLeft') {
+      setPosition({
+        x: initialDragPositionX - delta.width,
+        y: position.y
+      });
+    }
+
+    onResizeStop(_event, direction, node, delta);
+  };
+
   useMakeSureContainerStaysInsideWindow(nodeRef, position, setPosition);
   var toolcontainerId = React__default.useRef(Date.now().toString()).current;
-  var headerClassName = "header-".concat(toolcontainerId);
+  var headerClassName = "header-".concat(className || toolcontainerId);
+  React__default.useEffect(function () {
+    var _a, _b; // update size when startSize has changed outside the component
+
+
+    if (startSize !== size) {
+      var node = (_a = nodeRef.current) === null || _a === void 0 ? void 0 : _a.firstChild;
+      var boundsNode = bounds === 'parent' ? (_b = nodeRef.current) === null || _b === void 0 ? void 0 : _b.parentNode : document.querySelector(bounds);
+      var startWidth = Number(startSize.width);
+
+      var _node$getBoundingClie2 = node.getBoundingClientRect(),
+          currentX = _node$getBoundingClie2.x,
+          currentWidth = _node$getBoundingClie2.width;
+
+      var _boundsNode$getBoundi = boundsNode.getBoundingClientRect(),
+          maxWidth = _boundsNode$getBoundi.width; // TODO: fix screen hugging issues in https://gitlab.com/opengeoweb/opengeoweb/-/issues/2924
+
+
+      if (isRightAligned) {
+        var newWidth = currentX + currentWidth - startWidth < 0 ? currentX + currentWidth : startWidth;
+        var newSize = Object.assign(Object.assign({}, startSize), {
+          width: newWidth
+        });
+        setSize(newSize);
+      } else {
+        var _newWidth = currentX + startWidth >= maxWidth ? maxWidth - currentX : startWidth;
+
+        var _newSize = Object.assign(Object.assign({}, startSize), {
+          width: _newWidth
+        });
+
+        setSize(_newSize);
+      }
+    } // eslint-disable-next-line react-hooks/exhaustive-deps
+
+  }, [startSize.width, startSize.height]);
   return isOpen ? /*#__PURE__*/React__default.createElement(DraggableComponent$1, {
     nodeRef: nodeRef,
     bounds: bounds,
@@ -1740,18 +1880,23 @@ var DraggableComponent = function DraggableComponent(_a) {
     onStop: onStopDrag,
     handle: ".".concat(headerClassName),
     onMouseDown: onMouseDown
-  }, /*#__PURE__*/React__default.createElement("div", {
-    style: Object.assign({
+  }, /*#__PURE__*/React__default.createElement(Box, {
+    sx: Object.assign(Object.assign(Object.assign({
       position: 'absolute',
       pointerEvents: 'all',
       zIndex: zIndex
-    }, startPosition),
-    ref: nodeRef
+    }, startPosition), sx), {
+      '&:hover .resizableHandle': {
+        display: 'inline'
+      }
+    }),
+    ref: nodeRef,
+    className: "toolContainerDraggable"
   }, /*#__PURE__*/React__default.createElement(ResizeComponent, Object.assign({}, props, {
-    startPosition: startPosition,
     size: size,
     setSize: setSize,
     onResizeStart: onStartResize,
+    onResizeStop: onStopResize,
     onResize: onResize
   }), /*#__PURE__*/React__default.createElement(ToolContainer, {
     maxHeight: initialMaxHeight,
@@ -1762,7 +1907,9 @@ var DraggableComponent = function DraggableComponent(_a) {
     isResizable: true,
     elevation: elevation,
     headerClassName: headerClassName,
-    leftComponent: leftComponent
+    leftHeaderComponent: leftHeaderComponent,
+    rightHeaderComponent: rightHeaderComponent,
+    className: className
   }, children)))) : null;
 };
 
@@ -2434,7 +2581,7 @@ var ToggleMenu = function ToggleMenu(_ref) {
       setAnchorEl(document.getElementById(buttonTestId));
     }
   }, [isDefaultOpen, buttonTestId]);
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Tooltip, {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(CustomTooltip, {
     placement: "top",
     title: tooltipTitle
   }, /*#__PURE__*/React.createElement(ToolButton, {
@@ -2497,7 +2644,8 @@ var makeButtonStyles = function makeButtonStyles(isActive, isEnabled, isAccessib
     height: '24px',
     width: '24px',
     borderRadius: '5px',
-    marginTop: '4px',
+    marginTop: 'auto',
+    marginBottom: 'auto',
     color: function color() {
       if (!isEnabled) {
         return 'geowebColors.buttons.flat.disabled.color';
@@ -2545,7 +2693,8 @@ var ManagerButton = function ManagerButton(_a) {
       _a$isAccessible = _a.isAccessible,
       isAccessible = _a$isAccessible === void 0 ? false : _a$isAccessible,
       sx = _a.sx,
-      props = __rest(_a, ["tooltipTitle", "onClick", "isActive", "isEnabled", "icon", "testId", "isAccessible", "sx"]);
+      children = _a.children,
+      props = __rest(_a, ["tooltipTitle", "onClick", "isActive", "isEnabled", "icon", "testId", "isAccessible", "sx", "children"]);
 
   var buttonStyles = makeButtonStyles(isActive, isEnabled, isAccessible);
 
@@ -2553,13 +2702,13 @@ var ManagerButton = function ManagerButton(_a) {
     onClick(event);
   };
 
-  return /*#__PURE__*/React.createElement(Tooltip, {
+  return /*#__PURE__*/React.createElement(CustomTooltip, {
     title: tooltipTitle,
     placement: "top",
     sx: {
       pointerEvents: 'none'
     }
-  }, /*#__PURE__*/React.createElement(IconButton, Object.assign({
+  }, children || /*#__PURE__*/React.createElement(IconButton, Object.assign({
     size: "small",
     onClick: handleClick,
     "data-testid": testId,
@@ -2589,13 +2738,27 @@ var ManagerDeleteButton = function ManagerDeleteButton(_ref) {
       onClickDelete = _ref.onClickDelete,
       _ref$isEnabled = _ref.isEnabled,
       isEnabled = _ref$isEnabled === void 0 ? true : _ref$isEnabled;
-  return /*#__PURE__*/React.createElement(ManagerButton, {
+  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: {
+      display: 'none'
+    }
+  }, "Delete")), /*#__PURE__*/React.createElement(ManagerButton, {
     tooltipTitle: tooltipTitle,
     onClick: onClickDelete,
     icon: /*#__PURE__*/React.createElement(Delete, null),
     testId: "deleteButton",
     isEnabled: isEnabled
-  });
+  }));
 };
 
 /* *
@@ -2617,9 +2780,13 @@ var ManagerDeleteButton = function ManagerDeleteButton(_ref) {
 var EnableButton = function EnableButton(_ref) {
   var isEnabled = _ref.isEnabled,
       title = _ref.title,
-      onChangeEnableLayer = _ref.onChangeEnableLayer;
+      onChangeEnableLayer = _ref.onChangeEnableLayer,
+      className = _ref.className,
+      _ref$id = _ref.id,
+      id = _ref$id === void 0 ? 'enableButton' : _ref$id;
 
-  var onClick = function onClick() {
+  var onClick = function onClick(event) {
+    event.stopPropagation();
     onChangeEnableLayer(!isEnabled);
   };
 
@@ -2647,8 +2814,9 @@ var EnableButton = function EnableButton(_ref) {
       disableFocusRipple: true,
       tabIndex: -1
     }),
-    testId: "enableButton",
-    isEnabled: isEnabled
+    testId: id,
+    isEnabled: isEnabled,
+    className: className
   });
 };
 
@@ -2694,11 +2862,6 @@ var tooltipContainerStyles = function tooltipContainerStyles(isEnabled) {
         return theme.palette.geowebColors.buttons.focusDefault.outline;
       }
     },
-    '&:focus&.MuiButton-root': {
-      outline: function outline(theme) {
-        return theme.palette.geowebColors.buttons.focusDefault.outline;
-      }
-    },
     '& .MuiSvgIcon-root': {
       transition: 'none',
       fill: function fill(theme) {
@@ -2724,10 +2887,11 @@ var backgroundColor = {
     backgroundColor: 'geowebColors.buttons.tool.mouseOver.fill'
   },
   '&:focus&.MuiButton-root': {
-    outline: function outline(theme) {
+    border: function border(theme) {
       return theme.palette.geowebColors.buttons.focusDefault.outline;
     },
-    backgroundColor: 'geowebColors.buttons.tool.mouseOver.fill'
+    backgroundColor: 'geowebColors.buttons.tool.mouseOver.fill',
+    transition: 'border'
   }
 };
 
@@ -2754,10 +2918,10 @@ var TooltipSelect = function TooltipSelect(_a) {
       selectOpen = _React$useState2[0],
       setSelectOpen = _React$useState2[1];
 
-  var _React$useState3 = React.useState(false),
-      _React$useState4 = _slicedToArray(_React$useState3, 2),
-      tooltipOpen = _React$useState4[0],
-      setTooltipOpen = _React$useState4[1];
+  var _useControlledTooltip = useControlledTooltip(),
+      _useControlledTooltip2 = _slicedToArray(_useControlledTooltip, 2),
+      tooltipOpen = _useControlledTooltip2[0],
+      setTooltipOpen = _useControlledTooltip2[1];
 
   var onWheel = React.useCallback(function (event) {
     if (requiresCtrlToChange && (event.ctrlKey || event.metaKey) || !requiresCtrlToChange) {
@@ -2770,23 +2934,23 @@ var TooltipSelect = function TooltipSelect(_a) {
   var onOpen = React.useCallback(function () {
     setSelectOpen(true);
     setTooltipOpen(false);
-  }, []);
+  }, [setTooltipOpen]);
   var onClose = React.useCallback(function () {
     setSelectOpen(false);
   }, []);
   var onMouseEnter = React.useCallback(function () {
     if (!selectOpen) setTooltipOpen(true);
-  }, [selectOpen]);
+  }, [selectOpen, setTooltipOpen]);
   var onMouseLeave = React.useCallback(function () {
     setTooltipOpen(false);
-  }, []);
+  }, [setTooltipOpen]);
   var onFocus = React.useCallback(function () {
     setTooltipOpen(true);
-  }, []);
+  }, [setTooltipOpen]);
   var onBlur = React.useCallback(function () {
     setTooltipOpen(false);
-  }, []);
-  return /*#__PURE__*/React.createElement(Tooltip, {
+  }, [setTooltipOpen]);
+  return /*#__PURE__*/React.createElement(CustomTooltip, {
     title: tooltip,
     placement: "top",
     open: tooltipOpen,
@@ -2867,6 +3031,44 @@ function withEggs(eggs) {
   };
 }
 
+var CustomAccordion = function CustomAccordion(_a) {
+  var title = _a.title,
+      _a$defaultExpanded = _a.defaultExpanded,
+      defaultExpanded = _a$defaultExpanded === void 0 ? true : _a$defaultExpanded,
+      _a$disableGutters = _a.disableGutters,
+      disableGutters = _a$disableGutters === void 0 ? true : _a$disableGutters,
+      _a$expandedElevation = _a.expandedElevation,
+      expandedElevation = _a$expandedElevation === void 0 ? 3 : _a$expandedElevation,
+      _a$collapsedElevation = _a.collapsedElevation,
+      collapsedElevation = _a$collapsedElevation === void 0 ? 0 : _a$collapsedElevation,
+      _a$transitionDuration = _a.transitionDuration,
+      transitionDuration = _a$transitionDuration === void 0 ? 150 : _a$transitionDuration,
+      detailsSx = _a.detailsSx,
+      children = _a.children,
+      props = __rest(_a, ["title", "defaultExpanded", "disableGutters", "expandedElevation", "collapsedElevation", "transitionDuration", "detailsSx", "children"]);
+
+  var _React$useState = React.useState(defaultExpanded),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      expanded = _React$useState2[0],
+      setExpanded = _React$useState2[1];
+
+  return /*#__PURE__*/React.createElement(Accordion, Object.assign({}, props, {
+    defaultExpanded: defaultExpanded,
+    elevation: expanded ? expandedElevation : collapsedElevation,
+    onChange: function onChange(_event, expanded) {
+      return setExpanded(expanded);
+    },
+    disableGutters: disableGutters,
+    TransitionProps: {
+      timeout: transitionDuration
+    }
+  }), /*#__PURE__*/React.createElement(AccordionSummary, {
+    expandIcon: /*#__PURE__*/React.createElement(ChevronDown, null)
+  }, title), /*#__PURE__*/React.createElement(AccordionDetails, {
+    sx: detailsSx
+  }, children));
+};
+
 /* *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -2929,4 +3131,24 @@ var getWarningMessage = function getWarningMessage(error) {
   return '';
 };
 
-export { AlertBanner, AlertIcon, AppHeader, AppLayout, Avatar, ConfirmationDialog, ConfirmationServiceProvider, CustomSlider, CustomToggleButton, DEFAULT_ERROR_MESSAGE, DraggableComponent$1 as Draggable, EnableButton, ErrorBoundary, HIDDEN_INPUT_HELPER_IS_DRAFT, ManagerButton, ManagerDeleteButton, ResizeComponent as Resizable, StatusTag, ToggleMenu, ToolButton, ToolContainer, DraggableComponent as ToolContainerDraggable, ToolFooter, ToolHeader, TooltipSelect, UserMenu, UserMenuItemCheatSheet, MenuItemTheme as UserMenuItemTheme, calculateDialogSizeAndPosition, getAxiosErrorMessage, getAxiosWarningMessage, getErrorMessage, getInitials, getPosition, getWarningMessage, isAxiosError, showPrompt, sliderHeaderStyle, tooltipContainerStyles, useConfirmationDialog, useDialogActions, useDraftFormHelpers, useIsMounted, useMakeSureContainerStaysInsideWindow, usePoller, usePreventBrowserClose, usePrevious, useUserMenu, withEggs };
+/* *
+ * 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)
+ * */
+// TODO: https://gitlab.com/opengeoweb/geoweb-assets/-/issues/2350
+// temporary check until we get the unit test passing with container queries
+var IS_JEST = typeof jest !== 'undefined';
+
+export { AlertBanner, AlertIcon, AppHeader, AppLayout, Avatar, ConfirmationDialog, ConfirmationServiceProvider, CustomAccordion, CustomSlider, CustomToggleButton, CustomTooltip, DEFAULT_ERROR_MESSAGE, DraggableComponent$1 as Draggable, EnableButton, ErrorBoundary, HIDDEN_INPUT_HELPER_IS_DRAFT, IS_JEST, ManagerButton, ManagerDeleteButton, ResizeComponent as Resizable, StatusTag, ToggleMenu, ToolButton, ToolContainer, DraggableComponent as ToolContainerDraggable, ToolFooter, ToolHeader, TooltipSelect, UserMenu, UserMenuItemCheatSheet, MenuItemTheme as UserMenuItemTheme, adjustPosition, calculateDialogSizeAndPosition, defaultDelay, getAxiosErrorMessage, getAxiosWarningMessage, getErrorMessage, getInitials, getPosition, getWarningMessage, isAxiosError, showPrompt, sliderHeaderStyle, tooltipContainerStyles, useConfirmationDialog, useControlledTooltip, useDialogActions, useDraftFormHelpers, useIsMounted, useMakeSureContainerStaysInsideWindow, usePoller, usePreventBrowserClose, usePrevious, useUserMenu, withEggs };