@opengeoweb/shared 4.9.1 → 4.10.0

package/index.esm.js

@@ -1172,10 +1172,10 @@ var ResizeComponent = function ResizeComponent(_a) {
       right: false,
       bottom: false,
       left: false,
-      topRight: false,
+      topRight: true,
       bottomRight: true,
       bottomLeft: true,
-      topLeft: false
+      topLeft: true
     },
     onResizeStart: onStartResize
   }, props), children);
@@ -1882,6 +1882,31 @@ var calculateDialogSizeAndPosition = function calculateDialogSizeAndPosition() {
   };
 };
 var BASE_Z_INDEX = 100;
+var calculateNewPosition = function calculateNewPosition(position, isRightAligned, handle, delta) {
+  var x = position.x,
+      y = position.y; // If dragging the same side as alignment, adjust position
+
+  if (isRightAligned && handle === 'bottomRight') {
+    x = position.x + delta.width;
+  } else if (!isRightAligned && handle === 'bottomLeft') {
+    x = position.x - delta.width;
+  } else if (isRightAligned && handle === 'topRight') {
+    x = position.x + delta.width;
+    y = position.y - delta.height;
+  } else if (isRightAligned && handle === 'topLeft') {
+    y = position.y - delta.height;
+  } else if (!isRightAligned && handle === 'topRight') {
+    y = position.y - delta.height;
+  } else if (!isRightAligned && handle === 'topLeft') {
+    x = position.x - delta.width;
+    y = position.y - delta.height;
+  }
+
+  return {
+    x: x,
+    y: y
+  };
+};
 
 var DraggableComponent = function DraggableComponent(_a) {
   var title = _a.title,
@@ -1956,17 +1981,11 @@ var DraggableComponent = function DraggableComponent(_a) {
       initialMaxHeight = _React$useState6[0],
       setInitialMaxHeight = _React$useState6[1];
 
-  var _React$useState7 = React__default.useState(0),
-      _React$useState8 = _slicedToArray(_React$useState7, 2),
-      initialDragPositionX = _React$useState8[0],
-      setInitialDragPositionX = _React$useState8[1];
-
   var onStartResize = function onStartResize() {
     setInitialMaxHeight('initial');
-    setInitialDragPositionX(position.x);
   };
 
-  var onResize = React__default.useCallback(function (_event, _handle, node, delta) {
+  var onResize = React__default.useCallback(function (_event, handle, node, delta) {
     var _node$getBoundingClie = node.getBoundingClientRect(),
         width = _node$getBoundingClie.width,
         height = _node$getBoundingClie.height;
@@ -1974,33 +1993,14 @@ var DraggableComponent = function DraggableComponent(_a) {
     onChangeSize({
       width: width,
       height: height
-    }); // If dragging the same side as alignment, adjust position
-
-    if (isRightAligned && _handle === 'bottomRight') {
-      var newX = initialDragPositionX + delta.width; // eslint-disable-next-line no-param-reassign
-
-      node.parentNode.style.transform = "translate(".concat(newX, "px, ").concat(position.y, "px)");
-    } else if (!isRightAligned && _handle === 'bottomLeft') {
-      var _newX = initialDragPositionX - delta.width; // eslint-disable-next-line no-param-reassign
-
+    });
+    var newPos = calculateNewPosition(position, isRightAligned, handle, delta); // eslint-disable-next-line no-param-reassign
 
-      node.parentNode.style.transform = "translate(".concat(_newX, "px, ").concat(position.y, "px)");
-    }
-  }, [onChangeSize, initialDragPositionX, isRightAligned, position]);
+    node.parentNode.style.transform = "translate(".concat(newPos.x, "px, ").concat(newPos.y, "px)");
+  }, [onChangeSize, position, isRightAligned]);
 
   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
-      });
-    }
-
+    setPosition(calculateNewPosition(position, isRightAligned, direction, delta));
     onResizeStop(_event, direction, node, delta);
   };
 
@@ -3105,9 +3105,6 @@ var TooltipSelect = function TooltipSelect(_a) {
       hasBackgroundColor = _a.hasBackgroundColor,
       props = __rest(_a, ["tooltip", "list", "currentIndex", "onChangeMouseWheel", "requiresCtrlToChange", "isEnabled", "noStyling", "hasBackgroundColor"]);
 
-  props.disableUnderline;
-      var otherProps = __rest(props, ["disableUnderline"]);
-
   var _React$useState = React.useState(false),
       _React$useState2 = _slicedToArray(_React$useState, 2),
       selectOpen = _React$useState2[0],
@@ -3155,6 +3152,8 @@ var TooltipSelect = function TooltipSelect(_a) {
     placement: "top",
     open: tooltipOpen
   }, /*#__PURE__*/React.createElement(Select, Object.assign({
+    variant: "standard",
+    disableUnderline: true,
     onOpen: onOpen,
     onClose: onClose,
     onMouseEnter: onMouseEnter,
@@ -3206,7 +3205,7 @@ var TooltipSelect = function TooltipSelect(_a) {
       }
     },
     sx: noStyling ? undefined : tooltipContainerStyles(!!isEnabled, hasBackgroundColor)
-  }, otherProps)));
+  }, props)));
 };
 
 function withEggs(eggs) {

package/index.umd.js

@@ -1035,10 +1035,10 @@
           right: false,
           bottom: false,
           left: false,
-          topRight: false,
+          topRight: true,
           bottomRight: true,
           bottomLeft: true,
-          topLeft: false
+          topLeft: true
         },
         onResizeStart: onStartResize
       }, props), children);
