diff --git a/packages/main/src/Menu.ts b/packages/main/src/Menu.ts index bcb466997e5e..224e6ab2a5f7 100644 --- a/packages/main/src/Menu.ts +++ b/packages/main/src/Menu.ts @@ -1,5 +1,4 @@ import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js"; -import type { UI5CustomEvent } from "@ui5/webcomponents-base"; 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"; @@ -113,42 +112,57 @@ type MenuBeforeCloseEventDetail = { escPressed: boolean }; * Fired when an item is being clicked. * * **Note:** Since 1.17.0 the event is preventable, allowing the menu to remain open after an item is pressed. - * @allowPreventDefault * @param { HTMLElement } item The currently clicked menu item. * @param { string } text The text of the currently clicked menu item. * @public */ -@event("item-click") +@event("item-click", { + cancelable: true, +}) /** - * Fired before the menu is opened. This event can be cancelled, which will prevent the menu from opening. **This event does not bubble.** + * Fired before the menu is opened. This event can be cancelled, which will prevent the menu from opening. * * **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("before-open") +@event("before-open", { + bubbles: true, + cancelable: true, +}) /** - * Fired after the menu is opened. **This event does not bubble.** + * Fired after the menu is opened. * @public * @since 1.10.0 */ -@event("open") +@event("open", { + bubbles: true, +}) /** - * Fired before the menu is closed. This event can be cancelled, which will prevent the menu from closing. **This event does not bubble.** + * Fired when the menu is being closed. + * @private + */ +@event("close-menu", { + bubbles: true, +}) + +/** + * Fired before the menu is closed. This event can be cancelled, which will prevent the menu from closing. * @public - * @allowPreventDefault * @param {boolean} escPressed Indicates that `ESC` key has triggered the event. * @since 1.10.0 */ -@event("before-close") +@event("before-close", { + bubbles: true, + cancelable: true, +}) /** - * Fired after the menu is closed. **This event does not bubble.** + * Fired after the menu is closed. * @public * @since 1.10.0 */ @@ -161,6 +175,7 @@ class Menu extends UI5Element { "open": void, "before-close": MenuBeforeCloseEventDetail, "close": void, + "close-menu": void, } /** * Defines the header text of the menu (displayed on mobile). @@ -264,9 +279,9 @@ class Menu extends UI5Element { return; } - this.fireEvent("before-open", { + this.fireDecoratorEvent("before-open", { item, - }, false, false); + }); item._popover.opener = item; item._popover.open = true; item.selected = true; @@ -327,13 +342,13 @@ class Menu extends UI5Element { const item = e.detail.item as MenuItem; if (!item._popover) { - const prevented = !this.fireEvent("item-click", { + const prevented = !this.fireDecoratorEvent("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); @@ -363,7 +378,7 @@ class Menu extends UI5Element { } _beforePopoverOpen(e: CustomEvent) { - const prevented = !this.fireEvent("before-open", {}, true, true); + const prevented = !this.fireDecoratorEvent("before-open", {}); if (prevented) { this.open = false; @@ -373,11 +388,11 @@ class Menu extends UI5Element { _afterPopoverOpen() { this._menuItems[0]?.focus(); - this.fireEvent("open", {}, false, true); + this.fireDecoratorEvent("open"); } - _beforePopoverClose(e: UI5CustomEvent) { - const prevented = !this.fireEvent("before-close", { escPressed: e.detail.escPressed }, true, true); + _beforePopoverClose(e: CustomEvent) { + const prevented = !this.fireDecoratorEvent("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 index 9eba6a52b4ea..193568b87f5a 100644 --- a/packages/main/src/MenuItem.ts +++ b/packages/main/src/MenuItem.ts @@ -1,7 +1,8 @@ import jsxRenderer from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js"; import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js"; import property from "@ui5/webcomponents-base/dist/decorators/property.js"; -import type { AccessibilityAttributes, UI5CustomEvent } from "@ui5/webcomponents-base"; +import type { AccessibilityAttributes } from "@ui5/webcomponents-base"; +import event from "@ui5/webcomponents-base/dist/decorators/event-strict.js"; import slot from "@ui5/webcomponents-base/dist/decorators/slot.js"; import i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js"; import { isPhone } from "@ui5/webcomponents-base/dist/Device.js"; @@ -61,7 +62,57 @@ type MenuItemAccessibilityAttributes = Pick("before-open", {}, true, false); + const prevented = !this.fireDecoratorEvent("before-open", {}); if (prevented) { e.preventDefault(); @@ -321,11 +372,11 @@ class MenuItem extends ListItem implements IMenuItem { _afterPopoverOpen() { this.items[0]?.focus(); - this.fireEvent("open", {}, false, false); + this.fireDecoratorEvent("open"); } - _beforePopoverClose(e: UI5CustomEvent) { - const prevented = !this.fireEvent("before-close", { escPressed: e.detail.escPressed }, true, false); + _beforePopoverClose(e: CustomEvent) { + const prevented = !this.fireDecoratorEvent("before-close", { escPressed: e.detail.escPressed }); if (prevented) { e.preventDefault(); @@ -336,13 +387,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"); } }