@opengeoweb/shared 4.4.0 → 4.6.0

package/index.umd.js

@@ -483,39 +483,58 @@
       };
     };
 
-    var useMakeSureContainerStaysInsideWindow = function useMakeSureContainerStaysInsideWindow(nodeRef, position, setPosition) {
-      var onResizeWindow = React__default["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(__assign(__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 diffX = containingView.x - bbox.x;
             setPosition(__assign(__assign({}, position), {
               x: position.x + diffX
             }));
-          } // top screen
-          else if (bbox.y < 0 || isVerticallyLarger) {
+          } // right screen
+          else if (bbox.right >= containingView.right) {
+              var diffX = containingView.right - bbox.right;
               setPosition(__assign(__assign({}, position), {
-                y: position.y - bbox.y
+                x: position.x + diffX
               }));
-            } // 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 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
+                  }));
+                }
+    };
+    var useMakeSureContainerStaysInsideWindow = function useMakeSureContainerStaysInsideWindow(nodeRef, position, setPosition) {
+      var onResizeWindow = React__default["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["default"].useEffect(function () {
         var throttledResize = lodash.throttle(onResizeWindow, 100);
@@ -935,29 +954,26 @@
      * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
      * Copyright 2021 - Finnish Meteorological Institute (FMI)
      * */
+    var isDraggingClassName = 'is-dragging';
 
     var ResizeComponent = function ResizeComponent(_a) {
-      var _b = _a.startPosition,
-          startPosition = _b === void 0 ? {
-        left: undefined,
-        right: undefined,
-        top: undefined
-      } : _b,
-          children = _a.children,
-          _c = _a.onResizeStart,
-          onResizeStart = _c === void 0 ? function () {} : _c,
+      var children = _a.children,
+          _b = _a.onResizeStart,
+          onResizeStart = _b === void 0 ? function () {} : _b,
+          _c = _a.onResizeStop,
+          onResizeStop = _c === void 0 ? function () {} : _c,
           size = _a.size,
           setSize = _a.setSize,
           _d = _a.minHeight,
           minHeight = _d === void 0 ? 50 : _d,
           _e = _a.minWidth,
           minWidth = _e === void 0 ? 50 : _e,
-          props = __rest(_a, ["startPosition", "children", "onResizeStart", "size", "setSize", "minHeight", "minWidth"]);
+          props = __rest(_a, ["children", "onResizeStart", "onResizeStop", "size", "setSize", "minHeight", "minWidth"]);
 
       var theme$1 = material.useTheme();
-      var isRightAligned = startPosition && startPosition.right !== null && startPosition.right !== undefined;
       var onStartResize = React__default["default"].useCallback(function (event, _direction, node) {
         event.stopPropagation();
+        node.classList.add(isDraggingClassName);
 
         var _a = node.getBoundingClientRect(),
             width = _a.width,
@@ -972,32 +988,42 @@
         node.style.height = height + "px";
         onResizeStart();
       }, [onResizeStart, setSize]);
-      var onResizeStop = React__default["default"].useCallback(function (_event, _direction, _ref, delta) {
+      var onStopResize = React__default["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["default"].createElement(reResizable.Resizable // TODO: implement bounds https://gitlab.com/opengeoweb/opengeoweb/-/issues/1035
       , __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["default"].createElement(theme.Resize, {
             style: {
               fill: "" + theme$1.palette.geowebColors.buttons.flat["default"].color
-            }
+            },
+            sx: {
+              display: 'none'
+            },
+            className: "resizableHandle"
           }),
           bottomLeft: /*#__PURE__*/React__default["default"].createElement(theme.Resize, {
             isRightAligned: true,
             style: {
               fill: "" + theme$1.palette.geowebColors.buttons.flat["default"].color
-            }
+            },
+            sx: {
+              display: 'none'
+            },
+            className: "resizableHandle"
           })
         },
         enable: {
@@ -1006,8 +1032,8 @@
           bottom: false,
           left: false,
           topRight: false,
-          bottomRight: !isRightAligned,
-          bottomLeft: isRightAligned,
+          bottomRight: true,
+          bottomLeft: true,
           topLeft: false
         },
         onResizeStart: onStartResize
@@ -1258,6 +1284,55 @@
       });
     };
 
