@ui5/webcomponents-base 0.0.0-bef62af04 → 0.0.0-c638668a1

package/src/SystemCSSVars.js

@@ -1,31 +1,10 @@
-import createStyleInHead from "./util/createStyleInHead.js";
-
-const systemCSSVars = `
-	:root {
-		--_ui5_content_density:cozy;
-	}
-	
-	[data-ui5-compact-size],
-	.ui5-content-density-compact,
-	.sapUiSizeCompact {
-		--_ui5_content_density:compact;
-	}
-	
-	[dir="rtl"] {
-		--_ui5_dir:rtl;
-	}
-	
-	[dir="ltr"] {
-		--_ui5_dir:ltr;
-	}
-`;
+import { hasStyle, createStyle } from "./ManagedStyles.js";
+import systemCSSVars from "./generated/css/SystemCSSVars.css.js";
 
 const insertSystemCSSVars = () => {
-	if (document.querySelector(`head>style[data-ui5-system-css-vars]`)) {
-		return;
+	if (!hasStyle("data-ui5-system-css-vars")) {
+		createStyle(systemCSSVars, "data-ui5-system-css-vars");
 	}
-
-	createStyleInHead(systemCSSVars, { "data-ui5-system-css-vars": "" });
 };
 
 export default insertSystemCSSVars;

package/src/UI5Element.js

@@ -18,7 +18,7 @@ import { isSlot, getSlotName, getSlottedElementsList } from "./util/SlotsHelper.
 import arraysAreEqual from "./util/arraysAreEqual.js";
 import getClassCopy from "./util/getClassCopy.js";
 import { markAsRtlAware } from "./locale/RTLAwareRegistry.js";
-import isLegacyBrowser from "./isLegacyBrowser.js";
+import preloadLinks from "./theming/preloadLinks.js";
 
 let autoId = 0;
 
@@ -101,6 +101,9 @@ class UI5Element extends HTMLElement {
 	 */
 	async connectedCallback() {
 		this.setAttribute(this.constructor.getMetadata().getPureTag(), "");
+		if (this.constructor.getMetadata().supportsF6FastNavigation()) {
+			this.setAttribute("data-sap-ui-fastnavgroup", "true");
+		}
 
 		const slotsAreManaged = this.constructor.getMetadata().slotsAreManaged();
 
@@ -251,7 +254,8 @@ class UI5Element extends HTMLElement {
 
 			// Listen for any invalidation on the child if invalidateOnChildChange is true or an object (ignore when false or not set)
 			if (child.isUI5Element && slotData.invalidateOnChildChange) {
-				child.attachInvalidate(this._getChildChangeListener(slotName));
+				const method = (child.attachInvalidate || child._attachChange).bind(child);
+				method(this._getChildChangeListener(slotName));
 			}
 
 			// Listen for the slotchange event if the child is a slot itself
@@ -311,7 +315,8 @@ class UI5Element extends HTMLElement {
 
 		children.forEach(child => {
 			if (child && child.isUI5Element) {
-				child.detachInvalidate(this._getChildChangeListener(slotName));
+				const method = (child.detachInvalidate || child._detachChange).bind(child);
+				method(this._getChildChangeListener(slotName));
 			}
 
 			if (isSlot(child)) {
@@ -607,25 +612,27 @@ class UI5Element extends HTMLElement {
 
 	/**
 	 * Returns the DOM Element inside the Shadow Root that corresponds to the opening tag in the UI5 Web Component's template
+	 * *Note:* For logical (abstract) elements (items, options, etc...), returns the part of the parent's DOM that represents this option
 	 * Use this method instead of "this.shadowRoot" to read the Shadow DOM, if ever necessary
+	 *
 	 * @public
 	 */
 	getDomRef() {
+		// If a component set _getRealDomRef to its children, use the return value of this function
+		if (typeof this._getRealDomRef === "function") {
+			return this._getRealDomRef();
+		}
+
 		if (!this.shadowRoot || this.shadowRoot.children.length === 0) {
 			return;
 		}
 
-		this._assertShadowRootStructure();
-
-		return this.shadowRoot.children.length === 1
-			? this.shadowRoot.children[0] : this.shadowRoot.children[1];
-	}
-
-	_assertShadowRootStructure() {
-		const expectedChildrenCount = document.adoptedStyleSheets || isLegacyBrowser() ? 1 : 2;
-		if (this.shadowRoot.children.length !== expectedChildrenCount) {
+		const children = [...this.shadowRoot.children].filter(child => !["link", "style"].includes(child.localName));
+		if (children.length !== 1) {
 			console.warn(`The shadow DOM for ${this.constructor.getMetadata().getTag()} does not have a top level element, the getDomRef() method might not work as expected`); // eslint-disable-line
 		}
+
+		return children[0];
 	}
 
 	/**
@@ -651,17 +658,6 @@ class UI5Element extends HTMLElement {
 		return this.getFocusDomRef();
 	}
 
-	/**
-	 * Use this method in order to get a reference to an element in the shadow root of the web component or the static area item of the component
-	 * @public
-	 * @method
-	 * @param {String} refName Defines the name of the stable DOM ref
-	 */
-	getStableDomRef(refName) {
-		const staticAreaResult = this.staticAreaItem && this.staticAreaItem.getStableDomRef(refName);
-		return staticAreaResult || this.getDomRef().querySelector(`[data-ui5-stable=${refName}]`);
-	}
-
 	/**
 	 * Set the focus to the element, returned by "getFocusDomRef()" (marked by "data-sap-focus-ref")
 	 * @public
@@ -988,6 +984,7 @@ class UI5Element extends HTMLElement {
 			this._generateAccessors();
 			registerTag(tag);
 			window.customElements.define(tag, this);
+			preloadLinks(this);
 
 			if (altTag && !customElements.get(altTag)) {
 				registerTag(altTag);

package/src/UI5ElementMetadata.js

@@ -126,7 +126,7 @@ class UI5ElementMetadata {
 	 */
 	hasAttribute(propName) {
 		const propData = this.getProperties()[propName];
-		return propData.type !== Object && !propData.noAttribute;
+		return propData.type !== Object && !propData.noAttribute && !propData.multiple;
 	}
 
 	/**
@@ -188,6 +188,14 @@ class UI5ElementMetadata {
 		return !!this.metadata.managedSlots;
 	}
 
+	/**
+	 * Determines whether this control supports F6 fast navigation
+	 * @public
+	 */
+	supportsF6FastNavigation() {
+		return !!this.metadata.fastNavigation;
+	}
+
 	/**
 	 * Returns an object with key-value pairs of properties and their metadata definitions
 	 * @public
@@ -212,6 +220,14 @@ class UI5ElementMetadata {
 		return !!this.metadata.languageAware;
 	}
 
+	/**
+	 * Determines whether this UI5 Element has any theme dependant carachteristics.
+	 * @returns {boolean}
+	 */
+	 isThemeAware() {
+		return !!this.metadata.themeAware;
+	}
+
 	/**
 	 * Matches a changed entity (property/slot) with the given name against the "invalidateOnChildChange" configuration
 	 * and determines whether this should cause and invalidation

package/src/asset-registries/Icons.js

@@ -1,11 +1,12 @@
 import getSharedResource from "../getSharedResource.js";
+import IconCollectionsAlias from "../assets-meta/IconCollectionsAlias.js";
+import { isTheme } from "../config/Theme.js";
 
 const loaders = new Map();
 const registry = getSharedResource("SVGIcons.registry", new Map());
 const iconCollectionPromises = getSharedResource("SVGIcons.promises", new Map());
 
 const ICON_NOT_FOUND = "ICON_NOT_FOUND";
-const DEFAULT_COLLECTION = "SAP-icons";
 
 /**
  * @deprecated
@@ -47,7 +48,7 @@ const _fillRegistry = bundleData => {
 // set
 const registerIcon = (name, { pathData, ltr, accData, collection, packageName } = {}) => { // eslint-disable-line
 	if (!collection) {
-		collection = DEFAULT_COLLECTION;
+		collection = _getDefaultCollection();
 	}
 
 	const key = `${collection}/${name}`;
@@ -67,18 +68,16 @@ const _parseName = name => {
 
 	let collection;
 	[name, collection] = name.split("/").reverse();
-	collection = collection || DEFAULT_COLLECTION;
-	// hardcoded alias in case icon explorer is used, resolve `SAP-icons-TNT` to `tnt`
-	// aliases can be made a feature in the future if more collections need it or more aliases are needed.
-	if (collection === "SAP-icons-TNT") {
-		collection = "tnt";
-	}
-	// hardcoded alias in case icon explorer is used, resolve `BusinessSuiteInAppSymbols` to `business-suite`
-	// aliases can be made a feature in the future if more collections need it or more aliases are needed.
-	if (collection === "BusinessSuiteInAppSymbols") {
-		collection = "business-suite";
-		name = name.replace("icon-", "");
-	}
+	collection = collection || _getDefaultCollection();
+
+	// Normalize collection name.
+	// - resolve `SAP-icons-TNT` to `tnt`.
+	// - resolve `BusinessSuiteInAppSymbols` to `business-suite`.
+	// - resolve `horizon` to `SAP-icons-v5`,
+	// Note: aliases can be made as a feature, if more collections need it or more aliases are needed.
+	collection = _normalizeCollection(collection);
+	name = name.replace("icon-", "");
+
 	const registryKey = `${collection}/${name}`;
 	return { name, collection, registryKey };
 };
@@ -118,6 +117,18 @@ const _getRegisteredNames = async () => {
 	return Array.from(registry.keys());
 };
 
+const _getDefaultCollection = () => {
+	return isTheme("sap_horizon") ? "SAP-icons-v5" : "SAP-icons";
+};
+
+const _normalizeCollection = collectionName => {
+	if (IconCollectionsAlias[collectionName]) {
+		return IconCollectionsAlias[collectionName];
+	}
+
+	return collectionName;
+};
+
 export {
 	registerIconBundle,
 	registerIconLoader,

package/src/asset-registries/Illustrations.js

@@ -3,8 +3,8 @@ import getSharedResource from "../getSharedResource.js";
 const registry = getSharedResource("SVGIllustration.registry", new Map());
 const ILLUSTRATION_NOT_FOUND = "ILLUSTRATION_NOT_FOUND";
 
-const registerIllustration = (name, { dialogSvg, sceneSvg, spotSvg, title, subtitle } = {}) => { // eslint-disable-line
-	registry.set(name, {
+const registerIllustration = (name, { dialogSvg, sceneSvg, spotSvg, set, title, subtitle } = {}) => { // eslint-disable-line
+	registry.set(`${set}/${name}`, {
 		dialogSvg,
 		sceneSvg,
 		spotSvg,
@@ -14,7 +14,14 @@ const registerIllustration = (name, { dialogSvg, sceneSvg, spotSvg, title, subti
 };
 
 const getIllustrationDataSync = nameProp => {
-	return registry.get(nameProp) || ILLUSTRATION_NOT_FOUND;
+	let set = "fiori";
+
+	if (nameProp.startsWith("Tnt")) {
+		set = "tnt";
+		nameProp = nameProp.replace(/^Tnt/, "");
+	}
+
+	return registry.get(`${set}/${nameProp}`) || ILLUSTRATION_NOT_FOUND;
 };
 
 export {

package/src/asset-registries/LocaleData.js

@@ -16,11 +16,20 @@ const M_ISO639_OLD_TO_NEW = {
 	"sh": "sr",
 };
 
+const DEV_MODE = false;
+
 const _showAssetsWarningOnce = localeId => {
-	if (!warningShown) {
+	if (warningShown) {
+		return;
+	}
+
+	if (!DEV_MODE) {
 		console.warn(`[LocaleData] Supported locale "${localeId}" not configured, import the "Assets.js" module from the webcomponents package you are using.`); /* eslint-disable-line */
-		warningShown = true;
+	} else {
+		console.warn(`[LocaleData] Note: in dev mode, CLDR assets might be disabled for performance reasons. Try running "ENABLE_CLDR=1 yarn start" to test CLDR assets.`); /* eslint-disable-line */
 	}
+
+	warningShown = true;
 };
 
 const calcLocale = (language, region, script) => {

package/src/assets-meta/IconCollectionsAlias.js

@@ -0,0 +1,18 @@
+/**
+ * Supported icon collection names and aliases.
+ *
+ * Users might specify a collection, using both the key and the value in the following key-value pairs,
+ * e.g the following pairs are completely exchangeable:
+ * "SAP-icons-TNT/actor" and "tnt/actor", "BusinessSuiteInAppSymbols/3d" and "business-suite/3d",
+ * "SAP-icons-v5/accept" and "horizon/accept".
+ *
+ * Note: technically, in the code we maintain the collections under the "value" name - "tnt", "business-suite",
+ * SAP-icons-v5" and "SAP-icons"(which does not have an alias).
+ */
+const IconCollectionsAlias = {
+	"SAP-icons-TNT": "tnt",
+	"BusinessSuiteInAppSymbols": "business-suite",
+	"horizon": "SAP-icons-v5",
+};
+
+export default IconCollectionsAlias;

package/src/config/Theme.js

@@ -1,4 +1,5 @@
 import { getTheme as getConfiguredTheme } from "../InitialConfiguration.js";
+import { reRenderAllUI5Elements } from "../Render.js";
 import applyTheme from "../theming/applyTheme.js";
 
 let theme;
@@ -20,9 +21,22 @@ const setTheme = async newTheme => {
 
 	// Update CSS Custom Properties
 	await applyTheme(theme);
+	await reRenderAllUI5Elements({ themeAware: true });
+};
+
+/**
+ * Returns if the given theme name is the one currently applied.
+ * @private
+ * @param {String}
+ * @returns {boolean}
+ */
+const isTheme = _theme => {
+	const currentTheme = getTheme();
+	return currentTheme === _theme || currentTheme === `${_theme}_exp`;
 };
 
 export {
 	getTheme,
 	setTheme,
+	isTheme,
 };

package/src/css/FontFace.css

@@ -0,0 +1,45 @@
+@font-face {
+    font-family: "72";
+    font-style: normal;
+    font-weight: 400;
+    src: local("72"),
+    url(https://ui5.sap.com/sdk/resources/sap/ui/core/themes/sap_fiori_3/fonts/72-Regular.woff2?ui5-webcomponents) format("woff2"),
+    url(https://ui5.sap.com/sdk/resources/sap/ui/core/themes/sap_fiori_3/fonts/72-Regular.woff?ui5-webcomponents) format("woff");
+}
+
+@font-face {
+    font-family: "72full";
+    font-style: normal;
+    font-weight: 400;
+    src: local('72-full'),
+    url(https://ui5.sap.com/sdk/resources/sap/ui/core/themes/sap_fiori_3/fonts/72-Regular-full.woff2?ui5-webcomponents) format("woff2"),
+    url(https://ui5.sap.com/sdk/resources/sap/ui/core/themes/sap_fiori_3/fonts/72-Regular-full.woff?ui5-webcomponents) format("woff");
+
+}
+
+@font-face {
+    font-family: "72";
+    font-style: normal;
+    font-weight: 700;
+    src: local('72-Bold'),
+    url(https://ui5.sap.com/sdk/resources/sap/ui/core/themes/sap_fiori_3/fonts/72-Bold.woff2?ui5-webcomponents) format("woff2"),
+    url(https://ui5.sap.com/sdk/resources/sap/ui/core/themes/sap_fiori_3/fonts/72-Bold.woff?ui5-webcomponents) format("woff");
+}
+
+@font-face {
+    font-family: "72full";
+    font-style: normal;
+    font-weight: 700;
+    src: local('72-Bold-full'),
+    url(https://ui5.sap.com/sdk/resources/sap/ui/core/themes/sap_fiori_3/fonts/72-Bold-full.woff2?ui5-webcomponents) format("woff2"),
+    url(https://ui5.sap.com/sdk/resources/sap/ui/core/themes/sap_fiori_3/fonts/72-Bold-full.woff?ui5-webcomponents) format("woff");
+}
+
+@font-face {
+    font-family: "72Black";
+    font-style: bold;
+    font-weight: 900;
+    src: local('72Black'),
+    url(https://openui5nightly.hana.ondemand.com/resources/sap/ui/core/themes/sap_horizon/fonts/72-Black.woff2?ui5-webcomponents) format("woff2"),
+    url(https://openui5nightly.hana.ondemand.com/resources/sap/ui/core/themes/sap_horizon/fonts/72-Black.woff?ui5-webcomponents) format("woff");
+}

package/src/css/OverrideFontFace.css

@@ -0,0 +1,32 @@
+/**
+ * Some diacritics are supported by the 72 font:
+ *  * Grave
+ *  * Acute
+ *  * Circumflex
+ *  * Tilde
+ *
+ * However, the following diacritics and the combination of multiple diacritics (including the supported ones) are not supported:
+ *  * Breve
+ *  * Horn
+ *  * Dot below
+ *  * Hook above
+ *
+ *
+ * Override for the characters that aren't covered by the '72' font to other system fonts
+ *
+ * U+0102-0103: A and a with Breve
+ * U+01A0-01A1: O and o with Horn
+ * U+01AF-01B0: U and u with Horn
+ * U+1EA0-1EB7: A and a with diacritics that are not supported by the font and combination of multiple diacritics
+ * U+1EB8-1EC7: E and e with diacritics that are not supported by the font and combination of multiple diacritics
+ * U+1EC8-1ECB: I and i with diacritics that are not supported by the font and combination of multiple diacritics
+ * U+1ECC-1EE3: O and o with diacritics that are not supported by the font and combination of multiple diacritics
+ * U+1EE4-1EF1: U and u with diacritics that are not supported by the font and combination of multiple diacritics
+ * U+1EF4-1EF7: Y and y with diacritics that are not supported by the font and combination of multiple diacritics
+ *
+ */
+@font-face {
+    font-family: '72override';
+    unicode-range: U+0102-0103, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EB7, U+1EB8-1EC7, U+1EC8-1ECB, U+1ECC-1EE3, U+1EE4-1EF1, U+1EF4-1EF7;
+    src: local('Arial'), local('Helvetica'), local('sans-serif');
+}

package/src/css/SystemCSSVars.css

@@ -0,0 +1,17 @@
+:root {
+    --_ui5_content_density:cozy;
+}
+
+[data-ui5-compact-size],
+.ui5-content-density-compact,
+.sapUiSizeCompact {
+    --_ui5_content_density:compact;
+}
+
+[dir="rtl"] {
+    --_ui5_dir:rtl;
+}
+
+[dir="ltr"] {
+    --_ui5_dir:ltr;
+}

package/src/delegate/ItemNavigation.js

@@ -5,6 +5,8 @@ import {
 	isRight,
 	isHome,
 	isEnd,
+	isPageDown,
+	isPageUp,
 } from "../Keys.js";
 import getActiveElement from "../util/getActiveElement.js";
 
@@ -52,6 +54,7 @@ class ItemNavigation {
 	 *  - 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.
@@ -85,6 +88,7 @@ class ItemNavigation {
 		this._behavior = options.behavior || ItemNavigationBehavior.Static;
 		this._navigationMode = options.navigationMode || NavigationMode.Auto;
 		this._affectedPropertiesNames = options.affectedPropertiesNames || [];
+		this._skipItemsSize = options.skipItemsSize || null;
 	}
 
 	/**
@@ -142,6 +146,10 @@ class ItemNavigation {
 			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
 		}
@@ -222,6 +230,64 @@ class ItemNavigation {
 		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();
+	}
+
+	/**
+	 * Handles PAGE_UP in a flat list-like structure, both vertically and horizontally.
+	 */
+	_handlePageUpFlat() {
+		if (this._skipItemsSize === null) {
+			// Move the focus to the very top (as Home).
+			this._currentIndex -= this._currentIndex;
+		}
+
+		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;
+		}
+	}
+
+	/**
+	 * 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 currentToEndRange = this._getItems().length - this._currentIndex - 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;
+		}
+	}
+
 	_applyTabIndex() {
 		const items = this._getItems();
 		for (let i = 0; i < items.length; i++) {

package/src/features/F6Navigation.js

@@ -0,0 +1,106 @@
+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) {
+		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;