feat(ui5-shellbar): API improvements (#421)

* feat(ui5-shellbar): API improvements

- adds a targetRef parameter to press event of shellbar-item
- adds a support for preventDefault() of press event of shellbar-item
- provides a public method #closeOverflow to the shellbar component

FIXES: #419

Author: MapTo0

packages/main/src/ShellBar.js

@@ -352,13 +352,20 @@ class ShellBar extends UI5Element {
 		this._isInitialRendering = true;
 		this._focussedItem = null;
 
+		// marks if preventDefault() is called in item's press handler
+		this._defaultItemPressPrevented = false;
+
 		const that = this;
 
 		this._actionList = {
 			itemPress: event => {
 				const popover = this.shadowRoot.querySelector(".sapWCShellBarOverflowPopover");
 
-				popover.close();
+				if (!this._defaultItemPressPrevented) {
+					popover.close();
+				}
+
+				this._defaultItemPressPrevented = false;
 			},
 		};
 
@@ -480,6 +487,19 @@ class ShellBar extends UI5Element {
 		}
 	}
 
+	/**
+	 * Closes the overflow area.
+	 * Useful to manually close the overflow after having suppressed automatic closing with preventDefault() of ShellbarItem's press event
+	 * @public
+	 */
+	closeOverflow() {
+		const popover = this.shadowRoot.querySelector(".sapWCShellBarOverflowPopover");
+
+		if (popover) {
+			popover.close();
+		}
+	}
+
 	_handleBarBreakpoints() {
 		const width = this.getBoundingClientRect().width;
 		const breakpoints = ShellBar.FIORI_3_BREAKPOINTS;
@@ -679,7 +699,13 @@ class ShellBar extends UI5Element {
 		this._itemNav.currentIndex = elementIndex;
 
 		if (refItemId) {
-			this.items.filter(item => item.shadowRoot.querySelector(`#${refItemId}`))[0].fireEvent("press");
+			const shellbarItem = this.items.filter(item => {
+				return item.shadowRoot.querySelector(`#${refItemId}`);
+			})[0];
+
+			const prevented = !shellbarItem.fireEvent("press", { targetRef: event.target }, true);
+
+			this._defaultItemPressPrevented = prevented;
 		}
 	}
 

packages/main/src/ShellBarItem.js

@@ -42,9 +42,14 @@ const metadata = {
 		 * Fired, when the item is pressed.
 		 *
 		 * @event
+		 * @param {HTMLElement} targetRef dom ref of the clicked element
 		 * @public
 		 */
-		press: {},
+		press: {
+			detail: {
+				targetRef: { type: HTMLElement },
+			},
+		},
 	},
 };
 

packages/main/test/sap/ui/webcomponents/main/pages/ShellBar.html

@@ -158,6 +158,13 @@
 		</ui5-list>
 	</ui5-popover>
 
+	<ui5-popover id="custom-item-popover" hide-header placement-type="Bottom">
+		<ui5-list separators="None">
+			<ui5-li id="custom-item-1" type="Active">Custom Popover Item 1</ui5-li>
+			<ui5-li type="Active">Custom Popover Item 2</ui5-li>
+		</ui5-list>
+	</ui5-popover>
+
 	<ui5-input id="press-input" style="margin-top: 2rem; width: 240px;">
 
 	</ui5-input>
@@ -190,7 +197,9 @@
 
 		["disc", "call"].forEach(function(id) {
 			window[id].addEventListener("ui5-press", function(event) {
+				event.preventDefault();
 				window["press-input"].value = event.target.id;
+				window["custom-item-popover"].openBy(event.detail.targetRef);
 			});
 		});
 	</script>