@openui5/sap.ui.dt 1.101.0 → 1.102.2

package/THIRDPARTY.txt

@@ -450,7 +450,7 @@ License: Apache-2.0
 License Text: https://github.com/SAP/openui5/blob/master/LICENSES/Apache-2.0.txt
 Contained in: lib/jsdoc/ui5/plugin.js
 
-Component: SAP Theming Base Content, version: 11.1.38
+Component: SAP Theming Base Content, version: 11.1.39
 Copyright: SAP SE or an SAP affiliate company and Theming Base Content contributors
 License: Apache-2.0
 License Text: https://github.com/SAP/openui5/blob/master/LICENSES/Apache-2.0.txt

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openui5/sap.ui.dt",
-  "version": "1.101.0",
+  "version": "1.102.2",
   "description": "OpenUI5 UI Library sap.ui.dt",
   "author": "SAP SE (https://www.sap.com)",
   "license": "Apache-2.0",
@@ -14,6 +14,6 @@
     "url": "https://github.com/SAP/openui5.git"
   },
   "dependencies": {
-    "@openui5/sap.ui.core": "1.101.0"
+    "@openui5/sap.ui.core": "1.102.2"
   }
 }

package/src/sap/ui/dt/.library

@@ -6,7 +6,7 @@
   <copyright>OpenUI5
  * (c) Copyright 2009-2022 SAP SE or an SAP affiliate company.
  * Licensed under the Apache License, Version 2.0 - see LICENSE.txt.</copyright>
-  <version>1.101.0</version>
+  <version>1.102.2</version>
 
   <documentation>SAP UI library: sap.ui.dt (by SAP, Author)</documentation>
 

package/src/sap/ui/dt/AggregationDesignTimeMetadata.js

