@opengeoweb/shared 4.3.0 → 4.5.0

package/index.umd.js

@@ -1,8 +1,8 @@
 (function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react'), require('@mui/material'), require('@opengeoweb/theme'), require('react-hook-form'), require('@opengeoweb/form-fields'), require('react-draggable'), require('re-resizable'), require('lodash')) :
-    typeof define === 'function' && define.amd ? define(['exports', 'react', '@mui/material', '@opengeoweb/theme', 'react-hook-form', '@opengeoweb/form-fields', 'react-draggable', 're-resizable', 'lodash'], factory) :
-    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.Shared = {}, global.React, global.material, global.theme, global.reactHookForm, global.formFields, global.Draggable, global.reResizable, global.lodash));
-})(this, (function (exports, React, material, theme, reactHookForm, formFields, Draggable, reResizable, lodash) { 'use strict';
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react'), require('@mui/material'), require('@opengeoweb/theme'), require('react-hook-form'), require('@opengeoweb/form-fields'), require('lodash'), require('react-draggable'), require('re-resizable'), require('react-redux')) :
+    typeof define === 'function' && define.amd ? define(['exports', 'react', '@mui/material', '@opengeoweb/theme', 'react-hook-form', '@opengeoweb/form-fields', 'lodash', 'react-draggable', 're-resizable', 'react-redux'], factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.Shared = {}, global.React, global.material, global.theme, global.reactHookForm, global.formFields, global.lodash, global.Draggable, global.reResizable, global.reactRedux));
+})(this, (function (exports, React, material, theme, reactHookForm, formFields, lodash, Draggable, reResizable, reactRedux) { 'use strict';
 
     function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -110,35 +110,37 @@
     }
 
     var bgColors = {
-      green: '#fcffeb',
-      grey: '#f8f9f9',
-      purple: '#f8f9f9',
-      red: '#f9e8ea',
-      yellow: '#fff8eb'
+      green: 'geowebColors.functional.successOutline.fill',
+      grey: 'geowebColors.functional.disabledOutline.fill',
+      purple: 'geowebColors.functional.summaryOutline.fill',
+      red: 'geowebColors.functional.errorOutline.fill',
+      yellow: 'geowebColors.functional.warningOutline.fill',
+      blue: 'geowebColors.functional.notificationOutline.fill'
     };
     var borderColors = {
-      green: '#72bb23',
-      grey: '#9b9fb0',
-      purple: '#9d9df2',
-      red: '#f24a00',
-      yellow: '#ffa800'
+      green: 'geowebColors.functional.successOutline.borderColor',
+      grey: 'geowebColors.functional.disabledOutline.borderColor',
+      purple: 'geowebColors.functional.summaryOutline.borderColor',
+      red: 'geowebColors.functional.errorOutline.borderColor',
+      yellow: 'geowebColors.functional.warningOutline.borderColor',
+      blue: 'geowebColors.functional.notificationOutline.borderColor'
     };
 
     var tagStyle = function tagStyle(color) {
       // Set color to grey for summary
-      var bgcolor = bgColors[color];
+      var backgroundColor = bgColors[color];
       var borderColor = borderColors[color];
       return {
-        backgroundColor: bgcolor,
+        backgroundColor: backgroundColor,
         m: 0,
-        p: 0.5,
-        border: "2px solid " + borderColor,
+        p: 0,
+        border: '1px solid',
+        borderColor: borderColor,
         borderRadius: '4px',
-        width: '85px',
-        height: '20px',
-        color: '#051039',
-        maxHeight: '1em',
-        boxSizing: 'content-box'
+        width: '120px',
+        height: '18px',
+        lineHeight: '16px',
+        color: 'geowebColors.captions.captionStatus.rgba'
       };
     };
 
@@ -481,6 +483,51 @@
       };
     };
 
+    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(__assign(__assign({}, position), {
+          x: position.x + diffX
+        }));
+      } // right screen
+      else if (bbox.right >= containingView.right) {
+          var diffX = containingView.right - bbox.right;
+          setPosition(__assign(__assign({}, position), {
+            x: position.x + diffX
+          }));
+        } // top screen
+        else if (bbox.y < containingView.y || isVerticallyLarger) {
+            var diffY = containingView.y - bbox.y;
+            setPosition(__assign(__assign({}, position), {
+              y: position.y + diffY
+            }));
+          } // bottom screen
+          else if (bbox.bottom >= containingView.bottom) {
+              var diffY = containingView.bottom - bbox.bottom;
+              setPosition(__assign(__assign({}, position), {
+                y: position.y + diffY
+              }));
+            }
+    };
+    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);
+        window.addEventListener('resize', throttledResize);
+        return function () {
+          window.removeEventListener('resize', throttledResize);
+        };
+      }, [onResizeWindow]);
+    };
+
     var ConfirmationServiceContext = /*#__PURE__*/React__namespace.createContext(Promise.reject);
     var useConfirmationDialog = function useConfirmationDialog() {
       return React__namespace.useContext(ConfirmationServiceContext);
@@ -890,29 +937,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,
@@ -927,32 +971,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: {
@@ -961,8 +1015,8 @@
           bottom: false,
           left: false,
           topRight: false,
-          bottomRight: !isRightAligned,
-          bottomLeft: isRightAligned,
+          bottomRight: true,
+          bottomLeft: true,
           topLeft: false
         },
         onResizeStart: onStartResize
@@ -1213,6 +1267,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.
@@ -1254,7 +1357,8 @@
             return {
               fontSize: 20,
               fontWeight: 400,
-              padding: '8px'
+              padding: '4px 8px',
+              height: 40
             };
           }
 
