@opengeoweb/shared 4.5.0 → 4.6.1

package/index.esm.js

@@ -632,34 +632,55 @@ var useDraftFormHelpers = function useDraftFormHelpers() {
  * */
 var adjustPosition = function adjustPosition(bbox, containingView, position, setPosition) {
   var isHorizontallyLarger = bbox.width > containingView.width;
-  var isVerticallyLarger = bbox.height > containingView.height; // left screen
+  var isVerticallyLarger = bbox.height > containingView.height; // Check corner cases first
+  // bottom left
 
-  if (bbox.x < containingView.x || isHorizontallyLarger) {
+  if (bbox.x < containingView.x && bbox.bottom >= containingView.bottom) {
     var diffX = containingView.x - bbox.x;
-    setPosition(Object.assign(Object.assign({}, position), {
-      x: position.x + diffX
-    }));
-  } // right screen
-  else if (bbox.right >= containingView.right) {
+    var 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;
 
-      setPosition(Object.assign(Object.assign({}, position), {
-        x: position.x + _diffX
-      }));
-    } // top screen
-    else if (bbox.y < containingView.y || isVerticallyLarger) {
-        var diffY = containingView.y - bbox.y;
+      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), {
-          y: position.y + diffY
+          x: position.x + _diffX2
         }));
-      } // bottom screen
-      else if (bbox.bottom >= containingView.bottom) {
-          var _diffY = containingView.bottom - bbox.bottom;
+      } // right screen
+      else if (bbox.right >= containingView.right) {
+          var _diffX3 = containingView.right - bbox.right;
 
           setPosition(Object.assign(Object.assign({}, position), {
-            y: position.y + _diffY
+            x: position.x + _diffX3
           }));
-        }
+        } // top screen
+        else if (bbox.y < containingView.y || isVerticallyLarger) {
+            var _diffY2 = containingView.y - bbox.y;
+
+            setPosition(Object.assign(Object.assign({}, position), {
+              y: position.y + _diffY2
+            }));
+          } // bottom screen
+          else if (bbox.bottom >= containingView.bottom) {
+              var _diffY3 = containingView.bottom - bbox.bottom;
+
+              setPosition(Object.assign(Object.assign({}, position), {
+                y: position.y + _diffY3
+              }));
+            }
 };
 var useMakeSureContainerStaysInsideWindow = function useMakeSureContainerStaysInsideWindow(nodeRef, position, setPosition) {
   var onResizeWindow = React__default.useCallback(function () {
@@ -1698,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;
@@ -1836,43 +2002,18 @@ var DraggableComponent = function DraggableComponent(_a) {
   };
 
   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(className || toolcontainerId);
-  React__default.useEffect(function () {
-    var _a, _b; // update size when startSize has changed outside the component
-
-
-    if (startSize !== size) {
-      var node = (_a = nodeRef.current) === null || _a === void 0 ? void 0 : _a.firstChild;
-      var boundsNode = bounds === 'parent' ? (_b = nodeRef.current) === null || _b === void 0 ? void 0 : _b.parentNode : document.querySelector(bounds);
-      var startWidth = Number(startSize.width);
-
-      var _node$getBoundingClie2 = node.getBoundingClientRect(),
-          currentX = _node$getBoundingClie2.x,
-          currentWidth = _node$getBoundingClie2.width;
-
-      var _boundsNode$getBoundi = boundsNode.getBoundingClientRect(),
-          maxWidth = _boundsNode$getBoundi.width; // TODO: fix screen hugging issues in https://gitlab.com/opengeoweb/opengeoweb/-/issues/2924
-
-
-      if (isRightAligned) {
-        var newWidth = currentX + currentWidth - startWidth < 0 ? currentX + currentWidth : startWidth;
-        var newSize = Object.assign(Object.assign({}, startSize), {
-          width: newWidth
-        });
-        setSize(newSize);
-      } else {
-        var _newWidth = currentX + startWidth >= maxWidth ? maxWidth - currentX : startWidth;
-
-        var _newSize = Object.assign(Object.assign({}, startSize), {
-          width: _newWidth
-        });
-
-        setSize(_newSize);
-      }
-    } // eslint-disable-next-line react-hooks/exhaustive-deps
-
-  }, [startSize.width, startSize.height]);
   return isOpen ? /*#__PURE__*/React__default.createElement(DraggableComponent$1, {
     nodeRef: nodeRef,
     bounds: bounds,
@@ -2852,15 +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;
-      }
+      },
+      borderRadius: 0
     },
     '& .MuiSvgIcon-root': {
       transition: 'none',
@@ -2869,18 +3010,20 @@ 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': {
@@ -2927,8 +3070,13 @@ var TooltipSelect = function TooltipSelect(_a) {
     if (requiresCtrlToChange && (event.ctrlKey || event.metaKey) || !requiresCtrlToChange) {
       if (selectOpen) return;
       var direction = event.deltaY < 0 ? 1 : -1;
-      var newValue = list[Math.min(Math.max(currentIndex - direction, 0), list.length - 1)];
-      onChangeMouseWheel(newValue);
+      var newIndex = currentIndex - direction;
+
+      if (newIndex < 0 || newIndex >= list.length) {
+        return;
+      }
+
+      onChangeMouseWheel(list[newIndex]);
     }
   }, [selectOpen, currentIndex, list, onChangeMouseWheel, requiresCtrlToChange]);
   var onOpen = React.useCallback(function () {
@@ -2953,8 +3101,7 @@ var TooltipSelect = function TooltipSelect(_a) {
   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,
@@ -3005,7 +3152,8 @@ var TooltipSelect = function TooltipSelect(_a) {
           }
         }
       }
-    }
+    },
+    sx: noStyling ? undefined : tooltipContainerStyles(!!isEnabled, hasBackgroundColor)
   }, otherProps)));
 };
 

