@ui5/webcomponents-fiori 0.0.0-e463d2345 → 0.0.0-e58530409

package/dist/ShellBar.js

@@ -1,20 +1,33 @@
 import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
 import ResizeHandler from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js";
-import ItemNavigation from "@ui5/webcomponents-base/dist/delegate/ItemNavigation.js";
 import { getFeature } from "@ui5/webcomponents-base/dist/FeaturesRegistry.js";
 import AnimationMode from "@ui5/webcomponents-base/dist/types/AnimationMode.js";
 import { getAnimationMode } from "@ui5/webcomponents-base/dist/config/AnimationMode.js";
-import { isSpace, isEscape } from "@ui5/webcomponents-base/dist/events/PseudoEvents.js";
-import { getRTL } from "@ui5/webcomponents-base/dist/config/RTL.js";
+import { isSpace, isEnter } from "@ui5/webcomponents-base/dist/Keys.js";
+import { renderFinished } from "@ui5/webcomponents-base/dist/Render.js";
 import StandardListItem from "@ui5/webcomponents/dist/StandardListItem.js";
 import List from "@ui5/webcomponents/dist/List.js";
 import Popover from "@ui5/webcomponents/dist/Popover.js";
-import Icon from "@ui5/webcomponents/dist/Icon.js";
-import "@ui5/webcomponents-icons/dist/icons/search.js";
-import "@ui5/webcomponents-icons/dist/icons/bell.js";
-import "@ui5/webcomponents-icons/dist/icons/overflow.js";
-import "@ui5/webcomponents-icons/dist/icons/grid.js";
+import Button from "@ui5/webcomponents/dist/Button.js";
+import HasPopup from "@ui5/webcomponents/dist/types/HasPopup.js";
+import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
+import "@ui5/webcomponents-icons/dist/search.js";
+import "@ui5/webcomponents-icons/dist/bell.js";
+import "@ui5/webcomponents-icons/dist/overflow.js";
+import "@ui5/webcomponents-icons/dist/grid.js";
+
+import {
+	SHELLBAR_LABEL,
+	SHELLBAR_LOGO,
+	SHELLBAR_COPILOT,
+	SHELLBAR_NOTIFICATIONS,
+	SHELLBAR_CANCEL,
+	SHELLBAR_PROFILE,
+	SHELLBAR_PRODUCTS,
+	SHELLBAR_SEARCH,
+	SHELLBAR_OVERFLOW,
+} from "./generated/i18n/i18n-defaults.js";
 
 // Templates
 import ShellBarTemplate from "./generated/templates/ShellBarTemplate.lit.js";
@@ -22,29 +35,25 @@ import ShellBarPopoverTemplate from "./generated/templates/ShellBarPopoverTempla
 
 // Styles
 import styles from "./generated/themes/ShellBar.css.js";