@@ -1291,31 +1395,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, {
@@ -1325,7 +1435,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, {
@@ -1349,11 +1460,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: {
@@ -1421,9 +1533,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,
@@ -1434,7 +1548,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: {
@@ -1502,42 +1617,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;
@@ -1545,50 +1678,73 @@
         onChangeSize({
           width: width,
           height: height
-        });
-      }, [onChangeSize]);
-      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;
-            setPosition(__assign(__assign({}, position), {
-              x: position.x + diffX
-            }));
-          } // top screen
-          else if (bbox.y < 0 || isVerticallyLarger) {
-              setPosition(__assign(__assign({}, position), {
-                y: position.y - bbox.y
-              }));
-            } // bottom screen
-            else if (bbox.y + bbox.height >= innerHeight) {
-                var diffY = innerHeight - bbox.y - bbox.height;
-                setPosition(__assign(__assign({}, position), {
-                  y: position.y + diffY
-                }));
-              }
-      }, [position]);
-      React__default["default"].useEffect(function () {
-        var throttledResize = lodash.throttle(onResizeWindow, 100);
-        window.addEventListener('resize', throttledResize);
-        return function () {
-          window.removeEventListener('resize', throttledResize);
-        };
-      }, [onResizeWindow]);
+        }); // 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);
       var toolcontainerId = React__default["default"].useRef(Date.now().toString()).current;
-      var headerClassName = "header-" + toolcontainerId;
+      var headerClassName = "header-" + (className || toolcontainerId);
+      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 startWidth = Number(startSize.width);
+
+          var _c = node.getBoundingClientRect(),
+              currentX = _c.x,
+              currentWidth = _c.width;
+
+          var maxWidth = boundsNode.getBoundingClientRect().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 = __assign(__assign({}, startSize), {
+              width: newWidth
+            });
+
+            setSize(newSize);
+          } else {
+            var newWidth = currentX + startWidth >= maxWidth ? maxWidth - currentX : startWidth;
+
+            var newSize = __assign(__assign({}, startSize), {
+              width: newWidth
+            });
+
+            setSize(newSize);
+          }
+        } // eslint-disable-next-line react-hooks/exhaustive-deps
+
+      }, [startSize.width, startSize.height]);
       return isOpen ? /*#__PURE__*/React__default["default"].createElement(DraggableComponent$1, {
         nodeRef: nodeRef,
         bounds: bounds,
@@ -1596,18 +1752,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,
@@ -1618,7 +1779,9 @@
         isResizable: true,
         elevation: elevation,
         headerClassName: headerClassName,
-        leftComponent: leftComponent
+        leftHeaderComponent: leftHeaderComponent,
+        rightHeaderComponent: rightHeaderComponent,
+        className: className
       }, children)))) : null;
     };
 
@@ -2290,7 +2453,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, {
@@ -2353,7 +2516,8 @@
         height: '24px',
         width: '24px',
         borderRadius: '5px',
-        marginTop: '4px',
+        marginTop: 'auto',
+        marginBottom: 'auto',
         color: function color() {
           if (!isEnabled) {
             return 'geowebColors.buttons.flat.disabled.color';
@@ -2401,7 +2565,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);
 
@@ -2409,13 +2574,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,
@@ -2445,13 +2610,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
-      });
+      }));
     };
 
     /* *
@@ -2473,9 +2652,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);
       };
 
@@ -2503,8 +2686,9 @@
           disableFocusRipple: true,
           tabIndex: -1
         }),
-        testId: "enableButton",
-        isEnabled: isEnabled
+        testId: id,
+        isEnabled: isEnabled,
+        className: className
       });
     };
 
@@ -2553,11 +2737,6 @@
             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) {
@@ -2583,10 +2762,11 @@
         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'
       }
     };
 
@@ -2628,7 +2808,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];
 
@@ -2643,23 +2823,23 @@
       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,
@@ -2718,6 +2898,64 @@
       }, otherProps)));
     };
 
+    function withEggs(eggs) {
+      return function (Component) {
+        var WithEggs = function WithEggs(props) {
+          var store = reactRedux.useStore();
+
+          var _a = __read(React__namespace.useState(function () {
+            return store.addEggs(eggs);
+          }), 1),
+              remover = _a[0];
+
+          React__namespace.useEffect(function () {
+            return remover;
+          }, [remover]);
+          return /*#__PURE__*/React__namespace.createElement(Component, __assign({}, props));
+        };
+
+        WithEggs.displayName = "withEggs(" + (Component.displayName || Component.name || 'Component') + ")";
+        return WithEggs;
+      };
+    }
+
+    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.
@@ -2780,6 +3018,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;
@@ -2787,13 +3045,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;
@@ -2808,7 +3069,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;
@@ -2820,13 +3083,16 @@
     exports.sliderHeaderStyle = sliderHeaderStyle;
     exports.tooltipContainerStyles = tooltipContainerStyles;
     exports.useConfirmationDialog = useConfirmationDialog;
+    exports.useControlledTooltip = useControlledTooltip;
     exports.useDialogActions = useDialogActions;
     exports.useDraftFormHelpers = useDraftFormHelpers;
     exports.useIsMounted = useIsMounted;
+    exports.useMakeSureContainerStaysInsideWindow = useMakeSureContainerStaysInsideWindow;
     exports.usePoller = usePoller;
     exports.usePreventBrowserClose = usePreventBrowserClose;
     exports.usePrevious = usePrevious;
     exports.useUserMenu = useUserMenu;
+    exports.withEggs = withEggs;
 
     Object.defineProperty(exports, '__esModule', { value: true });