package/index.umd.js

@@ -485,32 +485,49 @@
 
     var adjustPosition = function adjustPosition(bbox, containingView, position, setPosition) {
       var isHorizontallyLarger = bbox.width > containingView.width;
-      var isVerticallyLarger = bbox.height > containingView.height; // left screen
+      var isVerticallyLarger = bbox.height > containingView.height; // Check corner cases first
+      // bottom left
 
-      if (bbox.x < containingView.x || isHorizontallyLarger) {
+      if (bbox.x < containingView.x && bbox.bottom >= containingView.bottom) {
         var diffX = containingView.x - bbox.x;
-        setPosition(__assign(__assign({}, position), {
-          x: position.x + diffX
-        }));
-      } // right screen
-      else if (bbox.right >= containingView.right) {
+        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;
-          setPosition(__assign(__assign({}, position), {
-            x: position.x + diffX
-          }));
-        } // top screen
-        else if (bbox.y < containingView.y || isVerticallyLarger) {
-            var diffY = containingView.y - bbox.y;
+          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), {
-              y: position.y + diffY
+              x: position.x + diffX
             }));
-          } // bottom screen
-          else if (bbox.bottom >= containingView.bottom) {
-              var diffY = containingView.bottom - bbox.bottom;
+          } // right screen
+          else if (bbox.right >= containingView.right) {
+              var diffX = containingView.right - bbox.right;
               setPosition(__assign(__assign({}, position), {
-                y: position.y + diffY
+                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 () {
@@ -1558,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.
@@ -1708,43 +1855,18 @@
       };
 
       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-" + (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,
@@ -2727,15 +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;
-          }
+          },
+          borderRadius: 0
         },
         '& .MuiSvgIcon-root': {
           transition: 'none',
@@ -2744,18 +2866,20 @@
           }
         },
         '&>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': {
@@ -2816,8 +2940,13 @@
         if (requiresCtrlToChange && (event.ctrlKey || event.metaKey) || !requiresCtrlToChange) {
           if (selectOpen) return;
           var direction = event.deltaY < 0 ? 1 : -1;
-          var newValue = list[Math.min(Math.max(currentIndex - direction, 0), list.length - 1)];
-          onChangeMouseWheel(newValue);
+          var newIndex = currentIndex - direction;
+
+          if (newIndex < 0 || newIndex >= list.length) {
+            return;
+          }
+
+          onChangeMouseWheel(list[newIndex]);
         }
       }, [selectOpen, currentIndex, list, onChangeMouseWheel, requiresCtrlToChange]);
       var onOpen = React__namespace.useCallback(function () {
@@ -2842,8 +2971,7 @@
       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,
@@ -2894,7 +3022,8 @@
               }
             }
           }
-        }
+        },
+        sx: noStyling ? undefined : tooltipContainerStyles(!!isEnabled, hasBackgroundColor)
       }, otherProps)));
     };
 

package/lib/components/ToolContainer/useHandleSizeFromOutsideComponent.d.ts

@@ -0,0 +1,33 @@
+import React from 'react';
+import { ControlPosition } from 'react-draggable';
+import { Size } from '../DraggableResizable/types';
+interface PositionAndSizeProps {
+    currentX: number;
+    newWidth: number;
+    maxWidth: number;
+    position: ControlPosition;
+    startSize: Size;
+}
+interface PositionAndSizePropsRight extends PositionAndSizeProps {
+    currentWidth: number;
+}
+export declare const getRightPositionAndSize: ({ currentX, currentWidth, newWidth, maxWidth, position, startSize, }: PositionAndSizePropsRight) => {
+    size: Size;
+    position: ControlPosition;
+};
+export declare const getLeftPositionAndSize: ({ currentX, newWidth, maxWidth, position, startSize, }: PositionAndSizeProps) => {
+    size: Size;
+    position: ControlPosition;
+};
+interface UseHandleSizeFromOutsideComponentProps {
+    nodeRef: React.RefObject<HTMLDivElement>;
+    startSize: Size;
+    bounds?: 'parent' | string;
+    isRightAligned: boolean;
+    size: Size;
+    setSize: (size: Size) => void;
+    position: ControlPosition;
+    setPosition: (position: ControlPosition) => void;
+}
+export declare const useHandleSizeFromOutsideComponent: ({ nodeRef, startSize, bounds, isRightAligned, size, setSize, position, setPosition, }: UseHandleSizeFromOutsideComponentProps) => void;
+export {};

package/lib/components/ToolContainer/useHandleSizeFromOutsideComponent.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opengeoweb/shared",
-  "version": "4.5.0",
+  "version": "4.6.1",
   "description": "GeoWeb shared library with shared components and utils for the opengeoweb project",
   "license": "Apache-2.0",
   "repository": {
@@ -14,12 +14,12 @@
   "peerDependencies": {
     "react": "^17.0.2",
     "@mui/material": "^5.10.8",
-    "@opengeoweb/theme": "4.5.0",
+    "@opengeoweb/theme": "4.6.1",
     "react-draggable": "^4.4.5",
     "re-resizable": "^6.9.0",
     "@redux-eggs/core": "^2.2.0",
     "react-redux": "^8.0.4",
-    "@opengeoweb/form-fields": "4.5.0",
+    "@opengeoweb/form-fields": "4.6.1",
     "react-hook-form": "^6.12.1",
     "moment": "^2.29.0",
     "moment-timezone": "^0.5.31",