fix(ui5-popover): fix horizontal placement (Start and End) in rtl mode

packages/fiori/src/ShellBar.ts

@@ -41,7 +41,6 @@ import type {
 	UI5CustomEvent,
 } from "@ui5/webcomponents-base";
 import type ListItemBase from "@ui5/webcomponents/dist/ListItemBase.js";
-import type PopoverHorizontalAlign from "@ui5/webcomponents/dist/types/PopoverHorizontalAlign.js";
 import throttle from "@ui5/webcomponents-base/dist/util/throttle.js";
 import { getScopedVarName } from "@ui5/webcomponents-base/dist/CustomElementsScope.js";
 import getActiveElement from "@ui5/webcomponents-base/dist/util/getActiveElement.js";
@@ -1524,10 +1523,6 @@ class ShellBar extends UI5Element {
 		return this.primaryTitle || this.showLogoInMenuButton;
 	}
 
-	get popoverHorizontalAlign(): `${PopoverHorizontalAlign}` {
-		return this.effectiveDir === "rtl" ? "Start" : "End";
-	}
-
 	get hasAssistant() {
 		return !!this.assistant.length;
 	}

packages/fiori/src/ShellBarPopoverTemplate.tsx

@@ -1,5 +1,6 @@
 import Popover from "@ui5/webcomponents/dist/Popover.js";
 import List from "@ui5/webcomponents/dist/List.js";
+import PopoverHorizontalAlign from "@ui5/webcomponents/dist/types/PopoverHorizontalAlign.js";
 import ListItemStandard from "@ui5/webcomponents/dist/ListItemStandard.js";
 import type ShellBar from "./ShellBar.js";
 
@@ -21,7 +22,7 @@ export default function PopoversTemplate(this: ShellBar) {
 			<Popover class="ui5-shellbar-overflow-popover"
 				placement="Bottom"
 				preventInitialFocus={true}
-				horizontalAlign={this.popoverHorizontalAlign}
+				horizontalAlign={PopoverHorizontalAlign.End}
 				hideArrow={true}
 				onBeforeOpen={this._overflowPopoverBeforeOpen}
 				onClose={this._overflowPopoverAfterClose}

packages/main/cypress/specs/Popover.cy.tsx

@@ -266,40 +266,40 @@ describe("Accessibility", () => {
 				<div slot="header" />
 			</Popover>
 		);
-	
+
 		cy.get("[ui5-popover]").invoke("removeAttr", "accessible-name");
-	
+
 		cy.get("[ui5-popover]")
 			.shadow()
 			.find(".ui5-popup-root")
 			.should("have.attr", "aria-labelledby");
-	
+
 		cy.get("[ui5-popover]")
 			.shadow()
 			.find(".ui5-popup-root")
 			.should("not.have.attr", "aria-label");
 	});
-	
+
 	it("should use aria-label when accessible-name attribute is set dynamically", () => {
 		cy.mount(
 			<Popover accessibleName="This popover is important">
 				<div slot="header" />
 			</Popover>
 		);
-	
+
 		cy.get("[ui5-popover]").invoke("attr", "accessible-name", "text");
-	
+
 		cy.get("[ui5-popover]")
 			.shadow()
 			.find(".ui5-popup-root")
 			.should("not.have.attr", "aria-labelledby");
-	
+
 		cy.get("[ui5-popover]")
 			.shadow()
 			.find(".ui5-popup-root")
 			.should("have.attr", "aria-label");
 	});