+import ShellBarPopoverCss from "./generated/themes/ShellBarPopover.css.js";
+
+const HANDLE_RESIZE_DEBOUNCE_RATE = 200; // ms
 
 /**
  * @public
  */
 const metadata = {
 	tag: "ui5-shellbar",
+	languageAware: true,
+	fastNavigation: true,
 	properties: /** @lends sap.ui.webcomponents.fiori.ShellBar.prototype */ {
 
-		/**
-		 * Defines the <code>logo</code> source URI.
-		 * @type {string}
-		 * @public
-		 */
-		logo: {
-			type: String,
-		},
-
 		/**
 		 * Defines the <code>primaryTitle</code>.
 		 * <br><br>
 		 * <b>Note:</b> The <code>primaryTitle</code> would be hidden on S screen size (less than approx. 700px).
 		 * @type {string}
-		 * @defaultvalue: ""
+		 * @defaultvalue ""
 		 * @public
 		 */
 		primaryTitle: {
@@ -56,7 +65,7 @@ const metadata = {
 		 * <br><br>
 		 * <b>Note:</b> The <code>secondaryTitle</code> would be hidden on S and M screen sizes (less than approx. 1300px).
 		 * @type {string}
-		 * @defaultvalue: ""
+		 * @defaultvalue ""
 		 * @public
 		 */
 		secondaryTitle: {
@@ -64,29 +73,20 @@ const metadata = {
 		},
 
 		/**
-		 * Defines the <code>notificationCount</code>,
+		 * Defines the <code>notificationsCount</code>,
 		 * displayed in the notification icon top-right corner.
 		 * @type {string}
-		 * @defaultvalue: ""
+		 * @defaultvalue ""
 		 * @public
 		 */
-		notificationCount: {
-			type: String,
-		},
-
-		/**
-		 * Defines the source URI of the profile action.
-		 * If no source is set - profile will be excluded from actions.
-		 * @type {string}
-		 * @public
-		 */
-		profile: {
+		notificationsCount: {
 			type: String,
 		},
 
 		/**
 		 * Defines, if the notification icon would be displayed.
 		 * @type {boolean}
+		 * @defaultvalue false
 		 * @public
 		 */
 		showNotifications: {
@@ -115,6 +115,22 @@ const metadata = {
 			type: Boolean,
 		},
 
+		/**
+		 * An object of strings that defines several additional accessibility texts
+		 * for even further customization.
+		 *
+		 * It supports the following fields:
+		 * - <code>profileButtonTitle</code>: defines the tooltip for the profile button
+		 * - <code>logoTitle</code>: defines the tooltip for the logo
+		 *
+		 * @type {object}
+		 * @public
+		 * @since 1.1.0
+		 */
+		 accessibilityTexts: {
+			type: Object,
+		},
+
 		/**
 		 * @private
 		 */
@@ -125,19 +141,25 @@ const metadata = {
 		/**
 		 * @private
 		 */
-		showBlockLayer: {
+		showSearchField: {
 			type: Boolean,
 		},
 
-		_itemsInfo: {
-			type: Object,
+		/**
+		 * @private
+		 */
+		coPilotActive: {
+			type: Boolean,
 		},
 
-		_actionList: {
-			type: Object,
+		/**
+		 * @private
+		 */
+		withLogo: {
+			type: Boolean,
 		},
 
-		_searchField: {
+		_itemsInfo: {
 			type: Object,
 		},
 
@@ -146,11 +168,25 @@ const metadata = {
 		},
 
 		_menuPopoverItems: {
-			type: Array,
-			defaultValue: [],
+			type: String,
+			multiple: true,
+		},
+
+		_menuPopoverExpanded: {
+			type: Boolean,
+			noAttribute: true,
+		},
+		_overflowPopoverExpanded: {
+			type: Boolean,
+			noAttribute: true,
 		},
-	},
 
+		_fullWidthSearch: {
+			type: Boolean,
+			noAttribute: true,
+		},
+	},
+	managedSlots: true,
 	slots: /** @lends sap.ui.webcomponents.fiori.ShellBar.prototype */ {
 		/**
 		 * Defines the <code>ui5-shellbar</code> aditional items.
@@ -158,13 +194,41 @@ const metadata = {
 		 * <b>Note:</b>
 		 * You can use the &nbsp;&lt;ui5-shellbar-item>&lt;/ui5-shellbar-item>.
 		 *
-		 * @type {HTMLElement[]}
-		 * @slot
+		 * @type {sap.ui.webcomponents.fiori.IShellBarItem[]}
+		 * @slot items
 		 * @public
 		 */
 		"default": {
 			propertyName: "items",
 			type: HTMLElement,
+			invalidateOnChildChange: true,
+		},
+
+		/**
+		 * You can pass <code>ui5-avatar</code> to set the profile image/icon.
+		 * If no profile slot is set - profile will be excluded from actions.
+		 *
+		 * Note: We recommend not using the <code>size</code> attribute of <code>ui5-avatar</code> because
+		 * it should have specific size by design in the context of <code>ui5-shellbar</code> profile.
+		 * @type {sap.ui.webcomponents.main.IAvatar}
+		 * @slot
+		 * @since 1.0.0-rc.6
+		 * @public
+		 */
+		profile: {
+			type: HTMLElement,
+		},
+
+		/**
+		 * Defines the logo of the <code>ui5-shellbar</code>.
+		 * For example, you can use <code>ui5-avatar</code> or <code>img</code> elements as logo.
+		 * @type {sap.ui.webcomponents.main.IAvatar}
+		 * @slot
+		 * @since 1.0.0-rc.8
+		 * @public
+		 */
+		logo: {
+			type: HTMLElement,
 		},
 
 		/**
@@ -173,7 +237,7 @@ const metadata = {
 		 * <b>Note:</b>
 		 * You can use the &nbsp;&lt;ui5-li>&lt;/ui5-li> and its ancestors.
 		 *
-		 * @type {HTMLElement[]}
+		 * @type {sap.ui.webcomponents.main.IListItem[]}
 		 * @slot
 		 * @since 0.10
 		 * @public
@@ -185,7 +249,7 @@ const metadata = {
 		/**
 		 * Defines the <code>ui5-input</code>, that will be used as a search field.
 		 *
-		 * @type {HTMLElement[]}
+		 * @type {sap.ui.webcomponents.main.IInput}
 		 * @slot
 		 * @public
 		 */
@@ -198,7 +262,7 @@ const metadata = {
 		 * We encourage this slot to be used for a back or home button.
 		 * It gets overstyled to match ShellBar's styling.
 		 *
-		 * @type {HTMLElement[]}
+		 * @type {sap.ui.webcomponents.main.IButton}
 		 * @slot
 		 * @public
 		 */
@@ -212,24 +276,25 @@ const metadata = {
 		 * Fired, when the notification icon is activated.
 		 *
 		 *
-		 * @event
+		 * @event sap.ui.webcomponents.fiori.ShellBar#notifications-click
+		 * @allowPreventDefault
 		 * @param {HTMLElement} targetRef dom ref of the activated element
 		 * @public
 		 */
-		notificationsClick: {
+		"notifications-click": {
 			detail: {
 				targetRef: { type: HTMLElement },
 			},
 		},
 
 		/**
-		 * Fired, when the profile icon is activated.
+		 * Fired, when the profile slot is present.
 		 *
-		 * @event
+		 * @event sap.ui.webcomponents.fiori.ShellBar#profile-click
 		 * @param {HTMLElement} targetRef dom ref of the activated element
 		 * @public
 		 */
-		profileClick: {
+		"profile-click": {
 			detail: {
 				targetRef: { type: HTMLElement },
 			},
@@ -237,12 +302,14 @@ const metadata = {
 
 		/**
 		 * Fired, when the product switch icon is activated.
+		 * <b>Note:</b> You can prevent closing of overflow popover by calling <code>event.preventDefault()</code>.
 		 *
-		 * @event
+		 * @event sap.ui.webcomponents.fiori.ShellBar#product-switch-click
+		 * @allowPreventDefault
 		 * @param {HTMLElement} targetRef dom ref of the activated element
 		 * @public
 		 */
-		productSwitchClick: {
+		"product-switch-click": {
 			detail: {
 				targetRef: { type: HTMLElement },
 			},
@@ -251,12 +318,12 @@ const metadata = {
 		/**
 		 * Fired, when the logo is activated.
 		 *
-		 * @event
+		 * @event sap.ui.webcomponents.fiori.ShellBar#logo-click
 		 * @param {HTMLElement} targetRef dom ref of the activated element
 		 * @since 0.10
 		 * @public
 		 */
-		logoClick: {
+		"logo-click": {
 			detail: {
 				targetRef: { type: HTMLElement },
 			},
@@ -265,12 +332,12 @@ const metadata = {
 		/**
 		 * Fired, when the co pilot is activated.
 		 *
-		 * @event
+		 * @event sap.ui.webcomponents.fiori.ShellBar#co-pilot-click
 		 * @param {HTMLElement} targetRef dom ref of the activated element
 		 * @since 0.10
 		 * @public
 		 */
-		coPilotClick: {
+		"co-pilot-click": {
 			detail: {
 				targetRef: { type: HTMLElement },
 			},
@@ -278,13 +345,14 @@ const metadata = {
 
 		/**
 		 * Fired, when a menu item is activated
+		 * <b>Note:</b> You can prevent closing of overflow popover by calling <code>event.preventDefault()</code>.
 		 *
-		 * @event
-		 * @param {HTMLElement} item dom ref of the activated list item
+		 * @event sap.ui.webcomponents.fiori.ShellBar#menu-item-click
+		 * @param {HTMLElement} item DOM ref of the activated list item
 		 * @since 0.10
 		 * @public
 		 */
-		menuItemClick: {
+		"menu-item-click": {
 			detail: {
 				item: { type: HTMLElement },
 			},
@@ -297,8 +365,38 @@ const metadata = {
  * <h3 class="comment-api-title">Overview</h3>
  *
  * The <code>ui5-shellbar</code> is meant to serve as an application header
- * and includes numerous built-in features, such as: logo, profile icon, title, search field, notifications and so on.
+ * and includes numerous built-in features, such as: logo, profile image/icon, title, search field, notifications and so on.
  * <br><br>
+ *
+ * <h3>Stable DOM Refs</h3>
+ *
+ * You can use the following stable DOM refs for the <code>ui5-shellbar</code>:
+ * <ul>
+ * <li>logo</li>
+ * <li>copilot</li>
+ * <li>notifications</li>
+ * <li>overflow</li>
+ * <li>profile</li>
+ * <li>product-switch</li>
+ * </ul>
+ *
+ * <h3>CSS Shadow Parts</h3>
+ *
+ * <ui5-link target="_blank" href="https://developer.mozilla.org/en-US/docs/Web/CSS/::part">CSS Shadow Parts</ui5-link> allow developers to style elements inside the Shadow DOM.
+ * <br>
+ * The <code>ui5-shellbar</code> exposes the following CSS Shadow Parts:
+ * <ul>
+ * <li>root - Used to style the outermost wrapper of the <code>ui5-shellbar</code></li>
+ * </ul>
+ *
+ * <h3>Keyboard Handling</h3>
+ *
+ * <h4>Fast Navigation</h4>
+ * This component provides a build in fast navigation group which can be used via <code>F6 / Shift + F6</code> or <code> Ctrl + Alt(Option) + Down /  Ctrl + Alt(Option) + Up</code>.
+ * In order to use this functionality, you need to import the following module:
+ * <code>import "@ui5/webcomponents-base/dist/features/F6Navigation.js"</code>
+ * <br><br>
+ *
  * <h3>ES6 Module Import</h3>
  * <code>import "@ui5/webcomponents-fiori/dist/ShellBar";</code>
  *
@@ -316,10 +414,6 @@ class ShellBar extends UI5Element {
 		return metadata;
 	}
 
-	static get styles() {
-		return styles;
-	}
-
 	static get render() {
 		return litRender;
 	}
@@ -332,9 +426,17 @@ class ShellBar extends UI5Element {
 		return ShellBarPopoverTemplate;
 	}
 
+	static get styles() {
+		return styles;
+	}
+
+	static get staticAreaStyles() {
+		return [ShellBarPopoverCss];
+	}
+
 	static get FIORI_3_BREAKPOINTS() {
 		return [
-			559,
+			599,
 			1023,
 			1439,
 			1919,
@@ -344,7 +446,7 @@ class ShellBar extends UI5Element {
 
 	static get FIORI_3_BREAKPOINTS_MAP() {
 		return {
-			"559": "S",
+			"599": "S",
 			"1023": "M",
 			"1439": "L",
 			"1919": "XL",
@@ -362,130 +464,137 @@ class ShellBar extends UI5Element {
 		// marks if preventDefault() is called in item's press handler
 		this._defaultItemPressPrevented = false;
 
-		const that = this;
+		this.menuItemsObserver = new MutationObserver(() => {
+			this._updateClonedMenuItems();
+		});
 
-		this._actionList = {
-			itemPress: event => {
-				const popover = this.getStaticAreaItemDomRef().querySelector(".ui5-shellbar-overflow-popover");
+		this._header = {
+			press: async () => {
+				this._updateClonedMenuItems();
 
-				if (!this._defaultItemPressPrevented) {
-					popover.close();
+				if (this.hasMenuItems) {
+					const menuPopover = await this._getMenuPopover();
+					menuPopover.showAt(this.shadowRoot.querySelector(".ui5-shellbar-menu-button"));
 				}
-
-				this._defaultItemPressPrevented = false;
 			},
 		};
 
-		this._header = {
-			press: event => {
-				const menuPopover = this.getStaticAreaItemDomRef().querySelector(".ui5-shellbar-menu-popover");
-
-				if (this.menuItems.length) {
-					this._menuPopoverItems = [];
-					this.menuItems.forEach(item => {
-						this._menuPopoverItems.push(item.textContent);
-					});
-					menuPopover.openBy(this.shadowRoot.querySelector(".ui5-shellbar-menu-button"));
-				}
-			},
+		this._handleResize = async event => {
+			this._debounce(async () => {
+				await this._getResponsivePopover();
+				this.overflowPopover.close();
+				this._overflowActions();
+			}, HANDLE_RESIZE_DEBOUNCE_RATE);
 		};
+	}
 
-		this._itemNav = new ItemNavigation(this);
-
-		this._itemNav.getItemsCallback = () => {
-			const items = that._itemsInfo.filter(info => {
-				const isVisible = info.classes.indexOf("ui5-shellbar-hidden-button") === -1;
-				const isSet = info.classes.indexOf("ui5-shellbar-invisible-button") === -1;
-				return isVisible && isSet;
-			}).sort((item1, item2) => {
-				if (item1.domOrder < item2.domOrder) {
-					return -1;
-				}
-
-				if (item1.domOrder > item2.domOrder) {
-					return 1;
-				}
-
-				return 0;
-			});
+	_debounce(fn, delay) {
+		clearTimeout(this._debounceInterval);
+		this._debounceInterval = setTimeout(() => {
+			this._debounceInterval = null;
+			fn();
+		}, delay);
+	}
 
-			this._itemNav.rowSize = items.length;
+	_menuItemPress(event) {
+		this.menuPopover.close();
+		this.fireEvent("menu-item-click", {
+			item: event.detail.selectedItems[0],
+		}, true);
+	}
 
-			return items.map(item => {
-				const clone = JSON.parse(JSON.stringify(item));
-				clone.press = item.press;
+	_logoPress() {
+		this.fireEvent("logo-click", {
+			targetRef: this.shadowRoot.querySelector(".ui5-shellbar-logo"),
+		});
+	}
 
-				return clone;
-			});
-		};
+	_menuPopoverBeforeOpen() {
+		this._menuPopoverExpanded = true;
+	}
 
-		this._itemNav.setItemsCallback = items => {
-			const newItems = that._itemsInfo.map(stateItem => {
-				const mappingItem = items.find(item => {
-					return item.id === stateItem.id;
-				});
+	_menuPopoverAfterClose() {
+		this._menuPopoverExpanded = false;
+	}
 
-				const clone = JSON.parse(JSON.stringify(stateItem));
-				clone._tabIndex = mappingItem ? mappingItem._tabIndex : "-1";
-				clone.press = stateItem.press;
+	_overflowPopoverBeforeOpen() {
+		this._overflowPopoverExpanded = true;
+	}
 
-				return clone;
-			});
+	_overflowPopoverAfterClose() {
+		this._overflowPopoverExpanded = false;
+	}
 
-			that._updateItemsInfo(newItems);
-		};
+	_logoKeyup(event) {
+		if (isSpace(event)) {
+			this._logoPress();
+		}
+	}
 
-		this._searchField = {
-			left: 0,
-			focusout: event => {
-				this.showBlockLayer = false;
-			},
-		};
+	_logoKeydown(event) {
+		if (isSpace(event)) {
+			event.preventDefault();
+			return;
+		}
 
-		this._handleResize = event => {
-			this.getStaticAreaItemDomRef().querySelector(".ui5-shellbar-overflow-popover").close();
-			this._overflowActions();
-		};
+		if (isEnter(event)) {
+			this._logoPress();
+		}
 	}
 
-	_menuItemPress(event) {
-		this.fireEvent("menuItemClick", {
-			item: event.detail.item,
+	_fireCoPilotClick() {
+		this.fireEvent("co-pilot-click", {
+			targetRef: this.shadowRoot.querySelector(".ui5-shellbar-coPilot"),
 		});
 	}
 
-	_logoPress(event) {
-		this.fireEvent("logoClick", {
-			targetRef: this.shadowRoot.querySelector(".ui5-shellbar-logo"),
-		});
+	_coPilotClick() {
+		this._fireCoPilotClick();
 	}
 
-	_coPilotPress(event) {
-		this.fireEvent("coPilotClick", {
-			targetRef: this.shadowRoot.querySelector(".ui5-shellbar-coPilot"),
-		});
+	_coPilotKeydown(event) {
+		if (isSpace(event)) {
+			this.coPilotActive = true;
+			event.preventDefault();
+			return;
+		}
+
+		if (isEnter(event)) {
+			this.coPilotActive = true;
+			this._fireCoPilotClick();
+		}
+	}
+
+	_coPilotKeyup(event) {
+		if (isSpace(event)) {
+			this._fireCoPilotClick();
+		}
+		this.coPilotActive = false;
 	}
 
 	onBeforeRendering() {
 		const animationsOn = getAnimationMode() === AnimationMode.Full;
 		const coPilotAnimation = getFeature("CoPilotAnimation");
 		this.coPilot = coPilotAnimation && animationsOn ? coPilotAnimation : { animated: false };
+		this.withLogo = this.hasLogo;
 
 		this._hiddenIcons = this._itemsInfo.filter(info => {
 			const isHidden = (info.classes.indexOf("ui5-shellbar-hidden-button") !== -1);
 			const isSet = info.classes.indexOf("ui5-shellbar-invisible-button") === -1;
 			const isOverflowIcon = info.classes.indexOf("ui5-shellbar-overflow-button") !== -1;
+			const isImageIcon = info.classes.indexOf("ui5-shellbar-image-button") !== -1;
+			const shouldStayOnScreen = isOverflowIcon || (isImageIcon && this.hasProfile);
 
-			return isHidden && isSet && !isOverflowIcon;
+			return isHidden && isSet && !shouldStayOnScreen;
 		});
+
+		this._observeMenuItems();
 	}
 
 	onAfterRendering() {
 		this._overflowActions();
 
-		if (this._focusedItem) {
-			this._focusedItem._tabIndex = "0";
-		}
+		this._fullWidthSearch = this._showFullWidthSearch;
 	}
 
 	/**
@@ -494,10 +603,8 @@ class ShellBar extends UI5Element {
 	 * @public
 	 */
 	closeOverflow() {
-		const popover = this.getStaticAreaItemDomRef().querySelector(".ui5-shellbar-overflow-popover");
-
-		if (popover) {
-			popover.close();
+		if (this.overflowPopover) {
+			this.overflowPopover.close();
 		}
 	}
 
@@ -521,12 +628,15 @@ class ShellBar extends UI5Element {
 		const newItems = this._getAllItems(hasIcons).map(info => {
 			const isOverflowIcon = info.classes.indexOf("ui5-shellbar-overflow-button") !== -1;
 			const isImageIcon = info.classes.indexOf("ui5-shellbar-image-button") !== -1;
-			const shouldStayOnScreen = isOverflowIcon || (isImageIcon && this.profile);
+			const shouldStayOnScreen = isOverflowIcon || (isImageIcon && this.hasProfile);
 
-			return Object.assign({}, info, {
+			return {
+				...info,
 				classes: `${info.classes} ${shouldStayOnScreen ? "" : "ui5-shellbar-hidden-button"} ui5-shellbar-button`,
-				style: `order: ${shouldStayOnScreen ? 1 : -1}`,
-			});
+				styles: {
+					order: shouldStayOnScreen ? 1 : -1,
+				},
+			};
 		});
 
 		this._updateItemsInfo(newItems);
@@ -534,10 +644,16 @@ class ShellBar extends UI5Element {
 
 	_handleActionsOverflow() {
 		const rightContainerRect = this.shadowRoot.querySelector(".ui5-shellbar-overflow-container-right").getBoundingClientRect();
-		const icons = this.shadowRoot.querySelectorAll(".ui5-shellbar-button:not(.ui5-shellbar-overflow-button):not(.ui5-shellbar-invisible-button)");
-		const isRTL = getRTL();
+		let overflowSelector = ".ui5-shellbar-button:not(.ui5-shellbar-overflow-button):not(.ui5-shellbar-invisible-button)";
+
+		if (this.showSearchField) {
+			overflowSelector += ",.ui5-shellbar-search-field";
+		}
+
+		const elementsToOverflow = this.shadowRoot.querySelectorAll(overflowSelector);
+		const isRTL = this.effectiveDir === "rtl";
 
-		let overflowCount = [].filter.call(icons, icon => {
+		let overflowCount = [].filter.call(elementsToOverflow, icon => {
 			const iconRect = icon.getBoundingClientRect();
 
 			if (isRTL) {
@@ -549,17 +665,7 @@ class ShellBar extends UI5Element {
 
 		overflowCount = overflowCount.length;
 
-		const items = this._getAllItems(!!overflowCount);
-
-		items.map(item => {
-			this._itemsInfo.forEach(stateItem => {
-				if (stateItem.id === item.id) {
-					item._tabIndex = stateItem._tabIndex;
-				}
-			});
-
-			return item;
-		});
+		const items = this._getAllItems(!!overflowCount).filter(item => item.show);
 
 		const itemsByPriority = items.sort((item1, item2) => {
 			if (item1.priority > item2.priority) {
@@ -573,47 +679,18 @@ class ShellBar extends UI5Element {
 			return 0;
 		});
 
-		const focusableItems = [];
-
 		for (let i = 0; i < itemsByPriority.length; i++) {
 			if (i < overflowCount) {
 				itemsByPriority[i].classes = `${itemsByPriority[i].classes} ui5-shellbar-hidden-button`;
-				itemsByPriority[i].style = `order: -1`;
-			} else {
-				focusableItems.push(itemsByPriority[i]);
+				itemsByPriority[i].styles = {
+					order: -1,
+				};
 			}
 		}
 
-		this._focusedItem = this._findInitiallyFocusedItem(focusableItems);
-
 		return itemsByPriority;
 	}
 
-	_findInitiallyFocusedItem(items) {
-		items.sort((item1, item2) => {
-			const order1 = parseInt(item1.style.split("order: ")[1]);
-			const order2 = parseInt(item2.style.split("order: ")[1]);
-
-			if (order1 === order2) {
-				return 0;
-			}
-
-			if (order1 < order2) {
-				return -1;
-			}
-
-			return 1;
-		});
-
-		const focusedItem = items.find(item => {
-			return (item.classes.indexOf("ui5-shellbar-invisible-button") === -1)
-				&& (item.classes.indexOf("ui5-shellbar-overflow-button") === -1)
-				&& (item.classes.indexOf("ui5-shellbar-hidden-button") === -1);
-		});
-
-		return focusedItem;
-	}
-
 	_overflowActions() {
 		const size = this._handleBarBreakpoints();
 
@@ -625,32 +702,10 @@ class ShellBar extends UI5Element {
 		this._updateItemsInfo(newItems);
 	}
 
-	_toggleActionPopover() {
-		const popover = this.getStaticAreaItemDomRef().querySelector(".ui5-shellbar-overflow-popover");
+	async _toggleActionPopover() {
 		const overflowButton = this.shadowRoot.querySelector(".ui5-shellbar-overflow-button");
-		popover.openBy(overflowButton);
-	}
-
-	_onkeydown(event) {
-		if (isEscape(event)) {
-			return this._handleEscape(event);
-		}
-
-		if (isSpace(event)) {
-			event.preventDefault();
-		}
-	}
-
-	_handleEscape() {
-		const searchButton = this.shadowRoot.querySelector(".ui5-shellbar-search-button");
-
-		if (this.showBlockLayer) {
-			this.showBlockLayer = false;
-
-			setTimeout(() => {
-				searchButton.focus();
-			}, 0);
-		}
+		const overflowPopover = await this._getOverflowPopover();
+		overflowPopover.showAt(overflowButton);
 	}
 
 	onEnterDOM() {
@@ -658,55 +713,54 @@ class ShellBar extends UI5Element {
 	}
 
 	onExitDOM() {
+		this.menuItemsObserver.disconnect();
 		ResizeHandler.deregister(this, this._handleResize);
+		clearTimeout(this._debounceInterval);
+		this._debounceInterval = null;
 	}
 
 	_handleSearchIconPress(event) {
-		const searchField = this.shadowRoot.querySelector(`#${this._id}-searchfield-wrapper`);
-		const triggeredByOverflow = event.target.tagName.toLowerCase() === "ui5-li";
-		const overflowButton = this.shadowRoot.querySelector(".ui5-shellbar-overflow-button");
-		const overflowButtonRect = overflowButton.getBoundingClientRect();
-		const isRTL = getRTL();
-		let right = "";
-
-		if (isRTL) {
-			right = `${(triggeredByOverflow ? overflowButton.offsetLeft : event.target.offsetLeft) + overflowButtonRect.width}px`;
-		} else {
-			right = `calc(100% - ${triggeredByOverflow ? overflowButton.offsetLeft : event.target.offsetLeft}px)`;
+		this.showSearchField = !this.showSearchField;
+
+		if (!this.showSearchField) {
+			return;
 		}
 
-		this._searchField = Object.assign({}, this._searchField, {
-			"right": right,
-		});
+		const input = this.searchField[0];
 
-		this.showBlockLayer = true;
+		// update the state immediately
+		if (input) {
+			input.focused = true;
+		}
 
+		// move the focus later
 		setTimeout(() => {
-			const inputSlot = searchField.children[0];
-
-			if (inputSlot) {
-				inputSlot.assignedNodes()[0].focus();
+			if (input) {
+				input.focus();
 			}
 		}, 100);
 	}
 
-	_handleCustomActionPress(event) {
-		const refItemId = event.target.getAttribute("data-ui5-external-action-item-id");
-		const actions = this.shadowRoot.querySelectorAll(".ui5-shellbar-custom-item");
-		let elementIndex = [].indexOf.apply(actions, [event.target]);
-
-		if (this.searchField.length) {
-			elementIndex += 1;
+	async _handleActionListClick(event) {
+		if (!this._defaultItemPressPrevented) {
+			this.closeOverflow();
+			// wait for DOM to be updated when ui5-popover is closed, otherwise if Enter key is hold
+			// there will be no visual indication that this has happened
+			await renderFinished();
 		}
 
-		this._itemNav.currentIndex = elementIndex;
+		this._defaultItemPressPrevented = false;
+	}
+
+	_handleCustomActionPress(event) {
+		const refItemId = event.target.getAttribute("data-ui5-external-action-item-id");
 
 		if (refItemId) {
 			const shellbarItem = this.items.find(item => {
-				return item.shadowRoot.querySelector(`#${refItemId}`);
+				return item._id === refItemId;
 			});
 
-			const prevented = !shellbarItem.fireEvent("itemClick", { targetRef: event.target }, true);
+			const prevented = !shellbarItem.fireEvent("click", { targetRef: event.target }, true);
 
 			this._defaultItemPressPrevented = prevented;
 		}
@@ -717,26 +771,100 @@ class ShellBar extends UI5Element {
 	}
 
 	_handleNotificationsPress(event) {
-		this.fireEvent("notificationsClick", {
-			targetRef: this.shadowRoot.querySelector(".ui5-shellbar-bell-button"),
-		});
+		const notificationIconRef = this.shadowRoot.querySelector(".ui5-shellbar-bell-button");
+
+		this._defaultItemPressPrevented = !this.fireEvent("notifications-click", {
+			targetRef: notificationIconRef.classList.contains("ui5-shellbar-hidden-button") ? event.target : notificationIconRef,
+		}, true);
 	}
 
 	_handleProfilePress(event) {
-		this.fireEvent("profileClick", {
+		this.fireEvent("profile-click", {
 			targetRef: this.shadowRoot.querySelector(".ui5-shellbar-image-button"),
 		});
 	}
 
+	_handleCancelButtonPress() {
+		this.showSearchField = false;
+	}
+
 	_handleProductSwitchPress(event) {
-		this.fireEvent("productSwitchClick", {
-			targetRef: this.shadowRoot.querySelector(".ui5-shellbar-button-product-switch"),
-		});
+		const buttonRef = this.shadowRoot.querySelector(".ui5-shellbar-button-product-switch");
+
+		this._defaultItemPressPrevented = !this.fireEvent("product-switch-click", {
+			targetRef: buttonRef.classList.contains("ui5-shellbar-hidden-button") ? event.target : buttonRef,
+		}, true);
+	}
+
+	/**
+	 * Returns the <code>logo</code> DOM ref.
+	 * @type { HTMLElement }
+	 * @public
+	 * @readonly
+	 * @since 1.0.0-rc.16
+	 */
+	get logoDomRef() {
+		return this.shadowRoot.querySelector(`*[data-ui5-stable="logo"]`);
+	}
+
+	/**
+	 * Returns the <code>copilot</code> DOM ref.
+	 * @type { HTMLElement }
+	 * @public
+	 * @readonly
+	 * @since 1.0.0-rc.16
+	 */
+	get copilotDomRef() {
+		return this.shadowRoot.querySelector(`*[data-ui5-stable="copilot"]`);
+	}
+
+	/**
+	 * Returns the <code>notifications</code> icon DOM ref.
+	 * @type { HTMLElement }
+	 * @public
+	 * @readonly
+	 * @since 1.0.0-rc.16
+	 */
+	get notificationsDomRef() {
+		return this.shadowRoot.querySelector(`*[data-ui5-stable="notifications"]`);
+	}
+
+	/**
+	 * Returns the <code>overflow</code> icon DOM ref.
+	 * @type { HTMLElement }
+	 * @public
+	 * @readonly
+	 * @since 1.0.0-rc.16
+	 */
+	get overflowDomRef() {
+		return this.shadowRoot.querySelector(`*[data-ui5-stable="overflow"]`);
+	}
+
+	/**
+	 * Returns the <code>profile</code> icon DOM ref.
+	 * @type { HTMLElement }
+	 * @public
+	 * @readonly
+	 * @since 1.0.0-rc.16
+	 */
+	get profileDomRef() {
+		return this.shadowRoot.querySelector(`*[data-ui5-stable="profile"]`);
+	}
+
+	/**
+	 * Returns the <code>product-switch</code> icon DOM ref.
+	 * @type { HTMLElement }
+	 * @public
+	 * @readonly
+	 * @since 1.0.0-rc.16
+	 */
+	get productSwitchDomRef() {
+		return this.shadowRoot.querySelector(`*[data-ui5-stable="product-switch"]`);
 	}
 
 	/**
 	 * Returns all items that will be placed in the right of the bar as icons / dom elements.
-	 * @param {Boolean} showOverflowButton Determines if overflow button should be visible (not overflowing)
+	 * @param {boolean} showOverflowButton Determines if overflow button should be visible (not overflowing)
 	 */
 	_getAllItems(showOverflowButton) {
 		let domOrder = -1;
@@ -748,24 +876,32 @@ class ShellBar extends UI5Element {
 				classes: `${this.searchField.length ? "" : "ui5-shellbar-invisible-button"} ui5-shellbar-search-button ui5-shellbar-button`,
 				priority: 4,
 				domOrder: this.searchField.length ? (++domOrder) : -1,
-				style: `order: ${this.searchField.length ? 1 : -10}`,
+				styles: {
+					order: this.searchField.length ? 1 : -10,
+				},
 				id: `${this._id}-item-${1}`,
 				press: this._handleSearchIconPress.bind(this),
-				_tabIndex: "-1",
+				show: !!this.searchField.length,
 			},
 			...this.items.map((item, index) => {
+				item._getRealDomRef = () => this.getDomRef().querySelector(`*[data-ui5-stable=${item.stableDomRef}]`);
 				return {
 					icon: item.icon,
 					id: item._id,
+					count: item.count || undefined,
 					refItemid: item._id,
 					text: item.text,
 					classes: "ui5-shellbar-custom-item ui5-shellbar-button",
 					priority: 1,
 					domOrder: (++domOrder),
-					style: `order: ${2}`,
+					styles: {
+						order: 2,
+					},
 					show: true,
 					press: this._handleCustomActionPress.bind(this),
-					_tabIndex: "-1",
+					custom: true,
+					title: item.title,
+					stableDomRef: item.stableDomRef,
 				};
 			}),
 			{
@@ -773,12 +909,13 @@ class ShellBar extends UI5Element {
 				text: "Notifications",
 				classes: `${this.showNotifications ? "" : "ui5-shellbar-invisible-button"} ui5-shellbar-bell-button ui5-shellbar-button`,
 				priority: 3,
-				style: `order: ${this.showNotifications ? 3 : -10}`,
+				styles: {
+					order: this.showNotifications ? 3 : -10,
+				},
 				id: `${this._id}-item-${2}`,
 				show: this.showNotifications,
 				domOrder: this.showNotifications ? (++domOrder) : -1,
 				press: this._handleNotificationsPress.bind(this),
-				_tabIndex: "-1",
 			},
 			{
 				icon: "overflow",
@@ -786,37 +923,39 @@ class ShellBar extends UI5Element {
 				classes: `${showOverflowButton ? "" : "ui5-shellbar-hidden-button"} ui5-shellbar-overflow-button-shown ui5-shellbar-overflow-button ui5-shellbar-button`,
 				priority: 5,
 				order: 4,
-				style: `order: ${showOverflowButton ? 4 : -1}`,
+				styles: {
+					order: showOverflowButton ? 4 : -1,
+				},
 				domOrder: showOverflowButton ? (++domOrder) : -1,
 				id: `${this.id}-item-${5}`,
 				press: this._handleOverflowPress.bind(this),
-				_tabIndex: "-1",
 				show: true,
 			},
 			{
 				text: "Person",
-				classes: `${this.profile ? "" : "ui5-shellbar-invisible-button"} ui5-shellbar-image-button ui5-shellbar-button`,
+				classes: `${this.hasProfile ? "" : "ui5-shellbar-invisible-button"} ui5-shellbar-image-button ui5-shellbar-button`,
 				priority: 4,
-				subclasses: "ui5-shellbar-image-buttonImage",
-				style: `order: ${this.profile ? 5 : -10};`,
-				subStyles: `${this.profile ? `background-image: url(${this.profile})` : ""}`,
+				styles: {
+					order: this.hasProfile ? 5 : -10,
+				},
+				profile: true,
 				id: `${this._id}-item-${3}`,
-				domOrder: this.profile ? (++domOrder) : -1,
-				show: this.profile,
+				domOrder: this.hasProfile ? (++domOrder) : -1,
+				show: this.hasProfile,
 				press: this._handleProfilePress.bind(this),
-				_tabIndex: "-1",
 			},
 			{
 				icon: "grid",
 				text: "Product Switch",
 				classes: `${this.showProductSwitch ? "" : "ui5-shellbar-invisible-button"} ui5-shellbar-button ui5-shellbar-button-product-switch`,
 				priority: 2,
-				style: `order: ${this.showProductSwitch ? 6 : -10}`,
+				styles: {
+					order: this.showProductSwitch ? 6 : -10,
+				},
 				id: `${this._id}-item-${4}`,
 				show: this.showProductSwitch,
 				domOrder: this.showProductSwitch ? (++domOrder) : -1,
 				press: this._handleProductSwitchPress.bind(this),
-				_tabIndex: "-1",
 			},
 		];
 		return items;
@@ -829,6 +968,56 @@ class ShellBar extends UI5Element {
 		}
 	}
 
+	_updateClonedMenuItems() {
+		this._menuPopoverItems = [];
+
+		this.menuItems.forEach(item => {
+			// clone the menuItem and remove the slot="menuItems",
+			// otherwise would not be slotted in the internal ui5-li
+			const clonedItem = item.cloneNode(true);
+			clonedItem.removeAttribute("slot");
+
+			this._menuPopoverItems.push(clonedItem);
+		});
+	}
+
+	_observeMenuItems() {
+		this.menuItems.forEach(item => {
+			this.menuItemsObserver.observe(item, {
+				characterData: true,
+				childList: true,
+				subtree: true,
+				attributes: true,
+			});
+		});
+	}
+
+	async _getResponsivePopover() {
+		const staticAreaItem = await this.getStaticAreaItemDomRef();
+		this.overflowPopover = staticAreaItem.querySelector(".ui5-shellbar-overflow-popover");
+		this.menuPopover = staticAreaItem.querySelector(".ui5-shellbar-menu-popover");
+	}
+
+	async _getOverflowPopover() {
+		const staticAreaItem = await this.getStaticAreaItemDomRef();
+		return staticAreaItem.querySelector(".ui5-shellbar-overflow-popover");
+	}
+
+	async _getMenuPopover() {
+		const staticAreaItem = await this.getStaticAreaItemDomRef();
+		return staticAreaItem.querySelector(".ui5-shellbar-menu-popover");
+	}
+
+	isIconHidden(name) {
+		const itemInfo = this._itemsInfo.find(item => item.icon === name);
+
+		if (!itemInfo) {
+			return false;
+		}
+
+		return itemInfo.classes.indexOf("ui5-shellbar-hidden-button") !== -1;
+	}
+
 	get classes() {
 		return {
 			wrapper: {
@@ -836,46 +1025,173 @@ class ShellBar extends UI5Element {
 				"ui5-shellbar-with-searchfield": this.searchField.length,
 			},
 			button: {
-				"ui5-shellbar-menu-button--interactive": !!this.menuItems.length,
+				"ui5-shellbar-menu-button--interactive": this.hasMenuItems,
 				"ui5-shellbar-menu-button": true,
 			},
+			items: {
+				notification: {
+					"ui5-shellbar-hidden-button": this.isIconHidden("bell"),
+				},
+				product: {
+					"ui5-shellbar-hidden-button": this.isIconHidden("grid"),
+				},
+				search: {
+					"ui5-shellbar-hidden-button": this.isIconHidden("search"),
+				},
+				overflow: {
+					"ui5-shellbar-hidden-button": this.isIconHidden("overflow"),
+				},
+			},
 		};
 	}
 
 	get styles() {
 		return {
+			items: {
+				notification: {
+					"order": this.isIconHidden("bell") ? "-1" : "3",
+				},
+				overflow: {
+					"order": this.isIconHidden("overflow") ? "-1" : "4",
+				},
+				profile: {
+					"order": this.hasProfile ? "5" : "-1",
+				},
+				product: {
+					"order": this.isIconHidden("grid") ? "-1" : "6",
+				},
+			},
 			searchField: {
-				[getRTL() ? "left" : "right"]: this._searchField.right,
-				"top": `${parseInt(this._searchField.top)}px`,
+				"display": this.correctSearchFieldStyles,
 			},
 		};
 	}
 
-	get interactiveLogo() {
-		return this.breakpointSize === "S";
+	get correctSearchFieldStyles() {
+		if (this.showSearchField) {
+			return "flex";
+		}
+
+		return "none";
+	}
+
+	get customItemsInfo() {
+		return this._itemsInfo.filter(itemInfo => !!itemInfo.custom);
+	}
+
+	get hasLogo() {
+		return !!this.logo.length;
+	}
+
+	get showLogoInMenuButton() {
+		return this.hasLogo && this.breakpointSize === "S";
 	}
 
-	get showArrowDown() {
-		return this.primaryTitle || (this.logo && this.interactiveLogo);
+	get showTitleInMenuButton() {
+		return this.primaryTitle && !(this.showLogoInMenuButton);
+	}
+
+	get showMenuButton() {
+		return this.primaryTitle || this.showLogoInMenuButton;
 	}
 
 	get popoverHorizontalAlign() {
-		return getRTL() ? "Left" : "Right";
+		return this.effectiveDir === "rtl" ? "Left" : "Right";
+	}
+
+	get hasSearchField() {
+		return !!this.searchField.length;
 	}
 
-	get rtl() {
-		return getRTL() ? "rtl" : undefined;
+	get hasProfile() {
+		return !!this.profile.length;
 	}
 
-	static async define(...params) {
-		await Promise.all([
-			Icon.define(),
-			List.define(),
-			Popover.define(),
-			StandardListItem.define(),
-		]);
+	get hasMenuItems() {
+		return this.menuItems.length > 0;
+	}
+
+	get _shellbarText() {
+		return ShellBar.i18nBundle.getText(SHELLBAR_LABEL);
+	}
+
+	get _logoText() {
+		return this.accessibilityTexts.logoTitle || ShellBar.i18nBundle.getText(SHELLBAR_LOGO);
+	}
+
+	get _copilotText() {
+		return ShellBar.i18nBundle.getText(SHELLBAR_COPILOT);
+	}
+
+	get _notificationsText() {
+		return ShellBar.i18nBundle.getText(SHELLBAR_NOTIFICATIONS, this.notificationsCount);
+	}
+
+	get _cancelBtnText() {
+		return ShellBar.i18nBundle.getText(SHELLBAR_CANCEL);
+	}
+
+	get _showFullWidthSearch() {
+		const size = this._handleBarBreakpoints();
+		const searchBtnHidden = !!this.shadowRoot.querySelector(".ui5-shellbar-search-button.ui5-shellbar-hidden-button");
+
+		return ((size === "S") || searchBtnHidden);
+	}
+
+	get _profileText() {
+		return this.accessibilityTexts.profileButtonTitle || ShellBar.i18nBundle.getText(SHELLBAR_PROFILE);
+	}
+
+	get _productsText() {
+		return ShellBar.i18nBundle.getText(SHELLBAR_PRODUCTS);
+	}
+
+	get _searchText() {
+		return ShellBar.i18nBundle.getText(SHELLBAR_SEARCH);
+	}
+
+	get _overflowText() {
+		return ShellBar.i18nBundle.getText(SHELLBAR_OVERFLOW);
+	}
+
+	get accInfo() {
+		return {
+			notifications: {
+				"title": this._notificationsText,
+			},
+			profile: {
+				"title": this._profileText,
+			},
+			products: {
+				"title": this._productsText,
+			},
+			search: {
+				"title": this._searchText,
+				"accessibilityAttributes": {
+					expanded: this.showSearchField,
+				},
+			},
+			overflow: {
+				"title": this._overflowText,
+				"accessibilityAttributes": {
+					hasPopup: HasPopup.Menu,
+					expanded: this._overflowPopoverExpanded,
+				},
+			},
+		};
+	}
+
+	static get dependencies() {
+		return [
+			Button,
+			List,
+			Popover,
+			StandardListItem,
+		];
+	}
 
-		super.define(...params);
+	static async onDefine() {
+		ShellBar.i18nBundle = await getI18nBundle("@ui5/webcomponents-fiori");
 	}
 }