@ui5/webcomponents-base 0.0.0-b4cbc43ba → 0.0.0-b93c2a321

package/src/delegate/ItemNavigation.js

@@ -5,10 +5,11 @@ import {
 	isRight,
 	isHome,
 	isEnd,
+	isPageDown,
+	isPageUp,
 } from "../Keys.js";
 import getActiveElement from "../util/getActiveElement.js";
 
-import EventProvider from "../EventProvider.js";
 import NavigationMode from "../types/NavigationMode.js";
 import ItemNavigationBehavior from "../types/ItemNavigationBehavior.js";
 
@@ -38,14 +39,14 @@ import ItemNavigationBehavior from "../types/ItemNavigationBehavior.js";
  * If the items are Objects with "id" and "_tabIndex" however, it is the developer's responsibility to apply these and the easiest way is to have the root component invalidated by ItemNavigation.
  * To do so, set the "affectedPropertiesNames" constructor property to point to one or more of the root component's properties that need refreshing when "_tabIndex" is changed deeply.
  *
- * 2) Call the "update" method of ItemNavigation whenever you want to change the current item.
+ * 2) Call the "setCurrentItem" method of ItemNavigation whenever you want to change the current item.
  * This is most commonly required if the user for example clicks on an item and thus selects it directly.
- * Pass as the only argument to "update" the item that becomes current (must be one of the items, returned by "getItemsCallback").
+ * Pass as the only argument to "setCurrentItem" the item that becomes current (must be one of the items, returned by "getItemsCallback").
  *
  * @class
  * @public
  */