-	
+
 
 	it("tests accessible-name-ref", () => {
 		cy.mount(
@@ -652,25 +652,25 @@ describe("Popover opener", () => {
 		  </Popover>
 		 </>
 		);
-	 
+
 		cy.get("#first-focusable").should("be.focused");
-	 
+
 		cy.realPress("Tab");
 		cy.wait(500);
 		cy.get("#li1").should("be.focused");
 		cy.get("#first-focusable").should("not.be.focused");
-	 
+
 		cy.realPress("Tab");
-	 
+
 		cy.get("#first-focusable").should("be.focused");
-	 
+
 		cy.realPress("Tab");
 		cy.realPress("Tab");
-	 
+
 		cy.get("#first-focusable").should("be.focused");
-	 
+
 		cy.realPress("Escape");
-	 
+
 		cy.get("[ui5-popover]").should("not.be.visible");
 	   });
 
@@ -967,7 +967,7 @@ describe("Popover opener", () => {
 
 				pop.addEventListener("ui5-before-open", async () => {
 					const applyFocusResult = pop.applyFocus();
-					pop.remove(); 
+					pop.remove();
 
 					try {
 						await applyFocusResult;
@@ -1020,31 +1020,31 @@ describe("Popover opener", () => {
 			const container = document.createElement("div");
 			container.id = "container";
 			root[0].appendChild(container);
-	
+
 			const shadowRoot = container.attachShadow({ mode: "open" });
-	
+
 			const opener = document.createElement("ui5-button");
 			opener.setAttribute("id", "lnk");
 			opener.textContent = "Open Popover";
 			shadowRoot.appendChild(opener);
-	
+
 			const popover = document.createElement("ui5-popover");
 			popover.setAttribute("id", "pop");
 			popover.setAttribute("header-text", "Popover in Shadow Root");
 			popover.setAttribute("opener", "lnk");
-	
+
 			const content = document.createElement("div");
 			content.textContent = "Popover content";
 			popover.appendChild(content);
-	
+
 			shadowRoot.appendChild(popover);
 		});
-	
+
 		cy.get("#container")
 			.shadow()
 			.find("#lnk")
 			.realClick();
-	
+
 		cy.get("#container")
 			.shadow()
 			.find("#pop")
@@ -1053,7 +1053,7 @@ describe("Popover opener", () => {
 		cy.get("#container").then(container => {
 			container.remove();
 		});
-	});	
+	});
 
 	it("tests opener set as ID in window.document, while popover is in a shadow root", () => {
 		cy.mount(
@@ -1421,6 +1421,82 @@ describe("Placement", () => {
 				expect(top).to.be.lt(100)
 			});
 	});
+
+	it("placement=Start in RTL", () => {
+		cy.mount(
+			<div dir="rtl">
+				<Button id="btnStart" style="position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);">Open</Button>
+				<Popover id="popoverStart"
+					headerText="Start Placement"
+					opener="btnStart"
+					placement="Start">
+					<div style="width: 150px; padding: 10px;">
+						Popover with Start placement in RTL mode
+					</div>
+				</Popover>
+			</div>
+		);
+
+		cy.get("[ui5-popover]").invoke("prop", "open", true);
+
+		cy.get<Popover>("[ui5-popover]").should("be.visible");
+
+		// wait for the popover to be positioned
+		// eslint-disable-next-line cypress/no-unnecessary-waiting
+		cy.wait(200);
+
+		let popover;
+		cy.get('[ui5-popover]')
+			.then($popover => {
+				popover = $popover;
+			});
+
+		cy.get('#btnStart').should($opener => {
+			const popoverRect = popover[0].getBoundingClientRect();
+			const openerRect = $opener[0].getBoundingClientRect();
+
+			// In RTL mode, Start placement should position popover to the right of the opener
+			expect(popoverRect.left).to.be.greaterThan(openerRect.right - 5);
+		});
+	});
+
+	it("placement=End in RTL", () => {
+		cy.mount(
+			<div dir="rtl">
+				<Button id="btnEnd" style="position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);">Open</Button>
+				<Popover id="popoverEndg"
+					headerText="End Placement"
+					opener="btnEnd"
+					placement="End">
+					<div style="width: 150px; padding: 10px;">
+						Popover with End placement in RTL mode
+					</div>
+				</Popover>
+			</div>
+		);
+
+		cy.get("[ui5-popover]").invoke("prop", "open", true);
+
+		cy.get<Popover>("[ui5-popover]").should("be.visible");
+
+		// wait for the popover to be positioned
+		// eslint-disable-next-line cypress/no-unnecessary-waiting
+		cy.wait(200);
+
+		let popover;
+		cy.get('[ui5-popover]')
+			.then($popover => {
+				popover = $popover;
+			});
+
+		cy.get('#btnEnd').should($opener => {
+			const popoverRect = popover[0].getBoundingClientRect();
+			const openerRect = $opener[0].getBoundingClientRect();
+
+			// In RTL mode, End placement should position popover to the left of the opener
+			expect(popoverRect.right).to.be.lessThan(openerRect.left + 5);
+		});
+	});
 });
 
 describe("Alignment", () => {

packages/main/src/ComboBox.ts

@@ -87,7 +87,6 @@ import "./ComboBoxItemGroup.js";
 // eslint-disable-next-line
 import { isInstanceOfComboBoxItemGroup } from "./ComboBoxItemGroup.js";
 import type ComboBoxFilter from "./types/ComboBoxFilter.js";
-import PopoverHorizontalAlign from "./types/PopoverHorizontalAlign.js";
 import type Input from "./Input.js";
 import type { InputEventDetail } from "./Input.js";
 import type InputComposition from "./features/InputComposition.js";
@@ -1479,10 +1478,6 @@ class ComboBox extends UI5Element implements IFormInputElement {
 		return !this.valueStateMessage.length && this.hasValueStateText;
 	}
 
-	get _valueStatePopoverHorizontalAlign(): `${PopoverHorizontalAlign}` {
-		return this.effectiveDir !== "rtl" ? PopoverHorizontalAlign.Start : PopoverHorizontalAlign.End;
-	}
-
 	/**
 	 * This method is relevant for sap_horizon theme only
 	 */

packages/main/src/ComboBoxPopoverTemplate.tsx

@@ -2,6 +2,7 @@ import Icon from "./Icon.js";
 import Button from "./Button.js";
 import List from "./List.js";
 import Input from "./Input.js";
+import PopoverHorizontalAlign from "./types/PopoverHorizontalAlign.js";
 import Popover from "./Popover.js";
 import ResponsivePopover from "./ResponsivePopover.js";
 import BusyIndicator from "./BusyIndicator.js";
@@ -116,7 +117,7 @@ export default function ComboBoxPopoverTemplate(this: ComboBox) {
 			hideArrow={true}
 			tabindex={-1}
 			class="ui5-valuestatemessage-popover"
-			horizontalAlign={this._valueStatePopoverHorizontalAlign}
+			horizontalAlign={PopoverHorizontalAlign.Start}
 			placement="Bottom"
 			opener={this}
 			open={this.valueStateOpen}

packages/main/src/Input.ts

@@ -62,7 +62,7 @@ import InputType from "./types/InputType.js";
 import type Popover from "./Popover.js";
 import type Icon from "./Icon.js";
 import type { IIcon } from "./Icon.js";
-import type PopoverHorizontalAlign from "./types/PopoverHorizontalAlign.js";
+
 // Templates
 import InputTemplate from "./InputTemplate.js";
 import { StartsWith } from "./Filters.js";
@@ -1969,10 +1969,6 @@ class Input extends UI5Element implements SuggestionComponent, IFormInputElement
 		return "";
 	}
 
-	get _valueStatePopoverHorizontalAlign(): `${PopoverHorizontalAlign}` {
-		return this.effectiveDir !== "rtl" ? "Start" : "End";
-	}
-
 	/**
 	 * This method is relevant for sap_horizon theme only
 	 */

packages/main/src/InputPopoverTemplate.tsx

@@ -6,6 +6,7 @@ import alert from "@ui5/webcomponents-icons/dist/alert.js";
 import sysEnter2 from "@ui5/webcomponents-icons/dist/sys-enter-2.js";
 import information from "@ui5/webcomponents-icons/dist/information.js";
 
+import PopoverHorizontalAlign from "./types/PopoverHorizontalAlign.js";
 import Popover from "./Popover.js";
 import ValueState from "@ui5/webcomponents-base/dist/types/ValueState.js";
 
@@ -24,7 +25,7 @@ export default function InputPopoverTemplate(this: Input, hooks?: { suggestionsL
 					class="ui5-valuestatemessage-popover"
 					placement="Bottom"
 					tabindex={-1}
-					horizontalAlign={this._valueStatePopoverHorizontalAlign}
+					horizontalAlign={PopoverHorizontalAlign.Start}
 					opener={this}
 					open={this.valueStateOpen}
 					onClose={this._handleValueStatePopoverAfterClose}

packages/main/src/MenuItem.ts

@@ -30,7 +30,6 @@ import type { ListItemAccessibilityAttributes } from "./ListItem.js";
 import type List from "./List.js";
 import ListItem from "./ListItem.js";
 import type ResponsivePopover from "./ResponsivePopover.js";
-import type PopoverPlacement from "./types/PopoverPlacement.js";
 import { isInstanceOfMenuSeparator } from "./MenuSeparator.js";
 import { isInstanceOfMenuItemGroup } from "./MenuItemGroup.js";
 import MenuItemTemplate from "./MenuItemTemplate.js";
@@ -357,10 +356,6 @@ class MenuItem extends ListItem implements IMenuItem {
 		}
 	}
 
-	get placement(): `${PopoverPlacement}` {
-		return this.isRtl ? "Start" : "End";
-	}
-
 	get isRtl() {
 		return this.effectiveDir === "rtl";
 	}

packages/main/src/MenuItemTemplate.tsx

@@ -1,4 +1,5 @@
 import type MenuItem from "./MenuItem.js";
+import PopoverPlacement from "./types/PopoverPlacement.js";
 import ResponsivePopover from "./ResponsivePopover.js";
 import Button from "./Button.js";
 import List from "./List.js";
@@ -91,7 +92,7 @@ function listItemPostContent(this: MenuItem) {
 		preventFocusRestore={true}
 		hideArrow={true}
 		allowTargetOverlap={true}
-		placement={this.placement}
+		placement={PopoverPlacement.End}
 		verticalAlign="Top"
 		accessibleName={this.accessibleNameText}
 		onBeforeOpen={this._beforePopoverOpen}

packages/main/src/MultiComboBox.ts

@@ -112,7 +112,6 @@ import type ComboBoxFilter from "./types/ComboBoxFilter.js";
 import CheckBox from "./CheckBox.js";
 import Input from "./Input.js";
 import type { InputEventDetail } from "./Input.js";
-import type PopoverHorizontalAlign from "./types/PopoverHorizontalAlign.js";
 import SuggestionItem from "./SuggestionItem.js";
 import type InputComposition from "./features/InputComposition.js";
 
@@ -2199,10 +2198,6 @@ class MultiComboBox extends UI5Element implements IFormInputElement {
 		return shouldBeExpanded;
 	}
 
-	get _valueStatePopoverHorizontalAlign(): `${PopoverHorizontalAlign}` {
-		return this.effectiveDir !== "rtl" ? "Start" : "End";
-	}
-
 	get iconsCount() {
 		const slottedIconsCount = this.icon?.length || 0;
 		const clearIconCount = Number(this._effectiveShowClearIcon) ?? 0;