@refinitiv-ui/efx-grid 6.0.93 → 6.0.94

package/lib/tr-grid-row-selection/es6/RowSelection.js

@@ -4,7 +4,13 @@ import { GridPlugin } from "../../tr-grid-util/es6/GridPlugin.js";
 import { isMac as isMacFn } from "../../tr-grid-util/es6/Util.js";
 import { isIE, prepareTSVContent } from "../../tr-grid-util/es6/Util.js";
 import { prettifyCss } from "../../tr-grid-util/es6/Util.js";
-var isMac = isMacFn();
+
+/** @private
+* @type {boolean}
+* @constant
+*/
+const IS_MAC = isMacFn();
+
 /** Fired when selection is changed by mouse down or key press. A change by JavaScript APIs will not trigger this event.
 * @event RowSelectionPlugin#selectionChanged
 */
@@ -13,7 +19,7 @@ var isMac = isMacFn();
 * Note that selection by JavaScript APIs cannot be prevented using this event.
 * @event RowSelectionPlugin#beforeSelection
 * @example
-* var ext = new RowSelectionPlugin();
+* let ext = new RowSelectionPlugin();
 * ext.listen("beforeSelection" function(e) {
 *   e.cancel = true; // Cancel user selection
 * });
@@ -34,11 +40,10 @@ var isMac = isMacFn();
 * @extends {GridPlugin}
 * @param {RowSelectionPlugin~Options=} options
 */