-class ItemNavigation extends EventProvider {
+class ItemNavigation {
 	/**
 	 *
 	 * @param rootWebComponent the component to operate on (component that slots or contains within its shadow root the items the user navigates among)
@@ -53,6 +54,7 @@ class ItemNavigation extends EventProvider {
 	 *  - currentIndex: the index of the item that will be initially selected (from which navigation will begin)
 	 *  - navigationMode (Auto|Horizontal|Vertical): whether the items are displayed horizontally (Horizontal), vertically (Vertical) or as a matrix (Auto) meaning the user can navigate in both directions (up/down and left/right)
 	 *  - rowSize: tells how many items per row there are when the items are not rendered as a flat list but rather as a matrix. Relevant for navigationMode=Auto
+	 * 	- skipItemsSize: tells how many items upon PAGE_UP and PAGE_DOWN should be skipped to applying the focus on the next item
 	 *  - behavior (Static|Cycling): tells what to do when trying to navigate beyond the first and last items
 	 *    Static means that nothing happens if the user tries to navigate beyond the first/last item.
 	 *    Cycling means that when the user navigates beyond the last item they go to the first and vice versa.
@@ -60,171 +62,245 @@ class ItemNavigation extends EventProvider {
 	 *  - affectedPropertiesNames: a list of metadata properties on the root component which, upon user navigation, will be reassigned by address thus causing the root component to invalidate
 	 */
 	constructor(rootWebComponent, options = {}) {
-		super();
-
-		this.currentIndex = options.currentIndex || 0;
-		this.rowSize = options.rowSize || 1;
-		this.behavior = options.behavior || ItemNavigationBehavior.Static;
-		const navigationMode = options.navigationMode;
-		const autoNavigation = !navigationMode || navigationMode === NavigationMode.Auto;
-		this.horizontalNavigationOn = autoNavigation || navigationMode === NavigationMode.Horizontal;
-		this.verticalNavigationOn = autoNavigation || navigationMode === NavigationMode.Vertical;
-
-		if (options.affectedPropertiesNames) {
-			this.affectedPropertiesNames = options.affectedPropertiesNames;
-		}
+		this._setRootComponent(rootWebComponent);
+		this._initOptions(options);
+	}
 
-		if (options.getItemsCallback) {
-			this._getItems = options.getItemsCallback;
+	_setRootComponent(rootWebComponent) {
+		if (!rootWebComponent.isUI5Element) {
+			throw new Error("The root web component must be a UI5 Element instance");
 		}
-
 		this.rootWebComponent = rootWebComponent;
-		this.rootWebComponent.addEventListener("keydown", this.onkeydown.bind(this));
+		this.rootWebComponent.addEventListener("keydown", this._onkeydown.bind(this));
 		this.rootWebComponent._onComponentStateFinalized = () => {
 			this._init();
 		};
 	}
 
+	_initOptions(options) {
+		if (typeof options.getItemsCallback !== "function") {
+			throw new Error("getItemsCallback is required");
+		}
+
+		this._getItems = options.getItemsCallback;
+		this._currentIndex = options.currentIndex || 0;
+		this._rowSize = options.rowSize || 1;
+		this._behavior = options.behavior || ItemNavigationBehavior.Static;
+		this._navigationMode = options.navigationMode || NavigationMode.Auto;
+		this._affectedPropertiesNames = options.affectedPropertiesNames || [];
+		this._skipItemsSize = options.skipItemsSize || null;
+	}
+
+	/**
+	 * Call this method to set a new "current" (selected) item in the item navigation
+	 * Note: the item passed to this function must be one of the items, returned by the getItemsCallback function
+	 *
+	 * @public
+	 * @param current the new selected item
+	 */
+	setCurrentItem(current) {
+		const currentItemIndex = this._getItems().indexOf(current);
+
+		if (currentItemIndex === -1) {
+			console.warn(`The provided item is not managed by ItemNavigation`, current); // eslint-disable-line
+			return;
+		}
+
+		this._currentIndex = currentItemIndex;
+		this._applyTabIndex();
+	}
+
+	/**
+	 * Call this method to dynamically change the row size
+	 *
+	 * @public
+	 * @param newRowSize
+	 */
+	setRowSize(newRowSize) {
+		this._rowSize = newRowSize;
+	}
+
 	_init() {
 		this._getItems().forEach((item, idx) => {
-			item._tabIndex = (idx === this.currentIndex) ? "0" : "-1";
+			item._tabIndex = (idx === this._currentIndex) ? "0" : "-1";
 		});
 	}
 
-	onkeydown(event) {
+	_onkeydown(event) {
 		if (!this._canNavigate()) {
 			return;
 		}
 
-		if (isUp(event) && this.verticalNavigationOn) {
+		const horizontalNavigationOn = this._navigationMode === NavigationMode.Horizontal || this._navigationMode === NavigationMode.Auto;
+		const verticalNavigationOn = this._navigationMode === NavigationMode.Vertical || this._navigationMode === NavigationMode.Auto;
+
+		if (isUp(event) && verticalNavigationOn) {
 			this._handleUp();
-		} else if (isDown(event) && this.verticalNavigationOn) {
+		} else if (isDown(event) && verticalNavigationOn) {
 			this._handleDown();
-		} else if (isLeft(event) && this.horizontalNavigationOn) {
+		} else if (isLeft(event) && horizontalNavigationOn) {
 			this._handleLeft();
-		} else if (isRight(event) && this.horizontalNavigationOn) {
+		} else if (isRight(event) && horizontalNavigationOn) {
 			this._handleRight();
 		} else if (isHome(event)) {
 			this._handleHome();
 		} else if (isEnd(event)) {
 			this._handleEnd();
+		} else if (isPageUp(event)) {
+			this._handlePageUp();
+		} else if (isPageDown(event)) {
+			this._handlePageDown();
 		} else {
 			return; // if none of the supported keys is pressed, we don't want to prevent the event or update the item navigation
 		}
 
 		event.preventDefault();
-		this.update();
-		this.focusCurrent();
+		this._applyTabIndex();
+		this._focusCurrentItem();
 	}
 
 	_handleUp() {
 		const itemsLength = this._getItems().length;
-		if (this.currentIndex - this.rowSize >= 0) { // no border reached, just decrease the index by a row
-			this.currentIndex -= this.rowSize;
+		if (this._currentIndex - this._rowSize >= 0) { // no border reached, just decrease the index by a row
+			this._currentIndex -= this._rowSize;
 			return;
 		}
 
-		if (this.behavior === ItemNavigationBehavior.Cyclic) { // if cyclic, go to the **last** item in the **previous** column
-			const firstItemInThisColumnIndex = this.currentIndex % this.rowSize;
-			const firstItemInPreviousColumnIndex = firstItemInThisColumnIndex === 0 ? this.rowSize - 1 : firstItemInThisColumnIndex - 1; // find the first item in the previous column (if the current column is the first column -> move to the last column)
-			const rows = Math.ceil(itemsLength / this.rowSize); // how many rows there are (even if incomplete, f.e. for 14 items and rowSize=4 -> 4 rows total, although only 2 items on the last row)
-			let lastItemInPreviousColumnIndex = firstItemInPreviousColumnIndex + (rows - 1) * this.rowSize; // multiply rows by columns, and add the column's first item's index
+		if (this._behavior === ItemNavigationBehavior.Cyclic) { // if cyclic, go to the **last** item in the **previous** column
+			const firstItemInThisColumnIndex = this._currentIndex % this._rowSize;
+			const firstItemInPreviousColumnIndex = firstItemInThisColumnIndex === 0 ? this._rowSize - 1 : firstItemInThisColumnIndex - 1; // find the first item in the previous column (if the current column is the first column -> move to the last column)
+			const rows = Math.ceil(itemsLength / this._rowSize); // how many rows there are (even if incomplete, f.e. for 14 items and _rowSize=4 -> 4 rows total, although only 2 items on the last row)
+			let lastItemInPreviousColumnIndex = firstItemInPreviousColumnIndex + (rows - 1) * this._rowSize; // multiply rows by columns, and add the column's first item's index
 			if (lastItemInPreviousColumnIndex > itemsLength - 1) { // for incomplete rows, use the previous row's last item, as for them the last item is missing
-				lastItemInPreviousColumnIndex -= this.rowSize;
+				lastItemInPreviousColumnIndex -= this._rowSize;
 			}
-			this.currentIndex = lastItemInPreviousColumnIndex;
+			this._currentIndex = lastItemInPreviousColumnIndex;
 		} else { // not cyclic, so just go to the first item
-			this.currentIndex = 0;
+			this._currentIndex = 0;
 		}
 	}
 
 	_handleDown() {
 		const itemsLength = this._getItems().length;
-		if (this.currentIndex + this.rowSize < itemsLength) { // no border reached, just increase the index by a row
-			this.currentIndex += this.rowSize;
+		if (this._currentIndex + this._rowSize < itemsLength) { // no border reached, just increase the index by a row
+			this._currentIndex += this._rowSize;
 			return;
 		}
 
-		if (this.behavior === ItemNavigationBehavior.Cyclic) { // if cyclic, go to the **first** item in the **next** column
-			const firstItemInThisColumnIndex = this.currentIndex % this.rowSize; // find the first item in the current column first
-			const firstItemInNextColumnIndex = (firstItemInThisColumnIndex + 1) % this.rowSize; // to get the first item in the next column, just increase the index by 1. The modulo by rows is for the case when we are at the last column
-			this.currentIndex = firstItemInNextColumnIndex;
+		if (this._behavior === ItemNavigationBehavior.Cyclic) { // if cyclic, go to the **first** item in the **next** column
+			const firstItemInThisColumnIndex = this._currentIndex % this._rowSize; // find the first item in the current column first
+			const firstItemInNextColumnIndex = (firstItemInThisColumnIndex + 1) % this._rowSize; // to get the first item in the next column, just increase the index by 1. The modulo by rows is for the case when we are at the last column
+			this._currentIndex = firstItemInNextColumnIndex;
 		} else { // not cyclic, so just go to the last item
-			this.currentIndex = itemsLength - 1;
+			this._currentIndex = itemsLength - 1;
 		}
 	}
 
 	_handleLeft() {
 		const itemsLength = this._getItems().length;
-		if (this.currentIndex > 0) {
-			this.currentIndex -= 1;
+		if (this._currentIndex > 0) {
+			this._currentIndex -= 1;
 			return;
 		}
 
-		if (this.behavior === ItemNavigationBehavior.Cyclic) { // go to the first item in the next column
-			this.currentIndex = itemsLength - 1;
+		if (this._behavior === ItemNavigationBehavior.Cyclic) { // go to the first item in the next column
+			this._currentIndex = itemsLength - 1;
 		}
 	}
 
 	_handleRight() {
 		const itemsLength = this._getItems().length;
-		if (this.currentIndex < itemsLength - 1) {
-			this.currentIndex += 1;
+		if (this._currentIndex < itemsLength - 1) {
+			this._currentIndex += 1;
 			return;
 		}
 
-		if (this.behavior === ItemNavigationBehavior.Cyclic) { // go to the first item in the next column
-			this.currentIndex = 0;
+		if (this._behavior === ItemNavigationBehavior.Cyclic) { // go to the first item in the next column
+			this._currentIndex = 0;
 		}
 	}
 
 	_handleHome() {
-		const homeEndRange = this.rowSize > 1 ? this.rowSize : this._getItems().length;
-		this.currentIndex -= this.currentIndex % homeEndRange;
+		const homeEndRange = this._rowSize > 1 ? this._rowSize : this._getItems().length;
+		this._currentIndex -= this._currentIndex % homeEndRange;
 	}
 
 	_handleEnd() {
-		const homeEndRange = this.rowSize > 1 ? this.rowSize : this._getItems().length;
-		this.currentIndex += (homeEndRange - 1 - this.currentIndex % homeEndRange); // eslint-disable-line
+		const homeEndRange = this._rowSize > 1 ? this._rowSize : this._getItems().length;
+		this._currentIndex += (homeEndRange - 1 - this._currentIndex % homeEndRange); // eslint-disable-line
+	}
+
+	_handlePageUp() {
+		if (this._rowSize > 1) {
+			// eslint-disable-next-line
+			// TODO: handle page up on matrix (grid) layout - ColorPalette, ProductSwitch.
+			return;
+		}
+		this._handlePageUpFlat();
+	}
+
+	_handlePageDown() {
+		if (this._rowSize > 1) {
+			// eslint-disable-next-line
+			// TODO: handle page up on matrix (grid) layout - ColorPalette, ProductSwitch.
+			return;
+		}
+		this._handlePageDownFlat();
 	}
 
 	/**
-	 * Call this method to set a new "current" (selected) item in the item navigation
-	 * Note: the item passed to this function must be one of the items, returned by the getItemsCallback function
-	 *
-	 * @public
-	 * @param current the new selected item
+	 * Handles PAGE_UP in a flat list-like structure, both vertically and horizontally.
 	 */
-	update(current) {
-		const origItems = this._getItems();
+	_handlePageUpFlat() {
+		if (this._skipItemsSize === null) {
+			// Move the focus to the very top (as Home).
+			this._currentIndex -= this._currentIndex;
+		}
 
-		if (current) {
-			this.currentIndex = this._getItems().indexOf(current);
+		if (this._currentIndex + 1 > this._skipItemsSize) {
+			// When there are more than "skipItemsSize" number of items to the top,
+			// move the focus up/left with the predefined number.
+			this._currentIndex -= this._skipItemsSize;
+		} else {
+			// Otherwise, move the focus to the very top (as Home).
+			this._currentIndex -= this._currentIndex;
 		}
+	}
 
-		if (!origItems[this.currentIndex]
-			|| (origItems[this.currentIndex]._tabIndex && origItems[this.currentIndex]._tabIndex === "0")) {
-			return;
+	/**
+	 * Handles PAGE_DOWN in a flat list-like structure, both vertically and horizontally.
+	 */
+	_handlePageDownFlat() {
+		if (this._skipItemsSize === null) {
+			// Move the focus to the very bottom (as End).
+			this._currentIndex = this._getItems().length - 1;
 		}
 
-		const items = origItems.slice(0);
+		const currentToEndRange = this._getItems().length - this._currentIndex - 1;
 
-		for (let i = 0; i < items.length; i++) {
-			items[i]._tabIndex = (i === this.currentIndex ? "0" : "-1");
+		if (currentToEndRange > this._skipItemsSize) {
+			// When there are more than "skipItemsSize" number of items until the bottom,
+			// move the focus down/right with the predefined number.
+			this._currentIndex += this._skipItemsSize;
+		} else {
+			// Otherwise, move the focus to the very bottom (as End).
+			this._currentIndex = this._getItems().length - 1;
 		}
+	}
 
-		if (Array.isArray(this.affectedPropertiesNames)) {
-			this.affectedPropertiesNames.forEach(propName => {
-				const prop = this.rootWebComponent[propName];
-				this.rootWebComponent[propName] = Array.isArray(prop) ? [...prop] : { ...prop };
-			});
+	_applyTabIndex() {
+		const items = this._getItems();
+		for (let i = 0; i < items.length; i++) {
+			items[i]._tabIndex = i === this._currentIndex ? "0" : "-1";
 		}
+
+		this._affectedPropertiesNames.forEach(propName => {
+			const prop = this.rootWebComponent[propName];
+			this.rootWebComponent[propName] = Array.isArray(prop) ? [...prop] : { ...prop };
+		});
 	}
 
-	/**
-	 * @private
-	 */
-	focusCurrent() {
+	_focusCurrentItem() {
 		const currentItem = this._getCurrentItem();
 		if (currentItem) {
 			currentItem.focus();
@@ -246,15 +322,15 @@ class ItemNavigation extends EventProvider {
 		}
 
 		// normalize the index
-		while (this.currentIndex >= items.length) {
-			this.currentIndex -= this.rowSize;
+		while (this._currentIndex >= items.length) {
+			this._currentIndex -= this._rowSize;
 		}
 
-		if (this.currentIndex < 0) {
-			this.currentIndex = 0;
+		if (this._currentIndex < 0) {
+			this._currentIndex = 0;
 		}
 
-		const currentItem = items[this.currentIndex];
+		const currentItem = items[this._currentIndex];
 
 		if (!currentItem) {
 			return;
@@ -270,24 +346,6 @@ class ItemNavigation extends EventProvider {
 
 		return this.rootWebComponent.getDomRef().querySelector(`#${currentItem.id}`);
 	}
-
-	/**
-	 * Set to callback that returns the list of items to navigate among
-	 * @public
-	 * @param callback a function that returns an array of items to navigate among
-	 */
-	set getItemsCallback(callback) {
-		this._getItems = callback;
-	}
-
-	/**
-	 * @public
-	 * @deprecated
-	 * @param val
-	 */
-	set current(val) {
-		this.currentIndex = val;
-	}
 }
 
 export default ItemNavigation;

package/src/delegate/ScrollEnablement.js

@@ -1,9 +1,9 @@
-import { isPhone } from "../Device.js";
+import { supportsTouch } from "../Device.js";
 import EventProvider from "../EventProvider.js";
 import scroll from "../animations/scroll.js";
 
 const scrollEventName = "scroll";
-const touchEndEventName = isPhone() ? "touchend" : "mouseup";
+const touchEndEventName = supportsTouch() ? "touchend" : "mouseup";
 
 class ScrollEnablement extends EventProvider {
 	constructor(containerComponent) {
@@ -13,7 +13,7 @@ class ScrollEnablement extends EventProvider {
 		this.mouseUp = this.ontouchend.bind(this);
 		this.touchStart = this.ontouchstart.bind(this);
 
-		this.isPhone = isPhone();
+		this.supportsTouch = supportsTouch();
 
 		// On Android devices touchmove is thrown one more time than neccessary (together with touchend)
 		// so we have to cache the previus coordinates in order to provide correct parameters in the
@@ -25,7 +25,7 @@ class ScrollEnablement extends EventProvider {
 		this.startX = 0;
 		this.startY = 0;
 
-		if (this.isPhone) {
+		if (this.supportsTouch) {
 			containerComponent.addEventListener("touchstart", this.touchStart, { passive: true });
 			containerComponent.addEventListener("touchmove", this.mouseMove, { passive: true });
 			containerComponent.addEventListener("touchend", this.mouseUp, { passive: true });
@@ -70,7 +70,13 @@ class ScrollEnablement extends EventProvider {
 		this._container.scrollTop = top;
 	}
 
-	move(dx, dy) {
+	move(dx, dy, disableAnimation) {
+		if (disableAnimation) {
+			this._container.scrollLeft += dx;
+			this._container.scrollTop += dy;
+			return;
+		}
+
 		return scroll({
 			element: this._container,
 			dx,
@@ -88,17 +94,17 @@ class ScrollEnablement extends EventProvider {
 
 	_isTouchInside(touch) {
 		const rect = this._container.getBoundingClientRect();
-		const x = this.isPhone ? touch.clientX : touch.x;
-		const y = this.isPhone ? touch.clientY : touch.y;
+		const x = this.supportsTouch ? touch.clientX : touch.x;
+		const y = this.supportsTouch ? touch.clientY : touch.y;
 
 		return x >= rect.left && x <= rect.right
 			&& y >= rect.top && y <= rect.bottom;
 	}
 
 	ontouchstart(event) {
-		const touch = this.isPhone ? event.touches[0] : null;
+		const touch = this.supportsTouch ? event.touches[0] : null;
 
-		if (!this.isPhone) {
+		if (!this.supportsTouch) {
 			document.addEventListener("mouseup", this.mouseUp, { passive: true });
 			document.addEventListener("mousemove", this.mouseMove, { passive: true });
 		} else {
@@ -107,10 +113,10 @@ class ScrollEnablement extends EventProvider {
 			this.startY = touch.pageY;
 		}
 
-		this._prevDragX = this.isPhone ? touch.pageX : event.x;
-		this._prevDragY = this.isPhone ? touch.pageY : event.y;
+		this._prevDragX = this.supportsTouch ? touch.pageX : event.x;
+		this._prevDragY = this.supportsTouch ? touch.pageY : event.y;
 
-		this._canScroll = this._isTouchInside(this.isPhone ? touch : event);
+		this._canScroll = this._isTouchInside(this.supportsTouch ? touch : event);
 	}
 
 	ontouchmove(event) {
@@ -119,10 +125,10 @@ class ScrollEnablement extends EventProvider {
 		}
 
 		const container = this._container;
-		const touch = this.isPhone ? event.touches[0] : null;
+		const touch = this.supportsTouch ? event.touches[0] : null;
 
-		const dragX = this.isPhone ? touch.pageX : event.x;
-		const dragY = this.isPhone ? touch.pageY : event.y;
+		const dragX = this.supportsTouch ? touch.pageX : event.x;
+		const dragY = this.supportsTouch ? touch.pageY : event.y;
 
 		container.scrollLeft += this._prevDragX - dragX;
 		container.scrollTop += this._prevDragY - dragY;
@@ -140,7 +146,7 @@ class ScrollEnablement extends EventProvider {
 	}
 
 	ontouchend(event) {
-		if (this.isPhone) {
+		if (this.supportsTouch) {
 			const deltaX = Math.abs(event.changedTouches[0].pageX - this.startX);
 			const deltaY = Math.abs(event.changedTouches[0].pageY - this.startY);
 
@@ -154,8 +160,8 @@ class ScrollEnablement extends EventProvider {
 		}
 
 		const container = this._container;
-		const dragX = this.isPhone ? event.changedTouches[0].pageX : event.x;
-		const dragY = this.isPhone ? event.changedTouches[0].pageY : event.y;
+		const dragX = this.supportsTouch ? event.changedTouches[0].pageX : event.x;
+		const dragY = this.supportsTouch ? event.changedTouches[0].pageY : event.y;
 
 		container.scrollLeft += this._prevDragX - dragX;
 		container.scrollTop += this._prevDragY - dragY;
@@ -172,7 +178,7 @@ class ScrollEnablement extends EventProvider {
 		this._prevDragX = dragX;
 		this._prevDragY = dragY;
 
-		if (!this.isPhone) {
+		if (!this.supportsTouch) {
 			document.removeEventListener("mousemove", this.mouseMove, { passive: true });
 			document.removeEventListener("mouseup", this.mouseUp);
 		}

package/src/features/F6Navigation.js

@@ -0,0 +1,108 @@
+import { registerFeature } from "../FeaturesRegistry.js";
+import { isF6Next, isF6Previous } from "../Keys.js";
+import { getFirstFocusableElement } from "../util/FocusableElements.js";
+
+class F6Navigation {
+	init() {
+		this.keydownHandler = this._keydownHandler.bind(this);
+		this.attachEventListeners();
+		this.selectedGroup = null;
+		this.groups = [];
+	}
+
+	attachEventListeners() {
+		document.addEventListener("keydown", this.keydownHandler);
+	}
+
+	async _keydownHandler(event) {
+		event.preventDefault();
+
+		if (isF6Next(event)) {
+			this.updateGroups();
+			if (this.groups.length < 1) {
+				return;
+			}
+
+			const nextIndex = this.groups.indexOf(this.selectedGroup);
+			let nextElement = null;
+
+			if (nextIndex > -1) {
+				if (nextIndex + 1 >= this.groups.length) {
+					nextElement = this.groups[0];
+				} else {
+					nextElement = this.groups[nextIndex + 1];
+				}
+			} else {
+				nextElement = this.groups[0];
+			}
+
+			const elementToFocus = await getFirstFocusableElement(nextElement.isUI5Element ? nextElement.getDomRef() : nextElement, true);
+			elementToFocus.focus();
+		}
+
+		if (isF6Previous(event)) {
+			this.updateGroups();
+			if (this.groups.length < 1) {
+				return;
+			}
+
+			const nextIndex = this.groups.indexOf(this.selectedGroup);
+			let nextElement = null;
+
+			if (nextIndex > -1) {
+				if (nextIndex - 1 < 0) {
+					nextElement = this.groups[this.groups.length - 1];
+				} else {
+					// Handle the situation where the first focusable element of two neighbor groups is the same
+					// For example:
+					// <ui5-flexible-column-layout>
+					//     <ui5-list>
+					//         <ui5-li>List Item</ui5-li>
+					//     </ui5-list>
+					// </ui5-flexible-column-layout>
+					// Here for both FCL & List the firstFoccusableElement is the same (the ui5-li)
+
+					const firstFocusable = await getFirstFocusableElement(this.groups[nextIndex - 1], true);
+					const shouldSkipParent = firstFocusable === await getFirstFocusableElement(this.groups[nextIndex], true);
+
+					nextElement = this.groups[shouldSkipParent ? nextIndex - 2 : nextIndex - 1];
+				}
+			} else {
+				nextElement = this.groups[this.groups.length - 1];
+			}
+
+			const elementToFocus = await getFirstFocusableElement(nextElement.isUI5Element ? nextElement.getDomRef() : nextElement, true);
+			elementToFocus.focus();
+		}
+	}
+
+	removeEventListeners() {
+		document.removeEventListener("keydown", this.keydownHandler);
+	}
+
+	updateGroups() {
+		this.setSelectedGroup(document.activeElement);
+		this.setGroups();
+	}
+
+	setGroups() {
+		this.groups = Array.from(document.querySelectorAll("[data-sap-ui-fastnavgroup='true']")).filter(group => group.clientWidth && window.getComputedStyle(group).visibility !== "hidden");
+	}
+
+	setSelectedGroup(element) {
+		while (element && element.getAttribute("data-sap-ui-fastnavgroup") !== "true" && element !== document.querySelector("html")) {
+			element = element.parentElement ? element.parentNode : element.parentNode.host;
+		}
+
+		this.selectedGroup = element;
+	}
+
+	destroy() {
+		this.removeEventListeners();
+	}
+}
+
+const F6HelperInstance = new F6Navigation();
+registerFeature("F6Navigation", F6HelperInstance);
+
+export default F6Navigation;