@openui5/sap.f 1.133.0 → 1.134.0

package/src/sap/f/cards/NumericHeaderRenderer.js

@@ -10,159 +10,87 @@ sap.ui.define([
 ], function (BaseHeaderRenderer, Renderer) {
 	"use strict";
 
-	var NumericHeaderRenderer = Renderer.extend(BaseHeaderRenderer);
+	const NumericHeaderRenderer = Renderer.extend(BaseHeaderRenderer);
 	NumericHeaderRenderer.apiVersion = 2;
 
 	/**
-	 * Render a numeric header.
-	 *
-	 * @param {sap.ui.core.RenderManager} oRm The RenderManager that can be used for writing to the render output buffer
-	 * @param {sap.f.cards.NumericHeader} oNumericHeader An object representation of the control that should be rendered
+	 * @override
 	 */
-	NumericHeaderRenderer.render = function (oRm, oNumericHeader) {
-		const bLoading = oNumericHeader.isLoading(),
-			oError = oNumericHeader.getAggregation("_error"),
-			bRenderAsLink = oNumericHeader.isLink(),
-			oToolbar = oNumericHeader.getToolbar();
-
-		oRm.openStart("div", oNumericHeader)
-			.class("sapFCardHeader")
-			.class("sapFCardNumericHeader");
-
-		if (bLoading) {
-			oRm.class("sapFCardHeaderLoading");
-		}
+	NumericHeaderRenderer.renderHeaderAttributes = function (oRm, oHeader) {
+		oRm.class("sapFCardNumericHeader");
 
-		if (oNumericHeader.isInteractive()) {
-			oRm.class("sapFCardSectionClickable");
-		}
-
-		if (oNumericHeader.getIconSrc() && oNumericHeader.getIconVisible()) {
-			oRm.class("sapFCardHeaderHasIcon");
-		}
-
-		if (oNumericHeader.getNumber() && oNumericHeader.getNumberVisible()) {
+		if (oHeader.getNumber() && oHeader.getNumberVisible()) {
 			oRm.class("sapFCardHeaderHasNumber");
 		}
+	};
 
-		if (oToolbar?.getVisible()) {
-			oRm.class("sapFCardHeaderHasToolbar");
-		}
-
-		oRm.openEnd();
+	/**
+	 * @override
+	 */
+	NumericHeaderRenderer.hasNumericPart = function (oHeader) {
+		const oBindingInfos = oHeader.mBindingInfos;
+		const bHasMainIndicator = oHeader.getNumber() || oHeader.isBound("number");
+		const bHasSideIndicators = oHeader.getSideIndicators().length > 0;
+		const bHasDetails = oHeader.getDetails() || oBindingInfos.details;
+		const bHasDataTimestamp = oHeader.getDataTimestamp() || oBindingInfos.dataTimestamp;
+
+		return bHasMainIndicator || bHasSideIndicators || bHasDetails || bHasDataTimestamp;
+	};
 
-		if (bRenderAsLink) {
-			oRm.openStart("a");
-			BaseHeaderRenderer.linkAttributes(oRm, oNumericHeader);
-		} else {
-			oRm.openStart("div");
+	/**
+	 * @override
+	 */
+	NumericHeaderRenderer.renderNumericPart = function (oRm, oHeader) {
+		if (oHeader.getProperty("useTileLayout")) {
+			return;
 		}
 
-		oRm.attr("id", oNumericHeader.getId() + "-focusable")
-			.class("sapFCardHeaderContent");
+		const oMicroChart = oHeader.getMicroChart();
 
-		if (oNumericHeader.getProperty("focusable") && !oNumericHeader._isInsideGridContainer()) {
-			oRm.attr("tabindex", "0");
-		}
+		oRm.openStart("div")
+			.class("sapFCardNumericHeaderNumericPart")
+			.class("sapFCardHeaderLastPart")
+			.openEnd();
 
-		if (!oNumericHeader._isInsideGridContainer()) {
-			oRm.accessibilityState({
-				labelledby: {value: oNumericHeader._getAriaLabelledBy(), append: true},
-				role: oNumericHeader.getFocusableElementAriaRole(),
-				roledescription: oNumericHeader.getAriaRoleDescription()
-			});
-		}
+		oRm.openStart("div")
+			.class("sapFCardHeaderNumericPartFirstLine")
+			.openEnd();
 
-		oRm.openEnd();
+		this._renderIndicators(oRm, oHeader);
 
-		if (oError) {
-			oRm.renderControl(oError);
-		} else {
-			NumericHeaderRenderer.renderHeaderText(oRm, oNumericHeader);
-			NumericHeaderRenderer.renderAvatarAndIndicatorsLine(oRm, oNumericHeader);
-			NumericHeaderRenderer.renderDetails(oRm, oNumericHeader);
-			BaseHeaderRenderer.renderBanner(oRm, oNumericHeader);
+		if (oMicroChart) {
+			oRm.renderControl(oMicroChart);
 		}
 
-		if (bRenderAsLink) {
-			oRm.close("a");
-		} else {
-			oRm.close("div");
-		}
+		oRm.close("div"); // sapFCardHeaderNumericPartFirstLine
 
-		if (!oError) {
-			NumericHeaderRenderer.renderToolbar(oRm, oNumericHeader);
-		}
+		this._renderDetails(oRm, oHeader);
 
 		oRm.close("div");
 	};
 
 	/**
-	 * Render toolbar.
-	 *
-	 * @param {sap.ui.core.RenderManager} oRm The RenderManager that can be used for writing to the render output buffer
-	 * @param {sap.f.cards.NumericHeader} oNumericHeader An object representation of the control that should be rendered
-	 */
-	NumericHeaderRenderer.renderToolbar = function (oRm, oNumericHeader) {
-		var oToolbar = oNumericHeader.getToolbar();
-
-		if (oToolbar) {
-			oRm.openStart("div")
-				.class("sapFCardHeaderToolbarCont")
-				.openEnd();
-
-			oRm.renderControl(oToolbar);
-
-			oRm.close("div");
-		}
-	};
-
-	/**
-	 * Render title and subtitle texts.
-	 *
-	 * @param {sap.ui.core.RenderManager} oRm The RenderManager that can be used for writing to the render output buffer
-	 * @param {sap.f.cards.NumericHeader} oNumericHeader An object representation of the control that should be rendered
+	 * @override
 	 */
-	NumericHeaderRenderer.renderHeaderText = function(oRm, oNumericHeader) {
-		var oTitle = oNumericHeader.getAggregation("_title"),
-			sStatus = oNumericHeader.getStatusText(),
-			oBindingInfos = oNumericHeader.mBindingInfos;
-
-		// TODO reuse title and subtitle rendering from the default header if possible
+	NumericHeaderRenderer.renderMainContentInTileLayout = function (oRm, oHeader) {
 		oRm.openStart("div")
 			.class("sapFCardHeaderText")
 			.openEnd();
 
-		oRm.openStart("div")
-			.class("sapFCardHeaderTextFirstLine")
-			.openEnd();
-
-		if (oTitle) {
-			if (oBindingInfos.title) {
-				oTitle.addStyleClass("sapFCardHeaderItemBinded");
-			}
-			oTitle.addStyleClass("sapFCardTitle");
-			oRm.renderControl(oTitle);
-		}
-
-		if (sStatus && oNumericHeader.getStatusVisible()) {
-			oRm.openStart("span", oNumericHeader.getId() + "-status")
-				.class("sapFCardStatus");
-
-			if (oBindingInfos.statusText) {
-				oRm.class("sapFCardHeaderItemBinded");
-			}
-
-			oRm.openEnd()
-				.text(sStatus)
-				.close("span");
-		}
+		BaseHeaderRenderer.renderMainPartFirstLine(oRm, oHeader);
+		this._renderSubtitle(oRm, oHeader);
 
 		oRm.close("div");
 
-		NumericHeaderRenderer.renderSubtitle(oRm, oNumericHeader);
+		this._renderAvatarAndIndicatorsLine(oRm, oHeader);
+		this._renderDetails(oRm, oHeader);
+	};
 
-		oRm.close("div");
+	/**
+	 * @override
+	 */
+	NumericHeaderRenderer.renderMainPartSecondLine = function (oRm, oHeader) {
+		this._renderSubtitle(oRm, oHeader);
 	};
 
 	/**
@@ -171,7 +99,7 @@ sap.ui.define([
 	 * @param {sap.ui.core.RenderManager} oRm The RenderManager that can be used for writing to the render output buffer
 	 * @param {sap.f.cards.NumericHeader} oNumericHeader An object representation of the control that should be rendered
 	 */
-	NumericHeaderRenderer.renderSubtitle = function(oRm, oNumericHeader) {
+	NumericHeaderRenderer._renderSubtitle = function(oRm, oNumericHeader) {
 		var oBindingInfos = oNumericHeader.mBindingInfos,
 			oSubtitle = oNumericHeader.getAggregation("_subtitle"),
 			oUnitOfMeasurement = oNumericHeader.getAggregation("_unitOfMeasurement"),
@@ -210,13 +138,13 @@ sap.ui.define([
 	 * @param {sap.ui.core.RenderManager} oRm The RenderManager that can be used for writing to the render output buffer
 	 * @param {sap.f.cards.NumericHeader} oNH An object representation of the control that should be rendered
 	 */
-	NumericHeaderRenderer.renderAvatarAndIndicatorsLine = function(oRm, oNH) {
+	NumericHeaderRenderer._renderAvatarAndIndicatorsLine = function(oRm, oNH) {
 		oRm.openStart("div")
 			.class("sapFCardAvatarAndIndicatorsLine")
 			.openEnd();
 
 		BaseHeaderRenderer.renderAvatar(oRm, oNH);
-		NumericHeaderRenderer.renderIndicators(oRm, oNH);
+		this._renderIndicators(oRm, oNH);
 
 		var oMicroChart = oNH.getMicroChart();
 		if (oMicroChart) {
@@ -232,7 +160,7 @@ sap.ui.define([
 	 * @param {sap.ui.core.RenderManager} oRm The RenderManager that can be used for writing to the render output buffer
 	 * @param {sap.f.cards.NumericHeader} oNH An object representation of the control that should be rendered
 	 */
-	NumericHeaderRenderer.renderIndicators = function(oRm, oNH) {
+	NumericHeaderRenderer._renderIndicators = function(oRm, oNH) {
 		if (!oNH.getNumber() && !oNH.isBound("number") && oNH.getSideIndicators().length === 0) {
 			return;
 		}
@@ -255,7 +183,7 @@ sap.ui.define([
 	 * @param {sap.ui.core.RenderManager} oRm The RenderManager that can be used for writing to the render output buffer
 	 * @param {sap.f.cards.NumericHeader} oNumericHeader An object representation of the control that should be rendered
 	 */
-	NumericHeaderRenderer.renderDetails = function(oRm, oNumericHeader) {
+	NumericHeaderRenderer._renderDetails = function(oRm, oNumericHeader) {
 		var oBindingInfos = oNumericHeader.mBindingInfos,
 			oDetails = oNumericHeader.getAggregation("_details"),
 			bHasDetails = oNumericHeader.getDetails() || oBindingInfos.details,

package/src/sap/f/cards/NumericIndicators.js

@@ -25,7 +25,7 @@ sap.ui.define([
 	 * @extends sap.ui.core.Control
 	 *
 	 * @author SAP SE
-	 * @version 1.133.0
+	 * @version 1.134.0
 	 *
 	 * @constructor
 	 * @private

package/src/sap/f/cards/NumericSideIndicator.js

@@ -28,7 +28,7 @@ sap.ui.define([
 	 * @extends sap.ui.core.Control
 	 *
 	 * @author SAP SE
-	 * @version 1.133.0
+	 * @version 1.134.0
 	 *
 	 * @constructor
 	 * @public

package/src/sap/f/cards/loading/AnalyticalPlaceholder.js

@@ -19,7 +19,7 @@ sap.ui.define([
 	 * @extends sap.f.cards.loading.PlaceholderBase
 	 *
 	 * @author SAP SE
-	 * @version 1.133.0
+	 * @version 1.134.0
 	 *
 	 * @constructor
 	 * @private

package/src/sap/f/cards/loading/CalendarPlaceholder.js

@@ -19,7 +19,7 @@ sap.ui.define([
 	 * @extends sap.f.cards.loading.ListPlaceholder
 	 *
 	 * @author SAP SE
-	 * @version 1.133.0
+	 * @version 1.134.0
 	 *
 	 * @constructor
 	 * @private

package/src/sap/f/cards/loading/GenericPlaceholder.js

@@ -19,7 +19,7 @@ sap.ui.define([
 	 * @extends sap.f.cards.loading.PlaceholderBase
 	 *
 	 * @author SAP SE
-	 * @version 1.133.0
+	 * @version 1.134.0
 	 *
 	 * @constructor
 	 * @private

package/src/sap/f/cards/loading/ListPlaceholder.js

@@ -19,7 +19,7 @@ sap.ui.define([
 	 * @extends sap.f.cards.loading.PlaceholderBase
 	 *
 	 * @author SAP SE
-	 * @version 1.133.0
+	 * @version 1.134.0
 	 *
 	 * @constructor
 	 * @private

package/src/sap/f/cards/loading/ObjectPlaceholder.js

@@ -29,7 +29,7 @@ sap.ui.define([
 	 * @extends sap.f.cards.loading.PlaceholderBase
 	 *
 	 * @author SAP SE
-	 * @version 1.133.0
+	 * @version 1.134.0
 	 *
 	 * @constructor
 	 * @private

package/src/sap/f/cards/loading/PlaceholderBase.js

@@ -22,7 +22,7 @@ sap.ui.define([
 	 * @extends sap.ui.core.Control
 	 *
 	 * @author SAP SE
-	 * @version 1.133.0
+	 * @version 1.134.0
 	 *
 	 * @constructor
 	 * @private

package/src/sap/f/cards/loading/TablePlaceholder.js

@@ -19,7 +19,7 @@ sap.ui.define([
 	 * @extends sap.f.cards.loading.PlaceholderBase
 	 *
 	 * @author SAP SE
-	 * @version 1.133.0
+	 * @version 1.134.0
 	 *
 	 * @constructor
 	 * @private

package/src/sap/f/cards/loading/TimelinePlaceholder.js

@@ -19,7 +19,7 @@ sap.ui.define([
 	 * @extends sap.f.cards.loading.PlaceholderBase
 	 *
 	 * @author SAP SE
-	 * @version 1.133.0
+	 * @version 1.134.0
 	 *
 	 * @constructor
 	 * @private

package/src/sap/f/changeHandler/MoveDynamicPageTitleActions.js

@@ -16,7 +16,7 @@ sap.ui.define([
 		 *
 		 * @alias sap.f.changeHandler.MoveDynamicPageTitleActions
 		 * @author SAP SE
-		 * @version 1.133.0
+		 * @version 1.134.0
 		 */
 		var MoveActions = { };
 		var ACTION_AGGREGATION_NAME = "actions";

package/src/sap/f/delegate/GridContainerItemNavigation.js

@@ -5,32 +5,16 @@
  */
 sap.ui.define([
 	"sap/ui/core/Element",
-	"sap/ui/core/delegate/ItemNavigation",
 	"./GridItemNavigation",
-	"sap/ui/dom/containsOrEquals",
 	"sap/ui/thirdparty/jquery",
 	"sap/ui/dom/jquery/Selectors" // provides jQuery custom selector ":sapTabbable"
 ], function(
 	Element,
-	ItemNavigation,
 	GridItemNavigation,
-	containsOrEquals,
 	jQuery
 ) {
 	"use strict";
 
-
-	/**
-	 * When the GridContainer list item is focused, the control inside received a virtual focus.
-	 * @private
-	 * @param {sap.ui.core.Control} oControl The control
-	 */
-	function doVirtualFocusin(oControl) {
-		if (oControl.onfocusin) {
-			oControl.onfocusin();
-		}
-	}
-
 	/**
 	 * Constructor for a new <code>sap.f.delegate.GridContainerItemNavigation</code>.
 	 *
@@ -41,7 +25,7 @@ sap.ui.define([
 	 *
 	 *
 	 * @author SAP SE
-	 * @version 1.133.0
+	 * @version 1.134.0
 	 *
 	 * @extends sap.f.delegate.GridItemNavigation
 	 *
@@ -50,36 +34,19 @@ sap.ui.define([
 	 * @alias sap.f.delegate.GridContainerItemNavigation
 	 */
 	var GridContainerItemNavigation = GridItemNavigation.extend("sap.f.delegate.GridContainerItemNavigation", /** @lends sap.f.delegate.GridContainerItemNavigation.prototype */ {
-		constructor: function() {
-			GridItemNavigation.apply(this, arguments);
-
-			this.attachEvent(ItemNavigation.Events.FocusLeave, this._onFocusLeave, this);
-		}
 	});
 
-	GridContainerItemNavigation.prototype._onFocusLeave = function(oEvent) {
-		var currentFocused = this.getFocusedDomRef();
-		this.getItemDomRefs().forEach(function(item, index) {
-			if (currentFocused === item) {
-				var nextFocusableIndex = index++;
-				this.setFocusedIndex(nextFocusableIndex);
-			}
-		}.bind(this));
-	};
-
 	/**
 	 * Forward tab before or after GridContainer
 	 *
 	 * @protected
 	 */
 	GridContainerItemNavigation.prototype.forwardTab = function(bForward) {
-
 		var sId = this._getRootDomRefId() + "-" + (bForward ? "after" : "before");
-
 		document.getElementById(sId).focus();
 	};
 
-	GridContainerItemNavigation.prototype._getRootDomRefId = function(bForward) {
+	GridContainerItemNavigation.prototype._getRootDomRefId = function() {
 		return this.getRootDomRef().getAttribute("id");
 	};
 
@@ -124,7 +91,8 @@ sap.ui.define([
 	 * @protected
 	 */
 	GridContainerItemNavigation.prototype.onsaptabprevious = function(oEvent) {
-		if (!oEvent.target.classList.contains("sapFGridContainerItemWrapper")) {
+		if (!oEvent.target.classList.contains("sapFGridContainerItemWrapper") &&
+			!oEvent.target.parentElement.classList.contains("sapFGridContainerItemWrapper")) {
 			this._lastFocusedElement = oEvent.target;
 			return;
 		}
@@ -134,74 +102,11 @@ sap.ui.define([
 			this.forwardTab(false);
 		}
 
-		// SHIFT + TAB out of the GridContainer should focused the last focused grid cell
+		// SHIFT + TAB out of the GridContainer should focus the last focused grid cell
 		this._lastFocusedElement = null;
 		this.forwardTab(false);
 	};
 
-	/**
-	 * Handles the onmousedown event
-	 * Sets the focus to the item if it occured on an item
-	 *
-	 * @param {jQuery.Event} oEvent the browser event
-	 * @private
-	 */
-	GridContainerItemNavigation.prototype.onmousedown = function(oEvent) {
-
-		this._bIsMouseDown = true;
-		this._oMouseDownTarget = oEvent.target;
-
-		document.addEventListener("mouseup", this._onMouseUp.bind(this), {once:true});
-
-		ItemNavigation.prototype.onmousedown.call(this, oEvent);
-	};
-
-	GridContainerItemNavigation.prototype.onmouseup = function(oEvent) {
-		this._onMouseUp();
-	};
-
-	GridContainerItemNavigation.prototype._onMouseUp = function () {
-		var $listItem = jQuery(this._oMouseDownTarget).closest('.sapFGridContainerItemWrapperNoVisualFocus'),
-			oControl;
-
-		if (!this._bIsMouseDown) {
-			return;
-		}
-
-		if ($listItem.length) {
-			oControl = Element.closestTo($listItem.children()[0]);
-
-			// if the list item visual focus is displayed by the currently focused control,
-			// move the focus to the list item
-			if (oControl && oControl.getFocusDomRef() === document.activeElement) {
-				this._lastFocusedElement = null;
-				$listItem.trigger("focus");
-				doVirtualFocusin(oControl);
-			}
-		}
-
-		this._bIsMouseDown = false;
-		this._oMouseDownTarget = null;
-	};
-
-	/**
-	 * Handles 'dragend' event.
-	 * Used to release the mouse down flag. Needed because the browser will not fire 'mouseup' event after drag and drop.
-	 */
-	GridContainerItemNavigation.prototype.ondragend = function() {
-		this._bIsMouseDown = false;
-		this._oMouseDownTarget = null;
-	};
-
-	/**
-	 * Handles 'drop' event.
-	 * Used to release the mouse down flag. Needed because the browser will not fire 'mouseup' event after drag and drop.
-	 */
-	GridContainerItemNavigation.prototype.ondrop = function() {
-		this._bIsMouseDown = false;
-		this._oMouseDownTarget = null;
-	};
-
 	/**
 	 * Handles the <code>focusin</code> event.
 	 *
@@ -223,24 +128,22 @@ sap.ui.define([
 		// focus is coming in the grid container from Shift + Tab
 		if (oEvent.target === this._getGridInstance().getDomRef("after") && !this.getRootDomRef().contains(oEvent.relatedTarget)) {
 			this._focusPrevious(oEvent);
-			return;
 		}
 
-		var $listItem = jQuery(oEvent.target).closest('.sapFGridContainerItemWrapperNoVisualFocus'),
-			oControl;
+		var oTarget = oEvent.target;
 
-		if ($listItem.length) {
-			oControl = Element.closestTo($listItem.children()[0]);
+		// update the focused index of item navigation when inner elements are focused
+		if (!oTarget.matches(".sapFGridContainerItemWrapper")) {
+			var oFocusableItem = oTarget.closest(".sapFGridContainerItemWrapper");
 
-			if (oControl) {
-				doVirtualFocusin(oControl);
+			if (oFocusableItem) {
+				if (!oFocusableItem.classList.contains(".sapFGCFocusable")) {
+					oFocusableItem = oFocusableItem.firstChild;
+				}
 
-				// if the list item visual focus is displayed by the currently focused control,
-				// move the focus to the list item
-				if (!this._bIsMouseDown && oControl.getFocusDomRef() === oEvent.target) {
-					this._lastFocusedElement = null;
-					$listItem.trigger("focus");
-					return;
+				var iFocusableIndex = this.getItemDomRefs().indexOf(oFocusableItem);
+				if (iFocusableIndex >= 0) {
+					this.setFocusedIndex(iFocusableIndex);
 				}
 			}
 		}
@@ -272,101 +175,20 @@ sap.ui.define([
 		$FocusCandidate.add($TabbableChildren).eq(-1).focus();
 	};
 
-	/**
-	 * Sets the focus to the item with the given index.
-	 *
-	 * @param {int} iIndex Index of the item to focus
-	 * @param {jQuery.Event} oEvent Event that leads to focus change
-	 * @override
-	 * @private
-	 */
-	GridContainerItemNavigation.prototype.focusItem = function(iIndex, oEvent) {
-		var oItemItemNavigation,
-			oInnerControl,
-			oInnerControlFocusDomRef;
-
-		if (iIndex === this.iFocusedIndex && this.aItemDomRefs[this.iFocusedIndex] === document.activeElement) {
-			this.fireEvent(ItemNavigation.Events.FocusAgain, {
-				index: iIndex,
-				event: oEvent
-			});
-			return; // item already focused -> nothing to do
+	GridContainerItemNavigation.prototype.getInnerFocusItem = function (oItem) {
+		if (!oItem.classList.contains("sapFGCFocusable")) {
+			oItem = oItem.firstChild;
 		}
 
-		this.fireEvent(ItemNavigation.Events.BeforeFocus, {
-			index: iIndex,
-			event: oEvent
-		});
-
-		this.setFocusedIndex(iIndex);
-		this.bISetFocus = true;
-
-		if (oEvent && jQuery(this.aItemDomRefs[this.iFocusedIndex]).data("sap.INRoot")) {
-
-			// store event type for nested ItemNavigations
-			oItemItemNavigation = jQuery(this.aItemDomRefs[this.iFocusedIndex]).data("sap.INRoot");
-			oItemItemNavigation._sFocusEvent = oEvent.type;
-		}
-
-		// this is what the GridContainer changes
-		////////////////////////////////////////////
-		if (!oEvent) {
-			this.resetFocusPosition();
-		}
-		if (!this._bIsMouseDown && this.aItemDomRefs.length) {
-			this.aItemDomRefs[this.iFocusedIndex].focus();
-
-			// make the DOM element that has the outline focus to be visible in the view area
-			oInnerControl = Element.closestTo(this.aItemDomRefs[this.iFocusedIndex].firstChild);
-
-			if (oInnerControl) {
-				oInnerControlFocusDomRef = oInnerControl.getFocusDomRef();
-
-				if (oInnerControlFocusDomRef) {
-					this.scrollIntoViewIfNeeded(oInnerControlFocusDomRef);
-				}
-			}
-		}
-		/////////////////////////////////////////////
-
-		this.fireEvent(ItemNavigation.Events.AfterFocus, {
-			index: iIndex,
-			event: oEvent
-		});
+		return oItem;
 	};
 
-	GridContainerItemNavigation.prototype.scrollIntoViewIfNeeded = function(oElementDomRef) {
-		var oParentDomRef = oElementDomRef.parentElement,
-			oContainerRect,
-			oElementRect;
-
-		// find the closest parent container with scroll
-		while (oParentDomRef &&
-			oParentDomRef.offsetWidth >= oParentDomRef.scrollWidth &&
-			oParentDomRef.offsetHeight >= oParentDomRef.scrollHeight) {
-			oParentDomRef = oParentDomRef.parentElement;
+	GridContainerItemNavigation.prototype.getWrapperItem = function (oItem) {
+		if (!oItem.classList.contains("sapFGridContainerItemWrapper")) {
+			oItem = oItem.closest(".sapFGridContainerItemWrapper");
 		}
 
-		if (!oParentDomRef) {
-			return;
-		}
-
-		// we need to check according to its parent
-		oParentDomRef = oParentDomRef.parentElement;
-
-		if (!oParentDomRef) {
-			return;
-		}
-
-		oContainerRect = oParentDomRef.getBoundingClientRect();
-		oElementRect = oElementDomRef.getBoundingClientRect();
-
-		if (oElementRect.top < oContainerRect.top ||
-			oElementRect.bottom > oContainerRect.bottom ||
-			oElementRect.right > oContainerRect.right ||
-			oElementRect.left < oContainerRect.left) {
-			oElementDomRef.scrollIntoView();
-		}
+		return oItem;
 	};
 
 	return GridContainerItemNavigation;