@opengeoweb/shared 4.4.0 → 4.6.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,64 @@ 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) {
-      setPosition(Object.assign(Object.assign({}, position), {
-        x: position.x - bbox.x
-      }));
-    } // right screen
-    else if (bbox.x + bbox.width >= innerWidth) {
-        var diffX = innerWidth - bbox.x - bbox.width;
+var adjustPosition = function adjustPosition(bbox, containingView, position, setPosition) {
+  var isHorizontallyLarger = bbox.width > containingView.width;
+  var isVerticallyLarger = bbox.height > containingView.height; // Check corner cases first
+  // bottom left
+
+  if (bbox.x < containingView.x && bbox.bottom >= containingView.bottom) {
+    var diffX = containingView.x - bbox.x;
+    var diffY = containingView.bottom - bbox.bottom;
+    setPosition({
+      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 _diffX2 = containingView.x - bbox.x;
+
         setPosition(Object.assign(Object.assign({}, position), {
-          x: position.x + diffX
+          x: position.x + _diffX2
         }));
-      } // top screen
-      else if (bbox.y < 0 || isVerticallyLarger) {
+      } // right screen
+      else if (bbox.right >= containingView.right) {
+          var _diffX3 = containingView.right - bbox.right;
+
           setPosition(Object.assign(Object.assign({}, position), {
-            y: position.y - bbox.y
+            x: position.x + _diffX3
           }));
-        } // bottom screen
-        else if (bbox.y + bbox.height >= innerHeight) {
-            var diffY = innerHeight - bbox.y - bbox.height;
+        } // top screen
+        else if (bbox.y < containingView.y || isVerticallyLarger) {
+            var _diffY2 = containingView.y - bbox.y;
+
             setPosition(Object.assign(Object.assign({}, position), {
-              y: position.y + diffY
+              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
+              }));
+            }
+};
+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 +1090,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 +1124,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 +1168,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 +1444,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 +1520,8 @@ var getStyle = function getStyle(size) {
         return {
           fontSize: 20,
           fontWeight: 400,
-          padding: '8px'
+          padding: '4px 8px',
+          height: 40
         };
       }
 
@@ -1490,31 +1558,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 +1598,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 +1623,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 +1694,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 +1709,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: {
@@ -1640,6 +1719,151 @@ var ToolContainer = function ToolContainer(_a) {
   }, children), isResizable && /*#__PURE__*/React__default.createElement(ToolFooter, null));
 };
 
+/* *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * Copyright 2022 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+ * Copyright 2022 - Finnish Meteorological Institute (FMI)
+ * */
+var getRightPositionAndSize = function getRightPositionAndSize(_ref) {
+  var currentX = _ref.currentX,
+      currentWidth = _ref.currentWidth,
+      newWidth = _ref.newWidth,
+      maxWidth = _ref.maxWidth,
+      position = _ref.position,
+      startSize = _ref.startSize;
+  var newSize = Object.assign(Object.assign({}, startSize), {
+    width: newWidth
+  }); // if new size is bigger than the window
+
+  if (newWidth >= maxWidth) {
+    return {
+      size: Object.assign(Object.assign({}, newSize), {
+        width: maxWidth
+      }),
+      position: Object.assign(Object.assign({}, position), {
+        x: position.x + (maxWidth - (currentX + currentWidth))
+      })
+    };
+  } // if new size overlaps left side of screen
+
+
+  var newStartX = currentX - (newWidth - currentWidth);
+
+  if (newStartX <= 0) {
+    return {
+      size: newSize,
+      position: Object.assign(Object.assign({}, position), {
+        x: position.x - newStartX
+      })
+    };
+  } // there is room to grow
+
+
+  return {
+    size: newSize,
+    position: position
+  };
+};
+var getLeftPositionAndSize = function getLeftPositionAndSize(_ref2) {
+  var currentX = _ref2.currentX,
+      newWidth = _ref2.newWidth,
+      maxWidth = _ref2.maxWidth,
+      position = _ref2.position,
+      startSize = _ref2.startSize;
+  var newSize = Object.assign(Object.assign({}, startSize), {
+    width: newWidth
+  }); // if new size is bigger than the window
+
+  if (newWidth >= maxWidth) {
+    return {
+      size: Object.assign(Object.assign({}, newSize), {
+        width: maxWidth
+      }),
+      position: Object.assign(Object.assign({}, position), {
+        x: position.x - currentX
+      })
+    };
+  } // if new size overlaps right side of screen
+
+
+  var newEndX = currentX + newWidth;
+
+  if (newEndX >= maxWidth) {
+    return {
+      size: newSize,
+      position: Object.assign(Object.assign({}, position), {
+        x: position.x + (maxWidth - newEndX)
+      })
+    };
+  } // there is room to grow
+
+
+  return {
+    size: newSize,
+    position: position
+  };
+};
+var useHandleSizeFromOutsideComponent = function useHandleSizeFromOutsideComponent(_ref3) {
+  var nodeRef = _ref3.nodeRef,
+      startSize = _ref3.startSize,
+      bounds = _ref3.bounds,
+      isRightAligned = _ref3.isRightAligned,
+      size = _ref3.size,
+      setSize = _ref3.setSize,
+      position = _ref3.position,
+      setPosition = _ref3.setPosition;
+  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 _boundsNode$getBoundi = boundsNode.getBoundingClientRect(),
+          maxWidth = _boundsNode$getBoundi.width;
+
+      var newWidth = Number(startSize.width);
+
+      var _node$getBoundingClie = node.getBoundingClientRect(),
+          currentX = _node$getBoundingClie.x,
+          currentWidth = _node$getBoundingClie.width;
+
+      var _ref4 = isRightAligned ? getRightPositionAndSize({
+        currentX: currentX,
+        currentWidth: currentWidth,
+        newWidth: newWidth,
+        maxWidth: maxWidth,
+        position: position,
+        startSize: startSize
+      }) : getLeftPositionAndSize({
+        currentX: currentX,
+        newWidth: newWidth,
+        maxWidth: maxWidth,
+        position: position,
+        startSize: startSize
+      }),
+          newPosition = _ref4.position,
+          newSize = _ref4.size;
+
+      setSize(newSize);
+      setPosition(newPosition);
+    } // eslint-disable-next-line react-hooks/exhaustive-deps
+
+  }, [startSize.width, startSize.height]);
+};
+
 var calculateDialogSizeAndPosition = function calculateDialogSizeAndPosition() {
   var width = window.innerWidth * 0.85;
   var height = window.innerHeight * 0.85;
@@ -1682,16 +1906,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 +1942,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 +1971,49 @@ 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);
+  useHandleSizeFromOutsideComponent({
+    nodeRef: nodeRef,
+    startSize: startSize,
+    bounds: bounds,
+    isRightAligned: isRightAligned,
+    size: size,
+    setSize: setSize,
+    position: position,
+    setPosition: setPosition
+  });
   var toolcontainerId = React__default.useRef(Date.now().toString()).current;
