@refinitiv-ui/efx-grid 6.0.91 → 6.0.93

package/lib/tr-grid-util/es6/DateTime.js

@@ -5,67 +5,67 @@ import ElfUtil from './ElfUtil.js';
 * @public
 * @constant
 */
-var INVALID_DATE = new Date(NaN); // eslint-disable-line
+const INVALID_DATE = new Date(NaN); // eslint-disable-line
 /** JavaScript date starts at Jan 01 1970, while Excel date starts at Jan 01 1900 (before JavaScript date). This value is the difference in days between the two values.
 * @type {number}
 * @private
 * @constant
 */
-var _DIFF_DAYS = 25567 + 2; // Start 1 on 1 Jan 1900 + 1 for error on 29 Feb 1900 (Not existing date but existing in window)
+const _DIFF_DAYS = 25567 + 2; // Start 1 on 1 Jan 1900 + 1 for error on 29 Feb 1900 (Not existing date but existing in window)
 /** Starting date (1 Jan 1900) of Excel date in milliseconds counting from JavaScript date
 * @type {number}
 * @private
 * @constant
 */
-var _1_JAN_1900 = Date.UTC(1900, 0, 1); // -2208988800000
+const _1_JAN_1900 = Date.UTC(1900, 0, 1); // -2208988800000
 /** @type {number}
 * @private
 * @constant
 */
-var _1_MAR_1900 = Date.UTC(1900, 2, 1); // -2203891200000
+const _1_MAR_1900 = Date.UTC(1900, 2, 1); // -2203891200000
 /** @type {number}
 * @public
 * @constant
 */
-var MILLISECONDS_IN_DAY = 24 * 60 * 60 * 1000; // 86400000
+const MILLISECONDS_IN_DAY = 24 * 60 * 60 * 1000; // 86400000
 /** 86400 seconds in a day
 * @type {number}
 * @public
 * @constant
 */
-var SECONDS_IN_DAY = 24 * 60 * 60; // eslint-disable-line
+const SECONDS_IN_DAY = 24 * 60 * 60; // eslint-disable-line
 /** 3600 seconds in a day
 * @type {number}
 * @public
 * @constant
 */
-var SECONDS_IN_HOUR = 60 * 60; // eslint-disable-line
+const SECONDS_IN_HOUR = 60 * 60; // eslint-disable-line
 /** @type {number}
 * @public
 * @constant
 */
-var SECONDS_IN_MINUTE = 60; // eslint-disable-line
+const SECONDS_IN_MINUTE = 60; // eslint-disable-line
 
 /** @type {Array.<string>}
 * @public
 * @constant
 */
-var SHORT_DAYS = ["sun", "mon", "tue", "wed", "thu", "fri", "sat"];
+const SHORT_DAYS = ["sun", "mon", "tue", "wed", "thu", "fri", "sat"];
 /** @type {Array.<string>}
 * @public
 * @constant
 */
-var FULL_DAYS = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
+const FULL_DAYS = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
 /** @type {Array.<string>}
 * @public
 * @constant
 */
-var SHORT_MONTHS = ["jan", "feb", "mar", "apr", "may", "jun", "jul", "aug", "sep", "oct", "nov", "dec"];
+const SHORT_MONTHS = ["jan", "feb", "mar", "apr", "may", "jun", "jul", "aug", "sep", "oct", "nov", "dec"];
 /** @type {Array.<string>}
 * @public
 * @constant
 */
-var FULL_MONTHS = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
+const FULL_MONTHS = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
 
 /** Add zero prefix to the number. WARNING: Does not support negative number
 * @ignore
@@ -73,7 +73,7 @@ var FULL_MONTHS = ["January", "February", "March", "April", "May", "June", "July
 * @param {number} num
 * @return {string}
 */
