@cashub/ui 0.19.13 → 0.19.15

package/map/GoogleMap.js

@@ -291,7 +291,6 @@ var Map = function Map(_ref2) {
               lat: latitude,
               lng: longitude
             };
-            map.panTo(coordinate);
             popup.setMap(map);
             popup.setPosition(coordinate);
             popup.setContent((0, _server.renderToString)(customPopup(location)));

package/map/subComponent/GoogleMapPopup.js

@@ -58,6 +58,8 @@ var GoogleMapPopup = /*#__PURE__*/_createClass(function GoogleMapPopup(options)
 
       _defineProperty(_assertThisInitialized(_this), "offset", 16);
 
+      _defineProperty(_assertThisInitialized(_this), "justRendered", false);
+
       _this.containerDiv = document.createElement('div');
 
       _this.containerDiv.classList.add('google-popup-content-wrapper');
@@ -81,6 +83,7 @@ var GoogleMapPopup = /*#__PURE__*/_createClass(function GoogleMapPopup(options)
       key: "onAdd",
       value: function onAdd() {
         this.getPanes().floatPane.appendChild(this.containerDiv);
+        this.justRendered = true;
       }
       /** Called when the popup is removed from the map. */
 
@@ -89,6 +92,7 @@ var GoogleMapPopup = /*#__PURE__*/_createClass(function GoogleMapPopup(options)
       value: function onRemove() {
         if (this.containerDiv.parentElement) {
           this.containerDiv.parentElement.removeChild(this.containerDiv);
+          this.justRendered = false;
         }
       }
       /** Called each frame when the popup needs to draw itself. */
@@ -97,7 +101,13 @@ var GoogleMapPopup = /*#__PURE__*/_createClass(function GoogleMapPopup(options)
       key: "draw",
       value: function draw() {
         if (this.position) {
-          var divPosition = this.getProjection().fromLatLngToDivPixel(this.position);
+          var divPosition = this.getProjection().fromLatLngToDivPixel(this.position); // On the first render, if we go beyond the map, pan the map
+
+          if (this.justRendered) {
+            this.fitMap();
+            this.justRendered = false;
+          }
+
           this.containerDiv.style.left = "".concat(divPosition.x, "px");
           this.containerDiv.style.top = "".concat(divPosition.y - this.offset, "px");
         }
@@ -118,6 +128,35 @@ var GoogleMapPopup = /*#__PURE__*/_createClass(function GoogleMapPopup(options)
           this.containerDiv.innerHTML = content;
         }
       }
+    }, {
+      key: "fitMap",
+      value: function fitMap() {
+        var projection = this.getProjection();
+        var _this$containerDiv = this.containerDiv,
+            offsetWidth = _this$containerDiv.offsetWidth,
+            offsetHeight = _this$containerDiv.offsetHeight;
+        var halfWidth = offsetWidth / 2;
+        var _this$containerDiv2 = this.containerDiv,
+            offsetTop = _this$containerDiv2.offsetTop,
+            offsetLeft = _this$containerDiv2.offsetLeft; // Calculate the coordinates of the four corners of the container
+        // because container use transform for position(-50%, -100%), so we need to subtract them
+
+        var topLeft = new window.google.maps.Point(offsetLeft - halfWidth, offsetTop - offsetHeight);
+        var topRight = new window.google.maps.Point(offsetLeft + offsetWidth - halfWidth, offsetTop - offsetHeight);
+        var bottomLeft = new window.google.maps.Point(offsetLeft - halfWidth, offsetTop + offsetHeight - offsetHeight);
+        var bottomRight = new window.google.maps.Point(offsetLeft + offsetWidth - halfWidth, offsetTop + offsetHeight - offsetHeight);
+        var northWest = projection.fromDivPixelToLatLng(topLeft);
+        var northEast = projection.fromDivPixelToLatLng(topRight);
+        var southWest = projection.fromDivPixelToLatLng(bottomLeft);
+        var southEast = projection.fromDivPixelToLatLng(bottomRight);
+        var popupBound = new window.google.maps.LatLngBounds();
+        popupBound.extend(northWest);
+        popupBound.extend(northEast);
+        popupBound.extend(southWest);
+        popupBound.extend(southEast);
+        popupBound.extend(this.position);
+        this.map.fitBounds(popupBound);
+      }
     }]);
 
     return MapPopup;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cashub/ui",
-  "version": "0.19.13",
+  "version": "0.19.15",
   "private": false,
   "author": "CASHUB Team",
   "description": "CASHUB UI components library",

package/section/SectionHeader.js

@@ -38,7 +38,7 @@ var SectionHeader = _styledComponents.default.div(_templateObject || (_templateO
   return backgroundReverse && 'background: var(--color-background2);';
 }, function (_ref6) {
   var sticky = _ref6.sticky;
-  return sticky && "position: sticky;\n    z-index:30;\n    top: ".concat(_header.default.height, ";\n  ");
+  return sticky && "position: sticky;\n    z-index:20;\n    top: ".concat(_header.default.height, ";\n  ");
 });
 
 var _default = SectionHeader;