chore: use fireDecoratorEvent over fireEvent

SAP · Nov 25, 2024 · 7fa1908 · 7fa1908
1 parent 44c6199
commit 7fa1908
Show file tree

Hide file tree

Showing 2 changed files with 87 additions and 15 deletions.
diff --git a/packages/main/src/Menu.ts b/packages/main/src/Menu.ts
@@ -132,6 +132,7 @@ type MenuBeforeCloseEventDetail = { escPressed: boolean };
 			type: String,
 		},
 	},
+	cancelable: true,
 })
 
 /**
@@ -153,14 +154,22 @@ type MenuBeforeCloseEventDetail = { escPressed: boolean };
 			type: HTMLElement,
 		},
 	},
+	bubbles: true,
+	cancelable: true,
 })
 
 /**
  * Fired after the menu is opened. **This event does not bubble.**
  * @public
  * @since 1.10.0
  */
-@event("open")
+@event("open", { bubbles: true })
+
+/**
+ * Fired when the menu is being closed.
+ * @private
+ */
+@event("close-menu")
 
 /**
  * Fired before the menu is closed. This event can be cancelled, which will prevent the menu from closing. **This event does not bubble.**
@@ -178,6 +187,8 @@ type MenuBeforeCloseEventDetail = { escPressed: boolean };
 			type: Boolean,
 		},
 	},
+	bubbles: true,
+	cancelable: true,
 })
 
 /**
@@ -290,9 +301,9 @@ class Menu extends UI5Element {
 			return;
 		}
 
-		this.fireEvent<MenuBeforeOpenEventDetail>("before-open", {
+		this.fireDecoratorEvent<MenuBeforeOpenEventDetail>("before-open", {
 			item,
-		}, false, false);
+		});
 		item._popover.opener = item;
 		item._popover.open = true;
 		item.selected = true;
@@ -342,13 +353,13 @@ class Menu extends UI5Element {
 		const item = e.detail.item as MenuItem;
 
 		if (!item._popover) {
-			const prevented = !this.fireEvent<MenuItemClickEventDetail>("item-click", {
+			const prevented = !this.fireDecoratorEvent<MenuItemClickEventDetail>("item-click", {
 				"item": item,
 				"text": item.text || "",
-			}, true, false);
+			});
 
 			if (!prevented && this._popover) {
-				item.fireEvent("close-menu", {});
+				item.fireDecoratorEvent("close-menu", {});
 			}
 		} else {
 			this._openItemSubMenu(item);
@@ -378,7 +389,7 @@ class Menu extends UI5Element {
 	}
 
 	_beforePopoverOpen(e: CustomEvent) {
-		const prevented = !this.fireEvent<MenuBeforeOpenEventDetail>("before-open", {}, true, true);
+		const prevented = !this.fireDecoratorEvent<MenuBeforeOpenEventDetail>("before-open", {});
 
 		if (prevented) {
 			this.open = false;
@@ -388,11 +399,11 @@ class Menu extends UI5Element {
 
 	_afterPopoverOpen() {
 		this._menuItems[0]?.focus();
-		this.fireEvent("open", {}, false, true);
+		this.fireDecoratorEvent("open", {});
 	}
 
 	_beforePopoverClose(e: CustomEvent<ResponsivePopoverBeforeCloseEventDetail>) {
-		const prevented = !this.fireEvent<MenuBeforeCloseEventDetail>("before-close", { escPressed: e.detail.escPressed }, true, true);
+		const prevented = !this.fireDecoratorEvent<MenuBeforeCloseEventDetail>("before-close", { escPressed: e.detail.escPressed });
 
 		if (prevented) {
 			this.open = true;

diff --git a/packages/main/src/MenuItem.ts b/packages/main/src/MenuItem.ts
@@ -1,6 +1,7 @@
 import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
 import property from "@ui5/webcomponents-base/dist/decorators/property.js";
 import slot from "@ui5/webcomponents-base/dist/decorators/slot.js";
+import event from "@ui5/webcomponents-base/dist/decorators/event.js";
 import i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js";
 import { isPhone } from "@ui5/webcomponents-base/dist/Device.js";
 import AriaHasPopup from "@ui5/webcomponents-base/dist/types/AriaHasPopup.js";
@@ -60,6 +61,66 @@ type MenuItemAccessibilityAttributes = Pick<AccessibilityAttributes, "ariaKeySho
 	styles: [ListItem.styles, menuItemCss],
 	dependencies: [...ListItem.dependencies, ResponsivePopover, List, BusyIndicator, Icon],
 })
+
+/**
+ * Fired before the menu is opened. This event can be cancelled, which will prevent the menu from opening. **This event does not bubble.**
+ *
+ * **Note:** Since 1.14.0 the event is also fired before a sub-menu opens.
+ * @public
+ * @allowPreventDefault
+ * @since 1.10.0
+ * @param { HTMLElement } item The `ui5-menu-item` that triggers opening of the sub-menu or undefined when fired upon root menu opening.
+ */
+@event<MenuBeforeOpenEventDetail>("before-open", {
+	detail: {
+		/**
+		 * @public
+		 * @since 1.14.0
+		 */
+		item: {
+			type: HTMLElement,
+		},
+	},
+	cancelable: true,
+})
+
+/**
+ * Fired after the menu is opened. **This event does not bubble.**
+ * @public
+ */
+@event("open")
+
+/**
+ * Fired when the menu is being closed.
+ * @private
+ */
+@event("close-menu")
+
+/**
+ * Fired before the menu is closed. This event can be cancelled, which will prevent the menu from closing. **This event does not bubble.**
+ * @public
+ * @allowPreventDefault
+ * @param {boolean} escPressed Indicates that `ESC` key has triggered the event.
+ * @since 1.10.0
+ */
+@event<MenuBeforeCloseEventDetail>("before-close", {
+	detail: {
+		/**
+		 * @public
+		 */
+		escPressed: {
+			type: Boolean,
+		},
+	},
+	cancelable: true,
+})
+
+/**
+ * Fired after the menu is closed. **This event does not bubble.**
+ * @public
+ * @since 1.10.0
+ */
+@event("close")
 class MenuItem extends ListItem implements IMenuItem {
 	/**
 	 * Defines the text of the tree item.
@@ -289,7 +350,7 @@ class MenuItem extends ListItem implements IMenuItem {
 			this._popover.open = false;
 		}
 		this.selected = false;
-		this.fireEvent("close-menu", {});
+		this.fireDecoratorEvent("close-menu", {});
 	}
 
 	_close() {
@@ -300,7 +361,7 @@ class MenuItem extends ListItem implements IMenuItem {
 	}
 
 	_beforePopoverOpen(e: CustomEvent) {
-		const prevented = !this.fireEvent<MenuBeforeOpenEventDetail>("before-open", {}, true, false);
+		const prevented = !this.fireDecoratorEvent<MenuBeforeOpenEventDetail>("before-open", {});
 
 		if (prevented) {
 			e.preventDefault();
@@ -309,11 +370,11 @@ class MenuItem extends ListItem implements IMenuItem {
 
 	_afterPopoverOpen() {
 		this.items[0]?.focus();
-		this.fireEvent("open", {}, false, false);
+		this.fireDecoratorEvent("open");
 	}
 
 	_beforePopoverClose(e: CustomEvent<ResponsivePopoverBeforeCloseEventDetail>) {
-		const prevented = !this.fireEvent<MenuBeforeCloseEventDetail>("before-close", { escPressed: e.detail.escPressed }, true, false);
+		const prevented = !this.fireDecoratorEvent<MenuBeforeCloseEventDetail>("before-close", { escPressed: e.detail.escPressed });
 
 		if (prevented) {
 			e.preventDefault();
@@ -324,13 +385,13 @@ class MenuItem extends ListItem implements IMenuItem {
 		if (e.detail.escPressed) {
 			this.focus();
 			if (isPhone()) {
-				this.fireEvent("close-menu", {});
+				this.fireDecoratorEvent("close-menu", {});
 			}
 		}
 	}
 
 	_afterPopoverClose() {
-		this.fireEvent("close", {}, false, false);
+		this.fireDecoratorEvent("close", {});
 	}
 }