@ui5/webcomponents-fiori 2.9.0 → 2.9.1-rc.0

package/CHANGELOG.md

@@ -3,6 +3,19 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [2.9.1-rc.0](https://github.com/SAP/ui5-webcomponents/compare/v2.9.0...v2.9.1-rc.0) (2025-04-10)
+
+
+### Bug Fixes
+
+* **ui5-dynamic-page:** adjust scroll padding for header/footer ([#11193](https://github.com/SAP/ui5-webcomponents/issues/11193)) ([d35b9ce](https://github.com/SAP/ui5-webcomponents/commit/d35b9ce60bc6e2af5ae5113b7018fc0a12489dc0)), closes [#10847](https://github.com/SAP/ui5-webcomponents/issues/10847)
+* **ui5-navigation-layout:** adjust `z-index` values ([#11212](https://github.com/SAP/ui5-webcomponents/issues/11212)) ([d7a368a](https://github.com/SAP/ui5-webcomponents/commit/d7a368a02ce3d8483d36e1f11fa4fc6b5ebc3ce3)), closes [#11174](https://github.com/SAP/ui5-webcomponents/issues/11174)
+* **ui5-search:** stabilitze mobile test ([#11292](https://github.com/SAP/ui5-webcomponents/issues/11292)) ([8a0d742](https://github.com/SAP/ui5-webcomponents/commit/8a0d74293cb20278049f6ba3f231207fc0a6a432))
+
+
+
+
+
 # [2.9.0](https://github.com/SAP/ui5-webcomponents/compare/v2.9.0-rc.3...v2.9.0) (2025-04-04)
 
 **Note:** Version bump only for package @ui5/webcomponents-fiori

package/cypress/specs/NotificationList.cy.tsx

@@ -8,48 +8,48 @@ function Sample() {
 			title-text="Group 1"
 			id="group1"
 			growing="Button">
-			<NotificationListItem id="item11" show-close>
+			<NotificationListItem id="item11" showClose>
 				Group 1 Item 1
 			</NotificationListItem>
-			<NotificationListItem show-close>
+			<NotificationListItem showClose>
 				Group 1 Item 2
 			</NotificationListItem>
-			<NotificationListItem show-close>
+			<NotificationListItem showClose>
 				Group 1 Item 3
 			</NotificationListItem>
-			<NotificationListItem id="item1last" show-close>
+			<NotificationListItem id="item1last" showClose>
 				Group 1 Item 4
 			</NotificationListItem>
 		</NotificationListGroupItem>
 		<NotificationListGroupItem
 			id="group2"
 			title-text="Group 2">
-			<NotificationListItem id="item21" show-close>
+			<NotificationListItem id="item21" showClose>
 				Group 2 Item 1
 			</NotificationListItem>
-			<NotificationListItem show-close>
+			<NotificationListItem showClose>
 				Group 2 Item 2
 			</NotificationListItem>
-			<NotificationListItem show-close>
+			<NotificationListItem showClose>
 				Group 2 Item 3
 			</NotificationListItem>
-			<NotificationListItem id="item2last" show-close>
+			<NotificationListItem id="item2last" showClose>
 				Group 2 Item 4
 			</NotificationListItem>
 		</NotificationListGroupItem>
 		<NotificationListGroupItem
 			growing="Button"
 			title-text="Group 3">
-			<NotificationListItem show-close>
+			<NotificationListItem showClose>
 				Group 3 Item 1
 			</NotificationListItem>
-			<NotificationListItem show-close>
+			<NotificationListItem showClose>
 				Group 3 Item 2
 			</NotificationListItem>
-			<NotificationListItem show-close>
+			<NotificationListItem showClose>
 				Group 3 Item 3
 			</NotificationListItem>
-			<NotificationListItem show-close>
+			<NotificationListItem showClose>
 				Group 3 Item 4
 			</NotificationListItem>
 		</NotificationListGroupItem>

package/cypress/specs/Page.cy.tsx

@@ -7,7 +7,6 @@ import Button from "@ui5/webcomponents/dist/Button.js";
 describe("Page general interaction", () => {
 	beforeEach(() => {
 		cy.mount(
-			// <ui5-page style="height: 300px;" show-footer>
 			<Page style="height: 300px;">
 				<Bar slot="header">
 					<Button slot="startContent">Header button</Button>

package/cypress/specs/Search.mobile.cy.tsx

@@ -146,16 +146,19 @@ describe("Search Field on mobile device", () => {
 
 		cy.get("[ui5-search]")
 			.realClick();
+		
+		cy.get("[ui5-search]")
+			.shadow()
+			.find(".ui5-search-popover-content")
+			.should("be.visible");
 
 		cy.get("[ui5-search]")
 			.shadow()
 			.find("[ui5-input]")
-			.shadow()
-			.find("input")
-			.type("test");
+			.realPress("T");
 
 		cy.get("[ui5-search]")
-			.should("have.prop", "value", "test");
+			.should("have.prop", "value", "T");
 
 		cy.get("[ui5-search]")
 			.shadow()

package/cypress/specs/SideNavigation.cy.tsx

@@ -69,7 +69,7 @@ describe("Side Navigation Rendering", () => {
 
 	it("Tests accessibility", () => {
 		cy.mount(
-			<SideNavigation id="sideNav" accessible-name="Main">
+			<SideNavigation id="sideNav" accessibleName="Main">
 			</SideNavigation>
 		);
 

package/cypress/specs/UploadCollection.cy.tsx

@@ -222,7 +222,7 @@ describe("UploadCollection Rendering", () => {
 					uploadState="Error" with retry button visible by default
 				</UploadCollectionItem>
 
-				<UploadCollectionItem id="uc3-error-hidden-retry" fileName="File name" uploadState="Error" hide-retry-button>
+				<UploadCollectionItem id="uc3-error-hidden-retry" fileName="File name" uploadState="Error" hideRetryButton>
 					<Icon name="document-text" slot="thumbnail"></Icon>
 					uploadState="Error" with hidden retry button
 				</UploadCollectionItem>
@@ -329,18 +329,96 @@ describe("UploadCollection Rendering", () => {
 
 describe("Events", () => {
 	it("Tests that item fires 'rename'", () => {
+		const renameEventStub = cy.stub();
+
+		cy.mount(
+			<UploadCollection id="uploadCollection">
+				<UploadCollectionItem id="item" onRename={renameEventStub} fileName="File name" type="Detail" />
+			</UploadCollection>);
+
+		cy.get("#item")
+			.shadow()
+			.find(".ui5-li-detailbtn")
+			.realClick();
+
+		cy.get("#item")
+			.shadow()
+			.find("#ui5-uci-edit-input")
+			.should("have.focus")
+			.realType("fileNameSuffix");
+
+		cy.realPress("Enter");
+
+		cy.wrap(renameEventStub)
+			.should("have.been.called");
 	});
 
 	it("Tests firing 'item-delete' regardless of the selectionMode", () => {
+		cy.mount(
+			<UploadCollection id="uploadCollection">
+				<UploadCollectionItem id="item" fileName="File name" />
+			</UploadCollection>);
+
+		cy.get("#item")
+			.shadow()
+			.find(".ui5-upload-collection-deletebtn")
+			.realClick();
+
+		cy.get("#uploadCollection")
+			.shadow()
+			.find("#item")
+			.should("not.exist");
 	});
 
 	it("Tests firing 'item-delete' when 'DELETE' key is pressed on item", () => {
+		cy.mount(
+			<UploadCollection id="uploadCollection">
+				<UploadCollectionItem id="item" fileName="File name" />
+			</UploadCollection>);
+
+		cy.get("#item")
+			.realClick();
+
+		cy.realPress("Delete");
+
+		cy.get("#uploadCollection")
+			.shadow()
+			.find("#item")
+			.should("not.exist");
 	});
 
 	it("Tests that item fires 'retry'", () => {
+		const retryEventStub = cy.stub();
+
+		cy.mount(
+			<UploadCollection id="uploadCollection">
+				<UploadCollectionItem id="item" onRetry={retryEventStub} fileName="File name" uploadState="Error" />
+			</UploadCollection>);
+
+		cy.get("#item")
+			.shadow()
+			.find(".ui5-uci-buttons ui5-button")
+			.realClick();
+
+		cy.wrap(retryEventStub)
+			.should("have.been.called");
 	});
 
 	it("Tests that item fires 'terminate'", () => {
+		const terminateEventStub = cy.stub();
+
+		cy.mount(
+			<UploadCollection id="uploadCollection">
+				<UploadCollectionItem id="item" onTerminate={terminateEventStub} fileName="File name" uploadState="Uploading" />
+			</UploadCollection>);
+
+		cy.get("#item")
+			.shadow()
+			.find(".ui5-uci-buttons ui5-button")
+			.realClick();
+
+		cy.wrap(terminateEventStub)
+			.should("have.been.called");
 	});
 });
 
@@ -348,8 +426,13 @@ describe("Keyboard handling", () => {
 	it("Tests item tab order", () => {
 		cy.mount(<UploadCollectionStatesSample />);
 
+		cy.get("#hiddenFileName")
+			.shadow()
+			.find("li")
+			.should("have.attr", "tabindex", "-1");
+
 		cy.get("#hiddenFileName").realClick();
-		cy.get("#hiddenFileName").should("be.focused");
+		cy.get("#hiddenFileName").should("have.focus");
 
 		cy.realPress("Tab");
 		cy.get("#hiddenFileName")
@@ -377,24 +460,220 @@ describe("Keyboard handling", () => {
 	});
 
 	it("Tests Tab through empty upload collection", () => {
+		cy.mount(<>
+			<button id="tabStop1">Tab stop helper</button>
+			<UploadCollection id="uploadCollection" />
+			<button id="tabStop2">Tab stop helper</button>
+		</>);
+
+		cy.get("#tabStop1").realClick();
+		cy.realPress("Tab");
+		cy.realPress("Tab");
+
+		cy.get("#uploadCollection")
+			.shadow()
+			.find(".uc-no-files")
+			.should("have.attr", "forced-tab-index", "0");
+
+		cy.get("#uploadCollection")
+			.shadow()
+			.find(".uc-no-files")
+			.should("not.have.focus");
+
+		cy.get("#tabStop2").should("have.focus");
 	});
 });
 
 describe("Edit - various file names", () => {
 	it("Tests that dots are preserved in the file name", () => {
+		cy.mount(
+			<UploadCollection id="uploadCollection">
+				<UploadCollectionItem id="item" fileName="File name" type="Detail" upload-state="Error" />
+			</UploadCollection>);
+
+		cy.get("#item")
+			.shadow()
+			.find(".ui5-li-detailbtn")
+			.realClick();
+
+		cy.get("#item")
+			.shadow()
+			.find("#ui5-uci-edit-input")
+			.should("have.focus")
+			.realType("last.reports-edited");
+
+		cy.realPress("Enter");
+
+		cy.get("#item")
+			.shadow()
+			.find(".ui5-uci-file-name")
+			.should("have.text", "last.reports-edited");
 	});
 
 	it("Tests that extension is able to be added, if there isn't such", () => {
+		const newFileName = "newFileName.newExtension";
+		const newFileName2 = "newFileName2";
+
+		cy.mount(
+			<UploadCollection id="uploadCollection">
+				<UploadCollectionItem id="item" fileName="File name" type="Detail" />
+			</UploadCollection>);
+
+		cy.get("#item")
+			.shadow()
+			.find(".ui5-li-detailbtn")
+			.realClick();
+
+		cy.get("#item")
+			.shadow()
+			.find("#ui5-uci-edit-input")
+			.should("have.focus")
+			.realType(newFileName);
+
+		cy.realPress("Enter");
+
+		cy.get("#item")
+			.shadow()
+			.find(".ui5-uci-file-name")
+			.should("have.text", newFileName);
+
+		cy.get("#item")
+			.shadow()
+			.find(".ui5-li-detailbtn")
+			.realClick();
+
+		cy.get("#item")
+			.shadow()
+			.find("#ui5-uci-edit-input")
+			.should("have.focus")
+			.realType(newFileName2);
+
+		cy.realPress("Enter");
+
+		cy.get("#item")
+			.shadow()
+			.find(".ui5-uci-file-name")
+			.should("have.text", newFileName2 + ".newExtension");
 	});
 
 	it("Tests that hidden file name is NOT considered as extension", () => {
+		cy.mount(
+			<UploadCollection id="uploadCollection">
+				<UploadCollectionItem id="item" fileName=".gitignore" type="Detail" />
+			</UploadCollection>);
+
+		cy.get("#item")
+			.shadow()
+			.find(".ui5-li-detailbtn")
+			.realClick();
+
+		cy.get("#item")
+			.shadow()
+			.find(".ui5-uci-file-name")
+			.should("not.have.text");
 	});
 
 	it("Tests cancelling of name change via keyboard", () => {
+		cy.mount(
+			<UploadCollection id="uploadCollection">
+				<UploadCollectionItem id="item" fileName=".gitignore" type="Detail" />
+			</UploadCollection>);
+
+		cy.get("#item")
+			.shadow()
+			.find(".ui5-li-detailbtn")
+			.realClick();
+
+		cy.get("#item")
+			.shadow()
+			.find("#ui5-uci-edit-input")
+			.should("have.focus")
+			.realType("new name");
+
+		cy.realPress("Tab");
+		cy.realPress("Tab");
+		cy.realPress("Enter");
+
+		cy.get("#item")
+			.shadow()
+			.find(".ui5-uci-file-name")
+			.should("have.text", ".gitignore");
 	});
 });
 
 describe("Drag and Drop", () => {
+	it("Tests drag and drop overlay when dragging a file", () => {
+		cy.mount(<UploadCollection id="uploadCollection" />);
+
+		const dataTransfer = new DataTransfer();
+		dataTransfer.items.add(new File([new Blob(["file content"], { type: "text/html" })], "test.txt"))
+
+		cy.document()
+			.then((document) => {
+				return document.body;
+			})
+			.trigger("dragenter", {
+				eventConstructor: "DragEvent",
+				force: true,
+				dataTransfer
+			});
+
+		cy.get("#uploadCollection")
+			.should("have.prop", "_dndOverlayMode", "Drag")
+			.shadow()
+			.find(".uc-dnd-overlay.uc-drag-overlay")
+			.should("be.visible");
+
+		cy.get("#uploadCollection")
+			.shadow()
+			.find(".uc-dnd-overlay")
+			.trigger("dragenter", {
+				eventConstructor: "DragEvent",
+				force: true,
+				dataTransfer
+			});
+
+		cy.get("#uploadCollection")
+			.should("have.prop", "_dndOverlayMode", "Drop")
+			.shadow()
+			.find(".uc-dnd-overlay.uc-drop-overlay")
+			.should("be.visible");
+
+		cy.get("#uploadCollection")
+			.shadow()
+			.find(".uc-dnd-overlay")
+			.trigger("drop", {
+				eventConstructor: "DragEvent",
+				force: true,
+				dataTransfer
+			});
+
+		cy.get("#uploadCollection")
+			.should("have.prop", "_dndOverlayMode", "None")
+			.shadow()
+			.find(".uc-dnd-overlay")
+			.should("not.exist");
+	});
+
 	it("Tests that drag and drop overlay is NOT shown when NOT dragging files", () => {
+		cy.mount(<UploadCollection id="uploadCollection" />);
+
+		const dataTransfer = new DataTransfer();
+
+		cy.document()
+			.then((document) => {
+				return document.body;
+			})
+			.trigger("dragenter", {
+				eventConstructor: "DragEvent",
+				force: true,
+				dataTransfer
+			});
+
+		cy.get("#uploadCollection")
+			.should("have.prop", "_dndOverlayMode", "None")
+			.shadow()
+			.find(".uc-dnd-overlay")
+			.should("not.exist");
 	});
 });

package/cypress/specs/UserSettingsDialog.cy.tsx

@@ -20,7 +20,7 @@ describe("Initial rendering", () => {
 	});
 
 	it("tests header-text provided", () => {
-		cy.mount(<UserSettingsDialog header-text="Settings" open>
+		cy.mount(<UserSettingsDialog headerText="Settings" open>
 		</UserSettingsDialog>);
 		cy.get("[ui5-user-settings-dialog]").as("settings");
 		cy.get("@settings").should("exist");
@@ -31,7 +31,7 @@ describe("Initial rendering", () => {
 	});
 
 	it("tests show-search-field provided", () => {
-		cy.mount(<UserSettingsDialog show-search-field open>
+		cy.mount(<UserSettingsDialog showSearchField open>
 		</UserSettingsDialog>);
 		cy.get("[ui5-user-settings-dialog]").as("settings");
 		cy.get("@settings").should("exist");
@@ -133,7 +133,7 @@ describe("Initial rendering", () => {
 
 	it("tests setting header-text", () => {
 		cy.mount(<UserSettingsDialog open>
-			<UserSettingsItem header-text="Header title | Setting 3">
+			<UserSettingsItem headerText="Header title | Setting 3">
 				<UserSettingsView text="Setting1">
 				</UserSettingsView>
 			</UserSettingsItem>
@@ -452,7 +452,7 @@ describe("Events", () => {
 	});
 
 	it("tests search", () => {
-		cy.mount(<UserSettingsDialog show-search-field open>
+		cy.mount(<UserSettingsDialog showSearchField open>
 			<UserSettingsItem text="Setting">
 				<UserSettingsView text="Setting1">
 				</UserSettingsView>

package/cypress/support/component.ts

@@ -15,22 +15,3 @@
 
 // Import commands.js using ES2015 syntax:
 import './commands'
-
-import { mount } from '@ui5/cypress-ct-ui5-webc'
-
-// Augment the Cypress namespace to include type definitions for
-// your custom command.
-// Alternatively, can be defined in cypress/support/component.d.ts
-// with a <reference path="./component" /> at the top of your spec.
-declare global {
-  namespace Cypress {
-    interface Chainable {
-      mount: typeof mount
-    }
-  }
-}
-
-Cypress.Commands.add('mount', mount)
-
-// Example use:
-// cy.mount(MyComponent)

package/cypress/tsconfig.json

@@ -1,13 +1,17 @@
 {
-	"extends": "@ui5/webcomponents-tools/tsconfig.json",
 	"include": [
 		"./**/*"
 	],
 	"compilerOptions": {
-		"composite": true,
-		"tsBuildInfoFile": "dist/.tsbuildinfobuild",
+		"jsx": "react-jsx",
+		"jsxImportSource": "@ui5/webcomponents-base",
 		"module": "NodeNext",
 		"moduleResolution": "nodenext",
+		"types": [
+			"cypress",
+			"cypress-real-events",
+			"cypress-axe",
+		],
 		"paths": {
 			"@ui5/webcomponents-base/dist/*": [
 				"../../base/src/*"