-  var headerClassName = "header-".concat(toolcontainerId);
+  var headerClassName = "header-".concat(className || toolcontainerId);
   return isOpen ? /*#__PURE__*/React__default.createElement(DraggableComponent$1, {
     nodeRef: nodeRef,
     bounds: bounds,
@@ -1740,18 +2021,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 +2048,9 @@ var DraggableComponent = function DraggableComponent(_a) {
     isResizable: true,
     elevation: elevation,
     headerClassName: headerClassName,
-    leftComponent: leftComponent
+    leftHeaderComponent: leftHeaderComponent,
+    rightHeaderComponent: rightHeaderComponent,
+    className: className
   }, children)))) : null;
 };
 
@@ -2434,7 +2722,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 +2785,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 +2834,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 +2843,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 +2879,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 +2921,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 +2955,9 @@ var EnableButton = function EnableButton(_ref) {
       disableFocusRipple: true,
       tabIndex: -1
     }),
-    testId: "enableButton",
-    isEnabled: isEnabled
+    testId: id,
+    isEnabled: isEnabled,
+    className: className
   });
 };
 
@@ -2684,20 +2993,15 @@ var tooltipContainerStyles = function tooltipContainerStyles(isEnabled) {
     '& .MuiOutlinedInput-notchedOutline': {
       borderColor: 'transparent!important'
     },
-    '&:hover .MuiSelect-select': {
-      outline: function outline(theme) {
-        return theme.palette.geowebColors.buttons.focusDefault.outline;
-      }
+    '&:hover': {
+      backgroundColor: 'geowebColors.buttons.tool.mouseOver.fill',
+      borderRadius: 0
     },
     '&.Mui-focused .MuiSelect-select': {
       outline: function outline(theme) {
         return theme.palette.geowebColors.buttons.focusDefault.outline;
-      }
-    },
-    '&:focus&.MuiButton-root': {
-      outline: function outline(theme) {
-        return theme.palette.geowebColors.buttons.focusDefault.outline;
-      }
+      },
+      borderRadius: 0
     },
     '& .MuiSvgIcon-root': {
       transition: 'none',
@@ -2706,28 +3010,31 @@ var tooltipContainerStyles = function tooltipContainerStyles(isEnabled) {
       }
     },
     '&>div': {
-      paddingLeft: 1
+      paddingLeft: '8px!important'
     }
   }, hasBackgroundColor && backgroundColor);
 };
 var backgroundColor = {
   '&:hover .MuiSelect-select': {
+    backgroundColor: 'geowebColors.buttons.tool.mouseOver.fill',
+    borderRadius: 0
+  },
+  '&.Mui-focused .MuiSelect-select': {
     outline: function outline(theme) {
       return theme.palette.geowebColors.buttons.focusDefault.outline;
     },
-    backgroundColor: 'geowebColors.buttons.tool.mouseOver.fill'
-  },
-  '&.Mui-focused .MuiSelect-select': {
+    borderRadius: 0,
     backgroundColor: 'geowebColors.buttons.tool.mouseOver.fill'
   },
   '&:hover&.MuiButton-root': {
     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 +3061,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,27 +3077,26 @@ 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,
-    sx: noStyling ? undefined : tooltipContainerStyles(!!isEnabled, hasBackgroundColor)
+    open: tooltipOpen
   }, /*#__PURE__*/React.createElement(Select, Object.assign({
     onOpen: onOpen,
     onClose: onClose,
@@ -2841,7 +3147,8 @@ var TooltipSelect = function TooltipSelect(_a) {
           }
         }
       }
-    }
+    },
+    sx: noStyling ? undefined : tooltipContainerStyles(!!isEnabled, hasBackgroundColor)
   }, otherProps)));
 };
 
@@ -2867,6 +3174,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 +3274,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 };