fix(ui5-popup): position arrows correctly (#2917)

When the Popover is aligned horizontally against the opener,
but it is wider than the opener, the arrows will be centered to the middle of the opener element.

Fixes: #2758
Fixes: #2401

Author: georgimkv

packages/main/src/Popover.js

@@ -529,9 +529,7 @@ class Popover extends Popup {
 
 		let maxContentHeight = Math.round(maxHeight);
 
-		const hasHeader = this.header.length || this.headerText;
-
-		if (hasHeader) {
+		if (this._displayHeader) {
 			const headerDomRef = this.shadowRoot.querySelector(".ui5-popup-header-root")
 				|| this.shadowRoot.querySelector(".ui5-popup-header-text");
 
@@ -542,9 +540,7 @@ class Popover extends Popup {
 
 		this._maxContentHeight = maxContentHeight;
 
-		const arrowXCentered = this.horizontalAlign === PopoverHorizontalAlign.Center || this.horizontalAlign === PopoverHorizontalAlign.Stretch;
-		const arrowTranslateX = isVertical && arrowXCentered ? targetRect.left + targetRect.width / 2 - left - popoverSize.width / 2 : 0;
-		const arrowTranslateY = !isVertical ? targetRect.top + targetRect.height / 2 - top - popoverSize.height / 2 : 0;
+		let arrowPos = this.getArrowPosition(targetRect, popoverSize, left, isVertical);
 
 		if (this._left === undefined || Math.abs(this._left - left) > 1.5) {
 			this._left = Math.round(left);
@@ -555,14 +551,50 @@ class Popover extends Popup {
 		}
 
 		return {
-			arrowX: Math.round(arrowTranslateX),
-			arrowY: Math.round(arrowTranslateY),
+			arrowX: arrowPos.x,
+			arrowY: arrowPos.y,
 			top: this._top,
 			left: this._left,
 			placementType,
 		};
 	}
 
+	/**
+	 * Calculates the position for the arrow.
+	 * @private
+	 * @param targetRect BoundingClientRect of the target element
+	 * @param popoverSize Width and height of the popover
+	 * @param left Left offset of the popover
+	 * @param isVertical if the popover is positioned vertically to the target element
+	 * @returns {{x: number, y: number}} Arrow's coordinates
+	 */
+	getArrowPosition(targetRect, popoverSize, left, isVertical) {
+		let arrowXCentered = this.horizontalAlign === PopoverHorizontalAlign.Center || this.horizontalAlign === PopoverHorizontalAlign.Stretch;
+
+		if (this.horizontalAlign === PopoverHorizontalAlign.Right && left <= targetRect.left) {
+			arrowXCentered = true;
+		}
+
+		if (this.horizontalAlign === PopoverHorizontalAlign.Left && left + popoverSize.width >= targetRect.left + targetRect.width) {
+			arrowXCentered = true;
+		}
+
+		let arrowTranslateX = 0;
+		if (isVertical && arrowXCentered) {
+			arrowTranslateX = targetRect.left + targetRect.width / 2 - left - popoverSize.width / 2;
+		}
+
+		let arrowTranslateY = 0;
+		if (!isVertical) {
+			arrowTranslateY = targetRect.top + targetRect.height / 2 - top - popoverSize.height / 2;
+		}
+
+		return {
+			x: Math.round(arrowTranslateX),
+			y: Math.round(arrowTranslateY),
+		};
+	}
+
 	/**
 	 * Fallbacks to new placement, prioritizing <code>Left</code> and <code>Right</code> placements.
 	 * @private

packages/main/test/pages/Popover.html

@@ -368,6 +368,15 @@
 		</div>
 	</ui5-popover>
 
+	<div style="text-align: right;">
+		<p>Right-aligned Popover, wider than button, arrow should be centered on the button</p>
+		<ui5-button id="btnOpenXRightWide">Open</ui5-button>
+	</div>
+
+	<ui5-popover id="popXRightWide" placement-type="Bottom" horizontal-align="Right">
+		Lorem ipsum dolor sit amet consectetur adipisicing elit. Magni architecto tenetur quia nam reprehenderit quas eveniet possimus similique quisquam culpa distinctio ex doloremque molestiae maxime sed harum, in exercitationem! Incidunt?
+	</ui5-popover>
+
 	<br>
 	<br>
 
@@ -502,6 +511,10 @@
 			popWithDiv.openBy(event.target);
 		});
 
+		btnOpenXRightWide.addEventListener("click", function () {
+			popXRightWide.openBy(btnOpenXRightWide);
+		});
+
 	</script>
 </body>