Merge branch 'main' into ai-textarea-adjustments

Author: ndeshev

packages/base/src/features/OpenUI5Support.ts

@@ -165,9 +165,9 @@ class OpenUI5Support {
 			animationMode: config.getAnimationMode(),
 			language: config.getLanguage(),
 			theme: config.getTheme(),
-			themeRoot: config.getThemeRoot(),
+			themeRoot: typeof config.getThemeRoot === "function" ? config.getThemeRoot() : undefined,
 			rtl: config.getRTL(),
-			timezone: config.getTimezone(),
+			timezone: typeof config.getTimezone === "function" ? config.getTimezone() : undefined,
 			calendarType: config.getCalendarType(),
 			formatSettings: {
 				firstDayOfWeek: LocaleData ? LocaleData.getInstance(config.getLocale()).getFirstDayOfWeek() : undefined,

packages/base/src/features/patchPatcher.ts

@@ -1,19 +1,30 @@
-type OpenUI5Patcher = {
-	prototype: {
-		_mAttributes: { [key: string]: string },
-		openEnd: () => OpenUI5Patcher,
-	}
+type PatcherTarget = {
+	_mAttributes: { [key: string]: string },
+	openEnd: () => OpenUI5Patcher,
 };
 
-const patchPatcher = (Patcher: OpenUI5Patcher) => {
-	const origOpenEnd = Patcher.prototype.openEnd;
-	Patcher.prototype.openEnd = function openEnd() {
-		if (this._mAttributes.popover) {
+type OpenUI5Patcher = { prototype: PatcherTarget } // newer versions (on prototype)
+	| PatcherTarget; // older versions (on constructor directly)
+
+const patchOpenEnd = (target: PatcherTarget) => {
+	const origOpenEnd = target.openEnd;
+	target.openEnd = function openEnd() {
+		if (this._mAttributes?.popover) {
 			delete this._mAttributes.popover; // The "popover" attribute will be managed externally, don't let Patcher remove it
 		}
 		return origOpenEnd.apply(this);
 	};
 };
 
+const patchPatcher = (Patcher: OpenUI5Patcher) => {
+	// Newer version: properties are on prototype
+	if ("prototype" in Patcher && "openEnd" in Patcher.prototype) {
+		patchOpenEnd(Patcher.prototype);
+	} else if ("openEnd" in Patcher) {
+		// Older version: properties are on constructor directly
+		patchOpenEnd(Patcher);
+	}
+};
+
 export default patchPatcher;
 export type { OpenUI5Patcher };

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

@@ -7,11 +7,20 @@ import ComboBox from "../../src/ComboBox.js";
 import ComboBoxItem from "../../src/ComboBoxItem.js";
 import ResponsivePopover from "../../src/ResponsivePopover.js";
 
+let OpenUI5Element;
+
 function onOpenUI5InitMethod(win) {
-	(win as any).sap.ui.require(["sap/ui/core/HTML", "sap/m/Button", "sap/m/Dialog", "sap/m/Popover", "sap/m/Input"], async (HTML, Button, Dialog, Popover, Input) => {
+	(win as any).sap.ui.require([
+		"sap/ui/core/Element",
+		"sap/ui/core/HTML",
+		"sap/m/Button",
+		"sap/m/Dialog",
+		"sap/m/Popover",
+		"sap/m/Input"
+	], async (Element, HTML, Button, Dialog, Popover, Input) => {
 
 		await OpenUI5Support.init();
-
+		OpenUI5Element = Element;
 		new Button("openUI5Button", {
 			text: "Open OpenUI5 Dialog",
 			press: function () {
@@ -21,7 +30,7 @@ function onOpenUI5InitMethod(win) {
 					content: [
 						new HTML({
 							content:
-`<ui5-select id="webCSelect1">
+								`<ui5-select id="webCSelect1">
 	<ui5-option>Option 1</ui5-option>
 	<ui5-option>Option 2</ui5-option>
 	<ui5-option>Option 3</ui5-option>
@@ -206,6 +215,15 @@ function openUI5Popover(win, opener) {
 	});
 }
 
+function isOpenUI5DialogOpen($dialog) {
+	expect(OpenUI5Element).to.exist;
+
+	const dialogInstance = OpenUI5Element.getElementById($dialog.attr("id"));
+
+	expect(dialogInstance).to.exist
+	expect(dialogInstance.isOpen()).to.be.true;
+};
+
 describe("ui5 and web components integration", () => {
 	beforeEach(() => {
 		// mount the components
@@ -480,6 +498,10 @@ describe("ui5 and web components integration", () => {
 			.find('input')
 			.focus();
 
+		cy.get("#openUI5Combobox1")
+			.find('input')
+			.should('be.focused');
+
 		cy.realPress("Escape");
 
 		cy.get('#dialog1')
@@ -518,12 +540,11 @@ describe("ui5 and web components integration", () => {
 			.should('be.visible')
 			.realClick();
 
-		cy.get<Dialog>("#respPopover").ui5DialogOpened();
+		cy.get<ResponsivePopover>("#respPopover").ui5ResponsivePopoverOpened();
 
 		cy.realPress("Escape");
 
-		cy.get("#respPopover")
-			.should('not.be.visible');
+		cy.get<ResponsivePopover>("#respPopover").ui5ResponsivePopoverClosed();
 
 		cy.get("#openUI5Dialog1")
 			.should('be.visible');
@@ -549,12 +570,12 @@ describe("ui5 and web components integration", () => {
 			.should('be.visible')
 			.realClick();
 
-		cy.get<Dialog>("#respPopoverNoInitialFocus").ui5DialogOpened();
+		cy.get<ResponsivePopover>("#respPopoverNoInitialFocus").ui5ResponsivePopoverOpened();
 
 		cy.realPress("Escape");
 
-		cy.get("#respPopoverNoInitialFocus")
-			.should('not.be.visible');
+		cy.get<ResponsivePopover>("#respPopoverNoInitialFocus")
+			.ui5ResponsivePopoverClosed();
 
 		cy.get("#openResPopoverNoInitialFocusButton")
 			.should('be.focused');
@@ -591,8 +612,8 @@ describe("ui5 and web components integration", () => {
 
 		cy.get("#webCSelect1")
 			.shadow()
-			.find("[ui5-responsive-popover]")
-			.should('not.be.visible');
+			.find<ResponsivePopover>("[ui5-responsive-popover]")
+			.ui5ResponsivePopoverClosed();
 
 		cy.get("#openUI5Dialog1")
 			.should('be.visible');
@@ -631,8 +652,8 @@ describe("ui5 and web components integration", () => {
 
 		cy.get("#webCComboBox1")
 			.shadow()
-			.find("[ui5-responsive-popover]")
-			.should('not.be.visible');
+			.find<ResponsivePopover>("[ui5-responsive-popover]")
+			.ui5ResponsivePopoverClosed();
 
 		cy.get("#openUI5Dialog1")
 			.should('be.visible');
@@ -688,7 +709,9 @@ describe("ui5 and web components integration", () => {
 			.realClick();
 
 		cy.get("#openUI5DialogFinal")
-			.should('be.visible');
+			.should('be.visible')
+			.should(isOpenUI5DialogOpen);
+		cy.wait(1000);
 
 		cy.get("#openUI5Dialog1")
 			.should('not.be.visible');
@@ -706,7 +729,9 @@ describe("ui5 and web components integration", () => {
 			.should('not.exist');
 
 		cy.get("#openUI5DialogWithButtons")
-			.should('be.visible');
+			.should('be.visible')
+			.should(isOpenUI5DialogOpen);
+		cy.wait(100);
 
 		cy.realPress("Escape");
 

packages/main/src/themes/Token.css

@@ -20,13 +20,13 @@
 	background: var(--sapButton_Hover_Background);
 }
 
-:host([selected]) {
+:host(:not([readonly])[selected]) {
 	background: var(--sapButton_Selected_Background);
 	border: var(--sapButton_BorderWidth) solid var(--sapButton_Selected_BorderColor);
 	color: var(--sapButton_Selected_TextColor);
 }
 
-:host([selected]) .ui5-token--wrapper::before {
+:host(:not([readonly])[selected]) .ui5-token--wrapper::before {
 	content: "";
 	position: absolute;
 	border-bottom: var(--_ui5_token_selected_internal_border_bottom);
@@ -40,6 +40,11 @@
 	pointer-events: none;
 }
 
+:host([readonly][selected]) .ui5-token--text {
+	background: var(--sapSelectedColor);
+	color: var(--sapContent_ContrastTextColor);
+}
+
 :host([selected]:hover) {
 	background: var(--sapButton_Selected_Hover_Background);
 }
@@ -58,7 +63,7 @@
 	outline: var(--_ui5_token_selected_focus_outline);
 }
 
-:host([focused][selected]:not(:hover)) {
+:host(:not([readonly])[focused][selected]:not(:hover)) {
 	background: var(--sapButton_Selected_Background);
 	color: var(--sapButton_Selected_TextColor);
 	border: var(--_ui5_token_focused_selected_border);