From 0238af82e7b5339d7312834e1fa788fc060cb866 Mon Sep 17 00:00:00 2001
From: Lidiya Georgieva <lidiya.georgieva@sap.com>
Date: Fri, 11 Jul 2025 16:30:43 +0300
Subject: [PATCH 1/2] refactor(ui5-li-notification): change `close` event to
 non-bubbling

fixes: #11756
---
 .../fiori/cypress/specs/base/Events.cy.tsx    | 79 +++++++++++++++++++
 packages/fiori/src/NotificationListItem.ts    |  4 +-
 packages/fiori/test/pages/EventBubbling.html  | 46 +++++++++++
 packages/main/test/pages/EventBubbling.html   |  2 +-
 4 files changed, 127 insertions(+), 4 deletions(-)
 create mode 100644 packages/fiori/cypress/specs/base/Events.cy.tsx
 create mode 100644 packages/fiori/test/pages/EventBubbling.html

diff --git a/packages/fiori/cypress/specs/base/Events.cy.tsx b/packages/fiori/cypress/specs/base/Events.cy.tsx
new file mode 100644
index 000000000000..6f617156a50a
--- /dev/null
+++ b/packages/fiori/cypress/specs/base/Events.cy.tsx
@@ -0,0 +1,79 @@
+import Dialog from "@ui5/webcomponents/dist/Dialog.js";
+import NotificationListItem from "../../../src/NotificationListItem.js";
+import NotificationList from "../../../src/NotificationList.js";
+import { setAnimationMode } from "@ui5/webcomponents-base/dist/config/AnimationMode.js";
+import AnimationMode from "@ui5/webcomponents-base/dist/types/AnimationMode.js";
+
+describe("Event bubbling", () => {
+	before(() => {
+		cy.wrap({ setAnimationMode })
+			.invoke("setAnimationMode", AnimationMode.None);
+	})
+
+	it("test bubbling events", () => {
+		cy.mount(
+			<div id="app">
+				<Dialog id="myDialog" headerText="Dialog">
+					<NotificationList id="myNotList" header-text="Notifications">
+						<NotificationListItem id="myNotItem" show-close
+							title-text="Single line notification."
+							state="Information">
+								<span slot="footnotes">Office Notifications</span>
+								<span slot="footnotes">3 Days</span>
+						</NotificationListItem>
+					</NotificationList>
+				</Dialog>
+			</div>
+		);
+
+		cy.get("#app")
+			.as("app");
+
+		cy.get("[ui5-dialog]")
+			.as("dialog");
+
+		cy.get("[ui5-notification-list]")
+			.as("notificationList");
+
+		cy.get("[ui5-li-notification]")
+			.as("notificationListItem");
+
+		cy.get("@app")
+			.then(app => {
+				app.get(0).addEventListener("ui5-close", cy.stub().as("appClosed"));
+			});
+
+		cy.get("@dialog")
+			.then(dialog => {
+				dialog.get(0).addEventListener("ui5-close", cy.stub().as("dialogClosed"));
+			});
+
+		cy.get("@notificationList")
+			.then(notificationList => {
+				notificationList.get(0).addEventListener("ui5-close", cy.stub().as("notListClosed"));
+			});
+
+		cy.get("@notificationListItem")
+			.then(notificationListItem => {
+				notificationListItem.get(0).addEventListener("ui5-close", cy.stub().as("notListItemClosed"));
+			});
+
+		cy.get("@dialog").invoke("attr", "open", true);
+
+		// act - close NotificationListItem
+		cy.get("@notificationListItem")
+			.shadow()
+			.find(".ui5-nli-close-btn")
+			.realClick();
+
+		// assert - the close event of the NotificationListItem does not bubble
+		cy.get("@notListItemClosed")
+			.should("have.been.calledOnce");
+		cy.get("@notListClosed")
+			.should("have.been.not.called");
+		cy.get("@dialogClosed")
+			.should("have.been.not.called");
+		cy.get("@appClosed")
+			.should("have.been.not.called");
+	});
+});
diff --git a/packages/fiori/src/NotificationListItem.ts b/packages/fiori/src/NotificationListItem.ts
index e5cb7aa7e8fb..8a3aa6b49110 100644
--- a/packages/fiori/src/NotificationListItem.ts
+++ b/packages/fiori/src/NotificationListItem.ts
@@ -145,9 +145,7 @@ const ICON_PER_STATUS_DESIGN = {
  * @param {HTMLElement} item the closed item.
  * @public
  */
-@event("close", {
-	bubbles: true,
-})
+@event("close")
 
 class NotificationListItem extends NotificationListItemBase {
 	eventDetails!: NotificationListItemBase["eventDetails"] & {
diff --git a/packages/fiori/test/pages/EventBubbling.html b/packages/fiori/test/pages/EventBubbling.html
new file mode 100644
index 000000000000..cfbd7429e473
--- /dev/null
+++ b/packages/fiori/test/pages/EventBubbling.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<meta charset="UTF-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
+	<title>Event Bubbling for Fiori</title>
+	<script src="%VITE_BUNDLE_PATH%" type="module"></script>
+</head>
+
+<body>
+	<div id="app">
+		<ui5-dialog id="myDialog" header-text="Dialog With Dropdowns" open>
+			<ui5-notification-list id="myNotList" header-text="Notifications">
+				<ui5-li-notification id="myNotItem" show-close
+					title-text="Single line notification."
+					state="Information">
+						<span slot="footnotes">Office Notifications</span>
+						<span slot="footnotes">3 Days</span>
+				</ui5-li-notification>
+			</ui5-notification-list>
+		</ui5-dialog>
+	</div>
+</body>
+
+<script>
+	app.addEventListener("close", function(e) {
+		console.log("App on close")
+	});
+	
+	myDialog.addEventListener("close", function(e) {
+		console.log("Dialog on close")
+	});
+	
+	myNotList.addEventListener("close", function(e) {
+		console.log("Notification List on close")
+	});
+
+	myNotItem.addEventListener("close", function(e) {
+		console.log("Notification Item on close")
+	});
+
+	btnOpen.addEventListener("click", function(e) {
+		myMenu.open = true;
+	});
+</script>
+</html>
diff --git a/packages/main/test/pages/EventBubbling.html b/packages/main/test/pages/EventBubbling.html
index a477ba761484..de848662b085 100644
--- a/packages/main/test/pages/EventBubbling.html
+++ b/packages/main/test/pages/EventBubbling.html
@@ -3,7 +3,7 @@
 <head>
 	<meta charset="UTF-8">
 	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
-	<title>Event Bubbling</title>
+	<title>Event Bubbling for Main</title>
 	<script src="%VITE_BUNDLE_PATH%" type="module"></script>
 </head>
 

From 0dbb55013d785278140861b0a653c95a72870aa5 Mon Sep 17 00:00:00 2001
From: Lidiya Georgieva <lidiya.georgieva@sap.com>
Date: Tue, 15 Jul 2025 16:05:01 +0300
Subject: [PATCH 2/2] chore: adding new private _close event to bubbles to the
 List

---
 packages/fiori/src/NotificationListItem.ts   | 12 ++++++++++++
 packages/fiori/test/pages/EventBubbling.html | 20 ++++++++++++++++----
 packages/main/src/ListTemplate.tsx           |  2 +-
 3 files changed, 29 insertions(+), 5 deletions(-)

diff --git a/packages/fiori/src/NotificationListItem.ts b/packages/fiori/src/NotificationListItem.ts
index 8a3aa6b49110..acd64744d1d4 100644
--- a/packages/fiori/src/NotificationListItem.ts
+++ b/packages/fiori/src/NotificationListItem.ts
@@ -147,10 +147,20 @@ const ICON_PER_STATUS_DESIGN = {
  */
 @event("close")
 
+/**
+ * Fired when the `Close` button is pressed.
+ * @param {HTMLElement} item the closed item.
+ * @private
+ */
+@event("_close", {
+	bubbles: true,
+})
+
 class NotificationListItem extends NotificationListItemBase {
 	eventDetails!: NotificationListItemBase["eventDetails"] & {
 		_press: NotificationListItemPressEventDetail,
 		close: NotificationListItemCloseEventDetail,
+		_close: NotificationListItemCloseEventDetail,
 	}
 	/**
 	* Defines if the `titleText` and `description` should wrap,
@@ -497,6 +507,7 @@ class NotificationListItem extends NotificationListItemBase {
 
 		if (isDelete(e)) {
 			this.fireDecoratorEvent("close", { item: this });
+			this.fireDecoratorEvent("_close", { item: this });
 		}
 
 		if (isF10Shift(e)) {
@@ -510,6 +521,7 @@ class NotificationListItem extends NotificationListItemBase {
 
 	_onBtnCloseClick() {
 		this.fireDecoratorEvent("close", { item: this });
+		this.fireDecoratorEvent("_close", { item: this });
 	}
 
 	_onBtnMenuClick() {
diff --git a/packages/fiori/test/pages/EventBubbling.html b/packages/fiori/test/pages/EventBubbling.html
index cfbd7429e473..520bfcc6e159 100644
--- a/packages/fiori/test/pages/EventBubbling.html
+++ b/packages/fiori/test/pages/EventBubbling.html
@@ -24,15 +24,27 @@
 
 <script>
 	app.addEventListener("close", function(e) {
-		console.log("App on close")
+		console.log("[X] App on close")
+	});
+
+		app.addEventListener("item-close", function(e) {
+		console.log("App on item-close")
 	});
 	
 	myDialog.addEventListener("close", function(e) {
-		console.log("Dialog on close")
+		console.log("[X] Dialog on close")
 	});
-	
+		
+	myDialog.addEventListener("item-close", function(e) {
+		console.log("Dialog on item-close")
+	});
+
 	myNotList.addEventListener("close", function(e) {
-		console.log("Notification List on close")
+		console.log("[X] Notification List on close")
+	});
+
+	myNotList.addEventListener("item-close", function(e) {
+		console.log("Notification List on item-close")
 	});
 
 	myNotItem.addEventListener("close", function(e) {
diff --git a/packages/main/src/ListTemplate.tsx b/packages/main/src/ListTemplate.tsx
index 04da24586dbf..a8fe0b910d37 100644
--- a/packages/main/src/ListTemplate.tsx
+++ b/packages/main/src/ListTemplate.tsx
@@ -13,7 +13,7 @@ export default function ListTemplate(this: List) {
 			onDrop={this._ondrop}
 			onDragLeave={this._ondragleave}
 			// events bubbling from slotted items
-			onui5-close={this.onItemClose}
+			onui5-_close={this.onItemClose}
 			onui5-toggle={this.onItemToggle}
 			onui5-request-tabindex-change={this.onItemTabIndexChange}
 			onui5-_focused={this.onItemFocused}