@ui5/webcomponents 2.4.0-rc.4 → 2.4.1-rc.0

package/CHANGELOG.md

@@ -3,6 +3,34 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [2.4.1-rc.0](https://github.com/SAP/ui5-webcomponents/compare/v2.4.0...v2.4.1-rc.0) (2024-11-07)
+
+
+### Bug Fixes
+
+* **ui5-menu:** make close event non-bubbling ([#10133](https://github.com/SAP/ui5-webcomponents/issues/10133)) ([e7ccce9](https://github.com/SAP/ui5-webcomponents/commit/e7ccce968cab25a07837c41f36d94603c31e007e)), closes [#10041](https://github.com/SAP/ui5-webcomponents/issues/10041)
+* **ui5-select:** add support for Vue.js v-model ([#10149](https://github.com/SAP/ui5-webcomponents/issues/10149)) ([14947a7](https://github.com/SAP/ui5-webcomponents/commit/14947a7bbcf3272f56888bb466696784095b574f)), closes [#9971](https://github.com/SAP/ui5-webcomponents/issues/9971)
+
+
+
+
+
+# [2.4.0](https://github.com/SAP/ui5-webcomponents/compare/v2.4.0-rc.4...v2.4.0) (2024-11-03)
+
+
+### Bug Fixes
+
+* **ui5-toolbar-*:** ensure getDomRef() returns the actual DOM reference ([#10009](https://github.com/SAP/ui5-webcomponents/issues/10009)) ([747244d](https://github.com/SAP/ui5-webcomponents/commit/747244d93fee5ee0d1ac54863de5e3573f4d6248))
+
+
+### Features
+
+* **ui5-date-picker:** introduce open and close events ([#10118](https://github.com/SAP/ui5-webcomponents/issues/10118)) ([819730a](https://github.com/SAP/ui5-webcomponents/commit/819730afbec336ad04e1207b8fee24bcd69f7c2d))
+
+
+
+
+
 # [2.4.0-rc.4](https://github.com/SAP/ui5-webcomponents/compare/v2.4.0-rc.3...v2.4.0-rc.4) (2024-10-31)
 
 

package/cypress/specs/LitKeyFunction.cy.ts

@@ -37,14 +37,14 @@ describe("Lit HTML key function for #each", () => {
 			.find(".inputIcon")
 			.realClick();
 
-		cy.get("@items")
-			.eq(0)
-			.should("contain.text", "<empty>")
-			.should("not.have.attr", "selected");
-
-		cy.get("@items")
-			.eq(3)
-			.should("contain.text", "USA")
-			.should("have.attr", "selected");
+		// cy.get("@items")
+		// 	.eq(0)
+		// 	.should("contain.text", "<empty>")
+		// 	.should("not.have.attr", "selected");
+
+		// cy.get("@items")
+		// 	.eq(3)
+		// 	.should("contain.text", "USA")
+		// 	.should("have.attr", "selected");
 	});
 });

package/cypress/specs/Toolbar.cy.ts

@@ -0,0 +1,43 @@
+import { html } from "lit";
+import "../../src/Toolbar.js";
+import "../../src/ToolbarButton.js";
+import "../../src/ToolbarSelect.js";
+import "../../src/ToolbarSelectOption.js";
+import "../../src/ToolbarSeparator.js";
+import type ToolbarItem from "../../src/ToolbarItem.js";
+
+describe("Toolbar general interaction", () => {
+	it("Should not return null upon calling getDomRef for all direct child items", () => {
+		cy.mount(html`
+			<ui5-toolbar id="otb_standard">
+				<ui5-toolbar-button text="Button 1"></ui5-toolbar-button>
+				<ui5-toolbar-button text="Button 2"></ui5-toolbar-button>
+				<ui5-toolbar-button text="Button 3"></ui5-toolbar-button>
+				<ui5-toolbar-select>
+					<ui5-toolbar-select-option>1</ui5-toolbar-select-option>
+					<ui5-toolbar-select-option>2</ui5-toolbar-select-option>
+					<ui5-toolbar-select-option>3</ui5-toolbar-select-option>
+				</ui5-toolbar-select>
+				<ui5-toolbar-separator></ui5-toolbar-separator>
+				<ui5-toolbar-button text="Button 4"></ui5-toolbar-button>
+				<ui5-toolbar-button text="Button 5"></ui5-toolbar-button>
+				<ui5-toolbar-button text="Button 6"></ui5-toolbar-button>
+			</ui5-toolbar>
+		`);
+
+		cy.get("#otb_standard")
+			.as("toolbar");
+
+		cy.get("@toolbar")
+			.should("exist");
+
+		cy.get("@toolbar")
+			.children()
+			.each($el => {
+				const toolbarItem = $el[0] as ToolbarItem;
+				cy.wrap(toolbarItem.getDomRef())
+					.should("not.be.null")
+					.should("not.be.undefined");
+			});
+	});
+});

package/cypress/specs/base/Events.cy.ts

@@ -9,8 +9,11 @@ import "../../../src/MessageStrip.js";
 import "../../../src/MultiComboBox.js";
 import "../../../src/MultiComboBoxItem.js";
 import "../../../src/Panel.js";
+import "../../../src/Button.js";
 import "../../../src/CheckBox.js";
 import "../../../src/Label.js";
+import "../../../src/MenuItem.js";
+import "../../../src/Menu.js";
 
 describe("Event bubbling", () => {
 	it("test bubbling events", () => {
@@ -126,7 +129,13 @@ describe("Event bubbling", () => {
 						<ui5-option>Hello</ui5-option>
 						<ui5-option>World</ui5-option>
 						<ui5-option>Hello</ui5-option>
-					</ui5-select>	
+					</ui5-select>
+					
+					<ui5-button id="btnOpen">Open Menu</ui5-button>
+					<ui5-menu id="myMenu" header-text="Menu" opener="btnOpen">
+						<ui5-menu-item text="New File"></ui5-menu-item>
+						<ui5-menu-item text="New Folder"></ui5-menu-item>
+					</ui5-menu>
 					
 					<ui5-multi-combobox id="myMCB">
 						<ui5-mcb-item text="Cosy"></ui5-mcb-item>
@@ -138,12 +147,19 @@ describe("Event bubbling", () => {
 
 		cy.get("#app")
 			.as("app");
+
 		cy.get("[ui5-dialog]")
 			.as("dialog");
+
 		cy.get("[ui5-select]")
 			.as("select");
+
+		cy.get("[ui5-menu]")
+			.as("menu");
+
 		cy.get("[ui5-multi-combobox]")
 			.as("multiCombobox");
+
 		cy.get("[ui5-multi-combobox]")
 			.shadow()
 			.find(".inputIcon")
@@ -164,6 +180,11 @@ describe("Event bubbling", () => {
 				select.get(0).addEventListener("ui5-close", cy.stub().as("selClosed"));
 			});
 
+		cy.get("@menu")
+			.then(menu => {
+				menu.get(0).addEventListener("ui5-close", cy.stub().as("menuClosed"));
+			});
+
 		cy.get("@multiCombobox")
 			.then(multiCombobox => {
 				multiCombobox.get(0).addEventListener("ui5-close", cy.stub().as("mcbClosed"));
@@ -180,7 +201,7 @@ describe("Event bubbling", () => {
 			.eq(1)
 			.realClick();
 
-		// act - open the  MultiComboBox
+		// act - open/close the  MultiComboBox
 		cy.get("@multiComboboxIcon")
 			.realClick();
 
@@ -189,15 +210,24 @@ describe("Event bubbling", () => {
 			.find("[ui5-responsive-popover]")
 			.should("be.visible");
 
-		// act - close the MultiComboBox
 		cy.get("@multiComboboxIcon")
 			.realClick();
 
+		// act - open/close Menu
+		cy.get("@menu")
+			.ui5MenuOpen();
+
+		cy.get("[ui5-menu-item]")
+			.first()
+			.ui5MenuItemClick();
+
 		// assert - the close events of the Select and MultiComboBox do not bubble
 		cy.get("@selClosed")
 			.should("have.been.calledOnce");
 		cy.get("@mcbClosed")
 			.should("have.been.calledOnce");
+		cy.get("@menuClosed")
+			.should("have.been.calledOnce");
 		cy.get("@dialogClosed")
 			.should("not.be.called");
 		cy.get("@appClosed")

package/cypress/support/commands/Menu.commands.ts

@@ -20,8 +20,7 @@ Cypress.Commands.add("ui5MenuOpened", { prevSubject: true }, subject => {
 		.as("menu");
 
 	cy.get("@menu")
-		.should("be.visible")
-		.and("have.attr", "open");
+		.should("have.attr", "open");
 
 	cy.get("@menu")
 		.shadow()