@ui5/webcomponents 2.8.1-rc.0 → 2.9.0-rc.1

package/CHANGELOG.md

@@ -3,6 +3,60 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [2.9.0-rc.1](https://github.com/SAP/ui5-webcomponents/compare/v2.9.0-rc.0...v2.9.0-rc.1) (2025-03-20)
+
+
+### Bug Fixes
+
+* **ui5-carousel:** fix typo mistake ([#11107](https://github.com/SAP/ui5-webcomponents/issues/11107)) ([e23f746](https://github.com/SAP/ui5-webcomponents/commit/e23f746bca7b858b92b15d1d4903432d65289422)), closes [#11032](https://github.com/SAP/ui5-webcomponents/issues/11032)
+* **ui5-combobox:** properly navigate with arrow down keys ([#11097](https://github.com/SAP/ui5-webcomponents/issues/11097)) ([967ef56](https://github.com/SAP/ui5-webcomponents/commit/967ef56962aa9f341305ed00a09177d62405a785)), closes [#11029](https://github.com/SAP/ui5-webcomponents/issues/11029)
+* **ui5-input:** fire input event on escape key ([#11079](https://github.com/SAP/ui5-webcomponents/issues/11079)) ([8b85288](https://github.com/SAP/ui5-webcomponents/commit/8b852881dd9364216f5051b587f2e7e5102b4945)), closes [#11021](https://github.com/SAP/ui5-webcomponents/issues/11021)
+* **ui5-li:** announce active state ([#11064](https://github.com/SAP/ui5-webcomponents/issues/11064)) ([b6b70a9](https://github.com/SAP/ui5-webcomponents/commit/b6b70a9f8ab2a78bceb0a8bca8ed2c12c63ea13d))
+* **ui5-list-item-group-header:** typo fixed ([#11100](https://github.com/SAP/ui5-webcomponents/issues/11100)) ([e8af105](https://github.com/SAP/ui5-webcomponents/commit/e8af1059d118fc77dcaef0b7dd7012ad406fde7a))
+* **ui5-menu-item:** remove dot from class ([#11119](https://github.com/SAP/ui5-webcomponents/issues/11119)) ([66bedb4](https://github.com/SAP/ui5-webcomponents/commit/66bedb421036af054cfc45a512953342f9917cdb)), closes [#11043](https://github.com/SAP/ui5-webcomponents/issues/11043)
+* **ui5-menu:** fix menu item type fix ([#11129](https://github.com/SAP/ui5-webcomponents/issues/11129)) ([3e68c57](https://github.com/SAP/ui5-webcomponents/commit/3e68c576fb9a577e51acf99e0608691b15b213fb)), closes [#10933](https://github.com/SAP/ui5-webcomponents/issues/10933)
+* **ui5-multi-combobox:** fix deletion of long tokens ([#11080](https://github.com/SAP/ui5-webcomponents/issues/11080)) ([5c6d746](https://github.com/SAP/ui5-webcomponents/commit/5c6d746b2354acc09172a53b0a1507ab3ff4458e)), closes [#10977](https://github.com/SAP/ui5-webcomponents/issues/10977)
+* **ui5-multiinput:** correct failing test ([#11111](https://github.com/SAP/ui5-webcomponents/issues/11111)) ([b30330d](https://github.com/SAP/ui5-webcomponents/commit/b30330d38ae574f628611f21b9078ee98df7b592))
+* **ui5-tag:** fix click event ([#11102](https://github.com/SAP/ui5-webcomponents/issues/11102)) ([3eec3bb](https://github.com/SAP/ui5-webcomponents/commit/3eec3bbbfc2fcaf6a5b4c6e70c7fcb7cd7e1bcec)), closes [#11096](https://github.com/SAP/ui5-webcomponents/issues/11096)
+
+
+### Features
+
+* **ui5-input:** support accessible description ([#10821](https://github.com/SAP/ui5-webcomponents/issues/10821)) ([410f4d2](https://github.com/SAP/ui5-webcomponents/commit/410f4d2fbc2f62742e419e437824a435c79fc6ef)), closes [#10131](https://github.com/SAP/ui5-webcomponents/issues/10131)
+* **ui5-search:** introduce experimental component ([#11125](https://github.com/SAP/ui5-webcomponents/issues/11125)) ([48f16fb](https://github.com/SAP/ui5-webcomponents/commit/48f16fb1d05957b3779aeb4868f3cebe5cac5bc2))
+* **ui5-select:** "icon" property introduced ([#11060](https://github.com/SAP/ui5-webcomponents/issues/11060)) ([0b242e3](https://github.com/SAP/ui5-webcomponents/commit/0b242e3e0e6d7c03dcbebd4fc798338627ebeb09)), closes [#10859](https://github.com/SAP/ui5-webcomponents/issues/10859)
+* **ui5-side-navigation:** enable the web component in popover placement ([#10701](https://github.com/SAP/ui5-webcomponents/issues/10701)) ([a4565fe](https://github.com/SAP/ui5-webcomponents/commit/a4565fe3a3ecb5a3d150942ed72faabbbc770b4a))
+
+
+
+
+
+# [2.9.0-rc.0](https://github.com/SAP/ui5-webcomponents/compare/v2.8.1-rc.0...v2.9.0-rc.0) (2025-03-13)
+
+
+### Bug Fixes
+
+* **ui5-avatar-group:** fixed focus outline ([#11023](https://github.com/SAP/ui5-webcomponents/issues/11023)) ([138a3db](https://github.com/SAP/ui5-webcomponents/commit/138a3db72f218bbec5ee3fbb3a2cf54c239d83d2)), closes [#10963](https://github.com/SAP/ui5-webcomponents/issues/10963)
+* **ui5-carousel:** update roles to match ACC specification ([#11032](https://github.com/SAP/ui5-webcomponents/issues/11032)) ([1594186](https://github.com/SAP/ui5-webcomponents/commit/1594186d1c44521f5ea590983c41afcecfe46b4e)), closes [#10198](https://github.com/SAP/ui5-webcomponents/issues/10198) [#8624](https://github.com/SAP/ui5-webcomponents/issues/8624)
+* **ui5-combobox:** prevent 'change' event from being fired if the value is set programmatically ([#11048](https://github.com/SAP/ui5-webcomponents/issues/11048)) ([8643afe](https://github.com/SAP/ui5-webcomponents/commit/8643afee8476991e1fe6dcd910a5259f90fb35b6)), closes [#10959](https://github.com/SAP/ui5-webcomponents/issues/10959)
+* **ui5-icon:** revert default mode to decorative ([#10969](https://github.com/SAP/ui5-webcomponents/issues/10969)) ([0662fc2](https://github.com/SAP/ui5-webcomponents/commit/0662fc2c87df0a92f14a2cfe463d6bae1ae3f598)), closes [#10835](https://github.com/SAP/ui5-webcomponents/issues/10835)
+* **ui5-input:** add tabindex for icon slot ([#10975](https://github.com/SAP/ui5-webcomponents/issues/10975)) ([427307a](https://github.com/SAP/ui5-webcomponents/commit/427307a34c5fb84412b71bd6499b7feeccb21ce2))
+* **ui5-list:** ensure no data text wraps instead of truncating ([#10934](https://github.com/SAP/ui5-webcomponents/issues/10934)) ([6c2324e](https://github.com/SAP/ui5-webcomponents/commit/6c2324ec19df041601c3039e81d297679b8adf32)), closes [#10346](https://github.com/SAP/ui5-webcomponents/issues/10346)
+* **ui5-list:** prevent load-more event fire without scroll ([#10973](https://github.com/SAP/ui5-webcomponents/issues/10973)) ([65cc905](https://github.com/SAP/ui5-webcomponents/commit/65cc905da2236cbaf80cb2b24e67f8dab40c3cd0))
+* **ui5-slider:** fire 'change' event on keyup ([#10803](https://github.com/SAP/ui5-webcomponents/issues/10803)) ([078d44c](https://github.com/SAP/ui5-webcomponents/commit/078d44c92d32c10756ddf848907386ccecd3d354)), closes [#10770](https://github.com/SAP/ui5-webcomponents/issues/10770)
+* **ui5-switch:** remove delegate focus of switch ([#10798](https://github.com/SAP/ui5-webcomponents/issues/10798)) ([6202cbd](https://github.com/SAP/ui5-webcomponents/commit/6202cbd9d96f8b9aa061f5feac8050460d6be39b)), closes [#10588](https://github.com/SAP/ui5-webcomponents/issues/10588)
+* **ui5-tabcontainer:** allow browser refresh shortcut to work ([#11035](https://github.com/SAP/ui5-webcomponents/issues/11035)) ([a4a0f02](https://github.com/SAP/ui5-webcomponents/commit/a4a0f028f44a60fd6caea0f4ecdac49b0289270d))
+* **ui5-toolbar-button:** add hidden property ([#10915](https://github.com/SAP/ui5-webcomponents/issues/10915)) ([8ad378d](https://github.com/SAP/ui5-webcomponents/commit/8ad378d64e075068cf85f5e6ef6184cdafd9fc0f)), closes [#10585](https://github.com/SAP/ui5-webcomponents/issues/10585)
+
+
+### Features
+
+* **ui5-multi-combobox/ui5-combobox:** introduce open property ([#11044](https://github.com/SAP/ui5-webcomponents/issues/11044)) ([951e726](https://github.com/SAP/ui5-webcomponents/commit/951e7261ccc32c8f92e2538b356469556b0ab2b2))
+
+
+
+
+
 ## [2.8.1-rc.0](https://github.com/SAP/ui5-webcomponents/compare/v2.8.0...v2.8.1-rc.0) (2025-03-06)
 
 

package/cypress/specs/AvatarGroup.cy.tsx

@@ -34,3 +34,18 @@ describe("Overflow", () => {
 			.should("equal", expectedHiddenItems);
 	});
 });
+
+describe("Avatars arrangement", () => {
+	it("checks if no unnecessary margin is applied of only one Avatar is available", () => {
+		cy.mount(<AvatarGroup id="ag2" type="Group">
+			<Avatar id="av1" initials="II"></Avatar>
+			<Avatar id="av2" initials="II"></Avatar>
+		</AvatarGroup>);
+
+		cy.get("#av2").invoke("remove");
+
+		cy.get("#av1")
+			.invoke("attr", "style")
+			.should("equal", "");
+	});
+});

package/cypress/specs/Carousel.cy.tsx

@@ -0,0 +1,27 @@
+import Carousel from "../../src/Carousel.js";
+import Text from "../../src/Text.js";
+
+describe("Accessibility", () => {
+	it("tests carousel aria roles", () => {
+		cy.mount(
+			<Carousel id="carousel">
+				<Text id="text">Test</Text>
+			</Carousel>
+		);
+
+		cy.get("#carousel")
+			.shadow()
+			.find(".ui5-carousel-root")
+			.should("have.attr", "role", "list");
+
+		cy.get("#carousel")
+			.shadow()
+			.find(".ui5-carousel-item")
+			.should("have.attr", "role", "listitem");
+
+		cy.get("#carousel")
+			.shadow()
+			.find(".ui5-carousel-root")
+			.should("have.attr", "aria-roledescription", "Carousel");
+	});
+});

package/cypress/specs/ComboBox.cy.tsx

@@ -1,5 +1,6 @@
 import ComboBox from "../../src/ComboBox.js";
 import ComboBoxItem from "../../src/ComboBoxItem.js";
+import ComboBoxItemGroup from "../../src/ComboBoxItemGroup.js";
 
 describe("Security", () => {
 	it("tests setting malicious text to items", () => {
@@ -19,3 +20,152 @@ describe("Security", () => {
 			.should("have.text", "Albania<button onClick='alert(1)'>alert</button>");
 	});
 });
+
+describe("Keyboard interaction", () => {
+	it("tests navigating with arrow down when item text is contained in the previous selected item", () => {
+		cy.mount(
+			<ComboBox>
+				<ComboBoxItem text="Bulgaria 1"></ComboBoxItem>
+				<ComboBoxItem text="Bulgaria"></ComboBoxItem>
+				<ComboBoxItem text="Bul"></ComboBoxItem>
+			</ComboBox>
+		);
+
+		cy.get("[ui5-combobox]").as("combobox");
+
+		cy.get<ComboBox>("@combobox")
+			.shadow()
+			.find("input")
+			.as("inner");
+
+		cy.get("@inner").focus();
+
+		cy.get("@inner").realPress("F4");
+		cy.get("@combobox")
+			.find("[ui5-cb-item]").eq(0).should("have.prop", "selected", true);
+
+		cy.get("@inner").realPress("ArrowDown");
+		cy.get("@combobox")
+			.find("[ui5-cb-item]").eq(1).should("have.prop", "selected", true);
+
+		cy.get("@inner").realPress("ArrowDown");
+		cy.get("@combobox")
+			.find("[ui5-cb-item]").eq(2).should("have.prop", "selected", true);
+	});
+
+	it("tests navigating with arrow down when item text is contained in the previous selected item (with grouping)", () => {
+		cy.mount(
+			<ComboBox>
+				<ComboBoxItemGroup header-text="Bulgaria">
+					<ComboBoxItem text="Bulgar"></ComboBoxItem>
+					<ComboBoxItem text="Bulg"></ComboBoxItem>
+					<ComboBoxItem text="Bul"></ComboBoxItem>
+				</ComboBoxItemGroup>
+			</ComboBox>
+		);
+
+		cy.get("[ui5-combobox]").as("combobox");
+
+		cy.get<ComboBox>("@combobox")
+			.shadow()
+			.find("input")
+			.as("inner");
+
+		cy.get("@inner").focus();
+
+		cy.get("@inner").realPress("F4");
+		cy.get("@combobox")
+			.find("[ui5-cb-item]").eq(0).should("have.prop", "selected", true);
+
+		cy.get("@inner").realPress("ArrowDown");
+		cy.get("@combobox")
+			.find("[ui5-cb-item]").eq(1).should("have.prop", "selected", true);
+
+		cy.get("@inner").realPress("ArrowDown");
+		cy.get("@combobox")
+			.find("[ui5-cb-item]").eq(2).should("have.prop", "selected", true);
+	});
+});
+
+describe("Event firing", () => {
+	it("tests if open and close events are fired correctly", () => {
+		cy.mount(
+			<ComboBox>
+				<ComboBoxItem text="Algeria"></ComboBoxItem>
+				<ComboBoxItem text="Bulgaria"></ComboBoxItem>
+				<ComboBoxItem text="England"></ComboBoxItem>
+			</ComboBox>
+		);
+
+		cy.get("ui5-combobox")
+			.as("combo");
+
+		cy.get("@combo").then($combo => {
+			$combo[0].addEventListener("focusin", () => {
+			$combo[0].setAttribute("open", "true");
+			});
+		});
+
+		cy.get("@combo").then($combo => {
+			$combo[0].addEventListener("ui5-open", cy.stub().as("comboOpened"));
+		});
+
+		cy.get("@combo").then($combo => {
+			$combo[0].addEventListener("ui5-close", cy.stub().as("comboClosed"));
+		});
+
+		cy.get("@combo")
+			.shadow()
+			.find("input")
+			.focus();
+
+		cy.get("@combo")
+			.shadow()
+			.find("ui5-icon")
+			.as("icon");
+
+		cy.get("@icon")
+			.click();
+
+		cy.get("@icon")
+			.click();
+
+		cy.get("@combo")
+			.shadow()
+			.find("ui5-responsive-popover")
+			.should("have.attr", "open");
+
+		cy.get("@comboClosed")
+			.should("have.been.calledOnce");
+
+		cy.get("@comboOpened")
+			.should("have.been.calledTwice");
+	});
+
+	it("should not fire 'change' event on focusout if value is not changed by user interaction", () => {
+		cy.mount(
+			<>
+				<ComboBox id="cb" value="ComboBox item text"></ComboBox>
+				<ComboBox id="another-cb"></ComboBox>
+			</>
+		);
+
+		cy.get("#cb").then($cb => {
+			$cb[0].addEventListener("ui5-change", cy.stub().as("changeStub"));
+		});
+
+		cy.get("#cb").shadow().find("input").click();
+		cy.get("#another-cb").shadow().find("input").click();
+		cy.get("@changeStub").should("not.have.been.called");
+
+		cy.get("#cb").then(($cb) => {
+			const comboBox = $cb[0] as ComboBox;
+			comboBox.value = "Another ComboBox item text";
+		});
+
+		cy.get("#cb").shadow().find("input").click();
+		cy.get("#another-cb").shadow().find("input").click();
+		cy.get("@changeStub").should("not.have.been.called");
+	});
+});
+

package/cypress/specs/DateControlsWithTimezone.cy.tsx

@@ -0,0 +1,75 @@
+import { getTimezone, setTimezone } from "@ui5/webcomponents-base/dist/config/Timezone.js";
+import DatePicker from "../../src/DatePicker.js";
+import DateTimePicker from "../../src/DateTimePicker.js";
+import TimePicker from "../../src/TimePicker.js";
+
+describe("Date related components in different timezone", () => {
+	before(() => {
+		cy.wrap({ setTimezone })
+			.invoke("setTimezone", "Pacific/Apia");
+
+		cy.wrap({ getTimezone })
+			.invoke("getTimezone")
+			.should("equal", "Pacific/Apia");
+	});
+
+	it("The date is with the correct offset in date picker", () => {
+		cy.mount(<DatePicker id="datePickerNow" value="now" formatPattern="dd/MM/yyyy"/>);
+
+		const now = new Date();
+		const offset = now.getTimezoneOffset();
+		now.setMinutes(now.getMinutes() + offset);
+		now.setHours(now.getHours() + 13);
+		const day = String(now.getDate()).padStart(2, "0");
+		const month = String(now.getMonth() + 1).padStart(2, "0"); // Months are 0-based
+		const year = now.getFullYear();
+
+		const value = `${day}/${month}/${year}`;
+
+		cy.get("#datePickerNow")
+			.shadow()
+			.find("ui5-input")
+			.should("have.attr", "value", value);
+	});
+
+	it("The time is with the correct offset in time picker", () => {
+		cy.mount(<TimePicker id="timePickerNow" value="now" formatPattern="HH:mm:ss"/>);
+
+		const now = new Date();
+		const offset = now.getTimezoneOffset();
+		now.setMinutes(now.getMinutes() + offset);
+		now.setHours(now.getHours() + 13);
+		const hours = String(now.getHours()).padStart(2, "0");
+		const minutes = String(now.getMinutes()).padStart(2, "0");
+		const seconds = now.getSeconds();
+
+		const value = `${hours}:${minutes}:${seconds}`;
+
+		cy.get("#timePickerNow")
+			.shadow()
+			.find("[ui5-datetime-input]")
+			.should("have.attr", "value", value);
+	});
+
+	it("The date and time are with the correct offset in date time picker", () => {
+		cy.mount(<DateTimePicker id="dateTimePickerNow" value="now" formatPattern="dd/MM/yyyy HH:mm:ss"/>);
+
+		const now = new Date();
+		const offset = now.getTimezoneOffset();
+		now.setMinutes(now.getMinutes() + offset);
+		now.setHours(now.getHours() + 13);
+		const day = String(now.getDate()).padStart(2, "0");
+		const month = String(now.getMonth() + 1).padStart(2, "0"); // Months are 0-based
+		const year = now.getFullYear();
+		const hours = String(now.getHours()).padStart(2, "0");
+		const minutes = String(now.getMinutes()).padStart(2, "0");
+		const seconds = now.getSeconds();
+
+		const value = `${day}/${month}/${year} ${hours}:${minutes}:${seconds}`;
+
+		cy.get("#dateTimePickerNow")
+			.shadow()
+			.find("[ui5-input]")
+			.should("have.attr", "value", value);
+	});
+});