@ui5/webcomponents 2.6.0-rc.0 → 2.6.0-rc.2

package/CHANGELOG.md

@@ -3,6 +3,40 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [2.6.0-rc.2](https://github.com/SAP/ui5-webcomponents/compare/v2.6.0-rc.1...v2.6.0-rc.2) (2024-12-19)
+
+
+### Bug Fixes
+
+* **ui5-carousel:** hideNavigationArrows property works on touch devices ([#10397](https://github.com/SAP/ui5-webcomponents/issues/10397)) ([e655644](https://github.com/SAP/ui5-webcomponents/commit/e6556440aae4a1200902776a2450f9e1b9997633))
+* **ui5-cb/mcb-item:** handle setting malicious text ([#10382](https://github.com/SAP/ui5-webcomponents/issues/10382)) ([9b4cd2b](https://github.com/SAP/ui5-webcomponents/commit/9b4cd2b7c6c083694814f0e96ccaf6b3cd275805))
+* **ui5-file-uploader:** use optional chain in onclick check ([#10408](https://github.com/SAP/ui5-webcomponents/issues/10408)) ([8e100d4](https://github.com/SAP/ui5-webcomponents/commit/8e100d45d1591f4683a2b7ea80c30e67dc58016c))
+* **ui5-multi-input:** one token added on enter press ([#10385](https://github.com/SAP/ui5-webcomponents/issues/10385)) ([54ee836](https://github.com/SAP/ui5-webcomponents/commit/54ee836eeb8ceb6a648145b35be221004e35a06d))
+* **ui5-table:** apply focus over whole row ([#10407](https://github.com/SAP/ui5-webcomponents/issues/10407)) ([bbe7d57](https://github.com/SAP/ui5-webcomponents/commit/bbe7d57b41738c333c8042b6d086c5aaf8ffe153)), closes [#10286](https://github.com/SAP/ui5-webcomponents/issues/10286)
+* **ui5-toolbar:** hide overflow button when content fits ([#10405](https://github.com/SAP/ui5-webcomponents/issues/10405)) ([4ac9428](https://github.com/SAP/ui5-webcomponents/commit/4ac9428ad3b2a91549f683b45badb716f3a7b594)), closes [#10376](https://github.com/SAP/ui5-webcomponents/issues/10376)
+
+
+### Features
+
+* **ui5-color-palette:** set selected color to inner color picker ([#10276](https://github.com/SAP/ui5-webcomponents/issues/10276)) ([7a152a1](https://github.com/SAP/ui5-webcomponents/commit/7a152a1dc0defcb031d859012f4310ca5c52bee4)), closes [#8772](https://github.com/SAP/ui5-webcomponents/issues/8772)
+
+
+
+
+
+# [2.6.0-rc.1](https://github.com/SAP/ui5-webcomponents/compare/v2.6.0-rc.0...v2.6.0-rc.1) (2024-12-16)
+
+
+### Bug Fixes
+
+* **ui5-list:** focus list on non-focusable child click ([#10124](https://github.com/SAP/ui5-webcomponents/issues/10124)) ([6f98645](https://github.com/SAP/ui5-webcomponents/commit/6f9864593f4c4e54162ba203d10734d308c14e4f)), closes [#10096](https://github.com/SAP/ui5-webcomponents/issues/10096)
+* **ui5-list:** stop tab index change propagation ([#10354](https://github.com/SAP/ui5-webcomponents/issues/10354)) ([d130b8f](https://github.com/SAP/ui5-webcomponents/commit/d130b8f1d28b8fac3c78fb786dc0d57c5841043e)), closes [#10120](https://github.com/SAP/ui5-webcomponents/issues/10120)
+* **ui5-popover:** fix finding opener ([#10360](https://github.com/SAP/ui5-webcomponents/issues/10360)) ([941c6eb](https://github.com/SAP/ui5-webcomponents/commit/941c6eb215daf664d79448e7fe10d2e3ca7289e2))
+
+
+
+
+
 # [2.6.0-rc.0](https://github.com/SAP/ui5-webcomponents/compare/v2.5.0...v2.6.0-rc.0) (2024-12-12)
 
 

package/cypress/specs/ColorPalette.cy.ts

@@ -0,0 +1,47 @@
+import { html } from "lit";
+import "../../src/ColorPalette.js";
+import "../../src/ColorPaletteItem.js";
+import "../../src/features/ColorPaletteMoreColors.js";
+
+describe("Color Palette tests", () => {
+	it("internal color picker should have selected color set on open", () => {
+		cy.mount(html`<ui5-color-palette show-more-colors show-recent-colors>
+<ui5-color-palette-item id="named" value="red"></ui5-color-palette-item>
+<ui5-color-palette-item id="rgba" value="rgba(0, 255, 0, 0.5)"></ui5-color-palette-item>
+<ui5-color-palette-item id="rgb" value="rgb(0,0,255)"></ui5-color-palette-item>
+<ui5-color-palette-item id="hex" value="#C0FFEE"></ui5-color-palette-item>
+</ui5-color-palette>`);
+
+		cy.get("ui5-color-palette")
+			.ui5ColorPaletteCheckSelectedColor("#named", {
+				r: "255",
+				g: "0",
+				b: "0",
+				a: "1",
+			});
+
+		cy.get("ui5-color-palette")
+			.ui5ColorPaletteCheckSelectedColor("#rgba", {
+				r: "0",
+				g: "255",
+				b: "0",
+				a: "0.5",
+			});
+
+		cy.get("ui5-color-palette")
+			.ui5ColorPaletteCheckSelectedColor("#rgb", {
+				r: "0",
+				g: "0",
+				b: "255",
+				a: "1",
+			});
+
+		cy.get("ui5-color-palette")
+			.ui5ColorPaletteCheckSelectedColor("#hex", {
+				r: "192",
+				g: "255",
+				b: "238",
+				a: "1",
+			});
+	});
+});

package/cypress/specs/ComboBox.cy.ts

@@ -0,0 +1,22 @@
+import { html } from "lit";
+import "../../src/ComboBox.js";
+import "../../src/ComboBoxItem.js";
+
+describe("Security", () => {
+	it("tests setting malicious text to items", () => {
+		cy.mount(html`
+			<ui5-combobox>
+				<ui5-cb-item text="<script>alert('XSS')</script>"></ui5-cb-item>
+				<ui5-cb-item text="<b onmouseover=alert('XSS')></b>"></ui5-cb-item>
+				<ui5-cb-item text="Albania<button onClick='alert(1)'>alert</button>"></ui5-cb-item>
+			</ui5-combobox>
+		`);
+
+		cy.get("ui5-cb-item").eq(0).shadow().find(".ui5-li-title")
+			.should("have.text", "<script>alert('XSS')</script>");
+		cy.get("ui5-cb-item").eq(1).shadow().find(".ui5-li-title")
+			.should("have.text", "<b onmouseover=alert('XSS')></b>");
+		cy.get("ui5-cb-item").eq(2).shadow().find(".ui5-li-title")
+			.should("have.text", "Albania<button onClick='alert(1)'>alert</button>");
+	});
+});

package/cypress/specs/List.cy.ts

@@ -34,83 +34,119 @@ describe("List Tests", () => {
 
 	it("Arrow down and up navigation between last item and growing button", () => {
 		cy.mount(html`
-		<ui5-list id="infiniteScrollEx2" growing="Button">
-			<ui5-li>Laptop Lenovo</ui5-li>
-			<ui5-li>IPhone 3</ui5-li>
-			<ui5-li>HP Monitor 24</ui5-li>
-			<ui5-li id="lastItem">Last Item</ui5-li>
-		</ui5-list>
+			<ui5-list growing="Button">
+				<ui5-li>Laptop Lenovo</ui5-li>
+				<ui5-li>IPhone 3</ui5-li>
+				<ui5-li>HP Monitor 24</ui5-li>
+			</ui5-list>
 		`);
 
-		cy.get("#lastItem")
-			.shadow()
-			.find("li[role='listitem']")
-			.invoke("attr", "tabindex", "0")
-			.focus();
+		cy.get("[ui5-list]")
+			.as("list");
+
+		// Click the last item to set focus
+		cy.get("@list")
+			.find("ui5-li")
+			.last()
+			.click();
 
-		cy.get("#infiniteScrollEx2")
-			.realPress("ArrowDown");
+		// Verify the last item is focused
+		cy.get("@list")
+			.find("ui5-li")
+			.last()
+			.should("be.focused");
+
+		// Press arrow down once to move focus to the growing button
+		cy.realPress("ArrowDown");
 
-		cy.get("#infiniteScrollEx2")
+		// Verify the growing button is focused
+		cy.get("@list")
 			.shadow()
-			.find("[id$=\"growing-btn\"]")
+			.find("[id$='growing-btn']")
 			.should("be.focused");
 
-		cy.get("#infiniteScrollEx2")
-			.realPress("ArrowUp");
+		// Arrow up once to move focus back to the last item
+		cy.realPress("ArrowUp");
 
-		cy.get("#lastItem")
+		// Verify the last item is focused
+		cy.get("@list")
+			.find("ui5-li")
+			.last()
 			.should("be.focused");
 	});
 
 	it("Home key on growing button moves focus to first item", () => {
 		cy.mount(html`
-		<ui5-list id="infiniteScrollEx2" growing="Button">
-			<ui5-li id="firstItem">Laptop Lenovo</ui5-li>
-			<ui5-li>IPhone 3</ui5-li>
-			<ui5-li>HP Monitor 24</ui5-li>
-			<ui5-li id="lastItem">Last Item</ui5-li>
-		</ui5-list>
+			<ui5-list growing="Button">
+				<ui5-li>Laptop Lenovo</ui5-li>
+				<ui5-li>IPhone 3</ui5-li>
+				<ui5-li>HP Monitor 24</ui5-li>
+			</ui5-list>
 		`);
 
-		cy.get("#infiniteScrollEx2")
+		cy.get("[ui5-list]")
+			.as("list");
+
+		// Click the growing button to set focus
+		cy.get("@list")
+			.shadow()
+			.find("[id$='growing-btn']")
+			.click();
+
+		// Wait for the growing button to be focused
+		cy.get("@list")
 			.shadow()
-			.find("[id$=\"growing-btn\"]")
-			.focus();
+			.find("[id$='growing-btn']")
+			.should("be.focused");
 
-		cy.get("#infiniteScrollEx2")
-			.realPress("Home");
+		// Press Home key to move focus to the first item
+		cy.realPress("Home");
 
-		cy.get("#firstItem")
+		// Verify the first item is focused
+		cy.get("@list")
+			.find("ui5-li")
+			.first()
 			.should("be.focused");
 	});
 
 	it("End key navigation moves focus from first item to last item and then to growing button", () => {
 		cy.mount(html`
-		<ui5-list id="infiniteScrollEx2" growing="Button">
-			<ui5-li id="firstItem">Laptop Lenovo</ui5-li>
-			<ui5-li>IPhone 3</ui5-li>
-			<ui5-li>HP Monitor 24</ui5-li>
-			<ui5-li id="lastItem">Last Item</ui5-li>
-		</ui5-list>
+			<ui5-list growing="Button">
+				<ui5-li>Laptop Lenovo</ui5-li>
+				<ui5-li>IPhone 3</ui5-li>
+				<ui5-li>HP Monitor 24</ui5-li>
+			</ui5-list>
 		`);
 
-		cy.get("#firstItem")
-			.shadow()
-			.find("li[role='listitem']")
-			.invoke("attr", "tabindex", "0")
-			.focus();
+		cy.get("[ui5-list]")
+			.as("list");
+
+		// Click the first item to set focus
+		cy.get("@list")
+			.find("ui5-li")
+			.first()
+			.click();
+
+		// Wait for the first item to be focused
+		cy.get("@list")
+			.find("ui5-li")
+			.first()
+			.should("be.focused");
 
-		cy.get("#infiniteScrollEx2")
-			.realPress("End");
+		// Press End key to move focus to the last item
+		cy.realPress("End");
 
-		cy.get("#lastItem")
+		// Verify the last item is focused
+		cy.get("@list")
+			.find("ui5-li")
+			.last()
 			.should("be.focused");
 
-		cy.get("#infiniteScrollEx2")
-			.realPress("End");
+		// Press End key again to move focus to the growing button
+		cy.realPress("End");
 
-		cy.get("#infiniteScrollEx2")
+		// Verify the growing button is focused
+		cy.get("@list")
 			.shadow()
 			.find("[id$='growing-btn']")
 			.should("be.focused");

package/cypress/specs/MultiComboBox.cy.ts

@@ -0,0 +1,22 @@
+import { html } from "lit";
+import "../../src/MultiComboBox.js";
+import "../../src/MultiComboBoxItem.js";
+
+describe("Security", () => {
+	it("tests setting malicious text to items", () => {
+		cy.mount(html`
+			<ui5-multi-combobox>
+				<ui5-mcb-item text="<script>alert('XSS')</script>"></ui5-mcb-item>
+				<ui5-mcb-item text="<b onmouseover=alert('XSS')></b>"></ui5-mcb-item>
+				<ui5-mcb-item text="Albania<button onClick='alert(1)'>alert</button>"></ui5-mcb-item>
+			</ui5-multi-combobox>
+		`);
+
+		cy.get("ui5-mcb-item").eq(0).shadow().find(".ui5-li-title")
+			.should("have.text", "<script>alert('XSS')</script>");
+		cy.get("ui5-mcb-item").eq(1).shadow().find(".ui5-li-title")
+			.should("have.text", "<b onmouseover=alert('XSS')></b>");
+		cy.get("ui5-mcb-item").eq(2).shadow().find(".ui5-li-title")
+			.should("have.text", "Albania<button onClick='alert(1)'>alert</button>");
+	});
+});

package/cypress/specs/MultiInput.cy.ts

@@ -0,0 +1,47 @@
+import { html } from "lit";
+import "../../src/MultiInput.js";
+import "../../src/Tokenizer.js";
+import "../../src/features/InputSuggestions.js";
+import "../../src/SuggestionItem.js";
+
+describe("MultiInput Web Component", () => {
+	it("creates only one token when typing 'ad' and pressing Enter", () => {
+		cy.mount(html`<ui5-multi-input show-suggestions show-value-help-icon id="suggestion-token">
+            <ui5-suggestion-item text="Aute"></ui5-suggestion-item>
+            <ui5-suggestion-item text="ad"></ui5-suggestion-item>
+            <ui5-suggestion-item text="exercitation"></ui5-suggestion-item>
+            <ui5-suggestion-item text="esse"></ui5-suggestion-item>
+            <ui5-suggestion-item text="labore"></ui5-suggestion-item>
+            <ui5-suggestion-item text="amet"></ui5-suggestion-item>
+            <ui5-suggestion-item text="aute"></ui5-suggestion-item>
+            <ui5-suggestion-item text="excepteur"></ui5-suggestion-item>
+        </ui5-multi-input>`);
+		cy.get("#suggestion-token").then(multiInput => {
+			const createTokenFromText = (text: string): HTMLElement => {
+				const token = document.createElement("ui5-token");
+				token.setAttribute("text", text);
+				token.setAttribute("slot", "tokens");
+				return token;
+			};
+
+			multiInput[0].addEventListener("keydown", (event: KeyboardEvent) => {
+				const inputElement = multiInput[0] as HTMLInputElement;
+				if (event.key === "Enter" && inputElement.value) {
+					const token = createTokenFromText(inputElement.value);
+					inputElement.appendChild(token);
+					inputElement.value = "";
+				}
+			});
+		});
+
+		cy.get("#suggestion-token")
+			.shadow()
+			.find("input")
+			.type("ad{enter}");
+
+		cy.get("ui5-multi-input")
+			.find("ui5-token")
+			.should("have.length", 1)
+			.and("have.attr", "text", "ad");
+	});
+});

package/cypress/specs/Toolbar.cy.ts

@@ -91,4 +91,30 @@ describe("Toolbar general interaction", () => {
 			.find(".ui5-tb-overflow-btn-hidden")
 			.should("exist", "hidden class attached to tb button, meaning it's not shown as expected");
 	});
+
+	it("shouldn't show overflow button if there is enough space", () => {
+		cy.mount(html`
+			<ui5-toolbar style="width:fit-content;max-width:100%;">
+				<ui5-toolbar-button icon="decline">
+				</ui5-toolbar-button>
+
+				<ui5-toolbar-button icon="add">
+				</ui5-toolbar-button>
+
+				<ui5-toolbar-button icon="employee">
+				</ui5-toolbar-button>
+			</ui5-toolbar>
+		`);
+
+		cy.get("[ui5-toolbar]")
+			.as("toolbar");
+
+		// eslint-disable-next-line cypress/no-unnecessary-waiting
+		cy.wait(500);
+
+		cy.get("@toolbar")
+			.shadow()
+			.find(".ui5-tb-overflow-btn-hidden")
+			.should("exist", "hidden class attached to tb button, meaning it's not shown as expected");
+	});
 });

package/cypress/support/commands/ColorPalette.commands.ts

@@ -0,0 +1,62 @@
+Cypress.Commands.add("ui5ColorPaletteCheckSelectedColor", { prevSubject: true }, (subject, colorPaletteItem, values) => {
+	cy.get(subject)
+		.as("colorPalette");
+
+	cy.get("ui5-color-palette")
+		.shadow()
+		.find(".ui5-cp-more-colors")
+		.as("moreColors");
+
+	cy.get("@colorPalette")
+		.find(colorPaletteItem)
+		.realClick();
+
+	cy.get("@moreColors")
+		.realClick();
+
+	cy.get("@colorPalette")
+		.shadow()
+		.find("ui5-color-picker")
+		.as("colorPicker");
+
+	cy.get("@colorPicker")
+		.shadow()
+		.find("#red")
+		.as("redColor");
+
+	cy.get("@colorPicker")
+		.shadow()
+		.find("#green")
+		.as("greenColor");
+
+	cy.get("@colorPicker")
+		.shadow()
+		.find("#blue")
+		.as("blueColor");
+
+	cy.get("@colorPicker")
+		.shadow()
+		.find("#alpha")
+		.as("alpha");
+
+	cy.get("@colorPalette")
+		.shadow()
+		.find("ui5-dialog")
+		.find("ui5-button")
+		.as("okButton");
+
+	cy.get("@redColor")
+		.should("have.attr", "value", values.r);
+
+	cy.get("@greenColor")
+		.should("have.attr", "value", values.g);
+
+	cy.get("@blueColor")
+		.should("have.attr", "value", values.b);
+
+	cy.get("@alpha")
+		.should("have.attr", "value", values.a);
+
+	cy.get("@okButton")
+		.realClick();
+});

package/cypress/support/commands.ts

@@ -38,6 +38,7 @@
 
 import { internals, isPhone } from "@ui5/webcomponents-base/dist/Device.js";
 import "./commands/Menu.commands.js";
+import "./commands/ColorPalette.commands.js";
 
 type SimulationDevices = "phone"
 
@@ -50,6 +51,7 @@ declare global {
 			ui5MenuItemClick(): Chainable<void>
 			ui5DOMRef(): Chainable<void>
 			ui5MenuItemPress(key: any): Chainable<void>
+			ui5ColorPaletteCheckSelectedColor(colorPaletteItem: string, values: {r: string, g: string, b: string, a: string}): Chainable<void>
 		}
 	}
 }