@ui5/webcomponents 2.8.0-rc.2 → 2.8.0-rc.3

package/CHANGELOG.md

@@ -3,6 +3,32 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [2.8.0-rc.3](https://github.com/SAP/ui5-webcomponents/compare/v2.8.0-rc.2...v2.8.0-rc.3) (2025-02-27)
+
+
+### Bug Fixes
+
+* **ui5-input:** call change before submit event ([#10613](https://github.com/SAP/ui5-webcomponents/issues/10613)) ([3c3d641](https://github.com/SAP/ui5-webcomponents/commit/3c3d6410da70eec6f979c134539a0e2227be997b)), closes [#10534](https://github.com/SAP/ui5-webcomponents/issues/10534)
+* **ui5-list:** improved acc description when groups are available ([#10561](https://github.com/SAP/ui5-webcomponents/issues/10561)) ([a7a981c](https://github.com/SAP/ui5-webcomponents/commit/a7a981c9095737941baa3c4052c4718cc9088713))
+* **ui5-menu:** prevent global line-height inheritance ([#10916](https://github.com/SAP/ui5-webcomponents/issues/10916)) ([f6682b2](https://github.com/SAP/ui5-webcomponents/commit/f6682b2d076df747e74058b0b156b3cf0627952d))
+* **ui5-notification-list:** improve keyboard accessibility for the "More" button ([#10822](https://github.com/SAP/ui5-webcomponents/issues/10822)) ([b659fe2](https://github.com/SAP/ui5-webcomponents/commit/b659fe2faeb42eb052dafcc0c16215a3bf1f1926))
+* **ui5-popover, ui5-dialog:** fix finding keyboard focusable scroll containers ([#10891](https://github.com/SAP/ui5-webcomponents/issues/10891)) ([ed26b90](https://github.com/SAP/ui5-webcomponents/commit/ed26b9051ef02772d748de463b9b3084de12ebe8))
+* **ui5-popover, ui5-dialog:** fix preventDefault for before-open and before-close events ([#10883](https://github.com/SAP/ui5-webcomponents/issues/10883)) ([e32e7ba](https://github.com/SAP/ui5-webcomponents/commit/e32e7ba83e4a950a7ad4745c302cc34b57c4cb8e))
+* **ui5-text:** provide more optimal truncation for single line text ([#10794](https://github.com/SAP/ui5-webcomponents/issues/10794)) ([7e7b8ad](https://github.com/SAP/ui5-webcomponents/commit/7e7b8ad2dfa6bace21310697fac8c87f96689574))
+* **ui5-tokenizer:** fix overflow mechanism ([#10901](https://github.com/SAP/ui5-webcomponents/issues/10901)) ([febd3f9](https://github.com/SAP/ui5-webcomponents/commit/febd3f9f3dbc60e4776f19ee4003c4ec072c28b9))
+
+
+### Features
+
+* **ui5-search-field:** introduce base component ([#10922](https://github.com/SAP/ui5-webcomponents/issues/10922)) ([f4489c0](https://github.com/SAP/ui5-webcomponents/commit/f4489c0cecd8c0f2f7916b39e2183193f171f725))
+* **ui5-select:** introduced tooltip property ([#10944](https://github.com/SAP/ui5-webcomponents/issues/10944)) ([c365aa3](https://github.com/SAP/ui5-webcomponents/commit/c365aa30b5abab1fda5fc109d74ab27a676badae)), closes [#10855](https://github.com/SAP/ui5-webcomponents/issues/10855)
+* **ui5-table:** single and multi selection components added ([#10897](https://github.com/SAP/ui5-webcomponents/issues/10897)) ([f3b069c](https://github.com/SAP/ui5-webcomponents/commit/f3b069ce6931567f54e6671fb133c9a59318500b))
+* update sap/icons to v5.11 & 4.23 ([#10930](https://github.com/SAP/ui5-webcomponents/issues/10930)) ([47b5942](https://github.com/SAP/ui5-webcomponents/commit/47b59428abf9e9dbcfd6556143efe1e1046b4c3d))
+
+
+
+
+
 # [2.8.0-rc.2](https://github.com/SAP/ui5-webcomponents/compare/v2.8.0-rc.1...v2.8.0-rc.2) (2025-02-20)
 
 

package/cypress/specs/Dialog.cy.tsx

@@ -42,3 +42,92 @@ describe("Keyboard", () => {
 			.should("be.focused");
 	});
 });
+
+describe("Events", () => {
+	it("before-open", () => {
+		cy.mount(
+			<>
+				<Dialog id="dialogId">
+					<div data-sap-ui-fastnavgroup="true">
+						<button id="first">First group focusable</button>
+					</div>
+					<div data-sap-ui-fastnavgroup="true">
+						<button id="second">Second group focusable</button>
+					</div>
+				</Dialog>
+			</>
+		);
+
+		cy.get("#dialogId")
+			.should("not.be.visible");
+
+		const preventDefault = (e : Event) => {
+			e.preventDefault();
+		};
+
+		cy.get("#dialogId").then($dialog => {
+			$dialog.get(0).addEventListener("before-open", preventDefault);
+		});
+
+		cy.get("#dialogId")
+			.invoke("prop", "open", true);
+
+		cy.get("#dialogId")
+			.should("not.be.visible");
+
+		cy.get("#dialogId").then($dialog => {
+			$dialog.get(0).removeEventListener("before-open", preventDefault);
+		});
+
+		cy.get("#dialogId")
+			.invoke("prop", "open", true);
+
+		cy.get("#dialogId")
+			.should("be.visible");
+	});
+
+	it("before-close", () => {
+		cy.mount(
+			<>
+				<Dialog id="dialogId">
+					<div data-sap-ui-fastnavgroup="true">
+						<button id="first">First group focusable</button>
+					</div>
+					<div data-sap-ui-fastnavgroup="true">
+						<button id="second">Second group focusable</button>
+					</div>
+				</Dialog>
+			</>
+		);
+
+		cy.get("#dialogId")
+			.invoke("prop", "open", true);
+
+		cy.get("#dialogId")
+			.should("be.visible");
+
+		const preventDefault = (e : Event) => {
+			e.preventDefault();
+		};
+
+		cy.get("#dialogId").then($dialog => {
+			$dialog.get(0).addEventListener("before-close", preventDefault);
+		});
+
+		cy.get("#dialogId")
+			.invoke("prop", "open", false);
+
+		cy.get("#dialogId")
+			.should("be.visible");
+
+		cy.get("#dialogId").then($dialog => {
+			$dialog.get(0).removeEventListener("before-close", preventDefault);
+		});
+
+		cy.get("#dialogId")
+			.invoke("prop", "open", false);
+
+		cy.get("#dialogId")
+			.should("not.be.visible");
+	});
+});

package/cypress/specs/Input.cy.tsx

@@ -124,9 +124,178 @@ describe("Input Tests", () => {
 			.shadow()
 			.find("[ui5-li-group-header]")
 			.shadow()
-			.find("ul")
+			.find("div")
 			.should("not.have.attr", "tabindex", "0");
 	});
+
+	it("tests submit and change event order", () => {
+		cy.mount(
+			<form>
+				<Input></Input>
+			</form>
+		);
+
+		cy.get("form")
+			.as("form");
+
+		cy.get("[ui5-input]")
+			.as("input");
+
+		// spy change event
+		cy.get<Input>("@input")
+			.then($input => {
+				$input.get(0).addEventListener("change", cy.spy().as("change"));
+			});
+
+		// spy submit event and prevent it
+		cy.get("@form")
+			.then($form => {
+				$form.get(0).addEventListener("submit", e => e.preventDefault());
+				$form.get(0).addEventListener("submit", cy.spy().as("submit"));
+			});
+
+		// check if submit is triggered after change
+		cy.get<Input>("@input")
+			.shadow()
+			.find("input")
+			.type("test{enter}");
+
+		cy.get("@change").should("have.been.calledBefore", cy.get("@submit"));
+		cy.get("@submit").should("have.been.calledOnce");
+		cy.get("@change").should("have.been.calledOnce");
+	});
+
+	it("tests if pressing enter twice fires submit 2 times and change once", () => {
+		cy.mount(
+			<form>
+				<Input></Input>
+			</form>
+		);
+
+		cy.get("form")
+			.as("form");
+
+		cy.get("[ui5-input]")
+			.as("input");
+
+		// spy change event
+		cy.get<Input>("@input")
+			.then($input => {
+				$input.get(0).addEventListener("change", cy.spy().as("change"));
+			});
+
+		// spy submit event and prevent it
+		cy.get("@form")
+			.then($form => {
+				$form.get(0).addEventListener("submit", e => e.preventDefault());
+				$form.get(0).addEventListener("submit", cy.spy().as("submit"));
+			});
+
+		// check if submit is triggered after change
+		cy.get<Input>("@input")
+			.shadow()
+			.find("input")
+			.type("test{enter}{enter}");
+
+		cy.get("@change").should("have.been.calledBefore", cy.get("@submit"));
+		cy.get("@submit").should("have.been.calledTwice");
+		cy.get("@change").should("have.been.calledOnce");
+	});
+
+	it("tests if submit is fired in case of autocomplete", () => {
+		cy.mount(
+			<form>
+				<Input showSuggestions={true}>
+					<SuggestionItem text="Hello"></SuggestionItem>
+				</Input>
+			</form>
+		);
+
+		cy.get("form")
+			.as("form");
+
+		cy.get("[ui5-input]")
+			.as("input");
+
+		// spy change event
+		cy.get<Input>("@input")
+			.then($input => {
+				$input.get(0).addEventListener("change", cy.spy().as("change"));
+			});
+
+		// spy submit event and prevent it
+		cy.get("@form")
+			.then($form => {
+				$form.get(0).addEventListener("submit", e => e.preventDefault());
+				$form.get(0).addEventListener("submit", cy.spy().as("submit"));
+			});
+
+		// checks when the submit is triggered
+		cy.get<Input>("@input")
+			.shadow()
+			.find("input")
+			.as("inner");
+
+		cy.get("@inner").realClick();
+		cy.get("@inner").type("H{enter}");
+
+		cy.get("@submit").should("have.not.been.called");
+		cy.get("@change").should("have.been.calledOnce");
+
+		cy.get("@inner").realPress("Enter");
+
+		cy.get("@submit").should("have.been.calledOnce");
+		cy.get("@change").should("have.been.calledOnce");
+	});
+
+	it("tests if submit event is fired upon item selection", () => {
+		cy.mount(
+			<form>
+				<Input showSuggestions={true}>
+					<SuggestionItem text="Hello"></SuggestionItem>
+				</Input>
+			</form>
+		);
+
+		cy.get("form")
+			.as("form");
+
+		cy.get("[ui5-input]")
+			.as("input");
+
+		// spy change event
+		cy.get<Input>("@input")
+			.then($input => {
+				$input.get(0).addEventListener("change", cy.spy().as("change"));
+			});
+
+		// spy submit event and prevent it
+		cy.get("@form")
+			.then($form => {
+				$form.get(0).addEventListener("submit", e => e.preventDefault());
+				$form.get(0).addEventListener("submit", cy.spy().as("submit"));
+			});
+
+		// checks when the submit is triggered
+		cy.get<Input>("@input")
+			.shadow()
+			.find("input")
+			.as("inner");
+
+		cy.get("@inner").realClick();
+		cy.get("@inner").type("H{downArrow}{enter}");
+
+		cy.get("@submit").should("have.not.been.called");
+		cy.get("@change").should("have.been.calledOnce");
+
+		cy.get<Input>("@input")
+			.shadow()
+			.find("input")
+			.type("{enter}");
+
+		cy.get("@submit").should("have.been.calledOnce");
+		cy.get("@change").should("have.been.calledOnce");
+	});
 });
 
 describe("Input general interaction", () => {

package/cypress/specs/Popover.cy.tsx

@@ -154,3 +154,154 @@ describe("Popover interaction", () => {
 		});
 	});
 });
+
+describe("Focusing", () => {
+	it("tests no focusable elements, but content is scrolling", () => {
+		cy.mount(
+			<>
+				<Button id="btnOpen">Open</Button>
+				<Popover id="popoverId"
+							 style="width: 10rem; height: 10rem;"
+							 opener="btnOpen">
+					<div>
+						Note: The content of the prop will be rendered into a by assigning the
+						respective slot attribute (slot="footer"). Since you can't change the
+						DOM order of slots when declaring them within a prop, it might prove
+						beneficial to manually mount them as part of the component's children,
+						especially when facing problems with the reading order of screen
+						readers. Note: When passing a custom React component to this prop, you
+						have to make sure your component reads the slot prop and appends it to
+						the most outer element of your component. Learn more about it here.
+					</div>
+				</Popover>
+			</>
+		);
+
+		// act
+		cy.get("#popoverId").invoke("prop", "open", "true");
+
+		cy.get("#popoverId")
+			.shadow()
+			.find(".ui5-popup-content")
+			.should("be.focused");
+	});
+
+	it("tests first element is keyboard focusable scroll container", () => {
+		cy.mount(
+			<>
+				<Button id="btnOpen">Open</Button>
+				<Popover id="popoverId"
+						 opener="btnOpen">
+					<div id="innerContent" style="width: 10rem; height: 10rem; overflow-y: auto;">
+						Note: The content of the prop will be rendered into a by assigning the
+						respective slot attribute (slot="footer"). Since you can't change the
+						DOM order of slots when declaring them within a prop, it might prove
+						beneficial to manually mount them as part of the component's children,
+						especially when facing problems with the reading order of screen
+						readers. Note: When passing a custom React component to this prop, you
+						have to make sure your component reads the slot prop and appends it to
+						the most outer element of your component. Learn more about it here.
+					</div>
+					<Button>Button</Button>
+				</Popover>
+			</>
+		);
+
+		// act
+		cy.get("#popoverId").invoke("prop", "open", "true");
+
+		cy.get("#innerContent")
+			.should("be.focused");
+	});
+});
+
+describe("Events", () => {
+	it("before-open", () => {
+		cy.mount(
+			<>
+				<Button id="btnOpenPopover">Open</Button>
+				<Popover id="popoverId" opener="btnOpenPopover">
+					<div data-sap-ui-fastnavgroup="true">
+						<button id="first">First group focusable</button>
+					</div>
+					<div data-sap-ui-fastnavgroup="true">
+						<button id="second">Second group focusable</button>
+					</div>
+				</Popover>
+			</>
+		);
+
+		cy.get("#popoverId")
+			.should("not.be.visible");
+
+		const preventDefault = (e : Event) => {
+			e.preventDefault();
+		};
+
+		cy.get("#popoverId").then($dialog => {
+			$dialog.get(0).addEventListener("before-open", preventDefault);
+		});
+
+		cy.get("#popoverId")
+			.invoke("prop", "open", true);
+
+		cy.get("#popoverId")
+			.should("not.be.visible");
+
+		cy.get("#popoverId").then($popover => {
+			$popover.get(0).removeEventListener("before-open", preventDefault);
+		});
+
+		cy.get("#popoverId")
+			.invoke("prop", "open", true);
+
+		cy.get("#popoverId")
+			.should("be.visible");
+	});
+
+	it("before-close", () => {
+		cy.mount(
+			<>
+				<Button id="btnOpenPopover">Open</Button>
+				<Popover id="popoverId" opener="btnOpenPopover">
+					<div data-sap-ui-fastnavgroup="true">
+						<button id="first">First group focusable</button>
+					</div>
+					<div data-sap-ui-fastnavgroup="true">
+						<button id="second">Second group focusable</button>
+					</div>
+				</Popover>
+			</>
+		);
+
+		cy.get("#popoverId")
+			.invoke("prop", "open", true);
+
+		cy.get("#popoverId")
+			.should("be.visible");
+
+		const preventDefault = (e : Event) => {
+			e.preventDefault();
+		};
+
+		cy.get("#popoverId").then($popover => {
+			$popover.get(0).addEventListener("before-close", preventDefault);
+		});
+
+		cy.get("#popoverId")
+			.invoke("prop", "open", false);
+
+		cy.get("#popoverId")
+			.should("be.visible");
+
+		cy.get("#popoverId").then($popover => {
+			$popover.get(0).removeEventListener("before-close", preventDefault);
+		});
+
+		cy.get("#popoverId")
+			.invoke("prop", "open", false);
+
+		cy.get("#popoverId")
+			.should("not.be.visible");
+	});
+});

package/cypress/specs/Select.cy.tsx

@@ -35,6 +35,21 @@ describe("Select - Accessibility", () => {
 			.find("li.ui5-li-root")
 			.should("have.attr", "title", EXPECTED_TOOLTIP);
 	});
+
+	it("setting tooltip on the host is reflected on the select's shadow dom root", () => {
+		cy.mount(<Select tooltip="Go home">
+			<Option value="1">Option 1</Option>
+			<OptionCustom value="2">Option 2</OptionCustom>
+		</Select>);
+
+		cy.get("[ui5-select]")
+			.shadow()
+			.find(".ui5-select-root")
+			.as("select");
+
+		cy.get("@select")
+			.should("have.attr", "title", "Go home");
+	});
 });
 
 describe("Select - Popover", () => {

package/cypress/specs/Table.cy.tsx

@@ -2,7 +2,7 @@ import Table from "../../src/Table.js";
 import TableHeaderRow from "../../src/TableHeaderRow.js";
 import TableCell from "../../src/TableCell.js";
 import TableRow from "../../src/TableRow.js";
-import TableSelection from "../../src/TableSelection.js";
+import TableSelectionMulti from "../../src/TableSelectionMulti.js";
 import TableHeaderCell from "../../src/TableHeaderCell.js";
 import TableHeaderCellActionAI from "../../src/TableHeaderCellActionAI.js";
 import Label from "../../src/Label.js";
@@ -531,7 +531,7 @@ describe("Table - Horizontal Scrolling", () => {
 	beforeEach(() => {
 		cy.mount(
 			<Table id="table" overflowMode="Scroll" stickyTop="0px" style={{ width: "300px", overflow: "auto" }} accessibleNameRef="title">
-				<TableSelection id="selection" selected="0 2" slot="features"></TableSelection>
+				<TableSelectionMulti id="selection" selected="0 2" slot="features"></TableSelectionMulti>
 				<TableHeaderRow slot="headerRow" sticky>
 					<TableHeaderCell id="produtCol" width="200px"><span>Product</span></TableHeaderCell>
 					<TableHeaderCell id="supplierCol" width="200px">Supplier</TableHeaderCell>
@@ -693,7 +693,7 @@ describe("Table - Interactive Rows", () => {
 	it("fires the row-click event", () => {
 		cy.mount(
 			<Table id="table1">
-				<TableSelection id="selection" selected="1 2" slot="features"></TableSelection>
+				<TableSelectionMulti id="selection" selected="1 2" slot="features"></TableSelectionMulti>
 				<TableHeaderRow id="headerRow" slot="headerRow">
 					<TableHeaderCell>ColumnA</TableHeaderCell>
 					<TableHeaderCell>ColumnB</TableHeaderCell>
@@ -737,25 +737,6 @@ describe("Table - Interactive Rows", () => {
 		cy.get("@row2button").realPress("Space");
 		cy.get("@buttonClickHandler").should("have.been.calledThrice");
 		cy.get("@rowClickHandler").should("have.been.calledThrice");
-
-		// move the following tests to the TableSelection.cy.tsx
-		cy.get("#headerRow").shadow().find("#selection-cell").as("headerRowSelectionCell");
-		cy.get("@headerRowSelectionCell").find("#selection-component").as("headerRowCheckBox");
-		cy.get("@headerRowCheckBox").should("have.attr", "checked");
-		cy.get("#table1").then($table => {
-			$table.append(
-				`<ui5-table-row id="row3" row-key="3">
-					<ui5-table-cell>Cell A</ui5-table-cell>
-					<ui5-table-cell>Cell B</ui5-table-cell>
-				</ui5-table-row>`
-			);
-		});
-		cy.get("@headerRowCheckBox").should("not.have.attr", "checked");
-		cy.get("#row3").invoke("remove");
-		cy.get("@headerRowCheckBox").should("have.attr", "checked");
-		cy.get("#row2").invoke("remove");
-		cy.get("#row1").invoke("remove");
-		cy.get("@headerRowCheckBox").should("not.have.attr", "checked");
 	});
 });