-var prefixZero = function(num) {
+let prefixZero = function(num) {
 	return (num > 9) ? "" + num : "0" + num;
 };
 
@@ -83,7 +83,7 @@ var prefixZero = function(num) {
 * @param {number} num
 * @return {string}
 */
-var prefixDoubleZero = function(num) {
+let prefixDoubleZero = function(num) {
 	if (num > 99) {
 		return "" + num;
 	} else if (num > 9) {
@@ -97,7 +97,7 @@ var prefixDoubleZero = function(num) {
 * @ignore
 * @description Map of date pattern convertion
 */
-var Parsers = {
+let Parsers = {
 	// Interday time
 	"D": function(date, locale) { return "" + date.getDate(); },
 	"DD": function(date, locale) { return prefixZero(date.getDate()); },
@@ -107,17 +107,17 @@ var Parsers = {
 	"MM": function(date, locale) { return prefixZero(date.getMonth() + 1); },
 	"MMM": function(date, locale) { return locale[ SHORT_MONTHS[date.getMonth()] ]; },
 	"M_": function(date, locale) { return locale[ FULL_MONTHS[date.getMonth()] ]; },
-	"YY": function(date, locale) { return ("" + date.getFullYear()).substr(-2); },
+	"YY": function(date, locale) { return ("" + date.getFullYear()).slice(-2); },
 	"Y_": function(date, locale) { return "" + date.getFullYear(); },
 	// Intraday time
 	"H": function(date, locale) { return "" + date.getHours(); },
 	"H_": function(date, locale) { return prefixZero(date.getHours()); },
 	"h": function(date, locale) {
-		var temp = date.getHours() % 12;
+		let temp = date.getHours() % 12;
 		return (temp === 0) ? "12" : "" + temp;
 	},
 	"h_": function(date, locale) {
-		var temp = date.getHours() % 12;
+		let temp = date.getHours() % 12;
 		temp = (temp === 0) ? 12 : temp;
 		return prefixZero(temp);
 	},
@@ -135,7 +135,7 @@ var Parsers = {
 
 /** @namespace
 */
-var DateTime = {};
+let DateTime = {};
 
 /**
 * @type {string}
@@ -173,7 +173,7 @@ DateTime.setDateTimePattern = function(format) {
 * @param {string=} lang
 */
 DateTime.setLocale = function(lang) {
-	var mainLang = ElfUtil.toLangString(lang);
+	let mainLang = ElfUtil.toLangString(lang);
 	DateTime._localeSetting = translation[mainLang] ? mainLang : "en";
 };
 
@@ -215,9 +215,9 @@ DateTime.setLocale = function(lang) {
 * ---------------------------------------------------------------------
 */
 DateTime.format = function(dateTimeNumber, dateTimeFormat, timezone) {
-	var date = null;
-	var dtTxt = ""; // new Date() is on par with Date.parse in term of performance.
-	var localTime = !!(timezone && timezone.toUpperCase() === "LOCAL");
+	let date = null;
+	let dtTxt = ""; // new Date() is on par with Date.parse in term of performance.
+	let localTime = !!(timezone && timezone.toUpperCase() === "LOCAL");
 	if(typeof dateTimeNumber === "number") {
 		if(dateTimeNumber > 1e8) { // Maximum date is 100 millions and any number greater than that is assumed to be millisecond
 			date = new Date(dateTimeNumber); // convert milisecond
@@ -233,7 +233,7 @@ DateTime.format = function(dateTimeNumber, dateTimeFormat, timezone) {
 	} else {
 		// Pass the value with string format, expected to be ISO8601 format (YYYY-MM-DDTHH:mm:ss)
 		dtTxt = dateTimeNumber + "";
-		var isISO8601 = dtTxt.match(/^\d{4}(-\d{2}(-\d{2}(T\d{2}\:\d{2}\:\d{2})?)?)?$/);
+		let isISO8601 = dtTxt.match(/^\d{4}(-\d{2}(-\d{2}(T\d{2}\:\d{2}\:\d{2})?)?)?$/);
 		dtTxt = dtTxt.replace(/\-/g, "\/"); // Convert to YYYY/MM/DD HH:mm:ss (common for all browsers)
 		if(isISO8601) {
 			dtTxt = dtTxt.replace(/T/g, " "); // Convert to YYYY/MM/DD HH:mm:ss (common for all browsers)
@@ -272,7 +272,7 @@ DateTime.formatDateObject = function(date, dateTimeFormat) {
 	DateTime._activeInput = date;
 	DateTime._activeLocaleMap = translation[DateTime._localeSetting] || DateTimeLocale["en"];
 
-	var result = dateTimeFormat.replace(/D+|M+|Y+|H+|S+|A+|d+|m+|y+|h+|s+|a+|\[[^\]]*\]+/g, DateTime._parseDatePattern);
+	let result = dateTimeFormat.replace(/D+|M+|Y+|H+|S+|A+|d+|m+|y+|h+|s+|a+|\[[^\]]*\]+/g, DateTime._parseDatePattern);
 	DateTime._activeInput = null;
 
 	return result;
@@ -292,14 +292,14 @@ DateTime._lowerCaseDatePatterns = {
 * @return {string}
 */
 DateTime._parseDatePattern = function(match) {
-	var fchar = (match) ? match.charAt(0) : "";
+	let fchar = (match) ? match.charAt(0) : "";
 	if(fchar === "[") { // Static text
 		return match.substring(1, match.length - 1);
 	}
 
-	var parser = Parsers[match];
+	let parser = Parsers[match];
 	if(!parser) {
-		var mod = match;
+		let mod = match;
 		if(DateTime._lowerCaseDatePatterns[fchar]) {
 			mod = match.toUpperCase();
 			fchar = fchar.toUpperCase();
@@ -325,7 +325,7 @@ DateTime._parseDatePattern = function(match) {
 DateTime.isValidDate = function(dateObj) {
 	if(dateObj) {
 		if(dateObj.getTime) {
-			var t = dateObj.getTime();
+			let t = dateObj.getTime();
 			return t === t;
 		}
 	}
@@ -340,7 +340,7 @@ DateTime.isValidDate = function(dateObj) {
 DateTime.isInvalidDate = function(dateObj) {
 	if(dateObj) {
 		if(dateObj.getTime) {
-			var t = dateObj.getTime();
+			let t = dateObj.getTime();
 			return t !== t;
 		}
 	}
@@ -356,9 +356,9 @@ DateTime.isInvalidDate = function(dateObj) {
 * @see {@link DateTime#timeNumberToMs}
 */
 DateTime.fromDateNumber = function(dateNumber) {
-	var datePart = DateTime.dateNumberToMs(dateNumber);
+	let datePart = DateTime.dateNumberToMs(dateNumber);
 	if(datePart === datePart) {
-		var timePart = DateTime.timeNumberToMs(dateNumber);
+		let timePart = DateTime.timeNumberToMs(dateNumber);
 		return new Date(datePart + timePart);
 	}
 	return new Date(NaN);
@@ -377,7 +377,7 @@ DateTime.dateNumberToMs = function(dateNumber) {
 		return NaN;
 	}
 
-	var num = dateNumber - _DIFF_DAYS;
+	let num = dateNumber - _DIFF_DAYS;
 	if(dateNumber < 60) {
 		num++; // +1 Before 1 Mar 1900 because there is not existing 29 Feb 1900 but existing in Window.
 	}
@@ -395,7 +395,7 @@ DateTime.timeNumberToMs = function(dateNumber) {
 	if(typeof dateNumber !== "number") {
 		dateNumber = (+dateNumber);
 	}
-	var timeNumber = dateNumber - Math.floor(dateNumber);
+	let timeNumber = dateNumber - Math.floor(dateNumber);
 	if(!timeNumber) { // NaN or 0
 		return 0;
 	}
@@ -403,7 +403,7 @@ DateTime.timeNumberToMs = function(dateNumber) {
 		timeNumber = -timeNumber;
 	}
 
-	var secondFromMidnight = Math.round(timeNumber * SECONDS_IN_DAY);
+	let secondFromMidnight = Math.round(timeNumber * SECONDS_IN_DAY);
 	return secondFromMidnight * 1000;
 };
 
@@ -413,7 +413,7 @@ DateTime.timeNumberToMs = function(dateNumber) {
 * @return {Object}
 */
 DateTime.toDateObject = function(dateInput) {
-	var date = null;
+	let date = null;
 	if(dateInput instanceof Date) {
 		date = dateInput;
 	} else if(typeof dateInput === "number") {
@@ -432,8 +432,8 @@ DateTime.toDateObject = function(dateInput) {
 		date = new Date(NaN);
 	} else {
 		// Pass the value with string format, expected to be ISO8601 format (YYYY-MM-DDTHH:mm:ss)
-		var dtTxt = dateInput + "";
-		var isISO8601 = dtTxt.match(/^\d{4}(-\d{2}(-\d{2}(T\d{2}\:\d{2}\:\d{2})?)?)?$/);
+		let dtTxt = dateInput + "";
+		let isISO8601 = dtTxt.match(/^\d{4}(-\d{2}(-\d{2}(T\d{2}\:\d{2}\:\d{2})?)?)?$/);
 		dtTxt = dtTxt.replace(/\-/g, "\/"); // Convert to YYYY/MM/DD HH:mm:ss (common for all browsers)
 		if(isISO8601) {
 			dtTxt = dtTxt.replace(/T/g, " "); // Convert to YYYY/MM/DD HH:mm:ss (common for all browsers)
@@ -481,7 +481,7 @@ DateTime._millisecondToDateNumber = function(millisecond) {
 	if(millisecond !== millisecond || millisecond < _1_JAN_1900) { // Invalid input
 		return NaN;
 	} else {
-		var calDate = (millisecond / MILLISECONDS_IN_DAY) + _DIFF_DAYS;
+		let calDate = (millisecond / MILLISECONDS_IN_DAY) + _DIFF_DAYS;
 		if(millisecond < _1_MAR_1900) {
 			calDate--; // -1 before 1 Mar 1900 because there is not existing 29 Feb 1900 but existing in Window.
 		}
@@ -496,9 +496,9 @@ DateTime._millisecondToDateNumber = function(millisecond) {
 * @return {string}
 */
 DateTime.toYYYYMMDD = function(dateObj) {
-	var str = dateObj ? dateObj.toJSON() : "";
+	let str = dateObj ? dateObj.toJSON() : "";
 	if(str) {
-		return str.substr(0, 10);
+		return str.slice(0, 10);
 	}
 	return "";
 };

package/lib/tr-grid-util/es6/Deferred.js

@@ -4,14 +4,14 @@
 * @param {Function=} rejectHandler
 * @param {*=} ctx Context object that will be provided as the second parameter of the given handlers
 * @example
-* var def = new Deferred(handler);
+* let def = new Deferred(handler);
 * setTimeout(def.resolve, 2000);
-* var def2 = new Deferred();
+* let def2 = new Deferred();
 * setTimeout(function() {
 *   def2.resolve();
 * }, 4000);
 */
-var Deferred = function(resolveHandler, rejectHandler, ctx) {
+let Deferred = function(resolveHandler, rejectHandler, ctx) {
 	this.resolve = this.resolve.bind(this);
 	this.reject = this.reject.bind(this);
 
@@ -65,7 +65,7 @@ Deferred.prototype._fulfilled = false;
 Deferred.prototype.resolve = function(result) {
 	if(this._resolve) { // Promise can be resolved only once
 		if(this._resolveHandler) {
-			var handlerRes = this._resolveHandler(result, this._ctx || this);
+			let handlerRes = this._resolveHandler(result, this._ctx || this);
 			if(handlerRes != null) {
 				result = handlerRes;
 			}
@@ -80,7 +80,7 @@ Deferred.prototype.resolve = function(result) {
 Deferred.prototype.reject = function(result) {
 	if(this._reject) { // Promise can be resolved only once
 		if(this._rejectHandler) {
-			var handlerRes = this._rejectHandler(result, this._ctx || this);
+			let handlerRes = this._rejectHandler(result, this._ctx || this);
 			if(handlerRes != null) {
 				result = handlerRes;
 			}

package/lib/tr-grid-util/es6/Delay.d.ts

@@ -4,8 +4,6 @@ declare class Delay {
 
     constructor(ms?: number|null, ctx?: any);
 
-    public static readonly promise: Promise<any>;
-
     public static for(ms?: number|null, ctx?: any): Delay|null;
 
     public resolve(): void;
@@ -16,5 +14,7 @@ declare class Delay {
 
 }
 
+declare function promiseDelay(ms?: number|null, ctx?: any): Promise<any>|null;
+
 export default Delay;
-export {Delay};
+export {Delay, promiseDelay};

package/lib/tr-grid-util/es6/Delay.js

@@ -3,7 +3,7 @@
 * @param {number=} ms
 * @param {*=} ctx Context object that will passed to resolve func as the first parameter
 */
-var Delay = function(ms, ctx){
+let Delay = function(ms, ctx){
 	this.promise = new Promise(this._executor.bind(this));
 	if(ctx != null) {
 		this._ctx = ctx;
@@ -25,7 +25,7 @@ Delay.for = function(ms, ctx) {
 /** @type {Promise<*>}
 * @public
 */
-Delay.promise = null;
+Delay.prototype.promise = null;
 /** @type {Function}
 * @private
 */
@@ -81,5 +81,16 @@ Delay.prototype._onTimeout = function() {
 	this._ctx = null;
 };
 
+/** Create a promise of a Delay
+* @public
+* @function
+* @param {number=} ms
+* @param {*=} ctx
+* @return {Promise}
+*/
+let promiseDelay = function(ms, ctx) {
+	return Delay.for(ms, ctx).promise;
+};
+
 export default Delay;
-export {Delay};
+export {Delay, promiseDelay};

package/lib/tr-grid-util/es6/Dom.js

@@ -1,5 +1,5 @@
 /** @namespace */
-var Dom = {};
+let Dom = {};
 
 /** Shorthand for creating an element with class
 * @public
@@ -9,7 +9,7 @@ var Dom = {};
 * @return {!Element}
 */
 Dom.create = function(tagName, className) {
-	var elem = document.createElement(tagName);
+	let elem = document.createElement(tagName);
 	if(className) {
 		elem.className = className;
 	}
@@ -32,7 +32,7 @@ Dom.div = function(className) {
 * @return {!Element}
 */
 Dom.text = function(textContent, className) {
-	var elem = Dom.create("span", className);
+	let elem = Dom.create("span", className);
 	if(textContent || textContent === 0) {
 		elem.textContent = textContent;
 	}
@@ -50,7 +50,7 @@ Dom.appendChild = function(parentElem, children) {
 	if(!parentElem) {
 		return null;
 	}
-	var i, ary;
+	let i, ary;
 	if(Array.isArray(arguments[1])) {
 		ary = arguments[1];
 		i = 0;
@@ -58,7 +58,7 @@ Dom.appendChild = function(parentElem, children) {
 		ary = arguments;
 		i = 1;
 	}
-	var len = ary.length;
+	let len = ary.length;
 	while(i < len) {
 		parentElem.appendChild(ary[i]);
 		++i;
@@ -85,12 +85,12 @@ Dom.buildTree = function(parentElem, children) {
 	if(!parentElem) {
 		return null;
 	}
-	var args = arguments;
-	var len = args.length;
-	for(var i = 1; i < len; ++i) {
-		var child = args[i];
+	let args = arguments;
+	let len = args.length;
+	for(let i = 1; i < len; ++i) {
+		let child = args[i];
 		if(child) {
-			var childElem;
+			let childElem;
 			if(Array.isArray(child)) {
 				childElem = Dom.buildTree.apply(null, child);
 			} else if(child.nodeType === 1) {
@@ -110,7 +110,7 @@ Dom.buildTree = function(parentElem, children) {
 */
 Dom.removeParent = function (child) {
 	if(!child) { return null; }
-	var parent = child.parentNode;
+	let parent = child.parentNode;
 	if(parent) {
 		parent.removeChild(child);
 	}
@@ -138,7 +138,7 @@ Dom.setParent = function (child, parent) {
 */
 Dom.removeChildren = function (elem, count) {
 	if(elem) {
-		var childCount = elem.childNodes.length;
+		let childCount = elem.childNodes.length;
 		if(count == null || count > childCount) {
 			count = childCount;
 		}
@@ -156,7 +156,7 @@ Dom.removeChildren = function (elem, count) {
 Dom.setContent = function(elem, val) {
 	if(elem) {
 		if(val || val === 0) {
-			var nt = val.nodeType;
+			let nt = val.nodeType;
 			if(nt === 1 || nt === 3) {
 				if(val !== elem.lastChild) {
 					Dom.removeChildren(elem);
@@ -221,10 +221,10 @@ Dom.toggleClass = function (elem, classStr, bool) {
 */
 Dom.addClasses = function (elem, classes) {
 	if(elem) {
-		var ary = Array.isArray(classes) ? classes : arguments;
-		var len = ary.length;
-		for(var i = 0; i < len; ++i) {
-			var str = ary[i];
+		let ary = Array.isArray(classes) ? classes : arguments;
+		let len = ary.length;
+		for(let i = 0; i < len; ++i) {
+			let str = ary[i];
 			if(str && typeof str == "string") {
 				elem.classList.add(str);
 			}
@@ -239,10 +239,10 @@ Dom.addClasses = function (elem, classes) {
 */
 Dom.removeClasses = function (elem, classes) {
 	if(elem) {
-		var ary = Array.isArray(classes) ? classes : arguments;
-		var len = ary.length;
-		for(var i = 0; i < len; ++i) {
-			var str = ary[i];
+		let ary = Array.isArray(classes) ? classes : arguments;
+		let len = ary.length;
+		for(let i = 0; i < len; ++i) {
+			let str = ary[i];
 			if(str && typeof str == "string") {
 				elem.classList.remove(str);
 			}
@@ -275,9 +275,9 @@ Dom.stopPropagation = function(e) {
 * @return {!Object} Return object with property x and y
 */
 Dom.getClientPosition = function(target, retObj) {
-	var pos = retObj || {"x": 0, "y": 0};
+	let pos = retObj || {"x": 0, "y": 0};
 	if(target["getBoundingClientRect"]){
-		var box = target["getBoundingClientRect"]();
+		let box = target["getBoundingClientRect"]();
 		pos["x"] = box.left;
 		pos["y"] = box.top;
 	} else { //Event
@@ -301,7 +301,7 @@ Dom.getClientPosition = function(target, retObj) {
 */
 Dom.getRelativePosition = function(A, B, retObj) {
 	retObj = Dom.getClientPosition(A, retObj);
-	var bp = Dom.getClientPosition(B);
+	let bp = Dom.getClientPosition(B);
 
 	retObj["x"] -= bp["x"];
 	retObj["y"] -= bp["y"];
@@ -315,7 +315,7 @@ Dom.getRelativePosition = function(A, B, retObj) {
 * @return {Element}
 */
 Dom.closestElement = function(elem, classStr) {
-	var n = elem;
+	let n = elem;
 	while (n) {
 		if(n.classList) { // DocumentFragment does not have classList property
 			if (n.classList.contains(classStr)) {
@@ -334,7 +334,7 @@ Dom.closestElement = function(elem, classStr) {
 * @return {Element}
 */
 Dom.closestTagName = function(elem, tn) {
-	var n = elem;
+	let n = elem;
 	while(n) {
 		if(n.tagName) {
 			if(n.tagName == tn) {

package/lib/tr-grid-util/es6/DragUI.js

@@ -6,7 +6,7 @@ import ElfUtil from "./ElfUtil.js";
 * @constructor
 * @param {Object} options
 */
-var DragUI = function(options) {
+let DragUI = function(options) {
 	this._dragBox = options.dragBox;
 	this._dragBoxIcon = options.dragBoxIcon;
 	this._dragBoxContent = document.createElement("div");
@@ -62,12 +62,12 @@ DragUI.applyThemeColor = function(grid) {
 */
 DragUI.prototype.onThemeLoaded = function(colors) {
 	if(!DragUI._styles) {
-		var ElfVersion = ElfUtil.getElfVersion();
-		var cursor = "grabbing";
+		let ElfVersion = ElfUtil.getElfVersion();
+		let cursor = "grabbing";
 		if (ElfVersion < 3) {
 			cursor = "move";
 		}
-		var styles = [ // Main Styles without theme
+		let styles = [ // Main Styles without theme
 			".tr-row-guideline", [ // Backward compatability of row dragging
 				"position: absolute;",
 				"left: 0;",
@@ -145,7 +145,7 @@ DragUI.prototype.onThemeLoaded = function(colors) {
 			],
 			".tr-grid .column .cell.drag-indicator", [ // --grid-drag-indicator defualt is "none"
 				"border-top: var(--grid-drag-indicator) !important;",
-				"border-right: var(--grid-drag-indicator);",
+				"border-right: var(--grid-drag-indicator) !important;", // need to set !important to overwrite the priority set by the last column which has the none border
 				"border-bottom: var(--grid-drag-indicator);",
 				"border-left: var(--grid-drag-indicator);"
 			],
@@ -157,7 +157,7 @@ DragUI.prototype.onThemeLoaded = function(colors) {
 				"background-color: unset;" // v3 fallback
 			]
 		];
-		var guidelineColor = "#ff9933";
+		let guidelineColor = "#ff9933";
 		if(colors.primary) {
 			guidelineColor = colors.primary;
 		}
@@ -189,22 +189,22 @@ DragUI.prototype.renderDragBox = function (e, grid) {
 		return false;
 	}
 
-	var gridElem = grid.getElement();
-	var dragBoxHost = gridElem;
-	var gridParent = grid.getParent().parentNode;
+	let gridElem = grid.getElement();
+	let dragBoxHost = gridElem;
+	let gridParent = grid.getParent().parentNode;
 	if (gridParent.nodeType === 11) {
 		dragBoxHost = gridParent;
 	}
 
-	var parent = this._dragBox.parentNode;
+	let parent = this._dragBox.parentNode;
 	if(!parent) {
 		dragBoxHost.appendChild(this._dragBox);
 	}
 
-	var dragBoxIcon = e.dragBoxIcon || this._dragBox.dragBoxIcon; // The user-supplied icon
+	let dragBoxIcon = e.dragBoxIcon || this._dragBox.dragBoxIcon; // The user-supplied icon
 	this._dragBoxIcon.style.visibility = "visible";
 	parent = this._dragBoxIcon.parentNode;
-	var drop = true;
+	let drop = true;
 	if(dragBoxIcon === "insertion") {
 		drop = false;
 		this._dragBoxIcon.icon = "add";
@@ -221,10 +221,10 @@ DragUI.prototype.renderDragBox = function (e, grid) {
 		Dom.removeParent(this._dragBoxIcon);
 	}
 
-	var gridRect = gridElem.getBoundingClientRect();
+	let gridRect = gridElem.getBoundingClientRect();
 
-	var x = e.clientX - gridRect.left;
-	var y = e.pageY - gridRect.top;
+	let x = e.clientX - gridRect.left;
+	let y = e.pageY - gridRect.top;
 
 	// space for mouse cursor
 	this._dragBox.style.left = x - 5 + "px";
@@ -240,8 +240,8 @@ DragUI.prototype.setContent = function(content) {
 		content = content["getElement"]();
 	}
 
-	var dragBoxContent = this._dragBoxContent;
-	var currentContent = dragBoxContent._content;
+	let dragBoxContent = this._dragBoxContent;
+	let currentContent = dragBoxContent._content;
 	if (content !== currentContent) {
 		dragBoxContent._content = content;
 		Dom.setContent(dragBoxContent, content);