-var RowSelectionPlugin = function (options) {
-	var t = this;
+let RowSelectionPlugin = function (options) {
+	let t = this;
 	t._onMouseDown = t._onMouseDown.bind(t);
 	t._onMouseMove = t._onMouseMove.bind(t);
-	t._onCopy = t._onCopy.bind(t);
 	t._onClick = t._onClick.bind(t);
 	t._onKeyDown = t._onKeyDown.bind(t);
 	t._onBeforeRowRemoved = t._onBeforeRowRemoved.bind(t);
@@ -51,7 +56,7 @@ var RowSelectionPlugin = function (options) {
 	t._isIE = isIE();
 	t._textRange = document.createRange();
 
-	if (options) {
+	if(options) {
 		t.config({ "rowSelection": options });
 	}
 };
@@ -133,7 +138,7 @@ RowSelectionPlugin.prototype._pendingSelection = null;
 * @return {string}
 */
 RowSelectionPlugin._styleCalculator = function() {
-	var styles = [
+	let styles = [
 		".row-selection-menu", [
 			"position: absolute;",
 			"background-color: var(--grid-column-menu-icon-bgcolor);",
@@ -175,7 +180,7 @@ RowSelectionPlugin.prototype.hasMultiTableSupport = function () {
 * @param {Object=} options Grid configuration object
 */
 RowSelectionPlugin.prototype.initialize = function (host, options) {
-	if (this._hosts.indexOf(host) >= 0) { return; }
+	if(this._hosts.indexOf(host) >= 0) { return; }
 	this._hosts.push(host);
 
 	host.listen("mousedown", this._onMouseDown);
@@ -184,14 +189,12 @@ RowSelectionPlugin.prototype.initialize = function (host, options) {
 	host.listen("postSectionDataBinding", this._onPostSectionDataBinding);
 	host.listen("rowPositionChanged", this._onRowPositionChanged);
 
-	var wrapper = this.getGridApi(host);
+	let wrapper = this.getGridApi(host);
 	if(wrapper) {
 		wrapper.listen("beforeRowRemoved", this._onBeforeRowRemoved);
 	}
 
 	// TODO:: listen to copy and cut event when implement autoCopy config
-	// host.listen("copy", this._onCopy,);
-	// host.listen("cut", this._onCopy);
 
 	this.config(options);
 
@@ -204,12 +207,10 @@ RowSelectionPlugin.prototype.initialize = function (host, options) {
 * @param {Object=} host core grid instance
 */
 RowSelectionPlugin.prototype.unload = function (host) {
-	var at = this._hosts.indexOf(host);
-	if (at < 0) { return; }
+	let at = this._hosts.indexOf(host);
+	if(at < 0) { return; }
 
 	host.unlisten("mousedown", this._onMouseDown);
-	host.unlisten("copy", this._onCopy);
-	host.unlisten("cut", this._onCopy);
 	host.unlisten("click", this._onClick);
 	host.unlisten("keydown", this._onKeyDown);
 	host.unlisten("postSectionDataBinding", this._onPostSectionDataBinding);
@@ -217,7 +218,7 @@ RowSelectionPlugin.prototype.unload = function (host) {
 
 	this._hosts.splice(at, 1);
 
-	if (!this._hosts.length) {
+	if(!this._hosts.length) {
 		if(this._timerId) {
 			clearTimeout(this._timerId);
 			this._timerId = 0;
@@ -232,27 +233,27 @@ RowSelectionPlugin.prototype.unload = function (host) {
 * @param {Object=} options Grid configuration object
 */
 RowSelectionPlugin.prototype.config = function (options) {
-	if (!options) {
+	if(!options) {
 		return;
 	}
 
-	var pluginOptions = options["rowSelection"];
+	let pluginOptions = options["rowSelection"];
 
-	if (pluginOptions) {
-		if (typeof pluginOptions === "object") {
-			if (pluginOptions["singleSelection"]) {
+	if(pluginOptions) {
+		if(typeof pluginOptions === "object") {
+			if(pluginOptions["singleSelection"]) {
 				this._singleSelMode = true;
 			}
-			if (pluginOptions["clickToggle"]) {
+			if(pluginOptions["clickToggle"]) {
 				this._clickToggleMode = true;
 			}
-			if (pluginOptions["basedOnContent"]) {
+			if(pluginOptions["basedOnContent"]) {
 				this._basedOnContent = true;
 			}
-			if (pluginOptions["selectionField"]) {
+			if(pluginOptions["selectionField"]) {
 				this._selectionField = pluginOptions["selectionField"];
 			}
-			var val = pluginOptions["menuClicked"];
+			let val = pluginOptions["menuClicked"];
 			if(typeof val === "function"){
 				this._onMenuClicked = val;
 			}
@@ -260,13 +261,13 @@ RowSelectionPlugin.prototype.config = function (options) {
 			if(val) {
 				this._menuPosition = val;
 			}
-		} else if (pluginOptions === "single") {
+		} else if(pluginOptions === "single") {
 			this._singleSelMode = true;
 		}
 
 		this.addListener(pluginOptions, "selectionChanged");
 		this.addListener(pluginOptions, "beforeSelection");
-	} else if (pluginOptions != null) {
+	} else if(pluginOptions != null) {
 		this.disable();
 	}
 };
@@ -276,9 +277,9 @@ RowSelectionPlugin.prototype.config = function (options) {
 * @return {!Object}
 */
 RowSelectionPlugin.prototype.getConfigObject = function (gridOptions) {
-	var obj = gridOptions || {};
+	let obj = gridOptions || {};
 
-	var extOptions = obj.rowSelection;
+	let extOptions = obj.rowSelection;
 	if(!extOptions) {
 		extOptions = obj.rowSelection = {};
 	}
@@ -304,12 +305,12 @@ RowSelectionPlugin.prototype.getConfigObject = function (gridOptions) {
 * @param {Object=} activeGrid Grid for taking user key inputs after clearing
 */
 RowSelectionPlugin.prototype.clearAllSelections = function (preserveAnchor, activeGrid) {
-	if (preserveAnchor == null) {
+	if(preserveAnchor == null) {
 		preserveAnchor = true;
 	}
 	this._clearSelectedRows(preserveAnchor);
 
-	if (activeGrid) {
+	if(activeGrid) {
 		this._activeGrid = activeGrid;
 	}
 };
@@ -342,14 +343,14 @@ RowSelectionPlugin.prototype.getActiveGrid = function () {
 * @return {number} rowIndex of anchor
 */
 RowSelectionPlugin.prototype.getRowAnchor = function (sectRef) {
-	if (this._basedOnContent) {
-		var dv = this._activeGrid ? this._activeGrid.getDataSource() : null;
+	if(this._basedOnContent) {
+		let dv = this._activeGrid ? this._activeGrid.getDataSource() : null;
 		if( dv && this._anchorRowId){
 			return dv.getRowIndex(this._anchorRowId);
 		}
 	} else {
-		var section = this._getSection(sectRef);
-		if (section && section.getRowAnchor){
+		let section = this._getSection(sectRef);
+		if(section && section.getRowAnchor){
 			return section.getRowAnchor();
 		}
 	}
@@ -361,20 +362,20 @@ RowSelectionPlugin.prototype.getRowAnchor = function (sectRef) {
 * @return {number|null}
 */
 RowSelectionPlugin.prototype.getFirstSelectedIndex = function (sectRef) {
-	var section = this._getSection(sectRef);
-	if (!section) {
+	let section = this._getSection(sectRef);
+	if(!section) {
 		return null;
-	} else if (this._basedOnContent) {
-		var dv = this._activeGrid ? this._activeGrid.getDataSource() : null;
-		if (!dv) return null;
-
-		var rids = dv.getVisibleRowIds(true);
-		var rows = dv.getMultipleRowData(rids);
-		var count = rows.length;
-		var dataRow;
-		for (var rowIndex = 0; rowIndex < count; rowIndex++) {
+	} else if(this._basedOnContent) {
+		let dv = this._activeGrid ? this._activeGrid.getDataSource() : null;
+		if(!dv) return null;
+
+		let rids = dv.getVisibleRowIds(true);
+		let rows = dv.getMultipleRowData(rids);
+		let count = rows.length;
+		let dataRow;
+		for(let rowIndex = 0; rowIndex < count; rowIndex++) {
 			dataRow = this._rowGetter(rows[rowIndex]);
-			if (dataRow && dataRow[this._selectionField]) {
+			if(dataRow && dataRow[this._selectionField]) {
 				return rowIndex;
 			}
 		}
@@ -389,20 +390,20 @@ RowSelectionPlugin.prototype.getFirstSelectedIndex = function (sectRef) {
 * @return {number|null}
 */
 RowSelectionPlugin.prototype.getLastSelectedIndex = function (sectRef) {
-	var section = this._getSection(sectRef);
-	if (!section) {
+	let section = this._getSection(sectRef);
+	if(!section) {
 		return null;
-	} else if (this._basedOnContent) {
-		var dv = this._activeGrid ? this._activeGrid.getDataSource() : null;
-		if (!dv) return null;
-
-		var rids = dv.getVisibleRowIds(true);
-		var rows = dv.getMultipleRowData(rids);
-		var count = rows.length;
-		var dataRow;
-		for (var rowIndex = count - 1; rowIndex >= 0; rowIndex--) {
+	} else if(this._basedOnContent) {
+		let dv = this._activeGrid ? this._activeGrid.getDataSource() : null;
+		if(!dv) return null;
+
+		let rids = dv.getVisibleRowIds(true);
+		let rows = dv.getMultipleRowData(rids);
+		let count = rows.length;
+		let dataRow;
+		for(let rowIndex = count - 1; rowIndex >= 0; rowIndex--) {
 			dataRow = this._rowGetter(rows[rowIndex]);
-			if (dataRow && dataRow[this._selectionField]) {
+			if(dataRow && dataRow[this._selectionField]) {
 				return rowIndex;
 			}
 		}
@@ -418,21 +419,21 @@ RowSelectionPlugin.prototype.getLastSelectedIndex = function (sectRef) {
 * @return {Array.<number>}
 */
 RowSelectionPlugin.prototype.getSelectedRows = function (sectRef) {
-	var section = this._getSection(sectRef);
-	if (!section) {
+	let section = this._getSection(sectRef);
+	if(!section) {
 		return null;
-	} else if (this._basedOnContent) {
-		var dv = this._activeGrid ? this._activeGrid.getDataSource() : null;
-		if (!dv) return null;
-
-		var rids = dv.getVisibleRowIds(true);
-		var rows = dv.getMultipleRowData(rids);
-		var count = rows.length;
-		var selectedRows = [];
-		var dataRow;
-		for (var rowIndex = 0; rowIndex < count; rowIndex++) {
+	} else if(this._basedOnContent) {
+		let dv = this._activeGrid ? this._activeGrid.getDataSource() : null;
+		if(!dv) return null;
+
+		let rids = dv.getVisibleRowIds(true);
+		let rows = dv.getMultipleRowData(rids);
+		let count = rows.length;
+		let selectedRows = [];
+		let dataRow;
+		for(let rowIndex = 0; rowIndex < count; rowIndex++) {
 			dataRow = this._rowGetter(rows[rowIndex]);
-			if (dataRow && dataRow[this._selectionField]) {
+			if(dataRow && dataRow[this._selectionField]) {
 				selectedRows.push(rowIndex);
 			}
 		}
@@ -447,16 +448,16 @@ RowSelectionPlugin.prototype.getSelectedRows = function (sectRef) {
 * @return {Array.<string>}
 */
 RowSelectionPlugin.prototype.getSelectedRowIds = function (sectRef) {
-	var rids = null;
-	var len, i;
+	let rids = null;
+	let len, i;
 
-	var selRows = this.getSelectedRows(sectRef);
-	if (selRows) {
-		var dv = this._activeGrid.getDataSource();
-		var rowIds = dv.getVisibleRowIds(true);
+	let selRows = this.getSelectedRows(sectRef);
+	if(selRows) {
+		let dv = this._activeGrid.getDataSource();
+		let rowIds = dv.getVisibleRowIds(true);
 		len = selRows.length;
 		rids = new Array(len);
-		for (i = 0; i < len; ++i) {
+		for(i = 0; i < len; ++i) {
 			rids[i] = rowIds[selRows[i]] || "";
 		}
 	}
@@ -468,10 +469,10 @@ RowSelectionPlugin.prototype.getSelectedRowIds = function (sectRef) {
 * @return {number}
 */
 RowSelectionPlugin.prototype.getSelectedRowCount = function (sectRef) {
-	var section = this._getSection(sectRef);
-	if (!section) return 0;
-	if (this._basedOnContent) {
-		var selectedRows = this.getSelectedRows();
+	let section = this._getSection(sectRef);
+	if(!section) return 0;
+	if(this._basedOnContent) {
+		let selectedRows = this.getSelectedRows();
 		return selectedRows ? selectedRows.length : 0;
 	} else {
 		return section.getSelectedRowCount();
@@ -483,8 +484,8 @@ RowSelectionPlugin.prototype.getSelectedRowCount = function (sectRef) {
 * @param {Object=} sectRef Grid SectionReference
 */
 RowSelectionPlugin.prototype.setSelectedRow = function (rowIndex, opt_select, sectRef) {
-	var section = this._getSection(sectRef);
-	if (!section) { return; }
+	let section = this._getSection(sectRef);
+	if(!section) { return; }
 	this._sectionSetSelectedRow(section, rowIndex, opt_select);
 };
 /**
@@ -495,11 +496,11 @@ RowSelectionPlugin.prototype.setSelectedRow = function (rowIndex, opt_select, se
 * @return {boolean}
 */
 RowSelectionPlugin.prototype.selectSingleRow = function (rowIndex, sectRef, activeGrid) {
-	if (!(rowIndex >= 0)) { return false; }
+	if(!(rowIndex >= 0)) { return false; }
 
 	// 1. first of all let's clear selectedRows of prevGrid
-	var prevGrid = activeGrid ? this._activeGrid : null;
-	if (prevGrid) {
+	let prevGrid = activeGrid ? this._activeGrid : null;
+	if(prevGrid) {
 		this._clearSelectedRows();
 
 		// 2. after clear selection let switch active grid
@@ -507,14 +508,14 @@ RowSelectionPlugin.prototype.selectSingleRow = function (rowIndex, sectRef, acti
 	}
 
 	// 3. now active grid is switch let's normally select row
-	var section = this._getSection(sectRef); // TODO: Check if the given section is in the active grid
-	if (this._selectSingleRow(section, rowIndex)) {
+	let section = this._getSection(sectRef); // TODO: Check if the given section is in the active grid
+	if(this._selectSingleRow(section, rowIndex)) {
 		this._scrollToRow(rowIndex);
 		return true;
 	}
 	// 4. in case fail to perform _selectSingleRow
 	// we will turn back _activeGrid to prevGrid
-	else if (prevGrid) {
+	else if(prevGrid) {
 		this._activeGrid = prevGrid;
 	}
 
@@ -524,17 +525,17 @@ RowSelectionPlugin.prototype.selectSingleRow = function (rowIndex, sectRef, acti
 * @param {Object=} activeGrid core grid instance
 */
 RowSelectionPlugin.prototype.selectAllRows = function (activeGrid) {
-	if (activeGrid) {
+	if(activeGrid) {
 		this._activeGrid = activeGrid;
-	} else if (!this._activeGrid) {
+	} else if(!this._activeGrid) {
 		this._activeGrid = this._hosts[0];
 	}
 
-	if (this._activeGrid) {
-		var sections = this._activeGrid.getAllSections("content");
-		for (var i = sections.length; --i >= 0;) {
+	if(this._activeGrid) {
+		let sections = this._activeGrid.getAllSections("content");
+		for(let i = sections.length; --i >= 0;) {
 			this._selectRowRange(null, null, sections[i]);
-			if (i == 0) {
+			if(i == 0) {
 				this._anchorSection = sections[i];
 			}
 		}
@@ -551,7 +552,7 @@ RowSelectionPlugin.prototype.selectAllRows = function (activeGrid) {
 RowSelectionPlugin.prototype.selectRowRange = function (rowIndex, length, sectRef, opt_scrollToRow) {
 	this._selectRowRange(rowIndex, length, sectRef);
 
-	if (opt_scrollToRow) {
+	if(opt_scrollToRow) {
 		this._scrollToRow(rowIndex);
 	}
 	this._updateMenuIcon();
@@ -581,9 +582,9 @@ RowSelectionPlugin.prototype.disableMultiSelection = function (disabled) {
 * @param {Event} e
 */
 RowSelectionPlugin.prototype._onClick = function (e) {
-	if (this._pendingClickIndex >= 0 && this._anchorSection) {
+	if(this._pendingClickIndex >= 0 && this._anchorSection) {
 		this._selectSingleRow(this._anchorSection, this._pendingClickIndex);
-		var host = this.getRelativeGrid(e);
+		let host = this.getRelativeGrid(e);
 		this._clearPendingClickIndex(host);
 
 		if(!this._basedOnContent) { // Protect against rowPositionChanged and postBindingSection event
@@ -599,7 +600,7 @@ RowSelectionPlugin.prototype._onClick = function (e) {
 * @param {Object=} mouseEvt
 */
 RowSelectionPlugin.prototype.selectByMouse = function (rowIndex, mouseEvt) {
-	var eventObj = this._mockMouseEvent(0, rowIndex, mouseEvt);
+	let eventObj = this._mockMouseEvent(0, rowIndex, mouseEvt);
 	this._onMouseDown(eventObj);
 };
 
@@ -610,7 +611,7 @@ RowSelectionPlugin.prototype.selectByMouse = function (rowIndex, mouseEvt) {
 * @param {Object=} keyboardEvt
 */
 RowSelectionPlugin.prototype.selectByKey = function (keyCode, keyboardEvt) {
-	var eventObj = this._mockKeyboardEvent(keyCode, keyboardEvt);
+	let eventObj = this._mockKeyboardEvent(keyCode, keyboardEvt);
 	this._onKeyDown(eventObj);
 };
 
@@ -624,71 +625,71 @@ RowSelectionPlugin.prototype.selectByKey = function (keyCode, keyboardEvt) {
 * @param {Event} e
 */
 RowSelectionPlugin.prototype._onMouseDown = function (e) {
-	if (this._disabled) {
+	if(this._disabled) {
 		return;
 	}
-	if (e.button === 2) { // Right click
-		if (e.shiftKey || e.ctrlKey) {
+	if(e.button === 2) { // Right click
+		if(e.shiftKey || e.ctrlKey) {
 			return;
 		}
 	}
 
-	var host = this.getRelativeGrid(e);
+	let host = this.getRelativeGrid(e);
 
 	this._clearPendingClickIndex(host);
 
-	if (!host) {
+	if(!host) {
 		return;
 	}
 
-	var ctx = host.getRelativePosition(e);
-	if (!ctx["hit"] || ctx["sectionType"] !== "content") { return; }
-	if (e.button === 2) { // Right click at the selected column should override clicking row to select;
-		var csp = this._getPlugin("ColumnSelectionPlugin");
-		if (csp && csp["isEnabled"]()) {
-			if (csp["isSelectedColumn"](ctx["colIndex"])) {
+	let ctx = host.getRelativePosition(e);
+	if(!ctx["hit"] || ctx["sectionType"] !== "content") { return; }
+	if(e.button === 2) { // Right click at the selected column should override clicking row to select;
+		let csp = this._getPlugin("ColumnSelectionPlugin");
+		if(csp && csp["isEnabled"]()) {
+			if(csp["isSelectedColumn"](ctx["colIndex"])) {
 				return;
 			}
 		}
 	}
-	var dv = ctx["dataSource"];
-	var rowIndex = ctx["rowIndex"];
-	if (this._basedOnContent) {
+	let dv = ctx["dataSource"];
+	let rowIndex = ctx["rowIndex"];
+	if(this._basedOnContent) {
 		// ignore group header row
-		var dataRow = this._getRow(dv, rowIndex);
-		if (!dataRow) {
+		let dataRow = this._getRow(dv, rowIndex);
+		if(!dataRow) {
 			return;
 		}
 	}
 
-	if (this._dispatchBeforeSelection(e, ctx)) {
+	if(this._dispatchBeforeSelection(e, ctx)) {
 		return;
 	}
 
-	var singleSelection = this._singleSelMode || !this._activeGrid || (this._activeGrid !== host); // New grid is clicked
-	var section = ctx["section"];
-	var prevSel = section.isSelectedRow(rowIndex);
+	let singleSelection = this._singleSelMode || !this._activeGrid || (this._activeGrid !== host); // New grid is clicked
+	let section = ctx["section"];
+	let prevSel = section.isSelectedRow(rowIndex);
 
-	if (!singleSelection) {
-		if (e.shiftKey) { // Shift + Click: selects every rows start from anchor to clicked point. Anchor point doesn't change.
+	if(!singleSelection) {
+		if(e.shiftKey) { // Shift + Click: selects every rows start from anchor to clicked point. Anchor point doesn't change.
 			this._selectFromAnchorToTarget(section, rowIndex);
-		} else if ((e.ctrlKey && !isMac) || (isMac && !e.ctrlKey && e.metaKey)) { // Ctrl(windows)/Command(macOS) + Click: additionally selects a row without deselect all others.
+		} else if((e.ctrlKey && !IS_MAC) || (IS_MAC && !e.ctrlKey && e.metaKey)) { // Ctrl(windows)/Command(macOS) + Click: additionally selects a row without deselect all others.
 			this._sectionSetSelectedRow(section, rowIndex, !prevSel);
 		} else {
 			singleSelection = true;
 		}
 	}
 
-	if (singleSelection) { // Click: selects a single row
+	if(singleSelection) { // Click: selects a single row
 		this._anchorSection = section;
-		if (prevSel) { // Click on the selected row
+		if(prevSel) { // Click on the selected row
 			this._setPendingClickIndex(rowIndex, host); // Delay the operation to allow drag and drop operation
 			return;
 		} else { // Perform single click immediately
-			var prevGrid = this._activeGrid;
+			let prevGrid = this._activeGrid;
 
 			// clear selection row in prevGrid first if prev and current host not the same
-			if (prevGrid !== host) {
+			if(prevGrid !== host) {
 				this._clearSelectedRows(true);
 				this._activeGrid = host;
 			}
@@ -714,7 +715,7 @@ RowSelectionPlugin.prototype._onMouseDown = function (e) {
 * @param {Event} e
 */
 RowSelectionPlugin.prototype._onMouseMove = function (e) {
-	var host = this.getRelativeGrid(e);
+	let host = this.getRelativeGrid(e);
 	this._clearPendingClickIndex(host);
 };
 
@@ -741,7 +742,7 @@ RowSelectionPlugin.prototype._clearPendingClickIndex = function (host) {
 * @param {KeyboardEvent} e
 */
 RowSelectionPlugin.prototype._onKeyDown = function (e) {
-	if (!this._activeGrid) { return; }
+	if(!this._activeGrid) { return; }
 
 	//Arrow Up/Down move a row selection up/down by one.
 	//Arrow Up/Down and shift additionally select a row that is the one before first or after last selected row.
@@ -761,10 +762,10 @@ RowSelectionPlugin.prototype._onKeyDown = function (e) {
 		this._selectByKey(-1, e, true);
 		break;
 	case 37: //Left arrow
-		if (this._dispatchBeforeSelection(e)) {
+		if(this._dispatchBeforeSelection(e)) {
 			return;
 		}
-		if (this._gotoPrevGrid()) {
+		if(this._gotoPrevGrid()) {
 			EventDispatcher.preventDefault(e);
 		}
 		break;
@@ -772,10 +773,10 @@ RowSelectionPlugin.prototype._onKeyDown = function (e) {
 		this._selectByKey(-1, e);
 		break;
 	case 39: //Right arrow
-		if (this._dispatchBeforeSelection(e)) {
+		if(this._dispatchBeforeSelection(e)) {
 			return;
 		}
-		if (this._gotoNextGrid()) {
+		if(this._gotoNextGrid()) {
 			EventDispatcher.preventDefault(e);
 		}
 		break;
@@ -803,7 +804,7 @@ RowSelectionPlugin.prototype._onReselection = function (e) {
 	this._timerId = 0;
 
 	if(this._pendingSelection != null) {
-		var firstSel = this.getFirstSelectedIndex();
+		let firstSel = this.getFirstSelectedIndex();
 		if(firstSel == null) { // Only perform reselection if the last selection has been removed
 			this.setSelectedRow(this._pendingSelection, true);
 		}
@@ -812,45 +813,25 @@ RowSelectionPlugin.prototype._onReselection = function (e) {
 	this._pendingSelection = null;
 };
 
-/** @private
-* @param {Event} e
-*/
-RowSelectionPlugin.prototype._onCopy = function (e) {
-	var clipboardData, format;
-	if (e.clipboardData) {
-		clipboardData = e.clipboardData;
-		format = "text/plain";
-	} else {
-		clipboardData = window.clipboardData;
-		format = "Text";
-	}
-	// Set clipboards data to copy api.
-	var txt = this.getSelectedText();
-	if (txt) {
-		clipboardData.setData(format, txt);
-	}
-	e.preventDefault();
-};
-
 /** @private
 * @param {Object} e postSectionDataBinding event context
 */
 RowSelectionPlugin.prototype._onPostSectionDataBinding = function (e) {
-	if (!this._basedOnContent
+	if(!this._basedOnContent
 		|| "content" !== e.sectionType
 		|| !this._activeGrid) {
 		return;
 	}
-	var section = e.section;
-	var dv = e.dataSource;
+	let section = e.section;
+	let dv = e.dataSource;
 
-	var field = this._selectionField;
+	let field = this._selectionField;
 	section.clearSelectedRows();
 
-	var fromR = section.getFirstIndexInView();
-	var toR = section.getLastIndexInView();
-	for (var r = fromR; r <= toR; ++r) {
-		var dataRow = this._rowGetter(dv.getRowDataAt(r));
+	let fromR = section.getFirstIndexInView();
+	let toR = section.getLastIndexInView();
+	for(let r = fromR; r <= toR; ++r) {
+		let dataRow = this._rowGetter(dv.getRowDataAt(r));
 		if(dataRow) {
 			if(dataRow[field]) {
 				section.setSelectedRow(r, true);
@@ -881,25 +862,25 @@ RowSelectionPlugin.prototype._onRowPositionChanged = function (e) {
 */
 RowSelectionPlugin.prototype.getSelectedText = function () {
 	// work only with composit and realtime
-	if (!this._compositeGrid && !this._realTimeGrid) return "";
+	if(!this._compositeGrid && !this._realTimeGrid) return "";
 
-	var selectedRows = this.getSelectedRows();
-	var rowCount = selectedRows.length;
-	var columnCount = this.getColumnCount();
-	var text = "";
-	var dv = this._activeGrid.getDataSource();
-	for (var i = 0; i < rowCount; i++) {
-		var rowIndex = selectedRows[i];
-		var rowData = this._getRow(dv, rowIndex);
+	let selectedRows = this.getSelectedRows();
+	let rowCount = selectedRows.length;
+	let columnCount = this.getColumnCount();
+	let text = "";
+	let dv = this._activeGrid.getDataSource();
+	for(let i = 0; i < rowCount; i++) {
+		let rowIndex = selectedRows[i];
+		let rowData = this._getRow(dv, rowIndex);
 
-		if (rowData) {
-			if (text.length) text += "\n"; // break line before write in case text has content
+		if(rowData) {
+			if(text.length) text += "\n"; // break line before write in case text has content
 
 			// data row
-			for (var colIndex = 0; colIndex < columnCount; colIndex++) {
-				if (colIndex > 0) text += "\t"; // separate each cell content with tab
+			for(let colIndex = 0; colIndex < columnCount; colIndex++) {
+				if(colIndex > 0) text += "\t"; // separate each cell content with tab
 				// column fields are available on compositeGrid and realTimeGrid level
-				var cField = this._getField(colIndex);
+				let cField = this._getField(colIndex);
 				text += prepareTSVContent(rowData[cField]);
 			}
 		}
@@ -912,21 +893,21 @@ RowSelectionPlugin.prototype.getSelectedText = function () {
 * @return {Object} ILayoutGrid
 */
 RowSelectionPlugin.prototype._getSection = function (sectRef) {
-	if (!this._activeGrid) {
+	if(!this._activeGrid) {
 		this._activeGrid = this._hosts[0];
-		if (this._activeGrid) {
+		if(this._activeGrid) {
 			this._anchorSection = this._activeGrid.getSection("content");
-			if (!this._anchorSection) {
+			if(!this._anchorSection) {
 				this._activeGrid = null;
 			}
 		}
 	}
-	if (sectRef) {
+	if(sectRef) {
 		return this._activeGrid.getSection(sectRef);
 	}
 
-	if (this._anchorSection) {
-		if (!this._anchorSection.getElement()) { // The section may has been disposed.
+	if(this._anchorSection) {
+		if(!this._anchorSection.getElement()) { // The section may has been disposed.
 			this._anchorSection = null;
 		}
 	}
@@ -938,23 +919,23 @@ RowSelectionPlugin.prototype._getSection = function (sectRef) {
 * @param {boolean=} preserveAnchor
 */
 RowSelectionPlugin.prototype._clearSelectedRows = function (preserveAnchor) { // Slow
-	if (!this._activeGrid) {
+	if(!this._activeGrid) {
 		return;
 	}
-	if (this._basedOnContent) {
-		var dv = this._activeGrid.getDataSource();
-		if (dv) {
-			var dt = dv.getDataSource();
+	if(this._basedOnContent) {
+		let dv = this._activeGrid.getDataSource();
+		if(dv) {
+			let dt = dv.getDataSource();
 			this._setColumnData(dt, this._selectionField, false);
 		}
 	} else {
-		var sections = this._activeGrid.getAllSections("content");
-		for (var i = sections.length; --i >= 0;) {
+		let sections = this._activeGrid.getAllSections("content");
+		for(let i = sections.length; --i >= 0;) {
 			this._sectionClearSelectedRows(sections[i], preserveAnchor);
 		}
 	}
 
-	if (!preserveAnchor) {
+	if(!preserveAnchor) {
 		this._anchorSection = null;
 	}
 	this._clearPendingClickIndex(this._activeGrid);
@@ -969,38 +950,38 @@ RowSelectionPlugin.prototype._clearSelectedRows = function (preserveAnchor) { //
 RowSelectionPlugin.prototype._selectByKey = function (direction, e, pageKey) {
 	e.preventDefault();
 
-	if (!this._anchorSection) { return; }
+	if(!this._anchorSection) { return; }
 
 	if(this._activeGrid != null){
 		this._activeGrid.focus();
 	}
 
-	var shiftKey = e.shiftKey;
-	var next = 0;
-	var rowLimit = this._anchorSection.getRowCount() - 1;
-	if (pageKey) {
-		var info = this._activeGrid.getVScrollView();
-		if (direction === -1) { // Up
-			if (info) {
+	let shiftKey = e.shiftKey;
+	let next = 0;
+	let rowLimit = this._anchorSection.getRowCount() - 1;
+	if(pageKey) {
+		let info = this._activeGrid.getVScrollView();
+		if(direction === -1) { // Up
+			if(info) {
 				next = this.getFirstSelectedIndex(this._anchorSection) <= info["firstFullRow"] ? info["prevPageRowIndex"] : info["firstFullRow"];
 			}
 		} else {
-			if (info) {
+			if(info) {
 				next = this.getLastSelectedIndex(this._anchorSection) >= info["lastFullRow"] ? info["nextPageRowIndex"] : info["lastFullRow"];
 			} else {
 				next = rowLimit;
 			}
 		}
 	} else {
-		if (direction === -1) {
+		if(direction === -1) {
 			next = this.getFirstSelectedIndex(this._anchorSection) + direction;
 		} else {
 			next = this.getLastSelectedIndex(this._anchorSection) + direction;
 		}
 	}
-	if (next < 0) {
-		var csp = this._getPlugin("ColumnSelectionPlugin");
-		if (!shiftKey && csp && csp["isEnabled"]()) {
+	if(next < 0) {
+		let csp = this._getPlugin("ColumnSelectionPlugin");
+		if(!shiftKey && csp && csp["isEnabled"]()) {
 			csp["selectSingleColumn"](null, this._activeGrid);
 
 			this.clearAllSelections();
@@ -1008,16 +989,16 @@ RowSelectionPlugin.prototype._selectByKey = function (direction, e, pageKey) {
 		}
 		this._scrollToRow(0);
 		return;
-	} else if (next > rowLimit) {
+	} else if(next > rowLimit) {
 		this._scrollToRow(rowLimit);
 		return;
 	}
 
-	if (this._dispatchBeforeSelection(e)) {
+	if(this._dispatchBeforeSelection(e)) {
 		return;
 	}
 
-	if (shiftKey && !this._singleSelMode) {
+	if(shiftKey && !this._singleSelMode) {
 		this._selectFromAnchorToTarget(this._anchorSection, next);
 	} else {
 		this._selectSingleRow(this._anchorSection, next);
@@ -1036,14 +1017,14 @@ RowSelectionPlugin.prototype._selectByKey = function (direction, e, pageKey) {
 */
 RowSelectionPlugin.prototype._sectionSetSelectedRow = function (section, rowIndex, isSelect) {
 	// set selection state to rowData when _basedOnContent === true
-	if (this._basedOnContent) {
-		var dv = (this._activeGrid) ? this._activeGrid.getDataSource() : null;
+	if(this._basedOnContent) {
+		let dv = (this._activeGrid) ? this._activeGrid.getDataSource() : null;
 
-		if (dv) {
-			var dataRow = this._getRow(dv, rowIndex);
-			if (dataRow) {
+		if(dv) {
+			let dataRow = this._getRow(dv, rowIndex);
+			if(dataRow) {
 				this._setData(dv, rowIndex, this._selectionField, isSelect);
-				if (isSelect) this._anchorRowId = dv.getRowId(rowIndex);
+				if(isSelect) this._anchorRowId = dv.getRowId(rowIndex);
 			}
 		}
 	} else {
@@ -1061,23 +1042,23 @@ RowSelectionPlugin.prototype._selectRangeOnSection = function (section, rowIndex
 	if(rowIndex == null) {
 		rowIndex = 0;
 	}
-	if (this._basedOnContent) { // TODO: handle the case where section is not content section
-		var dv = (this._activeGrid) ? this._activeGrid.getDataSource() : null;
+	if(this._basedOnContent) { // TODO: handle the case where section is not content section
+		let dv = (this._activeGrid) ? this._activeGrid.getDataSource() : null;
 
-		if (dv) {
-			var rids = dv.getVisibleRowIds(true);
+		if(dv) {
+			let rids = dv.getVisibleRowIds(true);
 			if(length == null) {
 				length = rids.length;
 			}
-			var toRowIndex = rowIndex + length;
+			let toRowIndex = rowIndex + length;
 			if(toRowIndex > rids.length) {
 				toRowIndex = rids.length;
 			}
-			var ridList = [];
-			var valueList = [];
-			for (var r = rowIndex; r < toRowIndex; r++) {
-				var dataRow = this._getRow(dv, r);
-				if (dataRow) {
+			let ridList = [];
+			let valueList = [];
+			for(let r = rowIndex; r < toRowIndex; r++) {
+				let dataRow = this._getRow(dv, r);
+				if(dataRow) {
 					ridList.push(rids[r]);
 					valueList.push(true);
 				}
@@ -1098,20 +1079,20 @@ RowSelectionPlugin.prototype._selectRangeOnSection = function (section, rowIndex
 * @param {boolean=} preserveAnchor
 */
 RowSelectionPlugin.prototype._sectionClearSelectedRows = function (section, preserveAnchor) {
-	if (this._basedOnContent) {
-		var selectedRowIds = this.getSelectedRowIds();
-		if (selectedRowIds) {
-			var dv = (this._activeGrid) ? this._activeGrid.getDataSource() : null;
-			if (dv) {
-				var len = selectedRowIds.length;
-				var valueList = new Array(len);
-				for (var i = 0; i < len; i++) {
+	if(this._basedOnContent) {
+		let selectedRowIds = this.getSelectedRowIds();
+		if(selectedRowIds) {
+			let dv = (this._activeGrid) ? this._activeGrid.getDataSource() : null;
+			if(dv) {
+				let len = selectedRowIds.length;
+				let valueList = new Array(len);
+				for(let i = 0; i < len; i++) {
 					valueList[i] = false;
 				}
 				this._setColumnData(dv, this._selectionField, valueList, selectedRowIds);
 			}
 		}
-		if (!preserveAnchor) {
+		if(!preserveAnchor) {
 			this._anchorRowId = "";
 		}
 	} else {
@@ -1126,7 +1107,7 @@ RowSelectionPlugin.prototype._sectionClearSelectedRows = function (section, pres
 * @return {boolean}
 */
 RowSelectionPlugin.prototype._selectSingleRow = function (section, rowIndex) {
-	if (!section) { return false; }
+	if(!section) { return false; }
 
 	this._clearSelectedRows(); // Deselect all rows
 	this._sectionSetSelectedRow(section, rowIndex, true); // The anchor row is set
@@ -1142,40 +1123,40 @@ RowSelectionPlugin.prototype._updateMenuIcon = function () {
 	if(!this._onMenuClicked) {
 		return false;
 	}
-	var host = this._activeGrid;
-	var startRowIndex = this.getFirstSelectedIndex();
+	let host = this._activeGrid;
+	let startRowIndex = this.getFirstSelectedIndex();
 	if(startRowIndex == null || !host) { // have no selected rows
 		return false;
 	}
-	var endRowIndex = this.getLastSelectedIndex();
-	var parentEl = host.getParent().parentNode;
+	let endRowIndex = this.getLastSelectedIndex();
+	let parentEl = host.getParent().parentNode;
 
 	if(!this._menuButton) {
 		this._menuButton = document.createElement("div");
 		this._menuButton.classList.add("row-selection-menu");
 		this._menuButton.addEventListener("click", this._onMenuClicked);
-		var coralIcon = document.createElement("ef-icon");
+		let coralIcon = document.createElement("ef-icon");
 		coralIcon.icon = "most-detail";
 		this._menuButton.appendChild(coralIcon);
 	}
 
 	parentEl.appendChild(this._menuButton);
 
-	var menuIconSize = 28; // Currently support 28 and 24 pixel only
-	var rowRect = host.getRowRect(startRowIndex, endRowIndex);
+	let menuIconSize = 28; // Currently support 28 and 24 pixel only
+	let rowRect = host.getRowRect(startRowIndex, endRowIndex);
 
 	if( rowRect.scrollViewSize <= rowRect.top || rowRect.height + rowRect.top <= 0) { // hide icon when have no selection in view both left and right
 		this._clearMenuIcon();
 		return false;
 	}
 
-	var leftOffset = rowRect.left + rowRect.width;
-	var topOffset = rowRect.top + rowRect.scrollViewTop;
+	let leftOffset = rowRect.left + rowRect.width;
+	let topOffset = rowRect.top + rowRect.scrollViewTop;
 	if(this._menuPosition !== "outside") {
 		menuIconSize = 24;
 		this._menuButton.classList.add("row-selection-menu-inside");
 		leftOffset = rowRect.left + rowRect.width - menuIconSize;
-		topOffset = rowRect.top  + rowRect.scrollViewTop - menuIconSize;
+		topOffset = rowRect.top + rowRect.scrollViewTop - menuIconSize;
 
 		if(rowRect.top < menuIconSize) {
 			topOffset = rowRect.top + rowRect.scrollViewTop;
@@ -1208,8 +1189,8 @@ RowSelectionPlugin.prototype._clearMenuIcon = function () {
 * @param {Object=} sectRef Grid SectionReference
 */
 RowSelectionPlugin.prototype._selectRowRange = function (rowIndex, length, sectRef) {
-	var section = this._getSection(sectRef);
-	if (section) {
+	let section = this._getSection(sectRef);
+	if(section) {
 		this._selectRangeOnSection(section, rowIndex, length);
 	}
 };
@@ -1219,23 +1200,23 @@ RowSelectionPlugin.prototype._selectRowRange = function (rowIndex, length, sectR
 * @param {number} rowIndex
 */
 RowSelectionPlugin.prototype._selectFromAnchorToTarget = function (section, rowIndex) {
-	if (this._anchorSection === section) {
-		var anchorRow = this.getRowAnchor(this._anchorSection);
-		if (anchorRow !== rowIndex) {
+	if(this._anchorSection === section) {
+		let anchorRow = this.getRowAnchor(this._anchorSection);
+		if(anchorRow !== rowIndex) {
 			this._clearSelectedRows(true); // Keep anchor section
 
 			// WORKAROUND: To support negative count
-			var direction = 1; // down
-			var startingRow = anchorRow;
-			var selectionCount = rowIndex - anchorRow;
-			if (selectionCount < 0) {
+			let direction = 1; // down
+			let startingRow = anchorRow;
+			let selectionCount = rowIndex - anchorRow;
+			if(selectionCount < 0) {
 				direction = -1; // up
 				startingRow = rowIndex;
 			}
 
 			this._selectRangeOnSection(section, startingRow, (selectionCount * direction) + 1);
 
-			if (!this._basedOnContent && this._anchorSection.setRowAnchor) {
+			if(!this._basedOnContent && this._anchorSection.setRowAnchor) {
 				//Make sure that the anchor stays at the same position
 				this._anchorSection.setRowAnchor(anchorRow);
 			}
@@ -1247,13 +1228,13 @@ RowSelectionPlugin.prototype._selectFromAnchorToTarget = function (section, rowI
 * @return {boolean}
 */
 RowSelectionPlugin.prototype._gotoPrevGrid = function () {
-	if (!this._activeGrid) { return false; }
+	if(!this._activeGrid) { return false; }
 
-	if (this._activeGrid === this._hosts[0]) { // This is the first grid
+	if(this._activeGrid === this._hosts[0]) { // This is the first grid
 		return false;
 	} else {
-		var curIndex = this._hosts.indexOf(this._activeGrid);
-		if (curIndex > 0) {
+		let curIndex = this._hosts.indexOf(this._activeGrid);
+		if(curIndex > 0) {
 			this._gotoGrid(curIndex - 1);
 			return true;
 		}
@@ -1264,14 +1245,14 @@ RowSelectionPlugin.prototype._gotoPrevGrid = function () {
 * @return {boolean}
 */
 RowSelectionPlugin.prototype._gotoNextGrid = function () {
-	if (!this._activeGrid) { return false; }
+	if(!this._activeGrid) { return false; }
 
-	var lastIndex = this._hosts.length - 1;
-	if (this._activeGrid === this._hosts[lastIndex]) { // This is the last grid
+	let lastIndex = this._hosts.length - 1;
+	if(this._activeGrid === this._hosts[lastIndex]) { // This is the last grid
 		return false;
 	} else {
-		var curIndex = this._hosts.indexOf(this._activeGrid);
-		if (curIndex >= 0) {
+		let curIndex = this._hosts.indexOf(this._activeGrid);
+		if(curIndex >= 0) {
 			this._gotoGrid(curIndex + 1);
 			return true;
 		}
@@ -1282,8 +1263,8 @@ RowSelectionPlugin.prototype._gotoNextGrid = function () {
 * @param {number} gridIndex
 */
 RowSelectionPlugin.prototype._gotoGrid = function (gridIndex) {
-	var anchorRow = this.getRowAnchor(this._anchorSection);
-	var sectionIndex = this._anchorSection.getIndex();
+	let anchorRow = this.getRowAnchor(this._anchorSection);
+	let sectionIndex = this._anchorSection.getIndex();
 	this.clearSelectedRows(); // Clear all current grid's selections
 	this.selectSingleRow(anchorRow, sectionIndex, this._hosts[gridIndex]); // go to the next grid at the first column
 	if(this._activeGrid != null){
@@ -1295,8 +1276,8 @@ RowSelectionPlugin.prototype._gotoGrid = function (gridIndex) {
 * @param {number} rowIndex
 */
 RowSelectionPlugin.prototype._scrollToRow = function (rowIndex) {
-	var host = this._hosts[0];
-	if (host) {
+	let host = this._hosts[0];
+	if(host) {
 		host.scrollToRow(null, rowIndex);
 	}
 };
@@ -1308,14 +1289,14 @@ RowSelectionPlugin.prototype._scrollToRow = function (rowIndex) {
 * @return {boolean} return rather clients prefer cancel selection or not
 */
 RowSelectionPlugin.prototype._dispatchBeforeSelection = function (e, ctx) {
-	if (this.hasListener("beforeSelection")) {
-		if (!ctx) {
-			var grid = this._activeGrid || this._hosts[0];
+	if(this.hasListener("beforeSelection")) {
+		if(!ctx) {
+			let grid = this._activeGrid || this._hosts[0];
 			ctx = grid ? grid.getRelativePosition(e) : {};
 		}
 		ctx["event"] = e;
 		this._dispatch("beforeSelection", ctx); // Ask clients if they want to cancel this event
-		if (ctx["cancel"]) {
+		if(ctx["cancel"]) {
 			return true; // return true if clients want to cancel this event
 		}
 	}
@@ -1328,23 +1309,23 @@ RowSelectionPlugin.prototype._dispatchBeforeSelection = function (e, ctx) {
 * @param {Object=} section ILayoutGrid
 */
 RowSelectionPlugin.prototype._dispatchSelectionChanged = function (e, rowIndex, section) {
-	if (this._activeGrid) {
-		var csp = this._getPlugin("ColumnSelectionPlugin");
-		if (csp && csp["isEnabled"]()) {
+	if(this._activeGrid) {
+		let csp = this._getPlugin("ColumnSelectionPlugin");
+		if(csp && csp["isEnabled"]()) {
 			csp["clearSelection"]();
 		}
-		var cep = this._getPlugin("CellEditingPlugin");
-		if (cep) {
+		let cep = this._getPlugin("CellEditingPlugin");
+		if(cep) {
 			cep.closeCellEditor();
 		}
 		cep = this._getPlugin("InCellEditingPlugin");
-		if (cep) {
+		if(cep) {
 			cep.closeCellEditor();
 		}
 	}
 
-	if (this.hasListener("selectionChanged")) {
-		var obj = {};
+	if(this.hasListener("selectionChanged")) {
+		let obj = {};
 		obj["selectedRows"] = this.getSelectedRows();
 		obj["rowIndex"] = (rowIndex != null) ? rowIndex : this.getRowAnchor(this._anchorSection);
 		obj["section"] = (section != null) ? section : this._anchorSection;