feat(ui5-menu): Initial implementation (#4742)

This is the initial implementation of and web components that allow creating of a hierarchical menu structure.

.husky/common.sh

@@ -0,0 +1,8 @@
+command_exists () {
+  command -v "$1" >/dev/null 2>&1
+}
+
+# Windows 10, Git Bash and Yarn workaround
+if command_exists winpty && test -t 1; then
+  exec < /dev/tty
+fi

.husky/pre-push

@@ -1,4 +1,5 @@
 #!/bin/sh
 . "$(dirname "$0")/_/husky.sh"
+. "$(dirname "$0")/common.sh"
 
 yarn husky:pre-push

packages/main/bundle.common.js

@@ -55,6 +55,8 @@ import Input from "./dist/Input.js";
 import MultiInput from "./dist/MultiInput.js";
 import Label from "./dist/Label.js";
 import Link from "./dist/Link.js";
+import Menu from "./dist/Menu.js";
+import MenuItem from "./dist/MenuItem.js";
 import Popover from "./dist/Popover.js";
 import Panel from "./dist/Panel.js";
 import RadioButton from "./dist/RadioButton.js";

packages/main/src/ListItem.hbs

@@ -16,6 +16,7 @@
 	aria-expanded="{{_accInfo.ariaExpanded}}"
 	title="{{title}}"
 	aria-level="{{_accInfo.ariaLevel}}"
+	aria-haspopup="{{_accInfo.ariaHaspopup}}"
 	aria-posinset="{{_accInfo.posinset}}"
 	aria-setsize="{{_accInfo.setsize}}"
 	aria-describedby="{{_id}}-invisibleText-describedby"

packages/main/src/ListItem.js

@@ -87,10 +87,29 @@ const metadata = {
 			defaultValue: "listitem",
 		},
 
+		/**
+		 * Used to define the role of the list item.
+		 *
+		 * @private
+		 * @type {string}
+		 * @defaultvalue ""
+		 * @since 1.3.0
+		 *
+		 */
+		accessibleRole: {
+			type: String,
+		},
+
 		_mode: {
 			type: ListMode,
 			defaultValue: ListMode.None,
 		},
+
+		_ariaHasPopup: {
+			type: String,
+			noAttribute: true,
+		},
+
 	},
 	events: /** @lends sap.ui.webcomponents.main.ListItem.prototype */ {
 		/**
@@ -357,12 +376,13 @@ class ListItem extends ListItemBase {
 
 	get _accInfo() {
 		return {
-			role: this.role,
+			role: this.accessibleRole || this.role,
 			ariaExpanded: undefined,
 			ariaLevel: undefined,
 			ariaLabel: ListItem.i18nBundle.getText(ARIA_LABEL_LIST_ITEM_CHECKBOX),
 			ariaLabelRadioButton: ListItem.i18nBundle.getText(ARIA_LABEL_LIST_ITEM_RADIO_BUTTON),
 			ariaSelectedText: this.ariaSelectedText,
+			ariaHaspopup: this._ariaHasPopup || undefined,
 		};
 	}
 

packages/main/src/Menu.hbs

@@ -0,0 +1,100 @@
+<ui5-responsive-popover
+	id="{{_id}}-menu-rp"
+	class="ui5-menu-rp"
+	dir={{effectiveDir}}
+	horizontal-align="Left"
+	placement-type={{placementType}}
+	vertical-align={{verticalAlign}}
+	hide-arrow
+	allow-target-overlap
+	?sub-menu={{_isSubMenu}}
+	@before-close={{_beforePopoverClose}}
+>
+{{#if isPhone}}
+	<div
+		slot="header"
+		class="ui5-menu-dialog-header"
+	>
+	{{#if isSubMenuOpened}}
+		<ui5-button
+			icon="nav-back"
+			class="ui5-menu-back-button"
+			design="Transparent"
+			aria-label="{{labelBack}}"
+			@click={{_navigateBack}}
+		>
+		</ui5-button>
+	{{/if}}
+		<div
+			class="ui5-menu-dialog-title"
+		>
+			<div>
+				{{menuHeaderTextPhone}}
+			</div>
+		</div>
+		<ui5-button
+			icon="decline"
+			design="Transparent"
+			aria-label="{{labelClose}}"
+			@click={{close}}
+		>
+		</ui5-button>
+	</div>
+{{/if}}
+	<div
+		id="{{_id}}-menu-main"
+	>
+	{{#if _currentItems.length}}
+		<ui5-list
+			id="{{_id}}-menu-list"
+			mode="None"
+			separators="None"
+			accessible-role="menu"
+			@ui5-item-click={{_itemClick}}
+		>
+		{{#each _currentItems}}
+			<ui5-li
+				.associatedItem="{{this.item}}"
+				class="ui5-menu-item"
+				id="{{../_id}}-menu-item-{{@index}}"
+				icon="{{this.item.icon}}"
+				accessible-role="menuitem"
+				._ariaHasPopup={{this.ariaHasPopup}}
+				?disabled={{this.item.disabled}}
+				?starts-section={{this.item.startsSection}}
+				?selected={{this.item.subMenuOpened}}
+				@mouseover={{../_itemMouseOver}}
+				@mouseout={{../_itemMouseOut}}
+				@keydown={{../_itemKeyDown}}
+			>
+				{{#if this.item.hasDummyIcon}}
+					<div
+						class="ui5-menu-item-dummy-icon"
+					>
+					</div>
+				{{/if}}
+				{{this.item.text}}
+				{{#if this.item.hasChildren}}
+					<ui5-icon
+						part="icon"
+						name="slim-arrow-right"
+						class="ui5-menu-item-icon-end"
+					>
+					</ui5-icon>
+				{{else if this.item._siblingsWithChildren}}
+					<div
+						class="ui5-menu-item-no-icon-end"
+					>
+					</div>
+				{{/if}}
+			</ui5-li>
+		{{/each}}
+		</ui5-list>
+	{{/if}}
+	</div>
+</ui5-responsive-popover>
+
+<div
+	class="ui5-menu-submenus"
+>
+</div>