+    /* *
+     * Licensed under the Apache License, Version 2.0 (the "License");
+     * you may not use this file except in compliance with the License.
+     * You may obtain a copy of the License at
+     *
+     *     http://www.apache.org/licenses/LICENSE-2.0
+     *
+     * Unless required by applicable law or agreed to in writing, software
+     * distributed under the License is distributed on an "AS IS" BASIS,
+     * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+     * See the License for the specific language governing permissions and
+     * limitations under the License.
+     *
+     * Copyright 2022 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+     * Copyright 2022 - Finnish Meteorological Institute (FMI)
+     * */
+    var defaultDelay = 1000;
+    var useControlledTooltip = function useControlledTooltip() {
+      var _a = __read(React__namespace.useState(false), 2),
+          tooltipOpen = _a[0],
+          setTooltipOpen = _a[1];
+
+      var _b = __read(React__namespace.useState(false), 2),
+          delayedTooltip = _b[0],
+          setDelayedTooltip = _b[1];
+
+      React__namespace.useEffect(function () {
+        if (tooltipOpen === true) {
+          var timer_1 = setTimeout(function () {
+            return setDelayedTooltip(true);
+          }, defaultDelay);
+          return function () {
+            clearTimeout(timer_1);
+          };
+        }
+
+        setDelayedTooltip(false);
+        return function () {};
+      }, [tooltipOpen]);
+      return [delayedTooltip, setTooltipOpen];
+    };
+    var CustomTooltip = function CustomTooltip(props) {
+      return /*#__PURE__*/React__namespace.createElement(material.Tooltip, __assign({}, props, {
+        enterDelay: defaultDelay,
+        enterNextDelay: defaultDelay,
+        disableInteractive: true
+      }));
+    };
+
     /* *
      * Licensed under the Apache License, Version 2.0 (the "License");
      * you may not use this file except in compliance with the License.
@@ -1299,7 +1374,8 @@
             return {
               fontSize: 20,
               fontWeight: 400,
-              padding: '8px'
+              padding: '4px 8px',
+              height: 40
             };
           }
 
@@ -1336,31 +1412,37 @@
           isDraggable = _c === void 0 ? false : _c,
           _d = _a.className,
           className = _d === void 0 ? '' : _d,
-          _e = _a.leftComponent,
-          leftComponent = _e === void 0 ? null : _e;
+          _e = _a.leftHeaderComponent,
+          leftHeaderComponent = _e === void 0 ? null : _e,
+          _f = _a.rightHeaderComponent,
+          rightHeaderComponent = _f === void 0 ? null : _f;
       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["default"].createElement(material.Box, {
         component: "header",
         className: className,
         sx: {
           boxShadow: 1,
           backgroundColor: 'geowebColors.background.surface',
-          padding: styles.padding,
           zIndex: 2,
           cursor: isDraggable ? 'move' : null
         }
       }, /*#__PURE__*/React__default["default"].createElement(material.Grid, {
         container: true,
-        alignItems: "center"
+        alignItems: "center",
+        sx: {
+          padding: styles.padding,
+          height: styles.height
+        }
       }, /*#__PURE__*/React__default["default"].createElement(material.Grid, {
+        className: "header-left",
         item: true,
         xs: columnSizeIcon,
         sx: {
           paddingRight: 1
         }
-      }, isDraggable && size !== 'xxs' && !leftComponent && /*#__PURE__*/React__default["default"].createElement(material.Grid, {
+      }, isDraggable && size !== 'xxs' && !leftHeaderComponent && /*#__PURE__*/React__default["default"].createElement(material.Grid, {
         container: true,
         justifyContent: "flex-start"
       }, /*#__PURE__*/React__default["default"].createElement(material.IconButton, {
@@ -1370,7 +1452,8 @@
         sx: __assign(__assign({}, iconStyle), {
           pointerEvents: 'none'
         })
-      }, /*#__PURE__*/React__default["default"].createElement(theme.DragHandle, null))), leftComponent && leftComponent), /*#__PURE__*/React__default["default"].createElement(material.Grid, {
+      }, /*#__PURE__*/React__default["default"].createElement(theme.DragHandle, null))), leftHeaderComponent && leftHeaderComponent), /*#__PURE__*/React__default["default"].createElement(material.Grid, {
+        className: "header-title",
         item: true,
         xs: columnSizeTitle
       }, /*#__PURE__*/React__default["default"].createElement(material.Grid, {
@@ -1394,11 +1477,12 @@
           height: 12
         })
       }, /*#__PURE__*/React__default["default"].createElement(theme.DragHandle, null)))), /*#__PURE__*/React__default["default"].createElement(material.Grid, {
+        className: "header-right",
         item: true,
         xs: columnSizeIcon,
         container: true,
         justifyContent: "flex-end"
-      }, onClose && /*#__PURE__*/React__default["default"].createElement(material.Tooltip, {
+      }, rightHeaderComponent && rightHeaderComponent, onClose && /*#__PURE__*/React__default["default"].createElement(CustomTooltip, {
         title: "Close",
         placement: "bottom",
         sx: {
@@ -1466,9 +1550,11 @@
       _h = _a.headerClassName,
           // elevation_06
       headerClassName = _h === void 0 ? '' : _h,
-          _j = _a.leftComponent,
-          leftComponent = _j === void 0 ? null : _j,
-          props = __rest(_a, ["title", "size", "children", "onClose", "isResizable", "isDraggable", "maxHeight", "elevation", "headerClassName", "leftComponent"]);
+          _j = _a.leftHeaderComponent,
+          leftHeaderComponent = _j === void 0 ? null : _j,
+          _k = _a.rightHeaderComponent,
+          rightHeaderComponent = _k === void 0 ? null : _k,
+          props = __rest(_a, ["title", "size", "children", "onClose", "isResizable", "isDraggable", "maxHeight", "elevation", "headerClassName", "leftHeaderComponent", "rightHeaderComponent"]);
 
       return /*#__PURE__*/React__default["default"].createElement(material.Paper, __assign({
         elevation: elevation,
@@ -1479,7 +1565,8 @@
         isDraggable: isDraggable,
         onClose: onClose,
         className: headerClassName,
-        leftComponent: leftComponent
+        leftHeaderComponent: leftHeaderComponent,
+        rightHeaderComponent: rightHeaderComponent
       })), /*#__PURE__*/React__default["default"].createElement(material.Box, {
         sx: styles$2.content,
         style: {
@@ -1488,6 +1575,136 @@
       }, children), isResizable && /*#__PURE__*/React__default["default"].createElement(ToolFooter, null));
     };
 
+    var getRightPositionAndSize = function getRightPositionAndSize(_a) {
+      var currentX = _a.currentX,
+          currentWidth = _a.currentWidth,
+          newWidth = _a.newWidth,
+          maxWidth = _a.maxWidth,
+          position = _a.position,
+          startSize = _a.startSize;
+
+      var newSize = __assign(__assign({}, startSize), {
+        width: newWidth
+      }); // if new size is bigger than the window
+
+
+      if (newWidth >= maxWidth) {
+        return {
+          size: __assign(__assign({}, newSize), {
+            width: maxWidth
+          }),
+          position: __assign(__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: __assign(__assign({}, position), {
+            x: position.x - newStartX
+          })
+        };
+      } // there is room to grow
+
+
+      return {
+        size: newSize,
+        position: position
+      };
+    };
+    var getLeftPositionAndSize = function getLeftPositionAndSize(_a) {
+      var currentX = _a.currentX,
+          newWidth = _a.newWidth,
+          maxWidth = _a.maxWidth,
+          position = _a.position,
+          startSize = _a.startSize;
+
+      var newSize = __assign(__assign({}, startSize), {
+        width: newWidth
+      }); // if new size is bigger than the window
+
+
+      if (newWidth >= maxWidth) {
+        return {
+          size: __assign(__assign({}, newSize), {
+            width: maxWidth
+          }),
+          position: __assign(__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: __assign(__assign({}, position), {
+            x: position.x + (maxWidth - newEndX)
+          })
+        };
+      } // there is room to grow
+
+
+      return {
+        size: newSize,
+        position: position
+      };
+    };
+    var useHandleSizeFromOutsideComponent = function useHandleSizeFromOutsideComponent(_a) {
+      var nodeRef = _a.nodeRef,
+          startSize = _a.startSize,
+          bounds = _a.bounds,
+          isRightAligned = _a.isRightAligned,
+          size = _a.size,
+          setSize = _a.setSize,
+          position = _a.position,
+          setPosition = _a.setPosition;
+      React__default["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 maxWidth = boundsNode.getBoundingClientRect().width;
+          var newWidth = Number(startSize.width);
+
+          var _c = node.getBoundingClientRect(),
+              currentX = _c.x,
+              currentWidth = _c.width;
+
+          var _d = 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 = _d.position,
+              newSize = _d.size;
+
+          setSize(newSize);
+          setPosition(newPosition);
+        } // eslint-disable-next-line react-hooks/exhaustive-deps
+
+      }, [startSize.width, startSize.height]);
+    };
+
     /* *
      * Licensed under the Apache License, Version 2.0 (the "License");
      * you may not use this file except in compliance with the License.
@@ -1547,42 +1764,60 @@
           onChangeSize = _j === void 0 ? function () {} : _j,
           _k = _a.onMouseDown,
           onMouseDown = _k === void 0 ? function () {} : _k,
-          _l = _a.order,
-          order = _l === void 0 ? 1 : _l,
-          _m = _a.source,
-          source = _m === void 0 ? 'app' : _m,
-          _o = _a.leftComponent,
-          leftComponent = _o === void 0 ? null : _o,
-          props = __rest(_a, ["title", "bounds", "headerSize", "startSize", "startPosition", "children", "isOpen", "onClose", "initialMaxHeight", "onChangeSize", "onMouseDown", "order", "source", "leftComponent"]);
+          _l = _a.onResizeStop,
+          onResizeStop = _l === void 0 ? function () {} : _l,
+          _m = _a.onDragEnd,
+          onDragEnd = _m === void 0 ? function () {} : _m,
+          _o = _a.order,
+          order = _o === void 0 ? 1 : _o,
+          _p = _a.source,
+          source = _p === void 0 ? 'app' : _p,
+          _q = _a.leftHeaderComponent,
+          leftHeaderComponent = _q === void 0 ? null : _q,
+          _r = _a.rightHeaderComponent,
+          rightHeaderComponent = _r === void 0 ? null : _r,
+          _s = _a.hasElevation,
+          hasElevation = _s === void 0 ? true : _s,
+          className = _a.className,
+          _t = _a.sx,
+          sx = _t === void 0 ? {} : _t,
+          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["default"].useRef(null);
 
-      var _p = __read(React__default["default"].useState({
+      var _u = __read(React__default["default"].useState({
         x: 0,
         y: 0
       }), 2),
-          position = _p[0],
-          setPosition = _p[1];
+          position = _u[0],
+          setPosition = _u[1];
 
-      var _q = __read(React__default["default"].useState(startSize), 2),
-          size = _q[0],
-          setSize = _q[1];
+      var _v = __read(React__default["default"].useState(startSize), 2),
+          size = _v[0],
+          setSize = _v[1];
 
+      var isRightAligned = startPosition && startPosition.right !== null && startPosition.right !== undefined;
       var onStopDrag = React__default["default"].useCallback(function (_event, position) {
         setPosition(position);
-      }, [setPosition]);
+        onDragEnd(position, size);
+      }, [setPosition, onDragEnd, size]);
 
-      var _r = __read(React__default["default"].useState(defaultInitialMaxHeight), 2),
-          initialMaxHeight = _r[0],
-          setInitialMaxHeight = _r[1];
+      var _w = __read(React__default["default"].useState(defaultInitialMaxHeight), 2),
+          initialMaxHeight = _w[0],
+          setInitialMaxHeight = _w[1];
+
+      var _x = __read(React__default["default"].useState(0), 2),
+          initialDragPositionX = _x[0],
+          setInitialDragPositionX = _x[1];
 
       var onStartResize = function onStartResize() {
         setInitialMaxHeight('initial');
+        setInitialDragPositionX(position.x);
       };
 
-      var onResize = React__default["default"].useCallback(function (_event, _handle, node) {
+      var onResize = React__default["default"].useCallback(function (_event, _handle, node, delta) {
         var _a = node.getBoundingClientRect(),
             width = _a.width,
             height = _a.height;
@@ -1590,11 +1825,48 @@
         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(" + newX + "px, " + 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(" + newX + "px, " + 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["default"].useRef(Date.now().toString()).current;
-      var headerClassName = "header-" + toolcontainerId;
+      var headerClassName = "header-" + (className || toolcontainerId);
       return isOpen ? /*#__PURE__*/React__default["default"].createElement(DraggableComponent$1, {
         nodeRef: nodeRef,
         bounds: bounds,
@@ -1602,18 +1874,23 @@
         onStop: onStopDrag,
         handle: "." + headerClassName,
         onMouseDown: onMouseDown
-      }, /*#__PURE__*/React__default["default"].createElement("div", {
-        style: __assign({
+      }, /*#__PURE__*/React__default["default"].createElement(material.Box, {
+        sx: __assign(__assign(__assign({
           position: 'absolute',
           pointerEvents: 'all',
           zIndex: zIndex
-        }, startPosition),
-        ref: nodeRef
+        }, startPosition), sx), {
+          '&:hover .resizableHandle': {
+            display: 'inline'
+          }
+        }),
+        ref: nodeRef,
+        className: "toolContainerDraggable"
       }, /*#__PURE__*/React__default["default"].createElement(ResizeComponent, __assign({}, props, {
-        startPosition: startPosition,
         size: size,
         setSize: setSize,
         onResizeStart: onStartResize,
+        onResizeStop: onStopResize,
         onResize: onResize
       }), /*#__PURE__*/React__default["default"].createElement(ToolContainer, {
         maxHeight: initialMaxHeight,
@@ -1624,7 +1901,9 @@
         isResizable: true,
         elevation: elevation,
         headerClassName: headerClassName,
-        leftComponent: leftComponent
+        leftHeaderComponent: leftHeaderComponent,
+        rightHeaderComponent: rightHeaderComponent,
+        className: className
       }, children)))) : null;
     };
 
@@ -2296,7 +2575,7 @@
           setAnchorEl(document.getElementById(buttonTestId));
         }
       }, [isDefaultOpen, buttonTestId]);
-      return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement(material.Tooltip, {
+      return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement(CustomTooltip, {
         placement: "top",
         title: tooltipTitle
       }, /*#__PURE__*/React__namespace.createElement(ToolButton, {
@@ -2359,7 +2638,8 @@
         height: '24px',
         width: '24px',
         borderRadius: '5px',
-        marginTop: '4px',
+        marginTop: 'auto',
+        marginBottom: 'auto',
         color: function color() {
           if (!isEnabled) {
             return 'geowebColors.buttons.flat.disabled.color';
@@ -2407,7 +2687,8 @@
           _f = _a.isAccessible,
           isAccessible = _f === void 0 ? false : _f,
           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);
 
@@ -2415,13 +2696,13 @@
         onClick(event);
       };
 
-      return /*#__PURE__*/React__namespace.createElement(material.Tooltip, {
+      return /*#__PURE__*/React__namespace.createElement(CustomTooltip, {
         title: tooltipTitle,
         placement: "top",
         sx: {
           pointerEvents: 'none'
         }
-      }, /*#__PURE__*/React__namespace.createElement(material.IconButton, __assign({
+      }, children || /*#__PURE__*/React__namespace.createElement(material.IconButton, __assign({
         size: "small",
         onClick: handleClick,
         "data-testid": testId,
@@ -2451,13 +2732,27 @@
           onClickDelete = _a.onClickDelete,
           _b = _a.isEnabled,
           isEnabled = _b === void 0 ? true : _b;
-      return /*#__PURE__*/React__namespace.createElement(ManagerButton, {
+      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: {
+          display: 'none'
+        }
+      }, "Delete")), /*#__PURE__*/React__namespace.createElement(ManagerButton, {
         tooltipTitle: tooltipTitle,
         onClick: onClickDelete,
         icon: /*#__PURE__*/React__namespace.createElement(theme.Delete, null),
         testId: "deleteButton",
         isEnabled: isEnabled
-      });
+      }));
     };
 
     /* *
@@ -2479,9 +2774,13 @@
     var EnableButton = function EnableButton(_a) {
       var isEnabled = _a.isEnabled,
           title = _a.title,
-          onChangeEnableLayer = _a.onChangeEnableLayer;
+          onChangeEnableLayer = _a.onChangeEnableLayer,
+          className = _a.className,
+          _b = _a.id,
+          id = _b === void 0 ? 'enableButton' : _b;
 
-      var onClick = function onClick() {
+      var onClick = function onClick(event) {
+        event.stopPropagation();
         onChangeEnableLayer(!isEnabled);
       };
 
@@ -2509,8 +2808,9 @@
           disableFocusRipple: true,
           tabIndex: -1
         }),
-        testId: "enableButton",
-        isEnabled: isEnabled
+        testId: id,
+        isEnabled: isEnabled,
+        className: className
       });
     };
 
@@ -2549,20 +2849,15 @@
         '& .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',
@@ -2571,28 +2866,31 @@
           }
         },
         '&>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'
       }
     };
 
@@ -2634,7 +2932,7 @@
           selectOpen = _f[0],
           setSelectOpen = _f[1];
 
-      var _g = __read(React__namespace.useState(false), 2),
+      var _g = __read(useControlledTooltip(), 2),
           tooltipOpen = _g[0],
           setTooltipOpen = _g[1];
 
@@ -2649,27 +2947,26 @@
       var onOpen = React__namespace.useCallback(function () {
         setSelectOpen(true);
         setTooltipOpen(false);
-      }, []);
+      }, [setTooltipOpen]);
       var onClose = React__namespace.useCallback(function () {
         setSelectOpen(false);
       }, []);
       var onMouseEnter = React__namespace.useCallback(function () {
         if (!selectOpen) setTooltipOpen(true);
-      }, [selectOpen]);
+      }, [selectOpen, setTooltipOpen]);
       var onMouseLeave = React__namespace.useCallback(function () {
         setTooltipOpen(false);
-      }, []);
+      }, [setTooltipOpen]);
       var onFocus = React__namespace.useCallback(function () {
         setTooltipOpen(true);
-      }, []);
+      }, [setTooltipOpen]);
       var onBlur = React__namespace.useCallback(function () {
         setTooltipOpen(false);
-      }, []);
-      return /*#__PURE__*/React__namespace.createElement(material.Tooltip, {
+      }, [setTooltipOpen]);
+      return /*#__PURE__*/React__namespace.createElement(CustomTooltip, {
         title: tooltip,
         placement: "top",
-        open: tooltipOpen,
-        sx: noStyling ? undefined : tooltipContainerStyles(!!isEnabled, hasBackgroundColor)
+        open: tooltipOpen
       }, /*#__PURE__*/React__namespace.createElement(material.Select, __assign({
         onOpen: onOpen,
         onClose: onClose,
@@ -2720,7 +3017,8 @@
               }
             }
           }
-        }
+        },
+        sx: noStyling ? undefined : tooltipContainerStyles(!!isEnabled, hasBackgroundColor)
       }, otherProps)));
     };
 
@@ -2745,6 +3043,43 @@
       };
     }
 
+    var CustomAccordion = function CustomAccordion(_a) {
+      var title = _a.title,
+          _b = _a.defaultExpanded,
+          defaultExpanded = _b === void 0 ? true : _b,
+          _c = _a.disableGutters,
+          disableGutters = _c === void 0 ? true : _c,
+          _d = _a.expandedElevation,
+          expandedElevation = _d === void 0 ? 3 : _d,
+          _e = _a.collapsedElevation,
+          collapsedElevation = _e === void 0 ? 0 : _e,
+          _f = _a.transitionDuration,
+          transitionDuration = _f === void 0 ? 150 : _f,
+          detailsSx = _a.detailsSx,
+          children = _a.children,
+          props = __rest(_a, ["title", "defaultExpanded", "disableGutters", "expandedElevation", "collapsedElevation", "transitionDuration", "detailsSx", "children"]);
+
+      var _g = __read(React__namespace.useState(defaultExpanded), 2),
+          expanded = _g[0],
+          setExpanded = _g[1];
+
+      return /*#__PURE__*/React__namespace.createElement(material.Accordion, __assign({}, props, {
+        defaultExpanded: defaultExpanded,
+        elevation: expanded ? expandedElevation : collapsedElevation,
+        onChange: function onChange(_event, expanded) {
+          return setExpanded(expanded);
+        },
+        disableGutters: disableGutters,
+        TransitionProps: {
+          timeout: transitionDuration
+        }
+      }), /*#__PURE__*/React__namespace.createElement(material.AccordionSummary, {
+        expandIcon: /*#__PURE__*/React__namespace.createElement(theme.ChevronDown, null)
+      }, title), /*#__PURE__*/React__namespace.createElement(material.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.
@@ -2807,6 +3142,26 @@
       return '';
     };
 
+    /* *
+     * 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';
+
     exports.AlertBanner = AlertBanner;
     exports.AlertIcon = AlertIcon;
     exports.AppHeader = AppHeader;
@@ -2814,13 +3169,16 @@
     exports.Avatar = Avatar;
     exports.ConfirmationDialog = ConfirmationDialog;
     exports.ConfirmationServiceProvider = ConfirmationServiceProvider;
+    exports.CustomAccordion = CustomAccordion;
     exports.CustomSlider = CustomSlider;
     exports.CustomToggleButton = CustomToggleButton;
+    exports.CustomTooltip = CustomTooltip;
     exports.DEFAULT_ERROR_MESSAGE = DEFAULT_ERROR_MESSAGE;
     exports.Draggable = DraggableComponent$1;
     exports.EnableButton = EnableButton;
     exports.ErrorBoundary = ErrorBoundary;
     exports.HIDDEN_INPUT_HELPER_IS_DRAFT = HIDDEN_INPUT_HELPER_IS_DRAFT;
+    exports.IS_JEST = IS_JEST;
     exports.ManagerButton = ManagerButton;
     exports.ManagerDeleteButton = ManagerDeleteButton;
     exports.Resizable = ResizeComponent;
@@ -2835,7 +3193,9 @@
     exports.UserMenu = UserMenu;
     exports.UserMenuItemCheatSheet = UserMenuItemCheatSheet;
     exports.UserMenuItemTheme = MenuItemTheme;
+    exports.adjustPosition = adjustPosition;
     exports.calculateDialogSizeAndPosition = calculateDialogSizeAndPosition;
+    exports.defaultDelay = defaultDelay;
     exports.getAxiosErrorMessage = getAxiosErrorMessage;
     exports.getAxiosWarningMessage = getAxiosWarningMessage;
     exports.getErrorMessage = getErrorMessage;
@@ -2847,6 +3207,7 @@
     exports.sliderHeaderStyle = sliderHeaderStyle;
     exports.tooltipContainerStyles = tooltipContainerStyles;
     exports.useConfirmationDialog = useConfirmationDialog;
+    exports.useControlledTooltip = useControlledTooltip;
     exports.useDialogActions = useDialogActions;
     exports.useDraftFormHelpers = useDraftFormHelpers;
     exports.useIsMounted = useIsMounted;