@@ -23,7 +23,7 @@ function (
 	 * @extends sap.ui.dt.DesignTimeMetadata
 	 *
 	 * @author SAP SE
-	 * @version 1.101.0
+	 * @version 1.102.2
 	 *
 	 * @constructor
 	 * @private

package/src/sap/ui/dt/AggregationOverlay.js

@@ -35,7 +35,7 @@ function(
 	 * @extends sap.ui.dt.Overlay
 	 *
 	 * @author SAP SE
-	 * @version 1.101.0
+	 * @version 1.102.2
 	 *
 	 * @constructor
 	 * @private

package/src/sap/ui/dt/ControlObserver.js

@@ -22,7 +22,7 @@ function(ManagedObjectObserver) {
 	 * @extends sap.ui.dt.ManagedObjectObserver
 	 *
 	 * @author SAP SE
-	 * @version 1.101.0
+	 * @version 1.102.2
 	 *
 	 * @constructor
 	 * @private

package/src/sap/ui/dt/DOMUtil.js

@@ -21,7 +21,7 @@ sap.ui.define([
 	 *
 	 * @namespace
 	 * @author SAP SE
-	 * @version 1.101.0
+	 * @version 1.102.2
 	 *
 	 * @private
 	 * @since 1.30

package/src/sap/ui/dt/DesignTime.js

@@ -68,7 +68,7 @@ function (
 	 * @extends sap.ui.base.ManagedObject
 	 *
 	 * @author SAP SE
-	 * @version 1.101.0
+	 * @version 1.102.2
 	 *
 	 * @constructor
 	 * @private
@@ -359,7 +359,7 @@ function (
 		var oOverlay = oEvent.getSource();
 		this._oTaskManager.add({
 			type: "applyStyles",
-			callbackFn: oOverlay.applyStyles.bind(oOverlay, mParameters.bForceScrollbarSync),
+			callbackFn: oOverlay.applyStyles.bind(oOverlay, mParameters.bForceScrollbarSync, mParameters.bSkipForceCalculation),
 			overlayId: oOverlay.getId()
 		}, "overlayId");
 	};

package/src/sap/ui/dt/DesignTimeMetadata.js

@@ -46,7 +46,7 @@ function(
 	 * @extends sap.ui.base.ManagedObject
 	 *
 	 * @author SAP SE
-	 * @version 1.101.0
+	 * @version 1.102.2
 	 *
 	 * @constructor
 	 * @private

package/src/sap/ui/dt/ElementDesignTimeMetadata.js

@@ -27,7 +27,7 @@ sap.ui.define([
 	 * @extends sap.ui.dt.DesignTimeMetadata
 	 *
 	 * @author SAP SE
-	 * @version 1.101.0
+	 * @version 1.102.2
 	 *
 	 * @constructor
 	 * @private

package/src/sap/ui/dt/ElementOverlay.js

@@ -55,7 +55,7 @@ sap.ui.define([
 	 * @extends sap.ui.dt.Overlay
 	 *
 	 * @author SAP SE
-	 * @version 1.101.0
+	 * @version 1.102.2
 	 *
 	 * @constructor
 	 * @private
@@ -396,6 +396,7 @@ sap.ui.define([
 				Overlay.prototype._setPosition.call(this, $ScrollContainerOverlayDomRef, mScrollContainerGeometry, this.$());
 				this._handleOverflowScroll(mScrollContainerGeometry, $ScrollContainerOverlayDomRef, this, bForceScrollbarSync);
 				this._setZIndex(mScrollContainerGeometry, $ScrollContainerOverlayDomRef);
+				this._setClipPath($ScrollContainerOverlayDomRef, $ScrollContainerDomRef);
 			} else {
 				$ScrollContainerOverlayDomRef.css("display", "none");
 			}
@@ -826,6 +827,9 @@ sap.ui.define([
 				window.cancelAnimationFrame(this._iApplyStylesRequest);
 			}
 			this._iApplyStylesRequest = window.requestAnimationFrame(function () {
+				//Cache the geometry values
+				this.getGeometry(true);
+				mParameters.bSkipForceCalculation = true;
 				this.fireApplyStylesRequired(mParameters);
 				delete this._iApplyStylesRequest;
 			}.bind(this));
@@ -972,7 +976,7 @@ sap.ui.define([
 		} else if (typeof oDTData.isVisible === "function") {
 			bVisible = oDTData.isVisible(oElement);
 		} else {
-			var oGeometry = this.getGeometry(true);
+			var oGeometry = this.getGeometry();
 			if (oGeometry) {
 				bVisible = oGeometry.visible;
 			} else if (oElement instanceof Control) {

package/src/sap/ui/dt/ElementUtil.js

@@ -31,7 +31,7 @@ sap.ui.define([
 	 *
 	 * @namespace
 	 * @author SAP SE
-	 * @version 1.101.0
+	 * @version 1.102.2
 	 *
 	 * @private
 	 * @since 1.30
@@ -459,16 +459,30 @@ sap.ui.define([
 	};
 
 	ElementUtil._evaluateBinding = function(oElement, aStack) {
-		// var oElement = oElementOverlay.getElement();
 		var sAggregationName;
 		var iIndex;
-		var oParent = oElement.getParent();
-
-		if (oParent) {
-			sAggregationName = oElement.sParentAggregationName;
-			iIndex = ElementUtil.getAggregation(oParent, sAggregationName).indexOf(oElement);
-		} else {
-			iIndex = -1;
+		var oParent;
+		var bBindingFound;
+
+		// If the binding is found on an API parent (with a forwarded aggregation),
+		// the templateId is directly retrieved from it (the stack only has the element itself)
+		var aAPIParentInfos = oElement.aAPIParentInfos;
+		if (aAPIParentInfos && aAPIParentInfos.length > 0) {
+			bBindingFound = aAPIParentInfos.some(function(mParentInfo) {
+				oParent = mParentInfo.parent;
+				sAggregationName = mParentInfo.aggregationName;
+				iIndex = ElementUtil.getAggregation(oParent, sAggregationName).indexOf(oElement);
+				return oParent.getBinding(sAggregationName);
+			});
+		}
+		if (!bBindingFound) {
+			oParent = oElement.getParent();
+			if (oParent) {
+				sAggregationName = oElement.sParentAggregationName;
+				iIndex = ElementUtil.getAggregation(oParent, sAggregationName).indexOf(oElement);
+			} else {
+				iIndex = -1;
+			}
 		}
 
 		aStack.push({

package/src/sap/ui/dt/ManagedObjectObserver.js

@@ -25,7 +25,7 @@ sap.ui.define([
 	 * @class The ManagedObjectObserver observes changes of a ManagedObject and propagates them via events.
 	 * @extends sap.ui.base.ManagedObject
 	 * @author SAP SE
-	 * @version 1.101.0
+	 * @version 1.102.2
 	 * @constructor
 	 * @private
 	 * @since 1.30

package/src/sap/ui/dt/MetadataPropagationUtil.js

@@ -21,7 +21,7 @@ sap.ui.define([
 	 *
 	 * @namespace
 	 * @author SAP SE
-	 * @version 1.101.0
+	 * @version 1.102.2
 	 * @private
 	 * @since 1.54
 	 * @alias sap.ui.dt.MetadataPropagationUtil

package/src/sap/ui/dt/MutationObserver.js

@@ -30,7 +30,7 @@ sap.ui.define([
 	 * @class The MutationObserver observes changes of a ManagedObject and propagates them via events.
 	 * @extends sap.ui.base.ManagedObject
 	 * @author SAP SE
-	 * @version 1.101.0
+	 * @version 1.102.2
 	 * @constructor
 	 * @private
 	 * @since 1.30

package/src/sap/ui/dt/Overlay.js

@@ -44,7 +44,7 @@ sap.ui.define([
 	 * @extends sap.ui.core.Element
 	 *
 	 * @author SAP SE
-	 * @version 1.101.0
+	 * @version 1.102.2
 	 *
 	 * @constructor
 	 * @private
@@ -513,7 +513,7 @@ sap.ui.define([
 	/**
 	 * FIXME: backwards compatibility, remove when possible
 	 * Returns an instance of the Element, which is associated with this Overlay
-	 * @return {sap.ui.Element} associated Element
+	 * @return {sap.ui.core.Element} associated Element
 	 * @public
 	 * @deprecated
 	 */
@@ -523,7 +523,7 @@ sap.ui.define([
 
 	/**
 	 * Returns an instance of the Element, which is associated with this Overlay
-	 * @return {sap.ui.Element} associated Element
+	 * @return {sap.ui.core.Element} associated Element
 	 * @public
 	 */
 	Overlay.prototype.getElement = function() {
@@ -580,20 +580,25 @@ sap.ui.define([
 	 * The calculation is based on original associated DOM state and parent overlays
 	 * This method also calls "applyStyles" method for every child Overlay of this Overlay (cascade)
 	 * @param {boolean} bForceScrollbarSync - `true` to force a scrollbars synchronisation if there are any
+	 * @param {boolean} bSkipForceCalculation - `true` to skip the geometry calculation (geometry was already cached)
 	 * @returns {Promise} Resolves as soon as <code>applyStyles</code> is done
 	 * @public
 	 */
-	Overlay.prototype.applyStyles = function(bForceScrollbarSync) {
+	Overlay.prototype.applyStyles = function(bForceScrollbarSync, bSkipForceCalculation) {
+		var oGeometry;
 		this.fireBeforeGeometryChanged();
 
 		if (!this.isRendered() || this._bIsBeingDestroyed || this.getShouldBeDestroyed()) {
 			return Promise.resolve();
 		}
 
+		// If not done before, re-calculate the Geometry to cache the values for the isVisible() check
+		if (this.getVisible()) {
+			oGeometry = this.getGeometry(!bSkipForceCalculation);
+		}
+
 		var oGeometryChangedPromise = Promise.resolve();
 		if (this.isVisible()) {
-			var oGeometry = this.getGeometry(true);
-
 			if (oGeometry && oGeometry.visible) {
 				this._setSize(this.$(), oGeometry);
 				var $RenderingParent = this._getRenderingParent();
@@ -709,6 +714,16 @@ sap.ui.define([
 		$Target.css("transform", "translate(" + mPosition.left + "px, " + mPosition.top + "px)");
 	};
 
+	/**
+	 * Sets clip-path of specified DOM element
+	 * @param {jQuery} $Target - DOM element which will receive new clip-path property
+	 * @param {jQuery} $Source - DOM element from which the clip-path property will be copied
+	 */
+	Overlay.prototype._setClipPath = function($Target, $Source) {
+		var sClipPath = $Source.css("clip-path");
+		$Target.css("clip-path", sClipPath);
+	};
+
 	Overlay.prototype.attachBrowserEvent = function(sEventType, fnHandler, oListener) {
 		if (sEventType && (typeof (sEventType) === "string")) { // do nothing if the first parameter is empty or not a string
 			if (typeof fnHandler === "function") { // also do nothing if the second parameter is not a function
@@ -773,28 +788,33 @@ sap.ui.define([
 	};
 
 	/**
-	 * Cleans up when scrolling is no longer needed in the overlay
-	 * @param {jQuery} $TargetDomRef - DOM reference to the element where dummy container is located
+	 * Cleans up when scrolling is no longer needed in the overlay.
+	 * @param {jQuery} $TargetDomRef - DOM reference to the element where dummy container is located.
 	 * @param {sap.ui.dt.ElementOverlay} [oTargetOverlay] - Overlay which holds scrollbar padding via CSS classes. In case of root overlay, the target is undefined.
-	 *
+	 * @param {Element} oOriginalDomRef - DomRef for the original element.
 	 * @private
 	 */
-	Overlay.prototype._deleteDummyContainer = function($TargetDomRef, oTargetOverlay) {
+	Overlay.prototype._deleteDummyContainer = function($TargetDomRef, oTargetOverlay, oOriginalDomRef) {
 		var $DummyScrollContainer = $TargetDomRef.find(">.sapUiDtDummyScrollContainer");
 		if ($DummyScrollContainer.length) {
+			var oScrollbarSynchronizer = this._oScrollbarSynchronizers.get($TargetDomRef.get(0));
 			$DummyScrollContainer.remove();
-			this._oScrollbarSynchronizers.get($TargetDomRef.get(0)).destroy();
-			this._oScrollbarSynchronizers.delete($TargetDomRef.get(0));
-			if (
-				oTargetOverlay._oScrollbarSynchronizers.size === 0
-				&& !oTargetOverlay.getChildren().some(function(oAggregationOverlay) {
-					return oAggregationOverlay._oScrollbarSynchronizers.size > 0;
-				})
-			) {
-				oTargetOverlay.removeStyleClass("sapUiDtOverlayWithScrollBar");
-				oTargetOverlay.removeStyleClass("sapUiDtOverlayWithScrollBarVertical");
-				oTargetOverlay.removeStyleClass("sapUiDtOverlayWithScrollBarHorizontal");
-			}
+			// Ensure that the element positions are synced before destroying
+			oScrollbarSynchronizer.attachEventOnce("synced", function() {
+				oScrollbarSynchronizer.destroy();
+				this._oScrollbarSynchronizers.delete($TargetDomRef.get(0));
+				if (
+					oTargetOverlay._oScrollbarSynchronizers.size === 0
+					&& !oTargetOverlay.getChildren().some(function(oAggregationOverlay) {
+						return oAggregationOverlay._oScrollbarSynchronizers.size > 0;
+					})
+				) {
+					oTargetOverlay.removeStyleClass("sapUiDtOverlayWithScrollBar");
+					oTargetOverlay.removeStyleClass("sapUiDtOverlayWithScrollBarVertical");
+					oTargetOverlay.removeStyleClass("sapUiDtOverlayWithScrollBarHorizontal");
+				}
+			}.bind(this));
+			oScrollbarSynchronizer.sync(oOriginalDomRef, true);
 		}
 	};
 
@@ -864,7 +884,7 @@ sap.ui.define([
 				oScrollbarSynchronizer.sync(oOriginalDomRef, true);
 			}
 		} else {
-			this._deleteDummyContainer($TargetDomRef, oTargetOverlay);
+			this._deleteDummyContainer($TargetDomRef, oTargetOverlay, oOriginalDomRef);
 		}
 	};
 

package/src/sap/ui/dt/OverlayRegistry.js

@@ -23,7 +23,7 @@ function(
 	 *
 	 * @namespace
 	 * @author SAP SE
-	 * @version 1.101.0
+	 * @version 1.102.2
 	 *
 	 * @private
 	 * @since 1.30

package/src/sap/ui/dt/OverlayUtil.js

@@ -22,7 +22,7 @@ function(
 	 *
 	 * @namespace
 	 * @author SAP SE
-	 * @version 1.101.0
+	 * @version 1.102.2
 	 * @private
 	 * @since 1.30
 	 * @alias sap.ui.dt.OverlayUtil

package/src/sap/ui/dt/Plugin.js

@@ -26,7 +26,7 @@ function(
 	 * @extends sap.ui.base.ManagedObject
 	 *
 	 * @author SAP SE
-	 * @version 1.101.0
+	 * @version 1.102.2
 	 *
 	 * @constructor
 	 * @private

package/src/sap/ui/dt/ScrollbarSynchronizer.js

@@ -24,7 +24,7 @@ function(
 	 * @extends sap.ui.base.ManagedObject
 	 *
 	 * @author SAP SE
-	 * @version 1.101.0
+	 * @version 1.102.2
 	 *
 	 * @constructor
 	 * @private
@@ -142,6 +142,11 @@ function(
 		this.sync(oEvent.target);
 	};
 
+	/**
+	 * Triggers the synchronization between two scroll target elements.
+	 * @param {Element} oSourceDomNode Element that needs to be synchronized with its pair.
+	 * @param {boolean} bForce Executes the synchronization even if the scroll values in both elements are the same.
+	 */
 	ScrollbarSynchronizer.prototype.sync = function (oSourceDomNode, bForce) {
 		if (
 			bForce

package/src/sap/ui/dt/SelectionManager.js

@@ -34,7 +34,7 @@ function (
 	 * @extends sap.ui.base.ManagedObject
 	 *
 	 * @author SAP SE
-	 * @version 1.101.0
+	 * @version 1.102.2
 	 *
 	 * @constructor
 	 * @private

package/src/sap/ui/dt/SelectionMode.js

@@ -16,7 +16,7 @@ sap.ui.define(function() {
 	 * @namespace
 	 * @name sap.ui.dt.SelectionMode
 	 * @author SAP SE
-	 * @version 1.101.0
+	 * @version 1.102.2
 	 * @experimental This class is experimental and provides only limited functionality. Also the API might be changed in future.
 	 * @private
 	 */

package/src/sap/ui/dt/TaskManager.js

@@ -21,7 +21,7 @@ function(
 	 * The TaskManager keeps list of task and allows to manage them via simple API.
 	 *
 	 * @author SAP SE
-	 * @version 1.101.0
+	 * @version 1.102.2
 	 *
 	 * @constructor
 	 * @private

package/src/sap/ui/dt/TaskRunner.js

@@ -24,7 +24,7 @@ function(
 	 * TaskRunner run tasks defined in sap.ui.dt.TaskManager.
 	 *
 	 * @author SAP SE
-	 * @version 1.101.0
+	 * @version 1.102.2
 	 *
 	 * @constructor
 	 * @private

package/src/sap/ui/dt/Util.js

@@ -22,7 +22,7 @@ sap.ui.define([
 	 *
 	 * @namespace
 	 * @author SAP SE
-	 * @version 1.101.0
+	 * @version 1.102.2
 	 *
 	 * @private
 	 * @since 1.54

package/src/sap/ui/dt/enablement/ElementEnablementTest.js

@@ -37,7 +37,7 @@ sap.ui.define([
 	 * @extends sap.ui.dt.test.Test
 	 *
 	 * @author SAP SE
-	 * @version 1.101.0
+	 * @version 1.102.2
 	 *
 	 * @constructor
 	 * @private

package/src/sap/ui/dt/enablement/Test.js

@@ -22,7 +22,7 @@ sap.ui.define([
 	 * @extends sap.ui.base.ManagedObject
 	 *
 	 * @author SAP SE
-	 * @version 1.101.0
+	 * @version 1.102.2
 	 *
 	 * @constructor
 	 * @private

package/src/sap/ui/dt/enablement/Util.js

@@ -22,7 +22,7 @@ sap.ui.define([
 	 * @namespace
 	 *
 	 * @author SAP SE
-	 * @version 1.101.0
+	 * @version 1.102.2
 	 *
 	 * @private
 	 * @static

package/src/sap/ui/dt/enablement/report/LibraryReport.js

@@ -25,7 +25,7 @@ sap.ui.define([
 	 * @extends sap.ui.dt.enablement.Test
 	 *
 	 * @author SAP SE
-	 * @version 1.101.0
+	 * @version 1.102.2
 	 *
 	 * @constructor
 	 * @private

package/src/sap/ui/dt/enablement/report/QUnitReport.js

@@ -24,7 +24,7 @@ sap.ui.define([
 	 * @extends sap.ui.base.ManagedObject
 	 *
 	 * @author SAP SE
-	 * @version 1.101.0
+	 * @version 1.102.2
 	 *
 	 * @constructor
 	 * @private

package/src/sap/ui/dt/enablement/report/Statistic.js

@@ -32,7 +32,7 @@ sap.ui.define([
 	 * @extends sap.ui.core.Control
 	 *
 	 * @author SAP SE
-	 * @version 1.101.0
+	 * @version 1.102.2
 	 *
 	 * @constructor
 	 * @private

package/src/sap/ui/dt/enablement/report/StatisticRenderer.js

@@ -10,7 +10,7 @@ sap.ui.define(function() {
 
 	/**
 	 * @author SAP SE
-	 * @version 1.101.0
+	 * @version 1.102.2
 	 * @namespace
 	 */
 	var StatisticRenderer = {};

package/src/sap/ui/dt/enablement/report/Table.js

@@ -42,7 +42,7 @@ sap.ui.define([
 	 * @extends sap.ui.core.Control
 	 *
 	 * @author SAP SE
-	 * @version 1.101.0
+	 * @version 1.102.2
 	 *
 	 * @constructor
 	 * @private

package/src/sap/ui/dt/enablement/report/TableRenderer.js

@@ -10,7 +10,7 @@ sap.ui.define(function() {
 
 	/**
 	 * @author SAP SE
-	 * @version 1.101.0
+	 * @version 1.102.2
 	 * @namespace
 	 */
 	var TableRenderer = {};

package/src/sap/ui/dt/library.js

@@ -23,14 +23,14 @@ function (
 	 * @namespace
 	 * @alias sap.ui.dt
 	 * @author SAP SE
-	 * @version 1.101.0
+	 * @version 1.102.2
 	 * @since 1.30
 	 * @experimental This class is experimental and provides only limited functionality. Also the API might be changed in future.
 	 * @private
 	 */
 	var thisLib = sap.ui.getCore().initLibrary({
 		name: "sap.ui.dt",
-		version: "1.101.0",
+		version: "1.102.2",
 		dependencies: ["sap.ui.core"],
 		types: [
 			"sap.ui.dt.SelectionMode"

package/src/sap/ui/dt/plugin/ContextMenu.js

@@ -34,7 +34,7 @@ sap.ui.define([
 	 * @class The ContextMenu registers event handler to open the context menu. Menu entries can dynamically be added
 	 * @extends sap.ui.dt.Plugin
 	 * @author SAP SE
-	 * @version 1.101.0
+	 * @version 1.102.2
 	 * @constructor
 	 * @private
 	 * @since 1.53

package/src/sap/ui/dt/plugin/ControlDragDrop.js

@@ -26,7 +26,7 @@ sap.ui.define([
 	 * @class The ControlDragDrop enables D&D functionality for the overlays based on aggregation types
 	 * @extends sap.ui.dt.plugin.DragDrop
 	 * @author SAP SE
-	 * @version 1.101.0
+	 * @version 1.102.2
 	 * @constructor
 	 * @private
 	 * @since 1.30

package/src/sap/ui/dt/plugin/CutPaste.js

@@ -33,7 +33,7 @@ sap.ui.define([
 	 * @class The CutPaste enables Cut & Paste functionality for the overlays based on aggregation types
 	 * @extends sap.ui.dt.Plugin
 	 * @author SAP SE
-	 * @version 1.101.0
+	 * @version 1.102.2
 	 * @constructor
 	 * @private
 	 * @since 1.34

package/src/sap/ui/dt/plugin/DragDrop.js

@@ -36,7 +36,7 @@ sap.ui.define([
 	 * @extends sap.ui.dt.Plugin
 	 *
 	 * @author SAP SE
-	 * @version 1.101.0
+	 * @version 1.102.2
 	 *
 	 * @constructor
 	 * @private

package/src/sap/ui/dt/plugin/ElementMover.js

@@ -30,7 +30,7 @@ sap.ui.define([
 	 * @class The ElementMover enables movement of UI5 elements based on aggregation types, which can be used by drag and
 	 *        drop or cut and paste behavior.
 	 * @author SAP SE
-	 * @version 1.101.0
+	 * @version 1.102.2
 	 * @constructor
 	 * @private
 	 * @since 1.34

package/src/sap/ui/dt/plugin/MouseSelection.js

@@ -22,7 +22,7 @@ function(Plugin) {
 	 * @extends sap.ui.dt.Plugin
 	 *
 	 * @author SAP SE
-	 * @version 1.101.0
+	 * @version 1.102.2
 	 *
 	 * @constructor
 	 * @private

package/src/sap/ui/dt/plugin/TabHandling.js

@@ -27,7 +27,7 @@ sap.ui.define([
 	 * @class The TabHandling plugin adjusts the tabindex for the elements.
 	 * @extends sap.ui.dt.Plugin
 	 * @author SAP SE
-	 * @version 1.101.0
+	 * @version 1.102.2
 	 * @constructor
 	 * @private
 	 * @since 1.38

package/src/sap/ui/dt/plugin/ToolHooks.js

@@ -16,7 +16,7 @@ sap.ui.define([
 	 *
 	 * @extends sap.ui.dt.Plugin
 	 * @author SAP SE
-	 * @version 1.101.0
+	 * @version 1.102.2
 	 * @constructor
 	 * @private
 	 * @since 1.61

package/src/sap/ui/dt/themes/base/ContextMenu.less

@@ -1,124 +1,117 @@
 /******************************************************************
 	Style of the DT Contextmenu - base Theme
 *******************************************************************/
-@_sap_ui_dt_ContextMenu_OpenFocusColor: @sapUiContentFocusColor;
-@_sap_ui_dt_ContextMenu_MnuItemColor: @sapUiButtonIconColor;
-@_sap_ui_dt_ContextMenu_HoverBGColor: @sapUiButtonLiteHoverBackground;
+@_sap_ui_dt_ContextMenu_HoverBGColor: @sapUiButtonLiteHoverBackground; //rgba(199,95,20,0.5)
+@_sap_ui_dt_ContextMenu_OpenMenuBGColor: @sapUiListSelectionBackgroundColor; //#8fb5ff
 
 .sapUiDtContextMenu {
-	.sapUiMnuLst{
+	&.sapUiMnu {
+		min-width: 4.25rem; //68px
+	}
+
+	.sapUiMnuLst {
 		padding: 0.1875rem;
+
 		.sapUiMnuItm {
-			color: @_sap_ui_dt_ContextMenu_MnuItemColor;
-			border: 0.0625rem dotted transparent;
-			border-radius: .25rem;
 			.sapUiMnuItmIco {
-				color: @_sap_ui_dt_ContextMenu_MnuItemColor;
-				padding-left: 0.375rem;
-				padding-right: 0.375rem;
+				padding: 0 0.375rem;
+
 				.sapUiIcon {
-					height: 1.875rem;
 					min-width: 2.0rem;
-					line-height: 1.875rem;
-					vertical-align: top;
 					border: 0.0625rem dotted transparent;
-					border-radius: .25rem;
 				}
 			}
+
 			&.sapUiMnuItmDsbl {
 				opacity: 0.5;
 			}
-			.sapUiMnuItmSbMnu > div:after,
-			.sapUiMnuItm.sapUiMnuItmHov .sapUiMnuItmSbMnu > div:after {
-				color: @_sap_ui_dt_ContextMenu_MnuItemColor;
-			}
 		}
 	}
+
 	&.sapUiSubmenu,
 	&:not(.sapUiDtContextMiniMenu) {
 		.sapUiMnuItm {
 			&.sapUiMnuItmHov {
-				background-color: @_sap_ui_dt_ContextMenu_HoverBGColor;
-				color: @_sap_ui_dt_ContextMenu_MnuItemColor;
-			}
-			&:focus {
-				outline: none;
-				border: 0.0625rem dotted!important;
-			}
-			&.sapUiMnuItmSubMnuOpen {
-				background-color: transparent;
-				border-bottom: 1px solid transparent!important;
-				&.sapUiMnuItm:focus:not(hover) {
-					border: 0.0625rem dotted @_sap_ui_dt_ContextMenu_OpenFocusColor!important;
-				}
-				&.sapUiMnuItm:focus:hover {
-					border: 0.0625rem solid @_sap_ui_dt_ContextMenu_OpenFocusColor!important;
+				&:not(.sapUiMnuItmDsbl) {
+					background-color: @_sap_ui_dt_ContextMenu_HoverBGColor;
 				}
 			}
 		}
 	}
 }
 
-.sapUiSizeCozy.sapUiMnu.sapUiMnuCozySupport {
-	&.sapUiDtContextMenu {
-		.sapUiMnuItmIco .sapUiIcon {
-			height: 2.75rem;
-		}
-	}
-	&.sapUiDtContextMiniMenu {
-		.sapUiMnuItmIco {
-			width: 3rem;
-			.sapUiIcon {
-				height: 42px;
-				line-height: 42px!important;
-				min-width: 48px;
-			}
-		}
-	}
-}
-
 .sapUiDtContextMiniMenu {
 	&:not(.sapUiSubmenu) {
 		.sapUiMnuItm {
-			border: none;
 			display: inline-block;
+
 			&:focus {
-				border: none;
 				outline: none;
+
 				.sapUiIcon {
 					border: 0.0625rem dotted;
 				}
 			}
+
 			&.sapUiMnuItmHov {
 				background-color: transparent;
+
 				.sapUiIcon {
 					background-color: @_sap_ui_dt_ContextMenu_HoverBGColor;
-					border: 0.0625rem solid;
 				}
 			}
+
 			&.sapUiMnuItmSubMnuOpen {
 				background-color: transparent;
-				border-bottom: 1px solid transparent!important;
-				&.sapUiMnuItmHov:hover {
-					background-color: transparent;
-				}
-				&.sapUiMnuItm:focus {
+
+				&:not(.sapUiMnuItmHov) {
 					.sapUiIcon {
-						border-color: @_sap_ui_dt_ContextMenu_OpenFocusColor;
+						background-color: @_sap_ui_dt_ContextMenu_OpenMenuBGColor;
 					}
 				}
 			}
+
 			.sapUiMnuItmTxt {
 				display: none !important;
 			}
+
 			.sapUiMnuItmSbMnu {
 				right: -1rem;
-				top: 0.125rem;
-				padding-right: 0.375rem;
+				padding-right: 0.125rem;
 			}
+
 			.sapUiMnuItmR {
 				display: none !important;
 			}
 		}
 	}
 }
+
+.sapUiSizeCozy.sapUiMnu.sapUiMnuCozySupport {
+	&.sapUiDtContextMiniMenu {
+		.sapUiMnuItmIco {
+			width: 3rem;
+
+			.sapUiIcon {
+				height: 2.625rem;
+				line-height: 2.625rem !important;
+				min-width: 3rem;
+			}
+		}
+	}
+}
+
+.sapUiSizeCompact .sapUiMnu.sapUiDtContextMenu {
+	.sapUiMnuItm {
+		height: 2.25rem;
+		padding-right: 0.25rem;
+
+		.sapUiMnuItmIco {
+			padding: 0 0.25rem;
+		}
+
+		.sapUiMnuItmSbMnu {
+			line-height: 2.25rem;
+		}
+	}
+}

package/src/sap/ui/dt/themes/base/Overlay.less

@@ -1,11 +1,13 @@
 /******************************************************************
 	Style of the DT Overlays - base Theme
 *******************************************************************/
-@_sap_ui_dt_Overlay_FocusColor : @sapUiContentFocusColor; //#000
-@_sap_ui_dt_Overlay_TargetZoneColor : @sapUiSelected; //#2e9cea
-@_sap_ui_dt_Overlay_SelectionColor : lighten(@sapUiBlue,10); //#3333ff
-@_sap_ui_dt_Overlay_CuttedColor : @sapUiWhite; //#fff
-@_sap_ui_dt_Overlay_HighlightColor : @sapUiOrange; //#f27020
+@_sap_ui_dt_Overlay_FocusColor: @sapUiContentFocusColor; //#000
+@_sap_ui_dt_Overlay_TargetZoneColor: @sapUiSelected; //#8fb5ff
+@_sap_ui_dt_Overlay_SelectionColor: lighten(@sapUiChart1, 20); //#6fa0e2
+@_sap_ui_dt_Overlay_CuttedColor: @sapUiNeutralBG; // #fff
+@_sap_ui_dt_Overlay_CuttedBorder: @sapUiSelected; //#8fb5ff
+@_sap_ui_dt_Overlay_HighlightColor: @sapUiShellActiveBackground; //#ec8b46
+@_sap_ui_dt_Overlay_ActiveBG: fade(@sapUiSelected, 10%); //rgba(143, 181, 255, 0.1);
 
 #overlay-container {
 	position: absolute;
@@ -54,6 +56,16 @@
 
 .sapUiDtOverlayDropZone {
 	z-index: 9999999 !important;
+
+	> .sapUiDtOverlayChildren {
+		> .sapUiDtOverlayMovable {
+			background: @_sap_ui_dt_Overlay_ActiveBG;
+			// no "border"
+			&:after {
+				content: none;
+			}
+		}
+	}
 }
 
 .sapUiDtOverlayTargetZone {
@@ -67,19 +79,42 @@
 .sapUiDtOverlaySelected {
 	&:after {
 		content: " ";
-		outline: 0.125rem dashed @_sap_ui_dt_Overlay_SelectionColor; //2px
+		outline: 0.125rem solid @_sap_ui_dt_Overlay_SelectionColor; //2px
 		outline-offset: -0.125rem; //2px
+		border: none;
+	}
+
+	&.sapUiDtOverlayWithScrollBar:after {
+		bottom: 0;
+		right: 0;
+		top: 0;
+		left: 0;
+		width: initial;
+		height: initial;
+	}
+
+	&.sapUiDtOverlayFocusable {
+		&:focus {
+			&:before {
+				top: 0.125rem; //2px
+				left: 0.125rem; //2px
+				bottom: 0.125rem; //2px
+				right: 0.125rem; //2px
+				width: auto;
+				height: auto;
+			}
+		}
 	}
 }
 
 .sapUiDtOverlayHighlighted:not(.sapUiDtOverlaySelected) {
 	&:after {
-	   content: " ";
-	   outline: 0.0625rem solid @_sap_ui_dt_Overlay_HighlightColor; //1px
-	   outline-offset: -0.0625rem; //1px
-	   box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.3);
+		content: " ";
+		outline: 0.0625rem solid @_sap_ui_dt_Overlay_HighlightColor; //1px
+		outline-offset: -0.0625rem; //1px
+		box-shadow: 0 0.1875rem 0.375rem 0 rgba(0, 0, 0, 0.3);
 	}
- }
+}
 
 .sapUiDtOverlayMovable {
 	cursor: move;
@@ -88,6 +123,12 @@
 .sapUiDtOverlayCutted {
 	background-color: @_sap_ui_dt_Overlay_CuttedColor !important;
 	opacity: 0.5;
+
+	&:after {
+		content: " ";
+		outline: 0.063rem solid @_sap_ui_dt_Overlay_CuttedBorder; //1px
+		outline-offset: -0.125rem; //2px
+	}
 }
 
 .sapUiDtDragGhostWrapper {
@@ -103,13 +144,15 @@
 
 /* fix for chrome */
 .sap-desktop[data-sap-ui-browser^="cr"] {
-
 	.sapUiDtDragGhostWrapper {
-		padding-left : -500px;
+		padding-left: -500px;
 		padding-bottom: 500px;
 		bottom: -1000px;
 	}
+}
 
+.sapUiDtDragGhost {
+	background: @_sap_ui_dt_Overlay_ActiveBG;
 }
 
 .sapUiDtClonedDom {

package/src/sap/ui/dt/themes/sap_hcb/ContextMenu.less

@@ -0,0 +1,31 @@
+/******************************************************************
+	Style of the DT Contextmenu - sap_hcb Theme
+*******************************************************************/
+@_sap_ui_dt_ContextMenu_OpenSubMenuBG: @sapUiSelected; //#0f5d94
+@_sap_ui_dt_ContextMenu_OpenSubMenuBorder: @sapUiNeutralBG; //000
+
+.sapUiDtContextMenu {
+	.sapUiMnuLst {
+		.sapUiMnuItm {
+			border-top: 0.0625rem solid transparent; //1px
+			&.sapUiMnuItmDsbl {
+				opacity: 1;
+			}
+		}
+	}
+}
+
+
+.sapUiDtContextMiniMenu {
+	.sapUiMnuItm {
+		border: none;
+
+		&.sapUiMnuItmSubMnuOpen {
+			background-color: @_sap_ui_dt_ContextMenu_OpenSubMenuBorder;
+
+			.sapUiIcon {
+				background-color: @_sap_ui_dt_ContextMenu_OpenSubMenuBG;
+			}
+		}
+	}
+}

package/src/sap/ui/dt/themes/sap_hcb/Overlay.less

@@ -1,5 +1,8 @@
-@_sap_ui_dt_Overlay_FocusColor : rgba(255, 255, 255, 0.8);
-@_sap_ui_dt_Overlay_TargetZoneColor : lime;
-@_sap_ui_dt_Overlay_SelectionColor : white;
-@_sap_ui_dt_Overlay_CuttedColor : #555;
-@_sap_ui_dt_Overlay_HighlightColor : orange;
+/******************************************************************
+	Style of the DT Overlays - sap_hcb Theme
+*******************************************************************/
+@_sap_ui_dt_Overlay_FocusColor: fade(@sapUiNeutralBorder, 80%); //rgba(255, 255, 255, 0.8)
+@_sap_ui_dt_Overlay_TargetZoneColor: @sapUiContentHelpColor; //#03b803
+@_sap_ui_dt_Overlay_SelectionColor: @sapUiNeutralElement; //#ffffff
+@_sap_ui_dt_Overlay_CuttedColor: @sapUiHcReducedAltForeground; // #999
+@_sap_ui_dt_Overlay_HighlightColor: @sapUiWarningBorder; // #ffab1d

package/src/sap/ui/dt/themes/sap_hcb/library.source.less

@@ -7,3 +7,4 @@
 @import "../base/library.source.less";
 @import "../../../../../sap/ui/core/themes/sap_hcb/global.less";
 @import "Overlay.less";
+@import "ContextMenu.less";

package/src/sap/ui/dt/util/ZIndexManager.js

@@ -30,7 +30,7 @@ sap.ui.define([
 	 *
 	 * @namespace
 	 * @author SAP SE
-	 * @version 1.101.0
+	 * @version 1.102.2
 	 *
 	 * @private
 	 * @since 1.64