diff --git a/packages/main/src/Menu.ts b/packages/main/src/Menu.ts index f5cbc005ff34..d30f100de112 100644 --- a/packages/main/src/Menu.ts +++ b/packages/main/src/Menu.ts @@ -56,6 +56,11 @@ type MenuItemClickEventDetail = { type MenuBeforeOpenEventDetail = { item?: MenuItem }; type MenuBeforeCloseEventDetail = { escPressed: boolean }; +type MenuItemFocusEventDetail = { + ref: HTMLElement, + item: MenuItem, +}; + type OpenerStandardListItem = StandardListItem & { associatedItem: MenuItem }; /** @@ -184,6 +189,32 @@ type OpenerStandardListItem = StandardListItem & { associatedItem: MenuItem }; * @since 1.10.0 */ @event("after-close") + +/** + * Fired when a menu item receives focus. + * + * @public + * @param { HTMLElement } ref The currently focused element representing a ui5-menu-item. + * @param { HTMLElement } item The ui5-menu-item represented by the focused element. + * @since 1.23.1 + */ +@event("item-focus", { + detail: { + /** + * @public + */ + ref: { + type: HTMLElement, + }, + /** + * @public + */ + item: { + type: HTMLElement, + }, + }, +}) + class Menu extends UI5Element { /** * Defines the header text of the menu (displayed on mobile). @@ -539,7 +570,7 @@ class Menu extends UI5Element { : (target.getRootNode() as ShadowRoot).host as MenuListItem; const item = menuListItem.associatedItem as MenuItem; const mainMenu = this._findMainMenu(item); - mainMenu?.fireEvent("item-focus", { ref: menuListItem, item }); + mainMenu?.fireEvent("item-focus", { ref: menuListItem, item }); } _startOpenTimeout(item: MenuItem, opener: OpenerStandardListItem) { @@ -712,4 +743,5 @@ export type { MenuItemClickEventDetail, MenuBeforeCloseEventDetail, MenuBeforeOpenEventDetail, + MenuItemFocusEventDetail, };