chore(ui5-user-menu-item): improve hook handling

Author: SvilenDarvenyashki

packages/fiori/src/NavigationMenuItemTemplate.tsx

@@ -1,17 +1,17 @@
 import type NavigationMenuItem from "./NavigationMenuItem.js";
 import MenuItemTemplate from "@ui5/webcomponents/dist/MenuItemTemplate.js";
+import type { MenuItemHooks } from "@ui5/webcomponents/dist/MenuItemTemplate.js";
 import Icon from "@ui5/webcomponents/dist/Icon.js";
 import slimArrowRightIcon from "@ui5/webcomponents-icons/dist/slim-arrow-right.js";
 import arrowRightIcon from "@ui5/webcomponents-icons/dist/arrow-right.js";
-import type { ListItemHooks } from "@ui5/webcomponents/dist/ListItemTemplate.js";
 
-const predefinedHooks: Partial<ListItemHooks> = {
+const predefinedHooks: Partial<MenuItemHooks> = {
 	listItemContent,
 	iconBegin,
 	iconEnd,
 };
 
-export default function NavigationMenuItemTemplate(this: NavigationMenuItem, hooks?: Partial<ListItemHooks>) {
+export default function NavigationMenuItemTemplate(this: NavigationMenuItem, hooks?: Partial<MenuItemHooks>) {
 	const currentHooks = { ...predefinedHooks, ...hooks, };
 
 	return <>

packages/fiori/src/UserMenuItem.ts

@@ -45,20 +45,6 @@ class UserMenuItem extends MenuItem {
 	@slot({ "default": true, type: HTMLElement, invalidateOnChildChange: true })
 	declare items: DefaultSlot<UserMenuItem>;
 
-	get _accessibleNameRef(): string {
-		return `${this._id}-menu-item-text`;
-	}
-
-	get _accInfo() {
-		const result = { ...super._accInfo };
-
-		if (this.hasSubmenu) {
-			result.ariaOwns = `${this._id}-menu-list`;
-		}
-
-		return result;
-	}
-
 	/**
 	 * When set, a second line appears below the menu item text
 	 * showing the text of the currently selected (checked) sub-item.
@@ -67,7 +53,7 @@ class UserMenuItem extends MenuItem {
 	 * @public
 	 */
 	@property({ type: Boolean })
-	showSelectionText = false;
+	showSelection = false;
 
 	get _menuItems() {
 		return this.items.filter(isInstanceOfMenuItem);
@@ -78,7 +64,7 @@ class UserMenuItem extends MenuItem {
 	 * Only returns text for single-select groups.
 	 */
 	get _selectedSubItemText(): string {
-		if (!this.showSelectionText) {
+		if (!this.showSelection) {
 			return "";
 		}
 

packages/fiori/src/UserMenuItemTemplate.tsx

@@ -3,18 +3,18 @@ import MenuItemTemplate from "@ui5/webcomponents/dist/MenuItemTemplate.js";
 import type { MenuItemHooks } from "@ui5/webcomponents/dist/MenuItemTemplate.js";
 
 export default function UserMenuItemTemplate(this: UserMenuItem) {
-	const menuItemHooks: Partial<MenuItemHooks> = {};
+	const hooks: Partial<MenuItemHooks> = {};
 
-	if (this.showSelectionText) {
-		menuItemHooks.menuItemTextContent = userMenuItemTextContent;
+	if (this.showSelection) {
+		hooks.menuItemTextContent = userMenuItemTextContent;
 	}
 
-	return [MenuItemTemplate.call(this, undefined, menuItemHooks)];
+	return [MenuItemTemplate.call(this, hooks)];
 }
 
 function userMenuItemTextContent(this: UserMenuItem) {
 	return (
-		<div id={`${this._id}-menu-item-text`} class="ui5-user-menu-item-text-wrapper">
+		<div class="ui5-user-menu-item-text-wrapper">
 			{this.text && <div class="ui5-menu-item-text">{this.text}</div>}
 			{this._selectedSubItemText &&
 				<div class="ui5-user-menu-item-selection-text">{this._selectedSubItemText}</div>

packages/fiori/test/pages/UserMenu.html

@@ -65,7 +65,7 @@
 			<ui5-user-menu-item icon="accelerated" text="Item 2" data-id="multi-select-item2"></ui5-user-menu-item>
 		</ui5-user-menu-item-group>
 	</ui5-user-menu-item>
-	<ui5-user-menu-item text="Single Select" data-id="single-select" show-selection-text>
+	<ui5-user-menu-item text="Single Select" data-id="single-select" show-selection>
 		<ui5-user-menu-item-group check-mode="Single">
 			<ui5-user-menu-item icon="private" text="Item 1" data-id="single-select" checked></ui5-user-menu-item>
 			<ui5-user-menu-item icon="accelerated" text="Item 2" data-id="single-select-item2"></ui5-user-menu-item>

packages/main/src/MenuItemTemplate.tsx

@@ -11,27 +11,22 @@ import Icon from "./Icon.js";
 import ListItemTemplate from "./ListItemTemplate.js";
 import type { ListItemHooks } from "./ListItemTemplate.js";
 
-export type MenuItemHooks = {
+export type MenuItemHooks = ListItemHooks & {
 	menuItemTextContent: (this: any) => JSX.Element;
 }
 
-const predefinedMenuItemHooks: MenuItemHooks = {
-	menuItemTextContent,
-};
-
-const predefinedHooks: Partial<ListItemHooks> = {
-	listItemContent,
+const predefinedHooks: Partial<MenuItemHooks> = {
 	iconBegin,
+	menuItemTextContent,
 };
 
-export default function MenuItemTemplate(this: MenuItem, hooks?: Partial<ListItemHooks>, menuItemHooks?: Partial<MenuItemHooks>) {
+export default function MenuItemTemplate(this: MenuItem, hooks?: Partial<MenuItemHooks>) {
 	const currentHooks = { ...predefinedHooks, ...hooks };
-	const currentMenuItemHooks = { ...predefinedMenuItemHooks, ...menuItemHooks };
 
 	if (!hooks?.listItemContent) {
 		currentHooks.listItemContent = function(this: MenuItem) {
 			return (<>
-				{currentMenuItemHooks.menuItemTextContent.call(this)}
+				{currentHooks.menuItemTextContent!.call(this)}
 
 				{rightContent.call(this)}
 				{checkmarkContent.call(this)}
@@ -46,15 +41,6 @@ export default function MenuItemTemplate(this: MenuItem, hooks?: Partial<ListIte
 	</>;
 }
 
-function listItemContent(this: MenuItem) {
-	return (<>
-		{menuItemTextContent.call(this)}
-
-		{rightContent.call(this)}
-		{checkmarkContent.call(this)}
-	</>);
-}
-
 function menuItemTextContent(this: MenuItem) {
 	return <>{this.text && <div class="ui5-menu-item-text">{this.text}</div>}</>;
 }