@@ -1739,6 +1739,31 @@
       };
     };
     var BASE_Z_INDEX = 100;
+    var calculateNewPosition = function calculateNewPosition(position, isRightAligned, handle, delta) {
+      var x = position.x,
+          y = position.y; // If dragging the same side as alignment, adjust position
+
+      if (isRightAligned && handle === 'bottomRight') {
+        x = position.x + delta.width;
+      } else if (!isRightAligned && handle === 'bottomLeft') {
+        x = position.x - delta.width;
+      } else if (isRightAligned && handle === 'topRight') {
+        x = position.x + delta.width;
+        y = position.y - delta.height;
+      } else if (isRightAligned && handle === 'topLeft') {
+        y = position.y - delta.height;
+      } else if (!isRightAligned && handle === 'topRight') {
+        y = position.y - delta.height;
+      } else if (!isRightAligned && handle === 'topLeft') {
+        x = position.x - delta.width;
+        y = position.y - delta.height;
+      }
+
+      return {
+        x: x,
+        y: y
+      };
+    };
 
     var DraggableComponent = function DraggableComponent(_a) {
       var title = _a.title,
@@ -1810,16 +1835,11 @@
           initialMaxHeight = _v[0],
           setInitialMaxHeight = _v[1];
 
-      var _w = __read(React__default["default"].useState(0), 2),
-          initialDragPositionX = _w[0],
-          setInitialDragPositionX = _w[1];
-
       var onStartResize = function onStartResize() {
         setInitialMaxHeight('initial');
-        setInitialDragPositionX(position.x);
       };
 
-      var onResize = React__default["default"].useCallback(function (_event, _handle, node, delta) {
+      var onResize = React__default["default"].useCallback(function (_event, handle, node, delta) {
         var _a = node.getBoundingClientRect(),
             width = _a.width,
             height = _a.height;
@@ -1827,32 +1847,14 @@
         onChangeSize({
           width: width,
           height: height
-        }); // 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
+        });
+        var newPos = calculateNewPosition(position, isRightAligned, handle, delta); // 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]);
+        node.parentNode.style.transform = "translate(" + newPos.x + "px, " + newPos.y + "px)";
+      }, [onChangeSize, position, isRightAligned]);
 
       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
-          });
-        }
-
+        setPosition(calculateNewPosition(position, isRightAligned, direction, delta));
         onResizeStop(_event, direction, node, delta);
       };
 
@@ -2976,9 +2978,6 @@
           hasBackgroundColor = _a.hasBackgroundColor,
           props = __rest(_a, ["tooltip", "list", "currentIndex", "onChangeMouseWheel", "requiresCtrlToChange", "isEnabled", "noStyling", "hasBackgroundColor"]);
 
-      props.disableUnderline;
-          var otherProps = __rest(props, ["disableUnderline"]);
-
       var _f = __read(React__namespace.useState(false), 2),
           selectOpen = _f[0],
           setSelectOpen = _f[1];
@@ -3024,6 +3023,8 @@
         placement: "top",
         open: tooltipOpen
       }, /*#__PURE__*/React__namespace.createElement(material.Select, __assign({
+        variant: "standard",
+        disableUnderline: true,
         onOpen: onOpen,
         onClose: onClose,
         onMouseEnter: onMouseEnter,
@@ -3075,7 +3076,7 @@
           }
         },
         sx: noStyling ? undefined : tooltipContainerStyles(!!isEnabled, hasBackgroundColor)
-      }, otherProps)));
+      }, props)));
     };
 
     function withEggs(eggs) {

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

@@ -1,5 +1,6 @@
 import React from 'react';
 import { SxProps } from '@mui/material';
+import { NumberSize } from 're-resizable';
 import { DraggablePosition } from '../DraggableResizable/Draggable';
 import { Position, ResizableComponentProps, Size } from '../DraggableResizable/types';
 import { HeaderSize } from './types';
@@ -27,5 +28,6 @@ interface DraggableComponentProps extends Omit<ResizableComponentProps, 'bounds'
     rightHeaderComponent?: React.ReactNode;
     sx?: SxProps;
 }
+export declare const calculateNewPosition: (position: DraggablePosition, isRightAligned: boolean, handle: string, delta: NumberSize) => DraggablePosition;
 declare const DraggableComponent: React.FC<DraggableComponentProps>;
 export default DraggableComponent;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opengeoweb/shared",
-  "version": "4.9.1",
+  "version": "4.10.0",
   "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.9.1",
+    "@opengeoweb/theme": "4.10.0",
     "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.9.1",
+    "@opengeoweb/form-fields": "4.10.0",
     "react-hook-form": "^7.41.5",
     "moment": "^2.29.0",
     "moment-timezone": "^0.5.31",