feat(ui5-menu): refactor menu items display

packages/main/src/List.ts

@@ -752,7 +752,7 @@ class List extends UI5Element {
 	}
 
 	getEnabledItems(): Array<ListItemBase> {
-		return this.getItems().filter(item => !item.disabled);
+		return this.getItems().filter(item => item._focusable);
 	}
 
 	getItems(): Array<ListItemBase> {
@@ -848,7 +848,7 @@ class List extends UI5Element {
 		}
 
 		if (lastTabbableEl === target) {
-			if (this.getFirstItem(x => x.selected && !x.disabled)) {
+			if (this.getFirstItem(x => x.selected && x._focusable)) {
 				this.focusFirstSelectedItem();
 			} else if (this.getPreviouslyFocusedItem()) {
 				this.focusPreviouslyFocusedItem();
@@ -1023,7 +1023,7 @@ class List extends UI5Element {
 	 */
 	focusFirstItem() {
 		// only enabled items are focusable
-		const firstItem = this.getFirstItem(x => !x.disabled);
+		const firstItem = this.getFirstItem(x => x._focusable);
 
 		if (firstItem) {
 			firstItem.focus();
@@ -1040,7 +1040,7 @@ class List extends UI5Element {
 
 	focusFirstSelectedItem() {
 		// only enabled items are focusable
-		const firstSelectedItem = this.getFirstItem(x => x.selected && !x.disabled);
+		const firstSelectedItem = this.getFirstItem(x => x.selected && x._focusable);
 
 		if (firstSelectedItem) {
 			firstSelectedItem.focus();

packages/main/src/ListItem.ts

@@ -374,7 +374,7 @@ abstract class ListItem extends ListItemBase {
 	}
 
 	fireItemPress(e: Event) {
-		if (this.isInactive) {
+		if (this.isInactive || this.disabled) {
 			return;
 		}
 		if (isEnter(e as KeyboardEvent)) {

packages/main/src/ListItemBase.ts

@@ -130,7 +130,7 @@ class ListItemBase extends UI5Element implements ITabbable {
 		return {
 			main: {
 				"ui5-li-root": true,
-				"ui5-li--focusable": !this.disabled,
+				"ui5-li--focusable": this._focusable,
 			},
 		};
 	}
@@ -139,12 +139,16 @@ class ListItemBase extends UI5Element implements ITabbable {
 		return this.disabled ? true : undefined;
 	}
 
+	get _focusable() {
+		return !this.disabled;
+	}
+
 	get hasConfigurableMode() {
 		return false;
 	}
 
 	get _effectiveTabIndex() {
-		if (this.disabled) {
+		if (!this._focusable) {
 			return -1;
 		}
 		if (this.selected) {

packages/main/src/Menu.hbs

@@ -1,5 +1,4 @@
 <ui5-responsive-popover
-	id="{{_id}}-menu-rp"
 	class="ui5-menu-rp"
 	horizontal-align="Left"
 	placement-type={{placementType}}
@@ -17,7 +16,7 @@
 		slot="header"
 		class="ui5-menu-dialog-header"
 	>
-	{{#if isSubMenuOpened}}
+	{{#if isSubMenuOpen}}
 		<ui5-button
 			icon="nav-back"
 			class="ui5-menu-back-button"
@@ -38,15 +37,15 @@
 			icon="decline"
 			design="Transparent"
 			aria-label="{{labelClose}}"
-			@click={{close}}
+			@click={{_closeAll}}
 		>
 		</ui5-button>
 	</div>
 {{/if}}
 	<div
 		id="{{_id}}-menu-main"
 	>
-	{{#if _currentItems.length}}
+	{{#if items.length}}
 		<ui5-list
 			id="{{_id}}-menu-list"
 			mode="None"
@@ -55,54 +54,11 @@
 			separators="None"
 			accessible-role="menu"
 			@ui5-item-click={{_itemClick}}
-			@mouseover="{{_busyMouseOver}}"
+			@mouseover={{_itemMouseOver}}
+			@mouseout={{_itemMouseOut}}
+			@keydown={{_itemKeyDown}}
 		>
-		{{#each _currentItems}}
-			<ui5-li
-				.associatedItem="{{this.item}}"
-				class="ui5-menu-item"
-				id="{{../_id}}-menu-item-{{@index}}"
-				.icon="{{this.item.icon}}"
-				accessible-name={{this.item.ariaLabelledByText}}
-				accessible-role="menuitem"
-				.additionalText="{{this.item._additionalText}}"
-				._ariaHasPopup={{this.ariaHasPopup}}
-				?disabled={{this.item.disabled}}
-				?starts-section={{this.item.startsSection}}
-				?selected={{this.item.subMenuOpened}}
-				?is-phone={{../isPhone}}
-				@mouseover={{../_itemMouseOver}}
-				@mouseout={{../_itemMouseOut}}
-				@keydown={{../_itemKeyDown}}
-			>
-				<div class="ui5-menu-item-text">
-				{{#if this.item.hasDummyIcon}}
-					<div
-						class="ui5-menu-item-dummy-icon"
-					>
-					</div>
-				{{/if}}
-				{{this.item.text}}
-				{{#if this.item.hasSubmenu}}
-					<div
-						class="ui5-menu-item-submenu-icon"
-					>
-						<ui5-icon
-							part="subicon"
-							name="slim-arrow-right"
-							class="ui5-menu-item-icon-end"
-						>
-						</ui5-icon>
-					</div>
-				{{else if this.item._siblingsWithChildren}}
-					<div
-						class="ui5-menu-item-no-icon-end"
-					>
-					</div>
-				{{/if}}
-				</div>
-			</ui5-li>
-		{{/each}}
+		<slot></slot>
 		</ui5-list>
 	{{else if busy}}
 		<ui5-busy-indicator